sapenlinea-components 0.0.25 → 0.0.27

package/fesm2022/sapenlinea-components.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, output, signal, computed, effect, forwardRef, Component, EventEmitter, Output, Input, HostListener } from '@angular/core';
+import { input, output, signal, computed, effect, forwardRef, Component, EventEmitter, Output, Input, HostListener, ViewChildren } from '@angular/core';
 import * as i1$1 from '@angular/forms';
 import { ReactiveFormsModule, NG_VALUE_ACCESSOR, FormsModule, FormGroup, FormControl, Validators } from '@angular/forms';
 import * as i1 from '@angular/common';
@@ -566,6 +566,19 @@ class Table {
     optionSelected = output();
     iconAction = output();
     statusToneMap = input({}, ...(ngDevMode ? [{ debugName: "statusToneMap" }] : []));
+    chips;
+    ngAfterViewInit() {
+        setTimeout(() => {
+            const chipEls = this.chips.map(c => c.nativeElement);
+            const parentWidth = chipEls[0]?.parentElement.offsetWidth || 0;
+            const widths = chipEls.map(el => el.scrollWidth);
+            const maxContentWidth = Math.max(...widths);
+            const finalWidth = Math.min(maxContentWidth, parentWidth);
+            chipEls.forEach(el => {
+                el.style.width = finalWidth + 'px';
+            });
+        });
+    }
     toggleMenu(index) {
         this.openedMenu.set(this.openedMenu() === index ? null : index);
     }
@@ -704,12 +717,15 @@ class Table {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: Table, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: Table, isStandalone: true, selector: "lib-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: true, isRequired: false, transformFunction: null }, statusToneMap: { classPropertyName: "statusToneMap", publicName: "statusToneMap", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { optionSelected: "optionSelected", iconAction: "iconAction" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, ngImport: i0, template: "<div class=\"table-wrapper\">\r\n  <table class=\"inner-table\">\r\n    <thead>\r\n      <tr>\r\n        @for (col of columns(); track col.key) {\r\n        <th\r\n          (click)=\"col.sortable !== false && onSort(col)\"\r\n          [class.sortable]=\"col.sortable !== false\"\r\n          [class]=\"getAlignment(col)\"\r\n        >\r\n          {{ col.label }}\r\n\r\n          <!-- iconos de orden opcionales -->\r\n          @if (sortColumn() === col.key) {\r\n          <span class=\"sort-icon\">\r\n            {{ sortDirection() === 'asc' ? '\u25B2' : '\u25BC' }}\r\n          </span>\r\n          }\r\n        </th>\r\n        }\r\n\r\n        <!-- columna para acciones -->\r\n        @if (showActions()) {\r\n        <th></th>\r\n        }\r\n      </tr>\r\n    </thead>\r\n\r\n    <tbody>\r\n      @for (row of sortData(); track $index) {\r\n      <tr>\r\n        @for (col of columns(); track col.key) {\r\n        <td [class]=\"getAlignment(col)\">\r\n          @if (col.type === 'status') { @let style =\r\n          getStatusStyle(row[col.key]);\r\n          <span\r\n            class=\"status-chip\"\r\n            [style.background-color]=\"style.bg\"\r\n            [style.color]=\"style.color\"\r\n          >\r\n            <span\r\n              class=\"status-dot\"\r\n              [style.background-color]=\"style.color\"\r\n            ></span>\r\n\r\n            {{ row[col.key]?.toString().toUpperCase() }}\r\n          </span>\r\n          } @else if (col.type === 'icon-button') {\r\n\r\n          <button\r\n            (click)=\"onIconColumnClick(col, row, $event)\"\r\n          >\r\n            <span\r\n            class=\"icon\"\r\n              [class]=\"col.icon\"\r\n              [style.color]=\"col.iconColor\"\r\n            ></span>\r\n          </button>\r\n\r\n          } @else { {{ formatValue(col, row[col.key]) }} }\r\n        </td>\r\n        }\r\n\r\n        <!-- Celda de acciones -->\r\n        @if (showActions()) {\r\n        <td class=\"acciones-cell\">\r\n          <div class=\"menu-acciones\">\r\n            <button class=\"icon-button\" (click)=\"openModal(row)\">\r\n              <div class=\"content\">\r\n                <div class=\"state-layer\">\r\n                  <svg\r\n                    xmlns=\"http://www.w3.org/2000/svg\"\r\n                    class=\"more-vert\"\r\n                    width=\"20\"\r\n                    height=\"20\"\r\n                    viewBox=\"0 0 24 24\"\r\n                    fill=\"none\"\r\n                    stroke=\"currentColor\"\r\n                    stroke-width=\"2\"\r\n                    stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                  >\r\n                    <circle cx=\"12\" cy=\"5\" r=\"1\" />\r\n                    <circle cx=\"12\" cy=\"12\" r=\"1\" />\r\n                    <circle cx=\"12\" cy=\"19\" r=\"1\" />\r\n                  </svg>\r\n                </div>\r\n              </div>\r\n            </button>\r\n            @if(selectedRow()?.['id'] === row['id']){\r\n            <div class=\"modal-options\" (click)=\"$event.stopPropagation()\">\r\n              <div class=\"modal-content\">\r\n                <ul>\r\n                  @for (option of getActionsForRow(row); track $index) {\r\n                  <li\r\n                    class=\"option-item\"\r\n                    [style.color]=\"option.color\"\r\n                    (click)=\"onOptionClick(option, row)\"\r\n                  >\r\n                    <span class=\"icon\" [class]=\"option.icon\"></span>\r\n                    <span class=\"label\">{{ option.label }}</span>\r\n                  </li>\r\n                  }\r\n                </ul>\r\n              </div>\r\n            </div>\r\n            }\r\n          </div>\r\n        </td>\r\n        }\r\n      </tr>\r\n      }\r\n    </tbody>\r\n  </table>\r\n</div>\r\n", styles: [".table-wrapper{width:100%;border-radius:20px;border:1px solid #c7c7ad}.inner-table{width:100%;border-collapse:separate;font-size:14px;border-spacing:0;border-radius:20px;background:#ebe8d6}.inner-table thead{background:#f0f0db}.inner-table thead tr th:first-child{border-top-left-radius:20px}.inner-table thead tr th:last-child{border-top-right-radius:20px}.inner-table th{text-align:left;padding:12px 16px;font-weight:600;color:#3a3a3a;text-transform:uppercase}.inner-table td{padding:12px 16px;color:#4a4a4a;border-top:1px solid #c7c7ad}.acciones-cell{text-align:center;padding:6px;position:relative}.menu-acciones{display:flex;align-items:center;justify-content:center;position:relative}button{background-color:transparent;border:none}.icon-button{background-color:var(--secondary-container, #dee58f);width:36px;height:36px;border:none;cursor:pointer;padding:0;border-radius:100%;display:flex;align-items:center;justify-content:center}.icon-button:hover{background:#0000000f}.more-vert{color:#4a4a4a;display:block}.modal-options{display:flex;justify-items:center;align-items:center;background-color:var(--surface-container-lowest, #ffffff);width:200px;border-radius:8px;position:absolute;top:100%;right:0;z-index:99}.modal-content{width:100%;border-radius:8px;border:1px solid var(--outline-variant, #c7c7ad);overflow:hidden}.option-item{display:flex;align-items:center;height:56px;padding:8px 12px;cursor:pointer}.option-item:hover{background-color:#0000001a}.option-item:active{background-color:#dee58f}.icon{margin-right:8px}.option-item .label{font-weight:500;font-size:16px}.icon-refresh,.icon-delete,.icon-edit,.icon-activate,.icon-deactivate,.icon-view,.icon-sanction,.icon-file{width:24px;height:24px;background-color:currentColor;color:currentColor;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;mask-size:contain;mask-repeat:no-repeat;display:inline-block;cursor:pointer}.icon-refresh{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4\"/><path d=\"M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4\"/><path d=\"M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4\"/></svg>')}.icon-delete{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M20 6a1 1 0 0 1 .117 1.993l-.117 .007h-.081l-.919 11a3 3 0 0 1 -2.824 2.995l-.176 .005h-8c-1.598 0 -2.904 -1.249 -2.992 -2.75l-.005 -.167l-.923 -11.083h-.08a1 1 0 0 1 -.117 -1.993l.117 -.007h16z\"/><path d=\"M14 2a2 2 0 0 1 2 2a1 1 0 0 1 -1.993 .117l-.007 -.117h-4l-.007 .117a1 1 0 0 1 -1.993 -.117a2 2 0 0 1 1.85 -1.995l.15 -.005h4z\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M20 6a1 1 0 0 1 .117 1.993l-.117 .007h-.081l-.919 11a3 3 0 0 1 -2.824 2.995l-.176 .005h-8c-1.598 0 -2.904 -1.249 -2.992 -2.75l-.005 -.167l-.923 -11.083h-.08a1 1 0 0 1 -.117 -1.993l.117 -.007h16z\"/><path d=\"M14 2a2 2 0 0 1 2 2a1 1 0 0 1 -1.993 .117l-.007 -.117h-4l-.007 .117a1 1 0 0 1 -1.993 -.117a2 2 0 0 1 1.85 -1.995l.15 -.005h4z\"/></svg>')}.icon-edit{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4\"/><path d=\"M13.5 6.5l4 4\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4\"/><path d=\"M13.5 6.5l4 4\"/></svg>')}.icon-activate{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z\"/></svg>')}.icon-deactivate{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M15 9l-6 6M9 9l6 6\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M15 9l-6 6M9 9l6 6\"/></svg>')}.icon-view{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0\"/><path d=\"M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0\"/><path d=\"M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6\"/></svg>')}.icon-sanction{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0\"/><path d=\"M9 15l6 -6\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0\"/><path d=\"M9 15l6 -6\"/></svg>')}.icon-file{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M14 3v4a1 1 0 0 0 1 1h4\"/><path d=\"M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4\"/><path d=\"M5 18h1.5a1.5 1.5 0 0 0 0 -3h-1.5v6\"/><path d=\"M17 18h2\"/><path d=\"M20 15h-3v6\"/><path d=\"M11 15v6h1a2 2 0 0 0 2 -2v-2a2 2 0 0 0 -2 -2h-1\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M14 3v4a1 1 0 0 0 1 1h4\"/><path d=\"M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4\"/><path d=\"M5 18h1.5a1.5 1.5 0 0 0 0 -3h-1.5v6\"/><path d=\"M17 18h2\"/><path d=\"M20 15h-3v6\"/><path d=\"M11 15v6h1a2 2 0 0 0 2 -2v-2a2 2 0 0 0 -2 -2h-1\"/></svg>')}th.left.sortable,th.left,td.left{text-align:left}th.right.sortable,th.right,td.right{text-align:right}th.center.sortable,th.center,td.center{text-align:center}.status-chip{position:relative;display:inline-flex;align-items:center;width:100%;max-width:80%;gap:6px;padding:4px 10px;border-radius:8px;font-size:13px;font-weight:500;white-space:nowrap;text-overflow:ellipsis}.status-dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0}.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.sortable:hover{opacity:.7}.sort-icon{margin-left:6px;font-size:12px;pointer-events:none}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: Table, isStandalone: true, selector: "lib-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: true, isRequired: false, transformFunction: null }, statusToneMap: { classPropertyName: "statusToneMap", publicName: "statusToneMap", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { optionSelected: "optionSelected", iconAction: "iconAction" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, viewQueries: [{ propertyName: "chips", predicate: ["status-chip"], descendants: true }], ngImport: i0, template: "<div class=\"table-wrapper\">\r\n  <table class=\"inner-table\">\r\n    <thead>\r\n      <tr>\r\n        @for (col of columns(); track col.key) {\r\n        <th\r\n          (click)=\"col.sortable !== false && onSort(col)\"\r\n          [class.sortable]=\"col.sortable !== false\"\r\n          [class]=\"getAlignment(col)\"\r\n        >\r\n          {{ col.label }}\r\n\r\n          <!-- iconos de orden opcionales -->\r\n          @if (sortColumn() === col.key) {\r\n          <span class=\"sort-icon\">\r\n            {{ sortDirection() === 'asc' ? '\u25B2' : '\u25BC' }}\r\n          </span>\r\n          }\r\n        </th>\r\n        }\r\n\r\n        <!-- columna para acciones -->\r\n        @if (showActions()) {\r\n        <th></th>\r\n        }\r\n      </tr>\r\n    </thead>\r\n\r\n    <tbody>\r\n      @for (row of sortData(); track $index) {\r\n      <tr>\r\n        @for (col of columns(); track col.key) {\r\n        <td [class]=\"getAlignment(col)\">\r\n          @if (col.type === 'status') { @let style =\r\n          getStatusStyle(row[col.key]);\r\n          <span\r\n            class=\"status-chip\"\r\n            id=\"status-chip\"\r\n            [style.background-color]=\"style.bg\"\r\n            [style.color]=\"style.color\"\r\n          >\r\n            <span\r\n              class=\"status-dot\"\r\n              [style.background-color]=\"style.color\"\r\n            ></span>\r\n\r\n            {{ row[col.key]?.toString().toUpperCase() }}\r\n          </span>\r\n\r\n          } @else if (col.type === 'icon-button') {\r\n\r\n          <button (click)=\"onIconColumnClick(col, row, $event)\">\r\n            <span\r\n              class=\"icon\"\r\n              [class]=\"col.icon\"\r\n              [style.color]=\"col.iconColor\"\r\n            ></span>\r\n          </button>\r\n\r\n          } @else { {{ formatValue(col, row[col.key]) }} }\r\n        </td>\r\n        }\r\n\r\n        <!-- Celda de acciones -->\r\n        @if (showActions()) {\r\n        <td class=\"acciones-cell\">\r\n          <div class=\"menu-acciones\">\r\n            <button class=\"icon-button\" (click)=\"openModal(row)\">\r\n              <div class=\"content\">\r\n                <div class=\"state-layer\">\r\n                  <svg\r\n                    xmlns=\"http://www.w3.org/2000/svg\"\r\n                    class=\"more-vert\"\r\n                    width=\"20\"\r\n                    height=\"20\"\r\n                    viewBox=\"0 0 24 24\"\r\n                    fill=\"none\"\r\n                    stroke=\"currentColor\"\r\n                    stroke-width=\"2\"\r\n                    stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                  >\r\n                    <circle cx=\"12\" cy=\"5\" r=\"1\" />\r\n                    <circle cx=\"12\" cy=\"12\" r=\"1\" />\r\n                    <circle cx=\"12\" cy=\"19\" r=\"1\" />\r\n                  </svg>\r\n                </div>\r\n              </div>\r\n            </button>\r\n            @if(selectedRow()?.['id'] === row['id']){\r\n            <div class=\"modal-options\" (click)=\"$event.stopPropagation()\">\r\n              <div class=\"modal-content\">\r\n                <ul>\r\n                  @for (option of getActionsForRow(row); track $index) {\r\n                  <li\r\n                    class=\"option-item\"\r\n                    [style.color]=\"option.color\"\r\n                    (click)=\"onOptionClick(option, row)\"\r\n                  >\r\n                    <span class=\"icon\" [class]=\"option.icon\"></span>\r\n                    <span class=\"label\">{{ option.label }}</span>\r\n                  </li>\r\n                  }\r\n                </ul>\r\n              </div>\r\n            </div>\r\n            }\r\n          </div>\r\n        </td>\r\n        }\r\n      </tr>\r\n      }\r\n    </tbody>\r\n  </table>\r\n</div>\r\n", styles: [".table-wrapper{width:100%;border-radius:20px;border:1px solid #c7c7ad}.inner-table{width:100%;border-collapse:separate;font-size:14px;border-spacing:0;border-radius:20px;background:#ebe8d6}.inner-table thead{background:#f0f0db}.inner-table thead tr th:first-child{border-top-left-radius:20px}.inner-table thead tr th:last-child{border-top-right-radius:20px}.inner-table th{text-align:left;padding:12px 16px;font-weight:600;color:#3a3a3a;text-transform:uppercase}.inner-table td{padding:12px 16px;color:#4a4a4a;border-top:1px solid #c7c7ad;table-layout:auto}.acciones-cell{text-align:center;padding:6px;position:relative}.menu-acciones{display:flex;align-items:center;justify-content:center;position:relative}button{background-color:transparent;border:none}.icon-button{background-color:var(--secondary-container, #dee58f);width:36px;height:36px;border:none;cursor:pointer;padding:0;border-radius:100%;display:flex;align-items:center;justify-content:center}.icon-button:hover{background:#0000000f}.more-vert{color:#4a4a4a;display:block}.modal-options{display:flex;justify-items:center;align-items:center;background-color:var(--surface-container-lowest, #ffffff);width:200px;border-radius:8px;position:absolute;top:100%;right:0;z-index:99}.modal-content{width:100%;border-radius:8px;border:1px solid var(--outline-variant, #c7c7ad);overflow:hidden}.option-item{display:flex;align-items:center;height:56px;padding:8px 12px;cursor:pointer}.option-item:hover{background-color:#0000001a}.option-item:active{background-color:#dee58f}.icon{margin-right:8px}.option-item .label{font-weight:500;font-size:16px}.icon-refresh,.icon-delete,.icon-edit,.icon-activate,.icon-deactivate,.icon-view,.icon-sanction,.icon-file{width:24px;height:24px;background-color:currentColor;color:currentColor;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;mask-size:contain;mask-repeat:no-repeat;display:inline-block;cursor:pointer}.icon-refresh{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4\"/><path d=\"M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4\"/><path d=\"M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4\"/></svg>')}.icon-delete{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M20 6a1 1 0 0 1 .117 1.993l-.117 .007h-.081l-.919 11a3 3 0 0 1 -2.824 2.995l-.176 .005h-8c-1.598 0 -2.904 -1.249 -2.992 -2.75l-.005 -.167l-.923 -11.083h-.08a1 1 0 0 1 -.117 -1.993l.117 -.007h16z\"/><path d=\"M14 2a2 2 0 0 1 2 2a1 1 0 0 1 -1.993 .117l-.007 -.117h-4l-.007 .117a1 1 0 0 1 -1.993 -.117a2 2 0 0 1 1.85 -1.995l.15 -.005h4z\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M20 6a1 1 0 0 1 .117 1.993l-.117 .007h-.081l-.919 11a3 3 0 0 1 -2.824 2.995l-.176 .005h-8c-1.598 0 -2.904 -1.249 -2.992 -2.75l-.005 -.167l-.923 -11.083h-.08a1 1 0 0 1 -.117 -1.993l.117 -.007h16z\"/><path d=\"M14 2a2 2 0 0 1 2 2a1 1 0 0 1 -1.993 .117l-.007 -.117h-4l-.007 .117a1 1 0 0 1 -1.993 -.117a2 2 0 0 1 1.85 -1.995l.15 -.005h4z\"/></svg>')}.icon-edit{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4\"/><path d=\"M13.5 6.5l4 4\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4\"/><path d=\"M13.5 6.5l4 4\"/></svg>')}.icon-activate{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z\"/></svg>')}.icon-deactivate{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M15 9l-6 6M9 9l6 6\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M15 9l-6 6M9 9l6 6\"/></svg>')}.icon-view{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0\"/><path d=\"M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0\"/><path d=\"M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6\"/></svg>')}.icon-sanction{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0\"/><path d=\"M9 15l6 -6\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0\"/><path d=\"M9 15l6 -6\"/></svg>')}.icon-file{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M14 3v4a1 1 0 0 0 1 1h4\"/><path d=\"M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4\"/><path d=\"M5 18h1.5a1.5 1.5 0 0 0 0 -3h-1.5v6\"/><path d=\"M17 18h2\"/><path d=\"M20 15h-3v6\"/><path d=\"M11 15v6h1a2 2 0 0 0 2 -2v-2a2 2 0 0 0 -2 -2h-1\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M14 3v4a1 1 0 0 0 1 1h4\"/><path d=\"M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4\"/><path d=\"M5 18h1.5a1.5 1.5 0 0 0 0 -3h-1.5v6\"/><path d=\"M17 18h2\"/><path d=\"M20 15h-3v6\"/><path d=\"M11 15v6h1a2 2 0 0 0 2 -2v-2a2 2 0 0 0 -2 -2h-1\"/></svg>')}th.left.sortable,th.left,td.left{text-align:left}th.right.sortable,th.right,td.right{text-align:right}th.center.sortable,th.center,td.center{text-align:center}.status-chip{display:inline-flex;align-items:center;gap:.5rem;width:100%;padding:.375rem .75rem;border-radius:8px;font-size:.875rem;font-weight:500;white-space:nowrap}.status-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.sortable:hover{opacity:.7}.sort-icon{margin-left:6px;font-size:12px;pointer-events:none}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: Table, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-table', imports: [], standalone: true, template: "<div class=\"table-wrapper\">\r\n  <table class=\"inner-table\">\r\n    <thead>\r\n      <tr>\r\n        @for (col of columns(); track col.key) {\r\n        <th\r\n          (click)=\"col.sortable !== false && onSort(col)\"\r\n          [class.sortable]=\"col.sortable !== false\"\r\n          [class]=\"getAlignment(col)\"\r\n        >\r\n          {{ col.label }}\r\n\r\n          <!-- iconos de orden opcionales -->\r\n          @if (sortColumn() === col.key) {\r\n          <span class=\"sort-icon\">\r\n            {{ sortDirection() === 'asc' ? '\u25B2' : '\u25BC' }}\r\n          </span>\r\n          }\r\n        </th>\r\n        }\r\n\r\n        <!-- columna para acciones -->\r\n        @if (showActions()) {\r\n        <th></th>\r\n        }\r\n      </tr>\r\n    </thead>\r\n\r\n    <tbody>\r\n      @for (row of sortData(); track $index) {\r\n      <tr>\r\n        @for (col of columns(); track col.key) {\r\n        <td [class]=\"getAlignment(col)\">\r\n          @if (col.type === 'status') { @let style =\r\n          getStatusStyle(row[col.key]);\r\n          <span\r\n            class=\"status-chip\"\r\n            [style.background-color]=\"style.bg\"\r\n            [style.color]=\"style.color\"\r\n          >\r\n            <span\r\n              class=\"status-dot\"\r\n              [style.background-color]=\"style.color\"\r\n            ></span>\r\n\r\n            {{ row[col.key]?.toString().toUpperCase() }}\r\n          </span>\r\n          } @else if (col.type === 'icon-button') {\r\n\r\n          <button\r\n            (click)=\"onIconColumnClick(col, row, $event)\"\r\n          >\r\n            <span\r\n            class=\"icon\"\r\n              [class]=\"col.icon\"\r\n              [style.color]=\"col.iconColor\"\r\n            ></span>\r\n          </button>\r\n\r\n          } @else { {{ formatValue(col, row[col.key]) }} }\r\n        </td>\r\n        }\r\n\r\n        <!-- Celda de acciones -->\r\n        @if (showActions()) {\r\n        <td class=\"acciones-cell\">\r\n          <div class=\"menu-acciones\">\r\n            <button class=\"icon-button\" (click)=\"openModal(row)\">\r\n              <div class=\"content\">\r\n                <div class=\"state-layer\">\r\n                  <svg\r\n                    xmlns=\"http://www.w3.org/2000/svg\"\r\n                    class=\"more-vert\"\r\n                    width=\"20\"\r\n                    height=\"20\"\r\n                    viewBox=\"0 0 24 24\"\r\n                    fill=\"none\"\r\n                    stroke=\"currentColor\"\r\n                    stroke-width=\"2\"\r\n                    stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                  >\r\n                    <circle cx=\"12\" cy=\"5\" r=\"1\" />\r\n                    <circle cx=\"12\" cy=\"12\" r=\"1\" />\r\n                    <circle cx=\"12\" cy=\"19\" r=\"1\" />\r\n                  </svg>\r\n                </div>\r\n              </div>\r\n            </button>\r\n            @if(selectedRow()?.['id'] === row['id']){\r\n            <div class=\"modal-options\" (click)=\"$event.stopPropagation()\">\r\n              <div class=\"modal-content\">\r\n                <ul>\r\n                  @for (option of getActionsForRow(row); track $index) {\r\n                  <li\r\n                    class=\"option-item\"\r\n                    [style.color]=\"option.color\"\r\n                    (click)=\"onOptionClick(option, row)\"\r\n                  >\r\n                    <span class=\"icon\" [class]=\"option.icon\"></span>\r\n                    <span class=\"label\">{{ option.label }}</span>\r\n                  </li>\r\n                  }\r\n                </ul>\r\n              </div>\r\n            </div>\r\n            }\r\n          </div>\r\n        </td>\r\n        }\r\n      </tr>\r\n      }\r\n    </tbody>\r\n  </table>\r\n</div>\r\n", styles: [".table-wrapper{width:100%;border-radius:20px;border:1px solid #c7c7ad}.inner-table{width:100%;border-collapse:separate;font-size:14px;border-spacing:0;border-radius:20px;background:#ebe8d6}.inner-table thead{background:#f0f0db}.inner-table thead tr th:first-child{border-top-left-radius:20px}.inner-table thead tr th:last-child{border-top-right-radius:20px}.inner-table th{text-align:left;padding:12px 16px;font-weight:600;color:#3a3a3a;text-transform:uppercase}.inner-table td{padding:12px 16px;color:#4a4a4a;border-top:1px solid #c7c7ad}.acciones-cell{text-align:center;padding:6px;position:relative}.menu-acciones{display:flex;align-items:center;justify-content:center;position:relative}button{background-color:transparent;border:none}.icon-button{background-color:var(--secondary-container, #dee58f);width:36px;height:36px;border:none;cursor:pointer;padding:0;border-radius:100%;display:flex;align-items:center;justify-content:center}.icon-button:hover{background:#0000000f}.more-vert{color:#4a4a4a;display:block}.modal-options{display:flex;justify-items:center;align-items:center;background-color:var(--surface-container-lowest, #ffffff);width:200px;border-radius:8px;position:absolute;top:100%;right:0;z-index:99}.modal-content{width:100%;border-radius:8px;border:1px solid var(--outline-variant, #c7c7ad);overflow:hidden}.option-item{display:flex;align-items:center;height:56px;padding:8px 12px;cursor:pointer}.option-item:hover{background-color:#0000001a}.option-item:active{background-color:#dee58f}.icon{margin-right:8px}.option-item .label{font-weight:500;font-size:16px}.icon-refresh,.icon-delete,.icon-edit,.icon-activate,.icon-deactivate,.icon-view,.icon-sanction,.icon-file{width:24px;height:24px;background-color:currentColor;color:currentColor;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;mask-size:contain;mask-repeat:no-repeat;display:inline-block;cursor:pointer}.icon-refresh{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4\"/><path d=\"M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4\"/><path d=\"M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4\"/></svg>')}.icon-delete{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M20 6a1 1 0 0 1 .117 1.993l-.117 .007h-.081l-.919 11a3 3 0 0 1 -2.824 2.995l-.176 .005h-8c-1.598 0 -2.904 -1.249 -2.992 -2.75l-.005 -.167l-.923 -11.083h-.08a1 1 0 0 1 -.117 -1.993l.117 -.007h16z\"/><path d=\"M14 2a2 2 0 0 1 2 2a1 1 0 0 1 -1.993 .117l-.007 -.117h-4l-.007 .117a1 1 0 0 1 -1.993 -.117a2 2 0 0 1 1.85 -1.995l.15 -.005h4z\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M20 6a1 1 0 0 1 .117 1.993l-.117 .007h-.081l-.919 11a3 3 0 0 1 -2.824 2.995l-.176 .005h-8c-1.598 0 -2.904 -1.249 -2.992 -2.75l-.005 -.167l-.923 -11.083h-.08a1 1 0 0 1 -.117 -1.993l.117 -.007h16z\"/><path d=\"M14 2a2 2 0 0 1 2 2a1 1 0 0 1 -1.993 .117l-.007 -.117h-4l-.007 .117a1 1 0 0 1 -1.993 -.117a2 2 0 0 1 1.85 -1.995l.15 -.005h4z\"/></svg>')}.icon-edit{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4\"/><path d=\"M13.5 6.5l4 4\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4\"/><path d=\"M13.5 6.5l4 4\"/></svg>')}.icon-activate{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z\"/></svg>')}.icon-deactivate{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M15 9l-6 6M9 9l6 6\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M15 9l-6 6M9 9l6 6\"/></svg>')}.icon-view{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0\"/><path d=\"M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0\"/><path d=\"M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6\"/></svg>')}.icon-sanction{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0\"/><path d=\"M9 15l6 -6\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0\"/><path d=\"M9 15l6 -6\"/></svg>')}.icon-file{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M14 3v4a1 1 0 0 0 1 1h4\"/><path d=\"M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4\"/><path d=\"M5 18h1.5a1.5 1.5 0 0 0 0 -3h-1.5v6\"/><path d=\"M17 18h2\"/><path d=\"M20 15h-3v6\"/><path d=\"M11 15v6h1a2 2 0 0 0 2 -2v-2a2 2 0 0 0 -2 -2h-1\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M14 3v4a1 1 0 0 0 1 1h4\"/><path d=\"M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4\"/><path d=\"M5 18h1.5a1.5 1.5 0 0 0 0 -3h-1.5v6\"/><path d=\"M17 18h2\"/><path d=\"M20 15h-3v6\"/><path d=\"M11 15v6h1a2 2 0 0 0 2 -2v-2a2 2 0 0 0 -2 -2h-1\"/></svg>')}th.left.sortable,th.left,td.left{text-align:left}th.right.sortable,th.right,td.right{text-align:right}th.center.sortable,th.center,td.center{text-align:center}.status-chip{position:relative;display:inline-flex;align-items:center;width:100%;max-width:80%;gap:6px;padding:4px 10px;border-radius:8px;font-size:13px;font-weight:500;white-space:nowrap;text-overflow:ellipsis}.status-dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0}.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.sortable:hover{opacity:.7}.sort-icon{margin-left:6px;font-size:12px;pointer-events:none}\n"] }]
-        }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], showActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showActions", required: false }] }], optionSelected: [{ type: i0.Output, args: ["optionSelected"] }], iconAction: [{ type: i0.Output, args: ["iconAction"] }], statusToneMap: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusToneMap", required: false }] }], onClickOutside: [{
+            args: [{ selector: 'lib-table', imports: [], standalone: true, template: "<div class=\"table-wrapper\">\r\n  <table class=\"inner-table\">\r\n    <thead>\r\n      <tr>\r\n        @for (col of columns(); track col.key) {\r\n        <th\r\n          (click)=\"col.sortable !== false && onSort(col)\"\r\n          [class.sortable]=\"col.sortable !== false\"\r\n          [class]=\"getAlignment(col)\"\r\n        >\r\n          {{ col.label }}\r\n\r\n          <!-- iconos de orden opcionales -->\r\n          @if (sortColumn() === col.key) {\r\n          <span class=\"sort-icon\">\r\n            {{ sortDirection() === 'asc' ? '\u25B2' : '\u25BC' }}\r\n          </span>\r\n          }\r\n        </th>\r\n        }\r\n\r\n        <!-- columna para acciones -->\r\n        @if (showActions()) {\r\n        <th></th>\r\n        }\r\n      </tr>\r\n    </thead>\r\n\r\n    <tbody>\r\n      @for (row of sortData(); track $index) {\r\n      <tr>\r\n        @for (col of columns(); track col.key) {\r\n        <td [class]=\"getAlignment(col)\">\r\n          @if (col.type === 'status') { @let style =\r\n          getStatusStyle(row[col.key]);\r\n          <span\r\n            class=\"status-chip\"\r\n            id=\"status-chip\"\r\n            [style.background-color]=\"style.bg\"\r\n            [style.color]=\"style.color\"\r\n          >\r\n            <span\r\n              class=\"status-dot\"\r\n              [style.background-color]=\"style.color\"\r\n            ></span>\r\n\r\n            {{ row[col.key]?.toString().toUpperCase() }}\r\n          </span>\r\n\r\n          } @else if (col.type === 'icon-button') {\r\n\r\n          <button (click)=\"onIconColumnClick(col, row, $event)\">\r\n            <span\r\n              class=\"icon\"\r\n              [class]=\"col.icon\"\r\n              [style.color]=\"col.iconColor\"\r\n            ></span>\r\n          </button>\r\n\r\n          } @else { {{ formatValue(col, row[col.key]) }} }\r\n        </td>\r\n        }\r\n\r\n        <!-- Celda de acciones -->\r\n        @if (showActions()) {\r\n        <td class=\"acciones-cell\">\r\n          <div class=\"menu-acciones\">\r\n            <button class=\"icon-button\" (click)=\"openModal(row)\">\r\n              <div class=\"content\">\r\n                <div class=\"state-layer\">\r\n                  <svg\r\n                    xmlns=\"http://www.w3.org/2000/svg\"\r\n                    class=\"more-vert\"\r\n                    width=\"20\"\r\n                    height=\"20\"\r\n                    viewBox=\"0 0 24 24\"\r\n                    fill=\"none\"\r\n                    stroke=\"currentColor\"\r\n                    stroke-width=\"2\"\r\n                    stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                  >\r\n                    <circle cx=\"12\" cy=\"5\" r=\"1\" />\r\n                    <circle cx=\"12\" cy=\"12\" r=\"1\" />\r\n                    <circle cx=\"12\" cy=\"19\" r=\"1\" />\r\n                  </svg>\r\n                </div>\r\n              </div>\r\n            </button>\r\n            @if(selectedRow()?.['id'] === row['id']){\r\n            <div class=\"modal-options\" (click)=\"$event.stopPropagation()\">\r\n              <div class=\"modal-content\">\r\n                <ul>\r\n                  @for (option of getActionsForRow(row); track $index) {\r\n                  <li\r\n                    class=\"option-item\"\r\n                    [style.color]=\"option.color\"\r\n                    (click)=\"onOptionClick(option, row)\"\r\n                  >\r\n                    <span class=\"icon\" [class]=\"option.icon\"></span>\r\n                    <span class=\"label\">{{ option.label }}</span>\r\n                  </li>\r\n                  }\r\n                </ul>\r\n              </div>\r\n            </div>\r\n            }\r\n          </div>\r\n        </td>\r\n        }\r\n      </tr>\r\n      }\r\n    </tbody>\r\n  </table>\r\n</div>\r\n", styles: [".table-wrapper{width:100%;border-radius:20px;border:1px solid #c7c7ad}.inner-table{width:100%;border-collapse:separate;font-size:14px;border-spacing:0;border-radius:20px;background:#ebe8d6}.inner-table thead{background:#f0f0db}.inner-table thead tr th:first-child{border-top-left-radius:20px}.inner-table thead tr th:last-child{border-top-right-radius:20px}.inner-table th{text-align:left;padding:12px 16px;font-weight:600;color:#3a3a3a;text-transform:uppercase}.inner-table td{padding:12px 16px;color:#4a4a4a;border-top:1px solid #c7c7ad;table-layout:auto}.acciones-cell{text-align:center;padding:6px;position:relative}.menu-acciones{display:flex;align-items:center;justify-content:center;position:relative}button{background-color:transparent;border:none}.icon-button{background-color:var(--secondary-container, #dee58f);width:36px;height:36px;border:none;cursor:pointer;padding:0;border-radius:100%;display:flex;align-items:center;justify-content:center}.icon-button:hover{background:#0000000f}.more-vert{color:#4a4a4a;display:block}.modal-options{display:flex;justify-items:center;align-items:center;background-color:var(--surface-container-lowest, #ffffff);width:200px;border-radius:8px;position:absolute;top:100%;right:0;z-index:99}.modal-content{width:100%;border-radius:8px;border:1px solid var(--outline-variant, #c7c7ad);overflow:hidden}.option-item{display:flex;align-items:center;height:56px;padding:8px 12px;cursor:pointer}.option-item:hover{background-color:#0000001a}.option-item:active{background-color:#dee58f}.icon{margin-right:8px}.option-item .label{font-weight:500;font-size:16px}.icon-refresh,.icon-delete,.icon-edit,.icon-activate,.icon-deactivate,.icon-view,.icon-sanction,.icon-file{width:24px;height:24px;background-color:currentColor;color:currentColor;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;mask-size:contain;mask-repeat:no-repeat;display:inline-block;cursor:pointer}.icon-refresh{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4\"/><path d=\"M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4\"/><path d=\"M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4\"/></svg>')}.icon-delete{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M20 6a1 1 0 0 1 .117 1.993l-.117 .007h-.081l-.919 11a3 3 0 0 1 -2.824 2.995l-.176 .005h-8c-1.598 0 -2.904 -1.249 -2.992 -2.75l-.005 -.167l-.923 -11.083h-.08a1 1 0 0 1 -.117 -1.993l.117 -.007h16z\"/><path d=\"M14 2a2 2 0 0 1 2 2a1 1 0 0 1 -1.993 .117l-.007 -.117h-4l-.007 .117a1 1 0 0 1 -1.993 -.117a2 2 0 0 1 1.85 -1.995l.15 -.005h4z\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M20 6a1 1 0 0 1 .117 1.993l-.117 .007h-.081l-.919 11a3 3 0 0 1 -2.824 2.995l-.176 .005h-8c-1.598 0 -2.904 -1.249 -2.992 -2.75l-.005 -.167l-.923 -11.083h-.08a1 1 0 0 1 -.117 -1.993l.117 -.007h16z\"/><path d=\"M14 2a2 2 0 0 1 2 2a1 1 0 0 1 -1.993 .117l-.007 -.117h-4l-.007 .117a1 1 0 0 1 -1.993 -.117a2 2 0 0 1 1.85 -1.995l.15 -.005h4z\"/></svg>')}.icon-edit{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4\"/><path d=\"M13.5 6.5l4 4\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4\"/><path d=\"M13.5 6.5l4 4\"/></svg>')}.icon-activate{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z\"/></svg>')}.icon-deactivate{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M15 9l-6 6M9 9l6 6\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M15 9l-6 6M9 9l6 6\"/></svg>')}.icon-view{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0\"/><path d=\"M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0\"/><path d=\"M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6\"/></svg>')}.icon-sanction{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0\"/><path d=\"M9 15l6 -6\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0\"/><path d=\"M9 15l6 -6\"/></svg>')}.icon-file{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M14 3v4a1 1 0 0 0 1 1h4\"/><path d=\"M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4\"/><path d=\"M5 18h1.5a1.5 1.5 0 0 0 0 -3h-1.5v6\"/><path d=\"M17 18h2\"/><path d=\"M20 15h-3v6\"/><path d=\"M11 15v6h1a2 2 0 0 0 2 -2v-2a2 2 0 0 0 -2 -2h-1\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M14 3v4a1 1 0 0 0 1 1h4\"/><path d=\"M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4\"/><path d=\"M5 18h1.5a1.5 1.5 0 0 0 0 -3h-1.5v6\"/><path d=\"M17 18h2\"/><path d=\"M20 15h-3v6\"/><path d=\"M11 15v6h1a2 2 0 0 0 2 -2v-2a2 2 0 0 0 -2 -2h-1\"/></svg>')}th.left.sortable,th.left,td.left{text-align:left}th.right.sortable,th.right,td.right{text-align:right}th.center.sortable,th.center,td.center{text-align:center}.status-chip{display:inline-flex;align-items:center;gap:.5rem;width:100%;padding:.375rem .75rem;border-radius:8px;font-size:.875rem;font-weight:500;white-space:nowrap}.status-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.sortable:hover{opacity:.7}.sort-icon{margin-left:6px;font-size:12px;pointer-events:none}\n"] }]
+        }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], showActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showActions", required: false }] }], optionSelected: [{ type: i0.Output, args: ["optionSelected"] }], iconAction: [{ type: i0.Output, args: ["iconAction"] }], statusToneMap: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusToneMap", required: false }] }], chips: [{
+                type: ViewChildren,
+                args: ['status-chip']
+            }], onClickOutside: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
             }] } });
@@ -726,6 +742,8 @@ class DateTimePicker {
     selectedDate = signal(null, ...(ngDevMode ? [{ debugName: "selectedDate" }] : []));
     isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
     isTouched = signal(false, ...(ngDevMode ? [{ debugName: "isTouched" }] : []));
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
+    isBlocked = computed(() => this.isDisabled() || this.readonly(), ...(ngDevMode ? [{ debugName: "isBlocked" }] : []));
     // Texto que escribe el usuario (DD/MM/YYYY)
     inputTextValue = signal('', ...(ngDevMode ? [{ debugName: "inputTextValue" }] : []));
     // Navegación del calendario
@@ -837,7 +855,7 @@ class DateTimePicker {
         this.isDisabled.set(isDisabled);
     }
     toggle() {
-        if (this.isDisabled())
+        if (this.isBlocked())
             return;
         this.markAsTouched();
         if (this.isOpen()) {
@@ -848,7 +866,7 @@ class DateTimePicker {
         }
     }
     open() {
-        if (this.isDisabled())
+        if (this.isBlocked())
             return;
         this.markAsTouched();
         this.isOpen.set(true);
@@ -866,7 +884,7 @@ class DateTimePicker {
         this.markAsTouched();
     }
     selectDay(day) {
-        if (!day || this.isDisabled())
+        if (!day || this.isBlocked())
             return;
         const newDate = new Date(this.currentYear(), this.currentMonth(), day, this.selectedHour(), this.selectedMinute());
         if (this.isDateDisabled(newDate))
@@ -881,7 +899,7 @@ class DateTimePicker {
         }
     }
     setHour12(hour12) {
-        if (this.isDisabled())
+        if (this.isBlocked())
             return;
         // Convertir de 12h a 24h
         let hour24;
@@ -896,13 +914,13 @@ class DateTimePicker {
         this.updateDateTime();
     }
     setMinute(minute) {
-        if (this.isDisabled())
+        if (this.isBlocked())
             return;
         this.selectedMinute.set(minute);
         this.updateDateTime();
     }
     setAmPm(amPm) {
-        if (this.isDisabled())
+        if (this.isBlocked())
             return;
         const currentHour24 = this.selectedHour();
         const currentHour12 = this.selectedHour12();
@@ -963,7 +981,7 @@ class DateTimePicker {
         this.close();
     }
     onKeyDown(event) {
-        if (this.isDisabled())
+        if (this.isBlocked())
             return;
         if (event.key === 'Escape') {
             this.close();
@@ -1020,7 +1038,7 @@ class DateTimePicker {
     }
     // Manejo de input de texto (DD/MM/YYYY)
     onInputChange(event) {
-        if (this.isDisabled())
+        if (this.isBlocked())
             return;
         const input = event.target;
         let value = input.value;
@@ -1063,7 +1081,7 @@ class DateTimePicker {
         }
     }
     onInputFocus() {
-        if (this.isDisabled())
+        if (this.isBlocked())
             return;
         this.open();
     }
@@ -1168,13 +1186,13 @@ class DateTimePicker {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DateTimePicker, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DateTimePicker, isStandalone: true, selector: "lib-date-time-picker", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateChange: "dateChange" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DateTimePicker, isStandalone: true, selector: "lib-date-time-picker", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateChange: "dateChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => DateTimePicker),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div class=\"datetime-container\">\r\n  <div\r\n    class=\"datetime-header\"\r\n    [class.active]=\"isOpen()\"\r\n    [class.disabled]=\"isDisabled()\"\r\n    (click)=\"toggle()\"\r\n    (keydown)=\"onKeyDown($event)\"\r\n    tabindex=\"0\"\r\n  >\r\n    <input\r\n      type=\"text\"\r\n      class=\"datetime-input\"\r\n      [value]=\"displayValue()\"\r\n      [placeholder]=\"placeholder()\"\r\n      (input)=\"onInputChange($event)\"\r\n      (focus)=\"onInputFocus()\"\r\n      (click)=\"$event.stopPropagation()\"\r\n      [disabled]=\"isDisabled()\"\r\n    />\r\n\r\n    <div class=\"header-icons\">\r\n      @if (selectedDate()) {\r\n      <span\r\n        class=\"clear-icon\"\r\n        (click)=\"clear(); $event.stopPropagation()\"\r\n        title=\"Limpiar\"\r\n      >\r\n        \u00D7\r\n      </span>\r\n      }\r\n      <span class=\"arrow\" [class.open]=\"isOpen()\"></span>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n@if (isOpen()) {\r\n<div class=\"dropdown\">\r\n  <div class=\"datetime-content\">\r\n    <!-- Secci\u00F3n del calendario -->\r\n    <div class=\"calendar-section\">\r\n      <!-- Navegaci\u00F3n del calendario -->\r\n      <div class=\"calendar-nav\">\r\n        <div class=\"nav-section\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"nav-btn\"\r\n            (click)=\"previousYear()\"\r\n            title=\"A\u00F1o anterior\"\r\n          >\r\n            \u2039\u2039\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"nav-btn\"\r\n            (click)=\"previousMonth()\"\r\n            title=\"Mes anterior\"\r\n          >\r\n            \u2039\r\n          </button>\r\n        </div>\r\n\r\n        <div class=\"current-date\">{{ monthName() }} {{ currentYear() }}</div>\r\n\r\n        <div class=\"nav-section\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"nav-btn\"\r\n            (click)=\"nextMonth()\"\r\n            title=\"Siguiente mes\"\r\n          >\r\n            \u203A\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"nav-btn\"\r\n            (click)=\"nextYear()\"\r\n            title=\"Siguiente a\u00F1o\"\r\n          >\r\n            \u203A\u203A\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- D\u00EDas de la semana -->\r\n      <div class=\"weekdays\">\r\n        <div class=\"weekday\">Dom</div>\r\n        <div class=\"weekday\">Lun</div>\r\n        <div class=\"weekday\">Mar</div>\r\n        <div class=\"weekday\">Mi\u00E9</div>\r\n        <div class=\"weekday\">Jue</div>\r\n        <div class=\"weekday\">Vie</div>\r\n        <div class=\"weekday\">S\u00E1b</div>\r\n      </div>\r\n\r\n      <!-- D\u00EDas del mes -->\r\n      <div class=\"calendar-grid\">\r\n        @for (day of calendarDays(); track $index) {\r\n        <div\r\n          class=\"calendar-day\"\r\n          [class.selected]=\"isDaySelected(day)\"\r\n          [class.today]=\"isToday(day)\"\r\n          [class.disabled]=\"isDayDisabled(day)\"\r\n          [class.empty]=\"!day\"\r\n          (click)=\"selectDay(day)\"\r\n        >\r\n          {{ day || '' }}\r\n        </div>\r\n        }\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Selector de tiempo (solo si mode === 'datetime') -->\r\n    @if (mode() === 'datetime') {\r\n    <div class=\"time-section\">\r\n      <div class=\"time-header\">Horario</div>\r\n\r\n      <div class=\"time-selectors\">\r\n        <div class=\"time-group\">\r\n          <div class=\"time-column\">\r\n            <div class=\"time-label\">Hora</div>\r\n            <div class=\"time-scroll\">\r\n              @for (hour of hours12(); track hour.value) {\r\n              <div\r\n                class=\"time-option\"\r\n                [class.selected]=\"hour.value === selectedHour12()\"\r\n                (click)=\"setHour12(hour.value)\"\r\n              >\r\n                {{ hour.display }}\r\n              </div>\r\n              }\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"time-separator-vertical\">:</div>\r\n\r\n          <div class=\"time-column\">\r\n            <div class=\"time-label\">Min</div>\r\n            <div class=\"time-scroll\">\r\n              @for (minute of minutes(); track minute) {\r\n              <div\r\n                class=\"time-option\"\r\n                [class.selected]=\"minute === selectedMinute()\"\r\n                (click)=\"setMinute(minute)\"\r\n              >\r\n                {{ minute.toString().padStart(2, '0') }}\r\n              </div>\r\n              }\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"time-column\">\r\n            <div class=\"time-label\">AM/PM</div>\r\n            <div class=\"time-scroll ampm\">\r\n              <div\r\n                class=\"time-option\"\r\n                [class.selected]=\"selectedAmPm() === 'AM'\"\r\n                (click)=\"setAmPm('AM')\"\r\n              >\r\n                AM\r\n              </div>\r\n              <div\r\n                class=\"time-option\"\r\n                [class.selected]=\"selectedAmPm() === 'PM'\"\r\n                (click)=\"setAmPm('PM')\"\r\n              >\r\n                PM\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    }\r\n  </div>\r\n\r\n  <!-- Botones de acci\u00F3n -->\r\n  <div class=\"action-buttons\">\r\n    <button type=\"button\" class=\"action-btn secondary\" (click)=\"today()\">\r\n      Hoy\r\n    </button>\r\n    @if (mode() === 'datetime') {\r\n    <button type=\"button\" class=\"action-btn primary\" (click)=\"close()\">\r\n      Aceptar\r\n    </button>\r\n    }\r\n  </div>\r\n</div>\r\n}\r\n", styles: [".datetime-container{position:relative;width:100%}.datetime-header{width:100%;border:1px solid #787861;border-radius:5px;padding:12px 15px;background-color:transparent;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:auto;transition:border-color .2s}.datetime-input{flex:1;border:none;outline:none;background:transparent;font-size:1.3rem;color:#454733;padding:0;margin:0}.datetime-input::placeholder{color:#787861}.datetime-input:disabled{cursor:not-allowed}.datetime-header:hover,.datetime-header:focus{outline:none;border-color:#a9a97f}.datetime-header.active{border-color:#a9a97f;outline:none}.datetime-header.disabled{cursor:not-allowed;opacity:.6}.selected-text{color:#454733;font-size:1.3rem;flex:1}.selected-text.placeholder{color:#787861}.header-icons{display:flex;align-items:center;gap:8px}.clear-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center;color:#787861;font-size:1.5rem;cursor:pointer;border-radius:50%;transition:all .2s}.clear-icon:hover{background-color:#7878611a;color:#454733}.arrow{width:20px;height:20px;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='icon icon-tabler icons-tabler-outline icon-tabler-calendar-event'%3e%3cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3e%3cpath d='M4 5m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z' /%3e%3cpath d='M16 3l0 4' /%3e%3cpath d='M8 3l0 4' /%3e%3cpath d='M4 11l16 0' /%3e%3cpath d='M8 15h2v2h-2z' /%3e%3c/svg%3e\");background-repeat:no-repeat;background-size:20px;background-position:center;color:#787861;flex-shrink:0;transition:transform .2s}.arrow.open{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' class='icon icon-tabler icons-tabler-filled icon-tabler-calendar-event'%3e%3cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3e%3cpath d='M16 2a1 1 0 0 1 .993 .883l.007 .117v1h1a3 3 0 0 1 2.995 2.824l.005 .176v12a3 3 0 0 1 -2.824 2.995l-.176 .005h-12a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-12a3 3 0 0 1 2.824 -2.995l.176 -.005h1v-1a1 1 0 0 1 1.993 -.117l.007 .117v1h6v-1a1 1 0 0 1 1 -1m3 7h-14v9.625c0 .705 .386 1.286 .883 1.366l.117 .009h12c.513 0 .936 -.53 .993 -1.215l.007 -.16z' /%3e%3cpath d='M8 14h2v2h-2z' /%3e%3c/svg%3e\")}.dropdown{position:absolute;top:100%;left:0;right:0;background:#e3e3d1;border:1px solid #787861;border-top:none;border-radius:0 0 5px 5px;z-index:1000;box-shadow:0 4px 12px #00000026;min-width:400px}.datetime-content{display:flex}.calendar-section{flex:1;min-width:280px}.calendar-nav{display:flex;justify-content:space-between;align-items:center;padding:15px;border-bottom:1px solid rgba(120,120,97,.2)}.nav-section{display:flex;gap:5px}.nav-btn{background:none;border:none;color:#787861;cursor:pointer;font-size:1.2rem;padding:5px 10px;border-radius:3px;transition:all .2s}.nav-btn:hover{background-color:#a9a97f1a;color:#454733}.current-date{font-weight:500;color:#454733;font-size:1.1rem}.weekdays{display:grid;grid-template-columns:repeat(7,1fr);background:#7878611a}.weekday{padding:10px 5px;text-align:center;font-size:.9rem;font-weight:500;color:#787861}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr)}.calendar-day{padding:12px 5px;text-align:center;cursor:pointer;color:#454733;font-size:1rem;border-right:1px solid rgba(120,120,97,.1);border-bottom:1px solid rgba(120,120,97,.1);transition:all .2s}.calendar-day:hover:not(.disabled):not(.empty){background-color:#a9a97f33}.calendar-day.selected{background-color:#a9a97f;color:#e3e3d1;font-weight:500}.calendar-day.today:not(.selected){background-color:#a9a97f4d;font-weight:500}.calendar-day.disabled{color:#78786166;cursor:not-allowed}.calendar-day.empty{cursor:default}.calendar-day:nth-child(7n){border-right:none}.time-section{border-left:1px solid rgba(120,120,97,.2);min-width:140px;display:flex;flex-direction:column;background:#a9a97f0d}.time-header{padding:15px;border-bottom:1px solid rgba(120,120,97,.2);text-align:center;font-weight:500;color:#454733;background:#a9a97f1a}.time-selectors{display:flex;flex-direction:column;padding:15px;gap:20px;flex:1}.time-group{display:flex;align-items:center;gap:10px}.time-column{flex:1;display:flex;flex-direction:column;align-items:center}.time-label{font-size:.9rem;color:#787861;margin-bottom:10px;font-weight:500}.time-scroll{max-height:150px;overflow-y:auto;border:1px solid rgba(120,120,97,.2);border-radius:3px;width:50px;background:#a9a97f}.time-option{padding:8px 12px;text-align:center;cursor:pointer;color:#454733;font-size:1rem;transition:all .2s}.time-option:hover{background-color:#a9a97f1a}.time-option.selected{background-color:#a9a97f;color:#e3e3d1;font-weight:500}.time-separator-vertical{font-size:1.5rem;color:#787861;font-weight:700;align-self:flex-end;margin-bottom:10px}.time-scroll::-webkit-scrollbar{width:4px}.time-scroll::-webkit-scrollbar-track{background:#7878611a}.time-scroll::-webkit-scrollbar-thumb{background:#787861;border-radius:2px}.time-scroll::-webkit-scrollbar-thumb:hover{background:#a9a97f}.action-buttons{display:flex;justify-content:space-between;padding:15px;border-top:1px solid rgba(120,120,97,.2);gap:10px}.action-btn{padding:10px 20px;border:none;border-radius:3px;cursor:pointer;font-size:1rem;transition:all .2s}.action-btn.secondary{background:transparent;color:#787861;border:1px solid #787861}.action-btn.secondary:hover{background:#7878611a;color:#454733}.action-btn.primary{background:#a9a97f;color:#e3e3d1;border:1px solid #a9a97f}.action-btn.primary:hover{background:#969669;border-color:#969669}@media (max-width: 768px){.dropdown{min-width:320px}.datetime-content{flex-direction:column}.time-section{border-left:none;border-top:1px solid rgba(120,120,97,.2)}.time-selectors{flex-direction:row;justify-content:center;padding:15px}.time-group{gap:15px}.datetime-header{padding:10px 15px}.calendar-nav{padding:12px}.calendar-day{padding:10px 3px;font-size:.9rem}.action-buttons{padding:12px}}@media (max-width: 480px){.dropdown{min-width:280px}.time-section{min-width:auto}.time-scroll{width:45px}.time-selectors{padding:10px}}\n"] });
+        ], ngImport: i0, template: "<div class=\"datetime-container\">\r\n  <div\r\n    class=\"datetime-header\"\r\n    [class.active]=\"isOpen()\"\r\n    [class.disabled]=\"isBlocked()\"\r\n    [class.readonly]=\"isBlocked()\"\r\n    (click)=\"!isBlocked() && toggle()\"\r\n    (keydown)=\"!isBlocked() && onKeyDown($event)\"\r\n    tabindex=\"0\"\r\n  >\r\n    <input\r\n      type=\"text\"\r\n      class=\"datetime-input\"\r\n      [value]=\"displayValue()\"\r\n      [placeholder]=\"placeholder()\"\r\n      (input)=\"onInputChange($event)\"\r\n      (focus)=\"!isBlocked() && onInputFocus()\"\r\n      (click)=\"$event.stopPropagation()\"\r\n      [disabled]=\"isDisabled()\"\r\n      [readOnly]=\"readonly()\"\r\n    />\r\n\r\n    <div class=\"header-icons\">\r\n      @if (selectedDate()) {\r\n      <span\r\n        class=\"clear-icon\"\r\n        (click)=\"!isBlocked() && clear(); $event.stopPropagation()\"\r\n        title=\"Limpiar\"\r\n      >\r\n        \u00D7\r\n      </span>\r\n      }\r\n      <span class=\"arrow\" [class.open]=\"isOpen()\"></span>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n@if (isOpen()) {\r\n<div class=\"dropdown\">\r\n  <div class=\"datetime-content\">\r\n    <!-- Secci\u00F3n del calendario -->\r\n    <div class=\"calendar-section\">\r\n      <!-- Navegaci\u00F3n del calendario -->\r\n      <div class=\"calendar-nav\">\r\n        <div class=\"nav-section\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"nav-btn\"\r\n            (click)=\"previousYear()\"\r\n            title=\"A\u00F1o anterior\"\r\n          >\r\n            \u2039\u2039\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"nav-btn\"\r\n            (click)=\"previousMonth()\"\r\n            title=\"Mes anterior\"\r\n          >\r\n            \u2039\r\n          </button>\r\n        </div>\r\n\r\n        <div class=\"current-date\">{{ monthName() }} {{ currentYear() }}</div>\r\n\r\n        <div class=\"nav-section\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"nav-btn\"\r\n            (click)=\"nextMonth()\"\r\n            title=\"Siguiente mes\"\r\n          >\r\n            \u203A\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"nav-btn\"\r\n            (click)=\"nextYear()\"\r\n            title=\"Siguiente a\u00F1o\"\r\n          >\r\n            \u203A\u203A\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- D\u00EDas de la semana -->\r\n      <div class=\"weekdays\">\r\n        <div class=\"weekday\">Dom</div>\r\n        <div class=\"weekday\">Lun</div>\r\n        <div class=\"weekday\">Mar</div>\r\n        <div class=\"weekday\">Mi\u00E9</div>\r\n        <div class=\"weekday\">Jue</div>\r\n        <div class=\"weekday\">Vie</div>\r\n        <div class=\"weekday\">S\u00E1b</div>\r\n      </div>\r\n\r\n      <!-- D\u00EDas del mes -->\r\n      <div class=\"calendar-grid\">\r\n        @for (day of calendarDays(); track $index) {\r\n        <div\r\n          class=\"calendar-day\"\r\n          [class.selected]=\"isDaySelected(day)\"\r\n          [class.today]=\"isToday(day)\"\r\n          [class.disabled]=\"isDayDisabled(day)\"\r\n          [class.empty]=\"!day\"\r\n          (click)=\"selectDay(day)\"\r\n        >\r\n          {{ day || '' }}\r\n        </div>\r\n        }\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Selector de tiempo (solo si mode === 'datetime') -->\r\n    @if (mode() === 'datetime') {\r\n    <div class=\"time-section\">\r\n      <div class=\"time-header\">Horario</div>\r\n\r\n      <div class=\"time-selectors\">\r\n        <div class=\"time-group\">\r\n          <div class=\"time-column\">\r\n            <div class=\"time-label\">Hora</div>\r\n            <div class=\"time-scroll\">\r\n              @for (hour of hours12(); track hour.value) {\r\n              <div\r\n                class=\"time-option\"\r\n                [class.selected]=\"hour.value === selectedHour12()\"\r\n                (click)=\"setHour12(hour.value)\"\r\n              >\r\n                {{ hour.display }}\r\n              </div>\r\n              }\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"time-separator-vertical\">:</div>\r\n\r\n          <div class=\"time-column\">\r\n            <div class=\"time-label\">Min</div>\r\n            <div class=\"time-scroll\">\r\n              @for (minute of minutes(); track minute) {\r\n              <div\r\n                class=\"time-option\"\r\n                [class.selected]=\"minute === selectedMinute()\"\r\n                (click)=\"setMinute(minute)\"\r\n              >\r\n                {{ minute.toString().padStart(2, '0') }}\r\n              </div>\r\n              }\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"time-column\">\r\n            <div class=\"time-label\">AM/PM</div>\r\n            <div class=\"time-scroll ampm\">\r\n              <div\r\n                class=\"time-option\"\r\n                [class.selected]=\"selectedAmPm() === 'AM'\"\r\n                (click)=\"setAmPm('AM')\"\r\n              >\r\n                AM\r\n              </div>\r\n              <div\r\n                class=\"time-option\"\r\n                [class.selected]=\"selectedAmPm() === 'PM'\"\r\n                (click)=\"setAmPm('PM')\"\r\n              >\r\n                PM\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    }\r\n  </div>\r\n\r\n  <!-- Botones de acci\u00F3n -->\r\n  <div class=\"action-buttons\">\r\n    <button type=\"button\" class=\"action-btn secondary\" (click)=\"today()\">\r\n      Hoy\r\n    </button>\r\n    @if (mode() === 'datetime') {\r\n    <button type=\"button\" class=\"action-btn primary\" (click)=\"close()\">\r\n      Aceptar\r\n    </button>\r\n    }\r\n  </div>\r\n</div>\r\n}\r\n", styles: [".datetime-container{position:relative;width:100%}.datetime-header{width:100%;border:1px solid #787861;border-radius:5px;padding:12px 15px;background-color:transparent;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:auto;transition:border-color .2s}.datetime-input{flex:1;border:none;outline:none;background:transparent;font-size:1.3rem;color:#454733;padding:0;margin:0}.datetime-input::placeholder{color:#787861}.datetime-input:disabled{cursor:not-allowed}.datetime-header:hover,.datetime-header:focus{outline:none;border-color:#a9a97f}.datetime-header.active{border-color:#a9a97f;outline:none}.datetime-header.disabled,.datetime-header.readonly{pointer-events:none;opacity:.6;cursor:not-allowed}.selected-text{color:#454733;font-size:1.3rem;flex:1}.selected-text.placeholder{color:#787861}.header-icons{display:flex;align-items:center;gap:8px}.clear-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center;color:#787861;font-size:1.5rem;cursor:pointer;border-radius:50%;transition:all .2s}.clear-icon:hover{background-color:#7878611a;color:#454733}.arrow{width:20px;height:20px;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='icon icon-tabler icons-tabler-outline icon-tabler-calendar-event'%3e%3cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3e%3cpath d='M4 5m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z' /%3e%3cpath d='M16 3l0 4' /%3e%3cpath d='M8 3l0 4' /%3e%3cpath d='M4 11l16 0' /%3e%3cpath d='M8 15h2v2h-2z' /%3e%3c/svg%3e\");background-repeat:no-repeat;background-size:20px;background-position:center;color:#787861;flex-shrink:0;transition:transform .2s}.arrow.open{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' class='icon icon-tabler icons-tabler-filled icon-tabler-calendar-event'%3e%3cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3e%3cpath d='M16 2a1 1 0 0 1 .993 .883l.007 .117v1h1a3 3 0 0 1 2.995 2.824l.005 .176v12a3 3 0 0 1 -2.824 2.995l-.176 .005h-12a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-12a3 3 0 0 1 2.824 -2.995l.176 -.005h1v-1a1 1 0 0 1 1.993 -.117l.007 .117v1h6v-1a1 1 0 0 1 1 -1m3 7h-14v9.625c0 .705 .386 1.286 .883 1.366l.117 .009h12c.513 0 .936 -.53 .993 -1.215l.007 -.16z' /%3e%3cpath d='M8 14h2v2h-2z' /%3e%3c/svg%3e\")}.dropdown{position:absolute;top:100%;left:0;right:0;background:#e3e3d1;border:1px solid #787861;border-top:none;border-radius:0 0 5px 5px;z-index:1000;box-shadow:0 4px 12px #00000026;min-width:400px}.datetime-content{display:flex}.calendar-section{flex:1;min-width:280px}.calendar-nav{display:flex;justify-content:space-between;align-items:center;padding:15px;border-bottom:1px solid rgba(120,120,97,.2)}.nav-section{display:flex;gap:5px}.nav-btn{background:none;border:none;color:#787861;cursor:pointer;font-size:1.2rem;padding:5px 10px;border-radius:3px;transition:all .2s}.nav-btn:hover{background-color:#a9a97f1a;color:#454733}.current-date{font-weight:500;color:#454733;font-size:1.1rem}.weekdays{display:grid;grid-template-columns:repeat(7,1fr);background:#7878611a}.weekday{padding:10px 5px;text-align:center;font-size:.9rem;font-weight:500;color:#787861}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr)}.calendar-day{padding:12px 5px;text-align:center;cursor:pointer;color:#454733;font-size:1rem;border-right:1px solid rgba(120,120,97,.1);border-bottom:1px solid rgba(120,120,97,.1);transition:all .2s}.calendar-day:hover:not(.disabled):not(.empty){background-color:#a9a97f33}.calendar-day.selected{background-color:#a9a97f;color:#e3e3d1;font-weight:500}.calendar-day.today:not(.selected){background-color:#a9a97f4d;font-weight:500}.calendar-day.disabled{color:#78786166;cursor:not-allowed}.calendar-day.empty{cursor:default}.calendar-day:nth-child(7n){border-right:none}.time-section{border-left:1px solid rgba(120,120,97,.2);min-width:140px;display:flex;flex-direction:column;background:#a9a97f0d}.time-header{padding:15px;border-bottom:1px solid rgba(120,120,97,.2);text-align:center;font-weight:500;color:#454733;background:#a9a97f1a}.time-selectors{display:flex;flex-direction:column;padding:15px;gap:20px;flex:1}.time-group{display:flex;align-items:center;gap:10px}.time-column{flex:1;display:flex;flex-direction:column;align-items:center}.time-label{font-size:.9rem;color:#787861;margin-bottom:10px;font-weight:500}.time-scroll{max-height:150px;overflow-y:auto;border:1px solid rgba(120,120,97,.2);border-radius:3px;width:50px;background:#a9a97f}.time-option{padding:8px 12px;text-align:center;cursor:pointer;color:#454733;font-size:1rem;transition:all .2s}.time-option:hover{background-color:#a9a97f1a}.time-option.selected{background-color:#a9a97f;color:#e3e3d1;font-weight:500}.time-separator-vertical{font-size:1.5rem;color:#787861;font-weight:700;align-self:flex-end;margin-bottom:10px}.time-scroll::-webkit-scrollbar{width:4px}.time-scroll::-webkit-scrollbar-track{background:#7878611a}.time-scroll::-webkit-scrollbar-thumb{background:#787861;border-radius:2px}.time-scroll::-webkit-scrollbar-thumb:hover{background:#a9a97f}.action-buttons{display:flex;justify-content:space-between;padding:15px;border-top:1px solid rgba(120,120,97,.2);gap:10px}.action-btn{padding:10px 20px;border:none;border-radius:3px;cursor:pointer;font-size:1rem;transition:all .2s}.action-btn.secondary{background:transparent;color:#787861;border:1px solid #787861}.action-btn.secondary:hover{background:#7878611a;color:#454733}.action-btn.primary{background:#a9a97f;color:#e3e3d1;border:1px solid #a9a97f}.action-btn.primary:hover{background:#969669;border-color:#969669}@media (max-width: 768px){.dropdown{min-width:320px}.datetime-content{flex-direction:column}.time-section{border-left:none;border-top:1px solid rgba(120,120,97,.2)}.time-selectors{flex-direction:row;justify-content:center;padding:15px}.time-group{gap:15px}.datetime-header{padding:10px 15px}.calendar-nav{padding:12px}.calendar-day{padding:10px 3px;font-size:.9rem}.action-buttons{padding:12px}}@media (max-width: 480px){.dropdown{min-width:280px}.time-section{min-width:auto}.time-scroll{width:45px}.time-selectors{padding:10px}}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DateTimePicker, decorators: [{
             type: Component,
@@ -1184,8 +1202,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                             useExisting: forwardRef(() => DateTimePicker),
                             multi: true,
                         },
-                    ], template: "<div class=\"datetime-container\">\r\n  <div\r\n    class=\"datetime-header\"\r\n    [class.active]=\"isOpen()\"\r\n    [class.disabled]=\"isDisabled()\"\r\n    (click)=\"toggle()\"\r\n    (keydown)=\"onKeyDown($event)\"\r\n    tabindex=\"0\"\r\n  >\r\n    <input\r\n      type=\"text\"\r\n      class=\"datetime-input\"\r\n      [value]=\"displayValue()\"\r\n      [placeholder]=\"placeholder()\"\r\n      (input)=\"onInputChange($event)\"\r\n      (focus)=\"onInputFocus()\"\r\n      (click)=\"$event.stopPropagation()\"\r\n      [disabled]=\"isDisabled()\"\r\n    />\r\n\r\n    <div class=\"header-icons\">\r\n      @if (selectedDate()) {\r\n      <span\r\n        class=\"clear-icon\"\r\n        (click)=\"clear(); $event.stopPropagation()\"\r\n        title=\"Limpiar\"\r\n      >\r\n        \u00D7\r\n      </span>\r\n      }\r\n      <span class=\"arrow\" [class.open]=\"isOpen()\"></span>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n@if (isOpen()) {\r\n<div class=\"dropdown\">\r\n  <div class=\"datetime-content\">\r\n    <!-- Secci\u00F3n del calendario -->\r\n    <div class=\"calendar-section\">\r\n      <!-- Navegaci\u00F3n del calendario -->\r\n      <div class=\"calendar-nav\">\r\n        <div class=\"nav-section\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"nav-btn\"\r\n            (click)=\"previousYear()\"\r\n            title=\"A\u00F1o anterior\"\r\n          >\r\n            \u2039\u2039\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"nav-btn\"\r\n            (click)=\"previousMonth()\"\r\n            title=\"Mes anterior\"\r\n          >\r\n            \u2039\r\n          </button>\r\n        </div>\r\n\r\n        <div class=\"current-date\">{{ monthName() }} {{ currentYear() }}</div>\r\n\r\n        <div class=\"nav-section\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"nav-btn\"\r\n            (click)=\"nextMonth()\"\r\n            title=\"Siguiente mes\"\r\n          >\r\n            \u203A\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"nav-btn\"\r\n            (click)=\"nextYear()\"\r\n            title=\"Siguiente a\u00F1o\"\r\n          >\r\n            \u203A\u203A\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- D\u00EDas de la semana -->\r\n      <div class=\"weekdays\">\r\n        <div class=\"weekday\">Dom</div>\r\n        <div class=\"weekday\">Lun</div>\r\n        <div class=\"weekday\">Mar</div>\r\n        <div class=\"weekday\">Mi\u00E9</div>\r\n        <div class=\"weekday\">Jue</div>\r\n        <div class=\"weekday\">Vie</div>\r\n        <div class=\"weekday\">S\u00E1b</div>\r\n      </div>\r\n\r\n      <!-- D\u00EDas del mes -->\r\n      <div class=\"calendar-grid\">\r\n        @for (day of calendarDays(); track $index) {\r\n        <div\r\n          class=\"calendar-day\"\r\n          [class.selected]=\"isDaySelected(day)\"\r\n          [class.today]=\"isToday(day)\"\r\n          [class.disabled]=\"isDayDisabled(day)\"\r\n          [class.empty]=\"!day\"\r\n          (click)=\"selectDay(day)\"\r\n        >\r\n          {{ day || '' }}\r\n        </div>\r\n        }\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Selector de tiempo (solo si mode === 'datetime') -->\r\n    @if (mode() === 'datetime') {\r\n    <div class=\"time-section\">\r\n      <div class=\"time-header\">Horario</div>\r\n\r\n      <div class=\"time-selectors\">\r\n        <div class=\"time-group\">\r\n          <div class=\"time-column\">\r\n            <div class=\"time-label\">Hora</div>\r\n            <div class=\"time-scroll\">\r\n              @for (hour of hours12(); track hour.value) {\r\n              <div\r\n                class=\"time-option\"\r\n                [class.selected]=\"hour.value === selectedHour12()\"\r\n                (click)=\"setHour12(hour.value)\"\r\n              >\r\n                {{ hour.display }}\r\n              </div>\r\n              }\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"time-separator-vertical\">:</div>\r\n\r\n          <div class=\"time-column\">\r\n            <div class=\"time-label\">Min</div>\r\n            <div class=\"time-scroll\">\r\n              @for (minute of minutes(); track minute) {\r\n              <div\r\n                class=\"time-option\"\r\n                [class.selected]=\"minute === selectedMinute()\"\r\n                (click)=\"setMinute(minute)\"\r\n              >\r\n                {{ minute.toString().padStart(2, '0') }}\r\n              </div>\r\n              }\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"time-column\">\r\n            <div class=\"time-label\">AM/PM</div>\r\n            <div class=\"time-scroll ampm\">\r\n              <div\r\n                class=\"time-option\"\r\n                [class.selected]=\"selectedAmPm() === 'AM'\"\r\n                (click)=\"setAmPm('AM')\"\r\n              >\r\n                AM\r\n              </div>\r\n              <div\r\n                class=\"time-option\"\r\n                [class.selected]=\"selectedAmPm() === 'PM'\"\r\n                (click)=\"setAmPm('PM')\"\r\n              >\r\n                PM\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    }\r\n  </div>\r\n\r\n  <!-- Botones de acci\u00F3n -->\r\n  <div class=\"action-buttons\">\r\n    <button type=\"button\" class=\"action-btn secondary\" (click)=\"today()\">\r\n      Hoy\r\n    </button>\r\n    @if (mode() === 'datetime') {\r\n    <button type=\"button\" class=\"action-btn primary\" (click)=\"close()\">\r\n      Aceptar\r\n    </button>\r\n    }\r\n  </div>\r\n</div>\r\n}\r\n", styles: [".datetime-container{position:relative;width:100%}.datetime-header{width:100%;border:1px solid #787861;border-radius:5px;padding:12px 15px;background-color:transparent;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:auto;transition:border-color .2s}.datetime-input{flex:1;border:none;outline:none;background:transparent;font-size:1.3rem;color:#454733;padding:0;margin:0}.datetime-input::placeholder{color:#787861}.datetime-input:disabled{cursor:not-allowed}.datetime-header:hover,.datetime-header:focus{outline:none;border-color:#a9a97f}.datetime-header.active{border-color:#a9a97f;outline:none}.datetime-header.disabled{cursor:not-allowed;opacity:.6}.selected-text{color:#454733;font-size:1.3rem;flex:1}.selected-text.placeholder{color:#787861}.header-icons{display:flex;align-items:center;gap:8px}.clear-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center;color:#787861;font-size:1.5rem;cursor:pointer;border-radius:50%;transition:all .2s}.clear-icon:hover{background-color:#7878611a;color:#454733}.arrow{width:20px;height:20px;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='icon icon-tabler icons-tabler-outline icon-tabler-calendar-event'%3e%3cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3e%3cpath d='M4 5m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z' /%3e%3cpath d='M16 3l0 4' /%3e%3cpath d='M8 3l0 4' /%3e%3cpath d='M4 11l16 0' /%3e%3cpath d='M8 15h2v2h-2z' /%3e%3c/svg%3e\");background-repeat:no-repeat;background-size:20px;background-position:center;color:#787861;flex-shrink:0;transition:transform .2s}.arrow.open{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' class='icon icon-tabler icons-tabler-filled icon-tabler-calendar-event'%3e%3cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3e%3cpath d='M16 2a1 1 0 0 1 .993 .883l.007 .117v1h1a3 3 0 0 1 2.995 2.824l.005 .176v12a3 3 0 0 1 -2.824 2.995l-.176 .005h-12a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-12a3 3 0 0 1 2.824 -2.995l.176 -.005h1v-1a1 1 0 0 1 1.993 -.117l.007 .117v1h6v-1a1 1 0 0 1 1 -1m3 7h-14v9.625c0 .705 .386 1.286 .883 1.366l.117 .009h12c.513 0 .936 -.53 .993 -1.215l.007 -.16z' /%3e%3cpath d='M8 14h2v2h-2z' /%3e%3c/svg%3e\")}.dropdown{position:absolute;top:100%;left:0;right:0;background:#e3e3d1;border:1px solid #787861;border-top:none;border-radius:0 0 5px 5px;z-index:1000;box-shadow:0 4px 12px #00000026;min-width:400px}.datetime-content{display:flex}.calendar-section{flex:1;min-width:280px}.calendar-nav{display:flex;justify-content:space-between;align-items:center;padding:15px;border-bottom:1px solid rgba(120,120,97,.2)}.nav-section{display:flex;gap:5px}.nav-btn{background:none;border:none;color:#787861;cursor:pointer;font-size:1.2rem;padding:5px 10px;border-radius:3px;transition:all .2s}.nav-btn:hover{background-color:#a9a97f1a;color:#454733}.current-date{font-weight:500;color:#454733;font-size:1.1rem}.weekdays{display:grid;grid-template-columns:repeat(7,1fr);background:#7878611a}.weekday{padding:10px 5px;text-align:center;font-size:.9rem;font-weight:500;color:#787861}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr)}.calendar-day{padding:12px 5px;text-align:center;cursor:pointer;color:#454733;font-size:1rem;border-right:1px solid rgba(120,120,97,.1);border-bottom:1px solid rgba(120,120,97,.1);transition:all .2s}.calendar-day:hover:not(.disabled):not(.empty){background-color:#a9a97f33}.calendar-day.selected{background-color:#a9a97f;color:#e3e3d1;font-weight:500}.calendar-day.today:not(.selected){background-color:#a9a97f4d;font-weight:500}.calendar-day.disabled{color:#78786166;cursor:not-allowed}.calendar-day.empty{cursor:default}.calendar-day:nth-child(7n){border-right:none}.time-section{border-left:1px solid rgba(120,120,97,.2);min-width:140px;display:flex;flex-direction:column;background:#a9a97f0d}.time-header{padding:15px;border-bottom:1px solid rgba(120,120,97,.2);text-align:center;font-weight:500;color:#454733;background:#a9a97f1a}.time-selectors{display:flex;flex-direction:column;padding:15px;gap:20px;flex:1}.time-group{display:flex;align-items:center;gap:10px}.time-column{flex:1;display:flex;flex-direction:column;align-items:center}.time-label{font-size:.9rem;color:#787861;margin-bottom:10px;font-weight:500}.time-scroll{max-height:150px;overflow-y:auto;border:1px solid rgba(120,120,97,.2);border-radius:3px;width:50px;background:#a9a97f}.time-option{padding:8px 12px;text-align:center;cursor:pointer;color:#454733;font-size:1rem;transition:all .2s}.time-option:hover{background-color:#a9a97f1a}.time-option.selected{background-color:#a9a97f;color:#e3e3d1;font-weight:500}.time-separator-vertical{font-size:1.5rem;color:#787861;font-weight:700;align-self:flex-end;margin-bottom:10px}.time-scroll::-webkit-scrollbar{width:4px}.time-scroll::-webkit-scrollbar-track{background:#7878611a}.time-scroll::-webkit-scrollbar-thumb{background:#787861;border-radius:2px}.time-scroll::-webkit-scrollbar-thumb:hover{background:#a9a97f}.action-buttons{display:flex;justify-content:space-between;padding:15px;border-top:1px solid rgba(120,120,97,.2);gap:10px}.action-btn{padding:10px 20px;border:none;border-radius:3px;cursor:pointer;font-size:1rem;transition:all .2s}.action-btn.secondary{background:transparent;color:#787861;border:1px solid #787861}.action-btn.secondary:hover{background:#7878611a;color:#454733}.action-btn.primary{background:#a9a97f;color:#e3e3d1;border:1px solid #a9a97f}.action-btn.primary:hover{background:#969669;border-color:#969669}@media (max-width: 768px){.dropdown{min-width:320px}.datetime-content{flex-direction:column}.time-section{border-left:none;border-top:1px solid rgba(120,120,97,.2)}.time-selectors{flex-direction:row;justify-content:center;padding:15px}.time-group{gap:15px}.datetime-header{padding:10px 15px}.calendar-nav{padding:12px}.calendar-day{padding:10px 3px;font-size:.9rem}.action-buttons{padding:12px}}@media (max-width: 480px){.dropdown{min-width:280px}.time-section{min-width:auto}.time-scroll{width:45px}.time-selectors{padding:10px}}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], dateChange: [{ type: i0.Output, args: ["dateChange"] }] } });
+                    ], template: "<div class=\"datetime-container\">\r\n  <div\r\n    class=\"datetime-header\"\r\n    [class.active]=\"isOpen()\"\r\n    [class.disabled]=\"isBlocked()\"\r\n    [class.readonly]=\"isBlocked()\"\r\n    (click)=\"!isBlocked() && toggle()\"\r\n    (keydown)=\"!isBlocked() && onKeyDown($event)\"\r\n    tabindex=\"0\"\r\n  >\r\n    <input\r\n      type=\"text\"\r\n      class=\"datetime-input\"\r\n      [value]=\"displayValue()\"\r\n      [placeholder]=\"placeholder()\"\r\n      (input)=\"onInputChange($event)\"\r\n      (focus)=\"!isBlocked() && onInputFocus()\"\r\n      (click)=\"$event.stopPropagation()\"\r\n      [disabled]=\"isDisabled()\"\r\n      [readOnly]=\"readonly()\"\r\n    />\r\n\r\n    <div class=\"header-icons\">\r\n      @if (selectedDate()) {\r\n      <span\r\n        class=\"clear-icon\"\r\n        (click)=\"!isBlocked() && clear(); $event.stopPropagation()\"\r\n        title=\"Limpiar\"\r\n      >\r\n        \u00D7\r\n      </span>\r\n      }\r\n      <span class=\"arrow\" [class.open]=\"isOpen()\"></span>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n@if (isOpen()) {\r\n<div class=\"dropdown\">\r\n  <div class=\"datetime-content\">\r\n    <!-- Secci\u00F3n del calendario -->\r\n    <div class=\"calendar-section\">\r\n      <!-- Navegaci\u00F3n del calendario -->\r\n      <div class=\"calendar-nav\">\r\n        <div class=\"nav-section\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"nav-btn\"\r\n            (click)=\"previousYear()\"\r\n            title=\"A\u00F1o anterior\"\r\n          >\r\n            \u2039\u2039\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"nav-btn\"\r\n            (click)=\"previousMonth()\"\r\n            title=\"Mes anterior\"\r\n          >\r\n            \u2039\r\n          </button>\r\n        </div>\r\n\r\n        <div class=\"current-date\">{{ monthName() }} {{ currentYear() }}</div>\r\n\r\n        <div class=\"nav-section\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"nav-btn\"\r\n            (click)=\"nextMonth()\"\r\n            title=\"Siguiente mes\"\r\n          >\r\n            \u203A\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"nav-btn\"\r\n            (click)=\"nextYear()\"\r\n            title=\"Siguiente a\u00F1o\"\r\n          >\r\n            \u203A\u203A\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- D\u00EDas de la semana -->\r\n      <div class=\"weekdays\">\r\n        <div class=\"weekday\">Dom</div>\r\n        <div class=\"weekday\">Lun</div>\r\n        <div class=\"weekday\">Mar</div>\r\n        <div class=\"weekday\">Mi\u00E9</div>\r\n        <div class=\"weekday\">Jue</div>\r\n        <div class=\"weekday\">Vie</div>\r\n        <div class=\"weekday\">S\u00E1b</div>\r\n      </div>\r\n\r\n      <!-- D\u00EDas del mes -->\r\n      <div class=\"calendar-grid\">\r\n        @for (day of calendarDays(); track $index) {\r\n        <div\r\n          class=\"calendar-day\"\r\n          [class.selected]=\"isDaySelected(day)\"\r\n          [class.today]=\"isToday(day)\"\r\n          [class.disabled]=\"isDayDisabled(day)\"\r\n          [class.empty]=\"!day\"\r\n          (click)=\"selectDay(day)\"\r\n        >\r\n          {{ day || '' }}\r\n        </div>\r\n        }\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Selector de tiempo (solo si mode === 'datetime') -->\r\n    @if (mode() === 'datetime') {\r\n    <div class=\"time-section\">\r\n      <div class=\"time-header\">Horario</div>\r\n\r\n      <div class=\"time-selectors\">\r\n        <div class=\"time-group\">\r\n          <div class=\"time-column\">\r\n            <div class=\"time-label\">Hora</div>\r\n            <div class=\"time-scroll\">\r\n              @for (hour of hours12(); track hour.value) {\r\n              <div\r\n                class=\"time-option\"\r\n                [class.selected]=\"hour.value === selectedHour12()\"\r\n                (click)=\"setHour12(hour.value)\"\r\n              >\r\n                {{ hour.display }}\r\n              </div>\r\n              }\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"time-separator-vertical\">:</div>\r\n\r\n          <div class=\"time-column\">\r\n            <div class=\"time-label\">Min</div>\r\n            <div class=\"time-scroll\">\r\n              @for (minute of minutes(); track minute) {\r\n              <div\r\n                class=\"time-option\"\r\n                [class.selected]=\"minute === selectedMinute()\"\r\n                (click)=\"setMinute(minute)\"\r\n              >\r\n                {{ minute.toString().padStart(2, '0') }}\r\n              </div>\r\n              }\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"time-column\">\r\n            <div class=\"time-label\">AM/PM</div>\r\n            <div class=\"time-scroll ampm\">\r\n              <div\r\n                class=\"time-option\"\r\n                [class.selected]=\"selectedAmPm() === 'AM'\"\r\n                (click)=\"setAmPm('AM')\"\r\n              >\r\n                AM\r\n              </div>\r\n              <div\r\n                class=\"time-option\"\r\n                [class.selected]=\"selectedAmPm() === 'PM'\"\r\n                (click)=\"setAmPm('PM')\"\r\n              >\r\n                PM\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    }\r\n  </div>\r\n\r\n  <!-- Botones de acci\u00F3n -->\r\n  <div class=\"action-buttons\">\r\n    <button type=\"button\" class=\"action-btn secondary\" (click)=\"today()\">\r\n      Hoy\r\n    </button>\r\n    @if (mode() === 'datetime') {\r\n    <button type=\"button\" class=\"action-btn primary\" (click)=\"close()\">\r\n      Aceptar\r\n    </button>\r\n    }\r\n  </div>\r\n</div>\r\n}\r\n", styles: [".datetime-container{position:relative;width:100%}.datetime-header{width:100%;border:1px solid #787861;border-radius:5px;padding:12px 15px;background-color:transparent;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:auto;transition:border-color .2s}.datetime-input{flex:1;border:none;outline:none;background:transparent;font-size:1.3rem;color:#454733;padding:0;margin:0}.datetime-input::placeholder{color:#787861}.datetime-input:disabled{cursor:not-allowed}.datetime-header:hover,.datetime-header:focus{outline:none;border-color:#a9a97f}.datetime-header.active{border-color:#a9a97f;outline:none}.datetime-header.disabled,.datetime-header.readonly{pointer-events:none;opacity:.6;cursor:not-allowed}.selected-text{color:#454733;font-size:1.3rem;flex:1}.selected-text.placeholder{color:#787861}.header-icons{display:flex;align-items:center;gap:8px}.clear-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center;color:#787861;font-size:1.5rem;cursor:pointer;border-radius:50%;transition:all .2s}.clear-icon:hover{background-color:#7878611a;color:#454733}.arrow{width:20px;height:20px;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='icon icon-tabler icons-tabler-outline icon-tabler-calendar-event'%3e%3cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3e%3cpath d='M4 5m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z' /%3e%3cpath d='M16 3l0 4' /%3e%3cpath d='M8 3l0 4' /%3e%3cpath d='M4 11l16 0' /%3e%3cpath d='M8 15h2v2h-2z' /%3e%3c/svg%3e\");background-repeat:no-repeat;background-size:20px;background-position:center;color:#787861;flex-shrink:0;transition:transform .2s}.arrow.open{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' class='icon icon-tabler icons-tabler-filled icon-tabler-calendar-event'%3e%3cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3e%3cpath d='M16 2a1 1 0 0 1 .993 .883l.007 .117v1h1a3 3 0 0 1 2.995 2.824l.005 .176v12a3 3 0 0 1 -2.824 2.995l-.176 .005h-12a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-12a3 3 0 0 1 2.824 -2.995l.176 -.005h1v-1a1 1 0 0 1 1.993 -.117l.007 .117v1h6v-1a1 1 0 0 1 1 -1m3 7h-14v9.625c0 .705 .386 1.286 .883 1.366l.117 .009h12c.513 0 .936 -.53 .993 -1.215l.007 -.16z' /%3e%3cpath d='M8 14h2v2h-2z' /%3e%3c/svg%3e\")}.dropdown{position:absolute;top:100%;left:0;right:0;background:#e3e3d1;border:1px solid #787861;border-top:none;border-radius:0 0 5px 5px;z-index:1000;box-shadow:0 4px 12px #00000026;min-width:400px}.datetime-content{display:flex}.calendar-section{flex:1;min-width:280px}.calendar-nav{display:flex;justify-content:space-between;align-items:center;padding:15px;border-bottom:1px solid rgba(120,120,97,.2)}.nav-section{display:flex;gap:5px}.nav-btn{background:none;border:none;color:#787861;cursor:pointer;font-size:1.2rem;padding:5px 10px;border-radius:3px;transition:all .2s}.nav-btn:hover{background-color:#a9a97f1a;color:#454733}.current-date{font-weight:500;color:#454733;font-size:1.1rem}.weekdays{display:grid;grid-template-columns:repeat(7,1fr);background:#7878611a}.weekday{padding:10px 5px;text-align:center;font-size:.9rem;font-weight:500;color:#787861}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr)}.calendar-day{padding:12px 5px;text-align:center;cursor:pointer;color:#454733;font-size:1rem;border-right:1px solid rgba(120,120,97,.1);border-bottom:1px solid rgba(120,120,97,.1);transition:all .2s}.calendar-day:hover:not(.disabled):not(.empty){background-color:#a9a97f33}.calendar-day.selected{background-color:#a9a97f;color:#e3e3d1;font-weight:500}.calendar-day.today:not(.selected){background-color:#a9a97f4d;font-weight:500}.calendar-day.disabled{color:#78786166;cursor:not-allowed}.calendar-day.empty{cursor:default}.calendar-day:nth-child(7n){border-right:none}.time-section{border-left:1px solid rgba(120,120,97,.2);min-width:140px;display:flex;flex-direction:column;background:#a9a97f0d}.time-header{padding:15px;border-bottom:1px solid rgba(120,120,97,.2);text-align:center;font-weight:500;color:#454733;background:#a9a97f1a}.time-selectors{display:flex;flex-direction:column;padding:15px;gap:20px;flex:1}.time-group{display:flex;align-items:center;gap:10px}.time-column{flex:1;display:flex;flex-direction:column;align-items:center}.time-label{font-size:.9rem;color:#787861;margin-bottom:10px;font-weight:500}.time-scroll{max-height:150px;overflow-y:auto;border:1px solid rgba(120,120,97,.2);border-radius:3px;width:50px;background:#a9a97f}.time-option{padding:8px 12px;text-align:center;cursor:pointer;color:#454733;font-size:1rem;transition:all .2s}.time-option:hover{background-color:#a9a97f1a}.time-option.selected{background-color:#a9a97f;color:#e3e3d1;font-weight:500}.time-separator-vertical{font-size:1.5rem;color:#787861;font-weight:700;align-self:flex-end;margin-bottom:10px}.time-scroll::-webkit-scrollbar{width:4px}.time-scroll::-webkit-scrollbar-track{background:#7878611a}.time-scroll::-webkit-scrollbar-thumb{background:#787861;border-radius:2px}.time-scroll::-webkit-scrollbar-thumb:hover{background:#a9a97f}.action-buttons{display:flex;justify-content:space-between;padding:15px;border-top:1px solid rgba(120,120,97,.2);gap:10px}.action-btn{padding:10px 20px;border:none;border-radius:3px;cursor:pointer;font-size:1rem;transition:all .2s}.action-btn.secondary{background:transparent;color:#787861;border:1px solid #787861}.action-btn.secondary:hover{background:#7878611a;color:#454733}.action-btn.primary{background:#a9a97f;color:#e3e3d1;border:1px solid #a9a97f}.action-btn.primary:hover{background:#969669;border-color:#969669}@media (max-width: 768px){.dropdown{min-width:320px}.datetime-content{flex-direction:column}.time-section{border-left:none;border-top:1px solid rgba(120,120,97,.2)}.time-selectors{flex-direction:row;justify-content:center;padding:15px}.time-group{gap:15px}.datetime-header{padding:10px 15px}.calendar-nav{padding:12px}.calendar-day{padding:10px 3px;font-size:.9rem}.action-buttons{padding:12px}}@media (max-width: 480px){.dropdown{min-width:280px}.time-section{min-width:auto}.time-scroll{width:45px}.time-selectors{padding:10px}}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], dateChange: [{ type: i0.Output, args: ["dateChange"] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }] } });
 
 class InputNumberFilter {
     // Inputs
@@ -1604,6 +1622,8 @@ class SelectCustomSearch {
     searchTerm = signal('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : []));
     selectedValue = signal(null, ...(ngDevMode ? [{ debugName: "selectedValue" }] : []));
     isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
+    isBlocked = computed(() => this.isDisabled() || this.readonly(), ...(ngDevMode ? [{ debugName: "isBlocked" }] : []));
     selectedOption = computed(() => {
         const value = this.selectedValue();
         return this.options().find((option) => option.value === value) || null;
@@ -1634,7 +1654,7 @@ class SelectCustomSearch {
         this.isDisabled.set(isDisabled);
     }
     toggle() {
-        if (this.isDisabled())
+        if (this.isBlocked())
             return;
         if (this.isOpen()) {
             this.close();
@@ -1644,7 +1664,7 @@ class SelectCustomSearch {
         }
     }
     open() {
-        if (this.isDisabled())
+        if (this.isBlocked())
             return;
         this.isOpen.set(true);
         this.searchTerm.set('');
@@ -1659,7 +1679,7 @@ class SelectCustomSearch {
         this.searchTerm.set('');
     }
     selectOption(option) {
-        if (this.isDisabled())
+        if (this.isBlocked())
             return;
         this.selectedValue.set(option.value);
         this.onChange(option.value);
@@ -1668,13 +1688,13 @@ class SelectCustomSearch {
         this.close();
     }
     onSearch(event) {
-        if (this.isDisabled())
+        if (this.isBlocked())
             return;
         const target = event.target;
         this.searchTerm.set(target.value);
     }
     onKeyDown(event) {
-        if (this.isDisabled())
+        if (this.isBlocked())
             return;
         if (event.key === 'Escape') {
             this.close();
@@ -1687,18 +1707,18 @@ class SelectCustomSearch {
         }
     }
     onDocumentClick(event) {
-        if (!this.isDisabled() && !this.elementRef.nativeElement.contains(event.target)) {
+        if (!this.isBlocked() && !this.elementRef.nativeElement.contains(event.target)) {
             this.close();
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SelectCustomSearch, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: SelectCustomSearch, isStandalone: true, selector: "lib-select-custom-search", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: SelectCustomSearch, isStandalone: true, selector: "lib-select-custom-search", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => SelectCustomSearch),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div class=\"select-container\">\r\n  <div class=\"select-header\" [class.active]=\"isOpen()\" (click)=\"toggle()\">\r\n    <span class=\"selected-text\" [class.placeholder]=\"!selectedOption()\">\r\n      {{ selectedOption()?.label || placeholder() }}\r\n    </span>\r\n\r\n    <span class=\"arrow\" [class.open]=\"isOpen()\"></span>\r\n  </div>\r\n\r\n  @if (isOpen()) {\r\n  <div class=\"dropdown\">\r\n    <input\r\n      type=\"text\"\r\n      class=\"search-input\"\r\n      [value]=\"searchTerm()\"\r\n      placeholder=\"Buscar...\"\r\n      (input)=\"onSearch($event)\"\r\n      (keydown)=\"onKeyDown($event)\"\r\n    />\r\n\r\n    @if (filteredOptions().length > 0) {\r\n    <div class=\"options\">\r\n      @for (option of filteredOptions(); track option.value) {\r\n      <div\r\n        class=\"option\"\r\n        [class.selected]=\"option.value === selectedValue()\"\r\n        (click)=\"selectOption(option)\"\r\n        [attr.disabled]=\"isDisabled()\"\r\n      >\r\n        {{ option.label }}\r\n      </div>\r\n      }\r\n    </div>\r\n    } @else {\r\n    <div class=\"no-results\">No se encontraron resultados</div>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [".select-container{position:relative;width:100%}.select-header{width:100%;border:1px solid #787861;border-radius:5px;padding:15px;background-color:transparent;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:auto}.select-header:hover,.select-header:focus{outline:none;border-color:#a9a97f}.select-header.active{border-color:#a9a97f;outline:none}.selected-text{color:#454733;font-size:1.3rem}.selected-text.placeholder{color:#787861}.arrow{width:15px;height:15px;background-image:url(\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\");background-repeat:no-repeat;background-size:15px;background-position:center;color:#787861;flex-shrink:0;transition:transform .2s}.arrow.open{transform:rotate(180deg)}.dropdown{position:absolute;top:100%;left:0;right:0;background:#e3e3d1;border:1px solid #787861;border-top:none;border-radius:0 0 5px 5px;max-height:250px;overflow:hidden;z-index:1000;box-shadow:0 2px 8px #0000001a}.search-input{width:100%;border:none;border-bottom:1px solid #787861;border-radius:0;padding:15px;background-color:transparent;outline:none;font-size:inherit;color:#454733;font-size:1.3rem}.search-input::placeholder{color:#787861}.search-input:focus{outline:none;border-bottom-color:#a9a97f}.options{max-height:180px;overflow-y:auto;background:#e3e3d1}.option{padding:15px;cursor:pointer;border-bottom:1px solid rgba(120,120,97,.2);color:#454733;background:#e3e3d1;font-size:1.3rem}.option:hover{background-color:#a9a97f1a;color:#454733}.option.selected{background-color:#a9a97f;color:#e3e3d1;font-weight:500}.option:last-child{border-bottom:none}.no-results{padding:15px;text-align:center;color:#787861;font-style:italic;background:#e3e3d1;font-size:1.3rem}.options::-webkit-scrollbar{width:6px}.options::-webkit-scrollbar-track{background:#7878611a}.options::-webkit-scrollbar-thumb{background:#787861;border-radius:3px}.options::-webkit-scrollbar-thumb:hover{background:#a9a97f}@media (max-width: 768px){.select-header,.search-input,.option{padding:12px 15px}}\n"] });
+        ], ngImport: i0, template: "<div class=\"select-container\">\r\n  <div\r\n    class=\"select-header\"\r\n    [class.active]=\"isOpen()\"\r\n    [class.disabled]=\"isBlocked()\"\r\n    [class.readonly]=\"isBlocked()\"\r\n    (click)=\"!isBlocked() && toggle()\"\r\n    (keydown)=\"!isBlocked() && onKeyDown($event)\"\r\n    tabindex=\"0\"\r\n  >\r\n    <span class=\"selected-text\" [class.placeholder]=\"!selectedOption()\">\r\n      {{ selectedOption()?.label || placeholder() }}\r\n    </span>\r\n\r\n    <span class=\"arrow\" [class.open]=\"isOpen()\"></span>\r\n  </div>\r\n\r\n  @if (isOpen()) {\r\n  <div class=\"dropdown\">\r\n    <input\r\n      type=\"text\"\r\n      class=\"search-input\"\r\n      [value]=\"searchTerm()\"\r\n      placeholder=\"Buscar...\"\r\n      (input)=\"!isBlocked() &&onSearch($event)\"\r\n      (keydown)=\"!isBlocked() && onKeyDown($event)\"\r\n    />\r\n\r\n    @if (filteredOptions().length > 0) {\r\n    <div class=\"options\">\r\n      @for (option of filteredOptions(); track option.value) {\r\n      <div\r\n        class=\"option\"\r\n        [class.selected]=\"option.value === selectedValue()\"\r\n        (click)=\"!isBlocked() && selectOption(option)\"\r\n        [attr.disabled]=\"isBlocked()\"\r\n      >\r\n        {{ option.label }}\r\n      </div>\r\n      }\r\n    </div>\r\n    } @else {\r\n    <div class=\"no-results\">No se encontraron resultados</div>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [".select-container{position:relative;width:100%}.select-header{width:100%;border:1px solid #787861;border-radius:5px;padding:15px;background-color:transparent;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:auto}.select-header:hover,.select-header:focus{outline:none;border-color:#a9a97f}.select-header.active{border-color:#a9a97f;outline:none}.select-header.disabled,.select-header.readonly{cursor:not-allowed;opacity:.6;pointer-events:none}.selected-text{color:#454733;font-size:1.3rem}.selected-text.placeholder{color:#787861}.arrow{width:15px;height:15px;background-image:url(\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\");background-repeat:no-repeat;background-size:15px;background-position:center;color:#787861;flex-shrink:0;transition:transform .2s}.arrow.open{transform:rotate(180deg)}.dropdown{position:absolute;top:100%;left:0;right:0;background:#e3e3d1;border:1px solid #787861;border-top:none;border-radius:0 0 5px 5px;max-height:250px;overflow:hidden;z-index:1000;box-shadow:0 2px 8px #0000001a}.search-input{width:100%;border:none;border-bottom:1px solid #787861;border-radius:0;padding:15px;background-color:transparent;outline:none;font-size:inherit;color:#454733;font-size:1.3rem}.search-input::placeholder{color:#787861}.search-input:focus{outline:none;border-bottom-color:#a9a97f}.options{max-height:180px;overflow-y:auto;background:#e3e3d1}.option{padding:15px;cursor:pointer;border-bottom:1px solid rgba(120,120,97,.2);color:#454733;background:#e3e3d1;font-size:1.3rem}.option:hover{background-color:#a9a97f1a;color:#454733}.option.selected{background-color:#a9a97f;color:#e3e3d1;font-weight:500}.option:last-child{border-bottom:none}.no-results{padding:15px;text-align:center;color:#787861;font-style:italic;background:#e3e3d1;font-size:1.3rem}.options::-webkit-scrollbar{width:6px}.options::-webkit-scrollbar-track{background:#7878611a}.options::-webkit-scrollbar-thumb{background:#787861;border-radius:3px}.options::-webkit-scrollbar-thumb:hover{background:#a9a97f}@media (max-width: 768px){.select-header,.search-input,.option{padding:12px 15px}}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SelectCustomSearch, decorators: [{
             type: Component,
@@ -1708,8 +1728,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                             useExisting: forwardRef(() => SelectCustomSearch),
                             multi: true,
                         },
-                    ], template: "<div class=\"select-container\">\r\n  <div class=\"select-header\" [class.active]=\"isOpen()\" (click)=\"toggle()\">\r\n    <span class=\"selected-text\" [class.placeholder]=\"!selectedOption()\">\r\n      {{ selectedOption()?.label || placeholder() }}\r\n    </span>\r\n\r\n    <span class=\"arrow\" [class.open]=\"isOpen()\"></span>\r\n  </div>\r\n\r\n  @if (isOpen()) {\r\n  <div class=\"dropdown\">\r\n    <input\r\n      type=\"text\"\r\n      class=\"search-input\"\r\n      [value]=\"searchTerm()\"\r\n      placeholder=\"Buscar...\"\r\n      (input)=\"onSearch($event)\"\r\n      (keydown)=\"onKeyDown($event)\"\r\n    />\r\n\r\n    @if (filteredOptions().length > 0) {\r\n    <div class=\"options\">\r\n      @for (option of filteredOptions(); track option.value) {\r\n      <div\r\n        class=\"option\"\r\n        [class.selected]=\"option.value === selectedValue()\"\r\n        (click)=\"selectOption(option)\"\r\n        [attr.disabled]=\"isDisabled()\"\r\n      >\r\n        {{ option.label }}\r\n      </div>\r\n      }\r\n    </div>\r\n    } @else {\r\n    <div class=\"no-results\">No se encontraron resultados</div>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [".select-container{position:relative;width:100%}.select-header{width:100%;border:1px solid #787861;border-radius:5px;padding:15px;background-color:transparent;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:auto}.select-header:hover,.select-header:focus{outline:none;border-color:#a9a97f}.select-header.active{border-color:#a9a97f;outline:none}.selected-text{color:#454733;font-size:1.3rem}.selected-text.placeholder{color:#787861}.arrow{width:15px;height:15px;background-image:url(\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\");background-repeat:no-repeat;background-size:15px;background-position:center;color:#787861;flex-shrink:0;transition:transform .2s}.arrow.open{transform:rotate(180deg)}.dropdown{position:absolute;top:100%;left:0;right:0;background:#e3e3d1;border:1px solid #787861;border-top:none;border-radius:0 0 5px 5px;max-height:250px;overflow:hidden;z-index:1000;box-shadow:0 2px 8px #0000001a}.search-input{width:100%;border:none;border-bottom:1px solid #787861;border-radius:0;padding:15px;background-color:transparent;outline:none;font-size:inherit;color:#454733;font-size:1.3rem}.search-input::placeholder{color:#787861}.search-input:focus{outline:none;border-bottom-color:#a9a97f}.options{max-height:180px;overflow-y:auto;background:#e3e3d1}.option{padding:15px;cursor:pointer;border-bottom:1px solid rgba(120,120,97,.2);color:#454733;background:#e3e3d1;font-size:1.3rem}.option:hover{background-color:#a9a97f1a;color:#454733}.option.selected{background-color:#a9a97f;color:#e3e3d1;font-weight:500}.option:last-child{border-bottom:none}.no-results{padding:15px;text-align:center;color:#787861;font-style:italic;background:#e3e3d1;font-size:1.3rem}.options::-webkit-scrollbar{width:6px}.options::-webkit-scrollbar-track{background:#7878611a}.options::-webkit-scrollbar-thumb{background:#787861;border-radius:3px}.options::-webkit-scrollbar-thumb:hover{background:#a9a97f}@media (max-width: 768px){.select-header,.search-input,.option{padding:12px 15px}}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], onDocumentClick: [{
+                    ], template: "<div class=\"select-container\">\r\n  <div\r\n    class=\"select-header\"\r\n    [class.active]=\"isOpen()\"\r\n    [class.disabled]=\"isBlocked()\"\r\n    [class.readonly]=\"isBlocked()\"\r\n    (click)=\"!isBlocked() && toggle()\"\r\n    (keydown)=\"!isBlocked() && onKeyDown($event)\"\r\n    tabindex=\"0\"\r\n  >\r\n    <span class=\"selected-text\" [class.placeholder]=\"!selectedOption()\">\r\n      {{ selectedOption()?.label || placeholder() }}\r\n    </span>\r\n\r\n    <span class=\"arrow\" [class.open]=\"isOpen()\"></span>\r\n  </div>\r\n\r\n  @if (isOpen()) {\r\n  <div class=\"dropdown\">\r\n    <input\r\n      type=\"text\"\r\n      class=\"search-input\"\r\n      [value]=\"searchTerm()\"\r\n      placeholder=\"Buscar...\"\r\n      (input)=\"!isBlocked() &&onSearch($event)\"\r\n      (keydown)=\"!isBlocked() && onKeyDown($event)\"\r\n    />\r\n\r\n    @if (filteredOptions().length > 0) {\r\n    <div class=\"options\">\r\n      @for (option of filteredOptions(); track option.value) {\r\n      <div\r\n        class=\"option\"\r\n        [class.selected]=\"option.value === selectedValue()\"\r\n        (click)=\"!isBlocked() && selectOption(option)\"\r\n        [attr.disabled]=\"isBlocked()\"\r\n      >\r\n        {{ option.label }}\r\n      </div>\r\n      }\r\n    </div>\r\n    } @else {\r\n    <div class=\"no-results\">No se encontraron resultados</div>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [".select-container{position:relative;width:100%}.select-header{width:100%;border:1px solid #787861;border-radius:5px;padding:15px;background-color:transparent;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:auto}.select-header:hover,.select-header:focus{outline:none;border-color:#a9a97f}.select-header.active{border-color:#a9a97f;outline:none}.select-header.disabled,.select-header.readonly{cursor:not-allowed;opacity:.6;pointer-events:none}.selected-text{color:#454733;font-size:1.3rem}.selected-text.placeholder{color:#787861}.arrow{width:15px;height:15px;background-image:url(\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\");background-repeat:no-repeat;background-size:15px;background-position:center;color:#787861;flex-shrink:0;transition:transform .2s}.arrow.open{transform:rotate(180deg)}.dropdown{position:absolute;top:100%;left:0;right:0;background:#e3e3d1;border:1px solid #787861;border-top:none;border-radius:0 0 5px 5px;max-height:250px;overflow:hidden;z-index:1000;box-shadow:0 2px 8px #0000001a}.search-input{width:100%;border:none;border-bottom:1px solid #787861;border-radius:0;padding:15px;background-color:transparent;outline:none;font-size:inherit;color:#454733;font-size:1.3rem}.search-input::placeholder{color:#787861}.search-input:focus{outline:none;border-bottom-color:#a9a97f}.options{max-height:180px;overflow-y:auto;background:#e3e3d1}.option{padding:15px;cursor:pointer;border-bottom:1px solid rgba(120,120,97,.2);color:#454733;background:#e3e3d1;font-size:1.3rem}.option:hover{background-color:#a9a97f1a;color:#454733}.option.selected{background-color:#a9a97f;color:#e3e3d1;font-weight:500}.option:last-child{border-bottom:none}.no-results{padding:15px;text-align:center;color:#787861;font-style:italic;background:#e3e3d1;font-size:1.3rem}.options::-webkit-scrollbar{width:6px}.options::-webkit-scrollbar-track{background:#7878611a}.options::-webkit-scrollbar-thumb{background:#787861;border-radius:3px}.options::-webkit-scrollbar-thumb:hover{background:#a9a97f}@media (max-width: 768px){.select-header,.search-input,.option{padding:12px 15px}}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], onDocumentClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
             }] } });
@@ -1821,11 +1841,11 @@ class DynamicFormFields {
     onCancel() {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicFormFields, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DynamicFormFields, isStandalone: true, selector: "lib-dynamic-form-fields", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (form()) {\r\n<form class=\"form\" [formGroup]=\"form()\" [class.form--compact]=\"compact()\">\r\n  @for (sec of sections(); track $index) {\r\n  <section class=\"section\">\r\n    @if (sec.title) {\r\n    <h3 class=\"section-title\">{{ sec.title }}</h3>\r\n    } @if (sec.description) {\r\n    <p class=\"section-desc\">{{ sec.description }}</p>\r\n    }\r\n\r\n    <div class=\"grid\">\r\n      @for (f of sec.fields; track f.key) {\r\n      <div class=\"col\" [style.--col-span]=\"f.col || 6\">\r\n        @if(f.label) {\r\n        <label [class.label-radio]=\"f.type === 'radio'\" [class.label-checkbox]=\"f.type === 'checkbox'\"\r\n          [class.label-disabled]=\"f.readonly\" class=\"label\">\r\n          {{ f.label }} </label>} @if (['text','number','email', 'password', 'time'].includes(f.type))\r\n        {\r\n        <input class=\"input\" [type]=\"f.type\" [placeholder]=\"f.placeholder\" [formControlName]=\"f.key\"\r\n          [readonly]=\"f.readonly\" />\r\n        } @if (['date', 'datetime-local'].includes(f.type)) {\r\n        <lib-date-time-picker [mode]=\"getDatePickerMode(f.type)\" [placeholder]=\"\r\n            f.placeholder ||\r\n            (f.type === 'date'\r\n              ? 'Seleccionar fecha'\r\n              : 'Seleccionar fecha y hora')\r\n          \" [formControlName]=\"f.key\" [minDate]=\"f.minDate || null\" [maxDate]=\"f.maxDate || null\" />\r\n        } @if (f.type === 'textarea') {\r\n        <textarea class=\"input textarea\" [placeholder]=\"f.placeholder\" [formControlName]=\"f.key\" rows=\"6\"></textarea>\r\n        }@if (f.type === 'select') {\r\n\r\n        <lib-select-custom-search [options]=\"f.options ?? []\" [placeholder]=\"f.placeholder || 'Seleccionar...'\"\r\n          [formControlName]=\"f.key\" />\r\n        } @if (f.type === 'radio') {\r\n        <div class=\"radio-group\">\r\n          @for (o of f.options ?? []; track o.value) {\r\n          <label class=\"radio\">\r\n            {{ o.label }}\r\n            <input type=\"radio\" [value]=\"o.value\" [formControlName]=\"f.key\" />\r\n          </label>\r\n          }\r\n        </div>\r\n        } @if (f.type === 'checkbox') {\r\n        <div class=\"checkbox-group\">\r\n          @for (o of f.options ?? []; track o.value; let i = $index) {\r\n          <label class=\"checkbox\">\r\n            {{ o.label }}\r\n            <input type=\"checkbox\" [checked]=\"getCheckboxArray(f.key).at(i).value\"\r\n              (change)=\"onCheckboxChange($event, f.key, i)\" />\r\n          </label>\r\n          }\r\n        </div>\r\n        } @if (f.type === 'disabled') {\r\n        <label class=\"label\">{{ f.label }}</label>\r\n        <input class=\"input input--disabled\" [placeholder]=\"f.placeholder || 'Autom\u00E1tico'\" disabled />\r\n        } @if (ctrl(f.key)?.touched && ctrl(f.key)?.invalid) {\r\n        <div class=\"error\">\r\n          @if (ctrl(f.key)?.errors?.['required']) {\r\n          <span>Campo requerido</span>\r\n          } @if (ctrl(f.key)?.errors?.['email']) {\r\n          <span>Correo inv\u00E1lido</span>\r\n          } @if (ctrl(f.key)?.errors?.['pattern']) {\r\n          <span>\r\n            @switch (f.patternType) { @case ('numbers') { Solo se permiten\r\n            n\u00FAmeros } @case ('phone') { Formato de tel\u00E9fono inv\u00E1lido } @case\r\n            ('text') { Solo se permiten letras y espacios } @case ('username') {\r\n            Solo se permiten letras, n\u00FAmeros, puntos y guiones bajos (no al\r\n            inicio ni al final) } @case ('alphanumeric') { Solo se permiten\r\n            letras y n\u00FAmeros } @default { Formato inv\u00E1lido } }\r\n          </span>\r\n          } @if (ctrl(f.key)?.errors?.['notMatching']) {\r\n          <span>Las contrase\u00F1as no coinciden</span>\r\n          }\r\n        </div>\r\n        }\r\n      </div>\r\n      }\r\n    </div>\r\n  </section>\r\n  }\r\n</form>\r\n}", styles: [".form{width:100%}.form{display:grid}.section{padding:20px 0 0}.section-title{font-size:1.6rem;font-weight:700;margin-bottom:30px}.section-desc{margin:0 0 .75rem;color:#666}.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:25px}.col{grid-column:span var(--col-span, 6);min-width:0;width:100%;position:relative;padding-bottom:20px}.label{position:absolute;top:-8px;left:12px;font-size:1.2rem;color:#454733;background-color:var(--surface-container-high, #f3eedc);padding:0 4px;font-weight:500;z-index:1}.input{width:100%;border:1px solid #787861;border-radius:5px;padding:15px;background-color:transparent}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=date]::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:auto;height:auto;color:transparent;background:transparent}.input:focus{outline:none;border-color:#a9a97f}.input--disabled{color:#888}.label-radio{font-size:1.4rem;position:static;padding-left:0}.radio-group{display:flex;gap:1rem;padding:.5rem 0}.radio{font-size:1.4rem;display:flex;align-items:center;gap:10px;color:#1c1c12;margin-top:20px}.error{position:absolute;bottom:0;left:0;font-size:1.2rem;color:#b00020;width:100%;height:15px;display:none}.col:has(.error) .error{display:block}.textarea{resize:vertical;min-height:100px;line-height:1.5}select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url(\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\");background-repeat:no-repeat;background-size:15px;background-position:right 15px center;cursor:pointer}select:invalid{color:#787861}select.placeholder-selected{color:#787861}select:not(.placeholder-selected){color:#000}select option{color:#454733;cursor:pointer}input[type=date]{color:#787861!important}input[type=date]:valid{color:#454733!important}.label-disabled{color:#1c1c1266}.input:disabled,.input[readonly]{border:1px solid #a9a97f;color:#a9a97f}@media (max-width: 768px){.grid{grid-template-columns:1fr}.col{grid-column:span 1!important}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$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: i1$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: SelectCustomSearch, selector: "lib-select-custom-search", inputs: ["options", "placeholder"], outputs: ["selectionChange"] }, { kind: "component", type: DateTimePicker, selector: "lib-date-time-picker", inputs: ["mode", "placeholder", "minDate", "maxDate"], outputs: ["dateChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DynamicFormFields, isStandalone: true, selector: "lib-dynamic-form-fields", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (form()) {\r\n<form class=\"form\" [formGroup]=\"form()\" [class.form--compact]=\"compact()\">\r\n  @for (sec of sections(); track $index) {\r\n  <section class=\"section\">\r\n    @if (sec.title) {\r\n    <h3 class=\"section-title\">{{ sec.title }}</h3>\r\n    } @if (sec.description) {\r\n    <p class=\"section-desc\">{{ sec.description }}</p>\r\n    }\r\n\r\n    <div class=\"grid\">\r\n      @for (f of sec.fields; track f.key) {\r\n      <div class=\"col\" [style.--col-span]=\"f.col || 6\">\r\n        @if(f.label) {\r\n        <label\r\n          [class.label-radio]=\"f.type === 'radio'\"\r\n          [class.label-checkbox]=\"f.type === 'checkbox'\"\r\n          [class.label-disabled]=\"f.readonly || f.disabled\"\r\n          class=\"label\"\r\n        >\r\n          {{ f.label }} </label\r\n        >} @if (['text','number','email', 'password', 'time'].includes(f.type))\r\n        {\r\n        <input\r\n          class=\"input\"\r\n          [type]=\"f.type\"\r\n          [placeholder]=\"f.placeholder\"\r\n          [formControlName]=\"f.key\"\r\n          [disabled]=\"f.disabled || false\"\r\n          [readonly]=\"f.readonly || false\"\r\n        />\r\n        } @if (['date', 'datetime-local'].includes(f.type)) {\r\n        <lib-date-time-picker\r\n          [mode]=\"getDatePickerMode(f.type)\"\r\n          [placeholder]=\"\r\n            f.placeholder ||\r\n            (f.type === 'date'\r\n              ? 'Seleccionar fecha'\r\n              : 'Seleccionar fecha y hora')\r\n          \"\r\n          [formControlName]=\"f.key\"\r\n          [minDate]=\"f.minDate || null\"\r\n          [maxDate]=\"f.maxDate || null\"\r\n          [readonly]=\"f.readonly || false\"\r\n          [disabled]=\"f.disabled || false\"\r\n        />\r\n        } @if (f.type === 'textarea') {\r\n        <textarea\r\n          class=\"input textarea\"\r\n          [placeholder]=\"f.placeholder\"\r\n          [formControlName]=\"f.key\"\r\n          rows=\"6\"\r\n          [readonly]=\"f.readonly || false\"\r\n          [disabled]=\"f.disabled || false\"\r\n        ></textarea>\r\n        }@if (f.type === 'select') {\r\n\r\n        <lib-select-custom-search\r\n          [options]=\"f.options ?? []\"\r\n          [placeholder]=\"f.placeholder || 'Seleccionar...'\"\r\n          [formControlName]=\"f.key\"\r\n          [readonly]=\"f.readonly || false\"\r\n          [disabled]=\"f.disabled || false\"\r\n        />\r\n        } @if (f.type === 'radio') {\r\n        <div class=\"radio-group\">\r\n          @for (o of f.options ?? []; track o.value) {\r\n          <label class=\"radio\">\r\n            {{ o.label }}\r\n            <input type=\"radio\" [value]=\"o.value\" [formControlName]=\"f.key\" [readonly]=\"f.readonly || false\"\r\n            [disabled]=\"f.disabled || false\" />\r\n          </label>\r\n          }\r\n        </div>\r\n        } @if (f.type === 'checkbox') {\r\n        <div class=\"checkbox-group\">\r\n          @for (o of f.options ?? []; track o.value; let i = $index) {\r\n          <label class=\"checkbox\">\r\n            {{ o.label }}\r\n            <input\r\n              type=\"checkbox\"\r\n              [checked]=\"getCheckboxArray(f.key).at(i).value\"\r\n              (change)=\"onCheckboxChange($event, f.key, i)\"\r\n            />\r\n          </label>\r\n          }\r\n        </div>\r\n        } @if (f.type === 'disabled') {\r\n        <label class=\"label\">{{ f.label }}</label>\r\n        <input\r\n          class=\"input input--disabled\"\r\n          [placeholder]=\"f.placeholder || 'Autom\u00E1tico'\"\r\n          disabled\r\n        />\r\n        } @if (ctrl(f.key)?.touched && ctrl(f.key)?.invalid) {\r\n        <div class=\"error\">\r\n          @if (ctrl(f.key)?.errors?.['required']) {\r\n          <span>Campo requerido</span>\r\n          } @if (ctrl(f.key)?.errors?.['email']) {\r\n          <span>Correo inv\u00E1lido</span>\r\n          } @if (ctrl(f.key)?.errors?.['pattern']) {\r\n          <span>\r\n            @switch (f.patternType) { @case ('numbers') { Solo se permiten\r\n            n\u00FAmeros } @case ('phone') { Formato de tel\u00E9fono inv\u00E1lido } @case\r\n            ('text') { Solo se permiten letras y espacios } @case ('username') {\r\n            Solo se permiten letras, n\u00FAmeros, puntos y guiones bajos (no al\r\n            inicio ni al final) } @case ('alphanumeric') { Solo se permiten\r\n            letras y n\u00FAmeros } @default { Formato inv\u00E1lido } }\r\n          </span>\r\n          } @if (ctrl(f.key)?.errors?.['notMatching']) {\r\n          <span>Las contrase\u00F1as no coinciden</span>\r\n          }\r\n        </div>\r\n        }\r\n      </div>\r\n      }\r\n    </div>\r\n  </section>\r\n  }\r\n</form>\r\n}\r\n", styles: [".form{width:100%}.form{display:grid}.section{padding:20px 0 0}.section-title{font-size:1.6rem;font-weight:700;margin-bottom:30px}.section-desc{margin:0 0 .75rem;color:#666}.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}.col{grid-column:span var(--col-span, 6);min-width:0;width:100%;position:relative;padding-bottom:20px}.label{position:absolute;top:-8px;left:12px;font-size:1.2rem;color:#454733;background-color:var(--surface-container-high, #ebe8d6);padding:0 4px;font-weight:500;z-index:1}.input{width:100%;border:1px solid #787861;border-radius:5px;padding:15px;background-color:transparent}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=date]::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:auto;height:auto;color:transparent;background:transparent}.input:focus{outline:none;border-color:#a9a97f}.input--disabled{color:#888}.label-radio{font-size:1.4rem;position:static;padding-left:0}.radio-group{display:flex;gap:1rem;padding:.5rem 0}.radio{font-size:1.4rem;display:flex;align-items:center;gap:10px;color:#1c1c12;margin-top:20px}.error{position:absolute;bottom:0;left:0;font-size:1.2rem;color:#b00020;width:100%;height:15px;display:none}.col:has(.error) .error{display:block}.textarea{resize:vertical;min-height:100px;line-height:1.5}select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url(\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\");background-repeat:no-repeat;background-size:15px;background-position:right 15px center;cursor:pointer}select:invalid{color:#787861}select.placeholder-selected{color:#787861}select:not(.placeholder-selected){color:#000}select option{color:#454733;cursor:pointer}input[type=date]{color:#787861!important}input[type=date]:valid{color:#454733!important}.label-disabled{color:#1c1c1266}.input:disabled,.input--disabled,.input.disabled,.input[readonly]{border:1px solid #a9a97f;color:#a9a97f;cursor:not-allowed;pointer-events:none}@media (max-width: 768px){.grid{grid-template-columns:1fr}.col{grid-column:span 1!important}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$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: i1$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: SelectCustomSearch, selector: "lib-select-custom-search", inputs: ["options", "placeholder", "readonly"], outputs: ["selectionChange"] }, { kind: "component", type: DateTimePicker, selector: "lib-date-time-picker", inputs: ["mode", "placeholder", "minDate", "maxDate", "readonly"], outputs: ["dateChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicFormFields, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-dynamic-form-fields', standalone: true, imports: [ReactiveFormsModule, SelectCustomSearch, DateTimePicker], template: "@if (form()) {\r\n<form class=\"form\" [formGroup]=\"form()\" [class.form--compact]=\"compact()\">\r\n  @for (sec of sections(); track $index) {\r\n  <section class=\"section\">\r\n    @if (sec.title) {\r\n    <h3 class=\"section-title\">{{ sec.title }}</h3>\r\n    } @if (sec.description) {\r\n    <p class=\"section-desc\">{{ sec.description }}</p>\r\n    }\r\n\r\n    <div class=\"grid\">\r\n      @for (f of sec.fields; track f.key) {\r\n      <div class=\"col\" [style.--col-span]=\"f.col || 6\">\r\n        @if(f.label) {\r\n        <label [class.label-radio]=\"f.type === 'radio'\" [class.label-checkbox]=\"f.type === 'checkbox'\"\r\n          [class.label-disabled]=\"f.readonly\" class=\"label\">\r\n          {{ f.label }} </label>} @if (['text','number','email', 'password', 'time'].includes(f.type))\r\n        {\r\n        <input class=\"input\" [type]=\"f.type\" [placeholder]=\"f.placeholder\" [formControlName]=\"f.key\"\r\n          [readonly]=\"f.readonly\" />\r\n        } @if (['date', 'datetime-local'].includes(f.type)) {\r\n        <lib-date-time-picker [mode]=\"getDatePickerMode(f.type)\" [placeholder]=\"\r\n            f.placeholder ||\r\n            (f.type === 'date'\r\n              ? 'Seleccionar fecha'\r\n              : 'Seleccionar fecha y hora')\r\n          \" [formControlName]=\"f.key\" [minDate]=\"f.minDate || null\" [maxDate]=\"f.maxDate || null\" />\r\n        } @if (f.type === 'textarea') {\r\n        <textarea class=\"input textarea\" [placeholder]=\"f.placeholder\" [formControlName]=\"f.key\" rows=\"6\"></textarea>\r\n        }@if (f.type === 'select') {\r\n\r\n        <lib-select-custom-search [options]=\"f.options ?? []\" [placeholder]=\"f.placeholder || 'Seleccionar...'\"\r\n          [formControlName]=\"f.key\" />\r\n        } @if (f.type === 'radio') {\r\n        <div class=\"radio-group\">\r\n          @for (o of f.options ?? []; track o.value) {\r\n          <label class=\"radio\">\r\n            {{ o.label }}\r\n            <input type=\"radio\" [value]=\"o.value\" [formControlName]=\"f.key\" />\r\n          </label>\r\n          }\r\n        </div>\r\n        } @if (f.type === 'checkbox') {\r\n        <div class=\"checkbox-group\">\r\n          @for (o of f.options ?? []; track o.value; let i = $index) {\r\n          <label class=\"checkbox\">\r\n            {{ o.label }}\r\n            <input type=\"checkbox\" [checked]=\"getCheckboxArray(f.key).at(i).value\"\r\n              (change)=\"onCheckboxChange($event, f.key, i)\" />\r\n          </label>\r\n          }\r\n        </div>\r\n        } @if (f.type === 'disabled') {\r\n        <label class=\"label\">{{ f.label }}</label>\r\n        <input class=\"input input--disabled\" [placeholder]=\"f.placeholder || 'Autom\u00E1tico'\" disabled />\r\n        } @if (ctrl(f.key)?.touched && ctrl(f.key)?.invalid) {\r\n        <div class=\"error\">\r\n          @if (ctrl(f.key)?.errors?.['required']) {\r\n          <span>Campo requerido</span>\r\n          } @if (ctrl(f.key)?.errors?.['email']) {\r\n          <span>Correo inv\u00E1lido</span>\r\n          } @if (ctrl(f.key)?.errors?.['pattern']) {\r\n          <span>\r\n            @switch (f.patternType) { @case ('numbers') { Solo se permiten\r\n            n\u00FAmeros } @case ('phone') { Formato de tel\u00E9fono inv\u00E1lido } @case\r\n            ('text') { Solo se permiten letras y espacios } @case ('username') {\r\n            Solo se permiten letras, n\u00FAmeros, puntos y guiones bajos (no al\r\n            inicio ni al final) } @case ('alphanumeric') { Solo se permiten\r\n            letras y n\u00FAmeros } @default { Formato inv\u00E1lido } }\r\n          </span>\r\n          } @if (ctrl(f.key)?.errors?.['notMatching']) {\r\n          <span>Las contrase\u00F1as no coinciden</span>\r\n          }\r\n        </div>\r\n        }\r\n      </div>\r\n      }\r\n    </div>\r\n  </section>\r\n  }\r\n</form>\r\n}", styles: [".form{width:100%}.form{display:grid}.section{padding:20px 0 0}.section-title{font-size:1.6rem;font-weight:700;margin-bottom:30px}.section-desc{margin:0 0 .75rem;color:#666}.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:25px}.col{grid-column:span var(--col-span, 6);min-width:0;width:100%;position:relative;padding-bottom:20px}.label{position:absolute;top:-8px;left:12px;font-size:1.2rem;color:#454733;background-color:var(--surface-container-high, #f3eedc);padding:0 4px;font-weight:500;z-index:1}.input{width:100%;border:1px solid #787861;border-radius:5px;padding:15px;background-color:transparent}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=date]::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:auto;height:auto;color:transparent;background:transparent}.input:focus{outline:none;border-color:#a9a97f}.input--disabled{color:#888}.label-radio{font-size:1.4rem;position:static;padding-left:0}.radio-group{display:flex;gap:1rem;padding:.5rem 0}.radio{font-size:1.4rem;display:flex;align-items:center;gap:10px;color:#1c1c12;margin-top:20px}.error{position:absolute;bottom:0;left:0;font-size:1.2rem;color:#b00020;width:100%;height:15px;display:none}.col:has(.error) .error{display:block}.textarea{resize:vertical;min-height:100px;line-height:1.5}select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url(\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\");background-repeat:no-repeat;background-size:15px;background-position:right 15px center;cursor:pointer}select:invalid{color:#787861}select.placeholder-selected{color:#787861}select:not(.placeholder-selected){color:#000}select option{color:#454733;cursor:pointer}input[type=date]{color:#787861!important}input[type=date]:valid{color:#454733!important}.label-disabled{color:#1c1c1266}.input:disabled,.input[readonly]{border:1px solid #a9a97f;color:#a9a97f}@media (max-width: 768px){.grid{grid-template-columns:1fr}.col{grid-column:span 1!important}}\n"] }]
+            args: [{ selector: 'lib-dynamic-form-fields', standalone: true, imports: [ReactiveFormsModule, SelectCustomSearch, DateTimePicker], template: "@if (form()) {\r\n<form class=\"form\" [formGroup]=\"form()\" [class.form--compact]=\"compact()\">\r\n  @for (sec of sections(); track $index) {\r\n  <section class=\"section\">\r\n    @if (sec.title) {\r\n    <h3 class=\"section-title\">{{ sec.title }}</h3>\r\n    } @if (sec.description) {\r\n    <p class=\"section-desc\">{{ sec.description }}</p>\r\n    }\r\n\r\n    <div class=\"grid\">\r\n      @for (f of sec.fields; track f.key) {\r\n      <div class=\"col\" [style.--col-span]=\"f.col || 6\">\r\n        @if(f.label) {\r\n        <label\r\n          [class.label-radio]=\"f.type === 'radio'\"\r\n          [class.label-checkbox]=\"f.type === 'checkbox'\"\r\n          [class.label-disabled]=\"f.readonly || f.disabled\"\r\n          class=\"label\"\r\n        >\r\n          {{ f.label }} </label\r\n        >} @if (['text','number','email', 'password', 'time'].includes(f.type))\r\n        {\r\n        <input\r\n          class=\"input\"\r\n          [type]=\"f.type\"\r\n          [placeholder]=\"f.placeholder\"\r\n          [formControlName]=\"f.key\"\r\n          [disabled]=\"f.disabled || false\"\r\n          [readonly]=\"f.readonly || false\"\r\n        />\r\n        } @if (['date', 'datetime-local'].includes(f.type)) {\r\n        <lib-date-time-picker\r\n          [mode]=\"getDatePickerMode(f.type)\"\r\n          [placeholder]=\"\r\n            f.placeholder ||\r\n            (f.type === 'date'\r\n              ? 'Seleccionar fecha'\r\n              : 'Seleccionar fecha y hora')\r\n          \"\r\n          [formControlName]=\"f.key\"\r\n          [minDate]=\"f.minDate || null\"\r\n          [maxDate]=\"f.maxDate || null\"\r\n          [readonly]=\"f.readonly || false\"\r\n          [disabled]=\"f.disabled || false\"\r\n        />\r\n        } @if (f.type === 'textarea') {\r\n        <textarea\r\n          class=\"input textarea\"\r\n          [placeholder]=\"f.placeholder\"\r\n          [formControlName]=\"f.key\"\r\n          rows=\"6\"\r\n          [readonly]=\"f.readonly || false\"\r\n          [disabled]=\"f.disabled || false\"\r\n        ></textarea>\r\n        }@if (f.type === 'select') {\r\n\r\n        <lib-select-custom-search\r\n          [options]=\"f.options ?? []\"\r\n          [placeholder]=\"f.placeholder || 'Seleccionar...'\"\r\n          [formControlName]=\"f.key\"\r\n          [readonly]=\"f.readonly || false\"\r\n          [disabled]=\"f.disabled || false\"\r\n        />\r\n        } @if (f.type === 'radio') {\r\n        <div class=\"radio-group\">\r\n          @for (o of f.options ?? []; track o.value) {\r\n          <label class=\"radio\">\r\n            {{ o.label }}\r\n            <input type=\"radio\" [value]=\"o.value\" [formControlName]=\"f.key\" [readonly]=\"f.readonly || false\"\r\n            [disabled]=\"f.disabled || false\" />\r\n          </label>\r\n          }\r\n        </div>\r\n        } @if (f.type === 'checkbox') {\r\n        <div class=\"checkbox-group\">\r\n          @for (o of f.options ?? []; track o.value; let i = $index) {\r\n          <label class=\"checkbox\">\r\n            {{ o.label }}\r\n            <input\r\n              type=\"checkbox\"\r\n              [checked]=\"getCheckboxArray(f.key).at(i).value\"\r\n              (change)=\"onCheckboxChange($event, f.key, i)\"\r\n            />\r\n          </label>\r\n          }\r\n        </div>\r\n        } @if (f.type === 'disabled') {\r\n        <label class=\"label\">{{ f.label }}</label>\r\n        <input\r\n          class=\"input input--disabled\"\r\n          [placeholder]=\"f.placeholder || 'Autom\u00E1tico'\"\r\n          disabled\r\n        />\r\n        } @if (ctrl(f.key)?.touched && ctrl(f.key)?.invalid) {\r\n        <div class=\"error\">\r\n          @if (ctrl(f.key)?.errors?.['required']) {\r\n          <span>Campo requerido</span>\r\n          } @if (ctrl(f.key)?.errors?.['email']) {\r\n          <span>Correo inv\u00E1lido</span>\r\n          } @if (ctrl(f.key)?.errors?.['pattern']) {\r\n          <span>\r\n            @switch (f.patternType) { @case ('numbers') { Solo se permiten\r\n            n\u00FAmeros } @case ('phone') { Formato de tel\u00E9fono inv\u00E1lido } @case\r\n            ('text') { Solo se permiten letras y espacios } @case ('username') {\r\n            Solo se permiten letras, n\u00FAmeros, puntos y guiones bajos (no al\r\n            inicio ni al final) } @case ('alphanumeric') { Solo se permiten\r\n            letras y n\u00FAmeros } @default { Formato inv\u00E1lido } }\r\n          </span>\r\n          } @if (ctrl(f.key)?.errors?.['notMatching']) {\r\n          <span>Las contrase\u00F1as no coinciden</span>\r\n          }\r\n        </div>\r\n        }\r\n      </div>\r\n      }\r\n    </div>\r\n  </section>\r\n  }\r\n</form>\r\n}\r\n", styles: [".form{width:100%}.form{display:grid}.section{padding:20px 0 0}.section-title{font-size:1.6rem;font-weight:700;margin-bottom:30px}.section-desc{margin:0 0 .75rem;color:#666}.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}.col{grid-column:span var(--col-span, 6);min-width:0;width:100%;position:relative;padding-bottom:20px}.label{position:absolute;top:-8px;left:12px;font-size:1.2rem;color:#454733;background-color:var(--surface-container-high, #ebe8d6);padding:0 4px;font-weight:500;z-index:1}.input{width:100%;border:1px solid #787861;border-radius:5px;padding:15px;background-color:transparent}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=date]::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:auto;height:auto;color:transparent;background:transparent}.input:focus{outline:none;border-color:#a9a97f}.input--disabled{color:#888}.label-radio{font-size:1.4rem;position:static;padding-left:0}.radio-group{display:flex;gap:1rem;padding:.5rem 0}.radio{font-size:1.4rem;display:flex;align-items:center;gap:10px;color:#1c1c12;margin-top:20px}.error{position:absolute;bottom:0;left:0;font-size:1.2rem;color:#b00020;width:100%;height:15px;display:none}.col:has(.error) .error{display:block}.textarea{resize:vertical;min-height:100px;line-height:1.5}select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url(\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\");background-repeat:no-repeat;background-size:15px;background-position:right 15px center;cursor:pointer}select:invalid{color:#787861}select.placeholder-selected{color:#787861}select:not(.placeholder-selected){color:#000}select option{color:#454733;cursor:pointer}input[type=date]{color:#787861!important}input[type=date]:valid{color:#454733!important}.label-disabled{color:#1c1c1266}.input:disabled,.input--disabled,.input.disabled,.input[readonly]{border:1px solid #a9a97f;color:#a9a97f;cursor:not-allowed;pointer-events:none}@media (max-width: 768px){.grid{grid-template-columns:1fr}.col{grid-column:span 1!important}}\n"] }]
         }], propDecorators: { form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }], sections: [{ type: i0.Input, args: [{ isSignal: true, alias: "sections", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }] } });
 
 class WizardForm {
@@ -1978,25 +1998,26 @@ class DialogAlertComponent {
         }
     }
     onConfirm() {
-        console.log('onConfirm called', this.isReasonNeeded, this.form.value);
-        // Si se requiere razón, no permitir confirmar con campo vacío
         if (this.isReasonNeeded && !this.form.get('reason')?.value?.trim().length) {
             return;
         }
-        // Emitir la razón (vacía => undefined)
         const reason = this.form.get('reason')?.value;
-        this.confirmReason.emit(reason || undefined);
+        const observations = this.form.get('observations')?.value;
+        this.confirmReason.emit({
+            reason: reason || undefined,
+            observations: observations || undefined,
+        });
         this.close.emit(true);
     }
     onCancel() {
         this.close.emit(false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DialogAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DialogAlertComponent, isStandalone: true, selector: "lib-dialog-alert-component", inputs: { title: "title", message: "message", type: "type", action: "action", showReason: "showReason", confirm: "confirm", confirmLabel: "confirmLabel", reasonOptions: "reasonOptions" }, outputs: { close: "close", confirmReason: "confirmReason" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"modal-backdrop\">\r\n  <div class=\"modal-card\">\r\n    <div class=\"modal-header\">\r\n      <h2>{{ title }}</h2>\r\n    </div>\r\n    <div class=\"modal-body\">\r\n      <p>{{ message }}</p>\r\n      <lib-dynamic-form-fields [form]=\"form\" [sections]=\"sections\"></lib-dynamic-form-fields>\r\n    </div>\r\n    <div class=\"modal-footer\">\r\n      @if (confirm) {\r\n      <button class=\"btn cancel\" (click)=\"onCancel()\">Cancelar</button>\r\n      <button class=\"btn confirm\" [ngClass]=\"type\" (click)=\"onConfirm()\">{{ confirmLabel }}</button>\r\n      } @else {\r\n      <button class=\"btn confirm\" [ngClass]=\"type\" (click)=\"onConfirm()\">{{ confirmLabel }}</button>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".modal-backdrop{position:fixed;inset:0;background:#00000073;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:10000}.modal-card{width:30%;max-width:50%;background:#ebe8d6;border-radius:14px;padding:32px 64px;animation:fadeIn .25s ease;border:1px solid rgba(255,255,255,.07);box-shadow:0 8px 20px #0003}.modal-header{display:flex;align-items:center;gap:12px;color:#0c0c0c;justify-content:center}.modal-header h2{font-weight:700;font-size:24px;margin:0;text-transform:uppercase}.modal-body{text-align:center}.modal-body p{color:#555;margin:0;font-size:14px;line-height:1.5;padding-top:21px}.modal-footer{margin-top:25px;display:flex;justify-content:center;gap:10px}.btn{padding:10px 16px;border-radius:99px;font-weight:700;cursor:pointer;border:none}.btn:hover{background-color:#61661f}.btn.cancel{background:transparent;border:1px solid #454733;color:#454733}.btn.cancel:hover{background-color:#454733;color:#fff}.btn.confirm{background:#596300;color:#fff}@keyframes fadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.btn.confirm.warning,.btn.confirm.error{background-color:#ba1a1a;color:#fff}.btn.confirm.info{background-color:#063546;color:#fff}.btn.confirm.success{background-color:#596300;color:#fff}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: DynamicFormFields, selector: "lib-dynamic-form-fields", inputs: ["form", "sections", "compact"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DialogAlertComponent, isStandalone: true, selector: "lib-dialog-alert-component", inputs: { title: "title", message: "message", type: "type", action: "action", showReason: "showReason", confirm: "confirm", confirmLabel: "confirmLabel", reasonOptions: "reasonOptions" }, outputs: { close: "close", confirmReason: "confirmReason" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"modal-backdrop\">\r\n  <div class=\"modal-card\" [class.modal-card-compact]=\"!isReasonNeeded\">\r\n    <div class=\"modal-header\">\r\n      <h2>{{ title }}</h2>\r\n    </div>\r\n    <div class=\"modal-body\">\r\n      <p>{{ message }}</p>\r\n      <lib-dynamic-form-fields [form]=\"form\" [sections]=\"sections\"></lib-dynamic-form-fields>\r\n    </div>\r\n    <div class=\"modal-footer\">\r\n      @if (confirm) {\r\n      <button class=\"btn cancel\" (click)=\"onCancel()\">Cancelar</button>\r\n      <button class=\"btn confirm\" [ngClass]=\"type\" (click)=\"onConfirm()\">{{ confirmLabel }}</button>\r\n      } @else {\r\n      <button class=\"btn confirm\" [ngClass]=\"type\" (click)=\"onConfirm()\">{{ confirmLabel }}</button>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".modal-backdrop{position:fixed;inset:0;background:#00000073;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:10000}.modal-card{width:30%;max-width:50%;background:#ebe8d6;border-radius:14px;padding:32px 48px;animation:fadeIn .25s ease;border:1px solid rgba(255,255,255,.07);box-shadow:0 8px 20px #0003}.modal-card-compact{width:100%;max-width:25%;padding:24px 32px}.modal-header{display:flex;align-items:center;gap:12px;color:#0c0c0c;justify-content:center}.modal-header h2{font-weight:700;font-size:24px;margin:0;text-transform:uppercase}.modal-body{text-align:center}.modal-body p{color:#555;margin:0;font-size:14px;line-height:1.5;padding-top:21px}.modal-footer{margin-top:25px;display:flex;justify-content:center;gap:10px}.btn{padding:10px 16px;border-radius:99px;font-weight:700;cursor:pointer;border:none}.btn:hover{background-color:#61661f}.btn.cancel{background:transparent;border:1px solid #454733;color:#454733}.btn.cancel:hover{background-color:#454733;color:#fff}.btn.confirm{background:#596300;color:#fff}@keyframes fadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.btn.confirm.warning,.btn.confirm.error{background-color:#ba1a1a;color:#fff}.btn.confirm.info{background-color:#063546;color:#fff}.btn.confirm.success{background-color:#596300;color:#fff}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: DynamicFormFields, selector: "lib-dynamic-form-fields", inputs: ["form", "sections", "compact"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DialogAlertComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-dialog-alert-component', standalone: true, imports: [CommonModule, ReactiveFormsModule, DynamicFormFields], template: "<div class=\"modal-backdrop\">\r\n  <div class=\"modal-card\">\r\n    <div class=\"modal-header\">\r\n      <h2>{{ title }}</h2>\r\n    </div>\r\n    <div class=\"modal-body\">\r\n      <p>{{ message }}</p>\r\n      <lib-dynamic-form-fields [form]=\"form\" [sections]=\"sections\"></lib-dynamic-form-fields>\r\n    </div>\r\n    <div class=\"modal-footer\">\r\n      @if (confirm) {\r\n      <button class=\"btn cancel\" (click)=\"onCancel()\">Cancelar</button>\r\n      <button class=\"btn confirm\" [ngClass]=\"type\" (click)=\"onConfirm()\">{{ confirmLabel }}</button>\r\n      } @else {\r\n      <button class=\"btn confirm\" [ngClass]=\"type\" (click)=\"onConfirm()\">{{ confirmLabel }}</button>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".modal-backdrop{position:fixed;inset:0;background:#00000073;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:10000}.modal-card{width:30%;max-width:50%;background:#ebe8d6;border-radius:14px;padding:32px 64px;animation:fadeIn .25s ease;border:1px solid rgba(255,255,255,.07);box-shadow:0 8px 20px #0003}.modal-header{display:flex;align-items:center;gap:12px;color:#0c0c0c;justify-content:center}.modal-header h2{font-weight:700;font-size:24px;margin:0;text-transform:uppercase}.modal-body{text-align:center}.modal-body p{color:#555;margin:0;font-size:14px;line-height:1.5;padding-top:21px}.modal-footer{margin-top:25px;display:flex;justify-content:center;gap:10px}.btn{padding:10px 16px;border-radius:99px;font-weight:700;cursor:pointer;border:none}.btn:hover{background-color:#61661f}.btn.cancel{background:transparent;border:1px solid #454733;color:#454733}.btn.cancel:hover{background-color:#454733;color:#fff}.btn.confirm{background:#596300;color:#fff}@keyframes fadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.btn.confirm.warning,.btn.confirm.error{background-color:#ba1a1a;color:#fff}.btn.confirm.info{background-color:#063546;color:#fff}.btn.confirm.success{background-color:#596300;color:#fff}\n"] }]
+            args: [{ selector: 'lib-dialog-alert-component', standalone: true, imports: [CommonModule, ReactiveFormsModule, DynamicFormFields], template: "<div class=\"modal-backdrop\">\r\n  <div class=\"modal-card\" [class.modal-card-compact]=\"!isReasonNeeded\">\r\n    <div class=\"modal-header\">\r\n      <h2>{{ title }}</h2>\r\n    </div>\r\n    <div class=\"modal-body\">\r\n      <p>{{ message }}</p>\r\n      <lib-dynamic-form-fields [form]=\"form\" [sections]=\"sections\"></lib-dynamic-form-fields>\r\n    </div>\r\n    <div class=\"modal-footer\">\r\n      @if (confirm) {\r\n      <button class=\"btn cancel\" (click)=\"onCancel()\">Cancelar</button>\r\n      <button class=\"btn confirm\" [ngClass]=\"type\" (click)=\"onConfirm()\">{{ confirmLabel }}</button>\r\n      } @else {\r\n      <button class=\"btn confirm\" [ngClass]=\"type\" (click)=\"onConfirm()\">{{ confirmLabel }}</button>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".modal-backdrop{position:fixed;inset:0;background:#00000073;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:10000}.modal-card{width:30%;max-width:50%;background:#ebe8d6;border-radius:14px;padding:32px 48px;animation:fadeIn .25s ease;border:1px solid rgba(255,255,255,.07);box-shadow:0 8px 20px #0003}.modal-card-compact{width:100%;max-width:25%;padding:24px 32px}.modal-header{display:flex;align-items:center;gap:12px;color:#0c0c0c;justify-content:center}.modal-header h2{font-weight:700;font-size:24px;margin:0;text-transform:uppercase}.modal-body{text-align:center}.modal-body p{color:#555;margin:0;font-size:14px;line-height:1.5;padding-top:21px}.modal-footer{margin-top:25px;display:flex;justify-content:center;gap:10px}.btn{padding:10px 16px;border-radius:99px;font-weight:700;cursor:pointer;border:none}.btn:hover{background-color:#61661f}.btn.cancel{background:transparent;border:1px solid #454733;color:#454733}.btn.cancel:hover{background-color:#454733;color:#fff}.btn.confirm{background:#596300;color:#fff}@keyframes fadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.btn.confirm.warning,.btn.confirm.error{background-color:#ba1a1a;color:#fff}.btn.confirm.info{background-color:#063546;color:#fff}.btn.confirm.success{background-color:#596300;color:#fff}\n"] }]
         }], propDecorators: { title: [{
                 type: Input
             }], message: [{
@@ -2019,6 +2040,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 type: Output
             }] } });
 
+class DialogConfirmation {
+    title = 'TITULO';
+    confirm = false;
+    confirmLabel = 'Aceptar';
+    items = [];
+    close = new EventEmitter();
+    expandedIndex = null;
+    toggle(index) {
+        this.expandedIndex = this.expandedIndex === index ? null : index;
+    }
+    onConfirm() {
+        console.log('confirmado');
+        this.close.emit(true);
+    }
+    onCancel() {
+        this.close.emit(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DialogConfirmation, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DialogConfirmation, isStandalone: true, selector: "lib-dialog-confirmation", inputs: { title: "title", confirm: "confirm", confirmLabel: "confirmLabel", items: "items" }, outputs: { close: "close" }, ngImport: i0, template: "<div class=\"modal-backdrop\">\r\n  <div class=\"modal-card\">\r\n    <div class=\"modal-header\">\r\n      <h2>{{ title }}</h2>\r\n      <button class=\"close-btn\" (click)=\"onCancel()\" aria-label=\"Cerrar\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n          viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n          stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n          <path d=\"M18 6l-12 12\" />\r\n          <path d=\"M6 6l12 12\" />\r\n        </svg>\r\n      </button>\r\n    </div>\r\n    <div class=\"modal-body\">\r\n      <div class=\"info-container\" [class.expanded]=\"expandedIndex !== null\">\r\n        @for (item of items; track item.key; let i = $index) {\r\n\r\n        <div class=\"info-item\">\r\n          <div\r\n            class=\"info-main\"\r\n            [class.info-main-expanded]=\"item.expandible\"\r\n            (click)=\"item.expandible && toggle(i)\"\r\n          >\r\n            <span class=\"label\"\r\n              >{{ item.label }} @if (item.expandible) {\r\n              <span class=\"arrow\"> {{ expandedIndex === i ? '\u25B2' : '\u25BC' }} </span>\r\n              }\r\n            </span>\r\n            <span class=\"value\"> {{ item.value }} </span>\r\n          </div>\r\n\r\n          @if (expandedIndex === i && item.children?.length) {\r\n          <div class=\"info-children\">\r\n            @for (child of item.children; track child.key) {\r\n            <div class=\"info-item child-item\">\r\n              <div class=\"info-main\">\r\n                <span class=\"label\">{{ child.label }}</span>\r\n                <span class=\"value\">{{ child.value }}</span>\r\n              </div>\r\n            </div>\r\n            }\r\n          </div>\r\n          }\r\n        </div>\r\n\r\n        }\r\n      </div>\r\n    </div>\r\n    <div class=\"modal-footer\">\r\n      @if (confirm) {\r\n      <button class=\"btn cancel\" (click)=\"onCancel()\">Cancelar</button>\r\n      <button class=\"btn confirm\" (click)=\"onConfirm()\">\r\n        {{ confirmLabel }}\r\n      </button>\r\n      } @else {\r\n      <button class=\"btn confirm\" (click)=\"onConfirm()\">\r\n        {{ confirmLabel }}\r\n      </button>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".modal-backdrop{position:fixed;inset:0;background:#00000073;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:10000}.modal-card{width:30%;max-width:50%;max-height:90%;background:#ebe8d6;border-radius:28px;padding:32px 48px;animation:fadeIn .25s ease;border:1px solid rgba(255,255,255,.07);box-shadow:0 8px 20px #0003;overflow:hidden;display:flex;flex-direction:column;transition:max-height .35s cubic-bezier(.4,0,.2,1)}.modal-header{position:relative;display:flex;align-items:center;gap:12px;color:#0c0c0c;justify-content:center}.modal-header h2{font-weight:700;font-size:24px;margin:0;text-transform:uppercase}.close-btn{position:absolute;right:-36px;top:-24px;width:36px;height:36px;border-radius:50%;background:#ebe8d6;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#333;transition:background .2s ease,transform .2s ease}.close-btn:hover{background:#d8d6c0;transform:scale(1.05)}.close-btn svg{width:18px;height:18px}.modal-body{position:relative;margin-top:16px;text-align:center;flex:1;overflow:hidden;display:flex;flex-direction:column;transition:all .35s cubic-bezier(.4,0,.2,1)}.modal-body p{color:#555;margin:0;font-size:14px;line-height:1.5;padding-top:21px}.modal-footer{margin-top:25px;display:flex;justify-content:center;gap:10px;flex-shrink:0}button{background-color:transparent;border:none}.btn{padding:10px 16px;border-radius:99px;font-weight:700;cursor:pointer;border:none}.btn:hover{background-color:#61661f}.btn.cancel{background:transparent;border:1px solid #454733;color:#454733}.btn.cancel:hover{background-color:#454733;color:#fff}.btn.confirm{background:#596300;color:#fff}@keyframes fadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.btn.confirm.warning,.btn.confirm.error{background-color:#ba1a1a;color:#fff}.btn.confirm.info{background-color:#063546;color:#fff}.btn.confirm.success{background-color:#596300;color:#fff}.info-container{max-height:400;background:#e3e3d1;border-radius:20px;padding:24px;flex:1;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.35) transparent;transition:max-height .35s cubic-bezier(.4,0,.2,1)}.info-container.expanded{max-height:600px}.info-container::-webkit-scrollbar{width:6px;background:transparent}.info-container::-webkit-scrollbar-track{background:transparent}.info-container::-webkit-scrollbar-thumb{background:#00000059;border-radius:6px}.info-container::-webkit-scrollbar-thumb:hover{background:#00000080}.info-item{border-bottom:1px solid rgba(0,0,0,.05);padding:16px 0}.info-item:last-child{border-bottom:none}.info-main{display:flex;flex-direction:column;text-align:center}.info-main-expanded{cursor:pointer}.info-children{margin-top:12px}.child-item{padding:16px 0;border-bottom:1px solid rgba(0,0,0,.05);margin:0 16px}.child-item:first-child{border-top:1px solid rgba(0,0,0,.05)}.child-item:last-child{border-bottom:none}.label{font-size:16px;color:#555;text-transform:uppercase}.value{font-size:16px;font-weight:700;display:flex;justify-content:center;gap:6px;align-items:center}.arrow{font-size:12px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DialogConfirmation, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-dialog-confirmation', imports: [CommonModule], template: "<div class=\"modal-backdrop\">\r\n  <div class=\"modal-card\">\r\n    <div class=\"modal-header\">\r\n      <h2>{{ title }}</h2>\r\n      <button class=\"close-btn\" (click)=\"onCancel()\" aria-label=\"Cerrar\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n          viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n          stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n          <path d=\"M18 6l-12 12\" />\r\n          <path d=\"M6 6l12 12\" />\r\n        </svg>\r\n      </button>\r\n    </div>\r\n    <div class=\"modal-body\">\r\n      <div class=\"info-container\" [class.expanded]=\"expandedIndex !== null\">\r\n        @for (item of items; track item.key; let i = $index) {\r\n\r\n        <div class=\"info-item\">\r\n          <div\r\n            class=\"info-main\"\r\n            [class.info-main-expanded]=\"item.expandible\"\r\n            (click)=\"item.expandible && toggle(i)\"\r\n          >\r\n            <span class=\"label\"\r\n              >{{ item.label }} @if (item.expandible) {\r\n              <span class=\"arrow\"> {{ expandedIndex === i ? '\u25B2' : '\u25BC' }} </span>\r\n              }\r\n            </span>\r\n            <span class=\"value\"> {{ item.value }} </span>\r\n          </div>\r\n\r\n          @if (expandedIndex === i && item.children?.length) {\r\n          <div class=\"info-children\">\r\n            @for (child of item.children; track child.key) {\r\n            <div class=\"info-item child-item\">\r\n              <div class=\"info-main\">\r\n                <span class=\"label\">{{ child.label }}</span>\r\n                <span class=\"value\">{{ child.value }}</span>\r\n              </div>\r\n            </div>\r\n            }\r\n          </div>\r\n          }\r\n        </div>\r\n\r\n        }\r\n      </div>\r\n    </div>\r\n    <div class=\"modal-footer\">\r\n      @if (confirm) {\r\n      <button class=\"btn cancel\" (click)=\"onCancel()\">Cancelar</button>\r\n      <button class=\"btn confirm\" (click)=\"onConfirm()\">\r\n        {{ confirmLabel }}\r\n      </button>\r\n      } @else {\r\n      <button class=\"btn confirm\" (click)=\"onConfirm()\">\r\n        {{ confirmLabel }}\r\n      </button>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".modal-backdrop{position:fixed;inset:0;background:#00000073;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:10000}.modal-card{width:30%;max-width:50%;max-height:90%;background:#ebe8d6;border-radius:28px;padding:32px 48px;animation:fadeIn .25s ease;border:1px solid rgba(255,255,255,.07);box-shadow:0 8px 20px #0003;overflow:hidden;display:flex;flex-direction:column;transition:max-height .35s cubic-bezier(.4,0,.2,1)}.modal-header{position:relative;display:flex;align-items:center;gap:12px;color:#0c0c0c;justify-content:center}.modal-header h2{font-weight:700;font-size:24px;margin:0;text-transform:uppercase}.close-btn{position:absolute;right:-36px;top:-24px;width:36px;height:36px;border-radius:50%;background:#ebe8d6;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#333;transition:background .2s ease,transform .2s ease}.close-btn:hover{background:#d8d6c0;transform:scale(1.05)}.close-btn svg{width:18px;height:18px}.modal-body{position:relative;margin-top:16px;text-align:center;flex:1;overflow:hidden;display:flex;flex-direction:column;transition:all .35s cubic-bezier(.4,0,.2,1)}.modal-body p{color:#555;margin:0;font-size:14px;line-height:1.5;padding-top:21px}.modal-footer{margin-top:25px;display:flex;justify-content:center;gap:10px;flex-shrink:0}button{background-color:transparent;border:none}.btn{padding:10px 16px;border-radius:99px;font-weight:700;cursor:pointer;border:none}.btn:hover{background-color:#61661f}.btn.cancel{background:transparent;border:1px solid #454733;color:#454733}.btn.cancel:hover{background-color:#454733;color:#fff}.btn.confirm{background:#596300;color:#fff}@keyframes fadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.btn.confirm.warning,.btn.confirm.error{background-color:#ba1a1a;color:#fff}.btn.confirm.info{background-color:#063546;color:#fff}.btn.confirm.success{background-color:#596300;color:#fff}.info-container{max-height:400;background:#e3e3d1;border-radius:20px;padding:24px;flex:1;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.35) transparent;transition:max-height .35s cubic-bezier(.4,0,.2,1)}.info-container.expanded{max-height:600px}.info-container::-webkit-scrollbar{width:6px;background:transparent}.info-container::-webkit-scrollbar-track{background:transparent}.info-container::-webkit-scrollbar-thumb{background:#00000059;border-radius:6px}.info-container::-webkit-scrollbar-thumb:hover{background:#00000080}.info-item{border-bottom:1px solid rgba(0,0,0,.05);padding:16px 0}.info-item:last-child{border-bottom:none}.info-main{display:flex;flex-direction:column;text-align:center}.info-main-expanded{cursor:pointer}.info-children{margin-top:12px}.child-item{padding:16px 0;border-bottom:1px solid rgba(0,0,0,.05);margin:0 16px}.child-item:first-child{border-top:1px solid rgba(0,0,0,.05)}.child-item:last-child{border-bottom:none}.label{font-size:16px;color:#555;text-transform:uppercase}.value{font-size:16px;font-weight:700;display:flex;justify-content:center;gap:6px;align-items:center}.arrow{font-size:12px}\n"] }]
+        }], propDecorators: { title: [{
+                type: Input
+            }], confirm: [{
+                type: Input
+            }], confirmLabel: [{
+                type: Input
+            }], items: [{
+                type: Input
+            }], close: [{
+                type: Output
+            }] } });
+
 // src/app/components/public-api.ts
 // Exportar el componente
 
@@ -2026,5 +2082,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { DateTimeFilter, DateTimePicker, DialogAlertComponent, DynamicFormFields, InputNumberFilter, InputSelectFilter, InputTextFilter, ModalForm, PaginationComponent, STATUS_TONE_STYLES, SelectCustomSearch, Table, WizardForm };
+export { DateTimeFilter, DateTimePicker, DialogAlertComponent, DialogConfirmation, DynamicFormFields, InputNumberFilter, InputSelectFilter, InputTextFilter, ModalForm, PaginationComponent, STATUS_TONE_STYLES, SelectCustomSearch, Table, WizardForm };
 //# sourceMappingURL=sapenlinea-components.mjs.map