@avoraui/av-data-table 0.0.2

package/README.md

@@ -0,0 +1,312 @@
+# 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.
+
+## 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
+
+## 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';
+```
+
+## 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' } 
+    }
+  ];
+}
+```
+
+## API Reference
+
+### Input Properties
+
+| 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 |
+
+### 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 |
+
+### Interfaces
+
+```typescript
+interface Headers {
+  label: string;
+  align?: 'left' | 'center' | 'right';
+}
+
+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:
+
+```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
+];
+```
+
+### 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; }
+
+/* Data cell alignment */
+.text-left { text-align: left; }
+.text-center { text-align: center; }
+.text-right { text-align: right; }
+
+/* Grid layout customization */
+.table-grid {
+  display: grid;
+  gap: 1rem;
+  /* grid-template-columns is set dynamically */
+}
+```
+
+## Requirements
+
+- Angular 17+
+- Angular Material (for pagination component)
+- Modern browser with CSS Grid support
+
+## Browser Support
+
+- Chrome/Edge 57+
+- Firefox 52+
+- Safari 10.1+
+
+## License
+
+This project is licensed under the MIT License - see the LICENSE file for details.
+
+## Changelog
+
+### v0.0.2
+- Initial release
+- Basic table functionality with pagination
+- CRUD operations support
+- Reactive forms integration
+- Nested object property access

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

@@ -0,0 +1,464 @@
+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 { MatPaginator } from '@angular/material/paginator';
+
+class AvDataTable {
+    PageSize = 5;
+    PageSizeOptions = [];
+    currentPage = 0;
+    TableHeaders = [];
+    TableColumns = [];
+    TableData = [];
+    Data = [];
+    EnableActionColumn = false;
+    EnableButtonDelete = false;
+    EnableButtonModify = false;
+    onModify = new EventEmitter();
+    onNewItemAdded = new EventEmitter();
+    onItemRemoved = new EventEmitter();
+    DisableRemove = false;
+    DisableModify = false;
+    gridTemplateColumns = '';
+    onChange = () => { };
+    onTouched = () => { };
+    constructor() {
+    }
+    /**
+     * Lifecycle hook that is called after Angular has initialized all data-bound properties of a directive.
+     * This method is used to perform initialization logic for the component.
+     *
+     * It executes the following:
+     * - Initializes the paginator for managing paginated data display.
+     * - Calculates the grid template for layout adjustments.
+     * - Synchronizes data sources to ensure the component has up-to-date data.
+     *
+     * @return {void} This method does not return any value.
+     */
+    ngOnInit() {
+        this.initializePaginator();
+        this.calculateGridTemplate();
+        this.syncDataSources();
+    }
+    /**
+     * Initializes the paginator configuration. Sets default values for PageSize, PageSizeOptions,
+     * and currentPage if they are undefined, null, or invalid. Ensures the PageSize is included
+     * in the PageSizeOptions array and sorts the options in ascending order.
+     *
+     * @return {void} Does not return a value.
+     */
+    initializePaginator() {
+        if (this.PageSize === undefined || this.PageSize === null || this.PageSize <= 0) {
+            this.PageSize = 5;
+        }
+        if (this.PageSizeOptions === undefined || this.PageSizeOptions === null || this.PageSizeOptions.length === 0) {
+            this.PageSizeOptions = [5, 10, 20, 50];
+        }
+        if (this.currentPage === undefined || this.currentPage === null || this.currentPage < 0) {
+            this.currentPage = 0;
+        }
+        // Ensure PageSize is included in PageSizeOptions if not already present
+        if (!this.PageSizeOptions.includes(this.PageSize)) {
+            this.PageSizeOptions = [...this.PageSizeOptions, this.PageSize].sort((a, b) => a - b);
+        }
+    }
+    /**
+     * Handles changes to the component's input properties during the lifecycle of the component.
+     *
+     * This method is triggered whenever an input property bound to the component changes. It processes
+     * updates to properties such as `Data`, `PageSize`, `PageSizeOptions`, and `currentPage`, and
+     * ensures the internal state is kept in sync with the new inputs. Additionally, it updates the paginator
+     * and adjusts the current page as necessary.
+     *
+     * @param {SimpleChanges} changes - A collection of SimpleChange objects representing the changed properties.
+     * Each `SimpleChange` object provides information like the current and previous values as well as a flag
+     * indicating if it is the first change to this input.
+     * @return {void} - This method does not return any value.
+     */
+    ngOnChanges(changes) {
+        // Listen for changes in the external Data input
+        if (changes['Data'] && !changes['Data'].firstChange) {
+            this.syncDataSources();
+            // Reset to first page when data changes
+            this.currentPage = 0;
+        }
+        // Handle changes in pagination settings
+        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);
+            if (this.currentPage >= totalPages && totalPages > 0) {
+                this.currentPage = totalPages - 1;
+            }
+        }
+    }
+    /**
+     * Retrieves a subset of data from the full dataset based on the current page and page size.
+     *
+     * @return {Array} A portion of the TableData array corresponding to the current page.
+     */
+    getPaginatedData() {
+        const startIndex = this.currentPage * this.PageSize;
+        const endIndex = startIndex + this.PageSize;
+        return this.TableData.slice(startIndex, endIndex);
+    }
+    /**
+     * Handles changes in the pagination state, such as changing the current page or the page size.
+     *
+     * @param {PageEvent} event - The event triggered by a pagination action that contains the updated page index and page size.
+     * @return {void} This method does not return anything.
+     */
+    pageChange(event) {
+        this.currentPage = event.pageIndex;
+        this.PageSize = event.pageSize;
+    }
+    /**
+     * Calculates the actual index in the dataset based on the paginated index.
+     *
+     * @param {number} paginatedIndex - The index within the current page of paginated data.
+     * @return {number} The actual index in the entire dataset.
+     */
+    getActualIndex(paginatedIndex) {
+        return (this.currentPage * this.PageSize) + paginatedIndex;
+    }
+    /**
+     * Synchronizes external data source with the internal TableData.
+     * If the external Data differs from the current TableData, the TableData
+     * is updated with the values from Data and a change notification is triggered.
+     *
+     * @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);
+            }
+        }
+    }
+    /**
+     * Updates the form value by notifying changes and updating external data if available.
+     * This method triggers the onChange callback with the current table data
+     * and notifies that the form field has been touched. Additionally, it updates
+     * the external data reference to ensure proper change detection in the parent components.
+     *
+     * @return {void} No return value.
+     */
+    updateFormValue() {
+        // Notify the form about the change
+        if (this.onChange) {
+            this.onChange(this.TableData);
+            this.onTouched();
+        }
+        // Also update the external Data if it exists
+        if (this.Data) {
+            // Create a new reference to trigger OnChanges in parent components
+            this.Data = [...this.TableData];
+        }
+    }
+    /**
+     * Calculates and sets the grid template for a layout based on the number of displayed headers
+     * and the presence of an action column. The grid template determines the column structure with
+     * equal fractions for data columns and a fixed width for the action column if enabled.
+     *
+     * @return {void} Does not return a value. Sets the `gridTemplateColumns` property to the calculated template.
+     */
+    calculateGridTemplate() {
+        // Calculate grid template based on columns count
+        const displayedHeaders = this.getDisplayedHeaders();
+        const columnsCount = displayedHeaders.length;
+        if (columnsCount === 0)
+            return;
+        // Create grid template with equal fractions for data columns
+        // and fixed width for action column if enabled
+        if (this.EnableActionColumn) {
+            const dataColumns = columnsCount - 1; // Subtract action column
+            this.gridTemplateColumns = dataColumns > 0
+                ? `repeat(${dataColumns}, 1fr) 100px`
+                : '100px';
+        }
+        else {
+            this.gridTemplateColumns = `repeat(${columnsCount}, 1fr)`;
+        }
+    }
+    /**
+     * Retrieves the headers that should be displayed in the table.
+     * The method includes or excludes the "action" column based on the value of `EnableActionColumn`.
+     *
+     * @return {TableProp[]} An array of headers to be displayed in the table. If `EnableActionColumn` is false, the "action" column is excluded.
+     */
+    getDisplayedHeaders() {
+        return this.EnableActionColumn
+            ? this.TableHeaders
+            : this.TableHeaders.filter(h => h.label.toLowerCase() !== 'action');
+    }
+    /**
+     * Generates and returns an object representing CSS classes for a header based on its alignment property.
+     *
+     * @param {TableProp} header - An object containing header properties, including an alignment property ('center', 'right', or 'left').
+     * @return {Object} An object mapping class names to a boolean indicating their applicability based on the alignment of the header.
+     */
+    getHeaderFieldClasses(header) {
+        return {
+            'header-text-center': header.align === 'center',
+            'header-text-right': header.align === 'right',
+            'header-text-left': header.align === 'left',
+        };
+    }
+    /**
+     * Generates a mapping of CSS classes for a data field based on the alignment property of the given column.
+     *
+     * @param {Columns} column - The column object containing alignment information.
+     * @return {Object} An object where the keys are class names, and the values are booleans indicating whether each class applies.
+     */
+    getDataFieldClasses(column) {
+        return {
+            'text-center': column.align === 'center',
+            'text-right': column.align === 'right',
+            'text-left': column.align === 'left',
+        };
+    }
+    /**
+     * Retrieves the color property from the given column object.
+     *
+     * @param {Columns} column - The column object containing the color property.
+     * @return {string} The color associated with the column.
+     */
+    getDataFiledColor(column) {
+        return column.color;
+    }
+    /**
+     * Retrieves the value of a specified column from the given item.
+     *
+     * @param {any} item - The object containing the data to extract the value from.
+     * @param {Columns} column - The column definition, including the field name or path.
+     * @return {string} The value of the specified column for the given item. If the field is not found, an empty string is returned.
+     */
+    getValueForColumn(item, column) {
+        if (!item || !column || !column.field)
+            return '';
+        // Check if the field has dot notation (e.g., 'gender.name')
+        if (column.field.includes('.')) {
+            return this.getNestedValue(item, column.field);
+        }
+        else {
+            // Handle standard fields
+            return column.field in item ? item[column.field] : '';
+        }
+    }
+    /**
+     * Retrieves a nested value from a given object based on a dot-separated path string.
+     * If the path does not exist or the value is undefined/null, it returns a placeholder '-'.
+     * If accessing an array, it maps the values at the given key and processes them.
+     *
+     * @param {any} object - The object from which the nested value is extracted.
+     * @param {string} path - The dot-separated string representing the path to the desired value.
+     * @return {any} The value found at the given path, an array joined into a string, or '-' if not found.
+     */
+    getNestedValue(object, path) {
+        // Return early if object is null or undefined
+        if (!object)
+            return '-';
+        // Split the path into individual keys (e.g., "gender.name" → ["gender", "name"])
+        const keys = path.split('.');
+        let value = object;
+        // Navigate through the object hierarchy
+        for (const key of keys) {
+            if (value === null || value === undefined) {
+                return '-';
+            }
+            if (Array.isArray(value)) {
+                // If we encounter an array, map over its items to extract the property
+                value = value.map(item => item[key]).filter(Boolean);
+            }
+            else {
+                // Access the next property level
+                value = value[key];
+            }
+        }
+        // Format the final result
+        if (Array.isArray(value)) {
+            return value.length > 0 ? value.join(', ') : '-';
+        }
+        return value !== null && value !== undefined ? value : '-';
+    }
+    /**
+     * Removes an item from the data table at the specified index.
+     *
+     * @param {number} actualIndex - The index of the item to remove from the data table.
+     * @return {void} This method does not return a value.
+     */
+    removeItem(actualIndex) {
+        // Check disable condition FIRST - before touching any data
+        if (this.DisableRemove) {
+            // Don't remove from TableData, just emit event for parent to handle
+            this.onItemRemoved.emit({
+                index: actualIndex,
+                dataSize: this.TableData.length,
+                removedItem: this.TableData[actualIndex], // Get the item that would be removed
+                disabled: true
+            });
+            return; // Exit early - don't modify TableData
+        }
+        else {
+            // Only proceed with actual removal if not disabled
+            const newData = [...this.TableData];
+            const removedData = newData[actualIndex]; // Get the item being removed
+            newData.splice(actualIndex, 1);
+            this.TableData = newData;
+            // Rest of your existing logic...
+            const totalPages = Math.ceil(this.TableData.length / this.PageSize);
+            if (this.currentPage >= totalPages && this.currentPage > 0) {
+                this.currentPage = totalPages - 1;
+            }
+            if (this.TableData.length === 0) {
+                this.onChange([removedData]);
+            }
+            else {
+                this.updateFormValue();
+            }
+            this.onItemRemoved.emit({
+                index: actualIndex,
+                dataSize: this.TableData.length,
+                removedItem: removedData,
+                disabled: false
+            });
+        }
+    }
+    /**
+     * Modifies an item at the specified index in the dataset. If the modification is disabled, emits an event without making any changes.
+     *
+     * @param {number} actualIndex - The index of the item to be modified in the dataset.
+     * @return {void} This method does not return a value.
+     */
+    modifyItem(actualIndex) {
+        // Check disable condition FIRST - before any modification logic
+        if (this.DisableModify) {
+            // Emit event for parent to handle the disabled state
+            this.onModify.emit({
+                index: actualIndex,
+                modifiedItem: this.TableData[actualIndex],
+                disabled: true
+            });
+            return; // Exit early - don't proceed with modification
+        }
+        // Only proceed with modification if not disabled
+        const modifiedItem = this.TableData[actualIndex];
+        this.onModify.emit({
+            index: actualIndex,
+            modifiedItem,
+            disabled: false
+        });
+    }
+    // ControlValueAccessor interface implementation
+    /**
+     * Registers a callback function to be called whenever the value changes.
+     *
+     * @param {any} fn - The function to be executed on a value change.
+     * @return {void} This method does not return a value.
+     */
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    /**
+     * Registers a callback function that should be called when the control is touched.
+     *
+     * @param {any} fn - The callback function to execute when the control is touched.
+     * @return {void} This method does not return a value.
+     */
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    /**
+     * Writes a new value to the table data and resets to the first page.
+     *
+     * @param {any[]} value - The array of data to be written to the table.
+     * @return {void} Does not return a value.
+     */
+    writeValue(value) {
+        if (value) {
+            this.TableData = [...value];
+            // Reset to first page when new data is written
+            this.currentPage = 0;
+        }
+        else {
+            this.TableData = [];
+            this.currentPage = 0;
+        }
+    }
+    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: "aur-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: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: AvDataTable, decorators: [{
+            type: Component,
+            args: [{ selector: 'aur-data-table', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => AvDataTable),
+                            multi: true
+                        }
+                    ], imports: [
+                        MatCard,
+                        MatCardContent,
+                        MatIcon,
+                        MatIconButton,
+                        NgClass,
+                        NgStyle,
+                        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"] }]
+        }], ctorParameters: () => [], propDecorators: { PageSize: [{
+                type: Input
+            }], PageSizeOptions: [{
+                type: Input
+            }], currentPage: [{
+                type: Input
+            }], TableHeaders: [{
+                type: Input
+            }], TableColumns: [{
+                type: Input
+            }], Data: [{
+                type: Input
+            }], EnableActionColumn: [{
+                type: Input
+            }], EnableButtonDelete: [{
+                type: Input
+            }], EnableButtonModify: [{
+                type: Input
+            }], onModify: [{
+                type: Output
+            }], onNewItemAdded: [{
+                type: Output
+            }], onItemRemoved: [{
+                type: Output
+            }], DisableRemove: [{
+                type: Input
+            }], DisableModify: [{
+                type: Input
+            }] } });
+
+/*
+ * Public API Surface of data-table
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AvDataTable };
+//# sourceMappingURL=avoraui-av-data-table.mjs.map

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

@@ -0,0 +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: 'aur-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":"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"}

package/index.d.ts

@@ -0,0 +1,213 @@
+import * as i0 from '@angular/core';
+import { OnInit, OnChanges, EventEmitter, SimpleChanges } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { PageEvent } from '@angular/material/paginator';
+
+interface Headers {
+    label: string;
+    align: 'left' | 'center' | 'right';
+}
+interface Columns {
+    field: string;
+    align: 'left' | 'center' | 'right';
+    color?: string;
+}
+
+declare class AvDataTable implements OnInit, OnChanges, ControlValueAccessor {
+    PageSize: number;
+    PageSizeOptions: Array<number>;
+    currentPage: number;
+    TableHeaders: Headers[];
+    TableColumns: Columns[];
+    protected TableData: any[];
+    Data: any[];
+    EnableActionColumn: boolean;
+    EnableButtonDelete: boolean;
+    EnableButtonModify: boolean;
+    onModify: EventEmitter<{
+        index: number;
+        modifiedItem: any;
+        disabled: boolean;
+    }>;
+    onNewItemAdded: EventEmitter<{
+        index: number;
+        dataSize: number;
+        removedItem: any;
+    }>;
+    onItemRemoved: EventEmitter<{
+        index: number;
+        dataSize: number;
+        removedItem: any;
+        disabled: boolean;
+    }>;
+    DisableRemove: boolean;
+    DisableModify: boolean;
+    gridTemplateColumns: string;
+    private onChange;
+    private onTouched;
+    constructor();
+    /**
+     * Lifecycle hook that is called after Angular has initialized all data-bound properties of a directive.
+     * This method is used to perform initialization logic for the component.
+     *
+     * It executes the following:
+     * - Initializes the paginator for managing paginated data display.
+     * - Calculates the grid template for layout adjustments.
+     * - Synchronizes data sources to ensure the component has up-to-date data.
+     *
+     * @return {void} This method does not return any value.
+     */
+    ngOnInit(): void;
+    /**
+     * Initializes the paginator configuration. Sets default values for PageSize, PageSizeOptions,
+     * and currentPage if they are undefined, null, or invalid. Ensures the PageSize is included
+     * in the PageSizeOptions array and sorts the options in ascending order.
+     *
+     * @return {void} Does not return a value.
+     */
+    initializePaginator(): void;
+    /**
+     * Handles changes to the component's input properties during the lifecycle of the component.
+     *
+     * This method is triggered whenever an input property bound to the component changes. It processes
+     * updates to properties such as `Data`, `PageSize`, `PageSizeOptions`, and `currentPage`, and
+     * ensures the internal state is kept in sync with the new inputs. Additionally, it updates the paginator
+     * and adjusts the current page as necessary.
+     *
+     * @param {SimpleChanges} changes - A collection of SimpleChange objects representing the changed properties.
+     * Each `SimpleChange` object provides information like the current and previous values as well as a flag
+     * indicating if it is the first change to this input.
+     * @return {void} - This method does not return any value.
+     */
+    ngOnChanges(changes: SimpleChanges): void;
+    /**
+     * Retrieves a subset of data from the full dataset based on the current page and page size.
+     *
+     * @return {Array} A portion of the TableData array corresponding to the current page.
+     */
+    getPaginatedData(): Array<any>;
+    /**
+     * Handles changes in the pagination state, such as changing the current page or the page size.
+     *
+     * @param {PageEvent} event - The event triggered by a pagination action that contains the updated page index and page size.
+     * @return {void} This method does not return anything.
+     */
+    pageChange(event: PageEvent): void;
+    /**
+     * Calculates the actual index in the dataset based on the paginated index.
+     *
+     * @param {number} paginatedIndex - The index within the current page of paginated data.
+     * @return {number} The actual index in the entire dataset.
+     */
+    getActualIndex(paginatedIndex: number): number;
+    /**
+     * Synchronizes external data source with the internal TableData.
+     * If the external Data differs from the current TableData, the TableData
+     * is updated with the values from Data and a change notification is triggered.
+     *
+     * @return {void} This method does not return a value.
+     */
+    syncDataSources(): void;
+    /**
+     * Updates the form value by notifying changes and updating external data if available.
+     * This method triggers the onChange callback with the current table data
+     * and notifies that the form field has been touched. Additionally, it updates
+     * the external data reference to ensure proper change detection in the parent components.
+     *
+     * @return {void} No return value.
+     */
+    updateFormValue(): void;
+    /**
+     * Calculates and sets the grid template for a layout based on the number of displayed headers
+     * and the presence of an action column. The grid template determines the column structure with
+     * equal fractions for data columns and a fixed width for the action column if enabled.
+     *
+     * @return {void} Does not return a value. Sets the `gridTemplateColumns` property to the calculated template.
+     */
+    calculateGridTemplate(): void;
+    /**
+     * Retrieves the headers that should be displayed in the table.
+     * The method includes or excludes the "action" column based on the value of `EnableActionColumn`.
+     *
+     * @return {TableProp[]} An array of headers to be displayed in the table. If `EnableActionColumn` is false, the "action" column is excluded.
+     */
+    getDisplayedHeaders(): Headers[];
+    /**
+     * Generates and returns an object representing CSS classes for a header based on its alignment property.
+     *
+     * @param {TableProp} header - An object containing header properties, including an alignment property ('center', 'right', or 'left').
+     * @return {Object} An object mapping class names to a boolean indicating their applicability based on the alignment of the header.
+     */
+    getHeaderFieldClasses(header: Headers): object;
+    /**
+     * Generates a mapping of CSS classes for a data field based on the alignment property of the given column.
+     *
+     * @param {Columns} column - The column object containing alignment information.
+     * @return {Object} An object where the keys are class names, and the values are booleans indicating whether each class applies.
+     */
+    getDataFieldClasses(column: Columns): object;
+    /**
+     * Retrieves the color property from the given column object.
+     *
+     * @param {Columns} column - The column object containing the color property.
+     * @return {string} The color associated with the column.
+     */
+    getDataFiledColor(column: Columns): any;
+    /**
+     * Retrieves the value of a specified column from the given item.
+     *
+     * @param {any} item - The object containing the data to extract the value from.
+     * @param {Columns} column - The column definition, including the field name or path.
+     * @return {string} The value of the specified column for the given item. If the field is not found, an empty string is returned.
+     */
+    getValueForColumn(item: any, column: Columns): string;
+    /**
+     * Retrieves a nested value from a given object based on a dot-separated path string.
+     * If the path does not exist or the value is undefined/null, it returns a placeholder '-'.
+     * If accessing an array, it maps the values at the given key and processes them.
+     *
+     * @param {any} object - The object from which the nested value is extracted.
+     * @param {string} path - The dot-separated string representing the path to the desired value.
+     * @return {any} The value found at the given path, an array joined into a string, or '-' if not found.
+     */
+    getNestedValue(object: any, path: string): any;
+    /**
+     * Removes an item from the data table at the specified index.
+     *
+     * @param {number} actualIndex - The index of the item to remove from the data table.
+     * @return {void} This method does not return a value.
+     */
+    removeItem(actualIndex: number): void;
+    /**
+     * Modifies an item at the specified index in the dataset. If the modification is disabled, emits an event without making any changes.
+     *
+     * @param {number} actualIndex - The index of the item to be modified in the dataset.
+     * @return {void} This method does not return a value.
+     */
+    modifyItem(actualIndex: number): void;
+    /**
+     * Registers a callback function to be called whenever the value changes.
+     *
+     * @param {any} fn - The function to be executed on a value change.
+     * @return {void} This method does not return a value.
+     */
+    registerOnChange(fn: any): void;
+    /**
+     * Registers a callback function that should be called when the control is touched.
+     *
+     * @param {any} fn - The callback function to execute when the control is touched.
+     * @return {void} This method does not return a value.
+     */
+    registerOnTouched(fn: any): void;
+    /**
+     * Writes a new value to the table data and resets to the first page.
+     *
+     * @param {any[]} value - The array of data to be written to the table.
+     * @return {void} Does not return a value.
+     */
+    writeValue(value: any[]): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AvDataTable, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AvDataTable, "aur-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 };

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@avoraui/av-data-table",
+  "version": "0.0.2",
+  "description": "A customizable Angular Data Table component",
+  "keywords": [
+    "angular",
+    "table",
+    "data-table"
+  ],
+  "author": "Dileesha Ekanayake",
+  "license": "MIT",
+  "peerDependencies": {
+    "@angular/common": "^20.1.0",
+    "@angular/core": "^20.1.0"
+  },
+  "dependencies": {
+    "@angular/material": "^20.1.2",
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "module": "fesm2022/avoraui-av-data-table.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./fesm2022/avoraui-av-data-table.mjs"
+    }
+  }
+}