@nlabtech/nlabs-grid 1.1.0

package/fesm2022/nlabtech-nlabs-grid.mjs

@@ -0,0 +1,1881 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, Injectable, signal, effect, input, inject, Component, Input, Directive, linkedSignal, EventEmitter, contentChild, TemplateRef, ElementRef, Output, ContentChildren, ViewChild } from '@angular/core';
+import { map, of, delay } from 'rxjs';
+import * as i3 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i4 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+
+const ODATA_BASE_URL = new InjectionToken('ODATA_BASE_URL');
+/**
+ * OData v4 Adapter
+ * Implements IDataAdapter for OData protocol
+ */
+class ODataAdapter {
+    http;
+    baseUrl;
+    constructor(http, baseUrl) {
+        this.http = http;
+        this.baseUrl = baseUrl;
+    }
+    getData(request) {
+        const url = `${this.baseUrl}?${this.buildQuery(request)}`;
+        console.log('OData Request URL:', url);
+        return this.http.get(url).pipe(map(response => {
+            console.log('OData Response:', response);
+            return {
+                data: response.value || response.items || [],
+                total: response['@odata.count'] || response.count || 0
+            };
+        }));
+    }
+    buildQuery(request) {
+        const params = [];
+        // Pagination
+        if (request.skip !== undefined) {
+            params.push(`$skip=${request.skip}`);
+        }
+        if (request.top !== undefined) {
+            params.push(`$top=${request.top}`);
+        }
+        // Sorting
+        if (request.orderBy) {
+            params.push(`$orderby=${request.orderBy}`);
+        }
+        // Filtering
+        if (request.filter) {
+            params.push(`$filter=${encodeURIComponent(request.filter)}`);
+        }
+        // Select specific fields
+        if (request.select && request.select.length > 0) {
+            params.push(`$select=${request.select.join(',')}`);
+        }
+        // Expand related entities
+        if (request.expand && request.expand.length > 0) {
+            params.push(`$expand=${request.expand.join(',')}`);
+        }
+        // Always include count
+        params.push('$count=true');
+        return params.join('&');
+    }
+}
+
+/**
+ * REST API Adapter
+ * Implements IDataAdapter for standard REST endpoints
+ *
+ * @example
+ * ```typescript
+ * const adapter = new RestAdapter(http, 'https://api.example.com/users', {
+ *   dataKey: 'items',
+ *   totalKey: 'totalCount',
+ *   usePagination: 'page'
+ * });
+ * ```
+ */
+class RestAdapter {
+    http;
+    baseUrl;
+    config;
+    constructor(http, baseUrl, config) {
+        this.http = http;
+        this.baseUrl = baseUrl;
+        this.config = config;
+    }
+    getData(request) {
+        const url = `${this.baseUrl}?${this.buildQuery(request)}`;
+        return this.http.get(url).pipe(map(response => this.mapResponse(response)));
+    }
+    buildQuery(request) {
+        const params = [];
+        const cfg = this.config || {};
+        // Pagination
+        const skip = request.skip ?? 0;
+        const top = request.top ?? 10;
+        const pageParam = cfg.pageParam || 'page';
+        const pageSizeParam = cfg.pageSizeParam || 'pageSize';
+        const skipParam = cfg.skipParam || 'skip';
+        if (cfg.usePagination === 'page') {
+            // Page-based pagination
+            const page = top > 0 ? Math.floor(skip / top) + 1 : 1;
+            params.push(`${pageParam}=${page}`);
+            params.push(`${pageSizeParam}=${top}`);
+        }
+        else {
+            // Skip/take pagination (default)
+            params.push(`${skipParam}=${skip}`);
+            params.push(`${pageSizeParam}=${top}`);
+        }
+        // Sorting
+        if (request.orderBy) {
+            const sortParam = cfg.sortParam || 'sort';
+            params.push(`${sortParam}=${request.orderBy}`);
+        }
+        // Filtering
+        if (request.filter) {
+            const filterParam = cfg.filterParam || 'filter';
+            params.push(`${filterParam}=${encodeURIComponent(request.filter)}`);
+        }
+        // Select specific fields
+        if (request.select && request.select.length > 0) {
+            const selectParam = cfg.selectParam || 'fields';
+            params.push(`${selectParam}=${request.select.join(',')}`);
+        }
+        // Global search
+        if (request.globalSearch) {
+            const searchParam = cfg.searchParam || 'search';
+            params.push(`${searchParam}=${encodeURIComponent(request.globalSearch)}`);
+        }
+        // Extra custom parameters
+        if (cfg.extraParams) {
+            for (const [key, value] of Object.entries(cfg.extraParams)) {
+                if (value !== undefined && value !== null && value !== '') {
+                    params.push(`${key}=${encodeURIComponent(String(value))}`);
+                }
+            }
+        }
+        return params.join('&');
+    }
+    mapResponse(response) {
+        const cfg = this.config || {};
+        // Custom mapper function takes priority
+        if (cfg.responseMapper) {
+            return cfg.responseMapper(response);
+        }
+        // If response is an array, use it directly
+        if (Array.isArray(response)) {
+            return {
+                data: response,
+                total: response.length
+            };
+        }
+        const dataKey = cfg.dataKey || 'data';
+        const totalKey = cfg.totalKey || 'total';
+        // Extract data - support nested keys like 'result.items'
+        let data = this.getNestedValue(response, dataKey) ||
+            response.items ||
+            response.results ||
+            response.records ||
+            [];
+        // Extract total
+        let total = this.getNestedValue(response, totalKey) ??
+            response.count ??
+            response.totalCount ??
+            response.totalRecords ??
+            (Array.isArray(data) ? data.length : 0);
+        return { data, total };
+    }
+    getNestedValue(obj, path) {
+        return path.split('.').reduce((current, key) => current?.[key], obj);
+    }
+}
+
+/**
+ * Grid Data Service
+ * Central service for managing grid data operations
+ */
+class GridDataService {
+    adapter;
+    setAdapter(adapter) {
+        this.adapter = adapter;
+    }
+    getData(request) {
+        if (!this.adapter) {
+            throw new Error('Data adapter not set. Please call setAdapter() first.');
+        }
+        return this.adapter.getData(request);
+    }
+    buildFilterString(filters) {
+        if (!this.adapter) {
+            return '';
+        }
+        // Build OData-style filter string
+        const filterParts = filters.map(filter => {
+            const field = filter.field;
+            const value = typeof filter.value === 'string' ? `'${filter.value}'` : filter.value;
+            switch (filter.matchMode) {
+                case 'contains':
+                    return `contains(${field}, ${value})`;
+                case 'startsWith':
+                    return `startswith(${field}, ${value})`;
+                case 'endsWith':
+                    return `endswith(${field}, ${value})`;
+                case 'equals':
+                    return `${field} eq ${value}`;
+                case 'notEquals':
+                    return `${field} ne ${value}`;
+                case 'lt':
+                    return `${field} lt ${value}`;
+                case 'lte':
+                    return `${field} le ${value}`;
+                case 'gt':
+                    return `${field} gt ${value}`;
+                case 'gte':
+                    return `${field} ge ${value}`;
+                default:
+                    return `${field} eq ${value}`;
+            }
+        });
+        return filterParts.join(' and ');
+    }
+    buildSortString(sorts) {
+        return sorts.map(sort => `${sort.field} ${sort.order}`).join(', ');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: GridDataService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: GridDataService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: GridDataService, decorators: [{
+            type: Injectable
+        }] });
+
+class ThemeService {
+    THEME_KEY = 'nlabs-grid-theme';
+    // Current theme signal
+    theme = signal(this.getInitialTheme(), ...(ngDevMode ? [{ debugName: "theme" }] : []));
+    // Computed effective theme (resolves 'auto' to actual theme)
+    effectiveTheme = signal('light', ...(ngDevMode ? [{ debugName: "effectiveTheme" }] : []));
+    constructor() {
+        // Apply theme on change
+        effect(() => {
+            const theme = this.theme();
+            const effective = this.resolveTheme(theme);
+            this.effectiveTheme.set(effective);
+            this.applyTheme(effective);
+            this.saveTheme(theme);
+        });
+        // Listen to system theme changes
+        if (typeof window !== 'undefined') {
+            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
+                if (this.theme() === 'auto') {
+                    this.effectiveTheme.set(e.matches ? 'dark' : 'light');
+                    this.applyTheme(e.matches ? 'dark' : 'light');
+                }
+            });
+        }
+    }
+    getInitialTheme() {
+        if (typeof window === 'undefined') {
+            return 'light';
+        }
+        const saved = localStorage.getItem(this.THEME_KEY);
+        if (saved && ['light', 'dark', 'auto'].includes(saved)) {
+            return saved;
+        }
+        // Default to light instead of auto
+        return 'light';
+    }
+    resolveTheme(theme) {
+        if (theme !== 'auto') {
+            return theme;
+        }
+        if (typeof window === 'undefined') {
+            return 'light';
+        }
+        return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    }
+    applyTheme(theme) {
+        if (typeof document === 'undefined') {
+            return;
+        }
+        document.documentElement.setAttribute('data-theme', theme);
+        document.body.classList.remove('light-theme', 'dark-theme');
+        document.body.classList.add(`${theme}-theme`);
+    }
+    saveTheme(theme) {
+        if (typeof localStorage !== 'undefined') {
+            localStorage.setItem(this.THEME_KEY, theme);
+        }
+    }
+    setTheme(theme) {
+        this.theme.set(theme);
+    }
+    toggleTheme() {
+        const current = this.effectiveTheme();
+        this.theme.set(current === 'light' ? 'dark' : 'light');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ThemeService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ThemeService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+class ThemeSelectorComponent {
+    showSelector = input(true, ...(ngDevMode ? [{ debugName: "showSelector" }] : []));
+    themeService = inject(ThemeService);
+    setTheme(theme) {
+        this.themeService.setTheme(theme);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ThemeSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ThemeSelectorComponent, isStandalone: true, selector: "theme-selector", inputs: { showSelector: { classPropertyName: "showSelector", publicName: "showSelector", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    @if (showSelector()) {
+      <div class="theme-selector">
+        <button
+          class="theme-btn"
+          [class.active]="themeService.effectiveTheme() === 'light'"
+          (click)="setTheme('light')"
+          title="Light Mode"
+          >
+          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <circle cx="12" cy="12" r="5"></circle>
+            <line x1="12" y1="1" x2="12" y2="3"></line>
+            <line x1="12" y1="21" x2="12" y2="23"></line>
+            <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
+            <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
+            <line x1="1" y1="12" x2="3" y2="12"></line>
+            <line x1="21" y1="12" x2="23" y2="12"></line>
+            <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
+            <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+          </svg>
+        </button>
+        <button
+          class="theme-btn"
+          [class.active]="themeService.effectiveTheme() === 'dark'"
+          (click)="setTheme('dark')"
+          title="Dark Mode"
+          >
+          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+          </svg>
+        </button>
+        <button
+          class="theme-btn"
+          [class.active]="themeService.theme() === 'auto'"
+          (click)="setTheme('auto')"
+          title="Auto (System)"
+          >
+          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
+            <line x1="8" y1="21" x2="16" y2="21"></line>
+            <line x1="12" y1="17" x2="12" y2="21"></line>
+          </svg>
+        </button>
+      </div>
+    }
+    `, isInline: true, styles: [".theme-selector{display:inline-flex;gap:4px;padding:4px;background:var(--grid-bg-secondary);border:1px solid var(--grid-border-color);border-radius:8px;box-shadow:0 2px 8px #0000001a}.theme-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;background:transparent;border:none;border-radius:6px;color:var(--grid-text-secondary);cursor:pointer;transition:all .2s ease}.theme-btn:hover{background:var(--grid-bg-hover);color:var(--grid-primary-color)}.theme-btn.active{background:var(--grid-primary-color);color:#fff;box-shadow:0 2px 4px #4096ff4d}.theme-btn svg{width:20px;height:20px}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ThemeSelectorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'theme-selector', standalone: true, imports: [], template: `
+    @if (showSelector()) {
+      <div class="theme-selector">
+        <button
+          class="theme-btn"
+          [class.active]="themeService.effectiveTheme() === 'light'"
+          (click)="setTheme('light')"
+          title="Light Mode"
+          >
+          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <circle cx="12" cy="12" r="5"></circle>
+            <line x1="12" y1="1" x2="12" y2="3"></line>
+            <line x1="12" y1="21" x2="12" y2="23"></line>
+            <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
+            <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
+            <line x1="1" y1="12" x2="3" y2="12"></line>
+            <line x1="21" y1="12" x2="23" y2="12"></line>
+            <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
+            <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+          </svg>
+        </button>
+        <button
+          class="theme-btn"
+          [class.active]="themeService.effectiveTheme() === 'dark'"
+          (click)="setTheme('dark')"
+          title="Dark Mode"
+          >
+          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+          </svg>
+        </button>
+        <button
+          class="theme-btn"
+          [class.active]="themeService.theme() === 'auto'"
+          (click)="setTheme('auto')"
+          title="Auto (System)"
+          >
+          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
+            <line x1="8" y1="21" x2="16" y2="21"></line>
+            <line x1="12" y1="17" x2="12" y2="21"></line>
+          </svg>
+        </button>
+      </div>
+    }
+    `, styles: [".theme-selector{display:inline-flex;gap:4px;padding:4px;background:var(--grid-bg-secondary);border:1px solid var(--grid-border-color);border-radius:8px;box-shadow:0 2px 8px #0000001a}.theme-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;background:transparent;border:none;border-radius:6px;color:var(--grid-text-secondary);cursor:pointer;transition:all .2s ease}.theme-btn:hover{background:var(--grid-bg-hover);color:var(--grid-primary-color)}.theme-btn.active{background:var(--grid-primary-color);color:#fff;box-shadow:0 2px 4px #4096ff4d}.theme-btn svg{width:20px;height:20px}\n"] }]
+        }], propDecorators: { showSelector: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSelector", required: false }] }] } });
+
+class GridColumnCommandTemplateDirective {
+    templateRef;
+    name = '';
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: GridColumnCommandTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.2", type: GridColumnCommandTemplateDirective, isStandalone: true, selector: "[nlabsGridColumnCommandTemplate]", inputs: { name: ["nlabsGridColumnCommandTemplate", "name"] }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: GridColumnCommandTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[nlabsGridColumnCommandTemplate]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }], propDecorators: { name: [{
+                type: Input,
+                args: ['nlabsGridColumnCommandTemplate']
+            }] } });
+
+class GridCaptionCommandTemplateDirective {
+    templateRef;
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: GridCaptionCommandTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.2", type: GridCaptionCommandTemplateDirective, isStandalone: true, selector: "[nlabsGridCaptionCommandTemplate]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: GridCaptionCommandTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[nlabsGridCaptionCommandTemplate]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+
+class GridFooterTemplateDirective {
+    templateRef;
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: GridFooterTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.2", type: GridFooterTemplateDirective, isStandalone: true, selector: "[nlabsGridFooterTemplate]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: GridFooterTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[nlabsGridFooterTemplate]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+
+class GridColumnComponent {
+    // Basic Properties
+    field = input('', ...(ngDevMode ? [{ debugName: "field" }] : []));
+    title = input('', ...(ngDevMode ? [{ debugName: "title" }] : []));
+    header = input('', ...(ngDevMode ? [{ debugName: "header" }] : [])); // Alias for title
+    // Column Behavior
+    sortable = input(true, ...(ngDevMode ? [{ debugName: "sortable" }] : []));
+    filterable = input(true, ...(ngDevMode ? [{ debugName: "filterable" }] : []));
+    visible = input(true, ...(ngDevMode ? [{ debugName: "visible" }] : []));
+    resizable = input(true, ...(ngDevMode ? [{ debugName: "resizable" }] : []));
+    frozen = input(false, ...(ngDevMode ? [{ debugName: "frozen" }] : []));
+    locked = input(false, ...(ngDevMode ? [{ debugName: "locked" }] : [])); // Cannot be reordered
+    // Styling
+    width = input('160px', ...(ngDevMode ? [{ debugName: "width" }] : []));
+    minWidth = input('50px', ...(ngDevMode ? [{ debugName: "minWidth" }] : []));
+    maxWidth = input('', ...(ngDevMode ? [{ debugName: "maxWidth" }] : []));
+    textAlign = input('left', ...(ngDevMode ? [{ debugName: "textAlign" }] : []));
+    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
+    hideOverflow = input(true, ...(ngDevMode ? [{ debugName: "hideOverflow" }] : []));
+    // Filtering
+    filterType = input('text', ...(ngDevMode ? [{ debugName: "filterType" }] : []));
+    filterData = input([], ...(ngDevMode ? [{ debugName: "filterData" }] : []));
+    filterValue = input(...(ngDevMode ? [undefined, { debugName: "filterValue" }] : []));
+    filterOperator = signal('contains', ...(ngDevMode ? [{ debugName: "filterOperator" }] : []));
+    // Formatting
+    format = input(null, ...(ngDevMode ? [{ debugName: "format" }] : []));
+    symbol = input('$', ...(ngDevMode ? [{ debugName: "symbol" }] : []));
+    fraction = input(2, ...(ngDevMode ? [{ debugName: "fraction" }] : []));
+    showSymbolInFront = input(true, ...(ngDevMode ? [{ debugName: "showSymbolInFront" }] : []));
+    // Boolean Display
+    showCheckbox = input(false, ...(ngDevMode ? [{ debugName: "showCheckbox" }] : []));
+    booleanData = input(['Yes', 'No'], ...(ngDevMode ? [{ debugName: "booleanData" }] : []));
+    // Signals for dynamic values
+    visibleSignal = linkedSignal(() => this.visible(), ...(ngDevMode ? [{ debugName: "visibleSignal" }] : []));
+    widthSignal = linkedSignal(() => this.width(), ...(ngDevMode ? [{ debugName: "widthSignal" }] : []));
+    filterValueSignal = linkedSignal(() => this.filterValue(), ...(ngDevMode ? [{ debugName: "filterValueSignal" }] : []));
+    // Template References (will be set by directives)
+    cellTemplate;
+    headerTemplate;
+    footerTemplate;
+    // Unique identifier
+    timestamp = signal(`${new Date().getTime()}-${Math.random().toString(36).slice(2, 11)}`, ...(ngDevMode ? [{ debugName: "timestamp" }] : []));
+    getDisplayTitle() {
+        return this.header() || this.title() || this.capitalizeFirstLetter(this.field());
+    }
+    capitalizeFirstLetter(str) {
+        if (!str)
+            return '';
+        return str
+            .replace(/([A-Z])/g, ' $1')
+            .replace(/_/g, ' ')
+            .split(' ')
+            .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+            .join(' ')
+            .trim();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: GridColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.2", type: GridColumnComponent, isStandalone: true, selector: "nlabs-grid-column", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: true, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, frozen: { classPropertyName: "frozen", publicName: "frozen", isSignal: true, isRequired: false, transformFunction: null }, locked: { classPropertyName: "locked", publicName: "locked", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, textAlign: { classPropertyName: "textAlign", publicName: "textAlign", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, hideOverflow: { classPropertyName: "hideOverflow", publicName: "hideOverflow", isSignal: true, isRequired: false, transformFunction: null }, filterType: { classPropertyName: "filterType", publicName: "filterType", isSignal: true, isRequired: false, transformFunction: null }, filterData: { classPropertyName: "filterData", publicName: "filterData", isSignal: true, isRequired: false, transformFunction: null }, filterValue: { classPropertyName: "filterValue", publicName: "filterValue", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, symbol: { classPropertyName: "symbol", publicName: "symbol", isSignal: true, isRequired: false, transformFunction: null }, fraction: { classPropertyName: "fraction", publicName: "fraction", isSignal: true, isRequired: false, transformFunction: null }, showSymbolInFront: { classPropertyName: "showSymbolInFront", publicName: "showSymbolInFront", isSignal: true, isRequired: false, transformFunction: null }, showCheckbox: { classPropertyName: "showCheckbox", publicName: "showCheckbox", isSignal: true, isRequired: false, transformFunction: null }, booleanData: { classPropertyName: "booleanData", publicName: "booleanData", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: GridColumnComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'nlabs-grid-column',
+                    standalone: true,
+                    template: '',
+                }]
+        }], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], sortable: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortable", required: false }] }], filterable: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterable", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], frozen: [{ type: i0.Input, args: [{ isSignal: true, alias: "frozen", required: false }] }], locked: [{ type: i0.Input, args: [{ isSignal: true, alias: "locked", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], textAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "textAlign", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], hideOverflow: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideOverflow", required: false }] }], filterType: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterType", required: false }] }], filterData: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterData", required: false }] }], filterValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterValue", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], symbol: [{ type: i0.Input, args: [{ isSignal: true, alias: "symbol", required: false }] }], fraction: [{ type: i0.Input, args: [{ isSignal: true, alias: "fraction", required: false }] }], showSymbolInFront: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSymbolInFront", required: false }] }], showCheckbox: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCheckbox", required: false }] }], booleanData: [{ type: i0.Input, args: [{ isSignal: true, alias: "booleanData", required: false }] }] } });
+
+class DataGridComponent {
+    gridDataService;
+    themeService;
+    config;
+    adapter;
+    autoLoad = true;
+    lazy = true;
+    data;
+    totalRecords;
+    gridHeader;
+    gridBody;
+    // Theme inputs
+    theme = input('auto', ...(ngDevMode ? [{ debugName: "theme" }] : []));
+    showThemeSelector = input(true, ...(ngDevMode ? [{ debugName: "showThemeSelector" }] : []));
+    // Feature flags
+    showColumnChooser = input(true, ...(ngDevMode ? [{ debugName: "showColumnChooser" }] : []));
+    showGlobalSearch = input(true, ...(ngDevMode ? [{ debugName: "showGlobalSearch" }] : []));
+    showAddButton = input(false, ...(ngDevMode ? [{ debugName: "showAddButton" }] : []));
+    addButtonText = input('Add New', ...(ngDevMode ? [{ debugName: "addButtonText" }] : []));
+    addButtonUrl = input(undefined, ...(ngDevMode ? [{ debugName: "addButtonUrl" }] : []));
+    showExport = input(true, ...(ngDevMode ? [{ debugName: "showExport" }] : []));
+    exportFileName = input('export', ...(ngDevMode ? [{ debugName: "exportFileName" }] : []));
+    showFooter = input(true, ...(ngDevMode ? [{ debugName: "showFooter" }] : []));
+    // Events
+    addClick = new EventEmitter();
+    excelExport = new EventEmitter();
+    pdfExport = new EventEmitter();
+    onRefresh = new EventEmitter();
+    // Template references from content projection
+    columnComponents;
+    columnCommandTemplates;
+    // Command templates
+    captionCommandTemplate = contentChild(GridCaptionCommandTemplateDirective, { ...(ngDevMode ? { debugName: "captionCommandTemplate" } : {}), read: TemplateRef });
+    footerTemplate = contentChild(GridFooterTemplateDirective, { ...(ngDevMode ? { debugName: "footerTemplate" } : {}), read: TemplateRef });
+    // Actions template
+    actionsTemplate;
+    checkboxTemplate;
+    dataLoad = new EventEmitter();
+    rowSelect = new EventEmitter();
+    rowUnselect = new EventEmitter();
+    stateChange = new EventEmitter();
+    gridData = [];
+    loading = false;
+    Math = Math;
+    globalSearchTerm = '';
+    state = {
+        page: 0,
+        pageSize: 10,
+        filters: new Map()
+    };
+    pagination = {
+        page: 0,
+        pageSize: 10,
+        totalRecords: 0,
+        totalPages: 0
+    };
+    selectedRows = new Set();
+    sortMetadata = [];
+    filterMetadata = [];
+    // Column management
+    displayedColumns = [];
+    draggedColumn;
+    dropTargetIndex;
+    resizingColumn;
+    resizeStartX = 0;
+    resizeStartWidth = 0;
+    showColumnChooserModal = false;
+    // Filter Modal
+    showFilterModal = false;
+    currentFilterColumn = null;
+    currentFilterOperator = 'contains';
+    filterValue = '';
+    constructor(gridDataService, themeService) {
+        this.gridDataService = gridDataService;
+        this.themeService = themeService;
+    }
+    ngAfterContentInit() {
+        // Process column components from content projection
+        this.processColumnComponents();
+        // Process templates
+        this.processTemplates();
+        // Watch for column changes
+        this.columnComponents.changes.subscribe(() => {
+            this.processColumnComponents();
+        });
+        // Watch for template changes
+        this.columnCommandTemplates.changes.subscribe(() => {
+            this.processTemplates();
+        });
+    }
+    processTemplates() {
+        if (this.columnCommandTemplates && this.columnCommandTemplates.length > 0) {
+            this.columnCommandTemplates.forEach(directive => {
+                const name = directive.name;
+                const templateRef = directive.templateRef;
+                // Store the template based on name
+                if (name === 'actions') {
+                    this.actionsTemplate = templateRef;
+                }
+                else if (name === 'checkbox' || name === 'select') {
+                    this.checkboxTemplate = templateRef;
+                }
+            });
+        }
+    }
+    ngOnInit() {
+        this.initializeGrid();
+        if (this.autoLoad && this.lazy && this.adapter) {
+            this.loadData();
+        }
+        else if (!this.lazy && this.data) {
+            this.gridData = this.data;
+            this.pagination.totalRecords = this.totalRecords || this.data.length;
+            this.updatePagination();
+        }
+    }
+    ngOnChanges(changes) {
+        if (changes['data'] && !changes['data'].firstChange && !this.lazy) {
+            this.gridData = this.data || [];
+            this.pagination.totalRecords = this.totalRecords || this.gridData.length;
+            this.updatePagination();
+        }
+        // Adapter değiştiğinde veriyi yeniden yükle
+        if (changes['adapter'] && !changes['adapter'].firstChange && this.lazy) {
+            this.gridDataService.setAdapter(this.adapter);
+            this.state.page = 0;
+            this.pagination.page = 0;
+            this.loadData();
+        }
+    }
+    ngAfterViewInit() {
+        // Sync horizontal scroll between header and body
+        if (this.gridBody?.nativeElement && this.gridHeader?.nativeElement) {
+            const bodyEl = this.gridBody.nativeElement;
+            const headerEl = this.gridHeader.nativeElement;
+            bodyEl.addEventListener('scroll', () => {
+                headerEl.scrollLeft = bodyEl.scrollLeft;
+            });
+        }
+    }
+    initializeGrid() {
+        // Initialize pagination from config or use defaults
+        const configPageSize = this.config?.pageSize || 10;
+        this.state.pageSize = configPageSize;
+        this.pagination.pageSize = this.state.pageSize;
+        // Initialize displayed columns (will be overridden if using content projection)
+        if (this.config?.columns && this.config.columns.length > 0) {
+            this.displayedColumns = this.config.columns.map(col => ({
+                ...col,
+                visible: col.visible !== false,
+                resizable: col.resizable !== false
+            }));
+        }
+        if (this.adapter) {
+            this.gridDataService.setAdapter(this.adapter);
+        }
+        // Apply theme from input
+        if (this.theme()) {
+            this.themeService.setTheme(this.theme());
+        }
+    }
+    processColumnComponents() {
+        if (!this.columnComponents || this.columnComponents.length === 0) {
+            return;
+        }
+        // Convert column components to GridColumn format
+        this.displayedColumns = this.columnComponents.map(comp => {
+            // Get cell template from directive
+            const cellDirective = comp.cellTemplate;
+            const headerDirective = comp.headerTemplate;
+            const footerDirective = comp.footerTemplate;
+            const column = {
+                field: comp.field(),
+                header: comp.getDisplayTitle(),
+                sortable: comp.sortable(),
+                filterable: comp.filterable(),
+                visible: comp.visible(),
+                resizable: comp.resizable(),
+                width: comp.width(),
+                minWidth: comp.minWidth(),
+                maxWidth: comp.maxWidth(),
+                type: comp.filterType(),
+                cellTemplate: cellDirective,
+                frozen: comp.frozen(),
+                format: comp.format()
+            };
+            return column;
+        });
+    }
+    loadData() {
+        if (!this.lazy) {
+            return;
+        }
+        this.loading = true;
+        const request = {
+            skip: this.state.page * this.state.pageSize,
+            top: this.state.pageSize,
+            orderBy: this.buildOrderBy(),
+            filter: this.buildFilter(),
+            globalSearch: this.globalSearchTerm?.trim() || undefined
+        };
+        this.gridDataService.getData(request).subscribe({
+            next: (result) => {
+                this.gridData = result.data;
+                this.pagination.totalRecords = result.total;
+                this.updatePagination();
+                this.loading = false;
+                this.dataLoad.emit(result);
+            },
+            error: (error) => {
+                console.error('Error loading grid data:', error);
+                this.loading = false;
+            }
+        });
+    }
+    onPageChange(page) {
+        this.state.page = page;
+        this.pagination.page = page;
+        this.emitStateChange();
+        if (this.lazy) {
+            this.loadData();
+        }
+    }
+    onPageSizeChange(pageSize) {
+        this.state.pageSize = pageSize;
+        this.pagination.pageSize = pageSize;
+        this.state.page = 0;
+        this.pagination.page = 0;
+        this.emitStateChange();
+        if (this.lazy) {
+            this.loadData();
+        }
+    }
+    onSort(column) {
+        if (!column.sortable) {
+            return;
+        }
+        const existingSort = this.sortMetadata.find(s => s.field === column.field);
+        if (existingSort) {
+            existingSort.order = existingSort.order === 'asc' ? 'desc' : 'asc';
+        }
+        else {
+            this.sortMetadata = [{ field: column.field, order: 'asc' }];
+        }
+        this.state.sortField = column.field;
+        this.state.sortOrder = this.sortMetadata[0].order;
+        this.emitStateChange();
+        if (this.lazy) {
+            this.loadData();
+        }
+        else {
+            this.sortLocal();
+        }
+    }
+    onFilter(column, value) {
+        if (!column.filterable) {
+            return;
+        }
+        if (value && value.trim()) {
+            this.filterMetadata = this.filterMetadata.filter(f => f.field !== column.field);
+            this.filterMetadata.push({
+                field: column.field,
+                operator: 'and',
+                value: value,
+                matchMode: 'contains'
+            });
+            this.state.filters?.set(column.field, value);
+        }
+        else {
+            this.filterMetadata = this.filterMetadata.filter(f => f.field !== column.field);
+            this.state.filters?.delete(column.field);
+        }
+        this.state.page = 0;
+        this.pagination.page = 0;
+        this.emitStateChange();
+        if (this.lazy) {
+            this.loadData();
+        }
+        else {
+            this.filterLocal();
+        }
+    }
+    onRowSelect(row, event) {
+        if (!this.config?.selectable) {
+            return;
+        }
+        // Stop event propagation if event exists
+        if (event) {
+            event.stopPropagation();
+        }
+        if (this.config?.multiSelect) {
+            if (this.selectedRows.has(row)) {
+                this.selectedRows.delete(row);
+                this.rowUnselect.emit(row);
+            }
+            else {
+                this.selectedRows.add(row);
+                this.rowSelect.emit(row);
+            }
+        }
+        else {
+            this.selectedRows.clear();
+            this.selectedRows.add(row);
+            this.rowSelect.emit(row);
+        }
+        this.state.selectedRows = Array.from(this.selectedRows);
+    }
+    toggleSelectAll(event) {
+        const checkbox = event.target;
+        if (checkbox.checked) {
+            // Select all rows on current page
+            this.gridData.forEach(row => this.selectedRows.add(row));
+        }
+        else {
+            // Deselect all rows
+            this.selectedRows.clear();
+        }
+        this.state.selectedRows = Array.from(this.selectedRows);
+    }
+    isAllSelected() {
+        if (this.gridData.length === 0)
+            return false;
+        return this.gridData.every(row => this.selectedRows.has(row));
+    }
+    isSomeSelected() {
+        if (this.gridData.length === 0)
+            return false;
+        const selectedCount = this.gridData.filter(row => this.selectedRows.has(row)).length;
+        return selectedCount > 0 && selectedCount < this.gridData.length;
+    }
+    isRowSelected(row) {
+        return this.selectedRows.has(row);
+    }
+    buildOrderBy() {
+        if (this.sortMetadata.length === 0) {
+            return undefined;
+        }
+        return this.gridDataService.buildSortString(this.sortMetadata);
+    }
+    buildFilter() {
+        if (this.filterMetadata.length === 0) {
+            return undefined;
+        }
+        return this.gridDataService.buildFilterString(this.filterMetadata);
+    }
+    sortLocal() {
+        if (this.sortMetadata.length === 0) {
+            return;
+        }
+        const sort = this.sortMetadata[0];
+        this.gridData = [...this.gridData].sort((a, b) => {
+            const aVal = a[sort.field];
+            const bVal = b[sort.field];
+            if (aVal === bVal)
+                return 0;
+            const result = aVal < bVal ? -1 : 1;
+            return sort.order === 'asc' ? result : -result;
+        });
+    }
+    filterLocal() {
+        if (!this.data) {
+            return;
+        }
+        let filtered = [...this.data];
+        this.filterMetadata.forEach(filter => {
+            filtered = filtered.filter((item) => {
+                const value = item[filter.field];
+                const filterValue = filter.value?.toLowerCase() || '';
+                // Handle isEmpty and isNotEmpty
+                if (filter.matchMode === 'isEmpty') {
+                    return value === null || value === undefined || value === '';
+                }
+                if (filter.matchMode === 'isNotEmpty') {
+                    return value !== null && value !== undefined && value !== '';
+                }
+                if (value === null || value === undefined) {
+                    return false;
+                }
+                const strValue = String(value).toLowerCase();
+                const numValue = Number(value);
+                const numFilterValue = Number(filter.value);
+                // Date comparison
+                const dateValue = value instanceof Date ? value : new Date(value);
+                const dateFilterValue = new Date(filter.value);
+                const isValidDate = dateValue instanceof Date && !isNaN(dateValue.getTime());
+                const isValidFilterDate = dateFilterValue instanceof Date && !isNaN(dateFilterValue.getTime());
+                switch (filter.matchMode) {
+                    case 'contains':
+                        return strValue.includes(filterValue);
+                    case 'notContains':
+                        return !strValue.includes(filterValue);
+                    case 'startsWith':
+                        return strValue.startsWith(filterValue);
+                    case 'endsWith':
+                        return strValue.endsWith(filterValue);
+                    case 'equals':
+                        // For dates, compare date parts only
+                        if (isValidDate && isValidFilterDate) {
+                            return dateValue.toDateString() === dateFilterValue.toDateString();
+                        }
+                        return strValue === filterValue || value === filter.value;
+                    case 'notEquals':
+                        // For dates, compare date parts only
+                        if (isValidDate && isValidFilterDate) {
+                            return dateValue.toDateString() !== dateFilterValue.toDateString();
+                        }
+                        return strValue !== filterValue && value !== filter.value;
+                    case 'lt':
+                        if (isValidDate && isValidFilterDate) {
+                            return dateValue.getTime() < dateFilterValue.getTime();
+                        }
+                        return !isNaN(numValue) && !isNaN(numFilterValue) && numValue < numFilterValue;
+                    case 'lte':
+                        if (isValidDate && isValidFilterDate) {
+                            return dateValue.getTime() <= dateFilterValue.getTime();
+                        }
+                        return !isNaN(numValue) && !isNaN(numFilterValue) && numValue <= numFilterValue;
+                    case 'gt':
+                        if (isValidDate && isValidFilterDate) {
+                            return dateValue.getTime() > dateFilterValue.getTime();
+                        }
+                        return !isNaN(numValue) && !isNaN(numFilterValue) && numValue > numFilterValue;
+                    case 'gte':
+                        if (isValidDate && isValidFilterDate) {
+                            return dateValue.getTime() >= dateFilterValue.getTime();
+                        }
+                        return !isNaN(numValue) && !isNaN(numFilterValue) && numValue >= numFilterValue;
+                    default:
+                        return strValue.includes(filterValue);
+                }
+            });
+        });
+        this.gridData = filtered;
+        this.pagination.totalRecords = filtered.length;
+        this.updatePagination();
+    }
+    updatePagination() {
+        this.pagination.totalPages = Math.ceil(this.pagination.totalRecords / this.pagination.pageSize);
+    }
+    emitStateChange() {
+        this.stateChange.emit({ ...this.state });
+    }
+    trackByRow(index, row) {
+        // Try to use id, _id, or unique identifier, fallback to index + stringified row
+        return row?.id ?? row?._id ?? row?.Id ?? `${index}-${JSON.stringify(row)}`;
+    }
+    getCellValue(row, column) {
+        const value = row[column.field];
+        // Format is now just a hint string (like 'c', 'd', 'p'), not a function
+        // Actual formatting should be done via pipes in template
+        return value;
+    }
+    getSortIcon(column) {
+        if (!column.sortable) {
+            return '';
+        }
+        const sort = this.sortMetadata.find(s => s.field === column.field);
+        if (!sort) {
+            return '⇅';
+        }
+        return sort.order === 'asc' ? '↑' : '↓';
+    }
+    getFilterValue(column) {
+        const filter = this.filterMetadata.find(f => f.field === column.field);
+        return filter ? filter.value : '';
+    }
+    // Filter Modal Methods
+    openFilterModal(column, event) {
+        event.stopPropagation();
+        if (column.filterable === false) {
+            return;
+        }
+        this.currentFilterColumn = column;
+        // Load existing filter
+        const existingFilter = this.filterMetadata.find(f => f.field === column.field);
+        if (existingFilter) {
+            this.filterValue = existingFilter.value;
+            this.currentFilterOperator = existingFilter.matchMode;
+        }
+        else {
+            this.filterValue = '';
+            // Set default operator based on filterType
+            const filterType = column.filterType || 'text';
+            if (filterType === 'number' || filterType === 'date') {
+                this.currentFilterOperator = 'equals';
+            }
+            else {
+                this.currentFilterOperator = 'contains';
+            }
+        }
+        this.showFilterModal = true;
+    }
+    closeFilterModal() {
+        this.showFilterModal = false;
+        this.currentFilterColumn = null;
+        this.filterValue = '';
+    }
+    applyFilterModal() {
+        if (!this.currentFilterColumn)
+            return;
+        const field = this.currentFilterColumn.field;
+        // Remove existing filter for this field
+        this.filterMetadata = this.filterMetadata.filter(f => f.field !== field);
+        // For isEmpty and isNotEmpty, no value is needed
+        const needsValue = this.currentFilterOperator !== 'isEmpty' && this.currentFilterOperator !== 'isNotEmpty';
+        // Add new filter if value is not empty OR if operator doesn't need value
+        if (!needsValue || (this.filterValue && this.filterValue.trim())) {
+            this.filterMetadata.push({
+                field: field,
+                operator: 'and',
+                value: needsValue ? this.filterValue.trim() : '',
+                matchMode: this.currentFilterOperator
+            });
+            this.state.filters?.set(field, needsValue ? this.filterValue.trim() : this.currentFilterOperator);
+        }
+        else {
+            this.state.filters?.delete(field);
+        }
+        this.state.page = 0;
+        this.pagination.page = 0;
+        this.emitStateChange();
+        if (this.lazy) {
+            this.loadData();
+        }
+        else {
+            this.filterLocal();
+        }
+        this.closeFilterModal();
+    }
+    clearFilterModal() {
+        if (!this.currentFilterColumn)
+            return;
+        const field = this.currentFilterColumn.field;
+        this.filterMetadata = this.filterMetadata.filter(f => f.field !== field);
+        this.state.filters?.delete(field);
+        this.state.page = 0;
+        this.pagination.page = 0;
+        this.emitStateChange();
+        if (this.lazy) {
+            this.loadData();
+        }
+        else {
+            this.filterLocal();
+        }
+        this.closeFilterModal();
+    }
+    isFilterActive(column) {
+        return this.filterMetadata.some(f => f.field === column.field);
+    }
+    getPageNumbers() {
+        const pages = [];
+        const total = this.pagination.totalPages;
+        const current = this.pagination.page;
+        if (total <= 7) {
+            for (let i = 0; i < total; i++) {
+                pages.push(i);
+            }
+        }
+        else {
+            if (current <= 3) {
+                for (let i = 0; i < 5; i++)
+                    pages.push(i);
+                pages.push(-1);
+                pages.push(total - 1);
+            }
+            else if (current >= total - 4) {
+                pages.push(0);
+                pages.push(-1);
+                for (let i = total - 5; i < total; i++)
+                    pages.push(i);
+            }
+            else {
+                pages.push(0);
+                pages.push(-1);
+                for (let i = current - 1; i <= current + 1; i++)
+                    pages.push(i);
+                pages.push(-1);
+                pages.push(total - 1);
+            }
+        }
+        return pages;
+    }
+    // Column Management Methods
+    toggleColumnVisibility(column) {
+        column.visible = !column.visible;
+        this.displayedColumns = [...this.displayedColumns];
+    }
+    getVisibleColumns() {
+        return this.displayedColumns.filter(col => col.visible !== false);
+    }
+    // Drag & Drop Methods
+    onDragStart(event, column, index) {
+        if (!this.config?.reorderable)
+            return;
+        this.draggedColumn = column;
+        event.dataTransfer.effectAllowed = 'move';
+        event.dataTransfer.setData('text/html', event.target.innerHTML);
+    }
+    onColumnDragOver(event, index) {
+        if (!this.config?.reorderable || !this.draggedColumn)
+            return;
+        event.preventDefault();
+        event.dataTransfer.dropEffect = 'move';
+        this.dropTargetIndex = index;
+    }
+    onColumnDrop(event, targetIndex) {
+        if (!this.config?.reorderable || !this.draggedColumn)
+            return;
+        event.preventDefault();
+        const visibleColumns = this.getVisibleColumns();
+        const draggedIndex = visibleColumns.indexOf(this.draggedColumn);
+        if (draggedIndex !== targetIndex) {
+            const allColumns = [...this.displayedColumns];
+            const draggedCol = allColumns.splice(draggedIndex, 1)[0];
+            allColumns.splice(targetIndex, 0, draggedCol);
+            this.displayedColumns = allColumns;
+        }
+        this.draggedColumn = undefined;
+        this.dropTargetIndex = undefined;
+    }
+    onColumnDragEnd() {
+        this.draggedColumn = undefined;
+        this.dropTargetIndex = undefined;
+    }
+    // Resize Methods
+    onResizeStart(event, column) {
+        if (!column.resizable)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        this.resizingColumn = column;
+        this.resizeStartX = event.pageX;
+        // Get the header cell element
+        const resizeHandle = event.target;
+        const headerCell = resizeHandle.closest('.header-cell');
+        if (headerCell) {
+            headerCell.classList.add('resizing');
+            this.resizeStartWidth = headerCell.offsetWidth;
+        }
+        else {
+            this.resizeStartWidth = 100;
+        }
+        document.addEventListener('mousemove', this.onResize);
+        document.addEventListener('mouseup', this.onResizeEnd);
+    }
+    onResize = (event) => {
+        if (!this.resizingColumn)
+            return;
+        event.preventDefault();
+        const diff = event.pageX - this.resizeStartX;
+        const minWidth = parseInt(this.resizingColumn.minWidth || '50', 10);
+        const maxWidth = this.resizingColumn.maxWidth ? parseInt(this.resizingColumn.maxWidth, 10) : Infinity;
+        let newWidth = Math.max(minWidth, this.resizeStartWidth + diff);
+        if (maxWidth !== Infinity) {
+            newWidth = Math.min(newWidth, maxWidth);
+        }
+        // Update column width directly
+        this.resizingColumn.width = `${newWidth}px`;
+    };
+    onResizeEnd = () => {
+        // Remove resizing class
+        const resizingElement = document.querySelector('.header-cell.resizing');
+        if (resizingElement) {
+            resizingElement.classList.remove('resizing');
+        }
+        this.resizingColumn = undefined;
+        document.removeEventListener('mousemove', this.onResize);
+        document.removeEventListener('mouseup', this.onResizeEnd);
+    };
+    // Global Search
+    onGlobalSearch(term) {
+        this.globalSearchTerm = term;
+        if (!term.trim()) {
+            this.loadData();
+            return;
+        }
+        // Filter data locally or trigger server-side search
+        if (this.lazy && this.adapter) {
+            // Server-side search - reload data with global search term
+            this.state.page = 0;
+            this.loadData();
+        }
+        else {
+            // Client-side search
+            const filteredData = this.gridData.filter((row) => {
+                return this.getVisibleColumns().some(col => {
+                    const value = row[col.field];
+                    return value?.toString().toLowerCase().includes(term.toLowerCase());
+                });
+            });
+            this.gridData = filteredData;
+        }
+    }
+    // Add Button Handler
+    onAddButtonClick() {
+        if (this.addButtonUrl()) {
+            window.location.href = this.addButtonUrl();
+        }
+        else {
+            this.addClick.emit();
+        }
+    }
+    onRefreshClick() {
+        this.onRefresh.emit();
+    }
+    // Export to Excel
+    exportToExcel() {
+        const dataToExport = this.gridData;
+        this.excelExport.emit(dataToExport);
+        // Generate professional Excel file
+        this.generateExcelFile(dataToExport);
+    }
+    generateExcelFile(data) {
+        if (data.length === 0) {
+            console.warn('No data to export');
+            return;
+        }
+        const columns = this.getVisibleColumns();
+        const today = new Date();
+        const dateStr = today.toLocaleDateString('en-GB', {
+            day: '2-digit',
+            month: '2-digit',
+            year: 'numeric'
+        });
+        const timeStr = today.toLocaleTimeString('en-GB', {
+            hour: '2-digit',
+            minute: '2-digit'
+        });
+        // Create Excel XML with enhanced styling
+        let excelContent = `<?xml version="1.0"?>
+<?mso-application progid="Excel.Sheet"?>
+<Workbook xmlns="urn:schemas-microsoft-com:office:spreadsheet"
+ xmlns:o="urn:schemas-microsoft-com:office:office"
+ xmlns:x="urn:schemas-microsoft-com:office:excel"
+ xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet"
+ xmlns:html="http://www.w3.org/TR/REC-html40">
+ <DocumentProperties xmlns="urn:schemas-microsoft-com:office:office">
+  <Title>${this.exportFileName()}</Title>
+  <Author>Nlabs Data Grid</Author>
+  <Created>${today.toISOString()}</Created>
+  <Company>Your Company</Company>
+ </DocumentProperties>
+ <Styles>
+  <Style ss:ID="Title">
+   <Font ss:Bold="1" ss:Size="16" ss:Color="#1F2937"/>
+   <Alignment ss:Horizontal="Left" ss:Vertical="Center"/>
+  </Style>
+  <Style ss:ID="Subtitle">
+   <Font ss:Size="11" ss:Color="#6B7280"/>
+   <Alignment ss:Horizontal="Left" ss:Vertical="Center"/>
+  </Style>
+  <Style ss:ID="Header">
+   <Font ss:Bold="1" ss:Size="11" ss:Color="#FFFFFF"/>
+   <Interior ss:Color="#4F46E5" ss:Pattern="Solid"/>
+   <Alignment ss:Horizontal="Center" ss:Vertical="Center"/>
+   <Borders>
+    <Border ss:Position="Bottom" ss:LineStyle="Continuous" ss:Weight="2" ss:Color="#4338CA"/>
+    <Border ss:Position="Left" ss:LineStyle="Continuous" ss:Weight="1" ss:Color="#4338CA"/>
+    <Border ss:Position="Right" ss:LineStyle="Continuous" ss:Weight="1" ss:Color="#4338CA"/>
+    <Border ss:Position="Top" ss:LineStyle="Continuous" ss:Weight="1" ss:Color="#4338CA"/>
+   </Borders>
+  </Style>
+  <Style ss:ID="DataEven">
+   <Interior ss:Color="#F9FAFB" ss:Pattern="Solid"/>
+   <Borders>
+    <Border ss:Position="Bottom" ss:LineStyle="Continuous" ss:Weight="1" ss:Color="#E5E7EB"/>
+    <Border ss:Position="Left" ss:LineStyle="Continuous" ss:Weight="1" ss:Color="#E5E7EB"/>
+    <Border ss:Position="Right" ss:LineStyle="Continuous" ss:Weight="1" ss:Color="#E5E7EB"/>
+    <Border ss:Position="Top" ss:LineStyle="Continuous" ss:Weight="1" ss:Color="#E5E7EB"/>
+   </Borders>
+   <Alignment ss:Vertical="Center"/>
+  </Style>
+  <Style ss:ID="DataOdd">
+   <Interior ss:Color="#FFFFFF" ss:Pattern="Solid"/>
+   <Borders>
+    <Border ss:Position="Bottom" ss:LineStyle="Continuous" ss:Weight="1" ss:Color="#E5E7EB"/>
+    <Border ss:Position="Left" ss:LineStyle="Continuous" ss:Weight="1" ss:Color="#E5E7EB"/>
+    <Border ss:Position="Right" ss:LineStyle="Continuous" ss:Weight="1" ss:Color="#E5E7EB"/>
+    <Border ss:Position="Top" ss:LineStyle="Continuous" ss:Weight="1" ss:Color="#E5E7EB"/>
+   </Borders>
+   <Alignment ss:Vertical="Center"/>
+  </Style>
+  <Style ss:ID="Footer">
+   <Font ss:Bold="1" ss:Size="10" ss:Color="#6B7280"/>
+   <Interior ss:Color="#F3F4F6" ss:Pattern="Solid"/>
+   <Alignment ss:Horizontal="Right" ss:Vertical="Center"/>
+   <Borders>
+    <Border ss:Position="Top" ss:LineStyle="Continuous" ss:Weight="2" ss:Color="#D1D5DB"/>
+   </Borders>
+  </Style>
+ </Styles>
+ <Worksheet ss:Name="Data Export">
+  <Table>
+   <!-- Title Row -->
+   <Row ss:Height="24">
+    <Cell ss:StyleID="Title" ss:MergeAcross="${columns.length - 1}">
+     <Data ss:Type="String">📊 ${this.exportFileName()}</Data>
+    </Cell>
+   </Row>
+   <!-- Date/Time Row -->
+   <Row ss:Height="18">
+    <Cell ss:StyleID="Subtitle" ss:MergeAcross="${columns.length - 1}">
+     <Data ss:Type="String">Generated: ${dateStr} at ${timeStr} | Records: ${data.length}</Data>
+    </Cell>
+   </Row>
+   <!-- Empty Row -->
+   <Row ss:Height="10"/>
+   <!-- Header Row -->
+   <Row ss:Height="20">
+${columns.map(col => `    <Cell ss:StyleID="Header"><Data ss:Type="String">${this.escapeXml(col.header)}</Data></Cell>`).join('\n')}
+   </Row>
+   <!-- Data Rows -->
+${data.map((row, idx) => {
+            const styleId = idx % 2 === 0 ? 'DataEven' : 'DataOdd';
+            return `   <Row ss:Height="18" ss:StyleID="${styleId}">
+${columns.map(col => {
+                const value = row[col.field];
+                const type = typeof value === 'number' ? 'Number' : 'String';
+                const displayValue = this.formatCellValue(value, col);
+                return `    <Cell><Data ss:Type="${type}">${this.escapeXml(displayValue)}</Data></Cell>`;
+            }).join('\n')}
+   </Row>`;
+        }).join('\n')}
+   <!-- Empty Row -->
+   <Row ss:Height="10"/>
+   <!-- Footer Row -->
+   <Row ss:Height="18">
+    <Cell ss:StyleID="Footer" ss:MergeAcross="${columns.length - 1}">
+     <Data ss:Type="String">Total Records: ${data.length} | Exported from NLabs Data Grid</Data>
+    </Cell>
+   </Row>
+  </Table>
+ </Worksheet>
+</Workbook>`;
+        const blob = new Blob([excelContent], {
+            type: 'application/vnd.ms-excel;charset=utf-8;'
+        });
+        const link = document.createElement('a');
+        link.href = URL.createObjectURL(blob);
+        link.download = `${this.exportFileName()}_${dateStr.replace(/\//g, '-')}.xls`;
+        link.click();
+        URL.revokeObjectURL(link.href);
+    }
+    formatCellValue(value, column) {
+        if (value == null || value === '')
+            return '';
+        // Use the column's format function if available
+        if (column.format && typeof column.format === 'function') {
+            try {
+                return column.format(value);
+            }
+            catch (e) {
+                console.warn('Error formatting value:', e);
+            }
+        }
+        // Date formatting
+        if (column.type === 'date') {
+            if (value instanceof Date) {
+                return value.toLocaleDateString('en-GB');
+            }
+            // Try to parse string date
+            const date = new Date(value);
+            if (!isNaN(date.getTime())) {
+                return date.toLocaleDateString('en-GB');
+            }
+        }
+        // Number formatting
+        if (column.type === 'number' && typeof value === 'number') {
+            return value.toLocaleString('en-US', {
+                minimumFractionDigits: 0,
+                maximumFractionDigits: 2
+            });
+        }
+        // Boolean formatting
+        if (column.type === 'boolean') {
+            return value ? 'Yes' : 'No';
+        }
+        return String(value);
+    }
+    escapeXml(text) {
+        return text
+            .replace(/&/g, '&amp;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;')
+            .replace(/"/g, '&quot;')
+            .replace(/'/g, '&apos;');
+    }
+    // Export to PDF / Print
+    exportToPDF() {
+        this.pdfExport.emit(this.gridData);
+        // Generate professional print layout
+        this.generatePrintablePDF();
+    }
+    generatePrintablePDF() {
+        if (this.gridData.length === 0) {
+            console.warn('No data to export');
+            return;
+        }
+        const columns = this.getVisibleColumns();
+        const today = new Date();
+        const dateStr = today.toLocaleDateString('en-GB', {
+            day: '2-digit',
+            month: '2-digit',
+            year: 'numeric'
+        });
+        const timeStr = today.toLocaleTimeString('en-GB', {
+            hour: '2-digit',
+            minute: '2-digit'
+        });
+        const printWindow = window.open('', '_blank');
+        if (!printWindow) {
+            console.error('Failed to open print window');
+            return;
+        }
+        const htmlContent = `
+      <!DOCTYPE html>
+      <html lang="en">
+      <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>${this.exportFileName()} - PDF Export</title>
+        <style>
+          * { 
+            margin: 0; 
+            padding: 0; 
+            box-sizing: border-box; 
+          }
+          
+          body { 
+            font-family: 'Segoe UI', Arial, sans-serif;
+            padding: 30px;
+            background: white;
+            color: #1f2937;
+          }
+          
+          .header {
+            margin-bottom: 30px;
+            border-bottom: 3px solid #4f46e5;
+            padding-bottom: 20px;
+          }
+          
+          .header h1 { 
+            color: #4f46e5; 
+            font-size: 28px; 
+            margin-bottom: 8px;
+            font-weight: 600;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+          }
+          
+          .export-info {
+            display: flex;
+            justify-content: space-between;
+            color: #6b7280;
+            font-size: 13px;
+            margin-top: 8px;
+          }
+          
+          .export-date {
+            font-weight: 500;
+          }
+          
+          .export-stats {
+            font-weight: 500;
+          }
+          
+          table { 
+            border-collapse: collapse; 
+            width: 100%; 
+            margin-top: 20px;
+            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+          }
+          
+          thead {
+            background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
+          }
+          
+          th { 
+            color: white; 
+            padding: 14px 12px; 
+            text-align: left; 
+            font-weight: 600;
+            font-size: 12px;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            border-right: 1px solid rgba(255,255,255,0.1);
+          }
+          
+          th:last-child {
+            border-right: none;
+          }
+          
+          td { 
+            border: 1px solid #e5e7eb; 
+            padding: 12px;
+            font-size: 13px;
+          }
+          
+          tbody tr:nth-child(even) { 
+            background: #f9fafb; 
+          }
+          
+          tbody tr:hover { 
+            background: #f3f4f6; 
+          }
+          
+          .footer {
+            margin-top: 30px;
+            padding-top: 20px;
+            border-top: 2px solid #e5e7eb;
+            text-align: center;
+            color: #9ca3af;
+            font-size: 12px;
+          }
+          
+          .footer-stats {
+            display: flex;
+            justify-content: center;
+            gap: 30px;
+            margin-top: 10px;
+          }
+          
+          .footer-stat {
+            display: flex;
+            align-items: center;
+            gap: 5px;
+          }
+          
+          .footer-stat strong {
+            color: #4f46e5;
+          }
+          
+          @media print {
+            body { 
+              padding: 20px; 
+            }
+            
+            .header { 
+              page-break-after: avoid; 
+            }
+            
+            table { 
+              page-break-inside: auto; 
+            }
+            
+            tr { 
+              page-break-inside: avoid; 
+              page-break-after: auto; 
+            }
+            
+            thead { 
+              display: table-header-group; 
+            }
+            
+            tfoot { 
+              display: table-footer-group; 
+            }
+            
+            tbody tr:hover {
+              background: inherit;
+            }
+          }
+          
+          @page {
+            margin: 20mm;
+            size: A4 landscape;
+          }
+        </style>
+      </head>
+      <body>
+        <div class="header">
+          <h1>
+            <span>📊</span>
+            <span>${this.exportFileName()}</span>
+          </h1>
+          <div class="export-info">
+            <div class="export-date">
+              Generated: ${dateStr} at ${timeStr}
+            </div>
+            <div class="export-stats">
+              Total Records: ${this.gridData.length} | Columns: ${columns.length}
+            </div>
+          </div>
+        </div>
+        
+        <table>
+          <thead>
+            <tr>
+              ${columns.map(col => `<th>${this.escapeHtml(col.header)}</th>`).join('')}
+            </tr>
+          </thead>
+          <tbody>
+            ${this.gridData.map((row, idx) => `
+              <tr>
+                ${columns.map(col => {
+            const value = row[col.field];
+            const formattedValue = this.formatCellValue(value, col);
+            return `<td>${this.escapeHtml(formattedValue)}</td>`;
+        }).join('')}
+              </tr>
+            `).join('')}
+          </tbody>
+        </table>
+        
+        <div class="footer">
+          <div>Exported from NLabs Data Grid | © ${today.getFullYear()}</div>
+          <div class="footer-stats">
+            <div class="footer-stat">
+              <span>📄 Pages:</span>
+              <strong>Auto</strong>
+            </div>
+            <div class="footer-stat">
+              <span>📊 Records:</span>
+              <strong>${this.gridData.length}</strong>
+            </div>
+            <div class="footer-stat">
+              <span>📅 Date:</span>
+              <strong>${dateStr}</strong>
+            </div>
+          </div>
+        </div>
+        
+        <script>
+          window.onload = function() {
+            // Auto-print after a short delay
+            setTimeout(function() {
+              window.print();
+            }, 500);
+          };
+        </script>
+      </body>
+      </html>
+    `;
+        printWindow.document.write(htmlContent);
+        printWindow.document.close();
+    }
+    escapeHtml(text) {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: DataGridComponent, deps: [{ token: GridDataService }, { token: ThemeService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: DataGridComponent, isStandalone: true, selector: "nlabs-data-grid", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: false, isRequired: false, transformFunction: null }, adapter: { classPropertyName: "adapter", publicName: "adapter", isSignal: false, isRequired: false, transformFunction: null }, autoLoad: { classPropertyName: "autoLoad", publicName: "autoLoad", isSignal: false, isRequired: false, transformFunction: null }, lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: false, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null }, totalRecords: { classPropertyName: "totalRecords", publicName: "totalRecords", isSignal: false, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, showThemeSelector: { classPropertyName: "showThemeSelector", publicName: "showThemeSelector", isSignal: true, isRequired: false, transformFunction: null }, showColumnChooser: { classPropertyName: "showColumnChooser", publicName: "showColumnChooser", isSignal: true, isRequired: false, transformFunction: null }, showGlobalSearch: { classPropertyName: "showGlobalSearch", publicName: "showGlobalSearch", isSignal: true, isRequired: false, transformFunction: null }, showAddButton: { classPropertyName: "showAddButton", publicName: "showAddButton", isSignal: true, isRequired: false, transformFunction: null }, addButtonText: { classPropertyName: "addButtonText", publicName: "addButtonText", isSignal: true, isRequired: false, transformFunction: null }, addButtonUrl: { classPropertyName: "addButtonUrl", publicName: "addButtonUrl", isSignal: true, isRequired: false, transformFunction: null }, showExport: { classPropertyName: "showExport", publicName: "showExport", isSignal: true, isRequired: false, transformFunction: null }, exportFileName: { classPropertyName: "exportFileName", publicName: "exportFileName", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { addClick: "addClick", excelExport: "excelExport", pdfExport: "pdfExport", onRefresh: "onRefresh", dataLoad: "dataLoad", rowSelect: "rowSelect", rowUnselect: "rowUnselect", stateChange: "stateChange" }, providers: [GridDataService, ThemeService], queries: [{ propertyName: "captionCommandTemplate", first: true, predicate: GridCaptionCommandTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "footerTemplate", first: true, predicate: GridFooterTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "columnComponents", predicate: GridColumnComponent }, { propertyName: "columnCommandTemplates", predicate: GridColumnCommandTemplateDirective }], viewQueries: [{ propertyName: "gridHeader", first: true, predicate: ["gridHeader"], descendants: true, read: ElementRef }, { propertyName: "gridBody", first: true, predicate: ["gridBody"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<div class=\"nlabs-data-grid\" [class.loading]=\"loading\">\n  <!-- Loading Overlay -->\n  @if (loading) {\n    <div class=\"grid-loading-overlay\">\n      <div class=\"spinner\"></div>\n    </div>\n  }\n\n\n  <!-- Grid Container -->\n  <div class=\"grid-container\">\n    <!-- Toolbar with Global Search, Export, Theme Selector -->\n    @if (config?.showHeader !== false) {\n      <div class=\"grid-toolbar\">\n        <div class=\"toolbar-left\">\n          <!-- Global Search -->\n          @if(showGlobalSearch()){\n            <div class=\"global-search\">\n              <input type=\"text\" class=\"global-search-input\" placeholder=\"\uD83D\uDD0D Search in all columns...\"\n                [(ngModel)]=\"globalSearchTerm\" (input)=\"onGlobalSearch($any($event.target).value)\" />\n              </div>\n            }\n          </div>\n          <div class=\"toolbar-center\">\n            <!-- Add Button -->\n            @if (showAddButton()) {\n              <button class=\"toolbar-btn btn-add\" (click)=\"onAddButtonClick()\" title=\"Add new record\">\n                \u2795 {{ addButtonText() }}\n              </button>\n            }\n            <!-- Export Buttons -->\n            @if (showExport()) {\n              <div class=\"export-buttons\">\n                <button class=\"toolbar-btn btn-export\" (click)=\"exportToExcel()\" title=\"Export to Excel/CSV\">\n                  \uD83D\uDCCA Excel\n                </button>\n                <button class=\"toolbar-btn btn-export\" (click)=\"exportToPDF()\" title=\"Export to PDF / Print\">\n                  \uD83D\uDCC4 PDF\n                </button>\n              </div>\n            }\n            <!-- Caption Command Template -->\n            @if (captionCommandTemplate()) {\n              <ng-container>\n                <ng-container *ngTemplateOutlet=\"captionCommandTemplate()!\"></ng-container>\n              </ng-container>\n            }\n          </div>\n          <div class=\"toolbar-right\">\n            <!-- Column Chooser -->\n            @if (showColumnChooser() && (config?.reorderable || config?.resizable)) {\n              <div class=\"column-chooser\">\n                <button class=\"column-chooser-btn btn-icon-only\" (click)=\"showColumnChooserModal = !showColumnChooserModal\"\n                  title=\"Show/Hide Columns\">\n                  \u2630\n                </button>\n                <!-- Backdrop -->\n                @if (showColumnChooserModal) {\n                  <div class=\"column-chooser-backdrop\" (click)=\"showColumnChooserModal = false\">\n                  </div>\n                }\n                @if (showColumnChooserModal) {\n                  <div class=\"column-chooser-panel\">\n                    <div class=\"column-chooser-header\">\n                      <span>Show/Hide Columns</span>\n                      <button (click)=\"showColumnChooserModal = false\">\u2715</button>\n                    </div>\n                    <div class=\"column-list\">\n                      @for (column of displayedColumns; track column) {\n                        <div class=\"column-item\">\n                          <label>\n                            <input type=\"checkbox\" [checked]=\"column.visible !== false\"\n                              (change)=\"toggleColumnVisibility(column)\" />\n                              <span>{{ column.header }}</span>\n                            </label>\n                          </div>\n                        }\n                      </div>\n                    </div>\n                  }\n                </div>\n              }\n              <theme-selector [showSelector]=\"showThemeSelector()\" />\n              <!-- Refresh Button -->\n              <button class=\"toolbar-btn btn-refresh btn-icon-only\" (click)=\"onRefreshClick()\" title=\"Refresh data\">\n                \uD83D\uDD04\n              </button>\n            </div>\n          </div>\n        }\n\n        <!-- Header -->\n        @if (config?.showHeader !== false) {\n          <div class=\"grid-header\" #gridHeader>\n            <div class=\"grid-row header-row\">\n              <!-- Checkbox Column Header -->\n              @if (config?.selectable && (config?.showCheckboxColumn !== false)) {\n                <div class=\"grid-cell header-cell checkbox-cell\"\n                  [style.width]=\"config?.checkboxColumnWidth || '60px'\"\n                  [style.min-width]=\"config?.checkboxColumnWidth || '60px'\"\n                  [style.max-width]=\"config?.checkboxColumnWidth || '60px'\">\n                  <div class=\"header-content\">\n                    @if (config?.multiSelect) {\n                      <input\n                        type=\"checkbox\"\n                        class=\"grid-checkbox header-checkbox\"\n                        [checked]=\"isAllSelected()\"\n                        [indeterminate]=\"isSomeSelected()\"\n                        (change)=\"toggleSelectAll($event)\"\n                        title=\"Select All\"\n                        />\n                      }\n                    </div>\n                  </div>\n                }\n\n                <!-- Regular Columns -->\n                @for (column of getVisibleColumns(); track column; let i = $index) {\n                  <div class=\"grid-cell header-cell\"\n                    [style.width]=\"column.width || 'auto'\" [style.min-width]=\"column.minWidth || '50px'\"\n                    [style.max-width]=\"column.maxWidth || 'none'\" [class.sortable]=\"column.sortable\"\n                    [class.dragging]=\"draggedColumn === column\" [class.drop-target]=\"dropTargetIndex === i\"\n                    [attr.draggable]=\"config?.reorderable\" (dragstart)=\"onDragStart($event, column, i)\"\n                    (dragover)=\"onColumnDragOver($event, i)\" (drop)=\"onColumnDrop($event, i)\" (dragend)=\"onColumnDragEnd()\"\n                    (click)=\"column.sortable && onSort(column)\">\n                    <div class=\"header-content\">\n                      <span class=\"header-title\">{{ column.header }}</span>\n                      <div class=\"header-actions\">\n                        @if (column.sortable) {\n                          <span class=\"sort-icon\">\n                            {{ getSortIcon(column) }}\n                          </span>\n                        }\n                        @if (column.filterable !== false && config?.filterable) {\n                          <button class=\"filter-btn\" [class.active]=\"isFilterActive(column)\"\n                            (click)=\"openFilterModal(column, $event)\" title=\"Filter\">\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"\n                              stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                              <polygon points=\"22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3\"></polygon>\n                            </svg>\n                          </button>\n                        }\n                      </div>\n                    </div>\n                    @if (column.resizable !== false && config?.resizable) {\n                      <span class=\"resize-handle\" (mousedown)=\"onResizeStart($event, column)\"></span>\n                    }\n                  </div>\n                }\n\n                <!-- Actions Column Header -->\n                @if (config?.showActions) {\n                  <div class=\"grid-cell header-cell actions-cell\"\n                    [style.width]=\"config?.actionsWidth || '150px'\"\n                    [style.min-width]=\"config?.actionsWidth || '150px'\"\n                    [style.max-width]=\"config?.actionsWidth || '150px'\">\n                    <div class=\"header-content\">\n                      <span class=\"header-title\">{{ config?.actionsHeader || 'Actions' }}</span>\n                    </div>\n                  </div>\n                }\n              </div>\n\n              <!-- Filter Row -->\n              @if (config?.filterable) {\n                <div class=\"grid-row filter-row\">\n                  <!-- Checkbox Column Filter (Empty) -->\n                  @if (config?.selectable && (config?.showCheckboxColumn !== false)) {\n                    <div class=\"grid-cell filter-cell checkbox-cell\"\n                      [style.width]=\"config?.checkboxColumnWidth || '60px'\"\n                      [style.min-width]=\"config?.checkboxColumnWidth || '60px'\"\n                      [style.max-width]=\"config?.checkboxColumnWidth || '60px'\">\n                    </div>\n                  }\n                  <!-- Regular Column Filters -->\n                  @for (column of getVisibleColumns(); track column.field) {\n                    <div class=\"grid-cell filter-cell\" [style.width]=\"column.width || 'auto'\"\n                      [style.min-width]=\"column.minWidth || '50px'\" [style.max-width]=\"column.maxWidth || 'none'\">\n                      @if (column.filterable !== false) {\n                        <input type=\"text\" class=\"filter-input\" [placeholder]=\"'Search ' + column.header\"\n                          [value]=\"getFilterValue(column)\" (input)=\"onFilter(column, $any($event.target).value)\"\n                          (click)=\"$event.stopPropagation()\" />\n                        }\n                      </div>\n                    }\n                    <!-- Actions Column Filter (Empty) -->\n                    @if (config?.showActions) {\n                      <div class=\"grid-cell filter-cell actions-cell\"\n                        [style.width]=\"config?.actionsWidth || '150px'\"\n                        [style.min-width]=\"config?.actionsWidth || '150px'\"\n                        [style.max-width]=\"config?.actionsWidth || '150px'\">\n                      </div>\n                    }\n                  </div>\n                }\n              </div>\n            }\n\n\n            <!-- Body -->\n            <div class=\"grid-body\" #gridBody>\n              @for (row of gridData; track trackByRow($index, row)) {\n                <div class=\"grid-row data-row\" [class.selected]=\"isRowSelected(row)\" [class.selectable]=\"config?.selectable\"\n                  [style.height]=\"config?.rowHeight\">\n\n                  <!-- Checkbox Column Cell -->\n                  @if (config?.selectable && (config?.showCheckboxColumn !== false)) {\n                    <div class=\"grid-cell data-cell checkbox-cell\"\n                      [style.width]=\"config?.checkboxColumnWidth || '60px'\"\n                      [style.min-width]=\"config?.checkboxColumnWidth || '60px'\"\n                      [style.max-width]=\"config?.checkboxColumnWidth || '60px'\">\n                      @if (checkboxTemplate) {\n                        <ng-container *ngTemplateOutlet=\"checkboxTemplate; context: { $implicit: row, selected: isRowSelected(row) }\"></ng-container>\n                      } @else {\n                        <input\n                          type=\"checkbox\"\n                          class=\"grid-checkbox row-checkbox\"\n                          [checked]=\"isRowSelected(row)\"\n                          (change)=\"onRowSelect(row, $event)\"\n                          (click)=\"$event.stopPropagation()\"\n                          />\n                        }\n                      </div>\n                    }\n\n                    <!-- Regular Data Columns -->\n                    @for (column of getVisibleColumns(); track column.field) {\n                      <div class=\"grid-cell data-cell\" [style.width]=\"column.width || 'auto'\"\n                        [style.min-width]=\"column.minWidth || '50px'\" [style.max-width]=\"column.maxWidth || 'none'\"\n                        [attr.data-type]=\"column.type\">\n                        @if (!column.cellTemplate) {\n                          {{ getCellValue(row, column) }}\n                        }\n                        @if (column.cellTemplate) {\n                          <ng-container\n                          *ngTemplateOutlet=\"column.cellTemplate; context: { $implicit: row, column: column }\"></ng-container>\n                        }\n                      </div>\n                    }\n\n                    <!-- Actions Column Cell -->\n                    @if (config?.showActions) {\n                      <div class=\"grid-cell data-cell actions-cell\"\n                        [style.width]=\"config?.actionsWidth || '150px'\"\n                        [style.min-width]=\"config?.actionsWidth || '150px'\"\n                        [style.max-width]=\"config?.actionsWidth || '150px'\">\n                        @if (actionsTemplate) {\n                          <ng-container *ngTemplateOutlet=\"actionsTemplate; context: { $implicit: row }\"></ng-container>\n                        }\n                      </div>\n                    }\n                  </div>\n                }\n\n\n                <!-- Empty State -->\n                @if (gridData.length === 0 && !loading) {\n                  <div class=\"grid-empty\">\n                    <p>{{ config?.emptyMessage || 'No records found' }}</p>\n                  </div>\n                }\n\n              </div>\n\n              <!-- Footer / Pagination -->\n              @if (config?.showFooter !== false) {\n                <div class=\"grid-footer\">\n                  <div class=\"pagination-info\">\n                    <span>\n                      Showing {{ pagination.page * pagination.pageSize + 1 }} to\n                      {{ Math.min((pagination.page + 1) * pagination.pageSize, pagination.totalRecords) }}\n                      of {{ pagination.totalRecords }} entries\n                    </span>\n                  </div>\n\n                  <div class=\"pagination-controls\">\n                    <!-- Page Size Selector -->\n                    @if (config?.pageSizeOptions; as pageSizeOptions) {\n                      <div class=\"page-size-selector\">\n                        <label>Rows per page:</label>\n                        <select [value]=\"pagination.pageSize\" (change)=\"onPageSizeChange(+$any($event.target).value)\"\n                          class=\"page-size-select\">\n                          @for (size of pageSizeOptions; track $index) {\n                            <option [value]=\"size\">\n                              {{ size }}\n                            </option>\n                          }\n                        </select>\n                      </div>\n                    }\n\n                    <!-- Page Navigation -->\n                    <div class=\"page-navigation\">\n                      <button class=\"page-btn\" [disabled]=\"pagination.page === 0\" (click)=\"onPageChange(0)\" title=\"First page\">\n                        \u27EA\n                      </button>\n                      <button class=\"page-btn\" [disabled]=\"pagination.page === 0\" (click)=\"onPageChange(pagination.page - 1)\"\n                        title=\"Previous page\">\n                        \u2039\n                      </button>\n\n                      @for (pageNum of getPageNumbers(); track pageNum) {\n                        @if (pageNum !== -1) {\n                          <button class=\"page-btn\" [class.active]=\"pageNum === pagination.page\" (click)=\"onPageChange(pageNum)\">\n                            {{ pageNum + 1 }}\n                          </button>\n                        }\n                        @if (pageNum === -1) {\n                          <span class=\"page-ellipsis\">...</span>\n                        }\n                      }\n\n                      <button class=\"page-btn\" [disabled]=\"pagination.page >= pagination.totalPages - 1\"\n                        (click)=\"onPageChange(pagination.page + 1)\" title=\"Next page\">\n                        \u203A\n                      </button>\n                      <button class=\"page-btn\" [disabled]=\"pagination.page >= pagination.totalPages - 1\"\n                        (click)=\"onPageChange(pagination.totalPages - 1)\" title=\"Last page\">\n                        \u27EB\n                      </button>\n                    </div>\n                  </div>\n\n                  <!-- Custom Footer Template -->\n                  @if (footerTemplate()) {\n                    <div class=\"grid-custom-footer\">\n                      <ng-container\n                      *ngTemplateOutlet=\"footerTemplate()!; context: { $implicit: gridData, total: pagination.totalRecords }\"></ng-container>\n                    </div>\n                  }\n                </div>\n              }\n\n            </div>\n          </div>\n\n          <!-- Filter Modal -->\n          @if (showFilterModal) {\n            <div class=\"filter-modal-overlay\" (click)=\"closeFilterModal()\">\n              <div class=\"filter-modal-content\" (click)=\"$event.stopPropagation()\">\n                <div class=\"filter-modal-header\">\n                  <h3>Filter: {{ currentFilterColumn?.header }}</h3>\n                  <button class=\"close-btn\" (click)=\"closeFilterModal()\">\u00D7</button>\n                </div>\n\n                <div class=\"filter-modal-body\">\n                  <div class=\"filter-form\">\n                    <!-- Operator Selection - STRING -->\n                    @if (!currentFilterColumn?.filterType || currentFilterColumn?.filterType === 'text') {\n                      <div class=\"form-group\">\n                        <label>Operator:</label>\n                        <select [(ngModel)]=\"currentFilterOperator\" class=\"form-control\">\n                          <option value=\"contains\">Contains (\u0130\u00E7erir)</option>\n                          <option value=\"notContains\">Not Contains (\u0130\u00E7ermez)</option>\n                          <option value=\"equals\">Equals (E\u015Fittir)</option>\n                          <option value=\"notEquals\">Not Equals (E\u015Fit De\u011Fil)</option>\n                          <option value=\"startsWith\">Starts With (\u0130le Ba\u015Flar)</option>\n                          <option value=\"endsWith\">Ends With (\u0130le Biter)</option>\n                          <option value=\"isEmpty\">Is Empty (Bo\u015F)</option>\n                          <option value=\"isNotEmpty\">Is Not Empty (Bo\u015F De\u011Fil)</option>\n                        </select>\n                      </div>\n                    }\n\n                    <!-- Operator Selection - NUMBER -->\n                    @if (currentFilterColumn?.filterType === 'number') {\n                      <div class=\"form-group\">\n                        <label>Operator:</label>\n                        <select [(ngModel)]=\"currentFilterOperator\" class=\"form-control\">\n                          <option value=\"equals\">Equals (E\u015Fittir)</option>\n                          <option value=\"notEquals\">Not Equals (E\u015Fit De\u011Fil)</option>\n                          <option value=\"lt\">Less Than (K\u00FC\u00E7\u00FCkt\u00FCr)</option>\n                          <option value=\"lte\">Less Than or Equal (K\u00FC\u00E7\u00FCk E\u015Fit)</option>\n                          <option value=\"gt\">Greater Than (B\u00FCy\u00FCkt\u00FCr)</option>\n                          <option value=\"gte\">Greater Than or Equal (B\u00FCy\u00FCk E\u015Fit)</option>\n                          <option value=\"isEmpty\">Is Empty (Bo\u015F)</option>\n                          <option value=\"isNotEmpty\">Is Not Empty (Bo\u015F De\u011Fil)</option>\n                        </select>\n                      </div>\n                    }\n\n                    <!-- Operator Selection - DATE -->\n                    @if (currentFilterColumn?.filterType === 'date') {\n                      <div class=\"form-group\">\n                        <label>Operator:</label>\n                        <select [(ngModel)]=\"currentFilterOperator\" class=\"form-control\">\n                          <option value=\"equals\">On Date (Tarihte)</option>\n                          <option value=\"notEquals\">Not On Date (Tarihte De\u011Fil)</option>\n                          <option value=\"lt\">Before (\u00D6nce)</option>\n                          <option value=\"lte\">On or Before (Veya \u00D6nce)</option>\n                          <option value=\"gt\">After (Sonra)</option>\n                          <option value=\"gte\">On or After (Veya Sonra)</option>\n                          <option value=\"isEmpty\">Is Empty (Bo\u015F)</option>\n                          <option value=\"isNotEmpty\">Is Not Empty (Bo\u015F De\u011Fil)</option>\n                        </select>\n                      </div>\n                    }\n\n                    <!-- Value Input - TEXT -->\n                    @if ((!currentFilterColumn?.filterType || currentFilterColumn?.filterType === 'text') && currentFilterOperator\n                      !== 'isEmpty' && currentFilterOperator !== 'isNotEmpty') {\n                      <div class=\"form-group\">\n                        <label>Value:</label>\n                        <input type=\"text\" [(ngModel)]=\"filterValue\" class=\"form-control\" placeholder=\"Enter text...\"\n                          (keyup.enter)=\"applyFilterModal()\" />\n                        </div>\n                      }\n\n                      <!-- Value Input - NUMBER -->\n                      @if (currentFilterColumn?.filterType === 'number' && currentFilterOperator !== 'isEmpty' &&\n                        currentFilterOperator !== 'isNotEmpty') {\n                        <div class=\"form-group\">\n                          <label>Value:</label>\n                          <input type=\"number\" [(ngModel)]=\"filterValue\" class=\"form-control\" placeholder=\"Enter number...\"\n                            (keyup.enter)=\"applyFilterModal()\" />\n                          </div>\n                        }\n\n                        <!-- Value Input - DATE -->\n                        @if (currentFilterColumn?.filterType === 'date' && currentFilterOperator !== 'isEmpty' && currentFilterOperator\n                          !== 'isNotEmpty') {\n                          <div class=\"form-group\">\n                            <label>Value:</label>\n                            <input type=\"date\" [(ngModel)]=\"filterValue\" class=\"form-control\" (keyup.enter)=\"applyFilterModal()\" />\n                          </div>\n                        }\n\n\n                        @if (currentFilterOperator === 'isEmpty' || currentFilterOperator === 'isNotEmpty') {\n                          <div class=\"form-group\">\n                            <p\n                              style=\"padding: 12px; background: var(--grid-bg-secondary); border-radius: var(--grid-radius-sm); color: var(--grid-text-secondary); font-size: 0.875rem;\">\n                              \u2139\uFE0F Bu operat\u00F6r i\u00E7in de\u011Fer girmeye gerek yok.\n                            </p>\n                          </div>\n                        }\n\n                      </div>\n                    </div>\n\n                    <div class=\"filter-modal-footer\">\n                      <button class=\"btn-cancel\" (click)=\"closeFilterModal()\">Cancel</button>\n                      <button class=\"btn-clear\" (click)=\"clearFilterModal()\">Clear Filter</button>\n                      <button class=\"btn-apply\" (click)=\"applyFilterModal()\">Apply</button>\n                    </div>\n                  </div>\n                </div>\n              }", styles: ["@charset \"UTF-8\";:root{--grid-primary-color: #4096ff;--grid-primary-hover: #1677ff;--grid-primary-light: rgba(64, 150, 255, .1);--grid-bg-primary: #ffffff;--grid-bg-secondary: #fafafa;--grid-bg-hover: #f5f9ff;--grid-bg-selected: #e6f4ff;--grid-bg-selected-hover: #d9ecff;--grid-text-primary: #262626;--grid-text-secondary: #595959;--grid-text-tertiary: #8c8c8c;--grid-text-disabled: #bfbfbf;--grid-text-placeholder: #bfbfbf;--grid-border-color: #d9d9d9;--grid-border-light: #e8e8e8;--grid-border-dark: #e0e0e0;--grid-shadow-sm: 0 2px 8px rgba(0, 0, 0, .1);--grid-shadow-md: 0 4px 12px rgba(0, 0, 0, .15);--grid-shadow-lg: 0 6px 16px rgba(0, 0, 0, .12);--grid-shadow-color: rgba(0, 0, 0, .1);--grid-success-color: #52c41a;--grid-warning-color: #faad14;--grid-error-color: #ff4d4f;--grid-info-color: #1890ff;--grid-transition: all .3s ease;--grid-transition-fast: all .2s ease;--grid-transition-normal: all .3s ease;--grid-radius-sm: 4px;--grid-radius-md: 6px;--grid-radius-lg: 8px;--grid-header-bg: linear-gradient(180deg, #fafafa 0%, #f5f5f5 100%);--grid-footer-bg: #fafafa}[data-theme=dark],.dark-theme{--grid-primary-color: #1890ff;--grid-primary-hover: #40a9ff;--grid-primary-light: rgba(24, 144, 255, .2);--grid-bg-primary: #1a1a1a;--grid-bg-secondary: #0a0a0a;--grid-bg-hover: #2a2a2a;--grid-bg-selected: #111b26;--grid-bg-selected-hover: #0d1520;--grid-text-primary: #e8e8e8;--grid-text-secondary: #bfbfbf;--grid-text-tertiary: #8c8c8c;--grid-text-disabled: #595959;--grid-text-placeholder: #595959;--grid-border-color: #434343;--grid-border-light: #303030;--grid-border-dark: #4a4a4a;--grid-shadow-sm: 0 2px 8px rgba(0, 0, 0, .45);--grid-shadow-md: 0 4px 12px rgba(0, 0, 0, .55);--grid-shadow-lg: 0 6px 16px rgba(0, 0, 0, .65);--grid-shadow-color: rgba(0, 0, 0, .5);--grid-success-color: #49aa19;--grid-warning-color: #d89614;--grid-error-color: #d32029;--grid-info-color: #177ddc;--grid-header-bg: linear-gradient(180deg, #1f1f1f 0%, #1a1a1a 100%);--grid-footer-bg: #1f1f1f}*{transition:background-color .3s ease,color .3s ease,border-color .3s ease}body{background-color:var(--grid-bg-primary);color:var(--grid-text-primary);transition:background-color .3s ease,color .3s ease}.flexi-data-grid{position:relative;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;color:var(--grid-text-primary);background:var(--grid-bg-primary);border-radius:var(--grid-radius-lg);box-shadow:var(--grid-shadow-sm);overflow:hidden}.flexi-data-grid.loading{pointer-events:none}.grid-loading-overlay{position:absolute;inset:0;background:var(--grid-bg-primary);opacity:.95;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1000;gap:12px}.grid-loading-overlay .spinner{width:40px;height:40px;border:4px solid var(--grid-border-light);border-top:4px solid var(--grid-primary-color);border-radius:50%;animation:spin 1s cubic-bezier(.5,0,.5,1) infinite}.grid-loading-overlay:after{content:\"Loading...\";color:var(--grid-text-secondary);font-size:14px;font-weight:500}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.grid-container{display:flex;flex-direction:column;width:100%;min-height:400px;position:relative}.grid-toolbar{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:var(--grid-header-bg);border-bottom:1px solid var(--grid-border-dark);gap:16px;flex-wrap:wrap}.grid-toolbar .toolbar-left{display:flex;flex:0 0 auto;align-items:center;gap:12px;flex-wrap:wrap}.grid-toolbar .toolbar-center{display:flex;flex:1 1 auto;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}.grid-toolbar .toolbar-right{display:flex;flex:0 0 auto;align-items:center;gap:4px;flex-wrap:wrap}.global-search{flex:1;min-width:200px;max-width:400px}.global-search .global-search-input{width:100%;padding:8px 12px;border:1px solid var(--grid-border-color);border-radius:var(--grid-radius-md);font-size:14px;background:var(--grid-bg-primary);color:var(--grid-text-primary);transition:var(--grid-transition-fast)}.global-search .global-search-input:focus{outline:none;border-color:var(--grid-primary-color);box-shadow:0 0 0 2px var(--grid-primary-light)}.global-search .global-search-input::placeholder{color:var(--grid-text-placeholder)}.toolbar-btn{padding:8px 16px;border:1px solid var(--grid-border-color);border-radius:var(--grid-radius-md);font-size:13px;font-weight:500;cursor:pointer;background:var(--grid-bg-primary);color:var(--grid-text-primary);transition:var(--grid-transition-fast);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}.toolbar-btn:hover{border-color:var(--grid-primary-color);color:var(--grid-primary-color);transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}.toolbar-btn:active{transform:translateY(0)}.toolbar-btn.btn-add{background:var(--grid-success-color);color:#fff;border-color:var(--grid-success-color)}.toolbar-btn.btn-add:hover{opacity:.9;color:#fff}.toolbar-btn.btn-export:hover{background:var(--grid-primary-light)}.toolbar-btn.btn-icon-only{padding:10px;font-size:20px;line-height:1}.toolbar-btn.btn-icon-only:hover{background:var(--grid-primary-light)}.export-buttons{display:flex;gap:8px}.column-chooser{position:relative;padding:12px 16px;background:var(--grid-header-bg);border-bottom:1px solid var(--grid-border-dark)}.column-chooser .column-chooser-btn{padding:8px 16px;background:var(--grid-bg-primary);border:1px solid var(--grid-border-color);border-radius:var(--grid-radius-md);cursor:pointer;font-size:13px;font-weight:500;color:var(--grid-text-primary);transition:var(--grid-transition-fast);display:inline-flex;align-items:center;gap:6px;box-shadow:var(--grid-shadow-sm)}.column-chooser .column-chooser-btn.btn-icon-only{padding:10px;font-size:20px;line-height:1}.column-chooser .column-chooser-btn:hover{border-color:var(--grid-primary-color);color:var(--grid-primary-color);box-shadow:0 2px 4px var(--grid-primary-light);transform:translateY(-1px)}.column-chooser .column-chooser-btn:active{transform:translateY(0);box-shadow:0 1px 2px #0000000d}.column-chooser .column-chooser-backdrop{position:fixed;inset:0;background:transparent;z-index:999}.column-chooser .column-chooser-panel{position:absolute;top:calc(100% + 4px);left:16px;margin-top:4px;background:var(--grid-bg-primary);border:1px solid var(--grid-border-color);border-radius:var(--grid-radius-lg);box-shadow:var(--grid-shadow-lg);z-index:1000;min-width:280px;max-width:400px;animation:slideDown .2s ease}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.column-chooser .column-chooser-panel .column-chooser-header{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--grid-border-light);font-weight:600;font-size:14px;color:var(--grid-text-primary);background:var(--grid-header-bg);border-radius:var(--grid-radius-lg) var(--grid-radius-lg) 0 0}.column-chooser .column-chooser-panel .column-chooser-header button{background:none;border:none;cursor:pointer;font-size:18px;padding:0;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:var(--grid-radius-md);color:var(--grid-text-tertiary);transition:var(--grid-transition-fast)}.column-chooser .column-chooser-panel .column-chooser-header button:hover{background:var(--grid-bg-hover);color:var(--grid-text-primary)}.column-chooser .column-chooser-panel .column-chooser-header button:active{background:var(--grid-bg-selected)}.column-chooser .column-chooser-panel .column-list{max-height:400px;overflow-y:auto;padding:8px 0;display:grid;grid-template-columns:repeat(3,1fr);gap:4px}.column-chooser .column-chooser-panel .column-item{padding:10px 16px;transition:var(--grid-transition-fast);margin:0 8px;border-radius:var(--grid-radius-md)}.column-chooser .column-chooser-panel .column-item:hover{background:var(--grid-bg-hover)}.column-chooser .column-chooser-panel .column-item label{display:flex;align-items:center;gap:10px;cursor:pointer;margin:0;-webkit-user-select:none;user-select:none}.column-chooser .column-chooser-panel .column-item label input[type=checkbox]{cursor:pointer;width:16px;height:16px;accent-color:var(--grid-primary-color)}.column-chooser .column-chooser-panel .column-item label span{flex:1;font-size:13px;color:var(--grid-text-primary)}.grid-row{display:flex;width:100%;border-bottom:1px solid var(--grid-border-light);min-width:fit-content}.grid-row:last-child{border-bottom:none}.grid-cell{flex:1 1 0;min-width:0;padding:12px 16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;box-sizing:border-box}.grid-cell[style*=width]{flex:0 0 auto}.grid-header{background:var(--grid-header-bg);border-bottom:2px solid var(--grid-border-dark);overflow-x:auto;overflow-y:hidden}.grid-header::-webkit-scrollbar{display:none}.grid-header{-ms-overflow-style:none;scrollbar-width:none}.grid-header .header-row{border-bottom:none}.grid-header .header-cell{font-weight:600;color:var(--grid-text-primary);cursor:default;-webkit-user-select:none;user-select:none;position:relative;transition:var(--grid-transition-fast)}.grid-header .header-cell.sortable{cursor:pointer}.grid-header .header-cell.sortable:hover{background-color:var(--grid-bg-hover)}.grid-header .header-cell.dragging{opacity:.4;background-color:var(--grid-primary-light);cursor:grabbing!important;transform:scale(.98);box-shadow:var(--grid-shadow-md)}.grid-header .header-cell.drop-target{border-left:4px solid var(--grid-primary-color);background-color:var(--grid-primary-light)}.grid-header .header-cell.drop-target:before{content:\"\";position:absolute;left:-4px;top:0;bottom:0;width:4px;background:var(--grid-primary-color);box-shadow:0 0 8px var(--grid-primary-light)}.grid-header .header-cell[draggable=true]{cursor:grab;transition:var(--grid-transition-fast)}.grid-header .header-cell[draggable=true]:hover{background-color:var(--grid-primary-light)}.grid-header .header-cell[draggable=true]:active{cursor:grabbing}.grid-header .header-cell.resizing{-webkit-user-select:none;user-select:none;cursor:col-resize;background-color:var(--grid-primary-light)}.grid-header .header-cell.resizing .resize-handle{opacity:1;background-color:var(--grid-primary-light)}.grid-header .header-cell.resizing .resize-handle:after{background-color:var(--grid-primary-color);box-shadow:0 0 8px var(--grid-primary-light);width:4px}.grid-header .header-cell .header-content{display:flex;align-items:center;justify-content:space-between;flex:1;gap:8px}.grid-header .header-cell .header-title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.grid-header .header-cell .header-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}.grid-header .header-cell .sort-icon{color:var(--grid-text-tertiary);font-size:14px;font-weight:700;transition:var(--grid-transition-fast);opacity:.7}.header-cell.sortable:hover .grid-header .header-cell .sort-icon{opacity:1;color:var(--grid-primary-color)}.grid-header .header-cell .resize-handle{position:absolute;right:-6px;top:0;bottom:0;width:16px;cursor:col-resize;-webkit-user-select:none;user-select:none;z-index:10;display:flex;align-items:center;justify-content:center;opacity:.7;transition:var(--grid-transition-fast)}.grid-header .header-cell .resize-handle:hover{opacity:1;background-color:var(--grid-primary-light)}.grid-header .header-cell .resize-handle:before{content:\"\\22ee\";color:var(--grid-text-secondary);font-size:18px;font-weight:700;line-height:1;text-shadow:0 1px 2px var(--grid-shadow-color)}.grid-header .header-cell .resize-handle:hover:before{color:var(--grid-primary-color)}.grid-header .header-cell .resize-handle:after{content:\"\";position:absolute;right:6px;top:10%;bottom:10%;width:3px;background-color:var(--grid-border-color);border-radius:var(--grid-radius-sm);transition:var(--grid-transition-fast)}.grid-header .header-cell .resize-handle:hover:after{background-color:var(--grid-primary-color);box-shadow:0 0 4px var(--grid-primary-light)}.grid-header .filter-row{background:var(--grid-bg-secondary);border-top:1px solid var(--grid-border-light)}.grid-header .filter-row .filter-cell{padding:6px 10px}.grid-header .filter-row .filter-input{width:100%;padding:8px 12px;border:1px solid var(--grid-border-light);border-radius:var(--grid-radius-sm);font-size:13px;transition:all .2s ease;background-color:var(--grid-bg-primary);color:var(--grid-text-primary)}.grid-header .filter-row .filter-input:hover{border-color:var(--grid-primary-color)}.grid-header .filter-row .filter-input:focus{outline:none;border-color:var(--grid-primary-color);box-shadow:0 0 0 3px #4f46e51a}.grid-header .filter-row .filter-input::placeholder{color:var(--grid-text-tertiary);font-size:12px;opacity:.7}.grid-body{flex:1;overflow-x:auto;overflow-y:auto;min-height:200px;background:var(--grid-bg-primary)}.grid-body .data-row{transition:var(--grid-transition-fast);border-left:3px solid transparent}.grid-body .data-row:hover{background-color:var(--grid-bg-hover);border-left-color:var(--grid-primary-light);box-shadow:inset 0 0 0 1px var(--grid-primary-light)}.grid-body .data-row.selectable{cursor:pointer}.grid-body .data-row.selectable:active{background-color:var(--grid-bg-selected)}.grid-body .data-row.selected{background-color:var(--grid-bg-selected);border-left-color:var(--grid-primary-color)}.grid-body .data-row.selected:hover{background-color:var(--grid-bg-selected-hover)}.grid-body .data-row .data-cell{color:var(--grid-text-primary);font-size:13px;transition:var(--grid-transition-fast)}.grid-body .data-row .data-cell[data-type=number]{justify-content:flex-end;text-align:right;font-variant-numeric:tabular-nums}.grid-body .data-row .data-cell[data-type=boolean]{justify-content:center}.grid-body .data-row .data-cell[data-type=date]{font-variant-numeric:tabular-nums}.grid-body .grid-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:300px;color:var(--grid-text-tertiary);font-size:14px;padding:40px 20px}.grid-body .grid-empty:before{content:\"\\1f4c2\";font-size:48px;margin-bottom:16px;opacity:.5}.grid-body .grid-empty p{margin:0;font-weight:500}.grid-footer{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--grid-header-bg);border-top:1px solid var(--grid-border-light);flex-wrap:wrap;gap:12px}.grid-footer .pagination-info{font-size:13px;color:var(--grid-text-secondary)}.grid-footer .pagination-controls{display:flex;align-items:center;gap:16px}.grid-footer .page-size-selector{display:flex;align-items:center;gap:8px;font-size:13px}.grid-footer .page-size-selector label{color:var(--grid-text-secondary);margin:0}.grid-footer .page-size-selector .page-size-select{padding:4px 8px;border:1px solid var(--grid-border-color);border-radius:var(--grid-radius-md);font-size:13px;cursor:pointer;transition:var(--grid-transition-normal);background-color:var(--grid-bg-primary);color:var(--grid-text-primary)}.grid-footer .page-size-selector .page-size-select:focus{outline:none;border-color:var(--grid-primary-color);box-shadow:0 0 0 2px var(--grid-primary-light)}.grid-footer .page-navigation{display:flex;gap:4px}.grid-footer .page-navigation .page-btn{min-width:32px;height:32px;padding:0 8px;border:1px solid var(--grid-border-color);background:var(--grid-bg-primary);color:var(--grid-text-secondary);font-size:13px;border-radius:var(--grid-radius-md);cursor:pointer;transition:var(--grid-transition-normal);display:flex;align-items:center;justify-content:center}.grid-footer .page-navigation .page-btn:hover:not(:disabled){border-color:var(--grid-primary-color);color:var(--grid-primary-color)}.grid-footer .page-navigation .page-btn.active{background:var(--grid-primary-color);color:#fff;border-color:var(--grid-primary-color);font-weight:600}.grid-footer .page-navigation .page-btn:disabled{cursor:not-allowed;opacity:.5}.grid-footer .page-navigation .page-ellipsis{display:flex;align-items:center;padding:0 4px;color:var(--grid-text-tertiary)}.grid-custom-footer{padding:16px;background:var(--grid-bg-secondary);border-top:2px solid var(--grid-border-color);color:var(--grid-text-primary)}@media(max-width:768px){.grid-footer{flex-direction:column;align-items:stretch}.grid-footer .pagination-info{text-align:center}.grid-footer .pagination-controls{flex-direction:column;align-items:stretch}.grid-footer .page-navigation{justify-content:center}}.filter-modal-overlay{position:fixed;inset:0;background:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .25s ease-out}.filter-modal-content{background:var(--grid-bg-primary);border-radius:var(--grid-radius-lg);box-shadow:0 20px 60px #00000059;width:90%;max-width:450px;max-height:90vh;overflow:hidden;animation:slideIn .3s cubic-bezier(.34,1.56,.64,1);border:1px solid var(--grid-border-light)}.filter-modal-header{padding:20px 24px;border-bottom:1px solid var(--grid-border-light);display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,var(--grid-primary-color) 0%,#6366f1 100%)}.filter-modal-header h3{margin:0;font-size:1.125rem;font-weight:600;color:#fff;display:flex;align-items:center;gap:8px}.filter-modal-header h3:before{content:\"\\1f50d\";font-size:1.2rem}.filter-modal-header .close-btn{background:#fff3;border:none;font-size:1.5rem;color:#fff;cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--grid-radius-sm);transition:all .2s ease}.filter-modal-header .close-btn:hover{background:#ffffff4d;transform:rotate(90deg)}.filter-modal-body{padding:24px}.filter-modal-body .form-group{margin-bottom:20px}.filter-modal-body .form-group label{display:block;margin-bottom:8px;font-weight:600;color:var(--grid-text-primary);font-size:.875rem;text-transform:uppercase;letter-spacing:.5px}.filter-modal-body .form-group .form-control{width:100%;padding:12px 14px;border:2px solid var(--grid-border-light);border-radius:var(--grid-radius-sm);background:var(--grid-bg-primary);color:var(--grid-text-primary);font-size:.9375rem;transition:all .2s ease}.filter-modal-body .form-group .form-control:focus{outline:none;border-color:var(--grid-primary-color);box-shadow:0 0 0 3px #4f46e51f;background:var(--grid-bg-primary)}.filter-modal-body .form-group .form-control:hover:not(:focus){border-color:var(--grid-border-dark)}.filter-modal-body .form-group select.form-control{cursor:pointer;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%234f46e5' d='M6 9L1 4h10z'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px;appearance:none}.filter-modal-body .form-group input.form-control::placeholder{color:var(--grid-text-tertiary);opacity:.6}.filter-modal-footer{padding:16px 20px;border-top:1px solid var(--grid-border-light);display:flex;gap:10px;justify-content:flex-end;background:var(--grid-bg-secondary);border-radius:0 0 var(--grid-radius-lg) var(--grid-radius-lg)}.filter-modal-footer button{padding:10px 20px;border-radius:var(--grid-radius-sm);font-weight:500;font-size:.875rem;cursor:pointer;transition:all .2s ease;border:none;min-width:80px}.filter-modal-footer button.btn-cancel{background:var(--grid-bg-primary);color:var(--grid-text-primary);border:1px solid var(--grid-border-light)}.filter-modal-footer button.btn-cancel:hover{background:var(--grid-bg-hover);border-color:var(--grid-border-dark)}.filter-modal-footer button.btn-clear{background:transparent;color:#ef4444;border:1px solid #ef4444}.filter-modal-footer button.btn-clear:hover{background:#ef44441a;border-color:#dc2626;color:#dc2626}.filter-modal-footer button.btn-apply{background:var(--grid-primary-color);color:#fff;border:1px solid var(--grid-primary-color)}.filter-modal-footer button.btn-apply:hover{background:#4338ca;transform:translateY(-1px);box-shadow:0 4px 12px #4f46e54d}.filter-modal-footer button.btn-apply:disabled{opacity:.5;cursor:not-allowed;transform:none}.filter-btn{background:transparent;border:none;cursor:pointer;padding:4px 6px;border-radius:var(--grid-radius-sm);font-size:.875rem;color:var(--grid-text-tertiary);transition:all .2s ease;opacity:.7;line-height:1;display:flex;align-items:center;justify-content:center}.filter-btn:hover{background:var(--grid-bg-hover);opacity:1;color:var(--grid-text-primary);transform:scale(1.1)}.filter-btn.active{color:var(--grid-primary-color);opacity:1;background:#4f46e51f}.filter-btn.active:hover{background:#4f46e52e}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:translateY(-30px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}.grid-body::-webkit-scrollbar{width:8px;height:8px}.grid-body::-webkit-scrollbar-track{background:var(--grid-bg-secondary)}.grid-body::-webkit-scrollbar-thumb{background:var(--grid-border-dark);border-radius:var(--grid-radius-md)}.grid-body::-webkit-scrollbar-thumb:hover{background:var(--grid-text-tertiary)}.checkbox-cell{display:flex;align-items:center;justify-content:center;padding:8px!important;flex:0 0 auto!important}.checkbox-cell .grid-checkbox{position:relative;appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer;width:20px;height:20px;border:2px solid var(--grid-border-dark);border-radius:var(--grid-radius-sm);background:var(--grid-bg-primary);transition:all .25s cubic-bezier(.4,0,.2,1);outline:none}.checkbox-cell .grid-checkbox:hover{border-color:var(--grid-primary-color);background:var(--grid-bg-hover);transform:scale(1.05);box-shadow:0 0 0 4px #4096ff14}.checkbox-cell .grid-checkbox:focus,.checkbox-cell .grid-checkbox:focus-visible{border-color:var(--grid-primary-color);box-shadow:0 0 0 4px #4096ff26}.checkbox-cell .grid-checkbox:checked{background:var(--grid-primary-color);border-color:var(--grid-primary-color)}.checkbox-cell .grid-checkbox:checked:before{content:\"\";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(45deg) scale(1);width:5px;height:10px;border:solid white;border-width:0 2px 2px 0;opacity:1}.checkbox-cell .grid-checkbox:checked:hover{background:var(--grid-primary-hover, #1677ff);border-color:var(--grid-primary-hover, #1677ff)}.checkbox-cell .grid-checkbox:indeterminate{background:var(--grid-primary-color);border-color:var(--grid-primary-color)}.checkbox-cell .grid-checkbox:indeterminate:before{content:\"\";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:10px;height:2px;background:#fff;border-radius:1px}.checkbox-cell .grid-checkbox:disabled{cursor:not-allowed;opacity:.5;background:var(--grid-bg-secondary);border-color:var(--grid-border-light)}.checkbox-cell .grid-checkbox:disabled:hover{transform:none;box-shadow:none}.checkbox-cell .grid-checkbox:before{transition:all .2s cubic-bezier(.4,0,.2,1);opacity:0}.checkbox-cell .header-checkbox{width:20px;height:20px;border-width:2px}.checkbox-cell .header-checkbox:checked:before{width:5px;height:10px;border-width:0 2.5px 2.5px 0}.checkbox-cell .row-checkbox{width:18px;height:18px}.checkbox-cell .row-checkbox:checked:before{width:4px;height:9px;border-width:0 2px 2px 0}.actions-cell{display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 12px!important;flex:0 0 auto!important}.actions-cell button{padding:6px 12px;border:1px solid var(--grid-border-dark);background:var(--grid-bg-primary);color:var(--grid-text-primary);border-radius:var(--grid-radius-sm);cursor:pointer;font-size:13px;font-weight:500;transition:var(--grid-transition-fast);white-space:nowrap}.actions-cell button:hover{background:var(--grid-bg-hover);border-color:var(--grid-primary-color);color:var(--grid-primary-color);transform:translateY(-1px)}.actions-cell button:active{transform:translateY(0)}.actions-cell button:focus{outline:2px solid var(--grid-primary-color);outline-offset:2px}.actions-cell button.btn-edit{color:var(--grid-primary-color);border-color:var(--grid-primary-color)}.actions-cell button.btn-edit:hover{background:var(--grid-primary-color);color:#fff}.actions-cell button.btn-delete{color:#ef4444;border-color:#ef4444}.actions-cell button.btn-delete:hover{background:#ef4444;color:#fff}.actions-cell button.btn-view{color:#10b981;border-color:#10b981}.actions-cell button.btn-view:hover{background:#10b981;color:#fff}.actions-cell button:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.actions-cell .icon-btn{padding:6px;min-width:32px;display:flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.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: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ThemeSelectorComponent, selector: "theme-selector", inputs: ["showSelector"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: DataGridComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nlabs-data-grid', standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                        GridColumnComponent,
+                        ThemeSelectorComponent
+                    ], providers: [GridDataService, ThemeService], template: "<div class=\"nlabs-data-grid\" [class.loading]=\"loading\">\n  <!-- Loading Overlay -->\n  @if (loading) {\n    <div class=\"grid-loading-overlay\">\n      <div class=\"spinner\"></div>\n    </div>\n  }\n\n\n  <!-- Grid Container -->\n  <div class=\"grid-container\">\n    <!-- Toolbar with Global Search, Export, Theme Selector -->\n    @if (config?.showHeader !== false) {\n      <div class=\"grid-toolbar\">\n        <div class=\"toolbar-left\">\n          <!-- Global Search -->\n          @if(showGlobalSearch()){\n            <div class=\"global-search\">\n              <input type=\"text\" class=\"global-search-input\" placeholder=\"\uD83D\uDD0D Search in all columns...\"\n                [(ngModel)]=\"globalSearchTerm\" (input)=\"onGlobalSearch($any($event.target).value)\" />\n              </div>\n            }\n          </div>\n          <div class=\"toolbar-center\">\n            <!-- Add Button -->\n            @if (showAddButton()) {\n              <button class=\"toolbar-btn btn-add\" (click)=\"onAddButtonClick()\" title=\"Add new record\">\n                \u2795 {{ addButtonText() }}\n              </button>\n            }\n            <!-- Export Buttons -->\n            @if (showExport()) {\n              <div class=\"export-buttons\">\n                <button class=\"toolbar-btn btn-export\" (click)=\"exportToExcel()\" title=\"Export to Excel/CSV\">\n                  \uD83D\uDCCA Excel\n                </button>\n                <button class=\"toolbar-btn btn-export\" (click)=\"exportToPDF()\" title=\"Export to PDF / Print\">\n                  \uD83D\uDCC4 PDF\n                </button>\n              </div>\n            }\n            <!-- Caption Command Template -->\n            @if (captionCommandTemplate()) {\n              <ng-container>\n                <ng-container *ngTemplateOutlet=\"captionCommandTemplate()!\"></ng-container>\n              </ng-container>\n            }\n          </div>\n          <div class=\"toolbar-right\">\n            <!-- Column Chooser -->\n            @if (showColumnChooser() && (config?.reorderable || config?.resizable)) {\n              <div class=\"column-chooser\">\n                <button class=\"column-chooser-btn btn-icon-only\" (click)=\"showColumnChooserModal = !showColumnChooserModal\"\n                  title=\"Show/Hide Columns\">\n                  \u2630\n                </button>\n                <!-- Backdrop -->\n                @if (showColumnChooserModal) {\n                  <div class=\"column-chooser-backdrop\" (click)=\"showColumnChooserModal = false\">\n                  </div>\n                }\n                @if (showColumnChooserModal) {\n                  <div class=\"column-chooser-panel\">\n                    <div class=\"column-chooser-header\">\n                      <span>Show/Hide Columns</span>\n                      <button (click)=\"showColumnChooserModal = false\">\u2715</button>\n                    </div>\n                    <div class=\"column-list\">\n                      @for (column of displayedColumns; track column) {\n                        <div class=\"column-item\">\n                          <label>\n                            <input type=\"checkbox\" [checked]=\"column.visible !== false\"\n                              (change)=\"toggleColumnVisibility(column)\" />\n                              <span>{{ column.header }}</span>\n                            </label>\n                          </div>\n                        }\n                      </div>\n                    </div>\n                  }\n                </div>\n              }\n              <theme-selector [showSelector]=\"showThemeSelector()\" />\n              <!-- Refresh Button -->\n              <button class=\"toolbar-btn btn-refresh btn-icon-only\" (click)=\"onRefreshClick()\" title=\"Refresh data\">\n                \uD83D\uDD04\n              </button>\n            </div>\n          </div>\n        }\n\n        <!-- Header -->\n        @if (config?.showHeader !== false) {\n          <div class=\"grid-header\" #gridHeader>\n            <div class=\"grid-row header-row\">\n              <!-- Checkbox Column Header -->\n              @if (config?.selectable && (config?.showCheckboxColumn !== false)) {\n                <div class=\"grid-cell header-cell checkbox-cell\"\n                  [style.width]=\"config?.checkboxColumnWidth || '60px'\"\n                  [style.min-width]=\"config?.checkboxColumnWidth || '60px'\"\n                  [style.max-width]=\"config?.checkboxColumnWidth || '60px'\">\n                  <div class=\"header-content\">\n                    @if (config?.multiSelect) {\n                      <input\n                        type=\"checkbox\"\n                        class=\"grid-checkbox header-checkbox\"\n                        [checked]=\"isAllSelected()\"\n                        [indeterminate]=\"isSomeSelected()\"\n                        (change)=\"toggleSelectAll($event)\"\n                        title=\"Select All\"\n                        />\n                      }\n                    </div>\n                  </div>\n                }\n\n                <!-- Regular Columns -->\n                @for (column of getVisibleColumns(); track column; let i = $index) {\n                  <div class=\"grid-cell header-cell\"\n                    [style.width]=\"column.width || 'auto'\" [style.min-width]=\"column.minWidth || '50px'\"\n                    [style.max-width]=\"column.maxWidth || 'none'\" [class.sortable]=\"column.sortable\"\n                    [class.dragging]=\"draggedColumn === column\" [class.drop-target]=\"dropTargetIndex === i\"\n                    [attr.draggable]=\"config?.reorderable\" (dragstart)=\"onDragStart($event, column, i)\"\n                    (dragover)=\"onColumnDragOver($event, i)\" (drop)=\"onColumnDrop($event, i)\" (dragend)=\"onColumnDragEnd()\"\n                    (click)=\"column.sortable && onSort(column)\">\n                    <div class=\"header-content\">\n                      <span class=\"header-title\">{{ column.header }}</span>\n                      <div class=\"header-actions\">\n                        @if (column.sortable) {\n                          <span class=\"sort-icon\">\n                            {{ getSortIcon(column) }}\n                          </span>\n                        }\n                        @if (column.filterable !== false && config?.filterable) {\n                          <button class=\"filter-btn\" [class.active]=\"isFilterActive(column)\"\n                            (click)=\"openFilterModal(column, $event)\" title=\"Filter\">\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"\n                              stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                              <polygon points=\"22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3\"></polygon>\n                            </svg>\n                          </button>\n                        }\n                      </div>\n                    </div>\n                    @if (column.resizable !== false && config?.resizable) {\n                      <span class=\"resize-handle\" (mousedown)=\"onResizeStart($event, column)\"></span>\n                    }\n                  </div>\n                }\n\n                <!-- Actions Column Header -->\n                @if (config?.showActions) {\n                  <div class=\"grid-cell header-cell actions-cell\"\n                    [style.width]=\"config?.actionsWidth || '150px'\"\n                    [style.min-width]=\"config?.actionsWidth || '150px'\"\n                    [style.max-width]=\"config?.actionsWidth || '150px'\">\n                    <div class=\"header-content\">\n                      <span class=\"header-title\">{{ config?.actionsHeader || 'Actions' }}</span>\n                    </div>\n                  </div>\n                }\n              </div>\n\n              <!-- Filter Row -->\n              @if (config?.filterable) {\n                <div class=\"grid-row filter-row\">\n                  <!-- Checkbox Column Filter (Empty) -->\n                  @if (config?.selectable && (config?.showCheckboxColumn !== false)) {\n                    <div class=\"grid-cell filter-cell checkbox-cell\"\n                      [style.width]=\"config?.checkboxColumnWidth || '60px'\"\n                      [style.min-width]=\"config?.checkboxColumnWidth || '60px'\"\n                      [style.max-width]=\"config?.checkboxColumnWidth || '60px'\">\n                    </div>\n                  }\n                  <!-- Regular Column Filters -->\n                  @for (column of getVisibleColumns(); track column.field) {\n                    <div class=\"grid-cell filter-cell\" [style.width]=\"column.width || 'auto'\"\n                      [style.min-width]=\"column.minWidth || '50px'\" [style.max-width]=\"column.maxWidth || 'none'\">\n                      @if (column.filterable !== false) {\n                        <input type=\"text\" class=\"filter-input\" [placeholder]=\"'Search ' + column.header\"\n                          [value]=\"getFilterValue(column)\" (input)=\"onFilter(column, $any($event.target).value)\"\n                          (click)=\"$event.stopPropagation()\" />\n                        }\n                      </div>\n                    }\n                    <!-- Actions Column Filter (Empty) -->\n                    @if (config?.showActions) {\n                      <div class=\"grid-cell filter-cell actions-cell\"\n                        [style.width]=\"config?.actionsWidth || '150px'\"\n                        [style.min-width]=\"config?.actionsWidth || '150px'\"\n                        [style.max-width]=\"config?.actionsWidth || '150px'\">\n                      </div>\n                    }\n                  </div>\n                }\n              </div>\n            }\n\n\n            <!-- Body -->\n            <div class=\"grid-body\" #gridBody>\n              @for (row of gridData; track trackByRow($index, row)) {\n                <div class=\"grid-row data-row\" [class.selected]=\"isRowSelected(row)\" [class.selectable]=\"config?.selectable\"\n                  [style.height]=\"config?.rowHeight\">\n\n                  <!-- Checkbox Column Cell -->\n                  @if (config?.selectable && (config?.showCheckboxColumn !== false)) {\n                    <div class=\"grid-cell data-cell checkbox-cell\"\n                      [style.width]=\"config?.checkboxColumnWidth || '60px'\"\n                      [style.min-width]=\"config?.checkboxColumnWidth || '60px'\"\n                      [style.max-width]=\"config?.checkboxColumnWidth || '60px'\">\n                      @if (checkboxTemplate) {\n                        <ng-container *ngTemplateOutlet=\"checkboxTemplate; context: { $implicit: row, selected: isRowSelected(row) }\"></ng-container>\n                      } @else {\n                        <input\n                          type=\"checkbox\"\n                          class=\"grid-checkbox row-checkbox\"\n                          [checked]=\"isRowSelected(row)\"\n                          (change)=\"onRowSelect(row, $event)\"\n                          (click)=\"$event.stopPropagation()\"\n                          />\n                        }\n                      </div>\n                    }\n\n                    <!-- Regular Data Columns -->\n                    @for (column of getVisibleColumns(); track column.field) {\n                      <div class=\"grid-cell data-cell\" [style.width]=\"column.width || 'auto'\"\n                        [style.min-width]=\"column.minWidth || '50px'\" [style.max-width]=\"column.maxWidth || 'none'\"\n                        [attr.data-type]=\"column.type\">\n                        @if (!column.cellTemplate) {\n                          {{ getCellValue(row, column) }}\n                        }\n                        @if (column.cellTemplate) {\n                          <ng-container\n                          *ngTemplateOutlet=\"column.cellTemplate; context: { $implicit: row, column: column }\"></ng-container>\n                        }\n                      </div>\n                    }\n\n                    <!-- Actions Column Cell -->\n                    @if (config?.showActions) {\n                      <div class=\"grid-cell data-cell actions-cell\"\n                        [style.width]=\"config?.actionsWidth || '150px'\"\n                        [style.min-width]=\"config?.actionsWidth || '150px'\"\n                        [style.max-width]=\"config?.actionsWidth || '150px'\">\n                        @if (actionsTemplate) {\n                          <ng-container *ngTemplateOutlet=\"actionsTemplate; context: { $implicit: row }\"></ng-container>\n                        }\n                      </div>\n                    }\n                  </div>\n                }\n\n\n                <!-- Empty State -->\n                @if (gridData.length === 0 && !loading) {\n                  <div class=\"grid-empty\">\n                    <p>{{ config?.emptyMessage || 'No records found' }}</p>\n                  </div>\n                }\n\n              </div>\n\n              <!-- Footer / Pagination -->\n              @if (config?.showFooter !== false) {\n                <div class=\"grid-footer\">\n                  <div class=\"pagination-info\">\n                    <span>\n                      Showing {{ pagination.page * pagination.pageSize + 1 }} to\n                      {{ Math.min((pagination.page + 1) * pagination.pageSize, pagination.totalRecords) }}\n                      of {{ pagination.totalRecords }} entries\n                    </span>\n                  </div>\n\n                  <div class=\"pagination-controls\">\n                    <!-- Page Size Selector -->\n                    @if (config?.pageSizeOptions; as pageSizeOptions) {\n                      <div class=\"page-size-selector\">\n                        <label>Rows per page:</label>\n                        <select [value]=\"pagination.pageSize\" (change)=\"onPageSizeChange(+$any($event.target).value)\"\n                          class=\"page-size-select\">\n                          @for (size of pageSizeOptions; track $index) {\n                            <option [value]=\"size\">\n                              {{ size }}\n                            </option>\n                          }\n                        </select>\n                      </div>\n                    }\n\n                    <!-- Page Navigation -->\n                    <div class=\"page-navigation\">\n                      <button class=\"page-btn\" [disabled]=\"pagination.page === 0\" (click)=\"onPageChange(0)\" title=\"First page\">\n                        \u27EA\n                      </button>\n                      <button class=\"page-btn\" [disabled]=\"pagination.page === 0\" (click)=\"onPageChange(pagination.page - 1)\"\n                        title=\"Previous page\">\n                        \u2039\n                      </button>\n\n                      @for (pageNum of getPageNumbers(); track pageNum) {\n                        @if (pageNum !== -1) {\n                          <button class=\"page-btn\" [class.active]=\"pageNum === pagination.page\" (click)=\"onPageChange(pageNum)\">\n                            {{ pageNum + 1 }}\n                          </button>\n                        }\n                        @if (pageNum === -1) {\n                          <span class=\"page-ellipsis\">...</span>\n                        }\n                      }\n\n                      <button class=\"page-btn\" [disabled]=\"pagination.page >= pagination.totalPages - 1\"\n                        (click)=\"onPageChange(pagination.page + 1)\" title=\"Next page\">\n                        \u203A\n                      </button>\n                      <button class=\"page-btn\" [disabled]=\"pagination.page >= pagination.totalPages - 1\"\n                        (click)=\"onPageChange(pagination.totalPages - 1)\" title=\"Last page\">\n                        \u27EB\n                      </button>\n                    </div>\n                  </div>\n\n                  <!-- Custom Footer Template -->\n                  @if (footerTemplate()) {\n                    <div class=\"grid-custom-footer\">\n                      <ng-container\n                      *ngTemplateOutlet=\"footerTemplate()!; context: { $implicit: gridData, total: pagination.totalRecords }\"></ng-container>\n                    </div>\n                  }\n                </div>\n              }\n\n            </div>\n          </div>\n\n          <!-- Filter Modal -->\n          @if (showFilterModal) {\n            <div class=\"filter-modal-overlay\" (click)=\"closeFilterModal()\">\n              <div class=\"filter-modal-content\" (click)=\"$event.stopPropagation()\">\n                <div class=\"filter-modal-header\">\n                  <h3>Filter: {{ currentFilterColumn?.header }}</h3>\n                  <button class=\"close-btn\" (click)=\"closeFilterModal()\">\u00D7</button>\n                </div>\n\n                <div class=\"filter-modal-body\">\n                  <div class=\"filter-form\">\n                    <!-- Operator Selection - STRING -->\n                    @if (!currentFilterColumn?.filterType || currentFilterColumn?.filterType === 'text') {\n                      <div class=\"form-group\">\n                        <label>Operator:</label>\n                        <select [(ngModel)]=\"currentFilterOperator\" class=\"form-control\">\n                          <option value=\"contains\">Contains (\u0130\u00E7erir)</option>\n                          <option value=\"notContains\">Not Contains (\u0130\u00E7ermez)</option>\n                          <option value=\"equals\">Equals (E\u015Fittir)</option>\n                          <option value=\"notEquals\">Not Equals (E\u015Fit De\u011Fil)</option>\n                          <option value=\"startsWith\">Starts With (\u0130le Ba\u015Flar)</option>\n                          <option value=\"endsWith\">Ends With (\u0130le Biter)</option>\n                          <option value=\"isEmpty\">Is Empty (Bo\u015F)</option>\n                          <option value=\"isNotEmpty\">Is Not Empty (Bo\u015F De\u011Fil)</option>\n                        </select>\n                      </div>\n                    }\n\n                    <!-- Operator Selection - NUMBER -->\n                    @if (currentFilterColumn?.filterType === 'number') {\n                      <div class=\"form-group\">\n                        <label>Operator:</label>\n                        <select [(ngModel)]=\"currentFilterOperator\" class=\"form-control\">\n                          <option value=\"equals\">Equals (E\u015Fittir)</option>\n                          <option value=\"notEquals\">Not Equals (E\u015Fit De\u011Fil)</option>\n                          <option value=\"lt\">Less Than (K\u00FC\u00E7\u00FCkt\u00FCr)</option>\n                          <option value=\"lte\">Less Than or Equal (K\u00FC\u00E7\u00FCk E\u015Fit)</option>\n                          <option value=\"gt\">Greater Than (B\u00FCy\u00FCkt\u00FCr)</option>\n                          <option value=\"gte\">Greater Than or Equal (B\u00FCy\u00FCk E\u015Fit)</option>\n                          <option value=\"isEmpty\">Is Empty (Bo\u015F)</option>\n                          <option value=\"isNotEmpty\">Is Not Empty (Bo\u015F De\u011Fil)</option>\n                        </select>\n                      </div>\n                    }\n\n                    <!-- Operator Selection - DATE -->\n                    @if (currentFilterColumn?.filterType === 'date') {\n                      <div class=\"form-group\">\n                        <label>Operator:</label>\n                        <select [(ngModel)]=\"currentFilterOperator\" class=\"form-control\">\n                          <option value=\"equals\">On Date (Tarihte)</option>\n                          <option value=\"notEquals\">Not On Date (Tarihte De\u011Fil)</option>\n                          <option value=\"lt\">Before (\u00D6nce)</option>\n                          <option value=\"lte\">On or Before (Veya \u00D6nce)</option>\n                          <option value=\"gt\">After (Sonra)</option>\n                          <option value=\"gte\">On or After (Veya Sonra)</option>\n                          <option value=\"isEmpty\">Is Empty (Bo\u015F)</option>\n                          <option value=\"isNotEmpty\">Is Not Empty (Bo\u015F De\u011Fil)</option>\n                        </select>\n                      </div>\n                    }\n\n                    <!-- Value Input - TEXT -->\n                    @if ((!currentFilterColumn?.filterType || currentFilterColumn?.filterType === 'text') && currentFilterOperator\n                      !== 'isEmpty' && currentFilterOperator !== 'isNotEmpty') {\n                      <div class=\"form-group\">\n                        <label>Value:</label>\n                        <input type=\"text\" [(ngModel)]=\"filterValue\" class=\"form-control\" placeholder=\"Enter text...\"\n                          (keyup.enter)=\"applyFilterModal()\" />\n                        </div>\n                      }\n\n                      <!-- Value Input - NUMBER -->\n                      @if (currentFilterColumn?.filterType === 'number' && currentFilterOperator !== 'isEmpty' &&\n                        currentFilterOperator !== 'isNotEmpty') {\n                        <div class=\"form-group\">\n                          <label>Value:</label>\n                          <input type=\"number\" [(ngModel)]=\"filterValue\" class=\"form-control\" placeholder=\"Enter number...\"\n                            (keyup.enter)=\"applyFilterModal()\" />\n                          </div>\n                        }\n\n                        <!-- Value Input - DATE -->\n                        @if (currentFilterColumn?.filterType === 'date' && currentFilterOperator !== 'isEmpty' && currentFilterOperator\n                          !== 'isNotEmpty') {\n                          <div class=\"form-group\">\n                            <label>Value:</label>\n                            <input type=\"date\" [(ngModel)]=\"filterValue\" class=\"form-control\" (keyup.enter)=\"applyFilterModal()\" />\n                          </div>\n                        }\n\n\n                        @if (currentFilterOperator === 'isEmpty' || currentFilterOperator === 'isNotEmpty') {\n                          <div class=\"form-group\">\n                            <p\n                              style=\"padding: 12px; background: var(--grid-bg-secondary); border-radius: var(--grid-radius-sm); color: var(--grid-text-secondary); font-size: 0.875rem;\">\n                              \u2139\uFE0F Bu operat\u00F6r i\u00E7in de\u011Fer girmeye gerek yok.\n                            </p>\n                          </div>\n                        }\n\n                      </div>\n                    </div>\n\n                    <div class=\"filter-modal-footer\">\n                      <button class=\"btn-cancel\" (click)=\"closeFilterModal()\">Cancel</button>\n                      <button class=\"btn-clear\" (click)=\"clearFilterModal()\">Clear Filter</button>\n                      <button class=\"btn-apply\" (click)=\"applyFilterModal()\">Apply</button>\n                    </div>\n                  </div>\n                </div>\n              }", styles: ["@charset \"UTF-8\";:root{--grid-primary-color: #4096ff;--grid-primary-hover: #1677ff;--grid-primary-light: rgba(64, 150, 255, .1);--grid-bg-primary: #ffffff;--grid-bg-secondary: #fafafa;--grid-bg-hover: #f5f9ff;--grid-bg-selected: #e6f4ff;--grid-bg-selected-hover: #d9ecff;--grid-text-primary: #262626;--grid-text-secondary: #595959;--grid-text-tertiary: #8c8c8c;--grid-text-disabled: #bfbfbf;--grid-text-placeholder: #bfbfbf;--grid-border-color: #d9d9d9;--grid-border-light: #e8e8e8;--grid-border-dark: #e0e0e0;--grid-shadow-sm: 0 2px 8px rgba(0, 0, 0, .1);--grid-shadow-md: 0 4px 12px rgba(0, 0, 0, .15);--grid-shadow-lg: 0 6px 16px rgba(0, 0, 0, .12);--grid-shadow-color: rgba(0, 0, 0, .1);--grid-success-color: #52c41a;--grid-warning-color: #faad14;--grid-error-color: #ff4d4f;--grid-info-color: #1890ff;--grid-transition: all .3s ease;--grid-transition-fast: all .2s ease;--grid-transition-normal: all .3s ease;--grid-radius-sm: 4px;--grid-radius-md: 6px;--grid-radius-lg: 8px;--grid-header-bg: linear-gradient(180deg, #fafafa 0%, #f5f5f5 100%);--grid-footer-bg: #fafafa}[data-theme=dark],.dark-theme{--grid-primary-color: #1890ff;--grid-primary-hover: #40a9ff;--grid-primary-light: rgba(24, 144, 255, .2);--grid-bg-primary: #1a1a1a;--grid-bg-secondary: #0a0a0a;--grid-bg-hover: #2a2a2a;--grid-bg-selected: #111b26;--grid-bg-selected-hover: #0d1520;--grid-text-primary: #e8e8e8;--grid-text-secondary: #bfbfbf;--grid-text-tertiary: #8c8c8c;--grid-text-disabled: #595959;--grid-text-placeholder: #595959;--grid-border-color: #434343;--grid-border-light: #303030;--grid-border-dark: #4a4a4a;--grid-shadow-sm: 0 2px 8px rgba(0, 0, 0, .45);--grid-shadow-md: 0 4px 12px rgba(0, 0, 0, .55);--grid-shadow-lg: 0 6px 16px rgba(0, 0, 0, .65);--grid-shadow-color: rgba(0, 0, 0, .5);--grid-success-color: #49aa19;--grid-warning-color: #d89614;--grid-error-color: #d32029;--grid-info-color: #177ddc;--grid-header-bg: linear-gradient(180deg, #1f1f1f 0%, #1a1a1a 100%);--grid-footer-bg: #1f1f1f}*{transition:background-color .3s ease,color .3s ease,border-color .3s ease}body{background-color:var(--grid-bg-primary);color:var(--grid-text-primary);transition:background-color .3s ease,color .3s ease}.flexi-data-grid{position:relative;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;color:var(--grid-text-primary);background:var(--grid-bg-primary);border-radius:var(--grid-radius-lg);box-shadow:var(--grid-shadow-sm);overflow:hidden}.flexi-data-grid.loading{pointer-events:none}.grid-loading-overlay{position:absolute;inset:0;background:var(--grid-bg-primary);opacity:.95;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1000;gap:12px}.grid-loading-overlay .spinner{width:40px;height:40px;border:4px solid var(--grid-border-light);border-top:4px solid var(--grid-primary-color);border-radius:50%;animation:spin 1s cubic-bezier(.5,0,.5,1) infinite}.grid-loading-overlay:after{content:\"Loading...\";color:var(--grid-text-secondary);font-size:14px;font-weight:500}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.grid-container{display:flex;flex-direction:column;width:100%;min-height:400px;position:relative}.grid-toolbar{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:var(--grid-header-bg);border-bottom:1px solid var(--grid-border-dark);gap:16px;flex-wrap:wrap}.grid-toolbar .toolbar-left{display:flex;flex:0 0 auto;align-items:center;gap:12px;flex-wrap:wrap}.grid-toolbar .toolbar-center{display:flex;flex:1 1 auto;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}.grid-toolbar .toolbar-right{display:flex;flex:0 0 auto;align-items:center;gap:4px;flex-wrap:wrap}.global-search{flex:1;min-width:200px;max-width:400px}.global-search .global-search-input{width:100%;padding:8px 12px;border:1px solid var(--grid-border-color);border-radius:var(--grid-radius-md);font-size:14px;background:var(--grid-bg-primary);color:var(--grid-text-primary);transition:var(--grid-transition-fast)}.global-search .global-search-input:focus{outline:none;border-color:var(--grid-primary-color);box-shadow:0 0 0 2px var(--grid-primary-light)}.global-search .global-search-input::placeholder{color:var(--grid-text-placeholder)}.toolbar-btn{padding:8px 16px;border:1px solid var(--grid-border-color);border-radius:var(--grid-radius-md);font-size:13px;font-weight:500;cursor:pointer;background:var(--grid-bg-primary);color:var(--grid-text-primary);transition:var(--grid-transition-fast);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}.toolbar-btn:hover{border-color:var(--grid-primary-color);color:var(--grid-primary-color);transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}.toolbar-btn:active{transform:translateY(0)}.toolbar-btn.btn-add{background:var(--grid-success-color);color:#fff;border-color:var(--grid-success-color)}.toolbar-btn.btn-add:hover{opacity:.9;color:#fff}.toolbar-btn.btn-export:hover{background:var(--grid-primary-light)}.toolbar-btn.btn-icon-only{padding:10px;font-size:20px;line-height:1}.toolbar-btn.btn-icon-only:hover{background:var(--grid-primary-light)}.export-buttons{display:flex;gap:8px}.column-chooser{position:relative;padding:12px 16px;background:var(--grid-header-bg);border-bottom:1px solid var(--grid-border-dark)}.column-chooser .column-chooser-btn{padding:8px 16px;background:var(--grid-bg-primary);border:1px solid var(--grid-border-color);border-radius:var(--grid-radius-md);cursor:pointer;font-size:13px;font-weight:500;color:var(--grid-text-primary);transition:var(--grid-transition-fast);display:inline-flex;align-items:center;gap:6px;box-shadow:var(--grid-shadow-sm)}.column-chooser .column-chooser-btn.btn-icon-only{padding:10px;font-size:20px;line-height:1}.column-chooser .column-chooser-btn:hover{border-color:var(--grid-primary-color);color:var(--grid-primary-color);box-shadow:0 2px 4px var(--grid-primary-light);transform:translateY(-1px)}.column-chooser .column-chooser-btn:active{transform:translateY(0);box-shadow:0 1px 2px #0000000d}.column-chooser .column-chooser-backdrop{position:fixed;inset:0;background:transparent;z-index:999}.column-chooser .column-chooser-panel{position:absolute;top:calc(100% + 4px);left:16px;margin-top:4px;background:var(--grid-bg-primary);border:1px solid var(--grid-border-color);border-radius:var(--grid-radius-lg);box-shadow:var(--grid-shadow-lg);z-index:1000;min-width:280px;max-width:400px;animation:slideDown .2s ease}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.column-chooser .column-chooser-panel .column-chooser-header{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--grid-border-light);font-weight:600;font-size:14px;color:var(--grid-text-primary);background:var(--grid-header-bg);border-radius:var(--grid-radius-lg) var(--grid-radius-lg) 0 0}.column-chooser .column-chooser-panel .column-chooser-header button{background:none;border:none;cursor:pointer;font-size:18px;padding:0;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:var(--grid-radius-md);color:var(--grid-text-tertiary);transition:var(--grid-transition-fast)}.column-chooser .column-chooser-panel .column-chooser-header button:hover{background:var(--grid-bg-hover);color:var(--grid-text-primary)}.column-chooser .column-chooser-panel .column-chooser-header button:active{background:var(--grid-bg-selected)}.column-chooser .column-chooser-panel .column-list{max-height:400px;overflow-y:auto;padding:8px 0;display:grid;grid-template-columns:repeat(3,1fr);gap:4px}.column-chooser .column-chooser-panel .column-item{padding:10px 16px;transition:var(--grid-transition-fast);margin:0 8px;border-radius:var(--grid-radius-md)}.column-chooser .column-chooser-panel .column-item:hover{background:var(--grid-bg-hover)}.column-chooser .column-chooser-panel .column-item label{display:flex;align-items:center;gap:10px;cursor:pointer;margin:0;-webkit-user-select:none;user-select:none}.column-chooser .column-chooser-panel .column-item label input[type=checkbox]{cursor:pointer;width:16px;height:16px;accent-color:var(--grid-primary-color)}.column-chooser .column-chooser-panel .column-item label span{flex:1;font-size:13px;color:var(--grid-text-primary)}.grid-row{display:flex;width:100%;border-bottom:1px solid var(--grid-border-light);min-width:fit-content}.grid-row:last-child{border-bottom:none}.grid-cell{flex:1 1 0;min-width:0;padding:12px 16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;box-sizing:border-box}.grid-cell[style*=width]{flex:0 0 auto}.grid-header{background:var(--grid-header-bg);border-bottom:2px solid var(--grid-border-dark);overflow-x:auto;overflow-y:hidden}.grid-header::-webkit-scrollbar{display:none}.grid-header{-ms-overflow-style:none;scrollbar-width:none}.grid-header .header-row{border-bottom:none}.grid-header .header-cell{font-weight:600;color:var(--grid-text-primary);cursor:default;-webkit-user-select:none;user-select:none;position:relative;transition:var(--grid-transition-fast)}.grid-header .header-cell.sortable{cursor:pointer}.grid-header .header-cell.sortable:hover{background-color:var(--grid-bg-hover)}.grid-header .header-cell.dragging{opacity:.4;background-color:var(--grid-primary-light);cursor:grabbing!important;transform:scale(.98);box-shadow:var(--grid-shadow-md)}.grid-header .header-cell.drop-target{border-left:4px solid var(--grid-primary-color);background-color:var(--grid-primary-light)}.grid-header .header-cell.drop-target:before{content:\"\";position:absolute;left:-4px;top:0;bottom:0;width:4px;background:var(--grid-primary-color);box-shadow:0 0 8px var(--grid-primary-light)}.grid-header .header-cell[draggable=true]{cursor:grab;transition:var(--grid-transition-fast)}.grid-header .header-cell[draggable=true]:hover{background-color:var(--grid-primary-light)}.grid-header .header-cell[draggable=true]:active{cursor:grabbing}.grid-header .header-cell.resizing{-webkit-user-select:none;user-select:none;cursor:col-resize;background-color:var(--grid-primary-light)}.grid-header .header-cell.resizing .resize-handle{opacity:1;background-color:var(--grid-primary-light)}.grid-header .header-cell.resizing .resize-handle:after{background-color:var(--grid-primary-color);box-shadow:0 0 8px var(--grid-primary-light);width:4px}.grid-header .header-cell .header-content{display:flex;align-items:center;justify-content:space-between;flex:1;gap:8px}.grid-header .header-cell .header-title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.grid-header .header-cell .header-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}.grid-header .header-cell .sort-icon{color:var(--grid-text-tertiary);font-size:14px;font-weight:700;transition:var(--grid-transition-fast);opacity:.7}.header-cell.sortable:hover .grid-header .header-cell .sort-icon{opacity:1;color:var(--grid-primary-color)}.grid-header .header-cell .resize-handle{position:absolute;right:-6px;top:0;bottom:0;width:16px;cursor:col-resize;-webkit-user-select:none;user-select:none;z-index:10;display:flex;align-items:center;justify-content:center;opacity:.7;transition:var(--grid-transition-fast)}.grid-header .header-cell .resize-handle:hover{opacity:1;background-color:var(--grid-primary-light)}.grid-header .header-cell .resize-handle:before{content:\"\\22ee\";color:var(--grid-text-secondary);font-size:18px;font-weight:700;line-height:1;text-shadow:0 1px 2px var(--grid-shadow-color)}.grid-header .header-cell .resize-handle:hover:before{color:var(--grid-primary-color)}.grid-header .header-cell .resize-handle:after{content:\"\";position:absolute;right:6px;top:10%;bottom:10%;width:3px;background-color:var(--grid-border-color);border-radius:var(--grid-radius-sm);transition:var(--grid-transition-fast)}.grid-header .header-cell .resize-handle:hover:after{background-color:var(--grid-primary-color);box-shadow:0 0 4px var(--grid-primary-light)}.grid-header .filter-row{background:var(--grid-bg-secondary);border-top:1px solid var(--grid-border-light)}.grid-header .filter-row .filter-cell{padding:6px 10px}.grid-header .filter-row .filter-input{width:100%;padding:8px 12px;border:1px solid var(--grid-border-light);border-radius:var(--grid-radius-sm);font-size:13px;transition:all .2s ease;background-color:var(--grid-bg-primary);color:var(--grid-text-primary)}.grid-header .filter-row .filter-input:hover{border-color:var(--grid-primary-color)}.grid-header .filter-row .filter-input:focus{outline:none;border-color:var(--grid-primary-color);box-shadow:0 0 0 3px #4f46e51a}.grid-header .filter-row .filter-input::placeholder{color:var(--grid-text-tertiary);font-size:12px;opacity:.7}.grid-body{flex:1;overflow-x:auto;overflow-y:auto;min-height:200px;background:var(--grid-bg-primary)}.grid-body .data-row{transition:var(--grid-transition-fast);border-left:3px solid transparent}.grid-body .data-row:hover{background-color:var(--grid-bg-hover);border-left-color:var(--grid-primary-light);box-shadow:inset 0 0 0 1px var(--grid-primary-light)}.grid-body .data-row.selectable{cursor:pointer}.grid-body .data-row.selectable:active{background-color:var(--grid-bg-selected)}.grid-body .data-row.selected{background-color:var(--grid-bg-selected);border-left-color:var(--grid-primary-color)}.grid-body .data-row.selected:hover{background-color:var(--grid-bg-selected-hover)}.grid-body .data-row .data-cell{color:var(--grid-text-primary);font-size:13px;transition:var(--grid-transition-fast)}.grid-body .data-row .data-cell[data-type=number]{justify-content:flex-end;text-align:right;font-variant-numeric:tabular-nums}.grid-body .data-row .data-cell[data-type=boolean]{justify-content:center}.grid-body .data-row .data-cell[data-type=date]{font-variant-numeric:tabular-nums}.grid-body .grid-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:300px;color:var(--grid-text-tertiary);font-size:14px;padding:40px 20px}.grid-body .grid-empty:before{content:\"\\1f4c2\";font-size:48px;margin-bottom:16px;opacity:.5}.grid-body .grid-empty p{margin:0;font-weight:500}.grid-footer{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--grid-header-bg);border-top:1px solid var(--grid-border-light);flex-wrap:wrap;gap:12px}.grid-footer .pagination-info{font-size:13px;color:var(--grid-text-secondary)}.grid-footer .pagination-controls{display:flex;align-items:center;gap:16px}.grid-footer .page-size-selector{display:flex;align-items:center;gap:8px;font-size:13px}.grid-footer .page-size-selector label{color:var(--grid-text-secondary);margin:0}.grid-footer .page-size-selector .page-size-select{padding:4px 8px;border:1px solid var(--grid-border-color);border-radius:var(--grid-radius-md);font-size:13px;cursor:pointer;transition:var(--grid-transition-normal);background-color:var(--grid-bg-primary);color:var(--grid-text-primary)}.grid-footer .page-size-selector .page-size-select:focus{outline:none;border-color:var(--grid-primary-color);box-shadow:0 0 0 2px var(--grid-primary-light)}.grid-footer .page-navigation{display:flex;gap:4px}.grid-footer .page-navigation .page-btn{min-width:32px;height:32px;padding:0 8px;border:1px solid var(--grid-border-color);background:var(--grid-bg-primary);color:var(--grid-text-secondary);font-size:13px;border-radius:var(--grid-radius-md);cursor:pointer;transition:var(--grid-transition-normal);display:flex;align-items:center;justify-content:center}.grid-footer .page-navigation .page-btn:hover:not(:disabled){border-color:var(--grid-primary-color);color:var(--grid-primary-color)}.grid-footer .page-navigation .page-btn.active{background:var(--grid-primary-color);color:#fff;border-color:var(--grid-primary-color);font-weight:600}.grid-footer .page-navigation .page-btn:disabled{cursor:not-allowed;opacity:.5}.grid-footer .page-navigation .page-ellipsis{display:flex;align-items:center;padding:0 4px;color:var(--grid-text-tertiary)}.grid-custom-footer{padding:16px;background:var(--grid-bg-secondary);border-top:2px solid var(--grid-border-color);color:var(--grid-text-primary)}@media(max-width:768px){.grid-footer{flex-direction:column;align-items:stretch}.grid-footer .pagination-info{text-align:center}.grid-footer .pagination-controls{flex-direction:column;align-items:stretch}.grid-footer .page-navigation{justify-content:center}}.filter-modal-overlay{position:fixed;inset:0;background:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .25s ease-out}.filter-modal-content{background:var(--grid-bg-primary);border-radius:var(--grid-radius-lg);box-shadow:0 20px 60px #00000059;width:90%;max-width:450px;max-height:90vh;overflow:hidden;animation:slideIn .3s cubic-bezier(.34,1.56,.64,1);border:1px solid var(--grid-border-light)}.filter-modal-header{padding:20px 24px;border-bottom:1px solid var(--grid-border-light);display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,var(--grid-primary-color) 0%,#6366f1 100%)}.filter-modal-header h3{margin:0;font-size:1.125rem;font-weight:600;color:#fff;display:flex;align-items:center;gap:8px}.filter-modal-header h3:before{content:\"\\1f50d\";font-size:1.2rem}.filter-modal-header .close-btn{background:#fff3;border:none;font-size:1.5rem;color:#fff;cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--grid-radius-sm);transition:all .2s ease}.filter-modal-header .close-btn:hover{background:#ffffff4d;transform:rotate(90deg)}.filter-modal-body{padding:24px}.filter-modal-body .form-group{margin-bottom:20px}.filter-modal-body .form-group label{display:block;margin-bottom:8px;font-weight:600;color:var(--grid-text-primary);font-size:.875rem;text-transform:uppercase;letter-spacing:.5px}.filter-modal-body .form-group .form-control{width:100%;padding:12px 14px;border:2px solid var(--grid-border-light);border-radius:var(--grid-radius-sm);background:var(--grid-bg-primary);color:var(--grid-text-primary);font-size:.9375rem;transition:all .2s ease}.filter-modal-body .form-group .form-control:focus{outline:none;border-color:var(--grid-primary-color);box-shadow:0 0 0 3px #4f46e51f;background:var(--grid-bg-primary)}.filter-modal-body .form-group .form-control:hover:not(:focus){border-color:var(--grid-border-dark)}.filter-modal-body .form-group select.form-control{cursor:pointer;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%234f46e5' d='M6 9L1 4h10z'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px;appearance:none}.filter-modal-body .form-group input.form-control::placeholder{color:var(--grid-text-tertiary);opacity:.6}.filter-modal-footer{padding:16px 20px;border-top:1px solid var(--grid-border-light);display:flex;gap:10px;justify-content:flex-end;background:var(--grid-bg-secondary);border-radius:0 0 var(--grid-radius-lg) var(--grid-radius-lg)}.filter-modal-footer button{padding:10px 20px;border-radius:var(--grid-radius-sm);font-weight:500;font-size:.875rem;cursor:pointer;transition:all .2s ease;border:none;min-width:80px}.filter-modal-footer button.btn-cancel{background:var(--grid-bg-primary);color:var(--grid-text-primary);border:1px solid var(--grid-border-light)}.filter-modal-footer button.btn-cancel:hover{background:var(--grid-bg-hover);border-color:var(--grid-border-dark)}.filter-modal-footer button.btn-clear{background:transparent;color:#ef4444;border:1px solid #ef4444}.filter-modal-footer button.btn-clear:hover{background:#ef44441a;border-color:#dc2626;color:#dc2626}.filter-modal-footer button.btn-apply{background:var(--grid-primary-color);color:#fff;border:1px solid var(--grid-primary-color)}.filter-modal-footer button.btn-apply:hover{background:#4338ca;transform:translateY(-1px);box-shadow:0 4px 12px #4f46e54d}.filter-modal-footer button.btn-apply:disabled{opacity:.5;cursor:not-allowed;transform:none}.filter-btn{background:transparent;border:none;cursor:pointer;padding:4px 6px;border-radius:var(--grid-radius-sm);font-size:.875rem;color:var(--grid-text-tertiary);transition:all .2s ease;opacity:.7;line-height:1;display:flex;align-items:center;justify-content:center}.filter-btn:hover{background:var(--grid-bg-hover);opacity:1;color:var(--grid-text-primary);transform:scale(1.1)}.filter-btn.active{color:var(--grid-primary-color);opacity:1;background:#4f46e51f}.filter-btn.active:hover{background:#4f46e52e}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:translateY(-30px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}.grid-body::-webkit-scrollbar{width:8px;height:8px}.grid-body::-webkit-scrollbar-track{background:var(--grid-bg-secondary)}.grid-body::-webkit-scrollbar-thumb{background:var(--grid-border-dark);border-radius:var(--grid-radius-md)}.grid-body::-webkit-scrollbar-thumb:hover{background:var(--grid-text-tertiary)}.checkbox-cell{display:flex;align-items:center;justify-content:center;padding:8px!important;flex:0 0 auto!important}.checkbox-cell .grid-checkbox{position:relative;appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer;width:20px;height:20px;border:2px solid var(--grid-border-dark);border-radius:var(--grid-radius-sm);background:var(--grid-bg-primary);transition:all .25s cubic-bezier(.4,0,.2,1);outline:none}.checkbox-cell .grid-checkbox:hover{border-color:var(--grid-primary-color);background:var(--grid-bg-hover);transform:scale(1.05);box-shadow:0 0 0 4px #4096ff14}.checkbox-cell .grid-checkbox:focus,.checkbox-cell .grid-checkbox:focus-visible{border-color:var(--grid-primary-color);box-shadow:0 0 0 4px #4096ff26}.checkbox-cell .grid-checkbox:checked{background:var(--grid-primary-color);border-color:var(--grid-primary-color)}.checkbox-cell .grid-checkbox:checked:before{content:\"\";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(45deg) scale(1);width:5px;height:10px;border:solid white;border-width:0 2px 2px 0;opacity:1}.checkbox-cell .grid-checkbox:checked:hover{background:var(--grid-primary-hover, #1677ff);border-color:var(--grid-primary-hover, #1677ff)}.checkbox-cell .grid-checkbox:indeterminate{background:var(--grid-primary-color);border-color:var(--grid-primary-color)}.checkbox-cell .grid-checkbox:indeterminate:before{content:\"\";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:10px;height:2px;background:#fff;border-radius:1px}.checkbox-cell .grid-checkbox:disabled{cursor:not-allowed;opacity:.5;background:var(--grid-bg-secondary);border-color:var(--grid-border-light)}.checkbox-cell .grid-checkbox:disabled:hover{transform:none;box-shadow:none}.checkbox-cell .grid-checkbox:before{transition:all .2s cubic-bezier(.4,0,.2,1);opacity:0}.checkbox-cell .header-checkbox{width:20px;height:20px;border-width:2px}.checkbox-cell .header-checkbox:checked:before{width:5px;height:10px;border-width:0 2.5px 2.5px 0}.checkbox-cell .row-checkbox{width:18px;height:18px}.checkbox-cell .row-checkbox:checked:before{width:4px;height:9px;border-width:0 2px 2px 0}.actions-cell{display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 12px!important;flex:0 0 auto!important}.actions-cell button{padding:6px 12px;border:1px solid var(--grid-border-dark);background:var(--grid-bg-primary);color:var(--grid-text-primary);border-radius:var(--grid-radius-sm);cursor:pointer;font-size:13px;font-weight:500;transition:var(--grid-transition-fast);white-space:nowrap}.actions-cell button:hover{background:var(--grid-bg-hover);border-color:var(--grid-primary-color);color:var(--grid-primary-color);transform:translateY(-1px)}.actions-cell button:active{transform:translateY(0)}.actions-cell button:focus{outline:2px solid var(--grid-primary-color);outline-offset:2px}.actions-cell button.btn-edit{color:var(--grid-primary-color);border-color:var(--grid-primary-color)}.actions-cell button.btn-edit:hover{background:var(--grid-primary-color);color:#fff}.actions-cell button.btn-delete{color:#ef4444;border-color:#ef4444}.actions-cell button.btn-delete:hover{background:#ef4444;color:#fff}.actions-cell button.btn-view{color:#10b981;border-color:#10b981}.actions-cell button.btn-view:hover{background:#10b981;color:#fff}.actions-cell button:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.actions-cell .icon-btn{padding:6px;min-width:32px;display:flex;align-items:center;justify-content:center}\n"] }]
+        }], ctorParameters: () => [{ type: GridDataService }, { type: ThemeService }], propDecorators: { config: [{
+                type: Input
+            }], adapter: [{
+                type: Input
+            }], autoLoad: [{
+                type: Input
+            }], lazy: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], totalRecords: [{
+                type: Input
+            }], gridHeader: [{
+                type: ViewChild,
+                args: ['gridHeader', { read: ElementRef }]
+            }], gridBody: [{
+                type: ViewChild,
+                args: ['gridBody', { read: ElementRef }]
+            }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], showThemeSelector: [{ type: i0.Input, args: [{ isSignal: true, alias: "showThemeSelector", required: false }] }], showColumnChooser: [{ type: i0.Input, args: [{ isSignal: true, alias: "showColumnChooser", required: false }] }], showGlobalSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "showGlobalSearch", required: false }] }], showAddButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAddButton", required: false }] }], addButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "addButtonText", required: false }] }], addButtonUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "addButtonUrl", required: false }] }], showExport: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExport", required: false }] }], exportFileName: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportFileName", required: false }] }], showFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFooter", required: false }] }], addClick: [{
+                type: Output
+            }], excelExport: [{
+                type: Output
+            }], pdfExport: [{
+                type: Output
+            }], onRefresh: [{
+                type: Output
+            }], columnComponents: [{
+                type: ContentChildren,
+                args: [GridColumnComponent]
+            }], columnCommandTemplates: [{
+                type: ContentChildren,
+                args: [GridColumnCommandTemplateDirective]
+            }], captionCommandTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GridCaptionCommandTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], footerTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GridFooterTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], dataLoad: [{
+                type: Output
+            }], rowSelect: [{
+                type: Output
+            }], rowUnselect: [{
+                type: Output
+            }], stateChange: [{
+                type: Output
+            }] } });
+
+class GridCellTemplateDirective {
+    templateRef;
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: GridCellTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.2", type: GridCellTemplateDirective, isStandalone: true, selector: "[nlabsGridCellTemplate]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: GridCellTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[nlabsGridCellTemplate]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+
+class GridHeaderTemplateDirective {
+    templateRef;
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: GridHeaderTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.2", type: GridHeaderTemplateDirective, isStandalone: true, selector: "[nlabsGridHeaderTemplate]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: GridHeaderTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[nlabsGridHeaderTemplate]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+
+/**
+ * Grid Configuration Models
+ */
+
+/**
+ * Mock data adapter for demo purposes
+ * Simulates backend API with mock data
+ */
+class MockDataAdapter {
+    mockUsers = this.generateMockUsers(500);
+    getData(request) {
+        // Simulate network delay
+        return of(this.processRequest(request)).pipe(delay(300));
+    }
+    buildQuery(request) {
+        // Not used in mock adapter
+        return '';
+    }
+    processRequest(request) {
+        let data = [...this.mockUsers];
+        // Apply filtering
+        if (request.filter) {
+            data = this.applyFilter(data, request.filter);
+        }
+        // Apply sorting
+        if (request.orderBy) {
+            data = this.applySort(data, request.orderBy);
+        }
+        const total = data.length;
+        // Apply pagination
+        const start = request.skip;
+        const end = start + request.top;
+        data = data.slice(start, end);
+        return { data, total };
+    }
+    applyFilter(data, filter) {
+        // Simple contains filter for demo
+        const lowerFilter = filter.toLowerCase();
+        return data.filter(user => user.name.toLowerCase().includes(lowerFilter) ||
+            user.email.toLowerCase().includes(lowerFilter) ||
+            user.city.toLowerCase().includes(lowerFilter));
+    }
+    applySort(data, orderBy) {
+        const [field, order] = orderBy.split(' ');
+        const multiplier = order === 'desc' ? -1 : 1;
+        return data.sort((a, b) => {
+            if (a[field] < b[field])
+                return -1 * multiplier;
+            if (a[field] > b[field])
+                return 1 * multiplier;
+            return 0;
+        });
+    }
+    generateMockUsers(count) {
+        const firstNames = ['John', 'Jane', 'Michael', 'Emily', 'David', 'Sarah', 'Chris', 'Anna', 'Tom', 'Lisa', 'Robert', 'Jennifer', 'William', 'Amanda', 'James', 'Jessica', 'Daniel', 'Ashley', 'Matthew', 'Brittany'];
+        const lastNames = ['Smith', 'Johnson', 'Williams', 'Brown', 'Jones', 'Garcia', 'Miller', 'Davis', 'Rodriguez', 'Martinez', 'Hernandez', 'Lopez', 'Gonzalez', 'Wilson', 'Anderson', 'Thomas', 'Taylor', 'Moore', 'Jackson', 'Martin'];
+        const cities = ['New York', 'Los Angeles', 'Chicago', 'Houston', 'Phoenix', 'Philadelphia', 'San Antonio', 'San Diego', 'Dallas', 'San Jose', 'Austin', 'Jacksonville', 'Fort Worth', 'Columbus', 'San Francisco', 'Charlotte', 'Indianapolis', 'Seattle', 'Denver', 'Washington DC'];
+        const countries = ['USA', 'Canada', 'UK', 'Germany', 'France', 'Spain', 'Italy', 'Australia', 'Japan', 'Brazil'];
+        const departments = ['Engineering', 'Sales', 'Marketing', 'HR', 'Finance', 'Operations', 'IT', 'Legal', 'Customer Service', 'R&D'];
+        const jobTitles = ['Senior Manager', 'Team Lead', 'Developer', 'Designer', 'Analyst', 'Consultant', 'Specialist', 'Coordinator', 'Director', 'VP'];
+        const streets = ['Main St', 'Oak Ave', 'Pine Rd', 'Maple Dr', 'Cedar Ln', 'Elm St', 'Park Blvd', 'Lake View', 'Hill Crest', 'River Side'];
+        const users = [];
+        for (let i = 1; i <= count; i++) {
+            const firstName = firstNames[Math.floor(Math.random() * firstNames.length)];
+            const lastName = lastNames[Math.floor(Math.random() * lastNames.length)];
+            const name = `${firstName} ${lastName}`;
+            const email = `${firstName.toLowerCase()}.${lastName.toLowerCase()}${i}@example.com`;
+            const age = Math.floor(Math.random() * 50) + 18;
+            const salary = Math.floor(Math.random() * 150000) + 30000;
+            const department = departments[Math.floor(Math.random() * departments.length)];
+            const city = cities[Math.floor(Math.random() * cities.length)];
+            const country = countries[Math.floor(Math.random() * countries.length)];
+            const phone = `+1-${Math.floor(Math.random() * 900) + 100}-${Math.floor(Math.random() * 900) + 100}-${Math.floor(Math.random() * 9000) + 1000}`;
+            const street = streets[Math.floor(Math.random() * streets.length)];
+            const address = `${Math.floor(Math.random() * 9999) + 1} ${street}`;
+            const zipCode = String(Math.floor(Math.random() * 90000) + 10000);
+            const jobTitle = jobTitles[Math.floor(Math.random() * jobTitles.length)];
+            const managerFirstName = firstNames[Math.floor(Math.random() * firstNames.length)];
+            const managerLastName = lastNames[Math.floor(Math.random() * lastNames.length)];
+            const manager = `${managerFirstName} ${managerLastName}`;
+            const active = Math.random() > 0.3;
+            const startDate = new Date(2015 + Math.floor(Math.random() * 10), Math.floor(Math.random() * 12), Math.floor(Math.random() * 28) + 1);
+            const registeredDate = new Date(2020 + Math.floor(Math.random() * 5), Math.floor(Math.random() * 12), Math.floor(Math.random() * 28) + 1);
+            const lastLogin = new Date(2024, Math.floor(Math.random() * 12), Math.floor(Math.random() * 28) + 1);
+            const notes = `Employee note #${i} - Performance review pending`;
+            users.push({
+                id: i,
+                name,
+                email,
+                age,
+                salary,
+                department,
+                city,
+                country,
+                phone,
+                address,
+                zipCode,
+                jobTitle,
+                manager,
+                active,
+                startDate,
+                registeredDate,
+                lastLogin,
+                notes
+            });
+        }
+        return users;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: MockDataAdapter, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: MockDataAdapter, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: MockDataAdapter, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+//Adapters
+//Styles
+// SCSS files cannot be exported from TypeScript entry points
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DataGridComponent, GridCaptionCommandTemplateDirective, GridCellTemplateDirective, GridColumnCommandTemplateDirective, GridColumnComponent, GridDataService, GridFooterTemplateDirective, GridHeaderTemplateDirective, MockDataAdapter, ODATA_BASE_URL, ODataAdapter, RestAdapter, ThemeSelectorComponent, ThemeService };
+//# sourceMappingURL=nlabtech-nlabs-grid.mjs.map