bways-grid 0.0.14 → 0.0.15

package/fesm2022/bways-grid.mjs

@@ -1657,12 +1657,11 @@ class FilterToolPanelComponent {
     rowData = [];
     activeFilters = new Map();
     conditionFilters = new Map();
-    savedReportNames = [];
     filterApplied = new EventEmitter();
     conditionFilterChanged = new EventEmitter();
     clearAllFilters = new EventEmitter();
     saveReportRequested = new EventEmitter();
-    loadReportRequested = new EventEmitter();
+    importReportRequested = new EventEmitter();
     sections = [];
     _loadedFields = new Set();
     constructor(cdr) {
@@ -1932,19 +1931,49 @@ class FilterToolPanelComponent {
     onSaveReportPrompt() {
         const name = prompt('Enter a name for this report:');
         if (name && name.trim()) {
-            this.saveReportRequested.emit(name.trim());
+            const reportObj = {
+                reportName: name.trim(),
+                activeFilters: {},
+                conditionFilters: {}
+            };
+            // Convert Map<string, Set<any>> to Record<string, any[]>
+            if (this.activeFilters.size > 0) {
+                for (const [field, selectedSet] of this.activeFilters.entries()) {
+                    reportObj.activeFilters[field] = Array.from(selectedSet);
+                }
+            }
+            // Convert Map to Object
+            if (this.conditionFilters.size > 0) {
+                reportObj.conditionFilters = Object.fromEntries(this.conditionFilters);
+            }
+            this.saveReportRequested.emit(reportObj);
         }
     }
-    onLoadReportSelected(event) {
-        const select = event.target;
-        const name = select.value;
-        if (name) {
-            this.loadReportRequested.emit(name);
-            select.value = ''; // Reset so it can be re-selected if needed
-        }
+    onImportReport() {
+        const input = document.createElement('input');
+        input.type = 'file';
+        input.accept = '.json';
+        input.onchange = (event) => {
+            const file = event.target.files[0];
+            if (!file)
+                return;
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                try {
+                    const reportData = JSON.parse(e.target.result);
+                    this.importReportRequested.emit(reportData);
+                }
+                catch (err) {
+                    alert('Invalid JSON file. Please select a valid report file.');
+                    console.error('Failed to parse imported report JSON:', err);
+                }
+            };
+            reader.readAsText(file);
+        };
+        input.click();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FilterToolPanelComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: FilterToolPanelComponent, isStandalone: true, selector: "ug-filter-tool-panel", inputs: { columns: "columns", rowData: "rowData", activeFilters: "activeFilters", conditionFilters: "conditionFilters", savedReportNames: "savedReportNames" }, outputs: { filterApplied: "filterApplied", conditionFilterChanged: "conditionFilterChanged", clearAllFilters: "clearAllFilters", saveReportRequested: "saveReportRequested", loadReportRequested: "loadReportRequested" }, usesOnChanges: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: FilterToolPanelComponent, isStandalone: true, selector: "ug-filter-tool-panel", inputs: { columns: "columns", rowData: "rowData", activeFilters: "activeFilters", conditionFilters: "conditionFilters" }, outputs: { filterApplied: "filterApplied", conditionFilterChanged: "conditionFilterChanged", clearAllFilters: "clearAllFilters", saveReportRequested: "saveReportRequested", importReportRequested: "importReportRequested" }, usesOnChanges: true, ngImport: i0, template: `
     <div class="ug-ftp-wrapper">
         <!-- Global Toolbar -->
         <div class="ug-ftp-toolbar">
@@ -1967,11 +1996,11 @@ class FilterToolPanelComponent {
                 <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path><polyline points="17 21 17 13 7 13 7 21"></polyline><polyline points="7 3 7 8 15 8"></polyline></svg>
                 Save
             </button>
-            
-            <select class="ug-ftp-toolbar-select" (change)="onLoadReportSelected($event)" title="Load Saved Report">
-                 <option value="" disabled selected>Load</option>
-                 <option *ngFor="let name of savedReportNames" [value]="name">{{ name }}</option>
-            </select>
+
+            <button class="ug-ftp-btn" (click)="onImportReport()" title="Import Saved Report">
+                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>
+                Import
+            </button>
         </div>
 
         <!-- Column Filter Sections -->
@@ -2095,11 +2124,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path><polyline points="17 21 17 13 7 13 7 21"></polyline><polyline points="7 3 7 8 15 8"></polyline></svg>
                 Save
             </button>
-            
-            <select class="ug-ftp-toolbar-select" (change)="onLoadReportSelected($event)" title="Load Saved Report">
-                 <option value="" disabled selected>Load</option>
-                 <option *ngFor="let name of savedReportNames" [value]="name">{{ name }}</option>
-            </select>
+
+            <button class="ug-ftp-btn" (click)="onImportReport()" title="Import Saved Report">
+                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>
+                Import
+            </button>
         </div>
 
         <!-- Column Filter Sections -->
@@ -2205,8 +2234,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 type: Input
             }], conditionFilters: [{
                 type: Input
-            }], savedReportNames: [{
-                type: Input
             }], filterApplied: [{
                 type: Output
             }], conditionFilterChanged: [{
@@ -2215,7 +2242,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 type: Output
             }], saveReportRequested: [{
                 type: Output
-            }], loadReportRequested: [{
+            }], importReportRequested: [{
                 type: Output
             }] } });
 
@@ -2228,7 +2255,7 @@ class SideBarComponent {
     valuesModel = [];
     pivotMode = false;
     pivotColumns = [];
-    savedReportNames = [];
+    savedReportNames = []; // Kept for backward compat but no longer used
     columnsUpdated = new EventEmitter();
     groupModelUpdated = new EventEmitter();
     valuesModelUpdated = new EventEmitter();
@@ -2239,7 +2266,7 @@ class SideBarComponent {
     conditionFilterChanged = new EventEmitter();
     clearAllFilters = new EventEmitter();
     saveReportRequested = new EventEmitter();
-    loadReportRequested = new EventEmitter();
+    importReportRequested = new EventEmitter();
     activeTab = null;
     cdr = inject(ChangeDetectorRef);
     constructor() {
@@ -2292,7 +2319,7 @@ class SideBarComponent {
         this.pivotModelUpdated.emit(model);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SideBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: SideBarComponent, isStandalone: true, selector: "ug-side-bar", inputs: { columns: "columns", rowData: "rowData", activeFilters: "activeFilters", conditionFilters: "conditionFilters", groupModel: "groupModel", valuesModel: "valuesModel", pivotMode: "pivotMode", pivotColumns: "pivotColumns", savedReportNames: "savedReportNames", activeTab: "activeTab" }, outputs: { columnsUpdated: "columnsUpdated", groupModelUpdated: "groupModelUpdated", valuesModelUpdated: "valuesModelUpdated", pivotModeUpdated: "pivotModeUpdated", pivotModelUpdated: "pivotModelUpdated", exportExcelClicked: "exportExcelClicked", filterApplied: "filterApplied", conditionFilterChanged: "conditionFilterChanged", clearAllFilters: "clearAllFilters", saveReportRequested: "saveReportRequested", loadReportRequested: "loadReportRequested" }, usesOnChanges: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: SideBarComponent, isStandalone: true, selector: "ug-side-bar", inputs: { columns: "columns", rowData: "rowData", activeFilters: "activeFilters", conditionFilters: "conditionFilters", groupModel: "groupModel", valuesModel: "valuesModel", pivotMode: "pivotMode", pivotColumns: "pivotColumns", savedReportNames: "savedReportNames", activeTab: "activeTab" }, outputs: { columnsUpdated: "columnsUpdated", groupModelUpdated: "groupModelUpdated", valuesModelUpdated: "valuesModelUpdated", pivotModeUpdated: "pivotModeUpdated", pivotModelUpdated: "pivotModelUpdated", exportExcelClicked: "exportExcelClicked", filterApplied: "filterApplied", conditionFilterChanged: "conditionFilterChanged", clearAllFilters: "clearAllFilters", saveReportRequested: "saveReportRequested", importReportRequested: "importReportRequested" }, usesOnChanges: true, ngImport: i0, template: `
     <div class="ug-side-bar-wrapper">
         <!-- Content Area -->
         <div class="ug-side-bar-content" *ngIf="activeTab">
@@ -2325,12 +2352,11 @@ class SideBarComponent {
                     [rowData]="rowData"
                     [activeFilters]="activeFilters"
                     [conditionFilters]="conditionFilters"
-                    [savedReportNames]="savedReportNames"
                     (filterApplied)="onFilterApplied($event)"
                     (conditionFilterChanged)="onConditionFilterChanged($event)"
                     (clearAllFilters)="onClearAllFilters()"
                     (saveReportRequested)="saveReportRequested.emit($event)"
-                    (loadReportRequested)="loadReportRequested.emit($event)">
+                    (importReportRequested)="importReportRequested.emit($event)">
                 </ug-filter-tool-panel>
             </div>
         </div>
@@ -2352,7 +2378,7 @@ class SideBarComponent {
             </div>
         </div>
     </div>
-  `, isInline: true, styles: [".ug-side-bar-wrapper{display:flex;flex-direction:row;height:100%;background-color:var(--ug-panel-bg);border-left:1px solid var(--ug-border-color);font-family:var(--ug-font-family, sans-serif);font-size:var(--ug-font-size, 13px);color:var(--ug-header-color)}.ug-side-bar-content{display:flex;flex-direction:column;width:250px;height:100%;border-right:1px solid var(--ug-border-color)}.ug-side-bar-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--ug-border-color);background-color:var(--ug-header-bg)}.ug-side-bar-title{font-family:var(--ug-font-family, sans-serif);font-size:var(--ug-font-size, 13px);font-weight:var(--ug-header-font-weight, 500);color:var(--ug-header-color)}.ug-side-bar-close{cursor:pointer;color:var(--ug-icon-color);display:flex;align-items:center;justify-content:center}.ug-side-bar-close:hover{color:var(--ug-primary-color)}.ug-side-bar-body{flex:1;overflow-y:auto;overflow-x:hidden;background-color:var(--ug-panel-bg)}.ug-side-bar-toolbar{display:flex;flex-direction:column;width:40px;height:100%;background-color:var(--ug-header-bg);padding-top:8px;gap:8px;align-items:center}.ug-side-bar-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 4px;cursor:pointer;color:var(--ug-icon-color);border-left:2px solid transparent;width:100%;box-sizing:border-box}.ug-side-bar-tab span{writing-mode:vertical-rl;transform:rotate(180deg);margin-top:12px;font-family:var(--ug-font-family, sans-serif);font-weight:var(--ug-header-font-weight, 500);font-size:var(--ug-font-size, 13px);letter-spacing:.5px}.ug-side-bar-tab:hover{color:var(--ug-primary-color);background-color:var(--ug-row-hover-bg)}.ug-side-bar-tab.active{color:var(--ug-primary-color);background-color:var(--ug-panel-bg);border-left:2px solid var(--ug-primary-color)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ColumnToolPanelComponent, selector: "ug-column-tool-panel", inputs: ["columns", "groupModel", "valuesModel", "pivotMode", "pivotColumns"], outputs: ["columnsUpdated", "groupModelChanged", "valuesModelChanged", "pivotModeChanged", "pivotModelChanged", "exportExcelClicked"] }, { kind: "component", type: FilterToolPanelComponent, selector: "ug-filter-tool-panel", inputs: ["columns", "rowData", "activeFilters", "conditionFilters", "savedReportNames"], outputs: ["filterApplied", "conditionFilterChanged", "clearAllFilters", "saveReportRequested", "loadReportRequested"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".ug-side-bar-wrapper{display:flex;flex-direction:row;height:100%;background-color:var(--ug-panel-bg);border-left:1px solid var(--ug-border-color);font-family:var(--ug-font-family, sans-serif);font-size:var(--ug-font-size, 13px);color:var(--ug-header-color)}.ug-side-bar-content{display:flex;flex-direction:column;width:250px;height:100%;border-right:1px solid var(--ug-border-color)}.ug-side-bar-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--ug-border-color);background-color:var(--ug-header-bg)}.ug-side-bar-title{font-family:var(--ug-font-family, sans-serif);font-size:var(--ug-font-size, 13px);font-weight:var(--ug-header-font-weight, 500);color:var(--ug-header-color)}.ug-side-bar-close{cursor:pointer;color:var(--ug-icon-color);display:flex;align-items:center;justify-content:center}.ug-side-bar-close:hover{color:var(--ug-primary-color)}.ug-side-bar-body{flex:1;overflow-y:auto;overflow-x:hidden;background-color:var(--ug-panel-bg)}.ug-side-bar-toolbar{display:flex;flex-direction:column;width:40px;height:100%;background-color:var(--ug-header-bg);padding-top:8px;gap:8px;align-items:center}.ug-side-bar-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 4px;cursor:pointer;color:var(--ug-icon-color);border-left:2px solid transparent;width:100%;box-sizing:border-box}.ug-side-bar-tab span{writing-mode:vertical-rl;transform:rotate(180deg);margin-top:12px;font-family:var(--ug-font-family, sans-serif);font-weight:var(--ug-header-font-weight, 500);font-size:var(--ug-font-size, 13px);letter-spacing:.5px}.ug-side-bar-tab:hover{color:var(--ug-primary-color);background-color:var(--ug-row-hover-bg)}.ug-side-bar-tab.active{color:var(--ug-primary-color);background-color:var(--ug-panel-bg);border-left:2px solid var(--ug-primary-color)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ColumnToolPanelComponent, selector: "ug-column-tool-panel", inputs: ["columns", "groupModel", "valuesModel", "pivotMode", "pivotColumns"], outputs: ["columnsUpdated", "groupModelChanged", "valuesModelChanged", "pivotModeChanged", "pivotModelChanged", "exportExcelClicked"] }, { kind: "component", type: FilterToolPanelComponent, selector: "ug-filter-tool-panel", inputs: ["columns", "rowData", "activeFilters", "conditionFilters"], outputs: ["filterApplied", "conditionFilterChanged", "clearAllFilters", "saveReportRequested", "importReportRequested"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SideBarComponent, decorators: [{
             type: Component,
@@ -2389,12 +2415,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                     [rowData]="rowData"
                     [activeFilters]="activeFilters"
                     [conditionFilters]="conditionFilters"
-                    [savedReportNames]="savedReportNames"
                     (filterApplied)="onFilterApplied($event)"
                     (conditionFilterChanged)="onConditionFilterChanged($event)"
                     (clearAllFilters)="onClearAllFilters()"
                     (saveReportRequested)="saveReportRequested.emit($event)"
-                    (loadReportRequested)="loadReportRequested.emit($event)">
+                    (importReportRequested)="importReportRequested.emit($event)">
                 </ug-filter-tool-panel>
             </div>
         </div>
@@ -2455,7 +2480,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 type: Output
             }], saveReportRequested: [{
                 type: Output
-            }], loadReportRequested: [{
+            }], importReportRequested: [{
                 type: Output
             }], activeTab: [{
                 type: Input
@@ -2694,6 +2719,7 @@ class UltraGridComponent {
     rowClicked = new EventEmitter();
     sortChanged = new EventEmitter();
     selectionChanged = new EventEmitter();
+    reportSaved = new EventEmitter();
     getSelectedRows() {
         if (!this._mappedRowData)
             return [];
@@ -2731,7 +2757,6 @@ class UltraGridComponent {
     conditionFilters = new Map();
     isChooseColumnsOpen = false;
     chooseColumnsPosition = { x: 0, y: 0 };
-    savedReportNames = [];
     destroy$ = new Subject();
     sortingWorker;
     sortingWorkerUrl;
@@ -2760,9 +2785,6 @@ class UltraGridComponent {
                 this.fetchServerPage(1);
             }
         }
-        if (this.isBrowser) {
-            this.loadSavedReportNames();
-        }
     }
     get selectedRowsCount() {
         if (!this._mappedRowData)
@@ -3588,67 +3610,20 @@ class UltraGridComponent {
         }
         this.applyLocalData();
     }
-    // --- Save / Import Filters natively to LocalStorage ---
-    loadSavedReportNames() {
-        if (!this.isBrowser)
+    // --- Save / Import Filters ---
+    handleSaveReport(reportObj) {
+        if (!reportObj)
             return;
-        try {
-            const stored = localStorage.getItem('ug-saved-reports');
-            if (stored) {
-                const parsed = JSON.parse(stored);
-                this.savedReportNames = Object.keys(parsed);
-                this.cdr.markForCheck();
-            }
-        }
-        catch (e) { }
-    }
-    handleSaveReport(reportName) {
-        if (!reportName)
-            return;
-        const state = {
-            activeFilters: {},
-            conditionFilters: {}
-        };
-        // Convert Map<string, Set<any>> to Record<string, any[]>
-        if (this.activeFilters.size > 0) {
-            for (const [field, selectedSet] of this.activeFilters.entries()) {
-                state.activeFilters[field] = Array.from(selectedSet);
-            }
-        }
-        // Convert Map to Object
-        if (this.conditionFilters.size > 0) {
-            state.conditionFilters = Object.fromEntries(this.conditionFilters);
-        }
-        if (this.isBrowser) {
-            try {
-                const stored = localStorage.getItem('ug-saved-reports');
-                const reports = stored ? JSON.parse(stored) : {};
-                reports[reportName] = state;
-                localStorage.setItem('ug-saved-reports', JSON.stringify(reports));
-                this.loadSavedReportNames();
-                console.log(`Report '${reportName}' saved successfully locally.`);
-            }
-            catch (err) {
-                console.error('Failed to save report locally.', err);
-            }
-        }
+        console.log('=== SAVED REPORT OBJECT ===');
+        console.log(JSON.stringify(reportObj, null, 2));
+        console.log('=== END REPORT OBJECT ===');
+        this.reportSaved.emit(reportObj);
     }
-    handleLoadReport(reportName) {
-        if (!reportName || !this.isBrowser)
+    handleImportReport(reportData) {
+        if (!reportData)
             return;
-        try {
-            const stored = localStorage.getItem('ug-saved-reports');
-            if (stored) {
-                const reports = JSON.parse(stored);
-                const data = reports[reportName];
-                if (data) {
-                    this.applyImportedFilters(data);
-                }
-            }
-        }
-        catch (err) {
-            console.error('Error loading report locally.', err);
-        }
+        console.log('Importing report:', reportData.reportName || 'unnamed');
+        this.applyImportedFilters(reportData);
     }
     applyImportedFilters(data) {
         if (!data)
@@ -3674,15 +3649,15 @@ class UltraGridComponent {
             this.currentPage = 1;
             this.applyLocalData();
             this.cdr.markForCheck();
-            console.log('Filters loaded and applied successfully.');
+            console.log('Filters imported and applied successfully.');
         }
         catch (err) {
-            console.error('Error applying loaded filters:', err);
-            alert('Error loading report. Please ensure local storage data is not corrupted.');
+            console.error('Error applying imported filters:', err);
+            alert('Error importing report. Please ensure the JSON file is valid.');
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: UltraGridComponent, deps: [{ token: PLATFORM_ID }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: GridFlattenerService }, { token: ExcelExportService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: UltraGridComponent, isStandalone: true, selector: "bways-grid", inputs: { columns: "columns", rowData: "rowData", serverDataSource: "serverDataSource", config: "config", pagination: "pagination", pageSize: "pageSize", groupModel: "groupModel", valuesModel: "valuesModel", pivotColumns: "pivotColumns" }, outputs: { rowClicked: "rowClicked", sortChanged: "sortChanged", selectionChanged: "selectionChanged" }, viewQueries: [{ propertyName: "headerElement", first: true, predicate: ["headerComponent"], descendants: true, read: ElementRef }, { propertyName: "viewport", first: true, predicate: ["viewport"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: UltraGridComponent, isStandalone: true, selector: "bways-grid", inputs: { columns: "columns", rowData: "rowData", serverDataSource: "serverDataSource", config: "config", pagination: "pagination", pageSize: "pageSize", groupModel: "groupModel", valuesModel: "valuesModel", pivotColumns: "pivotColumns" }, outputs: { rowClicked: "rowClicked", sortChanged: "sortChanged", selectionChanged: "selectionChanged", reportSaved: "reportSaved" }, viewQueries: [{ propertyName: "headerElement", first: true, predicate: ["headerComponent"], descendants: true, read: ElementRef }, { propertyName: "viewport", first: true, predicate: ["viewport"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
     <div class="ug-wrapper" [ngClass]="config.theme || 'ag-theme-alpine'">
       
       <div class="ug-main">
@@ -3750,8 +3725,7 @@ class UltraGridComponent {
       </div>
 
       <ug-side-bar 
-        *ngIf="config.sideBar" 
-        [activeTab]="config.sideBarDefaultTab || null"
+        *ngIf="config.sideBar"
         [columns]="columns" 
         [rowData]="rowData"
         [activeFilters]="activeFilters"
@@ -3760,7 +3734,6 @@ class UltraGridComponent {
         [valuesModel]="valuesModel"
         [pivotMode]="!!config.pivotMode"
         [pivotColumns]="pivotColumns"
-        [savedReportNames]="savedReportNames"
         (columnsUpdated)="onSideBarColumnsUpdated($event)"
         (groupModelUpdated)="onSideBarGroupModelUpdated($event)"
         (valuesModelUpdated)="onValuesModelUpdated($event)"
@@ -3771,7 +3744,7 @@ class UltraGridComponent {
         (conditionFilterChanged)="onConditionFilterChanged($event)"
         (clearAllFilters)="onClearAllFilters()"
         (saveReportRequested)="handleSaveReport($event)"
-        (loadReportRequested)="handleLoadReport($event)">
+        (importReportRequested)="handleImportReport($event)">
       </ug-side-bar>
 
     </div>
@@ -3807,7 +3780,7 @@ class UltraGridComponent {
           (closePanel)="isChooseColumnsOpen = false">
         </ug-choose-columns>
       </div>
-  `, isInline: true, styles: ["@charset \"UTF-8\";bways-grid{display:block;height:100%;width:100%;--ug-border-color: rgba(221, 226, 235, .4);--ug-bg-color: transparent;--ug-header-bg: rgba(255, 255, 255, .25);--ug-header-color: #3f332f;--ug-header-hover-bg: rgba(255, 255, 255, .4);--ug-row-bg: rgba(255, 255, 255, .15);--ug-row-hover-bg: rgba(216, 48, 24, .05);--ug-row-selected-bg: rgba(216, 48, 24, .15);--ug-primary-color: #d83018;--ug-panel-bg: #ffffff;--ug-footer-bg: rgba(255, 255, 255, .25);--ug-footer-color: #554440;--ug-icon-color: #7b6d69;--ug-font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif;--ug-font-size: 13px;--ug-header-font-weight: 600}.ug-wrapper{display:flex;flex-direction:row;height:100%;width:100%;border:1px solid var(--ug-border-color);background-color:var(--ug-bg-color);background-image:url(\"data:image/svg+xml;utf8,<svg viewBox='0 0 800 800' xmlns='http://www.w3.org/2000/svg'><g fill='rgba(0,0,0,0.02)'><path transform='translate(150,150) scale(1.6)' d='M-20 -30c0-10 40-10 40 0v60c0 10-40 10-40 0z M-20 -10c0 10 40 10 40 0 M-20 10c0 10 40 10 40 0'/><path transform='translate(600,250) scale(1.8)' d='M-40 10a30 30 0 0 1 50-10 40 40 0 0 1 30 60h-80a20 20 0 0 1 0-50z'/><g transform='translate(350,550) scale(1.7)'><circle cx='0' cy='-20' r='10'/><circle cx='-30' cy='10' r='8'/><circle cx='30' cy='10' r='8'/><path d='M0 -20l-30 30m30-30l30 30' stroke='rgba(0,0,0,0.02)' stroke-width='4'/></g><path transform='translate(700,700) scale(1.4)' d='M-20 -30c0-10 40-10 40 0v60c0 10-40 10-40 0z M-20 -10c0 10 40 10 40 0 M-20 10c0 10 40 10 40 0'/><path transform='translate(100,600) scale(1.5)' d='M-40 10a30 30 0 0 1 50-10 40 40 0 0 1 30 60h-80a20 20 0 0 1 0-50z'/><g transform='translate(450,100) scale(1.3)'><circle cx='0' cy='-20' r='10'/><circle cx='-30' cy='10' r='8'/><circle cx='30' cy='10' r='8'/><path d='M0 -20l-30 30m30-30l30 30' stroke='rgba(0,0,0,0.02)' stroke-width='4'/></g></g></svg>\"),radial-gradient(circle at 10% 20%,#fdf5f5 0%,transparent 60%),radial-gradient(circle at 80% 10%,#eefbf6 0%,transparent 60%),radial-gradient(circle at 50% 80%,#f9f5f0,#f1efe9);background-size:800px 800px,100% 100%,100% 100%,100% 100%;background-position:center;background-repeat:repeat,no-repeat,no-repeat,no-repeat;box-sizing:border-box;font-family:var(--ug-font-family);font-size:var(--ug-font-size);color:var(--ug-header-color);overflow:hidden;backdrop-filter:blur(8px)}.ug-main{display:flex;flex-direction:column;flex:1;min-width:0;overflow:hidden}.ug-body{flex:1;overflow:hidden;position:relative}.ug-viewport{height:100%;width:100%;overflow:auto}.ug-ssr-container{height:100%;width:100%;overflow:hidden}.ug-status-bar{display:flex;align-items:center;padding:0 16px;min-height:48px;border-top:1px solid var(--ug-border-color);font-weight:500;font-size:13px;color:var(--ug-header-color);background-color:var(--ug-footer-bg)}.ug-cc-overlay-container{position:fixed;z-index:1002}bways-grid.ag-theme-alpine-dark{--ug-border-color: #334155;--ug-bg-color: #1e293b;--ug-header-bg: #0f172a;--ug-header-color: #e2e8f0;--ug-header-hover-bg: #1e293b;--ug-row-bg: #1e293b;--ug-row-hover-bg: #334155;--ug-row-selected-bg: #0f172a;--ug-primary-color: #60a5fa;--ug-footer-bg: #0f172a;--ug-footer-color: #94a3b8;--ug-icon-color: #94a3b8}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i3$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i3$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i3$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: HeaderComponent, selector: "ug-header", inputs: ["columns", "sortModel", "isAllSelected"], outputs: ["sortChanged", "columnsReordered", "columnResized", "headerCheckboxClicked", "menuClicked", "filterClicked"] }, { kind: "component", type: RowComponent, selector: "ug-row", inputs: ["columns", "row", "rowHeight", "isExpanded", "selectionVersion"], outputs: ["groupToggled"] }, { kind: "component", type: PaginationComponent, selector: "ug-pagination", inputs: ["totalCount", "pageSize", "currentPage"], outputs: ["pageChanged", "pageSizeChanged"] }, { kind: "component", type: HeaderMenuComponent, selector: "ug-header-menu", inputs: ["column", "isOpen", "position", "groupModel"], outputs: ["closeMenu", "sort", "pin", "autosize", "group", "chooseColumns"] }, { kind: "component", type: ChooseColumnsComponent, selector: "ug-choose-columns", inputs: ["columns"], outputs: ["columnsChanged", "closePanel"] }, { kind: "component", type: HeaderFilterComponent, selector: "ug-header-filter", inputs: ["column", "isOpen", "position", "uniqueValues", "activeFilterSet"], outputs: ["closeFilter", "filterApplied"] }, { kind: "component", type: SideBarComponent, selector: "ug-side-bar", inputs: ["columns", "rowData", "activeFilters", "conditionFilters", "groupModel", "valuesModel", "pivotMode", "pivotColumns", "savedReportNames", "activeTab"], outputs: ["columnsUpdated", "groupModelUpdated", "valuesModelUpdated", "pivotModeUpdated", "pivotModelUpdated", "exportExcelClicked", "filterApplied", "conditionFilterChanged", "clearAllFilters", "saveReportRequested", "loadReportRequested"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: ["@charset \"UTF-8\";bways-grid{display:block;height:100%;width:100%;--ug-border-color: rgba(221, 226, 235, .4);--ug-bg-color: transparent;--ug-header-bg: rgba(255, 255, 255, .25);--ug-header-color: #3f332f;--ug-header-hover-bg: rgba(255, 255, 255, .4);--ug-row-bg: rgba(255, 255, 255, .15);--ug-row-hover-bg: rgba(216, 48, 24, .05);--ug-row-selected-bg: rgba(216, 48, 24, .15);--ug-primary-color: #d83018;--ug-panel-bg: #ffffff;--ug-footer-bg: rgba(255, 255, 255, .25);--ug-footer-color: #554440;--ug-icon-color: #7b6d69;--ug-font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif;--ug-font-size: 13px;--ug-header-font-weight: 600}.ug-wrapper{display:flex;flex-direction:row;height:100%;width:100%;border:1px solid var(--ug-border-color);background-color:var(--ug-bg-color);background-image:url(\"data:image/svg+xml;utf8,<svg viewBox='0 0 800 800' xmlns='http://www.w3.org/2000/svg'><g fill='rgba(0,0,0,0.02)'><path transform='translate(150,150) scale(1.6)' d='M-20 -30c0-10 40-10 40 0v60c0 10-40 10-40 0z M-20 -10c0 10 40 10 40 0 M-20 10c0 10 40 10 40 0'/><path transform='translate(600,250) scale(1.8)' d='M-40 10a30 30 0 0 1 50-10 40 40 0 0 1 30 60h-80a20 20 0 0 1 0-50z'/><g transform='translate(350,550) scale(1.7)'><circle cx='0' cy='-20' r='10'/><circle cx='-30' cy='10' r='8'/><circle cx='30' cy='10' r='8'/><path d='M0 -20l-30 30m30-30l30 30' stroke='rgba(0,0,0,0.02)' stroke-width='4'/></g><path transform='translate(700,700) scale(1.4)' d='M-20 -30c0-10 40-10 40 0v60c0 10-40 10-40 0z M-20 -10c0 10 40 10 40 0 M-20 10c0 10 40 10 40 0'/><path transform='translate(100,600) scale(1.5)' d='M-40 10a30 30 0 0 1 50-10 40 40 0 0 1 30 60h-80a20 20 0 0 1 0-50z'/><g transform='translate(450,100) scale(1.3)'><circle cx='0' cy='-20' r='10'/><circle cx='-30' cy='10' r='8'/><circle cx='30' cy='10' r='8'/><path d='M0 -20l-30 30m30-30l30 30' stroke='rgba(0,0,0,0.02)' stroke-width='4'/></g></g></svg>\"),radial-gradient(circle at 10% 20%,#fdf5f5 0%,transparent 60%),radial-gradient(circle at 80% 10%,#eefbf6 0%,transparent 60%),radial-gradient(circle at 50% 80%,#f9f5f0,#f1efe9);background-size:800px 800px,100% 100%,100% 100%,100% 100%;background-position:center;background-repeat:repeat,no-repeat,no-repeat,no-repeat;box-sizing:border-box;font-family:var(--ug-font-family);font-size:var(--ug-font-size);color:var(--ug-header-color);overflow:hidden;backdrop-filter:blur(8px)}.ug-main{display:flex;flex-direction:column;flex:1;min-width:0;overflow:hidden}.ug-body{flex:1;overflow:hidden;position:relative}.ug-viewport{height:100%;width:100%;overflow:auto}.ug-ssr-container{height:100%;width:100%;overflow:hidden}.ug-status-bar{display:flex;align-items:center;padding:0 16px;min-height:48px;border-top:1px solid var(--ug-border-color);font-weight:500;font-size:13px;color:var(--ug-header-color);background-color:var(--ug-footer-bg)}.ug-cc-overlay-container{position:fixed;z-index:1002}bways-grid.ag-theme-alpine-dark{--ug-border-color: #334155;--ug-bg-color: #1e293b;--ug-header-bg: #0f172a;--ug-header-color: #e2e8f0;--ug-header-hover-bg: #1e293b;--ug-row-bg: #1e293b;--ug-row-hover-bg: #334155;--ug-row-selected-bg: #0f172a;--ug-primary-color: #60a5fa;--ug-footer-bg: #0f172a;--ug-footer-color: #94a3b8;--ug-icon-color: #94a3b8}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i3$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i3$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i3$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: HeaderComponent, selector: "ug-header", inputs: ["columns", "sortModel", "isAllSelected"], outputs: ["sortChanged", "columnsReordered", "columnResized", "headerCheckboxClicked", "menuClicked", "filterClicked"] }, { kind: "component", type: RowComponent, selector: "ug-row", inputs: ["columns", "row", "rowHeight", "isExpanded", "selectionVersion"], outputs: ["groupToggled"] }, { kind: "component", type: PaginationComponent, selector: "ug-pagination", inputs: ["totalCount", "pageSize", "currentPage"], outputs: ["pageChanged", "pageSizeChanged"] }, { kind: "component", type: HeaderMenuComponent, selector: "ug-header-menu", inputs: ["column", "isOpen", "position", "groupModel"], outputs: ["closeMenu", "sort", "pin", "autosize", "group", "chooseColumns"] }, { kind: "component", type: ChooseColumnsComponent, selector: "ug-choose-columns", inputs: ["columns"], outputs: ["columnsChanged", "closePanel"] }, { kind: "component", type: HeaderFilterComponent, selector: "ug-header-filter", inputs: ["column", "isOpen", "position", "uniqueValues", "activeFilterSet"], outputs: ["closeFilter", "filterApplied"] }, { kind: "component", type: SideBarComponent, selector: "ug-side-bar", inputs: ["columns", "rowData", "activeFilters", "conditionFilters", "groupModel", "valuesModel", "pivotMode", "pivotColumns", "savedReportNames", "activeTab"], outputs: ["columnsUpdated", "groupModelUpdated", "valuesModelUpdated", "pivotModeUpdated", "pivotModelUpdated", "exportExcelClicked", "filterApplied", "conditionFilterChanged", "clearAllFilters", "saveReportRequested", "importReportRequested"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: UltraGridComponent, decorators: [{
             type: Component,
@@ -3889,8 +3862,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
       </div>
 
       <ug-side-bar 
-        *ngIf="config.sideBar" 
-        [activeTab]="config.sideBarDefaultTab || null"
+        *ngIf="config.sideBar"
         [columns]="columns" 
         [rowData]="rowData"
         [activeFilters]="activeFilters"
@@ -3899,7 +3871,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
         [valuesModel]="valuesModel"
         [pivotMode]="!!config.pivotMode"
         [pivotColumns]="pivotColumns"
-        [savedReportNames]="savedReportNames"
         (columnsUpdated)="onSideBarColumnsUpdated($event)"
         (groupModelUpdated)="onSideBarGroupModelUpdated($event)"
         (valuesModelUpdated)="onValuesModelUpdated($event)"
@@ -3910,7 +3881,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
         (conditionFilterChanged)="onConditionFilterChanged($event)"
         (clearAllFilters)="onClearAllFilters()"
         (saveReportRequested)="handleSaveReport($event)"
-        (loadReportRequested)="handleLoadReport($event)">
+        (importReportRequested)="handleImportReport($event)">
       </ug-side-bar>
 
     </div>
@@ -3974,6 +3945,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 type: Output
             }], selectionChanged: [{
                 type: Output
+            }], reportSaved: [{
+                type: Output
             }], groupModel: [{
                 type: Input
             }], valuesModel: [{