sapenlinea-components 0.0.30 → 0.0.31

package/fesm2022/sapenlinea-components.mjs

@@ -12,7 +12,7 @@ class PaginationComponent {
     pageSize = model(10, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
     totalItems = input(0, ...(ngDevMode ? [{ debugName: "totalItems" }] : []));
     showPageSizeSelector = input(false, ...(ngDevMode ? [{ debugName: "showPageSizeSelector" }] : []));
-    pageSizeOptions = input([5, 10, 20, 50], ...(ngDevMode ? [{ debugName: "pageSizeOptions" }] : []));
+    pageSizeOptions = input([10, 20, 30, 50], ...(ngDevMode ? [{ debugName: "pageSizeOptions" }] : []));
     // Internal state
     isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
     showPageSizeMenu = signal(false, ...(ngDevMode ? [{ debugName: "showPageSizeMenu" }] : []));
@@ -83,19 +83,19 @@ class PaginationComponent {
         this.isOpen.set(false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: PaginationComponent, isStandalone: true, selector: "lib-pagination", inputs: { page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, showPageSizeSelector: { classPropertyName: "showPageSizeSelector", publicName: "showPageSizeSelector", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { page: "pageChange", pageSize: "pageSizeChange" }, ngImport: i0, template: "<div class=\"pagination-container\">\r\n  <div class=\"pagination\" role=\"navigation\" aria-label=\"Pagination\">\r\n    <!-- Bot\u00F3n doble atr\u00E1s -->\r\n    <button class=\"icon-button\" (click)=\"goToPage(1)\" [disabled]=\"page() === 1\" aria-label=\"Ir a la primera p\u00E1gina\">\r\n      \u00AB\u00AB\r\n    </button>\r\n\r\n    <!-- Bot\u00F3n atr\u00E1s -->\r\n    <button class=\"icon-button\" (click)=\"goToPage(page() - 1)\" [disabled]=\"page() === 1\"\r\n      aria-label=\"Ir a la p\u00E1gina anterior\">\r\n      \u00AB\r\n    </button>\r\n\r\n    <!-- N\u00FAmeros de p\u00E1gina -->\r\n    <div class=\"pages\">\r\n      @for (p of visiblePages(); track $index) {\r\n      <button class=\"page-btn\" [class.active]=\"p === page()\" [disabled]=\"p === '...'\" (click)=\"goToPage(p)\"\r\n        [attr.aria-current]=\"p === page() ? 'page' : null\"\r\n        [attr.aria-label]=\"p === '...' ? 'M\u00E1s p\u00E1ginas' : 'Ir a la p\u00E1gina ' + p\">\r\n        {{ p }}\r\n      </button>\r\n      }\r\n    </div>\r\n\r\n    <!-- Bot\u00F3n siguiente -->\r\n    <button class=\"icon-button\" (click)=\"goToPage(page() + 1)\" [disabled]=\"page() === totalPages()\"\r\n      aria-label=\"Ir a la p\u00E1gina siguiente\">\r\n      \u00BB\r\n    </button>\r\n\r\n    <!-- Bot\u00F3n doble adelante -->\r\n    <button class=\"icon-button\" (click)=\"goToPage(totalPages())\" [disabled]=\"page() === totalPages()\"\r\n      aria-label=\"Ir a la \u00FAltima p\u00E1gina\">\r\n      \u00BB\u00BB\r\n    </button>\r\n  </div>\r\n\r\n  <!-- Selector Items por p\u00E1gina -->\r\n  @if (showPageSizeSelector()) {\r\n  <div class=\"pagination-v-4\">\r\n    <div class=\"label-pagination\">Items por p\u00E1gina</div>\r\n    <div class=\"elements-pagination\">\r\n      <div class=\"split-button\" (click)=\"togglePageSizeMenu()\">\r\n        <div class=\"leading-button\">\r\n          <div class=\"state-layer\">\r\n            <div class=\"label\">{{ pageSize() }}</div>\r\n          </div>\r\n        </div>\r\n        <div class=\"trailing-button\">\r\n          <div class=\"arrow\" [class.open]=\"isOpen()\">\r\n            <svg class=\"arrow\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\">\r\n              <polyline points=\"6 9 12 15 18 9\"></polyline>\r\n            </svg>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Men\u00FA desplegable -->\r\n      @if (showPageSizeMenu()) {\r\n      <div class=\"page-size-menu\">\r\n        @for (opt of pageSizeOptions(); track $index) {\r\n        <div class=\"menu-option\" [class.active]=\"opt === pageSize()\" (click)=\"selectPageSize(opt)\">\r\n          {{ opt }}\r\n        </div>\r\n        }\r\n      </div>\r\n      }\r\n    </div>\r\n  </div>\r\n  }\r\n</div>", styles: [".pagination-container{display:flex;flex-direction:row;justify-content:center;width:100%;padding:8px 0;position:relative}.pagination{display:flex;align-items:center;gap:12px;padding:12px;justify-content:center;flex:1}.icon-button{width:40px;height:40px;border-radius:50%;background:var(--primary, #596300);color:var(--surface, #ffffff);border:none;cursor:pointer;font-size:16px;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 2px #00000026;transition:background .2s ease,transform .1s ease}.icon-button:disabled{background:#969696;color:var(--on-surface, #171c1f);opacity:.45;cursor:not-allowed}.pages{display:flex;gap:4px;overflow:hidden;border-radius:20px}.page-btn{background:var(--secondary-container, #dee58f);width:40px;height:40px;border:none;cursor:pointer;padding:8px 14px;font-size:14px;color:var(--schemes-on-surface, #3a3a3a);font-family:Roboto,sans-serif;border-radius:8px;transition:background .2s ease}.page-btn:hover:not(.active):not(:disabled){background:var(--schemes-on-secondary-container, #61661f);color:var(--schemes-secondary-container, #dee58f)}.page-btn.active{background:var(--schemes-primary, #596300);color:var(--schemes-on-primary, #ffffff);font-weight:600;border-radius:20px}.page-btn:disabled{background:transparent;cursor:default;box-shadow:none;pointer-events:none}.pagination-v-4{display:flex;gap:10px;align-items:center;margin-left:auto}.label-pagination{font-size:14px;font-weight:600;color:var(--schemes-on-surface)}.elements-pagination{position:relative;display:flex;gap:4px;border-radius:20px}.split-button{display:flex;cursor:pointer;border-radius:20px;overflow:hidden}.leading-button{background:var(--schemes-secondary-container);border-radius:20px 4px 4px 20px;display:flex;align-items:center;height:40px}.state-layer{padding:10px 16px;background-color:#dee58f;margin-right:4px;border-radius:8px}.state-layer:open{color:#f5f5e0;background-color:#596300}.label{font-size:14px;font-weight:500;color:var(--schemes-on-secondary-container)}.trailing-button{background:var(--secondary-container, #dee58f);padding-left:12px;padding-right:12px;border:none;cursor:pointer;font-size:14px;color:var(--schemes-on-surface, #3a3a3a);font-family:Roboto,sans-serif;border-radius:8px;transition:background .2s ease;align-items:center;align-content:center}.arrow{width:20px;height:20px;color:#171c1f;transition:transform .25s ease}.arrow.open{transform:rotate(180deg)}.page-size-menu{background:#f5f5e0;position:absolute;min-width:100px;border-radius:4px;box-shadow:0 2px 8px #0003;overflow:hidden;z-index:999;bottom:50px;right:0;transform-origin:top right}.menu-option{padding:8px 12px;cursor:pointer}.menu-option:hover{background:#dee58f5b}.menu-option.active{background:#dee58f;color:#61661f}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: PaginationComponent, isStandalone: true, selector: "lib-pagination", inputs: { page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, showPageSizeSelector: { classPropertyName: "showPageSizeSelector", publicName: "showPageSizeSelector", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { page: "pageChange", pageSize: "pageSizeChange" }, ngImport: i0, template: "<div class=\"pagination-container\">\r\n  <div class=\"pagination\" role=\"navigation\" aria-label=\"Pagination\">\r\n    <!-- Bot\u00F3n doble atr\u00E1s -->\r\n    <button class=\"icon-button\" (click)=\"goToPage(1)\" [disabled]=\"page() === 1\" aria-label=\"Ir a la primera p\u00E1gina\">\r\n      \u00AB\u00AB\r\n    </button>\r\n\r\n    <!-- Bot\u00F3n atr\u00E1s -->\r\n    <button class=\"icon-button\" (click)=\"goToPage(page() - 1)\" [disabled]=\"page() === 1\"\r\n      aria-label=\"Ir a la p\u00E1gina anterior\">\r\n      \u00AB\r\n    </button>\r\n\r\n    <!-- N\u00FAmeros de p\u00E1gina -->\r\n    <div class=\"pages\">\r\n      @for (p of visiblePages(); track $index) {\r\n      <button class=\"page-btn\" [class.active]=\"p === page()\" [disabled]=\"p === '...'\" (click)=\"goToPage(p)\"\r\n        [attr.aria-current]=\"p === page() ? 'page' : null\"\r\n        [attr.aria-label]=\"p === '...' ? 'M\u00E1s p\u00E1ginas' : 'Ir a la p\u00E1gina ' + p\">\r\n        {{ p }}\r\n      </button>\r\n      }\r\n    </div>\r\n\r\n    <!-- Bot\u00F3n siguiente -->\r\n    <button class=\"icon-button\" (click)=\"goToPage(page() + 1)\" [disabled]=\"page() === totalPages()\"\r\n      aria-label=\"Ir a la p\u00E1gina siguiente\">\r\n      \u00BB\r\n    </button>\r\n\r\n    <!-- Bot\u00F3n doble adelante -->\r\n    <button class=\"icon-button\" (click)=\"goToPage(totalPages())\" [disabled]=\"page() === totalPages()\"\r\n      aria-label=\"Ir a la \u00FAltima p\u00E1gina\">\r\n      \u00BB\u00BB\r\n    </button>\r\n  </div>\r\n\r\n  <!-- Selector Items por p\u00E1gina -->\r\n  @if (showPageSizeSelector() && totalPages() > 1) {\r\n  <div class=\"pagination-v-4\">\r\n    <div class=\"label-pagination\">Items por p\u00E1gina</div>\r\n    <div class=\"elements-pagination\">\r\n      <div class=\"split-button\" (click)=\"togglePageSizeMenu()\">\r\n        <div class=\"leading-button\">\r\n          <div class=\"state-layer\">\r\n            <div class=\"label\">{{ pageSize() }}</div>\r\n          </div>\r\n        </div>\r\n        <div class=\"trailing-button\">\r\n          <div class=\"arrow\" [class.open]=\"isOpen()\">\r\n            <svg class=\"arrow\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\">\r\n              <polyline points=\"6 9 12 15 18 9\"></polyline>\r\n            </svg>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Men\u00FA desplegable -->\r\n      @if (showPageSizeMenu()) {\r\n      <div class=\"page-size-menu\">\r\n        @for (opt of pageSizeOptions(); track $index) {\r\n        <div class=\"menu-option\" [class.active]=\"opt === pageSize()\" (click)=\"selectPageSize(opt)\">\r\n          {{ opt }}\r\n        </div>\r\n        }\r\n      </div>\r\n      }\r\n    </div>\r\n  </div>\r\n  }\r\n</div>", styles: [".pagination-container{display:flex;flex-direction:row;justify-content:center;width:100%;padding:8px 0;position:relative}.pagination{display:flex;align-items:center;gap:12px;padding:12px;justify-content:center;flex:1}.icon-button{width:40px;height:40px;border-radius:50%;background:var(--primary, #596300);color:var(--surface, #ffffff);border:none;cursor:pointer;font-size:16px;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 2px #00000026;transition:background .2s ease,transform .1s ease}.icon-button:disabled{background:#969696;color:var(--on-surface, #171c1f);opacity:.45;cursor:not-allowed}.pages{display:flex;gap:4px;overflow:hidden;border-radius:20px}.page-btn{background:var(--secondary-container, #dee58f);width:40px;height:40px;border:none;cursor:pointer;padding:8px 14px;font-size:14px;color:var(--schemes-on-surface, #3a3a3a);font-family:Roboto,sans-serif;border-radius:8px;transition:background .2s ease}.page-btn:hover:not(.active):not(:disabled){background:var(--schemes-on-secondary-container, #61661f);color:var(--schemes-secondary-container, #dee58f)}.page-btn.active{background:var(--schemes-primary, #596300);color:var(--schemes-on-primary, #ffffff);font-weight:600;border-radius:20px}.page-btn:disabled{background:transparent;cursor:default;box-shadow:none;pointer-events:none}.pagination-v-4{display:flex;gap:10px;align-items:center;margin-left:auto}.label-pagination{font-size:14px;font-weight:600;color:var(--schemes-on-surface)}.elements-pagination{position:relative;display:flex;gap:4px;border-radius:20px}.split-button{display:flex;cursor:pointer;border-radius:20px;overflow:hidden}.leading-button{background:var(--schemes-secondary-container);border-radius:20px 4px 4px 20px;display:flex;align-items:center;height:40px}.state-layer{padding:10px 16px;background-color:#dee58f;margin-right:4px;border-radius:8px}.state-layer:open{color:#f5f5e0;background-color:#596300}.label{font-size:14px;font-weight:500;color:var(--schemes-on-secondary-container)}.trailing-button{background:var(--secondary-container, #dee58f);padding-left:12px;padding-right:12px;border:none;cursor:pointer;font-size:14px;color:var(--schemes-on-surface, #3a3a3a);font-family:Roboto,sans-serif;border-radius:8px;transition:background .2s ease;align-items:center;align-content:center}.arrow{width:20px;height:20px;color:#171c1f;transition:transform .25s ease}.arrow.open{transform:rotate(180deg)}.page-size-menu{background:#f5f5e0;position:absolute;min-width:100px;border-radius:4px;box-shadow:0 2px 8px #0003;overflow:hidden;z-index:999;bottom:50px;right:0;transform-origin:top right}.menu-option{padding:8px 12px;cursor:pointer}.menu-option:hover{background:#dee58f5b}.menu-option.active{background:#dee58f;color:#61661f}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PaginationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-pagination', standalone: true, imports: [CommonModule], template: "<div class=\"pagination-container\">\r\n  <div class=\"pagination\" role=\"navigation\" aria-label=\"Pagination\">\r\n    <!-- Bot\u00F3n doble atr\u00E1s -->\r\n    <button class=\"icon-button\" (click)=\"goToPage(1)\" [disabled]=\"page() === 1\" aria-label=\"Ir a la primera p\u00E1gina\">\r\n      \u00AB\u00AB\r\n    </button>\r\n\r\n    <!-- Bot\u00F3n atr\u00E1s -->\r\n    <button class=\"icon-button\" (click)=\"goToPage(page() - 1)\" [disabled]=\"page() === 1\"\r\n      aria-label=\"Ir a la p\u00E1gina anterior\">\r\n      \u00AB\r\n    </button>\r\n\r\n    <!-- N\u00FAmeros de p\u00E1gina -->\r\n    <div class=\"pages\">\r\n      @for (p of visiblePages(); track $index) {\r\n      <button class=\"page-btn\" [class.active]=\"p === page()\" [disabled]=\"p === '...'\" (click)=\"goToPage(p)\"\r\n        [attr.aria-current]=\"p === page() ? 'page' : null\"\r\n        [attr.aria-label]=\"p === '...' ? 'M\u00E1s p\u00E1ginas' : 'Ir a la p\u00E1gina ' + p\">\r\n        {{ p }}\r\n      </button>\r\n      }\r\n    </div>\r\n\r\n    <!-- Bot\u00F3n siguiente -->\r\n    <button class=\"icon-button\" (click)=\"goToPage(page() + 1)\" [disabled]=\"page() === totalPages()\"\r\n      aria-label=\"Ir a la p\u00E1gina siguiente\">\r\n      \u00BB\r\n    </button>\r\n\r\n    <!-- Bot\u00F3n doble adelante -->\r\n    <button class=\"icon-button\" (click)=\"goToPage(totalPages())\" [disabled]=\"page() === totalPages()\"\r\n      aria-label=\"Ir a la \u00FAltima p\u00E1gina\">\r\n      \u00BB\u00BB\r\n    </button>\r\n  </div>\r\n\r\n  <!-- Selector Items por p\u00E1gina -->\r\n  @if (showPageSizeSelector()) {\r\n  <div class=\"pagination-v-4\">\r\n    <div class=\"label-pagination\">Items por p\u00E1gina</div>\r\n    <div class=\"elements-pagination\">\r\n      <div class=\"split-button\" (click)=\"togglePageSizeMenu()\">\r\n        <div class=\"leading-button\">\r\n          <div class=\"state-layer\">\r\n            <div class=\"label\">{{ pageSize() }}</div>\r\n          </div>\r\n        </div>\r\n        <div class=\"trailing-button\">\r\n          <div class=\"arrow\" [class.open]=\"isOpen()\">\r\n            <svg class=\"arrow\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\">\r\n              <polyline points=\"6 9 12 15 18 9\"></polyline>\r\n            </svg>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Men\u00FA desplegable -->\r\n      @if (showPageSizeMenu()) {\r\n      <div class=\"page-size-menu\">\r\n        @for (opt of pageSizeOptions(); track $index) {\r\n        <div class=\"menu-option\" [class.active]=\"opt === pageSize()\" (click)=\"selectPageSize(opt)\">\r\n          {{ opt }}\r\n        </div>\r\n        }\r\n      </div>\r\n      }\r\n    </div>\r\n  </div>\r\n  }\r\n</div>", styles: [".pagination-container{display:flex;flex-direction:row;justify-content:center;width:100%;padding:8px 0;position:relative}.pagination{display:flex;align-items:center;gap:12px;padding:12px;justify-content:center;flex:1}.icon-button{width:40px;height:40px;border-radius:50%;background:var(--primary, #596300);color:var(--surface, #ffffff);border:none;cursor:pointer;font-size:16px;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 2px #00000026;transition:background .2s ease,transform .1s ease}.icon-button:disabled{background:#969696;color:var(--on-surface, #171c1f);opacity:.45;cursor:not-allowed}.pages{display:flex;gap:4px;overflow:hidden;border-radius:20px}.page-btn{background:var(--secondary-container, #dee58f);width:40px;height:40px;border:none;cursor:pointer;padding:8px 14px;font-size:14px;color:var(--schemes-on-surface, #3a3a3a);font-family:Roboto,sans-serif;border-radius:8px;transition:background .2s ease}.page-btn:hover:not(.active):not(:disabled){background:var(--schemes-on-secondary-container, #61661f);color:var(--schemes-secondary-container, #dee58f)}.page-btn.active{background:var(--schemes-primary, #596300);color:var(--schemes-on-primary, #ffffff);font-weight:600;border-radius:20px}.page-btn:disabled{background:transparent;cursor:default;box-shadow:none;pointer-events:none}.pagination-v-4{display:flex;gap:10px;align-items:center;margin-left:auto}.label-pagination{font-size:14px;font-weight:600;color:var(--schemes-on-surface)}.elements-pagination{position:relative;display:flex;gap:4px;border-radius:20px}.split-button{display:flex;cursor:pointer;border-radius:20px;overflow:hidden}.leading-button{background:var(--schemes-secondary-container);border-radius:20px 4px 4px 20px;display:flex;align-items:center;height:40px}.state-layer{padding:10px 16px;background-color:#dee58f;margin-right:4px;border-radius:8px}.state-layer:open{color:#f5f5e0;background-color:#596300}.label{font-size:14px;font-weight:500;color:var(--schemes-on-secondary-container)}.trailing-button{background:var(--secondary-container, #dee58f);padding-left:12px;padding-right:12px;border:none;cursor:pointer;font-size:14px;color:var(--schemes-on-surface, #3a3a3a);font-family:Roboto,sans-serif;border-radius:8px;transition:background .2s ease;align-items:center;align-content:center}.arrow{width:20px;height:20px;color:#171c1f;transition:transform .25s ease}.arrow.open{transform:rotate(180deg)}.page-size-menu{background:#f5f5e0;position:absolute;min-width:100px;border-radius:4px;box-shadow:0 2px 8px #0003;overflow:hidden;z-index:999;bottom:50px;right:0;transform-origin:top right}.menu-option{padding:8px 12px;cursor:pointer}.menu-option:hover{background:#dee58f5b}.menu-option.active{background:#dee58f;color:#61661f}\n"] }]
+            args: [{ selector: 'lib-pagination', standalone: true, imports: [CommonModule], template: "<div class=\"pagination-container\">\r\n  <div class=\"pagination\" role=\"navigation\" aria-label=\"Pagination\">\r\n    <!-- Bot\u00F3n doble atr\u00E1s -->\r\n    <button class=\"icon-button\" (click)=\"goToPage(1)\" [disabled]=\"page() === 1\" aria-label=\"Ir a la primera p\u00E1gina\">\r\n      \u00AB\u00AB\r\n    </button>\r\n\r\n    <!-- Bot\u00F3n atr\u00E1s -->\r\n    <button class=\"icon-button\" (click)=\"goToPage(page() - 1)\" [disabled]=\"page() === 1\"\r\n      aria-label=\"Ir a la p\u00E1gina anterior\">\r\n      \u00AB\r\n    </button>\r\n\r\n    <!-- N\u00FAmeros de p\u00E1gina -->\r\n    <div class=\"pages\">\r\n      @for (p of visiblePages(); track $index) {\r\n      <button class=\"page-btn\" [class.active]=\"p === page()\" [disabled]=\"p === '...'\" (click)=\"goToPage(p)\"\r\n        [attr.aria-current]=\"p === page() ? 'page' : null\"\r\n        [attr.aria-label]=\"p === '...' ? 'M\u00E1s p\u00E1ginas' : 'Ir a la p\u00E1gina ' + p\">\r\n        {{ p }}\r\n      </button>\r\n      }\r\n    </div>\r\n\r\n    <!-- Bot\u00F3n siguiente -->\r\n    <button class=\"icon-button\" (click)=\"goToPage(page() + 1)\" [disabled]=\"page() === totalPages()\"\r\n      aria-label=\"Ir a la p\u00E1gina siguiente\">\r\n      \u00BB\r\n    </button>\r\n\r\n    <!-- Bot\u00F3n doble adelante -->\r\n    <button class=\"icon-button\" (click)=\"goToPage(totalPages())\" [disabled]=\"page() === totalPages()\"\r\n      aria-label=\"Ir a la \u00FAltima p\u00E1gina\">\r\n      \u00BB\u00BB\r\n    </button>\r\n  </div>\r\n\r\n  <!-- Selector Items por p\u00E1gina -->\r\n  @if (showPageSizeSelector() && totalPages() > 1) {\r\n  <div class=\"pagination-v-4\">\r\n    <div class=\"label-pagination\">Items por p\u00E1gina</div>\r\n    <div class=\"elements-pagination\">\r\n      <div class=\"split-button\" (click)=\"togglePageSizeMenu()\">\r\n        <div class=\"leading-button\">\r\n          <div class=\"state-layer\">\r\n            <div class=\"label\">{{ pageSize() }}</div>\r\n          </div>\r\n        </div>\r\n        <div class=\"trailing-button\">\r\n          <div class=\"arrow\" [class.open]=\"isOpen()\">\r\n            <svg class=\"arrow\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\">\r\n              <polyline points=\"6 9 12 15 18 9\"></polyline>\r\n            </svg>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Men\u00FA desplegable -->\r\n      @if (showPageSizeMenu()) {\r\n      <div class=\"page-size-menu\">\r\n        @for (opt of pageSizeOptions(); track $index) {\r\n        <div class=\"menu-option\" [class.active]=\"opt === pageSize()\" (click)=\"selectPageSize(opt)\">\r\n          {{ opt }}\r\n        </div>\r\n        }\r\n      </div>\r\n      }\r\n    </div>\r\n  </div>\r\n  }\r\n</div>", styles: [".pagination-container{display:flex;flex-direction:row;justify-content:center;width:100%;padding:8px 0;position:relative}.pagination{display:flex;align-items:center;gap:12px;padding:12px;justify-content:center;flex:1}.icon-button{width:40px;height:40px;border-radius:50%;background:var(--primary, #596300);color:var(--surface, #ffffff);border:none;cursor:pointer;font-size:16px;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 2px #00000026;transition:background .2s ease,transform .1s ease}.icon-button:disabled{background:#969696;color:var(--on-surface, #171c1f);opacity:.45;cursor:not-allowed}.pages{display:flex;gap:4px;overflow:hidden;border-radius:20px}.page-btn{background:var(--secondary-container, #dee58f);width:40px;height:40px;border:none;cursor:pointer;padding:8px 14px;font-size:14px;color:var(--schemes-on-surface, #3a3a3a);font-family:Roboto,sans-serif;border-radius:8px;transition:background .2s ease}.page-btn:hover:not(.active):not(:disabled){background:var(--schemes-on-secondary-container, #61661f);color:var(--schemes-secondary-container, #dee58f)}.page-btn.active{background:var(--schemes-primary, #596300);color:var(--schemes-on-primary, #ffffff);font-weight:600;border-radius:20px}.page-btn:disabled{background:transparent;cursor:default;box-shadow:none;pointer-events:none}.pagination-v-4{display:flex;gap:10px;align-items:center;margin-left:auto}.label-pagination{font-size:14px;font-weight:600;color:var(--schemes-on-surface)}.elements-pagination{position:relative;display:flex;gap:4px;border-radius:20px}.split-button{display:flex;cursor:pointer;border-radius:20px;overflow:hidden}.leading-button{background:var(--schemes-secondary-container);border-radius:20px 4px 4px 20px;display:flex;align-items:center;height:40px}.state-layer{padding:10px 16px;background-color:#dee58f;margin-right:4px;border-radius:8px}.state-layer:open{color:#f5f5e0;background-color:#596300}.label{font-size:14px;font-weight:500;color:var(--schemes-on-secondary-container)}.trailing-button{background:var(--secondary-container, #dee58f);padding-left:12px;padding-right:12px;border:none;cursor:pointer;font-size:14px;color:var(--schemes-on-surface, #3a3a3a);font-family:Roboto,sans-serif;border-radius:8px;transition:background .2s ease;align-items:center;align-content:center}.arrow{width:20px;height:20px;color:#171c1f;transition:transform .25s ease}.arrow.open{transform:rotate(180deg)}.page-size-menu{background:#f5f5e0;position:absolute;min-width:100px;border-radius:4px;box-shadow:0 2px 8px #0003;overflow:hidden;z-index:999;bottom:50px;right:0;transform-origin:top right}.menu-option{padding:8px 12px;cursor:pointer}.menu-option:hover{background:#dee58f5b}.menu-option.active{background:#dee58f;color:#61661f}\n"] }]
         }], propDecorators: { page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }, { type: i0.Output, args: ["pageChange"] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }, { type: i0.Output, args: ["pageSizeChange"] }], totalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItems", required: false }] }], showPageSizeSelector: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPageSizeSelector", required: false }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }] } });
 
 const STATUS_TONE_STYLES = {
-    success: { bg: '#E6F4EA', color: '#1E8E3E' },
-    error: { bg: '#FCE8E6', color: '#D93025' },
-    warning: { bg: '#FFF4E5', color: '#E67E22' },
-    info: { bg: '#E6F4EA', color: '#0077B6' },
-    neutral: { bg: '#F4F4F4', color: '#5F6368' },
+    success: { bg: '#9ED89D', color: '#006D2F' },
+    error: { bg: '#D89D9D', color: '#CF0707' },
+    warning: { bg: '#D8BF9D', color: '#CF6507' },
+    info: { bg: '#9DAFD8', color: '#0746CF' },
+    neutral: { bg: '#BAC2BB', color: '#40484C' },
 };
 class Table {
     columns = input([], ...(ngDevMode ? [{ debugName: "columns" }] : []));
@@ -153,6 +153,7 @@ class Table {
                 return 'right';
             case 'status':
                 return 'center';
+            case 'email':
             default:
                 return 'left';
         }
@@ -174,6 +175,8 @@ class Table {
             case 'date':
                 const d = new Date(value);
                 return d.toLocaleDateString('es-CO'); // dd/mm/yyyy
+            case 'email':
+                return String(value).toLowerCase();
             default:
                 return String(value);
         }
@@ -260,11 +263,11 @@ class Table {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Table, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", 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 }, statusEnumMap: { classPropertyName: "statusEnumMap", publicName: "statusEnumMap", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { optionSelected: "optionSelected", iconAction: "iconAction" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, viewQueries: [{ propertyName: "chips", predicate: ["statusChip"], 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 #statusChip\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\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;padding:.375rem .75rem;border-radius:6px;font-size:.875rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box}.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"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", 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 }, statusEnumMap: { classPropertyName: "statusEnumMap", publicName: "statusEnumMap", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { optionSelected: "optionSelected", iconAction: "iconAction" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, viewQueries: [{ propertyName: "chips", predicate: ["statusChip"], 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 (click)=\"col.sortable !== false && onSort(col)\" [class.sortable]=\"col.sortable !== false\"\r\n          [class]=\"getAlignment(col)\">\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 #statusChip class=\"status-chip\" [style.background-color]=\"style.bg\" [style.color]=\"style.color\">\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 class=\"icon\" [class]=\"col.icon\" [style.color]=\"col.iconColor\"></span>\r\n          </button>\r\n\r\n          } @else { @if(col.type === 'email'){\r\n          {{ formatValue(col, row[col.key]).toLowerCase() }}\r\n          } @else {\r\n          {{ formatValue(col, row[col.key]).toUpperCase() }}\r\n          }\r\n          }\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 xmlns=\"http://www.w3.org/2000/svg\" class=\"more-vert\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"\r\n                    fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\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 class=\"option-item\" [style.color]=\"option.color\" (click)=\"onOptionClick(option, row)\">\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>", 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;justify-content:center;gap:.5rem;padding:.375rem .75rem;border-radius:6px;font-size:.875rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box}.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.16", 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 #statusChip\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\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;padding:.375rem .75rem;border-radius:6px;font-size:.875rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box}.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"] }]
+            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 (click)=\"col.sortable !== false && onSort(col)\" [class.sortable]=\"col.sortable !== false\"\r\n          [class]=\"getAlignment(col)\">\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 #statusChip class=\"status-chip\" [style.background-color]=\"style.bg\" [style.color]=\"style.color\">\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 class=\"icon\" [class]=\"col.icon\" [style.color]=\"col.iconColor\"></span>\r\n          </button>\r\n\r\n          } @else { @if(col.type === 'email'){\r\n          {{ formatValue(col, row[col.key]).toLowerCase() }}\r\n          } @else {\r\n          {{ formatValue(col, row[col.key]).toUpperCase() }}\r\n          }\r\n          }\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 xmlns=\"http://www.w3.org/2000/svg\" class=\"more-vert\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"\r\n                    fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\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 class=\"option-item\" [style.color]=\"option.color\" (click)=\"onOptionClick(option, row)\">\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>", 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;justify-content:center;gap:.5rem;padding:.375rem .75rem;border-radius:6px;font-size:.875rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box}.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 }] }], statusEnumMap: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusEnumMap", required: false }] }], chips: [{
                 type: ViewChildren,
                 args: ['statusChip']
@@ -1218,7 +1221,7 @@ class DateTimeFilter {
                 useExisting: forwardRef(() => DateTimeFilter),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div class=\"datetime-container\">\r\n  <div class=\"filter-chips\">\r\n    @for (item of filters(); track item.value) {\r\n      <div\r\n        class=\"chip-input-wrapper\"\r\n        [class.has-value]=\"selectedDate() || inputTextValue()\"\r\n        [class.active]=\"activeFilterType() === item.value\"\r\n      >\r\n        <!-- Etiqueta flotante -->\r\n        <label class=\"floating-label\">{{ item.placeholder || item.label || 'dd/mm/aaaa' }}</label>\r\n\r\n        <!-- M\u00E1scara de gu\u00EDa de fecha din\u00E1mica (__/__/____) -->\r\n        <div class=\"chip-input-mask\">\r\n          @for (part of inputMask(); track $index) {\r\n            <span\r\n              class=\"mask-char\"\r\n              [class.mask-char-filled]=\"part.filled\"\r\n              [class.mask-char-placeholder]=\"!part.filled\"\r\n            >\r\n              {{ part.char }}\r\n            </span>\r\n          }\r\n        </div>\r\n\r\n        <input\r\n          type=\"text\"\r\n          [value]=\"inputTextValue()\"\r\n          (input)=\"onInputChange($event, item.value)\"\r\n          (focus)=\"onInputFocus(item.value)\"\r\n          [placeholder]=\"placeholder()\"\r\n          class=\"chip-input\"\r\n          [disabled]=\"isDisabled()\"\r\n        />\r\n\r\n        <button\r\n          type=\"button\"\r\n          class=\"calendar-icon-button\"\r\n          (click)=\"toggle(item.value)\"\r\n          title=\"Abrir calendario\"\r\n        >\r\n          <svg\r\n            xmlns=\"http://www.w3.org/2000/svg\"\r\n            width=\"18\"\r\n            height=\"18\"\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            class=\"icon icon-tabler icons-tabler-outline icon-tabler-calendar-event\"\r\n          >\r\n            <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n            <path\r\n              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\"\r\n            />\r\n            <path d=\"M16 3l0 4\" />\r\n            <path d=\"M8 3l0 4\" />\r\n            <path d=\"M4 11l16 0\" />\r\n            <path d=\"M8 15h2v2h-2z\" />\r\n          </svg>\r\n        </button>\r\n\r\n        @if (isOpen() && activeFilterType() === item.value) {\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 -->\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\">\r\n                    {{ monthName() }} {{ currentYear() }}\r\n                  </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 -->\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\r\n                <!-- TIME PICKER -->\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            </div>\r\n\r\n            <!-- botones -->\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\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      </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".datetime-container{position:relative;width:100%}.filter-chips{display:flex;gap:10px;padding:8px;border-radius:12px;position:relative}.chip-input-wrapper{position:relative;display:flex;align-items:center;border-radius:8px;border-style:solid;border-color:var(--schemes-outline-variant, #c0c7cd);border-width:1px;height:32px;flex-shrink:0;transition:.2s ease;background-color:transparent}.chip-input-wrapper:hover{background-color:#ececcf}.chip-input-wrapper:focus-within,.chip-input-wrapper.active{color:var(--on-surface, #171c1f);border-color:#b6b69b}.floating-label{position:absolute;left:12px;top:-8px;color:var(--schemes-on-surface-variant, #454733);font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:11px;line-height:12px;letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);opacity:0;pointer-events:none;transition:all .2s ease;z-index:2;background-color:#ebeccf;padding:0 4px;border-radius:2px}.chip-input-wrapper:focus-within .floating-label{opacity:.6;top:-8px}.chip-input-wrapper.has-value .floating-label{opacity:.6}.chip-input{border:none;outline:none;background:transparent;padding:6px 40px 6px 8px;height:100%;width:100%;color:transparent;caret-color:var(--schemes-on-surface-variant, #454733);font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:var(--theme-label-large-font-size, 14px);line-height:var(--theme-label-large-line-height, 20px);letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);border-radius:8px;position:relative;z-index:2}.chip-input::placeholder{color:var(--schemes-on-surface-variant, #454733);opacity:.6}.chip-input:disabled{cursor:not-allowed;opacity:.6}.chip-input-mask{position:absolute;left:8px;right:40px;top:50%;transform:translateY(-50%);pointer-events:none;font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:var(--theme-label-large-font-size, 14px);font-weight:var(--theme-label-large-font-weight, 500);z-index:1;display:flex;opacity:0;transition:opacity .2s ease}.chip-input-wrapper:focus-within .chip-input-mask,.chip-input-wrapper.has-value .chip-input-mask{opacity:1}.chip-input-wrapper:focus-within .chip-input::placeholder{opacity:0}.mask-char-placeholder{color:var(--schemes-on-surface-variant, #454733);opacity:.4}.mask-char-filled{color:var(--schemes-on-surface, #171c1f);opacity:1}.calendar-icon-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;color:var(--schemes-on-surface-variant, #454733);border-radius:4px;transition:all .2s;z-index:3}.calendar-icon-button svg{width:18px;height:18px}.icon.icon-tabler-calendar-event{width:18px;height:18px;color:var(--on-surface-variant, #40484c)}.date-picker-container{margin-top:12px;width:100%;display:flex;justify-content:flex-start}.datetime-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;transition:border-color .2s}.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: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;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:12px 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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }] });
+        ], ngImport: i0, template: "<div class=\"datetime-container\">\r\n  <div class=\"filter-chips\">\r\n    @for (item of filters(); track item.value) {\r\n      <div\r\n        class=\"chip-input-wrapper\"\r\n        [class.has-value]=\"selectedDate() || inputTextValue()\"\r\n        [class.active]=\"activeFilterType() === item.value\"\r\n      >\r\n        <!-- Etiqueta flotante -->\r\n        <label class=\"floating-label\">{{ item.placeholder || item.label || 'dd/mm/aaaa' }}</label>\r\n\r\n        <!-- M\u00E1scara de gu\u00EDa de fecha din\u00E1mica (__/__/____) -->\r\n        <div class=\"chip-input-mask\">\r\n          @for (part of inputMask(); track $index) {\r\n            <span\r\n              class=\"mask-char\"\r\n              [class.mask-char-filled]=\"part.filled\"\r\n              [class.mask-char-placeholder]=\"!part.filled\"\r\n            >\r\n              {{ part.char }}\r\n            </span>\r\n          }\r\n        </div>\r\n\r\n        <input\r\n          type=\"text\"\r\n          [value]=\"inputTextValue()\"\r\n          (input)=\"onInputChange($event, item.value)\"\r\n          (focus)=\"onInputFocus(item.value)\"\r\n          [placeholder]=\"item.placeholder || 'Seleccionar Fecha'\"\r\n          class=\"chip-input\"\r\n          [disabled]=\"isDisabled()\"\r\n        />\r\n\r\n        <button\r\n          type=\"button\"\r\n          class=\"calendar-icon-button\"\r\n          (click)=\"toggle(item.value)\"\r\n          title=\"Abrir calendario\"\r\n        >\r\n          <svg\r\n            xmlns=\"http://www.w3.org/2000/svg\"\r\n            width=\"18\"\r\n            height=\"18\"\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            class=\"icon icon-tabler icons-tabler-outline icon-tabler-calendar-event\"\r\n          >\r\n            <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n            <path\r\n              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\"\r\n            />\r\n            <path d=\"M16 3l0 4\" />\r\n            <path d=\"M8 3l0 4\" />\r\n            <path d=\"M4 11l16 0\" />\r\n            <path d=\"M8 15h2v2h-2z\" />\r\n          </svg>\r\n        </button>\r\n\r\n        @if (isOpen() && activeFilterType() === item.value) {\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 -->\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\">\r\n                    {{ monthName() }} {{ currentYear() }}\r\n                  </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 -->\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\r\n                <!-- TIME PICKER -->\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            </div>\r\n\r\n            <!-- botones -->\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\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      </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".datetime-container{position:relative;width:100%}.filter-chips{display:flex;gap:10px;padding:8px;border-radius:12px;position:relative}.chip-input-wrapper{position:relative;display:flex;align-items:center;border-radius:8px;border-style:solid;border-color:var(--schemes-outline-variant, #c0c7cd);border-width:1px;height:32px;flex-shrink:0;transition:.2s ease;background-color:transparent}.chip-input-wrapper:hover{background-color:#ececcf}.chip-input-wrapper:focus-within,.chip-input-wrapper.active{color:var(--on-surface, #171c1f);border-color:#b6b69b}.floating-label{position:absolute;left:12px;top:-8px;color:var(--schemes-on-surface-variant, #454733);font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:11px;line-height:12px;letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);opacity:0;pointer-events:none;transition:all .2s ease;z-index:2;background-color:#ebeccf;padding:0 4px;border-radius:2px}.chip-input-wrapper:focus-within .floating-label{opacity:.6;top:-8px}.chip-input-wrapper.has-value .floating-label{opacity:.6}.chip-input{border:none;outline:none;background:transparent;padding:6px 40px 6px 8px;height:100%;width:100%;color:transparent;caret-color:var(--schemes-on-surface-variant, #454733);font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:var(--theme-label-large-font-size, 14px);line-height:var(--theme-label-large-line-height, 20px);letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);border-radius:8px;position:relative;z-index:2}.chip-input::placeholder{color:var(--schemes-on-surface-variant, #454733);opacity:.6}.chip-input:disabled{cursor:not-allowed;opacity:.6}.chip-input-mask{position:absolute;left:8px;right:40px;top:50%;transform:translateY(-50%);pointer-events:none;font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:var(--theme-label-large-font-size, 14px);font-weight:var(--theme-label-large-font-weight, 500);z-index:1;display:flex;opacity:0;transition:opacity .2s ease}.chip-input-wrapper:focus-within .chip-input-mask,.chip-input-wrapper.has-value .chip-input-mask{opacity:1}.chip-input-wrapper:focus-within .chip-input::placeholder{opacity:0}.mask-char-placeholder{color:var(--schemes-on-surface-variant, #454733);opacity:.4}.mask-char-filled{color:var(--schemes-on-surface, #171c1f);opacity:1}.calendar-icon-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;color:var(--schemes-on-surface-variant, #454733);border-radius:4px;transition:all .2s;z-index:3}.calendar-icon-button svg{width:18px;height:18px}.icon.icon-tabler-calendar-event{width:18px;height:18px;color:var(--on-surface-variant, #40484c)}.date-picker-container{margin-top:12px;width:100%;display:flex;justify-content:flex-start}.datetime-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;transition:border-color .2s}.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: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;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:12px 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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DateTimeFilter, decorators: [{
             type: Component,
@@ -1228,7 +1231,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                             useExisting: forwardRef(() => DateTimeFilter),
                             multi: true,
                         },
-                    ], template: "<div class=\"datetime-container\">\r\n  <div class=\"filter-chips\">\r\n    @for (item of filters(); track item.value) {\r\n      <div\r\n        class=\"chip-input-wrapper\"\r\n        [class.has-value]=\"selectedDate() || inputTextValue()\"\r\n        [class.active]=\"activeFilterType() === item.value\"\r\n      >\r\n        <!-- Etiqueta flotante -->\r\n        <label class=\"floating-label\">{{ item.placeholder || item.label || 'dd/mm/aaaa' }}</label>\r\n\r\n        <!-- M\u00E1scara de gu\u00EDa de fecha din\u00E1mica (__/__/____) -->\r\n        <div class=\"chip-input-mask\">\r\n          @for (part of inputMask(); track $index) {\r\n            <span\r\n              class=\"mask-char\"\r\n              [class.mask-char-filled]=\"part.filled\"\r\n              [class.mask-char-placeholder]=\"!part.filled\"\r\n            >\r\n              {{ part.char }}\r\n            </span>\r\n          }\r\n        </div>\r\n\r\n        <input\r\n          type=\"text\"\r\n          [value]=\"inputTextValue()\"\r\n          (input)=\"onInputChange($event, item.value)\"\r\n          (focus)=\"onInputFocus(item.value)\"\r\n          [placeholder]=\"placeholder()\"\r\n          class=\"chip-input\"\r\n          [disabled]=\"isDisabled()\"\r\n        />\r\n\r\n        <button\r\n          type=\"button\"\r\n          class=\"calendar-icon-button\"\r\n          (click)=\"toggle(item.value)\"\r\n          title=\"Abrir calendario\"\r\n        >\r\n          <svg\r\n            xmlns=\"http://www.w3.org/2000/svg\"\r\n            width=\"18\"\r\n            height=\"18\"\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            class=\"icon icon-tabler icons-tabler-outline icon-tabler-calendar-event\"\r\n          >\r\n            <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n            <path\r\n              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\"\r\n            />\r\n            <path d=\"M16 3l0 4\" />\r\n            <path d=\"M8 3l0 4\" />\r\n            <path d=\"M4 11l16 0\" />\r\n            <path d=\"M8 15h2v2h-2z\" />\r\n          </svg>\r\n        </button>\r\n\r\n        @if (isOpen() && activeFilterType() === item.value) {\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 -->\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\">\r\n                    {{ monthName() }} {{ currentYear() }}\r\n                  </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 -->\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\r\n                <!-- TIME PICKER -->\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            </div>\r\n\r\n            <!-- botones -->\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\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      </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".datetime-container{position:relative;width:100%}.filter-chips{display:flex;gap:10px;padding:8px;border-radius:12px;position:relative}.chip-input-wrapper{position:relative;display:flex;align-items:center;border-radius:8px;border-style:solid;border-color:var(--schemes-outline-variant, #c0c7cd);border-width:1px;height:32px;flex-shrink:0;transition:.2s ease;background-color:transparent}.chip-input-wrapper:hover{background-color:#ececcf}.chip-input-wrapper:focus-within,.chip-input-wrapper.active{color:var(--on-surface, #171c1f);border-color:#b6b69b}.floating-label{position:absolute;left:12px;top:-8px;color:var(--schemes-on-surface-variant, #454733);font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:11px;line-height:12px;letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);opacity:0;pointer-events:none;transition:all .2s ease;z-index:2;background-color:#ebeccf;padding:0 4px;border-radius:2px}.chip-input-wrapper:focus-within .floating-label{opacity:.6;top:-8px}.chip-input-wrapper.has-value .floating-label{opacity:.6}.chip-input{border:none;outline:none;background:transparent;padding:6px 40px 6px 8px;height:100%;width:100%;color:transparent;caret-color:var(--schemes-on-surface-variant, #454733);font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:var(--theme-label-large-font-size, 14px);line-height:var(--theme-label-large-line-height, 20px);letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);border-radius:8px;position:relative;z-index:2}.chip-input::placeholder{color:var(--schemes-on-surface-variant, #454733);opacity:.6}.chip-input:disabled{cursor:not-allowed;opacity:.6}.chip-input-mask{position:absolute;left:8px;right:40px;top:50%;transform:translateY(-50%);pointer-events:none;font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:var(--theme-label-large-font-size, 14px);font-weight:var(--theme-label-large-font-weight, 500);z-index:1;display:flex;opacity:0;transition:opacity .2s ease}.chip-input-wrapper:focus-within .chip-input-mask,.chip-input-wrapper.has-value .chip-input-mask{opacity:1}.chip-input-wrapper:focus-within .chip-input::placeholder{opacity:0}.mask-char-placeholder{color:var(--schemes-on-surface-variant, #454733);opacity:.4}.mask-char-filled{color:var(--schemes-on-surface, #171c1f);opacity:1}.calendar-icon-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;color:var(--schemes-on-surface-variant, #454733);border-radius:4px;transition:all .2s;z-index:3}.calendar-icon-button svg{width:18px;height:18px}.icon.icon-tabler-calendar-event{width:18px;height:18px;color:var(--on-surface-variant, #40484c)}.date-picker-container{margin-top:12px;width:100%;display:flex;justify-content:flex-start}.datetime-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;transition:border-color .2s}.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: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;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:12px 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"] }]
+                    ], template: "<div class=\"datetime-container\">\r\n  <div class=\"filter-chips\">\r\n    @for (item of filters(); track item.value) {\r\n      <div\r\n        class=\"chip-input-wrapper\"\r\n        [class.has-value]=\"selectedDate() || inputTextValue()\"\r\n        [class.active]=\"activeFilterType() === item.value\"\r\n      >\r\n        <!-- Etiqueta flotante -->\r\n        <label class=\"floating-label\">{{ item.placeholder || item.label || 'dd/mm/aaaa' }}</label>\r\n\r\n        <!-- M\u00E1scara de gu\u00EDa de fecha din\u00E1mica (__/__/____) -->\r\n        <div class=\"chip-input-mask\">\r\n          @for (part of inputMask(); track $index) {\r\n            <span\r\n              class=\"mask-char\"\r\n              [class.mask-char-filled]=\"part.filled\"\r\n              [class.mask-char-placeholder]=\"!part.filled\"\r\n            >\r\n              {{ part.char }}\r\n            </span>\r\n          }\r\n        </div>\r\n\r\n        <input\r\n          type=\"text\"\r\n          [value]=\"inputTextValue()\"\r\n          (input)=\"onInputChange($event, item.value)\"\r\n          (focus)=\"onInputFocus(item.value)\"\r\n          [placeholder]=\"item.placeholder || 'Seleccionar Fecha'\"\r\n          class=\"chip-input\"\r\n          [disabled]=\"isDisabled()\"\r\n        />\r\n\r\n        <button\r\n          type=\"button\"\r\n          class=\"calendar-icon-button\"\r\n          (click)=\"toggle(item.value)\"\r\n          title=\"Abrir calendario\"\r\n        >\r\n          <svg\r\n            xmlns=\"http://www.w3.org/2000/svg\"\r\n            width=\"18\"\r\n            height=\"18\"\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            class=\"icon icon-tabler icons-tabler-outline icon-tabler-calendar-event\"\r\n          >\r\n            <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n            <path\r\n              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\"\r\n            />\r\n            <path d=\"M16 3l0 4\" />\r\n            <path d=\"M8 3l0 4\" />\r\n            <path d=\"M4 11l16 0\" />\r\n            <path d=\"M8 15h2v2h-2z\" />\r\n          </svg>\r\n        </button>\r\n\r\n        @if (isOpen() && activeFilterType() === item.value) {\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 -->\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\">\r\n                    {{ monthName() }} {{ currentYear() }}\r\n                  </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 -->\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\r\n                <!-- TIME PICKER -->\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            </div>\r\n\r\n            <!-- botones -->\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\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      </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".datetime-container{position:relative;width:100%}.filter-chips{display:flex;gap:10px;padding:8px;border-radius:12px;position:relative}.chip-input-wrapper{position:relative;display:flex;align-items:center;border-radius:8px;border-style:solid;border-color:var(--schemes-outline-variant, #c0c7cd);border-width:1px;height:32px;flex-shrink:0;transition:.2s ease;background-color:transparent}.chip-input-wrapper:hover{background-color:#ececcf}.chip-input-wrapper:focus-within,.chip-input-wrapper.active{color:var(--on-surface, #171c1f);border-color:#b6b69b}.floating-label{position:absolute;left:12px;top:-8px;color:var(--schemes-on-surface-variant, #454733);font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:11px;line-height:12px;letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);opacity:0;pointer-events:none;transition:all .2s ease;z-index:2;background-color:#ebeccf;padding:0 4px;border-radius:2px}.chip-input-wrapper:focus-within .floating-label{opacity:.6;top:-8px}.chip-input-wrapper.has-value .floating-label{opacity:.6}.chip-input{border:none;outline:none;background:transparent;padding:6px 40px 6px 8px;height:100%;width:100%;color:transparent;caret-color:var(--schemes-on-surface-variant, #454733);font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:var(--theme-label-large-font-size, 14px);line-height:var(--theme-label-large-line-height, 20px);letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);border-radius:8px;position:relative;z-index:2}.chip-input::placeholder{color:var(--schemes-on-surface-variant, #454733);opacity:.6}.chip-input:disabled{cursor:not-allowed;opacity:.6}.chip-input-mask{position:absolute;left:8px;right:40px;top:50%;transform:translateY(-50%);pointer-events:none;font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:var(--theme-label-large-font-size, 14px);font-weight:var(--theme-label-large-font-weight, 500);z-index:1;display:flex;opacity:0;transition:opacity .2s ease}.chip-input-wrapper:focus-within .chip-input-mask,.chip-input-wrapper.has-value .chip-input-mask{opacity:1}.chip-input-wrapper:focus-within .chip-input::placeholder{opacity:0}.mask-char-placeholder{color:var(--schemes-on-surface-variant, #454733);opacity:.4}.mask-char-filled{color:var(--schemes-on-surface, #171c1f);opacity:1}.calendar-icon-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;color:var(--schemes-on-surface-variant, #454733);border-radius:4px;transition:all .2s;z-index:3}.calendar-icon-button svg{width:18px;height:18px}.icon.icon-tabler-calendar-event{width:18px;height:18px;color:var(--on-surface-variant, #40484c)}.date-picker-container{margin-top:12px;width:100%;display:flex;justify-content:flex-start}.datetime-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;transition:border-color .2s}.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: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;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:12px 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: { filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }], dateSelected: [{ type: i0.Output, args: ["dateSelected"] }], dateChange: [{ type: i0.Output, args: ["dateChange"] }], clearTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearTrigger", required: false }] }] } });
 
 class InputNumberFilter {
@@ -2003,6 +2006,7 @@ class ToastHelper {
 }
 
 class ModalForm {
+    isFull = input(false, ...(ngDevMode ? [{ debugName: "isFull" }] : []));
     title = input('Formulario', ...(ngDevMode ? [{ debugName: "title" }] : []));
     subtitle = input('', ...(ngDevMode ? [{ debugName: "subtitle" }] : []));
     submitLabel = input('Guardar', ...(ngDevMode ? [{ debugName: "submitLabel" }] : []));
@@ -2067,12 +2071,12 @@ class ModalForm {
         this.evidenceChange.emit(file);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ModalForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ModalForm, isStandalone: true, selector: "lib-modal-form", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, submitLabel: { classPropertyName: "submitLabel", publicName: "submitLabel", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: false, transformFunction: null }, showActionsLeft: { classPropertyName: "showActionsLeft", publicName: "showActionsLeft", isSignal: true, isRequired: false, transformFunction: null }, evidenceLabel: { classPropertyName: "evidenceLabel", publicName: "evidenceLabel", isSignal: true, isRequired: false, transformFunction: null }, evidenceHelperText: { classPropertyName: "evidenceHelperText", publicName: "evidenceHelperText", isSignal: true, isRequired: false, transformFunction: null }, evidenceAccept: { classPropertyName: "evidenceAccept", publicName: "evidenceAccept", isSignal: true, isRequired: false, transformFunction: null }, maxSizeMB: { classPropertyName: "maxSizeMB", publicName: "maxSizeMB", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSubmit: "onSubmit", onCancel: "onCancel", evidenceChange: "evidenceChange" }, ngImport: i0, template: "<div class=\"modal-form-container\">\r\n  <div class=\"header-content\">\r\n    <h1>{{ title() }}</h1>\r\n    <p>{{ subtitle() }}</p>\r\n  </div>\r\n\r\n  @if (steps() && steps().length > 1) {\r\n  <div class=\"steps\">\r\n    @for (step of steps(); track $index) {\r\n    <div\r\n      class=\"step\"\r\n      [class.step-active]=\"currentStep() === $index + 1\"\r\n      [class.step-completed]=\"currentStep() > $index + 1\"\r\n    >\r\n      @if (currentStep() > $index + 1) {\r\n      <span class=\"check-icon\">\u2714</span>\r\n      }\r\n      <span>Paso {{ $index + 1 }}: {{ step.label }}</span>\r\n    </div>\r\n\r\n    @if ($index < steps().length - 1) {\r\n    <span class=\"separator\">\u203A</span>\r\n    } }\r\n  </div>\r\n  }\r\n\r\n  <div class=\"divider\"></div>\r\n\r\n  <div class=\"body-content\">\r\n    @if (!steps() || !steps().length) {\r\n    <ng-content></ng-content>\r\n    } @else {\r\n    <!-- Render din\u00E1mico del paso actual -->\r\n    <lib-wizard-form\r\n      [form]=\"form()\"\r\n      [currentStep]=\"currentStep()\"\r\n      [steps]=\"steps()\"\r\n      (canContinue)=\"canContinue.set($event)\"\r\n    ></lib-wizard-form>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"actions\">\r\n    @if (showActionsLeft()){\r\n    <div class=\"actions-left\">\r\n      <p class=\"file-type\">{{ evidenceHelperText() }}</p>\r\n      <button type=\"button\" class=\"btn-outline\" (click)=\"fileInput.click()\">\r\n        <svg\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          class=\"upload-icon icon icon-tabler icons-tabler-outline icon-tabler-cloud-upload\"\r\n          width=\"24\"\r\n          height=\"24\"\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          <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n          <path\r\n            d=\"M7 18a4.6 4.4 0 0 1 0 -9a5 4.5 0 0 1 11 2h1a3.5 3.5 0 0 1 0 7h-1\"\r\n          />\r\n          <path d=\"M9 15l3 -3l3 3\" />\r\n          <path d=\"M12 12l0 9\" />\r\n        </svg>\r\n        <span class=\"label-button\">\r\n          {{ evidenceFileName() || evidenceLabel() }}\r\n        </span>\r\n      </button>\r\n      <input\r\n        #fileInput\r\n        type=\"file\"\r\n        hidden\r\n        [accept]=\"evidenceAccept()\"\r\n        (change)=\"onFileSelected($event)\"\r\n      />\r\n    </div>\r\n    }\r\n\r\n    <div class=\"actions-right\">\r\n      @if (!steps() || steps().length <= 1) {\r\n      <button type=\"button\" class=\"btn--ghost\" (click)=\"onCancel.emit()\">\r\n        Cancelar\r\n      </button>\r\n      } @else if (currentStep() === 1) {\r\n      <button type=\"button\" class=\"btn--ghost\" (click)=\"onCancel.emit()\">\r\n        Cancelar\r\n      </button>\r\n      } @else {\r\n      <button type=\"button\" class=\"btn--ghost\" (click)=\"prevStep()\">\r\n        Volver\r\n      </button>\r\n      }\r\n\r\n      <button\r\n        type=\"button\"\r\n        class=\"btn\"\r\n        (click)=\"!steps() || !steps().length ? submitForm() :\r\n           currentStep() === steps().length ? submitForm() : nextStep()\"\r\n        [disabled]=\"!canContinue()\"\r\n      >\r\n        {{ !steps() || !steps().length ? submitLabel() : currentStep() ===\r\n        steps().length ? submitLabel() : 'Continuar' }}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{position:fixed;inset:0;background:#0006;display:flex;justify-content:center;align-items:center;z-index:9999;padding:16px;box-sizing:border-box;overflow-y:auto}.modal-form-container{background-color:#ebe8d6;width:100%;max-width:1200px;max-height:90dvh;display:flex;flex-direction:column;align-items:stretch;padding:24px 48px;border-radius:24px;box-shadow:0 10px 25px #00000026}.header-content{display:flex;flex:1;flex-direction:column;gap:8px;padding-top:16px;padding-bottom:16px}.header-content h1{font-size:24px;font-weight:700;text-transform:uppercase;color:#1c1c12}.header-content p{font-size:14px;font-weight:300;color:#454733}.body-content{flex:1}.body-content::-webkit-scrollbar{width:6px;background:transparent}.body-content::-webkit-scrollbar-track{background:transparent}.body-content::-webkit-scrollbar-thumb{background:#00000059;border-radius:6px}.body-content::-webkit-scrollbar-thumb:hover{background:#00000080}.steps{display:flex;flex-direction:row;gap:16px;justify-content:flex-start;align-items:center}.step{padding:12px;font-size:1.4rem;font-weight:600;text-align:center;border-radius:8px;height:32px;display:flex;align-items:center;justify-content:center;color:#40484c;border:1px solid #c7c7ad;box-shadow:none;transition:box-shadow .3s ease,background-color .3s ease,border-color .3s ease;position:relative}.separator{font-size:1.6rem;color:#61661f}.step-active{box-shadow:0 2px 4px #0003;background-color:#f5f5e0;border-color:#a3a375;border:none}.step-completed{box-shadow:none;background-color:#dee58f;border:none;color:#61661f;justify-content:center;gap:8px}.check-icon{align-content:center;justify-content:center;color:#61661f}.divider{width:calc(100% + 100px);margin-left:-52px;height:1px;background-color:#7878612c;margin-top:24px;margin-bottom:16px}.actions{display:flex;flex:1;justify-content:space-between;align-items:end;width:100%;margin-top:24px}.actions-left{display:flex;flex-direction:column;gap:4px}.actions-right{display:flex;gap:10px;margin-left:auto}.btn-outline{display:flex;justify-content:center;gap:12px;align-items:center;background:transparent;padding:8px 16px;border-radius:30px;border:none;cursor:pointer;font-size:14px;font-weight:500;color:#6a750a;border:1px solid #6A750A;max-width:260px;width:100%;overflow:hidden}.btn-outline:hover{background-color:#d8eb2ca7;border:1px solid #d8eb2ca7}.upload-icon{width:28px;height:28px;color:#6a750a;cursor:pointer;transition:transform .2s ease,color .2s ease}.label-button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;flex:1}.file-type{margin-left:8px;font-size:11px;color:#8a8a8a}.btn,.btn--ghost{font-size:1.4rem;border:0;border-radius:40px;padding:14px 24px;background-color:#596300;color:#fff;cursor:pointer;transition:background-color .3s ease}.btn--ghost{background-color:#dee58f;color:#61661f}.btn:hover{background-color:#7cb342}.btn:disabled{background-color:#0000001a;color:#00000043;cursor:default}.btn--ghost:hover{background-color:#c9d171}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: WizardForm, selector: "lib-wizard-form", inputs: ["form", "currentStep", "steps"], outputs: ["canContinue"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ModalForm, isStandalone: true, selector: "lib-modal-form", inputs: { isFull: { classPropertyName: "isFull", publicName: "isFull", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, submitLabel: { classPropertyName: "submitLabel", publicName: "submitLabel", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: false, transformFunction: null }, showActionsLeft: { classPropertyName: "showActionsLeft", publicName: "showActionsLeft", isSignal: true, isRequired: false, transformFunction: null }, evidenceLabel: { classPropertyName: "evidenceLabel", publicName: "evidenceLabel", isSignal: true, isRequired: false, transformFunction: null }, evidenceHelperText: { classPropertyName: "evidenceHelperText", publicName: "evidenceHelperText", isSignal: true, isRequired: false, transformFunction: null }, evidenceAccept: { classPropertyName: "evidenceAccept", publicName: "evidenceAccept", isSignal: true, isRequired: false, transformFunction: null }, maxSizeMB: { classPropertyName: "maxSizeMB", publicName: "maxSizeMB", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSubmit: "onSubmit", onCancel: "onCancel", evidenceChange: "evidenceChange" }, ngImport: i0, template: "<div class=\"modal-form-container\" [class.expanded]=\"isFull()\">\r\n  <div class=\"header-content\">\r\n    <h1>{{ title() }}</h1>\r\n    <p>{{ subtitle() }}</p>\r\n  </div>\r\n\r\n  @if (steps() && steps().length > 1) {\r\n  <div class=\"steps\">\r\n    @for (step of steps(); track $index) {\r\n    <div\r\n      class=\"step\"\r\n      [class.step-active]=\"currentStep() === $index + 1\"\r\n      [class.step-completed]=\"currentStep() > $index + 1\"\r\n    >\r\n      @if (currentStep() > $index + 1) {\r\n      <span class=\"check-icon\">\u2714</span>\r\n      }\r\n      <span>Paso {{ $index + 1 }}: {{ step.label }}</span>\r\n    </div>\r\n\r\n    @if ($index < steps().length - 1) {\r\n    <span class=\"separator\">\u203A</span>\r\n    } }\r\n  </div>\r\n  }\r\n\r\n  <div class=\"divider\"></div>\r\n\r\n  <div class=\"body-content\">\r\n    @if (!steps() || !steps().length) {\r\n    <ng-content></ng-content>\r\n    } @else {\r\n    <!-- Render din\u00E1mico del paso actual -->\r\n    <lib-wizard-form\r\n      [form]=\"form()\"\r\n      [currentStep]=\"currentStep()\"\r\n      [steps]=\"steps()\"\r\n      (canContinue)=\"canContinue.set($event)\"\r\n    ></lib-wizard-form>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"actions\">\r\n    @if (showActionsLeft()){\r\n    <div class=\"actions-left\">\r\n      <p class=\"file-type\">{{ evidenceHelperText() }}</p>\r\n      <button type=\"button\" class=\"btn-outline\" (click)=\"fileInput.click()\">\r\n        <svg\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          class=\"upload-icon icon icon-tabler icons-tabler-outline icon-tabler-cloud-upload\"\r\n          width=\"24\"\r\n          height=\"24\"\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          <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n          <path\r\n            d=\"M7 18a4.6 4.4 0 0 1 0 -9a5 4.5 0 0 1 11 2h1a3.5 3.5 0 0 1 0 7h-1\"\r\n          />\r\n          <path d=\"M9 15l3 -3l3 3\" />\r\n          <path d=\"M12 12l0 9\" />\r\n        </svg>\r\n        <span class=\"label-button\">\r\n          {{ evidenceFileName() || evidenceLabel() }}\r\n        </span>\r\n      </button>\r\n      <input\r\n        #fileInput\r\n        type=\"file\"\r\n        hidden\r\n        [accept]=\"evidenceAccept()\"\r\n        (change)=\"onFileSelected($event)\"\r\n      />\r\n    </div>\r\n    }\r\n\r\n    <div class=\"actions-right\">\r\n      @if (!steps() || steps().length <= 1) {\r\n      <button type=\"button\" class=\"btn--ghost\" (click)=\"onCancel.emit()\">\r\n        Cancelar\r\n      </button>\r\n      } @else if (currentStep() === 1) {\r\n      <button type=\"button\" class=\"btn--ghost\" (click)=\"onCancel.emit()\">\r\n        Cancelar\r\n      </button>\r\n      } @else {\r\n      <button type=\"button\" class=\"btn--ghost\" (click)=\"prevStep()\">\r\n        Volver\r\n      </button>\r\n      }\r\n\r\n      <button\r\n        type=\"button\"\r\n        class=\"btn\"\r\n        (click)=\"!steps() || !steps().length ? submitForm() :\r\n           currentStep() === steps().length ? submitForm() : nextStep()\"\r\n        [disabled]=\"!canContinue()\"\r\n      >\r\n        {{ !steps() || !steps().length ? submitLabel() : currentStep() ===\r\n        steps().length ? submitLabel() : 'Continuar' }}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{position:fixed;inset:0;background:#0006;display:flex;justify-content:center;align-items:center;z-index:9999;padding:16px;box-sizing:border-box;overflow-y:auto}.modal-form-container{background-color:#ebe8d6;width:100%;max-width:1200px;max-height:90dvh;display:flex;flex-direction:column;align-items:stretch;padding:24px 48px;border-radius:24px;box-shadow:0 10px 25px #00000026}.modal-form-container.expanded{position:relative;width:100%;max-width:100dvw;height:100%;max-height:100dvh;background-color:#ebe8d6;display:flex;flex-direction:column;align-items:stretch;padding:24px 0;border-radius:24px}.header-content{display:flex;flex-direction:column;gap:8px;padding:16px 0}.modal-form-container.expanded .header-content{padding:16px 48px}.header-content h1{font-size:24px;font-weight:700;text-transform:uppercase;color:#1c1c12}.header-content p{font-size:14px;font-weight:300;color:#454733}.divider{width:calc(100% + 100px);margin-left:-52px;height:1px;background-color:#7878612c;margin-top:16px}.body-content{flex:1}.body-content::-webkit-scrollbar{width:6px;background:transparent}.body-content::-webkit-scrollbar-track{background:transparent}.body-content::-webkit-scrollbar-thumb{background:#00000059;border-radius:6px}.body-content::-webkit-scrollbar-thumb:hover{background:#00000080}.steps{display:flex;flex-direction:row;gap:16px;justify-content:flex-start;align-items:center}.step{padding:12px;font-size:1.4rem;font-weight:600;text-align:center;border-radius:8px;height:32px;display:flex;align-items:center;justify-content:center;color:#40484c;border:1px solid #c7c7ad;box-shadow:none;transition:box-shadow .3s ease,background-color .3s ease,border-color .3s ease;position:relative}.separator{font-size:1.6rem;color:#61661f}.step-active{box-shadow:0 2px 4px #0003;background-color:#f5f5e0;border-color:#a3a375;border:none}.step-completed{box-shadow:none;background-color:#dee58f;border:none;color:#61661f;justify-content:center;gap:8px}.check-icon{align-content:center;justify-content:center;color:#61661f}.actions{display:flex;justify-content:space-between;align-items:end;width:100%;margin-top:8px;padding:8px 0}.modal-form-container.expanded .actions{padding:8px 48px}.actions-left{display:flex;flex-direction:column;gap:4px}.actions-right{display:flex;gap:10px;margin-left:auto}.btn-outline{display:flex;justify-content:center;gap:12px;align-items:center;background:transparent;padding:8px 16px;border-radius:30px;border:none;cursor:pointer;font-size:14px;font-weight:500;color:#6a750a;border:1px solid #6A750A;max-width:260px;width:100%;overflow:hidden}.btn-outline:hover{background-color:#d8eb2ca7;border:1px solid #d8eb2ca7}.upload-icon{width:28px;height:28px;color:#6a750a;cursor:pointer;transition:transform .2s ease,color .2s ease}.label-button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;flex:1}.file-type{margin-left:8px;font-size:11px;color:#8a8a8a}.btn,.btn--ghost{font-size:1.4rem;border:0;border-radius:40px;padding:14px 24px;background-color:#596300;color:#fff;cursor:pointer;transition:background-color .3s ease}.btn--ghost{background-color:#dee58f;color:#61661f}.btn:hover{background-color:#7cb342}.btn:disabled{background-color:#0000001a;color:#00000043;cursor:default}.btn--ghost:hover{background-color:#c9d171}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: WizardForm, selector: "lib-wizard-form", inputs: ["form", "currentStep", "steps"], outputs: ["canContinue"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ModalForm, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-modal-form', standalone: true, imports: [CommonModule, WizardForm], template: "<div class=\"modal-form-container\">\r\n  <div class=\"header-content\">\r\n    <h1>{{ title() }}</h1>\r\n    <p>{{ subtitle() }}</p>\r\n  </div>\r\n\r\n  @if (steps() && steps().length > 1) {\r\n  <div class=\"steps\">\r\n    @for (step of steps(); track $index) {\r\n    <div\r\n      class=\"step\"\r\n      [class.step-active]=\"currentStep() === $index + 1\"\r\n      [class.step-completed]=\"currentStep() > $index + 1\"\r\n    >\r\n      @if (currentStep() > $index + 1) {\r\n      <span class=\"check-icon\">\u2714</span>\r\n      }\r\n      <span>Paso {{ $index + 1 }}: {{ step.label }}</span>\r\n    </div>\r\n\r\n    @if ($index < steps().length - 1) {\r\n    <span class=\"separator\">\u203A</span>\r\n    } }\r\n  </div>\r\n  }\r\n\r\n  <div class=\"divider\"></div>\r\n\r\n  <div class=\"body-content\">\r\n    @if (!steps() || !steps().length) {\r\n    <ng-content></ng-content>\r\n    } @else {\r\n    <!-- Render din\u00E1mico del paso actual -->\r\n    <lib-wizard-form\r\n      [form]=\"form()\"\r\n      [currentStep]=\"currentStep()\"\r\n      [steps]=\"steps()\"\r\n      (canContinue)=\"canContinue.set($event)\"\r\n    ></lib-wizard-form>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"actions\">\r\n    @if (showActionsLeft()){\r\n    <div class=\"actions-left\">\r\n      <p class=\"file-type\">{{ evidenceHelperText() }}</p>\r\n      <button type=\"button\" class=\"btn-outline\" (click)=\"fileInput.click()\">\r\n        <svg\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          class=\"upload-icon icon icon-tabler icons-tabler-outline icon-tabler-cloud-upload\"\r\n          width=\"24\"\r\n          height=\"24\"\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          <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n          <path\r\n            d=\"M7 18a4.6 4.4 0 0 1 0 -9a5 4.5 0 0 1 11 2h1a3.5 3.5 0 0 1 0 7h-1\"\r\n          />\r\n          <path d=\"M9 15l3 -3l3 3\" />\r\n          <path d=\"M12 12l0 9\" />\r\n        </svg>\r\n        <span class=\"label-button\">\r\n          {{ evidenceFileName() || evidenceLabel() }}\r\n        </span>\r\n      </button>\r\n      <input\r\n        #fileInput\r\n        type=\"file\"\r\n        hidden\r\n        [accept]=\"evidenceAccept()\"\r\n        (change)=\"onFileSelected($event)\"\r\n      />\r\n    </div>\r\n    }\r\n\r\n    <div class=\"actions-right\">\r\n      @if (!steps() || steps().length <= 1) {\r\n      <button type=\"button\" class=\"btn--ghost\" (click)=\"onCancel.emit()\">\r\n        Cancelar\r\n      </button>\r\n      } @else if (currentStep() === 1) {\r\n      <button type=\"button\" class=\"btn--ghost\" (click)=\"onCancel.emit()\">\r\n        Cancelar\r\n      </button>\r\n      } @else {\r\n      <button type=\"button\" class=\"btn--ghost\" (click)=\"prevStep()\">\r\n        Volver\r\n      </button>\r\n      }\r\n\r\n      <button\r\n        type=\"button\"\r\n        class=\"btn\"\r\n        (click)=\"!steps() || !steps().length ? submitForm() :\r\n           currentStep() === steps().length ? submitForm() : nextStep()\"\r\n        [disabled]=\"!canContinue()\"\r\n      >\r\n        {{ !steps() || !steps().length ? submitLabel() : currentStep() ===\r\n        steps().length ? submitLabel() : 'Continuar' }}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{position:fixed;inset:0;background:#0006;display:flex;justify-content:center;align-items:center;z-index:9999;padding:16px;box-sizing:border-box;overflow-y:auto}.modal-form-container{background-color:#ebe8d6;width:100%;max-width:1200px;max-height:90dvh;display:flex;flex-direction:column;align-items:stretch;padding:24px 48px;border-radius:24px;box-shadow:0 10px 25px #00000026}.header-content{display:flex;flex:1;flex-direction:column;gap:8px;padding-top:16px;padding-bottom:16px}.header-content h1{font-size:24px;font-weight:700;text-transform:uppercase;color:#1c1c12}.header-content p{font-size:14px;font-weight:300;color:#454733}.body-content{flex:1}.body-content::-webkit-scrollbar{width:6px;background:transparent}.body-content::-webkit-scrollbar-track{background:transparent}.body-content::-webkit-scrollbar-thumb{background:#00000059;border-radius:6px}.body-content::-webkit-scrollbar-thumb:hover{background:#00000080}.steps{display:flex;flex-direction:row;gap:16px;justify-content:flex-start;align-items:center}.step{padding:12px;font-size:1.4rem;font-weight:600;text-align:center;border-radius:8px;height:32px;display:flex;align-items:center;justify-content:center;color:#40484c;border:1px solid #c7c7ad;box-shadow:none;transition:box-shadow .3s ease,background-color .3s ease,border-color .3s ease;position:relative}.separator{font-size:1.6rem;color:#61661f}.step-active{box-shadow:0 2px 4px #0003;background-color:#f5f5e0;border-color:#a3a375;border:none}.step-completed{box-shadow:none;background-color:#dee58f;border:none;color:#61661f;justify-content:center;gap:8px}.check-icon{align-content:center;justify-content:center;color:#61661f}.divider{width:calc(100% + 100px);margin-left:-52px;height:1px;background-color:#7878612c;margin-top:24px;margin-bottom:16px}.actions{display:flex;flex:1;justify-content:space-between;align-items:end;width:100%;margin-top:24px}.actions-left{display:flex;flex-direction:column;gap:4px}.actions-right{display:flex;gap:10px;margin-left:auto}.btn-outline{display:flex;justify-content:center;gap:12px;align-items:center;background:transparent;padding:8px 16px;border-radius:30px;border:none;cursor:pointer;font-size:14px;font-weight:500;color:#6a750a;border:1px solid #6A750A;max-width:260px;width:100%;overflow:hidden}.btn-outline:hover{background-color:#d8eb2ca7;border:1px solid #d8eb2ca7}.upload-icon{width:28px;height:28px;color:#6a750a;cursor:pointer;transition:transform .2s ease,color .2s ease}.label-button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;flex:1}.file-type{margin-left:8px;font-size:11px;color:#8a8a8a}.btn,.btn--ghost{font-size:1.4rem;border:0;border-radius:40px;padding:14px 24px;background-color:#596300;color:#fff;cursor:pointer;transition:background-color .3s ease}.btn--ghost{background-color:#dee58f;color:#61661f}.btn:hover{background-color:#7cb342}.btn:disabled{background-color:#0000001a;color:#00000043;cursor:default}.btn--ghost:hover{background-color:#c9d171}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], submitLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitLabel", required: false }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: false }] }], steps: [{ type: i0.Input, args: [{ isSignal: true, alias: "steps", required: false }] }], onSubmit: [{ type: i0.Output, args: ["onSubmit"] }], onCancel: [{ type: i0.Output, args: ["onCancel"] }], evidenceChange: [{ type: i0.Output, args: ["evidenceChange"] }], showActionsLeft: [{ type: i0.Input, args: [{ isSignal: true, alias: "showActionsLeft", required: false }] }], evidenceLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "evidenceLabel", required: false }] }], evidenceHelperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "evidenceHelperText", required: false }] }], evidenceAccept: [{ type: i0.Input, args: [{ isSignal: true, alias: "evidenceAccept", required: false }] }], maxSizeMB: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSizeMB", required: false }] }] } });
+            args: [{ selector: 'lib-modal-form', standalone: true, imports: [CommonModule, WizardForm], template: "<div class=\"modal-form-container\" [class.expanded]=\"isFull()\">\r\n  <div class=\"header-content\">\r\n    <h1>{{ title() }}</h1>\r\n    <p>{{ subtitle() }}</p>\r\n  </div>\r\n\r\n  @if (steps() && steps().length > 1) {\r\n  <div class=\"steps\">\r\n    @for (step of steps(); track $index) {\r\n    <div\r\n      class=\"step\"\r\n      [class.step-active]=\"currentStep() === $index + 1\"\r\n      [class.step-completed]=\"currentStep() > $index + 1\"\r\n    >\r\n      @if (currentStep() > $index + 1) {\r\n      <span class=\"check-icon\">\u2714</span>\r\n      }\r\n      <span>Paso {{ $index + 1 }}: {{ step.label }}</span>\r\n    </div>\r\n\r\n    @if ($index < steps().length - 1) {\r\n    <span class=\"separator\">\u203A</span>\r\n    } }\r\n  </div>\r\n  }\r\n\r\n  <div class=\"divider\"></div>\r\n\r\n  <div class=\"body-content\">\r\n    @if (!steps() || !steps().length) {\r\n    <ng-content></ng-content>\r\n    } @else {\r\n    <!-- Render din\u00E1mico del paso actual -->\r\n    <lib-wizard-form\r\n      [form]=\"form()\"\r\n      [currentStep]=\"currentStep()\"\r\n      [steps]=\"steps()\"\r\n      (canContinue)=\"canContinue.set($event)\"\r\n    ></lib-wizard-form>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"actions\">\r\n    @if (showActionsLeft()){\r\n    <div class=\"actions-left\">\r\n      <p class=\"file-type\">{{ evidenceHelperText() }}</p>\r\n      <button type=\"button\" class=\"btn-outline\" (click)=\"fileInput.click()\">\r\n        <svg\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          class=\"upload-icon icon icon-tabler icons-tabler-outline icon-tabler-cloud-upload\"\r\n          width=\"24\"\r\n          height=\"24\"\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          <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n          <path\r\n            d=\"M7 18a4.6 4.4 0 0 1 0 -9a5 4.5 0 0 1 11 2h1a3.5 3.5 0 0 1 0 7h-1\"\r\n          />\r\n          <path d=\"M9 15l3 -3l3 3\" />\r\n          <path d=\"M12 12l0 9\" />\r\n        </svg>\r\n        <span class=\"label-button\">\r\n          {{ evidenceFileName() || evidenceLabel() }}\r\n        </span>\r\n      </button>\r\n      <input\r\n        #fileInput\r\n        type=\"file\"\r\n        hidden\r\n        [accept]=\"evidenceAccept()\"\r\n        (change)=\"onFileSelected($event)\"\r\n      />\r\n    </div>\r\n    }\r\n\r\n    <div class=\"actions-right\">\r\n      @if (!steps() || steps().length <= 1) {\r\n      <button type=\"button\" class=\"btn--ghost\" (click)=\"onCancel.emit()\">\r\n        Cancelar\r\n      </button>\r\n      } @else if (currentStep() === 1) {\r\n      <button type=\"button\" class=\"btn--ghost\" (click)=\"onCancel.emit()\">\r\n        Cancelar\r\n      </button>\r\n      } @else {\r\n      <button type=\"button\" class=\"btn--ghost\" (click)=\"prevStep()\">\r\n        Volver\r\n      </button>\r\n      }\r\n\r\n      <button\r\n        type=\"button\"\r\n        class=\"btn\"\r\n        (click)=\"!steps() || !steps().length ? submitForm() :\r\n           currentStep() === steps().length ? submitForm() : nextStep()\"\r\n        [disabled]=\"!canContinue()\"\r\n      >\r\n        {{ !steps() || !steps().length ? submitLabel() : currentStep() ===\r\n        steps().length ? submitLabel() : 'Continuar' }}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{position:fixed;inset:0;background:#0006;display:flex;justify-content:center;align-items:center;z-index:9999;padding:16px;box-sizing:border-box;overflow-y:auto}.modal-form-container{background-color:#ebe8d6;width:100%;max-width:1200px;max-height:90dvh;display:flex;flex-direction:column;align-items:stretch;padding:24px 48px;border-radius:24px;box-shadow:0 10px 25px #00000026}.modal-form-container.expanded{position:relative;width:100%;max-width:100dvw;height:100%;max-height:100dvh;background-color:#ebe8d6;display:flex;flex-direction:column;align-items:stretch;padding:24px 0;border-radius:24px}.header-content{display:flex;flex-direction:column;gap:8px;padding:16px 0}.modal-form-container.expanded .header-content{padding:16px 48px}.header-content h1{font-size:24px;font-weight:700;text-transform:uppercase;color:#1c1c12}.header-content p{font-size:14px;font-weight:300;color:#454733}.divider{width:calc(100% + 100px);margin-left:-52px;height:1px;background-color:#7878612c;margin-top:16px}.body-content{flex:1}.body-content::-webkit-scrollbar{width:6px;background:transparent}.body-content::-webkit-scrollbar-track{background:transparent}.body-content::-webkit-scrollbar-thumb{background:#00000059;border-radius:6px}.body-content::-webkit-scrollbar-thumb:hover{background:#00000080}.steps{display:flex;flex-direction:row;gap:16px;justify-content:flex-start;align-items:center}.step{padding:12px;font-size:1.4rem;font-weight:600;text-align:center;border-radius:8px;height:32px;display:flex;align-items:center;justify-content:center;color:#40484c;border:1px solid #c7c7ad;box-shadow:none;transition:box-shadow .3s ease,background-color .3s ease,border-color .3s ease;position:relative}.separator{font-size:1.6rem;color:#61661f}.step-active{box-shadow:0 2px 4px #0003;background-color:#f5f5e0;border-color:#a3a375;border:none}.step-completed{box-shadow:none;background-color:#dee58f;border:none;color:#61661f;justify-content:center;gap:8px}.check-icon{align-content:center;justify-content:center;color:#61661f}.actions{display:flex;justify-content:space-between;align-items:end;width:100%;margin-top:8px;padding:8px 0}.modal-form-container.expanded .actions{padding:8px 48px}.actions-left{display:flex;flex-direction:column;gap:4px}.actions-right{display:flex;gap:10px;margin-left:auto}.btn-outline{display:flex;justify-content:center;gap:12px;align-items:center;background:transparent;padding:8px 16px;border-radius:30px;border:none;cursor:pointer;font-size:14px;font-weight:500;color:#6a750a;border:1px solid #6A750A;max-width:260px;width:100%;overflow:hidden}.btn-outline:hover{background-color:#d8eb2ca7;border:1px solid #d8eb2ca7}.upload-icon{width:28px;height:28px;color:#6a750a;cursor:pointer;transition:transform .2s ease,color .2s ease}.label-button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;flex:1}.file-type{margin-left:8px;font-size:11px;color:#8a8a8a}.btn,.btn--ghost{font-size:1.4rem;border:0;border-radius:40px;padding:14px 24px;background-color:#596300;color:#fff;cursor:pointer;transition:background-color .3s ease}.btn--ghost{background-color:#dee58f;color:#61661f}.btn:hover{background-color:#7cb342}.btn:disabled{background-color:#0000001a;color:#00000043;cursor:default}.btn--ghost:hover{background-color:#c9d171}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { isFull: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFull", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], submitLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitLabel", required: false }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: false }] }], steps: [{ type: i0.Input, args: [{ isSignal: true, alias: "steps", required: false }] }], onSubmit: [{ type: i0.Output, args: ["onSubmit"] }], onCancel: [{ type: i0.Output, args: ["onCancel"] }], evidenceChange: [{ type: i0.Output, args: ["evidenceChange"] }], showActionsLeft: [{ type: i0.Input, args: [{ isSignal: true, alias: "showActionsLeft", required: false }] }], evidenceLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "evidenceLabel", required: false }] }], evidenceHelperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "evidenceHelperText", required: false }] }], evidenceAccept: [{ type: i0.Input, args: [{ isSignal: true, alias: "evidenceAccept", required: false }] }], maxSizeMB: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSizeMB", required: false }] }] } });
 
 class DialogAlertComponent {
     title = 'Mensaje';
@@ -2351,28 +2355,62 @@ class FeatureCard {
     showLeading = input(false, ...(ngDevMode ? [{ debugName: "showLeading" }] : []));
     showTrailling = input(false, ...(ngDevMode ? [{ debugName: "showTrailling" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FeatureCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: FeatureCard, isStandalone: true, selector: "lib-feature-card", inputs: { feature: { classPropertyName: "feature", publicName: "feature", isSignal: true, isRequired: false, transformFunction: null }, showLeading: { classPropertyName: "showLeading", publicName: "showLeading", isSignal: true, isRequired: false, transformFunction: null }, showTrailling: { classPropertyName: "showTrailling", publicName: "showTrailling", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"feature-card\">\r\n  @if(showLeading()){\r\n    <div class=\"feature-icon-leading\">\r\n      <img [src]=\"feature()?.icon\" alt=\"{{ feature()?.title }}\" />\r\n    </div>\r\n  }\r\n  \r\n  <div class=\"feature-content\">\r\n    <p>{{ feature()?.title }}</p>\r\n    <h3>{{ feature()?.description }}</h3>\r\n  </div>\r\n\r\n  @if(showTrailling()){\r\n    <div class=\"feature-icon-trailling\">\r\n      <img [src]=\"feature()?.icon\" alt=\"{{ feature()?.title }}\" />\r\n    </div>\r\n  }\r\n</div>\r\n\r\n", styles: [".feature-card{position:relative;width:100%;padding:16px 28px;display:flex;align-items:center;gap:8px;background-color:#fafae8;border-radius:999px}.feature-icon-leading{flex:0 0 50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;background-color:#dee58f;margin-right:10px}.feature-icon-leading img{width:28px;height:28px;color:#61661f}.feature-content{flex:1;display:flex;flex-direction:column}.feature-card h3{margin:0 0 5px;font-size:16px;font-weight:600;color:#171c1f;transition:color .3s ease}.feature-card p{margin:0;color:#171c1f;font-weight:400;line-height:1.6;font-size:12px}@media (max-width: 768px){.feature-card{padding:12px;gap:12px}.feature-icon{flex:0 0 48px;height:48px;margin-right:8px}.feature-icon img{width:28px;height:28px}.feature-card h3{font-size:1.5rem}.feature-card p{font-size:1.3rem}}@media (max-width: 640px){.feature-card{flex-direction:column;align-items:center;text-align:center;padding:16px 12px;gap:12px;min-height:140px}.feature-icon{flex:none;margin-right:0;margin-bottom:8px;width:56px;height:56px}.feature-icon img{width:32px;height:32px}.feature-content{align-items:center;text-align:center}.feature-card h3{margin-bottom:8px;font-size:1.4rem;line-height:1.3}.feature-card p{font-size:1.2rem;line-height:1.5;max-width:200px}}@media (max-width: 480px){.feature-card{padding:14px 10px;min-height:130px;gap:10px}.feature-icon{width:52px;height:52px;margin-bottom:6px}.feature-icon img{width:30px;height:30px}.feature-card h3{font-size:1.3rem;margin-bottom:6px}.feature-card p{font-size:1.1rem;line-height:1.4;max-width:180px}}@media (max-width: 360px){.feature-card{padding:12px 8px;min-height:120px;gap:8px}.feature-icon{width:48px;height:48px;margin-bottom:4px}.feature-icon img{width:28px;height:28px}.feature-card h3{font-size:1.2rem;margin-bottom:4px;line-height:1.2}.feature-card p{font-size:1rem;line-height:1.3;max-width:160px}}.features-grid{display:flex;gap:16px;flex-wrap:wrap}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: FeatureCard, isStandalone: true, selector: "lib-feature-card", inputs: { feature: { classPropertyName: "feature", publicName: "feature", isSignal: true, isRequired: false, transformFunction: null }, showLeading: { classPropertyName: "showLeading", publicName: "showLeading", isSignal: true, isRequired: false, transformFunction: null }, showTrailling: { classPropertyName: "showTrailling", publicName: "showTrailling", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"feature-card\">\r\n  @if(showLeading()){\r\n    <div class=\"feature-icon-leading\">\r\n      <img [src]=\"feature()?.icon\" alt=\"{{ feature()?.title }}\" />\r\n    </div>\r\n  }\r\n  \r\n  <div class=\"feature-content\">\r\n    <p>{{ feature()!.title }}</p>\r\n    <h3>{{ feature()!.description }}</h3>\r\n  </div>\r\n\r\n  @if(showTrailling()){\r\n    <div class=\"feature-icon-trailling\">\r\n      <img [src]=\"feature()?.icon\" alt=\"{{ feature()?.title }}\" />\r\n    </div>\r\n  }\r\n</div>\r\n\r\n", styles: [".feature-card{position:relative;width:100%;padding:16px 28px;display:flex;align-items:center;gap:8px;background-color:#fafae8;border-radius:999px}.feature-icon-leading{flex:0 0 50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;background-color:#dee58f;margin-right:10px}.feature-icon-leading img{width:28px;height:28px;color:#61661f}.feature-content{flex:1;display:flex;flex-direction:column}.feature-card h3{margin:0 0 5px;font-size:16px;font-weight:600;color:#171c1f;transition:color .3s ease}.feature-card p{margin:0;color:#171c1f;font-weight:400;line-height:1.6;font-size:12px}@media (max-width: 768px){.feature-card{padding:12px;gap:12px}.feature-icon{flex:0 0 48px;height:48px;margin-right:8px}.feature-icon img{width:28px;height:28px}.feature-card h3{font-size:1.5rem}.feature-card p{font-size:1.3rem}}@media (max-width: 640px){.feature-card{flex-direction:column;align-items:center;text-align:center;padding:16px 12px;gap:12px;min-height:140px}.feature-icon{flex:none;margin-right:0;margin-bottom:8px;width:56px;height:56px}.feature-icon img{width:32px;height:32px}.feature-content{align-items:center;text-align:center}.feature-card h3{margin-bottom:8px;font-size:1.4rem;line-height:1.3}.feature-card p{font-size:1.2rem;line-height:1.5;max-width:200px}}@media (max-width: 480px){.feature-card{padding:14px 10px;min-height:130px;gap:10px}.feature-icon{width:52px;height:52px;margin-bottom:6px}.feature-icon img{width:30px;height:30px}.feature-card h3{font-size:1.3rem;margin-bottom:6px}.feature-card p{font-size:1.1rem;line-height:1.4;max-width:180px}}@media (max-width: 360px){.feature-card{padding:12px 8px;min-height:120px;gap:8px}.feature-icon{width:48px;height:48px;margin-bottom:4px}.feature-icon img{width:28px;height:28px}.feature-card h3{font-size:1.2rem;margin-bottom:4px;line-height:1.2}.feature-card p{font-size:1rem;line-height:1.3;max-width:160px}}.features-grid{display:flex;gap:16px;flex-wrap:wrap}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FeatureCard, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-feature-card', standalone: true, template: "<div class=\"feature-card\">\r\n  @if(showLeading()){\r\n    <div class=\"feature-icon-leading\">\r\n      <img [src]=\"feature()?.icon\" alt=\"{{ feature()?.title }}\" />\r\n    </div>\r\n  }\r\n  \r\n  <div class=\"feature-content\">\r\n    <p>{{ feature()?.title }}</p>\r\n    <h3>{{ feature()?.description }}</h3>\r\n  </div>\r\n\r\n  @if(showTrailling()){\r\n    <div class=\"feature-icon-trailling\">\r\n      <img [src]=\"feature()?.icon\" alt=\"{{ feature()?.title }}\" />\r\n    </div>\r\n  }\r\n</div>\r\n\r\n", styles: [".feature-card{position:relative;width:100%;padding:16px 28px;display:flex;align-items:center;gap:8px;background-color:#fafae8;border-radius:999px}.feature-icon-leading{flex:0 0 50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;background-color:#dee58f;margin-right:10px}.feature-icon-leading img{width:28px;height:28px;color:#61661f}.feature-content{flex:1;display:flex;flex-direction:column}.feature-card h3{margin:0 0 5px;font-size:16px;font-weight:600;color:#171c1f;transition:color .3s ease}.feature-card p{margin:0;color:#171c1f;font-weight:400;line-height:1.6;font-size:12px}@media (max-width: 768px){.feature-card{padding:12px;gap:12px}.feature-icon{flex:0 0 48px;height:48px;margin-right:8px}.feature-icon img{width:28px;height:28px}.feature-card h3{font-size:1.5rem}.feature-card p{font-size:1.3rem}}@media (max-width: 640px){.feature-card{flex-direction:column;align-items:center;text-align:center;padding:16px 12px;gap:12px;min-height:140px}.feature-icon{flex:none;margin-right:0;margin-bottom:8px;width:56px;height:56px}.feature-icon img{width:32px;height:32px}.feature-content{align-items:center;text-align:center}.feature-card h3{margin-bottom:8px;font-size:1.4rem;line-height:1.3}.feature-card p{font-size:1.2rem;line-height:1.5;max-width:200px}}@media (max-width: 480px){.feature-card{padding:14px 10px;min-height:130px;gap:10px}.feature-icon{width:52px;height:52px;margin-bottom:6px}.feature-icon img{width:30px;height:30px}.feature-card h3{font-size:1.3rem;margin-bottom:6px}.feature-card p{font-size:1.1rem;line-height:1.4;max-width:180px}}@media (max-width: 360px){.feature-card{padding:12px 8px;min-height:120px;gap:8px}.feature-icon{width:48px;height:48px;margin-bottom:4px}.feature-icon img{width:28px;height:28px}.feature-card h3{font-size:1.2rem;margin-bottom:4px;line-height:1.2}.feature-card p{font-size:1rem;line-height:1.3;max-width:160px}}.features-grid{display:flex;gap:16px;flex-wrap:wrap}\n"] }]
+            args: [{ selector: 'lib-feature-card', standalone: true, template: "<div class=\"feature-card\">\r\n  @if(showLeading()){\r\n    <div class=\"feature-icon-leading\">\r\n      <img [src]=\"feature()?.icon\" alt=\"{{ feature()?.title }}\" />\r\n    </div>\r\n  }\r\n  \r\n  <div class=\"feature-content\">\r\n    <p>{{ feature()!.title }}</p>\r\n    <h3>{{ feature()!.description }}</h3>\r\n  </div>\r\n\r\n  @if(showTrailling()){\r\n    <div class=\"feature-icon-trailling\">\r\n      <img [src]=\"feature()?.icon\" alt=\"{{ feature()?.title }}\" />\r\n    </div>\r\n  }\r\n</div>\r\n\r\n", styles: [".feature-card{position:relative;width:100%;padding:16px 28px;display:flex;align-items:center;gap:8px;background-color:#fafae8;border-radius:999px}.feature-icon-leading{flex:0 0 50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;background-color:#dee58f;margin-right:10px}.feature-icon-leading img{width:28px;height:28px;color:#61661f}.feature-content{flex:1;display:flex;flex-direction:column}.feature-card h3{margin:0 0 5px;font-size:16px;font-weight:600;color:#171c1f;transition:color .3s ease}.feature-card p{margin:0;color:#171c1f;font-weight:400;line-height:1.6;font-size:12px}@media (max-width: 768px){.feature-card{padding:12px;gap:12px}.feature-icon{flex:0 0 48px;height:48px;margin-right:8px}.feature-icon img{width:28px;height:28px}.feature-card h3{font-size:1.5rem}.feature-card p{font-size:1.3rem}}@media (max-width: 640px){.feature-card{flex-direction:column;align-items:center;text-align:center;padding:16px 12px;gap:12px;min-height:140px}.feature-icon{flex:none;margin-right:0;margin-bottom:8px;width:56px;height:56px}.feature-icon img{width:32px;height:32px}.feature-content{align-items:center;text-align:center}.feature-card h3{margin-bottom:8px;font-size:1.4rem;line-height:1.3}.feature-card p{font-size:1.2rem;line-height:1.5;max-width:200px}}@media (max-width: 480px){.feature-card{padding:14px 10px;min-height:130px;gap:10px}.feature-icon{width:52px;height:52px;margin-bottom:6px}.feature-icon img{width:30px;height:30px}.feature-card h3{font-size:1.3rem;margin-bottom:6px}.feature-card p{font-size:1.1rem;line-height:1.4;max-width:180px}}@media (max-width: 360px){.feature-card{padding:12px 8px;min-height:120px;gap:8px}.feature-icon{width:48px;height:48px;margin-bottom:4px}.feature-icon img{width:28px;height:28px}.feature-card h3{font-size:1.2rem;margin-bottom:4px;line-height:1.2}.feature-card p{font-size:1rem;line-height:1.3;max-width:160px}}.features-grid{display:flex;gap:16px;flex-wrap:wrap}\n"] }]
         }], propDecorators: { feature: [{ type: i0.Input, args: [{ isSignal: true, alias: "feature", required: false }] }], showLeading: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLeading", required: false }] }], showTrailling: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTrailling", required: false }] }] } });
 
 class SideCard {
+    isFloating = true;
+    isCompact = false;
     // Header
+    modeSideCard = 'create';
     showTypeSelector = true;
     selectedType = 'radial';
+    btnClickIcon = new EventEmitter();
     // Input
     placeholder = 'NOMBRE';
     value = '';
     valueChange = new EventEmitter();
     typeChange = new EventEmitter();
+    statusValue = 1; // backend value
+    statusChange = new EventEmitter();
     // Sections
     sections = [];
     sectionButtonClick = new EventEmitter();
     // Slider
+    min = 0;
+    max = 1000;
+    sliderLabel = 'Radio';
+    sliderUnit = 'km';
     sliderValue = 0;
     sliderChange = new EventEmitter();
+    //actions
+    showBtnPrimary = false;
+    primaryButtonLabel = 'Aceptar';
+    primaryButtonClick = new EventEmitter();
+    showBtnSecondary = false;
+    secondaryButtonLabel = 'Cancelar';
+    secondaryButtonClick = new EventEmitter();
+    get statusLabel() {
+        return this.statusValue === 1 ? 'Activo' : 'Inactivo';
+    }
+    get statusClass() {
+        return this.statusValue === 1
+            ? 'status-chip-active'
+            : 'status-chip-inactive';
+    }
+    // Inicializa slider cuando llegan secciones
+    ngOnChanges() {
+        const section = this.sections.find(s => s.showSlider);
+        if (section) {
+            this.sliderLabel = section.sliderLabel || 'Radio';
+            this.sliderUnit = section.sliderUnit || 'km';
+            this.sliderValue = section.sliderValue ?? 0;
+        }
+    }
     selectType(type) {
         this.selectedType = type;
         this.typeChange.emit(type);
@@ -2388,22 +2426,45 @@ class SideCard {
     onSliderChange(event) {
         const input = event.target;
         this.sliderValue = Number(input.value);
-        this.sliderChange.emit(this.sliderValue);
-        const max = Number(input.max || 100);
+        const max = Number(input.max || 1000);
         const percentage = (this.sliderValue / max) * 100;
         input.style.setProperty('--slider-value', percentage + '%');
+        this.sliderChange.emit(this.sliderValue);
     }
     onButtonClick(section) {
         this.sectionButtonClick.emit(section);
     }
+    onPrimaryClick() {
+        this.primaryButtonClick.emit();
+    }
+    onSecondaryClick() {
+        this.secondaryButtonClick.emit();
+    }
+    changeStatusLabel() {
+        if (this.modeSideCard !== 'edit')
+            return;
+        this.statusValue = this.statusValue === 1 ? 2 : 1;
+        this.statusChange.emit(this.statusValue);
+    }
+    buttonClickIcon() {
+        this.btnClickIcon.emit();
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SideCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: SideCard, isStandalone: true, selector: "lib-side-card", inputs: { showTypeSelector: "showTypeSelector", placeholder: "placeholder", value: "value", sections: "sections" }, outputs: { valueChange: "valueChange", typeChange: "typeChange", sectionButtonClick: "sectionButtonClick", sliderChange: "sliderChange" }, ngImport: i0, template: "\r\n  <div class=\"side-card\">\r\n    @if (showTypeSelector) {\r\n    <div class=\"button-group\">\r\n      <button\r\n        class=\"btn-type\"\r\n        [class.active]=\"selectedType === 'radial'\"\r\n        (click)=\"selectType('radial')\"\r\n      >\r\n        Radial\r\n      </button>\r\n      <button\r\n        class=\"btn-type\"\r\n        [class.active]=\"selectedType === 'poligonal'\"\r\n        (click)=\"selectType('poligonal')\"\r\n      >\r\n        Poligonal\r\n      </button>\r\n    </div>\r\n    }\r\n\r\n    <div class=\"text-container\">\r\n      <input\r\n        #inputRef\r\n        type=\"text\"\r\n        class=\"input-field\"\r\n        [placeholder]=\"placeholder\"\r\n        [value]=\"value\"\r\n        (input)=\"onInput($event)\"\r\n      />\r\n      <svg\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        width=\"24\"\r\n        height=\"24\"\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        class=\"icon icon-tabler icons-tabler-outline icon-tabler-edit\"\r\n        (click)=\"focusInput(inputRef)\"\r\n      >\r\n        <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n        <path d=\"M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1\" />\r\n        <path\r\n          d=\"M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415\"\r\n        />\r\n        <path d=\"M16 5l3 3\" />\r\n      </svg>\r\n    </div>\r\n\r\n    @for (section of sections; track section.title) {\r\n    <div class=\"element-section\">\r\n      <h3>{{ section.title }}</h3>\r\n\r\n      <div class=\"element-content\">\r\n        @if (section.items?.length) { @for (item of section.items; track\r\n        item.label) {\r\n        <div class=\"element-item\">\r\n          <span class=\"label\">{{ item.label }}</span>\r\n          <span class=\"value\">{{ item.value }}</span>\r\n        </div>\r\n        } } @if (section.showSlider) {\r\n        <input\r\n          type=\"range\"\r\n          class=\"slider\"\r\n          min=\"0\"\r\n          max=\"100\"\r\n          [value]=\"sliderValue\"\r\n          (input)=\"onSliderChange($event)\"\r\n        />\r\n        } @if (section.buttonLabel) {\r\n        <button class=\"btn-assign\" (click)=\"onButtonClick(section)\">{{ section.buttonLabel }}</button>\r\n        }\r\n      </div>\r\n    </div>\r\n    }\r\n  </div>\r\n", styles: [".side-card{position:absolute;top:16px;right:16px;width:300px;height:auto;max-height:90vh;background:#ebe8d6b0;border-radius:8px;padding:16px;box-shadow:0 4px 12px #00000026;z-index:10;overflow-y:auto;display:flex;flex-direction:column;gap:16px}.button-group{display:flex;gap:8px;justify-content:center}.btn-type{flex:1;padding:10px 12px;background-color:transparent;color:#61661f;border:2px solid #61661f;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer}.btn-type:hover{background-color:#dee58f;color:#61661f;border:none}.btn-type:active{background-color:#61661f;color:#fff;border-color:none}.active{background-color:#596300;color:#fff;border-color:none}.input-field{width:100%;padding:10px 0;border:none;border-radius:6px;font-size:22px;background-color:transparent;transition:border-color .3s ease;box-sizing:border-box;text-transform:uppercase}.input-field:focus{outline:none}.input-field::placeholder{color:#1c1c12;transition:opacity .3s ease}.input-field:focus::placeholder{opacity:.3}.text-container{display:flex;gap:8px;align-items:center}.icon{color:#1c1c12;cursor:pointer}.icon:hover{color:#61661f}.element-section{display:flex;flex-direction:column;gap:8px}.element-section h3{margin:0;font-size:22px;font-weight:500;color:#1c1c12;text-transform:uppercase}.element-content{display:flex;flex-direction:column;gap:10px;padding:10px 0;background-color:transparent}.element-item{display:flex;justify-content:space-between}.element-item .label{font-size:14px;color:#454733;font-weight:500;text-transform:uppercase}.element-item .value{font-size:14px;color:#454733;font-weight:500}.slider-section{display:flex;flex-direction:column;gap:8px}.slider{width:100%;height:6px;border-radius:3px;outline:none;-webkit-appearance:none;appearance:none;cursor:pointer;padding:8px 0;background:transparent}.slider::-webkit-slider-runnable-track{width:100%;height:6px;background:linear-gradient(to right,#596300 0%,#596300 var(--slider-value, 0%),#e0e0e0 var(--slider-value, 0%),#e0e0e0 100%);border-radius:3px}.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background-color:#596300;cursor:pointer;box-shadow:0 2px 4px #0000004d;margin-top:-5px}.slider::-moz-range-track{background:transparent;border:none}.slider::-moz-range-progress{background-color:#596300;height:6px;border-radius:3px}.slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background-color:#596300;cursor:pointer;border:none;box-shadow:0 2px 4px #0003}.btn-assign{padding:14px 24px;background-color:#596300;color:#fff;border:none;border-radius:36px;font-size:14px;font-weight:500;cursor:pointer;width:100%}.btn-assign:hover{background-color:#7cb342}.btn-assign:active{background-color:#61661f}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: SideCard, isStandalone: true, selector: "lib-side-card", inputs: { isFloating: "isFloating", isCompact: "isCompact", modeSideCard: "modeSideCard", showTypeSelector: "showTypeSelector", placeholder: "placeholder", value: "value", statusValue: "statusValue", sections: "sections", min: "min", max: "max", showBtnPrimary: "showBtnPrimary", primaryButtonLabel: "primaryButtonLabel", showBtnSecondary: "showBtnSecondary", secondaryButtonLabel: "secondaryButtonLabel" }, outputs: { btnClickIcon: "btnClickIcon", valueChange: "valueChange", typeChange: "typeChange", statusChange: "statusChange", sectionButtonClick: "sectionButtonClick", sliderChange: "sliderChange", primaryButtonClick: "primaryButtonClick", secondaryButtonClick: "secondaryButtonClick" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"side-container\">\r\n    \r\n  <div class=\"side-card\" [class.floating]=\"isFloating\" [class.compact]=\"isCompact\">\r\n    <div class=\"element-header\">\r\n      @if (modeSideCard === 'create' && showTypeSelector) {\r\n      <div class=\"button-group\">\r\n        <button class=\"btn-type\" [class.active]=\"selectedType === 'radial'\" (click)=\"selectType('radial')\">\r\n          Radial\r\n        </button>\r\n        <button class=\"btn-type\" [class.active]=\"selectedType === 'poligonal'\" (click)=\"selectType('poligonal')\">\r\n          Poligonal\r\n        </button>\r\n      </div>\r\n      }\r\n\r\n      <div class=\"text-container\">\r\n        <input #inputRef type=\"text\" class=\"input-field\" [placeholder]=\"placeholder\" [value]=\"value\"\r\n          (input)=\"onInput($event)\" />\r\n        @if(modeSideCard === 'create' || modeSideCard === 'edit'){\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n          stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n          class=\"icon icon-tabler icons-tabler-outline icon-tabler-edit\" (click)=\"focusInput(inputRef)\">\r\n          <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n          <path d=\"M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1\" />\r\n          <path d=\"M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415\" />\r\n          <path d=\"M16 5l3 3\" />\r\n        </svg>\r\n        } @else {\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n          stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n          class=\"icon icon-tabler icons-tabler-outline icon-tabler-settings\" (click)=\"buttonClickIcon()\">\r\n          <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n          <path\r\n            d=\"M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065\" />\r\n          <path d=\"M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0\" />\r\n        </svg>\r\n        }\r\n      </div>\r\n\r\n      @if(modeSideCard === 'edit' || modeSideCard === 'info'){\r\n      <span #statusChip class=\"status-chip\" [ngClass]=\"statusClass\" (click)=\"changeStatusLabel()\">\r\n        {{ statusLabel }}\r\n      </span>\r\n      }\r\n    </div>\r\n    @for (section of sections; track section.title) {\r\n    <div class=\"element-section\">\r\n      <h3>{{ section.title }}</h3>\r\n\r\n      <div class=\"element-content\">\r\n        @if (section.items?.length) { @for (item of section.items; track\r\n        item.label) {\r\n        <div class=\"element-item\">\r\n          <span class=\"label\">{{ item.label }}</span>\r\n          <span class=\"value\">{{ item.value }}</span>\r\n        </div>\r\n        } } @if (section.showSlider) {\r\n        <div class=\"element-item\">\r\n          <span class=\"label\">{{ sliderLabel }}</span>\r\n          <span class=\"value\">{{ sliderValue }} {{ sliderUnit }}</span>\r\n        </div>\r\n        @if (modeSideCard !== 'info') {\r\n        <input type=\"range\" class=\"slider\" [min]=\"min\" [max]=\"max\" [value]=\"sliderValue\"\r\n          (input)=\"onSliderChange($event)\" />\r\n        }} @if (section.buttonSectionLabel && modeSideCard !== 'info') {\r\n        <button class=\"btn-assign\" (click)=\"onButtonClick(section)\">{{ section.buttonSectionLabel }}</button>\r\n        }\r\n      </div>\r\n    </div>\r\n    }\r\n\r\n    <div class=\"side-card-actions\">\r\n      @if (showBtnPrimary) {\r\n      <button class=\"btn-primary\" (click)=\"onPrimaryClick()\">{{ primaryButtonLabel }}</button>\r\n      }\r\n      @if (showBtnSecondary) {\r\n      <button class=\"btn-secondary\" (click)=\"onSecondaryClick()\">{{ secondaryButtonLabel }}</button>\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n    \r\n</div>", styles: [".side-card{width:300px;max-width:340px;min-width:240px;height:auto;max-height:90vh;background:#ebe8d6b0;border-radius:8px;padding:16px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 4px 12px #00000026;z-index:10;overflow-y:auto;display:flex;flex-direction:column;gap:16px;box-sizing:border-box}.side-card.floating{position:absolute;top:16px;right:16px}.side-card.compact{max-width:280px;padding:14px;gap:12px}.side-card.compact .element-section h3,.side-card.compact .input-field{font-size:18px}.side-card.compact .status-chip{font-size:1rem}.side-card.compact .slider{height:4px}.side-card.compact .btn-primary,.side-card.compact .btn-secondary,.side-card.compact .btn-assign{padding:10px 16px;font-size:13px;border-radius:24px}.button-group{display:flex;gap:8px;justify-content:center;margin-bottom:12px}.btn-type{flex:1;padding:10px 12px;background-color:transparent;color:#61661f;border:2px solid #61661f;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer}.btn-type:hover{background-color:#dee58f;color:#61661f;border:none}.btn-type:active{background-color:#61661f;color:#fff;border-color:none}.active{background-color:#596300;color:#fff;border-color:none}.input-field{width:100%;padding:10px 0;border:none;border-radius:6px;font-size:22px;background-color:transparent;transition:border-color .3s ease;box-sizing:border-box;text-transform:uppercase}.input-field:focus{outline:none}.input-field::placeholder{color:#1c1c12;transition:opacity .3s ease}.input-field:focus::placeholder{opacity:.3}.text-container{display:flex;gap:8px;align-items:center}.icon{color:#1c1c12;cursor:pointer}.status-chip{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.375rem .75rem;border-radius:6px;font-size:1.2rem;font-weight:600;white-space:nowrap;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;cursor:pointer;margin-bottom:12px}.status-chip-active{background-color:#78db5c;color:#0f5e00}.status-chip-active:hover{background-color:#9be786}.status-chip-inactive{background-color:#a60321;color:#fafae8}.status-chip-inactive:hover{background-color:#c06576}.icon:hover{color:#61661f}.element-section{display:flex;flex-direction:column;gap:8px}.element-section h3{margin:0;font-size:22px;font-weight:500;color:#1c1c12;text-transform:uppercase}.element-content{display:flex;flex-direction:column;gap:10px;padding:10px 0;background-color:transparent}.element-item{display:flex;justify-content:space-between}.element-item .label{font-size:14px;color:#454733;font-weight:500;text-transform:uppercase}.element-item .value{font-size:14px;color:#454733;font-weight:500}.slider-section{display:flex;flex-direction:column;gap:8px}.slider{width:100%;height:6px;border-radius:3px;outline:none;-webkit-appearance:none;appearance:none;cursor:pointer;padding:8px 0;background:transparent}.slider::-webkit-slider-runnable-track{width:100%;height:6px;background:linear-gradient(to right,#596300 0%,#596300 var(--slider-value, 0%),#59630023 var(--slider-value, 0%),#59630023 100%);border-radius:3px}.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background-color:#596300;cursor:pointer;box-shadow:0 2px 4px #0000004d;margin-top:-5px}.slider::-moz-range-track{background:transparent;border:none}.slider::-moz-range-progress{background-color:#596300;height:6px;border-radius:3px}.slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background-color:#596300;cursor:pointer;border:none;box-shadow:0 2px 4px #0003}.btn-assign,.btn-primary,.btn-secondary{padding:14px 24px;background-color:#596300;color:#fff;border:none;border-radius:36px;font-size:14px;font-weight:500;cursor:pointer;width:100%}.btn-assign{color:#596300;background-color:#dee58f}.btn-assign:hover,.btn-primary:hover{color:#fff;background-color:#7cb342}.btn-assign:active,.btn-primary:active{color:#fff;background-color:#61661f}.side-card-actions{display:flex;flex-direction:column;gap:12px;margin-top:auto}.btn-secondary{background-color:transparent;border:1px solid #61661f;color:#61661f}.btn-secondary:hover{color:#fff;background-color:#7cb342;border-color:#7cb342}.btn-secondary:active{color:#fff;background-color:#61661f;border-color:#61661f}.side-card{container-type:inline-size}@container (max-width: 260px){.side-card{padding:12px;gap:12px}.element-section h3,.input-field{font-size:18px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SideCard, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-side-card', imports: [], template: "\r\n  <div class=\"side-card\">\r\n    @if (showTypeSelector) {\r\n    <div class=\"button-group\">\r\n      <button\r\n        class=\"btn-type\"\r\n        [class.active]=\"selectedType === 'radial'\"\r\n        (click)=\"selectType('radial')\"\r\n      >\r\n        Radial\r\n      </button>\r\n      <button\r\n        class=\"btn-type\"\r\n        [class.active]=\"selectedType === 'poligonal'\"\r\n        (click)=\"selectType('poligonal')\"\r\n      >\r\n        Poligonal\r\n      </button>\r\n    </div>\r\n    }\r\n\r\n    <div class=\"text-container\">\r\n      <input\r\n        #inputRef\r\n        type=\"text\"\r\n        class=\"input-field\"\r\n        [placeholder]=\"placeholder\"\r\n        [value]=\"value\"\r\n        (input)=\"onInput($event)\"\r\n      />\r\n      <svg\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        width=\"24\"\r\n        height=\"24\"\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        class=\"icon icon-tabler icons-tabler-outline icon-tabler-edit\"\r\n        (click)=\"focusInput(inputRef)\"\r\n      >\r\n        <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n        <path d=\"M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1\" />\r\n        <path\r\n          d=\"M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415\"\r\n        />\r\n        <path d=\"M16 5l3 3\" />\r\n      </svg>\r\n    </div>\r\n\r\n    @for (section of sections; track section.title) {\r\n    <div class=\"element-section\">\r\n      <h3>{{ section.title }}</h3>\r\n\r\n      <div class=\"element-content\">\r\n        @if (section.items?.length) { @for (item of section.items; track\r\n        item.label) {\r\n        <div class=\"element-item\">\r\n          <span class=\"label\">{{ item.label }}</span>\r\n          <span class=\"value\">{{ item.value }}</span>\r\n        </div>\r\n        } } @if (section.showSlider) {\r\n        <input\r\n          type=\"range\"\r\n          class=\"slider\"\r\n          min=\"0\"\r\n          max=\"100\"\r\n          [value]=\"sliderValue\"\r\n          (input)=\"onSliderChange($event)\"\r\n        />\r\n        } @if (section.buttonLabel) {\r\n        <button class=\"btn-assign\" (click)=\"onButtonClick(section)\">{{ section.buttonLabel }}</button>\r\n        }\r\n      </div>\r\n    </div>\r\n    }\r\n  </div>\r\n", styles: [".side-card{position:absolute;top:16px;right:16px;width:300px;height:auto;max-height:90vh;background:#ebe8d6b0;border-radius:8px;padding:16px;box-shadow:0 4px 12px #00000026;z-index:10;overflow-y:auto;display:flex;flex-direction:column;gap:16px}.button-group{display:flex;gap:8px;justify-content:center}.btn-type{flex:1;padding:10px 12px;background-color:transparent;color:#61661f;border:2px solid #61661f;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer}.btn-type:hover{background-color:#dee58f;color:#61661f;border:none}.btn-type:active{background-color:#61661f;color:#fff;border-color:none}.active{background-color:#596300;color:#fff;border-color:none}.input-field{width:100%;padding:10px 0;border:none;border-radius:6px;font-size:22px;background-color:transparent;transition:border-color .3s ease;box-sizing:border-box;text-transform:uppercase}.input-field:focus{outline:none}.input-field::placeholder{color:#1c1c12;transition:opacity .3s ease}.input-field:focus::placeholder{opacity:.3}.text-container{display:flex;gap:8px;align-items:center}.icon{color:#1c1c12;cursor:pointer}.icon:hover{color:#61661f}.element-section{display:flex;flex-direction:column;gap:8px}.element-section h3{margin:0;font-size:22px;font-weight:500;color:#1c1c12;text-transform:uppercase}.element-content{display:flex;flex-direction:column;gap:10px;padding:10px 0;background-color:transparent}.element-item{display:flex;justify-content:space-between}.element-item .label{font-size:14px;color:#454733;font-weight:500;text-transform:uppercase}.element-item .value{font-size:14px;color:#454733;font-weight:500}.slider-section{display:flex;flex-direction:column;gap:8px}.slider{width:100%;height:6px;border-radius:3px;outline:none;-webkit-appearance:none;appearance:none;cursor:pointer;padding:8px 0;background:transparent}.slider::-webkit-slider-runnable-track{width:100%;height:6px;background:linear-gradient(to right,#596300 0%,#596300 var(--slider-value, 0%),#e0e0e0 var(--slider-value, 0%),#e0e0e0 100%);border-radius:3px}.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background-color:#596300;cursor:pointer;box-shadow:0 2px 4px #0000004d;margin-top:-5px}.slider::-moz-range-track{background:transparent;border:none}.slider::-moz-range-progress{background-color:#596300;height:6px;border-radius:3px}.slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background-color:#596300;cursor:pointer;border:none;box-shadow:0 2px 4px #0003}.btn-assign{padding:14px 24px;background-color:#596300;color:#fff;border:none;border-radius:36px;font-size:14px;font-weight:500;cursor:pointer;width:100%}.btn-assign:hover{background-color:#7cb342}.btn-assign:active{background-color:#61661f}\n"] }]
-        }], propDecorators: { showTypeSelector: [{
+            args: [{ selector: 'lib-side-card', imports: [CommonModule], template: "<div class=\"side-container\">\r\n    \r\n  <div class=\"side-card\" [class.floating]=\"isFloating\" [class.compact]=\"isCompact\">\r\n    <div class=\"element-header\">\r\n      @if (modeSideCard === 'create' && showTypeSelector) {\r\n      <div class=\"button-group\">\r\n        <button class=\"btn-type\" [class.active]=\"selectedType === 'radial'\" (click)=\"selectType('radial')\">\r\n          Radial\r\n        </button>\r\n        <button class=\"btn-type\" [class.active]=\"selectedType === 'poligonal'\" (click)=\"selectType('poligonal')\">\r\n          Poligonal\r\n        </button>\r\n      </div>\r\n      }\r\n\r\n      <div class=\"text-container\">\r\n        <input #inputRef type=\"text\" class=\"input-field\" [placeholder]=\"placeholder\" [value]=\"value\"\r\n          (input)=\"onInput($event)\" />\r\n        @if(modeSideCard === 'create' || modeSideCard === 'edit'){\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n          stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n          class=\"icon icon-tabler icons-tabler-outline icon-tabler-edit\" (click)=\"focusInput(inputRef)\">\r\n          <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n          <path d=\"M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1\" />\r\n          <path d=\"M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415\" />\r\n          <path d=\"M16 5l3 3\" />\r\n        </svg>\r\n        } @else {\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n          stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n          class=\"icon icon-tabler icons-tabler-outline icon-tabler-settings\" (click)=\"buttonClickIcon()\">\r\n          <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n          <path\r\n            d=\"M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065\" />\r\n          <path d=\"M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0\" />\r\n        </svg>\r\n        }\r\n      </div>\r\n\r\n      @if(modeSideCard === 'edit' || modeSideCard === 'info'){\r\n      <span #statusChip class=\"status-chip\" [ngClass]=\"statusClass\" (click)=\"changeStatusLabel()\">\r\n        {{ statusLabel }}\r\n      </span>\r\n      }\r\n    </div>\r\n    @for (section of sections; track section.title) {\r\n    <div class=\"element-section\">\r\n      <h3>{{ section.title }}</h3>\r\n\r\n      <div class=\"element-content\">\r\n        @if (section.items?.length) { @for (item of section.items; track\r\n        item.label) {\r\n        <div class=\"element-item\">\r\n          <span class=\"label\">{{ item.label }}</span>\r\n          <span class=\"value\">{{ item.value }}</span>\r\n        </div>\r\n        } } @if (section.showSlider) {\r\n        <div class=\"element-item\">\r\n          <span class=\"label\">{{ sliderLabel }}</span>\r\n          <span class=\"value\">{{ sliderValue }} {{ sliderUnit }}</span>\r\n        </div>\r\n        @if (modeSideCard !== 'info') {\r\n        <input type=\"range\" class=\"slider\" [min]=\"min\" [max]=\"max\" [value]=\"sliderValue\"\r\n          (input)=\"onSliderChange($event)\" />\r\n        }} @if (section.buttonSectionLabel && modeSideCard !== 'info') {\r\n        <button class=\"btn-assign\" (click)=\"onButtonClick(section)\">{{ section.buttonSectionLabel }}</button>\r\n        }\r\n      </div>\r\n    </div>\r\n    }\r\n\r\n    <div class=\"side-card-actions\">\r\n      @if (showBtnPrimary) {\r\n      <button class=\"btn-primary\" (click)=\"onPrimaryClick()\">{{ primaryButtonLabel }}</button>\r\n      }\r\n      @if (showBtnSecondary) {\r\n      <button class=\"btn-secondary\" (click)=\"onSecondaryClick()\">{{ secondaryButtonLabel }}</button>\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n    \r\n</div>", styles: [".side-card{width:300px;max-width:340px;min-width:240px;height:auto;max-height:90vh;background:#ebe8d6b0;border-radius:8px;padding:16px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 4px 12px #00000026;z-index:10;overflow-y:auto;display:flex;flex-direction:column;gap:16px;box-sizing:border-box}.side-card.floating{position:absolute;top:16px;right:16px}.side-card.compact{max-width:280px;padding:14px;gap:12px}.side-card.compact .element-section h3,.side-card.compact .input-field{font-size:18px}.side-card.compact .status-chip{font-size:1rem}.side-card.compact .slider{height:4px}.side-card.compact .btn-primary,.side-card.compact .btn-secondary,.side-card.compact .btn-assign{padding:10px 16px;font-size:13px;border-radius:24px}.button-group{display:flex;gap:8px;justify-content:center;margin-bottom:12px}.btn-type{flex:1;padding:10px 12px;background-color:transparent;color:#61661f;border:2px solid #61661f;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer}.btn-type:hover{background-color:#dee58f;color:#61661f;border:none}.btn-type:active{background-color:#61661f;color:#fff;border-color:none}.active{background-color:#596300;color:#fff;border-color:none}.input-field{width:100%;padding:10px 0;border:none;border-radius:6px;font-size:22px;background-color:transparent;transition:border-color .3s ease;box-sizing:border-box;text-transform:uppercase}.input-field:focus{outline:none}.input-field::placeholder{color:#1c1c12;transition:opacity .3s ease}.input-field:focus::placeholder{opacity:.3}.text-container{display:flex;gap:8px;align-items:center}.icon{color:#1c1c12;cursor:pointer}.status-chip{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.375rem .75rem;border-radius:6px;font-size:1.2rem;font-weight:600;white-space:nowrap;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;cursor:pointer;margin-bottom:12px}.status-chip-active{background-color:#78db5c;color:#0f5e00}.status-chip-active:hover{background-color:#9be786}.status-chip-inactive{background-color:#a60321;color:#fafae8}.status-chip-inactive:hover{background-color:#c06576}.icon:hover{color:#61661f}.element-section{display:flex;flex-direction:column;gap:8px}.element-section h3{margin:0;font-size:22px;font-weight:500;color:#1c1c12;text-transform:uppercase}.element-content{display:flex;flex-direction:column;gap:10px;padding:10px 0;background-color:transparent}.element-item{display:flex;justify-content:space-between}.element-item .label{font-size:14px;color:#454733;font-weight:500;text-transform:uppercase}.element-item .value{font-size:14px;color:#454733;font-weight:500}.slider-section{display:flex;flex-direction:column;gap:8px}.slider{width:100%;height:6px;border-radius:3px;outline:none;-webkit-appearance:none;appearance:none;cursor:pointer;padding:8px 0;background:transparent}.slider::-webkit-slider-runnable-track{width:100%;height:6px;background:linear-gradient(to right,#596300 0%,#596300 var(--slider-value, 0%),#59630023 var(--slider-value, 0%),#59630023 100%);border-radius:3px}.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background-color:#596300;cursor:pointer;box-shadow:0 2px 4px #0000004d;margin-top:-5px}.slider::-moz-range-track{background:transparent;border:none}.slider::-moz-range-progress{background-color:#596300;height:6px;border-radius:3px}.slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background-color:#596300;cursor:pointer;border:none;box-shadow:0 2px 4px #0003}.btn-assign,.btn-primary,.btn-secondary{padding:14px 24px;background-color:#596300;color:#fff;border:none;border-radius:36px;font-size:14px;font-weight:500;cursor:pointer;width:100%}.btn-assign{color:#596300;background-color:#dee58f}.btn-assign:hover,.btn-primary:hover{color:#fff;background-color:#7cb342}.btn-assign:active,.btn-primary:active{color:#fff;background-color:#61661f}.side-card-actions{display:flex;flex-direction:column;gap:12px;margin-top:auto}.btn-secondary{background-color:transparent;border:1px solid #61661f;color:#61661f}.btn-secondary:hover{color:#fff;background-color:#7cb342;border-color:#7cb342}.btn-secondary:active{color:#fff;background-color:#61661f;border-color:#61661f}.side-card{container-type:inline-size}@container (max-width: 260px){.side-card{padding:12px;gap:12px}.element-section h3,.input-field{font-size:18px}}\n"] }]
+        }], propDecorators: { isFloating: [{
+                type: Input$1
+            }], isCompact: [{
+                type: Input$1
+            }], modeSideCard: [{
+                type: Input$1
+            }], showTypeSelector: [{
                 type: Input$1
+            }], btnClickIcon: [{
+                type: Output
             }], placeholder: [{
                 type: Input$1
             }], value: [{
@@ -2412,12 +2473,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Output
             }], typeChange: [{
                 type: Output
+            }], statusValue: [{
+                type: Input$1
+            }], statusChange: [{
+                type: Output
             }], sections: [{
                 type: Input$1
             }], sectionButtonClick: [{
                 type: Output
+            }], min: [{
+                type: Input$1
+            }], max: [{
+                type: Input$1
             }], sliderChange: [{
                 type: Output
+            }], showBtnPrimary: [{
+                type: Input$1
+            }], primaryButtonLabel: [{
+                type: Input$1
+            }], primaryButtonClick: [{
+                type: Output
+            }], showBtnSecondary: [{
+                type: Input$1
+            }], secondaryButtonLabel: [{
+                type: Input$1
+            }], secondaryButtonClick: [{
+                type: Output
             }] } });
 
 // src/app/components/public-api.ts