@elite.framework/ng.ui.core 1.0.81 → 1.0.82

package/fesm2022/elite.framework-ng.ui.core-generic-report.mjs

@@ -1,33 +1,31 @@
 import * as i0 from '@angular/core';
-import { NgModule, inject, Input, ViewChild, Component } from '@angular/core';
-import * as i2 from '@angular/common';
+import { NgModule, inject, Component, Input, ViewChild } from '@angular/core';
+import * as i2$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i3 from '@angular/forms';
-import { FormGroup, ReactiveFormsModule, FormsModule } from '@angular/forms';
-import * as i9 from '@ngx-formly/core';
-import { FormlyModule } from '@ngx-formly/core';
-import * as i11 from '@ngx-translate/core';
+import * as i1 from '@angular/forms';
+import { FormsModule, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { FormlyForm } from '@ngx-formly/core';
+import * as i4 from '@ngx-translate/core';
 import { TranslateService, TranslateModule } from '@ngx-translate/core';
-import * as i4 from 'primeng/button';
+import * as i2 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
 import { DialogModule } from 'primeng/dialog';
-import { MultiSelectModule } from 'primeng/multiselect';
+import * as i3 from 'primeng/inputtext';
 import { InputTextModule } from 'primeng/inputtext';
-import * as i6 from 'primeng/radiobutton';
 import { RadioButtonModule } from 'primeng/radiobutton';
-import * as i7 from 'primeng/checkbox';
 import { CheckboxModule } from 'primeng/checkbox';
-import { CardModule } from 'primeng/card';
-import { DividerModule } from 'primeng/divider';
-import * as i8 from 'primeng/tabs';
-import { TabsModule } from 'primeng/tabs';
-import * as i1 from 'primeng/dynamicdialog';
-import { DynamicDialogModule, DialogService } from 'primeng/dynamicdialog';
-import { SelectModule } from 'primeng/select';
+import * as i1$1 from 'primeng/dynamicdialog';
+import { DynamicDialogRef, DynamicDialogConfig, DialogService } from 'primeng/dynamicdialog';
 import { RestService } from '@elite.framework/ng.core/services';
 import { Subject, takeUntil } from 'rxjs';
-import * as i10 from 'primeng/drawer';
+import * as i6 from 'primeng/drawer';
 import { DrawerModule } from 'primeng/drawer';
+import { TableModule } from 'primeng/table';
+import * as i7 from 'primeng/splitbutton';
+import { SplitButtonModule } from 'primeng/splitbutton';
+import * as i8 from 'primeng/tooltip';
+import { TooltipModule } from 'primeng/tooltip';
+import { DomSanitizer } from '@angular/platform-browser';
 import { QueryBuilderService } from '@elite.framework/ng.ui.core/generic-search-advanced';
 import * as i5 from 'primeng/api';
 
@@ -43,6 +41,103 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImpor
                 }]
         }] });
 
+// report-name-dialog.component.ts
+class ReportNameDialogComponent {
+    fileName = '';
+    ref = inject(DynamicDialogRef);
+    config = inject(DynamicDialogConfig);
+    translate = inject(TranslateService);
+    ngOnInit() {
+        this.fileName = this.config.data?.fileName || '';
+    }
+    save() {
+        if (this.fileName?.trim()) {
+            this.ref.close(this.fileName.trim());
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: ReportNameDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.8", type: ReportNameDialogComponent, isStandalone: true, selector: "app-report-name-dialog", ngImport: i0, template: `
+    <div class="p-fluid">
+      <div class="field">
+        <label for="fileName" class="block text-sm font-medium mb-2">
+          {{ 'REPORT_NAME' | translate }}
+        </label>
+        <input
+          id="fileName"
+          type="text"
+          [(ngModel)]="fileName"
+          pInputText
+          class="w-full"
+          [placeholder]="'ENTER_REPORT_NAME' | translate"
+          autofocus>
+      </div>
+    </div>
+
+    <div class="flex justify-end gap-2 mt-4">
+      <button
+        type="button"
+        pButton
+        class="p-button-text"
+        (click)="ref.close()"
+        [label]="'CANCEL' | translate">
+      </button>
+      <button
+        type="button"
+        pButton
+        (click)="save()"
+        [label]="'SAVE' | translate">
+      </button>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { 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.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: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: ReportNameDialogComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-report-name-dialog',
+                    standalone: true,
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        TranslateModule,
+                        ButtonModule,
+                        InputTextModule
+                    ],
+                    template: `
+    <div class="p-fluid">
+      <div class="field">
+        <label for="fileName" class="block text-sm font-medium mb-2">
+          {{ 'REPORT_NAME' | translate }}
+        </label>
+        <input
+          id="fileName"
+          type="text"
+          [(ngModel)]="fileName"
+          pInputText
+          class="w-full"
+          [placeholder]="'ENTER_REPORT_NAME' | translate"
+          autofocus>
+      </div>
+    </div>
+
+    <div class="flex justify-end gap-2 mt-4">
+      <button
+        type="button"
+        pButton
+        class="p-button-text"
+        (click)="ref.close()"
+        [label]="'CANCEL' | translate">
+      </button>
+      <button
+        type="button"
+        pButton
+        (click)="save()"
+        [label]="'SAVE' | translate">
+      </button>
+    </div>
+  `
+                }]
+        }] });
+
 var ExportType;
 (function (ExportType) {
     ExportType[ExportType["LIST"] = 0] = "LIST";
@@ -57,14 +152,15 @@ class GenericReportComponent {
     previewContainer;
     filterFields = [];
     fields_ = [];
-    availableColumns = [];
-    exportType = ExportType.EXCEL;
+    exportType = ExportType.PDF;
     fileName = '';
     showFilters = false;
     loading = false;
-    activeTabIndex = 0;
     currentDate = new Date();
     previewData = [];
+    htmlExportContent = '';
+    showHtmlInIframe = false;
+    previewColumns = [];
     options = {};
     enableQueryBuilder = true;
     localExport = false;
@@ -72,40 +168,49 @@ class GenericReportComponent {
     apiName = '';
     model = {};
     form = new FormGroup({});
-    exportConfig = {
-        columns: {},
-        filters: this.model,
-        exportType: this.exportType,
-        fileName: this.fileName
-    };
+    exportConfig;
     exportTypes = [
         { value: ExportType.EXCEL, label: 'EXCEL', icon: 'pi pi-file-excel' },
         { value: ExportType.PDF, label: 'PDF', icon: 'pi pi-file-pdf' },
         { value: ExportType.HTML, label: 'HTML', icon: 'pi pi-code' },
         { value: ExportType.PRINT, label: 'PRINT', icon: 'pi pi-print' }
     ];
+    exportMenuItems = [];
     destroy$ = new Subject();
+    dialogService = inject(DialogService);
     translate = inject(TranslateService);
     restService = inject(RestService);
     queryBuilder = inject(QueryBuilderService);
+    sanitizer = inject(DomSanitizer);
     constructor(ref, config) {
         this.ref = ref;
         this.config = config;
     }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+        if (this.ref) {
+            try {
+                this.ref.close();
+            }
+            catch (e) {
+                // Ignore errors during cleanup
+            }
+        }
+    }
     ngOnInit() {
         this.filterFields = this.config.data?.filterFields || [];
-        this.initializeComponent();
         this.buildQueryUIFields();
+        this.initializeComponent();
+        this.initializeExportConfig();
+        this.initializeExportMenu();
     }
     get filterCount() {
-        const filters = ((this.model?.advancedFilters ?? [])[0]?.conditions?.length || 0) +
-            ((this.model?.sorting ?? [])?.length || 0) +
-            (this.model?.pagination && this.model?.pagination?.top ? 1 : 0);
-        return filters;
+        return this.queryBuilder.getAppliedFiltersCount(this.model).total;
     }
     buildQueryUIFields() {
         if (this.enableQueryBuilder) {
-            this.fields_ = this.queryBuilder.buildQueryUIFields(this.filterFields);
+            this.fields_ = this.queryBuilder.buildQueryUIFields(this.filterFields, true, true);
         }
         else {
             this.fields_ = this.filterFields;
@@ -113,32 +218,52 @@ class GenericReportComponent {
     }
     initializeComponent() {
         this.apiName = this.config.data?.apiName || '';
-        const columnDefinitions = this.config.data?.columns || {};
-        if (Object.keys(columnDefinitions).length > 0) {
-            this.availableColumns = Object.keys(columnDefinitions).map(key => ({
-                key: String(key),
-                displayName: String(columnDefinitions[key]),
-                selected: true,
-                customName: String(columnDefinitions[key])
-            }));
-        }
-        else {
-            this.availableColumns = (this.filterFields || []).map(f => {
-                const key = String(f.key ?? '');
-                const label = String(f.props?.label ?? key);
-                return {
-                    key,
-                    displayName: this.translate.instant(label),
-                    selected: true,
-                    customName: label
-                };
-            });
-        }
+        this.initializeFilterFields();
+        this.onExport();
+    }
+    initializeFilterFields() {
         this.filterFields = this.config.data?.filterFields || this.getDefaultFilterFields();
         this.model = this.config.data?.model || {};
         this.fileName = this.config.data?.defaultFileName || `export_${new Date().toISOString().split('T')[0]}`;
-        // Load sample data for preview
-        this.loadPreviewData();
+    }
+    initializeExportConfig() {
+        this.exportConfig = {
+            filters: this.model,
+            exportType: this.exportType,
+            fileName: this.fileName
+        };
+    }
+    initializeExportMenu() {
+        this.exportMenuItems = [
+            // Edit Report Name menu item
+            {
+                label: this.translate.instant('EDIT_REPORT_NAME'),
+                icon: 'pi pi-pencil',
+                command: () => this.openReportNameDialog()
+            },
+            // Separator
+            { separator: true },
+            // Export type menu items
+            ...this.exportTypes.map(type => ({
+                label: this.translate.instant(type.label),
+                icon: type.icon,
+                command: () => this.onExportTypeChange(type.value)
+            }))
+        ];
+    }
+    openReportNameDialog() {
+        const ref = this.dialogService.open(ReportNameDialogComponent, {
+            header: this.translate.instant('EDIT_REPORT_NAME'),
+            width: '500px',
+            data: {
+                fileName: this.fileName
+            }
+        });
+        ref.onClose.subscribe((result) => {
+            if (result) {
+                this.fileName = result;
+            }
+        });
     }
     getDefaultFilterFields() {
         return [
@@ -152,173 +277,44 @@ class GenericReportComponent {
             }
         ];
     }
-    get selectedColumns() {
-        return this.availableColumns.filter(col => col.selected);
-    }
-    onExportTypeChange(type) {
-        this.exportType = type;
-        // Auto-switch to preview tab for HTML/Print
-        if ((type === ExportType.HTML || type === ExportType.PRINT) && this.selectedColumns.length > 0) {
-            this.activeTabIndex = 1;
-        }
-    }
-    onColumnToggle(column) {
-        if (!column.selected) {
-            column.customName = column.displayName;
-        }
-        // Refresh preview when columns change
-        if (this.activeTabIndex === 1) {
-            this.generatePreview();
-        }
-    }
-    onCustomNameChange(column) {
-        if (!column.customName?.trim()) {
-            column.customName = column.displayName;
-        }
-        // Refresh preview when column names change
-        if (this.activeTabIndex === 1) {
-            this.generatePreview();
-        }
-    }
-    selectAllColumns() {
-        this.availableColumns.forEach(col => {
-            col.selected = true;
-            col.customName = col.displayName;
-        });
-        this.generatePreview();
-    }
-    deselectAllColumns() {
-        this.availableColumns.forEach(col => {
-            col.selected = false;
-        });
-        this.previewData = [];
-    }
+    // Query and Preview Methods
     generatePreview() {
-        if (this.selectedColumns.length === 0) {
-            this.previewData = [];
-            return;
-        }
-        // In a real application, you would call your API here
-        // For demo purposes, we're using the sample data
-        this.loadPreviewData();
-    }
-    getPreviewValue(row, columnKey) {
-        // Handle nested properties with dot notation
-        return columnKey.split('.').reduce((obj, key) => obj?.[key], row) || '-';
-    }
-    getExportButtonText() {
-        switch (this.exportType) {
-            case ExportType.PRINT:
-                return this.translate.instant('PRINT');
-            case ExportType.HTML:
-                return this.translate.instant('GENERATE_REPORT');
-            default:
-                return this.translate.instant('EXPORT');
-        }
+        this.onExport();
     }
     onSubmit() {
-        // Use the new QueryBuilderService methods
         const odataParams = this.queryBuilder.buildODataFromQueryModel(this.model, this.filterFields);
-        // this.odataSearch.emit(odataParams);
-        // Generate query string using the unified method
         this.queryString = this.queryBuilder.toODataQueryString(odataParams);
-        // console.log('OData Query String:', queryString);
-        if (this.model?.pagination && this.model?.pagination?.top) {
-            // this.paginationChange.emit({
-            //   top:this.model?.pagination?.top,
-            //     // skip:,
-            // });
-        }
-        //   this.search.emit(
-        //     {
-        //       filter:this.model['filter'],
-        //       query:this.queryString,
-        //       // sorting:,
-        //       // top:,
-        //       // skip:,
-        //   }
-        // );
-        this.loadPreviewData();
+        this.onExport();
     }
     onReset() {
-        this.availableColumns.forEach(col => {
-            col.selected = true;
-            col.customName = col.displayName;
-        });
-        this.exportType = ExportType.EXCEL;
+        this.exportType = ExportType.PDF;
         this.fileName = `export_${new Date().toISOString().split('T')[0]}`;
         this.form.reset();
         this.model = {};
-        this.activeTabIndex = 0;
         this.generatePreview();
     }
+    // Export Methods
     onExport() {
-        if (this.selectedColumns.length === 0)
-            return;
         this.loading = true;
-        // Prepare columns mapping
-        const columnsMapping = {};
-        this.selectedColumns.forEach(col => {
-            columnsMapping[col.key] = col.customName || col.displayName;
-        });
-        const exportConfig = {
-            columns: columnsMapping,
+        const exportConfig = this.createExportConfig();
+        this.handleApiExport(exportConfig);
+    }
+    createExportConfig() {
+        return {
             filters: this.model,
             exportType: this.exportType,
             fileName: this.fileName
         };
-        // Handle export based on type
-        switch (this.exportType) {
-            case ExportType.PRINT:
-                this.printPreview();
-                this.loading = false;
-                break;
-            case ExportType.HTML:
-                this.generateHtmlReport(exportConfig);
-                this.loading = false;
-                break;
-            default:
-                this.handleApiExport(exportConfig);
-                break;
-        }
-    }
-    generateHtmlReport(config) {
-        const htmlContent = this.previewContainer.nativeElement.innerHTML;
-        const blob = new Blob([htmlContent], { type: 'text/html' });
-        this.downloadFile(blob, `${config.fileName}.html`);
     }
     handleApiExport(config) {
         if (this.form.invalid)
             return;
-        this.loading = true;
-        const filters = {
-            fileName: config.fileName || '',
-            query: this.queryString,
-            exportType: config.exportType,
-            columns: JSON.stringify(config.columns),
-            // ...this.currentFilters,
-            // ...this.pageFilters,
-            // ...(this.searchGlobal ? { filter: this.searchGlobal } : {}),
-        };
-        const params = Object.keys(filters).reduce((acc, key) => {
-            acc[key] = filters[key];
-            return acc;
-        }, {});
-        this.restService.request({
-            method: 'GET',
-            url: `/${this.apiName}/export`,
-            // body: { ...config.filters, ...this.model },
-            params: params
-        }, { apiName: this.apiName })
+        const requestOptions = this.createRequestOptions(config);
+        this.restService.request(requestOptions, { apiName: this.apiName })
             .pipe(takeUntil(this.destroy$))
             .subscribe({
             next: (response) => {
-                this.loading = false;
-                if (config.exportType == ExportType.EXCEL) {
-                    const blob = this.base64ToBlob(response, 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
-                    this.downloadFile(blob, `${config.fileName}.${this.getFileExtension(config.exportType)}`);
-                }
-                this.loading = false;
+                this.handleExportResponse(response, config);
             },
             error: (error) => {
                 console.error('Export failed:', error);
@@ -326,45 +322,149 @@ class GenericReportComponent {
             }
         });
     }
-    loadPreviewData() {
-        if (this.form.invalid)
-            return;
-        this.loading = true;
+    createRequestOptions(config) {
+        // Default query
+        if (!this.queryString || this.queryString == '') {
+            // Use the new QueryBuilderService methods
+            const odataParams = this.queryBuilder.buildODataFromQueryModel(this.model, this.filterFields);
+            // this.odataSearch.emit(odataParams);
+            // Generate query string using the unified method
+            this.queryString = this.queryBuilder.toODataQueryString(odataParams);
+            // console.log('OData Query String:', queryString);
+        }
         const filters = {
+            fileName: config.fileName || '',
             query: this.queryString,
-            exportType: ExportType.LIST,
-            columns: JSON.stringify(this.getPreviewColumns()),
-            // ...this.currentFilters,
-            // ...this.pageFilters,
-            // ...(this.searchGlobal ? { filter: this.searchGlobal } : {}),
+            exportType: config.exportType,
         };
         const params = Object.keys(filters).reduce((acc, key) => {
             acc[key] = filters[key];
             return acc;
         }, {});
-        this.restService.request({
+        const requestOptions = {
             method: 'GET',
             url: `/${this.apiName}/export`,
             params: params
-        }, { apiName: this.apiName })
-            .pipe(takeUntil(this.destroy$))
-            .subscribe({
-            next: (response) => {
-                this.previewData = response;
-                this.loading = false;
-            },
-            error: (error) => {
-                console.error('Preview load failed:', error);
-                this.loading = false;
-            }
-        });
+        };
+        if (config.exportType === ExportType.HTML) {
+            requestOptions.responseType = 'text';
+        }
+        return requestOptions;
     }
-    getPreviewColumns() {
-        const columns = {};
-        this.selectedColumns.forEach(col => {
-            columns[col.key] = col.customName || col.displayName;
-        });
-        return columns;
+    // private handleExportResponse(response: any, config: any) {
+    //   this.loading = false;
+    //   if (config.exportType === ExportType.HTML) {
+    //     this.showHtmlExport(response);
+    //   } else {
+    //     this.downloadBinaryExport(response, config);
+    //   }
+    // }
+    handleExportResponse(response, config) {
+        this.loading = false;
+        if (config.exportType === ExportType.HTML) {
+            this.showHtmlExport(response);
+            // } else if (config.exportType === ExportType.PDF && this.isMobileDevice()) {
+        }
+        else if (config.exportType === ExportType.PDF) {
+            this.showPdfInMobile(response, config);
+        }
+        else {
+            this.downloadBinaryExport(response, config);
+        }
+    }
+    // Platform detection methods
+    isMobileDevice() {
+        return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+    }
+    isIOS() {
+        return /iPad|iPhone|iPod/.test(navigator.userAgent);
+    }
+    isAndroid() {
+        return /Android/.test(navigator.userAgent);
+    }
+    showPdfModal = false;
+    currentPdfUrl;
+    currentFileName = '';
+    showPdfInMobile(base64Data, config) {
+        try {
+            const blob = this.base64ToBlob(base64Data, this.getMimeType(ExportType.PDF));
+            this.currentPdfUrl = this.sanitizeUrl(URL.createObjectURL(blob));
+            this.currentFileName = `${config.fileName}.pdf`;
+            this.showPdfModal = true;
+        }
+        catch (error) {
+            var error = 'PDF is too large for mobile viewing. Please download instead.';
+        }
+        finally {
+            // this.loading = false;
+        }
+    }
+    sanitizeUrl(url) {
+        return this.sanitizer.bypassSecurityTrustResourceUrl(url);
+    }
+    // onPdfModalClose(): void {
+    //   this.showPdfModal = false;
+    //   if (this.currentPdfUrl) {
+    //     URL.revokeObjectURL(this.currentPdfUrl);
+    //     this.currentPdfUrl = '';
+    //   }
+    // }
+    onPdfDownload() {
+        // Trigger download
+        // const blob = this.base64ToBlob(this.getCurrentBase64(), this.getMimeType(ExportType.PDF));
+        // this.downloadFile(blob, this.currentFileName);
+    }
+    downloadBinaryExport(response, config) {
+        const blob = this.base64ToBlob(response, this.getMimeType(config.exportType));
+        this.downloadFile(blob, `${config.fileName}.${this.getFileExtension(config.exportType)}`);
+    }
+    // HTML Export Methods
+    showHtmlExport(htmlContent) {
+        const cleanHtml = this.cleanHtmlContent(htmlContent);
+        this.htmlExportContent = cleanHtml;
+        this.showHtmlInIframe = true;
+        setTimeout(() => {
+            this.setIframeContent(cleanHtml);
+        }, 100);
+    }
+    setIframeContent(htmlContent) {
+        const iframe = document.getElementById('reportIframe');
+        if (!iframe) {
+            console.error('Iframe not found');
+            return;
+        }
+        const iframeDoc = iframe.contentDocument || iframe.contentWindow?.document;
+        if (iframeDoc) {
+            iframeDoc.open();
+            iframeDoc.write(htmlContent);
+            iframeDoc.close();
+        }
+    }
+    print() {
+        // const iframe = document.getElementById('reportIframe') as HTMLIFrameElement | null;
+        // if (!iframe || !iframe.contentWindow) return;
+        // const iframeWindow = iframe.contentWindow;
+        // iframeWindow.focus();
+        // iframeWindow.print();
+        document.getElementById('reportIframe').contentWindow.print();
+    }
+    // Utility Methods
+    getExportButtonText() {
+        switch (this.exportType) {
+            case ExportType.PRINT:
+                return this.translate.instant('PRINT');
+            case ExportType.HTML:
+                return this.translate.instant('EXPORT');
+            default:
+                return this.translate.instant('EXPORT');
+        }
+    }
+    onExportTypeChange(type) {
+        this.exportType = type;
+    }
+    getCurrentExportTypeIcon() {
+        const currentType = this.exportTypes.find(type => type.value === this.exportType);
+        return currentType?.icon || 'pi pi-download';
     }
     base64ToBlob(base64, mime) {
         const byteChars = atob(base64);
@@ -390,80 +490,48 @@ class GenericReportComponent {
             case ExportType.HTML:
                 return 'html';
             default:
-                return 'xlsx';
+                return 'pdf';
         }
     }
-    printPreview() {
-        const printContent = this.previewContainer.nativeElement.innerHTML;
-        const originalContent = document.body.innerHTML;
-        // Create print window
-        const printWindow = window.open('', '_blank', 'width=800,height=600');
-        if (printWindow) {
-            printWindow.document.write(`
-        <!DOCTYPE html>
-        <html>
-          <head>
-            <title>${this.fileName}</title>
-            <style>
-              body { font-family: Arial, sans-serif; margin: 20px; }
-              table { width: 100%; border-collapse: collapse; }
-              th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
-              th { background-color: #f5f5f5; font-weight: bold; }
-              .header { text-align: center; margin-bottom: 20px; }
-              .footer { text-align: center; margin-top: 20px; font-size: 12px; color: #666; }
-              @media print {
-                body { margin: 0; }
-                .no-print { display: none; }
-              }
-            </style>
-          </head>
-          <body>
-            ${printContent}
-            <div class="footer no-print">
-              <button onclick="window.print()" style="padding: 10px 20px; margin: 10px; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer;">
-                Print Report
-              </button>
-              <button onclick="window.close()" style="padding: 10px 20px; margin: 10px; background: #6c757d; color: white; border: none; border-radius: 4px; cursor: pointer;">
-                Close
-              </button>
-            </div>
-          </body>
-        </html>
-      `);
-            printWindow.document.close();
-            // Auto-print when window loads
-            printWindow.onload = () => {
-                printWindow.focus();
-                // Uncomment the line below for auto-print
-                // printWindow.print();
-            };
+    getMimeType(exportType) {
+        switch (exportType) {
+            case ExportType.EXCEL:
+                return 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
+            case ExportType.PDF:
+                return 'application/pdf';
+            default:
+                return 'application/octet-stream';
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: GenericReportComponent, deps: [{ token: i1.DynamicDialogRef }, { token: i1.DynamicDialogConfig }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.8", type: GenericReportComponent, isStandalone: true, selector: "app-generic-report", inputs: { filterFields: "filterFields", enableQueryBuilder: "enableQueryBuilder", localExport: "localExport", queryString: "queryString", apiName: "apiName", model: "model" }, providers: [DialogService], viewQueries: [{ propertyName: "previewContainer", first: true, predicate: ["previewContainer"], descendants: true }], ngImport: i0, template: "\r\n    <div class=\"flex flex-col h-full bg-white dark:bg-gray-900 rounded-lg max-w-6xl mx-auto\">\r\n      <!-- Header -->\r\n      <!-- <div class=\"flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700\">\r\n        <h2 class=\"text-lg font-semibold text-gray-900 dark:text-white\">\r\n          {{ 'EXPORT_DATA' | translate }}\r\n        </h2>\r\n        <button\r\n          (click)=\"ref?.close()\"\r\n          class=\"p-1 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors\"\r\n          aria-label=\"Close\">\r\n          <i class=\"pi pi-times text-gray-500 dark:text-gray-400\"></i>\r\n        </button>\r\n      </div> -->\r\n\r\n      <!-- Content -->\r\n      <div class=\"flex-1 overflow-hidden\">\r\n        <p-tabs [value]=\"activeTabIndex\">\r\n          <!-- Configuration Tab -->\r\n            <p-tablist>\r\n        <p-tab value=\"0\">{{'CONFIGURATION' | translate}}</p-tab>\r\n        <p-tab value=\"1\">{{'PREVIEW' | translate}}</p-tab>\r\n    </p-tablist>\r\n    <p-tabpanels>\r\n          <p-tabpanel value=\"0\">\r\n            <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-6 p-4 max-h-[60vh] overflow-y-auto\">\r\n              <!-- Left Column - Export Settings -->\r\n              <div class=\"space-y-6\">\r\n                <!-- File Name -->\r\n                <div class=\"space-y-2\">\r\n                  <label class=\"block text-sm font-medium text-gray-700 dark:text-gray-300\">\r\n                    {{ 'FILE_NAME' | translate }}\r\n                  </label>\r\n                  <input\r\n                    type=\"text\"\r\n                    [(ngModel)]=\"fileName\"\r\n                    class=\"w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500\"\r\n                    [placeholder]=\"'ENTER_FILE_NAME' | translate\">\r\n                </div>\r\n\r\n                <!-- Export Type -->\r\n                <div class=\"space-y-3\">\r\n                  <label class=\"block text-sm font-medium text-gray-700 dark:text-gray-300\">\r\n                    {{ 'EXPORT_FORMAT' | translate }}\r\n                  </label>\r\n                  <div class=\"grid grid-cols-2 gap-3\">\r\n                    <div *ngFor=\"let type of exportTypes\" class=\"flex items-center\">\r\n                      <p-radioButton\r\n                        [name]=\"'exportType'\"\r\n                        [value]=\"type.value\"\r\n                        [(ngModel)]=\"exportType\"\r\n                        [inputId]=\"`${type.value}`\"\r\n                        (onClick)=\"onExportTypeChange(type.value)\"\r\n                        class=\"mr-3\">\r\n                      </p-radioButton>\r\n                      <label [for]=\"type.value\" class=\"flex items-center cursor-pointer text-sm text-gray-700 dark:text-gray-300\">\r\n                        <i [class]=\"type.icon + ' mr-2'\"></i>\r\n                        {{ type.label | translate }}\r\n                      </label>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n\r\n                <!-- Filters Section -->\r\n                <div class=\"space-y-3\">\r\n                  <div class=\"flex items-center justify-between\">\r\n                    <label class=\"block text-sm font-medium text-gray-700 dark:text-gray-300\">\r\n                      {{ 'SEARCH_FILTERS' | translate }}\r\n                    </label>\r\n                    <button\r\n                      type=\"button\"\r\n                      (click)=\"showFilters = !showFilters\"\r\n                      class=\"text-sm text-blue-600 dark:text-blue-400 hover:underline\">\r\n                      {{ showFilters ? ('HIDE_FILTERS' | translate) : ('SHOW_FILTERS' | translate) }}\r\n                    </button>\r\n                  </div>\r\n\r\n                  <!-- <div *ngIf=\"showFilters\" class=\"space-y-4 p-4 border border-gray-200 dark:border-gray-700 rounded-lg bg-gray-50 dark:bg-gray-800\">\r\n                    <formly-form\r\n                      [form]=\"form\"\r\n                      [fields]=\"fields_\"\r\n                      [model]=\"model\">\r\n                    </formly-form>\r\n                  </div> -->\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Right Column - Column Selection -->\r\n              <div class=\"space-y-4\">\r\n                <div class=\"flex items-center justify-between\">\r\n                  <label class=\"block text-sm font-medium text-gray-700 dark:text-gray-300\">\r\n                    {{ 'SELECT_COLUMNS' | translate }}\r\n                  </label>\r\n                  <div class=\"flex gap-2\">\r\n                    <button\r\n                      type=\"button\"\r\n                      (click)=\"selectAllColumns()\"\r\n                      class=\"text-xs text-blue-600 dark:text-blue-400 hover:underline\">\r\n                      {{ 'SELECT_ALL' | translate }}\r\n                    </button>\r\n                    <button\r\n                      type=\"button\"\r\n                      (click)=\"deselectAllColumns()\"\r\n                      class=\"text-xs text-blue-600 dark:text-blue-400 hover:underline\">\r\n                      {{ 'DESELECT_ALL' | translate }}\r\n                    </button>\r\n                  </div>\r\n                </div>\r\n\r\n                <div class=\"max-h-80 overflow-y-auto border border-gray-200 dark:border-gray-700 rounded-lg\">\r\n                  <div *ngFor=\"let column of availableColumns\" class=\"flex items-center p-3 border-b border-gray-100 dark:border-gray-600 last:border-b-0 hover:bg-gray-50 dark:hover:bg-gray-700\">\r\n                    <p-checkbox\r\n                      [binary]=\"true\"\r\n                      [(ngModel)]=\"column.selected\"\r\n                      [inputId]=\"column.key\"\r\n                      (onChange)=\"onColumnToggle(column)\"\r\n                      class=\"mr-3\">\r\n                    </p-checkbox>\r\n                    <label [for]=\"column.key\" class=\"flex-1 cursor-pointer text-sm text-gray-700 dark:text-gray-300\">\r\n                      {{ column.displayName }}\r\n                    </label>\r\n                    <div *ngIf=\"column.selected\" class=\"flex items-center gap-2\">\r\n                      <input\r\n                        type=\"text\"\r\n                        [(ngModel)]=\"column.customName\"\r\n                        (blur)=\"onCustomNameChange(column)\"\r\n                        [placeholder]=\"column.displayName\"\r\n                        class=\"text-xs p-1 border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-800 text-gray-900 dark:text-white w-32\"\r\n                        [title]=\"'CUSTOM_COLUMN_NAME' | translate\">\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n\r\n                <!-- Selected Columns Summary -->\r\n                <div *ngIf=\"selectedColumns.length > 0\" class=\"p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg\">\r\n                  <p class=\"text-sm text-blue-700 dark:text-blue-300\">\r\n                    {{ 'SELECTED_COLUMNS_COUNT' | translate: { count: selectedColumns.length } }}\r\n                  </p>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </p-tabpanel>\r\n\r\n          <!-- Preview Tab -->\r\n           <!-- [disabled]=\"selectedColumns.length === 0\" -->\r\n          <p-tabpanel value=\"1\" >\r\n            <div class=\"p-4 max-h-[60vh] overflow-y-auto\">\r\n              <!-- Preview Actions -->\r\n              <div class=\"flex justify-between items-center mb-4\">\r\n                <h3 class=\"text-lg font-semibold text-gray-900 dark:text-white\">\r\n                  {{ 'REPORT_PREVIEW' | translate }}\r\n                </h3>\r\n                <div class=\"flex gap-2\">\r\n                  <button\r\n                    *ngIf=\"exportType === 1 || exportType === 4\"\r\n                    (click)=\"printPreview()\"\r\n                    class=\"flex items-center px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors\">\r\n                    <i class=\"pi pi-print mr-2\"></i>\r\n                    {{ 'PRINT' | translate }}\r\n                  </button>\r\n                  <button\r\n                    (click)=\"generatePreview()\"\r\n                    class=\"flex items-center px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 transition-colors\">\r\n                    <i class=\"pi pi-refresh mr-2\"></i>\r\n                    {{ 'REFRESH_PREVIEW' | translate }}\r\n                  </button>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Preview Content -->\r\n              <div #previewContainer class=\"bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-6\">\r\n                <!-- Report Header -->\r\n                <div class=\"text-center mb-6 border-b border-gray-200 dark:border-gray-700 pb-4\">\r\n                  <h1 class=\"text-2xl font-bold text-gray-900 dark:text-white\">{{ fileName }}</h1>\r\n                  <p class=\"text-gray-600 dark:text-gray-400 mt-2\">\r\n                    {{ 'GENERATED_ON' | translate }}: {{ currentDate | date:'medium' }}\r\n                  </p>\r\n                </div>\r\n\r\n                <!-- Report Table -->\r\n                <div class=\"overflow-x-auto\">\r\n                  <table class=\"min-w-full divide-y divide-gray-200 dark:divide-gray-700\">\r\n                    <thead class=\"bg-gray-50 dark:bg-gray-700\">\r\n                      <tr>\r\n                        <th\r\n                          *ngFor=\"let column of selectedColumns\"\r\n                          class=\"px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider border border-gray-200 dark:border-gray-600\">\r\n                          {{ column.customName || column.displayName }}\r\n                        </th>\r\n                      </tr>\r\n                    </thead>\r\n                    <tbody class=\"bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700\">\r\n                      <tr *ngFor=\"let row of previewData; let i = index\"\r\n                          [class.bg-gray-50]=\"i % 2 === 0\"\r\n                          [class.dark:bg-gray-900]=\"i % 2 === 0\">\r\n                        <td\r\n                          *ngFor=\"let column of selectedColumns\"\r\n                          class=\"px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white border border-gray-200 dark:border-gray-600\">\r\n                          {{ getPreviewValue(row, column.key) }}\r\n                        </td>\r\n                      </tr>\r\n                    </tbody>\r\n                  </table>\r\n                </div>\r\n\r\n                <!-- Empty State -->\r\n                <div *ngIf=\"previewData.length === 0\" class=\"text-center py-8\">\r\n                  <i class=\"pi pi-inbox text-4xl text-gray-400 dark:text-gray-500 mb-4\"></i>\r\n                  <p class=\"text-gray-500 dark:text-gray-400\">{{ 'NO_PREVIEW_DATA' | translate }}</p>\r\n                  <button\r\n                    (click)=\"generatePreview()\"\r\n                    class=\"mt-4 px-4 py-2 text-sm font-medium text-blue-600 dark:text-blue-400 hover:underline\">\r\n                    {{ 'GENERATE_PREVIEW' | translate }}\r\n                  </button>\r\n                </div>\r\n\r\n                <!-- Report Footer -->\r\n                <div class=\"text-center mt-6 border-t border-gray-200 dark:border-gray-700 pt-4\">\r\n                  <p class=\"text-sm text-gray-500 dark:text-gray-400\">\r\n                    {{ 'PAGE' | translate }} 1 of 1\r\n                  </p>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Preview Info -->\r\n              <div class=\"mt-4 p-3 bg-green-50 dark:bg-green-900/20 rounded-lg\">\r\n                <p class=\"text-sm text-green-700 dark:text-green-300\">\r\n                  <i class=\"pi pi-info-circle mr-2\"></i>\r\n                  {{ 'PREVIEW_INFO' | translate }}\r\n                </p>\r\n              </div>\r\n            </div>\r\n          </p-tabpanel>\r\n\r\n          </p-tabpanels>\r\n        </p-tabs>\r\n      </div>\r\n\r\n      <!-- Footer -->\r\n      <div class=\"border-t border-gray-200 dark:border-gray-700 px-6 py-4 bg-gray-50 dark:bg-gray-800\">\r\n        <div class=\"flex justify-between items-center\">\r\n          <button\r\n            type=\"button\"\r\n            (click)=\"onReset()\"\r\n            class=\"flex items-center px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors\"\r\n            [disabled]=\"loading\">\r\n            <i class=\"pi pi-refresh ml-2\"></i>\r\n            {{ 'RESET' | translate }}\r\n          </button>\r\n\r\n          <div class=\"flex gap-2\">\r\n            <button\r\n              type=\"button\"\r\n              (click)=\"ref?.close()\"\r\n              class=\"px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors\"\r\n              [disabled]=\"loading\">\r\n              {{ 'CANCEL' | translate }}\r\n            </button>\r\n\r\n            <button\r\n              type=\"button\"\r\n              (click)=\"onExport()\"\r\n              [disabled]=\"loading || selectedColumns.length === 0\"\r\n              class=\"flex items-center px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 disabled:bg-gray-300 disabled:cursor-not-allowed transition-colors\">\r\n              <i class=\"pi pi-download ml-2\" [class.animate-spin]=\"loading\"></i>\r\n              {{ getExportButtonText() }}\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n @if(showFilters){\r\n<p-drawer\r\n  [(visible)]=\"showFilters\"\r\n  position=\"right\"\r\n  [styleClass]=\"'!w-full md:!w-80 lg:!w-[40rem] !h-full' \"\r\n  [modal]=\"true\"\r\n  [dismissible]=\"true\"\r\n  styleClass=\"p-4 w-full max-w-md max-h-[90vh] flex flex-col\"\r\n>\r\n  <!-- Entire form wrapper -->\r\n  <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit(); showFilters=false\" class=\"flex flex-col flex-1\">\r\n    <!-- Scrollable Form -->\r\n    <div class=\"flex-1 overflow-auto\">\r\n      <formly-form\r\n        [form]=\"form\"\r\n        [fields]=\"fields_\"\r\n        [model]=\"model\"\r\n        [options]=\"options\"\r\n      >\r\n      </formly-form>\r\n    </div>\r\n\r\n  </form>\r\n  <!-- Action Buttons -->\r\n      <ng-template pTemplate=\"footer\">\r\n    <div class=\"flex justify-end mt-2 space-x-2 flex-none\">\r\n      <button\r\n      type=\"submit\"\r\n       pButton size=\"small\"\r\n        (click)=\" onSubmit(); showFilters=false\"\r\n       label=\"{{ 'SEARCH' | translate }}\">\r\n      </button>\r\n      <button\r\n        type=\"button\"\r\n        pButton\r\n        size=\"small\"\r\n        class=\"p-button-text\"\r\n        (click)=\"onReset(); showFilters=false\"\r\n      >\r\n        {{ 'CLEAR' | translate }}\r\n      </button>\r\n    </div>\r\n    </ng-template>\r\n</p-drawer>\r\n\r\n }\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i4.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "directive", type: i5.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: DialogModule }, { kind: "ngmodule", type: SelectModule }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: RadioButtonModule }, { kind: "component", type: i6.RadioButton, selector: "p-radioButton, p-radiobutton, p-radio-button", inputs: ["value", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "styleClass", "autofocus", "binary", "variant", "size"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i7.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: CardModule }, { kind: "ngmodule", type: DividerModule }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i8.Tabs, selector: "p-tabs", inputs: ["value", "scrollable", "lazy", "selectOnFocus", "showNavigators", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: i8.TabPanels, selector: "p-tabpanels" }, { kind: "component", type: i8.TabPanel, selector: "p-tabpanel", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: i8.TabList, selector: "p-tablist" }, { kind: "component", type: i8.Tab, selector: "p-tab", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i9.LegacyFormlyForm, selector: "formly-form" }, { kind: "ngmodule", type: DynamicDialogModule }, { kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i10.Drawer, selector: "p-drawer", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: i11.TranslatePipe, name: "translate" }] });
+    cleanHtmlContent(html) {
+        return html
+            .replace(/\\r\\n/g, '\n')
+            .replace(/\\"/g, '"')
+            .replace(/\\t/g, ' ')
+            .trim();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: GenericReportComponent, deps: [{ token: i1$1.DynamicDialogRef }, { token: i1$1.DynamicDialogConfig }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.8", type: GenericReportComponent, isStandalone: true, selector: "app-generic-report", inputs: { filterFields: "filterFields", enableQueryBuilder: "enableQueryBuilder", localExport: "localExport", queryString: "queryString", apiName: "apiName", model: "model" }, providers: [DialogService, RestService], viewQueries: [{ propertyName: "previewContainer", first: true, predicate: ["previewContainer"], descendants: true }], ngImport: i0, template: "<!-- class=\"flex flex-col h-full bg-white dark:bg-gray-900 rounded-lg max-w-6xl mx-auto\" -->\r\n<div >\r\n  <!-- Content -->\r\n  <div class=\"flex-1 overflow-hidden p-2\">\r\n\r\n    <!-- Preview Actions -->\r\n    <div class=\"flex justify-between items-center mb-6 p-2 bg-white rounded-lg\">\r\n      <h3 class=\"text-lg font-semibold text-gray-900 dark:text-white\">\r\n        {{ 'REPORT' | translate }}\r\n      </h3>\r\n      <div class=\"flex gap-2\">\r\n        <!-- Filters Button -->\r\n        <button\r\n          type=\"button\"\r\n          (click)=\"showFilters = !showFilters\"\r\n          class=\"flex items-center px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors\"\r\n          [pTooltip]=\"'SEARCH_FILTERS' | translate\">\r\n          <i class=\"pi pi-filter\"></i>\r\n          <span *ngIf=\"filterCount > 0\" class=\"ml-2 bg-blue-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center\">\r\n            {{ filterCount }}\r\n          </span>\r\n        </button>\r\n\r\n        <!-- Refresh Preview -->\r\n        <button\r\n          (click)=\"generatePreview()\"\r\n          [disabled]=\"loading\"\r\n          class=\"flex items-center px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 disabled:bg-gray-300 disabled:cursor-not-allowed transition-colors\"\r\n          [pTooltip]=\"'REFRESH' | translate\">\r\n          <i class=\"pi pi-refresh mr-2 ml-2\" [class.animate-spin]=\"loading\"></i>\r\n          {{ 'REFRESH' | translate }}\r\n        </button>\r\n\r\n        <!-- Print Button -->\r\n        <button\r\n          *ngIf=\"exportType === 4 || exportType === 1 || exportType === 2\"\r\n          (click)=\"print()\"\r\n          class=\"flex items-center px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors\"\r\n          [pTooltip]=\"'PRINT' | translate\">\r\n          <i class=\"pi pi-print mr-2 ml-2\"></i>\r\n          {{ 'PRINT' | translate }}\r\n        </button>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Preview Content -->\r\n    <div #previewContainer class=\"bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg\">\r\n      <!-- HTML Export Preview (Iframe) -->\r\n      <div *ngIf=\"showHtmlInIframe && htmlExportContent || showPdfModal\" class=\"html-export-preview\">\r\n        <iframe\r\n          id=\"reportIframe\"\r\n          class=\"w-full border border-gray-300 dark:border-gray-600 rounded-b-lg\"\r\n          [style.height]=\"'600px'\"\r\n          title=\"HTML Export Preview\"\r\n          [src]=\"currentPdfUrl\"\r\n            width=\"100%\"\r\n            height=\"100%\"\r\n            frameborder=\"0\"\r\n            allowfullscreen\r\n\r\n          >\r\n          <!--  allowfullscreen -->\r\n        </iframe>\r\n      </div>\r\n      <!-- <app-pdf-modal\r\n  *ngIf=\"showPdfModal\"\r\n  [pdfUrl]=\"currentPdfUrl\"\r\n  [fileName]=\"currentFileName\"\r\n  (closed)=\"onPdfModalClose()\"\r\n  (downloadRequested)=\"onPdfDownload()\">\r\n</app-pdf-modal> -->\r\n\r\n      <!-- Regular Preview Table -->\r\n      <!-- <div *ngIf=\"!showHtmlInIframe\" class=\"p-4\">\r\n        <p-table\r\n          [value]=\"previewData\"\r\n          [columns]=\"previewColumns\"\r\n          [paginator]=\"true\"\r\n          [rows]=\"10\"\r\n          [showCurrentPageReport]=\"true\"\r\n          currentPageReportTemplate=\"Showing {first} to {last} of {totalRecords} entries\"\r\n          styleClass=\"p-datatable-sm\">\r\n          <ng-template pTemplate=\"header\">\r\n            <tr>\r\n              <th *ngFor=\"let col of previewColumns\" class=\"text-left\">\r\n                {{ col.header }}\r\n              </th>\r\n            </tr>\r\n          </ng-template>\r\n          <ng-template pTemplate=\"body\" let-rowData>\r\n            <tr>\r\n              <td *ngFor=\"let col of previewColumns\" class=\"text-left\">\r\n                {{ rowData[col.field] }}\r\n              </td>\r\n            </tr>\r\n          </ng-template>\r\n          <ng-template pTemplate=\"emptymessage\">\r\n            <tr>\r\n              <td [attr.colspan]=\"previewColumns.length\" class=\"text-center py-4\">\r\n                <div class=\"text-center py-8\">\r\n                  <i class=\"pi pi-inbox text-4xl text-gray-400 dark:text-gray-500 mb-4\"></i>\r\n                  <p class=\"text-gray-500 dark:text-gray-400\">{{ 'NO_PREVIEW_DATA' | translate }}</p>\r\n                </div>\r\n              </td>\r\n            </tr>\r\n          </ng-template>\r\n        </p-table>\r\n      </div> -->\r\n    </div>\r\n\r\n    <!-- <div class=\"mt-4 p-3 bg-green-50 dark:bg-green-900/20 rounded-lg\">\r\n      <p class=\"text-sm text-green-700 dark:text-green-300\">\r\n        <i class=\"pi pi-info-circle mr-2\"></i>\r\n        {{ 'PREVIEW_INFO' | translate }}\r\n      </p>\r\n    </div> -->\r\n  </div>\r\n\r\n  <!-- Footer -->\r\n  <div class=\"border-t border-gray-200 dark:border-gray-700 px-2 py-2 bg-gray-50 dark:bg-gray-800\">\r\n    <div class=\"flex justify-between items-center\">\r\n      <button\r\n        type=\"button\"\r\n        (click)=\"onReset()\"\r\n        class=\"flex items-center px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors\"\r\n        [disabled]=\"loading\">\r\n        <i class=\"pi pi-refresh mr-2\"></i>\r\n        {{ 'RESET' | translate }}\r\n      </button>\r\n\r\n      <div class=\"flex gap-2\">\r\n        <button\r\n          type=\"button\"\r\n          (click)=\"ref?.close()\"\r\n          class=\"px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors\"\r\n          [disabled]=\"loading\">\r\n          {{ 'CANCEL' | translate }}\r\n        </button>\r\n\r\n        <!-- SplitButton for Export -->\r\n         <!-- || previewData.length === 0 -->\r\n        <p-splitButton\r\n          [label]=\"getExportButtonText()\"\r\n          [icon]=\"getCurrentExportTypeIcon()\"\r\n          [model]=\"exportMenuItems\"\r\n          (onClick)=\"onExport()\"\r\n          [disabled]=\"loading\"\r\n          styleClass=\"p-button-primary\">\r\n        </p-splitButton>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Filters Drawer -->\r\n  @if(showFilters){\r\n  <p-drawer\r\n    [(visible)]=\"showFilters\"\r\n    position=\"right\"\r\n    [styleClass]=\"'!w-full md:!w-80 lg:!w-[40rem] !h-full' \"\r\n    [modal]=\"true\"\r\n    [dismissible]=\"true\"\r\n    styleClass=\"p-4 w-full max-w-md max-h-[90vh] flex flex-col\">\r\n    <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit(); showFilters=false\" class=\"flex flex-col flex-1\">\r\n      <div class=\"flex-1 overflow-auto\">\r\n        <formly-form\r\n          [form]=\"form\"\r\n          [fields]=\"fields_\"\r\n          [model]=\"model\"\r\n          [options]=\"options\">\r\n        </formly-form>\r\n      </div>\r\n    </form>\r\n    <ng-template pTemplate=\"footer\">\r\n      <div class=\"flex justify-end mt-2 space-x-2 flex-none\">\r\n        <button\r\n          type=\"submit\"\r\n          pButton size=\"small\"\r\n          (click)=\" onSubmit(); showFilters=false\"\r\n          label=\"{{ 'SEARCH' | translate }}\">\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          pButton\r\n          size=\"small\"\r\n          class=\"p-button-text\"\r\n          (click)=\"onReset(); showFilters=false\">\r\n          {{ 'CLEAR' | translate }}\r\n        </button>\r\n      </div>\r\n    </ng-template>\r\n  </p-drawer>\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "directive", type: i5.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: DialogModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: RadioButtonModule }, { kind: "ngmodule", type: CheckboxModule }, { kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i6.Drawer, selector: "p-drawer", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "component", type: FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "ngmodule", type: TableModule }, { kind: "ngmodule", type: SplitButtonModule }, { kind: "component", type: i7.SplitButton, selector: "p-splitbutton, p-splitButton, p-split-button", inputs: ["model", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "icon", "iconPos", "label", "tooltip", "tooltipOptions", "styleClass", "menuStyle", "menuStyleClass", "dropdownIcon", "appendTo", "dir", "expandAriaLabel", "showTransitionOptions", "hideTransitionOptions", "buttonProps", "menuButtonProps", "autofocus", "disabled", "tabindex", "menuButtonDisabled", "buttonDisabled"], outputs: ["onClick", "onMenuHide", "onMenuShow", "onDropdownClick"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i8.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: GenericReportComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-generic-report', providers: [DialogService], imports: [
+            args: [{ selector: 'app-generic-report', imports: [
                         CommonModule,
                         ReactiveFormsModule,
                         FormsModule,
                         TranslateModule,
                         ButtonModule,
                         DialogModule,
-                        SelectModule,
-                        MultiSelectModule,
                         InputTextModule,
                         RadioButtonModule,
                         CheckboxModule,
-                        CardModule,
-                        DividerModule,
-                        TabsModule,
-                        FormlyModule,
-                        DynamicDialogModule,
-                        DrawerModule
-                    ], template: "\r\n    <div class=\"flex flex-col h-full bg-white dark:bg-gray-900 rounded-lg max-w-6xl mx-auto\">\r\n      <!-- Header -->\r\n      <!-- <div class=\"flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700\">\r\n        <h2 class=\"text-lg font-semibold text-gray-900 dark:text-white\">\r\n          {{ 'EXPORT_DATA' | translate }}\r\n        </h2>\r\n        <button\r\n          (click)=\"ref?.close()\"\r\n          class=\"p-1 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors\"\r\n          aria-label=\"Close\">\r\n          <i class=\"pi pi-times text-gray-500 dark:text-gray-400\"></i>\r\n        </button>\r\n      </div> -->\r\n\r\n      <!-- Content -->\r\n      <div class=\"flex-1 overflow-hidden\">\r\n        <p-tabs [value]=\"activeTabIndex\">\r\n          <!-- Configuration Tab -->\r\n            <p-tablist>\r\n        <p-tab value=\"0\">{{'CONFIGURATION' | translate}}</p-tab>\r\n        <p-tab value=\"1\">{{'PREVIEW' | translate}}</p-tab>\r\n    </p-tablist>\r\n    <p-tabpanels>\r\n          <p-tabpanel value=\"0\">\r\n            <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-6 p-4 max-h-[60vh] overflow-y-auto\">\r\n              <!-- Left Column - Export Settings -->\r\n              <div class=\"space-y-6\">\r\n                <!-- File Name -->\r\n                <div class=\"space-y-2\">\r\n                  <label class=\"block text-sm font-medium text-gray-700 dark:text-gray-300\">\r\n                    {{ 'FILE_NAME' | translate }}\r\n                  </label>\r\n                  <input\r\n                    type=\"text\"\r\n                    [(ngModel)]=\"fileName\"\r\n                    class=\"w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500\"\r\n                    [placeholder]=\"'ENTER_FILE_NAME' | translate\">\r\n                </div>\r\n\r\n                <!-- Export Type -->\r\n                <div class=\"space-y-3\">\r\n                  <label class=\"block text-sm font-medium text-gray-700 dark:text-gray-300\">\r\n                    {{ 'EXPORT_FORMAT' | translate }}\r\n                  </label>\r\n                  <div class=\"grid grid-cols-2 gap-3\">\r\n                    <div *ngFor=\"let type of exportTypes\" class=\"flex items-center\">\r\n                      <p-radioButton\r\n                        [name]=\"'exportType'\"\r\n                        [value]=\"type.value\"\r\n                        [(ngModel)]=\"exportType\"\r\n                        [inputId]=\"`${type.value}`\"\r\n                        (onClick)=\"onExportTypeChange(type.value)\"\r\n                        class=\"mr-3\">\r\n                      </p-radioButton>\r\n                      <label [for]=\"type.value\" class=\"flex items-center cursor-pointer text-sm text-gray-700 dark:text-gray-300\">\r\n                        <i [class]=\"type.icon + ' mr-2'\"></i>\r\n                        {{ type.label | translate }}\r\n                      </label>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n\r\n                <!-- Filters Section -->\r\n                <div class=\"space-y-3\">\r\n                  <div class=\"flex items-center justify-between\">\r\n                    <label class=\"block text-sm font-medium text-gray-700 dark:text-gray-300\">\r\n                      {{ 'SEARCH_FILTERS' | translate }}\r\n                    </label>\r\n                    <button\r\n                      type=\"button\"\r\n                      (click)=\"showFilters = !showFilters\"\r\n                      class=\"text-sm text-blue-600 dark:text-blue-400 hover:underline\">\r\n                      {{ showFilters ? ('HIDE_FILTERS' | translate) : ('SHOW_FILTERS' | translate) }}\r\n                    </button>\r\n                  </div>\r\n\r\n                  <!-- <div *ngIf=\"showFilters\" class=\"space-y-4 p-4 border border-gray-200 dark:border-gray-700 rounded-lg bg-gray-50 dark:bg-gray-800\">\r\n                    <formly-form\r\n                      [form]=\"form\"\r\n                      [fields]=\"fields_\"\r\n                      [model]=\"model\">\r\n                    </formly-form>\r\n                  </div> -->\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Right Column - Column Selection -->\r\n              <div class=\"space-y-4\">\r\n                <div class=\"flex items-center justify-between\">\r\n                  <label class=\"block text-sm font-medium text-gray-700 dark:text-gray-300\">\r\n                    {{ 'SELECT_COLUMNS' | translate }}\r\n                  </label>\r\n                  <div class=\"flex gap-2\">\r\n                    <button\r\n                      type=\"button\"\r\n                      (click)=\"selectAllColumns()\"\r\n                      class=\"text-xs text-blue-600 dark:text-blue-400 hover:underline\">\r\n                      {{ 'SELECT_ALL' | translate }}\r\n                    </button>\r\n                    <button\r\n                      type=\"button\"\r\n                      (click)=\"deselectAllColumns()\"\r\n                      class=\"text-xs text-blue-600 dark:text-blue-400 hover:underline\">\r\n                      {{ 'DESELECT_ALL' | translate }}\r\n                    </button>\r\n                  </div>\r\n                </div>\r\n\r\n                <div class=\"max-h-80 overflow-y-auto border border-gray-200 dark:border-gray-700 rounded-lg\">\r\n                  <div *ngFor=\"let column of availableColumns\" class=\"flex items-center p-3 border-b border-gray-100 dark:border-gray-600 last:border-b-0 hover:bg-gray-50 dark:hover:bg-gray-700\">\r\n                    <p-checkbox\r\n                      [binary]=\"true\"\r\n                      [(ngModel)]=\"column.selected\"\r\n                      [inputId]=\"column.key\"\r\n                      (onChange)=\"onColumnToggle(column)\"\r\n                      class=\"mr-3\">\r\n                    </p-checkbox>\r\n                    <label [for]=\"column.key\" class=\"flex-1 cursor-pointer text-sm text-gray-700 dark:text-gray-300\">\r\n                      {{ column.displayName }}\r\n                    </label>\r\n                    <div *ngIf=\"column.selected\" class=\"flex items-center gap-2\">\r\n                      <input\r\n                        type=\"text\"\r\n                        [(ngModel)]=\"column.customName\"\r\n                        (blur)=\"onCustomNameChange(column)\"\r\n                        [placeholder]=\"column.displayName\"\r\n                        class=\"text-xs p-1 border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-800 text-gray-900 dark:text-white w-32\"\r\n                        [title]=\"'CUSTOM_COLUMN_NAME' | translate\">\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n\r\n                <!-- Selected Columns Summary -->\r\n                <div *ngIf=\"selectedColumns.length > 0\" class=\"p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg\">\r\n                  <p class=\"text-sm text-blue-700 dark:text-blue-300\">\r\n                    {{ 'SELECTED_COLUMNS_COUNT' | translate: { count: selectedColumns.length } }}\r\n                  </p>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </p-tabpanel>\r\n\r\n          <!-- Preview Tab -->\r\n           <!-- [disabled]=\"selectedColumns.length === 0\" -->\r\n          <p-tabpanel value=\"1\" >\r\n            <div class=\"p-4 max-h-[60vh] overflow-y-auto\">\r\n              <!-- Preview Actions -->\r\n              <div class=\"flex justify-between items-center mb-4\">\r\n                <h3 class=\"text-lg font-semibold text-gray-900 dark:text-white\">\r\n                  {{ 'REPORT_PREVIEW' | translate }}\r\n                </h3>\r\n                <div class=\"flex gap-2\">\r\n                  <button\r\n                    *ngIf=\"exportType === 1 || exportType === 4\"\r\n                    (click)=\"printPreview()\"\r\n                    class=\"flex items-center px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors\">\r\n                    <i class=\"pi pi-print mr-2\"></i>\r\n                    {{ 'PRINT' | translate }}\r\n                  </button>\r\n                  <button\r\n                    (click)=\"generatePreview()\"\r\n                    class=\"flex items-center px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 transition-colors\">\r\n                    <i class=\"pi pi-refresh mr-2\"></i>\r\n                    {{ 'REFRESH_PREVIEW' | translate }}\r\n                  </button>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Preview Content -->\r\n              <div #previewContainer class=\"bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-6\">\r\n                <!-- Report Header -->\r\n                <div class=\"text-center mb-6 border-b border-gray-200 dark:border-gray-700 pb-4\">\r\n                  <h1 class=\"text-2xl font-bold text-gray-900 dark:text-white\">{{ fileName }}</h1>\r\n                  <p class=\"text-gray-600 dark:text-gray-400 mt-2\">\r\n                    {{ 'GENERATED_ON' | translate }}: {{ currentDate | date:'medium' }}\r\n                  </p>\r\n                </div>\r\n\r\n                <!-- Report Table -->\r\n                <div class=\"overflow-x-auto\">\r\n                  <table class=\"min-w-full divide-y divide-gray-200 dark:divide-gray-700\">\r\n                    <thead class=\"bg-gray-50 dark:bg-gray-700\">\r\n                      <tr>\r\n                        <th\r\n                          *ngFor=\"let column of selectedColumns\"\r\n                          class=\"px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider border border-gray-200 dark:border-gray-600\">\r\n                          {{ column.customName || column.displayName }}\r\n                        </th>\r\n                      </tr>\r\n                    </thead>\r\n                    <tbody class=\"bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700\">\r\n                      <tr *ngFor=\"let row of previewData; let i = index\"\r\n                          [class.bg-gray-50]=\"i % 2 === 0\"\r\n                          [class.dark:bg-gray-900]=\"i % 2 === 0\">\r\n                        <td\r\n                          *ngFor=\"let column of selectedColumns\"\r\n                          class=\"px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white border border-gray-200 dark:border-gray-600\">\r\n                          {{ getPreviewValue(row, column.key) }}\r\n                        </td>\r\n                      </tr>\r\n                    </tbody>\r\n                  </table>\r\n                </div>\r\n\r\n                <!-- Empty State -->\r\n                <div *ngIf=\"previewData.length === 0\" class=\"text-center py-8\">\r\n                  <i class=\"pi pi-inbox text-4xl text-gray-400 dark:text-gray-500 mb-4\"></i>\r\n                  <p class=\"text-gray-500 dark:text-gray-400\">{{ 'NO_PREVIEW_DATA' | translate }}</p>\r\n                  <button\r\n                    (click)=\"generatePreview()\"\r\n                    class=\"mt-4 px-4 py-2 text-sm font-medium text-blue-600 dark:text-blue-400 hover:underline\">\r\n                    {{ 'GENERATE_PREVIEW' | translate }}\r\n                  </button>\r\n                </div>\r\n\r\n                <!-- Report Footer -->\r\n                <div class=\"text-center mt-6 border-t border-gray-200 dark:border-gray-700 pt-4\">\r\n                  <p class=\"text-sm text-gray-500 dark:text-gray-400\">\r\n                    {{ 'PAGE' | translate }} 1 of 1\r\n                  </p>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Preview Info -->\r\n              <div class=\"mt-4 p-3 bg-green-50 dark:bg-green-900/20 rounded-lg\">\r\n                <p class=\"text-sm text-green-700 dark:text-green-300\">\r\n                  <i class=\"pi pi-info-circle mr-2\"></i>\r\n                  {{ 'PREVIEW_INFO' | translate }}\r\n                </p>\r\n              </div>\r\n            </div>\r\n          </p-tabpanel>\r\n\r\n          </p-tabpanels>\r\n        </p-tabs>\r\n      </div>\r\n\r\n      <!-- Footer -->\r\n      <div class=\"border-t border-gray-200 dark:border-gray-700 px-6 py-4 bg-gray-50 dark:bg-gray-800\">\r\n        <div class=\"flex justify-between items-center\">\r\n          <button\r\n            type=\"button\"\r\n            (click)=\"onReset()\"\r\n            class=\"flex items-center px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors\"\r\n            [disabled]=\"loading\">\r\n            <i class=\"pi pi-refresh ml-2\"></i>\r\n            {{ 'RESET' | translate }}\r\n          </button>\r\n\r\n          <div class=\"flex gap-2\">\r\n            <button\r\n              type=\"button\"\r\n              (click)=\"ref?.close()\"\r\n              class=\"px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors\"\r\n              [disabled]=\"loading\">\r\n              {{ 'CANCEL' | translate }}\r\n            </button>\r\n\r\n            <button\r\n              type=\"button\"\r\n              (click)=\"onExport()\"\r\n              [disabled]=\"loading || selectedColumns.length === 0\"\r\n              class=\"flex items-center px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 disabled:bg-gray-300 disabled:cursor-not-allowed transition-colors\">\r\n              <i class=\"pi pi-download ml-2\" [class.animate-spin]=\"loading\"></i>\r\n              {{ getExportButtonText() }}\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n @if(showFilters){\r\n<p-drawer\r\n  [(visible)]=\"showFilters\"\r\n  position=\"right\"\r\n  [styleClass]=\"'!w-full md:!w-80 lg:!w-[40rem] !h-full' \"\r\n  [modal]=\"true\"\r\n  [dismissible]=\"true\"\r\n  styleClass=\"p-4 w-full max-w-md max-h-[90vh] flex flex-col\"\r\n>\r\n  <!-- Entire form wrapper -->\r\n  <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit(); showFilters=false\" class=\"flex flex-col flex-1\">\r\n    <!-- Scrollable Form -->\r\n    <div class=\"flex-1 overflow-auto\">\r\n      <formly-form\r\n        [form]=\"form\"\r\n        [fields]=\"fields_\"\r\n        [model]=\"model\"\r\n        [options]=\"options\"\r\n      >\r\n      </formly-form>\r\n    </div>\r\n\r\n  </form>\r\n  <!-- Action Buttons -->\r\n      <ng-template pTemplate=\"footer\">\r\n    <div class=\"flex justify-end mt-2 space-x-2 flex-none\">\r\n      <button\r\n      type=\"submit\"\r\n       pButton size=\"small\"\r\n        (click)=\" onSubmit(); showFilters=false\"\r\n       label=\"{{ 'SEARCH' | translate }}\">\r\n      </button>\r\n      <button\r\n        type=\"button\"\r\n        pButton\r\n        size=\"small\"\r\n        class=\"p-button-text\"\r\n        (click)=\"onReset(); showFilters=false\"\r\n      >\r\n        {{ 'CLEAR' | translate }}\r\n      </button>\r\n    </div>\r\n    </ng-template>\r\n</p-drawer>\r\n\r\n }\r\n" }]
-        }], ctorParameters: () => [{ type: i1.DynamicDialogRef }, { type: i1.DynamicDialogConfig }], propDecorators: { previewContainer: [{
+                        DrawerModule,
+                        FormlyForm,
+                        TableModule,
+                        SplitButtonModule,
+                        TooltipModule,
+                    ], providers: [DialogService, RestService], template: "<!-- class=\"flex flex-col h-full bg-white dark:bg-gray-900 rounded-lg max-w-6xl mx-auto\" -->\r\n<div >\r\n  <!-- Content -->\r\n  <div class=\"flex-1 overflow-hidden p-2\">\r\n\r\n    <!-- Preview Actions -->\r\n    <div class=\"flex justify-between items-center mb-6 p-2 bg-white rounded-lg\">\r\n      <h3 class=\"text-lg font-semibold text-gray-900 dark:text-white\">\r\n        {{ 'REPORT' | translate }}\r\n      </h3>\r\n      <div class=\"flex gap-2\">\r\n        <!-- Filters Button -->\r\n        <button\r\n          type=\"button\"\r\n          (click)=\"showFilters = !showFilters\"\r\n          class=\"flex items-center px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors\"\r\n          [pTooltip]=\"'SEARCH_FILTERS' | translate\">\r\n          <i class=\"pi pi-filter\"></i>\r\n          <span *ngIf=\"filterCount > 0\" class=\"ml-2 bg-blue-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center\">\r\n            {{ filterCount }}\r\n          </span>\r\n        </button>\r\n\r\n        <!-- Refresh Preview -->\r\n        <button\r\n          (click)=\"generatePreview()\"\r\n          [disabled]=\"loading\"\r\n          class=\"flex items-center px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 disabled:bg-gray-300 disabled:cursor-not-allowed transition-colors\"\r\n          [pTooltip]=\"'REFRESH' | translate\">\r\n          <i class=\"pi pi-refresh mr-2 ml-2\" [class.animate-spin]=\"loading\"></i>\r\n          {{ 'REFRESH' | translate }}\r\n        </button>\r\n\r\n        <!-- Print Button -->\r\n        <button\r\n          *ngIf=\"exportType === 4 || exportType === 1 || exportType === 2\"\r\n          (click)=\"print()\"\r\n          class=\"flex items-center px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors\"\r\n          [pTooltip]=\"'PRINT' | translate\">\r\n          <i class=\"pi pi-print mr-2 ml-2\"></i>\r\n          {{ 'PRINT' | translate }}\r\n        </button>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Preview Content -->\r\n    <div #previewContainer class=\"bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg\">\r\n      <!-- HTML Export Preview (Iframe) -->\r\n      <div *ngIf=\"showHtmlInIframe && htmlExportContent || showPdfModal\" class=\"html-export-preview\">\r\n        <iframe\r\n          id=\"reportIframe\"\r\n          class=\"w-full border border-gray-300 dark:border-gray-600 rounded-b-lg\"\r\n          [style.height]=\"'600px'\"\r\n          title=\"HTML Export Preview\"\r\n          [src]=\"currentPdfUrl\"\r\n            width=\"100%\"\r\n            height=\"100%\"\r\n            frameborder=\"0\"\r\n            allowfullscreen\r\n\r\n          >\r\n          <!--  allowfullscreen -->\r\n        </iframe>\r\n      </div>\r\n      <!-- <app-pdf-modal\r\n  *ngIf=\"showPdfModal\"\r\n  [pdfUrl]=\"currentPdfUrl\"\r\n  [fileName]=\"currentFileName\"\r\n  (closed)=\"onPdfModalClose()\"\r\n  (downloadRequested)=\"onPdfDownload()\">\r\n</app-pdf-modal> -->\r\n\r\n      <!-- Regular Preview Table -->\r\n      <!-- <div *ngIf=\"!showHtmlInIframe\" class=\"p-4\">\r\n        <p-table\r\n          [value]=\"previewData\"\r\n          [columns]=\"previewColumns\"\r\n          [paginator]=\"true\"\r\n          [rows]=\"10\"\r\n          [showCurrentPageReport]=\"true\"\r\n          currentPageReportTemplate=\"Showing {first} to {last} of {totalRecords} entries\"\r\n          styleClass=\"p-datatable-sm\">\r\n          <ng-template pTemplate=\"header\">\r\n            <tr>\r\n              <th *ngFor=\"let col of previewColumns\" class=\"text-left\">\r\n                {{ col.header }}\r\n              </th>\r\n            </tr>\r\n          </ng-template>\r\n          <ng-template pTemplate=\"body\" let-rowData>\r\n            <tr>\r\n              <td *ngFor=\"let col of previewColumns\" class=\"text-left\">\r\n                {{ rowData[col.field] }}\r\n              </td>\r\n            </tr>\r\n          </ng-template>\r\n          <ng-template pTemplate=\"emptymessage\">\r\n            <tr>\r\n              <td [attr.colspan]=\"previewColumns.length\" class=\"text-center py-4\">\r\n                <div class=\"text-center py-8\">\r\n                  <i class=\"pi pi-inbox text-4xl text-gray-400 dark:text-gray-500 mb-4\"></i>\r\n                  <p class=\"text-gray-500 dark:text-gray-400\">{{ 'NO_PREVIEW_DATA' | translate }}</p>\r\n                </div>\r\n              </td>\r\n            </tr>\r\n          </ng-template>\r\n        </p-table>\r\n      </div> -->\r\n    </div>\r\n\r\n    <!-- <div class=\"mt-4 p-3 bg-green-50 dark:bg-green-900/20 rounded-lg\">\r\n      <p class=\"text-sm text-green-700 dark:text-green-300\">\r\n        <i class=\"pi pi-info-circle mr-2\"></i>\r\n        {{ 'PREVIEW_INFO' | translate }}\r\n      </p>\r\n    </div> -->\r\n  </div>\r\n\r\n  <!-- Footer -->\r\n  <div class=\"border-t border-gray-200 dark:border-gray-700 px-2 py-2 bg-gray-50 dark:bg-gray-800\">\r\n    <div class=\"flex justify-between items-center\">\r\n      <button\r\n        type=\"button\"\r\n        (click)=\"onReset()\"\r\n        class=\"flex items-center px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors\"\r\n        [disabled]=\"loading\">\r\n        <i class=\"pi pi-refresh mr-2\"></i>\r\n        {{ 'RESET' | translate }}\r\n      </button>\r\n\r\n      <div class=\"flex gap-2\">\r\n        <button\r\n          type=\"button\"\r\n          (click)=\"ref?.close()\"\r\n          class=\"px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors\"\r\n          [disabled]=\"loading\">\r\n          {{ 'CANCEL' | translate }}\r\n        </button>\r\n\r\n        <!-- SplitButton for Export -->\r\n         <!-- || previewData.length === 0 -->\r\n        <p-splitButton\r\n          [label]=\"getExportButtonText()\"\r\n          [icon]=\"getCurrentExportTypeIcon()\"\r\n          [model]=\"exportMenuItems\"\r\n          (onClick)=\"onExport()\"\r\n          [disabled]=\"loading\"\r\n          styleClass=\"p-button-primary\">\r\n        </p-splitButton>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Filters Drawer -->\r\n  @if(showFilters){\r\n  <p-drawer\r\n    [(visible)]=\"showFilters\"\r\n    position=\"right\"\r\n    [styleClass]=\"'!w-full md:!w-80 lg:!w-[40rem] !h-full' \"\r\n    [modal]=\"true\"\r\n    [dismissible]=\"true\"\r\n    styleClass=\"p-4 w-full max-w-md max-h-[90vh] flex flex-col\">\r\n    <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit(); showFilters=false\" class=\"flex flex-col flex-1\">\r\n      <div class=\"flex-1 overflow-auto\">\r\n        <formly-form\r\n          [form]=\"form\"\r\n          [fields]=\"fields_\"\r\n          [model]=\"model\"\r\n          [options]=\"options\">\r\n        </formly-form>\r\n      </div>\r\n    </form>\r\n    <ng-template pTemplate=\"footer\">\r\n      <div class=\"flex justify-end mt-2 space-x-2 flex-none\">\r\n        <button\r\n          type=\"submit\"\r\n          pButton size=\"small\"\r\n          (click)=\" onSubmit(); showFilters=false\"\r\n          label=\"{{ 'SEARCH' | translate }}\">\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          pButton\r\n          size=\"small\"\r\n          class=\"p-button-text\"\r\n          (click)=\"onReset(); showFilters=false\">\r\n          {{ 'CLEAR' | translate }}\r\n        </button>\r\n      </div>\r\n    </ng-template>\r\n  </p-drawer>\r\n  }\r\n</div>\r\n" }]
+        }], ctorParameters: () => [{ type: i1$1.DynamicDialogRef }, { type: i1$1.DynamicDialogConfig }], propDecorators: { previewContainer: [{
                 type: ViewChild,
                 args: ['previewContainer']
             }], filterFields: [{
@@ -484,5 +552,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ExportType, GenericReportComponent, GenericReportModule };
+export { ExportType, GenericReportComponent, GenericReportModule, ReportNameDialogComponent };
 //# sourceMappingURL=elite.framework-ng.ui.core-generic-report.mjs.map