ngx-eiffage-material 0.0.7 → 0.0.9

package/fesm2022/ngx-eiffage-material.mjs

@@ -1,12 +1,12 @@
 import * as i0 from '@angular/core';
-import { input, Component, Injectable, inject, output, computed, viewChild, effect, signal, forwardRef } from '@angular/core';
-import * as i4 from '@angular/material/button';
+import { input, Component, Injectable, inject, output, computed, viewChild, effect, ChangeDetectorRef, signal, untracked, forwardRef, ViewEncapsulation } from '@angular/core';
+import * as i1 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i6 from '@angular/material/icon';
+import * as i4 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i2 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import * as i1 from '@angular/material/card';
+import * as i1$1 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
 import * as i3 from '@angular/material/sort';
 import { MatSortModule } from '@angular/material/sort';
@@ -19,11 +19,25 @@ import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
 import * as i8 from 'ngx-skeleton-loader';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 import { SlicePipe, TitleCasePipe, LowerCasePipe, UpperCasePipe, DecimalPipe, PercentPipe, CurrencyPipe, DatePipe, CommonModule } from '@angular/common';
-import { ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import * as i5$1 from '@angular/forms';
+import { FormControl, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import * as i6 from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
+import * as i2$2 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i7$1 from '@angular/material/progress-bar';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
+import * as i1$2 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
+import * as i3$1 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import { MatBottomSheetRef, MAT_BOTTOM_SHEET_DATA, MatBottomSheet, MatBottomSheetModule } from '@angular/material/bottom-sheet';
+import { Subject, debounceTime, distinctUntilChanged, takeUntil } from 'rxjs';
+import { toSignal, toObservable, rxResource } from '@angular/core/rxjs-interop';
+import * as i2$3 from '@angular/material/divider';
+import { MatDividerModule } from '@angular/material/divider';
+import * as i8$1 from '@angular/material/list';
+import { MatListModule } from '@angular/material/list';
 
 class NgxLoadingButton {
     isLoading = input.required(...(ngDevMode ? [{ debugName: "isLoading" }] : [])); //Indica si el botón está cargando
@@ -36,7 +50,7 @@ class NgxLoadingButton {
     //Por defecto es Primary
     color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : [])); //Color del botón
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NgxLoadingButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: NgxLoadingButton, isStandalone: true, selector: "ngx-loading-button", inputs: { isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, matButton: { classPropertyName: "matButton", publicName: "matButton", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, spinnerDiameter: { classPropertyName: "spinnerDiameter", publicName: "spinnerDiameter", isSignal: true, isRequired: false, transformFunction: null }, spinnerStrokeWidth: { classPropertyName: "spinnerStrokeWidth", publicName: "spinnerStrokeWidth", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button\r\n  class=\"loadingButton\"\r\n  [matButton]=\"matButton()\"\r\n  [type]=\"type()\"\r\n  [disabled]=\"disabled() || isLoading()\"\r\n  [class.isLoading]=\"isLoading()\"\r\n  [class]=\"color() ?? ''\"\r\n>\r\n  {{ label() }}\r\n</button>\r\n\r\n@if (isLoading()) {\r\n  <mat-spinner\r\n    class=\"spinnerLoadingButton\"\r\n    [diameter]=\"spinnerDiameter()\"\r\n    [strokeWidth]=\"spinnerStrokeWidth()\"\r\n  />\r\n}\r\n", styles: [":host{display:inline-flex;position:relative}.loadingButton{width:100%}.spinnerLoadingButton{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.isLoading{--mat-button-filled-disabled-label-text-color: transparent;--mat-button-outlined-disabled-label-text-color: transparent;--mat-button-protected-disabled-label-text-color: transparent;--mat-button-text-disabled-label-text-color: transparent;--mat-button-tonal-disabled-label-text-color: transparent}.secondary{--mat-button-filled-container-color: var(--mat-sys-secondary);--mat-button-filled-label-text-color: var(--mat-sys-on-secondary);--mat-button-outlined-label-text-color: var(--mat-sys-secondary);--mat-button-outlined-state-layer-color: var(--mat-sys-secondary);--mat-button-outlined-ripple-color: var(--mat-sys-secondary-container);--mat-button-protected-label-text-color: var(--mat-sys-secondary);--mat-button-protected-state-layer-color: var(--mat-sys-secondary);--mat-button-protected-ripple-color: var(--mat-sys-secondary-container);--mat-button-text-label-text-color: var(--mat-sys-secondary);--mat-button-text-state-layer-color: var(--mat-sys-secondary);--mat-button-text-ripple-color: var(--mat-sys-secondary-container)}.secondarySpinner{--mat-progress-spinner-active-indicator-color: var(--mat-sys-secondary)}.tertiary{--mat-button-filled-container-color: var(--mat-sys-tertiary);--mat-button-filled-label-text-color: var(--mat-sys-on-tertiary);--mat-button-outlined-label-text-color: var(--mat-sys-tertiary);--mat-button-outlined-state-layer-color: var(--mat-sys-tertiary);--mat-button-outlined-ripple-color: var(--mat-sys-tertiary-container);--mat-button-protected-label-text-color: var(--mat-sys-tertiary);--mat-button-protected-state-layer-color: var(--mat-sys-tertiary);--mat-button-protected-ripple-color: var(--mat-sys-tertiary-container);--mat-button-text-label-text-color: var(--mat-sys-tertiary);--mat-button-text-state-layer-color: var(--mat-sys-tertiary);--mat-button-text-ripple-color: var(--mat-sys-tertiary-container)}.tertiarySpinner{--mat-progress-spinner-active-indicator-color: var(--mat-sys-tertiary)}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatIconModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: NgxLoadingButton, isStandalone: true, selector: "ngx-loading-button", inputs: { isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, matButton: { classPropertyName: "matButton", publicName: "matButton", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, spinnerDiameter: { classPropertyName: "spinnerDiameter", publicName: "spinnerDiameter", isSignal: true, isRequired: false, transformFunction: null }, spinnerStrokeWidth: { classPropertyName: "spinnerStrokeWidth", publicName: "spinnerStrokeWidth", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button\r\n  class=\"loadingButton\"\r\n  [matButton]=\"matButton()\"\r\n  [type]=\"type()\"\r\n  [disabled]=\"disabled() || isLoading()\"\r\n  [class.isLoading]=\"isLoading()\"\r\n  [class]=\"color() ?? ''\"\r\n>\r\n  {{ label() }}\r\n</button>\r\n\r\n@if (isLoading()) {\r\n  <mat-spinner\r\n    class=\"spinnerLoadingButton\"\r\n    [diameter]=\"spinnerDiameter()\"\r\n    [strokeWidth]=\"spinnerStrokeWidth()\"\r\n  />\r\n}\r\n", styles: [":host{display:inline-flex;position:relative}.loadingButton{width:100%}.spinnerLoadingButton{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.isLoading{--mat-button-filled-disabled-label-text-color: transparent;--mat-button-outlined-disabled-label-text-color: transparent;--mat-button-protected-disabled-label-text-color: transparent;--mat-button-text-disabled-label-text-color: transparent;--mat-button-tonal-disabled-label-text-color: transparent}.secondary{--mat-button-filled-container-color: var(--mat-sys-secondary);--mat-button-filled-label-text-color: var(--mat-sys-on-secondary);--mat-button-outlined-label-text-color: var(--mat-sys-secondary);--mat-button-outlined-state-layer-color: var(--mat-sys-secondary);--mat-button-outlined-ripple-color: var(--mat-sys-secondary-container);--mat-button-protected-label-text-color: var(--mat-sys-secondary);--mat-button-protected-state-layer-color: var(--mat-sys-secondary);--mat-button-protected-ripple-color: var(--mat-sys-secondary-container);--mat-button-text-label-text-color: var(--mat-sys-secondary);--mat-button-text-state-layer-color: var(--mat-sys-secondary);--mat-button-text-ripple-color: var(--mat-sys-secondary-container)}.secondarySpinner{--mat-progress-spinner-active-indicator-color: var(--mat-sys-secondary)}.tertiary{--mat-button-filled-container-color: var(--mat-sys-tertiary);--mat-button-filled-label-text-color: var(--mat-sys-on-tertiary);--mat-button-outlined-label-text-color: var(--mat-sys-tertiary);--mat-button-outlined-state-layer-color: var(--mat-sys-tertiary);--mat-button-outlined-ripple-color: var(--mat-sys-tertiary-container);--mat-button-protected-label-text-color: var(--mat-sys-tertiary);--mat-button-protected-state-layer-color: var(--mat-sys-tertiary);--mat-button-protected-ripple-color: var(--mat-sys-tertiary-container);--mat-button-text-label-text-color: var(--mat-sys-tertiary);--mat-button-text-state-layer-color: var(--mat-sys-tertiary);--mat-button-text-ripple-color: var(--mat-sys-tertiary-container)}.tertiarySpinner{--mat-progress-spinner-active-indicator-color: var(--mat-sys-tertiary)}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatIconModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NgxLoadingButton, decorators: [{
             type: Component,
@@ -195,7 +209,7 @@ class CommonTableComponent {
     update = output();
     delete = output();
     //computed
-    displayedColumns = computed(() => this.tableConfig().displayedColumns, ...(ngDevMode ? [{ debugName: "displayedColumns" }] : []));
+    displayedColumns = computed(() => this.tableConfig().tableColumns.map(column => column.key), ...(ngDevMode ? [{ debugName: "displayedColumns" }] : []));
     datasource = computed(() => new MatTableDataSource(), ...(ngDevMode ? [{ debugName: "datasource" }] : []));
     paginator = viewChild(MatPaginator, ...(ngDevMode ? [{ debugName: "paginator" }] : []));
     constructor() {
@@ -208,7 +222,7 @@ class CommonTableComponent {
         });
     }
     getAllColumns() {
-        const columns = [...this.tableConfig().displayedColumns];
+        const columns = [...this.displayedColumns()];
         if (this.hasActions()) {
             columns.push('actions');
         }
@@ -246,7 +260,7 @@ class CommonTableComponent {
         this.delete.emit(row);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: CommonTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: CommonTableComponent, isStandalone: true, selector: "common-table", inputs: { tableConfig: { classPropertyName: "tableConfig", publicName: "tableConfig", isSignal: true, isRequired: true, transformFunction: null }, tableData: { classPropertyName: "tableData", publicName: "tableData", isSignal: true, isRequired: true, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { create: "create", view: "view", download: "download", update: "update", delete: "delete" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-card>\r\n    <div class=\"tableContainer\">\r\n        <div class=\"tableHeader\">\r\n            <div class=\"tableHeader__title\">\r\n                <span>{{ tableConfig().title }}</span>\r\n            </div>\r\n            <div class=\"tableHeader__buttons\">\r\n                @if(canDoAction('canCreate')) {\r\n                    <button mat-raised-button type=\"button\" (click)=\"onCreateClick()\">\r\n                        <mat-icon>add</mat-icon>\r\n                        <span>Create</span>\r\n                    </button>\r\n                }\r\n            </div>\r\n        </div>\r\n        @if(isLoading()) {\r\n            <ngx-skeleton-loader [count]=\"tableConfig().skeletonConfig?.count || 5\" />\r\n        } @else { \r\n            <div class=\"overflowTable\">\r\n                <table mat-table class=\"mat-elevation-z8\" [dataSource]=\"datasource()\" class=\"customTable\" matSort>\r\n                    @for(column of tableConfig().tableColumns; track column.key) {\r\n                        <!-- Dynamically generate columns -->\r\n                        <ng-container [matColumnDef]=\"column.key\">\r\n                            <!-- Header cell definition -->\r\n                            <th mat-header-cell *matHeaderCellDef>{{ column.displayName }}</th>\r\n                        \r\n                            <!-- Data cell definition -->\r\n                            <td mat-cell *matCellDef=\"let row\">\r\n                                @switch (column.type) {\r\n                                    @case ('button') {\r\n                                        @if(_commonTableService.isButtonVisible(column, row)) {\r\n                                            <button\r\n                                                [matButton]=\"column.buttonConfig?.variant || 'filled'\"\r\n                                                [class]=\"column.buttonConfig?.color\"\r\n                                                [disabled]=\"_commonTableService.isButtonDisabled(column, row)\"\r\n                                                [matTooltip]=\"column.buttonConfig?.tooltip || ''\"\r\n                                                (click)=\"_commonTableService.onCustomButtonClick(column, row)\"\r\n                                            >\r\n                                                @if(column.buttonConfig?.icon) {\r\n                                                    <mat-icon>{{ column.buttonConfig?.icon }}</mat-icon>\r\n                                                }\r\n                                                @if(column.buttonConfig?.text) {\r\n                                                    {{ column.buttonConfig?.text }}\r\n                                                }\r\n                                            </button>\r\n                                        }\r\n                                    }\r\n                                    @case ('icon-button') {\r\n                                        @if(_commonTableService.isButtonVisible(column, row)) {\r\n                                            <button \r\n                                                matIconButton\r\n                                                [class]=\"column.buttonConfig?.color\"\r\n                                                [disabled]=\"_commonTableService.isButtonDisabled(column, row)\"\r\n                                                [matTooltip]=\"column.buttonConfig?.tooltip || ''\"\r\n                                                (click)=\"_commonTableService.onCustomButtonClick(column, row)\"\r\n                                            >\r\n                                                @if(column.buttonConfig?.icon) {\r\n                                                    <mat-icon>{{ column.buttonConfig?.icon }}</mat-icon>\r\n                                                }\r\n                                            </button>\r\n                                        }\r\n                                    }\r\n                                    @case ('link') {\r\n                                        @if(_commonTableService.isLinkVisible(column, row)) {\r\n                                            <!-- External link -->\r\n                                            @if(_commonTableService.getLinkHref(column, row)) {\r\n                                                <a\r\n                                                    [style]=\"{ display: 'flex', alignItems: 'center', gap: '2px' }\"\r\n                                                    [href]=\"_commonTableService.getLinkHref(column, row)\"\r\n                                                    [target]=\"column.linkConfig?.target || '_blank'\"\r\n                                                    [matTooltip]=\"column.linkConfig?.tooltip || ''\"\r\n                                                    [style.color]=\"column.linkConfig?.color || 'primary'\"\r\n                                                    [style.text-decoration]=\"column.linkConfig?.underline ? 'underline' : 'none'\"\r\n                                                >\r\n                                                    @if(column.linkConfig?.icon) {\r\n                                                        <mat-icon>{{ column.linkConfig?.icon }}</mat-icon>\r\n                                                    }\r\n                                                    @if(column.linkConfig?.text) {\r\n                                                        {{ column.linkConfig?.text }}\r\n                                                    }\r\n                                                </a>\r\n                                            }\r\n                                        }\r\n                                    }\r\n                                    <!-- Text is by default -->\r\n                                    @default {\r\n                                        {{ _commonTableService.getCellValue(column, row) }}\r\n                                    }\r\n                                }\r\n                            </td>\r\n                        </ng-container>\r\n                    }\r\n    \r\n                    <!-- Actions Column -->\r\n                    @if(hasActions()) {\r\n                        <ng-container matColumnDef=\"actions\">\r\n                            <th mat-header-cell *matHeaderCellDef>Actions</th>\r\n                            <td mat-cell *matCellDef=\"let row\">\r\n                                @if(canDoAction('canView', row)) {\r\n                                    <button matIconButton (click)=\"onViewClick(row)\">\r\n                                        <mat-icon>visibility</mat-icon>\r\n                                    </button>\r\n                                }\r\n                                @if(canDoAction('canDownload', row)) {\r\n                                    <button matIconButton (click)=\"onDownloadClick(row)\">\r\n                                        <mat-icon>download</mat-icon>\r\n                                    </button>\r\n                                }\r\n                                @if(canDoAction('canUpdate', row)) {\r\n                                    <button matIconButton (click)=\"onUpdateClick(row)\">\r\n                                        <mat-icon>edit</mat-icon>\r\n                                    </button>\r\n                                }\r\n                                @if(canDoAction('canDelete', row)) {\r\n                                    <button matIconButton (click)=\"onDeleteClick(row)\">\r\n                                        <mat-icon>delete</mat-icon>\r\n                                    </button>\r\n                                }\r\n                            </td>\r\n                        </ng-container>\r\n                    }\r\n    \r\n                    <tr mat-header-row *matHeaderRowDef=\"getAllColumns()\"></tr>\r\n                    <tr mat-row *matRowDef=\"let row; columns: getAllColumns();\"></tr>\r\n                    <tr *matNoDataRow>No data available</tr>\r\n                </table>\r\n                <mat-paginator\r\n                  #paginator\r\n                  [length]=\"datasource().data.length\"\r\n                  [pageSize]=\"5\"\r\n                  [pageSizeOptions]=\"[5, 10, 25, 100]\"\r\n                />\r\n            </div>\r\n        }\r\n\r\n    </div>\r\n</mat-card>", styles: [".tableContainer{display:flex;flex-direction:column;padding:16px 8px;gap:12px}.tableContainer .tableHeader{display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:0 0 0 8px}.tableContainer .tableHeader__title{font-size:16px;font-weight:500}.tableContainer .tableHeader__buttons{display:flex;flex-direction:row;align-items:center;gap:8px}.tableContainer .tableHeader__buttons button{padding:0 16px;height:28px;box-shadow:0 1px 2px #0000001a,0 1px 3px 2px #0000000d;border-radius:4px}.overflowTable{overflow-x:auto;width:100%}.secondary{--mat-button-filled-container-color: var(--mat-sys-secondary);--mat-button-filled-label-text-color: var(--mat-sys-on-secondary);--mat-button-outlined-label-text-color: var(--mat-sys-secondary);--mat-button-outlined-state-layer-color: var(--mat-sys-secondary);--mat-button-outlined-ripple-color: var(--mat-sys-secondary-container);--mat-button-protected-label-text-color: var(--mat-sys-secondary);--mat-button-protected-state-layer-color: var(--mat-sys-secondary);--mat-button-protected-ripple-color: var(--mat-sys-secondary-container);--mat-button-text-label-text-color: var(--mat-sys-secondary);--mat-button-text-state-layer-color: var(--mat-sys-secondary);--mat-button-text-ripple-color: var(--mat-sys-secondary-container)}.tertiary{--mat-button-filled-container-color: var(--mat-sys-tertiary);--mat-button-filled-label-text-color: var(--mat-sys-on-tertiary);--mat-button-outlined-label-text-color: var(--mat-sys-tertiary);--mat-button-outlined-state-layer-color: var(--mat-sys-tertiary);--mat-button-outlined-ripple-color: var(--mat-sys-tertiary-container);--mat-button-protected-label-text-color: var(--mat-sys-tertiary);--mat-button-protected-state-layer-color: var(--mat-sys-tertiary);--mat-button-protected-ripple-color: var(--mat-sys-tertiary-container);--mat-button-text-label-text-color: var(--mat-sys-tertiary);--mat-button-text-state-layer-color: var(--mat-sys-tertiary);--mat-button-text-ripple-color: var(--mat-sys-tertiary-container)}\n"], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i2$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i2$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i2$1.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i3.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i7.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "component", type: i8.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme", "size"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: CommonTableComponent, isStandalone: true, selector: "common-table", inputs: { tableConfig: { classPropertyName: "tableConfig", publicName: "tableConfig", isSignal: true, isRequired: true, transformFunction: null }, tableData: { classPropertyName: "tableData", publicName: "tableData", isSignal: true, isRequired: true, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { create: "create", view: "view", download: "download", update: "update", delete: "delete" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-card>\r\n    <div class=\"tableContainer\">\r\n        <div class=\"tableHeader\">\r\n            <div class=\"tableHeader__title\">\r\n                <span>{{ tableConfig().title }}</span>\r\n            </div>\r\n            <div class=\"tableHeader__buttons\">\r\n                @if(canDoAction('canCreate')) {\r\n                    <button mat-raised-button type=\"button\" (click)=\"onCreateClick()\">\r\n                        <mat-icon>add</mat-icon>\r\n                        <span>Create</span>\r\n                    </button>\r\n                }\r\n            </div>\r\n        </div>\r\n        @if(isLoading()) {\r\n            <ngx-skeleton-loader [count]=\"tableConfig().skeletonConfig?.count || 5\" />\r\n        } @else { \r\n            <div class=\"overflowTable\">\r\n                <table mat-table class=\"mat-elevation-z8\" [dataSource]=\"datasource()\" class=\"customTable\" matSort>\r\n                    @for(column of tableConfig().tableColumns; track column.key) {\r\n                        <!-- Dynamically generate columns -->\r\n                        <ng-container [matColumnDef]=\"column.key\">\r\n                            <!-- Header cell definition -->\r\n                            <th mat-header-cell *matHeaderCellDef>{{ column.displayName }}</th>\r\n                        \r\n                            <!-- Data cell definition -->\r\n                            <td mat-cell *matCellDef=\"let row\">\r\n                                @switch (column.type) {\r\n                                    @case ('button') {\r\n                                        @if(_commonTableService.isButtonVisible(column, row)) {\r\n                                            <button\r\n                                                [matButton]=\"column.buttonConfig?.variant || 'filled'\"\r\n                                                [class]=\"column.buttonConfig?.color\"\r\n                                                [disabled]=\"_commonTableService.isButtonDisabled(column, row)\"\r\n                                                [matTooltip]=\"column.buttonConfig?.tooltip || ''\"\r\n                                                (click)=\"_commonTableService.onCustomButtonClick(column, row)\"\r\n                                            >\r\n                                                @if(column.buttonConfig?.icon) {\r\n                                                    <mat-icon>{{ column.buttonConfig?.icon }}</mat-icon>\r\n                                                }\r\n                                                @if(column.buttonConfig?.text) {\r\n                                                    {{ column.buttonConfig?.text }}\r\n                                                }\r\n                                            </button>\r\n                                        }\r\n                                    }\r\n                                    @case ('icon-button') {\r\n                                        @if(_commonTableService.isButtonVisible(column, row)) {\r\n                                            <button \r\n                                                matIconButton\r\n                                                [class]=\"column.buttonConfig?.color\"\r\n                                                [disabled]=\"_commonTableService.isButtonDisabled(column, row)\"\r\n                                                [matTooltip]=\"column.buttonConfig?.tooltip || ''\"\r\n                                                (click)=\"_commonTableService.onCustomButtonClick(column, row)\"\r\n                                            >\r\n                                                @if(column.buttonConfig?.icon) {\r\n                                                    <mat-icon>{{ column.buttonConfig?.icon }}</mat-icon>\r\n                                                }\r\n                                            </button>\r\n                                        }\r\n                                    }\r\n                                    @case ('link') {\r\n                                        @if(_commonTableService.isLinkVisible(column, row)) {\r\n                                            <!-- External link -->\r\n                                            @if(_commonTableService.getLinkHref(column, row)) {\r\n                                                <a\r\n                                                    [style]=\"{ display: 'flex', alignItems: 'center', gap: '2px' }\"\r\n                                                    [href]=\"_commonTableService.getLinkHref(column, row)\"\r\n                                                    [target]=\"column.linkConfig?.target || '_blank'\"\r\n                                                    [matTooltip]=\"column.linkConfig?.tooltip || ''\"\r\n                                                    [style.color]=\"column.linkConfig?.color || 'primary'\"\r\n                                                    [style.text-decoration]=\"column.linkConfig?.underline ? 'underline' : 'none'\"\r\n                                                >\r\n                                                    @if(column.linkConfig?.icon) {\r\n                                                        <mat-icon>{{ column.linkConfig?.icon }}</mat-icon>\r\n                                                    }\r\n                                                    @if(column.linkConfig?.text) {\r\n                                                        {{ column.linkConfig?.text }}\r\n                                                    }\r\n                                                </a>\r\n                                            }\r\n                                        }\r\n                                    }\r\n                                    <!-- Text is by default -->\r\n                                    @default {\r\n                                        {{ _commonTableService.getCellValue(column, row) }}\r\n                                    }\r\n                                }\r\n                            </td>\r\n                        </ng-container>\r\n                    }\r\n    \r\n                    <!-- Actions Column -->\r\n                    @if(hasActions()) {\r\n                        <ng-container matColumnDef=\"actions\">\r\n                            <th mat-header-cell *matHeaderCellDef>Actions</th>\r\n                            <td mat-cell *matCellDef=\"let row\">\r\n                                @if(canDoAction('canView', row)) {\r\n                                    <button matIconButton (click)=\"onViewClick(row)\">\r\n                                        <mat-icon>visibility</mat-icon>\r\n                                    </button>\r\n                                }\r\n                                @if(canDoAction('canDownload', row)) {\r\n                                    <button matIconButton (click)=\"onDownloadClick(row)\">\r\n                                        <mat-icon>download</mat-icon>\r\n                                    </button>\r\n                                }\r\n                                @if(canDoAction('canUpdate', row)) {\r\n                                    <button matIconButton (click)=\"onUpdateClick(row)\">\r\n                                        <mat-icon>edit</mat-icon>\r\n                                    </button>\r\n                                }\r\n                                @if(canDoAction('canDelete', row)) {\r\n                                    <button matIconButton (click)=\"onDeleteClick(row)\">\r\n                                        <mat-icon>delete</mat-icon>\r\n                                    </button>\r\n                                }\r\n                            </td>\r\n                        </ng-container>\r\n                    }\r\n    \r\n                    <tr mat-header-row *matHeaderRowDef=\"getAllColumns()\"></tr>\r\n                    <tr mat-row *matRowDef=\"let row; columns: getAllColumns();\"></tr>\r\n                    <tr *matNoDataRow>No data available</tr>\r\n                </table>\r\n                <mat-paginator\r\n                  #paginator\r\n                  [length]=\"datasource().data.length\"\r\n                  [pageSize]=\"5\"\r\n                  [pageSizeOptions]=\"[5, 10, 25, 100]\"\r\n                />\r\n            </div>\r\n        }\r\n\r\n    </div>\r\n</mat-card>", styles: [".tableContainer{display:flex;flex-direction:column;padding:16px 8px;gap:12px}.tableContainer .tableHeader{display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:0 0 0 8px}.tableContainer .tableHeader__title{font-size:16px;font-weight:500}.tableContainer .tableHeader__buttons{display:flex;flex-direction:row;align-items:center;gap:8px}.tableContainer .tableHeader__buttons button{padding:0 16px;height:28px;box-shadow:0 1px 2px #0000001a,0 1px 3px 2px #0000000d;border-radius:4px}.overflowTable{overflow-x:auto;width:100%}.secondary{--mat-button-filled-container-color: var(--mat-sys-secondary);--mat-button-filled-label-text-color: var(--mat-sys-on-secondary);--mat-button-outlined-label-text-color: var(--mat-sys-secondary);--mat-button-outlined-state-layer-color: var(--mat-sys-secondary);--mat-button-outlined-ripple-color: var(--mat-sys-secondary-container);--mat-button-protected-label-text-color: var(--mat-sys-secondary);--mat-button-protected-state-layer-color: var(--mat-sys-secondary);--mat-button-protected-ripple-color: var(--mat-sys-secondary-container);--mat-button-text-label-text-color: var(--mat-sys-secondary);--mat-button-text-state-layer-color: var(--mat-sys-secondary);--mat-button-text-ripple-color: var(--mat-sys-secondary-container)}.tertiary{--mat-button-filled-container-color: var(--mat-sys-tertiary);--mat-button-filled-label-text-color: var(--mat-sys-on-tertiary);--mat-button-outlined-label-text-color: var(--mat-sys-tertiary);--mat-button-outlined-state-layer-color: var(--mat-sys-tertiary);--mat-button-outlined-ripple-color: var(--mat-sys-tertiary-container);--mat-button-protected-label-text-color: var(--mat-sys-tertiary);--mat-button-protected-state-layer-color: var(--mat-sys-tertiary);--mat-button-protected-ripple-color: var(--mat-sys-tertiary-container);--mat-button-text-label-text-color: var(--mat-sys-tertiary);--mat-button-text-state-layer-color: var(--mat-sys-tertiary);--mat-button-text-ripple-color: var(--mat-sys-tertiary-container)}\n"], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i2$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i2$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i2$1.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i3.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i7.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "component", type: i8.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme", "size"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: CommonTableComponent, decorators: [{
             type: Component,
@@ -309,11 +323,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
         }] });
 
 class NgxInputFile {
+    // dependencies injection
+    _cdr = inject(ChangeDetectorRef);
     value = signal([], ...(ngDevMode ? [{ debugName: "value" }] : []));
     onChangeCb;
     onTouchCb;
-    disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
     label = input('Seleccionar archivo', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    control = input.required(...(ngDevMode ? [{ debugName: "control" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
     placeholder = input('Haz click o arrastra archivos aquí', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
     class = input('', ...(ngDevMode ? [{ debugName: "class" }] : []));
     accept = input([], ...(ngDevMode ? [{ debugName: "accept" }] : []));
@@ -322,9 +339,41 @@ class NgxInputFile {
     error = input('', ...(ngDevMode ? [{ debugName: "error" }] : []));
     isDropping = signal(false, ...(ngDevMode ? [{ debugName: "isDropping" }] : []));
     inputFileRef = viewChild('inputFileRef', ...(ngDevMode ? [{ debugName: "inputFileRef" }] : []));
+    internalControl = new FormControl([]);
+    checkErrors() {
+        if (this.control().invalid) {
+            this.internalControl.setErrors(this.control().errors);
+        }
+        else {
+            this.internalControl.setErrors(null);
+        }
+    }
+    controlEffect = effect(() => {
+        const value = this.value();
+        // Usar untracked para evitar ciclos y emitEvent: false para no disparar eventos
+        untracked(() => {
+            this.control().setValue(value, { emitEvent: false });
+            // Actualizar el control interno con strings (nombres de archivo)
+            const fileNames = value.map(f => f.name);
+            this.internalControl.setValue(fileNames, { emitEvent: false });
+            this.checkErrors();
+            console.log('checkErrors', this.internalControl.errors);
+            this._cdr.markForCheck();
+        });
+    }, ...(ngDevMode ? [{ debugName: "controlEffect" }] : []));
+    ngOnInit() {
+        if (this.disabled()) {
+            this.control().disable();
+            this.internalControl.disable();
+        }
+    }
     onContainerClick() {
         this.onTouchCb?.();
         if (!this.disabled()) {
+            this.control().markAsTouched();
+            this.internalControl.markAsTouched();
+            this.control().markAsDirty();
+            this.internalControl.markAsDirty();
             this.inputFileRef()?.nativeElement.click();
         }
     }
@@ -332,6 +381,7 @@ class NgxInputFile {
         const target = event.target;
         const files = target.files;
         this.attachFiles(files);
+        target.value = '';
     }
     onDragOver(event) {
         event.preventDefault();
@@ -352,20 +402,21 @@ class NgxInputFile {
     }
     attachFiles(files) {
         if (files && files.length > 0) {
+            let newValue;
             if (this.multiple()) {
-                for (let i = 0; i < files.length; i++) {
-                    const archivo = files.item(i);
-                    this.value.set([...this.value(), archivo]);
-                }
+                const currentFiles = this.value();
+                const newFiles = Array.from(files);
+                newValue = [...currentFiles, ...newFiles];
             }
             else {
-                this.value.set([files.item(0)]);
+                newValue = [files[0]];
             }
-            this.onChangeCb?.(this.value());
-        }
-        const inputRef = this.inputFileRef();
-        if (inputRef) {
-            inputRef.nativeElement.value = ''; //Esto se hace para que se detecte el evento change si eliminamos files (por seguridad un input file solo se puede resetear a vacio)
+            this.value.set(newValue);
+            this.onChangeCb?.(newValue);
+            this.control().markAsTouched();
+            this.internalControl.markAsTouched();
+            this.control().markAsDirty();
+            this.internalControl.markAsDirty();
         }
     }
     writeValue(files) {
@@ -377,13 +428,14 @@ class NgxInputFile {
     registerOnTouched(fn) {
         this.onTouchCb = fn;
     }
-    setDisabledState(isDisabled) {
-        this.disabled.set(isDisabled);
-    }
-    onDeleteFileClick(event, file) {
-        event.stopPropagation();
-        this.value.set(this.value().filter((item) => item != file));
-        this.onChangeCb?.(this.value());
+    onDeleteFileClick(file) {
+        const newValue = this.value().filter((item) => item !== file);
+        this.value.set(newValue);
+        this.onChangeCb?.(newValue);
+        this.control().markAsTouched();
+        this.internalControl.markAsTouched();
+        this.control().markAsDirty();
+        this.internalControl.markAsDirty();
     }
     getAccept() {
         return this.accept().join();
@@ -392,13 +444,13 @@ class NgxInputFile {
         return (bytes / 1024 / 1024).toFixed(1);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NgxInputFile, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: NgxInputFile, isStandalone: true, selector: "ngx-input-file", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: NgxInputFile, isStandalone: true, selector: "ngx-input-file", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => NgxInputFile),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "inputFileRef", first: true, predicate: ["inputFileRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<div [class]=\"class()\">\r\n  <div\r\n    (click)=\"onContainerClick()\"\r\n    [class]=\"['inputContainer', disabled() ? 'inputContainerDisabled' : '', error() && !disabled() ? 'borderError' : '', isDropping() && !disabled() ? 'isDropping' : '']\"\r\n    (dragover)=\"onDragOver($event)\"\r\n    (dragleave)=\"onDragLeave($event)\"\r\n    (drop)=\"onDrop($event)\"\r\n  >\r\n    <input #inputFileRef type=\"file\" [accept]=\"getAccept()\" [multiple]=\"multiple()\" (change)=\"onInputchange($event)\">\r\n    \r\n    <p [class]=\"['label', error() && !disabled() ? 'markError' : '']\">{{label()}}</p>\r\n    @if (value().length === 0) {\r\n      <p class=\"noFiles\">{{placeholder()}}</p>\r\n    }\r\n    @for (file of value(); track file) {\r\n      <div class=\"fileContainer\">\r\n        <p class=\"fileData\"><span>({{bytesToMegaBytes(file.size)}} MB)</span> {{file.name}}</p>\r\n        <button matIconButton type=\"button\" color=\"primary\" matTooltip=\"Eliminar archivo\" (click)=\"onDeleteFileClick($event, file)\">\r\n          <mat-icon>delete</mat-icon>\r\n        </button>\r\n      </div>\r\n    }\r\n  </div>\r\n  <div class=\"hintYError\">\r\n    @if (error() && !disabled()) {\r\n      <span class=\"markError\">{{ error() }}</span>\r\n    } @else {\r\n      <span>{{ hint() }}</span>\r\n    }\r\n    \r\n  </div>\r\n  <!-- <p [class]=\"['hintYError', error() && !disabled() ? 'markError' : '']\">\r\n    {{ error() && !disabled() ? error() : hint() }}\r\n  </p> -->\r\n</div>", styles: [":host{display:block}.inputContainer{width:100%;min-height:56px;border:1px solid #ccc;border-radius:5px;cursor:pointer;position:relative;display:flex;flex-direction:column;justify-content:center}.inputContainerDisabled{cursor:default!important;opacity:.4}input{display:none}.label{margin:0;position:absolute;top:-8px;left:10px;background:#fff;padding:0 5px;font-size:12px;color:#636363;white-space:nowrap;overflow:hidden;max-width:80%}.noFiles{padding:16px;margin:0;color:#3f3f3f}.fileContainer{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center}.fileData{width:100%;margin:0;font-size:13px;padding-left:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fileData span{color:var(--primary);font-weight:400}.hintYError{height:20px;display:flex;align-items:center;padding:0 16px;font-size:var(--mat-form-field-subscript-text-size, var(--mat-sys-body-small-size))}.borderError{border-color:var(--mat-sys-error)}.markError{color:var(--mat-sys-error)}.isDropping{border-style:solid;border-color:var(--primary)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "ngmodule", type: MatChipsModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatInputModule }] });
+        ], viewQueries: [{ propertyName: "inputFileRef", first: true, predicate: ["inputFileRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<mat-form-field\r\n  appearance=\"outline\"\r\n  floatLabel=\"always\"\r\n  (click)=\"onContainerClick()\"\r\n  class=\"chips-field\"\r\n  (dragover)=\"onDragOver($event)\"\r\n  (dragleave)=\"onDragLeave($event)\"\r\n  (drop)=\"onDrop($event)\"\r\n  [class.dragover]=\"isDropping()\"\r\n>\r\n  <mat-label>{{ label() }}</mat-label>\r\n  <mat-chip-grid \r\n    #chipGrid \r\n    [formControl]=\"internalControl\"\r\n    class=\"chips-grid\"\r\n  >\r\n    @for(file of value(); track file.name + $index) {\r\n      <mat-chip-row\r\n        (removed)=\"onDeleteFileClick(file)\"\r\n        class=\"chip-item\"\r\n      >\r\n        <span>({{ bytesToMegaBytes(file.size) }} MB)</span> {{ file.name }}\r\n        <button matChipRemove>\r\n            <mat-icon>cancel</mat-icon>\r\n        </button>\r\n      </mat-chip-row>\r\n    }\r\n  </mat-chip-grid>\r\n  <input \r\n    #inputFileRef\r\n    type=\"file\"\r\n    [accept]=\"getAccept()\" \r\n    [multiple]=\"multiple()\" \r\n    (change)=\"onInputchange($event)\"\r\n    [matChipInputFor]=\"chipGrid\"\r\n    style=\"display: none\"\r\n  />  \r\n  <mat-hint>{{ isDropping() ? 'Arrastrar archivos aqu\u00ED' : hint() }}</mat-hint>\r\n  <mat-error>{{ error() }}</mat-error>\r\n</mat-form-field>", styles: [":host{display:block}mat-form-field{cursor:pointer}.chips-field{width:auto}.chips-field.dragover .mat-mdc-form-field-flex{border:2px dashed var(--mdc-theme-primary)}.chips-field.dragover{background-color:#0000000a;transition:background-color .2s ease}.chips-grid{display:flex;flex-wrap:wrap;gap:8px}.chip-item{width:auto!important;max-width:fit-content}:host ::ng-deep .mat-mdc-form-field-infix{width:auto;min-width:180px}mat-form-field{--mat-form-field-outlined-focus-outline-color: var(--mat-sys-outline);--mat-form-field-outlined-outline-color: var(--mat-sys-outline);--mat-form-field-outlined-hover-outline-color: var(--mat-sys-outline);--mat-form-field-outlined-focus-label-text-color: var(--mat-sys-on-surface)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i6.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i6.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i6.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i6.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatInputModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NgxInputFile, decorators: [{
             type: Component,
@@ -418,9 +470,343 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                             useExisting: forwardRef(() => NgxInputFile),
                             multi: true,
                         },
-                    ], template: "<div [class]=\"class()\">\r\n  <div\r\n    (click)=\"onContainerClick()\"\r\n    [class]=\"['inputContainer', disabled() ? 'inputContainerDisabled' : '', error() && !disabled() ? 'borderError' : '', isDropping() && !disabled() ? 'isDropping' : '']\"\r\n    (dragover)=\"onDragOver($event)\"\r\n    (dragleave)=\"onDragLeave($event)\"\r\n    (drop)=\"onDrop($event)\"\r\n  >\r\n    <input #inputFileRef type=\"file\" [accept]=\"getAccept()\" [multiple]=\"multiple()\" (change)=\"onInputchange($event)\">\r\n    \r\n    <p [class]=\"['label', error() && !disabled() ? 'markError' : '']\">{{label()}}</p>\r\n    @if (value().length === 0) {\r\n      <p class=\"noFiles\">{{placeholder()}}</p>\r\n    }\r\n    @for (file of value(); track file) {\r\n      <div class=\"fileContainer\">\r\n        <p class=\"fileData\"><span>({{bytesToMegaBytes(file.size)}} MB)</span> {{file.name}}</p>\r\n        <button matIconButton type=\"button\" color=\"primary\" matTooltip=\"Eliminar archivo\" (click)=\"onDeleteFileClick($event, file)\">\r\n          <mat-icon>delete</mat-icon>\r\n        </button>\r\n      </div>\r\n    }\r\n  </div>\r\n  <div class=\"hintYError\">\r\n    @if (error() && !disabled()) {\r\n      <span class=\"markError\">{{ error() }}</span>\r\n    } @else {\r\n      <span>{{ hint() }}</span>\r\n    }\r\n    \r\n  </div>\r\n  <!-- <p [class]=\"['hintYError', error() && !disabled() ? 'markError' : '']\">\r\n    {{ error() && !disabled() ? error() : hint() }}\r\n  </p> -->\r\n</div>", styles: [":host{display:block}.inputContainer{width:100%;min-height:56px;border:1px solid #ccc;border-radius:5px;cursor:pointer;position:relative;display:flex;flex-direction:column;justify-content:center}.inputContainerDisabled{cursor:default!important;opacity:.4}input{display:none}.label{margin:0;position:absolute;top:-8px;left:10px;background:#fff;padding:0 5px;font-size:12px;color:#636363;white-space:nowrap;overflow:hidden;max-width:80%}.noFiles{padding:16px;margin:0;color:#3f3f3f}.fileContainer{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center}.fileData{width:100%;margin:0;font-size:13px;padding-left:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fileData span{color:var(--primary);font-weight:400}.hintYError{height:20px;display:flex;align-items:center;padding:0 16px;font-size:var(--mat-form-field-subscript-text-size, var(--mat-sys-body-small-size))}.borderError{border-color:var(--mat-sys-error)}.markError{color:var(--mat-sys-error)}.isDropping{border-style:solid;border-color:var(--primary)}\n"] }]
+                    ], template: "<mat-form-field\r\n  appearance=\"outline\"\r\n  floatLabel=\"always\"\r\n  (click)=\"onContainerClick()\"\r\n  class=\"chips-field\"\r\n  (dragover)=\"onDragOver($event)\"\r\n  (dragleave)=\"onDragLeave($event)\"\r\n  (drop)=\"onDrop($event)\"\r\n  [class.dragover]=\"isDropping()\"\r\n>\r\n  <mat-label>{{ label() }}</mat-label>\r\n  <mat-chip-grid \r\n    #chipGrid \r\n    [formControl]=\"internalControl\"\r\n    class=\"chips-grid\"\r\n  >\r\n    @for(file of value(); track file.name + $index) {\r\n      <mat-chip-row\r\n        (removed)=\"onDeleteFileClick(file)\"\r\n        class=\"chip-item\"\r\n      >\r\n        <span>({{ bytesToMegaBytes(file.size) }} MB)</span> {{ file.name }}\r\n        <button matChipRemove>\r\n            <mat-icon>cancel</mat-icon>\r\n        </button>\r\n      </mat-chip-row>\r\n    }\r\n  </mat-chip-grid>\r\n  <input \r\n    #inputFileRef\r\n    type=\"file\"\r\n    [accept]=\"getAccept()\" \r\n    [multiple]=\"multiple()\" \r\n    (change)=\"onInputchange($event)\"\r\n    [matChipInputFor]=\"chipGrid\"\r\n    style=\"display: none\"\r\n  />  \r\n  <mat-hint>{{ isDropping() ? 'Arrastrar archivos aqu\u00ED' : hint() }}</mat-hint>\r\n  <mat-error>{{ error() }}</mat-error>\r\n</mat-form-field>", styles: [":host{display:block}mat-form-field{cursor:pointer}.chips-field{width:auto}.chips-field.dragover .mat-mdc-form-field-flex{border:2px dashed var(--mdc-theme-primary)}.chips-field.dragover{background-color:#0000000a;transition:background-color .2s ease}.chips-grid{display:flex;flex-wrap:wrap;gap:8px}.chip-item{width:auto!important;max-width:fit-content}:host ::ng-deep .mat-mdc-form-field-infix{width:auto;min-width:180px}mat-form-field{--mat-form-field-outlined-focus-outline-color: var(--mat-sys-outline);--mat-form-field-outlined-outline-color: var(--mat-sys-outline);--mat-form-field-outlined-hover-outline-color: var(--mat-sys-outline);--mat-form-field-outlined-focus-label-text-color: var(--mat-sys-on-surface)}\n"] }]
+        }] });
+
+const includeNoSensible = (cadena, query) => {
+    const nomalizadoCadena = cadena
+        .toLowerCase()
+        .normalize('NFD')
+        .replace(/[\u0300-\u036f]/g, '');
+    const nomalizadoQuery = query
+        .toLowerCase()
+        .normalize('NFD')
+        .replace(/[\u0300-\u036f]/g, '');
+    return nomalizadoCadena.includes(nomalizadoQuery);
+};
+const base64ToUtf8 = (str) => {
+    return decodeURIComponent(atob(str)
+        .split('')
+        .map(function (c) {
+        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
+    })
+        .join(''));
+};
+
+class NgxBasicSelect {
+    //inputs
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
+    options = input.required(...(ngDevMode ? [{ debugName: "options" }] : []));
+    basicSelectConfig = input.required(...(ngDevMode ? [{ debugName: "basicSelectConfig" }] : []));
+    control = input.required(...(ngDevMode ? [{ debugName: "control" }] : []));
+    isLoading = input.required(...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    appearance = input('fill', ...(ngDevMode ? [{ debugName: "appearance" }] : []));
+    multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    clearable = input(false, ...(ngDevMode ? [{ debugName: "clearable" }] : []));
+    error = input('', ...(ngDevMode ? [{ debugName: "error" }] : []));
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : []));
+    //outputs
+    selectionChange = output();
+    //viewChilds
+    matSelect = viewChild.required('matSelect');
+    searchInput = viewChild('searchInput', ...(ngDevMode ? [{ debugName: "searchInput" }] : []));
+    ngOnInit() {
+        if (this.disabled()) {
+            this.control().disable();
+        }
+    }
+    onOpenedChange(opened) {
+        if (opened) {
+            this.onClearInputClick();
+        }
+    }
+    includeInFilter(option, query) {
+        return includeNoSensible(String(this.basicSelectConfig().displayedLabel(option)), query);
+    }
+    onClearClick() {
+        this.control().setValue(this.multiple() ? [] : null);
+        this.selectionChange.emit(this.multiple() ? [] : null);
+    }
+    onSelectionChange(event) {
+        if (this.multiple()) {
+            const values = event.value;
+            this.selectionChange.emit(values);
+        }
+        else {
+            const value = event.value;
+            this.selectionChange.emit(value);
+        }
+    }
+    onClearInputClick() {
+        const searchInputRef = this.searchInput();
+        if (searchInputRef) {
+            searchInputRef.nativeElement.value = '';
+            searchInputRef.nativeElement.focus();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NgxBasicSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: NgxBasicSelect, isStandalone: true, selector: "ngx-basic-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, basicSelectConfig: { classPropertyName: "basicSelectConfig", publicName: "basicSelectConfig", isSignal: true, isRequired: true, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, viewQueries: [{ propertyName: "matSelect", first: true, predicate: ["matSelect"], descendants: true, isSignal: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], ngImport: i0, template: "\n<mat-form-field [appearance]=\"appearance()\" [className]=\"class()\">\n    <mat-label>{{ label() }}</mat-label>\n    <mat-select \n        #matSelect\n        [formControl]=\"control()\"\n        (selectionChange)=\"onSelectionChange($event)\"\n        [multiple]=\"multiple()\"\n        [placeholder]=\"placeholder()\"\n        (openedChange)=\"onOpenedChange($event)\"\n    >\n        @if(!isLoading()) {\n            <div class=\"searchFilter\">\n                <mat-icon class=\"searchIcon\">search</mat-icon>\n                <input \n                    matInput\n                    #searchInput \n                    type=\"text\"\n                    (keydown)=\"$event.stopPropagation()\"\n                />\n                <button matIconButton (click)=\"onClearInputClick(); searchInput.value = ''\">\n                    <mat-icon>close</mat-icon>\n                </button>\n            </div>\n            @for(option of options(); track option[basicSelectConfig().valueKey]) {\n                <mat-option \n                    [value]=\"option[basicSelectConfig().valueKey]\" \n                    [disabled]=\"basicSelectConfig().disabled ? basicSelectConfig().disabled?.(option) : false\"\n                    [style]=\"{ display: includeInFilter(option, searchInput.value) ? 'flex' : 'none' }\"\n                >   \n                    {{ basicSelectConfig().displayedLabel(option) }}\n                </mat-option>\n            }\n        }\n    </mat-select>\n    @if(isLoading()) {\n        <mat-icon matSuffix><mat-spinner diameter=\"20\" /></mat-icon>\n    } @else if(clearable() && (multiple() ? control().value?.length : control().value)) {\n        <mat-icon matSuffix (click)=\"onClearClick(); $event.stopPropagation()\">close</mat-icon>\n    }\n    <mat-error>{{ error() }}</mat-error>\n</mat-form-field>", styles: [":host{display:block;width:100%}mat-form-field{width:100%}mat-select{width:100%}.searchFilter{display:flex;align-items:center;position:sticky;top:-8px;height:48px;width:100%;background:#fff;z-index:10;border-bottom:1px solid var(--accent-3)}.searchFilter input{height:48px;padding:0 48px;width:calc(100% - 96px);position:absolute;top:0;left:0}.searchFilter .searchIcon{position:absolute;top:0;left:0;height:48px;width:48px;display:flex;align-items:center;justify-content:center}button{position:absolute;right:5px}\n"], dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i3$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NgxBasicSelect, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-basic-select', imports: [
+                        MatInputModule,
+                        MatSelectModule,
+                        MatIconModule,
+                        MatButtonModule,
+                        MatFormFieldModule,
+                        ReactiveFormsModule,
+                        MatProgressSpinnerModule,
+                    ], template: "\n<mat-form-field [appearance]=\"appearance()\" [className]=\"class()\">\n    <mat-label>{{ label() }}</mat-label>\n    <mat-select \n        #matSelect\n        [formControl]=\"control()\"\n        (selectionChange)=\"onSelectionChange($event)\"\n        [multiple]=\"multiple()\"\n        [placeholder]=\"placeholder()\"\n        (openedChange)=\"onOpenedChange($event)\"\n    >\n        @if(!isLoading()) {\n            <div class=\"searchFilter\">\n                <mat-icon class=\"searchIcon\">search</mat-icon>\n                <input \n                    matInput\n                    #searchInput \n                    type=\"text\"\n                    (keydown)=\"$event.stopPropagation()\"\n                />\n                <button matIconButton (click)=\"onClearInputClick(); searchInput.value = ''\">\n                    <mat-icon>close</mat-icon>\n                </button>\n            </div>\n            @for(option of options(); track option[basicSelectConfig().valueKey]) {\n                <mat-option \n                    [value]=\"option[basicSelectConfig().valueKey]\" \n                    [disabled]=\"basicSelectConfig().disabled ? basicSelectConfig().disabled?.(option) : false\"\n                    [style]=\"{ display: includeInFilter(option, searchInput.value) ? 'flex' : 'none' }\"\n                >   \n                    {{ basicSelectConfig().displayedLabel(option) }}\n                </mat-option>\n            }\n        }\n    </mat-select>\n    @if(isLoading()) {\n        <mat-icon matSuffix><mat-spinner diameter=\"20\" /></mat-icon>\n    } @else if(clearable() && (multiple() ? control().value?.length : control().value)) {\n        <mat-icon matSuffix (click)=\"onClearClick(); $event.stopPropagation()\">close</mat-icon>\n    }\n    <mat-error>{{ error() }}</mat-error>\n</mat-form-field>", styles: [":host{display:block;width:100%}mat-form-field{width:100%}mat-select{width:100%}.searchFilter{display:flex;align-items:center;position:sticky;top:-8px;height:48px;width:100%;background:#fff;z-index:10;border-bottom:1px solid var(--accent-3)}.searchFilter input{height:48px;padding:0 48px;width:calc(100% - 96px);position:absolute;top:0;left:0}.searchFilter .searchIcon{position:absolute;top:0;left:0;height:48px;width:48px;display:flex;align-items:center;justify-content:center}button{position:absolute;right:5px}\n"] }]
+        }] });
+
+class PaginatedSelectBottomSheetComponent {
+    // dependencies injection
+    _bottomSheetRef = inject((MatBottomSheetRef));
+    _data = inject(MAT_BOTTOM_SHEET_DATA);
+    //signals
+    accumulatedItems = signal([], ...(ngDevMode ? [{ debugName: "accumulatedItems" }] : []));
+    queryInput = signal('', ...(ngDevMode ? [{ debugName: "queryInput" }] : []));
+    cancel$ = new Subject();
+    debouncedQuery = toSignal(toObservable(this.queryInput).pipe(debounceTime(500), distinctUntilChanged()), { initialValue: '' });
+    // Obtener valores iniciales seleccionados
+    getInitialSelectedValues() {
+        return this._data.selectedItems.map(item => item[this._data.config.valueKey]);
+    }
+    selectedsOptions = signal(this._data.selectedItems, ...(ngDevMode ? [{ debugName: "selectedsOptions" }] : []));
+    selectedsOptionsValues = signal(this.getInitialSelectedValues(), ...(ngDevMode ? [{ debugName: "selectedsOptionsValues" }] : []));
+    //resource
+    optionsResource = rxResource({
+        params: () => {
+            const filters = {
+                ...this._data.filters(),
+                query: this.debouncedQuery(),
+            };
+            this.cancel$.next();
+            return filters;
+        },
+        stream: ({ params }) => this._data.endpoint(params).pipe(takeUntil(this.cancel$)),
+        defaultValue: { items: [], total: 0 },
+    });
+    //computed
+    isLoading = computed(() => this.optionsResource.isLoading(), ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+    options = computed(() => this.accumulatedItems(), ...(ngDevMode ? [{ debugName: "options" }] : []));
+    total = computed(() => this.optionsResource.value().total, ...(ngDevMode ? [{ debugName: "total" }] : []));
+    //effect
+    filtersEffect = effect(() => {
+        const resourceValue = this.optionsResource.value();
+        const currentPage = this._data.filters().pageNumber;
+        if (currentPage === 1) {
+            this.accumulatedItems.set(resourceValue.items);
+        }
+        else {
+            this.accumulatedItems.update((current) => [...current, ...resourceValue.items]);
+        }
+    }, ...(ngDevMode ? [{ debugName: "filtersEffect" }] : []));
+    onScroll(div) {
+        if (this.isLoading())
+            return;
+        const scrollTop = div.scrollTop;
+        const clientHeight = div.clientHeight;
+        const scrollHeight = div.scrollHeight;
+        const marginToBottom = 300;
+        const isNearToBottom = scrollTop + clientHeight + marginToBottom >= scrollHeight;
+        const optionsLength = this.options().length;
+        const total = this.total();
+        if (isNearToBottom && total > optionsLength) {
+            this._data.filters.update((current) => ({
+                ...current,
+                pageNumber: current.pageNumber + 1
+            }));
+        }
+    }
+    onQueryChange(event, div) {
+        const query = event.target.value;
+        this.queryInput.set(query);
+        div.scrollTop = 0;
+        if (this._data.filters().pageNumber !== 1) {
+            this._data.filters.update((current) => ({
+                ...current,
+                pageNumber: 1
+            }));
+        }
+    }
+    onClearClick(input) {
+        input.value = '';
+        this.queryInput.set('');
+        if (this._data.filters().pageNumber !== 1) {
+            this._data.filters.update((current) => ({
+                ...current,
+                pageNumber: 1
+            }));
+        }
+    }
+    onSelectionChange(event) {
+        if (this._data.multiple) {
+            const selectedsOptionsValues = event.source.selectedOptions.selected.map(option => option.value);
+            const selectedsOptions = this.options().filter(option => selectedsOptionsValues.includes(option[this._data.config.valueKey]));
+            this.selectedsOptions.update(() => {
+                return selectedsOptions;
+            });
+        }
+        else {
+            const selectedOptionValue = event.options[0].value;
+            const selectedOption = this.options().find(option => option[this._data.config.valueKey] == selectedOptionValue);
+            this._bottomSheetRef.dismiss([selectedOption]);
+        }
+    }
+    isSelected(optionValue) {
+        return this.selectedsOptionsValues().includes(optionValue);
+    }
+    onResetClick() {
+        this.selectedsOptions.set([]);
+        this.selectedsOptionsValues.set([]);
+    }
+    onConfirmMultiSelectionClick() {
+        this._bottomSheetRef.dismiss(this.selectedsOptions());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: PaginatedSelectBottomSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: PaginatedSelectBottomSheetComponent, isStandalone: true, selector: "paginated-select-bottom-sheet", ngImport: i0, template: "<div class=\"bottomSheetContainer\">\n    <div class=\"header\">\n        @if(_data.title) {\n            <div class=\"title\">\n                {{ _data.title }}\n            </div>\n        }\n        @if(!_data.hideFilter) {\n            <mat-form-field subscriptSizing=\"dynamic\" appearance=\"outline\">\n                <mat-icon matPrefix>search</mat-icon>\n                <input matInput #searchInput [placeholder]=\"_data.filterPlaceholder\" (input)=\"onQueryChange($event, optionsContainer); $event.stopPropagation()\" />\n                @if(searchInput.value.length > 0) {\n                    <button matSuffix mat-icon-button (click)=\"onClearClick(searchInput); $event.stopPropagation()\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                }\n            </mat-form-field>\n        \n            <mat-chip-listbox [multiple]=\"false\">\n                @for(filterKey of _data.config.filtersKeys; track filterKey.key) {\n                    <mat-chip-option [value]=\"filterKey.key\" [selected]=\"\">{{ filterKey.label() }}</mat-chip-option>\n                }\n            </mat-chip-listbox>\n        }\n    </div>\n    <div class=\"loading\">\n        @if(isLoading()) {\n            <mat-progress-bar mode=\"indeterminate\" />\n        }\n    </div>\n    <div #optionsContainer class=\"optionsContainer\" (scroll)=\"onScroll(optionsContainer)\">\n        <mat-selection-list [multiple]=\"_data.multiple\" (selectionChange)=\"onSelectionChange($event)\">\n            @for(option of options(); track option[_data.config.valueKey]; let last = $last) {\n                <mat-list-option \n                    [value]=\"option[_data.config.valueKey]\"\n                    [selected]=\"isSelected(option[_data.config.valueKey])\"\n                    [disabled]=\"_data.config.disabled ? _data.config.disabled(option) : false\"\n                >\n                    {{_data.config.displayedLabel(option)}}\n                </mat-list-option>\n                @if(!last) {\n                    <mat-divider />\n                }\n            }\n        </mat-selection-list>\n    </div> \n\n\n    <div class=\"footer\">\n        @if(_data.multiple) {\n            <div class=\"length\">\n                {{ selectedsOptions().length }} / {{ total() }} {{ _data.multipleItemsLabel }}\n            </div>\n            <div class=\"actions\">\n                @if(selectedsOptions().length > 0) {\n                    <button mat-button (click)=\"onResetClick()\">{{ _data.resetLabel }}</button>\n                }\n                <button mat-raised-button color=\"primary\" (click)=\"onConfirmMultiSelectionClick()\">{{ _data.confirmLabel }}</button>\n            </div>\n        } @else {\n            <div class=\"length\">\n                {{ total() }} {{ _data.itemsLabel }}\n            </div>\n        }\n    </div>\n</div>", styles: [":host{display:flex;flex-direction:column;min-width:720px}.mat-bottom-sheet-container{padding:0 16px!important}.bottomSheetContainer{display:flex;flex-direction:column;height:100%;max-height:80vh}.bottomSheetContainer .header{width:100%;flex:0 0 auto;margin-top:15px}.bottomSheetContainer .header .title{margin-bottom:10px;font-size:20px;font-weight:500}.bottomSheetContainer .header mat-form-field{width:100%}.bottomSheetContainer .header mat-chip-listbox{width:100%}.bottomSheetContainer .loading{display:flex;align-items:center;width:100%;height:20px}.bottomSheetContainer .optionsContainer{flex:1 1 auto;height:360px;width:100%;overflow-y:auto}.bottomSheetContainer .footer{margin-top:8px;width:100%;flex:0 0 auto;display:flex;justify-content:space-between;height:56px;box-shadow:0 15px 10px -15px #0000001a}mat-form-field{--mat-form-field-outlined-focus-outline-color: var(--mat-sys-outline);--mat-form-field-outlined-outline-color: var(--mat-sys-outline);--mat-form-field-outlined-hover-outline-color: var(--mat-sys-outline)}@media (max-width: 960px){:host{min-width:auto}}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i2$3.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i6.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i6.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i7$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i8$1.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i8$1.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "ngmodule", type: ReactiveFormsModule }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: PaginatedSelectBottomSheetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'paginated-select-bottom-sheet', imports: [
+                        MatButtonModule,
+                        MatDividerModule,
+                        CommonModule,
+                        MatFormFieldModule,
+                        MatIconModule,
+                        MatInputModule,
+                        MatChipsModule,
+                        MatProgressBarModule,
+                        MatListModule,
+                        ReactiveFormsModule,
+                    ], encapsulation: ViewEncapsulation.None, template: "<div class=\"bottomSheetContainer\">\n    <div class=\"header\">\n        @if(_data.title) {\n            <div class=\"title\">\n                {{ _data.title }}\n            </div>\n        }\n        @if(!_data.hideFilter) {\n            <mat-form-field subscriptSizing=\"dynamic\" appearance=\"outline\">\n                <mat-icon matPrefix>search</mat-icon>\n                <input matInput #searchInput [placeholder]=\"_data.filterPlaceholder\" (input)=\"onQueryChange($event, optionsContainer); $event.stopPropagation()\" />\n                @if(searchInput.value.length > 0) {\n                    <button matSuffix mat-icon-button (click)=\"onClearClick(searchInput); $event.stopPropagation()\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                }\n            </mat-form-field>\n        \n            <mat-chip-listbox [multiple]=\"false\">\n                @for(filterKey of _data.config.filtersKeys; track filterKey.key) {\n                    <mat-chip-option [value]=\"filterKey.key\" [selected]=\"\">{{ filterKey.label() }}</mat-chip-option>\n                }\n            </mat-chip-listbox>\n        }\n    </div>\n    <div class=\"loading\">\n        @if(isLoading()) {\n            <mat-progress-bar mode=\"indeterminate\" />\n        }\n    </div>\n    <div #optionsContainer class=\"optionsContainer\" (scroll)=\"onScroll(optionsContainer)\">\n        <mat-selection-list [multiple]=\"_data.multiple\" (selectionChange)=\"onSelectionChange($event)\">\n            @for(option of options(); track option[_data.config.valueKey]; let last = $last) {\n                <mat-list-option \n                    [value]=\"option[_data.config.valueKey]\"\n                    [selected]=\"isSelected(option[_data.config.valueKey])\"\n                    [disabled]=\"_data.config.disabled ? _data.config.disabled(option) : false\"\n                >\n                    {{_data.config.displayedLabel(option)}}\n                </mat-list-option>\n                @if(!last) {\n                    <mat-divider />\n                }\n            }\n        </mat-selection-list>\n    </div> \n\n\n    <div class=\"footer\">\n        @if(_data.multiple) {\n            <div class=\"length\">\n                {{ selectedsOptions().length }} / {{ total() }} {{ _data.multipleItemsLabel }}\n            </div>\n            <div class=\"actions\">\n                @if(selectedsOptions().length > 0) {\n                    <button mat-button (click)=\"onResetClick()\">{{ _data.resetLabel }}</button>\n                }\n                <button mat-raised-button color=\"primary\" (click)=\"onConfirmMultiSelectionClick()\">{{ _data.confirmLabel }}</button>\n            </div>\n        } @else {\n            <div class=\"length\">\n                {{ total() }} {{ _data.itemsLabel }}\n            </div>\n        }\n    </div>\n</div>", styles: [":host{display:flex;flex-direction:column;min-width:720px}.mat-bottom-sheet-container{padding:0 16px!important}.bottomSheetContainer{display:flex;flex-direction:column;height:100%;max-height:80vh}.bottomSheetContainer .header{width:100%;flex:0 0 auto;margin-top:15px}.bottomSheetContainer .header .title{margin-bottom:10px;font-size:20px;font-weight:500}.bottomSheetContainer .header mat-form-field{width:100%}.bottomSheetContainer .header mat-chip-listbox{width:100%}.bottomSheetContainer .loading{display:flex;align-items:center;width:100%;height:20px}.bottomSheetContainer .optionsContainer{flex:1 1 auto;height:360px;width:100%;overflow-y:auto}.bottomSheetContainer .footer{margin-top:8px;width:100%;flex:0 0 auto;display:flex;justify-content:space-between;height:56px;box-shadow:0 15px 10px -15px #0000001a}mat-form-field{--mat-form-field-outlined-focus-outline-color: var(--mat-sys-outline);--mat-form-field-outlined-outline-color: var(--mat-sys-outline);--mat-form-field-outlined-hover-outline-color: var(--mat-sys-outline)}@media (max-width: 960px){:host{min-width:auto}}\n"] }]
         }] });
 
+class NgxPaginatedSelect {
+    // dependencies injection
+    _bottomSheet = inject(MatBottomSheet);
+    cdr = inject(ChangeDetectorRef);
+    // inputs
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
+    title = input('', ...(ngDevMode ? [{ debugName: "title" }] : []));
+    endpoint = input.required(...(ngDevMode ? [{ debugName: "endpoint" }] : []));
+    config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
+    filters = input(signal({
+        pageNumber: 1,
+        pageSize: 10,
+        query: undefined,
+        sortBy: undefined
+    }), ...(ngDevMode ? [{ debugName: "filters" }] : []));
+    control = input.required(...(ngDevMode ? [{ debugName: "control" }] : []));
+    selectedItems = input([], ...(ngDevMode ? [{ debugName: "selectedItems" }] : []));
+    hideFilter = input(false, ...(ngDevMode ? [{ debugName: "hideFilter" }] : []));
+    filterPlaceholder = input('Select an option', ...(ngDevMode ? [{ debugName: "filterPlaceholder" }] : []));
+    multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    clearable = input(false, ...(ngDevMode ? [{ debugName: "clearable" }] : []));
+    itemsLabel = input('items', ...(ngDevMode ? [{ debugName: "itemsLabel" }] : []));
+    multipleItemsLabel = input('items selected', ...(ngDevMode ? [{ debugName: "multipleItemsLabel" }] : []));
+    resetLabel = input('Reset', ...(ngDevMode ? [{ debugName: "resetLabel" }] : []));
+    confirmLabel = input('Confirm', ...(ngDevMode ? [{ debugName: "confirmLabel" }] : []));
+    error = input('', ...(ngDevMode ? [{ debugName: "error" }] : []));
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : []));
+    hideChips = input(false, ...(ngDevMode ? [{ debugName: "hideChips" }] : []));
+    _selectedItems = signal([], ...(ngDevMode ? [{ debugName: "_selectedItems" }] : []));
+    constructor() {
+        effect(() => {
+            this._selectedItems.set(this.selectedItems());
+        });
+    }
+    ngOnInit() {
+        if (this.disabled()) {
+            this.control().disable();
+        }
+    }
+    getSelectedItemsLabel() {
+        return this._selectedItems()
+            .map((item) => String(this.config().displayedLabel(item)))
+            .join(', ') || '';
+    }
+    // signals
+    // filters = signal<PaginatedFilter>(this.initialFilters);
+    // effect
+    controlEffect = effect(() => {
+        const selectedItems = this._selectedItems();
+        if (this.multiple()) {
+            this.control().setValue(selectedItems.map((item) => item[this.config().valueKey]));
+        }
+        else {
+            this.control().setValue(selectedItems?.[0]?.[this.config().valueKey]);
+        }
+        this.cdr.markForCheck();
+    }, ...(ngDevMode ? [{ debugName: "controlEffect" }] : []));
+    onOpenBottomSheetClick(event) {
+        event.stopPropagation();
+        event.preventDefault();
+        if (this.disabled()) {
+            return;
+        }
+        event.target.blur();
+        this.control().markAsTouched();
+        this.control().markAsDirty();
+        this._bottomSheet.open(PaginatedSelectBottomSheetComponent, {
+            data: {
+                label: this.label(),
+                title: this.title(),
+                endpoint: this.endpoint(),
+                config: this.config(),
+                selectedItems: this._selectedItems(),
+                hideFilter: this.hideFilter(),
+                filters: this.filters(),
+                filterPlaceholder: this.filterPlaceholder(),
+                multiple: this.multiple(),
+                itemsLabel: this.itemsLabel(),
+                multipleItemsLabel: this.multipleItemsLabel(),
+                resetLabel: this.resetLabel(),
+                confirmLabel: this.confirmLabel(),
+            },
+        }).afterDismissed().subscribe((selectedItems) => {
+            // this.filters().set(this.initialFilters);
+            if (selectedItems !== undefined) {
+                this._selectedItems.set(selectedItems);
+            }
+        });
+    }
+    onChipRemoved(item) {
+        this._selectedItems.set(this._selectedItems().filter(i => i[this.config().valueKey] !== item[this.config().valueKey]));
+    }
+    onResetClick(event) {
+        event.stopPropagation();
+        event.preventDefault();
+        // this.filters.set(this.initialFilters);
+        this._selectedItems.set(this.selectedItems());
+        this.control().reset();
+        this.control().markAsTouched();
+        this.control().updateValueAndValidity();
+        this.cdr.markForCheck();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NgxPaginatedSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: NgxPaginatedSelect, isStandalone: true, selector: "ngx-paginated-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, endpoint: { classPropertyName: "endpoint", publicName: "endpoint", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null }, selectedItems: { classPropertyName: "selectedItems", publicName: "selectedItems", isSignal: true, isRequired: false, transformFunction: null }, hideFilter: { classPropertyName: "hideFilter", publicName: "hideFilter", isSignal: true, isRequired: false, transformFunction: null }, filterPlaceholder: { classPropertyName: "filterPlaceholder", publicName: "filterPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, itemsLabel: { classPropertyName: "itemsLabel", publicName: "itemsLabel", isSignal: true, isRequired: false, transformFunction: null }, multipleItemsLabel: { classPropertyName: "multipleItemsLabel", publicName: "multipleItemsLabel", isSignal: true, isRequired: false, transformFunction: null }, resetLabel: { classPropertyName: "resetLabel", publicName: "resetLabel", isSignal: true, isRequired: false, transformFunction: null }, confirmLabel: { classPropertyName: "confirmLabel", publicName: "confirmLabel", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, hideChips: { classPropertyName: "hideChips", publicName: "hideChips", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if(hideChips()) {\n    <mat-form-field \n        appearance=\"outline\" \n        floatLabel=\"always\" \n        (click)=\"onOpenBottomSheetClick($event)\"\n    >\n        <mat-label>{{ label() }}</mat-label>\n    \n        <input\n            matInput\n            [formControl]=\"control()\"\n            [readonly]=\"true\"\n            [value]=\"getSelectedItemsLabel()\"\n            class=\"clickable-input\"\n        />\n        <div matSuffix>\n            @if(clearable() && control().value) {\n                <button matIconButton matSuffix  (click)=\"onResetClick($event);\">\n                    <mat-icon>close</mat-icon>\n                </button>\n            }\n            <mat-icon matSuffix>arrow_drop_down</mat-icon>\n        </div>\n        <mat-error>{{ error() }}</mat-error>\n    </mat-form-field>\n} @else {\n    <mat-form-field \n        appearance=\"outline\" \n        floatLabel=\"always\"\n        (click)=\"onOpenBottomSheetClick($event)\"\n        class=\"chips-field\"\n    >\n        <mat-label>{{ label() }}</mat-label>\n        <mat-chip-grid #chipGrid class=\"chips-grid\" [formControl]=\"control()\">\n            @for(item of _selectedItems(); track item[config().valueKey]) {\n                <mat-chip-row\n                    (removed)=\"onChipRemoved(item)\"\n                    class=\"chip-item\"\n                >\n                    {{ config().displayedLabel(item) }}\n                    <button matChipRemove>\n                        <mat-icon>cancel</mat-icon>\n                    </button>\n                </mat-chip-row>\n            }\n        </mat-chip-grid>\n\n\n        <input \n            matInput\n            [matChipInputFor]=\"chipGrid\"\n            style=\"display: none\"\n        />\n        <mat-icon matSuffix>arrow_drop_down</mat-icon>\n        <mat-error>{{ error() }}</mat-error>\n    </mat-form-field>\n}", styles: [":host{display:block}.clickable-input{cursor:pointer!important;pointer-events:none}mat-form-field{cursor:pointer}.chips-field{width:auto}.chips-grid{display:flex;flex-wrap:wrap;gap:8px}.chip-item{width:auto!important;max-width:fit-content}:host ::ng-deep .mat-mdc-form-field-infix{width:auto;min-width:180px}mat-form-field{--mat-form-field-outlined-focus-outline-color: var(--mat-sys-outline);--mat-form-field-outlined-outline-color: var(--mat-sys-outline);--mat-form-field-outlined-hover-outline-color: var(--mat-sys-outline);--mat-form-field-outlined-focus-label-text-color: var(--mat-sys-on-surface)}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i6.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i6.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i6.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i6.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NgxPaginatedSelect, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-paginated-select', imports: [
+                        MatButtonModule,
+                        MatBottomSheetModule,
+                        CommonModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatIconModule,
+                        MatSelectModule,
+                        ReactiveFormsModule,
+                        MatChipsModule
+                    ], template: "@if(hideChips()) {\n    <mat-form-field \n        appearance=\"outline\" \n        floatLabel=\"always\" \n        (click)=\"onOpenBottomSheetClick($event)\"\n    >\n        <mat-label>{{ label() }}</mat-label>\n    \n        <input\n            matInput\n            [formControl]=\"control()\"\n            [readonly]=\"true\"\n            [value]=\"getSelectedItemsLabel()\"\n            class=\"clickable-input\"\n        />\n        <div matSuffix>\n            @if(clearable() && control().value) {\n                <button matIconButton matSuffix  (click)=\"onResetClick($event);\">\n                    <mat-icon>close</mat-icon>\n                </button>\n            }\n            <mat-icon matSuffix>arrow_drop_down</mat-icon>\n        </div>\n        <mat-error>{{ error() }}</mat-error>\n    </mat-form-field>\n} @else {\n    <mat-form-field \n        appearance=\"outline\" \n        floatLabel=\"always\"\n        (click)=\"onOpenBottomSheetClick($event)\"\n        class=\"chips-field\"\n    >\n        <mat-label>{{ label() }}</mat-label>\n        <mat-chip-grid #chipGrid class=\"chips-grid\" [formControl]=\"control()\">\n            @for(item of _selectedItems(); track item[config().valueKey]) {\n                <mat-chip-row\n                    (removed)=\"onChipRemoved(item)\"\n                    class=\"chip-item\"\n                >\n                    {{ config().displayedLabel(item) }}\n                    <button matChipRemove>\n                        <mat-icon>cancel</mat-icon>\n                    </button>\n                </mat-chip-row>\n            }\n        </mat-chip-grid>\n\n\n        <input \n            matInput\n            [matChipInputFor]=\"chipGrid\"\n            style=\"display: none\"\n        />\n        <mat-icon matSuffix>arrow_drop_down</mat-icon>\n        <mat-error>{{ error() }}</mat-error>\n    </mat-form-field>\n}", styles: [":host{display:block}.clickable-input{cursor:pointer!important;pointer-events:none}mat-form-field{cursor:pointer}.chips-field{width:auto}.chips-grid{display:flex;flex-wrap:wrap;gap:8px}.chip-item{width:auto!important;max-width:fit-content}:host ::ng-deep .mat-mdc-form-field-infix{width:auto;min-width:180px}mat-form-field{--mat-form-field-outlined-focus-outline-color: var(--mat-sys-outline);--mat-form-field-outlined-outline-color: var(--mat-sys-outline);--mat-form-field-outlined-hover-outline-color: var(--mat-sys-outline);--mat-form-field-outlined-focus-label-text-color: var(--mat-sys-on-surface)}\n"] }]
+        }], ctorParameters: () => [] });
+
 // export * from './lib/services/index';
 // export * from './lib/utils/index';
 
@@ -428,5 +814,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { NgxBasicTable, NgxInputFile, NgxLoadingButton, NgxPaginatedTable };
+export { NgxBasicSelect, NgxBasicTable, NgxInputFile, NgxLoadingButton, NgxPaginatedSelect, NgxPaginatedTable };
 //# sourceMappingURL=ngx-eiffage-material.mjs.map