mat-table-ext 0.0.11 → 1.0.0-beta.0

package/fesm2020/mat-table-ext.mjs

@@ -1,1581 +0,0 @@
-import * as i0 from '@angular/core';
-import { Injectable, Component, Inject, Directive, Input, EventEmitter, Output, ViewEncapsulation, ViewChild, NgModule } from '@angular/core';
-import * as i7$1 from '@angular/material/table';
-import { MatTableDataSource, MatTableModule } from '@angular/material/table';
-import * as i3$1 from '@angular/forms';
-import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import * as i5 from '@angular/material/core';
-import { MatNativeDateModule, MatRippleModule } from '@angular/material/core';
-import * as i9 from '@angular/material/form-field';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { trigger, state, style, transition, animate } from '@angular/animations';
-import { SelectionModel } from '@angular/cdk/collections';
-import * as i8 from '@angular/cdk/drag-drop';
-import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
-import * as i1$1 from '@angular/material/dialog';
-import { MAT_DIALOG_DATA, MatDialogConfig, MatDialogModule } from '@angular/material/dialog';
-import * as i14 from '@angular/material/menu';
-import { MatMenuTrigger, MatMenuModule } from '@angular/material/menu';
-import * as i15 from '@angular/material/paginator';
-import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
-import * as i18 from '@angular/material/sort';
-import { MatSort, MatSortModule } from '@angular/material/sort';
-import { BehaviorSubject } from 'rxjs';
-import * as i1 from '@angular/common/http';
-import * as i3 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i6 from '@angular/material/button';
-import { MatButtonModule } from '@angular/material/button';
-import * as i7 from '@angular/material/checkbox';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i5$1 from '@angular/material/icon';
-import { MatIconModule } from '@angular/material/icon';
-import * as i10 from '@angular/material/input';
-import { MatInputModule } from '@angular/material/input';
-import * as i11 from '@angular/material/select';
-import { MatSelectModule } from '@angular/material/select';
-import * as XLSX from 'xlsx';
-import * as i4$1 from '@angular/platform-browser';
-import * as i16 from '@angular/material/progress-bar';
-import { MatProgressBarModule } from '@angular/material/progress-bar';
-import * as i19 from '@angular/material/toolbar';
-import { MatToolbarModule } from '@angular/material/toolbar';
-import * as i4 from '@angular/material/tooltip';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i1$2 from '@ngx-translate/core';
-import { TranslateModule } from '@ngx-translate/core';
-import { A11yModule } from '@angular/cdk/a11y';
-import { CdkAccordionModule } from '@angular/cdk/accordion';
-import { ClipboardModule } from '@angular/cdk/clipboard';
-import { PortalModule } from '@angular/cdk/portal';
-import { ScrollingModule } from '@angular/cdk/scrolling';
-import { CdkStepperModule } from '@angular/cdk/stepper';
-import { CdkTableModule } from '@angular/cdk/table';
-import { CdkTreeModule } from '@angular/cdk/tree';
-import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import { MatBadgeModule } from '@angular/material/badge';
-import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
-import { MatButtonToggleModule } from '@angular/material/button-toggle';
-import { MatCardModule } from '@angular/material/card';
-import { MatChipsModule } from '@angular/material/chips';
-import { MatStepperModule } from '@angular/material/stepper';
-import { MatDatepickerModule } from '@angular/material/datepicker';
-import { MatDividerModule } from '@angular/material/divider';
-import { MatExpansionModule } from '@angular/material/expansion';
-import { MatGridListModule } from '@angular/material/grid-list';
-import { MatListModule } from '@angular/material/list';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import { MatRadioModule } from '@angular/material/radio';
-import { MatSidenavModule } from '@angular/material/sidenav';
-import { MatSliderModule } from '@angular/material/slider';
-import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import { MatSnackBarModule } from '@angular/material/snack-bar';
-import { MatTabsModule } from '@angular/material/tabs';
-import { MatTreeModule } from '@angular/material/tree';
-
-class MatTableExtService {
-    constructor(http) {
-        this.http = http;
-        this.selectedRow = new BehaviorSubject(null);
-        this.selectedRowIndex = new BehaviorSubject(null);
-    }
-}
-MatTableExtService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: MatTableExtService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
-MatTableExtService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: MatTableExtService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: MatTableExtService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: function () { return [{ type: i1.HttpClient }]; } });
-
-class EditingComponent {
-    constructor(dialogRef, dialogData, service) {
-        this.dialogRef = dialogRef;
-        this.dialogData = dialogData;
-        this.service = service;
-        this.keys = [];
-        this.templateKeys = [];
-        this.types = {};
-        this.templateTypes = {};
-        this.columns = [];
-        this.templateRow = {};
-    }
-    ngOnInit() {
-        this.setData(this.dialogData);
-    }
-    /**
-     * @description This method is used to set data for editing.
-     * @param value dialog Data
-     */
-    setData(value) {
-        let row = value.row;
-        let types = {};
-        this.keys = [];
-        this.columns = value.columns;
-        this.columns.forEach((column) => {
-            this.keys.push(column.field);
-            if (column.type == 'selection') {
-                types[column.field] = column.type;
-                let temp = row[column.field];
-                row[column.field] = {
-                    value: temp,
-                    options: column.options,
-                };
-            }
-            else {
-                types[column.field] = column.type;
-            }
-        });
-        this.types = types;
-        this.setTemplateRef(value);
-    }
-    /**
-     * @description This method is used to set the data when data comes in from cus template.
-     * @param value template value
-     */
-    setTemplateRef(value) {
-        if (value.templateRef !== undefined) {
-            this.templateRow = { ...value.row };
-            let types = {};
-            this.templateKeys = [];
-            this.columns.forEach((column) => {
-                this.templateKeys.push(column.field);
-                if (column.type == 'selection') {
-                    types[column.field] = column.type;
-                    let temp = this.templateRow[column.field];
-                    this.templateRow[column.field] = {
-                        value: temp,
-                        options: column.options,
-                    };
-                }
-                else {
-                    types[column.field] = column.type;
-                }
-            });
-            this.templateTypes = types;
-            this.templateRef = value.templateRef;
-        }
-    }
-    /**
-     * @description This method is triggered when dialog is closed and also emits the dialog closed event data.
-     */
-    closeDialog() {
-        let rowData = { ...this.dialogData.row };
-        this.keys.forEach((key) => {
-            if (this.types[key] === 'selection') {
-                let temp = rowData[key].value;
-                rowData[key] = temp;
-            }
-        });
-        this.dialogRef.close(rowData);
-    }
-    /**
-     * @description This method is called when the dialog is closed custom template action.
-     * @param row row to be edited.
-     * @param keys keys of columns
-     * @param types column types
-     */
-    closeTemplateDialog(row, keys, types) {
-        let rowData = { ...row };
-        keys.forEach((key) => {
-            if (types[key] === 'selection') {
-                let temp = rowData[key].value;
-                rowData[key] = temp;
-            }
-        });
-        this.dialogRef.close(rowData);
-    }
-}
-EditingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: EditingComponent, deps: [{ token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: MatTableExtService }], target: i0.ɵɵFactoryTarget.Component });
-EditingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: EditingComponent, selector: "app-editing", ngImport: i0, template: "<div *ngIf=\"!templateRef\" style=\"height: 100%;\" class=\"main-dialog-container\">\r\n    <div mat-dialog-title class=\"dialog-title-container\">\r\n        <h2 style=\"margin: 0;\">Edit Row</h2>\r\n        <span class=\"example-spacer\"></span>\r\n        <button mat-icon-button aria-label=\"Example icon button with a vertical three dot icon\">\r\n            <mat-icon mat-dialog-close style=\"cursor: pointer;\" fxFlex=\"5\">close</mat-icon>\r\n        </button>\r\n    </div>\r\n    <mat-dialog-content style=\"margin-right: 20px;\">\r\n        <div style=\"display: flex; flex-direction: column;\">\r\n            <ng-container *ngFor=\"let key of keys\">\r\n                <!-- Number Type -->\r\n                <mat-form-field *ngIf=\"types[key] == 'number'\" appearance=\"outline\" class=\"inline-editing-field\">\r\n                    <mat-label>{{key | titlecase}}</mat-label>\r\n                    <input matInput type=\"number\" [(ngModel)]=\"dialogData['row'][key]\" [ngModelOptions]=\"{standalone: true}\">\r\n                </mat-form-field>\r\n        \r\n                <!-- String Type -->\r\n        \r\n                <mat-form-field *ngIf=\"types[key] == 'string'\" appearance=\"outline\" class=\"inline-editing-field\">\r\n                    <mat-label>{{key | titlecase}}</mat-label>\r\n                    <input matInput type=\"text\" [(ngModel)]=\"dialogData['row'][key]\" [ngModelOptions]=\"{standalone: true}\">\r\n                </mat-form-field>\r\n                <mat-form-field *ngIf=\"types[key] == 'date'\" appearance=\"outline\" class=\"inline-editing-field\">\r\n                    <mat-label>{{key | titlecase}}</mat-label>\r\n                    <input matInput type=\"text\" [(ngModel)]=\"dialogData['row'][key]\" [ngModelOptions]=\"{standalone: true}\">\r\n                </mat-form-field>\r\n                <!-- Selection Type -->\r\n        \r\n                <mat-form-field *ngIf=\"types[key] == 'selection'\" appearance=\"outline\" class=\"inline-editing-field\">\r\n                    <mat-label>{{key | titlecase}}</mat-label>\r\n                    <mat-select [value]=\"dialogData['row'][key].value\" [(ngModel)]=\"dialogData['row'][key].value\">\r\n                        <mat-option *ngFor=\"let option of dialogData['row'][key].options\" [value]=\"option\">\r\n                            {{option}}\r\n                        </mat-option>\r\n                    </mat-select>\r\n                </mat-form-field>\r\n                <!-- Boolean Type -->\r\n                <p>\r\n                    <mat-checkbox *ngIf=\"types[key] == 'boolean'\" color=\"primary\" [(ngModel)]=\"dialogData['row'][key]\">\r\n                        <mat-label>{{key | titlecase}}</mat-label>\r\n                    </mat-checkbox>\r\n                </p>\r\n            </ng-container>\r\n        </div>\r\n    </mat-dialog-content>\r\n    <div class=\"spacer\"></div>\r\n    <mat-dialog-actions style=\"margin-top: 20px;\" align=\"end\">\r\n        <button mat-raised-button color=\"warn\" mat-dialog-close>\r\n            Cancel\r\n        </button>\r\n        <button mat-raised-button color=\"primary\" (click)=\"closeDialog()\">Save</button>\r\n    </mat-dialog-actions>\r\n</div>\r\n<ng-container *ngIf=\"templateRef\" [ngTemplateOutlet]=\"templateRef\" [ngTemplateOutletContext]=\"{data:{row:templateRow,columns:columns,columnKeys:templateKeys,columnTypes:templateTypes,closeDialog:closeTemplateDialog}}\"></ng-container>", styles: [".main-dialog-container{display:flex;flex-direction:column}.main-dialog-container mat-dialog-content{overflow-y:auto;margin:0;padding:0 0 0 20px}.dialog-title-container{display:flex;align-items:center}.spacer{flex-grow:1}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i6.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i7.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i9.MatLabel, selector: "mat-label" }, { kind: "directive", type: i10.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i11.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: EditingComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-editing', template: "<div *ngIf=\"!templateRef\" style=\"height: 100%;\" class=\"main-dialog-container\">\r\n    <div mat-dialog-title class=\"dialog-title-container\">\r\n        <h2 style=\"margin: 0;\">Edit Row</h2>\r\n        <span class=\"example-spacer\"></span>\r\n        <button mat-icon-button aria-label=\"Example icon button with a vertical three dot icon\">\r\n            <mat-icon mat-dialog-close style=\"cursor: pointer;\" fxFlex=\"5\">close</mat-icon>\r\n        </button>\r\n    </div>\r\n    <mat-dialog-content style=\"margin-right: 20px;\">\r\n        <div style=\"display: flex; flex-direction: column;\">\r\n            <ng-container *ngFor=\"let key of keys\">\r\n                <!-- Number Type -->\r\n                <mat-form-field *ngIf=\"types[key] == 'number'\" appearance=\"outline\" class=\"inline-editing-field\">\r\n                    <mat-label>{{key | titlecase}}</mat-label>\r\n                    <input matInput type=\"number\" [(ngModel)]=\"dialogData['row'][key]\" [ngModelOptions]=\"{standalone: true}\">\r\n                </mat-form-field>\r\n        \r\n                <!-- String Type -->\r\n        \r\n                <mat-form-field *ngIf=\"types[key] == 'string'\" appearance=\"outline\" class=\"inline-editing-field\">\r\n                    <mat-label>{{key | titlecase}}</mat-label>\r\n                    <input matInput type=\"text\" [(ngModel)]=\"dialogData['row'][key]\" [ngModelOptions]=\"{standalone: true}\">\r\n                </mat-form-field>\r\n                <mat-form-field *ngIf=\"types[key] == 'date'\" appearance=\"outline\" class=\"inline-editing-field\">\r\n                    <mat-label>{{key | titlecase}}</mat-label>\r\n                    <input matInput type=\"text\" [(ngModel)]=\"dialogData['row'][key]\" [ngModelOptions]=\"{standalone: true}\">\r\n                </mat-form-field>\r\n                <!-- Selection Type -->\r\n        \r\n                <mat-form-field *ngIf=\"types[key] == 'selection'\" appearance=\"outline\" class=\"inline-editing-field\">\r\n                    <mat-label>{{key | titlecase}}</mat-label>\r\n                    <mat-select [value]=\"dialogData['row'][key].value\" [(ngModel)]=\"dialogData['row'][key].value\">\r\n                        <mat-option *ngFor=\"let option of dialogData['row'][key].options\" [value]=\"option\">\r\n                            {{option}}\r\n                        </mat-option>\r\n                    </mat-select>\r\n                </mat-form-field>\r\n                <!-- Boolean Type -->\r\n                <p>\r\n                    <mat-checkbox *ngIf=\"types[key] == 'boolean'\" color=\"primary\" [(ngModel)]=\"dialogData['row'][key]\">\r\n                        <mat-label>{{key | titlecase}}</mat-label>\r\n                    </mat-checkbox>\r\n                </p>\r\n            </ng-container>\r\n        </div>\r\n    </mat-dialog-content>\r\n    <div class=\"spacer\"></div>\r\n    <mat-dialog-actions style=\"margin-top: 20px;\" align=\"end\">\r\n        <button mat-raised-button color=\"warn\" mat-dialog-close>\r\n            Cancel\r\n        </button>\r\n        <button mat-raised-button color=\"primary\" (click)=\"closeDialog()\">Save</button>\r\n    </mat-dialog-actions>\r\n</div>\r\n<ng-container *ngIf=\"templateRef\" [ngTemplateOutlet]=\"templateRef\" [ngTemplateOutletContext]=\"{data:{row:templateRow,columns:columns,columnKeys:templateKeys,columnTypes:templateTypes,closeDialog:closeTemplateDialog}}\"></ng-container>", styles: [".main-dialog-container{display:flex;flex-direction:column}.main-dialog-container mat-dialog-content{overflow-y:auto;margin:0;padding:0 0 0 20px}.dialog-title-container{display:flex;align-items:center}.spacer{flex-grow:1}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MAT_DIALOG_DATA]
-                }] }, { type: MatTableExtService }]; } });
-
-class ResizeColumnDirective {
-    constructor(renderer, el) {
-        this.renderer = renderer;
-        this.el = el;
-        this.columnsResizable$ = false;
-        this.onMouseDown = (event) => {
-            this.pressed = true;
-            this.startX = event.pageX;
-            this.startWidth = this.column.offsetWidth;
-        };
-        this.onMouseMove = (event) => {
-            const offset = 5;
-            if (this.pressed && event.buttons) {
-                this.renderer.addClass(this.table, "resizing");
-                // Calculate width of column
-                let width = this.startWidth + (event.pageX - this.startX - offset);
-                const tableCells = Array.from(this.table.querySelectorAll(".mat-row")).map((row) => row.querySelectorAll(".mat-cell").item(this.index));
-                // Set table header width
-                this.renderer.setStyle(this.column, "width", `${width}px`);
-                // Set table cells width
-                for (const cell of tableCells) {
-                    if (cell && cell !== null)
-                        this.renderer.setStyle(cell, "width", `${width}px`);
-                }
-            }
-        };
-        this.onMouseUp = (event) => {
-            if (this.pressed) {
-                this.pressed = false;
-                this.renderer.removeClass(this.table, "resizing");
-            }
-        };
-        this.column = this.el.nativeElement;
-    }
-    set columnsResizable(val) {
-        this.columnsResizable$ = val;
-    }
-    get columnsResizable() {
-        return this.columnsResizable$;
-    }
-    ngOnInit() {
-        if (this.columnsResizable$) {
-            const row = this.renderer.parentNode(this.column);
-            const thead = this.renderer.parentNode(row);
-            this.table = this.renderer.parentNode(thead);
-            const resizer = this.renderer.createElement("span");
-            this.renderer.addClass(resizer, "resize-holder");
-            this.renderer.setAttribute(resizer, 'id', "resizeHolderSpan");
-            this.renderer.appendChild(this.column, resizer);
-            this.renderer.listen(resizer, "mousedown", this.onMouseDown);
-            this.renderer.listen(this.table, "mousemove", this.onMouseMove);
-            this.renderer.listen("document", "mouseup", this.onMouseUp);
-        }
-        else {
-            this.removeDragElementFromDom();
-        }
-    }
-    ngOnChanges() {
-        if (this.columnsResizable$) {
-            const row = this.renderer.parentNode(this.column);
-            const thead = this.renderer.parentNode(row);
-            const resizer = this.renderer.createElement("span");
-            this.table = this.renderer.parentNode(thead);
-            this.renderer.addClass(resizer, "resize-holder");
-            this.renderer.setAttribute(resizer, 'id', "resizeHolderSpan");
-            this.renderer.appendChild(this.column, resizer);
-            this.renderer.listen(resizer, "mousedown", this.onMouseDown);
-            this.renderer.listen(this.table, "mousemove", this.onMouseMove);
-            this.renderer.listen("document", "mouseup", this.onMouseUp);
-        }
-        else {
-            this.removeDragElementFromDom();
-        }
-    }
-    /**
-     * @description This method is used remove resizing handlers from the table headers when column resizing is disabled.
-     */
-    removeDragElementFromDom() {
-        let ele = document.getElementById('resizeHolderSpan');
-        if (ele && ele !== null && ele !== undefined) {
-            this.renderer.removeChild(this.column, ele);
-        }
-    }
-}
-ResizeColumnDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ResizeColumnDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-ResizeColumnDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: ResizeColumnDirective, selector: "[columnsResizable]", inputs: { columnsResizable: "columnsResizable", index: "index" }, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ResizeColumnDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: "[columnsResizable]"
-                }]
-        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { columnsResizable: [{
-                type: Input
-            }], index: [{
-                type: Input
-            }] } });
-
-class ColumnPinningComponent {
-    constructor() {
-        this.columnsChanged = new EventEmitter();
-        this.icons = {
-            left: 'pinLeft',
-            right: 'pinRight',
-            none: 'pinNone',
-        };
-    }
-    ngOnInit() { }
-    /**
-     * @description This method is called when pin value changes for a column.
-     * @param column column of which to set the pin value
-     */
-    changeValue(column) {
-        if (column.pinned) {
-            if (column.pinned == 'left') {
-                this.setColumnPinValue(column, 'right');
-            }
-            else if (column.pinned == 'right') {
-                this.setColumnPinValue(column, undefined);
-            }
-        }
-        else {
-            this.setColumnPinValue(column, 'left');
-        }
-        this.columnsChanged.emit(this.columns);
-    }
-    /**
-     * @description This method is used to set the column pin value.
-     * @param column column of which to set the pin value
-     * @param value pin value to set
-     */
-    setColumnPinValue(column, value) {
-        this.columns.forEach((col) => {
-            if (column?.header == col.header) {
-                col.pinned = value;
-            }
-        });
-    }
-}
-ColumnPinningComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ColumnPinningComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ColumnPinningComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: ColumnPinningComponent, selector: "app-column-pinning", inputs: { columns: "columns" }, outputs: { columnsChanged: "columnsChanged" }, ngImport: i0, template: "<div class=\"pinning-list-item\" *ngFor=\"let column of columns\" style=\"display: flex; \">\r\n    <button mat-icon-button >\r\n        <mat-icon (click)=\"changeValue(column)\" matTooltip=\"{{column['pinned'] ? (column['pinned'] | titlecase):'None'}}\"\r\n            svgIcon=\"{{column['pinned'] =='left'|| column['pinned'] =='right' ? icons[column['pinned']]:'pinNone'}}\" class=\"pinning-icon\"></mat-icon>\r\n    </button>\r\n    <span class=\"column-headers\">{{column.header}}</span>\r\n</div>", styles: [".pinning-list-item{display:flex;justify-content:flex-start;align-items:baseline;height:3em}.column-headers{font-family:Roboto,Helvetica Neue,sans-serif}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i6.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ColumnPinningComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-column-pinning', template: "<div class=\"pinning-list-item\" *ngFor=\"let column of columns\" style=\"display: flex; \">\r\n    <button mat-icon-button >\r\n        <mat-icon (click)=\"changeValue(column)\" matTooltip=\"{{column['pinned'] ? (column['pinned'] | titlecase):'None'}}\"\r\n            svgIcon=\"{{column['pinned'] =='left'|| column['pinned'] =='right' ? icons[column['pinned']]:'pinNone'}}\" class=\"pinning-icon\"></mat-icon>\r\n    </button>\r\n    <span class=\"column-headers\">{{column.header}}</span>\r\n</div>", styles: [".pinning-list-item{display:flex;justify-content:flex-start;align-items:baseline;height:3em}.column-headers{font-family:Roboto,Helvetica Neue,sans-serif}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { columns: [{
-                type: Input
-            }], columnsChanged: [{
-                type: Output
-            }] } });
-
-class FilterColumnsComponentComponent {
-    constructor() {
-        this.filterOutput = new EventEmitter();
-        this.stringCtrl = new FormControl();
-        this.numberCtrl = new FormControl();
-        this.dateCtrl = new FormControl();
-        this.booleanCtrl = new FormControl();
-        this.selectionCtrl = new FormControl();
-    }
-    ngOnInit() {
-        this.stringCtrl.valueChanges.subscribe((value) => {
-            this.checkValue(value);
-        });
-        this.dateCtrl.valueChanges.subscribe((value) => {
-            this.checkValue(value);
-        });
-        this.numberCtrl.valueChanges.subscribe((value) => {
-            this.checkValue(value);
-        });
-        this.booleanCtrl.valueChanges.subscribe((value) => {
-            this.checkValue(value);
-        });
-        this.selectionCtrl.valueChanges.subscribe((value) => {
-            this.checkValue(value);
-        });
-    }
-    /**
-     * @description This method is make value is valid and not null.
-     * @param value value to check its type.
-     */
-    checkValue(value) {
-        if (value || value == '') {
-            this.emitOutput(value);
-        }
-        else if (value == null) {
-            this.emitOutput('');
-        }
-    }
-    /**
-     * @description This method will emit seach value to parent component.
-     * @param value value on which base table rows are filtered.
-     */
-    emitOutput(value) {
-        let obj = { [this.obj.field]: value };
-        this.filterOutput.emit(obj);
-    }
-}
-FilterColumnsComponentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: FilterColumnsComponentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FilterColumnsComponentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: FilterColumnsComponentComponent, selector: "app-filter-columns-component", inputs: { obj: "obj" }, outputs: { filterOutput: "filterOutput" }, ngImport: i0, template: "\r\n    <ng-container *ngIf=\"obj\">\r\n        <!-- Number Type -->\r\n        <mat-form-field *ngIf=\"obj.type == 'number'\" appearance=\"outline\" class=\"inline-editing-field\" >\r\n            <input matInput type=\"number\" [formControl]=\"numberCtrl\">\r\n        </mat-form-field>\r\n        \r\n        <!-- String Type -->\r\n        <mat-form-field *ngIf=\"obj.type == 'string'\" appearance=\"outline\" class=\"inline-editing-field\">\r\n            <input matInput type=\"text\" [formControl]=\"stringCtrl\">\r\n        </mat-form-field>\r\n        <mat-form-field *ngIf=\"obj.type == 'date'\" appearance=\"outline\" class=\"inline-editing-field\">\r\n            <input matInput type=\"date\" [formControl]=\"dateCtrl\">\r\n        </mat-form-field>\r\n        <!-- Selection Type -->\r\n        <mat-form-field *ngIf=\"obj.type == 'selection'\" appearance=\"outline\" class=\"inline-editing-field\">\r\n            <mat-select [value]=\"\" [formControl]=\"selectionCtrl\">\r\n                <mat-option *ngFor=\"let option of obj.options\" [value]=\"option\">\r\n                    {{option}}\r\n                </mat-option>\r\n            </mat-select>\r\n        </mat-form-field>\r\n        <!-- Boolean Type -->\r\n        <mat-checkbox (click)=\"$event.stopPropagation()\" *ngIf=\"obj.type == 'boolean'\" color=\"primary\" [formControl]=\"booleanCtrl\"></mat-checkbox>\r\n\r\n    </ng-container>", styles: [""], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i7.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i9.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i10.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i11.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: FilterColumnsComponentComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-filter-columns-component', template: "\r\n    <ng-container *ngIf=\"obj\">\r\n        <!-- Number Type -->\r\n        <mat-form-field *ngIf=\"obj.type == 'number'\" appearance=\"outline\" class=\"inline-editing-field\" >\r\n            <input matInput type=\"number\" [formControl]=\"numberCtrl\">\r\n        </mat-form-field>\r\n        \r\n        <!-- String Type -->\r\n        <mat-form-field *ngIf=\"obj.type == 'string'\" appearance=\"outline\" class=\"inline-editing-field\">\r\n            <input matInput type=\"text\" [formControl]=\"stringCtrl\">\r\n        </mat-form-field>\r\n        <mat-form-field *ngIf=\"obj.type == 'date'\" appearance=\"outline\" class=\"inline-editing-field\">\r\n            <input matInput type=\"date\" [formControl]=\"dateCtrl\">\r\n        </mat-form-field>\r\n        <!-- Selection Type -->\r\n        <mat-form-field *ngIf=\"obj.type == 'selection'\" appearance=\"outline\" class=\"inline-editing-field\">\r\n            <mat-select [value]=\"\" [formControl]=\"selectionCtrl\">\r\n                <mat-option *ngFor=\"let option of obj.options\" [value]=\"option\">\r\n                    {{option}}\r\n                </mat-option>\r\n            </mat-select>\r\n        </mat-form-field>\r\n        <!-- Boolean Type -->\r\n        <mat-checkbox (click)=\"$event.stopPropagation()\" *ngIf=\"obj.type == 'boolean'\" color=\"primary\" [formControl]=\"booleanCtrl\"></mat-checkbox>\r\n\r\n    </ng-container>" }]
-        }], ctorParameters: function () { return []; }, propDecorators: { obj: [{
-                type: Input
-            }], filterOutput: [{
-                type: Output
-            }] } });
-
-class MatTableExtComponent {
-    constructor(dialog, service, formBuildersService, domSanitizer, matIconRegistry, cdr) {
-        this.dialog = dialog;
-        this.service = service;
-        this.formBuildersService = formBuildersService;
-        this.domSanitizer = domSanitizer;
-        this.matIconRegistry = matIconRegistry;
-        this.cdr = cdr;
-        this.columns = [];
-        this.columnResizable = false;
-        this.stripedRows = false;
-        this.rowHover = false;
-        this.inlineRowEditing = false;
-        this.inCellEditing = false;
-        this.popupRowEditing = false;
-        this.enableDelete = false;
-        this.rowSelection = false;
-        this.multiRowSelection = false;
-        this.stickyFooter = false;
-        this.stickyHeader = false;
-        this.showFooterRow = false;
-        this.columnFilter = false;
-        this.loadingIndicator = false;
-        this.sorting = false;
-        this.showToolbar = false;
-        this.toolbarTitle = '';
-        this.tableHeight = '';
-        this.toolbarHeight = '50px';
-        this.tableWidth = '100%';
-        this.scrollbarH = false;
-        this.columnHidable = false;
-        this.columnPinnable = false;
-        this.globalSearch = false;
-        this.expandRows = false;
-        this.dndColumns = false;
-        this.showPaginator = true;
-        this.showFirstLastButtons = false;
-        this.exportButtonEnable = false;
-        this.pageSizeOptions = [10, 50, 100];
-        this.cellTemplateRefMap = {};
-        // Table outputs
-        this.inlineChange = new EventEmitter();
-        this.cellChange = new EventEmitter();
-        this.popupChange = new EventEmitter();
-        this.rowDeleted = new EventEmitter();
-        this.scroll = new EventEmitter();
-        this.selectionChanged = new EventEmitter();
-        this.expansionChange = new EventEmitter();
-        this.tableID = new Date().getTime();
-        this.columnPinningOptions = [];
-        this.exportMenuCtrl = false;
-        this.columnPinMenuCtrl = false;
-        this.hideShowMenuCtrl = false;
-        this.columnFilterBySelection = false;
-        this.rowDataTemp = {};
-        this.inlineEditingTemplateRefData = {};
-        this.displayedColumns = [];
-        this.showHideColumnsArray = [];
-        this.columnsList = [];
-        this.columnsArray = [];
-        this.headersFiltersIds = [];
-        this.columnsToDisplayWithExpand = [];
-        this.selection = new SelectionModel(false, []);
-        this.hiddenCtrl = new SelectionModel(true, []);
-        this.tableData = [];
-        this.filterValues = {};
-        this.globalFilter = '';
-        this.showHideFilter = '';
-        this.individualFilter = '';
-        this.toggleFilters = false;
-        this.hideRows = false;
-        this.currentRowIndex = -1;
-        this.currentRow = {};
-        this.cellEditing = {};
-        this.menuX = 0;
-        this.menuY = 0;
-        this.dynamicDisplayedColumns = [
-            { filter: false, name: 'select', show: false },
-            { filter: false, name: 'edit', show: false },
-            { filter: false, name: 'popup', show: false },
-            { filter: false, name: 'delete', show: false },
-            { filter: false, name: 'expand', show: false },
-        ];
-        this.inputPropertyKeys = [
-            'dataSource',
-            'columns',
-            'inlineRowEditing',
-            'popupRowEditing',
-            'enableDelete',
-            'rowSelection',
-            'multiRowSelection',
-            'stickyHeader',
-            'stickyFooter',
-            'columnFilter',
-            'globalSearch',
-            'expandRows',
-            'sorting',
-        ];
-        /**
-         * @description This mapping is used to set and update changesin the table.
-         */
-        this.setPropertiesMap = {
-            dataSource: (value) => this.setTableDataSource(value),
-            columns: (value) => this.setColumnsData(value.currentValue),
-            inlineRowEditing: (value) => this.showHideColumn('edit', value.currentValue),
-            popupRowEditing: (value) => this.showHideColumn('popup', value.currentValue),
-            enableDelete: (value) => this.showHideColumn('delete', value.currentValue),
-            rowSelection: (value) => this.setRowSelection(value.currentValue),
-            multiRowSelection: (value) => {
-                this.selection = new SelectionModel(value.currentValue, []);
-            },
-            stickyHeader: (value) => {
-                this.stickyHeader = value.currentValue;
-            },
-            stickyFooter: (value) => {
-                this.stickyFooter = value.currentValue;
-            },
-            columnFilter: (value) => this.setColumnFilter(value.currentValue),
-            globalSearch: (value) => (this.dataSource.filterPredicate = this.createFilter()),
-            expandRows: (value) => {
-                this.loadingIndicator = true;
-                this.dataSource = new MatTableDataSource(this.tableData);
-                if (value.currentValue == true) {
-                    if (!this.displayedColumns.includes('expand')) {
-                        this.displayedColumns.push('expand');
-                        this.columnsToDisplayWithExpand = [...this.displayedColumns];
-                    }
-                }
-                else {
-                    this.columnsToDisplayWithExpand = [...this.displayedColumns];
-                    if (this.displayedColumns.includes('expand')) {
-                        let index = this.displayedColumns.indexOf('expand');
-                        this.displayedColumns.splice(index, 1);
-                    }
-                    this.expandedElement = null;
-                }
-                setTimeout(() => {
-                    this.loadingIndicator = false;
-                }, 200);
-            },
-            sorting: (value) => (this.dataSource.sort = this.sort),
-        };
-        /**
-         * @description This method will take data from inline editing template and update in table data source.
-         * @param row updated row from inline editing template.
-         */
-        this.updateInlineTemplateData = (row) => {
-            this.service.selectedRow.next(row);
-        };
-        this.addIconsToRegistry();
-        if (this.dataSource) {
-            this.tableData = this.dataSource.data;
-        }
-    }
-    /**
-     *
-     * @param changes changes captured each time user changes property value.
-     */
-    ngOnChanges(changes) {
-        this.setPropertyValue(changes);
-    }
-    ngOnInit() {
-        if (this.dataSource) {
-            this.dataSource.filterPredicate = this.createFilter();
-        }
-    }
-    ngAfterViewInit() {
-        if (this.dataSource) {
-            this.dataSource.paginator = this.paginator;
-            this.dataSource.sort = this.sort;
-        }
-    }
-    /**
-     * @description checks and updates the the column's hide and show properties.
-     */
-    setColumnHideShow() {
-        if (this.hideShowMenuGroup !== undefined &&
-            this.hideShowMenuGroup !== null) {
-            this.updateColumnsHideShow(this.hideShowMenuGroup.value);
-        }
-    }
-    /**
-     * @description set the properties of the table.
-     * @param changes changes captured each time user changes property value.
-     */
-    setPropertyValue(changes) {
-        let keys = Object.keys(changes);
-        keys.forEach((property) => {
-            if (this.inputPropertyKeys.includes(property)) {
-                this.setPropertiesMap[property](changes[property]);
-            }
-            else if (property == 'showToolbar') {
-                if (changes['columns']) {
-                    this.setToolbarMenuControls(changes['columns'].currentValue);
-                }
-                else {
-                    this.setToolbarMenuControls(this.columnsArray);
-                }
-            }
-        });
-    }
-    /**
-     * @description used set data source for table.
-     * @param value data source value from user.
-     */
-    setTableDataSource(value) {
-        if (value.currentValue) {
-            this.tableData = value.currentValue.data;
-            this.dataSource = value.currentValue;
-            this.reCal();
-        }
-        else {
-            this.dataSource = new MatTableDataSource([{}]);
-        }
-    }
-    /**
-     * @description used create seletion model and set selection column visibility.
-     * @param value boolean value to show or hide selection Column from table.
-     */
-    setRowSelection(value) {
-        this.selection = new SelectionModel(true, []);
-        this.updateSelectionColumnVisibility(value);
-    }
-    /**
-     * @description create filter header row and assigns filter predicate to table data source.
-     * @param value boolean value to change  visibility of column filter row.
-     */
-    setColumnFilter(value) {
-        if (value) {
-            let array = [];
-            this.columnsArray.forEach((column, i) => {
-                if (this.dynamicDisplayedColumns.filter((a) => a.name == column?.field)[0]
-                    .show) {
-                    array.push(column?.field + '_' + i);
-                }
-            });
-            this.headersFiltersIds = array;
-            this.dataSource.filterPredicate = this.createFilter();
-        }
-        else {
-            this.headersFiltersIds = [];
-            this.dataSource.filter = '';
-        }
-        this.toggleFilters = value;
-    }
-    /**
-     * @description This method returns the list of visible column names.
-     * @returns list of visible column names.
-     */
-    getDisplayedColumns() {
-        let list = this.dynamicDisplayedColumns
-            .filter((cd) => cd.show)
-            .map((cd) => cd.name);
-        return list;
-    }
-    /**
-     * @param menuType type of menu to open from toolbar.
-     * @param event mouse event to open menu on that location.
-     */
-    openMenu(menuType, event) {
-        this.menuX = event.clientX;
-        this.menuY = event.clientY;
-        switch (menuType) {
-            case 'export': {
-                this.exportMenuCtrl = true;
-                this.menuTrigger.openMenu();
-                break;
-            }
-            case 'hideShow': {
-                this.hideShowMenuCtrl = true;
-                this.openHideShowMenu(this.columnsArray);
-                break;
-            }
-            case 'columnPin': {
-                this.columnPinMenuCtrl = true;
-                this.openHideShowMenu(this.columnsArray);
-                break;
-            }
-        }
-    }
-    /**
-     * @description triggers when menu is closed and reset the required controls.
-     */
-    menuClosed() {
-        this.exportMenuCtrl = false;
-    }
-    /**
-     * @description set list of columns to display in table.
-     * @param columns columns array from user input.
-     */
-    setColumnsData(columns) {
-        if (columns.length) {
-            this.columnsArray = [...columns];
-            this.setColumnsList(columns);
-        }
-    }
-    /**
-     * @description set list of columns to display in table.
-     * @param columns columns array from user input with configurations.
-     */
-    setColumnsList(columns) {
-        this.columnsList = [];
-        this.displayedColumns = ['select', 'edit', 'popup', 'delete'];
-        let columnsArray = [];
-        columns.forEach((col) => {
-            if (typeof col?.header == 'string') {
-                this.columnsList.push(col?.header);
-                this.displayedColumns.push(col?.field);
-                columnsArray.push({ filter: true, name: col?.field, show: !col.hide });
-            }
-        });
-        this.dynamicDisplayedColumns = [
-            { filter: false, name: 'select', show: false },
-            { filter: false, name: 'edit', show: false },
-            { filter: false, name: 'popup', show: false },
-            { filter: false, name: 'delete', show: false },
-        ];
-        this.dynamicDisplayedColumns = columnsArray.concat(this.dynamicDisplayedColumns);
-    }
-    /**
-     * @description Take boolean value and name column and update its visibility status in table.
-     * @param name name of the column to set visibility.
-     * @param value boolean value to set visibility of the column.
-     */
-    showHideColumn(name, value) {
-        this.dynamicDisplayedColumns.filter((a) => a.name == name)[0].show = value;
-        if (this.columnFilter) {
-            this.setColumnFilter(true);
-        }
-    }
-    /**
-     * @description This method will position the selection column to first and also update its visibility.
-     * @param value value used to set visibility of the selection column.
-     */
-    updateSelectionColumnVisibility(value) {
-        let columnName = 'select';
-        let column = this.dynamicDisplayedColumns.filter((a) => a.name == columnName)[0];
-        let index = this.dynamicDisplayedColumns.findIndex((column) => column.name == columnName);
-        if (index > -1) {
-            this.dynamicDisplayedColumns.splice(index, 1);
-            this.dynamicDisplayedColumns.unshift(column);
-            this.dynamicDisplayedColumns.filter((column) => column.name == columnName)[0].show = value;
-        }
-    }
-    /**
-     * @description This method is used to update the position of  column in columns array according to its dropped position.
-     * @param event CdkDragDrop used to update column position in columns array.
-     */
-    onDrop(event) {
-        if (this.dndColumns) {
-            let adjustedValue = 0;
-            if (this.dynamicDisplayedColumns[0].name == 'select' &&
-                this.dynamicDisplayedColumns[0].show == false) {
-                adjustedValue = 1;
-            }
-            moveItemInArray(this.dynamicDisplayedColumns, event.previousIndex + adjustedValue, event.currentIndex + adjustedValue);
-        }
-    }
-    /**
-     * @description This method create filter predicate function which will set search value to table filters
-     * for both global and individual colum filtering.
-     * @returns returns boolean value to filter rows in table.
-     */
-    createFilter() {
-        const tableFilterPredicate = (data, filter) => {
-            let result = true;
-            // search all column fields
-            if (this.globalFilter) {
-                let expression = '';
-                let keys = Object.keys(data);
-                keys.forEach((key) => {
-                    expression =
-                        expression +
-                            `data.${key}.toString().trim().toLowerCase().indexOf(this.globalFilter.toLowerCase()) !== -1 ||`;
-                });
-                if (expression.charAt(expression.length - 2) +
-                    expression.charAt(expression.length - 1) ==
-                    '||') {
-                    expression = expression.substring(0, expression.length - 2);
-                }
-                result = eval(expression);
-            }
-            if (!result) {
-                return false;
-            }
-            let searchString = JSON.parse(filter);
-            //search single column field
-            if (this.individualFilter) {
-                return (data[this.individualFilter]
-                    .toString()
-                    .trim()
-                    .toLowerCase()
-                    .indexOf(searchString[this.individualFilter].toString().toLowerCase()) !== -1);
-            }
-            return true;
-        };
-        return tableFilterPredicate;
-    }
-    /**
-     * @description assigns the search value to mat table data source to apply the filter.
-     * @param searchValue value to be searched from table rows.
-     */
-    applyGlobalFilter(searchValue) {
-        this.globalFilter = searchValue;
-        let columns = {};
-        this.columnsArray.forEach((column) => {
-            if (column.field)
-                columns[column.field] = searchValue;
-        });
-        this.dataSource.filter = JSON.stringify(columns);
-    }
-    /**
-     * @description This method is used to apply column based filtering
-     * @param searchValue value to be searched from table rows.
-     * @param column filter will be applied based on this column field.
-     */
-    applyColumnFilter(searchValue, column) {
-        this.individualFilter = column.field;
-        this.filterValues[column.field] = searchValue[column.field];
-        this.dataSource.filter = JSON.stringify(this.filterValues);
-    }
-    /**
-     * @description This method will take row and its index enable inline editing tools on that row.
-     * @param row row on which user wants to do edit.
-     * @param index index of the row where inline editing will be enabled.
-     */
-    enableInlineEditing(row, index) {
-        const rowData = {};
-        rowData['e' + index] = { ...row };
-        this.rowDataTemp = rowData;
-        setTimeout(() => {
-            this.tableData[index]['editable'] = !this.tableData[index]['editable'];
-        }, 0);
-    }
-    /**
-     * @description This method will create and return data to inline editing template.
-     * @param row row on which user wants to do edit.
-     * @param index index of the row where inline editing will be enabled.
-     * @param column current column of the table.
-     */
-    getInlineEditingData(row, index, column) {
-        this.inlineEditingTemplateRefData = {
-            row: { ...row },
-            column: { ...column },
-            index: index,
-            updateFunc: this.updateInlineTemplateData,
-        };
-        return this.inlineEditingTemplateRefData;
-    }
-    /**
-     * @description This method set data for in-cell editing.
-     * @param row row on which user wants to do edit.
-     * @param index index of the row where inline editing will be enabled.
-     */
-    setCellData(row, index) {
-        this.currentRow = { ...row };
-        this.currentRowIndex = index;
-        this.rowDataTemp['e' + index] = { ...row };
-    }
-    /**
-     * @description This will restore the data and cencel the inline editing.
-     * @param row row on which user wants to do edit.
-     * @param index index of the row where inline editing will be enabled.
-     */
-    cancelInlineEditing(row, index) {
-        this.tableData.filter((a, i) => i == index)[0]['editable'] =
-            !this.tableData.filter((a, i) => i == index)[0]['editable'];
-        this.dataSource = new MatTableDataSource(this.tableData);
-        this.rowDataTemp['e' + index] = {};
-        this.service.selectedRow.next(undefined);
-    }
-    /**
-     * @description This method will save and update the inline editing data and emit the update row and index.
-     * @param row row on which user wants to do edit.
-     * @param index index of the row where inline editing will be enabled.
-     */
-    saveInlineEditing(row, index) {
-        if (!this.inlineEditingTemplateRef) {
-            this.tableData[index] = { ...this.rowDataTemp['e' + index] };
-            row = { ...this.rowDataTemp['e' + index] };
-        }
-        else {
-            let changedData = this.service.selectedRow.value;
-            if (changedData) {
-                this.tableData[index] = { ...changedData };
-            }
-        }
-        this.dataSource = new MatTableDataSource(this.tableData);
-        this.rowDataTemp['e' + index] = {};
-        let data = {
-            row: row,
-            index: index,
-        };
-        this.inlineChange.emit(data);
-        this.tableData[index]['editable'] = false;
-    }
-    /**
-     * @description This method will save and update the cell editing data and emit the update row and index.
-     */
-    saveCellEditing() {
-        this.cellEditing = {};
-        let index = this.currentRowIndex;
-        if (index > -1) {
-            if (this.cellEditingTemplateRef) {
-                let changedData = this.service.selectedRow.value;
-                if (changedData) {
-                    this.tableData[index] = { ...changedData };
-                }
-            }
-            else {
-                this.tableData[index] = { ...this.rowDataTemp['e' + index] };
-            }
-            this.dataSource = new MatTableDataSource(this.tableData);
-            this.rowDataTemp['e' + index] = {};
-            let data = {
-                row: { ...this.tableData[index] },
-                index: index,
-            };
-            this.currentRowIndex = -1;
-            this.cellChange.emit(data);
-        }
-    }
-    /**
-     * @description This method will delete the row from the given index and emit the deleted row and index.
-     * @param row row to be deleted.
-     * @param index index of the row to be deleted.
-     */
-    deleteRow(row, index) {
-        this.tableData.splice(index, 1);
-        this.dataSource = new MatTableDataSource(this.tableData);
-        this.dataSource.paginator = this.paginator;
-        this.dataSource.sort = this.sort;
-        this.rowDeleted.emit({ removedRow: row, fromIndex: index });
-    }
-    /**
-     * @description This method will expand or collapse the row and emit expand event.
-     * @param row row to be expanded or collapsed.
-     * @param expand value used to expand or collapse the row.
-     * @param index index of the row.
-     */
-    expandRow(row, expand, index) {
-        if (this.expandRows) {
-            this.expansionChange.emit({ data: row, expanded: expand, index: index });
-            this.expandedElement = this.expandedElement === row ? null : row;
-        }
-    }
-    /**
-     * @description This method is used to set data for popup component and open editing dialog.
-     * @param row row which used want to edit.
-     */
-    openEditingDialog(row) {
-        const dialogConfig = new MatDialogConfig();
-        dialogConfig.disableClose = true;
-        dialogConfig.width = '40%';
-        dialogConfig.height = '70%';
-        dialogConfig.maxWidth = '100%';
-        let rowData = { ...row };
-        dialogConfig.data = {
-            row: rowData,
-            columns: [...this.columnsArray],
-            templateRef: this.popupEditingTemplateRef,
-        };
-        this.dialog
-            .open(EditingComponent, dialogConfig)
-            .afterClosed()
-            .subscribe((data) => {
-            let index = this.tableData.indexOf(row);
-            if (data && index > -1) {
-                this.tableData[index] = data;
-                this.dataSource = new MatTableDataSource(this.tableData);
-                let dataChange = {
-                    row: data,
-                    index: index,
-                };
-                this.popupChange.emit(dataChange);
-            }
-        });
-    }
-    /**
-     * @description used to check whether all rows are selected.
-     */
-    isAllSelected() {
-        const numSelected = this.selection.selected.length;
-        const numRows = this.dataSource.data.length;
-        return numSelected === numRows;
-    }
-    /**
-     * @description this method is used to toggle the all and no rows selection.
-     */
-    toggleAllRows() {
-        if (this.isAllSelected()) {
-            this.selection.clear();
-            return;
-        }
-        this.selection.select(...this.dataSource.data);
-    }
-    /**
-     * @description This method is used return aria-label for selection column checkboxs.
-     * @param row row from table.
-     * @returns labels for selection column checkboxs.
-     */
-    checkboxLabel(row) {
-        if (!row) {
-            return `${this.isAllSelected() ? 'deselect' : 'select'} all`;
-        }
-        return `${this.selection.isSelected(row) ? 'deselect' : 'select'} row ${row.position + 1}`;
-    }
-    /**
-     * @description create form control for columns for hiding and and pinning purpose
-     * @param columns list of columns to be displayed
-     */
-    setToolbarMenuControls(columns) {
-        if (columns.length > 0 && this.showToolbar) {
-            const group = this.formBuildersService.group({});
-            columns.forEach((column) => {
-                const control = this.formBuildersService.control(true);
-                group.addControl(column.field, control);
-            });
-            this.hideShowMenuGroup = group;
-        }
-    }
-    /**
-     * @param column current column
-     * @param event mouse event used to set the menu position
-     */
-    openPinnablePropertyMenu(column, event) {
-        this.menuX = event.clientX;
-        this.menuY = event.clientY;
-        let options = [
-            {
-                label: 'Pin Left',
-                value: 'left',
-                selected: false,
-                field: column.field,
-            },
-            {
-                label: 'Pin Right',
-                value: 'right',
-                selected: false,
-                field: column.field,
-            },
-            { label: 'No Pin', value: null, selected: false, field: column.field },
-        ];
-        if (column.pinned && column.pinned !== null) {
-            options.forEach((opt) => {
-                if (opt.value === column.pinned) {
-                    opt.selected = true;
-                }
-            });
-        }
-        else if (column.pinned == null || column.pinned == 'null') {
-            options[2].selected = true;
-        }
-        this.columnPinningOptions = options;
-        this.columnMenuTrigger.openMenu();
-    }
-    /**
-     * @description This method is used to reset menu checks when required.
-     */
-    resetMenuChecks() {
-        this.hideShowMenuCtrl = false;
-        this.showHideColumnsArray = [];
-        this.columnPinMenuCtrl = false;
-        this.columnPinningOptions = [];
-    }
-    /**
-     * @description This method is used to filter columns for menus like pinning or hide show menu.
-     * @param value search value to filter colunms
-     */
-    filterColumns(value) {
-        if (value !== '') {
-            this.showHideColumnsArray = this.columnsArray.filter((col) => {
-                return col.header.toLowerCase().includes(value.toLowerCase());
-            });
-        }
-        else {
-            this.showHideColumnsArray = this.columnsArray;
-        }
-    }
-    /**
-     * @description This method is used to open hide show column menu.
-     * @param columns columns array to display in hide show menu.
-     */
-    openHideShowMenu(columns) {
-        this.showHideColumnsArray = [...columns];
-        this.columnMenuTrigger.openMenu();
-    }
-    /**
-     * @param values columns
-     */
-    updateColumnsHideShow(values) {
-        let keys = Object.keys(values);
-        keys.forEach((key) => {
-            this.showHideColumn(key, values[key]);
-        });
-    }
-    /**
-     * @description This method is called when the table rows are scrolled.
-     * @param event scroll event
-     */
-    onScroll(event) {
-        this.scroll.emit(event);
-    }
-    /**
-     * @param row row to be toggled
-     * @param index index of toggled row
-     */
-    setSelectedRows(row, index) {
-        this.selection.toggle(row);
-        if (this.selection.isSelected(row)) {
-            this.selectionChanged.emit({ row: row, index: index, isSelected: true });
-        }
-        else {
-            this.selectionChanged.emit({ row: row, index: index, isSelected: false });
-        }
-    }
-    /**
-     * @description This method is used to display all hidden rows.
-     */
-    showHiddenRows() {
-        this.hideRows = false;
-        this.selection.clear();
-        this.hiddenCtrl.clear();
-    }
-    /**
-     * @description This method is used to hide all selected rows.
-     */
-    hideSelectedRows() {
-        if (!this.selection.isEmpty()) {
-            let values = [...this.selection.selected];
-            values.forEach((value) => {
-                if (!this.hiddenCtrl.isSelected(value)) {
-                    this.hiddenCtrl.toggle(value);
-                }
-            });
-            this.selection.clear();
-            this.hideRows = true;
-        }
-    }
-    /**
-     * @description This method is used to recalculate the required values for table.
-     */
-    reCal() {
-        if (this.showPaginator) {
-            this.dataSource.paginator = this.paginator;
-        }
-        if (this.sorting) {
-            this.dataSource.sort = this.sort;
-        }
-        if (this.columnFilter) {
-            this.dataSource.filterPredicate = this.createFilter();
-        }
-    }
-    /**
-     * @description This method is called in constructor method to add SVGs into icon registration.
-     */
-    addIconsToRegistry() {
-        let y = this.domSanitizer.bypassSecurityTrustResourceUrl(`assets/pinRight.svg`);
-        let iconNames = ['pinLeft', 'pinRight', 'pinNone', 'pinned', 'pinIcon'];
-        iconNames.forEach((icon) => {
-            this.matIconRegistry.addSvgIcon(icon, this.domSanitizer.bypassSecurityTrustResourceUrl(`assets/${icon}.svg`));
-        });
-    }
-    /**
-     * @description This method is used to export table data.
-     * @param type type of file to be exported.
-     */
-    exportTable(type) {
-        var element = document.getElementById('matTableExt' + this.tableID);
-        var ws = XLSX.utils.table_to_sheet(element);
-        ws = this.writeSheetData(ws);
-        const wb = XLSX.utils.book_new();
-        XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
-        XLSX.writeFile(wb, `tablesheets.${type}`);
-    }
-    /**
-     * @description This method is used to split name of filter row header to get index.
-     * @param value value to be splited for index.
-     * @returns Will return index of column from value.
-     */
-    returnIndex(value) {
-        return Number(value.split('_')[1]);
-    }
-    /**
-     * @description This method is used to manage column filtering, expanded data for exporting.
-     * @param ws work sheet
-     * @returns custom generated worksheet to be used in export.
-     */
-    writeSheetData(ws) {
-        let displayedColumns = this.getDisplayedColumns();
-        var nMerges = this.getMergeIndex(ws['!merges'] || []);
-        var merges = ws['!merges'] || [];
-        let data = {
-            '!cols': [],
-            '!rows': [],
-            '!merges': nMerges,
-        };
-        var range = XLSX.utils.decode_range(ws['!ref'] || '');
-        let extracolumns = ['popup', 'delete', 'select', 'edit'];
-        let keys = Object.keys(ws);
-        let nKey = 'A';
-        keys.forEach((key, i) => {
-            if (ws[key]?.v && typeof ws[key]?.v === 'string') {
-                if (!extracolumns.includes(ws[key].v.toLowerCase()) &&
-                    displayedColumns.includes(ws[key].v.toLowerCase())) {
-                    let lastRowIndex = range?.e?.r;
-                    data[key] = ws[key];
-                    let chr = key.charAt(0);
-                    for (let j = 2; j <= lastRowIndex; j++) {
-                        if (ws[chr + (j + 1)] !== undefined &&
-                            (typeof ws[chr + (j + 1)].v === 'string' ||
-                                typeof ws[chr + (j + 1)].v === 'number')) {
-                            data[nKey + j] = ws[chr + (j + 1)];
-                        }
-                    }
-                    nKey = String.fromCharCode(nKey.charCodeAt(0) + 1);
-                }
-            }
-        });
-        if (this.rowSelection) {
-            let chr = 'A';
-            for (let i = 1; i < range.e.c + 1; i++) {
-                data[chr + 1] = data[String.fromCharCode(chr.charCodeAt(0) + 1) + 1];
-                chr = String.fromCharCode(chr.charCodeAt(0) + 1);
-                if (i == range.e.c) {
-                    data[chr + 1] = undefined;
-                }
-            }
-        }
-        if (this.rowSelection && this.expandRows) {
-            merges.forEach((merge) => {
-                data['A' + merge.s.r] = ws['A' + (merge.s.r + 1)];
-            });
-        }
-        range.e.r--;
-        let nRef = XLSX.utils.encode_range(range);
-        data['!ref'] = nRef;
-        data['!fullref'] = nRef;
-        return data;
-    }
-    getMergeIndex(merges) {
-        var arr = [];
-        merges.forEach((element) => {
-            arr.push({
-                e: {
-                    r: element.e.r == 0 ? element.e.r : element.e.r - 1,
-                    c: element.e.c,
-                },
-                s: {
-                    r: element.s.r == 0 ? element.s.r : element.s.r - 1,
-                    c: element.s.c,
-                },
-            });
-        });
-        return arr;
-    }
-}
-MatTableExtComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: MatTableExtComponent, deps: [{ token: i1$1.MatDialog }, { token: MatTableExtService }, { token: i3$1.FormBuilder }, { token: i4$1.DomSanitizer }, { token: i5$1.MatIconRegistry }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-MatTableExtComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: MatTableExtComponent, selector: "mat-table-ext", inputs: { dataSource: "dataSource", columns: "columns", columnResizable: "columnResizable", stripedRows: "stripedRows", rowHover: "rowHover", inlineRowEditing: "inlineRowEditing", inCellEditing: "inCellEditing", popupRowEditing: "popupRowEditing", enableDelete: "enableDelete", rowSelection: "rowSelection", multiRowSelection: "multiRowSelection", stickyFooter: "stickyFooter", stickyHeader: "stickyHeader", showFooterRow: "showFooterRow", columnFilter: "columnFilter", loadingIndicator: "loadingIndicator", sorting: "sorting", showToolbar: "showToolbar", toolbarTitle: "toolbarTitle", tableHeight: "tableHeight", toolbarHeight: "toolbarHeight", tableWidth: "tableWidth", scrollbarH: "scrollbarH", toolbarTemplate: "toolbarTemplate", columnHidable: "columnHidable", columnPinnable: "columnPinnable", globalSearch: "globalSearch", expandRows: "expandRows", dndColumns: "dndColumns", showPaginator: "showPaginator", showFirstLastButtons: "showFirstLastButtons", exportButtonEnable: "exportButtonEnable", pageSizeOptions: "pageSizeOptions", toolbarTemplateRef: "toolbarTemplateRef", headerTemplateRef: "headerTemplateRef", cellTemplateRef: "cellTemplateRef", expansionTemplateRef: "expansionTemplateRef", popupEditingTemplateRef: "popupEditingTemplateRef", inlineEditingTemplateRef: "inlineEditingTemplateRef", cellEditingTemplateRef: "cellEditingTemplateRef", cellTemplateRefMap: "cellTemplateRefMap" }, outputs: { inlineChange: "inlineChange", cellChange: "cellChange", popupChange: "popupChange", rowDeleted: "rowDeleted", scroll: "scroll", selectionChanged: "selectionChanged", expansionChange: "expansionChange" }, viewQueries: [{ propertyName: "menuTrigger", first: true, predicate: MatMenuTrigger, descendants: true }, { propertyName: "columnMenuTrigger", first: true, predicate: ["columnMenuTrigger"], descendants: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [style.width]=\"tableWidth\">\r\n    <mat-form-field class=\"global-search-field\" appearance=\"fill\" *ngIf=\"globalSearch\">\r\n        <mat-label>Search</mat-label>\r\n        <input matInput [ngModel]=\"globalFilter\" (ngModelChange)=\"applyGlobalFilter($event)\" placeholder=\"Ex. Mia\"\r\n            #input>\r\n    </mat-form-field>\r\n    <mat-toolbar class=\"toolbar-container\" *ngIf=\"showToolbar\" [style.height]=\"toolbarHeight?toolbarHeight:'50px'\">\r\n        <span class=\"toolbar-title\" *ngIf=\"toolbarTitle\">{{toolbarTitle}}</span>\r\n        <ng-container *ngIf=\"toolbarTemplateRef\" [ngTemplateOutlet]=\"toolbarTemplateRef\"></ng-container>\r\n        <span class=\"example-spacer\"></span>\r\n        <ng-container *ngIf=\"rowSelection || multiRowSelection\">\r\n            <button class=\"hide-button\" mat-stroked-button color=\"primary\" (click)=\"hideSelectedRows()\">\r\n                Hide Rows\r\n            </button>\r\n            <button class=\"hide-button\" mat-stroked-button color=\"primary\" (click)=\"showHiddenRows()\">\r\n                Show All Rows\r\n            </button>\r\n        </ng-container>\r\n        <button *ngIf=\"columnHidable\" class=\"hide-button\" mat-stroked-button color=\"primary\"\r\n            (click)=\"openMenu('hideShow',$event)\" matTooltip=\"Column Visibility\" matTooltipPosition=\"above\">\r\n            <mat-icon>visibility</mat-icon>\r\n        </button>\r\n        <button *ngIf=\"columnPinnable\" class=\"pin-button\" mat-stroked-button color=\"primary\"\r\n            (click)=\"openMenu('columnPin',$event)\" matTooltip=\"Column Pinning\">\r\n            <mat-icon svgIcon=\"pinIcon\"></mat-icon>\r\n        </button>\r\n        <button *ngIf=\"exportButtonEnable\" class=\"export-button\" mat-stroked-button color=\"primary\"\r\n            (click)=\"openMenu('export',$event)\" matTooltip=\"Table Data Export\">\r\n            <mat-icon>import_export</mat-icon> <span>Export</span>\r\n            <mat-icon>expand_more</mat-icon>\r\n        </button>\r\n        <div style=\"visibility: hidden; position:fixed\" [matMenuTriggerFor]=\"menu\" [style.left.px]=\"menuX\"\r\n            [style.top.px]=\"menuY\"></div>\r\n    </mat-toolbar>\r\n    <mat-menu #menu=\"matMenu\" (closed)=\"menuClosed()\" id=\"exportMenu\">\r\n        <ng-container *ngIf=\"exportMenuCtrl\">\r\n            <mat-option (click)=\"exportTable('xlsx')\">Export to Excel</mat-option>\r\n            <mat-option (click)=\"exportTable('csv')\">Export to CSV</mat-option>\r\n        </ng-container>\r\n    </mat-menu>\r\n    <div style=\"visibility: hidden; position:fixed\" #columnMenuTrigger=\"matMenuTrigger\" [matMenuTriggerFor]=\"columnMenu\"\r\n        [style.left.px]=\"menuX\" [style.top.px]=\"menuY\">\r\n    </div>\r\n    <mat-menu #columnMenu=\"matMenu\" (closed)=\"resetMenuChecks()\">\r\n        <div class=\"toolbar-menu-container\" *ngIf=\"hideShowMenuCtrl\" [formGroup]=\"hideShowMenuGroup\"\r\n            (click)=\"$event.stopPropagation()\">\r\n            <h4 class=\"column-headers\">Visible Columns</h4>\r\n            <mat-form-field appearance=\"fill\" style=\"width: -webkit-fill-available;\">\r\n                <mat-label>Filter Columns</mat-label>\r\n                <input matInput [(ngModel)]=\"showHideFilter\" (ngModelChange)=\"filterColumns($event)\"\r\n                    [ngModelOptions]=\"{standalone: true}\">\r\n            </mat-form-field>\r\n            <div class=\"showHide-menu-columns-list\">\r\n                <div class=\"toolbar-menu-item\" *ngFor=\"let column of showHideColumnsArray\">\r\n                    <mat-checkbox color=\"primary\" class=\"toolbar-menu-checkbox\" style=\"width: max-content;\"\r\n                        [formControlName]=\"column.field\" (change)=\"setColumnHideShow()\">{{column.header}}</mat-checkbox>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"toolbar-menu-container\" *ngIf=\"columnPinMenuCtrl\" (click)=\"$event.stopPropagation()\">\r\n            <h4 class=\"column-headers\">Pin Columns</h4>\r\n            <form class=\"example-form\">\r\n                <mat-form-field appearance=\"fill\" style=\"width: -webkit-fill-available;\">\r\n                    <mat-label>Filter Columns</mat-label>\r\n                    <input matInput [(ngModel)]=\"showHideFilter\" (ngModelChange)=\"filterColumns($event)\"\r\n                        [ngModelOptions]=\"{standalone: true}\">\r\n                </mat-form-field>\r\n            </form>\r\n            <div class=\"showHide-menu-columns-list\">\r\n                <app-column-pinning [columns]=\"showHideColumnsArray\"></app-column-pinning>\r\n            </div>\r\n        </div>\r\n    </mat-menu>\r\n\r\n    <mat-progress-bar *ngIf=\"loadingIndicator\" mode=\"indeterminate\"></mat-progress-bar>\r\n    <section id=\"tableContainer\" class=\"mat-table-ext-container\" (scroll)=\"onScroll($event)\"\r\n        [style.height]=\"tableHeight ? tableHeight :'max-content'\">\r\n        <table mat-table [id]=\"'matTableExt'+tableID\" [dataSource]=\"dataSource\" matSort cdkDropList\r\n            cdkDropListOrientation=\"horizontal\" multiTemplateDataRows (cdkDropListDropped)=\"onDrop($event)\"\r\n            (click)=\"saveCellEditing()\" [style.width]=\"scrollbarH?'max-content':'100%'\">\r\n            <!-- Row selection column -->\r\n            <ng-container matColumnDef=\"select\">\r\n                <th mat-header-cell *matHeaderCellDef cdkDragLockAxis=\"x\" cdkDrag [cdkDragDisabled]=\"!dndColumns\">\r\n                    <mat-checkbox (change)=\"$event ? toggleAllRows() : null\"\r\n                        [checked]=\"selection.hasValue() && isAllSelected()\"\r\n                        [indeterminate]=\"selection.hasValue() && !isAllSelected()\" [aria-label]=\"checkboxLabel()\">\r\n                    </mat-checkbox>\r\n                </th>\r\n                <td mat-cell *matCellDef=\"let row;let i = dataIndex\">\r\n                    <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? setSelectedRows(row,i) : null\"\r\n                        [checked]=\"selection.isSelected(row)\" [aria-label]=\"checkboxLabel(row)\">\r\n                    </mat-checkbox>\r\n                </td>\r\n                <ng-container *ngIf=\"showFooterRow\">\r\n                    <td mat-footer-cell *matFooterCellDef></td>\r\n                </ng-container>\r\n            </ng-container>\r\n            <!--dynamic columns are being generated here-->\r\n            <div matColumnDef=\"{{column['field']}}\" [sticky]=\"column.pinned == 'left' ? true:false\"\r\n                [stickyEnd]=\"column.pinned == 'right' ? true:false\" *ngFor=\"let column of columnsArray; let i = index\">\r\n                <th mat-header-cell *matHeaderCellDef [style.width]=\"column.width\" [style.maxWidth]=\"column.maxWidth\"\r\n                    [style.minWidth]=\"column.minWidth\" cdkDragLockAxis=\"x\" cdkDrag [cdkDragDisabled]=\"!dndColumns\"\r\n                    [columnsResizable]=\"columnResizable\" [index]=\"i\">\r\n\r\n                    <ng-template *ngIf=\"column.headerTemplate || headerTemplateRef\"\r\n                        [ngTemplateOutlet]=\"column.headerTemplate || headerTemplateRef\"\r\n                        [ngTemplateOutletContext]=\"{data:column}\"></ng-template>\r\n                    <span *ngIf=\"!headerTemplateRef && !column.headerTemplate\"\r\n                        matTooltip=\"{{column.headerTooltip?.value}}\"\r\n                        [matTooltipPosition]=\"column?.headerTooltip?.tooltipPosition!\" mat-sort-header\r\n                        [disabled]=\"!sorting || column.disabled === true\">{{column.header}}</span>\r\n                </th>\r\n                <td mat-cell *matCellDef=\"let row ;let i=dataIndex\">\r\n                    <div *ngIf=\"!row.editable && !cellEditing[i +'_'+column.field]\"\r\n                        (dblclick)=\"cellEditing[i +'_'+column.field] = inCellEditing;setCellData(row,i)\"\r\n                        matTooltip=\"{{column.cellTooltip?.value}}\"\r\n                        [matTooltipPosition]=\"column?.cellTooltip?.tooltipPosition!\">\r\n                        <span\r\n                            *ngIf=\"!cellTemplateRef && !column?.cellTemplate && !cellTemplateRefMap[column.field]\">{{row[column.field]}}</span>\r\n                        <ng-container *ngIf=\"cellTemplateRefMap[column.field]\"\r\n                            [ngTemplateOutlet]=\"cellTemplateRefMap[column.field]\"\r\n                            [ngTemplateOutletContext]=\"{row:row,column:column,index:i}\">\r\n                        </ng-container>\r\n                        <ng-container\r\n                            *ngIf=\"cellTemplateRef && column.cellTemplate && !cellTemplateRefMap[column.field]\"\r\n                            [ngTemplateOutlet]=\"column.cellTemplate\"\r\n                            [ngTemplateOutletContext]=\"{row:row,column:column,index:i}\">\r\n                        </ng-container>\r\n                        <ng-container\r\n                            *ngIf=\"!cellTemplateRef && column.cellTemplate && !cellTemplateRefMap[column.field]\"\r\n                            [ngTemplateOutlet]=\"column.cellTemplate\"\r\n                            [ngTemplateOutletContext]=\"{row:row,column:column,index:i}\">\r\n                        </ng-container>\r\n                        <ng-container\r\n                            *ngIf=\"cellTemplateRef && !column.cellTemplate && !cellTemplateRefMap[column.field]\"\r\n                            [ngTemplateOutlet]=\"cellTemplateRef\"\r\n                            [ngTemplateOutletContext]=\"{row:row,column:column,index:i}\">\r\n                        </ng-container>\r\n                    </div>\r\n                    <div *ngIf=\"row.editable || cellEditing[i +'_'+column.field]\" (click)=\"$event.stopPropagation()\">\r\n                        <ng-container *ngIf=\"inlineEditingTemplateRef && !cellEditing[i +'_'+column.field]\"\r\n                            [ngTemplateOutlet]=\"inlineEditingTemplateRef\"\r\n                            [ngTemplateOutletContext]=\"{data:getInlineEditingData(row,i,column)}\"></ng-container>\r\n                        <ng-container *ngIf=\"cellEditingTemplateRef && !(row.editable)\"\r\n                            [ngTemplateOutlet]=\"cellEditingTemplateRef\"\r\n                            [ngTemplateOutletContext]=\"{data:getInlineEditingData(row,i,column)}\"></ng-container>\r\n                        <ng-container *ngIf=\"!inlineEditingTemplateRef && (row.editable) && rowDataTemp['e'+i]\">\r\n                            <mat-form-field *ngIf=\"column.type == 'number'\" appearance=\"outline\"\r\n                                class=\"inline-editing-field\">\r\n                                <input matInput type=\"number\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\r\n                                    [ngModelOptions]=\"{standalone: true}\">\r\n                            </mat-form-field>\r\n                            <mat-form-field style=\"width: 100%;\" *ngIf=\"column.type == 'string'\" appearance=\"outline\"\r\n                                class=\"inline-editing-field\">\r\n                                <input matInput type=\"text\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\r\n                                    [ngModelOptions]=\"{standalone: true}\">\r\n                            </mat-form-field>\r\n                            <mat-form-field *ngIf=\"column.type == 'date'\" appearance=\"outline\"\r\n                                class=\"inline-editing-field\">\r\n                                <input matInput type=\"date\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\r\n                                    [ngModelOptions]=\"{standalone: true}\">\r\n                            </mat-form-field>\r\n                            <mat-form-field *ngIf=\"column.type == 'selection'\" appearance=\"outline\"\r\n                                class=\"inline-editing-field\">\r\n                                <mat-select [value]=\"rowDataTemp['e'+i][column.field]\"\r\n                                    [(ngModel)]=\"rowDataTemp['e'+i][column.field]\">\r\n                                    <mat-option *ngFor=\"let option of column.options\" [value]=\"option\">\r\n                                        {{option}}\r\n                                    </mat-option>\r\n                                </mat-select>\r\n                            </mat-form-field>\r\n                            <mat-checkbox (click)=\"$event.stopPropagation()\" *ngIf=\"column.type == 'boolean'\"\r\n                                color=\"primary\" [(ngModel)]=\"row[column.field]\"></mat-checkbox>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"!cellEditingTemplateRef && cellEditing[i +'_'+column.field]\">\r\n                            <mat-form-field *ngIf=\"column.type == 'number'\" appearance=\"outline\"\r\n                                class=\"inline-editing-field\">\r\n                                <input matInput type=\"number\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\r\n                                    [ngModelOptions]=\"{standalone: true}\">\r\n                            </mat-form-field>\r\n                            <mat-form-field *ngIf=\"column.type == 'string'\" appearance=\"outline\"\r\n                                class=\"inline-editing-field\">\r\n                                <input matInput type=\"text\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\r\n                                    [ngModelOptions]=\"{standalone: true}\">\r\n                            </mat-form-field>\r\n                            <mat-form-field *ngIf=\"column.type == 'date'\" appearance=\"outline\"\r\n                                class=\"inline-editing-field\">\r\n                                <input matInput type=\"date\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\r\n                                    [ngModelOptions]=\"{standalone: true}\">\r\n                            </mat-form-field>\r\n                            <mat-form-field *ngIf=\"column.type == 'selection'\" appearance=\"outline\"\r\n                                class=\"inline-editing-field\">\r\n                                <mat-select [value]=\"rowDataTemp['e'+i][column.field]\"\r\n                                    [(ngModel)]=\"rowDataTemp['e'+i][column.field]\">\r\n                                    <mat-option *ngFor=\"let option of column.options\" [value]=\"option\">\r\n                                        {{option}}\r\n                                    </mat-option>\r\n                                </mat-select>\r\n                            </mat-form-field>\r\n                            <mat-checkbox (click)=\"$event.stopPropagation()\" *ngIf=\"column.type == 'boolean'\"\r\n                                color=\"primary\" [(ngModel)]=\"row[column.field]\"></mat-checkbox>\r\n                        </ng-container>\r\n                    </div>\r\n                </td>\r\n                <ng-container *ngIf=\"showFooterRow\">\r\n                    <td mat-footer-cell *matFooterCellDef> {{column.footerText}} </td>\r\n                </ng-container>\r\n            </div>\r\n            <ng-container matColumnDef=\"edit\" stickyEnd=\"false\">\r\n                <th mat-header-cell cdkDragLockAxis=\"x\" cdkDrag [cdkDragDisabled]=\"true\" *matHeaderCellDef\r\n                    class=\"action-column-cells\"> Edit </th>\r\n                <td mat-cell *matCellDef=\"let row; let i = dataIndex\" class=\"inline-edit-column-cell\">\r\n                    <mat-icon class=\"edit-column-icons\" *ngIf=\"!row.editable && !row.editmodal\" aria-hidden=\"false\"\r\n                        (click)=\"enableInlineEditing(row,i)\" fontIcon=\"edit_note\">\r\n                    </mat-icon>\r\n                    <div class=\"inline-editing-controls\" *ngIf=\"row.editable && !row.editmodal\">\r\n                        <mat-icon class=\"edit-column-icons\" aria-hidden=\"false\" (click)=\"saveInlineEditing(row,i)\"\r\n                            fontIcon=\"done\"></mat-icon>\r\n                        <mat-icon class=\"edit-column-icons\" aria-hidden=\"false\" (click)=\"cancelInlineEditing(row,i)\"\r\n                            fontIcon=\"close\"></mat-icon>\r\n                    </div>\r\n                </td>\r\n                <td mat-footer-cell *matFooterCellDef> edit </td>\r\n            </ng-container>\r\n            <ng-container matColumnDef=\"popup\" stickyEnd=\"false\">\r\n                <th mat-header-cell cdkDragLockAxis=\"x\" cdkDrag [cdkDragDisabled]=\"true\" *matHeaderCellDef\r\n                    class=\"action-column-cells\"> Popup\r\n                </th>\r\n                <td mat-cell *matCellDef=\"let row; let i = index\">\r\n                    <mat-icon aria-hidden=\"false\" (click)=\"openEditingDialog(row)\" fontIcon=\"edit\">\r\n                    </mat-icon>\r\n                </td>\r\n                <td mat-footer-cell *matFooterCellDef></td>\r\n            </ng-container>\r\n\r\n            <ng-container matColumnDef=\"delete\">\r\n                <th mat-header-cell cdkDragLockAxis=\"x\" cdkDrag [cdkDragDisabled]=\"true\" *matHeaderCellDef\r\n                    class=\"action-column-cells\"> Delete\r\n                </th>\r\n                <td mat-cell *matCellDef=\"let row;let i=dataIndex\">\r\n                    <mat-icon (click)=\"deleteRow(row,i)\" aria-hidden=\"false\" aria-label=\"Example home icon\"\r\n                        fontIcon=\"delete\">\r\n                    </mat-icon>\r\n                </td>\r\n                <td mat-footer-cell *matFooterCellDef></td>\r\n            </ng-container>\r\n            <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\r\n            <ng-container *ngIf=\"expandRows\" matColumnDef=\"expandedDetail\">\r\n                <td mat-cell *matCellDef=\"let element;let i=dataIndex \"\r\n                    [attr.colspan]=\"columnsToDisplayWithExpand.length\">\r\n                    <div class=\"example-element-detail\"\r\n                        [@detailExpand]=\"element == expandedElement ? 'expanded' : 'collapsed'\">\r\n                        <ng-container *ngIf=\"expansionTemplateRef\" [ngTemplateOutlet]=\"expansionTemplateRef\"\r\n                            [ngTemplateOutletContext]=\"{$explicit:element,row:element,index:i}\">\r\n                        </ng-container>\r\n                    </div>\r\n                </td>\r\n            </ng-container>\r\n            <ng-container *ngFor=\"let ids of headersFiltersIds; let i=index\" [matColumnDef]=\"ids\">\r\n                <th mat-header-cell *matHeaderCellDef>\r\n                    <div class=\"filters-container\" [class.animate]=\"toggleFilters\">\r\n                        <app-filter-columns-component [obj]=\"columnsArray[returnIndex(ids)]\"\r\n                            (filterOutput)=\"applyColumnFilter($event,columnsArray[returnIndex(ids)])\"></app-filter-columns-component>\r\n                    </div>\r\n                </th>\r\n            </ng-container>\r\n            <tr mat-header-row *matHeaderRowDef=\" getDisplayedColumns(); sticky: stickyHeader\"></tr>\r\n            <tr mat-row *matRowDef=\"let row; columns:getDisplayedColumns(); let i=dataIndex;\" class=\"data-row\"\r\n                [ngClass]=\"{'data-row':expandRows,'stripedRows':(stripedRows &&  i % 2 == 1),'hoverClass':rowHover, 'hidden':hiddenCtrl.isSelected(row) && hideRows,'example-expanded-row':expandedElement === row}\"\r\n                (click)=\"expandRow(row, row !== expandedElement,i)\">\r\n            </tr>\r\n            <tr style=\"height: 0px;\" mat-header-row class=\"no-default-height\" *matHeaderRowDef=\"headersFiltersIds\">\r\n            </tr>\r\n            <ng-container *ngIf=\"expandRows\">\r\n                <tr style=\"height: 0px;\" mat-row *matRowDef=\"let row; columns: ['expandedDetail']\"\r\n                    [ngClass]=\"{'example-detail-row': (expandRows && row === expandedElement),'expand-row':row !== expandedElement}\">\r\n                </tr>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"showFooterRow\">\r\n                <tr mat-footer-row *matFooterRowDef=\"getDisplayedColumns(); sticky: stickyFooter\"></tr>\r\n            </ng-container>\r\n        </table>\r\n    </section>\r\n    <mat-paginator *ngIf=\"showPaginator\" [pageSizeOptions]=\"pageSizeOptions\"\r\n        [showFirstLastButtons]=\"showFirstLastButtons\">\r\n    </mat-paginator>\r\n</div>", styles: ["table{min-width:100%}.mat-table-sticky-border-elem-right{border-left:1px solid #e0e0e0}.mat-table-sticky-border-elem-left{border-right:1px solid #e0e0e0}tr.example-detail-row{display:table-row!important}.example-element-detail{overflow:hidden;display:flex}.hidden{display:none}.stripedRows{background:#eaeaea!important}.hoverClass:hover{background:#dbdbdb!important}.filters-container{overflow:hidden;max-height:0px;transition:max-height .5s ease-in-out}.animate{max-height:50px!important}.resize-handle{display:inline-block;border-right:2px solid rgb(140,140,140);position:absolute;top:0;right:0;height:100%;cursor:col-resize;opacity:0}.resize-handle:hover{width:20px}table th:hover .resize-handle{opacity:1;transition:.3s ease-in-out}.mat-table.resizing{-webkit-user-select:none;user-select:none;cursor:col-resize}.mat-table .mat-header-cell{position:relative}.mat-table .mat-header-cell:not(:last-child) .resize-holder{cursor:col-resize;width:20px;height:100%;position:absolute;right:-10px;top:0;z-index:1}.toolbar-container{display:flex;padding:0 15px;gap:1rem;grid-auto-rows:10px;justify-content:flex-end;align-items:center}.mat-table-ext-container{width:100%;max-width:100%;overflow:auto}.column-headers{font-family:Roboto,Helvetica Neue,sans-serif}.example-spacer{flex:1 1 auto}.export-button .mat-button-wrapper{display:flex!important;width:8em;justify-content:space-around;align-items:center}.toolbar-menu-container{display:flex;flex-direction:column;margin:auto .8em;width:15em;height:20em}.toolbar-menu-item{display:flex;height:3em}.toolbar-menu-checkbox{margin-left:8%}.toolbar-menu-checkbox.mat-checkbox{width:max-content;display:flex;align-items:center}.hide-button .mat-button-wrapper,.pin-button .mat-button-wrapper{display:flex!important;width:5em;justify-content:space-around;align-items:center}.hide-button,.pin-button,.export-button{height:3em;border:2px solid currentColor!important}.showHide-menu-columns-list{height:10em;max-height:10em;overflow-y:auto}.mat-column-select{width:50px!important}.data-row td,.example-expanded-row td{border-bottom-width:0!important}.action-column-cells{width:40px;height:inherit}.inline-editing-controls{display:flex}.global-search-field{width:-webkit-fill-available}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i7$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i7$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i7$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i7$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i7$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i7$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i7$1.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i7$1.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i7$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i7$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i7$1.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i7$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i7$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i7$1.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i8.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i8.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i6.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i7.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i9.MatLabel, selector: "mat-label" }, { kind: "directive", type: i10.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i14.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "directive", type: i14.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i15.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: i16.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i11.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "directive", type: i18.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i18.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i19.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: ResizeColumnDirective, selector: "[columnsResizable]", inputs: ["columnsResizable", "index"] }, { kind: "component", type: ColumnPinningComponent, selector: "app-column-pinning", inputs: ["columns"], outputs: ["columnsChanged"] }, { kind: "component", type: FilterColumnsComponentComponent, selector: "app-filter-columns-component", inputs: ["obj"], outputs: ["filterOutput"] }], animations: [
-        trigger('detailExpand', [
-            state('collapsed', style({ height: '0px', minHeight: '0' })),
-            state('expanded', style({ height: '*' })),
-            transition('expanded <=> collapsed', animate('300ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
-        ]),
-    ], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: MatTableExtComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'mat-table-ext', encapsulation: ViewEncapsulation.None, animations: [
-                        trigger('detailExpand', [
-                            state('collapsed', style({ height: '0px', minHeight: '0' })),
-                            state('expanded', style({ height: '*' })),
-                            transition('expanded <=> collapsed', animate('300ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
-                        ]),
-                    ], template: "<div [style.width]=\"tableWidth\">\r\n    <mat-form-field class=\"global-search-field\" appearance=\"fill\" *ngIf=\"globalSearch\">\r\n        <mat-label>Search</mat-label>\r\n        <input matInput [ngModel]=\"globalFilter\" (ngModelChange)=\"applyGlobalFilter($event)\" placeholder=\"Ex. Mia\"\r\n            #input>\r\n    </mat-form-field>\r\n    <mat-toolbar class=\"toolbar-container\" *ngIf=\"showToolbar\" [style.height]=\"toolbarHeight?toolbarHeight:'50px'\">\r\n        <span class=\"toolbar-title\" *ngIf=\"toolbarTitle\">{{toolbarTitle}}</span>\r\n        <ng-container *ngIf=\"toolbarTemplateRef\" [ngTemplateOutlet]=\"toolbarTemplateRef\"></ng-container>\r\n        <span class=\"example-spacer\"></span>\r\n        <ng-container *ngIf=\"rowSelection || multiRowSelection\">\r\n            <button class=\"hide-button\" mat-stroked-button color=\"primary\" (click)=\"hideSelectedRows()\">\r\n                Hide Rows\r\n            </button>\r\n            <button class=\"hide-button\" mat-stroked-button color=\"primary\" (click)=\"showHiddenRows()\">\r\n                Show All Rows\r\n            </button>\r\n        </ng-container>\r\n        <button *ngIf=\"columnHidable\" class=\"hide-button\" mat-stroked-button color=\"primary\"\r\n            (click)=\"openMenu('hideShow',$event)\" matTooltip=\"Column Visibility\" matTooltipPosition=\"above\">\r\n            <mat-icon>visibility</mat-icon>\r\n        </button>\r\n        <button *ngIf=\"columnPinnable\" class=\"pin-button\" mat-stroked-button color=\"primary\"\r\n            (click)=\"openMenu('columnPin',$event)\" matTooltip=\"Column Pinning\">\r\n            <mat-icon svgIcon=\"pinIcon\"></mat-icon>\r\n        </button>\r\n        <button *ngIf=\"exportButtonEnable\" class=\"export-button\" mat-stroked-button color=\"primary\"\r\n            (click)=\"openMenu('export',$event)\" matTooltip=\"Table Data Export\">\r\n            <mat-icon>import_export</mat-icon> <span>Export</span>\r\n            <mat-icon>expand_more</mat-icon>\r\n        </button>\r\n        <div style=\"visibility: hidden; position:fixed\" [matMenuTriggerFor]=\"menu\" [style.left.px]=\"menuX\"\r\n            [style.top.px]=\"menuY\"></div>\r\n    </mat-toolbar>\r\n    <mat-menu #menu=\"matMenu\" (closed)=\"menuClosed()\" id=\"exportMenu\">\r\n        <ng-container *ngIf=\"exportMenuCtrl\">\r\n            <mat-option (click)=\"exportTable('xlsx')\">Export to Excel</mat-option>\r\n            <mat-option (click)=\"exportTable('csv')\">Export to CSV</mat-option>\r\n        </ng-container>\r\n    </mat-menu>\r\n    <div style=\"visibility: hidden; position:fixed\" #columnMenuTrigger=\"matMenuTrigger\" [matMenuTriggerFor]=\"columnMenu\"\r\n        [style.left.px]=\"menuX\" [style.top.px]=\"menuY\">\r\n    </div>\r\n    <mat-menu #columnMenu=\"matMenu\" (closed)=\"resetMenuChecks()\">\r\n        <div class=\"toolbar-menu-container\" *ngIf=\"hideShowMenuCtrl\" [formGroup]=\"hideShowMenuGroup\"\r\n            (click)=\"$event.stopPropagation()\">\r\n            <h4 class=\"column-headers\">Visible Columns</h4>\r\n            <mat-form-field appearance=\"fill\" style=\"width: -webkit-fill-available;\">\r\n                <mat-label>Filter Columns</mat-label>\r\n                <input matInput [(ngModel)]=\"showHideFilter\" (ngModelChange)=\"filterColumns($event)\"\r\n                    [ngModelOptions]=\"{standalone: true}\">\r\n            </mat-form-field>\r\n            <div class=\"showHide-menu-columns-list\">\r\n                <div class=\"toolbar-menu-item\" *ngFor=\"let column of showHideColumnsArray\">\r\n                    <mat-checkbox color=\"primary\" class=\"toolbar-menu-checkbox\" style=\"width: max-content;\"\r\n                        [formControlName]=\"column.field\" (change)=\"setColumnHideShow()\">{{column.header}}</mat-checkbox>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"toolbar-menu-container\" *ngIf=\"columnPinMenuCtrl\" (click)=\"$event.stopPropagation()\">\r\n            <h4 class=\"column-headers\">Pin Columns</h4>\r\n            <form class=\"example-form\">\r\n                <mat-form-field appearance=\"fill\" style=\"width: -webkit-fill-available;\">\r\n                    <mat-label>Filter Columns</mat-label>\r\n                    <input matInput [(ngModel)]=\"showHideFilter\" (ngModelChange)=\"filterColumns($event)\"\r\n                        [ngModelOptions]=\"{standalone: true}\">\r\n                </mat-form-field>\r\n            </form>\r\n            <div class=\"showHide-menu-columns-list\">\r\n                <app-column-pinning [columns]=\"showHideColumnsArray\"></app-column-pinning>\r\n            </div>\r\n        </div>\r\n    </mat-menu>\r\n\r\n    <mat-progress-bar *ngIf=\"loadingIndicator\" mode=\"indeterminate\"></mat-progress-bar>\r\n    <section id=\"tableContainer\" class=\"mat-table-ext-container\" (scroll)=\"onScroll($event)\"\r\n        [style.height]=\"tableHeight ? tableHeight :'max-content'\">\r\n        <table mat-table [id]=\"'matTableExt'+tableID\" [dataSource]=\"dataSource\" matSort cdkDropList\r\n            cdkDropListOrientation=\"horizontal\" multiTemplateDataRows (cdkDropListDropped)=\"onDrop($event)\"\r\n            (click)=\"saveCellEditing()\" [style.width]=\"scrollbarH?'max-content':'100%'\">\r\n            <!-- Row selection column -->\r\n            <ng-container matColumnDef=\"select\">\r\n                <th mat-header-cell *matHeaderCellDef cdkDragLockAxis=\"x\" cdkDrag [cdkDragDisabled]=\"!dndColumns\">\r\n                    <mat-checkbox (change)=\"$event ? toggleAllRows() : null\"\r\n                        [checked]=\"selection.hasValue() && isAllSelected()\"\r\n                        [indeterminate]=\"selection.hasValue() && !isAllSelected()\" [aria-label]=\"checkboxLabel()\">\r\n                    </mat-checkbox>\r\n                </th>\r\n                <td mat-cell *matCellDef=\"let row;let i = dataIndex\">\r\n                    <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? setSelectedRows(row,i) : null\"\r\n                        [checked]=\"selection.isSelected(row)\" [aria-label]=\"checkboxLabel(row)\">\r\n                    </mat-checkbox>\r\n                </td>\r\n                <ng-container *ngIf=\"showFooterRow\">\r\n                    <td mat-footer-cell *matFooterCellDef></td>\r\n                </ng-container>\r\n            </ng-container>\r\n            <!--dynamic columns are being generated here-->\r\n            <div matColumnDef=\"{{column['field']}}\" [sticky]=\"column.pinned == 'left' ? true:false\"\r\n                [stickyEnd]=\"column.pinned == 'right' ? true:false\" *ngFor=\"let column of columnsArray; let i = index\">\r\n                <th mat-header-cell *matHeaderCellDef [style.width]=\"column.width\" [style.maxWidth]=\"column.maxWidth\"\r\n                    [style.minWidth]=\"column.minWidth\" cdkDragLockAxis=\"x\" cdkDrag [cdkDragDisabled]=\"!dndColumns\"\r\n                    [columnsResizable]=\"columnResizable\" [index]=\"i\">\r\n\r\n                    <ng-template *ngIf=\"column.headerTemplate || headerTemplateRef\"\r\n                        [ngTemplateOutlet]=\"column.headerTemplate || headerTemplateRef\"\r\n                        [ngTemplateOutletContext]=\"{data:column}\"></ng-template>\r\n                    <span *ngIf=\"!headerTemplateRef && !column.headerTemplate\"\r\n                        matTooltip=\"{{column.headerTooltip?.value}}\"\r\n                        [matTooltipPosition]=\"column?.headerTooltip?.tooltipPosition!\" mat-sort-header\r\n                        [disabled]=\"!sorting || column.disabled === true\">{{column.header}}</span>\r\n                </th>\r\n                <td mat-cell *matCellDef=\"let row ;let i=dataIndex\">\r\n                    <div *ngIf=\"!row.editable && !cellEditing[i +'_'+column.field]\"\r\n                        (dblclick)=\"cellEditing[i +'_'+column.field] = inCellEditing;setCellData(row,i)\"\r\n                        matTooltip=\"{{column.cellTooltip?.value}}\"\r\n                        [matTooltipPosition]=\"column?.cellTooltip?.tooltipPosition!\">\r\n                        <span\r\n                            *ngIf=\"!cellTemplateRef && !column?.cellTemplate && !cellTemplateRefMap[column.field]\">{{row[column.field]}}</span>\r\n                        <ng-container *ngIf=\"cellTemplateRefMap[column.field]\"\r\n                            [ngTemplateOutlet]=\"cellTemplateRefMap[column.field]\"\r\n                            [ngTemplateOutletContext]=\"{row:row,column:column,index:i}\">\r\n                        </ng-container>\r\n                        <ng-container\r\n                            *ngIf=\"cellTemplateRef && column.cellTemplate && !cellTemplateRefMap[column.field]\"\r\n                            [ngTemplateOutlet]=\"column.cellTemplate\"\r\n                            [ngTemplateOutletContext]=\"{row:row,column:column,index:i}\">\r\n                        </ng-container>\r\n                        <ng-container\r\n                            *ngIf=\"!cellTemplateRef && column.cellTemplate && !cellTemplateRefMap[column.field]\"\r\n                            [ngTemplateOutlet]=\"column.cellTemplate\"\r\n                            [ngTemplateOutletContext]=\"{row:row,column:column,index:i}\">\r\n                        </ng-container>\r\n                        <ng-container\r\n                            *ngIf=\"cellTemplateRef && !column.cellTemplate && !cellTemplateRefMap[column.field]\"\r\n                            [ngTemplateOutlet]=\"cellTemplateRef\"\r\n                            [ngTemplateOutletContext]=\"{row:row,column:column,index:i}\">\r\n                        </ng-container>\r\n                    </div>\r\n                    <div *ngIf=\"row.editable || cellEditing[i +'_'+column.field]\" (click)=\"$event.stopPropagation()\">\r\n                        <ng-container *ngIf=\"inlineEditingTemplateRef && !cellEditing[i +'_'+column.field]\"\r\n                            [ngTemplateOutlet]=\"inlineEditingTemplateRef\"\r\n                            [ngTemplateOutletContext]=\"{data:getInlineEditingData(row,i,column)}\"></ng-container>\r\n                        <ng-container *ngIf=\"cellEditingTemplateRef && !(row.editable)\"\r\n                            [ngTemplateOutlet]=\"cellEditingTemplateRef\"\r\n                            [ngTemplateOutletContext]=\"{data:getInlineEditingData(row,i,column)}\"></ng-container>\r\n                        <ng-container *ngIf=\"!inlineEditingTemplateRef && (row.editable) && rowDataTemp['e'+i]\">\r\n                            <mat-form-field *ngIf=\"column.type == 'number'\" appearance=\"outline\"\r\n                                class=\"inline-editing-field\">\r\n                                <input matInput type=\"number\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\r\n                                    [ngModelOptions]=\"{standalone: true}\">\r\n                            </mat-form-field>\r\n                            <mat-form-field style=\"width: 100%;\" *ngIf=\"column.type == 'string'\" appearance=\"outline\"\r\n                                class=\"inline-editing-field\">\r\n                                <input matInput type=\"text\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\r\n                                    [ngModelOptions]=\"{standalone: true}\">\r\n                            </mat-form-field>\r\n                            <mat-form-field *ngIf=\"column.type == 'date'\" appearance=\"outline\"\r\n                                class=\"inline-editing-field\">\r\n                                <input matInput type=\"date\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\r\n                                    [ngModelOptions]=\"{standalone: true}\">\r\n                            </mat-form-field>\r\n                            <mat-form-field *ngIf=\"column.type == 'selection'\" appearance=\"outline\"\r\n                                class=\"inline-editing-field\">\r\n                                <mat-select [value]=\"rowDataTemp['e'+i][column.field]\"\r\n                                    [(ngModel)]=\"rowDataTemp['e'+i][column.field]\">\r\n                                    <mat-option *ngFor=\"let option of column.options\" [value]=\"option\">\r\n                                        {{option}}\r\n                                    </mat-option>\r\n                                </mat-select>\r\n                            </mat-form-field>\r\n                            <mat-checkbox (click)=\"$event.stopPropagation()\" *ngIf=\"column.type == 'boolean'\"\r\n                                color=\"primary\" [(ngModel)]=\"row[column.field]\"></mat-checkbox>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"!cellEditingTemplateRef && cellEditing[i +'_'+column.field]\">\r\n                            <mat-form-field *ngIf=\"column.type == 'number'\" appearance=\"outline\"\r\n                                class=\"inline-editing-field\">\r\n                                <input matInput type=\"number\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\r\n                                    [ngModelOptions]=\"{standalone: true}\">\r\n                            </mat-form-field>\r\n                            <mat-form-field *ngIf=\"column.type == 'string'\" appearance=\"outline\"\r\n                                class=\"inline-editing-field\">\r\n                                <input matInput type=\"text\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\r\n                                    [ngModelOptions]=\"{standalone: true}\">\r\n                            </mat-form-field>\r\n                            <mat-form-field *ngIf=\"column.type == 'date'\" appearance=\"outline\"\r\n                                class=\"inline-editing-field\">\r\n                                <input matInput type=\"date\" [(ngModel)]=\"rowDataTemp['e'+i][column.field]\"\r\n                                    [ngModelOptions]=\"{standalone: true}\">\r\n                            </mat-form-field>\r\n                            <mat-form-field *ngIf=\"column.type == 'selection'\" appearance=\"outline\"\r\n                                class=\"inline-editing-field\">\r\n                                <mat-select [value]=\"rowDataTemp['e'+i][column.field]\"\r\n                                    [(ngModel)]=\"rowDataTemp['e'+i][column.field]\">\r\n                                    <mat-option *ngFor=\"let option of column.options\" [value]=\"option\">\r\n                                        {{option}}\r\n                                    </mat-option>\r\n                                </mat-select>\r\n                            </mat-form-field>\r\n                            <mat-checkbox (click)=\"$event.stopPropagation()\" *ngIf=\"column.type == 'boolean'\"\r\n                                color=\"primary\" [(ngModel)]=\"row[column.field]\"></mat-checkbox>\r\n                        </ng-container>\r\n                    </div>\r\n                </td>\r\n                <ng-container *ngIf=\"showFooterRow\">\r\n                    <td mat-footer-cell *matFooterCellDef> {{column.footerText}} </td>\r\n                </ng-container>\r\n            </div>\r\n            <ng-container matColumnDef=\"edit\" stickyEnd=\"false\">\r\n                <th mat-header-cell cdkDragLockAxis=\"x\" cdkDrag [cdkDragDisabled]=\"true\" *matHeaderCellDef\r\n                    class=\"action-column-cells\"> Edit </th>\r\n                <td mat-cell *matCellDef=\"let row; let i = dataIndex\" class=\"inline-edit-column-cell\">\r\n                    <mat-icon class=\"edit-column-icons\" *ngIf=\"!row.editable && !row.editmodal\" aria-hidden=\"false\"\r\n                        (click)=\"enableInlineEditing(row,i)\" fontIcon=\"edit_note\">\r\n                    </mat-icon>\r\n                    <div class=\"inline-editing-controls\" *ngIf=\"row.editable && !row.editmodal\">\r\n                        <mat-icon class=\"edit-column-icons\" aria-hidden=\"false\" (click)=\"saveInlineEditing(row,i)\"\r\n                            fontIcon=\"done\"></mat-icon>\r\n                        <mat-icon class=\"edit-column-icons\" aria-hidden=\"false\" (click)=\"cancelInlineEditing(row,i)\"\r\n                            fontIcon=\"close\"></mat-icon>\r\n                    </div>\r\n                </td>\r\n                <td mat-footer-cell *matFooterCellDef> edit </td>\r\n            </ng-container>\r\n            <ng-container matColumnDef=\"popup\" stickyEnd=\"false\">\r\n                <th mat-header-cell cdkDragLockAxis=\"x\" cdkDrag [cdkDragDisabled]=\"true\" *matHeaderCellDef\r\n                    class=\"action-column-cells\"> Popup\r\n                </th>\r\n                <td mat-cell *matCellDef=\"let row; let i = index\">\r\n                    <mat-icon aria-hidden=\"false\" (click)=\"openEditingDialog(row)\" fontIcon=\"edit\">\r\n                    </mat-icon>\r\n                </td>\r\n                <td mat-footer-cell *matFooterCellDef></td>\r\n            </ng-container>\r\n\r\n            <ng-container matColumnDef=\"delete\">\r\n                <th mat-header-cell cdkDragLockAxis=\"x\" cdkDrag [cdkDragDisabled]=\"true\" *matHeaderCellDef\r\n                    class=\"action-column-cells\"> Delete\r\n                </th>\r\n                <td mat-cell *matCellDef=\"let row;let i=dataIndex\">\r\n                    <mat-icon (click)=\"deleteRow(row,i)\" aria-hidden=\"false\" aria-label=\"Example home icon\"\r\n                        fontIcon=\"delete\">\r\n                    </mat-icon>\r\n                </td>\r\n                <td mat-footer-cell *matFooterCellDef></td>\r\n            </ng-container>\r\n            <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\r\n            <ng-container *ngIf=\"expandRows\" matColumnDef=\"expandedDetail\">\r\n                <td mat-cell *matCellDef=\"let element;let i=dataIndex \"\r\n                    [attr.colspan]=\"columnsToDisplayWithExpand.length\">\r\n                    <div class=\"example-element-detail\"\r\n                        [@detailExpand]=\"element == expandedElement ? 'expanded' : 'collapsed'\">\r\n                        <ng-container *ngIf=\"expansionTemplateRef\" [ngTemplateOutlet]=\"expansionTemplateRef\"\r\n                            [ngTemplateOutletContext]=\"{$explicit:element,row:element,index:i}\">\r\n                        </ng-container>\r\n                    </div>\r\n                </td>\r\n            </ng-container>\r\n            <ng-container *ngFor=\"let ids of headersFiltersIds; let i=index\" [matColumnDef]=\"ids\">\r\n                <th mat-header-cell *matHeaderCellDef>\r\n                    <div class=\"filters-container\" [class.animate]=\"toggleFilters\">\r\n                        <app-filter-columns-component [obj]=\"columnsArray[returnIndex(ids)]\"\r\n                            (filterOutput)=\"applyColumnFilter($event,columnsArray[returnIndex(ids)])\"></app-filter-columns-component>\r\n                    </div>\r\n                </th>\r\n            </ng-container>\r\n            <tr mat-header-row *matHeaderRowDef=\" getDisplayedColumns(); sticky: stickyHeader\"></tr>\r\n            <tr mat-row *matRowDef=\"let row; columns:getDisplayedColumns(); let i=dataIndex;\" class=\"data-row\"\r\n                [ngClass]=\"{'data-row':expandRows,'stripedRows':(stripedRows &&  i % 2 == 1),'hoverClass':rowHover, 'hidden':hiddenCtrl.isSelected(row) && hideRows,'example-expanded-row':expandedElement === row}\"\r\n                (click)=\"expandRow(row, row !== expandedElement,i)\">\r\n            </tr>\r\n            <tr style=\"height: 0px;\" mat-header-row class=\"no-default-height\" *matHeaderRowDef=\"headersFiltersIds\">\r\n            </tr>\r\n            <ng-container *ngIf=\"expandRows\">\r\n                <tr style=\"height: 0px;\" mat-row *matRowDef=\"let row; columns: ['expandedDetail']\"\r\n                    [ngClass]=\"{'example-detail-row': (expandRows && row === expandedElement),'expand-row':row !== expandedElement}\">\r\n                </tr>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"showFooterRow\">\r\n                <tr mat-footer-row *matFooterRowDef=\"getDisplayedColumns(); sticky: stickyFooter\"></tr>\r\n            </ng-container>\r\n        </table>\r\n    </section>\r\n    <mat-paginator *ngIf=\"showPaginator\" [pageSizeOptions]=\"pageSizeOptions\"\r\n        [showFirstLastButtons]=\"showFirstLastButtons\">\r\n    </mat-paginator>\r\n</div>", styles: ["table{min-width:100%}.mat-table-sticky-border-elem-right{border-left:1px solid #e0e0e0}.mat-table-sticky-border-elem-left{border-right:1px solid #e0e0e0}tr.example-detail-row{display:table-row!important}.example-element-detail{overflow:hidden;display:flex}.hidden{display:none}.stripedRows{background:#eaeaea!important}.hoverClass:hover{background:#dbdbdb!important}.filters-container{overflow:hidden;max-height:0px;transition:max-height .5s ease-in-out}.animate{max-height:50px!important}.resize-handle{display:inline-block;border-right:2px solid rgb(140,140,140);position:absolute;top:0;right:0;height:100%;cursor:col-resize;opacity:0}.resize-handle:hover{width:20px}table th:hover .resize-handle{opacity:1;transition:.3s ease-in-out}.mat-table.resizing{-webkit-user-select:none;user-select:none;cursor:col-resize}.mat-table .mat-header-cell{position:relative}.mat-table .mat-header-cell:not(:last-child) .resize-holder{cursor:col-resize;width:20px;height:100%;position:absolute;right:-10px;top:0;z-index:1}.toolbar-container{display:flex;padding:0 15px;gap:1rem;grid-auto-rows:10px;justify-content:flex-end;align-items:center}.mat-table-ext-container{width:100%;max-width:100%;overflow:auto}.column-headers{font-family:Roboto,Helvetica Neue,sans-serif}.example-spacer{flex:1 1 auto}.export-button .mat-button-wrapper{display:flex!important;width:8em;justify-content:space-around;align-items:center}.toolbar-menu-container{display:flex;flex-direction:column;margin:auto .8em;width:15em;height:20em}.toolbar-menu-item{display:flex;height:3em}.toolbar-menu-checkbox{margin-left:8%}.toolbar-menu-checkbox.mat-checkbox{width:max-content;display:flex;align-items:center}.hide-button .mat-button-wrapper,.pin-button .mat-button-wrapper{display:flex!important;width:5em;justify-content:space-around;align-items:center}.hide-button,.pin-button,.export-button{height:3em;border:2px solid currentColor!important}.showHide-menu-columns-list{height:10em;max-height:10em;overflow-y:auto}.mat-column-select{width:50px!important}.data-row td,.example-expanded-row td{border-bottom-width:0!important}.action-column-cells{width:40px;height:inherit}.inline-editing-controls{display:flex}.global-search-field{width:-webkit-fill-available}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$1.MatDialog }, { type: MatTableExtService }, { type: i3$1.FormBuilder }, { type: i4$1.DomSanitizer }, { type: i5$1.MatIconRegistry }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { menuTrigger: [{
-                type: ViewChild,
-                args: [MatMenuTrigger]
-            }], columnMenuTrigger: [{
-                type: ViewChild,
-                args: ['columnMenuTrigger']
-            }], paginator: [{
-                type: ViewChild,
-                args: [MatPaginator]
-            }], sort: [{
-                type: ViewChild,
-                args: [MatSort]
-            }], dataSource: [{
-                type: Input
-            }], columns: [{
-                type: Input
-            }], columnResizable: [{
-                type: Input
-            }], stripedRows: [{
-                type: Input
-            }], rowHover: [{
-                type: Input
-            }], inlineRowEditing: [{
-                type: Input
-            }], inCellEditing: [{
-                type: Input
-            }], popupRowEditing: [{
-                type: Input
-            }], enableDelete: [{
-                type: Input
-            }], rowSelection: [{
-                type: Input
-            }], multiRowSelection: [{
-                type: Input
-            }], stickyFooter: [{
-                type: Input
-            }], stickyHeader: [{
-                type: Input
-            }], showFooterRow: [{
-                type: Input
-            }], columnFilter: [{
-                type: Input
-            }], loadingIndicator: [{
-                type: Input
-            }], sorting: [{
-                type: Input
-            }], showToolbar: [{
-                type: Input
-            }], toolbarTitle: [{
-                type: Input
-            }], tableHeight: [{
-                type: Input
-            }], toolbarHeight: [{
-                type: Input
-            }], tableWidth: [{
-                type: Input
-            }], scrollbarH: [{
-                type: Input
-            }], toolbarTemplate: [{
-                type: Input
-            }], columnHidable: [{
-                type: Input
-            }], columnPinnable: [{
-                type: Input
-            }], globalSearch: [{
-                type: Input
-            }], expandRows: [{
-                type: Input
-            }], dndColumns: [{
-                type: Input
-            }], showPaginator: [{
-                type: Input
-            }], showFirstLastButtons: [{
-                type: Input
-            }], exportButtonEnable: [{
-                type: Input
-            }], pageSizeOptions: [{
-                type: Input
-            }], toolbarTemplateRef: [{
-                type: Input
-            }], headerTemplateRef: [{
-                type: Input
-            }], cellTemplateRef: [{
-                type: Input
-            }], expansionTemplateRef: [{
-                type: Input
-            }], popupEditingTemplateRef: [{
-                type: Input
-            }], inlineEditingTemplateRef: [{
-                type: Input
-            }], cellEditingTemplateRef: [{
-                type: Input
-            }], cellTemplateRefMap: [{
-                type: Input
-            }], inlineChange: [{
-                type: Output
-            }], cellChange: [{
-                type: Output
-            }], popupChange: [{
-                type: Output
-            }], rowDeleted: [{
-                type: Output
-            }], scroll: [{
-                type: Output
-            }], selectionChanged: [{
-                type: Output
-            }], expansionChange: [{
-                type: Output
-            }] } });
-
-class MatTableExtModule {
-}
-MatTableExtModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: MatTableExtModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-MatTableExtModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: MatTableExtModule, declarations: [MatTableExtComponent,
-        ResizeColumnDirective,
-        ColumnPinningComponent,
-        EditingComponent,
-        FilterColumnsComponentComponent], imports: [CommonModule, i1$2.TranslateModule, MatTableModule,
-        FormsModule,
-        ReactiveFormsModule,
-        MatNativeDateModule,
-        A11yModule,
-        CdkAccordionModule,
-        ClipboardModule,
-        CdkStepperModule,
-        CdkTableModule,
-        CdkTreeModule,
-        DragDropModule,
-        MatAutocompleteModule,
-        MatBadgeModule,
-        MatBottomSheetModule,
-        MatButtonModule,
-        MatButtonToggleModule,
-        MatCardModule,
-        MatCheckboxModule,
-        MatChipsModule,
-        MatStepperModule,
-        MatDatepickerModule,
-        MatDialogModule,
-        MatDividerModule,
-        MatExpansionModule,
-        MatGridListModule,
-        MatIconModule,
-        MatInputModule,
-        MatListModule,
-        MatMenuModule,
-        MatNativeDateModule,
-        MatPaginatorModule,
-        MatProgressBarModule,
-        MatProgressSpinnerModule,
-        MatRadioModule,
-        MatRippleModule,
-        MatSelectModule,
-        MatSidenavModule,
-        MatSliderModule,
-        MatSlideToggleModule,
-        MatSnackBarModule,
-        MatSortModule,
-        MatTabsModule,
-        MatToolbarModule,
-        MatTooltipModule,
-        MatTreeModule,
-        PortalModule,
-        ScrollingModule,
-        MatFormFieldModule], exports: [MatTableExtComponent,
-        ResizeColumnDirective,
-        ColumnPinningComponent,
-        EditingComponent,
-        FilterColumnsComponentComponent] });
-MatTableExtModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: MatTableExtModule, imports: [CommonModule,
-        TranslateModule.forChild(),
-        MatTableModule,
-        FormsModule,
-        ReactiveFormsModule,
-        MatNativeDateModule,
-        A11yModule,
-        CdkAccordionModule,
-        ClipboardModule,
-        CdkStepperModule,
-        CdkTableModule,
-        CdkTreeModule,
-        DragDropModule,
-        MatAutocompleteModule,
-        MatBadgeModule,
-        MatBottomSheetModule,
-        MatButtonModule,
-        MatButtonToggleModule,
-        MatCardModule,
-        MatCheckboxModule,
-        MatChipsModule,
-        MatStepperModule,
-        MatDatepickerModule,
-        MatDialogModule,
-        MatDividerModule,
-        MatExpansionModule,
-        MatGridListModule,
-        MatIconModule,
-        MatInputModule,
-        MatListModule,
-        MatMenuModule,
-        MatNativeDateModule,
-        MatPaginatorModule,
-        MatProgressBarModule,
-        MatProgressSpinnerModule,
-        MatRadioModule,
-        MatRippleModule,
-        MatSelectModule,
-        MatSidenavModule,
-        MatSliderModule,
-        MatSlideToggleModule,
-        MatSnackBarModule,
-        MatSortModule,
-        MatTabsModule,
-        MatToolbarModule,
-        MatTooltipModule,
-        MatTreeModule,
-        PortalModule,
-        ScrollingModule,
-        MatFormFieldModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: MatTableExtModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        MatTableExtComponent,
-                        ResizeColumnDirective,
-                        ColumnPinningComponent,
-                        EditingComponent,
-                        FilterColumnsComponentComponent,
-                    ],
-                    imports: [
-                        CommonModule,
-                        TranslateModule.forChild(),
-                        MatTableModule,
-                        FormsModule,
-                        ReactiveFormsModule,
-                        MatNativeDateModule,
-                        A11yModule,
-                        CdkAccordionModule,
-                        ClipboardModule,
-                        CdkStepperModule,
-                        CdkTableModule,
-                        CdkTreeModule,
-                        DragDropModule,
-                        MatAutocompleteModule,
-                        MatBadgeModule,
-                        MatBottomSheetModule,
-                        MatButtonModule,
-                        MatButtonToggleModule,
-                        MatCardModule,
-                        MatCheckboxModule,
-                        MatChipsModule,
-                        MatStepperModule,
-                        MatDatepickerModule,
-                        MatDialogModule,
-                        MatDividerModule,
-                        MatExpansionModule,
-                        MatGridListModule,
-                        MatIconModule,
-                        MatInputModule,
-                        MatListModule,
-                        MatMenuModule,
-                        MatNativeDateModule,
-                        MatPaginatorModule,
-                        MatProgressBarModule,
-                        MatProgressSpinnerModule,
-                        MatRadioModule,
-                        MatRippleModule,
-                        MatSelectModule,
-                        MatSidenavModule,
-                        MatSliderModule,
-                        MatSlideToggleModule,
-                        MatSnackBarModule,
-                        MatSortModule,
-                        MatTabsModule,
-                        MatToolbarModule,
-                        MatTooltipModule,
-                        MatTreeModule,
-                        PortalModule,
-                        ScrollingModule,
-                        MatFormFieldModule
-                    ],
-                    exports: [
-                        MatTableExtComponent,
-                        ResizeColumnDirective,
-                        ColumnPinningComponent,
-                        EditingComponent,
-                        FilterColumnsComponentComponent,
-                    ],
-                }]
-        }] });
-
-/*
- * Public API Surface of mat-table-ext
- */
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { ColumnPinningComponent, EditingComponent, FilterColumnsComponentComponent, MatTableExtComponent, MatTableExtModule, MatTableExtService, ResizeColumnDirective };
-//# sourceMappingURL=mat-table-ext.mjs.map