ngx-eiffage-material 0.1.0 → 0.1.2

package/fesm2022/ngx-eiffage-material.mjs

@@ -3132,7 +3132,7 @@ class NgxBasicTable {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxBasicTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: NgxBasicTable, isStandalone: true, selector: "ngx-basic-table", inputs: { filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, queryFilter: { classPropertyName: "queryFilter", publicName: "queryFilter", isSignal: true, isRequired: false, transformFunction: null }, moreFilters: { classPropertyName: "moreFilters", publicName: "moreFilters", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { createClick: "createClick", updateClick: "updateClick", deleteClick: "deleteClick", rowActionClick: "rowActionClick", expandedItemChange: "expandedItemChange", selectionActionEvent: "selectionActionEvent" }, host: { listeners: { "document:keydown.escape": "onEscape()" }, classAttribute: "contenedorDefecto" }, viewQueries: [{ propertyName: "tableContentTemplate", first: true, predicate: ["tableContent"], descendants: true, isSignal: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, isSignal: true }], ngImport: i0, template: "@if(!isFullScreen()) {\r\n    <ng-container *ngTemplateOutlet=\"tableContentTemplate()\"></ng-container>\r\n}\r\n\r\n<ng-template #tableContent>\r\n    <div class=\"tableContainer\" [class.inFullScreenMode]=\"isFullScreen()\">\r\n        <div class=\"headerContainer\">\r\n            <div class=\"titleAndButtonContainer\">\r\n                <p class=\"title\">{{ config()().title() }}</p>\r\n                <div class=\"buttonContainer\">\r\n                    @if(config()().create && (!config()().create?.show || config()().create?.show())) {\r\n                        <button \r\n                            matIconButton \r\n                            [matTooltip]=\"config()().create?.tooltip?.() ?? intl.createButtonLabel\" \r\n                            [disabled]=\"config()().create?.disabled?.()\" \r\n                            class=\"newButtonIcon\"\r\n                            (click)=\"onNewClick()\">\r\n                            <mat-icon>add_circle</mat-icon>\r\n                        </button>\r\n                    }\r\n\r\n                    <button matIconButton [matTooltip]=\"intl.editColumnsTooltip\" class=\"editColumnsButtonIcon\" (click)=\"onEditColumns()\">\r\n                        <mat-icon>table_edit</mat-icon>\r\n                    </button>\r\n\r\n                    @if(selection().length > 0) {\r\n                        @if(getRowSelectionAction().length > 0) {\r\n                            <button \r\n                                matIconButton \r\n                                [matTooltip]=\"intl.selectionActionsTooltip\"\r\n                                [matMenuTriggerFor]=\"selectedRecordsMenu\">\r\n                                <mat-icon>event_list</mat-icon>\r\n                            </button>\r\n\r\n                            <mat-menu #selectedRecordsMenu=\"matMenu\" xPosition=\"before\" yPosition=\"below\">\r\n                                <button mat-menu-item  (click)=\"uncheckAllSelection()\">\r\n                                    <mat-icon>deselect</mat-icon>\r\n                                    <span>{{ intl.deselectAllLabel }}</span>\r\n                                </button>\r\n\r\n                                @for (action of getRowSelectionAction(); track $index) {\r\n                                    <button mat-menu-item  (click)=\"onRowSelectionActionClick(action.id)\">\r\n                                        <mat-icon>{{action.icon}}</mat-icon>\r\n                                        <span>{{action.label(selection(), selection().length)}}</span>\r\n                                    </button>\r\n                                }\r\n                            </mat-menu>\r\n                        } @else {\r\n                            <button \r\n                                matIconButton \r\n                                [matTooltip]=\"intl.deselectAllLabel\"\r\n                                (click)=\"uncheckAllSelection()\">\r\n                                <mat-icon>deselect</mat-icon>\r\n                            </button>\r\n                        }\r\n                    }\r\n\r\n                    @if(config()().hideExportData?.() !== true) {\r\n                        <button matIconButton [matTooltip]=\"intl.exportTooltip\" [matMenuTriggerFor]=\"exportMenu\">\r\n                            <mat-icon>download</mat-icon>\r\n                        </button>\r\n                        <mat-menu #exportMenu=\"matMenu\" xPosition=\"before\" yPosition=\"below\">\r\n                            <button mat-menu-item  (click)=\"exportToCsv()\">\r\n                                <mat-icon>csv</mat-icon>\r\n                                <span>{{ intl.exportToExcelLabel }}</span>\r\n                            </button>\r\n\r\n                            <button mat-menu-item  (click)=\"exportToPdf()\">\r\n                                <mat-icon>picture_as_pdf</mat-icon>\r\n                                <span>{{ intl.exportToPdfLabel }}</span>\r\n                            </button>\r\n                        </mat-menu>\r\n                    }\r\n\r\n                    <button matIconButton [matTooltip]=\"isFullScreen() ? intl.exitFullscreenTooltip : intl.enterFullscreenTooltip\" (click)=\"onToggleFullScreen()\">\r\n                        <mat-icon>{{isFullScreen() ? 'fullscreen_exit': 'fullscreen'}}</mat-icon>\r\n                    </button>\r\n\r\n                    <ng-content select=\"[icon-buttons]\"></ng-content>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"filterContainer\">\r\n                <div class=\"moreFiltersContainer\">\r\n                    <ng-content select=\"[more-filters]\"></ng-content>\r\n                </div>\r\n\r\n                @if(showQueryFilter()) {\r\n                    <mat-form-field subscriptSizing=\"dynamic\">\r\n                        <mat-icon matPrefix>search</mat-icon>\r\n                        <input #queryElement matInput [placeholder]=\"config()().queryFilterPlaceholder ?? intl.searchPlaceholder\" [value]=\"filters()().query ?? ''\" (input)=\"onQueryChange(queryElement)\">\r\n                        <button matIconButton matSuffix (click)=\"onQueryReset(queryElement)\" [style.visibility]=\"queryElement.value ? 'visible': 'hidden'\">\r\n                            <mat-icon>close</mat-icon>\r\n                        </button>\r\n                    </mat-form-field>\r\n                }\r\n            </div>\r\n\r\n            <ng-content select=\"[extra-header-content]\"></ng-content>\r\n        </div>\r\n\r\n        <mat-progress-bar mode=\"indeterminate\" [style.visibility]=\"loading() ? 'visible': 'hidden'\"/>\r\n\r\n        <div class=\"tableOverflow\" [style.max-height]=\"config()().maxHeight && !isFullScreen() ? config()().maxHeight : null\">\r\n            <table\r\n                mat-table \r\n                matSort\r\n                [multiTemplateDataRows]=\"config()().expandableDetail\"\r\n                [dataSource]=\"dataSource()\" \r\n                [matSortActive]=\"filters()().sortBy?.key ?? ''\" \r\n                [matSortDirection]=\"filters()().sortBy?.direction ?? ''\"\r\n                (matSortChange)=\"onSortChange($event)\">\r\n\r\n                @if(config()().enableRowSelection) {\r\n                    @if(showFiltersRow()) {\r\n                        <ng-container [matColumnDef]=\"`${filterKeyPrefix}${nameOfRowSelectionColumn}`\" [sticky]=\"isDesktop()\">\r\n                            <th mat-header-cell *matHeaderCellDef class=\"celdaSelection\"></th>\r\n                        </ng-container>\r\n                    } \r\n\r\n                    <ng-container [matColumnDef]=\"nameOfRowSelectionColumn\" [sticky]=\"isDesktop()\">\r\n                        <th mat-header-cell *matHeaderCellDef>\r\n                            <mat-checkbox \r\n                                class=\"headerCheckbox\"\r\n                                (change)=\"$event ? toggleAllPageRowSelection() : null\"\r\n                                [checked]=\"selection().length > 0 && isAllPageRowSelected()\"\r\n                                [indeterminate]=\"selection().length > 0 && !isAllPageRowSelected()\">\r\n                            </mat-checkbox>\r\n                        </th>\r\n                        <td mat-cell *matCellDef=\"let row\" (click)=\"$event.stopPropagation()\" class=\"celdaSelection\">\r\n                            <mat-checkbox\r\n                                (change)=\"$event ? toggleRowSelection(row) : null\"\r\n                                [checked]=\"isRowSelected(row)\">\r\n                            </mat-checkbox>\r\n                        </td>\r\n                        <td mat-footer-cell *matFooterCellDef class=\"celdaSelection\"></td>\r\n                    </ng-container>\r\n\r\n                    @if(showTotalGeneralFooter()) {\r\n                        <ng-container [matColumnDef]=\"`${generalFooterKeyPrefix}${nameOfRowSelectionColumn}`\" [sticky]=\"isDesktop()\">\r\n                            <td mat-footer-cell *matFooterCellDef></td>\r\n                        </ng-container>\r\n                    }\r\n                }\r\n\r\n                @for (column of config()().columns; track $index) {\r\n                    <ng-container \r\n                        [matColumnDef]=\"getKeyAsString(column.key)\" \r\n                        [sticky]=\"stickyColumnKey() == column.key && isDesktop()\">\r\n\r\n                        <th mat-header-cell *matHeaderCellDef mat-sort-header [disabled]=\"column.sortType === undefined\" class=\"columnLabel\">\r\n                            <p class=\"headerTitle\">\r\n                                @if(stickyColumnKey() == column.key && isDesktop()) {\r\n                                    <mat-icon>keep</mat-icon>\r\n                                }\r\n                                {{ column.label }}\r\n                            </p>\r\n                        </th>\r\n\r\n                        <td \r\n                            mat-cell \r\n                            *matCellDef=\"let row\" \r\n                            [class.columnSticky]=\"stickyColumnKey() == column.key && isDesktop()\"\r\n                            [style]=\"column.style\"\r\n                            class=\"celdaDatos\">\r\n\r\n                            @if(column.component) {\r\n                                <ng-container \r\n                                    ngxDynamicCellHost\r\n                                    [component]=\"column.component\"\r\n                                    [row]=\"row\"\r\n                                    [key]=\"column.key\" />\r\n                            } @else if(column.templateRef) {\r\n                                <ng-container \r\n                                    *ngTemplateOutlet=\"column.templateRef(); \r\n                                    context: { $implicit: row }\" />\r\n                            } @else if(column.valueGetter) {\r\n                                {{ column.valueGetter(row) }}\r\n                            } @else {\r\n                                {{ applyColumnPipes(row[column.key], column.pipes) ?? '-' }}\r\n                            }\r\n                        </td>\r\n                        \r\n                        <td\r\n                            mat-footer-cell \r\n                            *matFooterCellDef\r\n                            [class.columnSticky]=\"stickyColumnKey() == column.key && isDesktop()\"\r\n                            [style]=\"column.footerStyle\">\r\n\r\n                            @if(column.showTotalPerPage) {\r\n                                @if(column.pipes) {\r\n                                    {{ applyColumnPipes(getTotalPerPageOfColum(column.key), column.pipes) }}\r\n                                } @else if(column.totalFooterFormatter) {\r\n                                    {{ column.totalFooterFormatter(getTotalPerPageOfColum(column.key)) }}\r\n                                } @else {\r\n                                    {{ getTotalPerPageOfColum(column.key) }}\r\n                                }\r\n                            }\r\n                        </td>\r\n                    </ng-container>\r\n                }\r\n\r\n                @if(showTotalGeneralFooter()) {\r\n                    @for (column of config()().columns; track $index) {\r\n                        <ng-container \r\n                            [matColumnDef]=\"`${generalFooterKeyPrefix}${getKeyAsString(column.key)}`\"\r\n                            [sticky]=\"stickyColumnKey() == column.key && isDesktop()\">\r\n                            <td mat-footer-cell *matFooterCellDef [style]=\"column.footerStyle\">\r\n                                @if(column.showTotalGeneral) {\r\n                                    @if(column.pipes) {\r\n                                        {{ applyColumnPipes(getTotalOfColum(column.key), column.pipes) }}\r\n                                    } @else if(column.totalFooterFormatter) {\r\n                                        {{ column.totalFooterFormatter(getTotalOfColum(column.key)) }}\r\n                                    } @else {\r\n                                        {{ getTotalOfColum(column.key) }}\r\n                                    }\r\n                                }\r\n                            </td>\r\n                        </ng-container>\r\n                    }\r\n                }\r\n\r\n                @if(showFiltersRow()) {\r\n                    @for (column of config()().columns; track $index) {\r\n                        <ng-container \r\n                            [matColumnDef]=\"`${filterKeyPrefix}${getKeyAsString(column.key)}`\" \r\n                            [sticky]=\"stickyColumnKey() == column.key && isDesktop()\">\r\n\r\n                            <th mat-header-cell *matHeaderCellDef>\r\n                                @if (column.filterType == 'text' || column.filterType == 'number') {\r\n                                    <mat-form-field subscriptSizing=\"dynamic\" class=\"inputQueryColumn\">\r\n                                        <input [type]=\"column.filterType\" matInput [placeholder]=\"column.label\" [value]=\"getValueOfColumnFilter(column.key) ?? ''\" (input)=\"onTextFilterColumnChange(column, $event)\">\r\n                                        <mat-icon matSuffix>{{ column.filterType == 'text' ? 'search' : 'numbers'}}</mat-icon>\r\n                                    </mat-form-field>\r\n                                }\r\n\r\n                                @if (column.filterType == 'option' || column.filterType == 'option-multiple') {\r\n                                    @if(column.endpointForPaginatedFilterOptions) {\r\n                                        <ngx-paginated-searchable-select\r\n                                            class=\"selectColumn\"\r\n                                            [selected]=\"getPaginatedSearchableSelectValueOfColumnFilter(column.key)\"\r\n                                            [endpoint]=\"column.endpointForPaginatedFilterOptions\"\r\n                                            [filters]=\"column.filtersForEndpointPaginatedFilterOptions ?? defaultFiltersForPaginatedFilterOptions\"\r\n                                            [multiple]=\"column.filterType == 'option-multiple'\"\r\n                                            subscriptSizing=\"dynamic\"\r\n                                            [selectPlaceholder]=\"column.label\"\r\n                                            (optionChange)=\"onPaginatedOptionFilterColumnChange(column, $event)\"\r\n                                            clearableOptionLabel=\"filtro\"\r\n                                        />\r\n                                    } @else {\r\n                                        <ngx-searchable-select\r\n                                            class=\"selectColumn\"\r\n                                            [selected]=\"getSearchableSelectValueOfColumnFilter(column.key)\"\r\n                                            [options]=\"column.filterOptions ?? []\"\r\n                                            [multiple]=\"column.filterType == 'option-multiple'\"\r\n                                            subscriptSizing=\"dynamic\"\r\n                                            [selectPlaceholder]=\"column.label\"\r\n                                            (optionChange)=\"onOptionFilterColumnChange(column, $event)\"\r\n                                            clearableOptionLabel=\"filtro\"\r\n                                        />\r\n                                    }                                    \r\n                                }\r\n                                \r\n                                @if(column.filterType == 'date') {\r\n                                    <mat-form-field subscriptSizing=\"dynamic\" class=\"dateColumn\">\r\n                                        <input \r\n                                            matInput \r\n                                            [matDatepicker]=\"picker\" \r\n                                            [placeholder]=\"column.label\"\r\n                                            [value]=\"getValueOfColumnFilter(column.key)\"\r\n                                            (dateChange)=\"onDateFilterChange(column, $event.value)\">\r\n                                        <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n                                        <mat-datepicker #picker></mat-datepicker>\r\n                                    </mat-form-field>\r\n                                }\r\n\r\n                                @if(column.filterType == 'date-range') {\r\n                                    <mat-form-field subscriptSizing=\"dynamic\" class=\"dateColumn\">\r\n                                        <mat-date-range-input [rangePicker]=\"picker\" #dateRangeInput>\r\n                                            <input \r\n                                                matStartDate \r\n                                                [placeholder]=\"intl.dateRangeStartPlaceholder\"\r\n                                                [value]=\"getDateRangeValueOfColumnFilter(column.key, 'start')\"\r\n                                                (dateChange)=\"onDateRangeFilterChange(column, dateRangeInput.value)\">\r\n                                            <input \r\n                                                matEndDate \r\n                                                [placeholder]=\"intl.dateRangeEndPlaceholder\"\r\n                                                [value]=\"getDateRangeValueOfColumnFilter(column.key, 'end')\"\r\n                                                (dateChange)=\"onDateRangeFilterChange(column, dateRangeInput.value)\">\r\n                                        </mat-date-range-input>\r\n                                        <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n                                        <mat-date-range-picker #picker></mat-date-range-picker>\r\n                                    </mat-form-field>\r\n                                }\r\n                            </th>\r\n                        </ng-container>\r\n                    }\r\n                }\r\n\r\n                @if(showActionsColumn()) {\r\n                    @if(showFiltersRow()) {\r\n                        <ng-container [matColumnDef]=\"`${filterKeyPrefix}${nameOfActionsColumn}`\" [stickyEnd]=\"isDesktop()\">\r\n                            <th mat-header-cell *matHeaderCellDef class=\"celdaAcciones\"></th>\r\n                        </ng-container>\r\n                    }            \r\n\r\n                    <ng-container [matColumnDef]=\"nameOfActionsColumn\" [stickyEnd]=\"isDesktop()\">\r\n                        <th mat-header-cell *matHeaderCellDef>{{ intl.actionsLabel }}</th>\r\n                        <td mat-cell *matCellDef=\"let row\" (click)=\"$event.stopPropagation()\" class=\"celdaAcciones\">\r\n                            <div class=\"contenedorCeldaAcciones\">\r\n                                @if(config()().expandableDetail) {\r\n                                    <button \r\n                                        matIconButton\r\n                                        (click)=\"expandableToggle(row)\">\r\n                                        <mat-icon>{{ rowIsExpanded(row) ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}</mat-icon>\r\n                                    </button>\r\n                                }\r\n\r\n                                @for (rowAction of config()().rowActions; track $index) {\r\n                                    @if(!rowAction.show || rowAction.show(row)) {\r\n                                        <button \r\n                                            matIconButton \r\n                                            [matTooltip]=\"rowAction.tooltip(row)\" \r\n                                            [disabled]=\"rowAction.disabled?.(row)\" \r\n                                            [class]=\"rowAction.iconColor ? `rowActionIconColor${rowAction.iconColor}` : ''\"\r\n                                            (click)=\"onRowActionClick(row, rowAction, $event)\">\r\n                                            <mat-icon>{{rowAction.icon}}</mat-icon>\r\n                                        </button>\r\n                                    }                    \r\n                                }\r\n\r\n                                @if(config()().update && !config()().clickOnRowForUpdate && (!config()().update?.show || config()().update?.show(row))) {\r\n                                    <button \r\n                                        matIconButton\r\n                                        [matTooltip]=\"config()().update?.tooltip?.(row) ?? intl.editTooltip\" \r\n                                        [disabled]=\"config()().update?.disabled?.(row)\" \r\n                                        class=\"editButtonIcon\"\r\n                                        (click)=\"onUpdateClick(row, $event)\">\r\n                                        <mat-icon>edit_square</mat-icon>\r\n                                    </button>\r\n                                }\r\n                                \r\n                                @if(config()().delete && (!config()().delete?.show || config()().delete?.show(row))) {\r\n                                    <button \r\n                                        matIconButton \r\n                                        [matTooltip]=\"config()().delete?.tooltip?.(row) ?? intl.deleteTooltip\" \r\n                                        [disabled]=\"config()().delete?.disabled?.(row)\" \r\n                                        class=\"deleteButtonIcon\"\r\n                                        (click)=\"onDeleteClick(row, $event)\">\r\n                                        <mat-icon>delete</mat-icon>\r\n                                    </button>\r\n                                }\r\n                            </div>\r\n                        </td>\r\n                        <td mat-footer-cell *matFooterCellDef></td>\r\n                    </ng-container>\r\n\r\n                    @if(showTotalGeneralFooter()) {\r\n                        <ng-container [matColumnDef]=\"`${generalFooterKeyPrefix}${nameOfActionsColumn}`\" [stickyEnd]=\"isDesktop()\">\r\n                            <td mat-footer-cell *matFooterCellDef></td>\r\n                        </ng-container>\r\n                    }\r\n                }\r\n\r\n                @if(config()().expandableDetail) {\r\n                    <ng-container [matColumnDef]=\"expandableColumnDef\">\r\n                        <td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"keys().length\">\r\n                            <div \r\n                                class=\"detailWrapper\"\r\n                                [class.detailWrapperExpanded]=\"rowIsExpanded(row)\">\r\n                                <div class=\"columnDetail\">\r\n                                    @if(config()().expandableDetailTemplateRef) {\r\n                                        <ng-container \r\n                                            *ngTemplateOutlet=\"config()().expandableDetailTemplateRef!(); \r\n                                            context: { $implicit: row }\" />\r\n                                    }\r\n                                </div>\r\n                            </div>\r\n                        </td>\r\n                    </ng-container>\r\n                }\r\n                \r\n                <tr mat-header-row *matHeaderRowDef=\"keys(); sticky: true\" class=\"tableHeader\"></tr>\r\n                \r\n                @if(showFiltersRow()) {\r\n                    <tr mat-header-row *matHeaderRowDef=\"keysWithFilter(); sticky: true\" class=\"filtersByColumn\"></tr>\r\n                }\r\n                \r\n                <tr mat-row *matRowDef=\"let row; columns: keys();\" \r\n                    (click)=\"onRowClick(row)\" \r\n                    [class.rowClickEnable]=\"isRowEnabled(row)\"\r\n                    [class.expandableRow]=\"config()().expandableDetail\">\r\n                </tr>\r\n                \r\n                @if(config()().expandableDetail) {\r\n                    <tr mat-row *matRowDef=\"let row; columns: [expandableColumnDef]\" class=\"rowDetail\"></tr>\r\n                }\r\n\r\n                <tr mat-footer-row \r\n                    *matFooterRowDef=\"showTotalPerPageFooter() ? keys() : []\" \r\n                    class=\"totalPerPageFooter\"\r\n                    [class.hideFooter]=\"!showTotalPerPageFooter()\">\r\n                </tr>\r\n\r\n                <tr mat-footer-row \r\n                    *matFooterRowDef=\"showTotalGeneralFooter() ? keysWithGeneralFooter() : []\" \r\n                    class=\"totalFooter\"\r\n                    [class.hideFooter]=\"!showTotalGeneralFooter()\">\r\n                </tr>\r\n\r\n                <tr class=\"mat-row\" *matNoDataRow>\r\n                    <td class=\"noData\" [colSpan]=\"keys().length\">{{ loading() ? intl.loadingMessage : intl.noDataMessage }}</td>\r\n                </tr>\r\n            </table>\r\n        </div>\r\n\r\n        <div class=\"paginatorContainer\">\r\n            <div class=\"footerLegend\">\r\n                @if(showTotalPerPageFooter()) {\r\n                    <div class=\"legendItem\">\r\n                        <div class=\"legendSquare\"></div>\r\n                        <p>{{ intl.totalPerPageLabel }}</p>    \r\n                    </div>\r\n                }\r\n\r\n                @if(showTotalGeneralFooter()) {\r\n                    <div class=\"legendItem\">\r\n                        <div class=\"legendSquare totalGeneral\"></div>\r\n                        <p>{{ intl.totalGeneralLabel }}</p>\r\n                    </div>\r\n                }\r\n            </div>\r\n            <mat-paginator />\r\n        </div>\r\n\r\n        <ng-content select=\"[end-container]\"></ng-content>\r\n    </div>\r\n</ng-template>", styles: [".tableContainer{display:flex;flex-direction:column;padding:14px;gap:10px;--mat-table-background-color: transparent;--mat-table-header-headline-color: var(--mat-sys-on-primary)}.inFullScreenMode{height:calc(100vh - 28px);width:calc(100vw - 28px);max-width:calc(100% - 28px);background:var(--mat-sys-surface)}.title{font:var(--mat-sys-title-large);color:var(--mat-sys-on-surface);margin:0;position:relative}.headerContainer{display:flex;justify-content:space-between;gap:10px;flex-direction:column}.titleAndButtonContainer{display:flex;justify-content:space-between;align-items:center;gap:20px}.buttonContainer{display:flex;gap:10px;align-items:center}.filterContainer{display:flex;flex-direction:row;align-items:center;gap:20px;justify-content:space-between}.moreFiltersContainer{display:flex;gap:20px}.editButtonIcon{--mat-icon-button-icon-color: var(--warning)}.deleteButtonIcon{--mat-icon-button-icon-color: var(--mat-sys-error)}.rowActionIconColorYellow{--mat-icon-button-icon-color: rgb(211, 211, 7)}.rowActionIconColorOrange{--mat-icon-button-icon-color: orange}.rowActionIconColorPink{--mat-icon-button-icon-color: pink}.rowActionIconColorPurple{--mat-icon-button-icon-color: purple}.rowActionIconColorGreen{--mat-icon-button-icon-color: var(--success)}.rowActionIconColorBlue{--mat-icon-button-icon-color: var(--information)}.rowActionIconColorBrown{--mat-icon-button-icon-color: brown}.rowActionIconColorSky{--mat-icon-button-icon-color: rgb(0, 247, 255)}.noData{padding:24px}.tableOverflow{overflow:auto;border-radius:10px}.columnLabel{text-wrap:nowrap}.headerTitle{display:flex;align-items:center;gap:4px}.headerTitle mat-icon{font-size:12px;width:12px;height:12px}.tableHeader{background-color:var(--mat-sys-primary)!important}.filtersByColumn{background-color:var(--mat-sys-surface)!important}.filtersByColumn th{padding:0}.celdaDatos{background-color:var(--mat-sys-surface)!important;transition:background-color .1s}.celdaAcciones,.celdaSelection{cursor:default!important;background-color:var(--mat-sys-surface)!important;transition:background-color .1s}.columnSticky{background-color:var(--mat-sys-surface)!important;transition:background-color .1s}.contenedorCeldaAcciones{display:flex;align-items:center;cursor:default!important}.rowClickEnable{cursor:pointer;transition:background-color .1s}.rowClickEnable:hover,.rowClickEnable:hover>.celdaAcciones,.rowClickEnable:hover>.celdaSelection,.rowClickEnable:hover>.celdaDatos,.rowClickEnable:hover>.columnSticky{background-color:var(--mat-sys-surface-container)!important}.inputQueryColumn,.selectColumn,.dateColumn{--mat-form-field-outlined-focus-outline-color: transparent;--mat-form-field-outlined-outline-color: transparent;--mat-form-field-outlined-hover-outline-color: transparent}.advancedFiltersApplied{display:flex;flex-direction:row;justify-content:space-between;gap:20px;border-radius:10px;background-color:var(--warning);color:var(--on-warning);align-items:center;margin-top:10px;padding:5px 5px 5px 15px;cursor:pointer;transition:background-color .3s}.advancedFiltersApplied:hover:not(:has(button:hover)){background-color:color-mix(in srgb,var(--warning) 80%,transparent)}.advancedFiltersApplied p{margin:0}.rowDetail{height:0}.expandableRow td{border-bottom-width:0}.detailWrapper{overflow:hidden;display:grid;grid-template-rows:0fr;grid-template-columns:100%;transition:grid-template-rows 225ms cubic-bezier(.4,0,.2,1)}.detailWrapperExpanded{grid-template-rows:1fr}.columnDetail{display:flex;flex-direction:column;min-height:0}.totalPerPageFooter{font-weight:700}.totalFooter{font-weight:700;background-color:var(--mat-sys-surface-container-highest);color:var(--mat-sys-on-surface)}.hideFooter{display:none}.paginatorContainer{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:20px;margin-top:10px}.footerLegend{display:flex;flex-direction:row;gap:30px}.footerLegend p{margin:0;font:var(--mat-sys-label-medium)}.legendItem{display:flex;flex-direction:row;align-items:center;gap:6px}.legendSquare{width:24px;height:14px;border-radius:4px;border:2px solid var(--mat-sys-on-surface)}.totalGeneral{background-color:var(--mat-sys-surface-container-highest)}.headerCheckbox{--mat-checkbox-selected-checkmark-color: var(--mat-sys-primary);--mat-checkbox-selected-focus-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-focus-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-selected-hover-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-hover-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-selected-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-pressed-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-pressed-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-focus-icon-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-focus-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-hover-icon-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-hover-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-icon-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-pressed-state-layer-color: var(--mat-sys-on-primary)}@media (max-width: 1200px){.filterContainer{flex-direction:column;align-items:normal}.moreFiltersContainer{flex-direction:column}}@media (max-width: 900px){.footerLegend{flex-direction:column;gap:6px}}@media (max-width: 700px){.paginatorContainer{flex-direction:column;align-items:flex-end}}@media (max-width: 600px){.titleAndButtonContainer{flex-direction:column;align-items:normal}}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$3.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$3.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i1$3.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i1$3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i1$3.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i1$3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i1$3.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "directive", type: i1$3.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i2$2.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i2$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i3$4.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i6.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.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: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i10.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i10.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i10.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i10.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i10.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i10.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i10.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i11.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: DynamicCellHostDirective, selector: "[ngxDynamicCellHost]", inputs: ["component", "row", "key"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i12.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i12.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i12.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i14.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: "component", type: SearchableSelectComponent, selector: "ngx-searchable-select", inputs: ["control", "options", "optionLabel", "optionValue", "multiple", "searchInputPlaceholder", "selectLabel", "selectPlaceholder", "clearableOptionLabel", "subscriptSizing", "clearable", "error", "selected", "disabled"], outputs: ["optionChange"] }, { kind: "component", type: PaginatedSearchableSelectComponent, selector: "ngx-paginated-searchable-select", inputs: ["control", "endpoint", "filters", "optionLabel", "compareWith", "multiple", "searchInputPlaceholder", "selectLabel", "selectPlaceholder", "clearableOptionLabel", "subscriptSizing", "clearable", "error", "selected", "disabled"], outputs: ["optionChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: NgxBasicTable, isStandalone: true, selector: "ngx-basic-table", inputs: { filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, queryFilter: { classPropertyName: "queryFilter", publicName: "queryFilter", isSignal: true, isRequired: false, transformFunction: null }, moreFilters: { classPropertyName: "moreFilters", publicName: "moreFilters", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { createClick: "createClick", updateClick: "updateClick", deleteClick: "deleteClick", rowActionClick: "rowActionClick", expandedItemChange: "expandedItemChange", selectionActionEvent: "selectionActionEvent" }, host: { listeners: { "document:keydown.escape": "onEscape()" }, classAttribute: "contenedorDefecto" }, viewQueries: [{ propertyName: "tableContentTemplate", first: true, predicate: ["tableContent"], descendants: true, isSignal: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, isSignal: true }], ngImport: i0, template: "@if(!isFullScreen()) {\r\n    <ng-container *ngTemplateOutlet=\"tableContentTemplate()\"></ng-container>\r\n}\r\n\r\n<ng-template #tableContent>\r\n    <div class=\"tableContainer\" [class.inFullScreenMode]=\"isFullScreen()\">\r\n        <div class=\"headerContainer\">\r\n            <div class=\"titleAndButtonContainer\">\r\n                <p class=\"title\">{{ config()().title() }}</p>\r\n                <div class=\"buttonContainer\">\r\n                    @if(config()().create && (!config()().create?.show || config()().create?.show())) {\r\n                        <button \r\n                            matIconButton \r\n                            [matTooltip]=\"config()().create?.tooltip?.() ?? intl.createButtonLabel\" \r\n                            [disabled]=\"config()().create?.disabled?.()\" \r\n                            class=\"newButtonIcon\"\r\n                            (click)=\"onNewClick()\">\r\n                            <mat-icon>add_circle</mat-icon>\r\n                        </button>\r\n                    }\r\n\r\n                    @if(config()().hideColumnConfig?.() !== true) {\r\n                        <button matIconButton [matTooltip]=\"intl.editColumnsTooltip\" class=\"editColumnsButtonIcon\" (click)=\"onEditColumns()\">\r\n                            <mat-icon>table_edit</mat-icon>\r\n                        </button>\r\n                    }\r\n\r\n                    @if(selection().length > 0) {\r\n                        @if(getRowSelectionAction().length > 0) {\r\n                            <button \r\n                                matIconButton \r\n                                [matTooltip]=\"intl.selectionActionsTooltip\"\r\n                                [matMenuTriggerFor]=\"selectedRecordsMenu\">\r\n                                <mat-icon>event_list</mat-icon>\r\n                            </button>\r\n\r\n                            <mat-menu #selectedRecordsMenu=\"matMenu\" xPosition=\"before\" yPosition=\"below\">\r\n                                <button mat-menu-item  (click)=\"uncheckAllSelection()\">\r\n                                    <mat-icon>deselect</mat-icon>\r\n                                    <span>{{ intl.deselectAllLabel }}</span>\r\n                                </button>\r\n\r\n                                @for (action of getRowSelectionAction(); track $index) {\r\n                                    <button mat-menu-item  (click)=\"onRowSelectionActionClick(action.id)\">\r\n                                        <mat-icon>{{action.icon}}</mat-icon>\r\n                                        <span>{{action.label(selection(), selection().length)}}</span>\r\n                                    </button>\r\n                                }\r\n                            </mat-menu>\r\n                        } @else {\r\n                            <button \r\n                                matIconButton \r\n                                [matTooltip]=\"intl.deselectAllLabel\"\r\n                                (click)=\"uncheckAllSelection()\">\r\n                                <mat-icon>deselect</mat-icon>\r\n                            </button>\r\n                        }\r\n                    }\r\n\r\n                    @if(config()().hideExportData?.() !== true) {\r\n                        <button matIconButton [matTooltip]=\"intl.exportTooltip\" [matMenuTriggerFor]=\"exportMenu\">\r\n                            <mat-icon>download</mat-icon>\r\n                        </button>\r\n                        <mat-menu #exportMenu=\"matMenu\" xPosition=\"before\" yPosition=\"below\">\r\n                            <button mat-menu-item  (click)=\"exportToCsv()\">\r\n                                <mat-icon>csv</mat-icon>\r\n                                <span>{{ intl.exportToExcelLabel }}</span>\r\n                            </button>\r\n\r\n                            <button mat-menu-item  (click)=\"exportToPdf()\">\r\n                                <mat-icon>picture_as_pdf</mat-icon>\r\n                                <span>{{ intl.exportToPdfLabel }}</span>\r\n                            </button>\r\n                        </mat-menu>\r\n                    }\r\n\r\n                    @if(config()().hideFullScreen?.() !== true) {\r\n                        <button matIconButton [matTooltip]=\"isFullScreen() ? intl.exitFullscreenTooltip : intl.enterFullscreenTooltip\" (click)=\"onToggleFullScreen()\">\r\n                            <mat-icon>{{isFullScreen() ? 'fullscreen_exit': 'fullscreen'}}</mat-icon>\r\n                        </button>\r\n                    }\r\n\r\n                    <ng-content select=\"[icon-buttons]\"></ng-content>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"filterContainer\">\r\n                <div class=\"moreFiltersContainer\">\r\n                    <ng-content select=\"[more-filters]\"></ng-content>\r\n                </div>\r\n\r\n                @if(showQueryFilter()) {\r\n                    <mat-form-field subscriptSizing=\"dynamic\">\r\n                        <mat-icon matPrefix>search</mat-icon>\r\n                        <input #queryElement matInput [placeholder]=\"config()().queryFilterPlaceholder ?? intl.searchPlaceholder\" [value]=\"filters()().query ?? ''\" (input)=\"onQueryChange(queryElement)\">\r\n                        <button matIconButton matSuffix (click)=\"onQueryReset(queryElement)\" [style.visibility]=\"queryElement.value ? 'visible': 'hidden'\">\r\n                            <mat-icon>close</mat-icon>\r\n                        </button>\r\n                    </mat-form-field>\r\n                }\r\n            </div>\r\n\r\n            <ng-content select=\"[extra-header-content]\"></ng-content>\r\n        </div>\r\n\r\n        <mat-progress-bar mode=\"indeterminate\" [style.visibility]=\"loading() ? 'visible': 'hidden'\"/>\r\n\r\n        <div class=\"tableOverflow\" [style.max-height]=\"config()().maxHeight && !isFullScreen() ? config()().maxHeight : null\">\r\n            <table\r\n                mat-table \r\n                matSort\r\n                [multiTemplateDataRows]=\"config()().expandableDetail\"\r\n                [dataSource]=\"dataSource()\" \r\n                [matSortActive]=\"filters()().sortBy?.key ?? ''\" \r\n                [matSortDirection]=\"filters()().sortBy?.direction ?? ''\"\r\n                (matSortChange)=\"onSortChange($event)\">\r\n\r\n                @if(config()().enableRowSelection) {\r\n                    @if(showFiltersRow()) {\r\n                        <ng-container [matColumnDef]=\"`${filterKeyPrefix}${nameOfRowSelectionColumn}`\" [sticky]=\"isDesktop()\">\r\n                            <th mat-header-cell *matHeaderCellDef class=\"celdaSelection\"></th>\r\n                        </ng-container>\r\n                    } \r\n\r\n                    <ng-container [matColumnDef]=\"nameOfRowSelectionColumn\" [sticky]=\"isDesktop()\">\r\n                        <th mat-header-cell *matHeaderCellDef>\r\n                            <mat-checkbox \r\n                                class=\"headerCheckbox\"\r\n                                (change)=\"$event ? toggleAllPageRowSelection() : null\"\r\n                                [checked]=\"selection().length > 0 && isAllPageRowSelected()\"\r\n                                [indeterminate]=\"selection().length > 0 && !isAllPageRowSelected()\">\r\n                            </mat-checkbox>\r\n                        </th>\r\n                        <td mat-cell *matCellDef=\"let row\" (click)=\"$event.stopPropagation()\" class=\"celdaSelection\">\r\n                            <mat-checkbox\r\n                                (change)=\"$event ? toggleRowSelection(row) : null\"\r\n                                [checked]=\"isRowSelected(row)\">\r\n                            </mat-checkbox>\r\n                        </td>\r\n                        <td mat-footer-cell *matFooterCellDef class=\"celdaSelection\"></td>\r\n                    </ng-container>\r\n\r\n                    @if(showTotalGeneralFooter()) {\r\n                        <ng-container [matColumnDef]=\"`${generalFooterKeyPrefix}${nameOfRowSelectionColumn}`\" [sticky]=\"isDesktop()\">\r\n                            <td mat-footer-cell *matFooterCellDef></td>\r\n                        </ng-container>\r\n                    }\r\n                }\r\n\r\n                @for (column of config()().columns; track $index) {\r\n                    <ng-container \r\n                        [matColumnDef]=\"getKeyAsString(column.key)\" \r\n                        [sticky]=\"stickyColumnKey() == column.key && isDesktop()\">\r\n\r\n                        <th mat-header-cell *matHeaderCellDef mat-sort-header [disabled]=\"column.sortType === undefined\" class=\"columnLabel\">\r\n                            <p class=\"headerTitle\">\r\n                                @if(stickyColumnKey() == column.key && isDesktop()) {\r\n                                    <mat-icon>keep</mat-icon>\r\n                                }\r\n                                {{ column.label }}\r\n                            </p>\r\n                        </th>\r\n\r\n                        <td \r\n                            mat-cell \r\n                            *matCellDef=\"let row\" \r\n                            [class.columnSticky]=\"stickyColumnKey() == column.key && isDesktop()\"\r\n                            [style]=\"column.style\"\r\n                            class=\"celdaDatos\">\r\n\r\n                            @if(column.component) {\r\n                                <ng-container \r\n                                    ngxDynamicCellHost\r\n                                    [component]=\"column.component\"\r\n                                    [row]=\"row\"\r\n                                    [key]=\"column.key\" />\r\n                            } @else if(column.templateRef) {\r\n                                <ng-container \r\n                                    *ngTemplateOutlet=\"column.templateRef(); \r\n                                    context: { $implicit: row }\" />\r\n                            } @else if(column.valueGetter) {\r\n                                {{ column.valueGetter(row) }}\r\n                            } @else {\r\n                                {{ applyColumnPipes(row[column.key], column.pipes) ?? '-' }}\r\n                            }\r\n                        </td>\r\n                        \r\n                        <td\r\n                            mat-footer-cell \r\n                            *matFooterCellDef\r\n                            [class.columnSticky]=\"stickyColumnKey() == column.key && isDesktop()\"\r\n                            [style]=\"column.footerStyle\">\r\n\r\n                            @if(column.showTotalPerPage) {\r\n                                @if(column.pipes) {\r\n                                    {{ applyColumnPipes(getTotalPerPageOfColum(column.key), column.pipes) }}\r\n                                } @else if(column.totalFooterFormatter) {\r\n                                    {{ column.totalFooterFormatter(getTotalPerPageOfColum(column.key)) }}\r\n                                } @else {\r\n                                    {{ getTotalPerPageOfColum(column.key) }}\r\n                                }\r\n                            }\r\n                        </td>\r\n                    </ng-container>\r\n                }\r\n\r\n                @if(showTotalGeneralFooter()) {\r\n                    @for (column of config()().columns; track $index) {\r\n                        <ng-container \r\n                            [matColumnDef]=\"`${generalFooterKeyPrefix}${getKeyAsString(column.key)}`\"\r\n                            [sticky]=\"stickyColumnKey() == column.key && isDesktop()\">\r\n                            <td mat-footer-cell *matFooterCellDef [style]=\"column.footerStyle\">\r\n                                @if(column.showTotalGeneral) {\r\n                                    @if(column.pipes) {\r\n                                        {{ applyColumnPipes(getTotalOfColum(column.key), column.pipes) }}\r\n                                    } @else if(column.totalFooterFormatter) {\r\n                                        {{ column.totalFooterFormatter(getTotalOfColum(column.key)) }}\r\n                                    } @else {\r\n                                        {{ getTotalOfColum(column.key) }}\r\n                                    }\r\n                                }\r\n                            </td>\r\n                        </ng-container>\r\n                    }\r\n                }\r\n\r\n                @if(showFiltersRow()) {\r\n                    @for (column of config()().columns; track $index) {\r\n                        <ng-container \r\n                            [matColumnDef]=\"`${filterKeyPrefix}${getKeyAsString(column.key)}`\" \r\n                            [sticky]=\"stickyColumnKey() == column.key && isDesktop()\">\r\n\r\n                            <th mat-header-cell *matHeaderCellDef>\r\n                                @if (column.filterType == 'text' || column.filterType == 'number') {\r\n                                    <mat-form-field subscriptSizing=\"dynamic\" class=\"inputQueryColumn\">\r\n                                        <input [type]=\"column.filterType\" matInput [placeholder]=\"column.label\" [value]=\"getValueOfColumnFilter(column.key) ?? ''\" (input)=\"onTextFilterColumnChange(column, $event)\">\r\n                                        <mat-icon matSuffix>{{ column.filterType == 'text' ? 'search' : 'numbers'}}</mat-icon>\r\n                                    </mat-form-field>\r\n                                }\r\n\r\n                                @if (column.filterType == 'option' || column.filterType == 'option-multiple') {\r\n                                    @if(column.endpointForPaginatedFilterOptions) {\r\n                                        <ngx-paginated-searchable-select\r\n                                            class=\"selectColumn\"\r\n                                            [selected]=\"getPaginatedSearchableSelectValueOfColumnFilter(column.key)\"\r\n                                            [endpoint]=\"column.endpointForPaginatedFilterOptions\"\r\n                                            [filters]=\"column.filtersForEndpointPaginatedFilterOptions ?? defaultFiltersForPaginatedFilterOptions\"\r\n                                            [multiple]=\"column.filterType == 'option-multiple'\"\r\n                                            subscriptSizing=\"dynamic\"\r\n                                            [selectPlaceholder]=\"column.label\"\r\n                                            (optionChange)=\"onPaginatedOptionFilterColumnChange(column, $event)\"\r\n                                            clearableOptionLabel=\"filtro\"\r\n                                        />\r\n                                    } @else {\r\n                                        <ngx-searchable-select\r\n                                            class=\"selectColumn\"\r\n                                            [selected]=\"getSearchableSelectValueOfColumnFilter(column.key)\"\r\n                                            [options]=\"column.filterOptions ?? []\"\r\n                                            [multiple]=\"column.filterType == 'option-multiple'\"\r\n                                            subscriptSizing=\"dynamic\"\r\n                                            [selectPlaceholder]=\"column.label\"\r\n                                            (optionChange)=\"onOptionFilterColumnChange(column, $event)\"\r\n                                            clearableOptionLabel=\"filtro\"\r\n                                        />\r\n                                    }                                    \r\n                                }\r\n                                \r\n                                @if(column.filterType == 'date') {\r\n                                    <mat-form-field subscriptSizing=\"dynamic\" class=\"dateColumn\">\r\n                                        <input \r\n                                            matInput \r\n                                            [matDatepicker]=\"picker\" \r\n                                            [placeholder]=\"column.label\"\r\n                                            [value]=\"getValueOfColumnFilter(column.key)\"\r\n                                            (dateChange)=\"onDateFilterChange(column, $event.value)\">\r\n                                        <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n                                        <mat-datepicker #picker></mat-datepicker>\r\n                                    </mat-form-field>\r\n                                }\r\n\r\n                                @if(column.filterType == 'date-range') {\r\n                                    <mat-form-field subscriptSizing=\"dynamic\" class=\"dateColumn\">\r\n                                        <mat-date-range-input [rangePicker]=\"picker\" #dateRangeInput>\r\n                                            <input \r\n                                                matStartDate \r\n                                                [placeholder]=\"intl.dateRangeStartPlaceholder\"\r\n                                                [value]=\"getDateRangeValueOfColumnFilter(column.key, 'start')\"\r\n                                                (dateChange)=\"onDateRangeFilterChange(column, dateRangeInput.value)\">\r\n                                            <input \r\n                                                matEndDate \r\n                                                [placeholder]=\"intl.dateRangeEndPlaceholder\"\r\n                                                [value]=\"getDateRangeValueOfColumnFilter(column.key, 'end')\"\r\n                                                (dateChange)=\"onDateRangeFilterChange(column, dateRangeInput.value)\">\r\n                                        </mat-date-range-input>\r\n                                        <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n                                        <mat-date-range-picker #picker></mat-date-range-picker>\r\n                                    </mat-form-field>\r\n                                }\r\n                            </th>\r\n                        </ng-container>\r\n                    }\r\n                }\r\n\r\n                @if(showActionsColumn()) {\r\n                    @if(showFiltersRow()) {\r\n                        <ng-container [matColumnDef]=\"`${filterKeyPrefix}${nameOfActionsColumn}`\" [stickyEnd]=\"isDesktop()\">\r\n                            <th mat-header-cell *matHeaderCellDef class=\"celdaAcciones\"></th>\r\n                        </ng-container>\r\n                    }            \r\n\r\n                    <ng-container [matColumnDef]=\"nameOfActionsColumn\" [stickyEnd]=\"isDesktop()\">\r\n                        <th mat-header-cell *matHeaderCellDef>{{ intl.actionsLabel }}</th>\r\n                        <td mat-cell *matCellDef=\"let row\" (click)=\"$event.stopPropagation()\" class=\"celdaAcciones\">\r\n                            <div class=\"contenedorCeldaAcciones\">\r\n                                @if(config()().expandableDetail) {\r\n                                    <button \r\n                                        matIconButton\r\n                                        (click)=\"expandableToggle(row)\">\r\n                                        <mat-icon>{{ rowIsExpanded(row) ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}</mat-icon>\r\n                                    </button>\r\n                                }\r\n\r\n                                @for (rowAction of config()().rowActions; track $index) {\r\n                                    @if(!rowAction.show || rowAction.show(row)) {\r\n                                        <button \r\n                                            matIconButton \r\n                                            [matTooltip]=\"rowAction.tooltip(row)\" \r\n                                            [disabled]=\"rowAction.disabled?.(row)\" \r\n                                            [class]=\"rowAction.iconColor ? `rowActionIconColor${rowAction.iconColor}` : ''\"\r\n                                            (click)=\"onRowActionClick(row, rowAction, $event)\">\r\n                                            <mat-icon>{{rowAction.icon}}</mat-icon>\r\n                                        </button>\r\n                                    }                    \r\n                                }\r\n\r\n                                @if(config()().update && !config()().clickOnRowForUpdate && (!config()().update?.show || config()().update?.show(row))) {\r\n                                    <button \r\n                                        matIconButton\r\n                                        [matTooltip]=\"config()().update?.tooltip?.(row) ?? intl.editTooltip\" \r\n                                        [disabled]=\"config()().update?.disabled?.(row)\" \r\n                                        class=\"editButtonIcon\"\r\n                                        (click)=\"onUpdateClick(row, $event)\">\r\n                                        <mat-icon>edit_square</mat-icon>\r\n                                    </button>\r\n                                }\r\n                                \r\n                                @if(config()().delete && (!config()().delete?.show || config()().delete?.show(row))) {\r\n                                    <button \r\n                                        matIconButton \r\n                                        [matTooltip]=\"config()().delete?.tooltip?.(row) ?? intl.deleteTooltip\" \r\n                                        [disabled]=\"config()().delete?.disabled?.(row)\" \r\n                                        class=\"deleteButtonIcon\"\r\n                                        (click)=\"onDeleteClick(row, $event)\">\r\n                                        <mat-icon>delete</mat-icon>\r\n                                    </button>\r\n                                }\r\n                            </div>\r\n                        </td>\r\n                        <td mat-footer-cell *matFooterCellDef></td>\r\n                    </ng-container>\r\n\r\n                    @if(showTotalGeneralFooter()) {\r\n                        <ng-container [matColumnDef]=\"`${generalFooterKeyPrefix}${nameOfActionsColumn}`\" [stickyEnd]=\"isDesktop()\">\r\n                            <td mat-footer-cell *matFooterCellDef></td>\r\n                        </ng-container>\r\n                    }\r\n                }\r\n\r\n                @if(config()().expandableDetail) {\r\n                    <ng-container [matColumnDef]=\"expandableColumnDef\">\r\n                        <td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"keys().length\">\r\n                            <div \r\n                                class=\"detailWrapper\"\r\n                                [class.detailWrapperExpanded]=\"rowIsExpanded(row)\">\r\n                                <div class=\"columnDetail\">\r\n                                    @if(config()().expandableDetailTemplateRef) {\r\n                                        <ng-container \r\n                                            *ngTemplateOutlet=\"config()().expandableDetailTemplateRef!(); \r\n                                            context: { $implicit: row }\" />\r\n                                    }\r\n                                </div>\r\n                            </div>\r\n                        </td>\r\n                    </ng-container>\r\n                }\r\n                \r\n                <tr mat-header-row *matHeaderRowDef=\"keys(); sticky: true\" class=\"tableHeader\"></tr>\r\n                \r\n                @if(showFiltersRow()) {\r\n                    <tr mat-header-row *matHeaderRowDef=\"keysWithFilter(); sticky: true\" class=\"filtersByColumn\"></tr>\r\n                }\r\n                \r\n                <tr mat-row *matRowDef=\"let row; columns: keys();\" \r\n                    (click)=\"onRowClick(row)\" \r\n                    [class.rowClickEnable]=\"isRowEnabled(row)\"\r\n                    [class.expandableRow]=\"config()().expandableDetail\">\r\n                </tr>\r\n                \r\n                @if(config()().expandableDetail) {\r\n                    <tr mat-row *matRowDef=\"let row; columns: [expandableColumnDef]\" class=\"rowDetail\"></tr>\r\n                }\r\n\r\n                <tr mat-footer-row \r\n                    *matFooterRowDef=\"showTotalPerPageFooter() ? keys() : []\" \r\n                    class=\"totalPerPageFooter\"\r\n                    [class.hideFooter]=\"!showTotalPerPageFooter()\">\r\n                </tr>\r\n\r\n                <tr mat-footer-row \r\n                    *matFooterRowDef=\"showTotalGeneralFooter() ? keysWithGeneralFooter() : []\" \r\n                    class=\"totalFooter\"\r\n                    [class.hideFooter]=\"!showTotalGeneralFooter()\">\r\n                </tr>\r\n\r\n                <tr class=\"mat-row\" *matNoDataRow>\r\n                    <td class=\"noData\" [colSpan]=\"keys().length\">{{ loading() ? intl.loadingMessage : intl.noDataMessage }}</td>\r\n                </tr>\r\n            </table>\r\n        </div>\r\n\r\n        <div class=\"paginatorContainer\">\r\n            <div class=\"footerLegend\">\r\n                @if(showTotalPerPageFooter()) {\r\n                    <div class=\"legendItem\">\r\n                        <div class=\"legendSquare\"></div>\r\n                        <p>{{ intl.totalPerPageLabel }}</p>    \r\n                    </div>\r\n                }\r\n\r\n                @if(showTotalGeneralFooter()) {\r\n                    <div class=\"legendItem\">\r\n                        <div class=\"legendSquare totalGeneral\"></div>\r\n                        <p>{{ intl.totalGeneralLabel }}</p>\r\n                    </div>\r\n                }\r\n            </div>\r\n            <mat-paginator />\r\n        </div>\r\n\r\n        <ng-content select=\"[end-container]\"></ng-content>\r\n    </div>\r\n</ng-template>", styles: [".tableContainer{display:flex;flex-direction:column;padding:14px;gap:10px;--mat-table-background-color: transparent;--mat-table-header-headline-color: var(--mat-sys-on-primary)}.inFullScreenMode{height:calc(100vh - 28px);width:calc(100vw - 28px);max-width:calc(100% - 28px);background:var(--mat-sys-surface)}.title{font:var(--mat-sys-title-large);color:var(--mat-sys-on-surface);margin:0;position:relative}.headerContainer{display:flex;justify-content:space-between;gap:10px;flex-direction:column}.titleAndButtonContainer{display:flex;justify-content:space-between;align-items:center;gap:20px}.buttonContainer{display:flex;gap:10px;align-items:center}.filterContainer{display:flex;flex-direction:row;align-items:center;gap:20px;justify-content:space-between}.moreFiltersContainer{display:flex;gap:20px}.editButtonIcon{--mat-icon-button-icon-color: var(--warning)}.deleteButtonIcon{--mat-icon-button-icon-color: var(--mat-sys-error)}.rowActionIconColorYellow{--mat-icon-button-icon-color: rgb(211, 211, 7)}.rowActionIconColorOrange{--mat-icon-button-icon-color: orange}.rowActionIconColorPink{--mat-icon-button-icon-color: pink}.rowActionIconColorPurple{--mat-icon-button-icon-color: purple}.rowActionIconColorGreen{--mat-icon-button-icon-color: var(--success)}.rowActionIconColorBlue{--mat-icon-button-icon-color: var(--information)}.rowActionIconColorBrown{--mat-icon-button-icon-color: brown}.rowActionIconColorSky{--mat-icon-button-icon-color: rgb(0, 247, 255)}.noData{padding:24px}.tableOverflow{overflow:auto;border-radius:10px}.columnLabel{text-wrap:nowrap}.headerTitle{display:flex;align-items:center;gap:4px}.headerTitle mat-icon{font-size:12px;width:12px;height:12px}.tableHeader{background-color:var(--mat-sys-primary)!important}.filtersByColumn{background-color:var(--mat-sys-surface)!important}.filtersByColumn th{padding:0}.celdaDatos{background-color:var(--mat-sys-surface)!important;transition:background-color .1s}.celdaAcciones,.celdaSelection{cursor:default!important;background-color:var(--mat-sys-surface)!important;transition:background-color .1s}.columnSticky{background-color:var(--mat-sys-surface)!important;transition:background-color .1s}.contenedorCeldaAcciones{display:flex;align-items:center;cursor:default!important}.rowClickEnable{cursor:pointer;transition:background-color .1s}.rowClickEnable:hover,.rowClickEnable:hover>.celdaAcciones,.rowClickEnable:hover>.celdaSelection,.rowClickEnable:hover>.celdaDatos,.rowClickEnable:hover>.columnSticky{background-color:var(--mat-sys-surface-container)!important}.inputQueryColumn,.selectColumn,.dateColumn{--mat-form-field-outlined-focus-outline-color: transparent;--mat-form-field-outlined-outline-color: transparent;--mat-form-field-outlined-hover-outline-color: transparent}.advancedFiltersApplied{display:flex;flex-direction:row;justify-content:space-between;gap:20px;border-radius:10px;background-color:var(--warning);color:var(--on-warning);align-items:center;margin-top:10px;padding:5px 5px 5px 15px;cursor:pointer;transition:background-color .3s}.advancedFiltersApplied:hover:not(:has(button:hover)){background-color:color-mix(in srgb,var(--warning) 80%,transparent)}.advancedFiltersApplied p{margin:0}.rowDetail{height:0}.expandableRow td{border-bottom-width:0}.detailWrapper{overflow:hidden;display:grid;grid-template-rows:0fr;grid-template-columns:100%;transition:grid-template-rows 225ms cubic-bezier(.4,0,.2,1)}.detailWrapperExpanded{grid-template-rows:1fr}.columnDetail{display:flex;flex-direction:column;min-height:0}.totalPerPageFooter{font-weight:700}.totalFooter{font-weight:700;background-color:var(--mat-sys-surface-container-highest);color:var(--mat-sys-on-surface)}.hideFooter{display:none}.paginatorContainer{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:20px;margin-top:10px}.footerLegend{display:flex;flex-direction:row;gap:30px}.footerLegend p{margin:0;font:var(--mat-sys-label-medium)}.legendItem{display:flex;flex-direction:row;align-items:center;gap:6px}.legendSquare{width:24px;height:14px;border-radius:4px;border:2px solid var(--mat-sys-on-surface)}.totalGeneral{background-color:var(--mat-sys-surface-container-highest)}.headerCheckbox{--mat-checkbox-selected-checkmark-color: var(--mat-sys-primary);--mat-checkbox-selected-focus-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-focus-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-selected-hover-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-hover-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-selected-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-pressed-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-pressed-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-focus-icon-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-focus-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-hover-icon-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-hover-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-icon-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-pressed-state-layer-color: var(--mat-sys-on-primary)}@media (max-width: 1200px){.filterContainer{flex-direction:column;align-items:normal}.moreFiltersContainer{flex-direction:column}}@media (max-width: 900px){.footerLegend{flex-direction:column;gap:6px}}@media (max-width: 700px){.paginatorContainer{flex-direction:column;align-items:flex-end}}@media (max-width: 600px){.titleAndButtonContainer{flex-direction:column;align-items:normal}}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$3.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$3.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i1$3.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i1$3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i1$3.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i1$3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i1$3.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "directive", type: i1$3.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i2$2.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i2$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i3$4.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i6.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.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: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i10.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i10.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i10.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i10.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i10.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i10.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i10.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i11.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: DynamicCellHostDirective, selector: "[ngxDynamicCellHost]", inputs: ["component", "row", "key"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i12.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i12.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i12.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i14.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: "component", type: SearchableSelectComponent, selector: "ngx-searchable-select", inputs: ["control", "options", "optionLabel", "optionValue", "multiple", "searchInputPlaceholder", "selectLabel", "selectPlaceholder", "clearableOptionLabel", "subscriptSizing", "clearable", "error", "selected", "disabled"], outputs: ["optionChange"] }, { kind: "component", type: PaginatedSearchableSelectComponent, selector: "ngx-paginated-searchable-select", inputs: ["control", "endpoint", "filters", "optionLabel", "compareWith", "multiple", "searchInputPlaceholder", "selectLabel", "selectPlaceholder", "clearableOptionLabel", "subscriptSizing", "clearable", "error", "selected", "disabled"], outputs: ["optionChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxBasicTable, decorators: [{
             type: Component,
@@ -3155,7 +3155,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         MatCheckboxModule,
                         SearchableSelectComponent,
                         PaginatedSearchableSelectComponent
-                    ], host: { class: 'contenedorDefecto' }, template: "@if(!isFullScreen()) {\r\n    <ng-container *ngTemplateOutlet=\"tableContentTemplate()\"></ng-container>\r\n}\r\n\r\n<ng-template #tableContent>\r\n    <div class=\"tableContainer\" [class.inFullScreenMode]=\"isFullScreen()\">\r\n        <div class=\"headerContainer\">\r\n            <div class=\"titleAndButtonContainer\">\r\n                <p class=\"title\">{{ config()().title() }}</p>\r\n                <div class=\"buttonContainer\">\r\n                    @if(config()().create && (!config()().create?.show || config()().create?.show())) {\r\n                        <button \r\n                            matIconButton \r\n                            [matTooltip]=\"config()().create?.tooltip?.() ?? intl.createButtonLabel\" \r\n                            [disabled]=\"config()().create?.disabled?.()\" \r\n                            class=\"newButtonIcon\"\r\n                            (click)=\"onNewClick()\">\r\n                            <mat-icon>add_circle</mat-icon>\r\n                        </button>\r\n                    }\r\n\r\n                    <button matIconButton [matTooltip]=\"intl.editColumnsTooltip\" class=\"editColumnsButtonIcon\" (click)=\"onEditColumns()\">\r\n                        <mat-icon>table_edit</mat-icon>\r\n                    </button>\r\n\r\n                    @if(selection().length > 0) {\r\n                        @if(getRowSelectionAction().length > 0) {\r\n                            <button \r\n                                matIconButton \r\n                                [matTooltip]=\"intl.selectionActionsTooltip\"\r\n                                [matMenuTriggerFor]=\"selectedRecordsMenu\">\r\n                                <mat-icon>event_list</mat-icon>\r\n                            </button>\r\n\r\n                            <mat-menu #selectedRecordsMenu=\"matMenu\" xPosition=\"before\" yPosition=\"below\">\r\n                                <button mat-menu-item  (click)=\"uncheckAllSelection()\">\r\n                                    <mat-icon>deselect</mat-icon>\r\n                                    <span>{{ intl.deselectAllLabel }}</span>\r\n                                </button>\r\n\r\n                                @for (action of getRowSelectionAction(); track $index) {\r\n                                    <button mat-menu-item  (click)=\"onRowSelectionActionClick(action.id)\">\r\n                                        <mat-icon>{{action.icon}}</mat-icon>\r\n                                        <span>{{action.label(selection(), selection().length)}}</span>\r\n                                    </button>\r\n                                }\r\n                            </mat-menu>\r\n                        } @else {\r\n                            <button \r\n                                matIconButton \r\n                                [matTooltip]=\"intl.deselectAllLabel\"\r\n                                (click)=\"uncheckAllSelection()\">\r\n                                <mat-icon>deselect</mat-icon>\r\n                            </button>\r\n                        }\r\n                    }\r\n\r\n                    @if(config()().hideExportData?.() !== true) {\r\n                        <button matIconButton [matTooltip]=\"intl.exportTooltip\" [matMenuTriggerFor]=\"exportMenu\">\r\n                            <mat-icon>download</mat-icon>\r\n                        </button>\r\n                        <mat-menu #exportMenu=\"matMenu\" xPosition=\"before\" yPosition=\"below\">\r\n                            <button mat-menu-item  (click)=\"exportToCsv()\">\r\n                                <mat-icon>csv</mat-icon>\r\n                                <span>{{ intl.exportToExcelLabel }}</span>\r\n                            </button>\r\n\r\n                            <button mat-menu-item  (click)=\"exportToPdf()\">\r\n                                <mat-icon>picture_as_pdf</mat-icon>\r\n                                <span>{{ intl.exportToPdfLabel }}</span>\r\n                            </button>\r\n                        </mat-menu>\r\n                    }\r\n\r\n                    <button matIconButton [matTooltip]=\"isFullScreen() ? intl.exitFullscreenTooltip : intl.enterFullscreenTooltip\" (click)=\"onToggleFullScreen()\">\r\n                        <mat-icon>{{isFullScreen() ? 'fullscreen_exit': 'fullscreen'}}</mat-icon>\r\n                    </button>\r\n\r\n                    <ng-content select=\"[icon-buttons]\"></ng-content>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"filterContainer\">\r\n                <div class=\"moreFiltersContainer\">\r\n                    <ng-content select=\"[more-filters]\"></ng-content>\r\n                </div>\r\n\r\n                @if(showQueryFilter()) {\r\n                    <mat-form-field subscriptSizing=\"dynamic\">\r\n                        <mat-icon matPrefix>search</mat-icon>\r\n                        <input #queryElement matInput [placeholder]=\"config()().queryFilterPlaceholder ?? intl.searchPlaceholder\" [value]=\"filters()().query ?? ''\" (input)=\"onQueryChange(queryElement)\">\r\n                        <button matIconButton matSuffix (click)=\"onQueryReset(queryElement)\" [style.visibility]=\"queryElement.value ? 'visible': 'hidden'\">\r\n                            <mat-icon>close</mat-icon>\r\n                        </button>\r\n                    </mat-form-field>\r\n                }\r\n            </div>\r\n\r\n            <ng-content select=\"[extra-header-content]\"></ng-content>\r\n        </div>\r\n\r\n        <mat-progress-bar mode=\"indeterminate\" [style.visibility]=\"loading() ? 'visible': 'hidden'\"/>\r\n\r\n        <div class=\"tableOverflow\" [style.max-height]=\"config()().maxHeight && !isFullScreen() ? config()().maxHeight : null\">\r\n            <table\r\n                mat-table \r\n                matSort\r\n                [multiTemplateDataRows]=\"config()().expandableDetail\"\r\n                [dataSource]=\"dataSource()\" \r\n                [matSortActive]=\"filters()().sortBy?.key ?? ''\" \r\n                [matSortDirection]=\"filters()().sortBy?.direction ?? ''\"\r\n                (matSortChange)=\"onSortChange($event)\">\r\n\r\n                @if(config()().enableRowSelection) {\r\n                    @if(showFiltersRow()) {\r\n                        <ng-container [matColumnDef]=\"`${filterKeyPrefix}${nameOfRowSelectionColumn}`\" [sticky]=\"isDesktop()\">\r\n                            <th mat-header-cell *matHeaderCellDef class=\"celdaSelection\"></th>\r\n                        </ng-container>\r\n                    } \r\n\r\n                    <ng-container [matColumnDef]=\"nameOfRowSelectionColumn\" [sticky]=\"isDesktop()\">\r\n                        <th mat-header-cell *matHeaderCellDef>\r\n                            <mat-checkbox \r\n                                class=\"headerCheckbox\"\r\n                                (change)=\"$event ? toggleAllPageRowSelection() : null\"\r\n                                [checked]=\"selection().length > 0 && isAllPageRowSelected()\"\r\n                                [indeterminate]=\"selection().length > 0 && !isAllPageRowSelected()\">\r\n                            </mat-checkbox>\r\n                        </th>\r\n                        <td mat-cell *matCellDef=\"let row\" (click)=\"$event.stopPropagation()\" class=\"celdaSelection\">\r\n                            <mat-checkbox\r\n                                (change)=\"$event ? toggleRowSelection(row) : null\"\r\n                                [checked]=\"isRowSelected(row)\">\r\n                            </mat-checkbox>\r\n                        </td>\r\n                        <td mat-footer-cell *matFooterCellDef class=\"celdaSelection\"></td>\r\n                    </ng-container>\r\n\r\n                    @if(showTotalGeneralFooter()) {\r\n                        <ng-container [matColumnDef]=\"`${generalFooterKeyPrefix}${nameOfRowSelectionColumn}`\" [sticky]=\"isDesktop()\">\r\n                            <td mat-footer-cell *matFooterCellDef></td>\r\n                        </ng-container>\r\n                    }\r\n                }\r\n\r\n                @for (column of config()().columns; track $index) {\r\n                    <ng-container \r\n                        [matColumnDef]=\"getKeyAsString(column.key)\" \r\n                        [sticky]=\"stickyColumnKey() == column.key && isDesktop()\">\r\n\r\n                        <th mat-header-cell *matHeaderCellDef mat-sort-header [disabled]=\"column.sortType === undefined\" class=\"columnLabel\">\r\n                            <p class=\"headerTitle\">\r\n                                @if(stickyColumnKey() == column.key && isDesktop()) {\r\n                                    <mat-icon>keep</mat-icon>\r\n                                }\r\n                                {{ column.label }}\r\n                            </p>\r\n                        </th>\r\n\r\n                        <td \r\n                            mat-cell \r\n                            *matCellDef=\"let row\" \r\n                            [class.columnSticky]=\"stickyColumnKey() == column.key && isDesktop()\"\r\n                            [style]=\"column.style\"\r\n                            class=\"celdaDatos\">\r\n\r\n                            @if(column.component) {\r\n                                <ng-container \r\n                                    ngxDynamicCellHost\r\n                                    [component]=\"column.component\"\r\n                                    [row]=\"row\"\r\n                                    [key]=\"column.key\" />\r\n                            } @else if(column.templateRef) {\r\n                                <ng-container \r\n                                    *ngTemplateOutlet=\"column.templateRef(); \r\n                                    context: { $implicit: row }\" />\r\n                            } @else if(column.valueGetter) {\r\n                                {{ column.valueGetter(row) }}\r\n                            } @else {\r\n                                {{ applyColumnPipes(row[column.key], column.pipes) ?? '-' }}\r\n                            }\r\n                        </td>\r\n                        \r\n                        <td\r\n                            mat-footer-cell \r\n                            *matFooterCellDef\r\n                            [class.columnSticky]=\"stickyColumnKey() == column.key && isDesktop()\"\r\n                            [style]=\"column.footerStyle\">\r\n\r\n                            @if(column.showTotalPerPage) {\r\n                                @if(column.pipes) {\r\n                                    {{ applyColumnPipes(getTotalPerPageOfColum(column.key), column.pipes) }}\r\n                                } @else if(column.totalFooterFormatter) {\r\n                                    {{ column.totalFooterFormatter(getTotalPerPageOfColum(column.key)) }}\r\n                                } @else {\r\n                                    {{ getTotalPerPageOfColum(column.key) }}\r\n                                }\r\n                            }\r\n                        </td>\r\n                    </ng-container>\r\n                }\r\n\r\n                @if(showTotalGeneralFooter()) {\r\n                    @for (column of config()().columns; track $index) {\r\n                        <ng-container \r\n                            [matColumnDef]=\"`${generalFooterKeyPrefix}${getKeyAsString(column.key)}`\"\r\n                            [sticky]=\"stickyColumnKey() == column.key && isDesktop()\">\r\n                            <td mat-footer-cell *matFooterCellDef [style]=\"column.footerStyle\">\r\n                                @if(column.showTotalGeneral) {\r\n                                    @if(column.pipes) {\r\n                                        {{ applyColumnPipes(getTotalOfColum(column.key), column.pipes) }}\r\n                                    } @else if(column.totalFooterFormatter) {\r\n                                        {{ column.totalFooterFormatter(getTotalOfColum(column.key)) }}\r\n                                    } @else {\r\n                                        {{ getTotalOfColum(column.key) }}\r\n                                    }\r\n                                }\r\n                            </td>\r\n                        </ng-container>\r\n                    }\r\n                }\r\n\r\n                @if(showFiltersRow()) {\r\n                    @for (column of config()().columns; track $index) {\r\n                        <ng-container \r\n                            [matColumnDef]=\"`${filterKeyPrefix}${getKeyAsString(column.key)}`\" \r\n                            [sticky]=\"stickyColumnKey() == column.key && isDesktop()\">\r\n\r\n                            <th mat-header-cell *matHeaderCellDef>\r\n                                @if (column.filterType == 'text' || column.filterType == 'number') {\r\n                                    <mat-form-field subscriptSizing=\"dynamic\" class=\"inputQueryColumn\">\r\n                                        <input [type]=\"column.filterType\" matInput [placeholder]=\"column.label\" [value]=\"getValueOfColumnFilter(column.key) ?? ''\" (input)=\"onTextFilterColumnChange(column, $event)\">\r\n                                        <mat-icon matSuffix>{{ column.filterType == 'text' ? 'search' : 'numbers'}}</mat-icon>\r\n                                    </mat-form-field>\r\n                                }\r\n\r\n                                @if (column.filterType == 'option' || column.filterType == 'option-multiple') {\r\n                                    @if(column.endpointForPaginatedFilterOptions) {\r\n                                        <ngx-paginated-searchable-select\r\n                                            class=\"selectColumn\"\r\n                                            [selected]=\"getPaginatedSearchableSelectValueOfColumnFilter(column.key)\"\r\n                                            [endpoint]=\"column.endpointForPaginatedFilterOptions\"\r\n                                            [filters]=\"column.filtersForEndpointPaginatedFilterOptions ?? defaultFiltersForPaginatedFilterOptions\"\r\n                                            [multiple]=\"column.filterType == 'option-multiple'\"\r\n                                            subscriptSizing=\"dynamic\"\r\n                                            [selectPlaceholder]=\"column.label\"\r\n                                            (optionChange)=\"onPaginatedOptionFilterColumnChange(column, $event)\"\r\n                                            clearableOptionLabel=\"filtro\"\r\n                                        />\r\n                                    } @else {\r\n                                        <ngx-searchable-select\r\n                                            class=\"selectColumn\"\r\n                                            [selected]=\"getSearchableSelectValueOfColumnFilter(column.key)\"\r\n                                            [options]=\"column.filterOptions ?? []\"\r\n                                            [multiple]=\"column.filterType == 'option-multiple'\"\r\n                                            subscriptSizing=\"dynamic\"\r\n                                            [selectPlaceholder]=\"column.label\"\r\n                                            (optionChange)=\"onOptionFilterColumnChange(column, $event)\"\r\n                                            clearableOptionLabel=\"filtro\"\r\n                                        />\r\n                                    }                                    \r\n                                }\r\n                                \r\n                                @if(column.filterType == 'date') {\r\n                                    <mat-form-field subscriptSizing=\"dynamic\" class=\"dateColumn\">\r\n                                        <input \r\n                                            matInput \r\n                                            [matDatepicker]=\"picker\" \r\n                                            [placeholder]=\"column.label\"\r\n                                            [value]=\"getValueOfColumnFilter(column.key)\"\r\n                                            (dateChange)=\"onDateFilterChange(column, $event.value)\">\r\n                                        <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n                                        <mat-datepicker #picker></mat-datepicker>\r\n                                    </mat-form-field>\r\n                                }\r\n\r\n                                @if(column.filterType == 'date-range') {\r\n                                    <mat-form-field subscriptSizing=\"dynamic\" class=\"dateColumn\">\r\n                                        <mat-date-range-input [rangePicker]=\"picker\" #dateRangeInput>\r\n                                            <input \r\n                                                matStartDate \r\n                                                [placeholder]=\"intl.dateRangeStartPlaceholder\"\r\n                                                [value]=\"getDateRangeValueOfColumnFilter(column.key, 'start')\"\r\n                                                (dateChange)=\"onDateRangeFilterChange(column, dateRangeInput.value)\">\r\n                                            <input \r\n                                                matEndDate \r\n                                                [placeholder]=\"intl.dateRangeEndPlaceholder\"\r\n                                                [value]=\"getDateRangeValueOfColumnFilter(column.key, 'end')\"\r\n                                                (dateChange)=\"onDateRangeFilterChange(column, dateRangeInput.value)\">\r\n                                        </mat-date-range-input>\r\n                                        <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n                                        <mat-date-range-picker #picker></mat-date-range-picker>\r\n                                    </mat-form-field>\r\n                                }\r\n                            </th>\r\n                        </ng-container>\r\n                    }\r\n                }\r\n\r\n                @if(showActionsColumn()) {\r\n                    @if(showFiltersRow()) {\r\n                        <ng-container [matColumnDef]=\"`${filterKeyPrefix}${nameOfActionsColumn}`\" [stickyEnd]=\"isDesktop()\">\r\n                            <th mat-header-cell *matHeaderCellDef class=\"celdaAcciones\"></th>\r\n                        </ng-container>\r\n                    }            \r\n\r\n                    <ng-container [matColumnDef]=\"nameOfActionsColumn\" [stickyEnd]=\"isDesktop()\">\r\n                        <th mat-header-cell *matHeaderCellDef>{{ intl.actionsLabel }}</th>\r\n                        <td mat-cell *matCellDef=\"let row\" (click)=\"$event.stopPropagation()\" class=\"celdaAcciones\">\r\n                            <div class=\"contenedorCeldaAcciones\">\r\n                                @if(config()().expandableDetail) {\r\n                                    <button \r\n                                        matIconButton\r\n                                        (click)=\"expandableToggle(row)\">\r\n                                        <mat-icon>{{ rowIsExpanded(row) ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}</mat-icon>\r\n                                    </button>\r\n                                }\r\n\r\n                                @for (rowAction of config()().rowActions; track $index) {\r\n                                    @if(!rowAction.show || rowAction.show(row)) {\r\n                                        <button \r\n                                            matIconButton \r\n                                            [matTooltip]=\"rowAction.tooltip(row)\" \r\n                                            [disabled]=\"rowAction.disabled?.(row)\" \r\n                                            [class]=\"rowAction.iconColor ? `rowActionIconColor${rowAction.iconColor}` : ''\"\r\n                                            (click)=\"onRowActionClick(row, rowAction, $event)\">\r\n                                            <mat-icon>{{rowAction.icon}}</mat-icon>\r\n                                        </button>\r\n                                    }                    \r\n                                }\r\n\r\n                                @if(config()().update && !config()().clickOnRowForUpdate && (!config()().update?.show || config()().update?.show(row))) {\r\n                                    <button \r\n                                        matIconButton\r\n                                        [matTooltip]=\"config()().update?.tooltip?.(row) ?? intl.editTooltip\" \r\n                                        [disabled]=\"config()().update?.disabled?.(row)\" \r\n                                        class=\"editButtonIcon\"\r\n                                        (click)=\"onUpdateClick(row, $event)\">\r\n                                        <mat-icon>edit_square</mat-icon>\r\n                                    </button>\r\n                                }\r\n                                \r\n                                @if(config()().delete && (!config()().delete?.show || config()().delete?.show(row))) {\r\n                                    <button \r\n                                        matIconButton \r\n                                        [matTooltip]=\"config()().delete?.tooltip?.(row) ?? intl.deleteTooltip\" \r\n                                        [disabled]=\"config()().delete?.disabled?.(row)\" \r\n                                        class=\"deleteButtonIcon\"\r\n                                        (click)=\"onDeleteClick(row, $event)\">\r\n                                        <mat-icon>delete</mat-icon>\r\n                                    </button>\r\n                                }\r\n                            </div>\r\n                        </td>\r\n                        <td mat-footer-cell *matFooterCellDef></td>\r\n                    </ng-container>\r\n\r\n                    @if(showTotalGeneralFooter()) {\r\n                        <ng-container [matColumnDef]=\"`${generalFooterKeyPrefix}${nameOfActionsColumn}`\" [stickyEnd]=\"isDesktop()\">\r\n                            <td mat-footer-cell *matFooterCellDef></td>\r\n                        </ng-container>\r\n                    }\r\n                }\r\n\r\n                @if(config()().expandableDetail) {\r\n                    <ng-container [matColumnDef]=\"expandableColumnDef\">\r\n                        <td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"keys().length\">\r\n                            <div \r\n                                class=\"detailWrapper\"\r\n                                [class.detailWrapperExpanded]=\"rowIsExpanded(row)\">\r\n                                <div class=\"columnDetail\">\r\n                                    @if(config()().expandableDetailTemplateRef) {\r\n                                        <ng-container \r\n                                            *ngTemplateOutlet=\"config()().expandableDetailTemplateRef!(); \r\n                                            context: { $implicit: row }\" />\r\n                                    }\r\n                                </div>\r\n                            </div>\r\n                        </td>\r\n                    </ng-container>\r\n                }\r\n                \r\n                <tr mat-header-row *matHeaderRowDef=\"keys(); sticky: true\" class=\"tableHeader\"></tr>\r\n                \r\n                @if(showFiltersRow()) {\r\n                    <tr mat-header-row *matHeaderRowDef=\"keysWithFilter(); sticky: true\" class=\"filtersByColumn\"></tr>\r\n                }\r\n                \r\n                <tr mat-row *matRowDef=\"let row; columns: keys();\" \r\n                    (click)=\"onRowClick(row)\" \r\n                    [class.rowClickEnable]=\"isRowEnabled(row)\"\r\n                    [class.expandableRow]=\"config()().expandableDetail\">\r\n                </tr>\r\n                \r\n                @if(config()().expandableDetail) {\r\n                    <tr mat-row *matRowDef=\"let row; columns: [expandableColumnDef]\" class=\"rowDetail\"></tr>\r\n                }\r\n\r\n                <tr mat-footer-row \r\n                    *matFooterRowDef=\"showTotalPerPageFooter() ? keys() : []\" \r\n                    class=\"totalPerPageFooter\"\r\n                    [class.hideFooter]=\"!showTotalPerPageFooter()\">\r\n                </tr>\r\n\r\n                <tr mat-footer-row \r\n                    *matFooterRowDef=\"showTotalGeneralFooter() ? keysWithGeneralFooter() : []\" \r\n                    class=\"totalFooter\"\r\n                    [class.hideFooter]=\"!showTotalGeneralFooter()\">\r\n                </tr>\r\n\r\n                <tr class=\"mat-row\" *matNoDataRow>\r\n                    <td class=\"noData\" [colSpan]=\"keys().length\">{{ loading() ? intl.loadingMessage : intl.noDataMessage }}</td>\r\n                </tr>\r\n            </table>\r\n        </div>\r\n\r\n        <div class=\"paginatorContainer\">\r\n            <div class=\"footerLegend\">\r\n                @if(showTotalPerPageFooter()) {\r\n                    <div class=\"legendItem\">\r\n                        <div class=\"legendSquare\"></div>\r\n                        <p>{{ intl.totalPerPageLabel }}</p>    \r\n                    </div>\r\n                }\r\n\r\n                @if(showTotalGeneralFooter()) {\r\n                    <div class=\"legendItem\">\r\n                        <div class=\"legendSquare totalGeneral\"></div>\r\n                        <p>{{ intl.totalGeneralLabel }}</p>\r\n                    </div>\r\n                }\r\n            </div>\r\n            <mat-paginator />\r\n        </div>\r\n\r\n        <ng-content select=\"[end-container]\"></ng-content>\r\n    </div>\r\n</ng-template>", styles: [".tableContainer{display:flex;flex-direction:column;padding:14px;gap:10px;--mat-table-background-color: transparent;--mat-table-header-headline-color: var(--mat-sys-on-primary)}.inFullScreenMode{height:calc(100vh - 28px);width:calc(100vw - 28px);max-width:calc(100% - 28px);background:var(--mat-sys-surface)}.title{font:var(--mat-sys-title-large);color:var(--mat-sys-on-surface);margin:0;position:relative}.headerContainer{display:flex;justify-content:space-between;gap:10px;flex-direction:column}.titleAndButtonContainer{display:flex;justify-content:space-between;align-items:center;gap:20px}.buttonContainer{display:flex;gap:10px;align-items:center}.filterContainer{display:flex;flex-direction:row;align-items:center;gap:20px;justify-content:space-between}.moreFiltersContainer{display:flex;gap:20px}.editButtonIcon{--mat-icon-button-icon-color: var(--warning)}.deleteButtonIcon{--mat-icon-button-icon-color: var(--mat-sys-error)}.rowActionIconColorYellow{--mat-icon-button-icon-color: rgb(211, 211, 7)}.rowActionIconColorOrange{--mat-icon-button-icon-color: orange}.rowActionIconColorPink{--mat-icon-button-icon-color: pink}.rowActionIconColorPurple{--mat-icon-button-icon-color: purple}.rowActionIconColorGreen{--mat-icon-button-icon-color: var(--success)}.rowActionIconColorBlue{--mat-icon-button-icon-color: var(--information)}.rowActionIconColorBrown{--mat-icon-button-icon-color: brown}.rowActionIconColorSky{--mat-icon-button-icon-color: rgb(0, 247, 255)}.noData{padding:24px}.tableOverflow{overflow:auto;border-radius:10px}.columnLabel{text-wrap:nowrap}.headerTitle{display:flex;align-items:center;gap:4px}.headerTitle mat-icon{font-size:12px;width:12px;height:12px}.tableHeader{background-color:var(--mat-sys-primary)!important}.filtersByColumn{background-color:var(--mat-sys-surface)!important}.filtersByColumn th{padding:0}.celdaDatos{background-color:var(--mat-sys-surface)!important;transition:background-color .1s}.celdaAcciones,.celdaSelection{cursor:default!important;background-color:var(--mat-sys-surface)!important;transition:background-color .1s}.columnSticky{background-color:var(--mat-sys-surface)!important;transition:background-color .1s}.contenedorCeldaAcciones{display:flex;align-items:center;cursor:default!important}.rowClickEnable{cursor:pointer;transition:background-color .1s}.rowClickEnable:hover,.rowClickEnable:hover>.celdaAcciones,.rowClickEnable:hover>.celdaSelection,.rowClickEnable:hover>.celdaDatos,.rowClickEnable:hover>.columnSticky{background-color:var(--mat-sys-surface-container)!important}.inputQueryColumn,.selectColumn,.dateColumn{--mat-form-field-outlined-focus-outline-color: transparent;--mat-form-field-outlined-outline-color: transparent;--mat-form-field-outlined-hover-outline-color: transparent}.advancedFiltersApplied{display:flex;flex-direction:row;justify-content:space-between;gap:20px;border-radius:10px;background-color:var(--warning);color:var(--on-warning);align-items:center;margin-top:10px;padding:5px 5px 5px 15px;cursor:pointer;transition:background-color .3s}.advancedFiltersApplied:hover:not(:has(button:hover)){background-color:color-mix(in srgb,var(--warning) 80%,transparent)}.advancedFiltersApplied p{margin:0}.rowDetail{height:0}.expandableRow td{border-bottom-width:0}.detailWrapper{overflow:hidden;display:grid;grid-template-rows:0fr;grid-template-columns:100%;transition:grid-template-rows 225ms cubic-bezier(.4,0,.2,1)}.detailWrapperExpanded{grid-template-rows:1fr}.columnDetail{display:flex;flex-direction:column;min-height:0}.totalPerPageFooter{font-weight:700}.totalFooter{font-weight:700;background-color:var(--mat-sys-surface-container-highest);color:var(--mat-sys-on-surface)}.hideFooter{display:none}.paginatorContainer{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:20px;margin-top:10px}.footerLegend{display:flex;flex-direction:row;gap:30px}.footerLegend p{margin:0;font:var(--mat-sys-label-medium)}.legendItem{display:flex;flex-direction:row;align-items:center;gap:6px}.legendSquare{width:24px;height:14px;border-radius:4px;border:2px solid var(--mat-sys-on-surface)}.totalGeneral{background-color:var(--mat-sys-surface-container-highest)}.headerCheckbox{--mat-checkbox-selected-checkmark-color: var(--mat-sys-primary);--mat-checkbox-selected-focus-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-focus-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-selected-hover-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-hover-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-selected-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-pressed-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-pressed-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-focus-icon-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-focus-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-hover-icon-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-hover-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-icon-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-pressed-state-layer-color: var(--mat-sys-on-primary)}@media (max-width: 1200px){.filterContainer{flex-direction:column;align-items:normal}.moreFiltersContainer{flex-direction:column}}@media (max-width: 900px){.footerLegend{flex-direction:column;gap:6px}}@media (max-width: 700px){.paginatorContainer{flex-direction:column;align-items:flex-end}}@media (max-width: 600px){.titleAndButtonContainer{flex-direction:column;align-items:normal}}\n"] }]
+                    ], host: { class: 'contenedorDefecto' }, template: "@if(!isFullScreen()) {\r\n    <ng-container *ngTemplateOutlet=\"tableContentTemplate()\"></ng-container>\r\n}\r\n\r\n<ng-template #tableContent>\r\n    <div class=\"tableContainer\" [class.inFullScreenMode]=\"isFullScreen()\">\r\n        <div class=\"headerContainer\">\r\n            <div class=\"titleAndButtonContainer\">\r\n                <p class=\"title\">{{ config()().title() }}</p>\r\n                <div class=\"buttonContainer\">\r\n                    @if(config()().create && (!config()().create?.show || config()().create?.show())) {\r\n                        <button \r\n                            matIconButton \r\n                            [matTooltip]=\"config()().create?.tooltip?.() ?? intl.createButtonLabel\" \r\n                            [disabled]=\"config()().create?.disabled?.()\" \r\n                            class=\"newButtonIcon\"\r\n                            (click)=\"onNewClick()\">\r\n                            <mat-icon>add_circle</mat-icon>\r\n                        </button>\r\n                    }\r\n\r\n                    @if(config()().hideColumnConfig?.() !== true) {\r\n                        <button matIconButton [matTooltip]=\"intl.editColumnsTooltip\" class=\"editColumnsButtonIcon\" (click)=\"onEditColumns()\">\r\n                            <mat-icon>table_edit</mat-icon>\r\n                        </button>\r\n                    }\r\n\r\n                    @if(selection().length > 0) {\r\n                        @if(getRowSelectionAction().length > 0) {\r\n                            <button \r\n                                matIconButton \r\n                                [matTooltip]=\"intl.selectionActionsTooltip\"\r\n                                [matMenuTriggerFor]=\"selectedRecordsMenu\">\r\n                                <mat-icon>event_list</mat-icon>\r\n                            </button>\r\n\r\n                            <mat-menu #selectedRecordsMenu=\"matMenu\" xPosition=\"before\" yPosition=\"below\">\r\n                                <button mat-menu-item  (click)=\"uncheckAllSelection()\">\r\n                                    <mat-icon>deselect</mat-icon>\r\n                                    <span>{{ intl.deselectAllLabel }}</span>\r\n                                </button>\r\n\r\n                                @for (action of getRowSelectionAction(); track $index) {\r\n                                    <button mat-menu-item  (click)=\"onRowSelectionActionClick(action.id)\">\r\n                                        <mat-icon>{{action.icon}}</mat-icon>\r\n                                        <span>{{action.label(selection(), selection().length)}}</span>\r\n                                    </button>\r\n                                }\r\n                            </mat-menu>\r\n                        } @else {\r\n                            <button \r\n                                matIconButton \r\n                                [matTooltip]=\"intl.deselectAllLabel\"\r\n                                (click)=\"uncheckAllSelection()\">\r\n                                <mat-icon>deselect</mat-icon>\r\n                            </button>\r\n                        }\r\n                    }\r\n\r\n                    @if(config()().hideExportData?.() !== true) {\r\n                        <button matIconButton [matTooltip]=\"intl.exportTooltip\" [matMenuTriggerFor]=\"exportMenu\">\r\n                            <mat-icon>download</mat-icon>\r\n                        </button>\r\n                        <mat-menu #exportMenu=\"matMenu\" xPosition=\"before\" yPosition=\"below\">\r\n                            <button mat-menu-item  (click)=\"exportToCsv()\">\r\n                                <mat-icon>csv</mat-icon>\r\n                                <span>{{ intl.exportToExcelLabel }}</span>\r\n                            </button>\r\n\r\n                            <button mat-menu-item  (click)=\"exportToPdf()\">\r\n                                <mat-icon>picture_as_pdf</mat-icon>\r\n                                <span>{{ intl.exportToPdfLabel }}</span>\r\n                            </button>\r\n                        </mat-menu>\r\n                    }\r\n\r\n                    @if(config()().hideFullScreen?.() !== true) {\r\n                        <button matIconButton [matTooltip]=\"isFullScreen() ? intl.exitFullscreenTooltip : intl.enterFullscreenTooltip\" (click)=\"onToggleFullScreen()\">\r\n                            <mat-icon>{{isFullScreen() ? 'fullscreen_exit': 'fullscreen'}}</mat-icon>\r\n                        </button>\r\n                    }\r\n\r\n                    <ng-content select=\"[icon-buttons]\"></ng-content>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"filterContainer\">\r\n                <div class=\"moreFiltersContainer\">\r\n                    <ng-content select=\"[more-filters]\"></ng-content>\r\n                </div>\r\n\r\n                @if(showQueryFilter()) {\r\n                    <mat-form-field subscriptSizing=\"dynamic\">\r\n                        <mat-icon matPrefix>search</mat-icon>\r\n                        <input #queryElement matInput [placeholder]=\"config()().queryFilterPlaceholder ?? intl.searchPlaceholder\" [value]=\"filters()().query ?? ''\" (input)=\"onQueryChange(queryElement)\">\r\n                        <button matIconButton matSuffix (click)=\"onQueryReset(queryElement)\" [style.visibility]=\"queryElement.value ? 'visible': 'hidden'\">\r\n                            <mat-icon>close</mat-icon>\r\n                        </button>\r\n                    </mat-form-field>\r\n                }\r\n            </div>\r\n\r\n            <ng-content select=\"[extra-header-content]\"></ng-content>\r\n        </div>\r\n\r\n        <mat-progress-bar mode=\"indeterminate\" [style.visibility]=\"loading() ? 'visible': 'hidden'\"/>\r\n\r\n        <div class=\"tableOverflow\" [style.max-height]=\"config()().maxHeight && !isFullScreen() ? config()().maxHeight : null\">\r\n            <table\r\n                mat-table \r\n                matSort\r\n                [multiTemplateDataRows]=\"config()().expandableDetail\"\r\n                [dataSource]=\"dataSource()\" \r\n                [matSortActive]=\"filters()().sortBy?.key ?? ''\" \r\n                [matSortDirection]=\"filters()().sortBy?.direction ?? ''\"\r\n                (matSortChange)=\"onSortChange($event)\">\r\n\r\n                @if(config()().enableRowSelection) {\r\n                    @if(showFiltersRow()) {\r\n                        <ng-container [matColumnDef]=\"`${filterKeyPrefix}${nameOfRowSelectionColumn}`\" [sticky]=\"isDesktop()\">\r\n                            <th mat-header-cell *matHeaderCellDef class=\"celdaSelection\"></th>\r\n                        </ng-container>\r\n                    } \r\n\r\n                    <ng-container [matColumnDef]=\"nameOfRowSelectionColumn\" [sticky]=\"isDesktop()\">\r\n                        <th mat-header-cell *matHeaderCellDef>\r\n                            <mat-checkbox \r\n                                class=\"headerCheckbox\"\r\n                                (change)=\"$event ? toggleAllPageRowSelection() : null\"\r\n                                [checked]=\"selection().length > 0 && isAllPageRowSelected()\"\r\n                                [indeterminate]=\"selection().length > 0 && !isAllPageRowSelected()\">\r\n                            </mat-checkbox>\r\n                        </th>\r\n                        <td mat-cell *matCellDef=\"let row\" (click)=\"$event.stopPropagation()\" class=\"celdaSelection\">\r\n                            <mat-checkbox\r\n                                (change)=\"$event ? toggleRowSelection(row) : null\"\r\n                                [checked]=\"isRowSelected(row)\">\r\n                            </mat-checkbox>\r\n                        </td>\r\n                        <td mat-footer-cell *matFooterCellDef class=\"celdaSelection\"></td>\r\n                    </ng-container>\r\n\r\n                    @if(showTotalGeneralFooter()) {\r\n                        <ng-container [matColumnDef]=\"`${generalFooterKeyPrefix}${nameOfRowSelectionColumn}`\" [sticky]=\"isDesktop()\">\r\n                            <td mat-footer-cell *matFooterCellDef></td>\r\n                        </ng-container>\r\n                    }\r\n                }\r\n\r\n                @for (column of config()().columns; track $index) {\r\n                    <ng-container \r\n                        [matColumnDef]=\"getKeyAsString(column.key)\" \r\n                        [sticky]=\"stickyColumnKey() == column.key && isDesktop()\">\r\n\r\n                        <th mat-header-cell *matHeaderCellDef mat-sort-header [disabled]=\"column.sortType === undefined\" class=\"columnLabel\">\r\n                            <p class=\"headerTitle\">\r\n                                @if(stickyColumnKey() == column.key && isDesktop()) {\r\n                                    <mat-icon>keep</mat-icon>\r\n                                }\r\n                                {{ column.label }}\r\n                            </p>\r\n                        </th>\r\n\r\n                        <td \r\n                            mat-cell \r\n                            *matCellDef=\"let row\" \r\n                            [class.columnSticky]=\"stickyColumnKey() == column.key && isDesktop()\"\r\n                            [style]=\"column.style\"\r\n                            class=\"celdaDatos\">\r\n\r\n                            @if(column.component) {\r\n                                <ng-container \r\n                                    ngxDynamicCellHost\r\n                                    [component]=\"column.component\"\r\n                                    [row]=\"row\"\r\n                                    [key]=\"column.key\" />\r\n                            } @else if(column.templateRef) {\r\n                                <ng-container \r\n                                    *ngTemplateOutlet=\"column.templateRef(); \r\n                                    context: { $implicit: row }\" />\r\n                            } @else if(column.valueGetter) {\r\n                                {{ column.valueGetter(row) }}\r\n                            } @else {\r\n                                {{ applyColumnPipes(row[column.key], column.pipes) ?? '-' }}\r\n                            }\r\n                        </td>\r\n                        \r\n                        <td\r\n                            mat-footer-cell \r\n                            *matFooterCellDef\r\n                            [class.columnSticky]=\"stickyColumnKey() == column.key && isDesktop()\"\r\n                            [style]=\"column.footerStyle\">\r\n\r\n                            @if(column.showTotalPerPage) {\r\n                                @if(column.pipes) {\r\n                                    {{ applyColumnPipes(getTotalPerPageOfColum(column.key), column.pipes) }}\r\n                                } @else if(column.totalFooterFormatter) {\r\n                                    {{ column.totalFooterFormatter(getTotalPerPageOfColum(column.key)) }}\r\n                                } @else {\r\n                                    {{ getTotalPerPageOfColum(column.key) }}\r\n                                }\r\n                            }\r\n                        </td>\r\n                    </ng-container>\r\n                }\r\n\r\n                @if(showTotalGeneralFooter()) {\r\n                    @for (column of config()().columns; track $index) {\r\n                        <ng-container \r\n                            [matColumnDef]=\"`${generalFooterKeyPrefix}${getKeyAsString(column.key)}`\"\r\n                            [sticky]=\"stickyColumnKey() == column.key && isDesktop()\">\r\n                            <td mat-footer-cell *matFooterCellDef [style]=\"column.footerStyle\">\r\n                                @if(column.showTotalGeneral) {\r\n                                    @if(column.pipes) {\r\n                                        {{ applyColumnPipes(getTotalOfColum(column.key), column.pipes) }}\r\n                                    } @else if(column.totalFooterFormatter) {\r\n                                        {{ column.totalFooterFormatter(getTotalOfColum(column.key)) }}\r\n                                    } @else {\r\n                                        {{ getTotalOfColum(column.key) }}\r\n                                    }\r\n                                }\r\n                            </td>\r\n                        </ng-container>\r\n                    }\r\n                }\r\n\r\n                @if(showFiltersRow()) {\r\n                    @for (column of config()().columns; track $index) {\r\n                        <ng-container \r\n                            [matColumnDef]=\"`${filterKeyPrefix}${getKeyAsString(column.key)}`\" \r\n                            [sticky]=\"stickyColumnKey() == column.key && isDesktop()\">\r\n\r\n                            <th mat-header-cell *matHeaderCellDef>\r\n                                @if (column.filterType == 'text' || column.filterType == 'number') {\r\n                                    <mat-form-field subscriptSizing=\"dynamic\" class=\"inputQueryColumn\">\r\n                                        <input [type]=\"column.filterType\" matInput [placeholder]=\"column.label\" [value]=\"getValueOfColumnFilter(column.key) ?? ''\" (input)=\"onTextFilterColumnChange(column, $event)\">\r\n                                        <mat-icon matSuffix>{{ column.filterType == 'text' ? 'search' : 'numbers'}}</mat-icon>\r\n                                    </mat-form-field>\r\n                                }\r\n\r\n                                @if (column.filterType == 'option' || column.filterType == 'option-multiple') {\r\n                                    @if(column.endpointForPaginatedFilterOptions) {\r\n                                        <ngx-paginated-searchable-select\r\n                                            class=\"selectColumn\"\r\n                                            [selected]=\"getPaginatedSearchableSelectValueOfColumnFilter(column.key)\"\r\n                                            [endpoint]=\"column.endpointForPaginatedFilterOptions\"\r\n                                            [filters]=\"column.filtersForEndpointPaginatedFilterOptions ?? defaultFiltersForPaginatedFilterOptions\"\r\n                                            [multiple]=\"column.filterType == 'option-multiple'\"\r\n                                            subscriptSizing=\"dynamic\"\r\n                                            [selectPlaceholder]=\"column.label\"\r\n                                            (optionChange)=\"onPaginatedOptionFilterColumnChange(column, $event)\"\r\n                                            clearableOptionLabel=\"filtro\"\r\n                                        />\r\n                                    } @else {\r\n                                        <ngx-searchable-select\r\n                                            class=\"selectColumn\"\r\n                                            [selected]=\"getSearchableSelectValueOfColumnFilter(column.key)\"\r\n                                            [options]=\"column.filterOptions ?? []\"\r\n                                            [multiple]=\"column.filterType == 'option-multiple'\"\r\n                                            subscriptSizing=\"dynamic\"\r\n                                            [selectPlaceholder]=\"column.label\"\r\n                                            (optionChange)=\"onOptionFilterColumnChange(column, $event)\"\r\n                                            clearableOptionLabel=\"filtro\"\r\n                                        />\r\n                                    }                                    \r\n                                }\r\n                                \r\n                                @if(column.filterType == 'date') {\r\n                                    <mat-form-field subscriptSizing=\"dynamic\" class=\"dateColumn\">\r\n                                        <input \r\n                                            matInput \r\n                                            [matDatepicker]=\"picker\" \r\n                                            [placeholder]=\"column.label\"\r\n                                            [value]=\"getValueOfColumnFilter(column.key)\"\r\n                                            (dateChange)=\"onDateFilterChange(column, $event.value)\">\r\n                                        <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n                                        <mat-datepicker #picker></mat-datepicker>\r\n                                    </mat-form-field>\r\n                                }\r\n\r\n                                @if(column.filterType == 'date-range') {\r\n                                    <mat-form-field subscriptSizing=\"dynamic\" class=\"dateColumn\">\r\n                                        <mat-date-range-input [rangePicker]=\"picker\" #dateRangeInput>\r\n                                            <input \r\n                                                matStartDate \r\n                                                [placeholder]=\"intl.dateRangeStartPlaceholder\"\r\n                                                [value]=\"getDateRangeValueOfColumnFilter(column.key, 'start')\"\r\n                                                (dateChange)=\"onDateRangeFilterChange(column, dateRangeInput.value)\">\r\n                                            <input \r\n                                                matEndDate \r\n                                                [placeholder]=\"intl.dateRangeEndPlaceholder\"\r\n                                                [value]=\"getDateRangeValueOfColumnFilter(column.key, 'end')\"\r\n                                                (dateChange)=\"onDateRangeFilterChange(column, dateRangeInput.value)\">\r\n                                        </mat-date-range-input>\r\n                                        <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n                                        <mat-date-range-picker #picker></mat-date-range-picker>\r\n                                    </mat-form-field>\r\n                                }\r\n                            </th>\r\n                        </ng-container>\r\n                    }\r\n                }\r\n\r\n                @if(showActionsColumn()) {\r\n                    @if(showFiltersRow()) {\r\n                        <ng-container [matColumnDef]=\"`${filterKeyPrefix}${nameOfActionsColumn}`\" [stickyEnd]=\"isDesktop()\">\r\n                            <th mat-header-cell *matHeaderCellDef class=\"celdaAcciones\"></th>\r\n                        </ng-container>\r\n                    }            \r\n\r\n                    <ng-container [matColumnDef]=\"nameOfActionsColumn\" [stickyEnd]=\"isDesktop()\">\r\n                        <th mat-header-cell *matHeaderCellDef>{{ intl.actionsLabel }}</th>\r\n                        <td mat-cell *matCellDef=\"let row\" (click)=\"$event.stopPropagation()\" class=\"celdaAcciones\">\r\n                            <div class=\"contenedorCeldaAcciones\">\r\n                                @if(config()().expandableDetail) {\r\n                                    <button \r\n                                        matIconButton\r\n                                        (click)=\"expandableToggle(row)\">\r\n                                        <mat-icon>{{ rowIsExpanded(row) ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}</mat-icon>\r\n                                    </button>\r\n                                }\r\n\r\n                                @for (rowAction of config()().rowActions; track $index) {\r\n                                    @if(!rowAction.show || rowAction.show(row)) {\r\n                                        <button \r\n                                            matIconButton \r\n                                            [matTooltip]=\"rowAction.tooltip(row)\" \r\n                                            [disabled]=\"rowAction.disabled?.(row)\" \r\n                                            [class]=\"rowAction.iconColor ? `rowActionIconColor${rowAction.iconColor}` : ''\"\r\n                                            (click)=\"onRowActionClick(row, rowAction, $event)\">\r\n                                            <mat-icon>{{rowAction.icon}}</mat-icon>\r\n                                        </button>\r\n                                    }                    \r\n                                }\r\n\r\n                                @if(config()().update && !config()().clickOnRowForUpdate && (!config()().update?.show || config()().update?.show(row))) {\r\n                                    <button \r\n                                        matIconButton\r\n                                        [matTooltip]=\"config()().update?.tooltip?.(row) ?? intl.editTooltip\" \r\n                                        [disabled]=\"config()().update?.disabled?.(row)\" \r\n                                        class=\"editButtonIcon\"\r\n                                        (click)=\"onUpdateClick(row, $event)\">\r\n                                        <mat-icon>edit_square</mat-icon>\r\n                                    </button>\r\n                                }\r\n                                \r\n                                @if(config()().delete && (!config()().delete?.show || config()().delete?.show(row))) {\r\n                                    <button \r\n                                        matIconButton \r\n                                        [matTooltip]=\"config()().delete?.tooltip?.(row) ?? intl.deleteTooltip\" \r\n                                        [disabled]=\"config()().delete?.disabled?.(row)\" \r\n                                        class=\"deleteButtonIcon\"\r\n                                        (click)=\"onDeleteClick(row, $event)\">\r\n                                        <mat-icon>delete</mat-icon>\r\n                                    </button>\r\n                                }\r\n                            </div>\r\n                        </td>\r\n                        <td mat-footer-cell *matFooterCellDef></td>\r\n                    </ng-container>\r\n\r\n                    @if(showTotalGeneralFooter()) {\r\n                        <ng-container [matColumnDef]=\"`${generalFooterKeyPrefix}${nameOfActionsColumn}`\" [stickyEnd]=\"isDesktop()\">\r\n                            <td mat-footer-cell *matFooterCellDef></td>\r\n                        </ng-container>\r\n                    }\r\n                }\r\n\r\n                @if(config()().expandableDetail) {\r\n                    <ng-container [matColumnDef]=\"expandableColumnDef\">\r\n                        <td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"keys().length\">\r\n                            <div \r\n                                class=\"detailWrapper\"\r\n                                [class.detailWrapperExpanded]=\"rowIsExpanded(row)\">\r\n                                <div class=\"columnDetail\">\r\n                                    @if(config()().expandableDetailTemplateRef) {\r\n                                        <ng-container \r\n                                            *ngTemplateOutlet=\"config()().expandableDetailTemplateRef!(); \r\n                                            context: { $implicit: row }\" />\r\n                                    }\r\n                                </div>\r\n                            </div>\r\n                        </td>\r\n                    </ng-container>\r\n                }\r\n                \r\n                <tr mat-header-row *matHeaderRowDef=\"keys(); sticky: true\" class=\"tableHeader\"></tr>\r\n                \r\n                @if(showFiltersRow()) {\r\n                    <tr mat-header-row *matHeaderRowDef=\"keysWithFilter(); sticky: true\" class=\"filtersByColumn\"></tr>\r\n                }\r\n                \r\n                <tr mat-row *matRowDef=\"let row; columns: keys();\" \r\n                    (click)=\"onRowClick(row)\" \r\n                    [class.rowClickEnable]=\"isRowEnabled(row)\"\r\n                    [class.expandableRow]=\"config()().expandableDetail\">\r\n                </tr>\r\n                \r\n                @if(config()().expandableDetail) {\r\n                    <tr mat-row *matRowDef=\"let row; columns: [expandableColumnDef]\" class=\"rowDetail\"></tr>\r\n                }\r\n\r\n                <tr mat-footer-row \r\n                    *matFooterRowDef=\"showTotalPerPageFooter() ? keys() : []\" \r\n                    class=\"totalPerPageFooter\"\r\n                    [class.hideFooter]=\"!showTotalPerPageFooter()\">\r\n                </tr>\r\n\r\n                <tr mat-footer-row \r\n                    *matFooterRowDef=\"showTotalGeneralFooter() ? keysWithGeneralFooter() : []\" \r\n                    class=\"totalFooter\"\r\n                    [class.hideFooter]=\"!showTotalGeneralFooter()\">\r\n                </tr>\r\n\r\n                <tr class=\"mat-row\" *matNoDataRow>\r\n                    <td class=\"noData\" [colSpan]=\"keys().length\">{{ loading() ? intl.loadingMessage : intl.noDataMessage }}</td>\r\n                </tr>\r\n            </table>\r\n        </div>\r\n\r\n        <div class=\"paginatorContainer\">\r\n            <div class=\"footerLegend\">\r\n                @if(showTotalPerPageFooter()) {\r\n                    <div class=\"legendItem\">\r\n                        <div class=\"legendSquare\"></div>\r\n                        <p>{{ intl.totalPerPageLabel }}</p>    \r\n                    </div>\r\n                }\r\n\r\n                @if(showTotalGeneralFooter()) {\r\n                    <div class=\"legendItem\">\r\n                        <div class=\"legendSquare totalGeneral\"></div>\r\n                        <p>{{ intl.totalGeneralLabel }}</p>\r\n                    </div>\r\n                }\r\n            </div>\r\n            <mat-paginator />\r\n        </div>\r\n\r\n        <ng-content select=\"[end-container]\"></ng-content>\r\n    </div>\r\n</ng-template>", styles: [".tableContainer{display:flex;flex-direction:column;padding:14px;gap:10px;--mat-table-background-color: transparent;--mat-table-header-headline-color: var(--mat-sys-on-primary)}.inFullScreenMode{height:calc(100vh - 28px);width:calc(100vw - 28px);max-width:calc(100% - 28px);background:var(--mat-sys-surface)}.title{font:var(--mat-sys-title-large);color:var(--mat-sys-on-surface);margin:0;position:relative}.headerContainer{display:flex;justify-content:space-between;gap:10px;flex-direction:column}.titleAndButtonContainer{display:flex;justify-content:space-between;align-items:center;gap:20px}.buttonContainer{display:flex;gap:10px;align-items:center}.filterContainer{display:flex;flex-direction:row;align-items:center;gap:20px;justify-content:space-between}.moreFiltersContainer{display:flex;gap:20px}.editButtonIcon{--mat-icon-button-icon-color: var(--warning)}.deleteButtonIcon{--mat-icon-button-icon-color: var(--mat-sys-error)}.rowActionIconColorYellow{--mat-icon-button-icon-color: rgb(211, 211, 7)}.rowActionIconColorOrange{--mat-icon-button-icon-color: orange}.rowActionIconColorPink{--mat-icon-button-icon-color: pink}.rowActionIconColorPurple{--mat-icon-button-icon-color: purple}.rowActionIconColorGreen{--mat-icon-button-icon-color: var(--success)}.rowActionIconColorBlue{--mat-icon-button-icon-color: var(--information)}.rowActionIconColorBrown{--mat-icon-button-icon-color: brown}.rowActionIconColorSky{--mat-icon-button-icon-color: rgb(0, 247, 255)}.noData{padding:24px}.tableOverflow{overflow:auto;border-radius:10px}.columnLabel{text-wrap:nowrap}.headerTitle{display:flex;align-items:center;gap:4px}.headerTitle mat-icon{font-size:12px;width:12px;height:12px}.tableHeader{background-color:var(--mat-sys-primary)!important}.filtersByColumn{background-color:var(--mat-sys-surface)!important}.filtersByColumn th{padding:0}.celdaDatos{background-color:var(--mat-sys-surface)!important;transition:background-color .1s}.celdaAcciones,.celdaSelection{cursor:default!important;background-color:var(--mat-sys-surface)!important;transition:background-color .1s}.columnSticky{background-color:var(--mat-sys-surface)!important;transition:background-color .1s}.contenedorCeldaAcciones{display:flex;align-items:center;cursor:default!important}.rowClickEnable{cursor:pointer;transition:background-color .1s}.rowClickEnable:hover,.rowClickEnable:hover>.celdaAcciones,.rowClickEnable:hover>.celdaSelection,.rowClickEnable:hover>.celdaDatos,.rowClickEnable:hover>.columnSticky{background-color:var(--mat-sys-surface-container)!important}.inputQueryColumn,.selectColumn,.dateColumn{--mat-form-field-outlined-focus-outline-color: transparent;--mat-form-field-outlined-outline-color: transparent;--mat-form-field-outlined-hover-outline-color: transparent}.advancedFiltersApplied{display:flex;flex-direction:row;justify-content:space-between;gap:20px;border-radius:10px;background-color:var(--warning);color:var(--on-warning);align-items:center;margin-top:10px;padding:5px 5px 5px 15px;cursor:pointer;transition:background-color .3s}.advancedFiltersApplied:hover:not(:has(button:hover)){background-color:color-mix(in srgb,var(--warning) 80%,transparent)}.advancedFiltersApplied p{margin:0}.rowDetail{height:0}.expandableRow td{border-bottom-width:0}.detailWrapper{overflow:hidden;display:grid;grid-template-rows:0fr;grid-template-columns:100%;transition:grid-template-rows 225ms cubic-bezier(.4,0,.2,1)}.detailWrapperExpanded{grid-template-rows:1fr}.columnDetail{display:flex;flex-direction:column;min-height:0}.totalPerPageFooter{font-weight:700}.totalFooter{font-weight:700;background-color:var(--mat-sys-surface-container-highest);color:var(--mat-sys-on-surface)}.hideFooter{display:none}.paginatorContainer{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:20px;margin-top:10px}.footerLegend{display:flex;flex-direction:row;gap:30px}.footerLegend p{margin:0;font:var(--mat-sys-label-medium)}.legendItem{display:flex;flex-direction:row;align-items:center;gap:6px}.legendSquare{width:24px;height:14px;border-radius:4px;border:2px solid var(--mat-sys-on-surface)}.totalGeneral{background-color:var(--mat-sys-surface-container-highest)}.headerCheckbox{--mat-checkbox-selected-checkmark-color: var(--mat-sys-primary);--mat-checkbox-selected-focus-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-focus-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-selected-hover-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-hover-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-selected-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-pressed-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-pressed-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-focus-icon-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-focus-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-hover-icon-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-hover-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-icon-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-pressed-state-layer-color: var(--mat-sys-on-primary)}@media (max-width: 1200px){.filterContainer{flex-direction:column;align-items:normal}.moreFiltersContainer{flex-direction:column}}@media (max-width: 900px){.footerLegend{flex-direction:column;gap:6px}}@media (max-width: 700px){.paginatorContainer{flex-direction:column;align-items:flex-end}}@media (max-width: 600px){.titleAndButtonContainer{flex-direction:column;align-items:normal}}\n"] }]
         }], propDecorators: { filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], queryFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "queryFilter", required: false }] }], moreFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "moreFilters", required: false }] }], createClick: [{ type: i0.Output, args: ["createClick"] }], updateClick: [{ type: i0.Output, args: ["updateClick"] }], deleteClick: [{ type: i0.Output, args: ["deleteClick"] }], rowActionClick: [{ type: i0.Output, args: ["rowActionClick"] }], expandedItemChange: [{ type: i0.Output, args: ["expandedItemChange"] }], selectionActionEvent: [{ type: i0.Output, args: ["selectionActionEvent"] }], tableContentTemplate: [{ type: i0.ViewChild, args: ['tableContent', { isSignal: true }] }], paginator: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatPaginator), { isSignal: true }] }], onEscape: [{
                 type: HostListener,
                 args: ['document:keydown.escape']
@@ -3469,7 +3469,7 @@ class NgxPaginatedSelectBottomSheetComponent {
         this._ref.dismiss(undefined);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxPaginatedSelectBottomSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: NgxPaginatedSelectBottomSheetComponent, isStandalone: true, selector: "ngx-paginated-select-bottom-sheet", ngImport: i0, template: "<div class=\"ps-bs\">\n\n  <!-- \u2500\u2500 Handle bar (mobile) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"ps-bs__handle\">\n    <div class=\"ps-bs__handle-bar\"></div>\n  </div>\n\n  <!-- \u2500\u2500 Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"ps-bs__header\" [class.ps-bs__header--scrolled]=\"headerScrolled()\">\n    <div class=\"ps-bs__header-top\">\n      <div class=\"ps-bs__title-area\">\n        <span class=\"ps-bs__title\">{{ data.title }}</span>\n        @if (data.multiple && selectedCount() > 0) {\n          <span class=\"ps-bs__badge\">{{ selectedCount() }}</span>\n        }\n      </div>\n      <button mat-icon-button class=\"ps-bs__close-btn\" [attr.aria-label]=\"intl.closeButtonLabel\" (click)=\"close()\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n\n    <!-- Pill search -->\n    @if (data.showSearch) {\n      <div class=\"ps-bs__search\">\n        <mat-icon class=\"ps-bs__search-icon\">search</mat-icon>\n        <input\n          class=\"ps-bs__search-input\"\n          #searchInput\n          type=\"text\"\n          [value]=\"query() ?? ''\"\n          [placeholder]=\"data.searchPlaceholder\"\n          (input)=\"onQueryInput($event, optionsContainer)\"\n        />\n        @if (searchInput.value.length > 0) {\n          <button\n            class=\"ps-bs__search-clear\"\n            type=\"button\"\n            [attr.aria-label]=\"intl.clearSearchTooltip\"\n            (click)=\"clearQuery(optionsContainer); $event.stopPropagation()\"\n          >\n            <mat-icon>close</mat-icon>\n          </button>\n        }\n      </div>\n    }\n\n    <!-- Extra filters projection -->\n    @if (data.extraFiltersTemplate) {\n      <div class=\"ps-bs__extra-filters\">\n        <ng-container *ngTemplateOutlet=\"data.extraFiltersTemplate\" />\n      </div>\n    }\n\n    <!-- Selected chips (custom lightweight chips) -->\n    @if (data.multiple && selectedItems().length > 0) {\n      <div class=\"ps-bs__selected-chips\">\n        @for (item of selectedItems(); track item[data.config.valueKey]) {\n          <div class=\"ps-bs__chip\">\n            <span class=\"ps-bs__chip-label\">{{ getLabel(item) }}</span>\n            <button class=\"ps-bs__chip-remove\" type=\"button\" [attr.aria-label]=\"intl.clearSearchTooltip\" (click)=\"removeSelectedChip(item)\">\n              <mat-icon>close</mat-icon>\n            </button>\n          </div>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- \u2500\u2500 Select all (multiple mode) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  @if (data.multiple && data.showSelectAll && options().length > 0) {\n    <div class=\"ps-bs__select-all\" matRipple (click)=\"toggleSelectAll()\">\n      <mat-checkbox\n        [checked]=\"allSelected()\"\n        [indeterminate]=\"someSelected()\"\n        (click)=\"$event.preventDefault()\"\n      />\n      <span class=\"ps-bs__select-all-label\">{{ data.selectAllLabel }}</span>\n    </div>\n  }\n\n  <!-- \u2500\u2500 Options (scrollable, takes remaining space) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"ps-bs__options\" #optionsContainer (scroll)=\"onScroll(optionsContainer)\">\n\n    <!-- Skeleton loading (only for the first page) -->\n    @if (isInitialLoading()) {\n      @for (i of [1, 2, 3, 4, 5, 6]; track i) {\n        <div class=\"ps-bs__skeleton\">\n          <div class=\"ps-bs__skeleton-avatar\"></div>\n          <div class=\"ps-bs__skeleton-content\">\n            <div class=\"ps-bs__skeleton-line ps-bs__skeleton-line--title\"></div>\n            <div class=\"ps-bs__skeleton-line ps-bs__skeleton-line--subtitle\"></div>\n          </div>\n        </div>\n      }\n    }\n\n    <!-- Error state -->\n    @if (hasError() && !isLoading() && options().length === 0) {\n      <div class=\"ps-bs__state ps-bs__error\">\n        <div class=\"ps-bs__state-icon-wrap ps-bs__error-icon-wrap\">\n          <mat-icon>error_outline</mat-icon>\n        </div>\n        <div class=\"ps-bs__state-title\">{{ intl.paginatedSelectErrorTitle }}</div>\n        <div class=\"ps-bs__state-hint\">{{ intl.paginatedSelectErrorHint }}</div>\n        <button matButton=\"tonal\" (click)=\"retry()\">\n          <mat-icon>refresh</mat-icon>\n          {{ intl.paginatedSelectRetryLabel }}\n        </button>\n      </div>\n    }\n\n    <!-- Empty state -->\n    @if (!hasError() && options().length === 0 && !isLoading()) {\n      <div class=\"ps-bs__state ps-bs__empty\">\n        <div class=\"ps-bs__state-icon-wrap\">\n          <mat-icon>search_off</mat-icon>\n        </div>\n        <div class=\"ps-bs__state-title\">{{ data.noResultsMessage }}</div>\n        @if (query()) {\n          <div class=\"ps-bs__state-hint\">{{ intl.paginatedSelectNoResultsHint }}</div>\n          <button matButton (click)=\"clearQuery(optionsContainer)\">\n            {{ intl.paginatedSelectClearSearchLabel }}\n          </button>\n        }\n      </div>\n    }\n\n    <!-- Option rows -->\n    @for (item of options(); track item[data.config.valueKey]) {\n      @let disabled = data.config.disabled ? data.config.disabled(item) : false;\n      @let selected = isSelected(item);\n      @let avatarImg = getAvatarImage(item);\n\n      <div\n        class=\"ps-bs__option\"\n        [class.ps-bs__option--selected]=\"selected\"\n        [class.ps-bs__option--disabled]=\"disabled\"\n        matRipple\n        [matRippleDisabled]=\"disabled\"\n        (click)=\"toggleItem(item)\"\n        role=\"option\"\n        [attr.aria-selected]=\"selected\"\n        [attr.aria-disabled]=\"disabled\"\n      >\n        <!-- Avatar -->\n        <div class=\"ps-bs__option-avatar\" [class.ps-bs__option-avatar--selected]=\"selected\">\n          @if (avatarImg) {\n            <img [src]=\"avatarImg\" [alt]=\"getLabel(item)\" (error)=\"onAvatarError(item)\" loading=\"lazy\" />\n          } @else if (data.config.avatarText) {\n            {{ getAvatarText(item) }}\n          } @else if (data.config.avatarIcon) {\n            <mat-icon>{{ data.config.avatarIcon }}</mat-icon>\n          } @else {\n            {{ getAvatarText(item) }}\n          }\n        </div>\n\n        <!-- Content -->\n        <div class=\"ps-bs__option-content\">\n          @if (data.optionTemplate) {\n            <ng-container *ngTemplateOutlet=\"data.optionTemplate; context: { $implicit: item }\" />\n          } @else {\n            <span class=\"ps-bs__option-label\">{{ getLabel(item) }}</span>\n            @if (data.config.subtitle) {\n              <span class=\"ps-bs__option-subtitle\">{{ data.config.subtitle(item) }}</span>\n            }\n          }\n        </div>\n\n        <!-- Check indicator -->\n        @if (data.multiple) {\n          <mat-checkbox [checked]=\"selected\" [disabled]=\"disabled\" (click)=\"$event.preventDefault()\" />\n        } @else if (selected) {\n          <mat-icon class=\"ps-bs__option-check\">check_circle</mat-icon>\n        }\n      </div>\n    }\n\n    <!-- Loading more (pagination) / end of list -->\n    @if (isLoadingMore()) {\n      <div class=\"ps-bs__loading-more\" aria-live=\"polite\">\n        <span class=\"ps-bs__loading-more-dot\"></span>\n        <span class=\"ps-bs__loading-more-dot\"></span>\n        <span class=\"ps-bs__loading-more-dot\"></span>\n        <span class=\"ps-bs__loading-more-text\">{{ intl.paginatedSelectLoadingMoreLabel }}</span>\n      </div>\n    } @else if (allLoaded() && options().length > 0) {\n      <div class=\"ps-bs__list-end\">{{ intl.paginatedSelectEndOfListLabel }}</div>\n    }\n  </div>\n\n  <!-- \u2500\u2500 Footer (ALWAYS VISIBLE \u2014 never scrolls) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"ps-bs__footer\">\n    <span class=\"ps-bs__footer-count\">\n      @if (data.multiple) {\n        {{ intl.getPaginatedSelectSelectedCountLabel(selectedCount(), total()) }}\n      } @else {\n        {{ intl.getPaginatedSelectResultsCountLabel(total()) }}\n      }\n    </span>\n\n    @if (data.multiple) {\n      <div class=\"ps-bs__footer-actions\">\n        @if (selectedCount() > 0) {\n          <button matButton (click)=\"reset()\">{{ data.resetLabel }}</button>\n        }\n        <button matButton=\"filled\" color=\"primary\" (click)=\"confirm()\">{{ data.confirmLabel }}</button>\n      </div>\n    }\n  </div>\n</div>\n", styles: [".cdk-global-overlay-wrapper:has(.ngx-paginated-select-panel){align-items:center!important;justify-content:center!important}.ngx-paginated-select-backdrop{background:color-mix(in srgb,var(--mat-sys-scrim, #000) 40%,transparent);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.ngx-paginated-select-panel .mat-bottom-sheet-container{padding:0!important;overflow:hidden!important;display:flex!important;flex-direction:column!important;width:min(560px,100vw - 48px);min-width:0;max-width:560px;height:min(72vh,620px)!important;max-height:min(72vh,620px)!important;border-radius:28px;background:var(--mat-sys-surface-container-high);border:1px solid color-mix(in srgb,var(--mat-sys-outline-variant) 60%,transparent);box-shadow:0 1px 3px #0000001f,0 8px 24px #00000024,0 24px 48px #0000001a!important}ngx-paginated-select-bottom-sheet{display:flex;flex-direction:column;flex:1 1 0;min-height:0;overflow:hidden;width:100%}.ps-bs{display:flex;flex-direction:column;height:100%;overflow:hidden}.ps-bs__handle{display:none;justify-content:center;padding:12px 0 4px;flex:0 0 auto}.ps-bs__handle-bar{width:32px;height:4px;border-radius:9999px;background:var(--mat-sys-outline-variant)}.ps-bs__header{flex:0 0 auto;padding:20px 24px 16px;display:flex;flex-direction:column;gap:16px;position:relative;z-index:2;transition:box-shadow .2s cubic-bezier(.2,0,0,1)}.ps-bs__header--scrolled{box-shadow:0 1px 0 0 var(--mat-sys-outline-variant),0 6px 14px -10px #00000059}.ps-bs__header-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.ps-bs__title-area{display:flex;align-items:center;gap:10px;flex:1;min-width:0}.ps-bs__title{font:var(--mat-sys-title-large);font-weight:600;color:var(--mat-sys-on-surface);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ps-bs__badge{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 7px;border-radius:9999px;font:var(--mat-sys-label-medium);font-weight:700;font-variant-numeric:tabular-nums;background:var(--mat-sys-primary);color:var(--mat-sys-on-primary);flex-shrink:0;animation:ps-badge-pop .3s cubic-bezier(.34,1.56,.64,1)}@keyframes ps-badge-pop{0%{transform:scale(0)}to{transform:scale(1)}}.ps-bs__close-btn{flex:0 0 auto}.ps-bs__search{display:flex;align-items:center;gap:10px;height:48px;padding:0 6px 0 16px;background:var(--mat-sys-surface-container-highest);border-radius:9999px;border:1.5px solid transparent;transition:background .2s cubic-bezier(.2,0,0,1),border-color .2s cubic-bezier(.2,0,0,1),box-shadow .2s cubic-bezier(.2,0,0,1)}.ps-bs__search:hover{background:color-mix(in srgb,var(--mat-sys-on-surface) 4%,var(--mat-sys-surface-container-highest))}.ps-bs__search:focus-within{background:var(--mat-sys-surface);border-color:var(--mat-sys-primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--mat-sys-primary) 12%,transparent)}.ps-bs__search-icon{color:var(--mat-sys-on-surface-variant);font-size:22px;width:22px;height:22px;flex-shrink:0;transition:color .2s cubic-bezier(.2,0,0,1)}.ps-bs__search:focus-within .ps-bs__search-icon{color:var(--mat-sys-primary)}.ps-bs__search-input{flex:1;border:none;outline:none;background:transparent;font:var(--mat-sys-body-large);font-family:inherit;color:var(--mat-sys-on-surface);min-width:0}.ps-bs__search-input::placeholder{color:var(--mat-sys-on-surface-variant)}.ps-bs__search-clear{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:none;background:transparent;cursor:pointer;color:var(--mat-sys-on-surface-variant);transition:background .15s cubic-bezier(.2,0,0,1);flex-shrink:0}.ps-bs__search-clear:hover{background:color-mix(in srgb,var(--mat-sys-on-surface) 10%,transparent)}.ps-bs__search-clear mat-icon{font-size:20px;width:20px;height:20px}.ps-bs__extra-filters{width:100%}.ps-bs__selected-chips{display:flex;flex-wrap:wrap;gap:8px;max-height:76px;overflow-y:auto;padding:4px 0 2px}.ps-bs__chip{display:inline-flex;align-items:center;gap:2px;height:32px;padding:0 4px 0 12px;border-radius:9999px;background:var(--mat-sys-secondary-container);color:var(--mat-sys-on-secondary-container);font:var(--mat-sys-label-large);white-space:nowrap;max-width:200px;animation:ps-chip-in .2s cubic-bezier(.2,0,0,1)}.ps-bs__chip-label{overflow:hidden;text-overflow:ellipsis}.ps-bs__chip-remove{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;border:none;background:transparent;cursor:pointer;color:inherit;opacity:.55;transition:opacity .15s,background .15s}.ps-bs__chip-remove:hover{opacity:1;background:color-mix(in srgb,var(--mat-sys-on-secondary-container) 12%,transparent)}.ps-bs__chip-remove mat-icon{font-size:16px;width:16px;height:16px}@keyframes ps-chip-in{0%{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}.ps-bs__select-all{flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:8px 24px;cursor:pointer;border-bottom:1px solid var(--mat-sys-outline-variant);transition:background .15s cubic-bezier(.2,0,0,1)}.ps-bs__select-all:hover{background:color-mix(in srgb,var(--mat-sys-on-surface) 5%,transparent)}.ps-bs__select-all-label{font:var(--mat-sys-label-large);color:var(--mat-sys-on-surface)}.ps-bs__options{flex:1 1 0;min-height:0;overflow-y:auto;padding:6px 10px}.ps-bs__option{display:flex;align-items:center;gap:14px;padding:8px 12px;margin:2px 0;cursor:pointer;border-radius:16px;min-height:56px;transition:background .15s cubic-bezier(.2,0,0,1)}.ps-bs__option:hover:not(.ps-bs__option--disabled){background:color-mix(in srgb,var(--mat-sys-on-surface) 8%,transparent)}.ps-bs__option:active:not(.ps-bs__option--disabled){background:color-mix(in srgb,var(--mat-sys-on-surface) 12%,transparent)}.ps-bs__option--selected{background:color-mix(in srgb,var(--mat-sys-primary) 8%,transparent);box-shadow:inset 3px 0 0 0 var(--mat-sys-primary)}.ps-bs__option--selected:hover{background:color-mix(in srgb,var(--mat-sys-primary) 12%,transparent)}.ps-bs__option--disabled{opacity:.38;cursor:not-allowed}.ps-bs__option .mat-ripple-element{background:color-mix(in srgb,var(--mat-sys-primary) 12%,transparent)}.ps-bs__option .mat-mdc-checkbox{margin-left:auto;margin-right:-8px;flex-shrink:0}.ps-bs__option-avatar{width:40px;height:40px;min-width:40px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;font:var(--mat-sys-label-large);font-weight:600;background:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mat-sys-on-surface) 8%,transparent);transition:box-shadow .18s cubic-bezier(.2,0,0,1)}.ps-bs__option-avatar img{width:100%;height:100%;object-fit:cover;display:block}.ps-bs__option-avatar mat-icon{font-size:20px;width:20px;height:20px}.ps-bs__option-avatar--selected{box-shadow:0 0 0 2px var(--mat-sys-primary),0 0 0 4px var(--mat-sys-surface-container-high)}.ps-bs__option-content{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}.ps-bs__option-label{font:var(--mat-sys-body-large);color:var(--mat-sys-on-surface);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ps-bs__option--selected .ps-bs__option-label{font-weight:600}.ps-bs__option-subtitle{font:var(--mat-sys-body-small);color:var(--mat-sys-on-surface-variant);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ps-bs__option-check{color:var(--mat-sys-primary);font-size:22px;width:22px;height:22px;margin-left:auto;flex-shrink:0}.ps-bs__skeleton{display:flex;align-items:center;gap:14px;padding:8px 12px;margin:2px 0;min-height:56px;border-radius:16px;opacity:0;animation:ps-skeleton-in .4s ease forwards}.ps-bs__skeleton-avatar{width:40px;height:40px;min-width:40px;border-radius:50%;background:linear-gradient(90deg,var(--mat-sys-surface-container) 25%,var(--mat-sys-surface-container-highest) 37%,var(--mat-sys-surface-container) 63%);background-size:400% 100%;animation:ps-shimmer 1.4s ease-in-out infinite}.ps-bs__skeleton-content{flex:1;display:flex;flex-direction:column;gap:10px}.ps-bs__skeleton-line{height:12px;border-radius:6px;background:linear-gradient(90deg,var(--mat-sys-surface-container) 25%,var(--mat-sys-surface-container-highest) 37%,var(--mat-sys-surface-container) 63%);background-size:400% 100%;animation:ps-shimmer 1.4s ease-in-out infinite}.ps-bs__skeleton-line--title{width:60%}.ps-bs__skeleton-line--subtitle{width:38%;height:10px}.ps-bs__skeleton:nth-child(1){animation-delay:0ms}.ps-bs__skeleton:nth-child(2){animation-delay:60ms}.ps-bs__skeleton:nth-child(3){animation-delay:.12s}.ps-bs__skeleton:nth-child(4){animation-delay:.18s}.ps-bs__skeleton:nth-child(5){animation-delay:.24s}.ps-bs__skeleton:nth-child(6){animation-delay:.3s}@keyframes ps-skeleton-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes ps-shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}.ps-bs__loading-more{display:flex;align-items:center;justify-content:center;gap:6px;padding:18px;color:var(--mat-sys-on-surface-variant);font:var(--mat-sys-body-small)}.ps-bs__loading-more-dot{width:6px;height:6px;border-radius:50%;background:var(--mat-sys-primary);animation:ps-bounce 1s ease-in-out infinite}.ps-bs__loading-more-dot:nth-child(2){animation-delay:.15s}.ps-bs__loading-more-dot:nth-child(3){animation-delay:.3s}.ps-bs__loading-more-text{margin-left:6px}@keyframes ps-bounce{0%,80%,to{transform:translateY(0);opacity:.4}40%{transform:translateY(-4px);opacity:1}}.ps-bs__list-end{text-align:center;padding:16px;font:var(--mat-sys-body-small);color:var(--mat-sys-on-surface-variant);opacity:.7}.ps-bs__state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:56px 32px;gap:12px;text-align:center;animation:ps-fade-in .2s ease}.ps-bs__state-icon-wrap{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--mat-sys-surface-container-highest)}.ps-bs__state-icon-wrap mat-icon{font-size:32px;width:32px;height:32px;color:var(--mat-sys-on-surface-variant)}.ps-bs__state-title{font:var(--mat-sys-title-medium);color:var(--mat-sys-on-surface)}.ps-bs__state-hint{font:var(--mat-sys-body-medium);color:var(--mat-sys-on-surface-variant);max-width:280px}.ps-bs__state button{margin-top:4px}.ps-bs__error-icon-wrap{background:color-mix(in srgb,var(--mat-sys-error) 12%,transparent)}.ps-bs__error-icon-wrap mat-icon{color:var(--mat-sys-error)}@keyframes ps-fade-in{0%{opacity:0}to{opacity:1}}.ps-bs__footer{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:16px 24px;gap:12px;z-index:2;background:var(--mat-sys-surface-container-high);border-top:1px solid var(--mat-sys-outline-variant)}.ps-bs__footer-count{font:var(--mat-sys-body-medium);color:var(--mat-sys-on-surface-variant);font-variant-numeric:tabular-nums;white-space:nowrap}.ps-bs__footer-actions{display:flex;gap:8px;align-items:center}.ps-bs__footer-actions button[matButton=filled]{min-width:96px;border-radius:9999px}@media (max-width: 600px){.cdk-global-overlay-wrapper:has(.ngx-paginated-select-panel){align-items:flex-end!important}.ngx-paginated-select-panel .mat-bottom-sheet-container{width:100vw;max-width:100vw;height:90vh!important;max-height:90vh!important;border-radius:24px 24px 0 0;border-bottom:none}.ps-bs__handle{display:flex}.ps-bs__header{padding:8px 16px 12px}.ps-bs__footer{padding:12px 16px}.ps-bs__options{padding:4px 8px}}@media (prefers-reduced-motion: reduce){.ps-bs__badge,.ps-bs__chip,.ps-bs__skeleton,.ps-bs__state{animation:none}.ps-bs__skeleton-avatar,.ps-bs__skeleton-line{animation:none;background:var(--mat-sys-surface-container-highest)}.ps-bs__loading-more-dot{animation:none;opacity:.7}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i11.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i4$2.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i14.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: "ngmodule", type: MatTooltipModule }, { kind: "ngmodule", type: MatBadgeModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: NgxPaginatedSelectBottomSheetComponent, isStandalone: true, selector: "ngx-paginated-select-bottom-sheet", ngImport: i0, template: "<div class=\"ps-bs\">\n\n  <!-- \u2500\u2500 Handle bar (mobile) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"ps-bs__handle\">\n    <div class=\"ps-bs__handle-bar\"></div>\n  </div>\n\n  <!-- \u2500\u2500 Header (pinned: title + search only) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"ps-bs__header\" [class.ps-bs__header--scrolled]=\"headerScrolled()\">\n    <div class=\"ps-bs__header-top\">\n      <div class=\"ps-bs__title-area\">\n        <span class=\"ps-bs__title\">{{ data.title }}</span>\n        @if (data.multiple && selectedCount() > 0) {\n          <span class=\"ps-bs__badge\">{{ selectedCount() }}</span>\n        }\n      </div>\n      <button mat-icon-button class=\"ps-bs__close-btn\" [attr.aria-label]=\"intl.closeButtonLabel\" (click)=\"close()\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n\n    <!-- Pill search -->\n    @if (data.showSearch) {\n      <div class=\"ps-bs__search\">\n        <mat-icon class=\"ps-bs__search-icon\">search</mat-icon>\n        <input\n          class=\"ps-bs__search-input\"\n          #searchInput\n          type=\"text\"\n          [value]=\"query() ?? ''\"\n          [placeholder]=\"data.searchPlaceholder\"\n          (input)=\"onQueryInput($event, bodyContainer)\"\n        />\n        @if (searchInput.value.length > 0) {\n          <button\n            class=\"ps-bs__search-clear\"\n            type=\"button\"\n            [attr.aria-label]=\"intl.clearSearchTooltip\"\n            (click)=\"clearQuery(bodyContainer); $event.stopPropagation()\"\n          >\n            <mat-icon>close</mat-icon>\n          </button>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- \u2500\u2500 Body (\u00DANICA zona de scroll: filtros + chips + select-all + lista) \u2500\u2500\u2500\u2500 -->\n  <div class=\"ps-bs__body\" #bodyContainer (scroll)=\"onScroll(bodyContainer)\">\n\n    <!-- Extra filters projection -->\n    @if (data.extraFiltersTemplate) {\n      <div class=\"ps-bs__extra-filters\">\n        <ng-container *ngTemplateOutlet=\"data.extraFiltersTemplate\" />\n      </div>\n    }\n\n    <!-- Selected chips (custom lightweight chips) -->\n    @if (data.multiple && selectedItems().length > 0) {\n      <div class=\"ps-bs__selected-chips\">\n        @for (item of selectedItems(); track item[data.config.valueKey]) {\n          <div class=\"ps-bs__chip\">\n            <span class=\"ps-bs__chip-label\">{{ getLabel(item) }}</span>\n            <button class=\"ps-bs__chip-remove\" type=\"button\" [attr.aria-label]=\"intl.clearSearchTooltip\" (click)=\"removeSelectedChip(item)\">\n              <mat-icon>close</mat-icon>\n            </button>\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Select all (sticky top of the scroll area) -->\n    @if (data.multiple && data.showSelectAll && options().length > 0) {\n      <div class=\"ps-bs__select-all\" matRipple (click)=\"toggleSelectAll()\">\n        <mat-checkbox\n          [checked]=\"allSelected()\"\n          [indeterminate]=\"someSelected()\"\n          (click)=\"$event.preventDefault()\"\n        />\n        <span class=\"ps-bs__select-all-label\">{{ data.selectAllLabel }}</span>\n      </div>\n    }\n\n    <!-- \u2500\u2500 Options list \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <div class=\"ps-bs__list\">\n\n      <!-- Skeleton loading (only for the first page) -->\n      @if (isInitialLoading()) {\n        @for (i of [1, 2, 3, 4, 5, 6]; track i) {\n          <div class=\"ps-bs__skeleton\">\n            <div class=\"ps-bs__skeleton-avatar\"></div>\n            <div class=\"ps-bs__skeleton-content\">\n              <div class=\"ps-bs__skeleton-line ps-bs__skeleton-line--title\"></div>\n              <div class=\"ps-bs__skeleton-line ps-bs__skeleton-line--subtitle\"></div>\n            </div>\n          </div>\n        }\n      }\n\n      <!-- Error state -->\n      @if (hasError() && !isLoading() && options().length === 0) {\n        <div class=\"ps-bs__state ps-bs__error\">\n          <div class=\"ps-bs__state-icon-wrap ps-bs__error-icon-wrap\">\n            <mat-icon>error_outline</mat-icon>\n          </div>\n          <div class=\"ps-bs__state-title\">{{ intl.paginatedSelectErrorTitle }}</div>\n          <div class=\"ps-bs__state-hint\">{{ intl.paginatedSelectErrorHint }}</div>\n          <button matButton=\"tonal\" (click)=\"retry()\">\n            <mat-icon>refresh</mat-icon>\n            {{ intl.paginatedSelectRetryLabel }}\n          </button>\n        </div>\n      }\n\n      <!-- Empty state -->\n      @if (!hasError() && options().length === 0 && !isLoading()) {\n        <div class=\"ps-bs__state ps-bs__empty\">\n          <div class=\"ps-bs__state-icon-wrap\">\n            <mat-icon>search_off</mat-icon>\n          </div>\n          <div class=\"ps-bs__state-title\">{{ data.noResultsMessage }}</div>\n          @if (query()) {\n            <div class=\"ps-bs__state-hint\">{{ intl.paginatedSelectNoResultsHint }}</div>\n            <button matButton (click)=\"clearQuery(bodyContainer)\">\n              {{ intl.paginatedSelectClearSearchLabel }}\n            </button>\n          }\n        </div>\n      }\n\n      <!-- Option rows -->\n      @for (item of options(); track item[data.config.valueKey]) {\n        @let disabled = data.config.disabled ? data.config.disabled(item) : false;\n        @let selected = isSelected(item);\n        @let avatarImg = getAvatarImage(item);\n\n        <div\n          class=\"ps-bs__option\"\n          [class.ps-bs__option--selected]=\"selected\"\n          [class.ps-bs__option--disabled]=\"disabled\"\n          matRipple\n          [matRippleDisabled]=\"disabled\"\n          (click)=\"toggleItem(item)\"\n          role=\"option\"\n          [attr.aria-selected]=\"selected\"\n          [attr.aria-disabled]=\"disabled\"\n        >\n          <!-- Avatar (al seleccionar se voltea a un check, estilo Gmail) -->\n          <div class=\"ps-bs__option-avatar\" [class.ps-bs__option-avatar--selected]=\"selected\">\n            @if (selected) {\n              <mat-icon class=\"ps-bs__option-avatar-check\">check</mat-icon>\n            } @else if (avatarImg) {\n              <img [src]=\"avatarImg\" [alt]=\"getLabel(item)\" (error)=\"onAvatarError(item)\" loading=\"lazy\" />\n            } @else if (data.config.avatarText) {\n              {{ getAvatarText(item) }}\n            } @else if (data.config.avatarIcon) {\n              <mat-icon>{{ data.config.avatarIcon }}</mat-icon>\n            } @else {\n              {{ getAvatarText(item) }}\n            }\n          </div>\n\n          <!-- Content -->\n          <div class=\"ps-bs__option-content\">\n            @if (data.optionTemplate) {\n              <ng-container *ngTemplateOutlet=\"data.optionTemplate; context: { $implicit: item }\" />\n            } @else {\n              <span class=\"ps-bs__option-label\">{{ getLabel(item) }}</span>\n              @if (data.config.subtitle) {\n                <span class=\"ps-bs__option-subtitle\">{{ data.config.subtitle(item) }}</span>\n              }\n            }\n          </div>\n\n          <!-- Check indicator -->\n          @if (data.multiple) {\n            <mat-checkbox [checked]=\"selected\" [disabled]=\"disabled\" (click)=\"$event.preventDefault()\" />\n          } @else if (selected) {\n            <mat-icon class=\"ps-bs__option-check\">check_circle</mat-icon>\n          }\n        </div>\n      }\n\n      <!-- Loading more (pagination) / end of list -->\n      @if (isLoadingMore()) {\n        <div class=\"ps-bs__loading-more\" aria-live=\"polite\">\n          <span class=\"ps-bs__loading-more-dot\"></span>\n          <span class=\"ps-bs__loading-more-dot\"></span>\n          <span class=\"ps-bs__loading-more-dot\"></span>\n          <span class=\"ps-bs__loading-more-text\">{{ intl.paginatedSelectLoadingMoreLabel }}</span>\n        </div>\n      } @else if (allLoaded() && options().length > 0) {\n        <div class=\"ps-bs__list-end\">{{ intl.paginatedSelectEndOfListLabel }}</div>\n      }\n    </div>\n  </div>\n\n  <!-- \u2500\u2500 Footer (ALWAYS VISIBLE \u2014 never scrolls) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"ps-bs__footer\">\n    <span class=\"ps-bs__footer-count\">\n      @if (data.multiple) {\n        {{ intl.getPaginatedSelectSelectedCountLabel(selectedCount(), total()) }}\n      } @else {\n        {{ intl.getPaginatedSelectResultsCountLabel(total()) }}\n      }\n    </span>\n\n    @if (data.multiple) {\n      <div class=\"ps-bs__footer-actions\">\n        @if (selectedCount() > 0) {\n          <button matButton (click)=\"reset()\">{{ data.resetLabel }}</button>\n        }\n        <button matButton=\"filled\" color=\"primary\" (click)=\"confirm()\">{{ data.confirmLabel }}</button>\n      </div>\n    }\n  </div>\n</div>\n", styles: [".cdk-global-overlay-wrapper:has(.ngx-paginated-select-panel){align-items:center!important;justify-content:center!important}.ngx-paginated-select-backdrop{background:color-mix(in srgb,var(--mat-sys-scrim, #000) 40%,transparent);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.ngx-paginated-select-panel .mat-bottom-sheet-container{padding:0!important;overflow:hidden!important;display:flex!important;flex-direction:column!important;width:min(640px,100vw - 48px);min-width:0;max-width:640px;height:min(86vh,760px)!important;max-height:min(86vh,760px)!important;border-radius:28px;background:var(--mat-sys-surface-container-high);border:1px solid color-mix(in srgb,var(--mat-sys-outline-variant) 60%,transparent);box-shadow:0 1px 3px #0000001f,0 8px 24px #00000024,0 24px 48px #0000001a!important}ngx-paginated-select-bottom-sheet{display:flex;flex-direction:column;flex:1 1 0;min-height:0;overflow:hidden;width:100%}.ps-bs{display:flex;flex-direction:column;height:100%;overflow:hidden}.ps-bs__handle{display:none;justify-content:center;padding:12px 0 4px;flex:0 0 auto}.ps-bs__handle-bar{width:32px;height:4px;border-radius:9999px;background:var(--mat-sys-outline-variant)}.ps-bs__header{flex:0 0 auto;padding:20px 24px 14px;display:flex;flex-direction:column;gap:14px;position:relative;z-index:2;transition:box-shadow .2s cubic-bezier(.2,0,0,1)}.ps-bs__header--scrolled{box-shadow:0 1px 0 0 var(--mat-sys-outline-variant),0 6px 14px -10px #00000059}.ps-bs__header-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.ps-bs__title-area{display:flex;align-items:center;gap:10px;flex:1;min-width:0}.ps-bs__title{font:var(--mat-sys-title-large);font-weight:600;color:var(--mat-sys-on-surface);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ps-bs__badge{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 7px;border-radius:9999px;font:var(--mat-sys-label-medium);font-weight:700;font-variant-numeric:tabular-nums;background:var(--mat-sys-primary);color:var(--mat-sys-on-primary);flex-shrink:0;animation:ps-badge-pop .3s cubic-bezier(.34,1.56,.64,1)}@keyframes ps-badge-pop{0%{transform:scale(0)}to{transform:scale(1)}}.ps-bs__close-btn{flex:0 0 auto}.ps-bs__search{display:flex;align-items:center;gap:10px;height:48px;padding:0 6px 0 16px;background:var(--mat-sys-surface-container-highest);border-radius:9999px;border:1.5px solid transparent;transition:background .2s cubic-bezier(.2,0,0,1),border-color .2s cubic-bezier(.2,0,0,1),box-shadow .2s cubic-bezier(.2,0,0,1)}.ps-bs__search:hover{background:color-mix(in srgb,var(--mat-sys-on-surface) 4%,var(--mat-sys-surface-container-highest))}.ps-bs__search:focus-within{background:var(--mat-sys-surface);border-color:var(--mat-sys-primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--mat-sys-primary) 12%,transparent)}.ps-bs__search-icon{color:var(--mat-sys-on-surface-variant);font-size:22px;width:22px;height:22px;flex-shrink:0;transition:color .2s cubic-bezier(.2,0,0,1)}.ps-bs__search:focus-within .ps-bs__search-icon{color:var(--mat-sys-primary)}.ps-bs__search-input{flex:1;border:none;outline:none;background:transparent;font:var(--mat-sys-body-large);font-family:inherit;color:var(--mat-sys-on-surface);min-width:0}.ps-bs__search-input::placeholder{color:var(--mat-sys-on-surface-variant)}.ps-bs__search-clear{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:none;background:transparent;cursor:pointer;color:var(--mat-sys-on-surface-variant);transition:background .15s cubic-bezier(.2,0,0,1);flex-shrink:0}.ps-bs__search-clear:hover{background:color-mix(in srgb,var(--mat-sys-on-surface) 10%,transparent)}.ps-bs__search-clear mat-icon{font-size:20px;width:20px;height:20px}.ps-bs__body{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:6px 10px 8px;display:flex;flex-direction:column}.ps-bs__body>*{flex-shrink:0}.ps-bs__extra-filters{width:100%;padding:10px 6px 6px}.ps-bs__selected-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 6px 6px}.ps-bs__chip{display:inline-flex;align-items:center;gap:2px;height:32px;padding:0 4px 0 12px;border-radius:9999px;background:var(--mat-sys-secondary-container);color:var(--mat-sys-on-secondary-container);font:var(--mat-sys-label-large);white-space:nowrap;max-width:200px;animation:ps-chip-in .2s cubic-bezier(.2,0,0,1)}.ps-bs__chip-label{overflow:hidden;text-overflow:ellipsis}.ps-bs__chip-remove{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;border:none;background:transparent;cursor:pointer;color:inherit;opacity:.55;transition:opacity .15s,background .15s}.ps-bs__chip-remove:hover{opacity:1;background:color-mix(in srgb,var(--mat-sys-on-secondary-container) 12%,transparent)}.ps-bs__chip-remove mat-icon{font-size:16px;width:16px;height:16px}@keyframes ps-chip-in{0%{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}.ps-bs__select-all.ps-bs__select-all{position:sticky;top:-6px;z-index:3;display:flex;align-items:center;gap:12px;margin:0 -10px;padding:8px 24px;cursor:pointer;background:var(--mat-sys-surface-container-high);border-bottom:1px solid var(--mat-sys-outline-variant);transition:background .15s cubic-bezier(.2,0,0,1)}.ps-bs__select-all.ps-bs__select-all:hover{background:color-mix(in srgb,var(--mat-sys-on-surface) 5%,var(--mat-sys-surface-container-high))}.ps-bs__select-all.ps-bs__select-all-label{font:var(--mat-sys-label-large);color:var(--mat-sys-on-surface)}.ps-bs__list{flex:1 1 auto}.ps-bs__option{display:flex;align-items:center;gap:14px;padding:8px 12px;margin:2px 0;cursor:pointer;border-radius:16px;min-height:56px;transition:background .15s cubic-bezier(.2,0,0,1)}.ps-bs__option:hover:not(.ps-bs__option--disabled){background:color-mix(in srgb,var(--mat-sys-on-surface) 8%,transparent)}.ps-bs__option:active:not(.ps-bs__option--disabled){background:color-mix(in srgb,var(--mat-sys-on-surface) 12%,transparent)}.ps-bs__option--selected{background:color-mix(in srgb,var(--mat-sys-primary) 10%,transparent)}.ps-bs__option--selected:hover{background:color-mix(in srgb,var(--mat-sys-primary) 14%,transparent)}.ps-bs__option--disabled{opacity:.38;cursor:not-allowed}.ps-bs__option .mat-ripple-element{background:color-mix(in srgb,var(--mat-sys-primary) 12%,transparent)}.ps-bs__option .mat-mdc-checkbox{margin-left:auto;margin-right:-8px;flex-shrink:0}.ps-bs__option-avatar{width:40px;height:40px;min-width:40px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;font:var(--mat-sys-label-large);font-weight:600;background:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mat-sys-on-surface) 8%,transparent);transition:box-shadow .18s cubic-bezier(.2,0,0,1)}.ps-bs__option-avatar img{width:100%;height:100%;object-fit:cover;display:block}.ps-bs__option-avatar mat-icon{font-size:20px;width:20px;height:20px}.ps-bs__option-avatar--selected{background:var(--mat-sys-primary);color:var(--mat-sys-on-primary);box-shadow:none;animation:ps-avatar-flip .25s cubic-bezier(.05,.7,.1,1)}.ps-bs__option-avatar-check{color:var(--mat-sys-on-primary)}@keyframes ps-avatar-flip{0%{transform:scale(.6) rotate(-30deg);opacity:.4}to{transform:scale(1) rotate(0);opacity:1}}.ps-bs__option-content{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}.ps-bs__option-label{font:var(--mat-sys-body-large);color:var(--mat-sys-on-surface);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ps-bs__option--selected .ps-bs__option-label{font-weight:600}.ps-bs__option-subtitle{font:var(--mat-sys-body-small);color:var(--mat-sys-on-surface-variant);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ps-bs__option-check{color:var(--mat-sys-primary);font-size:22px;width:22px;height:22px;margin-left:auto;flex-shrink:0}.ps-bs__skeleton{display:flex;align-items:center;gap:14px;padding:8px 12px;margin:2px 0;min-height:56px;border-radius:16px;opacity:0;animation:ps-skeleton-in .4s ease forwards}.ps-bs__skeleton-avatar{width:40px;height:40px;min-width:40px;border-radius:50%;background:linear-gradient(90deg,var(--mat-sys-surface-container) 25%,var(--mat-sys-surface-container-highest) 37%,var(--mat-sys-surface-container) 63%);background-size:400% 100%;animation:ps-shimmer 1.4s ease-in-out infinite}.ps-bs__skeleton-content{flex:1;display:flex;flex-direction:column;gap:10px}.ps-bs__skeleton-line{height:12px;border-radius:6px;background:linear-gradient(90deg,var(--mat-sys-surface-container) 25%,var(--mat-sys-surface-container-highest) 37%,var(--mat-sys-surface-container) 63%);background-size:400% 100%;animation:ps-shimmer 1.4s ease-in-out infinite}.ps-bs__skeleton-line--title{width:60%}.ps-bs__skeleton-line--subtitle{width:38%;height:10px}.ps-bs__skeleton:nth-child(1){animation-delay:0ms}.ps-bs__skeleton:nth-child(2){animation-delay:60ms}.ps-bs__skeleton:nth-child(3){animation-delay:.12s}.ps-bs__skeleton:nth-child(4){animation-delay:.18s}.ps-bs__skeleton:nth-child(5){animation-delay:.24s}.ps-bs__skeleton:nth-child(6){animation-delay:.3s}@keyframes ps-skeleton-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes ps-shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}.ps-bs__loading-more{display:flex;align-items:center;justify-content:center;gap:6px;padding:18px;color:var(--mat-sys-on-surface-variant);font:var(--mat-sys-body-small)}.ps-bs__loading-more-dot{width:6px;height:6px;border-radius:50%;background:var(--mat-sys-primary);animation:ps-bounce 1s ease-in-out infinite}.ps-bs__loading-more-dot:nth-child(2){animation-delay:.15s}.ps-bs__loading-more-dot:nth-child(3){animation-delay:.3s}.ps-bs__loading-more-text{margin-left:6px}@keyframes ps-bounce{0%,80%,to{transform:translateY(0);opacity:.4}40%{transform:translateY(-4px);opacity:1}}.ps-bs__list-end{text-align:center;padding:16px;font:var(--mat-sys-body-small);color:var(--mat-sys-on-surface-variant);opacity:.7}.ps-bs__state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:56px 32px;gap:12px;text-align:center;animation:ps-fade-in .2s ease}.ps-bs__state-icon-wrap{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--mat-sys-surface-container-highest)}.ps-bs__state-icon-wrap mat-icon{font-size:32px;width:32px;height:32px;color:var(--mat-sys-on-surface-variant)}.ps-bs__state-title{font:var(--mat-sys-title-medium);color:var(--mat-sys-on-surface)}.ps-bs__state-hint{font:var(--mat-sys-body-medium);color:var(--mat-sys-on-surface-variant);max-width:280px}.ps-bs__state button{margin-top:4px}.ps-bs__error-icon-wrap{background:color-mix(in srgb,var(--mat-sys-error) 12%,transparent)}.ps-bs__error-icon-wrap mat-icon{color:var(--mat-sys-error)}@keyframes ps-fade-in{0%{opacity:0}to{opacity:1}}.ps-bs__footer{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:16px 24px;gap:12px;z-index:2;background:var(--mat-sys-surface-container-high);border-top:1px solid var(--mat-sys-outline-variant)}.ps-bs__footer-count{font:var(--mat-sys-body-medium);color:var(--mat-sys-on-surface-variant);font-variant-numeric:tabular-nums;white-space:nowrap}.ps-bs__footer-actions{display:flex;gap:8px;align-items:center}.ps-bs__footer-actions button[matButton=filled]{min-width:96px;border-radius:9999px}@media (max-width: 600px){.cdk-global-overlay-wrapper:has(.ngx-paginated-select-panel){align-items:flex-end!important}.ngx-paginated-select-panel .mat-bottom-sheet-container{width:100vw;max-width:100vw;height:90vh!important;max-height:90vh!important;border-radius:24px 24px 0 0;border-bottom:none}.ps-bs__handle{display:flex}.ps-bs__header{padding:8px 16px 12px}.ps-bs__footer{padding:12px 16px}.ps-bs__body{padding:4px 8px 6px}.ps-bs__select-all{margin:0 -8px}}@media (prefers-reduced-motion: reduce){.ps-bs__badge,.ps-bs__chip,.ps-bs__skeleton,.ps-bs__option-avatar--selected,.ps-bs__state{animation:none}.ps-bs__skeleton-avatar,.ps-bs__skeleton-line{animation:none;background:var(--mat-sys-surface-container-highest)}.ps-bs__loading-more-dot{animation:none;opacity:.7}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i11.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i4$2.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i14.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: "ngmodule", type: MatTooltipModule }, { kind: "ngmodule", type: MatBadgeModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxPaginatedSelectBottomSheetComponent, decorators: [{
             type: Component,
@@ -3487,7 +3487,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         MatCheckboxModule,
                         MatTooltipModule,
                         MatBadgeModule,
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ps-bs\">\n\n  <!-- \u2500\u2500 Handle bar (mobile) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"ps-bs__handle\">\n    <div class=\"ps-bs__handle-bar\"></div>\n  </div>\n\n  <!-- \u2500\u2500 Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"ps-bs__header\" [class.ps-bs__header--scrolled]=\"headerScrolled()\">\n    <div class=\"ps-bs__header-top\">\n      <div class=\"ps-bs__title-area\">\n        <span class=\"ps-bs__title\">{{ data.title }}</span>\n        @if (data.multiple && selectedCount() > 0) {\n          <span class=\"ps-bs__badge\">{{ selectedCount() }}</span>\n        }\n      </div>\n      <button mat-icon-button class=\"ps-bs__close-btn\" [attr.aria-label]=\"intl.closeButtonLabel\" (click)=\"close()\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n\n    <!-- Pill search -->\n    @if (data.showSearch) {\n      <div class=\"ps-bs__search\">\n        <mat-icon class=\"ps-bs__search-icon\">search</mat-icon>\n        <input\n          class=\"ps-bs__search-input\"\n          #searchInput\n          type=\"text\"\n          [value]=\"query() ?? ''\"\n          [placeholder]=\"data.searchPlaceholder\"\n          (input)=\"onQueryInput($event, optionsContainer)\"\n        />\n        @if (searchInput.value.length > 0) {\n          <button\n            class=\"ps-bs__search-clear\"\n            type=\"button\"\n            [attr.aria-label]=\"intl.clearSearchTooltip\"\n            (click)=\"clearQuery(optionsContainer); $event.stopPropagation()\"\n          >\n            <mat-icon>close</mat-icon>\n          </button>\n        }\n      </div>\n    }\n\n    <!-- Extra filters projection -->\n    @if (data.extraFiltersTemplate) {\n      <div class=\"ps-bs__extra-filters\">\n        <ng-container *ngTemplateOutlet=\"data.extraFiltersTemplate\" />\n      </div>\n    }\n\n    <!-- Selected chips (custom lightweight chips) -->\n    @if (data.multiple && selectedItems().length > 0) {\n      <div class=\"ps-bs__selected-chips\">\n        @for (item of selectedItems(); track item[data.config.valueKey]) {\n          <div class=\"ps-bs__chip\">\n            <span class=\"ps-bs__chip-label\">{{ getLabel(item) }}</span>\n            <button class=\"ps-bs__chip-remove\" type=\"button\" [attr.aria-label]=\"intl.clearSearchTooltip\" (click)=\"removeSelectedChip(item)\">\n              <mat-icon>close</mat-icon>\n            </button>\n          </div>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- \u2500\u2500 Select all (multiple mode) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  @if (data.multiple && data.showSelectAll && options().length > 0) {\n    <div class=\"ps-bs__select-all\" matRipple (click)=\"toggleSelectAll()\">\n      <mat-checkbox\n        [checked]=\"allSelected()\"\n        [indeterminate]=\"someSelected()\"\n        (click)=\"$event.preventDefault()\"\n      />\n      <span class=\"ps-bs__select-all-label\">{{ data.selectAllLabel }}</span>\n    </div>\n  }\n\n  <!-- \u2500\u2500 Options (scrollable, takes remaining space) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"ps-bs__options\" #optionsContainer (scroll)=\"onScroll(optionsContainer)\">\n\n    <!-- Skeleton loading (only for the first page) -->\n    @if (isInitialLoading()) {\n      @for (i of [1, 2, 3, 4, 5, 6]; track i) {\n        <div class=\"ps-bs__skeleton\">\n          <div class=\"ps-bs__skeleton-avatar\"></div>\n          <div class=\"ps-bs__skeleton-content\">\n            <div class=\"ps-bs__skeleton-line ps-bs__skeleton-line--title\"></div>\n            <div class=\"ps-bs__skeleton-line ps-bs__skeleton-line--subtitle\"></div>\n          </div>\n        </div>\n      }\n    }\n\n    <!-- Error state -->\n    @if (hasError() && !isLoading() && options().length === 0) {\n      <div class=\"ps-bs__state ps-bs__error\">\n        <div class=\"ps-bs__state-icon-wrap ps-bs__error-icon-wrap\">\n          <mat-icon>error_outline</mat-icon>\n        </div>\n        <div class=\"ps-bs__state-title\">{{ intl.paginatedSelectErrorTitle }}</div>\n        <div class=\"ps-bs__state-hint\">{{ intl.paginatedSelectErrorHint }}</div>\n        <button matButton=\"tonal\" (click)=\"retry()\">\n          <mat-icon>refresh</mat-icon>\n          {{ intl.paginatedSelectRetryLabel }}\n        </button>\n      </div>\n    }\n\n    <!-- Empty state -->\n    @if (!hasError() && options().length === 0 && !isLoading()) {\n      <div class=\"ps-bs__state ps-bs__empty\">\n        <div class=\"ps-bs__state-icon-wrap\">\n          <mat-icon>search_off</mat-icon>\n        </div>\n        <div class=\"ps-bs__state-title\">{{ data.noResultsMessage }}</div>\n        @if (query()) {\n          <div class=\"ps-bs__state-hint\">{{ intl.paginatedSelectNoResultsHint }}</div>\n          <button matButton (click)=\"clearQuery(optionsContainer)\">\n            {{ intl.paginatedSelectClearSearchLabel }}\n          </button>\n        }\n      </div>\n    }\n\n    <!-- Option rows -->\n    @for (item of options(); track item[data.config.valueKey]) {\n      @let disabled = data.config.disabled ? data.config.disabled(item) : false;\n      @let selected = isSelected(item);\n      @let avatarImg = getAvatarImage(item);\n\n      <div\n        class=\"ps-bs__option\"\n        [class.ps-bs__option--selected]=\"selected\"\n        [class.ps-bs__option--disabled]=\"disabled\"\n        matRipple\n        [matRippleDisabled]=\"disabled\"\n        (click)=\"toggleItem(item)\"\n        role=\"option\"\n        [attr.aria-selected]=\"selected\"\n        [attr.aria-disabled]=\"disabled\"\n      >\n        <!-- Avatar -->\n        <div class=\"ps-bs__option-avatar\" [class.ps-bs__option-avatar--selected]=\"selected\">\n          @if (avatarImg) {\n            <img [src]=\"avatarImg\" [alt]=\"getLabel(item)\" (error)=\"onAvatarError(item)\" loading=\"lazy\" />\n          } @else if (data.config.avatarText) {\n            {{ getAvatarText(item) }}\n          } @else if (data.config.avatarIcon) {\n            <mat-icon>{{ data.config.avatarIcon }}</mat-icon>\n          } @else {\n            {{ getAvatarText(item) }}\n          }\n        </div>\n\n        <!-- Content -->\n        <div class=\"ps-bs__option-content\">\n          @if (data.optionTemplate) {\n            <ng-container *ngTemplateOutlet=\"data.optionTemplate; context: { $implicit: item }\" />\n          } @else {\n            <span class=\"ps-bs__option-label\">{{ getLabel(item) }}</span>\n            @if (data.config.subtitle) {\n              <span class=\"ps-bs__option-subtitle\">{{ data.config.subtitle(item) }}</span>\n            }\n          }\n        </div>\n\n        <!-- Check indicator -->\n        @if (data.multiple) {\n          <mat-checkbox [checked]=\"selected\" [disabled]=\"disabled\" (click)=\"$event.preventDefault()\" />\n        } @else if (selected) {\n          <mat-icon class=\"ps-bs__option-check\">check_circle</mat-icon>\n        }\n      </div>\n    }\n\n    <!-- Loading more (pagination) / end of list -->\n    @if (isLoadingMore()) {\n      <div class=\"ps-bs__loading-more\" aria-live=\"polite\">\n        <span class=\"ps-bs__loading-more-dot\"></span>\n        <span class=\"ps-bs__loading-more-dot\"></span>\n        <span class=\"ps-bs__loading-more-dot\"></span>\n        <span class=\"ps-bs__loading-more-text\">{{ intl.paginatedSelectLoadingMoreLabel }}</span>\n      </div>\n    } @else if (allLoaded() && options().length > 0) {\n      <div class=\"ps-bs__list-end\">{{ intl.paginatedSelectEndOfListLabel }}</div>\n    }\n  </div>\n\n  <!-- \u2500\u2500 Footer (ALWAYS VISIBLE \u2014 never scrolls) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"ps-bs__footer\">\n    <span class=\"ps-bs__footer-count\">\n      @if (data.multiple) {\n        {{ intl.getPaginatedSelectSelectedCountLabel(selectedCount(), total()) }}\n      } @else {\n        {{ intl.getPaginatedSelectResultsCountLabel(total()) }}\n      }\n    </span>\n\n    @if (data.multiple) {\n      <div class=\"ps-bs__footer-actions\">\n        @if (selectedCount() > 0) {\n          <button matButton (click)=\"reset()\">{{ data.resetLabel }}</button>\n        }\n        <button matButton=\"filled\" color=\"primary\" (click)=\"confirm()\">{{ data.confirmLabel }}</button>\n      </div>\n    }\n  </div>\n</div>\n", styles: [".cdk-global-overlay-wrapper:has(.ngx-paginated-select-panel){align-items:center!important;justify-content:center!important}.ngx-paginated-select-backdrop{background:color-mix(in srgb,var(--mat-sys-scrim, #000) 40%,transparent);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.ngx-paginated-select-panel .mat-bottom-sheet-container{padding:0!important;overflow:hidden!important;display:flex!important;flex-direction:column!important;width:min(560px,100vw - 48px);min-width:0;max-width:560px;height:min(72vh,620px)!important;max-height:min(72vh,620px)!important;border-radius:28px;background:var(--mat-sys-surface-container-high);border:1px solid color-mix(in srgb,var(--mat-sys-outline-variant) 60%,transparent);box-shadow:0 1px 3px #0000001f,0 8px 24px #00000024,0 24px 48px #0000001a!important}ngx-paginated-select-bottom-sheet{display:flex;flex-direction:column;flex:1 1 0;min-height:0;overflow:hidden;width:100%}.ps-bs{display:flex;flex-direction:column;height:100%;overflow:hidden}.ps-bs__handle{display:none;justify-content:center;padding:12px 0 4px;flex:0 0 auto}.ps-bs__handle-bar{width:32px;height:4px;border-radius:9999px;background:var(--mat-sys-outline-variant)}.ps-bs__header{flex:0 0 auto;padding:20px 24px 16px;display:flex;flex-direction:column;gap:16px;position:relative;z-index:2;transition:box-shadow .2s cubic-bezier(.2,0,0,1)}.ps-bs__header--scrolled{box-shadow:0 1px 0 0 var(--mat-sys-outline-variant),0 6px 14px -10px #00000059}.ps-bs__header-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.ps-bs__title-area{display:flex;align-items:center;gap:10px;flex:1;min-width:0}.ps-bs__title{font:var(--mat-sys-title-large);font-weight:600;color:var(--mat-sys-on-surface);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ps-bs__badge{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 7px;border-radius:9999px;font:var(--mat-sys-label-medium);font-weight:700;font-variant-numeric:tabular-nums;background:var(--mat-sys-primary);color:var(--mat-sys-on-primary);flex-shrink:0;animation:ps-badge-pop .3s cubic-bezier(.34,1.56,.64,1)}@keyframes ps-badge-pop{0%{transform:scale(0)}to{transform:scale(1)}}.ps-bs__close-btn{flex:0 0 auto}.ps-bs__search{display:flex;align-items:center;gap:10px;height:48px;padding:0 6px 0 16px;background:var(--mat-sys-surface-container-highest);border-radius:9999px;border:1.5px solid transparent;transition:background .2s cubic-bezier(.2,0,0,1),border-color .2s cubic-bezier(.2,0,0,1),box-shadow .2s cubic-bezier(.2,0,0,1)}.ps-bs__search:hover{background:color-mix(in srgb,var(--mat-sys-on-surface) 4%,var(--mat-sys-surface-container-highest))}.ps-bs__search:focus-within{background:var(--mat-sys-surface);border-color:var(--mat-sys-primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--mat-sys-primary) 12%,transparent)}.ps-bs__search-icon{color:var(--mat-sys-on-surface-variant);font-size:22px;width:22px;height:22px;flex-shrink:0;transition:color .2s cubic-bezier(.2,0,0,1)}.ps-bs__search:focus-within .ps-bs__search-icon{color:var(--mat-sys-primary)}.ps-bs__search-input{flex:1;border:none;outline:none;background:transparent;font:var(--mat-sys-body-large);font-family:inherit;color:var(--mat-sys-on-surface);min-width:0}.ps-bs__search-input::placeholder{color:var(--mat-sys-on-surface-variant)}.ps-bs__search-clear{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:none;background:transparent;cursor:pointer;color:var(--mat-sys-on-surface-variant);transition:background .15s cubic-bezier(.2,0,0,1);flex-shrink:0}.ps-bs__search-clear:hover{background:color-mix(in srgb,var(--mat-sys-on-surface) 10%,transparent)}.ps-bs__search-clear mat-icon{font-size:20px;width:20px;height:20px}.ps-bs__extra-filters{width:100%}.ps-bs__selected-chips{display:flex;flex-wrap:wrap;gap:8px;max-height:76px;overflow-y:auto;padding:4px 0 2px}.ps-bs__chip{display:inline-flex;align-items:center;gap:2px;height:32px;padding:0 4px 0 12px;border-radius:9999px;background:var(--mat-sys-secondary-container);color:var(--mat-sys-on-secondary-container);font:var(--mat-sys-label-large);white-space:nowrap;max-width:200px;animation:ps-chip-in .2s cubic-bezier(.2,0,0,1)}.ps-bs__chip-label{overflow:hidden;text-overflow:ellipsis}.ps-bs__chip-remove{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;border:none;background:transparent;cursor:pointer;color:inherit;opacity:.55;transition:opacity .15s,background .15s}.ps-bs__chip-remove:hover{opacity:1;background:color-mix(in srgb,var(--mat-sys-on-secondary-container) 12%,transparent)}.ps-bs__chip-remove mat-icon{font-size:16px;width:16px;height:16px}@keyframes ps-chip-in{0%{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}.ps-bs__select-all{flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:8px 24px;cursor:pointer;border-bottom:1px solid var(--mat-sys-outline-variant);transition:background .15s cubic-bezier(.2,0,0,1)}.ps-bs__select-all:hover{background:color-mix(in srgb,var(--mat-sys-on-surface) 5%,transparent)}.ps-bs__select-all-label{font:var(--mat-sys-label-large);color:var(--mat-sys-on-surface)}.ps-bs__options{flex:1 1 0;min-height:0;overflow-y:auto;padding:6px 10px}.ps-bs__option{display:flex;align-items:center;gap:14px;padding:8px 12px;margin:2px 0;cursor:pointer;border-radius:16px;min-height:56px;transition:background .15s cubic-bezier(.2,0,0,1)}.ps-bs__option:hover:not(.ps-bs__option--disabled){background:color-mix(in srgb,var(--mat-sys-on-surface) 8%,transparent)}.ps-bs__option:active:not(.ps-bs__option--disabled){background:color-mix(in srgb,var(--mat-sys-on-surface) 12%,transparent)}.ps-bs__option--selected{background:color-mix(in srgb,var(--mat-sys-primary) 8%,transparent);box-shadow:inset 3px 0 0 0 var(--mat-sys-primary)}.ps-bs__option--selected:hover{background:color-mix(in srgb,var(--mat-sys-primary) 12%,transparent)}.ps-bs__option--disabled{opacity:.38;cursor:not-allowed}.ps-bs__option .mat-ripple-element{background:color-mix(in srgb,var(--mat-sys-primary) 12%,transparent)}.ps-bs__option .mat-mdc-checkbox{margin-left:auto;margin-right:-8px;flex-shrink:0}.ps-bs__option-avatar{width:40px;height:40px;min-width:40px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;font:var(--mat-sys-label-large);font-weight:600;background:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mat-sys-on-surface) 8%,transparent);transition:box-shadow .18s cubic-bezier(.2,0,0,1)}.ps-bs__option-avatar img{width:100%;height:100%;object-fit:cover;display:block}.ps-bs__option-avatar mat-icon{font-size:20px;width:20px;height:20px}.ps-bs__option-avatar--selected{box-shadow:0 0 0 2px var(--mat-sys-primary),0 0 0 4px var(--mat-sys-surface-container-high)}.ps-bs__option-content{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}.ps-bs__option-label{font:var(--mat-sys-body-large);color:var(--mat-sys-on-surface);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ps-bs__option--selected .ps-bs__option-label{font-weight:600}.ps-bs__option-subtitle{font:var(--mat-sys-body-small);color:var(--mat-sys-on-surface-variant);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ps-bs__option-check{color:var(--mat-sys-primary);font-size:22px;width:22px;height:22px;margin-left:auto;flex-shrink:0}.ps-bs__skeleton{display:flex;align-items:center;gap:14px;padding:8px 12px;margin:2px 0;min-height:56px;border-radius:16px;opacity:0;animation:ps-skeleton-in .4s ease forwards}.ps-bs__skeleton-avatar{width:40px;height:40px;min-width:40px;border-radius:50%;background:linear-gradient(90deg,var(--mat-sys-surface-container) 25%,var(--mat-sys-surface-container-highest) 37%,var(--mat-sys-surface-container) 63%);background-size:400% 100%;animation:ps-shimmer 1.4s ease-in-out infinite}.ps-bs__skeleton-content{flex:1;display:flex;flex-direction:column;gap:10px}.ps-bs__skeleton-line{height:12px;border-radius:6px;background:linear-gradient(90deg,var(--mat-sys-surface-container) 25%,var(--mat-sys-surface-container-highest) 37%,var(--mat-sys-surface-container) 63%);background-size:400% 100%;animation:ps-shimmer 1.4s ease-in-out infinite}.ps-bs__skeleton-line--title{width:60%}.ps-bs__skeleton-line--subtitle{width:38%;height:10px}.ps-bs__skeleton:nth-child(1){animation-delay:0ms}.ps-bs__skeleton:nth-child(2){animation-delay:60ms}.ps-bs__skeleton:nth-child(3){animation-delay:.12s}.ps-bs__skeleton:nth-child(4){animation-delay:.18s}.ps-bs__skeleton:nth-child(5){animation-delay:.24s}.ps-bs__skeleton:nth-child(6){animation-delay:.3s}@keyframes ps-skeleton-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes ps-shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}.ps-bs__loading-more{display:flex;align-items:center;justify-content:center;gap:6px;padding:18px;color:var(--mat-sys-on-surface-variant);font:var(--mat-sys-body-small)}.ps-bs__loading-more-dot{width:6px;height:6px;border-radius:50%;background:var(--mat-sys-primary);animation:ps-bounce 1s ease-in-out infinite}.ps-bs__loading-more-dot:nth-child(2){animation-delay:.15s}.ps-bs__loading-more-dot:nth-child(3){animation-delay:.3s}.ps-bs__loading-more-text{margin-left:6px}@keyframes ps-bounce{0%,80%,to{transform:translateY(0);opacity:.4}40%{transform:translateY(-4px);opacity:1}}.ps-bs__list-end{text-align:center;padding:16px;font:var(--mat-sys-body-small);color:var(--mat-sys-on-surface-variant);opacity:.7}.ps-bs__state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:56px 32px;gap:12px;text-align:center;animation:ps-fade-in .2s ease}.ps-bs__state-icon-wrap{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--mat-sys-surface-container-highest)}.ps-bs__state-icon-wrap mat-icon{font-size:32px;width:32px;height:32px;color:var(--mat-sys-on-surface-variant)}.ps-bs__state-title{font:var(--mat-sys-title-medium);color:var(--mat-sys-on-surface)}.ps-bs__state-hint{font:var(--mat-sys-body-medium);color:var(--mat-sys-on-surface-variant);max-width:280px}.ps-bs__state button{margin-top:4px}.ps-bs__error-icon-wrap{background:color-mix(in srgb,var(--mat-sys-error) 12%,transparent)}.ps-bs__error-icon-wrap mat-icon{color:var(--mat-sys-error)}@keyframes ps-fade-in{0%{opacity:0}to{opacity:1}}.ps-bs__footer{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:16px 24px;gap:12px;z-index:2;background:var(--mat-sys-surface-container-high);border-top:1px solid var(--mat-sys-outline-variant)}.ps-bs__footer-count{font:var(--mat-sys-body-medium);color:var(--mat-sys-on-surface-variant);font-variant-numeric:tabular-nums;white-space:nowrap}.ps-bs__footer-actions{display:flex;gap:8px;align-items:center}.ps-bs__footer-actions button[matButton=filled]{min-width:96px;border-radius:9999px}@media (max-width: 600px){.cdk-global-overlay-wrapper:has(.ngx-paginated-select-panel){align-items:flex-end!important}.ngx-paginated-select-panel .mat-bottom-sheet-container{width:100vw;max-width:100vw;height:90vh!important;max-height:90vh!important;border-radius:24px 24px 0 0;border-bottom:none}.ps-bs__handle{display:flex}.ps-bs__header{padding:8px 16px 12px}.ps-bs__footer{padding:12px 16px}.ps-bs__options{padding:4px 8px}}@media (prefers-reduced-motion: reduce){.ps-bs__badge,.ps-bs__chip,.ps-bs__skeleton,.ps-bs__state{animation:none}.ps-bs__skeleton-avatar,.ps-bs__skeleton-line{animation:none;background:var(--mat-sys-surface-container-highest)}.ps-bs__loading-more-dot{animation:none;opacity:.7}}\n"] }]
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ps-bs\">\n\n  <!-- \u2500\u2500 Handle bar (mobile) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"ps-bs__handle\">\n    <div class=\"ps-bs__handle-bar\"></div>\n  </div>\n\n  <!-- \u2500\u2500 Header (pinned: title + search only) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"ps-bs__header\" [class.ps-bs__header--scrolled]=\"headerScrolled()\">\n    <div class=\"ps-bs__header-top\">\n      <div class=\"ps-bs__title-area\">\n        <span class=\"ps-bs__title\">{{ data.title }}</span>\n        @if (data.multiple && selectedCount() > 0) {\n          <span class=\"ps-bs__badge\">{{ selectedCount() }}</span>\n        }\n      </div>\n      <button mat-icon-button class=\"ps-bs__close-btn\" [attr.aria-label]=\"intl.closeButtonLabel\" (click)=\"close()\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n\n    <!-- Pill search -->\n    @if (data.showSearch) {\n      <div class=\"ps-bs__search\">\n        <mat-icon class=\"ps-bs__search-icon\">search</mat-icon>\n        <input\n          class=\"ps-bs__search-input\"\n          #searchInput\n          type=\"text\"\n          [value]=\"query() ?? ''\"\n          [placeholder]=\"data.searchPlaceholder\"\n          (input)=\"onQueryInput($event, bodyContainer)\"\n        />\n        @if (searchInput.value.length > 0) {\n          <button\n            class=\"ps-bs__search-clear\"\n            type=\"button\"\n            [attr.aria-label]=\"intl.clearSearchTooltip\"\n            (click)=\"clearQuery(bodyContainer); $event.stopPropagation()\"\n          >\n            <mat-icon>close</mat-icon>\n          </button>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- \u2500\u2500 Body (\u00DANICA zona de scroll: filtros + chips + select-all + lista) \u2500\u2500\u2500\u2500 -->\n  <div class=\"ps-bs__body\" #bodyContainer (scroll)=\"onScroll(bodyContainer)\">\n\n    <!-- Extra filters projection -->\n    @if (data.extraFiltersTemplate) {\n      <div class=\"ps-bs__extra-filters\">\n        <ng-container *ngTemplateOutlet=\"data.extraFiltersTemplate\" />\n      </div>\n    }\n\n    <!-- Selected chips (custom lightweight chips) -->\n    @if (data.multiple && selectedItems().length > 0) {\n      <div class=\"ps-bs__selected-chips\">\n        @for (item of selectedItems(); track item[data.config.valueKey]) {\n          <div class=\"ps-bs__chip\">\n            <span class=\"ps-bs__chip-label\">{{ getLabel(item) }}</span>\n            <button class=\"ps-bs__chip-remove\" type=\"button\" [attr.aria-label]=\"intl.clearSearchTooltip\" (click)=\"removeSelectedChip(item)\">\n              <mat-icon>close</mat-icon>\n            </button>\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Select all (sticky top of the scroll area) -->\n    @if (data.multiple && data.showSelectAll && options().length > 0) {\n      <div class=\"ps-bs__select-all\" matRipple (click)=\"toggleSelectAll()\">\n        <mat-checkbox\n          [checked]=\"allSelected()\"\n          [indeterminate]=\"someSelected()\"\n          (click)=\"$event.preventDefault()\"\n        />\n        <span class=\"ps-bs__select-all-label\">{{ data.selectAllLabel }}</span>\n      </div>\n    }\n\n    <!-- \u2500\u2500 Options list \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <div class=\"ps-bs__list\">\n\n      <!-- Skeleton loading (only for the first page) -->\n      @if (isInitialLoading()) {\n        @for (i of [1, 2, 3, 4, 5, 6]; track i) {\n          <div class=\"ps-bs__skeleton\">\n            <div class=\"ps-bs__skeleton-avatar\"></div>\n            <div class=\"ps-bs__skeleton-content\">\n              <div class=\"ps-bs__skeleton-line ps-bs__skeleton-line--title\"></div>\n              <div class=\"ps-bs__skeleton-line ps-bs__skeleton-line--subtitle\"></div>\n            </div>\n          </div>\n        }\n      }\n\n      <!-- Error state -->\n      @if (hasError() && !isLoading() && options().length === 0) {\n        <div class=\"ps-bs__state ps-bs__error\">\n          <div class=\"ps-bs__state-icon-wrap ps-bs__error-icon-wrap\">\n            <mat-icon>error_outline</mat-icon>\n          </div>\n          <div class=\"ps-bs__state-title\">{{ intl.paginatedSelectErrorTitle }}</div>\n          <div class=\"ps-bs__state-hint\">{{ intl.paginatedSelectErrorHint }}</div>\n          <button matButton=\"tonal\" (click)=\"retry()\">\n            <mat-icon>refresh</mat-icon>\n            {{ intl.paginatedSelectRetryLabel }}\n          </button>\n        </div>\n      }\n\n      <!-- Empty state -->\n      @if (!hasError() && options().length === 0 && !isLoading()) {\n        <div class=\"ps-bs__state ps-bs__empty\">\n          <div class=\"ps-bs__state-icon-wrap\">\n            <mat-icon>search_off</mat-icon>\n          </div>\n          <div class=\"ps-bs__state-title\">{{ data.noResultsMessage }}</div>\n          @if (query()) {\n            <div class=\"ps-bs__state-hint\">{{ intl.paginatedSelectNoResultsHint }}</div>\n            <button matButton (click)=\"clearQuery(bodyContainer)\">\n              {{ intl.paginatedSelectClearSearchLabel }}\n            </button>\n          }\n        </div>\n      }\n\n      <!-- Option rows -->\n      @for (item of options(); track item[data.config.valueKey]) {\n        @let disabled = data.config.disabled ? data.config.disabled(item) : false;\n        @let selected = isSelected(item);\n        @let avatarImg = getAvatarImage(item);\n\n        <div\n          class=\"ps-bs__option\"\n          [class.ps-bs__option--selected]=\"selected\"\n          [class.ps-bs__option--disabled]=\"disabled\"\n          matRipple\n          [matRippleDisabled]=\"disabled\"\n          (click)=\"toggleItem(item)\"\n          role=\"option\"\n          [attr.aria-selected]=\"selected\"\n          [attr.aria-disabled]=\"disabled\"\n        >\n          <!-- Avatar (al seleccionar se voltea a un check, estilo Gmail) -->\n          <div class=\"ps-bs__option-avatar\" [class.ps-bs__option-avatar--selected]=\"selected\">\n            @if (selected) {\n              <mat-icon class=\"ps-bs__option-avatar-check\">check</mat-icon>\n            } @else if (avatarImg) {\n              <img [src]=\"avatarImg\" [alt]=\"getLabel(item)\" (error)=\"onAvatarError(item)\" loading=\"lazy\" />\n            } @else if (data.config.avatarText) {\n              {{ getAvatarText(item) }}\n            } @else if (data.config.avatarIcon) {\n              <mat-icon>{{ data.config.avatarIcon }}</mat-icon>\n            } @else {\n              {{ getAvatarText(item) }}\n            }\n          </div>\n\n          <!-- Content -->\n          <div class=\"ps-bs__option-content\">\n            @if (data.optionTemplate) {\n              <ng-container *ngTemplateOutlet=\"data.optionTemplate; context: { $implicit: item }\" />\n            } @else {\n              <span class=\"ps-bs__option-label\">{{ getLabel(item) }}</span>\n              @if (data.config.subtitle) {\n                <span class=\"ps-bs__option-subtitle\">{{ data.config.subtitle(item) }}</span>\n              }\n            }\n          </div>\n\n          <!-- Check indicator -->\n          @if (data.multiple) {\n            <mat-checkbox [checked]=\"selected\" [disabled]=\"disabled\" (click)=\"$event.preventDefault()\" />\n          } @else if (selected) {\n            <mat-icon class=\"ps-bs__option-check\">check_circle</mat-icon>\n          }\n        </div>\n      }\n\n      <!-- Loading more (pagination) / end of list -->\n      @if (isLoadingMore()) {\n        <div class=\"ps-bs__loading-more\" aria-live=\"polite\">\n          <span class=\"ps-bs__loading-more-dot\"></span>\n          <span class=\"ps-bs__loading-more-dot\"></span>\n          <span class=\"ps-bs__loading-more-dot\"></span>\n          <span class=\"ps-bs__loading-more-text\">{{ intl.paginatedSelectLoadingMoreLabel }}</span>\n        </div>\n      } @else if (allLoaded() && options().length > 0) {\n        <div class=\"ps-bs__list-end\">{{ intl.paginatedSelectEndOfListLabel }}</div>\n      }\n    </div>\n  </div>\n\n  <!-- \u2500\u2500 Footer (ALWAYS VISIBLE \u2014 never scrolls) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"ps-bs__footer\">\n    <span class=\"ps-bs__footer-count\">\n      @if (data.multiple) {\n        {{ intl.getPaginatedSelectSelectedCountLabel(selectedCount(), total()) }}\n      } @else {\n        {{ intl.getPaginatedSelectResultsCountLabel(total()) }}\n      }\n    </span>\n\n    @if (data.multiple) {\n      <div class=\"ps-bs__footer-actions\">\n        @if (selectedCount() > 0) {\n          <button matButton (click)=\"reset()\">{{ data.resetLabel }}</button>\n        }\n        <button matButton=\"filled\" color=\"primary\" (click)=\"confirm()\">{{ data.confirmLabel }}</button>\n      </div>\n    }\n  </div>\n</div>\n", styles: [".cdk-global-overlay-wrapper:has(.ngx-paginated-select-panel){align-items:center!important;justify-content:center!important}.ngx-paginated-select-backdrop{background:color-mix(in srgb,var(--mat-sys-scrim, #000) 40%,transparent);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.ngx-paginated-select-panel .mat-bottom-sheet-container{padding:0!important;overflow:hidden!important;display:flex!important;flex-direction:column!important;width:min(640px,100vw - 48px);min-width:0;max-width:640px;height:min(86vh,760px)!important;max-height:min(86vh,760px)!important;border-radius:28px;background:var(--mat-sys-surface-container-high);border:1px solid color-mix(in srgb,var(--mat-sys-outline-variant) 60%,transparent);box-shadow:0 1px 3px #0000001f,0 8px 24px #00000024,0 24px 48px #0000001a!important}ngx-paginated-select-bottom-sheet{display:flex;flex-direction:column;flex:1 1 0;min-height:0;overflow:hidden;width:100%}.ps-bs{display:flex;flex-direction:column;height:100%;overflow:hidden}.ps-bs__handle{display:none;justify-content:center;padding:12px 0 4px;flex:0 0 auto}.ps-bs__handle-bar{width:32px;height:4px;border-radius:9999px;background:var(--mat-sys-outline-variant)}.ps-bs__header{flex:0 0 auto;padding:20px 24px 14px;display:flex;flex-direction:column;gap:14px;position:relative;z-index:2;transition:box-shadow .2s cubic-bezier(.2,0,0,1)}.ps-bs__header--scrolled{box-shadow:0 1px 0 0 var(--mat-sys-outline-variant),0 6px 14px -10px #00000059}.ps-bs__header-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.ps-bs__title-area{display:flex;align-items:center;gap:10px;flex:1;min-width:0}.ps-bs__title{font:var(--mat-sys-title-large);font-weight:600;color:var(--mat-sys-on-surface);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ps-bs__badge{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 7px;border-radius:9999px;font:var(--mat-sys-label-medium);font-weight:700;font-variant-numeric:tabular-nums;background:var(--mat-sys-primary);color:var(--mat-sys-on-primary);flex-shrink:0;animation:ps-badge-pop .3s cubic-bezier(.34,1.56,.64,1)}@keyframes ps-badge-pop{0%{transform:scale(0)}to{transform:scale(1)}}.ps-bs__close-btn{flex:0 0 auto}.ps-bs__search{display:flex;align-items:center;gap:10px;height:48px;padding:0 6px 0 16px;background:var(--mat-sys-surface-container-highest);border-radius:9999px;border:1.5px solid transparent;transition:background .2s cubic-bezier(.2,0,0,1),border-color .2s cubic-bezier(.2,0,0,1),box-shadow .2s cubic-bezier(.2,0,0,1)}.ps-bs__search:hover{background:color-mix(in srgb,var(--mat-sys-on-surface) 4%,var(--mat-sys-surface-container-highest))}.ps-bs__search:focus-within{background:var(--mat-sys-surface);border-color:var(--mat-sys-primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--mat-sys-primary) 12%,transparent)}.ps-bs__search-icon{color:var(--mat-sys-on-surface-variant);font-size:22px;width:22px;height:22px;flex-shrink:0;transition:color .2s cubic-bezier(.2,0,0,1)}.ps-bs__search:focus-within .ps-bs__search-icon{color:var(--mat-sys-primary)}.ps-bs__search-input{flex:1;border:none;outline:none;background:transparent;font:var(--mat-sys-body-large);font-family:inherit;color:var(--mat-sys-on-surface);min-width:0}.ps-bs__search-input::placeholder{color:var(--mat-sys-on-surface-variant)}.ps-bs__search-clear{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:none;background:transparent;cursor:pointer;color:var(--mat-sys-on-surface-variant);transition:background .15s cubic-bezier(.2,0,0,1);flex-shrink:0}.ps-bs__search-clear:hover{background:color-mix(in srgb,var(--mat-sys-on-surface) 10%,transparent)}.ps-bs__search-clear mat-icon{font-size:20px;width:20px;height:20px}.ps-bs__body{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:6px 10px 8px;display:flex;flex-direction:column}.ps-bs__body>*{flex-shrink:0}.ps-bs__extra-filters{width:100%;padding:10px 6px 6px}.ps-bs__selected-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 6px 6px}.ps-bs__chip{display:inline-flex;align-items:center;gap:2px;height:32px;padding:0 4px 0 12px;border-radius:9999px;background:var(--mat-sys-secondary-container);color:var(--mat-sys-on-secondary-container);font:var(--mat-sys-label-large);white-space:nowrap;max-width:200px;animation:ps-chip-in .2s cubic-bezier(.2,0,0,1)}.ps-bs__chip-label{overflow:hidden;text-overflow:ellipsis}.ps-bs__chip-remove{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;border:none;background:transparent;cursor:pointer;color:inherit;opacity:.55;transition:opacity .15s,background .15s}.ps-bs__chip-remove:hover{opacity:1;background:color-mix(in srgb,var(--mat-sys-on-secondary-container) 12%,transparent)}.ps-bs__chip-remove mat-icon{font-size:16px;width:16px;height:16px}@keyframes ps-chip-in{0%{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}.ps-bs__select-all.ps-bs__select-all{position:sticky;top:-6px;z-index:3;display:flex;align-items:center;gap:12px;margin:0 -10px;padding:8px 24px;cursor:pointer;background:var(--mat-sys-surface-container-high);border-bottom:1px solid var(--mat-sys-outline-variant);transition:background .15s cubic-bezier(.2,0,0,1)}.ps-bs__select-all.ps-bs__select-all:hover{background:color-mix(in srgb,var(--mat-sys-on-surface) 5%,var(--mat-sys-surface-container-high))}.ps-bs__select-all.ps-bs__select-all-label{font:var(--mat-sys-label-large);color:var(--mat-sys-on-surface)}.ps-bs__list{flex:1 1 auto}.ps-bs__option{display:flex;align-items:center;gap:14px;padding:8px 12px;margin:2px 0;cursor:pointer;border-radius:16px;min-height:56px;transition:background .15s cubic-bezier(.2,0,0,1)}.ps-bs__option:hover:not(.ps-bs__option--disabled){background:color-mix(in srgb,var(--mat-sys-on-surface) 8%,transparent)}.ps-bs__option:active:not(.ps-bs__option--disabled){background:color-mix(in srgb,var(--mat-sys-on-surface) 12%,transparent)}.ps-bs__option--selected{background:color-mix(in srgb,var(--mat-sys-primary) 10%,transparent)}.ps-bs__option--selected:hover{background:color-mix(in srgb,var(--mat-sys-primary) 14%,transparent)}.ps-bs__option--disabled{opacity:.38;cursor:not-allowed}.ps-bs__option .mat-ripple-element{background:color-mix(in srgb,var(--mat-sys-primary) 12%,transparent)}.ps-bs__option .mat-mdc-checkbox{margin-left:auto;margin-right:-8px;flex-shrink:0}.ps-bs__option-avatar{width:40px;height:40px;min-width:40px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;font:var(--mat-sys-label-large);font-weight:600;background:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mat-sys-on-surface) 8%,transparent);transition:box-shadow .18s cubic-bezier(.2,0,0,1)}.ps-bs__option-avatar img{width:100%;height:100%;object-fit:cover;display:block}.ps-bs__option-avatar mat-icon{font-size:20px;width:20px;height:20px}.ps-bs__option-avatar--selected{background:var(--mat-sys-primary);color:var(--mat-sys-on-primary);box-shadow:none;animation:ps-avatar-flip .25s cubic-bezier(.05,.7,.1,1)}.ps-bs__option-avatar-check{color:var(--mat-sys-on-primary)}@keyframes ps-avatar-flip{0%{transform:scale(.6) rotate(-30deg);opacity:.4}to{transform:scale(1) rotate(0);opacity:1}}.ps-bs__option-content{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}.ps-bs__option-label{font:var(--mat-sys-body-large);color:var(--mat-sys-on-surface);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ps-bs__option--selected .ps-bs__option-label{font-weight:600}.ps-bs__option-subtitle{font:var(--mat-sys-body-small);color:var(--mat-sys-on-surface-variant);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ps-bs__option-check{color:var(--mat-sys-primary);font-size:22px;width:22px;height:22px;margin-left:auto;flex-shrink:0}.ps-bs__skeleton{display:flex;align-items:center;gap:14px;padding:8px 12px;margin:2px 0;min-height:56px;border-radius:16px;opacity:0;animation:ps-skeleton-in .4s ease forwards}.ps-bs__skeleton-avatar{width:40px;height:40px;min-width:40px;border-radius:50%;background:linear-gradient(90deg,var(--mat-sys-surface-container) 25%,var(--mat-sys-surface-container-highest) 37%,var(--mat-sys-surface-container) 63%);background-size:400% 100%;animation:ps-shimmer 1.4s ease-in-out infinite}.ps-bs__skeleton-content{flex:1;display:flex;flex-direction:column;gap:10px}.ps-bs__skeleton-line{height:12px;border-radius:6px;background:linear-gradient(90deg,var(--mat-sys-surface-container) 25%,var(--mat-sys-surface-container-highest) 37%,var(--mat-sys-surface-container) 63%);background-size:400% 100%;animation:ps-shimmer 1.4s ease-in-out infinite}.ps-bs__skeleton-line--title{width:60%}.ps-bs__skeleton-line--subtitle{width:38%;height:10px}.ps-bs__skeleton:nth-child(1){animation-delay:0ms}.ps-bs__skeleton:nth-child(2){animation-delay:60ms}.ps-bs__skeleton:nth-child(3){animation-delay:.12s}.ps-bs__skeleton:nth-child(4){animation-delay:.18s}.ps-bs__skeleton:nth-child(5){animation-delay:.24s}.ps-bs__skeleton:nth-child(6){animation-delay:.3s}@keyframes ps-skeleton-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes ps-shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}.ps-bs__loading-more{display:flex;align-items:center;justify-content:center;gap:6px;padding:18px;color:var(--mat-sys-on-surface-variant);font:var(--mat-sys-body-small)}.ps-bs__loading-more-dot{width:6px;height:6px;border-radius:50%;background:var(--mat-sys-primary);animation:ps-bounce 1s ease-in-out infinite}.ps-bs__loading-more-dot:nth-child(2){animation-delay:.15s}.ps-bs__loading-more-dot:nth-child(3){animation-delay:.3s}.ps-bs__loading-more-text{margin-left:6px}@keyframes ps-bounce{0%,80%,to{transform:translateY(0);opacity:.4}40%{transform:translateY(-4px);opacity:1}}.ps-bs__list-end{text-align:center;padding:16px;font:var(--mat-sys-body-small);color:var(--mat-sys-on-surface-variant);opacity:.7}.ps-bs__state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:56px 32px;gap:12px;text-align:center;animation:ps-fade-in .2s ease}.ps-bs__state-icon-wrap{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--mat-sys-surface-container-highest)}.ps-bs__state-icon-wrap mat-icon{font-size:32px;width:32px;height:32px;color:var(--mat-sys-on-surface-variant)}.ps-bs__state-title{font:var(--mat-sys-title-medium);color:var(--mat-sys-on-surface)}.ps-bs__state-hint{font:var(--mat-sys-body-medium);color:var(--mat-sys-on-surface-variant);max-width:280px}.ps-bs__state button{margin-top:4px}.ps-bs__error-icon-wrap{background:color-mix(in srgb,var(--mat-sys-error) 12%,transparent)}.ps-bs__error-icon-wrap mat-icon{color:var(--mat-sys-error)}@keyframes ps-fade-in{0%{opacity:0}to{opacity:1}}.ps-bs__footer{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:16px 24px;gap:12px;z-index:2;background:var(--mat-sys-surface-container-high);border-top:1px solid var(--mat-sys-outline-variant)}.ps-bs__footer-count{font:var(--mat-sys-body-medium);color:var(--mat-sys-on-surface-variant);font-variant-numeric:tabular-nums;white-space:nowrap}.ps-bs__footer-actions{display:flex;gap:8px;align-items:center}.ps-bs__footer-actions button[matButton=filled]{min-width:96px;border-radius:9999px}@media (max-width: 600px){.cdk-global-overlay-wrapper:has(.ngx-paginated-select-panel){align-items:flex-end!important}.ngx-paginated-select-panel .mat-bottom-sheet-container{width:100vw;max-width:100vw;height:90vh!important;max-height:90vh!important;border-radius:24px 24px 0 0;border-bottom:none}.ps-bs__handle{display:flex}.ps-bs__header{padding:8px 16px 12px}.ps-bs__footer{padding:12px 16px}.ps-bs__body{padding:4px 8px 6px}.ps-bs__select-all{margin:0 -8px}}@media (prefers-reduced-motion: reduce){.ps-bs__badge,.ps-bs__chip,.ps-bs__skeleton,.ps-bs__option-avatar--selected,.ps-bs__state{animation:none}.ps-bs__skeleton-avatar,.ps-bs__skeleton-line{animation:none;background:var(--mat-sys-surface-container-highest)}.ps-bs__loading-more-dot{animation:none;opacity:.7}}\n"] }]
         }], ctorParameters: () => [] });
 
 class NgxPaginatedSelect {