@avoraui/av-data-table 0.0.5 → 0.0.6

package/tsconfig.lib.json

@@ -0,0 +1,19 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "sourceMap": true,
+    "types": []
+  },
+  "include": [
+    "src/**/*.ts"
+  ],
+  "exclude": [
+    "**/*.spec.ts"
+  ]
+}

package/tsconfig.lib.prod.json

@@ -0,0 +1,11 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

package/tsconfig.spec.json

@@ -0,0 +1,14 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "include": [
+    "src/**/*.ts"
+  ]
+}

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

@@ -1,464 +0,0 @@
-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: "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: [
-            {
-                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: 'av-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

@@ -1 +0,0 @@
-{"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;;;;"}