@avoraui/av-data-table 0.0.5 → 0.0.7

package/README.md

@@ -1,125 +1,42 @@
 # AvDataTable Component (AvoraUI)
 
-A powerful, customizable Angular data table component with built-in pagination, event-driven actions, and reactive forms support. This component provides flexibility for users to implement custom business logic through event handlers rather than predefined CRUD operations.
+`AvDataTable` is a powerful, customizable standalone Angular component that provides a feature-rich data table interface with advanced pagination, dynamic column rendering, and interactive row actions. It offers a flexible solution for displaying and managing tabular data with support for nested object properties, custom styling, and seamless integration with Angular Reactive Forms.
 
 ## Features
 
-- ✅ **Pagination** - Built-in pagination with customizable page sizes
-- ✅ **Event-Driven Actions** - Customizable add, modify, and delete event handlers
-- ✅ **Reactive Forms Integration** - Implements `ControlValueAccessor`
-- ✅ **Flexible Column Configuration** - Support for nested object properties
-- ✅ **Customizable Styling** - Configurable alignment and colors
-- ✅ **Action Events** - Optional action buttons with customizable event handlers
-- ✅ **User-Controlled Operations** - Flexible event system for custom business logic
-- ✅ **Responsive Grid Layout** - CSS Grid-based responsive design
-- ✅ **Data Synchronization** - Automatic sync between internal and external data sources
+- ✅ **Advanced Pagination** - Configurable page sizes and options.
+- ✅ **Dynamic Grid Layout** - Automatic grid template generation based on column count.
+- ✅ **Nested Property Access** - Support for dot notation (e.g., `user.address.city`).
+- ✅ **Array Handling** - Automatic formatting and joining of array values.
+- ✅ **Interactive Actions** - Configurable modify and delete buttons with customizable event handlers.
+- ✅ **Action Control** - Individual control over button visibility and disabled states.
+- ✅ **Customizable Alignment** - Left, center, or right alignment for headers and data.
+- ✅ **Dynamic Styling** - Custom color support for table cells.
+- ✅ **Event-Driven Architecture** - Emits events for modify, add, and remove operations.
+- ✅ **Auto-Adjustment** - Automatic page recalculation when data changes or items are removed.
+- ✅ **Bidirectional Data Sync** - Intelligent synchronization between internal and external data sources.
+- ✅ **Form Integration** - Implements `ControlValueAccessor` for Reactive Forms compatibility.
+- ✅ **Material Premium UI** - Integration with Angular Material components for a professional look.
+- ✅ **Change Detection Optimized** - Efficient data reference updates to prevent unnecessary re-rendering.
+- ✅ **Null Safety** - Graceful handling of null or undefined values with fallback display.
 
 ## Dependencies
 
-This component requires the following Angular Material modules:
-
-```typescript
-import { MatCard } from "@angular/material/card";
-import { MatButton } from "@angular/material/button";
-import { MatIcon } from '@angular/material/icon';
-```
-```markdown
-🚨 Version 0.0.4 introduces a breaking change:
-Component selector has changed from `aur-data-table` to `av-data-table`.  
-Please update your templates accordingly.
-```
+The component requires Angular Material. Ensure the following are available in your environment:
+- `@angular/material/card`
+- `@angular/material/button`
+- `@angular/material/icon`
+- `@angular/material/paginator`
+- `@angular/material/menu`
 
 ## Installation
 
-1. Copy the component files to your Angular project
-2. Import the component in your module or standalone component
-3. Ensure you have Angular Material (for pagination) installed:
-
-```bash
-ng add @angular/material
-```
-
-## Basic Usage
-
-### 1. Import and Configure
-
-```typescript
-import { AvDataTable } from './path/to/av-data-table';
-
-@Component({
-  selector: 'app-example',
-  template: `
-    <av-data-table
-      [TableHeaders]="headers"
-      [TableColumns]="columns"
-      [Data]="tableData"
-      [PageSize]="10"
-      [PageSizeOptions]="[5, 10, 25, 50]"
-      [EnableActionColumn]="true"
-      [EnableButtonDelete]="true"
-      [EnableButtonModify]="true"
-      (onModify)="handleModify($event)"
-      (onItemRemoved)="handleRemove($event)"
-      (onNewItemAdded)="handleAdd($event)">
-    </av-data-table>
-  `
-})
-export class ExampleComponent {
-  // Component implementation
-}
-```
-
-### 2. Define Headers and Columns
-
-```typescript
-export interface Headers {
-  label: string;
-  align: 'left' | 'center' | 'right';
-}
-
-export interface Columns {
-  field: string;
-  align: 'left' | 'center' | 'right';
-  color?: string;
-}
-export class ExampleComponent {
-  headers: Headers[] = [
-    { label: 'Name', align: 'left' },
-    { label: 'Email', align: 'left' },
-    { label: 'Department', align: 'left' },
-    { label: 'Action', align: 'center' }
-  ];
-
-  columns: Columns[] = [
-    { field: 'name', align: 'left', color: '#3182ce' },
-    { field: 'email', align: 'left' },
-    { field: 'department.name', align: 'left' }, // Nested property
-  ];
-
-  tableData = [
-    { 
-      name: 'Kasun Perera', 
-      email: 'kasun.perera@company.lk', 
-      department: { name: 'Information Technology', code: 'IT' } 
-    },
-    { 
-      name: 'Nimali Fernando', 
-      email: 'nimali.fernando@company.lk', 
-      department: { name: 'Human Resources', code: 'HR' } 
-    },
-    { 
-      name: 'Rajitha Silva', 
-      email: 'rajitha.silva@company.lk', 
-      department: { name: 'Finance & Accounting', code: 'FIN' } 
-    },
-    { 
-      name: 'Chaminda Jayawardena', 
-      email: 'chaminda.j@company.lk', 
-      department: { name: 'Marketing & Sales', code: 'MKT' } 
-    }
-  ];
-}
-```
+1. Copy the component files into your project.
+2. Import `AvDataTable` in your standalone component or module.
+3. Add Angular Material if not already present:
+   ```bash
+   ng add @angular/material
+   ```
 
 ## API Reference
 
@@ -127,191 +44,69 @@ export class ExampleComponent {
 
 | Property | Type | Default | Description |
 |----------|------|---------|-------------|
-| `TableHeaders` | `Headers[]` | `[]` | Array of header configurations |
-| `TableColumns` | `Columns[]` | `[]` | Array of column configurations |
-| `Data` | `any[]` | `[]` | Data source for the table |
-| `PageSize` | `number` | `5` | Number of items per page |
-| `PageSizeOptions` | `number[]` | `[]` | Available page size options |
-| `currentPage` | `number` | `0` | Current active page index |
-| `EnableActionColumn` | `boolean` | `false` | Show/hide action column |
-| `EnableButtonDelete` | `boolean` | `false` | Enable delete button in actions |
-| `EnableButtonModify` | `boolean` | `false` | Enable modify button in actions |
-| `DisableRemove` | `boolean` | `false` | Disable remove functionality |
-| `DisableModify` | `boolean` | `false` | Disable modify functionality |
+| `TableHeaders` | `Headers[]` | `[]` | Array of header configurations with labels and alignment. |
+| `TableColumns` | `Columns[]` | `[]` | Array of column definitions with fields, alignment, and colors. |
+| `Data` | `any[]` | `[]` | Data source for the table. |
+| `PageSize` | `number` | `5` | Initial number of rows per page. |
+| `PageSizeOptions` | `number[]` | `[]` | Available page size choices for the paginator. |
+| `currentPage` | `number` | `0` | Active page index. |
+| `EnableActionColumn` | `boolean` | `false` | Toggles the visibility of the action column. |
+| `EnableButtonDelete` | `boolean` | `false` | Toggles the delete action button. |
+| `EnableButtonModify` | `boolean` | `false` | Toggles the modify action button. |
+| `DisableRemove` | `boolean` | `false` | Prevents local item removal while still emitting events. |
+| `DisableModify` | `boolean` | `false` | Disables the modify button while still emitting events. |
 
 ### Output Events
 
-| Event | Type | Description |
-|-------|------|-------------|
-| `onModify` | `EventEmitter<{index: number, modifiedItem: any, disabled: boolean}>` | Emitted when modify button is clicked - allows custom handling like opening edit forms, viewing details, etc. |
-| `onItemRemoved` | `EventEmitter<{index: number, dataSize: number, removedItem: any, disabled: boolean}>` | Emitted when delete button is clicked - allows custom removal logic, confirmations, API calls, etc. |
-| `onNewItemAdded` | `EventEmitter<{index: number, dataSize: number, removedItem: any}>` | Emitted when new item events occur - allows custom add item logic |
+| Event | Payload Type | Description |
+|-------|--------------|-------------|
+| `onModify` | `{index: number, modifiedItem: any, disabled: boolean}` | Emits when the modify button is clicked. |
+| `onItemRemoved` | `{index: number, dataSize: number, removedItem: any, disabled: boolean}` | Emits when an item is removed via the delete button. |
+| `onNewItemAdded` | `{index: number, dataSize: number}` | Emitted when internal data size changes (e.g., via sync). |
 
-### Interfaces
+## Technical Implementation
 
-```typescript
-interface Headers {
-  label: string;
-  align: 'left' | 'center' | 'right';
-}
+- **CSS Grid:** Uses a dynamically calculated `grid-template-columns` for responsive row structure.
+- **Nested Property Resolution:** Recursively traverses objects using dot notation for display.
+- **Data Sync:** Uses efficient reference and length verification for performance and stability.
+- **Form Control:** Implements `NG_VALUE_ACCESSOR` for seamless integration with `ngModel` and `[formControl]`.
 
-interface Columns {
-  field: string;
-  align: 'left' | 'center' | 'right';
-  color?: string;
-}
-```
-
-## Advanced Usage
-
-### Nested Object Properties
-
-The component supports accessing nested object properties using dot notation:
+## Usage Example
 
 ```typescript
-columns: Columns[] = [
-  { field: 'employee.profile.firstName' },
-  { field: 'employee.contact.address.city' },
-  { field: 'employee.roles.name' }, // Will join array values with commas
-  { field: 'department.name' } // Access nested department name
+// Component
+headers: Headers[] = [
+  { label: 'Name', align: 'left' },
+  { label: 'Role', align: 'center' }
 ];
-```
 
-### Reactive Forms Integration
-
-The component implements `ControlValueAccessor`, making it compatible with Angular Reactive Forms:
-
-```typescript
-import { FormBuilder, FormGroup } from '@angular/forms';
-
-export class ExampleComponent {
-  form: FormGroup;
-
-  constructor(private fb: FormBuilder) {
-    this.form = this.fb.group({
-      tableData: [[]] // Initial empty array
-    });
-  }
-}
-```
-
-```html
-<form [formGroup]="form">
-  <av-data-table 
-    formControlName="tableData"
-    [TableHeaders]="headers"
-    [TableColumns]="columns">
-  </av-data-table>
-</form>
-```
-
-### Event Handling
-
-The component provides flexible event handlers that allow you to implement custom business logic:
-
-```typescript
-handleModify(event: {index: number, modifiedItem: any, disabled: boolean}) {
-  if (event.disabled) {
-    console.log('Modify action is disabled');
-    return;
-  }
-  
-  // Example: Open edit dialog with the selected row data
-  console.log('Modifying employee:', event.modifiedItem.name);
-  console.log('Employee data:', event.modifiedItem);
-  
-  // You can:
-  // - Open a modal/dialog for editing
-  // - Navigate to an edit page
-  // - Show detailed view
-  // - Perform any custom logic with the row data
-  this.openEditDialog(event.modifiedItem, event.index);
-}
-
-handleRemove(event: {index: number, dataSize: number, removedItem: any, disabled: boolean}) {
-  if (event.disabled) {
-    console.log('Remove action is disabled');
-    return;
-  }
-  
-  // Example: Custom confirmation and API call
-  const employee = event.removedItem;
-  const confirmed = confirm(`Are you sure you want to remove ${employee.name}?`);
-  
-  if (confirmed) {
-    // You can:
-    // - Make API calls to delete from server
-    // - Update other related data
-    // - Show success/error messages
-    // - Perform cleanup operations
-    console.log(`${employee.name} removed from ${employee.department.name}`);
-    console.log('Remaining employees:', event.dataSize);
-    
-    // Example API call
-    this.employeeService.deleteEmployee(employee.id).subscribe({
-      next: () => console.log('Successfully deleted from server'),
-      error: (err) => console.error('Deletion failed:', err)
-    });
-  }
-}
-
-handleAdd(event: {index: number, dataSize: number}) {
-  // Example: Trigger add new employee flow
-  console.log('Adding new employee...');
-  
-  // You can:
-  // - Open add employee dialog
-  // - Navigate to create page  
-  // - Show form modal
-  // - Perform any custom add logic
-  this.openAddEmployeeDialog();
-}
-```
-
-### Custom Styling
-
-The component uses CSS classes that you can override:
-
-```css
-/* Header alignment */
-.header-text-left { text-align: left; }
-.header-text-center { text-align: center; }
-.header-text-right { text-align: right; }
+columns: Columns[] = [
+  { field: 'profile.name', align: 'left', color: '#4361ee' },
+  { field: 'role', align: 'center' }
+];
 
-/* Data cell alignment */
-.text-left { text-align: left; }
-.text-center { text-align: center; }
-.text-right { text-align: right; }
+data = [
+  { profile: { name: 'Dileesha' }, role: 'Developer' }
+];
 
-/* Grid layout customization */
-.table-grid {
-  display: grid;
-  gap: 1rem;
-  /* grid-template-columns is set dynamically */
-}
+// Template
+<av-data-table 
+  [TableHeaders]="headers" 
+  [TableColumns]="columns" 
+  [Data]="data"
+  [EnableActionColumn]="true"
+  (onModify)="handleModify($event)">
+</av-data-table>
 ```
 
-## Requirements
-
-- Angular 17+
-- Angular Material (for pagination component)
-- Modern browser with CSS Grid support
+## Authorship
 
-## Browser Support
-
-- Chrome/Edge 57+
-- Firefox 52+
-- Safari 10.1+
+- **Author**: Dileesha Ekanayake
+- **Email**: dileesha.r.ekanayake@gmail.com
+- **Created**: 2024
+- **Version**: 0.0.7
+- **Responsibility**: Design, implementation, and documentation of the data table component with Angular Material integration.
 
 ## License
 
-This project is licensed under the MIT License - see the LICENSE file for details.
-
-## Changelog
-
-### v0.0.5
-- Initial release
-- Basic table functionality with pagination
-- CRUD operations support
-- Reactive forms integration
-- Nested object property access
+This project is licensed under the MIT License.

package/fesm2022/avoraui-av-data-table.mjs

@@ -2,11 +2,100 @@ import * as i0 from '@angular/core';
 import { EventEmitter, forwardRef, Input, Output, Component } from '@angular/core';
 import { MatCard, MatCardContent } from '@angular/material/card';
 import { MatIcon } from '@angular/material/icon';
-import { MatIconButton } from '@angular/material/button';
-import { NgClass, NgStyle } from '@angular/common';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import * as i6 from '@angular/material/button';
+import { MatIconButton, MatButtonModule } from '@angular/material/button';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i7 from '@angular/forms';
+import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { MatPaginator } from '@angular/material/paginator';
+import * as i2 from '@angular/material/menu';
+import { MatMenuModule } from '@angular/material/menu';
+import * as i3 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i4 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i5 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
 
+/**
+ * AvDataTable is a standalone Angular component that provides a feature-rich, customizable
+ * data table interface with advanced pagination, dynamic column rendering, and interactive row actions.
+ * It offers a flexible and powerful solution for displaying and managing tabular data with support for
+ * nested object properties, custom styling, and comprehensive CRUD operations.
+ *
+ * The component implements ControlValueAccessor to integrate seamlessly with Angular reactive forms,
+ * supporting bidirectional data binding and form validation. It features server-side and client-side
+ * pagination, dynamic grid layout calculation, configurable action columns, and event-driven architecture
+ * for parent component interaction. The table supports nested property access with dot notation, custom
+ * column alignment, color customization, and intelligent data synchronization.
+ *
+ * @template T - The type of items displayed in the table rows.
+ *
+ * <p><strong>Features</strong></p>
+ * <ul>
+ *    <li>Advanced pagination with configurable page sizes and options</li>
+ *    <li>Dynamic grid template generation based on column count</li>
+ *    <li>Nested object property access using dot notation (e.g., 'user.address.city')</li>
+ *    <li>Array value handling with automatic formatting and joining</li>
+ *    <li>Configurable action column with modify and delete operations</li>
+ *    <li>Individual control over action button visibility and disabled states</li>
+ *    <li>Custom column alignment (left, center, right) for headers and data</li>
+ *    <li>Dynamic color customization for table cells</li>
+ *    <li>Event emitters for modify, add, and remove operations</li>
+ *    <li>Automatic page adjustment when data changes or items are removed</li>
+ *    <li>Two-way data synchronization between internal and external data sources</li>
+ *    <li>Angular reactive forms integration via ControlValueAccessor</li>
+ *    <li>Material Design UI components integration</li>
+ *    <li>Change detection optimization with explicit data reference updates</li>
+ *    <li>Graceful handling of null/undefined values with fallback display</li>
+ * </ul>
+ *
+ * <p><strong>Technical Implementation</strong></p>
+ * <ul>
+ *    <li>Dynamic CSS Grid layout calculation for responsive column sizing</li>
+ *    <li>Paginated data slicing with index transformation for accurate positioning</li>
+ *    <li>Nested property resolution with array mapping and filtering</li>
+ *    <li>Data synchronization using efficient object reference and length comparison</li>
+ *    <li>Event-driven communication pattern with parent components</li>
+ *    <li>Lifecycle management with OnInit and OnChanges implementations</li>
+ *    <li>Conditional action execution based on disabled state flags</li>
+ *    <li>Automatic pagination state management and validation</li>
+ * </ul>
+ *
+ * <p><strong>Event Handling</strong></p>
+ * <ul>
+ *    <li><b>onModify:</b> Emits when a row modification is requested, includes index, item data, and disabled state</li>
+ *    <li><b>onNewItemAdded:</b> Emits when a new item is added to the table</li>
+ *    <li><b>onItemRemoved:</b> Emits when an item is removed, includes index, data size, removed item, and disabled state</li>
+ * </ul>
+ *
+ * <p><strong>Configuration Options</strong></p>
+ * <ul>
+ *    <li>PageSize: Number of rows per page (default: 5)</li>
+ *    <li>PageSizeOptions: Array of available page size options</li>
+ *    <li>TableHeaders: Column header definitions with labels and alignment</li>
+ *    <li>TableColumns: Column data definitions with field names, alignment, and colors</li>
+ *    <li>EnableActionColumn: Toggle visibility of action column</li>
+ *    <li>EnableButtonDelete: Control delete button visibility</li>
+ *    <li>EnableButtonModify: Control modify button visibility</li>
+ *    <li>DisableRemove: Prevent item removal while maintaining event emission</li>
+ *    <li>DisableModify: Prevent item modification while maintaining event emission</li>
+ * </ul>
+ *
+ * <p><strong>Authorship</strong></p>
+ * <ul>
+ *    <li><b>Author:</b> Dileesha Ekanayake</li>
+ *    <li><b>Email:</b> dileesha.r.ekanayake@gmail.com</li>
+ *    <li><b>Created:</b> 2024</li>
+ *    <li><b>Version:</b> 1.0.0</li>
+ *    <li><b>Responsibility:</b> Design, implementation, and documentation of the data table component
+ *        with Angular Material integration. Provides comprehensive table functionality including
+ *        pagination, nested property access, dynamic styling, CRUD operations, and seamless form
+ *        control integration with reactive forms support. Ensures robust data synchronization,
+ *        event-driven architecture, and flexible configuration options for diverse use cases.</li>
+ * </ul>
+ */
 class AvDataTable {
     PageSize = 5;
     PageSizeOptions = [];
@@ -24,6 +113,12 @@ class AvDataTable {
     DisableRemove = false;
     DisableModify = false;
     gridTemplateColumns = '';
+    // New features state
+    sortField = '';
+    sortDirection = '';
+    globalSearchTerm = '';
+    columnFilters = new Map();
+    processedData = [];
     onChange = () => { };
     onTouched = () => { };
     constructor() {
@@ -43,6 +138,7 @@ class AvDataTable {
         this.initializePaginator();
         this.calculateGridTemplate();
         this.syncDataSources();
+        this.applyAllFilters();
     }
     /**
      * Initializes the paginator configuration. Sets default values for PageSize, PageSizeOptions,
@@ -83,6 +179,7 @@ class AvDataTable {
         // Listen for changes in the external Data input
         if (changes['Data'] && !changes['Data'].firstChange) {
             this.syncDataSources();
+            this.applyAllFilters();
             // Reset to first page when data changes
             this.currentPage = 0;
         }
@@ -90,7 +187,7 @@ class AvDataTable {
         if (changes['PageSize'] || changes['PageSizeOptions'] || changes['currentPage']) {
             this.initializePaginator();
             // Validate current page doesn't exceed available pages
-            const totalPages = Math.ceil(this.TableData.length / this.PageSize);
+            const totalPages = Math.ceil(this.processedData.length / this.PageSize);
             if (this.currentPage >= totalPages && totalPages > 0) {
                 this.currentPage = totalPages - 1;
             }
@@ -104,7 +201,7 @@ class AvDataTable {
     getPaginatedData() {
         const startIndex = this.currentPage * this.PageSize;
         const endIndex = startIndex + this.PageSize;
-        return this.TableData.slice(startIndex, endIndex);
+        return this.processedData.slice(startIndex, endIndex);
     }
     /**
      * Handles changes in the pagination state, such as changing the current page or the page size.
@@ -123,7 +220,8 @@ class AvDataTable {
      * @return {number} The actual index in the entire dataset.
      */
     getActualIndex(paginatedIndex) {
-        return (this.currentPage * this.PageSize) + paginatedIndex;
+        const item = this.getPaginatedData()[paginatedIndex];
+        return item ? this.TableData.indexOf(item) : -1;
     }
     /**
      * Synchronizes external data source with the internal TableData.
@@ -133,17 +231,10 @@ class AvDataTable {
      * @return {void} This method does not return a value.
      */
     syncDataSources() {
-        // If external Data is provided and differs from TableData, update TableData
-        if (this.Data && this.Data.length > 0) {
-            // Check if Data and TableData are different
-            const dataString = JSON.stringify(this.Data);
-            const tableDataString = JSON.stringify(this.TableData);
-            if (dataString !== tableDataString) {
-                this.TableData = [...this.Data];
-                // console.log("Changed Data : " + this.Data);
-                // Notify the form about the change
-                this.onChange(this.TableData);
-            }
+        if (this.Data && (this.TableData.length !== this.Data.length || this.TableData !== this.Data)) {
+            this.TableData = [...this.Data];
+            this.applyAllFilters();
+            this.onChange(this.TableData);
         }
     }
     /**
@@ -184,8 +275,8 @@ class AvDataTable {
         if (this.EnableActionColumn) {
             const dataColumns = columnsCount - 1; // Subtract action column
             this.gridTemplateColumns = dataColumns > 0
-                ? `repeat(${dataColumns}, 1fr) 100px`
-                : '100px';
+                ? `repeat(${dataColumns}, 1fr) 140px`
+                : '140px';
         }
         else {
             this.gridTemplateColumns = `repeat(${columnsCount}, 1fr)`;
@@ -327,6 +418,7 @@ class AvDataTable {
             else {
                 this.updateFormValue();
             }
+            this.applyAllFilters();
             this.onItemRemoved.emit({
                 index: actualIndex,
                 dataSize: this.TableData.length,
@@ -388,14 +480,127 @@ class AvDataTable {
     writeValue(value) {
         if (value) {
             this.TableData = [...value];
+            this.applyAllFilters();
             // Reset to first page when new data is written
             this.currentPage = 0;
         }
         else {
             this.TableData = [];
+            this.processedData = [];
             this.currentPage = 0;
         }
     }
+    // Sorting Logic
+    toggleSort(field) {
+        if (this.sortField === field) {
+            if (this.sortDirection === 'asc') {
+                this.sortDirection = 'desc';
+            }
+            else if (this.sortDirection === 'desc') {
+                this.sortDirection = '';
+                this.sortField = '';
+            }
+            else {
+                this.sortDirection = 'asc';
+            }
+        }
+        else {
+            this.sortField = field;
+            this.sortDirection = 'asc';
+        }
+        this.applyAllFilters();
+    }
+    // Filtering Logic
+    applyAllFilters() {
+        let data = [...this.TableData];
+        // 1. Global Search
+        if (this.globalSearchTerm) {
+            const term = this.globalSearchTerm.toLowerCase();
+            data = data.filter(item => {
+                return this.TableColumns.some(col => {
+                    const val = this.getValueForColumn(item, col);
+                    return val?.toString().toLowerCase().includes(term);
+                });
+            });
+        }
+        // 2. Column-wise Filters
+        this.columnFilters.forEach((filter, field) => {
+            if (filter.rules.length > 0) {
+                data = data.filter(item => {
+                    const val = (this.getValueForColumn(item, { field, align: 'left' }) || '').toString().toLowerCase();
+                    const ruleResults = filter.rules.map(rule => {
+                        const ruleVal = rule.value.toLowerCase();
+                        switch (rule.operator) {
+                            case 'starts': return val.startsWith(ruleVal);
+                            case 'contains': return val.includes(ruleVal);
+                            case 'not_contains': return !val.includes(ruleVal);
+                            case 'ends': return val.endsWith(ruleVal);
+                            case 'equals': return val === ruleVal;
+                            case 'not_equals': return val !== ruleVal;
+                            default: return true;
+                        }
+                    });
+                    return filter.matchMode === 'all'
+                        ? ruleResults.every(r => r)
+                        : ruleResults.some(r => r);
+                });
+            }
+        });
+        // 3. Sorting
+        if (this.sortField && this.sortDirection) {
+            data.sort((a, b) => {
+                const valA = this.getValueForColumn(a, { field: this.sortField, align: 'left' });
+                const valB = this.getValueForColumn(b, { field: this.sortField, align: 'left' });
+                if (valA < valB)
+                    return this.sortDirection === 'asc' ? -1 : 1;
+                if (valA > valB)
+                    return this.sortDirection === 'asc' ? 1 : -1;
+                return 0;
+            });
+        }
+        this.processedData = data;
+        // Adjust pagination if current page is out of bounds
+        const totalPages = Math.ceil(this.processedData.length / this.PageSize);
+        if (this.currentPage >= totalPages && totalPages > 0) {
+            this.currentPage = totalPages - 1;
+        }
+    }
+    clearAllFilters() {
+        this.globalSearchTerm = '';
+        this.columnFilters.clear();
+        this.sortField = '';
+        this.sortDirection = '';
+        this.applyAllFilters();
+    }
+    updateGlobalSearch(event) {
+        this.globalSearchTerm = event.target.value;
+        this.applyAllFilters();
+    }
+    // Column filter management
+    setColumnFilter(field, filter) {
+        if (!filter || filter.rules.length === 0) {
+            this.columnFilters.delete(field);
+        }
+        else {
+            this.columnFilters.set(field, filter);
+        }
+        this.applyAllFilters();
+    }
+    getColumnFilter(field) {
+        let filter = this.columnFilters.get(field);
+        if (!filter) {
+            filter = { matchMode: 'all', rules: [{ operator: 'starts', value: '' }] };
+            this.columnFilters.set(field, filter);
+        }
+        return filter;
+    }
+    // Check if a column has an active filter with actual values (stable during change detection)
+    hasActiveFilter(field) {
+        const filter = this.columnFilters.get(field);
+        if (!filter)
+            return false;
+        return filter.rules.some(rule => rule.value !== '');
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: AvDataTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: AvDataTable, isStandalone: true, selector: "av-data-table", inputs: { PageSize: "PageSize", PageSizeOptions: "PageSizeOptions", currentPage: "currentPage", TableHeaders: "TableHeaders", TableColumns: "TableColumns", Data: "Data", EnableActionColumn: "EnableActionColumn", EnableButtonDelete: "EnableButtonDelete", EnableButtonModify: "EnableButtonModify", DisableRemove: "DisableRemove", DisableModify: "DisableModify" }, outputs: { onModify: "onModify", onNewItemAdded: "onNewItemAdded", onItemRemoved: "onItemRemoved" }, providers: [
             {
@@ -403,7 +608,7 @@ class AvDataTable {
                 useExisting: forwardRef(() => AvDataTable),
                 multi: true
             }
-        ], usesOnChanges: true, ngImport: i0, template: "@if (TableData.length > 0) {\r\n  <div class=\"item-header-row\" [ngStyle]=\"{'grid-template-columns': gridTemplateColumns}\">\r\n    @for (header of getDisplayedHeaders(); track $index) {\r\n      <strong [ngClass]=\"getHeaderFieldClasses(header)\">\r\n        {{ header.label }}\r\n      </strong>\r\n    }\r\n  </div>\r\n\r\n  <!-- Display only the paginated items -->\r\n  @for (item of getPaginatedData(); track $index) {\r\n    <mat-card>\r\n      <mat-card-content>\r\n        <div class=\"item-details\">\r\n          <div class=\"item-row\" [ngStyle]=\"{'grid-template-columns': gridTemplateColumns}\">\r\n            @for (column of TableColumns; track column) {\r\n              <span [ngClass]=\"getDataFieldClasses(column)\"\r\n                    [ngStyle]=\"{ color: getDataFiledColor(column) }\"\r\n              >{{ getValueForColumn(item, column) }}</span>\r\n            }\r\n            @if (EnableActionColumn) {\r\n              <div class=\"action-buttons\">\r\n                @if (EnableButtonModify) {\r\n                  <button\r\n                    class=\"item-action-edit\"\r\n                    mat-icon-button\r\n                    color=\"warn\"\r\n                    (click)=\"modifyItem(getActualIndex($index))\">\r\n                    <mat-icon style=\"color:#ffffff;\">edit</mat-icon>\r\n                  </button>\r\n                }\r\n                @if (EnableButtonDelete) {\r\n                  <button\r\n                    class=\"item-action-delete\"\r\n                    mat-icon-button\r\n                    color=\"warn\"\r\n                    (click)=\"removeItem(getActualIndex($index))\">\r\n                    <mat-icon style=\"color:#ffffff;\">delete</mat-icon>\r\n                  </button>\r\n                }\r\n              </div>\r\n            }\r\n          </div>\r\n        </div>\r\n      </mat-card-content>\r\n    </mat-card>\r\n  }\r\n\r\n  <!-- Move paginator outside the loop -->\r\n  <div class=\"paginator-container\">\r\n    <mat-paginator\r\n      [pageSize]=\"PageSize\"\r\n      [length]=\"TableData.length\"\r\n      [pageSizeOptions]=\"PageSizeOptions\"\r\n      [pageIndex]=\"currentPage\"\r\n      (page)=\"pageChange($event)\"\r\n      showFirstLastButtons>\r\n    </mat-paginator>\r\n  </div>\r\n}\r\n", styles: [".mat-header-cell{font-weight:700}mat-card{width:100%;background:none;border:unset;box-shadow:unset;margin:.2rem}mat-card-header{border-top-left-radius:10px;border-top-right-radius:10px;padding-bottom:15px;border-bottom:black solid 1px}mat-card-content{border-radius:unset!important;padding-top:15px;background:unset;overflow:hidden;height:100%}button:disabled{opacity:.5;cursor:not-allowed!important}mat-icon{color:#fff!important;font-size:18px;width:18px;height:18px}.item-header-row{display:grid;padding:12px 20px;background:#f5f7fa;border-bottom:2px solid #e0e4e8;border-top:2px solid #e0e4e8;margin-top:15px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;letter-spacing:.3px}.item-header-row strong{font-weight:600;color:#4a5568;font-size:14px;text-transform:uppercase}.header-text-left{text-align:left;padding-left:16px!important}.header-text-center{text-align:center}.header-text-right{text-align:right}.text-left{text-align:left;padding-left:5px!important;font-weight:500}.text-center{text-align:center;font-weight:500}.text-right{text-align:right}.item-details{width:100%;margin-bottom:-13px!important;background-color:#fff;box-shadow:0 2px 8px #0000000d;overflow:hidden;transition:all .2s ease}.item-row{width:100%;display:grid;align-items:center;padding:10px}.action-buttons{display:flex;flex-direction:row;align-items:center;justify-content:center;margin-left:25px;align-self:center;gap:5px}.item-action-delete{text-align:right!important;margin-right:60px!important;background-color:#f56565!important;height:36px!important;width:36px!important;border-radius:50%!important;display:flex!important;align-items:center!important;justify-content:center!important;box-shadow:0 2px 4px #f5656533!important}.item-action-edit{justify-self:center;text-align:right!important;background-color:#65a0f6!important;height:36px!important;width:36px!important;border-radius:50%!important;display:flex!important;align-items:center!important;justify-content:center!important;box-shadow:0 2px 4px #f5656533!important}.item-action-edit mat-icon{color:#fff!important}.item-action{text-align:right!important;margin-right:60px!important;background-color:#f56565!important;height:36px!important;width:36px!important;border-radius:50%!important;display:flex!important;align-items:center!important;justify-content:center!important;box-shadow:0 2px 4px #f5656533!important}.paginator-container mat-paginator{background:transparent!important;border-top:1px solid #f1f1f1!important}\n"], dependencies: [{ kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }] });
+        ], usesOnChanges: true, ngImport: i0, template: "<!-- Global Search and Clear -->\r\n<div class=\"table-top-actions\">\r\n  <button mat-stroked-button (click)=\"clearAllFilters()\" class=\"clear-filters-btn\">\r\n    <mat-icon>filter_alt_off</mat-icon> Clear\r\n  </button>\r\n  <div class=\"spacer\"></div>\r\n  <mat-form-field appearance=\"outline\" class=\"global-search-field\">\r\n    <mat-icon matIconPrefix>search</mat-icon>\r\n    <mat-label>Keyboard Search</mat-label>\r\n    <input matInput [(ngModel)]=\"globalSearchTerm\" (input)=\"applyAllFilters()\" placeholder=\"Search...\">\r\n  </mat-form-field>\r\n</div>\r\n\r\n@if (processedData.length > 0) {\r\n<div class=\"item-header-row\" [ngStyle]=\"{'grid-template-columns': gridTemplateColumns}\">\r\n  @for (header of getDisplayedHeaders(); track $index) {\r\n  <div class=\"header-cell\" [ngClass]=\"getHeaderFieldClasses(header)\">\r\n    <div class=\"header-content\" (click)=\"TableColumns[$index] ? toggleSort(TableColumns[$index].field) : null\">\r\n      <strong>{{ header.label }}</strong>\r\n      @if (TableColumns[$index]) {\r\n      <mat-icon class=\"sort-icon\" [ngClass]=\"{'active': sortField === TableColumns[$index].field}\">\r\n        @if (sortField !== TableColumns[$index].field || sortDirection === '') {\r\n        unfold_more\r\n        } @else if (sortDirection === 'asc') {\r\n        expand_less\r\n        } @else {\r\n        expand_more\r\n        }\r\n      </mat-icon>\r\n      }\r\n    </div>\r\n\r\n    @if (TableColumns[$index]) {\r\n    <button mat-icon-button [matMenuTriggerFor]=\"filterMenu\" class=\"filter-btn\">\r\n      <mat-icon [class.active-filter]=\"hasActiveFilter(TableColumns[$index].field)\">filter_list</mat-icon>\r\n    </button>\r\n\r\n    <mat-menu #filterMenu=\"matMenu\" class=\"filter-menu-panel\">\r\n      <div class=\"filter-container\" (click)=\"$event.stopPropagation()\">\r\n        <mat-form-field appearance=\"outline\" class=\"full-width compact\">\r\n          <mat-select [(ngModel)]=\"getColumnFilter(TableColumns[$index].field).matchMode\">\r\n            <mat-option value=\"all\">Match All</mat-option>\r\n            <mat-option value=\"any\">Match Any</mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n\r\n        @for (rule of getColumnFilter(TableColumns[$index].field).rules; track rule; let ri = $index) {\r\n        <div class=\"filter-rule\">\r\n          <mat-form-field appearance=\"outline\" class=\"full-width compact\">\r\n            <mat-select [(ngModel)]=\"rule.operator\">\r\n              <mat-option value=\"starts\">Starts with</mat-option>\r\n              <mat-option value=\"contains\">Contains</mat-option>\r\n              <mat-option value=\"not_contains\">Not contains</mat-option>\r\n              <mat-option value=\"ends\">Ends with</mat-option>\r\n              <mat-option value=\"equals\">Equals</mat-option>\r\n              <mat-option value=\"not_equals\">Not equals</mat-option>\r\n            </mat-select>\r\n          </mat-form-field>\r\n          <mat-form-field appearance=\"outline\" class=\"full-width compact\">\r\n            <input matInput [(ngModel)]=\"rule.value\" placeholder=\"Value\">\r\n          </mat-form-field>\r\n        </div>\r\n        }\r\n\r\n        <button mat-button color=\"primary\" class=\"add-rule-btn\"\r\n          (click)=\"getColumnFilter(TableColumns[$index].field).rules.push({operator: 'starts', value: ''})\">\r\n          <mat-icon>add</mat-icon> Add Rule\r\n        </button>\r\n\r\n        <div class=\"filter-actions\">\r\n          <button mat-button\r\n            (click)=\"getColumnFilter(TableColumns[$index].field).rules = [{operator: 'starts', value: ''}]; setColumnFilter(TableColumns[$index].field, null)\">Clear</button>\r\n          <div class=\"spacer\"></div>\r\n          <button mat-flat-button color=\"primary\"\r\n            (click)=\"setColumnFilter(TableColumns[$index].field, getColumnFilter(TableColumns[$index].field))\">Apply</button>\r\n        </div>\r\n      </div>\r\n    </mat-menu>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n\r\n<!-- Display only the paginated items -->\r\n@for (item of getPaginatedData(); track $index) {\r\n<mat-card>\r\n  <mat-card-content>\r\n    <div class=\"item-details\">\r\n      <div class=\"item-row\" [ngStyle]=\"{'grid-template-columns': gridTemplateColumns}\">\r\n        @for (column of TableColumns; track column) {\r\n        <span [ngClass]=\"getDataFieldClasses(column)\" [ngStyle]=\"{ color: getDataFiledColor(column) }\">{{\r\n          getValueForColumn(item, column) }}</span>\r\n        }\r\n        @if (EnableActionColumn) {\r\n        <div class=\"action-buttons\">\r\n          @if (EnableButtonModify) {\r\n          <button class=\"item-action-edit\" mat-icon-button color=\"warn\" (click)=\"modifyItem(getActualIndex($index))\">\r\n            <mat-icon style=\"color:#ffffff;\">edit</mat-icon>\r\n          </button>\r\n          }\r\n          @if (EnableButtonDelete) {\r\n          <button class=\"item-action-delete\" mat-icon-button color=\"warn\" (click)=\"removeItem(getActualIndex($index))\">\r\n            <mat-icon style=\"color:#ffffff;\">delete</mat-icon>\r\n          </button>\r\n          }\r\n        </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  </mat-card-content>\r\n</mat-card>\r\n}\r\n\r\n<!-- Move paginator outside the loop -->\r\n<div class=\"paginator-container\">\r\n  <mat-paginator [pageSize]=\"PageSize\" [length]=\"processedData.length\" [pageSizeOptions]=\"PageSizeOptions\"\r\n    [pageIndex]=\"currentPage\" (page)=\"pageChange($event)\" showFirstLastButtons>\r\n  </mat-paginator>\r\n</div>\r\n} @else {\r\n<div class=\"no-data-msg\">\r\n  No items found matching your search/filters.\r\n</div>\r\n}", styles: [":host{--av-primary: #4361ee;--av-primary-light: #eef1ff;--av-primary-hover: #3651d4;--av-accent: #f72585;--av-accent-light: #fee2ef;--av-edit: #4cc9f0;--av-edit-hover: #3ab8df;--av-delete: #ef476f;--av-delete-hover: #d63d62;--av-text-primary: #1e293b;--av-text-secondary: #64748b;--av-text-muted: #94a3b8;--av-bg-surface: #ffffff;--av-bg-muted: #f8fafc;--av-border: #e2e8f0;--av-border-hover: #cbd5e1;--av-shadow-sm: 0 1px 3px rgba(0, 0, 0, .06);--av-shadow-md: 0 4px 12px rgba(0, 0, 0, .08);--av-shadow-lg: 0 8px 24px rgba(0, 0, 0, .1);--av-radius-sm: 6px;--av-radius-md: 10px;--av-radius-lg: 14px;--av-transition: .25s cubic-bezier(.4, 0, .2, 1);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}mat-card{width:100%;background:none;border:unset;box-shadow:unset;margin:0;padding:0}mat-card-content{border-radius:unset!important;padding:0!important;background:unset;overflow:hidden}mat-icon{font-size:18px;width:18px;height:18px}button:disabled{opacity:.4;cursor:not-allowed!important;filter:grayscale(.3)}.table-top-actions{display:flex;align-items:center;padding:12px 4px;gap:12px}.spacer{flex:1}.clear-filters-btn{border-radius:var(--av-radius-sm)!important;color:var(--av-text-secondary)!important;border-color:var(--av-border)!important;font-weight:500!important;font-size:13px!important;letter-spacing:.3px;transition:all var(--av-transition)!important;padding:0 14px!important;height:38px!important}.clear-filters-btn:hover{background:var(--av-accent-light)!important;color:var(--av-accent)!important;border-color:var(--av-accent)!important;box-shadow:0 2px 8px #f725851f}.clear-filters-btn mat-icon{margin-right:5px;font-size:17px;width:17px;height:17px;transition:color var(--av-transition)}.clear-filters-btn:hover mat-icon{color:var(--av-accent)!important}.global-search-field mat-icon{color:var(--av-text-muted);transition:color var(--av-transition)}::ng-deep .global-search-field .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .global-search-field .mat-mdc-form-field-icon-prefix mat-icon,::ng-deep .global-search-field .mat-mdc-form-field-prefix mat-icon{font-size:20px;width:20px;color:var(--av-text-muted)}::ng-deep .global-search-field .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading,::ng-deep .global-search-field .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__notch,::ng-deep .global-search-field .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing{border-color:var(--av-border)!important}::ng-deep .global-search-field.mat-focused .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading,::ng-deep .global-search-field.mat-focused .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__notch,::ng-deep .global-search-field.mat-focused .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing{border-color:var(--av-primary)!important}.item-header-row{display:grid;padding:0 20px;background:linear-gradient(135deg,#f1f5f9,#e8edf3);border-bottom:2px solid var(--av-primary);border-radius:var(--av-radius-md) var(--av-radius-md) 0 0;margin-top:8px;font-family:inherit;letter-spacing:.4px;min-height:48px;align-items:center}.item-header-row strong{font-weight:700;color:var(--av-text-primary);font-size:12px;text-transform:uppercase;letter-spacing:.8px}.header-text-left{text-align:left;padding-left:16px!important}.header-text-center{text-align:center}.header-text-right{text-align:right}.text-left{text-align:left;padding-left:5px!important;font-weight:500}.text-center{text-align:center;font-weight:500}.text-right{text-align:right}.header-cell{display:flex!important;align-items:center;justify-content:inherit;gap:2px}.header-content{display:flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;flex:1;padding:4px 6px;border-radius:var(--av-radius-sm);transition:background var(--av-transition)}.header-content:hover{background:#4361ee14}.header-content:active{background:#4361ee26}.sort-icon{font-size:16px;width:16px;height:16px;margin-left:4px;color:var(--av-text-muted);transition:all var(--av-transition);opacity:.5}.header-content:hover .sort-icon{opacity:1;color:var(--av-primary)}.sort-icon.active{color:var(--av-primary)!important;opacity:1!important;animation:sortBounce .3s ease}@keyframes sortBounce{0%{transform:scale(1)}50%{transform:scale(1.3)}to{transform:scale(1)}}.filter-btn{width:30px!important;height:30px!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important;border-radius:var(--av-radius-sm)!important;transition:all var(--av-transition)!important}.filter-btn:hover{background:#4361ee14!important}.filter-btn mat-icon{font-size:16px;width:16px;height:16px;color:var(--av-text-muted);transition:all var(--av-transition)}.filter-btn:hover mat-icon{color:var(--av-primary)}.active-filter{color:var(--av-primary)!important;position:relative}.item-details{width:100%;margin-bottom:0!important;background-color:var(--av-bg-surface);border-left:3px solid transparent;border-bottom:1px solid var(--av-border);transition:all var(--av-transition);cursor:default}.item-details:hover{background:linear-gradient(90deg,var(--av-primary-light) 0%,var(--av-bg-surface) 40%);border-left-color:var(--av-primary);box-shadow:var(--av-shadow-sm)}.item-row{width:100%;display:grid;align-items:center;padding:14px 24px;font-size:14px;color:var(--av-text-primary);line-height:1.5;overflow:visible}.item-row span{transition:color var(--av-transition)}.action-buttons{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:10px;align-self:center;padding-right:8px}.action-buttons mat-icon{color:#fff!important;font-size:16px;width:16px;height:16px}.item-action-edit{justify-self:center;text-align:center!important;background:linear-gradient(135deg,var(--av-edit) 0%,#38b6db 100%)!important;height:34px!important;width:34px!important;border-radius:8px!important;display:flex!important;align-items:center!important;justify-content:center!important;box-shadow:0 2px 6px #4cc9f04d!important;transition:all var(--av-transition)!important}.item-action-edit:hover{transform:translateY(-2px) scale(1.08)!important;box-shadow:0 4px 12px #4cc9f073!important;filter:brightness(1.08)}.item-action-edit:active{transform:translateY(0) scale(.96)!important}.item-action-delete{text-align:center!important;background:linear-gradient(135deg,var(--av-delete) 0%,#d63d62 100%)!important;height:34px!important;width:34px!important;border-radius:8px!important;display:flex!important;align-items:center!important;justify-content:center!important;box-shadow:0 2px 6px #ef476f4d!important;transition:all var(--av-transition)!important}.item-action-delete:hover{transform:translateY(-2px) scale(1.08)!important;box-shadow:0 4px 12px #ef476f73!important;filter:brightness(1.08)}.item-action-delete:active{transform:translateY(0) scale(.96)!important}.item-action{text-align:center!important;background:linear-gradient(135deg,var(--av-delete) 0%,#d63d62 100%)!important;height:34px!important;width:34px!important;border-radius:8px!important;display:flex!important;align-items:center!important;justify-content:center!important;box-shadow:0 2px 6px #ef476f4d!important;transition:all var(--av-transition)!important}.item-action:hover{transform:translateY(-2px) scale(1.08)!important;box-shadow:0 4px 12px #ef476f73!important}.paginator-container{margin-top:4px;border-radius:0 0 var(--av-radius-md) var(--av-radius-md);overflow:hidden}.paginator-container mat-paginator{background:var(--av-bg-muted)!important;border-top:1px solid var(--av-border)!important}.filter-menu-panel{min-width:240px!important}.filter-container{padding:12px 14px;display:flex;flex-direction:column;gap:6px}.filter-rule{display:flex;flex-direction:column;gap:4px;padding-bottom:8px;border-bottom:1px dashed var(--av-border)}.filter-rule:last-of-type{border-bottom:none;padding-bottom:0}.full-width{width:100%}.compact ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.compact ::ng-deep .mat-mdc-text-field-wrapper{padding:0 10px!important}.compact ::ng-deep .mat-mdc-form-field-infix{min-height:36px!important;padding-top:6px!important;padding-bottom:6px!important}.compact ::ng-deep .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading,.compact ::ng-deep .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__notch,.compact ::ng-deep .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing{border-color:var(--av-border)!important}.compact ::ng-deep .mat-mdc-form-field-flex{align-items:center}.compact ::ng-deep .mat-mdc-select-trigger{font-size:13px}.compact ::ng-deep input.mat-mdc-input-element{font-size:13px}.compact ::ng-deep .mat-mdc-floating-label{font-size:13px}::ng-deep .global-search-field input.mat-mdc-input-element{font-size:13px}.add-rule-btn{font-size:12px!important;font-weight:600!important;padding:0!important;height:28px!important;color:var(--av-primary)!important;border-radius:var(--av-radius-sm)!important;transition:all var(--av-transition)!important}.add-rule-btn:hover{background:var(--av-primary-light)!important}.add-rule-btn mat-icon{font-size:14px;width:14px;height:14px}.filter-actions{display:flex;align-items:center;margin-top:6px;gap:8px}.filter-actions button{border-radius:var(--av-radius-sm)!important;font-weight:600!important;font-size:12px!important;letter-spacing:.3px;height:32px!important;line-height:32px!important}.no-data-msg{padding:48px 24px;text-align:center;color:var(--av-text-muted);font-size:14px;font-weight:500;font-style:normal;background:var(--av-bg-muted);border-radius:0 0 var(--av-radius-md) var(--av-radius-md);border:1px dashed var(--av-border);border-top:none;margin-top:0;letter-spacing:.2px}mat-form-field{--mat-form-field-container-height: 40px !important;--mat-form-field-container-vertical-padding: 8px !important}\n"], dependencies: [{ kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i7.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: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: AvDataTable, decorators: [{
             type: Component,
@@ -418,10 +623,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImpor
                         MatCardContent,
                         MatIcon,
                         MatIconButton,
-                        NgClass,
-                        NgStyle,
+                        CommonModule,
                         MatPaginator,
-                    ], standalone: true, template: "@if (TableData.length > 0) {\r\n  <div class=\"item-header-row\" [ngStyle]=\"{'grid-template-columns': gridTemplateColumns}\">\r\n    @for (header of getDisplayedHeaders(); track $index) {\r\n      <strong [ngClass]=\"getHeaderFieldClasses(header)\">\r\n        {{ header.label }}\r\n      </strong>\r\n    }\r\n  </div>\r\n\r\n  <!-- Display only the paginated items -->\r\n  @for (item of getPaginatedData(); track $index) {\r\n    <mat-card>\r\n      <mat-card-content>\r\n        <div class=\"item-details\">\r\n          <div class=\"item-row\" [ngStyle]=\"{'grid-template-columns': gridTemplateColumns}\">\r\n            @for (column of TableColumns; track column) {\r\n              <span [ngClass]=\"getDataFieldClasses(column)\"\r\n                    [ngStyle]=\"{ color: getDataFiledColor(column) }\"\r\n              >{{ getValueForColumn(item, column) }}</span>\r\n            }\r\n            @if (EnableActionColumn) {\r\n              <div class=\"action-buttons\">\r\n                @if (EnableButtonModify) {\r\n                  <button\r\n                    class=\"item-action-edit\"\r\n                    mat-icon-button\r\n                    color=\"warn\"\r\n                    (click)=\"modifyItem(getActualIndex($index))\">\r\n                    <mat-icon style=\"color:#ffffff;\">edit</mat-icon>\r\n                  </button>\r\n                }\r\n                @if (EnableButtonDelete) {\r\n                  <button\r\n                    class=\"item-action-delete\"\r\n                    mat-icon-button\r\n                    color=\"warn\"\r\n                    (click)=\"removeItem(getActualIndex($index))\">\r\n                    <mat-icon style=\"color:#ffffff;\">delete</mat-icon>\r\n                  </button>\r\n                }\r\n              </div>\r\n            }\r\n          </div>\r\n        </div>\r\n      </mat-card-content>\r\n    </mat-card>\r\n  }\r\n\r\n  <!-- Move paginator outside the loop -->\r\n  <div class=\"paginator-container\">\r\n    <mat-paginator\r\n      [pageSize]=\"PageSize\"\r\n      [length]=\"TableData.length\"\r\n      [pageSizeOptions]=\"PageSizeOptions\"\r\n      [pageIndex]=\"currentPage\"\r\n      (page)=\"pageChange($event)\"\r\n      showFirstLastButtons>\r\n    </mat-paginator>\r\n  </div>\r\n}\r\n", styles: [".mat-header-cell{font-weight:700}mat-card{width:100%;background:none;border:unset;box-shadow:unset;margin:.2rem}mat-card-header{border-top-left-radius:10px;border-top-right-radius:10px;padding-bottom:15px;border-bottom:black solid 1px}mat-card-content{border-radius:unset!important;padding-top:15px;background:unset;overflow:hidden;height:100%}button:disabled{opacity:.5;cursor:not-allowed!important}mat-icon{color:#fff!important;font-size:18px;width:18px;height:18px}.item-header-row{display:grid;padding:12px 20px;background:#f5f7fa;border-bottom:2px solid #e0e4e8;border-top:2px solid #e0e4e8;margin-top:15px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;letter-spacing:.3px}.item-header-row strong{font-weight:600;color:#4a5568;font-size:14px;text-transform:uppercase}.header-text-left{text-align:left;padding-left:16px!important}.header-text-center{text-align:center}.header-text-right{text-align:right}.text-left{text-align:left;padding-left:5px!important;font-weight:500}.text-center{text-align:center;font-weight:500}.text-right{text-align:right}.item-details{width:100%;margin-bottom:-13px!important;background-color:#fff;box-shadow:0 2px 8px #0000000d;overflow:hidden;transition:all .2s ease}.item-row{width:100%;display:grid;align-items:center;padding:10px}.action-buttons{display:flex;flex-direction:row;align-items:center;justify-content:center;margin-left:25px;align-self:center;gap:5px}.item-action-delete{text-align:right!important;margin-right:60px!important;background-color:#f56565!important;height:36px!important;width:36px!important;border-radius:50%!important;display:flex!important;align-items:center!important;justify-content:center!important;box-shadow:0 2px 4px #f5656533!important}.item-action-edit{justify-self:center;text-align:right!important;background-color:#65a0f6!important;height:36px!important;width:36px!important;border-radius:50%!important;display:flex!important;align-items:center!important;justify-content:center!important;box-shadow:0 2px 4px #f5656533!important}.item-action-edit mat-icon{color:#fff!important}.item-action{text-align:right!important;margin-right:60px!important;background-color:#f56565!important;height:36px!important;width:36px!important;border-radius:50%!important;display:flex!important;align-items:center!important;justify-content:center!important;box-shadow:0 2px 4px #f5656533!important}.paginator-container mat-paginator{background:transparent!important;border-top:1px solid #f1f1f1!important}\n"] }]
+                        MatMenuModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatSelectModule,
+                        MatButtonModule,
+                        FormsModule
+                    ], standalone: true, template: "<!-- Global Search and Clear -->\r\n<div class=\"table-top-actions\">\r\n  <button mat-stroked-button (click)=\"clearAllFilters()\" class=\"clear-filters-btn\">\r\n    <mat-icon>filter_alt_off</mat-icon> Clear\r\n  </button>\r\n  <div class=\"spacer\"></div>\r\n  <mat-form-field appearance=\"outline\" class=\"global-search-field\">\r\n    <mat-icon matIconPrefix>search</mat-icon>\r\n    <mat-label>Keyboard Search</mat-label>\r\n    <input matInput [(ngModel)]=\"globalSearchTerm\" (input)=\"applyAllFilters()\" placeholder=\"Search...\">\r\n  </mat-form-field>\r\n</div>\r\n\r\n@if (processedData.length > 0) {\r\n<div class=\"item-header-row\" [ngStyle]=\"{'grid-template-columns': gridTemplateColumns}\">\r\n  @for (header of getDisplayedHeaders(); track $index) {\r\n  <div class=\"header-cell\" [ngClass]=\"getHeaderFieldClasses(header)\">\r\n    <div class=\"header-content\" (click)=\"TableColumns[$index] ? toggleSort(TableColumns[$index].field) : null\">\r\n      <strong>{{ header.label }}</strong>\r\n      @if (TableColumns[$index]) {\r\n      <mat-icon class=\"sort-icon\" [ngClass]=\"{'active': sortField === TableColumns[$index].field}\">\r\n        @if (sortField !== TableColumns[$index].field || sortDirection === '') {\r\n        unfold_more\r\n        } @else if (sortDirection === 'asc') {\r\n        expand_less\r\n        } @else {\r\n        expand_more\r\n        }\r\n      </mat-icon>\r\n      }\r\n    </div>\r\n\r\n    @if (TableColumns[$index]) {\r\n    <button mat-icon-button [matMenuTriggerFor]=\"filterMenu\" class=\"filter-btn\">\r\n      <mat-icon [class.active-filter]=\"hasActiveFilter(TableColumns[$index].field)\">filter_list</mat-icon>\r\n    </button>\r\n\r\n    <mat-menu #filterMenu=\"matMenu\" class=\"filter-menu-panel\">\r\n      <div class=\"filter-container\" (click)=\"$event.stopPropagation()\">\r\n        <mat-form-field appearance=\"outline\" class=\"full-width compact\">\r\n          <mat-select [(ngModel)]=\"getColumnFilter(TableColumns[$index].field).matchMode\">\r\n            <mat-option value=\"all\">Match All</mat-option>\r\n            <mat-option value=\"any\">Match Any</mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n\r\n        @for (rule of getColumnFilter(TableColumns[$index].field).rules; track rule; let ri = $index) {\r\n        <div class=\"filter-rule\">\r\n          <mat-form-field appearance=\"outline\" class=\"full-width compact\">\r\n            <mat-select [(ngModel)]=\"rule.operator\">\r\n              <mat-option value=\"starts\">Starts with</mat-option>\r\n              <mat-option value=\"contains\">Contains</mat-option>\r\n              <mat-option value=\"not_contains\">Not contains</mat-option>\r\n              <mat-option value=\"ends\">Ends with</mat-option>\r\n              <mat-option value=\"equals\">Equals</mat-option>\r\n              <mat-option value=\"not_equals\">Not equals</mat-option>\r\n            </mat-select>\r\n          </mat-form-field>\r\n          <mat-form-field appearance=\"outline\" class=\"full-width compact\">\r\n            <input matInput [(ngModel)]=\"rule.value\" placeholder=\"Value\">\r\n          </mat-form-field>\r\n        </div>\r\n        }\r\n\r\n        <button mat-button color=\"primary\" class=\"add-rule-btn\"\r\n          (click)=\"getColumnFilter(TableColumns[$index].field).rules.push({operator: 'starts', value: ''})\">\r\n          <mat-icon>add</mat-icon> Add Rule\r\n        </button>\r\n\r\n        <div class=\"filter-actions\">\r\n          <button mat-button\r\n            (click)=\"getColumnFilter(TableColumns[$index].field).rules = [{operator: 'starts', value: ''}]; setColumnFilter(TableColumns[$index].field, null)\">Clear</button>\r\n          <div class=\"spacer\"></div>\r\n          <button mat-flat-button color=\"primary\"\r\n            (click)=\"setColumnFilter(TableColumns[$index].field, getColumnFilter(TableColumns[$index].field))\">Apply</button>\r\n        </div>\r\n      </div>\r\n    </mat-menu>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n\r\n<!-- Display only the paginated items -->\r\n@for (item of getPaginatedData(); track $index) {\r\n<mat-card>\r\n  <mat-card-content>\r\n    <div class=\"item-details\">\r\n      <div class=\"item-row\" [ngStyle]=\"{'grid-template-columns': gridTemplateColumns}\">\r\n        @for (column of TableColumns; track column) {\r\n        <span [ngClass]=\"getDataFieldClasses(column)\" [ngStyle]=\"{ color: getDataFiledColor(column) }\">{{\r\n          getValueForColumn(item, column) }}</span>\r\n        }\r\n        @if (EnableActionColumn) {\r\n        <div class=\"action-buttons\">\r\n          @if (EnableButtonModify) {\r\n          <button class=\"item-action-edit\" mat-icon-button color=\"warn\" (click)=\"modifyItem(getActualIndex($index))\">\r\n            <mat-icon style=\"color:#ffffff;\">edit</mat-icon>\r\n          </button>\r\n          }\r\n          @if (EnableButtonDelete) {\r\n          <button class=\"item-action-delete\" mat-icon-button color=\"warn\" (click)=\"removeItem(getActualIndex($index))\">\r\n            <mat-icon style=\"color:#ffffff;\">delete</mat-icon>\r\n          </button>\r\n          }\r\n        </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  </mat-card-content>\r\n</mat-card>\r\n}\r\n\r\n<!-- Move paginator outside the loop -->\r\n<div class=\"paginator-container\">\r\n  <mat-paginator [pageSize]=\"PageSize\" [length]=\"processedData.length\" [pageSizeOptions]=\"PageSizeOptions\"\r\n    [pageIndex]=\"currentPage\" (page)=\"pageChange($event)\" showFirstLastButtons>\r\n  </mat-paginator>\r\n</div>\r\n} @else {\r\n<div class=\"no-data-msg\">\r\n  No items found matching your search/filters.\r\n</div>\r\n}", styles: [":host{--av-primary: #4361ee;--av-primary-light: #eef1ff;--av-primary-hover: #3651d4;--av-accent: #f72585;--av-accent-light: #fee2ef;--av-edit: #4cc9f0;--av-edit-hover: #3ab8df;--av-delete: #ef476f;--av-delete-hover: #d63d62;--av-text-primary: #1e293b;--av-text-secondary: #64748b;--av-text-muted: #94a3b8;--av-bg-surface: #ffffff;--av-bg-muted: #f8fafc;--av-border: #e2e8f0;--av-border-hover: #cbd5e1;--av-shadow-sm: 0 1px 3px rgba(0, 0, 0, .06);--av-shadow-md: 0 4px 12px rgba(0, 0, 0, .08);--av-shadow-lg: 0 8px 24px rgba(0, 0, 0, .1);--av-radius-sm: 6px;--av-radius-md: 10px;--av-radius-lg: 14px;--av-transition: .25s cubic-bezier(.4, 0, .2, 1);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}mat-card{width:100%;background:none;border:unset;box-shadow:unset;margin:0;padding:0}mat-card-content{border-radius:unset!important;padding:0!important;background:unset;overflow:hidden}mat-icon{font-size:18px;width:18px;height:18px}button:disabled{opacity:.4;cursor:not-allowed!important;filter:grayscale(.3)}.table-top-actions{display:flex;align-items:center;padding:12px 4px;gap:12px}.spacer{flex:1}.clear-filters-btn{border-radius:var(--av-radius-sm)!important;color:var(--av-text-secondary)!important;border-color:var(--av-border)!important;font-weight:500!important;font-size:13px!important;letter-spacing:.3px;transition:all var(--av-transition)!important;padding:0 14px!important;height:38px!important}.clear-filters-btn:hover{background:var(--av-accent-light)!important;color:var(--av-accent)!important;border-color:var(--av-accent)!important;box-shadow:0 2px 8px #f725851f}.clear-filters-btn mat-icon{margin-right:5px;font-size:17px;width:17px;height:17px;transition:color var(--av-transition)}.clear-filters-btn:hover mat-icon{color:var(--av-accent)!important}.global-search-field mat-icon{color:var(--av-text-muted);transition:color var(--av-transition)}::ng-deep .global-search-field .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .global-search-field .mat-mdc-form-field-icon-prefix mat-icon,::ng-deep .global-search-field .mat-mdc-form-field-prefix mat-icon{font-size:20px;width:20px;color:var(--av-text-muted)}::ng-deep .global-search-field .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading,::ng-deep .global-search-field .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__notch,::ng-deep .global-search-field .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing{border-color:var(--av-border)!important}::ng-deep .global-search-field.mat-focused .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading,::ng-deep .global-search-field.mat-focused .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__notch,::ng-deep .global-search-field.mat-focused .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing{border-color:var(--av-primary)!important}.item-header-row{display:grid;padding:0 20px;background:linear-gradient(135deg,#f1f5f9,#e8edf3);border-bottom:2px solid var(--av-primary);border-radius:var(--av-radius-md) var(--av-radius-md) 0 0;margin-top:8px;font-family:inherit;letter-spacing:.4px;min-height:48px;align-items:center}.item-header-row strong{font-weight:700;color:var(--av-text-primary);font-size:12px;text-transform:uppercase;letter-spacing:.8px}.header-text-left{text-align:left;padding-left:16px!important}.header-text-center{text-align:center}.header-text-right{text-align:right}.text-left{text-align:left;padding-left:5px!important;font-weight:500}.text-center{text-align:center;font-weight:500}.text-right{text-align:right}.header-cell{display:flex!important;align-items:center;justify-content:inherit;gap:2px}.header-content{display:flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;flex:1;padding:4px 6px;border-radius:var(--av-radius-sm);transition:background var(--av-transition)}.header-content:hover{background:#4361ee14}.header-content:active{background:#4361ee26}.sort-icon{font-size:16px;width:16px;height:16px;margin-left:4px;color:var(--av-text-muted);transition:all var(--av-transition);opacity:.5}.header-content:hover .sort-icon{opacity:1;color:var(--av-primary)}.sort-icon.active{color:var(--av-primary)!important;opacity:1!important;animation:sortBounce .3s ease}@keyframes sortBounce{0%{transform:scale(1)}50%{transform:scale(1.3)}to{transform:scale(1)}}.filter-btn{width:30px!important;height:30px!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important;border-radius:var(--av-radius-sm)!important;transition:all var(--av-transition)!important}.filter-btn:hover{background:#4361ee14!important}.filter-btn mat-icon{font-size:16px;width:16px;height:16px;color:var(--av-text-muted);transition:all var(--av-transition)}.filter-btn:hover mat-icon{color:var(--av-primary)}.active-filter{color:var(--av-primary)!important;position:relative}.item-details{width:100%;margin-bottom:0!important;background-color:var(--av-bg-surface);border-left:3px solid transparent;border-bottom:1px solid var(--av-border);transition:all var(--av-transition);cursor:default}.item-details:hover{background:linear-gradient(90deg,var(--av-primary-light) 0%,var(--av-bg-surface) 40%);border-left-color:var(--av-primary);box-shadow:var(--av-shadow-sm)}.item-row{width:100%;display:grid;align-items:center;padding:14px 24px;font-size:14px;color:var(--av-text-primary);line-height:1.5;overflow:visible}.item-row span{transition:color var(--av-transition)}.action-buttons{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:10px;align-self:center;padding-right:8px}.action-buttons mat-icon{color:#fff!important;font-size:16px;width:16px;height:16px}.item-action-edit{justify-self:center;text-align:center!important;background:linear-gradient(135deg,var(--av-edit) 0%,#38b6db 100%)!important;height:34px!important;width:34px!important;border-radius:8px!important;display:flex!important;align-items:center!important;justify-content:center!important;box-shadow:0 2px 6px #4cc9f04d!important;transition:all var(--av-transition)!important}.item-action-edit:hover{transform:translateY(-2px) scale(1.08)!important;box-shadow:0 4px 12px #4cc9f073!important;filter:brightness(1.08)}.item-action-edit:active{transform:translateY(0) scale(.96)!important}.item-action-delete{text-align:center!important;background:linear-gradient(135deg,var(--av-delete) 0%,#d63d62 100%)!important;height:34px!important;width:34px!important;border-radius:8px!important;display:flex!important;align-items:center!important;justify-content:center!important;box-shadow:0 2px 6px #ef476f4d!important;transition:all var(--av-transition)!important}.item-action-delete:hover{transform:translateY(-2px) scale(1.08)!important;box-shadow:0 4px 12px #ef476f73!important;filter:brightness(1.08)}.item-action-delete:active{transform:translateY(0) scale(.96)!important}.item-action{text-align:center!important;background:linear-gradient(135deg,var(--av-delete) 0%,#d63d62 100%)!important;height:34px!important;width:34px!important;border-radius:8px!important;display:flex!important;align-items:center!important;justify-content:center!important;box-shadow:0 2px 6px #ef476f4d!important;transition:all var(--av-transition)!important}.item-action:hover{transform:translateY(-2px) scale(1.08)!important;box-shadow:0 4px 12px #ef476f73!important}.paginator-container{margin-top:4px;border-radius:0 0 var(--av-radius-md) var(--av-radius-md);overflow:hidden}.paginator-container mat-paginator{background:var(--av-bg-muted)!important;border-top:1px solid var(--av-border)!important}.filter-menu-panel{min-width:240px!important}.filter-container{padding:12px 14px;display:flex;flex-direction:column;gap:6px}.filter-rule{display:flex;flex-direction:column;gap:4px;padding-bottom:8px;border-bottom:1px dashed var(--av-border)}.filter-rule:last-of-type{border-bottom:none;padding-bottom:0}.full-width{width:100%}.compact ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.compact ::ng-deep .mat-mdc-text-field-wrapper{padding:0 10px!important}.compact ::ng-deep .mat-mdc-form-field-infix{min-height:36px!important;padding-top:6px!important;padding-bottom:6px!important}.compact ::ng-deep .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading,.compact ::ng-deep .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__notch,.compact ::ng-deep .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing{border-color:var(--av-border)!important}.compact ::ng-deep .mat-mdc-form-field-flex{align-items:center}.compact ::ng-deep .mat-mdc-select-trigger{font-size:13px}.compact ::ng-deep input.mat-mdc-input-element{font-size:13px}.compact ::ng-deep .mat-mdc-floating-label{font-size:13px}::ng-deep .global-search-field input.mat-mdc-input-element{font-size:13px}.add-rule-btn{font-size:12px!important;font-weight:600!important;padding:0!important;height:28px!important;color:var(--av-primary)!important;border-radius:var(--av-radius-sm)!important;transition:all var(--av-transition)!important}.add-rule-btn:hover{background:var(--av-primary-light)!important}.add-rule-btn mat-icon{font-size:14px;width:14px;height:14px}.filter-actions{display:flex;align-items:center;margin-top:6px;gap:8px}.filter-actions button{border-radius:var(--av-radius-sm)!important;font-weight:600!important;font-size:12px!important;letter-spacing:.3px;height:32px!important;line-height:32px!important}.no-data-msg{padding:48px 24px;text-align:center;color:var(--av-text-muted);font-size:14px;font-weight:500;font-style:normal;background:var(--av-bg-muted);border-radius:0 0 var(--av-radius-md) var(--av-radius-md);border:1px dashed var(--av-border);border-top:none;margin-top:0;letter-spacing:.2px}mat-form-field{--mat-form-field-container-height: 40px !important;--mat-form-field-container-vertical-padding: 8px !important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { PageSize: [{
                 type: Input
             }], PageSizeOptions: [{

package/fesm2022/avoraui-av-data-table.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"avoraui-av-data-table.mjs","sources":["../../../projects/av-data-table/src/lib/av-data-table.ts","../../../projects/av-data-table/src/lib/av-data-table.html","../../../projects/av-data-table/src/public-api.ts","../../../projects/av-data-table/src/avoraui-av-data-table.ts"],"sourcesContent":["import {Component, EventEmitter, forwardRef, Input, OnChanges, OnInit, Output, SimpleChanges} from '@angular/core';\r\nimport {MatCard, MatCardContent} from \"@angular/material/card\";\r\nimport {MatIcon} from \"@angular/material/icon\";\r\nimport {MatIconButton} from \"@angular/material/button\";\r\nimport {NgClass, NgStyle} from \"@angular/common\";\r\nimport {ControlValueAccessor, NG_VALUE_ACCESSOR} from \"@angular/forms\";\r\nimport {MatPaginator, PageEvent} from \"@angular/material/paginator\";\r\nimport {Headers, Columns} from './table-prop';\r\n\r\n@Component({\r\n  selector: 'av-data-table',\r\n  providers: [\r\n    {\r\n      provide: NG_VALUE_ACCESSOR,\r\n      useExisting: forwardRef(() => AvDataTable),\r\n      multi: true\r\n    }\r\n  ],\r\n  imports: [\r\n    MatCard,\r\n    MatCardContent,\r\n    MatIcon,\r\n    MatIconButton,\r\n    NgClass,\r\n    NgStyle,\r\n    MatPaginator,\r\n  ],\r\n  templateUrl: './av-data-table.html',\r\n  styleUrl: './av-data-table.css',\r\n  standalone: true\r\n})\r\nexport class AvDataTable implements OnInit, OnChanges, ControlValueAccessor {\r\n\r\n  @Input() PageSize: number = 5;\r\n  @Input() PageSizeOptions: Array<number> = [];\r\n  @Input() currentPage: number = 0;\r\n  @Input() TableHeaders: Headers[] = [];\r\n  @Input() TableColumns: Columns[] = [];\r\n  protected TableData: any[] = [];\r\n  @Input() Data: any[] = [];\r\n  @Input() EnableActionColumn: boolean = false;\r\n  @Input() EnableButtonDelete: boolean = false;\r\n  @Input() EnableButtonModify: boolean = false;\r\n  @Output() onModify = new EventEmitter<{ index: number; modifiedItem: any, disabled: boolean }>();\r\n  @Output() onNewItemAdded = new EventEmitter<{index: number, dataSize: number, removedItem: any}>();\r\n  @Output() onItemRemoved = new EventEmitter<{index: number, dataSize: number, removedItem: any, disabled: boolean}>();\r\n  @Input() DisableRemove: boolean = false;\r\n  @Input() DisableModify: boolean = false;\r\n  gridTemplateColumns: string = '';\r\n  private onChange: (value: any) => void = () => {};\r\n  private onTouched: () => void = () => {};\r\n\r\n  constructor(\r\n  ) {\r\n  }\r\n\r\n  /**\r\n   * Lifecycle hook that is called after Angular has initialized all data-bound properties of a directive.\r\n   * This method is used to perform initialization logic for the component.\r\n   *\r\n   * It executes the following:\r\n   * - Initializes the paginator for managing paginated data display.\r\n   * - Calculates the grid template for layout adjustments.\r\n   * - Synchronizes data sources to ensure the component has up-to-date data.\r\n   *\r\n   * @return {void} This method does not return any value.\r\n   */\r\n  ngOnInit(): void {\r\n    this.initializePaginator();\r\n    this.calculateGridTemplate();\r\n    this.syncDataSources();\r\n  }\r\n\r\n  /**\r\n   * Initializes the paginator configuration. Sets default values for PageSize, PageSizeOptions,\r\n   * and currentPage if they are undefined, null, or invalid. Ensures the PageSize is included\r\n   * in the PageSizeOptions array and sorts the options in ascending order.\r\n   *\r\n   * @return {void} Does not return a value.\r\n   */\r\n  initializePaginator(): void {\r\n    if (this.PageSize === undefined || this.PageSize === null || this.PageSize <= 0) {\r\n      this.PageSize = 5;\r\n    }\r\n    if (this.PageSizeOptions === undefined || this.PageSizeOptions === null || this.PageSizeOptions.length === 0) {\r\n      this.PageSizeOptions = [5, 10, 20, 50];\r\n    }\r\n    if (this.currentPage === undefined || this.currentPage === null || this.currentPage < 0) {\r\n      this.currentPage = 0;\r\n    }\r\n\r\n    // Ensure PageSize is included in PageSizeOptions if not already present\r\n    if (!this.PageSizeOptions.includes(this.PageSize)) {\r\n      this.PageSizeOptions = [...this.PageSizeOptions, this.PageSize].sort((a, b) => a - b);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Handles changes to the component's input properties during the lifecycle of the component.\r\n   *\r\n   * This method is triggered whenever an input property bound to the component changes. It processes\r\n   * updates to properties such as `Data`, `PageSize`, `PageSizeOptions`, and `currentPage`, and\r\n   * ensures the internal state is kept in sync with the new inputs. Additionally, it updates the paginator\r\n   * and adjusts the current page as necessary.\r\n   *\r\n   * @param {SimpleChanges} changes - A collection of SimpleChange objects representing the changed properties.\r\n   * Each `SimpleChange` object provides information like the current and previous values as well as a flag\r\n   * indicating if it is the first change to this input.\r\n   * @return {void} - This method does not return any value.\r\n   */\r\n  ngOnChanges(changes: SimpleChanges): void {\r\n    // Listen for changes in the external Data input\r\n    if (changes['Data'] && !changes['Data'].firstChange) {\r\n      this.syncDataSources();\r\n      // Reset to first page when data changes\r\n      this.currentPage = 0;\r\n    }\r\n\r\n    // Handle changes in pagination settings\r\n    if (changes['PageSize'] || changes['PageSizeOptions'] || changes['currentPage']) {\r\n      this.initializePaginator();\r\n\r\n      // Validate current page doesn't exceed available pages\r\n      const totalPages = Math.ceil(this.TableData.length / this.PageSize);\r\n      if (this.currentPage >= totalPages && totalPages > 0) {\r\n        this.currentPage = totalPages - 1;\r\n      }\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Retrieves a subset of data from the full dataset based on the current page and page size.\r\n   *\r\n   * @return {Array} A portion of the TableData array corresponding to the current page.\r\n   */\r\n  getPaginatedData(): Array<any> {\r\n    const startIndex = this.currentPage * this.PageSize;\r\n    const endIndex = startIndex + this.PageSize;\r\n    return this.TableData.slice(startIndex, endIndex);\r\n  }\r\n\r\n  /**\r\n   * Handles changes in the pagination state, such as changing the current page or the page size.\r\n   *\r\n   * @param {PageEvent} event - The event triggered by a pagination action that contains the updated page index and page size.\r\n   * @return {void} This method does not return anything.\r\n   */\r\n  pageChange(event: PageEvent): void {\r\n    this.currentPage = event.pageIndex;\r\n    this.PageSize = event.pageSize;\r\n  }\r\n\r\n  /**\r\n   * Calculates the actual index in the dataset based on the paginated index.\r\n   *\r\n   * @param {number} paginatedIndex - The index within the current page of paginated data.\r\n   * @return {number} The actual index in the entire dataset.\r\n   */\r\n  getActualIndex(paginatedIndex: number): number {\r\n    return (this.currentPage * this.PageSize) + paginatedIndex;\r\n  }\r\n\r\n  /**\r\n   * Synchronizes external data source with the internal TableData.\r\n   * If the external Data differs from the current TableData, the TableData\r\n   * is updated with the values from Data and a change notification is triggered.\r\n   *\r\n   * @return {void} This method does not return a value.\r\n   */\r\n  syncDataSources(): void {\r\n    // If external Data is provided and differs from TableData, update TableData\r\n    if (this.Data && this.Data.length > 0) {\r\n      // Check if Data and TableData are different\r\n      const dataString = JSON.stringify(this.Data);\r\n      const tableDataString = JSON.stringify(this.TableData);\r\n\r\n      if (dataString !== tableDataString) {\r\n        this.TableData = [...this.Data];\r\n        // console.log(\"Changed Data : \" + this.Data);\r\n        // Notify the form about the change\r\n        this.onChange(this.TableData);\r\n      }\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Updates the form value by notifying changes and updating external data if available.\r\n   * This method triggers the onChange callback with the current table data\r\n   * and notifies that the form field has been touched. Additionally, it updates\r\n   * the external data reference to ensure proper change detection in the parent components.\r\n   *\r\n   * @return {void} No return value.\r\n   */\r\n  updateFormValue(): void {\r\n    // Notify the form about the change\r\n    if (this.onChange) {\r\n      this.onChange(this.TableData);\r\n      this.onTouched();\r\n    }\r\n\r\n    // Also update the external Data if it exists\r\n    if (this.Data) {\r\n      // Create a new reference to trigger OnChanges in parent components\r\n      this.Data = [...this.TableData];\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Calculates and sets the grid template for a layout based on the number of displayed headers\r\n   * and the presence of an action column. The grid template determines the column structure with\r\n   * equal fractions for data columns and a fixed width for the action column if enabled.\r\n   *\r\n   * @return {void} Does not return a value. Sets the `gridTemplateColumns` property to the calculated template.\r\n   */\r\n  calculateGridTemplate(): void {\r\n    // Calculate grid template based on columns count\r\n    const displayedHeaders = this.getDisplayedHeaders();\r\n    const columnsCount = displayedHeaders.length;\r\n\r\n    if (columnsCount === 0) return;\r\n\r\n    // Create grid template with equal fractions for data columns\r\n    // and fixed width for action column if enabled\r\n    if (this.EnableActionColumn) {\r\n      const dataColumns = columnsCount - 1; // Subtract action column\r\n      this.gridTemplateColumns = dataColumns > 0\r\n        ? `repeat(${dataColumns}, 1fr) 100px`\r\n        : '100px';\r\n    } else {\r\n      this.gridTemplateColumns = `repeat(${columnsCount}, 1fr)`;\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Retrieves the headers that should be displayed in the table.\r\n   * The method includes or excludes the \"action\" column based on the value of `EnableActionColumn`.\r\n   *\r\n   * @return {TableProp[]} An array of headers to be displayed in the table. If `EnableActionColumn` is false, the \"action\" column is excluded.\r\n   */\r\n  getDisplayedHeaders(): Headers[] {\r\n    return this.EnableActionColumn\r\n      ? this.TableHeaders\r\n      : this.TableHeaders.filter(h => h.label.toLowerCase() !== 'action');\r\n  }\r\n\r\n  /**\r\n   * Generates and returns an object representing CSS classes for a header based on its alignment property.\r\n   *\r\n   * @param {TableProp} header - An object containing header properties, including an alignment property ('center', 'right', or 'left').\r\n   * @return {Object} An object mapping class names to a boolean indicating their applicability based on the alignment of the header.\r\n   */\r\n  getHeaderFieldClasses(header: Headers): object {\r\n    return {\r\n      'header-text-center': header.align === 'center',\r\n      'header-text-right': header.align === 'right',\r\n      'header-text-left': header.align === 'left',\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Generates a mapping of CSS classes for a data field based on the alignment property of the given column.\r\n   *\r\n   * @param {Columns} column - The column object containing alignment information.\r\n   * @return {Object} An object where the keys are class names, and the values are booleans indicating whether each class applies.\r\n   */\r\n  getDataFieldClasses(column: Columns): object {\r\n    return {\r\n      'text-center': column.align === 'center',\r\n      'text-right': column.align === 'right',\r\n      'text-left': column.align === 'left',\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Retrieves the color property from the given column object.\r\n   *\r\n   * @param {Columns} column - The column object containing the color property.\r\n   * @return {string} The color associated with the column.\r\n   */\r\n  getDataFiledColor(column: Columns): any {\r\n    return column.color;\r\n  }\r\n\r\n  /**\r\n   * Retrieves the value of a specified column from the given item.\r\n   *\r\n   * @param {any} item - The object containing the data to extract the value from.\r\n   * @param {Columns} column - The column definition, including the field name or path.\r\n   * @return {string} The value of the specified column for the given item. If the field is not found, an empty string is returned.\r\n   */\r\n  getValueForColumn(item: any, column: Columns): string {\r\n    if (!item || !column || !column.field) return '';\r\n\r\n    // Check if the field has dot notation (e.g., 'gender.name')\r\n    if (column.field.includes('.')) {\r\n      return this.getNestedValue(item, column.field);\r\n    } else {\r\n      // Handle standard fields\r\n      return column.field in item ? item[column.field] : '';\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Retrieves a nested value from a given object based on a dot-separated path string.\r\n   * If the path does not exist or the value is undefined/null, it returns a placeholder '-'.\r\n   * If accessing an array, it maps the values at the given key and processes them.\r\n   *\r\n   * @param {any} object - The object from which the nested value is extracted.\r\n   * @param {string} path - The dot-separated string representing the path to the desired value.\r\n   * @return {any} The value found at the given path, an array joined into a string, or '-' if not found.\r\n   */\r\n  getNestedValue(object: any, path: string): any {\r\n    // Return early if object is null or undefined\r\n    if (!object) return '-';\r\n\r\n    // Split the path into individual keys (e.g., \"gender.name\" → [\"gender\", \"name\"])\r\n    const keys = path.split('.');\r\n    let value = object;\r\n\r\n    // Navigate through the object hierarchy\r\n    for (const key of keys) {\r\n      if (value === null || value === undefined) {\r\n        return '-';\r\n      }\r\n\r\n      if (Array.isArray(value)) {\r\n        // If we encounter an array, map over its items to extract the property\r\n        value = value.map(item => item[key]).filter(Boolean);\r\n      } else {\r\n        // Access the next property level\r\n        value = value[key];\r\n      }\r\n    }\r\n\r\n    // Format the final result\r\n    if (Array.isArray(value)) {\r\n      return value.length > 0 ? value.join(', ') : '-';\r\n    }\r\n\r\n    return value !== null && value !== undefined ? value : '-';\r\n  }\r\n\r\n  /**\r\n   * Removes an item from the data table at the specified index.\r\n   *\r\n   * @param {number} actualIndex - The index of the item to remove from the data table.\r\n   * @return {void} This method does not return a value.\r\n   */\r\n  removeItem(actualIndex: number): void {\r\n    // Check disable condition FIRST - before touching any data\r\n    if (this.DisableRemove) {\r\n      // Don't remove from TableData, just emit event for parent to handle\r\n      this.onItemRemoved.emit({\r\n        index: actualIndex,\r\n        dataSize: this.TableData.length,\r\n        removedItem: this.TableData[actualIndex], // Get the item that would be removed\r\n        disabled: true\r\n      });\r\n      return; // Exit early - don't modify TableData\r\n    } else {\r\n      // Only proceed with actual removal if not disabled\r\n      const newData = [...this.TableData];\r\n      const removedData = newData[actualIndex]; // Get the item being removed\r\n      newData.splice(actualIndex, 1);\r\n      this.TableData = newData;\r\n\r\n      // Rest of your existing logic...\r\n      const totalPages = Math.ceil(this.TableData.length / this.PageSize);\r\n      if (this.currentPage >= totalPages && this.currentPage > 0) {\r\n        this.currentPage = totalPages - 1;\r\n      }\r\n\r\n      if (this.TableData.length === 0) {\r\n        this.onChange([removedData]);\r\n      } else {\r\n        this.updateFormValue();\r\n      }\r\n\r\n      this.onItemRemoved.emit({\r\n        index: actualIndex,\r\n        dataSize: this.TableData.length,\r\n        removedItem: removedData,\r\n        disabled: false\r\n      });\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Modifies an item at the specified index in the dataset. If the modification is disabled, emits an event without making any changes.\r\n   *\r\n   * @param {number} actualIndex - The index of the item to be modified in the dataset.\r\n   * @return {void} This method does not return a value.\r\n   */\r\n  modifyItem(actualIndex: number): void {\r\n    // Check disable condition FIRST - before any modification logic\r\n    if (this.DisableModify) {\r\n      // Emit event for parent to handle the disabled state\r\n      this.onModify.emit({\r\n        index: actualIndex,\r\n        modifiedItem: this.TableData[actualIndex],\r\n        disabled: true\r\n      });\r\n      return; // Exit early - don't proceed with modification\r\n    }\r\n\r\n    // Only proceed with modification if not disabled\r\n    const modifiedItem = this.TableData[actualIndex];\r\n    this.onModify.emit({\r\n      index: actualIndex,\r\n      modifiedItem,\r\n      disabled: false\r\n    });\r\n  }\r\n\r\n  // ControlValueAccessor interface implementation\r\n  /**\r\n   * Registers a callback function to be called whenever the value changes.\r\n   *\r\n   * @param {any} fn - The function to be executed on a value change.\r\n   * @return {void} This method does not return a value.\r\n   */\r\n  registerOnChange(fn: any): void {\r\n    this.onChange = fn;\r\n  }\r\n\r\n  /**\r\n   * Registers a callback function that should be called when the control is touched.\r\n   *\r\n   * @param {any} fn - The callback function to execute when the control is touched.\r\n   * @return {void} This method does not return a value.\r\n   */\r\n  registerOnTouched(fn: any): void {\r\n    this.onTouched = fn;\r\n  }\r\n\r\n  /**\r\n   * Writes a new value to the table data and resets to the first page.\r\n   *\r\n   * @param {any[]} value - The array of data to be written to the table.\r\n   * @return {void} Does not return a value.\r\n   */\r\n  writeValue(value: any[]): void {\r\n    if (value) {\r\n      this.TableData = [...value];\r\n      // Reset to first page when new data is written\r\n      this.currentPage = 0;\r\n    } else {\r\n      this.TableData = [];\r\n      this.currentPage = 0;\r\n    }\r\n  }\r\n\r\n}\r\n","@if (TableData.length > 0) {\r\n  <div class=\"item-header-row\" [ngStyle]=\"{'grid-template-columns': gridTemplateColumns}\">\r\n    @for (header of getDisplayedHeaders(); track $index) {\r\n      <strong [ngClass]=\"getHeaderFieldClasses(header)\">\r\n        {{ header.label }}\r\n      </strong>\r\n    }\r\n  </div>\r\n\r\n  <!-- Display only the paginated items -->\r\n  @for (item of getPaginatedData(); track $index) {\r\n    <mat-card>\r\n      <mat-card-content>\r\n        <div class=\"item-details\">\r\n          <div class=\"item-row\" [ngStyle]=\"{'grid-template-columns': gridTemplateColumns}\">\r\n            @for (column of TableColumns; track column) {\r\n              <span [ngClass]=\"getDataFieldClasses(column)\"\r\n                    [ngStyle]=\"{ color: getDataFiledColor(column) }\"\r\n              >{{ getValueForColumn(item, column) }}</span>\r\n            }\r\n            @if (EnableActionColumn) {\r\n              <div class=\"action-buttons\">\r\n                @if (EnableButtonModify) {\r\n                  <button\r\n                    class=\"item-action-edit\"\r\n                    mat-icon-button\r\n                    color=\"warn\"\r\n                    (click)=\"modifyItem(getActualIndex($index))\">\r\n                    <mat-icon style=\"color:#ffffff;\">edit</mat-icon>\r\n                  </button>\r\n                }\r\n                @if (EnableButtonDelete) {\r\n                  <button\r\n                    class=\"item-action-delete\"\r\n                    mat-icon-button\r\n                    color=\"warn\"\r\n                    (click)=\"removeItem(getActualIndex($index))\">\r\n                    <mat-icon style=\"color:#ffffff;\">delete</mat-icon>\r\n                  </button>\r\n                }\r\n              </div>\r\n            }\r\n          </div>\r\n        </div>\r\n      </mat-card-content>\r\n    </mat-card>\r\n  }\r\n\r\n  <!-- Move paginator outside the loop -->\r\n  <div class=\"paginator-container\">\r\n    <mat-paginator\r\n      [pageSize]=\"PageSize\"\r\n      [length]=\"TableData.length\"\r\n      [pageSizeOptions]=\"PageSizeOptions\"\r\n      [pageIndex]=\"currentPage\"\r\n      (page)=\"pageChange($event)\"\r\n      showFirstLastButtons>\r\n    </mat-paginator>\r\n  </div>\r\n}\r\n","/*\r\n * Public API Surface of data-table\r\n */\r\n\r\nexport * from './lib/av-data-table';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;;MA+Ba,WAAW,CAAA;IAEb,QAAQ,GAAW,CAAC;IACpB,eAAe,GAAkB,EAAE;IACnC,WAAW,GAAW,CAAC;IACvB,YAAY,GAAc,EAAE;IAC5B,YAAY,GAAc,EAAE;IAC3B,SAAS,GAAU,EAAE;IACtB,IAAI,GAAU,EAAE;IAChB,kBAAkB,GAAY,KAAK;IACnC,kBAAkB,GAAY,KAAK;IACnC,kBAAkB,GAAY,KAAK;AAClC,IAAA,QAAQ,GAAG,IAAI,YAAY,EAA2D;AACtF,IAAA,cAAc,GAAG,IAAI,YAAY,EAAuD;AACxF,IAAA,aAAa,GAAG,IAAI,YAAY,EAA0E;IAC3G,aAAa,GAAY,KAAK;IAC9B,aAAa,GAAY,KAAK;IACvC,mBAAmB,GAAW,EAAE;AACxB,IAAA,QAAQ,GAAyB,MAAK,GAAG;AACzC,IAAA,SAAS,GAAe,MAAK,GAAG;AAExC,IAAA,WAAA,GAAA;;AAIA;;;;;;;;;;AAUG;IACH,QAAQ,GAAA;QACN,IAAI,CAAC,mBAAmB,EAAE;QAC1B,IAAI,CAAC,qBAAqB,EAAE;QAC5B,IAAI,CAAC,eAAe,EAAE;;AAGxB;;;;;;AAMG;IACH,mBAAmB,GAAA;AACjB,QAAA,IAAI,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,EAAE;AAC/E,YAAA,IAAI,CAAC,QAAQ,GAAG,CAAC;;QAEnB,IAAI,IAAI,CAAC,eAAe,KAAK,SAAS,IAAI,IAAI,CAAC,eAAe,KAAK,IAAI,IAAI,IAAI,CAAC,eAAe,CAAC,MAAM,KAAK,CAAC,EAAE;AAC5G,YAAA,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;;AAExC,QAAA,IAAI,IAAI,CAAC,WAAW,KAAK,SAAS,IAAI,IAAI,CAAC,WAAW,KAAK,IAAI,IAAI,IAAI,CAAC,WAAW,GAAG,CAAC,EAAE;AACvF,YAAA,IAAI,CAAC,WAAW,GAAG,CAAC;;;AAItB,QAAA,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE;YACjD,IAAI,CAAC,eAAe,GAAG,CAAC,GAAG,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;;;AAIzF;;;;;;;;;;;;AAYG;AACH,IAAA,WAAW,CAAC,OAAsB,EAAA;;AAEhC,QAAA,IAAI,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,WAAW,EAAE;YACnD,IAAI,CAAC,eAAe,EAAE;;AAEtB,YAAA,IAAI,CAAC,WAAW,GAAG,CAAC;;;AAItB,QAAA,IAAI,OAAO,CAAC,UAAU,CAAC,IAAI,OAAO,CAAC,iBAAiB,CAAC,IAAI,OAAO,CAAC,aAAa,CAAC,EAAE;YAC/E,IAAI,CAAC,mBAAmB,EAAE;;AAG1B,YAAA,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC;YACnE,IAAI,IAAI,CAAC,WAAW,IAAI,UAAU,IAAI,UAAU,GAAG,CAAC,EAAE;AACpD,gBAAA,IAAI,CAAC,WAAW,GAAG,UAAU,GAAG,CAAC;;;;AAKvC;;;;AAIG;IACH,gBAAgB,GAAA;QACd,MAAM,UAAU,GAAG,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,QAAQ;AACnD,QAAA,MAAM,QAAQ,GAAG,UAAU,GAAG,IAAI,CAAC,QAAQ;QAC3C,OAAO,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,UAAU,EAAE,QAAQ,CAAC;;AAGnD;;;;;AAKG;AACH,IAAA,UAAU,CAAC,KAAgB,EAAA;AACzB,QAAA,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,SAAS;AAClC,QAAA,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,QAAQ;;AAGhC;;;;;AAKG;AACH,IAAA,cAAc,CAAC,cAAsB,EAAA;QACnC,OAAO,CAAC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,QAAQ,IAAI,cAAc;;AAG5D;;;;;;AAMG;IACH,eAAe,GAAA;;AAEb,QAAA,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE;;YAErC,MAAM,UAAU,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;YAC5C,MAAM,eAAe,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC;AAEtD,YAAA,IAAI,UAAU,KAAK,eAAe,EAAE;gBAClC,IAAI,CAAC,SAAS,GAAG,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC;;;AAG/B,gBAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC;;;;AAKnC;;;;;;;AAOG;IACH,eAAe,GAAA;;AAEb,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACjB,YAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC;YAC7B,IAAI,CAAC,SAAS,EAAE;;;AAIlB,QAAA,IAAI,IAAI,CAAC,IAAI,EAAE;;YAEb,IAAI,CAAC,IAAI,GAAG,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC;;;AAInC;;;;;;AAMG;IACH,qBAAqB,GAAA;;AAEnB,QAAA,MAAM,gBAAgB,GAAG,IAAI,CAAC,mBAAmB,EAAE;AACnD,QAAA,MAAM,YAAY,GAAG,gBAAgB,CAAC,MAAM;QAE5C,IAAI,YAAY,KAAK,CAAC;YAAE;;;AAIxB,QAAA,IAAI,IAAI,CAAC,kBAAkB,EAAE;AAC3B,YAAA,MAAM,WAAW,GAAG,YAAY,GAAG,CAAC,CAAC;AACrC,YAAA,IAAI,CAAC,mBAAmB,GAAG,WAAW,GAAG;kBACrC,CAAA,OAAA,EAAU,WAAW,CAAA,YAAA;kBACrB,OAAO;;aACN;AACL,YAAA,IAAI,CAAC,mBAAmB,GAAG,CAAA,OAAA,EAAU,YAAY,QAAQ;;;AAI7D;;;;;AAKG;IACH,mBAAmB,GAAA;QACjB,OAAO,IAAI,CAAC;cACR,IAAI,CAAC;cACL,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,WAAW,EAAE,KAAK,QAAQ,CAAC;;AAGvE;;;;;AAKG;AACH,IAAA,qBAAqB,CAAC,MAAe,EAAA;QACnC,OAAO;AACL,YAAA,oBAAoB,EAAE,MAAM,CAAC,KAAK,KAAK,QAAQ;AAC/C,YAAA,mBAAmB,EAAE,MAAM,CAAC,KAAK,KAAK,OAAO;AAC7C,YAAA,kBAAkB,EAAE,MAAM,CAAC,KAAK,KAAK,MAAM;SAC5C;;AAGH;;;;;AAKG;AACH,IAAA,mBAAmB,CAAC,MAAe,EAAA;QACjC,OAAO;AACL,YAAA,aAAa,EAAE,MAAM,CAAC,KAAK,KAAK,QAAQ;AACxC,YAAA,YAAY,EAAE,MAAM,CAAC,KAAK,KAAK,OAAO;AACtC,YAAA,WAAW,EAAE,MAAM,CAAC,KAAK,KAAK,MAAM;SACrC;;AAGH;;;;;AAKG;AACH,IAAA,iBAAiB,CAAC,MAAe,EAAA;QAC/B,OAAO,MAAM,CAAC,KAAK;;AAGrB;;;;;;AAMG;IACH,iBAAiB,CAAC,IAAS,EAAE,MAAe,EAAA;QAC1C,IAAI,CAAC,IAAI,IAAI,CAAC,MAAM,IAAI,CAAC,MAAM,CAAC,KAAK;AAAE,YAAA,OAAO,EAAE;;QAGhD,IAAI,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;YAC9B,OAAO,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,MAAM,CAAC,KAAK,CAAC;;aACzC;;AAEL,YAAA,OAAO,MAAM,CAAC,KAAK,IAAI,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,EAAE;;;AAIzD;;;;;;;;AAQG;IACH,cAAc,CAAC,MAAW,EAAE,IAAY,EAAA;;AAEtC,QAAA,IAAI,CAAC,MAAM;AAAE,YAAA,OAAO,GAAG;;QAGvB,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC;QAC5B,IAAI,KAAK,GAAG,MAAM;;AAGlB,QAAA,KAAK,MAAM,GAAG,IAAI,IAAI,EAAE;YACtB,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS,EAAE;AACzC,gBAAA,OAAO,GAAG;;AAGZ,YAAA,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;;AAExB,gBAAA,KAAK,GAAG,KAAK,CAAC,GAAG,CAAC,IAAI,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC;;iBAC/C;;AAEL,gBAAA,KAAK,GAAG,KAAK,CAAC,GAAG,CAAC;;;;AAKtB,QAAA,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;AACxB,YAAA,OAAO,KAAK,CAAC,MAAM,GAAG,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,GAAG;;AAGlD,QAAA,OAAO,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS,GAAG,KAAK,GAAG,GAAG;;AAG5D;;;;;AAKG;AACH,IAAA,UAAU,CAAC,WAAmB,EAAA;;AAE5B,QAAA,IAAI,IAAI,CAAC,aAAa,EAAE;;AAEtB,YAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;AACtB,gBAAA,KAAK,EAAE,WAAW;AAClB,gBAAA,QAAQ,EAAE,IAAI,CAAC,SAAS,CAAC,MAAM;gBAC/B,WAAW,EAAE,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC;AACxC,gBAAA,QAAQ,EAAE;AACX,aAAA,CAAC;AACF,YAAA,OAAO;;aACF;;YAEL,MAAM,OAAO,GAAG,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC;YACnC,MAAM,WAAW,GAAG,OAAO,CAAC,WAAW,CAAC,CAAC;AACzC,YAAA,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,CAAC;AAC9B,YAAA,IAAI,CAAC,SAAS,GAAG,OAAO;;AAGxB,YAAA,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC;AACnE,YAAA,IAAI,IAAI,CAAC,WAAW,IAAI,UAAU,IAAI,IAAI,CAAC,WAAW,GAAG,CAAC,EAAE;AAC1D,gBAAA,IAAI,CAAC,WAAW,GAAG,UAAU,GAAG,CAAC;;YAGnC,IAAI,IAAI,CAAC,SAAS,CAAC,MAAM,KAAK,CAAC,EAAE;AAC/B,gBAAA,IAAI,CAAC,QAAQ,CAAC,CAAC,WAAW,CAAC,CAAC;;iBACvB;gBACL,IAAI,CAAC,eAAe,EAAE;;AAGxB,YAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;AACtB,gBAAA,KAAK,EAAE,WAAW;AAClB,gBAAA,QAAQ,EAAE,IAAI,CAAC,SAAS,CAAC,MAAM;AAC/B,gBAAA,WAAW,EAAE,WAAW;AACxB,gBAAA,QAAQ,EAAE;AACX,aAAA,CAAC;;;AAIN;;;;;AAKG;AACH,IAAA,UAAU,CAAC,WAAmB,EAAA;;AAE5B,QAAA,IAAI,IAAI,CAAC,aAAa,EAAE;;AAEtB,YAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;AACjB,gBAAA,KAAK,EAAE,WAAW;AAClB,gBAAA,YAAY,EAAE,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC;AACzC,gBAAA,QAAQ,EAAE;AACX,aAAA,CAAC;AACF,YAAA,OAAO;;;QAIT,MAAM,YAAY,GAAG,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC;AAChD,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;AACjB,YAAA,KAAK,EAAE,WAAW;YAClB,YAAY;AACZ,YAAA,QAAQ,EAAE;AACX,SAAA,CAAC;;;AAIJ;;;;;AAKG;AACH,IAAA,gBAAgB,CAAC,EAAO,EAAA;AACtB,QAAA,IAAI,CAAC,QAAQ,GAAG,EAAE;;AAGpB;;;;;AAKG;AACH,IAAA,iBAAiB,CAAC,EAAO,EAAA;AACvB,QAAA,IAAI,CAAC,SAAS,GAAG,EAAE;;AAGrB;;;;;AAKG;AACH,IAAA,UAAU,CAAC,KAAY,EAAA;QACrB,IAAI,KAAK,EAAE;AACT,YAAA,IAAI,CAAC,SAAS,GAAG,CAAC,GAAG,KAAK,CAAC;;AAE3B,YAAA,IAAI,CAAC,WAAW,GAAG,CAAC;;aACf;AACL,YAAA,IAAI,CAAC,SAAS,GAAG,EAAE;AACnB,YAAA,IAAI,CAAC,WAAW,GAAG,CAAC;;;uGAjab,WAAW,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAX,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,WAAW,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,EAAA,QAAA,EAAA,UAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,YAAA,EAAA,cAAA,EAAA,YAAA,EAAA,cAAA,EAAA,IAAA,EAAA,MAAA,EAAA,kBAAA,EAAA,oBAAA,EAAA,kBAAA,EAAA,oBAAA,EAAA,kBAAA,EAAA,oBAAA,EAAA,aAAA,EAAA,eAAA,EAAA,aAAA,EAAA,eAAA,EAAA,EAAA,OAAA,EAAA,EAAA,QAAA,EAAA,UAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,aAAA,EAAA,eAAA,EAAA,EAAA,SAAA,EApBX;AACT,YAAA;AACE,gBAAA,OAAO,EAAE,iBAAiB;AAC1B,gBAAA,WAAW,EAAE,UAAU,CAAC,MAAM,WAAW,CAAC;AAC1C,gBAAA,KAAK,EAAE;AACR;AACF,SAAA,EAAA,aAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECjBH,+vEA4DA,EAAA,MAAA,EAAA,CAAA,k9EAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDzCI,OAAO,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,YAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACP,cAAc,EAAA,QAAA,EAAA,kBAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACd,OAAO,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,SAAA,EAAA,SAAA,EAAA,UAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACP,aAAa,EAAA,QAAA,EAAA,sFAAA,EAAA,QAAA,EAAA,CAAA,WAAA,EAAA,WAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACb,OAAO,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACP,OAAO,2EACP,YAAY,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,WAAA,EAAA,QAAA,EAAA,UAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,sBAAA,EAAA,cAAA,EAAA,UAAA,CAAA,EAAA,OAAA,EAAA,CAAA,MAAA,CAAA,EAAA,QAAA,EAAA,CAAA,cAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;2FAMH,WAAW,EAAA,UAAA,EAAA,CAAA;kBAtBvB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,eAAe,EAAA,SAAA,EACd;AACT,wBAAA;AACE,4BAAA,OAAO,EAAE,iBAAiB;AAC1B,4BAAA,WAAW,EAAE,UAAU,CAAC,iBAAiB,CAAC;AAC1C,4BAAA,KAAK,EAAE;AACR;qBACF,EAAA,OAAA,EACQ;wBACP,OAAO;wBACP,cAAc;wBACd,OAAO;wBACP,aAAa;wBACb,OAAO;wBACP,OAAO;wBACP,YAAY;AACb,qBAAA,EAAA,UAAA,EAGW,IAAI,EAAA,QAAA,EAAA,+vEAAA,EAAA,MAAA,EAAA,CAAA,k9EAAA,CAAA,EAAA;wDAIP,QAAQ,EAAA,CAAA;sBAAhB;gBACQ,eAAe,EAAA,CAAA;sBAAvB;gBACQ,WAAW,EAAA,CAAA;sBAAnB;gBACQ,YAAY,EAAA,CAAA;sBAApB;gBACQ,YAAY,EAAA,CAAA;sBAApB;gBAEQ,IAAI,EAAA,CAAA;sBAAZ;gBACQ,kBAAkB,EAAA,CAAA;sBAA1B;gBACQ,kBAAkB,EAAA,CAAA;sBAA1B;gBACQ,kBAAkB,EAAA,CAAA;sBAA1B;gBACS,QAAQ,EAAA,CAAA;sBAAjB;gBACS,cAAc,EAAA,CAAA;sBAAvB;gBACS,aAAa,EAAA,CAAA;sBAAtB;gBACQ,aAAa,EAAA,CAAA;sBAArB;gBACQ,aAAa,EAAA,CAAA;sBAArB;;;AE/CH;;AAEG;;ACFH;;AAEG;;;;"}
+{"version":3,"file":"avoraui-av-data-table.mjs","sources":["../../../projects/av-data-table/src/lib/av-data-table.ts","../../../projects/av-data-table/src/lib/av-data-table.html","../../../projects/av-data-table/src/public-api.ts","../../../projects/av-data-table/src/avoraui-av-data-table.ts"],"sourcesContent":["import { Component, EventEmitter, forwardRef, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';\r\nimport { MatCard, MatCardContent } from \"@angular/material/card\";\r\nimport { MatIcon } from \"@angular/material/icon\";\r\nimport { MatIconButton } from \"@angular/material/button\";\r\nimport { CommonModule } from \"@angular/common\";\r\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from \"@angular/forms\";\r\nimport { MatPaginator, PageEvent } from \"@angular/material/paginator\";\r\nimport { MatMenuModule } from \"@angular/material/menu\";\r\nimport { MatFormFieldModule } from \"@angular/material/form-field\";\r\nimport { MatInputModule } from \"@angular/material/input\";\r\nimport { MatSelectModule } from \"@angular/material/select\";\r\nimport { MatButtonModule } from \"@angular/material/button\";\r\nimport { FormsModule } from \"@angular/forms\";\r\nimport { Headers, Columns } from './table-prop';\r\n\r\n/**\r\n * AvDataTable is a standalone Angular component that provides a feature-rich, customizable\r\n * data table interface with advanced pagination, dynamic column rendering, and interactive row actions.\r\n * It offers a flexible and powerful solution for displaying and managing tabular data with support for\r\n * nested object properties, custom styling, and comprehensive CRUD operations.\r\n *\r\n * The component implements ControlValueAccessor to integrate seamlessly with Angular reactive forms,\r\n * supporting bidirectional data binding and form validation. It features server-side and client-side\r\n * pagination, dynamic grid layout calculation, configurable action columns, and event-driven architecture\r\n * for parent component interaction. The table supports nested property access with dot notation, custom\r\n * column alignment, color customization, and intelligent data synchronization.\r\n *\r\n * @template T - The type of items displayed in the table rows.\r\n *\r\n * <p><strong>Features</strong></p>\r\n * <ul>\r\n *    <li>Advanced pagination with configurable page sizes and options</li>\r\n *    <li>Dynamic grid template generation based on column count</li>\r\n *    <li>Nested object property access using dot notation (e.g., 'user.address.city')</li>\r\n *    <li>Array value handling with automatic formatting and joining</li>\r\n *    <li>Configurable action column with modify and delete operations</li>\r\n *    <li>Individual control over action button visibility and disabled states</li>\r\n *    <li>Custom column alignment (left, center, right) for headers and data</li>\r\n *    <li>Dynamic color customization for table cells</li>\r\n *    <li>Event emitters for modify, add, and remove operations</li>\r\n *    <li>Automatic page adjustment when data changes or items are removed</li>\r\n *    <li>Two-way data synchronization between internal and external data sources</li>\r\n *    <li>Angular reactive forms integration via ControlValueAccessor</li>\r\n *    <li>Material Design UI components integration</li>\r\n *    <li>Change detection optimization with explicit data reference updates</li>\r\n *    <li>Graceful handling of null/undefined values with fallback display</li>\r\n * </ul>\r\n *\r\n * <p><strong>Technical Implementation</strong></p>\r\n * <ul>\r\n *    <li>Dynamic CSS Grid layout calculation for responsive column sizing</li>\r\n *    <li>Paginated data slicing with index transformation for accurate positioning</li>\r\n *    <li>Nested property resolution with array mapping and filtering</li>\r\n *    <li>Data synchronization using efficient object reference and length comparison</li>\r\n *    <li>Event-driven communication pattern with parent components</li>\r\n *    <li>Lifecycle management with OnInit and OnChanges implementations</li>\r\n *    <li>Conditional action execution based on disabled state flags</li>\r\n *    <li>Automatic pagination state management and validation</li>\r\n * </ul>\r\n *\r\n * <p><strong>Event Handling</strong></p>\r\n * <ul>\r\n *    <li><b>onModify:</b> Emits when a row modification is requested, includes index, item data, and disabled state</li>\r\n *    <li><b>onNewItemAdded:</b> Emits when a new item is added to the table</li>\r\n *    <li><b>onItemRemoved:</b> Emits when an item is removed, includes index, data size, removed item, and disabled state</li>\r\n * </ul>\r\n *\r\n * <p><strong>Configuration Options</strong></p>\r\n * <ul>\r\n *    <li>PageSize: Number of rows per page (default: 5)</li>\r\n *    <li>PageSizeOptions: Array of available page size options</li>\r\n *    <li>TableHeaders: Column header definitions with labels and alignment</li>\r\n *    <li>TableColumns: Column data definitions with field names, alignment, and colors</li>\r\n *    <li>EnableActionColumn: Toggle visibility of action column</li>\r\n *    <li>EnableButtonDelete: Control delete button visibility</li>\r\n *    <li>EnableButtonModify: Control modify button visibility</li>\r\n *    <li>DisableRemove: Prevent item removal while maintaining event emission</li>\r\n *    <li>DisableModify: Prevent item modification while maintaining event emission</li>\r\n * </ul>\r\n *\r\n * <p><strong>Authorship</strong></p>\r\n * <ul>\r\n *    <li><b>Author:</b> Dileesha Ekanayake</li>\r\n *    <li><b>Email:</b> dileesha.r.ekanayake@gmail.com</li>\r\n *    <li><b>Created:</b> 2024</li>\r\n *    <li><b>Version:</b> 1.0.0</li>\r\n *    <li><b>Responsibility:</b> Design, implementation, and documentation of the data table component\r\n *        with Angular Material integration. Provides comprehensive table functionality including\r\n *        pagination, nested property access, dynamic styling, CRUD operations, and seamless form\r\n *        control integration with reactive forms support. Ensures robust data synchronization,\r\n *        event-driven architecture, and flexible configuration options for diverse use cases.</li>\r\n * </ul>\r\n */\r\n@Component({\r\n  selector: 'av-data-table',\r\n  providers: [\r\n    {\r\n      provide: NG_VALUE_ACCESSOR,\r\n      useExisting: forwardRef(() => AvDataTable),\r\n      multi: true\r\n    }\r\n  ],\r\n  imports: [\r\n    MatCard,\r\n    MatCardContent,\r\n    MatIcon,\r\n    MatIconButton,\r\n    CommonModule,\r\n    MatPaginator,\r\n    MatMenuModule,\r\n    MatFormFieldModule,\r\n    MatInputModule,\r\n    MatSelectModule,\r\n    MatButtonModule,\r\n    FormsModule\r\n  ],\r\n  templateUrl: './av-data-table.html',\r\n  styleUrl: './av-data-table.css',\r\n  standalone: true\r\n})\r\nexport class AvDataTable implements OnInit, OnChanges, ControlValueAccessor {\r\n\r\n  @Input() PageSize: number = 5;\r\n  @Input() PageSizeOptions: Array<number> = [];\r\n  @Input() currentPage: number = 0;\r\n  @Input() TableHeaders: Headers[] = [];\r\n  @Input() TableColumns: Columns[] = [];\r\n  protected TableData: any[] = [];\r\n  @Input() Data: any[] = [];\r\n  @Input() EnableActionColumn: boolean = false;\r\n  @Input() EnableButtonDelete: boolean = false;\r\n  @Input() EnableButtonModify: boolean = false;\r\n  @Output() onModify = new EventEmitter<{ index: number; modifiedItem: any, disabled: boolean }>();\r\n  @Output() onNewItemAdded = new EventEmitter<{ index: number, dataSize: number, removedItem: any }>();\r\n  @Output() onItemRemoved = new EventEmitter<{ index: number, dataSize: number, removedItem: any, disabled: boolean }>();\r\n  @Input() DisableRemove: boolean = false;\r\n  @Input() DisableModify: boolean = false;\r\n  gridTemplateColumns: string = '';\r\n\r\n  // New features state\r\n  sortField: string = '';\r\n  sortDirection: 'asc' | 'desc' | '' = '';\r\n  globalSearchTerm: string = '';\r\n  columnFilters: Map<string, { matchMode: 'all' | 'any', rules: { operator: string, value: string }[] }> = new Map();\r\n  processedData: any[] = [];\r\n\r\n  private onChange: (value: any) => void = () => { };\r\n  private onTouched: () => void = () => { };\r\n\r\n  constructor(\r\n  ) {\r\n  }\r\n\r\n  /**\r\n   * Lifecycle hook that is called after Angular has initialized all data-bound properties of a directive.\r\n   * This method is used to perform initialization logic for the component.\r\n   *\r\n   * It executes the following:\r\n   * - Initializes the paginator for managing paginated data display.\r\n   * - Calculates the grid template for layout adjustments.\r\n   * - Synchronizes data sources to ensure the component has up-to-date data.\r\n   *\r\n   * @return {void} This method does not return any value.\r\n   */\r\n  ngOnInit(): void {\r\n    this.initializePaginator();\r\n    this.calculateGridTemplate();\r\n    this.syncDataSources();\r\n    this.applyAllFilters();\r\n  }\r\n\r\n  /**\r\n   * Initializes the paginator configuration. Sets default values for PageSize, PageSizeOptions,\r\n   * and currentPage if they are undefined, null, or invalid. Ensures the PageSize is included\r\n   * in the PageSizeOptions array and sorts the options in ascending order.\r\n   *\r\n   * @return {void} Does not return a value.\r\n   */\r\n  initializePaginator(): void {\r\n    if (this.PageSize === undefined || this.PageSize === null || this.PageSize <= 0) {\r\n      this.PageSize = 5;\r\n    }\r\n    if (this.PageSizeOptions === undefined || this.PageSizeOptions === null || this.PageSizeOptions.length === 0) {\r\n      this.PageSizeOptions = [5, 10, 20, 50];\r\n    }\r\n    if (this.currentPage === undefined || this.currentPage === null || this.currentPage < 0) {\r\n      this.currentPage = 0;\r\n    }\r\n\r\n    // Ensure PageSize is included in PageSizeOptions if not already present\r\n    if (!this.PageSizeOptions.includes(this.PageSize)) {\r\n      this.PageSizeOptions = [...this.PageSizeOptions, this.PageSize].sort((a, b) => a - b);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Handles changes to the component's input properties during the lifecycle of the component.\r\n   *\r\n   * This method is triggered whenever an input property bound to the component changes. It processes\r\n   * updates to properties such as `Data`, `PageSize`, `PageSizeOptions`, and `currentPage`, and\r\n   * ensures the internal state is kept in sync with the new inputs. Additionally, it updates the paginator\r\n   * and adjusts the current page as necessary.\r\n   *\r\n   * @param {SimpleChanges} changes - A collection of SimpleChange objects representing the changed properties.\r\n   * Each `SimpleChange` object provides information like the current and previous values as well as a flag\r\n   * indicating if it is the first change to this input.\r\n   * @return {void} - This method does not return any value.\r\n   */\r\n  ngOnChanges(changes: SimpleChanges): void {\r\n    // Listen for changes in the external Data input\r\n    if (changes['Data'] && !changes['Data'].firstChange) {\r\n      this.syncDataSources();\r\n      this.applyAllFilters();\r\n      // Reset to first page when data changes\r\n      this.currentPage = 0;\r\n    }\r\n\r\n    // Handle changes in pagination settings\r\n    if (changes['PageSize'] || changes['PageSizeOptions'] || changes['currentPage']) {\r\n      this.initializePaginator();\r\n\r\n      // Validate current page doesn't exceed available pages\r\n      const totalPages = Math.ceil(this.processedData.length / this.PageSize);\r\n      if (this.currentPage >= totalPages && totalPages > 0) {\r\n        this.currentPage = totalPages - 1;\r\n      }\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Retrieves a subset of data from the full dataset based on the current page and page size.\r\n   *\r\n   * @return {Array} A portion of the TableData array corresponding to the current page.\r\n   */\r\n  getPaginatedData(): Array<any> {\r\n    const startIndex = this.currentPage * this.PageSize;\r\n    const endIndex = startIndex + this.PageSize;\r\n    return this.processedData.slice(startIndex, endIndex);\r\n  }\r\n\r\n  /**\r\n   * Handles changes in the pagination state, such as changing the current page or the page size.\r\n   *\r\n   * @param {PageEvent} event - The event triggered by a pagination action that contains the updated page index and page size.\r\n   * @return {void} This method does not return anything.\r\n   */\r\n  pageChange(event: PageEvent): void {\r\n    this.currentPage = event.pageIndex;\r\n    this.PageSize = event.pageSize;\r\n  }\r\n\r\n  /**\r\n   * Calculates the actual index in the dataset based on the paginated index.\r\n   *\r\n   * @param {number} paginatedIndex - The index within the current page of paginated data.\r\n   * @return {number} The actual index in the entire dataset.\r\n   */\r\n  getActualIndex(paginatedIndex: number): number {\r\n    const item = this.getPaginatedData()[paginatedIndex];\r\n    return item ? this.TableData.indexOf(item) : -1;\r\n  }\r\n\r\n  /**\r\n   * Synchronizes external data source with the internal TableData.\r\n   * If the external Data differs from the current TableData, the TableData\r\n   * is updated with the values from Data and a change notification is triggered.\r\n   *\r\n   * @return {void} This method does not return a value.\r\n   */\r\n  syncDataSources(): void {\r\n    if (this.Data && (this.TableData.length !== this.Data.length || this.TableData !== this.Data)) {\r\n      this.TableData = [...this.Data];\r\n      this.applyAllFilters();\r\n      this.onChange(this.TableData);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Updates the form value by notifying changes and updating external data if available.\r\n   * This method triggers the onChange callback with the current table data\r\n   * and notifies that the form field has been touched. Additionally, it updates\r\n   * the external data reference to ensure proper change detection in the parent components.\r\n   *\r\n   * @return {void} No return value.\r\n   */\r\n  updateFormValue(): void {\r\n    // Notify the form about the change\r\n    if (this.onChange) {\r\n      this.onChange(this.TableData);\r\n      this.onTouched();\r\n    }\r\n\r\n    // Also update the external Data if it exists\r\n    if (this.Data) {\r\n      // Create a new reference to trigger OnChanges in parent components\r\n      this.Data = [...this.TableData];\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Calculates and sets the grid template for a layout based on the number of displayed headers\r\n   * and the presence of an action column. The grid template determines the column structure with\r\n   * equal fractions for data columns and a fixed width for the action column if enabled.\r\n   *\r\n   * @return {void} Does not return a value. Sets the `gridTemplateColumns` property to the calculated template.\r\n   */\r\n  calculateGridTemplate(): void {\r\n    // Calculate grid template based on columns count\r\n    const displayedHeaders = this.getDisplayedHeaders();\r\n    const columnsCount = displayedHeaders.length;\r\n\r\n    if (columnsCount === 0) return;\r\n\r\n    // Create grid template with equal fractions for data columns\r\n    // and fixed width for action column if enabled\r\n    if (this.EnableActionColumn) {\r\n      const dataColumns = columnsCount - 1; // Subtract action column\r\n      this.gridTemplateColumns = dataColumns > 0\r\n        ? `repeat(${dataColumns}, 1fr) 140px`\r\n        : '140px';\r\n    } else {\r\n      this.gridTemplateColumns = `repeat(${columnsCount}, 1fr)`;\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Retrieves the headers that should be displayed in the table.\r\n   * The method includes or excludes the \"action\" column based on the value of `EnableActionColumn`.\r\n   *\r\n   * @return {TableProp[]} An array of headers to be displayed in the table. If `EnableActionColumn` is false, the \"action\" column is excluded.\r\n   */\r\n  getDisplayedHeaders(): Headers[] {\r\n    return this.EnableActionColumn\r\n      ? this.TableHeaders\r\n      : this.TableHeaders.filter(h => h.label.toLowerCase() !== 'action');\r\n  }\r\n\r\n  /**\r\n   * Generates and returns an object representing CSS classes for a header based on its alignment property.\r\n   *\r\n   * @param {TableProp} header - An object containing header properties, including an alignment property ('center', 'right', or 'left').\r\n   * @return {Object} An object mapping class names to a boolean indicating their applicability based on the alignment of the header.\r\n   */\r\n  getHeaderFieldClasses(header: Headers): object {\r\n    return {\r\n      'header-text-center': header.align === 'center',\r\n      'header-text-right': header.align === 'right',\r\n      'header-text-left': header.align === 'left',\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Generates a mapping of CSS classes for a data field based on the alignment property of the given column.\r\n   *\r\n   * @param {Columns} column - The column object containing alignment information.\r\n   * @return {Object} An object where the keys are class names, and the values are booleans indicating whether each class applies.\r\n   */\r\n  getDataFieldClasses(column: Columns): object {\r\n    return {\r\n      'text-center': column.align === 'center',\r\n      'text-right': column.align === 'right',\r\n      'text-left': column.align === 'left',\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Retrieves the color property from the given column object.\r\n   *\r\n   * @param {Columns} column - The column object containing the color property.\r\n   * @return {string} The color associated with the column.\r\n   */\r\n  getDataFiledColor(column: Columns): any {\r\n    return column.color;\r\n  }\r\n\r\n  /**\r\n   * Retrieves the value of a specified column from the given item.\r\n   *\r\n   * @param {any} item - The object containing the data to extract the value from.\r\n   * @param {Columns} column - The column definition, including the field name or path.\r\n   * @return {string} The value of the specified column for the given item. If the field is not found, an empty string is returned.\r\n   */\r\n  getValueForColumn(item: any, column: Columns): string {\r\n    if (!item || !column || !column.field) return '';\r\n\r\n    // Check if the field has dot notation (e.g., 'gender.name')\r\n    if (column.field.includes('.')) {\r\n      return this.getNestedValue(item, column.field);\r\n    } else {\r\n      // Handle standard fields\r\n      return column.field in item ? item[column.field] : '';\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Retrieves a nested value from a given object based on a dot-separated path string.\r\n   * If the path does not exist or the value is undefined/null, it returns a placeholder '-'.\r\n   * If accessing an array, it maps the values at the given key and processes them.\r\n   *\r\n   * @param {any} object - The object from which the nested value is extracted.\r\n   * @param {string} path - The dot-separated string representing the path to the desired value.\r\n   * @return {any} The value found at the given path, an array joined into a string, or '-' if not found.\r\n   */\r\n  getNestedValue(object: any, path: string): any {\r\n    // Return early if object is null or undefined\r\n    if (!object) return '-';\r\n\r\n    // Split the path into individual keys (e.g., \"gender.name\" → [\"gender\", \"name\"])\r\n    const keys = path.split('.');\r\n    let value = object;\r\n\r\n    // Navigate through the object hierarchy\r\n    for (const key of keys) {\r\n      if (value === null || value === undefined) {\r\n        return '-';\r\n      }\r\n\r\n      if (Array.isArray(value)) {\r\n        // If we encounter an array, map over its items to extract the property\r\n        value = value.map(item => item[key]).filter(Boolean);\r\n      } else {\r\n        // Access the next property level\r\n        value = value[key];\r\n      }\r\n    }\r\n\r\n    // Format the final result\r\n    if (Array.isArray(value)) {\r\n      return value.length > 0 ? value.join(', ') : '-';\r\n    }\r\n\r\n    return value !== null && value !== undefined ? value : '-';\r\n  }\r\n\r\n  /**\r\n   * Removes an item from the data table at the specified index.\r\n   *\r\n   * @param {number} actualIndex - The index of the item to remove from the data table.\r\n   * @return {void} This method does not return a value.\r\n   */\r\n  removeItem(actualIndex: number): void {\r\n    // Check disable condition FIRST - before touching any data\r\n    if (this.DisableRemove) {\r\n      // Don't remove from TableData, just emit event for parent to handle\r\n      this.onItemRemoved.emit({\r\n        index: actualIndex,\r\n        dataSize: this.TableData.length,\r\n        removedItem: this.TableData[actualIndex], // Get the item that would be removed\r\n        disabled: true\r\n      });\r\n      return; // Exit early - don't modify TableData\r\n    } else {\r\n      // Only proceed with actual removal if not disabled\r\n      const newData = [...this.TableData];\r\n      const removedData = newData[actualIndex]; // Get the item being removed\r\n      newData.splice(actualIndex, 1);\r\n      this.TableData = newData;\r\n\r\n      // Rest of your existing logic...\r\n      const totalPages = Math.ceil(this.TableData.length / this.PageSize);\r\n      if (this.currentPage >= totalPages && this.currentPage > 0) {\r\n        this.currentPage = totalPages - 1;\r\n      }\r\n\r\n      if (this.TableData.length === 0) {\r\n        this.onChange([removedData]);\r\n      } else {\r\n        this.updateFormValue();\r\n      }\r\n\r\n      this.applyAllFilters();\r\n\r\n      this.onItemRemoved.emit({\r\n        index: actualIndex,\r\n        dataSize: this.TableData.length,\r\n        removedItem: removedData,\r\n        disabled: false\r\n      });\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Modifies an item at the specified index in the dataset. If the modification is disabled, emits an event without making any changes.\r\n   *\r\n   * @param {number} actualIndex - The index of the item to be modified in the dataset.\r\n   * @return {void} This method does not return a value.\r\n   */\r\n  modifyItem(actualIndex: number): void {\r\n    // Check disable condition FIRST - before any modification logic\r\n    if (this.DisableModify) {\r\n      // Emit event for parent to handle the disabled state\r\n      this.onModify.emit({\r\n        index: actualIndex,\r\n        modifiedItem: this.TableData[actualIndex],\r\n        disabled: true\r\n      });\r\n      return; // Exit early - don't proceed with modification\r\n    }\r\n\r\n    // Only proceed with modification if not disabled\r\n    const modifiedItem = this.TableData[actualIndex];\r\n    this.onModify.emit({\r\n      index: actualIndex,\r\n      modifiedItem,\r\n      disabled: false\r\n    });\r\n  }\r\n\r\n  // ControlValueAccessor interface implementation\r\n  /**\r\n   * Registers a callback function to be called whenever the value changes.\r\n   *\r\n   * @param {any} fn - The function to be executed on a value change.\r\n   * @return {void} This method does not return a value.\r\n   */\r\n  registerOnChange(fn: any): void {\r\n    this.onChange = fn;\r\n  }\r\n\r\n  /**\r\n   * Registers a callback function that should be called when the control is touched.\r\n   *\r\n   * @param {any} fn - The callback function to execute when the control is touched.\r\n   * @return {void} This method does not return a value.\r\n   */\r\n  registerOnTouched(fn: any): void {\r\n    this.onTouched = fn;\r\n  }\r\n\r\n  /**\r\n   * Writes a new value to the table data and resets to the first page.\r\n   *\r\n   * @param {any[]} value - The array of data to be written to the table.\r\n   * @return {void} Does not return a value.\r\n   */\r\n  writeValue(value: any[]): void {\r\n    if (value) {\r\n      this.TableData = [...value];\r\n      this.applyAllFilters();\r\n      // Reset to first page when new data is written\r\n      this.currentPage = 0;\r\n    } else {\r\n      this.TableData = [];\r\n      this.processedData = [];\r\n      this.currentPage = 0;\r\n    }\r\n  }\r\n\r\n  // Sorting Logic\r\n  toggleSort(field: string): void {\r\n    if (this.sortField === field) {\r\n      if (this.sortDirection === 'asc') {\r\n        this.sortDirection = 'desc';\r\n      } else if (this.sortDirection === 'desc') {\r\n        this.sortDirection = '';\r\n        this.sortField = '';\r\n      } else {\r\n        this.sortDirection = 'asc';\r\n      }\r\n    } else {\r\n      this.sortField = field;\r\n      this.sortDirection = 'asc';\r\n    }\r\n    this.applyAllFilters();\r\n  }\r\n\r\n  // Filtering Logic\r\n  applyAllFilters(): void {\r\n    let data = [...this.TableData];\r\n\r\n    // 1. Global Search\r\n    if (this.globalSearchTerm) {\r\n      const term = this.globalSearchTerm.toLowerCase();\r\n      data = data.filter(item => {\r\n        return this.TableColumns.some(col => {\r\n          const val = this.getValueForColumn(item, col);\r\n          return val?.toString().toLowerCase().includes(term);\r\n        });\r\n      });\r\n    }\r\n\r\n    // 2. Column-wise Filters\r\n    this.columnFilters.forEach((filter, field) => {\r\n      if (filter.rules.length > 0) {\r\n        data = data.filter(item => {\r\n          const val = (this.getValueForColumn(item, { field, align: 'left' } as any) || '').toString().toLowerCase();\r\n          const ruleResults = filter.rules.map(rule => {\r\n            const ruleVal = rule.value.toLowerCase();\r\n            switch (rule.operator) {\r\n              case 'starts': return val.startsWith(ruleVal);\r\n              case 'contains': return val.includes(ruleVal);\r\n              case 'not_contains': return !val.includes(ruleVal);\r\n              case 'ends': return val.endsWith(ruleVal);\r\n              case 'equals': return val === ruleVal;\r\n              case 'not_equals': return val !== ruleVal;\r\n              default: return true;\r\n            }\r\n          });\r\n\r\n          return filter.matchMode === 'all'\r\n            ? ruleResults.every(r => r)\r\n            : ruleResults.some(r => r);\r\n        });\r\n      }\r\n    });\r\n\r\n    // 3. Sorting\r\n    if (this.sortField && this.sortDirection) {\r\n      data.sort((a, b) => {\r\n        const valA = this.getValueForColumn(a, { field: this.sortField, align: 'left' } as any);\r\n        const valB = this.getValueForColumn(b, { field: this.sortField, align: 'left' } as any);\r\n\r\n        if (valA < valB) return this.sortDirection === 'asc' ? -1 : 1;\r\n        if (valA > valB) return this.sortDirection === 'asc' ? 1 : -1;\r\n        return 0;\r\n      });\r\n    }\r\n\r\n    this.processedData = data;\r\n\r\n    // Adjust pagination if current page is out of bounds\r\n    const totalPages = Math.ceil(this.processedData.length / this.PageSize);\r\n    if (this.currentPage >= totalPages && totalPages > 0) {\r\n      this.currentPage = totalPages - 1;\r\n    }\r\n  }\r\n\r\n  clearAllFilters(): void {\r\n    this.globalSearchTerm = '';\r\n    this.columnFilters.clear();\r\n    this.sortField = '';\r\n    this.sortDirection = '';\r\n    this.applyAllFilters();\r\n  }\r\n\r\n  updateGlobalSearch(event: any): void {\r\n    this.globalSearchTerm = event.target.value;\r\n    this.applyAllFilters();\r\n  }\r\n\r\n  // Column filter management\r\n  setColumnFilter(field: string, filter: any): void {\r\n    if (!filter || filter.rules.length === 0) {\r\n      this.columnFilters.delete(field);\r\n    } else {\r\n      this.columnFilters.set(field, filter);\r\n    }\r\n    this.applyAllFilters();\r\n  }\r\n\r\n  getColumnFilter(field: string): { matchMode: 'all' | 'any', rules: { operator: string, value: string }[] } {\r\n    let filter = this.columnFilters.get(field);\r\n    if (!filter) {\r\n      filter = { matchMode: 'all', rules: [{ operator: 'starts', value: '' }] };\r\n      this.columnFilters.set(field, filter);\r\n    }\r\n    return filter;\r\n  }\r\n\r\n  // Check if a column has an active filter with actual values (stable during change detection)\r\n  hasActiveFilter(field: string): boolean {\r\n    const filter = this.columnFilters.get(field);\r\n    if (!filter) return false;\r\n    return filter.rules.some(rule => rule.value !== '');\r\n  }\r\n}\r\n","<!-- Global Search and Clear -->\r\n<div class=\"table-top-actions\">\r\n  <button mat-stroked-button (click)=\"clearAllFilters()\" class=\"clear-filters-btn\">\r\n    <mat-icon>filter_alt_off</mat-icon> Clear\r\n  </button>\r\n  <div class=\"spacer\"></div>\r\n  <mat-form-field appearance=\"outline\" class=\"global-search-field\">\r\n    <mat-icon matIconPrefix>search</mat-icon>\r\n    <mat-label>Keyboard Search</mat-label>\r\n    <input matInput [(ngModel)]=\"globalSearchTerm\" (input)=\"applyAllFilters()\" placeholder=\"Search...\">\r\n  </mat-form-field>\r\n</div>\r\n\r\n@if (processedData.length > 0) {\r\n<div class=\"item-header-row\" [ngStyle]=\"{'grid-template-columns': gridTemplateColumns}\">\r\n  @for (header of getDisplayedHeaders(); track $index) {\r\n  <div class=\"header-cell\" [ngClass]=\"getHeaderFieldClasses(header)\">\r\n    <div class=\"header-content\" (click)=\"TableColumns[$index] ? toggleSort(TableColumns[$index].field) : null\">\r\n      <strong>{{ header.label }}</strong>\r\n      @if (TableColumns[$index]) {\r\n      <mat-icon class=\"sort-icon\" [ngClass]=\"{'active': sortField === TableColumns[$index].field}\">\r\n        @if (sortField !== TableColumns[$index].field || sortDirection === '') {\r\n        unfold_more\r\n        } @else if (sortDirection === 'asc') {\r\n        expand_less\r\n        } @else {\r\n        expand_more\r\n        }\r\n      </mat-icon>\r\n      }\r\n    </div>\r\n\r\n    @if (TableColumns[$index]) {\r\n    <button mat-icon-button [matMenuTriggerFor]=\"filterMenu\" class=\"filter-btn\">\r\n      <mat-icon [class.active-filter]=\"hasActiveFilter(TableColumns[$index].field)\">filter_list</mat-icon>\r\n    </button>\r\n\r\n    <mat-menu #filterMenu=\"matMenu\" class=\"filter-menu-panel\">\r\n      <div class=\"filter-container\" (click)=\"$event.stopPropagation()\">\r\n        <mat-form-field appearance=\"outline\" class=\"full-width compact\">\r\n          <mat-select [(ngModel)]=\"getColumnFilter(TableColumns[$index].field).matchMode\">\r\n            <mat-option value=\"all\">Match All</mat-option>\r\n            <mat-option value=\"any\">Match Any</mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n\r\n        @for (rule of getColumnFilter(TableColumns[$index].field).rules; track rule; let ri = $index) {\r\n        <div class=\"filter-rule\">\r\n          <mat-form-field appearance=\"outline\" class=\"full-width compact\">\r\n            <mat-select [(ngModel)]=\"rule.operator\">\r\n              <mat-option value=\"starts\">Starts with</mat-option>\r\n              <mat-option value=\"contains\">Contains</mat-option>\r\n              <mat-option value=\"not_contains\">Not contains</mat-option>\r\n              <mat-option value=\"ends\">Ends with</mat-option>\r\n              <mat-option value=\"equals\">Equals</mat-option>\r\n              <mat-option value=\"not_equals\">Not equals</mat-option>\r\n            </mat-select>\r\n          </mat-form-field>\r\n          <mat-form-field appearance=\"outline\" class=\"full-width compact\">\r\n            <input matInput [(ngModel)]=\"rule.value\" placeholder=\"Value\">\r\n          </mat-form-field>\r\n        </div>\r\n        }\r\n\r\n        <button mat-button color=\"primary\" class=\"add-rule-btn\"\r\n          (click)=\"getColumnFilter(TableColumns[$index].field).rules.push({operator: 'starts', value: ''})\">\r\n          <mat-icon>add</mat-icon> Add Rule\r\n        </button>\r\n\r\n        <div class=\"filter-actions\">\r\n          <button mat-button\r\n            (click)=\"getColumnFilter(TableColumns[$index].field).rules = [{operator: 'starts', value: ''}]; setColumnFilter(TableColumns[$index].field, null)\">Clear</button>\r\n          <div class=\"spacer\"></div>\r\n          <button mat-flat-button color=\"primary\"\r\n            (click)=\"setColumnFilter(TableColumns[$index].field, getColumnFilter(TableColumns[$index].field))\">Apply</button>\r\n        </div>\r\n      </div>\r\n    </mat-menu>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n\r\n<!-- Display only the paginated items -->\r\n@for (item of getPaginatedData(); track $index) {\r\n<mat-card>\r\n  <mat-card-content>\r\n    <div class=\"item-details\">\r\n      <div class=\"item-row\" [ngStyle]=\"{'grid-template-columns': gridTemplateColumns}\">\r\n        @for (column of TableColumns; track column) {\r\n        <span [ngClass]=\"getDataFieldClasses(column)\" [ngStyle]=\"{ color: getDataFiledColor(column) }\">{{\r\n          getValueForColumn(item, column) }}</span>\r\n        }\r\n        @if (EnableActionColumn) {\r\n        <div class=\"action-buttons\">\r\n          @if (EnableButtonModify) {\r\n          <button class=\"item-action-edit\" mat-icon-button color=\"warn\" (click)=\"modifyItem(getActualIndex($index))\">\r\n            <mat-icon style=\"color:#ffffff;\">edit</mat-icon>\r\n          </button>\r\n          }\r\n          @if (EnableButtonDelete) {\r\n          <button class=\"item-action-delete\" mat-icon-button color=\"warn\" (click)=\"removeItem(getActualIndex($index))\">\r\n            <mat-icon style=\"color:#ffffff;\">delete</mat-icon>\r\n          </button>\r\n          }\r\n        </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  </mat-card-content>\r\n</mat-card>\r\n}\r\n\r\n<!-- Move paginator outside the loop -->\r\n<div class=\"paginator-container\">\r\n  <mat-paginator [pageSize]=\"PageSize\" [length]=\"processedData.length\" [pageSizeOptions]=\"PageSizeOptions\"\r\n    [pageIndex]=\"currentPage\" (page)=\"pageChange($event)\" showFirstLastButtons>\r\n  </mat-paginator>\r\n</div>\r\n} @else {\r\n<div class=\"no-data-msg\">\r\n  No items found matching your search/filters.\r\n</div>\r\n}","/*\r\n * Public API Surface of data-table\r\n */\r\n\r\nexport * from './lib/av-data-table';\r\nexport * from './lib/table-prop';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/index.d.ts

@@ -13,6 +13,84 @@ interface Columns {
     color?: string;
 }
 
+/**
+ * AvDataTable is a standalone Angular component that provides a feature-rich, customizable
+ * data table interface with advanced pagination, dynamic column rendering, and interactive row actions.
+ * It offers a flexible and powerful solution for displaying and managing tabular data with support for
+ * nested object properties, custom styling, and comprehensive CRUD operations.
+ *
+ * The component implements ControlValueAccessor to integrate seamlessly with Angular reactive forms,
+ * supporting bidirectional data binding and form validation. It features server-side and client-side
+ * pagination, dynamic grid layout calculation, configurable action columns, and event-driven architecture
+ * for parent component interaction. The table supports nested property access with dot notation, custom
+ * column alignment, color customization, and intelligent data synchronization.
+ *
+ * @template T - The type of items displayed in the table rows.
+ *
+ * <p><strong>Features</strong></p>
+ * <ul>
+ *    <li>Advanced pagination with configurable page sizes and options</li>
+ *    <li>Dynamic grid template generation based on column count</li>
+ *    <li>Nested object property access using dot notation (e.g., 'user.address.city')</li>
+ *    <li>Array value handling with automatic formatting and joining</li>
+ *    <li>Configurable action column with modify and delete operations</li>
+ *    <li>Individual control over action button visibility and disabled states</li>
+ *    <li>Custom column alignment (left, center, right) for headers and data</li>
+ *    <li>Dynamic color customization for table cells</li>
+ *    <li>Event emitters for modify, add, and remove operations</li>
+ *    <li>Automatic page adjustment when data changes or items are removed</li>
+ *    <li>Two-way data synchronization between internal and external data sources</li>
+ *    <li>Angular reactive forms integration via ControlValueAccessor</li>
+ *    <li>Material Design UI components integration</li>
+ *    <li>Change detection optimization with explicit data reference updates</li>
+ *    <li>Graceful handling of null/undefined values with fallback display</li>
+ * </ul>
+ *
+ * <p><strong>Technical Implementation</strong></p>
+ * <ul>
+ *    <li>Dynamic CSS Grid layout calculation for responsive column sizing</li>
+ *    <li>Paginated data slicing with index transformation for accurate positioning</li>
+ *    <li>Nested property resolution with array mapping and filtering</li>
+ *    <li>Data synchronization using efficient object reference and length comparison</li>
+ *    <li>Event-driven communication pattern with parent components</li>
+ *    <li>Lifecycle management with OnInit and OnChanges implementations</li>
+ *    <li>Conditional action execution based on disabled state flags</li>
+ *    <li>Automatic pagination state management and validation</li>
+ * </ul>
+ *
+ * <p><strong>Event Handling</strong></p>
+ * <ul>
+ *    <li><b>onModify:</b> Emits when a row modification is requested, includes index, item data, and disabled state</li>
+ *    <li><b>onNewItemAdded:</b> Emits when a new item is added to the table</li>
+ *    <li><b>onItemRemoved:</b> Emits when an item is removed, includes index, data size, removed item, and disabled state</li>
+ * </ul>
+ *
+ * <p><strong>Configuration Options</strong></p>
+ * <ul>
+ *    <li>PageSize: Number of rows per page (default: 5)</li>
+ *    <li>PageSizeOptions: Array of available page size options</li>
+ *    <li>TableHeaders: Column header definitions with labels and alignment</li>
+ *    <li>TableColumns: Column data definitions with field names, alignment, and colors</li>
+ *    <li>EnableActionColumn: Toggle visibility of action column</li>
+ *    <li>EnableButtonDelete: Control delete button visibility</li>
+ *    <li>EnableButtonModify: Control modify button visibility</li>
+ *    <li>DisableRemove: Prevent item removal while maintaining event emission</li>
+ *    <li>DisableModify: Prevent item modification while maintaining event emission</li>
+ * </ul>
+ *
+ * <p><strong>Authorship</strong></p>
+ * <ul>
+ *    <li><b>Author:</b> Dileesha Ekanayake</li>
+ *    <li><b>Email:</b> dileesha.r.ekanayake@gmail.com</li>
+ *    <li><b>Created:</b> 2024</li>
+ *    <li><b>Version:</b> 1.0.0</li>
+ *    <li><b>Responsibility:</b> Design, implementation, and documentation of the data table component
+ *        with Angular Material integration. Provides comprehensive table functionality including
+ *        pagination, nested property access, dynamic styling, CRUD operations, and seamless form
+ *        control integration with reactive forms support. Ensures robust data synchronization,
+ *        event-driven architecture, and flexible configuration options for diverse use cases.</li>
+ * </ul>
+ */
 declare class AvDataTable implements OnInit, OnChanges, ControlValueAccessor {
     PageSize: number;
     PageSizeOptions: Array<number>;
@@ -43,6 +121,17 @@ declare class AvDataTable implements OnInit, OnChanges, ControlValueAccessor {
     DisableRemove: boolean;
     DisableModify: boolean;
     gridTemplateColumns: string;
+    sortField: string;
+    sortDirection: 'asc' | 'desc' | '';
+    globalSearchTerm: string;
+    columnFilters: Map<string, {
+        matchMode: 'all' | 'any';
+        rules: {
+            operator: string;
+            value: string;
+        }[];
+    }>;
+    processedData: any[];
     private onChange;
     private onTouched;
     constructor();
@@ -206,8 +295,22 @@ declare class AvDataTable implements OnInit, OnChanges, ControlValueAccessor {
      * @return {void} Does not return a value.
      */
     writeValue(value: any[]): void;
+    toggleSort(field: string): void;
+    applyAllFilters(): void;
+    clearAllFilters(): void;
+    updateGlobalSearch(event: any): void;
+    setColumnFilter(field: string, filter: any): void;
+    getColumnFilter(field: string): {
+        matchMode: 'all' | 'any';
+        rules: {
+            operator: string;
+            value: string;
+        }[];
+    };
+    hasActiveFilter(field: string): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<AvDataTable, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<AvDataTable, "av-data-table", never, { "PageSize": { "alias": "PageSize"; "required": false; }; "PageSizeOptions": { "alias": "PageSizeOptions"; "required": false; }; "currentPage": { "alias": "currentPage"; "required": false; }; "TableHeaders": { "alias": "TableHeaders"; "required": false; }; "TableColumns": { "alias": "TableColumns"; "required": false; }; "Data": { "alias": "Data"; "required": false; }; "EnableActionColumn": { "alias": "EnableActionColumn"; "required": false; }; "EnableButtonDelete": { "alias": "EnableButtonDelete"; "required": false; }; "EnableButtonModify": { "alias": "EnableButtonModify"; "required": false; }; "DisableRemove": { "alias": "DisableRemove"; "required": false; }; "DisableModify": { "alias": "DisableModify"; "required": false; }; }, { "onModify": "onModify"; "onNewItemAdded": "onNewItemAdded"; "onItemRemoved": "onItemRemoved"; }, never, never, true, never>;
 }
 
 export { AvDataTable };
+export type { Columns, Headers };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@avoraui/av-data-table",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "description": "A customizable Angular Data Table component",
   "keywords": [
     "angular",