@servicemind.tis/tis-smart-table-viewer 2.2.0 → 2.3.2

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

@@ -5,7 +5,7 @@ import * as i6 from '@angular/forms';
 import { FormGroup, FormControl, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i3$1 from '@angular/router';
 import { RouterLink, RouterOutlet } from '@angular/router';
-import { BehaviorSubject, of, Subject, takeUntil, tap, map, shareReplay, debounceTime, distinctUntilChanged } from 'rxjs';
+import { BehaviorSubject, of, takeUntil, Subject, tap, map, shareReplay, debounceTime, distinctUntilChanged } from 'rxjs';
 import { SelectionModel } from '@angular/cdk/collections';
 import * as i13 from '@angular/cdk/drag-drop';
 import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
@@ -78,9 +78,9 @@ class ApiDataSource {
         this.apiSubject.complete();
         this.extraDataSubject.complete();
         this.loadingSubject.complete();
-        // if(this.apiSubs) {
-        //     this.apiSubs.unsubscribe();
-        // }
+        if (this.apiSubs) {
+            this.apiSubs.unsubscribe();
+        }
     }
     load(url, pageIndex, pageSize, search, filter, sortFilter) {
         if (this.apiSubs) {
@@ -99,6 +99,28 @@ class ApiDataSource {
             this.extraDataSubject.next(r?.extraData);
         });
     }
+    loadWithCancellation(url, pageIndex, pageSize, search, filter, sortFilter, cancelSubject) {
+        if (this.apiSubs) {
+            this.apiSubs.unsubscribe();
+        }
+        this.loadingSubject.next(true);
+        let apiCall$ = this.apiService.getList(url, (pageIndex + 1), pageSize, search, { filter }, { sortFilter }).pipe(catchError(() => of([])), finalize(() => this.loadingSubject.next(false)));
+        // Add cancellation capability if provided
+        if (cancelSubject) {
+            apiCall$ = apiCall$.pipe(takeUntil(cancelSubject));
+        }
+        this.apiSubs = apiCall$.subscribe(r => {
+            console.log(`DataSource: Url: ${url}, Reply:`, r);
+            if (r?.data?.length > 0) {
+                this.totalDataLength.next(r?.total);
+            }
+            else {
+                this.totalDataLength.next(0);
+            }
+            this.apiSubject.next(r?.data);
+            this.extraDataSubject.next(r?.extraData);
+        });
+    }
 }
 
 class ApiService {
@@ -166,6 +188,943 @@ const removeMultipleKeys = (keys) => {
     });
 };
 
+/**
+ * TimeoutManager - A utility class for managing timeouts to prevent memory leaks
+ *
+ * This class provides a centralized way to create, track, and clean up setTimeout calls.
+ * It automatically handles cleanup when component is destroyed to prevent memory leaks.
+ *
+ * @example
+ * ```typescript
+ * export class MyComponent implements OnDestroy {
+ *   private timeoutManager = new TimeoutManager();
+ *
+ *   someMethod() {
+ *     this.timeoutManager.createTimeout(() => {
+ *       console.log('Delayed execution');
+ *     }, 1000);
+ *   }
+ *
+ *   ngOnDestroy() {
+ *     this.timeoutManager.clearAll(); // Clean up all pending timeouts
+ *   }
+ * }
+ * ```
+ */
+class TimeoutManager {
+    activeTimeouts = new Set();
+    /**
+     * Creates a tracked timeout that will be automatically cleaned up
+     * @param callback - Function to execute after delay
+     * @param delay - Delay in milliseconds
+     * @returns The timeout ID (same as setTimeout return value)
+     */
+    createTimeout(callback, delay) {
+        const timeoutId = setTimeout(() => {
+            // Auto-remove from tracking when timeout executes naturally
+            this.activeTimeouts.delete(timeoutId);
+            callback();
+        }, delay);
+        // Add to tracking set
+        this.activeTimeouts.add(timeoutId);
+        return timeoutId;
+    }
+    /**
+     * Manually clear a specific timeout
+     * @param timeoutId - The timeout ID returned from createTimeout
+     */
+    clearTimeout(timeoutId) {
+        if (this.activeTimeouts.has(timeoutId)) {
+            clearTimeout(timeoutId);
+            this.activeTimeouts.delete(timeoutId);
+        }
+    }
+    /**
+     * Clear all pending timeouts
+     * This should be called in ngOnDestroy to prevent memory leaks
+     */
+    clearAll() {
+        this.activeTimeouts.forEach(timeoutId => clearTimeout(timeoutId));
+        this.activeTimeouts.clear();
+    }
+    /**
+     * Get the number of active (pending) timeouts
+     * Useful for debugging and testing
+     */
+    get activeCount() {
+        return this.activeTimeouts.size;
+    }
+    /**
+     * Check if a specific timeout is still active
+     * @param timeoutId - The timeout ID to check
+     */
+    isActive(timeoutId) {
+        return this.activeTimeouts.has(timeoutId);
+    }
+}
+/**
+ * Static helper functions for one-off timeout usage
+ * Use the TimeoutManager class for more comprehensive timeout management
+ */
+class TimeoutHelper {
+    /**
+     * Create a single tracked timeout with external cleanup responsibility
+     * @param callback - Function to execute after delay
+     * @param delay - Delay in milliseconds
+     * @param trackingSet - Set to track the timeout for cleanup
+     * @returns The timeout ID
+     */
+    static createTrackedTimeout(callback, delay, trackingSet) {
+        const timeoutId = setTimeout(() => {
+            trackingSet.delete(timeoutId);
+            callback();
+        }, delay);
+        trackingSet.add(timeoutId);
+        return timeoutId;
+    }
+    /**
+     * Clear all timeouts in a tracking set
+     * @param trackingSet - Set containing timeout IDs to clear
+     */
+    static clearAllTimeouts(trackingSet) {
+        trackingSet.forEach(timeoutId => clearTimeout(timeoutId));
+        trackingSet.clear();
+    }
+}
+
+/**
+ * Centralized date/time utility helper for consistent date handling across the library.
+ * Provides common date formatting and conversion functions to avoid code duplication.
+ */
+class DateTimeHelper {
+    /**
+     * Formats a date value for display based on form control type
+     * @param value - The date value (Date, DateTime, string, number)
+     * @param formControlType - The type of form control ('date', 'date-time', etc.)
+     * @returns Formatted date string
+     */
+    static formatForDisplay(value, formControlType) {
+        if (!value)
+            return '';
+        const dateTime = this.toDateTime(value);
+        if (!dateTime?.isValid)
+            return '';
+        switch (formControlType) {
+            case 'date':
+                return dateTime.toFormat('dd-MM-yyyy');
+            case 'date-time':
+                return dateTime.toFormat('dd-MM-yyyy HH:mm');
+            case 'date-time-with-seconds':
+                return dateTime.toFormat('dd-MM-yyyy HH:mm:ss');
+            default:
+                return dateTime.toFormat('dd-MM-yyyy');
+        }
+    }
+    /**
+     * Converts various date formats to DateTime object
+     * @param value - Date value in various formats
+     * @returns DateTime object or null if invalid
+     */
+    static toDateTime(value) {
+        if (!value)
+            return null;
+        if (DateTime.isDateTime(value)) {
+            return value;
+        }
+        if (value instanceof Date) {
+            return DateTime.fromJSDate(value);
+        }
+        if (typeof value === 'string' && value !== '') {
+            // Try parsing as milliseconds first (if numeric string)
+            const numValue = Number(value);
+            if (!isNaN(numValue) && numValue > 0) {
+                return DateTime.fromMillis(numValue);
+            }
+            // Try parsing as ISO string
+            return DateTime.fromISO(value);
+        }
+        if (typeof value === 'number') {
+            return DateTime.fromMillis(value);
+        }
+        return null;
+    }
+    /**
+     * Converts date/DateTime objects to milliseconds for API calls
+     * @param value - Date value
+     * @returns Milliseconds or original value if not a date
+     */
+    static toMilliseconds(value) {
+        if (!value)
+            return value;
+        if (value instanceof Date) {
+            return DateTime.fromJSDate(value).toMillis();
+        }
+        if (DateTime.isDateTime(value)) {
+            return value.toMillis();
+        }
+        return value;
+    }
+    /**
+     * Checks if a query parameter key represents a date field
+     * @param key - Query parameter key
+     * @param value - Query parameter value
+     * @returns True if it's a date field
+     */
+    static isDateQueryParam(key, value) {
+        return key.toLowerCase().includes('date') && value.length === 13;
+    }
+    /**
+     * Parses date from query parameters
+     * @param value - Query parameter value (milliseconds as string)
+     * @returns DateTime object
+     */
+    static parseFromQueryParam(value) {
+        return DateTime.fromMillis(Number(value));
+    }
+}
+
+/**
+ * Centralized query parameter utility helper for consistent URL parameter handling.
+ * Provides common functions for parsing, validating, and transforming query parameters.
+ */
+class QueryParamsHelper {
+    /**
+     * Parses query parameters from URL and handles type conversions
+     * @param url - Full URL string
+     * @returns Parsed query parameters object
+     */
+    static parseQueryParams(url) {
+        const urlObj = new URL(url);
+        const params = new URLSearchParams(urlObj.search);
+        const paramsObj = {};
+        params.forEach((value, key) => {
+            // Check if the parameter already exists (for handling multiple values)
+            if (paramsObj.hasOwnProperty(key)) {
+                // If it's not already an array, convert it to an array
+                if (!Array.isArray(paramsObj[key])) {
+                    paramsObj[key] = [paramsObj[key]];
+                }
+                // Push the new value to the existing array
+                paramsObj[key].push(value);
+            }
+            else {
+                // Assign the value to the key in the object
+                paramsObj[key] = value;
+            }
+        });
+        return paramsObj;
+    }
+    /**
+     * Checks if a query parameter value is valid (not empty, null, or undefined)
+     * @param value - Query parameter value
+     * @returns True if valid
+     */
+    static isValidParam(value) {
+        return value && value !== '' && value !== 'null' && value !== 'undefined';
+    }
+    /**
+     * Processes a query parameter value and handles arrays
+     * @param value - Raw query parameter value
+     * @returns Processed value (string or array)
+     */
+    static processParamValue(value) {
+        if (value.includes(',')) {
+            return value.split(',');
+        }
+        return value;
+    }
+    /**
+     * Processes query parameters for filter form with type conversions
+     * @param queryParams - Raw query parameters
+     * @param columnsCodeMapping - Column mapping for transformations
+     * @returns Processed filter and sort objects
+     */
+    static processForFilters(queryParams, columnsCodeMapping) {
+        const filterParams = {};
+        const sortParams = {};
+        let pageIndex = 0;
+        let pageSize = 10;
+        let search = '';
+        for (const key in queryParams) {
+            if (!this.isValidParam(queryParams[key]))
+                continue;
+            let fixedKeyMatched = false;
+            const value = queryParams[key];
+            // Handle fixed parameters
+            if (key.toLowerCase() === 'pageindex') {
+                pageIndex = Number(value);
+                fixedKeyMatched = true;
+            }
+            else if (key.toLowerCase() === 'pagesize') {
+                pageSize = Number(value);
+                fixedKeyMatched = true;
+            }
+            else if (key.toLowerCase() === 'sortby') {
+                sortParams.sortBy = value;
+                fixedKeyMatched = true;
+            }
+            else if (key.toLowerCase() === 'sortorder') {
+                sortParams.sortOrder = value;
+                fixedKeyMatched = true;
+            }
+            else if (key.toLowerCase() === 'search') {
+                search = value;
+                fixedKeyMatched = true;
+            }
+            else if (DateTimeHelper.isDateQueryParam(key, value)) {
+                // Handle date parameters
+                filterParams[key] = DateTimeHelper.parseFromQueryParam(value);
+                fixedKeyMatched = true;
+            }
+            if (!fixedKeyMatched) {
+                filterParams[key] = this.processParamValue(value);
+                // Apply transformation if mapping exists
+                const mapping = columnsCodeMapping.find(ccm => ccm.filterFormKey === key);
+                if (mapping?.transformQueryParamFn) {
+                    filterParams[key] = mapping.transformQueryParamFn(filterParams[key]);
+                }
+            }
+        }
+        return { filterParams, sortParams, pageIndex, pageSize, search };
+    }
+    /**
+     * Builds query string from filter data with proper encoding
+     * @param filterData - Filter form data
+     * @param sortParams - Sort parameters
+     * @param pageIndex - Current page index
+     * @param pageSize - Current page size
+     * @param search - Search term
+     * @returns URLSearchParams object
+     */
+    static buildQueryString(filterData, sortParams, pageIndex, pageSize, search) {
+        const qs = new URLSearchParams();
+        // Process filter data
+        if (filterData) {
+            const processedFilter = { ...filterData };
+            // Convert date objects to milliseconds
+            for (const key in processedFilter) {
+                processedFilter[key] = DateTimeHelper.toMilliseconds(processedFilter[key]);
+            }
+            // Append filter parameters
+            Object.keys(processedFilter).forEach(key => {
+                const value = processedFilter[key];
+                if (this.isValidParam(value)) {
+                    if (value === '*') {
+                        qs.append(key, '');
+                    }
+                    else {
+                        qs.append(key, value);
+                    }
+                }
+            });
+        }
+        // Append sort parameters
+        if (sortParams) {
+            Object.keys(sortParams).forEach(key => {
+                if (this.isValidParam(sortParams[key])) {
+                    qs.append(key, sortParams[key]);
+                }
+            });
+        }
+        // Append pagination and search
+        qs.append('pageIndex', pageIndex.toString());
+        qs.append('pageSize', pageSize.toString());
+        if (search !== '') {
+            qs.append('search', search);
+        }
+        return qs;
+    }
+}
+
+/**
+ * Centralized filter display utility helper for managing filter value formatting and grouping.
+ * Handles the complex logic of grouping and displaying filter values in a consistent manner.
+ */
+class FilterDisplayHelper {
+    /**
+     * Formats filter values based on form control type for display
+     * @param items - Array of filter display values
+     * @returns Processed array with formatted display values
+     */
+    static formatFilterValuesForDisplay(items) {
+        return items.map(item => {
+            const processedItem = { ...item };
+            // Handle different form control types
+            switch (item.formControlType) {
+                case 'input':
+                case 'checkbox':
+                    // No special formatting needed
+                    break;
+                case 'date':
+                    processedItem.valueKey = DateTimeHelper.formatForDisplay(item.value, 'date');
+                    break;
+                case 'date-time':
+                    processedItem.valueKey = DateTimeHelper.formatForDisplay(item.value, 'date-time');
+                    break;
+                default:
+                    // Keep original valueKey if no special handling needed
+                    break;
+            }
+            return processedItem;
+        });
+    }
+    /**
+     * Groups filter values by form control attributes
+     * @param data - Array of filter display values
+     * @returns Grouped filter values
+     */
+    static groupByFormControlAttributes(data) {
+        const groups = {};
+        // First format the data for display
+        const formattedData = this.formatFilterValuesForDisplay(data);
+        formattedData.forEach(item => {
+            const key = `${item.formControlName}-${item.formControlType}`;
+            if (!groups[key]) {
+                groups[key] = {
+                    formControlName: item.formControlName,
+                    formControlType: item.formControlType,
+                    arrValues: []
+                };
+            }
+            const isSingleValue = this.isSingleValueFormControl(item.formControlType, item.isSingleValue);
+            // Check if only the last value should be kept due to isSingleValue or duplicated value/valueKey
+            if (isSingleValue) {
+                groups[key].arrValues = [item]; // Replace with the current item
+            }
+            else {
+                // Check for duplicate value and valueKey in the current array
+                const existingIndex = groups[key].arrValues.findIndex(x => x.value === item.value && x.valueKey === item.valueKey);
+                if (existingIndex !== -1) {
+                    groups[key].arrValues[existingIndex] = item; // Replace the duplicate
+                }
+                else {
+                    groups[key].arrValues.push(item); // Add new item
+                }
+            }
+        });
+        return Object.values(groups);
+    }
+    /**
+     * Determines if a form control should only have single values
+     * @param formControlType - Type of form control
+     * @param explicitSingleValue - Explicit single value flag
+     * @returns True if single value control
+     */
+    static isSingleValueFormControl(formControlType, explicitSingleValue) {
+        if (explicitSingleValue !== undefined) {
+            return explicitSingleValue;
+        }
+        return ['input', 'radio', 'date', 'date-time', 'toggle'].includes(formControlType);
+    }
+    /**
+     * Updates selected filter values by replacing values for a specific form control
+     * @param currentValues - Current selected filter values
+     * @param newValues - New values to add/update
+     * @param formControlName - Name of the form control being updated
+     * @returns Updated filter values and grouped values
+     */
+    static updateSelectedFilterValues(currentValues, newValues, formControlName) {
+        let targetFormControlName;
+        let newValuesArray;
+        if (Array.isArray(newValues)) {
+            newValuesArray = newValues;
+            targetFormControlName = formControlName || newValues[0]?.formControlName;
+        }
+        else {
+            newValuesArray = [newValues];
+            targetFormControlName = formControlName || newValues?.formControlName;
+        }
+        // Remove existing values for this form control
+        const filteredValues = currentValues.filter(sfv => sfv.formControlName !== targetFormControlName);
+        // Group the new values
+        const newGroupedValues = this.groupByFormControlAttributes(newValuesArray);
+        // Add new values for the target form control
+        newGroupedValues.forEach(gv => {
+            if (gv.formControlName === targetFormControlName) {
+                gv.arrValues.forEach(v => {
+                    filteredValues.push(v);
+                });
+            }
+        });
+        // Return updated values and all grouped values
+        const allGroupedValues = this.groupByFormControlAttributes(filteredValues);
+        return {
+            selectedFilterValues: filteredValues,
+            selectedFilterGroupedValues: allGroupedValues
+        };
+    }
+    /**
+     * Filters selected values to only show those present in query parameters
+     * @param selectedValues - All selected filter values
+     * @param queryParams - Current query parameters
+     * @returns Filtered values for display
+     */
+    static getValuesForDisplay(selectedValues, queryParams) {
+        return selectedValues.filter(sf => queryParams.hasOwnProperty(sf.formControlName));
+    }
+    /**
+     * Removes a specific filter value from the collection
+     * @param selectedValues - Current selected filter values
+     * @param filterToRemove - Filter value to remove
+     * @returns Updated filter values
+     */
+    static removeFilterValue(selectedValues, filterToRemove) {
+        return selectedValues.filter(sfv => !(sfv.formControlName === filterToRemove.formControlName &&
+            sfv.valueKey === filterToRemove.valueKey));
+    }
+}
+
+/**
+ * Centralized validation utility helper for common validation tasks.
+ * Provides reusable validation functions to avoid code duplication.
+ */
+class ValidationHelper {
+    /**
+     * Checks if a value is not null, undefined, or empty string
+     * @param value - Value to check
+     * @returns True if value has content
+     */
+    static hasValue(value) {
+        return value !== null && value !== undefined && value !== '';
+    }
+    /**
+     * Checks if any values in an object are non-empty
+     * @param obj - Object to check
+     * @returns True if any value is non-empty
+     */
+    static hasNonEmptyValue(obj) {
+        if (!obj)
+            return false;
+        return Object.values(obj).some(value => this.hasValue(value));
+    }
+    /**
+     * Checks if a form has any non-empty values
+     * @param formData - Form data object
+     * @returns True if form has any data
+     */
+    static hasFormData(formData) {
+        if (!formData)
+            return false;
+        return this.hasNonEmptyValue(formData);
+    }
+    /**
+     * Validates if an array has items
+     * @param array - Array to check
+     * @returns True if array exists and has items
+     */
+    static hasItems(array) {
+        return Array.isArray(array) && array.length > 0;
+    }
+    /**
+     * Checks if a URL is valid
+     * @param url - URL string to validate
+     * @returns True if URL is valid
+     */
+    static isValidUrl(url) {
+        if (!url || typeof url !== 'string')
+            return false;
+        try {
+            new URL(url);
+            return true;
+        }
+        catch {
+            return false;
+        }
+    }
+    /**
+     * Validates if a string is a valid number
+     * @param value - Value to check
+     * @returns True if value is a valid number
+     */
+    static isValidNumber(value) {
+        return !isNaN(Number(value)) && isFinite(Number(value));
+    }
+    /**
+     * Checks if an object has a specific property with a valid value
+     * @param obj - Object to check
+     * @param property - Property name
+     * @returns True if property exists and has a value
+     */
+    static hasProperty(obj, property) {
+        return obj && obj.hasOwnProperty(property) && this.hasValue(obj[property]);
+    }
+    /**
+     * Validates if a selection model row has the required key
+     * @param row - Row object
+     * @param keyName - Key property name
+     * @returns True if row has the key property with a value
+     */
+    static hasRowKey(row, keyName) {
+        return row && this.hasProperty(row, keyName);
+    }
+    /**
+     * Checks if a filter value should be processed (not null, empty, or invalid)
+     * @param value - Filter value
+     * @returns True if filter value is valid for processing
+     */
+    static isValidFilterValue(value) {
+        if (!this.hasValue(value))
+            return false;
+        // Check for common invalid filter values
+        const invalidValues = ['null', 'undefined', '*'];
+        if (typeof value === 'string' && invalidValues.includes(value)) {
+            return value === '*'; // Special case: '*' is valid but gets converted to empty string
+        }
+        return true;
+    }
+    /**
+     * Validates pagination parameters
+     * @param pageIndex - Page index
+     * @param pageSize - Page size
+     * @returns Object with validation results
+     */
+    static validatePagination(pageIndex, pageSize) {
+        const validPageIndex = this.isValidNumber(pageIndex) ? Number(pageIndex) : 0;
+        const validPageSize = this.isValidNumber(pageSize) ? Number(pageSize) : 10;
+        return {
+            isValid: validPageIndex >= 0 && validPageSize > 0,
+            pageIndex: Math.max(0, validPageIndex),
+            pageSize: Math.max(1, validPageSize)
+        };
+    }
+}
+
+/**
+ * Centralized collection management utility helper for common array and object operations.
+ * Provides reusable functions for managing collections, selections, and data structures.
+ */
+class CollectionHelper {
+    /**
+     * Safely clears an array if it exists
+     * @param array - Array to clear
+     */
+    static clearArray(array) {
+        if (Array.isArray(array)) {
+            array.length = 0;
+        }
+    }
+    /**
+     * Safely clears a Set if it exists
+     * @param set - Set to clear
+     */
+    static clearSet(set) {
+        if (set instanceof Set) {
+            set.clear();
+        }
+    }
+    /**
+     * Safely clears a Map if it exists
+     * @param map - Map to clear
+     */
+    static clearMap(map) {
+        if (map instanceof Map) {
+            map.clear();
+        }
+    }
+    /**
+     * Gets a consistent identifier for a row based on available keys
+     * @param row - Row object
+     * @param primaryKey - Primary key property name (default: 'id')
+     * @param fallbackKey - Fallback key property name
+     * @returns Row identifier or JSON string as last resort
+     */
+    static getRowIdentifier(row, primaryKey = 'id', fallbackKey) {
+        if (!row)
+            return '';
+        // Try primary key first
+        if (row[primaryKey] !== undefined && row[primaryKey] !== null) {
+            return row[primaryKey];
+        }
+        // Try fallback key if provided
+        if (fallbackKey && row[fallbackKey] !== undefined && row[fallbackKey] !== null) {
+            return row[fallbackKey];
+        }
+        // Last resort: stringify the object (not recommended for large objects)
+        return JSON.stringify(row);
+    }
+    /**
+     * Creates a hash from an array of objects for cache validation
+     * @param items - Array of items to hash
+     * @param keyExtractor - Function to extract key from each item
+     * @returns Hash string
+     */
+    static createArrayHash(items, keyExtractor) {
+        if (!Array.isArray(items))
+            return '';
+        return JSON.stringify(items.map(keyExtractor));
+    }
+    /**
+     * Safely filters an array with predicate function
+     * @param array - Array to filter
+     * @param predicate - Filter predicate function
+     * @returns Filtered array or empty array if input is invalid
+     */
+    static safeFilter(array, predicate) {
+        if (!Array.isArray(array))
+            return [];
+        return array.filter(predicate);
+    }
+    /**
+     * Safely maps an array with transform function
+     * @param array - Array to map
+     * @param transform - Transform function
+     * @returns Mapped array or empty array if input is invalid
+     */
+    static safeMap(array, transform) {
+        if (!Array.isArray(array))
+            return [];
+        return array.map(transform);
+    }
+    /**
+     * Safely finds an item in array
+     * @param array - Array to search
+     * @param predicate - Find predicate function
+     * @returns Found item or undefined
+     */
+    static safeFind(array, predicate) {
+        if (!Array.isArray(array))
+            return undefined;
+        return array.find(predicate);
+    }
+    /**
+     * Creates a Map from an array for O(1) lookups
+     * @param array - Array to convert
+     * @param keyExtractor - Function to extract key from each item
+     * @returns Map with keys and items
+     */
+    static createLookupMap(array, keyExtractor) {
+        const map = new Map();
+        if (!Array.isArray(array))
+            return map;
+        array.forEach(item => {
+            const key = keyExtractor(item);
+            map.set(key, item);
+        });
+        return map;
+    }
+    /**
+     * Checks if two arrays have the same items (order doesn't matter)
+     * @param array1 - First array
+     * @param array2 - Second array
+     * @param keyExtractor - Function to extract comparison key
+     * @returns True if arrays contain same items
+     */
+    static arraysEqual(array1, array2, keyExtractor) {
+        if (!Array.isArray(array1) || !Array.isArray(array2))
+            return false;
+        if (array1.length !== array2.length)
+            return false;
+        if (keyExtractor) {
+            const keys1 = array1.map(keyExtractor).sort();
+            const keys2 = array2.map(keyExtractor).sort();
+            return JSON.stringify(keys1) === JSON.stringify(keys2);
+        }
+        else {
+            return JSON.stringify([...array1].sort()) === JSON.stringify([...array2].sort());
+        }
+    }
+    /**
+     * Safely removes items from a Set based on a predicate
+     * @param set - Set to modify
+     * @param predicate - Function to determine if item should be removed
+     */
+    static removeFromSet(set, predicate) {
+        if (!(set instanceof Set))
+            return;
+        const itemsToRemove = [];
+        set.forEach(item => {
+            if (predicate(item)) {
+                itemsToRemove.push(item);
+            }
+        });
+        itemsToRemove.forEach(item => set.delete(item));
+    }
+    /**
+     * Safely clones an array to prevent mutation issues
+     * @param array - Array to clone
+     * @returns Cloned array or empty array if input is invalid
+     */
+    static cloneArray(array) {
+        if (!Array.isArray(array))
+            return [];
+        return [...array];
+    }
+    /**
+     * Performs safe property access with default value
+     * @param obj - Object to access
+     * @param path - Property path (e.g., 'user.profile.name')
+     * @param defaultValue - Default value if property doesn't exist
+     * @returns Property value or default
+     */
+    static getNestedProperty(obj, path, defaultValue = null) {
+        if (!obj || !path)
+            return defaultValue;
+        // If there is no '.', just return the direct property
+        if (!path.includes('.')) {
+            return obj[path] !== undefined ? obj[path] : defaultValue;
+        }
+        // Otherwise, traverse the nested properties
+        try {
+            return path.split('.').reduce((acc, part) => {
+                return acc && acc[part] !== undefined ? acc[part] : defaultValue;
+            }, obj);
+        }
+        catch {
+            return defaultValue;
+        }
+    }
+}
+
+/**
+ * Centralized URL and navigation utility helper.
+ * Provides common functions for URL manipulation and navigation.
+ */
+class UrlHelper {
+    /**
+     * Extracts the home URL from current window location
+     * @returns Home URL path
+     */
+    static getHomeUrl() {
+        const pathname = window.location.pathname;
+        return `/${pathname.split('/')[1]}`;
+    }
+    /**
+     * Safely navigates to a URL if it's valid
+     * @param router - Angular Router instance
+     * @param url - URL to navigate to
+     * @returns Promise<boolean> - Navigation result
+     */
+    static safeNavigate(router, url) {
+        if (!url || typeof url !== 'string') {
+            return null;
+        }
+        try {
+            return router.navigateByUrl(url);
+        }
+        catch (error) {
+            console.warn('Navigation error:', error);
+            return null;
+        }
+    }
+    /**
+     * Updates the browser URL without navigation using Location service
+     * @param location - Angular Location service
+     * @param baseUrl - Base URL path
+     * @param queryString - Query string parameters
+     */
+    static updateUrl(location, baseUrl, queryString) {
+        const newUrl = `${baseUrl}?${queryString}`;
+        const currentUrl = window.location.pathname + window.location.search;
+        if (currentUrl !== newUrl) {
+            location.go(newUrl);
+        }
+    }
+    /**
+     * Builds a complete URL with query parameters
+     * @param baseUrl - Base URL path
+     * @param queryParams - URLSearchParams object
+     * @returns Complete URL string
+     */
+    static buildUrl(baseUrl, queryParams) {
+        const queryString = queryParams.toString();
+        return queryString ? `${baseUrl}?${queryString}` : baseUrl;
+    }
+    /**
+     * Gets the base URL without query parameters
+     * @param router - Angular Router instance
+     * @returns Base URL string
+     */
+    static getBaseUrl(router) {
+        return router.url.split('?')[0];
+    }
+    /**
+     * Checks if current URL differs from generated URL
+     * @param generatedUrl - Generated URL to compare
+     * @returns True if URLs are different
+     */
+    static hasUrlChanged(generatedUrl) {
+        const currentUrl = window.location.pathname + window.location.search;
+        return currentUrl !== generatedUrl;
+    }
+    /**
+     * Extracts query parameters from a URL string
+     * @param url - Full URL string
+     * @returns URLSearchParams object
+     */
+    static extractQueryParams(url) {
+        try {
+            const urlObj = new URL(url);
+            return new URLSearchParams(urlObj.search);
+        }
+        catch (error) {
+            console.warn('Invalid URL for query param extraction:', url);
+            return null;
+        }
+    }
+    /**
+     * Handles button click actions (URL navigation or callback execution)
+     * @param router - Angular Router instance
+     * @param config - Button configuration object
+     * @param primaryUrlKey - Primary URL property name (default: 'btnUrl')
+     * @param primaryClickKey - Primary click handler property name (default: 'btnClick')
+     */
+    static handleButtonClick(router, config, primaryUrlKey = 'btnUrl', primaryClickKey = 'btnClick') {
+        if (!config)
+            return;
+        // Try callback first
+        if (config[primaryClickKey] && typeof config[primaryClickKey] === 'function') {
+            try {
+                config[primaryClickKey]();
+            }
+            catch (error) {
+                console.warn('Error executing button callback:', error);
+            }
+        }
+        // Fallback to URL navigation
+        else if (config[primaryUrlKey]) {
+            this.safeNavigate(router, config[primaryUrlKey]);
+        }
+    }
+    /**
+     * Handles secondary button click actions
+     * @param router - Angular Router instance
+     * @param config - Button configuration object
+     */
+    static handleSecondaryButtonClick(router, config) {
+        this.handleButtonClick(router, config, 'secondBtnUrl', 'secondBtnClick');
+    }
+    /**
+     * Validates if a URL string is properly formatted
+     * @param url - URL to validate
+     * @returns True if URL is valid
+     */
+    static isValidUrl(url) {
+        if (!url || typeof url !== 'string')
+            return false;
+        try {
+            // Allow relative URLs starting with '/'
+            if (url.startsWith('/'))
+                return true;
+            // Validate absolute URLs
+            new URL(url);
+            return true;
+        }
+        catch {
+            return false;
+        }
+    }
+    /**
+     * Safely encodes URL parameters
+     * @param value - Value to encode
+     * @returns Encoded string
+     */
+    static encodeParam(value) {
+        if (value === null || value === undefined)
+            return '';
+        return encodeURIComponent(String(value));
+    }
+}
+
 class ScrollingDirective {
     el;
     constructor(el) {
@@ -223,25 +1182,68 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
 
 class UserCustomizationService {
     http;
+    token = '';
     constructor(http) {
         this.http = http;
     }
     getColumnsTemplates(url, listComponent) {
+        if (this.token) {
+            return this.http.get(`${url}?listComponent=${listComponent}`, {
+                headers: {
+                    'Authorization': `Bearer ${this.token}`
+                }
+            });
+        }
         return this.http.get(`${url}?listComponent=${listComponent}`);
     }
     addColumnsTemplate(url, body) {
+        if (this.token) {
+            return this.http.post(`${url}`, body, {
+                headers: {
+                    'Authorization': `Bearer ${this.token}`
+                }
+            });
+        }
         return this.http.post(url, body);
     }
     updateColumnsTemplate(url, body) {
+        if (this.token) {
+            return this.http.post(`${url}`, body, {
+                headers: {
+                    'Authorization': `Bearer ${this.token}`
+                }
+            });
+        }
         return this.http.post(url, body);
     }
     deleteColumnsTemplate(url, body) {
+        if (this.token) {
+            return this.http.put(`${url}`, body, {
+                headers: {
+                    'Authorization': `Bearer ${this.token}`
+                }
+            });
+        }
         return this.http.put(url, body);
     }
     getSelectedColumnsTemplate(url, listComponent) {
+        if (this.token) {
+            return this.http.get(`${url}?listComponent=${listComponent}`, {
+                headers: {
+                    'Authorization': `Bearer ${this.token}`
+                }
+            });
+        }
         return this.http.get(`${url}?listComponent=${listComponent}`);
     }
     updateSelectedColumnsTemplate(url, body) {
+        if (this.token) {
+            return this.http.post(`${url}`, body, {
+                headers: {
+                    'Authorization': `Bearer ${this.token}`
+                }
+            });
+        }
         return this.http.post(url, body);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: UserCustomizationService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
@@ -563,13 +1565,16 @@ class TisColumnsBtnComponent {
     columns;
     skipTranslation = false;
     customColumns;
-    displayedColumnsChange = new EventEmitter();
-    fromStartColumnNumberChange = new EventEmitter();
-    fromEndColumnNumberChange = new EventEmitter();
     selectedTemplate = {
         id: -1,
-        name: 'Default'
+        name: 'Default',
+        fromStartColumnNumber: 0,
+        fromEndColumnNumber: 0,
     };
+    selectedTemplateChange = new EventEmitter();
+    displayedColumnsChange = new EventEmitter();
+    fromStartColumnNumberChange = new EventEmitter();
+    fromEndColumnNumberChange = new EventEmitter();
     displayedColumns = [];
     templates = [];
     isDeleteTemplate = false;
@@ -626,6 +1631,7 @@ class TisColumnsBtnComponent {
                     this.templates = [res, ...this.templates];
                 }
                 this.selectedTemplate = res;
+                this.selectedTemplateChange.emit(this.selectedTemplate);
                 this.changeDisplayColumns();
             }
         });
@@ -645,6 +1651,7 @@ class TisColumnsBtnComponent {
             if (r?.data && Object.keys(r?.data).length != 0) {
                 if (r.data?.listComponentColumnsTemplateId > 0) {
                     this.selectedTemplate = this.templates?.find((t) => t.id == r.data?.listComponentColumnsTemplateId);
+                    this.selectedTemplateChange.emit(this.selectedTemplate);
                 }
                 console.log("getSelectedColumnsTemplate:", this.templates, this.selectedTemplate);
                 this.changeDisplayColumns();
@@ -685,6 +1692,7 @@ class TisColumnsBtnComponent {
                                     fromStartColumnNumber: 0,
                                     fromEndColumnNumber: 0,
                                 };
+                                this.selectedTemplateChange.emit(this.selectedTemplate);
                                 this.changeDisplayColumns();
                             }
                         }, err => this.helper.showHttpErrorMsg(err));
@@ -707,6 +1715,7 @@ class TisColumnsBtnComponent {
                             name: 'Default'
                         };
                     }
+                    this.selectedTemplateChange.emit(this.selectedTemplate);
                     this.userCustomizationService.updateSelectedColumnsTemplate(this.columnCustomizationUrlConfig.updateSelectedTemplate, { id: this.selectedTemplate?.id, listComponentName: this.componentName }).subscribe((r) => {
                         this.changeDisplayColumns();
                     });
@@ -736,7 +1745,7 @@ class TisColumnsBtnComponent {
         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-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"] }] });
+    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", selectedTemplate: "selectedTemplate" }, outputs: { selectedTemplateChange: "selectedTemplateChange", 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,
@@ -759,6 +1768,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
                 type: Input
             }], customColumns: [{
                 type: Input
+            }], selectedTemplate: [{
+                type: Input
+            }], selectedTemplateChange: [{
+                type: Output
             }], displayedColumnsChange: [{
                 type: Output
             }], fromStartColumnNumberChange: [{
@@ -909,6 +1922,12 @@ class TisSmartTableViewerComponent {
     onDataLoaded = new EventEmitter();
     onSetExtraData = new EventEmitter();
     onSetTotal = new EventEmitter();
+    selectedTemplate = {
+        id: -1,
+        name: 'Default',
+        fromStartColumnNumber: 0,
+        fromEndColumnNumber: 0,
+    };
     selectedFilterValues = [];
     finalSelectedFilterValuesToDisplay = [];
     selectedFilterGroupedValues = [];
@@ -924,6 +1943,20 @@ class TisSmartTableViewerComponent {
     search = '';
     searchCtrl = new FormControl();
     _onDestroy = new Subject();
+    // Additional subscriptions that need cleanup
+    _selectionSubscription;
+    _handsetSubscription;
+    _queryParamsSubscription;
+    // Memory-efficient caching
+    _columnMappingCache = new Map();
+    _displayedColumnsCache = [];
+    _lastColumnsCodeMappingHash = '';
+    // Race condition prevention
+    _currentRequestSubject = new Subject();
+    // Timeout management for proper cleanup - prevent memory leaks
+    timeoutManager = new TimeoutManager();
+    // Computed row backgrounds for optimal performance
+    computedRowBackgrounds = new Map();
     dataSource;
     _sort;
     _sortSubscription;
@@ -970,6 +2003,8 @@ class TisSmartTableViewerComponent {
     isExpandedRow = false;
     expandedTemplate;
     isAllExpanded = false;
+    // Expansion state management - avoid direct mutation
+    expandedRowIds = new Set();
     isHandset$;
     isMobile = false;
     constructor(
@@ -981,82 +2016,48 @@ class TisSmartTableViewerComponent {
         this.router = router;
         this.location = location;
         this.breakpointObserver = breakpointObserver;
-        this.selection.changed.subscribe(change => {
-            change.added.forEach(item => this.selectedIds.add(item['id']));
-            change.removed.forEach(item => this.selectedIds.delete(item['id']));
+        // Store subscription reference for proper cleanup
+        this._selectionSubscription = this.selection.changed.subscribe(change => {
+            change.added.forEach(item => {
+                if (item && item[this.selectedRowKey] !== undefined) {
+                    this.selectedIds.add(item[this.selectedRowKey]);
+                }
+            });
+            change.removed.forEach(item => {
+                if (item && item[this.selectedRowKey] !== undefined) {
+                    this.selectedIds.delete(item[this.selectedRowKey]);
+                }
+            });
         });
     }
     ngOnInit() {
         this.isHandset$ = this.breakpointObserver.observe([Breakpoints.Handset])
-            .pipe(map(result => {
-            console.log("== result ==", result);
-            return result.matches;
-        }), shareReplay());
-        this.isHandset$.subscribe(r => {
-            console.log('IS HANDSET:', r);
+            .pipe(map(result => result.matches), shareReplay());
+        this._handsetSubscription = this.isHandset$.subscribe(r => {
             this.isMobile = r;
         });
         this.setDefaultColumns();
         this.getHomeUrl();
-        this.route.queryParams.subscribe(qp => {
+        this._queryParamsSubscription = this.route.queryParams.subscribe(qp => {
+            // Initialize objects
             this.filterFromQueryParams = {};
             this.sortFromQueryParams = {};
             if (this.keepFilterInUrl) {
-                for (const key in qp) {
-                    if (qp.hasOwnProperty(key) && qp[key] && qp[key] != '' && qp[key] != 'null' && qp[key] != 'undefined') {
-                        let fixedKeyMatched = false;
-                        if (key.toLowerCase() === 'pageIndex'.toLowerCase()) {
-                            this.pageIndex = Number(qp[key]);
-                            fixedKeyMatched = true;
-                        }
-                        if (key.toLowerCase() === 'pageSize'.toLowerCase()) {
-                            this.pageSize = Number(qp[key]);
-                            fixedKeyMatched = true;
-                        }
-                        if (key.toLowerCase() === 'sortBy'.toLowerCase()) {
-                            this.sortFromQueryParams.sortBy = qp[key];
-                            fixedKeyMatched = true;
-                        }
-                        if (key.toLowerCase() === 'sortOrder'.toLowerCase()) {
-                            this.sortFromQueryParams.sortOrder = qp[key];
-                            fixedKeyMatched = true;
-                        }
-                        if (key.toLowerCase() === 'search'.toLowerCase()) {
-                            this.search = qp[key];
-                            this.searchCtrl.patchValue(this.search);
-                            fixedKeyMatched = true;
-                        }
-                        if (key.toLowerCase().includes('date') && qp[key].length == 13) { // To Check if it is a date
-                            // this.filterFromQueryParams[key] = moment(Number(qp[key]));
-                            this.filterFromQueryParams[key] = DateTime.fromMillis(Number(qp[key]));
-                            fixedKeyMatched = true;
-                        }
-                        if (!fixedKeyMatched) {
-                            if ((qp[key]).includes(',')) {
-                                this.filterFromQueryParams[key] = (qp[key]).split(',');
-                            }
-                            else {
-                                this.filterFromQueryParams[key] = qp[key];
-                            }
-                        }
-                        // Transform Data, before patching in filter Form
-                        let mapping = this.columnsCodeMapping.find(ccm => ccm.filterFormKey == key);
-                        if (mapping?.transformQueryParamFn) {
-                            this.filterFromQueryParams[key] = mapping.transformQueryParamFn(this.filterFromQueryParams[key]);
-                        }
-                    }
-                }
+                const { filterParams, sortParams, pageIndex, pageSize, search } = QueryParamsHelper.processForFilters(qp, this.columnsCodeMapping);
+                this.filterFromQueryParams = filterParams;
+                this.sortFromQueryParams = sortParams;
+                this.pageIndex = pageIndex;
+                this.pageSize = pageSize;
+                this.search = search;
+                this.searchCtrl.patchValue(this.search);
                 this.filterFormGroup.patchValue(this.filterFromQueryParams);
-                if (this.sortFromQueryParams && this.sortFromQueryParams.sortBy && this.sortFromQueryParams.sortOrder) {
+                if (ValidationHelper.hasProperty(this.sortFromQueryParams, 'sortBy') &&
+                    ValidationHelper.hasProperty(this.sortFromQueryParams, 'sortOrder')) {
                     this.sortObj = this.sortFromQueryParams;
-                    console.log('[table-list-view-wrapper]: Emitting Sort Obj from QP to parent component:', this.sortFromQueryParams);
                     this.sortObjChange.emit(this.sortObj);
                 }
             }
-            let filterHasNonEmptyValue = Object.values(this.filterFromQueryParams).some(value => value !== null && value !== undefined && value !== '');
-            if (filterHasNonEmptyValue) {
-                this.filterApplied = true;
-            }
+            this.filterApplied = ValidationHelper.hasNonEmptyValue(this.filterFromQueryParams);
             this.getList();
         });
         this.searchCtrl.valueChanges
@@ -1070,13 +2071,11 @@ class TisSmartTableViewerComponent {
     ngOnChanges(changes) {
         // console.log(`[table-list-view-wrapper]: ngOnChanges:`, changes);
         if (changes['defaultDisplayedColumns']) {
-            console.log(`[table-list-view-wrapper]: changes['defaultDisplayedColumns']:`, changes['defaultDisplayedColumns']);
-            this.handleDisplayedColumns();
+            this.handleDisplayedColumns('defaultDisplayedColumns');
         }
         if (changes['columnsCodeMapping']) {
-            console.log(`[table-list-view-wrapper]: changes['columnsCodeMapping']:`, changes['columnsCodeMapping']);
             this.columnsCodeMapping = changes['columnsCodeMapping'].currentValue;
-            this.handleDisplayedColumns();
+            this.handleDisplayedColumns('columnsCodeMapping');
             this.columns = this.columnsCodeMapping.map(c => c.name);
             this.autoRenderColumns = this.columnsCodeMapping.filter(c => c.hasOwnProperty('valueKey'));
             this.templateRenderColumns = this.columnsCodeMapping.filter(c => c.hasOwnProperty('template'));
@@ -1097,7 +2096,6 @@ class TisSmartTableViewerComponent {
         }
         if (changes['loadDataApiBaseUrl']) {
             if (changes['loadDataApiBaseUrl'].currentValue) {
-                console.log(`[table-list-view-wrapper]: Datasource changes['loadDataApiBaseUrl'].currentValue:`, changes['loadDataApiBaseUrl'].currentValue);
                 if (this.loadingSubscription) {
                     this.loadingSubscription.unsubscribe();
                 }
@@ -1105,14 +2103,16 @@ class TisSmartTableViewerComponent {
                     this.dataLengthSubscription.unsubscribe();
                 }
                 this.dataSource = new ApiDataSource(this.apiService);
-                console.log('[table-list-view-wrapper]: Datasource Initialized:', this.dataSource);
                 this.loadingSubscription = this.dataSource.loading$.subscribe(loading => {
-                    console.log('[table-list-view-wrapper]: dataSource loading:', loading);
                     if (!loading) {
                         if (this._paginator) {
                             this._paginator.pageIndex = this.pageIndex;
                             this._paginator.pageSize = this.pageSize;
                         }
+                        // Clear background cache when new data arrives
+                        this.clearRowBackgroundCache();
+                        // Pre-compute all row backgrounds for optimal performance
+                        this.computeAllRowBackgrounds();
                         this.checkAllRowsSelected();
                         this.onDataLoaded.emit(true);
                         this.onSetExtraData.emit(this.dataSource.extraDataSubject.value);
@@ -1124,7 +2124,6 @@ class TisSmartTableViewerComponent {
                     }
                 });
                 this.dataLengthSubscription = this.dataSource.totalDataLength$.subscribe((total) => {
-                    console.log('[table-list-view-wrapper]: dataSource total:', total);
                     if (total !== null) {
                         this.initialLoading = false;
                         this.onSetTotal.emit(total);
@@ -1139,7 +2138,7 @@ class TisSmartTableViewerComponent {
             }
             this.filterFormGroupSubscription = this.filterFormGroup.valueChanges
                 .pipe(takeUntil(this._onDestroy), distinctUntilChanged()).subscribe(val => {
-                this.filterHasNonEmptyValue = Object.values(val).some(value => value !== null && value !== undefined && value !== '');
+                this.filterHasNonEmptyValue = ValidationHelper.hasNonEmptyValue(val);
             });
         }
         if (changes['selectedRows']) {
@@ -1163,12 +2162,42 @@ class TisSmartTableViewerComponent {
         }
     }
     ngOnDestroy() {
+        // Complete the destroy subject first to trigger takeUntil operators
+        this._onDestroy.next();
+        this._onDestroy.complete();
+        // Clean up all subscriptions
         this._sortSubscription?.unsubscribe();
         this._paginatorSubscription?.unsubscribe();
         this.loadingSubscription?.unsubscribe();
         this.dataLengthSubscription?.unsubscribe();
         this.filterFormGroupSubscription?.unsubscribe();
-        // this.dataSource.disconnect({} as CollectionViewer); // stops API calls
+        // Clean up additional subscriptions
+        this._selectionSubscription?.unsubscribe();
+        this._handsetSubscription?.unsubscribe();
+        this._queryParamsSubscription?.unsubscribe();
+        // Clean up selection model and data structures using CollectionHelper
+        this.selection.clear();
+        CollectionHelper.clearSet(this.selectedIds);
+        CollectionHelper.clearSet(this.expandedRowIds);
+        // Clear arrays to free memory using CollectionHelper
+        CollectionHelper.clearArray(this.selectedFilterValues);
+        CollectionHelper.clearArray(this.finalSelectedFilterValuesToDisplay);
+        CollectionHelper.clearArray(this.selectedFilterGroupedValues);
+        CollectionHelper.clearArray(this.displayedColumns);
+        // Clear caches to free memory
+        CollectionHelper.clearMap(this._columnMappingCache);
+        CollectionHelper.clearArray(this._displayedColumnsCache);
+        this._lastColumnsCodeMappingHash = '';
+        CollectionHelper.clearMap(this.computedRowBackgrounds);
+        // Complete race condition prevention subject
+        this._currentRequestSubject.next();
+        this._currentRequestSubject.complete();
+        // Clear all pending timeouts to prevent memory leaks
+        this.timeoutManager.clearAll();
+        // Disconnect data source to stop API calls and complete observables
+        if (this.dataSource) {
+            this.dataSource.disconnect({});
+        }
     }
     setDefaultColumns() {
         if (this.defaultDisplayedColumns && this.defaultDisplayedColumns.length) {
@@ -1178,22 +2207,98 @@ class TisSmartTableViewerComponent {
             this.defaultColumns = this.columnsCodeMapping.map(c => c.name);
         }
     }
-    handleDisplayedColumns() {
-        if (this.defaultDisplayedColumns && this.defaultDisplayedColumns.length) {
-            const columnsSet = new Set(this.columnsCodeMapping.map(ccm => ccm.name));
-            this.displayedColumns = this.defaultDisplayedColumns.filter(c => columnsSet.has(c));
+    handleDisplayedColumns(msg = '') {
+        if (this.selectedTemplate?.id > 0 && this.defaultDisplayedColumns && this.defaultDisplayedColumns.length) {
+            this.displayedColumns = this.defaultDisplayedColumns.filter(c => this._columnMappingCache.has(c));
         }
         else {
-            this.displayedColumns = this.columnsCodeMapping.map(c => c?.columnDef || c.name);
+            // Create a hash of current columns to check if cache is valid
+            const columnsHash = JSON.stringify(this.columnsCodeMapping.map(c => c.name));
+            // Use cache if columns haven't changed
+            if (this._lastColumnsCodeMappingHash === columnsHash && this._displayedColumnsCache.length > 0) {
+                this.displayedColumns = [...this._displayedColumnsCache];
+            }
+            else {
+                // Update cache
+                this.updateColumnMappingCache();
+                this._lastColumnsCodeMappingHash = columnsHash;
+                if (this.defaultDisplayedColumns && this.defaultDisplayedColumns.length) {
+                    this.displayedColumns = this.defaultDisplayedColumns.filter(c => this._columnMappingCache.has(c));
+                }
+                else {
+                    this.displayedColumns = this.columnsCodeMapping.map(c => c?.columnDef || c.name);
+                }
+                // Cache the result before adding selection/drag columns
+                this._displayedColumnsCache = [...this.displayedColumns];
+            }
         }
+        // Add selection and drag columns (these are dynamic and shouldn't be cached)
+        const finalColumns = [...this.displayedColumns];
         if (this.enableRowsSelection) {
-            this.displayedColumns = ['Select', ...this.displayedColumns];
+            finalColumns.unshift('Select');
         }
         if (this.enableDragNDrop) {
-            this.displayedColumns = ['drag', ...this.displayedColumns];
+            finalColumns.unshift('drag');
         }
+        console.log(`=== handleDisplayedColumns :: ${msg} :: finalColumns  ===`, finalColumns);
+        this.displayedColumns = finalColumns;
         this.displayedColumnsChange.emit(this.displayedColumns);
     }
+    updateColumnMappingCache() {
+        this._columnMappingCache.clear();
+        this.columnsCodeMapping.forEach(column => {
+            this._columnMappingCache.set(column.name, column);
+        });
+    }
+    // TrackBy functions for optimal rendering performance
+    trackByBreadcrumb(index, breadcrumb) {
+        return breadcrumb.url + breadcrumb.name || index.toString();
+    }
+    trackByFilterValue(index, filterValue) {
+        return `${filterValue.formControlName}_${filterValue.valueKey}_${filterValue.value}`;
+    }
+    trackByAutoColumn(index, column) {
+        return column.name + (column.serverKeyCode || '');
+    }
+    trackByTemplateColumn(index, column) {
+        return column.name + (column.serverKeyCode || '');
+    }
+    trackByTableRow(index, row) {
+        return row.id || row[this.selectedRowKey] || index;
+    }
+    // Helper method to get consistent row identifier for expansion tracking
+    getRowIdentifier(row) {
+        return CollectionHelper.getRowIdentifier(row, 'id', this.selectedRowKey);
+    }
+    // Helper method to check if a row is expanded (non-mutating)
+    isRowExpanded(row) {
+        if (!this.isExpansion)
+            return false;
+        const rowId = this.getRowIdentifier(row);
+        return this.expandedRowIds.has(rowId);
+    }
+    // Clear background cache when data changes to ensure fresh calculations
+    clearRowBackgroundCache() {
+        this.computedRowBackgrounds.clear();
+    }
+    // Compute all row backgrounds when data changes (runs once per data load)
+    computeAllRowBackgrounds() {
+        if (!this.dataSource?.apiSubject.value || !this.rowsConfig.backgroundApplyFunction) {
+            return;
+        }
+        this.computedRowBackgrounds.clear();
+        this.dataSource.apiSubject.value.forEach((row) => {
+            const rowId = row?.id || row?.[this.selectedRowKey] || JSON.stringify(row);
+            try {
+                const background = this.rowsConfig.backgroundApplyFunction(row);
+                this.computedRowBackgrounds.set(rowId, background);
+            }
+            catch (error) {
+                console.warn('Error computing row background:', error);
+                this.computedRowBackgrounds.set(rowId, null);
+            }
+        });
+    }
     handleSortingChanges(ch) {
         this.sortObj = { sortOrder: ch.direction, sortBy: this.columnsCodeMapping.find(c => c.name === ch.active)?.serverKeyCode };
         this.sortFromQueryParams.sortBy = this.sortObj.sortBy;
@@ -1202,90 +2307,30 @@ class TisSmartTableViewerComponent {
         this.getList();
     }
     getHomeUrl() {
-        let pathname = window.location.pathname;
-        // console.log("=== app-table-list-view-wrapper :: pathname ===", pathname);
-        this.homeUrl = `/${pathname.split('/')[1]}`;
+        this.homeUrl = UrlHelper.getHomeUrl();
     }
     getNestedValue(obj, path) {
-        if (!path)
-            return null;
-        // If there is no '.', just return the direct property
-        if (!path.includes('.')) {
-            return obj && obj[path] ? obj[path] : null;
-        }
-        // Otherwise, traverse the nested properties
-        return path.split('.').reduce((acc, part) => acc && acc[part], obj);
+        return CollectionHelper.getNestedProperty(obj, path);
     }
     groupByFormControlAttributes(data) {
-        const groups = {};
-        data.forEach(item => {
-            if (item.formControlType == 'input') {
-                // Do Nothing...
-            }
-            if (item.formControlType == 'checkbox') {
-                // Do Nothing...
-            }
-            if (item.formControlType == 'date') {
-                item.valueKey = DateTime.fromJSDate(item.value).toFormat('dd-MM-yyyy');
-            }
-            if (item.formControlType == 'date-time') {
-                item.valueKey = DateTime.fromJSDate(item.value).toFormat('dd-MM-yyyy HH:mm');
-            }
-            const key = `${item.formControlName}-${item.formControlType}`;
-            if (!groups[key]) {
-                groups[key] = {
-                    formControlName: item.formControlName,
-                    formControlType: item.formControlType,
-                    arrValues: []
-                };
-            }
-            const isSingleValue = item.isSingleValue ?? ['input', 'radio', 'date', 'date-time', 'toggle'].includes(item.formControlType);
-            // Check if only the last value should be kept due to isSingleValue or duplicated value/valueKey
-            if (isSingleValue) {
-                groups[key].arrValues = [item]; // Replace with the current item
-            }
-            else {
-                // Check for duplicate value and valueKey in the current array
-                const existingIndex = groups[key].arrValues.findIndex(x => x.value === item.value && x.valueKey === item.valueKey);
-                if (existingIndex !== -1) {
-                    groups[key].arrValues[existingIndex] = item; // Replace the duplicate
-                }
-                else {
-                    groups[key].arrValues.push(item); // Add new item
-                }
-            }
-        });
-        return Object.values(groups);
+        return FilterDisplayHelper.groupByFormControlAttributes(data);
     }
     updateSelectedFilterValues(values) {
         let currentFormControlName;
         if (Array.isArray(values)) {
-            this.selectedFilterGroupedValues = this.groupByFormControlAttributes(values);
             currentFormControlName = values[0]?.formControlName;
         }
         else {
             currentFormControlName = values?.formControlName;
-            this.selectedFilterGroupedValues = this.groupByFormControlAttributes([values]);
         }
-        this.selectedFilterValues = this.selectedFilterValues.filter(sfv => sfv.formControlName != currentFormControlName);
-        this.selectedFilterGroupedValues.forEach(gv => {
-            if (gv.formControlName = currentFormControlName) {
-                gv.arrValues.forEach(v => {
-                    this.selectedFilterValues.push(v);
-                });
-            }
-        });
+        const result = FilterDisplayHelper.updateSelectedFilterValues(this.selectedFilterValues, values, currentFormControlName);
+        this.selectedFilterValues = result.selectedFilterValues;
+        this.selectedFilterGroupedValues = result.selectedFilterGroupedValues;
         this.displayAfterFilterRemoved = true;
-        // this.filterFromQueryParams
         this.getFinalSelectedFilterValuesToDisplay();
     }
     getFinalSelectedFilterValuesToDisplay() {
-        this.finalSelectedFilterValuesToDisplay = [];
-        this.selectedFilterValues.forEach(sf => {
-            if (Object.keys(this.filterFromQueryParams).includes(sf.formControlName)) {
-                this.finalSelectedFilterValuesToDisplay.push(sf);
-            }
-        });
+        this.finalSelectedFilterValuesToDisplay = FilterDisplayHelper.getValuesForDisplay(this.selectedFilterValues, this.filterFromQueryParams);
     }
     removeParticularFilter(f) {
         let val = this.filterFormGroup.get(f.formControlName)?.value;
@@ -1296,23 +2341,27 @@ class TisSmartTableViewerComponent {
         else {
             this.filterFormGroup.get(f.formControlName)?.reset();
         }
-        this.selectedFilterValues = this.selectedFilterValues.filter(sfv => !(sfv.formControlName == f.formControlName && sfv.valueKey == f.valueKey));
+        this.selectedFilterValues = FilterDisplayHelper.removeFilterValue(this.selectedFilterValues, f);
         this.displayAfterFilterRemoved = true;
-        setTimeout(() => {
+        this.timeoutManager.createTimeout(() => {
             this.filterRecords();
         }, 500);
     }
     filterRecords() {
         this.filterApplied = true;
         this.resetFlag = true;
-        setTimeout(() => {
+        // Clear computed backgrounds before loading filtered data
+        this.clearRowBackgroundCache();
+        this.timeoutManager.createTimeout(() => {
             this.getList(true);
             this.isShowFilter = false;
         }, 500);
     }
     resetFilters() {
         this.filterApplied = false;
-        setTimeout(() => {
+        // Clear computed backgrounds before reset
+        this.clearRowBackgroundCache();
+        this.timeoutManager.createTimeout(() => {
             this.resetFlag = true;
             this.filterFromQueryParams = {};
             this.sortFromQueryParams = {};
@@ -1322,43 +2371,15 @@ class TisSmartTableViewerComponent {
         }, 250);
     }
     getList(forceFromObject = false) {
+        // Cancel any previous request to prevent race conditions
+        this._currentRequestSubject.next();
         this.isAllExpanded = false;
+        // Clear expansion state when loading new data to avoid stale expansion state
+        CollectionHelper.clearSet(this.expandedRowIds);
         const filterFormData = this.filterFormGroup?.value;
-        let qs = new URLSearchParams();
-        let filter = { ...filterFormData };
-        if (filterFormData) {
-            this.filterHasNonEmptyValue = Object.values(filterFormData).some(value => value !== null && value !== undefined && value !== '');
-        }
-        else {
-            this.filterHasNonEmptyValue = false;
-        }
-        for (const key in filter) {
-            if (typeof filter[key] === 'object' && (filter[key] instanceof Date || DateTime.isDateTime(filter[key]))) {
-                if (filter[key] instanceof Date) {
-                    filter[key] = DateTime.fromJSDate(filter[key]).toMillis();
-                }
-                else if (DateTime.isDateTime(filter[key])) {
-                    filter[key] = filter[key].toMillis();
-                }
-            }
-        }
-        // Append All Filters from filter form
-        Object.keys(filter).forEach(key => {
-            if (filter[key] != null && filter[key] != '' && filter[key] != 'null' && filter[key] != 'undefined') {
-                if (filter[key] === '*') {
-                    filter[key] = '';
-                }
-                qs.append(key, filter[key]);
-            }
-        });
-        // Append sorting conditions...
-        if (this.sortFromQueryParams) {
-            Object.keys(this.sortFromQueryParams).forEach(key => {
-                if (this.sortFromQueryParams[key] != null && this.sortFromQueryParams[key] != '' && this.sortFromQueryParams[key] != 'null' && this.sortFromQueryParams[key] != 'undefined') {
-                    qs.append(key, this.sortFromQueryParams[key]);
-                }
-            });
-        }
+        this.filterHasNonEmptyValue = ValidationHelper.hasFormData(filterFormData);
+        // Build query string using helper
+        const qs = QueryParamsHelper.buildQueryString(filterFormData, this.sortFromQueryParams, this.resetFlag ? 0 : this.pageIndex, this.pageSize, this.search);
         if (this.resetFlag) {
             this.pageIndex = 0;
         }
@@ -1366,41 +2387,44 @@ class TisSmartTableViewerComponent {
             this._paginator.pageIndex = this.pageIndex;
             this._paginator.pageSize = this.pageSize;
         }
-        qs.append("pageIndex", this.pageIndex);
-        qs.append("pageSize", this.pageSize);
-        if (this.search != '') {
-            qs.append('search', this.search);
-        }
-        qs = qs.toString();
-        let genUrl = this.router.url.split('?')[0] + '?' + qs;
-        let currentUrl = window.location.pathname + window.location.search;
-        if (currentUrl != genUrl) {
-            if (this.keepFilterInUrl) {
-                this.location.go(genUrl);
-                this.filterFromQueryParams = this.getQueryParams(window.location.href);
-            }
+        // Update URL if needed
+        const baseUrl = UrlHelper.getBaseUrl(this.router);
+        const genUrl = UrlHelper.buildUrl(baseUrl, qs);
+        if (this.keepFilterInUrl && UrlHelper.hasUrlChanged(genUrl)) {
+            UrlHelper.updateUrl(this.location, baseUrl, qs.toString());
+            this.filterFromQueryParams = QueryParamsHelper.parseQueryParams(window.location.href);
         }
-        else { }
-        this.dataSource.load(this.loadDataApiBaseUrl, this.pageIndex, this.pageSize, this.search, filter, this.sortObj);
+        // Load data with race condition protection
+        this.dataSource.loadWithCancellation(this.loadDataApiBaseUrl, this.pageIndex, this.pageSize, this.search, filterFormData, // Pass original form data - datasource will handle conversions
+        this.sortObj, this._currentRequestSubject);
         this.getFinalSelectedFilterValuesToDisplay();
         this.resetFlag = false;
     }
     onPaginationChanges() {
         if (this.pageIndex != this._paginator.pageIndex) {
             this.pageIndex = this._paginator.pageIndex;
+            // Clear computed backgrounds before loading new page data
+            this.clearRowBackgroundCache();
             this.getList();
             this.pageIndexChange.emit(this.pageIndex);
         }
         if (this.pageSize != this._paginator.pageSize) {
             this.pageSize = this._paginator.pageSize;
+            // Clear computed backgrounds before loading new page size data
+            this.clearRowBackgroundCache();
             this.getList();
             this.pageSizeChange.emit(this.pageSize);
             setToLocalStorageWithExpiry('user_pagination_page_size', this.pageSize, 1000 * 60 * 60 * 24 * 15);
         }
     }
+    onSetSelectedTemplate(data) {
+        console.log("=== onSetSelectedTemplate ===", data);
+        // this.selectedTemplate = data;
+    }
     onChangeDisplayColumns(columns) {
+        console.log("=== onChangeDisplayColumns ===", columns);
         this.defaultDisplayedColumns = columns;
-        this.handleDisplayedColumns();
+        this.handleDisplayedColumns('onChangeDisplayColumns');
     }
     onChangeFromStartColumnNumber(columnNumber) {
         this.startStickyColumnCount = columnNumber;
@@ -1409,9 +2433,7 @@ class TisSmartTableViewerComponent {
         this.endStickyColumnCount = columnNumber;
     }
     goToUrl(url) {
-        if (url) {
-            this.router.navigateByUrl(url);
-        }
+        UrlHelper.safeNavigate(this.router, url);
     }
     toggleSelection(status, row) {
         if (this.onlySingleSelection && status.checked) {
@@ -1443,28 +2465,11 @@ class TisSmartTableViewerComponent {
         $event.stopPropagation();
     }
     isChecked(row) {
-        return this.selectedIds.has(row['id']);
+        return ValidationHelper.hasRowKey(row, this.selectedRowKey) &&
+            this.selectedIds.has(row[this.selectedRowKey]);
     }
     getQueryParams(url) {
-        const urlObj = new URL(url);
-        const params = new URLSearchParams(urlObj.search);
-        const paramsObj = {};
-        params.forEach((value, key) => {
-            // Check if the parameter already exists (for handling multiple values)
-            if (paramsObj.hasOwnProperty(key)) {
-                // If it's not already an array, convert it to an array
-                if (!Array.isArray(paramsObj[key])) {
-                    paramsObj[key] = [paramsObj[key]]; // Cast as string because we know it's not an array here
-                }
-                // Push the new value to the existing array
-                paramsObj[key].push(value); // Cast as string[] to use array methods
-            }
-            else {
-                // Assign the value to the key in the object
-                paramsObj[key] = value;
-            }
-        });
-        return paramsObj;
+        return QueryParamsHelper.parseQueryParams(url);
     }
     isStickyStart(columnName) {
         const index = this.displayedColumns.indexOf(columnName);
@@ -1498,10 +2503,26 @@ class TisSmartTableViewerComponent {
             }
         }
     }
+    // Optimized getRowBackground - simple O(1) lookup
     getRowBackground(row) {
-        return this.rowsConfig.backgroundApplyFunction
-            ? this.rowsConfig.backgroundApplyFunction(row)
-            : null;
+        // Early return if no background function is provided
+        if (!this.rowsConfig.backgroundApplyFunction) {
+            return null;
+        }
+        const rowId = row?.id || row?.[this.selectedRowKey] || JSON.stringify(row);
+        // If not computed yet, compute on-demand (fallback)
+        if (!this.computedRowBackgrounds.has(rowId)) {
+            try {
+                const background = this.rowsConfig.backgroundApplyFunction(row);
+                this.computedRowBackgrounds.set(rowId, background);
+                return background;
+            }
+            catch (error) {
+                console.warn('Error computing row background:', error);
+                return null;
+            }
+        }
+        return this.computedRowBackgrounds.get(rowId) || null;
     }
     drop(event) {
         // Ignore if the item was dropped at the same index
@@ -1521,20 +2542,10 @@ class TisSmartTableViewerComponent {
         this.listDataSequenceChange.emit(currentData);
     }
     handleButtonClick(config) {
-        if (config?.btnClick) {
-            config.btnClick();
-        }
-        else if (config?.btnUrl) {
-            this.goToUrl(config.btnUrl);
-        }
+        UrlHelper.handleButtonClick(this.router, config);
     }
     handleSecondButtonClick(config) {
-        if (config?.secondBtnClick) {
-            config.secondBtnClick();
-        }
-        else if (config?.secondBtnUrl) {
-            this.goToUrl(config.secondBtnUrl);
-        }
+        UrlHelper.handleSecondaryButtonClick(this.router, config);
     }
     setSelectedRows() {
         this.selection.clear();
@@ -1554,29 +2565,40 @@ class TisSmartTableViewerComponent {
     }
     /** Toggles the expanded state of an element. */
     toggleExpand(element) {
-        if (this.isExpansion) {
-            if (!element?.expanded) {
-                element.expanded = true;
-            }
-            else {
-                element.expanded = false;
-            }
+        if (!this.isExpansion || !element) {
+            return;
+        }
+        const rowId = this.getRowIdentifier(element);
+        if (this.expandedRowIds.has(rowId)) {
+            this.expandedRowIds.delete(rowId);
+        }
+        else {
+            this.expandedRowIds.add(rowId);
         }
     }
     expandAllRow() {
-        if (this.isExpansion) {
-            this.isAllExpanded = !this.isAllExpanded;
+        if (!this.isExpansion || !this.dataSource?.apiSubject?.value) {
+            return;
+        }
+        this.isAllExpanded = !this.isAllExpanded;
+        if (this.isAllExpanded) {
+            // Add all row IDs to expanded set
             this.dataSource.apiSubject.value.forEach(row => {
-                row.expanded = this.isAllExpanded;
+                const rowId = this.getRowIdentifier(row);
+                this.expandedRowIds.add(rowId);
             });
         }
+        else {
+            // Clear all expanded rows
+            this.expandedRowIds.clear();
+        }
     }
     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", disableBorderedView: "disableBorderedView", 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", selectedRowIds: "selectedRowIds", selectedRowKey: "selectedRowKey", selectedRows: "selectedRows", enableDragNDrop: "enableDragNDrop", isExpansion: "isExpansion", isExpandedRow: "isExpandedRow", expandedTemplate: "expandedTemplate" }, outputs: { displayedColumnsChange: "displayedColumnsChange", sortObjChange: "sortObjChange", pageSizeChange: "pageSizeChange", pageIndexChange: "pageIndexChange", onDataLoaded: "onDataLoaded", onSetExtraData: "onSetExtraData", onSetTotal: "onSetTotal", selectedRowsChange: "selectedRowsChange", allRowsSelectedChange: "allRowsSelectedChange", 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 || displayAfterFilterRemoved) {\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\" [class.tis-table-bordered]=\"disableBorderedView == false\" cdkDropList (cdkDropListDropped)=\"drop($event)\" [cdkDropListLockAxis]=\"'y'\" multiTemplateDataRows>\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?.columnDef || column.name\" [sticky]=\"isStickyStart(column?.columnDef || column.name)\" [stickyEnd]=\"isStickyEnd(column?.columnDef || column.name)\">\n                                            @if(column.type == 'expand') {\n                                                <th mat-header-cell *matHeaderCellDef [ngClass]=\"getColumnClasses(column)\">\n                                                    <div style=\"display: flex; align-items: center; gap: 5px;\">\n                                                        <span>{{ column?.columnName ? column?.columnName : t[column.name] }}</span>\n                                                        <mat-icon *ngIf=\"!isAllExpanded\">expand_more</mat-icon>\n                                                        <mat-icon *ngIf=\"isAllExpanded\">expand_less</mat-icon>\n                                                    </div>\n                                                </th>\n                                            }\n                                            @else if(column.sort) {\n                                                <th mat-header-cell mat-sort-header *matHeaderCellDef [ngClass]=\"getColumnClasses(column)\">\n                                                    {{ column?.columnName ? column?.columnName : t[column.name] }}\n                                                </th>\n                                            }\n                                            @else {\n                                                <th mat-header-cell *matHeaderCellDef [ngClass]=\"getColumnClasses(column)\">\n                                                    {{ column?.columnName ? column?.columnName : 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 ? (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 ? (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 ? (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 ? (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?.columnDef || column.name\"  [sticky]=\"isStickyStart(column?.columnDef || column.name)\" [stickyEnd]=\"isStickyEnd(column?.columnDef || column.name)\">\n                                            @if(column.type == 'expand') {\n                                                <th mat-header-cell *matHeaderCellDef [ngClass]=\"getColumnClasses(column)\">\n                                                    <div style=\"display: flex; align-items: center; gap: 5px; cursor: pointer;\" (click)=\"expandAllRow()\">\n                                                        <span>{{ column?.columnName ? column?.columnName : t[column.name] }}</span>\n                                                        <mat-icon *ngIf=\"!isAllExpanded\">expand_more</mat-icon>\n                                                        <mat-icon *ngIf=\"isAllExpanded\">expand_less</mat-icon>\n                                                    </div>\n                                                </th>\n                                            }\n                                            @else if(column.sort) {\n                                                <th mat-header-cell *matHeaderCellDef mat-sort-header [ngClass]=\"getColumnClasses(column)\">\n                                                    {{ column?.columnName ? column?.columnName : t[column.name] }}\n                                                </th>\n                                            }\n                                            @else {\n                                                <th mat-header-cell *matHeaderCellDef [ngClass]=\"getColumnClasses(column)\">\n                                                    {{ column?.columnName ? column?.columnName : 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                                    <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\n                                    <ng-container matColumnDef=\"expandedDetail\">\n                                        <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"displayedColumns.length\" [style.border-bottom-width]=\"element.expanded ? '1px' : '0px'\" style=\"padding: 0px !important;\">\n                                            <div class=\"tis-element-detail-wrapper\" [class.tis-element-detail-wrapper-expanded]=\"element.expanded\">\n                                                <ng-container *ngIf=\"expandedTemplate as template\">\n                                                    <ng-container *ngTemplateOutlet=\"template; context: { colData: element }\"></ng-container>\n                                                </ng-container>\n                                            </div>\n                                        </td>\n                                    </ng-container>\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                                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"130\" height=\"126.89\" viewBox=\"0 0 647.63626 632.17383\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" role=\"img\" artist=\"Katerina Limpitsouni\" source=\"https://undraw.co/\">\n                                                    <path d=\"M687.3279,276.08691H512.81813a15.01828,15.01828,0,0,0-15,15v387.85l-2,.61005-42.81006,13.11a8.00676,8.00676,0,0,1-9.98974-5.31L315.678,271.39691a8.00313,8.00313,0,0,1,5.31006-9.99l65.97022-20.2,191.25-58.54,65.96972-20.2a7.98927,7.98927,0,0,1,9.99024,5.3l32.5498,106.32Z\" transform=\"translate(-276.18187 -133.91309)\" fill=\"#f2f2f2\"/>\n                                                    <path d=\"M725.408,274.08691l-39.23-128.14a16.99368,16.99368,0,0,0-21.23-11.28l-92.75,28.39L380.95827,221.60693l-92.75,28.4a17.0152,17.0152,0,0,0-11.28028,21.23l134.08008,437.93a17.02661,17.02661,0,0,0,16.26026,12.03,16.78926,16.78926,0,0,0,4.96972-.75l63.58008-19.46,2-.62v-2.09l-2,.61-64.16992,19.65a15.01489,15.01489,0,0,1-18.73-9.95l-134.06983-437.94a14.97935,14.97935,0,0,1,9.94971-18.73l92.75-28.4,191.24024-58.54,92.75-28.4a15.15551,15.15551,0,0,1,4.40966-.66,15.01461,15.01461,0,0,1,14.32032,10.61l39.0498,127.56.62012,2h2.08008Z\" transform=\"translate(-276.18187 -133.91309)\" fill=\"#3f3d56\"/>\n                                                    <path d=\"M398.86279,261.73389a9.0157,9.0157,0,0,1-8.61133-6.3667l-12.88037-42.07178a8.99884,8.99884,0,0,1,5.9712-11.24023l175.939-53.86377a9.00867,9.00867,0,0,1,11.24072,5.9707l12.88037,42.07227a9.01029,9.01029,0,0,1-5.9707,11.24072L401.49219,261.33887A8.976,8.976,0,0,1,398.86279,261.73389Z\" transform=\"translate(-276.18187 -133.91309)\" fill=\"var(--tis-primary, var(--mat-sys-primary, #3838a2))\"/>\n                                                    <circle cx=\"190.15351\" cy=\"24.95465\" r=\"20\" fill=\"var(--tis-primary, var(--mat-sys-primary, #3838a2))\"/>\n                                                    <circle cx=\"190.15351\" cy=\"24.95465\" r=\"12.66462\" fill=\"#fff\"/>\n                                                    <path d=\"M878.81836,716.08691h-338a8.50981,8.50981,0,0,1-8.5-8.5v-405a8.50951,8.50951,0,0,1,8.5-8.5h338a8.50982,8.50982,0,0,1,8.5,8.5v405A8.51013,8.51013,0,0,1,878.81836,716.08691Z\" transform=\"translate(-276.18187 -133.91309)\" fill=\"#e6e6e6\"/>\n                                                    <path d=\"M723.31813,274.08691h-210.5a17.02411,17.02411,0,0,0-17,17v407.8l2-.61v-407.19a15.01828,15.01828,0,0,1,15-15H723.93825Zm183.5,0h-394a17.02411,17.02411,0,0,0-17,17v458a17.0241,17.0241,0,0,0,17,17h394a17.0241,17.0241,0,0,0,17-17v-458A17.02411,17.02411,0,0,0,906.81813,274.08691Zm15,475a15.01828,15.01828,0,0,1-15,15h-394a15.01828,15.01828,0,0,1-15-15v-458a15.01828,15.01828,0,0,1,15-15h394a15.01828,15.01828,0,0,1,15,15Z\" transform=\"translate(-276.18187 -133.91309)\" fill=\"#3f3d56\"/>\n                                                    <path d=\"M801.81836,318.08691h-184a9.01015,9.01015,0,0,1-9-9v-44a9.01016,9.01016,0,0,1,9-9h184a9.01016,9.01016,0,0,1,9,9v44A9.01015,9.01015,0,0,1,801.81836,318.08691Z\" transform=\"translate(-276.18187 -133.91309)\" fill=\"var(--tis-primary, var(--mat-sys-primary, #3838a2))\"/>\n                                                    <circle cx=\"433.63626\" cy=\"105.17383\" r=\"20\" fill=\"var(--tis-primary, var(--mat-sys-primary, #3838a2))\"/>\n                                                    <circle cx=\"433.63626\" cy=\"105.17383\" r=\"12.18187\" fill=\"#fff\"/>\n                                                </svg>\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'}\" [class.tis-curser-pointer]=\"isExpandedRow\" (click)=\"(isExpansion && isExpandedRow) ? toggleExpand(row) : null\" cdkDrag></tr>\n                                    }\n\n                                    @if(!enableDragNDrop) {\n                                        <tr mat-row *matRowDef=\"let row; columns: displayedColumns\" [ngStyle]=\"{'background-color': getRowBackground(row) || 'inherit'}\" [class.tis-curser-pointer]=\"isExpandedRow\" (click)=\"(isExpansion && isExpandedRow) ? toggleExpand(row) : null\"></tr>\n                                    }   \n                                    <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n                                    <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"tis-detail-row\"></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                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"130\" height=\"126.89\" viewBox=\"0 0 647.63626 632.17383\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" role=\"img\" artist=\"Katerina Limpitsouni\" source=\"https://undraw.co/\">\n                                <path d=\"M687.3279,276.08691H512.81813a15.01828,15.01828,0,0,0-15,15v387.85l-2,.61005-42.81006,13.11a8.00676,8.00676,0,0,1-9.98974-5.31L315.678,271.39691a8.00313,8.00313,0,0,1,5.31006-9.99l65.97022-20.2,191.25-58.54,65.96972-20.2a7.98927,7.98927,0,0,1,9.99024,5.3l32.5498,106.32Z\" transform=\"translate(-276.18187 -133.91309)\" fill=\"#f2f2f2\"/>\n                                <path d=\"M725.408,274.08691l-39.23-128.14a16.99368,16.99368,0,0,0-21.23-11.28l-92.75,28.39L380.95827,221.60693l-92.75,28.4a17.0152,17.0152,0,0,0-11.28028,21.23l134.08008,437.93a17.02661,17.02661,0,0,0,16.26026,12.03,16.78926,16.78926,0,0,0,4.96972-.75l63.58008-19.46,2-.62v-2.09l-2,.61-64.16992,19.65a15.01489,15.01489,0,0,1-18.73-9.95l-134.06983-437.94a14.97935,14.97935,0,0,1,9.94971-18.73l92.75-28.4,191.24024-58.54,92.75-28.4a15.15551,15.15551,0,0,1,4.40966-.66,15.01461,15.01461,0,0,1,14.32032,10.61l39.0498,127.56.62012,2h2.08008Z\" transform=\"translate(-276.18187 -133.91309)\" fill=\"#3f3d56\"/>\n                                <path d=\"M398.86279,261.73389a9.0157,9.0157,0,0,1-8.61133-6.3667l-12.88037-42.07178a8.99884,8.99884,0,0,1,5.9712-11.24023l175.939-53.86377a9.00867,9.00867,0,0,1,11.24072,5.9707l12.88037,42.07227a9.01029,9.01029,0,0,1-5.9707,11.24072L401.49219,261.33887A8.976,8.976,0,0,1,398.86279,261.73389Z\" transform=\"translate(-276.18187 -133.91309)\" fill=\"var(--tis-primary, var(--mat-sys-primary, #3838a2))\"/>\n                                <circle cx=\"190.15351\" cy=\"24.95465\" r=\"20\" fill=\"var(--tis-primary, var(--mat-sys-primary, #3838a2))\"/>\n                                <circle cx=\"190.15351\" cy=\"24.95465\" r=\"12.66462\" fill=\"#fff\"/>\n                                <path d=\"M878.81836,716.08691h-338a8.50981,8.50981,0,0,1-8.5-8.5v-405a8.50951,8.50951,0,0,1,8.5-8.5h338a8.50982,8.50982,0,0,1,8.5,8.5v405A8.51013,8.51013,0,0,1,878.81836,716.08691Z\" transform=\"translate(-276.18187 -133.91309)\" fill=\"#e6e6e6\"/>\n                                <path d=\"M723.31813,274.08691h-210.5a17.02411,17.02411,0,0,0-17,17v407.8l2-.61v-407.19a15.01828,15.01828,0,0,1,15-15H723.93825Zm183.5,0h-394a17.02411,17.02411,0,0,0-17,17v458a17.0241,17.0241,0,0,0,17,17h394a17.0241,17.0241,0,0,0,17-17v-458A17.02411,17.02411,0,0,0,906.81813,274.08691Zm15,475a15.01828,15.01828,0,0,1-15,15h-394a15.01828,15.01828,0,0,1-15-15v-458a15.01828,15.01828,0,0,1,15-15h394a15.01828,15.01828,0,0,1,15,15Z\" transform=\"translate(-276.18187 -133.91309)\" fill=\"#3f3d56\"/>\n                                <path d=\"M801.81836,318.08691h-184a9.01015,9.01015,0,0,1-9-9v-44a9.01016,9.01016,0,0,1,9-9h184a9.01016,9.01016,0,0,1,9,9v44A9.01015,9.01015,0,0,1,801.81836,318.08691Z\" transform=\"translate(-276.18187 -133.91309)\" fill=\"var(--tis-primary, var(--mat-sys-primary, #3838a2))\"/>\n                                <circle cx=\"433.63626\" cy=\"105.17383\" r=\"20\" fill=\"var(--tis-primary, var(--mat-sys-primary, #3838a2))\"/>\n                                <circle cx=\"433.63626\" cy=\"105.17383\" r=\"12.18187\" fill=\"#fff\"/>\n                            </svg>\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}.tis-detail-row{height:0!important}.tis-element-detail-wrapper{overflow:hidden;max-height:0;transition:max-height 225ms ease}.tis-element-detail-wrapper-expanded{max-height:500px}.tis-table-bordered{border-collapse:collapse;width:100%}.tis-table-bordered th,.tis-table-bordered td{border-left:1px solid #e0e0e0}.tis-table-bordered th:first-child,.tis-table-bordered td:first-child{border-left:0px solid #e0e0e0}.tis-table-bordered .bg-unset{background-color:unset!important}@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: i15.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i15.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { 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", disableBorderedView: "disableBorderedView", 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", selectedRowIds: "selectedRowIds", selectedRowKey: "selectedRowKey", selectedRows: "selectedRows", enableDragNDrop: "enableDragNDrop", isExpansion: "isExpansion", isExpandedRow: "isExpandedRow", expandedTemplate: "expandedTemplate" }, outputs: { displayedColumnsChange: "displayedColumnsChange", sortObjChange: "sortObjChange", pageSizeChange: "pageSizeChange", pageIndexChange: "pageIndexChange", onDataLoaded: "onDataLoaded", onSetExtraData: "onSetExtraData", onSetTotal: "onSetTotal", selectedRowsChange: "selectedRowsChange", allRowsSelectedChange: "allRowsSelectedChange", 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 trackByBreadcrumb($index, 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 || displayAfterFilterRemoved) {\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\" [(selectedTemplate)]=\"selectedTemplate\" [defaultColumns]=\"defaultColumns\" [columns]=\"columns\"\n                                            (selectedTemplateChange)=\"onSetSelectedTemplate($event)\"\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 trackByFilterValue($index, 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\" [class.tis-table-bordered]=\"disableBorderedView == false\" cdkDropList (cdkDropListDropped)=\"drop($event)\" [cdkDropListLockAxis]=\"'y'\" multiTemplateDataRows>\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 trackByAutoColumn($index, column); let i = $index; let l = $last){\n                                        <!-- [sticky]=\"i < startStickyColumnCount\" [stickyEnd]=\"i > (autoRenderColumns?.length - endStickyColumnCount)\" -->\n                                        <ng-container [matColumnDef]=\"column?.columnDef || column.name\" [sticky]=\"isStickyStart(column?.columnDef || column.name)\" [stickyEnd]=\"isStickyEnd(column?.columnDef || column.name)\">\n                                            @if(column.type == 'expand') {\n                                                <th mat-header-cell *matHeaderCellDef [ngClass]=\"getColumnClasses(column)\">\n                                                    <div style=\"display: flex; align-items: center; gap: 5px;\">\n                                                        <span>{{ column?.columnName ? column?.columnName : t[column.name] }}</span>\n                                                        <mat-icon *ngIf=\"!isAllExpanded\">expand_more</mat-icon>\n                                                        <mat-icon *ngIf=\"isAllExpanded\">expand_less</mat-icon>\n                                                    </div>\n                                                </th>\n                                            }\n                                            @else if(column.sort) {\n                                                <th mat-header-cell mat-sort-header *matHeaderCellDef [ngClass]=\"getColumnClasses(column)\">\n                                                    {{ column?.columnName ? column?.columnName : t[column.name] }}\n                                                </th>\n                                            }\n                                            @else {\n                                                <th mat-header-cell *matHeaderCellDef [ngClass]=\"getColumnClasses(column)\">\n                                                    {{ column?.columnName ? column?.columnName : 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 ? (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 ? (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 ? (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 ? (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 trackByTemplateColumn($index, column); let i = $index; let l = $last){\n                                        <!-- [sticky]=\"i < startStickyColumnCount\" [stickyEnd]=\"l\" -->\n                                        <ng-container [matColumnDef]=\"column?.columnDef || column.name\"  [sticky]=\"isStickyStart(column?.columnDef || column.name)\" [stickyEnd]=\"isStickyEnd(column?.columnDef || column.name)\">\n                                            @if(column.type == 'expand') {\n                                                <th mat-header-cell *matHeaderCellDef [ngClass]=\"getColumnClasses(column)\">\n                                                    <div style=\"display: flex; align-items: center; gap: 5px; cursor: pointer;\" (click)=\"expandAllRow()\">\n                                                        <span>{{ column?.columnName ? column?.columnName : t[column.name] }}</span>\n                                                        <mat-icon *ngIf=\"!isAllExpanded\">expand_more</mat-icon>\n                                                        <mat-icon *ngIf=\"isAllExpanded\">expand_less</mat-icon>\n                                                    </div>\n                                                </th>\n                                            }\n                                            @else if(column.sort) {\n                                                <th mat-header-cell *matHeaderCellDef mat-sort-header [ngClass]=\"getColumnClasses(column)\">\n                                                    {{ column?.columnName ? column?.columnName : t[column.name] }}\n                                                </th>\n                                            }\n                                            @else {\n                                                <th mat-header-cell *matHeaderCellDef [ngClass]=\"getColumnClasses(column)\">\n                                                    {{ column?.columnName ? column?.columnName : 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                                    <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\n                                    <ng-container matColumnDef=\"expandedDetail\">\n                                        <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"displayedColumns.length\" [style.border-bottom-width]=\"element.expanded ? '1px' : '0px'\" style=\"padding: 0px !important;\">\n                                            <div class=\"tis-element-detail-wrapper\" [class.tis-element-detail-wrapper-expanded]=\"element.expanded\">\n                                                <ng-container *ngIf=\"expandedTemplate as template\">\n                                                    <ng-container *ngTemplateOutlet=\"template; context: { colData: element }\"></ng-container>\n                                                </ng-container>\n                                            </div>\n                                        </td>\n                                    </ng-container>\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                                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"130\" height=\"126.89\" viewBox=\"0 0 647.63626 632.17383\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" role=\"img\" artist=\"Katerina Limpitsouni\" source=\"https://undraw.co/\">\n                                                    <path d=\"M687.3279,276.08691H512.81813a15.01828,15.01828,0,0,0-15,15v387.85l-2,.61005-42.81006,13.11a8.00676,8.00676,0,0,1-9.98974-5.31L315.678,271.39691a8.00313,8.00313,0,0,1,5.31006-9.99l65.97022-20.2,191.25-58.54,65.96972-20.2a7.98927,7.98927,0,0,1,9.99024,5.3l32.5498,106.32Z\" transform=\"translate(-276.18187 -133.91309)\" fill=\"#f2f2f2\"/>\n                                                    <path d=\"M725.408,274.08691l-39.23-128.14a16.99368,16.99368,0,0,0-21.23-11.28l-92.75,28.39L380.95827,221.60693l-92.75,28.4a17.0152,17.0152,0,0,0-11.28028,21.23l134.08008,437.93a17.02661,17.02661,0,0,0,16.26026,12.03,16.78926,16.78926,0,0,0,4.96972-.75l63.58008-19.46,2-.62v-2.09l-2,.61-64.16992,19.65a15.01489,15.01489,0,0,1-18.73-9.95l-134.06983-437.94a14.97935,14.97935,0,0,1,9.94971-18.73l92.75-28.4,191.24024-58.54,92.75-28.4a15.15551,15.15551,0,0,1,4.40966-.66,15.01461,15.01461,0,0,1,14.32032,10.61l39.0498,127.56.62012,2h2.08008Z\" transform=\"translate(-276.18187 -133.91309)\" fill=\"#3f3d56\"/>\n                                                    <path d=\"M398.86279,261.73389a9.0157,9.0157,0,0,1-8.61133-6.3667l-12.88037-42.07178a8.99884,8.99884,0,0,1,5.9712-11.24023l175.939-53.86377a9.00867,9.00867,0,0,1,11.24072,5.9707l12.88037,42.07227a9.01029,9.01029,0,0,1-5.9707,11.24072L401.49219,261.33887A8.976,8.976,0,0,1,398.86279,261.73389Z\" transform=\"translate(-276.18187 -133.91309)\" fill=\"var(--tis-primary, var(--mat-sys-primary, #3838a2))\"/>\n                                                    <circle cx=\"190.15351\" cy=\"24.95465\" r=\"20\" fill=\"var(--tis-primary, var(--mat-sys-primary, #3838a2))\"/>\n                                                    <circle cx=\"190.15351\" cy=\"24.95465\" r=\"12.66462\" fill=\"#fff\"/>\n                                                    <path d=\"M878.81836,716.08691h-338a8.50981,8.50981,0,0,1-8.5-8.5v-405a8.50951,8.50951,0,0,1,8.5-8.5h338a8.50982,8.50982,0,0,1,8.5,8.5v405A8.51013,8.51013,0,0,1,878.81836,716.08691Z\" transform=\"translate(-276.18187 -133.91309)\" fill=\"#e6e6e6\"/>\n                                                    <path d=\"M723.31813,274.08691h-210.5a17.02411,17.02411,0,0,0-17,17v407.8l2-.61v-407.19a15.01828,15.01828,0,0,1,15-15H723.93825Zm183.5,0h-394a17.02411,17.02411,0,0,0-17,17v458a17.0241,17.0241,0,0,0,17,17h394a17.0241,17.0241,0,0,0,17-17v-458A17.02411,17.02411,0,0,0,906.81813,274.08691Zm15,475a15.01828,15.01828,0,0,1-15,15h-394a15.01828,15.01828,0,0,1-15-15v-458a15.01828,15.01828,0,0,1,15-15h394a15.01828,15.01828,0,0,1,15,15Z\" transform=\"translate(-276.18187 -133.91309)\" fill=\"#3f3d56\"/>\n                                                    <path d=\"M801.81836,318.08691h-184a9.01015,9.01015,0,0,1-9-9v-44a9.01016,9.01016,0,0,1,9-9h184a9.01016,9.01016,0,0,1,9,9v44A9.01015,9.01015,0,0,1,801.81836,318.08691Z\" transform=\"translate(-276.18187 -133.91309)\" fill=\"var(--tis-primary, var(--mat-sys-primary, #3838a2))\"/>\n                                                    <circle cx=\"433.63626\" cy=\"105.17383\" r=\"20\" fill=\"var(--tis-primary, var(--mat-sys-primary, #3838a2))\"/>\n                                                    <circle cx=\"433.63626\" cy=\"105.17383\" r=\"12.18187\" fill=\"#fff\"/>\n                                                </svg>\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'}\" [class.tis-curser-pointer]=\"isExpandedRow\" (click)=\"(isExpansion && isExpandedRow) ? toggleExpand(row) : null\" cdkDrag></tr>\n                                    }\n\n                                    @if(!enableDragNDrop) {\n                                        <tr mat-row *matRowDef=\"let row; columns: displayedColumns\" [ngStyle]=\"{'background-color': getRowBackground(row) || 'inherit'}\" [class.tis-curser-pointer]=\"isExpandedRow\" (click)=\"(isExpansion && isExpandedRow) ? toggleExpand(row) : null\"></tr>\n                                    }   \n                                    <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n                                    <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"tis-detail-row\"></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                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"130\" height=\"126.89\" viewBox=\"0 0 647.63626 632.17383\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" role=\"img\" artist=\"Katerina Limpitsouni\" source=\"https://undraw.co/\">\n                                <path d=\"M687.3279,276.08691H512.81813a15.01828,15.01828,0,0,0-15,15v387.85l-2,.61005-42.81006,13.11a8.00676,8.00676,0,0,1-9.98974-5.31L315.678,271.39691a8.00313,8.00313,0,0,1,5.31006-9.99l65.97022-20.2,191.25-58.54,65.96972-20.2a7.98927,7.98927,0,0,1,9.99024,5.3l32.5498,106.32Z\" transform=\"translate(-276.18187 -133.91309)\" fill=\"#f2f2f2\"/>\n                                <path d=\"M725.408,274.08691l-39.23-128.14a16.99368,16.99368,0,0,0-21.23-11.28l-92.75,28.39L380.95827,221.60693l-92.75,28.4a17.0152,17.0152,0,0,0-11.28028,21.23l134.08008,437.93a17.02661,17.02661,0,0,0,16.26026,12.03,16.78926,16.78926,0,0,0,4.96972-.75l63.58008-19.46,2-.62v-2.09l-2,.61-64.16992,19.65a15.01489,15.01489,0,0,1-18.73-9.95l-134.06983-437.94a14.97935,14.97935,0,0,1,9.94971-18.73l92.75-28.4,191.24024-58.54,92.75-28.4a15.15551,15.15551,0,0,1,4.40966-.66,15.01461,15.01461,0,0,1,14.32032,10.61l39.0498,127.56.62012,2h2.08008Z\" transform=\"translate(-276.18187 -133.91309)\" fill=\"#3f3d56\"/>\n                                <path d=\"M398.86279,261.73389a9.0157,9.0157,0,0,1-8.61133-6.3667l-12.88037-42.07178a8.99884,8.99884,0,0,1,5.9712-11.24023l175.939-53.86377a9.00867,9.00867,0,0,1,11.24072,5.9707l12.88037,42.07227a9.01029,9.01029,0,0,1-5.9707,11.24072L401.49219,261.33887A8.976,8.976,0,0,1,398.86279,261.73389Z\" transform=\"translate(-276.18187 -133.91309)\" fill=\"var(--tis-primary, var(--mat-sys-primary, #3838a2))\"/>\n                                <circle cx=\"190.15351\" cy=\"24.95465\" r=\"20\" fill=\"var(--tis-primary, var(--mat-sys-primary, #3838a2))\"/>\n                                <circle cx=\"190.15351\" cy=\"24.95465\" r=\"12.66462\" fill=\"#fff\"/>\n                                <path d=\"M878.81836,716.08691h-338a8.50981,8.50981,0,0,1-8.5-8.5v-405a8.50951,8.50951,0,0,1,8.5-8.5h338a8.50982,8.50982,0,0,1,8.5,8.5v405A8.51013,8.51013,0,0,1,878.81836,716.08691Z\" transform=\"translate(-276.18187 -133.91309)\" fill=\"#e6e6e6\"/>\n                                <path d=\"M723.31813,274.08691h-210.5a17.02411,17.02411,0,0,0-17,17v407.8l2-.61v-407.19a15.01828,15.01828,0,0,1,15-15H723.93825Zm183.5,0h-394a17.02411,17.02411,0,0,0-17,17v458a17.0241,17.0241,0,0,0,17,17h394a17.0241,17.0241,0,0,0,17-17v-458A17.02411,17.02411,0,0,0,906.81813,274.08691Zm15,475a15.01828,15.01828,0,0,1-15,15h-394a15.01828,15.01828,0,0,1-15-15v-458a15.01828,15.01828,0,0,1,15-15h394a15.01828,15.01828,0,0,1,15,15Z\" transform=\"translate(-276.18187 -133.91309)\" fill=\"#3f3d56\"/>\n                                <path d=\"M801.81836,318.08691h-184a9.01015,9.01015,0,0,1-9-9v-44a9.01016,9.01016,0,0,1,9-9h184a9.01016,9.01016,0,0,1,9,9v44A9.01015,9.01015,0,0,1,801.81836,318.08691Z\" transform=\"translate(-276.18187 -133.91309)\" fill=\"var(--tis-primary, var(--mat-sys-primary, #3838a2))\"/>\n                                <circle cx=\"433.63626\" cy=\"105.17383\" r=\"20\" fill=\"var(--tis-primary, var(--mat-sys-primary, #3838a2))\"/>\n                                <circle cx=\"433.63626\" cy=\"105.17383\" r=\"12.18187\" fill=\"#fff\"/>\n                            </svg>\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}.tis-detail-row{height:0!important}.tis-element-detail-wrapper{overflow:hidden;max-height:0;transition:max-height 225ms ease}.tis-element-detail-wrapper-expanded{max-height:500px}.tis-table-bordered{border-collapse:collapse;width:100%}.tis-table-bordered th,.tis-table-bordered td{border-left:1px solid #e0e0e0}.tis-table-bordered th:first-child,.tis-table-bordered td:first-child{border-left:0px solid #e0e0e0}.tis-table-bordered .bg-unset{background-color:unset!important}@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: i15.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i15.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { 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", "selectedTemplate"], outputs: ["selectedTemplateChange", "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 || displayAfterFilterRemoved) {\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\" [class.tis-table-bordered]=\"disableBorderedView == false\" cdkDropList (cdkDropListDropped)=\"drop($event)\" [cdkDropListLockAxis]=\"'y'\" multiTemplateDataRows>\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?.columnDef || column.name\" [sticky]=\"isStickyStart(column?.columnDef || column.name)\" [stickyEnd]=\"isStickyEnd(column?.columnDef || column.name)\">\n                                            @if(column.type == 'expand') {\n                                                <th mat-header-cell *matHeaderCellDef [ngClass]=\"getColumnClasses(column)\">\n                                                    <div style=\"display: flex; align-items: center; gap: 5px;\">\n                                                        <span>{{ column?.columnName ? column?.columnName : t[column.name] }}</span>\n                                                        <mat-icon *ngIf=\"!isAllExpanded\">expand_more</mat-icon>\n                                                        <mat-icon *ngIf=\"isAllExpanded\">expand_less</mat-icon>\n                                                    </div>\n                                                </th>\n                                            }\n                                            @else if(column.sort) {\n                                                <th mat-header-cell mat-sort-header *matHeaderCellDef [ngClass]=\"getColumnClasses(column)\">\n                                                    {{ column?.columnName ? column?.columnName : t[column.name] }}\n                                                </th>\n                                            }\n                                            @else {\n                                                <th mat-header-cell *matHeaderCellDef [ngClass]=\"getColumnClasses(column)\">\n                                                    {{ column?.columnName ? column?.columnName : 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 ? (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 ? (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 ? (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 ? (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?.columnDef || column.name\"  [sticky]=\"isStickyStart(column?.columnDef || column.name)\" [stickyEnd]=\"isStickyEnd(column?.columnDef || column.name)\">\n                                            @if(column.type == 'expand') {\n                                                <th mat-header-cell *matHeaderCellDef [ngClass]=\"getColumnClasses(column)\">\n                                                    <div style=\"display: flex; align-items: center; gap: 5px; cursor: pointer;\" (click)=\"expandAllRow()\">\n                                                        <span>{{ column?.columnName ? column?.columnName : t[column.name] }}</span>\n                                                        <mat-icon *ngIf=\"!isAllExpanded\">expand_more</mat-icon>\n                                                        <mat-icon *ngIf=\"isAllExpanded\">expand_less</mat-icon>\n                                                    </div>\n                                                </th>\n                                            }\n                                            @else if(column.sort) {\n                                                <th mat-header-cell *matHeaderCellDef mat-sort-header [ngClass]=\"getColumnClasses(column)\">\n                                                    {{ column?.columnName ? column?.columnName : t[column.name] }}\n                                                </th>\n                                            }\n                                            @else {\n                                                <th mat-header-cell *matHeaderCellDef [ngClass]=\"getColumnClasses(column)\">\n                                                    {{ column?.columnName ? column?.columnName : 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                                    <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\n                                    <ng-container matColumnDef=\"expandedDetail\">\n                                        <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"displayedColumns.length\" [style.border-bottom-width]=\"element.expanded ? '1px' : '0px'\" style=\"padding: 0px !important;\">\n                                            <div class=\"tis-element-detail-wrapper\" [class.tis-element-detail-wrapper-expanded]=\"element.expanded\">\n                                                <ng-container *ngIf=\"expandedTemplate as template\">\n                                                    <ng-container *ngTemplateOutlet=\"template; context: { colData: element }\"></ng-container>\n                                                </ng-container>\n                                            </div>\n                                        </td>\n                                    </ng-container>\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                                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"130\" height=\"126.89\" viewBox=\"0 0 647.63626 632.17383\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" role=\"img\" artist=\"Katerina Limpitsouni\" source=\"https://undraw.co/\">\n                                                    <path d=\"M687.3279,276.08691H512.81813a15.01828,15.01828,0,0,0-15,15v387.85l-2,.61005-42.81006,13.11a8.00676,8.00676,0,0,1-9.98974-5.31L315.678,271.39691a8.00313,8.00313,0,0,1,5.31006-9.99l65.97022-20.2,191.25-58.54,65.96972-20.2a7.98927,7.98927,0,0,1,9.99024,5.3l32.5498,106.32Z\" transform=\"translate(-276.18187 -133.91309)\" fill=\"#f2f2f2\"/>\n                                                    <path d=\"M725.408,274.08691l-39.23-128.14a16.99368,16.99368,0,0,0-21.23-11.28l-92.75,28.39L380.95827,221.60693l-92.75,28.4a17.0152,17.0152,0,0,0-11.28028,21.23l134.08008,437.93a17.02661,17.02661,0,0,0,16.26026,12.03,16.78926,16.78926,0,0,0,4.96972-.75l63.58008-19.46,2-.62v-2.09l-2,.61-64.16992,19.65a15.01489,15.01489,0,0,1-18.73-9.95l-134.06983-437.94a14.97935,14.97935,0,0,1,9.94971-18.73l92.75-28.4,191.24024-58.54,92.75-28.4a15.15551,15.15551,0,0,1,4.40966-.66,15.01461,15.01461,0,0,1,14.32032,10.61l39.0498,127.56.62012,2h2.08008Z\" transform=\"translate(-276.18187 -133.91309)\" fill=\"#3f3d56\"/>\n                                                    <path d=\"M398.86279,261.73389a9.0157,9.0157,0,0,1-8.61133-6.3667l-12.88037-42.07178a8.99884,8.99884,0,0,1,5.9712-11.24023l175.939-53.86377a9.00867,9.00867,0,0,1,11.24072,5.9707l12.88037,42.07227a9.01029,9.01029,0,0,1-5.9707,11.24072L401.49219,261.33887A8.976,8.976,0,0,1,398.86279,261.73389Z\" transform=\"translate(-276.18187 -133.91309)\" fill=\"var(--tis-primary, var(--mat-sys-primary, #3838a2))\"/>\n                                                    <circle cx=\"190.15351\" cy=\"24.95465\" r=\"20\" fill=\"var(--tis-primary, var(--mat-sys-primary, #3838a2))\"/>\n                                                    <circle cx=\"190.15351\" cy=\"24.95465\" r=\"12.66462\" fill=\"#fff\"/>\n                                                    <path d=\"M878.81836,716.08691h-338a8.50981,8.50981,0,0,1-8.5-8.5v-405a8.50951,8.50951,0,0,1,8.5-8.5h338a8.50982,8.50982,0,0,1,8.5,8.5v405A8.51013,8.51013,0,0,1,878.81836,716.08691Z\" transform=\"translate(-276.18187 -133.91309)\" fill=\"#e6e6e6\"/>\n                                                    <path d=\"M723.31813,274.08691h-210.5a17.02411,17.02411,0,0,0-17,17v407.8l2-.61v-407.19a15.01828,15.01828,0,0,1,15-15H723.93825Zm183.5,0h-394a17.02411,17.02411,0,0,0-17,17v458a17.0241,17.0241,0,0,0,17,17h394a17.0241,17.0241,0,0,0,17-17v-458A17.02411,17.02411,0,0,0,906.81813,274.08691Zm15,475a15.01828,15.01828,0,0,1-15,15h-394a15.01828,15.01828,0,0,1-15-15v-458a15.01828,15.01828,0,0,1,15-15h394a15.01828,15.01828,0,0,1,15,15Z\" transform=\"translate(-276.18187 -133.91309)\" fill=\"#3f3d56\"/>\n                                                    <path d=\"M801.81836,318.08691h-184a9.01015,9.01015,0,0,1-9-9v-44a9.01016,9.01016,0,0,1,9-9h184a9.01016,9.01016,0,0,1,9,9v44A9.01015,9.01015,0,0,1,801.81836,318.08691Z\" transform=\"translate(-276.18187 -133.91309)\" fill=\"var(--tis-primary, var(--mat-sys-primary, #3838a2))\"/>\n                                                    <circle cx=\"433.63626\" cy=\"105.17383\" r=\"20\" fill=\"var(--tis-primary, var(--mat-sys-primary, #3838a2))\"/>\n                                                    <circle cx=\"433.63626\" cy=\"105.17383\" r=\"12.18187\" fill=\"#fff\"/>\n                                                </svg>\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'}\" [class.tis-curser-pointer]=\"isExpandedRow\" (click)=\"(isExpansion && isExpandedRow) ? toggleExpand(row) : null\" cdkDrag></tr>\n                                    }\n\n                                    @if(!enableDragNDrop) {\n                                        <tr mat-row *matRowDef=\"let row; columns: displayedColumns\" [ngStyle]=\"{'background-color': getRowBackground(row) || 'inherit'}\" [class.tis-curser-pointer]=\"isExpandedRow\" (click)=\"(isExpansion && isExpandedRow) ? toggleExpand(row) : null\"></tr>\n                                    }   \n                                    <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n                                    <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"tis-detail-row\"></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                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"130\" height=\"126.89\" viewBox=\"0 0 647.63626 632.17383\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" role=\"img\" artist=\"Katerina Limpitsouni\" source=\"https://undraw.co/\">\n                                <path d=\"M687.3279,276.08691H512.81813a15.01828,15.01828,0,0,0-15,15v387.85l-2,.61005-42.81006,13.11a8.00676,8.00676,0,0,1-9.98974-5.31L315.678,271.39691a8.00313,8.00313,0,0,1,5.31006-9.99l65.97022-20.2,191.25-58.54,65.96972-20.2a7.98927,7.98927,0,0,1,9.99024,5.3l32.5498,106.32Z\" transform=\"translate(-276.18187 -133.91309)\" fill=\"#f2f2f2\"/>\n                                <path d=\"M725.408,274.08691l-39.23-128.14a16.99368,16.99368,0,0,0-21.23-11.28l-92.75,28.39L380.95827,221.60693l-92.75,28.4a17.0152,17.0152,0,0,0-11.28028,21.23l134.08008,437.93a17.02661,17.02661,0,0,0,16.26026,12.03,16.78926,16.78926,0,0,0,4.96972-.75l63.58008-19.46,2-.62v-2.09l-2,.61-64.16992,19.65a15.01489,15.01489,0,0,1-18.73-9.95l-134.06983-437.94a14.97935,14.97935,0,0,1,9.94971-18.73l92.75-28.4,191.24024-58.54,92.75-28.4a15.15551,15.15551,0,0,1,4.40966-.66,15.01461,15.01461,0,0,1,14.32032,10.61l39.0498,127.56.62012,2h2.08008Z\" transform=\"translate(-276.18187 -133.91309)\" fill=\"#3f3d56\"/>\n                                <path d=\"M398.86279,261.73389a9.0157,9.0157,0,0,1-8.61133-6.3667l-12.88037-42.07178a8.99884,8.99884,0,0,1,5.9712-11.24023l175.939-53.86377a9.00867,9.00867,0,0,1,11.24072,5.9707l12.88037,42.07227a9.01029,9.01029,0,0,1-5.9707,11.24072L401.49219,261.33887A8.976,8.976,0,0,1,398.86279,261.73389Z\" transform=\"translate(-276.18187 -133.91309)\" fill=\"var(--tis-primary, var(--mat-sys-primary, #3838a2))\"/>\n                                <circle cx=\"190.15351\" cy=\"24.95465\" r=\"20\" fill=\"var(--tis-primary, var(--mat-sys-primary, #3838a2))\"/>\n                                <circle cx=\"190.15351\" cy=\"24.95465\" r=\"12.66462\" fill=\"#fff\"/>\n                                <path d=\"M878.81836,716.08691h-338a8.50981,8.50981,0,0,1-8.5-8.5v-405a8.50951,8.50951,0,0,1,8.5-8.5h338a8.50982,8.50982,0,0,1,8.5,8.5v405A8.51013,8.51013,0,0,1,878.81836,716.08691Z\" transform=\"translate(-276.18187 -133.91309)\" fill=\"#e6e6e6\"/>\n                                <path d=\"M723.31813,274.08691h-210.5a17.02411,17.02411,0,0,0-17,17v407.8l2-.61v-407.19a15.01828,15.01828,0,0,1,15-15H723.93825Zm183.5,0h-394a17.02411,17.02411,0,0,0-17,17v458a17.0241,17.0241,0,0,0,17,17h394a17.0241,17.0241,0,0,0,17-17v-458A17.02411,17.02411,0,0,0,906.81813,274.08691Zm15,475a15.01828,15.01828,0,0,1-15,15h-394a15.01828,15.01828,0,0,1-15-15v-458a15.01828,15.01828,0,0,1,15-15h394a15.01828,15.01828,0,0,1,15,15Z\" transform=\"translate(-276.18187 -133.91309)\" fill=\"#3f3d56\"/>\n                                <path d=\"M801.81836,318.08691h-184a9.01015,9.01015,0,0,1-9-9v-44a9.01016,9.01016,0,0,1,9-9h184a9.01016,9.01016,0,0,1,9,9v44A9.01015,9.01015,0,0,1,801.81836,318.08691Z\" transform=\"translate(-276.18187 -133.91309)\" fill=\"var(--tis-primary, var(--mat-sys-primary, #3838a2))\"/>\n                                <circle cx=\"433.63626\" cy=\"105.17383\" r=\"20\" fill=\"var(--tis-primary, var(--mat-sys-primary, #3838a2))\"/>\n                                <circle cx=\"433.63626\" cy=\"105.17383\" r=\"12.18187\" fill=\"#fff\"/>\n                            </svg>\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}.tis-detail-row{height:0!important}.tis-element-detail-wrapper{overflow:hidden;max-height:0;transition:max-height 225ms ease}.tis-element-detail-wrapper-expanded{max-height:500px}.tis-table-bordered{border-collapse:collapse;width:100%}.tis-table-bordered th,.tis-table-bordered td{border-left:1px solid #e0e0e0}.tis-table-bordered th:first-child,.tis-table-bordered td:first-child{border-left:0px solid #e0e0e0}.tis-table-bordered .bg-unset{background-color:unset!important}@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 trackByBreadcrumb($index, 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 || displayAfterFilterRemoved) {\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\" [(selectedTemplate)]=\"selectedTemplate\" [defaultColumns]=\"defaultColumns\" [columns]=\"columns\"\n                                            (selectedTemplateChange)=\"onSetSelectedTemplate($event)\"\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 trackByFilterValue($index, 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\" [class.tis-table-bordered]=\"disableBorderedView == false\" cdkDropList (cdkDropListDropped)=\"drop($event)\" [cdkDropListLockAxis]=\"'y'\" multiTemplateDataRows>\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 trackByAutoColumn($index, column); let i = $index; let l = $last){\n                                        <!-- [sticky]=\"i < startStickyColumnCount\" [stickyEnd]=\"i > (autoRenderColumns?.length - endStickyColumnCount)\" -->\n                                        <ng-container [matColumnDef]=\"column?.columnDef || column.name\" [sticky]=\"isStickyStart(column?.columnDef || column.name)\" [stickyEnd]=\"isStickyEnd(column?.columnDef || column.name)\">\n                                            @if(column.type == 'expand') {\n                                                <th mat-header-cell *matHeaderCellDef [ngClass]=\"getColumnClasses(column)\">\n                                                    <div style=\"display: flex; align-items: center; gap: 5px;\">\n                                                        <span>{{ column?.columnName ? column?.columnName : t[column.name] }}</span>\n                                                        <mat-icon *ngIf=\"!isAllExpanded\">expand_more</mat-icon>\n                                                        <mat-icon *ngIf=\"isAllExpanded\">expand_less</mat-icon>\n                                                    </div>\n                                                </th>\n                                            }\n                                            @else if(column.sort) {\n                                                <th mat-header-cell mat-sort-header *matHeaderCellDef [ngClass]=\"getColumnClasses(column)\">\n                                                    {{ column?.columnName ? column?.columnName : t[column.name] }}\n                                                </th>\n                                            }\n                                            @else {\n                                                <th mat-header-cell *matHeaderCellDef [ngClass]=\"getColumnClasses(column)\">\n                                                    {{ column?.columnName ? column?.columnName : 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 ? (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 ? (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 ? (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 ? (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 trackByTemplateColumn($index, column); let i = $index; let l = $last){\n                                        <!-- [sticky]=\"i < startStickyColumnCount\" [stickyEnd]=\"l\" -->\n                                        <ng-container [matColumnDef]=\"column?.columnDef || column.name\"  [sticky]=\"isStickyStart(column?.columnDef || column.name)\" [stickyEnd]=\"isStickyEnd(column?.columnDef || column.name)\">\n                                            @if(column.type == 'expand') {\n                                                <th mat-header-cell *matHeaderCellDef [ngClass]=\"getColumnClasses(column)\">\n                                                    <div style=\"display: flex; align-items: center; gap: 5px; cursor: pointer;\" (click)=\"expandAllRow()\">\n                                                        <span>{{ column?.columnName ? column?.columnName : t[column.name] }}</span>\n                                                        <mat-icon *ngIf=\"!isAllExpanded\">expand_more</mat-icon>\n                                                        <mat-icon *ngIf=\"isAllExpanded\">expand_less</mat-icon>\n                                                    </div>\n                                                </th>\n                                            }\n                                            @else if(column.sort) {\n                                                <th mat-header-cell *matHeaderCellDef mat-sort-header [ngClass]=\"getColumnClasses(column)\">\n                                                    {{ column?.columnName ? column?.columnName : t[column.name] }}\n                                                </th>\n                                            }\n                                            @else {\n                                                <th mat-header-cell *matHeaderCellDef [ngClass]=\"getColumnClasses(column)\">\n                                                    {{ column?.columnName ? column?.columnName : 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                                    <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\n                                    <ng-container matColumnDef=\"expandedDetail\">\n                                        <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"displayedColumns.length\" [style.border-bottom-width]=\"element.expanded ? '1px' : '0px'\" style=\"padding: 0px !important;\">\n                                            <div class=\"tis-element-detail-wrapper\" [class.tis-element-detail-wrapper-expanded]=\"element.expanded\">\n                                                <ng-container *ngIf=\"expandedTemplate as template\">\n                                                    <ng-container *ngTemplateOutlet=\"template; context: { colData: element }\"></ng-container>\n                                                </ng-container>\n                                            </div>\n                                        </td>\n                                    </ng-container>\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                                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"130\" height=\"126.89\" viewBox=\"0 0 647.63626 632.17383\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" role=\"img\" artist=\"Katerina Limpitsouni\" source=\"https://undraw.co/\">\n                                                    <path d=\"M687.3279,276.08691H512.81813a15.01828,15.01828,0,0,0-15,15v387.85l-2,.61005-42.81006,13.11a8.00676,8.00676,0,0,1-9.98974-5.31L315.678,271.39691a8.00313,8.00313,0,0,1,5.31006-9.99l65.97022-20.2,191.25-58.54,65.96972-20.2a7.98927,7.98927,0,0,1,9.99024,5.3l32.5498,106.32Z\" transform=\"translate(-276.18187 -133.91309)\" fill=\"#f2f2f2\"/>\n                                                    <path d=\"M725.408,274.08691l-39.23-128.14a16.99368,16.99368,0,0,0-21.23-11.28l-92.75,28.39L380.95827,221.60693l-92.75,28.4a17.0152,17.0152,0,0,0-11.28028,21.23l134.08008,437.93a17.02661,17.02661,0,0,0,16.26026,12.03,16.78926,16.78926,0,0,0,4.96972-.75l63.58008-19.46,2-.62v-2.09l-2,.61-64.16992,19.65a15.01489,15.01489,0,0,1-18.73-9.95l-134.06983-437.94a14.97935,14.97935,0,0,1,9.94971-18.73l92.75-28.4,191.24024-58.54,92.75-28.4a15.15551,15.15551,0,0,1,4.40966-.66,15.01461,15.01461,0,0,1,14.32032,10.61l39.0498,127.56.62012,2h2.08008Z\" transform=\"translate(-276.18187 -133.91309)\" fill=\"#3f3d56\"/>\n                                                    <path d=\"M398.86279,261.73389a9.0157,9.0157,0,0,1-8.61133-6.3667l-12.88037-42.07178a8.99884,8.99884,0,0,1,5.9712-11.24023l175.939-53.86377a9.00867,9.00867,0,0,1,11.24072,5.9707l12.88037,42.07227a9.01029,9.01029,0,0,1-5.9707,11.24072L401.49219,261.33887A8.976,8.976,0,0,1,398.86279,261.73389Z\" transform=\"translate(-276.18187 -133.91309)\" fill=\"var(--tis-primary, var(--mat-sys-primary, #3838a2))\"/>\n                                                    <circle cx=\"190.15351\" cy=\"24.95465\" r=\"20\" fill=\"var(--tis-primary, var(--mat-sys-primary, #3838a2))\"/>\n                                                    <circle cx=\"190.15351\" cy=\"24.95465\" r=\"12.66462\" fill=\"#fff\"/>\n                                                    <path d=\"M878.81836,716.08691h-338a8.50981,8.50981,0,0,1-8.5-8.5v-405a8.50951,8.50951,0,0,1,8.5-8.5h338a8.50982,8.50982,0,0,1,8.5,8.5v405A8.51013,8.51013,0,0,1,878.81836,716.08691Z\" transform=\"translate(-276.18187 -133.91309)\" fill=\"#e6e6e6\"/>\n                                                    <path d=\"M723.31813,274.08691h-210.5a17.02411,17.02411,0,0,0-17,17v407.8l2-.61v-407.19a15.01828,15.01828,0,0,1,15-15H723.93825Zm183.5,0h-394a17.02411,17.02411,0,0,0-17,17v458a17.0241,17.0241,0,0,0,17,17h394a17.0241,17.0241,0,0,0,17-17v-458A17.02411,17.02411,0,0,0,906.81813,274.08691Zm15,475a15.01828,15.01828,0,0,1-15,15h-394a15.01828,15.01828,0,0,1-15-15v-458a15.01828,15.01828,0,0,1,15-15h394a15.01828,15.01828,0,0,1,15,15Z\" transform=\"translate(-276.18187 -133.91309)\" fill=\"#3f3d56\"/>\n                                                    <path d=\"M801.81836,318.08691h-184a9.01015,9.01015,0,0,1-9-9v-44a9.01016,9.01016,0,0,1,9-9h184a9.01016,9.01016,0,0,1,9,9v44A9.01015,9.01015,0,0,1,801.81836,318.08691Z\" transform=\"translate(-276.18187 -133.91309)\" fill=\"var(--tis-primary, var(--mat-sys-primary, #3838a2))\"/>\n                                                    <circle cx=\"433.63626\" cy=\"105.17383\" r=\"20\" fill=\"var(--tis-primary, var(--mat-sys-primary, #3838a2))\"/>\n                                                    <circle cx=\"433.63626\" cy=\"105.17383\" r=\"12.18187\" fill=\"#fff\"/>\n                                                </svg>\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'}\" [class.tis-curser-pointer]=\"isExpandedRow\" (click)=\"(isExpansion && isExpandedRow) ? toggleExpand(row) : null\" cdkDrag></tr>\n                                    }\n\n                                    @if(!enableDragNDrop) {\n                                        <tr mat-row *matRowDef=\"let row; columns: displayedColumns\" [ngStyle]=\"{'background-color': getRowBackground(row) || 'inherit'}\" [class.tis-curser-pointer]=\"isExpandedRow\" (click)=\"(isExpansion && isExpandedRow) ? toggleExpand(row) : null\"></tr>\n                                    }   \n                                    <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n                                    <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"tis-detail-row\"></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                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"130\" height=\"126.89\" viewBox=\"0 0 647.63626 632.17383\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" role=\"img\" artist=\"Katerina Limpitsouni\" source=\"https://undraw.co/\">\n                                <path d=\"M687.3279,276.08691H512.81813a15.01828,15.01828,0,0,0-15,15v387.85l-2,.61005-42.81006,13.11a8.00676,8.00676,0,0,1-9.98974-5.31L315.678,271.39691a8.00313,8.00313,0,0,1,5.31006-9.99l65.97022-20.2,191.25-58.54,65.96972-20.2a7.98927,7.98927,0,0,1,9.99024,5.3l32.5498,106.32Z\" transform=\"translate(-276.18187 -133.91309)\" fill=\"#f2f2f2\"/>\n                                <path d=\"M725.408,274.08691l-39.23-128.14a16.99368,16.99368,0,0,0-21.23-11.28l-92.75,28.39L380.95827,221.60693l-92.75,28.4a17.0152,17.0152,0,0,0-11.28028,21.23l134.08008,437.93a17.02661,17.02661,0,0,0,16.26026,12.03,16.78926,16.78926,0,0,0,4.96972-.75l63.58008-19.46,2-.62v-2.09l-2,.61-64.16992,19.65a15.01489,15.01489,0,0,1-18.73-9.95l-134.06983-437.94a14.97935,14.97935,0,0,1,9.94971-18.73l92.75-28.4,191.24024-58.54,92.75-28.4a15.15551,15.15551,0,0,1,4.40966-.66,15.01461,15.01461,0,0,1,14.32032,10.61l39.0498,127.56.62012,2h2.08008Z\" transform=\"translate(-276.18187 -133.91309)\" fill=\"#3f3d56\"/>\n                                <path d=\"M398.86279,261.73389a9.0157,9.0157,0,0,1-8.61133-6.3667l-12.88037-42.07178a8.99884,8.99884,0,0,1,5.9712-11.24023l175.939-53.86377a9.00867,9.00867,0,0,1,11.24072,5.9707l12.88037,42.07227a9.01029,9.01029,0,0,1-5.9707,11.24072L401.49219,261.33887A8.976,8.976,0,0,1,398.86279,261.73389Z\" transform=\"translate(-276.18187 -133.91309)\" fill=\"var(--tis-primary, var(--mat-sys-primary, #3838a2))\"/>\n                                <circle cx=\"190.15351\" cy=\"24.95465\" r=\"20\" fill=\"var(--tis-primary, var(--mat-sys-primary, #3838a2))\"/>\n                                <circle cx=\"190.15351\" cy=\"24.95465\" r=\"12.66462\" fill=\"#fff\"/>\n                                <path d=\"M878.81836,716.08691h-338a8.50981,8.50981,0,0,1-8.5-8.5v-405a8.50951,8.50951,0,0,1,8.5-8.5h338a8.50982,8.50982,0,0,1,8.5,8.5v405A8.51013,8.51013,0,0,1,878.81836,716.08691Z\" transform=\"translate(-276.18187 -133.91309)\" fill=\"#e6e6e6\"/>\n                                <path d=\"M723.31813,274.08691h-210.5a17.02411,17.02411,0,0,0-17,17v407.8l2-.61v-407.19a15.01828,15.01828,0,0,1,15-15H723.93825Zm183.5,0h-394a17.02411,17.02411,0,0,0-17,17v458a17.0241,17.0241,0,0,0,17,17h394a17.0241,17.0241,0,0,0,17-17v-458A17.02411,17.02411,0,0,0,906.81813,274.08691Zm15,475a15.01828,15.01828,0,0,1-15,15h-394a15.01828,15.01828,0,0,1-15-15v-458a15.01828,15.01828,0,0,1,15-15h394a15.01828,15.01828,0,0,1,15,15Z\" transform=\"translate(-276.18187 -133.91309)\" fill=\"#3f3d56\"/>\n                                <path d=\"M801.81836,318.08691h-184a9.01015,9.01015,0,0,1-9-9v-44a9.01016,9.01016,0,0,1,9-9h184a9.01016,9.01016,0,0,1,9,9v44A9.01015,9.01015,0,0,1,801.81836,318.08691Z\" transform=\"translate(-276.18187 -133.91309)\" fill=\"var(--tis-primary, var(--mat-sys-primary, #3838a2))\"/>\n                                <circle cx=\"433.63626\" cy=\"105.17383\" r=\"20\" fill=\"var(--tis-primary, var(--mat-sys-primary, #3838a2))\"/>\n                                <circle cx=\"433.63626\" cy=\"105.17383\" r=\"12.18187\" fill=\"#fff\"/>\n                            </svg>\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}.tis-detail-row{height:0!important}.tis-element-detail-wrapper{overflow:hidden;max-height:0;transition:max-height 225ms ease}.tis-element-detail-wrapper-expanded{max-height:500px}.tis-table-bordered{border-collapse:collapse;width:100%}.tis-table-bordered th,.tis-table-bordered td{border-left:1px solid #e0e0e0}.tis-table-bordered th:first-child,.tis-table-bordered td:first-child{border-left:0px solid #e0e0e0}.tis-table-bordered .bg-unset{background-color:unset!important}@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 }]
@@ -1802,7 +2824,6 @@ class TisSmartTableViewerModule {
             Money, TisSmartTableViewerComponent,
             TisColumnsBtnComponent,
             CreateColumnsTemplateComponent,
-            TisSmartTableViewerComponent,
             TisSmartTableErrorDialogComponent,
             TisSmartTableConfirmationDialogComponent], imports: [CommonModule,
             FormsModule,
@@ -1837,7 +2858,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
                         TisSmartTableViewerComponent,
                         TisColumnsBtnComponent,
                         CreateColumnsTemplateComponent,
-                        TisSmartTableViewerComponent,
                         TisSmartTableErrorDialogComponent,
                         TisSmartTableConfirmationDialogComponent
                     ],