bways-grid 0.0.6 → 0.0.7

package/fesm2022/bways-grid.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, HostListener, Output, Input, Directive, ViewEncapsulation, ChangeDetectionStrategy, Component, HostBinding, Injectable, PLATFORM_ID, Inject, NgModule } from '@angular/core';
+import { EventEmitter, HostListener, Output, Input, Directive, ViewEncapsulation, ChangeDetectionStrategy, Component, HostBinding, inject, ChangeDetectorRef, Injectable, PLATFORM_ID, Inject, NgModule } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, isPlatformBrowser } from '@angular/common';
 import * as i3$1 from '@angular/cdk/scrolling';
@@ -1656,6 +1656,8 @@ class FilterToolPanelComponent {
     filterApplied = new EventEmitter();
     conditionFilterChanged = new EventEmitter();
     clearAllFilters = new EventEmitter();
+    saveFiltersRequested = new EventEmitter();
+    filtersImported = new EventEmitter();
     sections = [];
     _loadedFields = new Set();
     constructor(cdr) {
@@ -1922,8 +1924,27 @@ class FilterToolPanelComponent {
     trackByField(index, section) {
         return section.column.field;
     }
+    onFileSelected(event) {
+        const file = event.target.files?.[0];
+        if (!file)
+            return;
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            try {
+                const json = JSON.parse(e.target?.result);
+                this.filtersImported.emit(json);
+                // Reset input so importing same file again triggers change
+                event.target.value = '';
+            }
+            catch (err) {
+                console.error('Failed to parse filter JSON:', err);
+                alert('Invalid filter file format.');
+            }
+        };
+        reader.readAsText(file);
+    }
     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" }, outputs: { filterApplied: "filterApplied", conditionFilterChanged: "conditionFilterChanged", clearAllFilters: "clearAllFilters" }, 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", saveFiltersRequested: "saveFiltersRequested", filtersImported: "filtersImported" }, usesOnChanges: true, ngImport: i0, template: `
     <div class="ug-ftp-wrapper">
         <!-- Global Toolbar -->
         <div class="ug-ftp-toolbar">
@@ -1939,6 +1960,18 @@ class FilterToolPanelComponent {
                 <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
                 Clear All
             </button>
+            
+            <div style="flex: 1"></div>
+
+            <button class="ug-ftp-btn" (click)="saveFiltersRequested.emit()" title="Save Filters to JSON">
+                <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>
+            <button class="ug-ftp-btn" (click)="fileInput.click()" title="Import Filters from JSON">
+                <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="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line></svg>
+                Import
+            </button>
+            <input #fileInput type="file" accept=".json" style="display: none" (change)="onFileSelected($event)">
         </div>
 
         <!-- Column Filter Sections -->
@@ -2055,6 +2088,18 @@ 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"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
                 Clear All
             </button>
+            
+            <div style="flex: 1"></div>
+
+            <button class="ug-ftp-btn" (click)="saveFiltersRequested.emit()" title="Save Filters to JSON">
+                <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>
+            <button class="ug-ftp-btn" (click)="fileInput.click()" title="Import Filters from JSON">
+                <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="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line></svg>
+                Import
+            </button>
+            <input #fileInput type="file" accept=".json" style="display: none" (change)="onFileSelected($event)">
         </div>
 
         <!-- Column Filter Sections -->
@@ -2166,6 +2211,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 type: Output
             }], clearAllFilters: [{
                 type: Output
+            }], saveFiltersRequested: [{
+                type: Output
+            }], filtersImported: [{
+                type: Output
             }] } });
 
 class SideBarComponent {
@@ -2186,17 +2235,23 @@ class SideBarComponent {
     filterApplied = new EventEmitter();
     conditionFilterChanged = new EventEmitter();
     clearAllFilters = new EventEmitter();
+    saveFiltersRequested = new EventEmitter();
+    filtersImported = new EventEmitter();
     activeTab = 'columns'; // Open by default for demo parity
+    cdr = inject(ChangeDetectorRef);
     toggleTab(tab) {
+        console.log('Sidebar toggleTab requested:', tab, 'Current:', this.activeTab);
         if (this.activeTab === tab) {
             this.activeTab = null;
         }
         else {
             this.activeTab = tab;
         }
+        this.cdr.markForCheck();
     }
     closePanel() {
         this.activeTab = null;
+        this.cdr.markForCheck();
     }
     onColumnsChanged(updatedCols) {
         this.columnsUpdated.emit(updatedCols);
@@ -2226,7 +2281,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" }, outputs: { columnsUpdated: "columnsUpdated", groupModelUpdated: "groupModelUpdated", valuesModelUpdated: "valuesModelUpdated", pivotModeUpdated: "pivotModeUpdated", pivotModelUpdated: "pivotModelUpdated", exportExcelClicked: "exportExcelClicked", filterApplied: "filterApplied", conditionFilterChanged: "conditionFilterChanged", clearAllFilters: "clearAllFilters" }, 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" }, outputs: { columnsUpdated: "columnsUpdated", groupModelUpdated: "groupModelUpdated", valuesModelUpdated: "valuesModelUpdated", pivotModeUpdated: "pivotModeUpdated", pivotModelUpdated: "pivotModelUpdated", exportExcelClicked: "exportExcelClicked", filterApplied: "filterApplied", conditionFilterChanged: "conditionFilterChanged", clearAllFilters: "clearAllFilters", saveFiltersRequested: "saveFiltersRequested", filtersImported: "filtersImported" }, ngImport: i0, template: `
     <div class="ug-side-bar-wrapper">
         <!-- Content Area -->
         <div class="ug-side-bar-content" *ngIf="activeTab">
@@ -2261,7 +2316,9 @@ class SideBarComponent {
                     [conditionFilters]="conditionFilters"
                     (filterApplied)="onFilterApplied($event)"
                     (conditionFilterChanged)="onConditionFilterChanged($event)"
-                    (clearAllFilters)="onClearAllFilters()">
+                    (clearAllFilters)="onClearAllFilters()"
+                    (saveFiltersRequested)="saveFiltersRequested.emit()"
+                    (filtersImported)="filtersImported.emit($event)">
                 </ug-filter-tool-panel>
             </div>
         </div>
@@ -2283,7 +2340,7 @@ class SideBarComponent {
             </div>
         </div>
     </div>
-  `, isInline: true, styles: [".ug-side-bar-wrapper{display:flex;flex-direction:row;height:100%;background-color:var(--ug-bg-color);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-bg-color)}.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-bg-color);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"] }], 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-bg-color);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-bg-color)}.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-bg-color);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", "saveFiltersRequested", "filtersImported"] }], 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,
@@ -2322,7 +2379,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                     [conditionFilters]="conditionFilters"
                     (filterApplied)="onFilterApplied($event)"
                     (conditionFilterChanged)="onConditionFilterChanged($event)"
-                    (clearAllFilters)="onClearAllFilters()">
+                    (clearAllFilters)="onClearAllFilters()"
+                    (saveFiltersRequested)="saveFiltersRequested.emit()"
+                    (filtersImported)="filtersImported.emit($event)">
                 </ug-filter-tool-panel>
             </div>
         </div>
@@ -2379,6 +2438,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 type: Output
             }], clearAllFilters: [{
                 type: Output
+            }], saveFiltersRequested: [{
+                type: Output
+            }], filtersImported: [{
+                type: Output
             }] } });
 
 class GridFlattenerService {
@@ -3469,6 +3532,64 @@ class UltraGridComponent {
         }
         this.applyLocalData();
     }
+    // --- Save / Import Filters ---
+    handleSaveFilters() {
+        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);
+        }
+        const json = JSON.stringify(state, null, 2);
+        const blob = new Blob([json], { type: 'application/json' });
+        const url = URL.createObjectURL(blob);
+        const link = document.createElement('a');
+        link.href = url;
+        link.download = `grid-filters-${new Date().toISOString().slice(0, 10)}.json`;
+        link.click();
+        URL.revokeObjectURL(url);
+    }
+    handleImportFilters(data) {
+        if (!data)
+            return;
+        console.log('Importing filters:', data);
+        try {
+            // Restore activeFilters (Record -> Map<string, Set>)
+            // Important: We create a NEW Map instance to trigger Output/Input change detection
+            const newActiveFilters = new Map();
+            if (data.activeFilters) {
+                Object.keys(data.activeFilters).forEach(field => {
+                    newActiveFilters.set(field, new Set(data.activeFilters[field]));
+                });
+            }
+            this.activeFilters = newActiveFilters;
+            // Restore conditionFilters (Object -> Map)
+            // Important: We create a NEW Map instance to trigger Output/Input change detection
+            if (data.conditionFilters) {
+                this.conditionFilters = new Map(Object.entries(data.conditionFilters));
+            }
+            else {
+                this.conditionFilters = new Map();
+            }
+            // Refresh grid
+            this.currentPage = 1;
+            this.applyLocalData();
+            this.cdr.markForCheck();
+            console.log('Filters imported and applied successfully.');
+        }
+        catch (err) {
+            console.error('Error applying imported filters:', err);
+            alert('Error applying filters. Please ensure the file format is correct.');
+        }
+    }
     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" }, usesOnChanges: true, ngImport: i0, template: `
     <div class="ug-wrapper" [ngClass]="config.theme || 'ag-theme-alpine'">
@@ -3552,7 +3673,9 @@ class UltraGridComponent {
         (exportExcelClicked)="exportExcel({ includeHeaders: true })"
         (filterApplied)="onFilterApplied($event)"
         (conditionFilterChanged)="onConditionFilterChanged($event)"
-        (clearAllFilters)="onClearAllFilters()">
+        (clearAllFilters)="onClearAllFilters()"
+        (saveFiltersRequested)="handleSaveFilters()"
+        (filtersImported)="handleImportFilters($event)">
       </ug-side-bar>
 
 
@@ -3588,7 +3711,7 @@ class UltraGridComponent {
       </div>
 
     </div>
-  `, isInline: true, styles: ["bways-grid{display:block;height:100%;width:100%}.ug-wrapper{display:flex;flex-direction:row;height:100%;width:100%;border:1px solid var(--ug-border-color);background-color:var(--ug-bg-color);box-sizing:border-box;font-family:var(--ug-font-family);font-size:var(--ug-font-size);color:var(--ug-header-color);overflow:hidden}.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}.ug-wrapper{--ug-border-color: #dde2eb;--ug-bg-color: #ffffff;--ug-header-bg: #f8f8f8;--ug-header-color: #181d1f;--ug-header-hover-bg: #ececec;--ug-row-bg: #ffffff;--ug-row-hover-bg: #f1f5f9;--ug-row-selected-bg: #dcebf7;--ug-primary-color: #1890ff;--ug-footer-bg: #ffffff;--ug-footer-color: #181d1f;--ug-icon-color: #68686e;--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: 500}.ug-wrapper.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"], outputs: ["columnsUpdated", "groupModelUpdated", "valuesModelUpdated", "pivotModeUpdated", "pivotModelUpdated", "exportExcelClicked", "filterApplied", "conditionFilterChanged", "clearAllFilters"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: ["bways-grid{display:block;height:100%;width:100%}.ug-wrapper{display:flex;flex-direction:row;height:100%;width:100%;border:1px solid var(--ug-border-color);background-color:var(--ug-bg-color);box-sizing:border-box;font-family:var(--ug-font-family);font-size:var(--ug-font-size);color:var(--ug-header-color);overflow:hidden}.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}.ug-wrapper{--ug-border-color: #dde2eb;--ug-bg-color: #ffffff;--ug-header-bg: #f8f8f8;--ug-header-color: #181d1f;--ug-header-hover-bg: #ececec;--ug-row-bg: #ffffff;--ug-row-hover-bg: #f1f5f9;--ug-row-selected-bg: #dcebf7;--ug-primary-color: #1890ff;--ug-footer-bg: #ffffff;--ug-footer-color: #181d1f;--ug-icon-color: #68686e;--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: 500}.ug-wrapper.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"], outputs: ["columnsUpdated", "groupModelUpdated", "valuesModelUpdated", "pivotModeUpdated", "pivotModelUpdated", "exportExcelClicked", "filterApplied", "conditionFilterChanged", "clearAllFilters", "saveFiltersRequested", "filtersImported"] }], 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,
@@ -3684,7 +3807,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
         (exportExcelClicked)="exportExcel({ includeHeaders: true })"
         (filterApplied)="onFilterApplied($event)"
         (conditionFilterChanged)="onConditionFilterChanged($event)"
-        (clearAllFilters)="onClearAllFilters()">
+        (clearAllFilters)="onClearAllFilters()"
+        (saveFiltersRequested)="handleSaveFilters()"
+        (filtersImported)="handleImportFilters($event)">
       </ug-side-bar>