npm - @servicemind.tis/angular-smart-data-table - Versions diffs - 1.0.16 → 1.0.17 - Mend

@servicemind.tis/angular-smart-data-table 1.0.16 → 1.0.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/fesm2022/servicemind.tis-angular-smart-data-table.mjs CHANGED Viewed

@@ -2833,11 +2833,11 @@ class AngularSmartDataTableComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: AngularSmartDataTableComponent, deps: [{ token: i1$1.MatDialog }, { token: ApiService }, { token: i3$1.ActivatedRoute }, { token: i3$1.Router }, { token: i4.Location }, { token: i5.BreakpointObserver }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: AngularSmartDataTableComponent, isStandalone: false, selector: "angular-smart-data-table", 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", isSearchFieldMobileResponsive: "isSearchFieldMobileResponsive", isMobileResponsiveTable: "isMobileResponsiveTable", loaderPosition: "loaderPosition", dataNotFoundConfig: "dataNotFoundConfig", showFilterButtonSection: "showFilterButtonSection", columnValueTypeFormats: "columnValueTypeFormats", columnsCodeMapping: "columnsCodeMapping", defaultDisplayedColumns: "defaultDisplayedColumns", defaultSortObj: "defaultSortObj", loadingSpinnerDiameter: "loadingSpinnerDiameter", pageSizeOptions: "pageSizeOptions", pageSize: "pageSize", useGlobalPageSize: "useGlobalPageSize", pageIndex: "pageIndex", filterFormGroup: "filterFormGroup", rowsConfig: "rowsConfig", hasSelectedAllRows: "hasSelectedAllRows", enableRowsSelection: "enableRowsSelection", enableAllRowsSelection: "enableAllRowsSelection", onlySingleSelection: "onlySingleSelection", selectedRowIds: "selectedRowIds", selectedRowKey: "selectedRowKey", selectedRows: "selectedRows", enableDragNDrop: "enableDragNDrop", isExpansion: "isExpansion", isExpandedRow: "isExpandedRow", expandedTemplate: "expandedTemplate", isExpansionForMobileResponsive: "isExpansionForMobileResponsive", isExpandedRowForMobileResponsive: "isExpandedRowForMobileResponsive", expandedTemplateForMobileResponsive: "expandedTemplateForMobileResponsive", headerTemplateForEachRowForMobileResponsive: "headerTemplateForEachRowForMobileResponsive" }, 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: "table", first: true, predicate: MatTable, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<section [class.angular-page]=\"!hideHeader\">\n    <div class=\"angular-page-header\" *ngIf=\"!hideHeader\">\n        <nav aria-label=\"angular-breadcrumb\">\n            <ol class=\"angular-breadcrumb\">\n                <li class=\"angular-breadcrumb-item\"><a href=\"javascript:;\" [routerLink]=\"homeUrl\">{{t?.home}}</a></li>\n                @for(breadcrumb of breadcrumbs; track trackByBreadcrumb($index, breadcrumb)) {\n                    <li class=\"angular-breadcrumb-item\" *ngIf=\"breadcrumb?.url\">\n                        <a href=\"javascript:;\" (click)=\"goToUrl(breadcrumb.url)\">{{breadcrumb?.name}}</a>\n                    </li>\n                }\n                <li class=\"angular-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=\"angular-page-title\" *ngIf=\"!hideHeader\">{{mainTitle}}</h1>\n    <div class=\"angular-page-body\">\n        <div class=\"angular-page-body-content\">\n\n            @if(initialLoading){\n            <div class=\"angular-d-flex angular-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=\"angular-table-container\">\n                        @if(!hideTableHeader){\n                            <div class=\"angular-table-container-header\">\n                                <ul class=\"angular-inline-group\">\n                                    <li class=\"angular-inline-group-item\">\n                                        <angular-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)\"></angular-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=\"angular-inline-group\">\n                                        <ng-content select=\"[slot='filter-right-button-section']\"></ng-content>\n                                    </ul>\n                                    @if((!isMobile || !isSearchFieldMobileResponsive) && searchPlaceholder && searchPlaceholder != ''){\n                                        <mat-form-field\n                                            class=\"custom-mat-form-field-mb-0 search-mat-form-field ml-3 angular-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 angular-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=\"angular-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 angular-curser-pointer\"\n                                                    (click)=\"removeParticularFilter(v)\">cancel</span>\n                                            </span>\n                                        }\n                                    }\n                                </div>\n                            }\n                        }\n\n                        @if((isMobile && isSearchFieldMobileResponsive) && searchPlaceholder && searchPlaceholder != ''){\n                            <mat-form-field\n                                class=\"custom-mat-form-field-mb-0 search-mat-form-field mb-3 angular-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 angular-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=\"angular-d-flex angular-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=\"angular-table-container-body\">\n                            <div class=\"angular-table-wrapper\" [angularSmartDataTableScrolling]=\"true\">\n\n                                @if ( isMobileResponsiveTable == false || (isMobileResponsiveTable == true && isMobile == false)) {\n                                    <!--Table Here-->\n                                    <table mat-table matSort [dataSource]=\"dataSource\" class=\"angular-table\" [class.angular-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 || hasSelectedAllRows\"\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) || hasSelectedAllRows\"></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                                                        @if(column.linkFn) {\n                                                            <a [routerLink]=\"column.linkFn(element)\" class=\"angular-a\">\n                                                                {{ column.valueKey ? (getNestedValue(element, column.valueKey) | angularDate : getColumnFormat(column.type)) : ''}}\n                                                            </a>\n                                                        } @else {\n                                                            <p [class.angular-a]=\"column.clickFn\" (click)=\"column?.clickFn?.(element, $event)\">\n                                                                {{ column.valueKey ? (getNestedValue(element, column.valueKey) | angularDate : getColumnFormat(column.type)) : ''}}\n                                                            </p>\n                                                        }\n                                                    </td>\n                                                } @else if(column.type == 'date-time'){\n                                                    <td mat-cell *matCellDef=\"let element\" class=\"2al-{{column.align}} 2ty-{{column.type}}\">\n                                                        @if(column.linkFn) {\n                                                            <a [routerLink]=\"column.linkFn(element)\" class=\"angular-a\">\n                                                                {{ column.valueKey ? (getNestedValue(element, column.valueKey) | angularDateTime : getColumnFormat(column.type)) : ''}}\n                                                            </a>\n                                                        } @else {\n                                                            <p [class.angular-a]=\"column.clickFn\" (click)=\"column?.clickFn?.(element, $event)\">\n                                                                {{ column.valueKey ? (getNestedValue(element, column.valueKey) | angularDateTime : getColumnFormat(column.type)) : ''}}\n                                                            </p>\n                                                        }\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                                                        @if(column.linkFn) {\n                                                            <a [routerLink]=\"column.linkFn(element)\" class=\"angular-a\">\n                                                                {{ column.valueKey ? (getNestedValue(element, column.valueKey) | angularDateTimeWithSeconds : getColumnFormat(column.type)) : ''}}\n                                                            </a>\n                                                        } @else {\n                                                            <p [class.angular-a]=\"column.clickFn\" (click)=\"column?.clickFn?.(element, $event)\">\n                                                                {{ column.valueKey ? (getNestedValue(element, column.valueKey) | angularDateTimeWithSeconds : getColumnFormat(column.type)) : ''}}\n                                                            </p>\n                                                        }\n                                                    </td>\n                                                } @else {\n                                                    <td mat-cell *matCellDef=\"let element\" class=\"3al-{{column.align}} 3ty-{{column.type}}\" [ngClass]=\"getColumnClasses(column)\">\n                                                        @if(column.linkFn) {\n                                                            <a [routerLink]=\"column.linkFn(element)\" class=\"angular-a\">\n                                                                @if (column.type == 'quantity') {\n                                                                    {{ column.valueKey ? (getNestedValue(element, column.valueKey) | number : (getColumnFormat(column.type) || '1.4-4')) : '-' }}\n                                                                } @else if (column.type == 'money') {\n                                                                    {{ column.valueKey && (getNestedValue(element, column.valueKey)) | angularCurrency : getColumnFormat(column.type) }}\n                                                                } @else {\n                                                                    {{ column.valueKey && getNestedValue(element, column.valueKey) }}\n                                                                }\n                                                            </a>\n                                                        } @else {\n                                                            <p [class.angular-a]=\"column.clickFn\" (click)=\"column?.clickFn?.(element, $event)\">\n                                                                @if (column.type == 'quantity') {\n                                                                    {{ column.valueKey ? (getNestedValue(element, column.valueKey) | number : (getColumnFormat(column.type) || '1.4-4')) : '-' }}\n                                                                } @else if (column.type == 'money') {\n                                                                    {{ column.valueKey && (getNestedValue(element, column.valueKey)) | angularCurrency : getColumnFormat(column.type) }}\n                                                                } @else {\n                                                                    {{ column.valueKey && getNestedValue(element, column.valueKey) }}\n                                                                }\n                                                            </p>\n                                                        }\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=\"angular-curser-pointer\" style=\"color: var(--angular-icon-muted, 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]=\"isRowExpanded(element) ? '1px' : '0px'\" style=\"padding: 0px !important;\">\n                                                <div class=\"angular-element-detail-wrapper\" [class.angular-element-detail-wrapper-expanded]=\"isRowExpanded(element)\">\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=\"angular-data-not-found\">\n                                                    @if(dataNotFoundConfig.iconUrl) {\n                                                        <img [src]=\"dataNotFoundConfig.iconUrl\" alt=\"No data found\" />\n                                                    } @else {\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(--angular-primary, var(--mat-sys-primary, #3838a2))\"/>\n                                                            <circle cx=\"190.15351\" cy=\"24.95465\" r=\"20\" fill=\"var(--angular-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(--angular-primary, var(--mat-sys-primary, #3838a2))\"/>\n                                                            <circle cx=\"433.63626\" cy=\"105.17383\" r=\"20\" fill=\"var(--angular-primary, var(--mat-sys-primary, #3838a2))\"/>\n                                                            <circle cx=\"433.63626\" cy=\"105.17383\" r=\"12.18187\" fill=\"#fff\"/>\n                                                        </svg>\n                                                    }\n                                                    <h5 class=\"angular-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.angular-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.angular-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=\"angular-detail-row\"></tr>\n                                    </table>\n                                    <!--Table End-->\n                                }\n                                @else {\n                                    <!-- Mobile Card View -->\n                                    @if (dataSource?.apiSubject | async; as rows) {\n                                        <table class=\"angular-table angular-mobile-responsive-table\" [class.angular-table-bordered]=\"disableBorderedView == false\">\n                                            <tbody>\n                                                @for (element of rows; track trackByTableRow($index, element)) {\n                                                    <tr [ngStyle]=\"{'background-color': getRowBackground(element) || 'inherit'}\" [class.angular-curser-pointer]=\"isExpandedRowForMobileResponsive\" (click)=\"(isExpansionForMobileResponsive && isExpandedRowForMobileResponsive) ? toggleExpandForMobileResponsive(element) : null\">\n                                                        <td>\n                                                            <div class=\"angular-table-responsive-table-wrapper\">\n                                                                <div class=\"angular-table-responsive-table-header-wrapper\">\n                                                                    @if (enableRowsSelection) {\n                                                                        <div class=\"angular-table-responsive-table-header-wrapper-item\">\n                                                                            <mat-checkbox color=\"primary\" (click)=\"stopPropagation($event)\" (change)=\"$event ? toggleSelection($event, element) : null\" [checked]=\"isChecked(element) || hasSelectedAllRows\"></mat-checkbox>\n                                                                        </div>\n                                                                    }\n                                                                    <div class=\"angular-table-responsive-table-header-wrapper-item\" style=\"flex: 1 1 0%;\">\n                                                                        <ng-container *ngIf=\"headerTemplateForEachRowForMobileResponsive as template\">\n                                                                            <ng-container *ngTemplateOutlet=\"template; context: { colData: element }\"></ng-container>\n                                                                        </ng-container>\n                                                                    </div>\n                                                                </div>\n                                                                <div class=\"angular-table-responsive-table-content-wrapper\" [class.angular-table-responsive-table-content-wrapper-expanded]=\"isRowExpandedForMobileResponsive(element)\">\n                                                                    <ng-container *ngIf=\"expandedTemplateForMobileResponsive as template\">\n                                                                        <ng-container *ngTemplateOutlet=\"template; context: { colData: element }\"></ng-container>\n                                                                    </ng-container>\n                                                                </div>\n                                                            </div>\n                                                        </td>\n                                                    </tr>\n                                                }\n                                            </tbody>\n                                        </table>\n                                    }\n                                }\n\n                            </div>\n                            @if(loaderPosition == 'bottom'){\n                                @if(dataSource?.loading$ | async){\n                                    <div class=\"angular-d-flex angular-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=\"angular-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=\"angular-data-not-found\">\n                            @if(dataNotFoundConfig.iconUrl) {\n                                <img [src]=\"dataNotFoundConfig.iconUrl\" alt=\"No data found\" />\n                            } @else {\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(--angular-primary, var(--mat-sys-primary, #3838a2))\"/>\n                                    <circle cx=\"190.15351\" cy=\"24.95465\" r=\"20\" fill=\"var(--angular-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(--angular-primary, var(--mat-sys-primary, #3838a2))\"/>\n                                    <circle cx=\"433.63626\" cy=\"105.17383\" r=\"20\" fill=\"var(--angular-primary, var(--mat-sys-primary, #3838a2))\"/>\n                                    <circle cx=\"433.63626\" cy=\"105.17383\" r=\"12.18187\" fill=\"#fff\"/>\n                                </svg>\n                            }\n                            <h5 class=\"angular-h5\">{{dataNotFoundConfig.title}}</h5>\n                            @if(dataNotFoundConfig.desc) {\n                                <p class=\"angular-p\">{{dataNotFoundConfig.desc}}</p>\n                            }\n                            @if((dataNotFoundConfig.btnUrl || dataNotFoundConfig?.btnClick) && dataNotFoundConfig.btnText) {\n                                <button mat-flat-button color=\"primary\" class=\"angular-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=\"angular-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: [".angular-page{padding:var(--angular-page-padding, 15px);background-color:var(--angular-page-bg, white)}.angular-page-header{display:flex;justify-content:space-between}.angular-page-title{font-size:var(--angular-page-title-size, 24px);font-weight:500;margin-bottom:10px}::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 var(--angular-table-border, var(--mat-table-row-item-outline-color, var(--mat-sys-outline, rgba(0, 0, 0, .12))))}.mat-mdc-table-sticky-border-elem-left{border-right:1px solid var(--angular-table-border, var(--mat-table-row-item-outline-color, var(--mat-sys-outline, rgba(0, 0, 0, .12))))}.mat-mdc-cell,.mat-mdc-header-cell,.mat-mdc-footer-cell{border-bottom-color:var(--angular-table-border, var(--mat-table-row-item-outline-color, var(--mat-sys-outline, rgba(0, 0, 0, .12))))}.search-mat-form-field{width:100%}.angular-table-search-field,.search-mat-form-field.angular-table-search-field{width:280px;margin-bottom:0!important}::ng-deep .angular-table-search-field .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .angular-table-search-field .mat-mdc-text-field-wrapper{height:var(--angular-search-height, 40px);background-color:var(--angular-search-bg, var(--angular-surface, #ffffff));padding-left:12px!important}::ng-deep .angular-table-search-field .mat-mdc-form-field-infix{min-height:var(--angular-search-height, 40px);padding-top:8px!important;padding-bottom:8px!important}::ng-deep .angular-table-search-field .mdc-notched-outline__leading,::ng-deep .angular-table-search-field .mdc-notched-outline__notch,::ng-deep .angular-table-search-field .mdc-notched-outline__trailing{border-color:var(--angular-search-border, #d0d0d0)!important;border-width:1px!important}::ng-deep .angular-table-search-field .mdc-notched-outline__leading{border-top-left-radius:var(--angular-search-radius, 4px);border-bottom-left-radius:var(--angular-search-radius, 4px)}::ng-deep .angular-table-search-field .mdc-notched-outline__trailing{border-top-right-radius:var(--angular-search-radius, 4px);border-bottom-right-radius:var(--angular-search-radius, 4px)}::ng-deep .angular-table-search-field.mat-focused .mdc-notched-outline__leading,::ng-deep .angular-table-search-field.mat-focused .mdc-notched-outline__notch,::ng-deep .angular-table-search-field.mat-focused .mdc-notched-outline__trailing{border-color:var(--angular-primary, #3838a2)!important}::ng-deep .angular-table-search-field .mat-mdc-form-field-icon-prefix .material-icons,::ng-deep .angular-table-search-field .material-icons[matPrefix],::ng-deep .angular-table-search-field .mat-mdc-form-field-icon-suffix .material-icons{color:var(--angular-search-icon, var(--angular-heading-color, #212121));font-size:20px;width:20px;height:20px}::ng-deep .angular-table-search-field input{color:var(--angular-text-body, rgba(0, 0, 0, .87))}::ng-deep .angular-table-search-field input::placeholder{color:var(--angular-search-placeholder, var(--angular-text-subtle, #9e9e9e));opacity:1}.filter-applied-section{overflow:auto}.angular-detail-row{height:0!important}.angular-element-detail-wrapper{overflow:hidden;max-height:0;transition:max-height 225ms ease}.angular-element-detail-wrapper-expanded{max-height:500px}.angular-table-bordered{border-collapse:collapse;width:100%}.angular-table-bordered th,.angular-table-bordered td{border-left:1px solid var(--angular-table-border, var(--mat-table-row-item-outline-color, var(--mat-sys-outline, rgba(0, 0, 0, .12))))}.angular-table-bordered th:first-child,.angular-table-bordered td:first-child{border-left:0}.angular-table-bordered .bg-unset{background-color:unset!important}.angular-table-responsive-table-wrapper{width:100%;display:flex;flex-direction:column}.angular-table-responsive-table-header-wrapper{width:100%;display:flex;flex-direction:row;gap:10px;align-items:center}.angular-table-responsive-table-content-wrapper{width:100%}@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}}.angular-breadcrumb{display:flex;flex-wrap:wrap;align-items:center;padding:0;margin:0 0 8px;list-style:none;font-size:14px;font-weight:400;line-height:1.4}.angular-breadcrumb-item{color:var(--angular-primary, #3838a2)}.angular-breadcrumb-item a{color:inherit;text-decoration:none}.angular-breadcrumb-item a:hover{text-decoration:underline}.angular-breadcrumb-item+.angular-breadcrumb-item:before{padding:0 .4rem;color:var(--angular-breadcrumb-separator, #6c757d);content:\"/\"}.angular-breadcrumb-item.active{color:var(--angular-text-subtle, #9e9e9e)}.angular-inline-group{display:inline-flex;padding:0;margin:0;gap:15px}.angular-inline-group-item,.angular-inline-group ::ng-deep .angular-inline-group-item{list-style:none;margin:0}.angular-filter-badge{display:inline-flex;align-items:center;gap:4px;color:var(--angular-filter-badge-color, #424242);border:1px solid var(--angular-divider, rgba(0, 0, 0, .12));border-radius:var(--angular-radius, 5px);padding:4px 8px;white-space:nowrap}.angular-filter-badge .mat-icon,.angular-filter-badge .material-icons,.angular-filter-badge .material-symbols-outlined{color:var(--angular-icon-muted, rgba(0, 0, 0, .54))}.angular-curser-pointer{cursor:pointer!important}.angular-table-container-header{display:flex;justify-content:space-between;margin-bottom:15px}.angular-table-container-header .search-mat-form-field{width:280px}.angular-table-container-body{border:1px solid var(--angular-table-border, var(--mat-table-row-item-outline-color, var(--mat-sys-outline, rgba(0, 0, 0, .12))));border-radius:var(--angular-radius, 5px)}.angular-table-wrapper{border-radius:var(--angular-radius, 5px) var(--angular-radius, 5px) 0 0;overflow:auto}.angular-table-wrapper .text-right{text-align:right!important}.angular-table-wrapper .text-left{text-align:left!important}.angular-table-wrapper .text-center{text-align:center!important}.angular-table-paginator{background-color:var(--angular-light, #f5f5f5)!important;border-radius:0 0 var(--angular-radius, 5px) var(--angular-radius, 5px);--mat-form-field-container-height: var(--angular-paginator-height, 25px);--mat-form-field-container-vertical-padding: 0px}.angular-table-paginator mat-paginator{background-color:var(--angular-light, #f5f5f5)!important;border-radius:0 0 var(--angular-radius, 5px) var(--angular-radius, 5px)}::ng-deep .angular-table-paginator .mat-mdc-paginator-page-size{align-items:center}::ng-deep .angular-table-paginator .mat-mdc-paginator-page-size-select{width:var(--angular-paginator-width, 56px);margin:0}::ng-deep .angular-table-paginator .mat-mdc-text-field-wrapper,::ng-deep .angular-table-paginator .mdc-text-field{height:var(--angular-paginator-height, 25px)!important}::ng-deep .angular-table-paginator .mat-mdc-form-field-infix{padding:0!important;min-height:var(--angular-paginator-height, 25px);width:var(--angular-paginator-width, 56px)}::ng-deep .angular-table-paginator .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .angular-table-paginator .mat-mdc-select-value{line-height:var(--angular-paginator-height, 25px)}.angular-table thead{background-color:var(--angular-header-bg, var(--angular-light, #f5f5f5))!important}.angular-table thead tr{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--mat-table-row-item-label-text-font, Roboto, sans-serif);line-height:var(--mat-table-row-item-label-text-line-height);font-size:var(--mat-table-row-item-label-text-size, 14px);font-weight:600;height:var(--mat-table-row-item-container-height, 52px);color:var(--angular-header-color, var(--angular-heading-color, #212121))}.angular-table thead tr th{box-sizing:border-box;overflow:hidden;text-align:left;text-overflow:ellipsis;padding:0 16px!important;font-size:14px!important;color:var(--angular-header-color, var(--angular-heading-color, #212121));background-color:var(--angular-header-bg, var(--angular-light, #f5f5f5));border-bottom-color:var(--angular-table-border, var(--mat-table-row-item-outline-color, var(--mat-sys-outline, rgba(0, 0, 0, .12))));border-bottom-width:var(--mat-table-row-item-outline-width, 1px);border-bottom-style:solid;letter-spacing:var(--mat-table-header-headline-tracking);font-weight:inherit;line-height:inherit}.angular-table thead tr th.angular-pr-0{padding-right:0!important}.angular-table thead tr th.angular-pl-0{padding-left:0!important}.angular-table tbody tr{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;line-height:var(--mat-table-row-item-label-text-line-height);font-size:var(--mat-table-row-item-label-text-size, 14px);font-weight:var(--mat-table-row-item-label-text-weight);height:var(--mat-table-row-item-container-height, 52px);color:var(--mat-table-row-item-label-text-color, rgba(0, 0, 0, .87))}.angular-table tbody tr td{text-align:left;box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;padding:0 16px!important;font-size:14px!important;border-bottom-color:var(--angular-table-border, var(--mat-table-row-item-outline-color, var(--mat-sys-outline, rgba(0, 0, 0, .12))));border-bottom-width:var(--mat-table-row-item-outline-width, 1px);border-bottom-style:solid;letter-spacing:var(--mat-table-header-headline-tracking);font-weight:inherit;line-height:inherit}.angular-table tbody tr td.angular-pr-0{padding-right:0!important}.angular-table tbody tr td.angular-pl-0{padding-left:0!important}.angular-table tbody tr:last-child td{border-bottom-width:0}.angular-mobile-responsive-table thead tr th,.angular-mobile-responsive-table tbody tr td{padding:0!important}.angular-data-not-found{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;margin:20px}.angular-data-not-found h5{font-size:16px!important;font-weight:500!important}.angular-data-not-found p{font-size:14px!important}.angular-data-not-found img{width:130px}.angular-a{font-weight:500;cursor:pointer;color:var(--angular-primary, #3838a2);margin:0!important}.angular-d-flex{display:flex}.angular-justify-content-center{justify-content:center}.angular-h5{margin-top:0;margin-bottom:.5rem;font-weight:500;line-height:1.2;color:var(--angular-heading-color, #212121);font-size:1.25rem}.angular-text-upper{text-transform:uppercase!important}@media (max-width: 575.98px){.angular-table-paginator{background-color:var(--angular-light, #f5f5f5)!important;border-radius:0 0 var(--angular-radius, 5px) var(--angular-radius, 5px)}.angular-table-paginator mat-paginator{background-color:var(--angular-light, #f5f5f5)!important;border-radius:0 0 var(--angular-radius, 5px) var(--angular-radius, 5px)}::ng-deep .angular-table-paginator .mat-mdc-paginator-page-size{margin-top:10px}::ng-deep .angular-table-paginator .mat-mdc-paginator-range-label{margin:0 20px}}@media (max-width: 991.98px){.md-hide-scrollbar::-webkit-scrollbar{width:0!important;height:0!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: "[angularSmartDataTableScrolling]", inputs: ["angularSmartDataTableScrolling"] }, { kind: "component", type: AngularColumnsBtnComponent, selector: "angular-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: AngularDatePipe, name: "angularDate" }, { kind: "pipe", type: AngularDateTimePipe, name: "angularDateTime" }, { kind: "pipe", type: AngularDateTimeWithSecondsPipe, name: "angularDateTimeWithSeconds" }, { kind: "pipe", type: AngularCurrencyPipe, name: "angularCurrency" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: AngularSmartDataTableComponent, isStandalone: false, selector: "angular-smart-data-table", 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", isSearchFieldMobileResponsive: "isSearchFieldMobileResponsive", isMobileResponsiveTable: "isMobileResponsiveTable", loaderPosition: "loaderPosition", dataNotFoundConfig: "dataNotFoundConfig", showFilterButtonSection: "showFilterButtonSection", columnValueTypeFormats: "columnValueTypeFormats", columnsCodeMapping: "columnsCodeMapping", defaultDisplayedColumns: "defaultDisplayedColumns", defaultSortObj: "defaultSortObj", loadingSpinnerDiameter: "loadingSpinnerDiameter", pageSizeOptions: "pageSizeOptions", pageSize: "pageSize", useGlobalPageSize: "useGlobalPageSize", pageIndex: "pageIndex", filterFormGroup: "filterFormGroup", rowsConfig: "rowsConfig", hasSelectedAllRows: "hasSelectedAllRows", enableRowsSelection: "enableRowsSelection", enableAllRowsSelection: "enableAllRowsSelection", onlySingleSelection: "onlySingleSelection", selectedRowIds: "selectedRowIds", selectedRowKey: "selectedRowKey", selectedRows: "selectedRows", enableDragNDrop: "enableDragNDrop", isExpansion: "isExpansion", isExpandedRow: "isExpandedRow", expandedTemplate: "expandedTemplate", isExpansionForMobileResponsive: "isExpansionForMobileResponsive", isExpandedRowForMobileResponsive: "isExpandedRowForMobileResponsive", expandedTemplateForMobileResponsive: "expandedTemplateForMobileResponsive", headerTemplateForEachRowForMobileResponsive: "headerTemplateForEachRowForMobileResponsive" }, 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: "table", first: true, predicate: MatTable, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<section [class.angular-page]=\"!hideHeader\">\n    <div class=\"angular-page-header\" *ngIf=\"!hideHeader\">\n        <nav aria-label=\"angular-breadcrumb\">\n            <ol class=\"angular-breadcrumb\">\n                <li class=\"angular-breadcrumb-item\"><a href=\"javascript:;\" [routerLink]=\"homeUrl\">{{t?.home}}</a></li>\n                @for(breadcrumb of breadcrumbs; track trackByBreadcrumb($index, breadcrumb)) {\n                    <li class=\"angular-breadcrumb-item\" *ngIf=\"breadcrumb?.url\">\n                        <a href=\"javascript:;\" (click)=\"goToUrl(breadcrumb.url)\">{{breadcrumb?.name}}</a>\n                    </li>\n                }\n                <li class=\"angular-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=\"angular-page-title\" *ngIf=\"!hideHeader\">{{mainTitle}}</h1>\n    <div class=\"angular-page-body\">\n        <div class=\"angular-page-body-content\">\n\n            @if(initialLoading){\n            <div class=\"angular-d-flex angular-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=\"angular-table-container\">\n                        @if(!hideTableHeader){\n                            <div class=\"angular-table-container-header\">\n                                <ul class=\"angular-inline-group\">\n                                    <li class=\"angular-inline-group-item\">\n                                        <angular-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)\"></angular-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=\"angular-inline-group\">\n                                        <ng-content select=\"[slot='filter-right-button-section']\"></ng-content>\n                                    </ul>\n                                    @if((!isMobile || !isSearchFieldMobileResponsive) && searchPlaceholder && searchPlaceholder != ''){\n                                        <mat-form-field\n                                            class=\"custom-mat-form-field-mb-0 search-mat-form-field ml-3 angular-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 angular-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=\"angular-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 angular-curser-pointer\"\n                                                    (click)=\"removeParticularFilter(v)\">cancel</span>\n                                            </span>\n                                        }\n                                    }\n                                </div>\n                            }\n                        }\n\n                        @if((isMobile && isSearchFieldMobileResponsive) && searchPlaceholder && searchPlaceholder != ''){\n                            <mat-form-field\n                                class=\"custom-mat-form-field-mb-0 search-mat-form-field mb-3 angular-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 angular-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=\"angular-d-flex angular-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=\"angular-table-container-body\">\n                            <div class=\"angular-table-wrapper\" [angularSmartDataTableScrolling]=\"true\">\n\n                                @if ( isMobileResponsiveTable == false || (isMobileResponsiveTable == true && isMobile == false)) {\n                                    <!--Table Here-->\n                                    <table mat-table matSort [dataSource]=\"dataSource\" class=\"angular-table\" [class.angular-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 || hasSelectedAllRows\"\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) || hasSelectedAllRows\"></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                                                        @if(column.linkFn) {\n                                                            <a [routerLink]=\"column.linkFn(element)\" class=\"angular-a\">\n                                                                {{ column.valueKey ? (getNestedValue(element, column.valueKey) | angularDate : getColumnFormat(column.type)) : ''}}\n                                                            </a>\n                                                        } @else {\n                                                            <p [class.angular-a]=\"column.clickFn\" (click)=\"column?.clickFn?.(element, $event)\">\n                                                                {{ column.valueKey ? (getNestedValue(element, column.valueKey) | angularDate : getColumnFormat(column.type)) : ''}}\n                                                            </p>\n                                                        }\n                                                    </td>\n                                                } @else if(column.type == 'date-time'){\n                                                    <td mat-cell *matCellDef=\"let element\" class=\"2al-{{column.align}} 2ty-{{column.type}}\">\n                                                        @if(column.linkFn) {\n                                                            <a [routerLink]=\"column.linkFn(element)\" class=\"angular-a\">\n                                                                {{ column.valueKey ? (getNestedValue(element, column.valueKey) | angularDateTime : getColumnFormat(column.type)) : ''}}\n                                                            </a>\n                                                        } @else {\n                                                            <p [class.angular-a]=\"column.clickFn\" (click)=\"column?.clickFn?.(element, $event)\">\n                                                                {{ column.valueKey ? (getNestedValue(element, column.valueKey) | angularDateTime : getColumnFormat(column.type)) : ''}}\n                                                            </p>\n                                                        }\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                                                        @if(column.linkFn) {\n                                                            <a [routerLink]=\"column.linkFn(element)\" class=\"angular-a\">\n                                                                {{ column.valueKey ? (getNestedValue(element, column.valueKey) | angularDateTimeWithSeconds : getColumnFormat(column.type)) : ''}}\n                                                            </a>\n                                                        } @else {\n                                                            <p [class.angular-a]=\"column.clickFn\" (click)=\"column?.clickFn?.(element, $event)\">\n                                                                {{ column.valueKey ? (getNestedValue(element, column.valueKey) | angularDateTimeWithSeconds : getColumnFormat(column.type)) : ''}}\n                                                            </p>\n                                                        }\n                                                    </td>\n                                                } @else {\n                                                    <td mat-cell *matCellDef=\"let element\" class=\"3al-{{column.align}} 3ty-{{column.type}}\" [ngClass]=\"getColumnClasses(column)\">\n                                                        @if(column.linkFn) {\n                                                            <a [routerLink]=\"column.linkFn(element)\" class=\"angular-a\">\n                                                                @if (column.type == 'quantity') {\n                                                                    {{ column.valueKey ? (getNestedValue(element, column.valueKey) | number : (getColumnFormat(column.type) || '1.4-4')) : '-' }}\n                                                                } @else if (column.type == 'money') {\n                                                                    {{ column.valueKey && (getNestedValue(element, column.valueKey)) | angularCurrency : getColumnFormat(column.type) }}\n                                                                } @else {\n                                                                    {{ column.valueKey && getNestedValue(element, column.valueKey) }}\n                                                                }\n                                                            </a>\n                                                        } @else {\n                                                            <p [class.angular-a]=\"column.clickFn\" (click)=\"column?.clickFn?.(element, $event)\">\n                                                                @if (column.type == 'quantity') {\n                                                                    {{ column.valueKey ? (getNestedValue(element, column.valueKey) | number : (getColumnFormat(column.type) || '1.4-4')) : '-' }}\n                                                                } @else if (column.type == 'money') {\n                                                                    {{ column.valueKey && (getNestedValue(element, column.valueKey)) | angularCurrency : getColumnFormat(column.type) }}\n                                                                } @else {\n                                                                    {{ column.valueKey && getNestedValue(element, column.valueKey) }}\n                                                                }\n                                                            </p>\n                                                        }\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=\"angular-curser-pointer\" style=\"color: var(--angular-icon-muted, 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]=\"isRowExpanded(element) ? '1px' : '0px'\" style=\"padding: 0px !important;\">\n                                                <div class=\"angular-element-detail-wrapper\" [class.angular-element-detail-wrapper-expanded]=\"isRowExpanded(element)\">\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=\"angular-data-not-found\">\n                                                    @if(dataNotFoundConfig.iconUrl) {\n                                                        <img [src]=\"dataNotFoundConfig.iconUrl\" alt=\"No data found\" />\n                                                    } @else {\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(--angular-primary, var(--mat-sys-primary, #3838a2))\"/>\n                                                            <circle cx=\"190.15351\" cy=\"24.95465\" r=\"20\" fill=\"var(--angular-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(--angular-primary, var(--mat-sys-primary, #3838a2))\"/>\n                                                            <circle cx=\"433.63626\" cy=\"105.17383\" r=\"20\" fill=\"var(--angular-primary, var(--mat-sys-primary, #3838a2))\"/>\n                                                            <circle cx=\"433.63626\" cy=\"105.17383\" r=\"12.18187\" fill=\"#fff\"/>\n                                                        </svg>\n                                                    }\n                                                    <h5 class=\"angular-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.angular-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.angular-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=\"angular-detail-row\"></tr>\n                                    </table>\n                                    <!--Table End-->\n                                }\n                                @else {\n                                    <!-- Mobile Card View -->\n                                    @if (dataSource?.apiSubject | async; as rows) {\n                                        <table class=\"angular-table angular-mobile-responsive-table\" [class.angular-table-bordered]=\"disableBorderedView == false\">\n                                            <tbody>\n                                                @for (element of rows; track trackByTableRow($index, element)) {\n                                                    <tr [ngStyle]=\"{'background-color': getRowBackground(element) || 'inherit'}\" [class.angular-curser-pointer]=\"isExpandedRowForMobileResponsive\" (click)=\"(isExpansionForMobileResponsive && isExpandedRowForMobileResponsive) ? toggleExpandForMobileResponsive(element) : null\">\n                                                        <td>\n                                                            <div class=\"angular-table-responsive-table-wrapper\">\n                                                                <div class=\"angular-table-responsive-table-header-wrapper\">\n                                                                    @if (enableRowsSelection) {\n                                                                        <div class=\"angular-table-responsive-table-header-wrapper-item\">\n                                                                            <mat-checkbox color=\"primary\" (click)=\"stopPropagation($event)\" (change)=\"$event ? toggleSelection($event, element) : null\" [checked]=\"isChecked(element) || hasSelectedAllRows\"></mat-checkbox>\n                                                                        </div>\n                                                                    }\n                                                                    <div class=\"angular-table-responsive-table-header-wrapper-item\" style=\"flex: 1 1 0%;\">\n                                                                        <ng-container *ngIf=\"headerTemplateForEachRowForMobileResponsive as template\">\n                                                                            <ng-container *ngTemplateOutlet=\"template; context: { colData: element }\"></ng-container>\n                                                                        </ng-container>\n                                                                    </div>\n                                                                </div>\n                                                                <div class=\"angular-table-responsive-table-content-wrapper\" [class.angular-table-responsive-table-content-wrapper-expanded]=\"isRowExpandedForMobileResponsive(element)\">\n                                                                    <ng-container *ngIf=\"expandedTemplateForMobileResponsive as template\">\n                                                                        <ng-container *ngTemplateOutlet=\"template; context: { colData: element }\"></ng-container>\n                                                                    </ng-container>\n                                                                </div>\n                                                            </div>\n                                                        </td>\n                                                    </tr>\n                                                }\n                                            </tbody>\n                                        </table>\n                                    }\n                                }\n\n                            </div>\n                            @if(loaderPosition == 'bottom'){\n                                @if(dataSource?.loading$ | async){\n                                    <div class=\"angular-d-flex angular-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=\"angular-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=\"angular-data-not-found\">\n                            @if(dataNotFoundConfig.iconUrl) {\n                                <img [src]=\"dataNotFoundConfig.iconUrl\" alt=\"No data found\" />\n                            } @else {\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(--angular-primary, var(--mat-sys-primary, #3838a2))\"/>\n                                    <circle cx=\"190.15351\" cy=\"24.95465\" r=\"20\" fill=\"var(--angular-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(--angular-primary, var(--mat-sys-primary, #3838a2))\"/>\n                                    <circle cx=\"433.63626\" cy=\"105.17383\" r=\"20\" fill=\"var(--angular-primary, var(--mat-sys-primary, #3838a2))\"/>\n                                    <circle cx=\"433.63626\" cy=\"105.17383\" r=\"12.18187\" fill=\"#fff\"/>\n                                </svg>\n                            }\n                            <h5 class=\"angular-h5\">{{dataNotFoundConfig.title}}</h5>\n                            @if(dataNotFoundConfig.desc) {\n                                <p class=\"angular-p\">{{dataNotFoundConfig.desc}}</p>\n                            }\n                            @if((dataNotFoundConfig.btnUrl || dataNotFoundConfig?.btnClick) && dataNotFoundConfig.btnText) {\n                                <button mat-flat-button color=\"primary\" class=\"angular-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=\"angular-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: [".angular-page{padding:var(--angular-page-padding, 15px);background-color:var(--angular-page-bg, white)}.angular-page-header{display:flex;justify-content:space-between}.angular-page-title{font-size:var(--angular-page-title-size, 24px);font-weight:500;margin-bottom:10px}::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 var(--angular-table-border, var(--mat-table-row-item-outline-color, var(--mat-sys-outline, rgba(0, 0, 0, .12))))}.mat-mdc-table-sticky-border-elem-left{border-right:1px solid var(--angular-table-border, var(--mat-table-row-item-outline-color, var(--mat-sys-outline, rgba(0, 0, 0, .12))))}.mat-mdc-cell,.mat-mdc-header-cell,.mat-mdc-footer-cell{border-bottom-color:var(--angular-table-border, var(--mat-table-row-item-outline-color, var(--mat-sys-outline, rgba(0, 0, 0, .12))))}.search-mat-form-field{width:100%}.angular-table-search-field,.search-mat-form-field.angular-table-search-field{width:280px;margin-bottom:0!important}::ng-deep .angular-table-search-field .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .angular-table-search-field .mat-mdc-text-field-wrapper{height:var(--angular-search-height, 40px);background-color:var(--angular-search-bg, var(--angular-surface, #ffffff));padding-left:12px!important}::ng-deep .angular-table-search-field .mat-mdc-form-field-infix{min-height:var(--angular-search-height, 40px);padding-top:8px!important;padding-bottom:8px!important}::ng-deep .angular-table-search-field .mdc-notched-outline__leading,::ng-deep .angular-table-search-field .mdc-notched-outline__notch,::ng-deep .angular-table-search-field .mdc-notched-outline__trailing{border-color:var(--angular-search-border, #d0d0d0)!important;border-width:1px!important}::ng-deep .angular-table-search-field .mdc-notched-outline__leading{border-top-left-radius:var(--angular-search-radius, 4px);border-bottom-left-radius:var(--angular-search-radius, 4px)}::ng-deep .angular-table-search-field .mdc-notched-outline__trailing{border-top-right-radius:var(--angular-search-radius, 4px);border-bottom-right-radius:var(--angular-search-radius, 4px)}::ng-deep .angular-table-search-field.mat-focused .mdc-notched-outline__leading,::ng-deep .angular-table-search-field.mat-focused .mdc-notched-outline__notch,::ng-deep .angular-table-search-field.mat-focused .mdc-notched-outline__trailing{border-color:var(--angular-primary, #3838a2)!important}::ng-deep .angular-table-search-field .mat-mdc-form-field-icon-prefix .material-icons,::ng-deep .angular-table-search-field .material-icons[matPrefix],::ng-deep .angular-table-search-field .mat-mdc-form-field-icon-suffix .material-icons{color:var(--angular-search-icon, var(--angular-heading-color, #212121));font-size:20px;width:20px;height:20px}::ng-deep .angular-table-search-field input{color:var(--angular-text-body, rgba(0, 0, 0, .87))}::ng-deep .angular-table-search-field input::placeholder{color:var(--angular-search-placeholder, var(--angular-text-subtle, #9e9e9e));opacity:1}.filter-applied-section{overflow:auto}.angular-detail-row{height:0!important}.angular-element-detail-wrapper{overflow:hidden;max-height:0;transition:max-height 225ms ease}.angular-element-detail-wrapper-expanded{max-height:500px}.angular-table-bordered{border-collapse:collapse;width:100%}.angular-table-bordered th,.angular-table-bordered td{border-left:1px solid var(--angular-table-border, var(--mat-table-row-item-outline-color, var(--mat-sys-outline, rgba(0, 0, 0, .12))))}.angular-table-bordered th:first-child,.angular-table-bordered td:first-child{border-left:0}.angular-table-bordered .bg-unset{background-color:unset!important}.angular-table-responsive-table-wrapper{width:100%;display:flex;flex-direction:column}.angular-table-responsive-table-header-wrapper{width:100%;display:flex;flex-direction:row;gap:10px;align-items:center}.angular-table-responsive-table-content-wrapper{width:100%}@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}}.angular-breadcrumb{display:flex;flex-wrap:wrap;align-items:center;padding:0;margin:0 0 8px;list-style:none;font-size:14px;font-weight:400;line-height:1.4}.angular-breadcrumb-item{color:var(--angular-primary, #3838a2)}.angular-breadcrumb-item a{color:inherit;text-decoration:none}.angular-breadcrumb-item a:hover{text-decoration:underline}.angular-breadcrumb-item+.angular-breadcrumb-item:before{padding:0 .4rem;color:var(--angular-breadcrumb-separator, #6c757d);content:\"/\"}.angular-breadcrumb-item.active{color:var(--angular-text-subtle, #9e9e9e)}.angular-inline-group{display:inline-flex;padding:0;margin:0;gap:15px}.angular-inline-group-item,.angular-inline-group ::ng-deep .angular-inline-group-item{list-style:none;margin:0}.angular-filter-badge{display:inline-flex;align-items:center;gap:4px;color:var(--angular-filter-badge-color, #424242);border:1px solid var(--angular-divider, rgba(0, 0, 0, .12));border-radius:var(--angular-radius, 5px);padding:4px 8px;white-space:nowrap}.angular-filter-badge .mat-icon,.angular-filter-badge .material-icons,.angular-filter-badge .material-symbols-outlined{color:var(--angular-icon-muted, rgba(0, 0, 0, .54))}.angular-curser-pointer{cursor:pointer!important}.angular-table-container-header{display:flex;justify-content:space-between;margin-bottom:15px}.angular-table-container-header .search-mat-form-field{width:280px}.angular-table-container-body{border:1px solid var(--angular-table-border, var(--mat-table-row-item-outline-color, var(--mat-sys-outline, rgba(0, 0, 0, .12))));border-radius:var(--angular-radius, 5px)}.angular-table-wrapper{border-radius:var(--angular-radius, 5px) var(--angular-radius, 5px) 0 0;overflow:auto}.angular-table-wrapper .text-right{text-align:right!important}.angular-table-wrapper .text-left{text-align:left!important}.angular-table-wrapper .text-center{text-align:center!important}.angular-table-paginator{background-color:var(--angular-light, #f5f5f5)!important;border-radius:0 0 var(--angular-radius, 5px) var(--angular-radius, 5px);--mat-form-field-container-height: var(--angular-paginator-height, 25px);--mat-form-field-container-vertical-padding: 0px}.angular-table-paginator mat-paginator{background-color:var(--angular-light, #f5f5f5)!important;border-radius:0 0 var(--angular-radius, 5px) var(--angular-radius, 5px)}::ng-deep .angular-table-paginator .mat-mdc-paginator-page-size{align-items:center}::ng-deep .angular-table-paginator .mat-mdc-paginator-page-size-select{width:var(--angular-paginator-width, 56px);margin:0}::ng-deep .angular-table-paginator .mat-mdc-text-field-wrapper,::ng-deep .angular-table-paginator .mdc-text-field{height:var(--angular-paginator-height, 25px)!important}::ng-deep .angular-table-paginator .mat-mdc-form-field-infix{padding:0!important;min-height:var(--angular-paginator-height, 25px);width:var(--angular-paginator-width, 56px)}::ng-deep .angular-table-paginator .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .angular-table-paginator .mat-mdc-select-value{line-height:var(--angular-paginator-height, 25px)}::ng-deep .angular-table thead{background-color:var(--angular-header-bg, var(--angular-light, #f5f5f5))!important}::ng-deep .angular-table thead tr{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--mat-table-row-item-label-text-font, Roboto, sans-serif);line-height:var(--mat-table-row-item-label-text-line-height);font-size:var(--mat-table-row-item-label-text-size, 14px);font-weight:500;height:var(--mat-table-row-item-container-height, 52px);color:var(--angular-header-color, var(--angular-heading-color, #212121))}::ng-deep .angular-table thead tr th{box-sizing:border-box;overflow:hidden;text-align:left;text-overflow:ellipsis;padding:0 16px!important;font-size:14px!important;color:var(--angular-header-color, var(--angular-heading-color, #212121));background-color:var(--angular-header-bg, var(--angular-light, #f5f5f5));border-bottom-color:var(--angular-table-border, var(--mat-table-row-item-outline-color, var(--mat-sys-outline, rgba(0, 0, 0, .12))));border-bottom-width:var(--mat-table-row-item-outline-width, 1px);border-bottom-style:solid;letter-spacing:var(--mat-table-header-headline-tracking);font-weight:inherit;line-height:inherit}.angular-table thead tr th.angular-pr-0{padding-right:0!important}.angular-table thead tr th.angular-pl-0{padding-left:0!important}.angular-table tbody tr{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;line-height:var(--mat-table-row-item-label-text-line-height);font-size:var(--mat-table-row-item-label-text-size, 14px);font-weight:var(--mat-table-row-item-label-text-weight);height:var(--mat-table-row-item-container-height, 52px);color:var(--mat-table-row-item-label-text-color, rgba(0, 0, 0, .87))}.angular-table tbody tr td{text-align:left;box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;padding:0 16px!important;font-size:14px!important;border-bottom-color:var(--angular-table-border, var(--mat-table-row-item-outline-color, var(--mat-sys-outline, rgba(0, 0, 0, .12))));border-bottom-width:var(--mat-table-row-item-outline-width, 1px);border-bottom-style:solid;letter-spacing:var(--mat-table-header-headline-tracking);font-weight:inherit;line-height:inherit}.angular-table tbody tr td.angular-pr-0{padding-right:0!important}.angular-table tbody tr td.angular-pl-0{padding-left:0!important}.angular-table tbody tr:last-child td{border-bottom-width:0}.angular-mobile-responsive-table thead tr th,.angular-mobile-responsive-table tbody tr td{padding:0!important}.angular-data-not-found{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;margin:20px}.angular-data-not-found h5{font-size:16px!important;font-weight:500!important}.angular-data-not-found p{font-size:14px!important}.angular-data-not-found img{width:130px}.angular-a{font-weight:500;cursor:pointer;color:var(--angular-primary, #3838a2);margin:0!important}.angular-d-flex{display:flex}.angular-justify-content-center{justify-content:center}.angular-h5{margin-top:0;margin-bottom:.5rem;font-weight:500;line-height:1.2;color:var(--angular-heading-color, #212121);font-size:1.25rem}.angular-text-upper{text-transform:uppercase!important}@media (max-width: 575.98px){.angular-table-paginator{background-color:var(--angular-light, #f5f5f5)!important;border-radius:0 0 var(--angular-radius, 5px) var(--angular-radius, 5px)}.angular-table-paginator mat-paginator{background-color:var(--angular-light, #f5f5f5)!important;border-radius:0 0 var(--angular-radius, 5px) var(--angular-radius, 5px)}::ng-deep .angular-table-paginator .mat-mdc-paginator-page-size{margin-top:10px}::ng-deep .angular-table-paginator .mat-mdc-paginator-range-label{margin:0 20px}}@media (max-width: 991.98px){.md-hide-scrollbar::-webkit-scrollbar{width:0!important;height:0!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: "[angularSmartDataTableScrolling]", inputs: ["angularSmartDataTableScrolling"] }, { kind: "component", type: AngularColumnsBtnComponent, selector: "angular-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: AngularDatePipe, name: "angularDate" }, { kind: "pipe", type: AngularDateTimePipe, name: "angularDateTime" }, { kind: "pipe", type: AngularDateTimeWithSecondsPipe, name: "angularDateTimeWithSeconds" }, { kind: "pipe", type: AngularCurrencyPipe, name: "angularCurrency" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: AngularSmartDataTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'angular-smart-data-table', standalone: false, providers: [CdkColumnDef], template: "<section [class.angular-page]=\"!hideHeader\">\n    <div class=\"angular-page-header\" *ngIf=\"!hideHeader\">\n        <nav aria-label=\"angular-breadcrumb\">\n            <ol class=\"angular-breadcrumb\">\n                <li class=\"angular-breadcrumb-item\"><a href=\"javascript:;\" [routerLink]=\"homeUrl\">{{t?.home}}</a></li>\n                @for(breadcrumb of breadcrumbs; track trackByBreadcrumb($index, breadcrumb)) {\n                    <li class=\"angular-breadcrumb-item\" *ngIf=\"breadcrumb?.url\">\n                        <a href=\"javascript:;\" (click)=\"goToUrl(breadcrumb.url)\">{{breadcrumb?.name}}</a>\n                    </li>\n                }\n                <li class=\"angular-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=\"angular-page-title\" *ngIf=\"!hideHeader\">{{mainTitle}}</h1>\n    <div class=\"angular-page-body\">\n        <div class=\"angular-page-body-content\">\n\n            @if(initialLoading){\n            <div class=\"angular-d-flex angular-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=\"angular-table-container\">\n                        @if(!hideTableHeader){\n                            <div class=\"angular-table-container-header\">\n                                <ul class=\"angular-inline-group\">\n                                    <li class=\"angular-inline-group-item\">\n                                        <angular-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)\"></angular-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=\"angular-inline-group\">\n                                        <ng-content select=\"[slot='filter-right-button-section']\"></ng-content>\n                                    </ul>\n                                    @if((!isMobile || !isSearchFieldMobileResponsive) && searchPlaceholder && searchPlaceholder != ''){\n                                        <mat-form-field\n                                            class=\"custom-mat-form-field-mb-0 search-mat-form-field ml-3 angular-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 angular-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=\"angular-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 angular-curser-pointer\"\n                                                    (click)=\"removeParticularFilter(v)\">cancel</span>\n                                            </span>\n                                        }\n                                    }\n                                </div>\n                            }\n                        }\n\n                        @if((isMobile && isSearchFieldMobileResponsive) && searchPlaceholder && searchPlaceholder != ''){\n                            <mat-form-field\n                                class=\"custom-mat-form-field-mb-0 search-mat-form-field mb-3 angular-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 angular-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=\"angular-d-flex angular-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=\"angular-table-container-body\">\n                            <div class=\"angular-table-wrapper\" [angularSmartDataTableScrolling]=\"true\">\n\n                                @if ( isMobileResponsiveTable == false || (isMobileResponsiveTable == true && isMobile == false)) {\n                                    <!--Table Here-->\n                                    <table mat-table matSort [dataSource]=\"dataSource\" class=\"angular-table\" [class.angular-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 || hasSelectedAllRows\"\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) || hasSelectedAllRows\"></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                                                        @if(column.linkFn) {\n                                                            <a [routerLink]=\"column.linkFn(element)\" class=\"angular-a\">\n                                                                {{ column.valueKey ? (getNestedValue(element, column.valueKey) | angularDate : getColumnFormat(column.type)) : ''}}\n                                                            </a>\n                                                        } @else {\n                                                            <p [class.angular-a]=\"column.clickFn\" (click)=\"column?.clickFn?.(element, $event)\">\n                                                                {{ column.valueKey ? (getNestedValue(element, column.valueKey) | angularDate : getColumnFormat(column.type)) : ''}}\n                                                            </p>\n                                                        }\n                                                    </td>\n                                                } @else if(column.type == 'date-time'){\n                                                    <td mat-cell *matCellDef=\"let element\" class=\"2al-{{column.align}} 2ty-{{column.type}}\">\n                                                        @if(column.linkFn) {\n                                                            <a [routerLink]=\"column.linkFn(element)\" class=\"angular-a\">\n                                                                {{ column.valueKey ? (getNestedValue(element, column.valueKey) | angularDateTime : getColumnFormat(column.type)) : ''}}\n                                                            </a>\n                                                        } @else {\n                                                            <p [class.angular-a]=\"column.clickFn\" (click)=\"column?.clickFn?.(element, $event)\">\n                                                                {{ column.valueKey ? (getNestedValue(element, column.valueKey) | angularDateTime : getColumnFormat(column.type)) : ''}}\n                                                            </p>\n                                                        }\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                                                        @if(column.linkFn) {\n                                                            <a [routerLink]=\"column.linkFn(element)\" class=\"angular-a\">\n                                                                {{ column.valueKey ? (getNestedValue(element, column.valueKey) | angularDateTimeWithSeconds : getColumnFormat(column.type)) : ''}}\n                                                            </a>\n                                                        } @else {\n                                                            <p [class.angular-a]=\"column.clickFn\" (click)=\"column?.clickFn?.(element, $event)\">\n                                                                {{ column.valueKey ? (getNestedValue(element, column.valueKey) | angularDateTimeWithSeconds : getColumnFormat(column.type)) : ''}}\n                                                            </p>\n                                                        }\n                                                    </td>\n                                                } @else {\n                                                    <td mat-cell *matCellDef=\"let element\" class=\"3al-{{column.align}} 3ty-{{column.type}}\" [ngClass]=\"getColumnClasses(column)\">\n                                                        @if(column.linkFn) {\n                                                            <a [routerLink]=\"column.linkFn(element)\" class=\"angular-a\">\n                                                                @if (column.type == 'quantity') {\n                                                                    {{ column.valueKey ? (getNestedValue(element, column.valueKey) | number : (getColumnFormat(column.type) || '1.4-4')) : '-' }}\n                                                                } @else if (column.type == 'money') {\n                                                                    {{ column.valueKey && (getNestedValue(element, column.valueKey)) | angularCurrency : getColumnFormat(column.type) }}\n                                                                } @else {\n                                                                    {{ column.valueKey && getNestedValue(element, column.valueKey) }}\n                                                                }\n                                                            </a>\n                                                        } @else {\n                                                            <p [class.angular-a]=\"column.clickFn\" (click)=\"column?.clickFn?.(element, $event)\">\n                                                                @if (column.type == 'quantity') {\n                                                                    {{ column.valueKey ? (getNestedValue(element, column.valueKey) | number : (getColumnFormat(column.type) || '1.4-4')) : '-' }}\n                                                                } @else if (column.type == 'money') {\n                                                                    {{ column.valueKey && (getNestedValue(element, column.valueKey)) | angularCurrency : getColumnFormat(column.type) }}\n                                                                } @else {\n                                                                    {{ column.valueKey && getNestedValue(element, column.valueKey) }}\n                                                                }\n                                                            </p>\n                                                        }\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=\"angular-curser-pointer\" style=\"color: var(--angular-icon-muted, 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]=\"isRowExpanded(element) ? '1px' : '0px'\" style=\"padding: 0px !important;\">\n                                                <div class=\"angular-element-detail-wrapper\" [class.angular-element-detail-wrapper-expanded]=\"isRowExpanded(element)\">\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=\"angular-data-not-found\">\n                                                    @if(dataNotFoundConfig.iconUrl) {\n                                                        <img [src]=\"dataNotFoundConfig.iconUrl\" alt=\"No data found\" />\n                                                    } @else {\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(--angular-primary, var(--mat-sys-primary, #3838a2))\"/>\n                                                            <circle cx=\"190.15351\" cy=\"24.95465\" r=\"20\" fill=\"var(--angular-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(--angular-primary, var(--mat-sys-primary, #3838a2))\"/>\n                                                            <circle cx=\"433.63626\" cy=\"105.17383\" r=\"20\" fill=\"var(--angular-primary, var(--mat-sys-primary, #3838a2))\"/>\n                                                            <circle cx=\"433.63626\" cy=\"105.17383\" r=\"12.18187\" fill=\"#fff\"/>\n                                                        </svg>\n                                                    }\n                                                    <h5 class=\"angular-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.angular-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.angular-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=\"angular-detail-row\"></tr>\n                                    </table>\n                                    <!--Table End-->\n                                }\n                                @else {\n                                    <!-- Mobile Card View -->\n                                    @if (dataSource?.apiSubject | async; as rows) {\n                                        <table class=\"angular-table angular-mobile-responsive-table\" [class.angular-table-bordered]=\"disableBorderedView == false\">\n                                            <tbody>\n                                                @for (element of rows; track trackByTableRow($index, element)) {\n                                                    <tr [ngStyle]=\"{'background-color': getRowBackground(element) || 'inherit'}\" [class.angular-curser-pointer]=\"isExpandedRowForMobileResponsive\" (click)=\"(isExpansionForMobileResponsive && isExpandedRowForMobileResponsive) ? toggleExpandForMobileResponsive(element) : null\">\n                                                        <td>\n                                                            <div class=\"angular-table-responsive-table-wrapper\">\n                                                                <div class=\"angular-table-responsive-table-header-wrapper\">\n                                                                    @if (enableRowsSelection) {\n                                                                        <div class=\"angular-table-responsive-table-header-wrapper-item\">\n                                                                            <mat-checkbox color=\"primary\" (click)=\"stopPropagation($event)\" (change)=\"$event ? toggleSelection($event, element) : null\" [checked]=\"isChecked(element) || hasSelectedAllRows\"></mat-checkbox>\n                                                                        </div>\n                                                                    }\n                                                                    <div class=\"angular-table-responsive-table-header-wrapper-item\" style=\"flex: 1 1 0%;\">\n                                                                        <ng-container *ngIf=\"headerTemplateForEachRowForMobileResponsive as template\">\n                                                                            <ng-container *ngTemplateOutlet=\"template; context: { colData: element }\"></ng-container>\n                                                                        </ng-container>\n                                                                    </div>\n                                                                </div>\n                                                                <div class=\"angular-table-responsive-table-content-wrapper\" [class.angular-table-responsive-table-content-wrapper-expanded]=\"isRowExpandedForMobileResponsive(element)\">\n                                                                    <ng-container *ngIf=\"expandedTemplateForMobileResponsive as template\">\n                                                                        <ng-container *ngTemplateOutlet=\"template; context: { colData: element }\"></ng-container>\n                                                                    </ng-container>\n                                                                </div>\n                                                            </div>\n                                                        </td>\n                                                    </tr>\n                                                }\n                                            </tbody>\n                                        </table>\n                                    }\n                                }\n\n                            </div>\n                            @if(loaderPosition == 'bottom'){\n                                @if(dataSource?.loading$ | async){\n                                    <div class=\"angular-d-flex angular-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=\"angular-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=\"angular-data-not-found\">\n                            @if(dataNotFoundConfig.iconUrl) {\n                                <img [src]=\"dataNotFoundConfig.iconUrl\" alt=\"No data found\" />\n                            } @else {\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(--angular-primary, var(--mat-sys-primary, #3838a2))\"/>\n                                    <circle cx=\"190.15351\" cy=\"24.95465\" r=\"20\" fill=\"var(--angular-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(--angular-primary, var(--mat-sys-primary, #3838a2))\"/>\n                                    <circle cx=\"433.63626\" cy=\"105.17383\" r=\"20\" fill=\"var(--angular-primary, var(--mat-sys-primary, #3838a2))\"/>\n                                    <circle cx=\"433.63626\" cy=\"105.17383\" r=\"12.18187\" fill=\"#fff\"/>\n                                </svg>\n                            }\n                            <h5 class=\"angular-h5\">{{dataNotFoundConfig.title}}</h5>\n                            @if(dataNotFoundConfig.desc) {\n                                <p class=\"angular-p\">{{dataNotFoundConfig.desc}}</p>\n                            }\n                            @if((dataNotFoundConfig.btnUrl || dataNotFoundConfig?.btnClick) && dataNotFoundConfig.btnText) {\n                                <button mat-flat-button color=\"primary\" class=\"angular-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=\"angular-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: [".angular-page{padding:var(--angular-page-padding, 15px);background-color:var(--angular-page-bg, white)}.angular-page-header{display:flex;justify-content:space-between}.angular-page-title{font-size:var(--angular-page-title-size, 24px);font-weight:500;margin-bottom:10px}::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 var(--angular-table-border, var(--mat-table-row-item-outline-color, var(--mat-sys-outline, rgba(0, 0, 0, .12))))}.mat-mdc-table-sticky-border-elem-left{border-right:1px solid var(--angular-table-border, var(--mat-table-row-item-outline-color, var(--mat-sys-outline, rgba(0, 0, 0, .12))))}.mat-mdc-cell,.mat-mdc-header-cell,.mat-mdc-footer-cell{border-bottom-color:var(--angular-table-border, var(--mat-table-row-item-outline-color, var(--mat-sys-outline, rgba(0, 0, 0, .12))))}.search-mat-form-field{width:100%}.angular-table-search-field,.search-mat-form-field.angular-table-search-field{width:280px;margin-bottom:0!important}::ng-deep .angular-table-search-field .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .angular-table-search-field .mat-mdc-text-field-wrapper{height:var(--angular-search-height, 40px);background-color:var(--angular-search-bg, var(--angular-surface, #ffffff));padding-left:12px!important}::ng-deep .angular-table-search-field .mat-mdc-form-field-infix{min-height:var(--angular-search-height, 40px);padding-top:8px!important;padding-bottom:8px!important}::ng-deep .angular-table-search-field .mdc-notched-outline__leading,::ng-deep .angular-table-search-field .mdc-notched-outline__notch,::ng-deep .angular-table-search-field .mdc-notched-outline__trailing{border-color:var(--angular-search-border, #d0d0d0)!important;border-width:1px!important}::ng-deep .angular-table-search-field .mdc-notched-outline__leading{border-top-left-radius:var(--angular-search-radius, 4px);border-bottom-left-radius:var(--angular-search-radius, 4px)}::ng-deep .angular-table-search-field .mdc-notched-outline__trailing{border-top-right-radius:var(--angular-search-radius, 4px);border-bottom-right-radius:var(--angular-search-radius, 4px)}::ng-deep .angular-table-search-field.mat-focused .mdc-notched-outline__leading,::ng-deep .angular-table-search-field.mat-focused .mdc-notched-outline__notch,::ng-deep .angular-table-search-field.mat-focused .mdc-notched-outline__trailing{border-color:var(--angular-primary, #3838a2)!important}::ng-deep .angular-table-search-field .mat-mdc-form-field-icon-prefix .material-icons,::ng-deep .angular-table-search-field .material-icons[matPrefix],::ng-deep .angular-table-search-field .mat-mdc-form-field-icon-suffix .material-icons{color:var(--angular-search-icon, var(--angular-heading-color, #212121));font-size:20px;width:20px;height:20px}::ng-deep .angular-table-search-field input{color:var(--angular-text-body, rgba(0, 0, 0, .87))}::ng-deep .angular-table-search-field input::placeholder{color:var(--angular-search-placeholder, var(--angular-text-subtle, #9e9e9e));opacity:1}.filter-applied-section{overflow:auto}.angular-detail-row{height:0!important}.angular-element-detail-wrapper{overflow:hidden;max-height:0;transition:max-height 225ms ease}.angular-element-detail-wrapper-expanded{max-height:500px}.angular-table-bordered{border-collapse:collapse;width:100%}.angular-table-bordered th,.angular-table-bordered td{border-left:1px solid var(--angular-table-border, var(--mat-table-row-item-outline-color, var(--mat-sys-outline, rgba(0, 0, 0, .12))))}.angular-table-bordered th:first-child,.angular-table-bordered td:first-child{border-left:0}.angular-table-bordered .bg-unset{background-color:unset!important}.angular-table-responsive-table-wrapper{width:100%;display:flex;flex-direction:column}.angular-table-responsive-table-header-wrapper{width:100%;display:flex;flex-direction:row;gap:10px;align-items:center}.angular-table-responsive-table-content-wrapper{width:100%}@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}}.angular-breadcrumb{display:flex;flex-wrap:wrap;align-items:center;padding:0;margin:0 0 8px;list-style:none;font-size:14px;font-weight:400;line-height:1.4}.angular-breadcrumb-item{color:var(--angular-primary, #3838a2)}.angular-breadcrumb-item a{color:inherit;text-decoration:none}.angular-breadcrumb-item a:hover{text-decoration:underline}.angular-breadcrumb-item+.angular-breadcrumb-item:before{padding:0 .4rem;color:var(--angular-breadcrumb-separator, #6c757d);content:\"/\"}.angular-breadcrumb-item.active{color:var(--angular-text-subtle, #9e9e9e)}.angular-inline-group{display:inline-flex;padding:0;margin:0;gap:15px}.angular-inline-group-item,.angular-inline-group ::ng-deep .angular-inline-group-item{list-style:none;margin:0}.angular-filter-badge{display:inline-flex;align-items:center;gap:4px;color:var(--angular-filter-badge-color, #424242);border:1px solid var(--angular-divider, rgba(0, 0, 0, .12));border-radius:var(--angular-radius, 5px);padding:4px 8px;white-space:nowrap}.angular-filter-badge .mat-icon,.angular-filter-badge .material-icons,.angular-filter-badge .material-symbols-outlined{color:var(--angular-icon-muted, rgba(0, 0, 0, .54))}.angular-curser-pointer{cursor:pointer!important}.angular-table-container-header{display:flex;justify-content:space-between;margin-bottom:15px}.angular-table-container-header .search-mat-form-field{width:280px}.angular-table-container-body{border:1px solid var(--angular-table-border, var(--mat-table-row-item-outline-color, var(--mat-sys-outline, rgba(0, 0, 0, .12))));border-radius:var(--angular-radius, 5px)}.angular-table-wrapper{border-radius:var(--angular-radius, 5px) var(--angular-radius, 5px) 0 0;overflow:auto}.angular-table-wrapper .text-right{text-align:right!important}.angular-table-wrapper .text-left{text-align:left!important}.angular-table-wrapper .text-center{text-align:center!important}.angular-table-paginator{background-color:var(--angular-light, #f5f5f5)!important;border-radius:0 0 var(--angular-radius, 5px) var(--angular-radius, 5px);--mat-form-field-container-height: var(--angular-paginator-height, 25px);--mat-form-field-container-vertical-padding: 0px}.angular-table-paginator mat-paginator{background-color:var(--angular-light, #f5f5f5)!important;border-radius:0 0 var(--angular-radius, 5px) var(--angular-radius, 5px)}::ng-deep .angular-table-paginator .mat-mdc-paginator-page-size{align-items:center}::ng-deep .angular-table-paginator .mat-mdc-paginator-page-size-select{width:var(--angular-paginator-width, 56px);margin:0}::ng-deep .angular-table-paginator .mat-mdc-text-field-wrapper,::ng-deep .angular-table-paginator .mdc-text-field{height:var(--angular-paginator-height, 25px)!important}::ng-deep .angular-table-paginator .mat-mdc-form-field-infix{padding:0!important;min-height:var(--angular-paginator-height, 25px);width:var(--angular-paginator-width, 56px)}::ng-deep .angular-table-paginator .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .angular-table-paginator .mat-mdc-select-value{line-height:var(--angular-paginator-height, 25px)}.angular-table thead{background-color:var(--angular-header-bg, var(--angular-light, #f5f5f5))!important}.angular-table thead tr{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--mat-table-row-item-label-text-font, Roboto, sans-serif);line-height:var(--mat-table-row-item-label-text-line-height);font-size:var(--mat-table-row-item-label-text-size, 14px);font-weight:600;height:var(--mat-table-row-item-container-height, 52px);color:var(--angular-header-color, var(--angular-heading-color, #212121))}.angular-table thead tr th{box-sizing:border-box;overflow:hidden;text-align:left;text-overflow:ellipsis;padding:0 16px!important;font-size:14px!important;color:var(--angular-header-color, var(--angular-heading-color, #212121));background-color:var(--angular-header-bg, var(--angular-light, #f5f5f5));border-bottom-color:var(--angular-table-border, var(--mat-table-row-item-outline-color, var(--mat-sys-outline, rgba(0, 0, 0, .12))));border-bottom-width:var(--mat-table-row-item-outline-width, 1px);border-bottom-style:solid;letter-spacing:var(--mat-table-header-headline-tracking);font-weight:inherit;line-height:inherit}.angular-table thead tr th.angular-pr-0{padding-right:0!important}.angular-table thead tr th.angular-pl-0{padding-left:0!important}.angular-table tbody tr{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;line-height:var(--mat-table-row-item-label-text-line-height);font-size:var(--mat-table-row-item-label-text-size, 14px);font-weight:var(--mat-table-row-item-label-text-weight);height:var(--mat-table-row-item-container-height, 52px);color:var(--mat-table-row-item-label-text-color, rgba(0, 0, 0, .87))}.angular-table tbody tr td{text-align:left;box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;padding:0 16px!important;font-size:14px!important;border-bottom-color:var(--angular-table-border, var(--mat-table-row-item-outline-color, var(--mat-sys-outline, rgba(0, 0, 0, .12))));border-bottom-width:var(--mat-table-row-item-outline-width, 1px);border-bottom-style:solid;letter-spacing:var(--mat-table-header-headline-tracking);font-weight:inherit;line-height:inherit}.angular-table tbody tr td.angular-pr-0{padding-right:0!important}.angular-table tbody tr td.angular-pl-0{padding-left:0!important}.angular-table tbody tr:last-child td{border-bottom-width:0}.angular-mobile-responsive-table thead tr th,.angular-mobile-responsive-table tbody tr td{padding:0!important}.angular-data-not-found{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;margin:20px}.angular-data-not-found h5{font-size:16px!important;font-weight:500!important}.angular-data-not-found p{font-size:14px!important}.angular-data-not-found img{width:130px}.angular-a{font-weight:500;cursor:pointer;color:var(--angular-primary, #3838a2);margin:0!important}.angular-d-flex{display:flex}.angular-justify-content-center{justify-content:center}.angular-h5{margin-top:0;margin-bottom:.5rem;font-weight:500;line-height:1.2;color:var(--angular-heading-color, #212121);font-size:1.25rem}.angular-text-upper{text-transform:uppercase!important}@media (max-width: 575.98px){.angular-table-paginator{background-color:var(--angular-light, #f5f5f5)!important;border-radius:0 0 var(--angular-radius, 5px) var(--angular-radius, 5px)}.angular-table-paginator mat-paginator{background-color:var(--angular-light, #f5f5f5)!important;border-radius:0 0 var(--angular-radius, 5px) var(--angular-radius, 5px)}::ng-deep .angular-table-paginator .mat-mdc-paginator-page-size{margin-top:10px}::ng-deep .angular-table-paginator .mat-mdc-paginator-range-label{margin:0 20px}}@media (max-width: 991.98px){.md-hide-scrollbar::-webkit-scrollbar{width:0!important;height:0!important}}\n"] }]
+            args: [{ selector: 'angular-smart-data-table', standalone: false, providers: [CdkColumnDef], template: "<section [class.angular-page]=\"!hideHeader\">\n    <div class=\"angular-page-header\" *ngIf=\"!hideHeader\">\n        <nav aria-label=\"angular-breadcrumb\">\n            <ol class=\"angular-breadcrumb\">\n                <li class=\"angular-breadcrumb-item\"><a href=\"javascript:;\" [routerLink]=\"homeUrl\">{{t?.home}}</a></li>\n                @for(breadcrumb of breadcrumbs; track trackByBreadcrumb($index, breadcrumb)) {\n                    <li class=\"angular-breadcrumb-item\" *ngIf=\"breadcrumb?.url\">\n                        <a href=\"javascript:;\" (click)=\"goToUrl(breadcrumb.url)\">{{breadcrumb?.name}}</a>\n                    </li>\n                }\n                <li class=\"angular-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=\"angular-page-title\" *ngIf=\"!hideHeader\">{{mainTitle}}</h1>\n    <div class=\"angular-page-body\">\n        <div class=\"angular-page-body-content\">\n\n            @if(initialLoading){\n            <div class=\"angular-d-flex angular-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=\"angular-table-container\">\n                        @if(!hideTableHeader){\n                            <div class=\"angular-table-container-header\">\n                                <ul class=\"angular-inline-group\">\n                                    <li class=\"angular-inline-group-item\">\n                                        <angular-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)\"></angular-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=\"angular-inline-group\">\n                                        <ng-content select=\"[slot='filter-right-button-section']\"></ng-content>\n                                    </ul>\n                                    @if((!isMobile || !isSearchFieldMobileResponsive) && searchPlaceholder && searchPlaceholder != ''){\n                                        <mat-form-field\n                                            class=\"custom-mat-form-field-mb-0 search-mat-form-field ml-3 angular-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 angular-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=\"angular-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 angular-curser-pointer\"\n                                                    (click)=\"removeParticularFilter(v)\">cancel</span>\n                                            </span>\n                                        }\n                                    }\n                                </div>\n                            }\n                        }\n\n                        @if((isMobile && isSearchFieldMobileResponsive) && searchPlaceholder && searchPlaceholder != ''){\n                            <mat-form-field\n                                class=\"custom-mat-form-field-mb-0 search-mat-form-field mb-3 angular-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 angular-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=\"angular-d-flex angular-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=\"angular-table-container-body\">\n                            <div class=\"angular-table-wrapper\" [angularSmartDataTableScrolling]=\"true\">\n\n                                @if ( isMobileResponsiveTable == false || (isMobileResponsiveTable == true && isMobile == false)) {\n                                    <!--Table Here-->\n                                    <table mat-table matSort [dataSource]=\"dataSource\" class=\"angular-table\" [class.angular-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 || hasSelectedAllRows\"\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) || hasSelectedAllRows\"></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                                                        @if(column.linkFn) {\n                                                            <a [routerLink]=\"column.linkFn(element)\" class=\"angular-a\">\n                                                                {{ column.valueKey ? (getNestedValue(element, column.valueKey) | angularDate : getColumnFormat(column.type)) : ''}}\n                                                            </a>\n                                                        } @else {\n                                                            <p [class.angular-a]=\"column.clickFn\" (click)=\"column?.clickFn?.(element, $event)\">\n                                                                {{ column.valueKey ? (getNestedValue(element, column.valueKey) | angularDate : getColumnFormat(column.type)) : ''}}\n                                                            </p>\n                                                        }\n                                                    </td>\n                                                } @else if(column.type == 'date-time'){\n                                                    <td mat-cell *matCellDef=\"let element\" class=\"2al-{{column.align}} 2ty-{{column.type}}\">\n                                                        @if(column.linkFn) {\n                                                            <a [routerLink]=\"column.linkFn(element)\" class=\"angular-a\">\n                                                                {{ column.valueKey ? (getNestedValue(element, column.valueKey) | angularDateTime : getColumnFormat(column.type)) : ''}}\n                                                            </a>\n                                                        } @else {\n                                                            <p [class.angular-a]=\"column.clickFn\" (click)=\"column?.clickFn?.(element, $event)\">\n                                                                {{ column.valueKey ? (getNestedValue(element, column.valueKey) | angularDateTime : getColumnFormat(column.type)) : ''}}\n                                                            </p>\n                                                        }\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                                                        @if(column.linkFn) {\n                                                            <a [routerLink]=\"column.linkFn(element)\" class=\"angular-a\">\n                                                                {{ column.valueKey ? (getNestedValue(element, column.valueKey) | angularDateTimeWithSeconds : getColumnFormat(column.type)) : ''}}\n                                                            </a>\n                                                        } @else {\n                                                            <p [class.angular-a]=\"column.clickFn\" (click)=\"column?.clickFn?.(element, $event)\">\n                                                                {{ column.valueKey ? (getNestedValue(element, column.valueKey) | angularDateTimeWithSeconds : getColumnFormat(column.type)) : ''}}\n                                                            </p>\n                                                        }\n                                                    </td>\n                                                } @else {\n                                                    <td mat-cell *matCellDef=\"let element\" class=\"3al-{{column.align}} 3ty-{{column.type}}\" [ngClass]=\"getColumnClasses(column)\">\n                                                        @if(column.linkFn) {\n                                                            <a [routerLink]=\"column.linkFn(element)\" class=\"angular-a\">\n                                                                @if (column.type == 'quantity') {\n                                                                    {{ column.valueKey ? (getNestedValue(element, column.valueKey) | number : (getColumnFormat(column.type) || '1.4-4')) : '-' }}\n                                                                } @else if (column.type == 'money') {\n                                                                    {{ column.valueKey && (getNestedValue(element, column.valueKey)) | angularCurrency : getColumnFormat(column.type) }}\n                                                                } @else {\n                                                                    {{ column.valueKey && getNestedValue(element, column.valueKey) }}\n                                                                }\n                                                            </a>\n                                                        } @else {\n                                                            <p [class.angular-a]=\"column.clickFn\" (click)=\"column?.clickFn?.(element, $event)\">\n                                                                @if (column.type == 'quantity') {\n                                                                    {{ column.valueKey ? (getNestedValue(element, column.valueKey) | number : (getColumnFormat(column.type) || '1.4-4')) : '-' }}\n                                                                } @else if (column.type == 'money') {\n                                                                    {{ column.valueKey && (getNestedValue(element, column.valueKey)) | angularCurrency : getColumnFormat(column.type) }}\n                                                                } @else {\n                                                                    {{ column.valueKey && getNestedValue(element, column.valueKey) }}\n                                                                }\n                                                            </p>\n                                                        }\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=\"angular-curser-pointer\" style=\"color: var(--angular-icon-muted, 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]=\"isRowExpanded(element) ? '1px' : '0px'\" style=\"padding: 0px !important;\">\n                                                <div class=\"angular-element-detail-wrapper\" [class.angular-element-detail-wrapper-expanded]=\"isRowExpanded(element)\">\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=\"angular-data-not-found\">\n                                                    @if(dataNotFoundConfig.iconUrl) {\n                                                        <img [src]=\"dataNotFoundConfig.iconUrl\" alt=\"No data found\" />\n                                                    } @else {\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(--angular-primary, var(--mat-sys-primary, #3838a2))\"/>\n                                                            <circle cx=\"190.15351\" cy=\"24.95465\" r=\"20\" fill=\"var(--angular-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(--angular-primary, var(--mat-sys-primary, #3838a2))\"/>\n                                                            <circle cx=\"433.63626\" cy=\"105.17383\" r=\"20\" fill=\"var(--angular-primary, var(--mat-sys-primary, #3838a2))\"/>\n                                                            <circle cx=\"433.63626\" cy=\"105.17383\" r=\"12.18187\" fill=\"#fff\"/>\n                                                        </svg>\n                                                    }\n                                                    <h5 class=\"angular-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.angular-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.angular-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=\"angular-detail-row\"></tr>\n                                    </table>\n                                    <!--Table End-->\n                                }\n                                @else {\n                                    <!-- Mobile Card View -->\n                                    @if (dataSource?.apiSubject | async; as rows) {\n                                        <table class=\"angular-table angular-mobile-responsive-table\" [class.angular-table-bordered]=\"disableBorderedView == false\">\n                                            <tbody>\n                                                @for (element of rows; track trackByTableRow($index, element)) {\n                                                    <tr [ngStyle]=\"{'background-color': getRowBackground(element) || 'inherit'}\" [class.angular-curser-pointer]=\"isExpandedRowForMobileResponsive\" (click)=\"(isExpansionForMobileResponsive && isExpandedRowForMobileResponsive) ? toggleExpandForMobileResponsive(element) : null\">\n                                                        <td>\n                                                            <div class=\"angular-table-responsive-table-wrapper\">\n                                                                <div class=\"angular-table-responsive-table-header-wrapper\">\n                                                                    @if (enableRowsSelection) {\n                                                                        <div class=\"angular-table-responsive-table-header-wrapper-item\">\n                                                                            <mat-checkbox color=\"primary\" (click)=\"stopPropagation($event)\" (change)=\"$event ? toggleSelection($event, element) : null\" [checked]=\"isChecked(element) || hasSelectedAllRows\"></mat-checkbox>\n                                                                        </div>\n                                                                    }\n                                                                    <div class=\"angular-table-responsive-table-header-wrapper-item\" style=\"flex: 1 1 0%;\">\n                                                                        <ng-container *ngIf=\"headerTemplateForEachRowForMobileResponsive as template\">\n                                                                            <ng-container *ngTemplateOutlet=\"template; context: { colData: element }\"></ng-container>\n                                                                        </ng-container>\n                                                                    </div>\n                                                                </div>\n                                                                <div class=\"angular-table-responsive-table-content-wrapper\" [class.angular-table-responsive-table-content-wrapper-expanded]=\"isRowExpandedForMobileResponsive(element)\">\n                                                                    <ng-container *ngIf=\"expandedTemplateForMobileResponsive as template\">\n                                                                        <ng-container *ngTemplateOutlet=\"template; context: { colData: element }\"></ng-container>\n                                                                    </ng-container>\n                                                                </div>\n                                                            </div>\n                                                        </td>\n                                                    </tr>\n                                                }\n                                            </tbody>\n                                        </table>\n                                    }\n                                }\n\n                            </div>\n                            @if(loaderPosition == 'bottom'){\n                                @if(dataSource?.loading$ | async){\n                                    <div class=\"angular-d-flex angular-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=\"angular-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=\"angular-data-not-found\">\n                            @if(dataNotFoundConfig.iconUrl) {\n                                <img [src]=\"dataNotFoundConfig.iconUrl\" alt=\"No data found\" />\n                            } @else {\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(--angular-primary, var(--mat-sys-primary, #3838a2))\"/>\n                                    <circle cx=\"190.15351\" cy=\"24.95465\" r=\"20\" fill=\"var(--angular-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(--angular-primary, var(--mat-sys-primary, #3838a2))\"/>\n                                    <circle cx=\"433.63626\" cy=\"105.17383\" r=\"20\" fill=\"var(--angular-primary, var(--mat-sys-primary, #3838a2))\"/>\n                                    <circle cx=\"433.63626\" cy=\"105.17383\" r=\"12.18187\" fill=\"#fff\"/>\n                                </svg>\n                            }\n                            <h5 class=\"angular-h5\">{{dataNotFoundConfig.title}}</h5>\n                            @if(dataNotFoundConfig.desc) {\n                                <p class=\"angular-p\">{{dataNotFoundConfig.desc}}</p>\n                            }\n                            @if((dataNotFoundConfig.btnUrl || dataNotFoundConfig?.btnClick) && dataNotFoundConfig.btnText) {\n                                <button mat-flat-button color=\"primary\" class=\"angular-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=\"angular-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: [".angular-page{padding:var(--angular-page-padding, 15px);background-color:var(--angular-page-bg, white)}.angular-page-header{display:flex;justify-content:space-between}.angular-page-title{font-size:var(--angular-page-title-size, 24px);font-weight:500;margin-bottom:10px}::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 var(--angular-table-border, var(--mat-table-row-item-outline-color, var(--mat-sys-outline, rgba(0, 0, 0, .12))))}.mat-mdc-table-sticky-border-elem-left{border-right:1px solid var(--angular-table-border, var(--mat-table-row-item-outline-color, var(--mat-sys-outline, rgba(0, 0, 0, .12))))}.mat-mdc-cell,.mat-mdc-header-cell,.mat-mdc-footer-cell{border-bottom-color:var(--angular-table-border, var(--mat-table-row-item-outline-color, var(--mat-sys-outline, rgba(0, 0, 0, .12))))}.search-mat-form-field{width:100%}.angular-table-search-field,.search-mat-form-field.angular-table-search-field{width:280px;margin-bottom:0!important}::ng-deep .angular-table-search-field .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .angular-table-search-field .mat-mdc-text-field-wrapper{height:var(--angular-search-height, 40px);background-color:var(--angular-search-bg, var(--angular-surface, #ffffff));padding-left:12px!important}::ng-deep .angular-table-search-field .mat-mdc-form-field-infix{min-height:var(--angular-search-height, 40px);padding-top:8px!important;padding-bottom:8px!important}::ng-deep .angular-table-search-field .mdc-notched-outline__leading,::ng-deep .angular-table-search-field .mdc-notched-outline__notch,::ng-deep .angular-table-search-field .mdc-notched-outline__trailing{border-color:var(--angular-search-border, #d0d0d0)!important;border-width:1px!important}::ng-deep .angular-table-search-field .mdc-notched-outline__leading{border-top-left-radius:var(--angular-search-radius, 4px);border-bottom-left-radius:var(--angular-search-radius, 4px)}::ng-deep .angular-table-search-field .mdc-notched-outline__trailing{border-top-right-radius:var(--angular-search-radius, 4px);border-bottom-right-radius:var(--angular-search-radius, 4px)}::ng-deep .angular-table-search-field.mat-focused .mdc-notched-outline__leading,::ng-deep .angular-table-search-field.mat-focused .mdc-notched-outline__notch,::ng-deep .angular-table-search-field.mat-focused .mdc-notched-outline__trailing{border-color:var(--angular-primary, #3838a2)!important}::ng-deep .angular-table-search-field .mat-mdc-form-field-icon-prefix .material-icons,::ng-deep .angular-table-search-field .material-icons[matPrefix],::ng-deep .angular-table-search-field .mat-mdc-form-field-icon-suffix .material-icons{color:var(--angular-search-icon, var(--angular-heading-color, #212121));font-size:20px;width:20px;height:20px}::ng-deep .angular-table-search-field input{color:var(--angular-text-body, rgba(0, 0, 0, .87))}::ng-deep .angular-table-search-field input::placeholder{color:var(--angular-search-placeholder, var(--angular-text-subtle, #9e9e9e));opacity:1}.filter-applied-section{overflow:auto}.angular-detail-row{height:0!important}.angular-element-detail-wrapper{overflow:hidden;max-height:0;transition:max-height 225ms ease}.angular-element-detail-wrapper-expanded{max-height:500px}.angular-table-bordered{border-collapse:collapse;width:100%}.angular-table-bordered th,.angular-table-bordered td{border-left:1px solid var(--angular-table-border, var(--mat-table-row-item-outline-color, var(--mat-sys-outline, rgba(0, 0, 0, .12))))}.angular-table-bordered th:first-child,.angular-table-bordered td:first-child{border-left:0}.angular-table-bordered .bg-unset{background-color:unset!important}.angular-table-responsive-table-wrapper{width:100%;display:flex;flex-direction:column}.angular-table-responsive-table-header-wrapper{width:100%;display:flex;flex-direction:row;gap:10px;align-items:center}.angular-table-responsive-table-content-wrapper{width:100%}@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}}.angular-breadcrumb{display:flex;flex-wrap:wrap;align-items:center;padding:0;margin:0 0 8px;list-style:none;font-size:14px;font-weight:400;line-height:1.4}.angular-breadcrumb-item{color:var(--angular-primary, #3838a2)}.angular-breadcrumb-item a{color:inherit;text-decoration:none}.angular-breadcrumb-item a:hover{text-decoration:underline}.angular-breadcrumb-item+.angular-breadcrumb-item:before{padding:0 .4rem;color:var(--angular-breadcrumb-separator, #6c757d);content:\"/\"}.angular-breadcrumb-item.active{color:var(--angular-text-subtle, #9e9e9e)}.angular-inline-group{display:inline-flex;padding:0;margin:0;gap:15px}.angular-inline-group-item,.angular-inline-group ::ng-deep .angular-inline-group-item{list-style:none;margin:0}.angular-filter-badge{display:inline-flex;align-items:center;gap:4px;color:var(--angular-filter-badge-color, #424242);border:1px solid var(--angular-divider, rgba(0, 0, 0, .12));border-radius:var(--angular-radius, 5px);padding:4px 8px;white-space:nowrap}.angular-filter-badge .mat-icon,.angular-filter-badge .material-icons,.angular-filter-badge .material-symbols-outlined{color:var(--angular-icon-muted, rgba(0, 0, 0, .54))}.angular-curser-pointer{cursor:pointer!important}.angular-table-container-header{display:flex;justify-content:space-between;margin-bottom:15px}.angular-table-container-header .search-mat-form-field{width:280px}.angular-table-container-body{border:1px solid var(--angular-table-border, var(--mat-table-row-item-outline-color, var(--mat-sys-outline, rgba(0, 0, 0, .12))));border-radius:var(--angular-radius, 5px)}.angular-table-wrapper{border-radius:var(--angular-radius, 5px) var(--angular-radius, 5px) 0 0;overflow:auto}.angular-table-wrapper .text-right{text-align:right!important}.angular-table-wrapper .text-left{text-align:left!important}.angular-table-wrapper .text-center{text-align:center!important}.angular-table-paginator{background-color:var(--angular-light, #f5f5f5)!important;border-radius:0 0 var(--angular-radius, 5px) var(--angular-radius, 5px);--mat-form-field-container-height: var(--angular-paginator-height, 25px);--mat-form-field-container-vertical-padding: 0px}.angular-table-paginator mat-paginator{background-color:var(--angular-light, #f5f5f5)!important;border-radius:0 0 var(--angular-radius, 5px) var(--angular-radius, 5px)}::ng-deep .angular-table-paginator .mat-mdc-paginator-page-size{align-items:center}::ng-deep .angular-table-paginator .mat-mdc-paginator-page-size-select{width:var(--angular-paginator-width, 56px);margin:0}::ng-deep .angular-table-paginator .mat-mdc-text-field-wrapper,::ng-deep .angular-table-paginator .mdc-text-field{height:var(--angular-paginator-height, 25px)!important}::ng-deep .angular-table-paginator .mat-mdc-form-field-infix{padding:0!important;min-height:var(--angular-paginator-height, 25px);width:var(--angular-paginator-width, 56px)}::ng-deep .angular-table-paginator .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .angular-table-paginator .mat-mdc-select-value{line-height:var(--angular-paginator-height, 25px)}::ng-deep .angular-table thead{background-color:var(--angular-header-bg, var(--angular-light, #f5f5f5))!important}::ng-deep .angular-table thead tr{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--mat-table-row-item-label-text-font, Roboto, sans-serif);line-height:var(--mat-table-row-item-label-text-line-height);font-size:var(--mat-table-row-item-label-text-size, 14px);font-weight:500;height:var(--mat-table-row-item-container-height, 52px);color:var(--angular-header-color, var(--angular-heading-color, #212121))}::ng-deep .angular-table thead tr th{box-sizing:border-box;overflow:hidden;text-align:left;text-overflow:ellipsis;padding:0 16px!important;font-size:14px!important;color:var(--angular-header-color, var(--angular-heading-color, #212121));background-color:var(--angular-header-bg, var(--angular-light, #f5f5f5));border-bottom-color:var(--angular-table-border, var(--mat-table-row-item-outline-color, var(--mat-sys-outline, rgba(0, 0, 0, .12))));border-bottom-width:var(--mat-table-row-item-outline-width, 1px);border-bottom-style:solid;letter-spacing:var(--mat-table-header-headline-tracking);font-weight:inherit;line-height:inherit}.angular-table thead tr th.angular-pr-0{padding-right:0!important}.angular-table thead tr th.angular-pl-0{padding-left:0!important}.angular-table tbody tr{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;line-height:var(--mat-table-row-item-label-text-line-height);font-size:var(--mat-table-row-item-label-text-size, 14px);font-weight:var(--mat-table-row-item-label-text-weight);height:var(--mat-table-row-item-container-height, 52px);color:var(--mat-table-row-item-label-text-color, rgba(0, 0, 0, .87))}.angular-table tbody tr td{text-align:left;box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;padding:0 16px!important;font-size:14px!important;border-bottom-color:var(--angular-table-border, var(--mat-table-row-item-outline-color, var(--mat-sys-outline, rgba(0, 0, 0, .12))));border-bottom-width:var(--mat-table-row-item-outline-width, 1px);border-bottom-style:solid;letter-spacing:var(--mat-table-header-headline-tracking);font-weight:inherit;line-height:inherit}.angular-table tbody tr td.angular-pr-0{padding-right:0!important}.angular-table tbody tr td.angular-pl-0{padding-left:0!important}.angular-table tbody tr:last-child td{border-bottom-width:0}.angular-mobile-responsive-table thead tr th,.angular-mobile-responsive-table tbody tr td{padding:0!important}.angular-data-not-found{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;margin:20px}.angular-data-not-found h5{font-size:16px!important;font-weight:500!important}.angular-data-not-found p{font-size:14px!important}.angular-data-not-found img{width:130px}.angular-a{font-weight:500;cursor:pointer;color:var(--angular-primary, #3838a2);margin:0!important}.angular-d-flex{display:flex}.angular-justify-content-center{justify-content:center}.angular-h5{margin-top:0;margin-bottom:.5rem;font-weight:500;line-height:1.2;color:var(--angular-heading-color, #212121);font-size:1.25rem}.angular-text-upper{text-transform:uppercase!important}@media (max-width: 575.98px){.angular-table-paginator{background-color:var(--angular-light, #f5f5f5)!important;border-radius:0 0 var(--angular-radius, 5px) var(--angular-radius, 5px)}.angular-table-paginator mat-paginator{background-color:var(--angular-light, #f5f5f5)!important;border-radius:0 0 var(--angular-radius, 5px) var(--angular-radius, 5px)}::ng-deep .angular-table-paginator .mat-mdc-paginator-page-size{margin-top:10px}::ng-deep .angular-table-paginator .mat-mdc-paginator-range-label{margin:0 20px}}@media (max-width: 991.98px){.md-hide-scrollbar::-webkit-scrollbar{width:0!important;height:0!important}}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.MatDialog }, { type: ApiService }, { type: i3$1.ActivatedRoute }, { type: i3$1.Router }, { type: i4.Location }, { type: i5.BreakpointObserver }, { type: i0.ChangeDetectorRef }], propDecorators: { columnCustomizationUrlConfig: [{
                 type: Input,
                 args: [{ required: true }]