@servicemind.tis/tis-smart-table-viewer 1.0.0

package/fesm2022/servicemind.tis-tis-smart-table-viewer.mjs

@@ -0,0 +1,1744 @@
+import * as i0 from '@angular/core';
+import { Injectable, HostListener, Input, Directive, Inject, Component, EventEmitter, Output, Pipe, ViewChild, NgModule } from '@angular/core';
+import { CdkColumnDef } from '@angular/cdk/table';
+import * as i6 from '@angular/forms';
+import { FormGroup, FormControl, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i3$1 from '@angular/router';
+import { RouterLink, RouterOutlet } from '@angular/router';
+import { BehaviorSubject, of, Subject, takeUntil, tap, map, shareReplay, debounceTime, distinctUntilChanged } from 'rxjs';
+import { SelectionModel } from '@angular/cdk/collections';
+import * as i13 from '@angular/cdk/drag-drop';
+import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
+import { catchError, finalize } from 'rxjs/operators';
+import * as i1 from '@angular/common/http';
+import * as i1$1 from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import * as i12$1 from '@angular/material/paginator';
+import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
+import { MatSort } from '@angular/material/sort';
+import * as i5 from '@angular/cdk/layout';
+import { Breakpoints, LayoutModule } from '@angular/cdk/layout';
+import { DateTime } from 'luxon';
+import * as i4 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i3 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i8 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i10 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i10$1 from '@angular/material/progress-spinner';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import * as i4$1 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i13$1 from '@angular/material/table';
+import { MatTableModule } from '@angular/material/table';
+import * as i12 from '@angular/material/checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import * as i1$2 from '@angular/material/snack-bar';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import * as i9 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import * as i7 from '@angular/material/menu';
+import { MatMenuModule } from '@angular/material/menu';
+import * as i8$1 from '@angular/material/divider';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatTooltipModule } from '@angular/material/tooltip';
+
+class TisSmartTableViewerService {
+    constructor() { }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TisSmartTableViewerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TisSmartTableViewerService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TisSmartTableViewerService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+class ApiDataSource {
+    apiService;
+    apiSubs;
+    apiSubject = new BehaviorSubject([]);
+    loadingSubject = new BehaviorSubject(false);
+    loading$ = this.loadingSubject.asObservable();
+    totalDataLength = new BehaviorSubject(null);
+    totalDataLength$ = this.totalDataLength.asObservable();
+    constructor(apiService) {
+        this.apiService = apiService;
+        console.log(' DataSource Initialized...');
+    }
+    connect(collectionViewer) {
+        return this.apiSubject.asObservable();
+    }
+    disconnect(collectionViewer) {
+        this.apiSubject.complete();
+        this.loadingSubject.complete();
+    }
+    load(url, pageIndex, pageSize, search, filter, sortFilter) {
+        if (this.apiSubs) {
+            this.apiSubs.unsubscribe();
+        }
+        this.loadingSubject.next(true);
+        this.apiSubs = this.apiService.getList(url, (pageIndex + 1), pageSize, search, { filter }, { sortFilter }).pipe(catchError(() => of([])), finalize(() => this.loadingSubject.next(false))).subscribe(r => {
+            console.log(`DataSource: Url: ${url}, Reply:`, r);
+            if (r?.data?.length > 0) {
+                this.totalDataLength.next(r?.total);
+            }
+            else {
+                this.totalDataLength.next(0);
+            }
+            this.apiSubject.next(r?.data);
+        });
+    }
+}
+
+class ApiService {
+    http;
+    constructor(http) {
+        this.http = http;
+    }
+    getList(apiUrl, currentPage = 1, limit = 10, search = '', filters, sortFilter) {
+        const body = { ...filters, ...sortFilter };
+        return this.http.get(`${apiUrl}?current_page=${currentPage}&per_page=${limit}&search=${search}`);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ApiService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ApiService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ApiService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1.HttpClient }] });
+
+const setToLocalStorageWithExpiry = (key, value, ttl = 9 * 1000 * 60 * 60) => {
+    const now = new Date();
+    // `item` is an object which contains the original value
+    // as well as the time when it's supposed to expire
+    const item = {
+        value,
+        expiry: now.getTime() + ttl
+    };
+    localStorage.setItem(key, JSON.stringify(item));
+};
+const getFromLocalStorageWithExpiry = (key) => {
+    const itemStr = localStorage.getItem(key);
+    // if the item doesn't exist, return null
+    if (!itemStr) {
+        return null;
+    }
+    const item = JSON.parse(itemStr);
+    const now = new Date();
+    if (!item.expiry) {
+        localStorage.removeItem(key);
+        return null;
+    }
+    // compare the expiry time of the item with the current time
+    if (now.getTime() > item.expiry) {
+        // If the item is expired, delete the item from storage
+        // and return null
+        localStorage.removeItem(key);
+        return null;
+    }
+    return item.value;
+};
+const removeMultipleKeys = (keys) => {
+    console.log('Storage Helper: Keys To Remove:', keys);
+    keys.forEach(key => {
+        localStorage.removeItem(key);
+    });
+};
+
+class ScrollingDirective {
+    el;
+    constructor(el) {
+        this.el = el;
+    }
+    appScrolling = false;
+    // @HostListener('mouseenter') onMouseEnter() {}
+    onMouseLeave() {
+        // console.log("==== appScrolling mouseleave ===", this.el.nativeElement, this.appScrolling);
+        this.el.nativeElement.classList.remove('more-scrollbar-width', 'more-scrollbar-height');
+    }
+    onMousemove(event) {
+        // console.log("==== appScrolling mousemove clientX-clientY ===", event.clientX, event.clientY);
+        // console.log("==== appScrolling mousemove clientWidth-clientHeight ===", this.el.nativeElement.clientWidth, this.el.nativeElement.clientHeight);
+        // console.log("==== appScrolling mousemove offsetX-offsetY ===", this.el.nativeElement.offsetX, this.el.nativeElement.offsetY);
+        // console.log("==== appScrolling mousemove offsetWidth-offsetLeft ===", this.el.nativeElement.offsetWidth, this.el.nativeElement.offsetLeft);
+        // console.log("==== appScrolling mousemove json ===", {
+        //   clientX: event.clientX,
+        //   clientY: event.clientY,
+        //   clientWidth: this.el.nativeElement.clientWidth,
+        //   clientHeight: this.el.nativeElement.clientHeight,
+        //   offsetX: this.el.nativeElement.offsetX,
+        //   offsetY: this.el.nativeElement.offsetY,
+        //   offsetWidth: this.el.nativeElement.offsetWidth,
+        //   offsetLeft: this.el.nativeElement.offsetLeft,
+        //   rect: this.el.nativeElement.getBoundingClientRect()
+        // });
+        const rect = this.el.nativeElement.getBoundingClientRect();
+        let xDistance = rect.left + this.el.nativeElement.clientWidth + 10 - event.clientX;
+        // console.log("=== appScrolling mousemove xDistance ===", xDistance);
+        xDistance < 15 && xDistance > -15 ? this.el.nativeElement.classList.add('more-scrollbar-width') : this.el.nativeElement.classList.remove('more-scrollbar-width');
+        let yDistance = rect.top + this.el.nativeElement.clientHeight + 15 - event.clientY;
+        // console.log("=== appScrolling mousemove yDistance ===", yDistance);
+        yDistance < 20 && yDistance > -20 ? this.el.nativeElement.classList.add('more-scrollbar-height') : this.el.nativeElement.classList.remove('more-scrollbar-height');
+        // this.el.nativeElement.classList.remove('more-scrollbar-width', 'more-scrollbar-height')
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ScrollingDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.7", type: ScrollingDirective, isStandalone: false, selector: "[appScrolling]", inputs: { appScrolling: "appScrolling" }, host: { listeners: { "mouseleave": "onMouseLeave()", "mousemove": "onMousemove($event)" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ScrollingDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[appScrolling]',
+                    standalone: false
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { appScrolling: [{
+                type: Input
+            }], onMouseLeave: [{
+                type: HostListener,
+                args: ['mouseleave']
+            }], onMousemove: [{
+                type: HostListener,
+                args: ['mousemove', ['$event']]
+            }] } });
+
+class UserCustomizationService {
+    http;
+    constructor(http) {
+        this.http = http;
+    }
+    getColumnsTemplates(url, listComponent) {
+        return this.http.get(`${url}?listComponent=${listComponent}`);
+    }
+    addColumnsTemplate(url, body) {
+        return this.http.post(url, body);
+    }
+    updateColumnsTemplate(url, body) {
+        return this.http.post(url, body);
+    }
+    deleteColumnsTemplate(url, body) {
+        return this.http.put(url, body);
+    }
+    getSelectedColumnsTemplate(url, listComponent) {
+        return this.http.get(`${url}?listComponent=${listComponent}`);
+    }
+    updateSelectedColumnsTemplate(url, body) {
+        return this.http.post(url, body);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: UserCustomizationService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: UserCustomizationService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: UserCustomizationService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1.HttpClient }] });
+
+class TisSmartTableErrorDialogComponent {
+    dialogRef;
+    data;
+    constructor(dialogRef, data) {
+        this.dialogRef = dialogRef;
+        this.data = data;
+    }
+    onClose() {
+        this.dialogRef.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TisSmartTableErrorDialogComponent, deps: [{ token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: TisSmartTableErrorDialogComponent, isStandalone: false, selector: "tis-smart-table-error-dialog", ngImport: i0, template: "<h1 mat-dialog-title>\n    <mat-icon class=\"{{data?.iconClass}}\">{{data?.icon}}</mat-icon>\n    {{data?.title}}\n</h1>\n<div mat-dialog-content>\n    {{data?.message}}\n</div>\n<div mat-dialog-actions>\n  <button mat-button class=\"tis-text-upper {{data?.buttonClass ?? 'tis-btn-primary'}}\" (click)=\"onClose()\" cdkFocusInitial *ngIf=\"data?.buttonText && data?.buttonText != ''\">{{data?.buttonText}}</button>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TisSmartTableErrorDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tis-smart-table-error-dialog', standalone: false, template: "<h1 mat-dialog-title>\n    <mat-icon class=\"{{data?.iconClass}}\">{{data?.icon}}</mat-icon>\n    {{data?.title}}\n</h1>\n<div mat-dialog-content>\n    {{data?.message}}\n</div>\n<div mat-dialog-actions>\n  <button mat-button class=\"tis-text-upper {{data?.buttonClass ?? 'tis-btn-primary'}}\" (click)=\"onClose()\" cdkFocusInitial *ngIf=\"data?.buttonText && data?.buttonText != ''\">{{data?.buttonText}}</button>\n</div>" }]
+        }], ctorParameters: () => [{ type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }] });
+
+class TisHelperService {
+    snackBar;
+    dialog;
+    http;
+    constructor(snackBar, dialog, http) {
+        this.snackBar = snackBar;
+        this.dialog = dialog;
+        this.http = http;
+    }
+    showHttpErrorMsg(error, duration = 5000) {
+        console.log('httpError: ', error);
+        let errorMessage = 'Some Unknown Error Occurred.';
+        let errorCode = 'Unknown Error';
+        const httpError = error;
+        if (httpError.status >= 400) {
+            const errorFromServer = httpError.error;
+            if (Array.isArray(errorFromServer) && errorFromServer.length > 0) {
+                errorMessage = errorFromServer[0].message;
+                errorCode = errorFromServer[0].code;
+            }
+        }
+        else if (httpError.status < 100) {
+            errorMessage = httpError.message;
+            errorCode = httpError.statusText;
+        }
+        if (errorCode == "VALIDATION_ERROR" || errorCode == "NOT_FOUND_ERROR" || errorCode == "THIRD_PARTY_API_ERROR") {
+            let confirmBoxData = {
+                title: "Error !",
+                message: errorMessage,
+                icon: "error",
+                iconClass: "tis-text-danger",
+                buttonText: "Ok",
+                buttonClass: "tis-btn-primary",
+            };
+            const dialogRef = this.dialog.open(TisSmartTableErrorDialogComponent, {
+                width: "550px",
+                panelClass: ['tis-simple-confirmation'],
+                data: confirmBoxData,
+                disableClose: false,
+            });
+            return dialogRef;
+        }
+        else {
+            const snackbarRef = this.snackBar.open(errorMessage, 'Error', { duration: duration });
+            return snackbarRef;
+        }
+    }
+    showSuccessMsg(message, title, duration = 5000) {
+        this.snackBar.open(message, title, {
+            duration: duration
+        });
+    }
+    showErrorMsg(message, title, duration = 5000) {
+        this.snackBar.open(message, title, {
+            duration: duration
+        });
+    }
+    sortArrayByOrder(A, B) {
+        const sortedA = [];
+        for (const element of B) {
+            const index = A.indexOf(element);
+            if (index !== -1) {
+                sortedA.push(A[index]);
+                A.splice(index, 1);
+            }
+        }
+        return [...sortedA, ...A]; // Combine sorted elements with remaining elements
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TisHelperService, deps: [{ token: i1$2.MatSnackBar }, { token: i1$1.MatDialog }, { token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TisHelperService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TisHelperService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1$2.MatSnackBar }, { type: i1$1.MatDialog }, { type: i1.HttpClient }] });
+
+class TisSmartTableConfirmationDialogComponent {
+    dialogRef;
+    data;
+    constructor(dialogRef, data) {
+        this.dialogRef = dialogRef;
+        this.data = data;
+        this.dialogRef.addPanelClass(['tis-smart-table-confirmation-dialog']);
+    }
+    onClose(status) {
+        this.dialogRef.close(status);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TisSmartTableConfirmationDialogComponent, deps: [{ token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: TisSmartTableConfirmationDialogComponent, isStandalone: false, selector: "tis-smart-table-confirmation-dialog", ngImport: i0, template: "<h1 mat-dialog-title style=\"align-items: center; display: flex;\">\n    <mat-icon class=\"{{data?.iconClass}}\" style=\"color: var(--tis-cancel, #bb333b)\">{{data?.icon}}</mat-icon>\n    <span>{{data?.title}}</span>\n</h1>\n<div mat-dialog-content style=\"padding: 20px 24px; padding-top: 0px;\">\n    @if(data?.html){\n        <h5 class=\"title\">{{data?.message}}</h5>\n        <div [innerHTML]=\"data.html\">\n        </div>\n    }\n    @else {\n        <span>{{data?.message}}</span>\n    }\n</div>\n<div mat-dialog-actions>\n    <button mat-button class=\"{{data?.cancelButtonClass}}\" style=\"color: var(--tis-primary, var(--mat-sys-primary))\" (click)=\"onClose(false)\" *ngIf=\"data?.cancelButtonText && data?.cancelButtonText != ''\">{{data?.cancelButtonText}}</button>\n    <button mat-button class=\"{{data?.approveButtonClass}}\" style=\"color: var(--tis-cancel, #bb333b)\" (click)=\"onClose(true)\" cdkFocusInitial *ngIf=\"data?.approveButtonText && data?.approveButtonText != ''\">{{data?.approveButtonText}}</button>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TisSmartTableConfirmationDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tis-smart-table-confirmation-dialog', standalone: false, template: "<h1 mat-dialog-title style=\"align-items: center; display: flex;\">\n    <mat-icon class=\"{{data?.iconClass}}\" style=\"color: var(--tis-cancel, #bb333b)\">{{data?.icon}}</mat-icon>\n    <span>{{data?.title}}</span>\n</h1>\n<div mat-dialog-content style=\"padding: 20px 24px; padding-top: 0px;\">\n    @if(data?.html){\n        <h5 class=\"title\">{{data?.message}}</h5>\n        <div [innerHTML]=\"data.html\">\n        </div>\n    }\n    @else {\n        <span>{{data?.message}}</span>\n    }\n</div>\n<div mat-dialog-actions>\n    <button mat-button class=\"{{data?.cancelButtonClass}}\" style=\"color: var(--tis-primary, var(--mat-sys-primary))\" (click)=\"onClose(false)\" *ngIf=\"data?.cancelButtonText && data?.cancelButtonText != ''\">{{data?.cancelButtonText}}</button>\n    <button mat-button class=\"{{data?.approveButtonClass}}\" style=\"color: var(--tis-cancel, #bb333b)\" (click)=\"onClose(true)\" cdkFocusInitial *ngIf=\"data?.approveButtonText && data?.approveButtonText != ''\">{{data?.approveButtonText}}</button>\n</div>" }]
+        }], ctorParameters: () => [{ type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }] });
+
+class CreateColumnsTemplateComponent {
+    dialogRef;
+    helper;
+    snackBar;
+    userCustomizationService;
+    data;
+    loading = false;
+    updatingTemplate = false;
+    savingTemplate = false;
+    columns = [];
+    displayedColumns = [];
+    listComponentColumns;
+    listComponentColumnsTemplateDetail;
+    form;
+    userId;
+    translationReadKey;
+    customColumns;
+    t;
+    columnCustomizationUrlConfig;
+    constructor(dialogRef, helper, snackBar, userCustomizationService, data) {
+        this.dialogRef = dialogRef;
+        this.helper = helper;
+        this.snackBar = snackBar;
+        this.userCustomizationService = userCustomizationService;
+        this.data = data;
+        this.translationReadKey = this.data?.translationReadKey ?? '';
+        if (this.data?.customColumns) {
+            this.customColumns = this.data?.customColumns ?? {};
+        }
+        if (this.data?.columnCustomizationUrlConfig) {
+            this.columnCustomizationUrlConfig = this.data.columnCustomizationUrlConfig;
+        }
+        // this.dialogRef.addPanelClass(['lg-w-45-per']);
+    }
+    ngOnInit() {
+        this.t = this.data?.t || {};
+        this.columns = JSON.parse(JSON.stringify(this.data.columns));
+        this.displayedColumns = JSON.parse(JSON.stringify(this.data.displayColumns));
+        this.displayedColumns = this.data.displayColumns;
+        if (this.data?.defaultSelectedState == null || this.data?.defaultSelectedState == 'undefined') {
+            this.data.defaultSelectedState = true;
+        }
+        if (this.data?.selectedTemplateId && this.displayedColumns?.length) {
+            this.columns = this.helper.sortArrayByOrder(JSON.parse(JSON.stringify(this.columns)), JSON.parse(JSON.stringify(this.displayedColumns)));
+        }
+        this.listComponentColumns = this.columns.map((col, ndx) => ({ id: ndx + 1, isSelected: this.data?.defaultSelectedState === true ? true : (this.displayedColumns?.indexOf(col) >= 0 ? true : false), column: col }));
+        this.createForm();
+        // this.store.select('auth').subscribe((authState: fromAuth.State) => {
+        //   console.log('Current AuthState:', authState);
+        //   if(authState?.user?.id){
+        //     this.userId = authState.user.id;
+        //   }
+        // })
+    }
+    ngAfterViewInit() {
+        // this.translocoService.selectTranslate('lang', {}, 'shared').subscribe((translation: string) => {
+        //   this.tl = this.translocoService.translateObject('createColumnsTemplateComponent', {}, 'shared');
+        // });
+    }
+    createForm() {
+        this.form = new FormGroup({
+            name: new FormControl(this.data?.name ?? '', Validators.required),
+            enableStickiness: new FormControl(true),
+            fromStartColumnNumber: new FormControl(this.data?.fromStartColumnNumber ? Number(this.data?.fromStartColumnNumber) : 0, Validators.required),
+            fromEndColumnNumber: new FormControl(this.data?.fromEndColumnNumber ? Number(this.data?.fromEndColumnNumber) : 0, Validators.required),
+        });
+    }
+    get name() {
+        return this.form.get('name');
+    }
+    get listComponentColumnsTemplateName() {
+        return this.name.value;
+    }
+    get orgDisplayColumns() {
+        return this.displayedColumns;
+    }
+    drop(event) {
+        moveItemInArray(this.listComponentColumns, event.previousIndex, event.currentIndex);
+    }
+    onSubmit() {
+        const orgDisplayColumns = this.orgDisplayColumns;
+        if (this.form.invalid) {
+            return;
+        }
+        //  Get selected columns (first filter on selected column and then get column array)
+        this.displayedColumns = this.listComponentColumns.filter((r) => { if (r.isSelected)
+            return r.column; }).map((r) => r.column);
+        if (this.displayedColumns.length <= 0) {
+            this.snackBar.open("Please select at least one column", "ok", {
+                duration: 4000
+            });
+            return;
+        }
+        console.log('new and org display columns: ', this.displayedColumns, orgDisplayColumns);
+        this.acceptTemplateNameAndSave();
+    }
+    acceptTemplateNameAndSave() {
+        let data = {
+            listComponentName: this.data.listComponentName,
+            name: this.name.getRawValue(),
+            enableStickiness: this.form.getRawValue().enableStickiness,
+            fromStartColumnNumber: this.form.getRawValue().fromStartColumnNumber,
+            fromEndColumnNumber: this.form.getRawValue().fromEndColumnNumber,
+            defaultColumns: this.columns.join(),
+            displayColumns: this.displayedColumns.join()
+        };
+        console.log('save value: ', data);
+        this.savingTemplate = true;
+        this.loading = true;
+        if (this.data?.selectedTemplateId) {
+            this.userCustomizationService.updateColumnsTemplate(this.columnCustomizationUrlConfig.update, { id: this.data?.selectedTemplateId, ...data }).subscribe(r => {
+                console.log("add response: ", r);
+                // this.loading = false;
+                this.helper.showSuccessMsg(r.message, 'Success');
+                let selectedTemplate = {
+                    ...r.data,
+                    ...data,
+                    isUpdated: true,
+                };
+                this.onClose(selectedTemplate);
+            }, err => {
+                this.loading = false;
+                this.savingTemplate = false;
+                this.helper.showHttpErrorMsg(err);
+            });
+        }
+        else {
+            this.userCustomizationService.addColumnsTemplate(this.columnCustomizationUrlConfig.add, data).subscribe(r => {
+                console.log("add response: ", r);
+                // this.loading = false;
+                this.helper.showSuccessMsg(r.message, 'Success');
+                let selectedTemplate = {
+                    ...r.data,
+                    ...data
+                };
+                this.onClose(selectedTemplate);
+            }, err => {
+                console.log(err);
+                this.loading = false;
+                this.savingTemplate = false;
+                this.helper.showHttpErrorMsg(err);
+            });
+        }
+    }
+    onChangeColumnStatus(status, data) {
+        if (status == false) {
+            let leftColumn = data.id;
+            let rightColumn = this.listComponentColumns?.length - (data.id - 1);
+            let formValue = this.form.getRawValue();
+            if (formValue?.fromStartColumnNumber == leftColumn) {
+                this.form.patchValue({
+                    fromStartColumnNumber: 0
+                });
+            }
+            if (formValue?.fromEndColumnNumber == rightColumn) {
+                this.form.patchValue({
+                    fromEndColumnNumber: 0
+                });
+            }
+        }
+    }
+    onClose(data = null) {
+        this.dialogRef.close(data);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: CreateColumnsTemplateComponent, deps: [{ token: i1$1.MatDialogRef }, { token: TisHelperService }, { token: i1$2.MatSnackBar }, { token: UserCustomizationService }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: CreateColumnsTemplateComponent, isStandalone: false, selector: "app-create-columns-template", ngImport: i0, template: "\n<form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\n    <h1 mat-dialog-title>\n        {{t('createColumnsTemplate.title')}}\n        <mat-icon (click)=\"onClose()\" class=\"tis-curser-pointer\">clear</mat-icon>\n    </h1>\n    <div class=\"px-6 pt-4\">\n        <mat-form-field class=\"w-full tis-mat-form-field\" appearance=\"outline\">\n            <mat-label>{{t('createColumnsTemplate.templateName')}}</mat-label>\n            <input matInput formControlName=\"name\" placeholder=\"{{t('createColumnsTemplate.enterTemplateName')}}\" />\n        </mat-form-field>\n    </div>\n\n    <mat-dialog-content [appScrolling]=\"true\" class=\"w-100 p-0 m-0\" style=\"max-height: 60vh !important;\">\n        <div cdkDropList class=\"example-list\" (cdkDropListDropped)=\"drop($event)\">\n            <div class=\"example-box\" *ngFor=\"let item of listComponentColumns, let ndx = index\" cdkDrag>\n                <div class=\"w-full flex flex-row items-center justify-between\">\n                    <div class=\"flex flex-row items-center\">\n                        <mat-icon cdkDragHandle class=\"tis-curser-pointer\" style=\"color: rgba(0, 0, 0, 0.54); font-size: 19px; width: 19px; height: 19px;\">drag_indicator</mat-icon>\n                        <span *ngIf=\"!data?.skipTranslation\">{{t(item.column)}}</span>\n                        <span *ngIf=\"data?.skipTranslation\">{{customColumns[item.column]}}</span>\n                    </div>\n                    <mat-checkbox color=\"primary\" [(ngModel)]=\"item.isSelected\" (ngModelChange)=\"onChangeColumnStatus($event, item)\" [ngModelOptions]=\"{standalone: true}\"></mat-checkbox>\n                </div>\n            </div>\n        </div>\n    </mat-dialog-content>\n\n    @if(form.value?.enableStickiness){\n        <div class=\"px-6 pt-4\">\n            <div class=\"grid grid-cols-2 gap-4\">\n                <mat-form-field class=\"w-full tis-mat-form-field\" appearance=\"outline\">\n                    <mat-label>{{t('createColumnsTemplate.freezeColumnFromLeft')}}</mat-label>\n                    <mat-select formControlName=\"fromStartColumnNumber\">\n                        <mat-option [value]=\"0\">None</mat-option>\n                        @for (item of listComponentColumns; track item; let i = $index; let l = $last;) {\n                            @if(item?.isSelected){\n                                <mat-option [value]=\"(i+1)\">\n                                    <span *ngIf=\"!data?.skipTranslation\">{{t(item.column)}}</span>\n                                    <span *ngIf=\"data?.skipTranslation\">{{customColumns[item.column]}}</span>\n                                </mat-option>\n                            }\n                        }\n                    </mat-select>\n                </mat-form-field>\n                <mat-form-field class=\"w-full tis-mat-form-field\" appearance=\"outline\">\n                    <mat-label>{{t('createColumnsTemplate.freezeColumnFromRight')}}</mat-label>\n                    <mat-select formControlName=\"fromEndColumnNumber\">\n                        <mat-option [value]=\"0\">None</mat-option>\n                        @for (item of listComponentColumns; track item; let i = $index; let l = $last;) {\n                            @if(item?.isSelected){\n                                <mat-option [value]=\"(listComponentColumns?.length - i)\">\n                                    <span *ngIf=\"!data?.skipTranslation\">{{t(item.column)}}</span>\n                                    <span *ngIf=\"data?.skipTranslation\">{{customColumns[item.column]}}</span>\n                                </mat-option>\n                            }\n                        }\n                    </mat-select>\n                </mat-form-field>\n            </div>\n        </div>\n    }\n\n    <div mat-dialog-actions>\n        <button mat-button type=\"button\" class=\"tis-text-upper tis-btn-primary\" mat-dialog-close [disabled]=\"loading\">{{t?.cancel}}</button>\n        <button mat-flat-button type=\"submit\" class=\"tis-text-upper tis-btn-filled-primary\" cdkFocusInitial [disabled]=\"savingTemplate\">\n            {{data?.selectedTemplateId ? t('createColumnsTemplate.update') : t('createColumnsTemplate.save')}}\n            @if(savingTemplate){\n                <i class=\"fas fa-spinner fa-spin\"></i>\n            }\n        </button>\n    </div>\n</form>", styles: [".example-container{width:400px;max-width:100%;margin:0 25px 25px 0;display:inline-block;vertical-align:top}.example-list{min-height:60px;background:#fff;border-radius:4px;overflow:hidden;display:block}.example-box{border-bottom:solid 1px #EEE;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;background:#fff;font-size:14px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.mt-20{margin-top:20px}.mt-40{margin-top:40px}.w-10{width:10%}.w-100{width:100%}.container{width:100%;display:flex;align-items:center}.drag-index{font-size:16px;font-weight:500;padding:8px;width:40px;text-align:end}.drag-icon{background-color:#36834f;color:#fff;text-align:center;position:relative}.drag-icon i{padding-top:3px;cursor:move}.drag-content{margin-top:8px;padding-left:10px}.drag-content span{vertical-align:text-bottom;padding-left:5px}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "component", type: i9.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { 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", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i4$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { 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.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i12.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i13.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i13.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i13.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: ScrollingDirective, selector: "[appScrolling]", inputs: ["appScrolling"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: CreateColumnsTemplateComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-create-columns-template', standalone: false, template: "\n<form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\n    <h1 mat-dialog-title>\n        {{t('createColumnsTemplate.title')}}\n        <mat-icon (click)=\"onClose()\" class=\"tis-curser-pointer\">clear</mat-icon>\n    </h1>\n    <div class=\"px-6 pt-4\">\n        <mat-form-field class=\"w-full tis-mat-form-field\" appearance=\"outline\">\n            <mat-label>{{t('createColumnsTemplate.templateName')}}</mat-label>\n            <input matInput formControlName=\"name\" placeholder=\"{{t('createColumnsTemplate.enterTemplateName')}}\" />\n        </mat-form-field>\n    </div>\n\n    <mat-dialog-content [appScrolling]=\"true\" class=\"w-100 p-0 m-0\" style=\"max-height: 60vh !important;\">\n        <div cdkDropList class=\"example-list\" (cdkDropListDropped)=\"drop($event)\">\n            <div class=\"example-box\" *ngFor=\"let item of listComponentColumns, let ndx = index\" cdkDrag>\n                <div class=\"w-full flex flex-row items-center justify-between\">\n                    <div class=\"flex flex-row items-center\">\n                        <mat-icon cdkDragHandle class=\"tis-curser-pointer\" style=\"color: rgba(0, 0, 0, 0.54); font-size: 19px; width: 19px; height: 19px;\">drag_indicator</mat-icon>\n                        <span *ngIf=\"!data?.skipTranslation\">{{t(item.column)}}</span>\n                        <span *ngIf=\"data?.skipTranslation\">{{customColumns[item.column]}}</span>\n                    </div>\n                    <mat-checkbox color=\"primary\" [(ngModel)]=\"item.isSelected\" (ngModelChange)=\"onChangeColumnStatus($event, item)\" [ngModelOptions]=\"{standalone: true}\"></mat-checkbox>\n                </div>\n            </div>\n        </div>\n    </mat-dialog-content>\n\n    @if(form.value?.enableStickiness){\n        <div class=\"px-6 pt-4\">\n            <div class=\"grid grid-cols-2 gap-4\">\n                <mat-form-field class=\"w-full tis-mat-form-field\" appearance=\"outline\">\n                    <mat-label>{{t('createColumnsTemplate.freezeColumnFromLeft')}}</mat-label>\n                    <mat-select formControlName=\"fromStartColumnNumber\">\n                        <mat-option [value]=\"0\">None</mat-option>\n                        @for (item of listComponentColumns; track item; let i = $index; let l = $last;) {\n                            @if(item?.isSelected){\n                                <mat-option [value]=\"(i+1)\">\n                                    <span *ngIf=\"!data?.skipTranslation\">{{t(item.column)}}</span>\n                                    <span *ngIf=\"data?.skipTranslation\">{{customColumns[item.column]}}</span>\n                                </mat-option>\n                            }\n                        }\n                    </mat-select>\n                </mat-form-field>\n                <mat-form-field class=\"w-full tis-mat-form-field\" appearance=\"outline\">\n                    <mat-label>{{t('createColumnsTemplate.freezeColumnFromRight')}}</mat-label>\n                    <mat-select formControlName=\"fromEndColumnNumber\">\n                        <mat-option [value]=\"0\">None</mat-option>\n                        @for (item of listComponentColumns; track item; let i = $index; let l = $last;) {\n                            @if(item?.isSelected){\n                                <mat-option [value]=\"(listComponentColumns?.length - i)\">\n                                    <span *ngIf=\"!data?.skipTranslation\">{{t(item.column)}}</span>\n                                    <span *ngIf=\"data?.skipTranslation\">{{customColumns[item.column]}}</span>\n                                </mat-option>\n                            }\n                        }\n                    </mat-select>\n                </mat-form-field>\n            </div>\n        </div>\n    }\n\n    <div mat-dialog-actions>\n        <button mat-button type=\"button\" class=\"tis-text-upper tis-btn-primary\" mat-dialog-close [disabled]=\"loading\">{{t?.cancel}}</button>\n        <button mat-flat-button type=\"submit\" class=\"tis-text-upper tis-btn-filled-primary\" cdkFocusInitial [disabled]=\"savingTemplate\">\n            {{data?.selectedTemplateId ? t('createColumnsTemplate.update') : t('createColumnsTemplate.save')}}\n            @if(savingTemplate){\n                <i class=\"fas fa-spinner fa-spin\"></i>\n            }\n        </button>\n    </div>\n</form>", styles: [".example-container{width:400px;max-width:100%;margin:0 25px 25px 0;display:inline-block;vertical-align:top}.example-list{min-height:60px;background:#fff;border-radius:4px;overflow:hidden;display:block}.example-box{border-bottom:solid 1px #EEE;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;background:#fff;font-size:14px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.mt-20{margin-top:20px}.mt-40{margin-top:40px}.w-10{width:10%}.w-100{width:100%}.container{width:100%;display:flex;align-items:center}.drag-index{font-size:16px;font-weight:500;padding:8px;width:40px;text-align:end}.drag-icon{background-color:#36834f;color:#fff;text-align:center;position:relative}.drag-icon i{padding-top:3px;cursor:move}.drag-content{margin-top:8px;padding-left:10px}.drag-content span{vertical-align:text-bottom;padding-left:5px}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.MatDialogRef }, { type: TisHelperService }, { type: i1$2.MatSnackBar }, { type: UserCustomizationService }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }] });
+
+class TisColumnsBtnComponent {
+    helper;
+    userCustomizationService;
+    dialog;
+    static COMPONENT_NAME = 'TisColumnsBtnComponent';
+    columnCustomizationUrlConfig;
+    t = {};
+    componentName;
+    defaultColumns;
+    columns;
+    skipTranslation = false;
+    customColumns;
+    displayedColumnsChange = new EventEmitter();
+    fromStartColumnNumberChange = new EventEmitter();
+    fromEndColumnNumberChange = new EventEmitter();
+    selectedTemplate = {
+        id: -1,
+        name: 'Default'
+    };
+    displayedColumns = [];
+    templates = [];
+    isDeleteTemplate = false;
+    isEditTemplate = false;
+    constructor(helper, userCustomizationService, dialog) {
+        this.helper = helper;
+        this.userCustomizationService = userCustomizationService;
+        this.dialog = dialog;
+    }
+    ngOnInit() {
+        this.getColumnsTemplates();
+        // setTimeout(() => {
+        //   this.createNewTemplateDialog();
+        // }, 2000);
+    }
+    createNewTemplateDialog(stData = null) {
+        if (!this.componentName)
+            return;
+        let data = {
+            name: stData ? stData.name : null,
+            enableStickiness: stData ? stData.enableStickiness : false,
+            fromStartColumnNumber: stData ? stData.fromStartColumnNumber : 0,
+            fromEndColumnNumber: stData ? stData.fromEndColumnNumber : 0,
+            listComponentName: this.componentName,
+            selectedTemplateId: stData ? stData?.id : null,
+            defaultSelectedState: stData && stData?.id ? false : true,
+            defaultColumns: this.defaultColumns,
+            columns: this.columns,
+            displayColumns: stData ? stData?.displayColumns?.split(',') : this.displayedColumns,
+            t: this.t,
+            skipTranslation: this.skipTranslation,
+            customColumns: this.customColumns
+        };
+        const dialogRef = this.dialog.open(CreateColumnsTemplateComponent, {
+            width: "35%",
+            minWidth: '370px',
+            data: data,
+            panelClass: ['tis-create-new-columns-template'],
+            disableClose: true,
+        });
+        dialogRef.afterClosed().subscribe((res) => {
+            if (res) {
+                console.log("=== createNewTemplateDialog ===", res);
+                if (res?.isUpdated) {
+                    this.templates = this.templates?.map(t => {
+                        if (t.id == res?.id) {
+                            t = res;
+                        }
+                        return t;
+                    });
+                }
+                else {
+                    this.templates = [res, ...this.templates];
+                }
+                this.selectedTemplate = res;
+                this.changeDisplayColumns();
+            }
+        });
+    }
+    getColumnsTemplates() {
+        this.userCustomizationService.getColumnsTemplates(this.columnCustomizationUrlConfig.list, this.componentName).subscribe(r => {
+            console.log("getColumnsTemplates:", r.data);
+            this.templates = r?.data ?? [];
+            setTimeout(() => {
+                this.getSelectedColumnsTemplate();
+            }, 100);
+        });
+    }
+    getSelectedColumnsTemplate() {
+        this.userCustomizationService.getSelectedColumnsTemplate(this.columnCustomizationUrlConfig.getSelectedTemplate, this.componentName).subscribe((r) => {
+            console.log("getSelectedColumnsTemplate:", r.data);
+            if (r?.data && Object.keys(r?.data).length != 0) {
+                if (r.data?.listComponentColumnsTemplateId > 0) {
+                    this.selectedTemplate = this.templates?.find((t) => t.id == r.data?.listComponentColumnsTemplateId);
+                }
+                console.log("getSelectedColumnsTemplate:", this.templates, this.selectedTemplate);
+                this.changeDisplayColumns();
+            }
+        });
+    }
+    onSelectedTemplate(templateId) {
+        setTimeout(() => {
+            if (this.isDeleteTemplate) {
+                console.log("onSelectedTemplate:", this.isDeleteTemplate);
+                let confirmBoxData = {
+                    title: "Delete template",
+                    message: `Are you sure you want to delete this template?`,
+                    iconClass: "tis-text-danger",
+                    icon: "delete",
+                    approveButtonText: "Yes, Confirm",
+                    approveButtonClass: "tis-btn-danger",
+                    cancelButtonText: "Cancel",
+                    cancelButtonClass: "tis-btn-primary"
+                };
+                const dialogRef = this.dialog.open(TisSmartTableConfirmationDialogComponent, {
+                    width: "30%",
+                    minWidth: '370px',
+                    // panelClass: ['tis-simple-confirmation'],
+                    data: confirmBoxData,
+                    disableClose: true,
+                });
+                dialogRef.afterClosed().subscribe((result) => {
+                    console.log("The dialog was closed with result:", result);
+                    if (result) {
+                        this.userCustomizationService.deleteColumnsTemplate(this.columnCustomizationUrlConfig.delete, { id: templateId, isSelectedTemplate: this.selectedTemplate?.id == templateId }).subscribe((r) => {
+                            this.helper.showSuccessMsg('Columns template has been deleted successfully', 'Done');
+                            this.templates.splice(this.templates.findIndex(ee => ee.id == templateId), 1);
+                            if (this.selectedTemplate?.id == templateId) {
+                                this.selectedTemplate = {
+                                    id: -1,
+                                    name: 'Default',
+                                    fromStartColumnNumber: 0,
+                                    fromEndColumnNumber: 0,
+                                };
+                                this.changeDisplayColumns();
+                            }
+                        });
+                    }
+                });
+            }
+            else if (this.isEditTemplate) {
+                console.log("onSelectedTemplate:", this.isEditTemplate);
+                let st = this.templates?.find((t) => t.id == templateId);
+                this.createNewTemplateDialog(st);
+            }
+            else {
+                if (this.selectedTemplate?.id != templateId) {
+                    if (templateId > 0) {
+                        this.selectedTemplate = this.templates?.find((t) => t.id == templateId);
+                    }
+                    else {
+                        this.selectedTemplate = {
+                            id: -1,
+                            name: 'Default'
+                        };
+                    }
+                    this.userCustomizationService.updateSelectedColumnsTemplate(this.columnCustomizationUrlConfig.updateSelectedTemplate, { id: this.selectedTemplate?.id, listComponentName: this.componentName }).subscribe((r) => {
+                        this.changeDisplayColumns();
+                    });
+                }
+            }
+            this.isDeleteTemplate = false;
+            this.isEditTemplate = false;
+        }, 200);
+    }
+    changeDisplayColumns() {
+        if (this.selectedTemplate?.id > 0) {
+            this.displayedColumns = this.selectedTemplate.displayColumns?.split(',');
+        }
+        else {
+            this.displayedColumns = this.defaultColumns;
+        }
+        this.displayedColumnsChange.emit(this.displayedColumns);
+        this.fromStartColumnNumberChange.emit(this.selectedTemplate?.fromStartColumnNumber ?? 0);
+        this.fromEndColumnNumberChange.emit(this.selectedTemplate?.fromEndColumnNumber ?? 0);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TisColumnsBtnComponent, deps: [{ token: TisHelperService }, { token: UserCustomizationService }, { token: i1$1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: TisColumnsBtnComponent, isStandalone: false, selector: "tis-columns-btn", inputs: { columnCustomizationUrlConfig: "columnCustomizationUrlConfig", t: "t", componentName: "componentName", defaultColumns: "defaultColumns", columns: "columns", skipTranslation: "skipTranslation", customColumns: "customColumns" }, outputs: { displayedColumnsChange: "displayedColumnsChange", fromStartColumnNumberChange: "fromStartColumnNumberChange", fromEndColumnNumberChange: "fromEndColumnNumberChange" }, ngImport: i0, template: "<!-- shared.tisColumnsBtnComponent -->\n<button mat-flat-button class=\"tis-text-upper tis-bg-light\" [matMenuTriggerFor]=\"menu\">\n    <mat-icon>view_week</mat-icon>\n    <span class=\"flex flex-row align-center\">\n        {{selectedTemplate?.name}}\n        <mat-icon class=\"tis-expansion-icon\">arrow_drop_down</mat-icon>\n    </span>\n</button>\n<mat-menu #menu=\"matMenu\" class=\"tis-mat-menu\">\n    <button mat-menu-item (click)=\"selectedTemplate?.id != -1 ? onSelectedTemplate(-1) : null\">\n        <mat-icon>{{selectedTemplate?.id == -1 ? 'done': ''}}</mat-icon>\n        Default\n    </button>\n    <button mat-menu-item *ngFor=\"let template of templates\" (click)=\"onSelectedTemplate(template?.id)\">\n        <mat-icon>{{template?.id == selectedTemplate?.id ? 'done': ''}}</mat-icon>\n        <span class=\"pr-16\">{{template.name}}</span>\n        <mat-icon class=\"absolute right-0 delete\" (click)=\"isDeleteTemplate = true\">delete</mat-icon>\n        <mat-icon class=\"absolute right-8 edit\" (click)=\"isEditTemplate = true\">edit</mat-icon>\n    </button>\n    <mat-divider></mat-divider>\n    <button mat-menu-item class=\"tis-text-upper active\" (click)=\"createNewTemplateDialog()\"><mat-icon>add</mat-icon> {{t('tisColumnsBtnComponent.createNewView')}}</button>\n</mat-menu>", styles: [""], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i7.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i8$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TisColumnsBtnComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tis-columns-btn', standalone: false, template: "<!-- shared.tisColumnsBtnComponent -->\n<button mat-flat-button class=\"tis-text-upper tis-bg-light\" [matMenuTriggerFor]=\"menu\">\n    <mat-icon>view_week</mat-icon>\n    <span class=\"flex flex-row align-center\">\n        {{selectedTemplate?.name}}\n        <mat-icon class=\"tis-expansion-icon\">arrow_drop_down</mat-icon>\n    </span>\n</button>\n<mat-menu #menu=\"matMenu\" class=\"tis-mat-menu\">\n    <button mat-menu-item (click)=\"selectedTemplate?.id != -1 ? onSelectedTemplate(-1) : null\">\n        <mat-icon>{{selectedTemplate?.id == -1 ? 'done': ''}}</mat-icon>\n        Default\n    </button>\n    <button mat-menu-item *ngFor=\"let template of templates\" (click)=\"onSelectedTemplate(template?.id)\">\n        <mat-icon>{{template?.id == selectedTemplate?.id ? 'done': ''}}</mat-icon>\n        <span class=\"pr-16\">{{template.name}}</span>\n        <mat-icon class=\"absolute right-0 delete\" (click)=\"isDeleteTemplate = true\">delete</mat-icon>\n        <mat-icon class=\"absolute right-8 edit\" (click)=\"isEditTemplate = true\">edit</mat-icon>\n    </button>\n    <mat-divider></mat-divider>\n    <button mat-menu-item class=\"tis-text-upper active\" (click)=\"createNewTemplateDialog()\"><mat-icon>add</mat-icon> {{t('tisColumnsBtnComponent.createNewView')}}</button>\n</mat-menu>" }]
+        }], ctorParameters: () => [{ type: TisHelperService }, { type: UserCustomizationService }, { type: i1$1.MatDialog }], propDecorators: { columnCustomizationUrlConfig: [{
+                type: Input,
+                args: [{ required: true }]
+            }], t: [{
+                type: Input
+            }], componentName: [{
+                type: Input,
+                args: [{ required: true }]
+            }], defaultColumns: [{
+                type: Input,
+                args: [{ required: true }]
+            }], columns: [{
+                type: Input,
+                args: [{ required: true }]
+            }], skipTranslation: [{
+                type: Input
+            }], customColumns: [{
+                type: Input
+            }], displayedColumnsChange: [{
+                type: Output
+            }], fromStartColumnNumberChange: [{
+                type: Output
+            }], fromEndColumnNumberChange: [{
+                type: Output
+            }] } });
+
+class TisDatePipe {
+    transform(value, ...args) {
+        if (typeof value == 'string' && value !== '') {
+            return DateTime.fromMillis(+value).toFormat('dd MMM yyyy');
+        }
+        else if (typeof value == 'number') {
+            return DateTime.fromMillis(value).toFormat('dd MMM yyyy');
+        }
+        else if (value instanceof Date) {
+            return DateTime.fromJSDate(value).toFormat('dd MMM yyyy');
+        }
+        else {
+            return 'Invalid Date';
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TisDatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.7", ngImport: i0, type: TisDatePipe, isStandalone: false, name: "tisDate" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TisDatePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'tisDate',
+                    standalone: false
+                }]
+        }] });
+
+class TisDateTimePipe {
+    transform(value, ...args) {
+        if (typeof value == 'string' && value !== '') {
+            return DateTime.fromMillis(+value).toFormat('dd MMM yyyy hh:mm a');
+        }
+        else if (typeof value == 'number') {
+            return DateTime.fromMillis(value).toFormat('dd MMM yyyy hh:mm a');
+        }
+        else {
+            return 'Invalid Date';
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TisDateTimePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.7", ngImport: i0, type: TisDateTimePipe, isStandalone: false, name: "tisDateTime" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TisDateTimePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'tisDateTime',
+                    standalone: false
+                }]
+        }] });
+
+class TisDateTimeWithSecondsPipe {
+    transform(value, ...args) {
+        if (typeof value == 'string' && value !== '') {
+            return DateTime.fromMillis(+value).toFormat('dd MMM yyyy hh:mm:ss a');
+        }
+        else if (typeof value == 'number') {
+            return DateTime.fromMillis(value).toFormat('dd MMM yyyy hh:mm:ss a');
+        }
+        else {
+            return 'Invalid Date';
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TisDateTimeWithSecondsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.7", ngImport: i0, type: TisDateTimeWithSecondsPipe, isStandalone: false, name: "tisDateTimeWithSeconds" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TisDateTimeWithSecondsPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'tisDateTimeWithSeconds',
+                    standalone: false
+                }]
+        }] });
+
+class TisSmartTableViewerComponent {
+    dialog;
+    apiService;
+    route;
+    router;
+    location;
+    breakpointObserver;
+    homeUrl = '';
+    columnCustomizationUrlConfig;
+    t = {};
+    componentName = '';
+    mainTitle;
+    searchPlaceholder;
+    breadcrumbs = [];
+    hideHeader = false;
+    hideTableHeader = false;
+    hidePaginator = false;
+    keepFilterInUrl = true;
+    displayColumnsSelectionButton = true;
+    loadDataApiBaseUrl;
+    startStickyColumnCount;
+    endStickyColumnCount;
+    loaderPosition = 'top';
+    dataNotFoundConfig = {
+        title: 'No Data Found',
+        desc: 'There is no data. Please click on button to add',
+        btnText: 'Add New',
+        btnUrl: '',
+        btnClick: null,
+        secondBtnText: '',
+        secondBtnUrl: '',
+        secondBtnClick: null
+    };
+    showFilterButtonSection;
+    columnsCodeMapping;
+    autoRenderColumns;
+    templateRenderColumns;
+    defaultDisplayedColumns;
+    displayedColumns;
+    defaultColumns;
+    columns;
+    displayedColumnsChange = new EventEmitter();
+    usersColumnSelectionDetail;
+    defaultSortObj = {};
+    sortObj = {};
+    sortObjChange = new EventEmitter();
+    loadingSpinnerDiameter = 30;
+    pageSizeOptions = [5, 10, 25, 100];
+    pageSize = 10;
+    pageSizeChange = new EventEmitter();
+    useGlobalPageSize = true;
+    pageIndex = 0;
+    pageIndexChange = new EventEmitter();
+    filterFormGroup = new FormGroup({});
+    rowsConfig = {
+        backgroundApplyFunction: () => null // Default blank function
+    };
+    selectedFilterValues = [];
+    finalSelectedFilterValuesToDisplay = [];
+    selectedFilterGroupedValues = [];
+    isShowFilter = false;
+    filterFormGroupSubscription;
+    filterHasNonEmptyValue = false;
+    filterApplied = false;
+    resetFlag = false;
+    initialLoading = true;
+    filterFromQueryParams = {};
+    sortFromQueryParams = {};
+    search = '';
+    searchCtrl = new FormControl();
+    _onDestroy = new Subject();
+    dataSource;
+    _sort;
+    _sortSubscription;
+    set sort(value) {
+        this._sort = value;
+        if (this._sort) {
+            if (this._sortSubscription) {
+                this._sortSubscription.unsubscribe();
+            }
+            this._sortSubscription = this._sort.sortChange.pipe(takeUntil(this._onDestroy)).subscribe((ch) => {
+                this.handleSortingChanges(ch);
+            });
+        }
+    }
+    _paginator;
+    _paginatorSubscription;
+    set paginator(value) {
+        this._paginator = value;
+        if (this._paginator) {
+            if (this._paginatorSubscription) {
+                this._paginatorSubscription.unsubscribe();
+            }
+            this._paginatorSubscription = this._paginator.page.pipe(takeUntil(this._onDestroy), tap(() => {
+                this.onPaginationChanges();
+            })).subscribe();
+        }
+    }
+    loadingSubscription;
+    dataLengthSubscription;
+    enableRowsSelection = false;
+    enableAllRowsSelection = false;
+    onlySingleSelection = false;
+    selectedRows;
+    selectedRowsChange = new EventEmitter();
+    selection = new SelectionModel(true, []);
+    selectedIds = new Set();
+    isAllRowsSelected = false;
+    enableDragNDrop = false;
+    listDataSequenceChange = new EventEmitter();
+    isHandset$;
+    isMobile = false;
+    constructor(
+    // private userCustomizationService: UserCustomizationService,
+    dialog, apiService, route, router, location, breakpointObserver) {
+        this.dialog = dialog;
+        this.apiService = apiService;
+        this.route = route;
+        this.router = router;
+        this.location = location;
+        this.breakpointObserver = breakpointObserver;
+        this.selection.changed.subscribe(change => {
+            change.added.forEach(item => this.selectedIds.add(item['id']));
+            change.removed.forEach(item => this.selectedIds.delete(item['id']));
+        });
+    }
+    ngOnInit() {
+        this.isHandset$ = this.breakpointObserver.observe([Breakpoints.Handset])
+            .pipe(map(result => {
+            console.log("== result ==", result);
+            return result.matches;
+        }), shareReplay());
+        this.isHandset$.subscribe(r => {
+            console.log('IS HANDSET:', r);
+            this.isMobile = r;
+        });
+        this.setDefaultColumns();
+        this.getHomeUrl();
+        this.route.queryParams.subscribe(qp => {
+            this.filterFromQueryParams = {};
+            this.sortFromQueryParams = {};
+            if (this.keepFilterInUrl) {
+                for (const key in qp) {
+                    if (qp.hasOwnProperty(key) && qp[key] && qp[key] != '' && qp[key] != 'null' && qp[key] != 'undefined') {
+                        let fixedKeyMatched = false;
+                        if (key.toLowerCase() === 'pageIndex'.toLowerCase()) {
+                            this.pageIndex = Number(qp[key]);
+                            fixedKeyMatched = true;
+                        }
+                        if (key.toLowerCase() === 'pageSize'.toLowerCase()) {
+                            this.pageSize = Number(qp[key]);
+                            fixedKeyMatched = true;
+                        }
+                        if (key.toLowerCase() === 'sortBy'.toLowerCase()) {
+                            this.sortFromQueryParams.sortBy = qp[key];
+                            fixedKeyMatched = true;
+                        }
+                        if (key.toLowerCase() === 'sortOrder'.toLowerCase()) {
+                            this.sortFromQueryParams.sortOrder = qp[key];
+                            fixedKeyMatched = true;
+                        }
+                        if (key.toLowerCase() === 'search'.toLowerCase()) {
+                            this.search = qp[key];
+                            this.searchCtrl.patchValue(this.search);
+                            fixedKeyMatched = true;
+                        }
+                        if (key.toLowerCase().includes('date') && qp[key].length == 13) { // To Check if it is a date
+                            // this.filterFromQueryParams[key] = moment(Number(qp[key]));
+                            this.filterFromQueryParams[key] = DateTime.fromMillis(Number(qp[key]));
+                            fixedKeyMatched = true;
+                        }
+                        if (!fixedKeyMatched) {
+                            if ((qp[key]).includes(',')) {
+                                this.filterFromQueryParams[key] = (qp[key]).split(',');
+                            }
+                            else {
+                                this.filterFromQueryParams[key] = qp[key];
+                            }
+                        }
+                        // Transform Data, before patching in filter Form
+                        let mapping = this.columnsCodeMapping.find(ccm => ccm.filterFormKey == key);
+                        if (mapping?.transformQueryParamFn) {
+                            this.filterFromQueryParams[key] = mapping.transformQueryParamFn(this.filterFromQueryParams[key]);
+                        }
+                    }
+                }
+                this.filterFormGroup.patchValue(this.filterFromQueryParams);
+                if (this.sortFromQueryParams && this.sortFromQueryParams.sortBy && this.sortFromQueryParams.sortOrder) {
+                    this.sortObj = this.sortFromQueryParams;
+                    console.log('[table-list-view-wrapper]: Emitting Sort Obj from QP to parent component:', this.sortFromQueryParams);
+                    this.sortObjChange.emit(this.sortObj);
+                }
+            }
+            let filterHasNonEmptyValue = Object.values(this.filterFromQueryParams).some(value => value !== null && value !== undefined && value !== '');
+            if (filterHasNonEmptyValue) {
+                this.filterApplied = true;
+            }
+            this.getList();
+        });
+        this.searchCtrl.valueChanges
+            .pipe(takeUntil(this._onDestroy), debounceTime(400), distinctUntilChanged())
+            .subscribe((search) => {
+            this.search = search;
+            this.resetFlag = true; // B/c every time search is made, make sure we go to first page...
+            this.getList(false);
+        });
+    }
+    ngOnChanges(changes) {
+        console.log(`[table-list-view-wrapper]: ngOnChanges:`, changes);
+        if (changes['defaultDisplayedColumns']) {
+            console.log(`[table-list-view-wrapper]: changes['defaultDisplayedColumns']:`, changes['defaultDisplayedColumns']);
+            this.handleDisplayedColumns();
+        }
+        if (changes['columnsCodeMapping']) {
+            console.log(`[table-list-view-wrapper]: changes['columnsCodeMapping']:`, changes['columnsCodeMapping']);
+            this.columnsCodeMapping = changes['columnsCodeMapping'].currentValue;
+            this.handleDisplayedColumns();
+            this.columns = this.columnsCodeMapping.map(c => c.name);
+            this.autoRenderColumns = this.columnsCodeMapping.filter(c => c.hasOwnProperty('valueKey'));
+            this.templateRenderColumns = this.columnsCodeMapping.filter(c => c.hasOwnProperty('template'));
+        }
+        if (changes['pageIndex']) {
+            this.pageIndex = changes['pageIndex'].currentValue;
+        }
+        if (changes['pageSize']) {
+            if (!changes['pageSize'].isFirstChange) {
+                this.pageSize = changes['pageSize'].currentValue;
+            }
+            else {
+                if (this.useGlobalPageSize) {
+                    let userDefaultPageSize = getFromLocalStorageWithExpiry('user_pagination_page_size');
+                    this.pageSize = userDefaultPageSize ? userDefaultPageSize : changes['pageSize'].currentValue;
+                }
+            }
+        }
+        if (changes['loadDataApiBaseUrl']) {
+            if (changes['loadDataApiBaseUrl'].currentValue) {
+                console.log(`[table-list-view-wrapper]: Datasource changes['loadDataApiBaseUrl'].currentValue:`, changes['loadDataApiBaseUrl'].currentValue);
+                if (this.loadingSubscription) {
+                    this.loadingSubscription.unsubscribe();
+                }
+                if (this.dataLengthSubscription) {
+                    this.dataLengthSubscription.unsubscribe();
+                }
+                this.dataSource = new ApiDataSource(this.apiService);
+                console.log('[table-list-view-wrapper]: Datasource Initialized:', this.dataSource);
+                this.loadingSubscription = this.dataSource.loading$.subscribe(loading => {
+                    console.log('[table-list-view-wrapper]: dataSource loading:', loading);
+                    if (!loading && this._paginator) {
+                        this._paginator.pageIndex = this.pageIndex;
+                        this._paginator.pageSize = this.pageSize;
+                        this.checkAllRowsSelected();
+                    }
+                });
+                this.dataLengthSubscription = this.dataSource.totalDataLength$.subscribe((total) => {
+                    console.log('[table-list-view-wrapper]: dataSource total:', total);
+                    if (total !== null) {
+                        this.initialLoading = false;
+                        // console.log('[table-list-view-wrapper]: dataSource total total:', total);
+                    }
+                });
+            }
+        }
+        if (changes['filterFormGroup']) {
+            if (this.filterFormGroupSubscription) {
+                this.filterFormGroupSubscription.unsubscribe();
+            }
+            this.filterFormGroupSubscription = this.filterFormGroup.valueChanges
+                .pipe(takeUntil(this._onDestroy), distinctUntilChanged()).subscribe(val => {
+                this.filterHasNonEmptyValue = Object.values(val).some(value => value !== null && value !== undefined && value !== '');
+            });
+        }
+        if (changes['selectedRows']) {
+            this.selectedRows = changes['selectedRows'].currentValue;
+            if (this.selectedRows && this.selectedRows.length) {
+                // TODO:: Leave for now.....  (Not able to decide whether in future we need to pass whole row or ids only)
+            }
+        }
+        if (changes['defaultSortObj']?.currentValue) {
+            this.defaultSortObj = changes['defaultSortObj'].currentValue;
+            this.handleSortingChanges({
+                direction: this.defaultSortObj.sortOrder,
+                active: this.defaultSortObj.sortBy
+            });
+        }
+    }
+    ngOnDestroy() {
+        this._sortSubscription?.unsubscribe();
+        this._paginatorSubscription?.unsubscribe();
+        this.loadingSubscription?.unsubscribe();
+        this.dataLengthSubscription?.unsubscribe();
+        this.filterFormGroupSubscription?.unsubscribe();
+    }
+    setDefaultColumns() {
+        if (this.defaultDisplayedColumns && this.defaultDisplayedColumns.length) {
+            this.defaultColumns = this.defaultDisplayedColumns;
+        }
+        else {
+            this.defaultColumns = this.columnsCodeMapping.map(c => c.name);
+        }
+    }
+    handleDisplayedColumns() {
+        if (this.defaultDisplayedColumns && this.defaultDisplayedColumns.length) {
+            const columnsSet = new Set(this.columnsCodeMapping.map(ccm => ccm.name));
+            this.displayedColumns = this.defaultDisplayedColumns.filter(c => columnsSet.has(c));
+        }
+        else {
+            this.displayedColumns = this.columnsCodeMapping.map(c => c.name);
+        }
+        if (this.enableRowsSelection) {
+            this.displayedColumns = ['Select', ...this.displayedColumns];
+        }
+        if (this.enableDragNDrop) {
+            this.displayedColumns = ['drag', ...this.displayedColumns];
+        }
+        this.displayedColumnsChange.emit(this.displayedColumns);
+    }
+    handleSortingChanges(ch) {
+        this.sortObj = { sortOrder: ch.direction, sortBy: this.columnsCodeMapping.find(c => c.name === ch.active)?.serverKeyCode };
+        this.sortFromQueryParams.sortBy = this.sortObj.sortBy;
+        this.sortFromQueryParams.sortOrder = this.sortObj.sortOrder;
+        this.resetFlag = true;
+        this.getList();
+    }
+    getHomeUrl() {
+        let pathname = window.location.pathname;
+        // console.log("=== app-table-list-view-wrapper :: pathname ===", pathname);
+        this.homeUrl = `/${pathname.split('/')[1]}`;
+    }
+    getNestedValue(obj, path) {
+        if (!path)
+            return null;
+        // If there is no '.', just return the direct property
+        if (!path.includes('.')) {
+            return obj ? obj[path] : null;
+        }
+        // Otherwise, traverse the nested properties
+        return path.split('.').reduce((acc, part) => acc && acc[part], obj);
+    }
+    groupByFormControlAttributes(data) {
+        const groups = {};
+        data.forEach(item => {
+            if (item.formControlType == 'input') {
+                // Do Nothing...
+            }
+            if (item.formControlType == 'checkbox') {
+                // Do Nothing...
+            }
+            if (item.formControlType == 'date') {
+                item.valueKey = DateTime.fromJSDate(item.value).toFormat('dd-MM-yyyy');
+            }
+            if (item.formControlType == 'date-time') {
+                item.valueKey = DateTime.fromJSDate(item.value).toFormat('dd-MM-yyyy HH:mm');
+            }
+            const key = `${item.formControlName}-${item.formControlType}`;
+            if (!groups[key]) {
+                groups[key] = {
+                    formControlName: item.formControlName,
+                    formControlType: item.formControlType,
+                    arrValues: []
+                };
+            }
+            const isSingleValue = item.isSingleValue ?? ['input', 'radio', 'date', 'date-time', 'toggle'].includes(item.formControlType);
+            // Check if only the last value should be kept due to isSingleValue or duplicated value/valueKey
+            if (isSingleValue) {
+                groups[key].arrValues = [item]; // Replace with the current item
+            }
+            else {
+                // Check for duplicate value and valueKey in the current array
+                const existingIndex = groups[key].arrValues.findIndex(x => x.value === item.value && x.valueKey === item.valueKey);
+                if (existingIndex !== -1) {
+                    groups[key].arrValues[existingIndex] = item; // Replace the duplicate
+                }
+                else {
+                    groups[key].arrValues.push(item); // Add new item
+                }
+            }
+        });
+        return Object.values(groups);
+    }
+    updateSelectedFilterValues(values) {
+        let currentFormControlName;
+        if (Array.isArray(values)) {
+            this.selectedFilterGroupedValues = this.groupByFormControlAttributes(values);
+            currentFormControlName = values[0]?.formControlName;
+        }
+        else {
+            currentFormControlName = values?.formControlName;
+            this.selectedFilterGroupedValues = this.groupByFormControlAttributes([values]);
+        }
+        this.selectedFilterValues = this.selectedFilterValues.filter(sfv => sfv.formControlName != currentFormControlName);
+        this.selectedFilterGroupedValues.forEach(gv => {
+            if (gv.formControlName = currentFormControlName) {
+                gv.arrValues.forEach(v => {
+                    this.selectedFilterValues.push(v);
+                });
+            }
+        });
+        // this.filterFromQueryParams
+        this.getFinalSelectedFilterValuesToDisplay();
+    }
+    getFinalSelectedFilterValuesToDisplay() {
+        this.finalSelectedFilterValuesToDisplay = [];
+        this.selectedFilterValues.forEach(sf => {
+            if (Object.keys(this.filterFromQueryParams).includes(sf.formControlName)) {
+                this.finalSelectedFilterValuesToDisplay.push(sf);
+            }
+        });
+    }
+    removeParticularFilter(f) {
+        let val = this.filterFormGroup.get(f.formControlName)?.value;
+        if (Array.isArray(val)) {
+            val = val.filter(v => v != f.value);
+            this.filterFormGroup.get(f.formControlName)?.patchValue(val);
+        }
+        else {
+            this.filterFormGroup.get(f.formControlName)?.reset();
+        }
+        this.selectedFilterValues = this.selectedFilterValues.filter(sfv => !(sfv.formControlName == f.formControlName && sfv.valueKey == f.valueKey));
+        setTimeout(() => {
+            this.filterRecords();
+        }, 500);
+    }
+    filterRecords() {
+        this.filterApplied = true;
+        this.resetFlag = true;
+        setTimeout(() => {
+            this.getList(true);
+            this.isShowFilter = false;
+        }, 500);
+    }
+    resetFilters() {
+        this.filterApplied = false;
+        setTimeout(() => {
+            this.resetFlag = true;
+            this.filterFromQueryParams = {};
+            this.sortFromQueryParams = {};
+            this.selectedFilterGroupedValues = [];
+            this.selectedFilterValues = [];
+            this.getList();
+        }, 250);
+    }
+    getList(forceFromObject = false) {
+        const filterFormData = this.filterFormGroup?.value;
+        let qs = new URLSearchParams();
+        let filter = { ...filterFormData };
+        if (filterFormData) {
+            this.filterHasNonEmptyValue = Object.values(filterFormData).some(value => value !== null && value !== undefined && value !== '');
+        }
+        else {
+            this.filterHasNonEmptyValue = false;
+        }
+        for (const key in filter) {
+            if (typeof filter[key] === 'object' && (filter[key] instanceof Date || DateTime.isDateTime(filter[key]))) {
+                if (filter[key] instanceof Date) {
+                    filter[key] = DateTime.fromJSDate(filter[key]).toMillis();
+                }
+                else if (DateTime.isDateTime(filter[key])) {
+                    filter[key] = filter[key].toMillis();
+                }
+            }
+        }
+        // Append All Filters from filter form
+        Object.keys(filter).forEach(key => {
+            if (filter[key] != null && filter[key] != '' && filter[key] != 'null' && filter[key] != 'undefined') {
+                if (filter[key] === '*') {
+                    filter[key] = '';
+                }
+                qs.append(key, filter[key]);
+            }
+        });
+        // Append sorting conditions...
+        if (this.sortFromQueryParams) {
+            Object.keys(this.sortFromQueryParams).forEach(key => {
+                if (this.sortFromQueryParams[key] != null && this.sortFromQueryParams[key] != '' && this.sortFromQueryParams[key] != 'null' && this.sortFromQueryParams[key] != 'undefined') {
+                    qs.append(key, this.sortFromQueryParams[key]);
+                }
+            });
+        }
+        if (this.resetFlag) {
+            this.pageIndex = 0;
+        }
+        if (this._paginator) {
+            this._paginator.pageIndex = this.pageIndex;
+            this._paginator.pageSize = this.pageSize;
+        }
+        qs.append("pageIndex", this.pageIndex);
+        qs.append("pageSize", this.pageSize);
+        if (this.search != '') {
+            qs.append('search', this.search);
+        }
+        qs = qs.toString();
+        let genUrl = this.router.url.split('?')[0] + '?' + qs;
+        let currentUrl = window.location.pathname + window.location.search;
+        if (currentUrl != genUrl) {
+            if (this.keepFilterInUrl) {
+                this.location.go(genUrl);
+                this.filterFromQueryParams = this.getQueryParams(window.location.href);
+            }
+        }
+        else { }
+        this.dataSource.load(this.loadDataApiBaseUrl, this.pageIndex, this.pageSize, this.search, filter, this.sortObj);
+        this.getFinalSelectedFilterValuesToDisplay();
+        this.resetFlag = false;
+    }
+    onPaginationChanges() {
+        if (this.pageIndex != this._paginator.pageIndex) {
+            this.pageIndex = this._paginator.pageIndex;
+            this.getList();
+            this.pageIndexChange.emit(this.pageIndex);
+        }
+        if (this.pageSize != this._paginator.pageSize) {
+            this.pageSize = this._paginator.pageSize;
+            this.getList();
+            this.pageSizeChange.emit(this.pageSize);
+            setToLocalStorageWithExpiry('user_pagination_page_size', this.pageSize, 1000 * 60 * 60 * 24 * 15);
+        }
+    }
+    onChangeDisplayColumns(columns) {
+        this.defaultDisplayedColumns = columns;
+        this.handleDisplayedColumns();
+    }
+    onChangeFromStartColumnNumber(columnNumber) {
+        this.startStickyColumnCount = columnNumber;
+    }
+    onChangeFromEndColumnNumber(columnNumber) {
+        this.endStickyColumnCount = columnNumber;
+    }
+    goToUrl(url) {
+        if (url) {
+            this.router.navigateByUrl(url);
+        }
+    }
+    toggleSelection(status, row) {
+        if (this.onlySingleSelection && status.checked) {
+            this.selection.clear();
+        }
+        this.selection.toggle(row);
+        this.selectedRows = this.selection.selected;
+        this.selectedRowsChange.emit(this.selectedRows);
+        this.checkAllRowsSelected();
+    }
+    checkAllRowsSelected() {
+        this.isAllRowsSelected = this.selection.selected.length === this.dataSource.apiSubject.value.length;
+    }
+    toggleAllRows() {
+        if (this.isAllRowsSelected) {
+            this.selection.clear();
+        }
+        else {
+            this.dataSource.apiSubject.value.forEach(row => {
+                this.selection.select(row);
+            });
+        }
+        this.selectedRows = this.selection.selected;
+        this.selectedRowsChange.emit(this.selectedRows);
+        this.checkAllRowsSelected();
+    }
+    stopPropagation($event) {
+        $event.stopPropagation();
+    }
+    isChecked(row) {
+        return this.selectedIds.has(row['id']);
+    }
+    getQueryParams(url) {
+        const urlObj = new URL(url);
+        const params = new URLSearchParams(urlObj.search);
+        const paramsObj = {};
+        params.forEach((value, key) => {
+            // Check if the parameter already exists (for handling multiple values)
+            if (paramsObj.hasOwnProperty(key)) {
+                // If it's not already an array, convert it to an array
+                if (!Array.isArray(paramsObj[key])) {
+                    paramsObj[key] = [paramsObj[key]]; // Cast as string because we know it's not an array here
+                }
+                // Push the new value to the existing array
+                paramsObj[key].push(value); // Cast as string[] to use array methods
+            }
+            else {
+                // Assign the value to the key in the object
+                paramsObj[key] = value;
+            }
+        });
+        return paramsObj;
+    }
+    isStickyStart(columnName) {
+        const index = this.displayedColumns.indexOf(columnName);
+        return index !== -1 && index < this.startStickyColumnCount;
+    }
+    isStickyEnd(columnName) {
+        const index = this.displayedColumns.indexOf(columnName);
+        if (index === -1)
+            return false;
+        return index >= this.displayedColumns.length - this.endStickyColumnCount;
+    }
+    getColumnClasses(column) {
+        // Check if alignment is explicitly specified
+        if (column.align) {
+            return {
+                'text-right': column.align === 'right',
+                'text-left': column.align === 'left',
+                'text-center': column.align === 'center'
+            };
+        }
+        else {
+            // Default alignment based on column type
+            switch (column.type) {
+                case 'money':
+                case 'quantity':
+                    return { 'text-right': true };
+                case 'number':
+                    return { 'text-center': true };
+                default:
+                    return {};
+            }
+        }
+    }
+    getRowBackground(row) {
+        return this.rowsConfig.backgroundApplyFunction
+            ? this.rowsConfig.backgroundApplyFunction(row)
+            : null;
+    }
+    drop(event) {
+        // Ignore if the item was dropped at the same index
+        if (event.previousIndex === event.currentIndex) {
+            return;
+        }
+        // Access current data from apiSubject
+        const currentData = [...this.dataSource.apiSubject.value];
+        if (!currentData || currentData.length === 0) {
+            return;
+        }
+        // Rearrange items based on the drop event
+        moveItemInArray(currentData, event.previousIndex, event.currentIndex);
+        // Update the apiSubject with reordered data
+        this.dataSource.apiSubject.next(currentData);
+        // We need to emit this also
+        this.listDataSequenceChange.emit(currentData);
+    }
+    handleButtonClick(config) {
+        if (config?.btnClick) {
+            config.btnClick();
+        }
+        else if (config?.btnUrl) {
+            this.goToUrl(config.btnUrl);
+        }
+    }
+    handleSecondButtonClick(config) {
+        if (config?.secondBtnClick) {
+            config.secondBtnClick();
+        }
+        else if (config?.secondBtnUrl) {
+            this.goToUrl(config.secondBtnUrl);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TisSmartTableViewerComponent, deps: [{ token: i1$1.MatDialog }, { token: ApiService }, { token: i3$1.ActivatedRoute }, { token: i3$1.Router }, { token: i4.Location }, { token: i5.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: TisSmartTableViewerComponent, isStandalone: false, selector: "tis-smart-table-viewer", inputs: { columnCustomizationUrlConfig: "columnCustomizationUrlConfig", t: "t", componentName: "componentName", mainTitle: "mainTitle", searchPlaceholder: "searchPlaceholder", breadcrumbs: "breadcrumbs", hideHeader: "hideHeader", hideTableHeader: "hideTableHeader", hidePaginator: "hidePaginator", keepFilterInUrl: "keepFilterInUrl", displayColumnsSelectionButton: "displayColumnsSelectionButton", loadDataApiBaseUrl: "loadDataApiBaseUrl", startStickyColumnCount: "startStickyColumnCount", endStickyColumnCount: "endStickyColumnCount", loaderPosition: "loaderPosition", dataNotFoundConfig: "dataNotFoundConfig", showFilterButtonSection: "showFilterButtonSection", columnsCodeMapping: "columnsCodeMapping", defaultDisplayedColumns: "defaultDisplayedColumns", defaultSortObj: "defaultSortObj", loadingSpinnerDiameter: "loadingSpinnerDiameter", pageSizeOptions: "pageSizeOptions", pageSize: "pageSize", useGlobalPageSize: "useGlobalPageSize", pageIndex: "pageIndex", filterFormGroup: "filterFormGroup", rowsConfig: "rowsConfig", enableRowsSelection: "enableRowsSelection", enableAllRowsSelection: "enableAllRowsSelection", onlySingleSelection: "onlySingleSelection", selectedRows: "selectedRows", enableDragNDrop: "enableDragNDrop" }, outputs: { displayedColumnsChange: "displayedColumnsChange", sortObjChange: "sortObjChange", pageSizeChange: "pageSizeChange", pageIndexChange: "pageIndexChange", selectedRowsChange: "selectedRowsChange", listDataSequenceChange: "listDataSequenceChange" }, providers: [CdkColumnDef], viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<section [class.tis-page]=\"!hideHeader\">\n    <div class=\"tis-page-header\" *ngIf=\"!hideHeader\">\n        <nav aria-label=\"tis-breadcrumb\">\n            <ol class=\"tis-breadcrumb\">\n                <li class=\"tis-breadcrumb-item\"><a href=\"javascript:;\" [routerLink]=\"homeUrl\">{{t('home')}}</a></li>\n                @for(breadcrumb of breadcrumbs; track breadcrumb) {\n                    <li class=\"tis-breadcrumb-item\" *ngIf=\"breadcrumb?.url\">\n                        <a href=\"javascript:;\" (click)=\"goToUrl(breadcrumb.url)\">{{breadcrumb?.name}}</a>\n                    </li>\n                }\n                <li class=\"tis-breadcrumb-item active\">\n                    {{mainTitle}}\n                </li>\n            </ol>\n        </nav>\n        <ng-content select=\"[slot='top-buttons-section']\"></ng-content>\n    </div>\n    <h1 class=\"tis-page-title\" *ngIf=\"!hideHeader\">{{mainTitle}}</h1>\n    <div class=\"tis-page-body\">\n        <div class=\"tis-page-body-content\">\n\n            @if(initialLoading){\n            <div class=\"tis-d-flex tis-justify-content-center pb-2 pt-7\">\n                <mat-progress-spinner color=\"primary\" mode=\"indeterminate\" [diameter]=\"60\"></mat-progress-spinner>\n            </div>\n            } @else {\n\n                @if ((dataSource?.totalDataLength$ | async) || (dataSource?.loading$ | async) || search ||\n                filterHasNonEmptyValue || showFilterButtonSection) {\n                    <div class=\"tis-table-container\">\n                        @if(!hideTableHeader){\n                            <div class=\"tis-table-container-header\">\n                                <ul class=\"tis-inline-group\">\n                                    <li class=\"tis-inline-group-item\">\n                                        <tis-columns-btn [columnCustomizationUrlConfig]=\"columnCustomizationUrlConfig\" [t]=\"t\"\n                                            [componentName]=\"componentName\" [defaultColumns]=\"defaultColumns\" [columns]=\"columns\"\n                                            (displayedColumnsChange)=\"onChangeDisplayColumns($event)\"\n                                            (fromStartColumnNumberChange)=\"onChangeFromStartColumnNumber($event)\"\n                                            (fromEndColumnNumberChange)=\"onChangeFromEndColumnNumber($event)\"></tis-columns-btn>\n                                    </li>\n                                    <ng-content select=\"[slot='filter-button-section']\"></ng-content>\n                                </ul>\n                                <div class=\"flex items-center\">\n                                    <ul class=\"tis-inline-group\">\n                                        <ng-content select=\"[slot='filter-right-button-section']\"></ng-content>\n                                    </ul>\n                                    @if(!isMobile && searchPlaceholder && searchPlaceholder != ''){\n                                        <mat-form-field\n                                            class=\"custom-mat-form-field-mb-0 search-mat-form-field ml-3 tis-table-search-field\"\n                                            appearance=\"outline\">\n                                            <span class=\"material-icons\" matPrefix>search</span>\n                                            <input matInput [formControl]=\"searchCtrl\" [placeholder]=\"searchPlaceholder\">\n                                            <span class=\"material-icons mr-2 tis-curser-pointer\" matSuffix\n                                                (click)=\"searchCtrl.setValue('')\"\n                                                *ngIf=\"searchCtrl.value && searchCtrl.value != ''\">close</span>\n                                        </mat-form-field>\n                                    }\n                                </div>\n                            </div>\n                        }\n\n                        @if (filterFormGroup) {\n\n                            <ng-content select=\"[slot='filter-form-section']\"></ng-content>\n\n                            @if(finalSelectedFilterValuesToDisplay.length && filterApplied) {\n                                <div class=\"flex gap-3 mb-3 filter-applied-section md-hide-scrollbar\">\n                                    @for(v of finalSelectedFilterValuesToDisplay; track v) {\n                                        @if (v) {\n                                            <span class=\"tis-filter-badge\" style=\"white-space: nowrap;\">\n                                                @if(v.labelKey && v.labelKey != '' && (v.valueKey || v.value)) {\n                                                <span class=\"font-semibold\"> {{v.labelKey }} </span>\n                                                }\n                                                @if(v.valueKey) {\n                                                    {{v.valueKey }}\n                                                } @else {\n                                                    {{v.value }}\n                                                }\n                                                <span class=\"material-icons tis-curser-pointer\"\n                                                    (click)=\"removeParticularFilter(v)\">cancel</span>\n                                            </span>\n                                        }\n                                    }\n                                </div>\n                            }\n                        }\n\n                        @if(isMobile && searchPlaceholder && searchPlaceholder != ''){\n                            <mat-form-field\n                                class=\"custom-mat-form-field-mb-0 search-mat-form-field mb-3 tis-table-search-field\"\n                                appearance=\"outline\">\n                                <span class=\"material-icons\" matPrefix>search</span>\n                                <input matInput [formControl]=\"searchCtrl\" [placeholder]=\"searchPlaceholder\">\n                                <span class=\"material-icons mr-2 tis-curser-pointer\" matSuffix\n                                    (click)=\"searchCtrl.setValue('')\"\n                                    *ngIf=\"searchCtrl.value && searchCtrl.value != ''\">close</span>\n                            </mat-form-field>\n                        }\n\n                        \n                        @if(loaderPosition == 'top'){\n                            @if(dataSource?.loading$ | async){\n                                <div class=\"tis-d-flex tis-justify-content-center py-2\">\n                                    <mat-progress-spinner color=\"primary\" mode=\"indeterminate\" [diameter]=\"loadingSpinnerDiameter\"></mat-progress-spinner>\n                                </div>\n                            }\n                        }\n                        <div class=\"tis-table-container-body\">\n                            <div class=\"tis-table-wrapper\" [appScrolling]=\"true\">\n\n                                <!--Table Here-->\n                                <table mat-table matSort [dataSource]=\"dataSource\" class=\"tis-table\" cdkDropList (cdkDropListDropped)=\"drop($event)\" [cdkDropListLockAxis]=\"'y'\">\n\n                                    @if (enableRowsSelection) {\n                                        <ng-container matColumnDef=\"Select\">\n                                            <th mat-header-cell *matHeaderCellDef>\n                                                @if (enableAllRowsSelection) {\n                                                    <mat-checkbox color=\"primary\" (change)=\"$event ? toggleAllRows() : null\"\n                                                                [checked]=\"isAllRowsSelected\"\n                                                                [indeterminate]=\"selection.hasValue() && !isAllRowsSelected\">\n                                                    </mat-checkbox>\n                                                }\n                                            </th>\n                                            <td mat-cell *matCellDef=\"let row\">\n                                                <mat-checkbox color=\"primary\" (click)=\"stopPropagation($event)\" (change)=\"$event ? toggleSelection($event, row) : null\" [checked]=\"isChecked(row)\"></mat-checkbox>\n                                            </td>\n                                        </ng-container>\n                                    }\n\n                                    @for(column of autoRenderColumns; track column.serverKeyCode; let i = $index; let l = $last){\n                                        <!-- [sticky]=\"i < startStickyColumnCount\" [stickyEnd]=\"i > (autoRenderColumns?.length - endStickyColumnCount)\" -->\n                                        <ng-container [matColumnDef]=\"column.name\" [sticky]=\"isStickyStart(column.name)\" [stickyEnd]=\"isStickyEnd(column.name)\">\n                                            @if(column.sort) {\n                                                <th mat-header-cell mat-sort-header *matHeaderCellDef [ngClass]=\"getColumnClasses(column)\">\n                                                    {{ t(column.name) }}\n                                                </th>\n                                            } @else {\n                                                <th mat-header-cell *matHeaderCellDef [ngClass]=\"getColumnClasses(column)\">\n                                                    {{ t(column.name) }}\n                                                </th>\n                                            }\n                                            \n\n                                            @if(column.type == 'date'){\n                                                <td mat-cell *matCellDef=\"let element\"  class=\"1al-{{column.align}} 1ty-{{column.type}}\" >\n                                                    <p [class.tis-a]=\"column.clickFn\" (click)=\"column?.clickFn?.(element, $event)\">\n                                                        {{ (column.valueKey && element[column.valueKey]) ? (getNestedValue(element, column.valueKey) | tisDate) : ''}}\n                                                    </p>\n                                                </td>\n                                            } @else if(column.type == 'date-time'){\n                                                <td mat-cell *matCellDef=\"let element\" class=\"2al-{{column.align}} 2ty-{{column.type}}\">\n                                                    <p [class.tis-a]=\"column.clickFn\" (click)=\"column?.clickFn?.(element, $event)\">\n                                                        {{ (column.valueKey && element[column.valueKey]) ? (getNestedValue(element, column.valueKey) | tisDateTime) : ''}}\n                                                    </p>\n                                                </td>\n                                            } @else if(column.type == 'date-time-with-seconds'){\n                                                <td mat-cell *matCellDef=\"let element\" class=\"2al-{{column.align}} 2ty-{{column.type}}\">\n                                                    <p [class.tis-a]=\"column.clickFn\" (click)=\"column?.clickFn?.(element, $event)\">\n                                                        {{ (column.valueKey && element[column.valueKey]) ? (getNestedValue(element, column.valueKey) | tisDateTimeWithSeconds) : ''}}\n                                                    </p>\n                                                </td>\n                                            } @else {\n                                                <td mat-cell *matCellDef=\"let element\" class=\"3al-{{column.align}} 3ty-{{column.type}}\" [ngClass]=\"getColumnClasses(column)\">\n                                                        <p [class.tis-a]=\"column.clickFn\" (click)=\"column?.clickFn?.(element, $event)\">\n                                                            @if (column.type == 'quantity') {\n                                                                {{ (column.valueKey && element[column.valueKey]) ? (getNestedValue(element, column.valueKey) | number : '1.4-4') : '-' }}\n                                                            } @else if (column.type == 'money') {\n                                                                {{ column.valueKey && (getNestedValue(element, column.valueKey)).toFixed(2) }}\n                                                            } @else {\n                                                                {{ column.valueKey && getNestedValue(element, column.valueKey) }}\n                                                            }\n                                                        </p>\n                                                </td>\n                                            }\n                                        </ng-container>\n\n                                    }\n\n\n                                    @for(column of templateRenderColumns; track column.serverKeyCode; let i = $index; let l = $last){\n                                        <!-- [sticky]=\"i < startStickyColumnCount\" [stickyEnd]=\"l\" -->\n                                        <ng-container [matColumnDef]=\"column.name\"  [sticky]=\"isStickyStart(column.name)\" [stickyEnd]=\"isStickyEnd(column.name)\">\n                                            @if(column.sort) {\n                                                <th mat-header-cell *matHeaderCellDef mat-sort-header [ngClass]=\"getColumnClasses(column)\">\n                                                    {{ t(column.name) }}\n                                                </th>\n                                            } @else {\n                                                <th mat-header-cell *matHeaderCellDef [ngClass]=\"getColumnClasses(column)\">\n                                                    {{ t(column.name) }}\n                                                </th>\n                                            }\n                                            <td mat-cell *matCellDef=\"let element\" class=\"4al-{{column.align}} 4ty-{{column.type}}\" [ngClass]=\"getColumnClasses(column)\">\n                                                <ng-container *ngIf=\"column.template as template\">\n                                                    <ng-container *ngTemplateOutlet=\"template; context: { colDef: column, colData: element  }\"></ng-container>\n                                                </ng-container>\n                                            </td>\n                                        </ng-container>\n                                    }\n\n                                    <!--Drag Column Def Start-->\n                                    <ng-container [matColumnDef]=\"'drag'\" >\n                                        <th mat-header-cell *matHeaderCellDef>\n                                            --\n                                        </th>\n                                        <td mat-cell *matCellDef=\"let element\" class=\"5al-drag 5ty-drag\">\n                                            <mat-icon cdkDragHandle class=\"tis-curser-pointer\" style=\"color: rgba(0, 0, 0, 0.54); font-size: 19px; width: 19px; height: 19px;\">drag_indicator</mat-icon>\n                                        </td>\n                                    </ng-container>\n                                    <!--Drag Column Def End-->\n\n\n                                    <tr class=\"mat-row\" *matNoDataRow>\n                                        <td class=\"mat-cell\" [attr.colspan]=\"displayedColumns.length\">\n                                            <div class=\"tis-data-not-found\">\n                                                <img src=\"/assets/icons/not-found.svg\" alt=\"not-found\" class=\"w-53\">\n                                                <h5 class=\"tis-h5\">{{dataNotFoundConfig.title}}</h5>\n                                            </div>\n                                        </td>\n                                    </tr>\n\n                                        <!-- Apply Drag and Drop to tbody -->\n                                    @if(enableDragNDrop) {\n                                        <tr mat-row *matRowDef=\"let row; columns: displayedColumns\" [ngStyle]=\"{'background-color': getRowBackground(row) || 'inherit'}\" cdkDrag></tr>\n                                    }\n\n                                    @if(!enableDragNDrop) {\n                                        <tr mat-row *matRowDef=\"let row; columns: displayedColumns\" [ngStyle]=\"{'background-color': getRowBackground(row) || 'inherit'}\"></tr>\n                                    }   \n                                    <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n                                </table>\n                                <!--Table End-->\n\n                            </div>\n                            @if(loaderPosition == 'bottom'){\n                                @if(dataSource?.loading$ | async){\n                                    <div class=\"tis-d-flex tis-justify-content-center py-2\">\n                                        <mat-progress-spinner color=\"primary\" mode=\"indeterminate\" [diameter]=\"loadingSpinnerDiameter\"></mat-progress-spinner>\n                                    </div>\n                                }\n                            }\n                            @if (!hidePaginator) {\n                                <div class=\"tis-table-paginator\">\n                                    <mat-paginator [length]=\"dataSource?.totalDataLength?.value\" [pageSize]=\"pageSize\"\n                                        [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons></mat-paginator>\n                                </div>\n                            }\n                        </div>\n                    </div>\n                } @else {\n\n                    @if(dataNotFoundConfig) {\n                        <div class=\"tis-data-not-found\">\n                            <img src=\"/assets/icons/not-found.svg\" alt=\"not-found\" class=\"w-53\">\n                            <h5 class=\"tis-h5\">{{dataNotFoundConfig.title}}</h5>\n                            <p class=\"tis-p\">{{dataNotFoundConfig.desc}}</p>\n                            @if((dataNotFoundConfig.btnUrl || dataNotFoundConfig?.btnClick) && dataNotFoundConfig.btnText) {\n                                <button mat-flat-button color=\"primary\" class=\"tis-text-upper\"\n                                    (click)=\"handleButtonClick(dataNotFoundConfig)\">\n                                    <mat-icon>add</mat-icon>\n                                    {{dataNotFoundConfig.btnText}}\n                                </button>\n                            }\n                            @if((dataNotFoundConfig.secondBtnUrl || dataNotFoundConfig?.secondBtnClick) && dataNotFoundConfig.secondBtnText) {\n                                <button mat-stroked-button color=\"primary\" class=\"tis-text-upper\"\n                                    (click)=\"handleSecondButtonClick(dataNotFoundConfig)\">\n                                    <mat-icon>add</mat-icon>\n                                    {{dataNotFoundConfig.secondBtnText}}\n                                </button>\n                            }\n                        </div>\n                    }\n\n                }\n\n            }\n\n        </div>\n    </div>\n</section>", styles: ["::ng-deep .sub-main-content{border:0px solid #f00;margin-top:56px;height:calc(100% - 56px);padding:15px;overflow:auto}.header-title{margin-top:8px;padding:7px 10px;color:#969a9c}.header-title h3{font-size:20px!important;font-weight:700}.header-menu{border:0px solid red;background:#fff;margin-top:1px;margin-bottom:0}.w-100{width:100%}.mat-mdc-table-sticky-border-elem-right{border-left:1px solid #e0e0e087}.mat-mdc-table-sticky-border-elem-left{border-right:1px solid #e0e0e087}.search-mat-form-field{width:100%}.filter-applied-section{overflow:auto}@media (max-width: 575.98px){.search-mat-form-field{width:100%!important}}@media (min-width: 576px) and (max-width: 767.98px){.search-mat-form-field{width:100%!important}}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i8.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i10$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i4$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i12$1.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: i13$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i13$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i13$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i13$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i13$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i13$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i13$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i13$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i13$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i13$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i13$1.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "component", type: i12.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i13.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i13.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i13.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: ScrollingDirective, selector: "[appScrolling]", inputs: ["appScrolling"] }, { kind: "component", type: TisColumnsBtnComponent, selector: "tis-columns-btn", inputs: ["columnCustomizationUrlConfig", "t", "componentName", "defaultColumns", "columns", "skipTranslation", "customColumns"], outputs: ["displayedColumnsChange", "fromStartColumnNumberChange", "fromEndColumnNumberChange"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "pipe", type: TisDatePipe, name: "tisDate" }, { kind: "pipe", type: TisDateTimePipe, name: "tisDateTime" }, { kind: "pipe", type: TisDateTimeWithSecondsPipe, name: "tisDateTimeWithSeconds" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TisSmartTableViewerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tis-smart-table-viewer', standalone: false, providers: [CdkColumnDef], template: "<section [class.tis-page]=\"!hideHeader\">\n    <div class=\"tis-page-header\" *ngIf=\"!hideHeader\">\n        <nav aria-label=\"tis-breadcrumb\">\n            <ol class=\"tis-breadcrumb\">\n                <li class=\"tis-breadcrumb-item\"><a href=\"javascript:;\" [routerLink]=\"homeUrl\">{{t('home')}}</a></li>\n                @for(breadcrumb of breadcrumbs; track breadcrumb) {\n                    <li class=\"tis-breadcrumb-item\" *ngIf=\"breadcrumb?.url\">\n                        <a href=\"javascript:;\" (click)=\"goToUrl(breadcrumb.url)\">{{breadcrumb?.name}}</a>\n                    </li>\n                }\n                <li class=\"tis-breadcrumb-item active\">\n                    {{mainTitle}}\n                </li>\n            </ol>\n        </nav>\n        <ng-content select=\"[slot='top-buttons-section']\"></ng-content>\n    </div>\n    <h1 class=\"tis-page-title\" *ngIf=\"!hideHeader\">{{mainTitle}}</h1>\n    <div class=\"tis-page-body\">\n        <div class=\"tis-page-body-content\">\n\n            @if(initialLoading){\n            <div class=\"tis-d-flex tis-justify-content-center pb-2 pt-7\">\n                <mat-progress-spinner color=\"primary\" mode=\"indeterminate\" [diameter]=\"60\"></mat-progress-spinner>\n            </div>\n            } @else {\n\n                @if ((dataSource?.totalDataLength$ | async) || (dataSource?.loading$ | async) || search ||\n                filterHasNonEmptyValue || showFilterButtonSection) {\n                    <div class=\"tis-table-container\">\n                        @if(!hideTableHeader){\n                            <div class=\"tis-table-container-header\">\n                                <ul class=\"tis-inline-group\">\n                                    <li class=\"tis-inline-group-item\">\n                                        <tis-columns-btn [columnCustomizationUrlConfig]=\"columnCustomizationUrlConfig\" [t]=\"t\"\n                                            [componentName]=\"componentName\" [defaultColumns]=\"defaultColumns\" [columns]=\"columns\"\n                                            (displayedColumnsChange)=\"onChangeDisplayColumns($event)\"\n                                            (fromStartColumnNumberChange)=\"onChangeFromStartColumnNumber($event)\"\n                                            (fromEndColumnNumberChange)=\"onChangeFromEndColumnNumber($event)\"></tis-columns-btn>\n                                    </li>\n                                    <ng-content select=\"[slot='filter-button-section']\"></ng-content>\n                                </ul>\n                                <div class=\"flex items-center\">\n                                    <ul class=\"tis-inline-group\">\n                                        <ng-content select=\"[slot='filter-right-button-section']\"></ng-content>\n                                    </ul>\n                                    @if(!isMobile && searchPlaceholder && searchPlaceholder != ''){\n                                        <mat-form-field\n                                            class=\"custom-mat-form-field-mb-0 search-mat-form-field ml-3 tis-table-search-field\"\n                                            appearance=\"outline\">\n                                            <span class=\"material-icons\" matPrefix>search</span>\n                                            <input matInput [formControl]=\"searchCtrl\" [placeholder]=\"searchPlaceholder\">\n                                            <span class=\"material-icons mr-2 tis-curser-pointer\" matSuffix\n                                                (click)=\"searchCtrl.setValue('')\"\n                                                *ngIf=\"searchCtrl.value && searchCtrl.value != ''\">close</span>\n                                        </mat-form-field>\n                                    }\n                                </div>\n                            </div>\n                        }\n\n                        @if (filterFormGroup) {\n\n                            <ng-content select=\"[slot='filter-form-section']\"></ng-content>\n\n                            @if(finalSelectedFilterValuesToDisplay.length && filterApplied) {\n                                <div class=\"flex gap-3 mb-3 filter-applied-section md-hide-scrollbar\">\n                                    @for(v of finalSelectedFilterValuesToDisplay; track v) {\n                                        @if (v) {\n                                            <span class=\"tis-filter-badge\" style=\"white-space: nowrap;\">\n                                                @if(v.labelKey && v.labelKey != '' && (v.valueKey || v.value)) {\n                                                <span class=\"font-semibold\"> {{v.labelKey }} </span>\n                                                }\n                                                @if(v.valueKey) {\n                                                    {{v.valueKey }}\n                                                } @else {\n                                                    {{v.value }}\n                                                }\n                                                <span class=\"material-icons tis-curser-pointer\"\n                                                    (click)=\"removeParticularFilter(v)\">cancel</span>\n                                            </span>\n                                        }\n                                    }\n                                </div>\n                            }\n                        }\n\n                        @if(isMobile && searchPlaceholder && searchPlaceholder != ''){\n                            <mat-form-field\n                                class=\"custom-mat-form-field-mb-0 search-mat-form-field mb-3 tis-table-search-field\"\n                                appearance=\"outline\">\n                                <span class=\"material-icons\" matPrefix>search</span>\n                                <input matInput [formControl]=\"searchCtrl\" [placeholder]=\"searchPlaceholder\">\n                                <span class=\"material-icons mr-2 tis-curser-pointer\" matSuffix\n                                    (click)=\"searchCtrl.setValue('')\"\n                                    *ngIf=\"searchCtrl.value && searchCtrl.value != ''\">close</span>\n                            </mat-form-field>\n                        }\n\n                        \n                        @if(loaderPosition == 'top'){\n                            @if(dataSource?.loading$ | async){\n                                <div class=\"tis-d-flex tis-justify-content-center py-2\">\n                                    <mat-progress-spinner color=\"primary\" mode=\"indeterminate\" [diameter]=\"loadingSpinnerDiameter\"></mat-progress-spinner>\n                                </div>\n                            }\n                        }\n                        <div class=\"tis-table-container-body\">\n                            <div class=\"tis-table-wrapper\" [appScrolling]=\"true\">\n\n                                <!--Table Here-->\n                                <table mat-table matSort [dataSource]=\"dataSource\" class=\"tis-table\" cdkDropList (cdkDropListDropped)=\"drop($event)\" [cdkDropListLockAxis]=\"'y'\">\n\n                                    @if (enableRowsSelection) {\n                                        <ng-container matColumnDef=\"Select\">\n                                            <th mat-header-cell *matHeaderCellDef>\n                                                @if (enableAllRowsSelection) {\n                                                    <mat-checkbox color=\"primary\" (change)=\"$event ? toggleAllRows() : null\"\n                                                                [checked]=\"isAllRowsSelected\"\n                                                                [indeterminate]=\"selection.hasValue() && !isAllRowsSelected\">\n                                                    </mat-checkbox>\n                                                }\n                                            </th>\n                                            <td mat-cell *matCellDef=\"let row\">\n                                                <mat-checkbox color=\"primary\" (click)=\"stopPropagation($event)\" (change)=\"$event ? toggleSelection($event, row) : null\" [checked]=\"isChecked(row)\"></mat-checkbox>\n                                            </td>\n                                        </ng-container>\n                                    }\n\n                                    @for(column of autoRenderColumns; track column.serverKeyCode; let i = $index; let l = $last){\n                                        <!-- [sticky]=\"i < startStickyColumnCount\" [stickyEnd]=\"i > (autoRenderColumns?.length - endStickyColumnCount)\" -->\n                                        <ng-container [matColumnDef]=\"column.name\" [sticky]=\"isStickyStart(column.name)\" [stickyEnd]=\"isStickyEnd(column.name)\">\n                                            @if(column.sort) {\n                                                <th mat-header-cell mat-sort-header *matHeaderCellDef [ngClass]=\"getColumnClasses(column)\">\n                                                    {{ t(column.name) }}\n                                                </th>\n                                            } @else {\n                                                <th mat-header-cell *matHeaderCellDef [ngClass]=\"getColumnClasses(column)\">\n                                                    {{ t(column.name) }}\n                                                </th>\n                                            }\n                                            \n\n                                            @if(column.type == 'date'){\n                                                <td mat-cell *matCellDef=\"let element\"  class=\"1al-{{column.align}} 1ty-{{column.type}}\" >\n                                                    <p [class.tis-a]=\"column.clickFn\" (click)=\"column?.clickFn?.(element, $event)\">\n                                                        {{ (column.valueKey && element[column.valueKey]) ? (getNestedValue(element, column.valueKey) | tisDate) : ''}}\n                                                    </p>\n                                                </td>\n                                            } @else if(column.type == 'date-time'){\n                                                <td mat-cell *matCellDef=\"let element\" class=\"2al-{{column.align}} 2ty-{{column.type}}\">\n                                                    <p [class.tis-a]=\"column.clickFn\" (click)=\"column?.clickFn?.(element, $event)\">\n                                                        {{ (column.valueKey && element[column.valueKey]) ? (getNestedValue(element, column.valueKey) | tisDateTime) : ''}}\n                                                    </p>\n                                                </td>\n                                            } @else if(column.type == 'date-time-with-seconds'){\n                                                <td mat-cell *matCellDef=\"let element\" class=\"2al-{{column.align}} 2ty-{{column.type}}\">\n                                                    <p [class.tis-a]=\"column.clickFn\" (click)=\"column?.clickFn?.(element, $event)\">\n                                                        {{ (column.valueKey && element[column.valueKey]) ? (getNestedValue(element, column.valueKey) | tisDateTimeWithSeconds) : ''}}\n                                                    </p>\n                                                </td>\n                                            } @else {\n                                                <td mat-cell *matCellDef=\"let element\" class=\"3al-{{column.align}} 3ty-{{column.type}}\" [ngClass]=\"getColumnClasses(column)\">\n                                                        <p [class.tis-a]=\"column.clickFn\" (click)=\"column?.clickFn?.(element, $event)\">\n                                                            @if (column.type == 'quantity') {\n                                                                {{ (column.valueKey && element[column.valueKey]) ? (getNestedValue(element, column.valueKey) | number : '1.4-4') : '-' }}\n                                                            } @else if (column.type == 'money') {\n                                                                {{ column.valueKey && (getNestedValue(element, column.valueKey)).toFixed(2) }}\n                                                            } @else {\n                                                                {{ column.valueKey && getNestedValue(element, column.valueKey) }}\n                                                            }\n                                                        </p>\n                                                </td>\n                                            }\n                                        </ng-container>\n\n                                    }\n\n\n                                    @for(column of templateRenderColumns; track column.serverKeyCode; let i = $index; let l = $last){\n                                        <!-- [sticky]=\"i < startStickyColumnCount\" [stickyEnd]=\"l\" -->\n                                        <ng-container [matColumnDef]=\"column.name\"  [sticky]=\"isStickyStart(column.name)\" [stickyEnd]=\"isStickyEnd(column.name)\">\n                                            @if(column.sort) {\n                                                <th mat-header-cell *matHeaderCellDef mat-sort-header [ngClass]=\"getColumnClasses(column)\">\n                                                    {{ t(column.name) }}\n                                                </th>\n                                            } @else {\n                                                <th mat-header-cell *matHeaderCellDef [ngClass]=\"getColumnClasses(column)\">\n                                                    {{ t(column.name) }}\n                                                </th>\n                                            }\n                                            <td mat-cell *matCellDef=\"let element\" class=\"4al-{{column.align}} 4ty-{{column.type}}\" [ngClass]=\"getColumnClasses(column)\">\n                                                <ng-container *ngIf=\"column.template as template\">\n                                                    <ng-container *ngTemplateOutlet=\"template; context: { colDef: column, colData: element  }\"></ng-container>\n                                                </ng-container>\n                                            </td>\n                                        </ng-container>\n                                    }\n\n                                    <!--Drag Column Def Start-->\n                                    <ng-container [matColumnDef]=\"'drag'\" >\n                                        <th mat-header-cell *matHeaderCellDef>\n                                            --\n                                        </th>\n                                        <td mat-cell *matCellDef=\"let element\" class=\"5al-drag 5ty-drag\">\n                                            <mat-icon cdkDragHandle class=\"tis-curser-pointer\" style=\"color: rgba(0, 0, 0, 0.54); font-size: 19px; width: 19px; height: 19px;\">drag_indicator</mat-icon>\n                                        </td>\n                                    </ng-container>\n                                    <!--Drag Column Def End-->\n\n\n                                    <tr class=\"mat-row\" *matNoDataRow>\n                                        <td class=\"mat-cell\" [attr.colspan]=\"displayedColumns.length\">\n                                            <div class=\"tis-data-not-found\">\n                                                <img src=\"/assets/icons/not-found.svg\" alt=\"not-found\" class=\"w-53\">\n                                                <h5 class=\"tis-h5\">{{dataNotFoundConfig.title}}</h5>\n                                            </div>\n                                        </td>\n                                    </tr>\n\n                                        <!-- Apply Drag and Drop to tbody -->\n                                    @if(enableDragNDrop) {\n                                        <tr mat-row *matRowDef=\"let row; columns: displayedColumns\" [ngStyle]=\"{'background-color': getRowBackground(row) || 'inherit'}\" cdkDrag></tr>\n                                    }\n\n                                    @if(!enableDragNDrop) {\n                                        <tr mat-row *matRowDef=\"let row; columns: displayedColumns\" [ngStyle]=\"{'background-color': getRowBackground(row) || 'inherit'}\"></tr>\n                                    }   \n                                    <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n                                </table>\n                                <!--Table End-->\n\n                            </div>\n                            @if(loaderPosition == 'bottom'){\n                                @if(dataSource?.loading$ | async){\n                                    <div class=\"tis-d-flex tis-justify-content-center py-2\">\n                                        <mat-progress-spinner color=\"primary\" mode=\"indeterminate\" [diameter]=\"loadingSpinnerDiameter\"></mat-progress-spinner>\n                                    </div>\n                                }\n                            }\n                            @if (!hidePaginator) {\n                                <div class=\"tis-table-paginator\">\n                                    <mat-paginator [length]=\"dataSource?.totalDataLength?.value\" [pageSize]=\"pageSize\"\n                                        [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons></mat-paginator>\n                                </div>\n                            }\n                        </div>\n                    </div>\n                } @else {\n\n                    @if(dataNotFoundConfig) {\n                        <div class=\"tis-data-not-found\">\n                            <img src=\"/assets/icons/not-found.svg\" alt=\"not-found\" class=\"w-53\">\n                            <h5 class=\"tis-h5\">{{dataNotFoundConfig.title}}</h5>\n                            <p class=\"tis-p\">{{dataNotFoundConfig.desc}}</p>\n                            @if((dataNotFoundConfig.btnUrl || dataNotFoundConfig?.btnClick) && dataNotFoundConfig.btnText) {\n                                <button mat-flat-button color=\"primary\" class=\"tis-text-upper\"\n                                    (click)=\"handleButtonClick(dataNotFoundConfig)\">\n                                    <mat-icon>add</mat-icon>\n                                    {{dataNotFoundConfig.btnText}}\n                                </button>\n                            }\n                            @if((dataNotFoundConfig.secondBtnUrl || dataNotFoundConfig?.secondBtnClick) && dataNotFoundConfig.secondBtnText) {\n                                <button mat-stroked-button color=\"primary\" class=\"tis-text-upper\"\n                                    (click)=\"handleSecondButtonClick(dataNotFoundConfig)\">\n                                    <mat-icon>add</mat-icon>\n                                    {{dataNotFoundConfig.secondBtnText}}\n                                </button>\n                            }\n                        </div>\n                    }\n\n                }\n\n            }\n\n        </div>\n    </div>\n</section>", styles: ["::ng-deep .sub-main-content{border:0px solid #f00;margin-top:56px;height:calc(100% - 56px);padding:15px;overflow:auto}.header-title{margin-top:8px;padding:7px 10px;color:#969a9c}.header-title h3{font-size:20px!important;font-weight:700}.header-menu{border:0px solid red;background:#fff;margin-top:1px;margin-bottom:0}.w-100{width:100%}.mat-mdc-table-sticky-border-elem-right{border-left:1px solid #e0e0e087}.mat-mdc-table-sticky-border-elem-left{border-right:1px solid #e0e0e087}.search-mat-form-field{width:100%}.filter-applied-section{overflow:auto}@media (max-width: 575.98px){.search-mat-form-field{width:100%!important}}@media (min-width: 576px) and (max-width: 767.98px){.search-mat-form-field{width:100%!important}}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.MatDialog }, { type: ApiService }, { type: i3$1.ActivatedRoute }, { type: i3$1.Router }, { type: i4.Location }, { type: i5.BreakpointObserver }], propDecorators: { columnCustomizationUrlConfig: [{
+                type: Input,
+                args: [{ required: true }]
+            }], t: [{
+                type: Input,
+                args: [{ required: true }]
+            }], componentName: [{
+                type: Input,
+                args: [{ required: true }]
+            }], mainTitle: [{
+                type: Input,
+                args: [{ required: true }]
+            }], searchPlaceholder: [{
+                type: Input
+            }], breadcrumbs: [{
+                type: Input
+            }], hideHeader: [{
+                type: Input
+            }], hideTableHeader: [{
+                type: Input
+            }], hidePaginator: [{
+                type: Input
+            }], keepFilterInUrl: [{
+                type: Input
+            }], displayColumnsSelectionButton: [{
+                type: Input
+            }], loadDataApiBaseUrl: [{
+                type: Input
+            }], startStickyColumnCount: [{
+                type: Input
+            }], endStickyColumnCount: [{
+                type: Input
+            }], loaderPosition: [{
+                type: Input
+            }], dataNotFoundConfig: [{
+                type: Input,
+                args: [{ required: true }]
+            }], showFilterButtonSection: [{
+                type: Input
+            }], columnsCodeMapping: [{
+                type: Input,
+                args: [{ required: true }]
+            }], defaultDisplayedColumns: [{
+                type: Input
+            }], displayedColumnsChange: [{
+                type: Output
+            }], defaultSortObj: [{
+                type: Input
+            }], sortObjChange: [{
+                type: Output
+            }], loadingSpinnerDiameter: [{
+                type: Input
+            }], pageSizeOptions: [{
+                type: Input
+            }], pageSize: [{
+                type: Input
+            }], pageSizeChange: [{
+                type: Output
+            }], useGlobalPageSize: [{
+                type: Input
+            }], pageIndex: [{
+                type: Input
+            }], pageIndexChange: [{
+                type: Output
+            }], filterFormGroup: [{
+                type: Input
+            }], rowsConfig: [{
+                type: Input
+            }], sort: [{
+                type: ViewChild,
+                args: [MatSort]
+            }], paginator: [{
+                type: ViewChild,
+                args: [MatPaginator]
+            }], enableRowsSelection: [{
+                type: Input
+            }], enableAllRowsSelection: [{
+                type: Input
+            }], onlySingleSelection: [{
+                type: Input
+            }], selectedRows: [{
+                type: Input
+            }], selectedRowsChange: [{
+                type: Output
+            }], enableDragNDrop: [{
+                type: Input
+            }], listDataSequenceChange: [{
+                type: Output
+            }] } });
+
+class Quantity {
+    decimalPoints = 4;
+    transform(value) {
+        if (Number(value) > 0) {
+            let roundValue = this.roundNumber(Number(value), this.decimalPoints);
+            let roundValueArr = String(roundValue)?.split('.');
+            if (roundValueArr?.length > 1) {
+                let currentDesimal = roundValueArr[1];
+                if (currentDesimal?.length < this.decimalPoints) {
+                    roundValue = `${roundValue}`;
+                    for (let index = 0; index < (this.decimalPoints - currentDesimal?.length); index++) {
+                        roundValue = `${roundValue}0`;
+                    }
+                }
+            }
+            else {
+                roundValue = `${roundValueArr[0]}.0000`;
+            }
+            return roundValue;
+        }
+        else {
+            return 0;
+        }
+    }
+    roundNumber(number, decimals = 0) {
+        const multiplier = Math.pow(10, decimals);
+        return Math.round(number * multiplier) / multiplier;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Quantity, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.7", ngImport: i0, type: Quantity, isStandalone: false, name: "qty" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Quantity, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'qty',
+                    standalone: false
+                }]
+        }] });
+
+class Money {
+    decimalPoints = 4;
+    transform(value) {
+        if (Number(value) > 0) {
+            let roundValue = this.roundNumber(Number(value), this.decimalPoints);
+            let roundValueArr = String(roundValue)?.split('.');
+            if (roundValueArr?.length > 1) {
+                let currentDesimal = roundValueArr[1];
+                if (currentDesimal?.length < this.decimalPoints) {
+                    roundValue = `${roundValue}`;
+                    for (let index = 0; index < (this.decimalPoints - currentDesimal?.length); index++) {
+                        roundValue = `${roundValue}0`;
+                    }
+                }
+            }
+            else {
+                roundValue = `${roundValueArr[0]}.0000`;
+            }
+            return roundValue;
+        }
+        else {
+            return 0;
+        }
+    }
+    roundNumber(number, decimals = 0) {
+        const multiplier = Math.pow(10, decimals);
+        return Math.round(number * multiplier) / multiplier;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Money, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.7", ngImport: i0, type: Money, isStandalone: false, name: "money" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Money, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'money',
+                    standalone: false
+                }]
+        }] });
+
+const directives = [
+    ScrollingDirective
+];
+const pipes = [
+    TisDatePipe,
+    TisDateTimePipe,
+    TisDateTimeWithSecondsPipe,
+    Quantity,
+    Money,
+];
+const uiImports = [
+    MatTooltipModule,
+    MatIconModule,
+    MatFormFieldModule,
+    MatSelectModule,
+    MatInputModule,
+    MatSnackBarModule,
+    MatProgressSpinnerModule,
+    MatButtonModule,
+    MatPaginatorModule,
+    LayoutModule, // For Breakpoint Observer,
+    MatDialogModule,
+    MatTableModule,
+    MatCheckboxModule,
+    MatMenuModule,
+    MatDividerModule
+];
+class TisSmartTableViewerModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TisSmartTableViewerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.7", ngImport: i0, type: TisSmartTableViewerModule, declarations: [ScrollingDirective, TisDatePipe,
+            TisDateTimePipe,
+            TisDateTimeWithSecondsPipe,
+            Quantity,
+            Money, TisSmartTableViewerComponent,
+            TisColumnsBtnComponent,
+            CreateColumnsTemplateComponent,
+            TisSmartTableViewerComponent,
+            TisSmartTableErrorDialogComponent,
+            TisSmartTableConfirmationDialogComponent], imports: [CommonModule,
+            FormsModule,
+            ReactiveFormsModule,
+            RouterLink,
+            RouterOutlet, MatTooltipModule,
+            MatIconModule,
+            MatFormFieldModule,
+            MatSelectModule,
+            MatInputModule,
+            MatSnackBarModule,
+            MatProgressSpinnerModule,
+            MatButtonModule,
+            MatPaginatorModule,
+            LayoutModule, // For Breakpoint Observer,
+            MatDialogModule,
+            MatTableModule,
+            MatCheckboxModule,
+            MatMenuModule,
+            MatDividerModule, DragDropModule], exports: [TisSmartTableViewerComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TisSmartTableViewerModule, imports: [CommonModule,
+            FormsModule,
+            ReactiveFormsModule, uiImports, DragDropModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TisSmartTableViewerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        ...directives,
+                        ...pipes,
+                        TisSmartTableViewerComponent,
+                        TisColumnsBtnComponent,
+                        CreateColumnsTemplateComponent,
+                        TisSmartTableViewerComponent,
+                        TisSmartTableErrorDialogComponent,
+                        TisSmartTableConfirmationDialogComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        RouterLink,
+                        RouterOutlet,
+                        ...uiImports,
+                        DragDropModule
+                    ],
+                    exports: [
+                        TisSmartTableViewerComponent
+                    ]
+                }]
+        }] });
+
+/*
+ * Public API Surface of tis-smart-table-viewer
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { TisSmartTableViewerComponent, TisSmartTableViewerModule, TisSmartTableViewerService };
+//# sourceMappingURL=servicemind.tis-tis-smart-table-viewer.mjs.map