bways-report 0.1.5 → 0.1.6

package/fesm2022/bways-report.mjs

@@ -4,8 +4,8 @@ import * as i1 from '@angular/forms';
 import { Validators, FormControl, FormGroup, ReactiveFormsModule, FormsModule } from '@angular/forms';
 import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { isObservable, of, throwError, tap as tap$1 } from 'rxjs';
+import { catchError, map, tap, finalize, shareReplay, timeout } from 'rxjs/operators';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
-import { catchError, map, tap } from 'rxjs/operators';
 import * as i1$1 from '@angular/common';
 import { CommonModule, DOCUMENT } from '@angular/common';
 import { Router, ActivatedRoute, RouterModule } from '@angular/router';
@@ -511,14 +511,25 @@ function detectDefaultValueField(columns) {
     const exactMatch = columns.find((c) => ['id', 'key', 'code', 'guid', 'uuid'].includes(c.field.toLowerCase()));
     if (exactMatch)
         return exactMatch.field;
-    // 2. Check columns ending with 'id' or 'code' or 'key'
+    // 2. Check columns ending with 'acno', 'glacno', 'account_no', 'accountno', '_id', 'id'
+    const primaryIdMatch = columns.find((c) => {
+        const f = c.field.toLowerCase();
+        return (f.endsWith('_acno') ||
+            f.endsWith('acno') ||
+            f.includes('glacno') ||
+            f.endsWith('_id') ||
+            f.endsWith('id'));
+    });
+    if (primaryIdMatch)
+        return primaryIdMatch.field;
+    // 3. Check columns ending with 'code' or 'key'
     const suffixMatch = columns.find((c) => {
         const f = c.field.toLowerCase();
-        return f.endsWith('_id') || f.endsWith('id') || f.endsWith('_code') || f.endsWith('code');
+        return f.endsWith('_code') || f.endsWith('code') || f.endsWith('_key') || f.endsWith('key');
     });
     if (suffixMatch)
         return suffixMatch.field;
-    // 3. Fallback to first column
+    // 4. Fallback to first column
     return columns[0]?.field;
 }
 /**
@@ -960,57 +971,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         }] });
 
 /**
- * Generates a unique identifier with a given prefix.
- *
- * Safe for modern browser and Node environments.
- *
- * @param prefix - Prefix for the ID (default 'cmp').
- * @returns Unique string ID (e.g. 'cmp-4a7b2c9d').
+ * Abstract contract for discovering backend database schemas, entities, columns, and parameters.
+ * Enables the Visual Designer to discover tables and procedures without tight coupling.
  */
-function generateId(prefix = 'cmp') {
-    if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
-        return `${prefix}-${crypto.randomUUID().slice(0, 8)}`;
-    }
-    // Fallback random generation
-    const random = Math.random().toString(36).substring(2, 10);
-    return `${prefix}-${random}`;
+class ReportSchemaDiscoveryAdapter {
 }
 
 /**
- * Migration registry mapping sourceVersion -> targetVersion migration function.
- */
-const MIGRATIONS = {
-// Example migration for v1 to v2 in future:
-// 1: (def) => ({ ...def, schemaVersion: 2, ... }),
-};
-/**
- * Migrates a ReportDefinition to a target schema version.
- *
- * @param definition - Source report definition.
- * @param targetVersion - Desired schema version (default current version = 1).
- * @returns Migrated ReportDefinition.
+ * Abstract contract for fetching dynamic lookup/option data for report dropdown components.
  */
-function migrateDefinition(definition, targetVersion = 1) {
-    if (!definition) {
-        throw new SchemaVersionError(0, targetVersion, 'Invalid report definition provided');
-    }
-    const currentVersion = definition.schemaVersion ?? 1;
-    if (currentVersion === targetVersion) {
-        return { ...definition, schemaVersion: targetVersion };
-    }
-    if (currentVersion > targetVersion) {
-        throw new SchemaVersionError(currentVersion, targetVersion, `Cannot downgrade report schema from version ${currentVersion} to ${targetVersion}`);
-    }
-    let migrated = { ...definition };
-    for (let v = currentVersion; v < targetVersion; v++) {
-        const migrationFn = MIGRATIONS[v];
-        if (!migrationFn) {
-            throw new SchemaVersionError(v, v + 1, `No migration path defined from schema version ${v} to ${v + 1}`);
-        }
-        migrated = migrationFn(migrated);
-    }
-    migrated.schemaVersion = targetVersion;
-    return migrated;
+class ReportLookupAdapter {
 }
 
 /**
@@ -1248,6 +1218,186 @@ function toFieldKey(paramName) {
     return clean ? clean.charAt(0).toLowerCase() + clean.slice(1) : paramName;
 }
 
+/**
+ * Centralized service for discovering database schema entities, parameters,
+ * and column definitions.
+ *
+ * Provides a unified static + dynamic detection pipeline:
+ * If static schema metadata discovery fails (e.g. SQL Server stored procedures
+ * using #temp tables that cannot be analyzed statically), it automatically
+ * falls back to executing a safe dynamic sample query with the active parameter
+ * values and extracting column definitions from the result dataset.
+ */
+class ReportDataDiscoveryService {
+    discoveryAdapter = inject(ReportSchemaDiscoveryAdapter, { optional: true });
+    lookupAdapter = inject(ReportLookupAdapter, { optional: true });
+    sessionService = inject(ReportSessionContextService, { optional: true });
+    /**
+     * Retrieves all database tables, views, and stored procedures.
+     */
+    getEntities(types) {
+        if (!this.discoveryAdapter) {
+            return of([]);
+        }
+        return this.discoveryAdapter.getEntities(types).pipe(catchError((err) => {
+            console.warn('[ReportDataDiscoveryService] Failed to get entities:', err);
+            return of([]);
+        }));
+    }
+    /**
+     * Retrieves stored procedure parameter metadata.
+     */
+    getParameters(procedureName, schema = 'dbo') {
+        if (!procedureName || !this.discoveryAdapter) {
+            return of([]);
+        }
+        return this.discoveryAdapter.getParameters(procedureName, schema).pipe(catchError((err) => {
+            console.warn(`[ReportDataDiscoveryService] Failed to get parameters for ${procedureName}:`, err);
+            return of([]);
+        }));
+    }
+    /**
+     * Unified column detection:
+     * 1. Attempts static schema discovery via ReportSchemaDiscoveryAdapter.
+     * 2. If static discovery returns 0 columns or throws an error (e.g. SQL Error 11526 with #temp tables),
+     *    automatically runs dynamic sample query via ReportLookupAdapter using resolved parameters.
+     */
+    autoDetectColumns(entityName, entityType = 'stored_procedure', mappings = {}, schema = 'dbo') {
+        if (!entityName) {
+            return of([]);
+        }
+        // Try static discovery first
+        if (this.discoveryAdapter) {
+            return this.discoveryAdapter.getColumns(entityName, schema, entityType).pipe(map((cols) => {
+                if (cols && cols.length > 0) {
+                    return this.mapStaticColumnsToGrid(cols);
+                }
+                throw new Error('STATIC_EMPTY');
+            }), catchError(() => {
+                // Fallback to dynamic execution
+                return this.fallbackDynamicDetection(entityName, entityType, mappings, schema);
+            }));
+        }
+        return this.fallbackDynamicDetection(entityName, entityType, mappings, schema);
+    }
+    mapStaticColumnsToGrid(cols) {
+        return cols.map((c) => ({
+            field: c.field,
+            label: humanizeIdentifier(c.label || c.field),
+            dataType: c.dataType || 'string',
+            visible: true,
+            sortable: true,
+            align: c.dataType === 'number' ? 'right' : 'left',
+        }));
+    }
+    fallbackDynamicDetection(entityName, sourceType, mappings, schema = 'dbo') {
+        if (!this.lookupAdapter) {
+            return of([]);
+        }
+        const session = this.sessionService?.getCurrentSessionContext() ?? {};
+        const resolvedParams = resolveParameterMappings(mappings, session, {});
+        return this.lookupAdapter
+            .fetchOptions({
+            sourceType: (sourceType === 'stored_procedure' ? 'procedure' : sourceType),
+            entityName,
+            schema,
+            valueField: '',
+            displayField: '',
+            parameters: resolvedParams,
+        })
+            .pipe(map((items) => {
+            if (items && items.length > 0 && items[0].raw) {
+                const sampleRow = items[0].raw;
+                const keys = Object.keys(sampleRow);
+                if (keys.length > 0) {
+                    return keys.map((key) => {
+                        const val = sampleRow[key];
+                        let type = 'string';
+                        if (typeof val === 'number')
+                            type = 'number';
+                        else if (typeof val === 'boolean')
+                            type = 'boolean';
+                        else if (typeof val === 'string' && /^\d{4}-\d{2}-\d{2}/.test(val))
+                            type = 'date';
+                        return {
+                            field: key,
+                            label: humanizeIdentifier(key),
+                            dataType: type,
+                            visible: true,
+                            sortable: true,
+                            align: (type === 'number' ? 'right' : 'left'),
+                        };
+                    });
+                }
+            }
+            return [];
+        }), catchError((err) => {
+            console.warn(`[ReportDataDiscoveryService] Dynamic sample detection failed for ${entityName}:`, err);
+            return of([]);
+        }));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ReportDataDiscoveryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ReportDataDiscoveryService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ReportDataDiscoveryService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * Generates a unique identifier with a given prefix.
+ *
+ * Safe for modern browser and Node environments.
+ *
+ * @param prefix - Prefix for the ID (default 'cmp').
+ * @returns Unique string ID (e.g. 'cmp-4a7b2c9d').
+ */
+function generateId(prefix = 'cmp') {
+    if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
+        return `${prefix}-${crypto.randomUUID().slice(0, 8)}`;
+    }
+    // Fallback random generation
+    const random = Math.random().toString(36).substring(2, 10);
+    return `${prefix}-${random}`;
+}
+
+/**
+ * Migration registry mapping sourceVersion -> targetVersion migration function.
+ */
+const MIGRATIONS = {
+// Example migration for v1 to v2 in future:
+// 1: (def) => ({ ...def, schemaVersion: 2, ... }),
+};
+/**
+ * Migrates a ReportDefinition to a target schema version.
+ *
+ * @param definition - Source report definition.
+ * @param targetVersion - Desired schema version (default current version = 1).
+ * @returns Migrated ReportDefinition.
+ */
+function migrateDefinition(definition, targetVersion = 1) {
+    if (!definition) {
+        throw new SchemaVersionError(0, targetVersion, 'Invalid report definition provided');
+    }
+    const currentVersion = definition.schemaVersion ?? 1;
+    if (currentVersion === targetVersion) {
+        return { ...definition, schemaVersion: targetVersion };
+    }
+    if (currentVersion > targetVersion) {
+        throw new SchemaVersionError(currentVersion, targetVersion, `Cannot downgrade report schema from version ${currentVersion} to ${targetVersion}`);
+    }
+    let migrated = { ...definition };
+    for (let v = currentVersion; v < targetVersion; v++) {
+        const migrationFn = MIGRATIONS[v];
+        if (!migrationFn) {
+            throw new SchemaVersionError(v, v + 1, `No migration path defined from schema version ${v} to ${v + 1}`);
+        }
+        migrated = migrationFn(migrated);
+    }
+    migrated.schemaVersion = targetVersion;
+    return migrated;
+}
+
 /**
  * Data-access contracts — abstract classes the host application implements.
  *
@@ -1334,19 +1484,6 @@ class ReportPersistenceAdapter {
 class ReportTranslationAdapter {
 }
 
-/**
- * Abstract contract for discovering backend database schemas, entities, columns, and parameters.
- * Enables the Visual Designer to discover tables and procedures without tight coupling.
- */
-class ReportSchemaDiscoveryAdapter {
-}
-
-/**
- * Abstract contract for fetching dynamic lookup/option data for report dropdown components.
- */
-class ReportLookupAdapter {
-}
-
 /**
  * Shared API Contract DTOs for BWays Reporting.
  * These types match the REST contract implemented by the backend and used by HTTP adapters.
@@ -1468,13 +1605,14 @@ const HttpSchemaDiscoveryAdapter = HttpReportSchemaDiscoveryAdapter;
 
 /**
  * Built-in HTTP adapter for fetching dropdown options from backend database tables and SPs.
- * Includes in-memory caching with TTL and rich fallback mock data for testing.
+ * Includes in-memory caching with TTL, in-flight request deduplication, and fallback mock data.
  */
 class HttpReportLookupAdapter extends ReportLookupAdapter {
     http = inject(HttpClient, { optional: true });
     config = inject(REPORTING_CONFIG, { optional: true });
     sessionService = inject(ReportSessionContextService, { optional: true });
     cache = new Map();
+    inFlight = new Map();
     mockDataStore = {
         Customers: [
             { customerId: 101, customerName: 'Acme Corporation', branchId: 1, isActive: true },
@@ -1521,6 +1659,10 @@ class HttpReportLookupAdapter extends ReportLookupAdapter {
         if (cached && cached.expiresAt > now) {
             return of(cached.data);
         }
+        const running = this.inFlight.get(cacheKey);
+        if (running) {
+            return running;
+        }
         const baseUrl = this.config?.apiBaseUrl;
         if (baseUrl && this.http) {
             const session = this.sessionService?.sessionContext() ?? {};
@@ -1531,7 +1673,7 @@ class HttpReportLookupAdapter extends ReportLookupAdapter {
             if (session['branchId'] !== undefined && session['branchId'] !== null) {
                 headers = headers.set('X-Branch-Id', String(session['branchId']));
             }
-            return this.http.post(`${baseUrl}/lookup`, request, { headers }).pipe(map((response) => {
+            const obs$ = this.http.post(`${baseUrl}/lookup`, request, { headers }).pipe(map((response) => {
                 const rawItems = extractRowArray(response);
                 return rawItems.map((r) => {
                     if (r && typeof r === 'object' && 'value' in r) {
@@ -1544,17 +1686,21 @@ class HttpReportLookupAdapter extends ReportLookupAdapter {
             }), tap((items) => {
                 // Never cache empty results: parameters may simply not have been filled yet.
                 if (items.length > 0)
-                    this.setCache(cacheKey, items);
+                    this.setCache(cacheKey, items, 600);
             }), catchError((err) => {
                 const msg = err?.error?.message || err?.message || 'Lookup request failed';
                 return throwError(() => new Error(Array.isArray(msg) ? msg.join(', ') : msg));
-            }));
+            }), finalize(() => {
+                this.inFlight.delete(cacheKey);
+            }), shareReplay({ bufferSize: 1, refCount: true }));
+            this.inFlight.set(cacheKey, obs$);
+            return obs$;
         }
         const fallback = this.resolveMockOptions(request);
-        this.setCache(cacheKey, fallback);
+        this.setCache(cacheKey, fallback, 600);
         return of(fallback);
     }
-    setCache(key, data, ttlSeconds = 300) {
+    setCache(key, data, ttlSeconds = 600) {
         this.cache.set(key, {
             expiresAt: Date.now() + ttlSeconds * 1000,
             data,
@@ -2496,6 +2642,7 @@ class RptDropdownComponent {
     masterDataProvider = inject(MasterDataProvider, { optional: true });
     lookupAdapter = inject(ReportLookupAdapter, { optional: true });
     sessionService = inject(ReportSessionContextService, { optional: true });
+    reportingConfig = inject(REPORTING_CONFIG, { optional: true });
     elementRef = inject(ElementRef);
     config = input.required();
     control = input();
@@ -2712,6 +2859,16 @@ class RptDropdownComponent {
         this.searchTerm.set('');
         this.focusedIndex.set(-1);
     }
+    /** Manually retry loading dynamic lookup options (e.g. after database timeout). */
+    retryLookup(event) {
+        if (event) {
+            event.stopPropagation();
+            event.preventDefault();
+        }
+        this.lastRequestKey = '';
+        this.loadError.set(null);
+        this.reloadDataSourceOptions(this.sessionService?.sessionContext() ?? {});
+    }
     clearSearch(event) {
         event.stopPropagation();
         this.searchTerm.set('');
@@ -2800,7 +2957,7 @@ class RptDropdownComponent {
             if (form && this.isDynamicSource()) {
                 this.formChangesSub = form.valueChanges.subscribe(() => this.scheduleReload());
             }
-            untracked(() => this.reloadDataSourceOptions(session));
+            untracked(() => this.scheduleReload());
         }, { allowSignalWrites: true });
     }
     ngOnDestroy() {
@@ -2854,10 +3011,22 @@ class RptDropdownComponent {
             if (requestKey === this.lastRequestKey)
                 return; // nothing changed
             this.lastRequestKey = requestKey;
+            // Stored procedures on local databases can take a couple minutes to execute.
+            // Default timeout is 300,000ms (5 minutes), configurable via component properties or reportingConfig.
+            const timeoutMs = ds?.timeoutMs ||
+                this.config().properties?.['timeoutMs'] ||
+                this.reportingConfig?.lookupTimeoutMs ||
+                300000;
             this.isLoading.set(true);
             this.loadError.set(null);
             this.lookupSub?.unsubscribe();
-            this.lookupSub = this.lookupAdapter.fetchOptions(request).subscribe({
+            this.lookupSub = this.lookupAdapter
+                .fetchOptions(request)
+                .pipe(timeout({
+                each: timeoutMs,
+                with: () => throwError(() => new Error(`Lookup query timed out after ${Math.round(timeoutMs / 1000)}s (stored procedure took too long to respond on local database)`)),
+            }))
+                .subscribe({
                 next: (items) => {
                     this.isLoading.set(false);
                     this.hasLoaded.set(true);
@@ -2907,14 +3076,14 @@ class RptDropdownComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RptDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: RptDropdownComponent, isStandalone: true, selector: "rpt-dropdown", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, parentForm: { classPropertyName: "parentForm", publicName: "parentForm", isSignal: true, isRequired: false, transformFunction: null }, showStatus: { classPropertyName: "showStatus", publicName: "showStatus", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "onEscape()" }, properties: { "class.is-open": "isOpen()", "class.opens-above": "opensAbove()" } }, viewQueries: [{ propertyName: "comboboxWrapperEl", first: true, predicate: ["comboboxWrapper"], descendants: true, isSignal: true }, { propertyName: "searchInputEl", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "optionsListEl", first: true, predicate: ["optionsListEl"], descendants: true, isSignal: true }], ngImport: i0, template: "    <div class=\"rpt-field-group\">\n      @if (config().label) {\n        <label [for]=\"elementId()\" class=\"rpt-label\">\n          {{ config().label }}\n          @if (config().validation?.required) {\n            <span class=\"rpt-required-marker\">*</span>\n          }\n        </label>\n      }\n\n      @if (isSearchable()) {\n        <!-- Searchable Typeahead Combobox -->\n        <div class=\"rpt-combobox-wrapper\" #comboboxWrapper>\n          <button\n            type=\"button\"\n            class=\"rpt-combobox-trigger\"\n            [id]=\"elementId()\"\n            [class.rpt-invalid]=\"isInvalid()\"\n            [class.is-open]=\"isOpen()\"\n            [disabled]=\"formControl().disabled\"\n            [attr.aria-expanded]=\"isOpen()\"\n            [attr.aria-haspopup]=\"'listbox'\"\n            (click)=\"toggleOpen($event)\"\n            (keydown)=\"onTriggerKeydown($event)\"\n          >\n            <span class=\"trigger-label\" [class.is-placeholder]=\"!selectedOption()\">\n              {{ selectedOption() ? selectedOption()!.label : placeholder() }}\n            </span>\n\n            <div class=\"trigger-actions\">\n              @if (selectedOption() && !formControl().disabled) {\n                <span\n                  role=\"button\"\n                  tabindex=\"0\"\n                  class=\"trigger-clear-btn\"\n                  title=\"Clear selection\"\n                  aria-label=\"Clear selection\"\n                  (click)=\"clearSelection($event)\"\n                  (keydown.enter)=\"clearSelection($event)\"\n                  (keydown.space)=\"clearSelection($event)\"\n                >\n                  \u2715\n                </span>\n              }\n              <span class=\"trigger-arrow\" [class.rotated]=\"isOpen()\" aria-hidden=\"true\">\n                <svg width=\"12\" height=\"8\" viewBox=\"0 0 12 8\" fill=\"none\">\n                  <path d=\"M1 1.5L6 6.5L11 1.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                </svg>\n              </span>\n            </div>\n          </button>\n\n          @if (isOpen()) {\n            <div\n              class=\"rpt-combobox-menu\"\n              [class.opens-above]=\"opensAbove()\"\n              role=\"listbox\"\n              (click)=\"$event.stopPropagation()\"\n            >\n              <!-- Real-time Filter Search Box -->\n              <div class=\"combobox-search-box\">\n                <span class=\"combobox-search-icon\" aria-hidden=\"true\">\n                  <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n                    <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\n                  </svg>\n                </span>\n                <input\n                  #searchInput\n                  type=\"text\"\n                  class=\"combobox-search-input\"\n                  placeholder=\"Type to filter...\"\n                  [value]=\"searchTerm()\"\n                  [attr.aria-activedescendant]=\"focusedIndex() >= 0 ? (elementId() + '_opt_' + focusedIndex()) : null\"\n                  (input)=\"onSearchInput($event)\"\n                  (keydown)=\"onSearchKeydown($event)\"\n                />\n                @if (searchTerm()) {\n                  <button\n                    type=\"button\"\n                    class=\"combobox-search-clear\"\n                    title=\"Clear filter\"\n                    (click)=\"clearSearch($event)\"\n                  >\n                    \u2715\n                  </button>\n                }\n              </div>\n\n              <!-- Filtered Options List -->\n              <div class=\"combobox-options-list\" #optionsListEl>\n                @if (isLoading()) {\n                  <div class=\"combobox-status-row loading\">\n                    <span class=\"status-dot dot-pulse\"></span>\n                    <span>Loading options from database...</span>\n                  </div>\n                } @else if (loadError()) {\n                  <div class=\"combobox-status-row error\">\n                    <span>Error: {{ loadError() }}</span>\n                  </div>\n                } @else if (isDynamicSource() && hasLoaded() && allOptions().length === 0) {\n                  <div class=\"combobox-status-row empty\">\n                    <span>No records found (check parameters)</span>\n                  </div>\n                } @else if (filteredOptions().length === 0) {\n                  <div class=\"combobox-status-row empty\">\n                    <span>No options matching \"{{ searchTerm() }}\"</span>\n                  </div>\n                } @else {\n                  @for (opt of visibleFilteredOptions(); track opt.key; let i = $index) {\n                    <div\n                      role=\"option\"\n                      [id]=\"elementId() + '_opt_' + i\"\n                      class=\"combobox-option-item\"\n                      [class.is-selected]=\"isSelected(opt)\"\n                      [class.is-focused]=\"focusedIndex() === i\"\n                      [attr.aria-selected]=\"isSelected(opt)\"\n                      (click)=\"selectOption(opt)\"\n                      (mouseenter)=\"focusedIndex.set(i)\"\n                    >\n                      <span class=\"opt-label\">{{ opt.label }}</span>\n                      @if (isSelected(opt)) {\n                        <span class=\"opt-check\" aria-hidden=\"true\">\u2713</span>\n                      }\n                    </div>\n                  }\n                  @if (excessFilteredCount() > 0) {\n                    <div class=\"combobox-status-row hint\">\n                      <span>Showing {{ MAX_FILTER_RENDER }} of {{ filteredOptions().length }} matches. Type to refine.</span>\n                    </div>\n                  }\n                }\n              </div>\n            </div>\n          }\n        </div>\n      } @else {\n        <!-- Native Browser Select Fallback -->\n        <div class=\"rpt-select-wrapper\">\n          <select\n            [id]=\"elementId()\"\n            [formControl]=\"formControl()\"\n            [class.rpt-invalid]=\"isInvalid()\"\n            class=\"rpt-select\"\n          >\n            @if (isLoading()) {\n              <option value=\"\" disabled selected>Loading options from database...</option>\n            } @else if (loadError()) {\n              <option value=\"\" disabled selected>Error: {{ loadError() }}</option>\n            } @else if (isDynamicSource() && hasLoaded() && allOptions().length === 0) {\n              <option value=\"\" disabled selected>-- No records found (check parameters) --</option>\n            } @else if (placeholder()) {\n              <option value=\"\" [disabled]=\"config().validation?.required\">{{ placeholder() }}</option>\n            }\n            @for (opt of renderedOptions(); track opt.key) {\n              <option [value]=\"opt.key\">{{ opt.label }}</option>\n            }\n            @if (hasExcessOptions()) {\n              <option value=\"\" disabled>... and {{ excessOptionsCount() }} more records (refine filter) ...</option>\n            }\n          </select>\n          <div class=\"rpt-select-arrow\" aria-hidden=\"true\">\n            <svg width=\"12\" height=\"8\" viewBox=\"0 0 12 8\" fill=\"none\">\n              <path d=\"M1 1.5L6 6.5L11 1.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </div>\n        </div>\n      }\n\n      @if (showStatus() && isDynamicSource() && statusText()) {\n        <div class=\"rpt-status-badge\" [attr.data-status]=\"statusKind()\">\n          @switch (statusKind()) {\n            @case ('loading') {\n              <span class=\"status-dot dot-pulse\"></span>\n              <span>Loading from database\u2026</span>\n            }\n            @case ('ok') {\n              <span class=\"status-dot dot-ok\"></span>\n              <span>{{ dynamicOptions().length }} records loaded</span>\n            }\n            @case ('waiting') {\n              <span class=\"status-dot dot-warn\"></span>\n              <span>Waiting for:</span>\n              <div class=\"waiting-tokens\">\n                @for (k of waitingFor(); track k) {\n                  <span class=\"waiting-token\">{{ k }}</span>\n                }\n              </div>\n            }\n            @case ('error') {\n              <span class=\"status-dot dot-err\"></span>\n              <span>{{ loadError() }}</span>\n            }\n            @case ('empty') {\n              <span class=\"status-dot\"></span>\n              <span>No records found for parameters</span>\n            }\n            @default {\n              <span class=\"status-dot\"></span>\n            }\n          }\n        </div>\n      }\n\n      @if (errorMessage()) {\n        <span class=\"rpt-error-text\">{{ errorMessage() }}</span>\n      }\n    </div>", styles: [":host{display:block;width:100%;max-width:100%;min-width:0;box-sizing:border-box;font-family:var(--rpt-font-family, inherit);position:relative}.rpt-status-badge{display:flex;flex-wrap:wrap;align-items:center;gap:4px;font-size:.6875rem;padding:3px 6px;border-radius:4px;margin-top:4px;font-weight:500;line-height:1.3;max-width:100%;box-sizing:border-box;overflow:hidden;word-break:break-word}.rpt-status-badge>span{overflow-wrap:anywhere;word-break:break-word}.rpt-status-badge[data-status=loading]{background:#eff6ff;color:#2563eb;border:1px solid #dbeafe}.rpt-status-badge[data-status=ok]{background:#f0fdf4;color:#16a34a;border:1px solid #dcfce7}.rpt-status-badge[data-status=waiting]{background:#fffbeb;color:#d97706;border:1px solid #fef3c7}.rpt-status-badge[data-status=error]{background:#fef2f2;color:#dc2626;border:1px solid #fee2e2}.rpt-status-badge[data-status=empty]{background:#f8fafc;color:#64748b;border:1px solid #e2e8f0}.waiting-tokens{display:inline-flex;flex-wrap:wrap;align-items:center;gap:3px;margin-left:2px;max-width:100%}.waiting-token{background:#b453091f;border:1px solid rgba(180,83,9,.3);padding:1px 5px;border-radius:3px;font-weight:700;font-size:.625rem;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;box-sizing:border-box}.status-dot{width:6px;height:6px;border-radius:50%;background:currentColor}.dot-pulse{animation:rpt-pulse 1s infinite alternate}@keyframes rpt-pulse{0%{opacity:.3}to{opacity:1}}.rpt-field-group{display:flex;flex-direction:column;max-width:100%;min-width:0;gap:4px;box-sizing:border-box;position:relative}.rpt-label{font-size:var(--rpt-font-size-sm, .75rem);font-weight:500;color:var(--rpt-color-text, #0f172a);flex-shrink:0}.rpt-required-marker{color:var(--rpt-color-danger, #ef4444);margin-left:2px}.rpt-select-wrapper{position:relative;width:100%;flex:1;min-height:0;display:flex;align-items:center}.rpt-select{width:100%;height:100%;min-height:38px;box-sizing:border-box;padding:6px 36px 6px 12px;font-size:var(--rpt-font-size-base, .875rem);color:var(--rpt-color-text, #0f172a);background-color:var(--rpt-color-bg, #ffffff);border:1px solid var(--rpt-color-border, #cbd5e1);border-radius:var(--rpt-border-radius, 6px);appearance:none;-webkit-appearance:none;outline:none;cursor:pointer;transition:border-color var(--rpt-transition-speed, .15s) ease,box-shadow var(--rpt-transition-speed, .15s) ease}.rpt-select:hover:not(:disabled){border-color:var(--rpt-color-border-hover, #94a3b8)}.rpt-select:focus{border-color:var(--rpt-color-border-focus, #2563eb);box-shadow:var(--rpt-box-shadow-focus, 0 0 0 3px rgba(37, 99, 235, .25))}.rpt-select:disabled{background-color:var(--rpt-color-surface, #f8fafc);color:var(--rpt-color-text-muted, #64748b);cursor:not-allowed}.rpt-select.rpt-invalid{border-color:var(--rpt-color-danger, #ef4444)}.rpt-select.rpt-invalid:focus{box-shadow:0 0 0 3px #ef444440}.rpt-select-arrow{position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--rpt-color-text-muted, #64748b);display:flex;align-items:center}.rpt-combobox-wrapper{position:relative;width:100%;flex:1;min-height:0}.rpt-combobox-trigger{width:100%;height:100%;min-height:38px;box-sizing:border-box;padding:6px 10px 6px 12px;display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:var(--rpt-font-size-base, .875rem);font-family:inherit;color:var(--rpt-color-text, #0f172a);background-color:var(--rpt-color-bg, #ffffff);border:1px solid var(--rpt-color-border, #cbd5e1);border-radius:var(--rpt-border-radius, 6px);outline:none;cursor:pointer;text-align:left;transition:border-color var(--rpt-transition-speed, .15s) ease,box-shadow var(--rpt-transition-speed, .15s) ease}.rpt-combobox-trigger:hover:not(:disabled){border-color:var(--rpt-color-border-hover, #94a3b8)}.rpt-combobox-trigger:focus-visible,.rpt-combobox-trigger.is-open{border-color:var(--rpt-color-border-focus, #2563eb);box-shadow:var(--rpt-box-shadow-focus, 0 0 0 3px rgba(37, 99, 235, .25))}.rpt-combobox-trigger:disabled{background-color:var(--rpt-color-surface, #f8fafc);color:var(--rpt-color-text-muted, #64748b);cursor:not-allowed}.rpt-combobox-trigger.rpt-invalid{border-color:var(--rpt-color-danger, #ef4444)}.rpt-combobox-trigger.rpt-invalid:focus-visible{box-shadow:0 0 0 3px #ef444440}.trigger-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.3}.trigger-label.is-placeholder{color:var(--rpt-color-text-muted, #94a3b8)}.trigger-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}.trigger-clear-btn{display:flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;font-size:.6875rem;color:var(--rpt-color-text-muted, #64748b);background-color:#f1f5f9;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .15s ease,color .15s ease}.trigger-clear-btn:hover{background-color:#e2e8f0;color:var(--rpt-color-text, #0f172a)}.trigger-arrow{display:flex;align-items:center;color:var(--rpt-color-text-muted, #64748b);transition:transform .18s ease}.trigger-arrow.rotated{transform:rotate(180deg)}.rpt-combobox-menu{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:1050;background-color:var(--rpt-color-bg, #ffffff);border:1px solid var(--rpt-color-border, #cbd5e1);border-radius:var(--rpt-border-radius, 6px);box-shadow:0 10px 25px -5px #0000001f,0 8px 10px -6px #00000014;overflow:hidden;display:flex;flex-direction:column;animation:rpt-dropdown-pop .12s cubic-bezier(0,0,.2,1)}.rpt-combobox-menu.opens-above{top:auto;bottom:calc(100% + 4px);box-shadow:0 -10px 25px -5px #0000001f,0 -8px 10px -6px #00000014;animation:rpt-dropdown-pop-above .12s cubic-bezier(0,0,.2,1)}@keyframes rpt-dropdown-pop{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@keyframes rpt-dropdown-pop-above{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.combobox-search-box{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid var(--rpt-color-border, #e2e8f0);background-color:#f8fafc}.combobox-search-icon{color:var(--rpt-color-text-muted, #94a3b8);display:flex;align-items:center;flex-shrink:0}.combobox-search-input{flex:1;border:none;outline:none;background:transparent;font-size:var(--rpt-font-size-sm, .8125rem);font-family:inherit;color:var(--rpt-color-text, #0f172a);min-width:0}.combobox-search-input::placeholder{color:#94a3b8}.combobox-search-clear{border:none;background:#e2e8f0;color:#64748b;width:16px;height:16px;border-radius:50%;font-size:.625rem;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}.combobox-search-clear:hover{background:#cbd5e1;color:#0f172a}.combobox-options-list{max-height:220px;overflow-y:auto;overscroll-behavior:contain;padding:4px}.combobox-option-item{display:flex;align-items:center;justify-content:space-between;padding:7px 10px;border-radius:4px;font-size:var(--rpt-font-size-base, .84rem);color:var(--rpt-color-text, #0f172a);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .1s ease}.combobox-option-item.is-focused{background-color:var(--rpt-color-surface-hover, #f1f5f9)}.combobox-option-item.is-selected{background-color:#eff6ff;color:var(--rpt-color-primary, #2563eb);font-weight:600}.opt-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.opt-check{font-size:.875rem;font-weight:700;color:var(--rpt-color-primary, #2563eb);margin-left:8px}.combobox-status-row{padding:10px 12px;font-size:.78rem;text-align:center;color:var(--rpt-color-text-muted, #64748b)}.combobox-status-row.loading{display:flex;align-items:center;justify-content:center;gap:6px;color:#2563eb}.combobox-status-row.error{color:var(--rpt-color-danger, #dc2626)}.combobox-status-row.hint{font-size:.72rem;color:#94a3b8;border-top:1px dashed #e2e8f0;margin-top:4px;padding:6px}.rpt-error-text{font-size:.7rem;color:var(--rpt-color-danger, #ef4444);margin-top:3px;line-height:1.25;max-width:100%;overflow-wrap:anywhere;word-break:break-word;display:block}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: RptDropdownComponent, isStandalone: true, selector: "rpt-dropdown", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, parentForm: { classPropertyName: "parentForm", publicName: "parentForm", isSignal: true, isRequired: false, transformFunction: null }, showStatus: { classPropertyName: "showStatus", publicName: "showStatus", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "onEscape()" }, properties: { "class.is-open": "isOpen()", "class.opens-above": "opensAbove()" } }, viewQueries: [{ propertyName: "comboboxWrapperEl", first: true, predicate: ["comboboxWrapper"], descendants: true, isSignal: true }, { propertyName: "searchInputEl", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "optionsListEl", first: true, predicate: ["optionsListEl"], descendants: true, isSignal: true }], ngImport: i0, template: "    <div class=\"rpt-field-group\">\n      @if (config().label) {\n        <label [for]=\"elementId()\" class=\"rpt-label\">\n          {{ config().label }}\n          @if (config().validation?.required) {\n            <span class=\"rpt-required-marker\">*</span>\n          }\n        </label>\n      }\n\n      @if (isSearchable()) {\n        <!-- Searchable Typeahead Combobox -->\n        <div class=\"rpt-combobox-wrapper\" #comboboxWrapper>\n          <button\n            type=\"button\"\n            class=\"rpt-combobox-trigger\"\n            [id]=\"elementId()\"\n            [class.rpt-invalid]=\"isInvalid()\"\n            [class.is-open]=\"isOpen()\"\n            [disabled]=\"formControl().disabled\"\n            [attr.aria-expanded]=\"isOpen()\"\n            [attr.aria-haspopup]=\"'listbox'\"\n            (click)=\"toggleOpen($event)\"\n            (keydown)=\"onTriggerKeydown($event)\"\n          >\n            <span class=\"trigger-label\" [class.is-placeholder]=\"!selectedOption()\">\n              {{ selectedOption() ? selectedOption()!.label : placeholder() }}\n            </span>\n\n            <div class=\"trigger-actions\">\n              @if (isLoading()) {\n                <span class=\"status-dot dot-pulse\" style=\"color: #2563eb; margin-right: 4px;\" title=\"Executing query on database...\"></span>\n              }\n              @if (loadError() && !isLoading()) {\n                <button\n                  type=\"button\"\n                  class=\"trigger-retry-btn\"\n                  title=\"Retry database query\"\n                  aria-label=\"Retry database query\"\n                  (click)=\"retryLookup($event)\"\n                >\n                  \u21BB Retry\n                </button>\n              }\n              @if (selectedOption() && !formControl().disabled) {\n                <span\n                  role=\"button\"\n                  tabindex=\"0\"\n                  class=\"trigger-clear-btn\"\n                  title=\"Clear selection\"\n                  aria-label=\"Clear selection\"\n                  (click)=\"clearSelection($event)\"\n                  (keydown.enter)=\"clearSelection($event)\"\n                  (keydown.space)=\"clearSelection($event)\"\n                >\n                  \u2715\n                </span>\n              }\n              <span class=\"trigger-arrow\" [class.rotated]=\"isOpen()\" aria-hidden=\"true\">\n                <svg width=\"12\" height=\"8\" viewBox=\"0 0 12 8\" fill=\"none\">\n                  <path d=\"M1 1.5L6 6.5L11 1.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                </svg>\n              </span>\n            </div>\n          </button>\n\n          @if (isOpen()) {\n            <div\n              class=\"rpt-combobox-menu\"\n              [class.opens-above]=\"opensAbove()\"\n              role=\"listbox\"\n              (click)=\"$event.stopPropagation()\"\n            >\n              <!-- Real-time Filter Search Box -->\n              <div class=\"combobox-search-box\">\n                <span class=\"combobox-search-icon\" aria-hidden=\"true\">\n                  <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n                    <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\n                  </svg>\n                </span>\n                <input\n                  #searchInput\n                  type=\"text\"\n                  class=\"combobox-search-input\"\n                  placeholder=\"Type to filter...\"\n                  [value]=\"searchTerm()\"\n                  [attr.aria-activedescendant]=\"focusedIndex() >= 0 ? (elementId() + '_opt_' + focusedIndex()) : null\"\n                  (input)=\"onSearchInput($event)\"\n                  (keydown)=\"onSearchKeydown($event)\"\n                />\n                @if (searchTerm()) {\n                  <button\n                    type=\"button\"\n                    class=\"combobox-search-clear\"\n                    title=\"Clear filter\"\n                    (click)=\"clearSearch($event)\"\n                  >\n                    \u2715\n                  </button>\n                }\n              </div>\n\n              <!-- Filtered Options List -->\n              <div class=\"combobox-options-list\" #optionsListEl>\n                @if (waitingFor().length > 0) {\n                  <div class=\"combobox-status-row waiting\">\n                    <span>Waiting for {{ waitingLabel() }}...</span>\n                  </div>\n                } @else if (isLoading()) {\n                  <div class=\"combobox-status-row loading\">\n                    <span class=\"status-dot dot-pulse\"></span>\n                    <span>Executing query on database (may take 1\u20132 minutes on local database)...</span>\n                  </div>\n                } @else if (loadError()) {\n                  <div class=\"combobox-status-row error\">\n                    <span>Error: {{ loadError() }}</span>\n                    <button type=\"button\" class=\"combobox-retry-btn\" (click)=\"retryLookup($event)\">\u21BB Retry Query</button>\n                  </div>\n                } @else if (isDynamicSource() && hasLoaded() && allOptions().length === 0) {\n                  <div class=\"combobox-status-row empty\">\n                    <span>No records found (check parameters)</span>\n                  </div>\n                } @else if (filteredOptions().length === 0) {\n                  <div class=\"combobox-status-row empty\">\n                    <span>No options matching \"{{ searchTerm() }}\"</span>\n                  </div>\n                } @else {\n                  @for (opt of visibleFilteredOptions(); track opt.key; let i = $index) {\n                    <div\n                      role=\"option\"\n                      [id]=\"elementId() + '_opt_' + i\"\n                      class=\"combobox-option-item\"\n                      [class.is-selected]=\"isSelected(opt)\"\n                      [class.is-focused]=\"focusedIndex() === i\"\n                      [attr.aria-selected]=\"isSelected(opt)\"\n                      (click)=\"selectOption(opt)\"\n                      (mouseenter)=\"focusedIndex.set(i)\"\n                    >\n                      <span class=\"opt-label\">{{ opt.label }}</span>\n                      @if (isSelected(opt)) {\n                        <span class=\"opt-check\" aria-hidden=\"true\">\u2713</span>\n                      }\n                    </div>\n                  }\n                  @if (excessFilteredCount() > 0) {\n                    <div class=\"combobox-status-row hint\">\n                      <span>Showing {{ MAX_FILTER_RENDER }} of {{ filteredOptions().length }} matches. Type to refine.</span>\n                    </div>\n                  }\n                }\n              </div>\n            </div>\n          }\n        </div>\n      } @else {\n        <!-- Native Browser Select Fallback -->\n        <div class=\"rpt-select-wrapper\">\n          <select\n            [id]=\"elementId()\"\n            [formControl]=\"formControl()\"\n            [class.rpt-invalid]=\"isInvalid()\"\n            class=\"rpt-select\"\n          >\n            @if (waitingFor().length > 0) {\n              <option value=\"\" disabled selected>Waiting for {{ waitingLabel() }}...</option>\n            } @else if (isLoading()) {\n              <option value=\"\" disabled selected>Loading options from database...</option>\n            } @else if (loadError()) {\n              <option value=\"\" disabled selected>Error: {{ loadError() }}</option>\n            } @else if (isDynamicSource() && hasLoaded() && allOptions().length === 0) {\n              <option value=\"\" disabled selected>-- No records found (check parameters) --</option>\n            } @else if (placeholder()) {\n              <option value=\"\" [disabled]=\"config().validation?.required\">{{ placeholder() }}</option>\n            }\n            @for (opt of renderedOptions(); track opt.key) {\n              <option [value]=\"opt.key\">{{ opt.label }}</option>\n            }\n            @if (hasExcessOptions()) {\n              <option value=\"\" disabled>... and {{ excessOptionsCount() }} more records (refine filter) ...</option>\n            }\n          </select>\n          <div class=\"rpt-select-arrow\" aria-hidden=\"true\">\n            <svg width=\"12\" height=\"8\" viewBox=\"0 0 12 8\" fill=\"none\">\n              <path d=\"M1 1.5L6 6.5L11 1.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </div>\n        </div>\n      }\n\n      @if (showStatus() && isDynamicSource() && statusText()) {\n        <div class=\"rpt-status-badge\" [attr.data-status]=\"statusKind()\">\n          @switch (statusKind()) {\n            @case ('loading') {\n              <span class=\"status-dot dot-pulse\"></span>\n              <span>Loading from database\u2026</span>\n            }\n            @case ('ok') {\n              <span class=\"status-dot dot-ok\"></span>\n              <span>{{ dynamicOptions().length }} records loaded</span>\n            }\n            @case ('waiting') {\n              <span class=\"status-dot dot-warn\"></span>\n              <span>Waiting for:</span>\n              <div class=\"waiting-tokens\">\n                @for (k of waitingFor(); track k) {\n                  <span class=\"waiting-token\">{{ k }}</span>\n                }\n              </div>\n            }\n            @case ('error') {\n              <span class=\"status-dot dot-err\"></span>\n              <span>{{ loadError() }}</span>\n              <button type=\"button\" class=\"rpt-badge-retry-btn\" (click)=\"retryLookup($event)\">\u21BB Retry</button>\n            }\n            @case ('empty') {\n              <span class=\"status-dot\"></span>\n              <span>No records found for parameters</span>\n            }\n            @default {\n              <span class=\"status-dot\"></span>\n            }\n          }\n        </div>\n      }\n\n      @if (errorMessage()) {\n        <span class=\"rpt-error-text\">{{ errorMessage() }}</span>\n      }\n    </div>", styles: [":host{display:block;width:100%;max-width:100%;min-width:0;box-sizing:border-box;font-family:var(--rpt-font-family, inherit);position:relative}.rpt-status-badge{display:flex;flex-wrap:wrap;align-items:center;gap:4px;font-size:.6875rem;padding:3px 6px;border-radius:4px;margin-top:4px;font-weight:500;line-height:1.3;max-width:100%;box-sizing:border-box;overflow:hidden;word-break:break-word}.rpt-status-badge>span{overflow-wrap:anywhere;word-break:break-word}.rpt-status-badge[data-status=loading]{background:#eff6ff;color:#2563eb;border:1px solid #dbeafe}.rpt-status-badge[data-status=ok]{background:#f0fdf4;color:#16a34a;border:1px solid #dcfce7}.rpt-status-badge[data-status=waiting]{background:#fffbeb;color:#d97706;border:1px solid #fef3c7}.rpt-status-badge[data-status=error]{background:#fef2f2;color:#dc2626;border:1px solid #fee2e2}.rpt-status-badge[data-status=empty]{background:#f8fafc;color:#64748b;border:1px solid #e2e8f0}.waiting-tokens{display:inline-flex;flex-wrap:wrap;align-items:center;gap:3px;margin-left:2px;max-width:100%}.waiting-token{background:#b453091f;border:1px solid rgba(180,83,9,.3);padding:1px 5px;border-radius:3px;font-weight:700;font-size:.625rem;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;box-sizing:border-box}.status-dot{width:6px;height:6px;border-radius:50%;background:currentColor}.dot-pulse{animation:rpt-pulse 1s infinite alternate}@keyframes rpt-pulse{0%{opacity:.3}to{opacity:1}}.rpt-field-group{display:flex;flex-direction:column;max-width:100%;min-width:0;gap:4px;box-sizing:border-box;position:relative}.rpt-label{font-size:var(--rpt-font-size-sm, .75rem);font-weight:500;color:var(--rpt-color-text, #0f172a);flex-shrink:0}.rpt-required-marker{color:var(--rpt-color-danger, #ef4444);margin-left:2px}.rpt-select-wrapper{position:relative;width:100%;flex:1;min-height:0;display:flex;align-items:center}.rpt-select{width:100%;height:100%;min-height:38px;box-sizing:border-box;padding:6px 36px 6px 12px;font-size:var(--rpt-font-size-base, .875rem);color:var(--rpt-color-text, #0f172a);background-color:var(--rpt-color-bg, #ffffff);border:1px solid var(--rpt-color-border, #cbd5e1);border-radius:var(--rpt-border-radius, 6px);appearance:none;-webkit-appearance:none;outline:none;cursor:pointer;transition:border-color var(--rpt-transition-speed, .15s) ease,box-shadow var(--rpt-transition-speed, .15s) ease}.rpt-select:hover:not(:disabled){border-color:var(--rpt-color-border-hover, #94a3b8)}.rpt-select:focus{border-color:var(--rpt-color-border-focus, #2563eb);box-shadow:var(--rpt-box-shadow-focus, 0 0 0 3px rgba(37, 99, 235, .25))}.rpt-select:disabled{background-color:var(--rpt-color-surface, #f8fafc);color:var(--rpt-color-text-muted, #64748b);cursor:not-allowed}.rpt-select.rpt-invalid{border-color:var(--rpt-color-danger, #ef4444)}.rpt-select.rpt-invalid:focus{box-shadow:0 0 0 3px #ef444440}.rpt-select-arrow{position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--rpt-color-text-muted, #64748b);display:flex;align-items:center}.rpt-combobox-wrapper{position:relative;width:100%;flex:1;min-height:0}.rpt-combobox-trigger{width:100%;height:100%;min-height:38px;box-sizing:border-box;padding:6px 10px 6px 12px;display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:var(--rpt-font-size-base, .875rem);font-family:inherit;color:var(--rpt-color-text, #0f172a);background-color:var(--rpt-color-bg, #ffffff);border:1px solid var(--rpt-color-border, #cbd5e1);border-radius:var(--rpt-border-radius, 6px);outline:none;cursor:pointer;text-align:left;transition:border-color var(--rpt-transition-speed, .15s) ease,box-shadow var(--rpt-transition-speed, .15s) ease}.rpt-combobox-trigger:hover:not(:disabled){border-color:var(--rpt-color-border-hover, #94a3b8)}.rpt-combobox-trigger:focus-visible,.rpt-combobox-trigger.is-open{border-color:var(--rpt-color-border-focus, #2563eb);box-shadow:var(--rpt-box-shadow-focus, 0 0 0 3px rgba(37, 99, 235, .25))}.rpt-combobox-trigger:disabled{background-color:var(--rpt-color-surface, #f8fafc);color:var(--rpt-color-text-muted, #64748b);cursor:not-allowed}.rpt-combobox-trigger.rpt-invalid{border-color:var(--rpt-color-danger, #ef4444)}.rpt-combobox-trigger.rpt-invalid:focus-visible{box-shadow:0 0 0 3px #ef444440}.trigger-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.3}.trigger-label.is-placeholder{color:var(--rpt-color-text-muted, #94a3b8)}.trigger-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}.trigger-clear-btn{display:flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;font-size:.6875rem;color:var(--rpt-color-text-muted, #64748b);background-color:#f1f5f9;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .15s ease,color .15s ease}.trigger-clear-btn:hover{background-color:#e2e8f0;color:var(--rpt-color-text, #0f172a)}.trigger-arrow{display:flex;align-items:center;color:var(--rpt-color-text-muted, #64748b);transition:transform .18s ease}.trigger-arrow.rotated{transform:rotate(180deg)}.rpt-combobox-menu{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:1050;background-color:var(--rpt-color-bg, #ffffff);border:1px solid var(--rpt-color-border, #cbd5e1);border-radius:var(--rpt-border-radius, 6px);box-shadow:0 10px 25px -5px #0000001f,0 8px 10px -6px #00000014;overflow:hidden;display:flex;flex-direction:column;animation:rpt-dropdown-pop .12s cubic-bezier(0,0,.2,1)}.rpt-combobox-menu.opens-above{top:auto;bottom:calc(100% + 4px);box-shadow:0 -10px 25px -5px #0000001f,0 -8px 10px -6px #00000014;animation:rpt-dropdown-pop-above .12s cubic-bezier(0,0,.2,1)}@keyframes rpt-dropdown-pop{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@keyframes rpt-dropdown-pop-above{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.combobox-search-box{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid var(--rpt-color-border, #e2e8f0);background-color:#f8fafc}.combobox-search-icon{color:var(--rpt-color-text-muted, #94a3b8);display:flex;align-items:center;flex-shrink:0}.combobox-search-input{flex:1;border:none;outline:none;background:transparent;font-size:var(--rpt-font-size-sm, .8125rem);font-family:inherit;color:var(--rpt-color-text, #0f172a);min-width:0}.combobox-search-input::placeholder{color:#94a3b8}.combobox-search-clear{border:none;background:#e2e8f0;color:#64748b;width:16px;height:16px;border-radius:50%;font-size:.625rem;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}.combobox-search-clear:hover{background:#cbd5e1;color:#0f172a}.combobox-options-list{max-height:220px;overflow-y:auto;overscroll-behavior:contain;padding:4px}.combobox-option-item{display:flex;align-items:center;justify-content:space-between;padding:7px 10px;border-radius:4px;font-size:var(--rpt-font-size-base, .84rem);color:var(--rpt-color-text, #0f172a);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .1s ease}.combobox-option-item.is-focused{background-color:var(--rpt-color-surface-hover, #f1f5f9)}.combobox-option-item.is-selected{background-color:#eff6ff;color:var(--rpt-color-primary, #2563eb);font-weight:600}.opt-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.opt-check{font-size:.875rem;font-weight:700;color:var(--rpt-color-primary, #2563eb);margin-left:8px}.combobox-status-row{padding:10px 12px;font-size:.78rem;text-align:center;color:var(--rpt-color-text-muted, #64748b)}.combobox-status-row.loading{display:flex;align-items:center;justify-content:center;gap:6px;color:#2563eb}.combobox-status-row.error{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--rpt-color-danger, #dc2626)}.trigger-retry-btn,.combobox-retry-btn,.rpt-badge-retry-btn{display:inline-flex;align-items:center;gap:3px;font-size:.6875rem;font-weight:600;color:#dc2626;background:#fee2e2;border:1px solid #fca5a5;border-radius:4px;padding:2px 7px;cursor:pointer;line-height:1.2;transition:background-color .12s ease,color .12s ease}.trigger-retry-btn:hover,.combobox-retry-btn:hover,.rpt-badge-retry-btn:hover{background:#fecaca;color:#b91c1c;border-color:#f87171}.combobox-status-row.hint{font-size:.72rem;color:#94a3b8;border-top:1px dashed #e2e8f0;margin-top:4px;padding:6px}.rpt-error-text{font-size:.7rem;color:var(--rpt-color-danger, #ef4444);margin-top:3px;line-height:1.25;max-width:100%;overflow-wrap:anywhere;word-break:break-word;display:block}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RptDropdownComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rpt-dropdown', standalone: true, imports: [ReactiveFormsModule], host: {
                         '[class.is-open]': 'isOpen()',
                         '[class.opens-above]': 'opensAbove()',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "    <div class=\"rpt-field-group\">\n      @if (config().label) {\n        <label [for]=\"elementId()\" class=\"rpt-label\">\n          {{ config().label }}\n          @if (config().validation?.required) {\n            <span class=\"rpt-required-marker\">*</span>\n          }\n        </label>\n      }\n\n      @if (isSearchable()) {\n        <!-- Searchable Typeahead Combobox -->\n        <div class=\"rpt-combobox-wrapper\" #comboboxWrapper>\n          <button\n            type=\"button\"\n            class=\"rpt-combobox-trigger\"\n            [id]=\"elementId()\"\n            [class.rpt-invalid]=\"isInvalid()\"\n            [class.is-open]=\"isOpen()\"\n            [disabled]=\"formControl().disabled\"\n            [attr.aria-expanded]=\"isOpen()\"\n            [attr.aria-haspopup]=\"'listbox'\"\n            (click)=\"toggleOpen($event)\"\n            (keydown)=\"onTriggerKeydown($event)\"\n          >\n            <span class=\"trigger-label\" [class.is-placeholder]=\"!selectedOption()\">\n              {{ selectedOption() ? selectedOption()!.label : placeholder() }}\n            </span>\n\n            <div class=\"trigger-actions\">\n              @if (selectedOption() && !formControl().disabled) {\n                <span\n                  role=\"button\"\n                  tabindex=\"0\"\n                  class=\"trigger-clear-btn\"\n                  title=\"Clear selection\"\n                  aria-label=\"Clear selection\"\n                  (click)=\"clearSelection($event)\"\n                  (keydown.enter)=\"clearSelection($event)\"\n                  (keydown.space)=\"clearSelection($event)\"\n                >\n                  \u2715\n                </span>\n              }\n              <span class=\"trigger-arrow\" [class.rotated]=\"isOpen()\" aria-hidden=\"true\">\n                <svg width=\"12\" height=\"8\" viewBox=\"0 0 12 8\" fill=\"none\">\n                  <path d=\"M1 1.5L6 6.5L11 1.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                </svg>\n              </span>\n            </div>\n          </button>\n\n          @if (isOpen()) {\n            <div\n              class=\"rpt-combobox-menu\"\n              [class.opens-above]=\"opensAbove()\"\n              role=\"listbox\"\n              (click)=\"$event.stopPropagation()\"\n            >\n              <!-- Real-time Filter Search Box -->\n              <div class=\"combobox-search-box\">\n                <span class=\"combobox-search-icon\" aria-hidden=\"true\">\n                  <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n                    <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\n                  </svg>\n                </span>\n                <input\n                  #searchInput\n                  type=\"text\"\n                  class=\"combobox-search-input\"\n                  placeholder=\"Type to filter...\"\n                  [value]=\"searchTerm()\"\n                  [attr.aria-activedescendant]=\"focusedIndex() >= 0 ? (elementId() + '_opt_' + focusedIndex()) : null\"\n                  (input)=\"onSearchInput($event)\"\n                  (keydown)=\"onSearchKeydown($event)\"\n                />\n                @if (searchTerm()) {\n                  <button\n                    type=\"button\"\n                    class=\"combobox-search-clear\"\n                    title=\"Clear filter\"\n                    (click)=\"clearSearch($event)\"\n                  >\n                    \u2715\n                  </button>\n                }\n              </div>\n\n              <!-- Filtered Options List -->\n              <div class=\"combobox-options-list\" #optionsListEl>\n                @if (isLoading()) {\n                  <div class=\"combobox-status-row loading\">\n                    <span class=\"status-dot dot-pulse\"></span>\n                    <span>Loading options from database...</span>\n                  </div>\n                } @else if (loadError()) {\n                  <div class=\"combobox-status-row error\">\n                    <span>Error: {{ loadError() }}</span>\n                  </div>\n                } @else if (isDynamicSource() && hasLoaded() && allOptions().length === 0) {\n                  <div class=\"combobox-status-row empty\">\n                    <span>No records found (check parameters)</span>\n                  </div>\n                } @else if (filteredOptions().length === 0) {\n                  <div class=\"combobox-status-row empty\">\n                    <span>No options matching \"{{ searchTerm() }}\"</span>\n                  </div>\n                } @else {\n                  @for (opt of visibleFilteredOptions(); track opt.key; let i = $index) {\n                    <div\n                      role=\"option\"\n                      [id]=\"elementId() + '_opt_' + i\"\n                      class=\"combobox-option-item\"\n                      [class.is-selected]=\"isSelected(opt)\"\n                      [class.is-focused]=\"focusedIndex() === i\"\n                      [attr.aria-selected]=\"isSelected(opt)\"\n                      (click)=\"selectOption(opt)\"\n                      (mouseenter)=\"focusedIndex.set(i)\"\n                    >\n                      <span class=\"opt-label\">{{ opt.label }}</span>\n                      @if (isSelected(opt)) {\n                        <span class=\"opt-check\" aria-hidden=\"true\">\u2713</span>\n                      }\n                    </div>\n                  }\n                  @if (excessFilteredCount() > 0) {\n                    <div class=\"combobox-status-row hint\">\n                      <span>Showing {{ MAX_FILTER_RENDER }} of {{ filteredOptions().length }} matches. Type to refine.</span>\n                    </div>\n                  }\n                }\n              </div>\n            </div>\n          }\n        </div>\n      } @else {\n        <!-- Native Browser Select Fallback -->\n        <div class=\"rpt-select-wrapper\">\n          <select\n            [id]=\"elementId()\"\n            [formControl]=\"formControl()\"\n            [class.rpt-invalid]=\"isInvalid()\"\n            class=\"rpt-select\"\n          >\n            @if (isLoading()) {\n              <option value=\"\" disabled selected>Loading options from database...</option>\n            } @else if (loadError()) {\n              <option value=\"\" disabled selected>Error: {{ loadError() }}</option>\n            } @else if (isDynamicSource() && hasLoaded() && allOptions().length === 0) {\n              <option value=\"\" disabled selected>-- No records found (check parameters) --</option>\n            } @else if (placeholder()) {\n              <option value=\"\" [disabled]=\"config().validation?.required\">{{ placeholder() }}</option>\n            }\n            @for (opt of renderedOptions(); track opt.key) {\n              <option [value]=\"opt.key\">{{ opt.label }}</option>\n            }\n            @if (hasExcessOptions()) {\n              <option value=\"\" disabled>... and {{ excessOptionsCount() }} more records (refine filter) ...</option>\n            }\n          </select>\n          <div class=\"rpt-select-arrow\" aria-hidden=\"true\">\n            <svg width=\"12\" height=\"8\" viewBox=\"0 0 12 8\" fill=\"none\">\n              <path d=\"M1 1.5L6 6.5L11 1.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </div>\n        </div>\n      }\n\n      @if (showStatus() && isDynamicSource() && statusText()) {\n        <div class=\"rpt-status-badge\" [attr.data-status]=\"statusKind()\">\n          @switch (statusKind()) {\n            @case ('loading') {\n              <span class=\"status-dot dot-pulse\"></span>\n              <span>Loading from database\u2026</span>\n            }\n            @case ('ok') {\n              <span class=\"status-dot dot-ok\"></span>\n              <span>{{ dynamicOptions().length }} records loaded</span>\n            }\n            @case ('waiting') {\n              <span class=\"status-dot dot-warn\"></span>\n              <span>Waiting for:</span>\n              <div class=\"waiting-tokens\">\n                @for (k of waitingFor(); track k) {\n                  <span class=\"waiting-token\">{{ k }}</span>\n                }\n              </div>\n            }\n            @case ('error') {\n              <span class=\"status-dot dot-err\"></span>\n              <span>{{ loadError() }}</span>\n            }\n            @case ('empty') {\n              <span class=\"status-dot\"></span>\n              <span>No records found for parameters</span>\n            }\n            @default {\n              <span class=\"status-dot\"></span>\n            }\n          }\n        </div>\n      }\n\n      @if (errorMessage()) {\n        <span class=\"rpt-error-text\">{{ errorMessage() }}</span>\n      }\n    </div>", styles: [":host{display:block;width:100%;max-width:100%;min-width:0;box-sizing:border-box;font-family:var(--rpt-font-family, inherit);position:relative}.rpt-status-badge{display:flex;flex-wrap:wrap;align-items:center;gap:4px;font-size:.6875rem;padding:3px 6px;border-radius:4px;margin-top:4px;font-weight:500;line-height:1.3;max-width:100%;box-sizing:border-box;overflow:hidden;word-break:break-word}.rpt-status-badge>span{overflow-wrap:anywhere;word-break:break-word}.rpt-status-badge[data-status=loading]{background:#eff6ff;color:#2563eb;border:1px solid #dbeafe}.rpt-status-badge[data-status=ok]{background:#f0fdf4;color:#16a34a;border:1px solid #dcfce7}.rpt-status-badge[data-status=waiting]{background:#fffbeb;color:#d97706;border:1px solid #fef3c7}.rpt-status-badge[data-status=error]{background:#fef2f2;color:#dc2626;border:1px solid #fee2e2}.rpt-status-badge[data-status=empty]{background:#f8fafc;color:#64748b;border:1px solid #e2e8f0}.waiting-tokens{display:inline-flex;flex-wrap:wrap;align-items:center;gap:3px;margin-left:2px;max-width:100%}.waiting-token{background:#b453091f;border:1px solid rgba(180,83,9,.3);padding:1px 5px;border-radius:3px;font-weight:700;font-size:.625rem;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;box-sizing:border-box}.status-dot{width:6px;height:6px;border-radius:50%;background:currentColor}.dot-pulse{animation:rpt-pulse 1s infinite alternate}@keyframes rpt-pulse{0%{opacity:.3}to{opacity:1}}.rpt-field-group{display:flex;flex-direction:column;max-width:100%;min-width:0;gap:4px;box-sizing:border-box;position:relative}.rpt-label{font-size:var(--rpt-font-size-sm, .75rem);font-weight:500;color:var(--rpt-color-text, #0f172a);flex-shrink:0}.rpt-required-marker{color:var(--rpt-color-danger, #ef4444);margin-left:2px}.rpt-select-wrapper{position:relative;width:100%;flex:1;min-height:0;display:flex;align-items:center}.rpt-select{width:100%;height:100%;min-height:38px;box-sizing:border-box;padding:6px 36px 6px 12px;font-size:var(--rpt-font-size-base, .875rem);color:var(--rpt-color-text, #0f172a);background-color:var(--rpt-color-bg, #ffffff);border:1px solid var(--rpt-color-border, #cbd5e1);border-radius:var(--rpt-border-radius, 6px);appearance:none;-webkit-appearance:none;outline:none;cursor:pointer;transition:border-color var(--rpt-transition-speed, .15s) ease,box-shadow var(--rpt-transition-speed, .15s) ease}.rpt-select:hover:not(:disabled){border-color:var(--rpt-color-border-hover, #94a3b8)}.rpt-select:focus{border-color:var(--rpt-color-border-focus, #2563eb);box-shadow:var(--rpt-box-shadow-focus, 0 0 0 3px rgba(37, 99, 235, .25))}.rpt-select:disabled{background-color:var(--rpt-color-surface, #f8fafc);color:var(--rpt-color-text-muted, #64748b);cursor:not-allowed}.rpt-select.rpt-invalid{border-color:var(--rpt-color-danger, #ef4444)}.rpt-select.rpt-invalid:focus{box-shadow:0 0 0 3px #ef444440}.rpt-select-arrow{position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--rpt-color-text-muted, #64748b);display:flex;align-items:center}.rpt-combobox-wrapper{position:relative;width:100%;flex:1;min-height:0}.rpt-combobox-trigger{width:100%;height:100%;min-height:38px;box-sizing:border-box;padding:6px 10px 6px 12px;display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:var(--rpt-font-size-base, .875rem);font-family:inherit;color:var(--rpt-color-text, #0f172a);background-color:var(--rpt-color-bg, #ffffff);border:1px solid var(--rpt-color-border, #cbd5e1);border-radius:var(--rpt-border-radius, 6px);outline:none;cursor:pointer;text-align:left;transition:border-color var(--rpt-transition-speed, .15s) ease,box-shadow var(--rpt-transition-speed, .15s) ease}.rpt-combobox-trigger:hover:not(:disabled){border-color:var(--rpt-color-border-hover, #94a3b8)}.rpt-combobox-trigger:focus-visible,.rpt-combobox-trigger.is-open{border-color:var(--rpt-color-border-focus, #2563eb);box-shadow:var(--rpt-box-shadow-focus, 0 0 0 3px rgba(37, 99, 235, .25))}.rpt-combobox-trigger:disabled{background-color:var(--rpt-color-surface, #f8fafc);color:var(--rpt-color-text-muted, #64748b);cursor:not-allowed}.rpt-combobox-trigger.rpt-invalid{border-color:var(--rpt-color-danger, #ef4444)}.rpt-combobox-trigger.rpt-invalid:focus-visible{box-shadow:0 0 0 3px #ef444440}.trigger-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.3}.trigger-label.is-placeholder{color:var(--rpt-color-text-muted, #94a3b8)}.trigger-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}.trigger-clear-btn{display:flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;font-size:.6875rem;color:var(--rpt-color-text-muted, #64748b);background-color:#f1f5f9;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .15s ease,color .15s ease}.trigger-clear-btn:hover{background-color:#e2e8f0;color:var(--rpt-color-text, #0f172a)}.trigger-arrow{display:flex;align-items:center;color:var(--rpt-color-text-muted, #64748b);transition:transform .18s ease}.trigger-arrow.rotated{transform:rotate(180deg)}.rpt-combobox-menu{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:1050;background-color:var(--rpt-color-bg, #ffffff);border:1px solid var(--rpt-color-border, #cbd5e1);border-radius:var(--rpt-border-radius, 6px);box-shadow:0 10px 25px -5px #0000001f,0 8px 10px -6px #00000014;overflow:hidden;display:flex;flex-direction:column;animation:rpt-dropdown-pop .12s cubic-bezier(0,0,.2,1)}.rpt-combobox-menu.opens-above{top:auto;bottom:calc(100% + 4px);box-shadow:0 -10px 25px -5px #0000001f,0 -8px 10px -6px #00000014;animation:rpt-dropdown-pop-above .12s cubic-bezier(0,0,.2,1)}@keyframes rpt-dropdown-pop{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@keyframes rpt-dropdown-pop-above{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.combobox-search-box{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid var(--rpt-color-border, #e2e8f0);background-color:#f8fafc}.combobox-search-icon{color:var(--rpt-color-text-muted, #94a3b8);display:flex;align-items:center;flex-shrink:0}.combobox-search-input{flex:1;border:none;outline:none;background:transparent;font-size:var(--rpt-font-size-sm, .8125rem);font-family:inherit;color:var(--rpt-color-text, #0f172a);min-width:0}.combobox-search-input::placeholder{color:#94a3b8}.combobox-search-clear{border:none;background:#e2e8f0;color:#64748b;width:16px;height:16px;border-radius:50%;font-size:.625rem;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}.combobox-search-clear:hover{background:#cbd5e1;color:#0f172a}.combobox-options-list{max-height:220px;overflow-y:auto;overscroll-behavior:contain;padding:4px}.combobox-option-item{display:flex;align-items:center;justify-content:space-between;padding:7px 10px;border-radius:4px;font-size:var(--rpt-font-size-base, .84rem);color:var(--rpt-color-text, #0f172a);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .1s ease}.combobox-option-item.is-focused{background-color:var(--rpt-color-surface-hover, #f1f5f9)}.combobox-option-item.is-selected{background-color:#eff6ff;color:var(--rpt-color-primary, #2563eb);font-weight:600}.opt-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.opt-check{font-size:.875rem;font-weight:700;color:var(--rpt-color-primary, #2563eb);margin-left:8px}.combobox-status-row{padding:10px 12px;font-size:.78rem;text-align:center;color:var(--rpt-color-text-muted, #64748b)}.combobox-status-row.loading{display:flex;align-items:center;justify-content:center;gap:6px;color:#2563eb}.combobox-status-row.error{color:var(--rpt-color-danger, #dc2626)}.combobox-status-row.hint{font-size:.72rem;color:#94a3b8;border-top:1px dashed #e2e8f0;margin-top:4px;padding:6px}.rpt-error-text{font-size:.7rem;color:var(--rpt-color-danger, #ef4444);margin-top:3px;line-height:1.25;max-width:100%;overflow-wrap:anywhere;word-break:break-word;display:block}\n"] }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "    <div class=\"rpt-field-group\">\n      @if (config().label) {\n        <label [for]=\"elementId()\" class=\"rpt-label\">\n          {{ config().label }}\n          @if (config().validation?.required) {\n            <span class=\"rpt-required-marker\">*</span>\n          }\n        </label>\n      }\n\n      @if (isSearchable()) {\n        <!-- Searchable Typeahead Combobox -->\n        <div class=\"rpt-combobox-wrapper\" #comboboxWrapper>\n          <button\n            type=\"button\"\n            class=\"rpt-combobox-trigger\"\n            [id]=\"elementId()\"\n            [class.rpt-invalid]=\"isInvalid()\"\n            [class.is-open]=\"isOpen()\"\n            [disabled]=\"formControl().disabled\"\n            [attr.aria-expanded]=\"isOpen()\"\n            [attr.aria-haspopup]=\"'listbox'\"\n            (click)=\"toggleOpen($event)\"\n            (keydown)=\"onTriggerKeydown($event)\"\n          >\n            <span class=\"trigger-label\" [class.is-placeholder]=\"!selectedOption()\">\n              {{ selectedOption() ? selectedOption()!.label : placeholder() }}\n            </span>\n\n            <div class=\"trigger-actions\">\n              @if (isLoading()) {\n                <span class=\"status-dot dot-pulse\" style=\"color: #2563eb; margin-right: 4px;\" title=\"Executing query on database...\"></span>\n              }\n              @if (loadError() && !isLoading()) {\n                <button\n                  type=\"button\"\n                  class=\"trigger-retry-btn\"\n                  title=\"Retry database query\"\n                  aria-label=\"Retry database query\"\n                  (click)=\"retryLookup($event)\"\n                >\n                  \u21BB Retry\n                </button>\n              }\n              @if (selectedOption() && !formControl().disabled) {\n                <span\n                  role=\"button\"\n                  tabindex=\"0\"\n                  class=\"trigger-clear-btn\"\n                  title=\"Clear selection\"\n                  aria-label=\"Clear selection\"\n                  (click)=\"clearSelection($event)\"\n                  (keydown.enter)=\"clearSelection($event)\"\n                  (keydown.space)=\"clearSelection($event)\"\n                >\n                  \u2715\n                </span>\n              }\n              <span class=\"trigger-arrow\" [class.rotated]=\"isOpen()\" aria-hidden=\"true\">\n                <svg width=\"12\" height=\"8\" viewBox=\"0 0 12 8\" fill=\"none\">\n                  <path d=\"M1 1.5L6 6.5L11 1.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                </svg>\n              </span>\n            </div>\n          </button>\n\n          @if (isOpen()) {\n            <div\n              class=\"rpt-combobox-menu\"\n              [class.opens-above]=\"opensAbove()\"\n              role=\"listbox\"\n              (click)=\"$event.stopPropagation()\"\n            >\n              <!-- Real-time Filter Search Box -->\n              <div class=\"combobox-search-box\">\n                <span class=\"combobox-search-icon\" aria-hidden=\"true\">\n                  <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n                    <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\n                  </svg>\n                </span>\n                <input\n                  #searchInput\n                  type=\"text\"\n                  class=\"combobox-search-input\"\n                  placeholder=\"Type to filter...\"\n                  [value]=\"searchTerm()\"\n                  [attr.aria-activedescendant]=\"focusedIndex() >= 0 ? (elementId() + '_opt_' + focusedIndex()) : null\"\n                  (input)=\"onSearchInput($event)\"\n                  (keydown)=\"onSearchKeydown($event)\"\n                />\n                @if (searchTerm()) {\n                  <button\n                    type=\"button\"\n                    class=\"combobox-search-clear\"\n                    title=\"Clear filter\"\n                    (click)=\"clearSearch($event)\"\n                  >\n                    \u2715\n                  </button>\n                }\n              </div>\n\n              <!-- Filtered Options List -->\n              <div class=\"combobox-options-list\" #optionsListEl>\n                @if (waitingFor().length > 0) {\n                  <div class=\"combobox-status-row waiting\">\n                    <span>Waiting for {{ waitingLabel() }}...</span>\n                  </div>\n                } @else if (isLoading()) {\n                  <div class=\"combobox-status-row loading\">\n                    <span class=\"status-dot dot-pulse\"></span>\n                    <span>Executing query on database (may take 1\u20132 minutes on local database)...</span>\n                  </div>\n                } @else if (loadError()) {\n                  <div class=\"combobox-status-row error\">\n                    <span>Error: {{ loadError() }}</span>\n                    <button type=\"button\" class=\"combobox-retry-btn\" (click)=\"retryLookup($event)\">\u21BB Retry Query</button>\n                  </div>\n                } @else if (isDynamicSource() && hasLoaded() && allOptions().length === 0) {\n                  <div class=\"combobox-status-row empty\">\n                    <span>No records found (check parameters)</span>\n                  </div>\n                } @else if (filteredOptions().length === 0) {\n                  <div class=\"combobox-status-row empty\">\n                    <span>No options matching \"{{ searchTerm() }}\"</span>\n                  </div>\n                } @else {\n                  @for (opt of visibleFilteredOptions(); track opt.key; let i = $index) {\n                    <div\n                      role=\"option\"\n                      [id]=\"elementId() + '_opt_' + i\"\n                      class=\"combobox-option-item\"\n                      [class.is-selected]=\"isSelected(opt)\"\n                      [class.is-focused]=\"focusedIndex() === i\"\n                      [attr.aria-selected]=\"isSelected(opt)\"\n                      (click)=\"selectOption(opt)\"\n                      (mouseenter)=\"focusedIndex.set(i)\"\n                    >\n                      <span class=\"opt-label\">{{ opt.label }}</span>\n                      @if (isSelected(opt)) {\n                        <span class=\"opt-check\" aria-hidden=\"true\">\u2713</span>\n                      }\n                    </div>\n                  }\n                  @if (excessFilteredCount() > 0) {\n                    <div class=\"combobox-status-row hint\">\n                      <span>Showing {{ MAX_FILTER_RENDER }} of {{ filteredOptions().length }} matches. Type to refine.</span>\n                    </div>\n                  }\n                }\n              </div>\n            </div>\n          }\n        </div>\n      } @else {\n        <!-- Native Browser Select Fallback -->\n        <div class=\"rpt-select-wrapper\">\n          <select\n            [id]=\"elementId()\"\n            [formControl]=\"formControl()\"\n            [class.rpt-invalid]=\"isInvalid()\"\n            class=\"rpt-select\"\n          >\n            @if (waitingFor().length > 0) {\n              <option value=\"\" disabled selected>Waiting for {{ waitingLabel() }}...</option>\n            } @else if (isLoading()) {\n              <option value=\"\" disabled selected>Loading options from database...</option>\n            } @else if (loadError()) {\n              <option value=\"\" disabled selected>Error: {{ loadError() }}</option>\n            } @else if (isDynamicSource() && hasLoaded() && allOptions().length === 0) {\n              <option value=\"\" disabled selected>-- No records found (check parameters) --</option>\n            } @else if (placeholder()) {\n              <option value=\"\" [disabled]=\"config().validation?.required\">{{ placeholder() }}</option>\n            }\n            @for (opt of renderedOptions(); track opt.key) {\n              <option [value]=\"opt.key\">{{ opt.label }}</option>\n            }\n            @if (hasExcessOptions()) {\n              <option value=\"\" disabled>... and {{ excessOptionsCount() }} more records (refine filter) ...</option>\n            }\n          </select>\n          <div class=\"rpt-select-arrow\" aria-hidden=\"true\">\n            <svg width=\"12\" height=\"8\" viewBox=\"0 0 12 8\" fill=\"none\">\n              <path d=\"M1 1.5L6 6.5L11 1.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </div>\n        </div>\n      }\n\n      @if (showStatus() && isDynamicSource() && statusText()) {\n        <div class=\"rpt-status-badge\" [attr.data-status]=\"statusKind()\">\n          @switch (statusKind()) {\n            @case ('loading') {\n              <span class=\"status-dot dot-pulse\"></span>\n              <span>Loading from database\u2026</span>\n            }\n            @case ('ok') {\n              <span class=\"status-dot dot-ok\"></span>\n              <span>{{ dynamicOptions().length }} records loaded</span>\n            }\n            @case ('waiting') {\n              <span class=\"status-dot dot-warn\"></span>\n              <span>Waiting for:</span>\n              <div class=\"waiting-tokens\">\n                @for (k of waitingFor(); track k) {\n                  <span class=\"waiting-token\">{{ k }}</span>\n                }\n              </div>\n            }\n            @case ('error') {\n              <span class=\"status-dot dot-err\"></span>\n              <span>{{ loadError() }}</span>\n              <button type=\"button\" class=\"rpt-badge-retry-btn\" (click)=\"retryLookup($event)\">\u21BB Retry</button>\n            }\n            @case ('empty') {\n              <span class=\"status-dot\"></span>\n              <span>No records found for parameters</span>\n            }\n            @default {\n              <span class=\"status-dot\"></span>\n            }\n          }\n        </div>\n      }\n\n      @if (errorMessage()) {\n        <span class=\"rpt-error-text\">{{ errorMessage() }}</span>\n      }\n    </div>", styles: [":host{display:block;width:100%;max-width:100%;min-width:0;box-sizing:border-box;font-family:var(--rpt-font-family, inherit);position:relative}.rpt-status-badge{display:flex;flex-wrap:wrap;align-items:center;gap:4px;font-size:.6875rem;padding:3px 6px;border-radius:4px;margin-top:4px;font-weight:500;line-height:1.3;max-width:100%;box-sizing:border-box;overflow:hidden;word-break:break-word}.rpt-status-badge>span{overflow-wrap:anywhere;word-break:break-word}.rpt-status-badge[data-status=loading]{background:#eff6ff;color:#2563eb;border:1px solid #dbeafe}.rpt-status-badge[data-status=ok]{background:#f0fdf4;color:#16a34a;border:1px solid #dcfce7}.rpt-status-badge[data-status=waiting]{background:#fffbeb;color:#d97706;border:1px solid #fef3c7}.rpt-status-badge[data-status=error]{background:#fef2f2;color:#dc2626;border:1px solid #fee2e2}.rpt-status-badge[data-status=empty]{background:#f8fafc;color:#64748b;border:1px solid #e2e8f0}.waiting-tokens{display:inline-flex;flex-wrap:wrap;align-items:center;gap:3px;margin-left:2px;max-width:100%}.waiting-token{background:#b453091f;border:1px solid rgba(180,83,9,.3);padding:1px 5px;border-radius:3px;font-weight:700;font-size:.625rem;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;box-sizing:border-box}.status-dot{width:6px;height:6px;border-radius:50%;background:currentColor}.dot-pulse{animation:rpt-pulse 1s infinite alternate}@keyframes rpt-pulse{0%{opacity:.3}to{opacity:1}}.rpt-field-group{display:flex;flex-direction:column;max-width:100%;min-width:0;gap:4px;box-sizing:border-box;position:relative}.rpt-label{font-size:var(--rpt-font-size-sm, .75rem);font-weight:500;color:var(--rpt-color-text, #0f172a);flex-shrink:0}.rpt-required-marker{color:var(--rpt-color-danger, #ef4444);margin-left:2px}.rpt-select-wrapper{position:relative;width:100%;flex:1;min-height:0;display:flex;align-items:center}.rpt-select{width:100%;height:100%;min-height:38px;box-sizing:border-box;padding:6px 36px 6px 12px;font-size:var(--rpt-font-size-base, .875rem);color:var(--rpt-color-text, #0f172a);background-color:var(--rpt-color-bg, #ffffff);border:1px solid var(--rpt-color-border, #cbd5e1);border-radius:var(--rpt-border-radius, 6px);appearance:none;-webkit-appearance:none;outline:none;cursor:pointer;transition:border-color var(--rpt-transition-speed, .15s) ease,box-shadow var(--rpt-transition-speed, .15s) ease}.rpt-select:hover:not(:disabled){border-color:var(--rpt-color-border-hover, #94a3b8)}.rpt-select:focus{border-color:var(--rpt-color-border-focus, #2563eb);box-shadow:var(--rpt-box-shadow-focus, 0 0 0 3px rgba(37, 99, 235, .25))}.rpt-select:disabled{background-color:var(--rpt-color-surface, #f8fafc);color:var(--rpt-color-text-muted, #64748b);cursor:not-allowed}.rpt-select.rpt-invalid{border-color:var(--rpt-color-danger, #ef4444)}.rpt-select.rpt-invalid:focus{box-shadow:0 0 0 3px #ef444440}.rpt-select-arrow{position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--rpt-color-text-muted, #64748b);display:flex;align-items:center}.rpt-combobox-wrapper{position:relative;width:100%;flex:1;min-height:0}.rpt-combobox-trigger{width:100%;height:100%;min-height:38px;box-sizing:border-box;padding:6px 10px 6px 12px;display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:var(--rpt-font-size-base, .875rem);font-family:inherit;color:var(--rpt-color-text, #0f172a);background-color:var(--rpt-color-bg, #ffffff);border:1px solid var(--rpt-color-border, #cbd5e1);border-radius:var(--rpt-border-radius, 6px);outline:none;cursor:pointer;text-align:left;transition:border-color var(--rpt-transition-speed, .15s) ease,box-shadow var(--rpt-transition-speed, .15s) ease}.rpt-combobox-trigger:hover:not(:disabled){border-color:var(--rpt-color-border-hover, #94a3b8)}.rpt-combobox-trigger:focus-visible,.rpt-combobox-trigger.is-open{border-color:var(--rpt-color-border-focus, #2563eb);box-shadow:var(--rpt-box-shadow-focus, 0 0 0 3px rgba(37, 99, 235, .25))}.rpt-combobox-trigger:disabled{background-color:var(--rpt-color-surface, #f8fafc);color:var(--rpt-color-text-muted, #64748b);cursor:not-allowed}.rpt-combobox-trigger.rpt-invalid{border-color:var(--rpt-color-danger, #ef4444)}.rpt-combobox-trigger.rpt-invalid:focus-visible{box-shadow:0 0 0 3px #ef444440}.trigger-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.3}.trigger-label.is-placeholder{color:var(--rpt-color-text-muted, #94a3b8)}.trigger-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}.trigger-clear-btn{display:flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;font-size:.6875rem;color:var(--rpt-color-text-muted, #64748b);background-color:#f1f5f9;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .15s ease,color .15s ease}.trigger-clear-btn:hover{background-color:#e2e8f0;color:var(--rpt-color-text, #0f172a)}.trigger-arrow{display:flex;align-items:center;color:var(--rpt-color-text-muted, #64748b);transition:transform .18s ease}.trigger-arrow.rotated{transform:rotate(180deg)}.rpt-combobox-menu{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:1050;background-color:var(--rpt-color-bg, #ffffff);border:1px solid var(--rpt-color-border, #cbd5e1);border-radius:var(--rpt-border-radius, 6px);box-shadow:0 10px 25px -5px #0000001f,0 8px 10px -6px #00000014;overflow:hidden;display:flex;flex-direction:column;animation:rpt-dropdown-pop .12s cubic-bezier(0,0,.2,1)}.rpt-combobox-menu.opens-above{top:auto;bottom:calc(100% + 4px);box-shadow:0 -10px 25px -5px #0000001f,0 -8px 10px -6px #00000014;animation:rpt-dropdown-pop-above .12s cubic-bezier(0,0,.2,1)}@keyframes rpt-dropdown-pop{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@keyframes rpt-dropdown-pop-above{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.combobox-search-box{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid var(--rpt-color-border, #e2e8f0);background-color:#f8fafc}.combobox-search-icon{color:var(--rpt-color-text-muted, #94a3b8);display:flex;align-items:center;flex-shrink:0}.combobox-search-input{flex:1;border:none;outline:none;background:transparent;font-size:var(--rpt-font-size-sm, .8125rem);font-family:inherit;color:var(--rpt-color-text, #0f172a);min-width:0}.combobox-search-input::placeholder{color:#94a3b8}.combobox-search-clear{border:none;background:#e2e8f0;color:#64748b;width:16px;height:16px;border-radius:50%;font-size:.625rem;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}.combobox-search-clear:hover{background:#cbd5e1;color:#0f172a}.combobox-options-list{max-height:220px;overflow-y:auto;overscroll-behavior:contain;padding:4px}.combobox-option-item{display:flex;align-items:center;justify-content:space-between;padding:7px 10px;border-radius:4px;font-size:var(--rpt-font-size-base, .84rem);color:var(--rpt-color-text, #0f172a);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .1s ease}.combobox-option-item.is-focused{background-color:var(--rpt-color-surface-hover, #f1f5f9)}.combobox-option-item.is-selected{background-color:#eff6ff;color:var(--rpt-color-primary, #2563eb);font-weight:600}.opt-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.opt-check{font-size:.875rem;font-weight:700;color:var(--rpt-color-primary, #2563eb);margin-left:8px}.combobox-status-row{padding:10px 12px;font-size:.78rem;text-align:center;color:var(--rpt-color-text-muted, #64748b)}.combobox-status-row.loading{display:flex;align-items:center;justify-content:center;gap:6px;color:#2563eb}.combobox-status-row.error{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--rpt-color-danger, #dc2626)}.trigger-retry-btn,.combobox-retry-btn,.rpt-badge-retry-btn{display:inline-flex;align-items:center;gap:3px;font-size:.6875rem;font-weight:600;color:#dc2626;background:#fee2e2;border:1px solid #fca5a5;border-radius:4px;padding:2px 7px;cursor:pointer;line-height:1.2;transition:background-color .12s ease,color .12s ease}.trigger-retry-btn:hover,.combobox-retry-btn:hover,.rpt-badge-retry-btn:hover{background:#fecaca;color:#b91c1c;border-color:#f87171}.combobox-status-row.hint{font-size:.72rem;color:#94a3b8;border-top:1px dashed #e2e8f0;margin-top:4px;padding:6px}.rpt-error-text{font-size:.7rem;color:var(--rpt-color-danger, #ef4444);margin-top:3px;line-height:1.25;max-width:100%;overflow-wrap:anywhere;word-break:break-word;display:block}\n"] }]
         }], ctorParameters: () => [], propDecorators: { onDocumentClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
@@ -5598,6 +5767,9 @@ class RptGridOutletDirective {
     vcr = inject(ViewContainerRef);
     compRef = null;
     subs = [];
+    lastEmittedReportState = null;
+    lastEmittedColumnDefs = null;
+    appliedInputs = new Map();
     componentType = input(null, { alias: 'rptGridOutlet' });
     inputs = input({});
     gridStateChange = output();
@@ -5611,16 +5783,89 @@ class RptGridOutletDirective {
         });
         effect(() => {
             const currentInputs = this.inputs();
-            if (this.compRef) {
-                for (const [key, value] of Object.entries(currentInputs)) {
-                    try {
-                        this.compRef.setInput(key, value);
+            if (!this.compRef)
+                return;
+            for (const [key, value] of Object.entries(currentInputs)) {
+                if (key === 'reportState') {
+                    // Suppress circular input echo: if incoming reportState matches what this grid instance
+                    // just emitted, skip setInput. Re-applying reportState causes ngOnChanges -> applyImportedFilters,
+                    // which destroys columns and dismisses active filter popovers/inputs.
+                    if (this.lastEmittedReportState && this.isReportStateMatching(this.lastEmittedReportState, value)) {
+                        continue;
+                    }
+                    if (this.appliedInputs.has('reportState') && this.isReportStateMatching(this.appliedInputs.get('reportState'), value)) {
+                        continue;
+                    }
+                }
+                if (key === 'columns' || key === 'columnDefs') {
+                    if (this.lastEmittedColumnDefs && this.isColumnDefsMatching(this.lastEmittedColumnDefs, value)) {
+                        continue;
+                    }
+                    if (this.appliedInputs.has(key) && this.isColumnDefsMatching(this.appliedInputs.get(key), value)) {
+                        continue;
+                    }
+                }
+                if (key === 'config') {
+                    const prev = this.appliedInputs.get('config');
+                    if (prev && JSON.stringify(prev) === JSON.stringify(value)) {
+                        continue;
+                    }
+                }
+                if (key === 'rowData') {
+                    const prev = this.appliedInputs.get('rowData');
+                    if (prev === value) {
+                        continue;
                     }
-                    catch { }
                 }
+                if (this.appliedInputs.get(key) === value) {
+                    continue;
+                }
+                try {
+                    this.compRef.setInput(key, value);
+                    this.appliedInputs.set(key, value);
+                }
+                catch { }
             }
         });
     }
+    isReportStateMatching(a, b) {
+        if (a === b)
+            return true;
+        if (!a || !b)
+            return a === b;
+        try {
+            const getComparable = (s) => ({
+                activeFilters: s.activeFilters,
+                conditionFilters: s.conditionFilters,
+                sortModel: s.sortModel,
+                groupModel: s.groupModel,
+            });
+            return JSON.stringify(getComparable(a)) === JSON.stringify(getComparable(b));
+        }
+        catch {
+            return false;
+        }
+    }
+    isColumnDefsMatching(a, b) {
+        if (a === b)
+            return true;
+        if (!Array.isArray(a) || !Array.isArray(b))
+            return false;
+        if (a.length !== b.length)
+            return false;
+        try {
+            const getComparable = (cols) => cols.map((c) => ({
+                field: c.field,
+                width: c.width,
+                hide: c.hide,
+                pinned: c.pinned,
+            }));
+            return JSON.stringify(getComparable(a)) === JSON.stringify(getComparable(b));
+        }
+        catch {
+            return false;
+        }
+    }
     recreateComponent(type) {
         this.clear();
         if (!type)
@@ -5629,13 +5874,22 @@ class RptGridOutletDirective {
             this.compRef = this.vcr.createComponent(type);
             const instance = this.compRef.instance;
             if (instance.gridStateChanged && typeof instance.gridStateChanged.subscribe === 'function') {
-                this.subs.push(instance.gridStateChanged.subscribe((state) => this.gridStateChange.emit(state)));
+                this.subs.push(instance.gridStateChanged.subscribe((state) => {
+                    this.lastEmittedReportState = state;
+                    this.gridStateChange.emit(state);
+                }));
             }
             if (instance.reportStateChange && typeof instance.reportStateChange.subscribe === 'function') {
-                this.subs.push(instance.reportStateChange.subscribe((state) => this.gridStateChange.emit(state)));
+                this.subs.push(instance.reportStateChange.subscribe((state) => {
+                    this.lastEmittedReportState = state;
+                    this.gridStateChange.emit(state);
+                }));
             }
             if (instance.columnDefsChanged && typeof instance.columnDefsChanged.subscribe === 'function') {
-                this.subs.push(instance.columnDefsChanged.subscribe((defs) => this.columnDefsChange.emit(defs)));
+                this.subs.push(instance.columnDefsChanged.subscribe((defs) => {
+                    this.lastEmittedColumnDefs = defs;
+                    this.columnDefsChange.emit(defs);
+                }));
             }
             const emitRow = (data) => {
                 const row = data?.data ?? data?.row ?? data;
@@ -5664,6 +5918,7 @@ class RptGridOutletDirective {
             for (const [key, value] of Object.entries(currentInputs)) {
                 try {
                     this.compRef.setInput(key, value);
+                    this.appliedInputs.set(key, value);
                 }
                 catch { }
             }
@@ -5675,6 +5930,9 @@ class RptGridOutletDirective {
     clear() {
         this.subs.forEach((s) => s.unsubscribe());
         this.subs = [];
+        this.lastEmittedReportState = null;
+        this.lastEmittedColumnDefs = null;
+        this.appliedInputs.clear();
         if (this.compRef) {
             this.compRef.destroy();
             this.compRef = null;
@@ -5835,13 +6093,16 @@ class ReportGridBridgeComponent {
     });
     gridReportState = computed(() => {
         const opts = this.gridDefinition()?.options;
+        const existing = opts?.reportState || {};
         return {
-            columnGroupDefs: null,
+            columnGroupDefs: existing.columnGroupDefs ?? null,
             columnDefs: this.bridgedColumns(),
-            sortModel: opts?.sortModel || [],
-            groupModel: opts?.groupModel || [],
-            activeFilters: {},
-            highlightRules: [],
+            sortModel: opts?.sortModel || existing.sortModel || [],
+            groupModel: opts?.groupModel || existing.groupModel || [],
+            activeFilters: existing.activeFilters || {},
+            conditionFilters: existing.conditionFilters || {},
+            highlightRules: existing.highlightRules || [],
+            ...existing,
         };
     });
     gridInputs = computed(() => ({
@@ -8282,12 +8543,72 @@ class DesignerStateService {
     /**
      * Updates grid definition settings.
      */
-    updateGridSettings(grid) {
+    updateGridSettings(grid, options) {
+        if (options?.skipHistory) {
+            this.definition.update((def) => ({
+                ...def,
+                grid,
+            }));
+            this.isDirty.set(true);
+            return;
+        }
         this.mutateDefinition((def) => ({
             ...def,
             grid,
         }));
     }
+    /**
+     * Sets or updates the primary data source for the report's result grid.
+     */
+    setGridDataSource(ds) {
+        this.mutateDefinition((def) => {
+            const existingSources = def.dataSources ?? [];
+            const idx = existingSources.findIndex((s) => s.id === ds.id);
+            let nextSources;
+            if (idx >= 0) {
+                nextSources = [...existingSources];
+                nextSources[idx] = ds;
+            }
+            else {
+                nextSources = [ds, ...existingSources];
+            }
+            const updatedGrid = {
+                ...(def.grid ?? {
+                    dataSourceId: ds.id,
+                    columns: [],
+                    options: { pagination: true, pageSize: 25, showRowNumbers: true, showFooter: true },
+                }),
+                dataSourceId: ds.id,
+            };
+            return {
+                ...def,
+                dataSources: nextSources,
+                grid: updatedGrid,
+            };
+        });
+    }
+    /**
+     * Updates the parameter mappings for the primary grid data source.
+     */
+    updateGridDataSourceParameters(mappings) {
+        this.mutateDefinition((def) => {
+            const gridDsId = def.grid?.dataSourceId;
+            const sources = def.dataSources ?? [];
+            const targetIdx = sources.findIndex((s) => s.id === gridDsId || s.name === gridDsId);
+            if (targetIdx >= 0) {
+                const nextSources = [...sources];
+                nextSources[targetIdx] = {
+                    ...nextSources[targetIdx],
+                    parameterMappings: mappings,
+                };
+                return {
+                    ...def,
+                    dataSources: nextSources,
+                };
+            }
+            return def;
+        });
+    }
     /**
      * Reverts to the previous state in history.
      */
@@ -8988,6 +9309,8 @@ function matchesSearchQuery(item, rawQuery) {
 
 class DesignCanvasComponent {
     designerState = inject(DesignerStateService);
+    gridFilterDebounceTimer = null;
+    pendingGridState = null;
     templateService = inject(ReportTemplateService);
     formBuilder = inject(DynamicFormBuilder);
     executionService = inject(ReportExecutionService);
@@ -9309,6 +9632,12 @@ class DesignCanvasComponent {
             setTimeout(() => this.gridExecError.set(null), 4000);
         }
     }
+    ngOnDestroy() {
+        if (this.gridFilterDebounceTimer) {
+            clearTimeout(this.gridFilterDebounceTimer);
+            this.gridFilterDebounceTimer = null;
+        }
+    }
     onCanvasGridStateChange(state) {
         if (!state || !this.definition().grid)
             return;
@@ -9318,34 +9647,84 @@ class DesignCanvasComponent {
         const newSerialized = JSON.stringify(state ?? null);
         if (currentSerialized === newSerialized)
             return;
+        // Distinguish between true structural layout changes (groupModel, sortModel)
+        // vs interactive column data filtering (activeFilters, conditionFilters).
+        const currentGroup = JSON.stringify(currentGrid.options?.groupModel ?? []);
+        const newGroup = JSON.stringify(state.groupModel ?? []);
+        const currentSort = JSON.stringify(currentGrid.options?.sortModel ?? []);
+        const newSort = JSON.stringify(state.sortModel ?? []);
+        const isLayoutChange = currentGroup !== newGroup || currentSort !== newSort;
         const updatedOptions = {
             ...(currentGrid.options || {}),
             groupModel: state.groupModel ?? currentGrid.options?.groupModel,
             sortModel: state.sortModel ?? currentGrid.options?.sortModel,
             reportState: state,
         };
-        this.designerState.updateGridSettings({
-            ...currentGrid,
-            options: updatedOptions,
-        });
-        this.layoutJustUpdated.set(true);
-        setTimeout(() => this.layoutJustUpdated.set(false), 1200);
+        if (isLayoutChange) {
+            // Clear any pending debounced filter update
+            if (this.gridFilterDebounceTimer) {
+                clearTimeout(this.gridFilterDebounceTimer);
+                this.gridFilterDebounceTimer = null;
+            }
+            this.pendingGridState = null;
+            // Grouping or sorting changed — update layout immediately and show visual indicator
+            this.designerState.updateGridSettings({
+                ...currentGrid,
+                options: updatedOptions,
+            });
+            this.layoutJustUpdated.set(true);
+            setTimeout(() => this.layoutJustUpdated.set(false), 1200);
+        }
+        else {
+            // Pure column filter adjustment (activeFilters / conditionFilters).
+            // 1. Do NOT trigger the "Layout auto-persisted" indicator (filtering rows is not a layout change).
+            // 2. Debounce saving the state with skipHistory so typing or checking boxes
+            //    does not flood undo history or interrupt column filter interaction.
+            this.pendingGridState = state;
+            if (this.gridFilterDebounceTimer) {
+                clearTimeout(this.gridFilterDebounceTimer);
+            }
+            this.gridFilterDebounceTimer = setTimeout(() => {
+                this.gridFilterDebounceTimer = null;
+                if (!this.pendingGridState || !this.definition().grid)
+                    return;
+                const latestGrid = this.definition().grid;
+                const latestOptions = {
+                    ...(latestGrid.options || {}),
+                    reportState: this.pendingGridState,
+                };
+                this.pendingGridState = null;
+                this.designerState.updateGridSettings({
+                    ...latestGrid,
+                    options: latestOptions,
+                }, { skipHistory: true });
+            }, 1200);
+        }
     }
     onCanvasColumnDefsChange(defs) {
         if (!Array.isArray(defs) || !this.definition().grid)
             return;
         const currentGrid = this.definition().grid;
+        let anyChanged = false;
         const updatedCols = currentGrid.columns.map((c) => {
             const match = defs.find((d) => d.field === c.field);
             if (match) {
+                const newWidth = match.width ? `${match.width}px` : c.width;
+                const newVisible = match.hide !== true;
+                if (newWidth !== c.width || newVisible !== c.visible) {
+                    anyChanged = true;
+                }
                 return {
                     ...c,
-                    width: match.width ? `${match.width}px` : c.width,
-                    visible: match.hide !== true,
+                    width: newWidth,
+                    visible: newVisible,
                 };
             }
             return c;
         });
+        // If no column widths or visibilities actually changed, do not trigger auto-persist
+        if (!anyChanged)
+            return;
         this.designerState.updateGridSettings({
             ...currentGrid,
             columns: updatedCols,
@@ -9365,7 +9744,7 @@ class DesignCanvasComponent {
         this.designerState.addComponent(type);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DesignCanvasComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: DesignCanvasComponent, isStandalone: true, selector: "rpt-design-canvas", host: { listeners: { "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: "    <div class=\"canvas-wrapper\" (click)=\"onCanvasBackgroundClick($event)\">\n      <!-- Canvas Status / Quick Controls -->\n      <div class=\"canvas-toolbar\">\n        <div class=\"canvas-info\">\n          <span class=\"info-label\">Grid Layout:</span>\n          <span class=\"info-value\">{{ totalColumns() }} Columns</span>\n          <span class=\"info-divider\">\u2022</span>\n          <span class=\"info-label\">Components:</span>\n          <span class=\"info-value\">{{ components().length }}</span>\n          <span class=\"info-divider\">\u2022</span>\n          <span class=\"live-mode-badge\" title=\"Interactive canvas: Values typed here run live queries and test dropdowns.\">\n            \u26A1 Live Interactive Mode\n          </span>\n        </div>\n\n        <div class=\"canvas-actions\">\n          @if (!definition().grid) {\n            <button\n              type=\"button\"\n              class=\"canvas-action-btn btn-grid-add\"\n              (click)=\"addResultGrid($event)\"\n              title=\"Add a Result Grid to this report\"\n            >\n              <rpt-icon name=\"table\" [size]=\"14\" />\n              <span>+ Add Grid</span>\n            </button>\n          } @else {\n            <button\n              type=\"button\"\n              class=\"canvas-action-btn btn-grid-configured\"\n              (click)=\"selectGridSettings($event)\"\n              title=\"Configure Result Data Grid\"\n            >\n              <rpt-icon name=\"table\" [size]=\"14\" />\n              <span>Grid ({{ definition().grid?.columns?.length ?? 0 }})</span>\n            </button>\n          }\n\n          <button\n            type=\"button\"\n            class=\"canvas-action-btn\"\n            (click)=\"selectReportSettings($event)\"\n            title=\"Configure Page Layout & Grid Settings\"\n          >\n            <rpt-icon name=\"settings\" [size]=\"14\" />\n            <span>Report Settings</span>\n          </button>\n        </div>\n      </div>\n\n      <!-- Canvas Drop Area -->\n      <div class=\"canvas-scroll-area\">\n        <div\n          class=\"canvas-artboard\"\n          [style.padding.px]=\"definition().layout.padding ?? 24\"\n        >\n          <!-- Report Header Preview -->\n          <div class=\"canvas-report-header\">\n            <h2 class=\"canvas-report-title\">{{ definition().name || 'Untitled Report' }}</h2>\n            @if (definition().description) {\n              <p class=\"canvas-report-desc\">{{ definition().description }}</p>\n            }\n          </div>\n\n          <!-- Component Drop List Grid with 2D mixed orientation and data binding -->\n          <div\n            cdkDropList\n            id=\"designer-canvas-drop-list\"\n            class=\"canvas-grid\"\n            cdkDropListOrientation=\"mixed\"\n            [cdkDropListData]=\"sortedComponents()\"\n            [style.grid-template-columns]=\"gridTemplateColumns()\"\n            [style.gap.px]=\"definition().layout.gap ?? 16\"\n            (cdkDropListDropped)=\"onDrop($event)\"\n          >\n            @for (comp of sortedComponents(); track comp.id; let idx = $index) {\n              <div\n                cdkDrag\n                [cdkDragData]=\"comp\"\n                [cdkDragDisabled]=\"isAnyResizing()\"\n                class=\"canvas-component-card\"\n                [class.is-selected]=\"isSelected(comp.id)\"\n                [class.is-resizing]=\"resizingCompId() === comp.id\"\n                [class.is-field-highlighted]=\"isFieldHighlighted(comp)\"\n                [class.is-narrow]=\"getSpan(comp) <= 4\"\n                [class.is-compact]=\"getSpan(comp) <= 2\"\n                [style.grid-column]=\"getGridColumn(comp)\"\n                [style.grid-row]=\"getGridRow(comp)\"\n                [style.width]=\"comp.layout?.width || 'auto'\"\n                [style.height]=\"getComponentHeight(comp)\"\n                [style.min-height]=\"getComponentMinHeight(comp)\"\n                (click)=\"onSelect(comp.id, $event)\"\n              >\n                <!-- Card Header with Drag Handle & Actions -->\n                <div class=\"card-header\">\n                  <div class=\"card-title-group\" cdkDragHandle title=\"Drag to reorder\">\n                    <span class=\"drag-handle-dots\">\u22EE\u22EE</span>\n                    <rpt-icon [name]=\"getComponentIconName(comp.type)\" [size]=\"14\" />\n                    <span class=\"comp-title\" [title]=\"comp.label || comp.key || comp.type\">\n                      {{ comp.label || comp.key || comp.type }}\n                    </span>\n                  </div>\n\n                  <div class=\"card-actions\">\n                    <!-- Static span pill & new row / start col pill when not hovered / not selected -->\n                    @if (comp.layout?.column; as col) {\n                      <span class=\"new-row-pill-static\" title=\"Starts at Column {{ col }}\">Col {{ col }}</span>\n                    } @else if (comp.layout?.newRow) {\n                      <span class=\"new-row-pill-static\" title=\"Starts on separate row\">\u21B3 Row</span>\n                    }\n                    <span\n                      class=\"span-pill-static\"\n                      title=\"Column span: {{ getSpan(comp) }} of {{ totalColumns() }} columns\"\n                    >\n                      {{ getSpan(comp) }}/{{ totalColumns() }}\n                    </span>\n\n                    <!-- Quick Action Stepper & Buttons (revealed on hover or selection) -->\n                    <div class=\"card-quick-controls\">\n                      <button\n                        type=\"button\"\n                        class=\"card-action-btn\"\n                        [class.btn-active-toggle]=\"comp.layout?.newRow\"\n                        (click)=\"toggleNewRow(comp, $event)\"\n                        title=\"{{ comp.layout?.newRow ? 'Starts on new row (Click to place inline)' : 'Start on separate row (Row Break)' }}\"\n                      >\n                        <rpt-icon name=\"corner-down-right\" [size]=\"11\" />\n                      </button>\n\n                      <div class=\"span-control-group\" title=\"Adjust Column Span\">\n                        <button\n                          type=\"button\"\n                          class=\"span-btn\"\n                          [disabled]=\"getSpan(comp) <= 1\"\n                          (click)=\"adjustSpan(comp, -1, $event)\"\n                          title=\"Shrink Column Span\"\n                        >\n                          <rpt-icon name=\"minus\" [size]=\"9\" />\n                        </button>\n                        <span class=\"span-badge\" [title]=\"'Column span: ' + getSpan(comp) + ' of ' + totalColumns()\">\n                          <span class=\"span-num\">{{ getSpan(comp) }}</span><span class=\"span-total\">/{{ totalColumns() }}</span>\n                        </span>\n                        <button\n                          type=\"button\"\n                          class=\"span-btn\"\n                          [disabled]=\"getSpan(comp) >= totalColumns()\"\n                          (click)=\"adjustSpan(comp, 1, $event)\"\n                          title=\"Expand Column Span\"\n                        >\n                          <rpt-icon name=\"plus\" [size]=\"9\" />\n                        </button>\n                      </div>\n\n                      <button\n                        type=\"button\"\n                        class=\"card-action-btn\"\n                        (click)=\"onDuplicate(comp.id, $event)\"\n                        title=\"Duplicate component\"\n                      >\n                        <rpt-icon name=\"copy\" [size]=\"12\" />\n                      </button>\n                      <button\n                        type=\"button\"\n                        class=\"card-action-btn btn-delete\"\n                        (click)=\"onDelete(comp.id, $event)\"\n                        title=\"Remove component\"\n                      >\n                        <rpt-icon name=\"trash\" [size]=\"12\" />\n                      </button>\n                    </div>\n                  </div>\n                </div>\n\n                <!-- Card Body Visual Preview -->\n                <div class=\"card-body\">\n\n                  @switch (comp.type) {\n                    @case ('input') {\n                      <div class=\"mock-input-field\" (click)=\"onControlInteract(comp, $event)\">\n                        <span class=\"mock-label\">{{ comp.label || 'Input' }}</span>\n                        @if (getCanvasControl(comp); as ctrl) {\n                          <input\n                            type=\"text\"\n                            class=\"canvas-active-input\"\n                            [placeholder]=\"comp.properties?.['placeholder'] || 'Enter text...'\"\n                            [formControl]=\"ctrl\"\n                            (focus)=\"onControlInteract(comp, $event)\"\n                          />\n                        } @else {\n                          <div class=\"mock-input-box\">{{ comp.properties?.['placeholder'] || 'Enter text...' }}</div>\n                        }\n                      </div>\n                    }\n                    @case ('dropdown') {\n                      <div class=\"canvas-live-control-wrapper\" (click)=\"onControlInteract(comp, $event)\">\n                        <rpt-dropdown\n                          [config]=\"comp\"\n                          [showStatus]=\"true\"\n                          [parentForm]=\"canvasForm()\"\n                          [control]=\"getCanvasControl(comp)\"\n                        />\n                      </div>\n                    }\n                    @case ('date') {\n                      <div class=\"mock-input-field\" (click)=\"onControlInteract(comp, $event)\">\n                        <span class=\"mock-label\">{{ comp.label || 'Date' }}</span>\n                        @if (getCanvasControl(comp); as ctrl) {\n                          <input\n                            type=\"date\"\n                            class=\"canvas-active-input\"\n                            [formControl]=\"ctrl\"\n                            (focus)=\"onControlInteract(comp, $event)\"\n                          />\n                        } @else {\n                          <div class=\"mock-select-box\">\n                            <span>YYYY-MM-DD</span>\n                            <rpt-icon name=\"calendar\" [size]=\"12\" />\n                          </div>\n                        }\n                      </div>\n                    }\n                    @case ('date-range') {\n                      <div class=\"canvas-live-control-wrapper\" (click)=\"onControlInteract(comp, $event)\">\n                        <rpt-date-range\n                          [config]=\"comp\"\n                          [control]=\"getCanvasControl(comp)\"\n                        />\n                      </div>\n                    }\n                    @case ('number') {\n                      <div class=\"mock-input-field\" (click)=\"onControlInteract(comp, $event)\">\n                        <span class=\"mock-label\">{{ comp.label || 'Number' }}</span>\n                        @if (getCanvasControl(comp); as ctrl) {\n                          <input\n                            type=\"number\"\n                            class=\"canvas-active-input\"\n                            [formControl]=\"ctrl\"\n                            (focus)=\"onControlInteract(comp, $event)\"\n                          />\n                        } @else {\n                          <div class=\"mock-input-box\">\n                            {{ comp.properties?.['prefix'] || '' }} 0.00 {{ comp.properties?.['suffix'] || '' }}\n                          </div>\n                        }\n                      </div>\n                    }\n                    @case ('checkbox') {\n                      <div class=\"mock-checkbox-field\" (click)=\"onControlInteract(comp, $event)\">\n                        @if (getCanvasControl(comp); as ctrl) {\n                          <label class=\"canvas-active-checkbox-lbl\">\n                            <input type=\"checkbox\" [formControl]=\"ctrl\" (focus)=\"onControlInteract(comp, $event)\" />\n                            <span class=\"mock-label\">{{ comp.label || 'Checkbox' }}</span>\n                          </label>\n                        } @else {\n                          <span class=\"mock-check-box\">\n                            <rpt-icon name=\"check\" [size]=\"10\" />\n                          </span>\n                          <span class=\"mock-label\">{{ comp.label || 'Checkbox' }}</span>\n                        }\n                      </div>\n                    }\n                    @case ('button') {\n                      <div class=\"mock-btn-wrapper\">\n                        <button\n                          type=\"button\"\n                          class=\"mock-btn\"\n                          [class]=\"'btn-' + (comp.properties?.['variant'] || 'primary')\"\n                          [class.mock-btn-full]=\"comp.properties?.['fullWidth'] === true || comp.layout?.width === '100%'\"\n                          [style.height]=\"getCustomBtnHeight(comp)\"\n                          [style.width]=\"getCustomBtnWidth(comp)\"\n                          (click)=\"onCanvasButtonClick(comp, $event)\"\n                        >\n                          @if (getCustomBtnIcon(comp); as btnIcon) {\n                            <rpt-icon [name]=\"btnIcon\" [size]=\"15\" />\n                          }\n                          <span>{{ comp.label || 'Button' }}</span>\n                        </button>\n                      </div>\n                    }\n                    @case ('kpi-card') {\n                      <div class=\"mock-kpi-field\">\n                        <div class=\"mock-kpi-header\">\n                          <span class=\"mock-label\">{{ comp.label || 'KPI Metric' }}</span>\n                          <rpt-icon name=\"kpi\" [size]=\"14\" />\n                        </div>\n                        <div class=\"mock-kpi-value\">{{ comp.properties?.['value'] || '$128,450' }}</div>\n                        <div class=\"mock-kpi-footer\">\n                          <span class=\"mock-kpi-trend\">+12.5%</span>\n                          <span class=\"mock-kpi-sub\">vs last period</span>\n                        </div>\n                      </div>\n                    }\n                    @case ('chart') {\n                      <div class=\"mock-chart-field\">\n                        <div class=\"mock-chart-header\">\n                          <span class=\"mock-label\">{{ comp.label || 'Quarterly Sales Revenue ($000)' }}</span>\n                        </div>\n                        <div class=\"mock-chart-bars\">\n                          <div class=\"mock-chart-col\">\n                            <div class=\"mock-chart-bar\" style=\"height: 44%\"></div>\n                            <span class=\"mock-bar-lbl\">Q1 Jan-Mar</span>\n                          </div>\n                          <div class=\"mock-chart-col\">\n                            <div class=\"mock-chart-bar\" style=\"height: 61%\"></div>\n                            <span class=\"mock-bar-lbl\">Q2 Apr-Jun</span>\n                          </div>\n                          <div class=\"mock-chart-col\">\n                            <div class=\"mock-chart-bar\" style=\"height: 79%\"></div>\n                            <span class=\"mock-bar-lbl\">Q3 Jul-Sep</span>\n                          </div>\n                          <div class=\"mock-chart-col\">\n                            <div class=\"mock-chart-bar\" style=\"height: 100%\"></div>\n                            <span class=\"mock-bar-lbl\">Q4 Oct-Dec</span>\n                          </div>\n                        </div>\n                      </div>\n                    }\n                    @default {\n                      <div class=\"mock-generic-box\">\n                        <span>{{ comp.type }}</span>\n                      </div>\n                    }\n                  }\n                </div>\n\n                <!-- Resizing Handles (East, South, South-East) -->\n                <div\n                  class=\"resize-handle handle-e\"\n                  (pointerdown)=\"startResize($event, comp, 'e')\"\n                  (dblclick)=\"resetDimensions(comp, $event)\"\n                  title=\"Drag to resize column width \u2022 Double-click to reset\"\n                ></div>\n                <div\n                  class=\"resize-handle handle-s\"\n                  (pointerdown)=\"startResize($event, comp, 's')\"\n                  (dblclick)=\"resetDimensions(comp, $event)\"\n                  title=\"Drag to resize height \u2022 Double-click to reset\"\n                ></div>\n                <div\n                  class=\"resize-handle handle-se\"\n                  (pointerdown)=\"startResize($event, comp, 'se')\"\n                  (dblclick)=\"resetDimensions(comp, $event)\"\n                  title=\"Drag to resize width and height \u2022 Double-click to reset\"\n                ></div>\n\n                <!-- Resizing Dimension Ghost / Badge -->\n                @if (resizingCompId() === comp.id) {\n                  <div class=\"resize-dimension-tooltip\">\n                    {{ resizingTooltip(comp) }}\n                  </div>\n                }\n\n                <!-- Drag placeholder with matched grid column span -->\n                <div\n                  *cdkDragPlaceholder\n                  class=\"canvas-drag-placeholder\"\n                  [style.grid-column]=\"getGridColumn(comp)\"\n                ></div>\n\n                <!-- Drag preview -->\n                <div *cdkDragPreview class=\"canvas-drag-preview\">\n                  <span class=\"drag-handle-dots\">\u22EE\u22EE</span>\n                  <rpt-icon [name]=\"getComponentIconName(comp.type)\" [size]=\"14\" />\n                  <span class=\"preview-title\">{{ comp.label || comp.key || comp.type }}</span>\n                  <span class=\"preview-span\">{{ getSpan(comp) }}/{{ totalColumns() }}</span>\n                </div>\n              </div>\n            }\n\n            @if (components().length === 0) {\n              <div class=\"canvas-empty-state\" role=\"region\" aria-label=\"Empty canvas starter options\">\n                <div class=\"empty-hero-badge\">\n                  <rpt-icon name=\"design\" [size]=\"28\" />\n                </div>\n                <h3 class=\"empty-hero-title\">Start Designing Your Custom Report</h3>\n                <p class=\"empty-hero-desc\">\n                  Drag controls from the left component palette, or jumpstart your design with pre-configured enterprise blueprints.\n                </p>\n\n                <div class=\"empty-hero-actions\">\n                  <button\n                    type=\"button\"\n                    class=\"empty-btn empty-btn-primary\"\n                    (click)=\"applyBlueprint('blueprint-audit-register')\"\n                    title=\"Load complete Audit Register blueprint with parameters and result grid\"\n                  >\n                    <rpt-icon name=\"table\" [size]=\"15\" />\n                    <span>Audit Register Blueprint</span>\n                  </button>\n                  <button\n                    type=\"button\"\n                    class=\"empty-btn empty-btn-secondary\"\n                    (click)=\"applyBlueprint('blueprint-kpi-summary')\"\n                    title=\"Load Executive KPI summary blueprint\"\n                  >\n                    <rpt-icon name=\"chart-bar\" [size]=\"15\" />\n                    <span>KPI Summary Blueprint</span>\n                  </button>\n                  <button\n                    type=\"button\"\n                    class=\"empty-btn empty-btn-outline\"\n                    (click)=\"addStarterComponent('date-range')\"\n                    title=\"Add a Date Range filter component\"\n                  >\n                    <rpt-icon name=\"calendar\" [size]=\"14\" />\n                    <span>+ Add Date Filter</span>\n                  </button>\n                  <button\n                    type=\"button\"\n                    class=\"empty-btn empty-btn-outline\"\n                    (click)=\"addStarterComponent('button')\"\n                    title=\"Add an Execute Action button\"\n                  >\n                    <rpt-icon name=\"play\" [size]=\"14\" />\n                    <span>+ Add Run Button</span>\n                  </button>\n                </div>\n              </div>\n            }\n          </div>\n\n          <!-- Live Result Grid Preview with Bways-Grid Features -->\n          @if (definition().grid) {\n            <div class=\"canvas-grid-box\">\n              <div class=\"grid-preview-header\">\n                <div style=\"display: flex; align-items: center; gap: 8px;\">\n                  <rpt-icon name=\"table\" [size]=\"15\" />\n                  <span class=\"grid-title\">Bways Grid ({{ definition().grid?.columns?.length ?? 0 }} columns)</span>\n                  @if (isExecutingGrid()) {\n                    <span class=\"grid-exec-badge is-loading\">Loading data from database...</span>\n                  } @else if (gridExecError()) {\n                    <span class=\"grid-exec-badge is-error\">{{ gridExecError() }}</span>\n                  } @else if (canvasGridData().length > 0) {\n                    <span class=\"grid-exec-badge is-success\">{{ canvasGridData().length }} rows loaded</span>\n                  }\n                </div>\n                <div style=\"display: flex; align-items: center; gap: 8px;\">\n                  <button\n                    type=\"button\"\n                    class=\"btn-canvas-run-grid\"\n                    (click)=\"executeCanvasReport($event)\"\n                    [disabled]=\"isExecutingGrid()\"\n                    title=\"Execute query and load data into Bways Grid\"\n                  >\n                    <rpt-icon name=\"play\" [size]=\"11\" />\n                    <span>{{ isExecutingGrid() ? 'Running...' : 'Run / Refresh Grid' }}</span>\n                  </button>\n                  <button\n                    type=\"button\"\n                    class=\"btn-canvas-edit-grid\"\n                    (click)=\"selectGridSettings($event)\"\n                    title=\"Configure columns and grid options\"\n                  >\n                    <rpt-icon name=\"settings\" [size]=\"11\" />\n                    <span>Configure</span>\n                  </button>\n                  <button\n                    type=\"button\"\n                    class=\"btn-remove-grid\"\n                    (click)=\"removeGrid($event)\"\n                    title=\"Remove Result Grid from this report\"\n                  >\n                    <rpt-icon name=\"trash\" [size]=\"13\" />\n                  </button>\n                </div>\n              </div>\n\n              @if (getGridSummaryText(); as summary) {\n                <div class=\"grid-layout-status-strip\">\n                  <div class=\"grid-status-info\">\n                    <rpt-icon name=\"table\" [size]=\"12\" />\n                    <span>{{ summary }}</span>\n                  </div>\n                  <div class=\"grid-status-sync\" [class.is-pulsing]=\"layoutJustUpdated()\">\n                    <rpt-icon name=\"check\" [size]=\"11\" />\n                    <span>Layout auto-persisted</span>\n                  </div>\n                </div>\n              }\n\n              <!-- Live Bways Grid bridge -->\n              <div class=\"canvas-live-grid-container\" (click)=\"$event.stopPropagation()\">\n                <rpt-grid-bridge\n                  [gridDefinition]=\"definition().grid!\"\n                  [data]=\"canvasGridData()\"\n                  (gridStateChange)=\"onCanvasGridStateChange($event)\"\n                  (columnDefsChange)=\"onCanvasColumnDefsChange($event)\"\n                />\n              </div>\n            </div>\n          } @else {\n            <div class=\"canvas-add-grid-banner\" (click)=\"addResultGrid($event)\">\n              <div class=\"add-grid-icon\">\n                <rpt-icon name=\"table\" [size]=\"20\" />\n              </div>\n              <div class=\"add-grid-text\">\n                <span class=\"add-grid-title\">+ Add Result Data Grid</span>\n                <span class=\"add-grid-sub\">Attach an interactive data table or UltraGrid to display report execution output</span>\n              </div>\n              <button type=\"button\" class=\"btn-banner-add\">Add Grid</button>\n            </div>\n          }\n        </div>\n      </div>\n    </div>", styles: [":host{display:block;height:100%;background-color:#f1f5f9;font-family:var(--rpt-font-family, inherit);box-sizing:border-box}.canvas-wrapper{display:flex;flex-direction:column;height:100%}.canvas-toolbar{display:flex;align-items:center;justify-content:space-between;min-height:42px;height:42px;padding:0 24px;background:var(--rpt-color-surface, #ffffff);border-bottom:1px solid var(--rpt-color-border, #cbd5e1);box-sizing:border-box;gap:12px;overflow-x:auto;scrollbar-width:none;font-family:var(--rpt-font-family, inherit);flex-shrink:0}.canvas-toolbar::-webkit-scrollbar{display:none}.canvas-info{display:flex;align-items:center;gap:8px;font-family:var(--rpt-font-family, inherit);font-size:var(--rpt-font-size-sm, .75rem);color:var(--rpt-color-text-muted, #64748b);white-space:nowrap;line-height:1}.info-label{color:var(--rpt-color-text-muted, #64748b);font-weight:500;font-size:var(--rpt-font-size-sm, .75rem)}.info-value{font-weight:600;color:var(--rpt-color-text, #0f172a);font-size:var(--rpt-font-size-sm, .75rem)}.info-divider{color:var(--rpt-color-border, #cbd5e1);margin:0 2px}.live-mode-badge{display:inline-flex;align-items:center;gap:4px;font-family:var(--rpt-font-family, inherit);font-size:var(--rpt-font-size-xs, .7rem);font-weight:600;color:#047857;background:#ecfdf5;border:1px solid #a7f3d0;padding:2px 8px;border-radius:9999px;line-height:1}.canvas-actions{display:flex;align-items:center;gap:8px;white-space:nowrap}.canvas-action-btn{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;font-family:var(--rpt-font-family, inherit);font-size:var(--rpt-font-size-sm, .75rem);font-weight:500;letter-spacing:-.01em;color:var(--rpt-color-text-secondary, #334155);background:var(--rpt-color-surface, #ffffff);border:1px solid var(--rpt-color-border, #cbd5e1);border-radius:var(--rpt-border-radius, 6px);cursor:pointer;line-height:1;white-space:nowrap;box-shadow:0 1px 2px #0000000a;transition:all var(--rpt-transition-speed, .15s) ease}.canvas-action-btn:hover{background:var(--rpt-color-surface-hover, #f8fafc);border-color:var(--rpt-color-border-hover, #94a3b8);color:var(--rpt-color-text, #0f172a);box-shadow:0 2px 4px #0000000f}.canvas-action-btn.btn-grid-configured{background:#eff6ff;border-color:#bfdbfe;color:#2563eb;font-weight:600}.canvas-action-btn.btn-grid-configured:hover{background:#dbeafe;color:#1d4ed8;border-color:#93c5fd}.canvas-action-btn.btn-grid-add{background:#f0fdf4;border-color:#bbf7d0;color:#16a34a;font-weight:600}.canvas-action-btn.btn-grid-add:hover{background:#dcfce7;color:#15803d;border-color:#86efac}.canvas-action-btn:active{transform:translateY(1px)}.canvas-scroll-area{flex:1;overflow-y:auto;padding:16px}.canvas-artboard{width:100%;max-width:1400px;margin:0 auto;background:#fff;border:1px solid var(--rpt-color-border, #cbd5e1);border-radius:var(--rpt-border-radius-lg, 8px);box-shadow:0 4px 6px -1px #0000000d;min-height:480px;box-sizing:border-box}@media (max-width: 900px){.canvas-toolbar{min-height:36px;height:36px;padding:0 10px;gap:6px}.live-mode-badge{display:none}.canvas-info{font-size:.75rem;gap:5px}.canvas-action-btn{padding:0 8px;font-size:.725rem;height:28px;gap:4px}.canvas-scroll-area{padding:10px}.canvas-artboard{min-height:360px}}@media (max-width: 600px){.canvas-toolbar{padding:0 8px;gap:4px}.canvas-info .info-label,.canvas-action-btn span{display:none}.canvas-action-btn{padding:0 6px;min-width:28px;justify-content:center}}.canvas-report-header{margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--rpt-color-border, #e2e8f0)}.canvas-report-title{font-size:var(--rpt-font-size-xl, 1.5rem);font-weight:700;color:var(--rpt-color-text, #0f172a);margin:0 0 6px}.canvas-report-desc{font-size:var(--rpt-font-size-base, .875rem);color:var(--rpt-color-text-muted, #64748b);margin:0}.canvas-grid{display:grid;width:100%;min-height:180px;align-items:start;border-radius:6px;transition:all var(--rpt-transition-speed, .15s) ease}.canvas-component-card{container-type:inline-size;background:#fff;border:1.5px solid var(--rpt-color-border, #cbd5e1);border-radius:var(--rpt-border-radius, 6px);box-shadow:var(--rpt-box-shadow, 0 1px 2px rgba(0, 0, 0, .05));box-sizing:border-box;transition:all var(--rpt-transition-speed, .15s) ease;cursor:pointer;position:relative;overflow:visible;display:flex;flex-direction:column;min-height:104px;z-index:1}.canvas-component-card:hover{border-color:var(--rpt-color-primary, #2563eb);box-shadow:0 4px 6px -1px #2563eb1a;z-index:2}.canvas-component-card.is-selected{border-color:var(--rpt-color-primary, #2563eb);box-shadow:0 0 0 2px #2563eb40;z-index:10}.canvas-component-card:focus-within,.canvas-component-card:has(.rpt-combobox-menu),.canvas-component-card:has(.is-open){z-index:100}.canvas-component-card.is-resizing{-webkit-user-select:none;user-select:none;border-color:var(--rpt-color-primary, #2563eb);box-shadow:0 0 0 2px #2563eb59;z-index:30;transition:none!important}.resize-handle{position:absolute;z-index:20;touch-action:none;opacity:0;pointer-events:none;transition:opacity .15s ease}.canvas-component-card.is-selected .resize-handle{opacity:1;pointer-events:auto}.resize-handle.handle-e{top:0;right:0;width:6px;height:100%;cursor:ew-resize;display:flex;align-items:center;justify-content:center}.resize-handle.handle-e:after{content:\"\";width:3px;height:24px;background:#cbd5e1;border-radius:2px;transition:background .15s ease}.resize-handle.handle-e:hover:after,.canvas-component-card.is-selected .resize-handle.handle-e:after{background:var(--rpt-color-primary, #2563eb)}.resize-handle.handle-s{bottom:0;left:0;height:6px;width:100%;cursor:ns-resize;display:flex;align-items:center;justify-content:center}.resize-handle.handle-s:after{content:\"\";height:3px;width:24px;background:#cbd5e1;border-radius:2px;transition:background .15s ease}.resize-handle.handle-s:hover:after,.canvas-component-card.is-selected .resize-handle.handle-s:after{background:var(--rpt-color-primary, #2563eb)}.resize-handle.handle-se{bottom:0;right:0;width:12px;height:12px;cursor:nwse-resize;display:flex;align-items:flex-end;justify-content:flex-end;padding:2px}.resize-handle.handle-se:after{content:\"\";width:5px;height:5px;border-right:2px solid #cbd5e1;border-bottom:2px solid #cbd5e1;transition:border-color .15s ease}.resize-handle.handle-se:hover:after,.canvas-component-card.is-selected .resize-handle.handle-se:after{border-color:var(--rpt-color-primary, #2563eb)}.resize-dimension-tooltip{position:absolute;top:38px;right:8px;background:#0f172ae6;color:#fff;font-size:.7rem;font-weight:600;padding:3px 8px;border-radius:4px;white-space:nowrap;pointer-events:none;z-index:50;box-shadow:0 2px 4px #0003}.card-header{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:5px 8px;background:var(--rpt-color-surface, #f8fafc);border-bottom:1px solid var(--rpt-color-border, #e2e8f0);border-top-left-radius:var(--rpt-border-radius, 6px);border-top-right-radius:var(--rpt-border-radius, 6px);min-height:32px;box-sizing:border-box;overflow:hidden;position:relative}.canvas-component-card.is-selected .card-header{overflow:visible}.card-title-group{display:flex;align-items:center;gap:5px;cursor:grab;min-width:0;flex:1;overflow:hidden}.drag-handle-dots{color:var(--rpt-color-text-muted, #94a3b8);font-size:.85rem;letter-spacing:-2px;flex-shrink:0;-webkit-user-select:none;user-select:none}.comp-title{font-size:.75rem;font-weight:600;color:var(--rpt-color-text, #0f172a);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-user-select:none;user-select:none}.card-actions{display:flex;align-items:center;gap:4px;flex-shrink:0;margin-left:auto}.new-row-pill-static{font-size:.65rem;font-weight:600;color:#7c3aed;background:#f5f3ff;border:1px solid #ddd6fe;padding:1px 5px;border-radius:9999px;white-space:nowrap;line-height:1;flex-shrink:0}.span-pill-static{display:inline-flex;align-items:center;justify-content:center;font-size:.65rem;font-weight:600;color:var(--rpt-color-text-muted, #64748b);background:var(--rpt-color-surface, #f1f5f9);border:1px solid var(--rpt-color-border, #e2e8f0);padding:1px 6px;border-radius:9999px;line-height:1.2;white-space:nowrap;-webkit-user-select:none;user-select:none}.card-quick-controls{display:none;align-items:center;gap:3px;flex-shrink:0}.canvas-component-card:hover .span-pill-static,.canvas-component-card.is-selected .span-pill-static,.canvas-component-card:hover .new-row-pill-static,.canvas-component-card.is-selected .new-row-pill-static{display:none}.canvas-component-card:hover .card-quick-controls,.canvas-component-card.is-selected .card-quick-controls{display:inline-flex}.canvas-component-card.is-narrow .card-header{padding:4px 6px;gap:3px}.canvas-component-card.is-narrow:hover .comp-title,.canvas-component-card.is-narrow.is-selected .comp-title,.canvas-component-card.is-narrow:hover .drag-handle-dots,.canvas-component-card.is-narrow.is-selected .drag-handle-dots{display:none}.canvas-component-card.is-narrow .card-quick-controls{gap:2px}.canvas-component-card.is-narrow .span-control-group{height:18px}.canvas-component-card.is-narrow .span-btn{width:14px;height:16px}.canvas-component-card.is-narrow .span-badge{font-size:.6rem;padding:0 2px}.canvas-component-card.is-narrow .span-total{display:none}.canvas-component-card.is-narrow .card-action-btn{width:18px;height:18px}@container (max-width: 250px){.card-header{padding:4px 6px;gap:3px}.canvas-component-card:hover .comp-title,.canvas-component-card.is-selected .comp-title,.canvas-component-card:hover .drag-handle-dots,.canvas-component-card.is-selected .drag-handle-dots,.span-total{display:none}.card-quick-controls{gap:2px}.card-action-btn{width:18px;height:18px}.span-control-group{height:18px}.span-btn{width:14px;height:16px}.span-badge{font-size:.6rem;padding:0 2px}}@container (max-width: 160px){.canvas-component-card.is-selected .card-quick-controls{position:absolute;top:-30px;right:0;background:#fff;border:1.5px solid var(--rpt-color-primary, #2563eb);border-radius:6px;padding:2px 4px;gap:3px;box-shadow:0 4px 12px #2563eb2e,0 2px 4px #00000014;z-index:120;white-space:nowrap}}@media (max-width: 900px){.canvas-component-card:hover .comp-title,.canvas-component-card.is-selected .comp-title,.canvas-component-card:hover .drag-handle-dots,.canvas-component-card.is-selected .drag-handle-dots,.canvas-component-card .span-total{display:none}.canvas-component-card.is-selected .card-header{overflow:visible}.canvas-component-card.is-selected .card-quick-controls{position:absolute;top:-30px;right:0;background:#fff;border:1.5px solid var(--rpt-color-primary, #2563eb);border-radius:6px;padding:2px 4px;gap:3px;box-shadow:0 4px 12px #2563eb2e,0 2px 4px #00000014;z-index:120;white-space:nowrap}}.span-control-group{display:inline-flex;align-items:center;background:#fff;border:1px solid var(--rpt-color-border, #cbd5e1);border-radius:4px;height:20px;padding:0 1px;white-space:nowrap;flex-shrink:0}.span-btn{width:16px;height:18px;display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;padding:0;color:var(--rpt-color-text-muted, #64748b);cursor:pointer;border-radius:2px;transition:all .12s ease}.span-btn:hover:not(:disabled){background:var(--rpt-color-surface-hover, #f1f5f9);color:var(--rpt-color-primary, #2563eb)}.span-btn:disabled{opacity:.3;cursor:not-allowed}.span-badge{font-size:.65rem;font-weight:600;color:var(--rpt-color-text, #0f172a);padding:0 3px;white-space:nowrap;-webkit-user-select:none;user-select:none;line-height:1}.span-total{font-size:.6rem;color:var(--rpt-color-text-muted, #64748b);font-weight:500}.card-action-btn{width:20px;height:20px;border:none;background:transparent;border-radius:4px;display:inline-flex;align-items:center;justify-content:center;padding:0;cursor:pointer;color:var(--rpt-color-text-muted, #64748b);transition:all .12s ease;flex-shrink:0}.card-action-btn:hover{background:#e2e8f0;color:var(--rpt-color-text, #0f172a)}.card-action-btn.btn-active-toggle{background:#7c3aed;color:#fff;border-color:#7c3aed}.card-action-btn.btn-active-toggle:hover{background:#6d28d9;color:#fff}.btn-delete:hover{background:#fee2e2;color:#ef4444}.card-body{padding:8px 10px 14px;flex:1;display:flex;flex-direction:column;min-height:0;min-width:0;max-width:100%;box-sizing:border-box;overflow:visible}.mock-input-field{display:flex;flex-direction:column;gap:4px;flex:1;height:100%;min-height:0}.mock-label{font-size:.7rem;font-weight:600;color:var(--rpt-color-text-muted, #475569);flex-shrink:0}.mock-input-box,.mock-select-box{border:1px solid var(--rpt-color-border, #cbd5e1);border-radius:6px;padding:6px 12px;font-size:var(--rpt-font-size-base, .875rem);color:var(--rpt-color-text-muted, #94a3b8);background:#fff;flex:1;min-height:38px;height:100%;display:flex;align-items:center;justify-content:space-between;box-sizing:border-box}.mock-checkbox-field{display:flex;align-items:center;gap:6px;flex:1;height:100%;min-height:0;padding-top:14px}.mock-check-box{width:18px;height:18px;border:1px solid var(--rpt-color-border, #cbd5e1);border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:.65rem;color:var(--rpt-color-primary, #2563eb);flex-shrink:0}.mock-btn-wrapper{display:flex;flex:1;height:100%;min-height:38px;align-items:center;justify-content:flex-start;width:100%;min-width:0;box-sizing:border-box}.mock-btn{border-radius:var(--rpt-border-radius, 6px);padding:0 16px;height:36px;font-size:var(--rpt-font-size-base, .875rem);font-weight:500;border:1px solid transparent;cursor:pointer;width:auto;max-width:100%;display:inline-flex;align-items:center;justify-content:center;gap:6px;box-sizing:border-box;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:all .15s ease}.mock-btn.mock-btn-full{width:100%}.canvas-component-card.is-narrow .mock-btn{padding:0 6px;font-size:.775rem;width:100%;height:34px}.mock-kpi-field{display:flex;flex-direction:column;justify-content:space-between;flex:1;height:100%;min-height:0}.mock-kpi-header{display:flex;align-items:center;justify-content:space-between}.mock-kpi-value{font-size:1.25rem;font-weight:700;color:var(--rpt-color-text, #0f172a);margin:2px 0}.mock-kpi-footer{display:flex;align-items:center;gap:6px;font-size:.65rem}.mock-kpi-trend{color:#16a34a;font-weight:600}.mock-kpi-sub{color:#64748b}.mock-chart-field{display:flex;flex-direction:column;flex:1;height:100%;min-height:140px}.mock-chart-bars{display:flex;align-items:flex-end;justify-content:space-around;gap:16px;flex:1;min-height:100px;padding-top:12px;box-sizing:border-box}.mock-chart-col{flex:1;display:flex;flex-direction:column;align-items:center;height:100%;min-width:60px;max-width:140px}.mock-chart-bar{width:38px;max-width:44px;margin:0 auto;background:var(--rpt-color-primary, #2563eb);border-radius:6px 6px 0 0;opacity:.85;min-height:10px;transition:height .2s ease}.mock-bar-lbl{font-size:.6875rem;color:#64748b;margin-top:6px;text-align:center;white-space:normal;line-height:1.2}.btn-primary{background:var(--rpt-color-primary, #2563eb);color:#fff}.btn-secondary{background:#f1f5f9;color:#0f172a;border:1px solid #cbd5e1}.btn-outline{background:transparent;color:#2563eb;border:1px solid #2563eb}.btn-danger{background:#ef4444;color:#fff}.mock-generic-box{border:1px dashed #cbd5e1;border-radius:4px;padding:8px;font-size:.75rem;text-align:center;color:#64748b}.canvas-drag-placeholder{background:#2563eb0f;border:2px dashed var(--rpt-color-primary, #2563eb);border-radius:6px;min-height:80px;box-sizing:border-box;transition:transform .15s ease}.canvas-drag-preview,::ng-deep .canvas-drag-preview{background:#fff;border:2px solid var(--rpt-color-primary, #2563eb);border-radius:6px;padding:8px 14px;display:inline-flex;align-items:center;gap:8px;font-family:var(--rpt-font-family, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif)!important;font-size:.8rem;font-weight:600;color:var(--rpt-color-text, #0f172a);box-shadow:0 12px 24px -4px #00000040;z-index:10000}.preview-title,::ng-deep .preview-title{font-family:inherit!important;max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preview-span,::ng-deep .preview-span{font-family:inherit!important;font-size:.65rem;font-weight:600;color:var(--rpt-color-primary, #2563eb);background:#eff6ff;border:1px solid #bfdbfe;padding:1px 6px;border-radius:9999px}.canvas-empty-state{grid-column:1 / -1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:56px 28px;border:2px dashed var(--rpt-color-border, #cbd5e1);border-radius:var(--rpt-border-radius-xl, 12px);background:var(--rpt-color-surface, #ffffff);text-align:center;box-shadow:var(--rpt-box-shadow-xs, 0 1px 2px 0 rgba(0, 0, 0, .04));transition:border-color var(--rpt-transition-speed, .15s) ease}.canvas-empty-state:hover{border-color:var(--rpt-color-primary, #2563eb)}.empty-hero-badge{width:56px;height:56px;border-radius:var(--rpt-border-radius-xl, 12px);background:var(--rpt-color-primary-light, #eff6ff);color:var(--rpt-color-primary, #2563eb);display:flex;align-items:center;justify-content:center;margin-bottom:16px;box-shadow:0 2px 8px #2563eb1f}.empty-hero-title{font-size:var(--rpt-font-size-lg, 1.125rem);font-weight:700;color:var(--rpt-color-text, #0f172a);margin:0 0 8px;letter-spacing:-.01em}.empty-hero-desc{font-size:var(--rpt-font-size-base, .875rem);color:var(--rpt-color-text-muted, #64748b);max-width:520px;line-height:1.5;margin:0 0 24px}.empty-hero-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px}.empty-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 16px;font-size:var(--rpt-font-size-sm, .75rem);font-weight:600;border-radius:var(--rpt-border-radius, 6px);cursor:pointer;transition:all var(--rpt-transition-speed, .15s) ease;font-family:inherit}.empty-btn-primary{background:var(--rpt-color-primary, #2563eb);color:#fff;border:1px solid var(--rpt-color-primary, #2563eb);box-shadow:0 1px 3px #2563eb33}.empty-btn-primary:hover{background:var(--rpt-color-primary-hover, #1d4ed8);border-color:var(--rpt-color-primary-hover, #1d4ed8);transform:translateY(-1px)}.empty-btn-secondary{background:#f8fafc;color:#334155;border:1px solid var(--rpt-color-border, #cbd5e1)}.empty-btn-secondary:hover{background:#f1f5f9;color:#0f172a;border-color:#94a3b8;transform:translateY(-1px)}.empty-btn-outline{background:#fff;color:var(--rpt-color-primary, #2563eb);border:1px solid #bfdbfe}.empty-btn-outline:hover{background:#eff6ff;border-color:var(--rpt-color-primary, #2563eb);transform:translateY(-1px)}.canvas-active-input{width:100%;height:32px;padding:4px 8px;font-size:.8125rem;border:1px solid var(--rpt-color-border, #cbd5e1);border-radius:4px;outline:none;box-sizing:border-box;background:#fff;color:#0f172a;transition:border-color .15s ease}.canvas-active-input:focus{border-color:var(--rpt-color-primary, #2563eb)}.canvas-active-checkbox-lbl{display:inline-flex;align-items:center;gap:6px;cursor:pointer}.canvas-live-control-wrapper{width:100%;max-width:100%;min-width:0;position:relative;z-index:1;box-sizing:border-box}.canvas-grid-box{margin-top:24px;border:1px solid var(--rpt-color-border, #cbd5e1);border-radius:8px;background:#fff;box-shadow:0 1px 3px #0000000d;overflow:hidden}.grid-preview-header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:var(--rpt-color-surface, #f8fafc);border-bottom:1px solid var(--rpt-color-border, #cbd5e1);font-size:.8rem;font-weight:600;color:var(--rpt-color-text, #0f172a)}.grid-title{font-weight:700}.grid-exec-badge{font-size:.6875rem;font-weight:600;padding:2px 8px;border-radius:10px}.grid-exec-badge.is-loading{background:#eff6ff;color:#2563eb}.grid-exec-badge.is-error{background:#fee2e2;color:#ef4444}.grid-exec-badge.is-success{background:#ecfdf5;color:#059669}.btn-canvas-run-grid{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;font-size:.72rem;font-weight:600;color:#fff;background:var(--rpt-color-primary, #2563eb);border:none;border-radius:4px;cursor:pointer;transition:background .15s ease}.btn-canvas-run-grid:hover:not(:disabled){background:#1d4ed8}.btn-canvas-run-grid:disabled{opacity:.6;cursor:not-allowed}.btn-canvas-edit-grid{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;font-size:.72rem;font-weight:500;color:#334155;background:#fff;border:1px solid #cbd5e1;border-radius:4px;cursor:pointer;transition:all .12s ease}.btn-canvas-edit-grid:hover{background:#f1f5f9}.canvas-live-grid-container{width:100%;min-height:480px;background:#fff}.live-mode-badge{display:inline-flex;align-items:center;gap:4px;font-size:.6875rem;font-weight:700;color:#047857;background:#ecfdf5;border:1px solid #a7f3d0;padding:1px 8px;border-radius:9999px}.canvas-component-card.is-field-highlighted{border-color:#f59e0b!important;box-shadow:0 0 0 3px #f59e0b59!important;animation:rpt-pulse-border 1s ease-in-out infinite alternate}@keyframes rpt-pulse-border{0%{box-shadow:0 0 0 2px #f59e0b40}to{box-shadow:0 0 0 5px #f59e0b80}}.grid-layout-status-strip{display:flex;align-items:center;justify-content:space-between;padding:6px 16px;background:#f1f5f9;border-bottom:1px solid var(--rpt-color-border, #cbd5e1);font-size:.6875rem;color:#475569}.grid-status-info{display:inline-flex;align-items:center;gap:6px;font-weight:600}.grid-status-sync{display:inline-flex;align-items:center;gap:4px;color:#059669;font-weight:600;transition:transform .2s ease}.grid-status-sync.is-pulsing{transform:scale(1.08);color:#047857}.canvas-actions{display:flex;align-items:center;gap:8px}.btn-grid-add{background:#f0fdf4;border-color:#bbf7d0;color:#16a34a}.btn-grid-add:hover{background:#dcfce7;border-color:#86efac;color:#15803d}.btn-remove-grid{display:inline-flex;align-items:center;justify-content:center;padding:4px;border:none;background:transparent;color:#94a3b8;border-radius:4px;cursor:pointer;transition:all .15s ease}.btn-remove-grid:hover{background:#fee2e2;color:#ef4444}.canvas-add-grid-banner{margin-top:24px;border:2px dashed #cbd5e1;border-radius:8px;background:#fff;padding:16px 20px;display:flex;align-items:center;gap:16px;cursor:pointer;transition:all .15s ease}.canvas-add-grid-banner:hover{border-color:#2563eb;background:#f8fafc;box-shadow:0 2px 8px #2563eb14}.add-grid-icon{width:40px;height:40px;border-radius:8px;background:#eff6ff;color:#2563eb;display:flex;align-items:center;justify-content:center;flex-shrink:0}.add-grid-text{display:flex;flex-direction:column;gap:2px;flex:1}.add-grid-title{font-size:.875rem;font-weight:600;color:#0f172a}.add-grid-sub{font-size:.75rem;color:#64748b}.btn-banner-add{padding:6px 14px;font-size:.75rem;font-weight:600;color:#2563eb;background:#eff6ff;border:1px solid #bfdbfe;border-radius:6px;cursor:pointer;white-space:nowrap;transition:all .15s ease}.canvas-add-grid-banner:hover .btn-banner-add{background:#2563eb;color:#fff;border-color:#2563eb}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i1$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i1$2.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i1$2.CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "directive", type: i1$2.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: RptIconComponent, selector: "rpt-icon", inputs: ["name", "size", "color", "strokeWidth"] }, { kind: "component", type: RptDropdownComponent, selector: "rpt-dropdown", inputs: ["config", "control", "parentForm", "showStatus"] }, { kind: "component", type: RptDateRangeComponent, selector: "rpt-date-range", inputs: ["config", "control"] }, { kind: "component", type: ReportGridBridgeComponent, selector: "rpt-grid-bridge", inputs: ["gridDefinition", "data"], outputs: ["gridStateChange", "columnDefsChange", "rowClick", "selectionChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: DesignCanvasComponent, isStandalone: true, selector: "rpt-design-canvas", host: { listeners: { "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: "    <div class=\"canvas-wrapper\" (click)=\"onCanvasBackgroundClick($event)\">\n      <!-- Canvas Status / Quick Controls -->\n      <div class=\"canvas-toolbar\">\n        <div class=\"canvas-info\">\n          <span class=\"info-label\">Grid Layout:</span>\n          <span class=\"info-value\">{{ totalColumns() }} Columns</span>\n          <span class=\"info-divider\">\u2022</span>\n          <span class=\"info-label\">Components:</span>\n          <span class=\"info-value\">{{ components().length }}</span>\n          <span class=\"info-divider\">\u2022</span>\n          <span class=\"live-mode-badge\" title=\"Interactive canvas: Values typed here run live queries and test dropdowns.\">\n            \u26A1 Live Interactive Mode\n          </span>\n        </div>\n\n        <div class=\"canvas-actions\">\n          @if (!definition().grid) {\n            <button\n              type=\"button\"\n              class=\"canvas-action-btn btn-grid-add\"\n              (click)=\"addResultGrid($event)\"\n              title=\"Add a Result Grid to this report\"\n            >\n              <rpt-icon name=\"table\" [size]=\"14\" />\n              <span>+ Add Grid</span>\n            </button>\n          } @else {\n            <button\n              type=\"button\"\n              class=\"canvas-action-btn btn-grid-configured\"\n              (click)=\"selectGridSettings($event)\"\n              title=\"Configure Result Data Grid\"\n            >\n              <rpt-icon name=\"table\" [size]=\"14\" />\n              <span>Grid ({{ definition().grid?.columns?.length ?? 0 }})</span>\n            </button>\n          }\n\n          <button\n            type=\"button\"\n            class=\"canvas-action-btn\"\n            (click)=\"selectReportSettings($event)\"\n            title=\"Configure Page Layout & Grid Settings\"\n          >\n            <rpt-icon name=\"settings\" [size]=\"14\" />\n            <span>Report Settings</span>\n          </button>\n        </div>\n      </div>\n\n      <!-- Canvas Drop Area -->\n      <div class=\"canvas-scroll-area\">\n        <div\n          class=\"canvas-artboard\"\n          [style.padding.px]=\"definition().layout.padding ?? 24\"\n        >\n          <!-- Report Header Preview -->\n          <div class=\"canvas-report-header\">\n            <h2 class=\"canvas-report-title\">{{ definition().name || 'Untitled Report' }}</h2>\n            @if (definition().description) {\n              <p class=\"canvas-report-desc\">{{ definition().description }}</p>\n            }\n          </div>\n\n          <!-- Component Drop List Grid with 2D mixed orientation and data binding -->\n          <div\n            cdkDropList\n            id=\"designer-canvas-drop-list\"\n            class=\"canvas-grid\"\n            cdkDropListOrientation=\"mixed\"\n            [cdkDropListData]=\"sortedComponents()\"\n            [style.grid-template-columns]=\"gridTemplateColumns()\"\n            [style.gap.px]=\"definition().layout.gap ?? 16\"\n            (cdkDropListDropped)=\"onDrop($event)\"\n          >\n            @for (comp of sortedComponents(); track comp.id; let idx = $index) {\n              <div\n                cdkDrag\n                [cdkDragData]=\"comp\"\n                [cdkDragDisabled]=\"isAnyResizing()\"\n                class=\"canvas-component-card\"\n                [class.is-selected]=\"isSelected(comp.id)\"\n                [class.is-resizing]=\"resizingCompId() === comp.id\"\n                [class.is-field-highlighted]=\"isFieldHighlighted(comp)\"\n                [class.is-narrow]=\"getSpan(comp) <= 4\"\n                [class.is-compact]=\"getSpan(comp) <= 2\"\n                [style.grid-column]=\"getGridColumn(comp)\"\n                [style.grid-row]=\"getGridRow(comp)\"\n                [style.width]=\"comp.layout?.width || 'auto'\"\n                [style.height]=\"getComponentHeight(comp)\"\n                [style.min-height]=\"getComponentMinHeight(comp)\"\n                (click)=\"onSelect(comp.id, $event)\"\n              >\n                <!-- Card Header with Drag Handle & Actions -->\n                <div class=\"card-header\">\n                  <div class=\"card-title-group\" cdkDragHandle title=\"Drag to reorder\">\n                    <span class=\"drag-handle-dots\">\u22EE\u22EE</span>\n                    <rpt-icon [name]=\"getComponentIconName(comp.type)\" [size]=\"14\" />\n                    <span class=\"comp-title\" [title]=\"comp.label || comp.key || comp.type\">\n                      {{ comp.label || comp.key || comp.type }}\n                    </span>\n                  </div>\n\n                  <div class=\"card-actions\">\n                    <!-- Static span pill & new row / start col pill when not hovered / not selected -->\n                    @if (comp.layout?.column; as col) {\n                      <span class=\"new-row-pill-static\" title=\"Starts at Column {{ col }}\">Col {{ col }}</span>\n                    } @else if (comp.layout?.newRow) {\n                      <span class=\"new-row-pill-static\" title=\"Starts on separate row\">\u21B3 Row</span>\n                    }\n                    <span\n                      class=\"span-pill-static\"\n                      title=\"Column span: {{ getSpan(comp) }} of {{ totalColumns() }} columns\"\n                    >\n                      {{ getSpan(comp) }}/{{ totalColumns() }}\n                    </span>\n\n                    <!-- Quick Action Stepper & Buttons (revealed on hover or selection) -->\n                    <div class=\"card-quick-controls\">\n                      <button\n                        type=\"button\"\n                        class=\"card-action-btn\"\n                        [class.btn-active-toggle]=\"comp.layout?.newRow\"\n                        (click)=\"toggleNewRow(comp, $event)\"\n                        title=\"{{ comp.layout?.newRow ? 'Starts on new row (Click to place inline)' : 'Start on separate row (Row Break)' }}\"\n                      >\n                        <rpt-icon name=\"corner-down-right\" [size]=\"11\" />\n                      </button>\n\n                      <div class=\"span-control-group\" title=\"Adjust Column Span\">\n                        <button\n                          type=\"button\"\n                          class=\"span-btn\"\n                          [disabled]=\"getSpan(comp) <= 1\"\n                          (click)=\"adjustSpan(comp, -1, $event)\"\n                          title=\"Shrink Column Span\"\n                        >\n                          <rpt-icon name=\"minus\" [size]=\"9\" />\n                        </button>\n                        <span class=\"span-badge\" [title]=\"'Column span: ' + getSpan(comp) + ' of ' + totalColumns()\">\n                          <span class=\"span-num\">{{ getSpan(comp) }}</span><span class=\"span-total\">/{{ totalColumns() }}</span>\n                        </span>\n                        <button\n                          type=\"button\"\n                          class=\"span-btn\"\n                          [disabled]=\"getSpan(comp) >= totalColumns()\"\n                          (click)=\"adjustSpan(comp, 1, $event)\"\n                          title=\"Expand Column Span\"\n                        >\n                          <rpt-icon name=\"plus\" [size]=\"9\" />\n                        </button>\n                      </div>\n\n                      <button\n                        type=\"button\"\n                        class=\"card-action-btn\"\n                        (click)=\"onDuplicate(comp.id, $event)\"\n                        title=\"Duplicate component\"\n                      >\n                        <rpt-icon name=\"copy\" [size]=\"12\" />\n                      </button>\n                      <button\n                        type=\"button\"\n                        class=\"card-action-btn btn-delete\"\n                        (click)=\"onDelete(comp.id, $event)\"\n                        title=\"Remove component\"\n                      >\n                        <rpt-icon name=\"trash\" [size]=\"12\" />\n                      </button>\n                    </div>\n                  </div>\n                </div>\n\n                <!-- Card Body Visual Preview -->\n                <div class=\"card-body\">\n\n                  @switch (comp.type) {\n                    @case ('input') {\n                      <div class=\"mock-input-field\" (click)=\"onControlInteract(comp, $event)\">\n                        <span class=\"mock-label\">{{ comp.label || 'Input' }}</span>\n                        @if (getCanvasControl(comp); as ctrl) {\n                          <input\n                            type=\"text\"\n                            class=\"canvas-active-input\"\n                            [placeholder]=\"comp.properties?.['placeholder'] || 'Enter text...'\"\n                            [formControl]=\"ctrl\"\n                            (focus)=\"onControlInteract(comp, $event)\"\n                          />\n                        } @else {\n                          <div class=\"mock-input-box\">{{ comp.properties?.['placeholder'] || 'Enter text...' }}</div>\n                        }\n                      </div>\n                    }\n                    @case ('dropdown') {\n                      <div class=\"canvas-live-control-wrapper\" (click)=\"onControlInteract(comp, $event)\">\n                        <rpt-dropdown\n                          [config]=\"comp\"\n                          [showStatus]=\"true\"\n                          [parentForm]=\"canvasForm()\"\n                          [control]=\"getCanvasControl(comp)\"\n                        />\n                      </div>\n                    }\n                    @case ('date') {\n                      <div class=\"mock-input-field\" (click)=\"onControlInteract(comp, $event)\">\n                        <span class=\"mock-label\">{{ comp.label || 'Date' }}</span>\n                        @if (getCanvasControl(comp); as ctrl) {\n                          <input\n                            type=\"date\"\n                            class=\"canvas-active-input\"\n                            [formControl]=\"ctrl\"\n                            (focus)=\"onControlInteract(comp, $event)\"\n                          />\n                        } @else {\n                          <div class=\"mock-select-box\">\n                            <span>YYYY-MM-DD</span>\n                            <rpt-icon name=\"calendar\" [size]=\"12\" />\n                          </div>\n                        }\n                      </div>\n                    }\n                    @case ('date-range') {\n                      <div class=\"canvas-live-control-wrapper\" (click)=\"onControlInteract(comp, $event)\">\n                        <rpt-date-range\n                          [config]=\"comp\"\n                          [control]=\"getCanvasControl(comp)\"\n                        />\n                      </div>\n                    }\n                    @case ('number') {\n                      <div class=\"mock-input-field\" (click)=\"onControlInteract(comp, $event)\">\n                        <span class=\"mock-label\">{{ comp.label || 'Number' }}</span>\n                        @if (getCanvasControl(comp); as ctrl) {\n                          <input\n                            type=\"number\"\n                            class=\"canvas-active-input\"\n                            [formControl]=\"ctrl\"\n                            (focus)=\"onControlInteract(comp, $event)\"\n                          />\n                        } @else {\n                          <div class=\"mock-input-box\">\n                            {{ comp.properties?.['prefix'] || '' }} 0.00 {{ comp.properties?.['suffix'] || '' }}\n                          </div>\n                        }\n                      </div>\n                    }\n                    @case ('checkbox') {\n                      <div class=\"mock-checkbox-field\" (click)=\"onControlInteract(comp, $event)\">\n                        @if (getCanvasControl(comp); as ctrl) {\n                          <label class=\"canvas-active-checkbox-lbl\">\n                            <input type=\"checkbox\" [formControl]=\"ctrl\" (focus)=\"onControlInteract(comp, $event)\" />\n                            <span class=\"mock-label\">{{ comp.label || 'Checkbox' }}</span>\n                          </label>\n                        } @else {\n                          <span class=\"mock-check-box\">\n                            <rpt-icon name=\"check\" [size]=\"10\" />\n                          </span>\n                          <span class=\"mock-label\">{{ comp.label || 'Checkbox' }}</span>\n                        }\n                      </div>\n                    }\n                    @case ('button') {\n                      <div class=\"mock-btn-wrapper\">\n                        <button\n                          type=\"button\"\n                          class=\"mock-btn\"\n                          [class]=\"'btn-' + (comp.properties?.['variant'] || 'primary')\"\n                          [class.mock-btn-full]=\"comp.properties?.['fullWidth'] === true || comp.layout?.width === '100%'\"\n                          [style.height]=\"getCustomBtnHeight(comp)\"\n                          [style.width]=\"getCustomBtnWidth(comp)\"\n                          (click)=\"onCanvasButtonClick(comp, $event)\"\n                        >\n                          @if (getCustomBtnIcon(comp); as btnIcon) {\n                            <rpt-icon [name]=\"btnIcon\" [size]=\"15\" />\n                          }\n                          <span>{{ comp.label || 'Button' }}</span>\n                        </button>\n                      </div>\n                    }\n                    @case ('kpi-card') {\n                      <div class=\"mock-kpi-field\">\n                        <div class=\"mock-kpi-header\">\n                          <span class=\"mock-label\">{{ comp.label || 'KPI Metric' }}</span>\n                          <rpt-icon name=\"kpi\" [size]=\"14\" />\n                        </div>\n                        <div class=\"mock-kpi-value\">{{ comp.properties?.['value'] || '$128,450' }}</div>\n                        <div class=\"mock-kpi-footer\">\n                          <span class=\"mock-kpi-trend\">+12.5%</span>\n                          <span class=\"mock-kpi-sub\">vs last period</span>\n                        </div>\n                      </div>\n                    }\n                    @case ('chart') {\n                      <div class=\"mock-chart-field\">\n                        <div class=\"mock-chart-header\">\n                          <span class=\"mock-label\">{{ comp.label || 'Quarterly Sales Revenue ($000)' }}</span>\n                        </div>\n                        <div class=\"mock-chart-bars\">\n                          <div class=\"mock-chart-col\">\n                            <div class=\"mock-chart-bar\" style=\"height: 44%\"></div>\n                            <span class=\"mock-bar-lbl\">Q1 Jan-Mar</span>\n                          </div>\n                          <div class=\"mock-chart-col\">\n                            <div class=\"mock-chart-bar\" style=\"height: 61%\"></div>\n                            <span class=\"mock-bar-lbl\">Q2 Apr-Jun</span>\n                          </div>\n                          <div class=\"mock-chart-col\">\n                            <div class=\"mock-chart-bar\" style=\"height: 79%\"></div>\n                            <span class=\"mock-bar-lbl\">Q3 Jul-Sep</span>\n                          </div>\n                          <div class=\"mock-chart-col\">\n                            <div class=\"mock-chart-bar\" style=\"height: 100%\"></div>\n                            <span class=\"mock-bar-lbl\">Q4 Oct-Dec</span>\n                          </div>\n                        </div>\n                      </div>\n                    }\n                    @default {\n                      <div class=\"mock-generic-box\">\n                        <span>{{ comp.type }}</span>\n                      </div>\n                    }\n                  }\n                </div>\n\n                <!-- Resizing Handles (East, South, South-East) -->\n                <div\n                  class=\"resize-handle handle-e\"\n                  (pointerdown)=\"startResize($event, comp, 'e')\"\n                  (dblclick)=\"resetDimensions(comp, $event)\"\n                  title=\"Drag to resize column width \u2022 Double-click to reset\"\n                ></div>\n                <div\n                  class=\"resize-handle handle-s\"\n                  (pointerdown)=\"startResize($event, comp, 's')\"\n                  (dblclick)=\"resetDimensions(comp, $event)\"\n                  title=\"Drag to resize height \u2022 Double-click to reset\"\n                ></div>\n                <div\n                  class=\"resize-handle handle-se\"\n                  (pointerdown)=\"startResize($event, comp, 'se')\"\n                  (dblclick)=\"resetDimensions(comp, $event)\"\n                  title=\"Drag to resize width and height \u2022 Double-click to reset\"\n                ></div>\n\n                <!-- Resizing Dimension Ghost / Badge -->\n                @if (resizingCompId() === comp.id) {\n                  <div class=\"resize-dimension-tooltip\">\n                    {{ resizingTooltip(comp) }}\n                  </div>\n                }\n\n                <!-- Drag placeholder with matched grid column span -->\n                <div\n                  *cdkDragPlaceholder\n                  class=\"canvas-drag-placeholder\"\n                  [style.grid-column]=\"getGridColumn(comp)\"\n                ></div>\n\n                <!-- Drag preview -->\n                <div *cdkDragPreview class=\"canvas-drag-preview\">\n                  <span class=\"drag-handle-dots\">\u22EE\u22EE</span>\n                  <rpt-icon [name]=\"getComponentIconName(comp.type)\" [size]=\"14\" />\n                  <span class=\"preview-title\">{{ comp.label || comp.key || comp.type }}</span>\n                  <span class=\"preview-span\">{{ getSpan(comp) }}/{{ totalColumns() }}</span>\n                </div>\n              </div>\n            }\n\n            @if (components().length === 0) {\n              <div class=\"canvas-empty-state\" role=\"region\" aria-label=\"Empty canvas starter options\">\n                <div class=\"empty-hero-badge\">\n                  <rpt-icon name=\"design\" [size]=\"28\" />\n                </div>\n                <h3 class=\"empty-hero-title\">Start Designing Your Custom Report</h3>\n                <p class=\"empty-hero-desc\">\n                  Drag controls from the left component palette, or jumpstart your design with pre-configured enterprise blueprints.\n                </p>\n\n                <div class=\"empty-hero-actions\">\n                  <button\n                    type=\"button\"\n                    class=\"empty-btn empty-btn-primary\"\n                    (click)=\"applyBlueprint('blueprint-audit-register')\"\n                    title=\"Load complete Audit Register blueprint with parameters and result grid\"\n                  >\n                    <rpt-icon name=\"table\" [size]=\"15\" />\n                    <span>Audit Register Blueprint</span>\n                  </button>\n                  <button\n                    type=\"button\"\n                    class=\"empty-btn empty-btn-secondary\"\n                    (click)=\"applyBlueprint('blueprint-kpi-summary')\"\n                    title=\"Load Executive KPI summary blueprint\"\n                  >\n                    <rpt-icon name=\"chart-bar\" [size]=\"15\" />\n                    <span>KPI Summary Blueprint</span>\n                  </button>\n                  <button\n                    type=\"button\"\n                    class=\"empty-btn empty-btn-outline\"\n                    (click)=\"addStarterComponent('date-range')\"\n                    title=\"Add a Date Range filter component\"\n                  >\n                    <rpt-icon name=\"calendar\" [size]=\"14\" />\n                    <span>+ Add Date Filter</span>\n                  </button>\n                  <button\n                    type=\"button\"\n                    class=\"empty-btn empty-btn-outline\"\n                    (click)=\"addStarterComponent('button')\"\n                    title=\"Add an Execute Action button\"\n                  >\n                    <rpt-icon name=\"play\" [size]=\"14\" />\n                    <span>+ Add Run Button</span>\n                  </button>\n                </div>\n              </div>\n            }\n          </div>\n\n          <!-- Live Result Grid Preview with Bways-Grid Features -->\n          @if (definition().grid) {\n            <div class=\"canvas-grid-box\">\n              <div class=\"grid-preview-header\">\n                <div style=\"display: flex; align-items: center; gap: 8px;\">\n                  <rpt-icon name=\"table\" [size]=\"15\" />\n                  <span class=\"grid-title\">Bways Grid ({{ definition().grid?.columns?.length ?? 0 }} columns)</span>\n                  @if (isExecutingGrid()) {\n                    <span class=\"grid-exec-badge is-loading\">Loading data from database...</span>\n                  } @else if (gridExecError()) {\n                    <span class=\"grid-exec-badge is-error\">{{ gridExecError() }}</span>\n                  } @else if (canvasGridData().length > 0) {\n                    <span class=\"grid-exec-badge is-success\">{{ canvasGridData().length }} rows loaded</span>\n                  }\n                </div>\n                <div style=\"display: flex; align-items: center; gap: 8px;\">\n                  <button\n                    type=\"button\"\n                    class=\"btn-canvas-run-grid\"\n                    (click)=\"executeCanvasReport($event)\"\n                    [disabled]=\"isExecutingGrid()\"\n                    title=\"Execute query and load data into Bways Grid\"\n                  >\n                    <rpt-icon name=\"play\" [size]=\"11\" />\n                    <span>{{ isExecutingGrid() ? 'Running...' : 'Run / Refresh Grid' }}</span>\n                  </button>\n                  <button\n                    type=\"button\"\n                    class=\"btn-canvas-edit-grid\"\n                    (click)=\"selectGridSettings($event)\"\n                    title=\"Configure columns and grid options\"\n                  >\n                    <rpt-icon name=\"settings\" [size]=\"11\" />\n                    <span>Configure</span>\n                  </button>\n                  <button\n                    type=\"button\"\n                    class=\"btn-remove-grid\"\n                    (click)=\"removeGrid($event)\"\n                    title=\"Remove Result Grid from this report\"\n                  >\n                    <rpt-icon name=\"trash\" [size]=\"13\" />\n                  </button>\n                </div>\n              </div>\n\n              @if (getGridSummaryText(); as summary) {\n                <div class=\"grid-layout-status-strip\">\n                  <div class=\"grid-status-info\">\n                    <rpt-icon name=\"table\" [size]=\"12\" />\n                    <span>{{ summary }}</span>\n                  </div>\n                  <div class=\"grid-status-sync\" [class.is-pulsing]=\"layoutJustUpdated()\">\n                    <rpt-icon name=\"check\" [size]=\"11\" />\n                    <span>Layout auto-persisted</span>\n                  </div>\n                </div>\n              }\n\n              <!-- Live Bways Grid bridge -->\n              <div class=\"canvas-live-grid-container\" (click)=\"$event.stopPropagation()\" style=\"position: relative; min-height: 250px;\">\n                @if (isExecutingGrid()) {\n                  <div class=\"canvas-grid-loading-overlay\">\n                    <span class=\"status-dot dot-pulse\" style=\"width: 14px; height: 14px; color: #2563eb; background: #2563eb; border-radius: 50%;\"></span>\n                    <span class=\"grid-loading-title\">Executing stored procedure on SQL Server...</span>\n                    <span class=\"grid-loading-sub\">Calculating outstanding balances and ledger amounts. Please wait...</span>\n                  </div>\n                }\n                <rpt-grid-bridge\n                  [gridDefinition]=\"definition().grid!\"\n                  [data]=\"canvasGridData()\"\n                  (gridStateChange)=\"onCanvasGridStateChange($event)\"\n                  (columnDefsChange)=\"onCanvasColumnDefsChange($event)\"\n                />\n              </div>\n            </div>\n          } @else {\n            <div class=\"canvas-add-grid-banner\" (click)=\"addResultGrid($event)\">\n              <div class=\"add-grid-icon\">\n                <rpt-icon name=\"table\" [size]=\"20\" />\n              </div>\n              <div class=\"add-grid-text\">\n                <span class=\"add-grid-title\">+ Add Result Data Grid</span>\n                <span class=\"add-grid-sub\">Attach an interactive data table or UltraGrid to display report execution output</span>\n              </div>\n              <button type=\"button\" class=\"btn-banner-add\">Add Grid</button>\n            </div>\n          }\n        </div>\n      </div>\n    </div>", styles: [":host{display:block;height:100%;background-color:#f1f5f9;font-family:var(--rpt-font-family, inherit);box-sizing:border-box}.canvas-wrapper{display:flex;flex-direction:column;height:100%}.canvas-toolbar{display:flex;align-items:center;justify-content:space-between;min-height:42px;height:42px;padding:0 24px;background:var(--rpt-color-surface, #ffffff);border-bottom:1px solid var(--rpt-color-border, #cbd5e1);box-sizing:border-box;gap:12px;overflow-x:auto;scrollbar-width:none;font-family:var(--rpt-font-family, inherit);flex-shrink:0}.canvas-toolbar::-webkit-scrollbar{display:none}.canvas-info{display:flex;align-items:center;gap:8px;font-family:var(--rpt-font-family, inherit);font-size:var(--rpt-font-size-sm, .75rem);color:var(--rpt-color-text-muted, #64748b);white-space:nowrap;line-height:1}.info-label{color:var(--rpt-color-text-muted, #64748b);font-weight:500;font-size:var(--rpt-font-size-sm, .75rem)}.info-value{font-weight:600;color:var(--rpt-color-text, #0f172a);font-size:var(--rpt-font-size-sm, .75rem)}.info-divider{color:var(--rpt-color-border, #cbd5e1);margin:0 2px}.live-mode-badge{display:inline-flex;align-items:center;gap:4px;font-family:var(--rpt-font-family, inherit);font-size:var(--rpt-font-size-xs, .7rem);font-weight:600;color:#047857;background:#ecfdf5;border:1px solid #a7f3d0;padding:2px 8px;border-radius:9999px;line-height:1}.canvas-actions{display:flex;align-items:center;gap:8px;white-space:nowrap}.canvas-action-btn{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;font-family:var(--rpt-font-family, inherit);font-size:var(--rpt-font-size-sm, .75rem);font-weight:500;letter-spacing:-.01em;color:var(--rpt-color-text-secondary, #334155);background:var(--rpt-color-surface, #ffffff);border:1px solid var(--rpt-color-border, #cbd5e1);border-radius:var(--rpt-border-radius, 6px);cursor:pointer;line-height:1;white-space:nowrap;box-shadow:0 1px 2px #0000000a;transition:all var(--rpt-transition-speed, .15s) ease}.canvas-action-btn:hover{background:var(--rpt-color-surface-hover, #f8fafc);border-color:var(--rpt-color-border-hover, #94a3b8);color:var(--rpt-color-text, #0f172a);box-shadow:0 2px 4px #0000000f}.canvas-action-btn.btn-grid-configured{background:#eff6ff;border-color:#bfdbfe;color:#2563eb;font-weight:600}.canvas-action-btn.btn-grid-configured:hover{background:#dbeafe;color:#1d4ed8;border-color:#93c5fd}.canvas-action-btn.btn-grid-add{background:#f0fdf4;border-color:#bbf7d0;color:#16a34a;font-weight:600}.canvas-action-btn.btn-grid-add:hover{background:#dcfce7;color:#15803d;border-color:#86efac}.canvas-action-btn:active{transform:translateY(1px)}.canvas-scroll-area{flex:1;overflow-y:auto;padding:16px}.canvas-artboard{width:100%;max-width:1400px;margin:0 auto;background:#fff;border:1px solid var(--rpt-color-border, #cbd5e1);border-radius:var(--rpt-border-radius-lg, 8px);box-shadow:0 4px 6px -1px #0000000d;min-height:480px;box-sizing:border-box}@media (max-width: 900px){.canvas-toolbar{min-height:36px;height:36px;padding:0 10px;gap:6px}.live-mode-badge{display:none}.canvas-info{font-size:.75rem;gap:5px}.canvas-action-btn{padding:0 8px;font-size:.725rem;height:28px;gap:4px}.canvas-scroll-area{padding:10px}.canvas-artboard{min-height:360px}}@media (max-width: 600px){.canvas-toolbar{padding:0 8px;gap:4px}.canvas-info .info-label,.canvas-action-btn span{display:none}.canvas-action-btn{padding:0 6px;min-width:28px;justify-content:center}}.canvas-report-header{margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--rpt-color-border, #e2e8f0)}.canvas-report-title{font-size:var(--rpt-font-size-xl, 1.5rem);font-weight:700;color:var(--rpt-color-text, #0f172a);margin:0 0 6px}.canvas-report-desc{font-size:var(--rpt-font-size-base, .875rem);color:var(--rpt-color-text-muted, #64748b);margin:0}.canvas-grid{display:grid;width:100%;min-height:180px;align-items:start;border-radius:6px;transition:all var(--rpt-transition-speed, .15s) ease}.canvas-component-card{container-type:inline-size;background:#fff;border:1.5px solid var(--rpt-color-border, #cbd5e1);border-radius:var(--rpt-border-radius, 6px);box-shadow:var(--rpt-box-shadow, 0 1px 2px rgba(0, 0, 0, .05));box-sizing:border-box;transition:all var(--rpt-transition-speed, .15s) ease;cursor:pointer;position:relative;overflow:visible;display:flex;flex-direction:column;min-height:104px;z-index:1}.canvas-component-card:hover{border-color:var(--rpt-color-primary, #2563eb);box-shadow:0 4px 6px -1px #2563eb1a;z-index:2}.canvas-component-card.is-selected{border-color:var(--rpt-color-primary, #2563eb);box-shadow:0 0 0 2px #2563eb40;z-index:10}.canvas-component-card:focus-within,.canvas-component-card:has(.rpt-combobox-menu),.canvas-component-card:has(.is-open){z-index:100}.canvas-component-card.is-resizing{-webkit-user-select:none;user-select:none;border-color:var(--rpt-color-primary, #2563eb);box-shadow:0 0 0 2px #2563eb59;z-index:30;transition:none!important}.resize-handle{position:absolute;z-index:20;touch-action:none;opacity:0;pointer-events:none;transition:opacity .15s ease}.canvas-component-card.is-selected .resize-handle{opacity:1;pointer-events:auto}.resize-handle.handle-e{top:0;right:0;width:6px;height:100%;cursor:ew-resize;display:flex;align-items:center;justify-content:center}.resize-handle.handle-e:after{content:\"\";width:3px;height:24px;background:#cbd5e1;border-radius:2px;transition:background .15s ease}.resize-handle.handle-e:hover:after,.canvas-component-card.is-selected .resize-handle.handle-e:after{background:var(--rpt-color-primary, #2563eb)}.resize-handle.handle-s{bottom:0;left:0;height:6px;width:100%;cursor:ns-resize;display:flex;align-items:center;justify-content:center}.resize-handle.handle-s:after{content:\"\";height:3px;width:24px;background:#cbd5e1;border-radius:2px;transition:background .15s ease}.resize-handle.handle-s:hover:after,.canvas-component-card.is-selected .resize-handle.handle-s:after{background:var(--rpt-color-primary, #2563eb)}.resize-handle.handle-se{bottom:0;right:0;width:12px;height:12px;cursor:nwse-resize;display:flex;align-items:flex-end;justify-content:flex-end;padding:2px}.resize-handle.handle-se:after{content:\"\";width:5px;height:5px;border-right:2px solid #cbd5e1;border-bottom:2px solid #cbd5e1;transition:border-color .15s ease}.resize-handle.handle-se:hover:after,.canvas-component-card.is-selected .resize-handle.handle-se:after{border-color:var(--rpt-color-primary, #2563eb)}.resize-dimension-tooltip{position:absolute;top:38px;right:8px;background:#0f172ae6;color:#fff;font-size:.7rem;font-weight:600;padding:3px 8px;border-radius:4px;white-space:nowrap;pointer-events:none;z-index:50;box-shadow:0 2px 4px #0003}.card-header{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:5px 8px;background:var(--rpt-color-surface, #f8fafc);border-bottom:1px solid var(--rpt-color-border, #e2e8f0);border-top-left-radius:var(--rpt-border-radius, 6px);border-top-right-radius:var(--rpt-border-radius, 6px);min-height:32px;box-sizing:border-box;overflow:hidden;position:relative}.canvas-component-card.is-selected .card-header{overflow:visible}.card-title-group{display:flex;align-items:center;gap:5px;cursor:grab;min-width:0;flex:1;overflow:hidden}.drag-handle-dots{color:var(--rpt-color-text-muted, #94a3b8);font-size:.85rem;letter-spacing:-2px;flex-shrink:0;-webkit-user-select:none;user-select:none}.comp-title{font-size:.75rem;font-weight:600;color:var(--rpt-color-text, #0f172a);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-user-select:none;user-select:none}.card-actions{display:flex;align-items:center;gap:4px;flex-shrink:0;margin-left:auto}.new-row-pill-static{font-size:.65rem;font-weight:600;color:#7c3aed;background:#f5f3ff;border:1px solid #ddd6fe;padding:1px 5px;border-radius:9999px;white-space:nowrap;line-height:1;flex-shrink:0}.span-pill-static{display:inline-flex;align-items:center;justify-content:center;font-size:.65rem;font-weight:600;color:var(--rpt-color-text-muted, #64748b);background:var(--rpt-color-surface, #f1f5f9);border:1px solid var(--rpt-color-border, #e2e8f0);padding:1px 6px;border-radius:9999px;line-height:1.2;white-space:nowrap;-webkit-user-select:none;user-select:none}.card-quick-controls{display:none;align-items:center;gap:3px;flex-shrink:0}.canvas-component-card:hover .span-pill-static,.canvas-component-card.is-selected .span-pill-static,.canvas-component-card:hover .new-row-pill-static,.canvas-component-card.is-selected .new-row-pill-static{display:none}.canvas-component-card:hover .card-quick-controls,.canvas-component-card.is-selected .card-quick-controls{display:inline-flex}.canvas-component-card.is-narrow .card-header{padding:4px 6px;gap:3px}.canvas-component-card.is-narrow:hover .comp-title,.canvas-component-card.is-narrow.is-selected .comp-title,.canvas-component-card.is-narrow:hover .drag-handle-dots,.canvas-component-card.is-narrow.is-selected .drag-handle-dots{display:none}.canvas-component-card.is-narrow .card-quick-controls{gap:2px}.canvas-component-card.is-narrow .span-control-group{height:18px}.canvas-component-card.is-narrow .span-btn{width:14px;height:16px}.canvas-component-card.is-narrow .span-badge{font-size:.6rem;padding:0 2px}.canvas-component-card.is-narrow .span-total{display:none}.canvas-component-card.is-narrow .card-action-btn{width:18px;height:18px}@container (max-width: 250px){.card-header{padding:4px 6px;gap:3px}.canvas-component-card:hover .comp-title,.canvas-component-card.is-selected .comp-title,.canvas-component-card:hover .drag-handle-dots,.canvas-component-card.is-selected .drag-handle-dots,.span-total{display:none}.card-quick-controls{gap:2px}.card-action-btn{width:18px;height:18px}.span-control-group{height:18px}.span-btn{width:14px;height:16px}.span-badge{font-size:.6rem;padding:0 2px}}@container (max-width: 160px){.canvas-component-card.is-selected .card-quick-controls{position:absolute;top:-30px;right:0;background:#fff;border:1.5px solid var(--rpt-color-primary, #2563eb);border-radius:6px;padding:2px 4px;gap:3px;box-shadow:0 4px 12px #2563eb2e,0 2px 4px #00000014;z-index:120;white-space:nowrap}}@media (max-width: 900px){.canvas-component-card:hover .comp-title,.canvas-component-card.is-selected .comp-title,.canvas-component-card:hover .drag-handle-dots,.canvas-component-card.is-selected .drag-handle-dots,.canvas-component-card .span-total{display:none}.canvas-component-card.is-selected .card-header{overflow:visible}.canvas-component-card.is-selected .card-quick-controls{position:absolute;top:-30px;right:0;background:#fff;border:1.5px solid var(--rpt-color-primary, #2563eb);border-radius:6px;padding:2px 4px;gap:3px;box-shadow:0 4px 12px #2563eb2e,0 2px 4px #00000014;z-index:120;white-space:nowrap}}.span-control-group{display:inline-flex;align-items:center;background:#fff;border:1px solid var(--rpt-color-border, #cbd5e1);border-radius:4px;height:20px;padding:0 1px;white-space:nowrap;flex-shrink:0}.span-btn{width:16px;height:18px;display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;padding:0;color:var(--rpt-color-text-muted, #64748b);cursor:pointer;border-radius:2px;transition:all .12s ease}.span-btn:hover:not(:disabled){background:var(--rpt-color-surface-hover, #f1f5f9);color:var(--rpt-color-primary, #2563eb)}.span-btn:disabled{opacity:.3;cursor:not-allowed}.span-badge{font-size:.65rem;font-weight:600;color:var(--rpt-color-text, #0f172a);padding:0 3px;white-space:nowrap;-webkit-user-select:none;user-select:none;line-height:1}.span-total{font-size:.6rem;color:var(--rpt-color-text-muted, #64748b);font-weight:500}.card-action-btn{width:20px;height:20px;border:none;background:transparent;border-radius:4px;display:inline-flex;align-items:center;justify-content:center;padding:0;cursor:pointer;color:var(--rpt-color-text-muted, #64748b);transition:all .12s ease;flex-shrink:0}.card-action-btn:hover{background:#e2e8f0;color:var(--rpt-color-text, #0f172a)}.card-action-btn.btn-active-toggle{background:#7c3aed;color:#fff;border-color:#7c3aed}.card-action-btn.btn-active-toggle:hover{background:#6d28d9;color:#fff}.btn-delete:hover{background:#fee2e2;color:#ef4444}.card-body{padding:8px 10px 14px;flex:1;display:flex;flex-direction:column;min-height:0;min-width:0;max-width:100%;box-sizing:border-box;overflow:visible}.mock-input-field{display:flex;flex-direction:column;gap:4px;flex:1;height:100%;min-height:0}.mock-label{font-size:.7rem;font-weight:600;color:var(--rpt-color-text-muted, #475569);flex-shrink:0}.mock-input-box,.mock-select-box{border:1px solid var(--rpt-color-border, #cbd5e1);border-radius:6px;padding:6px 12px;font-size:var(--rpt-font-size-base, .875rem);color:var(--rpt-color-text-muted, #94a3b8);background:#fff;flex:1;min-height:38px;height:100%;display:flex;align-items:center;justify-content:space-between;box-sizing:border-box}.mock-checkbox-field{display:flex;align-items:center;gap:6px;flex:1;height:100%;min-height:0;padding-top:14px}.mock-check-box{width:18px;height:18px;border:1px solid var(--rpt-color-border, #cbd5e1);border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:.65rem;color:var(--rpt-color-primary, #2563eb);flex-shrink:0}.mock-btn-wrapper{display:flex;flex:1;height:100%;min-height:38px;align-items:center;justify-content:flex-start;width:100%;min-width:0;box-sizing:border-box}.mock-btn{border-radius:var(--rpt-border-radius, 6px);padding:0 16px;height:36px;font-size:var(--rpt-font-size-base, .875rem);font-weight:500;border:1px solid transparent;cursor:pointer;width:auto;max-width:100%;display:inline-flex;align-items:center;justify-content:center;gap:6px;box-sizing:border-box;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:all .15s ease}.mock-btn.mock-btn-full{width:100%}.canvas-component-card.is-narrow .mock-btn{padding:0 6px;font-size:.775rem;width:100%;height:34px}.mock-kpi-field{display:flex;flex-direction:column;justify-content:space-between;flex:1;height:100%;min-height:0}.mock-kpi-header{display:flex;align-items:center;justify-content:space-between}.mock-kpi-value{font-size:1.25rem;font-weight:700;color:var(--rpt-color-text, #0f172a);margin:2px 0}.mock-kpi-footer{display:flex;align-items:center;gap:6px;font-size:.65rem}.mock-kpi-trend{color:#16a34a;font-weight:600}.mock-kpi-sub{color:#64748b}.mock-chart-field{display:flex;flex-direction:column;flex:1;height:100%;min-height:140px}.mock-chart-bars{display:flex;align-items:flex-end;justify-content:space-around;gap:16px;flex:1;min-height:100px;padding-top:12px;box-sizing:border-box}.mock-chart-col{flex:1;display:flex;flex-direction:column;align-items:center;height:100%;min-width:60px;max-width:140px}.mock-chart-bar{width:38px;max-width:44px;margin:0 auto;background:var(--rpt-color-primary, #2563eb);border-radius:6px 6px 0 0;opacity:.85;min-height:10px;transition:height .2s ease}.mock-bar-lbl{font-size:.6875rem;color:#64748b;margin-top:6px;text-align:center;white-space:normal;line-height:1.2}.btn-primary{background:var(--rpt-color-primary, #2563eb);color:#fff}.btn-secondary{background:#f1f5f9;color:#0f172a;border:1px solid #cbd5e1}.btn-outline{background:transparent;color:#2563eb;border:1px solid #2563eb}.btn-danger{background:#ef4444;color:#fff}.mock-generic-box{border:1px dashed #cbd5e1;border-radius:4px;padding:8px;font-size:.75rem;text-align:center;color:#64748b}.canvas-drag-placeholder{background:#2563eb0f;border:2px dashed var(--rpt-color-primary, #2563eb);border-radius:6px;min-height:80px;box-sizing:border-box;transition:transform .15s ease}.canvas-drag-preview,::ng-deep .canvas-drag-preview{background:#fff;border:2px solid var(--rpt-color-primary, #2563eb);border-radius:6px;padding:8px 14px;display:inline-flex;align-items:center;gap:8px;font-family:var(--rpt-font-family, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif)!important;font-size:.8rem;font-weight:600;color:var(--rpt-color-text, #0f172a);box-shadow:0 12px 24px -4px #00000040;z-index:10000}.preview-title,::ng-deep .preview-title{font-family:inherit!important;max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preview-span,::ng-deep .preview-span{font-family:inherit!important;font-size:.65rem;font-weight:600;color:var(--rpt-color-primary, #2563eb);background:#eff6ff;border:1px solid #bfdbfe;padding:1px 6px;border-radius:9999px}.canvas-empty-state{grid-column:1 / -1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:56px 28px;border:2px dashed var(--rpt-color-border, #cbd5e1);border-radius:var(--rpt-border-radius-xl, 12px);background:var(--rpt-color-surface, #ffffff);text-align:center;box-shadow:var(--rpt-box-shadow-xs, 0 1px 2px 0 rgba(0, 0, 0, .04));transition:border-color var(--rpt-transition-speed, .15s) ease}.canvas-empty-state:hover{border-color:var(--rpt-color-primary, #2563eb)}.empty-hero-badge{width:56px;height:56px;border-radius:var(--rpt-border-radius-xl, 12px);background:var(--rpt-color-primary-light, #eff6ff);color:var(--rpt-color-primary, #2563eb);display:flex;align-items:center;justify-content:center;margin-bottom:16px;box-shadow:0 2px 8px #2563eb1f}.empty-hero-title{font-size:var(--rpt-font-size-lg, 1.125rem);font-weight:700;color:var(--rpt-color-text, #0f172a);margin:0 0 8px;letter-spacing:-.01em}.empty-hero-desc{font-size:var(--rpt-font-size-base, .875rem);color:var(--rpt-color-text-muted, #64748b);max-width:520px;line-height:1.5;margin:0 0 24px}.empty-hero-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px}.empty-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 16px;font-size:var(--rpt-font-size-sm, .75rem);font-weight:600;border-radius:var(--rpt-border-radius, 6px);cursor:pointer;transition:all var(--rpt-transition-speed, .15s) ease;font-family:inherit}.empty-btn-primary{background:var(--rpt-color-primary, #2563eb);color:#fff;border:1px solid var(--rpt-color-primary, #2563eb);box-shadow:0 1px 3px #2563eb33}.empty-btn-primary:hover{background:var(--rpt-color-primary-hover, #1d4ed8);border-color:var(--rpt-color-primary-hover, #1d4ed8);transform:translateY(-1px)}.empty-btn-secondary{background:#f8fafc;color:#334155;border:1px solid var(--rpt-color-border, #cbd5e1)}.empty-btn-secondary:hover{background:#f1f5f9;color:#0f172a;border-color:#94a3b8;transform:translateY(-1px)}.empty-btn-outline{background:#fff;color:var(--rpt-color-primary, #2563eb);border:1px solid #bfdbfe}.empty-btn-outline:hover{background:#eff6ff;border-color:var(--rpt-color-primary, #2563eb);transform:translateY(-1px)}.canvas-active-input{width:100%;height:32px;padding:4px 8px;font-size:.8125rem;border:1px solid var(--rpt-color-border, #cbd5e1);border-radius:4px;outline:none;box-sizing:border-box;background:#fff;color:#0f172a;transition:border-color .15s ease}.canvas-active-input:focus{border-color:var(--rpt-color-primary, #2563eb)}.canvas-active-checkbox-lbl{display:inline-flex;align-items:center;gap:6px;cursor:pointer}.canvas-live-control-wrapper{width:100%;max-width:100%;min-width:0;position:relative;z-index:1;box-sizing:border-box}.canvas-grid-box{margin-top:24px;border:1px solid var(--rpt-color-border, #cbd5e1);border-radius:8px;background:#fff;box-shadow:0 1px 3px #0000000d;overflow:hidden}.grid-preview-header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:var(--rpt-color-surface, #f8fafc);border-bottom:1px solid var(--rpt-color-border, #cbd5e1);font-size:.8rem;font-weight:600;color:var(--rpt-color-text, #0f172a)}.grid-title{font-weight:700}.grid-exec-badge{font-size:.6875rem;font-weight:600;padding:2px 8px;border-radius:10px}.grid-exec-badge.is-loading{background:#eff6ff;color:#2563eb}.grid-exec-badge.is-error{background:#fee2e2;color:#ef4444}.grid-exec-badge.is-success{background:#ecfdf5;color:#059669}.btn-canvas-run-grid{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;font-size:.72rem;font-weight:600;color:#fff;background:var(--rpt-color-primary, #2563eb);border:none;border-radius:4px;cursor:pointer;transition:background .15s ease}.btn-canvas-run-grid:hover:not(:disabled){background:#1d4ed8}.btn-canvas-run-grid:disabled{opacity:.6;cursor:not-allowed}.btn-canvas-edit-grid{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;font-size:.72rem;font-weight:500;color:#334155;background:#fff;border:1px solid #cbd5e1;border-radius:4px;cursor:pointer;transition:all .12s ease}.btn-canvas-edit-grid:hover{background:#f1f5f9}.canvas-live-grid-container{width:100%;min-height:480px;background:#fff}.live-mode-badge{display:inline-flex;align-items:center;gap:4px;font-size:.6875rem;font-weight:700;color:#047857;background:#ecfdf5;border:1px solid #a7f3d0;padding:1px 8px;border-radius:9999px}.canvas-component-card.is-field-highlighted{border-color:#f59e0b!important;box-shadow:0 0 0 3px #f59e0b59!important;animation:rpt-pulse-border 1s ease-in-out infinite alternate}@keyframes rpt-pulse-border{0%{box-shadow:0 0 0 2px #f59e0b40}to{box-shadow:0 0 0 5px #f59e0b80}}.grid-layout-status-strip{display:flex;align-items:center;justify-content:space-between;padding:6px 16px;background:#f1f5f9;border-bottom:1px solid var(--rpt-color-border, #cbd5e1);font-size:.6875rem;color:#475569}.grid-status-info{display:inline-flex;align-items:center;gap:6px;font-weight:600}.grid-status-sync{display:inline-flex;align-items:center;gap:4px;color:#059669;font-weight:600;transition:transform .2s ease}.grid-status-sync.is-pulsing{transform:scale(1.08);color:#047857}.canvas-actions{display:flex;align-items:center;gap:8px}.btn-grid-add{background:#f0fdf4;border-color:#bbf7d0;color:#16a34a}.btn-grid-add:hover{background:#dcfce7;border-color:#86efac;color:#15803d}.btn-remove-grid{display:inline-flex;align-items:center;justify-content:center;padding:4px;border:none;background:transparent;color:#94a3b8;border-radius:4px;cursor:pointer;transition:all .15s ease}.btn-remove-grid:hover{background:#fee2e2;color:#ef4444}.canvas-add-grid-banner{margin-top:24px;border:2px dashed #cbd5e1;border-radius:8px;background:#fff;padding:16px 20px;display:flex;align-items:center;gap:16px;cursor:pointer;transition:all .15s ease}.canvas-add-grid-banner:hover{border-color:#2563eb;background:#f8fafc;box-shadow:0 2px 8px #2563eb14}.add-grid-icon{width:40px;height:40px;border-radius:8px;background:#eff6ff;color:#2563eb;display:flex;align-items:center;justify-content:center;flex-shrink:0}.add-grid-text{display:flex;flex-direction:column;gap:2px;flex:1}.add-grid-title{font-size:.875rem;font-weight:600;color:#0f172a}.add-grid-sub{font-size:.75rem;color:#64748b}.btn-banner-add{padding:6px 14px;font-size:.75rem;font-weight:600;color:#2563eb;background:#eff6ff;border:1px solid #bfdbfe;border-radius:6px;cursor:pointer;white-space:nowrap;transition:all .15s ease}.canvas-add-grid-banner:hover .btn-banner-add{background:#2563eb;color:#fff;border-color:#2563eb}.canvas-grid-loading-overlay{position:absolute;inset:0;background:#ffffffe6;backdrop-filter:blur(2px);z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-family:inherit;border-radius:6px}.grid-loading-title{font-weight:600;font-size:.95rem;color:#1e293b}.grid-loading-sub{font-size:.8rem;color:#64748b}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i1$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i1$2.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i1$2.CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "directive", type: i1$2.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: RptIconComponent, selector: "rpt-icon", inputs: ["name", "size", "color", "strokeWidth"] }, { kind: "component", type: RptDropdownComponent, selector: "rpt-dropdown", inputs: ["config", "control", "parentForm", "showStatus"] }, { kind: "component", type: RptDateRangeComponent, selector: "rpt-date-range", inputs: ["config", "control"] }, { kind: "component", type: ReportGridBridgeComponent, selector: "rpt-grid-bridge", inputs: ["gridDefinition", "data"], outputs: ["gridStateChange", "columnDefsChange", "rowClick", "selectionChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DesignCanvasComponent, decorators: [{
             type: Component,
@@ -9377,7 +9756,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         RptDropdownComponent,
                         RptDateRangeComponent,
                         ReportGridBridgeComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "    <div class=\"canvas-wrapper\" (click)=\"onCanvasBackgroundClick($event)\">\n      <!-- Canvas Status / Quick Controls -->\n      <div class=\"canvas-toolbar\">\n        <div class=\"canvas-info\">\n          <span class=\"info-label\">Grid Layout:</span>\n          <span class=\"info-value\">{{ totalColumns() }} Columns</span>\n          <span class=\"info-divider\">\u2022</span>\n          <span class=\"info-label\">Components:</span>\n          <span class=\"info-value\">{{ components().length }}</span>\n          <span class=\"info-divider\">\u2022</span>\n          <span class=\"live-mode-badge\" title=\"Interactive canvas: Values typed here run live queries and test dropdowns.\">\n            \u26A1 Live Interactive Mode\n          </span>\n        </div>\n\n        <div class=\"canvas-actions\">\n          @if (!definition().grid) {\n            <button\n              type=\"button\"\n              class=\"canvas-action-btn btn-grid-add\"\n              (click)=\"addResultGrid($event)\"\n              title=\"Add a Result Grid to this report\"\n            >\n              <rpt-icon name=\"table\" [size]=\"14\" />\n              <span>+ Add Grid</span>\n            </button>\n          } @else {\n            <button\n              type=\"button\"\n              class=\"canvas-action-btn btn-grid-configured\"\n              (click)=\"selectGridSettings($event)\"\n              title=\"Configure Result Data Grid\"\n            >\n              <rpt-icon name=\"table\" [size]=\"14\" />\n              <span>Grid ({{ definition().grid?.columns?.length ?? 0 }})</span>\n            </button>\n          }\n\n          <button\n            type=\"button\"\n            class=\"canvas-action-btn\"\n            (click)=\"selectReportSettings($event)\"\n            title=\"Configure Page Layout & Grid Settings\"\n          >\n            <rpt-icon name=\"settings\" [size]=\"14\" />\n            <span>Report Settings</span>\n          </button>\n        </div>\n      </div>\n\n      <!-- Canvas Drop Area -->\n      <div class=\"canvas-scroll-area\">\n        <div\n          class=\"canvas-artboard\"\n          [style.padding.px]=\"definition().layout.padding ?? 24\"\n        >\n          <!-- Report Header Preview -->\n          <div class=\"canvas-report-header\">\n            <h2 class=\"canvas-report-title\">{{ definition().name || 'Untitled Report' }}</h2>\n            @if (definition().description) {\n              <p class=\"canvas-report-desc\">{{ definition().description }}</p>\n            }\n          </div>\n\n          <!-- Component Drop List Grid with 2D mixed orientation and data binding -->\n          <div\n            cdkDropList\n            id=\"designer-canvas-drop-list\"\n            class=\"canvas-grid\"\n            cdkDropListOrientation=\"mixed\"\n            [cdkDropListData]=\"sortedComponents()\"\n            [style.grid-template-columns]=\"gridTemplateColumns()\"\n            [style.gap.px]=\"definition().layout.gap ?? 16\"\n            (cdkDropListDropped)=\"onDrop($event)\"\n          >\n            @for (comp of sortedComponents(); track comp.id; let idx = $index) {\n              <div\n                cdkDrag\n                [cdkDragData]=\"comp\"\n                [cdkDragDisabled]=\"isAnyResizing()\"\n                class=\"canvas-component-card\"\n                [class.is-selected]=\"isSelected(comp.id)\"\n                [class.is-resizing]=\"resizingCompId() === comp.id\"\n                [class.is-field-highlighted]=\"isFieldHighlighted(comp)\"\n                [class.is-narrow]=\"getSpan(comp) <= 4\"\n                [class.is-compact]=\"getSpan(comp) <= 2\"\n                [style.grid-column]=\"getGridColumn(comp)\"\n                [style.grid-row]=\"getGridRow(comp)\"\n                [style.width]=\"comp.layout?.width || 'auto'\"\n                [style.height]=\"getComponentHeight(comp)\"\n                [style.min-height]=\"getComponentMinHeight(comp)\"\n                (click)=\"onSelect(comp.id, $event)\"\n              >\n                <!-- Card Header with Drag Handle & Actions -->\n                <div class=\"card-header\">\n                  <div class=\"card-title-group\" cdkDragHandle title=\"Drag to reorder\">\n                    <span class=\"drag-handle-dots\">\u22EE\u22EE</span>\n                    <rpt-icon [name]=\"getComponentIconName(comp.type)\" [size]=\"14\" />\n                    <span class=\"comp-title\" [title]=\"comp.label || comp.key || comp.type\">\n                      {{ comp.label || comp.key || comp.type }}\n                    </span>\n                  </div>\n\n                  <div class=\"card-actions\">\n                    <!-- Static span pill & new row / start col pill when not hovered / not selected -->\n                    @if (comp.layout?.column; as col) {\n                      <span class=\"new-row-pill-static\" title=\"Starts at Column {{ col }}\">Col {{ col }}</span>\n                    } @else if (comp.layout?.newRow) {\n                      <span class=\"new-row-pill-static\" title=\"Starts on separate row\">\u21B3 Row</span>\n                    }\n                    <span\n                      class=\"span-pill-static\"\n                      title=\"Column span: {{ getSpan(comp) }} of {{ totalColumns() }} columns\"\n                    >\n                      {{ getSpan(comp) }}/{{ totalColumns() }}\n                    </span>\n\n                    <!-- Quick Action Stepper & Buttons (revealed on hover or selection) -->\n                    <div class=\"card-quick-controls\">\n                      <button\n                        type=\"button\"\n                        class=\"card-action-btn\"\n                        [class.btn-active-toggle]=\"comp.layout?.newRow\"\n                        (click)=\"toggleNewRow(comp, $event)\"\n                        title=\"{{ comp.layout?.newRow ? 'Starts on new row (Click to place inline)' : 'Start on separate row (Row Break)' }}\"\n                      >\n                        <rpt-icon name=\"corner-down-right\" [size]=\"11\" />\n                      </button>\n\n                      <div class=\"span-control-group\" title=\"Adjust Column Span\">\n                        <button\n                          type=\"button\"\n                          class=\"span-btn\"\n                          [disabled]=\"getSpan(comp) <= 1\"\n                          (click)=\"adjustSpan(comp, -1, $event)\"\n                          title=\"Shrink Column Span\"\n                        >\n                          <rpt-icon name=\"minus\" [size]=\"9\" />\n                        </button>\n                        <span class=\"span-badge\" [title]=\"'Column span: ' + getSpan(comp) + ' of ' + totalColumns()\">\n                          <span class=\"span-num\">{{ getSpan(comp) }}</span><span class=\"span-total\">/{{ totalColumns() }}</span>\n                        </span>\n                        <button\n                          type=\"button\"\n                          class=\"span-btn\"\n                          [disabled]=\"getSpan(comp) >= totalColumns()\"\n                          (click)=\"adjustSpan(comp, 1, $event)\"\n                          title=\"Expand Column Span\"\n                        >\n                          <rpt-icon name=\"plus\" [size]=\"9\" />\n                        </button>\n                      </div>\n\n                      <button\n                        type=\"button\"\n                        class=\"card-action-btn\"\n                        (click)=\"onDuplicate(comp.id, $event)\"\n                        title=\"Duplicate component\"\n                      >\n                        <rpt-icon name=\"copy\" [size]=\"12\" />\n                      </button>\n                      <button\n                        type=\"button\"\n                        class=\"card-action-btn btn-delete\"\n                        (click)=\"onDelete(comp.id, $event)\"\n                        title=\"Remove component\"\n                      >\n                        <rpt-icon name=\"trash\" [size]=\"12\" />\n                      </button>\n                    </div>\n                  </div>\n                </div>\n\n                <!-- Card Body Visual Preview -->\n                <div class=\"card-body\">\n\n                  @switch (comp.type) {\n                    @case ('input') {\n                      <div class=\"mock-input-field\" (click)=\"onControlInteract(comp, $event)\">\n                        <span class=\"mock-label\">{{ comp.label || 'Input' }}</span>\n                        @if (getCanvasControl(comp); as ctrl) {\n                          <input\n                            type=\"text\"\n                            class=\"canvas-active-input\"\n                            [placeholder]=\"comp.properties?.['placeholder'] || 'Enter text...'\"\n                            [formControl]=\"ctrl\"\n                            (focus)=\"onControlInteract(comp, $event)\"\n                          />\n                        } @else {\n                          <div class=\"mock-input-box\">{{ comp.properties?.['placeholder'] || 'Enter text...' }}</div>\n                        }\n                      </div>\n                    }\n                    @case ('dropdown') {\n                      <div class=\"canvas-live-control-wrapper\" (click)=\"onControlInteract(comp, $event)\">\n                        <rpt-dropdown\n                          [config]=\"comp\"\n                          [showStatus]=\"true\"\n                          [parentForm]=\"canvasForm()\"\n                          [control]=\"getCanvasControl(comp)\"\n                        />\n                      </div>\n                    }\n                    @case ('date') {\n                      <div class=\"mock-input-field\" (click)=\"onControlInteract(comp, $event)\">\n                        <span class=\"mock-label\">{{ comp.label || 'Date' }}</span>\n                        @if (getCanvasControl(comp); as ctrl) {\n                          <input\n                            type=\"date\"\n                            class=\"canvas-active-input\"\n                            [formControl]=\"ctrl\"\n                            (focus)=\"onControlInteract(comp, $event)\"\n                          />\n                        } @else {\n                          <div class=\"mock-select-box\">\n                            <span>YYYY-MM-DD</span>\n                            <rpt-icon name=\"calendar\" [size]=\"12\" />\n                          </div>\n                        }\n                      </div>\n                    }\n                    @case ('date-range') {\n                      <div class=\"canvas-live-control-wrapper\" (click)=\"onControlInteract(comp, $event)\">\n                        <rpt-date-range\n                          [config]=\"comp\"\n                          [control]=\"getCanvasControl(comp)\"\n                        />\n                      </div>\n                    }\n                    @case ('number') {\n                      <div class=\"mock-input-field\" (click)=\"onControlInteract(comp, $event)\">\n                        <span class=\"mock-label\">{{ comp.label || 'Number' }}</span>\n                        @if (getCanvasControl(comp); as ctrl) {\n                          <input\n                            type=\"number\"\n                            class=\"canvas-active-input\"\n                            [formControl]=\"ctrl\"\n                            (focus)=\"onControlInteract(comp, $event)\"\n                          />\n                        } @else {\n                          <div class=\"mock-input-box\">\n                            {{ comp.properties?.['prefix'] || '' }} 0.00 {{ comp.properties?.['suffix'] || '' }}\n                          </div>\n                        }\n                      </div>\n                    }\n                    @case ('checkbox') {\n                      <div class=\"mock-checkbox-field\" (click)=\"onControlInteract(comp, $event)\">\n                        @if (getCanvasControl(comp); as ctrl) {\n                          <label class=\"canvas-active-checkbox-lbl\">\n                            <input type=\"checkbox\" [formControl]=\"ctrl\" (focus)=\"onControlInteract(comp, $event)\" />\n                            <span class=\"mock-label\">{{ comp.label || 'Checkbox' }}</span>\n                          </label>\n                        } @else {\n                          <span class=\"mock-check-box\">\n                            <rpt-icon name=\"check\" [size]=\"10\" />\n                          </span>\n                          <span class=\"mock-label\">{{ comp.label || 'Checkbox' }}</span>\n                        }\n                      </div>\n                    }\n                    @case ('button') {\n                      <div class=\"mock-btn-wrapper\">\n                        <button\n                          type=\"button\"\n                          class=\"mock-btn\"\n                          [class]=\"'btn-' + (comp.properties?.['variant'] || 'primary')\"\n                          [class.mock-btn-full]=\"comp.properties?.['fullWidth'] === true || comp.layout?.width === '100%'\"\n                          [style.height]=\"getCustomBtnHeight(comp)\"\n                          [style.width]=\"getCustomBtnWidth(comp)\"\n                          (click)=\"onCanvasButtonClick(comp, $event)\"\n                        >\n                          @if (getCustomBtnIcon(comp); as btnIcon) {\n                            <rpt-icon [name]=\"btnIcon\" [size]=\"15\" />\n                          }\n                          <span>{{ comp.label || 'Button' }}</span>\n                        </button>\n                      </div>\n                    }\n                    @case ('kpi-card') {\n                      <div class=\"mock-kpi-field\">\n                        <div class=\"mock-kpi-header\">\n                          <span class=\"mock-label\">{{ comp.label || 'KPI Metric' }}</span>\n                          <rpt-icon name=\"kpi\" [size]=\"14\" />\n                        </div>\n                        <div class=\"mock-kpi-value\">{{ comp.properties?.['value'] || '$128,450' }}</div>\n                        <div class=\"mock-kpi-footer\">\n                          <span class=\"mock-kpi-trend\">+12.5%</span>\n                          <span class=\"mock-kpi-sub\">vs last period</span>\n                        </div>\n                      </div>\n                    }\n                    @case ('chart') {\n                      <div class=\"mock-chart-field\">\n                        <div class=\"mock-chart-header\">\n                          <span class=\"mock-label\">{{ comp.label || 'Quarterly Sales Revenue ($000)' }}</span>\n                        </div>\n                        <div class=\"mock-chart-bars\">\n                          <div class=\"mock-chart-col\">\n                            <div class=\"mock-chart-bar\" style=\"height: 44%\"></div>\n                            <span class=\"mock-bar-lbl\">Q1 Jan-Mar</span>\n                          </div>\n                          <div class=\"mock-chart-col\">\n                            <div class=\"mock-chart-bar\" style=\"height: 61%\"></div>\n                            <span class=\"mock-bar-lbl\">Q2 Apr-Jun</span>\n                          </div>\n                          <div class=\"mock-chart-col\">\n                            <div class=\"mock-chart-bar\" style=\"height: 79%\"></div>\n                            <span class=\"mock-bar-lbl\">Q3 Jul-Sep</span>\n                          </div>\n                          <div class=\"mock-chart-col\">\n                            <div class=\"mock-chart-bar\" style=\"height: 100%\"></div>\n                            <span class=\"mock-bar-lbl\">Q4 Oct-Dec</span>\n                          </div>\n                        </div>\n                      </div>\n                    }\n                    @default {\n                      <div class=\"mock-generic-box\">\n                        <span>{{ comp.type }}</span>\n                      </div>\n                    }\n                  }\n                </div>\n\n                <!-- Resizing Handles (East, South, South-East) -->\n                <div\n                  class=\"resize-handle handle-e\"\n                  (pointerdown)=\"startResize($event, comp, 'e')\"\n                  (dblclick)=\"resetDimensions(comp, $event)\"\n                  title=\"Drag to resize column width \u2022 Double-click to reset\"\n                ></div>\n                <div\n                  class=\"resize-handle handle-s\"\n                  (pointerdown)=\"startResize($event, comp, 's')\"\n                  (dblclick)=\"resetDimensions(comp, $event)\"\n                  title=\"Drag to resize height \u2022 Double-click to reset\"\n                ></div>\n                <div\n                  class=\"resize-handle handle-se\"\n                  (pointerdown)=\"startResize($event, comp, 'se')\"\n                  (dblclick)=\"resetDimensions(comp, $event)\"\n                  title=\"Drag to resize width and height \u2022 Double-click to reset\"\n                ></div>\n\n                <!-- Resizing Dimension Ghost / Badge -->\n                @if (resizingCompId() === comp.id) {\n                  <div class=\"resize-dimension-tooltip\">\n                    {{ resizingTooltip(comp) }}\n                  </div>\n                }\n\n                <!-- Drag placeholder with matched grid column span -->\n                <div\n                  *cdkDragPlaceholder\n                  class=\"canvas-drag-placeholder\"\n                  [style.grid-column]=\"getGridColumn(comp)\"\n                ></div>\n\n                <!-- Drag preview -->\n                <div *cdkDragPreview class=\"canvas-drag-preview\">\n                  <span class=\"drag-handle-dots\">\u22EE\u22EE</span>\n                  <rpt-icon [name]=\"getComponentIconName(comp.type)\" [size]=\"14\" />\n                  <span class=\"preview-title\">{{ comp.label || comp.key || comp.type }}</span>\n                  <span class=\"preview-span\">{{ getSpan(comp) }}/{{ totalColumns() }}</span>\n                </div>\n              </div>\n            }\n\n            @if (components().length === 0) {\n              <div class=\"canvas-empty-state\" role=\"region\" aria-label=\"Empty canvas starter options\">\n                <div class=\"empty-hero-badge\">\n                  <rpt-icon name=\"design\" [size]=\"28\" />\n                </div>\n                <h3 class=\"empty-hero-title\">Start Designing Your Custom Report</h3>\n                <p class=\"empty-hero-desc\">\n                  Drag controls from the left component palette, or jumpstart your design with pre-configured enterprise blueprints.\n                </p>\n\n                <div class=\"empty-hero-actions\">\n                  <button\n                    type=\"button\"\n                    class=\"empty-btn empty-btn-primary\"\n                    (click)=\"applyBlueprint('blueprint-audit-register')\"\n                    title=\"Load complete Audit Register blueprint with parameters and result grid\"\n                  >\n                    <rpt-icon name=\"table\" [size]=\"15\" />\n                    <span>Audit Register Blueprint</span>\n                  </button>\n                  <button\n                    type=\"button\"\n                    class=\"empty-btn empty-btn-secondary\"\n                    (click)=\"applyBlueprint('blueprint-kpi-summary')\"\n                    title=\"Load Executive KPI summary blueprint\"\n                  >\n                    <rpt-icon name=\"chart-bar\" [size]=\"15\" />\n                    <span>KPI Summary Blueprint</span>\n                  </button>\n                  <button\n                    type=\"button\"\n                    class=\"empty-btn empty-btn-outline\"\n                    (click)=\"addStarterComponent('date-range')\"\n                    title=\"Add a Date Range filter component\"\n                  >\n                    <rpt-icon name=\"calendar\" [size]=\"14\" />\n                    <span>+ Add Date Filter</span>\n                  </button>\n                  <button\n                    type=\"button\"\n                    class=\"empty-btn empty-btn-outline\"\n                    (click)=\"addStarterComponent('button')\"\n                    title=\"Add an Execute Action button\"\n                  >\n                    <rpt-icon name=\"play\" [size]=\"14\" />\n                    <span>+ Add Run Button</span>\n                  </button>\n                </div>\n              </div>\n            }\n          </div>\n\n          <!-- Live Result Grid Preview with Bways-Grid Features -->\n          @if (definition().grid) {\n            <div class=\"canvas-grid-box\">\n              <div class=\"grid-preview-header\">\n                <div style=\"display: flex; align-items: center; gap: 8px;\">\n                  <rpt-icon name=\"table\" [size]=\"15\" />\n                  <span class=\"grid-title\">Bways Grid ({{ definition().grid?.columns?.length ?? 0 }} columns)</span>\n                  @if (isExecutingGrid()) {\n                    <span class=\"grid-exec-badge is-loading\">Loading data from database...</span>\n                  } @else if (gridExecError()) {\n                    <span class=\"grid-exec-badge is-error\">{{ gridExecError() }}</span>\n                  } @else if (canvasGridData().length > 0) {\n                    <span class=\"grid-exec-badge is-success\">{{ canvasGridData().length }} rows loaded</span>\n                  }\n                </div>\n                <div style=\"display: flex; align-items: center; gap: 8px;\">\n                  <button\n                    type=\"button\"\n                    class=\"btn-canvas-run-grid\"\n                    (click)=\"executeCanvasReport($event)\"\n                    [disabled]=\"isExecutingGrid()\"\n                    title=\"Execute query and load data into Bways Grid\"\n                  >\n                    <rpt-icon name=\"play\" [size]=\"11\" />\n                    <span>{{ isExecutingGrid() ? 'Running...' : 'Run / Refresh Grid' }}</span>\n                  </button>\n                  <button\n                    type=\"button\"\n                    class=\"btn-canvas-edit-grid\"\n                    (click)=\"selectGridSettings($event)\"\n                    title=\"Configure columns and grid options\"\n                  >\n                    <rpt-icon name=\"settings\" [size]=\"11\" />\n                    <span>Configure</span>\n                  </button>\n                  <button\n                    type=\"button\"\n                    class=\"btn-remove-grid\"\n                    (click)=\"removeGrid($event)\"\n                    title=\"Remove Result Grid from this report\"\n                  >\n                    <rpt-icon name=\"trash\" [size]=\"13\" />\n                  </button>\n                </div>\n              </div>\n\n              @if (getGridSummaryText(); as summary) {\n                <div class=\"grid-layout-status-strip\">\n                  <div class=\"grid-status-info\">\n                    <rpt-icon name=\"table\" [size]=\"12\" />\n                    <span>{{ summary }}</span>\n                  </div>\n                  <div class=\"grid-status-sync\" [class.is-pulsing]=\"layoutJustUpdated()\">\n                    <rpt-icon name=\"check\" [size]=\"11\" />\n                    <span>Layout auto-persisted</span>\n                  </div>\n                </div>\n              }\n\n              <!-- Live Bways Grid bridge -->\n              <div class=\"canvas-live-grid-container\" (click)=\"$event.stopPropagation()\">\n                <rpt-grid-bridge\n                  [gridDefinition]=\"definition().grid!\"\n                  [data]=\"canvasGridData()\"\n                  (gridStateChange)=\"onCanvasGridStateChange($event)\"\n                  (columnDefsChange)=\"onCanvasColumnDefsChange($event)\"\n                />\n              </div>\n            </div>\n          } @else {\n            <div class=\"canvas-add-grid-banner\" (click)=\"addResultGrid($event)\">\n              <div class=\"add-grid-icon\">\n                <rpt-icon name=\"table\" [size]=\"20\" />\n              </div>\n              <div class=\"add-grid-text\">\n                <span class=\"add-grid-title\">+ Add Result Data Grid</span>\n                <span class=\"add-grid-sub\">Attach an interactive data table or UltraGrid to display report execution output</span>\n              </div>\n              <button type=\"button\" class=\"btn-banner-add\">Add Grid</button>\n            </div>\n          }\n        </div>\n      </div>\n    </div>", styles: [":host{display:block;height:100%;background-color:#f1f5f9;font-family:var(--rpt-font-family, inherit);box-sizing:border-box}.canvas-wrapper{display:flex;flex-direction:column;height:100%}.canvas-toolbar{display:flex;align-items:center;justify-content:space-between;min-height:42px;height:42px;padding:0 24px;background:var(--rpt-color-surface, #ffffff);border-bottom:1px solid var(--rpt-color-border, #cbd5e1);box-sizing:border-box;gap:12px;overflow-x:auto;scrollbar-width:none;font-family:var(--rpt-font-family, inherit);flex-shrink:0}.canvas-toolbar::-webkit-scrollbar{display:none}.canvas-info{display:flex;align-items:center;gap:8px;font-family:var(--rpt-font-family, inherit);font-size:var(--rpt-font-size-sm, .75rem);color:var(--rpt-color-text-muted, #64748b);white-space:nowrap;line-height:1}.info-label{color:var(--rpt-color-text-muted, #64748b);font-weight:500;font-size:var(--rpt-font-size-sm, .75rem)}.info-value{font-weight:600;color:var(--rpt-color-text, #0f172a);font-size:var(--rpt-font-size-sm, .75rem)}.info-divider{color:var(--rpt-color-border, #cbd5e1);margin:0 2px}.live-mode-badge{display:inline-flex;align-items:center;gap:4px;font-family:var(--rpt-font-family, inherit);font-size:var(--rpt-font-size-xs, .7rem);font-weight:600;color:#047857;background:#ecfdf5;border:1px solid #a7f3d0;padding:2px 8px;border-radius:9999px;line-height:1}.canvas-actions{display:flex;align-items:center;gap:8px;white-space:nowrap}.canvas-action-btn{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;font-family:var(--rpt-font-family, inherit);font-size:var(--rpt-font-size-sm, .75rem);font-weight:500;letter-spacing:-.01em;color:var(--rpt-color-text-secondary, #334155);background:var(--rpt-color-surface, #ffffff);border:1px solid var(--rpt-color-border, #cbd5e1);border-radius:var(--rpt-border-radius, 6px);cursor:pointer;line-height:1;white-space:nowrap;box-shadow:0 1px 2px #0000000a;transition:all var(--rpt-transition-speed, .15s) ease}.canvas-action-btn:hover{background:var(--rpt-color-surface-hover, #f8fafc);border-color:var(--rpt-color-border-hover, #94a3b8);color:var(--rpt-color-text, #0f172a);box-shadow:0 2px 4px #0000000f}.canvas-action-btn.btn-grid-configured{background:#eff6ff;border-color:#bfdbfe;color:#2563eb;font-weight:600}.canvas-action-btn.btn-grid-configured:hover{background:#dbeafe;color:#1d4ed8;border-color:#93c5fd}.canvas-action-btn.btn-grid-add{background:#f0fdf4;border-color:#bbf7d0;color:#16a34a;font-weight:600}.canvas-action-btn.btn-grid-add:hover{background:#dcfce7;color:#15803d;border-color:#86efac}.canvas-action-btn:active{transform:translateY(1px)}.canvas-scroll-area{flex:1;overflow-y:auto;padding:16px}.canvas-artboard{width:100%;max-width:1400px;margin:0 auto;background:#fff;border:1px solid var(--rpt-color-border, #cbd5e1);border-radius:var(--rpt-border-radius-lg, 8px);box-shadow:0 4px 6px -1px #0000000d;min-height:480px;box-sizing:border-box}@media (max-width: 900px){.canvas-toolbar{min-height:36px;height:36px;padding:0 10px;gap:6px}.live-mode-badge{display:none}.canvas-info{font-size:.75rem;gap:5px}.canvas-action-btn{padding:0 8px;font-size:.725rem;height:28px;gap:4px}.canvas-scroll-area{padding:10px}.canvas-artboard{min-height:360px}}@media (max-width: 600px){.canvas-toolbar{padding:0 8px;gap:4px}.canvas-info .info-label,.canvas-action-btn span{display:none}.canvas-action-btn{padding:0 6px;min-width:28px;justify-content:center}}.canvas-report-header{margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--rpt-color-border, #e2e8f0)}.canvas-report-title{font-size:var(--rpt-font-size-xl, 1.5rem);font-weight:700;color:var(--rpt-color-text, #0f172a);margin:0 0 6px}.canvas-report-desc{font-size:var(--rpt-font-size-base, .875rem);color:var(--rpt-color-text-muted, #64748b);margin:0}.canvas-grid{display:grid;width:100%;min-height:180px;align-items:start;border-radius:6px;transition:all var(--rpt-transition-speed, .15s) ease}.canvas-component-card{container-type:inline-size;background:#fff;border:1.5px solid var(--rpt-color-border, #cbd5e1);border-radius:var(--rpt-border-radius, 6px);box-shadow:var(--rpt-box-shadow, 0 1px 2px rgba(0, 0, 0, .05));box-sizing:border-box;transition:all var(--rpt-transition-speed, .15s) ease;cursor:pointer;position:relative;overflow:visible;display:flex;flex-direction:column;min-height:104px;z-index:1}.canvas-component-card:hover{border-color:var(--rpt-color-primary, #2563eb);box-shadow:0 4px 6px -1px #2563eb1a;z-index:2}.canvas-component-card.is-selected{border-color:var(--rpt-color-primary, #2563eb);box-shadow:0 0 0 2px #2563eb40;z-index:10}.canvas-component-card:focus-within,.canvas-component-card:has(.rpt-combobox-menu),.canvas-component-card:has(.is-open){z-index:100}.canvas-component-card.is-resizing{-webkit-user-select:none;user-select:none;border-color:var(--rpt-color-primary, #2563eb);box-shadow:0 0 0 2px #2563eb59;z-index:30;transition:none!important}.resize-handle{position:absolute;z-index:20;touch-action:none;opacity:0;pointer-events:none;transition:opacity .15s ease}.canvas-component-card.is-selected .resize-handle{opacity:1;pointer-events:auto}.resize-handle.handle-e{top:0;right:0;width:6px;height:100%;cursor:ew-resize;display:flex;align-items:center;justify-content:center}.resize-handle.handle-e:after{content:\"\";width:3px;height:24px;background:#cbd5e1;border-radius:2px;transition:background .15s ease}.resize-handle.handle-e:hover:after,.canvas-component-card.is-selected .resize-handle.handle-e:after{background:var(--rpt-color-primary, #2563eb)}.resize-handle.handle-s{bottom:0;left:0;height:6px;width:100%;cursor:ns-resize;display:flex;align-items:center;justify-content:center}.resize-handle.handle-s:after{content:\"\";height:3px;width:24px;background:#cbd5e1;border-radius:2px;transition:background .15s ease}.resize-handle.handle-s:hover:after,.canvas-component-card.is-selected .resize-handle.handle-s:after{background:var(--rpt-color-primary, #2563eb)}.resize-handle.handle-se{bottom:0;right:0;width:12px;height:12px;cursor:nwse-resize;display:flex;align-items:flex-end;justify-content:flex-end;padding:2px}.resize-handle.handle-se:after{content:\"\";width:5px;height:5px;border-right:2px solid #cbd5e1;border-bottom:2px solid #cbd5e1;transition:border-color .15s ease}.resize-handle.handle-se:hover:after,.canvas-component-card.is-selected .resize-handle.handle-se:after{border-color:var(--rpt-color-primary, #2563eb)}.resize-dimension-tooltip{position:absolute;top:38px;right:8px;background:#0f172ae6;color:#fff;font-size:.7rem;font-weight:600;padding:3px 8px;border-radius:4px;white-space:nowrap;pointer-events:none;z-index:50;box-shadow:0 2px 4px #0003}.card-header{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:5px 8px;background:var(--rpt-color-surface, #f8fafc);border-bottom:1px solid var(--rpt-color-border, #e2e8f0);border-top-left-radius:var(--rpt-border-radius, 6px);border-top-right-radius:var(--rpt-border-radius, 6px);min-height:32px;box-sizing:border-box;overflow:hidden;position:relative}.canvas-component-card.is-selected .card-header{overflow:visible}.card-title-group{display:flex;align-items:center;gap:5px;cursor:grab;min-width:0;flex:1;overflow:hidden}.drag-handle-dots{color:var(--rpt-color-text-muted, #94a3b8);font-size:.85rem;letter-spacing:-2px;flex-shrink:0;-webkit-user-select:none;user-select:none}.comp-title{font-size:.75rem;font-weight:600;color:var(--rpt-color-text, #0f172a);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-user-select:none;user-select:none}.card-actions{display:flex;align-items:center;gap:4px;flex-shrink:0;margin-left:auto}.new-row-pill-static{font-size:.65rem;font-weight:600;color:#7c3aed;background:#f5f3ff;border:1px solid #ddd6fe;padding:1px 5px;border-radius:9999px;white-space:nowrap;line-height:1;flex-shrink:0}.span-pill-static{display:inline-flex;align-items:center;justify-content:center;font-size:.65rem;font-weight:600;color:var(--rpt-color-text-muted, #64748b);background:var(--rpt-color-surface, #f1f5f9);border:1px solid var(--rpt-color-border, #e2e8f0);padding:1px 6px;border-radius:9999px;line-height:1.2;white-space:nowrap;-webkit-user-select:none;user-select:none}.card-quick-controls{display:none;align-items:center;gap:3px;flex-shrink:0}.canvas-component-card:hover .span-pill-static,.canvas-component-card.is-selected .span-pill-static,.canvas-component-card:hover .new-row-pill-static,.canvas-component-card.is-selected .new-row-pill-static{display:none}.canvas-component-card:hover .card-quick-controls,.canvas-component-card.is-selected .card-quick-controls{display:inline-flex}.canvas-component-card.is-narrow .card-header{padding:4px 6px;gap:3px}.canvas-component-card.is-narrow:hover .comp-title,.canvas-component-card.is-narrow.is-selected .comp-title,.canvas-component-card.is-narrow:hover .drag-handle-dots,.canvas-component-card.is-narrow.is-selected .drag-handle-dots{display:none}.canvas-component-card.is-narrow .card-quick-controls{gap:2px}.canvas-component-card.is-narrow .span-control-group{height:18px}.canvas-component-card.is-narrow .span-btn{width:14px;height:16px}.canvas-component-card.is-narrow .span-badge{font-size:.6rem;padding:0 2px}.canvas-component-card.is-narrow .span-total{display:none}.canvas-component-card.is-narrow .card-action-btn{width:18px;height:18px}@container (max-width: 250px){.card-header{padding:4px 6px;gap:3px}.canvas-component-card:hover .comp-title,.canvas-component-card.is-selected .comp-title,.canvas-component-card:hover .drag-handle-dots,.canvas-component-card.is-selected .drag-handle-dots,.span-total{display:none}.card-quick-controls{gap:2px}.card-action-btn{width:18px;height:18px}.span-control-group{height:18px}.span-btn{width:14px;height:16px}.span-badge{font-size:.6rem;padding:0 2px}}@container (max-width: 160px){.canvas-component-card.is-selected .card-quick-controls{position:absolute;top:-30px;right:0;background:#fff;border:1.5px solid var(--rpt-color-primary, #2563eb);border-radius:6px;padding:2px 4px;gap:3px;box-shadow:0 4px 12px #2563eb2e,0 2px 4px #00000014;z-index:120;white-space:nowrap}}@media (max-width: 900px){.canvas-component-card:hover .comp-title,.canvas-component-card.is-selected .comp-title,.canvas-component-card:hover .drag-handle-dots,.canvas-component-card.is-selected .drag-handle-dots,.canvas-component-card .span-total{display:none}.canvas-component-card.is-selected .card-header{overflow:visible}.canvas-component-card.is-selected .card-quick-controls{position:absolute;top:-30px;right:0;background:#fff;border:1.5px solid var(--rpt-color-primary, #2563eb);border-radius:6px;padding:2px 4px;gap:3px;box-shadow:0 4px 12px #2563eb2e,0 2px 4px #00000014;z-index:120;white-space:nowrap}}.span-control-group{display:inline-flex;align-items:center;background:#fff;border:1px solid var(--rpt-color-border, #cbd5e1);border-radius:4px;height:20px;padding:0 1px;white-space:nowrap;flex-shrink:0}.span-btn{width:16px;height:18px;display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;padding:0;color:var(--rpt-color-text-muted, #64748b);cursor:pointer;border-radius:2px;transition:all .12s ease}.span-btn:hover:not(:disabled){background:var(--rpt-color-surface-hover, #f1f5f9);color:var(--rpt-color-primary, #2563eb)}.span-btn:disabled{opacity:.3;cursor:not-allowed}.span-badge{font-size:.65rem;font-weight:600;color:var(--rpt-color-text, #0f172a);padding:0 3px;white-space:nowrap;-webkit-user-select:none;user-select:none;line-height:1}.span-total{font-size:.6rem;color:var(--rpt-color-text-muted, #64748b);font-weight:500}.card-action-btn{width:20px;height:20px;border:none;background:transparent;border-radius:4px;display:inline-flex;align-items:center;justify-content:center;padding:0;cursor:pointer;color:var(--rpt-color-text-muted, #64748b);transition:all .12s ease;flex-shrink:0}.card-action-btn:hover{background:#e2e8f0;color:var(--rpt-color-text, #0f172a)}.card-action-btn.btn-active-toggle{background:#7c3aed;color:#fff;border-color:#7c3aed}.card-action-btn.btn-active-toggle:hover{background:#6d28d9;color:#fff}.btn-delete:hover{background:#fee2e2;color:#ef4444}.card-body{padding:8px 10px 14px;flex:1;display:flex;flex-direction:column;min-height:0;min-width:0;max-width:100%;box-sizing:border-box;overflow:visible}.mock-input-field{display:flex;flex-direction:column;gap:4px;flex:1;height:100%;min-height:0}.mock-label{font-size:.7rem;font-weight:600;color:var(--rpt-color-text-muted, #475569);flex-shrink:0}.mock-input-box,.mock-select-box{border:1px solid var(--rpt-color-border, #cbd5e1);border-radius:6px;padding:6px 12px;font-size:var(--rpt-font-size-base, .875rem);color:var(--rpt-color-text-muted, #94a3b8);background:#fff;flex:1;min-height:38px;height:100%;display:flex;align-items:center;justify-content:space-between;box-sizing:border-box}.mock-checkbox-field{display:flex;align-items:center;gap:6px;flex:1;height:100%;min-height:0;padding-top:14px}.mock-check-box{width:18px;height:18px;border:1px solid var(--rpt-color-border, #cbd5e1);border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:.65rem;color:var(--rpt-color-primary, #2563eb);flex-shrink:0}.mock-btn-wrapper{display:flex;flex:1;height:100%;min-height:38px;align-items:center;justify-content:flex-start;width:100%;min-width:0;box-sizing:border-box}.mock-btn{border-radius:var(--rpt-border-radius, 6px);padding:0 16px;height:36px;font-size:var(--rpt-font-size-base, .875rem);font-weight:500;border:1px solid transparent;cursor:pointer;width:auto;max-width:100%;display:inline-flex;align-items:center;justify-content:center;gap:6px;box-sizing:border-box;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:all .15s ease}.mock-btn.mock-btn-full{width:100%}.canvas-component-card.is-narrow .mock-btn{padding:0 6px;font-size:.775rem;width:100%;height:34px}.mock-kpi-field{display:flex;flex-direction:column;justify-content:space-between;flex:1;height:100%;min-height:0}.mock-kpi-header{display:flex;align-items:center;justify-content:space-between}.mock-kpi-value{font-size:1.25rem;font-weight:700;color:var(--rpt-color-text, #0f172a);margin:2px 0}.mock-kpi-footer{display:flex;align-items:center;gap:6px;font-size:.65rem}.mock-kpi-trend{color:#16a34a;font-weight:600}.mock-kpi-sub{color:#64748b}.mock-chart-field{display:flex;flex-direction:column;flex:1;height:100%;min-height:140px}.mock-chart-bars{display:flex;align-items:flex-end;justify-content:space-around;gap:16px;flex:1;min-height:100px;padding-top:12px;box-sizing:border-box}.mock-chart-col{flex:1;display:flex;flex-direction:column;align-items:center;height:100%;min-width:60px;max-width:140px}.mock-chart-bar{width:38px;max-width:44px;margin:0 auto;background:var(--rpt-color-primary, #2563eb);border-radius:6px 6px 0 0;opacity:.85;min-height:10px;transition:height .2s ease}.mock-bar-lbl{font-size:.6875rem;color:#64748b;margin-top:6px;text-align:center;white-space:normal;line-height:1.2}.btn-primary{background:var(--rpt-color-primary, #2563eb);color:#fff}.btn-secondary{background:#f1f5f9;color:#0f172a;border:1px solid #cbd5e1}.btn-outline{background:transparent;color:#2563eb;border:1px solid #2563eb}.btn-danger{background:#ef4444;color:#fff}.mock-generic-box{border:1px dashed #cbd5e1;border-radius:4px;padding:8px;font-size:.75rem;text-align:center;color:#64748b}.canvas-drag-placeholder{background:#2563eb0f;border:2px dashed var(--rpt-color-primary, #2563eb);border-radius:6px;min-height:80px;box-sizing:border-box;transition:transform .15s ease}.canvas-drag-preview,::ng-deep .canvas-drag-preview{background:#fff;border:2px solid var(--rpt-color-primary, #2563eb);border-radius:6px;padding:8px 14px;display:inline-flex;align-items:center;gap:8px;font-family:var(--rpt-font-family, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif)!important;font-size:.8rem;font-weight:600;color:var(--rpt-color-text, #0f172a);box-shadow:0 12px 24px -4px #00000040;z-index:10000}.preview-title,::ng-deep .preview-title{font-family:inherit!important;max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preview-span,::ng-deep .preview-span{font-family:inherit!important;font-size:.65rem;font-weight:600;color:var(--rpt-color-primary, #2563eb);background:#eff6ff;border:1px solid #bfdbfe;padding:1px 6px;border-radius:9999px}.canvas-empty-state{grid-column:1 / -1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:56px 28px;border:2px dashed var(--rpt-color-border, #cbd5e1);border-radius:var(--rpt-border-radius-xl, 12px);background:var(--rpt-color-surface, #ffffff);text-align:center;box-shadow:var(--rpt-box-shadow-xs, 0 1px 2px 0 rgba(0, 0, 0, .04));transition:border-color var(--rpt-transition-speed, .15s) ease}.canvas-empty-state:hover{border-color:var(--rpt-color-primary, #2563eb)}.empty-hero-badge{width:56px;height:56px;border-radius:var(--rpt-border-radius-xl, 12px);background:var(--rpt-color-primary-light, #eff6ff);color:var(--rpt-color-primary, #2563eb);display:flex;align-items:center;justify-content:center;margin-bottom:16px;box-shadow:0 2px 8px #2563eb1f}.empty-hero-title{font-size:var(--rpt-font-size-lg, 1.125rem);font-weight:700;color:var(--rpt-color-text, #0f172a);margin:0 0 8px;letter-spacing:-.01em}.empty-hero-desc{font-size:var(--rpt-font-size-base, .875rem);color:var(--rpt-color-text-muted, #64748b);max-width:520px;line-height:1.5;margin:0 0 24px}.empty-hero-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px}.empty-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 16px;font-size:var(--rpt-font-size-sm, .75rem);font-weight:600;border-radius:var(--rpt-border-radius, 6px);cursor:pointer;transition:all var(--rpt-transition-speed, .15s) ease;font-family:inherit}.empty-btn-primary{background:var(--rpt-color-primary, #2563eb);color:#fff;border:1px solid var(--rpt-color-primary, #2563eb);box-shadow:0 1px 3px #2563eb33}.empty-btn-primary:hover{background:var(--rpt-color-primary-hover, #1d4ed8);border-color:var(--rpt-color-primary-hover, #1d4ed8);transform:translateY(-1px)}.empty-btn-secondary{background:#f8fafc;color:#334155;border:1px solid var(--rpt-color-border, #cbd5e1)}.empty-btn-secondary:hover{background:#f1f5f9;color:#0f172a;border-color:#94a3b8;transform:translateY(-1px)}.empty-btn-outline{background:#fff;color:var(--rpt-color-primary, #2563eb);border:1px solid #bfdbfe}.empty-btn-outline:hover{background:#eff6ff;border-color:var(--rpt-color-primary, #2563eb);transform:translateY(-1px)}.canvas-active-input{width:100%;height:32px;padding:4px 8px;font-size:.8125rem;border:1px solid var(--rpt-color-border, #cbd5e1);border-radius:4px;outline:none;box-sizing:border-box;background:#fff;color:#0f172a;transition:border-color .15s ease}.canvas-active-input:focus{border-color:var(--rpt-color-primary, #2563eb)}.canvas-active-checkbox-lbl{display:inline-flex;align-items:center;gap:6px;cursor:pointer}.canvas-live-control-wrapper{width:100%;max-width:100%;min-width:0;position:relative;z-index:1;box-sizing:border-box}.canvas-grid-box{margin-top:24px;border:1px solid var(--rpt-color-border, #cbd5e1);border-radius:8px;background:#fff;box-shadow:0 1px 3px #0000000d;overflow:hidden}.grid-preview-header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:var(--rpt-color-surface, #f8fafc);border-bottom:1px solid var(--rpt-color-border, #cbd5e1);font-size:.8rem;font-weight:600;color:var(--rpt-color-text, #0f172a)}.grid-title{font-weight:700}.grid-exec-badge{font-size:.6875rem;font-weight:600;padding:2px 8px;border-radius:10px}.grid-exec-badge.is-loading{background:#eff6ff;color:#2563eb}.grid-exec-badge.is-error{background:#fee2e2;color:#ef4444}.grid-exec-badge.is-success{background:#ecfdf5;color:#059669}.btn-canvas-run-grid{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;font-size:.72rem;font-weight:600;color:#fff;background:var(--rpt-color-primary, #2563eb);border:none;border-radius:4px;cursor:pointer;transition:background .15s ease}.btn-canvas-run-grid:hover:not(:disabled){background:#1d4ed8}.btn-canvas-run-grid:disabled{opacity:.6;cursor:not-allowed}.btn-canvas-edit-grid{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;font-size:.72rem;font-weight:500;color:#334155;background:#fff;border:1px solid #cbd5e1;border-radius:4px;cursor:pointer;transition:all .12s ease}.btn-canvas-edit-grid:hover{background:#f1f5f9}.canvas-live-grid-container{width:100%;min-height:480px;background:#fff}.live-mode-badge{display:inline-flex;align-items:center;gap:4px;font-size:.6875rem;font-weight:700;color:#047857;background:#ecfdf5;border:1px solid #a7f3d0;padding:1px 8px;border-radius:9999px}.canvas-component-card.is-field-highlighted{border-color:#f59e0b!important;box-shadow:0 0 0 3px #f59e0b59!important;animation:rpt-pulse-border 1s ease-in-out infinite alternate}@keyframes rpt-pulse-border{0%{box-shadow:0 0 0 2px #f59e0b40}to{box-shadow:0 0 0 5px #f59e0b80}}.grid-layout-status-strip{display:flex;align-items:center;justify-content:space-between;padding:6px 16px;background:#f1f5f9;border-bottom:1px solid var(--rpt-color-border, #cbd5e1);font-size:.6875rem;color:#475569}.grid-status-info{display:inline-flex;align-items:center;gap:6px;font-weight:600}.grid-status-sync{display:inline-flex;align-items:center;gap:4px;color:#059669;font-weight:600;transition:transform .2s ease}.grid-status-sync.is-pulsing{transform:scale(1.08);color:#047857}.canvas-actions{display:flex;align-items:center;gap:8px}.btn-grid-add{background:#f0fdf4;border-color:#bbf7d0;color:#16a34a}.btn-grid-add:hover{background:#dcfce7;border-color:#86efac;color:#15803d}.btn-remove-grid{display:inline-flex;align-items:center;justify-content:center;padding:4px;border:none;background:transparent;color:#94a3b8;border-radius:4px;cursor:pointer;transition:all .15s ease}.btn-remove-grid:hover{background:#fee2e2;color:#ef4444}.canvas-add-grid-banner{margin-top:24px;border:2px dashed #cbd5e1;border-radius:8px;background:#fff;padding:16px 20px;display:flex;align-items:center;gap:16px;cursor:pointer;transition:all .15s ease}.canvas-add-grid-banner:hover{border-color:#2563eb;background:#f8fafc;box-shadow:0 2px 8px #2563eb14}.add-grid-icon{width:40px;height:40px;border-radius:8px;background:#eff6ff;color:#2563eb;display:flex;align-items:center;justify-content:center;flex-shrink:0}.add-grid-text{display:flex;flex-direction:column;gap:2px;flex:1}.add-grid-title{font-size:.875rem;font-weight:600;color:#0f172a}.add-grid-sub{font-size:.75rem;color:#64748b}.btn-banner-add{padding:6px 14px;font-size:.75rem;font-weight:600;color:#2563eb;background:#eff6ff;border:1px solid #bfdbfe;border-radius:6px;cursor:pointer;white-space:nowrap;transition:all .15s ease}.canvas-add-grid-banner:hover .btn-banner-add{background:#2563eb;color:#fff;border-color:#2563eb}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "    <div class=\"canvas-wrapper\" (click)=\"onCanvasBackgroundClick($event)\">\n      <!-- Canvas Status / Quick Controls -->\n      <div class=\"canvas-toolbar\">\n        <div class=\"canvas-info\">\n          <span class=\"info-label\">Grid Layout:</span>\n          <span class=\"info-value\">{{ totalColumns() }} Columns</span>\n          <span class=\"info-divider\">\u2022</span>\n          <span class=\"info-label\">Components:</span>\n          <span class=\"info-value\">{{ components().length }}</span>\n          <span class=\"info-divider\">\u2022</span>\n          <span class=\"live-mode-badge\" title=\"Interactive canvas: Values typed here run live queries and test dropdowns.\">\n            \u26A1 Live Interactive Mode\n          </span>\n        </div>\n\n        <div class=\"canvas-actions\">\n          @if (!definition().grid) {\n            <button\n              type=\"button\"\n              class=\"canvas-action-btn btn-grid-add\"\n              (click)=\"addResultGrid($event)\"\n              title=\"Add a Result Grid to this report\"\n            >\n              <rpt-icon name=\"table\" [size]=\"14\" />\n              <span>+ Add Grid</span>\n            </button>\n          } @else {\n            <button\n              type=\"button\"\n              class=\"canvas-action-btn btn-grid-configured\"\n              (click)=\"selectGridSettings($event)\"\n              title=\"Configure Result Data Grid\"\n            >\n              <rpt-icon name=\"table\" [size]=\"14\" />\n              <span>Grid ({{ definition().grid?.columns?.length ?? 0 }})</span>\n            </button>\n          }\n\n          <button\n            type=\"button\"\n            class=\"canvas-action-btn\"\n            (click)=\"selectReportSettings($event)\"\n            title=\"Configure Page Layout & Grid Settings\"\n          >\n            <rpt-icon name=\"settings\" [size]=\"14\" />\n            <span>Report Settings</span>\n          </button>\n        </div>\n      </div>\n\n      <!-- Canvas Drop Area -->\n      <div class=\"canvas-scroll-area\">\n        <div\n          class=\"canvas-artboard\"\n          [style.padding.px]=\"definition().layout.padding ?? 24\"\n        >\n          <!-- Report Header Preview -->\n          <div class=\"canvas-report-header\">\n            <h2 class=\"canvas-report-title\">{{ definition().name || 'Untitled Report' }}</h2>\n            @if (definition().description) {\n              <p class=\"canvas-report-desc\">{{ definition().description }}</p>\n            }\n          </div>\n\n          <!-- Component Drop List Grid with 2D mixed orientation and data binding -->\n          <div\n            cdkDropList\n            id=\"designer-canvas-drop-list\"\n            class=\"canvas-grid\"\n            cdkDropListOrientation=\"mixed\"\n            [cdkDropListData]=\"sortedComponents()\"\n            [style.grid-template-columns]=\"gridTemplateColumns()\"\n            [style.gap.px]=\"definition().layout.gap ?? 16\"\n            (cdkDropListDropped)=\"onDrop($event)\"\n          >\n            @for (comp of sortedComponents(); track comp.id; let idx = $index) {\n              <div\n                cdkDrag\n                [cdkDragData]=\"comp\"\n                [cdkDragDisabled]=\"isAnyResizing()\"\n                class=\"canvas-component-card\"\n                [class.is-selected]=\"isSelected(comp.id)\"\n                [class.is-resizing]=\"resizingCompId() === comp.id\"\n                [class.is-field-highlighted]=\"isFieldHighlighted(comp)\"\n                [class.is-narrow]=\"getSpan(comp) <= 4\"\n                [class.is-compact]=\"getSpan(comp) <= 2\"\n                [style.grid-column]=\"getGridColumn(comp)\"\n                [style.grid-row]=\"getGridRow(comp)\"\n                [style.width]=\"comp.layout?.width || 'auto'\"\n                [style.height]=\"getComponentHeight(comp)\"\n                [style.min-height]=\"getComponentMinHeight(comp)\"\n                (click)=\"onSelect(comp.id, $event)\"\n              >\n                <!-- Card Header with Drag Handle & Actions -->\n                <div class=\"card-header\">\n                  <div class=\"card-title-group\" cdkDragHandle title=\"Drag to reorder\">\n                    <span class=\"drag-handle-dots\">\u22EE\u22EE</span>\n                    <rpt-icon [name]=\"getComponentIconName(comp.type)\" [size]=\"14\" />\n                    <span class=\"comp-title\" [title]=\"comp.label || comp.key || comp.type\">\n                      {{ comp.label || comp.key || comp.type }}\n                    </span>\n                  </div>\n\n                  <div class=\"card-actions\">\n                    <!-- Static span pill & new row / start col pill when not hovered / not selected -->\n                    @if (comp.layout?.column; as col) {\n                      <span class=\"new-row-pill-static\" title=\"Starts at Column {{ col }}\">Col {{ col }}</span>\n                    } @else if (comp.layout?.newRow) {\n                      <span class=\"new-row-pill-static\" title=\"Starts on separate row\">\u21B3 Row</span>\n                    }\n                    <span\n                      class=\"span-pill-static\"\n                      title=\"Column span: {{ getSpan(comp) }} of {{ totalColumns() }} columns\"\n                    >\n                      {{ getSpan(comp) }}/{{ totalColumns() }}\n                    </span>\n\n                    <!-- Quick Action Stepper & Buttons (revealed on hover or selection) -->\n                    <div class=\"card-quick-controls\">\n                      <button\n                        type=\"button\"\n                        class=\"card-action-btn\"\n                        [class.btn-active-toggle]=\"comp.layout?.newRow\"\n                        (click)=\"toggleNewRow(comp, $event)\"\n                        title=\"{{ comp.layout?.newRow ? 'Starts on new row (Click to place inline)' : 'Start on separate row (Row Break)' }}\"\n                      >\n                        <rpt-icon name=\"corner-down-right\" [size]=\"11\" />\n                      </button>\n\n                      <div class=\"span-control-group\" title=\"Adjust Column Span\">\n                        <button\n                          type=\"button\"\n                          class=\"span-btn\"\n                          [disabled]=\"getSpan(comp) <= 1\"\n                          (click)=\"adjustSpan(comp, -1, $event)\"\n                          title=\"Shrink Column Span\"\n                        >\n                          <rpt-icon name=\"minus\" [size]=\"9\" />\n                        </button>\n                        <span class=\"span-badge\" [title]=\"'Column span: ' + getSpan(comp) + ' of ' + totalColumns()\">\n                          <span class=\"span-num\">{{ getSpan(comp) }}</span><span class=\"span-total\">/{{ totalColumns() }}</span>\n                        </span>\n                        <button\n                          type=\"button\"\n                          class=\"span-btn\"\n                          [disabled]=\"getSpan(comp) >= totalColumns()\"\n                          (click)=\"adjustSpan(comp, 1, $event)\"\n                          title=\"Expand Column Span\"\n                        >\n                          <rpt-icon name=\"plus\" [size]=\"9\" />\n                        </button>\n                      </div>\n\n                      <button\n                        type=\"button\"\n                        class=\"card-action-btn\"\n                        (click)=\"onDuplicate(comp.id, $event)\"\n                        title=\"Duplicate component\"\n                      >\n                        <rpt-icon name=\"copy\" [size]=\"12\" />\n                      </button>\n                      <button\n                        type=\"button\"\n                        class=\"card-action-btn btn-delete\"\n                        (click)=\"onDelete(comp.id, $event)\"\n                        title=\"Remove component\"\n                      >\n                        <rpt-icon name=\"trash\" [size]=\"12\" />\n                      </button>\n                    </div>\n                  </div>\n                </div>\n\n                <!-- Card Body Visual Preview -->\n                <div class=\"card-body\">\n\n                  @switch (comp.type) {\n                    @case ('input') {\n                      <div class=\"mock-input-field\" (click)=\"onControlInteract(comp, $event)\">\n                        <span class=\"mock-label\">{{ comp.label || 'Input' }}</span>\n                        @if (getCanvasControl(comp); as ctrl) {\n                          <input\n                            type=\"text\"\n                            class=\"canvas-active-input\"\n                            [placeholder]=\"comp.properties?.['placeholder'] || 'Enter text...'\"\n                            [formControl]=\"ctrl\"\n                            (focus)=\"onControlInteract(comp, $event)\"\n                          />\n                        } @else {\n                          <div class=\"mock-input-box\">{{ comp.properties?.['placeholder'] || 'Enter text...' }}</div>\n                        }\n                      </div>\n                    }\n                    @case ('dropdown') {\n                      <div class=\"canvas-live-control-wrapper\" (click)=\"onControlInteract(comp, $event)\">\n                        <rpt-dropdown\n                          [config]=\"comp\"\n                          [showStatus]=\"true\"\n                          [parentForm]=\"canvasForm()\"\n                          [control]=\"getCanvasControl(comp)\"\n                        />\n                      </div>\n                    }\n                    @case ('date') {\n                      <div class=\"mock-input-field\" (click)=\"onControlInteract(comp, $event)\">\n                        <span class=\"mock-label\">{{ comp.label || 'Date' }}</span>\n                        @if (getCanvasControl(comp); as ctrl) {\n                          <input\n                            type=\"date\"\n                            class=\"canvas-active-input\"\n                            [formControl]=\"ctrl\"\n                            (focus)=\"onControlInteract(comp, $event)\"\n                          />\n                        } @else {\n                          <div class=\"mock-select-box\">\n                            <span>YYYY-MM-DD</span>\n                            <rpt-icon name=\"calendar\" [size]=\"12\" />\n                          </div>\n                        }\n                      </div>\n                    }\n                    @case ('date-range') {\n                      <div class=\"canvas-live-control-wrapper\" (click)=\"onControlInteract(comp, $event)\">\n                        <rpt-date-range\n                          [config]=\"comp\"\n                          [control]=\"getCanvasControl(comp)\"\n                        />\n                      </div>\n                    }\n                    @case ('number') {\n                      <div class=\"mock-input-field\" (click)=\"onControlInteract(comp, $event)\">\n                        <span class=\"mock-label\">{{ comp.label || 'Number' }}</span>\n                        @if (getCanvasControl(comp); as ctrl) {\n                          <input\n                            type=\"number\"\n                            class=\"canvas-active-input\"\n                            [formControl]=\"ctrl\"\n                            (focus)=\"onControlInteract(comp, $event)\"\n                          />\n                        } @else {\n                          <div class=\"mock-input-box\">\n                            {{ comp.properties?.['prefix'] || '' }} 0.00 {{ comp.properties?.['suffix'] || '' }}\n                          </div>\n                        }\n                      </div>\n                    }\n                    @case ('checkbox') {\n                      <div class=\"mock-checkbox-field\" (click)=\"onControlInteract(comp, $event)\">\n                        @if (getCanvasControl(comp); as ctrl) {\n                          <label class=\"canvas-active-checkbox-lbl\">\n                            <input type=\"checkbox\" [formControl]=\"ctrl\" (focus)=\"onControlInteract(comp, $event)\" />\n                            <span class=\"mock-label\">{{ comp.label || 'Checkbox' }}</span>\n                          </label>\n                        } @else {\n                          <span class=\"mock-check-box\">\n                            <rpt-icon name=\"check\" [size]=\"10\" />\n                          </span>\n                          <span class=\"mock-label\">{{ comp.label || 'Checkbox' }}</span>\n                        }\n                      </div>\n                    }\n                    @case ('button') {\n                      <div class=\"mock-btn-wrapper\">\n                        <button\n                          type=\"button\"\n                          class=\"mock-btn\"\n                          [class]=\"'btn-' + (comp.properties?.['variant'] || 'primary')\"\n                          [class.mock-btn-full]=\"comp.properties?.['fullWidth'] === true || comp.layout?.width === '100%'\"\n                          [style.height]=\"getCustomBtnHeight(comp)\"\n                          [style.width]=\"getCustomBtnWidth(comp)\"\n                          (click)=\"onCanvasButtonClick(comp, $event)\"\n                        >\n                          @if (getCustomBtnIcon(comp); as btnIcon) {\n                            <rpt-icon [name]=\"btnIcon\" [size]=\"15\" />\n                          }\n                          <span>{{ comp.label || 'Button' }}</span>\n                        </button>\n                      </div>\n                    }\n                    @case ('kpi-card') {\n                      <div class=\"mock-kpi-field\">\n                        <div class=\"mock-kpi-header\">\n                          <span class=\"mock-label\">{{ comp.label || 'KPI Metric' }}</span>\n                          <rpt-icon name=\"kpi\" [size]=\"14\" />\n                        </div>\n                        <div class=\"mock-kpi-value\">{{ comp.properties?.['value'] || '$128,450' }}</div>\n                        <div class=\"mock-kpi-footer\">\n                          <span class=\"mock-kpi-trend\">+12.5%</span>\n                          <span class=\"mock-kpi-sub\">vs last period</span>\n                        </div>\n                      </div>\n                    }\n                    @case ('chart') {\n                      <div class=\"mock-chart-field\">\n                        <div class=\"mock-chart-header\">\n                          <span class=\"mock-label\">{{ comp.label || 'Quarterly Sales Revenue ($000)' }}</span>\n                        </div>\n                        <div class=\"mock-chart-bars\">\n                          <div class=\"mock-chart-col\">\n                            <div class=\"mock-chart-bar\" style=\"height: 44%\"></div>\n                            <span class=\"mock-bar-lbl\">Q1 Jan-Mar</span>\n                          </div>\n                          <div class=\"mock-chart-col\">\n                            <div class=\"mock-chart-bar\" style=\"height: 61%\"></div>\n                            <span class=\"mock-bar-lbl\">Q2 Apr-Jun</span>\n                          </div>\n                          <div class=\"mock-chart-col\">\n                            <div class=\"mock-chart-bar\" style=\"height: 79%\"></div>\n                            <span class=\"mock-bar-lbl\">Q3 Jul-Sep</span>\n                          </div>\n                          <div class=\"mock-chart-col\">\n                            <div class=\"mock-chart-bar\" style=\"height: 100%\"></div>\n                            <span class=\"mock-bar-lbl\">Q4 Oct-Dec</span>\n                          </div>\n                        </div>\n                      </div>\n                    }\n                    @default {\n                      <div class=\"mock-generic-box\">\n                        <span>{{ comp.type }}</span>\n                      </div>\n                    }\n                  }\n                </div>\n\n                <!-- Resizing Handles (East, South, South-East) -->\n                <div\n                  class=\"resize-handle handle-e\"\n                  (pointerdown)=\"startResize($event, comp, 'e')\"\n                  (dblclick)=\"resetDimensions(comp, $event)\"\n                  title=\"Drag to resize column width \u2022 Double-click to reset\"\n                ></div>\n                <div\n                  class=\"resize-handle handle-s\"\n                  (pointerdown)=\"startResize($event, comp, 's')\"\n                  (dblclick)=\"resetDimensions(comp, $event)\"\n                  title=\"Drag to resize height \u2022 Double-click to reset\"\n                ></div>\n                <div\n                  class=\"resize-handle handle-se\"\n                  (pointerdown)=\"startResize($event, comp, 'se')\"\n                  (dblclick)=\"resetDimensions(comp, $event)\"\n                  title=\"Drag to resize width and height \u2022 Double-click to reset\"\n                ></div>\n\n                <!-- Resizing Dimension Ghost / Badge -->\n                @if (resizingCompId() === comp.id) {\n                  <div class=\"resize-dimension-tooltip\">\n                    {{ resizingTooltip(comp) }}\n                  </div>\n                }\n\n                <!-- Drag placeholder with matched grid column span -->\n                <div\n                  *cdkDragPlaceholder\n                  class=\"canvas-drag-placeholder\"\n                  [style.grid-column]=\"getGridColumn(comp)\"\n                ></div>\n\n                <!-- Drag preview -->\n                <div *cdkDragPreview class=\"canvas-drag-preview\">\n                  <span class=\"drag-handle-dots\">\u22EE\u22EE</span>\n                  <rpt-icon [name]=\"getComponentIconName(comp.type)\" [size]=\"14\" />\n                  <span class=\"preview-title\">{{ comp.label || comp.key || comp.type }}</span>\n                  <span class=\"preview-span\">{{ getSpan(comp) }}/{{ totalColumns() }}</span>\n                </div>\n              </div>\n            }\n\n            @if (components().length === 0) {\n              <div class=\"canvas-empty-state\" role=\"region\" aria-label=\"Empty canvas starter options\">\n                <div class=\"empty-hero-badge\">\n                  <rpt-icon name=\"design\" [size]=\"28\" />\n                </div>\n                <h3 class=\"empty-hero-title\">Start Designing Your Custom Report</h3>\n                <p class=\"empty-hero-desc\">\n                  Drag controls from the left component palette, or jumpstart your design with pre-configured enterprise blueprints.\n                </p>\n\n                <div class=\"empty-hero-actions\">\n                  <button\n                    type=\"button\"\n                    class=\"empty-btn empty-btn-primary\"\n                    (click)=\"applyBlueprint('blueprint-audit-register')\"\n                    title=\"Load complete Audit Register blueprint with parameters and result grid\"\n                  >\n                    <rpt-icon name=\"table\" [size]=\"15\" />\n                    <span>Audit Register Blueprint</span>\n                  </button>\n                  <button\n                    type=\"button\"\n                    class=\"empty-btn empty-btn-secondary\"\n                    (click)=\"applyBlueprint('blueprint-kpi-summary')\"\n                    title=\"Load Executive KPI summary blueprint\"\n                  >\n                    <rpt-icon name=\"chart-bar\" [size]=\"15\" />\n                    <span>KPI Summary Blueprint</span>\n                  </button>\n                  <button\n                    type=\"button\"\n                    class=\"empty-btn empty-btn-outline\"\n                    (click)=\"addStarterComponent('date-range')\"\n                    title=\"Add a Date Range filter component\"\n                  >\n                    <rpt-icon name=\"calendar\" [size]=\"14\" />\n                    <span>+ Add Date Filter</span>\n                  </button>\n                  <button\n                    type=\"button\"\n                    class=\"empty-btn empty-btn-outline\"\n                    (click)=\"addStarterComponent('button')\"\n                    title=\"Add an Execute Action button\"\n                  >\n                    <rpt-icon name=\"play\" [size]=\"14\" />\n                    <span>+ Add Run Button</span>\n                  </button>\n                </div>\n              </div>\n            }\n          </div>\n\n          <!-- Live Result Grid Preview with Bways-Grid Features -->\n          @if (definition().grid) {\n            <div class=\"canvas-grid-box\">\n              <div class=\"grid-preview-header\">\n                <div style=\"display: flex; align-items: center; gap: 8px;\">\n                  <rpt-icon name=\"table\" [size]=\"15\" />\n                  <span class=\"grid-title\">Bways Grid ({{ definition().grid?.columns?.length ?? 0 }} columns)</span>\n                  @if (isExecutingGrid()) {\n                    <span class=\"grid-exec-badge is-loading\">Loading data from database...</span>\n                  } @else if (gridExecError()) {\n                    <span class=\"grid-exec-badge is-error\">{{ gridExecError() }}</span>\n                  } @else if (canvasGridData().length > 0) {\n                    <span class=\"grid-exec-badge is-success\">{{ canvasGridData().length }} rows loaded</span>\n                  }\n                </div>\n                <div style=\"display: flex; align-items: center; gap: 8px;\">\n                  <button\n                    type=\"button\"\n                    class=\"btn-canvas-run-grid\"\n                    (click)=\"executeCanvasReport($event)\"\n                    [disabled]=\"isExecutingGrid()\"\n                    title=\"Execute query and load data into Bways Grid\"\n                  >\n                    <rpt-icon name=\"play\" [size]=\"11\" />\n                    <span>{{ isExecutingGrid() ? 'Running...' : 'Run / Refresh Grid' }}</span>\n                  </button>\n                  <button\n                    type=\"button\"\n                    class=\"btn-canvas-edit-grid\"\n                    (click)=\"selectGridSettings($event)\"\n                    title=\"Configure columns and grid options\"\n                  >\n                    <rpt-icon name=\"settings\" [size]=\"11\" />\n                    <span>Configure</span>\n                  </button>\n                  <button\n                    type=\"button\"\n                    class=\"btn-remove-grid\"\n                    (click)=\"removeGrid($event)\"\n                    title=\"Remove Result Grid from this report\"\n                  >\n                    <rpt-icon name=\"trash\" [size]=\"13\" />\n                  </button>\n                </div>\n              </div>\n\n              @if (getGridSummaryText(); as summary) {\n                <div class=\"grid-layout-status-strip\">\n                  <div class=\"grid-status-info\">\n                    <rpt-icon name=\"table\" [size]=\"12\" />\n                    <span>{{ summary }}</span>\n                  </div>\n                  <div class=\"grid-status-sync\" [class.is-pulsing]=\"layoutJustUpdated()\">\n                    <rpt-icon name=\"check\" [size]=\"11\" />\n                    <span>Layout auto-persisted</span>\n                  </div>\n                </div>\n              }\n\n              <!-- Live Bways Grid bridge -->\n              <div class=\"canvas-live-grid-container\" (click)=\"$event.stopPropagation()\" style=\"position: relative; min-height: 250px;\">\n                @if (isExecutingGrid()) {\n                  <div class=\"canvas-grid-loading-overlay\">\n                    <span class=\"status-dot dot-pulse\" style=\"width: 14px; height: 14px; color: #2563eb; background: #2563eb; border-radius: 50%;\"></span>\n                    <span class=\"grid-loading-title\">Executing stored procedure on SQL Server...</span>\n                    <span class=\"grid-loading-sub\">Calculating outstanding balances and ledger amounts. Please wait...</span>\n                  </div>\n                }\n                <rpt-grid-bridge\n                  [gridDefinition]=\"definition().grid!\"\n                  [data]=\"canvasGridData()\"\n                  (gridStateChange)=\"onCanvasGridStateChange($event)\"\n                  (columnDefsChange)=\"onCanvasColumnDefsChange($event)\"\n                />\n              </div>\n            </div>\n          } @else {\n            <div class=\"canvas-add-grid-banner\" (click)=\"addResultGrid($event)\">\n              <div class=\"add-grid-icon\">\n                <rpt-icon name=\"table\" [size]=\"20\" />\n              </div>\n              <div class=\"add-grid-text\">\n                <span class=\"add-grid-title\">+ Add Result Data Grid</span>\n                <span class=\"add-grid-sub\">Attach an interactive data table or UltraGrid to display report execution output</span>\n              </div>\n              <button type=\"button\" class=\"btn-banner-add\">Add Grid</button>\n            </div>\n          }\n        </div>\n      </div>\n    </div>", styles: [":host{display:block;height:100%;background-color:#f1f5f9;font-family:var(--rpt-font-family, inherit);box-sizing:border-box}.canvas-wrapper{display:flex;flex-direction:column;height:100%}.canvas-toolbar{display:flex;align-items:center;justify-content:space-between;min-height:42px;height:42px;padding:0 24px;background:var(--rpt-color-surface, #ffffff);border-bottom:1px solid var(--rpt-color-border, #cbd5e1);box-sizing:border-box;gap:12px;overflow-x:auto;scrollbar-width:none;font-family:var(--rpt-font-family, inherit);flex-shrink:0}.canvas-toolbar::-webkit-scrollbar{display:none}.canvas-info{display:flex;align-items:center;gap:8px;font-family:var(--rpt-font-family, inherit);font-size:var(--rpt-font-size-sm, .75rem);color:var(--rpt-color-text-muted, #64748b);white-space:nowrap;line-height:1}.info-label{color:var(--rpt-color-text-muted, #64748b);font-weight:500;font-size:var(--rpt-font-size-sm, .75rem)}.info-value{font-weight:600;color:var(--rpt-color-text, #0f172a);font-size:var(--rpt-font-size-sm, .75rem)}.info-divider{color:var(--rpt-color-border, #cbd5e1);margin:0 2px}.live-mode-badge{display:inline-flex;align-items:center;gap:4px;font-family:var(--rpt-font-family, inherit);font-size:var(--rpt-font-size-xs, .7rem);font-weight:600;color:#047857;background:#ecfdf5;border:1px solid #a7f3d0;padding:2px 8px;border-radius:9999px;line-height:1}.canvas-actions{display:flex;align-items:center;gap:8px;white-space:nowrap}.canvas-action-btn{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;font-family:var(--rpt-font-family, inherit);font-size:var(--rpt-font-size-sm, .75rem);font-weight:500;letter-spacing:-.01em;color:var(--rpt-color-text-secondary, #334155);background:var(--rpt-color-surface, #ffffff);border:1px solid var(--rpt-color-border, #cbd5e1);border-radius:var(--rpt-border-radius, 6px);cursor:pointer;line-height:1;white-space:nowrap;box-shadow:0 1px 2px #0000000a;transition:all var(--rpt-transition-speed, .15s) ease}.canvas-action-btn:hover{background:var(--rpt-color-surface-hover, #f8fafc);border-color:var(--rpt-color-border-hover, #94a3b8);color:var(--rpt-color-text, #0f172a);box-shadow:0 2px 4px #0000000f}.canvas-action-btn.btn-grid-configured{background:#eff6ff;border-color:#bfdbfe;color:#2563eb;font-weight:600}.canvas-action-btn.btn-grid-configured:hover{background:#dbeafe;color:#1d4ed8;border-color:#93c5fd}.canvas-action-btn.btn-grid-add{background:#f0fdf4;border-color:#bbf7d0;color:#16a34a;font-weight:600}.canvas-action-btn.btn-grid-add:hover{background:#dcfce7;color:#15803d;border-color:#86efac}.canvas-action-btn:active{transform:translateY(1px)}.canvas-scroll-area{flex:1;overflow-y:auto;padding:16px}.canvas-artboard{width:100%;max-width:1400px;margin:0 auto;background:#fff;border:1px solid var(--rpt-color-border, #cbd5e1);border-radius:var(--rpt-border-radius-lg, 8px);box-shadow:0 4px 6px -1px #0000000d;min-height:480px;box-sizing:border-box}@media (max-width: 900px){.canvas-toolbar{min-height:36px;height:36px;padding:0 10px;gap:6px}.live-mode-badge{display:none}.canvas-info{font-size:.75rem;gap:5px}.canvas-action-btn{padding:0 8px;font-size:.725rem;height:28px;gap:4px}.canvas-scroll-area{padding:10px}.canvas-artboard{min-height:360px}}@media (max-width: 600px){.canvas-toolbar{padding:0 8px;gap:4px}.canvas-info .info-label,.canvas-action-btn span{display:none}.canvas-action-btn{padding:0 6px;min-width:28px;justify-content:center}}.canvas-report-header{margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--rpt-color-border, #e2e8f0)}.canvas-report-title{font-size:var(--rpt-font-size-xl, 1.5rem);font-weight:700;color:var(--rpt-color-text, #0f172a);margin:0 0 6px}.canvas-report-desc{font-size:var(--rpt-font-size-base, .875rem);color:var(--rpt-color-text-muted, #64748b);margin:0}.canvas-grid{display:grid;width:100%;min-height:180px;align-items:start;border-radius:6px;transition:all var(--rpt-transition-speed, .15s) ease}.canvas-component-card{container-type:inline-size;background:#fff;border:1.5px solid var(--rpt-color-border, #cbd5e1);border-radius:var(--rpt-border-radius, 6px);box-shadow:var(--rpt-box-shadow, 0 1px 2px rgba(0, 0, 0, .05));box-sizing:border-box;transition:all var(--rpt-transition-speed, .15s) ease;cursor:pointer;position:relative;overflow:visible;display:flex;flex-direction:column;min-height:104px;z-index:1}.canvas-component-card:hover{border-color:var(--rpt-color-primary, #2563eb);box-shadow:0 4px 6px -1px #2563eb1a;z-index:2}.canvas-component-card.is-selected{border-color:var(--rpt-color-primary, #2563eb);box-shadow:0 0 0 2px #2563eb40;z-index:10}.canvas-component-card:focus-within,.canvas-component-card:has(.rpt-combobox-menu),.canvas-component-card:has(.is-open){z-index:100}.canvas-component-card.is-resizing{-webkit-user-select:none;user-select:none;border-color:var(--rpt-color-primary, #2563eb);box-shadow:0 0 0 2px #2563eb59;z-index:30;transition:none!important}.resize-handle{position:absolute;z-index:20;touch-action:none;opacity:0;pointer-events:none;transition:opacity .15s ease}.canvas-component-card.is-selected .resize-handle{opacity:1;pointer-events:auto}.resize-handle.handle-e{top:0;right:0;width:6px;height:100%;cursor:ew-resize;display:flex;align-items:center;justify-content:center}.resize-handle.handle-e:after{content:\"\";width:3px;height:24px;background:#cbd5e1;border-radius:2px;transition:background .15s ease}.resize-handle.handle-e:hover:after,.canvas-component-card.is-selected .resize-handle.handle-e:after{background:var(--rpt-color-primary, #2563eb)}.resize-handle.handle-s{bottom:0;left:0;height:6px;width:100%;cursor:ns-resize;display:flex;align-items:center;justify-content:center}.resize-handle.handle-s:after{content:\"\";height:3px;width:24px;background:#cbd5e1;border-radius:2px;transition:background .15s ease}.resize-handle.handle-s:hover:after,.canvas-component-card.is-selected .resize-handle.handle-s:after{background:var(--rpt-color-primary, #2563eb)}.resize-handle.handle-se{bottom:0;right:0;width:12px;height:12px;cursor:nwse-resize;display:flex;align-items:flex-end;justify-content:flex-end;padding:2px}.resize-handle.handle-se:after{content:\"\";width:5px;height:5px;border-right:2px solid #cbd5e1;border-bottom:2px solid #cbd5e1;transition:border-color .15s ease}.resize-handle.handle-se:hover:after,.canvas-component-card.is-selected .resize-handle.handle-se:after{border-color:var(--rpt-color-primary, #2563eb)}.resize-dimension-tooltip{position:absolute;top:38px;right:8px;background:#0f172ae6;color:#fff;font-size:.7rem;font-weight:600;padding:3px 8px;border-radius:4px;white-space:nowrap;pointer-events:none;z-index:50;box-shadow:0 2px 4px #0003}.card-header{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:5px 8px;background:var(--rpt-color-surface, #f8fafc);border-bottom:1px solid var(--rpt-color-border, #e2e8f0);border-top-left-radius:var(--rpt-border-radius, 6px);border-top-right-radius:var(--rpt-border-radius, 6px);min-height:32px;box-sizing:border-box;overflow:hidden;position:relative}.canvas-component-card.is-selected .card-header{overflow:visible}.card-title-group{display:flex;align-items:center;gap:5px;cursor:grab;min-width:0;flex:1;overflow:hidden}.drag-handle-dots{color:var(--rpt-color-text-muted, #94a3b8);font-size:.85rem;letter-spacing:-2px;flex-shrink:0;-webkit-user-select:none;user-select:none}.comp-title{font-size:.75rem;font-weight:600;color:var(--rpt-color-text, #0f172a);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-user-select:none;user-select:none}.card-actions{display:flex;align-items:center;gap:4px;flex-shrink:0;margin-left:auto}.new-row-pill-static{font-size:.65rem;font-weight:600;color:#7c3aed;background:#f5f3ff;border:1px solid #ddd6fe;padding:1px 5px;border-radius:9999px;white-space:nowrap;line-height:1;flex-shrink:0}.span-pill-static{display:inline-flex;align-items:center;justify-content:center;font-size:.65rem;font-weight:600;color:var(--rpt-color-text-muted, #64748b);background:var(--rpt-color-surface, #f1f5f9);border:1px solid var(--rpt-color-border, #e2e8f0);padding:1px 6px;border-radius:9999px;line-height:1.2;white-space:nowrap;-webkit-user-select:none;user-select:none}.card-quick-controls{display:none;align-items:center;gap:3px;flex-shrink:0}.canvas-component-card:hover .span-pill-static,.canvas-component-card.is-selected .span-pill-static,.canvas-component-card:hover .new-row-pill-static,.canvas-component-card.is-selected .new-row-pill-static{display:none}.canvas-component-card:hover .card-quick-controls,.canvas-component-card.is-selected .card-quick-controls{display:inline-flex}.canvas-component-card.is-narrow .card-header{padding:4px 6px;gap:3px}.canvas-component-card.is-narrow:hover .comp-title,.canvas-component-card.is-narrow.is-selected .comp-title,.canvas-component-card.is-narrow:hover .drag-handle-dots,.canvas-component-card.is-narrow.is-selected .drag-handle-dots{display:none}.canvas-component-card.is-narrow .card-quick-controls{gap:2px}.canvas-component-card.is-narrow .span-control-group{height:18px}.canvas-component-card.is-narrow .span-btn{width:14px;height:16px}.canvas-component-card.is-narrow .span-badge{font-size:.6rem;padding:0 2px}.canvas-component-card.is-narrow .span-total{display:none}.canvas-component-card.is-narrow .card-action-btn{width:18px;height:18px}@container (max-width: 250px){.card-header{padding:4px 6px;gap:3px}.canvas-component-card:hover .comp-title,.canvas-component-card.is-selected .comp-title,.canvas-component-card:hover .drag-handle-dots,.canvas-component-card.is-selected .drag-handle-dots,.span-total{display:none}.card-quick-controls{gap:2px}.card-action-btn{width:18px;height:18px}.span-control-group{height:18px}.span-btn{width:14px;height:16px}.span-badge{font-size:.6rem;padding:0 2px}}@container (max-width: 160px){.canvas-component-card.is-selected .card-quick-controls{position:absolute;top:-30px;right:0;background:#fff;border:1.5px solid var(--rpt-color-primary, #2563eb);border-radius:6px;padding:2px 4px;gap:3px;box-shadow:0 4px 12px #2563eb2e,0 2px 4px #00000014;z-index:120;white-space:nowrap}}@media (max-width: 900px){.canvas-component-card:hover .comp-title,.canvas-component-card.is-selected .comp-title,.canvas-component-card:hover .drag-handle-dots,.canvas-component-card.is-selected .drag-handle-dots,.canvas-component-card .span-total{display:none}.canvas-component-card.is-selected .card-header{overflow:visible}.canvas-component-card.is-selected .card-quick-controls{position:absolute;top:-30px;right:0;background:#fff;border:1.5px solid var(--rpt-color-primary, #2563eb);border-radius:6px;padding:2px 4px;gap:3px;box-shadow:0 4px 12px #2563eb2e,0 2px 4px #00000014;z-index:120;white-space:nowrap}}.span-control-group{display:inline-flex;align-items:center;background:#fff;border:1px solid var(--rpt-color-border, #cbd5e1);border-radius:4px;height:20px;padding:0 1px;white-space:nowrap;flex-shrink:0}.span-btn{width:16px;height:18px;display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;padding:0;color:var(--rpt-color-text-muted, #64748b);cursor:pointer;border-radius:2px;transition:all .12s ease}.span-btn:hover:not(:disabled){background:var(--rpt-color-surface-hover, #f1f5f9);color:var(--rpt-color-primary, #2563eb)}.span-btn:disabled{opacity:.3;cursor:not-allowed}.span-badge{font-size:.65rem;font-weight:600;color:var(--rpt-color-text, #0f172a);padding:0 3px;white-space:nowrap;-webkit-user-select:none;user-select:none;line-height:1}.span-total{font-size:.6rem;color:var(--rpt-color-text-muted, #64748b);font-weight:500}.card-action-btn{width:20px;height:20px;border:none;background:transparent;border-radius:4px;display:inline-flex;align-items:center;justify-content:center;padding:0;cursor:pointer;color:var(--rpt-color-text-muted, #64748b);transition:all .12s ease;flex-shrink:0}.card-action-btn:hover{background:#e2e8f0;color:var(--rpt-color-text, #0f172a)}.card-action-btn.btn-active-toggle{background:#7c3aed;color:#fff;border-color:#7c3aed}.card-action-btn.btn-active-toggle:hover{background:#6d28d9;color:#fff}.btn-delete:hover{background:#fee2e2;color:#ef4444}.card-body{padding:8px 10px 14px;flex:1;display:flex;flex-direction:column;min-height:0;min-width:0;max-width:100%;box-sizing:border-box;overflow:visible}.mock-input-field{display:flex;flex-direction:column;gap:4px;flex:1;height:100%;min-height:0}.mock-label{font-size:.7rem;font-weight:600;color:var(--rpt-color-text-muted, #475569);flex-shrink:0}.mock-input-box,.mock-select-box{border:1px solid var(--rpt-color-border, #cbd5e1);border-radius:6px;padding:6px 12px;font-size:var(--rpt-font-size-base, .875rem);color:var(--rpt-color-text-muted, #94a3b8);background:#fff;flex:1;min-height:38px;height:100%;display:flex;align-items:center;justify-content:space-between;box-sizing:border-box}.mock-checkbox-field{display:flex;align-items:center;gap:6px;flex:1;height:100%;min-height:0;padding-top:14px}.mock-check-box{width:18px;height:18px;border:1px solid var(--rpt-color-border, #cbd5e1);border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:.65rem;color:var(--rpt-color-primary, #2563eb);flex-shrink:0}.mock-btn-wrapper{display:flex;flex:1;height:100%;min-height:38px;align-items:center;justify-content:flex-start;width:100%;min-width:0;box-sizing:border-box}.mock-btn{border-radius:var(--rpt-border-radius, 6px);padding:0 16px;height:36px;font-size:var(--rpt-font-size-base, .875rem);font-weight:500;border:1px solid transparent;cursor:pointer;width:auto;max-width:100%;display:inline-flex;align-items:center;justify-content:center;gap:6px;box-sizing:border-box;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:all .15s ease}.mock-btn.mock-btn-full{width:100%}.canvas-component-card.is-narrow .mock-btn{padding:0 6px;font-size:.775rem;width:100%;height:34px}.mock-kpi-field{display:flex;flex-direction:column;justify-content:space-between;flex:1;height:100%;min-height:0}.mock-kpi-header{display:flex;align-items:center;justify-content:space-between}.mock-kpi-value{font-size:1.25rem;font-weight:700;color:var(--rpt-color-text, #0f172a);margin:2px 0}.mock-kpi-footer{display:flex;align-items:center;gap:6px;font-size:.65rem}.mock-kpi-trend{color:#16a34a;font-weight:600}.mock-kpi-sub{color:#64748b}.mock-chart-field{display:flex;flex-direction:column;flex:1;height:100%;min-height:140px}.mock-chart-bars{display:flex;align-items:flex-end;justify-content:space-around;gap:16px;flex:1;min-height:100px;padding-top:12px;box-sizing:border-box}.mock-chart-col{flex:1;display:flex;flex-direction:column;align-items:center;height:100%;min-width:60px;max-width:140px}.mock-chart-bar{width:38px;max-width:44px;margin:0 auto;background:var(--rpt-color-primary, #2563eb);border-radius:6px 6px 0 0;opacity:.85;min-height:10px;transition:height .2s ease}.mock-bar-lbl{font-size:.6875rem;color:#64748b;margin-top:6px;text-align:center;white-space:normal;line-height:1.2}.btn-primary{background:var(--rpt-color-primary, #2563eb);color:#fff}.btn-secondary{background:#f1f5f9;color:#0f172a;border:1px solid #cbd5e1}.btn-outline{background:transparent;color:#2563eb;border:1px solid #2563eb}.btn-danger{background:#ef4444;color:#fff}.mock-generic-box{border:1px dashed #cbd5e1;border-radius:4px;padding:8px;font-size:.75rem;text-align:center;color:#64748b}.canvas-drag-placeholder{background:#2563eb0f;border:2px dashed var(--rpt-color-primary, #2563eb);border-radius:6px;min-height:80px;box-sizing:border-box;transition:transform .15s ease}.canvas-drag-preview,::ng-deep .canvas-drag-preview{background:#fff;border:2px solid var(--rpt-color-primary, #2563eb);border-radius:6px;padding:8px 14px;display:inline-flex;align-items:center;gap:8px;font-family:var(--rpt-font-family, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif)!important;font-size:.8rem;font-weight:600;color:var(--rpt-color-text, #0f172a);box-shadow:0 12px 24px -4px #00000040;z-index:10000}.preview-title,::ng-deep .preview-title{font-family:inherit!important;max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preview-span,::ng-deep .preview-span{font-family:inherit!important;font-size:.65rem;font-weight:600;color:var(--rpt-color-primary, #2563eb);background:#eff6ff;border:1px solid #bfdbfe;padding:1px 6px;border-radius:9999px}.canvas-empty-state{grid-column:1 / -1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:56px 28px;border:2px dashed var(--rpt-color-border, #cbd5e1);border-radius:var(--rpt-border-radius-xl, 12px);background:var(--rpt-color-surface, #ffffff);text-align:center;box-shadow:var(--rpt-box-shadow-xs, 0 1px 2px 0 rgba(0, 0, 0, .04));transition:border-color var(--rpt-transition-speed, .15s) ease}.canvas-empty-state:hover{border-color:var(--rpt-color-primary, #2563eb)}.empty-hero-badge{width:56px;height:56px;border-radius:var(--rpt-border-radius-xl, 12px);background:var(--rpt-color-primary-light, #eff6ff);color:var(--rpt-color-primary, #2563eb);display:flex;align-items:center;justify-content:center;margin-bottom:16px;box-shadow:0 2px 8px #2563eb1f}.empty-hero-title{font-size:var(--rpt-font-size-lg, 1.125rem);font-weight:700;color:var(--rpt-color-text, #0f172a);margin:0 0 8px;letter-spacing:-.01em}.empty-hero-desc{font-size:var(--rpt-font-size-base, .875rem);color:var(--rpt-color-text-muted, #64748b);max-width:520px;line-height:1.5;margin:0 0 24px}.empty-hero-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px}.empty-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 16px;font-size:var(--rpt-font-size-sm, .75rem);font-weight:600;border-radius:var(--rpt-border-radius, 6px);cursor:pointer;transition:all var(--rpt-transition-speed, .15s) ease;font-family:inherit}.empty-btn-primary{background:var(--rpt-color-primary, #2563eb);color:#fff;border:1px solid var(--rpt-color-primary, #2563eb);box-shadow:0 1px 3px #2563eb33}.empty-btn-primary:hover{background:var(--rpt-color-primary-hover, #1d4ed8);border-color:var(--rpt-color-primary-hover, #1d4ed8);transform:translateY(-1px)}.empty-btn-secondary{background:#f8fafc;color:#334155;border:1px solid var(--rpt-color-border, #cbd5e1)}.empty-btn-secondary:hover{background:#f1f5f9;color:#0f172a;border-color:#94a3b8;transform:translateY(-1px)}.empty-btn-outline{background:#fff;color:var(--rpt-color-primary, #2563eb);border:1px solid #bfdbfe}.empty-btn-outline:hover{background:#eff6ff;border-color:var(--rpt-color-primary, #2563eb);transform:translateY(-1px)}.canvas-active-input{width:100%;height:32px;padding:4px 8px;font-size:.8125rem;border:1px solid var(--rpt-color-border, #cbd5e1);border-radius:4px;outline:none;box-sizing:border-box;background:#fff;color:#0f172a;transition:border-color .15s ease}.canvas-active-input:focus{border-color:var(--rpt-color-primary, #2563eb)}.canvas-active-checkbox-lbl{display:inline-flex;align-items:center;gap:6px;cursor:pointer}.canvas-live-control-wrapper{width:100%;max-width:100%;min-width:0;position:relative;z-index:1;box-sizing:border-box}.canvas-grid-box{margin-top:24px;border:1px solid var(--rpt-color-border, #cbd5e1);border-radius:8px;background:#fff;box-shadow:0 1px 3px #0000000d;overflow:hidden}.grid-preview-header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:var(--rpt-color-surface, #f8fafc);border-bottom:1px solid var(--rpt-color-border, #cbd5e1);font-size:.8rem;font-weight:600;color:var(--rpt-color-text, #0f172a)}.grid-title{font-weight:700}.grid-exec-badge{font-size:.6875rem;font-weight:600;padding:2px 8px;border-radius:10px}.grid-exec-badge.is-loading{background:#eff6ff;color:#2563eb}.grid-exec-badge.is-error{background:#fee2e2;color:#ef4444}.grid-exec-badge.is-success{background:#ecfdf5;color:#059669}.btn-canvas-run-grid{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;font-size:.72rem;font-weight:600;color:#fff;background:var(--rpt-color-primary, #2563eb);border:none;border-radius:4px;cursor:pointer;transition:background .15s ease}.btn-canvas-run-grid:hover:not(:disabled){background:#1d4ed8}.btn-canvas-run-grid:disabled{opacity:.6;cursor:not-allowed}.btn-canvas-edit-grid{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;font-size:.72rem;font-weight:500;color:#334155;background:#fff;border:1px solid #cbd5e1;border-radius:4px;cursor:pointer;transition:all .12s ease}.btn-canvas-edit-grid:hover{background:#f1f5f9}.canvas-live-grid-container{width:100%;min-height:480px;background:#fff}.live-mode-badge{display:inline-flex;align-items:center;gap:4px;font-size:.6875rem;font-weight:700;color:#047857;background:#ecfdf5;border:1px solid #a7f3d0;padding:1px 8px;border-radius:9999px}.canvas-component-card.is-field-highlighted{border-color:#f59e0b!important;box-shadow:0 0 0 3px #f59e0b59!important;animation:rpt-pulse-border 1s ease-in-out infinite alternate}@keyframes rpt-pulse-border{0%{box-shadow:0 0 0 2px #f59e0b40}to{box-shadow:0 0 0 5px #f59e0b80}}.grid-layout-status-strip{display:flex;align-items:center;justify-content:space-between;padding:6px 16px;background:#f1f5f9;border-bottom:1px solid var(--rpt-color-border, #cbd5e1);font-size:.6875rem;color:#475569}.grid-status-info{display:inline-flex;align-items:center;gap:6px;font-weight:600}.grid-status-sync{display:inline-flex;align-items:center;gap:4px;color:#059669;font-weight:600;transition:transform .2s ease}.grid-status-sync.is-pulsing{transform:scale(1.08);color:#047857}.canvas-actions{display:flex;align-items:center;gap:8px}.btn-grid-add{background:#f0fdf4;border-color:#bbf7d0;color:#16a34a}.btn-grid-add:hover{background:#dcfce7;border-color:#86efac;color:#15803d}.btn-remove-grid{display:inline-flex;align-items:center;justify-content:center;padding:4px;border:none;background:transparent;color:#94a3b8;border-radius:4px;cursor:pointer;transition:all .15s ease}.btn-remove-grid:hover{background:#fee2e2;color:#ef4444}.canvas-add-grid-banner{margin-top:24px;border:2px dashed #cbd5e1;border-radius:8px;background:#fff;padding:16px 20px;display:flex;align-items:center;gap:16px;cursor:pointer;transition:all .15s ease}.canvas-add-grid-banner:hover{border-color:#2563eb;background:#f8fafc;box-shadow:0 2px 8px #2563eb14}.add-grid-icon{width:40px;height:40px;border-radius:8px;background:#eff6ff;color:#2563eb;display:flex;align-items:center;justify-content:center;flex-shrink:0}.add-grid-text{display:flex;flex-direction:column;gap:2px;flex:1}.add-grid-title{font-size:.875rem;font-weight:600;color:#0f172a}.add-grid-sub{font-size:.75rem;color:#64748b}.btn-banner-add{padding:6px 14px;font-size:.75rem;font-weight:600;color:#2563eb;background:#eff6ff;border:1px solid #bfdbfe;border-radius:6px;cursor:pointer;white-space:nowrap;transition:all .15s ease}.canvas-add-grid-banner:hover .btn-banner-add{background:#2563eb;color:#fff;border-color:#2563eb}.canvas-grid-loading-overlay{position:absolute;inset:0;background:#ffffffe6;backdrop-filter:blur(2px);z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-family:inherit;border-radius:6px}.grid-loading-title{font-weight:600;font-size:.95rem;color:#1e293b}.grid-loading-sub{font-size:.8rem;color:#64748b}\n"] }]
         }], propDecorators: { onEscape: [{
                 type: HostListener,
                 args: ['document:keydown.escape']
@@ -10040,826 +10419,1048 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
   `, styles: [".property-group{display:flex;flex-direction:column;gap:12px}.group-title{font-size:.7rem;font-weight:700;color:var(--rpt-color-text-muted, #64748b);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--rpt-color-border, #e2e8f0);padding-bottom:4px}.field-row{display:flex;flex-direction:column;gap:4px}.field-label-row{display:flex;align-items:center;justify-content:space-between}.field-badge-val{font-size:.65rem;font-weight:600;color:var(--rpt-color-primary, #2563eb);background:#eff6ff;border:1px solid #bfdbfe;padding:1px 6px;border-radius:9999px}.field-label{font-size:.7rem;font-weight:600;color:var(--rpt-color-text, #0f172a)}.field-input,.field-select,.field-textarea{width:100%;box-sizing:border-box;border:1px solid var(--rpt-color-border, #cbd5e1);border-radius:var(--rpt-border-radius-sm, 4px);padding:6px 10px;font-size:var(--rpt-font-size-sm, .75rem);color:var(--rpt-color-text, #0f172a);background:#fff;outline:none;transition:all var(--rpt-transition-speed, .15s) ease}.field-select{appearance:none;-webkit-appearance:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right 10px center;background-size:13px 13px;padding-right:28px;cursor:pointer}.field-input:focus,.field-select:focus,.field-textarea:focus{border-color:var(--rpt-color-primary, #2563eb);box-shadow:var(--rpt-box-shadow-focus, 0 0 0 3px rgba(37, 99, 235, .25))}.checkbox-toggle{display:inline-flex;align-items:center;gap:8px;font-size:.75rem;font-weight:500;color:var(--rpt-color-text, #0f172a);cursor:pointer}.preset-pill-group{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}.preset-pill{background:#f1f5f9;border:1px solid #e2e8f0;border-radius:4px;padding:2px 8px;font-size:.65rem;font-weight:600;color:#475569;cursor:pointer;transition:all .12s ease}.preset-pill:hover{background:#e2e8f0;color:#0f172a;border-color:#cbd5e1}.preset-pill-active{background:var(--rpt-color-primary, #2563eb)!important;color:#fff!important;border-color:var(--rpt-color-primary, #2563eb)!important}.preset-pill-reset{color:var(--rpt-color-primary, #2563eb);background:#eff6ff;border-color:#bfdbfe}.preset-pill-reset:hover{background:#dbeafe;color:#1d4ed8;border-color:#93c5fd}\n"] }]
         }] });
 
-class PropertyEditorGridComponent {
-    grid = input();
-    addGrid = output();
-    removeGrid = output();
-    addColumn = output();
-    autoDetectColumns = output();
-    removeColumn = output();
-    updateColumn = output();
-    updateOption = output();
-    updateRowClickAction = output();
-    columns = computed(() => {
-        return this.grid()?.columns ?? [];
+class ParameterBindingEditorComponent {
+    sessionService = inject(ReportSessionContextService);
+    param = input.required();
+    currentValue = input('');
+    allComponents = input([]);
+    currentComponentId = input('');
+    isAdvancedMode = input(false);
+    valueChange = output();
+    linkedFieldChange = output();
+    internalMode = signal(null);
+    sessionMatch = computed(() => this.sessionService.matchParameter(this.param().name));
+    friendlyLabel = computed(() => {
+        return this.param().friendlyLabel || humanizeIdentifier(this.param().name);
     });
-    rowClickAction = computed(() => {
-        return this.grid()?.rowClickAction ?? this.grid()?.options?.rowClickAction;
+    displayType = computed(() => {
+        switch (this.param().dataType) {
+            case 'boolean':
+                return 'Yes / No';
+            case 'number':
+                return 'Number';
+            case 'date':
+                return 'Date';
+            default:
+                return 'Text';
+        }
     });
-    hasRowClickAction = computed(() => {
-        return !!this.rowClickAction();
+    isCurrentValue = (val) => {
+        return String(this.currentValue()) === String(val);
+    };
+    paramQuickSuggestions = computed(() => {
+        const name = this.param().name.toLowerCase().replace(/^@/, '');
+        if (name === 'inttranorduedate') {
+            return [
+                { label: '0: Transaction Date', value: 0 },
+                { label: '1: Due Date', value: 1 },
+                { label: '2: GIR Date', value: 2 },
+            ];
+        }
+        if (name === 'intonlydue') {
+            return [
+                { label: '0: All Bills', value: 0 },
+                { label: '1: Only Due Bills', value: 1 },
+            ];
+        }
+        if (name === 'intvalue') {
+            return [
+                { label: '11: Customer Ledger', value: 11 },
+                { label: '12: Supplier Ledger', value: 12 },
+            ];
+        }
+        if (name === 'chrcompanyid') {
+            return [
+                { label: '101: Default Co', value: '101' },
+            ];
+        }
+        if (name === 'chrcompunitid') {
+            return [
+                { label: '101: Unit 101', value: '101' },
+                { label: '101,102,103: All Units', value: '101,102,103' },
+            ];
+        }
+        if (name === 'chrsubacnolist') {
+            return [
+                { label: '0: All Accounts', value: '0' },
+            ];
+        }
+        if (name === 'intwithcity') {
+            return [
+                { label: '0: No', value: 0 },
+                { label: '1: Yes', value: 1 },
+            ];
+        }
+        return [];
     });
-    parameterMappings = computed(() => {
-        const mapping = this.rowClickAction()?.parameterMapping;
-        if (!mapping)
-            return [];
-        return Object.entries(mapping).map(([key, value]) => ({ key, value }));
+    compatibleControls = computed(() => {
+        return this.allComponents().filter((c) => c.id !== this.currentComponentId());
     });
-    onUpdateCol(index, field, value) {
-        this.updateColumn.emit({ index, field, value });
-    }
-    toggleRowClickAction(enabled) {
-        if (enabled) {
-            this.updateRowClickAction.emit({
-                type: 'open-drawer',
-                drawerTitle: 'Details',
-                drawerWidth: '760px',
+    hasValue = computed(() => {
+        const v = this.currentValue();
+        return v !== undefined && v !== null && v !== '';
+    });
+    activeMode = computed(() => {
+        if (this.internalMode() !== null) {
+            return this.internalMode();
+        }
+        const val = String(this.currentValue() ?? '');
+        // If matches session context and has no explicit manual override, default to session
+        if (this.sessionMatch() !== null && (!val || val.startsWith('{{session.'))) {
+            return 'session';
+        }
+        if (val.startsWith('{{context.')) {
+            return 'context';
+        }
+        if (val.startsWith('{{session.')) {
+            return 'session';
+        }
+        if (val.startsWith('{{') && val.endsWith('}}')) {
+            const inner = val.slice(2, -2).trim();
+            const match = this.compatibleControls().find((c) => (c.key || c.id) === inner);
+            if (match) {
+                return 'control';
+            }
+            return 'custom';
+        }
+        const plainMatch = this.compatibleControls().find((c) => (c.key || c.id) === val);
+        if (plainMatch) {
+            return 'control';
+        }
+        if (!val) {
+            // Smart default: numeric or flag parameters default to 'fixed' (Enter Value)
+            const name = this.param().name.toLowerCase();
+            if (this.param().dataType === 'number' ||
+                name.startsWith('int') ||
+                name.includes('flag') ||
+                name.includes('type') ||
+                name.includes('only')) {
+                return 'fixed';
+            }
+            // If there are compatible form fields on canvas, default to control, otherwise fixed
+            return this.compatibleControls().length > 0 ? 'control' : 'fixed';
+        }
+        return 'fixed';
+    });
+    isAutoSessionDerived = computed(() => {
+        return this.sessionMatch() !== null && this.activeMode() === 'session';
+    });
+    selectedControlKey = computed(() => {
+        const val = String(this.currentValue() ?? '');
+        if (val.startsWith('{{') && val.endsWith('}}')) {
+            return val.slice(2, -2).trim();
+        }
+        return val;
+    });
+    selectedContextKey = computed(() => {
+        const val = String(this.currentValue() ?? '');
+        if (val.startsWith('{{context.')) {
+            return val;
+        }
+        return '';
+    });
+    booleanFixedValue = computed(() => {
+        const v = this.currentValue();
+        return v === true || v === 'true' || v === 1 || v === '1';
+    });
+    setMode(mode) {
+        this.internalMode.set(mode);
+        if (mode === 'session') {
+            const match = this.sessionMatch();
+            if (match) {
+                this.valueChange.emit(`{{session.${match.sessionKey}}}`);
+            }
+            this.linkedFieldChange.emit({
+                paramName: this.param().name,
+                fieldKey: '',
+                isLinked: false,
             });
+            return;
         }
-        else {
-            this.updateRowClickAction.emit(undefined);
+        if (mode === 'fixed') {
+            const current = this.currentValue();
+            if (current !== undefined && current !== null && current !== '' && !String(current).startsWith('{{')) {
+                this.valueChange.emit(current);
+            }
+            else if (this.param().dataType === 'boolean') {
+                const def = this.param().defaultValue !== undefined ? Boolean(this.param().defaultValue) : true;
+                this.valueChange.emit(def);
+            }
+            else if (this.param().dataType === 'number') {
+                const def = this.param().defaultValue !== undefined ? Number(this.param().defaultValue) : 0;
+                this.valueChange.emit(def);
+            }
+            else {
+                this.valueChange.emit('');
+            }
+            this.linkedFieldChange.emit({
+                paramName: this.param().name,
+                fieldKey: '',
+                isLinked: false,
+            });
         }
     }
-    updateRowActionField(field, value) {
-        const current = this.rowClickAction() ?? { type: 'open-drawer' };
-        const next = { ...current, [field]: value };
-        this.updateRowClickAction.emit(next);
-    }
-    addParameterMapping() {
-        const current = this.rowClickAction() ?? { type: 'open-drawer' };
-        const mapping = { ...(current.parameterMapping ?? {}) };
-        let idx = Object.keys(mapping).length + 1;
-        let key = `param${idx}`;
-        while (key in mapping) {
-            idx++;
-            key = `param${idx}`;
+    onControlSelected(key) {
+        if (key) {
+            const expr = `{{${key}}}`;
+            this.valueChange.emit(expr);
+            this.linkedFieldChange.emit({
+                paramName: this.param().name,
+                fieldKey: key,
+                isLinked: true,
+            });
+        }
+        else {
+            this.valueChange.emit('');
+            this.linkedFieldChange.emit({
+                paramName: this.param().name,
+                fieldKey: '',
+                isLinked: false,
+            });
         }
-        mapping[key] = 'row.id';
-        this.updateRowClickAction.emit({ ...current, parameterMapping: mapping });
     }
-    updateMappingKey(index, newKey) {
-        const pairs = this.parameterMappings();
-        if (!pairs[index])
-            return;
-        const nextMapping = {};
-        pairs.forEach((p, i) => {
-            const k = i === index ? newKey : p.key;
-            if (k.trim()) {
-                nextMapping[k.trim()] = p.value;
-            }
+    onBooleanChanged(checked) {
+        this.valueChange.emit(checked);
+        this.linkedFieldChange.emit({
+            paramName: this.param().name,
+            fieldKey: '',
+            isLinked: false,
         });
-        const current = this.rowClickAction() ?? { type: 'open-drawer' };
-        this.updateRowClickAction.emit({ ...current, parameterMapping: nextMapping });
     }
-    updateMappingValue(index, newValue) {
-        const pairs = this.parameterMappings();
-        if (!pairs[index])
-            return;
-        const nextMapping = {};
-        pairs.forEach((p, i) => {
-            const v = i === index ? newValue : p.value;
-            if (p.key.trim()) {
-                nextMapping[p.key.trim()] = v;
-            }
+    onFixedValueChanged(val) {
+        this.valueChange.emit(val);
+        this.linkedFieldChange.emit({
+            paramName: this.param().name,
+            fieldKey: '',
+            isLinked: false,
         });
-        const current = this.rowClickAction() ?? { type: 'open-drawer' };
-        this.updateRowClickAction.emit({ ...current, parameterMapping: nextMapping });
     }
-    removeMapping(index) {
-        const pairs = this.parameterMappings();
-        const nextMapping = {};
-        pairs.forEach((p, i) => {
-            if (i !== index && p.key.trim()) {
-                nextMapping[p.key.trim()] = p.value;
-            }
+    onContextSelected(ctxKey) {
+        this.valueChange.emit(ctxKey);
+        this.linkedFieldChange.emit({
+            paramName: this.param().name,
+            fieldKey: '',
+            isLinked: false,
         });
-        const current = this.rowClickAction() ?? { type: 'open-drawer' };
-        this.updateRowClickAction.emit({ ...current, parameterMapping: nextMapping });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PropertyEditorGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: PropertyEditorGridComponent, isStandalone: true, selector: "rpt-property-editor-grid", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { addGrid: "addGrid", removeGrid: "removeGrid", addColumn: "addColumn", autoDetectColumns: "autoDetectColumns", removeColumn: "removeColumn", updateColumn: "updateColumn", updateOption: "updateOption", updateRowClickAction: "updateRowClickAction" }, ngImport: i0, template: "    @if (!grid()) {\n      <div class=\"empty-grid-card\">\n        <div class=\"empty-grid-icon\">\n          <rpt-icon name=\"table\" [size]=\"28\" />\n        </div>\n        <h4 class=\"empty-grid-title\">No Result Grid Attached</h4>\n        <p class=\"empty-grid-desc\">Attach an interactive Result Data Grid (or UltraGrid) to this report definition to render queries and stored procedure results.</p>\n        <button type=\"button\" class=\"btn-create-grid-action\" (click)=\"addGrid.emit()\">\n          <rpt-icon name=\"plus\" [size]=\"14\" />\n          <span>+ Add Result Grid</span>\n        </button>\n      </div>\n    } @else {\n      <div class=\"props-form\">\n      <div class=\"property-group\">\n        <div class=\"group-header-with-btn\">\n          <span class=\"group-title\">Columns ({{ columns().length }})</span>\n          <div style=\"display: flex; gap: 4px;\">\n            <button\n              type=\"button\"\n              class=\"btn-add-col\"\n              style=\"background: #eff6ff; color: #2563eb; border-color: #bfdbfe;\"\n              (click)=\"autoDetectColumns.emit()\"\n              title=\"Auto-detect all columns from procedure or data table\"\n            >\n              <rpt-icon name=\"refresh\" [size]=\"11\" />\n              <span>Auto-Detect</span>\n            </button>\n            <button type=\"button\" class=\"btn-add-col\" (click)=\"addColumn.emit()\">\n              <rpt-icon name=\"plus\" [size]=\"12\" />\n              <span>Add Column</span>\n            </button>\n          </div>\n        </div>\n\n        <div class=\"columns-editor-list\">\n          @for (col of columns(); track col.field; let idx = $index) {\n            <div class=\"col-edit-card\">\n              <div class=\"col-card-header\">\n                <div class=\"col-header-title-group\">\n                  <span class=\"col-drag-dots\">\u22EE\u22EE</span>\n                  <span class=\"col-idx-badge\">#{{ idx + 1 }}</span>\n                  <input\n                    type=\"text\"\n                    class=\"col-title-input\"\n                    placeholder=\"Column Label\"\n                    [ngModel]=\"col.label\"\n                    (ngModelChange)=\"onUpdateCol(idx, 'label', $event)\"\n                  />\n                </div>\n                <div class=\"col-card-actions\">\n                  <span class=\"col-type-pill\">{{ col.dataType || 'string' }}</span>\n                  <button\n                    type=\"button\"\n                    class=\"col-action-btn btn-delete\"\n                    (click)=\"removeColumn.emit(idx)\"\n                    title=\"Remove Column\"\n                  >\n                    <rpt-icon name=\"trash\" [size]=\"12\" />\n                  </button>\n                </div>\n              </div>\n\n              <div class=\"col-card-body\">\n                <div class=\"col-edit-fields\">\n                  <div class=\"col-field-item\">\n                    <span class=\"mini-label\">Field</span>\n                    <input\n                      type=\"text\"\n                      class=\"col-mini-input\"\n                      placeholder=\"field\"\n                      [ngModel]=\"col.field\"\n                      (ngModelChange)=\"onUpdateCol(idx, 'field', $event)\"\n                    />\n                  </div>\n                  <div class=\"col-field-item\">\n                    <span class=\"mini-label\">Type</span>\n                    <select\n                      class=\"col-mini-select\"\n                      [ngModel]=\"col.dataType || 'string'\"\n                      (ngModelChange)=\"onUpdateCol(idx, 'dataType', $event)\"\n                    >\n                      <option value=\"string\">String</option>\n                      <option value=\"number\">Number</option>\n                      <option value=\"currency\">Currency</option>\n                      <option value=\"date\">Date</option>\n                      <option value=\"boolean\">Boolean</option>\n                    </select>\n                  </div>\n                  <div class=\"col-field-item\">\n                    <span class=\"mini-label\">Format</span>\n                    <input\n                      type=\"text\"\n                      class=\"col-mini-input\"\n                      placeholder=\"e.g. dd/MM/yyyy\"\n                      [ngModel]=\"col.format\"\n                      (ngModelChange)=\"onUpdateCol(idx, 'format', $event)\"\n                    />\n                  </div>\n                  <div class=\"col-field-item\">\n                    <span class=\"mini-label\">Align</span>\n                    <select\n                      class=\"col-mini-select\"\n                      [ngModel]=\"col.align || 'left'\"\n                      (ngModelChange)=\"onUpdateCol(idx, 'align', $event)\"\n                    >\n                      <option value=\"left\">Left</option>\n                      <option value=\"center\">Center</option>\n                      <option value=\"right\">Right</option>\n                    </select>\n                  </div>\n                  <div class=\"col-field-item\">\n                    <span class=\"mini-label\">Aggregate</span>\n                    <select\n                      class=\"col-mini-select\"\n                      [ngModel]=\"col.aggregate || 'none'\"\n                      (ngModelChange)=\"onUpdateCol(idx, 'aggregate', $event === 'none' ? undefined : $event)\"\n                    >\n                      <option value=\"none\">None</option>\n                      <option value=\"sum\">Sum</option>\n                      <option value=\"avg\">Average</option>\n                      <option value=\"count\">Count</option>\n                      <option value=\"min\">Min</option>\n                      <option value=\"max\">Max</option>\n                    </select>\n                  </div>\n                  <div class=\"col-field-item\">\n                    <span class=\"mini-label\">Width</span>\n                    <input\n                      type=\"text\"\n                      class=\"col-mini-input\"\n                      placeholder=\"auto\"\n                      [ngModel]=\"col.width || ''\"\n                      (ngModelChange)=\"onUpdateCol(idx, 'width', $event || undefined)\"\n                    />\n                  </div>\n                </div>\n\n                <div class=\"col-card-footer\">\n                  <label class=\"col-checkbox-toggle\">\n                    <input\n                      type=\"checkbox\"\n                      [ngModel]=\"col.visible !== false\"\n                      (ngModelChange)=\"onUpdateCol(idx, 'visible', $event)\"\n                    />\n                    <span>Visible</span>\n                  </label>\n                  <label class=\"col-checkbox-toggle\">\n                    <input\n                      type=\"checkbox\"\n                      [ngModel]=\"col.checkboxSelection ?? false\"\n                      (ngModelChange)=\"onUpdateCol(idx, 'checkboxSelection', $event)\"\n                    />\n                    <span>Checkbox</span>\n                  </label>\n                </div>\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n\n      <!-- Grid Table Options Group -->\n      <div class=\"property-group\">\n        <div class=\"group-title\">Table Options</div>\n\n        <div class=\"field-row\">\n          <label class=\"checkbox-toggle\">\n            <input\n              type=\"checkbox\"\n              [ngModel]=\"grid()?.options?.sideBar !== false\"\n              (ngModelChange)=\"updateOption.emit({ field: 'sideBar', value: $event })\"\n            />\n            <span>Enable Side Panel (Tool Panels)</span>\n          </label>\n        </div>\n\n        <div class=\"field-row\">\n          <label class=\"checkbox-toggle\">\n            <input\n              type=\"checkbox\"\n              [ngModel]=\"grid()?.options?.globalSearch !== false\"\n              (ngModelChange)=\"updateOption.emit({ field: 'globalSearch', value: $event })\"\n            />\n            <span>Global Search Box</span>\n          </label>\n        </div>\n\n        <div class=\"field-row\">\n          <label class=\"checkbox-toggle\">\n            <input\n              type=\"checkbox\"\n              [ngModel]=\"grid()?.options?.statusBar !== false\"\n              (ngModelChange)=\"updateOption.emit({ field: 'statusBar', value: $event })\"\n            />\n            <span>Status Bar</span>\n          </label>\n        </div>\n\n        <div class=\"field-row\">\n          <label class=\"checkbox-toggle\">\n            <input\n              type=\"checkbox\"\n              [ngModel]=\"grid()?.options?.pagination ?? true\"\n              (ngModelChange)=\"updateOption.emit({ field: 'pagination', value: $event })\"\n            />\n            <span>Enable Pagination</span>\n          </label>\n        </div>\n\n        <div class=\"field-row\">\n          <label class=\"checkbox-toggle\">\n            <input\n              type=\"checkbox\"\n              [ngModel]=\"grid()?.options?.selectable ?? false\"\n              (ngModelChange)=\"updateOption.emit({ field: 'selectable', value: $event })\"\n            />\n            <span>Row Selection</span>\n          </label>\n        </div>\n\n        @if (grid()?.options?.selectable) {\n          <div class=\"field-row\">\n            <label class=\"field-label\">Selection Mode</label>\n            <select\n              class=\"field-input\"\n              [ngModel]=\"grid()?.options?.selectionMode ?? 'multiple'\"\n              (ngModelChange)=\"updateOption.emit({ field: 'selectionMode', value: $event })\"\n            >\n              <option value=\"multiple\">Multiple Rows</option>\n              <option value=\"single\">Single Row</option>\n            </select>\n          </div>\n\n          <div class=\"field-row\">\n            <label class=\"checkbox-toggle\">\n              <input\n                type=\"checkbox\"\n                [ngModel]=\"grid()?.options?.checkboxSelection ?? true\"\n                (ngModelChange)=\"updateOption.emit({ field: 'checkboxSelection', value: $event })\"\n              />\n              <span>Checkbox Selection</span>\n            </label>\n          </div>\n\n          @if ((grid()?.options?.selectionMode ?? 'multiple') === 'multiple') {\n            <div class=\"field-row\">\n              <label class=\"checkbox-toggle\">\n                <input\n                  type=\"checkbox\"\n                  [ngModel]=\"grid()?.options?.headerCheckboxSelection ?? true\"\n                  (ngModelChange)=\"updateOption.emit({ field: 'headerCheckboxSelection', value: $event })\"\n                />\n                <span>Header Select All Checkbox</span>\n              </label>\n            </div>\n          }\n        }\n\n        <div class=\"field-row\">\n          <label class=\"checkbox-toggle\">\n            <input\n              type=\"checkbox\"\n              [ngModel]=\"grid()?.options?.allowColumnReorder ?? true\"\n              (ngModelChange)=\"updateOption.emit({ field: 'allowColumnReorder', value: $event })\"\n            />\n            <span>Allow Column Reorder</span>\n          </label>\n        </div>\n\n        <div class=\"field-row\">\n          <label class=\"checkbox-toggle\">\n            <input\n              type=\"checkbox\"\n              [ngModel]=\"grid()?.options?.allowExport ?? true\"\n              (ngModelChange)=\"updateOption.emit({ field: 'allowExport', value: $event })\"\n            />\n            <span>Allow Export</span>\n          </label>\n        </div>\n\n        <div class=\"field-row\">\n          <label class=\"field-label\">Page Size</label>\n          <input\n            type=\"number\"\n            class=\"field-input\"\n            min=\"5\"\n            max=\"100\"\n            [ngModel]=\"grid()?.options?.pageSize ?? 10\"\n            (ngModelChange)=\"updateOption.emit({ field: 'pageSize', value: +$event })\"\n          />\n        </div>\n\n        <div class=\"field-row\">\n          <label class=\"checkbox-toggle\">\n            <input\n              type=\"checkbox\"\n              [ngModel]=\"grid()?.options?.showRowNumbers ?? true\"\n              (ngModelChange)=\"updateOption.emit({ field: 'showRowNumbers', value: $event })\"\n            />\n            <span>Show Row Numbers</span>\n          </label>\n        </div>\n\n        <div class=\"field-row\">\n          <label class=\"checkbox-toggle\">\n            <input\n              type=\"checkbox\"\n              [ngModel]=\"grid()?.options?.showFooter ?? true\"\n              (ngModelChange)=\"updateOption.emit({ field: 'showFooter', value: $event })\"\n            />\n            <span>Show Footer Totals</span>\n          </label>\n        </div>\n      </div>\n\n      <!-- Row Click & Drill-Down Action Group -->\n      <div class=\"property-group\">\n        <div class=\"group-title\">Row Click & Drill-Down</div>\n\n        <div class=\"field-row\">\n          <label class=\"checkbox-toggle\">\n            <input\n              type=\"checkbox\"\n              [ngModel]=\"hasRowClickAction()\"\n              (ngModelChange)=\"toggleRowClickAction($event)\"\n            />\n            <span>Enable Row Click Action</span>\n          </label>\n        </div>\n\n        @if (hasRowClickAction()) {\n          <div class=\"field-row\">\n            <label class=\"field-label\">Action Type</label>\n            <select\n              class=\"field-input field-select\"\n              [ngModel]=\"rowClickAction()?.type || 'open-drawer'\"\n              (ngModelChange)=\"updateRowActionField('type', $event)\"\n            >\n              <option value=\"open-drawer\">Slide-Over Detail Drawer</option>\n              <option value=\"drilldown-report\">Drill-Down Report (Host Event)</option>\n              <option value=\"navigate\">Navigate to URL</option>\n              <option value=\"emit-custom\">Emit Custom Action</option>\n            </select>\n          </div>\n\n          @if (rowClickAction()?.type === 'open-drawer' || rowClickAction()?.type === 'drilldown-report') {\n            <div class=\"field-row\">\n              <label class=\"field-label\">Target Report ID</label>\n              <input\n                type=\"text\"\n                class=\"field-input\"\n                placeholder=\"e.g. order-details\"\n                [ngModel]=\"rowClickAction()?.targetReportId || ''\"\n                (ngModelChange)=\"updateRowActionField('targetReportId', $event)\"\n              />\n            </div>\n\n            <div class=\"field-row\">\n              <label class=\"field-label\">Drawer Title</label>\n              <input\n                type=\"text\"\n                class=\"field-input\"\n                placeholder=\"e.g. Order Details\"\n                [ngModel]=\"rowClickAction()?.drawerTitle || ''\"\n                (ngModelChange)=\"updateRowActionField('drawerTitle', $event)\"\n              />\n            </div>\n\n            <div class=\"field-row\">\n              <label class=\"field-label\">Drawer Width</label>\n              <input\n                type=\"text\"\n                class=\"field-input\"\n                placeholder=\"e.g. 760px, 80%, 900px\"\n                [ngModel]=\"rowClickAction()?.drawerWidth || '760px'\"\n                (ngModelChange)=\"updateRowActionField('drawerWidth', $event)\"\n              />\n            </div>\n          }\n\n          @if (rowClickAction()?.type === 'navigate') {\n            <div class=\"field-row\">\n              <label class=\"field-label\">Target URL</label>\n              <input\n                type=\"text\"\n                class=\"field-input\"\n                [placeholder]=\"'/orders/{{row.orderId}} or https://...'\"\n                [ngModel]=\"rowClickAction()?.targetUrl || ''\"\n                (ngModelChange)=\"updateRowActionField('targetUrl', $event)\"\n              />\n            </div>\n            <div class=\"field-row\">\n              <label class=\"checkbox-toggle\">\n                <input\n                  type=\"checkbox\"\n                  [ngModel]=\"rowClickAction()?.openNewTab ?? false\"\n                  (ngModelChange)=\"updateRowActionField('openNewTab', $event)\"\n                />\n                <span>Open in New Tab</span>\n              </label>\n            </div>\n          }\n\n          @if (rowClickAction()?.type === 'emit-custom') {\n            <div class=\"field-row\">\n              <label class=\"field-label\">Custom Action Name</label>\n              <input\n                type=\"text\"\n                class=\"field-input\"\n                placeholder=\"e.g. view-audit-trail\"\n                [ngModel]=\"rowClickAction()?.customActionName || ''\"\n                (ngModelChange)=\"updateRowActionField('customActionName', $event)\"\n              />\n            </div>\n          }\n\n          <div class=\"field-row\">\n            <div class=\"field-label-row\">\n              <label class=\"field-label\">Parameter Mapping</label>\n              <button\n                type=\"button\"\n                class=\"btn-add-mapping\"\n                (click)=\"addParameterMapping()\"\n              >\n                + Add Mapping\n              </button>\n            </div>\n\n            @for (mapping of parameterMappings(); track mapping.key; let mIdx = $index) {\n              <div class=\"mapping-pair-row\">\n                <input\n                  type=\"text\"\n                  class=\"col-mini-input\"\n                  style=\"flex: 1;\"\n                  placeholder=\"Target (e.g. customerId)\"\n                  [ngModel]=\"mapping.key\"\n                  (ngModelChange)=\"updateMappingKey(mIdx, $event)\"\n                />\n                <span style=\"font-size: 0.75rem; color: #94a3b8;\">\u2190</span>\n                <input\n                  type=\"text\"\n                  class=\"col-mini-input\"\n                  style=\"flex: 1;\"\n                  placeholder=\"Source (e.g. row.id)\"\n                  [ngModel]=\"mapping.value\"\n                  (ngModelChange)=\"updateMappingValue(mIdx, $event)\"\n                />\n                <button\n                  type=\"button\"\n                  class=\"col-action-btn btn-delete\"\n                  (click)=\"removeMapping(mIdx)\"\n                  title=\"Remove mapping\"\n                >\n                  <rpt-icon name=\"trash\" [size]=\"11\" />\n                </button>\n              </div>\n            }\n          </div>\n        }\n      </div>\n\n      <!-- Remove Grid Action -->\n      <div class=\"grid-danger-zone\">\n        <button type=\"button\" class=\"btn-remove-grid-action\" (click)=\"removeGrid.emit()\">\n          <rpt-icon name=\"trash\" [size]=\"13\" />\n          <span>Remove Grid from Report</span>\n        </button>\n      </div>\n    </div>\n    }", styles: [".property-group{display:flex;flex-direction:column;gap:12px}.group-title{font-size:.7rem;font-weight:700;color:var(--rpt-color-text-muted, #64748b);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--rpt-color-border, #e2e8f0);padding-bottom:4px}.field-row{display:flex;flex-direction:column;gap:4px}.field-label-row{display:flex;align-items:center;justify-content:space-between}.field-badge-val{font-size:.65rem;font-weight:600;color:var(--rpt-color-primary, #2563eb);background:#eff6ff;border:1px solid #bfdbfe;padding:1px 6px;border-radius:9999px}.field-label{font-size:.7rem;font-weight:600;color:var(--rpt-color-text, #0f172a)}.field-input,.field-select,.field-textarea{width:100%;box-sizing:border-box;border:1px solid var(--rpt-color-border, #cbd5e1);border-radius:var(--rpt-border-radius-sm, 4px);padding:6px 10px;font-size:var(--rpt-font-size-sm, .75rem);color:var(--rpt-color-text, #0f172a);background:#fff;outline:none;transition:all var(--rpt-transition-speed, .15s) ease}.field-select{appearance:none;-webkit-appearance:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right 10px center;background-size:13px 13px;padding-right:28px;cursor:pointer}.field-input:focus,.field-select:focus,.field-textarea:focus{border-color:var(--rpt-color-primary, #2563eb);box-shadow:var(--rpt-box-shadow-focus, 0 0 0 3px rgba(37, 99, 235, .25))}.checkbox-toggle{display:inline-flex;align-items:center;gap:8px;font-size:.75rem;font-weight:500;color:var(--rpt-color-text, #0f172a);cursor:pointer}.preset-pill-group{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}.preset-pill{background:#f1f5f9;border:1px solid #e2e8f0;border-radius:4px;padding:2px 8px;font-size:.65rem;font-weight:600;color:#475569;cursor:pointer;transition:all .12s ease}.preset-pill:hover{background:#e2e8f0;color:#0f172a;border-color:#cbd5e1}.preset-pill-active{background:var(--rpt-color-primary, #2563eb)!important;color:#fff!important;border-color:var(--rpt-color-primary, #2563eb)!important}.preset-pill-reset{color:var(--rpt-color-primary, #2563eb);background:#eff6ff;border-color:#bfdbfe}.preset-pill-reset:hover{background:#dbeafe;color:#1d4ed8;border-color:#93c5fd}\n", ".empty-grid-card{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 16px;text-align:center;border:2px dashed #cbd5e1;border-radius:8px;background:#fff;margin:10px 0}.empty-grid-icon{width:48px;height:48px;border-radius:10px;background:#eff6ff;color:#2563eb;display:flex;align-items:center;justify-content:center;margin-bottom:12px}.empty-grid-title{font-size:.95rem;font-weight:700;color:#0f172a;margin:0 0 6px}.empty-grid-desc{font-size:.775rem;color:#64748b;margin:0 0 18px;line-height:1.4;max-width:280px}.btn-create-grid-action{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;background:#2563eb;color:#fff;font-size:.775rem;font-weight:600;border:none;border-radius:6px;cursor:pointer;box-shadow:0 2px 4px #2563eb33;transition:all .15s ease}.btn-create-grid-action:hover{background:#1d4ed8;box-shadow:0 4px 8px #2563eb40}.grid-danger-zone{margin-top:10px;padding-top:16px;border-top:1px dashed #e2e8f0;display:flex;justify-content:center}.btn-remove-grid-action{display:inline-flex;align-items:center;gap:6px;background:#fee2e2;border:1px solid #fecaca;color:#dc2626;font-size:.75rem;font-weight:600;padding:6px 12px;border-radius:6px;cursor:pointer;transition:all .15s ease}.btn-remove-grid-action:hover{background:#fecaca;border-color:#f87171;color:#b91c1c}.props-form{display:flex;flex-direction:column;gap:20px}.group-header-with-btn{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--rpt-color-border, #e2e8f0);padding-bottom:8px;margin-bottom:4px}.btn-add-col{display:inline-flex;align-items:center;gap:5px;background:#eff6ff;border:1px solid #bfdbfe;border-radius:4px;padding:4px 10px;font-size:.725rem;font-weight:600;color:var(--rpt-color-primary, #2563eb);cursor:pointer;transition:all .15s ease}.btn-add-col:hover{background:var(--rpt-color-primary, #2563eb);color:#fff;border-color:var(--rpt-color-primary, #2563eb)}.columns-editor-list{display:flex;flex-direction:column;gap:10px}.col-edit-card{background:#fff;border:1.5px solid var(--rpt-color-border, #cbd5e1);border-radius:var(--rpt-border-radius, 6px);box-shadow:var(--rpt-box-shadow, 0 1px 2px rgba(0, 0, 0, .05));box-sizing:border-box;transition:all var(--rpt-transition-speed, .15s) ease;position:relative;overflow:hidden;display:flex;flex-direction:column}.col-edit-card:hover{border-color:var(--rpt-color-primary, #2563eb);box-shadow:0 4px 6px -1px #2563eb1a}.col-card-header{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:5px 8px;background:var(--rpt-color-surface, #f8fafc);border-bottom:1px solid var(--rpt-color-border, #e2e8f0);min-height:32px;box-sizing:border-box}.col-header-title-group{display:flex;align-items:center;gap:5px;min-width:0;flex:1}.col-drag-dots{color:#94a3b8;font-size:.8rem;cursor:grab;-webkit-user-select:none;user-select:none;line-height:1;padding-left:2px}.col-idx-badge{font-size:.65rem;font-weight:700;color:#64748b;background:#e2e8f0;padding:1px 5px;border-radius:3px;letter-spacing:.02em}.col-title-input{flex:1;border:1px solid transparent;background:transparent;font-size:.75rem;font-weight:600;color:var(--rpt-color-text, #0f172a);padding:2px 6px;border-radius:4px;outline:none;transition:all .15s ease}.col-title-input:hover{border-color:#cbd5e1;background:#fff}.col-title-input:focus{border-color:var(--rpt-color-primary, #2563eb);background:#fff;box-shadow:0 0 0 2px #2563eb26}.col-card-actions{display:flex;align-items:center;gap:4px}.col-type-pill{font-size:.625rem;font-weight:700;color:#1e40af;background:#dbeafe;border:1px solid #bfdbfe;padding:1px 5px;border-radius:3px;text-transform:uppercase;letter-spacing:.04em}.col-action-btn{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;color:var(--rpt-color-text-muted, #64748b);cursor:pointer;padding:3px;border-radius:4px;transition:all .15s ease}.col-action-btn.btn-delete:hover{color:var(--rpt-color-danger, #ef4444);background:#fee2e2}.col-card-body{padding:8px 10px;display:flex;flex-direction:column;gap:6px;background:#fff}.col-edit-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 8px}.col-field-item{display:flex;flex-direction:column;gap:2px;min-width:0}.mini-label{font-size:.625rem;font-weight:600;color:#64748b;letter-spacing:.02em}.col-mini-input,.col-mini-select{width:100%;box-sizing:border-box;border:1px solid var(--rpt-color-border, #cbd5e1);border-radius:3px;padding:3px 5px;font-size:.7rem;color:var(--rpt-color-text, #0f172a);background:#fff;outline:none;transition:all .12s ease}.col-mini-select{appearance:none;-webkit-appearance:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right 4px center;background-size:10px 10px;padding-right:16px;cursor:pointer}.col-mini-input:focus,.col-mini-select:focus{border-color:var(--rpt-color-primary, #2563eb);box-shadow:0 0 0 2px #2563eb26}.col-card-footer{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding-top:4px;border-top:1px dashed #e2e8f0;margin-top:2px}.col-checkbox-toggle{display:inline-flex;align-items:center;gap:5px;font-size:.675rem;font-weight:500;color:#475569;cursor:pointer;-webkit-user-select:none;user-select:none}.btn-add-mapping{display:inline-flex;align-items:center;background:#eff6ff;border:1px solid #bfdbfe;color:#2563eb;font-size:.65rem;font-weight:600;padding:2px 6px;border-radius:4px;cursor:pointer;transition:all .12s ease}.btn-add-mapping:hover{background:#dbeafe}.mapping-pair-row{display:flex;align-items:center;gap:6px;margin-top:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: RptIconComponent, selector: "rpt-icon", inputs: ["name", "size", "color", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PropertyEditorGridComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'rpt-property-editor-grid', standalone: true, imports: [CommonModule, FormsModule, RptIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "    @if (!grid()) {\n      <div class=\"empty-grid-card\">\n        <div class=\"empty-grid-icon\">\n          <rpt-icon name=\"table\" [size]=\"28\" />\n        </div>\n        <h4 class=\"empty-grid-title\">No Result Grid Attached</h4>\n        <p class=\"empty-grid-desc\">Attach an interactive Result Data Grid (or UltraGrid) to this report definition to render queries and stored procedure results.</p>\n        <button type=\"button\" class=\"btn-create-grid-action\" (click)=\"addGrid.emit()\">\n          <rpt-icon name=\"plus\" [size]=\"14\" />\n          <span>+ Add Result Grid</span>\n        </button>\n      </div>\n    } @else {\n      <div class=\"props-form\">\n      <div class=\"property-group\">\n        <div class=\"group-header-with-btn\">\n          <span class=\"group-title\">Columns ({{ columns().length }})</span>\n          <div style=\"display: flex; gap: 4px;\">\n            <button\n              type=\"button\"\n              class=\"btn-add-col\"\n              style=\"background: #eff6ff; color: #2563eb; border-color: #bfdbfe;\"\n              (click)=\"autoDetectColumns.emit()\"\n              title=\"Auto-detect all columns from procedure or data table\"\n            >\n              <rpt-icon name=\"refresh\" [size]=\"11\" />\n              <span>Auto-Detect</span>\n            </button>\n            <button type=\"button\" class=\"btn-add-col\" (click)=\"addColumn.emit()\">\n              <rpt-icon name=\"plus\" [size]=\"12\" />\n              <span>Add Column</span>\n            </button>\n          </div>\n        </div>\n\n        <div class=\"columns-editor-list\">\n          @for (col of columns(); track col.field; let idx = $index) {\n            <div class=\"col-edit-card\">\n              <div class=\"col-card-header\">\n                <div class=\"col-header-title-group\">\n                  <span class=\"col-drag-dots\">\u22EE\u22EE</span>\n                  <span class=\"col-idx-badge\">#{{ idx + 1 }}</span>\n                  <input\n                    type=\"text\"\n                    class=\"col-title-input\"\n                    placeholder=\"Column Label\"\n                    [ngModel]=\"col.label\"\n                    (ngModelChange)=\"onUpdateCol(idx, 'label', $event)\"\n                  />\n                </div>\n                <div class=\"col-card-actions\">\n                  <span class=\"col-type-pill\">{{ col.dataType || 'string' }}</span>\n                  <button\n                    type=\"button\"\n                    class=\"col-action-btn btn-delete\"\n                    (click)=\"removeColumn.emit(idx)\"\n                    title=\"Remove Column\"\n                  >\n                    <rpt-icon name=\"trash\" [size]=\"12\" />\n                  </button>\n                </div>\n              </div>\n\n              <div class=\"col-card-body\">\n                <div class=\"col-edit-fields\">\n                  <div class=\"col-field-item\">\n                    <span class=\"mini-label\">Field</span>\n                    <input\n                      type=\"text\"\n                      class=\"col-mini-input\"\n                      placeholder=\"field\"\n                      [ngModel]=\"col.field\"\n                      (ngModelChange)=\"onUpdateCol(idx, 'field', $event)\"\n                    />\n                  </div>\n                  <div class=\"col-field-item\">\n                    <span class=\"mini-label\">Type</span>\n                    <select\n                      class=\"col-mini-select\"\n                      [ngModel]=\"col.dataType || 'string'\"\n                      (ngModelChange)=\"onUpdateCol(idx, 'dataType', $event)\"\n                    >\n                      <option value=\"string\">String</option>\n                      <option value=\"number\">Number</option>\n                      <option value=\"currency\">Currency</option>\n                      <option value=\"date\">Date</option>\n                      <option value=\"boolean\">Boolean</option>\n                    </select>\n                  </div>\n                  <div class=\"col-field-item\">\n                    <span class=\"mini-label\">Format</span>\n                    <input\n                      type=\"text\"\n                      class=\"col-mini-input\"\n                      placeholder=\"e.g. dd/MM/yyyy\"\n                      [ngModel]=\"col.format\"\n                      (ngModelChange)=\"onUpdateCol(idx, 'format', $event)\"\n                    />\n                  </div>\n                  <div class=\"col-field-item\">\n                    <span class=\"mini-label\">Align</span>\n                    <select\n                      class=\"col-mini-select\"\n                      [ngModel]=\"col.align || 'left'\"\n                      (ngModelChange)=\"onUpdateCol(idx, 'align', $event)\"\n                    >\n                      <option value=\"left\">Left</option>\n                      <option value=\"center\">Center</option>\n                      <option value=\"right\">Right</option>\n                    </select>\n                  </div>\n                  <div class=\"col-field-item\">\n                    <span class=\"mini-label\">Aggregate</span>\n                    <select\n                      class=\"col-mini-select\"\n                      [ngModel]=\"col.aggregate || 'none'\"\n                      (ngModelChange)=\"onUpdateCol(idx, 'aggregate', $event === 'none' ? undefined : $event)\"\n                    >\n                      <option value=\"none\">None</option>\n                      <option value=\"sum\">Sum</option>\n                      <option value=\"avg\">Average</option>\n                      <option value=\"count\">Count</option>\n                      <option value=\"min\">Min</option>\n                      <option value=\"max\">Max</option>\n                    </select>\n                  </div>\n                  <div class=\"col-field-item\">\n                    <span class=\"mini-label\">Width</span>\n                    <input\n                      type=\"text\"\n                      class=\"col-mini-input\"\n                      placeholder=\"auto\"\n                      [ngModel]=\"col.width || ''\"\n                      (ngModelChange)=\"onUpdateCol(idx, 'width', $event || undefined)\"\n                    />\n                  </div>\n                </div>\n\n                <div class=\"col-card-footer\">\n                  <label class=\"col-checkbox-toggle\">\n                    <input\n                      type=\"checkbox\"\n                      [ngModel]=\"col.visible !== false\"\n                      (ngModelChange)=\"onUpdateCol(idx, 'visible', $event)\"\n                    />\n                    <span>Visible</span>\n                  </label>\n                  <label class=\"col-checkbox-toggle\">\n                    <input\n                      type=\"checkbox\"\n                      [ngModel]=\"col.checkboxSelection ?? false\"\n                      (ngModelChange)=\"onUpdateCol(idx, 'checkboxSelection', $event)\"\n                    />\n                    <span>Checkbox</span>\n                  </label>\n                </div>\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n\n      <!-- Grid Table Options Group -->\n      <div class=\"property-group\">\n        <div class=\"group-title\">Table Options</div>\n\n        <div class=\"field-row\">\n          <label class=\"checkbox-toggle\">\n            <input\n              type=\"checkbox\"\n              [ngModel]=\"grid()?.options?.sideBar !== false\"\n              (ngModelChange)=\"updateOption.emit({ field: 'sideBar', value: $event })\"\n            />\n            <span>Enable Side Panel (Tool Panels)</span>\n          </label>\n        </div>\n\n        <div class=\"field-row\">\n          <label class=\"checkbox-toggle\">\n            <input\n              type=\"checkbox\"\n              [ngModel]=\"grid()?.options?.globalSearch !== false\"\n              (ngModelChange)=\"updateOption.emit({ field: 'globalSearch', value: $event })\"\n            />\n            <span>Global Search Box</span>\n          </label>\n        </div>\n\n        <div class=\"field-row\">\n          <label class=\"checkbox-toggle\">\n            <input\n              type=\"checkbox\"\n              [ngModel]=\"grid()?.options?.statusBar !== false\"\n              (ngModelChange)=\"updateOption.emit({ field: 'statusBar', value: $event })\"\n            />\n            <span>Status Bar</span>\n          </label>\n        </div>\n\n        <div class=\"field-row\">\n          <label class=\"checkbox-toggle\">\n            <input\n              type=\"checkbox\"\n              [ngModel]=\"grid()?.options?.pagination ?? true\"\n              (ngModelChange)=\"updateOption.emit({ field: 'pagination', value: $event })\"\n            />\n            <span>Enable Pagination</span>\n          </label>\n        </div>\n\n        <div class=\"field-row\">\n          <label class=\"checkbox-toggle\">\n            <input\n              type=\"checkbox\"\n              [ngModel]=\"grid()?.options?.selectable ?? false\"\n              (ngModelChange)=\"updateOption.emit({ field: 'selectable', value: $event })\"\n            />\n            <span>Row Selection</span>\n          </label>\n        </div>\n\n        @if (grid()?.options?.selectable) {\n          <div class=\"field-row\">\n            <label class=\"field-label\">Selection Mode</label>\n            <select\n              class=\"field-input\"\n              [ngModel]=\"grid()?.options?.selectionMode ?? 'multiple'\"\n              (ngModelChange)=\"updateOption.emit({ field: 'selectionMode', value: $event })\"\n            >\n              <option value=\"multiple\">Multiple Rows</option>\n              <option value=\"single\">Single Row</option>\n            </select>\n          </div>\n\n          <div class=\"field-row\">\n            <label class=\"checkbox-toggle\">\n              <input\n                type=\"checkbox\"\n                [ngModel]=\"grid()?.options?.checkboxSelection ?? true\"\n                (ngModelChange)=\"updateOption.emit({ field: 'checkboxSelection', value: $event })\"\n              />\n              <span>Checkbox Selection</span>\n            </label>\n          </div>\n\n          @if ((grid()?.options?.selectionMode ?? 'multiple') === 'multiple') {\n            <div class=\"field-row\">\n              <label class=\"checkbox-toggle\">\n                <input\n                  type=\"checkbox\"\n                  [ngModel]=\"grid()?.options?.headerCheckboxSelection ?? true\"\n                  (ngModelChange)=\"updateOption.emit({ field: 'headerCheckboxSelection', value: $event })\"\n                />\n                <span>Header Select All Checkbox</span>\n              </label>\n            </div>\n          }\n        }\n\n        <div class=\"field-row\">\n          <label class=\"checkbox-toggle\">\n            <input\n              type=\"checkbox\"\n              [ngModel]=\"grid()?.options?.allowColumnReorder ?? true\"\n              (ngModelChange)=\"updateOption.emit({ field: 'allowColumnReorder', value: $event })\"\n            />\n            <span>Allow Column Reorder</span>\n          </label>\n        </div>\n\n        <div class=\"field-row\">\n          <label class=\"checkbox-toggle\">\n            <input\n              type=\"checkbox\"\n              [ngModel]=\"grid()?.options?.allowExport ?? true\"\n              (ngModelChange)=\"updateOption.emit({ field: 'allowExport', value: $event })\"\n            />\n            <span>Allow Export</span>\n          </label>\n        </div>\n\n        <div class=\"field-row\">\n          <label class=\"field-label\">Page Size</label>\n          <input\n            type=\"number\"\n            class=\"field-input\"\n            min=\"5\"\n            max=\"100\"\n            [ngModel]=\"grid()?.options?.pageSize ?? 10\"\n            (ngModelChange)=\"updateOption.emit({ field: 'pageSize', value: +$event })\"\n          />\n        </div>\n\n        <div class=\"field-row\">\n          <label class=\"checkbox-toggle\">\n            <input\n              type=\"checkbox\"\n              [ngModel]=\"grid()?.options?.showRowNumbers ?? true\"\n              (ngModelChange)=\"updateOption.emit({ field: 'showRowNumbers', value: $event })\"\n            />\n            <span>Show Row Numbers</span>\n          </label>\n        </div>\n\n        <div class=\"field-row\">\n          <label class=\"checkbox-toggle\">\n            <input\n              type=\"checkbox\"\n              [ngModel]=\"grid()?.options?.showFooter ?? true\"\n              (ngModelChange)=\"updateOption.emit({ field: 'showFooter', value: $event })\"\n            />\n            <span>Show Footer Totals</span>\n          </label>\n        </div>\n      </div>\n\n      <!-- Row Click & Drill-Down Action Group -->\n      <div class=\"property-group\">\n        <div class=\"group-title\">Row Click & Drill-Down</div>\n\n        <div class=\"field-row\">\n          <label class=\"checkbox-toggle\">\n            <input\n              type=\"checkbox\"\n              [ngModel]=\"hasRowClickAction()\"\n              (ngModelChange)=\"toggleRowClickAction($event)\"\n            />\n            <span>Enable Row Click Action</span>\n          </label>\n        </div>\n\n        @if (hasRowClickAction()) {\n          <div class=\"field-row\">\n            <label class=\"field-label\">Action Type</label>\n            <select\n              class=\"field-input field-select\"\n              [ngModel]=\"rowClickAction()?.type || 'open-drawer'\"\n              (ngModelChange)=\"updateRowActionField('type', $event)\"\n            >\n              <option value=\"open-drawer\">Slide-Over Detail Drawer</option>\n              <option value=\"drilldown-report\">Drill-Down Report (Host Event)</option>\n              <option value=\"navigate\">Navigate to URL</option>\n              <option value=\"emit-custom\">Emit Custom Action</option>\n            </select>\n          </div>\n\n          @if (rowClickAction()?.type === 'open-drawer' || rowClickAction()?.type === 'drilldown-report') {\n            <div class=\"field-row\">\n              <label class=\"field-label\">Target Report ID</label>\n              <input\n                type=\"text\"\n                class=\"field-input\"\n                placeholder=\"e.g. order-details\"\n                [ngModel]=\"rowClickAction()?.targetReportId || ''\"\n                (ngModelChange)=\"updateRowActionField('targetReportId', $event)\"\n              />\n            </div>\n\n            <div class=\"field-row\">\n              <label class=\"field-label\">Drawer Title</label>\n              <input\n                type=\"text\"\n                class=\"field-input\"\n                placeholder=\"e.g. Order Details\"\n                [ngModel]=\"rowClickAction()?.drawerTitle || ''\"\n                (ngModelChange)=\"updateRowActionField('drawerTitle', $event)\"\n              />\n            </div>\n\n            <div class=\"field-row\">\n              <label class=\"field-label\">Drawer Width</label>\n              <input\n                type=\"text\"\n                class=\"field-input\"\n                placeholder=\"e.g. 760px, 80%, 900px\"\n                [ngModel]=\"rowClickAction()?.drawerWidth || '760px'\"\n                (ngModelChange)=\"updateRowActionField('drawerWidth', $event)\"\n              />\n            </div>\n          }\n\n          @if (rowClickAction()?.type === 'navigate') {\n            <div class=\"field-row\">\n              <label class=\"field-label\">Target URL</label>\n              <input\n                type=\"text\"\n                class=\"field-input\"\n                [placeholder]=\"'/orders/{{row.orderId}} or https://...'\"\n                [ngModel]=\"rowClickAction()?.targetUrl || ''\"\n                (ngModelChange)=\"updateRowActionField('targetUrl', $event)\"\n              />\n            </div>\n            <div class=\"field-row\">\n              <label class=\"checkbox-toggle\">\n                <input\n                  type=\"checkbox\"\n                  [ngModel]=\"rowClickAction()?.openNewTab ?? false\"\n                  (ngModelChange)=\"updateRowActionField('openNewTab', $event)\"\n                />\n                <span>Open in New Tab</span>\n              </label>\n            </div>\n          }\n\n          @if (rowClickAction()?.type === 'emit-custom') {\n            <div class=\"field-row\">\n              <label class=\"field-label\">Custom Action Name</label>\n              <input\n                type=\"text\"\n                class=\"field-input\"\n                placeholder=\"e.g. view-audit-trail\"\n                [ngModel]=\"rowClickAction()?.customActionName || ''\"\n                (ngModelChange)=\"updateRowActionField('customActionName', $event)\"\n              />\n            </div>\n          }\n\n          <div class=\"field-row\">\n            <div class=\"field-label-row\">\n              <label class=\"field-label\">Parameter Mapping</label>\n              <button\n                type=\"button\"\n                class=\"btn-add-mapping\"\n                (click)=\"addParameterMapping()\"\n              >\n                + Add Mapping\n              </button>\n            </div>\n\n            @for (mapping of parameterMappings(); track mapping.key; let mIdx = $index) {\n              <div class=\"mapping-pair-row\">\n                <input\n                  type=\"text\"\n                  class=\"col-mini-input\"\n                  style=\"flex: 1;\"\n                  placeholder=\"Target (e.g. customerId)\"\n                  [ngModel]=\"mapping.key\"\n                  (ngModelChange)=\"updateMappingKey(mIdx, $event)\"\n                />\n                <span style=\"font-size: 0.75rem; color: #94a3b8;\">\u2190</span>\n                <input\n                  type=\"text\"\n                  class=\"col-mini-input\"\n                  style=\"flex: 1;\"\n                  placeholder=\"Source (e.g. row.id)\"\n                  [ngModel]=\"mapping.value\"\n                  (ngModelChange)=\"updateMappingValue(mIdx, $event)\"\n                />\n                <button\n                  type=\"button\"\n                  class=\"col-action-btn btn-delete\"\n                  (click)=\"removeMapping(mIdx)\"\n                  title=\"Remove mapping\"\n                >\n                  <rpt-icon name=\"trash\" [size]=\"11\" />\n                </button>\n              </div>\n            }\n          </div>\n        }\n      </div>\n\n      <!-- Remove Grid Action -->\n      <div class=\"grid-danger-zone\">\n        <button type=\"button\" class=\"btn-remove-grid-action\" (click)=\"removeGrid.emit()\">\n          <rpt-icon name=\"trash\" [size]=\"13\" />\n          <span>Remove Grid from Report</span>\n        </button>\n      </div>\n    </div>\n    }", styles: [".property-group{display:flex;flex-direction:column;gap:12px}.group-title{font-size:.7rem;font-weight:700;color:var(--rpt-color-text-muted, #64748b);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--rpt-color-border, #e2e8f0);padding-bottom:4px}.field-row{display:flex;flex-direction:column;gap:4px}.field-label-row{display:flex;align-items:center;justify-content:space-between}.field-badge-val{font-size:.65rem;font-weight:600;color:var(--rpt-color-primary, #2563eb);background:#eff6ff;border:1px solid #bfdbfe;padding:1px 6px;border-radius:9999px}.field-label{font-size:.7rem;font-weight:600;color:var(--rpt-color-text, #0f172a)}.field-input,.field-select,.field-textarea{width:100%;box-sizing:border-box;border:1px solid var(--rpt-color-border, #cbd5e1);border-radius:var(--rpt-border-radius-sm, 4px);padding:6px 10px;font-size:var(--rpt-font-size-sm, .75rem);color:var(--rpt-color-text, #0f172a);background:#fff;outline:none;transition:all var(--rpt-transition-speed, .15s) ease}.field-select{appearance:none;-webkit-appearance:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right 10px center;background-size:13px 13px;padding-right:28px;cursor:pointer}.field-input:focus,.field-select:focus,.field-textarea:focus{border-color:var(--rpt-color-primary, #2563eb);box-shadow:var(--rpt-box-shadow-focus, 0 0 0 3px rgba(37, 99, 235, .25))}.checkbox-toggle{display:inline-flex;align-items:center;gap:8px;font-size:.75rem;font-weight:500;color:var(--rpt-color-text, #0f172a);cursor:pointer}.preset-pill-group{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}.preset-pill{background:#f1f5f9;border:1px solid #e2e8f0;border-radius:4px;padding:2px 8px;font-size:.65rem;font-weight:600;color:#475569;cursor:pointer;transition:all .12s ease}.preset-pill:hover{background:#e2e8f0;color:#0f172a;border-color:#cbd5e1}.preset-pill-active{background:var(--rpt-color-primary, #2563eb)!important;color:#fff!important;border-color:var(--rpt-color-primary, #2563eb)!important}.preset-pill-reset{color:var(--rpt-color-primary, #2563eb);background:#eff6ff;border-color:#bfdbfe}.preset-pill-reset:hover{background:#dbeafe;color:#1d4ed8;border-color:#93c5fd}\n", ".empty-grid-card{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 16px;text-align:center;border:2px dashed #cbd5e1;border-radius:8px;background:#fff;margin:10px 0}.empty-grid-icon{width:48px;height:48px;border-radius:10px;background:#eff6ff;color:#2563eb;display:flex;align-items:center;justify-content:center;margin-bottom:12px}.empty-grid-title{font-size:.95rem;font-weight:700;color:#0f172a;margin:0 0 6px}.empty-grid-desc{font-size:.775rem;color:#64748b;margin:0 0 18px;line-height:1.4;max-width:280px}.btn-create-grid-action{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;background:#2563eb;color:#fff;font-size:.775rem;font-weight:600;border:none;border-radius:6px;cursor:pointer;box-shadow:0 2px 4px #2563eb33;transition:all .15s ease}.btn-create-grid-action:hover{background:#1d4ed8;box-shadow:0 4px 8px #2563eb40}.grid-danger-zone{margin-top:10px;padding-top:16px;border-top:1px dashed #e2e8f0;display:flex;justify-content:center}.btn-remove-grid-action{display:inline-flex;align-items:center;gap:6px;background:#fee2e2;border:1px solid #fecaca;color:#dc2626;font-size:.75rem;font-weight:600;padding:6px 12px;border-radius:6px;cursor:pointer;transition:all .15s ease}.btn-remove-grid-action:hover{background:#fecaca;border-color:#f87171;color:#b91c1c}.props-form{display:flex;flex-direction:column;gap:20px}.group-header-with-btn{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--rpt-color-border, #e2e8f0);padding-bottom:8px;margin-bottom:4px}.btn-add-col{display:inline-flex;align-items:center;gap:5px;background:#eff6ff;border:1px solid #bfdbfe;border-radius:4px;padding:4px 10px;font-size:.725rem;font-weight:600;color:var(--rpt-color-primary, #2563eb);cursor:pointer;transition:all .15s ease}.btn-add-col:hover{background:var(--rpt-color-primary, #2563eb);color:#fff;border-color:var(--rpt-color-primary, #2563eb)}.columns-editor-list{display:flex;flex-direction:column;gap:10px}.col-edit-card{background:#fff;border:1.5px solid var(--rpt-color-border, #cbd5e1);border-radius:var(--rpt-border-radius, 6px);box-shadow:var(--rpt-box-shadow, 0 1px 2px rgba(0, 0, 0, .05));box-sizing:border-box;transition:all var(--rpt-transition-speed, .15s) ease;position:relative;overflow:hidden;display:flex;flex-direction:column}.col-edit-card:hover{border-color:var(--rpt-color-primary, #2563eb);box-shadow:0 4px 6px -1px #2563eb1a}.col-card-header{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:5px 8px;background:var(--rpt-color-surface, #f8fafc);border-bottom:1px solid var(--rpt-color-border, #e2e8f0);min-height:32px;box-sizing:border-box}.col-header-title-group{display:flex;align-items:center;gap:5px;min-width:0;flex:1}.col-drag-dots{color:#94a3b8;font-size:.8rem;cursor:grab;-webkit-user-select:none;user-select:none;line-height:1;padding-left:2px}.col-idx-badge{font-size:.65rem;font-weight:700;color:#64748b;background:#e2e8f0;padding:1px 5px;border-radius:3px;letter-spacing:.02em}.col-title-input{flex:1;border:1px solid transparent;background:transparent;font-size:.75rem;font-weight:600;color:var(--rpt-color-text, #0f172a);padding:2px 6px;border-radius:4px;outline:none;transition:all .15s ease}.col-title-input:hover{border-color:#cbd5e1;background:#fff}.col-title-input:focus{border-color:var(--rpt-color-primary, #2563eb);background:#fff;box-shadow:0 0 0 2px #2563eb26}.col-card-actions{display:flex;align-items:center;gap:4px}.col-type-pill{font-size:.625rem;font-weight:700;color:#1e40af;background:#dbeafe;border:1px solid #bfdbfe;padding:1px 5px;border-radius:3px;text-transform:uppercase;letter-spacing:.04em}.col-action-btn{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;color:var(--rpt-color-text-muted, #64748b);cursor:pointer;padding:3px;border-radius:4px;transition:all .15s ease}.col-action-btn.btn-delete:hover{color:var(--rpt-color-danger, #ef4444);background:#fee2e2}.col-card-body{padding:8px 10px;display:flex;flex-direction:column;gap:6px;background:#fff}.col-edit-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 8px}.col-field-item{display:flex;flex-direction:column;gap:2px;min-width:0}.mini-label{font-size:.625rem;font-weight:600;color:#64748b;letter-spacing:.02em}.col-mini-input,.col-mini-select{width:100%;box-sizing:border-box;border:1px solid var(--rpt-color-border, #cbd5e1);border-radius:3px;padding:3px 5px;font-size:.7rem;color:var(--rpt-color-text, #0f172a);background:#fff;outline:none;transition:all .12s ease}.col-mini-select{appearance:none;-webkit-appearance:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right 4px center;background-size:10px 10px;padding-right:16px;cursor:pointer}.col-mini-input:focus,.col-mini-select:focus{border-color:var(--rpt-color-primary, #2563eb);box-shadow:0 0 0 2px #2563eb26}.col-card-footer{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding-top:4px;border-top:1px dashed #e2e8f0;margin-top:2px}.col-checkbox-toggle{display:inline-flex;align-items:center;gap:5px;font-size:.675rem;font-weight:500;color:#475569;cursor:pointer;-webkit-user-select:none;user-select:none}.btn-add-mapping{display:inline-flex;align-items:center;background:#eff6ff;border:1px solid #bfdbfe;color:#2563eb;font-size:.65rem;font-weight:600;padding:2px 6px;border-radius:4px;cursor:pointer;transition:all .12s ease}.btn-add-mapping:hover{background:#dbeafe}.mapping-pair-row{display:flex;align-items:center;gap:6px;margin-top:4px}\n"] }]
-        }] });
-
-class PropertyEditorReportComponent {
-    definition = input.required();
-    updateReport = output();
-    updateLayout = output();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PropertyEditorReportComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: PropertyEditorReportComponent, isStandalone: true, selector: "rpt-property-editor-report", inputs: { definition: { classPropertyName: "definition", publicName: "definition", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { updateReport: "updateReport", updateLayout: "updateLayout" }, ngImport: i0, template: `
-    <div class="props-form">
-      <div class="property-group">
-        <div class="group-title">Report Definition</div>
-
-        <div class="field-row">
-          <label class="field-label">Report Name</label>
-          <input
-            type="text"
-            class="field-input"
-            [ngModel]="definition().name"
-            (ngModelChange)="updateReport.emit({ field: 'name', value: $event })"
-          />
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ParameterBindingEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ParameterBindingEditorComponent, isStandalone: true, selector: "rpt-parameter-binding-editor", inputs: { param: { classPropertyName: "param", publicName: "param", isSignal: true, isRequired: true, transformFunction: null }, currentValue: { classPropertyName: "currentValue", publicName: "currentValue", isSignal: true, isRequired: false, transformFunction: null }, allComponents: { classPropertyName: "allComponents", publicName: "allComponents", isSignal: true, isRequired: false, transformFunction: null }, currentComponentId: { classPropertyName: "currentComponentId", publicName: "currentComponentId", isSignal: true, isRequired: false, transformFunction: null }, isAdvancedMode: { classPropertyName: "isAdvancedMode", publicName: "isAdvancedMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", linkedFieldChange: "linkedFieldChange" }, ngImport: i0, template: `
+    <div class="param-card" [class.session-bound]="isAutoSessionDerived()">
+      <!-- Card Header: Title, Technical Name, Type, and Badges -->
+      <div class="param-header">
+        <div class="param-title-wrap">
+          <span class="param-label" [title]="param().name">{{ friendlyLabel() }}</span>
+          <span class="param-tech-badge">{{ param().name }}</span>
+          <span class="param-type-badge">{{ displayType() }}</span>
+          @if (isAutoSessionDerived()) {
+            <span class="session-auto-badge">Auto Session</span>
+          } @else if (param().required && !hasValue()) {
+            <span class="required-warn-badge">Required</span>
+          }
         </div>
 
-        <div class="field-row">
-          <label class="field-label">Description</label>
-          <textarea
-            class="field-textarea"
-            rows="3"
-            [ngModel]="definition().description"
-            (ngModelChange)="updateReport.emit({ field: 'description', value: $event })"
-          ></textarea>
+        <!-- Binding Mode Segmented Selector -->
+        <div class="binding-mode-tabs" role="tablist">
+          @if (sessionMatch()) {
+            <button
+              type="button"
+              class="mode-btn"
+              [class.active]="activeMode() === 'session'"
+              (click)="setMode('session')"
+              title="Bound to session user/branch context"
+            >
+              <rpt-icon name="user" [size]="11" />
+              <span>Session</span>
+            </button>
+          }
+          <button
+            type="button"
+            class="mode-btn"
+            [class.active]="activeMode() === 'control'"
+            (click)="setMode('control')"
+            title="Link value to a form field on canvas (e.g. Dropdown, DatePicker)"
+          >
+            <rpt-icon name="link" [size]="11" />
+            <span>Form Field</span>
+          </button>
+          <button
+            type="button"
+            class="mode-btn"
+            [class.active]="activeMode() === 'fixed'"
+            (click)="setMode('fixed')"
+            title="Type a manual or fixed value (e.g. 1, 0, 101)"
+          >
+            <rpt-icon name="edit" [size]="11" />
+            <span>Fixed Value</span>
+          </button>
+          <button
+            type="button"
+            class="mode-btn"
+            [class.active]="activeMode() === 'context'"
+            (click)="setMode('context')"
+            title="Use system date presets (e.g. Today, Month Start)"
+          >
+            <rpt-icon name="clock" [size]="11" />
+            <span>Preset</span>
+          </button>
+          @if (isAdvancedMode()) {
+            <button
+              type="button"
+              class="mode-btn"
+              [class.active]="activeMode() === 'custom'"
+              (click)="setMode('custom')"
+              title="Manual template expression"
+            >
+              <rpt-icon name="code" [size]="11" />
+              <span>Expr</span>
+            </button>
+          }
         </div>
       </div>
 
-      <div class="property-group">
-        <div class="group-title">Page Grid Layout</div>
+      <!-- Mode-specific Input Controls -->
+      <div class="param-body">
+        <!-- 0. AUTO SESSION DERIVED -->
+        @if (activeMode() === 'session' && sessionMatch()) {
+          <div class="session-box">
+            <div class="session-box-text">
+              <rpt-icon name="user" [size]="13" class="session-icon" />
+              <span>
+                Derived from <strong>{{ sessionMatch()?.sessionKey }}</strong> ({{ sessionMatch()?.friendlyLabel }})
+              </span>
+            </div>
+            <div class="session-box-actions">
+              <div class="session-val-tag">
+                Current: <strong>{{ sessionMatch()?.value ?? '(none)' }}</strong>
+              </div>
+              <button
+                type="button"
+                class="btn-session-override"
+                (click)="setMode('fixed')"
+                title="Override with manual value"
+              >
+                Override
+              </button>
+            </div>
+          </div>
+        }
 
-        <div class="field-row">
-          <label class="field-label">Total Columns</label>
-          <select
-            class="field-select"
-            [ngModel]="definition().layout.columns"
-            (ngModelChange)="updateLayout.emit({ field: 'columns', value: +$event })"
-          >
-            <option [value]="12">12 Columns (Standard)</option>
-            <option [value]="16">16 Columns (Dense)</option>
-            <option [value]="24">24 Columns (Ultra-wide)</option>
-          </select>
-        </div>
+        <!-- 1. FORM CONTROL LINKER -->
+        @if (activeMode() === 'control') {
+          <div class="linker-row">
+            <rpt-icon name="link" [size]="13" class="linker-icon" />
+            <select
+              class="field-select linker-select"
+              [ngModel]="selectedControlKey()"
+              (ngModelChange)="onControlSelected($event)"
+            >
+              <option value="">-- Choose Form Field on Canvas --</option>
+              @for (field of compatibleControls(); track field.key || field.id) {
+                <option [value]="field.key || field.id">
+                  {{ field.label || field.key }} ({{ field.type }})
+                </option>
+              }
+            </select>
+          </div>
+          @if (!selectedControlKey() && compatibleControls().length === 0) {
+            <div class="empty-hint">No input fields on canvas. Add a dropdown, date picker, or input first.</div>
+          }
+        }
 
-        <div class="field-row">
-          <label class="field-label">Cell Gap (px)</label>
-          <input
-            type="number"
-            class="field-input"
-            min="0"
-            max="64"
-            [ngModel]="definition().layout.gap ?? 16"
-            (ngModelChange)="updateLayout.emit({ field: 'gap', value: +$event })"
-          />
-        </div>
+        <!-- 2. ENTER FIXED VALUE -->
+        @if (activeMode() === 'fixed') {
+          @switch (param().dataType) {
+            @case ('boolean') {
+              <label class="toggle-switch">
+                <input
+                  type="checkbox"
+                  [ngModel]="booleanFixedValue()"
+                  (ngModelChange)="onBooleanChanged($event)"
+                />
+                <span class="toggle-text">{{ booleanFixedValue() ? 'Active / Yes (1)' : 'Inactive / No (0)' }}</span>
+              </label>
+            }
+            @case ('number') {
+              <div class="input-wrap">
+                <input
+                  type="number"
+                  class="field-input"
+                  placeholder="Enter number (e.g. 1, 0, 11)"
+                  [ngModel]="currentValue()"
+                  (ngModelChange)="onFixedValueChanged($event)"
+                />
+              </div>
+            }
+            @case ('date') {
+              <div class="input-wrap">
+                <input
+                  type="date"
+                  class="field-input"
+                  [ngModel]="currentValue()"
+                  (ngModelChange)="onFixedValueChanged($event)"
+                />
+              </div>
+            }
+            @default {
+              <div class="input-wrap">
+                <input
+                  type="text"
+                  class="field-input"
+                  placeholder="Enter value (e.g. 101, text, code)"
+                  [ngModel]="currentValue()"
+                  (ngModelChange)="onFixedValueChanged($event)"
+                />
+              </div>
+            }
+          }
+          @if (paramQuickSuggestions().length > 0) {
+            <div class="quick-chips-row">
+              <span class="chips-label">Quick:</span>
+              @for (chip of paramQuickSuggestions(); track chip.value) {
+                <button
+                  type="button"
+                  class="chip-btn"
+                  [class.active]="isCurrentValue(chip.value)"
+                  (click)="onFixedValueChanged(chip.value)"
+                >
+                  {{ chip.label }}
+                </button>
+              }
+            </div>
+          }
+        }
 
-        <div class="field-row">
-          <label class="field-label">Padding (px)</label>
-          <input
-            type="number"
-            class="field-input"
-            min="0"
-            max="64"
-            [ngModel]="definition().layout.padding ?? 24"
-            (ngModelChange)="updateLayout.emit({ field: 'padding', value: +$event })"
-          />
-        </div>
+        <!-- 3. SYSTEM DATE PRESETS -->
+        @if (activeMode() === 'context') {
+          <div class="input-wrap">
+            <select
+              class="field-select"
+              [ngModel]="selectedContextKey()"
+              (ngModelChange)="onContextSelected($event)"
+            >
+              <option value="">-- Choose Date / Context Preset --</option>
+              <option value="{{ '{{' }}context.today{{ '}}' }}">Today's Date</option>
+              <option value="{{ '{{' }}context.startOfMonth{{ '}}' }}">First Day of Current Month</option>
+              <option value="{{ '{{' }}context.endOfMonth{{ '}}' }}">Last Day of Current Month</option>
+              <option value="{{ '{{' }}context.startOfYear{{ '}}' }}">First Day of Current Year</option>
+              <option value="{{ '{{' }}context.yesterday{{ '}}' }}">Yesterday</option>
+              <option value="{{ '{{' }}context.branchId{{ '}}' }}">Current User Branch</option>
+              <option value="{{ '{{' }}context.userId{{ '}}' }}">Current User ID</option>
+            </select>
+          </div>
+        }
 
-        <div class="field-row">
-          <label class="field-label">Direction</label>
-          <select
-            class="field-select"
-            [ngModel]="definition().layout.direction ?? 'ltr'"
-            (ngModelChange)="updateLayout.emit({ field: 'direction', value: $event })"
-          >
-            <option value="ltr">Left to Right (LTR)</option>
-            <option value="rtl">Right to Left (RTL)</option>
-          </select>
-        </div>
+        <!-- 4. CUSTOM EXPRESSION -->
+        @if (activeMode() === 'custom') {
+          <div class="input-wrap">
+            <input
+              type="text"
+              class="field-input monospace-input"
+              placeholder="e.g. {{ '{{' }}form.dropdownField ?? 1{{ '}}' }}"
+              [ngModel]="currentValue()"
+              (ngModelChange)="onFixedValueChanged($event)"
+            />
+          </div>
+        }
       </div>
+
+      @if (param().description && isAdvancedMode()) {
+        <div class="param-desc">{{ param().description }}</div>
+      }
     </div>
-  `, isInline: true, styles: [".property-group{display:flex;flex-direction:column;gap:12px}.group-title{font-size:.7rem;font-weight:700;color:var(--rpt-color-text-muted, #64748b);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--rpt-color-border, #e2e8f0);padding-bottom:4px}.field-row{display:flex;flex-direction:column;gap:4px}.field-label-row{display:flex;align-items:center;justify-content:space-between}.field-badge-val{font-size:.65rem;font-weight:600;color:var(--rpt-color-primary, #2563eb);background:#eff6ff;border:1px solid #bfdbfe;padding:1px 6px;border-radius:9999px}.field-label{font-size:.7rem;font-weight:600;color:var(--rpt-color-text, #0f172a)}.field-input,.field-select,.field-textarea{width:100%;box-sizing:border-box;border:1px solid var(--rpt-color-border, #cbd5e1);border-radius:var(--rpt-border-radius-sm, 4px);padding:6px 10px;font-size:var(--rpt-font-size-sm, .75rem);color:var(--rpt-color-text, #0f172a);background:#fff;outline:none;transition:all var(--rpt-transition-speed, .15s) ease}.field-select{appearance:none;-webkit-appearance:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right 10px center;background-size:13px 13px;padding-right:28px;cursor:pointer}.field-input:focus,.field-select:focus,.field-textarea:focus{border-color:var(--rpt-color-primary, #2563eb);box-shadow:var(--rpt-box-shadow-focus, 0 0 0 3px rgba(37, 99, 235, .25))}.checkbox-toggle{display:inline-flex;align-items:center;gap:8px;font-size:.75rem;font-weight:500;color:var(--rpt-color-text, #0f172a);cursor:pointer}.preset-pill-group{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}.preset-pill{background:#f1f5f9;border:1px solid #e2e8f0;border-radius:4px;padding:2px 8px;font-size:.65rem;font-weight:600;color:#475569;cursor:pointer;transition:all .12s ease}.preset-pill:hover{background:#e2e8f0;color:#0f172a;border-color:#cbd5e1}.preset-pill-active{background:var(--rpt-color-primary, #2563eb)!important;color:#fff!important;border-color:var(--rpt-color-primary, #2563eb)!important}.preset-pill-reset{color:var(--rpt-color-primary, #2563eb);background:#eff6ff;border-color:#bfdbfe}.preset-pill-reset:hover{background:#dbeafe;color:#1d4ed8;border-color:#93c5fd}\n", ".props-form{display:flex;flex-direction:column;gap:20px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".property-group{display:flex;flex-direction:column;gap:12px}.group-title{font-size:.7rem;font-weight:700;color:var(--rpt-color-text-muted, #64748b);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--rpt-color-border, #e2e8f0);padding-bottom:4px}.field-row{display:flex;flex-direction:column;gap:4px}.field-label-row{display:flex;align-items:center;justify-content:space-between}.field-badge-val{font-size:.65rem;font-weight:600;color:var(--rpt-color-primary, #2563eb);background:#eff6ff;border:1px solid #bfdbfe;padding:1px 6px;border-radius:9999px}.field-label{font-size:.7rem;font-weight:600;color:var(--rpt-color-text, #0f172a)}.field-input,.field-select,.field-textarea{width:100%;box-sizing:border-box;border:1px solid var(--rpt-color-border, #cbd5e1);border-radius:var(--rpt-border-radius-sm, 4px);padding:6px 10px;font-size:var(--rpt-font-size-sm, .75rem);color:var(--rpt-color-text, #0f172a);background:#fff;outline:none;transition:all var(--rpt-transition-speed, .15s) ease}.field-select{appearance:none;-webkit-appearance:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right 10px center;background-size:13px 13px;padding-right:28px;cursor:pointer}.field-input:focus,.field-select:focus,.field-textarea:focus{border-color:var(--rpt-color-primary, #2563eb);box-shadow:var(--rpt-box-shadow-focus, 0 0 0 3px rgba(37, 99, 235, .25))}.checkbox-toggle{display:inline-flex;align-items:center;gap:8px;font-size:.75rem;font-weight:500;color:var(--rpt-color-text, #0f172a);cursor:pointer}.preset-pill-group{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}.preset-pill{background:#f1f5f9;border:1px solid #e2e8f0;border-radius:4px;padding:2px 8px;font-size:.65rem;font-weight:600;color:#475569;cursor:pointer;transition:all .12s ease}.preset-pill:hover{background:#e2e8f0;color:#0f172a;border-color:#cbd5e1}.preset-pill-active{background:var(--rpt-color-primary, #2563eb)!important;color:#fff!important;border-color:var(--rpt-color-primary, #2563eb)!important}.preset-pill-reset{color:var(--rpt-color-primary, #2563eb);background:#eff6ff;border-color:#bfdbfe}.preset-pill-reset:hover{background:#dbeafe;color:#1d4ed8;border-color:#93c5fd}\n", ".param-card{background:#fff;border:1px solid var(--rpt-color-border, #cbd5e1);border-radius:8px;padding:10px 12px;display:flex;flex-direction:column;gap:8px;box-shadow:0 1px 3px #00000008;box-sizing:border-box;width:100%;min-width:0;transition:all .12s ease}.param-card:hover{border-color:#94a3b8}.param-card.session-bound{background:#f0fdf4;border-color:#bbf7d0}.param-header{display:flex;flex-direction:column;gap:6px;width:100%;box-sizing:border-box}.param-title-wrap{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:6px;width:100%}.param-label{font-size:.775rem;font-weight:700;color:#0f172a;white-space:nowrap}.param-tech-badge{font-size:.65rem;font-family:monospace;padding:1px 6px;border-radius:4px;background:#eff6ff;color:#2563eb;border:1px solid #bfdbfe}.param-type-badge{font-size:.65rem;padding:1px 6px;border-radius:4px;background:#f1f5f9;color:#475569;text-transform:capitalize}.session-auto-badge{font-size:.625rem;font-weight:600;padding:1px 6px;border-radius:4px;background:#dcfce7;color:#15803d;border:1px solid #bbf7d0}.required-warn-badge{font-size:.625rem;font-weight:600;padding:1px 6px;border-radius:4px;background:#fef2f2;color:#b91c1c;border:1px solid #fecaca}.binding-mode-tabs{display:flex;flex-wrap:wrap;width:100%;background:#f1f5f9;border-radius:6px;padding:3px;gap:3px;box-sizing:border-box}.mode-btn{flex:1 1 70px;display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:5px 6px;font-size:.69rem;font-weight:500;background:transparent;color:#64748b;border:none;border-radius:4px;cursor:pointer;transition:all .12s ease;white-space:nowrap}.mode-btn:hover{color:#0f172a;background:#fff9}.mode-btn.active{background:#fff;color:var(--rpt-color-primary, #2563eb);font-weight:600;box-shadow:0 1px 2px #00000014}.param-body{display:flex;flex-direction:column;gap:6px;width:100%;min-width:0;box-sizing:border-box}.linker-row{display:flex;align-items:center;gap:8px;width:100%;min-width:0;box-sizing:border-box}.linker-icon{color:#2563eb;flex-shrink:0}.linker-select{flex:1;width:100%;min-width:0;box-sizing:border-box;border:1px solid #bfdbfe;border-radius:6px;background-color:#eff6ff;font-weight:500;color:#1e40af;padding:6px 10px;font-size:.75rem}.quick-chips-row{display:flex;align-items:center;flex-wrap:wrap;gap:4px;margin-top:4px}.chips-label{font-size:.65rem;font-weight:600;color:#64748b;margin-right:2px}.chip-btn{font-size:.65rem;font-weight:500;padding:2px 7px;border-radius:4px;background:#f1f5f9;color:#334155;border:1px solid #cbd5e1;cursor:pointer;transition:all .12s ease}.chip-btn:hover{background:#e2e8f0;color:#0f172a;border-color:#94a3b8}.chip-btn.active{background:#dbeafe;color:#1e40af;border-color:#60a5fa;font-weight:600}.input-wrap{width:100%;min-width:0;box-sizing:border-box}.mode-switch-hint{font-size:.68rem;color:#64748b;margin-top:1px;display:flex;align-items:center;gap:5px;flex-wrap:wrap}.btn-text-switch{background:none;border:none;padding:0;color:#2563eb;font-weight:600;cursor:pointer;text-decoration:underline;font-size:.68rem}.btn-text-switch:hover{color:#1d4ed8}.session-box{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;background:#fff;border:1px solid #bbf7d0;border-radius:6px;padding:6px 10px;gap:6px;width:100%;box-sizing:border-box}.session-box-text{display:flex;align-items:center;gap:6px;font-size:.72rem;color:#166534;min-width:0}.session-icon{color:#16a34a;flex-shrink:0}.session-box-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}.session-val-tag{font-size:.7rem;color:#15803d;background:#dcfce7;padding:2px 8px;border-radius:4px;white-space:nowrap;flex-shrink:0}.btn-session-override{background:#fff;border:1px solid #86efac;color:#15803d;font-size:.65rem;font-weight:600;padding:2px 6px;border-radius:4px;cursor:pointer;transition:all .12s ease}.btn-session-override:hover{background:#dcfce7}.empty-hint{font-size:.68rem;color:#94a3b8;font-style:italic}.toggle-switch{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:.75rem;color:#334155;font-weight:500}.monospace-input{font-family:monospace;font-size:.72rem}.param-desc{font-size:.675rem;color:#64748b;line-height:1.35}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: RptIconComponent, selector: "rpt-icon", inputs: ["name", "size", "color", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PropertyEditorReportComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ParameterBindingEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rpt-property-editor-report', standalone: true, imports: [CommonModule, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <div class="props-form">
-      <div class="property-group">
-        <div class="group-title">Report Definition</div>
-
-        <div class="field-row">
-          <label class="field-label">Report Name</label>
-          <input
-            type="text"
-            class="field-input"
-            [ngModel]="definition().name"
-            (ngModelChange)="updateReport.emit({ field: 'name', value: $event })"
-          />
+            args: [{ selector: 'rpt-parameter-binding-editor', standalone: true, imports: [CommonModule, FormsModule, RptIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="param-card" [class.session-bound]="isAutoSessionDerived()">
+      <!-- Card Header: Title, Technical Name, Type, and Badges -->
+      <div class="param-header">
+        <div class="param-title-wrap">
+          <span class="param-label" [title]="param().name">{{ friendlyLabel() }}</span>
+          <span class="param-tech-badge">{{ param().name }}</span>
+          <span class="param-type-badge">{{ displayType() }}</span>
+          @if (isAutoSessionDerived()) {
+            <span class="session-auto-badge">Auto Session</span>
+          } @else if (param().required && !hasValue()) {
+            <span class="required-warn-badge">Required</span>
+          }
         </div>
 
-        <div class="field-row">
-          <label class="field-label">Description</label>
-          <textarea
-            class="field-textarea"
-            rows="3"
-            [ngModel]="definition().description"
-            (ngModelChange)="updateReport.emit({ field: 'description', value: $event })"
-          ></textarea>
+        <!-- Binding Mode Segmented Selector -->
+        <div class="binding-mode-tabs" role="tablist">
+          @if (sessionMatch()) {
+            <button
+              type="button"
+              class="mode-btn"
+              [class.active]="activeMode() === 'session'"
+              (click)="setMode('session')"
+              title="Bound to session user/branch context"
+            >
+              <rpt-icon name="user" [size]="11" />
+              <span>Session</span>
+            </button>
+          }
+          <button
+            type="button"
+            class="mode-btn"
+            [class.active]="activeMode() === 'control'"
+            (click)="setMode('control')"
+            title="Link value to a form field on canvas (e.g. Dropdown, DatePicker)"
+          >
+            <rpt-icon name="link" [size]="11" />
+            <span>Form Field</span>
+          </button>
+          <button
+            type="button"
+            class="mode-btn"
+            [class.active]="activeMode() === 'fixed'"
+            (click)="setMode('fixed')"
+            title="Type a manual or fixed value (e.g. 1, 0, 101)"
+          >
+            <rpt-icon name="edit" [size]="11" />
+            <span>Fixed Value</span>
+          </button>
+          <button
+            type="button"
+            class="mode-btn"
+            [class.active]="activeMode() === 'context'"
+            (click)="setMode('context')"
+            title="Use system date presets (e.g. Today, Month Start)"
+          >
+            <rpt-icon name="clock" [size]="11" />
+            <span>Preset</span>
+          </button>
+          @if (isAdvancedMode()) {
+            <button
+              type="button"
+              class="mode-btn"
+              [class.active]="activeMode() === 'custom'"
+              (click)="setMode('custom')"
+              title="Manual template expression"
+            >
+              <rpt-icon name="code" [size]="11" />
+              <span>Expr</span>
+            </button>
+          }
         </div>
       </div>
 
-      <div class="property-group">
-        <div class="group-title">Page Grid Layout</div>
+      <!-- Mode-specific Input Controls -->
+      <div class="param-body">
+        <!-- 0. AUTO SESSION DERIVED -->
+        @if (activeMode() === 'session' && sessionMatch()) {
+          <div class="session-box">
+            <div class="session-box-text">
+              <rpt-icon name="user" [size]="13" class="session-icon" />
+              <span>
+                Derived from <strong>{{ sessionMatch()?.sessionKey }}</strong> ({{ sessionMatch()?.friendlyLabel }})
+              </span>
+            </div>
+            <div class="session-box-actions">
+              <div class="session-val-tag">
+                Current: <strong>{{ sessionMatch()?.value ?? '(none)' }}</strong>
+              </div>
+              <button
+                type="button"
+                class="btn-session-override"
+                (click)="setMode('fixed')"
+                title="Override with manual value"
+              >
+                Override
+              </button>
+            </div>
+          </div>
+        }
 
-        <div class="field-row">
-          <label class="field-label">Total Columns</label>
-          <select
-            class="field-select"
-            [ngModel]="definition().layout.columns"
-            (ngModelChange)="updateLayout.emit({ field: 'columns', value: +$event })"
-          >
-            <option [value]="12">12 Columns (Standard)</option>
-            <option [value]="16">16 Columns (Dense)</option>
-            <option [value]="24">24 Columns (Ultra-wide)</option>
-          </select>
-        </div>
+        <!-- 1. FORM CONTROL LINKER -->
+        @if (activeMode() === 'control') {
+          <div class="linker-row">
+            <rpt-icon name="link" [size]="13" class="linker-icon" />
+            <select
+              class="field-select linker-select"
+              [ngModel]="selectedControlKey()"
+              (ngModelChange)="onControlSelected($event)"
+            >
+              <option value="">-- Choose Form Field on Canvas --</option>
+              @for (field of compatibleControls(); track field.key || field.id) {
+                <option [value]="field.key || field.id">
+                  {{ field.label || field.key }} ({{ field.type }})
+                </option>
+              }
+            </select>
+          </div>
+          @if (!selectedControlKey() && compatibleControls().length === 0) {
+            <div class="empty-hint">No input fields on canvas. Add a dropdown, date picker, or input first.</div>
+          }
+        }
 
-        <div class="field-row">
-          <label class="field-label">Cell Gap (px)</label>
-          <input
-            type="number"
-            class="field-input"
-            min="0"
-            max="64"
-            [ngModel]="definition().layout.gap ?? 16"
-            (ngModelChange)="updateLayout.emit({ field: 'gap', value: +$event })"
-          />
-        </div>
+        <!-- 2. ENTER FIXED VALUE -->
+        @if (activeMode() === 'fixed') {
+          @switch (param().dataType) {
+            @case ('boolean') {
+              <label class="toggle-switch">
+                <input
+                  type="checkbox"
+                  [ngModel]="booleanFixedValue()"
+                  (ngModelChange)="onBooleanChanged($event)"
+                />
+                <span class="toggle-text">{{ booleanFixedValue() ? 'Active / Yes (1)' : 'Inactive / No (0)' }}</span>
+              </label>
+            }
+            @case ('number') {
+              <div class="input-wrap">
+                <input
+                  type="number"
+                  class="field-input"
+                  placeholder="Enter number (e.g. 1, 0, 11)"
+                  [ngModel]="currentValue()"
+                  (ngModelChange)="onFixedValueChanged($event)"
+                />
+              </div>
+            }
+            @case ('date') {
+              <div class="input-wrap">
+                <input
+                  type="date"
+                  class="field-input"
+                  [ngModel]="currentValue()"
+                  (ngModelChange)="onFixedValueChanged($event)"
+                />
+              </div>
+            }
+            @default {
+              <div class="input-wrap">
+                <input
+                  type="text"
+                  class="field-input"
+                  placeholder="Enter value (e.g. 101, text, code)"
+                  [ngModel]="currentValue()"
+                  (ngModelChange)="onFixedValueChanged($event)"
+                />
+              </div>
+            }
+          }
+          @if (paramQuickSuggestions().length > 0) {
+            <div class="quick-chips-row">
+              <span class="chips-label">Quick:</span>
+              @for (chip of paramQuickSuggestions(); track chip.value) {
+                <button
+                  type="button"
+                  class="chip-btn"
+                  [class.active]="isCurrentValue(chip.value)"
+                  (click)="onFixedValueChanged(chip.value)"
+                >
+                  {{ chip.label }}
+                </button>
+              }
+            </div>
+          }
+        }
 
-        <div class="field-row">
-          <label class="field-label">Padding (px)</label>
-          <input
-            type="number"
-            class="field-input"
-            min="0"
-            max="64"
-            [ngModel]="definition().layout.padding ?? 24"
-            (ngModelChange)="updateLayout.emit({ field: 'padding', value: +$event })"
-          />
-        </div>
+        <!-- 3. SYSTEM DATE PRESETS -->
+        @if (activeMode() === 'context') {
+          <div class="input-wrap">
+            <select
+              class="field-select"
+              [ngModel]="selectedContextKey()"
+              (ngModelChange)="onContextSelected($event)"
+            >
+              <option value="">-- Choose Date / Context Preset --</option>
+              <option value="{{ '{{' }}context.today{{ '}}' }}">Today's Date</option>
+              <option value="{{ '{{' }}context.startOfMonth{{ '}}' }}">First Day of Current Month</option>
+              <option value="{{ '{{' }}context.endOfMonth{{ '}}' }}">Last Day of Current Month</option>
+              <option value="{{ '{{' }}context.startOfYear{{ '}}' }}">First Day of Current Year</option>
+              <option value="{{ '{{' }}context.yesterday{{ '}}' }}">Yesterday</option>
+              <option value="{{ '{{' }}context.branchId{{ '}}' }}">Current User Branch</option>
+              <option value="{{ '{{' }}context.userId{{ '}}' }}">Current User ID</option>
+            </select>
+          </div>
+        }
 
-        <div class="field-row">
-          <label class="field-label">Direction</label>
-          <select
-            class="field-select"
-            [ngModel]="definition().layout.direction ?? 'ltr'"
-            (ngModelChange)="updateLayout.emit({ field: 'direction', value: $event })"
-          >
-            <option value="ltr">Left to Right (LTR)</option>
-            <option value="rtl">Right to Left (RTL)</option>
-          </select>
-        </div>
+        <!-- 4. CUSTOM EXPRESSION -->
+        @if (activeMode() === 'custom') {
+          <div class="input-wrap">
+            <input
+              type="text"
+              class="field-input monospace-input"
+              placeholder="e.g. {{ '{{' }}form.dropdownField ?? 1{{ '}}' }}"
+              [ngModel]="currentValue()"
+              (ngModelChange)="onFixedValueChanged($event)"
+            />
+          </div>
+        }
       </div>
+
+      @if (param().description && isAdvancedMode()) {
+        <div class="param-desc">{{ param().description }}</div>
+      }
     </div>
-  `, styles: [".property-group{display:flex;flex-direction:column;gap:12px}.group-title{font-size:.7rem;font-weight:700;color:var(--rpt-color-text-muted, #64748b);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--rpt-color-border, #e2e8f0);padding-bottom:4px}.field-row{display:flex;flex-direction:column;gap:4px}.field-label-row{display:flex;align-items:center;justify-content:space-between}.field-badge-val{font-size:.65rem;font-weight:600;color:var(--rpt-color-primary, #2563eb);background:#eff6ff;border:1px solid #bfdbfe;padding:1px 6px;border-radius:9999px}.field-label{font-size:.7rem;font-weight:600;color:var(--rpt-color-text, #0f172a)}.field-input,.field-select,.field-textarea{width:100%;box-sizing:border-box;border:1px solid var(--rpt-color-border, #cbd5e1);border-radius:var(--rpt-border-radius-sm, 4px);padding:6px 10px;font-size:var(--rpt-font-size-sm, .75rem);color:var(--rpt-color-text, #0f172a);background:#fff;outline:none;transition:all var(--rpt-transition-speed, .15s) ease}.field-select{appearance:none;-webkit-appearance:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right 10px center;background-size:13px 13px;padding-right:28px;cursor:pointer}.field-input:focus,.field-select:focus,.field-textarea:focus{border-color:var(--rpt-color-primary, #2563eb);box-shadow:var(--rpt-box-shadow-focus, 0 0 0 3px rgba(37, 99, 235, .25))}.checkbox-toggle{display:inline-flex;align-items:center;gap:8px;font-size:.75rem;font-weight:500;color:var(--rpt-color-text, #0f172a);cursor:pointer}.preset-pill-group{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}.preset-pill{background:#f1f5f9;border:1px solid #e2e8f0;border-radius:4px;padding:2px 8px;font-size:.65rem;font-weight:600;color:#475569;cursor:pointer;transition:all .12s ease}.preset-pill:hover{background:#e2e8f0;color:#0f172a;border-color:#cbd5e1}.preset-pill-active{background:var(--rpt-color-primary, #2563eb)!important;color:#fff!important;border-color:var(--rpt-color-primary, #2563eb)!important}.preset-pill-reset{color:var(--rpt-color-primary, #2563eb);background:#eff6ff;border-color:#bfdbfe}.preset-pill-reset:hover{background:#dbeafe;color:#1d4ed8;border-color:#93c5fd}\n", ".props-form{display:flex;flex-direction:column;gap:20px}\n"] }]
+  `, styles: [".property-group{display:flex;flex-direction:column;gap:12px}.group-title{font-size:.7rem;font-weight:700;color:var(--rpt-color-text-muted, #64748b);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--rpt-color-border, #e2e8f0);padding-bottom:4px}.field-row{display:flex;flex-direction:column;gap:4px}.field-label-row{display:flex;align-items:center;justify-content:space-between}.field-badge-val{font-size:.65rem;font-weight:600;color:var(--rpt-color-primary, #2563eb);background:#eff6ff;border:1px solid #bfdbfe;padding:1px 6px;border-radius:9999px}.field-label{font-size:.7rem;font-weight:600;color:var(--rpt-color-text, #0f172a)}.field-input,.field-select,.field-textarea{width:100%;box-sizing:border-box;border:1px solid var(--rpt-color-border, #cbd5e1);border-radius:var(--rpt-border-radius-sm, 4px);padding:6px 10px;font-size:var(--rpt-font-size-sm, .75rem);color:var(--rpt-color-text, #0f172a);background:#fff;outline:none;transition:all var(--rpt-transition-speed, .15s) ease}.field-select{appearance:none;-webkit-appearance:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right 10px center;background-size:13px 13px;padding-right:28px;cursor:pointer}.field-input:focus,.field-select:focus,.field-textarea:focus{border-color:var(--rpt-color-primary, #2563eb);box-shadow:var(--rpt-box-shadow-focus, 0 0 0 3px rgba(37, 99, 235, .25))}.checkbox-toggle{display:inline-flex;align-items:center;gap:8px;font-size:.75rem;font-weight:500;color:var(--rpt-color-text, #0f172a);cursor:pointer}.preset-pill-group{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}.preset-pill{background:#f1f5f9;border:1px solid #e2e8f0;border-radius:4px;padding:2px 8px;font-size:.65rem;font-weight:600;color:#475569;cursor:pointer;transition:all .12s ease}.preset-pill:hover{background:#e2e8f0;color:#0f172a;border-color:#cbd5e1}.preset-pill-active{background:var(--rpt-color-primary, #2563eb)!important;color:#fff!important;border-color:var(--rpt-color-primary, #2563eb)!important}.preset-pill-reset{color:var(--rpt-color-primary, #2563eb);background:#eff6ff;border-color:#bfdbfe}.preset-pill-reset:hover{background:#dbeafe;color:#1d4ed8;border-color:#93c5fd}\n", ".param-card{background:#fff;border:1px solid var(--rpt-color-border, #cbd5e1);border-radius:8px;padding:10px 12px;display:flex;flex-direction:column;gap:8px;box-shadow:0 1px 3px #00000008;box-sizing:border-box;width:100%;min-width:0;transition:all .12s ease}.param-card:hover{border-color:#94a3b8}.param-card.session-bound{background:#f0fdf4;border-color:#bbf7d0}.param-header{display:flex;flex-direction:column;gap:6px;width:100%;box-sizing:border-box}.param-title-wrap{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:6px;width:100%}.param-label{font-size:.775rem;font-weight:700;color:#0f172a;white-space:nowrap}.param-tech-badge{font-size:.65rem;font-family:monospace;padding:1px 6px;border-radius:4px;background:#eff6ff;color:#2563eb;border:1px solid #bfdbfe}.param-type-badge{font-size:.65rem;padding:1px 6px;border-radius:4px;background:#f1f5f9;color:#475569;text-transform:capitalize}.session-auto-badge{font-size:.625rem;font-weight:600;padding:1px 6px;border-radius:4px;background:#dcfce7;color:#15803d;border:1px solid #bbf7d0}.required-warn-badge{font-size:.625rem;font-weight:600;padding:1px 6px;border-radius:4px;background:#fef2f2;color:#b91c1c;border:1px solid #fecaca}.binding-mode-tabs{display:flex;flex-wrap:wrap;width:100%;background:#f1f5f9;border-radius:6px;padding:3px;gap:3px;box-sizing:border-box}.mode-btn{flex:1 1 70px;display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:5px 6px;font-size:.69rem;font-weight:500;background:transparent;color:#64748b;border:none;border-radius:4px;cursor:pointer;transition:all .12s ease;white-space:nowrap}.mode-btn:hover{color:#0f172a;background:#fff9}.mode-btn.active{background:#fff;color:var(--rpt-color-primary, #2563eb);font-weight:600;box-shadow:0 1px 2px #00000014}.param-body{display:flex;flex-direction:column;gap:6px;width:100%;min-width:0;box-sizing:border-box}.linker-row{display:flex;align-items:center;gap:8px;width:100%;min-width:0;box-sizing:border-box}.linker-icon{color:#2563eb;flex-shrink:0}.linker-select{flex:1;width:100%;min-width:0;box-sizing:border-box;border:1px solid #bfdbfe;border-radius:6px;background-color:#eff6ff;font-weight:500;color:#1e40af;padding:6px 10px;font-size:.75rem}.quick-chips-row{display:flex;align-items:center;flex-wrap:wrap;gap:4px;margin-top:4px}.chips-label{font-size:.65rem;font-weight:600;color:#64748b;margin-right:2px}.chip-btn{font-size:.65rem;font-weight:500;padding:2px 7px;border-radius:4px;background:#f1f5f9;color:#334155;border:1px solid #cbd5e1;cursor:pointer;transition:all .12s ease}.chip-btn:hover{background:#e2e8f0;color:#0f172a;border-color:#94a3b8}.chip-btn.active{background:#dbeafe;color:#1e40af;border-color:#60a5fa;font-weight:600}.input-wrap{width:100%;min-width:0;box-sizing:border-box}.mode-switch-hint{font-size:.68rem;color:#64748b;margin-top:1px;display:flex;align-items:center;gap:5px;flex-wrap:wrap}.btn-text-switch{background:none;border:none;padding:0;color:#2563eb;font-weight:600;cursor:pointer;text-decoration:underline;font-size:.68rem}.btn-text-switch:hover{color:#1d4ed8}.session-box{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;background:#fff;border:1px solid #bbf7d0;border-radius:6px;padding:6px 10px;gap:6px;width:100%;box-sizing:border-box}.session-box-text{display:flex;align-items:center;gap:6px;font-size:.72rem;color:#166534;min-width:0}.session-icon{color:#16a34a;flex-shrink:0}.session-box-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}.session-val-tag{font-size:.7rem;color:#15803d;background:#dcfce7;padding:2px 8px;border-radius:4px;white-space:nowrap;flex-shrink:0}.btn-session-override{background:#fff;border:1px solid #86efac;color:#15803d;font-size:.65rem;font-weight:600;padding:2px 6px;border-radius:4px;cursor:pointer;transition:all .12s ease}.btn-session-override:hover{background:#dcfce7}.empty-hint{font-size:.68rem;color:#94a3b8;font-style:italic}.toggle-switch{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:.75rem;color:#334155;font-weight:500}.monospace-input{font-family:monospace;font-size:.72rem}.param-desc{font-size:.675rem;color:#64748b;line-height:1.35}\n"] }]
         }] });
 
-class ParameterBindingEditorComponent {
-    sessionService = inject(ReportSessionContextService);
-    param = input.required();
-    currentValue = input('');
+class PropertyEditorGridComponent {
+    dataDiscovery = inject(ReportDataDiscoveryService, { optional: true });
+    grid = input();
+    dataSource = input();
+    availableEntities = input([]);
+    procedureParameters = input([]);
     allComponents = input([]);
-    currentComponentId = input('');
-    isAdvancedMode = input(false);
-    valueChange = output();
-    linkedFieldChange = output();
-    internalMode = signal(null);
-    sessionMatch = computed(() => this.sessionService.matchParameter(this.param().name));
-    friendlyLabel = computed(() => {
-        return this.param().friendlyLabel || humanizeIdentifier(this.param().name);
-    });
-    displayType = computed(() => {
-        switch (this.param().dataType) {
-            case 'boolean':
-                return 'Yes / No';
-            case 'number':
-                return 'Number';
-            case 'date':
-                return 'Date';
-            default:
-                return 'Text';
+    isDetecting = input(false);
+    statusMessage = input(null);
+    statusKind = input(null);
+    addGrid = output();
+    removeGrid = output();
+    addColumn = output();
+    autoDetectColumns = output();
+    removeColumn = output();
+    updateColumn = output();
+    updateOption = output();
+    updateRowClickAction = output();
+    setDataSource = output();
+    updateDataSourceParameters = output();
+    entityChanged = output();
+    internalParameters = signal([]);
+    effectiveParameters = computed(() => {
+        const fromParent = this.procedureParameters();
+        if (fromParent && fromParent.length > 0)
+            return fromParent;
+        return this.internalParameters();
+    });
+    selectedSourceType = signal('stored_procedure');
+    constructor() {
+        effect(() => {
+            const entity = this.activeEntityName();
+            const type = this.currentSourceType();
+            if (entity && type === 'stored_procedure' && this.dataDiscovery) {
+                this.dataDiscovery.getParameters(entity, 'dbo').subscribe({
+                    next: (params) => this.internalParameters.set(params || []),
+                    error: () => this.internalParameters.set([]),
+                });
+            }
+            else {
+                this.internalParameters.set([]);
+            }
+        }, { allowSignalWrites: true });
+    }
+    currentSourceType = computed(() => {
+        const ds = this.dataSource();
+        if (ds) {
+            return ds.type === 'table' ? 'table' : 'stored_procedure';
         }
+        return this.selectedSourceType();
     });
-    compatibleControls = computed(() => {
-        return this.allComponents().filter((c) => c.id !== this.currentComponentId());
+    activeEntityName = computed(() => {
+        return this.dataSource()?.name || this.dataSource()?.endpoint || '';
     });
-    hasValue = computed(() => {
-        const v = this.currentValue();
-        return v !== undefined && v !== null && v !== '';
+    availableTables = computed(() => {
+        return this.availableEntities().filter((e) => {
+            const t = (e.type || '').toLowerCase();
+            return t === 'table' || t === 'view';
+        });
     });
-    activeMode = computed(() => {
-        if (this.internalMode() !== null) {
-            return this.internalMode();
-        }
-        const val = String(this.currentValue() ?? '');
-        // If matches session context and has no explicit manual override, default to session
-        if (this.sessionMatch() !== null && (!val || val.startsWith('{{session.'))) {
-            return 'session';
-        }
-        if (!val) {
-            return this.compatibleControls().length > 0 ? 'control' : 'fixed';
-        }
-        if (val.startsWith('{{context.')) {
-            return 'context';
-        }
-        if (val.startsWith('{{session.')) {
-            return 'session';
-        }
-        if (val.startsWith('{{') && val.endsWith('}}')) {
-            const inner = val.slice(2, -2).trim();
-            const match = this.compatibleControls().find((c) => (c.key || c.id) === inner);
-            if (match) {
-                return 'control';
-            }
-            return 'custom';
-        }
-        const plainMatch = this.compatibleControls().find((c) => (c.key || c.id) === val);
-        if (plainMatch) {
-            return 'control';
-        }
-        return 'fixed';
+    availableProcedures = computed(() => {
+        return this.availableEntities().filter((e) => {
+            const t = (e.type || '').toLowerCase();
+            return t === 'stored_procedure' || t === 'procedure' || t.includes('procedure');
+        });
     });
-    isAutoSessionDerived = computed(() => {
-        return this.sessionMatch() !== null && this.activeMode() === 'session';
+    activeEntityList = computed(() => {
+        return this.currentSourceType() === 'table' ? this.availableTables() : this.availableProcedures();
     });
-    selectedControlKey = computed(() => {
-        const val = String(this.currentValue() ?? '');
-        if (val.startsWith('{{') && val.endsWith('}}')) {
-            return val.slice(2, -2).trim();
-        }
-        return val;
+    columns = computed(() => {
+        return this.grid()?.columns ?? [];
     });
-    selectedContextKey = computed(() => {
-        const val = String(this.currentValue() ?? '');
-        if (val.startsWith('{{context.')) {
-            return val;
-        }
-        return '';
+    rowClickAction = computed(() => {
+        return this.grid()?.rowClickAction ?? this.grid()?.options?.rowClickAction;
     });
-    booleanFixedValue = computed(() => {
-        const v = this.currentValue();
-        return v === true || v === 'true' || v === 1 || v === '1';
+    hasRowClickAction = computed(() => {
+        return !!this.rowClickAction();
     });
-    setMode(mode) {
-        this.internalMode.set(mode);
-        if (mode === 'session') {
-            const match = this.sessionMatch();
-            if (match) {
-                this.valueChange.emit(`{{session.${match.sessionKey}}}`);
-            }
-            this.linkedFieldChange.emit({
-                paramName: this.param().name,
-                fieldKey: '',
-                isLinked: false,
-            });
+    parameterMappings = computed(() => {
+        const mapping = this.rowClickAction()?.parameterMapping;
+        if (!mapping)
+            return [];
+        return Object.entries(mapping).map(([key, value]) => ({ key, value }));
+    });
+    onSourceTypeChange(type) {
+        this.selectedSourceType.set(type);
+    }
+    onSelectEntity(entityName) {
+        if (!entityName)
             return;
-        }
-        if (mode === 'fixed') {
-            if (this.param().dataType === 'boolean') {
-                const def = this.param().defaultValue !== undefined ? Boolean(this.param().defaultValue) : true;
-                this.valueChange.emit(def);
-            }
-            else {
-                this.valueChange.emit('');
-            }
-            this.linkedFieldChange.emit({
-                paramName: this.param().name,
-                fieldKey: '',
-                isLinked: false,
+        if (this.currentSourceType() === 'stored_procedure' && this.dataDiscovery) {
+            this.dataDiscovery.getParameters(entityName, 'dbo').subscribe({
+                next: (params) => this.internalParameters.set(params || []),
+                error: () => this.internalParameters.set([]),
             });
         }
+        this.entityChanged.emit({ name: entityName, type: this.currentSourceType() });
     }
-    onControlSelected(key) {
-        if (key) {
-            const expr = `{{${key}}}`;
-            this.valueChange.emit(expr);
-            this.linkedFieldChange.emit({
-                paramName: this.param().name,
-                fieldKey: key,
-                isLinked: true,
-            });
+    getParameterValue(paramName) {
+        const mappings = this.dataSource()?.parameterMappings || {};
+        const cleanName = paramName.replace(/^@/, '');
+        const val = mappings[paramName] ?? mappings[`@${cleanName}`] ?? mappings[cleanName];
+        if (typeof val === 'string' || typeof val === 'number' || typeof val === 'boolean') {
+            return val;
         }
-        else {
-            this.valueChange.emit('');
-            this.linkedFieldChange.emit({
-                paramName: this.param().name,
-                fieldKey: '',
-                isLinked: false,
+        return '';
+    }
+    onParameterChange(paramName, value) {
+        const current = { ...(this.dataSource()?.parameterMappings || {}) };
+        const cleanName = paramName.replace(/^@/, '');
+        current[paramName] = value;
+        current[`@${cleanName}`] = value;
+        current[cleanName] = value;
+        this.updateDataSourceParameters.emit(current);
+    }
+    onUpdateCol(index, field, value) {
+        this.updateColumn.emit({ index, field, value });
+    }
+    toggleRowClickAction(enabled) {
+        if (enabled) {
+            this.updateRowClickAction.emit({
+                type: 'open-drawer',
+                drawerTitle: 'Details',
+                drawerWidth: '760px',
             });
         }
+        else {
+            this.updateRowClickAction.emit(undefined);
+        }
     }
-    onBooleanChanged(checked) {
-        this.valueChange.emit(checked);
-        this.linkedFieldChange.emit({
-            paramName: this.param().name,
-            fieldKey: '',
-            isLinked: false,
+    updateRowActionField(field, value) {
+        const current = this.rowClickAction() ?? { type: 'open-drawer' };
+        const next = { ...current, [field]: value };
+        this.updateRowClickAction.emit(next);
+    }
+    addParameterMapping() {
+        const current = this.rowClickAction() ?? { type: 'open-drawer' };
+        const mapping = { ...(current.parameterMapping ?? {}) };
+        let idx = Object.keys(mapping).length + 1;
+        let key = `param${idx}`;
+        while (key in mapping) {
+            idx++;
+            key = `param${idx}`;
+        }
+        mapping[key] = 'row.id';
+        this.updateRowClickAction.emit({ ...current, parameterMapping: mapping });
+    }
+    updateMappingKey(index, newKey) {
+        const pairs = this.parameterMappings();
+        if (!pairs[index])
+            return;
+        const nextMapping = {};
+        pairs.forEach((p, i) => {
+            const k = i === index ? newKey : p.key;
+            if (k.trim()) {
+                nextMapping[k.trim()] = p.value;
+            }
         });
+        const current = this.rowClickAction() ?? { type: 'open-drawer' };
+        this.updateRowClickAction.emit({ ...current, parameterMapping: nextMapping });
     }
-    onFixedValueChanged(val) {
-        this.valueChange.emit(val);
-        this.linkedFieldChange.emit({
-            paramName: this.param().name,
-            fieldKey: '',
-            isLinked: false,
+    updateMappingValue(index, newValue) {
+        const pairs = this.parameterMappings();
+        if (!pairs[index])
+            return;
+        const nextMapping = {};
+        pairs.forEach((p, i) => {
+            const v = i === index ? newValue : p.value;
+            if (p.key.trim()) {
+                nextMapping[p.key.trim()] = v;
+            }
         });
+        const current = this.rowClickAction() ?? { type: 'open-drawer' };
+        this.updateRowClickAction.emit({ ...current, parameterMapping: nextMapping });
     }
-    onContextSelected(ctxKey) {
-        this.valueChange.emit(ctxKey);
-        this.linkedFieldChange.emit({
-            paramName: this.param().name,
-            fieldKey: '',
-            isLinked: false,
+    removeMapping(index) {
+        const pairs = this.parameterMappings();
+        const nextMapping = {};
+        pairs.forEach((p, i) => {
+            if (i !== index && p.key.trim()) {
+                nextMapping[p.key.trim()] = p.value;
+            }
         });
+        const current = this.rowClickAction() ?? { type: 'open-drawer' };
+        this.updateRowClickAction.emit({ ...current, parameterMapping: nextMapping });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ParameterBindingEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ParameterBindingEditorComponent, isStandalone: true, selector: "rpt-parameter-binding-editor", inputs: { param: { classPropertyName: "param", publicName: "param", isSignal: true, isRequired: true, transformFunction: null }, currentValue: { classPropertyName: "currentValue", publicName: "currentValue", isSignal: true, isRequired: false, transformFunction: null }, allComponents: { classPropertyName: "allComponents", publicName: "allComponents", isSignal: true, isRequired: false, transformFunction: null }, currentComponentId: { classPropertyName: "currentComponentId", publicName: "currentComponentId", isSignal: true, isRequired: false, transformFunction: null }, isAdvancedMode: { classPropertyName: "isAdvancedMode", publicName: "isAdvancedMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", linkedFieldChange: "linkedFieldChange" }, ngImport: i0, template: `
-    <div class="param-card" [class.session-bound]="isAutoSessionDerived()">
-      <div class="param-header">
-        <div class="param-title-wrap">
-          <span class="param-label">{{ friendlyLabel() }}</span>
-          @if (isAdvancedMode()) {
-            <span class="param-tech-badge">{{ param().name }} ({{ param().sqlType }})</span>
-          } @else {
-            <span class="param-type-badge">{{ displayType() }}</span>
-          }
-          @if (isAutoSessionDerived()) {
-            <span class="session-auto-badge">Auto Session</span>
-          } @else if (param().required && !hasValue()) {
-            <span class="required-warn-badge">Required</span>
-          }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PropertyEditorGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: PropertyEditorGridComponent, isStandalone: true, selector: "rpt-property-editor-grid", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, availableEntities: { classPropertyName: "availableEntities", publicName: "availableEntities", isSignal: true, isRequired: false, transformFunction: null }, procedureParameters: { classPropertyName: "procedureParameters", publicName: "procedureParameters", isSignal: true, isRequired: false, transformFunction: null }, allComponents: { classPropertyName: "allComponents", publicName: "allComponents", isSignal: true, isRequired: false, transformFunction: null }, isDetecting: { classPropertyName: "isDetecting", publicName: "isDetecting", isSignal: true, isRequired: false, transformFunction: null }, statusMessage: { classPropertyName: "statusMessage", publicName: "statusMessage", isSignal: true, isRequired: false, transformFunction: null }, statusKind: { classPropertyName: "statusKind", publicName: "statusKind", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { addGrid: "addGrid", removeGrid: "removeGrid", addColumn: "addColumn", autoDetectColumns: "autoDetectColumns", removeColumn: "removeColumn", updateColumn: "updateColumn", updateOption: "updateOption", updateRowClickAction: "updateRowClickAction", setDataSource: "setDataSource", updateDataSourceParameters: "updateDataSourceParameters", entityChanged: "entityChanged" }, ngImport: i0, template: "    @if (!grid()) {\n      <div class=\"empty-grid-card\">\n        <div class=\"empty-grid-icon\">\n          <rpt-icon name=\"table\" [size]=\"28\" />\n        </div>\n        <h4 class=\"empty-grid-title\">No Result Grid Attached</h4>\n        <p class=\"empty-grid-desc\">Attach an interactive Result Data Grid (or UltraGrid) to this report definition to render queries and stored procedure results.</p>\n        <button type=\"button\" class=\"btn-create-grid-action\" (click)=\"addGrid.emit()\">\n          <rpt-icon name=\"plus\" [size]=\"14\" />\n          <span>+ Add Result Grid</span>\n        </button>\n      </div>\n    } @else {\n      <div class=\"props-form\">\n      <!-- 1. Report Data Source & Stored Procedure Configuration -->\n      <div class=\"property-group\">\n        <div class=\"group-header-row\">\n          <div class=\"group-title-wrap\">\n            <span class=\"group-title\">Report Data Source</span>\n            @if (activeEntityName()) {\n              <span class=\"group-badge active-ds-badge\">{{ activeEntityName() }}</span>\n            }\n          </div>\n        </div>\n\n        <!-- Source Type Switcher (Stored Procedure vs Table) -->\n        <div class=\"source-type-switcher\">\n          <button\n            type=\"button\"\n            class=\"source-tab-btn\"\n            [class.active]=\"currentSourceType() === 'stored_procedure'\"\n            (click)=\"onSourceTypeChange('stored_procedure')\"\n          >\n            <rpt-icon name=\"code\" [size]=\"12\" />\n            <span>Stored Procedure</span>\n          </button>\n          <button\n            type=\"button\"\n            class=\"source-tab-btn\"\n            [class.active]=\"currentSourceType() === 'table'\"\n            (click)=\"onSourceTypeChange('table')\"\n          >\n            <rpt-icon name=\"table\" [size]=\"12\" />\n            <span>Table / View</span>\n          </button>\n        </div>\n\n        <!-- Entity Selector Dropdown -->\n        <div class=\"field-row\">\n          <label class=\"field-label\">\n            {{ currentSourceType() === 'stored_procedure' ? 'Stored Procedure' : 'Table / View' }}\n          </label>\n          <select\n            class=\"field-select\"\n            [ngModel]=\"activeEntityName()\"\n            (ngModelChange)=\"onSelectEntity($event)\"\n          >\n            <option value=\"\">-- Choose Data Source --</option>\n            @for (ent of activeEntityList(); track ent.name) {\n              <option [value]=\"ent.name\">\n                {{ ent.friendlyName || ent.name }} ({{ ent.name }})\n              </option>\n            }\n          </select>\n        </div>\n\n        <!-- Stored Procedure Parameter Mappings -->\n        @if (currentSourceType() === 'stored_procedure' && activeEntityName()) {\n          <div class=\"procedure-params-section\">\n            <div class=\"params-section-header\">\n              <div class=\"params-header-left\">\n                <span class=\"params-title\">Procedure Parameters</span>\n                <span class=\"params-count-badge\">{{ effectiveParameters().length }}</span>\n              </div>\n            </div>\n\n            @if (effectiveParameters().length > 0) {\n              <div class=\"param-cards-list\">\n                @for (param of effectiveParameters(); track param.name) {\n                  <rpt-parameter-binding-editor\n                    [param]=\"param\"\n                    [currentValue]=\"getParameterValue(param.name)\"\n                    [allComponents]=\"allComponents()\"\n                    (valueChange)=\"onParameterChange(param.name, $event)\"\n                  />\n                }\n              </div>\n            } @else {\n              <div class=\"empty-params-hint\">\n                <span>No required parameters for this procedure.</span>\n              </div>\n            }\n          </div>\n        }\n      </div>\n\n      <!-- 2. Result Columns Configuration -->\n      <div class=\"property-group\">\n        <div class=\"group-header-row\">\n          <div class=\"group-title-wrap\">\n            <span class=\"group-title\">Columns</span>\n            <span class=\"group-badge\">{{ columns().length }}</span>\n          </div>\n        </div>\n\n        <!-- Dedicated Full-Width Action Buttons (No cramping) -->\n        <div class=\"columns-action-bar\">\n          <button\n            type=\"button\"\n            class=\"btn-col-action btn-auto-detect\"\n            (click)=\"autoDetectColumns.emit()\"\n            [disabled]=\"isDetecting()\"\n            title=\"Auto-detect all columns from procedure or data table\"\n          >\n            <rpt-icon name=\"refresh\" [size]=\"12\" [class.rpt-spin]=\"isDetecting()\" />\n            <span>{{ isDetecting() ? 'Detecting...' : 'Auto-Detect' }}</span>\n          </button>\n          <button\n            type=\"button\"\n            class=\"btn-col-action btn-add-col\"\n            (click)=\"addColumn.emit()\"\n            title=\"Add a new column manually\"\n          >\n            <rpt-icon name=\"plus\" [size]=\"12\" />\n            <span>+ Add Column</span>\n          </button>\n        </div>\n\n        @if (statusMessage()) {\n          <div class=\"col-status-banner\" [class.is-error]=\"statusKind() === 'error'\" [class.is-success]=\"statusKind() === 'success'\">\n            <rpt-icon [name]=\"statusKind() === 'error' ? 'close' : 'check'\" [size]=\"12\" />\n            <span>{{ statusMessage() }}</span>\n          </div>\n        }\n\n        <div class=\"columns-editor-list\">\n          @for (col of columns(); track col.field; let idx = $index) {\n            <div class=\"col-edit-card\">\n              <div class=\"col-card-header\">\n                <div class=\"col-header-title-group\">\n                  <span class=\"col-drag-dots\">\u22EE\u22EE</span>\n                  <span class=\"col-idx-badge\">#{{ idx + 1 }}</span>\n                  <input\n                    type=\"text\"\n                    class=\"col-title-input\"\n                    placeholder=\"Column Label\"\n                    [ngModel]=\"col.label\"\n                    (ngModelChange)=\"onUpdateCol(idx, 'label', $event)\"\n                  />\n                </div>\n                <div class=\"col-card-actions\">\n                  <span class=\"col-type-pill\">{{ col.dataType || 'string' }}</span>\n                  <button\n                    type=\"button\"\n                    class=\"col-action-btn btn-delete\"\n                    (click)=\"removeColumn.emit(idx)\"\n                    title=\"Remove Column\"\n                  >\n                    <rpt-icon name=\"trash\" [size]=\"12\" />\n                  </button>\n                </div>\n              </div>\n\n              <div class=\"col-card-body\">\n                <div class=\"col-edit-fields\">\n                  <div class=\"col-field-item\">\n                    <span class=\"mini-label\">Field</span>\n                    <input\n                      type=\"text\"\n                      class=\"col-mini-input\"\n                      placeholder=\"field\"\n                      [ngModel]=\"col.field\"\n                      (ngModelChange)=\"onUpdateCol(idx, 'field', $event)\"\n                    />\n                  </div>\n                  <div class=\"col-field-item\">\n                    <span class=\"mini-label\">Type</span>\n                    <select\n                      class=\"col-mini-select\"\n                      [ngModel]=\"col.dataType || 'string'\"\n                      (ngModelChange)=\"onUpdateCol(idx, 'dataType', $event)\"\n                    >\n                      <option value=\"string\">String</option>\n                      <option value=\"number\">Number</option>\n                      <option value=\"currency\">Currency</option>\n                      <option value=\"date\">Date</option>\n                      <option value=\"boolean\">Boolean</option>\n                    </select>\n                  </div>\n                  <div class=\"col-field-item\">\n                    <span class=\"mini-label\">Format</span>\n                    <input\n                      type=\"text\"\n                      class=\"col-mini-input\"\n                      placeholder=\"e.g. dd/MM/yyyy\"\n                      [ngModel]=\"col.format\"\n                      (ngModelChange)=\"onUpdateCol(idx, 'format', $event)\"\n                    />\n                  </div>\n                  <div class=\"col-field-item\">\n                    <span class=\"mini-label\">Align</span>\n                    <select\n                      class=\"col-mini-select\"\n                      [ngModel]=\"col.align || 'left'\"\n                      (ngModelChange)=\"onUpdateCol(idx, 'align', $event)\"\n                    >\n                      <option value=\"left\">Left</option>\n                      <option value=\"center\">Center</option>\n                      <option value=\"right\">Right</option>\n                    </select>\n                  </div>\n                  <div class=\"col-field-item\">\n                    <span class=\"mini-label\">Aggregate</span>\n                    <select\n                      class=\"col-mini-select\"\n                      [ngModel]=\"col.aggregate || 'none'\"\n                      (ngModelChange)=\"onUpdateCol(idx, 'aggregate', $event === 'none' ? undefined : $event)\"\n                    >\n                      <option value=\"none\">None</option>\n                      <option value=\"sum\">Sum</option>\n                      <option value=\"avg\">Average</option>\n                      <option value=\"count\">Count</option>\n                      <option value=\"min\">Min</option>\n                      <option value=\"max\">Max</option>\n                    </select>\n                  </div>\n                  <div class=\"col-field-item\">\n                    <span class=\"mini-label\">Width</span>\n                    <input\n                      type=\"text\"\n                      class=\"col-mini-input\"\n                      placeholder=\"auto\"\n                      [ngModel]=\"col.width || ''\"\n                      (ngModelChange)=\"onUpdateCol(idx, 'width', $event || undefined)\"\n                    />\n                  </div>\n                </div>\n\n                <div class=\"col-card-footer\">\n                  <label class=\"col-checkbox-toggle\">\n                    <input\n                      type=\"checkbox\"\n                      [ngModel]=\"col.visible !== false\"\n                      (ngModelChange)=\"onUpdateCol(idx, 'visible', $event)\"\n                    />\n                    <span>Visible</span>\n                  </label>\n                  <label class=\"col-checkbox-toggle\">\n                    <input\n                      type=\"checkbox\"\n                      [ngModel]=\"col.checkboxSelection ?? false\"\n                      (ngModelChange)=\"onUpdateCol(idx, 'checkboxSelection', $event)\"\n                    />\n                    <span>Checkbox</span>\n                  </label>\n                </div>\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n\n      <!-- Grid Table Options Group -->\n      <div class=\"property-group\">\n        <div class=\"group-title\">Table Options</div>\n\n        <div class=\"field-row\">\n          <label class=\"checkbox-toggle\">\n            <input\n              type=\"checkbox\"\n              [ngModel]=\"grid()?.options?.sideBar !== false\"\n              (ngModelChange)=\"updateOption.emit({ field: 'sideBar', value: $event })\"\n            />\n            <span>Enable Side Panel (Tool Panels)</span>\n          </label>\n        </div>\n\n        <div class=\"field-row\">\n          <label class=\"checkbox-toggle\">\n            <input\n              type=\"checkbox\"\n              [ngModel]=\"grid()?.options?.globalSearch !== false\"\n              (ngModelChange)=\"updateOption.emit({ field: 'globalSearch', value: $event })\"\n            />\n            <span>Global Search Box</span>\n          </label>\n        </div>\n\n        <div class=\"field-row\">\n          <label class=\"checkbox-toggle\">\n            <input\n              type=\"checkbox\"\n              [ngModel]=\"grid()?.options?.statusBar !== false\"\n              (ngModelChange)=\"updateOption.emit({ field: 'statusBar', value: $event })\"\n            />\n            <span>Status Bar</span>\n          </label>\n        </div>\n\n        <div class=\"field-row\">\n          <label class=\"checkbox-toggle\">\n            <input\n              type=\"checkbox\"\n              [ngModel]=\"grid()?.options?.pagination ?? true\"\n              (ngModelChange)=\"updateOption.emit({ field: 'pagination', value: $event })\"\n            />\n            <span>Enable Pagination</span>\n          </label>\n        </div>\n\n        <div class=\"field-row\">\n          <label class=\"checkbox-toggle\">\n            <input\n              type=\"checkbox\"\n              [ngModel]=\"grid()?.options?.selectable ?? false\"\n              (ngModelChange)=\"updateOption.emit({ field: 'selectable', value: $event })\"\n            />\n            <span>Row Selection</span>\n          </label>\n        </div>\n\n        @if (grid()?.options?.selectable) {\n          <div class=\"field-row\">\n            <label class=\"field-label\">Selection Mode</label>\n            <select\n              class=\"field-input\"\n              [ngModel]=\"grid()?.options?.selectionMode ?? 'multiple'\"\n              (ngModelChange)=\"updateOption.emit({ field: 'selectionMode', value: $event })\"\n            >\n              <option value=\"multiple\">Multiple Rows</option>\n              <option value=\"single\">Single Row</option>\n            </select>\n          </div>\n\n          <div class=\"field-row\">\n            <label class=\"checkbox-toggle\">\n              <input\n                type=\"checkbox\"\n                [ngModel]=\"grid()?.options?.checkboxSelection ?? true\"\n                (ngModelChange)=\"updateOption.emit({ field: 'checkboxSelection', value: $event })\"\n              />\n              <span>Checkbox Selection</span>\n            </label>\n          </div>\n\n          @if ((grid()?.options?.selectionMode ?? 'multiple') === 'multiple') {\n            <div class=\"field-row\">\n              <label class=\"checkbox-toggle\">\n                <input\n                  type=\"checkbox\"\n                  [ngModel]=\"grid()?.options?.headerCheckboxSelection ?? true\"\n                  (ngModelChange)=\"updateOption.emit({ field: 'headerCheckboxSelection', value: $event })\"\n                />\n                <span>Header Select All Checkbox</span>\n              </label>\n            </div>\n          }\n        }\n\n        <div class=\"field-row\">\n          <label class=\"checkbox-toggle\">\n            <input\n              type=\"checkbox\"\n              [ngModel]=\"grid()?.options?.allowColumnReorder ?? true\"\n              (ngModelChange)=\"updateOption.emit({ field: 'allowColumnReorder', value: $event })\"\n            />\n            <span>Allow Column Reorder</span>\n          </label>\n        </div>\n\n        <div class=\"field-row\">\n          <label class=\"checkbox-toggle\">\n            <input\n              type=\"checkbox\"\n              [ngModel]=\"grid()?.options?.allowExport ?? true\"\n              (ngModelChange)=\"updateOption.emit({ field: 'allowExport', value: $event })\"\n            />\n            <span>Allow Export</span>\n          </label>\n        </div>\n\n        <div class=\"field-row\">\n          <label class=\"field-label\">Page Size</label>\n          <input\n            type=\"number\"\n            class=\"field-input\"\n            min=\"5\"\n            max=\"100\"\n            [ngModel]=\"grid()?.options?.pageSize ?? 10\"\n            (ngModelChange)=\"updateOption.emit({ field: 'pageSize', value: +$event })\"\n          />\n        </div>\n\n        <div class=\"field-row\">\n          <label class=\"checkbox-toggle\">\n            <input\n              type=\"checkbox\"\n              [ngModel]=\"grid()?.options?.showRowNumbers ?? true\"\n              (ngModelChange)=\"updateOption.emit({ field: 'showRowNumbers', value: $event })\"\n            />\n            <span>Show Row Numbers</span>\n          </label>\n        </div>\n\n        <div class=\"field-row\">\n          <label class=\"checkbox-toggle\">\n            <input\n              type=\"checkbox\"\n              [ngModel]=\"grid()?.options?.showFooter ?? true\"\n              (ngModelChange)=\"updateOption.emit({ field: 'showFooter', value: $event })\"\n            />\n            <span>Show Footer Totals</span>\n          </label>\n        </div>\n      </div>\n\n      <!-- Row Click & Drill-Down Action Group -->\n      <div class=\"property-group\">\n        <div class=\"group-title\">Row Click & Drill-Down</div>\n\n        <div class=\"field-row\">\n          <label class=\"checkbox-toggle\">\n            <input\n              type=\"checkbox\"\n              [ngModel]=\"hasRowClickAction()\"\n              (ngModelChange)=\"toggleRowClickAction($event)\"\n            />\n            <span>Enable Row Click Action</span>\n          </label>\n        </div>\n\n        @if (hasRowClickAction()) {\n          <div class=\"field-row\">\n            <label class=\"field-label\">Action Type</label>\n            <select\n              class=\"field-input field-select\"\n              [ngModel]=\"rowClickAction()?.type || 'open-drawer'\"\n              (ngModelChange)=\"updateRowActionField('type', $event)\"\n            >\n              <option value=\"open-drawer\">Slide-Over Detail Drawer</option>\n              <option value=\"drilldown-report\">Drill-Down Report (Host Event)</option>\n              <option value=\"navigate\">Navigate to URL</option>\n              <option value=\"emit-custom\">Emit Custom Action</option>\n            </select>\n          </div>\n\n          @if (rowClickAction()?.type === 'open-drawer' || rowClickAction()?.type === 'drilldown-report') {\n            <div class=\"field-row\">\n              <label class=\"field-label\">Target Report ID</label>\n              <input\n                type=\"text\"\n                class=\"field-input\"\n                placeholder=\"e.g. order-details\"\n                [ngModel]=\"rowClickAction()?.targetReportId || ''\"\n                (ngModelChange)=\"updateRowActionField('targetReportId', $event)\"\n              />\n            </div>\n\n            <div class=\"field-row\">\n              <label class=\"field-label\">Drawer Title</label>\n              <input\n                type=\"text\"\n                class=\"field-input\"\n                placeholder=\"e.g. Order Details\"\n                [ngModel]=\"rowClickAction()?.drawerTitle || ''\"\n                (ngModelChange)=\"updateRowActionField('drawerTitle', $event)\"\n              />\n            </div>\n\n            <div class=\"field-row\">\n              <label class=\"field-label\">Drawer Width</label>\n              <input\n                type=\"text\"\n                class=\"field-input\"\n                placeholder=\"e.g. 760px, 80%, 900px\"\n                [ngModel]=\"rowClickAction()?.drawerWidth || '760px'\"\n                (ngModelChange)=\"updateRowActionField('drawerWidth', $event)\"\n              />\n            </div>\n          }\n\n          @if (rowClickAction()?.type === 'navigate') {\n            <div class=\"field-row\">\n              <label class=\"field-label\">Target URL</label>\n              <input\n                type=\"text\"\n                class=\"field-input\"\n                [placeholder]=\"'/orders/{{row.orderId}} or https://...'\"\n                [ngModel]=\"rowClickAction()?.targetUrl || ''\"\n                (ngModelChange)=\"updateRowActionField('targetUrl', $event)\"\n              />\n            </div>\n            <div class=\"field-row\">\n              <label class=\"checkbox-toggle\">\n                <input\n                  type=\"checkbox\"\n                  [ngModel]=\"rowClickAction()?.openNewTab ?? false\"\n                  (ngModelChange)=\"updateRowActionField('openNewTab', $event)\"\n                />\n                <span>Open in New Tab</span>\n              </label>\n            </div>\n          }\n\n          @if (rowClickAction()?.type === 'emit-custom') {\n            <div class=\"field-row\">\n              <label class=\"field-label\">Custom Action Name</label>\n              <input\n                type=\"text\"\n                class=\"field-input\"\n                placeholder=\"e.g. view-audit-trail\"\n                [ngModel]=\"rowClickAction()?.customActionName || ''\"\n                (ngModelChange)=\"updateRowActionField('customActionName', $event)\"\n              />\n            </div>\n          }\n\n          <div class=\"field-row\">\n            <div class=\"field-label-row\">\n              <label class=\"field-label\">Parameter Mapping</label>\n              <button\n                type=\"button\"\n                class=\"btn-add-mapping\"\n                (click)=\"addParameterMapping()\"\n              >\n                + Add Mapping\n              </button>\n            </div>\n\n            @for (mapping of parameterMappings(); track mapping.key; let mIdx = $index) {\n              <div class=\"mapping-pair-row\">\n                <input\n                  type=\"text\"\n                  class=\"col-mini-input\"\n                  style=\"flex: 1;\"\n                  placeholder=\"Target (e.g. customerId)\"\n                  [ngModel]=\"mapping.key\"\n                  (ngModelChange)=\"updateMappingKey(mIdx, $event)\"\n                />\n                <span style=\"font-size: 0.75rem; color: #94a3b8;\">\u2190</span>\n                <input\n                  type=\"text\"\n                  class=\"col-mini-input\"\n                  style=\"flex: 1;\"\n                  placeholder=\"Source (e.g. row.id)\"\n                  [ngModel]=\"mapping.value\"\n                  (ngModelChange)=\"updateMappingValue(mIdx, $event)\"\n                />\n                <button\n                  type=\"button\"\n                  class=\"col-action-btn btn-delete\"\n                  (click)=\"removeMapping(mIdx)\"\n                  title=\"Remove mapping\"\n                >\n                  <rpt-icon name=\"trash\" [size]=\"11\" />\n                </button>\n              </div>\n            }\n          </div>\n        }\n      </div>\n\n      <!-- Remove Grid Action -->\n      <div class=\"grid-danger-zone\">\n        <button type=\"button\" class=\"btn-remove-grid-action\" (click)=\"removeGrid.emit()\">\n          <rpt-icon name=\"trash\" [size]=\"13\" />\n          <span>Remove Grid from Report</span>\n        </button>\n      </div>\n    </div>\n    }", styles: [".property-group{display:flex;flex-direction:column;gap:12px}.group-title{font-size:.7rem;font-weight:700;color:var(--rpt-color-text-muted, #64748b);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--rpt-color-border, #e2e8f0);padding-bottom:4px}.field-row{display:flex;flex-direction:column;gap:4px}.field-label-row{display:flex;align-items:center;justify-content:space-between}.field-badge-val{font-size:.65rem;font-weight:600;color:var(--rpt-color-primary, #2563eb);background:#eff6ff;border:1px solid #bfdbfe;padding:1px 6px;border-radius:9999px}.field-label{font-size:.7rem;font-weight:600;color:var(--rpt-color-text, #0f172a)}.field-input,.field-select,.field-textarea{width:100%;box-sizing:border-box;border:1px solid var(--rpt-color-border, #cbd5e1);border-radius:var(--rpt-border-radius-sm, 4px);padding:6px 10px;font-size:var(--rpt-font-size-sm, .75rem);color:var(--rpt-color-text, #0f172a);background:#fff;outline:none;transition:all var(--rpt-transition-speed, .15s) ease}.field-select{appearance:none;-webkit-appearance:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right 10px center;background-size:13px 13px;padding-right:28px;cursor:pointer}.field-input:focus,.field-select:focus,.field-textarea:focus{border-color:var(--rpt-color-primary, #2563eb);box-shadow:var(--rpt-box-shadow-focus, 0 0 0 3px rgba(37, 99, 235, .25))}.checkbox-toggle{display:inline-flex;align-items:center;gap:8px;font-size:.75rem;font-weight:500;color:var(--rpt-color-text, #0f172a);cursor:pointer}.preset-pill-group{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}.preset-pill{background:#f1f5f9;border:1px solid #e2e8f0;border-radius:4px;padding:2px 8px;font-size:.65rem;font-weight:600;color:#475569;cursor:pointer;transition:all .12s ease}.preset-pill:hover{background:#e2e8f0;color:#0f172a;border-color:#cbd5e1}.preset-pill-active{background:var(--rpt-color-primary, #2563eb)!important;color:#fff!important;border-color:var(--rpt-color-primary, #2563eb)!important}.preset-pill-reset{color:var(--rpt-color-primary, #2563eb);background:#eff6ff;border-color:#bfdbfe}.preset-pill-reset:hover{background:#dbeafe;color:#1d4ed8;border-color:#93c5fd}\n", ".empty-grid-card{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 16px;text-align:center;border:2px dashed #cbd5e1;border-radius:8px;background:#fff;margin:10px 0}.empty-grid-icon{width:48px;height:48px;border-radius:10px;background:#eff6ff;color:#2563eb;display:flex;align-items:center;justify-content:center;margin-bottom:12px}.empty-grid-title{font-size:.95rem;font-weight:700;color:#0f172a;margin:0 0 6px}.empty-grid-desc{font-size:.775rem;color:#64748b;margin:0 0 18px;line-height:1.4;max-width:280px}.btn-create-grid-action{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;background:#2563eb;color:#fff;font-size:.775rem;font-weight:600;border:none;border-radius:6px;cursor:pointer;box-shadow:0 2px 4px #2563eb33;transition:all .15s ease}.btn-create-grid-action:hover{background:#1d4ed8;box-shadow:0 4px 8px #2563eb40}.grid-danger-zone{margin-top:10px;padding-top:16px;border-top:1px dashed #e2e8f0;display:flex;justify-content:center}.btn-remove-grid-action{display:inline-flex;align-items:center;gap:6px;background:#fee2e2;border:1px solid #fecaca;color:#dc2626;font-size:.75rem;font-weight:600;padding:6px 12px;border-radius:6px;cursor:pointer;transition:all .15s ease}.btn-remove-grid-action:hover{background:#fecaca;border-color:#f87171;color:#b91c1c}.props-form{display:flex;flex-direction:column;gap:20px}.group-header-row{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--rpt-color-border, #e2e8f0);padding-bottom:6px;margin-bottom:8px}.group-title-wrap{display:flex;align-items:center;gap:6px}.group-badge{font-size:.65rem;font-weight:700;color:#64748b;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:10px;padding:1px 6px}.columns-action-bar{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}.btn-col-action{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:7px 8px;font-size:.725rem;font-weight:600;border-radius:6px;cursor:pointer;white-space:nowrap;transition:all .12s ease;box-sizing:border-box}.btn-col-action:disabled{opacity:.6;cursor:not-allowed}.btn-auto-detect{background:#eff6ff;border:1px solid #bfdbfe;color:#2563eb}.btn-auto-detect:hover:not(:disabled){background:#2563eb;color:#fff;border-color:#2563eb}.btn-add-col{background:#fff;border:1px solid var(--rpt-color-border, #cbd5e1);color:#334155}.btn-add-col:hover{background:#f8fafc;border-color:#94a3b8;color:#0f172a}.col-status-banner{display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:6px;font-size:.72rem;line-height:1.35;margin-bottom:10px;background:#f1f5f9;color:#334155;border:1px solid #cbd5e1}.col-status-banner.is-success{background:#f0fdf4;color:#166534;border-color:#bbf7d0}.col-status-banner.is-error{background:#fef2f2;color:#991b1b;border-color:#fecaca}@keyframes rpt-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.rpt-spin{animation:rpt-spin 1s linear infinite}.columns-editor-list{display:flex;flex-direction:column;gap:10px}.col-edit-card{background:#fff;border:1.5px solid var(--rpt-color-border, #cbd5e1);border-radius:var(--rpt-border-radius, 6px);box-shadow:var(--rpt-box-shadow, 0 1px 2px rgba(0, 0, 0, .05));box-sizing:border-box;transition:all var(--rpt-transition-speed, .15s) ease;position:relative;overflow:hidden;display:flex;flex-direction:column}.col-edit-card:hover{border-color:var(--rpt-color-primary, #2563eb);box-shadow:0 4px 6px -1px #2563eb1a}.col-card-header{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:5px 8px;background:var(--rpt-color-surface, #f8fafc);border-bottom:1px solid var(--rpt-color-border, #e2e8f0);min-height:32px;box-sizing:border-box}.col-header-title-group{display:flex;align-items:center;gap:5px;min-width:0;flex:1}.col-drag-dots{color:#94a3b8;font-size:.8rem;cursor:grab;-webkit-user-select:none;user-select:none;line-height:1;padding-left:2px}.col-idx-badge{font-size:.65rem;font-weight:700;color:#64748b;background:#e2e8f0;padding:1px 5px;border-radius:3px;letter-spacing:.02em}.col-title-input{flex:1;border:1px solid transparent;background:transparent;font-size:.75rem;font-weight:600;color:var(--rpt-color-text, #0f172a);padding:2px 6px;border-radius:4px;outline:none;transition:all .15s ease}.col-title-input:hover{border-color:#cbd5e1;background:#fff}.col-title-input:focus{border-color:var(--rpt-color-primary, #2563eb);background:#fff;box-shadow:0 0 0 2px #2563eb26}.col-card-actions{display:flex;align-items:center;gap:4px}.col-type-pill{font-size:.625rem;font-weight:700;color:#1e40af;background:#dbeafe;border:1px solid #bfdbfe;padding:1px 5px;border-radius:3px;text-transform:uppercase;letter-spacing:.04em}.col-action-btn{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;color:var(--rpt-color-text-muted, #64748b);cursor:pointer;padding:3px;border-radius:4px;transition:all .15s ease}.col-action-btn.btn-delete:hover{color:var(--rpt-color-danger, #ef4444);background:#fee2e2}.col-card-body{padding:8px 10px;display:flex;flex-direction:column;gap:6px;background:#fff}.col-edit-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 8px}.col-field-item{display:flex;flex-direction:column;gap:2px;min-width:0}.mini-label{font-size:.625rem;font-weight:600;color:#64748b;letter-spacing:.02em}.col-mini-input,.col-mini-select{width:100%;box-sizing:border-box;border:1px solid var(--rpt-color-border, #cbd5e1);border-radius:3px;padding:3px 5px;font-size:.7rem;color:var(--rpt-color-text, #0f172a);background:#fff;outline:none;transition:all .12s ease}.col-mini-select{appearance:none;-webkit-appearance:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right 4px center;background-size:10px 10px;padding-right:16px;cursor:pointer}.col-mini-input:focus,.col-mini-select:focus{border-color:var(--rpt-color-primary, #2563eb);box-shadow:0 0 0 2px #2563eb26}.col-card-footer{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding-top:4px;border-top:1px dashed #e2e8f0;margin-top:2px}.col-checkbox-toggle{display:inline-flex;align-items:center;gap:5px;font-size:.675rem;font-weight:500;color:#475569;cursor:pointer;-webkit-user-select:none;user-select:none}.btn-add-mapping{display:inline-flex;align-items:center;background:#eff6ff;border:1px solid #bfdbfe;color:#2563eb;font-size:.65rem;font-weight:600;padding:2px 6px;border-radius:4px;cursor:pointer;transition:all .12s ease}.btn-add-mapping:hover{background:#dbeafe}.mapping-pair-row{display:flex;align-items:center;gap:6px;margin-top:4px}.active-ds-badge{background:#eff6ff;color:#2563eb;font-size:.65rem;font-weight:700;padding:1px 6px;border-radius:4px;border:1px solid #bfdbfe;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.source-type-switcher{display:flex;background:#f1f5f9;border:1px solid var(--rpt-color-border, #cbd5e1);border-radius:6px;padding:2px;gap:2px;margin-bottom:12px}.source-tab-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:6px 4px;font-size:.725rem;font-weight:600;color:var(--rpt-color-text-muted, #64748b);background:transparent;border:none;border-radius:4px;cursor:pointer;transition:all .12s ease}.source-tab-btn:hover{color:var(--rpt-color-text, #0f172a)}.source-tab-btn.active{background:#fff;color:var(--rpt-color-primary, #2563eb);box-shadow:0 1px 2px #0000000f}.procedure-params-section{margin-top:14px;padding:0;background:transparent;border:none}.params-section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;padding-bottom:4px;border-bottom:1px solid var(--rpt-color-border, #e2e8f0)}.params-header-left{display:flex;align-items:center;gap:6px}.params-title{font-size:.725rem;font-weight:700;color:#334155;text-transform:uppercase;letter-spacing:.04em}.params-count-badge{font-size:.625rem;font-weight:700;color:#2563eb;background:#eff6ff;border:1px solid #bfdbfe;border-radius:9999px;padding:0 6px;line-height:16px}.param-cards-list{display:flex;flex-direction:column;gap:10px;width:100%;box-sizing:border-box}.empty-params-hint{font-size:.725rem;color:#64748b;font-style:italic;padding:12px;text-align:center;background:#f8fafc;border:1px dashed #cbd5e1;border-radius:6px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: RptIconComponent, selector: "rpt-icon", inputs: ["name", "size", "color", "strokeWidth"] }, { kind: "component", type: ParameterBindingEditorComponent, selector: "rpt-parameter-binding-editor", inputs: ["param", "currentValue", "allComponents", "currentComponentId", "isAdvancedMode"], outputs: ["valueChange", "linkedFieldChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PropertyEditorGridComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rpt-property-editor-grid', standalone: true, imports: [CommonModule, FormsModule, RptIconComponent, ParameterBindingEditorComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "    @if (!grid()) {\n      <div class=\"empty-grid-card\">\n        <div class=\"empty-grid-icon\">\n          <rpt-icon name=\"table\" [size]=\"28\" />\n        </div>\n        <h4 class=\"empty-grid-title\">No Result Grid Attached</h4>\n        <p class=\"empty-grid-desc\">Attach an interactive Result Data Grid (or UltraGrid) to this report definition to render queries and stored procedure results.</p>\n        <button type=\"button\" class=\"btn-create-grid-action\" (click)=\"addGrid.emit()\">\n          <rpt-icon name=\"plus\" [size]=\"14\" />\n          <span>+ Add Result Grid</span>\n        </button>\n      </div>\n    } @else {\n      <div class=\"props-form\">\n      <!-- 1. Report Data Source & Stored Procedure Configuration -->\n      <div class=\"property-group\">\n        <div class=\"group-header-row\">\n          <div class=\"group-title-wrap\">\n            <span class=\"group-title\">Report Data Source</span>\n            @if (activeEntityName()) {\n              <span class=\"group-badge active-ds-badge\">{{ activeEntityName() }}</span>\n            }\n          </div>\n        </div>\n\n        <!-- Source Type Switcher (Stored Procedure vs Table) -->\n        <div class=\"source-type-switcher\">\n          <button\n            type=\"button\"\n            class=\"source-tab-btn\"\n            [class.active]=\"currentSourceType() === 'stored_procedure'\"\n            (click)=\"onSourceTypeChange('stored_procedure')\"\n          >\n            <rpt-icon name=\"code\" [size]=\"12\" />\n            <span>Stored Procedure</span>\n          </button>\n          <button\n            type=\"button\"\n            class=\"source-tab-btn\"\n            [class.active]=\"currentSourceType() === 'table'\"\n            (click)=\"onSourceTypeChange('table')\"\n          >\n            <rpt-icon name=\"table\" [size]=\"12\" />\n            <span>Table / View</span>\n          </button>\n        </div>\n\n        <!-- Entity Selector Dropdown -->\n        <div class=\"field-row\">\n          <label class=\"field-label\">\n            {{ currentSourceType() === 'stored_procedure' ? 'Stored Procedure' : 'Table / View' }}\n          </label>\n          <select\n            class=\"field-select\"\n            [ngModel]=\"activeEntityName()\"\n            (ngModelChange)=\"onSelectEntity($event)\"\n          >\n            <option value=\"\">-- Choose Data Source --</option>\n            @for (ent of activeEntityList(); track ent.name) {\n              <option [value]=\"ent.name\">\n                {{ ent.friendlyName || ent.name }} ({{ ent.name }})\n              </option>\n            }\n          </select>\n        </div>\n\n        <!-- Stored Procedure Parameter Mappings -->\n        @if (currentSourceType() === 'stored_procedure' && activeEntityName()) {\n          <div class=\"procedure-params-section\">\n            <div class=\"params-section-header\">\n              <div class=\"params-header-left\">\n                <span class=\"params-title\">Procedure Parameters</span>\n                <span class=\"params-count-badge\">{{ effectiveParameters().length }}</span>\n              </div>\n            </div>\n\n            @if (effectiveParameters().length > 0) {\n              <div class=\"param-cards-list\">\n                @for (param of effectiveParameters(); track param.name) {\n                  <rpt-parameter-binding-editor\n                    [param]=\"param\"\n                    [currentValue]=\"getParameterValue(param.name)\"\n                    [allComponents]=\"allComponents()\"\n                    (valueChange)=\"onParameterChange(param.name, $event)\"\n                  />\n                }\n              </div>\n            } @else {\n              <div class=\"empty-params-hint\">\n                <span>No required parameters for this procedure.</span>\n              </div>\n            }\n          </div>\n        }\n      </div>\n\n      <!-- 2. Result Columns Configuration -->\n      <div class=\"property-group\">\n        <div class=\"group-header-row\">\n          <div class=\"group-title-wrap\">\n            <span class=\"group-title\">Columns</span>\n            <span class=\"group-badge\">{{ columns().length }}</span>\n          </div>\n        </div>\n\n        <!-- Dedicated Full-Width Action Buttons (No cramping) -->\n        <div class=\"columns-action-bar\">\n          <button\n            type=\"button\"\n            class=\"btn-col-action btn-auto-detect\"\n            (click)=\"autoDetectColumns.emit()\"\n            [disabled]=\"isDetecting()\"\n            title=\"Auto-detect all columns from procedure or data table\"\n          >\n            <rpt-icon name=\"refresh\" [size]=\"12\" [class.rpt-spin]=\"isDetecting()\" />\n            <span>{{ isDetecting() ? 'Detecting...' : 'Auto-Detect' }}</span>\n          </button>\n          <button\n            type=\"button\"\n            class=\"btn-col-action btn-add-col\"\n            (click)=\"addColumn.emit()\"\n            title=\"Add a new column manually\"\n          >\n            <rpt-icon name=\"plus\" [size]=\"12\" />\n            <span>+ Add Column</span>\n          </button>\n        </div>\n\n        @if (statusMessage()) {\n          <div class=\"col-status-banner\" [class.is-error]=\"statusKind() === 'error'\" [class.is-success]=\"statusKind() === 'success'\">\n            <rpt-icon [name]=\"statusKind() === 'error' ? 'close' : 'check'\" [size]=\"12\" />\n            <span>{{ statusMessage() }}</span>\n          </div>\n        }\n\n        <div class=\"columns-editor-list\">\n          @for (col of columns(); track col.field; let idx = $index) {\n            <div class=\"col-edit-card\">\n              <div class=\"col-card-header\">\n                <div class=\"col-header-title-group\">\n                  <span class=\"col-drag-dots\">\u22EE\u22EE</span>\n                  <span class=\"col-idx-badge\">#{{ idx + 1 }}</span>\n                  <input\n                    type=\"text\"\n                    class=\"col-title-input\"\n                    placeholder=\"Column Label\"\n                    [ngModel]=\"col.label\"\n                    (ngModelChange)=\"onUpdateCol(idx, 'label', $event)\"\n                  />\n                </div>\n                <div class=\"col-card-actions\">\n                  <span class=\"col-type-pill\">{{ col.dataType || 'string' }}</span>\n                  <button\n                    type=\"button\"\n                    class=\"col-action-btn btn-delete\"\n                    (click)=\"removeColumn.emit(idx)\"\n                    title=\"Remove Column\"\n                  >\n                    <rpt-icon name=\"trash\" [size]=\"12\" />\n                  </button>\n                </div>\n              </div>\n\n              <div class=\"col-card-body\">\n                <div class=\"col-edit-fields\">\n                  <div class=\"col-field-item\">\n                    <span class=\"mini-label\">Field</span>\n                    <input\n                      type=\"text\"\n                      class=\"col-mini-input\"\n                      placeholder=\"field\"\n                      [ngModel]=\"col.field\"\n                      (ngModelChange)=\"onUpdateCol(idx, 'field', $event)\"\n                    />\n                  </div>\n                  <div class=\"col-field-item\">\n                    <span class=\"mini-label\">Type</span>\n                    <select\n                      class=\"col-mini-select\"\n                      [ngModel]=\"col.dataType || 'string'\"\n                      (ngModelChange)=\"onUpdateCol(idx, 'dataType', $event)\"\n                    >\n                      <option value=\"string\">String</option>\n                      <option value=\"number\">Number</option>\n                      <option value=\"currency\">Currency</option>\n                      <option value=\"date\">Date</option>\n                      <option value=\"boolean\">Boolean</option>\n                    </select>\n                  </div>\n                  <div class=\"col-field-item\">\n                    <span class=\"mini-label\">Format</span>\n                    <input\n                      type=\"text\"\n                      class=\"col-mini-input\"\n                      placeholder=\"e.g. dd/MM/yyyy\"\n                      [ngModel]=\"col.format\"\n                      (ngModelChange)=\"onUpdateCol(idx, 'format', $event)\"\n                    />\n                  </div>\n                  <div class=\"col-field-item\">\n                    <span class=\"mini-label\">Align</span>\n                    <select\n                      class=\"col-mini-select\"\n                      [ngModel]=\"col.align || 'left'\"\n                      (ngModelChange)=\"onUpdateCol(idx, 'align', $event)\"\n                    >\n                      <option value=\"left\">Left</option>\n                      <option value=\"center\">Center</option>\n                      <option value=\"right\">Right</option>\n                    </select>\n                  </div>\n                  <div class=\"col-field-item\">\n                    <span class=\"mini-label\">Aggregate</span>\n                    <select\n                      class=\"col-mini-select\"\n                      [ngModel]=\"col.aggregate || 'none'\"\n                      (ngModelChange)=\"onUpdateCol(idx, 'aggregate', $event === 'none' ? undefined : $event)\"\n                    >\n                      <option value=\"none\">None</option>\n                      <option value=\"sum\">Sum</option>\n                      <option value=\"avg\">Average</option>\n                      <option value=\"count\">Count</option>\n                      <option value=\"min\">Min</option>\n                      <option value=\"max\">Max</option>\n                    </select>\n                  </div>\n                  <div class=\"col-field-item\">\n                    <span class=\"mini-label\">Width</span>\n                    <input\n                      type=\"text\"\n                      class=\"col-mini-input\"\n                      placeholder=\"auto\"\n                      [ngModel]=\"col.width || ''\"\n                      (ngModelChange)=\"onUpdateCol(idx, 'width', $event || undefined)\"\n                    />\n                  </div>\n                </div>\n\n                <div class=\"col-card-footer\">\n                  <label class=\"col-checkbox-toggle\">\n                    <input\n                      type=\"checkbox\"\n                      [ngModel]=\"col.visible !== false\"\n                      (ngModelChange)=\"onUpdateCol(idx, 'visible', $event)\"\n                    />\n                    <span>Visible</span>\n                  </label>\n                  <label class=\"col-checkbox-toggle\">\n                    <input\n                      type=\"checkbox\"\n                      [ngModel]=\"col.checkboxSelection ?? false\"\n                      (ngModelChange)=\"onUpdateCol(idx, 'checkboxSelection', $event)\"\n                    />\n                    <span>Checkbox</span>\n                  </label>\n                </div>\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n\n      <!-- Grid Table Options Group -->\n      <div class=\"property-group\">\n        <div class=\"group-title\">Table Options</div>\n\n        <div class=\"field-row\">\n          <label class=\"checkbox-toggle\">\n            <input\n              type=\"checkbox\"\n              [ngModel]=\"grid()?.options?.sideBar !== false\"\n              (ngModelChange)=\"updateOption.emit({ field: 'sideBar', value: $event })\"\n            />\n            <span>Enable Side Panel (Tool Panels)</span>\n          </label>\n        </div>\n\n        <div class=\"field-row\">\n          <label class=\"checkbox-toggle\">\n            <input\n              type=\"checkbox\"\n              [ngModel]=\"grid()?.options?.globalSearch !== false\"\n              (ngModelChange)=\"updateOption.emit({ field: 'globalSearch', value: $event })\"\n            />\n            <span>Global Search Box</span>\n          </label>\n        </div>\n\n        <div class=\"field-row\">\n          <label class=\"checkbox-toggle\">\n            <input\n              type=\"checkbox\"\n              [ngModel]=\"grid()?.options?.statusBar !== false\"\n              (ngModelChange)=\"updateOption.emit({ field: 'statusBar', value: $event })\"\n            />\n            <span>Status Bar</span>\n          </label>\n        </div>\n\n        <div class=\"field-row\">\n          <label class=\"checkbox-toggle\">\n            <input\n              type=\"checkbox\"\n              [ngModel]=\"grid()?.options?.pagination ?? true\"\n              (ngModelChange)=\"updateOption.emit({ field: 'pagination', value: $event })\"\n            />\n            <span>Enable Pagination</span>\n          </label>\n        </div>\n\n        <div class=\"field-row\">\n          <label class=\"checkbox-toggle\">\n            <input\n              type=\"checkbox\"\n              [ngModel]=\"grid()?.options?.selectable ?? false\"\n              (ngModelChange)=\"updateOption.emit({ field: 'selectable', value: $event })\"\n            />\n            <span>Row Selection</span>\n          </label>\n        </div>\n\n        @if (grid()?.options?.selectable) {\n          <div class=\"field-row\">\n            <label class=\"field-label\">Selection Mode</label>\n            <select\n              class=\"field-input\"\n              [ngModel]=\"grid()?.options?.selectionMode ?? 'multiple'\"\n              (ngModelChange)=\"updateOption.emit({ field: 'selectionMode', value: $event })\"\n            >\n              <option value=\"multiple\">Multiple Rows</option>\n              <option value=\"single\">Single Row</option>\n            </select>\n          </div>\n\n          <div class=\"field-row\">\n            <label class=\"checkbox-toggle\">\n              <input\n                type=\"checkbox\"\n                [ngModel]=\"grid()?.options?.checkboxSelection ?? true\"\n                (ngModelChange)=\"updateOption.emit({ field: 'checkboxSelection', value: $event })\"\n              />\n              <span>Checkbox Selection</span>\n            </label>\n          </div>\n\n          @if ((grid()?.options?.selectionMode ?? 'multiple') === 'multiple') {\n            <div class=\"field-row\">\n              <label class=\"checkbox-toggle\">\n                <input\n                  type=\"checkbox\"\n                  [ngModel]=\"grid()?.options?.headerCheckboxSelection ?? true\"\n                  (ngModelChange)=\"updateOption.emit({ field: 'headerCheckboxSelection', value: $event })\"\n                />\n                <span>Header Select All Checkbox</span>\n              </label>\n            </div>\n          }\n        }\n\n        <div class=\"field-row\">\n          <label class=\"checkbox-toggle\">\n            <input\n              type=\"checkbox\"\n              [ngModel]=\"grid()?.options?.allowColumnReorder ?? true\"\n              (ngModelChange)=\"updateOption.emit({ field: 'allowColumnReorder', value: $event })\"\n            />\n            <span>Allow Column Reorder</span>\n          </label>\n        </div>\n\n        <div class=\"field-row\">\n          <label class=\"checkbox-toggle\">\n            <input\n              type=\"checkbox\"\n              [ngModel]=\"grid()?.options?.allowExport ?? true\"\n              (ngModelChange)=\"updateOption.emit({ field: 'allowExport', value: $event })\"\n            />\n            <span>Allow Export</span>\n          </label>\n        </div>\n\n        <div class=\"field-row\">\n          <label class=\"field-label\">Page Size</label>\n          <input\n            type=\"number\"\n            class=\"field-input\"\n            min=\"5\"\n            max=\"100\"\n            [ngModel]=\"grid()?.options?.pageSize ?? 10\"\n            (ngModelChange)=\"updateOption.emit({ field: 'pageSize', value: +$event })\"\n          />\n        </div>\n\n        <div class=\"field-row\">\n          <label class=\"checkbox-toggle\">\n            <input\n              type=\"checkbox\"\n              [ngModel]=\"grid()?.options?.showRowNumbers ?? true\"\n              (ngModelChange)=\"updateOption.emit({ field: 'showRowNumbers', value: $event })\"\n            />\n            <span>Show Row Numbers</span>\n          </label>\n        </div>\n\n        <div class=\"field-row\">\n          <label class=\"checkbox-toggle\">\n            <input\n              type=\"checkbox\"\n              [ngModel]=\"grid()?.options?.showFooter ?? true\"\n              (ngModelChange)=\"updateOption.emit({ field: 'showFooter', value: $event })\"\n            />\n            <span>Show Footer Totals</span>\n          </label>\n        </div>\n      </div>\n\n      <!-- Row Click & Drill-Down Action Group -->\n      <div class=\"property-group\">\n        <div class=\"group-title\">Row Click & Drill-Down</div>\n\n        <div class=\"field-row\">\n          <label class=\"checkbox-toggle\">\n            <input\n              type=\"checkbox\"\n              [ngModel]=\"hasRowClickAction()\"\n              (ngModelChange)=\"toggleRowClickAction($event)\"\n            />\n            <span>Enable Row Click Action</span>\n          </label>\n        </div>\n\n        @if (hasRowClickAction()) {\n          <div class=\"field-row\">\n            <label class=\"field-label\">Action Type</label>\n            <select\n              class=\"field-input field-select\"\n              [ngModel]=\"rowClickAction()?.type || 'open-drawer'\"\n              (ngModelChange)=\"updateRowActionField('type', $event)\"\n            >\n              <option value=\"open-drawer\">Slide-Over Detail Drawer</option>\n              <option value=\"drilldown-report\">Drill-Down Report (Host Event)</option>\n              <option value=\"navigate\">Navigate to URL</option>\n              <option value=\"emit-custom\">Emit Custom Action</option>\n            </select>\n          </div>\n\n          @if (rowClickAction()?.type === 'open-drawer' || rowClickAction()?.type === 'drilldown-report') {\n            <div class=\"field-row\">\n              <label class=\"field-label\">Target Report ID</label>\n              <input\n                type=\"text\"\n                class=\"field-input\"\n                placeholder=\"e.g. order-details\"\n                [ngModel]=\"rowClickAction()?.targetReportId || ''\"\n                (ngModelChange)=\"updateRowActionField('targetReportId', $event)\"\n              />\n            </div>\n\n            <div class=\"field-row\">\n              <label class=\"field-label\">Drawer Title</label>\n              <input\n                type=\"text\"\n                class=\"field-input\"\n                placeholder=\"e.g. Order Details\"\n                [ngModel]=\"rowClickAction()?.drawerTitle || ''\"\n                (ngModelChange)=\"updateRowActionField('drawerTitle', $event)\"\n              />\n            </div>\n\n            <div class=\"field-row\">\n              <label class=\"field-label\">Drawer Width</label>\n              <input\n                type=\"text\"\n                class=\"field-input\"\n                placeholder=\"e.g. 760px, 80%, 900px\"\n                [ngModel]=\"rowClickAction()?.drawerWidth || '760px'\"\n                (ngModelChange)=\"updateRowActionField('drawerWidth', $event)\"\n              />\n            </div>\n          }\n\n          @if (rowClickAction()?.type === 'navigate') {\n            <div class=\"field-row\">\n              <label class=\"field-label\">Target URL</label>\n              <input\n                type=\"text\"\n                class=\"field-input\"\n                [placeholder]=\"'/orders/{{row.orderId}} or https://...'\"\n                [ngModel]=\"rowClickAction()?.targetUrl || ''\"\n                (ngModelChange)=\"updateRowActionField('targetUrl', $event)\"\n              />\n            </div>\n            <div class=\"field-row\">\n              <label class=\"checkbox-toggle\">\n                <input\n                  type=\"checkbox\"\n                  [ngModel]=\"rowClickAction()?.openNewTab ?? false\"\n                  (ngModelChange)=\"updateRowActionField('openNewTab', $event)\"\n                />\n                <span>Open in New Tab</span>\n              </label>\n            </div>\n          }\n\n          @if (rowClickAction()?.type === 'emit-custom') {\n            <div class=\"field-row\">\n              <label class=\"field-label\">Custom Action Name</label>\n              <input\n                type=\"text\"\n                class=\"field-input\"\n                placeholder=\"e.g. view-audit-trail\"\n                [ngModel]=\"rowClickAction()?.customActionName || ''\"\n                (ngModelChange)=\"updateRowActionField('customActionName', $event)\"\n              />\n            </div>\n          }\n\n          <div class=\"field-row\">\n            <div class=\"field-label-row\">\n              <label class=\"field-label\">Parameter Mapping</label>\n              <button\n                type=\"button\"\n                class=\"btn-add-mapping\"\n                (click)=\"addParameterMapping()\"\n              >\n                + Add Mapping\n              </button>\n            </div>\n\n            @for (mapping of parameterMappings(); track mapping.key; let mIdx = $index) {\n              <div class=\"mapping-pair-row\">\n                <input\n                  type=\"text\"\n                  class=\"col-mini-input\"\n                  style=\"flex: 1;\"\n                  placeholder=\"Target (e.g. customerId)\"\n                  [ngModel]=\"mapping.key\"\n                  (ngModelChange)=\"updateMappingKey(mIdx, $event)\"\n                />\n                <span style=\"font-size: 0.75rem; color: #94a3b8;\">\u2190</span>\n                <input\n                  type=\"text\"\n                  class=\"col-mini-input\"\n                  style=\"flex: 1;\"\n                  placeholder=\"Source (e.g. row.id)\"\n                  [ngModel]=\"mapping.value\"\n                  (ngModelChange)=\"updateMappingValue(mIdx, $event)\"\n                />\n                <button\n                  type=\"button\"\n                  class=\"col-action-btn btn-delete\"\n                  (click)=\"removeMapping(mIdx)\"\n                  title=\"Remove mapping\"\n                >\n                  <rpt-icon name=\"trash\" [size]=\"11\" />\n                </button>\n              </div>\n            }\n          </div>\n        }\n      </div>\n\n      <!-- Remove Grid Action -->\n      <div class=\"grid-danger-zone\">\n        <button type=\"button\" class=\"btn-remove-grid-action\" (click)=\"removeGrid.emit()\">\n          <rpt-icon name=\"trash\" [size]=\"13\" />\n          <span>Remove Grid from Report</span>\n        </button>\n      </div>\n    </div>\n    }", styles: [".property-group{display:flex;flex-direction:column;gap:12px}.group-title{font-size:.7rem;font-weight:700;color:var(--rpt-color-text-muted, #64748b);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--rpt-color-border, #e2e8f0);padding-bottom:4px}.field-row{display:flex;flex-direction:column;gap:4px}.field-label-row{display:flex;align-items:center;justify-content:space-between}.field-badge-val{font-size:.65rem;font-weight:600;color:var(--rpt-color-primary, #2563eb);background:#eff6ff;border:1px solid #bfdbfe;padding:1px 6px;border-radius:9999px}.field-label{font-size:.7rem;font-weight:600;color:var(--rpt-color-text, #0f172a)}.field-input,.field-select,.field-textarea{width:100%;box-sizing:border-box;border:1px solid var(--rpt-color-border, #cbd5e1);border-radius:var(--rpt-border-radius-sm, 4px);padding:6px 10px;font-size:var(--rpt-font-size-sm, .75rem);color:var(--rpt-color-text, #0f172a);background:#fff;outline:none;transition:all var(--rpt-transition-speed, .15s) ease}.field-select{appearance:none;-webkit-appearance:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right 10px center;background-size:13px 13px;padding-right:28px;cursor:pointer}.field-input:focus,.field-select:focus,.field-textarea:focus{border-color:var(--rpt-color-primary, #2563eb);box-shadow:var(--rpt-box-shadow-focus, 0 0 0 3px rgba(37, 99, 235, .25))}.checkbox-toggle{display:inline-flex;align-items:center;gap:8px;font-size:.75rem;font-weight:500;color:var(--rpt-color-text, #0f172a);cursor:pointer}.preset-pill-group{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}.preset-pill{background:#f1f5f9;border:1px solid #e2e8f0;border-radius:4px;padding:2px 8px;font-size:.65rem;font-weight:600;color:#475569;cursor:pointer;transition:all .12s ease}.preset-pill:hover{background:#e2e8f0;color:#0f172a;border-color:#cbd5e1}.preset-pill-active{background:var(--rpt-color-primary, #2563eb)!important;color:#fff!important;border-color:var(--rpt-color-primary, #2563eb)!important}.preset-pill-reset{color:var(--rpt-color-primary, #2563eb);background:#eff6ff;border-color:#bfdbfe}.preset-pill-reset:hover{background:#dbeafe;color:#1d4ed8;border-color:#93c5fd}\n", ".empty-grid-card{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 16px;text-align:center;border:2px dashed #cbd5e1;border-radius:8px;background:#fff;margin:10px 0}.empty-grid-icon{width:48px;height:48px;border-radius:10px;background:#eff6ff;color:#2563eb;display:flex;align-items:center;justify-content:center;margin-bottom:12px}.empty-grid-title{font-size:.95rem;font-weight:700;color:#0f172a;margin:0 0 6px}.empty-grid-desc{font-size:.775rem;color:#64748b;margin:0 0 18px;line-height:1.4;max-width:280px}.btn-create-grid-action{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;background:#2563eb;color:#fff;font-size:.775rem;font-weight:600;border:none;border-radius:6px;cursor:pointer;box-shadow:0 2px 4px #2563eb33;transition:all .15s ease}.btn-create-grid-action:hover{background:#1d4ed8;box-shadow:0 4px 8px #2563eb40}.grid-danger-zone{margin-top:10px;padding-top:16px;border-top:1px dashed #e2e8f0;display:flex;justify-content:center}.btn-remove-grid-action{display:inline-flex;align-items:center;gap:6px;background:#fee2e2;border:1px solid #fecaca;color:#dc2626;font-size:.75rem;font-weight:600;padding:6px 12px;border-radius:6px;cursor:pointer;transition:all .15s ease}.btn-remove-grid-action:hover{background:#fecaca;border-color:#f87171;color:#b91c1c}.props-form{display:flex;flex-direction:column;gap:20px}.group-header-row{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--rpt-color-border, #e2e8f0);padding-bottom:6px;margin-bottom:8px}.group-title-wrap{display:flex;align-items:center;gap:6px}.group-badge{font-size:.65rem;font-weight:700;color:#64748b;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:10px;padding:1px 6px}.columns-action-bar{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}.btn-col-action{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:7px 8px;font-size:.725rem;font-weight:600;border-radius:6px;cursor:pointer;white-space:nowrap;transition:all .12s ease;box-sizing:border-box}.btn-col-action:disabled{opacity:.6;cursor:not-allowed}.btn-auto-detect{background:#eff6ff;border:1px solid #bfdbfe;color:#2563eb}.btn-auto-detect:hover:not(:disabled){background:#2563eb;color:#fff;border-color:#2563eb}.btn-add-col{background:#fff;border:1px solid var(--rpt-color-border, #cbd5e1);color:#334155}.btn-add-col:hover{background:#f8fafc;border-color:#94a3b8;color:#0f172a}.col-status-banner{display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:6px;font-size:.72rem;line-height:1.35;margin-bottom:10px;background:#f1f5f9;color:#334155;border:1px solid #cbd5e1}.col-status-banner.is-success{background:#f0fdf4;color:#166534;border-color:#bbf7d0}.col-status-banner.is-error{background:#fef2f2;color:#991b1b;border-color:#fecaca}@keyframes rpt-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.rpt-spin{animation:rpt-spin 1s linear infinite}.columns-editor-list{display:flex;flex-direction:column;gap:10px}.col-edit-card{background:#fff;border:1.5px solid var(--rpt-color-border, #cbd5e1);border-radius:var(--rpt-border-radius, 6px);box-shadow:var(--rpt-box-shadow, 0 1px 2px rgba(0, 0, 0, .05));box-sizing:border-box;transition:all var(--rpt-transition-speed, .15s) ease;position:relative;overflow:hidden;display:flex;flex-direction:column}.col-edit-card:hover{border-color:var(--rpt-color-primary, #2563eb);box-shadow:0 4px 6px -1px #2563eb1a}.col-card-header{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:5px 8px;background:var(--rpt-color-surface, #f8fafc);border-bottom:1px solid var(--rpt-color-border, #e2e8f0);min-height:32px;box-sizing:border-box}.col-header-title-group{display:flex;align-items:center;gap:5px;min-width:0;flex:1}.col-drag-dots{color:#94a3b8;font-size:.8rem;cursor:grab;-webkit-user-select:none;user-select:none;line-height:1;padding-left:2px}.col-idx-badge{font-size:.65rem;font-weight:700;color:#64748b;background:#e2e8f0;padding:1px 5px;border-radius:3px;letter-spacing:.02em}.col-title-input{flex:1;border:1px solid transparent;background:transparent;font-size:.75rem;font-weight:600;color:var(--rpt-color-text, #0f172a);padding:2px 6px;border-radius:4px;outline:none;transition:all .15s ease}.col-title-input:hover{border-color:#cbd5e1;background:#fff}.col-title-input:focus{border-color:var(--rpt-color-primary, #2563eb);background:#fff;box-shadow:0 0 0 2px #2563eb26}.col-card-actions{display:flex;align-items:center;gap:4px}.col-type-pill{font-size:.625rem;font-weight:700;color:#1e40af;background:#dbeafe;border:1px solid #bfdbfe;padding:1px 5px;border-radius:3px;text-transform:uppercase;letter-spacing:.04em}.col-action-btn{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;color:var(--rpt-color-text-muted, #64748b);cursor:pointer;padding:3px;border-radius:4px;transition:all .15s ease}.col-action-btn.btn-delete:hover{color:var(--rpt-color-danger, #ef4444);background:#fee2e2}.col-card-body{padding:8px 10px;display:flex;flex-direction:column;gap:6px;background:#fff}.col-edit-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 8px}.col-field-item{display:flex;flex-direction:column;gap:2px;min-width:0}.mini-label{font-size:.625rem;font-weight:600;color:#64748b;letter-spacing:.02em}.col-mini-input,.col-mini-select{width:100%;box-sizing:border-box;border:1px solid var(--rpt-color-border, #cbd5e1);border-radius:3px;padding:3px 5px;font-size:.7rem;color:var(--rpt-color-text, #0f172a);background:#fff;outline:none;transition:all .12s ease}.col-mini-select{appearance:none;-webkit-appearance:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right 4px center;background-size:10px 10px;padding-right:16px;cursor:pointer}.col-mini-input:focus,.col-mini-select:focus{border-color:var(--rpt-color-primary, #2563eb);box-shadow:0 0 0 2px #2563eb26}.col-card-footer{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding-top:4px;border-top:1px dashed #e2e8f0;margin-top:2px}.col-checkbox-toggle{display:inline-flex;align-items:center;gap:5px;font-size:.675rem;font-weight:500;color:#475569;cursor:pointer;-webkit-user-select:none;user-select:none}.btn-add-mapping{display:inline-flex;align-items:center;background:#eff6ff;border:1px solid #bfdbfe;color:#2563eb;font-size:.65rem;font-weight:600;padding:2px 6px;border-radius:4px;cursor:pointer;transition:all .12s ease}.btn-add-mapping:hover{background:#dbeafe}.mapping-pair-row{display:flex;align-items:center;gap:6px;margin-top:4px}.active-ds-badge{background:#eff6ff;color:#2563eb;font-size:.65rem;font-weight:700;padding:1px 6px;border-radius:4px;border:1px solid #bfdbfe;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.source-type-switcher{display:flex;background:#f1f5f9;border:1px solid var(--rpt-color-border, #cbd5e1);border-radius:6px;padding:2px;gap:2px;margin-bottom:12px}.source-tab-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:6px 4px;font-size:.725rem;font-weight:600;color:var(--rpt-color-text-muted, #64748b);background:transparent;border:none;border-radius:4px;cursor:pointer;transition:all .12s ease}.source-tab-btn:hover{color:var(--rpt-color-text, #0f172a)}.source-tab-btn.active{background:#fff;color:var(--rpt-color-primary, #2563eb);box-shadow:0 1px 2px #0000000f}.procedure-params-section{margin-top:14px;padding:0;background:transparent;border:none}.params-section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;padding-bottom:4px;border-bottom:1px solid var(--rpt-color-border, #e2e8f0)}.params-header-left{display:flex;align-items:center;gap:6px}.params-title{font-size:.725rem;font-weight:700;color:#334155;text-transform:uppercase;letter-spacing:.04em}.params-count-badge{font-size:.625rem;font-weight:700;color:#2563eb;background:#eff6ff;border:1px solid #bfdbfe;border-radius:9999px;padding:0 6px;line-height:16px}.param-cards-list{display:flex;flex-direction:column;gap:10px;width:100%;box-sizing:border-box}.empty-params-hint{font-size:.725rem;color:#64748b;font-style:italic;padding:12px;text-align:center;background:#f8fafc;border:1px dashed #cbd5e1;border-radius:6px}\n"] }]
+        }], ctorParameters: () => [] });
+
+class PropertyEditorReportComponent {
+    definition = input.required();
+    updateReport = output();
+    updateLayout = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PropertyEditorReportComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: PropertyEditorReportComponent, isStandalone: true, selector: "rpt-property-editor-report", inputs: { definition: { classPropertyName: "definition", publicName: "definition", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { updateReport: "updateReport", updateLayout: "updateLayout" }, ngImport: i0, template: `
+    <div class="props-form">
+      <div class="property-group">
+        <div class="group-title">Report Definition</div>
+
+        <div class="field-row">
+          <label class="field-label">Report Name</label>
+          <input
+            type="text"
+            class="field-input"
+            [ngModel]="definition().name"
+            (ngModelChange)="updateReport.emit({ field: 'name', value: $event })"
+          />
         </div>
 
-        <!-- Binding Mode Toggle Buttons (Always in Advanced mode, or when not auto session in Simple mode) -->
-        @if (isAdvancedMode() || !isAutoSessionDerived()) {
-          <div class="binding-mode-tabs">
-            @if (sessionMatch()) {
-              <button
-                type="button"
-                class="mode-btn"
-                [class.active]="activeMode() === 'session'"
-                (click)="setMode('session')"
-                title="Auto-bound to host session context"
-              >
-                <rpt-icon name="user" [size]="10" />
-                <span>Session</span>
-              </button>
-            }
-            <button
-              type="button"
-              class="mode-btn"
-              [class.active]="activeMode() === 'control'"
-              (click)="setMode('control')"
-              title="Link value to another field on canvas (e.g. Branch dropdown)"
-            >
-              <rpt-icon name="link" [size]="10" />
-              <span>Form Field</span>
-            </button>
-            <button
-              type="button"
-              class="mode-btn"
-              [class.active]="activeMode() === 'fixed'"
-              (click)="setMode('fixed')"
-              title="Use a static fixed value"
-            >
-              <rpt-icon name="edit" [size]="10" />
-              <span>Fixed</span>
-            </button>
-            <button
-              type="button"
-              class="mode-btn"
-              [class.active]="activeMode() === 'context'"
-              (click)="setMode('context')"
-              title="Use system context presets (e.g. Today, Month Start)"
-            >
-              <rpt-icon name="clock" [size]="10" />
-              <span>Preset</span>
-            </button>
-            @if (isAdvancedMode()) {
-              <button
-                type="button"
-                class="mode-btn"
-                [class.active]="activeMode() === 'custom'"
-                (click)="setMode('custom')"
-                title="Manual expression with {{ '{{' }}mustache{{ '}}' }}"
-              >
-                <rpt-icon name="code" [size]="10" />
-                <span>Expr</span>
-              </button>
-            }
-          </div>
-        }
+        <div class="field-row">
+          <label class="field-label">Description</label>
+          <textarea
+            class="field-textarea"
+            rows="3"
+            [ngModel]="definition().description"
+            (ngModelChange)="updateReport.emit({ field: 'description', value: $event })"
+          ></textarea>
+        </div>
       </div>
 
-      <!-- Mode-specific Input Controls -->
-      <div class="param-body">
-        <!-- 0. AUTO SESSION DERIVED (Simple Mode default or Session mode) -->
-        @if (activeMode() === 'session' && sessionMatch()) {
-          <div class="session-box">
-            <div class="session-box-text">
-              <rpt-icon name="user" [size]="12" class="session-icon" />
-              <span>
-                Derived from <strong>{{ sessionMatch()?.sessionKey }}</strong> ({{ sessionMatch()?.friendlyLabel }})
-              </span>
-            </div>
-            <div class="session-val-tag">
-              Current: <strong>{{ sessionMatch()?.value ?? '(none)' }}</strong>
-            </div>
-          </div>
-        }
+      <div class="property-group">
+        <div class="group-title">Page Grid Layout</div>
 
-        <!-- 1. FORM CONTROL LINKER -->
-        @if (activeMode() === 'control') {
-          <div class="linker-row">
-            <rpt-icon name="link" [size]="12" class="linker-icon" />
-            <select
-              class="field-select linker-select"
-              [ngModel]="selectedControlKey()"
-              (ngModelChange)="onControlSelected($event)"
-            >
-              <option value="">-- Choose Form Field on Canvas --</option>
-              @for (field of compatibleControls(); track field.key || field.id) {
-                <option [value]="field.key || field.id">
-                  {{ field.label || field.key }} ({{ field.type }})
-                </option>
-              }
-            </select>
-          </div>
-          @if (!selectedControlKey() && compatibleControls().length === 0) {
-            <div class="empty-hint">No other controls on canvas. Add a dropdown or input first.</div>
-          }
-        }
+        <div class="field-row">
+          <label class="field-label">Total Columns</label>
+          <select
+            class="field-select"
+            [ngModel]="definition().layout.columns"
+            (ngModelChange)="updateLayout.emit({ field: 'columns', value: +$event })"
+          >
+            <option [value]="12">12 Columns (Standard)</option>
+            <option [value]="16">16 Columns (Dense)</option>
+            <option [value]="24">24 Columns (Ultra-wide)</option>
+          </select>
+        </div>
 
-        <!-- 2. FIXED VALUE -->
-        @if (activeMode() === 'fixed') {
-          @switch (param().dataType) {
-            @case ('boolean') {
-              <label class="toggle-switch">
-                <input
-                  type="checkbox"
-                  [ngModel]="booleanFixedValue()"
-                  (ngModelChange)="onBooleanChanged($event)"
-                />
-                <span class="toggle-text">{{ booleanFixedValue() ? 'Active / Yes' : 'Inactive / No' }}</span>
-              </label>
-            }
-            @case ('number') {
-              <input
-                type="number"
-                class="field-input"
-                placeholder="Enter number (e.g. 100)"
-                [ngModel]="currentValue()"
-                (ngModelChange)="onFixedValueChanged($event)"
-              />
-            }
-            @case ('date') {
-              <input
-                type="date"
-                class="field-input"
-                [ngModel]="currentValue()"
-                (ngModelChange)="onFixedValueChanged($event)"
-              />
-            }
-            @default {
-              <input
-                type="text"
-                class="field-input"
-                placeholder="Enter fixed value"
-                [ngModel]="currentValue()"
-                (ngModelChange)="onFixedValueChanged($event)"
-              />
-            }
-          }
-        }
+        <div class="field-row">
+          <label class="field-label">Cell Gap (px)</label>
+          <input
+            type="number"
+            class="field-input"
+            min="0"
+            max="64"
+            [ngModel]="definition().layout.gap ?? 16"
+            (ngModelChange)="updateLayout.emit({ field: 'gap', value: +$event })"
+          />
+        </div>
 
-        <!-- 3. SYSTEM CONTEXT -->
-        @if (activeMode() === 'context') {
+        <div class="field-row">
+          <label class="field-label">Padding (px)</label>
+          <input
+            type="number"
+            class="field-input"
+            min="0"
+            max="64"
+            [ngModel]="definition().layout.padding ?? 24"
+            (ngModelChange)="updateLayout.emit({ field: 'padding', value: +$event })"
+          />
+        </div>
+
+        <div class="field-row">
+          <label class="field-label">Direction</label>
           <select
             class="field-select"
-            [ngModel]="selectedContextKey()"
-            (ngModelChange)="onContextSelected($event)"
+            [ngModel]="definition().layout.direction ?? 'ltr'"
+            (ngModelChange)="updateLayout.emit({ field: 'direction', value: $event })"
           >
-            <option value="">-- Choose System Context Value --</option>
-            <option value="{{ '{{' }}context.branchId{{ '}}' }}">Current User's Branch</option>
-            <option value="{{ '{{' }}context.userId{{ '}}' }}">Current User ID</option>
-            <option value="{{ '{{' }}context.tenantId{{ '}}' }}">Current Company / Tenant</option>
-            <option value="{{ '{{' }}context.today{{ '}}' }}">Today's Date</option>
-            <option value="{{ '{{' }}context.startOfMonth{{ '}}' }}">First Day of Current Month</option>
+            <option value="ltr">Left to Right (LTR)</option>
+            <option value="rtl">Right to Left (RTL)</option>
           </select>
-        }
+        </div>
+      </div>
+    </div>
+  `, isInline: true, styles: [".property-group{display:flex;flex-direction:column;gap:12px}.group-title{font-size:.7rem;font-weight:700;color:var(--rpt-color-text-muted, #64748b);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--rpt-color-border, #e2e8f0);padding-bottom:4px}.field-row{display:flex;flex-direction:column;gap:4px}.field-label-row{display:flex;align-items:center;justify-content:space-between}.field-badge-val{font-size:.65rem;font-weight:600;color:var(--rpt-color-primary, #2563eb);background:#eff6ff;border:1px solid #bfdbfe;padding:1px 6px;border-radius:9999px}.field-label{font-size:.7rem;font-weight:600;color:var(--rpt-color-text, #0f172a)}.field-input,.field-select,.field-textarea{width:100%;box-sizing:border-box;border:1px solid var(--rpt-color-border, #cbd5e1);border-radius:var(--rpt-border-radius-sm, 4px);padding:6px 10px;font-size:var(--rpt-font-size-sm, .75rem);color:var(--rpt-color-text, #0f172a);background:#fff;outline:none;transition:all var(--rpt-transition-speed, .15s) ease}.field-select{appearance:none;-webkit-appearance:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right 10px center;background-size:13px 13px;padding-right:28px;cursor:pointer}.field-input:focus,.field-select:focus,.field-textarea:focus{border-color:var(--rpt-color-primary, #2563eb);box-shadow:var(--rpt-box-shadow-focus, 0 0 0 3px rgba(37, 99, 235, .25))}.checkbox-toggle{display:inline-flex;align-items:center;gap:8px;font-size:.75rem;font-weight:500;color:var(--rpt-color-text, #0f172a);cursor:pointer}.preset-pill-group{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}.preset-pill{background:#f1f5f9;border:1px solid #e2e8f0;border-radius:4px;padding:2px 8px;font-size:.65rem;font-weight:600;color:#475569;cursor:pointer;transition:all .12s ease}.preset-pill:hover{background:#e2e8f0;color:#0f172a;border-color:#cbd5e1}.preset-pill-active{background:var(--rpt-color-primary, #2563eb)!important;color:#fff!important;border-color:var(--rpt-color-primary, #2563eb)!important}.preset-pill-reset{color:var(--rpt-color-primary, #2563eb);background:#eff6ff;border-color:#bfdbfe}.preset-pill-reset:hover{background:#dbeafe;color:#1d4ed8;border-color:#93c5fd}\n", ".props-form{display:flex;flex-direction:column;gap:20px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PropertyEditorReportComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rpt-property-editor-report', standalone: true, imports: [CommonModule, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="props-form">
+      <div class="property-group">
+        <div class="group-title">Report Definition</div>
 
-        <!-- 4. CUSTOM EXPRESSION -->
-        @if (activeMode() === 'custom') {
+        <div class="field-row">
+          <label class="field-label">Report Name</label>
           <input
             type="text"
-            class="field-input monospace-input"
-            placeholder="e.g. {{ '{{' }}form.branchField ?? 1{{ '}}' }}"
-            [ngModel]="currentValue()"
-            (ngModelChange)="onFixedValueChanged($event)"
+            class="field-input"
+            [ngModel]="definition().name"
+            (ngModelChange)="updateReport.emit({ field: 'name', value: $event })"
           />
-        }
-      </div>
-
-      @if (param().description && isAdvancedMode()) {
-        <div class="param-desc">{{ param().description }}</div>
-      }
-    </div>
-  `, isInline: true, styles: [".param-card{background:#f8fafc;border:1px solid var(--rpt-color-border, #e2e8f0);border-radius:6px;padding:8px 10px;display:flex;flex-direction:column;gap:6px;transition:all .12s ease}.param-card:hover{border-color:#cbd5e1}.param-card.session-bound{background:#f0fdf4;border-color:#bbf7d0}.param-header{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}.param-title-wrap{display:flex;align-items:center;gap:6px}.param-label{font-size:.76rem;font-weight:600;color:#1e293b}.param-type-badge{font-size:.65rem;padding:1px 5px;border-radius:4px;background:#e2e8f0;color:#475569;text-transform:capitalize}.session-auto-badge{font-size:.62rem;font-weight:600;padding:1px 5px;border-radius:4px;background:#dcfce7;color:#15803d;border:1px solid #bbf7d0}.required-warn-badge{font-size:.62rem;font-weight:600;padding:1px 5px;border-radius:4px;background:#fef2f2;color:#b91c1c;border:1px solid #fecaca}.session-box{display:flex;align-items:center;justify-content:space-between;background:#fff;border:1px solid #bbf7d0;border-radius:5px;padding:5px 8px;gap:8px}.session-box-text{display:flex;align-items:center;gap:5px;font-size:.7rem;color:#166534}.session-icon{color:#16a34a}.session-val-tag{font-size:.68rem;color:#15803d;background:#dcfce7;padding:1px 6px;border-radius:4px}.param-tech-badge{font-size:.65rem;font-family:monospace;padding:1px 5px;border-radius:4px;background:#eff6ff;color:#2563eb}.binding-mode-tabs{display:inline-flex;background:#e2e8f0;border-radius:4px;padding:2px;gap:2px}.mode-btn{display:inline-flex;align-items:center;gap:3px;padding:3px 6px;font-size:.65rem;font-weight:500;background:transparent;color:#64748b;border:none;border-radius:3px;cursor:pointer;transition:all .1s ease}.mode-btn:hover{color:#0f172a}.mode-btn.active{background:#fff;color:var(--rpt-color-primary, #2563eb);box-shadow:0 1px 2px #0000000d;font-weight:600}.param-body{display:flex;flex-direction:column;gap:4px}.linker-row{display:flex;align-items:center;gap:6px;position:relative}.linker-icon{color:#2563eb;flex-shrink:0}.linker-select{flex:1;border-color:#bfdbfe;background-color:#eff6ff;font-weight:500;color:#1e40af}.empty-hint{font-size:.68rem;color:#94a3b8;font-style:italic}.toggle-switch{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-size:.72rem;color:#334155}.monospace-input{font-family:monospace;font-size:.72rem}.param-desc{font-size:.65rem;color:#64748b}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: RptIconComponent, selector: "rpt-icon", inputs: ["name", "size", "color", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ParameterBindingEditorComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'rpt-parameter-binding-editor', standalone: true, imports: [CommonModule, FormsModule, RptIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <div class="param-card" [class.session-bound]="isAutoSessionDerived()">
-      <div class="param-header">
-        <div class="param-title-wrap">
-          <span class="param-label">{{ friendlyLabel() }}</span>
-          @if (isAdvancedMode()) {
-            <span class="param-tech-badge">{{ param().name }} ({{ param().sqlType }})</span>
-          } @else {
-            <span class="param-type-badge">{{ displayType() }}</span>
-          }
-          @if (isAutoSessionDerived()) {
-            <span class="session-auto-badge">Auto Session</span>
-          } @else if (param().required && !hasValue()) {
-            <span class="required-warn-badge">Required</span>
-          }
         </div>
 
-        <!-- Binding Mode Toggle Buttons (Always in Advanced mode, or when not auto session in Simple mode) -->
-        @if (isAdvancedMode() || !isAutoSessionDerived()) {
-          <div class="binding-mode-tabs">
-            @if (sessionMatch()) {
-              <button
-                type="button"
-                class="mode-btn"
-                [class.active]="activeMode() === 'session'"
-                (click)="setMode('session')"
-                title="Auto-bound to host session context"
-              >
-                <rpt-icon name="user" [size]="10" />
-                <span>Session</span>
-              </button>
-            }
-            <button
-              type="button"
-              class="mode-btn"
-              [class.active]="activeMode() === 'control'"
-              (click)="setMode('control')"
-              title="Link value to another field on canvas (e.g. Branch dropdown)"
-            >
-              <rpt-icon name="link" [size]="10" />
-              <span>Form Field</span>
-            </button>
-            <button
-              type="button"
-              class="mode-btn"
-              [class.active]="activeMode() === 'fixed'"
-              (click)="setMode('fixed')"
-              title="Use a static fixed value"
-            >
-              <rpt-icon name="edit" [size]="10" />
-              <span>Fixed</span>
-            </button>
-            <button
-              type="button"
-              class="mode-btn"
-              [class.active]="activeMode() === 'context'"
-              (click)="setMode('context')"
-              title="Use system context presets (e.g. Today, Month Start)"
-            >
-              <rpt-icon name="clock" [size]="10" />
-              <span>Preset</span>
-            </button>
-            @if (isAdvancedMode()) {
-              <button
-                type="button"
-                class="mode-btn"
-                [class.active]="activeMode() === 'custom'"
-                (click)="setMode('custom')"
-                title="Manual expression with {{ '{{' }}mustache{{ '}}' }}"
-              >
-                <rpt-icon name="code" [size]="10" />
-                <span>Expr</span>
-              </button>
-            }
-          </div>
-        }
+        <div class="field-row">
+          <label class="field-label">Description</label>
+          <textarea
+            class="field-textarea"
+            rows="3"
+            [ngModel]="definition().description"
+            (ngModelChange)="updateReport.emit({ field: 'description', value: $event })"
+          ></textarea>
+        </div>
       </div>
 
-      <!-- Mode-specific Input Controls -->
-      <div class="param-body">
-        <!-- 0. AUTO SESSION DERIVED (Simple Mode default or Session mode) -->
-        @if (activeMode() === 'session' && sessionMatch()) {
-          <div class="session-box">
-            <div class="session-box-text">
-              <rpt-icon name="user" [size]="12" class="session-icon" />
-              <span>
-                Derived from <strong>{{ sessionMatch()?.sessionKey }}</strong> ({{ sessionMatch()?.friendlyLabel }})
-              </span>
-            </div>
-            <div class="session-val-tag">
-              Current: <strong>{{ sessionMatch()?.value ?? '(none)' }}</strong>
-            </div>
-          </div>
-        }
-
-        <!-- 1. FORM CONTROL LINKER -->
-        @if (activeMode() === 'control') {
-          <div class="linker-row">
-            <rpt-icon name="link" [size]="12" class="linker-icon" />
-            <select
-              class="field-select linker-select"
-              [ngModel]="selectedControlKey()"
-              (ngModelChange)="onControlSelected($event)"
-            >
-              <option value="">-- Choose Form Field on Canvas --</option>
-              @for (field of compatibleControls(); track field.key || field.id) {
-                <option [value]="field.key || field.id">
-                  {{ field.label || field.key }} ({{ field.type }})
-                </option>
-              }
-            </select>
-          </div>
-          @if (!selectedControlKey() && compatibleControls().length === 0) {
-            <div class="empty-hint">No other controls on canvas. Add a dropdown or input first.</div>
-          }
-        }
-
-        <!-- 2. FIXED VALUE -->
-        @if (activeMode() === 'fixed') {
-          @switch (param().dataType) {
-            @case ('boolean') {
-              <label class="toggle-switch">
-                <input
-                  type="checkbox"
-                  [ngModel]="booleanFixedValue()"
-                  (ngModelChange)="onBooleanChanged($event)"
-                />
-                <span class="toggle-text">{{ booleanFixedValue() ? 'Active / Yes' : 'Inactive / No' }}</span>
-              </label>
-            }
-            @case ('number') {
-              <input
-                type="number"
-                class="field-input"
-                placeholder="Enter number (e.g. 100)"
-                [ngModel]="currentValue()"
-                (ngModelChange)="onFixedValueChanged($event)"
-              />
-            }
-            @case ('date') {
-              <input
-                type="date"
-                class="field-input"
-                [ngModel]="currentValue()"
-                (ngModelChange)="onFixedValueChanged($event)"
-              />
-            }
-            @default {
-              <input
-                type="text"
-                class="field-input"
-                placeholder="Enter fixed value"
-                [ngModel]="currentValue()"
-                (ngModelChange)="onFixedValueChanged($event)"
-              />
-            }
-          }
-        }
+      <div class="property-group">
+        <div class="group-title">Page Grid Layout</div>
 
-        <!-- 3. SYSTEM CONTEXT -->
-        @if (activeMode() === 'context') {
+        <div class="field-row">
+          <label class="field-label">Total Columns</label>
           <select
             class="field-select"
-            [ngModel]="selectedContextKey()"
-            (ngModelChange)="onContextSelected($event)"
+            [ngModel]="definition().layout.columns"
+            (ngModelChange)="updateLayout.emit({ field: 'columns', value: +$event })"
           >
-            <option value="">-- Choose System Context Value --</option>
-            <option value="{{ '{{' }}context.branchId{{ '}}' }}">Current User's Branch</option>
-            <option value="{{ '{{' }}context.userId{{ '}}' }}">Current User ID</option>
-            <option value="{{ '{{' }}context.tenantId{{ '}}' }}">Current Company / Tenant</option>
-            <option value="{{ '{{' }}context.today{{ '}}' }}">Today's Date</option>
-            <option value="{{ '{{' }}context.startOfMonth{{ '}}' }}">First Day of Current Month</option>
+            <option [value]="12">12 Columns (Standard)</option>
+            <option [value]="16">16 Columns (Dense)</option>
+            <option [value]="24">24 Columns (Ultra-wide)</option>
           </select>
-        }
+        </div>
 
-        <!-- 4. CUSTOM EXPRESSION -->
-        @if (activeMode() === 'custom') {
+        <div class="field-row">
+          <label class="field-label">Cell Gap (px)</label>
           <input
-            type="text"
-            class="field-input monospace-input"
-            placeholder="e.g. {{ '{{' }}form.branchField ?? 1{{ '}}' }}"
-            [ngModel]="currentValue()"
-            (ngModelChange)="onFixedValueChanged($event)"
+            type="number"
+            class="field-input"
+            min="0"
+            max="64"
+            [ngModel]="definition().layout.gap ?? 16"
+            (ngModelChange)="updateLayout.emit({ field: 'gap', value: +$event })"
           />
-        }
-      </div>
+        </div>
 
-      @if (param().description && isAdvancedMode()) {
-        <div class="param-desc">{{ param().description }}</div>
-      }
+        <div class="field-row">
+          <label class="field-label">Padding (px)</label>
+          <input
+            type="number"
+            class="field-input"
+            min="0"
+            max="64"
+            [ngModel]="definition().layout.padding ?? 24"
+            (ngModelChange)="updateLayout.emit({ field: 'padding', value: +$event })"
+          />
+        </div>
+
+        <div class="field-row">
+          <label class="field-label">Direction</label>
+          <select
+            class="field-select"
+            [ngModel]="definition().layout.direction ?? 'ltr'"
+            (ngModelChange)="updateLayout.emit({ field: 'direction', value: $event })"
+          >
+            <option value="ltr">Left to Right (LTR)</option>
+            <option value="rtl">Right to Left (RTL)</option>
+          </select>
+        </div>
+      </div>
     </div>
-  `, styles: [".param-card{background:#f8fafc;border:1px solid var(--rpt-color-border, #e2e8f0);border-radius:6px;padding:8px 10px;display:flex;flex-direction:column;gap:6px;transition:all .12s ease}.param-card:hover{border-color:#cbd5e1}.param-card.session-bound{background:#f0fdf4;border-color:#bbf7d0}.param-header{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}.param-title-wrap{display:flex;align-items:center;gap:6px}.param-label{font-size:.76rem;font-weight:600;color:#1e293b}.param-type-badge{font-size:.65rem;padding:1px 5px;border-radius:4px;background:#e2e8f0;color:#475569;text-transform:capitalize}.session-auto-badge{font-size:.62rem;font-weight:600;padding:1px 5px;border-radius:4px;background:#dcfce7;color:#15803d;border:1px solid #bbf7d0}.required-warn-badge{font-size:.62rem;font-weight:600;padding:1px 5px;border-radius:4px;background:#fef2f2;color:#b91c1c;border:1px solid #fecaca}.session-box{display:flex;align-items:center;justify-content:space-between;background:#fff;border:1px solid #bbf7d0;border-radius:5px;padding:5px 8px;gap:8px}.session-box-text{display:flex;align-items:center;gap:5px;font-size:.7rem;color:#166534}.session-icon{color:#16a34a}.session-val-tag{font-size:.68rem;color:#15803d;background:#dcfce7;padding:1px 6px;border-radius:4px}.param-tech-badge{font-size:.65rem;font-family:monospace;padding:1px 5px;border-radius:4px;background:#eff6ff;color:#2563eb}.binding-mode-tabs{display:inline-flex;background:#e2e8f0;border-radius:4px;padding:2px;gap:2px}.mode-btn{display:inline-flex;align-items:center;gap:3px;padding:3px 6px;font-size:.65rem;font-weight:500;background:transparent;color:#64748b;border:none;border-radius:3px;cursor:pointer;transition:all .1s ease}.mode-btn:hover{color:#0f172a}.mode-btn.active{background:#fff;color:var(--rpt-color-primary, #2563eb);box-shadow:0 1px 2px #0000000d;font-weight:600}.param-body{display:flex;flex-direction:column;gap:4px}.linker-row{display:flex;align-items:center;gap:6px;position:relative}.linker-icon{color:#2563eb;flex-shrink:0}.linker-select{flex:1;border-color:#bfdbfe;background-color:#eff6ff;font-weight:500;color:#1e40af}.empty-hint{font-size:.68rem;color:#94a3b8;font-style:italic}.toggle-switch{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-size:.72rem;color:#334155}.monospace-input{font-family:monospace;font-size:.72rem}.param-desc{font-size:.65rem;color:#64748b}\n"] }]
+  `, styles: [".property-group{display:flex;flex-direction:column;gap:12px}.group-title{font-size:.7rem;font-weight:700;color:var(--rpt-color-text-muted, #64748b);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--rpt-color-border, #e2e8f0);padding-bottom:4px}.field-row{display:flex;flex-direction:column;gap:4px}.field-label-row{display:flex;align-items:center;justify-content:space-between}.field-badge-val{font-size:.65rem;font-weight:600;color:var(--rpt-color-primary, #2563eb);background:#eff6ff;border:1px solid #bfdbfe;padding:1px 6px;border-radius:9999px}.field-label{font-size:.7rem;font-weight:600;color:var(--rpt-color-text, #0f172a)}.field-input,.field-select,.field-textarea{width:100%;box-sizing:border-box;border:1px solid var(--rpt-color-border, #cbd5e1);border-radius:var(--rpt-border-radius-sm, 4px);padding:6px 10px;font-size:var(--rpt-font-size-sm, .75rem);color:var(--rpt-color-text, #0f172a);background:#fff;outline:none;transition:all var(--rpt-transition-speed, .15s) ease}.field-select{appearance:none;-webkit-appearance:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right 10px center;background-size:13px 13px;padding-right:28px;cursor:pointer}.field-input:focus,.field-select:focus,.field-textarea:focus{border-color:var(--rpt-color-primary, #2563eb);box-shadow:var(--rpt-box-shadow-focus, 0 0 0 3px rgba(37, 99, 235, .25))}.checkbox-toggle{display:inline-flex;align-items:center;gap:8px;font-size:.75rem;font-weight:500;color:var(--rpt-color-text, #0f172a);cursor:pointer}.preset-pill-group{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}.preset-pill{background:#f1f5f9;border:1px solid #e2e8f0;border-radius:4px;padding:2px 8px;font-size:.65rem;font-weight:600;color:#475569;cursor:pointer;transition:all .12s ease}.preset-pill:hover{background:#e2e8f0;color:#0f172a;border-color:#cbd5e1}.preset-pill-active{background:var(--rpt-color-primary, #2563eb)!important;color:#fff!important;border-color:var(--rpt-color-primary, #2563eb)!important}.preset-pill-reset{color:var(--rpt-color-primary, #2563eb);background:#eff6ff;border-color:#bfdbfe}.preset-pill-reset:hover{background:#dbeafe;color:#1d4ed8;border-color:#93c5fd}\n", ".props-form{display:flex;flex-direction:column;gap:20px}\n"] }]
         }] });
 
 class PropertyEditorDatasourceComponent {
@@ -10993,8 +11594,22 @@ class PropertyEditorDatasourceComponent {
         const params = paramsList || this.procedureParameters();
         if (!params || params.length === 0)
             return;
+        const allowed = new Set();
+        for (const param of params) {
+            const clean = param.name.replace(/^@/, '').toLowerCase();
+            allowed.add(clean);
+            allowed.add(`@${clean}`);
+            allowed.add(param.name.toLowerCase());
+        }
         const currentMappings = { ...(this.comp().dataSource?.parameterMappings ?? {}) };
         let changed = false;
+        // Prune orphaned keys that do not belong to this stored procedure
+        for (const key of Object.keys(currentMappings)) {
+            if (!allowed.has(key.toLowerCase())) {
+                delete currentMappings[key];
+                changed = true;
+            }
+        }
         for (const param of params) {
             const clean = param.name.replace(/^@/, '');
             const existing = currentMappings[param.name] ?? currentMappings[clean];
@@ -11039,8 +11654,22 @@ class PropertyEditorDatasourceComponent {
         const params = paramsList || this.procedureParameters();
         if (!params || params.length === 0)
             return;
+        const allowed = new Set();
+        for (const param of params) {
+            const clean = param.name.replace(/^@/, '').toLowerCase();
+            allowed.add(clean);
+            allowed.add(`@${clean}`);
+            allowed.add(param.name.toLowerCase());
+        }
         const currentMappings = { ...(this.comp().dataSource?.parameterMappings ?? {}) };
         let changed = false;
+        // Prune orphaned keys that do not belong to this stored procedure
+        for (const key of Object.keys(currentMappings)) {
+            if (!allowed.has(key.toLowerCase())) {
+                delete currentMappings[key];
+                changed = true;
+            }
+        }
         for (const param of params) {
             const clean = param.name.replace(/^@/, '');
             const existing = currentMappings[param.name] ?? currentMappings[clean];
@@ -11118,6 +11747,7 @@ class PropertyEditorDatasourceComponent {
                 sourceType: 'static',
                 displayField: '',
                 valueField: '',
+                parameterMappings: {},
             });
             return;
         }
@@ -11134,9 +11764,11 @@ class PropertyEditorDatasourceComponent {
             schema: 'dbo',
             displayField: '',
             valueField: '',
+            parameterMappings: isValidForType ? (this.comp().dataSource?.parameterMappings ?? {}) : {},
         });
     }
     onEntitySelected(entityName) {
+        const isDifferent = entityName !== this.comp().dataSource?.entityName;
         this.updateDataSource.emit({
             ...(this.comp().dataSource ?? { displayField: '', valueField: '' }),
             sourceType: this.currentSourceType(),
@@ -11144,6 +11776,7 @@ class PropertyEditorDatasourceComponent {
             schema: 'dbo',
             valueField: '',
             displayField: '',
+            parameterMappings: isDifferent ? {} : (this.comp().dataSource?.parameterMappings ?? {}),
         });
     }
     onValueFieldChanged(valueField) {
@@ -11212,11 +11845,11 @@ class PropertyEditorDatasourceComponent {
         this.updateProperty.emit({ key: 'options', value: current });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PropertyEditorDatasourceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: PropertyEditorDatasourceComponent, isStandalone: true, selector: "rpt-property-editor-datasource", inputs: { comp: { classPropertyName: "comp", publicName: "comp", isSignal: true, isRequired: true, transformFunction: null }, allComponents: { classPropertyName: "allComponents", publicName: "allComponents", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { updateDataSource: "updateDataSource", updateProperty: "updateProperty" }, ngImport: i0, template: "    <div class=\"property-group\">\n      <!-- 1. Header with Simple / Advanced Mode Toggle -->\n      <div class=\"datasource-header-bar\">\n        <div class=\"group-title\">Options Data Source</div>\n        <div class=\"mode-toggle-pill\">\n          <button\n            type=\"button\"\n            class=\"pill-btn\"\n            [class.active]=\"!isAdvancedMode()\"\n            (click)=\"isAdvancedMode.set(false)\"\n            title=\"Simplified view for business users with friendly names\"\n          >\n            Simple\n          </button>\n          <button\n            type=\"button\"\n            class=\"pill-btn\"\n            [class.active]=\"isAdvancedMode()\"\n            (click)=\"isAdvancedMode.set(true)\"\n            title=\"Technical view with SQL types and expressions\"\n          >\n            Advanced\n          </button>\n        </div>\n      </div>\n\n      <!-- 2. Source Type Segmented Switcher -->\n      <div class=\"source-type-switcher\">\n        <button\n          type=\"button\"\n          class=\"source-tab-btn\"\n          [class.active]=\"currentSourceType() === 'table'\"\n          (click)=\"setSourceType('table')\"\n        >\n          <rpt-icon name=\"table\" [size]=\"12\" />\n          <span>{{ isAdvancedMode() ? 'Table / View' : 'Database Table' }}</span>\n        </button>\n        <button\n          type=\"button\"\n          class=\"source-tab-btn\"\n          [class.active]=\"currentSourceType() === 'procedure'\"\n          (click)=\"setSourceType('procedure')\"\n        >\n          <rpt-icon name=\"code\" [size]=\"12\" />\n          <span>{{ isAdvancedMode() ? 'Stored Proc' : 'Data Query' }}</span>\n        </button>\n        <button\n          type=\"button\"\n          class=\"source-tab-btn\"\n          [class.active]=\"currentSourceType() === 'static'\"\n          (click)=\"setSourceType('static')\"\n        >\n          <rpt-icon name=\"edit\" [size]=\"12\" />\n          <span>Static List</span>\n        </button>\n      </div>\n\n      <!-- 3A. DATABASE TABLE / VIEW CONFIGURATION -->\n      @if (currentSourceType() === 'table') {\n        <div class=\"field-row\">\n          <div class=\"field-label-row\">\n            <label class=\"field-label\">\n              {{ isAdvancedMode() ? 'Database Table / View' : 'Select Data Source' }}\n            </label>\n            <button\n              type=\"button\"\n              class=\"btn-refresh-entities\"\n              (click)=\"loadEntities()\"\n              title=\"Refresh available tables from backend\"\n            >\n              <rpt-icon name=\"refresh\" [size]=\"11\" />\n              <span>Refresh</span>\n            </button>\n          </div>\n          <select\n            class=\"field-select\"\n            [ngModel]=\"selectedEntity()\"\n            (ngModelChange)=\"onEntitySelected($event)\"\n            [disabled]=\"isLoadingEntities()\"\n          >\n            @if (isLoadingEntities()) {\n              <option value=\"\">Loading tables from database...</option>\n            } @else if (availableTables().length === 0) {\n              <option value=\"\">-- No tables found (Click Refresh) --</option>\n            } @else {\n              <option value=\"\">-- Choose Data Table --</option>\n            }\n            @for (tbl of availableTables(); track tbl.name) {\n              <option [value]=\"tbl.name\">\n                @if (isAdvancedMode()) {\n                  {{ tbl.schema }}.{{ tbl.name }} ({{ tbl.type }})\n                } @else {\n                  {{ tbl.displayName }}{{ tbl.category ? ' \u2022 ' + tbl.category : '' }}\n                }\n              </option>\n            }\n          </select>\n        </div>\n\n        @if (selectedEntity()) {\n          <!-- Display Field (Visible text) -->\n          <div class=\"field-row\">\n            <div class=\"field-label-row\">\n              <label class=\"field-label\">\n                {{ isAdvancedMode() ? 'Display Field (Visible Text)' : 'Text Shown in Dropdown' }}\n              </label>\n              @if (!isAdvancedMode()) {\n                <span class=\"auto-badge\" title=\"Auto-detected column for text label\">Auto-detected</span>\n              }\n            </div>\n            <select\n              class=\"field-select\"\n              [ngModel]=\"selectedDisplayField()\"\n              (ngModelChange)=\"onDisplayFieldChanged($event)\"\n            >\n              <option value=\"\">-- Select Display Column --</option>\n              @for (col of entityColumns(); track col.field) {\n                <option [value]=\"col.field\">\n                  {{ col.label }} {{ isAdvancedMode() ? '(' + col.dataType + ')' : '' }}\n                </option>\n              }\n            </select>\n          </div>\n\n          <!-- Value Field (Stored key) -->\n          <div class=\"field-row\">\n            <div class=\"field-label-row\">\n              <label class=\"field-label\">\n                {{ isAdvancedMode() ? 'Value Field (Stored Key)' : 'Internal Value / Key' }}\n              </label>\n              @if (!isAdvancedMode()) {\n                <span class=\"auto-badge\" title=\"Auto-detected column for primary ID\">Auto-detected</span>\n              }\n            </div>\n            <select\n              class=\"field-select\"\n              [ngModel]=\"selectedValueField()\"\n              (ngModelChange)=\"onValueFieldChanged($event)\"\n            >\n              <option value=\"\">-- Select Key Column --</option>\n              @for (col of entityColumns(); track col.field) {\n                <option [value]=\"col.field\">\n                  {{ col.label }} {{ isAdvancedMode() ? '(' + col.dataType + ')' : '' }}\n                </option>\n              }\n            </select>\n          </div>\n\n          <!-- Cascading Dropdown Dependency -->\n          <div class=\"field-row\">\n            <label class=\"field-label\">\n              {{ isAdvancedMode() ? 'Dependent On (Cascading Parent Field)' : 'Filter by Another Field' }}\n            </label>\n            <select\n              class=\"field-select\"\n              [ngModel]=\"selectedDependsOn()\"\n              (ngModelChange)=\"onDependsOnChanged($event)\"\n            >\n              <option value=\"\">-- None (Independent) --</option>\n              @for (other of availableParentFields(); track other.key || other.id) {\n                <option [value]=\"other.key || other.id\">{{ other.label || other.key }}</option>\n              }\n            </select>\n            <span class=\"field-hint\">\n              {{ isAdvancedMode() ? 'Automatically re-queries options when parent field changes.' : 'Only loads options when the selected field changes.' }}\n            </span>\n          </div>\n        }\n      }\n\n      <!-- 3B. STORED PROCEDURE CONFIGURATION -->\n      @if (currentSourceType() === 'procedure') {\n        <div class=\"field-row\">\n          <div class=\"field-label-row\">\n            <label class=\"field-label\">\n              {{ isAdvancedMode() ? 'Stored Procedure' : 'Select Data Procedure' }}\n            </label>\n            <button\n              type=\"button\"\n              class=\"btn-refresh-entities\"\n              (click)=\"loadEntities()\"\n              title=\"Refresh available procedures from backend\"\n            >\n              <rpt-icon name=\"refresh\" [size]=\"11\" />\n              <span>Refresh</span>\n            </button>\n          </div>\n          <select\n            class=\"field-select\"\n            [ngModel]=\"selectedEntity()\"\n            (ngModelChange)=\"onEntitySelected($event)\"\n            [disabled]=\"isLoadingEntities()\"\n          >\n            @if (isLoadingEntities()) {\n              <option value=\"\">Loading stored procedures from database...</option>\n            } @else if (availableProcedures().length === 0) {\n              <option value=\"\">-- No stored procedures found (Click Refresh) --</option>\n            } @else {\n              <option value=\"\">-- Choose Data Query / SP --</option>\n            }\n            @for (sp of availableProcedures(); track sp.name) {\n              <option [value]=\"sp.name\">\n                @if (isAdvancedMode()) {\n                  {{ sp.schema }}.{{ sp.name }}\n                } @else {\n                  {{ sp.displayName }}{{ sp.category ? ' \u2022 ' + sp.category : '' }}\n                }\n              </option>\n            }\n          </select>\n        </div>\n\n        @if (selectedEntity()) {\n          <!-- Visual Parameter Linkers -->\n          @if (procedureParameters().length > 0) {\n            <div class=\"sp-params-group\">\n              <div class=\"params-header-row\">\n                <label class=\"field-label\">\n                  {{ isAdvancedMode() ? 'Procedure Input Parameters' : 'Filter Inputs & Parameters' }}\n                </label>\n                <button\n                  type=\"button\"\n                  class=\"btn-auto-params\"\n                  (click)=\"autoWireAllParameters()\"\n                  title=\"Auto-detect session parameters and add missing filter controls to the canvas\"\n                >\n                  <rpt-icon name=\"check\" [size]=\"11\" />\n                  <span>Auto-Wire Canvas Inputs</span>\n                </button>\n              </div>\n\n              @for (param of procedureParameters(); track param.name) {\n                <rpt-parameter-binding-editor\n                  [param]=\"param\"\n                  [currentValue]=\"getParamValue(param.name)\"\n                  [allComponents]=\"allComponents()\"\n                  [currentComponentId]=\"comp().id\"\n                  [isAdvancedMode]=\"isAdvancedMode()\"\n                  (valueChange)=\"setParamValue(param.name, $event)\"\n                  (linkedFieldChange)=\"onParamLinkedFieldChange($event)\"\n                />\n              }\n            </div>\n          }\n\n          <!-- Display Field (Visible text) -->\n          <div class=\"field-row\">\n            <div class=\"field-label-row\">\n              <label class=\"field-label\">\n                {{ isAdvancedMode() ? 'Display Field (from SP result)' : 'Text Shown in Dropdown' }}\n              </label>\n              @if (!isAdvancedMode()) {\n                <span class=\"auto-badge\">Auto-detected</span>\n              }\n            </div>\n            <select\n              class=\"field-select\"\n              [ngModel]=\"selectedDisplayField()\"\n              (ngModelChange)=\"onDisplayFieldChanged($event)\"\n            >\n              <option value=\"\">-- Select Display Column --</option>\n              @for (col of entityColumns(); track col.field) {\n                <option [value]=\"col.field\">\n                  {{ col.label }} {{ isAdvancedMode() ? '(' + col.dataType + ')' : '' }}\n                </option>\n              }\n            </select>\n          </div>\n\n          <!-- Value Field (Stored key) -->\n          <div class=\"field-row\">\n            <div class=\"field-label-row\">\n              <label class=\"field-label\">\n                {{ isAdvancedMode() ? 'Value Field (from SP result)' : 'Internal Value / Key' }}\n              </label>\n              @if (!isAdvancedMode()) {\n                <span class=\"auto-badge\">Auto-detected</span>\n              }\n            </div>\n            <select\n              class=\"field-select\"\n              [ngModel]=\"selectedValueField()\"\n              (ngModelChange)=\"onValueFieldChanged($event)\"\n            >\n              <option value=\"\">-- Select Key Column --</option>\n              @for (col of entityColumns(); track col.field) {\n                <option [value]=\"col.field\">\n                  {{ col.label }} {{ isAdvancedMode() ? '(' + col.dataType + ')' : '' }}\n                </option>\n              }\n            </select>\n          </div>\n        }\n      }\n\n      <!-- 3C. STATIC OPTIONS EDITOR -->\n      @if (currentSourceType() === 'static') {\n        <div class=\"static-options-wrapper\">\n          <div class=\"static-options-header\">\n            <span class=\"field-label\">Static Options</span>\n            <button type=\"button\" class=\"btn-add-option\" (click)=\"addStaticOption()\">\n              <rpt-icon name=\"plus\" [size]=\"11\" />\n              <span>Add Option</span>\n            </button>\n          </div>\n\n          <div class=\"static-options-list\">\n            @for (opt of staticOptions(); track $index) {\n              <div class=\"static-option-row\">\n                <input\n                  type=\"text\"\n                  class=\"field-input opt-key\"\n                  placeholder=\"Key\"\n                  [ngModel]=\"opt.key\"\n                  (ngModelChange)=\"updateStaticOption($index, 'key', $event)\"\n                />\n                <input\n                  type=\"text\"\n                  class=\"field-input opt-label\"\n                  placeholder=\"Label\"\n                  [ngModel]=\"opt.label\"\n                  (ngModelChange)=\"updateStaticOption($index, 'label', $event)\"\n                />\n                <button\n                  type=\"button\"\n                  class=\"btn-remove-option\"\n                  (click)=\"removeStaticOption($index)\"\n                  title=\"Remove option\"\n                >\n                  <rpt-icon name=\"trash\" [size]=\"12\" />\n                </button>\n              </div>\n            }\n          </div>\n        </div>\n      }\n    </div>", styles: [".property-group{display:flex;flex-direction:column;gap:12px}.group-title{font-size:.7rem;font-weight:700;color:var(--rpt-color-text-muted, #64748b);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--rpt-color-border, #e2e8f0);padding-bottom:4px}.field-row{display:flex;flex-direction:column;gap:4px}.field-label-row{display:flex;align-items:center;justify-content:space-between}.field-badge-val{font-size:.65rem;font-weight:600;color:var(--rpt-color-primary, #2563eb);background:#eff6ff;border:1px solid #bfdbfe;padding:1px 6px;border-radius:9999px}.field-label{font-size:.7rem;font-weight:600;color:var(--rpt-color-text, #0f172a)}.field-input,.field-select,.field-textarea{width:100%;box-sizing:border-box;border:1px solid var(--rpt-color-border, #cbd5e1);border-radius:var(--rpt-border-radius-sm, 4px);padding:6px 10px;font-size:var(--rpt-font-size-sm, .75rem);color:var(--rpt-color-text, #0f172a);background:#fff;outline:none;transition:all var(--rpt-transition-speed, .15s) ease}.field-select{appearance:none;-webkit-appearance:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right 10px center;background-size:13px 13px;padding-right:28px;cursor:pointer}.field-input:focus,.field-select:focus,.field-textarea:focus{border-color:var(--rpt-color-primary, #2563eb);box-shadow:var(--rpt-box-shadow-focus, 0 0 0 3px rgba(37, 99, 235, .25))}.checkbox-toggle{display:inline-flex;align-items:center;gap:8px;font-size:.75rem;font-weight:500;color:var(--rpt-color-text, #0f172a);cursor:pointer}.preset-pill-group{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}.preset-pill{background:#f1f5f9;border:1px solid #e2e8f0;border-radius:4px;padding:2px 8px;font-size:.65rem;font-weight:600;color:#475569;cursor:pointer;transition:all .12s ease}.preset-pill:hover{background:#e2e8f0;color:#0f172a;border-color:#cbd5e1}.preset-pill-active{background:var(--rpt-color-primary, #2563eb)!important;color:#fff!important;border-color:var(--rpt-color-primary, #2563eb)!important}.preset-pill-reset{color:var(--rpt-color-primary, #2563eb);background:#eff6ff;border-color:#bfdbfe}.preset-pill-reset:hover{background:#dbeafe;color:#1d4ed8;border-color:#93c5fd}\n", ".datasource-header-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.mode-toggle-pill{display:inline-flex;background:#e2e8f0;border-radius:12px;padding:2px;gap:2px}.pill-btn{border:none;background:transparent;padding:2px 8px;font-size:.65rem;font-weight:500;color:#64748b;border-radius:10px;cursor:pointer;transition:all .12s ease}.pill-btn:hover{color:#0f172a}.pill-btn.active{background:#fff;color:var(--rpt-color-primary, #2563eb);font-weight:700;box-shadow:0 1px 2px #00000014}.source-type-switcher{display:flex;background:#f1f5f9;border:1px solid var(--rpt-color-border, #cbd5e1);border-radius:6px;padding:2px;gap:2px;margin-bottom:6px}.source-tab-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:6px 4px;font-size:.7rem;font-weight:600;color:var(--rpt-color-text-muted, #64748b);background:transparent;border:none;border-radius:4px;cursor:pointer;transition:all .12s ease}.source-tab-btn:hover{color:var(--rpt-color-text, #0f172a)}.source-tab-btn.active{background:#fff;color:var(--rpt-color-primary, #2563eb);box-shadow:0 1px 2px #0000000d}.btn-refresh-entities{display:inline-flex;align-items:center;gap:4px;border:none;background:transparent;color:var(--rpt-color-primary, #2563eb);font-size:.65rem;font-weight:600;cursor:pointer;padding:0}.btn-refresh-entities:hover{text-decoration:underline}.btn-auto-params{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;font-size:.65rem;font-weight:600;color:#2563eb;background:#eff6ff;border:1px solid #bfdbfe;border-radius:4px;cursor:pointer;transition:all .12s ease}.btn-auto-params:hover{background:#2563eb;color:#fff}.auto-badge{font-size:.62rem;font-weight:600;background:#dcfce7;color:#166534;padding:1px 5px;border-radius:4px}.field-hint{font-size:.65rem;color:var(--rpt-color-text-muted, #94a3b8);margin-top:2px}.sp-params-group{display:flex;flex-direction:column;gap:6px;background:#f8fafc;padding:8px;border-radius:6px;border:1px solid #e2e8f0;margin-bottom:6px}.params-header-row{display:flex;align-items:center;justify-content:space-between}.params-hint{font-size:.64rem;color:#64748b;font-style:italic}.static-options-wrapper{display:flex;flex-direction:column;gap:8px}.static-options-header{display:flex;align-items:center;justify-content:space-between}.btn-add-option{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--rpt-color-border, #cbd5e1);background:#fff;border-radius:4px;padding:3px 8px;font-size:.65rem;font-weight:600;color:var(--rpt-color-primary, #2563eb);cursor:pointer;transition:all .12s ease}.btn-add-option:hover{background:#eff6ff}.static-options-list{display:flex;flex-direction:column;gap:6px}.static-option-row{display:flex;align-items:center;gap:6px}.opt-key{flex:1}.opt-label{flex:1.5}.btn-remove-option{width:24px;height:24px;border:none;background:transparent;color:#94a3b8;border-radius:4px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;padding:0;transition:all .12s ease}.btn-remove-option:hover{background:#fee2e2;color:#ef4444}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: RptIconComponent, selector: "rpt-icon", inputs: ["name", "size", "color", "strokeWidth"] }, { kind: "component", type: ParameterBindingEditorComponent, selector: "rpt-parameter-binding-editor", inputs: ["param", "currentValue", "allComponents", "currentComponentId", "isAdvancedMode"], outputs: ["valueChange", "linkedFieldChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: PropertyEditorDatasourceComponent, isStandalone: true, selector: "rpt-property-editor-datasource", inputs: { comp: { classPropertyName: "comp", publicName: "comp", isSignal: true, isRequired: true, transformFunction: null }, allComponents: { classPropertyName: "allComponents", publicName: "allComponents", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { updateDataSource: "updateDataSource", updateProperty: "updateProperty" }, ngImport: i0, template: "    <div class=\"property-group\">\n      <!-- 1. Header with Simple / Advanced Mode Toggle -->\n      <div class=\"datasource-header-bar\">\n        <div class=\"group-title\">Options Data Source</div>\n        <div class=\"mode-toggle-pill\">\n          <button\n            type=\"button\"\n            class=\"pill-btn\"\n            [class.active]=\"!isAdvancedMode()\"\n            (click)=\"isAdvancedMode.set(false)\"\n            title=\"Simplified view for business users with friendly names\"\n          >\n            Simple\n          </button>\n          <button\n            type=\"button\"\n            class=\"pill-btn\"\n            [class.active]=\"isAdvancedMode()\"\n            (click)=\"isAdvancedMode.set(true)\"\n            title=\"Technical view with SQL types and expressions\"\n          >\n            Advanced\n          </button>\n        </div>\n      </div>\n\n      <div class=\"datasource-guidance-card\">\n        <rpt-icon name=\"info\" [size]=\"12\" />\n        <span>Populates selectable choices in this dropdown filter. For the report's main data and result grid, use the <strong>Grid</strong> tab.</span>\n      </div>\n\n      <!-- 2. Source Type Segmented Switcher -->\n      <div class=\"source-type-switcher\">\n        <button\n          type=\"button\"\n          class=\"source-tab-btn\"\n          [class.active]=\"currentSourceType() === 'table'\"\n          (click)=\"setSourceType('table')\"\n        >\n          <rpt-icon name=\"table\" [size]=\"12\" />\n          <span>{{ isAdvancedMode() ? 'Table / View' : 'Database Table' }}</span>\n        </button>\n        <button\n          type=\"button\"\n          class=\"source-tab-btn\"\n          [class.active]=\"currentSourceType() === 'procedure'\"\n          (click)=\"setSourceType('procedure')\"\n        >\n          <rpt-icon name=\"code\" [size]=\"12\" />\n          <span>{{ isAdvancedMode() ? 'Stored Proc' : 'Data Query' }}</span>\n        </button>\n        <button\n          type=\"button\"\n          class=\"source-tab-btn\"\n          [class.active]=\"currentSourceType() === 'static'\"\n          (click)=\"setSourceType('static')\"\n        >\n          <rpt-icon name=\"edit\" [size]=\"12\" />\n          <span>Static List</span>\n        </button>\n      </div>\n\n      <!-- 3A. DATABASE TABLE / VIEW CONFIGURATION -->\n      @if (currentSourceType() === 'table') {\n        <div class=\"field-row\">\n          <div class=\"field-label-row\">\n            <label class=\"field-label\">\n              {{ isAdvancedMode() ? 'Database Table / View' : 'Select Data Source' }}\n            </label>\n            <button\n              type=\"button\"\n              class=\"btn-refresh-entities\"\n              (click)=\"loadEntities()\"\n              title=\"Refresh available tables from backend\"\n            >\n              <rpt-icon name=\"refresh\" [size]=\"11\" />\n              <span>Refresh</span>\n            </button>\n          </div>\n          <select\n            class=\"field-select\"\n            [ngModel]=\"selectedEntity()\"\n            (ngModelChange)=\"onEntitySelected($event)\"\n            [disabled]=\"isLoadingEntities()\"\n          >\n            @if (isLoadingEntities()) {\n              <option value=\"\">Loading tables from database...</option>\n            } @else if (availableTables().length === 0) {\n              <option value=\"\">-- No tables found (Click Refresh) --</option>\n            } @else {\n              <option value=\"\">-- Choose Data Table --</option>\n            }\n            @for (tbl of availableTables(); track tbl.name) {\n              <option [value]=\"tbl.name\">\n                @if (isAdvancedMode()) {\n                  {{ tbl.schema }}.{{ tbl.name }} ({{ tbl.type }})\n                } @else {\n                  {{ tbl.displayName }}{{ tbl.category ? ' \u2022 ' + tbl.category : '' }}\n                }\n              </option>\n            }\n          </select>\n        </div>\n\n        @if (selectedEntity()) {\n          <!-- Display Field (Visible text) -->\n          <div class=\"field-row\">\n            <div class=\"field-label-row\">\n              <label class=\"field-label\">\n                {{ isAdvancedMode() ? 'Display Field (Visible Text)' : 'Text Shown in Dropdown' }}\n              </label>\n              @if (!isAdvancedMode()) {\n                <span class=\"auto-badge\" title=\"Auto-detected column for text label\">Auto-detected</span>\n              }\n            </div>\n            <select\n              class=\"field-select\"\n              [ngModel]=\"selectedDisplayField()\"\n              (ngModelChange)=\"onDisplayFieldChanged($event)\"\n            >\n              <option value=\"\">-- Select Display Column --</option>\n              @for (col of entityColumns(); track col.field) {\n                <option [value]=\"col.field\">\n                  {{ col.label }} {{ isAdvancedMode() ? '(' + col.dataType + ')' : '' }}\n                </option>\n              }\n            </select>\n          </div>\n\n          <!-- Value Field (Stored key) -->\n          <div class=\"field-row\">\n            <div class=\"field-label-row\">\n              <label class=\"field-label\">\n                {{ isAdvancedMode() ? 'Value Field (Stored Key)' : 'Internal Value / Key' }}\n              </label>\n              @if (!isAdvancedMode()) {\n                <span class=\"auto-badge\" title=\"Auto-detected column for primary ID\">Auto-detected</span>\n              }\n            </div>\n            <select\n              class=\"field-select\"\n              [ngModel]=\"selectedValueField()\"\n              (ngModelChange)=\"onValueFieldChanged($event)\"\n            >\n              <option value=\"\">-- Select Key Column --</option>\n              @for (col of entityColumns(); track col.field) {\n                <option [value]=\"col.field\">\n                  {{ col.label }} {{ isAdvancedMode() ? '(' + col.dataType + ')' : '' }}\n                </option>\n              }\n            </select>\n          </div>\n\n          <!-- Cascading Dropdown Dependency -->\n          <div class=\"field-row\">\n            <label class=\"field-label\">\n              {{ isAdvancedMode() ? 'Dependent On (Cascading Parent Field)' : 'Filter by Another Field' }}\n            </label>\n            <select\n              class=\"field-select\"\n              [ngModel]=\"selectedDependsOn()\"\n              (ngModelChange)=\"onDependsOnChanged($event)\"\n            >\n              <option value=\"\">-- None (Independent) --</option>\n              @for (other of availableParentFields(); track other.key || other.id) {\n                <option [value]=\"other.key || other.id\">{{ other.label || other.key }}</option>\n              }\n            </select>\n            <span class=\"field-hint\">\n              {{ isAdvancedMode() ? 'Automatically re-queries options when parent field changes.' : 'Only loads options when the selected field changes.' }}\n            </span>\n          </div>\n        }\n      }\n\n      <!-- 3B. STORED PROCEDURE CONFIGURATION -->\n      @if (currentSourceType() === 'procedure') {\n        <div class=\"field-row\">\n          <div class=\"field-label-row\">\n            <label class=\"field-label\">\n              {{ isAdvancedMode() ? 'Stored Procedure' : 'Select Data Procedure' }}\n            </label>\n            <button\n              type=\"button\"\n              class=\"btn-refresh-entities\"\n              (click)=\"loadEntities()\"\n              title=\"Refresh available procedures from backend\"\n            >\n              <rpt-icon name=\"refresh\" [size]=\"11\" />\n              <span>Refresh</span>\n            </button>\n          </div>\n          <select\n            class=\"field-select\"\n            [ngModel]=\"selectedEntity()\"\n            (ngModelChange)=\"onEntitySelected($event)\"\n            [disabled]=\"isLoadingEntities()\"\n          >\n            @if (isLoadingEntities()) {\n              <option value=\"\">Loading stored procedures from database...</option>\n            } @else if (availableProcedures().length === 0) {\n              <option value=\"\">-- No stored procedures found (Click Refresh) --</option>\n            } @else {\n              <option value=\"\">-- Choose Data Query / SP --</option>\n            }\n            @for (sp of availableProcedures(); track sp.name) {\n              <option [value]=\"sp.name\">\n                @if (isAdvancedMode()) {\n                  {{ sp.schema }}.{{ sp.name }}\n                } @else {\n                  {{ sp.displayName }}{{ sp.category ? ' \u2022 ' + sp.category : '' }}\n                }\n              </option>\n            }\n          </select>\n        </div>\n\n        @if (selectedEntity()) {\n          <!-- Visual Parameter Linkers -->\n          @if (procedureParameters().length > 0) {\n            <div class=\"sp-params-group\">\n              <div class=\"params-header-row\">\n                <label class=\"field-label\">\n                  {{ isAdvancedMode() ? 'Procedure Input Parameters' : 'Filter Inputs & Parameters' }}\n                </label>\n                <button\n                  type=\"button\"\n                  class=\"btn-auto-params\"\n                  (click)=\"autoWireAllParameters()\"\n                  title=\"Auto-detect session parameters and add missing filter controls to the canvas\"\n                >\n                  <rpt-icon name=\"check\" [size]=\"11\" />\n                  <span>Auto-Wire Canvas Inputs</span>\n                </button>\n              </div>\n\n              @for (param of procedureParameters(); track param.name) {\n                <rpt-parameter-binding-editor\n                  [param]=\"param\"\n                  [currentValue]=\"getParamValue(param.name)\"\n                  [allComponents]=\"allComponents()\"\n                  [currentComponentId]=\"comp().id\"\n                  [isAdvancedMode]=\"isAdvancedMode()\"\n                  (valueChange)=\"setParamValue(param.name, $event)\"\n                  (linkedFieldChange)=\"onParamLinkedFieldChange($event)\"\n                />\n              }\n            </div>\n          }\n\n          <!-- Display Field (Visible text) -->\n          <div class=\"field-row\">\n            <div class=\"field-label-row\">\n              <label class=\"field-label\">\n                {{ isAdvancedMode() ? 'Display Field (from SP result)' : 'Text Shown in Dropdown' }}\n              </label>\n              @if (!isAdvancedMode()) {\n                <span class=\"auto-badge\">Auto-detected</span>\n              }\n            </div>\n            @if (entityColumns().length > 0) {\n              <select\n                class=\"field-select\"\n                [ngModel]=\"selectedDisplayField()\"\n                (ngModelChange)=\"onDisplayFieldChanged($event)\"\n              >\n                <option value=\"\">-- Select Display Column --</option>\n                @for (col of entityColumns(); track col.field) {\n                  <option [value]=\"col.field\">\n                    {{ col.label }} {{ isAdvancedMode() ? '(' + col.dataType + ')' : '' }}\n                  </option>\n                }\n              </select>\n            } @else {\n              <input\n                type=\"text\"\n                class=\"field-input\"\n                placeholder=\"Column name (leave blank for auto)\"\n                [ngModel]=\"selectedDisplayField()\"\n                (ngModelChange)=\"onDisplayFieldChanged($event)\"\n              />\n            }\n          </div>\n\n          <!-- Value Field (Stored key) -->\n          <div class=\"field-row\">\n            <div class=\"field-label-row\">\n              <label class=\"field-label\">\n                {{ isAdvancedMode() ? 'Value Field (from SP result)' : 'Internal Value / Key' }}\n              </label>\n              @if (!isAdvancedMode()) {\n                <span class=\"auto-badge\">Auto-detected</span>\n              }\n            </div>\n            @if (entityColumns().length > 0) {\n              <select\n                class=\"field-select\"\n                [ngModel]=\"selectedValueField()\"\n                (ngModelChange)=\"onValueFieldChanged($event)\"\n              >\n                <option value=\"\">-- Select Key Column --</option>\n                @for (col of entityColumns(); track col.field) {\n                  <option [value]=\"col.field\">\n                    {{ col.label }} {{ isAdvancedMode() ? '(' + col.dataType + ')' : '' }}\n                  </option>\n                }\n              </select>\n            } @else {\n              <input\n                type=\"text\"\n                class=\"field-input\"\n                placeholder=\"Column name (leave blank for auto)\"\n                [ngModel]=\"selectedValueField()\"\n                (ngModelChange)=\"onValueFieldChanged($event)\"\n              />\n            }\n          </div>\n        }\n      }\n\n      <!-- 3C. STATIC OPTIONS EDITOR -->\n      @if (currentSourceType() === 'static') {\n        <div class=\"static-options-wrapper\">\n          <div class=\"static-options-header\">\n            <span class=\"field-label\">Static Options</span>\n            <button type=\"button\" class=\"btn-add-option\" (click)=\"addStaticOption()\">\n              <rpt-icon name=\"plus\" [size]=\"11\" />\n              <span>Add Option</span>\n            </button>\n          </div>\n\n          <div class=\"static-options-list\">\n            @for (opt of staticOptions(); track $index) {\n              <div class=\"static-option-row\">\n                <input\n                  type=\"text\"\n                  class=\"field-input opt-key\"\n                  placeholder=\"Key\"\n                  [ngModel]=\"opt.key\"\n                  (ngModelChange)=\"updateStaticOption($index, 'key', $event)\"\n                />\n                <input\n                  type=\"text\"\n                  class=\"field-input opt-label\"\n                  placeholder=\"Label\"\n                  [ngModel]=\"opt.label\"\n                  (ngModelChange)=\"updateStaticOption($index, 'label', $event)\"\n                />\n                <button\n                  type=\"button\"\n                  class=\"btn-remove-option\"\n                  (click)=\"removeStaticOption($index)\"\n                  title=\"Remove option\"\n                >\n                  <rpt-icon name=\"trash\" [size]=\"12\" />\n                </button>\n              </div>\n            }\n          </div>\n        </div>\n      }\n    </div>", styles: [".property-group{display:flex;flex-direction:column;gap:12px}.group-title{font-size:.7rem;font-weight:700;color:var(--rpt-color-text-muted, #64748b);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--rpt-color-border, #e2e8f0);padding-bottom:4px}.field-row{display:flex;flex-direction:column;gap:4px}.field-label-row{display:flex;align-items:center;justify-content:space-between}.field-badge-val{font-size:.65rem;font-weight:600;color:var(--rpt-color-primary, #2563eb);background:#eff6ff;border:1px solid #bfdbfe;padding:1px 6px;border-radius:9999px}.field-label{font-size:.7rem;font-weight:600;color:var(--rpt-color-text, #0f172a)}.field-input,.field-select,.field-textarea{width:100%;box-sizing:border-box;border:1px solid var(--rpt-color-border, #cbd5e1);border-radius:var(--rpt-border-radius-sm, 4px);padding:6px 10px;font-size:var(--rpt-font-size-sm, .75rem);color:var(--rpt-color-text, #0f172a);background:#fff;outline:none;transition:all var(--rpt-transition-speed, .15s) ease}.field-select{appearance:none;-webkit-appearance:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right 10px center;background-size:13px 13px;padding-right:28px;cursor:pointer}.field-input:focus,.field-select:focus,.field-textarea:focus{border-color:var(--rpt-color-primary, #2563eb);box-shadow:var(--rpt-box-shadow-focus, 0 0 0 3px rgba(37, 99, 235, .25))}.checkbox-toggle{display:inline-flex;align-items:center;gap:8px;font-size:.75rem;font-weight:500;color:var(--rpt-color-text, #0f172a);cursor:pointer}.preset-pill-group{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}.preset-pill{background:#f1f5f9;border:1px solid #e2e8f0;border-radius:4px;padding:2px 8px;font-size:.65rem;font-weight:600;color:#475569;cursor:pointer;transition:all .12s ease}.preset-pill:hover{background:#e2e8f0;color:#0f172a;border-color:#cbd5e1}.preset-pill-active{background:var(--rpt-color-primary, #2563eb)!important;color:#fff!important;border-color:var(--rpt-color-primary, #2563eb)!important}.preset-pill-reset{color:var(--rpt-color-primary, #2563eb);background:#eff6ff;border-color:#bfdbfe}.preset-pill-reset:hover{background:#dbeafe;color:#1d4ed8;border-color:#93c5fd}\n", ".datasource-header-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.mode-toggle-pill{display:inline-flex;background:#e2e8f0;border-radius:12px;padding:2px;gap:2px}.pill-btn{border:none;background:transparent;padding:2px 8px;font-size:.65rem;font-weight:500;color:#64748b;border-radius:10px;cursor:pointer;transition:all .12s ease}.pill-btn:hover{color:#0f172a}.pill-btn.active{background:#fff;color:var(--rpt-color-primary, #2563eb);font-weight:700;box-shadow:0 1px 2px #00000014}.datasource-guidance-card{display:flex;align-items:center;gap:6px;background:#eff6ff;border:1px solid #bfdbfe;color:#1e40af;font-size:.675rem;padding:6px 8px;border-radius:6px;margin-bottom:8px;line-height:1.35}.source-type-switcher{display:flex;background:#f1f5f9;border:1px solid var(--rpt-color-border, #cbd5e1);border-radius:6px;padding:2px;gap:2px;margin-bottom:6px}.source-tab-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:6px 4px;font-size:.7rem;font-weight:600;color:var(--rpt-color-text-muted, #64748b);background:transparent;border:none;border-radius:4px;cursor:pointer;transition:all .12s ease}.source-tab-btn:hover{color:var(--rpt-color-text, #0f172a)}.source-tab-btn.active{background:#fff;color:var(--rpt-color-primary, #2563eb);box-shadow:0 1px 2px #0000000d}.btn-refresh-entities{display:inline-flex;align-items:center;gap:4px;border:none;background:transparent;color:var(--rpt-color-primary, #2563eb);font-size:.65rem;font-weight:600;cursor:pointer;padding:0}.btn-refresh-entities:hover{text-decoration:underline}.btn-auto-params{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;font-size:.65rem;font-weight:600;color:#2563eb;background:#eff6ff;border:1px solid #bfdbfe;border-radius:4px;cursor:pointer;transition:all .12s ease}.btn-auto-params:hover{background:#2563eb;color:#fff}.auto-badge{font-size:.62rem;font-weight:600;background:#dcfce7;color:#166534;padding:1px 5px;border-radius:4px}.field-hint{font-size:.65rem;color:var(--rpt-color-text-muted, #94a3b8);margin-top:2px}.sp-params-group{display:flex;flex-direction:column;gap:6px;background:#f8fafc;padding:8px;border-radius:6px;border:1px solid #e2e8f0;margin-bottom:6px}.params-header-row{display:flex;align-items:center;justify-content:space-between}.params-hint{font-size:.64rem;color:#64748b;font-style:italic}.static-options-wrapper{display:flex;flex-direction:column;gap:8px}.static-options-header{display:flex;align-items:center;justify-content:space-between}.btn-add-option{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--rpt-color-border, #cbd5e1);background:#fff;border-radius:4px;padding:3px 8px;font-size:.65rem;font-weight:600;color:var(--rpt-color-primary, #2563eb);cursor:pointer;transition:all .12s ease}.btn-add-option:hover{background:#eff6ff}.static-options-list{display:flex;flex-direction:column;gap:6px}.static-option-row{display:flex;align-items:center;gap:6px}.opt-key{flex:1}.opt-label{flex:1.5}.btn-remove-option{width:24px;height:24px;border:none;background:transparent;color:#94a3b8;border-radius:4px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;padding:0;transition:all .12s ease}.btn-remove-option:hover{background:#fee2e2;color:#ef4444}.field-input{width:100%;padding:6px 8px;font-size:.75rem;border:1px solid var(--rpt-color-border, #cbd5e1);border-radius:var(--rpt-border-radius, 6px);background:var(--rpt-color-surface, #ffffff);color:var(--rpt-color-text, #0f172a);box-sizing:border-box;outline:none;transition:border-color .12s ease}.field-input:focus{border-color:var(--rpt-color-primary, #2563eb)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: RptIconComponent, selector: "rpt-icon", inputs: ["name", "size", "color", "strokeWidth"] }, { kind: "component", type: ParameterBindingEditorComponent, selector: "rpt-parameter-binding-editor", inputs: ["param", "currentValue", "allComponents", "currentComponentId", "isAdvancedMode"], outputs: ["valueChange", "linkedFieldChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PropertyEditorDatasourceComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rpt-property-editor-datasource', standalone: true, imports: [CommonModule, FormsModule, RptIconComponent, ParameterBindingEditorComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "    <div class=\"property-group\">\n      <!-- 1. Header with Simple / Advanced Mode Toggle -->\n      <div class=\"datasource-header-bar\">\n        <div class=\"group-title\">Options Data Source</div>\n        <div class=\"mode-toggle-pill\">\n          <button\n            type=\"button\"\n            class=\"pill-btn\"\n            [class.active]=\"!isAdvancedMode()\"\n            (click)=\"isAdvancedMode.set(false)\"\n            title=\"Simplified view for business users with friendly names\"\n          >\n            Simple\n          </button>\n          <button\n            type=\"button\"\n            class=\"pill-btn\"\n            [class.active]=\"isAdvancedMode()\"\n            (click)=\"isAdvancedMode.set(true)\"\n            title=\"Technical view with SQL types and expressions\"\n          >\n            Advanced\n          </button>\n        </div>\n      </div>\n\n      <!-- 2. Source Type Segmented Switcher -->\n      <div class=\"source-type-switcher\">\n        <button\n          type=\"button\"\n          class=\"source-tab-btn\"\n          [class.active]=\"currentSourceType() === 'table'\"\n          (click)=\"setSourceType('table')\"\n        >\n          <rpt-icon name=\"table\" [size]=\"12\" />\n          <span>{{ isAdvancedMode() ? 'Table / View' : 'Database Table' }}</span>\n        </button>\n        <button\n          type=\"button\"\n          class=\"source-tab-btn\"\n          [class.active]=\"currentSourceType() === 'procedure'\"\n          (click)=\"setSourceType('procedure')\"\n        >\n          <rpt-icon name=\"code\" [size]=\"12\" />\n          <span>{{ isAdvancedMode() ? 'Stored Proc' : 'Data Query' }}</span>\n        </button>\n        <button\n          type=\"button\"\n          class=\"source-tab-btn\"\n          [class.active]=\"currentSourceType() === 'static'\"\n          (click)=\"setSourceType('static')\"\n        >\n          <rpt-icon name=\"edit\" [size]=\"12\" />\n          <span>Static List</span>\n        </button>\n      </div>\n\n      <!-- 3A. DATABASE TABLE / VIEW CONFIGURATION -->\n      @if (currentSourceType() === 'table') {\n        <div class=\"field-row\">\n          <div class=\"field-label-row\">\n            <label class=\"field-label\">\n              {{ isAdvancedMode() ? 'Database Table / View' : 'Select Data Source' }}\n            </label>\n            <button\n              type=\"button\"\n              class=\"btn-refresh-entities\"\n              (click)=\"loadEntities()\"\n              title=\"Refresh available tables from backend\"\n            >\n              <rpt-icon name=\"refresh\" [size]=\"11\" />\n              <span>Refresh</span>\n            </button>\n          </div>\n          <select\n            class=\"field-select\"\n            [ngModel]=\"selectedEntity()\"\n            (ngModelChange)=\"onEntitySelected($event)\"\n            [disabled]=\"isLoadingEntities()\"\n          >\n            @if (isLoadingEntities()) {\n              <option value=\"\">Loading tables from database...</option>\n            } @else if (availableTables().length === 0) {\n              <option value=\"\">-- No tables found (Click Refresh) --</option>\n            } @else {\n              <option value=\"\">-- Choose Data Table --</option>\n            }\n            @for (tbl of availableTables(); track tbl.name) {\n              <option [value]=\"tbl.name\">\n                @if (isAdvancedMode()) {\n                  {{ tbl.schema }}.{{ tbl.name }} ({{ tbl.type }})\n                } @else {\n                  {{ tbl.displayName }}{{ tbl.category ? ' \u2022 ' + tbl.category : '' }}\n                }\n              </option>\n            }\n          </select>\n        </div>\n\n        @if (selectedEntity()) {\n          <!-- Display Field (Visible text) -->\n          <div class=\"field-row\">\n            <div class=\"field-label-row\">\n              <label class=\"field-label\">\n                {{ isAdvancedMode() ? 'Display Field (Visible Text)' : 'Text Shown in Dropdown' }}\n              </label>\n              @if (!isAdvancedMode()) {\n                <span class=\"auto-badge\" title=\"Auto-detected column for text label\">Auto-detected</span>\n              }\n            </div>\n            <select\n              class=\"field-select\"\n              [ngModel]=\"selectedDisplayField()\"\n              (ngModelChange)=\"onDisplayFieldChanged($event)\"\n            >\n              <option value=\"\">-- Select Display Column --</option>\n              @for (col of entityColumns(); track col.field) {\n                <option [value]=\"col.field\">\n                  {{ col.label }} {{ isAdvancedMode() ? '(' + col.dataType + ')' : '' }}\n                </option>\n              }\n            </select>\n          </div>\n\n          <!-- Value Field (Stored key) -->\n          <div class=\"field-row\">\n            <div class=\"field-label-row\">\n              <label class=\"field-label\">\n                {{ isAdvancedMode() ? 'Value Field (Stored Key)' : 'Internal Value / Key' }}\n              </label>\n              @if (!isAdvancedMode()) {\n                <span class=\"auto-badge\" title=\"Auto-detected column for primary ID\">Auto-detected</span>\n              }\n            </div>\n            <select\n              class=\"field-select\"\n              [ngModel]=\"selectedValueField()\"\n              (ngModelChange)=\"onValueFieldChanged($event)\"\n            >\n              <option value=\"\">-- Select Key Column --</option>\n              @for (col of entityColumns(); track col.field) {\n                <option [value]=\"col.field\">\n                  {{ col.label }} {{ isAdvancedMode() ? '(' + col.dataType + ')' : '' }}\n                </option>\n              }\n            </select>\n          </div>\n\n          <!-- Cascading Dropdown Dependency -->\n          <div class=\"field-row\">\n            <label class=\"field-label\">\n              {{ isAdvancedMode() ? 'Dependent On (Cascading Parent Field)' : 'Filter by Another Field' }}\n            </label>\n            <select\n              class=\"field-select\"\n              [ngModel]=\"selectedDependsOn()\"\n              (ngModelChange)=\"onDependsOnChanged($event)\"\n            >\n              <option value=\"\">-- None (Independent) --</option>\n              @for (other of availableParentFields(); track other.key || other.id) {\n                <option [value]=\"other.key || other.id\">{{ other.label || other.key }}</option>\n              }\n            </select>\n            <span class=\"field-hint\">\n              {{ isAdvancedMode() ? 'Automatically re-queries options when parent field changes.' : 'Only loads options when the selected field changes.' }}\n            </span>\n          </div>\n        }\n      }\n\n      <!-- 3B. STORED PROCEDURE CONFIGURATION -->\n      @if (currentSourceType() === 'procedure') {\n        <div class=\"field-row\">\n          <div class=\"field-label-row\">\n            <label class=\"field-label\">\n              {{ isAdvancedMode() ? 'Stored Procedure' : 'Select Data Procedure' }}\n            </label>\n            <button\n              type=\"button\"\n              class=\"btn-refresh-entities\"\n              (click)=\"loadEntities()\"\n              title=\"Refresh available procedures from backend\"\n            >\n              <rpt-icon name=\"refresh\" [size]=\"11\" />\n              <span>Refresh</span>\n            </button>\n          </div>\n          <select\n            class=\"field-select\"\n            [ngModel]=\"selectedEntity()\"\n            (ngModelChange)=\"onEntitySelected($event)\"\n            [disabled]=\"isLoadingEntities()\"\n          >\n            @if (isLoadingEntities()) {\n              <option value=\"\">Loading stored procedures from database...</option>\n            } @else if (availableProcedures().length === 0) {\n              <option value=\"\">-- No stored procedures found (Click Refresh) --</option>\n            } @else {\n              <option value=\"\">-- Choose Data Query / SP --</option>\n            }\n            @for (sp of availableProcedures(); track sp.name) {\n              <option [value]=\"sp.name\">\n                @if (isAdvancedMode()) {\n                  {{ sp.schema }}.{{ sp.name }}\n                } @else {\n                  {{ sp.displayName }}{{ sp.category ? ' \u2022 ' + sp.category : '' }}\n                }\n              </option>\n            }\n          </select>\n        </div>\n\n        @if (selectedEntity()) {\n          <!-- Visual Parameter Linkers -->\n          @if (procedureParameters().length > 0) {\n            <div class=\"sp-params-group\">\n              <div class=\"params-header-row\">\n                <label class=\"field-label\">\n                  {{ isAdvancedMode() ? 'Procedure Input Parameters' : 'Filter Inputs & Parameters' }}\n                </label>\n                <button\n                  type=\"button\"\n                  class=\"btn-auto-params\"\n                  (click)=\"autoWireAllParameters()\"\n                  title=\"Auto-detect session parameters and add missing filter controls to the canvas\"\n                >\n                  <rpt-icon name=\"check\" [size]=\"11\" />\n                  <span>Auto-Wire Canvas Inputs</span>\n                </button>\n              </div>\n\n              @for (param of procedureParameters(); track param.name) {\n                <rpt-parameter-binding-editor\n                  [param]=\"param\"\n                  [currentValue]=\"getParamValue(param.name)\"\n                  [allComponents]=\"allComponents()\"\n                  [currentComponentId]=\"comp().id\"\n                  [isAdvancedMode]=\"isAdvancedMode()\"\n                  (valueChange)=\"setParamValue(param.name, $event)\"\n                  (linkedFieldChange)=\"onParamLinkedFieldChange($event)\"\n                />\n              }\n            </div>\n          }\n\n          <!-- Display Field (Visible text) -->\n          <div class=\"field-row\">\n            <div class=\"field-label-row\">\n              <label class=\"field-label\">\n                {{ isAdvancedMode() ? 'Display Field (from SP result)' : 'Text Shown in Dropdown' }}\n              </label>\n              @if (!isAdvancedMode()) {\n                <span class=\"auto-badge\">Auto-detected</span>\n              }\n            </div>\n            <select\n              class=\"field-select\"\n              [ngModel]=\"selectedDisplayField()\"\n              (ngModelChange)=\"onDisplayFieldChanged($event)\"\n            >\n              <option value=\"\">-- Select Display Column --</option>\n              @for (col of entityColumns(); track col.field) {\n                <option [value]=\"col.field\">\n                  {{ col.label }} {{ isAdvancedMode() ? '(' + col.dataType + ')' : '' }}\n                </option>\n              }\n            </select>\n          </div>\n\n          <!-- Value Field (Stored key) -->\n          <div class=\"field-row\">\n            <div class=\"field-label-row\">\n              <label class=\"field-label\">\n                {{ isAdvancedMode() ? 'Value Field (from SP result)' : 'Internal Value / Key' }}\n              </label>\n              @if (!isAdvancedMode()) {\n                <span class=\"auto-badge\">Auto-detected</span>\n              }\n            </div>\n            <select\n              class=\"field-select\"\n              [ngModel]=\"selectedValueField()\"\n              (ngModelChange)=\"onValueFieldChanged($event)\"\n            >\n              <option value=\"\">-- Select Key Column --</option>\n              @for (col of entityColumns(); track col.field) {\n                <option [value]=\"col.field\">\n                  {{ col.label }} {{ isAdvancedMode() ? '(' + col.dataType + ')' : '' }}\n                </option>\n              }\n            </select>\n          </div>\n        }\n      }\n\n      <!-- 3C. STATIC OPTIONS EDITOR -->\n      @if (currentSourceType() === 'static') {\n        <div class=\"static-options-wrapper\">\n          <div class=\"static-options-header\">\n            <span class=\"field-label\">Static Options</span>\n            <button type=\"button\" class=\"btn-add-option\" (click)=\"addStaticOption()\">\n              <rpt-icon name=\"plus\" [size]=\"11\" />\n              <span>Add Option</span>\n            </button>\n          </div>\n\n          <div class=\"static-options-list\">\n            @for (opt of staticOptions(); track $index) {\n              <div class=\"static-option-row\">\n                <input\n                  type=\"text\"\n                  class=\"field-input opt-key\"\n                  placeholder=\"Key\"\n                  [ngModel]=\"opt.key\"\n                  (ngModelChange)=\"updateStaticOption($index, 'key', $event)\"\n                />\n                <input\n                  type=\"text\"\n                  class=\"field-input opt-label\"\n                  placeholder=\"Label\"\n                  [ngModel]=\"opt.label\"\n                  (ngModelChange)=\"updateStaticOption($index, 'label', $event)\"\n                />\n                <button\n                  type=\"button\"\n                  class=\"btn-remove-option\"\n                  (click)=\"removeStaticOption($index)\"\n                  title=\"Remove option\"\n                >\n                  <rpt-icon name=\"trash\" [size]=\"12\" />\n                </button>\n              </div>\n            }\n          </div>\n        </div>\n      }\n    </div>", styles: [".property-group{display:flex;flex-direction:column;gap:12px}.group-title{font-size:.7rem;font-weight:700;color:var(--rpt-color-text-muted, #64748b);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--rpt-color-border, #e2e8f0);padding-bottom:4px}.field-row{display:flex;flex-direction:column;gap:4px}.field-label-row{display:flex;align-items:center;justify-content:space-between}.field-badge-val{font-size:.65rem;font-weight:600;color:var(--rpt-color-primary, #2563eb);background:#eff6ff;border:1px solid #bfdbfe;padding:1px 6px;border-radius:9999px}.field-label{font-size:.7rem;font-weight:600;color:var(--rpt-color-text, #0f172a)}.field-input,.field-select,.field-textarea{width:100%;box-sizing:border-box;border:1px solid var(--rpt-color-border, #cbd5e1);border-radius:var(--rpt-border-radius-sm, 4px);padding:6px 10px;font-size:var(--rpt-font-size-sm, .75rem);color:var(--rpt-color-text, #0f172a);background:#fff;outline:none;transition:all var(--rpt-transition-speed, .15s) ease}.field-select{appearance:none;-webkit-appearance:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right 10px center;background-size:13px 13px;padding-right:28px;cursor:pointer}.field-input:focus,.field-select:focus,.field-textarea:focus{border-color:var(--rpt-color-primary, #2563eb);box-shadow:var(--rpt-box-shadow-focus, 0 0 0 3px rgba(37, 99, 235, .25))}.checkbox-toggle{display:inline-flex;align-items:center;gap:8px;font-size:.75rem;font-weight:500;color:var(--rpt-color-text, #0f172a);cursor:pointer}.preset-pill-group{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}.preset-pill{background:#f1f5f9;border:1px solid #e2e8f0;border-radius:4px;padding:2px 8px;font-size:.65rem;font-weight:600;color:#475569;cursor:pointer;transition:all .12s ease}.preset-pill:hover{background:#e2e8f0;color:#0f172a;border-color:#cbd5e1}.preset-pill-active{background:var(--rpt-color-primary, #2563eb)!important;color:#fff!important;border-color:var(--rpt-color-primary, #2563eb)!important}.preset-pill-reset{color:var(--rpt-color-primary, #2563eb);background:#eff6ff;border-color:#bfdbfe}.preset-pill-reset:hover{background:#dbeafe;color:#1d4ed8;border-color:#93c5fd}\n", ".datasource-header-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.mode-toggle-pill{display:inline-flex;background:#e2e8f0;border-radius:12px;padding:2px;gap:2px}.pill-btn{border:none;background:transparent;padding:2px 8px;font-size:.65rem;font-weight:500;color:#64748b;border-radius:10px;cursor:pointer;transition:all .12s ease}.pill-btn:hover{color:#0f172a}.pill-btn.active{background:#fff;color:var(--rpt-color-primary, #2563eb);font-weight:700;box-shadow:0 1px 2px #00000014}.source-type-switcher{display:flex;background:#f1f5f9;border:1px solid var(--rpt-color-border, #cbd5e1);border-radius:6px;padding:2px;gap:2px;margin-bottom:6px}.source-tab-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:6px 4px;font-size:.7rem;font-weight:600;color:var(--rpt-color-text-muted, #64748b);background:transparent;border:none;border-radius:4px;cursor:pointer;transition:all .12s ease}.source-tab-btn:hover{color:var(--rpt-color-text, #0f172a)}.source-tab-btn.active{background:#fff;color:var(--rpt-color-primary, #2563eb);box-shadow:0 1px 2px #0000000d}.btn-refresh-entities{display:inline-flex;align-items:center;gap:4px;border:none;background:transparent;color:var(--rpt-color-primary, #2563eb);font-size:.65rem;font-weight:600;cursor:pointer;padding:0}.btn-refresh-entities:hover{text-decoration:underline}.btn-auto-params{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;font-size:.65rem;font-weight:600;color:#2563eb;background:#eff6ff;border:1px solid #bfdbfe;border-radius:4px;cursor:pointer;transition:all .12s ease}.btn-auto-params:hover{background:#2563eb;color:#fff}.auto-badge{font-size:.62rem;font-weight:600;background:#dcfce7;color:#166534;padding:1px 5px;border-radius:4px}.field-hint{font-size:.65rem;color:var(--rpt-color-text-muted, #94a3b8);margin-top:2px}.sp-params-group{display:flex;flex-direction:column;gap:6px;background:#f8fafc;padding:8px;border-radius:6px;border:1px solid #e2e8f0;margin-bottom:6px}.params-header-row{display:flex;align-items:center;justify-content:space-between}.params-hint{font-size:.64rem;color:#64748b;font-style:italic}.static-options-wrapper{display:flex;flex-direction:column;gap:8px}.static-options-header{display:flex;align-items:center;justify-content:space-between}.btn-add-option{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--rpt-color-border, #cbd5e1);background:#fff;border-radius:4px;padding:3px 8px;font-size:.65rem;font-weight:600;color:var(--rpt-color-primary, #2563eb);cursor:pointer;transition:all .12s ease}.btn-add-option:hover{background:#eff6ff}.static-options-list{display:flex;flex-direction:column;gap:6px}.static-option-row{display:flex;align-items:center;gap:6px}.opt-key{flex:1}.opt-label{flex:1.5}.btn-remove-option{width:24px;height:24px;border:none;background:transparent;color:#94a3b8;border-radius:4px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;padding:0;transition:all .12s ease}.btn-remove-option:hover{background:#fee2e2;color:#ef4444}\n"] }]
+            args: [{ selector: 'rpt-property-editor-datasource', standalone: true, imports: [CommonModule, FormsModule, RptIconComponent, ParameterBindingEditorComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "    <div class=\"property-group\">\n      <!-- 1. Header with Simple / Advanced Mode Toggle -->\n      <div class=\"datasource-header-bar\">\n        <div class=\"group-title\">Options Data Source</div>\n        <div class=\"mode-toggle-pill\">\n          <button\n            type=\"button\"\n            class=\"pill-btn\"\n            [class.active]=\"!isAdvancedMode()\"\n            (click)=\"isAdvancedMode.set(false)\"\n            title=\"Simplified view for business users with friendly names\"\n          >\n            Simple\n          </button>\n          <button\n            type=\"button\"\n            class=\"pill-btn\"\n            [class.active]=\"isAdvancedMode()\"\n            (click)=\"isAdvancedMode.set(true)\"\n            title=\"Technical view with SQL types and expressions\"\n          >\n            Advanced\n          </button>\n        </div>\n      </div>\n\n      <div class=\"datasource-guidance-card\">\n        <rpt-icon name=\"info\" [size]=\"12\" />\n        <span>Populates selectable choices in this dropdown filter. For the report's main data and result grid, use the <strong>Grid</strong> tab.</span>\n      </div>\n\n      <!-- 2. Source Type Segmented Switcher -->\n      <div class=\"source-type-switcher\">\n        <button\n          type=\"button\"\n          class=\"source-tab-btn\"\n          [class.active]=\"currentSourceType() === 'table'\"\n          (click)=\"setSourceType('table')\"\n        >\n          <rpt-icon name=\"table\" [size]=\"12\" />\n          <span>{{ isAdvancedMode() ? 'Table / View' : 'Database Table' }}</span>\n        </button>\n        <button\n          type=\"button\"\n          class=\"source-tab-btn\"\n          [class.active]=\"currentSourceType() === 'procedure'\"\n          (click)=\"setSourceType('procedure')\"\n        >\n          <rpt-icon name=\"code\" [size]=\"12\" />\n          <span>{{ isAdvancedMode() ? 'Stored Proc' : 'Data Query' }}</span>\n        </button>\n        <button\n          type=\"button\"\n          class=\"source-tab-btn\"\n          [class.active]=\"currentSourceType() === 'static'\"\n          (click)=\"setSourceType('static')\"\n        >\n          <rpt-icon name=\"edit\" [size]=\"12\" />\n          <span>Static List</span>\n        </button>\n      </div>\n\n      <!-- 3A. DATABASE TABLE / VIEW CONFIGURATION -->\n      @if (currentSourceType() === 'table') {\n        <div class=\"field-row\">\n          <div class=\"field-label-row\">\n            <label class=\"field-label\">\n              {{ isAdvancedMode() ? 'Database Table / View' : 'Select Data Source' }}\n            </label>\n            <button\n              type=\"button\"\n              class=\"btn-refresh-entities\"\n              (click)=\"loadEntities()\"\n              title=\"Refresh available tables from backend\"\n            >\n              <rpt-icon name=\"refresh\" [size]=\"11\" />\n              <span>Refresh</span>\n            </button>\n          </div>\n          <select\n            class=\"field-select\"\n            [ngModel]=\"selectedEntity()\"\n            (ngModelChange)=\"onEntitySelected($event)\"\n            [disabled]=\"isLoadingEntities()\"\n          >\n            @if (isLoadingEntities()) {\n              <option value=\"\">Loading tables from database...</option>\n            } @else if (availableTables().length === 0) {\n              <option value=\"\">-- No tables found (Click Refresh) --</option>\n            } @else {\n              <option value=\"\">-- Choose Data Table --</option>\n            }\n            @for (tbl of availableTables(); track tbl.name) {\n              <option [value]=\"tbl.name\">\n                @if (isAdvancedMode()) {\n                  {{ tbl.schema }}.{{ tbl.name }} ({{ tbl.type }})\n                } @else {\n                  {{ tbl.displayName }}{{ tbl.category ? ' \u2022 ' + tbl.category : '' }}\n                }\n              </option>\n            }\n          </select>\n        </div>\n\n        @if (selectedEntity()) {\n          <!-- Display Field (Visible text) -->\n          <div class=\"field-row\">\n            <div class=\"field-label-row\">\n              <label class=\"field-label\">\n                {{ isAdvancedMode() ? 'Display Field (Visible Text)' : 'Text Shown in Dropdown' }}\n              </label>\n              @if (!isAdvancedMode()) {\n                <span class=\"auto-badge\" title=\"Auto-detected column for text label\">Auto-detected</span>\n              }\n            </div>\n            <select\n              class=\"field-select\"\n              [ngModel]=\"selectedDisplayField()\"\n              (ngModelChange)=\"onDisplayFieldChanged($event)\"\n            >\n              <option value=\"\">-- Select Display Column --</option>\n              @for (col of entityColumns(); track col.field) {\n                <option [value]=\"col.field\">\n                  {{ col.label }} {{ isAdvancedMode() ? '(' + col.dataType + ')' : '' }}\n                </option>\n              }\n            </select>\n          </div>\n\n          <!-- Value Field (Stored key) -->\n          <div class=\"field-row\">\n            <div class=\"field-label-row\">\n              <label class=\"field-label\">\n                {{ isAdvancedMode() ? 'Value Field (Stored Key)' : 'Internal Value / Key' }}\n              </label>\n              @if (!isAdvancedMode()) {\n                <span class=\"auto-badge\" title=\"Auto-detected column for primary ID\">Auto-detected</span>\n              }\n            </div>\n            <select\n              class=\"field-select\"\n              [ngModel]=\"selectedValueField()\"\n              (ngModelChange)=\"onValueFieldChanged($event)\"\n            >\n              <option value=\"\">-- Select Key Column --</option>\n              @for (col of entityColumns(); track col.field) {\n                <option [value]=\"col.field\">\n                  {{ col.label }} {{ isAdvancedMode() ? '(' + col.dataType + ')' : '' }}\n                </option>\n              }\n            </select>\n          </div>\n\n          <!-- Cascading Dropdown Dependency -->\n          <div class=\"field-row\">\n            <label class=\"field-label\">\n              {{ isAdvancedMode() ? 'Dependent On (Cascading Parent Field)' : 'Filter by Another Field' }}\n            </label>\n            <select\n              class=\"field-select\"\n              [ngModel]=\"selectedDependsOn()\"\n              (ngModelChange)=\"onDependsOnChanged($event)\"\n            >\n              <option value=\"\">-- None (Independent) --</option>\n              @for (other of availableParentFields(); track other.key || other.id) {\n                <option [value]=\"other.key || other.id\">{{ other.label || other.key }}</option>\n              }\n            </select>\n            <span class=\"field-hint\">\n              {{ isAdvancedMode() ? 'Automatically re-queries options when parent field changes.' : 'Only loads options when the selected field changes.' }}\n            </span>\n          </div>\n        }\n      }\n\n      <!-- 3B. STORED PROCEDURE CONFIGURATION -->\n      @if (currentSourceType() === 'procedure') {\n        <div class=\"field-row\">\n          <div class=\"field-label-row\">\n            <label class=\"field-label\">\n              {{ isAdvancedMode() ? 'Stored Procedure' : 'Select Data Procedure' }}\n            </label>\n            <button\n              type=\"button\"\n              class=\"btn-refresh-entities\"\n              (click)=\"loadEntities()\"\n              title=\"Refresh available procedures from backend\"\n            >\n              <rpt-icon name=\"refresh\" [size]=\"11\" />\n              <span>Refresh</span>\n            </button>\n          </div>\n          <select\n            class=\"field-select\"\n            [ngModel]=\"selectedEntity()\"\n            (ngModelChange)=\"onEntitySelected($event)\"\n            [disabled]=\"isLoadingEntities()\"\n          >\n            @if (isLoadingEntities()) {\n              <option value=\"\">Loading stored procedures from database...</option>\n            } @else if (availableProcedures().length === 0) {\n              <option value=\"\">-- No stored procedures found (Click Refresh) --</option>\n            } @else {\n              <option value=\"\">-- Choose Data Query / SP --</option>\n            }\n            @for (sp of availableProcedures(); track sp.name) {\n              <option [value]=\"sp.name\">\n                @if (isAdvancedMode()) {\n                  {{ sp.schema }}.{{ sp.name }}\n                } @else {\n                  {{ sp.displayName }}{{ sp.category ? ' \u2022 ' + sp.category : '' }}\n                }\n              </option>\n            }\n          </select>\n        </div>\n\n        @if (selectedEntity()) {\n          <!-- Visual Parameter Linkers -->\n          @if (procedureParameters().length > 0) {\n            <div class=\"sp-params-group\">\n              <div class=\"params-header-row\">\n                <label class=\"field-label\">\n                  {{ isAdvancedMode() ? 'Procedure Input Parameters' : 'Filter Inputs & Parameters' }}\n                </label>\n                <button\n                  type=\"button\"\n                  class=\"btn-auto-params\"\n                  (click)=\"autoWireAllParameters()\"\n                  title=\"Auto-detect session parameters and add missing filter controls to the canvas\"\n                >\n                  <rpt-icon name=\"check\" [size]=\"11\" />\n                  <span>Auto-Wire Canvas Inputs</span>\n                </button>\n              </div>\n\n              @for (param of procedureParameters(); track param.name) {\n                <rpt-parameter-binding-editor\n                  [param]=\"param\"\n                  [currentValue]=\"getParamValue(param.name)\"\n                  [allComponents]=\"allComponents()\"\n                  [currentComponentId]=\"comp().id\"\n                  [isAdvancedMode]=\"isAdvancedMode()\"\n                  (valueChange)=\"setParamValue(param.name, $event)\"\n                  (linkedFieldChange)=\"onParamLinkedFieldChange($event)\"\n                />\n              }\n            </div>\n          }\n\n          <!-- Display Field (Visible text) -->\n          <div class=\"field-row\">\n            <div class=\"field-label-row\">\n              <label class=\"field-label\">\n                {{ isAdvancedMode() ? 'Display Field (from SP result)' : 'Text Shown in Dropdown' }}\n              </label>\n              @if (!isAdvancedMode()) {\n                <span class=\"auto-badge\">Auto-detected</span>\n              }\n            </div>\n            @if (entityColumns().length > 0) {\n              <select\n                class=\"field-select\"\n                [ngModel]=\"selectedDisplayField()\"\n                (ngModelChange)=\"onDisplayFieldChanged($event)\"\n              >\n                <option value=\"\">-- Select Display Column --</option>\n                @for (col of entityColumns(); track col.field) {\n                  <option [value]=\"col.field\">\n                    {{ col.label }} {{ isAdvancedMode() ? '(' + col.dataType + ')' : '' }}\n                  </option>\n                }\n              </select>\n            } @else {\n              <input\n                type=\"text\"\n                class=\"field-input\"\n                placeholder=\"Column name (leave blank for auto)\"\n                [ngModel]=\"selectedDisplayField()\"\n                (ngModelChange)=\"onDisplayFieldChanged($event)\"\n              />\n            }\n          </div>\n\n          <!-- Value Field (Stored key) -->\n          <div class=\"field-row\">\n            <div class=\"field-label-row\">\n              <label class=\"field-label\">\n                {{ isAdvancedMode() ? 'Value Field (from SP result)' : 'Internal Value / Key' }}\n              </label>\n              @if (!isAdvancedMode()) {\n                <span class=\"auto-badge\">Auto-detected</span>\n              }\n            </div>\n            @if (entityColumns().length > 0) {\n              <select\n                class=\"field-select\"\n                [ngModel]=\"selectedValueField()\"\n                (ngModelChange)=\"onValueFieldChanged($event)\"\n              >\n                <option value=\"\">-- Select Key Column --</option>\n                @for (col of entityColumns(); track col.field) {\n                  <option [value]=\"col.field\">\n                    {{ col.label }} {{ isAdvancedMode() ? '(' + col.dataType + ')' : '' }}\n                  </option>\n                }\n              </select>\n            } @else {\n              <input\n                type=\"text\"\n                class=\"field-input\"\n                placeholder=\"Column name (leave blank for auto)\"\n                [ngModel]=\"selectedValueField()\"\n                (ngModelChange)=\"onValueFieldChanged($event)\"\n              />\n            }\n          </div>\n        }\n      }\n\n      <!-- 3C. STATIC OPTIONS EDITOR -->\n      @if (currentSourceType() === 'static') {\n        <div class=\"static-options-wrapper\">\n          <div class=\"static-options-header\">\n            <span class=\"field-label\">Static Options</span>\n            <button type=\"button\" class=\"btn-add-option\" (click)=\"addStaticOption()\">\n              <rpt-icon name=\"plus\" [size]=\"11\" />\n              <span>Add Option</span>\n            </button>\n          </div>\n\n          <div class=\"static-options-list\">\n            @for (opt of staticOptions(); track $index) {\n              <div class=\"static-option-row\">\n                <input\n                  type=\"text\"\n                  class=\"field-input opt-key\"\n                  placeholder=\"Key\"\n                  [ngModel]=\"opt.key\"\n                  (ngModelChange)=\"updateStaticOption($index, 'key', $event)\"\n                />\n                <input\n                  type=\"text\"\n                  class=\"field-input opt-label\"\n                  placeholder=\"Label\"\n                  [ngModel]=\"opt.label\"\n                  (ngModelChange)=\"updateStaticOption($index, 'label', $event)\"\n                />\n                <button\n                  type=\"button\"\n                  class=\"btn-remove-option\"\n                  (click)=\"removeStaticOption($index)\"\n                  title=\"Remove option\"\n                >\n                  <rpt-icon name=\"trash\" [size]=\"12\" />\n                </button>\n              </div>\n            }\n          </div>\n        </div>\n      }\n    </div>", styles: [".property-group{display:flex;flex-direction:column;gap:12px}.group-title{font-size:.7rem;font-weight:700;color:var(--rpt-color-text-muted, #64748b);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--rpt-color-border, #e2e8f0);padding-bottom:4px}.field-row{display:flex;flex-direction:column;gap:4px}.field-label-row{display:flex;align-items:center;justify-content:space-between}.field-badge-val{font-size:.65rem;font-weight:600;color:var(--rpt-color-primary, #2563eb);background:#eff6ff;border:1px solid #bfdbfe;padding:1px 6px;border-radius:9999px}.field-label{font-size:.7rem;font-weight:600;color:var(--rpt-color-text, #0f172a)}.field-input,.field-select,.field-textarea{width:100%;box-sizing:border-box;border:1px solid var(--rpt-color-border, #cbd5e1);border-radius:var(--rpt-border-radius-sm, 4px);padding:6px 10px;font-size:var(--rpt-font-size-sm, .75rem);color:var(--rpt-color-text, #0f172a);background:#fff;outline:none;transition:all var(--rpt-transition-speed, .15s) ease}.field-select{appearance:none;-webkit-appearance:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right 10px center;background-size:13px 13px;padding-right:28px;cursor:pointer}.field-input:focus,.field-select:focus,.field-textarea:focus{border-color:var(--rpt-color-primary, #2563eb);box-shadow:var(--rpt-box-shadow-focus, 0 0 0 3px rgba(37, 99, 235, .25))}.checkbox-toggle{display:inline-flex;align-items:center;gap:8px;font-size:.75rem;font-weight:500;color:var(--rpt-color-text, #0f172a);cursor:pointer}.preset-pill-group{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}.preset-pill{background:#f1f5f9;border:1px solid #e2e8f0;border-radius:4px;padding:2px 8px;font-size:.65rem;font-weight:600;color:#475569;cursor:pointer;transition:all .12s ease}.preset-pill:hover{background:#e2e8f0;color:#0f172a;border-color:#cbd5e1}.preset-pill-active{background:var(--rpt-color-primary, #2563eb)!important;color:#fff!important;border-color:var(--rpt-color-primary, #2563eb)!important}.preset-pill-reset{color:var(--rpt-color-primary, #2563eb);background:#eff6ff;border-color:#bfdbfe}.preset-pill-reset:hover{background:#dbeafe;color:#1d4ed8;border-color:#93c5fd}\n", ".datasource-header-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.mode-toggle-pill{display:inline-flex;background:#e2e8f0;border-radius:12px;padding:2px;gap:2px}.pill-btn{border:none;background:transparent;padding:2px 8px;font-size:.65rem;font-weight:500;color:#64748b;border-radius:10px;cursor:pointer;transition:all .12s ease}.pill-btn:hover{color:#0f172a}.pill-btn.active{background:#fff;color:var(--rpt-color-primary, #2563eb);font-weight:700;box-shadow:0 1px 2px #00000014}.datasource-guidance-card{display:flex;align-items:center;gap:6px;background:#eff6ff;border:1px solid #bfdbfe;color:#1e40af;font-size:.675rem;padding:6px 8px;border-radius:6px;margin-bottom:8px;line-height:1.35}.source-type-switcher{display:flex;background:#f1f5f9;border:1px solid var(--rpt-color-border, #cbd5e1);border-radius:6px;padding:2px;gap:2px;margin-bottom:6px}.source-tab-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:6px 4px;font-size:.7rem;font-weight:600;color:var(--rpt-color-text-muted, #64748b);background:transparent;border:none;border-radius:4px;cursor:pointer;transition:all .12s ease}.source-tab-btn:hover{color:var(--rpt-color-text, #0f172a)}.source-tab-btn.active{background:#fff;color:var(--rpt-color-primary, #2563eb);box-shadow:0 1px 2px #0000000d}.btn-refresh-entities{display:inline-flex;align-items:center;gap:4px;border:none;background:transparent;color:var(--rpt-color-primary, #2563eb);font-size:.65rem;font-weight:600;cursor:pointer;padding:0}.btn-refresh-entities:hover{text-decoration:underline}.btn-auto-params{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;font-size:.65rem;font-weight:600;color:#2563eb;background:#eff6ff;border:1px solid #bfdbfe;border-radius:4px;cursor:pointer;transition:all .12s ease}.btn-auto-params:hover{background:#2563eb;color:#fff}.auto-badge{font-size:.62rem;font-weight:600;background:#dcfce7;color:#166534;padding:1px 5px;border-radius:4px}.field-hint{font-size:.65rem;color:var(--rpt-color-text-muted, #94a3b8);margin-top:2px}.sp-params-group{display:flex;flex-direction:column;gap:6px;background:#f8fafc;padding:8px;border-radius:6px;border:1px solid #e2e8f0;margin-bottom:6px}.params-header-row{display:flex;align-items:center;justify-content:space-between}.params-hint{font-size:.64rem;color:#64748b;font-style:italic}.static-options-wrapper{display:flex;flex-direction:column;gap:8px}.static-options-header{display:flex;align-items:center;justify-content:space-between}.btn-add-option{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--rpt-color-border, #cbd5e1);background:#fff;border-radius:4px;padding:3px 8px;font-size:.65rem;font-weight:600;color:var(--rpt-color-primary, #2563eb);cursor:pointer;transition:all .12s ease}.btn-add-option:hover{background:#eff6ff}.static-options-list{display:flex;flex-direction:column;gap:6px}.static-option-row{display:flex;align-items:center;gap:6px}.opt-key{flex:1}.opt-label{flex:1.5}.btn-remove-option{width:24px;height:24px;border:none;background:transparent;color:#94a3b8;border-radius:4px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;padding:0;transition:all .12s ease}.btn-remove-option:hover{background:#fee2e2;color:#ef4444}.field-input{width:100%;padding:6px 8px;font-size:.75rem;border:1px solid var(--rpt-color-border, #cbd5e1);border-radius:var(--rpt-border-radius, 6px);background:var(--rpt-color-surface, #ffffff);color:var(--rpt-color-text, #0f172a);box-sizing:border-box;outline:none;transition:border-color .12s ease}.field-input:focus{border-color:var(--rpt-color-primary, #2563eb)}\n"] }]
         }], ctorParameters: () => [] });
 
 /**
@@ -11227,6 +11860,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 class PropertyEditorActionComponent {
     designerState = inject(DesignerStateService, { optional: true });
     discoveryAdapter = inject(ReportSchemaDiscoveryAdapter, { optional: true });
+    lookupAdapter = inject(ReportLookupAdapter, { optional: true });
+    sessionService = inject(ReportSessionContextService, { optional: true });
+    dataDiscovery = inject(ReportDataDiscoveryService, { optional: true });
     comp = input.required();
     updateProperty = output();
     actionOptions = [
@@ -11317,42 +11953,44 @@ class PropertyEditorActionComponent {
             }
         }
         const dsId = targetDs?.id || entityName || 'default';
-        if (entityName && this.discoveryAdapter) {
-            this.discoveryAdapter.getColumns(entityName, 'dbo', entityType).subscribe({
+        const mappings = targetDs?.parameterMappings || this.comp().dataSource?.parameterMappings || def.components.find((c) => c.dataSource?.entityName === entityName)?.dataSource?.parameterMappings;
+        const applyGridCols = (cols) => {
+            const newGrid = {
+                dataSourceId: dsId,
+                columns: cols.length > 0 ? cols : [
+                    { field: 'id', label: 'ID', dataType: 'number', visible: true, sortable: true },
+                    { field: 'name', label: 'Name', dataType: 'string', visible: true, sortable: true },
+                ],
+                options: {
+                    pagination: true,
+                    pageSize: 25,
+                    showRowNumbers: true,
+                    showFooter: true,
+                    allowColumnReorder: true,
+                    allowExport: true,
+                },
+            };
+            this.designerState?.updateGridSettings(newGrid);
+        };
+        if (entityName && this.dataDiscovery) {
+            this.dataDiscovery
+                .autoDetectColumns(entityName, entityType, mappings || {}, targetDs?.schema || 'dbo')
+                .subscribe({
                 next: (cols) => {
-                    const gridCols = cols.map((c) => ({
-                        field: c.field,
-                        label: c.label || humanizeIdentifier(c.field),
-                        dataType: (c.dataType === 'number' || c.dataType === 'date' || c.dataType === 'boolean' ? c.dataType : 'string'),
-                        visible: true,
-                        sortable: true,
-                        filterable: true,
-                    }));
-                    const newGrid = {
-                        dataSourceId: dsId,
-                        columns: gridCols.length > 0 ? gridCols : [
-                            { field: 'id', label: 'ID', dataType: 'number', visible: true, sortable: true },
-                            { field: 'name', label: 'Name', dataType: 'string', visible: true, sortable: true },
-                        ],
-                        options: {
-                            pagination: true,
-                            pageSize: 25,
-                            showRowNumbers: true,
-                            showFooter: true,
-                            allowColumnReorder: true,
-                            allowExport: true,
-                        },
-                    };
-                    this.designerState?.updateGridSettings(newGrid);
+                    if (cols && cols.length > 0) {
+                        applyGridCols(cols);
+                    }
+                    else {
+                        this.fallbackGridCreation(dsId);
+                    }
                 },
-                error: (err) => {
-                    console.warn('[PropertyEditorAction] Failed to discover columns for grid, using default grid:', err);
-                    this.fallbackGridCreation(entityName);
+                error: () => {
+                    this.fallbackGridCreation(dsId);
                 },
             });
         }
         else {
-            this.fallbackGridCreation(entityName || 'default');
+            this.fallbackGridCreation(dsId);
         }
     }
     fallbackGridCreation(dsId) {
@@ -11813,12 +12451,42 @@ class PropertyEditorComponent {
     designerState = inject(DesignerStateService);
     registry = inject(ComponentRegistry);
     discoveryAdapter = inject(ReportSchemaDiscoveryAdapter, { optional: true });
+    lookupAdapter = inject(ReportLookupAdapter, { optional: true });
+    sessionService = inject(ReportSessionContextService, { optional: true });
+    dataDiscovery = inject(ReportDataDiscoveryService);
+    isDetectingColumns = signal(false);
+    gridDetectionStatus = signal(null);
+    availableEntities = signal([]);
+    gridProcedureParameters = signal([]);
     definition = this.designerState.definition;
     activeTab = this.designerState.activeTab;
     selectedComponent = this.designerState.selectedComponent;
     collapseRequested = output();
     maxColumns = computed(() => this.definition().layout.columns || 12);
     allComponents = computed(() => this.definition().components);
+    gridDataSource = computed(() => {
+        const def = this.definition();
+        const dsId = def.grid?.dataSourceId;
+        if (!dsId)
+            return def.dataSources?.[0];
+        return def.dataSources?.find((d) => d.id === dsId || d.name === dsId) ?? def.dataSources?.[0];
+    });
+    constructor() {
+        this.dataDiscovery.getEntities().subscribe((entities) => {
+            this.availableEntities.set(entities);
+        });
+        effect(() => {
+            const ds = this.gridDataSource();
+            if (ds && ds.type === 'stored_procedure' && ds.name) {
+                this.dataDiscovery.getParameters(ds.name, ds.schema || 'dbo').subscribe((params) => {
+                    this.gridProcedureParameters.set(params);
+                });
+            }
+            else {
+                this.gridProcedureParameters.set([]);
+            }
+        }, { allowSignalWrites: true });
+    }
     propertySchema = computed(() => {
         const comp = this.selectedComponent();
         if (!comp)
@@ -11978,53 +12646,94 @@ class PropertyEditorComponent {
             rowClickAction: action,
         });
     }
-    autoDetectGridColumns() {
-        if (!this.discoveryAdapter)
-            return;
-        const currentGrid = this.definition().grid;
-        let targetEntity = '';
-        let targetType = 'stored_procedure';
-        const gridDs = this.definition().dataSources?.find((d) => d.id === currentGrid?.dataSourceId);
-        if (gridDs && gridDs.endpoint) {
-            targetEntity = gridDs.endpoint;
-            if (gridDs.method === 'GET') {
-                targetType = 'table';
-            }
+    onGridEntityChanged(event) {
+        const isTable = event.type === 'table';
+        const dsId = `ds-${event.name}`;
+        const newDs = {
+            id: dsId,
+            name: event.name,
+            endpoint: event.name,
+            schema: 'dbo',
+            type: isTable ? 'table' : 'stored_procedure',
+            method: isTable ? 'GET' : 'STORED_PROCEDURE',
+            parameterMappings: {},
+        };
+        if (!isTable) {
+            this.dataDiscovery.getParameters(event.name, 'dbo').subscribe({
+                next: (params) => this.gridProcedureParameters.set(params || []),
+                error: () => this.gridProcedureParameters.set([]),
+            });
         }
         else {
+            this.gridProcedureParameters.set([]);
+        }
+        this.designerState.setGridDataSource(newDs);
+    }
+    onGridDataSourceParametersChanged(mappings) {
+        this.designerState.updateGridDataSourceParameters(mappings);
+    }
+    autoDetectGridColumns() {
+        const currentGrid = this.definition().grid;
+        const gridDs = this.gridDataSource();
+        let targetEntity = gridDs?.endpoint || gridDs?.name || '';
+        let targetType = gridDs?.type === 'table' ? 'table' : 'stored_procedure';
+        let targetMappings = gridDs?.parameterMappings || {};
+        let schema = gridDs?.schema || 'dbo';
+        if (!targetEntity) {
             const compWithEntity = this.definition().components.find((c) => c.dataSource?.entityName);
             if (compWithEntity?.dataSource?.entityName) {
                 targetEntity = compWithEntity.dataSource.entityName;
+                targetMappings = compWithEntity.dataSource.parameterMappings || {};
                 if (compWithEntity.dataSource.sourceType === 'table') {
                     targetType = 'table';
                 }
+                schema = compWithEntity.dataSource.schema || 'dbo';
             }
         }
         if (!targetEntity) {
-            console.warn('[PropertyEditor] No procedure or table entity found to auto-detect columns from.');
+            this.gridDetectionStatus.set({
+                message: 'No data source configured. Choose a Stored Procedure or Table in the Grid Data Source section above.',
+                kind: 'error',
+            });
             return;
         }
-        this.discoveryAdapter.getColumns(targetEntity, 'dbo', targetType).subscribe({
-            next: (cols) => {
-                if (!cols || cols.length === 0)
-                    return;
-                const mappedCols = cols.map((c) => ({
-                    field: c.field,
-                    label: humanizeIdentifier(c.label || c.field),
-                    dataType: c.dataType || 'string',
-                    visible: true,
-                    sortable: true,
-                    align: c.dataType === 'number' ? 'right' : 'left',
-                }));
-                this.designerState.updateGridSettings({
-                    ...(currentGrid ?? {
-                        dataSourceId: 'default',
-                        options: { pagination: true, pageSize: 25, showRowNumbers: true, showFooter: true },
-                    }),
-                    columns: mappedCols,
+        this.isDetectingColumns.set(true);
+        this.gridDetectionStatus.set({
+            message: `Detecting columns for ${targetEntity}...`,
+            kind: 'info',
+        });
+        this.dataDiscovery.autoDetectColumns(targetEntity, targetType, targetMappings, schema).subscribe({
+            next: (mappedCols) => {
+                if (mappedCols && mappedCols.length > 0) {
+                    this.designerState.updateGridSettings({
+                        ...(currentGrid ?? {
+                            dataSourceId: gridDs?.id || `ds-${targetEntity}`,
+                            options: { pagination: true, pageSize: 25, showRowNumbers: true, showFooter: true },
+                        }),
+                        columns: mappedCols,
+                    });
+                    this.isDetectingColumns.set(false);
+                    this.gridDetectionStatus.set({
+                        message: `Successfully detected ${mappedCols.length} columns from ${targetEntity}!`,
+                        kind: 'success',
+                    });
+                    setTimeout(() => this.gridDetectionStatus.set(null), 4000);
+                }
+                else {
+                    this.isDetectingColumns.set(false);
+                    this.gridDetectionStatus.set({
+                        message: `No columns detected for ${targetEntity}. Stored procedure returned 0 rows. Verify parameter values or add columns manually.`,
+                        kind: 'error',
+                    });
+                }
+            },
+            error: (err) => {
+                this.isDetectingColumns.set(false);
+                this.gridDetectionStatus.set({
+                    message: `Failed to detect columns: ${err?.message || 'Database error'}. You can add columns manually.`,
+                    kind: 'error',
                 });
             },
-            error: (err) => console.error('[PropertyEditor] Auto-detect columns failed:', err),
         });
     }
     expandedSections = signal({
@@ -12084,7 +12793,7 @@ class PropertyEditorComponent {
         return comp.validation?.required ? 'Required' : 'Optional';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PropertyEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: PropertyEditorComponent, isStandalone: true, selector: "rpt-property-editor", outputs: { collapseRequested: "collapseRequested" }, ngImport: i0, template: "    <div class=\"editor-container\">\n      <!-- Editor Header & Tabs -->\n      <div class=\"editor-tabs\">\n        <button\n          type=\"button\"\n          class=\"tab-btn\"\n          [class.active]=\"activeTab() === 'properties'\"\n          (click)=\"setTab('properties')\"\n          [disabled]=\"!selectedComponent()\"\n        >\n          <rpt-icon name=\"edit\" [size]=\"13\" />\n          <span>Properties</span>\n        </button>\n        <button\n          type=\"button\"\n          class=\"tab-btn\"\n          [class.active]=\"activeTab() === 'report'\"\n          (click)=\"setTab('report')\"\n        >\n          <rpt-icon name=\"design\" [size]=\"13\" />\n          <span>Layout</span>\n        </button>\n        <button\n          type=\"button\"\n          class=\"tab-btn\"\n          [class.active]=\"activeTab() === 'grid'\"\n          (click)=\"setTab('grid')\"\n        >\n          <rpt-icon name=\"table\" [size]=\"13\" />\n          <span>Grid</span>\n        </button>\n\n        <div style=\"flex: 1;\"></div>\n\n        <button\n          type=\"button\"\n          class=\"tab-btn btn-collapse-inspector\"\n          (click)=\"collapseRequested.emit()\"\n          title=\"Collapse Property Editor\"\n          aria-label=\"Collapse Property Editor\"\n        >\n          <rpt-icon name=\"chevron-right\" [size]=\"13\" />\n        </button>\n      </div>\n\n      <!-- Editor Body -->\n      <div class=\"editor-body\">\n        <!-- 1. COMPONENT PROPERTIES TAB -->\n        @if (activeTab() === 'properties') {\n          @if (selectedComponent(); as comp) {\n            <div class=\"component-sections-wrapper\">\n              <!-- Component Identifier Header (Pinned at Top) -->\n              <div class=\"comp-badge-header\">\n                <div class=\"badge-title\">\n                  <span class=\"badge-type\">{{ comp.type }}</span>\n                  <span class=\"badge-id\">{{ comp.id }}</span>\n                </div>\n                <div class=\"badge-header-actions\">\n                  <button\n                    type=\"button\"\n                    class=\"btn-badge-action\"\n                    (click)=\"duplicateComponent(comp.id)\"\n                    title=\"Duplicate component\"\n                  >\n                    <rpt-icon name=\"copy\" [size]=\"13\" />\n                  </button>\n                  <button\n                    type=\"button\"\n                    class=\"btn-badge-action btn-badge-delete\"\n                    (click)=\"deleteComponent(comp.id)\"\n                    title=\"Delete component\"\n                  >\n                    <rpt-icon name=\"trash\" [size]=\"13\" />\n                  </button>\n                  <button\n                    type=\"button\"\n                    class=\"btn-deselect\"\n                    (click)=\"deselect()\"\n                    title=\"Deselect component\"\n                  >\n                    <rpt-icon name=\"close\" [size]=\"13\" />\n                  </button>\n                </div>\n              </div>\n\n              <!-- Accordion Container -->\n              <div class=\"property-accordion\">\n                <!-- 1. OPTIONS DATA SOURCE ACCORDION (FIRST for Dropdown) -->\n                @if (comp.type === 'dropdown') {\n                  <div class=\"accordion-item\" [class.is-expanded]=\"isSectionExpanded('datasource')\">\n                    <button\n                      type=\"button\"\n                      class=\"accordion-header\"\n                      (click)=\"toggleSection('datasource')\"\n                      title=\"Toggle Options Data Source section\"\n                    >\n                      <div class=\"header-left\">\n                        <rpt-icon name=\"database\" [size]=\"14\" />\n                        <span class=\"header-title\">Options Data Source</span>\n                        <span class=\"header-badge\">{{ getDatasourceBadge(comp) }}</span>\n                      </div>\n                      <div class=\"header-right\">\n                        <rpt-icon name=\"chevron-down\" [size]=\"13\" class=\"accordion-chevron\" />\n                      </div>\n                    </button>\n                    @if (isSectionExpanded('datasource')) {\n                      <div class=\"accordion-content\">\n                        <rpt-property-editor-datasource\n                          [comp]=\"comp\"\n                          [allComponents]=\"allComponents()\"\n                          (updateDataSource)=\"updateCompDataSource(comp.id, $event)\"\n                          (updateProperty)=\"updateProp(comp.id, $event.key, $event.value)\"\n                        />\n                      </div>\n                    }\n                  </div>\n                }\n\n                <!-- BUTTON ACTION ACCORDION (FIRST for Button) -->\n                @if (comp.type === 'button') {\n                  <div class=\"accordion-item\" [class.is-expanded]=\"isSectionExpanded('action')\">\n                    <button\n                      type=\"button\"\n                      class=\"accordion-header\"\n                      (click)=\"toggleSection('action')\"\n                      title=\"Toggle Button Action section\"\n                    >\n                      <div class=\"header-left\">\n                        <rpt-icon name=\"lightning\" [size]=\"14\" />\n                        <span class=\"header-title\">Button Action</span>\n                        <span class=\"header-badge\">{{ getActionBadge(comp) }}</span>\n                      </div>\n                      <div class=\"header-right\">\n                        <rpt-icon name=\"chevron-down\" [size]=\"13\" class=\"accordion-chevron\" />\n                      </div>\n                    </button>\n                    @if (isSectionExpanded('action')) {\n                      <div class=\"accordion-content\">\n                        <rpt-property-editor-action\n                          [comp]=\"comp\"\n                          (updateProperty)=\"updateProp(comp.id, $event.key, $event.value)\"\n                        />\n                      </div>\n                    }\n                  </div>\n                }\n\n                <!-- 2. GENERAL PROPERTIES ACCORDION -->\n                <div class=\"accordion-item\" [class.is-expanded]=\"isSectionExpanded('general')\">\n                  <button\n                    type=\"button\"\n                    class=\"accordion-header\"\n                    (click)=\"toggleSection('general')\"\n                    title=\"Toggle General Properties section\"\n                  >\n                    <div class=\"header-left\">\n                      <rpt-icon name=\"edit\" [size]=\"14\" />\n                      <span class=\"header-title\">General Properties</span>\n                      @if (comp.label) {\n                        <span class=\"header-badge\">{{ comp.label }}</span>\n                      }\n                    </div>\n                    <div class=\"header-right\">\n                      <rpt-icon name=\"chevron-down\" [size]=\"13\" class=\"accordion-chevron\" />\n                    </div>\n                  </button>\n                  @if (isSectionExpanded('general')) {\n                    <div class=\"accordion-content\">\n                      <rpt-property-editor-general\n                        [comp]=\"comp\"\n                        [propertySchema]=\"propertySchema()\"\n                        (update)=\"updateComp($event.field, $event.value)\"\n                        (updateProperty)=\"updateProp(comp.id, $event.key, $event.value)\"\n                        (deselect)=\"deselect()\"\n                      />\n                    </div>\n                  }\n                </div>\n\n                <!-- 3. LAYOUT & GRID ACCORDION -->\n                <div class=\"accordion-item\" [class.is-expanded]=\"isSectionExpanded('layout')\">\n                  <button\n                    type=\"button\"\n                    class=\"accordion-header\"\n                    (click)=\"toggleSection('layout')\"\n                    title=\"Toggle Layout & Dimensions section\"\n                  >\n                    <div class=\"header-left\">\n                      <rpt-icon name=\"design\" [size]=\"14\" />\n                      <span class=\"header-title\">Layout & Grid</span>\n                      <span class=\"header-badge\">{{ getLayoutBadge(comp) }}</span>\n                    </div>\n                    <div class=\"header-right\">\n                      <rpt-icon name=\"chevron-down\" [size]=\"13\" class=\"accordion-chevron\" />\n                    </div>\n                  </button>\n                  @if (isSectionExpanded('layout')) {\n                    <div class=\"accordion-content\">\n                      <rpt-property-editor-layout\n                        [comp]=\"comp\"\n                        [maxColumns]=\"maxColumns()\"\n                        (updateLayout)=\"updateLayout($event.key, $event.value)\"\n                        (updateHeight)=\"updateComponentHeight($event)\"\n                        (resetDimensions)=\"resetComponentDimensions(comp.id, comp.type)\"\n                      />\n                    </div>\n                  }\n                </div>\n\n                <!-- 4. VALIDATION ACCORDION -->\n                <div class=\"accordion-item\" [class.is-expanded]=\"isSectionExpanded('validation')\">\n                  <button\n                    type=\"button\"\n                    class=\"accordion-header\"\n                    (click)=\"toggleSection('validation')\"\n                    title=\"Toggle Validation Rules section\"\n                  >\n                    <div class=\"header-left\">\n                      <rpt-icon name=\"check\" [size]=\"14\" />\n                      <span class=\"header-title\">Validation Rules</span>\n                      <span class=\"header-badge\">{{ getValidationBadge(comp) }}</span>\n                    </div>\n                    <div class=\"header-right\">\n                      <rpt-icon name=\"chevron-down\" [size]=\"13\" class=\"accordion-chevron\" />\n                    </div>\n                  </button>\n                  @if (isSectionExpanded('validation')) {\n                    <div class=\"accordion-content\">\n                      <rpt-property-editor-validation\n                        [comp]=\"comp\"\n                        (updateValidation)=\"updateValidation($event.key, $event.value)\"\n                      />\n                    </div>\n                  }\n                </div>\n              </div>\n            </div>\n          } @else {\n            <div class=\"empty-selection\">\n              <div class=\"empty-icon-wrap\">\n                <rpt-icon name=\"cursor\" [size]=\"24\" color=\"#64748b\" />\n              </div>\n              <p class=\"empty-text\">Select a component on the canvas to configure its properties.</p>\n            </div>\n          }\n        }\n\n        <!-- 2. REPORT SETTINGS TAB -->\n        @if (activeTab() === 'report') {\n          <rpt-property-editor-report\n            [definition]=\"definition()\"\n            (updateReport)=\"updateReport($event.field, $event.value)\"\n            (updateLayout)=\"updateLayoutProp($event.field, $event.value)\"\n          />\n        }\n\n        <!-- 3. RESULT GRID SETTINGS TAB -->\n        @if (activeTab() === 'grid') {\n          <rpt-property-editor-grid\n            [grid]=\"definition().grid\"\n            (addGrid)=\"addResultGrid()\"\n            (removeGrid)=\"removeResultGrid()\"\n            (addColumn)=\"addColumn()\"\n            (autoDetectColumns)=\"autoDetectGridColumns()\"\n            (removeColumn)=\"removeColumn($event)\"\n            (updateColumn)=\"updateColumn($event.index, $event.field, $event.value)\"\n            (updateOption)=\"updateGridOption($event.field, $event.value)\"\n            (updateRowClickAction)=\"updateGridRowClickAction($event)\"\n          />\n        }\n      </div>\n    </div>", styles: [":host{display:block;height:100%;background:#fff;border-left:1px solid var(--rpt-color-border, #cbd5e1);box-sizing:border-box;font-family:var(--rpt-font-family, inherit)}.editor-container{display:flex;flex-direction:column;height:100%}.editor-tabs{display:flex;flex-shrink:0;border-bottom:1px solid var(--rpt-color-border, #cbd5e1);background:var(--rpt-color-surface, #f8fafc)}.tab-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:12px 8px;font-size:var(--rpt-font-size-sm, .75rem);font-weight:600;color:var(--rpt-color-text-muted, #64748b);background:transparent;border:none;border-bottom:2px solid transparent;cursor:pointer;transition:all var(--rpt-transition-speed, .15s) ease}.tab-btn:hover:not(:disabled){color:var(--rpt-color-text, #0f172a)}.tab-btn.active{color:var(--rpt-color-primary, #2563eb);border-bottom-color:var(--rpt-color-primary, #2563eb);background:#fff}.tab-btn:disabled{opacity:.4;cursor:not-allowed}.editor-body{flex:1;overflow-y:auto;padding:12px 14px}.component-sections-wrapper{display:flex;flex-direction:column;gap:12px}.comp-badge-header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:var(--rpt-color-surface, #f8fafc);border-radius:6px;border:1px solid var(--rpt-color-border, #e2e8f0)}.badge-title{display:flex;align-items:center}.badge-type{font-size:.75rem;font-weight:700;color:var(--rpt-color-primary, #2563eb);text-transform:uppercase;margin-right:8px}.badge-id{font-size:.7rem;color:var(--rpt-color-text-muted, #94a3b8);font-family:monospace}.badge-header-actions{display:flex;align-items:center;gap:4px}.btn-badge-action{background:#fff;border:1px solid var(--rpt-color-border, #cbd5e1);display:inline-flex;align-items:center;justify-content:center;color:var(--rpt-color-text-muted, #64748b);cursor:pointer;width:24px;height:24px;border-radius:4px;padding:0;transition:all .12s ease}.btn-badge-action:hover{background:var(--rpt-color-surface-hover, #f1f5f9);color:var(--rpt-color-primary, #2563eb);border-color:var(--rpt-color-primary, #2563eb)}.btn-badge-action.btn-badge-delete:hover{background:#fee2e2;color:#ef4444;border-color:#fca5a5}.btn-deselect{background:none;border:1px solid transparent;display:inline-flex;align-items:center;justify-content:center;color:var(--rpt-color-text-muted, #64748b);cursor:pointer;width:24px;height:24px;border-radius:4px;padding:0;transition:all .15s ease}.btn-deselect:hover{color:var(--rpt-color-danger, #ef4444);background:#fee2e2;border-color:#fca5a5}.property-accordion{display:flex;flex-direction:column;gap:10px}.accordion-item{border:1px solid var(--rpt-color-border, #e2e8f0);border-radius:6px;background:#fff;overflow:hidden;transition:all .15s ease}.accordion-item.is-expanded{border-color:#cbd5e1;box-shadow:0 1px 3px #0000000a}.accordion-header{width:100%;display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:var(--rpt-color-surface, #f8fafc);border:none;cursor:pointer;text-align:left;-webkit-user-select:none;user-select:none;transition:background .15s ease}.accordion-header:hover{background:#f1f5f9}.accordion-item.is-expanded .accordion-header{background:#f8fafc;border-bottom:1px solid var(--rpt-color-border, #e2e8f0)}.header-left{display:flex;align-items:center;gap:8px;min-width:0;flex:1}.header-title{font-size:.72rem;font-weight:700;color:var(--rpt-color-text, #0f172a);text-transform:uppercase;letter-spacing:.03em;white-space:nowrap}.header-badge{font-size:.65rem;font-weight:600;color:var(--rpt-color-primary, #2563eb);background:#eff6ff;border:1px solid #bfdbfe;padding:1px 6px;border-radius:9999px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}.header-right{display:flex;align-items:center;color:var(--rpt-color-text-muted, #64748b);margin-left:8px}.accordion-chevron{transition:transform .2s ease}.accordion-item.is-expanded .accordion-chevron{transform:rotate(180deg)}.accordion-content{padding:12px;display:flex;flex-direction:column;gap:12px}::ng-deep .accordion-content .group-title{display:none}::ng-deep .accordion-content .comp-badge-header{display:none}.empty-selection{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center;box-sizing:border-box}.empty-icon-wrap{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:#f1f5f9;margin-bottom:16px;box-shadow:0 1px 3px #0000000a}.empty-text{font-size:.8125rem;line-height:1.5;max-width:220px;margin:0;color:var(--rpt-color-text-muted, #64748b)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: RptIconComponent, selector: "rpt-icon", inputs: ["name", "size", "color", "strokeWidth"] }, { kind: "component", type: PropertyEditorGeneralComponent, selector: "rpt-property-editor-general", inputs: ["comp", "propertySchema"], outputs: ["update", "updateProperty", "deselect"] }, { kind: "component", type: PropertyEditorLayoutComponent, selector: "rpt-property-editor-layout", inputs: ["comp", "maxColumns"], outputs: ["updateLayout", "updateHeight", "resetDimensions"] }, { kind: "component", type: PropertyEditorValidationComponent, selector: "rpt-property-editor-validation", inputs: ["comp"], outputs: ["updateValidation"] }, { kind: "component", type: PropertyEditorGridComponent, selector: "rpt-property-editor-grid", inputs: ["grid"], outputs: ["addGrid", "removeGrid", "addColumn", "autoDetectColumns", "removeColumn", "updateColumn", "updateOption", "updateRowClickAction"] }, { kind: "component", type: PropertyEditorReportComponent, selector: "rpt-property-editor-report", inputs: ["definition"], outputs: ["updateReport", "updateLayout"] }, { kind: "component", type: PropertyEditorDatasourceComponent, selector: "rpt-property-editor-datasource", inputs: ["comp", "allComponents"], outputs: ["updateDataSource", "updateProperty"] }, { kind: "component", type: PropertyEditorActionComponent, selector: "rpt-property-editor-action", inputs: ["comp"], outputs: ["updateProperty"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: PropertyEditorComponent, isStandalone: true, selector: "rpt-property-editor", outputs: { collapseRequested: "collapseRequested" }, ngImport: i0, template: "    <div class=\"editor-container\">\n      <!-- Editor Header & Tabs -->\n      <div class=\"editor-tabs\">\n        <button\n          type=\"button\"\n          class=\"tab-btn\"\n          [class.active]=\"activeTab() === 'properties'\"\n          (click)=\"setTab('properties')\"\n          [disabled]=\"!selectedComponent()\"\n        >\n          <rpt-icon name=\"edit\" [size]=\"13\" />\n          <span>Properties</span>\n        </button>\n        <button\n          type=\"button\"\n          class=\"tab-btn\"\n          [class.active]=\"activeTab() === 'report'\"\n          (click)=\"setTab('report')\"\n        >\n          <rpt-icon name=\"design\" [size]=\"13\" />\n          <span>Layout</span>\n        </button>\n        <button\n          type=\"button\"\n          class=\"tab-btn\"\n          [class.active]=\"activeTab() === 'grid'\"\n          (click)=\"setTab('grid')\"\n        >\n          <rpt-icon name=\"table\" [size]=\"13\" />\n          <span>Grid</span>\n        </button>\n\n        <div style=\"flex: 1;\"></div>\n\n        <button\n          type=\"button\"\n          class=\"tab-btn btn-collapse-inspector\"\n          (click)=\"collapseRequested.emit()\"\n          title=\"Collapse Property Editor\"\n          aria-label=\"Collapse Property Editor\"\n        >\n          <rpt-icon name=\"chevron-right\" [size]=\"13\" />\n        </button>\n      </div>\n\n      <!-- Editor Body -->\n      <div class=\"editor-body\">\n        <!-- 1. COMPONENT PROPERTIES TAB -->\n        @if (activeTab() === 'properties') {\n          @if (selectedComponent(); as comp) {\n            <div class=\"component-sections-wrapper\">\n              <!-- Component Identifier Header (Pinned at Top) -->\n              <div class=\"comp-badge-header\">\n                <div class=\"badge-title\">\n                  <span class=\"badge-type\">{{ comp.type }}</span>\n                  <span class=\"badge-id\">{{ comp.id }}</span>\n                </div>\n                <div class=\"badge-header-actions\">\n                  <button\n                    type=\"button\"\n                    class=\"btn-badge-action\"\n                    (click)=\"duplicateComponent(comp.id)\"\n                    title=\"Duplicate component\"\n                  >\n                    <rpt-icon name=\"copy\" [size]=\"13\" />\n                  </button>\n                  <button\n                    type=\"button\"\n                    class=\"btn-badge-action btn-badge-delete\"\n                    (click)=\"deleteComponent(comp.id)\"\n                    title=\"Delete component\"\n                  >\n                    <rpt-icon name=\"trash\" [size]=\"13\" />\n                  </button>\n                  <button\n                    type=\"button\"\n                    class=\"btn-deselect\"\n                    (click)=\"deselect()\"\n                    title=\"Deselect component\"\n                  >\n                    <rpt-icon name=\"close\" [size]=\"13\" />\n                  </button>\n                </div>\n              </div>\n\n              <!-- Accordion Container -->\n              <div class=\"property-accordion\">\n                <!-- 1. OPTIONS DATA SOURCE ACCORDION (FIRST for Dropdown) -->\n                @if (comp.type === 'dropdown') {\n                  <div class=\"accordion-item\" [class.is-expanded]=\"isSectionExpanded('datasource')\">\n                    <button\n                      type=\"button\"\n                      class=\"accordion-header\"\n                      (click)=\"toggleSection('datasource')\"\n                      title=\"Toggle Options Data Source section\"\n                    >\n                      <div class=\"header-left\">\n                        <rpt-icon name=\"database\" [size]=\"14\" />\n                        <span class=\"header-title\">Options Data Source</span>\n                        <span class=\"header-badge\">{{ getDatasourceBadge(comp) }}</span>\n                      </div>\n                      <div class=\"header-right\">\n                        <rpt-icon name=\"chevron-down\" [size]=\"13\" class=\"accordion-chevron\" />\n                      </div>\n                    </button>\n                    @if (isSectionExpanded('datasource')) {\n                      <div class=\"accordion-content\">\n                        <rpt-property-editor-datasource\n                          [comp]=\"comp\"\n                          [allComponents]=\"allComponents()\"\n                          (updateDataSource)=\"updateCompDataSource(comp.id, $event)\"\n                          (updateProperty)=\"updateProp(comp.id, $event.key, $event.value)\"\n                        />\n                      </div>\n                    }\n                  </div>\n                }\n\n                <!-- BUTTON ACTION ACCORDION (FIRST for Button) -->\n                @if (comp.type === 'button') {\n                  <div class=\"accordion-item\" [class.is-expanded]=\"isSectionExpanded('action')\">\n                    <button\n                      type=\"button\"\n                      class=\"accordion-header\"\n                      (click)=\"toggleSection('action')\"\n                      title=\"Toggle Button Action section\"\n                    >\n                      <div class=\"header-left\">\n                        <rpt-icon name=\"lightning\" [size]=\"14\" />\n                        <span class=\"header-title\">Button Action</span>\n                        <span class=\"header-badge\">{{ getActionBadge(comp) }}</span>\n                      </div>\n                      <div class=\"header-right\">\n                        <rpt-icon name=\"chevron-down\" [size]=\"13\" class=\"accordion-chevron\" />\n                      </div>\n                    </button>\n                    @if (isSectionExpanded('action')) {\n                      <div class=\"accordion-content\">\n                        <rpt-property-editor-action\n                          [comp]=\"comp\"\n                          (updateProperty)=\"updateProp(comp.id, $event.key, $event.value)\"\n                        />\n                      </div>\n                    }\n                  </div>\n                }\n\n                <!-- 2. GENERAL PROPERTIES ACCORDION -->\n                <div class=\"accordion-item\" [class.is-expanded]=\"isSectionExpanded('general')\">\n                  <button\n                    type=\"button\"\n                    class=\"accordion-header\"\n                    (click)=\"toggleSection('general')\"\n                    title=\"Toggle General Properties section\"\n                  >\n                    <div class=\"header-left\">\n                      <rpt-icon name=\"edit\" [size]=\"14\" />\n                      <span class=\"header-title\">General Properties</span>\n                      @if (comp.label) {\n                        <span class=\"header-badge\">{{ comp.label }}</span>\n                      }\n                    </div>\n                    <div class=\"header-right\">\n                      <rpt-icon name=\"chevron-down\" [size]=\"13\" class=\"accordion-chevron\" />\n                    </div>\n                  </button>\n                  @if (isSectionExpanded('general')) {\n                    <div class=\"accordion-content\">\n                      <rpt-property-editor-general\n                        [comp]=\"comp\"\n                        [propertySchema]=\"propertySchema()\"\n                        (update)=\"updateComp($event.field, $event.value)\"\n                        (updateProperty)=\"updateProp(comp.id, $event.key, $event.value)\"\n                        (deselect)=\"deselect()\"\n                      />\n                    </div>\n                  }\n                </div>\n\n                <!-- 3. LAYOUT & GRID ACCORDION -->\n                <div class=\"accordion-item\" [class.is-expanded]=\"isSectionExpanded('layout')\">\n                  <button\n                    type=\"button\"\n                    class=\"accordion-header\"\n                    (click)=\"toggleSection('layout')\"\n                    title=\"Toggle Layout & Dimensions section\"\n                  >\n                    <div class=\"header-left\">\n                      <rpt-icon name=\"design\" [size]=\"14\" />\n                      <span class=\"header-title\">Layout & Grid</span>\n                      <span class=\"header-badge\">{{ getLayoutBadge(comp) }}</span>\n                    </div>\n                    <div class=\"header-right\">\n                      <rpt-icon name=\"chevron-down\" [size]=\"13\" class=\"accordion-chevron\" />\n                    </div>\n                  </button>\n                  @if (isSectionExpanded('layout')) {\n                    <div class=\"accordion-content\">\n                      <rpt-property-editor-layout\n                        [comp]=\"comp\"\n                        [maxColumns]=\"maxColumns()\"\n                        (updateLayout)=\"updateLayout($event.key, $event.value)\"\n                        (updateHeight)=\"updateComponentHeight($event)\"\n                        (resetDimensions)=\"resetComponentDimensions(comp.id, comp.type)\"\n                      />\n                    </div>\n                  }\n                </div>\n\n                <!-- 4. VALIDATION ACCORDION -->\n                <div class=\"accordion-item\" [class.is-expanded]=\"isSectionExpanded('validation')\">\n                  <button\n                    type=\"button\"\n                    class=\"accordion-header\"\n                    (click)=\"toggleSection('validation')\"\n                    title=\"Toggle Validation Rules section\"\n                  >\n                    <div class=\"header-left\">\n                      <rpt-icon name=\"check\" [size]=\"14\" />\n                      <span class=\"header-title\">Validation Rules</span>\n                      <span class=\"header-badge\">{{ getValidationBadge(comp) }}</span>\n                    </div>\n                    <div class=\"header-right\">\n                      <rpt-icon name=\"chevron-down\" [size]=\"13\" class=\"accordion-chevron\" />\n                    </div>\n                  </button>\n                  @if (isSectionExpanded('validation')) {\n                    <div class=\"accordion-content\">\n                      <rpt-property-editor-validation\n                        [comp]=\"comp\"\n                        (updateValidation)=\"updateValidation($event.key, $event.value)\"\n                      />\n                    </div>\n                  }\n                </div>\n              </div>\n            </div>\n          } @else {\n            <div class=\"empty-selection\">\n              <div class=\"empty-icon-wrap\">\n                <rpt-icon name=\"cursor\" [size]=\"24\" color=\"#64748b\" />\n              </div>\n              <p class=\"empty-text\">Select a component on the canvas to configure its properties.</p>\n            </div>\n          }\n        }\n\n        <!-- 2. REPORT SETTINGS TAB -->\n        @if (activeTab() === 'report') {\n          <rpt-property-editor-report\n            [definition]=\"definition()\"\n            (updateReport)=\"updateReport($event.field, $event.value)\"\n            (updateLayout)=\"updateLayoutProp($event.field, $event.value)\"\n          />\n        }\n\n        <!-- 3. RESULT GRID SETTINGS TAB -->\n        @if (activeTab() === 'grid') {\n          <rpt-property-editor-grid\n            [grid]=\"definition().grid\"\n            [dataSource]=\"gridDataSource()\"\n            [availableEntities]=\"availableEntities()\"\n            [procedureParameters]=\"gridProcedureParameters()\"\n            [allComponents]=\"allComponents()\"\n            [isDetecting]=\"isDetectingColumns()\"\n            [statusMessage]=\"gridDetectionStatus()?.message ?? null\"\n            [statusKind]=\"gridDetectionStatus()?.kind ?? null\"\n            (entityChanged)=\"onGridEntityChanged($event)\"\n            (updateDataSourceParameters)=\"onGridDataSourceParametersChanged($event)\"\n            (addGrid)=\"addResultGrid()\"\n            (removeGrid)=\"removeResultGrid()\"\n            (addColumn)=\"addColumn()\"\n            (autoDetectColumns)=\"autoDetectGridColumns()\"\n            (removeColumn)=\"removeColumn($event)\"\n            (updateColumn)=\"updateColumn($event.index, $event.field, $event.value)\"\n            (updateOption)=\"updateGridOption($event.field, $event.value)\"\n            (updateRowClickAction)=\"updateGridRowClickAction($event)\"\n          />\n        }\n      </div>\n    </div>", styles: [":host{display:block;height:100%;background:#fff;border-left:1px solid var(--rpt-color-border, #cbd5e1);box-sizing:border-box;font-family:var(--rpt-font-family, inherit)}.editor-container{display:flex;flex-direction:column;height:100%}.editor-tabs{display:flex;flex-shrink:0;border-bottom:1px solid var(--rpt-color-border, #cbd5e1);background:var(--rpt-color-surface, #f8fafc)}.tab-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:12px 8px;font-size:var(--rpt-font-size-sm, .75rem);font-weight:600;color:var(--rpt-color-text-muted, #64748b);background:transparent;border:none;border-bottom:2px solid transparent;cursor:pointer;transition:all var(--rpt-transition-speed, .15s) ease}.tab-btn:hover:not(:disabled){color:var(--rpt-color-text, #0f172a)}.tab-btn.active{color:var(--rpt-color-primary, #2563eb);border-bottom-color:var(--rpt-color-primary, #2563eb);background:#fff}.tab-btn:disabled{opacity:.4;cursor:not-allowed}.editor-body{flex:1;overflow-y:auto;padding:12px 14px}.component-sections-wrapper{display:flex;flex-direction:column;gap:12px}.comp-badge-header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:var(--rpt-color-surface, #f8fafc);border-radius:6px;border:1px solid var(--rpt-color-border, #e2e8f0)}.badge-title{display:flex;align-items:center}.badge-type{font-size:.75rem;font-weight:700;color:var(--rpt-color-primary, #2563eb);text-transform:uppercase;margin-right:8px}.badge-id{font-size:.7rem;color:var(--rpt-color-text-muted, #94a3b8);font-family:monospace}.badge-header-actions{display:flex;align-items:center;gap:4px}.btn-badge-action{background:#fff;border:1px solid var(--rpt-color-border, #cbd5e1);display:inline-flex;align-items:center;justify-content:center;color:var(--rpt-color-text-muted, #64748b);cursor:pointer;width:24px;height:24px;border-radius:4px;padding:0;transition:all .12s ease}.btn-badge-action:hover{background:var(--rpt-color-surface-hover, #f1f5f9);color:var(--rpt-color-primary, #2563eb);border-color:var(--rpt-color-primary, #2563eb)}.btn-badge-action.btn-badge-delete:hover{background:#fee2e2;color:#ef4444;border-color:#fca5a5}.btn-deselect{background:none;border:1px solid transparent;display:inline-flex;align-items:center;justify-content:center;color:var(--rpt-color-text-muted, #64748b);cursor:pointer;width:24px;height:24px;border-radius:4px;padding:0;transition:all .15s ease}.btn-deselect:hover{color:var(--rpt-color-danger, #ef4444);background:#fee2e2;border-color:#fca5a5}.property-accordion{display:flex;flex-direction:column;gap:10px}.accordion-item{border:1px solid var(--rpt-color-border, #e2e8f0);border-radius:6px;background:#fff;overflow:hidden;transition:all .15s ease}.accordion-item.is-expanded{border-color:#cbd5e1;box-shadow:0 1px 3px #0000000a}.accordion-header{width:100%;display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:var(--rpt-color-surface, #f8fafc);border:none;cursor:pointer;text-align:left;-webkit-user-select:none;user-select:none;transition:background .15s ease}.accordion-header:hover{background:#f1f5f9}.accordion-item.is-expanded .accordion-header{background:#f8fafc;border-bottom:1px solid var(--rpt-color-border, #e2e8f0)}.header-left{display:flex;align-items:center;gap:8px;min-width:0;flex:1}.header-title{font-size:.72rem;font-weight:700;color:var(--rpt-color-text, #0f172a);text-transform:uppercase;letter-spacing:.03em;white-space:nowrap}.header-badge{font-size:.65rem;font-weight:600;color:var(--rpt-color-primary, #2563eb);background:#eff6ff;border:1px solid #bfdbfe;padding:1px 6px;border-radius:9999px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}.header-right{display:flex;align-items:center;color:var(--rpt-color-text-muted, #64748b);margin-left:8px}.accordion-chevron{transition:transform .2s ease}.accordion-item.is-expanded .accordion-chevron{transform:rotate(180deg)}.accordion-content{padding:12px;display:flex;flex-direction:column;gap:12px}::ng-deep .accordion-content .group-title{display:none}::ng-deep .accordion-content .comp-badge-header{display:none}.empty-selection{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center;box-sizing:border-box}.empty-icon-wrap{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:#f1f5f9;margin-bottom:16px;box-shadow:0 1px 3px #0000000a}.empty-text{font-size:.8125rem;line-height:1.5;max-width:220px;margin:0;color:var(--rpt-color-text-muted, #64748b)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: RptIconComponent, selector: "rpt-icon", inputs: ["name", "size", "color", "strokeWidth"] }, { kind: "component", type: PropertyEditorGeneralComponent, selector: "rpt-property-editor-general", inputs: ["comp", "propertySchema"], outputs: ["update", "updateProperty", "deselect"] }, { kind: "component", type: PropertyEditorLayoutComponent, selector: "rpt-property-editor-layout", inputs: ["comp", "maxColumns"], outputs: ["updateLayout", "updateHeight", "resetDimensions"] }, { kind: "component", type: PropertyEditorValidationComponent, selector: "rpt-property-editor-validation", inputs: ["comp"], outputs: ["updateValidation"] }, { kind: "component", type: PropertyEditorGridComponent, selector: "rpt-property-editor-grid", inputs: ["grid", "dataSource", "availableEntities", "procedureParameters", "allComponents", "isDetecting", "statusMessage", "statusKind"], outputs: ["addGrid", "removeGrid", "addColumn", "autoDetectColumns", "removeColumn", "updateColumn", "updateOption", "updateRowClickAction", "setDataSource", "updateDataSourceParameters", "entityChanged"] }, { kind: "component", type: PropertyEditorReportComponent, selector: "rpt-property-editor-report", inputs: ["definition"], outputs: ["updateReport", "updateLayout"] }, { kind: "component", type: PropertyEditorDatasourceComponent, selector: "rpt-property-editor-datasource", inputs: ["comp", "allComponents"], outputs: ["updateDataSource", "updateProperty"] }, { kind: "component", type: PropertyEditorActionComponent, selector: "rpt-property-editor-action", inputs: ["comp"], outputs: ["updateProperty"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PropertyEditorComponent, decorators: [{
             type: Component,
@@ -12098,8 +12807,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         PropertyEditorReportComponent,
                         PropertyEditorDatasourceComponent,
                         PropertyEditorActionComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "    <div class=\"editor-container\">\n      <!-- Editor Header & Tabs -->\n      <div class=\"editor-tabs\">\n        <button\n          type=\"button\"\n          class=\"tab-btn\"\n          [class.active]=\"activeTab() === 'properties'\"\n          (click)=\"setTab('properties')\"\n          [disabled]=\"!selectedComponent()\"\n        >\n          <rpt-icon name=\"edit\" [size]=\"13\" />\n          <span>Properties</span>\n        </button>\n        <button\n          type=\"button\"\n          class=\"tab-btn\"\n          [class.active]=\"activeTab() === 'report'\"\n          (click)=\"setTab('report')\"\n        >\n          <rpt-icon name=\"design\" [size]=\"13\" />\n          <span>Layout</span>\n        </button>\n        <button\n          type=\"button\"\n          class=\"tab-btn\"\n          [class.active]=\"activeTab() === 'grid'\"\n          (click)=\"setTab('grid')\"\n        >\n          <rpt-icon name=\"table\" [size]=\"13\" />\n          <span>Grid</span>\n        </button>\n\n        <div style=\"flex: 1;\"></div>\n\n        <button\n          type=\"button\"\n          class=\"tab-btn btn-collapse-inspector\"\n          (click)=\"collapseRequested.emit()\"\n          title=\"Collapse Property Editor\"\n          aria-label=\"Collapse Property Editor\"\n        >\n          <rpt-icon name=\"chevron-right\" [size]=\"13\" />\n        </button>\n      </div>\n\n      <!-- Editor Body -->\n      <div class=\"editor-body\">\n        <!-- 1. COMPONENT PROPERTIES TAB -->\n        @if (activeTab() === 'properties') {\n          @if (selectedComponent(); as comp) {\n            <div class=\"component-sections-wrapper\">\n              <!-- Component Identifier Header (Pinned at Top) -->\n              <div class=\"comp-badge-header\">\n                <div class=\"badge-title\">\n                  <span class=\"badge-type\">{{ comp.type }}</span>\n                  <span class=\"badge-id\">{{ comp.id }}</span>\n                </div>\n                <div class=\"badge-header-actions\">\n                  <button\n                    type=\"button\"\n                    class=\"btn-badge-action\"\n                    (click)=\"duplicateComponent(comp.id)\"\n                    title=\"Duplicate component\"\n                  >\n                    <rpt-icon name=\"copy\" [size]=\"13\" />\n                  </button>\n                  <button\n                    type=\"button\"\n                    class=\"btn-badge-action btn-badge-delete\"\n                    (click)=\"deleteComponent(comp.id)\"\n                    title=\"Delete component\"\n                  >\n                    <rpt-icon name=\"trash\" [size]=\"13\" />\n                  </button>\n                  <button\n                    type=\"button\"\n                    class=\"btn-deselect\"\n                    (click)=\"deselect()\"\n                    title=\"Deselect component\"\n                  >\n                    <rpt-icon name=\"close\" [size]=\"13\" />\n                  </button>\n                </div>\n              </div>\n\n              <!-- Accordion Container -->\n              <div class=\"property-accordion\">\n                <!-- 1. OPTIONS DATA SOURCE ACCORDION (FIRST for Dropdown) -->\n                @if (comp.type === 'dropdown') {\n                  <div class=\"accordion-item\" [class.is-expanded]=\"isSectionExpanded('datasource')\">\n                    <button\n                      type=\"button\"\n                      class=\"accordion-header\"\n                      (click)=\"toggleSection('datasource')\"\n                      title=\"Toggle Options Data Source section\"\n                    >\n                      <div class=\"header-left\">\n                        <rpt-icon name=\"database\" [size]=\"14\" />\n                        <span class=\"header-title\">Options Data Source</span>\n                        <span class=\"header-badge\">{{ getDatasourceBadge(comp) }}</span>\n                      </div>\n                      <div class=\"header-right\">\n                        <rpt-icon name=\"chevron-down\" [size]=\"13\" class=\"accordion-chevron\" />\n                      </div>\n                    </button>\n                    @if (isSectionExpanded('datasource')) {\n                      <div class=\"accordion-content\">\n                        <rpt-property-editor-datasource\n                          [comp]=\"comp\"\n                          [allComponents]=\"allComponents()\"\n                          (updateDataSource)=\"updateCompDataSource(comp.id, $event)\"\n                          (updateProperty)=\"updateProp(comp.id, $event.key, $event.value)\"\n                        />\n                      </div>\n                    }\n                  </div>\n                }\n\n                <!-- BUTTON ACTION ACCORDION (FIRST for Button) -->\n                @if (comp.type === 'button') {\n                  <div class=\"accordion-item\" [class.is-expanded]=\"isSectionExpanded('action')\">\n                    <button\n                      type=\"button\"\n                      class=\"accordion-header\"\n                      (click)=\"toggleSection('action')\"\n                      title=\"Toggle Button Action section\"\n                    >\n                      <div class=\"header-left\">\n                        <rpt-icon name=\"lightning\" [size]=\"14\" />\n                        <span class=\"header-title\">Button Action</span>\n                        <span class=\"header-badge\">{{ getActionBadge(comp) }}</span>\n                      </div>\n                      <div class=\"header-right\">\n                        <rpt-icon name=\"chevron-down\" [size]=\"13\" class=\"accordion-chevron\" />\n                      </div>\n                    </button>\n                    @if (isSectionExpanded('action')) {\n                      <div class=\"accordion-content\">\n                        <rpt-property-editor-action\n                          [comp]=\"comp\"\n                          (updateProperty)=\"updateProp(comp.id, $event.key, $event.value)\"\n                        />\n                      </div>\n                    }\n                  </div>\n                }\n\n                <!-- 2. GENERAL PROPERTIES ACCORDION -->\n                <div class=\"accordion-item\" [class.is-expanded]=\"isSectionExpanded('general')\">\n                  <button\n                    type=\"button\"\n                    class=\"accordion-header\"\n                    (click)=\"toggleSection('general')\"\n                    title=\"Toggle General Properties section\"\n                  >\n                    <div class=\"header-left\">\n                      <rpt-icon name=\"edit\" [size]=\"14\" />\n                      <span class=\"header-title\">General Properties</span>\n                      @if (comp.label) {\n                        <span class=\"header-badge\">{{ comp.label }}</span>\n                      }\n                    </div>\n                    <div class=\"header-right\">\n                      <rpt-icon name=\"chevron-down\" [size]=\"13\" class=\"accordion-chevron\" />\n                    </div>\n                  </button>\n                  @if (isSectionExpanded('general')) {\n                    <div class=\"accordion-content\">\n                      <rpt-property-editor-general\n                        [comp]=\"comp\"\n                        [propertySchema]=\"propertySchema()\"\n                        (update)=\"updateComp($event.field, $event.value)\"\n                        (updateProperty)=\"updateProp(comp.id, $event.key, $event.value)\"\n                        (deselect)=\"deselect()\"\n                      />\n                    </div>\n                  }\n                </div>\n\n                <!-- 3. LAYOUT & GRID ACCORDION -->\n                <div class=\"accordion-item\" [class.is-expanded]=\"isSectionExpanded('layout')\">\n                  <button\n                    type=\"button\"\n                    class=\"accordion-header\"\n                    (click)=\"toggleSection('layout')\"\n                    title=\"Toggle Layout & Dimensions section\"\n                  >\n                    <div class=\"header-left\">\n                      <rpt-icon name=\"design\" [size]=\"14\" />\n                      <span class=\"header-title\">Layout & Grid</span>\n                      <span class=\"header-badge\">{{ getLayoutBadge(comp) }}</span>\n                    </div>\n                    <div class=\"header-right\">\n                      <rpt-icon name=\"chevron-down\" [size]=\"13\" class=\"accordion-chevron\" />\n                    </div>\n                  </button>\n                  @if (isSectionExpanded('layout')) {\n                    <div class=\"accordion-content\">\n                      <rpt-property-editor-layout\n                        [comp]=\"comp\"\n                        [maxColumns]=\"maxColumns()\"\n                        (updateLayout)=\"updateLayout($event.key, $event.value)\"\n                        (updateHeight)=\"updateComponentHeight($event)\"\n                        (resetDimensions)=\"resetComponentDimensions(comp.id, comp.type)\"\n                      />\n                    </div>\n                  }\n                </div>\n\n                <!-- 4. VALIDATION ACCORDION -->\n                <div class=\"accordion-item\" [class.is-expanded]=\"isSectionExpanded('validation')\">\n                  <button\n                    type=\"button\"\n                    class=\"accordion-header\"\n                    (click)=\"toggleSection('validation')\"\n                    title=\"Toggle Validation Rules section\"\n                  >\n                    <div class=\"header-left\">\n                      <rpt-icon name=\"check\" [size]=\"14\" />\n                      <span class=\"header-title\">Validation Rules</span>\n                      <span class=\"header-badge\">{{ getValidationBadge(comp) }}</span>\n                    </div>\n                    <div class=\"header-right\">\n                      <rpt-icon name=\"chevron-down\" [size]=\"13\" class=\"accordion-chevron\" />\n                    </div>\n                  </button>\n                  @if (isSectionExpanded('validation')) {\n                    <div class=\"accordion-content\">\n                      <rpt-property-editor-validation\n                        [comp]=\"comp\"\n                        (updateValidation)=\"updateValidation($event.key, $event.value)\"\n                      />\n                    </div>\n                  }\n                </div>\n              </div>\n            </div>\n          } @else {\n            <div class=\"empty-selection\">\n              <div class=\"empty-icon-wrap\">\n                <rpt-icon name=\"cursor\" [size]=\"24\" color=\"#64748b\" />\n              </div>\n              <p class=\"empty-text\">Select a component on the canvas to configure its properties.</p>\n            </div>\n          }\n        }\n\n        <!-- 2. REPORT SETTINGS TAB -->\n        @if (activeTab() === 'report') {\n          <rpt-property-editor-report\n            [definition]=\"definition()\"\n            (updateReport)=\"updateReport($event.field, $event.value)\"\n            (updateLayout)=\"updateLayoutProp($event.field, $event.value)\"\n          />\n        }\n\n        <!-- 3. RESULT GRID SETTINGS TAB -->\n        @if (activeTab() === 'grid') {\n          <rpt-property-editor-grid\n            [grid]=\"definition().grid\"\n            (addGrid)=\"addResultGrid()\"\n            (removeGrid)=\"removeResultGrid()\"\n            (addColumn)=\"addColumn()\"\n            (autoDetectColumns)=\"autoDetectGridColumns()\"\n            (removeColumn)=\"removeColumn($event)\"\n            (updateColumn)=\"updateColumn($event.index, $event.field, $event.value)\"\n            (updateOption)=\"updateGridOption($event.field, $event.value)\"\n            (updateRowClickAction)=\"updateGridRowClickAction($event)\"\n          />\n        }\n      </div>\n    </div>", styles: [":host{display:block;height:100%;background:#fff;border-left:1px solid var(--rpt-color-border, #cbd5e1);box-sizing:border-box;font-family:var(--rpt-font-family, inherit)}.editor-container{display:flex;flex-direction:column;height:100%}.editor-tabs{display:flex;flex-shrink:0;border-bottom:1px solid var(--rpt-color-border, #cbd5e1);background:var(--rpt-color-surface, #f8fafc)}.tab-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:12px 8px;font-size:var(--rpt-font-size-sm, .75rem);font-weight:600;color:var(--rpt-color-text-muted, #64748b);background:transparent;border:none;border-bottom:2px solid transparent;cursor:pointer;transition:all var(--rpt-transition-speed, .15s) ease}.tab-btn:hover:not(:disabled){color:var(--rpt-color-text, #0f172a)}.tab-btn.active{color:var(--rpt-color-primary, #2563eb);border-bottom-color:var(--rpt-color-primary, #2563eb);background:#fff}.tab-btn:disabled{opacity:.4;cursor:not-allowed}.editor-body{flex:1;overflow-y:auto;padding:12px 14px}.component-sections-wrapper{display:flex;flex-direction:column;gap:12px}.comp-badge-header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:var(--rpt-color-surface, #f8fafc);border-radius:6px;border:1px solid var(--rpt-color-border, #e2e8f0)}.badge-title{display:flex;align-items:center}.badge-type{font-size:.75rem;font-weight:700;color:var(--rpt-color-primary, #2563eb);text-transform:uppercase;margin-right:8px}.badge-id{font-size:.7rem;color:var(--rpt-color-text-muted, #94a3b8);font-family:monospace}.badge-header-actions{display:flex;align-items:center;gap:4px}.btn-badge-action{background:#fff;border:1px solid var(--rpt-color-border, #cbd5e1);display:inline-flex;align-items:center;justify-content:center;color:var(--rpt-color-text-muted, #64748b);cursor:pointer;width:24px;height:24px;border-radius:4px;padding:0;transition:all .12s ease}.btn-badge-action:hover{background:var(--rpt-color-surface-hover, #f1f5f9);color:var(--rpt-color-primary, #2563eb);border-color:var(--rpt-color-primary, #2563eb)}.btn-badge-action.btn-badge-delete:hover{background:#fee2e2;color:#ef4444;border-color:#fca5a5}.btn-deselect{background:none;border:1px solid transparent;display:inline-flex;align-items:center;justify-content:center;color:var(--rpt-color-text-muted, #64748b);cursor:pointer;width:24px;height:24px;border-radius:4px;padding:0;transition:all .15s ease}.btn-deselect:hover{color:var(--rpt-color-danger, #ef4444);background:#fee2e2;border-color:#fca5a5}.property-accordion{display:flex;flex-direction:column;gap:10px}.accordion-item{border:1px solid var(--rpt-color-border, #e2e8f0);border-radius:6px;background:#fff;overflow:hidden;transition:all .15s ease}.accordion-item.is-expanded{border-color:#cbd5e1;box-shadow:0 1px 3px #0000000a}.accordion-header{width:100%;display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:var(--rpt-color-surface, #f8fafc);border:none;cursor:pointer;text-align:left;-webkit-user-select:none;user-select:none;transition:background .15s ease}.accordion-header:hover{background:#f1f5f9}.accordion-item.is-expanded .accordion-header{background:#f8fafc;border-bottom:1px solid var(--rpt-color-border, #e2e8f0)}.header-left{display:flex;align-items:center;gap:8px;min-width:0;flex:1}.header-title{font-size:.72rem;font-weight:700;color:var(--rpt-color-text, #0f172a);text-transform:uppercase;letter-spacing:.03em;white-space:nowrap}.header-badge{font-size:.65rem;font-weight:600;color:var(--rpt-color-primary, #2563eb);background:#eff6ff;border:1px solid #bfdbfe;padding:1px 6px;border-radius:9999px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}.header-right{display:flex;align-items:center;color:var(--rpt-color-text-muted, #64748b);margin-left:8px}.accordion-chevron{transition:transform .2s ease}.accordion-item.is-expanded .accordion-chevron{transform:rotate(180deg)}.accordion-content{padding:12px;display:flex;flex-direction:column;gap:12px}::ng-deep .accordion-content .group-title{display:none}::ng-deep .accordion-content .comp-badge-header{display:none}.empty-selection{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center;box-sizing:border-box}.empty-icon-wrap{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:#f1f5f9;margin-bottom:16px;box-shadow:0 1px 3px #0000000a}.empty-text{font-size:.8125rem;line-height:1.5;max-width:220px;margin:0;color:var(--rpt-color-text-muted, #64748b)}\n"] }]
-        }] });
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "    <div class=\"editor-container\">\n      <!-- Editor Header & Tabs -->\n      <div class=\"editor-tabs\">\n        <button\n          type=\"button\"\n          class=\"tab-btn\"\n          [class.active]=\"activeTab() === 'properties'\"\n          (click)=\"setTab('properties')\"\n          [disabled]=\"!selectedComponent()\"\n        >\n          <rpt-icon name=\"edit\" [size]=\"13\" />\n          <span>Properties</span>\n        </button>\n        <button\n          type=\"button\"\n          class=\"tab-btn\"\n          [class.active]=\"activeTab() === 'report'\"\n          (click)=\"setTab('report')\"\n        >\n          <rpt-icon name=\"design\" [size]=\"13\" />\n          <span>Layout</span>\n        </button>\n        <button\n          type=\"button\"\n          class=\"tab-btn\"\n          [class.active]=\"activeTab() === 'grid'\"\n          (click)=\"setTab('grid')\"\n        >\n          <rpt-icon name=\"table\" [size]=\"13\" />\n          <span>Grid</span>\n        </button>\n\n        <div style=\"flex: 1;\"></div>\n\n        <button\n          type=\"button\"\n          class=\"tab-btn btn-collapse-inspector\"\n          (click)=\"collapseRequested.emit()\"\n          title=\"Collapse Property Editor\"\n          aria-label=\"Collapse Property Editor\"\n        >\n          <rpt-icon name=\"chevron-right\" [size]=\"13\" />\n        </button>\n      </div>\n\n      <!-- Editor Body -->\n      <div class=\"editor-body\">\n        <!-- 1. COMPONENT PROPERTIES TAB -->\n        @if (activeTab() === 'properties') {\n          @if (selectedComponent(); as comp) {\n            <div class=\"component-sections-wrapper\">\n              <!-- Component Identifier Header (Pinned at Top) -->\n              <div class=\"comp-badge-header\">\n                <div class=\"badge-title\">\n                  <span class=\"badge-type\">{{ comp.type }}</span>\n                  <span class=\"badge-id\">{{ comp.id }}</span>\n                </div>\n                <div class=\"badge-header-actions\">\n                  <button\n                    type=\"button\"\n                    class=\"btn-badge-action\"\n                    (click)=\"duplicateComponent(comp.id)\"\n                    title=\"Duplicate component\"\n                  >\n                    <rpt-icon name=\"copy\" [size]=\"13\" />\n                  </button>\n                  <button\n                    type=\"button\"\n                    class=\"btn-badge-action btn-badge-delete\"\n                    (click)=\"deleteComponent(comp.id)\"\n                    title=\"Delete component\"\n                  >\n                    <rpt-icon name=\"trash\" [size]=\"13\" />\n                  </button>\n                  <button\n                    type=\"button\"\n                    class=\"btn-deselect\"\n                    (click)=\"deselect()\"\n                    title=\"Deselect component\"\n                  >\n                    <rpt-icon name=\"close\" [size]=\"13\" />\n                  </button>\n                </div>\n              </div>\n\n              <!-- Accordion Container -->\n              <div class=\"property-accordion\">\n                <!-- 1. OPTIONS DATA SOURCE ACCORDION (FIRST for Dropdown) -->\n                @if (comp.type === 'dropdown') {\n                  <div class=\"accordion-item\" [class.is-expanded]=\"isSectionExpanded('datasource')\">\n                    <button\n                      type=\"button\"\n                      class=\"accordion-header\"\n                      (click)=\"toggleSection('datasource')\"\n                      title=\"Toggle Options Data Source section\"\n                    >\n                      <div class=\"header-left\">\n                        <rpt-icon name=\"database\" [size]=\"14\" />\n                        <span class=\"header-title\">Options Data Source</span>\n                        <span class=\"header-badge\">{{ getDatasourceBadge(comp) }}</span>\n                      </div>\n                      <div class=\"header-right\">\n                        <rpt-icon name=\"chevron-down\" [size]=\"13\" class=\"accordion-chevron\" />\n                      </div>\n                    </button>\n                    @if (isSectionExpanded('datasource')) {\n                      <div class=\"accordion-content\">\n                        <rpt-property-editor-datasource\n                          [comp]=\"comp\"\n                          [allComponents]=\"allComponents()\"\n                          (updateDataSource)=\"updateCompDataSource(comp.id, $event)\"\n                          (updateProperty)=\"updateProp(comp.id, $event.key, $event.value)\"\n                        />\n                      </div>\n                    }\n                  </div>\n                }\n\n                <!-- BUTTON ACTION ACCORDION (FIRST for Button) -->\n                @if (comp.type === 'button') {\n                  <div class=\"accordion-item\" [class.is-expanded]=\"isSectionExpanded('action')\">\n                    <button\n                      type=\"button\"\n                      class=\"accordion-header\"\n                      (click)=\"toggleSection('action')\"\n                      title=\"Toggle Button Action section\"\n                    >\n                      <div class=\"header-left\">\n                        <rpt-icon name=\"lightning\" [size]=\"14\" />\n                        <span class=\"header-title\">Button Action</span>\n                        <span class=\"header-badge\">{{ getActionBadge(comp) }}</span>\n                      </div>\n                      <div class=\"header-right\">\n                        <rpt-icon name=\"chevron-down\" [size]=\"13\" class=\"accordion-chevron\" />\n                      </div>\n                    </button>\n                    @if (isSectionExpanded('action')) {\n                      <div class=\"accordion-content\">\n                        <rpt-property-editor-action\n                          [comp]=\"comp\"\n                          (updateProperty)=\"updateProp(comp.id, $event.key, $event.value)\"\n                        />\n                      </div>\n                    }\n                  </div>\n                }\n\n                <!-- 2. GENERAL PROPERTIES ACCORDION -->\n                <div class=\"accordion-item\" [class.is-expanded]=\"isSectionExpanded('general')\">\n                  <button\n                    type=\"button\"\n                    class=\"accordion-header\"\n                    (click)=\"toggleSection('general')\"\n                    title=\"Toggle General Properties section\"\n                  >\n                    <div class=\"header-left\">\n                      <rpt-icon name=\"edit\" [size]=\"14\" />\n                      <span class=\"header-title\">General Properties</span>\n                      @if (comp.label) {\n                        <span class=\"header-badge\">{{ comp.label }}</span>\n                      }\n                    </div>\n                    <div class=\"header-right\">\n                      <rpt-icon name=\"chevron-down\" [size]=\"13\" class=\"accordion-chevron\" />\n                    </div>\n                  </button>\n                  @if (isSectionExpanded('general')) {\n                    <div class=\"accordion-content\">\n                      <rpt-property-editor-general\n                        [comp]=\"comp\"\n                        [propertySchema]=\"propertySchema()\"\n                        (update)=\"updateComp($event.field, $event.value)\"\n                        (updateProperty)=\"updateProp(comp.id, $event.key, $event.value)\"\n                        (deselect)=\"deselect()\"\n                      />\n                    </div>\n                  }\n                </div>\n\n                <!-- 3. LAYOUT & GRID ACCORDION -->\n                <div class=\"accordion-item\" [class.is-expanded]=\"isSectionExpanded('layout')\">\n                  <button\n                    type=\"button\"\n                    class=\"accordion-header\"\n                    (click)=\"toggleSection('layout')\"\n                    title=\"Toggle Layout & Dimensions section\"\n                  >\n                    <div class=\"header-left\">\n                      <rpt-icon name=\"design\" [size]=\"14\" />\n                      <span class=\"header-title\">Layout & Grid</span>\n                      <span class=\"header-badge\">{{ getLayoutBadge(comp) }}</span>\n                    </div>\n                    <div class=\"header-right\">\n                      <rpt-icon name=\"chevron-down\" [size]=\"13\" class=\"accordion-chevron\" />\n                    </div>\n                  </button>\n                  @if (isSectionExpanded('layout')) {\n                    <div class=\"accordion-content\">\n                      <rpt-property-editor-layout\n                        [comp]=\"comp\"\n                        [maxColumns]=\"maxColumns()\"\n                        (updateLayout)=\"updateLayout($event.key, $event.value)\"\n                        (updateHeight)=\"updateComponentHeight($event)\"\n                        (resetDimensions)=\"resetComponentDimensions(comp.id, comp.type)\"\n                      />\n                    </div>\n                  }\n                </div>\n\n                <!-- 4. VALIDATION ACCORDION -->\n                <div class=\"accordion-item\" [class.is-expanded]=\"isSectionExpanded('validation')\">\n                  <button\n                    type=\"button\"\n                    class=\"accordion-header\"\n                    (click)=\"toggleSection('validation')\"\n                    title=\"Toggle Validation Rules section\"\n                  >\n                    <div class=\"header-left\">\n                      <rpt-icon name=\"check\" [size]=\"14\" />\n                      <span class=\"header-title\">Validation Rules</span>\n                      <span class=\"header-badge\">{{ getValidationBadge(comp) }}</span>\n                    </div>\n                    <div class=\"header-right\">\n                      <rpt-icon name=\"chevron-down\" [size]=\"13\" class=\"accordion-chevron\" />\n                    </div>\n                  </button>\n                  @if (isSectionExpanded('validation')) {\n                    <div class=\"accordion-content\">\n                      <rpt-property-editor-validation\n                        [comp]=\"comp\"\n                        (updateValidation)=\"updateValidation($event.key, $event.value)\"\n                      />\n                    </div>\n                  }\n                </div>\n              </div>\n            </div>\n          } @else {\n            <div class=\"empty-selection\">\n              <div class=\"empty-icon-wrap\">\n                <rpt-icon name=\"cursor\" [size]=\"24\" color=\"#64748b\" />\n              </div>\n              <p class=\"empty-text\">Select a component on the canvas to configure its properties.</p>\n            </div>\n          }\n        }\n\n        <!-- 2. REPORT SETTINGS TAB -->\n        @if (activeTab() === 'report') {\n          <rpt-property-editor-report\n            [definition]=\"definition()\"\n            (updateReport)=\"updateReport($event.field, $event.value)\"\n            (updateLayout)=\"updateLayoutProp($event.field, $event.value)\"\n          />\n        }\n\n        <!-- 3. RESULT GRID SETTINGS TAB -->\n        @if (activeTab() === 'grid') {\n          <rpt-property-editor-grid\n            [grid]=\"definition().grid\"\n            [dataSource]=\"gridDataSource()\"\n            [availableEntities]=\"availableEntities()\"\n            [procedureParameters]=\"gridProcedureParameters()\"\n            [allComponents]=\"allComponents()\"\n            [isDetecting]=\"isDetectingColumns()\"\n            [statusMessage]=\"gridDetectionStatus()?.message ?? null\"\n            [statusKind]=\"gridDetectionStatus()?.kind ?? null\"\n            (entityChanged)=\"onGridEntityChanged($event)\"\n            (updateDataSourceParameters)=\"onGridDataSourceParametersChanged($event)\"\n            (addGrid)=\"addResultGrid()\"\n            (removeGrid)=\"removeResultGrid()\"\n            (addColumn)=\"addColumn()\"\n            (autoDetectColumns)=\"autoDetectGridColumns()\"\n            (removeColumn)=\"removeColumn($event)\"\n            (updateColumn)=\"updateColumn($event.index, $event.field, $event.value)\"\n            (updateOption)=\"updateGridOption($event.field, $event.value)\"\n            (updateRowClickAction)=\"updateGridRowClickAction($event)\"\n          />\n        }\n      </div>\n    </div>", styles: [":host{display:block;height:100%;background:#fff;border-left:1px solid var(--rpt-color-border, #cbd5e1);box-sizing:border-box;font-family:var(--rpt-font-family, inherit)}.editor-container{display:flex;flex-direction:column;height:100%}.editor-tabs{display:flex;flex-shrink:0;border-bottom:1px solid var(--rpt-color-border, #cbd5e1);background:var(--rpt-color-surface, #f8fafc)}.tab-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:12px 8px;font-size:var(--rpt-font-size-sm, .75rem);font-weight:600;color:var(--rpt-color-text-muted, #64748b);background:transparent;border:none;border-bottom:2px solid transparent;cursor:pointer;transition:all var(--rpt-transition-speed, .15s) ease}.tab-btn:hover:not(:disabled){color:var(--rpt-color-text, #0f172a)}.tab-btn.active{color:var(--rpt-color-primary, #2563eb);border-bottom-color:var(--rpt-color-primary, #2563eb);background:#fff}.tab-btn:disabled{opacity:.4;cursor:not-allowed}.editor-body{flex:1;overflow-y:auto;padding:12px 14px}.component-sections-wrapper{display:flex;flex-direction:column;gap:12px}.comp-badge-header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:var(--rpt-color-surface, #f8fafc);border-radius:6px;border:1px solid var(--rpt-color-border, #e2e8f0)}.badge-title{display:flex;align-items:center}.badge-type{font-size:.75rem;font-weight:700;color:var(--rpt-color-primary, #2563eb);text-transform:uppercase;margin-right:8px}.badge-id{font-size:.7rem;color:var(--rpt-color-text-muted, #94a3b8);font-family:monospace}.badge-header-actions{display:flex;align-items:center;gap:4px}.btn-badge-action{background:#fff;border:1px solid var(--rpt-color-border, #cbd5e1);display:inline-flex;align-items:center;justify-content:center;color:var(--rpt-color-text-muted, #64748b);cursor:pointer;width:24px;height:24px;border-radius:4px;padding:0;transition:all .12s ease}.btn-badge-action:hover{background:var(--rpt-color-surface-hover, #f1f5f9);color:var(--rpt-color-primary, #2563eb);border-color:var(--rpt-color-primary, #2563eb)}.btn-badge-action.btn-badge-delete:hover{background:#fee2e2;color:#ef4444;border-color:#fca5a5}.btn-deselect{background:none;border:1px solid transparent;display:inline-flex;align-items:center;justify-content:center;color:var(--rpt-color-text-muted, #64748b);cursor:pointer;width:24px;height:24px;border-radius:4px;padding:0;transition:all .15s ease}.btn-deselect:hover{color:var(--rpt-color-danger, #ef4444);background:#fee2e2;border-color:#fca5a5}.property-accordion{display:flex;flex-direction:column;gap:10px}.accordion-item{border:1px solid var(--rpt-color-border, #e2e8f0);border-radius:6px;background:#fff;overflow:hidden;transition:all .15s ease}.accordion-item.is-expanded{border-color:#cbd5e1;box-shadow:0 1px 3px #0000000a}.accordion-header{width:100%;display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:var(--rpt-color-surface, #f8fafc);border:none;cursor:pointer;text-align:left;-webkit-user-select:none;user-select:none;transition:background .15s ease}.accordion-header:hover{background:#f1f5f9}.accordion-item.is-expanded .accordion-header{background:#f8fafc;border-bottom:1px solid var(--rpt-color-border, #e2e8f0)}.header-left{display:flex;align-items:center;gap:8px;min-width:0;flex:1}.header-title{font-size:.72rem;font-weight:700;color:var(--rpt-color-text, #0f172a);text-transform:uppercase;letter-spacing:.03em;white-space:nowrap}.header-badge{font-size:.65rem;font-weight:600;color:var(--rpt-color-primary, #2563eb);background:#eff6ff;border:1px solid #bfdbfe;padding:1px 6px;border-radius:9999px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}.header-right{display:flex;align-items:center;color:var(--rpt-color-text-muted, #64748b);margin-left:8px}.accordion-chevron{transition:transform .2s ease}.accordion-item.is-expanded .accordion-chevron{transform:rotate(180deg)}.accordion-content{padding:12px;display:flex;flex-direction:column;gap:12px}::ng-deep .accordion-content .group-title{display:none}::ng-deep .accordion-content .comp-badge-header{display:none}.empty-selection{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center;box-sizing:border-box}.empty-icon-wrap{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:#f1f5f9;margin-bottom:16px;box-shadow:0 1px 3px #0000000a}.empty-text{font-size:.8125rem;line-height:1.5;max-width:220px;margin:0;color:var(--rpt-color-text-muted, #64748b)}\n"] }]
+        }], ctorParameters: () => [] });
 
 class DesignerComponent {
     designerState = inject(DesignerStateService);
@@ -12439,7 +13148,7 @@ class DesignerComponent {
         </div>
       }
     </div>
-  `, isInline: true, styles: [":host{display:block;width:100%;height:100%;min-height:400px;font-family:var(--rpt-font-family, inherit);box-sizing:border-box}.designer-shell{display:flex;flex-direction:column;height:100%;background-color:#f8fafc;position:relative;overflow:hidden}.designer-workbench{display:flex;flex:1;overflow:hidden;position:relative;min-height:0}.workbench-left-container{display:flex;position:relative;width:250px;flex-shrink:0;height:100%;transition:width var(--rpt-transition-speed-smooth, .25s) cubic-bezier(.16,1,.3,1);z-index:20}.workbench-left-container.is-collapsed{width:0!important}.workbench-left-panel{width:100%;height:100%;overflow:hidden;border-right:1px solid var(--rpt-color-border, #cbd5e1);background:#fff;box-sizing:border-box}.workbench-left-container.is-collapsed .workbench-left-panel{visibility:hidden;border-right:none}.workbench-center-panel{flex:1;height:100%;overflow:hidden;display:flex;flex-direction:column;min-width:0;position:relative}.workbench-right-container{display:flex;position:relative;width:320px;flex-shrink:0;height:100%;transition:width var(--rpt-transition-speed-smooth, .25s) cubic-bezier(.16,1,.3,1);z-index:20}.workbench-right-container.is-collapsed{width:0!important}.workbench-right-panel{width:100%;height:100%;overflow:hidden;border-left:1px solid var(--rpt-color-border, #cbd5e1);background:#fff;box-sizing:border-box}.workbench-right-container.is-collapsed .workbench-right-panel{visibility:hidden;border-left:none}.compact-workbench-bar,.workbench-drawer-backdrop{display:none}@media (max-width: 900px){.compact-workbench-bar{display:flex;align-items:center;justify-content:space-around;height:48px;background:var(--rpt-color-surface, #ffffff);border-top:1px solid var(--rpt-color-border, #cbd5e1);padding:0 12px;gap:8px;z-index:45;flex-shrink:0;box-shadow:0 -2px 8px #0000000a;font-family:var(--rpt-font-family, inherit)}.compact-nav-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:6px 14px;border-radius:var(--rpt-border-radius, 6px);border:1px solid transparent;background:transparent;font-family:var(--rpt-font-family, inherit);font-size:var(--rpt-font-size-sm, .75rem);font-weight:var(--rpt-font-weight-medium, 500);letter-spacing:-.01em;line-height:1.4;color:var(--rpt-color-text-secondary, #334155);cursor:pointer;-webkit-user-select:none;user-select:none;transition:all var(--rpt-transition-speed, .15s) ease;white-space:nowrap}.compact-nav-btn rpt-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--rpt-color-text-muted, #64748b);transition:color var(--rpt-transition-speed, .15s) ease}.compact-nav-btn:hover{background:var(--rpt-color-surface-hover, #f1f5f9);color:var(--rpt-color-text, #0f172a);border-color:var(--rpt-color-border-subtle, #e2e8f0)}.compact-nav-btn:hover rpt-icon{color:var(--rpt-color-text, #0f172a)}.compact-nav-btn.active{background:var(--rpt-color-primary-light, #eff6ff);color:var(--rpt-color-primary, #2563eb);border-color:#2563eb40;font-weight:var(--rpt-font-weight-semibold, 600);box-shadow:0 1px 2px #2563eb14}.compact-nav-btn.active rpt-icon{color:var(--rpt-color-primary, #2563eb)}.compact-nav-btn:focus-visible{outline:2px solid var(--rpt-color-primary, #2563eb);outline-offset:1px}.workbench-drawer-backdrop{display:block;position:absolute;inset:0;background:#0f172a59;backdrop-filter:blur(1px);z-index:50}.workbench-left-container{position:absolute;left:0;top:0;bottom:0;width:280px;max-width:85vw;z-index:60;box-shadow:4px 0 24px #00000026;transform:translate(0);transition:transform .25s cubic-bezier(.16,1,.3,1)}.workbench-left-container.is-collapsed{transform:translate(-100%);width:280px!important}.workbench-right-container{position:absolute;right:0;top:0;bottom:0;width:320px;max-width:90vw;z-index:60;box-shadow:-4px 0 24px #00000026;transform:translate(0);transition:transform .25s cubic-bezier(.16,1,.3,1)}.workbench-right-container.is-collapsed{transform:translate(100%);width:320px!important}}.preview-mode-container{flex:1;overflow-y:auto;padding:16px;background-color:#f1f5f9;box-sizing:border-box}.preview-banner{max-width:1400px;margin:0 auto 16px;background:#eff6ff;color:#1e40af;border:1px solid #bfdbfe;padding:10px 18px;border-radius:var(--rpt-border-radius-lg, 8px);font-size:var(--rpt-font-size-sm, .8rem);font-weight:600;display:flex;align-items:center;gap:8px;box-shadow:var(--rpt-box-shadow-xs, 0 1px 2px rgba(0, 0, 0, .04));box-sizing:border-box}.preview-content{max-width:1400px;margin:0 auto;background:#fff;border-radius:var(--rpt-border-radius-lg, 8px);border:1px solid var(--rpt-color-border, #cbd5e1);box-shadow:0 4px 6px -1px #0000000d;padding:0;min-height:480px;box-sizing:border-box}.json-mode-container{flex:1;overflow-y:auto;padding:24px;background-color:#0f172a;display:flex;flex-direction:column}.json-banner{display:flex;align-items:center;justify-content:space-between;color:#94a3b8;font-size:.8rem;font-weight:600;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid #1e293b}.btn-copy-json{background:#ffffff1a;color:#fff;border:1px solid rgba(255,255,255,.2);border-radius:4px;padding:4px 12px;font-size:.75rem;cursor:pointer;transition:all .15s ease}.btn-copy-json:hover{background:#fff3}.json-display{flex:1;margin:0;padding:20px;background:#090d16;border-radius:8px;border:1px solid #1e293b;color:#38bdf8;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.85rem;line-height:1.5;overflow-x:auto}.save-toast{position:absolute;bottom:24px;right:24px;background:#10b981;color:#fff;padding:10px 20px;border-radius:6px;font-size:.85rem;font-weight:600;box-shadow:0 10px 15px -3px #0000001a;z-index:100;animation:rpt-fade-in .2s ease}@keyframes rpt-fade-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1$2.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "component", type: DesignerToolbarComponent, selector: "rpt-designer-toolbar", inputs: ["isLeftPanelCollapsed", "isRightPanelCollapsed"], outputs: ["toggleLeftPanel", "toggleRightPanel", "saveRequested"] }, { kind: "component", type: ComponentPaletteComponent, selector: "rpt-component-palette", outputs: ["collapseRequested"] }, { kind: "component", type: DesignCanvasComponent, selector: "rpt-design-canvas" }, { kind: "component", type: PropertyEditorComponent, selector: "rpt-property-editor", outputs: ["collapseRequested"] }, { kind: "component", type: DynamicRendererComponent, selector: "rpt-dynamic-renderer", inputs: ["definition", "initialValues", "resultData"], outputs: ["executeRequested", "resetRequested", "exportRequested", "printRequested", "customActionTriggered", "gridStateChanged", "columnDefsChanged", "selectionChange", "selectionChanged", "rowActionTriggered"] }, { kind: "component", type: RptIconComponent, selector: "rpt-icon", inputs: ["name", "size", "color", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block;width:100%;height:100%;min-height:400px;font-family:var(--rpt-font-family, inherit);box-sizing:border-box}.designer-shell{display:flex;flex-direction:column;height:100%;background-color:#f8fafc;position:relative;overflow:hidden}.designer-workbench{display:flex;flex:1;overflow:hidden;position:relative;min-height:0}.workbench-left-container{display:flex;position:relative;width:250px;flex-shrink:0;height:100%;transition:width var(--rpt-transition-speed-smooth, .25s) cubic-bezier(.16,1,.3,1);z-index:20}.workbench-left-container.is-collapsed{width:0!important}.workbench-left-panel{width:100%;height:100%;overflow:hidden;border-right:1px solid var(--rpt-color-border, #cbd5e1);background:#fff;box-sizing:border-box}.workbench-left-container.is-collapsed .workbench-left-panel{visibility:hidden;border-right:none}.workbench-center-panel{flex:1;height:100%;overflow:hidden;display:flex;flex-direction:column;min-width:0;position:relative}.workbench-right-container{display:flex;position:relative;width:420px;flex-shrink:0;height:100%;transition:width var(--rpt-transition-speed-smooth, .25s) cubic-bezier(.16,1,.3,1);z-index:20}.workbench-right-container.is-collapsed{width:0!important}.workbench-right-panel{width:100%;height:100%;overflow:hidden;border-left:1px solid var(--rpt-color-border, #cbd5e1);background:#fff;box-sizing:border-box}.workbench-right-container.is-collapsed .workbench-right-panel{visibility:hidden;border-left:none}.compact-workbench-bar,.workbench-drawer-backdrop{display:none}@media (max-width: 900px){.compact-workbench-bar{display:flex;align-items:center;justify-content:space-around;height:48px;background:var(--rpt-color-surface, #ffffff);border-top:1px solid var(--rpt-color-border, #cbd5e1);padding:0 12px;gap:8px;z-index:45;flex-shrink:0;box-shadow:0 -2px 8px #0000000a;font-family:var(--rpt-font-family, inherit)}.compact-nav-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:6px 14px;border-radius:var(--rpt-border-radius, 6px);border:1px solid transparent;background:transparent;font-family:var(--rpt-font-family, inherit);font-size:var(--rpt-font-size-sm, .75rem);font-weight:var(--rpt-font-weight-medium, 500);letter-spacing:-.01em;line-height:1.4;color:var(--rpt-color-text-secondary, #334155);cursor:pointer;-webkit-user-select:none;user-select:none;transition:all var(--rpt-transition-speed, .15s) ease;white-space:nowrap}.compact-nav-btn rpt-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--rpt-color-text-muted, #64748b);transition:color var(--rpt-transition-speed, .15s) ease}.compact-nav-btn:hover{background:var(--rpt-color-surface-hover, #f1f5f9);color:var(--rpt-color-text, #0f172a);border-color:var(--rpt-color-border-subtle, #e2e8f0)}.compact-nav-btn:hover rpt-icon{color:var(--rpt-color-text, #0f172a)}.compact-nav-btn.active{background:var(--rpt-color-primary-light, #eff6ff);color:var(--rpt-color-primary, #2563eb);border-color:#2563eb40;font-weight:var(--rpt-font-weight-semibold, 600);box-shadow:0 1px 2px #2563eb14}.compact-nav-btn.active rpt-icon{color:var(--rpt-color-primary, #2563eb)}.compact-nav-btn:focus-visible{outline:2px solid var(--rpt-color-primary, #2563eb);outline-offset:1px}.workbench-drawer-backdrop{display:block;position:absolute;inset:0;background:#0f172a59;backdrop-filter:blur(1px);z-index:50}.workbench-left-container{position:absolute;left:0;top:0;bottom:0;width:280px;max-width:85vw;z-index:60;box-shadow:4px 0 24px #00000026;transform:translate(0);transition:transform .25s cubic-bezier(.16,1,.3,1)}.workbench-left-container.is-collapsed{transform:translate(-100%);width:280px!important}.workbench-right-container{position:absolute;right:0;top:0;bottom:0;width:380px;max-width:95vw;z-index:60;box-shadow:-4px 0 24px #00000026;transform:translate(0);transition:transform .25s cubic-bezier(.16,1,.3,1)}.workbench-right-container.is-collapsed{transform:translate(100%);width:380px!important}}.preview-mode-container{flex:1;overflow-y:auto;padding:16px;background-color:#f1f5f9;box-sizing:border-box}.preview-banner{max-width:1400px;margin:0 auto 16px;background:#eff6ff;color:#1e40af;border:1px solid #bfdbfe;padding:10px 18px;border-radius:var(--rpt-border-radius-lg, 8px);font-size:var(--rpt-font-size-sm, .8rem);font-weight:600;display:flex;align-items:center;gap:8px;box-shadow:var(--rpt-box-shadow-xs, 0 1px 2px rgba(0, 0, 0, .04));box-sizing:border-box}.preview-content{max-width:1400px;margin:0 auto;background:#fff;border-radius:var(--rpt-border-radius-lg, 8px);border:1px solid var(--rpt-color-border, #cbd5e1);box-shadow:0 4px 6px -1px #0000000d;padding:0;min-height:480px;box-sizing:border-box}.json-mode-container{flex:1;overflow-y:auto;padding:24px;background-color:#0f172a;display:flex;flex-direction:column}.json-banner{display:flex;align-items:center;justify-content:space-between;color:#94a3b8;font-size:.8rem;font-weight:600;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid #1e293b}.btn-copy-json{background:#ffffff1a;color:#fff;border:1px solid rgba(255,255,255,.2);border-radius:4px;padding:4px 12px;font-size:.75rem;cursor:pointer;transition:all .15s ease}.btn-copy-json:hover{background:#fff3}.json-display{flex:1;margin:0;padding:20px;background:#090d16;border-radius:8px;border:1px solid #1e293b;color:#38bdf8;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.85rem;line-height:1.5;overflow-x:auto}.save-toast{position:absolute;bottom:24px;right:24px;background:#10b981;color:#fff;padding:10px 20px;border-radius:6px;font-size:.85rem;font-weight:600;box-shadow:0 10px 15px -3px #0000001a;z-index:100;animation:rpt-fade-in .2s ease}@keyframes rpt-fade-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1$2.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "component", type: DesignerToolbarComponent, selector: "rpt-designer-toolbar", inputs: ["isLeftPanelCollapsed", "isRightPanelCollapsed"], outputs: ["toggleLeftPanel", "toggleRightPanel", "saveRequested"] }, { kind: "component", type: ComponentPaletteComponent, selector: "rpt-component-palette", outputs: ["collapseRequested"] }, { kind: "component", type: DesignCanvasComponent, selector: "rpt-design-canvas" }, { kind: "component", type: PropertyEditorComponent, selector: "rpt-property-editor", outputs: ["collapseRequested"] }, { kind: "component", type: DynamicRendererComponent, selector: "rpt-dynamic-renderer", inputs: ["definition", "initialValues", "resultData"], outputs: ["executeRequested", "resetRequested", "exportRequested", "printRequested", "customActionTriggered", "gridStateChanged", "columnDefsChanged", "selectionChange", "selectionChanged", "rowActionTriggered"] }, { kind: "component", type: RptIconComponent, selector: "rpt-icon", inputs: ["name", "size", "color", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DesignerComponent, decorators: [{
             type: Component,
@@ -12579,7 +13288,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         </div>
       }
     </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;width:100%;height:100%;min-height:400px;font-family:var(--rpt-font-family, inherit);box-sizing:border-box}.designer-shell{display:flex;flex-direction:column;height:100%;background-color:#f8fafc;position:relative;overflow:hidden}.designer-workbench{display:flex;flex:1;overflow:hidden;position:relative;min-height:0}.workbench-left-container{display:flex;position:relative;width:250px;flex-shrink:0;height:100%;transition:width var(--rpt-transition-speed-smooth, .25s) cubic-bezier(.16,1,.3,1);z-index:20}.workbench-left-container.is-collapsed{width:0!important}.workbench-left-panel{width:100%;height:100%;overflow:hidden;border-right:1px solid var(--rpt-color-border, #cbd5e1);background:#fff;box-sizing:border-box}.workbench-left-container.is-collapsed .workbench-left-panel{visibility:hidden;border-right:none}.workbench-center-panel{flex:1;height:100%;overflow:hidden;display:flex;flex-direction:column;min-width:0;position:relative}.workbench-right-container{display:flex;position:relative;width:320px;flex-shrink:0;height:100%;transition:width var(--rpt-transition-speed-smooth, .25s) cubic-bezier(.16,1,.3,1);z-index:20}.workbench-right-container.is-collapsed{width:0!important}.workbench-right-panel{width:100%;height:100%;overflow:hidden;border-left:1px solid var(--rpt-color-border, #cbd5e1);background:#fff;box-sizing:border-box}.workbench-right-container.is-collapsed .workbench-right-panel{visibility:hidden;border-left:none}.compact-workbench-bar,.workbench-drawer-backdrop{display:none}@media (max-width: 900px){.compact-workbench-bar{display:flex;align-items:center;justify-content:space-around;height:48px;background:var(--rpt-color-surface, #ffffff);border-top:1px solid var(--rpt-color-border, #cbd5e1);padding:0 12px;gap:8px;z-index:45;flex-shrink:0;box-shadow:0 -2px 8px #0000000a;font-family:var(--rpt-font-family, inherit)}.compact-nav-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:6px 14px;border-radius:var(--rpt-border-radius, 6px);border:1px solid transparent;background:transparent;font-family:var(--rpt-font-family, inherit);font-size:var(--rpt-font-size-sm, .75rem);font-weight:var(--rpt-font-weight-medium, 500);letter-spacing:-.01em;line-height:1.4;color:var(--rpt-color-text-secondary, #334155);cursor:pointer;-webkit-user-select:none;user-select:none;transition:all var(--rpt-transition-speed, .15s) ease;white-space:nowrap}.compact-nav-btn rpt-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--rpt-color-text-muted, #64748b);transition:color var(--rpt-transition-speed, .15s) ease}.compact-nav-btn:hover{background:var(--rpt-color-surface-hover, #f1f5f9);color:var(--rpt-color-text, #0f172a);border-color:var(--rpt-color-border-subtle, #e2e8f0)}.compact-nav-btn:hover rpt-icon{color:var(--rpt-color-text, #0f172a)}.compact-nav-btn.active{background:var(--rpt-color-primary-light, #eff6ff);color:var(--rpt-color-primary, #2563eb);border-color:#2563eb40;font-weight:var(--rpt-font-weight-semibold, 600);box-shadow:0 1px 2px #2563eb14}.compact-nav-btn.active rpt-icon{color:var(--rpt-color-primary, #2563eb)}.compact-nav-btn:focus-visible{outline:2px solid var(--rpt-color-primary, #2563eb);outline-offset:1px}.workbench-drawer-backdrop{display:block;position:absolute;inset:0;background:#0f172a59;backdrop-filter:blur(1px);z-index:50}.workbench-left-container{position:absolute;left:0;top:0;bottom:0;width:280px;max-width:85vw;z-index:60;box-shadow:4px 0 24px #00000026;transform:translate(0);transition:transform .25s cubic-bezier(.16,1,.3,1)}.workbench-left-container.is-collapsed{transform:translate(-100%);width:280px!important}.workbench-right-container{position:absolute;right:0;top:0;bottom:0;width:320px;max-width:90vw;z-index:60;box-shadow:-4px 0 24px #00000026;transform:translate(0);transition:transform .25s cubic-bezier(.16,1,.3,1)}.workbench-right-container.is-collapsed{transform:translate(100%);width:320px!important}}.preview-mode-container{flex:1;overflow-y:auto;padding:16px;background-color:#f1f5f9;box-sizing:border-box}.preview-banner{max-width:1400px;margin:0 auto 16px;background:#eff6ff;color:#1e40af;border:1px solid #bfdbfe;padding:10px 18px;border-radius:var(--rpt-border-radius-lg, 8px);font-size:var(--rpt-font-size-sm, .8rem);font-weight:600;display:flex;align-items:center;gap:8px;box-shadow:var(--rpt-box-shadow-xs, 0 1px 2px rgba(0, 0, 0, .04));box-sizing:border-box}.preview-content{max-width:1400px;margin:0 auto;background:#fff;border-radius:var(--rpt-border-radius-lg, 8px);border:1px solid var(--rpt-color-border, #cbd5e1);box-shadow:0 4px 6px -1px #0000000d;padding:0;min-height:480px;box-sizing:border-box}.json-mode-container{flex:1;overflow-y:auto;padding:24px;background-color:#0f172a;display:flex;flex-direction:column}.json-banner{display:flex;align-items:center;justify-content:space-between;color:#94a3b8;font-size:.8rem;font-weight:600;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid #1e293b}.btn-copy-json{background:#ffffff1a;color:#fff;border:1px solid rgba(255,255,255,.2);border-radius:4px;padding:4px 12px;font-size:.75rem;cursor:pointer;transition:all .15s ease}.btn-copy-json:hover{background:#fff3}.json-display{flex:1;margin:0;padding:20px;background:#090d16;border-radius:8px;border:1px solid #1e293b;color:#38bdf8;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.85rem;line-height:1.5;overflow-x:auto}.save-toast{position:absolute;bottom:24px;right:24px;background:#10b981;color:#fff;padding:10px 20px;border-radius:6px;font-size:.85rem;font-weight:600;box-shadow:0 10px 15px -3px #0000001a;z-index:100;animation:rpt-fade-in .2s ease}@keyframes rpt-fade-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;width:100%;height:100%;min-height:400px;font-family:var(--rpt-font-family, inherit);box-sizing:border-box}.designer-shell{display:flex;flex-direction:column;height:100%;background-color:#f8fafc;position:relative;overflow:hidden}.designer-workbench{display:flex;flex:1;overflow:hidden;position:relative;min-height:0}.workbench-left-container{display:flex;position:relative;width:250px;flex-shrink:0;height:100%;transition:width var(--rpt-transition-speed-smooth, .25s) cubic-bezier(.16,1,.3,1);z-index:20}.workbench-left-container.is-collapsed{width:0!important}.workbench-left-panel{width:100%;height:100%;overflow:hidden;border-right:1px solid var(--rpt-color-border, #cbd5e1);background:#fff;box-sizing:border-box}.workbench-left-container.is-collapsed .workbench-left-panel{visibility:hidden;border-right:none}.workbench-center-panel{flex:1;height:100%;overflow:hidden;display:flex;flex-direction:column;min-width:0;position:relative}.workbench-right-container{display:flex;position:relative;width:420px;flex-shrink:0;height:100%;transition:width var(--rpt-transition-speed-smooth, .25s) cubic-bezier(.16,1,.3,1);z-index:20}.workbench-right-container.is-collapsed{width:0!important}.workbench-right-panel{width:100%;height:100%;overflow:hidden;border-left:1px solid var(--rpt-color-border, #cbd5e1);background:#fff;box-sizing:border-box}.workbench-right-container.is-collapsed .workbench-right-panel{visibility:hidden;border-left:none}.compact-workbench-bar,.workbench-drawer-backdrop{display:none}@media (max-width: 900px){.compact-workbench-bar{display:flex;align-items:center;justify-content:space-around;height:48px;background:var(--rpt-color-surface, #ffffff);border-top:1px solid var(--rpt-color-border, #cbd5e1);padding:0 12px;gap:8px;z-index:45;flex-shrink:0;box-shadow:0 -2px 8px #0000000a;font-family:var(--rpt-font-family, inherit)}.compact-nav-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:6px 14px;border-radius:var(--rpt-border-radius, 6px);border:1px solid transparent;background:transparent;font-family:var(--rpt-font-family, inherit);font-size:var(--rpt-font-size-sm, .75rem);font-weight:var(--rpt-font-weight-medium, 500);letter-spacing:-.01em;line-height:1.4;color:var(--rpt-color-text-secondary, #334155);cursor:pointer;-webkit-user-select:none;user-select:none;transition:all var(--rpt-transition-speed, .15s) ease;white-space:nowrap}.compact-nav-btn rpt-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--rpt-color-text-muted, #64748b);transition:color var(--rpt-transition-speed, .15s) ease}.compact-nav-btn:hover{background:var(--rpt-color-surface-hover, #f1f5f9);color:var(--rpt-color-text, #0f172a);border-color:var(--rpt-color-border-subtle, #e2e8f0)}.compact-nav-btn:hover rpt-icon{color:var(--rpt-color-text, #0f172a)}.compact-nav-btn.active{background:var(--rpt-color-primary-light, #eff6ff);color:var(--rpt-color-primary, #2563eb);border-color:#2563eb40;font-weight:var(--rpt-font-weight-semibold, 600);box-shadow:0 1px 2px #2563eb14}.compact-nav-btn.active rpt-icon{color:var(--rpt-color-primary, #2563eb)}.compact-nav-btn:focus-visible{outline:2px solid var(--rpt-color-primary, #2563eb);outline-offset:1px}.workbench-drawer-backdrop{display:block;position:absolute;inset:0;background:#0f172a59;backdrop-filter:blur(1px);z-index:50}.workbench-left-container{position:absolute;left:0;top:0;bottom:0;width:280px;max-width:85vw;z-index:60;box-shadow:4px 0 24px #00000026;transform:translate(0);transition:transform .25s cubic-bezier(.16,1,.3,1)}.workbench-left-container.is-collapsed{transform:translate(-100%);width:280px!important}.workbench-right-container{position:absolute;right:0;top:0;bottom:0;width:380px;max-width:95vw;z-index:60;box-shadow:-4px 0 24px #00000026;transform:translate(0);transition:transform .25s cubic-bezier(.16,1,.3,1)}.workbench-right-container.is-collapsed{transform:translate(100%);width:380px!important}}.preview-mode-container{flex:1;overflow-y:auto;padding:16px;background-color:#f1f5f9;box-sizing:border-box}.preview-banner{max-width:1400px;margin:0 auto 16px;background:#eff6ff;color:#1e40af;border:1px solid #bfdbfe;padding:10px 18px;border-radius:var(--rpt-border-radius-lg, 8px);font-size:var(--rpt-font-size-sm, .8rem);font-weight:600;display:flex;align-items:center;gap:8px;box-shadow:var(--rpt-box-shadow-xs, 0 1px 2px rgba(0, 0, 0, .04));box-sizing:border-box}.preview-content{max-width:1400px;margin:0 auto;background:#fff;border-radius:var(--rpt-border-radius-lg, 8px);border:1px solid var(--rpt-color-border, #cbd5e1);box-shadow:0 4px 6px -1px #0000000d;padding:0;min-height:480px;box-sizing:border-box}.json-mode-container{flex:1;overflow-y:auto;padding:24px;background-color:#0f172a;display:flex;flex-direction:column}.json-banner{display:flex;align-items:center;justify-content:space-between;color:#94a3b8;font-size:.8rem;font-weight:600;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid #1e293b}.btn-copy-json{background:#ffffff1a;color:#fff;border:1px solid rgba(255,255,255,.2);border-radius:4px;padding:4px 12px;font-size:.75rem;cursor:pointer;transition:all .15s ease}.btn-copy-json:hover{background:#fff3}.json-display{flex:1;margin:0;padding:20px;background:#090d16;border-radius:8px;border:1px solid #1e293b;color:#38bdf8;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.85rem;line-height:1.5;overflow-x:auto}.save-toast{position:absolute;bottom:24px;right:24px;background:#10b981;color:#fff;padding:10px 20px;border-radius:6px;font-size:.85rem;font-weight:600;box-shadow:0 10px 15px -3px #0000001a;z-index:100;animation:rpt-fade-in .2s ease}@keyframes rpt-fade-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { onResize: [{
                 type: HostListener,
                 args: ['window:resize']
@@ -13491,6 +14200,7 @@ const DEFAULT_CONFIG = {
     dateFormat: 'dd/MM/yyyy',
     enableDesigner: false,
     schemaVersion: 1,
+    lookupTimeoutMs: 300000,
 };
 /**
  * Kinds of reporting features available in `provideBwaysReport`.
@@ -13520,10 +14230,17 @@ function withHttpAdapters(options) {
     const cleanUrl = options.apiBaseUrl.replace(/\/+$/, '');
     return {
         ɵkind: ReportingFeatureKind.HttpAdapters,
+        ɵconfig: {
+            apiBaseUrl: cleanUrl,
+            ...(options.lookupTimeoutMs ? { lookupTimeoutMs: options.lookupTimeoutMs } : {}),
+        },
         ɵproviders: [
             {
                 provide: REPORTING_CONFIG,
-                useValue: { apiBaseUrl: cleanUrl },
+                useValue: {
+                    apiBaseUrl: cleanUrl,
+                    ...(options.lookupTimeoutMs ? { lookupTimeoutMs: options.lookupTimeoutMs } : {}),
+                },
             },
             {
                 provide: ReportDataSourceAdapter,
@@ -13590,11 +14307,15 @@ const withMockAdapters = withLocalStorage;
  */
 function provideBwaysReport(options = {}, ...features) {
     const config = { ...DEFAULT_CONFIG, ...options };
+    for (const feature of features) {
+        if (feature.ɵconfig) {
+            Object.assign(config, feature.ɵconfig);
+        }
+    }
     if (config.apiBaseUrl) {
         config.apiBaseUrl = config.apiBaseUrl.replace(/\/+$/, '');
     }
     const providers = [
-        { provide: REPORTING_CONFIG, useValue: config },
         {
             provide: ENVIRONMENT_INITIALIZER,
             multi: true,
@@ -13606,10 +14327,13 @@ function provideBwaysReport(options = {}, ...features) {
     ];
     const hasHttpFeature = features.some((f) => f.ɵkind === ReportingFeatureKind.HttpAdapters);
     const hasLocalFeature = features.some((f) => f.ɵkind === ReportingFeatureKind.LocalStorage);
-    // Append feature providers
+    // Append feature providers (excluding standalone REPORTING_CONFIG so merged config wins)
     for (const feature of features) {
-        providers.push(...feature.ɵproviders);
+        const nonConfigProviders = feature.ɵproviders.filter((p) => !(typeof p === 'object' && p !== null && 'provide' in p && p.provide === REPORTING_CONFIG));
+        providers.push(...nonConfigProviders);
     }
+    // Unified merged configuration
+    providers.push({ provide: REPORTING_CONFIG, useValue: config });
     // Auto-provision HTTP adapters if apiBaseUrl was supplied as a 1-line option
     if (!hasHttpFeature && !hasLocalFeature && options.apiBaseUrl) {
         providers.push({ provide: ReportDataSourceAdapter, useClass: options.dataSourceAdapter ?? HttpReportDataSourceAdapter }, { provide: ReportPersistenceAdapter, useClass: options.persistenceAdapter ?? HttpReportPersistenceAdapter }, { provide: MasterDataProvider, useClass: options.masterDataProvider ?? HttpMasterDataAdapter }, { provide: ReportSchemaDiscoveryAdapter, useClass: options.schemaDiscoveryAdapter ?? HttpReportSchemaDiscoveryAdapter }, { provide: ReportLookupAdapter, useClass: options.lookupAdapter ?? HttpReportLookupAdapter });
@@ -13690,5 +14414,5 @@ const bwaysReportProviders = provideBwaysReport;
  * Generated bundle index. Do not edit.
  */
 
-export { AdapterNotProvidedError, BrowserReportStorage, CHART_COMPONENT, ComponentNotRegisteredError, ComponentPaletteComponent, ComponentRegistry, DataSourceError, DesignCanvasComponent, DesignerComponent, DesignerStateService, DesignerToolbarComponent, DynamicFormBuilder, DynamicRendererComponent, GRID_COMPONENT, HttpDataSourceAdapter, HttpLookupAdapter, HttpMasterDataAdapter, HttpPersistenceAdapter, HttpReportDataSourceAdapter, HttpReportLookupAdapter, HttpReportPersistenceAdapter, HttpReportSchemaDiscoveryAdapter, HttpSchemaDiscoveryAdapter, LocalStorageReportPersistenceAdapter, MasterDataProvider, MemoryReportStorage, MockReportDataSourceAdapter, PropertyEditorActionComponent, PropertyEditorComponent, REPORTING_CONFIG, REPORT_SESSION_CONTEXT, REPORT_SESSION_PROVIDER, REPORT_STORAGE, ReportChartBridgeComponent, ReportDataSourceAdapter, ReportDefinitionError, ReportExportService, ReportGridBridgeComponent, ReportLookupAdapter, ReportMenuService, ReportPersistenceAdapter, ReportRuntimeComponent, ReportSchemaDiscoveryAdapter, ReportSessionContextService, ReportStorageService, ReportStoreService, ReportTemplateService, ReportTranslationAdapter, ReportVersioningService, ReportingFeatureKind, RoutedReportDesignerComponent, RoutedReportRuntimeComponent, RptButtonComponent, RptCheckboxComponent, RptDateComponent, RptDateRangeComponent, RptDropdownComponent, RptIconComponent, RptInputComponent, RptKpiCardComponent, RptNumberComponent, RptReportComponent, RptReportDesignerComponent, SchemaValidatorService, SchemaVersionError, SessionContextProvider, bwaysReportProviders, createReportRoutes, createValidators, extractRowArray, findMissingCanvasFields, formatFilterSummary, generateCsvContent, generateExcelXml, generateHtmlContent, generateId, getFieldCaseInsensitive, getValidationMessage, groupReportsByCategory, migrateDefinition, provideBwaysReport, provideBwaysReporting, provideReporting, registerBuiltinComponents, reportResolver, resolveCanvasFieldValue, resolveContextPreset, resolveExecutionDataSource, resolveParameterMappings, resolveParameterValue, sanitizeCsvCell, toFieldKey, validateReportSchema, withHttpAdapters, withLocalStorage, withMockAdapters };
+export { AdapterNotProvidedError, BrowserReportStorage, CHART_COMPONENT, ComponentNotRegisteredError, ComponentPaletteComponent, ComponentRegistry, DataSourceError, DesignCanvasComponent, DesignerComponent, DesignerStateService, DesignerToolbarComponent, DynamicFormBuilder, DynamicRendererComponent, GRID_COMPONENT, HttpDataSourceAdapter, HttpLookupAdapter, HttpMasterDataAdapter, HttpPersistenceAdapter, HttpReportDataSourceAdapter, HttpReportLookupAdapter, HttpReportPersistenceAdapter, HttpReportSchemaDiscoveryAdapter, HttpSchemaDiscoveryAdapter, LocalStorageReportPersistenceAdapter, MasterDataProvider, MemoryReportStorage, MockReportDataSourceAdapter, PropertyEditorActionComponent, PropertyEditorComponent, REPORTING_CONFIG, REPORT_SESSION_CONTEXT, REPORT_SESSION_PROVIDER, REPORT_STORAGE, ReportChartBridgeComponent, ReportDataDiscoveryService, ReportDataSourceAdapter, ReportDefinitionError, ReportExportService, ReportGridBridgeComponent, ReportLookupAdapter, ReportMenuService, ReportPersistenceAdapter, ReportRuntimeComponent, ReportSchemaDiscoveryAdapter, ReportSessionContextService, ReportStorageService, ReportStoreService, ReportTemplateService, ReportTranslationAdapter, ReportVersioningService, ReportingFeatureKind, RoutedReportDesignerComponent, RoutedReportRuntimeComponent, RptButtonComponent, RptCheckboxComponent, RptDateComponent, RptDateRangeComponent, RptDropdownComponent, RptIconComponent, RptInputComponent, RptKpiCardComponent, RptNumberComponent, RptReportComponent, RptReportDesignerComponent, SchemaValidatorService, SchemaVersionError, SessionContextProvider, bwaysReportProviders, createReportRoutes, createValidators, extractRowArray, findMissingCanvasFields, formatFilterSummary, generateCsvContent, generateExcelXml, generateHtmlContent, generateId, getFieldCaseInsensitive, getValidationMessage, groupReportsByCategory, migrateDefinition, provideBwaysReport, provideBwaysReporting, provideReporting, registerBuiltinComponents, reportResolver, resolveCanvasFieldValue, resolveContextPreset, resolveExecutionDataSource, resolveParameterMappings, resolveParameterValue, sanitizeCsvCell, toFieldKey, validateReportSchema, withHttpAdapters, withLocalStorage, withMockAdapters };
 //# sourceMappingURL=bways-report.mjs.map