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

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

@@ -101,7 +101,7 @@ class ApiService {
     }
     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}`);
+        return this.http.post(`${apiUrl}?current_page=${currentPage}&per_page=${limit}&search=${search}`, body);
     }
     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' });
@@ -245,6 +245,7 @@ class TisSmartTableErrorDialogComponent {
     constructor(dialogRef, data) {
         this.dialogRef = dialogRef;
         this.data = data;
+        this.dialogRef.addPanelClass(['tis-smart-table-error-dialog']);
     }
     onClose() {
         this.dialogRef.close();
@@ -350,11 +351,11 @@ class TisSmartTableConfirmationDialogComponent {
         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]" }] });
+    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=\"gap: 10px; justify-content: start; width: 100%; align-items: center; display: flex; padding: 8px 16px;\">\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 style=\"border-top: 1px solid rgba(0, 0, 0, 0.12); justify-content: end;\">\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>" }]
+            args: [{ selector: 'tis-smart-table-confirmation-dialog', standalone: false, template: "<h1 mat-dialog-title style=\"gap: 10px; justify-content: start; width: 100%; align-items: center; display: flex; padding: 8px 16px;\">\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 style=\"border-top: 1px solid rgba(0, 0, 0, 0.12); justify-content: end;\">\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]
@@ -392,7 +393,7 @@ class CreateColumnsTemplateComponent {
         if (this.data?.columnCustomizationUrlConfig) {
             this.columnCustomizationUrlConfig = this.data.columnCustomizationUrlConfig;
         }
-        // this.dialogRef.addPanelClass(['lg-w-45-per']);
+        this.dialogRef.addPanelClass(['tis-create-columns-template']);
     }
     ngOnInit() {
         this.t = this.data?.t || {};
@@ -525,11 +526,11 @@ class CreateColumnsTemplateComponent {
         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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: CreateColumnsTemplateComponent, isStandalone: false, selector: "tis-create-columns-template", ngImport: i0, template: "\n<form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\n    <h1 mat-dialog-title style=\"padding: 16px 24px; background-color: #e0e0e0; display: flex; justify-content: space-between; width: 100%; align-items: center;\">\n        {{t?.createColumnsTemplate?.title}}\n        <mat-icon (click)=\"onClose()\" style=\"cursor: pointer;\">clear</mat-icon>\n    </h1>\n    <div style=\"padding: 15px; padding-bottom: 0px;\">\n        <mat-form-field class=\"width-100 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=\"width-100 example-div\">\n                    <div class=\"example-item flex flex-row items-center\">\n                        <mat-icon cdkDragHandle style=\"cursor: pointer; 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 style=\"padding: 15px; padding-bottom: 0px;\">\n            <div style=\"display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem;\">\n                <mat-form-field class=\"width-100 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=\"width-100 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-cancel-button\" mat-dialog-close [disabled]=\"loading\">{{t?.cancel}}</button>\n        <button mat-flat-button type=\"submit\" class=\"tis-submit-button\" 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: [".width-100{width:100%!important}.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}.example-div{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.example-item{display:flex;flex-direction:row;align-items:center}.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}.tis-cancel-button:not(:disabled){text-transform:uppercase!important;color:var(--tis-primary, var(--mat-sys-primary, #3838a2))!important}.tis-cancel-button:not(:disabled):hover .mat-mdc-button-persistent-ripple:before{background-color:var(--tis-primary, var(--mat-sys-primary, #3838a2))}.tis-submit-button:not(:disabled){text-transform:uppercase!important;color:#fff!important;background-color:var(--tis-primary, var(--mat-sys-primary, #3838a2))!important}\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"] }]
+            args: [{ selector: 'tis-create-columns-template', standalone: false, template: "\n<form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\n    <h1 mat-dialog-title style=\"padding: 16px 24px; background-color: #e0e0e0; display: flex; justify-content: space-between; width: 100%; align-items: center;\">\n        {{t?.createColumnsTemplate?.title}}\n        <mat-icon (click)=\"onClose()\" style=\"cursor: pointer;\">clear</mat-icon>\n    </h1>\n    <div style=\"padding: 15px; padding-bottom: 0px;\">\n        <mat-form-field class=\"width-100 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=\"width-100 example-div\">\n                    <div class=\"example-item flex flex-row items-center\">\n                        <mat-icon cdkDragHandle style=\"cursor: pointer; 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 style=\"padding: 15px; padding-bottom: 0px;\">\n            <div style=\"display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem;\">\n                <mat-form-field class=\"width-100 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=\"width-100 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-cancel-button\" mat-dialog-close [disabled]=\"loading\">{{t?.cancel}}</button>\n        <button mat-flat-button type=\"submit\" class=\"tis-submit-button\" 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: [".width-100{width:100%!important}.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}.example-div{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.example-item{display:flex;flex-direction:row;align-items:center}.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}.tis-cancel-button:not(:disabled){text-transform:uppercase!important;color:var(--tis-primary, var(--mat-sys-primary, #3838a2))!important}.tis-cancel-button:not(:disabled):hover .mat-mdc-button-persistent-ripple:before{background-color:var(--tis-primary, var(--mat-sys-primary, #3838a2))}.tis-submit-button:not(:disabled){text-transform:uppercase!important;color:#fff!important;background-color:var(--tis-primary, var(--mat-sys-primary, #3838a2))!important}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.MatDialogRef }, { type: TisHelperService }, { type: i1$2.MatSnackBar }, { type: UserCustomizationService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -710,12 +711,20 @@ class TisColumnsBtnComponent {
         this.fromStartColumnNumberChange.emit(this.selectedTemplate?.fromStartColumnNumber ?? 0);
         this.fromEndColumnNumberChange.emit(this.selectedTemplate?.fromEndColumnNumber ?? 0);
     }
+    onMouseOverOut(event, color) {
+        const target = event.target;
+        target.style.color = color;
+    }
+    onMouseOut(event) {
+        const target = event.target;
+        target.style.color = `color: var(--tis-primary, var(--mat-sys-primary, #3838a2)) !important;`;
+    }
     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"] }] });
+    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-columns-btn\" style=\"background-color: var(--tis-light, #f5f5f5); color: black;\" [matMenuTriggerFor]=\"menu\">\n    <mat-icon>view_week</mat-icon>\n    <span style=\"display: flex; flex-direction: row;\">\n        {{selectedTemplate?.name}}\n        <mat-icon style=\"width: 15px; height: 15px; font-size: 20px; line-height: 16px;\">arrow_drop_down</mat-icon>\n    </span>\n</button>\n<mat-menu #menu=\"matMenu\" class=\"tis-columns-btn-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 style=\"padding-right: 4rem;\">{{template.name}}</span>\n        <mat-icon style=\"position: absolute; right: 0;\" class=\"delete-button\" (mouseover)=\"onMouseOverOut($event, `var(--tis-delete-icon, #bb333b)`)\" (mouseout)=\"onMouseOverOut($event, '')\" (click)=\"isDeleteTemplate = true\">delete</mat-icon>\n        <mat-icon style=\"position: absolute; right: 2rem;\" class=\"edit-button\" (mouseover)=\"onMouseOverOut($event, `var(--tis-edit-icon, var(--mat-sys-primary, #3838a2))`)\" (mouseout)=\"onMouseOverOut($event, '')\" (click)=\"isEditTemplate = true\">edit</mat-icon>\n    </button>\n    <mat-divider class=\"tis-mat-divider\" style=\"margin: 0px;\"></mat-divider>\n    <button mat-menu-item class=\"tis-create-columns-template-button\" style=\"color: var(--tis-primary, var(--mat-sys-primary, #3838a2));\" (click)=\"createNewTemplateDialog()\"><mat-icon style=\"color: var(--tis-primary, var(--mat-sys-primary, #3838a2));\">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>" }]
+            args: [{ selector: 'tis-columns-btn', standalone: false, template: "<!-- shared.tisColumnsBtnComponent -->\n<button mat-flat-button class=\"tis-columns-btn\" style=\"background-color: var(--tis-light, #f5f5f5); color: black;\" [matMenuTriggerFor]=\"menu\">\n    <mat-icon>view_week</mat-icon>\n    <span style=\"display: flex; flex-direction: row;\">\n        {{selectedTemplate?.name}}\n        <mat-icon style=\"width: 15px; height: 15px; font-size: 20px; line-height: 16px;\">arrow_drop_down</mat-icon>\n    </span>\n</button>\n<mat-menu #menu=\"matMenu\" class=\"tis-columns-btn-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 style=\"padding-right: 4rem;\">{{template.name}}</span>\n        <mat-icon style=\"position: absolute; right: 0;\" class=\"delete-button\" (mouseover)=\"onMouseOverOut($event, `var(--tis-delete-icon, #bb333b)`)\" (mouseout)=\"onMouseOverOut($event, '')\" (click)=\"isDeleteTemplate = true\">delete</mat-icon>\n        <mat-icon style=\"position: absolute; right: 2rem;\" class=\"edit-button\" (mouseover)=\"onMouseOverOut($event, `var(--tis-edit-icon, var(--mat-sys-primary, #3838a2))`)\" (mouseout)=\"onMouseOverOut($event, '')\" (click)=\"isEditTemplate = true\">edit</mat-icon>\n    </button>\n    <mat-divider class=\"tis-mat-divider\" style=\"margin: 0px;\"></mat-divider>\n    <button mat-menu-item class=\"tis-create-columns-template-button\" style=\"color: var(--tis-primary, var(--mat-sys-primary, #3838a2));\" (click)=\"createNewTemplateDialog()\"><mat-icon style=\"color: var(--tis-primary, var(--mat-sys-primary, #3838a2));\">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 }]
@@ -1470,11 +1479,11 @@ class TisSmartTableViewerComponent {
         }
     }
     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" }] });
+    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"] }]
+            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 }]