devlab-one-dynamic-table 1.0.0

package/fesm2022/devlab-one-dynamic-table.mjs

@@ -0,0 +1,872 @@
+import * as i0 from '@angular/core';
+import { Injectable, EventEmitter, Output, Input, ViewChild, Component } from '@angular/core';
+import * as i3 from '@angular/material/paginator';
+import { MatPaginatorModule, MatPaginator } from '@angular/material/paginator';
+import * as i4 from '@angular/material/sort';
+import { MatSortModule, MatSort } from '@angular/material/sort';
+import * as i2 from '@angular/material/table';
+import { MatTableDataSource, MatTableModule } from '@angular/material/table';
+import { SelectionModel } from '@angular/cdk/collections';
+import { trigger, state, style, transition, animate } from '@angular/animations';
+import { FormGroup } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+import * as i5 from '@angular/material/menu';
+import { MatMenuModule } from '@angular/material/menu';
+import * as i6 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i7 from '@angular/material/checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import * as i8 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import { DynamicForm } from 'dynamic-form';
+import * as i9 from '@angular/material/progress-spinner';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import * as XLSX from 'xlsx';
+
+var SearchOn;
+(function (SearchOn) {
+    SearchOn[SearchOn["AllColumns"] = 1] = "AllColumns";
+    SearchOn[SearchOn["MatchingColumns"] = 2] = "MatchingColumns";
+})(SearchOn || (SearchOn = {}));
+var SearchAt;
+(function (SearchAt) {
+    SearchAt[SearchAt["ClientSide"] = 1] = "ClientSide";
+    SearchAt[SearchAt["ServerSide"] = 2] = "ServerSide";
+})(SearchAt || (SearchAt = {}));
+var OrderBy;
+(function (OrderBy) {
+    OrderBy["asc"] = "asc";
+    OrderBy["desc"] = "desc";
+})(OrderBy || (OrderBy = {}));
+const defaultPageSize = 5;
+
+const AppLiteralConsts = {
+    actionButton: {
+        create: 'create',
+        add: 'add',
+        edit: 'edit',
+        delete: 'delete',
+        view: 'view',
+        sortChange: 'sortChange',
+        pageChange: 'pageChange',
+        search: 'search',
+        sortBy: '__utcLastUpdatedOn',
+        export: 'export',
+    },
+    dataTypes: {
+        type: 'type',
+        string: 'string',
+        object: 'object',
+        array: 'array',
+        datetimeLocal: 'datetime-local',
+        date: 'date',
+        group: 'group',
+        boolean: 'boolean',
+    },
+    sheet: {
+        excel: 'xlsx',
+        csv: 'csv',
+    },
+    dateFormat: {
+        yearMonthDay: 'yyyy-MM-dd HH:mm',
+    },
+    imgIconPath: {
+        swipeCard: '../../../../assets/images/icons/swipe-card-white.svg',
+        merchant: '../../../../assets/images/icons/merchant-white.svg',
+        bank: '../../../../assets/images/icons/bank-account-white.svg',
+        gateway: '../../../../assets/images/icons/gateway-white.svg',
+        card: '../../../../assets/images/icons/cards-white.svg',
+        region: '../../../../assets/images/icons/region-white.svg',
+        settings: '../../../../assets/images/icons/settings-white.svg',
+    }
+};
+
+var ExportType;
+(function (ExportType) {
+    ExportType["excel"] = "xlsx";
+    ExportType["csv"] = "csv";
+    ExportType["pdf"] = "pdf";
+})(ExportType || (ExportType = {}));
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+class ExportService {
+    /**
+     * Desc : Export data in excel/csv format
+     * @param exportType : type of file which we are going to export
+     * @param sourceData : target data to export
+     * @param fileName : indicates the file name to be exported
+     */
+    exportData(exportType, sourceData, fileName) {
+        const dataSheets = this.prepareDataForExport(sourceData, fileName);
+        const workBook = XLSX.utils.book_new();
+        let worSheet;
+        for (const key in dataSheets) {
+            worSheet = XLSX.utils.json_to_sheet(dataSheets[key]);
+            XLSX.utils.book_append_sheet(workBook, worSheet, key);
+        }
+        XLSX.writeFile(workBook, `${fileName}.${exportType}`);
+    }
+    /**
+     * Desc : prepare data for exports
+     * @param sourceData : target data to export
+     * @param fileName : indicates the file name to be exported
+     */
+    prepareDataForExport(sourceData, fileName) {
+        // eslint-disable-next-line prefer-const
+        let numberOfSheets = {};
+        for (const source of sourceData) {
+            for (const [key, value] of Object.entries(source)) {
+                if (typeof value == AppLiteralConsts.dataTypes.object && value != null) {
+                    if (Array.isArray(value)) {
+                        source[key] = JSON.stringify(value);
+                    }
+                    else {
+                        for (const [secondaryKey, secondaryValue] of Object.entries(value)) {
+                            source[secondaryKey] = secondaryValue;
+                        }
+                    }
+                }
+            }
+            numberOfSheets[fileName] = sourceData;
+        }
+        return numberOfSheets;
+    }
+    /**
+     * dec : export in pdf format
+     */
+    exportPdf(values) {
+        console.log(values);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ExportService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ExportService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ExportService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+/**********************************************************************
+  Page : Table component
+  Desc : Displaying the table data dynamically
+**********************************************************************/
+class DynamicTable {
+    exportService;
+    renderer;
+    el;
+    data = {
+        data: [],
+        totalRecords: 0
+    };
+    /**
+     * Desc : declaring search variable for customizing the table data search
+     */
+    pagination = {
+        offset: 1,
+        limit: 5,
+        searchQuery: {},
+        order: AppLiteralConsts.actionButton.sortBy,
+        sort: OrderBy.asc,
+    };
+    /**
+     * Desc : declaring tableDetails variable for customzing the table appearance
+     */
+    tableDetails = {
+        selectRequired: false,
+        columns: [],
+        tableButtons: {
+            add: false,
+            edit: false,
+            delete: false,
+            view: false,
+            export: false,
+        },
+        paging: {
+            enabled: false,
+            pageSizeOptions: [],
+            pageNumber: 0,
+            pageSize: 0
+        },
+    };
+    /**
+     * Desc : filter visibility
+     */
+    filterVisibility = true;
+    /**
+     * Desc : declaring formgroup variable for filter
+     */
+    filter = new FormGroup({});
+    /**
+     * Desc : declaring variable for column names
+     */
+    displayedColumns = [];
+    /**
+     * Desc : declaring variable for master column names
+     */
+    masterDisplayedColumns = [];
+    /**
+     * Desc : declaring variable for table data
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    dataSource = new MatTableDataSource([]);
+    /**
+     * Desc : declaring variable for selecting the row data
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    selection = new SelectionModel(true, []);
+    /**
+     * Desc : consuming view child feature for export option menu
+     */
+    exportOptionMenu;
+    /**
+     * Desc : consuming view child feature for paginator
+     */
+    paginator;
+    /**
+     * Desc : consuming view child feature for table data sorting
+     */
+    sort;
+    /**
+     * Desc : receiving the dataset input from parent component
+     */
+    dataset = {
+        data: [],
+        totalRecords: 0
+    };
+    /**
+   * Desc : receiving the search input from parent component
+   */
+    search = {
+        searchOn: SearchOn.AllColumns,
+        formElements: {
+            controls: [],
+            outline: false
+        },
+        value: {},
+        searchAt: SearchAt.ClientSide
+    };
+    /**
+     * Desc : send search element to form component
+     */
+    dynamicFormDetails = {
+        formComponent: this.search.formElements
+    };
+    /**
+     * Desc : emitting the action output to parent component
+     */
+    action = new EventEmitter();
+    /**
+     * Desc : declaring variable for expand column info
+     */
+    expandColumnDefination = [];
+    /**
+     * Desc : declaring variable for expanded column info
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    expandedElement;
+    /**
+     * Desc : declaring variable for expanded column prefix info
+     */
+    expandedPrefix = 'expanded_';
+    /**
+     * Desc : declaring the variable for storing table row counts
+     */
+    tableRowCount = 0;
+    /**
+     * Desc : expand group
+     */
+    isExpandedGroupRow = undefined;
+    /**
+     * Desc : constructor initialization
+     */
+    constructor(exportService, renderer, el) {
+        this.exportService = exportService;
+        this.renderer = renderer;
+        this.el = el;
+    }
+    /**
+     * Desc : execute when component is initalized
+     */
+    ngOnInit() {
+        this.selection.changed.subscribe((change) => {
+            this.addActionForSelectedRows();
+        });
+    }
+    /**
+     * Desc : execute when component has any changes
+     */
+    ngOnChanges(changes) {
+        if (changes['dataset'] || changes['search'] || changes['tableDetails']) {
+            this.displayedColumns = [];
+        }
+        this.dataSource = new MatTableDataSource(this.dataset.data);
+        this.renderTableDetails();
+        this.initializeSearchPredicate();
+        this.initializeGridColumns();
+        if (this.search) {
+            this.initializeSearchFields();
+        }
+    }
+    /**
+     * desc : after view is rendered
+     */
+    ngAfterViewInit() {
+        this.renderTableDetails();
+    }
+    /**
+     * config paginator and sorting options
+     */
+    renderTableDetails() {
+        switch (this.search.searchAt) {
+            case SearchAt.ClientSide:
+                if (this.paginator) {
+                    this.paginator.pageSize = this.tableDetails.paging.pageSize;
+                    this.paginator.pageSizeOptions = this.tableDetails.paging.pageSizeOptions;
+                    this.paginator.pageIndex = this.tableDetails.paging.pageNumber - 1;
+                    this.dataSource.paginator = this.paginator;
+                }
+                if (this.sort && this.paginator) {
+                    this.dataSource.sort = this.sort;
+                }
+                break;
+            case SearchAt.ServerSide:
+                if (this.paginator) {
+                    this.paginator.pageSize = this.tableDetails.paging.pageSize;
+                    this.paginator.pageSizeOptions = this.tableDetails.paging.pageSizeOptions;
+                    this.paginator.pageIndex = this.tableDetails.paging.pageNumber - 1;
+                    this.paginator.length = this.dataset.totalRecords;
+                }
+                break;
+            default:
+                break;
+        }
+    }
+    /**
+     * Desc : execute when moved to another component
+     */
+    ngOnDestroy() {
+        this.action.unsubscribe();
+    }
+    /**
+     * Desc : organizing the search filter fields
+     */
+    initializeSearchPredicate() {
+        if (this.search?.searchOn == SearchOn.MatchingColumns) {
+            this.dataSource.filterPredicate = (data, filter) => {
+                const searchFilterValues = this.isJSON(filter) ? JSON.parse(filter) : this.filter.value;
+                const allemptyFilters = Object.keys(searchFilterValues).every((filterData) => searchFilterValues[filterData] == '' || searchFilterValues[filterData] == null);
+                if (allemptyFilters) {
+                    return true;
+                }
+                let found = false;
+                for (let index = 0; index < this.search.formElements.controls.length; index++) {
+                    const field = this.search.formElements.controls.at(index) ?? '';
+                    if (data[field] && searchFilterValues[field]) {
+                        found = data[field].toLowerCase().indexOf(searchFilterValues[field].toLowerCase()) != -1;
+                        if (found) {
+                            return true;
+                        }
+                    }
+                }
+                return found;
+            };
+        }
+    }
+    /**
+     * Desc : Filter the table data
+     */
+    filterGrid(filterValue, field) {
+        if (this.search?.searchAt == SearchAt.ClientSide) {
+            if (this.search?.searchOn == SearchOn.AllColumns) {
+                this.dataSource.filter = (filterValue[Object.keys(filterValue).at(0) ?? ''] ?? '').trim().toLowerCase();
+            }
+            else {
+                this.applyDefaultFilter(filterValue[field], field);
+            }
+        }
+        this.action.emit({ name: AppLiteralConsts.actionButton.search, value: filterValue });
+        this.addActionForSelectedRows();
+    }
+    /**
+     * Desc : execute default search method
+     */
+    applyDefaultFilter(value, column) {
+        this.dataSource.filterPredicate = (data, filter) => {
+            let matchFound = false;
+            if (column in data) {
+                if (data[column]) {
+                    matchFound =
+                        matchFound || data[column].toString().trim().toLowerCase().indexOf(filter.trim().toLowerCase()) !== -1;
+                }
+            }
+            return matchFound;
+        };
+        this.dataSource.filter = value ? value.trim().toLowerCase() : '';
+        if (this.dataSource.paginator) {
+            this.dataSource.paginator?.firstPage();
+        }
+    }
+    /**
+     * Desc : validating if all the checkbox are checked or not
+     */
+    isAllSelected() {
+        const numSelected = this.selection.selected.length;
+        const numRows = this.dataSource.data.length;
+        return numSelected === numRows;
+    }
+    /**
+     * Desc : Enable select and deselect all rows
+     */
+    toggleAllRows() {
+        if (this.isAllSelected()) {
+            this.selection.clear();
+            return;
+        }
+        this.selection.select(...this.dataSource.data);
+    }
+    /**
+     * Desc : Column visibility
+     */
+    setColumn(event, column) {
+        if (!event) {
+            this.displayedColumns.filter((col, index) => {
+                if (col == column) {
+                    this.displayedColumns.splice(index, 1);
+                }
+            });
+        }
+        else {
+            this.displayedColumns.push(column);
+        }
+    }
+    /**
+     * Desc : Initalize columns and expanded columns
+     */
+    initializeGridColumns() {
+        if (this.tableDetails?.selectRequired) {
+            this.displayedColumns.push('select');
+        }
+        this.tableDetails?.columns?.forEach((cols) => {
+            this.displayedColumns.push(cols.columnDef);
+            this.masterDisplayedColumns.push(cols.columnDef);
+            if (cols.isComplex) {
+                this.expandColumnDefination.push(cols);
+            }
+        });
+        if (this.actionRequired()) {
+            this.displayedColumns.push('action');
+        }
+    }
+    /**
+     * Desc : Initialize search fields
+     */
+    initializeSearchFields() {
+        this.search?.formElements?.controls?.map((control) => {
+            control.OnChange = this.filterFieldChanges.bind(this);
+        });
+        this.dynamicFormDetails = {
+            ...this.dynamicFormDetails,
+            formComponent: this.search.formElements
+        };
+    }
+    /**
+     * Desc : detect changes in filter field on keyup
+     */
+    filterFieldChanges(event, field) {
+        if (this.search?.value) {
+            this.search.value[field] = event;
+        }
+        const formControlIndex = this.search?.formElements?.controls?.findIndex((element) => element.name == field);
+        if (this.search?.formElements && formControlIndex != undefined) {
+            this.search.formElements.controls[formControlIndex].value = event;
+        }
+        this.filterGrid(this.search?.value, field);
+    }
+    /**
+     * Desc : validating input features in table
+     */
+    actionRequired(buttonType) {
+        if (buttonType == AppLiteralConsts.actionButton.add) {
+            return this.tableDetails.tableButtons.add;
+        }
+        else if (buttonType == AppLiteralConsts.actionButton.export) {
+            return this.tableDetails.tableButtons.export;
+        }
+        else {
+            return (this.tableDetails.tableButtons.delete ||
+                this.tableDetails.tableButtons.edit ||
+                this.tableDetails.tableButtons.view);
+        }
+    }
+    /**
+     * Desc : Export table data
+     */
+    exportData(exportType) {
+        if (this.search?.searchAt == SearchAt.ServerSide) {
+            this.onTableAction(AppLiteralConsts.actionButton.export, exportType);
+        }
+        else {
+            if (exportType == 'pdf') {
+                if (this.selection.isEmpty()) {
+                    this.exportService.exportPdf(this.dataSource.data);
+                }
+                else {
+                    this.exportService.exportPdf(this.selection.selected);
+                }
+            }
+            else {
+                this.exportService.exportData(exportType == AppLiteralConsts.sheet.excel ? ExportType.excel : ExportType.csv, this.dataset?.data, exportType);
+            }
+        }
+    }
+    /**
+     * Desc : emitting the data to parent component
+     */
+    onTableAction(type, value) {
+        const dataValue = {
+            name: type,
+            value: value,
+        };
+        this.action.emit(dataValue);
+    }
+    /**
+     * Desc : return expanded column data
+     */
+    getExpandedColumnHeaderDef(ele) {
+        return ele?.map((x) => `${this.expandedPrefix}${x.columnDef}`) ?? [];
+    }
+    /**
+     * Desc : return inner column data
+     */
+    getInnerColumnDef(ele) {
+        return ele?.map((x) => x.columnDef) ?? [];
+    }
+    /**
+     * Desc : validate json
+     */
+    isJSON(str) {
+        try {
+            return JSON.parse(str) && !!str;
+        }
+        catch (e) {
+            return false;
+        }
+    }
+    /**
+     * Desc : event triggers while chaning the page
+     */
+    pageChanged(event) {
+        event.pageIndex = event.pageIndex + 1;
+        this.action.emit({ name: AppLiteralConsts.actionButton.pageChange, value: event });
+        this.addActionForSelectedRows();
+    }
+    /**
+     * Desc: Event triggers while sorting the column
+     */
+    onSortChanges(event) {
+        if (this.search?.searchAt == SearchAt.ServerSide && this.paginator != undefined) {
+            this.paginator.pageIndex = 0;
+        }
+        this.action.emit({ name: AppLiteralConsts.actionButton.sortChange, value: event });
+        this.addActionForSelectedRows();
+    }
+    /**
+     * Desc : array exist
+     */
+    isArray(inputValue) {
+        return Array.isArray(inputValue);
+    }
+    /**
+     * Desc : expanding the array data list
+     * @param index : row index
+     */
+    expandList(index) {
+        if (this.isExpandedGroupRow == index) {
+            this.isExpandedGroupRow = undefined;
+        }
+        else {
+            this.isExpandedGroupRow = index;
+        }
+    }
+    /**
+    * desc: label for the checkbox on the passed row
+    */
+    checkboxLabel(row) {
+        if (!row) {
+            return `${this.isAllSelected() ? 'deselect' : 'select'} all`;
+        }
+        return `${this.selection.isSelected(row) ? 'deselect' : 'select'} row ${row.position + 1}`;
+    }
+    /**
+     * Desc : toggle filter
+     */
+    toggleFilter() {
+        this.filterVisibility = !this.filterVisibility;
+    }
+    /**
+     * Desc : column visibility
+     */
+    columnVisibility(column) {
+        if (this.displayedColumns.includes(column)) {
+            this.displayedColumns = this.displayedColumns.filter(item => item !== column);
+            this.search.formElements.controls.forEach((item) => { if (item.name == column) {
+                item.visible = false;
+            } });
+        }
+        else {
+            const newIndex = this.masterDisplayedColumns.indexOf(column);
+            const targetIndex = this.displayedColumns.findIndex(item => this.masterDisplayedColumns.indexOf(item) > newIndex);
+            if (targetIndex === -1) {
+                this.displayedColumns.push(column);
+            }
+            else {
+                this.displayedColumns.splice(targetIndex, 0, column);
+            }
+            this.search.formElements.controls.forEach((item) => { if (item.name == column) {
+                item.visible = true;
+            } });
+        }
+        this.addActionForSelectedRows();
+    }
+    /**
+     * Desc : toggle row select
+     */
+    toggleRowSelect(row, event) {
+        const target = event.target;
+        let lastColumnIndex = this.displayedColumns.length - 1;
+        const headingLength = document.querySelector('table thead tr')?.children.length;
+        const headingLastColumn = document.querySelector('table thead tr')?.children[headingLength - 1];
+        if (headingLastColumn?.textContent == 'Action') {
+            lastColumnIndex = headingLength - 1;
+        }
+        const cell = target.closest('td');
+        if (cell) {
+            const cellIndex = Array.from(cell.parentNode.children).indexOf(cell);
+            if (cellIndex === lastColumnIndex) {
+                return;
+            }
+            else {
+            }
+        }
+        this.expandedElement = this.expandedElement === row ? null : row;
+        this.selection.toggle(row);
+    }
+    /**
+     * Desc : create single cell td and append to last column
+     */
+    createElementForSelelctedRows() {
+        this.addHeaderCell();
+        this.addActionCell();
+    }
+    /**
+     * Desc : create DOM element for action column specifically for selected row
+     */
+    addActionForSelectedRows() {
+        if (!this.selection.isEmpty()) {
+            const index = this.displayedColumns.indexOf('action');
+            if (index !== -1) {
+                this.displayedColumns.splice(index, 1);
+                setTimeout(() => { this.createElementForSelelctedRows(); }, 100);
+            }
+            else {
+                this.resetAndCreateActionElement();
+            }
+        }
+        else {
+            if (!this.displayedColumns.includes('action')) {
+                this.displayedColumns.push('action');
+            }
+        }
+    }
+    /**
+     * desc : delete DOM element for action column
+     */
+    resetActionColumn() {
+        const tableHeaderRow = this.el.nativeElement.querySelector('table thead tr');
+        if (tableHeaderRow) {
+            const lastChild = tableHeaderRow.lastChild;
+            if (lastChild) {
+                this.renderer.removeChild(tableHeaderRow, lastChild);
+            }
+        }
+        let renderSingletdCell = false;
+        const tableCellRows = this.el.nativeElement.querySelectorAll('table tbody tr');
+        tableCellRows.forEach((row) => {
+            if (row.children.length > 0 && !renderSingletdCell) {
+                renderSingletdCell = true;
+                const lastChild = row.lastChild;
+                if (lastChild) {
+                    this.renderer.removeChild(row, lastChild);
+                }
+            }
+        });
+    }
+    /**
+     * desc : add header cell using renderer library
+     */
+    addHeaderCell() {
+        const tableHeaderRow = this.el.nativeElement.querySelector('table thead tr');
+        if (tableHeaderRow) {
+            const newTh = this.renderer.createElement('th');
+            this.renderer.addClass(newTh, 'mat-mdc-header-cell');
+            this.renderer.addClass(newTh, 'mdc-data-table__header-cell');
+            this.renderer.addClass(newTh, 'cdk-header-cell');
+            this.renderer.addClass(newTh, 'header-align-right');
+            this.renderer.addClass(newTh, 'cdk-column-action');
+            this.renderer.addClass(newTh, 'mat-column-action');
+            this.renderer.addClass(newTh, 'ng-tns-c1115897789-0');
+            this.renderer.addClass(newTh, 'ng-star-inserted');
+            this.renderer.addClass(newTh, 'mat-mdc-table-sticky');
+            this.renderer.addClass(newTh, 'mat-mdc-table-sticky-border-elem-top');
+            this.renderer.addClass(newTh, 'mat-mdc-table-sticky-border-elem-right');
+            this.renderer.setStyle(newTh, 'position', 'sticky');
+            this.renderer.setStyle(newTh, 'top', '0px');
+            this.renderer.setStyle(newTh, 'zIndex', '101');
+            this.renderer.setStyle(newTh, 'right', '0px');
+            this.renderer.setStyle(newTh, 'color', '#000000');
+            this.renderer.setStyle(newTh, 'fontSize', '15px');
+            this.renderer.setStyle(newTh, 'textTransform', 'uppercase');
+            this.renderer.setStyle(newTh, 'backgroundColor', '#ffffff');
+            this.renderer.setStyle(newTh, 'minWidth', '250px');
+            this.renderer.setStyle(newTh, 'textAlign', 'center');
+            this.renderer.setAttribute(newTh, '_ngcontent-ng-c1115897789', '');
+            this.renderer.setAttribute(newTh, 'role', 'columnheader');
+            this.renderer.setAttribute(newTh, 'mat-header-cell', '');
+            this.renderer.appendChild(newTh, this.renderer.createText('Action'));
+            this.renderer.appendChild(tableHeaderRow, newTh);
+        }
+    }
+    /**
+     * desc: add action cell using renderer
+     */
+    addActionCell() {
+        let renderSingletdCell = false;
+        const tableCellRows = this.el.nativeElement.querySelectorAll('table tbody tr');
+        tableCellRows.forEach((row, index) => {
+            if (row.children.length > 0 && !renderSingletdCell) {
+                renderSingletdCell = true;
+                const newTd = this.renderer.createElement('td');
+                this.renderer.addClass(newTd, 'mat-mdc-cell');
+                this.renderer.addClass(newTd, 'mdc-data-table__cell');
+                this.renderer.addClass(newTd, 'cdk-cell');
+                this.renderer.addClass(newTd, 'header-align-right');
+                this.renderer.addClass(newTd, 'cdk-column-action');
+                this.renderer.addClass(newTd, 'mat-column-action');
+                this.renderer.addClass(newTd, 'ng-tns-c1115897789-0');
+                this.renderer.addClass(newTd, 'ng-star-inserted');
+                this.renderer.addClass(newTd, 'mat-mdc-table-sticky');
+                this.renderer.addClass(newTd, 'mat-mdc-table-sticky-border-elem-right');
+                this.renderer.setStyle(newTd, 'zIndex', '1');
+                this.renderer.setStyle(newTd, 'right', '0px');
+                this.renderer.setStyle(newTd, 'textAlign', 'center');
+                this.renderer.setStyle(newTd, 'borderLeft', '1px solid #cccccc');
+                this.renderer.setAttribute(newTd, '_ngcontent-ng-c1115897789', '');
+                this.renderer.setAttribute(newTd, 'mat-cell', '');
+                this.renderer.setAttribute(newTd, 'rowspan', '100');
+                const delButton = this.renderer.createElement('button');
+                delButton.className = 'action-icon action-delete';
+                this.renderer.setAttribute(delButton, 'mat-menu-item', '');
+                this.renderer.setStyle(delButton, 'display', 'inline-block');
+                this.renderer.setStyle(delButton, 'cursor', 'pointer');
+                this.renderer.setStyle(delButton, 'backgroundColor', 'unset');
+                this.renderer.setStyle(delButton, 'border', 'unset');
+                this.renderer.setStyle(delButton, 'borderRadius', '2px');
+                this.renderer.setStyle(delButton, 'padding', '5px');
+                this.renderer.setStyle(delButton, 'marginRight', '25px');
+                this.renderer.setStyle(delButton, 'border', '1px solid #ccc');
+                const delMatIcon = this.renderer.createElement('mat-icon');
+                this.renderer.setAttribute(delMatIcon, 'role', 'img');
+                this.renderer.addClass(delMatIcon, 'mat-icon');
+                this.renderer.addClass(delMatIcon, 'notranslate');
+                this.renderer.addClass(delMatIcon, 'material-icons');
+                this.renderer.addClass(delMatIcon, 'mat-ligature-font');
+                this.renderer.addClass(delMatIcon, 'mat-icon-no-color');
+                this.renderer.setAttribute(delMatIcon, 'aria-hidden', 'true');
+                this.renderer.setAttribute(delMatIcon, 'data-mat-icon-type', 'font');
+                this.renderer.appendChild(delMatIcon, this.renderer.createText('delete'));
+                this.renderer.listen(delButton, 'click', () => this.onTableAction('delete', this.selection.selected));
+                this.renderer.appendChild(delButton, delMatIcon);
+                this.renderer.appendChild(newTd, delButton);
+                this.renderer.appendChild(row, newTd);
+            }
+        });
+    }
+    /**
+     *
+     */
+    resetAndCreateActionElement() {
+        const headingLength = document.querySelector('table thead tr')?.children.length;
+        const headingLastColumn = document.querySelector('table thead tr')?.children[headingLength - 1];
+        if (headingLastColumn?.textContent == 'Action') {
+            this.resetActionColumn();
+            setTimeout(() => { this.createElementForSelelctedRows(); }, 100);
+        }
+    }
+    /**
+   * Desc : empty bin list
+   */
+    emptyList() {
+        this.data = { data: [], totalRecords: 0 };
+        this.tableDetails.paging.enabled = false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: DynamicTable, deps: [{ token: ExportService }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: DynamicTable, isStandalone: true, selector: "lib-dynamic-table", inputs: { pagination: "pagination", tableDetails: "tableDetails", dataset: "dataset", search: "search" }, outputs: { action: "action" }, viewQueries: [{ propertyName: "exportOptionMenu", first: true, predicate: ["exportOptionMenu"], descendants: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"main-table-container\">\n    <!-- Filter section begins -->\n     @if(search){\n      <div class=\"filter-section\">\n        <!-- filter icon begins-->\n         <div class=\"filter-icon-section\">\n            <div class=\"toggle-filter\" (click)=\"toggleFilter()\">\n              <mat-icon>filter_list</mat-icon>\n            </div>\n         </div>\n         <!-- filter icon ends -->\n        <!-- filter field begins -->\n         @if(filterVisibility){\n          <div class=\"filter\">\n              <lib-dynamic-form\n                class=\"toolbar-form\"\n                [dynamicFormDetails]=\"dynamicFormDetails\"\n              ></lib-dynamic-form>\n         </div>\n         }\n         <!-- filter field ends -->\n        <!-- Action button section begins -->\n        <div class=\"main-action-button\">\n          <button\n            matIconButton\n            color=\"primary\"\n            [matMenuTriggerFor]=\"fieldVisibilitySettings\"\n          >\n              <mat-icon class=\"unset-margin\">settings</mat-icon>\n          </button>\n           <mat-menu #fieldVisibilitySettings=\"matMenu\">\n              @for(col of masterDisplayedColumns;track col){\n                <div>\n                  <mat-checkbox [checked]=\"displayedColumns.includes(col)\" (change)=\"columnVisibility(col)\">\n                    {{col}}\n                  </mat-checkbox>\n                </div>\n              }\n          </mat-menu>\n          @if(actionRequired('export')){\n            <button\n              matIconButton\n              color=\"primary\"\n              [matMenuTriggerFor]=\"exportOptionMenu\"\n            >\n                <mat-icon class=\"unset-margin\">cloud_download</mat-icon>\n            </button>\n           <mat-menu #exportOptionMenu=\"matMenu\">\n            <button mat-menu-item (click)=\"exportData('csv')\">CSV</button>\n            <button mat-menu-item (click)=\"exportData('xlsx')\">XLSX</button>\n            <button mat-menu-item (click)=\"exportData('pdf')\">PDF</button>\n          </mat-menu>\n          }\n          @if(actionRequired('add')){\n            <button\n              mat-stroked-button\n              color=\"primary\"\n              (click)=\"onTableAction('create')\"\n            >\n              <mat-icon class=\"unset-margin\">add_circle</mat-icon>Add\n            </button>\n          }\n        </div>\n        <!-- Action button section ends -->\n      </div>\n     }\n    <!-- Filter section ends -->\n\n    <!-- Table section begins -->\n    <div class=\"table-container hide-scrollbar\">\n      <table\n        mat-table\n        [dataSource]=\"dataSource\"\n        class=\"mat-elevation-z8\"\n        matSort\n        multiTemplateDataRows\n        (matSortChange)=\"onSortChanges($event)\"\n        aria-label=\"table\"\n      >\n        @if(tableDetails.selectRequired){\n          <ng-container matColumnDef=\"select\" [sticky]=\"true\">\n            <th mat-header-cell *matHeaderCellDef>\n              <mat-checkbox\n                color=\"primary\"\n                (change)=\"$event ? toggleAllRows() : null\"\n                [checked]=\"selection.hasValue() && isAllSelected()\"\n                [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n                [aria-label]=\"checkboxLabel()\"\n              ></mat-checkbox>\n            </th>\n            <td mat-cell *matCellDef=\"let row\">\n              <mat-checkbox\n                color=\"primary\"\n                (click)=\"$event.stopPropagation()\"\n                (change)=\"$event ? selection.toggle(row) : null\"\n                [checked]=\"selection.isSelected(row)\"\n                [aria-label]=\"checkboxLabel(row)\"\n              ></mat-checkbox>\n            </td>\n          </ng-container>\n        }\n        @for(column of tableDetails.columns;track column){\n          @if(column.isComplex){\n             <ng-container matColumnDef=\"{{ column.columnDef }}\">\n                <th mat-header-cell *matHeaderCellDef aria-label=\"row actions\">{{ column.header }}</th>\n                <td mat-cell *matCellDef=\"let element\">\n                  {{ element[column.columnDef].length }}\n                  <button\n                    mat-icon-button\n                    aria-label=\"expand row\"\n                    class=\"valign-middle\"\n                    (click)=\"expandedElement = expandedElement === element ? null : element; $event.stopPropagation()\"\n                  >\n                  @if(expandedElement === element){\n                    <mat-icon>keyboard_arrow_up</mat-icon>\n                  }@else{\n                    <mat-icon>keyboard_arrow_down</mat-icon>\n                  }\n                  </button>\n                </td>\n             </ng-container>\n          }@else{\n            <ng-container matColumnDef=\"{{ column.columnDef }}\">\n              @if(column.sortRequired){\n                <th mat-header-cell *matHeaderCellDef mat-sort-header>\n                  {{ column.header }}\n                </th>\n              }@else{\n                <th mat-header-cell *matHeaderCellDef>{{ column.header }}</th>\n              }\n              @if(column.cell){\n                <td mat-cell *matCellDef=\"let row; let i = dataIndex\">\n                  @if(isArray(column.cell(row))){\n                    @for(cell of column.cell(row);track cell;let first = $first){\n                      @if(first){\n                        {{ cell }}\n                      }\n                    }\n                    @if(column.cell(row).length > 1){\n                      @if(isExpandedGroupRow === i){\n                        <mat-icon class=\"hoverCursorIcon\" (click)=\"expandList(i)\">keyboard_arrow_up</mat-icon>\n                      }@else{\n                        <mat-icon class=\"hoverCursorIcon\" (click)=\"expandList(i)\">keyboard_arrow_down</mat-icon>\n                      }\n                    }\n                    @if(isExpandedGroupRow === i){\n                      @for(cell of column.cell(row);track cell;let first = $first){\n                        @if(!first){\n                          <div class=\"hoverContent\">\n                            {{ cell }}\n                          </div>\n                        }\n                      }\n                    }\n                  }@else{\n                    {{ column.cell(row) }}\n                  }\n                </td>\n              }@else{\n                <td mat-cell *matCellDef=\"let row\">{{ row[column.columnDef] }}</td>\n              }\n            </ng-container>\n          }\n        }\n        <!-- table expanded columns -->\n         @for(expandedCol of expandColumnDefination;track expandedCol){\n          <ng-container matColumnDef=\"{{ expandedPrefix + expandedCol.columnDef }}\">\n            <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"displayedColumns.length + 1\">\n              @if(element[expandedCol.columnDef]?.length > 0){\n                <div\n                class=\"example-element-detail\"\n                [@detailExpand]=\"element === expandedElement ? 'expanded' : 'collapsed'\"\n              >\n                @if(expandedElement){\n                  <div class=\"inner-table mat-elevation-z8\">\n                    <!-- IF THE OBJECT ARRAY NEEDS TO BE DISPLAYED -->\n                    <table\n                      mat-table\n                      #innerTables\n                      mat-table\n                      aria-label=\"table\"\n                      [dataSource]=\"element[expandedCol.columnDef]\"\n                      class=\"w-100\"\n                    >\n                    @for(innerColumn of expandedCol?.innerColumns;track innerColumn){\n                      <ng-container matColumnDef=\"{{ innerColumn.columnDef }}\">\n                        <th mat-header-cell *matHeaderCellDef>{{ innerColumn.header }}</th>\n                        <td mat-cell *matCellDef=\"let innerRow\">\n                          {{ innerColumn.cell ? innerColumn.cell(innerRow) : innerRow[innerColumn.columnDef] }}\n                        </td>\n                      </ng-container>\n                    }\n                      <tr\n                        mat-header-row\n                        *matHeaderRowDef=\"getInnerColumnDef(expandedCol.innerColumns)\"\n                        style=\"background-color: lightgray\"\n                      ></tr>\n                      <tr\n                        mat-row\n                        *matRowDef=\"let row; columns: getInnerColumnDef(expandedCol.innerColumns)\"\n                        [class.expanded-row]\n                      ></tr>\n                    </table>\n                  </div>\n                }\n              </div>\n              }\n            </td>\n          </ng-container>\n         }\n        <!-- Action Column -->\n         @if(actionRequired()){\n          <ng-container matColumnDef=\"action\" [stickyEnd]=\"true\">\n            <th mat-header-cell *matHeaderCellDef class=\"header-align-right\">Action</th>\n            <td mat-cell *matCellDef=\"let element\" class=\"header-align-right\">\n              @if(tableDetails.tableButtons.view){\n                <button\n                class=\"action-icon action-view\"\n                mat-menu-item\n                (click)=\"onTableAction('view', element)\"\n                 >\n                   <mat-icon>remove_red_eye</mat-icon>\n                 </button>\n              }\n              @if(tableDetails.tableButtons.edit){\n                <button\n                class=\"action-icon action-edit\"\n                mat-menu-item\n                (click)=\"onTableAction('edit', element)\"\n                >\n                  <mat-icon>edit</mat-icon>\n                </button>\n              }\n              @if(tableDetails.tableButtons.delete){\n                <button\n                class=\"action-icon action-delete\"\n                mat-menu-item\n                (click)=\"onTableAction('delete', element)\"\n                >\n                  <mat-icon>delete</mat-icon>\n                </button>\n              }\n            </td>\n          </ng-container>\n         }\n\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumns;sticky:true\"></tr>\n        <tr\n          mat-row\n          *matRowDef=\"let row; columns: displayedColumns\"\n          [class.example-expanded-row]=\"expandedElement === row\"\n          (click)=\"toggleRowSelect(row,$event)\"\n         >\n        </tr>\n        <!-- table Rows which are expanded -->\n        <tr\n          mat-row\n          *matRowDef=\"let row; columns: getExpandedColumnHeaderDef(expandColumnDefination)\"\n          class=\"example-detail-row\"\n          style=\"height: 0 !important\"\n          ></tr>\n      </table>\n    </div>\n    @if(dataset.data === undefined){\n      <mat-spinner class=\"loader-for-table\"></mat-spinner>\n    }\n    @if(dataset.totalRecords === 0){\n      <section class=\"no-data-text\">\n        <p>No Records Found</p>\n      </section>\n    }\n    @if(tableDetails.paging.enabled){\n      <mat-paginator\n        #paginator\n        class=\"mat-elevation-z8 table-paginator\"\n        showFirstLastButtons\n        aria-label=\"Select page\"\n        (page)=\"pageChanged($event)\"\n      >\n      </mat-paginator>\n    }\n    <!-- Table section ends -->\n  </div>\n\n  ", styles: [":host{--FONT-FAMILY-NORMAL-TEXT: Roboto, \"Helvetica Neue\", sans-serif;--FONT-FAMILY-HEADING-TEXT: Roboto, \"Helvetica Neue\", sans-serif;--FONT-SIZE-FOR-VERY-TINY: 12px;--FONT-SIZE-FOR-VERY-SMALL-TEXT: 14px;--FONT-SIZE-FOR-SMALL-TEXT: 15px;--FONT-SIZE-FOR-NORMAL-TEXT: 16px;--FONT-SIZE-FOR-HEADING-TEXT: 22px;--FONT-SIZE-FOR-LARGE-HEADING-TEXT: 24px;--FONT-SIZE-FOR-SUB-HEADING-TEXT: 20px;--FONT-WEIGHT-LOW: 300;--FONT-WEIGHT-NORMAL: 400;--FONT-WEIGHT-VERY-BOLD: 900;--FONT-WEIGHT-BOLD: 600;--FONT-WEIGHT-SEMI-BOLD: 500;--PAGE-MAX-WIDTH: 1440px;--DIVIDER-MARGIN-TOP: 15px;--LIST-CONTAINER-MARGIN-TOP: 2%;--FORM-PAGE-MAIN-CONTAINER-MARGIN-TOP: 4%;--FORM-PAGE-MAIN-CONTAINER-MARGIN-BOTTOM: 4%;--LAYOUT-MIN-HEIGHT: calc(100% - 45px) ;--LANDING-PAGE-CONTAINER-MARGIN: 50px auto 0 auto;--LANDING-PAGE-MAX-WIDTH: 1218px;--LANDING-PAGE-PADDING: 0px 30px;--PRIMARY-COLOR: #016ed3;--SECONDARY-COLOR: #fafafa;--WHITE-BG-COLOR: #ffffff;--PAGE-BG-COLOR: #e4eaec;--LAYOUT-BG-COLOR: #f8f9fd;--TEXT-DARK-COLOR: #000000;--TEXT-LIGHT-COLOR: #ffffff;--TEXT-GREY-COLOR: #76838f;--TEXT-GREY-COLOR-FOR-TITLE: #4a5065;--TEXT-GREY-COLOR-FOR-CONTENT: #76838f;--BORDER-COLOR: #cccccc;--BOX-SHADOW: 0px 1px 6px #ccc;--LINK-COLOR: #0163bd;--DEFAULT-BUTTON-HOVER: #f0f0f0;--INFORMATION-COLOR: #fde6b6;--ICON-LIGHT-COLOR: #ffffff;--ICON-GREY-COLOR: #5f5f5f;--ICON-HOVER-COLOR: #02549c;--GREY-TABLE-HEADER-COLOR: #f5f5f5;--BG-FORM-ARRAY-CONTAINER: #ffffff;--FOOTER-BG-COLOR: #e0e5e7;--BUTTON-PRIMARY-BG-COLOR: #016ed3;--BUTTON-HOVER-PRIMARY-BG-COLOR: #8897ec;--BUTTON-NORMAL-BG-COLOR: transparent;--BUTTON-DANGER-BG-COLOR: red;--ALERT-DANGER-COLOR: #ad0606;--TOAST-SUCCESS-COLOR: #e9f7ee;--TOAST-ERROR-COLOR: #fddddd;--TOAST-WARNING-COLOR: #daedfa;--TOAST-TEXT-COLOR: #757070}html,body{height:100%}body{margin:0;font-family:Roboto,Helvetica Neue,sans-serif}.custom-container-fluid{width:100%;padding:0 16px;box-sizing:border-box}.custom-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}.custom-col-1{grid-column:span 1}.custom-col-2{grid-column:span 2}.custom-col-3{grid-column:span 3}.custom-col-4{grid-column:span 4}.custom-col-5{grid-column:span 5}.custom-col-6{grid-column:span 6}.custom-col-7{grid-column:span 7}.custom-col-8{grid-column:span 8}.custom-col-9{grid-column:span 9}.custom-col-10{grid-column:span 10}.custom-col-11{grid-column:span 11}.custom-col-12{grid-column:span 12}@media(max-width:768px){.custom-row>*{grid-column:span 12}}.hide-scrollbar{overflow:scroll}.hide-scrollbar::-webkit-scrollbar{display:none}.hide-scrollbar{-ms-overflow-style:none;scrollbar-width:none}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-thumb{background-color:#ccc;border-radius:100px}::-webkit-scrollbar-track{background-color:#e4e4e4;border-radius:100px}.main-form{padding:10px}.main-form.form-with-outline{border:1px solid #cccccc;border-radius:10px;padding:30px 20px 20px}.main-form .form-btn-section{padding:30px 0 0;text-align:right}.main-form .form-btn-section button:not(:last-child){margin-right:20px}.main-form .form-btn-section .form-btn-save:disabled{background:unset;border:1px solid var(--BORDER-COLOR);color:var(--TEXT-DARK-COLOR);font-weight:var(--FONT-WEIGHT-NORMAL)}.unset-margin{margin:unset!important}.main-table-container{padding:10px 30px}.main-table-container .filter-section{display:flex;justify-content:space-between;align-items:center;margin:20px 0}.main-table-container .filter-section .filter-icon-section{width:50px;padding:0 12px}.main-table-container .filter-section .filter-icon-section .toggle-filter{cursor:pointer;color:#000}.main-table-container .filter-section .filter{width:80%}.main-table-container .filter-section .filter .toolbar-form{width:100%}.main-table-container .filter-section .main-action-button{margin-left:auto;width:30%;text-align:end}.main-table-container .filter-section .main-action-button button:not(:last-child){margin-right:15px;color:#000;vertical-align:middle}.main-table-container .table-container{border:1px solid #ccc;border-bottom:none;border-top-right-radius:10px;border-top-left-radius:10px}.main-table-container .table-container .header-align-right{text-align:center}.main-table-container .table-container .action-icon{display:inline-block;cursor:pointer;background-color:unset;border:unset;border-radius:2px;padding:unset;width:unset;height:unset;margin-right:25px;border:1px solid #ccc;padding:5px 0 5px 5px;min-height:unset}.main-table-container .table-container .action-icon .mat-icon{margin-right:5px;vertical-align:middle}.main-table-container .table-container .action-icon.action-view:hover mat-icon{color:#016ed3}.main-table-container .table-container .action-icon.action-edit:hover mat-icon{color:#ffb700}.main-table-container .table-container .action-icon.action-delete:hover mat-icon{color:red}.main-table-container .table-container .action-icon-transition:hover{color:var(--PRIMARY-COLOR)}.main-table-container .table-container .align-action-icon{vertical-align:middle;font-size:20px}.main-table-container .table-container .no-data-text{text-align:center;padding:10% 0%}.main-table-container .table-container table{border-collapse:separate}.main-table-container .table-container table tr th{text-transform:capitalize;border-bottom:none;color:#000;font-size:15px;font-weight:500;text-transform:uppercase;background-color:#fff;border-bottom:1px solid #ccc;z-index:1!important}.main-table-container .table-container table tr th:first-child{background-color:#fff;z-index:2!important;border-right:1px solid #ccc}.main-table-container .table-container table tr th:last-child{background-color:#fff;z-index:2!important;border-left:1px solid #ccc}.main-table-container .table-container table tr td{line-height:20px;border-bottom:none;border-bottom:1px solid var(--BORDER-COLOR);font-weight:var(--FONT-WEIGHT-LOW);background:#fff}.main-table-container .table-container table tr td:first-child{background:#fff!important;border-right:1px solid #ccc}.main-table-container .table-container table tr td:last-child{background:#fff!important}.action-column-for-selected-row{position:absolute;top:0;right:0;z-index:999;height:100%;width:250px}.action-column-for-selected-row table{height:100%;width:100%}.action-column-for-selected-row table thead th{position:sticky}.hoverCursorIcon{cursor:pointer;vertical-align:middle;margin-left:2%}.groupListFirstData{display:inline-block;width:80%;line-height:normal;word-wrap:break-word;vertical-align:middle;padding:10px 0}.hoverContent{text-align:left;padding:10px 0;line-height:20px}.valign-middle{vertical-align:middle}.loader-for-table{width:45px!important;height:45px!important;margin:5% auto;color:var(--BUTTON-PRIMARY-BG-COLOR)}.mat-mdc-paginator{border-bottom:1px solid #cccccc;border-left:1px solid #cccccc;border-right:1px solid #cccccc;border-bottom-right-radius:10px;border-bottom-left-radius:10px;background-color:#fff}.mat-mdc-header-cell,.mat-mdc-footer-cell,.mat-mdc-cell{min-width:250px}.mat-mdc-header-row,.mat-mdc-footer-row,.mat-mdc-row{min-width:1920px}.mat-mdc-table-sticky-border-elem-right{min-width:250px}.mat-mdc-table-sticky-border-elem-left{min-width:100px}.mat-elevation-z8{box-shadow:unset}.header-align-right{border-left:1px solid #ccc}::ng-deep app-field-index .field-active{margin-bottom:unset!important}::ng-deep .mat-mdc-menu-content mat-checkbox{width:100%;padding:0 10px;border-bottom:1px solid rgba(204,204,204,.8)}::ng-deep .mat-mdc-menu-content mat-checkbox .mdc-label{text-transform:capitalize;font-size:15px}::ng-deep .mat-mdc-menu-content button{width:100%;padding:0 10px;border-bottom:1px solid rgba(204,204,204,.8)}::ng-deep .mat-mdc-menu-content button .mdc-label{text-transform:capitalize;font-size:15px}::ng-deep .mat-mdc-text-field-wrapper{height:45px!important}::ng-deep .mat-mdc-form-field-infix{padding:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DynamicForm, selector: "lib-dynamic-form", inputs: ["dynamicFormDetails"], outputs: ["onSubmitForm", "onCancelForm", "onFormValueChange"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i3.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i4.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i4.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i5.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i5.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i7.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i8.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i9.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }], animations: [
+            trigger('detailExpand', [
+                state('collapsed', style({ height: '0px', minHeight: '0' })),
+                state('expanded', style({ height: '*' })),
+                transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
+            ]),
+        ] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: DynamicTable, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-dynamic-table', standalone: true, imports: [
+                        CommonModule,
+                        DynamicForm,
+                        MatTableModule,
+                        MatPaginatorModule,
+                        MatSortModule,
+                        MatMenuModule,
+                        MatIconModule,
+                        MatCheckboxModule,
+                        MatButtonModule,
+                        MatProgressSpinnerModule
+                    ], animations: [
+                        trigger('detailExpand', [
+                            state('collapsed', style({ height: '0px', minHeight: '0' })),
+                            state('expanded', style({ height: '*' })),
+                            transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
+                        ]),
+                    ], template: "<div class=\"main-table-container\">\n    <!-- Filter section begins -->\n     @if(search){\n      <div class=\"filter-section\">\n        <!-- filter icon begins-->\n         <div class=\"filter-icon-section\">\n            <div class=\"toggle-filter\" (click)=\"toggleFilter()\">\n              <mat-icon>filter_list</mat-icon>\n            </div>\n         </div>\n         <!-- filter icon ends -->\n        <!-- filter field begins -->\n         @if(filterVisibility){\n          <div class=\"filter\">\n              <lib-dynamic-form\n                class=\"toolbar-form\"\n                [dynamicFormDetails]=\"dynamicFormDetails\"\n              ></lib-dynamic-form>\n         </div>\n         }\n         <!-- filter field ends -->\n        <!-- Action button section begins -->\n        <div class=\"main-action-button\">\n          <button\n            matIconButton\n            color=\"primary\"\n            [matMenuTriggerFor]=\"fieldVisibilitySettings\"\n          >\n              <mat-icon class=\"unset-margin\">settings</mat-icon>\n          </button>\n           <mat-menu #fieldVisibilitySettings=\"matMenu\">\n              @for(col of masterDisplayedColumns;track col){\n                <div>\n                  <mat-checkbox [checked]=\"displayedColumns.includes(col)\" (change)=\"columnVisibility(col)\">\n                    {{col}}\n                  </mat-checkbox>\n                </div>\n              }\n          </mat-menu>\n          @if(actionRequired('export')){\n            <button\n              matIconButton\n              color=\"primary\"\n              [matMenuTriggerFor]=\"exportOptionMenu\"\n            >\n                <mat-icon class=\"unset-margin\">cloud_download</mat-icon>\n            </button>\n           <mat-menu #exportOptionMenu=\"matMenu\">\n            <button mat-menu-item (click)=\"exportData('csv')\">CSV</button>\n            <button mat-menu-item (click)=\"exportData('xlsx')\">XLSX</button>\n            <button mat-menu-item (click)=\"exportData('pdf')\">PDF</button>\n          </mat-menu>\n          }\n          @if(actionRequired('add')){\n            <button\n              mat-stroked-button\n              color=\"primary\"\n              (click)=\"onTableAction('create')\"\n            >\n              <mat-icon class=\"unset-margin\">add_circle</mat-icon>Add\n            </button>\n          }\n        </div>\n        <!-- Action button section ends -->\n      </div>\n     }\n    <!-- Filter section ends -->\n\n    <!-- Table section begins -->\n    <div class=\"table-container hide-scrollbar\">\n      <table\n        mat-table\n        [dataSource]=\"dataSource\"\n        class=\"mat-elevation-z8\"\n        matSort\n        multiTemplateDataRows\n        (matSortChange)=\"onSortChanges($event)\"\n        aria-label=\"table\"\n      >\n        @if(tableDetails.selectRequired){\n          <ng-container matColumnDef=\"select\" [sticky]=\"true\">\n            <th mat-header-cell *matHeaderCellDef>\n              <mat-checkbox\n                color=\"primary\"\n                (change)=\"$event ? toggleAllRows() : null\"\n                [checked]=\"selection.hasValue() && isAllSelected()\"\n                [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n                [aria-label]=\"checkboxLabel()\"\n              ></mat-checkbox>\n            </th>\n            <td mat-cell *matCellDef=\"let row\">\n              <mat-checkbox\n                color=\"primary\"\n                (click)=\"$event.stopPropagation()\"\n                (change)=\"$event ? selection.toggle(row) : null\"\n                [checked]=\"selection.isSelected(row)\"\n                [aria-label]=\"checkboxLabel(row)\"\n              ></mat-checkbox>\n            </td>\n          </ng-container>\n        }\n        @for(column of tableDetails.columns;track column){\n          @if(column.isComplex){\n             <ng-container matColumnDef=\"{{ column.columnDef }}\">\n                <th mat-header-cell *matHeaderCellDef aria-label=\"row actions\">{{ column.header }}</th>\n                <td mat-cell *matCellDef=\"let element\">\n                  {{ element[column.columnDef].length }}\n                  <button\n                    mat-icon-button\n                    aria-label=\"expand row\"\n                    class=\"valign-middle\"\n                    (click)=\"expandedElement = expandedElement === element ? null : element; $event.stopPropagation()\"\n                  >\n                  @if(expandedElement === element){\n                    <mat-icon>keyboard_arrow_up</mat-icon>\n                  }@else{\n                    <mat-icon>keyboard_arrow_down</mat-icon>\n                  }\n                  </button>\n                </td>\n             </ng-container>\n          }@else{\n            <ng-container matColumnDef=\"{{ column.columnDef }}\">\n              @if(column.sortRequired){\n                <th mat-header-cell *matHeaderCellDef mat-sort-header>\n                  {{ column.header }}\n                </th>\n              }@else{\n                <th mat-header-cell *matHeaderCellDef>{{ column.header }}</th>\n              }\n              @if(column.cell){\n                <td mat-cell *matCellDef=\"let row; let i = dataIndex\">\n                  @if(isArray(column.cell(row))){\n                    @for(cell of column.cell(row);track cell;let first = $first){\n                      @if(first){\n                        {{ cell }}\n                      }\n                    }\n                    @if(column.cell(row).length > 1){\n                      @if(isExpandedGroupRow === i){\n                        <mat-icon class=\"hoverCursorIcon\" (click)=\"expandList(i)\">keyboard_arrow_up</mat-icon>\n                      }@else{\n                        <mat-icon class=\"hoverCursorIcon\" (click)=\"expandList(i)\">keyboard_arrow_down</mat-icon>\n                      }\n                    }\n                    @if(isExpandedGroupRow === i){\n                      @for(cell of column.cell(row);track cell;let first = $first){\n                        @if(!first){\n                          <div class=\"hoverContent\">\n                            {{ cell }}\n                          </div>\n                        }\n                      }\n                    }\n                  }@else{\n                    {{ column.cell(row) }}\n                  }\n                </td>\n              }@else{\n                <td mat-cell *matCellDef=\"let row\">{{ row[column.columnDef] }}</td>\n              }\n            </ng-container>\n          }\n        }\n        <!-- table expanded columns -->\n         @for(expandedCol of expandColumnDefination;track expandedCol){\n          <ng-container matColumnDef=\"{{ expandedPrefix + expandedCol.columnDef }}\">\n            <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"displayedColumns.length + 1\">\n              @if(element[expandedCol.columnDef]?.length > 0){\n                <div\n                class=\"example-element-detail\"\n                [@detailExpand]=\"element === expandedElement ? 'expanded' : 'collapsed'\"\n              >\n                @if(expandedElement){\n                  <div class=\"inner-table mat-elevation-z8\">\n                    <!-- IF THE OBJECT ARRAY NEEDS TO BE DISPLAYED -->\n                    <table\n                      mat-table\n                      #innerTables\n                      mat-table\n                      aria-label=\"table\"\n                      [dataSource]=\"element[expandedCol.columnDef]\"\n                      class=\"w-100\"\n                    >\n                    @for(innerColumn of expandedCol?.innerColumns;track innerColumn){\n                      <ng-container matColumnDef=\"{{ innerColumn.columnDef }}\">\n                        <th mat-header-cell *matHeaderCellDef>{{ innerColumn.header }}</th>\n                        <td mat-cell *matCellDef=\"let innerRow\">\n                          {{ innerColumn.cell ? innerColumn.cell(innerRow) : innerRow[innerColumn.columnDef] }}\n                        </td>\n                      </ng-container>\n                    }\n                      <tr\n                        mat-header-row\n                        *matHeaderRowDef=\"getInnerColumnDef(expandedCol.innerColumns)\"\n                        style=\"background-color: lightgray\"\n                      ></tr>\n                      <tr\n                        mat-row\n                        *matRowDef=\"let row; columns: getInnerColumnDef(expandedCol.innerColumns)\"\n                        [class.expanded-row]\n                      ></tr>\n                    </table>\n                  </div>\n                }\n              </div>\n              }\n            </td>\n          </ng-container>\n         }\n        <!-- Action Column -->\n         @if(actionRequired()){\n          <ng-container matColumnDef=\"action\" [stickyEnd]=\"true\">\n            <th mat-header-cell *matHeaderCellDef class=\"header-align-right\">Action</th>\n            <td mat-cell *matCellDef=\"let element\" class=\"header-align-right\">\n              @if(tableDetails.tableButtons.view){\n                <button\n                class=\"action-icon action-view\"\n                mat-menu-item\n                (click)=\"onTableAction('view', element)\"\n                 >\n                   <mat-icon>remove_red_eye</mat-icon>\n                 </button>\n              }\n              @if(tableDetails.tableButtons.edit){\n                <button\n                class=\"action-icon action-edit\"\n                mat-menu-item\n                (click)=\"onTableAction('edit', element)\"\n                >\n                  <mat-icon>edit</mat-icon>\n                </button>\n              }\n              @if(tableDetails.tableButtons.delete){\n                <button\n                class=\"action-icon action-delete\"\n                mat-menu-item\n                (click)=\"onTableAction('delete', element)\"\n                >\n                  <mat-icon>delete</mat-icon>\n                </button>\n              }\n            </td>\n          </ng-container>\n         }\n\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumns;sticky:true\"></tr>\n        <tr\n          mat-row\n          *matRowDef=\"let row; columns: displayedColumns\"\n          [class.example-expanded-row]=\"expandedElement === row\"\n          (click)=\"toggleRowSelect(row,$event)\"\n         >\n        </tr>\n        <!-- table Rows which are expanded -->\n        <tr\n          mat-row\n          *matRowDef=\"let row; columns: getExpandedColumnHeaderDef(expandColumnDefination)\"\n          class=\"example-detail-row\"\n          style=\"height: 0 !important\"\n          ></tr>\n      </table>\n    </div>\n    @if(dataset.data === undefined){\n      <mat-spinner class=\"loader-for-table\"></mat-spinner>\n    }\n    @if(dataset.totalRecords === 0){\n      <section class=\"no-data-text\">\n        <p>No Records Found</p>\n      </section>\n    }\n    @if(tableDetails.paging.enabled){\n      <mat-paginator\n        #paginator\n        class=\"mat-elevation-z8 table-paginator\"\n        showFirstLastButtons\n        aria-label=\"Select page\"\n        (page)=\"pageChanged($event)\"\n      >\n      </mat-paginator>\n    }\n    <!-- Table section ends -->\n  </div>\n\n  ", styles: [":host{--FONT-FAMILY-NORMAL-TEXT: Roboto, \"Helvetica Neue\", sans-serif;--FONT-FAMILY-HEADING-TEXT: Roboto, \"Helvetica Neue\", sans-serif;--FONT-SIZE-FOR-VERY-TINY: 12px;--FONT-SIZE-FOR-VERY-SMALL-TEXT: 14px;--FONT-SIZE-FOR-SMALL-TEXT: 15px;--FONT-SIZE-FOR-NORMAL-TEXT: 16px;--FONT-SIZE-FOR-HEADING-TEXT: 22px;--FONT-SIZE-FOR-LARGE-HEADING-TEXT: 24px;--FONT-SIZE-FOR-SUB-HEADING-TEXT: 20px;--FONT-WEIGHT-LOW: 300;--FONT-WEIGHT-NORMAL: 400;--FONT-WEIGHT-VERY-BOLD: 900;--FONT-WEIGHT-BOLD: 600;--FONT-WEIGHT-SEMI-BOLD: 500;--PAGE-MAX-WIDTH: 1440px;--DIVIDER-MARGIN-TOP: 15px;--LIST-CONTAINER-MARGIN-TOP: 2%;--FORM-PAGE-MAIN-CONTAINER-MARGIN-TOP: 4%;--FORM-PAGE-MAIN-CONTAINER-MARGIN-BOTTOM: 4%;--LAYOUT-MIN-HEIGHT: calc(100% - 45px) ;--LANDING-PAGE-CONTAINER-MARGIN: 50px auto 0 auto;--LANDING-PAGE-MAX-WIDTH: 1218px;--LANDING-PAGE-PADDING: 0px 30px;--PRIMARY-COLOR: #016ed3;--SECONDARY-COLOR: #fafafa;--WHITE-BG-COLOR: #ffffff;--PAGE-BG-COLOR: #e4eaec;--LAYOUT-BG-COLOR: #f8f9fd;--TEXT-DARK-COLOR: #000000;--TEXT-LIGHT-COLOR: #ffffff;--TEXT-GREY-COLOR: #76838f;--TEXT-GREY-COLOR-FOR-TITLE: #4a5065;--TEXT-GREY-COLOR-FOR-CONTENT: #76838f;--BORDER-COLOR: #cccccc;--BOX-SHADOW: 0px 1px 6px #ccc;--LINK-COLOR: #0163bd;--DEFAULT-BUTTON-HOVER: #f0f0f0;--INFORMATION-COLOR: #fde6b6;--ICON-LIGHT-COLOR: #ffffff;--ICON-GREY-COLOR: #5f5f5f;--ICON-HOVER-COLOR: #02549c;--GREY-TABLE-HEADER-COLOR: #f5f5f5;--BG-FORM-ARRAY-CONTAINER: #ffffff;--FOOTER-BG-COLOR: #e0e5e7;--BUTTON-PRIMARY-BG-COLOR: #016ed3;--BUTTON-HOVER-PRIMARY-BG-COLOR: #8897ec;--BUTTON-NORMAL-BG-COLOR: transparent;--BUTTON-DANGER-BG-COLOR: red;--ALERT-DANGER-COLOR: #ad0606;--TOAST-SUCCESS-COLOR: #e9f7ee;--TOAST-ERROR-COLOR: #fddddd;--TOAST-WARNING-COLOR: #daedfa;--TOAST-TEXT-COLOR: #757070}html,body{height:100%}body{margin:0;font-family:Roboto,Helvetica Neue,sans-serif}.custom-container-fluid{width:100%;padding:0 16px;box-sizing:border-box}.custom-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}.custom-col-1{grid-column:span 1}.custom-col-2{grid-column:span 2}.custom-col-3{grid-column:span 3}.custom-col-4{grid-column:span 4}.custom-col-5{grid-column:span 5}.custom-col-6{grid-column:span 6}.custom-col-7{grid-column:span 7}.custom-col-8{grid-column:span 8}.custom-col-9{grid-column:span 9}.custom-col-10{grid-column:span 10}.custom-col-11{grid-column:span 11}.custom-col-12{grid-column:span 12}@media(max-width:768px){.custom-row>*{grid-column:span 12}}.hide-scrollbar{overflow:scroll}.hide-scrollbar::-webkit-scrollbar{display:none}.hide-scrollbar{-ms-overflow-style:none;scrollbar-width:none}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-thumb{background-color:#ccc;border-radius:100px}::-webkit-scrollbar-track{background-color:#e4e4e4;border-radius:100px}.main-form{padding:10px}.main-form.form-with-outline{border:1px solid #cccccc;border-radius:10px;padding:30px 20px 20px}.main-form .form-btn-section{padding:30px 0 0;text-align:right}.main-form .form-btn-section button:not(:last-child){margin-right:20px}.main-form .form-btn-section .form-btn-save:disabled{background:unset;border:1px solid var(--BORDER-COLOR);color:var(--TEXT-DARK-COLOR);font-weight:var(--FONT-WEIGHT-NORMAL)}.unset-margin{margin:unset!important}.main-table-container{padding:10px 30px}.main-table-container .filter-section{display:flex;justify-content:space-between;align-items:center;margin:20px 0}.main-table-container .filter-section .filter-icon-section{width:50px;padding:0 12px}.main-table-container .filter-section .filter-icon-section .toggle-filter{cursor:pointer;color:#000}.main-table-container .filter-section .filter{width:80%}.main-table-container .filter-section .filter .toolbar-form{width:100%}.main-table-container .filter-section .main-action-button{margin-left:auto;width:30%;text-align:end}.main-table-container .filter-section .main-action-button button:not(:last-child){margin-right:15px;color:#000;vertical-align:middle}.main-table-container .table-container{border:1px solid #ccc;border-bottom:none;border-top-right-radius:10px;border-top-left-radius:10px}.main-table-container .table-container .header-align-right{text-align:center}.main-table-container .table-container .action-icon{display:inline-block;cursor:pointer;background-color:unset;border:unset;border-radius:2px;padding:unset;width:unset;height:unset;margin-right:25px;border:1px solid #ccc;padding:5px 0 5px 5px;min-height:unset}.main-table-container .table-container .action-icon .mat-icon{margin-right:5px;vertical-align:middle}.main-table-container .table-container .action-icon.action-view:hover mat-icon{color:#016ed3}.main-table-container .table-container .action-icon.action-edit:hover mat-icon{color:#ffb700}.main-table-container .table-container .action-icon.action-delete:hover mat-icon{color:red}.main-table-container .table-container .action-icon-transition:hover{color:var(--PRIMARY-COLOR)}.main-table-container .table-container .align-action-icon{vertical-align:middle;font-size:20px}.main-table-container .table-container .no-data-text{text-align:center;padding:10% 0%}.main-table-container .table-container table{border-collapse:separate}.main-table-container .table-container table tr th{text-transform:capitalize;border-bottom:none;color:#000;font-size:15px;font-weight:500;text-transform:uppercase;background-color:#fff;border-bottom:1px solid #ccc;z-index:1!important}.main-table-container .table-container table tr th:first-child{background-color:#fff;z-index:2!important;border-right:1px solid #ccc}.main-table-container .table-container table tr th:last-child{background-color:#fff;z-index:2!important;border-left:1px solid #ccc}.main-table-container .table-container table tr td{line-height:20px;border-bottom:none;border-bottom:1px solid var(--BORDER-COLOR);font-weight:var(--FONT-WEIGHT-LOW);background:#fff}.main-table-container .table-container table tr td:first-child{background:#fff!important;border-right:1px solid #ccc}.main-table-container .table-container table tr td:last-child{background:#fff!important}.action-column-for-selected-row{position:absolute;top:0;right:0;z-index:999;height:100%;width:250px}.action-column-for-selected-row table{height:100%;width:100%}.action-column-for-selected-row table thead th{position:sticky}.hoverCursorIcon{cursor:pointer;vertical-align:middle;margin-left:2%}.groupListFirstData{display:inline-block;width:80%;line-height:normal;word-wrap:break-word;vertical-align:middle;padding:10px 0}.hoverContent{text-align:left;padding:10px 0;line-height:20px}.valign-middle{vertical-align:middle}.loader-for-table{width:45px!important;height:45px!important;margin:5% auto;color:var(--BUTTON-PRIMARY-BG-COLOR)}.mat-mdc-paginator{border-bottom:1px solid #cccccc;border-left:1px solid #cccccc;border-right:1px solid #cccccc;border-bottom-right-radius:10px;border-bottom-left-radius:10px;background-color:#fff}.mat-mdc-header-cell,.mat-mdc-footer-cell,.mat-mdc-cell{min-width:250px}.mat-mdc-header-row,.mat-mdc-footer-row,.mat-mdc-row{min-width:1920px}.mat-mdc-table-sticky-border-elem-right{min-width:250px}.mat-mdc-table-sticky-border-elem-left{min-width:100px}.mat-elevation-z8{box-shadow:unset}.header-align-right{border-left:1px solid #ccc}::ng-deep app-field-index .field-active{margin-bottom:unset!important}::ng-deep .mat-mdc-menu-content mat-checkbox{width:100%;padding:0 10px;border-bottom:1px solid rgba(204,204,204,.8)}::ng-deep .mat-mdc-menu-content mat-checkbox .mdc-label{text-transform:capitalize;font-size:15px}::ng-deep .mat-mdc-menu-content button{width:100%;padding:0 10px;border-bottom:1px solid rgba(204,204,204,.8)}::ng-deep .mat-mdc-menu-content button .mdc-label{text-transform:capitalize;font-size:15px}::ng-deep .mat-mdc-text-field-wrapper{height:45px!important}::ng-deep .mat-mdc-form-field-infix{padding:0}\n"] }]
+        }], ctorParameters: () => [{ type: ExportService }, { type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { pagination: [{
+                type: Input
+            }], tableDetails: [{
+                type: Input
+            }], exportOptionMenu: [{
+                type: ViewChild,
+                args: ['exportOptionMenu', { static: false }]
+            }], paginator: [{
+                type: ViewChild,
+                args: [MatPaginator]
+            }], sort: [{
+                type: ViewChild,
+                args: [MatSort]
+            }], dataset: [{
+                type: Input
+            }], search: [{
+                type: Input
+            }], action: [{
+                type: Output
+            }] } });
+
+/*
+ * Public API Surface of dynamic-table
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DynamicTable, OrderBy, SearchAt, SearchOn, defaultPageSize };
+//# sourceMappingURL=devlab-one-dynamic-table.mjs.map