bways-grid 0.0.5

package/fesm2022/bways-grid.mjs

@@ -0,0 +1,3440 @@
+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 * as i1 from '@angular/common';
+import { CommonModule, isPlatformBrowser } from '@angular/common';
+import * as i3$1 from '@angular/cdk/scrolling';
+import { ScrollingModule } from '@angular/cdk/scrolling';
+import { BehaviorSubject, Subscription, Subject } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { DataSource } from '@angular/cdk/collections';
+import * as i3 from '@angular/cdk/drag-drop';
+import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
+import * as i2 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+
+// AUTO-GENERATED FILE. DO NOT EDIT.
+// Built from src/lib/workers/sorting.worker.ts
+const SORTING_WORKER_CODE = `"use strict";(()=>{var G=[],N=[];addEventListener("message",r=>{let{action:a,rows:n,sortModel:o,filterModel:i,conditionFilters:e,groupModel:t,aggregations:d,groupStateMap:l}=r.data;if(a==="INIT"){G=(n||[]).map(u=>({...u,type:"leaf",level:0})),postMessage({action:"INIT_DONE"});return}if(a==="FLATTEN_ONLY"){let s=m(N,l||{},r.data.groupIncludeFooter);postMessage({flatList:s});return}if(a==="EXECUTE"){let s=G;if(i&&Object.keys(i).length>0){let c={};for(let p of Object.keys(i))c[p]=new Set(i[p]);s=s.filter(p=>{for(let y of Object.keys(c)){let F=c[y],k=p.data?p.data[y]:null;if(!F.has(k))return!1}return!0})}e&&Object.keys(e).length>0&&(s=O(s,e));let u=s,f=d||{};if(t&&t.length>0?u=E(s,t,f):s.forEach(c=>c.level=0),o&&o.length>0&&L(u,o),N=u,t&&t.length>0&&r.data.groupIncludeFooter&&Object.keys(f).length>0){let p={id:"grand-total-footer",type:"group-footer",level:0,groupField:"Grand Total",groupKey:"Grand Total",data:v(s,f)};N.push(p)}let g=m(N,l||{},r.data.groupIncludeFooter),h=U(N);postMessage({flatList:g,resultTree:h})}});function U(r){return r.map(a=>{if(a.type==="leaf")return{id:a.id,type:"leaf",level:a.level};if(a.type==="group"){let n=a;return{...n,children:n.children?U(n.children):void 0}}return a})}function m(r,a,n=!1){let o=[],i=[];for(let e=r.length-1;e>=0;e--)i.push(r[e]);for(;i.length>0;){let e=i.pop();if(e.type==="group"){let t=e;if(o.push({id:t.id,type:"group",level:t.level,groupField:t.groupField,groupKey:t.groupKey,data:t.data,childCount:t.children?t.children.length:0}),!!a[t.id]&&(n&&i.push({id:\`\${t.id}-footer\`,type:"group-footer",level:t.level,groupField:t.groupField,groupKey:t.groupKey,data:{...t.data}}),t.children))for(let l=t.children.length-1;l>=0;l--)i.push(t.children[l])}else e.type==="group-footer"?o.push({id:e.id,type:"group-footer",level:e.level,groupField:e.groupField,groupKey:e.groupKey,data:e.data}):o.push({id:e.id,type:"leaf",level:e.level})}return o}function E(r,a,n){return T(r,a,0,n,"root")}function T(r,a,n,o,i){let e=a[n],t=n===a.length-1,d=new Map;for(let s of r){let u=s.data?s.data[e]:null;d.has(u)||d.set(u,[]),d.get(u).push(s)}let l=[];for(let[s,u]of d.entries()){let f=\`\${i}-\${e}-\${s}\`,g={id:f,type:"group",level:n,groupField:e,groupKey:s,data:{[e]:s},children:[]},h=v(u,o);Object.assign(g.data,h),t?(u.forEach(c=>c.level=n+1),g.children=u):g.children=T(u,a,n+1,o,f),l.push(g)}return l}function v(r,a){let n={};for(let o of Object.keys(a)){let i=a[o],e=0;if(i==="count")e=r.length;else{let t=!0,d=0,l=0;for(let s of r){let u=s.data?s.data[o]:0,f=0;typeof u=="number"?f=u:typeof u=="string"&&(f=Number(u.replace(/[^0-9.-]+/g,""))),isNaN(f)&&(f=0),i==="sum"?e+=f:i==="min"?t?e=f:e=Math.min(e,f):i==="max"?t?e=f:e=Math.max(e,f):i==="avg"&&(d+=f,l++),t=!1}i==="avg"&&(e=l>0?d/l:0)}n[o]=e}return n}function L(r,a){r.sort((n,o)=>{for(let i of a){let{field:e,direction:t}=i,d=n.data?n.data[e]:null,l=o.data?o.data[e]:null;if(d===l)continue;let s=d>l?1:-1;return t==="asc"?s:-s}return 0});for(let n of r)n.type==="group"&&n.children&&L(n.children,a)}function O(r,a){let n=Object.keys(a);return n.length===0?r:r.filter(o=>{for(let i of n){let e=a[i];if(!e||!e.condition1)continue;let t=o.data?o.data[i]:null,d=b(t,e.condition1);if(e.condition2&&e.condition2.type){let l=b(t,e.condition2);if(!(e.operator==="OR"?d||l:d&&l))return!1}else if(!d)return!1}return!0})}function b(r,a){let{type:n,value:o,valueTo:i}=a;if(n==="blank")return r==null||r==="";if(n==="notBlank")return r!=null&&r!=="";if(o==null||o==="")return!0;let e=String(r??"").toLowerCase(),t=String(o).toLowerCase();switch(n){case"contains":return e.includes(t);case"notContains":return!e.includes(t);case"equals":return!isNaN(Number(r))&&!isNaN(Number(o))?Number(r)===Number(o):e===t;case"notEqual":return!isNaN(Number(r))&&!isNaN(Number(o))?Number(r)!==Number(o):e!==t;case"startsWith":return e.startsWith(t);case"endsWith":return e.endsWith(t);case"greaterThan":return Number(r)>Number(o);case"greaterThanOrEqual":return Number(r)>=Number(o);case"lessThan":return Number(r)<Number(o);case"lessThanOrEqual":return Number(r)<=Number(o);case"inRange":if(i==null||i==="")return!0;let d=Number(r);return d>=Number(o)&&d<=Number(i);default:return!0}}})();
+`;
+
+class InfiniteScrollDataSource extends DataSource {
+    _serverDataSource;
+    _bufferSize;
+    _cachedData = [];
+    _dataStream = new BehaviorSubject([]);
+    _subscription = new Subscription();
+    _fetchedPages = new Set();
+    _pageSize = 100;
+    constructor(_serverDataSource, _bufferSize = 200) {
+        super();
+        this._serverDataSource = _serverDataSource;
+        this._bufferSize = _bufferSize;
+        this._pageSize = this._bufferSize;
+    }
+    connect(collectionViewer) {
+        this._subscription.add(collectionViewer.viewChange.subscribe(range => {
+            const startPage = this._getPageForIndex(range.start);
+            const endPage = this._getPageForIndex(range.end - 1);
+            for (let i = startPage; i <= endPage; i++) {
+                this._fetchPage(i);
+            }
+        }));
+        return this._dataStream;
+    }
+    disconnect() {
+        this._subscription.unsubscribe();
+    }
+    _getPageForIndex(index) {
+        return Math.floor(index / this._pageSize);
+    }
+    _fetchPage(page) {
+        if (this._fetchedPages.has(page)) {
+            return;
+        }
+        this._fetchedPages.add(page);
+        const startRow = page * this._pageSize;
+        const endRow = startRow + this._pageSize;
+        this._serverDataSource.getRows({ startRow, endRow }).subscribe(res => {
+            // Initialize array to totalCount if not yet done
+            if (this._cachedData.length !== res.totalCount) {
+                this._cachedData = Array.from({ length: res.totalCount }).fill(undefined);
+            }
+            this._cachedData.splice(startRow, res.rows.length, ...res.rows);
+            this._dataStream.next([...this._cachedData]);
+        });
+    }
+}
+
+class ColumnResizeDirective {
+    el;
+    renderer;
+    columnField;
+    resizeEnd = new EventEmitter();
+    startX;
+    startWidth;
+    minWidth = 50;
+    constructor(el, renderer) {
+        this.el = el;
+        this.renderer = renderer;
+    }
+    onMouseDown(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.startX = event.pageX;
+        this.startWidth = this.el.nativeElement.parentElement.offsetWidth;
+        const mouseMoveListener = this.renderer.listen('document', 'mousemove', (e) => {
+            const width = Math.max(this.minWidth, this.startWidth + (e.pageX - this.startX));
+            this.renderer.setStyle(this.el.nativeElement.parentElement, 'width', `${width}px`);
+        });
+        const mouseUpListener = this.renderer.listen('document', 'mouseup', (e) => {
+            mouseMoveListener(); // Unregister
+            mouseUpListener(); // Unregister
+            const finalWidth = Math.max(this.minWidth, this.startWidth + (e.pageX - this.startX));
+            this.resizeEnd.emit({ field: this.columnField, width: finalWidth });
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ColumnResizeDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", type: ColumnResizeDirective, isStandalone: true, selector: "[ugColumnResize]", inputs: { columnField: ["ugColumnResize", "columnField"] }, outputs: { resizeEnd: "resizeEnd" }, host: { listeners: { "mousedown": "onMouseDown($event)" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ColumnResizeDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ugColumnResize]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { columnField: [{
+                type: Input,
+                args: ['ugColumnResize']
+            }], resizeEnd: [{
+                type: Output
+            }], onMouseDown: [{
+                type: HostListener,
+                args: ['mousedown', ['$event']]
+            }] } });
+
+class HeaderComponent {
+    columns = [];
+    sortModel = [];
+    isAllSelected = false;
+    sortChanged = new EventEmitter();
+    columnsReordered = new EventEmitter();
+    columnResized = new EventEmitter();
+    headerCheckboxClicked = new EventEmitter();
+    menuClicked = new EventEmitter();
+    filterClicked = new EventEmitter();
+    getSortDirection(field) {
+        const model = this.sortModel.find(m => m.field === field);
+        return model ? model.direction : null;
+    }
+    onSort(col) {
+        const current = this.getSortDirection(col.field);
+        let next = 'asc';
+        if (current === 'asc')
+            next = 'desc';
+        else if (current === 'desc')
+            next = null;
+        this.sortChanged.emit({ field: col.field, direction: next });
+    }
+    onColumnDrop(event) {
+        const reordered = [...this.columns];
+        moveItemInArray(reordered, event.previousIndex, event.currentIndex);
+        this.columnsReordered.emit(reordered);
+    }
+    onResize(event) {
+        this.columnResized.emit(event);
+    }
+    onHeaderCheckboxClick(event) {
+        event.stopPropagation();
+        this.headerCheckboxClicked.emit(!this.isAllSelected);
+    }
+    onMenuClick(column, event) {
+        event.stopPropagation();
+        this.menuClicked.emit({ column, event });
+    }
+    onFilterClick(column, event) {
+        event.stopPropagation();
+        this.filterClicked.emit({ column, event });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: HeaderComponent, isStandalone: true, selector: "ug-header", inputs: { columns: "columns", sortModel: "sortModel", isAllSelected: "isAllSelected" }, outputs: { sortChanged: "sortChanged", columnsReordered: "columnsReordered", columnResized: "columnResized", headerCheckboxClicked: "headerCheckboxClicked", menuClicked: "menuClicked", filterClicked: "filterClicked" }, ngImport: i0, template: `
+    <div class="ug-header-row" cdkDropList cdkDropListOrientation="horizontal" (cdkDropListDropped)="onColumnDrop($event)">
+      <div 
+        class="ug-header-cell" 
+        *ngFor="let col of columns; let isLast = last" 
+        cdkDrag
+        [style.width.px]="col.width || 200"
+        [style.min-width.px]="col.minWidth"
+        [style.max-width.px]="col.maxWidth"
+        [class.ug-cell-hide]="col.hide"
+        [class.ug-pinned-left]="col.pinned === 'left'"
+        [class.ug-pinned-right]="col.pinned === 'right'"
+        [style.left.px]="col._leftOffset"
+        [style.right.px]="col._rightOffset"
+      >
+        <div class="ug-header-checkbox" *ngIf="col.headerCheckboxSelection" (click)="onHeaderCheckboxClick($event)">
+           <input type="checkbox" [checked]="isAllSelected" />
+        </div>
+
+        <div class="ug-header-cell-label" (click)="col.sortable !== false ? onSort(col) : null" [class.sortable]="col.sortable !== false">
+          <span>{{ col.headerName || col.field }}</span>
+          
+          <div class="ug-sort-icon" *ngIf="col.sortable !== false && getSortDirection(col.field)">
+            <svg *ngIf="getSortDirection(col.field) === 'desc'" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"></line><polyline points="19 12 12 19 5 12"></polyline></svg>
+            <svg *ngIf="getSortDirection(col.field) === 'asc'" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="19" x2="12" y2="5"></line><polyline points="5 12 12 5 19 12"></polyline></svg>
+          </div>
+        </div>
+
+        <div class="ug-header-filter-icon" (click)="onFilterClick(col, $event)">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon></svg>
+        </div>
+
+        <div class="ug-header-menu-icon" (click)="onMenuClick(col, $event)">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"></circle><circle cx="12" cy="5" r="1"></circle><circle cx="12" cy="19" r="1"></circle></svg>
+        </div>
+
+        <div class="ug-header-divider" *ngIf="!isLast"></div>
+
+        <div 
+          *ngIf="col.resizable !== false"
+          class="ug-resize-handle" 
+          [class.ug-hide-resizer]="isLast"
+          [ugColumnResize]="col.field" 
+          (resizeEnd)="onResize($event)"
+          (click)="$event.stopPropagation()">
+        </div>
+      </div>
+    </div>
+  `, isInline: true, styles: ["ug-header{display:block;background-color:var(--ug-header-bg);border-bottom:1px solid var(--ug-border-color);position:sticky;top:0;z-index:10;color:var(--ug-header-color);font-weight:var(--ug-header-font-weight)}.ug-header-row{display:inline-flex;min-width:100%;height:48px}.ug-header-cell{display:flex;align-items:center;padding:0 0 0 16px;box-sizing:border-box;position:relative;-webkit-user-select:none;user-select:none;background-color:var(--ug-header-bg);transition:background-color .2s;flex-shrink:0;flex-grow:1}.ug-header-cell:hover{background-color:var(--ug-header-hover-bg)}.ug-pinned-left{position:sticky;z-index:2;border-right:1px solid var(--ug-border-color)}.ug-pinned-right{position:sticky;z-index:2;border-left:1px solid var(--ug-border-color)}.ug-header-checkbox{margin-right:12px;display:flex;align-items:center}.ug-header-checkbox input[type=checkbox]{width:16px;height:16px;cursor:pointer;accent-color:var(--ug-primary-color)}.ug-header-cell-label{flex:1;display:flex;align-items:center;overflow:hidden;white-space:nowrap;height:100%}.ug-header-cell-label.sortable{cursor:pointer}.ug-header-cell-label span{overflow:hidden;text-overflow:ellipsis}.ug-sort-icon{margin-left:6px;display:flex;align-items:center;color:var(--ug-icon-color)}.ug-header-menu-icon,.ug-header-filter-icon{padding:0 4px;cursor:pointer;color:var(--ug-icon-color);display:flex;align-items:center;opacity:0;transition:opacity .2s}.ug-header-menu-icon{padding-right:8px}.ug-header-cell:hover .ug-header-menu-icon,.ug-header-cell:hover .ug-header-filter-icon{opacity:1}.ug-header-divider{width:1px;height:50%;background-color:var(--ug-border-color);margin-right:2px}.ug-resize-handle{position:absolute;right:0;top:0;bottom:0;width:5px;cursor:col-resize;background-color:transparent;z-index:1}.ug-resize-handle:hover,.ug-resize-handle:active{background-color:var(--ug-primary-color)}.ug-hide-resizer{display:none!important}.cdk-drag-preview{box-sizing:border-box;background-color:var(--ug-header-bg);border:1px solid var(--ug-border-color);box-shadow:0 4px 6px -1px #0000001a;display:flex;align-items:center;padding:0 16px;font-weight:var(--ug-header-font-weight);color:var(--ug-header-color);font-size:var(--ug-font-size);font-family:var(--ug-font-family)}.cdk-drag-placeholder{opacity:.3}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: DragDropModule }, { kind: "directive", type: i3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: ColumnResizeDirective, selector: "[ugColumnResize]", inputs: ["ugColumnResize"], outputs: ["resizeEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: HeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ug-header', standalone: true, imports: [CommonModule, DragDropModule, ColumnResizeDirective], template: `
+    <div class="ug-header-row" cdkDropList cdkDropListOrientation="horizontal" (cdkDropListDropped)="onColumnDrop($event)">
+      <div 
+        class="ug-header-cell" 
+        *ngFor="let col of columns; let isLast = last" 
+        cdkDrag
+        [style.width.px]="col.width || 200"
+        [style.min-width.px]="col.minWidth"
+        [style.max-width.px]="col.maxWidth"
+        [class.ug-cell-hide]="col.hide"
+        [class.ug-pinned-left]="col.pinned === 'left'"
+        [class.ug-pinned-right]="col.pinned === 'right'"
+        [style.left.px]="col._leftOffset"
+        [style.right.px]="col._rightOffset"
+      >
+        <div class="ug-header-checkbox" *ngIf="col.headerCheckboxSelection" (click)="onHeaderCheckboxClick($event)">
+           <input type="checkbox" [checked]="isAllSelected" />
+        </div>
+
+        <div class="ug-header-cell-label" (click)="col.sortable !== false ? onSort(col) : null" [class.sortable]="col.sortable !== false">
+          <span>{{ col.headerName || col.field }}</span>
+          
+          <div class="ug-sort-icon" *ngIf="col.sortable !== false && getSortDirection(col.field)">
+            <svg *ngIf="getSortDirection(col.field) === 'desc'" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"></line><polyline points="19 12 12 19 5 12"></polyline></svg>
+            <svg *ngIf="getSortDirection(col.field) === 'asc'" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="19" x2="12" y2="5"></line><polyline points="5 12 12 5 19 12"></polyline></svg>
+          </div>
+        </div>
+
+        <div class="ug-header-filter-icon" (click)="onFilterClick(col, $event)">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon></svg>
+        </div>
+
+        <div class="ug-header-menu-icon" (click)="onMenuClick(col, $event)">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"></circle><circle cx="12" cy="5" r="1"></circle><circle cx="12" cy="19" r="1"></circle></svg>
+        </div>
+
+        <div class="ug-header-divider" *ngIf="!isLast"></div>
+
+        <div 
+          *ngIf="col.resizable !== false"
+          class="ug-resize-handle" 
+          [class.ug-hide-resizer]="isLast"
+          [ugColumnResize]="col.field" 
+          (resizeEnd)="onResize($event)"
+          (click)="$event.stopPropagation()">
+        </div>
+      </div>
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: ["ug-header{display:block;background-color:var(--ug-header-bg);border-bottom:1px solid var(--ug-border-color);position:sticky;top:0;z-index:10;color:var(--ug-header-color);font-weight:var(--ug-header-font-weight)}.ug-header-row{display:inline-flex;min-width:100%;height:48px}.ug-header-cell{display:flex;align-items:center;padding:0 0 0 16px;box-sizing:border-box;position:relative;-webkit-user-select:none;user-select:none;background-color:var(--ug-header-bg);transition:background-color .2s;flex-shrink:0;flex-grow:1}.ug-header-cell:hover{background-color:var(--ug-header-hover-bg)}.ug-pinned-left{position:sticky;z-index:2;border-right:1px solid var(--ug-border-color)}.ug-pinned-right{position:sticky;z-index:2;border-left:1px solid var(--ug-border-color)}.ug-header-checkbox{margin-right:12px;display:flex;align-items:center}.ug-header-checkbox input[type=checkbox]{width:16px;height:16px;cursor:pointer;accent-color:var(--ug-primary-color)}.ug-header-cell-label{flex:1;display:flex;align-items:center;overflow:hidden;white-space:nowrap;height:100%}.ug-header-cell-label.sortable{cursor:pointer}.ug-header-cell-label span{overflow:hidden;text-overflow:ellipsis}.ug-sort-icon{margin-left:6px;display:flex;align-items:center;color:var(--ug-icon-color)}.ug-header-menu-icon,.ug-header-filter-icon{padding:0 4px;cursor:pointer;color:var(--ug-icon-color);display:flex;align-items:center;opacity:0;transition:opacity .2s}.ug-header-menu-icon{padding-right:8px}.ug-header-cell:hover .ug-header-menu-icon,.ug-header-cell:hover .ug-header-filter-icon{opacity:1}.ug-header-divider{width:1px;height:50%;background-color:var(--ug-border-color);margin-right:2px}.ug-resize-handle{position:absolute;right:0;top:0;bottom:0;width:5px;cursor:col-resize;background-color:transparent;z-index:1}.ug-resize-handle:hover,.ug-resize-handle:active{background-color:var(--ug-primary-color)}.ug-hide-resizer{display:none!important}.cdk-drag-preview{box-sizing:border-box;background-color:var(--ug-header-bg);border:1px solid var(--ug-border-color);box-shadow:0 4px 6px -1px #0000001a;display:flex;align-items:center;padding:0 16px;font-weight:var(--ug-header-font-weight);color:var(--ug-header-color);font-size:var(--ug-font-size);font-family:var(--ug-font-family)}.cdk-drag-placeholder{opacity:.3}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
+        }], propDecorators: { columns: [{
+                type: Input
+            }], sortModel: [{
+                type: Input
+            }], isAllSelected: [{
+                type: Input
+            }], sortChanged: [{
+                type: Output
+            }], columnsReordered: [{
+                type: Output
+            }], columnResized: [{
+                type: Output
+            }], headerCheckboxClicked: [{
+                type: Output
+            }], menuClicked: [{
+                type: Output
+            }], filterClicked: [{
+                type: Output
+            }] } });
+
+class CellComponent {
+    column;
+    row;
+    isSelected = false;
+    isFirstColumn = false;
+    groupExpanded = false;
+    groupToggleClicked = new EventEmitter();
+    get isGroup() {
+        return !!this.row && this.row.type === 'group';
+    }
+    get isGroupFooter() {
+        return !!this.row && this.row.type === 'group-footer';
+    }
+    get value() {
+        return this.row && this.row.data ? this.row.data[this.column.field] : null;
+    }
+    get formattedFooterValue() {
+        const v = this.value;
+        if (v == null)
+            return '';
+        if (typeof v === 'number' && isFinite(v)) {
+            return v.toLocaleString();
+        }
+        // Try parsing string numbers
+        const num = Number(v);
+        if (!isNaN(num) && isFinite(num)) {
+            return num.toLocaleString();
+        }
+        return v;
+    }
+    onCheckboxClick(event) {
+        // Handled up the pipe by the row selection
+    }
+    onGroupToggleClick(event) {
+        event.stopPropagation();
+        this.groupToggleClicked.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: CellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: CellComponent, isStandalone: true, selector: "ug-cell", inputs: { column: "column", row: "row", isSelected: "isSelected", isFirstColumn: "isFirstColumn", groupExpanded: "groupExpanded" }, outputs: { groupToggleClicked: "groupToggleClicked" }, ngImport: i0, template: `
+    <div class="ug-cell-wrapper" [style.padding-left.px]="isFirstColumn && row.level ? row.level * 20 : 0">
+      
+      <!-- Group Expand/Collapse Caret -->
+      <div 
+        class="ug-group-caret" 
+        *ngIf="isFirstColumn && isGroup"
+        (click)="onGroupToggleClick($event)">
+        <svg *ngIf="groupExpanded" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"></polyline></svg>
+        <svg *ngIf="!groupExpanded" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"></polyline></svg>
+      </div>
+
+      <div class="ug-cell-checkbox" *ngIf="column.checkboxSelection && row.type !== 'group-footer'" (click)="onCheckboxClick($event)">
+        <input type="checkbox" [checked]="isSelected" />
+      </div>
+      <ng-container *ngIf="column.cellTemplate; else defaultCell">
+        <ng-container *ngTemplateOutlet="column.cellTemplate; context: { $implicit: row?.data, row: row, column: column }"></ng-container>
+      </ng-container>
+      <ng-template #defaultCell>
+        <div class="ug-cell-content" [title]="value">
+          <ng-container *ngIf="isFirstColumn && isGroup">
+            <b>{{ value }}</b>
+            <span class="ug-group-count" *ngIf="row?.type === 'group'">({{ $any(row).childCount || 0 }})</span>
+          </ng-container>
+          <ng-container *ngIf="isGroupFooter">
+            <b *ngIf="isFirstColumn">
+              {{ $any(row).groupField === 'Grand Total' ? 'Grand Total' : 'Total' }}
+            </b>
+            <span *ngIf="!isFirstColumn">{{ formattedFooterValue }}</span>
+          </ng-container>
+          <ng-container *ngIf="!(isFirstColumn && isGroup) && !isGroupFooter">
+            {{ value }}
+          </ng-container>
+        </div>
+      </ng-template>
+    </div>
+  `, isInline: true, styles: ["ug-cell{display:flex;align-items:center;padding:0 16px;overflow:hidden;text-overflow:ellipsis;flex-shrink:0;flex-grow:1;white-space:nowrap;box-sizing:border-box;height:100%}.ug-cell-wrapper{display:flex;align-items:center;width:100%;height:100%;overflow:hidden}.ug-cell-checkbox{margin-right:12px;display:flex;align-items:center}.ug-cell-checkbox input[type=checkbox]{width:16px;height:16px;cursor:pointer;accent-color:var(--ug-primary-color)}.ug-cell-content{overflow:hidden;text-overflow:ellipsis;width:100%;display:flex;align-items:center;gap:6px}.ug-group-caret{cursor:pointer;display:flex;align-items:center;justify-content:center;width:20px;height:20px;margin-right:4px;color:var(--ug-text-color);opacity:.7;transition:opacity .2s}.ug-group-caret:hover{opacity:1}.ug-group-count{font-size:.85em;opacity:.6}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: CellComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ug-cell', standalone: true, imports: [CommonModule], template: `
+    <div class="ug-cell-wrapper" [style.padding-left.px]="isFirstColumn && row.level ? row.level * 20 : 0">
+      
+      <!-- Group Expand/Collapse Caret -->
+      <div 
+        class="ug-group-caret" 
+        *ngIf="isFirstColumn && isGroup"
+        (click)="onGroupToggleClick($event)">
+        <svg *ngIf="groupExpanded" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"></polyline></svg>
+        <svg *ngIf="!groupExpanded" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"></polyline></svg>
+      </div>
+
+      <div class="ug-cell-checkbox" *ngIf="column.checkboxSelection && row.type !== 'group-footer'" (click)="onCheckboxClick($event)">
+        <input type="checkbox" [checked]="isSelected" />
+      </div>
+      <ng-container *ngIf="column.cellTemplate; else defaultCell">
+        <ng-container *ngTemplateOutlet="column.cellTemplate; context: { $implicit: row?.data, row: row, column: column }"></ng-container>
+      </ng-container>
+      <ng-template #defaultCell>
+        <div class="ug-cell-content" [title]="value">
+          <ng-container *ngIf="isFirstColumn && isGroup">
+            <b>{{ value }}</b>
+            <span class="ug-group-count" *ngIf="row?.type === 'group'">({{ $any(row).childCount || 0 }})</span>
+          </ng-container>
+          <ng-container *ngIf="isGroupFooter">
+            <b *ngIf="isFirstColumn">
+              {{ $any(row).groupField === 'Grand Total' ? 'Grand Total' : 'Total' }}
+            </b>
+            <span *ngIf="!isFirstColumn">{{ formattedFooterValue }}</span>
+          </ng-container>
+          <ng-container *ngIf="!(isFirstColumn && isGroup) && !isGroupFooter">
+            {{ value }}
+          </ng-container>
+        </div>
+      </ng-template>
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: ["ug-cell{display:flex;align-items:center;padding:0 16px;overflow:hidden;text-overflow:ellipsis;flex-shrink:0;flex-grow:1;white-space:nowrap;box-sizing:border-box;height:100%}.ug-cell-wrapper{display:flex;align-items:center;width:100%;height:100%;overflow:hidden}.ug-cell-checkbox{margin-right:12px;display:flex;align-items:center}.ug-cell-checkbox input[type=checkbox]{width:16px;height:16px;cursor:pointer;accent-color:var(--ug-primary-color)}.ug-cell-content{overflow:hidden;text-overflow:ellipsis;width:100%;display:flex;align-items:center;gap:6px}.ug-group-caret{cursor:pointer;display:flex;align-items:center;justify-content:center;width:20px;height:20px;margin-right:4px;color:var(--ug-text-color);opacity:.7;transition:opacity .2s}.ug-group-caret:hover{opacity:1}.ug-group-count{font-size:.85em;opacity:.6}\n"] }]
+        }], propDecorators: { column: [{
+                type: Input
+            }], row: [{
+                type: Input
+            }], isSelected: [{
+                type: Input
+            }], isFirstColumn: [{
+                type: Input
+            }], groupExpanded: [{
+                type: Input
+            }], groupToggleClicked: [{
+                type: Output
+            }] } });
+
+class RowComponent {
+    columns = [];
+    row;
+    rowHeight = 42;
+    isExpanded = false;
+    selectionVersion = 0;
+    groupToggled = new EventEmitter();
+    get isSelected() {
+        return this.row?.selected;
+    }
+    get isGroupFooter() {
+        return this.row?.type === 'group-footer';
+    }
+    get height() {
+        return this.rowHeight;
+    }
+    trackByField(index, col) {
+        return col.field;
+    }
+    onGroupToggle() {
+        this.groupToggled.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: RowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: RowComponent, isStandalone: true, selector: "ug-row", inputs: { columns: "columns", row: "row", rowHeight: "rowHeight", isExpanded: "isExpanded", selectionVersion: "selectionVersion" }, outputs: { groupToggled: "groupToggled" }, host: { properties: { "class.ug-row-selected": "this.isSelected", "class.ug-row-group-footer": "this.isGroupFooter", "style.height.px": "this.height" } }, ngImport: i0, template: `
+    <div class="ug-row-cells">
+      <ug-cell 
+        *ngFor="let col of columns; let isFirst = first; trackBy: trackByField"
+        [column]="col"
+        [row]="row"
+        [isSelected]="$any(row)?.selected"
+        [isFirstColumn]="isFirst"
+        [groupExpanded]="isExpanded"
+        (groupToggleClicked)="onGroupToggle()"
+        [style.width.px]="col.width || 200"
+        [style.min-width.px]="col.minWidth"
+        [style.max-width.px]="col.maxWidth"
+        [class.ug-cell-hide]="col.hide"
+        [class.ug-pinned-left]="col.pinned === 'left'"
+        [class.ug-pinned-right]="col.pinned === 'right'"
+        [style.left.px]="col._leftOffset"
+        [style.right.px]="col._rightOffset">
+      </ug-cell>
+    </div>
+  `, isInline: true, styles: ["ug-row{display:inline-flex;min-width:100%;border-bottom:1px solid var(--ug-border-color);background-color:var(--ug-row-bg);box-sizing:border-box;transition:background-color .2s}ug-row:hover{background-color:var(--ug-row-hover-bg)}ug-row.ug-row-selected{background-color:var(--ug-row-selected-bg)}ug-row.ug-row-group-footer{background-color:var(--ug-group-footer-bg, #f8f9fa);font-weight:600;border-top:1px solid var(--ug-border-color);border-bottom:2px solid var(--ug-border-color)}ug-row.ug-row-group-footer:hover{background-color:var(--ug-group-footer-bg, #f8f9fa)}.ug-row-cells{display:flex;width:100%;height:100%}.ug-cell-hide{display:none!important}ug-cell.ug-pinned-left{position:sticky;z-index:1;border-right:1px solid var(--ug-border-color);background-color:inherit}ug-cell.ug-pinned-right{position:sticky;z-index:1;border-left:1px solid var(--ug-border-color);background-color:inherit}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: CellComponent, selector: "ug-cell", inputs: ["column", "row", "isSelected", "isFirstColumn", "groupExpanded"], outputs: ["groupToggleClicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: RowComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ug-row', standalone: true, imports: [CommonModule, CellComponent], template: `
+    <div class="ug-row-cells">
+      <ug-cell 
+        *ngFor="let col of columns; let isFirst = first; trackBy: trackByField"
+        [column]="col"
+        [row]="row"
+        [isSelected]="$any(row)?.selected"
+        [isFirstColumn]="isFirst"
+        [groupExpanded]="isExpanded"
+        (groupToggleClicked)="onGroupToggle()"
+        [style.width.px]="col.width || 200"
+        [style.min-width.px]="col.minWidth"
+        [style.max-width.px]="col.maxWidth"
+        [class.ug-cell-hide]="col.hide"
+        [class.ug-pinned-left]="col.pinned === 'left'"
+        [class.ug-pinned-right]="col.pinned === 'right'"
+        [style.left.px]="col._leftOffset"
+        [style.right.px]="col._rightOffset">
+      </ug-cell>
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: ["ug-row{display:inline-flex;min-width:100%;border-bottom:1px solid var(--ug-border-color);background-color:var(--ug-row-bg);box-sizing:border-box;transition:background-color .2s}ug-row:hover{background-color:var(--ug-row-hover-bg)}ug-row.ug-row-selected{background-color:var(--ug-row-selected-bg)}ug-row.ug-row-group-footer{background-color:var(--ug-group-footer-bg, #f8f9fa);font-weight:600;border-top:1px solid var(--ug-border-color);border-bottom:2px solid var(--ug-border-color)}ug-row.ug-row-group-footer:hover{background-color:var(--ug-group-footer-bg, #f8f9fa)}.ug-row-cells{display:flex;width:100%;height:100%}.ug-cell-hide{display:none!important}ug-cell.ug-pinned-left{position:sticky;z-index:1;border-right:1px solid var(--ug-border-color);background-color:inherit}ug-cell.ug-pinned-right{position:sticky;z-index:1;border-left:1px solid var(--ug-border-color);background-color:inherit}\n"] }]
+        }], propDecorators: { columns: [{
+                type: Input
+            }], row: [{
+                type: Input
+            }], rowHeight: [{
+                type: Input
+            }], isExpanded: [{
+                type: Input
+            }], selectionVersion: [{
+                type: Input
+            }], groupToggled: [{
+                type: Output
+            }], isSelected: [{
+                type: HostBinding,
+                args: ['class.ug-row-selected']
+            }], isGroupFooter: [{
+                type: HostBinding,
+                args: ['class.ug-row-group-footer']
+            }], height: [{
+                type: HostBinding,
+                args: ['style.height.px']
+            }] } });
+
+class PaginationComponent {
+    totalCount = 0;
+    pageSize = 100;
+    currentPage = 1;
+    pageChanged = new EventEmitter();
+    pageSizeChanged = new EventEmitter(); // Added new output
+    get showControls() { return true; }
+    get totalPages() { return Math.max(1, Math.ceil(this.totalCount / this.pageSize)); }
+    get isFirstPage() { return this.currentPage <= 1; }
+    // Provide for infinite scrolling where total count might not be known immediately
+    get isLastPage() { return this.totalCount ? this.currentPage >= this.totalPages : false; }
+    get startRow() { return this.totalCount === 0 && this.currentPage === 1 ? 0 : (this.currentPage - 1) * this.pageSize + 1; }
+    get endRow() { return this.totalCount ? Math.min(this.currentPage * this.pageSize, this.totalCount) : this.currentPage * this.pageSize; }
+    onPrev() {
+        if (!this.isFirstPage) {
+            this.pageChanged.emit(this.currentPage - 1);
+        }
+    }
+    onNext() {
+        if (!this.isLastPage) {
+            this.pageChanged.emit(this.currentPage + 1);
+        }
+    }
+    // Added new method
+    onPage(page) {
+        if (page >= 1 && page <= this.totalPages && page !== this.currentPage) {
+            this.pageChanged.emit(page);
+        }
+    }
+    get isAllSelectedSize() {
+        return this.pageSize === this.totalCount && this.totalCount > 0;
+    }
+    // Added new method
+    onPageSizeChange(size) {
+        if (size === 'All') {
+            this.pageSizeChanged.emit(this.totalCount);
+        }
+        else {
+            this.pageSizeChanged.emit(Number(size));
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: PaginationComponent, isStandalone: true, selector: "ug-pagination", inputs: { totalCount: "totalCount", pageSize: "pageSize", currentPage: "currentPage" }, outputs: { pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged" }, ngImport: i0, template: `
+    <div class="ug-pagination-container">
+      <div class="ug-pagination-left">
+        <!-- Optional space for additional footer info -->
+      </div>
+      <div class="ug-pagination-right" *ngIf="showControls">
+        <div class="ug-page-size">
+          <span>Page Size:</span>
+          <select [ngModel]="isAllSelectedSize ? 'All' : pageSize" (ngModelChange)="onPageSizeChange($event)">
+            <option [ngValue]="10">10</option>
+            <option [ngValue]="25">25</option>
+            <option [ngValue]="50">50</option>
+            <option [ngValue]="100">100</option>
+            <option [ngValue]="500">500</option>
+            <option [ngValue]="'All'">All</option>
+          </select>
+        </div>
+        <div class="ug-pagination-info">
+          {{ startRow }} to {{ endRow }} of {{ totalCount || 'many' }}
+        </div>
+        <div class="ug-pagination-controls">
+          <button [disabled]="isFirstPage" (click)="onPage(1)" title="First Page">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 17l-5-5 5-5M18 17l-5-5 5-5M6 17V7"></path></svg>
+          </button>
+          <button [disabled]="isFirstPage" (click)="onPrev()" title="Previous Page">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"></path></svg>
+          </button>
+          <span class="ug-page-info">Page {{ currentPage }} of {{ totalPages }}</span>
+          <button [disabled]="isLastPage" (click)="onNext()" title="Next Page">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"></path></svg>
+          </button>
+          <button [disabled]="isLastPage" (click)="onPage(totalPages)" title="Last Page">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 17l5-5-5-5M6 17l5-5-5-5M18 17V7"></path></svg>
+          </button>
+        </div>
+      </div>
+    </div>
+  `, isInline: true, styles: ["ug-pagination{display:block;border-top:1px solid var(--ug-border-color);background-color:var(--ug-footer-bg);color:var(--ug-footer-color);font-size:var(--ug-font-size)}.ug-pagination-container{display:flex;justify-content:space-between;align-items:center;height:48px;padding:0 16px}.ug-pagination-right{display:flex;align-items:center;gap:24px}.ug-page-size{display:flex;align-items:center;gap:8px}.ug-page-size select{border:1px solid var(--ug-border-color);border-radius:4px;padding:4px 8px;background-color:var(--ug-bg-color);color:var(--ug-footer-color);cursor:pointer;font-family:var(--ug-font-family)}.ug-pagination-info{font-weight:var(--ug-header-font-weight)}.ug-pagination-controls{display:flex;align-items:center;gap:8px}.ug-pagination-controls button{background:none;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ug-icon-color);padding:4px;border-radius:4px}.ug-pagination-controls button:disabled{opacity:.3;cursor:not-allowed}.ug-pagination-controls button:not(:disabled):hover{background-color:var(--ug-row-hover-bg)}.ug-page-info{margin:0 4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: PaginationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ug-pagination', standalone: true, imports: [CommonModule, FormsModule], template: `
+    <div class="ug-pagination-container">
+      <div class="ug-pagination-left">
+        <!-- Optional space for additional footer info -->
+      </div>
+      <div class="ug-pagination-right" *ngIf="showControls">
+        <div class="ug-page-size">
+          <span>Page Size:</span>
+          <select [ngModel]="isAllSelectedSize ? 'All' : pageSize" (ngModelChange)="onPageSizeChange($event)">
+            <option [ngValue]="10">10</option>
+            <option [ngValue]="25">25</option>
+            <option [ngValue]="50">50</option>
+            <option [ngValue]="100">100</option>
+            <option [ngValue]="500">500</option>
+            <option [ngValue]="'All'">All</option>
+          </select>
+        </div>
+        <div class="ug-pagination-info">
+          {{ startRow }} to {{ endRow }} of {{ totalCount || 'many' }}
+        </div>
+        <div class="ug-pagination-controls">
+          <button [disabled]="isFirstPage" (click)="onPage(1)" title="First Page">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 17l-5-5 5-5M18 17l-5-5 5-5M6 17V7"></path></svg>
+          </button>
+          <button [disabled]="isFirstPage" (click)="onPrev()" title="Previous Page">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"></path></svg>
+          </button>
+          <span class="ug-page-info">Page {{ currentPage }} of {{ totalPages }}</span>
+          <button [disabled]="isLastPage" (click)="onNext()" title="Next Page">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"></path></svg>
+          </button>
+          <button [disabled]="isLastPage" (click)="onPage(totalPages)" title="Last Page">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 17l5-5-5-5M6 17l5-5-5-5M18 17V7"></path></svg>
+          </button>
+        </div>
+      </div>
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: ["ug-pagination{display:block;border-top:1px solid var(--ug-border-color);background-color:var(--ug-footer-bg);color:var(--ug-footer-color);font-size:var(--ug-font-size)}.ug-pagination-container{display:flex;justify-content:space-between;align-items:center;height:48px;padding:0 16px}.ug-pagination-right{display:flex;align-items:center;gap:24px}.ug-page-size{display:flex;align-items:center;gap:8px}.ug-page-size select{border:1px solid var(--ug-border-color);border-radius:4px;padding:4px 8px;background-color:var(--ug-bg-color);color:var(--ug-footer-color);cursor:pointer;font-family:var(--ug-font-family)}.ug-pagination-info{font-weight:var(--ug-header-font-weight)}.ug-pagination-controls{display:flex;align-items:center;gap:8px}.ug-pagination-controls button{background:none;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ug-icon-color);padding:4px;border-radius:4px}.ug-pagination-controls button:disabled{opacity:.3;cursor:not-allowed}.ug-pagination-controls button:not(:disabled):hover{background-color:var(--ug-row-hover-bg)}.ug-page-info{margin:0 4px}\n"] }]
+        }], propDecorators: { totalCount: [{
+                type: Input
+            }], pageSize: [{
+                type: Input
+            }], currentPage: [{
+                type: Input
+            }], pageChanged: [{
+                type: Output
+            }], pageSizeChanged: [{
+                type: Output
+            }] } });
+
+class HeaderMenuComponent {
+    el;
+    column;
+    isOpen = false;
+    position = { x: 0, y: 0 };
+    groupModel = [];
+    closeMenu = new EventEmitter();
+    sort = new EventEmitter();
+    pin = new EventEmitter();
+    autosize = new EventEmitter();
+    group = new EventEmitter();
+    chooseColumns = new EventEmitter();
+    showPinSubmenu = false;
+    get isGrouped() {
+        return !!this.column && this.groupModel.includes(this.column.field);
+    }
+    constructor(el) {
+        this.el = el;
+    }
+    onClose() {
+        this.closeMenu.emit();
+    }
+    onSort(direction) {
+        if (this.column) {
+            this.sort.emit({ field: this.column.field, direction });
+        }
+        this.onClose();
+    }
+    onPin(pinned) {
+        if (this.column) {
+            this.pin.emit({ field: this.column.field, pinned });
+        }
+        this.onClose();
+    }
+    onAutosize(all) {
+        if (this.column) {
+            this.autosize.emit({ field: this.column.field, all });
+        }
+        this.onClose();
+    }
+    onGroup() {
+        if (this.column) {
+            this.group.emit({ field: this.column.field });
+        }
+        this.onClose();
+    }
+    onChooseColumns() {
+        this.chooseColumns.emit();
+        this.onClose();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: HeaderMenuComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: HeaderMenuComponent, isStandalone: true, selector: "ug-header-menu", inputs: { column: "column", isOpen: "isOpen", position: "position", groupModel: "groupModel" }, outputs: { closeMenu: "closeMenu", sort: "sort", pin: "pin", autosize: "autosize", group: "group", chooseColumns: "chooseColumns" }, ngImport: i0, template: `
+    <div class="ug-header-menu-backdrop" *ngIf="isOpen" (click)="onClose()"></div>
+    <div class="ug-header-menu-panel" *ngIf="isOpen" [style.top.px]="position.y" [style.left.px]="position.x">
+      
+      <!-- Sorting -->
+      <div class="ug-menu-item" (click)="onSort('asc')">
+        <svg class="ug-menu-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 19V5M5 12l7-7 7 7"/></svg>
+        <span>Sort Ascending</span>
+      </div>
+      <div class="ug-menu-item" (click)="onSort('desc')">
+        <svg class="ug-menu-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12l7 7 7-7"/></svg>
+        <span>Sort Descending</span>
+      </div>
+
+      <div class="ug-menu-separator"></div>
+
+      <!-- Pinning (Submenu trigger) -->
+      <div class="ug-menu-item ug-has-submenu" (mouseenter)="showPinSubmenu = true" (mouseleave)="showPinSubmenu = false">
+        <svg class="ug-menu-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 10l-4 4-4-4"/></svg>
+        <span>Pin Column</span>
+        <svg class="ug-menu-arrow" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
+
+        <div class="ug-submenu" *ngIf="showPinSubmenu">
+          <div class="ug-menu-item" (click)="onPin(null)">
+            <svg class="ug-menu-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" [style.visibility]="column?.pinned ? 'hidden' : 'visible'"><path d="M20 6L9 17l-5-5"/></svg>
+            <span>No Pin</span>
+          </div>
+          <div class="ug-menu-item" (click)="onPin('left')">
+             <svg class="ug-menu-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" [style.visibility]="column?.pinned === 'left' ? 'visible' : 'hidden'"><path d="M20 6L9 17l-5-5"/></svg>
+            <span>Pin Left</span>
+          </div>
+          <div class="ug-menu-item" (click)="onPin('right')">
+             <svg class="ug-menu-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" [style.visibility]="column?.pinned === 'right' ? 'visible' : 'hidden'"><path d="M20 6L9 17l-5-5"/></svg>
+            <span>Pin Right</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="ug-menu-separator"></div>
+
+      <!-- Autosize -->
+      <div class="ug-menu-item" (click)="onAutosize(false)">
+        <span class="ug-menu-text-only">Autosize This Column</span>
+      </div>
+      <div class="ug-menu-item" (click)="onAutosize(true)">
+        <span class="ug-menu-text-only">Autosize All Columns</span>
+      </div>
+
+      <div class="ug-menu-separator"></div>
+
+      <!-- Grouping -->
+      <div class="ug-menu-item" (click)="onGroup()">
+        <svg class="ug-menu-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 3H3v18h18V3zM3 9h18M9 21V9"/></svg>
+        <span>{{ isGrouped ? 'Un-Group by' : 'Group by' }} {{ column?.headerName || column?.field }}</span>
+      </div>
+
+      <div class="ug-menu-separator"></div>
+
+      <!-- Choose Columns -->
+      <div class="ug-menu-item" (click)="onChooseColumns()">
+        <svg class="ug-menu-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><path d="M9 3v18"/></svg>
+        <span>Choose Columns</span>
+      </div>
+
+    </div>
+  `, isInline: true, styles: [".ug-header-menu-backdrop{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:999}.ug-header-menu-panel{position:fixed;z-index:1000;background-color:var(--ug-bg-color);border:1px solid var(--ug-border-color);border-radius:4px;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;padding:8px 0;min-width:220px;font-family:var(--ug-font-family);font-size:var(--ug-font-size);color:var(--ug-color)}.ug-menu-item{display:flex;align-items:center;padding:8px 16px;cursor:pointer;position:relative;transition:background-color .15s ease;-webkit-user-select:none;user-select:none}.ug-menu-item:hover{background-color:var(--ug-row-hover-bg)}.ug-menu-icon{margin-right:12px;color:var(--ug-icon-color)}.ug-menu-text-only{margin-left:26px}.ug-menu-separator{height:1px;background-color:var(--ug-border-color);margin:4px 0}.ug-has-submenu{display:flex;justify-content:space-between}.ug-has-submenu span{flex:1}.ug-menu-arrow{color:var(--ug-icon-color);margin-left:8px}.ug-submenu{position:absolute;top:-9px;left:100%;background-color:var(--ug-bg-color);border:1px solid var(--ug-border-color);border-radius:4px;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;padding:8px 0;min-width:150px;z-index:1001}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: HeaderMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ug-header-menu', standalone: true, imports: [CommonModule], template: `
+    <div class="ug-header-menu-backdrop" *ngIf="isOpen" (click)="onClose()"></div>
+    <div class="ug-header-menu-panel" *ngIf="isOpen" [style.top.px]="position.y" [style.left.px]="position.x">
+      
+      <!-- Sorting -->
+      <div class="ug-menu-item" (click)="onSort('asc')">
+        <svg class="ug-menu-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 19V5M5 12l7-7 7 7"/></svg>
+        <span>Sort Ascending</span>
+      </div>
+      <div class="ug-menu-item" (click)="onSort('desc')">
+        <svg class="ug-menu-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12l7 7 7-7"/></svg>
+        <span>Sort Descending</span>
+      </div>
+
+      <div class="ug-menu-separator"></div>
+
+      <!-- Pinning (Submenu trigger) -->
+      <div class="ug-menu-item ug-has-submenu" (mouseenter)="showPinSubmenu = true" (mouseleave)="showPinSubmenu = false">
+        <svg class="ug-menu-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 10l-4 4-4-4"/></svg>
+        <span>Pin Column</span>
+        <svg class="ug-menu-arrow" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
+
+        <div class="ug-submenu" *ngIf="showPinSubmenu">
+          <div class="ug-menu-item" (click)="onPin(null)">
+            <svg class="ug-menu-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" [style.visibility]="column?.pinned ? 'hidden' : 'visible'"><path d="M20 6L9 17l-5-5"/></svg>
+            <span>No Pin</span>
+          </div>
+          <div class="ug-menu-item" (click)="onPin('left')">
+             <svg class="ug-menu-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" [style.visibility]="column?.pinned === 'left' ? 'visible' : 'hidden'"><path d="M20 6L9 17l-5-5"/></svg>
+            <span>Pin Left</span>
+          </div>
+          <div class="ug-menu-item" (click)="onPin('right')">
+             <svg class="ug-menu-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" [style.visibility]="column?.pinned === 'right' ? 'visible' : 'hidden'"><path d="M20 6L9 17l-5-5"/></svg>
+            <span>Pin Right</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="ug-menu-separator"></div>
+
+      <!-- Autosize -->
+      <div class="ug-menu-item" (click)="onAutosize(false)">
+        <span class="ug-menu-text-only">Autosize This Column</span>
+      </div>
+      <div class="ug-menu-item" (click)="onAutosize(true)">
+        <span class="ug-menu-text-only">Autosize All Columns</span>
+      </div>
+
+      <div class="ug-menu-separator"></div>
+
+      <!-- Grouping -->
+      <div class="ug-menu-item" (click)="onGroup()">
+        <svg class="ug-menu-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 3H3v18h18V3zM3 9h18M9 21V9"/></svg>
+        <span>{{ isGrouped ? 'Un-Group by' : 'Group by' }} {{ column?.headerName || column?.field }}</span>
+      </div>
+
+      <div class="ug-menu-separator"></div>
+
+      <!-- Choose Columns -->
+      <div class="ug-menu-item" (click)="onChooseColumns()">
+        <svg class="ug-menu-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><path d="M9 3v18"/></svg>
+        <span>Choose Columns</span>
+      </div>
+
+    </div>
+  `, encapsulation: ViewEncapsulation.None, styles: [".ug-header-menu-backdrop{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:999}.ug-header-menu-panel{position:fixed;z-index:1000;background-color:var(--ug-bg-color);border:1px solid var(--ug-border-color);border-radius:4px;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;padding:8px 0;min-width:220px;font-family:var(--ug-font-family);font-size:var(--ug-font-size);color:var(--ug-color)}.ug-menu-item{display:flex;align-items:center;padding:8px 16px;cursor:pointer;position:relative;transition:background-color .15s ease;-webkit-user-select:none;user-select:none}.ug-menu-item:hover{background-color:var(--ug-row-hover-bg)}.ug-menu-icon{margin-right:12px;color:var(--ug-icon-color)}.ug-menu-text-only{margin-left:26px}.ug-menu-separator{height:1px;background-color:var(--ug-border-color);margin:4px 0}.ug-has-submenu{display:flex;justify-content:space-between}.ug-has-submenu span{flex:1}.ug-menu-arrow{color:var(--ug-icon-color);margin-left:8px}.ug-submenu{position:absolute;top:-9px;left:100%;background-color:var(--ug-bg-color);border:1px solid var(--ug-border-color);border-radius:4px;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;padding:8px 0;min-width:150px;z-index:1001}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { column: [{
+                type: Input
+            }], isOpen: [{
+                type: Input
+            }], position: [{
+                type: Input
+            }], groupModel: [{
+                type: Input
+            }], closeMenu: [{
+                type: Output
+            }], sort: [{
+                type: Output
+            }], pin: [{
+                type: Output
+            }], autosize: [{
+                type: Output
+            }], group: [{
+                type: Output
+            }], chooseColumns: [{
+                type: Output
+            }] } });
+
+class ChooseColumnsComponent {
+    columns = [];
+    columnsChanged = new EventEmitter();
+    closePanel = new EventEmitter();
+    searchQuery = '';
+    onClose() {
+        this.closePanel.emit();
+    }
+    matchesSearch(col) {
+        if (!this.searchQuery)
+            return true;
+        const name = (col.headerName || col.field || '').toLowerCase();
+        return name.includes(this.searchQuery.toLowerCase());
+    }
+    toggleVisibility(col) {
+        col.hide = !col.hide;
+        this.emitChange();
+    }
+    onDrop(event) {
+        // Because of the *ngIf matching search, the index in the drag drop event might not match the original array 
+        // if the user is filtering. We will only allow reordering if search is empty to be safe, 
+        // or we have to map visual index to actual index.
+        if (this.searchQuery) {
+            // Find actual indices
+            const visibleCols = this.columns.filter(c => this.matchesSearch(c));
+            const movedItem = visibleCols[event.previousIndex];
+            const targetItem = visibleCols[event.currentIndex];
+            const actualPrevIdx = this.columns.indexOf(movedItem);
+            const actualCurrIdx = this.columns.indexOf(targetItem);
+            moveItemInArray(this.columns, actualPrevIdx, actualCurrIdx);
+        }
+        else {
+            moveItemInArray(this.columns, event.previousIndex, event.currentIndex);
+        }
+        this.emitChange();
+    }
+    emitChange() {
+        this.columnsChanged.emit([...this.columns]);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ChooseColumnsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: ChooseColumnsComponent, isStandalone: true, selector: "ug-choose-columns", inputs: { columns: "columns" }, outputs: { columnsChanged: "columnsChanged", closePanel: "closePanel" }, ngImport: i0, template: `
+    <div class="ug-choose-columns-panel">
+      
+      <div class="ug-cc-header">
+        <span class="ug-cc-title">Choose Columns</span>
+        <button class="ug-cc-close" (click)="onClose()">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg>
+        </button>
+      </div>
+
+      <div class="ug-cc-search">
+        <div class="ug-cc-search-icon">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
+        </div>
+        <input type="text" placeholder="Search..." [(ngModel)]="searchQuery" />
+      </div>
+
+      <div class="ug-cc-list" cdkDropList (cdkDropListDropped)="onDrop($event)">
+        <ng-container *ngFor="let col of columns">
+            <div class="ug-cc-item" cdkDrag *ngIf="matchesSearch(col)">
+            
+            <label class="ug-cc-label">
+                <input type="checkbox" [checked]="!col.hide" (change)="toggleVisibility(col)" />
+                <span class="ug-cc-drag-handle" cdkDragHandle>
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 6h.01M16 6h.01M8 12h.01M16 12h.01M8 18h.01M16 18h.01"/></svg>
+                </span>
+                <span class="ug-cc-name">{{ col.headerName || col.field }}</span>
+            </label>
+
+            </div>
+        </ng-container>
+      </div>
+
+    </div>
+  `, isInline: true, styles: [".ug-choose-columns-panel{display:flex;flex-direction:column;background-color:var(--ug-bg-color);border:1px solid var(--ug-border-color);border-radius:4px;box-shadow:0 4px 12px -1px #00000026,0 2px 8px -2px #0000001a;width:250px;font-family:var(--ug-font-family);font-size:var(--ug-font-size);color:var(--ug-color);overflow:hidden}.ug-cc-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-cc-title{font-weight:var(--ug-header-font-weight);color:var(--ug-header-color)}.ug-cc-close{background:none;border:none;cursor:pointer;color:var(--ug-icon-color);padding:4px;display:flex;align-items:center;justify-content:center;border-radius:4px}.ug-cc-close:hover{background-color:var(--ug-row-hover-bg)}.ug-cc-search{padding:8px;border-bottom:1px solid var(--ug-border-color);position:relative;display:flex;align-items:center}.ug-cc-search-icon{position:absolute;left:16px;color:var(--ug-icon-color);display:flex}.ug-cc-search input{width:100%;padding:6px 8px 6px 28px;border:1px solid var(--ug-border-color);border-radius:4px;font-family:inherit;font-size:inherit;background-color:var(--ug-bg-color);color:var(--ug-color)}.ug-cc-search input:focus{outline:none;border-color:var(--ug-primary-color)}.ug-cc-list{max-height:250px;overflow-y:auto;padding:8px 0}.ug-cc-item{display:flex;align-items:center;padding:4px 16px}.ug-cc-label{display:flex;align-items:center;width:100%;cursor:pointer}.ug-cc-label input[type=checkbox]{width:16px;height:16px;cursor:pointer;accent-color:var(--ug-primary-color);margin-right:12px}.ug-cc-drag-handle{cursor:grab;color:var(--ug-icon-color);margin-right:12px;display:flex}.ug-cc-drag-handle:active{cursor:grabbing}.ug-cc-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cdk-drag-preview{box-sizing:border-box;background-color:var(--ug-bg-color);border:1px solid var(--ug-primary-color);box-shadow:0 4px 6px -1px #0000001a;display:flex;align-items:center;padding:4px 16px}.cdk-drag-placeholder{opacity:.3}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: FormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ChooseColumnsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ug-choose-columns', standalone: true, imports: [CommonModule, FormsModule, DragDropModule], template: `
+    <div class="ug-choose-columns-panel">
+      
+      <div class="ug-cc-header">
+        <span class="ug-cc-title">Choose Columns</span>
+        <button class="ug-cc-close" (click)="onClose()">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg>
+        </button>
+      </div>
+
+      <div class="ug-cc-search">
+        <div class="ug-cc-search-icon">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
+        </div>
+        <input type="text" placeholder="Search..." [(ngModel)]="searchQuery" />
+      </div>
+
+      <div class="ug-cc-list" cdkDropList (cdkDropListDropped)="onDrop($event)">
+        <ng-container *ngFor="let col of columns">
+            <div class="ug-cc-item" cdkDrag *ngIf="matchesSearch(col)">
+            
+            <label class="ug-cc-label">
+                <input type="checkbox" [checked]="!col.hide" (change)="toggleVisibility(col)" />
+                <span class="ug-cc-drag-handle" cdkDragHandle>
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 6h.01M16 6h.01M8 12h.01M16 12h.01M8 18h.01M16 18h.01"/></svg>
+                </span>
+                <span class="ug-cc-name">{{ col.headerName || col.field }}</span>
+            </label>
+
+            </div>
+        </ng-container>
+      </div>
+
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".ug-choose-columns-panel{display:flex;flex-direction:column;background-color:var(--ug-bg-color);border:1px solid var(--ug-border-color);border-radius:4px;box-shadow:0 4px 12px -1px #00000026,0 2px 8px -2px #0000001a;width:250px;font-family:var(--ug-font-family);font-size:var(--ug-font-size);color:var(--ug-color);overflow:hidden}.ug-cc-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-cc-title{font-weight:var(--ug-header-font-weight);color:var(--ug-header-color)}.ug-cc-close{background:none;border:none;cursor:pointer;color:var(--ug-icon-color);padding:4px;display:flex;align-items:center;justify-content:center;border-radius:4px}.ug-cc-close:hover{background-color:var(--ug-row-hover-bg)}.ug-cc-search{padding:8px;border-bottom:1px solid var(--ug-border-color);position:relative;display:flex;align-items:center}.ug-cc-search-icon{position:absolute;left:16px;color:var(--ug-icon-color);display:flex}.ug-cc-search input{width:100%;padding:6px 8px 6px 28px;border:1px solid var(--ug-border-color);border-radius:4px;font-family:inherit;font-size:inherit;background-color:var(--ug-bg-color);color:var(--ug-color)}.ug-cc-search input:focus{outline:none;border-color:var(--ug-primary-color)}.ug-cc-list{max-height:250px;overflow-y:auto;padding:8px 0}.ug-cc-item{display:flex;align-items:center;padding:4px 16px}.ug-cc-label{display:flex;align-items:center;width:100%;cursor:pointer}.ug-cc-label input[type=checkbox]{width:16px;height:16px;cursor:pointer;accent-color:var(--ug-primary-color);margin-right:12px}.ug-cc-drag-handle{cursor:grab;color:var(--ug-icon-color);margin-right:12px;display:flex}.ug-cc-drag-handle:active{cursor:grabbing}.ug-cc-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cdk-drag-preview{box-sizing:border-box;background-color:var(--ug-bg-color);border:1px solid var(--ug-primary-color);box-shadow:0 4px 6px -1px #0000001a;display:flex;align-items:center;padding:4px 16px}.cdk-drag-placeholder{opacity:.3}\n"] }]
+        }], propDecorators: { columns: [{
+                type: Input
+            }], columnsChanged: [{
+                type: Output
+            }], closePanel: [{
+                type: Output
+            }] } });
+
+class HeaderFilterComponent {
+    column;
+    isOpen = false;
+    position = { x: 0, y: 0 };
+    // All unique values extracted from the dataset
+    uniqueValues = [];
+    // The currently applied active filter Set for this column
+    activeFilterSet = new Set();
+    closeFilter = new EventEmitter();
+    filterApplied = new EventEmitter();
+    searchQuery = '';
+    displayValues = [];
+    // Local working copy of selected values while the menu is open
+    selectedValues = new Set();
+    ngOnChanges(changes) {
+        if (changes['isOpen'] && this.isOpen) {
+            // Reset query and clone the active filters
+            this.searchQuery = '';
+            this.selectedValues = new Set(this.activeFilterSet);
+            // If the active filter was totally empty (meaning NO filter was ever applied), 
+            // Excel defaults to having EVERYTHING checked initially.
+            if (this.activeFilterSet.size === 0) {
+                this.uniqueValues.forEach(v => this.selectedValues.add(v));
+            }
+            this.applySearch();
+        }
+        if (changes['uniqueValues']) {
+            this.applySearch();
+        }
+    }
+    onClose() {
+        this.closeFilter.emit();
+    }
+    onSearchChanged() {
+        this.applySearch();
+    }
+    applySearch() {
+        if (!this.searchQuery) {
+            this.displayValues = [...this.uniqueValues];
+        }
+        else {
+            const lowerQ = this.searchQuery.toLowerCase();
+            this.displayValues = this.uniqueValues.filter(val => String(val).toLowerCase().includes(lowerQ));
+        }
+    }
+    get isAllSelected() {
+        if (this.displayValues.length === 0)
+            return false;
+        return this.displayValues.every(val => this.selectedValues.has(val));
+    }
+    toggleAll() {
+        const targetState = !this.isAllSelected;
+        if (targetState) {
+            this.displayValues.forEach(val => this.selectedValues.add(val));
+        }
+        else {
+            this.displayValues.forEach(val => this.selectedValues.delete(val));
+        }
+        this.emitFilter();
+    }
+    toggleValue(val) {
+        if (this.selectedValues.has(val)) {
+            this.selectedValues.delete(val);
+        }
+        else {
+            this.selectedValues.add(val);
+        }
+        this.emitFilter();
+    }
+    emitFilter() {
+        if (!this.column)
+            return;
+        // If "Select All" of all unique values is checked, we conceptually have NO filter.
+        // E.g., if we select everything, we just clear the filter for performance.
+        let finalSet = new Set(this.selectedValues);
+        let isDefaultAllSelected = true;
+        for (const val of this.uniqueValues) {
+            if (!this.selectedValues.has(val)) {
+                isDefaultAllSelected = false;
+                break;
+            }
+        }
+        if (isDefaultAllSelected) {
+            finalSet = new Set(); // Empty means no filter
+        }
+        this.filterApplied.emit({ field: this.column.field, selected: finalSet });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: HeaderFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: HeaderFilterComponent, isStandalone: true, selector: "ug-header-filter", inputs: { column: "column", isOpen: "isOpen", position: "position", uniqueValues: "uniqueValues", activeFilterSet: "activeFilterSet" }, outputs: { closeFilter: "closeFilter", filterApplied: "filterApplied" }, usesOnChanges: true, ngImport: i0, template: `
+    <div class="ug-header-filter-backdrop" *ngIf="isOpen" (click)="onClose()"></div>
+    <div class="ug-header-filter-panel" *ngIf="isOpen" [style.top.px]="position.y" [style.left.px]="position.x">
+      
+      <div class="ug-filter-search">
+        <div class="ug-filter-search-icon">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
+        </div>
+        <input type="text" placeholder="Search..." [(ngModel)]="searchQuery" (ngModelChange)="onSearchChanged()" />
+      </div>
+
+      <div class="ug-filter-list">
+        <!-- Select All Checkbox -->
+        <label class="ug-filter-item ug-filter-select-all">
+            <input type="checkbox" [checked]="isAllSelected" (change)="toggleAll()" />
+            <span>(Select All)</span>
+        </label>
+
+        <!-- Values Checkboxes -->
+        <cdk-virtual-scroll-viewport itemSize="24" class="ug-filter-viewport">
+            <label class="ug-filter-item" *cdkVirtualFor="let item of displayValues">
+                <input type="checkbox" [checked]="selectedValues.has(item)" (change)="toggleValue(item)" />
+                <span>{{ item === null || item === undefined || item === '' ? '(Blanks)' : item }}</span>
+            </label>
+        </cdk-virtual-scroll-viewport>
+
+        <div class="ug-filter-empty" *ngIf="displayValues.length === 0">
+           No matches found
+        </div>
+      </div>
+
+    </div>
+  `, isInline: true, styles: [".ug-header-filter-backdrop{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:999}.ug-header-filter-panel{position:fixed;z-index:1000;background-color:var(--ug-bg-color);border:1px solid var(--ug-border-color);border-radius:4px;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;padding:8px 0;min-width:250px;max-width:300px;font-family:var(--ug-font-family);font-size:var(--ug-font-size);color:var(--ug-color);display:flex;flex-direction:column}.ug-filter-search{padding:0 12px 8px;border-bottom:1px solid var(--ug-border-color);position:relative;display:flex;align-items:center}.ug-filter-search-icon{position:absolute;left:20px;color:var(--ug-icon-color);display:flex}.ug-filter-search input{width:100%;padding:6px 8px 6px 28px;border:1px solid var(--ug-border-color);border-radius:4px;font-family:inherit;font-size:inherit;background-color:var(--ug-bg-color);color:var(--ug-color)}.ug-filter-search input:focus{outline:none;border-color:var(--ug-primary-color)}.ug-filter-list{padding:8px 0}.ug-filter-viewport{height:200px;width:100%}.ug-filter-select-all{border-bottom:1px solid var(--ug-border-color);margin-bottom:4px}.ug-filter-item{display:flex;align-items:center;padding:4px 16px;cursor:pointer;-webkit-user-select:none;user-select:none}.ug-filter-item:hover{background-color:var(--ug-row-hover-bg)}.ug-filter-item input[type=checkbox]{width:16px;height:16px;cursor:pointer;accent-color:var(--ug-primary-color);margin-right:12px}.ug-filter-item span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ug-filter-empty{padding:16px;text-align:center;color:var(--ug-icon-color);font-style:italic}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: HeaderFilterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ug-header-filter', standalone: true, imports: [CommonModule, FormsModule, ScrollingModule], template: `
+    <div class="ug-header-filter-backdrop" *ngIf="isOpen" (click)="onClose()"></div>
+    <div class="ug-header-filter-panel" *ngIf="isOpen" [style.top.px]="position.y" [style.left.px]="position.x">
+      
+      <div class="ug-filter-search">
+        <div class="ug-filter-search-icon">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
+        </div>
+        <input type="text" placeholder="Search..." [(ngModel)]="searchQuery" (ngModelChange)="onSearchChanged()" />
+      </div>
+
+      <div class="ug-filter-list">
+        <!-- Select All Checkbox -->
+        <label class="ug-filter-item ug-filter-select-all">
+            <input type="checkbox" [checked]="isAllSelected" (change)="toggleAll()" />
+            <span>(Select All)</span>
+        </label>
+
+        <!-- Values Checkboxes -->
+        <cdk-virtual-scroll-viewport itemSize="24" class="ug-filter-viewport">
+            <label class="ug-filter-item" *cdkVirtualFor="let item of displayValues">
+                <input type="checkbox" [checked]="selectedValues.has(item)" (change)="toggleValue(item)" />
+                <span>{{ item === null || item === undefined || item === '' ? '(Blanks)' : item }}</span>
+            </label>
+        </cdk-virtual-scroll-viewport>
+
+        <div class="ug-filter-empty" *ngIf="displayValues.length === 0">
+           No matches found
+        </div>
+      </div>
+
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".ug-header-filter-backdrop{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:999}.ug-header-filter-panel{position:fixed;z-index:1000;background-color:var(--ug-bg-color);border:1px solid var(--ug-border-color);border-radius:4px;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;padding:8px 0;min-width:250px;max-width:300px;font-family:var(--ug-font-family);font-size:var(--ug-font-size);color:var(--ug-color);display:flex;flex-direction:column}.ug-filter-search{padding:0 12px 8px;border-bottom:1px solid var(--ug-border-color);position:relative;display:flex;align-items:center}.ug-filter-search-icon{position:absolute;left:20px;color:var(--ug-icon-color);display:flex}.ug-filter-search input{width:100%;padding:6px 8px 6px 28px;border:1px solid var(--ug-border-color);border-radius:4px;font-family:inherit;font-size:inherit;background-color:var(--ug-bg-color);color:var(--ug-color)}.ug-filter-search input:focus{outline:none;border-color:var(--ug-primary-color)}.ug-filter-list{padding:8px 0}.ug-filter-viewport{height:200px;width:100%}.ug-filter-select-all{border-bottom:1px solid var(--ug-border-color);margin-bottom:4px}.ug-filter-item{display:flex;align-items:center;padding:4px 16px;cursor:pointer;-webkit-user-select:none;user-select:none}.ug-filter-item:hover{background-color:var(--ug-row-hover-bg)}.ug-filter-item input[type=checkbox]{width:16px;height:16px;cursor:pointer;accent-color:var(--ug-primary-color);margin-right:12px}.ug-filter-item span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ug-filter-empty{padding:16px;text-align:center;color:var(--ug-icon-color);font-style:italic}\n"] }]
+        }], propDecorators: { column: [{
+                type: Input
+            }], isOpen: [{
+                type: Input
+            }], position: [{
+                type: Input
+            }], uniqueValues: [{
+                type: Input
+            }], activeFilterSet: [{
+                type: Input
+            }], closeFilter: [{
+                type: Output
+            }], filterApplied: [{
+                type: Output
+            }] } });
+
+class ColumnToolPanelComponent {
+    columns = [];
+    groupModel = [];
+    valuesModel = [];
+    columnsUpdated = new EventEmitter();
+    groupModelChanged = new EventEmitter();
+    valuesModelChanged = new EventEmitter();
+    exportCsvClicked = new EventEmitter();
+    displayColumns = [];
+    groupColumns = [];
+    valueColumns = [];
+    searchQuery = '';
+    pivotMode = false;
+    openDropdownField = null;
+    ngOnChanges(changes) {
+        if (changes['columns']) {
+            this.applySearch();
+        }
+        // Reconstruct groupColumns from persisted groupModel (survives tab switches)
+        if (changes['columns'] || changes['groupModel']) {
+            this.rebuildGroupColumns();
+        }
+        // Reconstruct valueColumns from persisted valuesModel (survives tab switches)
+        if (changes['columns'] || changes['valuesModel']) {
+            this.rebuildValueColumns();
+        }
+    }
+    rebuildGroupColumns() {
+        if (this.groupModel.length === 0) {
+            this.groupColumns = [];
+            return;
+        }
+        // Map field names back to column definitions, preserving order
+        this.groupColumns = this.groupModel
+            .map(field => this.columns.find(c => c.field === field))
+            .filter((c) => !!c);
+    }
+    getColumnHeader(field) {
+        const col = this.columns.find(c => c.field === field);
+        return col ? (col.headerName || col.field) : field;
+    }
+    applySearch() {
+        if (!this.searchQuery) {
+            this.displayColumns = [...this.columns];
+        }
+        else {
+            const q = this.searchQuery.toLowerCase();
+            this.displayColumns = this.columns.filter(c => {
+                const name = (c.headerName || c.field).toLowerCase();
+                return name.includes(q);
+            });
+        }
+    }
+    toggleVisibility(col) {
+        // Determine the original index in the main array
+        const realIdx = this.columns.findIndex(c => c.field === col.field);
+        if (realIdx > -1) {
+            const newCols = [...this.columns];
+            newCols[realIdx] = { ...newCols[realIdx], hide: !newCols[realIdx].hide };
+            this.columnsUpdated.emit(newCols);
+        }
+    }
+    onDrop(event) {
+        if (this.searchQuery)
+            return; // Drag/drop while searching is complex, ignoring for MVP
+        if (event.previousContainer === event.container) {
+            const newCols = [...this.columns];
+            moveItemInArray(newCols, event.previousIndex, event.currentIndex);
+            this.columnsUpdated.emit(newCols);
+        }
+    }
+    onGroupDrop(event) {
+        if (event.previousContainer === event.container) {
+            const newGrp = [...this.groupColumns];
+            moveItemInArray(newGrp, event.previousIndex, event.currentIndex);
+            this.groupColumns = newGrp;
+        }
+        else {
+            const col = event.previousContainer.data[event.previousIndex];
+            // Prevent duplicate groupings
+            if (this.groupColumns.find(c => c.field === col.field))
+                return;
+            const newGrp = [...this.groupColumns];
+            newGrp.splice(event.currentIndex, 0, col);
+            this.groupColumns = newGrp;
+        }
+        this.emitGroupChange();
+    }
+    removeGroup(col) {
+        this.groupColumns = this.groupColumns.filter(c => c !== col);
+        this.emitGroupChange();
+    }
+    emitGroupChange() {
+        this.groupModelChanged.emit(this.groupColumns.map(c => c.field));
+    }
+    rebuildValueColumns() {
+        this.valueColumns = [...this.valuesModel];
+    }
+    onValueDrop(event) {
+        if (event.previousContainer === event.container) {
+            const newVals = [...this.valueColumns];
+            moveItemInArray(newVals, event.previousIndex, event.currentIndex);
+            this.valueColumns = newVals;
+        }
+        else {
+            const col = event.previousContainer.data[event.previousIndex];
+            // Prevent duplicate
+            if (this.valueColumns.find(c => c.field === col.field))
+                return;
+            const newVals = [...this.valueColumns];
+            newVals.splice(event.currentIndex, 0, { field: col.field, aggFunc: 'sum' });
+            this.valueColumns = newVals;
+        }
+        this.emitValuesChange();
+    }
+    removeValue(field) {
+        this.valueColumns = this.valueColumns.filter(c => c.field !== field);
+        this.emitValuesChange();
+    }
+    toggleAggDropdown(field) {
+        if (this.openDropdownField === field) {
+            this.openDropdownField = null;
+        }
+        else {
+            this.openDropdownField = field;
+        }
+    }
+    setAggFunc(vCol, func) {
+        vCol.aggFunc = func;
+        this.openDropdownField = null;
+        this.emitValuesChange();
+    }
+    emitValuesChange() {
+        this.valuesModelChanged.emit([...this.valueColumns]);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ColumnToolPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: ColumnToolPanelComponent, isStandalone: true, selector: "ug-column-tool-panel", inputs: { columns: "columns", groupModel: "groupModel", valuesModel: "valuesModel" }, outputs: { columnsUpdated: "columnsUpdated", groupModelChanged: "groupModelChanged", valuesModelChanged: "valuesModelChanged", exportCsvClicked: "exportCsvClicked" }, usesOnChanges: true, ngImport: i0, template: `
+    <div class="ug-ctp-wrapper" cdkDropListGroup>
+      <!-- Pivot Mode Toggle (Mock) -->
+      <div class="ug-ctp-pivot-mode">
+        <label class="ug-switch">
+          <input type="checkbox" [(ngModel)]="pivotMode" />
+          <span class="ug-slider round"></span>
+        </label>
+        <span>Pivot Mode</span>
+      </div>
+
+      <!-- Column List Section -->
+      <div class="ug-ctp-columns-section">
+        <div class="ug-ctp-search">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
+          <input type="text" placeholder="Search..." [(ngModel)]="searchQuery" (ngModelChange)="applySearch()" />
+        </div>
+
+        <div 
+          class="ug-ctp-list" 
+          id="colList"
+          cdkDropList 
+          [cdkDropListData]="displayColumns"
+          [cdkDropListConnectedTo]="['groupList', 'valueList']"
+          (cdkDropListDropped)="onDrop($event)">
+          <div 
+            class="ug-ctp-item" 
+            *ngFor="let col of displayColumns" 
+            cdkDrag 
+            [cdkDragData]="col">
+            <input type="checkbox" [checked]="!col.hide" (change)="toggleVisibility(col)" />
+            <svg class="ug-drag-handle" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" cdkDragHandle><circle cx="9" cy="12" r="1"/><circle cx="9" cy="5" r="1"/><circle cx="9" cy="19" r="1"/><circle cx="15" cy="12" r="1"/><circle cx="15" cy="5" r="1"/><circle cx="15" cy="19" r="1"/></svg>
+            <span class="ug-ctp-item-name">{{ col.headerName || col.field }}</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Row Groups (Mock) -->
+      <div class="ug-ctp-group">
+        <div class="ug-ctp-group-header">
+           <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3.01" y2="6"></line><line x1="3" y1="12" x2="3.01" y2="12"></line><line x1="3" y1="18" x2="3.01" y2="18"></line></svg>
+           <span>Row Groups</span>
+        </div>
+        <div 
+          class="ug-ctp-dropzone" 
+          id="groupList"
+          cdkDropList 
+          [cdkDropListData]="groupColumns" 
+          [cdkDropListConnectedTo]="['colList']"
+          (cdkDropListDropped)="onGroupDrop($event)"
+          [class.empty]="groupColumns.length === 0">
+          <div *ngIf="groupColumns.length === 0">Drag here to set row groups</div>
+          <div class="ug-ctp-item" *ngFor="let col of groupColumns" cdkDrag [cdkDragData]="col">
+            <svg class="ug-drag-handle" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" cdkDragHandle><circle cx="9" cy="12" r="1"/><circle cx="9" cy="5" r="1"/><circle cx="9" cy="19" r="1"/><circle cx="15" cy="12" r="1"/><circle cx="15" cy="5" r="1"/><circle cx="15" cy="19" r="1"/></svg>
+            <span class="ug-ctp-item-name">{{ col.headerName || col.field }}</span>
+            <span class="ug-ctp-remove" (click)="removeGroup(col)" style="margin-left:auto;cursor:pointer;">&times;</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Values -->
+      <div class="ug-ctp-group">
+        <div class="ug-ctp-group-header">
+           <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="4 7 4 4 20 4 20 7"></polyline><line x1="9" y1="20" x2="15" y2="20"></line><line x1="12" y1="4" x2="12" y2="20"></line></svg>
+           <span>Values</span>
+        </div>
+        <div 
+          class="ug-ctp-dropzone" 
+          id="valueList"
+          cdkDropList 
+          [cdkDropListData]="valueColumns" 
+          [cdkDropListConnectedTo]="['colList']"
+          (cdkDropListDropped)="onValueDrop($event)"
+          [class.empty]="valueColumns.length === 0">
+          <div *ngIf="valueColumns.length === 0">Drag here to aggregate</div>
+          <div class="ug-ctp-item" *ngFor="let vCol of valueColumns" cdkDrag [cdkDragData]="vCol">
+            <svg class="ug-drag-handle" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" cdkDragHandle><circle cx="9" cy="12" r="1"/><circle cx="9" cy="5" r="1"/><circle cx="9" cy="19" r="1"/><circle cx="15" cy="12" r="1"/><circle cx="15" cy="5" r="1"/><circle cx="15" cy="19" r="1"/></svg>
+            <div class="ug-ctp-agg-selector" (click)="toggleAggDropdown(vCol.field)">
+              <span class="ug-ctp-item-name"><b>{{ vCol.aggFunc }}</b>({{ getColumnHeader(vCol.field) }})</span>
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>
+            </div>
+            <span class="ug-ctp-remove" (click)="removeValue(vCol.field)" style="margin-left:auto;cursor:pointer;">&times;</span>
+            
+            <!-- Dropdown Menu -->
+            <div class="ug-ctp-agg-menu" *ngIf="openDropdownField === vCol.field">
+               <div class="ug-ctp-agg-option" [class.selected]="vCol.aggFunc === 'sum'" (click)="setAggFunc(vCol, 'sum')">sum</div>
+               <div class="ug-ctp-agg-option" [class.selected]="vCol.aggFunc === 'min'" (click)="setAggFunc(vCol, 'min')">min</div>
+               <div class="ug-ctp-agg-option" [class.selected]="vCol.aggFunc === 'max'" (click)="setAggFunc(vCol, 'max')">max</div>
+               <div class="ug-ctp-agg-option" [class.selected]="vCol.aggFunc === 'count'" (click)="setAggFunc(vCol, 'count')">count</div>
+               <div class="ug-ctp-agg-option" [class.selected]="vCol.aggFunc === 'avg'" (click)="setAggFunc(vCol, 'avg')">avg</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      
+      <!-- Export Section -->
+      <div class="ug-ctp-group" style="padding: 15px; text-align: center; border-top: 1px solid #e2e8f0; margin-top: auto;">
+        <button 
+          style="padding: 10px 16px; width: 100%; background: #2196f3; color: white; border: none; border-radius: 4px; font-weight: 500; cursor: pointer; display: flex; justify-content: center; align-items: center; gap: 8px;"
+          (click)="exportCsvClicked.emit()">
+          <svg fill="currentColor" width="16" height="16" viewBox="0 0 24 24"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/></svg>
+          Export CSV
+        </button>
+      </div>
+    </div>
+  `, isInline: true, styles: [".ug-ctp-wrapper{display:flex;flex-direction:column;height:100%;font-family:var(--ug-font-family, sans-serif);font-size:var(--ug-font-size, 13px);color:var(--ug-color, #181d1f)}.ug-ctp-pivot-mode{display:flex;align-items:center;padding:12px 16px;border-bottom:1px solid var(--ug-border-color);gap:12px}.ug-switch{position:relative;display:inline-block;width:34px;height:20px}.ug-switch input{opacity:0;width:0;height:0}.ug-slider{position:absolute;cursor:pointer;inset:0;background-color:var(--ug-border-color);transition:.4s}.ug-slider:before{position:absolute;content:\"\";height:14px;width:14px;left:3px;bottom:3px;background-color:#fff;transition:.4s}input:checked+.ug-slider{background-color:var(--ug-primary-color)}input:checked+.ug-slider:before{transform:translate(14px)}.ug-slider.round{border-radius:34px}.ug-slider.round:before{border-radius:50%}.ug-ctp-columns-section{flex:1;display:flex;flex-direction:column;border-bottom:1px solid var(--ug-border-color);min-height:200px}.ug-ctp-search{padding:12px;position:relative;display:flex;align-items:center}.ug-ctp-search svg{position:absolute;left:20px;color:var(--ug-icon-color)}.ug-ctp-search input{width:100%;padding:6px 8px 6px 28px;border:1px solid var(--ug-border-color);border-radius:4px;font-family:var(--ug-font-family, inherit);font-size:var(--ug-font-size, inherit);background-color:var(--ug-bg-color);color:var(--ug-color)}.ug-ctp-search input:focus{outline:none;border-color:var(--ug-primary-color)}.ug-ctp-list{flex:1;overflow-y:auto;padding:0 12px 12px}.ug-ctp-item{display:flex;align-items:center;padding:6px 8px;background:var(--ug-bg-color);border:1px solid transparent;border-radius:4px;margin-bottom:2px}.ug-ctp-item:hover{background:var(--ug-row-hover-bg)}.ug-ctp-item input[type=checkbox]{accent-color:var(--ug-primary-color);cursor:pointer}.ug-drag-handle{color:var(--ug-icon-color);cursor:grab;margin:0 8px}.ug-ctp-item-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-user-select:none;user-select:none}.cdk-drag-preview{box-sizing:border-box;background:var(--ug-bg-color);border:1px solid var(--ug-border-color);border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;display:flex;align-items:center;padding:6px 8px;font-family:var(--ug-font-family);font-size:var(--ug-font-size);color:var(--ug-color)}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,0,1)}.ug-ctp-group{border-bottom:1px solid var(--ug-border-color)}.ug-ctp-group-header{display:flex;align-items:center;padding:12px 16px;gap:8px;font-family:var(--ug-font-family, sans-serif);font-weight:var(--ug-header-font-weight, 500);font-size:var(--ug-font-size, 13px);color:var(--ug-header-color);background-color:var(--ug-header-bg)}.ug-ctp-dropzone{min-height:80px;padding:12px 16px;background-color:var(--ug-bg-color);font-family:var(--ug-font-family, sans-serif);font-size:var(--ug-font-size, 13px)}.ug-ctp-dropzone.empty{display:flex;align-items:center;justify-content:center;color:var(--ug-icon-color);font-style:italic;border:1px dashed var(--ug-border-color);margin:12px;border-radius:4px}.ug-ctp-item{position:relative}.ug-ctp-agg-selector{display:flex;align-items:center;gap:4px;cursor:pointer;padding:2px 4px;border-radius:4px;flex:1;overflow:hidden}.ug-ctp-agg-selector:hover{background:#0000000d}.ug-ctp-agg-selector b{color:var(--ug-primary-color);margin-right:2px}.ug-ctp-agg-menu{position:absolute;top:100%;left:24px;background:#fff;border:1px solid var(--ug-border-color);border-radius:4px;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;z-index:100;min-width:120px;padding:4px 0}.ug-ctp-agg-option{padding:6px 12px;cursor:pointer;font-size:13px}.ug-ctp-agg-option:hover{background:#f1f5f9}.ug-ctp-agg-option.selected{background:#e0f2fe;color:#0369a1;font-weight:500}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: FormsModule }, { kind: "directive", type: i2.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: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ColumnToolPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ug-column-tool-panel', standalone: true, imports: [CommonModule, FormsModule, DragDropModule], template: `
+    <div class="ug-ctp-wrapper" cdkDropListGroup>
+      <!-- Pivot Mode Toggle (Mock) -->
+      <div class="ug-ctp-pivot-mode">
+        <label class="ug-switch">
+          <input type="checkbox" [(ngModel)]="pivotMode" />
+          <span class="ug-slider round"></span>
+        </label>
+        <span>Pivot Mode</span>
+      </div>
+
+      <!-- Column List Section -->
+      <div class="ug-ctp-columns-section">
+        <div class="ug-ctp-search">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
+          <input type="text" placeholder="Search..." [(ngModel)]="searchQuery" (ngModelChange)="applySearch()" />
+        </div>
+
+        <div 
+          class="ug-ctp-list" 
+          id="colList"
+          cdkDropList 
+          [cdkDropListData]="displayColumns"
+          [cdkDropListConnectedTo]="['groupList', 'valueList']"
+          (cdkDropListDropped)="onDrop($event)">
+          <div 
+            class="ug-ctp-item" 
+            *ngFor="let col of displayColumns" 
+            cdkDrag 
+            [cdkDragData]="col">
+            <input type="checkbox" [checked]="!col.hide" (change)="toggleVisibility(col)" />
+            <svg class="ug-drag-handle" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" cdkDragHandle><circle cx="9" cy="12" r="1"/><circle cx="9" cy="5" r="1"/><circle cx="9" cy="19" r="1"/><circle cx="15" cy="12" r="1"/><circle cx="15" cy="5" r="1"/><circle cx="15" cy="19" r="1"/></svg>
+            <span class="ug-ctp-item-name">{{ col.headerName || col.field }}</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Row Groups (Mock) -->
+      <div class="ug-ctp-group">
+        <div class="ug-ctp-group-header">
+           <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3.01" y2="6"></line><line x1="3" y1="12" x2="3.01" y2="12"></line><line x1="3" y1="18" x2="3.01" y2="18"></line></svg>
+           <span>Row Groups</span>
+        </div>
+        <div 
+          class="ug-ctp-dropzone" 
+          id="groupList"
+          cdkDropList 
+          [cdkDropListData]="groupColumns" 
+          [cdkDropListConnectedTo]="['colList']"
+          (cdkDropListDropped)="onGroupDrop($event)"
+          [class.empty]="groupColumns.length === 0">
+          <div *ngIf="groupColumns.length === 0">Drag here to set row groups</div>
+          <div class="ug-ctp-item" *ngFor="let col of groupColumns" cdkDrag [cdkDragData]="col">
+            <svg class="ug-drag-handle" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" cdkDragHandle><circle cx="9" cy="12" r="1"/><circle cx="9" cy="5" r="1"/><circle cx="9" cy="19" r="1"/><circle cx="15" cy="12" r="1"/><circle cx="15" cy="5" r="1"/><circle cx="15" cy="19" r="1"/></svg>
+            <span class="ug-ctp-item-name">{{ col.headerName || col.field }}</span>
+            <span class="ug-ctp-remove" (click)="removeGroup(col)" style="margin-left:auto;cursor:pointer;">&times;</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Values -->
+      <div class="ug-ctp-group">
+        <div class="ug-ctp-group-header">
+           <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="4 7 4 4 20 4 20 7"></polyline><line x1="9" y1="20" x2="15" y2="20"></line><line x1="12" y1="4" x2="12" y2="20"></line></svg>
+           <span>Values</span>
+        </div>
+        <div 
+          class="ug-ctp-dropzone" 
+          id="valueList"
+          cdkDropList 
+          [cdkDropListData]="valueColumns" 
+          [cdkDropListConnectedTo]="['colList']"
+          (cdkDropListDropped)="onValueDrop($event)"
+          [class.empty]="valueColumns.length === 0">
+          <div *ngIf="valueColumns.length === 0">Drag here to aggregate</div>
+          <div class="ug-ctp-item" *ngFor="let vCol of valueColumns" cdkDrag [cdkDragData]="vCol">
+            <svg class="ug-drag-handle" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" cdkDragHandle><circle cx="9" cy="12" r="1"/><circle cx="9" cy="5" r="1"/><circle cx="9" cy="19" r="1"/><circle cx="15" cy="12" r="1"/><circle cx="15" cy="5" r="1"/><circle cx="15" cy="19" r="1"/></svg>
+            <div class="ug-ctp-agg-selector" (click)="toggleAggDropdown(vCol.field)">
+              <span class="ug-ctp-item-name"><b>{{ vCol.aggFunc }}</b>({{ getColumnHeader(vCol.field) }})</span>
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>
+            </div>
+            <span class="ug-ctp-remove" (click)="removeValue(vCol.field)" style="margin-left:auto;cursor:pointer;">&times;</span>
+            
+            <!-- Dropdown Menu -->
+            <div class="ug-ctp-agg-menu" *ngIf="openDropdownField === vCol.field">
+               <div class="ug-ctp-agg-option" [class.selected]="vCol.aggFunc === 'sum'" (click)="setAggFunc(vCol, 'sum')">sum</div>
+               <div class="ug-ctp-agg-option" [class.selected]="vCol.aggFunc === 'min'" (click)="setAggFunc(vCol, 'min')">min</div>
+               <div class="ug-ctp-agg-option" [class.selected]="vCol.aggFunc === 'max'" (click)="setAggFunc(vCol, 'max')">max</div>
+               <div class="ug-ctp-agg-option" [class.selected]="vCol.aggFunc === 'count'" (click)="setAggFunc(vCol, 'count')">count</div>
+               <div class="ug-ctp-agg-option" [class.selected]="vCol.aggFunc === 'avg'" (click)="setAggFunc(vCol, 'avg')">avg</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      
+      <!-- Export Section -->
+      <div class="ug-ctp-group" style="padding: 15px; text-align: center; border-top: 1px solid #e2e8f0; margin-top: auto;">
+        <button 
+          style="padding: 10px 16px; width: 100%; background: #2196f3; color: white; border: none; border-radius: 4px; font-weight: 500; cursor: pointer; display: flex; justify-content: center; align-items: center; gap: 8px;"
+          (click)="exportCsvClicked.emit()">
+          <svg fill="currentColor" width="16" height="16" viewBox="0 0 24 24"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/></svg>
+          Export CSV
+        </button>
+      </div>
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".ug-ctp-wrapper{display:flex;flex-direction:column;height:100%;font-family:var(--ug-font-family, sans-serif);font-size:var(--ug-font-size, 13px);color:var(--ug-color, #181d1f)}.ug-ctp-pivot-mode{display:flex;align-items:center;padding:12px 16px;border-bottom:1px solid var(--ug-border-color);gap:12px}.ug-switch{position:relative;display:inline-block;width:34px;height:20px}.ug-switch input{opacity:0;width:0;height:0}.ug-slider{position:absolute;cursor:pointer;inset:0;background-color:var(--ug-border-color);transition:.4s}.ug-slider:before{position:absolute;content:\"\";height:14px;width:14px;left:3px;bottom:3px;background-color:#fff;transition:.4s}input:checked+.ug-slider{background-color:var(--ug-primary-color)}input:checked+.ug-slider:before{transform:translate(14px)}.ug-slider.round{border-radius:34px}.ug-slider.round:before{border-radius:50%}.ug-ctp-columns-section{flex:1;display:flex;flex-direction:column;border-bottom:1px solid var(--ug-border-color);min-height:200px}.ug-ctp-search{padding:12px;position:relative;display:flex;align-items:center}.ug-ctp-search svg{position:absolute;left:20px;color:var(--ug-icon-color)}.ug-ctp-search input{width:100%;padding:6px 8px 6px 28px;border:1px solid var(--ug-border-color);border-radius:4px;font-family:var(--ug-font-family, inherit);font-size:var(--ug-font-size, inherit);background-color:var(--ug-bg-color);color:var(--ug-color)}.ug-ctp-search input:focus{outline:none;border-color:var(--ug-primary-color)}.ug-ctp-list{flex:1;overflow-y:auto;padding:0 12px 12px}.ug-ctp-item{display:flex;align-items:center;padding:6px 8px;background:var(--ug-bg-color);border:1px solid transparent;border-radius:4px;margin-bottom:2px}.ug-ctp-item:hover{background:var(--ug-row-hover-bg)}.ug-ctp-item input[type=checkbox]{accent-color:var(--ug-primary-color);cursor:pointer}.ug-drag-handle{color:var(--ug-icon-color);cursor:grab;margin:0 8px}.ug-ctp-item-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-user-select:none;user-select:none}.cdk-drag-preview{box-sizing:border-box;background:var(--ug-bg-color);border:1px solid var(--ug-border-color);border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;display:flex;align-items:center;padding:6px 8px;font-family:var(--ug-font-family);font-size:var(--ug-font-size);color:var(--ug-color)}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,0,1)}.ug-ctp-group{border-bottom:1px solid var(--ug-border-color)}.ug-ctp-group-header{display:flex;align-items:center;padding:12px 16px;gap:8px;font-family:var(--ug-font-family, sans-serif);font-weight:var(--ug-header-font-weight, 500);font-size:var(--ug-font-size, 13px);color:var(--ug-header-color);background-color:var(--ug-header-bg)}.ug-ctp-dropzone{min-height:80px;padding:12px 16px;background-color:var(--ug-bg-color);font-family:var(--ug-font-family, sans-serif);font-size:var(--ug-font-size, 13px)}.ug-ctp-dropzone.empty{display:flex;align-items:center;justify-content:center;color:var(--ug-icon-color);font-style:italic;border:1px dashed var(--ug-border-color);margin:12px;border-radius:4px}.ug-ctp-item{position:relative}.ug-ctp-agg-selector{display:flex;align-items:center;gap:4px;cursor:pointer;padding:2px 4px;border-radius:4px;flex:1;overflow:hidden}.ug-ctp-agg-selector:hover{background:#0000000d}.ug-ctp-agg-selector b{color:var(--ug-primary-color);margin-right:2px}.ug-ctp-agg-menu{position:absolute;top:100%;left:24px;background:#fff;border:1px solid var(--ug-border-color);border-radius:4px;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;z-index:100;min-width:120px;padding:4px 0}.ug-ctp-agg-option{padding:6px 12px;cursor:pointer;font-size:13px}.ug-ctp-agg-option:hover{background:#f1f5f9}.ug-ctp-agg-option.selected{background:#e0f2fe;color:#0369a1;font-weight:500}\n"] }]
+        }], propDecorators: { columns: [{
+                type: Input
+            }], groupModel: [{
+                type: Input
+            }], valuesModel: [{
+                type: Input
+            }], columnsUpdated: [{
+                type: Output
+            }], groupModelChanged: [{
+                type: Output
+            }], valuesModelChanged: [{
+                type: Output
+            }], exportCsvClicked: [{
+                type: Output
+            }] } });
+
+const TEXT_FILTER_OPTIONS = [
+    { value: 'contains', label: 'Contains' },
+    { value: 'notContains', label: 'Not Contains' },
+    { value: 'equals', label: 'Equals' },
+    { value: 'notEqual', label: 'Not Equal' },
+    { value: 'startsWith', label: 'Starts With' },
+    { value: 'endsWith', label: 'Ends With' },
+    { value: 'blank', label: 'Blank' },
+    { value: 'notBlank', label: 'Not Blank' }
+];
+const NUMBER_FILTER_OPTIONS = [
+    { value: 'equals', label: 'Equals' },
+    { value: 'notEqual', label: 'Not Equal' },
+    { value: 'greaterThan', label: 'Greater Than' },
+    { value: 'greaterThanOrEqual', label: 'Greater Than or Equal' },
+    { value: 'lessThan', label: 'Less Than' },
+    { value: 'lessThanOrEqual', label: 'Less Than or Equal' },
+    { value: 'inRange', label: 'In Range' },
+    { value: 'blank', label: 'Blank' },
+    { value: 'notBlank', label: 'Not Blank' }
+];
+class FilterToolPanelComponent {
+    cdr;
+    columns = [];
+    rowData = [];
+    activeFilters = new Map();
+    filterApplied = new EventEmitter();
+    conditionFilterChanged = new EventEmitter();
+    clearAllFilters = new EventEmitter();
+    sections = [];
+    _loadedFields = new Set();
+    constructor(cdr) {
+        this.cdr = cdr;
+    }
+    get hasAnyActiveFilter() {
+        return this.sections.some(s => s.hasActiveFilter || s.hasConditionFilter);
+    }
+    ngOnChanges(changes) {
+        if (changes['columns']) {
+            this.buildSections();
+        }
+        if (changes['activeFilters']) {
+            this.syncActiveFilters();
+        }
+    }
+    buildSections() {
+        const oldStateMap = new Map();
+        for (const s of this.sections) {
+            oldStateMap.set(s.column.field, s);
+        }
+        this._loadedFields.clear();
+        this.sections = this.columns
+            .map(col => {
+            const existing = this.activeFilters.get(col.field);
+            const hasActive = !!existing && existing.size > 0;
+            const old = oldStateMap.get(col.field);
+            // Auto-detect if column is numeric from first non-null value
+            const isNumeric = this.detectNumericColumn(col.field);
+            const filterOptions = isNumeric ? NUMBER_FILTER_OPTIONS : TEXT_FILTER_OPTIONS;
+            const section = {
+                column: col,
+                expanded: old ? old.expanded : false,
+                searchQuery: old ? old.searchQuery : '',
+                uniqueValues: [],
+                displayValues: [],
+                selectedValues: new Set(),
+                hasActiveFilter: hasActive,
+                filterOptions: filterOptions,
+                cond1Type: old ? old.cond1Type : (isNumeric ? 'equals' : 'contains'),
+                cond1Value: old ? old.cond1Value : '',
+                condOperator: old ? old.condOperator : 'AND',
+                cond2Type: old ? old.cond2Type : (isNumeric ? 'equals' : 'contains'),
+                cond2Value: old ? old.cond2Value : '',
+                cond2ValueTo: old ? old.cond2ValueTo : '',
+                hasConditionFilter: old ? old.hasConditionFilter : false
+            };
+            if (section.expanded) {
+                this.ensureSectionLoaded(section);
+            }
+            return section;
+        });
+    }
+    detectNumericColumn(field) {
+        // Sample first 10 non-null values to detect type
+        let count = 0;
+        for (let i = 0; i < this.rowData.length && count < 10; i++) {
+            const val = this.rowData[i][field];
+            if (val !== null && val !== undefined && val !== '') {
+                if (typeof val === 'number')
+                    return true;
+                // Check if string looks like a number (but not "$..." formatted)
+                const str = String(val);
+                if (str.startsWith('$')) {
+                    // Currency — treat as number
+                    const numPart = str.replace(/[$,]/g, '');
+                    if (!isNaN(Number(numPart)))
+                        return true;
+                }
+                if (!isNaN(Number(str)))
+                    return true;
+                count++;
+                if (count >= 3)
+                    return false; // 3 non-numeric strings = text column
+            }
+        }
+        return false;
+    }
+    ensureSectionLoaded(section) {
+        if (this._loadedFields.has(section.column.field))
+            return;
+        this._loadedFields.add(section.column.field);
+        const field = section.column.field;
+        const uniqueSet = new Set();
+        for (let i = 0; i < this.rowData.length; i++) {
+            uniqueSet.add(this.rowData[i][field]);
+        }
+        section.uniqueValues = Array.from(uniqueSet).sort((a, b) => {
+            if (a === null || a === undefined || a === '')
+                return -1;
+            if (b === null || b === undefined || b === '')
+                return 1;
+            return a > b ? 1 : -1;
+        });
+        const existing = this.activeFilters.get(field);
+        if (existing && existing.size > 0) {
+            section.selectedValues = new Set(existing);
+        }
+        else {
+            section.selectedValues = new Set(section.uniqueValues);
+        }
+        section.displayValues = [...section.uniqueValues];
+        if (section.searchQuery) {
+            this.applySearchOnSection(section);
+        }
+    }
+    syncActiveFilters() {
+        for (const section of this.sections) {
+            const existing = this.activeFilters.get(section.column.field);
+            const hasActive = !!existing && existing.size > 0;
+            section.hasActiveFilter = hasActive;
+            if (this._loadedFields.has(section.column.field)) {
+                if (hasActive) {
+                    section.selectedValues = new Set(existing);
+                }
+                else {
+                    section.selectedValues = new Set(section.uniqueValues);
+                }
+            }
+        }
+        this.cdr.markForCheck();
+    }
+    // --- Condition Filter Logic ---
+    onConditionChanged(section) {
+        const hasCond1 = section.cond1Value.trim() !== '' || section.cond1Type === 'blank' || section.cond1Type === 'notBlank';
+        const hasCond2 = section.cond2Value.trim() !== '' || section.cond2Type === 'blank' || section.cond2Type === 'notBlank';
+        if (!hasCond1 && !hasCond2) {
+            section.hasConditionFilter = false;
+            this.conditionFilterChanged.emit({ field: section.column.field, filter: null });
+            return;
+        }
+        section.hasConditionFilter = true;
+        const filter = {
+            condition1: { type: section.cond1Type, value: section.cond1Value },
+            operator: section.condOperator,
+            condition2: hasCond2 ? { type: section.cond2Type, value: section.cond2Value, valueTo: section.cond2ValueTo } : undefined
+        };
+        this.conditionFilterChanged.emit({ field: section.column.field, filter });
+    }
+    // --- Accordion Controls ---
+    toggleSection(section) {
+        section.expanded = !section.expanded;
+        if (section.expanded) {
+            this.ensureSectionLoaded(section);
+        }
+    }
+    expandAll() {
+        this.sections.forEach(s => {
+            s.expanded = true;
+            this.ensureSectionLoaded(s);
+        });
+    }
+    collapseAll() {
+        this.sections.forEach(s => s.expanded = false);
+    }
+    // --- Search ---
+    onSectionSearch(section) {
+        this.applySearchOnSection(section);
+    }
+    applySearchOnSection(section) {
+        if (!section.searchQuery) {
+            section.displayValues = [...section.uniqueValues];
+        }
+        else {
+            const q = section.searchQuery.toLowerCase();
+            section.displayValues = section.uniqueValues.filter(v => String(v).toLowerCase().includes(q));
+        }
+    }
+    // --- Checkbox Logic ---
+    isSectionAllSelected(section) {
+        if (section.displayValues.length === 0)
+            return false;
+        return section.displayValues.every(v => section.selectedValues.has(v));
+    }
+    toggleSectionAll(section) {
+        const targetState = !this.isSectionAllSelected(section);
+        if (targetState) {
+            section.displayValues.forEach(v => section.selectedValues.add(v));
+        }
+        else {
+            section.displayValues.forEach(v => section.selectedValues.delete(v));
+        }
+        this.emitFilter(section);
+    }
+    toggleValue(section, val) {
+        if (section.selectedValues.has(val)) {
+            section.selectedValues.delete(val);
+        }
+        else {
+            section.selectedValues.add(val);
+        }
+        this.emitFilter(section);
+    }
+    emitFilter(section) {
+        let isAllSelected = true;
+        for (const v of section.uniqueValues) {
+            if (!section.selectedValues.has(v)) {
+                isAllSelected = false;
+                break;
+            }
+        }
+        section.hasActiveFilter = !isAllSelected;
+        const finalSet = isAllSelected ? new Set() : new Set(section.selectedValues);
+        this.filterApplied.emit({ field: section.column.field, selected: finalSet });
+    }
+    // --- Clear All ---
+    onClearAll() {
+        for (const section of this.sections) {
+            if (this._loadedFields.has(section.column.field)) {
+                section.selectedValues = new Set(section.uniqueValues);
+                section.displayValues = [...section.uniqueValues];
+            }
+            section.hasActiveFilter = false;
+            section.searchQuery = '';
+            // Reset condition filters
+            section.cond1Value = '';
+            section.cond2Value = '';
+            section.cond2ValueTo = '';
+            section.hasConditionFilter = false;
+        }
+        this.clearAllFilters.emit();
+    }
+    trackByField(index, section) {
+        return section.column.field;
+    }
+    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" }, outputs: { filterApplied: "filterApplied", conditionFilterChanged: "conditionFilterChanged", clearAllFilters: "clearAllFilters" }, usesOnChanges: true, ngImport: i0, template: `
+    <div class="ug-ftp-wrapper">
+        <!-- Global Toolbar -->
+        <div class="ug-ftp-toolbar">
+            <button class="ug-ftp-btn" (click)="expandAll()" title="Expand All">
+                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"></polyline></svg>
+                Expand All
+            </button>
+            <button class="ug-ftp-btn" (click)="collapseAll()" title="Collapse All">
+                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"></polyline></svg>
+                Collapse All
+            </button>
+            <button class="ug-ftp-btn ug-ftp-btn-clear" (click)="onClearAll()" title="Clear All Filters" [disabled]="!hasAnyActiveFilter">
+                <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>
+
+        <!-- Column Filter Sections -->
+        <div class="ug-ftp-sections">
+            <div class="ug-ftp-section" *ngFor="let section of sections; trackBy: trackByField">
+                <!-- Section Header (Accordion) -->
+                <div class="ug-ftp-section-header" (click)="toggleSection(section)" [class.active-filter]="section.hasActiveFilter || section.hasConditionFilter">
+                    <svg class="ug-ftp-caret" [class.expanded]="section.expanded" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+                        <polyline points="9 18 15 12 9 6"></polyline>
+                    </svg>
+                    <span class="ug-ftp-section-title">{{ section.column.headerName || section.column.field }}</span>
+                    <span class="ug-ftp-active-dot" *ngIf="section.hasActiveFilter || section.hasConditionFilter" title="Filter active"></span>
+                </div>
+
+                <!-- Section Body (Expanded) -->
+                <div class="ug-ftp-section-body" *ngIf="section.expanded">
+
+                    <!-- ======= CONDITION FILTER ======= -->
+                    <div class="ug-ftp-condition-block">
+                        <!-- Condition 1 -->
+                        <select class="ug-ftp-cond-select" [(ngModel)]="section.cond1Type" (ngModelChange)="onConditionChanged(section)">
+                            <option *ngFor="let opt of section.filterOptions" [ngValue]="opt.value">{{ opt.label }}</option>
+                        </select>
+                        <input *ngIf="section.cond1Type !== 'blank' && section.cond1Type !== 'notBlank'"
+                            class="ug-ftp-cond-input"
+                            type="text"
+                            placeholder="Filter value..."
+                            [(ngModel)]="section.cond1Value"
+                            (ngModelChange)="onConditionChanged(section)" />
+
+                        <!-- AND / OR Toggle -->
+                        <div class="ug-ftp-operator-row">
+                            <label class="ug-ftp-radio">
+                                <input type="radio" name="op_{{section.column.field}}" value="AND" [(ngModel)]="section.condOperator" (ngModelChange)="onConditionChanged(section)" />
+                                AND
+                            </label>
+                            <label class="ug-ftp-radio">
+                                <input type="radio" name="op_{{section.column.field}}" value="OR" [(ngModel)]="section.condOperator" (ngModelChange)="onConditionChanged(section)" />
+                                OR
+                            </label>
+                        </div>
+
+                        <!-- Condition 2 -->
+                        <select class="ug-ftp-cond-select" [(ngModel)]="section.cond2Type" (ngModelChange)="onConditionChanged(section)">
+                            <option *ngFor="let opt of section.filterOptions" [ngValue]="opt.value">{{ opt.label }}</option>
+                        </select>
+                        <input *ngIf="section.cond2Type !== 'blank' && section.cond2Type !== 'notBlank'"
+                            class="ug-ftp-cond-input"
+                            type="text"
+                            placeholder="Filter value..."
+                            [(ngModel)]="section.cond2Value"
+                            (ngModelChange)="onConditionChanged(section)" />
+
+                        <!-- In Range second value -->
+                        <input *ngIf="section.cond2Type === 'inRange'"
+                            class="ug-ftp-cond-input"
+                            type="text"
+                            placeholder="To value..."
+                            [(ngModel)]="section.cond2ValueTo"
+                            (ngModelChange)="onConditionChanged(section)" />
+                    </div>
+
+                    <!-- ======= SET FILTER (Checkboxes) ======= -->
+                    <div class="ug-ftp-search">
+                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
+                        <input type="text" placeholder="Search..." [(ngModel)]="section.searchQuery" (ngModelChange)="onSectionSearch(section)" />
+                    </div>
+
+                    <label class="ug-ftp-item ug-ftp-select-all">
+                        <input type="checkbox" [checked]="isSectionAllSelected(section)" (change)="toggleSectionAll(section)" />
+                        <span>(Select All)</span>
+                    </label>
+
+                    <div class="ug-ftp-values">
+                        <cdk-virtual-scroll-viewport itemSize="28" class="ug-ftp-viewport">
+                            <label class="ug-ftp-item" *cdkVirtualFor="let val of section.displayValues">
+                                <input type="checkbox" [checked]="section.selectedValues.has(val)" (change)="toggleValue(section, val)" />
+                                <span>{{ val === null || val === undefined || val === '' ? '(Blanks)' : val }}</span>
+                            </label>
+                        </cdk-virtual-scroll-viewport>
+                        <div class="ug-ftp-empty" *ngIf="section.displayValues.length === 0">
+                            No values found
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    `, isInline: true, styles: [".ug-ftp-wrapper{display:flex;flex-direction:column;height:100%;font-family:var(--ug-font-family, sans-serif);font-size:var(--ug-font-size, 13px);color:var(--ug-header-color, #181d1f)}.ug-ftp-toolbar{display:flex;align-items:center;gap:4px;padding:8px 10px;border-bottom:1px solid var(--ug-border-color);background-color:var(--ug-header-bg);flex-wrap:wrap}.ug-ftp-btn{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border:1px solid var(--ug-border-color);border-radius:3px;background:var(--ug-bg-color);color:var(--ug-header-color);font-family:inherit;font-size:11px;cursor:pointer;transition:all .15s ease;white-space:nowrap}.ug-ftp-btn:hover{background:var(--ug-row-hover-bg);border-color:var(--ug-primary-color);color:var(--ug-primary-color)}.ug-ftp-btn:disabled{opacity:.4;cursor:default;pointer-events:none}.ug-ftp-btn-clear{margin-left:auto}.ug-ftp-sections{flex:1;overflow-y:auto;overflow-x:hidden}.ug-ftp-section{border-bottom:1px solid var(--ug-border-color)}.ug-ftp-section-header{display:flex;align-items:center;padding:10px 12px;cursor:pointer;-webkit-user-select:none;user-select:none;gap:8px;background-color:var(--ug-bg-color);transition:background-color .15s}.ug-ftp-section-header:hover{background-color:var(--ug-row-hover-bg)}.ug-ftp-section-header.active-filter{font-weight:600}.ug-ftp-caret{transition:transform .2s ease;color:var(--ug-icon-color);flex-shrink:0}.ug-ftp-caret.expanded{transform:rotate(90deg)}.ug-ftp-section-title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ug-ftp-active-dot{width:8px;height:8px;border-radius:50%;background-color:var(--ug-primary-color);flex-shrink:0}.ug-ftp-section-body{padding:0 12px 12px;background-color:var(--ug-bg-color)}.ug-ftp-condition-block{display:flex;flex-direction:column;gap:6px;margin-bottom:10px;padding:10px;border:1px solid var(--ug-border-color);border-radius:4px;background:var(--ug-header-bg)}.ug-ftp-cond-select{width:100%;padding:5px 8px;border:1px solid var(--ug-border-color);border-radius:3px;font-family:var(--ug-font-family, sans-serif);font-size:12px;background-color:var(--ug-bg-color);color:var(--ug-header-color);cursor:pointer;box-sizing:border-box}.ug-ftp-cond-select:focus{outline:none;border-color:var(--ug-primary-color)}.ug-ftp-cond-input{width:100%;padding:5px 8px;border:1px solid var(--ug-border-color);border-radius:3px;font-family:var(--ug-font-family, sans-serif);font-size:12px;background-color:var(--ug-bg-color);color:var(--ug-header-color);box-sizing:border-box}.ug-ftp-cond-input:focus{outline:none;border-color:var(--ug-primary-color)}.ug-ftp-operator-row{display:flex;align-items:center;gap:16px;padding:4px 0}.ug-ftp-radio{display:flex;align-items:center;gap:4px;font-size:12px;font-weight:500;cursor:pointer;color:var(--ug-header-color)}.ug-ftp-radio input[type=radio]{accent-color:var(--ug-primary-color);cursor:pointer}.ug-ftp-search{position:relative;display:flex;align-items:center;margin-bottom:8px}.ug-ftp-search svg{position:absolute;left:8px;color:var(--ug-icon-color);pointer-events:none}.ug-ftp-search input{width:100%;padding:5px 8px 5px 26px;border:1px solid var(--ug-border-color);border-radius:3px;font-family:var(--ug-font-family, inherit);font-size:var(--ug-font-size, 12px);background-color:var(--ug-bg-color);color:var(--ug-header-color);box-sizing:border-box}.ug-ftp-search input:focus{outline:none;border-color:var(--ug-primary-color)}.ug-ftp-values{border:1px solid var(--ug-border-color);border-radius:3px;background:var(--ug-bg-color)}.ug-ftp-viewport{height:200px}.ug-ftp-item{display:flex;align-items:center;gap:8px;padding:4px 8px;cursor:pointer;font-size:12px;transition:background-color .1s}.ug-ftp-item:hover{background-color:var(--ug-row-hover-bg)}.ug-ftp-item input[type=checkbox]{accent-color:var(--ug-primary-color);cursor:pointer;width:14px;height:14px;flex-shrink:0}.ug-ftp-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ug-ftp-select-all{border-bottom:1px solid var(--ug-border-color);font-weight:500;padding:6px 8px}.ug-ftp-empty{padding:16px;text-align:center;color:var(--ug-icon-color);font-style:italic;font-size:12px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: FormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.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: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FilterToolPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ug-filter-tool-panel', standalone: true, imports: [CommonModule, FormsModule, ScrollingModule], template: `
+    <div class="ug-ftp-wrapper">
+        <!-- Global Toolbar -->
+        <div class="ug-ftp-toolbar">
+            <button class="ug-ftp-btn" (click)="expandAll()" title="Expand All">
+                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"></polyline></svg>
+                Expand All
+            </button>
+            <button class="ug-ftp-btn" (click)="collapseAll()" title="Collapse All">
+                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"></polyline></svg>
+                Collapse All
+            </button>
+            <button class="ug-ftp-btn ug-ftp-btn-clear" (click)="onClearAll()" title="Clear All Filters" [disabled]="!hasAnyActiveFilter">
+                <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>
+
+        <!-- Column Filter Sections -->
+        <div class="ug-ftp-sections">
+            <div class="ug-ftp-section" *ngFor="let section of sections; trackBy: trackByField">
+                <!-- Section Header (Accordion) -->
+                <div class="ug-ftp-section-header" (click)="toggleSection(section)" [class.active-filter]="section.hasActiveFilter || section.hasConditionFilter">
+                    <svg class="ug-ftp-caret" [class.expanded]="section.expanded" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+                        <polyline points="9 18 15 12 9 6"></polyline>
+                    </svg>
+                    <span class="ug-ftp-section-title">{{ section.column.headerName || section.column.field }}</span>
+                    <span class="ug-ftp-active-dot" *ngIf="section.hasActiveFilter || section.hasConditionFilter" title="Filter active"></span>
+                </div>
+
+                <!-- Section Body (Expanded) -->
+                <div class="ug-ftp-section-body" *ngIf="section.expanded">
+
+                    <!-- ======= CONDITION FILTER ======= -->
+                    <div class="ug-ftp-condition-block">
+                        <!-- Condition 1 -->
+                        <select class="ug-ftp-cond-select" [(ngModel)]="section.cond1Type" (ngModelChange)="onConditionChanged(section)">
+                            <option *ngFor="let opt of section.filterOptions" [ngValue]="opt.value">{{ opt.label }}</option>
+                        </select>
+                        <input *ngIf="section.cond1Type !== 'blank' && section.cond1Type !== 'notBlank'"
+                            class="ug-ftp-cond-input"
+                            type="text"
+                            placeholder="Filter value..."
+                            [(ngModel)]="section.cond1Value"
+                            (ngModelChange)="onConditionChanged(section)" />
+
+                        <!-- AND / OR Toggle -->
+                        <div class="ug-ftp-operator-row">
+                            <label class="ug-ftp-radio">
+                                <input type="radio" name="op_{{section.column.field}}" value="AND" [(ngModel)]="section.condOperator" (ngModelChange)="onConditionChanged(section)" />
+                                AND
+                            </label>
+                            <label class="ug-ftp-radio">
+                                <input type="radio" name="op_{{section.column.field}}" value="OR" [(ngModel)]="section.condOperator" (ngModelChange)="onConditionChanged(section)" />
+                                OR
+                            </label>
+                        </div>
+
+                        <!-- Condition 2 -->
+                        <select class="ug-ftp-cond-select" [(ngModel)]="section.cond2Type" (ngModelChange)="onConditionChanged(section)">
+                            <option *ngFor="let opt of section.filterOptions" [ngValue]="opt.value">{{ opt.label }}</option>
+                        </select>
+                        <input *ngIf="section.cond2Type !== 'blank' && section.cond2Type !== 'notBlank'"
+                            class="ug-ftp-cond-input"
+                            type="text"
+                            placeholder="Filter value..."
+                            [(ngModel)]="section.cond2Value"
+                            (ngModelChange)="onConditionChanged(section)" />
+
+                        <!-- In Range second value -->
+                        <input *ngIf="section.cond2Type === 'inRange'"
+                            class="ug-ftp-cond-input"
+                            type="text"
+                            placeholder="To value..."
+                            [(ngModel)]="section.cond2ValueTo"
+                            (ngModelChange)="onConditionChanged(section)" />
+                    </div>
+
+                    <!-- ======= SET FILTER (Checkboxes) ======= -->
+                    <div class="ug-ftp-search">
+                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
+                        <input type="text" placeholder="Search..." [(ngModel)]="section.searchQuery" (ngModelChange)="onSectionSearch(section)" />
+                    </div>
+
+                    <label class="ug-ftp-item ug-ftp-select-all">
+                        <input type="checkbox" [checked]="isSectionAllSelected(section)" (change)="toggleSectionAll(section)" />
+                        <span>(Select All)</span>
+                    </label>
+
+                    <div class="ug-ftp-values">
+                        <cdk-virtual-scroll-viewport itemSize="28" class="ug-ftp-viewport">
+                            <label class="ug-ftp-item" *cdkVirtualFor="let val of section.displayValues">
+                                <input type="checkbox" [checked]="section.selectedValues.has(val)" (change)="toggleValue(section, val)" />
+                                <span>{{ val === null || val === undefined || val === '' ? '(Blanks)' : val }}</span>
+                            </label>
+                        </cdk-virtual-scroll-viewport>
+                        <div class="ug-ftp-empty" *ngIf="section.displayValues.length === 0">
+                            No values found
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".ug-ftp-wrapper{display:flex;flex-direction:column;height:100%;font-family:var(--ug-font-family, sans-serif);font-size:var(--ug-font-size, 13px);color:var(--ug-header-color, #181d1f)}.ug-ftp-toolbar{display:flex;align-items:center;gap:4px;padding:8px 10px;border-bottom:1px solid var(--ug-border-color);background-color:var(--ug-header-bg);flex-wrap:wrap}.ug-ftp-btn{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border:1px solid var(--ug-border-color);border-radius:3px;background:var(--ug-bg-color);color:var(--ug-header-color);font-family:inherit;font-size:11px;cursor:pointer;transition:all .15s ease;white-space:nowrap}.ug-ftp-btn:hover{background:var(--ug-row-hover-bg);border-color:var(--ug-primary-color);color:var(--ug-primary-color)}.ug-ftp-btn:disabled{opacity:.4;cursor:default;pointer-events:none}.ug-ftp-btn-clear{margin-left:auto}.ug-ftp-sections{flex:1;overflow-y:auto;overflow-x:hidden}.ug-ftp-section{border-bottom:1px solid var(--ug-border-color)}.ug-ftp-section-header{display:flex;align-items:center;padding:10px 12px;cursor:pointer;-webkit-user-select:none;user-select:none;gap:8px;background-color:var(--ug-bg-color);transition:background-color .15s}.ug-ftp-section-header:hover{background-color:var(--ug-row-hover-bg)}.ug-ftp-section-header.active-filter{font-weight:600}.ug-ftp-caret{transition:transform .2s ease;color:var(--ug-icon-color);flex-shrink:0}.ug-ftp-caret.expanded{transform:rotate(90deg)}.ug-ftp-section-title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ug-ftp-active-dot{width:8px;height:8px;border-radius:50%;background-color:var(--ug-primary-color);flex-shrink:0}.ug-ftp-section-body{padding:0 12px 12px;background-color:var(--ug-bg-color)}.ug-ftp-condition-block{display:flex;flex-direction:column;gap:6px;margin-bottom:10px;padding:10px;border:1px solid var(--ug-border-color);border-radius:4px;background:var(--ug-header-bg)}.ug-ftp-cond-select{width:100%;padding:5px 8px;border:1px solid var(--ug-border-color);border-radius:3px;font-family:var(--ug-font-family, sans-serif);font-size:12px;background-color:var(--ug-bg-color);color:var(--ug-header-color);cursor:pointer;box-sizing:border-box}.ug-ftp-cond-select:focus{outline:none;border-color:var(--ug-primary-color)}.ug-ftp-cond-input{width:100%;padding:5px 8px;border:1px solid var(--ug-border-color);border-radius:3px;font-family:var(--ug-font-family, sans-serif);font-size:12px;background-color:var(--ug-bg-color);color:var(--ug-header-color);box-sizing:border-box}.ug-ftp-cond-input:focus{outline:none;border-color:var(--ug-primary-color)}.ug-ftp-operator-row{display:flex;align-items:center;gap:16px;padding:4px 0}.ug-ftp-radio{display:flex;align-items:center;gap:4px;font-size:12px;font-weight:500;cursor:pointer;color:var(--ug-header-color)}.ug-ftp-radio input[type=radio]{accent-color:var(--ug-primary-color);cursor:pointer}.ug-ftp-search{position:relative;display:flex;align-items:center;margin-bottom:8px}.ug-ftp-search svg{position:absolute;left:8px;color:var(--ug-icon-color);pointer-events:none}.ug-ftp-search input{width:100%;padding:5px 8px 5px 26px;border:1px solid var(--ug-border-color);border-radius:3px;font-family:var(--ug-font-family, inherit);font-size:var(--ug-font-size, 12px);background-color:var(--ug-bg-color);color:var(--ug-header-color);box-sizing:border-box}.ug-ftp-search input:focus{outline:none;border-color:var(--ug-primary-color)}.ug-ftp-values{border:1px solid var(--ug-border-color);border-radius:3px;background:var(--ug-bg-color)}.ug-ftp-viewport{height:200px}.ug-ftp-item{display:flex;align-items:center;gap:8px;padding:4px 8px;cursor:pointer;font-size:12px;transition:background-color .1s}.ug-ftp-item:hover{background-color:var(--ug-row-hover-bg)}.ug-ftp-item input[type=checkbox]{accent-color:var(--ug-primary-color);cursor:pointer;width:14px;height:14px;flex-shrink:0}.ug-ftp-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ug-ftp-select-all{border-bottom:1px solid var(--ug-border-color);font-weight:500;padding:6px 8px}.ug-ftp-empty{padding:16px;text-align:center;color:var(--ug-icon-color);font-style:italic;font-size:12px}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { columns: [{
+                type: Input
+            }], rowData: [{
+                type: Input
+            }], activeFilters: [{
+                type: Input
+            }], filterApplied: [{
+                type: Output
+            }], conditionFilterChanged: [{
+                type: Output
+            }], clearAllFilters: [{
+                type: Output
+            }] } });
+
+class SideBarComponent {
+    columns = [];
+    rowData = [];
+    activeFilters = new Map();
+    groupModel = [];
+    valuesModel = [];
+    columnsUpdated = new EventEmitter();
+    groupModelUpdated = new EventEmitter();
+    valuesModelUpdated = new EventEmitter();
+    exportCsvClicked = new EventEmitter();
+    filterApplied = new EventEmitter();
+    conditionFilterChanged = new EventEmitter();
+    clearAllFilters = new EventEmitter();
+    activeTab = 'columns'; // Open by default for demo parity
+    toggleTab(tab) {
+        if (this.activeTab === tab) {
+            this.activeTab = null;
+        }
+        else {
+            this.activeTab = tab;
+        }
+    }
+    closePanel() {
+        this.activeTab = null;
+    }
+    onColumnsChanged(updatedCols) {
+        this.columnsUpdated.emit(updatedCols);
+    }
+    onGroupModelChanged(model) {
+        this.groupModelUpdated.emit(model);
+    }
+    onExportCsvClicked() {
+        this.exportCsvClicked.emit();
+    }
+    onFilterApplied(event) {
+        this.filterApplied.emit(event);
+    }
+    onClearAllFilters() {
+        this.clearAllFilters.emit();
+    }
+    onConditionFilterChanged(event) {
+        this.conditionFilterChanged.emit(event);
+    }
+    onValuesModelChanged(model) {
+        this.valuesModelUpdated.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", groupModel: "groupModel", valuesModel: "valuesModel" }, outputs: { columnsUpdated: "columnsUpdated", groupModelUpdated: "groupModelUpdated", valuesModelUpdated: "valuesModelUpdated", exportCsvClicked: "exportCsvClicked", filterApplied: "filterApplied", conditionFilterChanged: "conditionFilterChanged", clearAllFilters: "clearAllFilters" }, ngImport: i0, template: `
+    <div class="ug-side-bar-wrapper">
+        <!-- Content Area -->
+        <div class="ug-side-bar-content" *ngIf="activeTab">
+            <div class="ug-side-bar-header">
+                <span class="ug-side-bar-title">{{ activeTab === 'columns' ? 'Columns' : 'Filters' }}</span>
+                <span class="ug-side-bar-close" (click)="closePanel()">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+                </span>
+            </div>
+            
+            <div class="ug-side-bar-body">
+                <ug-column-tool-panel 
+                    *ngIf="activeTab === 'columns'"
+                    [columns]="columns"
+                    [groupModel]="groupModel"
+                    [valuesModel]="valuesModel"
+                    (columnsUpdated)="onColumnsChanged($event)"
+                    (groupModelChanged)="onGroupModelChanged($event)"
+                    (valuesModelChanged)="onValuesModelChanged($event)"
+                    (exportCsvClicked)="onExportCsvClicked()">
+                </ug-column-tool-panel>
+
+                <ug-filter-tool-panel
+                    *ngIf="activeTab === 'filters'"
+                    [columns]="columns"
+                    [rowData]="rowData"
+                    [activeFilters]="activeFilters"
+                    (filterApplied)="onFilterApplied($event)"
+                    (conditionFilterChanged)="onConditionFilterChanged($event)"
+                    (clearAllFilters)="onClearAllFilters()">
+                </ug-filter-tool-panel>
+            </div>
+        </div>
+
+        <!-- Toolbar / Tabs -->
+        <div class="ug-side-bar-toolbar">
+            <div class="ug-side-bar-tab" [class.active]="activeTab === 'columns'" (click)="toggleTab('columns')" title="Columns">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+                    <line x1="9" y1="3" x2="9" y2="21"></line>
+                </svg>
+                <span>Columns</span>
+            </div>
+            <div class="ug-side-bar-tab" [class.active]="activeTab === 'filters'" (click)="toggleTab('filters')" title="Filters">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon>
+                </svg>
+                <span>Filters</span>
+            </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"], outputs: ["columnsUpdated", "groupModelChanged", "valuesModelChanged", "exportCsvClicked"] }, { kind: "component", type: FilterToolPanelComponent, selector: "ug-filter-tool-panel", inputs: ["columns", "rowData", "activeFilters"], outputs: ["filterApplied", "conditionFilterChanged", "clearAllFilters"] }], 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,
+            args: [{ selector: 'ug-side-bar', standalone: true, imports: [CommonModule, ColumnToolPanelComponent, FilterToolPanelComponent], template: `
+    <div class="ug-side-bar-wrapper">
+        <!-- Content Area -->
+        <div class="ug-side-bar-content" *ngIf="activeTab">
+            <div class="ug-side-bar-header">
+                <span class="ug-side-bar-title">{{ activeTab === 'columns' ? 'Columns' : 'Filters' }}</span>
+                <span class="ug-side-bar-close" (click)="closePanel()">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+                </span>
+            </div>
+            
+            <div class="ug-side-bar-body">
+                <ug-column-tool-panel 
+                    *ngIf="activeTab === 'columns'"
+                    [columns]="columns"
+                    [groupModel]="groupModel"
+                    [valuesModel]="valuesModel"
+                    (columnsUpdated)="onColumnsChanged($event)"
+                    (groupModelChanged)="onGroupModelChanged($event)"
+                    (valuesModelChanged)="onValuesModelChanged($event)"
+                    (exportCsvClicked)="onExportCsvClicked()">
+                </ug-column-tool-panel>
+
+                <ug-filter-tool-panel
+                    *ngIf="activeTab === 'filters'"
+                    [columns]="columns"
+                    [rowData]="rowData"
+                    [activeFilters]="activeFilters"
+                    (filterApplied)="onFilterApplied($event)"
+                    (conditionFilterChanged)="onConditionFilterChanged($event)"
+                    (clearAllFilters)="onClearAllFilters()">
+                </ug-filter-tool-panel>
+            </div>
+        </div>
+
+        <!-- Toolbar / Tabs -->
+        <div class="ug-side-bar-toolbar">
+            <div class="ug-side-bar-tab" [class.active]="activeTab === 'columns'" (click)="toggleTab('columns')" title="Columns">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+                    <line x1="9" y1="3" x2="9" y2="21"></line>
+                </svg>
+                <span>Columns</span>
+            </div>
+            <div class="ug-side-bar-tab" [class.active]="activeTab === 'filters'" (click)="toggleTab('filters')" title="Filters">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon>
+                </svg>
+                <span>Filters</span>
+            </div>
+        </div>
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, 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"] }]
+        }], propDecorators: { columns: [{
+                type: Input
+            }], rowData: [{
+                type: Input
+            }], activeFilters: [{
+                type: Input
+            }], groupModel: [{
+                type: Input
+            }], valuesModel: [{
+                type: Input
+            }], columnsUpdated: [{
+                type: Output
+            }], groupModelUpdated: [{
+                type: Output
+            }], valuesModelUpdated: [{
+                type: Output
+            }], exportCsvClicked: [{
+                type: Output
+            }], filterApplied: [{
+                type: Output
+            }], conditionFilterChanged: [{
+                type: Output
+            }], clearAllFilters: [{
+                type: Output
+            }] } });
+
+class GridFlattenerService {
+    flatten(nodes, groupStateMap, groupIncludeFooter = false) {
+        const result = [];
+        this.traverse(nodes, groupStateMap, groupIncludeFooter, result);
+        return result;
+    }
+    traverse(nodes, stateMap, groupIncludeFooter, result) {
+        for (const node of nodes) {
+            // Push the current node (could be a group header or a leaf)
+            result.push(node);
+            // If it's a group node, only push its children if it is explicitly expanded in the state map
+            if (node.type === 'group') {
+                const groupNode = node;
+                const isExpanded = stateMap.get(groupNode.id);
+                if (isExpanded) {
+                    if (groupNode.children && groupNode.children.length > 0) {
+                        this.traverse(groupNode.children, stateMap, groupIncludeFooter, result);
+                    }
+                    if (groupIncludeFooter) {
+                        const footerNode = {
+                            id: `${groupNode.id}-footer`,
+                            type: 'group-footer',
+                            level: groupNode.level,
+                            parent: groupNode.parent,
+                            groupField: groupNode.groupField,
+                            groupKey: groupNode.groupKey,
+                            data: { ...groupNode.data } // Copy aggregated data
+                        };
+                        result.push(footerNode);
+                    }
+                }
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: GridFlattenerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: GridFlattenerService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: GridFlattenerService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+// AUTO-GENERATED FILE. DO NOT EDIT.
+// Built from src/lib/workers/export.worker.ts
+const EXPORT_WORKER_CODE = `"use strict";(()=>{var E=1e4;addEventListener("message",({data:a})=>{let{action:c,columns:e,data:l,options:u}=a;if(c==="START_EXPORT")try{let s=u.separator||",",g=u.includeHeaders!==!1,o=[];if(g){let t=e.map(n=>m(n.headerName||n.field,s)).join(s);o.push(t+\`
+\`)}let r="",d=0,f=(t,n)=>{let C=t.data?t.data:t,y=e.map((p,h)=>{let i=C[p.field];return h===0&&n>0&&(i="   ".repeat(n)+(i||"")),h===0&&t.type==="group"&&t.children&&(i=(i||"")+\` (\${t.children.length})\`),m(i,s)}).join(s);if(r+=y+\`
+\`,d++,d>0&&d%E===0&&(o.push(r),r=""),t.type==="group"&&t.children&&t.children.length>0)for(let p of t.children)f(p,n+1)};for(let t=0;t<l.length;t++){let n=l[t].level||0;f(l[t],n)}r&&o.push(r),postMessage({action:"COMPLETE",payload:{parts:o,type:"text/csv;charset=utf-8"}})}catch(s){postMessage({action:"ERROR",error:s.message||"CSV Export Failed"})}});function m(a,c){if(a==null)return"";let e=String(a);return e.includes(c)||e.includes(\`
+\`)||e.includes('"')?\`"\${e.replace(/"/g,'""')}"\`:e}})();
+`;
+
+class CsvExportService {
+    isBrowser;
+    constructor(platformId) {
+        this.isBrowser = isPlatformBrowser(platformId);
+    }
+    exportDataAsCsv(options, columns, data, config) {
+        return new Promise((resolve, reject) => {
+            if (!this.isBrowser) {
+                console.warn('CSV Export is only supported in browser environments');
+                return resolve();
+            }
+            // Initialize Worker from inline JavaScript string blob
+            const blob = new Blob([EXPORT_WORKER_CODE], { type: 'application/javascript' });
+            const workerUrl = URL.createObjectURL(blob);
+            const worker = new Worker(workerUrl);
+            worker.onmessage = ({ data: workerData }) => {
+                const { action, payload, error } = workerData;
+                if (action === 'COMPLETE') {
+                    this.downloadBlob(payload, options.fileName || 'export.csv');
+                    worker.terminate();
+                    URL.revokeObjectURL(workerUrl);
+                    resolve();
+                }
+                else if (action === 'ERROR') {
+                    worker.terminate();
+                    URL.revokeObjectURL(workerUrl);
+                    reject(new Error(error));
+                }
+            };
+            worker.onerror = (err) => {
+                worker.terminate();
+                URL.revokeObjectURL(workerUrl);
+                reject(err);
+            };
+            // Post the data to process
+            worker.postMessage({
+                action: 'START_EXPORT',
+                columns,
+                data,
+                options
+            });
+        });
+    }
+    downloadBlob(blobParams, fileName) {
+        if (!fileName.toLowerCase().endsWith('.csv')) {
+            fileName += '.csv';
+        }
+        // Add UTF-8 BOM so Excel opens CSV files with correct characters natively
+        const BOM = '\uFEFF';
+        const blob = new Blob([BOM, ...blobParams.parts], { type: blobParams.type });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = fileName;
+        document.body.appendChild(a);
+        a.click();
+        // Clean up
+        setTimeout(() => {
+            document.body.removeChild(a);
+            URL.revokeObjectURL(url);
+        }, 100);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: CsvExportService, deps: [{ token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: CsvExportService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: CsvExportService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: Object, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }] });
+
+class UltraGridComponent {
+    cdr;
+    ngZone;
+    flattener;
+    csvExportService;
+    _workerInitialized = false;
+    columns = [];
+    rowData = [];
+    serverDataSource;
+    config = {
+        rowHeight: 40,
+        theme: 'ag-theme-alpine'
+    };
+    pagination = false;
+    pageSize = 100;
+    rowClicked = new EventEmitter();
+    sortChanged = new EventEmitter();
+    isBrowser;
+    visibleColumns = [];
+    sortModel = [];
+    groupModel = [];
+    valuesModel = [];
+    groupStateMap = new Map();
+    _internalDataSource;
+    _localTreeData = [];
+    _unpaginatedLocalData = [];
+    _mappedRowData = []; // Cached array
+    renderedLocalData = [];
+    ssrData = [];
+    totalCount = 0;
+    currentPage = 1;
+    selectionVersion = 0;
+    isMenuOpen = false;
+    activeMenuColumn;
+    menuPosition = { x: 0, y: 0 };
+    isFilterOpen = false;
+    activeFilterColumn;
+    filterPosition = { x: 0, y: 0 };
+    activeFilterUniqueValues = [];
+    // Tracks active filters per column: fieldName -> Set of checked values
+    activeFilters = new Map();
+    // Tracks condition-based filters per column
+    conditionFilters = new Map();
+    isChooseColumnsOpen = false;
+    chooseColumnsPosition = { x: 0, y: 0 };
+    destroy$ = new Subject();
+    sortingWorker;
+    sortingWorkerUrl;
+    _unflattenedTreeData = [];
+    hasCheckboxSelection = false;
+    hasHeaderCheckboxSelection = false;
+    get rowHeight() { return this.config.rowHeight || 40; }
+    get showPagination() { return this.pagination || !!this.serverDataSource; }
+    constructor(platformId, cdr, ngZone, flattener, csvExportService) {
+        this.cdr = cdr;
+        this.ngZone = ngZone;
+        this.flattener = flattener;
+        this.csvExportService = csvExportService;
+        this.isBrowser = isPlatformBrowser(platformId);
+        this.initSortingWorker();
+    }
+    ngOnInit() {
+        this.hasCheckboxSelection = this.columns.some(c => c.checkboxSelection);
+        this.hasHeaderCheckboxSelection = this.columns.some(c => c.headerCheckboxSelection);
+        this.updateVisibleColumns();
+        if (this.serverDataSource && this.isBrowser) {
+            if (!this.pagination) {
+                this._internalDataSource = new InfiniteScrollDataSource(this.wrapServerDataSource(this.serverDataSource), this.config.bufferSize || 200);
+            }
+            else {
+                this.fetchServerPage(1);
+            }
+        }
+    }
+    get selectedRowsCount() {
+        if (!this._mappedRowData)
+            return 0;
+        return this._mappedRowData.filter(row => row.selected).length;
+    }
+    ngOnChanges(changes) {
+        if (changes['rowData']) {
+            this.totalCount = this.rowData.length;
+            this._mappedRowData = this.rowData.map((data, index) => ({
+                id: index,
+                type: 'leaf',
+                level: 0,
+                data: data
+            }));
+            if (this.sortingWorker) {
+                this.sortingWorker.postMessage({ action: 'INIT', rows: this._mappedRowData });
+            }
+            // We do not immediately `applyLocalData()` here anymore if we have a worker,
+            // because INIT needs to finish first. If no worker, we apply directly.
+            if (!this.sortingWorker) {
+                this.applyLocalData();
+            }
+            if (!this.isBrowser) {
+                this.ssrData = this.renderedLocalData.slice(0, 50);
+            }
+        }
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+        if (this.sortingWorker) {
+            this.sortingWorker.terminate();
+        }
+        if (this.sortingWorkerUrl) {
+            URL.revokeObjectURL(this.sortingWorkerUrl);
+        }
+        if (this._internalDataSource) {
+            this._internalDataSource.disconnect();
+        }
+    }
+    initSortingWorker() {
+        if (this.isBrowser && typeof Worker !== 'undefined') {
+            try {
+                // Initialize Worker from inline JavaScript string blob
+                const blob = new Blob([SORTING_WORKER_CODE], { type: 'application/javascript' });
+                this.sortingWorkerUrl = URL.createObjectURL(blob);
+                this.sortingWorker = new Worker(this.sortingWorkerUrl);
+                this.sortingWorker.onmessage = ({ data }) => {
+                    this.ngZone.run(() => {
+                        if (data && data.action === 'INIT_DONE') {
+                            this._workerInitialized = true;
+                            // Now that worker has cached the data, run the first execution
+                            this.applyLocalData();
+                            return;
+                        }
+                        const flatList = data.flatList;
+                        this._unpaginatedLocalData = flatList;
+                        const groupSelectionMap = new Map();
+                        // If sort/group happened, the worker returns a new structural tree. Cache it.
+                        if (data.resultTree) {
+                            this._unflattenedTreeData = data.resultTree;
+                        }
+                        // Always hydrate the structural tree so group node checkmarks strictly persist across flatten events
+                        const hydrateTree = (nodes) => {
+                            let allSelected = true;
+                            if (nodes.length === 0)
+                                allSelected = false;
+                            for (let i = 0; i < nodes.length; i++) {
+                                const node = nodes[i];
+                                if (node.type === 'leaf') {
+                                    const cached = this._mappedRowData[node.id];
+                                    if (cached) {
+                                        node.data = cached.data;
+                                        node.selected = cached.selected;
+                                        if (!cached.selected)
+                                            allSelected = false;
+                                    }
+                                    else {
+                                        allSelected = false;
+                                    }
+                                }
+                                else if (node.type === 'group' && node.children) {
+                                    const isGroupSelected = hydrateTree(node.children);
+                                    node.selected = isGroupSelected;
+                                    groupSelectionMap.set(node.id, isGroupSelected);
+                                    if (!isGroupSelected)
+                                        allSelected = false;
+                                }
+                            }
+                            return allSelected;
+                        };
+                        if (this._unflattenedTreeData) {
+                            hydrateTree(this._unflattenedTreeData);
+                        }
+                        // Sync the flat list data payload and strictly enforce selection states
+                        for (let i = 0; i < flatList.length; i++) {
+                            const row = flatList[i];
+                            if (row.type === 'leaf') {
+                                const cached = this._mappedRowData[row.id];
+                                if (cached) {
+                                    if (!row.data)
+                                        row.data = cached.data;
+                                    row.selected = cached.selected;
+                                }
+                            }
+                            else if (row.type === 'group') {
+                                row.selected = groupSelectionMap.has(row.id) ? groupSelectionMap.get(row.id) : (row.selected || false);
+                            }
+                        }
+                        this.totalCount = this._unpaginatedLocalData.length;
+                        this.updatePaginationForLocalData();
+                        this.cdr.markForCheck();
+                    });
+                };
+            }
+            catch (e) {
+                console.warn('Web worker initialization failed, falling back to local sorting', e);
+            }
+        }
+    }
+    updateVisibleColumns() {
+        const temp = this.columns.filter(c => !c.hide);
+        const left = temp.filter(c => c.pinned === 'left');
+        const right = temp.filter(c => c.pinned === 'right');
+        const center = temp.filter(c => !c.pinned);
+        let currLeft = 0;
+        left.forEach(c => {
+            c._leftOffset = currLeft;
+            currLeft += (c.width || 200);
+        });
+        let currRight = 0;
+        [...right].reverse().forEach(c => {
+            c._rightOffset = currRight;
+            currRight += (c.width || 200);
+        });
+        this.visibleColumns = [...left, ...center, ...right];
+        // Ensure checkbox selection strictly stays on the first visible column, regardless of Drag&Drop swaps
+        if (this.visibleColumns.length > 0) {
+            this.visibleColumns.forEach((c, index) => {
+                c.checkboxSelection = index === 0 ? this.hasCheckboxSelection : false;
+                c.headerCheckboxSelection = index === 0 ? this.hasHeaderCheckboxSelection : false;
+            });
+        }
+    }
+    wrapServerDataSource(source) {
+        return {
+            getRows: (params) => {
+                return source.getRows({ ...params, sortModel: this.sortModel }).pipe(map(res => ({
+                    ...res,
+                    rows: res.rows.map((r, i) => ({ id: i + params.startRow, type: 'leaf', level: 0, data: r }))
+                })));
+            }
+        };
+    }
+    applyLocalData() {
+        if (!this.rowData)
+            return;
+        if (this.sortingWorker && !this._workerInitialized)
+            return; // Wait for worker INIT_DONE
+        let processed = this._mappedRowData;
+        // Prepare Filter Model for Worker by converting Set to Array
+        const filterModelObj = {};
+        let hasFilter = false;
+        if (this.activeFilters.size > 0) {
+            hasFilter = true;
+            for (const [field, selectedSet] of this.activeFilters.entries()) {
+                filterModelObj[field] = Array.from(selectedSet);
+            }
+        }
+        const hasSort = this.sortModel.length > 0;
+        // Prepare State Map for Worker
+        const stateMapObj = {};
+        for (const [key, value] of this.groupStateMap.entries()) {
+            stateMapObj[key] = value;
+        }
+        // Prepare Aggregations map: merge static aggFunc from column defs with dynamic valuesModel
+        const aggregations = {};
+        // Static aggFunc from column definitions
+        for (const col of this.columns) {
+            if (col.aggFunc) {
+                aggregations[col.field] = col.aggFunc;
+            }
+        }
+        // Dynamic values from Values panel
+        if (this.valuesModel.length > 0) {
+            for (const vCol of this.valuesModel) {
+                if (!aggregations[vCol.field]) {
+                    aggregations[vCol.field] = vCol.aggFunc;
+                }
+            }
+        }
+        else {
+            // Default: aggregate all numeric columns if Values panel is empty
+            for (const col of this.columns) {
+                if (!aggregations[col.field] && this.isNumericColumn(col.field)) {
+                    aggregations[col.field] = 'sum';
+                }
+            }
+        }
+        if (hasFilter || hasSort || this.groupModel.length > 0 || this.conditionFilters.size > 0) {
+            if (this.sortingWorker) {
+                this.sortingWorker.postMessage({
+                    action: 'EXECUTE',
+                    sortModel: this.sortModel,
+                    filterModel: hasFilter ? filterModelObj : null,
+                    conditionFilters: this.conditionFilters.size > 0 ? Object.fromEntries(this.conditionFilters) : null,
+                    groupModel: this.groupModel,
+                    groupStateMap: stateMapObj,
+                    aggregations: aggregations,
+                    groupIncludeFooter: !!this.config.groupIncludeFooter
+                });
+                return;
+            }
+            else {
+                // Fallback to local filtering if Worker fails/unsupported
+                if (hasFilter) {
+                    processed = processed.filter(row => {
+                        for (const [field, selectedSet] of this.activeFilters.entries()) {
+                            const cellValue = row.data ? row.data[field] : null;
+                            if (!selectedSet.has(cellValue))
+                                return false;
+                        }
+                        return true;
+                    });
+                }
+                if (hasSort) {
+                    processed = this.sortLocal(processed);
+                }
+            }
+        }
+        this._localTreeData = processed;
+        this.refreshFlattener();
+    }
+    refreshFlattener() {
+        this._unpaginatedLocalData = this.flattener.flatten(this._localTreeData, this.groupStateMap, !!this.config.groupIncludeFooter);
+        this.totalCount = this._unpaginatedLocalData.length;
+        this.updatePaginationForLocalData();
+        this.cdr.markForCheck();
+    }
+    isNumericColumn(field) {
+        // Check up to the first 5 rows to determine if the column contains numeric data
+        const rowsToCheck = Math.min(20, this._unpaginatedLocalData.length);
+        if (rowsToCheck === 0)
+            return false;
+        let hasNumeric = false;
+        for (let i = 0; i < Math.min(rowsToCheck, this._unpaginatedLocalData.length); i++) {
+            const val = this._unpaginatedLocalData[i]?.data?.[field];
+            if (val !== undefined && val !== null && val !== '') {
+                const strVal = String(val);
+                // Reject if it contains alphabetic letters (e.g. "User 1" or "101 USD")
+                if (/[a-zA-Z]/.test(strVal))
+                    return false;
+                // Remove currency symbols, commas, and spaces, then check if it's a valid number
+                const parsed = Number(strVal.replace(/[^0-9.-]+/g, ''));
+                if (!isNaN(parsed)) {
+                    hasNumeric = true;
+                }
+            }
+        }
+        return hasNumeric;
+    }
+    toggleGroup(groupId) {
+        const isExpanded = this.groupStateMap.get(groupId);
+        this.groupStateMap.set(groupId, !isExpanded);
+        const stateObj = Object.fromEntries(this.groupStateMap);
+        if (this.sortingWorker) {
+            // High-performance path: only trigger flattening on the already-cached tree
+            this.sortingWorker.postMessage({
+                action: 'FLATTEN_ONLY',
+                groupStateMap: stateObj,
+                groupIncludeFooter: !!this.config.groupIncludeFooter
+            });
+        }
+        else {
+            // Fallback for non-worker mode
+            this.refreshFlattener();
+        }
+    }
+    isGroupExpanded(row) {
+        if (!row || row.type !== 'group')
+            return false;
+        return !!this.groupStateMap.get(row.id);
+    }
+    sortLocal(rows) {
+        return [...rows].sort((a, b) => {
+            for (const sort of this.sortModel) {
+                const { field, direction } = sort;
+                const valA = a.data ? a.data[field] : null;
+                const valB = b.data ? b.data[field] : null;
+                if (valA === valB)
+                    continue;
+                const comparison = valA > valB ? 1 : -1;
+                return direction === 'asc' ? comparison : -comparison;
+            }
+            return 0;
+        });
+    }
+    updatePaginationForLocalData() {
+        if (this.pagination && !this.serverDataSource) {
+            const start = (this.currentPage - 1) * this.pageSize;
+            const end = start + this.pageSize;
+            this.renderedLocalData = this._unpaginatedLocalData.slice(start, end);
+        }
+        else if (!this.serverDataSource) {
+            this.renderedLocalData = this._unpaginatedLocalData;
+        }
+    }
+    fetchServerPage(page) {
+        if (!this.serverDataSource)
+            return;
+        const startRow = (page - 1) * this.pageSize;
+        const endRow = startRow + this.pageSize;
+        this.serverDataSource.getRows({
+            startRow,
+            endRow,
+            sortModel: this.sortModel
+        }).subscribe(res => {
+            this.totalCount = res.totalCount;
+            this.renderedLocalData = res.rows.map((r, i) => ({ id: startRow + i, type: 'leaf', level: 0, data: r }));
+            this.currentPage = page;
+            this.cdr.markForCheck();
+        });
+    }
+    /**
+     * Triggers a Web-Worker powered CSV export of the grid data.
+     * @param options Configures whether to export all records or just visible records, as well as CSV formatting.
+     */
+    async exportCsv(options = {}) {
+        const mode = options.mode || 'all';
+        const sourceColumns = options.columnKeys
+            ? this.columns.filter(c => options.columnKeys.includes(c.field))
+            : this.visibleColumns;
+        let exportData = [];
+        if (mode === 'all') {
+            exportData = this.rowData;
+            if (this.serverDataSource) {
+                console.warn('UltraGrid: "all" export mode is not fully supported with ServerDataSource since all rows are not loaded locally.');
+            }
+        }
+        else {
+            // When grouped, _unpaginatedLocalData only has expanded visible nodes.
+            // We use the full nested _unflattenedTreeData so the export worker can extract all nested rows recursively.
+            exportData = this._unflattenedTreeData && this._unflattenedTreeData.length > 0
+                ? this._unflattenedTreeData
+                : this._unpaginatedLocalData;
+        }
+        try {
+            await this.csvExportService.exportDataAsCsv(options, sourceColumns, exportData, this.config);
+        }
+        catch (error) {
+            console.error('UltraGrid CSV Export Failed:', error);
+        }
+    }
+    onPageChanged(page) {
+        if (this.serverDataSource && this.pagination) {
+            this.fetchServerPage(page);
+        }
+        else {
+            this.currentPage = page;
+            this.applyLocalData();
+        }
+    }
+    onSortChanged(event) {
+        if (this.config.multiSort) {
+            const existingIdx = this.sortModel.findIndex(m => m.field === event.field);
+            if (event.direction === null) {
+                if (existingIdx >= 0) {
+                    this.sortModel = this.sortModel.filter(m => m.field !== event.field);
+                }
+            }
+            else {
+                if (existingIdx >= 0) {
+                    const newModel = [...this.sortModel];
+                    newModel[existingIdx] = { ...newModel[existingIdx], direction: event.direction };
+                    this.sortModel = newModel;
+                }
+                else {
+                    this.sortModel = [...this.sortModel, { field: event.field, direction: event.direction }];
+                }
+            }
+        }
+        else {
+            if (event.direction === null)
+                this.sortModel = [];
+            else
+                this.sortModel = [{ field: event.field, direction: event.direction }];
+        }
+        this.sortChanged.emit(this.sortModel);
+        // Re-fetch or re-sort
+        if (this.serverDataSource) {
+            if (this._internalDataSource) {
+                this._internalDataSource = new InfiniteScrollDataSource(this.wrapServerDataSource(this.serverDataSource), this.config.bufferSize || 200);
+            }
+            else if (this.pagination) {
+                this.fetchServerPage(1);
+            }
+        }
+        else {
+            this.applyLocalData();
+        }
+    }
+    onColumnsReordered(cols) {
+        this.columns = cols;
+        this.updateVisibleColumns();
+        this.cdr.markForCheck();
+    }
+    onSideBarColumnsUpdated(cols) {
+        this.columns = cols;
+        this.updateVisibleColumns();
+        this.cdr.markForCheck();
+    }
+    onSideBarGroupModelUpdated(model) {
+        this.groupModel = model;
+        this.applyLocalData();
+        this.cdr.markForCheck();
+    }
+    onValuesModelUpdated(model) {
+        this.valuesModel = model;
+        this.applyLocalData();
+        this.cdr.markForCheck();
+    }
+    onColumnResized(event) {
+        const col = this.columns.find(c => c.field === event.field);
+        if (col) {
+            col.width = event.width;
+            this.updateVisibleColumns();
+            this.cdr.markForCheck();
+        }
+    }
+    get isAllSelected() {
+        const targetArray = this._unpaginatedLocalData;
+        if (!targetArray || targetArray.length === 0)
+            return false;
+        return targetArray.every(r => r.selected);
+    }
+    onHeaderCheckboxClicked(selected) {
+        // 1. Traverse the full unflattened tree to persist selection to ALL rows matching the filter
+        const traverse = (nodes) => {
+            for (const n of nodes) {
+                n.selected = selected;
+                if (n.type === 'leaf' && this._mappedRowData[n.id]) {
+                    this._mappedRowData[n.id].selected = selected;
+                }
+                else if (n.type === 'group' && n.children) {
+                    traverse(n.children);
+                }
+            }
+        };
+        traverse(this._unflattenedTreeData);
+        // 2. Update the currently flattened array for instant UI update
+        for (const row of this._unpaginatedLocalData) {
+            row.selected = selected;
+        }
+        this.selectionVersion++;
+        this.cdr.markForCheck();
+    }
+    onPageSizeChanged(size) {
+        this.pageSize = size;
+        this.currentPage = 1;
+        if (this.serverDataSource && this.pagination) {
+            this.fetchServerPage(1);
+        }
+        else {
+            this.updatePaginationForLocalData();
+            this.cdr.markForCheck();
+        }
+    }
+    selectNodeAndChildren(nodeId, selected) {
+        // Find the node in the unflattened tree using DFS
+        const findNode = (nodes, id) => {
+            for (const node of nodes) {
+                if (node.id === id)
+                    return node;
+                if (node.type === 'group' && node.children) {
+                    const found = findNode(node.children, id);
+                    if (found)
+                        return found;
+                }
+            }
+            return undefined;
+        };
+        const targetNode = findNode(this._unflattenedTreeData, nodeId);
+        if (!targetNode)
+            return;
+        // Collect all leaf IDs under this node, and set group selections
+        const leafIdsToUpdate = new Set();
+        const groupIdsToUpdate = new Set();
+        const traverse = (n) => {
+            n.selected = selected;
+            if (n.type === 'leaf') {
+                leafIdsToUpdate.add(n.id);
+                if (this._mappedRowData[n.id]) {
+                    this._mappedRowData[n.id].selected = selected;
+                }
+            }
+            else if (n.type === 'group' && n.children) {
+                groupIdsToUpdate.add(n.id);
+                n.children.forEach((child) => traverse(child));
+            }
+        };
+        traverse(targetNode);
+        // Update the flattened list in O(N) time so the UI reflects it instantly
+        for (let i = 0; i < this._unpaginatedLocalData.length; i++) {
+            const row = this._unpaginatedLocalData[i];
+            if (row.type === 'leaf' && leafIdsToUpdate.has(row.id)) {
+                row.selected = selected;
+            }
+            else if (row.type === 'group' && groupIdsToUpdate.has(row.id)) {
+                row.selected = selected;
+            }
+        }
+    }
+    onRowClicked(row) {
+        if (!row)
+            return;
+        let newSelectedState = true;
+        if (this.config.rowSelection === 'single') {
+            this._unpaginatedLocalData.forEach(r => r.selected = false);
+            this._mappedRowData.forEach(r => { if (r)
+                r.selected = false; });
+            row.selected = true;
+            if (row.type === 'leaf' && this._mappedRowData[row.id]) {
+                this._mappedRowData[row.id].selected = true;
+            }
+        }
+        else if (this.config.rowSelection === 'multiple') {
+            newSelectedState = !row.selected;
+            row.selected = newSelectedState;
+            if (row.type === 'leaf' && this._mappedRowData[row.id]) {
+                this._mappedRowData[row.id].selected = newSelectedState;
+            }
+            else if (row.type === 'group') {
+                this.selectNodeAndChildren(row.id, newSelectedState);
+            }
+        }
+        this.selectionVersion++;
+        this.rowClicked.emit(row);
+        this.cdr.markForCheck();
+    }
+    getPlaceholderRow(index) {
+        return {
+            id: `placeholder-${index}`,
+            type: 'leaf',
+            level: 0,
+            data: null
+        };
+    }
+    trackByRowId(index, item) {
+        return item ? item.id : index;
+    }
+    onHeaderMenuClicked(event) {
+        this.activeMenuColumn = event.column;
+        this.menuPosition = { x: event.event.clientX, y: event.event.clientY };
+        this.isMenuOpen = true;
+        this.cdr.markForCheck();
+    }
+    onMenuClosed() {
+        this.isMenuOpen = false;
+        this.activeMenuColumn = undefined;
+        this.cdr.markForCheck();
+    }
+    onMenuSort(event) {
+        this.onSortChanged(event);
+    }
+    onMenuPin(event) {
+        const col = this.columns.find(c => c.field === event.field);
+        if (col) {
+            col.pinned = event.pinned || undefined;
+            this.updateVisibleColumns();
+            this.cdr.markForCheck();
+        }
+    }
+    onMenuAutosize(event) {
+        // Basic implementation: set width to 200px or calculate based on sampling
+        // A complete implementation would measure Canvas TextMetrics
+        if (event.all) {
+            this.columns.forEach(c => c.width = 200);
+        }
+        else {
+            const col = this.columns.find(c => c.field === event.field);
+            if (col)
+                col.width = 250;
+        }
+        this.updateVisibleColumns();
+        this.cdr.markForCheck();
+    }
+    onMenuGroup(event) {
+        if (!this.groupModel) {
+            this.groupModel = [];
+        }
+        if (this.groupModel.includes(event.field)) {
+            // Remove from grouping
+            this.groupModel = this.groupModel.filter(f => f !== event.field);
+        }
+        else {
+            // Add to grouping
+            this.groupModel = [...this.groupModel, event.field];
+        }
+        this.applyLocalData();
+        this.cdr.markForCheck();
+    }
+    onMenuChooseColumns() {
+        this.isChooseColumnsOpen = true;
+        // Position it slightly shifted from the menu icon
+        this.chooseColumnsPosition = { x: this.menuPosition.x + 20, y: this.menuPosition.y + 20 };
+        this.isMenuOpen = false;
+        this.cdr.markForCheck();
+    }
+    onChooseColumnsUpdated(columns) {
+        this.columns = columns;
+        this.updateVisibleColumns();
+        this.cdr.markForCheck();
+    }
+    // --- Filter logic ---
+    getFilterSetForColumn(field) {
+        if (!field)
+            return new Set();
+        return this.activeFilters.get(field) || new Set();
+    }
+    onHeaderFilterClicked(event) {
+        this.activeFilterColumn = event.column;
+        this.filterPosition = { x: event.event.clientX, y: event.event.clientY };
+        this.isFilterOpen = true;
+        // Calculate unique values based on un-paginated / un-filtered raw data
+        const uniqueSet = new Set();
+        this.rowData.forEach(row => {
+            const val = row[event.column.field];
+            uniqueSet.add(val);
+        });
+        // Convert to array and sort (keeping nulls/blanks separate logically)
+        this.activeFilterUniqueValues = Array.from(uniqueSet).sort((a, b) => {
+            if (a === null || a === undefined || a === '')
+                return -1;
+            if (b === null || b === undefined || b === '')
+                return 1;
+            return a > b ? 1 : -1;
+        });
+        this.cdr.markForCheck();
+    }
+    onFilterClosed() {
+        this.isFilterOpen = false;
+        this.activeFilterColumn = undefined;
+        this.cdr.markForCheck();
+    }
+    onFilterApplied(event) {
+        if (event.selected.size === 0) {
+            // Empty filter means "Clear Filter / Show All"
+            this.activeFilters.delete(event.field);
+        }
+        else {
+            this.activeFilters.set(event.field, event.selected);
+        }
+        this.currentPage = 1; // Reset to page 1 on filter
+        this.applyLocalData(); // Re-run pipeline (filter -> sort -> paginate)
+    }
+    onClearAllFilters() {
+        this.activeFilters.clear();
+        this.conditionFilters.clear();
+        this.currentPage = 1;
+        this.applyLocalData();
+        this.cdr.markForCheck();
+    }
+    onConditionFilterChanged(event) {
+        if (event.filter === null) {
+            this.conditionFilters.delete(event.field);
+        }
+        else {
+            this.conditionFilters.set(event.field, event.filter);
+        }
+        this.currentPage = 1;
+        this.applyLocalData();
+        this.cdr.markForCheck();
+    }
+    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: CsvExportService }], 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" }, outputs: { rowClicked: "rowClicked", sortChanged: "sortChanged" }, usesOnChanges: true, ngImport: i0, template: `
+    <div class="ug-wrapper" [ngClass]="config.theme || 'ag-theme-alpine'">
+      
+      <div class="ug-main">
+        <ug-header
+          [columns]="visibleColumns"
+          [sortModel]="sortModel"
+          [isAllSelected]="isAllSelected"
+          (sortChanged)="onSortChanged($event)"
+          (columnsReordered)="onColumnsReordered($event)"
+          (columnResized)="onColumnResized($event)"
+          (headerCheckboxClicked)="onHeaderCheckboxClicked($event)"
+          (menuClicked)="onHeaderMenuClicked($event)"
+          (filterClicked)="onHeaderFilterClicked($event)">
+        </ug-header>
+
+        <div class="ug-body">
+          <ng-container *ngIf="isBrowser; else ssrPlaceholder">
+            <cdk-virtual-scroll-viewport 
+              [itemSize]="rowHeight" 
+              class="ug-viewport">
+              
+              <ug-row
+                *cdkVirtualFor="let row of _internalDataSource || renderedLocalData; let i = index; trackBy: trackByRowId"
+                [row]="row || getPlaceholderRow(i)"
+                [columns]="visibleColumns"
+                [rowHeight]="rowHeight"
+                [isExpanded]="isGroupExpanded(row!)"
+                [selectionVersion]="selectionVersion"
+                (groupToggled)="toggleGroup(row!.id.toString())"
+                (click)="onRowClicked(row)">
+              </ug-row>
+
+            </cdk-virtual-scroll-viewport>
+          </ng-container>
+
+          <ng-template #ssrPlaceholder>
+            <div class="ug-ssr-container">
+              <ug-row
+                *ngFor="let row of ssrData; trackBy: trackByRowId"
+                [row]="row"
+                [columns]="visibleColumns"
+                [rowHeight]="rowHeight"
+                [selectionVersion]="selectionVersion">
+              </ug-row>
+            </div>
+          </ng-template>
+        </div>
+
+        <div class="ug-status-bar" *ngIf="config.statusBar">
+          <span>Total Rows: {{ totalCount }}</span>
+          <span style="margin-left: 16px;">Selected: {{ selectedRowsCount }}</span>
+        </div>
+
+        <ug-pagination
+          *ngIf="showPagination"
+          [totalCount]="totalCount"
+          [pageSize]="pageSize"
+          [currentPage]="currentPage"
+          (pageChanged)="onPageChanged($event)"
+          (pageSizeChanged)="onPageSizeChanged($event)">
+        </ug-pagination>
+      </div>
+
+      <ug-side-bar 
+        *ngIf="config.sideBar" 
+        [columns]="columns" 
+        [rowData]="rowData"
+        [activeFilters]="activeFilters"
+        [groupModel]="groupModel"
+        [valuesModel]="valuesModel"
+        (columnsUpdated)="onSideBarColumnsUpdated($event)"
+        (groupModelUpdated)="onSideBarGroupModelUpdated($event)"
+        (valuesModelUpdated)="onValuesModelUpdated($event)"
+        (exportCsvClicked)="exportCsv({ mode: 'visible' })"
+        (filterApplied)="onFilterApplied($event)"
+        (conditionFilterChanged)="onConditionFilterChanged($event)"
+        (clearAllFilters)="onClearAllFilters()">
+      </ug-side-bar>
+
+
+      <ug-header-menu
+        [column]="activeMenuColumn"
+        [isOpen]="isMenuOpen"
+        [position]="menuPosition"
+        [groupModel]="groupModel"
+        (closeMenu)="onMenuClosed()"
+        (sort)="onMenuSort($event)"
+        (pin)="onMenuPin($event)"
+        (autosize)="onMenuAutosize($event)"
+        (group)="onMenuGroup($event)"
+        (chooseColumns)="onMenuChooseColumns()">
+      </ug-header-menu>
+
+      <ug-header-filter
+        [column]="activeFilterColumn"
+        [isOpen]="isFilterOpen"
+        [position]="filterPosition"
+        [uniqueValues]="activeFilterUniqueValues"
+        [activeFilterSet]="getFilterSetForColumn(activeFilterColumn?.field)"
+        (closeFilter)="onFilterClosed()"
+        (filterApplied)="onFilterApplied($event)">
+      </ug-header-filter>
+
+      <div class="ug-cc-overlay-container" *ngIf="isChooseColumnsOpen" [style.top.px]="chooseColumnsPosition.y" [style.left.px]="chooseColumnsPosition.x">
+        <ug-choose-columns 
+          [columns]="columns" 
+          (columnsChanged)="onChooseColumnsUpdated($event)"
+          (closePanel)="isChooseColumnsOpen = false">
+        </ug-choose-columns>
+      </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", "groupModel", "valuesModel"], outputs: ["columnsUpdated", "groupModelUpdated", "valuesModelUpdated", "exportCsvClicked", "filterApplied", "conditionFilterChanged", "clearAllFilters"] }], 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,
+            args: [{ selector: 'bways-grid', standalone: true, imports: [
+                        CommonModule,
+                        ScrollingModule,
+                        HeaderComponent,
+                        RowComponent,
+                        PaginationComponent,
+                        HeaderMenuComponent,
+                        ChooseColumnsComponent,
+                        HeaderFilterComponent,
+                        SideBarComponent
+                    ], template: `
+    <div class="ug-wrapper" [ngClass]="config.theme || 'ag-theme-alpine'">
+      
+      <div class="ug-main">
+        <ug-header
+          [columns]="visibleColumns"
+          [sortModel]="sortModel"
+          [isAllSelected]="isAllSelected"
+          (sortChanged)="onSortChanged($event)"
+          (columnsReordered)="onColumnsReordered($event)"
+          (columnResized)="onColumnResized($event)"
+          (headerCheckboxClicked)="onHeaderCheckboxClicked($event)"
+          (menuClicked)="onHeaderMenuClicked($event)"
+          (filterClicked)="onHeaderFilterClicked($event)">
+        </ug-header>
+
+        <div class="ug-body">
+          <ng-container *ngIf="isBrowser; else ssrPlaceholder">
+            <cdk-virtual-scroll-viewport 
+              [itemSize]="rowHeight" 
+              class="ug-viewport">
+              
+              <ug-row
+                *cdkVirtualFor="let row of _internalDataSource || renderedLocalData; let i = index; trackBy: trackByRowId"
+                [row]="row || getPlaceholderRow(i)"
+                [columns]="visibleColumns"
+                [rowHeight]="rowHeight"
+                [isExpanded]="isGroupExpanded(row!)"
+                [selectionVersion]="selectionVersion"
+                (groupToggled)="toggleGroup(row!.id.toString())"
+                (click)="onRowClicked(row)">
+              </ug-row>
+
+            </cdk-virtual-scroll-viewport>
+          </ng-container>
+
+          <ng-template #ssrPlaceholder>
+            <div class="ug-ssr-container">
+              <ug-row
+                *ngFor="let row of ssrData; trackBy: trackByRowId"
+                [row]="row"
+                [columns]="visibleColumns"
+                [rowHeight]="rowHeight"
+                [selectionVersion]="selectionVersion">
+              </ug-row>
+            </div>
+          </ng-template>
+        </div>
+
+        <div class="ug-status-bar" *ngIf="config.statusBar">
+          <span>Total Rows: {{ totalCount }}</span>
+          <span style="margin-left: 16px;">Selected: {{ selectedRowsCount }}</span>
+        </div>
+
+        <ug-pagination
+          *ngIf="showPagination"
+          [totalCount]="totalCount"
+          [pageSize]="pageSize"
+          [currentPage]="currentPage"
+          (pageChanged)="onPageChanged($event)"
+          (pageSizeChanged)="onPageSizeChanged($event)">
+        </ug-pagination>
+      </div>
+
+      <ug-side-bar 
+        *ngIf="config.sideBar" 
+        [columns]="columns" 
+        [rowData]="rowData"
+        [activeFilters]="activeFilters"
+        [groupModel]="groupModel"
+        [valuesModel]="valuesModel"
+        (columnsUpdated)="onSideBarColumnsUpdated($event)"
+        (groupModelUpdated)="onSideBarGroupModelUpdated($event)"
+        (valuesModelUpdated)="onValuesModelUpdated($event)"
+        (exportCsvClicked)="exportCsv({ mode: 'visible' })"
+        (filterApplied)="onFilterApplied($event)"
+        (conditionFilterChanged)="onConditionFilterChanged($event)"
+        (clearAllFilters)="onClearAllFilters()">
+      </ug-side-bar>
+
+
+      <ug-header-menu
+        [column]="activeMenuColumn"
+        [isOpen]="isMenuOpen"
+        [position]="menuPosition"
+        [groupModel]="groupModel"
+        (closeMenu)="onMenuClosed()"
+        (sort)="onMenuSort($event)"
+        (pin)="onMenuPin($event)"
+        (autosize)="onMenuAutosize($event)"
+        (group)="onMenuGroup($event)"
+        (chooseColumns)="onMenuChooseColumns()">
+      </ug-header-menu>
+
+      <ug-header-filter
+        [column]="activeFilterColumn"
+        [isOpen]="isFilterOpen"
+        [position]="filterPosition"
+        [uniqueValues]="activeFilterUniqueValues"
+        [activeFilterSet]="getFilterSetForColumn(activeFilterColumn?.field)"
+        (closeFilter)="onFilterClosed()"
+        (filterApplied)="onFilterApplied($event)">
+      </ug-header-filter>
+
+      <div class="ug-cc-overlay-container" *ngIf="isChooseColumnsOpen" [style.top.px]="chooseColumnsPosition.y" [style.left.px]="chooseColumnsPosition.x">
+        <ug-choose-columns 
+          [columns]="columns" 
+          (columnsChanged)="onChooseColumnsUpdated($event)"
+          (closePanel)="isChooseColumnsOpen = false">
+        </ug-choose-columns>
+      </div>
+
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, 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"] }]
+        }], ctorParameters: () => [{ type: Object, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: GridFlattenerService }, { type: CsvExportService }], propDecorators: { columns: [{
+                type: Input
+            }], rowData: [{
+                type: Input
+            }], serverDataSource: [{
+                type: Input
+            }], config: [{
+                type: Input
+            }], pagination: [{
+                type: Input
+            }], pageSize: [{
+                type: Input
+            }], rowClicked: [{
+                type: Output
+            }], sortChanged: [{
+                type: Output
+            }] } });
+
+const COMPONENTS = [
+    UltraGridComponent,
+    HeaderComponent,
+    RowComponent,
+    CellComponent,
+    PaginationComponent,
+    ColumnResizeDirective
+];
+class BwaysGridModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: BwaysGridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.18", ngImport: i0, type: BwaysGridModule, imports: [UltraGridComponent,
+            HeaderComponent,
+            RowComponent,
+            CellComponent,
+            PaginationComponent,
+            ColumnResizeDirective,
+            SideBarComponent], exports: [UltraGridComponent,
+            HeaderComponent,
+            RowComponent,
+            CellComponent,
+            PaginationComponent,
+            ColumnResizeDirective,
+            SideBarComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: BwaysGridModule, imports: [UltraGridComponent,
+            HeaderComponent,
+            RowComponent,
+            CellComponent,
+            PaginationComponent,
+            SideBarComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: BwaysGridModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        UltraGridComponent,
+                        HeaderComponent,
+                        RowComponent,
+                        CellComponent,
+                        PaginationComponent,
+                        ColumnResizeDirective,
+                        SideBarComponent
+                    ],
+                    exports: [
+                        UltraGridComponent,
+                        HeaderComponent,
+                        RowComponent,
+                        CellComponent,
+                        PaginationComponent,
+                        ColumnResizeDirective,
+                        SideBarComponent
+                    ]
+                }]
+        }] });
+
+/**
+ * Condition-based filter model for AG Grid-style advanced filtering.
+ * Each column can have up to 2 conditions joined by AND/OR.
+ */
+
+class GridEngineService {
+    _eventBus = new Subject();
+    get events$() {
+        return this._eventBus.asObservable();
+    }
+    dispatch(name, payload) {
+        this._eventBus.next({ name, payload });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: GridEngineService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: GridEngineService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: GridEngineService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class ViewportManager {
+    _scrollTop = 0;
+    _viewportHeight = 600;
+    _rowHeight = 40;
+    _bufferSize = 20;
+    get scrollTop() { return this._scrollTop; }
+    set scrollTop(val) { this._scrollTop = val; }
+    get viewportHeight() { return this._viewportHeight; }
+    set viewportHeight(val) { this._viewportHeight = val; }
+    get rowHeight() { return this._rowHeight; }
+    set rowHeight(val) { this._rowHeight = val; }
+    get bufferSize() { return this._bufferSize; }
+    set bufferSize(val) { this._bufferSize = val; }
+    getVisibleRange() {
+        const startRowIndex = Math.floor(this._scrollTop / this._rowHeight);
+        const endRowIndex = startRowIndex + Math.ceil(this._viewportHeight / this._rowHeight);
+        const start = Math.max(0, startRowIndex - this._bufferSize);
+        const end = endRowIndex + this._bufferSize;
+        return { start, end };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ViewportManager, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ViewportManager, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ViewportManager, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class RowCache {
+    _cache = new WeakMap();
+    getRow(data) {
+        return this._cache.get(data);
+    }
+    setRow(data, row) {
+        if (data) {
+            this._cache.set(data, row);
+        }
+    }
+    clear() {
+        this._cache = new WeakMap();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: RowCache, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: RowCache, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: RowCache, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+/*
+ * Public API Surface of bways-grid
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BwaysGridModule, CellComponent, ColumnResizeDirective, ColumnToolPanelComponent, FilterToolPanelComponent, GridEngineService, HeaderComponent, InfiniteScrollDataSource, PaginationComponent, RowCache, RowComponent, SideBarComponent, UltraGridComponent, ViewportManager };
+//# sourceMappingURL=bways-grid.mjs.map