npm - @acontplus/ng-components - Versions diffs - 1.0.11 → 1.0.12 - Mend

@acontplus/ng-components 1.0.11 → 1.0.12

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

Files changed (5) hide show

package/README.md +94 -1
package/fesm2022/acontplus-ng-components.mjs +55 -39
package/fesm2022/acontplus-ng-components.mjs.map +1 -1
package/index.d.ts +32 -21
package/package.json +1 -1

package/fesm2022/acontplus-ng-components.mjs CHANGED Viewed

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, booleanAttribute, output, Component, inject, viewChild, ViewContainerRef, ChangeDetectionStrategy, ViewEncapsulation, Pipe, ChangeDetectorRef, contentChildren, contentChild, Input, Injectable, signal, computed, ElementRef, Renderer2, HostListener, Directive, InjectionToken } from '@angular/core';
+import { input, booleanAttribute, output, Component, inject, viewChild, ViewContainerRef, ChangeDetectionStrategy, ViewEncapsulation, Pipe, ChangeDetectorRef, contentChildren, Input, Injectable, signal, computed, ElementRef, Renderer2, HostListener, Directive, InjectionToken } from '@angular/core';
 import * as i1 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
 import * as i2 from '@angular/material/button';
@@ -13,15 +13,14 @@ import { MatChipRow, MatChipGrid, MatChipInput } from '@angular/material/chips';
 import { MatFormField, MatLabel, MatHint } from '@angular/material/form-field';
 import { LiveAnnouncer } from '@angular/cdk/a11y';
 import { ENTER, COMMA } from '@angular/cdk/keycodes';
-import { NgClass, NgTemplateOutlet, DatePipe, DecimalPipe, AsyncPipe } from '@angular/common';
+import { NgClass, NgStyle, NgTemplateOutlet, DatePipe, DecimalPipe, AsyncPipe } from '@angular/common';
 import { MatProgressSpinner } from '@angular/material/progress-spinner';
 import { Tabulator, PageModule, ReactiveDataModule } from 'tabulator-tables';
 import * as i1$2 from '@angular/material/table';
-import { MatTableDataSource, MatHeaderRowDef, MatRowDef, MatFooterRowDef, MatColumnDef, MatNoDataRow, MatTable, MatTableModule } from '@angular/material/table';
+import { MatTableDataSource, MatHeaderRowDef, MatRowDef, MatFooterRowDef, MatColumnDef, MatTable, MatTableModule } from '@angular/material/table';
 import { SelectionModel } from '@angular/cdk/collections';
 import * as i6 from '@angular/material/paginator';
 import { MatPaginatorModule } from '@angular/material/paginator';
-import { trigger, state, transition, style, animate } from '@angular/animations';
 import * as i2$1 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import * as i3$1 from '@angular/material/sort';
@@ -198,6 +197,10 @@ class DialogWrapperComponent {
      * Ensures that the most recently clicked dialog appears on top.
      */
     static lastZIndex = 1000;
+    /**
+     * Timeout ID for debouncing z-index updates to prevent excessive DOM manipulations.
+     */
+    bringToFrontTimeoutId = null;
     /**
      * Creates an instance of DialogWrapperComponent.
      *
@@ -219,6 +222,15 @@ class DialogWrapperComponent {
             componentRef.instance.data = this.config.data;
         }
     }
+    /**
+     * Cleanup lifecycle hook to cancel any pending animation frame requests.
+     */
+    ngOnDestroy() {
+        if (this.bringToFrontTimeoutId !== null) {
+            cancelAnimationFrame(this.bringToFrontTimeoutId);
+            this.bringToFrontTimeoutId = null;
+        }
+    }
     /**
      * Closes the dialog.
      * Called when the close button in the header is clicked.
@@ -228,13 +240,22 @@ class DialogWrapperComponent {
     }
     /**
      * Brings the dialog to the front by adjusting its z-index.
+     * Uses requestAnimationFrame to debounce updates and prevent excessive DOM manipulations.
      * Called when the dialog header is clicked.
      */
     bringToFront() {
-        const pane = this.header()?.nativeElement.closest('.cdk-overlay-pane');
-        if (pane) {
-            pane.style.zIndex = (++DialogWrapperComponent.lastZIndex).toString();
-        }
+        // Clear any pending update
+        if (this.bringToFrontTimeoutId !== null) {
+            cancelAnimationFrame(this.bringToFrontTimeoutId);
+        }
+        // Schedule the z-index update for the next animation frame
+        this.bringToFrontTimeoutId = requestAnimationFrame(() => {
+            const pane = this.header()?.nativeElement.closest('.cdk-overlay-pane');
+            if (pane) {
+                pane.style.zIndex = (++DialogWrapperComponent.lastZIndex).toString();
+            }
+            this.bringToFrontTimeoutId = null;
+        });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: DialogWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: DialogWrapperComponent, isStandalone: true, selector: "acp-dialog-wrapper", viewQueries: [{ propertyName: "contentHost", first: true, predicate: ["contentHost"], descendants: true, read: ViewContainerRef, isSignal: true }, { propertyName: "header", first: true, predicate: ["dialogHeader"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (!config.hideHeader) {\n  <div\n    class=\"dialog-header\"\n    cdkDrag\n    cdkDragRootElement=\".cdk-overlay-pane\"\n    cdkDragHandle\n    #dialogHeader\n    (mousedown)=\"bringToFront()\"\n  >\n    <h6 mat-dialog-title>\n      @if (config.icon) {\n        <mat-icon class=\"title-icon\" aria-hidden=\"true\">{{ config.icon }}</mat-icon>\n      }\n      <span>{{ config.title }}</span>\n      <button\n        type=\"button\"\n        mat-icon-button\n        class=\"close-button\"\n        (click)=\"onClose()\"\n        aria-label=\"Cerrar di\u00E1logo\"\n      >\n        <mat-icon>close</mat-icon>\n      </button>\n    </h6>\n  </div>\n}\n\n<ng-template #contentHost />\n", styles: [".dialog-header{cursor:move;padding:12px 24px;border-bottom:1px solid #dee2e6;color:#212529}h6[mat-dialog-title]{display:flex;align-items:center;font-size:1.2rem;font-weight:500;margin:0;width:100%}.title-icon{margin-right:12px;vertical-align:middle}h6[mat-dialog-title] span{flex-grow:1}.close-button{margin-left:auto}mat-dialog-content{padding:24px}\n"], dependencies: [{ kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
@@ -521,11 +542,11 @@ class CustomTabulatorComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: CustomTabulatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.2", type: CustomTabulatorComponent, isStandalone: true, selector: "acp-tabulator", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, dataTree: { classPropertyName: "dataTree", publicName: "dataTree", isSignal: true, isRequired: false, transformFunction: null }, dataTreeChildField: { classPropertyName: "dataTreeChildField", publicName: "dataTreeChildField", isSignal: true, isRequired: false, transformFunction: null }, dataTreeStartExpanded: { classPropertyName: "dataTreeStartExpanded", publicName: "dataTreeStartExpanded", isSignal: true, isRequired: false, transformFunction: null }, dataTreeSelectPropagate: { classPropertyName: "dataTreeSelectPropagate", publicName: "dataTreeSelectPropagate", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, reactiveData: { classPropertyName: "reactiveData", publicName: "reactiveData", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, autoResize: { classPropertyName: "autoResize", publicName: "autoResize", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, customClass: { classPropertyName: "customClass", publicName: "customClass", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cellEdited: "cellEdited", rowClick: "rowClick", rowSelected: "rowSelected", tableReady: "tableReady" }, usesOnChanges: true, ngImport: i0, template: "<div [id]=\"containerId\" class=\"acp-tabulator-container\"></div>", styles: [".acp-tabulator-container{width:100%}.acp-tabulator-container .tabulator-row.tabulator-selectable:hover{background-color:#0000000a;cursor:pointer;transition:background-color .2s ease}.acp-tabulator-container .tabulator-row.tabulator-selected{background-color:#1976d21f}@media (max-width: 768px){.acp-tabulator-container .tabulator-header{font-size:.875rem}.acp-tabulator-container .tabulator-cell{font-size:.875rem;padding:8px 6px}}.acp-tabulator-container .tabulator-loader{background:#fffc;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.acp-tabulator-container .tabulator-tableholder::-webkit-scrollbar{width:8px;height:8px}.acp-tabulator-container .tabulator-tableholder::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.acp-tabulator-container .tabulator-tableholder::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:4px}.acp-tabulator-container .tabulator-tableholder::-webkit-scrollbar-thumb:hover{background:#a8a8a8}\n"], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.2", type: CustomTabulatorComponent, isStandalone: true, selector: "acp-tabulator", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, dataTree: { classPropertyName: "dataTree", publicName: "dataTree", isSignal: true, isRequired: false, transformFunction: null }, dataTreeChildField: { classPropertyName: "dataTreeChildField", publicName: "dataTreeChildField", isSignal: true, isRequired: false, transformFunction: null }, dataTreeStartExpanded: { classPropertyName: "dataTreeStartExpanded", publicName: "dataTreeStartExpanded", isSignal: true, isRequired: false, transformFunction: null }, dataTreeSelectPropagate: { classPropertyName: "dataTreeSelectPropagate", publicName: "dataTreeSelectPropagate", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, reactiveData: { classPropertyName: "reactiveData", publicName: "reactiveData", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, autoResize: { classPropertyName: "autoResize", publicName: "autoResize", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, customClass: { classPropertyName: "customClass", publicName: "customClass", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cellEdited: "cellEdited", rowClick: "rowClick", rowSelected: "rowSelected", tableReady: "tableReady" }, usesOnChanges: true, ngImport: i0, template: "<div [id]=\"containerId\" class=\"acp-tabulator-container\"></div>\n", styles: [".acp-tabulator-container{width:100%}.acp-tabulator-container .tabulator-row.tabulator-selectable:hover{background-color:#0000000a;cursor:pointer;transition:background-color .2s ease}.acp-tabulator-container .tabulator-row.tabulator-selected{background-color:#1976d21f}@media (max-width: 768px){.acp-tabulator-container .tabulator-header{font-size:.875rem}.acp-tabulator-container .tabulator-cell{font-size:.875rem;padding:8px 6px}}.acp-tabulator-container .tabulator-loader{background:#fffc;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.acp-tabulator-container .tabulator-tableholder::-webkit-scrollbar{width:8px;height:8px}.acp-tabulator-container .tabulator-tableholder::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.acp-tabulator-container .tabulator-tableholder::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:4px}.acp-tabulator-container .tabulator-tableholder::-webkit-scrollbar-thumb:hover{background:#a8a8a8}\n"], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: CustomTabulatorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'acp-tabulator', standalone: true, imports: [], encapsulation: ViewEncapsulation.None, template: "<div [id]=\"containerId\" class=\"acp-tabulator-container\"></div>", styles: [".acp-tabulator-container{width:100%}.acp-tabulator-container .tabulator-row.tabulator-selectable:hover{background-color:#0000000a;cursor:pointer;transition:background-color .2s ease}.acp-tabulator-container .tabulator-row.tabulator-selected{background-color:#1976d21f}@media (max-width: 768px){.acp-tabulator-container .tabulator-header{font-size:.875rem}.acp-tabulator-container .tabulator-cell{font-size:.875rem;padding:8px 6px}}.acp-tabulator-container .tabulator-loader{background:#fffc;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.acp-tabulator-container .tabulator-tableholder::-webkit-scrollbar{width:8px;height:8px}.acp-tabulator-container .tabulator-tableholder::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.acp-tabulator-container .tabulator-tableholder::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:4px}.acp-tabulator-container .tabulator-tableholder::-webkit-scrollbar-thumb:hover{background:#a8a8a8}\n"] }]
+            args: [{ selector: 'acp-tabulator', standalone: true, imports: [], encapsulation: ViewEncapsulation.None, template: "<div [id]=\"containerId\" class=\"acp-tabulator-container\"></div>\n", styles: [".acp-tabulator-container{width:100%}.acp-tabulator-container .tabulator-row.tabulator-selectable:hover{background-color:#0000000a;cursor:pointer;transition:background-color .2s ease}.acp-tabulator-container .tabulator-row.tabulator-selected{background-color:#1976d21f}@media (max-width: 768px){.acp-tabulator-container .tabulator-header{font-size:.875rem}.acp-tabulator-container .tabulator-cell{font-size:.875rem;padding:8px 6px}}.acp-tabulator-container .tabulator-loader{background:#fffc;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.acp-tabulator-container .tabulator-tableholder::-webkit-scrollbar{width:8px;height:8px}.acp-tabulator-container .tabulator-tableholder::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.acp-tabulator-container .tabulator-tableholder::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:4px}.acp-tabulator-container .tabulator-tableholder::-webkit-scrollbar-thumb:hover{background:#a8a8a8}\n"] }]
         }] });
 class GetTotalPipe {
@@ -641,7 +662,6 @@ class MatDynamicTableComponent {
     rowDefs = contentChildren(MatRowDef, ...(ngDevMode ? [{ debugName: "rowDefs" }] : []));
     footerRowDefs = contentChildren(MatFooterRowDef, ...(ngDevMode ? [{ debugName: "footerRowDefs" }] : []));
     columnDefs = contentChildren(MatColumnDef, ...(ngDevMode ? [{ debugName: "columnDefs" }] : []));
-    noDataRow = contentChild.required(MatNoDataRow);
     table = viewChild.required(MatTable);
     rows = contentChildren(ViewContainerRef, ...(ngDevMode ? [{ debugName: "rows" }] : []));
     ngOnInit() {
@@ -718,10 +738,6 @@ class MatDynamicTableComponent {
         else {
             this.footerRowDefs().forEach(footerRowDef => this.table().removeFooterRowDef(footerRowDef));
         }
-        const noDataRow = this.noDataRow();
-        if (noDataRow) {
-            this.table().setNoDataRow(noDataRow);
-        }
     }
     initializeTable() {
         this.dataSource = new MatTableDataSource(this.tableData() || []);
@@ -736,9 +752,12 @@ class MatDynamicTableComponent {
         return numSelected === numRows && numRows > 0;
     }
     masterToggle() {
-        this.isAllSelected()
-            ? this.selection.clear()
-            : this.dataSource.data.forEach(row => this.selection.select(row));
+        if (this.isAllSelected()) {
+            this.selection.clear();
+        }
+        else {
+            this.dataSource.data.forEach(row => this.selection.select(row));
+        }
         this.rowSelected.emit(this.selection.selected);
         this.cdr.markForCheck();
     }
@@ -756,7 +775,12 @@ class MatDynamicTableComponent {
     onExpand(event, element) {
         event.stopPropagation();
         this.expandedElement = this.expandedElement === element ? null : element;
-        this.expandedElement ? this.showExpanded.emit(element) : this.hideExpanded.emit(element);
+        if (this.expandedElement) {
+            this.showExpanded.emit(element);
+        }
+        else {
+            this.hideExpanded.emit(element);
+        }
         this.cdr.markForCheck();
     }
     getRowColor(element) {
@@ -766,13 +790,7 @@ class MatDynamicTableComponent {
         this.pageEvent.emit(e);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: MatDynamicTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: MatDynamicTableComponent, isStandalone: true, selector: "acp-mat-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 }, 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: "noDataRow", first: true, predicate: MatNoDataRow, descendants: true, 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=\"mat-table-container\">\n  <div class=\"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              <mat-checkbox (change)=\"$event ? masterToggle() : null\"\n                (click)=\"$event.stopPropagation()\"\n                [aria-label]=\"checkboxLabel()\"\n                [checked]=\"selection.hasValue() && isAllSelected()\"\n                [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n               />\n            </th>\n            <td *matCellDef=\"let row\" mat-cell>\n              <mat-checkbox (change)=\"$event ? selection.toggle(row) : null\"\n                (click)=\"$event.stopPropagation()\"\n                [aria-label]=\"checkboxLabel(row)\"\n                [checked]=\"selection.isSelected(row)\"\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>\n              {{ col.label }}\n            </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                  <ng-container *ngTemplateOutlet=\"rowTemplate(); context: { $implicit: element, index: i }\"\n                   />\n                </div>\n              } @else {\n                @switch (col.type) {\n                  @case ('image') {\n                    <img\n                      [src]=\"element[col.key]\"\n                      class=\"img-fluid img-thumbnail my-1\"\n                      width=\"50\"\n                      alt=\"\"\n                    />\n                  }\n                  @case ('number') {\n                    <div>{{ element[col.key] | number: '1.2' : locale() }}</div>\n                  }\n                  @case ('date') {\n                    <div>{{ element[col.key] | date: 'dd.MM.yyyy' }}</div>\n                  }\n                  @case ('expand') {\n                    <button\n                      mat-icon-button\n                      aria-label=\"expand row\"\n                      (click)=\"onExpand($event, element)\"\n                    >\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                  }\n                  @case ('template') {\n                    <ng-container *ngTemplateOutlet=\"\n                        col.templateOutlet;\n                        context: { $implicit: element, index: i }\n                      \"\n                     />\n                  }\n                  @case ('custom') {\n                    <ng-container #dynamicContent />\n                  }\n                  @default {\n                    <div>{{ element[col.key] }}</div>\n                  }\n                }\n              }\n            </td>\n\n            <td *matFooterCellDef mat-footer-cell>\n              @if (col.index === 0) {\n                <div>Total</div>\n              }\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\n                class=\"m-0 p-0\"\n                [@detailExpand]=\"element === expandedElement ? 'expanded' : 'collapsed'\"\n              >\n                <ng-container *ngTemplateOutlet=\"expandedDetail; context: { $implicit: element, index: i }\"\n                 />\n              </div>\n            </td>\n          </ng-container>\n        }\n\n        <!-- Header -->\n        <tr\n          mat-header-row\n          *matHeaderRowDef=\"columnsToDisplayWithExpand; sticky: true\"\n          class=\"small-header\"\n        ></tr>\n\n        <!-- Normal Rows -->\n        <tr\n          mat-row\n          *matRowDef=\"let row; columns: columnsToDisplayWithExpand; when: isNormalRow\"\n          [class.example-expanded-row]=\"expandedElement === row\"\n          (click)=\"selectRow(row)\"\n          [style]=\"getRowColor(row)\"\n        ></tr>\n\n        <!-- Expanded Row -->\n        @if (showExpand() && expandedDetail) {\n          <tr\n            mat-row\n            *matRowDef=\"let row; columns: ['expandedDetail']; when: isExpandedRow\"\n            class=\"example-detail-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      }\n    </table>\n  </div>\n\n  @if (enablePagination() && paginationConfig) {\n    <mat-paginator #paginator\n      [disabled]=\"isLoadingData()\"\n      (page)=\"handlePageEvent($event)\"\n      [length]=\"paginationConfig.totalRecords\"\n      [pageSize]=\"paginationConfig.pageSize\"\n      [pageSizeOptions]=\"paginationConfig.pageSizeOptions || []\"\n      [showFirstLastButtons]=\"true\"\n      [pageIndex]=\"paginationConfig.pageIndex\"\n      aria-label=\"Select page\"\n     />\n  }\n</div>\n", styles: [".table-container{position:relative;min-height:200px;max-height:400px;overflow:auto}table{width:100%}tr.example-detail-row{height:0}tr.example-element-row:not(.example-expanded-row):hover{background:#f5f5f5}tr.example-element-row:not(.example-expanded-row):active{background:#efefef}.example-element-row td{border-bottom-width:0}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$2.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i1$2.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i1$2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i1$2.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i1$2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i1$2.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "directive", type: i1$2.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2$1.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: 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" }], animations: [
-            trigger('detailExpand', [
-                state('collapsed,void', style({ height: '0px', minHeight: '0' })),
-                state('expanded', style({ height: '*' })),
-                transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
-            ]),
-        ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: MatDynamicTableComponent, isStandalone: true, selector: "acp-mat-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 }, 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=\"mat-table-container\">\n  <div class=\"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              <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            </th>\n            <td *matCellDef=\"let row\" mat-cell>\n              <mat-checkbox\n                (change)=\"$event ? selection.toggle(row) : null\"\n                (click)=\"$event.stopPropagation()\"\n                [aria-label]=\"checkboxLabel(row)\"\n                [checked]=\"selection.isSelected(row)\"\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>\n              {{ col.label }}\n            </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 {\n                @switch (col.type) {\n                  @case ('image') {\n                    <img\n                      [src]=\"element[col.key]\"\n                      class=\"img-fluid img-thumbnail my-1\"\n                      width=\"50\"\n                      alt=\"\"\n                    />\n                  }\n                  @case ('number') {\n                    <div>{{ element[col.key] | number: '1.2' : locale() }}</div>\n                  }\n                  @case ('date') {\n                    <div>{{ element[col.key] | date: 'dd.MM.yyyy' }}</div>\n                  }\n                  @case ('expand') {\n                    <button\n                      mat-icon-button\n                      aria-label=\"expand row\"\n                      (click)=\"onExpand($event, element)\"\n                    >\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                  }\n                  @case ('template') {\n                    <ng-container\n                      *ngTemplateOutlet=\"\n                        col.templateOutlet;\n                        context: { $implicit: element, index: i }\n                      \"\n                    />\n                  }\n                  @case ('custom') {\n                    <ng-container #dynamicContent />\n                  }\n                  @default {\n                    <div>{{ element[col.key] }}</div>\n                  }\n                }\n              }\n            </td>\n\n            <td *matFooterCellDef mat-footer-cell>\n              @if (col.index === 0) {\n                <div>Total</div>\n              }\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 detail-expand\" [class.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=\"mat-dynamic-table-row\"\n            [class.mat-dynamic-table-expanded-row]=\"expandedElement === row\"\n            [ngStyle]=\"getRowColor(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=\"mat-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]=\"getRowColor(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      }\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]=\"true\"\n      [pageIndex]=\"paginationConfig.pageIndex\"\n      aria-label=\"Select page\"\n    />\n  }\n</div>\n", styles: [".table-container{position:relative;min-height:200px;max-height:400px;overflow:auto}table{width:100%}tr.mat-dynamic-table-detail-row{height:0}tr.mat-dynamic-table-row:not(.mat-dynamic-table-expanded-row):hover{background:#f5f5f5}tr.mat-dynamic-table-row:not(.mat-dynamic-table-expanded-row):active{background:#efefef}.mat-dynamic-table-row td{border-bottom-width:0}.detail-expand{height:0;overflow:hidden;transition:height .15s ease-in-out}.detail-expand.expanded{height:auto;overflow:visible}@starting-style{.detail-expand.expanded{height:0}}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$2.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i1$2.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i1$2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i1$2.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i1$2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i1$2.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "directive", type: i1$2.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2$1.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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: MatDynamicTableComponent, decorators: [{
             type: Component,
@@ -784,17 +802,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
                         MatButtonModule,
                         MatPaginatorModule,
                         NgClass,
+                        NgStyle,
                         GetTotalPipe,
                         DatePipe,
                         DecimalPipe,
                         NgTemplateOutlet,
-                    ], animations: [
-                        trigger('detailExpand', [
-                            state('collapsed,void', style({ height: '0px', minHeight: '0' })),
-                            state('expanded', style({ height: '*' })),
-                            transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
-                        ]),
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"mat-table-container\">\n  <div class=\"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              <mat-checkbox (change)=\"$event ? masterToggle() : null\"\n                (click)=\"$event.stopPropagation()\"\n                [aria-label]=\"checkboxLabel()\"\n                [checked]=\"selection.hasValue() && isAllSelected()\"\n                [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n               />\n            </th>\n            <td *matCellDef=\"let row\" mat-cell>\n              <mat-checkbox (change)=\"$event ? selection.toggle(row) : null\"\n                (click)=\"$event.stopPropagation()\"\n                [aria-label]=\"checkboxLabel(row)\"\n                [checked]=\"selection.isSelected(row)\"\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>\n              {{ col.label }}\n            </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                  <ng-container *ngTemplateOutlet=\"rowTemplate(); context: { $implicit: element, index: i }\"\n                   />\n                </div>\n              } @else {\n                @switch (col.type) {\n                  @case ('image') {\n                    <img\n                      [src]=\"element[col.key]\"\n                      class=\"img-fluid img-thumbnail my-1\"\n                      width=\"50\"\n                      alt=\"\"\n                    />\n                  }\n                  @case ('number') {\n                    <div>{{ element[col.key] | number: '1.2' : locale() }}</div>\n                  }\n                  @case ('date') {\n                    <div>{{ element[col.key] | date: 'dd.MM.yyyy' }}</div>\n                  }\n                  @case ('expand') {\n                    <button\n                      mat-icon-button\n                      aria-label=\"expand row\"\n                      (click)=\"onExpand($event, element)\"\n                    >\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                  }\n                  @case ('template') {\n                    <ng-container *ngTemplateOutlet=\"\n                        col.templateOutlet;\n                        context: { $implicit: element, index: i }\n                      \"\n                     />\n                  }\n                  @case ('custom') {\n                    <ng-container #dynamicContent />\n                  }\n                  @default {\n                    <div>{{ element[col.key] }}</div>\n                  }\n                }\n              }\n            </td>\n\n            <td *matFooterCellDef mat-footer-cell>\n              @if (col.index === 0) {\n                <div>Total</div>\n              }\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\n                class=\"m-0 p-0\"\n                [@detailExpand]=\"element === expandedElement ? 'expanded' : 'collapsed'\"\n              >\n                <ng-container *ngTemplateOutlet=\"expandedDetail; context: { $implicit: element, index: i }\"\n                 />\n              </div>\n            </td>\n          </ng-container>\n        }\n\n        <!-- Header -->\n        <tr\n          mat-header-row\n          *matHeaderRowDef=\"columnsToDisplayWithExpand; sticky: true\"\n          class=\"small-header\"\n        ></tr>\n\n        <!-- Normal Rows -->\n        <tr\n          mat-row\n          *matRowDef=\"let row; columns: columnsToDisplayWithExpand; when: isNormalRow\"\n          [class.example-expanded-row]=\"expandedElement === row\"\n          (click)=\"selectRow(row)\"\n          [style]=\"getRowColor(row)\"\n        ></tr>\n\n        <!-- Expanded Row -->\n        @if (showExpand() && expandedDetail) {\n          <tr\n            mat-row\n            *matRowDef=\"let row; columns: ['expandedDetail']; when: isExpandedRow\"\n            class=\"example-detail-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      }\n    </table>\n  </div>\n\n  @if (enablePagination() && paginationConfig) {\n    <mat-paginator #paginator\n      [disabled]=\"isLoadingData()\"\n      (page)=\"handlePageEvent($event)\"\n      [length]=\"paginationConfig.totalRecords\"\n      [pageSize]=\"paginationConfig.pageSize\"\n      [pageSizeOptions]=\"paginationConfig.pageSizeOptions || []\"\n      [showFirstLastButtons]=\"true\"\n      [pageIndex]=\"paginationConfig.pageIndex\"\n      aria-label=\"Select page\"\n     />\n  }\n</div>\n", styles: [".table-container{position:relative;min-height:200px;max-height:400px;overflow:auto}table{width:100%}tr.example-detail-row{height:0}tr.example-element-row:not(.example-expanded-row):hover{background:#f5f5f5}tr.example-element-row:not(.example-expanded-row):active{background:#efefef}.example-element-row td{border-bottom-width:0}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"mat-table-container\">\n  <div class=\"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              <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            </th>\n            <td *matCellDef=\"let row\" mat-cell>\n              <mat-checkbox\n                (change)=\"$event ? selection.toggle(row) : null\"\n                (click)=\"$event.stopPropagation()\"\n                [aria-label]=\"checkboxLabel(row)\"\n                [checked]=\"selection.isSelected(row)\"\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>\n              {{ col.label }}\n            </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 {\n                @switch (col.type) {\n                  @case ('image') {\n                    <img\n                      [src]=\"element[col.key]\"\n                      class=\"img-fluid img-thumbnail my-1\"\n                      width=\"50\"\n                      alt=\"\"\n                    />\n                  }\n                  @case ('number') {\n                    <div>{{ element[col.key] | number: '1.2' : locale() }}</div>\n                  }\n                  @case ('date') {\n                    <div>{{ element[col.key] | date: 'dd.MM.yyyy' }}</div>\n                  }\n                  @case ('expand') {\n                    <button\n                      mat-icon-button\n                      aria-label=\"expand row\"\n                      (click)=\"onExpand($event, element)\"\n                    >\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                  }\n                  @case ('template') {\n                    <ng-container\n                      *ngTemplateOutlet=\"\n                        col.templateOutlet;\n                        context: { $implicit: element, index: i }\n                      \"\n                    />\n                  }\n                  @case ('custom') {\n                    <ng-container #dynamicContent />\n                  }\n                  @default {\n                    <div>{{ element[col.key] }}</div>\n                  }\n                }\n              }\n            </td>\n\n            <td *matFooterCellDef mat-footer-cell>\n              @if (col.index === 0) {\n                <div>Total</div>\n              }\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 detail-expand\" [class.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=\"mat-dynamic-table-row\"\n            [class.mat-dynamic-table-expanded-row]=\"expandedElement === row\"\n            [ngStyle]=\"getRowColor(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=\"mat-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]=\"getRowColor(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      }\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]=\"true\"\n      [pageIndex]=\"paginationConfig.pageIndex\"\n      aria-label=\"Select page\"\n    />\n  }\n</div>\n", styles: [".table-container{position:relative;min-height:200px;max-height:400px;overflow:auto}table{width:100%}tr.mat-dynamic-table-detail-row{height:0}tr.mat-dynamic-table-row:not(.mat-dynamic-table-expanded-row):hover{background:#f5f5f5}tr.mat-dynamic-table-row:not(.mat-dynamic-table-expanded-row):active{background:#efefef}.mat-dynamic-table-row td{border-bottom-width:0}.detail-expand{height:0;overflow:hidden;transition:height .15s ease-in-out}.detail-expand.expanded{height:auto;overflow:visible}@starting-style{.detail-expand.expanded{height:0}}\n"] }]
         }], propDecorators: { visibleColumns: [{
                 type: Input
             }], columnDefinitions: [{
@@ -932,7 +945,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
 class OverlayService {
     overlay = inject(Overlay);
     overlayRef;
-    constructor() { }
     showSpinner() {
         if (!this.overlayRef) {
             this.overlayRef = this.overlay.create({
@@ -957,7 +969,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [] });
+        }] });
 class ThemeService {
     _darkMode = new BehaviorSubject(false);
@@ -1968,7 +1980,7 @@ class ReusableAutocompleteComponent {
         this.searchInput()?.nativeElement?.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: ReusableAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", 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=\"autocomplete-wrapper-wrapper\" [class.autocomplete-wrapper-active]=\"overlayOpen()\">\n  <!-- Input Container -->\n  <div\n    class=\"autocomplete-wrapper-input-container\"\n    cdkOverlayOrigin\n    #overlayPosition=\"cdkOverlayOrigin\"\n  >\n    <div class=\"autocomplete-wrapper-input-wrapper\">\n      <mat-icon class=\"autocomplete-wrapper-search-icon\">search</mat-icon>\n      <input\n        #searchInput\n        type=\"text\"\n        class=\"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=\"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=\"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                    (click)=\"selectItem(item)\"\n                  >\n                    <mat-icon class=\"autocomplete-wrapper-history-icon\">history</mat-icon>\n                    <div class=\"autocomplete-wrapper-item-details\">\n                      <ng-container *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\">Buscar por:</label>\n                        <select\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                    }\n\n                    @if (config.enableStockFilter && config.stockOptions) {\n                      <div class=\"autocomplete-wrapper-filter-group\">\n                        <label class=\"autocomplete-wrapper-filter-label\">Stock:</label>\n                        <select\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                      (click)=\"selectItem(item)\"\n                    >\n                      <div class=\"autocomplete-wrapper-item-info\">\n                        <ng-container *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 *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            }\n\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: [".autocomplete-wrapper{position:relative;width:100%;max-width:100%}.autocomplete-wrapper.autocomplete-wrapper-active .autocomplete-wrapper-input-wrapper{border-color:#1976d2;box-shadow:0 0 0 2px #1976d21a}.autocomplete-wrapper-input-container{position:relative;width:100%}.autocomplete-wrapper-input-wrapper{position:relative;display:flex;align-items:center;background:#fff;border:1px solid #e0e0e0;border-radius:8px;padding:0 12px;transition:all .3s ease}.autocomplete-wrapper-input-wrapper:focus-within{border-color:#1976d2;box-shadow:0 0 0 2px #1976d21a}.autocomplete-wrapper-search-icon{color:#666;margin-right:8px;font-size:20px}.autocomplete-wrapper-input-field{flex:1;border:none;outline:none;font-size:16px;padding:7px 0;background:transparent;color:#333}.autocomplete-wrapper-input-field::placeholder{color:#999}.autocomplete-wrapper-input-field:disabled{opacity:.6;cursor:not-allowed}.autocomplete-wrapper-clear-button{margin-left:8px;color:#666;background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;transition:all .2s ease}.autocomplete-wrapper-clear-button:hover{background-color:#0000000a;color:#333}.autocomplete-wrapper-loading-spinner{position:absolute;right:12px;top:50%;transform:translateY(-50%)}.autocomplete-wrapper-dropdown{background:#fff;border-radius:8px;box-shadow:0 4px 20px #00000026;border:1px solid #e0e0e0;overflow:hidden;max-height:500px;min-width:300px;display:flex;flex-direction:column}.autocomplete-wrapper-dropdown.autocomplete-wrapper-active{animation:reusableAutocompleteSlideIn .2s ease-out}@keyframes reusableAutocompleteSlideIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.autocomplete-wrapper-dropdown-content{display:flex;flex-direction:column;height:100%;max-height:500px}.autocomplete-wrapper-section{display:flex;flex-direction:column;height:100%;min-height:0}.autocomplete-wrapper-section-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px 8px;border-bottom:1px solid #f0f0f0;background:#fafafa;flex-shrink:0;min-height:56px;flex-wrap:wrap;gap:12px}.autocomplete-wrapper-section-title{font-size:13px;font-weight:500;color:#666;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}.autocomplete-wrapper-clear-history-button{color:#666;background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;transition:all .2s ease}.autocomplete-wrapper-clear-history-button:hover{background-color:#0000000a;color:#333}.autocomplete-wrapper-filter-controls{display:flex;align-items:center;gap:16px;flex:1;justify-content:center}.autocomplete-wrapper-filter-group{display:flex;align-items:center;gap:6px}.autocomplete-wrapper-filter-label{font-size:12px;color:#666;font-weight:500;white-space:nowrap}.autocomplete-wrapper-filter-select{padding:4px 8px;border:1px solid #ddd;border-radius:4px;font-size:12px;background:#fff;color:#333;cursor:pointer;min-width:120px}.autocomplete-wrapper-filter-select:focus{outline:none;border-color:#1976d2;box-shadow:0 0 0 1px #1976d233}.autocomplete-wrapper-filter-select:hover{border-color:#bbb}.autocomplete-wrapper-pagination-header{display:flex;align-items:center;gap:12px;margin-left:auto}.autocomplete-wrapper-pagination-info{font-size:12px;color:#666;white-space:nowrap}.autocomplete-wrapper-pagination-controls{display:flex;align-items:center;gap:4px}.autocomplete-wrapper-pagination-button{min-width:32px;height:32px;line-height:32px;padding:0;color:#666;background:none;border:1px solid #ddd;border-radius:4px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.autocomplete-wrapper-pagination-button:hover:not(:disabled){background-color:#0000000a;color:#333}.autocomplete-wrapper-pagination-button:disabled{opacity:.5;cursor:not-allowed}.autocomplete-wrapper-pagination-button mat-icon{font-size:18px;width:18px;height:18px}.autocomplete-wrapper-page-input{width:50px;height:32px;border:1px solid #ddd;border-radius:4px;text-align:center;font-size:12px;padding:4px;margin:0 4px}.autocomplete-wrapper-page-input:focus{outline:none;border-color:#1976d2}.autocomplete-wrapper-items-list{list-style:none;margin:0;padding:0;flex:1;min-height:0}.autocomplete-wrapper-items-list.autocomplete-wrapper-scrollable-list{overflow-y:auto}.autocomplete-wrapper-list-item{display:flex;align-items:center;border-bottom:1px solid #f5f5f5;transition:background-color .2s ease}.autocomplete-wrapper-list-item:last-child{border-bottom:none}.autocomplete-wrapper-list-item:hover{background-color:#f8f9fa}.autocomplete-wrapper-item-content{flex:1;display:flex;align-items:center;padding:12px 16px;cursor:pointer;min-height:48px;transition:all .2s ease}.autocomplete-wrapper-item-content.autocomplete-wrapper-selected{background-color:#e3f2fd;color:#1976d2}.autocomplete-wrapper-history-item .autocomplete-wrapper-item-content{padding-left:12px}.autocomplete-wrapper-history-icon{color:#999;margin-right:12px;font-size:18px}.autocomplete-wrapper-item-details{flex:1;display:flex;align-items:center}.autocomplete-wrapper-remove-button{margin-right:8px}.autocomplete-wrapper-result-item{position:relative}.autocomplete-wrapper-item-info{flex:1;display:flex;align-items:center}.autocomplete-wrapper-default-item{flex:1}.autocomplete-wrapper-default-item .autocomplete-wrapper-item-name{font-weight:500;font-size:14px;margin-bottom:2px;color:#333}.autocomplete-wrapper-default-item .autocomplete-wrapper-item-description{font-size:12px;color:#666;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.autocomplete-wrapper-no-results{display:flex;flex-direction:column;align-items:center;padding:32px 16px;text-align:center;color:#666}.autocomplete-wrapper-no-results-icon{font-size:48px;color:#ccc;margin-bottom:16px;width:45px;height:45px}.autocomplete-wrapper-no-results-content{font-size:14px;line-height:1.5}.autocomplete-wrapper-default-no-results{text-align:center}.autocomplete-wrapper-default-no-results p:first-child{font-weight:500;margin-bottom:8px}.autocomplete-wrapper-footer{border-top:1px solid #f0f0f0;background:#fafafa;flex-shrink:0;padding:12px 16px;display:flex;flex-direction:column;gap:12px}.autocomplete-wrapper-pagination-footer{display:flex;align-items:center;justify-content:space-between;width:100%;gap:16px}.autocomplete-wrapper-pagination-summary{font-size:12px;color:#666;white-space:nowrap}.autocomplete-wrapper-pagination-controls-footer{display:flex;align-items:center;gap:8px}.autocomplete-wrapper-page-indicator{font-size:12px;color:#666;min-width:40px;text-align:center}.autocomplete-wrapper-footer-actions{display:flex;gap:8px;flex-wrap:wrap}.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 #ddd;border-radius:4px;cursor:pointer;padding:8px 12px;transition:all .2s ease}.autocomplete-wrapper-footer-button.autocomplete-wrapper-create-button{background-color:#4caf500a;border-color:#4caf50;color:#4caf50}.autocomplete-wrapper-footer-button.autocomplete-wrapper-create-button:hover{background-color:#4caf5014}.autocomplete-wrapper-footer-button.autocomplete-wrapper-search-button{background-color:#ff98000a;border-color:#ff9800;color:#ff9800}.autocomplete-wrapper-footer-button.autocomplete-wrapper-search-button:hover{background-color:#ff980014}.autocomplete-wrapper-footer-button.autocomplete-wrapper-results-button{background-color:#3f51b50a;border-color:#3f51b5;color:#3f51b5}.autocomplete-wrapper-footer-button.autocomplete-wrapper-results-button:hover{background-color:#3f51b514}.autocomplete-wrapper-button-text{display:inline}.autocomplete-wrapper-items-list::-webkit-scrollbar{width:6px}.autocomplete-wrapper-items-list::-webkit-scrollbar-track{background:#f1f1f1;border-radius:3px}.autocomplete-wrapper-items-list::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:3px}.autocomplete-wrapper-items-list::-webkit-scrollbar-thumb:hover{background:#a8a8a8}@media (max-width: 768px){.autocomplete-wrapper-dropdown{min-width:280px;max-height:60vh}.autocomplete-wrapper-dropdown-content{max-height:60vh}.autocomplete-wrapper-input-field{font-size:16px}.autocomplete-wrapper-footer{padding:8px 12px}.autocomplete-wrapper-footer-actions{flex-direction:column;gap:6px}.autocomplete-wrapper-footer-button{width:100%;min-height:44px}.autocomplete-wrapper-pagination-footer{flex-direction:column;gap:8px}.autocomplete-wrapper-section-header{flex-direction:column;align-items:flex-start;min-height:80px;gap:8px}.autocomplete-wrapper-filter-controls{width:100%;justify-content:flex-start;flex-wrap:wrap;gap:12px}.autocomplete-wrapper-filter-select{min-width:100px;font-size:11px}.autocomplete-wrapper-filter-label{font-size:11px}.autocomplete-wrapper-pagination-header{width:100%;justify-content:space-between}.autocomplete-wrapper-pagination-header .autocomplete-wrapper-pagination-info{display:none}.autocomplete-wrapper-pagination-controls{gap:2px}.autocomplete-wrapper-page-input{width:40px}.autocomplete-wrapper-item-content{padding:16px 12px;min-height:52px}.autocomplete-wrapper-button-text{font-size:12px}.autocomplete-wrapper-items-list.autocomplete-wrapper-scrollable-list{max-height:250px}}@media (max-width: 480px){.autocomplete-wrapper-dropdown{min-width:260px;max-height:50vh}.autocomplete-wrapper-section-header{padding:8px 12px 6px;min-height:70px;gap:6px}.autocomplete-wrapper-filter-controls{gap:8px}.autocomplete-wrapper-filter-group{gap:4px}.autocomplete-wrapper-filter-select{min-width:90px;padding:3px 6px}.autocomplete-wrapper-item-content{padding:14px 12px}.autocomplete-wrapper-pagination-header{gap:8px}.autocomplete-wrapper-pagination-button{min-width:28px;height:28px}.autocomplete-wrapper-page-input{width:35px;height:28px}.autocomplete-wrapper-items-list.autocomplete-wrapper-scrollable-list{max-height:200px}.autocomplete-wrapper-footer-actions{gap:4px}.autocomplete-wrapper-footer-button{font-size:12px;padding:8px 12px;min-height:40px}.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"], 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$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.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$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", 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=\"autocomplete-wrapper-wrapper\" [class.autocomplete-wrapper-active]=\"overlayOpen()\">\n  <!-- Input Container -->\n  <div\n    class=\"autocomplete-wrapper-input-container\"\n    cdkOverlayOrigin\n    #overlayPosition=\"cdkOverlayOrigin\"\n  >\n    <div class=\"autocomplete-wrapper-input-wrapper\">\n      <mat-icon class=\"autocomplete-wrapper-search-icon\">search</mat-icon>\n      <input\n        #searchInput\n        type=\"text\"\n        class=\"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=\"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=\"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                    (click)=\"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\">Buscar por:</label>\n                        <select\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                    }\n\n                    @if (config.enableStockFilter && config.stockOptions) {\n                      <div class=\"autocomplete-wrapper-filter-group\">\n                        <label class=\"autocomplete-wrapper-filter-label\">Stock:</label>\n                        <select\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                      (click)=\"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            }\n\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: [".autocomplete-wrapper{position:relative;width:100%;max-width:100%}.autocomplete-wrapper.autocomplete-wrapper-active .autocomplete-wrapper-input-wrapper{border-color:#1976d2;box-shadow:0 0 0 2px #1976d21a}.autocomplete-wrapper-input-container{position:relative;width:100%}.autocomplete-wrapper-input-wrapper{position:relative;display:flex;align-items:center;background:#fff;border:1px solid #e0e0e0;border-radius:8px;padding:0 12px;transition:all .3s ease}.autocomplete-wrapper-input-wrapper:focus-within{border-color:#1976d2;box-shadow:0 0 0 2px #1976d21a}.autocomplete-wrapper-search-icon{color:#666;margin-right:8px;font-size:20px}.autocomplete-wrapper-input-field{flex:1;border:none;outline:none;font-size:16px;padding:7px 0;background:transparent;color:#333}.autocomplete-wrapper-input-field::placeholder{color:#999}.autocomplete-wrapper-input-field:disabled{opacity:.6;cursor:not-allowed}.autocomplete-wrapper-clear-button{margin-left:8px;color:#666;background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;transition:all .2s ease}.autocomplete-wrapper-clear-button:hover{background-color:#0000000a;color:#333}.autocomplete-wrapper-loading-spinner{position:absolute;right:12px;top:50%;transform:translateY(-50%)}.autocomplete-wrapper-dropdown{background:#fff;border-radius:8px;box-shadow:0 4px 20px #00000026;border:1px solid #e0e0e0;overflow:hidden;max-height:500px;min-width:300px;display:flex;flex-direction:column}.autocomplete-wrapper-dropdown.autocomplete-wrapper-active{animation:reusableAutocompleteSlideIn .2s ease-out}@keyframes reusableAutocompleteSlideIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.autocomplete-wrapper-dropdown-content{display:flex;flex-direction:column;height:100%;max-height:500px}.autocomplete-wrapper-section{display:flex;flex-direction:column;height:100%;min-height:0}.autocomplete-wrapper-section-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px 8px;border-bottom:1px solid #f0f0f0;background:#fafafa;flex-shrink:0;min-height:56px;flex-wrap:wrap;gap:12px}.autocomplete-wrapper-section-title{font-size:13px;font-weight:500;color:#666;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}.autocomplete-wrapper-clear-history-button{color:#666;background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;transition:all .2s ease}.autocomplete-wrapper-clear-history-button:hover{background-color:#0000000a;color:#333}.autocomplete-wrapper-filter-controls{display:flex;align-items:center;gap:16px;flex:1;justify-content:center}.autocomplete-wrapper-filter-group{display:flex;align-items:center;gap:6px}.autocomplete-wrapper-filter-label{font-size:12px;color:#666;font-weight:500;white-space:nowrap}.autocomplete-wrapper-filter-select{padding:4px 8px;border:1px solid #ddd;border-radius:4px;font-size:12px;background:#fff;color:#333;cursor:pointer;min-width:120px}.autocomplete-wrapper-filter-select:focus{outline:none;border-color:#1976d2;box-shadow:0 0 0 1px #1976d233}.autocomplete-wrapper-filter-select:hover{border-color:#bbb}.autocomplete-wrapper-pagination-header{display:flex;align-items:center;gap:12px;margin-left:auto}.autocomplete-wrapper-pagination-info{font-size:12px;color:#666;white-space:nowrap}.autocomplete-wrapper-pagination-controls{display:flex;align-items:center;gap:4px}.autocomplete-wrapper-pagination-button{min-width:32px;height:32px;line-height:32px;padding:0;color:#666;background:none;border:1px solid #ddd;border-radius:4px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.autocomplete-wrapper-pagination-button:hover:not(:disabled){background-color:#0000000a;color:#333}.autocomplete-wrapper-pagination-button:disabled{opacity:.5;cursor:not-allowed}.autocomplete-wrapper-pagination-button mat-icon{font-size:18px;width:18px;height:18px}.autocomplete-wrapper-page-input{width:50px;height:32px;border:1px solid #ddd;border-radius:4px;text-align:center;font-size:12px;padding:4px;margin:0 4px}.autocomplete-wrapper-page-input:focus{outline:none;border-color:#1976d2}.autocomplete-wrapper-items-list{list-style:none;margin:0;padding:0;flex:1;min-height:0}.autocomplete-wrapper-items-list.autocomplete-wrapper-scrollable-list{overflow-y:auto}.autocomplete-wrapper-list-item{display:flex;align-items:center;border-bottom:1px solid #f5f5f5;transition:background-color .2s ease}.autocomplete-wrapper-list-item:last-child{border-bottom:none}.autocomplete-wrapper-list-item:hover{background-color:#f8f9fa}.autocomplete-wrapper-item-content{flex:1;display:flex;align-items:center;padding:12px 16px;cursor:pointer;min-height:48px;transition:all .2s ease}.autocomplete-wrapper-item-content.autocomplete-wrapper-selected{background-color:#e3f2fd;color:#1976d2}.autocomplete-wrapper-history-item .autocomplete-wrapper-item-content{padding-left:12px}.autocomplete-wrapper-history-icon{color:#999;margin-right:12px;font-size:18px}.autocomplete-wrapper-item-details{flex:1;display:flex;align-items:center}.autocomplete-wrapper-remove-button{margin-right:8px}.autocomplete-wrapper-result-item{position:relative}.autocomplete-wrapper-item-info{flex:1;display:flex;align-items:center}.autocomplete-wrapper-default-item{flex:1}.autocomplete-wrapper-default-item .autocomplete-wrapper-item-name{font-weight:500;font-size:14px;margin-bottom:2px;color:#333}.autocomplete-wrapper-default-item .autocomplete-wrapper-item-description{font-size:12px;color:#666;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.autocomplete-wrapper-no-results{display:flex;flex-direction:column;align-items:center;padding:32px 16px;text-align:center;color:#666}.autocomplete-wrapper-no-results-icon{font-size:48px;color:#ccc;margin-bottom:16px;width:45px;height:45px}.autocomplete-wrapper-no-results-content{font-size:14px;line-height:1.5}.autocomplete-wrapper-default-no-results{text-align:center}.autocomplete-wrapper-default-no-results p:first-child{font-weight:500;margin-bottom:8px}.autocomplete-wrapper-footer{border-top:1px solid #f0f0f0;background:#fafafa;flex-shrink:0;padding:12px 16px;display:flex;flex-direction:column;gap:12px}.autocomplete-wrapper-pagination-footer{display:flex;align-items:center;justify-content:space-between;width:100%;gap:16px}.autocomplete-wrapper-pagination-summary{font-size:12px;color:#666;white-space:nowrap}.autocomplete-wrapper-pagination-controls-footer{display:flex;align-items:center;gap:8px}.autocomplete-wrapper-page-indicator{font-size:12px;color:#666;min-width:40px;text-align:center}.autocomplete-wrapper-footer-actions{display:flex;gap:8px;flex-wrap:wrap}.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 #ddd;border-radius:4px;cursor:pointer;padding:8px 12px;transition:all .2s ease}.autocomplete-wrapper-footer-button.autocomplete-wrapper-create-button{background-color:#4caf500a;border-color:#4caf50;color:#4caf50}.autocomplete-wrapper-footer-button.autocomplete-wrapper-create-button:hover{background-color:#4caf5014}.autocomplete-wrapper-footer-button.autocomplete-wrapper-search-button{background-color:#ff98000a;border-color:#ff9800;color:#ff9800}.autocomplete-wrapper-footer-button.autocomplete-wrapper-search-button:hover{background-color:#ff980014}.autocomplete-wrapper-footer-button.autocomplete-wrapper-results-button{background-color:#3f51b50a;border-color:#3f51b5;color:#3f51b5}.autocomplete-wrapper-footer-button.autocomplete-wrapper-results-button:hover{background-color:#3f51b514}.autocomplete-wrapper-button-text{display:inline}.autocomplete-wrapper-items-list::-webkit-scrollbar{width:6px}.autocomplete-wrapper-items-list::-webkit-scrollbar-track{background:#f1f1f1;border-radius:3px}.autocomplete-wrapper-items-list::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:3px}.autocomplete-wrapper-items-list::-webkit-scrollbar-thumb:hover{background:#a8a8a8}@media (max-width: 768px){.autocomplete-wrapper-dropdown{min-width:280px;max-height:60vh}.autocomplete-wrapper-dropdown-content{max-height:60vh}.autocomplete-wrapper-input-field{font-size:16px}.autocomplete-wrapper-footer{padding:8px 12px}.autocomplete-wrapper-footer-actions{flex-direction:column;gap:6px}.autocomplete-wrapper-footer-button{width:100%;min-height:44px}.autocomplete-wrapper-pagination-footer{flex-direction:column;gap:8px}.autocomplete-wrapper-section-header{flex-direction:column;align-items:flex-start;min-height:80px;gap:8px}.autocomplete-wrapper-filter-controls{width:100%;justify-content:flex-start;flex-wrap:wrap;gap:12px}.autocomplete-wrapper-filter-select{min-width:100px;font-size:11px}.autocomplete-wrapper-filter-label{font-size:11px}.autocomplete-wrapper-pagination-header{width:100%;justify-content:space-between}.autocomplete-wrapper-pagination-header .autocomplete-wrapper-pagination-info{display:none}.autocomplete-wrapper-pagination-controls{gap:2px}.autocomplete-wrapper-page-input{width:40px}.autocomplete-wrapper-item-content{padding:16px 12px;min-height:52px}.autocomplete-wrapper-button-text{font-size:12px}.autocomplete-wrapper-items-list.autocomplete-wrapper-scrollable-list{max-height:250px}}@media (max-width: 480px){.autocomplete-wrapper-dropdown{min-width:260px;max-height:50vh}.autocomplete-wrapper-section-header{padding:8px 12px 6px;min-height:70px;gap:6px}.autocomplete-wrapper-filter-controls{gap:8px}.autocomplete-wrapper-filter-group{gap:4px}.autocomplete-wrapper-filter-select{min-width:90px;padding:3px 6px}.autocomplete-wrapper-item-content{padding:14px 12px}.autocomplete-wrapper-pagination-header{gap:8px}.autocomplete-wrapper-pagination-button{min-width:28px;height:28px}.autocomplete-wrapper-page-input{width:35px;height:28px}.autocomplete-wrapper-items-list.autocomplete-wrapper-scrollable-list{max-height:200px}.autocomplete-wrapper-footer-actions{gap:4px}.autocomplete-wrapper-footer-button{font-size:12px;padding:8px 12px;min-height:40px}.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"], 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$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.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$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: ReusableAutocompleteComponent, decorators: [{
             type: Component,
@@ -1980,7 +1992,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
                         MatProgressSpinner,
                         FormsModule,
                         MatIconButton,
-                    ], template: "<div class=\"autocomplete-wrapper-wrapper\" [class.autocomplete-wrapper-active]=\"overlayOpen()\">\n  <!-- Input Container -->\n  <div\n    class=\"autocomplete-wrapper-input-container\"\n    cdkOverlayOrigin\n    #overlayPosition=\"cdkOverlayOrigin\"\n  >\n    <div class=\"autocomplete-wrapper-input-wrapper\">\n      <mat-icon class=\"autocomplete-wrapper-search-icon\">search</mat-icon>\n      <input\n        #searchInput\n        type=\"text\"\n        class=\"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=\"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=\"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                    (click)=\"selectItem(item)\"\n                  >\n                    <mat-icon class=\"autocomplete-wrapper-history-icon\">history</mat-icon>\n                    <div class=\"autocomplete-wrapper-item-details\">\n                      <ng-container *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\">Buscar por:</label>\n                        <select\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                    }\n\n                    @if (config.enableStockFilter && config.stockOptions) {\n                      <div class=\"autocomplete-wrapper-filter-group\">\n                        <label class=\"autocomplete-wrapper-filter-label\">Stock:</label>\n                        <select\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                      (click)=\"selectItem(item)\"\n                    >\n                      <div class=\"autocomplete-wrapper-item-info\">\n                        <ng-container *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 *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            }\n\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: [".autocomplete-wrapper{position:relative;width:100%;max-width:100%}.autocomplete-wrapper.autocomplete-wrapper-active .autocomplete-wrapper-input-wrapper{border-color:#1976d2;box-shadow:0 0 0 2px #1976d21a}.autocomplete-wrapper-input-container{position:relative;width:100%}.autocomplete-wrapper-input-wrapper{position:relative;display:flex;align-items:center;background:#fff;border:1px solid #e0e0e0;border-radius:8px;padding:0 12px;transition:all .3s ease}.autocomplete-wrapper-input-wrapper:focus-within{border-color:#1976d2;box-shadow:0 0 0 2px #1976d21a}.autocomplete-wrapper-search-icon{color:#666;margin-right:8px;font-size:20px}.autocomplete-wrapper-input-field{flex:1;border:none;outline:none;font-size:16px;padding:7px 0;background:transparent;color:#333}.autocomplete-wrapper-input-field::placeholder{color:#999}.autocomplete-wrapper-input-field:disabled{opacity:.6;cursor:not-allowed}.autocomplete-wrapper-clear-button{margin-left:8px;color:#666;background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;transition:all .2s ease}.autocomplete-wrapper-clear-button:hover{background-color:#0000000a;color:#333}.autocomplete-wrapper-loading-spinner{position:absolute;right:12px;top:50%;transform:translateY(-50%)}.autocomplete-wrapper-dropdown{background:#fff;border-radius:8px;box-shadow:0 4px 20px #00000026;border:1px solid #e0e0e0;overflow:hidden;max-height:500px;min-width:300px;display:flex;flex-direction:column}.autocomplete-wrapper-dropdown.autocomplete-wrapper-active{animation:reusableAutocompleteSlideIn .2s ease-out}@keyframes reusableAutocompleteSlideIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.autocomplete-wrapper-dropdown-content{display:flex;flex-direction:column;height:100%;max-height:500px}.autocomplete-wrapper-section{display:flex;flex-direction:column;height:100%;min-height:0}.autocomplete-wrapper-section-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px 8px;border-bottom:1px solid #f0f0f0;background:#fafafa;flex-shrink:0;min-height:56px;flex-wrap:wrap;gap:12px}.autocomplete-wrapper-section-title{font-size:13px;font-weight:500;color:#666;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}.autocomplete-wrapper-clear-history-button{color:#666;background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;transition:all .2s ease}.autocomplete-wrapper-clear-history-button:hover{background-color:#0000000a;color:#333}.autocomplete-wrapper-filter-controls{display:flex;align-items:center;gap:16px;flex:1;justify-content:center}.autocomplete-wrapper-filter-group{display:flex;align-items:center;gap:6px}.autocomplete-wrapper-filter-label{font-size:12px;color:#666;font-weight:500;white-space:nowrap}.autocomplete-wrapper-filter-select{padding:4px 8px;border:1px solid #ddd;border-radius:4px;font-size:12px;background:#fff;color:#333;cursor:pointer;min-width:120px}.autocomplete-wrapper-filter-select:focus{outline:none;border-color:#1976d2;box-shadow:0 0 0 1px #1976d233}.autocomplete-wrapper-filter-select:hover{border-color:#bbb}.autocomplete-wrapper-pagination-header{display:flex;align-items:center;gap:12px;margin-left:auto}.autocomplete-wrapper-pagination-info{font-size:12px;color:#666;white-space:nowrap}.autocomplete-wrapper-pagination-controls{display:flex;align-items:center;gap:4px}.autocomplete-wrapper-pagination-button{min-width:32px;height:32px;line-height:32px;padding:0;color:#666;background:none;border:1px solid #ddd;border-radius:4px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.autocomplete-wrapper-pagination-button:hover:not(:disabled){background-color:#0000000a;color:#333}.autocomplete-wrapper-pagination-button:disabled{opacity:.5;cursor:not-allowed}.autocomplete-wrapper-pagination-button mat-icon{font-size:18px;width:18px;height:18px}.autocomplete-wrapper-page-input{width:50px;height:32px;border:1px solid #ddd;border-radius:4px;text-align:center;font-size:12px;padding:4px;margin:0 4px}.autocomplete-wrapper-page-input:focus{outline:none;border-color:#1976d2}.autocomplete-wrapper-items-list{list-style:none;margin:0;padding:0;flex:1;min-height:0}.autocomplete-wrapper-items-list.autocomplete-wrapper-scrollable-list{overflow-y:auto}.autocomplete-wrapper-list-item{display:flex;align-items:center;border-bottom:1px solid #f5f5f5;transition:background-color .2s ease}.autocomplete-wrapper-list-item:last-child{border-bottom:none}.autocomplete-wrapper-list-item:hover{background-color:#f8f9fa}.autocomplete-wrapper-item-content{flex:1;display:flex;align-items:center;padding:12px 16px;cursor:pointer;min-height:48px;transition:all .2s ease}.autocomplete-wrapper-item-content.autocomplete-wrapper-selected{background-color:#e3f2fd;color:#1976d2}.autocomplete-wrapper-history-item .autocomplete-wrapper-item-content{padding-left:12px}.autocomplete-wrapper-history-icon{color:#999;margin-right:12px;font-size:18px}.autocomplete-wrapper-item-details{flex:1;display:flex;align-items:center}.autocomplete-wrapper-remove-button{margin-right:8px}.autocomplete-wrapper-result-item{position:relative}.autocomplete-wrapper-item-info{flex:1;display:flex;align-items:center}.autocomplete-wrapper-default-item{flex:1}.autocomplete-wrapper-default-item .autocomplete-wrapper-item-name{font-weight:500;font-size:14px;margin-bottom:2px;color:#333}.autocomplete-wrapper-default-item .autocomplete-wrapper-item-description{font-size:12px;color:#666;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.autocomplete-wrapper-no-results{display:flex;flex-direction:column;align-items:center;padding:32px 16px;text-align:center;color:#666}.autocomplete-wrapper-no-results-icon{font-size:48px;color:#ccc;margin-bottom:16px;width:45px;height:45px}.autocomplete-wrapper-no-results-content{font-size:14px;line-height:1.5}.autocomplete-wrapper-default-no-results{text-align:center}.autocomplete-wrapper-default-no-results p:first-child{font-weight:500;margin-bottom:8px}.autocomplete-wrapper-footer{border-top:1px solid #f0f0f0;background:#fafafa;flex-shrink:0;padding:12px 16px;display:flex;flex-direction:column;gap:12px}.autocomplete-wrapper-pagination-footer{display:flex;align-items:center;justify-content:space-between;width:100%;gap:16px}.autocomplete-wrapper-pagination-summary{font-size:12px;color:#666;white-space:nowrap}.autocomplete-wrapper-pagination-controls-footer{display:flex;align-items:center;gap:8px}.autocomplete-wrapper-page-indicator{font-size:12px;color:#666;min-width:40px;text-align:center}.autocomplete-wrapper-footer-actions{display:flex;gap:8px;flex-wrap:wrap}.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 #ddd;border-radius:4px;cursor:pointer;padding:8px 12px;transition:all .2s ease}.autocomplete-wrapper-footer-button.autocomplete-wrapper-create-button{background-color:#4caf500a;border-color:#4caf50;color:#4caf50}.autocomplete-wrapper-footer-button.autocomplete-wrapper-create-button:hover{background-color:#4caf5014}.autocomplete-wrapper-footer-button.autocomplete-wrapper-search-button{background-color:#ff98000a;border-color:#ff9800;color:#ff9800}.autocomplete-wrapper-footer-button.autocomplete-wrapper-search-button:hover{background-color:#ff980014}.autocomplete-wrapper-footer-button.autocomplete-wrapper-results-button{background-color:#3f51b50a;border-color:#3f51b5;color:#3f51b5}.autocomplete-wrapper-footer-button.autocomplete-wrapper-results-button:hover{background-color:#3f51b514}.autocomplete-wrapper-button-text{display:inline}.autocomplete-wrapper-items-list::-webkit-scrollbar{width:6px}.autocomplete-wrapper-items-list::-webkit-scrollbar-track{background:#f1f1f1;border-radius:3px}.autocomplete-wrapper-items-list::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:3px}.autocomplete-wrapper-items-list::-webkit-scrollbar-thumb:hover{background:#a8a8a8}@media (max-width: 768px){.autocomplete-wrapper-dropdown{min-width:280px;max-height:60vh}.autocomplete-wrapper-dropdown-content{max-height:60vh}.autocomplete-wrapper-input-field{font-size:16px}.autocomplete-wrapper-footer{padding:8px 12px}.autocomplete-wrapper-footer-actions{flex-direction:column;gap:6px}.autocomplete-wrapper-footer-button{width:100%;min-height:44px}.autocomplete-wrapper-pagination-footer{flex-direction:column;gap:8px}.autocomplete-wrapper-section-header{flex-direction:column;align-items:flex-start;min-height:80px;gap:8px}.autocomplete-wrapper-filter-controls{width:100%;justify-content:flex-start;flex-wrap:wrap;gap:12px}.autocomplete-wrapper-filter-select{min-width:100px;font-size:11px}.autocomplete-wrapper-filter-label{font-size:11px}.autocomplete-wrapper-pagination-header{width:100%;justify-content:space-between}.autocomplete-wrapper-pagination-header .autocomplete-wrapper-pagination-info{display:none}.autocomplete-wrapper-pagination-controls{gap:2px}.autocomplete-wrapper-page-input{width:40px}.autocomplete-wrapper-item-content{padding:16px 12px;min-height:52px}.autocomplete-wrapper-button-text{font-size:12px}.autocomplete-wrapper-items-list.autocomplete-wrapper-scrollable-list{max-height:250px}}@media (max-width: 480px){.autocomplete-wrapper-dropdown{min-width:260px;max-height:50vh}.autocomplete-wrapper-section-header{padding:8px 12px 6px;min-height:70px;gap:6px}.autocomplete-wrapper-filter-controls{gap:8px}.autocomplete-wrapper-filter-group{gap:4px}.autocomplete-wrapper-filter-select{min-width:90px;padding:3px 6px}.autocomplete-wrapper-item-content{padding:14px 12px}.autocomplete-wrapper-pagination-header{gap:8px}.autocomplete-wrapper-pagination-button{min-width:28px;height:28px}.autocomplete-wrapper-page-input{width:35px;height:28px}.autocomplete-wrapper-items-list.autocomplete-wrapper-scrollable-list{max-height:200px}.autocomplete-wrapper-footer-actions{gap:4px}.autocomplete-wrapper-footer-button{font-size:12px;padding:8px 12px;min-height:40px}.autocomplete-wrapper-button-text{display:none}}\n"] }]
+                    ], template: "<div class=\"autocomplete-wrapper-wrapper\" [class.autocomplete-wrapper-active]=\"overlayOpen()\">\n  <!-- Input Container -->\n  <div\n    class=\"autocomplete-wrapper-input-container\"\n    cdkOverlayOrigin\n    #overlayPosition=\"cdkOverlayOrigin\"\n  >\n    <div class=\"autocomplete-wrapper-input-wrapper\">\n      <mat-icon class=\"autocomplete-wrapper-search-icon\">search</mat-icon>\n      <input\n        #searchInput\n        type=\"text\"\n        class=\"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=\"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=\"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                    (click)=\"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\">Buscar por:</label>\n                        <select\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                    }\n\n                    @if (config.enableStockFilter && config.stockOptions) {\n                      <div class=\"autocomplete-wrapper-filter-group\">\n                        <label class=\"autocomplete-wrapper-filter-label\">Stock:</label>\n                        <select\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                      (click)=\"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            }\n\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: [".autocomplete-wrapper{position:relative;width:100%;max-width:100%}.autocomplete-wrapper.autocomplete-wrapper-active .autocomplete-wrapper-input-wrapper{border-color:#1976d2;box-shadow:0 0 0 2px #1976d21a}.autocomplete-wrapper-input-container{position:relative;width:100%}.autocomplete-wrapper-input-wrapper{position:relative;display:flex;align-items:center;background:#fff;border:1px solid #e0e0e0;border-radius:8px;padding:0 12px;transition:all .3s ease}.autocomplete-wrapper-input-wrapper:focus-within{border-color:#1976d2;box-shadow:0 0 0 2px #1976d21a}.autocomplete-wrapper-search-icon{color:#666;margin-right:8px;font-size:20px}.autocomplete-wrapper-input-field{flex:1;border:none;outline:none;font-size:16px;padding:7px 0;background:transparent;color:#333}.autocomplete-wrapper-input-field::placeholder{color:#999}.autocomplete-wrapper-input-field:disabled{opacity:.6;cursor:not-allowed}.autocomplete-wrapper-clear-button{margin-left:8px;color:#666;background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;transition:all .2s ease}.autocomplete-wrapper-clear-button:hover{background-color:#0000000a;color:#333}.autocomplete-wrapper-loading-spinner{position:absolute;right:12px;top:50%;transform:translateY(-50%)}.autocomplete-wrapper-dropdown{background:#fff;border-radius:8px;box-shadow:0 4px 20px #00000026;border:1px solid #e0e0e0;overflow:hidden;max-height:500px;min-width:300px;display:flex;flex-direction:column}.autocomplete-wrapper-dropdown.autocomplete-wrapper-active{animation:reusableAutocompleteSlideIn .2s ease-out}@keyframes reusableAutocompleteSlideIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.autocomplete-wrapper-dropdown-content{display:flex;flex-direction:column;height:100%;max-height:500px}.autocomplete-wrapper-section{display:flex;flex-direction:column;height:100%;min-height:0}.autocomplete-wrapper-section-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px 8px;border-bottom:1px solid #f0f0f0;background:#fafafa;flex-shrink:0;min-height:56px;flex-wrap:wrap;gap:12px}.autocomplete-wrapper-section-title{font-size:13px;font-weight:500;color:#666;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}.autocomplete-wrapper-clear-history-button{color:#666;background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;transition:all .2s ease}.autocomplete-wrapper-clear-history-button:hover{background-color:#0000000a;color:#333}.autocomplete-wrapper-filter-controls{display:flex;align-items:center;gap:16px;flex:1;justify-content:center}.autocomplete-wrapper-filter-group{display:flex;align-items:center;gap:6px}.autocomplete-wrapper-filter-label{font-size:12px;color:#666;font-weight:500;white-space:nowrap}.autocomplete-wrapper-filter-select{padding:4px 8px;border:1px solid #ddd;border-radius:4px;font-size:12px;background:#fff;color:#333;cursor:pointer;min-width:120px}.autocomplete-wrapper-filter-select:focus{outline:none;border-color:#1976d2;box-shadow:0 0 0 1px #1976d233}.autocomplete-wrapper-filter-select:hover{border-color:#bbb}.autocomplete-wrapper-pagination-header{display:flex;align-items:center;gap:12px;margin-left:auto}.autocomplete-wrapper-pagination-info{font-size:12px;color:#666;white-space:nowrap}.autocomplete-wrapper-pagination-controls{display:flex;align-items:center;gap:4px}.autocomplete-wrapper-pagination-button{min-width:32px;height:32px;line-height:32px;padding:0;color:#666;background:none;border:1px solid #ddd;border-radius:4px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.autocomplete-wrapper-pagination-button:hover:not(:disabled){background-color:#0000000a;color:#333}.autocomplete-wrapper-pagination-button:disabled{opacity:.5;cursor:not-allowed}.autocomplete-wrapper-pagination-button mat-icon{font-size:18px;width:18px;height:18px}.autocomplete-wrapper-page-input{width:50px;height:32px;border:1px solid #ddd;border-radius:4px;text-align:center;font-size:12px;padding:4px;margin:0 4px}.autocomplete-wrapper-page-input:focus{outline:none;border-color:#1976d2}.autocomplete-wrapper-items-list{list-style:none;margin:0;padding:0;flex:1;min-height:0}.autocomplete-wrapper-items-list.autocomplete-wrapper-scrollable-list{overflow-y:auto}.autocomplete-wrapper-list-item{display:flex;align-items:center;border-bottom:1px solid #f5f5f5;transition:background-color .2s ease}.autocomplete-wrapper-list-item:last-child{border-bottom:none}.autocomplete-wrapper-list-item:hover{background-color:#f8f9fa}.autocomplete-wrapper-item-content{flex:1;display:flex;align-items:center;padding:12px 16px;cursor:pointer;min-height:48px;transition:all .2s ease}.autocomplete-wrapper-item-content.autocomplete-wrapper-selected{background-color:#e3f2fd;color:#1976d2}.autocomplete-wrapper-history-item .autocomplete-wrapper-item-content{padding-left:12px}.autocomplete-wrapper-history-icon{color:#999;margin-right:12px;font-size:18px}.autocomplete-wrapper-item-details{flex:1;display:flex;align-items:center}.autocomplete-wrapper-remove-button{margin-right:8px}.autocomplete-wrapper-result-item{position:relative}.autocomplete-wrapper-item-info{flex:1;display:flex;align-items:center}.autocomplete-wrapper-default-item{flex:1}.autocomplete-wrapper-default-item .autocomplete-wrapper-item-name{font-weight:500;font-size:14px;margin-bottom:2px;color:#333}.autocomplete-wrapper-default-item .autocomplete-wrapper-item-description{font-size:12px;color:#666;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.autocomplete-wrapper-no-results{display:flex;flex-direction:column;align-items:center;padding:32px 16px;text-align:center;color:#666}.autocomplete-wrapper-no-results-icon{font-size:48px;color:#ccc;margin-bottom:16px;width:45px;height:45px}.autocomplete-wrapper-no-results-content{font-size:14px;line-height:1.5}.autocomplete-wrapper-default-no-results{text-align:center}.autocomplete-wrapper-default-no-results p:first-child{font-weight:500;margin-bottom:8px}.autocomplete-wrapper-footer{border-top:1px solid #f0f0f0;background:#fafafa;flex-shrink:0;padding:12px 16px;display:flex;flex-direction:column;gap:12px}.autocomplete-wrapper-pagination-footer{display:flex;align-items:center;justify-content:space-between;width:100%;gap:16px}.autocomplete-wrapper-pagination-summary{font-size:12px;color:#666;white-space:nowrap}.autocomplete-wrapper-pagination-controls-footer{display:flex;align-items:center;gap:8px}.autocomplete-wrapper-page-indicator{font-size:12px;color:#666;min-width:40px;text-align:center}.autocomplete-wrapper-footer-actions{display:flex;gap:8px;flex-wrap:wrap}.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 #ddd;border-radius:4px;cursor:pointer;padding:8px 12px;transition:all .2s ease}.autocomplete-wrapper-footer-button.autocomplete-wrapper-create-button{background-color:#4caf500a;border-color:#4caf50;color:#4caf50}.autocomplete-wrapper-footer-button.autocomplete-wrapper-create-button:hover{background-color:#4caf5014}.autocomplete-wrapper-footer-button.autocomplete-wrapper-search-button{background-color:#ff98000a;border-color:#ff9800;color:#ff9800}.autocomplete-wrapper-footer-button.autocomplete-wrapper-search-button:hover{background-color:#ff980014}.autocomplete-wrapper-footer-button.autocomplete-wrapper-results-button{background-color:#3f51b50a;border-color:#3f51b5;color:#3f51b5}.autocomplete-wrapper-footer-button.autocomplete-wrapper-results-button:hover{background-color:#3f51b514}.autocomplete-wrapper-button-text{display:inline}.autocomplete-wrapper-items-list::-webkit-scrollbar{width:6px}.autocomplete-wrapper-items-list::-webkit-scrollbar-track{background:#f1f1f1;border-radius:3px}.autocomplete-wrapper-items-list::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:3px}.autocomplete-wrapper-items-list::-webkit-scrollbar-thumb:hover{background:#a8a8a8}@media (max-width: 768px){.autocomplete-wrapper-dropdown{min-width:280px;max-height:60vh}.autocomplete-wrapper-dropdown-content{max-height:60vh}.autocomplete-wrapper-input-field{font-size:16px}.autocomplete-wrapper-footer{padding:8px 12px}.autocomplete-wrapper-footer-actions{flex-direction:column;gap:6px}.autocomplete-wrapper-footer-button{width:100%;min-height:44px}.autocomplete-wrapper-pagination-footer{flex-direction:column;gap:8px}.autocomplete-wrapper-section-header{flex-direction:column;align-items:flex-start;min-height:80px;gap:8px}.autocomplete-wrapper-filter-controls{width:100%;justify-content:flex-start;flex-wrap:wrap;gap:12px}.autocomplete-wrapper-filter-select{min-width:100px;font-size:11px}.autocomplete-wrapper-filter-label{font-size:11px}.autocomplete-wrapper-pagination-header{width:100%;justify-content:space-between}.autocomplete-wrapper-pagination-header .autocomplete-wrapper-pagination-info{display:none}.autocomplete-wrapper-pagination-controls{gap:2px}.autocomplete-wrapper-page-input{width:40px}.autocomplete-wrapper-item-content{padding:16px 12px;min-height:52px}.autocomplete-wrapper-button-text{font-size:12px}.autocomplete-wrapper-items-list.autocomplete-wrapper-scrollable-list{max-height:250px}}@media (max-width: 480px){.autocomplete-wrapper-dropdown{min-width:260px;max-height:50vh}.autocomplete-wrapper-section-header{padding:8px 12px 6px;min-height:70px;gap:6px}.autocomplete-wrapper-filter-controls{gap:8px}.autocomplete-wrapper-filter-group{gap:4px}.autocomplete-wrapper-filter-select{min-width:90px;padding:3px 6px}.autocomplete-wrapper-item-content{padding:14px 12px}.autocomplete-wrapper-pagination-header{gap:8px}.autocomplete-wrapper-pagination-button{min-width:28px;height:28px}.autocomplete-wrapper-page-input{width:35px;height:28px}.autocomplete-wrapper-items-list.autocomplete-wrapper-scrollable-list{max-height:200px}.autocomplete-wrapper-footer-actions{gap:4px}.autocomplete-wrapper-footer-button{font-size:12px;padding:8px 12px;min-height:40px}.autocomplete-wrapper-button-text{display:none}}\n"] }]
         }], propDecorators: { config: [{
                 type: Input
             }] } });
@@ -1994,8 +2006,12 @@ class ToUpperCaseDirective {
         this.onChange(value.toUpperCase()); // Llamar a la función que actualiza el valor del modelo
     }
     // Funciones de ControlValueAccessor
-    onChange = (_) => { };
-    onTouched = () => { };
+    onChange = (_value) => {
+        // ControlValueAccessor callback
+    };
+    onTouched = () => {
+        // ControlValueAccessor callback
+    };
     writeValue(value) {
         if (value) {
             this.el.nativeElement.value = value.toUpperCase();