@acontplus/ng-components 2.0.0 → 2.1.0

package/fesm2022/acontplus-ng-components.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, booleanAttribute, output, ViewEncapsulation, Component, inject, viewChild, ViewContainerRef, ChangeDetectionStrategy, effect, Injectable, computed, Pipe, ChangeDetectorRef, contentChildren, Input, PLATFORM_ID, signal, TemplateRef, Directive, ViewChild, KeyValueDiffers, InjectionToken, ANIMATION_MODULE_TYPE, HostListener, ContentChildren, ElementRef, Renderer2 } from '@angular/core';
+import { input, booleanAttribute, output, ViewEncapsulation, Component, inject, viewChild, ViewContainerRef, ChangeDetectionStrategy, effect, Injectable, computed, PLATFORM_ID, signal, Input, TemplateRef, Pipe, Directive, ViewChild, KeyValueDiffers, ChangeDetectorRef, InjectionToken, ANIMATION_MODULE_TYPE, HostListener, ContentChildren, ElementRef, Renderer2 } from '@angular/core';
 import * as i1 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
 import * as i2 from '@angular/material/button';
@@ -9,7 +9,7 @@ import { MatIconModule, MatIcon } from '@angular/material/icon';
 import { CdkDrag, CdkDragHandle } from '@angular/cdk/drag-drop';
 import * as i1$1 from '@angular/material/dialog';
 import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule, MatDialog, MatDialogConfig } from '@angular/material/dialog';
-import { NgClass, NgTemplateOutlet, NgStyle, DatePipe, DecimalPipe, isPlatformBrowser, AsyncPipe, CurrencyPipe, PercentPipe } from '@angular/common';
+import { NgClass, NgTemplateOutlet, isPlatformBrowser, AsyncPipe, DecimalPipe, CurrencyPipe, PercentPipe, DatePipe } from '@angular/common';
 import { REPORT_FORMAT, DEFAULT_ICONS, FALLBACK_ICON } from '@acontplus/ui-kit';
 import * as i2$1 from '@angular/forms';
 import { FormControl, ReactiveFormsModule, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
@@ -23,44 +23,31 @@ import { MatFormField, MatLabel, MatHint } from '@angular/material/form-field';
 import { LiveAnnouncer } from '@angular/cdk/a11y';
 import { ENTER, COMMA } from '@angular/cdk/keycodes';
 import { MatProgressSpinner } from '@angular/material/progress-spinner';
-import * as i1$3 from '@angular/material/table';
-import { MatTableDataSource, MatHeaderRowDef, MatRowDef, MatFooterRowDef, MatColumnDef, MatTable, MatTableModule, MatHeaderRow, MatRow, MatFooterRow, MatHeaderCellDef, MatHeaderCell, MatCellDef, MatCell, MatFooterCellDef, MatFooterCell } from '@angular/material/table';
-import { SelectionModel } from '@angular/cdk/collections';
-import * as i6 from '@angular/material/paginator';
-import { MatPaginatorModule, MatPaginator } from '@angular/material/paginator';
-import * as i2$2 from '@angular/material/checkbox';
-import { MatCheckboxModule, MatCheckbox } from '@angular/material/checkbox';
-import * as i3$1 from '@angular/material/sort';
-import { MatSortModule, MatSort, MatSortHeader } from '@angular/material/sort';
-import { TranslocoService } from '@jsverse/transloco';
 import { Tabulator, PageModule, ReactiveDataModule, FormatModule, EditModule, ValidateModule, ColumnCalcsModule, SortModule, TooltipModule, DataTreeModule, MoveRowsModule, SelectRowModule, PopupModule, InteractionModule } from 'tabulator-tables';
-import * as i1$4 from '@angular/cdk/overlay';
+import { toSignal } from '@angular/core/rxjs-interop';
+import * as i1$3 from '@angular/cdk/overlay';
 import { Overlay, OverlayModule } from '@angular/cdk/overlay';
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 import { ComponentPortal } from '@angular/cdk/portal';
+import * as i2$2 from '@angular/material/tooltip';
+import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
 import { MatProgressBarModule, MatProgressBar } from '@angular/material/progress-bar';
 import { switchMap, catchError as catchError$1, takeUntil as takeUntil$1, filter } from 'rxjs/operators';
-import * as i1$5 from '@angular/material/menu';
+import { MatTableDataSource, MatTable, MatColumnDef, MatHeaderRowDef, MatHeaderRow, MatRowDef, MatRow, MatFooterRowDef, MatFooterRow, MatHeaderCellDef, MatHeaderCell, MatCellDef, MatCell, MatFooterCellDef, MatFooterCell } from '@angular/material/table';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSort, MatSortHeader } from '@angular/material/sort';
+import { MatCheckbox } from '@angular/material/checkbox';
+import { SelectionModel } from '@angular/cdk/collections';
+import * as i1$4 from '@angular/material/menu';
 import { MatMenu, MatMenuItem, MatMenuTrigger, MatMenuModule } from '@angular/material/menu';
-import * as i2$3 from '@angular/material/tooltip';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i3$2 from '@angular/material/badge';
+import * as i3$1 from '@angular/material/badge';
 import { MatBadgeModule } from '@angular/material/badge';
+import { TranslocoService } from '@jsverse/transloco';
 
 /**
  * A versatile card component that wraps Angular Material's mat-card with additional functionality
  * and customization options. This component provides a consistent card layout with configurable
  * header, content, and action areas.
- *
- * @example
- * <acp-dynamic-card
- *   [cardTitle]="'Card Title'"
- *   [cardSubtitle]="'Card Subtitle'"
- *   [isHeaderVisible]="true"
- *   [areActionsVisible]="true"
- *   (primaryButtonClicked)="onPrimaryAction()">
- *   Card content goes here
- * </acp-dynamic-card>
  */
 class DynamicCard {
     // Header inputs
@@ -348,15 +335,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
  * including a draggable header and the ability to dynamically create components inside the dialog.
  *
  * This component is typically used with the AdvancedDialogService's openInWrapper method.
- *
- * @example
- * // In your service or component:
- * this.dialogService.openInWrapper({
- *   component: YourDialogContentComponent,
- *   title: 'Dialog Title',
- *   icon: 'info',
- *   data: { message: 'This is some data passed to the dialog content component' }
- * });
  */
 class DialogWrapper {
     dialogRef = inject(MatDialogRef);
@@ -797,282 +775,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
             args: [{ selector: 'acp-spinner', imports: [MatProgressSpinner], encapsulation: ViewEncapsulation.None, template: "<div class=\"acp-spinner\">\n  <mat-spinner />\n</div>\n", styles: [".acp-spinner{display:flex;justify-content:center;align-items:center;height:100%}\n"] }]
         }] });
 
-class GetTotalPipe {
-    transform(colName, dataSource) {
-        return this.getTotal(colName, dataSource) || '';
-    }
-    /**
-     * Calculate and return the total (sum) of all the column --> the column must be number
-     */
-    getTotal(colName, dataSource) {
-        const total = dataSource
-            .map(row => row[colName])
-            .reduce((acc, value) => (value ? acc + Number(value) : acc), 0);
-        return total?.toFixed(2);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: GetTotalPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: GetTotalPipe, isStandalone: true, name: "getTotal" });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: GetTotalPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'getTotal',
-                    standalone: true,
-                }]
-        }] });
-
-class StatusDisplayPipe {
-    sanitizer = inject(DomSanitizer);
-    transloco = inject(TranslocoService, { optional: true });
-    transform(isActive, options = {}) {
-        const { gender = 'neutral', showIcon = true, customActiveText, customInactiveText, textClass = '', iconClass = '', } = options;
-        const text = this.getStatusText(isActive, gender, customActiveText, customInactiveText);
-        const icon = isActive ? 'check_circle' : 'cancel';
-        const colorClass = isActive ? 'text-green-500' : 'text-red-500';
-        const combinedIconClass = `${colorClass} align-middle mr-1 ${iconClass}`.trim();
-        const combinedTextClass = `align-middle ${textClass}`.trim();
-        let html = '';
-        if (showIcon) {
-            html += `<mat-icon class="${combinedIconClass}" fontIcon="${icon}"></mat-icon>`;
-        }
-        html += `<span class="${combinedTextClass}">${text}</span>`;
-        return this.sanitizer.bypassSecurityTrustHtml(html);
-    }
-    getStatusText(isActive, gender, customActive, customInactive) {
-        if (customActive && isActive)
-            return customActive;
-        if (customInactive && !isActive)
-            return customInactive;
-        if (!this.transloco)
-            return this.getFallbackText(isActive, gender);
-        const translationKey = this.getTranslationKey(isActive, gender);
-        const translation = this.transloco.translate(translationKey);
-        return translation !== translationKey ? translation : this.getFallbackText(isActive, gender);
-    }
-    getTranslationKey(isActive, gender) {
-        const base = isActive ? 'status.active' : 'status.inactive';
-        return gender !== 'neutral'
-            ? `${base}.${gender}`
-            : base;
-    }
-    getFallbackText(isActive, gender) {
-        const lang = this.transloco?.getActiveLang() || 'en';
-        const isSpanish = lang.startsWith('es');
-        if (!isSpanish) {
-            return isActive ? 'Active' : 'Inactive';
-        }
-        if (isActive) {
-            return gender === 'female' ? 'Activa' : 'Activo';
-        }
-        else {
-            return gender === 'female' ? 'Inactiva' : 'Inactivo';
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: StatusDisplayPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: StatusDisplayPipe, isStandalone: true, name: "statusDisplay" });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: StatusDisplayPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'statusDisplay',
-                }]
-        }] });
-
-class DynamicTable {
-    componentRefs = [];
-    embeddedViews = [];
-    cdr = inject(ChangeDetectorRef);
-    showExpand = input(false, ...(ngDevMode ? [{ debugName: "showExpand" }] : []));
-    showFooter = input(false, ...(ngDevMode ? [{ debugName: "showFooter" }] : []));
-    locale = input('en-US', ...(ngDevMode ? [{ debugName: "locale" }] : []));
-    highlightRowIndex = input(0, ...(ngDevMode ? [{ debugName: "highlightRowIndex" }] : []));
-    visibleColumns = [];
-    columnDefinitions = [];
-    showSelectBox = input(false, ...(ngDevMode ? [{ debugName: "showSelectBox" }] : []));
-    multipleSelection = input(true, ...(ngDevMode ? [{ debugName: "multipleSelection" }] : []));
-    tableData = input([], ...(ngDevMode ? [{ debugName: "tableData" }] : []));
-    rowTemplate = input(null, ...(ngDevMode ? [{ debugName: "rowTemplate" }] : []));
-    expandedDetail = null;
-    enablePagination = input(false, ...(ngDevMode ? [{ debugName: "enablePagination" }] : []));
-    paginationConfig = null;
-    isLoadingData = input(false, ...(ngDevMode ? [{ debugName: "isLoadingData" }] : []));
-    rowSelected = output();
-    copyRow = output();
-    showExpanded = output();
-    hideExpanded = output();
-    pageEvent = output();
-    isNormalRow = (_, row) => this.expandedElement !== row;
-    isExpandedRow = (_, row) => this.expandedElement === row;
-    dataSource = new MatTableDataSource([]);
-    selection = new SelectionModel(true, []);
-    expandedElement = null;
-    columnsToDisplayWithExpand = [];
-    headerRowDefs = contentChildren(MatHeaderRowDef, ...(ngDevMode ? [{ debugName: "headerRowDefs" }] : []));
-    rowDefs = contentChildren(MatRowDef, ...(ngDevMode ? [{ debugName: "rowDefs" }] : []));
-    footerRowDefs = contentChildren(MatFooterRowDef, ...(ngDevMode ? [{ debugName: "footerRowDefs" }] : []));
-    columnDefs = contentChildren(MatColumnDef, ...(ngDevMode ? [{ debugName: "columnDefs" }] : []));
-    table = viewChild.required(MatTable);
-    rows = contentChildren(ViewContainerRef, ...(ngDevMode ? [{ debugName: "rows" }] : []));
-    ngOnInit() {
-        this.updateColumnsToDisplay();
-        this.initializeSelection();
-    }
-    ngOnChanges(changes) {
-        if (changes['tableData']) {
-            this.updateTableData();
-        }
-        if (changes['showExpand'] || changes['visibleColumns'] || changes['columnDefinitions']) {
-            this.updateColumnsToDisplay();
-        }
-        // Trigger change detection for OnPush strategy
-        this.cdr.markForCheck();
-    }
-    ngAfterContentInit() {
-        this.registerTableContent();
-        this.initializeTable();
-        this.cdr.markForCheck();
-    }
-    ngOnDestroy() {
-        this.cleanupDynamicComponents();
-    }
-    updateTableData() {
-        // Clear selection when new data arrives
-        this.selection.clear();
-        // Update data source
-        this.dataSource.data = this.tableData() || [];
-        // Reset expanded element if it's no longer in the new data
-        if (this.expandedElement && !this.dataSource.data.includes(this.expandedElement)) {
-            this.expandedElement = null;
-        }
-        // Trigger change detection
-        this.cdr.markForCheck();
-    }
-    updateColumnsToDisplay() {
-        if (!this.visibleColumns.length && this.columnDefinitions) {
-            this.visibleColumns = this.columnDefinitions.map(col => col.key);
-            this.columnDefinitions.forEach((col, index) => (col.index = index));
-        }
-        const newColumns = [...this.visibleColumns];
-        if (this.showSelectBox() && !newColumns.includes('select')) {
-            newColumns.unshift('select');
-        }
-        if (this.showExpand() && this.expandedDetail) {
-            if (!this.columnDefinitions?.some(col => col.key === 'expand')) {
-                this.columnDefinitions = [
-                    ...(this.columnDefinitions || []),
-                    {
-                        key: 'expand',
-                        label: '',
-                        type: 'expand',
-                        index: this.columnDefinitions?.length || 0,
-                    },
-                ];
-            }
-            if (!newColumns.includes('expand')) {
-                newColumns.push('expand');
-            }
-        }
-        this.columnsToDisplayWithExpand = newColumns;
-    }
-    initializeSelection() {
-        this.selection = new SelectionModel(this.multipleSelection(), []);
-    }
-    registerTableContent() {
-        this.columnDefs().forEach(columnDef => this.table().addColumnDef(columnDef));
-        this.rowDefs().forEach(rowDef => this.table().addRowDef(rowDef));
-        this.headerRowDefs().forEach(headerRowDef => this.table().addHeaderRowDef(headerRowDef));
-        if (this.showFooter()) {
-            this.footerRowDefs().forEach(footerRowDef => this.table().addFooterRowDef(footerRowDef));
-        }
-        else {
-            this.footerRowDefs().forEach(footerRowDef => this.table().removeFooterRowDef(footerRowDef));
-        }
-    }
-    initializeTable() {
-        this.dataSource = new MatTableDataSource(this.tableData() || []);
-    }
-    cleanupDynamicComponents() {
-        this.componentRefs.forEach(ref => ref.destroy());
-        this.embeddedViews.forEach(view => view.destroy());
-    }
-    isAllSelected() {
-        const numSelected = this.selection.selected.length;
-        const selectableRows = this.dataSource.data.filter(row => !row.disableSelection);
-        return numSelected === selectableRows.length && selectableRows.length > 0;
-    }
-    masterToggle() {
-        if (!this.multipleSelection())
-            return;
-        if (this.isAllSelected()) {
-            this.selection.clear();
-        }
-        else {
-            this.dataSource.data
-                .filter(row => !row.disableSelection)
-                .forEach(row => this.selection.select(row));
-        }
-        this.rowSelected.emit(this.selection.selected);
-        this.cdr.markForCheck();
-    }
-    checkboxLabel(row) {
-        if (!row) {
-            return `${this.isAllSelected() ? 'deselect' : 'select'} all`;
-        }
-        return `${this.selection.isSelected(row) ? 'deselect' : 'select'} row`;
-    }
-    selectRow(row) {
-        if (row.disableSelection)
-            return;
-        this.selection.toggle(row);
-        this.rowSelected.emit(this.selection.selected);
-        this.cdr.markForCheck();
-    }
-    onExpand(event, element) {
-        event.stopPropagation();
-        this.expandedElement = this.expandedElement === element ? null : element;
-        if (this.expandedElement) {
-            this.showExpanded.emit(element);
-        }
-        else {
-            this.hideExpanded.emit(element);
-        }
-        this.cdr.markForCheck();
-    }
-    getRowStyle(element) {
-        return element.rowStyle || {};
-    }
-    handlePageEvent(e) {
-        this.pageEvent.emit(e);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DynamicTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: DynamicTable, isStandalone: true, selector: "acp-dynamic-table", inputs: { showExpand: { classPropertyName: "showExpand", publicName: "showExpand", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, highlightRowIndex: { classPropertyName: "highlightRowIndex", publicName: "highlightRowIndex", isSignal: true, isRequired: false, transformFunction: null }, visibleColumns: { classPropertyName: "visibleColumns", publicName: "visibleColumns", isSignal: false, isRequired: false, transformFunction: null }, columnDefinitions: { classPropertyName: "columnDefinitions", publicName: "columnDefinitions", isSignal: false, isRequired: false, transformFunction: null }, showSelectBox: { classPropertyName: "showSelectBox", publicName: "showSelectBox", isSignal: true, isRequired: false, transformFunction: null }, multipleSelection: { classPropertyName: "multipleSelection", publicName: "multipleSelection", isSignal: true, isRequired: false, transformFunction: null }, tableData: { classPropertyName: "tableData", publicName: "tableData", isSignal: true, isRequired: false, transformFunction: null }, rowTemplate: { classPropertyName: "rowTemplate", publicName: "rowTemplate", isSignal: true, isRequired: false, transformFunction: null }, expandedDetail: { classPropertyName: "expandedDetail", publicName: "expandedDetail", isSignal: false, isRequired: false, transformFunction: null }, enablePagination: { classPropertyName: "enablePagination", publicName: "enablePagination", isSignal: true, isRequired: false, transformFunction: null }, paginationConfig: { classPropertyName: "paginationConfig", publicName: "paginationConfig", isSignal: false, isRequired: false, transformFunction: null }, isLoadingData: { classPropertyName: "isLoadingData", publicName: "isLoadingData", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowSelected: "rowSelected", copyRow: "copyRow", showExpanded: "showExpanded", hideExpanded: "hideExpanded", pageEvent: "pageEvent" }, queries: [{ propertyName: "headerRowDefs", predicate: MatHeaderRowDef, isSignal: true }, { propertyName: "rowDefs", predicate: MatRowDef, isSignal: true }, { propertyName: "footerRowDefs", predicate: MatFooterRowDef, isSignal: true }, { propertyName: "columnDefs", predicate: MatColumnDef, isSignal: true }, { propertyName: "rows", predicate: ViewContainerRef, isSignal: true }], viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"acp-dynamic-table\">\n  <div class=\"acp-table-container small-table\">\n    <table #sort=\"matSort\" [dataSource]=\"dataSource.data\" mat-table matSort>\n      @if (columnDefinitions) {\n      <!-- Checkbox Column -->\n      @if (showSelectBox()) {\n      <ng-container matColumnDef=\"select\">\n        <th *matHeaderCellDef mat-header-cell>\n          @if (multipleSelection()) {\n          <mat-checkbox\n            (change)=\"$event ? masterToggle() : null\"\n            (click)=\"$event.stopPropagation()\"\n            [aria-label]=\"checkboxLabel()\"\n            [checked]=\"selection.hasValue() && isAllSelected()\"\n            [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n          />\n          }\n        </th>\n        <td *matCellDef=\"let row\" mat-cell>\n          <mat-checkbox\n            (change)=\"$event ? selectRow(row) : null\"\n            (click)=\"$event.stopPropagation()\"\n            [aria-label]=\"checkboxLabel(row)\"\n            [checked]=\"selection.isSelected(row)\"\n            [disabled]=\"row.disableSelection\"\n          />\n        </td>\n        <td *matFooterCellDef mat-footer-cell></td>\n      </ng-container>\n      }\n\n      <!-- Dynamic Columns -->\n      @for (col of columnDefinitions; track col.key) {\n      <ng-container [matColumnDef]=\"col.key\">\n        <th *matHeaderCellDef mat-header-cell>{{ col.label }}</th>\n\n        <td\n          mat-cell\n          *matCellDef=\"let element; let i = index\"\n          [ngClass]=\"{ highlighted: highlightRowIndex() === i }\"\n        >\n          @if (col.key === 'op') {\n          <div class=\"d-flex flex-row gap-1\">\n            @if (col.templateOutlet) {\n            <ng-container\n              *ngTemplateOutlet=\"\n                        col.templateOutlet;\n                        context: { $implicit: element, index: i }\n                      \"\n            />\n            } @else if (rowTemplate()) {\n            <ng-container\n              *ngTemplateOutlet=\"rowTemplate(); context: { $implicit: element, index: i }\"\n            />\n            }\n          </div>\n          } @else { @switch (col.type) { @case ('image') {\n          <img [src]=\"element[col.key]\" class=\"img-fluid img-thumbnail my-1\" width=\"50\" alt=\"\" />\n          } @case ('number') {\n          <div>{{ element[col.key] | number: '1.2' : locale() }}</div>\n          } @case ('date') {\n          <div>{{ element[col.key] | date: 'dd.MM.yyyy' }}</div>\n          } @case ('expand') {\n          <button mat-icon-button aria-label=\"expand row\" (click)=\"onExpand($event, element)\">\n            @if (expandedElement === element) {\n            <mat-icon>keyboard_arrow_up</mat-icon>\n            } @else {\n            <mat-icon>keyboard_arrow_down</mat-icon>\n            }\n          </button>\n          } @case ('template') {\n          <ng-container\n            *ngTemplateOutlet=\"\n                        col.templateOutlet;\n                        context: { $implicit: element, index: i }\n                      \"\n          />\n          } @case ('custom') {\n          <ng-container #dynamicContent />\n          } @default {\n          <div>{{ element[col.key] }}</div>\n          } } }\n        </td>\n\n        <td *matFooterCellDef mat-footer-cell>\n          @if (col.index === 0) {\n          <div>Total</div>\n          } @if (col.hasFooter) {\n          <div>{{ col.key | getTotal: dataSource.data }}</div>\n          }\n        </td>\n      </ng-container>\n      }\n\n      <!-- Expanded Detail Row -->\n      @if (showExpand() && expandedDetail) {\n      <ng-container matColumnDef=\"expandedDetail\">\n        <td\n          mat-cell\n          *matCellDef=\"let element; let i = index\"\n          [attr.colspan]=\"columnsToDisplayWithExpand.length\"\n        >\n          <div class=\"m-0 p-0 acp-detail-expand\" [class.acp-expanded]=\"element === expandedElement\">\n            <ng-container\n              *ngTemplateOutlet=\"expandedDetail; context: { $implicit: element, index: i }\"\n            />\n          </div>\n        </td>\n      </ng-container>\n      }\n\n      <!-- Header Row -->\n      <tr mat-header-row *matHeaderRowDef=\"columnsToDisplayWithExpand\"></tr>\n\n      <!-- Data Rows -->\n      @if (showExpand() && expandedDetail) {\n      <!-- Regular Row -->\n      <tr\n        mat-row\n        *matRowDef=\"let row; columns: columnsToDisplayWithExpand; when: isNormalRow\"\n        class=\"acp-dynamic-table-row\"\n        [class.acp-dynamic-table-expanded-row]=\"expandedElement === row\"\n        [ngStyle]=\"getRowStyle(row)\"\n        (click)=\"expandedElement = expandedElement === row ? null : row\"\n      ></tr>\n\n      <!-- Expanded Row -->\n      <tr\n        mat-row\n        *matRowDef=\"let row; columns: ['expandedDetail']; when: isExpandedRow\"\n        class=\"acp-dynamic-table-detail-row\"\n      ></tr>\n      } @else {\n      <!-- Regular Row without expansion -->\n      <tr\n        mat-row\n        *matRowDef=\"let row; columns: columnsToDisplayWithExpand\"\n        [ngStyle]=\"getRowStyle(row)\"\n      ></tr>\n      }\n\n      <!-- No Data Row -->\n      <tr class=\"mat-row\" *matNoDataRow>\n        <td class=\"mat-cell text-center\" [attr.colspan]=\"columnsToDisplayWithExpand.length\">\n          No records found\n        </td>\n      </tr>\n\n      <!-- Footer -->\n      @if (showFooter() && dataSource.data.length > 0) {\n      <tr mat-footer-row *matFooterRowDef=\"columnsToDisplayWithExpand\"></tr>\n      } }\n    </table>\n  </div>\n\n  @if (enablePagination() && paginationConfig) {\n  <mat-paginator\n    #paginator\n    [disabled]=\"isLoadingData()\"\n    (page)=\"handlePageEvent($event)\"\n    [length]=\"paginationConfig.totalRecords\"\n    [pageSize]=\"paginationConfig.pageSize\"\n    [pageSizeOptions]=\"paginationConfig.pageSizeOptions || []\"\n    [showFirstLastButtons]=\"paginationConfig.showFirstLastButtons\"\n    [pageIndex]=\"paginationConfig.pageIndex\"\n    [hidePageSize]=\"paginationConfig.hidePageSize\"\n    [disabled]=\"paginationConfig.disabled\"\n    aria-label=\"Select page\"\n  />\n  }\n</div>\n", styles: [".acp-dynamic-table{display:block}.acp-dynamic-table .acp-table-container{position:relative;min-height:200px;max-height:400px;overflow:auto}.acp-dynamic-table table{width:100%}.acp-dynamic-table tr.acp-dynamic-table-detail-row{height:0}.acp-dynamic-table tr.acp-dynamic-table-row:not(.acp-dynamic-table-expanded-row):hover{background:var(--mat-sys-surface-variant, whitesmoke)}.acp-dynamic-table tr.acp-dynamic-table-row:not(.acp-dynamic-table-expanded-row):active{background:var(--mat-sys-surface-container, #efefef)}.acp-dynamic-table .acp-dynamic-table-row td{border-bottom-width:0}.acp-dynamic-table .acp-detail-expand{height:0;overflow:hidden;transition:height .15s ease-in-out}.acp-dynamic-table .acp-detail-expand.acp-expanded{height:auto;overflow:visible}@starting-style{.acp-dynamic-table .acp-detail-expand.acp-expanded{height:0}}\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: MatCheckboxModule }, { kind: "component", type: i2$2.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: MatSortModule }, { kind: "directive", type: i3$1.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i6.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: GetTotalPipe, name: "getTotal" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DynamicTable, decorators: [{
-            type: Component,
-            args: [{ selector: 'acp-dynamic-table', standalone: true, imports: [
-                        MatTableModule,
-                        MatCheckboxModule,
-                        MatSortModule,
-                        MatIconModule,
-                        MatButtonModule,
-                        MatPaginatorModule,
-                        NgClass,
-                        NgStyle,
-                        GetTotalPipe,
-                        DatePipe,
-                        DecimalPipe,
-                        NgTemplateOutlet,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"acp-dynamic-table\">\n  <div class=\"acp-table-container small-table\">\n    <table #sort=\"matSort\" [dataSource]=\"dataSource.data\" mat-table matSort>\n      @if (columnDefinitions) {\n      <!-- Checkbox Column -->\n      @if (showSelectBox()) {\n      <ng-container matColumnDef=\"select\">\n        <th *matHeaderCellDef mat-header-cell>\n          @if (multipleSelection()) {\n          <mat-checkbox\n            (change)=\"$event ? masterToggle() : null\"\n            (click)=\"$event.stopPropagation()\"\n            [aria-label]=\"checkboxLabel()\"\n            [checked]=\"selection.hasValue() && isAllSelected()\"\n            [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n          />\n          }\n        </th>\n        <td *matCellDef=\"let row\" mat-cell>\n          <mat-checkbox\n            (change)=\"$event ? selectRow(row) : null\"\n            (click)=\"$event.stopPropagation()\"\n            [aria-label]=\"checkboxLabel(row)\"\n            [checked]=\"selection.isSelected(row)\"\n            [disabled]=\"row.disableSelection\"\n          />\n        </td>\n        <td *matFooterCellDef mat-footer-cell></td>\n      </ng-container>\n      }\n\n      <!-- Dynamic Columns -->\n      @for (col of columnDefinitions; track col.key) {\n      <ng-container [matColumnDef]=\"col.key\">\n        <th *matHeaderCellDef mat-header-cell>{{ col.label }}</th>\n\n        <td\n          mat-cell\n          *matCellDef=\"let element; let i = index\"\n          [ngClass]=\"{ highlighted: highlightRowIndex() === i }\"\n        >\n          @if (col.key === 'op') {\n          <div class=\"d-flex flex-row gap-1\">\n            @if (col.templateOutlet) {\n            <ng-container\n              *ngTemplateOutlet=\"\n                        col.templateOutlet;\n                        context: { $implicit: element, index: i }\n                      \"\n            />\n            } @else if (rowTemplate()) {\n            <ng-container\n              *ngTemplateOutlet=\"rowTemplate(); context: { $implicit: element, index: i }\"\n            />\n            }\n          </div>\n          } @else { @switch (col.type) { @case ('image') {\n          <img [src]=\"element[col.key]\" class=\"img-fluid img-thumbnail my-1\" width=\"50\" alt=\"\" />\n          } @case ('number') {\n          <div>{{ element[col.key] | number: '1.2' : locale() }}</div>\n          } @case ('date') {\n          <div>{{ element[col.key] | date: 'dd.MM.yyyy' }}</div>\n          } @case ('expand') {\n          <button mat-icon-button aria-label=\"expand row\" (click)=\"onExpand($event, element)\">\n            @if (expandedElement === element) {\n            <mat-icon>keyboard_arrow_up</mat-icon>\n            } @else {\n            <mat-icon>keyboard_arrow_down</mat-icon>\n            }\n          </button>\n          } @case ('template') {\n          <ng-container\n            *ngTemplateOutlet=\"\n                        col.templateOutlet;\n                        context: { $implicit: element, index: i }\n                      \"\n          />\n          } @case ('custom') {\n          <ng-container #dynamicContent />\n          } @default {\n          <div>{{ element[col.key] }}</div>\n          } } }\n        </td>\n\n        <td *matFooterCellDef mat-footer-cell>\n          @if (col.index === 0) {\n          <div>Total</div>\n          } @if (col.hasFooter) {\n          <div>{{ col.key | getTotal: dataSource.data }}</div>\n          }\n        </td>\n      </ng-container>\n      }\n\n      <!-- Expanded Detail Row -->\n      @if (showExpand() && expandedDetail) {\n      <ng-container matColumnDef=\"expandedDetail\">\n        <td\n          mat-cell\n          *matCellDef=\"let element; let i = index\"\n          [attr.colspan]=\"columnsToDisplayWithExpand.length\"\n        >\n          <div class=\"m-0 p-0 acp-detail-expand\" [class.acp-expanded]=\"element === expandedElement\">\n            <ng-container\n              *ngTemplateOutlet=\"expandedDetail; context: { $implicit: element, index: i }\"\n            />\n          </div>\n        </td>\n      </ng-container>\n      }\n\n      <!-- Header Row -->\n      <tr mat-header-row *matHeaderRowDef=\"columnsToDisplayWithExpand\"></tr>\n\n      <!-- Data Rows -->\n      @if (showExpand() && expandedDetail) {\n      <!-- Regular Row -->\n      <tr\n        mat-row\n        *matRowDef=\"let row; columns: columnsToDisplayWithExpand; when: isNormalRow\"\n        class=\"acp-dynamic-table-row\"\n        [class.acp-dynamic-table-expanded-row]=\"expandedElement === row\"\n        [ngStyle]=\"getRowStyle(row)\"\n        (click)=\"expandedElement = expandedElement === row ? null : row\"\n      ></tr>\n\n      <!-- Expanded Row -->\n      <tr\n        mat-row\n        *matRowDef=\"let row; columns: ['expandedDetail']; when: isExpandedRow\"\n        class=\"acp-dynamic-table-detail-row\"\n      ></tr>\n      } @else {\n      <!-- Regular Row without expansion -->\n      <tr\n        mat-row\n        *matRowDef=\"let row; columns: columnsToDisplayWithExpand\"\n        [ngStyle]=\"getRowStyle(row)\"\n      ></tr>\n      }\n\n      <!-- No Data Row -->\n      <tr class=\"mat-row\" *matNoDataRow>\n        <td class=\"mat-cell text-center\" [attr.colspan]=\"columnsToDisplayWithExpand.length\">\n          No records found\n        </td>\n      </tr>\n\n      <!-- Footer -->\n      @if (showFooter() && dataSource.data.length > 0) {\n      <tr mat-footer-row *matFooterRowDef=\"columnsToDisplayWithExpand\"></tr>\n      } }\n    </table>\n  </div>\n\n  @if (enablePagination() && paginationConfig) {\n  <mat-paginator\n    #paginator\n    [disabled]=\"isLoadingData()\"\n    (page)=\"handlePageEvent($event)\"\n    [length]=\"paginationConfig.totalRecords\"\n    [pageSize]=\"paginationConfig.pageSize\"\n    [pageSizeOptions]=\"paginationConfig.pageSizeOptions || []\"\n    [showFirstLastButtons]=\"paginationConfig.showFirstLastButtons\"\n    [pageIndex]=\"paginationConfig.pageIndex\"\n    [hidePageSize]=\"paginationConfig.hidePageSize\"\n    [disabled]=\"paginationConfig.disabled\"\n    aria-label=\"Select page\"\n  />\n  }\n</div>\n", styles: [".acp-dynamic-table{display:block}.acp-dynamic-table .acp-table-container{position:relative;min-height:200px;max-height:400px;overflow:auto}.acp-dynamic-table table{width:100%}.acp-dynamic-table tr.acp-dynamic-table-detail-row{height:0}.acp-dynamic-table tr.acp-dynamic-table-row:not(.acp-dynamic-table-expanded-row):hover{background:var(--mat-sys-surface-variant, whitesmoke)}.acp-dynamic-table tr.acp-dynamic-table-row:not(.acp-dynamic-table-expanded-row):active{background:var(--mat-sys-surface-container, #efefef)}.acp-dynamic-table .acp-dynamic-table-row td{border-bottom-width:0}.acp-dynamic-table .acp-detail-expand{height:0;overflow:hidden;transition:height .15s ease-in-out}.acp-dynamic-table .acp-detail-expand.acp-expanded{height:auto;overflow:visible}@starting-style{.acp-dynamic-table .acp-detail-expand.acp-expanded{height:0}}\n"] }]
-        }], propDecorators: { showExpand: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExpand", required: false }] }], showFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFooter", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], highlightRowIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlightRowIndex", required: false }] }], visibleColumns: [{
-                type: Input
-            }], columnDefinitions: [{
-                type: Input
-            }], showSelectBox: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSelectBox", required: false }] }], multipleSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "multipleSelection", required: false }] }], tableData: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableData", required: false }] }], rowTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowTemplate", required: false }] }], expandedDetail: [{
-                type: Input
-            }], enablePagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "enablePagination", required: false }] }], paginationConfig: [{
-                type: Input
-            }], isLoadingData: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoadingData", required: false }] }], rowSelected: [{ type: i0.Output, args: ["rowSelected"] }], copyRow: [{ type: i0.Output, args: ["copyRow"] }], showExpanded: [{ type: i0.Output, args: ["showExpanded"] }], hideExpanded: [{ type: i0.Output, args: ["hideExpanded"] }], pageEvent: [{ type: i0.Output, args: ["pageEvent"] }], headerRowDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MatHeaderRowDef), { isSignal: true }] }], rowDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MatRowDef), { isSignal: true }] }], footerRowDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MatFooterRowDef), { isSignal: true }] }], columnDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MatColumnDef), { isSignal: true }] }], table: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatTable), { isSignal: true }] }], rows: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => ViewContainerRef), { isSignal: true }] }] } });
-
 // tabulator-table.ts
 Tabulator.registerModule([
     PageModule,
@@ -1909,105 +1611,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
+/**
+ * A theme toggle button component that allows users to switch between
+ * light and dark modes. Follows WAI-ARIA best practices for toggle buttons.
+ */
 class ThemeToggle {
-    themeService = inject(ThemeSwitcher);
-    darkMode$;
-    constructor() {
-        this.darkMode$ = this.themeService.isDarkMode$;
-    }
+    themeSwitcher = inject(ThemeSwitcher);
+    /** Icon to display when in dark mode (clicking will switch to light) */
+    lightModeIcon = input('light_mode', ...(ngDevMode ? [{ debugName: "lightModeIcon" }] : []));
+    /** Icon to display when in light mode (clicking will switch to dark) */
+    darkModeIcon = input('dark_mode', ...(ngDevMode ? [{ debugName: "darkModeIcon" }] : []));
+    /** Accessible label for when in dark mode */
+    lightModeLabel = input('Switch to light mode', ...(ngDevMode ? [{ debugName: "lightModeLabel" }] : []));
+    /** Accessible label for when in light mode */
+    darkModeLabel = input('Switch to dark mode', ...(ngDevMode ? [{ debugName: "darkModeLabel" }] : []));
+    /** Test ID for automated testing */
+    testId = input('', ...(ngDevMode ? [{ debugName: "testId" }] : []));
+    /** Current dark mode state as a signal */
+    isDarkMode = toSignal(this.themeSwitcher.isDarkMode$, {
+        initialValue: false,
+    });
+    /** Computed icon based on current theme */
+    currentIcon = computed(() => this.isDarkMode() ? this.lightModeIcon() : this.darkModeIcon(), ...(ngDevMode ? [{ debugName: "currentIcon" }] : []));
+    /** Computed accessible label based on current theme */
+    currentLabel = computed(() => this.isDarkMode() ? this.lightModeLabel() : this.darkModeLabel(), ...(ngDevMode ? [{ debugName: "currentLabel" }] : []));
+    /** Toggle between dark and light mode */
     toggleDarkMode() {
-        this.themeService.toggleDarkMode();
+        this.themeSwitcher.toggleDarkMode();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ThemeToggle, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: ThemeToggle, isStandalone: true, selector: "acp-theme-toggle", ngImport: i0, template: "<button\n  mat-icon-button\n  (click)=\"toggleDarkMode()\"\n  title=\"{{ (darkMode$ | async) ? 'Modo D\u00EDa' : 'Modo Noche' }}\"\n>\n  <mat-icon>{{ (darkMode$ | async) ? 'light_mode' : 'dark_mode' }}</mat-icon>\n</button>\n", styles: [""], dependencies: [{ kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: ThemeToggle, isStandalone: true, selector: "acp-theme-toggle", inputs: { lightModeIcon: { classPropertyName: "lightModeIcon", publicName: "lightModeIcon", isSignal: true, isRequired: false, transformFunction: null }, darkModeIcon: { classPropertyName: "darkModeIcon", publicName: "darkModeIcon", isSignal: true, isRequired: false, transformFunction: null }, lightModeLabel: { classPropertyName: "lightModeLabel", publicName: "lightModeLabel", isSignal: true, isRequired: false, transformFunction: null }, darkModeLabel: { classPropertyName: "darkModeLabel", publicName: "darkModeLabel", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "acp-theme-toggle" }, ngImport: i0, template: "<button\n  mat-icon-button\n  type=\"button\"\n  (click)=\"toggleDarkMode()\"\n  [attr.aria-label]=\"currentLabel()\"\n  [attr.aria-pressed]=\"isDarkMode()\"\n  [matTooltip]=\"currentLabel()\"\n  [attr.data-testid]=\"testId() || null\"\n>\n  <mat-icon>{{ currentIcon() }}</mat-icon>\n</button>\n", styles: [".acp-theme-toggle{display:inline-block}\n"], dependencies: [{ kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ThemeToggle, decorators: [{
             type: Component,
-            args: [{ selector: 'acp-theme-toggle', imports: [MatIconButton, MatIcon, AsyncPipe], encapsulation: ViewEncapsulation.None, template: "<button\n  mat-icon-button\n  (click)=\"toggleDarkMode()\"\n  title=\"{{ (darkMode$ | async) ? 'Modo D\u00EDa' : 'Modo Noche' }}\"\n>\n  <mat-icon>{{ (darkMode$ | async) ? 'light_mode' : 'dark_mode' }}</mat-icon>\n</button>\n" }]
-        }], ctorParameters: () => [] });
-
-class FieldDefinition {
-    value;
-    valueLabel;
-    defaultValue;
-    defaultValueLabel;
-    key;
-    label;
-    dateRangeConfig;
-    isDefaultSearchField;
-    required;
-    disabled;
-    order;
-    icon;
-    controlType = 'textbox';
-    type = 'string';
-    editor; // this attribut is for Kendo-Grid
-    options;
-    valueOptions;
-    valuePrimitive; // for kendo dropdown
-    textField; // for kendo dropdown
-    valueField; // for kendo dropdown
-    errorMessage;
-    width;
-    valueChangeCallback;
-    columnType;
-    body;
-    constructor(options = {}) {
-        this.value = options.value;
-        this.valueLabel = options.valueLabel;
-        this.defaultValue = options.defaultValue;
-        this.defaultValueLabel = options.defaultValueLabel;
-        this.key = options.key || '';
-        this.label = options.label || '';
-        this.dateRangeConfig = options.dateRangeConfig;
-        this.isDefaultSearchField = options.isDefaultSearchField;
-        this.required = !!options.required;
-        this.disabled = options.disabled;
-        this.order = options.order === undefined ? 1 : options.order;
-        this.icon = options.icon;
-        this.controlType = options.controlType || 'textbox';
-        this.type = options.type || 'string';
-        this.editor = options.editor || '';
-        this.options = options.options || [];
-        this.valueOptions = options.valueOptions || [];
-        this.valuePrimitive = options.valuePrimitive;
-        this.textField = options.textField;
-        this.valueField = options.valueField;
-        this.errorMessage = options.errorMessage || '';
-        this.width = options.width;
-        this.valueChangeCallback = options.valueChangeCallback;
-        this.columnType = options.columnType;
-        this.body = options.body;
-    }
-}
-
-class ColumnDefinition extends FieldDefinition {
-    index; // if the list of columns will be displayed in material edit-grid (angular material grid), index must be given
-    format; // it could be: { style: 'currency', currency: 'EUR' }, { date: 'short' }
-    hasFooter;
-    hideInOverlay;
-    // optionsAttribut is used in stock-receipt maintenance: StockReceiptItem.Unit has options for StockReceiptItem.Birimi
-    optionsAttribut; // name of the attribut that has the options list for dropdown
-    templateOutlet;
-    constructor(options = {}) {
-        super(options);
-        this.index = options.index;
-        this.format = options.format;
-        this.hasFooter = options.hasFooter;
-        this.hideInOverlay = options.hideInOverlay;
-        this.optionsAttribut = options.optionsAttribut;
-        this.templateOutlet = options.templateOutlet;
-    }
-}
-
-class TableCellIndex {
-    row;
-    column;
-    constructor(row, column) {
-        this.row = row;
-        this.column = column;
-    }
-}
+            args: [{ selector: 'acp-theme-toggle', imports: [MatIconButton, MatIcon, MatTooltip], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'acp-theme-toggle',
+                    }, template: "<button\n  mat-icon-button\n  type=\"button\"\n  (click)=\"toggleDarkMode()\"\n  [attr.aria-label]=\"currentLabel()\"\n  [attr.aria-pressed]=\"isDarkMode()\"\n  [matTooltip]=\"currentLabel()\"\n  [attr.data-testid]=\"testId() || null\"\n>\n  <mat-icon>{{ currentIcon() }}</mat-icon>\n</button>\n", styles: [".acp-theme-toggle{display:inline-block}\n"] }]
+        }], propDecorators: { lightModeIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "lightModeIcon", required: false }] }], darkModeIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "darkModeIcon", required: false }] }], lightModeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "lightModeLabel", required: false }] }], darkModeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "darkModeLabel", required: false }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }] } });
 
 class Pagination {
     totalRecords;
@@ -2445,7 +2085,7 @@ class ReusableAutocompleteComponent {
         this.searchInput()?.nativeElement?.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ReusableAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ReusableAutocompleteComponent, isStandalone: true, selector: "acp-autocomplete-wrapper", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: false, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, searchFunction: { classPropertyName: "searchFunction", publicName: "searchFunction", isSignal: true, isRequired: false, transformFunction: null }, notFoundTemplate: { classPropertyName: "notFoundTemplate", publicName: "notFoundTemplate", isSignal: true, isRequired: false, transformFunction: null }, overlayWidth: { classPropertyName: "overlayWidth", publicName: "overlayWidth", isSignal: true, isRequired: false, transformFunction: null }, overlayMaxHeight: { classPropertyName: "overlayMaxHeight", publicName: "overlayMaxHeight", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelected: "itemSelected", searchChanged: "searchChanged", searchRequested: "searchRequested", pageChanged: "pageChanged", filterChanged: "filterChanged", advancedSearchClicked: "advancedSearchClicked", allResultsClicked: "allResultsClicked", createClicked: "createClicked" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "historyListElement", first: true, predicate: ["historyListElement"], descendants: true, isSignal: true }, { propertyName: "resultsListElement", first: true, predicate: ["resultsListElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"acp-autocomplete-wrapper\" [class.acp-autocomplete-wrapper-active]=\"overlayOpen()\">\n  <!-- Input Container -->\n  <div\n    class=\"acp-autocomplete-wrapper-input-container\"\n    cdkOverlayOrigin\n    #overlayPosition=\"cdkOverlayOrigin\"\n  >\n    <div class=\"acp-autocomplete-wrapper-input-wrapper\">\n      <mat-icon class=\"acp-autocomplete-wrapper-search-icon\">search</mat-icon>\n      <input\n        #searchInput\n        type=\"text\"\n        class=\"acp-autocomplete-wrapper-input-field\"\n        [placeholder]=\"config.placeholder\"\n        [(ngModel)]=\"query\"\n        (input)=\"onInput($event)\"\n        (click)=\"showOverlay()\"\n        (keydown)=\"onKeyDown($event)\"\n        [disabled]=\"config.disabled || false\"\n        autocomplete=\"off\"\n      />\n      @if (query && query.length > 0 && !isLoading()) {\n      <button\n        mat-icon-button\n        (click)=\"clearSearch()\"\n        type=\"button\"\n        class=\"acp-autocomplete-wrapper-clear-button\"\n      >\n        <mat-icon>clear</mat-icon>\n      </button>\n      }\n      <button mat-icon-button type=\"button\">\n        <mat-icon>add</mat-icon>\n      </button>\n    </div>\n\n    @if (isLoading()) {\n    <div class=\"acp-autocomplete-wrapper-loading-spinner\">\n      <mat-spinner diameter=\"20\" />\n    </div>\n    }\n  </div>\n\n  <!-- Overlay -->\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"overlayPosition\"\n    [cdkConnectedOverlayOpen]=\"overlayOpen()\"\n    [cdkConnectedOverlayWidth]=\"overlayWidth()\"\n    [cdkConnectedOverlayHeight]=\"overlayMaxHeight()\"\n    (overlayOutsideClick)=\"hideOverlay()\"\n    (backdropClick)=\"hideOverlay()\"\n  >\n    <div class=\"autocomplete-wrapper-dropdown\" [class.autocomplete-wrapper-active]=\"overlayOpen()\">\n      <div class=\"autocomplete-wrapper-dropdown-content\">\n        <!-- History Section -->\n        @if (isHistoryVisible() && historyList().length > 0) {\n        <div class=\"autocomplete-wrapper-section\">\n          <div class=\"autocomplete-wrapper-section-header\">\n            <span class=\"autocomplete-wrapper-section-title\">B\u00FAsquedas recientes</span>\n            <button\n              type=\"button\"\n              mat-icon-button\n              (click)=\"clearHistory()\"\n              class=\"autocomplete-wrapper-clear-history-button\"\n            >\n              <mat-icon>delete_outline</mat-icon>\n            </button>\n          </div>\n          <ul\n            class=\"autocomplete-wrapper-items-list autocomplete-wrapper-scrollable-list\"\n            #historyListElement\n          >\n            @for (item of historyList(); track $index) {\n            <li class=\"autocomplete-wrapper-list-item autocomplete-wrapper-history-item\">\n              <div\n                class=\"autocomplete-wrapper-item-content\"\n                [class.autocomplete-wrapper-selected]=\"$index === selectedIndex()\"\n                tabindex=\"0\"\n                (click)=\"selectItem(item)\"\n                (keydown.enter)=\"selectItem(item)\"\n              >\n                <mat-icon class=\"autocomplete-wrapper-history-icon\">history</mat-icon>\n                <div class=\"autocomplete-wrapper-item-details\">\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                          itemTemplate() || defaultItemTemplate;\n                          context: { $implicit: item }\n                        \"\n                  />\n                </div>\n              </div>\n              <button\n                type=\"button\"\n                mat-icon-button\n                class=\"autocomplete-wrapper-remove-button\"\n                (click)=\"removeHistoryItem($index, $event)\"\n              >\n                <mat-icon>close</mat-icon>\n              </button>\n            </li>\n            }\n          </ul>\n        </div>\n        }\n\n        <!-- Results Section -->\n        @if (!isHistoryVisible()) {\n        <div class=\"autocomplete-wrapper-section\">\n          <!-- Header with filters and pagination -->\n          @if (config.enableFilters || config.enablePagination) {\n          <div class=\"autocomplete-wrapper-section-header\">\n            <span class=\"autocomplete-wrapper-section-title\">{{ sectionTitle() }}</span>\n\n            <!-- Filters -->\n            @if (config.enableFilters) {\n            <div class=\"autocomplete-wrapper-filter-controls\">\n              @if (config.searchFields && config.searchFields.length > 1) {\n              <div class=\"autocomplete-wrapper-filter-group\">\n                <label class=\"autocomplete-wrapper-filter-label\" for=\"searchBySelect\"\n                  >Buscar por:</label\n                >\n                <select\n                  id=\"searchBySelect\"\n                  class=\"autocomplete-wrapper-filter-select\"\n                  [(ngModel)]=\"filters.searchBy\"\n                  (change)=\"onFilterChange()\"\n                >\n                  @for (field of config.searchFields; track $index) {\n                  <option [value]=\"field.value\">{{ field.label }}</option>\n                  }\n                </select>\n              </div>\n              } @if (config.enableStockFilter && config.stockOptions) {\n              <div class=\"autocomplete-wrapper-filter-group\">\n                <label class=\"autocomplete-wrapper-filter-label\" for=\"stockSelect\">Stock:</label>\n                <select\n                  id=\"stockSelect\"\n                  class=\"autocomplete-wrapper-filter-select\"\n                  [(ngModel)]=\"filters.stockFilter\"\n                  (change)=\"onFilterChange()\"\n                >\n                  @for (option of config.stockOptions; track $index) {\n                  <option [value]=\"option.value\">{{ option.label }}</option>\n                  }\n                </select>\n              </div>\n              }\n            </div>\n            }\n\n            <!-- Pagination Controls -->\n            @if (config.enablePagination && totalPages() > 1) {\n            <div class=\"autocomplete-wrapper-pagination-header\">\n              <div class=\"autocomplete-wrapper-pagination-info\">\n                <span>P\u00E1gina {{ currentPage() }} de {{ totalPages() }}</span>\n              </div>\n              <div class=\"autocomplete-wrapper-pagination-controls\">\n                <button\n                  class=\"autocomplete-wrapper-pagination-button\"\n                  (click)=\"goToFirstPage()\"\n                  [disabled]=\"currentPage() === 1\"\n                >\n                  <mat-icon>first_page</mat-icon>\n                </button>\n                <button\n                  class=\"autocomplete-wrapper-pagination-button\"\n                  (click)=\"goToPreviousPage()\"\n                  [disabled]=\"currentPage() === 1\"\n                >\n                  <mat-icon>chevron_left</mat-icon>\n                </button>\n                <input\n                  type=\"number\"\n                  class=\"autocomplete-wrapper-page-input\"\n                  [value]=\"currentPage()\"\n                  [min]=\"1\"\n                  [max]=\"totalPages()\"\n                  (change)=\"goToPage($event)\"\n                />\n                <button\n                  class=\"autocomplete-wrapper-pagination-button\"\n                  (click)=\"goToNextPage()\"\n                  [disabled]=\"currentPage() === totalPages()\"\n                >\n                  <mat-icon>chevron_right</mat-icon>\n                </button>\n                <button\n                  class=\"autocomplete-wrapper-pagination-button\"\n                  (click)=\"goToLastPage()\"\n                  [disabled]=\"currentPage() === totalPages()\"\n                >\n                  <mat-icon>last_page</mat-icon>\n                </button>\n              </div>\n            </div>\n            }\n          </div>\n          } @else {\n          <div class=\"autocomplete-wrapper-section-header\">\n            <span class=\"autocomplete-wrapper-section-title\">{{ sectionTitle() }}</span>\n          </div>\n          }\n\n          <!-- Items List -->\n          @if (totalItems()) {\n          <ul\n            class=\"autocomplete-wrapper-items-list autocomplete-wrapper-scrollable-list\"\n            #resultsListElement\n          >\n            @for (item of currentPageItems(); track $index) {\n            <li class=\"autocomplete-wrapper-list-item autocomplete-wrapper-result-item\">\n              <div\n                class=\"autocomplete-wrapper-item-content\"\n                [class.autocomplete-wrapper-selected]=\"$index === selectedIndex()\"\n                tabindex=\"0\"\n                (click)=\"selectItem(item)\"\n                (keydown.enter)=\"selectItem(item)\"\n              >\n                <div class=\"autocomplete-wrapper-item-info\">\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                            itemTemplate() || defaultItemTemplate;\n                            context: { $implicit: item }\n                          \"\n                  />\n                </div>\n              </div>\n            </li>\n            }\n          </ul>\n          }\n        </div>\n        }\n\n        <!-- No Results -->\n        @if (!isLoading() && isNoResults()) {\n        <div class=\"autocomplete-wrapper-no-results\">\n          <mat-icon class=\"autocomplete-wrapper-no-results-icon\">search_off</mat-icon>\n          <div class=\"autocomplete-wrapper-no-results-content\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                  notFoundTemplate() || defaultNotFoundTemplate;\n                  context: { $implicit: noResultsText() }\n                \"\n            />\n          </div>\n        </div>\n        }\n\n        <!-- Footer -->\n        @if (overlayOpen() && totalItems() > 0) {\n        <div class=\"autocomplete-wrapper-footer\">\n          @if (!isHistoryVisible() && totalItems() > 0 && config.enablePagination) {\n          <div class=\"autocomplete-wrapper-pagination-footer\">\n            <div class=\"autocomplete-wrapper-pagination-summary\">\n              Mostrando {{ startItem() }}-{{ endItem() }} de {{ totalCount() }} resultados\n            </div>\n            <div class=\"autocomplete-wrapper-pagination-controls-footer\">\n              <button\n                class=\"autocomplete-wrapper-pagination-button\"\n                (click)=\"goToPreviousPage()\"\n                [disabled]=\"currentPage() === 1\"\n              >\n                <mat-icon>chevron_left</mat-icon>\n              </button>\n              <span class=\"autocomplete-wrapper-page-indicator\"\n                >{{ currentPage() }} / {{ totalPages() }}</span\n              >\n              <button\n                class=\"autocomplete-wrapper-pagination-button\"\n                (click)=\"goToNextPage()\"\n                [disabled]=\"currentPage() === totalPages()\"\n              >\n                <mat-icon>chevron_right</mat-icon>\n              </button>\n            </div>\n          </div>\n          } @if (config.enableFooterActions) {\n          <div class=\"autocomplete-wrapper-footer-actions\">\n            <button\n              class=\"autocomplete-wrapper-footer-button autocomplete-wrapper-create-button\"\n              (click)=\"onCreateNew($event)\"\n            >\n              <mat-icon>add</mat-icon>\n              <span class=\"autocomplete-wrapper-button-text\">Crear</span>\n            </button>\n            <button\n              class=\"autocomplete-wrapper-footer-button autocomplete-wrapper-search-button\"\n              (click)=\"onAdvancedSearch()\"\n            >\n              <mat-icon>tune</mat-icon>\n              <span class=\"autocomplete-wrapper-button-text\">Avanzada</span>\n            </button>\n            @if (!isHistoryVisible() && totalItems() > 0) {\n            <button\n              class=\"autocomplete-wrapper-footer-button autocomplete-wrapper-results-button\"\n              (click)=\"onShowAllResults()\"\n            >\n              <mat-icon>list</mat-icon>\n              <span class=\"autocomplete-wrapper-button-text\">Todos</span>\n            </button>\n            }\n          </div>\n          }\n        </div>\n        }\n      </div>\n    </div>\n  </ng-template>\n\n  <!-- Default Templates -->\n  <ng-template #defaultItemTemplate let-item>\n    <div class=\"autocomplete-wrapper-default-item\">\n      <div class=\"autocomplete-wrapper-item-name\">{{ getItemDisplayText(item) }}</div>\n      @if (item.description && typeof item === 'object') {\n      <div class=\"autocomplete-wrapper-item-description\">{{ item.description }}</div>\n      }\n    </div>\n  </ng-template>\n\n  <ng-template #defaultNotFoundTemplate let-text>\n    <div class=\"autocomplete-wrapper-default-no-results\">\n      <p>{{ text }}</p>\n      <p>Intenta con otros t\u00E9rminos de b\u00FAsqueda</p>\n    </div>\n  </ng-template>\n</div>\n", styles: [".acp-autocomplete-wrapper{display:block}.acp-autocomplete-wrapper{position:relative;width:100%;max-width:100%}.acp-autocomplete-wrapper.acp-autocomplete-wrapper-active .acp-autocomplete-wrapper-input-wrapper{border-color:#1976d2;box-shadow:0 0 0 2px #1976d21a}.acp-autocomplete-wrapper-input-container{position:relative;width:100%}.acp-autocomplete-wrapper-input-wrapper{position:relative;display:flex;align-items:center;background:var(--mat-sys-surface, white);border:1px solid var(--mat-sys-outline-variant, #e0e0e0);border-radius:8px;padding:0 12px;transition:all .3s ease}.acp-autocomplete-wrapper-input-wrapper:focus-within{border-color:#1976d2;box-shadow:0 0 0 2px #1976d21a}.acp-autocomplete-wrapper-search-icon{color:var(--mat-sys-on-surface-variant, #666);margin-right:8px;font-size:20px}.acp-autocomplete-wrapper-input-field{flex:1;border:none;outline:none;font-size:16px;padding:7px 0;background:transparent;color:var(--mat-sys-on-surface, #333)}.acp-autocomplete-wrapper-input-field::placeholder{color:var(--mat-sys-on-surface-variant, #999)}.acp-autocomplete-wrapper-input-field:disabled{opacity:.6;cursor:not-allowed}.acp-autocomplete-wrapper-clear-button{margin-left:8px;color:var(--mat-sys-on-surface-variant, #666);background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;transition:all .2s ease}.acp-autocomplete-wrapper-clear-button:hover{background-color:#0000000a;color:var(--mat-sys-on-surface, #333)}.acp-autocomplete-wrapper-loading-spinner{position:absolute;right:12px;top:50%;transform:translateY(-50%)}.acp-autocomplete-wrapper-dropdown{background:var(--mat-sys-surface-container, white);border-radius:8px;box-shadow:0 4px 20px #00000026;border:1px solid var(--mat-sys-outline-variant, #e0e0e0);overflow:hidden;max-height:500px;min-width:300px;display:flex;flex-direction:column}.acp-autocomplete-wrapper-dropdown.acp-autocomplete-wrapper-active{animation:reusableAutocompleteSlideIn .2s ease-out}@keyframes reusableAutocompleteSlideIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.acp-autocomplete-wrapper-dropdown-content{display:flex;flex-direction:column;height:100%;max-height:500px}.acp-autocomplete-wrapper-section{display:flex;flex-direction:column;height:100%;min-height:0}.acp-autocomplete-wrapper-section-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px 8px;border-bottom:1px solid var(--mat-sys-outline-variant, #f0f0f0);background:var(--mat-sys-surface-variant, #fafafa);flex-shrink:0;min-height:56px;flex-wrap:wrap;gap:12px}.acp-autocomplete-wrapper-section-title{font-size:13px;font-weight:500;color:var(--mat-sys-on-surface-variant, #666);text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}.acp-autocomplete-wrapper-clear-history-button{color:var(--mat-sys-on-surface-variant, #666);background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;transition:all .2s ease}.acp-autocomplete-wrapper-clear-history-button:hover{background-color:#0000000a;color:var(--mat-sys-on-surface, #333)}.acp-autocomplete-wrapper-filter-controls{display:flex;align-items:center;gap:16px;flex:1;justify-content:center}.acp-autocomplete-wrapper-filter-group{display:flex;align-items:center;gap:6px}.acp-autocomplete-wrapper-filter-label{font-size:12px;color:var(--mat-sys-on-surface-variant, #666);font-weight:500;white-space:nowrap}.acp-autocomplete-wrapper-filter-select{padding:4px 8px;border:1px solid var(--mat-sys-outline, #ddd);border-radius:4px;font-size:12px;background:var(--mat-sys-surface, white);color:var(--mat-sys-on-surface, #333);cursor:pointer;min-width:120px}.acp-autocomplete-wrapper-filter-select:focus{outline:none;border-color:#1976d2;box-shadow:0 0 0 1px #1976d233}.acp-autocomplete-wrapper-filter-select:hover{border-color:#bbb}.acp-autocomplete-wrapper-pagination-header{display:flex;align-items:center;gap:12px;margin-left:auto}.acp-autocomplete-wrapper-pagination-info{font-size:12px;color:var(--mat-sys-on-surface-variant, #666);white-space:nowrap}.acp-autocomplete-wrapper-pagination-controls{display:flex;align-items:center;gap:4px}.acp-autocomplete-wrapper-pagination-button{min-width:32px;height:32px;line-height:32px;padding:0;color:var(--mat-sys-on-surface-variant, #666);background:none;border:1px solid var(--mat-sys-outline, #ddd);border-radius:4px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.acp-autocomplete-wrapper-pagination-button:hover:not(:disabled){background-color:#0000000a;color:var(--mat-sys-on-surface, #333)}.acp-autocomplete-wrapper-pagination-button:disabled{opacity:.5;cursor:not-allowed}.acp-autocomplete-wrapper-pagination-button mat-icon{font-size:18px;width:18px;height:18px}.acp-autocomplete-wrapper-page-input{width:50px;height:32px;border:1px solid var(--mat-sys-outline, #ddd);border-radius:4px;text-align:center;font-size:12px;padding:4px;margin:0 4px}.acp-autocomplete-wrapper-page-input:focus{outline:none;border-color:#1976d2}.acp-autocomplete-wrapper-items-list{list-style:none;margin:0;padding:0;flex:1;min-height:0}.acp-autocomplete-wrapper-items-list.acp-autocomplete-wrapper-scrollable-list{overflow-y:auto}.acp-autocomplete-wrapper-list-item{display:flex;align-items:center;border-bottom:1px solid var(--mat-sys-outline-variant, #f5f5f5);transition:background-color .2s ease}.acp-autocomplete-wrapper-list-item:last-child{border-bottom:none}.acp-autocomplete-wrapper-list-item:hover{background-color:var(--mat-sys-surface-variant, #f8f9fa)}.acp-autocomplete-wrapper-item-content{flex:1;display:flex;align-items:center;padding:12px 16px;cursor:pointer;min-height:48px;transition:all .2s ease}.acp-autocomplete-wrapper-item-content.acp-autocomplete-wrapper-selected{background-color:var(--mat-sys-primary-container, #e3f2fd);color:var(--mat-sys-on-primary-container, #1976d2)}.acp-autocomplete-wrapper-history-item .acp-autocomplete-wrapper-item-content{padding-left:12px}.acp-autocomplete-wrapper-history-icon{color:var(--mat-sys-on-surface-variant, #999);margin-right:12px;font-size:18px}.acp-autocomplete-wrapper-item-details{flex:1;display:flex;align-items:center}.acp-autocomplete-wrapper-remove-button{margin-right:8px}.acp-autocomplete-wrapper-result-item{position:relative}.acp-autocomplete-wrapper-item-info{flex:1;display:flex;align-items:center}.acp-autocomplete-wrapper-default-item{flex:1}.acp-autocomplete-wrapper-default-item .acp-autocomplete-wrapper-item-name{font-weight:500;font-size:14px;margin-bottom:2px;color:var(--mat-sys-on-surface, #333)}.acp-autocomplete-wrapper-default-item .acp-autocomplete-wrapper-item-description{font-size:12px;color:var(--mat-sys-on-surface-variant, #666);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.acp-autocomplete-wrapper-no-results{display:flex;flex-direction:column;align-items:center;padding:32px 16px;text-align:center;color:var(--mat-sys-on-surface-variant, #666)}.acp-autocomplete-wrapper-no-results-icon{font-size:48px;color:var(--mat-sys-outline, #ccc);margin-bottom:16px;width:45px;height:45px}.acp-autocomplete-wrapper-no-results-content{font-size:14px;line-height:1.5}.acp-autocomplete-wrapper-default-no-results{text-align:center}.acp-autocomplete-wrapper-default-no-results p:first-child{font-weight:500;margin-bottom:8px}.acp-autocomplete-wrapper-footer{border-top:1px solid var(--mat-sys-outline-variant, #f0f0f0);background:var(--mat-sys-surface-variant, #fafafa);flex-shrink:0;padding:12px 16px;display:flex;flex-direction:column;gap:12px}.acp-autocomplete-wrapper-pagination-footer{display:flex;align-items:center;justify-content:space-between;width:100%;gap:16px}.acp-autocomplete-wrapper-pagination-summary{font-size:12px;color:var(--mat-sys-on-surface-variant, #666);white-space:nowrap}.acp-autocomplete-wrapper-pagination-controls-footer{display:flex;align-items:center;gap:8px}.acp-autocomplete-wrapper-page-indicator{font-size:12px;color:var(--mat-sys-on-surface-variant, #666);min-width:40px;text-align:center}.acp-autocomplete-wrapper-footer-actions{display:flex;gap:8px;flex-wrap:wrap}.acp-autocomplete-wrapper-footer-button{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;min-height:40px;font-size:13px;text-transform:none;white-space:nowrap;background:none;border:1px solid var(--mat-sys-outline, #ddd);border-radius:4px;cursor:pointer;padding:8px 12px;transition:all .2s ease}.acp-autocomplete-wrapper-footer-button.acp-autocomplete-wrapper-create-button{background-color:#4caf500a;border-color:#4caf50;color:#4caf50}.acp-autocomplete-wrapper-footer-button.acp-autocomplete-wrapper-create-button:hover{background-color:#4caf5014}.acp-autocomplete-wrapper-footer-button.acp-autocomplete-wrapper-search-button{background-color:#ff98000a;border-color:#ff9800;color:#ff9800}.acp-autocomplete-wrapper-footer-button.acp-autocomplete-wrapper-search-button:hover{background-color:#ff980014}.acp-autocomplete-wrapper-footer-button.acp-autocomplete-wrapper-results-button{background-color:#3f51b50a;border-color:#3f51b5;color:#3f51b5}.acp-autocomplete-wrapper-footer-button.acp-autocomplete-wrapper-results-button:hover{background-color:#3f51b514}.acp-autocomplete-wrapper-button-text{display:inline}.acp-autocomplete-wrapper-items-list::-webkit-scrollbar{width:6px}.acp-autocomplete-wrapper-items-list::-webkit-scrollbar-track{background:var(--mat-sys-surface-variant, #f1f1f1);border-radius:3px}.acp-autocomplete-wrapper-items-list::-webkit-scrollbar-thumb{background:var(--mat-sys-outline, #c1c1c1);border-radius:3px}.acp-autocomplete-wrapper-items-list::-webkit-scrollbar-thumb:hover{background:var(--mat-sys-on-surface-variant, #a8a8a8)}@media(max-width:768px){.acp-autocomplete-wrapper-dropdown{min-width:280px;max-height:60vh}.acp-autocomplete-wrapper-dropdown-content{max-height:60vh}.acp-autocomplete-wrapper-input-field{font-size:16px}.acp-autocomplete-wrapper-footer{padding:8px 12px}.acp-autocomplete-wrapper-footer-actions{flex-direction:column;gap:6px}.acp-autocomplete-wrapper-footer-button{width:100%;min-height:44px}.acp-autocomplete-wrapper-pagination-footer{flex-direction:column;gap:8px}.acp-autocomplete-wrapper-section-header{flex-direction:column;align-items:flex-start;min-height:80px;gap:8px}.acp-autocomplete-wrapper-filter-controls{width:100%;justify-content:flex-start;flex-wrap:wrap;gap:12px}.acp-autocomplete-wrapper-filter-select{min-width:100px;font-size:11px}.acp-autocomplete-wrapper-filter-label{font-size:11px}.acp-autocomplete-wrapper-pagination-header{width:100%;justify-content:space-between}.acp-autocomplete-wrapper-pagination-header .acp-autocomplete-wrapper-pagination-info{display:none}.acp-autocomplete-wrapper-pagination-controls{gap:2px}.acp-autocomplete-wrapper-page-input{width:40px}.acp-autocomplete-wrapper-item-content{padding:16px 12px;min-height:52px}.acp-autocomplete-wrapper-button-text{font-size:12px}.acp-autocomplete-wrapper-items-list.acp-autocomplete-wrapper-scrollable-list{max-height:250px}}@media(max-width:480px){.acp-autocomplete-wrapper-dropdown{min-width:260px;max-height:50vh}.acp-autocomplete-wrapper-section-header{padding:8px 12px 6px;min-height:70px;gap:6px}.acp-autocomplete-wrapper-filter-controls{gap:8px}.acp-autocomplete-wrapper-filter-group{gap:4px}.acp-autocomplete-wrapper-filter-select{min-width:90px;padding:3px 6px}.acp-autocomplete-wrapper-item-content{padding:14px 12px}.acp-autocomplete-wrapper-pagination-header{gap:8px}.acp-autocomplete-wrapper-pagination-button{min-width:28px;height:28px}.acp-autocomplete-wrapper-page-input{width:35px;height:28px}.acp-autocomplete-wrapper-items-list.acp-autocomplete-wrapper-scrollable-list{max-height:200px}.acp-autocomplete-wrapper-footer-actions{gap:4px}.acp-autocomplete-wrapper-footer-button{font-size:12px;padding:8px 12px;min-height:40px}.acp-autocomplete-wrapper-button-text{display:none}}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$4.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$4.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ReusableAutocompleteComponent, isStandalone: true, selector: "acp-autocomplete-wrapper", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: false, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, searchFunction: { classPropertyName: "searchFunction", publicName: "searchFunction", isSignal: true, isRequired: false, transformFunction: null }, notFoundTemplate: { classPropertyName: "notFoundTemplate", publicName: "notFoundTemplate", isSignal: true, isRequired: false, transformFunction: null }, overlayWidth: { classPropertyName: "overlayWidth", publicName: "overlayWidth", isSignal: true, isRequired: false, transformFunction: null }, overlayMaxHeight: { classPropertyName: "overlayMaxHeight", publicName: "overlayMaxHeight", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelected: "itemSelected", searchChanged: "searchChanged", searchRequested: "searchRequested", pageChanged: "pageChanged", filterChanged: "filterChanged", advancedSearchClicked: "advancedSearchClicked", allResultsClicked: "allResultsClicked", createClicked: "createClicked" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "historyListElement", first: true, predicate: ["historyListElement"], descendants: true, isSignal: true }, { propertyName: "resultsListElement", first: true, predicate: ["resultsListElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"acp-autocomplete-wrapper\" [class.acp-autocomplete-wrapper-active]=\"overlayOpen()\">\n  <!-- Input Container -->\n  <div\n    class=\"acp-autocomplete-wrapper-input-container\"\n    cdkOverlayOrigin\n    #overlayPosition=\"cdkOverlayOrigin\"\n  >\n    <div class=\"acp-autocomplete-wrapper-input-wrapper\">\n      <mat-icon class=\"acp-autocomplete-wrapper-search-icon\">search</mat-icon>\n      <input\n        #searchInput\n        type=\"text\"\n        class=\"acp-autocomplete-wrapper-input-field\"\n        [placeholder]=\"config.placeholder\"\n        [(ngModel)]=\"query\"\n        (input)=\"onInput($event)\"\n        (click)=\"showOverlay()\"\n        (keydown)=\"onKeyDown($event)\"\n        [disabled]=\"config.disabled || false\"\n        autocomplete=\"off\"\n      />\n      @if (query && query.length > 0 && !isLoading()) {\n      <button\n        mat-icon-button\n        (click)=\"clearSearch()\"\n        type=\"button\"\n        class=\"acp-autocomplete-wrapper-clear-button\"\n      >\n        <mat-icon>clear</mat-icon>\n      </button>\n      }\n      <button mat-icon-button type=\"button\">\n        <mat-icon>add</mat-icon>\n      </button>\n    </div>\n\n    @if (isLoading()) {\n    <div class=\"acp-autocomplete-wrapper-loading-spinner\">\n      <mat-spinner diameter=\"20\" />\n    </div>\n    }\n  </div>\n\n  <!-- Overlay -->\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"overlayPosition\"\n    [cdkConnectedOverlayOpen]=\"overlayOpen()\"\n    [cdkConnectedOverlayWidth]=\"overlayWidth()\"\n    [cdkConnectedOverlayHeight]=\"overlayMaxHeight()\"\n    (overlayOutsideClick)=\"hideOverlay()\"\n    (backdropClick)=\"hideOverlay()\"\n  >\n    <div class=\"autocomplete-wrapper-dropdown\" [class.autocomplete-wrapper-active]=\"overlayOpen()\">\n      <div class=\"autocomplete-wrapper-dropdown-content\">\n        <!-- History Section -->\n        @if (isHistoryVisible() && historyList().length > 0) {\n        <div class=\"autocomplete-wrapper-section\">\n          <div class=\"autocomplete-wrapper-section-header\">\n            <span class=\"autocomplete-wrapper-section-title\">B\u00FAsquedas recientes</span>\n            <button\n              type=\"button\"\n              mat-icon-button\n              (click)=\"clearHistory()\"\n              class=\"autocomplete-wrapper-clear-history-button\"\n            >\n              <mat-icon>delete_outline</mat-icon>\n            </button>\n          </div>\n          <ul\n            class=\"autocomplete-wrapper-items-list autocomplete-wrapper-scrollable-list\"\n            #historyListElement\n          >\n            @for (item of historyList(); track $index) {\n            <li class=\"autocomplete-wrapper-list-item autocomplete-wrapper-history-item\">\n              <div\n                class=\"autocomplete-wrapper-item-content\"\n                [class.autocomplete-wrapper-selected]=\"$index === selectedIndex()\"\n                tabindex=\"0\"\n                (click)=\"selectItem(item)\"\n                (keydown.enter)=\"selectItem(item)\"\n              >\n                <mat-icon class=\"autocomplete-wrapper-history-icon\">history</mat-icon>\n                <div class=\"autocomplete-wrapper-item-details\">\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                          itemTemplate() || defaultItemTemplate;\n                          context: { $implicit: item }\n                        \"\n                  />\n                </div>\n              </div>\n              <button\n                type=\"button\"\n                mat-icon-button\n                class=\"autocomplete-wrapper-remove-button\"\n                (click)=\"removeHistoryItem($index, $event)\"\n              >\n                <mat-icon>close</mat-icon>\n              </button>\n            </li>\n            }\n          </ul>\n        </div>\n        }\n\n        <!-- Results Section -->\n        @if (!isHistoryVisible()) {\n        <div class=\"autocomplete-wrapper-section\">\n          <!-- Header with filters and pagination -->\n          @if (config.enableFilters || config.enablePagination) {\n          <div class=\"autocomplete-wrapper-section-header\">\n            <span class=\"autocomplete-wrapper-section-title\">{{ sectionTitle() }}</span>\n\n            <!-- Filters -->\n            @if (config.enableFilters) {\n            <div class=\"autocomplete-wrapper-filter-controls\">\n              @if (config.searchFields && config.searchFields.length > 1) {\n              <div class=\"autocomplete-wrapper-filter-group\">\n                <label class=\"autocomplete-wrapper-filter-label\" for=\"searchBySelect\"\n                  >Buscar por:</label\n                >\n                <select\n                  id=\"searchBySelect\"\n                  class=\"autocomplete-wrapper-filter-select\"\n                  [(ngModel)]=\"filters.searchBy\"\n                  (change)=\"onFilterChange()\"\n                >\n                  @for (field of config.searchFields; track $index) {\n                  <option [value]=\"field.value\">{{ field.label }}</option>\n                  }\n                </select>\n              </div>\n              } @if (config.enableStockFilter && config.stockOptions) {\n              <div class=\"autocomplete-wrapper-filter-group\">\n                <label class=\"autocomplete-wrapper-filter-label\" for=\"stockSelect\">Stock:</label>\n                <select\n                  id=\"stockSelect\"\n                  class=\"autocomplete-wrapper-filter-select\"\n                  [(ngModel)]=\"filters.stockFilter\"\n                  (change)=\"onFilterChange()\"\n                >\n                  @for (option of config.stockOptions; track $index) {\n                  <option [value]=\"option.value\">{{ option.label }}</option>\n                  }\n                </select>\n              </div>\n              }\n            </div>\n            }\n\n            <!-- Pagination Controls -->\n            @if (config.enablePagination && totalPages() > 1) {\n            <div class=\"autocomplete-wrapper-pagination-header\">\n              <div class=\"autocomplete-wrapper-pagination-info\">\n                <span>P\u00E1gina {{ currentPage() }} de {{ totalPages() }}</span>\n              </div>\n              <div class=\"autocomplete-wrapper-pagination-controls\">\n                <button\n                  class=\"autocomplete-wrapper-pagination-button\"\n                  (click)=\"goToFirstPage()\"\n                  [disabled]=\"currentPage() === 1\"\n                >\n                  <mat-icon>first_page</mat-icon>\n                </button>\n                <button\n                  class=\"autocomplete-wrapper-pagination-button\"\n                  (click)=\"goToPreviousPage()\"\n                  [disabled]=\"currentPage() === 1\"\n                >\n                  <mat-icon>chevron_left</mat-icon>\n                </button>\n                <input\n                  type=\"number\"\n                  class=\"autocomplete-wrapper-page-input\"\n                  [value]=\"currentPage()\"\n                  [min]=\"1\"\n                  [max]=\"totalPages()\"\n                  (change)=\"goToPage($event)\"\n                />\n                <button\n                  class=\"autocomplete-wrapper-pagination-button\"\n                  (click)=\"goToNextPage()\"\n                  [disabled]=\"currentPage() === totalPages()\"\n                >\n                  <mat-icon>chevron_right</mat-icon>\n                </button>\n                <button\n                  class=\"autocomplete-wrapper-pagination-button\"\n                  (click)=\"goToLastPage()\"\n                  [disabled]=\"currentPage() === totalPages()\"\n                >\n                  <mat-icon>last_page</mat-icon>\n                </button>\n              </div>\n            </div>\n            }\n          </div>\n          } @else {\n          <div class=\"autocomplete-wrapper-section-header\">\n            <span class=\"autocomplete-wrapper-section-title\">{{ sectionTitle() }}</span>\n          </div>\n          }\n\n          <!-- Items List -->\n          @if (totalItems()) {\n          <ul\n            class=\"autocomplete-wrapper-items-list autocomplete-wrapper-scrollable-list\"\n            #resultsListElement\n          >\n            @for (item of currentPageItems(); track $index) {\n            <li class=\"autocomplete-wrapper-list-item autocomplete-wrapper-result-item\">\n              <div\n                class=\"autocomplete-wrapper-item-content\"\n                [class.autocomplete-wrapper-selected]=\"$index === selectedIndex()\"\n                tabindex=\"0\"\n                (click)=\"selectItem(item)\"\n                (keydown.enter)=\"selectItem(item)\"\n              >\n                <div class=\"autocomplete-wrapper-item-info\">\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                            itemTemplate() || defaultItemTemplate;\n                            context: { $implicit: item }\n                          \"\n                  />\n                </div>\n              </div>\n            </li>\n            }\n          </ul>\n          }\n        </div>\n        }\n\n        <!-- No Results -->\n        @if (!isLoading() && isNoResults()) {\n        <div class=\"autocomplete-wrapper-no-results\">\n          <mat-icon class=\"autocomplete-wrapper-no-results-icon\">search_off</mat-icon>\n          <div class=\"autocomplete-wrapper-no-results-content\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                  notFoundTemplate() || defaultNotFoundTemplate;\n                  context: { $implicit: noResultsText() }\n                \"\n            />\n          </div>\n        </div>\n        }\n\n        <!-- Footer -->\n        @if (overlayOpen() && totalItems() > 0) {\n        <div class=\"autocomplete-wrapper-footer\">\n          @if (!isHistoryVisible() && totalItems() > 0 && config.enablePagination) {\n          <div class=\"autocomplete-wrapper-pagination-footer\">\n            <div class=\"autocomplete-wrapper-pagination-summary\">\n              Mostrando {{ startItem() }}-{{ endItem() }} de {{ totalCount() }} resultados\n            </div>\n            <div class=\"autocomplete-wrapper-pagination-controls-footer\">\n              <button\n                class=\"autocomplete-wrapper-pagination-button\"\n                (click)=\"goToPreviousPage()\"\n                [disabled]=\"currentPage() === 1\"\n              >\n                <mat-icon>chevron_left</mat-icon>\n              </button>\n              <span class=\"autocomplete-wrapper-page-indicator\"\n                >{{ currentPage() }} / {{ totalPages() }}</span\n              >\n              <button\n                class=\"autocomplete-wrapper-pagination-button\"\n                (click)=\"goToNextPage()\"\n                [disabled]=\"currentPage() === totalPages()\"\n              >\n                <mat-icon>chevron_right</mat-icon>\n              </button>\n            </div>\n          </div>\n          } @if (config.enableFooterActions) {\n          <div class=\"autocomplete-wrapper-footer-actions\">\n            <button\n              class=\"autocomplete-wrapper-footer-button autocomplete-wrapper-create-button\"\n              (click)=\"onCreateNew($event)\"\n            >\n              <mat-icon>add</mat-icon>\n              <span class=\"autocomplete-wrapper-button-text\">Crear</span>\n            </button>\n            <button\n              class=\"autocomplete-wrapper-footer-button autocomplete-wrapper-search-button\"\n              (click)=\"onAdvancedSearch()\"\n            >\n              <mat-icon>tune</mat-icon>\n              <span class=\"autocomplete-wrapper-button-text\">Avanzada</span>\n            </button>\n            @if (!isHistoryVisible() && totalItems() > 0) {\n            <button\n              class=\"autocomplete-wrapper-footer-button autocomplete-wrapper-results-button\"\n              (click)=\"onShowAllResults()\"\n            >\n              <mat-icon>list</mat-icon>\n              <span class=\"autocomplete-wrapper-button-text\">Todos</span>\n            </button>\n            }\n          </div>\n          }\n        </div>\n        }\n      </div>\n    </div>\n  </ng-template>\n\n  <!-- Default Templates -->\n  <ng-template #defaultItemTemplate let-item>\n    <div class=\"autocomplete-wrapper-default-item\">\n      <div class=\"autocomplete-wrapper-item-name\">{{ getItemDisplayText(item) }}</div>\n      @if (item.description && typeof item === 'object') {\n      <div class=\"autocomplete-wrapper-item-description\">{{ item.description }}</div>\n      }\n    </div>\n  </ng-template>\n\n  <ng-template #defaultNotFoundTemplate let-text>\n    <div class=\"autocomplete-wrapper-default-no-results\">\n      <p>{{ text }}</p>\n      <p>Intenta con otros t\u00E9rminos de b\u00FAsqueda</p>\n    </div>\n  </ng-template>\n</div>\n", styles: [".acp-autocomplete-wrapper{display:block}.acp-autocomplete-wrapper{position:relative;width:100%;max-width:100%}.acp-autocomplete-wrapper.acp-autocomplete-wrapper-active .acp-autocomplete-wrapper-input-wrapper{border-color:#1976d2;box-shadow:0 0 0 2px #1976d21a}.acp-autocomplete-wrapper-input-container{position:relative;width:100%}.acp-autocomplete-wrapper-input-wrapper{position:relative;display:flex;align-items:center;background:var(--mat-sys-surface, white);border:1px solid var(--mat-sys-outline-variant, #e0e0e0);border-radius:8px;padding:0 12px;transition:all .3s ease}.acp-autocomplete-wrapper-input-wrapper:focus-within{border-color:#1976d2;box-shadow:0 0 0 2px #1976d21a}.acp-autocomplete-wrapper-search-icon{color:var(--mat-sys-on-surface-variant, #666);margin-right:8px;font-size:20px}.acp-autocomplete-wrapper-input-field{flex:1;border:none;outline:none;font-size:16px;padding:7px 0;background:transparent;color:var(--mat-sys-on-surface, #333)}.acp-autocomplete-wrapper-input-field::placeholder{color:var(--mat-sys-on-surface-variant, #999)}.acp-autocomplete-wrapper-input-field:disabled{opacity:.6;cursor:not-allowed}.acp-autocomplete-wrapper-clear-button{margin-left:8px;color:var(--mat-sys-on-surface-variant, #666);background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;transition:all .2s ease}.acp-autocomplete-wrapper-clear-button:hover{background-color:#0000000a;color:var(--mat-sys-on-surface, #333)}.acp-autocomplete-wrapper-loading-spinner{position:absolute;right:12px;top:50%;transform:translateY(-50%)}.acp-autocomplete-wrapper-dropdown{background:var(--mat-sys-surface-container, white);border-radius:8px;box-shadow:0 4px 20px #00000026;border:1px solid var(--mat-sys-outline-variant, #e0e0e0);overflow:hidden;max-height:500px;min-width:300px;display:flex;flex-direction:column}.acp-autocomplete-wrapper-dropdown.acp-autocomplete-wrapper-active{animation:reusableAutocompleteSlideIn .2s ease-out}@keyframes reusableAutocompleteSlideIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.acp-autocomplete-wrapper-dropdown-content{display:flex;flex-direction:column;height:100%;max-height:500px}.acp-autocomplete-wrapper-section{display:flex;flex-direction:column;height:100%;min-height:0}.acp-autocomplete-wrapper-section-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px 8px;border-bottom:1px solid var(--mat-sys-outline-variant, #f0f0f0);background:var(--mat-sys-surface-variant, #fafafa);flex-shrink:0;min-height:56px;flex-wrap:wrap;gap:12px}.acp-autocomplete-wrapper-section-title{font-size:13px;font-weight:500;color:var(--mat-sys-on-surface-variant, #666);text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}.acp-autocomplete-wrapper-clear-history-button{color:var(--mat-sys-on-surface-variant, #666);background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;transition:all .2s ease}.acp-autocomplete-wrapper-clear-history-button:hover{background-color:#0000000a;color:var(--mat-sys-on-surface, #333)}.acp-autocomplete-wrapper-filter-controls{display:flex;align-items:center;gap:16px;flex:1;justify-content:center}.acp-autocomplete-wrapper-filter-group{display:flex;align-items:center;gap:6px}.acp-autocomplete-wrapper-filter-label{font-size:12px;color:var(--mat-sys-on-surface-variant, #666);font-weight:500;white-space:nowrap}.acp-autocomplete-wrapper-filter-select{padding:4px 8px;border:1px solid var(--mat-sys-outline, #ddd);border-radius:4px;font-size:12px;background:var(--mat-sys-surface, white);color:var(--mat-sys-on-surface, #333);cursor:pointer;min-width:120px}.acp-autocomplete-wrapper-filter-select:focus{outline:none;border-color:#1976d2;box-shadow:0 0 0 1px #1976d233}.acp-autocomplete-wrapper-filter-select:hover{border-color:#bbb}.acp-autocomplete-wrapper-pagination-header{display:flex;align-items:center;gap:12px;margin-left:auto}.acp-autocomplete-wrapper-pagination-info{font-size:12px;color:var(--mat-sys-on-surface-variant, #666);white-space:nowrap}.acp-autocomplete-wrapper-pagination-controls{display:flex;align-items:center;gap:4px}.acp-autocomplete-wrapper-pagination-button{min-width:32px;height:32px;line-height:32px;padding:0;color:var(--mat-sys-on-surface-variant, #666);background:none;border:1px solid var(--mat-sys-outline, #ddd);border-radius:4px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.acp-autocomplete-wrapper-pagination-button:hover:not(:disabled){background-color:#0000000a;color:var(--mat-sys-on-surface, #333)}.acp-autocomplete-wrapper-pagination-button:disabled{opacity:.5;cursor:not-allowed}.acp-autocomplete-wrapper-pagination-button mat-icon{font-size:18px;width:18px;height:18px}.acp-autocomplete-wrapper-page-input{width:50px;height:32px;border:1px solid var(--mat-sys-outline, #ddd);border-radius:4px;text-align:center;font-size:12px;padding:4px;margin:0 4px}.acp-autocomplete-wrapper-page-input:focus{outline:none;border-color:#1976d2}.acp-autocomplete-wrapper-items-list{list-style:none;margin:0;padding:0;flex:1;min-height:0}.acp-autocomplete-wrapper-items-list.acp-autocomplete-wrapper-scrollable-list{overflow-y:auto}.acp-autocomplete-wrapper-list-item{display:flex;align-items:center;border-bottom:1px solid var(--mat-sys-outline-variant, #f5f5f5);transition:background-color .2s ease}.acp-autocomplete-wrapper-list-item:last-child{border-bottom:none}.acp-autocomplete-wrapper-list-item:hover{background-color:var(--mat-sys-surface-variant, #f8f9fa)}.acp-autocomplete-wrapper-item-content{flex:1;display:flex;align-items:center;padding:12px 16px;cursor:pointer;min-height:48px;transition:all .2s ease}.acp-autocomplete-wrapper-item-content.acp-autocomplete-wrapper-selected{background-color:var(--mat-sys-primary-container, #e3f2fd);color:var(--mat-sys-on-primary-container, #1976d2)}.acp-autocomplete-wrapper-history-item .acp-autocomplete-wrapper-item-content{padding-left:12px}.acp-autocomplete-wrapper-history-icon{color:var(--mat-sys-on-surface-variant, #999);margin-right:12px;font-size:18px}.acp-autocomplete-wrapper-item-details{flex:1;display:flex;align-items:center}.acp-autocomplete-wrapper-remove-button{margin-right:8px}.acp-autocomplete-wrapper-result-item{position:relative}.acp-autocomplete-wrapper-item-info{flex:1;display:flex;align-items:center}.acp-autocomplete-wrapper-default-item{flex:1}.acp-autocomplete-wrapper-default-item .acp-autocomplete-wrapper-item-name{font-weight:500;font-size:14px;margin-bottom:2px;color:var(--mat-sys-on-surface, #333)}.acp-autocomplete-wrapper-default-item .acp-autocomplete-wrapper-item-description{font-size:12px;color:var(--mat-sys-on-surface-variant, #666);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.acp-autocomplete-wrapper-no-results{display:flex;flex-direction:column;align-items:center;padding:32px 16px;text-align:center;color:var(--mat-sys-on-surface-variant, #666)}.acp-autocomplete-wrapper-no-results-icon{font-size:48px;color:var(--mat-sys-outline, #ccc);margin-bottom:16px;width:45px;height:45px}.acp-autocomplete-wrapper-no-results-content{font-size:14px;line-height:1.5}.acp-autocomplete-wrapper-default-no-results{text-align:center}.acp-autocomplete-wrapper-default-no-results p:first-child{font-weight:500;margin-bottom:8px}.acp-autocomplete-wrapper-footer{border-top:1px solid var(--mat-sys-outline-variant, #f0f0f0);background:var(--mat-sys-surface-variant, #fafafa);flex-shrink:0;padding:12px 16px;display:flex;flex-direction:column;gap:12px}.acp-autocomplete-wrapper-pagination-footer{display:flex;align-items:center;justify-content:space-between;width:100%;gap:16px}.acp-autocomplete-wrapper-pagination-summary{font-size:12px;color:var(--mat-sys-on-surface-variant, #666);white-space:nowrap}.acp-autocomplete-wrapper-pagination-controls-footer{display:flex;align-items:center;gap:8px}.acp-autocomplete-wrapper-page-indicator{font-size:12px;color:var(--mat-sys-on-surface-variant, #666);min-width:40px;text-align:center}.acp-autocomplete-wrapper-footer-actions{display:flex;gap:8px;flex-wrap:wrap}.acp-autocomplete-wrapper-footer-button{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;min-height:40px;font-size:13px;text-transform:none;white-space:nowrap;background:none;border:1px solid var(--mat-sys-outline, #ddd);border-radius:4px;cursor:pointer;padding:8px 12px;transition:all .2s ease}.acp-autocomplete-wrapper-footer-button.acp-autocomplete-wrapper-create-button{background-color:#4caf500a;border-color:#4caf50;color:#4caf50}.acp-autocomplete-wrapper-footer-button.acp-autocomplete-wrapper-create-button:hover{background-color:#4caf5014}.acp-autocomplete-wrapper-footer-button.acp-autocomplete-wrapper-search-button{background-color:#ff98000a;border-color:#ff9800;color:#ff9800}.acp-autocomplete-wrapper-footer-button.acp-autocomplete-wrapper-search-button:hover{background-color:#ff980014}.acp-autocomplete-wrapper-footer-button.acp-autocomplete-wrapper-results-button{background-color:#3f51b50a;border-color:#3f51b5;color:#3f51b5}.acp-autocomplete-wrapper-footer-button.acp-autocomplete-wrapper-results-button:hover{background-color:#3f51b514}.acp-autocomplete-wrapper-button-text{display:inline}.acp-autocomplete-wrapper-items-list::-webkit-scrollbar{width:6px}.acp-autocomplete-wrapper-items-list::-webkit-scrollbar-track{background:var(--mat-sys-surface-variant, #f1f1f1);border-radius:3px}.acp-autocomplete-wrapper-items-list::-webkit-scrollbar-thumb{background:var(--mat-sys-outline, #c1c1c1);border-radius:3px}.acp-autocomplete-wrapper-items-list::-webkit-scrollbar-thumb:hover{background:var(--mat-sys-on-surface-variant, #a8a8a8)}@media(max-width:768px){.acp-autocomplete-wrapper-dropdown{min-width:280px;max-height:60vh}.acp-autocomplete-wrapper-dropdown-content{max-height:60vh}.acp-autocomplete-wrapper-input-field{font-size:16px}.acp-autocomplete-wrapper-footer{padding:8px 12px}.acp-autocomplete-wrapper-footer-actions{flex-direction:column;gap:6px}.acp-autocomplete-wrapper-footer-button{width:100%;min-height:44px}.acp-autocomplete-wrapper-pagination-footer{flex-direction:column;gap:8px}.acp-autocomplete-wrapper-section-header{flex-direction:column;align-items:flex-start;min-height:80px;gap:8px}.acp-autocomplete-wrapper-filter-controls{width:100%;justify-content:flex-start;flex-wrap:wrap;gap:12px}.acp-autocomplete-wrapper-filter-select{min-width:100px;font-size:11px}.acp-autocomplete-wrapper-filter-label{font-size:11px}.acp-autocomplete-wrapper-pagination-header{width:100%;justify-content:space-between}.acp-autocomplete-wrapper-pagination-header .acp-autocomplete-wrapper-pagination-info{display:none}.acp-autocomplete-wrapper-pagination-controls{gap:2px}.acp-autocomplete-wrapper-page-input{width:40px}.acp-autocomplete-wrapper-item-content{padding:16px 12px;min-height:52px}.acp-autocomplete-wrapper-button-text{font-size:12px}.acp-autocomplete-wrapper-items-list.acp-autocomplete-wrapper-scrollable-list{max-height:250px}}@media(max-width:480px){.acp-autocomplete-wrapper-dropdown{min-width:260px;max-height:50vh}.acp-autocomplete-wrapper-section-header{padding:8px 12px 6px;min-height:70px;gap:6px}.acp-autocomplete-wrapper-filter-controls{gap:8px}.acp-autocomplete-wrapper-filter-group{gap:4px}.acp-autocomplete-wrapper-filter-select{min-width:90px;padding:3px 6px}.acp-autocomplete-wrapper-item-content{padding:14px 12px}.acp-autocomplete-wrapper-pagination-header{gap:8px}.acp-autocomplete-wrapper-pagination-button{min-width:28px;height:28px}.acp-autocomplete-wrapper-page-input{width:35px;height:28px}.acp-autocomplete-wrapper-items-list.acp-autocomplete-wrapper-scrollable-list{max-height:200px}.acp-autocomplete-wrapper-footer-actions{gap:4px}.acp-autocomplete-wrapper-footer-button{font-size:12px;padding:8px 12px;min-height:40px}.acp-autocomplete-wrapper-button-text{display:none}}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$3.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$3.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ReusableAutocompleteComponent, decorators: [{
             type: Component,
@@ -2939,7 +2579,7 @@ class DataGridCell {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DataGridCell, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: DataGridCell, isStandalone: true, selector: "acp-data-grid-cell", inputs: { rowData: { classPropertyName: "rowData", publicName: "rowData", isSignal: true, isRequired: false, transformFunction: null }, colDef: { classPropertyName: "colDef", publicName: "colDef", isSignal: true, isRequired: false, transformFunction: null }, summary: { classPropertyName: "summary", publicName: "summary", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowDataChange: "rowDataChange" }, ngImport: i0, template: "@if (summary()) {\n<span\n  [title]=\"_getFormatterTooltip(data() | cellSummary: colDef())\"\n  [innerHTML]=\"_getText(data() | cellSummary: colDef())\"\n>\n</span>\n} @else {\n<!-- Custom formatting -->\n@if (colDef().formatter) {\n<span\n  [title]=\"_getFormatterTooltip(colDef().formatter(rowData(), colDef()))\"\n  [innerHTML]=\"_getText(colDef().formatter(rowData(), colDef()))\"\n>\n</span>\n} @else {\n<!-- Default formatting -->\n@switch (colDef().type) {\n<!-- Buttons -->\n@case ('button') { @for ( btn of colDef().buttons | cellActions: rowData() : rowChangeRecord :\nrowChangeRecord?.currentValue; track btn ) { @if (!btn.iif || btn.iif(rowData())) { @if\n(btn.children && btn.children.length > 0) { @if (btn.type === 'icon') {\n<button\n  matIconButton\n  [color]=\"btn.color || 'primary'\"\n  type=\"button\"\n  class=\"acp-grid-action-button\"\n  [class]=\"btn.class\"\n  [disabled]=\"\n                    btn\n                      | cellActionDisable\n                        : rowData()\n                        : rowChangeRecord\n                        : rowChangeRecord?.currentValue\n                  \"\n  [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n  [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n  [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n  [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n  [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n  [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n  [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n  [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n  [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n  [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n  [matBadgeColor]=\"(btn | cellActionBadge).color\"\n  [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n  [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n  [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n  [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n  [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n  [matMenuTriggerFor]=\"\n                    btn.children && btn.children.length > 0 ? gridMenu.menu : null\n                  \"\n  (click)=\"$event.stopPropagation()\"\n>\n  <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\" />\n</button>\n\n<acp-data-grid-menu #gridMenu [items]=\"btn.children || []\" [data]=\"rowData()\" />\n} @else {\n<button\n  [matButton]=\"btn.type || 'text'\"\n  [color]=\"btn.color || 'primary'\"\n  type=\"button\"\n  class=\"acp-grid-action-button\"\n  [class]=\"btn.class\"\n  [disabled]=\"\n                    btn\n                      | cellActionDisable\n                        : rowData()\n                        : rowChangeRecord\n                        : rowChangeRecord?.currentValue\n                  \"\n  [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n  [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n  [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n  [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n  [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n  [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n  [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n  [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n  [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n  [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n  [matBadgeColor]=\"(btn | cellActionBadge).color\"\n  [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n  [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n  [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n  [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n  [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n  [matMenuTriggerFor]=\"\n                    btn.children && btn.children.length > 0 ? gridMenu.menu : null\n                  \"\n  (click)=\"$event.stopPropagation()\"\n>\n  <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\" />\n  <span>{{ btn.text | toObservable | async }}</span>\n</button>\n\n<acp-data-grid-menu #gridMenu [items]=\"btn.children || []\" [data]=\"rowData()\" />\n} } @else { @if (btn.type === 'icon') {\n<button\n  matIconButton\n  [color]=\"btn.color || 'primary'\"\n  type=\"button\"\n  class=\"acp-grid-action-button\"\n  [class]=\"btn.class\"\n  [disabled]=\"\n                    btn\n                      | cellActionDisable\n                        : rowData()\n                        : rowChangeRecord\n                        : rowChangeRecord?.currentValue\n                  \"\n  [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n  [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n  [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n  [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n  [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n  [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n  [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n  [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n  [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n  [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n  [matBadgeColor]=\"(btn | cellActionBadge).color\"\n  [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n  [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n  [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n  [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n  [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n  (click)=\"_onActionClick($event, btn, rowData())\"\n>\n  <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\" />\n</button>\n} @else {\n<button\n  [matButton]=\"btn.type || 'text'\"\n  [color]=\"btn.color || 'primary'\"\n  type=\"button\"\n  class=\"acp-grid-action-button\"\n  [class]=\"btn.class\"\n  [disabled]=\"\n                    btn\n                      | cellActionDisable\n                        : rowData()\n                        : rowChangeRecord\n                        : rowChangeRecord?.currentValue\n                  \"\n  [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n  [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n  [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n  [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n  [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n  [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n  [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n  [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n  [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n  [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n  [matBadgeColor]=\"(btn | cellActionBadge).color\"\n  [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n  [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n  [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n  [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n  [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n  (click)=\"_onActionClick($event, btn, rowData())\"\n>\n  <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\" />\n  <span>{{ btn.text | toObservable | async }}</span>\n</button>\n} } } } }\n<!-- Tag -->\n@case ('tag') { @if (colDef().tag && colDef().tag[_value]) {\n<mat-chip-listbox>\n  <mat-chip color=\"primary\" [class]=\"'bg-' + colDef().tag[_value].color\">\n    {{ colDef().tag[_value].text }}\n  </mat-chip>\n</mat-chip-listbox>\n} @else { {{ _value }} } }\n<!-- Link -->\n@case ('link') {\n<a [href]=\"_value\" target=\"_blank\">{{ _value }}</a>\n}\n<!-- Image -->\n@case ('image') { @if (_value) {\n<!-- Imagen real -->\n<img class=\"placeholder-image\" [src]=\"_value\" alt=\"img\" />\n} @else {\n<!-- Placeholder -->\n<div class=\"placeholder-box\">\n  <svg class=\"placeholder-icon\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <path\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      stroke-width=\"2\"\n      d=\"M4 16l4.586-4.586a2 2 0 012.828 0L15 14m-12 5h16a1 1 0 001-1V5a1 1 0 00-1-1H3a1 1 0 00-1 1v14a1 1 0 001 1z\"\n    />\n  </svg>\n</div>\n} }\n<!-- Boolean -->\n@case ('boolean') {\n<span [title]=\"_getTooltip(_value)\">{{ _getText(_value) }}</span>\n}\n<!-- Number -->\n@case ('number') {\n<span\n  [title]=\"\n            _getTooltip(\n              _value | number: colDef().typeParameter?.digitsInfo : colDef().typeParameter?.locale\n            )\n          \"\n>\n  {{ _getText( _value | number: colDef().typeParameter?.digitsInfo : colDef().typeParameter?.locale\n  ) }}\n</span>\n}\n<!-- Currency -->\n@case ('currency') {\n<span\n  [title]=\"\n            _getTooltip(\n              _value\n                | currency\n                  : colDef().typeParameter?.currencyCode\n                  : colDef().typeParameter?.display\n                  : colDef().typeParameter?.digitsInfo\n                  : colDef().typeParameter?.locale\n            )\n          \"\n>\n  {{ _getText( _value | currency : colDef().typeParameter?.currencyCode :\n  colDef().typeParameter?.display : colDef().typeParameter?.digitsInfo :\n  colDef().typeParameter?.locale ) }}\n</span>\n}\n<!-- Percent -->\n@case ('percent') {\n<span\n  [title]=\"\n            _getTooltip(\n              _value | percent: colDef().typeParameter?.digitsInfo : colDef().typeParameter?.locale\n            )\n          \"\n>\n  {{ _getText( _value | percent: colDef().typeParameter?.digitsInfo : colDef().typeParameter?.locale\n  ) }}\n</span>\n}\n<!-- Date -->\n@case ('date') {\n<span\n  [title]=\"\n            _getTooltip(\n              _value\n                | date\n                  : colDef().typeParameter?.format\n                  : colDef().typeParameter?.timezone\n                  : colDef().typeParameter?.locale\n            )\n          \"\n>\n  {{ _getText( _value | date : colDef().typeParameter?.format : colDef().typeParameter?.timezone :\n  colDef().typeParameter?.locale ) }}\n</span>\n}\n<!-- Default -->\n@default {\n<span [title]=\"_getTooltip(_value)\">{{ _getText(_value) }}</span>\n} } } }\n\n<ng-template #iconTpl let-btn>\n  @if (btn.icon) {\n  <mat-icon class=\"acp-grid-icon\">{{ btn.icon }}</mat-icon>\n  } @else if (btn.fontIcon) {\n  <mat-icon class=\"acp-grid-icon\" [fontIcon]=\"btn.fontIcon\" />\n  } @else if (btn.svgIcon) {\n  <mat-icon class=\"acp-grid-icon\" [svgIcon]=\"btn.svgIcon\" />\n  }\n</ng-template>\n", styles: [".placeholder-box{width:50px;height:50px;background:#f0f0f0;border:2px dashed #c2c2c2;border-radius:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#6b7280;font-size:.85rem;gap:8px}.placeholder-icon{width:32px;height:32px;color:#3b82f6}.placeholder-image{width:50px;height:50px;object-fit:cover;border-radius:50%;box-shadow:0 4px 8px #0000001a}\n"], dependencies: [{ kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: i1$5.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i3$2.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: DataGridMenu, selector: "acp-data-grid-menu", inputs: ["items", "data"], exportAs: ["acpDataGridMenu"] }, { kind: "component", type: 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: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "pipe", type: DataGridCellSummaryPipe, name: "cellSummary" }, { kind: "pipe", type: DataGridCellActionsPipe, name: "cellActions" }, { kind: "pipe", type: DataGridCellActionDisablePipe, name: "cellActionDisable" }, { kind: "pipe", type: DataGridCellActionTooltipPipe, name: "cellActionTooltip" }, { kind: "pipe", type: AcpToObservablePipe, name: "toObservable" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: DataGridCellActionBadgePipe, name: "cellActionBadge" }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: PercentPipe, name: "percent" }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: DataGridCell, isStandalone: true, selector: "acp-data-grid-cell", inputs: { rowData: { classPropertyName: "rowData", publicName: "rowData", isSignal: true, isRequired: false, transformFunction: null }, colDef: { classPropertyName: "colDef", publicName: "colDef", isSignal: true, isRequired: false, transformFunction: null }, summary: { classPropertyName: "summary", publicName: "summary", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowDataChange: "rowDataChange" }, ngImport: i0, template: "@if (summary()) {\n<span\n  [title]=\"_getFormatterTooltip(data() | cellSummary: colDef())\"\n  [innerHTML]=\"_getText(data() | cellSummary: colDef())\"\n>\n</span>\n} @else {\n<!-- Custom formatting -->\n@if (colDef().formatter) {\n<span\n  [title]=\"_getFormatterTooltip(colDef().formatter(rowData(), colDef()))\"\n  [innerHTML]=\"_getText(colDef().formatter(rowData(), colDef()))\"\n>\n</span>\n} @else {\n<!-- Default formatting -->\n@switch (colDef().type) {\n<!-- Buttons -->\n@case ('button') { @for ( btn of colDef().buttons | cellActions: rowData() : rowChangeRecord :\nrowChangeRecord?.currentValue; track btn ) { @if (!btn.iif || btn.iif(rowData())) { @if\n(btn.children && btn.children.length > 0) { @if (btn.type === 'icon') {\n<button\n  matIconButton\n  [color]=\"btn.color || 'primary'\"\n  type=\"button\"\n  class=\"acp-grid-action-button\"\n  [class]=\"btn.class\"\n  [disabled]=\"\n                    btn\n                      | cellActionDisable\n                        : rowData()\n                        : rowChangeRecord\n                        : rowChangeRecord?.currentValue\n                  \"\n  [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n  [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n  [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n  [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n  [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n  [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n  [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n  [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n  [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n  [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n  [matBadgeColor]=\"(btn | cellActionBadge).color\"\n  [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n  [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n  [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n  [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n  [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n  [matMenuTriggerFor]=\"\n                    btn.children && btn.children.length > 0 ? gridMenu.menu : null\n                  \"\n  (click)=\"$event.stopPropagation()\"\n>\n  <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\" />\n</button>\n\n<acp-data-grid-menu #gridMenu [items]=\"btn.children || []\" [data]=\"rowData()\" />\n} @else {\n<button\n  [matButton]=\"btn.type || 'text'\"\n  [color]=\"btn.color || 'primary'\"\n  type=\"button\"\n  class=\"acp-grid-action-button\"\n  [class]=\"btn.class\"\n  [disabled]=\"\n                    btn\n                      | cellActionDisable\n                        : rowData()\n                        : rowChangeRecord\n                        : rowChangeRecord?.currentValue\n                  \"\n  [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n  [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n  [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n  [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n  [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n  [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n  [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n  [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n  [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n  [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n  [matBadgeColor]=\"(btn | cellActionBadge).color\"\n  [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n  [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n  [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n  [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n  [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n  [matMenuTriggerFor]=\"\n                    btn.children && btn.children.length > 0 ? gridMenu.menu : null\n                  \"\n  (click)=\"$event.stopPropagation()\"\n>\n  <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\" />\n  <span>{{ btn.text | toObservable | async }}</span>\n</button>\n\n<acp-data-grid-menu #gridMenu [items]=\"btn.children || []\" [data]=\"rowData()\" />\n} } @else { @if (btn.type === 'icon') {\n<button\n  matIconButton\n  [color]=\"btn.color || 'primary'\"\n  type=\"button\"\n  class=\"acp-grid-action-button\"\n  [class]=\"btn.class\"\n  [disabled]=\"\n                    btn\n                      | cellActionDisable\n                        : rowData()\n                        : rowChangeRecord\n                        : rowChangeRecord?.currentValue\n                  \"\n  [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n  [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n  [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n  [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n  [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n  [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n  [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n  [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n  [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n  [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n  [matBadgeColor]=\"(btn | cellActionBadge).color\"\n  [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n  [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n  [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n  [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n  [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n  (click)=\"_onActionClick($event, btn, rowData())\"\n>\n  <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\" />\n</button>\n} @else {\n<button\n  [matButton]=\"btn.type || 'text'\"\n  [color]=\"btn.color || 'primary'\"\n  type=\"button\"\n  class=\"acp-grid-action-button\"\n  [class]=\"btn.class\"\n  [disabled]=\"\n                    btn\n                      | cellActionDisable\n                        : rowData()\n                        : rowChangeRecord\n                        : rowChangeRecord?.currentValue\n                  \"\n  [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n  [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n  [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n  [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n  [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n  [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n  [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n  [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n  [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n  [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n  [matBadgeColor]=\"(btn | cellActionBadge).color\"\n  [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n  [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n  [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n  [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n  [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n  (click)=\"_onActionClick($event, btn, rowData())\"\n>\n  <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\" />\n  <span>{{ btn.text | toObservable | async }}</span>\n</button>\n} } } } }\n<!-- Tag -->\n@case ('tag') { @if (colDef().tag && colDef().tag[_value]) {\n<mat-chip-listbox>\n  <mat-chip color=\"primary\" [class]=\"'bg-' + colDef().tag[_value].color\">\n    {{ colDef().tag[_value].text }}\n  </mat-chip>\n</mat-chip-listbox>\n} @else { {{ _value }} } }\n<!-- Link -->\n@case ('link') {\n<a [href]=\"_value\" target=\"_blank\">{{ _value }}</a>\n}\n<!-- Image -->\n@case ('image') { @if (_value) {\n<!-- Imagen real -->\n<img class=\"placeholder-image\" [src]=\"_value\" alt=\"img\" />\n} @else {\n<!-- Placeholder -->\n<div class=\"placeholder-box\">\n  <svg class=\"placeholder-icon\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <path\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      stroke-width=\"2\"\n      d=\"M4 16l4.586-4.586a2 2 0 012.828 0L15 14m-12 5h16a1 1 0 001-1V5a1 1 0 00-1-1H3a1 1 0 00-1 1v14a1 1 0 001 1z\"\n    />\n  </svg>\n</div>\n} }\n<!-- Boolean -->\n@case ('boolean') {\n<span [title]=\"_getTooltip(_value)\">{{ _getText(_value) }}</span>\n}\n<!-- Number -->\n@case ('number') {\n<span\n  [title]=\"\n            _getTooltip(\n              _value | number: colDef().typeParameter?.digitsInfo : colDef().typeParameter?.locale\n            )\n          \"\n>\n  {{ _getText( _value | number: colDef().typeParameter?.digitsInfo : colDef().typeParameter?.locale\n  ) }}\n</span>\n}\n<!-- Currency -->\n@case ('currency') {\n<span\n  [title]=\"\n            _getTooltip(\n              _value\n                | currency\n                  : colDef().typeParameter?.currencyCode\n                  : colDef().typeParameter?.display\n                  : colDef().typeParameter?.digitsInfo\n                  : colDef().typeParameter?.locale\n            )\n          \"\n>\n  {{ _getText( _value | currency : colDef().typeParameter?.currencyCode :\n  colDef().typeParameter?.display : colDef().typeParameter?.digitsInfo :\n  colDef().typeParameter?.locale ) }}\n</span>\n}\n<!-- Percent -->\n@case ('percent') {\n<span\n  [title]=\"\n            _getTooltip(\n              _value | percent: colDef().typeParameter?.digitsInfo : colDef().typeParameter?.locale\n            )\n          \"\n>\n  {{ _getText( _value | percent: colDef().typeParameter?.digitsInfo : colDef().typeParameter?.locale\n  ) }}\n</span>\n}\n<!-- Date -->\n@case ('date') {\n<span\n  [title]=\"\n            _getTooltip(\n              _value\n                | date\n                  : colDef().typeParameter?.format\n                  : colDef().typeParameter?.timezone\n                  : colDef().typeParameter?.locale\n            )\n          \"\n>\n  {{ _getText( _value | date : colDef().typeParameter?.format : colDef().typeParameter?.timezone :\n  colDef().typeParameter?.locale ) }}\n</span>\n}\n<!-- Default -->\n@default {\n<span [title]=\"_getTooltip(_value)\">{{ _getText(_value) }}</span>\n} } } }\n\n<ng-template #iconTpl let-btn>\n  @if (btn.icon) {\n  <mat-icon class=\"acp-grid-icon\">{{ btn.icon }}</mat-icon>\n  } @else if (btn.fontIcon) {\n  <mat-icon class=\"acp-grid-icon\" [fontIcon]=\"btn.fontIcon\" />\n  } @else if (btn.svgIcon) {\n  <mat-icon class=\"acp-grid-icon\" [svgIcon]=\"btn.svgIcon\" />\n  }\n</ng-template>\n", styles: [".placeholder-box{width:50px;height:50px;background:#f0f0f0;border:2px dashed #c2c2c2;border-radius:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#6b7280;font-size:.85rem;gap:8px}.placeholder-icon{width:32px;height:32px;color:#3b82f6}.placeholder-image{width:50px;height:50px;object-fit:cover;border-radius:50%;box-shadow:0 4px 8px #0000001a}\n"], dependencies: [{ kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: i1$4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i3$1.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: DataGridMenu, selector: "acp-data-grid-menu", inputs: ["items", "data"], exportAs: ["acpDataGridMenu"] }, { kind: "component", type: 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: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "pipe", type: DataGridCellSummaryPipe, name: "cellSummary" }, { kind: "pipe", type: DataGridCellActionsPipe, name: "cellActions" }, { kind: "pipe", type: DataGridCellActionDisablePipe, name: "cellActionDisable" }, { kind: "pipe", type: DataGridCellActionTooltipPipe, name: "cellActionTooltip" }, { kind: "pipe", type: AcpToObservablePipe, name: "toObservable" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: DataGridCellActionBadgePipe, name: "cellActionBadge" }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: PercentPipe, name: "percent" }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DataGridCell, decorators: [{
             type: Component,
@@ -3204,6 +2844,8 @@ class DataGrid {
     // Keyboard Navigation
     keyboardNavigation = input(false, ...(ngDevMode ? [{ debugName: "keyboardNavigation" }] : []));
     focusedRowIndex = computed(() => this._keyboardNavService.focusedRowIndex(), ...(ngDevMode ? [{ debugName: "focusedRowIndex" }] : [])); // Vinculado al servicio
+    // Row Highlighting
+    highlightedRowIndex = input(-1, ...(ngDevMode ? [{ debugName: "highlightedRowIndex" }] : []));
     // Sorting
     sortOnFront = input(true, ...(ngDevMode ? [{ debugName: "sortOnFront" }] : []));
     sortActive = input('', ...(ngDevMode ? [{ debugName: "sortActive" }] : []));
@@ -3628,7 +3270,7 @@ class DataGrid {
         return index === undefined ? dataIndex : index;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DataGrid, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: DataGrid, isStandalone: true, selector: "acp-data-grid", inputs: { showToolbar: { classPropertyName: "showToolbar", publicName: "showToolbar", isSignal: true, isRequired: false, transformFunction: null }, showColumnMenuButton: { classPropertyName: "showColumnMenuButton", publicName: "showColumnMenuButton", isSignal: true, isRequired: false, transformFunction: null }, toolbarTitle: { classPropertyName: "toolbarTitle", publicName: "toolbarTitle", isSignal: true, isRequired: false, transformFunction: null }, toolbarTemplate: { classPropertyName: "toolbarTemplate", publicName: "toolbarTemplate", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, emptyValuePlaceholder: { classPropertyName: "emptyValuePlaceholder", publicName: "emptyValuePlaceholder", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, cellTemplate: { classPropertyName: "cellTemplate", publicName: "cellTemplate", isSignal: true, isRequired: false, transformFunction: null }, headerTemplate: { classPropertyName: "headerTemplate", publicName: "headerTemplate", isSignal: true, isRequired: false, transformFunction: null }, headerExtraTemplate: { classPropertyName: "headerExtraTemplate", publicName: "headerExtraTemplate", isSignal: true, isRequired: false, transformFunction: null }, noResultTemplate: { classPropertyName: "noResultTemplate", publicName: "noResultTemplate", isSignal: true, isRequired: false, transformFunction: null }, paginationTemplate: { classPropertyName: "paginationTemplate", publicName: "paginationTemplate", isSignal: true, isRequired: false, transformFunction: null }, summaryTemplate: { classPropertyName: "summaryTemplate", publicName: "summaryTemplate", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, headerCellTemplate: { classPropertyName: "headerCellTemplate", publicName: "headerCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, expansionTemplate: { classPropertyName: "expansionTemplate", publicName: "expansionTemplate", isSignal: true, isRequired: false, transformFunction: null }, closeOthersOnExpand: { classPropertyName: "closeOthersOnExpand", publicName: "closeOthersOnExpand", isSignal: true, isRequired: false, transformFunction: null }, pageOnFront: { classPropertyName: "pageOnFront", publicName: "pageOnFront", isSignal: true, isRequired: false, transformFunction: null }, showPaginator: { classPropertyName: "showPaginator", publicName: "showPaginator", isSignal: true, isRequired: false, transformFunction: null }, pageDisabled: { classPropertyName: "pageDisabled", publicName: "pageDisabled", isSignal: true, isRequired: false, transformFunction: null }, showFirstLastButtons: { classPropertyName: "showFirstLastButtons", publicName: "showFirstLastButtons", isSignal: true, isRequired: false, transformFunction: null }, pageIndex: { classPropertyName: "pageIndex", publicName: "pageIndex", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, hidePageSize: { classPropertyName: "hidePageSize", publicName: "hidePageSize", isSignal: true, isRequired: false, transformFunction: null }, infiniteScroll: { classPropertyName: "infiniteScroll", publicName: "infiniteScroll", isSignal: true, isRequired: false, transformFunction: null }, infiniteScrollThreshold: { classPropertyName: "infiniteScrollThreshold", publicName: "infiniteScrollThreshold", isSignal: true, isRequired: false, transformFunction: null }, infiniteScrollDisabled: { classPropertyName: "infiniteScrollDisabled", publicName: "infiniteScrollDisabled", isSignal: true, isRequired: false, transformFunction: null }, keyboardNavigation: { classPropertyName: "keyboardNavigation", publicName: "keyboardNavigation", isSignal: true, isRequired: false, transformFunction: null }, sortOnFront: { classPropertyName: "sortOnFront", publicName: "sortOnFront", isSignal: true, isRequired: false, transformFunction: null }, sortActive: { classPropertyName: "sortActive", publicName: "sortActive", isSignal: true, isRequired: false, transformFunction: null }, sortDirection: { classPropertyName: "sortDirection", publicName: "sortDirection", isSignal: true, isRequired: false, transformFunction: null }, sortDisableClear: { classPropertyName: "sortDisableClear", publicName: "sortDisableClear", isSignal: true, isRequired: false, transformFunction: null }, sortDisabled: { classPropertyName: "sortDisabled", publicName: "sortDisabled", isSignal: true, isRequired: false, transformFunction: null }, sortStart: { classPropertyName: "sortStart", publicName: "sortStart", isSignal: true, isRequired: false, transformFunction: null }, rowHover: { classPropertyName: "rowHover", publicName: "rowHover", isSignal: true, isRequired: false, transformFunction: null }, rowStriped: { classPropertyName: "rowStriped", publicName: "rowStriped", isSignal: true, isRequired: false, transformFunction: null }, rowSelectable: { classPropertyName: "rowSelectable", publicName: "rowSelectable", isSignal: true, isRequired: false, transformFunction: null }, multiSelectable: { classPropertyName: "multiSelectable", publicName: "multiSelectable", isSignal: true, isRequired: false, transformFunction: null }, multiSelectionWithClick: { classPropertyName: "multiSelectionWithClick", publicName: "multiSelectionWithClick", isSignal: true, isRequired: false, transformFunction: null }, hideRowSelectionCheckbox: { classPropertyName: "hideRowSelectionCheckbox", publicName: "hideRowSelectionCheckbox", isSignal: true, isRequired: false, transformFunction: null }, disableRowClickSelection: { classPropertyName: "disableRowClickSelection", publicName: "disableRowClickSelection", isSignal: true, isRequired: false, transformFunction: null }, rowClassFormatter: { classPropertyName: "rowClassFormatter", publicName: "rowClassFormatter", isSignal: true, isRequired: false, transformFunction: null }, rowSelected: { classPropertyName: "rowSelected", publicName: "rowSelected", isSignal: true, isRequired: false, transformFunction: null }, rowSelectionFormatter: { classPropertyName: "rowSelectionFormatter", publicName: "rowSelectionFormatter", isSignal: true, isRequired: false, transformFunction: null }, cellSelectable: { classPropertyName: "cellSelectable", publicName: "cellSelectable", isSignal: true, isRequired: false, transformFunction: null }, useContentRowTemplate: { classPropertyName: "useContentRowTemplate", publicName: "useContentRowTemplate", isSignal: true, isRequired: false, transformFunction: null }, useContentHeaderRowTemplate: { classPropertyName: "useContentHeaderRowTemplate", publicName: "useContentHeaderRowTemplate", isSignal: true, isRequired: false, transformFunction: null }, useContentFooterRowTemplate: { classPropertyName: "useContentFooterRowTemplate", publicName: "useContentFooterRowTemplate", isSignal: true, isRequired: false, transformFunction: null }, showSummary: { classPropertyName: "showSummary", publicName: "showSummary", isSignal: true, isRequired: false, transformFunction: null }, noResultText: { classPropertyName: "noResultText", publicName: "noResultText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { page: "page", sortChange: "sortChange", rowClick: "rowClick", rowSelectedChange: "rowSelectedChange", selectionChange: "selectionChange", cellClick: "cellClick", cellSelectedChange: "cellSelectedChange", expansionChange: "expansionChange", rowContextMenu: "rowContextMenu", infiniteScrollLoad: "infiniteScrollLoad", focusedRowChange: "focusedRowChange" }, host: { listeners: { "document:keydown": "handleKeyDown($event)" }, properties: { "class.data-grid-animations-enabled": "!_animationsDisabled", "class.data-grid-size-small": "size() === \"small\"", "class.data-grid-size-medium": "size() === \"medium\"", "class.data-grid-size-normal": "size() === \"normal\"", "attr.tabindex": "0" }, classAttribute: "data-grid" }, queries: [{ propertyName: "rowDefs", predicate: MatRowDef }, { propertyName: "headerRowDefs", predicate: MatHeaderRowDef }, { propertyName: "footerRowDefs", predicate: MatFooterRow }], viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "tableContainer", first: true, predicate: ["tableContainer"], descendants: true }], exportAs: ["dataGrid"], usesOnChanges: true, ngImport: i0, template: "<!-- src/app/shared/components/data-grid/data-grid.component.html -->\n@if (loading()) {\n<div class=\"data-grid-progress\">\n  <mat-progress-bar mode=\"indeterminate\" />\n</div>\n} @if (showToolbar()) {\n<div class=\"data-grid-toolbar\">\n  <div class=\"data-grid-toolbar-content\">\n    @if (toolbarTemplate()) {\n    <ng-template [ngTemplateOutlet]=\"toolbarTemplate()\" />\n    } @else if (toolbarTitle()) {\n    <div class=\"data-grid-toolbar-title\">{{ toolbarTitle() }}</div>\n    }\n  </div>\n  <div class=\"data-grid-toolbar-actions\"></div>\n</div>\n}\n\n<div class=\"data-grid-main data-grid-layout\">\n  <div class=\"data-grid-content data-grid-layout\">\n    <div #tableContainer class=\"mat-table-container\" [class.mat-table-with-data]=\"!hasNoResult()\">\n      <table\n        mat-table\n        [class.mat-table-hover]=\"rowHover()\"\n        [class.mat-table-striped]=\"rowStriped()\"\n        [class.mat-table-expandable]=\"expandable()\"\n        [class.mat-table-keyboard-navigation]=\"keyboardNavigation()\"\n        [dataSource]=\"dataSource\"\n        multiTemplateDataRows\n        matSort\n        [matSortActive]=\"sortActive()\"\n        [matSortDirection]=\"sortDirection()\"\n        [matSortDisableClear]=\"sortDisableClear()\"\n        [matSortDisabled]=\"sortDisabled()\"\n        [matSortStart]=\"sortStart()\"\n        (matSortChange)=\"onSortChange($event)\"\n        [trackBy]=\"trackBy\"\n      >\n        <!-- Selection Column -->\n        @if (rowSelectable() && !hideRowSelectionCheckbox()) {\n        <ng-container matColumnDef=\"DataGridCheckboxColumnDef\">\n          <th mat-header-cell *matHeaderCellDef class=\"data-grid-checkbox-cell\">\n            @if (multiSelectable()) {\n            <mat-checkbox\n              [checked]=\"rowSelection.hasValue() && isAllSelected()\"\n              [indeterminate]=\"rowSelection.hasValue() && !isAllSelected()\"\n              (change)=\"$event ? toggleAllRows() : null\"\n            />\n            }\n          </th>\n          <td\n            mat-cell\n            *matCellDef=\"let row; let index = index; let dataIndex = dataIndex\"\n            class=\"data-grid-checkbox-cell\"\n          >\n            @if (!shouldHideCheckbox(row, getIndex(index, dataIndex))) {\n            <mat-checkbox\n              [disabled]=\"isRowDisabled(row, getIndex(index, dataIndex))\"\n              [checked]=\"rowSelection.isSelected(row)\"\n              (click)=\"$event.stopPropagation()\"\n              (change)=\"$event ? toggleNormalCheckbox(row) : null\"\n            />\n            }\n          </td>\n          <td mat-footer-cell *matFooterCellDef class=\"data-grid-checkbox-cell\"></td>\n        </ng-container>\n        }\n\n        <!-- Data Columns -->\n        @for (col of columns(); track col.field) {\n        <ng-container\n          [matColumnDef]=\"col.field\"\n          [sticky]=\"col.pinned === 'left'\"\n          [stickyEnd]=\"col.pinned === 'right'\"\n        >\n          <!-- Header Cell -->\n          <th\n            mat-header-cell\n            *matHeaderCellDef\n            [class]=\"col | colClass\"\n            [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n            [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n            [style.width]=\"col.width\"\n            [style.min-width]=\"col.width\"\n            [style.left]=\"col.left\"\n            [style.right]=\"col.right\"\n          >\n            <!-- Prioridad 1: Template espec\u00EDfico de la columna -->\n            @if (col.headerCellTemplate) {\n            <ng-template\n              [ngTemplateOutlet]=\"col.headerCellTemplate\"\n              [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n            />\n            } @else if ($any(headerCellTemplate())?.[col.field] | isTemplateRef) {\n            <!-- Prioridad 2: Template general por campo -->\n            <ng-template\n              [ngTemplateOutlet]=\"$any(headerCellTemplate())[col.field]\"\n              [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n            />\n            } @else if (headerCellTemplate() | isTemplateRef) {\n            <!-- Prioridad 3: Template general -->\n            <ng-template\n              [ngTemplateOutlet]=\"$any(headerCellTemplate())\"\n              [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n            />\n            } @else if ($any(headerTemplate())?.[col.field] | isTemplateRef) {\n            <!-- Prioridad 4: Template por campo en headerTemplate -->\n            <ng-template\n              [ngTemplateOutlet]=\"$any(headerTemplate())[col.field]\"\n              [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n            />\n            } @else if (headerTemplate() | isTemplateRef) {\n            <!-- Prioridad 5: Template general en headerTemplate -->\n            <ng-template\n              [ngTemplateOutlet]=\"$any(headerTemplate())\"\n              [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n            />\n            } @else {\n            <!-- Comportamiento por defecto -->\n            <div class=\"mat-header-cell-inner\">\n              <div\n                [mat-sort-header]=\"col.sortProp?.id || col.field\"\n                [disabled]=\"!col.sortable\"\n                [disableClear]=\"col.sortProp?.disableClear ?? sortDisableClear()\"\n                [arrowPosition]=\"col.sortProp?.arrowPosition!\"\n                [start]=\"col.sortProp?.start!\"\n              >\n                @if (col.showExpand) {\n                <span class=\"data-grid-expansion-placeholder\"></span>\n                }\n                <span>{{ col.header | toObservable | async }}</span>\n                @if (col.sortable) {\n                <svg\n                  class=\"data-grid-icon mat-sort-header-icon\"\n                  viewBox=\"0 0 24 24\"\n                  width=\"24px\"\n                  height=\"24px\"\n                  fill=\"currentColor\"\n                  focusable=\"false\"\n                >\n                  <path d=\"M3,13H15V11H3M3,6V8H21V6M3,18H9V16H3V18Z\" />\n                </svg>\n                }\n              </div>\n              <ng-template\n                [ngTemplateOutlet]=\"headerExtraTplBase\"\n                [ngTemplateOutletContext]=\"{ $implicit: headerExtraTemplate(), colDef: col }\"\n              />\n            </div>\n            }\n          </th>\n\n          <!-- Data Cell -->\n          <td\n            mat-cell\n            *matCellDef=\"let row; let index = index; let dataIndex = dataIndex\"\n            [class]=\"col | colClass: row : rowChangeRecord : rowChangeRecord?.currentValue\"\n            [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n            [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n            [class.focused]=\"keyboardNavigation() && focusedRowIndex() === dataIndex\"\n            [style.width]=\"col.width\"\n            [style.min-width]=\"col.width\"\n            [style.left]=\"col.left\"\n            [style.right]=\"col.right\"\n            acpGridSelectableCell\n            [cellSelectable]=\"cellSelectable()\"\n            (cellSelectedChange)=\"selectCell($event, row, col)\"\n          >\n            @if (cellTemplate() | isTemplateRef) {\n            <ng-template\n              [ngTemplateOutlet]=\"$any(cellTemplate())\"\n              [ngTemplateOutletContext]=\"{\n                    $implicit: row,\n                    rowData: row,\n                    index: getIndex(index, dataIndex),\n                    colDef: col,\n                  }\"\n            />\n            } @else { @if ($any(cellTemplate())?.[col.field] | isTemplateRef) {\n            <ng-template\n              [ngTemplateOutlet]=\"$any(cellTemplate())[col.field]\"\n              [ngTemplateOutletContext]=\"{\n                      $implicit: row,\n                      rowData: row,\n                      index: getIndex(index, dataIndex),\n                      colDef: col,\n                    }\"\n            />\n            } @else { @if (col.cellTemplate) {\n            <ng-template\n              [ngTemplateOutlet]=\"col.cellTemplate!\"\n              [ngTemplateOutletContext]=\"{\n                        $implicit: row,\n                        rowData: row,\n                        index: getIndex(index, dataIndex),\n                        colDef: col,\n                      }\"\n            />\n            } @else { @if (col.showExpand) {\n            <button\n              class=\"data-grid-row-expand-button\"\n              mat-icon-button\n              acpDataGridExpansionToggle\n              type=\"button\"\n              [(opened)]=\"expansionRowStates()[dataIndex].expanded\"\n              (toggleChange)=\"onExpansionChange($event, row, col, dataIndex)\"\n            >\n              <svg\n                class=\"data-grid-icon data-grid-row-expand-icon\"\n                viewBox=\"0 0 24 24\"\n                width=\"24px\"\n                height=\"24px\"\n                fill=\"currentColor\"\n                focusable=\"false\"\n              >\n                <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\n              </svg>\n            </button>\n            }\n            <acp-data-grid-cell\n              [rowData]=\"row\"\n              [colDef]=\"col\"\n              [placeholder]=\"emptyValuePlaceholder()\"\n              (rowDataChange)=\"onRowDataChange($event)\"\n            />\n            } } }\n          </td>\n\n          <!-- Footer Cell -->\n          <td\n            mat-footer-cell\n            *matFooterCellDef\n            [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n            [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n            [style.width]=\"col.width\"\n            [style.min-width]=\"col.width\"\n            [style.left]=\"col.left\"\n            [style.right]=\"col.right\"\n          >\n            @if (col.showExpand) {\n            <span class=\"data-grid-expansion-placeholder\"></span>\n            } @if (summaryTemplate() | isTemplateRef) {\n            <ng-template\n              [ngTemplateOutlet]=\"$any(summaryTemplate())\"\n              [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col, data: data() }\"\n            />\n            } @else { @if ($any(summaryTemplate())?.[col.field] | isTemplateRef) {\n            <ng-template\n              [ngTemplateOutlet]=\"$any(summaryTemplate())[col.field]\"\n              [ngTemplateOutletContext]=\"{\n                      $implicit: getColData(data(), col),\n                      colData: getColData(data(), col),\n                      colDef: col,\n                    }\"\n            />\n            } @else {\n            <acp-data-grid-cell\n              [summary]=\"true\"\n              [data]=\"data()\"\n              [colDef]=\"col\"\n              [placeholder]=\"emptyValuePlaceholder()\"\n            />\n            } }\n          </td>\n        </ng-container>\n        }\n\n        <!-- Header Row -->\n        @if (!useContentHeaderRowTemplate()) {\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumns(); sticky: true\"></tr>\n        }\n\n        <!-- Data Rows -->\n        @if (!useContentRowTemplate()) {\n        <tr\n          mat-row\n          *matRowDef=\"\n              let row;\n              let index = index;\n              let dataIndex = dataIndex;\n              columns: displayedColumns()\n            \"\n          [class]=\"row | rowClass: index : dataIndex : rowClassFormatter()\"\n          [class.selected]=\"rowSelection.isSelected(row)\"\n          [class.focused]=\"keyboardNavigation() && focusedRowIndex() === dataIndex\"\n          (click)=\"selectRow($event, row, getIndex(index, dataIndex))\"\n          (contextmenu)=\"contextmenu($event, row, getIndex(index, dataIndex))\"\n        ></tr>\n        }\n\n        <!-- Summary Row -->\n        @if (whetherShowSummary()) {\n        <tr mat-footer-row *matFooterRowDef=\"displayedColumns(); sticky: true\"></tr>\n        }\n\n        <!-- Expansion Row -->\n        @if (expandable()) {\n        <ng-container matColumnDef=\"DataGridExpansionColumnDef\">\n          <td\n            mat-cell\n            *matCellDef=\"let row; let dataIndex = dataIndex\"\n            [attr.colspan]=\"displayedColumns().length\"\n          >\n            <div class=\"data-grid-expansion-detail-wrapper\">\n              <div class=\"data-grid-expansion-detail\">\n                <ng-template\n                  [ngTemplateOutlet]=\"expansionTemplate()\"\n                  [ngTemplateOutletContext]=\"{\n                      $implicit: row,\n                      rowData: row,\n                      index: dataIndex,\n                      expanded: expansionRowStates()[dataIndex].expanded,\n                    }\"\n                />\n              </div>\n            </div>\n          </td>\n        </ng-container>\n        <tr\n          mat-row\n          *matRowDef=\"let row; columns: ['DataGridExpansionColumnDef']; let dataIndex = dataIndex\"\n          class=\"data-grid-expansion\"\n          [class]=\"expansionRowStates()[dataIndex].expanded ? 'expanded' : 'collapsed'\"\n        ></tr>\n        }\n      </table>\n    </div>\n\n    <!-- No result -->\n    @if (hasNoResult()) {\n    <div class=\"data-grid-no-result\">\n      @if (noResultTemplate()) {\n      <ng-template [ngTemplateOutlet]=\"noResultTemplate()\" />\n      } @else { {{ noResultText() }} }\n    </div>\n    }\n\n    <!-- Infinite Scroll Loading Indicator -->\n    @if (infiniteScroll() && isLoadingMore()) {\n    <div class=\"data-grid-infinite-scroll-loading\">\n      <mat-progress-bar mode=\"indeterminate\" />\n    </div>\n    }\n  </div>\n</div>\n\n<div class=\"data-grid-footer\">\n  <!-- Pagination -->\n  @if (!infiniteScroll() && showPaginator()) {\n  <div class=\"data-grid-pagination\">\n    @if (paginationTemplate()) {\n    <ng-template [ngTemplateOutlet]=\"paginationTemplate()\" />\n    } @else {\n    <mat-paginator\n      [class.mat-paginator-hidden]=\"!showPaginator()\"\n      [showFirstLastButtons]=\"showFirstLastButtons()\"\n      [length]=\"length()\"\n      [pageIndex]=\"pageIndex()\"\n      [pageSize]=\"pageSize()\"\n      [pageSizeOptions]=\"pageSizeOptions()\"\n      [hidePageSize]=\"hidePageSize()\"\n      (page)=\"onPage($event)\"\n      [disabled]=\"pageDisabled()\"\n    />\n    }\n  </div>\n  }\n</div>\n\n<!-- Header template for extra content -->\n<ng-template #headerExtraTplBase let-headerExtraTemplate let-col=\"colDef\">\n  @if (headerExtraTemplate | isTemplateRef) {\n  <ng-template\n    [ngTemplateOutlet]=\"headerExtraTemplate\"\n    [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n  />\n  } @else { @if ($any(headerExtraTemplate)?.[col.field] | isTemplateRef) {\n  <ng-template\n    [ngTemplateOutlet]=\"headerExtraTemplate[col.field]\"\n    [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n  />\n  } }\n</ng-template>\n", styles: [".data-grid{position:relative;display:flex;flex-direction:column;width:100%;overflow:hidden;border:1px solid #c4c6d0;border-radius:12px}.data-grid .mat-table-container{overflow:auto}.data-grid .mat-table-container.mat-table-with-data{flex:1}.data-grid .mat-mdc-table:not(.mat-column-resize-table){min-width:100%;border-collapse:separate}.data-grid .mat-table-sticky-left{border-right:1px solid var(--mat-table-row-item-outline-color)}[dir=rtl] .data-grid .mat-table-sticky-left{border-right-width:0;border-left:1px solid var(--mat-table-row-item-outline-color)}.data-grid .mat-table-sticky-right{border-left:1px solid var(--mat-table-row-item-outline-color)}[dir=rtl] .data-grid .mat-table-sticky-right{border-left-width:0;border-right:1px solid var(--mat-table-row-item-outline-color)}.data-grid .mat-mdc-footer-cell{border-top:1px solid var(--mat-table-row-item-outline-color)}.data-grid .mat-mdc-row.data-grid-expansion{height:0;overflow:hidden}.data-grid .mat-mdc-row.data-grid-expansion .mat-mdc-cell{padding-top:0;padding-bottom:0}.data-grid .mat-mdc-row.data-grid-expansion.collapsed .mat-mdc-cell{border-bottom-width:0}.data-grid .mat-sort-header-icon{margin-left:4px}[dir=rtl] .data-grid .mat-sort-header-icon{margin-left:0;margin-right:4px}.data-grid .mat-header-cell-inner{display:inline-flex;align-items:center;vertical-align:middle}.data-grid .mat-paginator-hidden{display:none}.data-grid .data-grid-checkbox-cell{width:60px;min-width:60px;padding:0 calc((60px - var(--mat-checkbox-state-layer-size, 40px)) / 2)}.data-grid.data-grid-size-small .mat-mdc-table .mat-mdc-header-row,.data-grid.data-grid-size-small .mat-mdc-table .mat-mdc-footer-cell,.data-grid.data-grid-size-small .mat-mdc-table .mat-mdc-row{padding:4px 8px;font-size:12px;height:32px}.data-grid.data-grid-size-small .mat-mdc-table .mat-mdc-header-cell{height:32px}.data-grid.data-grid-size-small .data-grid-checkbox-cell{width:40px;min-width:40px;padding:0 calc((40px - var(--mat-checkbox-state-layer-size, 32px)) / 2)}.data-grid.data-grid-size-small .data-grid-row-expand-button{width:28px;height:28px}.data-grid.data-grid-size-small .data-grid-row-expand-button .data-grid-icon{width:18px;height:18px}.data-grid.data-grid-size-medium .mat-mdc-table .mat-mdc-header-row,.data-grid.data-grid-size-medium .mat-mdc-table .mat-mdc-header-cell,.data-grid.data-grid-size-medium .mat-mdc-table .mat-mdc-footer-cell,.data-grid.data-grid-size-medium .mat-mdc-table .mat-mdc-row,.data-grid.data-grid-size-medium .mat-mdc-table .mat-mdc-cell{padding:8px 12px;font-size:13px;height:40px}.data-grid.data-grid-size-medium .mat-mdc-table .mat-mdc-header-cell{height:48px}.data-grid.data-grid-size-medium .data-grid-checkbox-cell{width:50px;min-width:50px;padding:0 calc((50px - var(--mat-checkbox-state-layer-size, 36px)) / 2)}.data-grid.data-grid-size-normal .mat-mdc-table .mat-mdc-header-cell,.data-grid.data-grid-size-normal .mat-mdc-table .mat-mdc-footer-cell,.data-grid.data-grid-size-normal .mat-mdc-table .mat-mdc-cell{padding:12px 16px;font-size:14px;height:48px}.data-grid.data-grid-size-normal .mat-mdc-table .mat-mdc-header-cell{height:56px}.data-grid.data-grid-size-normal .data-grid-checkbox-cell{width:60px;min-width:60px;padding:0 calc((60px - var(--mat-checkbox-state-layer-size, 40px)) / 2)}.data-grid-progress{position:absolute;top:0;z-index:120;width:100%}.data-grid-toolbar{display:flex;justify-content:space-between;align-items:center;min-height:var(--mat-table-header-container-height, 56px);padding:8px;box-sizing:border-box}.data-grid-toolbar-content{flex:1;width:0;padding:0 8px}.data-grid-layout{display:flex;flex:1 1 auto;overflow:auto}.data-grid-content{flex-direction:column;width:0}.data-grid-footer{position:relative;z-index:1}.data-grid-no-result{display:flex;justify-content:center;align-items:center;flex:1;min-height:150px}.data-grid-expansion-placeholder{display:inline-block;vertical-align:middle;width:var(--mat-icon-button-state-layer-size);height:var(--mat-icon-button-state-layer-size)}.data-grid-expansion-detail-wrapper{display:grid;grid-template-rows:0fr;grid-template-columns:100%;padding:0;overflow:hidden}.data-grid-expansion.expanded .data-grid-expansion-detail-wrapper{grid-template-rows:1fr;padding:calc((var(--mat-table-row-item-container-height, 52px) - 20px) / 2) 0}.data-grid-expansion-detail{min-height:0}.data-grid-animations-enabled .data-grid-expansion-detail-wrapper{transition:all 225ms cubic-bezier(.4,0,.2,1)}.data-grid-row-expand-button.expanded .data-grid-row-expand-icon{transform:rotate(90deg)}.data-grid-row-expand-button.mat-mdc-icon-button,.data-grid-row-expand-button+data-grid-cell{vertical-align:middle}.mat-table-keyboard-navigation .mat-mdc-row.cdk-row.focused{background-color:#3f51b514!important;position:relative}.mat-table-keyboard-navigation .mat-mdc-row.cdk-row.focused:after{content:\"\";position:absolute;inset:0;border:2px solid #3f51b5;pointer-events:none;z-index:1}.mat-table-keyboard-navigation .mat-mdc-row:hover:not(.focused){background-color:#0000000a}.mat-app-background .mat-table-keyboard-navigation .mat-mdc-row.cdk-row.focused{background-color:rgba(var(--mat-primary-color),.08)!important}.mat-app-background .mat-table-keyboard-navigation .mat-mdc-row.cdk-row.focused:after{border-color:rgba(var(--mat-primary-color),1)}.data-grid-infinite-scroll-loading{width:100%;position:relative;height:4px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: 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: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "component", type: MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: DataGridSelectableCell, selector: "[acpGridSelectableCell]", inputs: ["cellSelectable"], outputs: ["cellSelectedChange"] }, { kind: "directive", type: DataGridExpansionToggle, selector: "[acpDataGridExpansionToggle]", inputs: ["opened", "expandableRow", "expansionRowTpl"], outputs: ["openedChange", "toggleChange"] }, { kind: "component", type: DataGridCell, selector: "acp-data-grid-cell", inputs: ["rowData", "colDef", "summary", "data", "placeholder"], outputs: ["rowDataChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: DataGridColClassPipe, name: "colClass" }, { kind: "pipe", type: AcpIsTemplateRefPipe, name: "isTemplateRef" }, { kind: "pipe", type: AcpToObservablePipe, name: "toObservable" }, { kind: "pipe", type: DataGridRowClassPipe, name: "rowClass" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: DataGrid, isStandalone: true, selector: "acp-data-grid", inputs: { showToolbar: { classPropertyName: "showToolbar", publicName: "showToolbar", isSignal: true, isRequired: false, transformFunction: null }, showColumnMenuButton: { classPropertyName: "showColumnMenuButton", publicName: "showColumnMenuButton", isSignal: true, isRequired: false, transformFunction: null }, toolbarTitle: { classPropertyName: "toolbarTitle", publicName: "toolbarTitle", isSignal: true, isRequired: false, transformFunction: null }, toolbarTemplate: { classPropertyName: "toolbarTemplate", publicName: "toolbarTemplate", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, emptyValuePlaceholder: { classPropertyName: "emptyValuePlaceholder", publicName: "emptyValuePlaceholder", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, cellTemplate: { classPropertyName: "cellTemplate", publicName: "cellTemplate", isSignal: true, isRequired: false, transformFunction: null }, headerTemplate: { classPropertyName: "headerTemplate", publicName: "headerTemplate", isSignal: true, isRequired: false, transformFunction: null }, headerExtraTemplate: { classPropertyName: "headerExtraTemplate", publicName: "headerExtraTemplate", isSignal: true, isRequired: false, transformFunction: null }, noResultTemplate: { classPropertyName: "noResultTemplate", publicName: "noResultTemplate", isSignal: true, isRequired: false, transformFunction: null }, paginationTemplate: { classPropertyName: "paginationTemplate", publicName: "paginationTemplate", isSignal: true, isRequired: false, transformFunction: null }, summaryTemplate: { classPropertyName: "summaryTemplate", publicName: "summaryTemplate", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, headerCellTemplate: { classPropertyName: "headerCellTemplate", publicName: "headerCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, expansionTemplate: { classPropertyName: "expansionTemplate", publicName: "expansionTemplate", isSignal: true, isRequired: false, transformFunction: null }, closeOthersOnExpand: { classPropertyName: "closeOthersOnExpand", publicName: "closeOthersOnExpand", isSignal: true, isRequired: false, transformFunction: null }, pageOnFront: { classPropertyName: "pageOnFront", publicName: "pageOnFront", isSignal: true, isRequired: false, transformFunction: null }, showPaginator: { classPropertyName: "showPaginator", publicName: "showPaginator", isSignal: true, isRequired: false, transformFunction: null }, pageDisabled: { classPropertyName: "pageDisabled", publicName: "pageDisabled", isSignal: true, isRequired: false, transformFunction: null }, showFirstLastButtons: { classPropertyName: "showFirstLastButtons", publicName: "showFirstLastButtons", isSignal: true, isRequired: false, transformFunction: null }, pageIndex: { classPropertyName: "pageIndex", publicName: "pageIndex", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, hidePageSize: { classPropertyName: "hidePageSize", publicName: "hidePageSize", isSignal: true, isRequired: false, transformFunction: null }, infiniteScroll: { classPropertyName: "infiniteScroll", publicName: "infiniteScroll", isSignal: true, isRequired: false, transformFunction: null }, infiniteScrollThreshold: { classPropertyName: "infiniteScrollThreshold", publicName: "infiniteScrollThreshold", isSignal: true, isRequired: false, transformFunction: null }, infiniteScrollDisabled: { classPropertyName: "infiniteScrollDisabled", publicName: "infiniteScrollDisabled", isSignal: true, isRequired: false, transformFunction: null }, keyboardNavigation: { classPropertyName: "keyboardNavigation", publicName: "keyboardNavigation", isSignal: true, isRequired: false, transformFunction: null }, highlightedRowIndex: { classPropertyName: "highlightedRowIndex", publicName: "highlightedRowIndex", isSignal: true, isRequired: false, transformFunction: null }, sortOnFront: { classPropertyName: "sortOnFront", publicName: "sortOnFront", isSignal: true, isRequired: false, transformFunction: null }, sortActive: { classPropertyName: "sortActive", publicName: "sortActive", isSignal: true, isRequired: false, transformFunction: null }, sortDirection: { classPropertyName: "sortDirection", publicName: "sortDirection", isSignal: true, isRequired: false, transformFunction: null }, sortDisableClear: { classPropertyName: "sortDisableClear", publicName: "sortDisableClear", isSignal: true, isRequired: false, transformFunction: null }, sortDisabled: { classPropertyName: "sortDisabled", publicName: "sortDisabled", isSignal: true, isRequired: false, transformFunction: null }, sortStart: { classPropertyName: "sortStart", publicName: "sortStart", isSignal: true, isRequired: false, transformFunction: null }, rowHover: { classPropertyName: "rowHover", publicName: "rowHover", isSignal: true, isRequired: false, transformFunction: null }, rowStriped: { classPropertyName: "rowStriped", publicName: "rowStriped", isSignal: true, isRequired: false, transformFunction: null }, rowSelectable: { classPropertyName: "rowSelectable", publicName: "rowSelectable", isSignal: true, isRequired: false, transformFunction: null }, multiSelectable: { classPropertyName: "multiSelectable", publicName: "multiSelectable", isSignal: true, isRequired: false, transformFunction: null }, multiSelectionWithClick: { classPropertyName: "multiSelectionWithClick", publicName: "multiSelectionWithClick", isSignal: true, isRequired: false, transformFunction: null }, hideRowSelectionCheckbox: { classPropertyName: "hideRowSelectionCheckbox", publicName: "hideRowSelectionCheckbox", isSignal: true, isRequired: false, transformFunction: null }, disableRowClickSelection: { classPropertyName: "disableRowClickSelection", publicName: "disableRowClickSelection", isSignal: true, isRequired: false, transformFunction: null }, rowClassFormatter: { classPropertyName: "rowClassFormatter", publicName: "rowClassFormatter", isSignal: true, isRequired: false, transformFunction: null }, rowSelected: { classPropertyName: "rowSelected", publicName: "rowSelected", isSignal: true, isRequired: false, transformFunction: null }, rowSelectionFormatter: { classPropertyName: "rowSelectionFormatter", publicName: "rowSelectionFormatter", isSignal: true, isRequired: false, transformFunction: null }, cellSelectable: { classPropertyName: "cellSelectable", publicName: "cellSelectable", isSignal: true, isRequired: false, transformFunction: null }, useContentRowTemplate: { classPropertyName: "useContentRowTemplate", publicName: "useContentRowTemplate", isSignal: true, isRequired: false, transformFunction: null }, useContentHeaderRowTemplate: { classPropertyName: "useContentHeaderRowTemplate", publicName: "useContentHeaderRowTemplate", isSignal: true, isRequired: false, transformFunction: null }, useContentFooterRowTemplate: { classPropertyName: "useContentFooterRowTemplate", publicName: "useContentFooterRowTemplate", isSignal: true, isRequired: false, transformFunction: null }, showSummary: { classPropertyName: "showSummary", publicName: "showSummary", isSignal: true, isRequired: false, transformFunction: null }, noResultText: { classPropertyName: "noResultText", publicName: "noResultText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { page: "page", sortChange: "sortChange", rowClick: "rowClick", rowSelectedChange: "rowSelectedChange", selectionChange: "selectionChange", cellClick: "cellClick", cellSelectedChange: "cellSelectedChange", expansionChange: "expansionChange", rowContextMenu: "rowContextMenu", infiniteScrollLoad: "infiniteScrollLoad", focusedRowChange: "focusedRowChange" }, host: { listeners: { "document:keydown": "handleKeyDown($event)" }, properties: { "class.data-grid-animations-enabled": "!_animationsDisabled", "class.data-grid-size-small": "size() === \"small\"", "class.data-grid-size-medium": "size() === \"medium\"", "class.data-grid-size-normal": "size() === \"normal\"", "attr.tabindex": "0" }, classAttribute: "data-grid" }, queries: [{ propertyName: "rowDefs", predicate: MatRowDef }, { propertyName: "headerRowDefs", predicate: MatHeaderRowDef }, { propertyName: "footerRowDefs", predicate: MatFooterRow }], viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "tableContainer", first: true, predicate: ["tableContainer"], descendants: true }], exportAs: ["dataGrid"], usesOnChanges: true, ngImport: i0, template: "<!-- src/app/shared/components/data-grid/data-grid.component.html -->\n@if (loading()) {\n<div class=\"data-grid-progress\">\n  <mat-progress-bar mode=\"indeterminate\" />\n</div>\n} @if (showToolbar()) {\n<div class=\"data-grid-toolbar\">\n  <div class=\"data-grid-toolbar-content\">\n    @if (toolbarTemplate()) {\n    <ng-template [ngTemplateOutlet]=\"toolbarTemplate()\" />\n    } @else if (toolbarTitle()) {\n    <div class=\"data-grid-toolbar-title\">{{ toolbarTitle() }}</div>\n    }\n  </div>\n  <div class=\"data-grid-toolbar-actions\"></div>\n</div>\n}\n\n<div class=\"data-grid-main data-grid-layout\">\n  <div class=\"data-grid-content data-grid-layout\">\n    <div #tableContainer class=\"mat-table-container\" [class.mat-table-with-data]=\"!hasNoResult()\">\n      <table\n        mat-table\n        [class.mat-table-hover]=\"rowHover()\"\n        [class.mat-table-striped]=\"rowStriped()\"\n        [class.mat-table-expandable]=\"expandable()\"\n        [class.mat-table-keyboard-navigation]=\"keyboardNavigation()\"\n        [dataSource]=\"dataSource\"\n        multiTemplateDataRows\n        matSort\n        [matSortActive]=\"sortActive()\"\n        [matSortDirection]=\"sortDirection()\"\n        [matSortDisableClear]=\"sortDisableClear()\"\n        [matSortDisabled]=\"sortDisabled()\"\n        [matSortStart]=\"sortStart()\"\n        (matSortChange)=\"onSortChange($event)\"\n        [trackBy]=\"trackBy\"\n      >\n        <!-- Selection Column -->\n        @if (rowSelectable() && !hideRowSelectionCheckbox()) {\n        <ng-container matColumnDef=\"DataGridCheckboxColumnDef\">\n          <th mat-header-cell *matHeaderCellDef class=\"data-grid-checkbox-cell\">\n            @if (multiSelectable()) {\n            <mat-checkbox\n              [checked]=\"rowSelection.hasValue() && isAllSelected()\"\n              [indeterminate]=\"rowSelection.hasValue() && !isAllSelected()\"\n              (change)=\"$event ? toggleAllRows() : null\"\n            />\n            }\n          </th>\n          <td\n            mat-cell\n            *matCellDef=\"let row; let index = index; let dataIndex = dataIndex\"\n            class=\"data-grid-checkbox-cell\"\n          >\n            @if (!shouldHideCheckbox(row, getIndex(index, dataIndex))) {\n            <mat-checkbox\n              [disabled]=\"isRowDisabled(row, getIndex(index, dataIndex))\"\n              [checked]=\"rowSelection.isSelected(row)\"\n              (click)=\"$event.stopPropagation()\"\n              (change)=\"$event ? toggleNormalCheckbox(row) : null\"\n            />\n            }\n          </td>\n          <td mat-footer-cell *matFooterCellDef class=\"data-grid-checkbox-cell\"></td>\n        </ng-container>\n        }\n\n        <!-- Data Columns -->\n        @for (col of columns(); track col.field) {\n        <ng-container\n          [matColumnDef]=\"col.field\"\n          [sticky]=\"col.pinned === 'left'\"\n          [stickyEnd]=\"col.pinned === 'right'\"\n        >\n          <!-- Header Cell -->\n          <th\n            mat-header-cell\n            *matHeaderCellDef\n            [class]=\"col | colClass\"\n            [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n            [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n            [style.width]=\"col.width\"\n            [style.min-width]=\"col.width\"\n            [style.left]=\"col.left\"\n            [style.right]=\"col.right\"\n          >\n            <!-- Prioridad 1: Template espec\u00EDfico de la columna -->\n            @if (col.headerCellTemplate) {\n            <ng-template\n              [ngTemplateOutlet]=\"col.headerCellTemplate\"\n              [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n            />\n            } @else if ($any(headerCellTemplate())?.[col.field] | isTemplateRef) {\n            <!-- Prioridad 2: Template general por campo -->\n            <ng-template\n              [ngTemplateOutlet]=\"$any(headerCellTemplate())[col.field]\"\n              [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n            />\n            } @else if (headerCellTemplate() | isTemplateRef) {\n            <!-- Prioridad 3: Template general -->\n            <ng-template\n              [ngTemplateOutlet]=\"$any(headerCellTemplate())\"\n              [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n            />\n            } @else if ($any(headerTemplate())?.[col.field] | isTemplateRef) {\n            <!-- Prioridad 4: Template por campo en headerTemplate -->\n            <ng-template\n              [ngTemplateOutlet]=\"$any(headerTemplate())[col.field]\"\n              [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n            />\n            } @else if (headerTemplate() | isTemplateRef) {\n            <!-- Prioridad 5: Template general en headerTemplate -->\n            <ng-template\n              [ngTemplateOutlet]=\"$any(headerTemplate())\"\n              [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n            />\n            } @else {\n            <!-- Comportamiento por defecto -->\n            <div class=\"mat-header-cell-inner\">\n              <div\n                [mat-sort-header]=\"col.sortProp?.id || col.field\"\n                [disabled]=\"!col.sortable\"\n                [disableClear]=\"col.sortProp?.disableClear ?? sortDisableClear()\"\n                [arrowPosition]=\"col.sortProp?.arrowPosition!\"\n                [start]=\"col.sortProp?.start!\"\n              >\n                @if (col.showExpand) {\n                <span class=\"data-grid-expansion-placeholder\"></span>\n                }\n                <span>{{ col.header | toObservable | async }}</span>\n                @if (col.sortable) {\n                <svg\n                  class=\"data-grid-icon mat-sort-header-icon\"\n                  viewBox=\"0 0 24 24\"\n                  width=\"24px\"\n                  height=\"24px\"\n                  fill=\"currentColor\"\n                  focusable=\"false\"\n                >\n                  <path d=\"M3,13H15V11H3M3,6V8H21V6M3,18H9V16H3V18Z\" />\n                </svg>\n                }\n              </div>\n              <ng-template\n                [ngTemplateOutlet]=\"headerExtraTplBase\"\n                [ngTemplateOutletContext]=\"{ $implicit: headerExtraTemplate(), colDef: col }\"\n              />\n            </div>\n            }\n          </th>\n\n          <!-- Data Cell -->\n          <td\n            mat-cell\n            *matCellDef=\"let row; let index = index; let dataIndex = dataIndex\"\n            [class]=\"col | colClass: row : rowChangeRecord : rowChangeRecord?.currentValue\"\n            [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n            [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n            [class.focused]=\"keyboardNavigation() && focusedRowIndex() === dataIndex\"\n            [style.width]=\"col.width\"\n            [style.min-width]=\"col.width\"\n            [style.left]=\"col.left\"\n            [style.right]=\"col.right\"\n            acpGridSelectableCell\n            [cellSelectable]=\"cellSelectable()\"\n            (cellSelectedChange)=\"selectCell($event, row, col)\"\n          >\n            @if (cellTemplate() | isTemplateRef) {\n            <ng-template\n              [ngTemplateOutlet]=\"$any(cellTemplate())\"\n              [ngTemplateOutletContext]=\"{\n                    $implicit: row,\n                    rowData: row,\n                    index: getIndex(index, dataIndex),\n                    colDef: col,\n                  }\"\n            />\n            } @else { @if ($any(cellTemplate())?.[col.field] | isTemplateRef) {\n            <ng-template\n              [ngTemplateOutlet]=\"$any(cellTemplate())[col.field]\"\n              [ngTemplateOutletContext]=\"{\n                      $implicit: row,\n                      rowData: row,\n                      index: getIndex(index, dataIndex),\n                      colDef: col,\n                    }\"\n            />\n            } @else { @if (col.cellTemplate) {\n            <ng-template\n              [ngTemplateOutlet]=\"col.cellTemplate!\"\n              [ngTemplateOutletContext]=\"{\n                        $implicit: row,\n                        rowData: row,\n                        index: getIndex(index, dataIndex),\n                        colDef: col,\n                      }\"\n            />\n            } @else { @if (col.showExpand) {\n            <button\n              class=\"data-grid-row-expand-button\"\n              mat-icon-button\n              acpDataGridExpansionToggle\n              type=\"button\"\n              [(opened)]=\"expansionRowStates()[dataIndex].expanded\"\n              (toggleChange)=\"onExpansionChange($event, row, col, dataIndex)\"\n            >\n              <svg\n                class=\"data-grid-icon data-grid-row-expand-icon\"\n                viewBox=\"0 0 24 24\"\n                width=\"24px\"\n                height=\"24px\"\n                fill=\"currentColor\"\n                focusable=\"false\"\n              >\n                <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\n              </svg>\n            </button>\n            }\n            <acp-data-grid-cell\n              [rowData]=\"row\"\n              [colDef]=\"col\"\n              [placeholder]=\"emptyValuePlaceholder()\"\n              (rowDataChange)=\"onRowDataChange($event)\"\n            />\n            } } }\n          </td>\n\n          <!-- Footer Cell -->\n          <td\n            mat-footer-cell\n            *matFooterCellDef\n            [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n            [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n            [style.width]=\"col.width\"\n            [style.min-width]=\"col.width\"\n            [style.left]=\"col.left\"\n            [style.right]=\"col.right\"\n          >\n            @if (col.showExpand) {\n            <span class=\"data-grid-expansion-placeholder\"></span>\n            } @if (summaryTemplate() | isTemplateRef) {\n            <ng-template\n              [ngTemplateOutlet]=\"$any(summaryTemplate())\"\n              [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col, data: data() }\"\n            />\n            } @else { @if ($any(summaryTemplate())?.[col.field] | isTemplateRef) {\n            <ng-template\n              [ngTemplateOutlet]=\"$any(summaryTemplate())[col.field]\"\n              [ngTemplateOutletContext]=\"{\n                      $implicit: getColData(data(), col),\n                      colData: getColData(data(), col),\n                      colDef: col,\n                    }\"\n            />\n            } @else {\n            <acp-data-grid-cell\n              [summary]=\"true\"\n              [data]=\"data()\"\n              [colDef]=\"col\"\n              [placeholder]=\"emptyValuePlaceholder()\"\n            />\n            } }\n          </td>\n        </ng-container>\n        }\n\n        <!-- Header Row -->\n        @if (!useContentHeaderRowTemplate()) {\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumns(); sticky: true\"></tr>\n        }\n\n        <!-- Data Rows -->\n        @if (!useContentRowTemplate()) {\n        <tr\n          mat-row\n          *matRowDef=\"\n              let row;\n              let index = index;\n              let dataIndex = dataIndex;\n              columns: displayedColumns()\n            \"\n          [class]=\"row | rowClass: index : dataIndex : rowClassFormatter()\"\n          [class.selected]=\"rowSelection.isSelected(row)\"\n          [class.focused]=\"keyboardNavigation() && focusedRowIndex() === dataIndex\"\n          [class.highlighted]=\"highlightedRowIndex() === dataIndex\"\n          (click)=\"selectRow($event, row, getIndex(index, dataIndex))\"\n          (contextmenu)=\"contextmenu($event, row, getIndex(index, dataIndex))\"\n        ></tr>\n        }\n\n        <!-- Summary Row -->\n        @if (whetherShowSummary()) {\n        <tr mat-footer-row *matFooterRowDef=\"displayedColumns(); sticky: true\"></tr>\n        }\n\n        <!-- Expansion Row -->\n        @if (expandable()) {\n        <ng-container matColumnDef=\"DataGridExpansionColumnDef\">\n          <td\n            mat-cell\n            *matCellDef=\"let row; let dataIndex = dataIndex\"\n            [attr.colspan]=\"displayedColumns().length\"\n          >\n            <div class=\"data-grid-expansion-detail-wrapper\">\n              <div class=\"data-grid-expansion-detail\">\n                <ng-template\n                  [ngTemplateOutlet]=\"expansionTemplate()\"\n                  [ngTemplateOutletContext]=\"{\n                      $implicit: row,\n                      rowData: row,\n                      index: dataIndex,\n                      expanded: expansionRowStates()[dataIndex].expanded,\n                    }\"\n                />\n              </div>\n            </div>\n          </td>\n        </ng-container>\n        <tr\n          mat-row\n          *matRowDef=\"let row; columns: ['DataGridExpansionColumnDef']; let dataIndex = dataIndex\"\n          class=\"data-grid-expansion\"\n          [class]=\"expansionRowStates()[dataIndex].expanded ? 'expanded' : 'collapsed'\"\n        ></tr>\n        }\n      </table>\n    </div>\n\n    <!-- No result -->\n    @if (hasNoResult()) {\n    <div class=\"data-grid-no-result\">\n      @if (noResultTemplate()) {\n      <ng-template [ngTemplateOutlet]=\"noResultTemplate()\" />\n      } @else { {{ noResultText() }} }\n    </div>\n    }\n\n    <!-- Infinite Scroll Loading Indicator -->\n    @if (infiniteScroll() && isLoadingMore()) {\n    <div class=\"data-grid-infinite-scroll-loading\">\n      <mat-progress-bar mode=\"indeterminate\" />\n    </div>\n    }\n  </div>\n</div>\n\n<div class=\"data-grid-footer\">\n  <!-- Pagination -->\n  @if (!infiniteScroll() && showPaginator()) {\n  <div class=\"data-grid-pagination\">\n    @if (paginationTemplate()) {\n    <ng-template [ngTemplateOutlet]=\"paginationTemplate()\" />\n    } @else {\n    <mat-paginator\n      [class.mat-paginator-hidden]=\"!showPaginator()\"\n      [showFirstLastButtons]=\"showFirstLastButtons()\"\n      [length]=\"length()\"\n      [pageIndex]=\"pageIndex()\"\n      [pageSize]=\"pageSize()\"\n      [pageSizeOptions]=\"pageSizeOptions()\"\n      [hidePageSize]=\"hidePageSize()\"\n      (page)=\"onPage($event)\"\n      [disabled]=\"pageDisabled()\"\n    />\n    }\n  </div>\n  }\n</div>\n\n<!-- Header template for extra content -->\n<ng-template #headerExtraTplBase let-headerExtraTemplate let-col=\"colDef\">\n  @if (headerExtraTemplate | isTemplateRef) {\n  <ng-template\n    [ngTemplateOutlet]=\"headerExtraTemplate\"\n    [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n  />\n  } @else { @if ($any(headerExtraTemplate)?.[col.field] | isTemplateRef) {\n  <ng-template\n    [ngTemplateOutlet]=\"headerExtraTemplate[col.field]\"\n    [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n  />\n  } }\n</ng-template>\n", styles: [".data-grid{position:relative;display:flex;flex-direction:column;width:100%;overflow:hidden;border:1px solid #c4c6d0;border-radius:12px}.data-grid .mat-table-container{overflow:auto}.data-grid .mat-table-container.mat-table-with-data{flex:1}.data-grid .mat-mdc-table:not(.mat-column-resize-table){min-width:100%;border-collapse:separate}.data-grid .mat-table-sticky-left{border-right:1px solid var(--mat-table-row-item-outline-color)}[dir=rtl] .data-grid .mat-table-sticky-left{border-right-width:0;border-left:1px solid var(--mat-table-row-item-outline-color)}.data-grid .mat-table-sticky-right{border-left:1px solid var(--mat-table-row-item-outline-color)}[dir=rtl] .data-grid .mat-table-sticky-right{border-left-width:0;border-right:1px solid var(--mat-table-row-item-outline-color)}.data-grid .mat-mdc-footer-cell{border-top:1px solid var(--mat-table-row-item-outline-color)}.data-grid .mat-mdc-row.highlighted{background-color:var(--mat-sys-surface-container-highest, #e6e1e5)}.data-grid .mat-mdc-row.data-grid-expansion{height:0;overflow:hidden}.data-grid .mat-mdc-row.data-grid-expansion .mat-mdc-cell{padding-top:0;padding-bottom:0}.data-grid .mat-mdc-row.data-grid-expansion.collapsed .mat-mdc-cell{border-bottom-width:0}.data-grid .mat-sort-header-icon{margin-left:4px}[dir=rtl] .data-grid .mat-sort-header-icon{margin-left:0;margin-right:4px}.data-grid .mat-header-cell-inner{display:inline-flex;align-items:center;vertical-align:middle}.data-grid .mat-paginator-hidden{display:none}.data-grid .data-grid-checkbox-cell{width:60px;min-width:60px;padding:0 calc((60px - var(--mat-checkbox-state-layer-size, 40px)) / 2)}.data-grid.data-grid-size-small .mat-mdc-table .mat-mdc-header-row,.data-grid.data-grid-size-small .mat-mdc-table .mat-mdc-footer-cell,.data-grid.data-grid-size-small .mat-mdc-table .mat-mdc-row{padding:4px 8px;font-size:12px;height:32px}.data-grid.data-grid-size-small .mat-mdc-table .mat-mdc-header-cell{height:32px}.data-grid.data-grid-size-small .data-grid-checkbox-cell{width:40px;min-width:40px;padding:0 calc((40px - var(--mat-checkbox-state-layer-size, 32px)) / 2)}.data-grid.data-grid-size-small .data-grid-row-expand-button{width:28px;height:28px}.data-grid.data-grid-size-small .data-grid-row-expand-button .data-grid-icon{width:18px;height:18px}.data-grid.data-grid-size-medium .mat-mdc-table .mat-mdc-header-row,.data-grid.data-grid-size-medium .mat-mdc-table .mat-mdc-header-cell,.data-grid.data-grid-size-medium .mat-mdc-table .mat-mdc-footer-cell,.data-grid.data-grid-size-medium .mat-mdc-table .mat-mdc-row,.data-grid.data-grid-size-medium .mat-mdc-table .mat-mdc-cell{padding:8px 12px;font-size:13px;height:40px}.data-grid.data-grid-size-medium .mat-mdc-table .mat-mdc-header-cell{height:48px}.data-grid.data-grid-size-medium .data-grid-checkbox-cell{width:50px;min-width:50px;padding:0 calc((50px - var(--mat-checkbox-state-layer-size, 36px)) / 2)}.data-grid.data-grid-size-normal .mat-mdc-table .mat-mdc-header-cell,.data-grid.data-grid-size-normal .mat-mdc-table .mat-mdc-footer-cell,.data-grid.data-grid-size-normal .mat-mdc-table .mat-mdc-cell{padding:12px 16px;font-size:14px;height:48px}.data-grid.data-grid-size-normal .mat-mdc-table .mat-mdc-header-cell{height:56px}.data-grid.data-grid-size-normal .data-grid-checkbox-cell{width:60px;min-width:60px;padding:0 calc((60px - var(--mat-checkbox-state-layer-size, 40px)) / 2)}.data-grid-progress{position:absolute;top:0;z-index:120;width:100%}.data-grid-toolbar{display:flex;justify-content:space-between;align-items:center;min-height:var(--mat-table-header-container-height, 56px);padding:8px;box-sizing:border-box}.data-grid-toolbar-content{flex:1;width:0;padding:0 8px}.data-grid-layout{display:flex;flex:1 1 auto;overflow:auto}.data-grid-content{flex-direction:column;width:0}.data-grid-footer{position:relative;z-index:1}.data-grid-no-result{display:flex;justify-content:center;align-items:center;flex:1;min-height:150px}.data-grid-expansion-placeholder{display:inline-block;vertical-align:middle;width:var(--mat-icon-button-state-layer-size);height:var(--mat-icon-button-state-layer-size)}.data-grid-expansion-detail-wrapper{display:grid;grid-template-rows:0fr;grid-template-columns:100%;padding:0;overflow:hidden}.data-grid-expansion.expanded .data-grid-expansion-detail-wrapper{grid-template-rows:1fr;padding:calc((var(--mat-table-row-item-container-height, 52px) - 20px) / 2) 0}.data-grid-expansion-detail{min-height:0}.data-grid-animations-enabled .data-grid-expansion-detail-wrapper{transition:all 225ms cubic-bezier(.4,0,.2,1)}.data-grid-row-expand-button.expanded .data-grid-row-expand-icon{transform:rotate(90deg)}.data-grid-row-expand-button.mat-mdc-icon-button,.data-grid-row-expand-button+data-grid-cell{vertical-align:middle}.mat-table-keyboard-navigation .mat-mdc-row.cdk-row.focused{background-color:#3f51b514!important;position:relative}.mat-table-keyboard-navigation .mat-mdc-row.cdk-row.focused:after{content:\"\";position:absolute;inset:0;border:2px solid #3f51b5;pointer-events:none;z-index:1}.mat-table-keyboard-navigation .mat-mdc-row:hover:not(.focused){background-color:#0000000a}.mat-app-background .mat-table-keyboard-navigation .mat-mdc-row.cdk-row.focused{background-color:rgba(var(--mat-primary-color),.08)!important}.mat-app-background .mat-table-keyboard-navigation .mat-mdc-row.cdk-row.focused:after{border-color:rgba(var(--mat-primary-color),1)}.data-grid-infinite-scroll-loading{width:100%;position:relative;height:4px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: 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: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "component", type: MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: DataGridSelectableCell, selector: "[acpGridSelectableCell]", inputs: ["cellSelectable"], outputs: ["cellSelectedChange"] }, { kind: "directive", type: DataGridExpansionToggle, selector: "[acpDataGridExpansionToggle]", inputs: ["opened", "expandableRow", "expansionRowTpl"], outputs: ["openedChange", "toggleChange"] }, { kind: "component", type: DataGridCell, selector: "acp-data-grid-cell", inputs: ["rowData", "colDef", "summary", "data", "placeholder"], outputs: ["rowDataChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: DataGridColClassPipe, name: "colClass" }, { kind: "pipe", type: AcpIsTemplateRefPipe, name: "isTemplateRef" }, { kind: "pipe", type: AcpToObservablePipe, name: "toObservable" }, { kind: "pipe", type: DataGridRowClassPipe, name: "rowClass" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DataGrid, decorators: [{
             type: Component,
@@ -3670,7 +3312,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         '[class.data-grid-size-normal]': 'size() === "normal"',
                         '[attr.tabindex]': '0',
                         // '(keydown)': 'handleKeyDown($event)'
-                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- src/app/shared/components/data-grid/data-grid.component.html -->\n@if (loading()) {\n<div class=\"data-grid-progress\">\n  <mat-progress-bar mode=\"indeterminate\" />\n</div>\n} @if (showToolbar()) {\n<div class=\"data-grid-toolbar\">\n  <div class=\"data-grid-toolbar-content\">\n    @if (toolbarTemplate()) {\n    <ng-template [ngTemplateOutlet]=\"toolbarTemplate()\" />\n    } @else if (toolbarTitle()) {\n    <div class=\"data-grid-toolbar-title\">{{ toolbarTitle() }}</div>\n    }\n  </div>\n  <div class=\"data-grid-toolbar-actions\"></div>\n</div>\n}\n\n<div class=\"data-grid-main data-grid-layout\">\n  <div class=\"data-grid-content data-grid-layout\">\n    <div #tableContainer class=\"mat-table-container\" [class.mat-table-with-data]=\"!hasNoResult()\">\n      <table\n        mat-table\n        [class.mat-table-hover]=\"rowHover()\"\n        [class.mat-table-striped]=\"rowStriped()\"\n        [class.mat-table-expandable]=\"expandable()\"\n        [class.mat-table-keyboard-navigation]=\"keyboardNavigation()\"\n        [dataSource]=\"dataSource\"\n        multiTemplateDataRows\n        matSort\n        [matSortActive]=\"sortActive()\"\n        [matSortDirection]=\"sortDirection()\"\n        [matSortDisableClear]=\"sortDisableClear()\"\n        [matSortDisabled]=\"sortDisabled()\"\n        [matSortStart]=\"sortStart()\"\n        (matSortChange)=\"onSortChange($event)\"\n        [trackBy]=\"trackBy\"\n      >\n        <!-- Selection Column -->\n        @if (rowSelectable() && !hideRowSelectionCheckbox()) {\n        <ng-container matColumnDef=\"DataGridCheckboxColumnDef\">\n          <th mat-header-cell *matHeaderCellDef class=\"data-grid-checkbox-cell\">\n            @if (multiSelectable()) {\n            <mat-checkbox\n              [checked]=\"rowSelection.hasValue() && isAllSelected()\"\n              [indeterminate]=\"rowSelection.hasValue() && !isAllSelected()\"\n              (change)=\"$event ? toggleAllRows() : null\"\n            />\n            }\n          </th>\n          <td\n            mat-cell\n            *matCellDef=\"let row; let index = index; let dataIndex = dataIndex\"\n            class=\"data-grid-checkbox-cell\"\n          >\n            @if (!shouldHideCheckbox(row, getIndex(index, dataIndex))) {\n            <mat-checkbox\n              [disabled]=\"isRowDisabled(row, getIndex(index, dataIndex))\"\n              [checked]=\"rowSelection.isSelected(row)\"\n              (click)=\"$event.stopPropagation()\"\n              (change)=\"$event ? toggleNormalCheckbox(row) : null\"\n            />\n            }\n          </td>\n          <td mat-footer-cell *matFooterCellDef class=\"data-grid-checkbox-cell\"></td>\n        </ng-container>\n        }\n\n        <!-- Data Columns -->\n        @for (col of columns(); track col.field) {\n        <ng-container\n          [matColumnDef]=\"col.field\"\n          [sticky]=\"col.pinned === 'left'\"\n          [stickyEnd]=\"col.pinned === 'right'\"\n        >\n          <!-- Header Cell -->\n          <th\n            mat-header-cell\n            *matHeaderCellDef\n            [class]=\"col | colClass\"\n            [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n            [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n            [style.width]=\"col.width\"\n            [style.min-width]=\"col.width\"\n            [style.left]=\"col.left\"\n            [style.right]=\"col.right\"\n          >\n            <!-- Prioridad 1: Template espec\u00EDfico de la columna -->\n            @if (col.headerCellTemplate) {\n            <ng-template\n              [ngTemplateOutlet]=\"col.headerCellTemplate\"\n              [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n            />\n            } @else if ($any(headerCellTemplate())?.[col.field] | isTemplateRef) {\n            <!-- Prioridad 2: Template general por campo -->\n            <ng-template\n              [ngTemplateOutlet]=\"$any(headerCellTemplate())[col.field]\"\n              [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n            />\n            } @else if (headerCellTemplate() | isTemplateRef) {\n            <!-- Prioridad 3: Template general -->\n            <ng-template\n              [ngTemplateOutlet]=\"$any(headerCellTemplate())\"\n              [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n            />\n            } @else if ($any(headerTemplate())?.[col.field] | isTemplateRef) {\n            <!-- Prioridad 4: Template por campo en headerTemplate -->\n            <ng-template\n              [ngTemplateOutlet]=\"$any(headerTemplate())[col.field]\"\n              [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n            />\n            } @else if (headerTemplate() | isTemplateRef) {\n            <!-- Prioridad 5: Template general en headerTemplate -->\n            <ng-template\n              [ngTemplateOutlet]=\"$any(headerTemplate())\"\n              [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n            />\n            } @else {\n            <!-- Comportamiento por defecto -->\n            <div class=\"mat-header-cell-inner\">\n              <div\n                [mat-sort-header]=\"col.sortProp?.id || col.field\"\n                [disabled]=\"!col.sortable\"\n                [disableClear]=\"col.sortProp?.disableClear ?? sortDisableClear()\"\n                [arrowPosition]=\"col.sortProp?.arrowPosition!\"\n                [start]=\"col.sortProp?.start!\"\n              >\n                @if (col.showExpand) {\n                <span class=\"data-grid-expansion-placeholder\"></span>\n                }\n                <span>{{ col.header | toObservable | async }}</span>\n                @if (col.sortable) {\n                <svg\n                  class=\"data-grid-icon mat-sort-header-icon\"\n                  viewBox=\"0 0 24 24\"\n                  width=\"24px\"\n                  height=\"24px\"\n                  fill=\"currentColor\"\n                  focusable=\"false\"\n                >\n                  <path d=\"M3,13H15V11H3M3,6V8H21V6M3,18H9V16H3V18Z\" />\n                </svg>\n                }\n              </div>\n              <ng-template\n                [ngTemplateOutlet]=\"headerExtraTplBase\"\n                [ngTemplateOutletContext]=\"{ $implicit: headerExtraTemplate(), colDef: col }\"\n              />\n            </div>\n            }\n          </th>\n\n          <!-- Data Cell -->\n          <td\n            mat-cell\n            *matCellDef=\"let row; let index = index; let dataIndex = dataIndex\"\n            [class]=\"col | colClass: row : rowChangeRecord : rowChangeRecord?.currentValue\"\n            [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n            [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n            [class.focused]=\"keyboardNavigation() && focusedRowIndex() === dataIndex\"\n            [style.width]=\"col.width\"\n            [style.min-width]=\"col.width\"\n            [style.left]=\"col.left\"\n            [style.right]=\"col.right\"\n            acpGridSelectableCell\n            [cellSelectable]=\"cellSelectable()\"\n            (cellSelectedChange)=\"selectCell($event, row, col)\"\n          >\n            @if (cellTemplate() | isTemplateRef) {\n            <ng-template\n              [ngTemplateOutlet]=\"$any(cellTemplate())\"\n              [ngTemplateOutletContext]=\"{\n                    $implicit: row,\n                    rowData: row,\n                    index: getIndex(index, dataIndex),\n                    colDef: col,\n                  }\"\n            />\n            } @else { @if ($any(cellTemplate())?.[col.field] | isTemplateRef) {\n            <ng-template\n              [ngTemplateOutlet]=\"$any(cellTemplate())[col.field]\"\n              [ngTemplateOutletContext]=\"{\n                      $implicit: row,\n                      rowData: row,\n                      index: getIndex(index, dataIndex),\n                      colDef: col,\n                    }\"\n            />\n            } @else { @if (col.cellTemplate) {\n            <ng-template\n              [ngTemplateOutlet]=\"col.cellTemplate!\"\n              [ngTemplateOutletContext]=\"{\n                        $implicit: row,\n                        rowData: row,\n                        index: getIndex(index, dataIndex),\n                        colDef: col,\n                      }\"\n            />\n            } @else { @if (col.showExpand) {\n            <button\n              class=\"data-grid-row-expand-button\"\n              mat-icon-button\n              acpDataGridExpansionToggle\n              type=\"button\"\n              [(opened)]=\"expansionRowStates()[dataIndex].expanded\"\n              (toggleChange)=\"onExpansionChange($event, row, col, dataIndex)\"\n            >\n              <svg\n                class=\"data-grid-icon data-grid-row-expand-icon\"\n                viewBox=\"0 0 24 24\"\n                width=\"24px\"\n                height=\"24px\"\n                fill=\"currentColor\"\n                focusable=\"false\"\n              >\n                <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\n              </svg>\n            </button>\n            }\n            <acp-data-grid-cell\n              [rowData]=\"row\"\n              [colDef]=\"col\"\n              [placeholder]=\"emptyValuePlaceholder()\"\n              (rowDataChange)=\"onRowDataChange($event)\"\n            />\n            } } }\n          </td>\n\n          <!-- Footer Cell -->\n          <td\n            mat-footer-cell\n            *matFooterCellDef\n            [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n            [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n            [style.width]=\"col.width\"\n            [style.min-width]=\"col.width\"\n            [style.left]=\"col.left\"\n            [style.right]=\"col.right\"\n          >\n            @if (col.showExpand) {\n            <span class=\"data-grid-expansion-placeholder\"></span>\n            } @if (summaryTemplate() | isTemplateRef) {\n            <ng-template\n              [ngTemplateOutlet]=\"$any(summaryTemplate())\"\n              [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col, data: data() }\"\n            />\n            } @else { @if ($any(summaryTemplate())?.[col.field] | isTemplateRef) {\n            <ng-template\n              [ngTemplateOutlet]=\"$any(summaryTemplate())[col.field]\"\n              [ngTemplateOutletContext]=\"{\n                      $implicit: getColData(data(), col),\n                      colData: getColData(data(), col),\n                      colDef: col,\n                    }\"\n            />\n            } @else {\n            <acp-data-grid-cell\n              [summary]=\"true\"\n              [data]=\"data()\"\n              [colDef]=\"col\"\n              [placeholder]=\"emptyValuePlaceholder()\"\n            />\n            } }\n          </td>\n        </ng-container>\n        }\n\n        <!-- Header Row -->\n        @if (!useContentHeaderRowTemplate()) {\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumns(); sticky: true\"></tr>\n        }\n\n        <!-- Data Rows -->\n        @if (!useContentRowTemplate()) {\n        <tr\n          mat-row\n          *matRowDef=\"\n              let row;\n              let index = index;\n              let dataIndex = dataIndex;\n              columns: displayedColumns()\n            \"\n          [class]=\"row | rowClass: index : dataIndex : rowClassFormatter()\"\n          [class.selected]=\"rowSelection.isSelected(row)\"\n          [class.focused]=\"keyboardNavigation() && focusedRowIndex() === dataIndex\"\n          (click)=\"selectRow($event, row, getIndex(index, dataIndex))\"\n          (contextmenu)=\"contextmenu($event, row, getIndex(index, dataIndex))\"\n        ></tr>\n        }\n\n        <!-- Summary Row -->\n        @if (whetherShowSummary()) {\n        <tr mat-footer-row *matFooterRowDef=\"displayedColumns(); sticky: true\"></tr>\n        }\n\n        <!-- Expansion Row -->\n        @if (expandable()) {\n        <ng-container matColumnDef=\"DataGridExpansionColumnDef\">\n          <td\n            mat-cell\n            *matCellDef=\"let row; let dataIndex = dataIndex\"\n            [attr.colspan]=\"displayedColumns().length\"\n          >\n            <div class=\"data-grid-expansion-detail-wrapper\">\n              <div class=\"data-grid-expansion-detail\">\n                <ng-template\n                  [ngTemplateOutlet]=\"expansionTemplate()\"\n                  [ngTemplateOutletContext]=\"{\n                      $implicit: row,\n                      rowData: row,\n                      index: dataIndex,\n                      expanded: expansionRowStates()[dataIndex].expanded,\n                    }\"\n                />\n              </div>\n            </div>\n          </td>\n        </ng-container>\n        <tr\n          mat-row\n          *matRowDef=\"let row; columns: ['DataGridExpansionColumnDef']; let dataIndex = dataIndex\"\n          class=\"data-grid-expansion\"\n          [class]=\"expansionRowStates()[dataIndex].expanded ? 'expanded' : 'collapsed'\"\n        ></tr>\n        }\n      </table>\n    </div>\n\n    <!-- No result -->\n    @if (hasNoResult()) {\n    <div class=\"data-grid-no-result\">\n      @if (noResultTemplate()) {\n      <ng-template [ngTemplateOutlet]=\"noResultTemplate()\" />\n      } @else { {{ noResultText() }} }\n    </div>\n    }\n\n    <!-- Infinite Scroll Loading Indicator -->\n    @if (infiniteScroll() && isLoadingMore()) {\n    <div class=\"data-grid-infinite-scroll-loading\">\n      <mat-progress-bar mode=\"indeterminate\" />\n    </div>\n    }\n  </div>\n</div>\n\n<div class=\"data-grid-footer\">\n  <!-- Pagination -->\n  @if (!infiniteScroll() && showPaginator()) {\n  <div class=\"data-grid-pagination\">\n    @if (paginationTemplate()) {\n    <ng-template [ngTemplateOutlet]=\"paginationTemplate()\" />\n    } @else {\n    <mat-paginator\n      [class.mat-paginator-hidden]=\"!showPaginator()\"\n      [showFirstLastButtons]=\"showFirstLastButtons()\"\n      [length]=\"length()\"\n      [pageIndex]=\"pageIndex()\"\n      [pageSize]=\"pageSize()\"\n      [pageSizeOptions]=\"pageSizeOptions()\"\n      [hidePageSize]=\"hidePageSize()\"\n      (page)=\"onPage($event)\"\n      [disabled]=\"pageDisabled()\"\n    />\n    }\n  </div>\n  }\n</div>\n\n<!-- Header template for extra content -->\n<ng-template #headerExtraTplBase let-headerExtraTemplate let-col=\"colDef\">\n  @if (headerExtraTemplate | isTemplateRef) {\n  <ng-template\n    [ngTemplateOutlet]=\"headerExtraTemplate\"\n    [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n  />\n  } @else { @if ($any(headerExtraTemplate)?.[col.field] | isTemplateRef) {\n  <ng-template\n    [ngTemplateOutlet]=\"headerExtraTemplate[col.field]\"\n    [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n  />\n  } }\n</ng-template>\n", styles: [".data-grid{position:relative;display:flex;flex-direction:column;width:100%;overflow:hidden;border:1px solid #c4c6d0;border-radius:12px}.data-grid .mat-table-container{overflow:auto}.data-grid .mat-table-container.mat-table-with-data{flex:1}.data-grid .mat-mdc-table:not(.mat-column-resize-table){min-width:100%;border-collapse:separate}.data-grid .mat-table-sticky-left{border-right:1px solid var(--mat-table-row-item-outline-color)}[dir=rtl] .data-grid .mat-table-sticky-left{border-right-width:0;border-left:1px solid var(--mat-table-row-item-outline-color)}.data-grid .mat-table-sticky-right{border-left:1px solid var(--mat-table-row-item-outline-color)}[dir=rtl] .data-grid .mat-table-sticky-right{border-left-width:0;border-right:1px solid var(--mat-table-row-item-outline-color)}.data-grid .mat-mdc-footer-cell{border-top:1px solid var(--mat-table-row-item-outline-color)}.data-grid .mat-mdc-row.data-grid-expansion{height:0;overflow:hidden}.data-grid .mat-mdc-row.data-grid-expansion .mat-mdc-cell{padding-top:0;padding-bottom:0}.data-grid .mat-mdc-row.data-grid-expansion.collapsed .mat-mdc-cell{border-bottom-width:0}.data-grid .mat-sort-header-icon{margin-left:4px}[dir=rtl] .data-grid .mat-sort-header-icon{margin-left:0;margin-right:4px}.data-grid .mat-header-cell-inner{display:inline-flex;align-items:center;vertical-align:middle}.data-grid .mat-paginator-hidden{display:none}.data-grid .data-grid-checkbox-cell{width:60px;min-width:60px;padding:0 calc((60px - var(--mat-checkbox-state-layer-size, 40px)) / 2)}.data-grid.data-grid-size-small .mat-mdc-table .mat-mdc-header-row,.data-grid.data-grid-size-small .mat-mdc-table .mat-mdc-footer-cell,.data-grid.data-grid-size-small .mat-mdc-table .mat-mdc-row{padding:4px 8px;font-size:12px;height:32px}.data-grid.data-grid-size-small .mat-mdc-table .mat-mdc-header-cell{height:32px}.data-grid.data-grid-size-small .data-grid-checkbox-cell{width:40px;min-width:40px;padding:0 calc((40px - var(--mat-checkbox-state-layer-size, 32px)) / 2)}.data-grid.data-grid-size-small .data-grid-row-expand-button{width:28px;height:28px}.data-grid.data-grid-size-small .data-grid-row-expand-button .data-grid-icon{width:18px;height:18px}.data-grid.data-grid-size-medium .mat-mdc-table .mat-mdc-header-row,.data-grid.data-grid-size-medium .mat-mdc-table .mat-mdc-header-cell,.data-grid.data-grid-size-medium .mat-mdc-table .mat-mdc-footer-cell,.data-grid.data-grid-size-medium .mat-mdc-table .mat-mdc-row,.data-grid.data-grid-size-medium .mat-mdc-table .mat-mdc-cell{padding:8px 12px;font-size:13px;height:40px}.data-grid.data-grid-size-medium .mat-mdc-table .mat-mdc-header-cell{height:48px}.data-grid.data-grid-size-medium .data-grid-checkbox-cell{width:50px;min-width:50px;padding:0 calc((50px - var(--mat-checkbox-state-layer-size, 36px)) / 2)}.data-grid.data-grid-size-normal .mat-mdc-table .mat-mdc-header-cell,.data-grid.data-grid-size-normal .mat-mdc-table .mat-mdc-footer-cell,.data-grid.data-grid-size-normal .mat-mdc-table .mat-mdc-cell{padding:12px 16px;font-size:14px;height:48px}.data-grid.data-grid-size-normal .mat-mdc-table .mat-mdc-header-cell{height:56px}.data-grid.data-grid-size-normal .data-grid-checkbox-cell{width:60px;min-width:60px;padding:0 calc((60px - var(--mat-checkbox-state-layer-size, 40px)) / 2)}.data-grid-progress{position:absolute;top:0;z-index:120;width:100%}.data-grid-toolbar{display:flex;justify-content:space-between;align-items:center;min-height:var(--mat-table-header-container-height, 56px);padding:8px;box-sizing:border-box}.data-grid-toolbar-content{flex:1;width:0;padding:0 8px}.data-grid-layout{display:flex;flex:1 1 auto;overflow:auto}.data-grid-content{flex-direction:column;width:0}.data-grid-footer{position:relative;z-index:1}.data-grid-no-result{display:flex;justify-content:center;align-items:center;flex:1;min-height:150px}.data-grid-expansion-placeholder{display:inline-block;vertical-align:middle;width:var(--mat-icon-button-state-layer-size);height:var(--mat-icon-button-state-layer-size)}.data-grid-expansion-detail-wrapper{display:grid;grid-template-rows:0fr;grid-template-columns:100%;padding:0;overflow:hidden}.data-grid-expansion.expanded .data-grid-expansion-detail-wrapper{grid-template-rows:1fr;padding:calc((var(--mat-table-row-item-container-height, 52px) - 20px) / 2) 0}.data-grid-expansion-detail{min-height:0}.data-grid-animations-enabled .data-grid-expansion-detail-wrapper{transition:all 225ms cubic-bezier(.4,0,.2,1)}.data-grid-row-expand-button.expanded .data-grid-row-expand-icon{transform:rotate(90deg)}.data-grid-row-expand-button.mat-mdc-icon-button,.data-grid-row-expand-button+data-grid-cell{vertical-align:middle}.mat-table-keyboard-navigation .mat-mdc-row.cdk-row.focused{background-color:#3f51b514!important;position:relative}.mat-table-keyboard-navigation .mat-mdc-row.cdk-row.focused:after{content:\"\";position:absolute;inset:0;border:2px solid #3f51b5;pointer-events:none;z-index:1}.mat-table-keyboard-navigation .mat-mdc-row:hover:not(.focused){background-color:#0000000a}.mat-app-background .mat-table-keyboard-navigation .mat-mdc-row.cdk-row.focused{background-color:rgba(var(--mat-primary-color),.08)!important}.mat-app-background .mat-table-keyboard-navigation .mat-mdc-row.cdk-row.focused:after{border-color:rgba(var(--mat-primary-color),1)}.data-grid-infinite-scroll-loading{width:100%;position:relative;height:4px}\n"] }]
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- src/app/shared/components/data-grid/data-grid.component.html -->\n@if (loading()) {\n<div class=\"data-grid-progress\">\n  <mat-progress-bar mode=\"indeterminate\" />\n</div>\n} @if (showToolbar()) {\n<div class=\"data-grid-toolbar\">\n  <div class=\"data-grid-toolbar-content\">\n    @if (toolbarTemplate()) {\n    <ng-template [ngTemplateOutlet]=\"toolbarTemplate()\" />\n    } @else if (toolbarTitle()) {\n    <div class=\"data-grid-toolbar-title\">{{ toolbarTitle() }}</div>\n    }\n  </div>\n  <div class=\"data-grid-toolbar-actions\"></div>\n</div>\n}\n\n<div class=\"data-grid-main data-grid-layout\">\n  <div class=\"data-grid-content data-grid-layout\">\n    <div #tableContainer class=\"mat-table-container\" [class.mat-table-with-data]=\"!hasNoResult()\">\n      <table\n        mat-table\n        [class.mat-table-hover]=\"rowHover()\"\n        [class.mat-table-striped]=\"rowStriped()\"\n        [class.mat-table-expandable]=\"expandable()\"\n        [class.mat-table-keyboard-navigation]=\"keyboardNavigation()\"\n        [dataSource]=\"dataSource\"\n        multiTemplateDataRows\n        matSort\n        [matSortActive]=\"sortActive()\"\n        [matSortDirection]=\"sortDirection()\"\n        [matSortDisableClear]=\"sortDisableClear()\"\n        [matSortDisabled]=\"sortDisabled()\"\n        [matSortStart]=\"sortStart()\"\n        (matSortChange)=\"onSortChange($event)\"\n        [trackBy]=\"trackBy\"\n      >\n        <!-- Selection Column -->\n        @if (rowSelectable() && !hideRowSelectionCheckbox()) {\n        <ng-container matColumnDef=\"DataGridCheckboxColumnDef\">\n          <th mat-header-cell *matHeaderCellDef class=\"data-grid-checkbox-cell\">\n            @if (multiSelectable()) {\n            <mat-checkbox\n              [checked]=\"rowSelection.hasValue() && isAllSelected()\"\n              [indeterminate]=\"rowSelection.hasValue() && !isAllSelected()\"\n              (change)=\"$event ? toggleAllRows() : null\"\n            />\n            }\n          </th>\n          <td\n            mat-cell\n            *matCellDef=\"let row; let index = index; let dataIndex = dataIndex\"\n            class=\"data-grid-checkbox-cell\"\n          >\n            @if (!shouldHideCheckbox(row, getIndex(index, dataIndex))) {\n            <mat-checkbox\n              [disabled]=\"isRowDisabled(row, getIndex(index, dataIndex))\"\n              [checked]=\"rowSelection.isSelected(row)\"\n              (click)=\"$event.stopPropagation()\"\n              (change)=\"$event ? toggleNormalCheckbox(row) : null\"\n            />\n            }\n          </td>\n          <td mat-footer-cell *matFooterCellDef class=\"data-grid-checkbox-cell\"></td>\n        </ng-container>\n        }\n\n        <!-- Data Columns -->\n        @for (col of columns(); track col.field) {\n        <ng-container\n          [matColumnDef]=\"col.field\"\n          [sticky]=\"col.pinned === 'left'\"\n          [stickyEnd]=\"col.pinned === 'right'\"\n        >\n          <!-- Header Cell -->\n          <th\n            mat-header-cell\n            *matHeaderCellDef\n            [class]=\"col | colClass\"\n            [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n            [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n            [style.width]=\"col.width\"\n            [style.min-width]=\"col.width\"\n            [style.left]=\"col.left\"\n            [style.right]=\"col.right\"\n          >\n            <!-- Prioridad 1: Template espec\u00EDfico de la columna -->\n            @if (col.headerCellTemplate) {\n            <ng-template\n              [ngTemplateOutlet]=\"col.headerCellTemplate\"\n              [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n            />\n            } @else if ($any(headerCellTemplate())?.[col.field] | isTemplateRef) {\n            <!-- Prioridad 2: Template general por campo -->\n            <ng-template\n              [ngTemplateOutlet]=\"$any(headerCellTemplate())[col.field]\"\n              [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n            />\n            } @else if (headerCellTemplate() | isTemplateRef) {\n            <!-- Prioridad 3: Template general -->\n            <ng-template\n              [ngTemplateOutlet]=\"$any(headerCellTemplate())\"\n              [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n            />\n            } @else if ($any(headerTemplate())?.[col.field] | isTemplateRef) {\n            <!-- Prioridad 4: Template por campo en headerTemplate -->\n            <ng-template\n              [ngTemplateOutlet]=\"$any(headerTemplate())[col.field]\"\n              [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n            />\n            } @else if (headerTemplate() | isTemplateRef) {\n            <!-- Prioridad 5: Template general en headerTemplate -->\n            <ng-template\n              [ngTemplateOutlet]=\"$any(headerTemplate())\"\n              [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n            />\n            } @else {\n            <!-- Comportamiento por defecto -->\n            <div class=\"mat-header-cell-inner\">\n              <div\n                [mat-sort-header]=\"col.sortProp?.id || col.field\"\n                [disabled]=\"!col.sortable\"\n                [disableClear]=\"col.sortProp?.disableClear ?? sortDisableClear()\"\n                [arrowPosition]=\"col.sortProp?.arrowPosition!\"\n                [start]=\"col.sortProp?.start!\"\n              >\n                @if (col.showExpand) {\n                <span class=\"data-grid-expansion-placeholder\"></span>\n                }\n                <span>{{ col.header | toObservable | async }}</span>\n                @if (col.sortable) {\n                <svg\n                  class=\"data-grid-icon mat-sort-header-icon\"\n                  viewBox=\"0 0 24 24\"\n                  width=\"24px\"\n                  height=\"24px\"\n                  fill=\"currentColor\"\n                  focusable=\"false\"\n                >\n                  <path d=\"M3,13H15V11H3M3,6V8H21V6M3,18H9V16H3V18Z\" />\n                </svg>\n                }\n              </div>\n              <ng-template\n                [ngTemplateOutlet]=\"headerExtraTplBase\"\n                [ngTemplateOutletContext]=\"{ $implicit: headerExtraTemplate(), colDef: col }\"\n              />\n            </div>\n            }\n          </th>\n\n          <!-- Data Cell -->\n          <td\n            mat-cell\n            *matCellDef=\"let row; let index = index; let dataIndex = dataIndex\"\n            [class]=\"col | colClass: row : rowChangeRecord : rowChangeRecord?.currentValue\"\n            [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n            [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n            [class.focused]=\"keyboardNavigation() && focusedRowIndex() === dataIndex\"\n            [style.width]=\"col.width\"\n            [style.min-width]=\"col.width\"\n            [style.left]=\"col.left\"\n            [style.right]=\"col.right\"\n            acpGridSelectableCell\n            [cellSelectable]=\"cellSelectable()\"\n            (cellSelectedChange)=\"selectCell($event, row, col)\"\n          >\n            @if (cellTemplate() | isTemplateRef) {\n            <ng-template\n              [ngTemplateOutlet]=\"$any(cellTemplate())\"\n              [ngTemplateOutletContext]=\"{\n                    $implicit: row,\n                    rowData: row,\n                    index: getIndex(index, dataIndex),\n                    colDef: col,\n                  }\"\n            />\n            } @else { @if ($any(cellTemplate())?.[col.field] | isTemplateRef) {\n            <ng-template\n              [ngTemplateOutlet]=\"$any(cellTemplate())[col.field]\"\n              [ngTemplateOutletContext]=\"{\n                      $implicit: row,\n                      rowData: row,\n                      index: getIndex(index, dataIndex),\n                      colDef: col,\n                    }\"\n            />\n            } @else { @if (col.cellTemplate) {\n            <ng-template\n              [ngTemplateOutlet]=\"col.cellTemplate!\"\n              [ngTemplateOutletContext]=\"{\n                        $implicit: row,\n                        rowData: row,\n                        index: getIndex(index, dataIndex),\n                        colDef: col,\n                      }\"\n            />\n            } @else { @if (col.showExpand) {\n            <button\n              class=\"data-grid-row-expand-button\"\n              mat-icon-button\n              acpDataGridExpansionToggle\n              type=\"button\"\n              [(opened)]=\"expansionRowStates()[dataIndex].expanded\"\n              (toggleChange)=\"onExpansionChange($event, row, col, dataIndex)\"\n            >\n              <svg\n                class=\"data-grid-icon data-grid-row-expand-icon\"\n                viewBox=\"0 0 24 24\"\n                width=\"24px\"\n                height=\"24px\"\n                fill=\"currentColor\"\n                focusable=\"false\"\n              >\n                <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\n              </svg>\n            </button>\n            }\n            <acp-data-grid-cell\n              [rowData]=\"row\"\n              [colDef]=\"col\"\n              [placeholder]=\"emptyValuePlaceholder()\"\n              (rowDataChange)=\"onRowDataChange($event)\"\n            />\n            } } }\n          </td>\n\n          <!-- Footer Cell -->\n          <td\n            mat-footer-cell\n            *matFooterCellDef\n            [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n            [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n            [style.width]=\"col.width\"\n            [style.min-width]=\"col.width\"\n            [style.left]=\"col.left\"\n            [style.right]=\"col.right\"\n          >\n            @if (col.showExpand) {\n            <span class=\"data-grid-expansion-placeholder\"></span>\n            } @if (summaryTemplate() | isTemplateRef) {\n            <ng-template\n              [ngTemplateOutlet]=\"$any(summaryTemplate())\"\n              [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col, data: data() }\"\n            />\n            } @else { @if ($any(summaryTemplate())?.[col.field] | isTemplateRef) {\n            <ng-template\n              [ngTemplateOutlet]=\"$any(summaryTemplate())[col.field]\"\n              [ngTemplateOutletContext]=\"{\n                      $implicit: getColData(data(), col),\n                      colData: getColData(data(), col),\n                      colDef: col,\n                    }\"\n            />\n            } @else {\n            <acp-data-grid-cell\n              [summary]=\"true\"\n              [data]=\"data()\"\n              [colDef]=\"col\"\n              [placeholder]=\"emptyValuePlaceholder()\"\n            />\n            } }\n          </td>\n        </ng-container>\n        }\n\n        <!-- Header Row -->\n        @if (!useContentHeaderRowTemplate()) {\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumns(); sticky: true\"></tr>\n        }\n\n        <!-- Data Rows -->\n        @if (!useContentRowTemplate()) {\n        <tr\n          mat-row\n          *matRowDef=\"\n              let row;\n              let index = index;\n              let dataIndex = dataIndex;\n              columns: displayedColumns()\n            \"\n          [class]=\"row | rowClass: index : dataIndex : rowClassFormatter()\"\n          [class.selected]=\"rowSelection.isSelected(row)\"\n          [class.focused]=\"keyboardNavigation() && focusedRowIndex() === dataIndex\"\n          [class.highlighted]=\"highlightedRowIndex() === dataIndex\"\n          (click)=\"selectRow($event, row, getIndex(index, dataIndex))\"\n          (contextmenu)=\"contextmenu($event, row, getIndex(index, dataIndex))\"\n        ></tr>\n        }\n\n        <!-- Summary Row -->\n        @if (whetherShowSummary()) {\n        <tr mat-footer-row *matFooterRowDef=\"displayedColumns(); sticky: true\"></tr>\n        }\n\n        <!-- Expansion Row -->\n        @if (expandable()) {\n        <ng-container matColumnDef=\"DataGridExpansionColumnDef\">\n          <td\n            mat-cell\n            *matCellDef=\"let row; let dataIndex = dataIndex\"\n            [attr.colspan]=\"displayedColumns().length\"\n          >\n            <div class=\"data-grid-expansion-detail-wrapper\">\n              <div class=\"data-grid-expansion-detail\">\n                <ng-template\n                  [ngTemplateOutlet]=\"expansionTemplate()\"\n                  [ngTemplateOutletContext]=\"{\n                      $implicit: row,\n                      rowData: row,\n                      index: dataIndex,\n                      expanded: expansionRowStates()[dataIndex].expanded,\n                    }\"\n                />\n              </div>\n            </div>\n          </td>\n        </ng-container>\n        <tr\n          mat-row\n          *matRowDef=\"let row; columns: ['DataGridExpansionColumnDef']; let dataIndex = dataIndex\"\n          class=\"data-grid-expansion\"\n          [class]=\"expansionRowStates()[dataIndex].expanded ? 'expanded' : 'collapsed'\"\n        ></tr>\n        }\n      </table>\n    </div>\n\n    <!-- No result -->\n    @if (hasNoResult()) {\n    <div class=\"data-grid-no-result\">\n      @if (noResultTemplate()) {\n      <ng-template [ngTemplateOutlet]=\"noResultTemplate()\" />\n      } @else { {{ noResultText() }} }\n    </div>\n    }\n\n    <!-- Infinite Scroll Loading Indicator -->\n    @if (infiniteScroll() && isLoadingMore()) {\n    <div class=\"data-grid-infinite-scroll-loading\">\n      <mat-progress-bar mode=\"indeterminate\" />\n    </div>\n    }\n  </div>\n</div>\n\n<div class=\"data-grid-footer\">\n  <!-- Pagination -->\n  @if (!infiniteScroll() && showPaginator()) {\n  <div class=\"data-grid-pagination\">\n    @if (paginationTemplate()) {\n    <ng-template [ngTemplateOutlet]=\"paginationTemplate()\" />\n    } @else {\n    <mat-paginator\n      [class.mat-paginator-hidden]=\"!showPaginator()\"\n      [showFirstLastButtons]=\"showFirstLastButtons()\"\n      [length]=\"length()\"\n      [pageIndex]=\"pageIndex()\"\n      [pageSize]=\"pageSize()\"\n      [pageSizeOptions]=\"pageSizeOptions()\"\n      [hidePageSize]=\"hidePageSize()\"\n      (page)=\"onPage($event)\"\n      [disabled]=\"pageDisabled()\"\n    />\n    }\n  </div>\n  }\n</div>\n\n<!-- Header template for extra content -->\n<ng-template #headerExtraTplBase let-headerExtraTemplate let-col=\"colDef\">\n  @if (headerExtraTemplate | isTemplateRef) {\n  <ng-template\n    [ngTemplateOutlet]=\"headerExtraTemplate\"\n    [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n  />\n  } @else { @if ($any(headerExtraTemplate)?.[col.field] | isTemplateRef) {\n  <ng-template\n    [ngTemplateOutlet]=\"headerExtraTemplate[col.field]\"\n    [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\"\n  />\n  } }\n</ng-template>\n", styles: [".data-grid{position:relative;display:flex;flex-direction:column;width:100%;overflow:hidden;border:1px solid #c4c6d0;border-radius:12px}.data-grid .mat-table-container{overflow:auto}.data-grid .mat-table-container.mat-table-with-data{flex:1}.data-grid .mat-mdc-table:not(.mat-column-resize-table){min-width:100%;border-collapse:separate}.data-grid .mat-table-sticky-left{border-right:1px solid var(--mat-table-row-item-outline-color)}[dir=rtl] .data-grid .mat-table-sticky-left{border-right-width:0;border-left:1px solid var(--mat-table-row-item-outline-color)}.data-grid .mat-table-sticky-right{border-left:1px solid var(--mat-table-row-item-outline-color)}[dir=rtl] .data-grid .mat-table-sticky-right{border-left-width:0;border-right:1px solid var(--mat-table-row-item-outline-color)}.data-grid .mat-mdc-footer-cell{border-top:1px solid var(--mat-table-row-item-outline-color)}.data-grid .mat-mdc-row.highlighted{background-color:var(--mat-sys-surface-container-highest, #e6e1e5)}.data-grid .mat-mdc-row.data-grid-expansion{height:0;overflow:hidden}.data-grid .mat-mdc-row.data-grid-expansion .mat-mdc-cell{padding-top:0;padding-bottom:0}.data-grid .mat-mdc-row.data-grid-expansion.collapsed .mat-mdc-cell{border-bottom-width:0}.data-grid .mat-sort-header-icon{margin-left:4px}[dir=rtl] .data-grid .mat-sort-header-icon{margin-left:0;margin-right:4px}.data-grid .mat-header-cell-inner{display:inline-flex;align-items:center;vertical-align:middle}.data-grid .mat-paginator-hidden{display:none}.data-grid .data-grid-checkbox-cell{width:60px;min-width:60px;padding:0 calc((60px - var(--mat-checkbox-state-layer-size, 40px)) / 2)}.data-grid.data-grid-size-small .mat-mdc-table .mat-mdc-header-row,.data-grid.data-grid-size-small .mat-mdc-table .mat-mdc-footer-cell,.data-grid.data-grid-size-small .mat-mdc-table .mat-mdc-row{padding:4px 8px;font-size:12px;height:32px}.data-grid.data-grid-size-small .mat-mdc-table .mat-mdc-header-cell{height:32px}.data-grid.data-grid-size-small .data-grid-checkbox-cell{width:40px;min-width:40px;padding:0 calc((40px - var(--mat-checkbox-state-layer-size, 32px)) / 2)}.data-grid.data-grid-size-small .data-grid-row-expand-button{width:28px;height:28px}.data-grid.data-grid-size-small .data-grid-row-expand-button .data-grid-icon{width:18px;height:18px}.data-grid.data-grid-size-medium .mat-mdc-table .mat-mdc-header-row,.data-grid.data-grid-size-medium .mat-mdc-table .mat-mdc-header-cell,.data-grid.data-grid-size-medium .mat-mdc-table .mat-mdc-footer-cell,.data-grid.data-grid-size-medium .mat-mdc-table .mat-mdc-row,.data-grid.data-grid-size-medium .mat-mdc-table .mat-mdc-cell{padding:8px 12px;font-size:13px;height:40px}.data-grid.data-grid-size-medium .mat-mdc-table .mat-mdc-header-cell{height:48px}.data-grid.data-grid-size-medium .data-grid-checkbox-cell{width:50px;min-width:50px;padding:0 calc((50px - var(--mat-checkbox-state-layer-size, 36px)) / 2)}.data-grid.data-grid-size-normal .mat-mdc-table .mat-mdc-header-cell,.data-grid.data-grid-size-normal .mat-mdc-table .mat-mdc-footer-cell,.data-grid.data-grid-size-normal .mat-mdc-table .mat-mdc-cell{padding:12px 16px;font-size:14px;height:48px}.data-grid.data-grid-size-normal .mat-mdc-table .mat-mdc-header-cell{height:56px}.data-grid.data-grid-size-normal .data-grid-checkbox-cell{width:60px;min-width:60px;padding:0 calc((60px - var(--mat-checkbox-state-layer-size, 40px)) / 2)}.data-grid-progress{position:absolute;top:0;z-index:120;width:100%}.data-grid-toolbar{display:flex;justify-content:space-between;align-items:center;min-height:var(--mat-table-header-container-height, 56px);padding:8px;box-sizing:border-box}.data-grid-toolbar-content{flex:1;width:0;padding:0 8px}.data-grid-layout{display:flex;flex:1 1 auto;overflow:auto}.data-grid-content{flex-direction:column;width:0}.data-grid-footer{position:relative;z-index:1}.data-grid-no-result{display:flex;justify-content:center;align-items:center;flex:1;min-height:150px}.data-grid-expansion-placeholder{display:inline-block;vertical-align:middle;width:var(--mat-icon-button-state-layer-size);height:var(--mat-icon-button-state-layer-size)}.data-grid-expansion-detail-wrapper{display:grid;grid-template-rows:0fr;grid-template-columns:100%;padding:0;overflow:hidden}.data-grid-expansion.expanded .data-grid-expansion-detail-wrapper{grid-template-rows:1fr;padding:calc((var(--mat-table-row-item-container-height, 52px) - 20px) / 2) 0}.data-grid-expansion-detail{min-height:0}.data-grid-animations-enabled .data-grid-expansion-detail-wrapper{transition:all 225ms cubic-bezier(.4,0,.2,1)}.data-grid-row-expand-button.expanded .data-grid-row-expand-icon{transform:rotate(90deg)}.data-grid-row-expand-button.mat-mdc-icon-button,.data-grid-row-expand-button+data-grid-cell{vertical-align:middle}.mat-table-keyboard-navigation .mat-mdc-row.cdk-row.focused{background-color:#3f51b514!important;position:relative}.mat-table-keyboard-navigation .mat-mdc-row.cdk-row.focused:after{content:\"\";position:absolute;inset:0;border:2px solid #3f51b5;pointer-events:none;z-index:1}.mat-table-keyboard-navigation .mat-mdc-row:hover:not(.focused){background-color:#0000000a}.mat-app-background .mat-table-keyboard-navigation .mat-mdc-row.cdk-row.focused{background-color:rgba(var(--mat-primary-color),.08)!important}.mat-app-background .mat-table-keyboard-navigation .mat-mdc-row.cdk-row.focused:after{border-color:rgba(var(--mat-primary-color),1)}.data-grid-infinite-scroll-loading{width:100%;position:relative;height:4px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { table: [{
                 type: ViewChild,
                 args: [MatTable]
@@ -3692,7 +3334,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
             }], footerRowDefs: [{
                 type: ContentChildren,
                 args: [MatFooterRow]
-            }], showToolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "showToolbar", required: false }] }], showColumnMenuButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showColumnMenuButton", required: false }] }], toolbarTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "toolbarTitle", required: false }] }], toolbarTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "toolbarTemplate", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], length: [{ type: i0.Input, args: [{ isSignal: true, alias: "length", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], emptyValuePlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyValuePlaceholder", required: false }] }], trackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackBy", required: false }] }], cellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellTemplate", required: false }] }], headerTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerTemplate", required: false }] }], headerExtraTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerExtraTemplate", required: false }] }], noResultTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultTemplate", required: false }] }], paginationTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginationTemplate", required: false }] }], summaryTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "summaryTemplate", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], headerCellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerCellTemplate", required: false }] }], expandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandable", required: false }] }], expansionTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "expansionTemplate", required: false }] }], closeOthersOnExpand: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOthersOnExpand", required: false }] }], pageOnFront: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageOnFront", required: false }] }], showPaginator: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPaginator", required: false }] }], pageDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageDisabled", required: false }] }], showFirstLastButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFirstLastButtons", required: false }] }], pageIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageIndex", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], hidePageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidePageSize", required: false }] }], infiniteScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "infiniteScroll", required: false }] }], infiniteScrollThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "infiniteScrollThreshold", required: false }] }], infiniteScrollDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "infiniteScrollDisabled", required: false }] }], keyboardNavigation: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyboardNavigation", required: false }] }], sortOnFront: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortOnFront", required: false }] }], sortActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortActive", required: false }] }], sortDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortDirection", required: false }] }], sortDisableClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortDisableClear", required: false }] }], sortDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortDisabled", required: false }] }], sortStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortStart", required: false }] }], rowHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHover", required: false }] }], rowStriped: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowStriped", required: false }] }], rowSelectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowSelectable", required: false }] }], multiSelectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiSelectable", required: false }] }], multiSelectionWithClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiSelectionWithClick", required: false }] }], hideRowSelectionCheckbox: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideRowSelectionCheckbox", required: false }] }], disableRowClickSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableRowClickSelection", required: false }] }], rowClassFormatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowClassFormatter", required: false }] }], rowSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowSelected", required: false }] }], rowSelectionFormatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowSelectionFormatter", required: false }] }], cellSelectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellSelectable", required: false }] }], useContentRowTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "useContentRowTemplate", required: false }] }], useContentHeaderRowTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "useContentHeaderRowTemplate", required: false }] }], useContentFooterRowTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "useContentFooterRowTemplate", required: false }] }], showSummary: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSummary", required: false }] }], noResultText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultText", required: false }] }], page: [{ type: i0.Output, args: ["page"] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], rowSelectedChange: [{ type: i0.Output, args: ["rowSelectedChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], cellClick: [{ type: i0.Output, args: ["cellClick"] }], cellSelectedChange: [{ type: i0.Output, args: ["cellSelectedChange"] }], expansionChange: [{ type: i0.Output, args: ["expansionChange"] }], rowContextMenu: [{ type: i0.Output, args: ["rowContextMenu"] }], infiniteScrollLoad: [{ type: i0.Output, args: ["infiniteScrollLoad"] }], focusedRowChange: [{ type: i0.Output, args: ["focusedRowChange"] }], handleKeyDown: [{
+            }], showToolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "showToolbar", required: false }] }], showColumnMenuButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showColumnMenuButton", required: false }] }], toolbarTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "toolbarTitle", required: false }] }], toolbarTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "toolbarTemplate", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], length: [{ type: i0.Input, args: [{ isSignal: true, alias: "length", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], emptyValuePlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyValuePlaceholder", required: false }] }], trackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackBy", required: false }] }], cellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellTemplate", required: false }] }], headerTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerTemplate", required: false }] }], headerExtraTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerExtraTemplate", required: false }] }], noResultTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultTemplate", required: false }] }], paginationTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginationTemplate", required: false }] }], summaryTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "summaryTemplate", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], headerCellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerCellTemplate", required: false }] }], expandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandable", required: false }] }], expansionTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "expansionTemplate", required: false }] }], closeOthersOnExpand: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOthersOnExpand", required: false }] }], pageOnFront: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageOnFront", required: false }] }], showPaginator: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPaginator", required: false }] }], pageDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageDisabled", required: false }] }], showFirstLastButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFirstLastButtons", required: false }] }], pageIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageIndex", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], hidePageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidePageSize", required: false }] }], infiniteScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "infiniteScroll", required: false }] }], infiniteScrollThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "infiniteScrollThreshold", required: false }] }], infiniteScrollDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "infiniteScrollDisabled", required: false }] }], keyboardNavigation: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyboardNavigation", required: false }] }], highlightedRowIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlightedRowIndex", required: false }] }], sortOnFront: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortOnFront", required: false }] }], sortActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortActive", required: false }] }], sortDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortDirection", required: false }] }], sortDisableClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortDisableClear", required: false }] }], sortDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortDisabled", required: false }] }], sortStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortStart", required: false }] }], rowHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHover", required: false }] }], rowStriped: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowStriped", required: false }] }], rowSelectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowSelectable", required: false }] }], multiSelectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiSelectable", required: false }] }], multiSelectionWithClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiSelectionWithClick", required: false }] }], hideRowSelectionCheckbox: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideRowSelectionCheckbox", required: false }] }], disableRowClickSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableRowClickSelection", required: false }] }], rowClassFormatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowClassFormatter", required: false }] }], rowSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowSelected", required: false }] }], rowSelectionFormatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowSelectionFormatter", required: false }] }], cellSelectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellSelectable", required: false }] }], useContentRowTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "useContentRowTemplate", required: false }] }], useContentHeaderRowTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "useContentHeaderRowTemplate", required: false }] }], useContentFooterRowTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "useContentFooterRowTemplate", required: false }] }], showSummary: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSummary", required: false }] }], noResultText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultText", required: false }] }], page: [{ type: i0.Output, args: ["page"] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], rowSelectedChange: [{ type: i0.Output, args: ["rowSelectedChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], cellClick: [{ type: i0.Output, args: ["cellClick"] }], cellSelectedChange: [{ type: i0.Output, args: ["cellSelectedChange"] }], expansionChange: [{ type: i0.Output, args: ["expansionChange"] }], rowContextMenu: [{ type: i0.Output, args: ["rowContextMenu"] }], infiniteScrollLoad: [{ type: i0.Output, args: ["infiniteScrollLoad"] }], focusedRowChange: [{ type: i0.Output, args: ["focusedRowChange"] }], handleKeyDown: [{
                 type: HostListener,
                 args: ['document:keydown', ['$event']]
             }] } });
@@ -3749,9 +3391,90 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 args: ['input']
             }] } });
 
+class GetTotalPipe {
+    transform(colName, dataSource) {
+        return this.getTotal(colName, dataSource) || '';
+    }
+    /**
+     * Calculate and return the total (sum) of all the column --> the column must be number
+     */
+    getTotal(colName, dataSource) {
+        const total = dataSource
+            .map(row => row[colName])
+            .reduce((acc, value) => (value ? acc + Number(value) : acc), 0);
+        return total?.toFixed(2);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: GetTotalPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: GetTotalPipe, isStandalone: true, name: "getTotal" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: GetTotalPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'getTotal',
+                    standalone: true,
+                }]
+        }] });
+
+class StatusDisplayPipe {
+    sanitizer = inject(DomSanitizer);
+    transloco = inject(TranslocoService, { optional: true });
+    transform(isActive, options = {}) {
+        const { gender = 'neutral', showIcon = true, customActiveText, customInactiveText, textClass = '', iconClass = '', } = options;
+        const text = this.getStatusText(isActive, gender, customActiveText, customInactiveText);
+        const icon = isActive ? 'check_circle' : 'cancel';
+        const colorClass = isActive ? 'text-green-500' : 'text-red-500';
+        const combinedIconClass = `${colorClass} align-middle mr-1 ${iconClass}`.trim();
+        const combinedTextClass = `align-middle ${textClass}`.trim();
+        let html = '';
+        if (showIcon) {
+            html += `<mat-icon class="${combinedIconClass}" fontIcon="${icon}"></mat-icon>`;
+        }
+        html += `<span class="${combinedTextClass}">${text}</span>`;
+        return this.sanitizer.bypassSecurityTrustHtml(html);
+    }
+    getStatusText(isActive, gender, customActive, customInactive) {
+        if (customActive && isActive)
+            return customActive;
+        if (customInactive && !isActive)
+            return customInactive;
+        if (!this.transloco)
+            return this.getFallbackText(isActive, gender);
+        const translationKey = this.getTranslationKey(isActive, gender);
+        const translation = this.transloco.translate(translationKey);
+        return translation !== translationKey ? translation : this.getFallbackText(isActive, gender);
+    }
+    getTranslationKey(isActive, gender) {
+        const base = isActive ? 'status.active' : 'status.inactive';
+        return gender !== 'neutral'
+            ? `${base}.${gender}`
+            : base;
+    }
+    getFallbackText(isActive, gender) {
+        const lang = this.transloco?.getActiveLang() || 'en';
+        const isSpanish = lang.startsWith('es');
+        if (!isSpanish) {
+            return isActive ? 'Active' : 'Inactive';
+        }
+        if (isActive) {
+            return gender === 'female' ? 'Activa' : 'Activo';
+        }
+        else {
+            return gender === 'female' ? 'Inactiva' : 'Inactivo';
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: StatusDisplayPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: StatusDisplayPipe, isStandalone: true, name: "statusDisplay" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: StatusDisplayPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'statusDisplay',
+                }]
+        }] });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AUTOCOMPLETE_WRAPPER_CUSTOMER_CONFIG, AUTOCOMPLETE_WRAPPER_DEFAULT_CONFIG, AUTOCOMPLETE_WRAPPER_LOCAL_CONFIG, AUTOCOMPLETE_WRAPPER_PAGINATED_CONFIG, AUTOCOMPLETE_WRAPPER_PRODUCT_CONFIG, AUTOCOMPLETE_WRAPPER_SIMPLE_CONFIG, AdvancedDialogService, AutocompleteWrapperService, Button, ColumnDefinition, DATA_GRID_DEFAULT_OPTIONS, DataGrid, DialogWrapper, DynamicCard, DynamicSelect, DynamicTable, FieldDefinition, GetTotalPipe, IconRegistryService, InputChip, OverlayService, Pagination, ReusableAutocompleteComponent, Spinner, StatusDisplayPipe, SvgIcon, TableCellIndex, TabulatorTable, ThemeSwitcher, ThemeToggle, ToUpperCase, UserIcon, createAutocompleteWrapperConfig };
+export { AUTOCOMPLETE_WRAPPER_CUSTOMER_CONFIG, AUTOCOMPLETE_WRAPPER_DEFAULT_CONFIG, AUTOCOMPLETE_WRAPPER_LOCAL_CONFIG, AUTOCOMPLETE_WRAPPER_PAGINATED_CONFIG, AUTOCOMPLETE_WRAPPER_PRODUCT_CONFIG, AUTOCOMPLETE_WRAPPER_SIMPLE_CONFIG, AdvancedDialogService, AutocompleteWrapperService, Button, DATA_GRID_DEFAULT_OPTIONS, DataGrid, DialogWrapper, DynamicCard, DynamicSelect, GetTotalPipe, IconRegistryService, InputChip, OverlayService, Pagination, ReusableAutocompleteComponent, Spinner, StatusDisplayPipe, SvgIcon, TabulatorTable, ThemeSwitcher, ThemeToggle, ToUpperCase, UserIcon, createAutocompleteWrapperConfig };
 //# sourceMappingURL=acontplus-ng-components.mjs.map