sapenlinea-components 0.0.31 → 0.0.32
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { model, input, signal, computed, Component, output, HostListener, ViewChildren, forwardRef, effect, EventEmitter, Output, Input as Input$1, Injectable } from '@angular/core';
|
|
2
|
+
import { model, input, signal, computed, Component, output, HostListener, ViewChildren, forwardRef, effect, EventEmitter, Output, Input as Input$1, Injectable, ViewChild } from '@angular/core';
|
|
3
3
|
import * as i1$1 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
5
|
import * as i1 from '@angular/forms';
|
|
@@ -263,11 +263,11 @@ class Table {
|
|
|
263
263
|
});
|
|
264
264
|
}
|
|
265
265
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Table, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
266
|
-
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"] });
|
|
266
|
+
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}.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;text-transform:uppercase}.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"] });
|
|
267
267
|
}
|
|
268
268
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Table, decorators: [{
|
|
269
269
|
type: Component,
|
|
270
|
-
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"] }]
|
|
270
|
+
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}.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;text-transform:uppercase}.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"] }]
|
|
271
271
|
}], 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: [{
|
|
272
272
|
type: ViewChildren,
|
|
273
273
|
args: ['statusChip']
|
|
@@ -738,7 +738,7 @@ class DateTimePicker {
|
|
|
738
738
|
useExisting: forwardRef(() => DateTimePicker),
|
|
739
739
|
multi: true,
|
|
740
740
|
},
|
|
741
|
-
], ngImport: i0, template: "<div class=\"datetime-container\">\r\n <div\r\n class=\"datetime-header\"\r\n [class.active]=\"isOpen()\"\r\n [class.disabled]=\"isBlocked()\"\r\n [class.readonly]=\"isBlocked()\"\r\n (click)=\"!isBlocked() && toggle()\"\r\n (keydown)=\"!isBlocked() && onKeyDown($event)\"\r\n tabindex=\"0\"\r\n >\r\n <input\r\n type=\"text\"\r\n class=\"datetime-input\"\r\n [value]=\"displayValue()\"\r\n [placeholder]=\"placeholder()\"\r\n (input)=\"onInputChange($event)\"\r\n (focus)=\"!isBlocked() && onInputFocus()\"\r\n (click)=\"$event.stopPropagation()\"\r\n [disabled]=\"isDisabled()\"\r\n [readOnly]=\"readonly()\"\r\n />\r\n\r\n <div class=\"header-icons\">\r\n @if (selectedDate()) {\r\n <span\r\n class=\"clear-icon\"\r\n (click)=\"!isBlocked() && clear(); $event.stopPropagation()\"\r\n title=\"Limpiar\"\r\n >\r\n \u00D7\r\n </span>\r\n }\r\n <span class=\"arrow\" [class.open]=\"isOpen()\"></span>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n@if (isOpen()) {\r\n<div class=\"dropdown\">\r\n <div class=\"datetime-content\">\r\n <!-- Secci\u00F3n del calendario -->\r\n <div class=\"calendar-section\">\r\n <!-- Navegaci\u00F3n del calendario -->\r\n <div class=\"calendar-nav\">\r\n <div class=\"nav-section\">\r\n <button\r\n type=\"button\"\r\n class=\"nav-btn\"\r\n (click)=\"previousYear()\"\r\n title=\"A\u00F1o anterior\"\r\n >\r\n \u2039\u2039\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"nav-btn\"\r\n (click)=\"previousMonth()\"\r\n title=\"Mes anterior\"\r\n >\r\n \u2039\r\n </button>\r\n </div>\r\n\r\n <div class=\"current-date\">{{ monthName() }} {{ currentYear() }}</div>\r\n\r\n <div class=\"nav-section\">\r\n <button\r\n type=\"button\"\r\n class=\"nav-btn\"\r\n (click)=\"nextMonth()\"\r\n title=\"Siguiente mes\"\r\n >\r\n \u203A\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"nav-btn\"\r\n (click)=\"nextYear()\"\r\n title=\"Siguiente a\u00F1o\"\r\n >\r\n \u203A\u203A\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <!-- D\u00EDas de la semana -->\r\n <div class=\"weekdays\">\r\n <div class=\"weekday\">Dom</div>\r\n <div class=\"weekday\">Lun</div>\r\n <div class=\"weekday\">Mar</div>\r\n <div class=\"weekday\">Mi\u00E9</div>\r\n <div class=\"weekday\">Jue</div>\r\n <div class=\"weekday\">Vie</div>\r\n <div class=\"weekday\">S\u00E1b</div>\r\n </div>\r\n\r\n <!-- D\u00EDas del mes -->\r\n <div class=\"calendar-grid\">\r\n @for (day of calendarDays(); track $index) {\r\n <div\r\n class=\"calendar-day\"\r\n [class.selected]=\"isDaySelected(day)\"\r\n [class.today]=\"isToday(day)\"\r\n [class.disabled]=\"isDayDisabled(day)\"\r\n [class.empty]=\"!day\"\r\n (click)=\"selectDay(day)\"\r\n >\r\n {{ day || '' }}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n <!-- Selector de tiempo (solo si mode === 'datetime') -->\r\n @if (mode() === 'datetime') {\r\n <div class=\"time-section\">\r\n <div class=\"time-header\">Horario</div>\r\n\r\n <div class=\"time-selectors\">\r\n <div class=\"time-group\">\r\n <div class=\"time-column\">\r\n <div class=\"time-label\">Hora</div>\r\n <div class=\"time-scroll\">\r\n @for (hour of hours12(); track hour.value) {\r\n <div\r\n class=\"time-option\"\r\n [class.selected]=\"hour.value === selectedHour12()\"\r\n (click)=\"setHour12(hour.value)\"\r\n >\r\n {{ hour.display }}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n <div class=\"time-separator-vertical\">:</div>\r\n\r\n <div class=\"time-column\">\r\n <div class=\"time-label\">Min</div>\r\n <div class=\"time-scroll\">\r\n @for (minute of minutes(); track minute) {\r\n <div\r\n class=\"time-option\"\r\n [class.selected]=\"minute === selectedMinute()\"\r\n (click)=\"setMinute(minute)\"\r\n >\r\n {{ minute.toString().padStart(2, '0') }}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n <div class=\"time-column\">\r\n <div class=\"time-label\">AM/PM</div>\r\n <div class=\"time-scroll ampm\">\r\n <div\r\n class=\"time-option\"\r\n [class.selected]=\"selectedAmPm() === 'AM'\"\r\n (click)=\"setAmPm('AM')\"\r\n >\r\n AM\r\n </div>\r\n <div\r\n class=\"time-option\"\r\n [class.selected]=\"selectedAmPm() === 'PM'\"\r\n (click)=\"setAmPm('PM')\"\r\n >\r\n PM\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n\r\n <!-- Botones de acci\u00F3n -->\r\n <div class=\"action-buttons\">\r\n <button type=\"button\" class=\"action-btn secondary\" (click)=\"today()\">\r\n Hoy\r\n </button>\r\n @if (mode() === 'datetime') {\r\n <button type=\"button\" class=\"action-btn primary\" (click)=\"close()\">\r\n Aceptar\r\n </button>\r\n }\r\n </div>\r\n</div>\r\n}\r\n", styles: [".datetime-container{position:relative;width:100%}.datetime-header{width:100%;border:1px solid #787861;border-radius:5px;padding:12px 15px;background-color:transparent;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:auto;transition:border-color .2s}.datetime-input{flex:1;border:none;outline:none;background:transparent;font-size:1.3rem;color:#454733;padding:0;margin:0}.datetime-input::placeholder{color:#787861}.datetime-input:disabled{cursor:not-allowed}.datetime-header:hover,.datetime-header:focus{outline:none;border-color:#a9a97f}.datetime-header.active{border-color:#a9a97f;outline:none}.datetime-header.disabled,.datetime-header.readonly{pointer-events:none;opacity:.6;cursor:not-allowed}.selected-text{color:#454733;font-size:1.3rem;flex:1}.selected-text.placeholder{color:#787861}.header-icons{display:flex;align-items:center;gap:8px}.clear-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center;color:#787861;font-size:1.5rem;cursor:pointer;border-radius:50%;transition:all .2s}.clear-icon:hover{background-color:#7878611a;color:#454733}.arrow{width:20px;height:20px;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='icon icon-tabler icons-tabler-outline icon-tabler-calendar-event'%3e%3cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3e%3cpath d='M4 5m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z' /%3e%3cpath d='M16 3l0 4' /%3e%3cpath d='M8 3l0 4' /%3e%3cpath d='M4 11l16 0' /%3e%3cpath d='M8 15h2v2h-2z' /%3e%3c/svg%3e\");background-repeat:no-repeat;background-size:20px;background-position:center;color:#787861;flex-shrink:0;transition:transform .2s}.arrow.open{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' class='icon icon-tabler icons-tabler-filled icon-tabler-calendar-event'%3e%3cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3e%3cpath d='M16 2a1 1 0 0 1 .993 .883l.007 .117v1h1a3 3 0 0 1 2.995 2.824l.005 .176v12a3 3 0 0 1 -2.824 2.995l-.176 .005h-12a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-12a3 3 0 0 1 2.824 -2.995l.176 -.005h1v-1a1 1 0 0 1 1.993 -.117l.007 .117v1h6v-1a1 1 0 0 1 1 -1m3 7h-14v9.625c0 .705 .386 1.286 .883 1.366l.117 .009h12c.513 0 .936 -.53 .993 -1.215l.007 -.16z' /%3e%3cpath d='M8 14h2v2h-2z' /%3e%3c/svg%3e\")}.dropdown{position:absolute;top:100%;left:0;right:0;background:#e3e3d1;border:1px solid #787861;border-top:none;border-radius:0 0 5px 5px;z-index:100000;box-shadow:0 4px 12px #00000026;min-width:400px}.datetime-content{display:flex}.calendar-section{flex:1;min-width:280px}.calendar-nav{display:flex;justify-content:space-between;align-items:center;padding:15px;border-bottom:1px solid rgba(120,120,97,.2)}.nav-section{display:flex;gap:5px}.nav-btn{background:none;border:none;color:#787861;cursor:pointer;font-size:1.2rem;padding:5px 10px;border-radius:3px;transition:all .2s}.nav-btn:hover{background-color:#a9a97f1a;color:#454733}.current-date{font-weight:500;color:#454733;font-size:1.1rem}.weekdays{display:grid;grid-template-columns:repeat(7,1fr);background:#7878611a}.weekday{padding:10px 5px;text-align:center;font-size:.9rem;font-weight:500;color:#787861}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr)}.calendar-day{padding:12px 5px;text-align:center;cursor:pointer;color:#454733;font-size:1rem;border-right:1px solid rgba(120,120,97,.1);border-bottom:1px solid rgba(120,120,97,.1);transition:all .2s}.calendar-day:hover:not(.disabled):not(.empty){background-color:#a9a97f33}.calendar-day.selected{background-color:#a9a97f;color:#e3e3d1;font-weight:500}.calendar-day.today:not(.selected){background-color:#a9a97f4d;font-weight:500}.calendar-day.disabled{color:#78786166;cursor:not-allowed}.calendar-day.empty{cursor:default}.calendar-day:nth-child(7n){border-right:none}.time-section{border-left:1px solid rgba(120,120,97,.2);min-width:140px;display:flex;flex-direction:column;background:#a9a97f0d}.time-header{padding:15px;border-bottom:1px solid rgba(120,120,97,.2);text-align:center;font-weight:500;color:#454733;background:#a9a97f1a}.time-selectors{display:flex;flex-direction:column;padding:15px;gap:20px;flex:1}.time-group{display:flex;align-items:center;gap:10px}.time-column{flex:1;display:flex;flex-direction:column;align-items:center}.time-label{font-size:.9rem;color:#787861;margin-bottom:10px;font-weight:500}.time-scroll{max-height:150px;overflow-y:auto;border:1px solid rgba(120,120,97,.2);border-radius:3px;width:50px;background:#a9a97f}.time-option{padding:8px 12px;text-align:center;cursor:pointer;color:#454733;font-size:1rem;transition:all .2s}.time-option:hover{background-color:#a9a97f1a}.time-option.selected{background-color:#a9a97f;color:#e3e3d1;font-weight:500}.time-separator-vertical{font-size:1.5rem;color:#787861;font-weight:700;align-self:flex-end;margin-bottom:10px}.time-scroll::-webkit-scrollbar{width:4px}.time-scroll::-webkit-scrollbar-track{background:#7878611a}.time-scroll::-webkit-scrollbar-thumb{background:#787861;border-radius:2px}.time-scroll::-webkit-scrollbar-thumb:hover{background:#a9a97f}.action-buttons{display:flex;justify-content:space-between;padding:15px;border-top:1px solid rgba(120,120,97,.2);gap:10px}.action-btn{padding:10px 20px;border:none;border-radius:3px;cursor:pointer;font-size:1rem;transition:all .2s}.action-btn.secondary{background:transparent;color:#787861;border:1px solid #787861}.action-btn.secondary:hover{background:#7878611a;color:#454733}.action-btn.primary{background:#a9a97f;color:#e3e3d1;border:1px solid #a9a97f}.action-btn.primary:hover{background:#969669;border-color:#969669}@media (max-width: 768px){.dropdown{min-width:320px}.datetime-content{flex-direction:column}.time-section{border-left:none;border-top:1px solid rgba(120,120,97,.2)}.time-selectors{flex-direction:row;justify-content:center;padding:15px}.time-group{gap:15px}.datetime-header{padding:10px 15px}.calendar-nav{padding:12px}.calendar-day{padding:10px 3px;font-size:.9rem}.action-buttons{padding:12px}}@media (max-width: 480px){.dropdown{min-width:280px}.time-section{min-width:auto}.time-scroll{width:45px}.time-selectors{padding:10px}}\n"] });
|
|
741
|
+
], ngImport: i0, template: "<div class=\"datetime-container\">\r\n <div\r\n class=\"datetime-header\"\r\n [class.active]=\"isOpen()\"\r\n [class.disabled]=\"isBlocked()\"\r\n [class.readonly]=\"isBlocked()\"\r\n (click)=\"!isBlocked() && toggle()\"\r\n (keydown)=\"!isBlocked() && onKeyDown($event)\"\r\n tabindex=\"0\"\r\n >\r\n <input\r\n type=\"text\"\r\n class=\"datetime-input\"\r\n [value]=\"displayValue()\"\r\n [placeholder]=\"placeholder()\"\r\n (input)=\"onInputChange($event)\"\r\n (focus)=\"!isBlocked() && onInputFocus()\"\r\n (click)=\"$event.stopPropagation()\"\r\n [disabled]=\"isDisabled()\"\r\n [readOnly]=\"readonly()\"\r\n />\r\n\r\n <div class=\"header-icons\">\r\n @if (selectedDate()) {\r\n <span\r\n class=\"clear-icon\"\r\n (click)=\"!isBlocked() && clear(); $event.stopPropagation()\"\r\n title=\"Limpiar\"\r\n >\r\n \u00D7\r\n </span>\r\n }\r\n <span class=\"arrow\" [class.open]=\"isOpen()\"></span>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n@if (isOpen()) {\r\n<div class=\"dropdown\">\r\n <div class=\"datetime-content\">\r\n <!-- Secci\u00F3n del calendario -->\r\n <div class=\"calendar-section\">\r\n <!-- Navegaci\u00F3n del calendario -->\r\n <div class=\"calendar-nav\">\r\n <div class=\"nav-section\">\r\n <button\r\n type=\"button\"\r\n class=\"nav-btn\"\r\n (click)=\"previousYear()\"\r\n title=\"A\u00F1o anterior\"\r\n >\r\n \u2039\u2039\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"nav-btn\"\r\n (click)=\"previousMonth()\"\r\n title=\"Mes anterior\"\r\n >\r\n \u2039\r\n </button>\r\n </div>\r\n\r\n <div class=\"current-date\">{{ monthName() }} {{ currentYear() }}</div>\r\n\r\n <div class=\"nav-section\">\r\n <button\r\n type=\"button\"\r\n class=\"nav-btn\"\r\n (click)=\"nextMonth()\"\r\n title=\"Siguiente mes\"\r\n >\r\n \u203A\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"nav-btn\"\r\n (click)=\"nextYear()\"\r\n title=\"Siguiente a\u00F1o\"\r\n >\r\n \u203A\u203A\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <!-- D\u00EDas de la semana -->\r\n <div class=\"weekdays\">\r\n <div class=\"weekday\">Dom</div>\r\n <div class=\"weekday\">Lun</div>\r\n <div class=\"weekday\">Mar</div>\r\n <div class=\"weekday\">Mi\u00E9</div>\r\n <div class=\"weekday\">Jue</div>\r\n <div class=\"weekday\">Vie</div>\r\n <div class=\"weekday\">S\u00E1b</div>\r\n </div>\r\n\r\n <!-- D\u00EDas del mes -->\r\n <div class=\"calendar-grid\">\r\n @for (day of calendarDays(); track $index) {\r\n <div\r\n class=\"calendar-day\"\r\n [class.selected]=\"isDaySelected(day)\"\r\n [class.today]=\"isToday(day)\"\r\n [class.disabled]=\"isDayDisabled(day)\"\r\n [class.empty]=\"!day\"\r\n (click)=\"selectDay(day)\"\r\n >\r\n {{ day || '' }}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n <!-- Selector de tiempo (solo si mode === 'datetime') -->\r\n @if (mode() === 'datetime') {\r\n <div class=\"time-section\">\r\n <div class=\"time-header\">Horario</div>\r\n\r\n <div class=\"time-selectors\">\r\n <div class=\"time-group\">\r\n <div class=\"time-column\">\r\n <div class=\"time-label\">Hora</div>\r\n <div class=\"time-scroll\">\r\n @for (hour of hours12(); track hour.value) {\r\n <div\r\n class=\"time-option\"\r\n [class.selected]=\"hour.value === selectedHour12()\"\r\n (click)=\"setHour12(hour.value)\"\r\n >\r\n {{ hour.display }}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n <div class=\"time-separator-vertical\">:</div>\r\n\r\n <div class=\"time-column\">\r\n <div class=\"time-label\">Min</div>\r\n <div class=\"time-scroll\">\r\n @for (minute of minutes(); track minute) {\r\n <div\r\n class=\"time-option\"\r\n [class.selected]=\"minute === selectedMinute()\"\r\n (click)=\"setMinute(minute)\"\r\n >\r\n {{ minute.toString().padStart(2, '0') }}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n <div class=\"time-column\">\r\n <div class=\"time-label\">AM/PM</div>\r\n <div class=\"time-scroll ampm\">\r\n <div\r\n class=\"time-option\"\r\n [class.selected]=\"selectedAmPm() === 'AM'\"\r\n (click)=\"setAmPm('AM')\"\r\n >\r\n AM\r\n </div>\r\n <div\r\n class=\"time-option\"\r\n [class.selected]=\"selectedAmPm() === 'PM'\"\r\n (click)=\"setAmPm('PM')\"\r\n >\r\n PM\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n\r\n <!-- Botones de acci\u00F3n -->\r\n <div class=\"action-buttons\">\r\n <button type=\"button\" class=\"action-btn secondary\" (click)=\"today()\">\r\n Hoy\r\n </button>\r\n @if (mode() === 'datetime') {\r\n <button type=\"button\" class=\"action-btn primary\" (click)=\"close()\">\r\n Aceptar\r\n </button>\r\n }\r\n </div>\r\n</div>\r\n}\r\n", styles: [".datetime-container{position:relative;width:100%}.datetime-header{width:100%;border:1px solid #787861;border-radius:5px;padding:12px 15px;background-color:transparent;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:auto;transition:border-color .2s}.datetime-input{flex:1;border:none;outline:none;background:transparent;font-size:1.3rem;color:#454733;padding:0;margin:0}.datetime-input::placeholder{color:#787861;text-transform:uppercase}.datetime-input:disabled{cursor:not-allowed}.datetime-header:hover,.datetime-header:focus{outline:none;border-color:#a9a97f}.datetime-header.active{border-color:#a9a97f;outline:none}.datetime-header.disabled,.datetime-header.readonly{pointer-events:none;opacity:.6;cursor:not-allowed}.selected-text{color:#454733;font-size:1.3rem;flex:1}.selected-text.placeholder{color:#787861}.header-icons{display:flex;align-items:center;gap:8px}.clear-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center;color:#787861;font-size:1.5rem;cursor:pointer;border-radius:50%;transition:all .2s}.clear-icon:hover{background-color:#7878611a;color:#454733}.arrow{width:20px;height:20px;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='icon icon-tabler icons-tabler-outline icon-tabler-calendar-event'%3e%3cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3e%3cpath d='M4 5m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z' /%3e%3cpath d='M16 3l0 4' /%3e%3cpath d='M8 3l0 4' /%3e%3cpath d='M4 11l16 0' /%3e%3cpath d='M8 15h2v2h-2z' /%3e%3c/svg%3e\");background-repeat:no-repeat;background-size:20px;background-position:center;color:#787861;flex-shrink:0;transition:transform .2s}.arrow.open{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' class='icon icon-tabler icons-tabler-filled icon-tabler-calendar-event'%3e%3cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3e%3cpath d='M16 2a1 1 0 0 1 .993 .883l.007 .117v1h1a3 3 0 0 1 2.995 2.824l.005 .176v12a3 3 0 0 1 -2.824 2.995l-.176 .005h-12a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-12a3 3 0 0 1 2.824 -2.995l.176 -.005h1v-1a1 1 0 0 1 1.993 -.117l.007 .117v1h6v-1a1 1 0 0 1 1 -1m3 7h-14v9.625c0 .705 .386 1.286 .883 1.366l.117 .009h12c.513 0 .936 -.53 .993 -1.215l.007 -.16z' /%3e%3cpath d='M8 14h2v2h-2z' /%3e%3c/svg%3e\")}.dropdown{position:absolute;top:100%;left:0;right:0;background:#e3e3d1;border:1px solid #787861;border-top:none;border-radius:0 0 5px 5px;z-index:100000;box-shadow:0 4px 12px #00000026;min-width:400px}.datetime-content{display:flex}.calendar-section{flex:1;min-width:280px}.calendar-nav{display:flex;justify-content:space-between;align-items:center;padding:15px;border-bottom:1px solid rgba(120,120,97,.2)}.nav-section{display:flex;gap:5px}.nav-btn{background:none;border:none;color:#787861;cursor:pointer;font-size:1.2rem;padding:5px 10px;border-radius:3px;transition:all .2s}.nav-btn:hover{background-color:#a9a97f1a;color:#454733}.current-date{font-weight:500;color:#454733;font-size:1.1rem}.weekdays{display:grid;grid-template-columns:repeat(7,1fr);background:#7878611a}.weekday{padding:10px 5px;text-align:center;font-size:.9rem;font-weight:500;color:#787861}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr)}.calendar-day{padding:12px 5px;text-align:center;cursor:pointer;color:#454733;font-size:1rem;border-right:1px solid rgba(120,120,97,.1);border-bottom:1px solid rgba(120,120,97,.1);transition:all .2s}.calendar-day:hover:not(.disabled):not(.empty){background-color:#a9a97f33}.calendar-day.selected{background-color:#a9a97f;color:#e3e3d1;font-weight:500}.calendar-day.today:not(.selected){background-color:#a9a97f4d;font-weight:500}.calendar-day.disabled{color:#78786166;cursor:not-allowed}.calendar-day.empty{cursor:default}.calendar-day:nth-child(7n){border-right:none}.time-section{border-left:1px solid rgba(120,120,97,.2);min-width:140px;display:flex;flex-direction:column;background:#a9a97f0d}.time-header{padding:15px;border-bottom:1px solid rgba(120,120,97,.2);text-align:center;font-weight:500;color:#454733;background:#a9a97f1a}.time-selectors{display:flex;flex-direction:column;padding:15px;gap:20px;flex:1}.time-group{display:flex;align-items:center;gap:10px}.time-column{flex:1;display:flex;flex-direction:column;align-items:center}.time-label{font-size:.9rem;color:#787861;margin-bottom:10px;font-weight:500}.time-scroll{max-height:150px;overflow-y:auto;border:1px solid rgba(120,120,97,.2);border-radius:3px;width:50px;background:#a9a97f}.time-option{padding:8px 12px;text-align:center;cursor:pointer;color:#454733;font-size:1rem;transition:all .2s}.time-option:hover{background-color:#a9a97f1a}.time-option.selected{background-color:#a9a97f;color:#e3e3d1;font-weight:500}.time-separator-vertical{font-size:1.5rem;color:#787861;font-weight:700;align-self:flex-end;margin-bottom:10px}.time-scroll::-webkit-scrollbar{width:4px}.time-scroll::-webkit-scrollbar-track{background:#7878611a}.time-scroll::-webkit-scrollbar-thumb{background:#787861;border-radius:2px}.time-scroll::-webkit-scrollbar-thumb:hover{background:#a9a97f}.action-buttons{display:flex;justify-content:space-between;padding:15px;border-top:1px solid rgba(120,120,97,.2);gap:10px}.action-btn{padding:10px 20px;border:none;border-radius:3px;cursor:pointer;font-size:1rem;transition:all .2s}.action-btn.secondary{background:transparent;color:#787861;border:1px solid #787861}.action-btn.secondary:hover{background:#7878611a;color:#454733}.action-btn.primary{background:#a9a97f;color:#e3e3d1;border:1px solid #a9a97f}.action-btn.primary:hover{background:#969669;border-color:#969669}@media (max-width: 768px){.dropdown{min-width:320px}.datetime-content{flex-direction:column}.time-section{border-left:none;border-top:1px solid rgba(120,120,97,.2)}.time-selectors{flex-direction:row;justify-content:center;padding:15px}.time-group{gap:15px}.datetime-header{padding:10px 15px}.calendar-nav{padding:12px}.calendar-day{padding:10px 3px;font-size:.9rem}.action-buttons{padding:12px}}@media (max-width: 480px){.dropdown{min-width:280px}.time-section{min-width:auto}.time-scroll{width:45px}.time-selectors{padding:10px}}\n"] });
|
|
742
742
|
}
|
|
743
743
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DateTimePicker, decorators: [{
|
|
744
744
|
type: Component,
|
|
@@ -748,7 +748,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
748
748
|
useExisting: forwardRef(() => DateTimePicker),
|
|
749
749
|
multi: true,
|
|
750
750
|
},
|
|
751
|
-
], template: "<div class=\"datetime-container\">\r\n <div\r\n class=\"datetime-header\"\r\n [class.active]=\"isOpen()\"\r\n [class.disabled]=\"isBlocked()\"\r\n [class.readonly]=\"isBlocked()\"\r\n (click)=\"!isBlocked() && toggle()\"\r\n (keydown)=\"!isBlocked() && onKeyDown($event)\"\r\n tabindex=\"0\"\r\n >\r\n <input\r\n type=\"text\"\r\n class=\"datetime-input\"\r\n [value]=\"displayValue()\"\r\n [placeholder]=\"placeholder()\"\r\n (input)=\"onInputChange($event)\"\r\n (focus)=\"!isBlocked() && onInputFocus()\"\r\n (click)=\"$event.stopPropagation()\"\r\n [disabled]=\"isDisabled()\"\r\n [readOnly]=\"readonly()\"\r\n />\r\n\r\n <div class=\"header-icons\">\r\n @if (selectedDate()) {\r\n <span\r\n class=\"clear-icon\"\r\n (click)=\"!isBlocked() && clear(); $event.stopPropagation()\"\r\n title=\"Limpiar\"\r\n >\r\n \u00D7\r\n </span>\r\n }\r\n <span class=\"arrow\" [class.open]=\"isOpen()\"></span>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n@if (isOpen()) {\r\n<div class=\"dropdown\">\r\n <div class=\"datetime-content\">\r\n <!-- Secci\u00F3n del calendario -->\r\n <div class=\"calendar-section\">\r\n <!-- Navegaci\u00F3n del calendario -->\r\n <div class=\"calendar-nav\">\r\n <div class=\"nav-section\">\r\n <button\r\n type=\"button\"\r\n class=\"nav-btn\"\r\n (click)=\"previousYear()\"\r\n title=\"A\u00F1o anterior\"\r\n >\r\n \u2039\u2039\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"nav-btn\"\r\n (click)=\"previousMonth()\"\r\n title=\"Mes anterior\"\r\n >\r\n \u2039\r\n </button>\r\n </div>\r\n\r\n <div class=\"current-date\">{{ monthName() }} {{ currentYear() }}</div>\r\n\r\n <div class=\"nav-section\">\r\n <button\r\n type=\"button\"\r\n class=\"nav-btn\"\r\n (click)=\"nextMonth()\"\r\n title=\"Siguiente mes\"\r\n >\r\n \u203A\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"nav-btn\"\r\n (click)=\"nextYear()\"\r\n title=\"Siguiente a\u00F1o\"\r\n >\r\n \u203A\u203A\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <!-- D\u00EDas de la semana -->\r\n <div class=\"weekdays\">\r\n <div class=\"weekday\">Dom</div>\r\n <div class=\"weekday\">Lun</div>\r\n <div class=\"weekday\">Mar</div>\r\n <div class=\"weekday\">Mi\u00E9</div>\r\n <div class=\"weekday\">Jue</div>\r\n <div class=\"weekday\">Vie</div>\r\n <div class=\"weekday\">S\u00E1b</div>\r\n </div>\r\n\r\n <!-- D\u00EDas del mes -->\r\n <div class=\"calendar-grid\">\r\n @for (day of calendarDays(); track $index) {\r\n <div\r\n class=\"calendar-day\"\r\n [class.selected]=\"isDaySelected(day)\"\r\n [class.today]=\"isToday(day)\"\r\n [class.disabled]=\"isDayDisabled(day)\"\r\n [class.empty]=\"!day\"\r\n (click)=\"selectDay(day)\"\r\n >\r\n {{ day || '' }}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n <!-- Selector de tiempo (solo si mode === 'datetime') -->\r\n @if (mode() === 'datetime') {\r\n <div class=\"time-section\">\r\n <div class=\"time-header\">Horario</div>\r\n\r\n <div class=\"time-selectors\">\r\n <div class=\"time-group\">\r\n <div class=\"time-column\">\r\n <div class=\"time-label\">Hora</div>\r\n <div class=\"time-scroll\">\r\n @for (hour of hours12(); track hour.value) {\r\n <div\r\n class=\"time-option\"\r\n [class.selected]=\"hour.value === selectedHour12()\"\r\n (click)=\"setHour12(hour.value)\"\r\n >\r\n {{ hour.display }}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n <div class=\"time-separator-vertical\">:</div>\r\n\r\n <div class=\"time-column\">\r\n <div class=\"time-label\">Min</div>\r\n <div class=\"time-scroll\">\r\n @for (minute of minutes(); track minute) {\r\n <div\r\n class=\"time-option\"\r\n [class.selected]=\"minute === selectedMinute()\"\r\n (click)=\"setMinute(minute)\"\r\n >\r\n {{ minute.toString().padStart(2, '0') }}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n <div class=\"time-column\">\r\n <div class=\"time-label\">AM/PM</div>\r\n <div class=\"time-scroll ampm\">\r\n <div\r\n class=\"time-option\"\r\n [class.selected]=\"selectedAmPm() === 'AM'\"\r\n (click)=\"setAmPm('AM')\"\r\n >\r\n AM\r\n </div>\r\n <div\r\n class=\"time-option\"\r\n [class.selected]=\"selectedAmPm() === 'PM'\"\r\n (click)=\"setAmPm('PM')\"\r\n >\r\n PM\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n\r\n <!-- Botones de acci\u00F3n -->\r\n <div class=\"action-buttons\">\r\n <button type=\"button\" class=\"action-btn secondary\" (click)=\"today()\">\r\n Hoy\r\n </button>\r\n @if (mode() === 'datetime') {\r\n <button type=\"button\" class=\"action-btn primary\" (click)=\"close()\">\r\n Aceptar\r\n </button>\r\n }\r\n </div>\r\n</div>\r\n}\r\n", styles: [".datetime-container{position:relative;width:100%}.datetime-header{width:100%;border:1px solid #787861;border-radius:5px;padding:12px 15px;background-color:transparent;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:auto;transition:border-color .2s}.datetime-input{flex:1;border:none;outline:none;background:transparent;font-size:1.3rem;color:#454733;padding:0;margin:0}.datetime-input::placeholder{color:#787861}.datetime-input:disabled{cursor:not-allowed}.datetime-header:hover,.datetime-header:focus{outline:none;border-color:#a9a97f}.datetime-header.active{border-color:#a9a97f;outline:none}.datetime-header.disabled,.datetime-header.readonly{pointer-events:none;opacity:.6;cursor:not-allowed}.selected-text{color:#454733;font-size:1.3rem;flex:1}.selected-text.placeholder{color:#787861}.header-icons{display:flex;align-items:center;gap:8px}.clear-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center;color:#787861;font-size:1.5rem;cursor:pointer;border-radius:50%;transition:all .2s}.clear-icon:hover{background-color:#7878611a;color:#454733}.arrow{width:20px;height:20px;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='icon icon-tabler icons-tabler-outline icon-tabler-calendar-event'%3e%3cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3e%3cpath d='M4 5m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z' /%3e%3cpath d='M16 3l0 4' /%3e%3cpath d='M8 3l0 4' /%3e%3cpath d='M4 11l16 0' /%3e%3cpath d='M8 15h2v2h-2z' /%3e%3c/svg%3e\");background-repeat:no-repeat;background-size:20px;background-position:center;color:#787861;flex-shrink:0;transition:transform .2s}.arrow.open{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' class='icon icon-tabler icons-tabler-filled icon-tabler-calendar-event'%3e%3cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3e%3cpath d='M16 2a1 1 0 0 1 .993 .883l.007 .117v1h1a3 3 0 0 1 2.995 2.824l.005 .176v12a3 3 0 0 1 -2.824 2.995l-.176 .005h-12a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-12a3 3 0 0 1 2.824 -2.995l.176 -.005h1v-1a1 1 0 0 1 1.993 -.117l.007 .117v1h6v-1a1 1 0 0 1 1 -1m3 7h-14v9.625c0 .705 .386 1.286 .883 1.366l.117 .009h12c.513 0 .936 -.53 .993 -1.215l.007 -.16z' /%3e%3cpath d='M8 14h2v2h-2z' /%3e%3c/svg%3e\")}.dropdown{position:absolute;top:100%;left:0;right:0;background:#e3e3d1;border:1px solid #787861;border-top:none;border-radius:0 0 5px 5px;z-index:100000;box-shadow:0 4px 12px #00000026;min-width:400px}.datetime-content{display:flex}.calendar-section{flex:1;min-width:280px}.calendar-nav{display:flex;justify-content:space-between;align-items:center;padding:15px;border-bottom:1px solid rgba(120,120,97,.2)}.nav-section{display:flex;gap:5px}.nav-btn{background:none;border:none;color:#787861;cursor:pointer;font-size:1.2rem;padding:5px 10px;border-radius:3px;transition:all .2s}.nav-btn:hover{background-color:#a9a97f1a;color:#454733}.current-date{font-weight:500;color:#454733;font-size:1.1rem}.weekdays{display:grid;grid-template-columns:repeat(7,1fr);background:#7878611a}.weekday{padding:10px 5px;text-align:center;font-size:.9rem;font-weight:500;color:#787861}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr)}.calendar-day{padding:12px 5px;text-align:center;cursor:pointer;color:#454733;font-size:1rem;border-right:1px solid rgba(120,120,97,.1);border-bottom:1px solid rgba(120,120,97,.1);transition:all .2s}.calendar-day:hover:not(.disabled):not(.empty){background-color:#a9a97f33}.calendar-day.selected{background-color:#a9a97f;color:#e3e3d1;font-weight:500}.calendar-day.today:not(.selected){background-color:#a9a97f4d;font-weight:500}.calendar-day.disabled{color:#78786166;cursor:not-allowed}.calendar-day.empty{cursor:default}.calendar-day:nth-child(7n){border-right:none}.time-section{border-left:1px solid rgba(120,120,97,.2);min-width:140px;display:flex;flex-direction:column;background:#a9a97f0d}.time-header{padding:15px;border-bottom:1px solid rgba(120,120,97,.2);text-align:center;font-weight:500;color:#454733;background:#a9a97f1a}.time-selectors{display:flex;flex-direction:column;padding:15px;gap:20px;flex:1}.time-group{display:flex;align-items:center;gap:10px}.time-column{flex:1;display:flex;flex-direction:column;align-items:center}.time-label{font-size:.9rem;color:#787861;margin-bottom:10px;font-weight:500}.time-scroll{max-height:150px;overflow-y:auto;border:1px solid rgba(120,120,97,.2);border-radius:3px;width:50px;background:#a9a97f}.time-option{padding:8px 12px;text-align:center;cursor:pointer;color:#454733;font-size:1rem;transition:all .2s}.time-option:hover{background-color:#a9a97f1a}.time-option.selected{background-color:#a9a97f;color:#e3e3d1;font-weight:500}.time-separator-vertical{font-size:1.5rem;color:#787861;font-weight:700;align-self:flex-end;margin-bottom:10px}.time-scroll::-webkit-scrollbar{width:4px}.time-scroll::-webkit-scrollbar-track{background:#7878611a}.time-scroll::-webkit-scrollbar-thumb{background:#787861;border-radius:2px}.time-scroll::-webkit-scrollbar-thumb:hover{background:#a9a97f}.action-buttons{display:flex;justify-content:space-between;padding:15px;border-top:1px solid rgba(120,120,97,.2);gap:10px}.action-btn{padding:10px 20px;border:none;border-radius:3px;cursor:pointer;font-size:1rem;transition:all .2s}.action-btn.secondary{background:transparent;color:#787861;border:1px solid #787861}.action-btn.secondary:hover{background:#7878611a;color:#454733}.action-btn.primary{background:#a9a97f;color:#e3e3d1;border:1px solid #a9a97f}.action-btn.primary:hover{background:#969669;border-color:#969669}@media (max-width: 768px){.dropdown{min-width:320px}.datetime-content{flex-direction:column}.time-section{border-left:none;border-top:1px solid rgba(120,120,97,.2)}.time-selectors{flex-direction:row;justify-content:center;padding:15px}.time-group{gap:15px}.datetime-header{padding:10px 15px}.calendar-nav{padding:12px}.calendar-day{padding:10px 3px;font-size:.9rem}.action-buttons{padding:12px}}@media (max-width: 480px){.dropdown{min-width:280px}.time-section{min-width:auto}.time-scroll{width:45px}.time-selectors{padding:10px}}\n"] }]
|
|
751
|
+
], template: "<div class=\"datetime-container\">\r\n <div\r\n class=\"datetime-header\"\r\n [class.active]=\"isOpen()\"\r\n [class.disabled]=\"isBlocked()\"\r\n [class.readonly]=\"isBlocked()\"\r\n (click)=\"!isBlocked() && toggle()\"\r\n (keydown)=\"!isBlocked() && onKeyDown($event)\"\r\n tabindex=\"0\"\r\n >\r\n <input\r\n type=\"text\"\r\n class=\"datetime-input\"\r\n [value]=\"displayValue()\"\r\n [placeholder]=\"placeholder()\"\r\n (input)=\"onInputChange($event)\"\r\n (focus)=\"!isBlocked() && onInputFocus()\"\r\n (click)=\"$event.stopPropagation()\"\r\n [disabled]=\"isDisabled()\"\r\n [readOnly]=\"readonly()\"\r\n />\r\n\r\n <div class=\"header-icons\">\r\n @if (selectedDate()) {\r\n <span\r\n class=\"clear-icon\"\r\n (click)=\"!isBlocked() && clear(); $event.stopPropagation()\"\r\n title=\"Limpiar\"\r\n >\r\n \u00D7\r\n </span>\r\n }\r\n <span class=\"arrow\" [class.open]=\"isOpen()\"></span>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n@if (isOpen()) {\r\n<div class=\"dropdown\">\r\n <div class=\"datetime-content\">\r\n <!-- Secci\u00F3n del calendario -->\r\n <div class=\"calendar-section\">\r\n <!-- Navegaci\u00F3n del calendario -->\r\n <div class=\"calendar-nav\">\r\n <div class=\"nav-section\">\r\n <button\r\n type=\"button\"\r\n class=\"nav-btn\"\r\n (click)=\"previousYear()\"\r\n title=\"A\u00F1o anterior\"\r\n >\r\n \u2039\u2039\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"nav-btn\"\r\n (click)=\"previousMonth()\"\r\n title=\"Mes anterior\"\r\n >\r\n \u2039\r\n </button>\r\n </div>\r\n\r\n <div class=\"current-date\">{{ monthName() }} {{ currentYear() }}</div>\r\n\r\n <div class=\"nav-section\">\r\n <button\r\n type=\"button\"\r\n class=\"nav-btn\"\r\n (click)=\"nextMonth()\"\r\n title=\"Siguiente mes\"\r\n >\r\n \u203A\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"nav-btn\"\r\n (click)=\"nextYear()\"\r\n title=\"Siguiente a\u00F1o\"\r\n >\r\n \u203A\u203A\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <!-- D\u00EDas de la semana -->\r\n <div class=\"weekdays\">\r\n <div class=\"weekday\">Dom</div>\r\n <div class=\"weekday\">Lun</div>\r\n <div class=\"weekday\">Mar</div>\r\n <div class=\"weekday\">Mi\u00E9</div>\r\n <div class=\"weekday\">Jue</div>\r\n <div class=\"weekday\">Vie</div>\r\n <div class=\"weekday\">S\u00E1b</div>\r\n </div>\r\n\r\n <!-- D\u00EDas del mes -->\r\n <div class=\"calendar-grid\">\r\n @for (day of calendarDays(); track $index) {\r\n <div\r\n class=\"calendar-day\"\r\n [class.selected]=\"isDaySelected(day)\"\r\n [class.today]=\"isToday(day)\"\r\n [class.disabled]=\"isDayDisabled(day)\"\r\n [class.empty]=\"!day\"\r\n (click)=\"selectDay(day)\"\r\n >\r\n {{ day || '' }}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n <!-- Selector de tiempo (solo si mode === 'datetime') -->\r\n @if (mode() === 'datetime') {\r\n <div class=\"time-section\">\r\n <div class=\"time-header\">Horario</div>\r\n\r\n <div class=\"time-selectors\">\r\n <div class=\"time-group\">\r\n <div class=\"time-column\">\r\n <div class=\"time-label\">Hora</div>\r\n <div class=\"time-scroll\">\r\n @for (hour of hours12(); track hour.value) {\r\n <div\r\n class=\"time-option\"\r\n [class.selected]=\"hour.value === selectedHour12()\"\r\n (click)=\"setHour12(hour.value)\"\r\n >\r\n {{ hour.display }}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n <div class=\"time-separator-vertical\">:</div>\r\n\r\n <div class=\"time-column\">\r\n <div class=\"time-label\">Min</div>\r\n <div class=\"time-scroll\">\r\n @for (minute of minutes(); track minute) {\r\n <div\r\n class=\"time-option\"\r\n [class.selected]=\"minute === selectedMinute()\"\r\n (click)=\"setMinute(minute)\"\r\n >\r\n {{ minute.toString().padStart(2, '0') }}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n <div class=\"time-column\">\r\n <div class=\"time-label\">AM/PM</div>\r\n <div class=\"time-scroll ampm\">\r\n <div\r\n class=\"time-option\"\r\n [class.selected]=\"selectedAmPm() === 'AM'\"\r\n (click)=\"setAmPm('AM')\"\r\n >\r\n AM\r\n </div>\r\n <div\r\n class=\"time-option\"\r\n [class.selected]=\"selectedAmPm() === 'PM'\"\r\n (click)=\"setAmPm('PM')\"\r\n >\r\n PM\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n\r\n <!-- Botones de acci\u00F3n -->\r\n <div class=\"action-buttons\">\r\n <button type=\"button\" class=\"action-btn secondary\" (click)=\"today()\">\r\n Hoy\r\n </button>\r\n @if (mode() === 'datetime') {\r\n <button type=\"button\" class=\"action-btn primary\" (click)=\"close()\">\r\n Aceptar\r\n </button>\r\n }\r\n </div>\r\n</div>\r\n}\r\n", styles: [".datetime-container{position:relative;width:100%}.datetime-header{width:100%;border:1px solid #787861;border-radius:5px;padding:12px 15px;background-color:transparent;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:auto;transition:border-color .2s}.datetime-input{flex:1;border:none;outline:none;background:transparent;font-size:1.3rem;color:#454733;padding:0;margin:0}.datetime-input::placeholder{color:#787861;text-transform:uppercase}.datetime-input:disabled{cursor:not-allowed}.datetime-header:hover,.datetime-header:focus{outline:none;border-color:#a9a97f}.datetime-header.active{border-color:#a9a97f;outline:none}.datetime-header.disabled,.datetime-header.readonly{pointer-events:none;opacity:.6;cursor:not-allowed}.selected-text{color:#454733;font-size:1.3rem;flex:1}.selected-text.placeholder{color:#787861}.header-icons{display:flex;align-items:center;gap:8px}.clear-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center;color:#787861;font-size:1.5rem;cursor:pointer;border-radius:50%;transition:all .2s}.clear-icon:hover{background-color:#7878611a;color:#454733}.arrow{width:20px;height:20px;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='icon icon-tabler icons-tabler-outline icon-tabler-calendar-event'%3e%3cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3e%3cpath d='M4 5m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z' /%3e%3cpath d='M16 3l0 4' /%3e%3cpath d='M8 3l0 4' /%3e%3cpath d='M4 11l16 0' /%3e%3cpath d='M8 15h2v2h-2z' /%3e%3c/svg%3e\");background-repeat:no-repeat;background-size:20px;background-position:center;color:#787861;flex-shrink:0;transition:transform .2s}.arrow.open{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' class='icon icon-tabler icons-tabler-filled icon-tabler-calendar-event'%3e%3cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3e%3cpath d='M16 2a1 1 0 0 1 .993 .883l.007 .117v1h1a3 3 0 0 1 2.995 2.824l.005 .176v12a3 3 0 0 1 -2.824 2.995l-.176 .005h-12a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-12a3 3 0 0 1 2.824 -2.995l.176 -.005h1v-1a1 1 0 0 1 1.993 -.117l.007 .117v1h6v-1a1 1 0 0 1 1 -1m3 7h-14v9.625c0 .705 .386 1.286 .883 1.366l.117 .009h12c.513 0 .936 -.53 .993 -1.215l.007 -.16z' /%3e%3cpath d='M8 14h2v2h-2z' /%3e%3c/svg%3e\")}.dropdown{position:absolute;top:100%;left:0;right:0;background:#e3e3d1;border:1px solid #787861;border-top:none;border-radius:0 0 5px 5px;z-index:100000;box-shadow:0 4px 12px #00000026;min-width:400px}.datetime-content{display:flex}.calendar-section{flex:1;min-width:280px}.calendar-nav{display:flex;justify-content:space-between;align-items:center;padding:15px;border-bottom:1px solid rgba(120,120,97,.2)}.nav-section{display:flex;gap:5px}.nav-btn{background:none;border:none;color:#787861;cursor:pointer;font-size:1.2rem;padding:5px 10px;border-radius:3px;transition:all .2s}.nav-btn:hover{background-color:#a9a97f1a;color:#454733}.current-date{font-weight:500;color:#454733;font-size:1.1rem}.weekdays{display:grid;grid-template-columns:repeat(7,1fr);background:#7878611a}.weekday{padding:10px 5px;text-align:center;font-size:.9rem;font-weight:500;color:#787861}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr)}.calendar-day{padding:12px 5px;text-align:center;cursor:pointer;color:#454733;font-size:1rem;border-right:1px solid rgba(120,120,97,.1);border-bottom:1px solid rgba(120,120,97,.1);transition:all .2s}.calendar-day:hover:not(.disabled):not(.empty){background-color:#a9a97f33}.calendar-day.selected{background-color:#a9a97f;color:#e3e3d1;font-weight:500}.calendar-day.today:not(.selected){background-color:#a9a97f4d;font-weight:500}.calendar-day.disabled{color:#78786166;cursor:not-allowed}.calendar-day.empty{cursor:default}.calendar-day:nth-child(7n){border-right:none}.time-section{border-left:1px solid rgba(120,120,97,.2);min-width:140px;display:flex;flex-direction:column;background:#a9a97f0d}.time-header{padding:15px;border-bottom:1px solid rgba(120,120,97,.2);text-align:center;font-weight:500;color:#454733;background:#a9a97f1a}.time-selectors{display:flex;flex-direction:column;padding:15px;gap:20px;flex:1}.time-group{display:flex;align-items:center;gap:10px}.time-column{flex:1;display:flex;flex-direction:column;align-items:center}.time-label{font-size:.9rem;color:#787861;margin-bottom:10px;font-weight:500}.time-scroll{max-height:150px;overflow-y:auto;border:1px solid rgba(120,120,97,.2);border-radius:3px;width:50px;background:#a9a97f}.time-option{padding:8px 12px;text-align:center;cursor:pointer;color:#454733;font-size:1rem;transition:all .2s}.time-option:hover{background-color:#a9a97f1a}.time-option.selected{background-color:#a9a97f;color:#e3e3d1;font-weight:500}.time-separator-vertical{font-size:1.5rem;color:#787861;font-weight:700;align-self:flex-end;margin-bottom:10px}.time-scroll::-webkit-scrollbar{width:4px}.time-scroll::-webkit-scrollbar-track{background:#7878611a}.time-scroll::-webkit-scrollbar-thumb{background:#787861;border-radius:2px}.time-scroll::-webkit-scrollbar-thumb:hover{background:#a9a97f}.action-buttons{display:flex;justify-content:space-between;padding:15px;border-top:1px solid rgba(120,120,97,.2);gap:10px}.action-btn{padding:10px 20px;border:none;border-radius:3px;cursor:pointer;font-size:1rem;transition:all .2s}.action-btn.secondary{background:transparent;color:#787861;border:1px solid #787861}.action-btn.secondary:hover{background:#7878611a;color:#454733}.action-btn.primary{background:#a9a97f;color:#e3e3d1;border:1px solid #a9a97f}.action-btn.primary:hover{background:#969669;border-color:#969669}@media (max-width: 768px){.dropdown{min-width:320px}.datetime-content{flex-direction:column}.time-section{border-left:none;border-top:1px solid rgba(120,120,97,.2)}.time-selectors{flex-direction:row;justify-content:center;padding:15px}.time-group{gap:15px}.datetime-header{padding:10px 15px}.calendar-nav{padding:12px}.calendar-day{padding:10px 3px;font-size:.9rem}.action-buttons{padding:12px}}@media (max-width: 480px){.dropdown{min-width:280px}.time-section{min-width:auto}.time-scroll{width:45px}.time-selectors{padding:10px}}\n"] }]
|
|
752
752
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], dateChange: [{ type: i0.Output, args: ["dateChange"] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }] } });
|
|
753
753
|
|
|
754
754
|
class DateTimeFilter {
|
|
@@ -1221,7 +1221,7 @@ class DateTimeFilter {
|
|
|
1221
1221
|
useExisting: forwardRef(() => DateTimeFilter),
|
|
1222
1222
|
multi: true,
|
|
1223
1223
|
},
|
|
1224
|
-
], 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 }] });
|
|
1224
|
+
], 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:1.1rem;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;text-transform:uppercase}.chip-input-wrapper:focus-within .floating-label{opacity:.6;top:-8px}.chip-input-wrapper.has-value .floating-label{opacity:.9}.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, 1.4rem);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;text-transform:uppercase}.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 }] });
|
|
1225
1225
|
}
|
|
1226
1226
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DateTimeFilter, decorators: [{
|
|
1227
1227
|
type: Component,
|
|
@@ -1231,7 +1231,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
1231
1231
|
useExisting: forwardRef(() => DateTimeFilter),
|
|
1232
1232
|
multi: true,
|
|
1233
1233
|
},
|
|
1234
|
-
], 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"] }]
|
|
1234
|
+
], 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:1.1rem;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;text-transform:uppercase}.chip-input-wrapper:focus-within .floating-label{opacity:.6;top:-8px}.chip-input-wrapper.has-value .floating-label{opacity:.9}.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, 1.4rem);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;text-transform:uppercase}.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"] }]
|
|
1235
1235
|
}], 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 }] }] } });
|
|
1236
1236
|
|
|
1237
1237
|
class InputNumberFilter {
|
|
@@ -1302,6 +1302,24 @@ class InputNumberFilter {
|
|
|
1302
1302
|
this.onTouched();
|
|
1303
1303
|
}
|
|
1304
1304
|
}
|
|
1305
|
+
clearFilter(filterValue) {
|
|
1306
|
+
if (this.isDisabled())
|
|
1307
|
+
return;
|
|
1308
|
+
this.markAsTouched();
|
|
1309
|
+
// Limpiar el valor del filtro específico
|
|
1310
|
+
this.filterValues.update(current => {
|
|
1311
|
+
const updated = { ...current };
|
|
1312
|
+
delete updated[filterValue];
|
|
1313
|
+
return updated;
|
|
1314
|
+
});
|
|
1315
|
+
// Emitir eventos
|
|
1316
|
+
this.onChange(null);
|
|
1317
|
+
this.valueChange.emit(null);
|
|
1318
|
+
this.filterSelected.emit({
|
|
1319
|
+
filter: filterValue,
|
|
1320
|
+
value: '',
|
|
1321
|
+
});
|
|
1322
|
+
}
|
|
1305
1323
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InputNumberFilter, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1306
1324
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: InputNumberFilter, isStandalone: true, selector: "lib-input-number-filter", inputs: { filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, clearTrigger: { classPropertyName: "clearTrigger", publicName: "clearTrigger", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filterSelected: "filterSelected", valueChange: "valueChange" }, providers: [
|
|
1307
1325
|
{
|
|
@@ -1309,7 +1327,7 @@ class InputNumberFilter {
|
|
|
1309
1327
|
useExisting: forwardRef(() => InputNumberFilter),
|
|
1310
1328
|
multi: true,
|
|
1311
1329
|
},
|
|
1312
|
-
], ngImport: i0, template: "<div class=\"input-filter-container\">\r\n <div class=\"filter-chips\">\r\n @for (item of filters(); track item.value) {\r\n <div class=\"chip-input-wrapper\" [class.has-value]=\"filterValues()[item.value]\">\r\n <label class=\"floating-label\">{{ item.placeholder || item.label || 'Escribir N\u00FAmero' }}</label>\r\n <input\r\n type=\"number\"\r\n [value]=\"filterValues()[item.value] || ''\"\r\n (input)=\"onInputChange($event, item.value)\"\r\n [placeholder]=\"filterValues()[item.value] ? '' : (item.placeholder || item.label || 'Escribir N\u00FAmero')\"\r\n class=\"chip-input\"\r\n [disabled]=\"isDisabled()\"\r\n />\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n", styles: [".input-filter-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{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:
|
|
1330
|
+
], ngImport: i0, template: "<div class=\"input-filter-container\">\r\n <div class=\"filter-chips\">\r\n @for (item of filters(); track item.value) {\r\n <div class=\"chip-input-wrapper\" [class.has-value]=\"filterValues()[item.value]\">\r\n <label class=\"floating-label\">{{ item.placeholder || item.label || 'Escribir N\u00FAmero' }}</label>\r\n <input\r\n type=\"number\"\r\n [value]=\"filterValues()[item.value] || ''\"\r\n (input)=\"onInputChange($event, item.value)\"\r\n [placeholder]=\"filterValues()[item.value] ? '' : (item.placeholder || item.label || 'Escribir N\u00FAmero')\"\r\n class=\"chip-input\"\r\n [disabled]=\"isDisabled()\"\r\n />\r\n @if (filterValues()[item.value]) {\r\n <button\r\n type=\"button\"\r\n class=\"clear-button\"\r\n (click)=\"clearFilter(item.value)\"\r\n title=\"Limpiar\"\r\n >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/>\r\n <path d=\"M18 6l-12 12\" />\r\n <path d=\"M6 6l12 12\" />\r\n </svg>\r\n </button>\r\n }\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n", styles: [".input-filter-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{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:1.1rem;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;text-transform:uppercase}.chip-input-wrapper:focus-within .floating-label{opacity:.6;top:-8px}.chip-input-wrapper.has-value .floating-label{opacity:.9}.chip-input{border:none;outline:none;background:transparent;padding:6px 30px 6px 8px;height:100%;width:100%;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, 1.4rem);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;-moz-appearance:textfield;appearance:textfield}.chip-input::placeholder{color:var(--schemes-on-surface-variant, #454733);opacity:.6;text-transform:uppercase}.chip-input:disabled{cursor:not-allowed;opacity:.6}.chip-input::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0;background:transparent}.chip-input::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0;background:transparent}.icon.icon-tabler-abc{width:18px;height:18px;color:var(--on-surface-variant, #40484c)}.clear-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:1}.clear-button:hover{background-color:#7878611a;color:var(--schemes-on-surface-variant, #454733)}.clear-button:active{background-color:#78786133}.clear-button svg{width:16px;height:16px}.action-buttons{display:flex;justify-content:flex-end;gap:10px}.action-btn{padding:8px 16px;border:none;border-radius:3px;cursor:pointer;font-size:.9rem;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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }] });
|
|
1313
1331
|
}
|
|
1314
1332
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InputNumberFilter, decorators: [{
|
|
1315
1333
|
type: Component,
|
|
@@ -1319,7 +1337,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
1319
1337
|
useExisting: forwardRef(() => InputNumberFilter),
|
|
1320
1338
|
multi: true,
|
|
1321
1339
|
},
|
|
1322
|
-
], template: "<div class=\"input-filter-container\">\r\n <div class=\"filter-chips\">\r\n @for (item of filters(); track item.value) {\r\n <div class=\"chip-input-wrapper\" [class.has-value]=\"filterValues()[item.value]\">\r\n <label class=\"floating-label\">{{ item.placeholder || item.label || 'Escribir N\u00FAmero' }}</label>\r\n <input\r\n type=\"number\"\r\n [value]=\"filterValues()[item.value] || ''\"\r\n (input)=\"onInputChange($event, item.value)\"\r\n [placeholder]=\"filterValues()[item.value] ? '' : (item.placeholder || item.label || 'Escribir N\u00FAmero')\"\r\n class=\"chip-input\"\r\n [disabled]=\"isDisabled()\"\r\n />\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n", styles: [".input-filter-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{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:
|
|
1340
|
+
], template: "<div class=\"input-filter-container\">\r\n <div class=\"filter-chips\">\r\n @for (item of filters(); track item.value) {\r\n <div class=\"chip-input-wrapper\" [class.has-value]=\"filterValues()[item.value]\">\r\n <label class=\"floating-label\">{{ item.placeholder || item.label || 'Escribir N\u00FAmero' }}</label>\r\n <input\r\n type=\"number\"\r\n [value]=\"filterValues()[item.value] || ''\"\r\n (input)=\"onInputChange($event, item.value)\"\r\n [placeholder]=\"filterValues()[item.value] ? '' : (item.placeholder || item.label || 'Escribir N\u00FAmero')\"\r\n class=\"chip-input\"\r\n [disabled]=\"isDisabled()\"\r\n />\r\n @if (filterValues()[item.value]) {\r\n <button\r\n type=\"button\"\r\n class=\"clear-button\"\r\n (click)=\"clearFilter(item.value)\"\r\n title=\"Limpiar\"\r\n >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/>\r\n <path d=\"M18 6l-12 12\" />\r\n <path d=\"M6 6l12 12\" />\r\n </svg>\r\n </button>\r\n }\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n", styles: [".input-filter-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{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:1.1rem;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;text-transform:uppercase}.chip-input-wrapper:focus-within .floating-label{opacity:.6;top:-8px}.chip-input-wrapper.has-value .floating-label{opacity:.9}.chip-input{border:none;outline:none;background:transparent;padding:6px 30px 6px 8px;height:100%;width:100%;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, 1.4rem);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;-moz-appearance:textfield;appearance:textfield}.chip-input::placeholder{color:var(--schemes-on-surface-variant, #454733);opacity:.6;text-transform:uppercase}.chip-input:disabled{cursor:not-allowed;opacity:.6}.chip-input::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0;background:transparent}.chip-input::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0;background:transparent}.icon.icon-tabler-abc{width:18px;height:18px;color:var(--on-surface-variant, #40484c)}.clear-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:1}.clear-button:hover{background-color:#7878611a;color:var(--schemes-on-surface-variant, #454733)}.clear-button:active{background-color:#78786133}.clear-button svg{width:16px;height:16px}.action-buttons{display:flex;justify-content:flex-end;gap:10px}.action-btn{padding:8px 16px;border:none;border-radius:3px;cursor:pointer;font-size:.9rem;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}\n"] }]
|
|
1323
1341
|
}], ctorParameters: () => [], propDecorators: { filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }], clearTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearTrigger", required: false }] }], filterSelected: [{ type: i0.Output, args: ["filterSelected"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
|
|
1324
1342
|
|
|
1325
1343
|
class InputSelectFilter {
|
|
@@ -1523,7 +1541,7 @@ class InputSelectFilter {
|
|
|
1523
1541
|
useExisting: forwardRef(() => InputSelectFilter),
|
|
1524
1542
|
multi: true,
|
|
1525
1543
|
},
|
|
1526
|
-
], ngImport: i0, template: "<div class=\"input-filter-container\">\r\n <div class=\"filter-chips\">\r\n @for (item of filters(); track item.value) {\r\n <div class=\"chip\" [class.active]=\"activeFilterType() === item.value\" [class.has-value]=\"filterValues()[item.value]\">\r\n <label class=\"floating-label\">{{ item.placeholder || item.label || 'Seleccionar' }}</label>\r\n <div class=\"content-chip\">\r\n <input\r\n type=\"text\"\r\n class=\"chip-input\"\r\n [value]=\"filterValues()[item.value] || ''\"\r\n (input)=\"onInputChange($event, item.value)\"\r\n (focus)=\"onFocusFilter(item.value)\"\r\n (click)=\"$event.stopPropagation()\"\r\n (keydown)=\"onKeyDown($event)\"\r\n [placeholder]=\"filterValues()[item.value] ? '' : (item.placeholder || item.label || 'Seleccionar')\"\r\n [disabled]=\"isDisabled()\"\r\n />\r\n\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-list\" (click)=\"onFocusFilter(item.value)\">\r\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path d=\"M9 6l11 0\" />\r\n <path d=\"M9 12l11 0\" />\r\n <path d=\"M9 18l11 0\" />\r\n <path d=\"M5 6l0 .01\" />\r\n <path d=\"M5 12l0 .01\" />\r\n <path d=\"M5 18l0 .01\" />\r\n </svg>\r\n </div>\r\n\r\n @if (isOpen() && activeFilterType() === item.value) {\r\n <div class=\"dropdown\">\r\n <div class=\"options-list\">\r\n @for (option of filteredOptions(); track option.value) {\r\n <div class=\"option-item\" (click)=\"selectOption(option)\">\r\n {{ option.label }}\r\n </div>\r\n }\r\n @if (filteredOptions().length === 0) {\r\n <div class=\"no-options\">No hay opciones</div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n", styles: [".input-filter-container{position:relative;width:100%}.filter-chips{display:flex;gap:10px;padding:8px;border-radius:12px;position:relative}.chip{border-radius:8px;border-style:solid;border-color:var(--schemes-outline-variant, #c0c7cd);border-width:1px;display:flex;flex-direction:row;align-items:center;justify-content:center;flex-shrink:0;height:32px;cursor:pointer;transition:.2s ease;position:relative}.chip:hover{background-color:#ececcf}.chip.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:
|
|
1544
|
+
], ngImport: i0, template: "<div class=\"input-filter-container\">\r\n <div class=\"filter-chips\">\r\n @for (item of filters(); track item.value) {\r\n <div class=\"chip\" [class.active]=\"activeFilterType() === item.value\" [class.has-value]=\"filterValues()[item.value]\">\r\n <label class=\"floating-label\">{{ item.placeholder || item.label || 'Seleccionar' }}</label>\r\n <div class=\"content-chip\">\r\n <input\r\n type=\"text\"\r\n class=\"chip-input\"\r\n [value]=\"filterValues()[item.value] || ''\"\r\n (input)=\"onInputChange($event, item.value)\"\r\n (focus)=\"onFocusFilter(item.value)\"\r\n (click)=\"$event.stopPropagation()\"\r\n (keydown)=\"onKeyDown($event)\"\r\n [placeholder]=\"filterValues()[item.value] ? '' : (item.placeholder || item.label || 'Seleccionar')\"\r\n [disabled]=\"isDisabled()\"\r\n />\r\n\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-list\" (click)=\"onFocusFilter(item.value)\">\r\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path d=\"M9 6l11 0\" />\r\n <path d=\"M9 12l11 0\" />\r\n <path d=\"M9 18l11 0\" />\r\n <path d=\"M5 6l0 .01\" />\r\n <path d=\"M5 12l0 .01\" />\r\n <path d=\"M5 18l0 .01\" />\r\n </svg>\r\n </div>\r\n\r\n @if (isOpen() && activeFilterType() === item.value) {\r\n <div class=\"dropdown\">\r\n <div class=\"options-list\">\r\n @for (option of filteredOptions(); track option.value) {\r\n <div class=\"option-item\" (click)=\"selectOption(option)\">\r\n {{ option.label }}\r\n </div>\r\n }\r\n @if (filteredOptions().length === 0) {\r\n <div class=\"no-options\">No hay opciones</div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n", styles: [".input-filter-container{position:relative;width:100%}.filter-chips{display:flex;gap:10px;padding:8px;border-radius:12px;position:relative}.chip{border-radius:8px;border-style:solid;border-color:var(--schemes-outline-variant, #c0c7cd);border-width:1px;display:flex;flex-direction:row;align-items:center;justify-content:center;flex-shrink:0;height:32px;cursor:pointer;transition:.2s ease;position:relative}.chip:hover{background-color:#ececcf}.chip.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:1.1rem;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;text-transform:uppercase}.chip-input-wrapper:focus-within .floating-label{opacity:.6;top:-8px}.chip.has-value .floating-label{opacity:.9}.content-chip{padding:0 8px;display:flex;flex-direction:row;gap:8px;align-items:center;justify-items:center;height:32px}.label-text{display:none}.chip-input{border:none;outline:none;background:transparent;height:100%;width:100%;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, 1.4rem);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);text-transform:uppercase}.chip-input::placeholder{color:var(--schemes-on-surface-variant, #454733);opacity:.6;text-transform:uppercase}.chip-input:disabled{cursor:not-allowed;opacity:.6}.icon{width:18px;height:18px;color:var(--on-surface-variant, #40484c)}.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:200px;padding:0;overflow:hidden}.options-list{display:flex;flex-direction:column;max-height:200px;overflow-y:auto}.option-item{padding:10px 15px;cursor:pointer;color:#454733;font-size:.9rem;text-transform:uppercase;transition:background-color .2s}.option-item:hover{background-color:#7878611a}.no-options{padding:10px 15px;color:#787861;font-size:.9rem;font-style:italic}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }] });
|
|
1527
1545
|
}
|
|
1528
1546
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InputSelectFilter, decorators: [{
|
|
1529
1547
|
type: Component,
|
|
@@ -1533,7 +1551,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
1533
1551
|
useExisting: forwardRef(() => InputSelectFilter),
|
|
1534
1552
|
multi: true,
|
|
1535
1553
|
},
|
|
1536
|
-
], template: "<div class=\"input-filter-container\">\r\n <div class=\"filter-chips\">\r\n @for (item of filters(); track item.value) {\r\n <div class=\"chip\" [class.active]=\"activeFilterType() === item.value\" [class.has-value]=\"filterValues()[item.value]\">\r\n <label class=\"floating-label\">{{ item.placeholder || item.label || 'Seleccionar' }}</label>\r\n <div class=\"content-chip\">\r\n <input\r\n type=\"text\"\r\n class=\"chip-input\"\r\n [value]=\"filterValues()[item.value] || ''\"\r\n (input)=\"onInputChange($event, item.value)\"\r\n (focus)=\"onFocusFilter(item.value)\"\r\n (click)=\"$event.stopPropagation()\"\r\n (keydown)=\"onKeyDown($event)\"\r\n [placeholder]=\"filterValues()[item.value] ? '' : (item.placeholder || item.label || 'Seleccionar')\"\r\n [disabled]=\"isDisabled()\"\r\n />\r\n\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-list\" (click)=\"onFocusFilter(item.value)\">\r\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path d=\"M9 6l11 0\" />\r\n <path d=\"M9 12l11 0\" />\r\n <path d=\"M9 18l11 0\" />\r\n <path d=\"M5 6l0 .01\" />\r\n <path d=\"M5 12l0 .01\" />\r\n <path d=\"M5 18l0 .01\" />\r\n </svg>\r\n </div>\r\n\r\n @if (isOpen() && activeFilterType() === item.value) {\r\n <div class=\"dropdown\">\r\n <div class=\"options-list\">\r\n @for (option of filteredOptions(); track option.value) {\r\n <div class=\"option-item\" (click)=\"selectOption(option)\">\r\n {{ option.label }}\r\n </div>\r\n }\r\n @if (filteredOptions().length === 0) {\r\n <div class=\"no-options\">No hay opciones</div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n", styles: [".input-filter-container{position:relative;width:100%}.filter-chips{display:flex;gap:10px;padding:8px;border-radius:12px;position:relative}.chip{border-radius:8px;border-style:solid;border-color:var(--schemes-outline-variant, #c0c7cd);border-width:1px;display:flex;flex-direction:row;align-items:center;justify-content:center;flex-shrink:0;height:32px;cursor:pointer;transition:.2s ease;position:relative}.chip:hover{background-color:#ececcf}.chip.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:
|
|
1554
|
+
], template: "<div class=\"input-filter-container\">\r\n <div class=\"filter-chips\">\r\n @for (item of filters(); track item.value) {\r\n <div class=\"chip\" [class.active]=\"activeFilterType() === item.value\" [class.has-value]=\"filterValues()[item.value]\">\r\n <label class=\"floating-label\">{{ item.placeholder || item.label || 'Seleccionar' }}</label>\r\n <div class=\"content-chip\">\r\n <input\r\n type=\"text\"\r\n class=\"chip-input\"\r\n [value]=\"filterValues()[item.value] || ''\"\r\n (input)=\"onInputChange($event, item.value)\"\r\n (focus)=\"onFocusFilter(item.value)\"\r\n (click)=\"$event.stopPropagation()\"\r\n (keydown)=\"onKeyDown($event)\"\r\n [placeholder]=\"filterValues()[item.value] ? '' : (item.placeholder || item.label || 'Seleccionar')\"\r\n [disabled]=\"isDisabled()\"\r\n />\r\n\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-list\" (click)=\"onFocusFilter(item.value)\">\r\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path d=\"M9 6l11 0\" />\r\n <path d=\"M9 12l11 0\" />\r\n <path d=\"M9 18l11 0\" />\r\n <path d=\"M5 6l0 .01\" />\r\n <path d=\"M5 12l0 .01\" />\r\n <path d=\"M5 18l0 .01\" />\r\n </svg>\r\n </div>\r\n\r\n @if (isOpen() && activeFilterType() === item.value) {\r\n <div class=\"dropdown\">\r\n <div class=\"options-list\">\r\n @for (option of filteredOptions(); track option.value) {\r\n <div class=\"option-item\" (click)=\"selectOption(option)\">\r\n {{ option.label }}\r\n </div>\r\n }\r\n @if (filteredOptions().length === 0) {\r\n <div class=\"no-options\">No hay opciones</div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n", styles: [".input-filter-container{position:relative;width:100%}.filter-chips{display:flex;gap:10px;padding:8px;border-radius:12px;position:relative}.chip{border-radius:8px;border-style:solid;border-color:var(--schemes-outline-variant, #c0c7cd);border-width:1px;display:flex;flex-direction:row;align-items:center;justify-content:center;flex-shrink:0;height:32px;cursor:pointer;transition:.2s ease;position:relative}.chip:hover{background-color:#ececcf}.chip.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:1.1rem;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;text-transform:uppercase}.chip-input-wrapper:focus-within .floating-label{opacity:.6;top:-8px}.chip.has-value .floating-label{opacity:.9}.content-chip{padding:0 8px;display:flex;flex-direction:row;gap:8px;align-items:center;justify-items:center;height:32px}.label-text{display:none}.chip-input{border:none;outline:none;background:transparent;height:100%;width:100%;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, 1.4rem);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);text-transform:uppercase}.chip-input::placeholder{color:var(--schemes-on-surface-variant, #454733);opacity:.6;text-transform:uppercase}.chip-input:disabled{cursor:not-allowed;opacity:.6}.icon{width:18px;height:18px;color:var(--on-surface-variant, #40484c)}.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:200px;padding:0;overflow:hidden}.options-list{display:flex;flex-direction:column;max-height:200px;overflow-y:auto}.option-item{padding:10px 15px;cursor:pointer;color:#454733;font-size:.9rem;text-transform:uppercase;transition:background-color .2s}.option-item:hover{background-color:#7878611a}.no-options{padding:10px 15px;color:#787861;font-size:.9rem;font-style:italic}\n"] }]
|
|
1537
1555
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }], clearTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearTrigger", required: false }] }], filterSelected: [{ type: i0.Output, args: ["filterSelected"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
|
|
1538
1556
|
|
|
1539
1557
|
class InputTextFilter {
|
|
@@ -1629,7 +1647,7 @@ class InputTextFilter {
|
|
|
1629
1647
|
useExisting: forwardRef(() => InputTextFilter),
|
|
1630
1648
|
multi: true,
|
|
1631
1649
|
},
|
|
1632
|
-
], ngImport: i0, template: "<div class=\"input-filter-container\">\r\n <div class=\"filter-chips\">\r\n @for (item of filters(); track item.value) {\r\n <div class=\"chip-input-wrapper\" [class.has-value]=\"filterValues()[item.value]\">\r\n <label class=\"floating-label\">{{ item.placeholder || item.label || 'Escribir' }}</label>\r\n <input\r\n type=\"text\"\r\n [value]=\"filterValues()[item.value] || ''\"\r\n (input)=\"onInputChange($event, item.value)\"\r\n [placeholder]=\"filterValues()[item.value] ? '' : (item.placeholder || item.label || 'Escribir')\"\r\n class=\"chip-input\"\r\n [disabled]=\"isDisabled()\"\r\n />\r\n @if (filterValues()[item.value]) {\r\n <button\r\n type=\"button\"\r\n class=\"clear-button\"\r\n (click)=\"clearFilter(item.value)\"\r\n title=\"Limpiar\"\r\n >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/>\r\n <path d=\"M18 6l-12 12\" />\r\n <path d=\"M6 6l12 12\" />\r\n </svg>\r\n </button>\r\n }\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n", styles: [".input-filter-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{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:
|
|
1650
|
+
], ngImport: i0, template: "<div class=\"input-filter-container\">\r\n <div class=\"filter-chips\">\r\n @for (item of filters(); track item.value) {\r\n <div class=\"chip-input-wrapper\" [class.has-value]=\"filterValues()[item.value]\">\r\n <label class=\"floating-label\">{{ item.placeholder || item.label || 'Escribir' }}</label>\r\n <input\r\n type=\"text\"\r\n [value]=\"filterValues()[item.value] || ''\"\r\n (input)=\"onInputChange($event, item.value)\"\r\n [placeholder]=\"filterValues()[item.value] ? '' : (item.placeholder || item.label || 'Escribir')\"\r\n class=\"chip-input\"\r\n [disabled]=\"isDisabled()\"\r\n />\r\n @if (filterValues()[item.value]) {\r\n <button\r\n type=\"button\"\r\n class=\"clear-button\"\r\n (click)=\"clearFilter(item.value)\"\r\n title=\"Limpiar\"\r\n >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/>\r\n <path d=\"M18 6l-12 12\" />\r\n <path d=\"M6 6l12 12\" />\r\n </svg>\r\n </button>\r\n }\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n", styles: [".input-filter-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{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:1.1rem;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;text-transform:uppercase}.chip-input-wrapper:focus-within .floating-label{opacity:.6;top:-8px}.chip-input-wrapper.has-value .floating-label{opacity:.9}.chip-input{border:none;outline:none;background:transparent;padding:6px 35px 6px 8px;height:100%;width:100%;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, 1.4rem);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;text-transform:uppercase}.chip-input::placeholder{color:var(--schemes-on-surface-variant, #454733);opacity:.6;text-transform:uppercase}.chip-input:disabled{cursor:not-allowed;opacity:.6}.icon.icon-tabler-abc{width:18px;height:18px;color:var(--on-surface-variant, #40484c)}.clear-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:1}.clear-button:hover{background-color:#7878611a;color:var(--schemes-on-surface-variant, #454733)}.clear-button:active{background-color:#78786133}.clear-button svg{width:16px;height:16px}.action-buttons{display:flex;justify-content:flex-end;gap:10px}.action-btn{padding:8px 16px;border:none;border-radius:3px;cursor:pointer;font-size:.9rem;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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }] });
|
|
1633
1651
|
}
|
|
1634
1652
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InputTextFilter, decorators: [{
|
|
1635
1653
|
type: Component,
|
|
@@ -1639,7 +1657,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
1639
1657
|
useExisting: forwardRef(() => InputTextFilter),
|
|
1640
1658
|
multi: true,
|
|
1641
1659
|
},
|
|
1642
|
-
], template: "<div class=\"input-filter-container\">\r\n <div class=\"filter-chips\">\r\n @for (item of filters(); track item.value) {\r\n <div class=\"chip-input-wrapper\" [class.has-value]=\"filterValues()[item.value]\">\r\n <label class=\"floating-label\">{{ item.placeholder || item.label || 'Escribir' }}</label>\r\n <input\r\n type=\"text\"\r\n [value]=\"filterValues()[item.value] || ''\"\r\n (input)=\"onInputChange($event, item.value)\"\r\n [placeholder]=\"filterValues()[item.value] ? '' : (item.placeholder || item.label || 'Escribir')\"\r\n class=\"chip-input\"\r\n [disabled]=\"isDisabled()\"\r\n />\r\n @if (filterValues()[item.value]) {\r\n <button\r\n type=\"button\"\r\n class=\"clear-button\"\r\n (click)=\"clearFilter(item.value)\"\r\n title=\"Limpiar\"\r\n >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/>\r\n <path d=\"M18 6l-12 12\" />\r\n <path d=\"M6 6l12 12\" />\r\n </svg>\r\n </button>\r\n }\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n", styles: [".input-filter-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{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:
|
|
1660
|
+
], template: "<div class=\"input-filter-container\">\r\n <div class=\"filter-chips\">\r\n @for (item of filters(); track item.value) {\r\n <div class=\"chip-input-wrapper\" [class.has-value]=\"filterValues()[item.value]\">\r\n <label class=\"floating-label\">{{ item.placeholder || item.label || 'Escribir' }}</label>\r\n <input\r\n type=\"text\"\r\n [value]=\"filterValues()[item.value] || ''\"\r\n (input)=\"onInputChange($event, item.value)\"\r\n [placeholder]=\"filterValues()[item.value] ? '' : (item.placeholder || item.label || 'Escribir')\"\r\n class=\"chip-input\"\r\n [disabled]=\"isDisabled()\"\r\n />\r\n @if (filterValues()[item.value]) {\r\n <button\r\n type=\"button\"\r\n class=\"clear-button\"\r\n (click)=\"clearFilter(item.value)\"\r\n title=\"Limpiar\"\r\n >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/>\r\n <path d=\"M18 6l-12 12\" />\r\n <path d=\"M6 6l12 12\" />\r\n </svg>\r\n </button>\r\n }\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n", styles: [".input-filter-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{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:1.1rem;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;text-transform:uppercase}.chip-input-wrapper:focus-within .floating-label{opacity:.6;top:-8px}.chip-input-wrapper.has-value .floating-label{opacity:.9}.chip-input{border:none;outline:none;background:transparent;padding:6px 35px 6px 8px;height:100%;width:100%;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, 1.4rem);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;text-transform:uppercase}.chip-input::placeholder{color:var(--schemes-on-surface-variant, #454733);opacity:.6;text-transform:uppercase}.chip-input:disabled{cursor:not-allowed;opacity:.6}.icon.icon-tabler-abc{width:18px;height:18px;color:var(--on-surface-variant, #40484c)}.clear-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:1}.clear-button:hover{background-color:#7878611a;color:var(--schemes-on-surface-variant, #454733)}.clear-button:active{background-color:#78786133}.clear-button svg{width:16px;height:16px}.action-buttons{display:flex;justify-content:flex-end;gap:10px}.action-btn{padding:8px 16px;border:none;border-radius:3px;cursor:pointer;font-size:.9rem;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}\n"] }]
|
|
1643
1661
|
}], ctorParameters: () => [], propDecorators: { filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }], clearTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearTrigger", required: false }] }], filterSelected: [{ type: i0.Output, args: ["filterSelected"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
|
|
1644
1662
|
|
|
1645
1663
|
class Input {
|
|
@@ -1792,7 +1810,7 @@ class SelectCustomSearch {
|
|
|
1792
1810
|
useExisting: forwardRef(() => SelectCustomSearch),
|
|
1793
1811
|
multi: true,
|
|
1794
1812
|
},
|
|
1795
|
-
], ngImport: i0, template: "<div class=\"select-container\">\r\n <div\r\n class=\"select-header\"\r\n [class.active]=\"isOpen()\"\r\n [class.disabled]=\"isBlocked()\"\r\n [class.readonly]=\"isBlocked()\"\r\n (click)=\"!isBlocked() && toggle()\"\r\n (keydown)=\"!isBlocked() && onKeyDown($event)\"\r\n tabindex=\"0\"\r\n >\r\n <span class=\"selected-text\" [class.placeholder]=\"!selectedOption()\">\r\n {{ selectedOption()?.label || placeholder() }}\r\n </span>\r\n\r\n <span class=\"arrow\" [class.open]=\"isOpen()\"></span>\r\n </div>\r\n\r\n @if (isOpen()) {\r\n <div class=\"dropdown\">\r\n <input\r\n type=\"text\"\r\n class=\"search-input\"\r\n [value]=\"searchTerm()\"\r\n placeholder=\"Buscar...\"\r\n (input)=\"!isBlocked() &&onSearch($event)\"\r\n (keydown)=\"!isBlocked() && onKeyDown($event)\"\r\n />\r\n\r\n @if (filteredOptions().length > 0) {\r\n <div class=\"options\">\r\n @for (option of filteredOptions(); track option.value) {\r\n <div\r\n class=\"option\"\r\n [class.selected]=\"option.value === selectedValue()\"\r\n (click)=\"!isBlocked() && selectOption(option)\"\r\n [attr.disabled]=\"isBlocked()\"\r\n >\r\n {{ option.label }}\r\n </div>\r\n }\r\n </div>\r\n } @else {\r\n <div class=\"no-results\">No se encontraron resultados</div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [".select-container{position:relative;width:100%}.select-header{width:100%;border:1px solid #787861;border-radius:5px;padding:15px;background-color:transparent;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:auto}.select-header:hover,.select-header:focus{outline:none;border-color:#a9a97f}.select-header.active{border-color:#a9a97f;outline:none}.select-header.disabled,.select-header.readonly{cursor:not-allowed;opacity:.6;pointer-events:none}.selected-text{color:#454733;font-size:1.3rem}.selected-text.placeholder{color:#787861}.arrow{width:15px;height:15px;background-image:url(\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\");background-repeat:no-repeat;background-size:15px;background-position:center;color:#787861;flex-shrink:0;transition:transform .2s}.arrow.open{transform:rotate(180deg)}.dropdown{position:absolute;top:100%;left:0;right:0;background:#e3e3d1;border:1px solid #787861;border-top:none;border-radius:0 0 5px 5px;max-height:250px;overflow:hidden;z-index:100000;box-shadow:0 2px 8px #0000001a}.search-input{width:100%;border:none;border-bottom:1px solid #787861;border-radius:0;padding:15px;background-color:transparent;outline:none;font-size:inherit;color:#454733;font-size:1.3rem}.search-input::placeholder{color:#787861}.search-input:focus{outline:none;border-bottom-color:#a9a97f}.options{max-height:180px;overflow-y:auto;background:#e3e3d1}.option{padding:15px;cursor:pointer;border-bottom:1px solid rgba(120,120,97,.2);color:#454733;background:#e3e3d1;font-size:1.3rem}.option:hover{background-color:#a9a97f1a;color:#454733}.option.selected{background-color:#a9a97f;color:#e3e3d1;font-weight:500}.option:last-child{border-bottom:none}.no-results{padding:15px;text-align:center;color:#787861;font-style:italic;background:#e3e3d1;font-size:1.3rem}.options::-webkit-scrollbar{width:6px}.options::-webkit-scrollbar-track{background:#7878611a}.options::-webkit-scrollbar-thumb{background:#787861;border-radius:3px}.options::-webkit-scrollbar-thumb:hover{background:#a9a97f}@media (max-width: 768px){.select-header,.search-input,.option{padding:12px 15px}}\n"] });
|
|
1813
|
+
], ngImport: i0, template: "<div class=\"select-container\">\r\n <div\r\n class=\"select-header\"\r\n [class.active]=\"isOpen()\"\r\n [class.disabled]=\"isBlocked()\"\r\n [class.readonly]=\"isBlocked()\"\r\n (click)=\"!isBlocked() && toggle()\"\r\n (keydown)=\"!isBlocked() && onKeyDown($event)\"\r\n tabindex=\"0\"\r\n >\r\n <span class=\"selected-text\" [class.placeholder]=\"!selectedOption()\">\r\n {{ selectedOption()?.label || placeholder() }}\r\n </span>\r\n\r\n <span class=\"arrow\" [class.open]=\"isOpen()\"></span>\r\n </div>\r\n\r\n @if (isOpen()) {\r\n <div class=\"dropdown\">\r\n <input\r\n type=\"text\"\r\n class=\"search-input\"\r\n [value]=\"searchTerm()\"\r\n placeholder=\"Buscar...\"\r\n (input)=\"!isBlocked() &&onSearch($event)\"\r\n (keydown)=\"!isBlocked() && onKeyDown($event)\"\r\n />\r\n\r\n @if (filteredOptions().length > 0) {\r\n <div class=\"options\">\r\n @for (option of filteredOptions(); track option.value) {\r\n <div\r\n class=\"option\"\r\n [class.selected]=\"option.value === selectedValue()\"\r\n (click)=\"!isBlocked() && selectOption(option)\"\r\n [attr.disabled]=\"isBlocked()\"\r\n >\r\n {{ option.label }}\r\n </div>\r\n }\r\n </div>\r\n } @else {\r\n <div class=\"no-results\">No se encontraron resultados</div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [".select-container{position:relative;width:100%}.select-header{width:100%;border:1px solid #787861;border-radius:5px;padding:15px;background-color:transparent;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:auto}.select-header:hover,.select-header:focus{outline:none;border-color:#a9a97f}.select-header.active{border-color:#a9a97f;outline:none}.select-header.disabled,.select-header.readonly{cursor:not-allowed;opacity:.6;pointer-events:none}.selected-text{color:#454733;font-size:1.3rem;text-transform:uppercase}.selected-text.placeholder{color:#787861;text-transform:uppercase}.arrow{width:15px;height:15px;background-image:url(\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\");background-repeat:no-repeat;background-size:15px;background-position:center;color:#787861;flex-shrink:0;transition:transform .2s}.arrow.open{transform:rotate(180deg)}.dropdown{position:absolute;top:100%;left:0;right:0;background:#e3e3d1;border:1px solid #787861;border-top:none;border-radius:0 0 5px 5px;max-height:250px;overflow:hidden;z-index:100000;box-shadow:0 2px 8px #0000001a}.search-input{width:100%;border:none;border-bottom:1px solid #787861;border-radius:0;padding:15px;background-color:transparent;outline:none;font-size:inherit;color:#454733;font-size:1.3rem}.search-input::placeholder{color:#787861;text-transform:uppercase}.search-input:focus{outline:none;border-bottom-color:#a9a97f}.options{max-height:180px;overflow-y:auto;background:#e3e3d1}.option{padding:15px;cursor:pointer;border-bottom:1px solid rgba(120,120,97,.2);color:#454733;background:#e3e3d1;font-size:1.3rem;text-transform:uppercase}.option:hover{background-color:#a9a97f1a;color:#454733}.option.selected{background-color:#a9a97f;color:#e3e3d1;font-weight:500}.option:last-child{border-bottom:none}.no-results{padding:15px;text-align:center;color:#787861;font-style:italic;background:#e3e3d1;font-size:1.3rem}.options::-webkit-scrollbar{width:6px}.options::-webkit-scrollbar-track{background:#7878611a}.options::-webkit-scrollbar-thumb{background:#787861;border-radius:3px}.options::-webkit-scrollbar-thumb:hover{background:#a9a97f}@media (max-width: 768px){.select-header,.search-input,.option{padding:12px 15px}}\n"] });
|
|
1796
1814
|
}
|
|
1797
1815
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SelectCustomSearch, decorators: [{
|
|
1798
1816
|
type: Component,
|
|
@@ -1802,7 +1820,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
1802
1820
|
useExisting: forwardRef(() => SelectCustomSearch),
|
|
1803
1821
|
multi: true,
|
|
1804
1822
|
},
|
|
1805
|
-
], template: "<div class=\"select-container\">\r\n <div\r\n class=\"select-header\"\r\n [class.active]=\"isOpen()\"\r\n [class.disabled]=\"isBlocked()\"\r\n [class.readonly]=\"isBlocked()\"\r\n (click)=\"!isBlocked() && toggle()\"\r\n (keydown)=\"!isBlocked() && onKeyDown($event)\"\r\n tabindex=\"0\"\r\n >\r\n <span class=\"selected-text\" [class.placeholder]=\"!selectedOption()\">\r\n {{ selectedOption()?.label || placeholder() }}\r\n </span>\r\n\r\n <span class=\"arrow\" [class.open]=\"isOpen()\"></span>\r\n </div>\r\n\r\n @if (isOpen()) {\r\n <div class=\"dropdown\">\r\n <input\r\n type=\"text\"\r\n class=\"search-input\"\r\n [value]=\"searchTerm()\"\r\n placeholder=\"Buscar...\"\r\n (input)=\"!isBlocked() &&onSearch($event)\"\r\n (keydown)=\"!isBlocked() && onKeyDown($event)\"\r\n />\r\n\r\n @if (filteredOptions().length > 0) {\r\n <div class=\"options\">\r\n @for (option of filteredOptions(); track option.value) {\r\n <div\r\n class=\"option\"\r\n [class.selected]=\"option.value === selectedValue()\"\r\n (click)=\"!isBlocked() && selectOption(option)\"\r\n [attr.disabled]=\"isBlocked()\"\r\n >\r\n {{ option.label }}\r\n </div>\r\n }\r\n </div>\r\n } @else {\r\n <div class=\"no-results\">No se encontraron resultados</div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [".select-container{position:relative;width:100%}.select-header{width:100%;border:1px solid #787861;border-radius:5px;padding:15px;background-color:transparent;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:auto}.select-header:hover,.select-header:focus{outline:none;border-color:#a9a97f}.select-header.active{border-color:#a9a97f;outline:none}.select-header.disabled,.select-header.readonly{cursor:not-allowed;opacity:.6;pointer-events:none}.selected-text{color:#454733;font-size:1.3rem}.selected-text.placeholder{color:#787861}.arrow{width:15px;height:15px;background-image:url(\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\");background-repeat:no-repeat;background-size:15px;background-position:center;color:#787861;flex-shrink:0;transition:transform .2s}.arrow.open{transform:rotate(180deg)}.dropdown{position:absolute;top:100%;left:0;right:0;background:#e3e3d1;border:1px solid #787861;border-top:none;border-radius:0 0 5px 5px;max-height:250px;overflow:hidden;z-index:100000;box-shadow:0 2px 8px #0000001a}.search-input{width:100%;border:none;border-bottom:1px solid #787861;border-radius:0;padding:15px;background-color:transparent;outline:none;font-size:inherit;color:#454733;font-size:1.3rem}.search-input::placeholder{color:#787861}.search-input:focus{outline:none;border-bottom-color:#a9a97f}.options{max-height:180px;overflow-y:auto;background:#e3e3d1}.option{padding:15px;cursor:pointer;border-bottom:1px solid rgba(120,120,97,.2);color:#454733;background:#e3e3d1;font-size:1.3rem}.option:hover{background-color:#a9a97f1a;color:#454733}.option.selected{background-color:#a9a97f;color:#e3e3d1;font-weight:500}.option:last-child{border-bottom:none}.no-results{padding:15px;text-align:center;color:#787861;font-style:italic;background:#e3e3d1;font-size:1.3rem}.options::-webkit-scrollbar{width:6px}.options::-webkit-scrollbar-track{background:#7878611a}.options::-webkit-scrollbar-thumb{background:#787861;border-radius:3px}.options::-webkit-scrollbar-thumb:hover{background:#a9a97f}@media (max-width: 768px){.select-header,.search-input,.option{padding:12px 15px}}\n"] }]
|
|
1823
|
+
], template: "<div class=\"select-container\">\r\n <div\r\n class=\"select-header\"\r\n [class.active]=\"isOpen()\"\r\n [class.disabled]=\"isBlocked()\"\r\n [class.readonly]=\"isBlocked()\"\r\n (click)=\"!isBlocked() && toggle()\"\r\n (keydown)=\"!isBlocked() && onKeyDown($event)\"\r\n tabindex=\"0\"\r\n >\r\n <span class=\"selected-text\" [class.placeholder]=\"!selectedOption()\">\r\n {{ selectedOption()?.label || placeholder() }}\r\n </span>\r\n\r\n <span class=\"arrow\" [class.open]=\"isOpen()\"></span>\r\n </div>\r\n\r\n @if (isOpen()) {\r\n <div class=\"dropdown\">\r\n <input\r\n type=\"text\"\r\n class=\"search-input\"\r\n [value]=\"searchTerm()\"\r\n placeholder=\"Buscar...\"\r\n (input)=\"!isBlocked() &&onSearch($event)\"\r\n (keydown)=\"!isBlocked() && onKeyDown($event)\"\r\n />\r\n\r\n @if (filteredOptions().length > 0) {\r\n <div class=\"options\">\r\n @for (option of filteredOptions(); track option.value) {\r\n <div\r\n class=\"option\"\r\n [class.selected]=\"option.value === selectedValue()\"\r\n (click)=\"!isBlocked() && selectOption(option)\"\r\n [attr.disabled]=\"isBlocked()\"\r\n >\r\n {{ option.label }}\r\n </div>\r\n }\r\n </div>\r\n } @else {\r\n <div class=\"no-results\">No se encontraron resultados</div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [".select-container{position:relative;width:100%}.select-header{width:100%;border:1px solid #787861;border-radius:5px;padding:15px;background-color:transparent;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:auto}.select-header:hover,.select-header:focus{outline:none;border-color:#a9a97f}.select-header.active{border-color:#a9a97f;outline:none}.select-header.disabled,.select-header.readonly{cursor:not-allowed;opacity:.6;pointer-events:none}.selected-text{color:#454733;font-size:1.3rem;text-transform:uppercase}.selected-text.placeholder{color:#787861;text-transform:uppercase}.arrow{width:15px;height:15px;background-image:url(\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\");background-repeat:no-repeat;background-size:15px;background-position:center;color:#787861;flex-shrink:0;transition:transform .2s}.arrow.open{transform:rotate(180deg)}.dropdown{position:absolute;top:100%;left:0;right:0;background:#e3e3d1;border:1px solid #787861;border-top:none;border-radius:0 0 5px 5px;max-height:250px;overflow:hidden;z-index:100000;box-shadow:0 2px 8px #0000001a}.search-input{width:100%;border:none;border-bottom:1px solid #787861;border-radius:0;padding:15px;background-color:transparent;outline:none;font-size:inherit;color:#454733;font-size:1.3rem}.search-input::placeholder{color:#787861;text-transform:uppercase}.search-input:focus{outline:none;border-bottom-color:#a9a97f}.options{max-height:180px;overflow-y:auto;background:#e3e3d1}.option{padding:15px;cursor:pointer;border-bottom:1px solid rgba(120,120,97,.2);color:#454733;background:#e3e3d1;font-size:1.3rem;text-transform:uppercase}.option:hover{background-color:#a9a97f1a;color:#454733}.option.selected{background-color:#a9a97f;color:#e3e3d1;font-weight:500}.option:last-child{border-bottom:none}.no-results{padding:15px;text-align:center;color:#787861;font-style:italic;background:#e3e3d1;font-size:1.3rem}.options::-webkit-scrollbar{width:6px}.options::-webkit-scrollbar-track{background:#7878611a}.options::-webkit-scrollbar-thumb{background:#787861;border-radius:3px}.options::-webkit-scrollbar-thumb:hover{background:#a9a97f}@media (max-width: 768px){.select-header,.search-input,.option{padding:12px 15px}}\n"] }]
|
|
1806
1824
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], onDocumentClick: [{
|
|
1807
1825
|
type: HostListener,
|
|
1808
1826
|
args: ['document:click', ['$event']]
|
|
@@ -1914,12 +1932,20 @@ class DynamicFormFields {
|
|
|
1914
1932
|
}
|
|
1915
1933
|
onCancel() {
|
|
1916
1934
|
}
|
|
1935
|
+
onUppercaseInput(event, fieldType, key) {
|
|
1936
|
+
if (['email', 'password'].includes(fieldType))
|
|
1937
|
+
return;
|
|
1938
|
+
const input = event.target;
|
|
1939
|
+
const value = input.value.toUpperCase();
|
|
1940
|
+
input.value = value;
|
|
1941
|
+
this.form().get(key)?.setValue(value, { emitEvent: false });
|
|
1942
|
+
}
|
|
1917
1943
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DynamicFormFields, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1918
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DynamicFormFields, isStandalone: true, selector: "lib-dynamic-form-fields", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (form()) {\r\n<form class=\"form\" [formGroup]=\"form()\" [class.form--compact]=\"compact()\">\r\n @for (sec of sections(); track $index) {\r\n <section class=\"section\">\r\n @if (sec.title) {\r\n <h3 class=\"section-title\">{{ sec.title }}</h3>\r\n } @if (sec.description) {\r\n <p class=\"section-desc\">{{ sec.description }}</p>\r\n }\r\n\r\n <div class=\"grid\">\r\n @for (f of sec.fields; track f.key) {\r\n <div class=\"col\" [style.--col-span]=\"f.col || 6\">\r\n @if(f.label) {\r\n <label\r\n [class.label-radio]=\"f.type === 'radio'\"\r\n [class.label-checkbox]=\"f.type === 'checkbox'\"\r\n [class.label-disabled]=\"f.readonly || f.disabled\"\r\n class=\"label\"\r\n >\r\n {{ f.label }} </label\r\n >} @if (['text','number','email', 'password', 'time'].includes(f.type))\r\n {\r\n <input\r\n class=\"input\"\r\n [type]=\"f.type\"\r\n [placeholder]=\"f.placeholder\"\r\n [formControlName]=\"f.key\"\r\n [disabled]=\"f.disabled || false\"\r\n [readonly]=\"f.readonly || false\"\r\n />\r\n } @if (['date', 'datetime-local'].includes(f.type)) {\r\n <lib-date-time-picker\r\n [mode]=\"getDatePickerMode(f.type)\"\r\n [placeholder]=\"\r\n f.placeholder ||\r\n (f.type === 'date'\r\n ? 'Seleccionar fecha'\r\n : 'Seleccionar fecha y hora')\r\n \"\r\n [formControlName]=\"f.key\"\r\n [minDate]=\"f.minDate || null\"\r\n [maxDate]=\"f.maxDate || null\"\r\n [readonly]=\"f.readonly || false\"\r\n [disabled]=\"f.disabled || false\"\r\n />\r\n } @if (f.type === 'textarea') {\r\n <textarea\r\n class=\"input textarea\"\r\n [placeholder]=\"f.placeholder\"\r\n [formControlName]=\"f.key\"\r\n rows=\"6\"\r\n [readonly]=\"f.readonly || false\"\r\n [disabled]=\"f.disabled || false\"\r\n ></textarea>\r\n }@if (f.type === 'select') {\r\n\r\n <lib-select-custom-search\r\n [options]=\"f.options ?? []\"\r\n [placeholder]=\"f.placeholder || 'Seleccionar...'\"\r\n [formControlName]=\"f.key\"\r\n [readonly]=\"f.readonly || false\"\r\n [disabled]=\"f.disabled || false\"\r\n />\r\n } @if (f.type === 'radio') {\r\n <div class=\"radio-group\">\r\n @for (o of f.options ?? []; track o.value) {\r\n <label class=\"radio\">\r\n {{ o.label }}\r\n <input type=\"radio\" [value]=\"o.value\" [formControlName]=\"f.key\" [readonly]=\"f.readonly || false\"\r\n [disabled]=\"f.disabled || false\" />\r\n </label>\r\n }\r\n </div>\r\n } @if (f.type === 'checkbox') {\r\n <div class=\"checkbox-group\">\r\n @for (o of f.options ?? []; track o.value; let i = $index) {\r\n <label class=\"checkbox\">\r\n {{ o.label }}\r\n <input\r\n type=\"checkbox\"\r\n [checked]=\"getCheckboxArray(f.key).at(i).value\"\r\n (change)=\"onCheckboxChange($event, f.key, i)\"\r\n />\r\n </label>\r\n }\r\n </div>\r\n } @if (f.type === 'disabled') {\r\n <label class=\"label\">{{ f.label }}</label>\r\n <input\r\n class=\"input input--disabled\"\r\n [placeholder]=\"f.placeholder || 'Autom\u00E1tico'\"\r\n disabled\r\n />\r\n } @if (ctrl(f.key)?.touched && ctrl(f.key)?.invalid) {\r\n <div class=\"error\">\r\n @if (ctrl(f.key)?.errors?.['required']) {\r\n <span>Campo requerido</span>\r\n } @if (ctrl(f.key)?.errors?.['email']) {\r\n <span>Correo inv\u00E1lido</span>\r\n } @if (ctrl(f.key)?.errors?.['pattern']) {\r\n <span>\r\n @switch (f.patternType) { @case ('numbers') { Solo se permiten\r\n n\u00FAmeros } @case ('phone') { Formato de tel\u00E9fono inv\u00E1lido } @case\r\n ('text') { Solo se permiten letras y espacios } @case ('username') {\r\n Solo se permiten letras, n\u00FAmeros, puntos y guiones bajos (no al\r\n inicio ni al final) } @case ('alphanumeric') { Solo se permiten\r\n letras y n\u00FAmeros } @default { Formato inv\u00E1lido } }\r\n </span>\r\n } @if (ctrl(f.key)?.errors?.['notMatching']) {\r\n <span>Las contrase\u00F1as no coinciden</span>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </section>\r\n }\r\n</form>\r\n}\r\n", styles: [".form{width:100%}.form{display:grid}.section{padding:20px 0 0}.section-title{font-size:1.6rem;font-weight:700;margin-bottom:30px}.section-desc{margin:0 0 .75rem;color:#666}.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}.col{grid-column:span var(--col-span, 6);min-width:0;width:100%;position:relative;padding-bottom:20px}.label{position:absolute;top:-8px;left:12px;font-size:1.2rem;color:#454733;background-color:var(--surface-container-high, #ebe8d6);padding:0 4px;font-weight:500;z-index:1}.input{width:100%;border:1px solid #787861;border-radius:5px;padding:15px;background-color:transparent}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=date]::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:auto;height:auto;color:transparent;background:transparent}.input:focus{outline:none;border-color:#a9a97f}.input--disabled{color:#888}.label-radio{font-size:1.4rem;position:static;padding-left:0}.radio-group{display:flex;gap:1rem;padding:.5rem 0}.radio{font-size:1.4rem;display:flex;align-items:center;gap:10px;color:#1c1c12;margin-top:20px}.error{position:absolute;bottom:0;left:0;font-size:1.2rem;color:#b00020;width:100%;height:15px;display:none}.col:has(.error) .error{display:block}.textarea{resize:vertical;min-height:100px;max-height:300px;line-height:1.5}select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url(\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\");background-repeat:no-repeat;background-size:15px;background-position:right 15px center;cursor:pointer}select:invalid{color:#787861}select.placeholder-selected{color:#787861}select:not(.placeholder-selected){color:#000}select option{color:#454733;cursor:pointer}input[type=date]{color:#787861!important}input[type=date]:valid{color:#454733!important}.label-disabled{color:#1c1c1266}.input:disabled,.input--disabled,.input.disabled,.input[readonly]{border:1px solid #a9a97f;color:#a9a97f;cursor:not-allowed;pointer-events:none}@media (max-width: 768px){.grid{grid-template-columns:1fr}.col{grid-column:span 1!important}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: SelectCustomSearch, selector: "lib-select-custom-search", inputs: ["options", "placeholder", "readonly"], outputs: ["selectionChange"] }, { kind: "component", type: DateTimePicker, selector: "lib-date-time-picker", inputs: ["mode", "placeholder", "minDate", "maxDate", "readonly"], outputs: ["dateChange"] }] });
|
|
1944
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DynamicFormFields, isStandalone: true, selector: "lib-dynamic-form-fields", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (form()) {\r\n<form class=\"form\" [formGroup]=\"form()\" [class.form--compact]=\"compact()\">\r\n @for (sec of sections(); track $index) {\r\n <section class=\"section\">\r\n @if (sec.title) {\r\n <h3 class=\"section-title\">{{ sec.title }}</h3>\r\n } @if (sec.description) {\r\n <p class=\"section-desc\">{{ sec.description }}</p>\r\n }\r\n\r\n <div class=\"grid\">\r\n @for (f of sec.fields; track f.key) {\r\n <div class=\"col\" [style.--col-span]=\"f.col || 6\">\r\n @if(f.label) {\r\n <label\r\n [class.label-radio]=\"f.type === 'radio'\"\r\n [class.label-checkbox]=\"f.type === 'checkbox'\"\r\n [class.label-disabled]=\"f.readonly || f.disabled\"\r\n class=\"label\"\r\n >\r\n {{ f.label }} </label\r\n >} @if (['text','number','email', 'password', 'time'].includes(f.type))\r\n {\r\n <input\r\n class=\"input\"\r\n [type]=\"f.type\"\r\n [placeholder]=\"f.placeholder\"\r\n [formControlName]=\"f.key\"\r\n [disabled]=\"f.disabled || false\"\r\n [readonly]=\"f.readonly || false\"\r\n (input)=\"onUppercaseInput($event, f.type, f.key)\"\r\n />\r\n } @if (['date', 'datetime-local'].includes(f.type)) {\r\n <lib-date-time-picker\r\n [mode]=\"getDatePickerMode(f.type)\"\r\n [placeholder]=\"\r\n f.placeholder ||\r\n (f.type === 'date'\r\n ? 'Seleccionar fecha'\r\n : 'Seleccionar fecha y hora')\r\n \"\r\n [formControlName]=\"f.key\"\r\n [minDate]=\"f.minDate || null\"\r\n [maxDate]=\"f.maxDate || null\"\r\n [readonly]=\"f.readonly || false\"\r\n [disabled]=\"f.disabled || false\"\r\n />\r\n } @if (f.type === 'textarea') {\r\n <textarea\r\n class=\"input textarea\"\r\n [placeholder]=\"f.placeholder\"\r\n [formControlName]=\"f.key\"\r\n rows=\"6\"\r\n [readonly]=\"f.readonly || false\"\r\n [disabled]=\"f.disabled || false\"\r\n (input)=\"onUppercaseInput($event, f.type, f.key)\"\r\n ></textarea>\r\n }@if (f.type === 'select') {\r\n\r\n <lib-select-custom-search\r\n [options]=\"f.options ?? []\"\r\n [placeholder]=\"f.placeholder || 'Seleccionar...'\"\r\n [formControlName]=\"f.key\"\r\n [readonly]=\"f.readonly || false\"\r\n [disabled]=\"f.disabled || false\"\r\n />\r\n } @if (f.type === 'radio') {\r\n <div class=\"radio-group\">\r\n @for (o of f.options ?? []; track o.value) {\r\n <label class=\"radio\">\r\n {{ o.label }}\r\n <input type=\"radio\" [value]=\"o.value\" [formControlName]=\"f.key\" [readonly]=\"f.readonly || false\"\r\n [disabled]=\"f.disabled || false\" />\r\n </label>\r\n }\r\n </div>\r\n } @if (f.type === 'checkbox') {\r\n <div class=\"checkbox-group\">\r\n @for (o of f.options ?? []; track o.value; let i = $index) {\r\n <label class=\"checkbox\">\r\n {{ o.label }}\r\n <input\r\n type=\"checkbox\"\r\n [checked]=\"getCheckboxArray(f.key).at(i).value\"\r\n (change)=\"onCheckboxChange($event, f.key, i)\"\r\n />\r\n </label>\r\n }\r\n </div>\r\n } @if (f.type === 'disabled') {\r\n <label class=\"label\">{{ f.label }}</label>\r\n <input\r\n class=\"input input--disabled\"\r\n [placeholder]=\"f.placeholder || 'Autom\u00E1tico'\"\r\n disabled\r\n />\r\n } @if (ctrl(f.key)?.touched && ctrl(f.key)?.invalid) {\r\n <div class=\"error\">\r\n @if (ctrl(f.key)?.errors?.['required']) {\r\n <span>Campo requerido</span>\r\n } @if (ctrl(f.key)?.errors?.['email']) {\r\n <span>Correo inv\u00E1lido</span>\r\n } @if (ctrl(f.key)?.errors?.['pattern']) {\r\n <span>\r\n @switch (f.patternType) { @case ('numbers') { Solo se permiten\r\n n\u00FAmeros } @case ('phone') { Formato de tel\u00E9fono inv\u00E1lido } @case\r\n ('text') { Solo se permiten letras y espacios } @case ('username') {\r\n Solo se permiten letras, n\u00FAmeros, puntos y guiones bajos (no al\r\n inicio ni al final) } @case ('alphanumeric') { Solo se permiten\r\n letras y n\u00FAmeros } @default { Formato inv\u00E1lido } }\r\n </span>\r\n } @if (ctrl(f.key)?.errors?.['notMatching']) {\r\n <span>Las contrase\u00F1as no coinciden</span>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </section>\r\n }\r\n</form>\r\n}\r\n", styles: [".form{width:100%}.form{display:grid}.section{padding:20px 0 0}.section-title{font-size:1.6rem;font-weight:700;margin-bottom:30px}.section-desc{margin:0 0 .75rem;color:#666}.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}.col{grid-column:span var(--col-span, 6);min-width:0;width:100%;position:relative;padding-bottom:20px}.label{position:absolute;top:-8px;left:12px;font-size:1.2rem;color:#454733;background-color:var(--surface-container-high, #ebe8d6);padding:0 4px;font-weight:500;z-index:1;text-transform:uppercase}.input{width:100%;border:1px solid #787861;border-radius:5px;padding:15px;background-color:transparent;text-transform:uppercase}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=date]::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:auto;height:auto;color:transparent;background:transparent}.input:focus{outline:none;border-color:#a9a97f}.input--disabled{color:#888}.label-radio{font-size:1.4rem;position:static;padding-left:0}.radio-group{display:flex;gap:1rem;padding:.5rem 0}.radio{font-size:1.4rem;display:flex;align-items:center;gap:10px;color:#1c1c12;margin-top:20px}.error{position:absolute;bottom:0;left:0;font-size:1.2rem;color:#b00020;width:100%;height:15px;display:none}.col:has(.error) .error{display:block}.textarea{resize:vertical;min-height:100px;max-height:300px;line-height:1.5}select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url(\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\");background-repeat:no-repeat;background-size:15px;background-position:right 15px center;cursor:pointer}select:invalid{color:#787861}select.placeholder-selected{color:#787861}select:not(.placeholder-selected){color:#000}select option{color:#454733;cursor:pointer}input[type=date]{color:#787861!important}input[type=date]:valid{color:#454733!important}.label-disabled{color:#1c1c1266}.input:disabled,.input--disabled,.input.disabled,.input[readonly]{border:1px solid #a9a97f;color:#a9a97f;cursor:not-allowed;pointer-events:none}@media (max-width: 768px){.grid{grid-template-columns:1fr}.col{grid-column:span 1!important}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: SelectCustomSearch, selector: "lib-select-custom-search", inputs: ["options", "placeholder", "readonly"], outputs: ["selectionChange"] }, { kind: "component", type: DateTimePicker, selector: "lib-date-time-picker", inputs: ["mode", "placeholder", "minDate", "maxDate", "readonly"], outputs: ["dateChange"] }] });
|
|
1919
1945
|
}
|
|
1920
1946
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DynamicFormFields, decorators: [{
|
|
1921
1947
|
type: Component,
|
|
1922
|
-
args: [{ selector: 'lib-dynamic-form-fields', standalone: true, imports: [ReactiveFormsModule, SelectCustomSearch, DateTimePicker], template: "@if (form()) {\r\n<form class=\"form\" [formGroup]=\"form()\" [class.form--compact]=\"compact()\">\r\n @for (sec of sections(); track $index) {\r\n <section class=\"section\">\r\n @if (sec.title) {\r\n <h3 class=\"section-title\">{{ sec.title }}</h3>\r\n } @if (sec.description) {\r\n <p class=\"section-desc\">{{ sec.description }}</p>\r\n }\r\n\r\n <div class=\"grid\">\r\n @for (f of sec.fields; track f.key) {\r\n <div class=\"col\" [style.--col-span]=\"f.col || 6\">\r\n @if(f.label) {\r\n <label\r\n [class.label-radio]=\"f.type === 'radio'\"\r\n [class.label-checkbox]=\"f.type === 'checkbox'\"\r\n [class.label-disabled]=\"f.readonly || f.disabled\"\r\n class=\"label\"\r\n >\r\n {{ f.label }} </label\r\n >} @if (['text','number','email', 'password', 'time'].includes(f.type))\r\n {\r\n <input\r\n class=\"input\"\r\n [type]=\"f.type\"\r\n [placeholder]=\"f.placeholder\"\r\n [formControlName]=\"f.key\"\r\n [disabled]=\"f.disabled || false\"\r\n [readonly]=\"f.readonly || false\"\r\n />\r\n } @if (['date', 'datetime-local'].includes(f.type)) {\r\n <lib-date-time-picker\r\n [mode]=\"getDatePickerMode(f.type)\"\r\n [placeholder]=\"\r\n f.placeholder ||\r\n (f.type === 'date'\r\n ? 'Seleccionar fecha'\r\n : 'Seleccionar fecha y hora')\r\n \"\r\n [formControlName]=\"f.key\"\r\n [minDate]=\"f.minDate || null\"\r\n [maxDate]=\"f.maxDate || null\"\r\n [readonly]=\"f.readonly || false\"\r\n [disabled]=\"f.disabled || false\"\r\n />\r\n } @if (f.type === 'textarea') {\r\n <textarea\r\n class=\"input textarea\"\r\n [placeholder]=\"f.placeholder\"\r\n [formControlName]=\"f.key\"\r\n rows=\"6\"\r\n [readonly]=\"f.readonly || false\"\r\n [disabled]=\"f.disabled || false\"\r\n ></textarea>\r\n }@if (f.type === 'select') {\r\n\r\n <lib-select-custom-search\r\n [options]=\"f.options ?? []\"\r\n [placeholder]=\"f.placeholder || 'Seleccionar...'\"\r\n [formControlName]=\"f.key\"\r\n [readonly]=\"f.readonly || false\"\r\n [disabled]=\"f.disabled || false\"\r\n />\r\n } @if (f.type === 'radio') {\r\n <div class=\"radio-group\">\r\n @for (o of f.options ?? []; track o.value) {\r\n <label class=\"radio\">\r\n {{ o.label }}\r\n <input type=\"radio\" [value]=\"o.value\" [formControlName]=\"f.key\" [readonly]=\"f.readonly || false\"\r\n [disabled]=\"f.disabled || false\" />\r\n </label>\r\n }\r\n </div>\r\n } @if (f.type === 'checkbox') {\r\n <div class=\"checkbox-group\">\r\n @for (o of f.options ?? []; track o.value; let i = $index) {\r\n <label class=\"checkbox\">\r\n {{ o.label }}\r\n <input\r\n type=\"checkbox\"\r\n [checked]=\"getCheckboxArray(f.key).at(i).value\"\r\n (change)=\"onCheckboxChange($event, f.key, i)\"\r\n />\r\n </label>\r\n }\r\n </div>\r\n } @if (f.type === 'disabled') {\r\n <label class=\"label\">{{ f.label }}</label>\r\n <input\r\n class=\"input input--disabled\"\r\n [placeholder]=\"f.placeholder || 'Autom\u00E1tico'\"\r\n disabled\r\n />\r\n } @if (ctrl(f.key)?.touched && ctrl(f.key)?.invalid) {\r\n <div class=\"error\">\r\n @if (ctrl(f.key)?.errors?.['required']) {\r\n <span>Campo requerido</span>\r\n } @if (ctrl(f.key)?.errors?.['email']) {\r\n <span>Correo inv\u00E1lido</span>\r\n } @if (ctrl(f.key)?.errors?.['pattern']) {\r\n <span>\r\n @switch (f.patternType) { @case ('numbers') { Solo se permiten\r\n n\u00FAmeros } @case ('phone') { Formato de tel\u00E9fono inv\u00E1lido } @case\r\n ('text') { Solo se permiten letras y espacios } @case ('username') {\r\n Solo se permiten letras, n\u00FAmeros, puntos y guiones bajos (no al\r\n inicio ni al final) } @case ('alphanumeric') { Solo se permiten\r\n letras y n\u00FAmeros } @default { Formato inv\u00E1lido } }\r\n </span>\r\n } @if (ctrl(f.key)?.errors?.['notMatching']) {\r\n <span>Las contrase\u00F1as no coinciden</span>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </section>\r\n }\r\n</form>\r\n}\r\n", styles: [".form{width:100%}.form{display:grid}.section{padding:20px 0 0}.section-title{font-size:1.6rem;font-weight:700;margin-bottom:30px}.section-desc{margin:0 0 .75rem;color:#666}.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}.col{grid-column:span var(--col-span, 6);min-width:0;width:100%;position:relative;padding-bottom:20px}.label{position:absolute;top:-8px;left:12px;font-size:1.2rem;color:#454733;background-color:var(--surface-container-high, #ebe8d6);padding:0 4px;font-weight:500;z-index:1}.input{width:100%;border:1px solid #787861;border-radius:5px;padding:15px;background-color:transparent}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=date]::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:auto;height:auto;color:transparent;background:transparent}.input:focus{outline:none;border-color:#a9a97f}.input--disabled{color:#888}.label-radio{font-size:1.4rem;position:static;padding-left:0}.radio-group{display:flex;gap:1rem;padding:.5rem 0}.radio{font-size:1.4rem;display:flex;align-items:center;gap:10px;color:#1c1c12;margin-top:20px}.error{position:absolute;bottom:0;left:0;font-size:1.2rem;color:#b00020;width:100%;height:15px;display:none}.col:has(.error) .error{display:block}.textarea{resize:vertical;min-height:100px;max-height:300px;line-height:1.5}select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url(\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\");background-repeat:no-repeat;background-size:15px;background-position:right 15px center;cursor:pointer}select:invalid{color:#787861}select.placeholder-selected{color:#787861}select:not(.placeholder-selected){color:#000}select option{color:#454733;cursor:pointer}input[type=date]{color:#787861!important}input[type=date]:valid{color:#454733!important}.label-disabled{color:#1c1c1266}.input:disabled,.input--disabled,.input.disabled,.input[readonly]{border:1px solid #a9a97f;color:#a9a97f;cursor:not-allowed;pointer-events:none}@media (max-width: 768px){.grid{grid-template-columns:1fr}.col{grid-column:span 1!important}}\n"] }]
|
|
1948
|
+
args: [{ selector: 'lib-dynamic-form-fields', standalone: true, imports: [ReactiveFormsModule, SelectCustomSearch, DateTimePicker], template: "@if (form()) {\r\n<form class=\"form\" [formGroup]=\"form()\" [class.form--compact]=\"compact()\">\r\n @for (sec of sections(); track $index) {\r\n <section class=\"section\">\r\n @if (sec.title) {\r\n <h3 class=\"section-title\">{{ sec.title }}</h3>\r\n } @if (sec.description) {\r\n <p class=\"section-desc\">{{ sec.description }}</p>\r\n }\r\n\r\n <div class=\"grid\">\r\n @for (f of sec.fields; track f.key) {\r\n <div class=\"col\" [style.--col-span]=\"f.col || 6\">\r\n @if(f.label) {\r\n <label\r\n [class.label-radio]=\"f.type === 'radio'\"\r\n [class.label-checkbox]=\"f.type === 'checkbox'\"\r\n [class.label-disabled]=\"f.readonly || f.disabled\"\r\n class=\"label\"\r\n >\r\n {{ f.label }} </label\r\n >} @if (['text','number','email', 'password', 'time'].includes(f.type))\r\n {\r\n <input\r\n class=\"input\"\r\n [type]=\"f.type\"\r\n [placeholder]=\"f.placeholder\"\r\n [formControlName]=\"f.key\"\r\n [disabled]=\"f.disabled || false\"\r\n [readonly]=\"f.readonly || false\"\r\n (input)=\"onUppercaseInput($event, f.type, f.key)\"\r\n />\r\n } @if (['date', 'datetime-local'].includes(f.type)) {\r\n <lib-date-time-picker\r\n [mode]=\"getDatePickerMode(f.type)\"\r\n [placeholder]=\"\r\n f.placeholder ||\r\n (f.type === 'date'\r\n ? 'Seleccionar fecha'\r\n : 'Seleccionar fecha y hora')\r\n \"\r\n [formControlName]=\"f.key\"\r\n [minDate]=\"f.minDate || null\"\r\n [maxDate]=\"f.maxDate || null\"\r\n [readonly]=\"f.readonly || false\"\r\n [disabled]=\"f.disabled || false\"\r\n />\r\n } @if (f.type === 'textarea') {\r\n <textarea\r\n class=\"input textarea\"\r\n [placeholder]=\"f.placeholder\"\r\n [formControlName]=\"f.key\"\r\n rows=\"6\"\r\n [readonly]=\"f.readonly || false\"\r\n [disabled]=\"f.disabled || false\"\r\n (input)=\"onUppercaseInput($event, f.type, f.key)\"\r\n ></textarea>\r\n }@if (f.type === 'select') {\r\n\r\n <lib-select-custom-search\r\n [options]=\"f.options ?? []\"\r\n [placeholder]=\"f.placeholder || 'Seleccionar...'\"\r\n [formControlName]=\"f.key\"\r\n [readonly]=\"f.readonly || false\"\r\n [disabled]=\"f.disabled || false\"\r\n />\r\n } @if (f.type === 'radio') {\r\n <div class=\"radio-group\">\r\n @for (o of f.options ?? []; track o.value) {\r\n <label class=\"radio\">\r\n {{ o.label }}\r\n <input type=\"radio\" [value]=\"o.value\" [formControlName]=\"f.key\" [readonly]=\"f.readonly || false\"\r\n [disabled]=\"f.disabled || false\" />\r\n </label>\r\n }\r\n </div>\r\n } @if (f.type === 'checkbox') {\r\n <div class=\"checkbox-group\">\r\n @for (o of f.options ?? []; track o.value; let i = $index) {\r\n <label class=\"checkbox\">\r\n {{ o.label }}\r\n <input\r\n type=\"checkbox\"\r\n [checked]=\"getCheckboxArray(f.key).at(i).value\"\r\n (change)=\"onCheckboxChange($event, f.key, i)\"\r\n />\r\n </label>\r\n }\r\n </div>\r\n } @if (f.type === 'disabled') {\r\n <label class=\"label\">{{ f.label }}</label>\r\n <input\r\n class=\"input input--disabled\"\r\n [placeholder]=\"f.placeholder || 'Autom\u00E1tico'\"\r\n disabled\r\n />\r\n } @if (ctrl(f.key)?.touched && ctrl(f.key)?.invalid) {\r\n <div class=\"error\">\r\n @if (ctrl(f.key)?.errors?.['required']) {\r\n <span>Campo requerido</span>\r\n } @if (ctrl(f.key)?.errors?.['email']) {\r\n <span>Correo inv\u00E1lido</span>\r\n } @if (ctrl(f.key)?.errors?.['pattern']) {\r\n <span>\r\n @switch (f.patternType) { @case ('numbers') { Solo se permiten\r\n n\u00FAmeros } @case ('phone') { Formato de tel\u00E9fono inv\u00E1lido } @case\r\n ('text') { Solo se permiten letras y espacios } @case ('username') {\r\n Solo se permiten letras, n\u00FAmeros, puntos y guiones bajos (no al\r\n inicio ni al final) } @case ('alphanumeric') { Solo se permiten\r\n letras y n\u00FAmeros } @default { Formato inv\u00E1lido } }\r\n </span>\r\n } @if (ctrl(f.key)?.errors?.['notMatching']) {\r\n <span>Las contrase\u00F1as no coinciden</span>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </section>\r\n }\r\n</form>\r\n}\r\n", styles: [".form{width:100%}.form{display:grid}.section{padding:20px 0 0}.section-title{font-size:1.6rem;font-weight:700;margin-bottom:30px}.section-desc{margin:0 0 .75rem;color:#666}.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}.col{grid-column:span var(--col-span, 6);min-width:0;width:100%;position:relative;padding-bottom:20px}.label{position:absolute;top:-8px;left:12px;font-size:1.2rem;color:#454733;background-color:var(--surface-container-high, #ebe8d6);padding:0 4px;font-weight:500;z-index:1;text-transform:uppercase}.input{width:100%;border:1px solid #787861;border-radius:5px;padding:15px;background-color:transparent;text-transform:uppercase}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=date]::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:auto;height:auto;color:transparent;background:transparent}.input:focus{outline:none;border-color:#a9a97f}.input--disabled{color:#888}.label-radio{font-size:1.4rem;position:static;padding-left:0}.radio-group{display:flex;gap:1rem;padding:.5rem 0}.radio{font-size:1.4rem;display:flex;align-items:center;gap:10px;color:#1c1c12;margin-top:20px}.error{position:absolute;bottom:0;left:0;font-size:1.2rem;color:#b00020;width:100%;height:15px;display:none}.col:has(.error) .error{display:block}.textarea{resize:vertical;min-height:100px;max-height:300px;line-height:1.5}select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url(\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\");background-repeat:no-repeat;background-size:15px;background-position:right 15px center;cursor:pointer}select:invalid{color:#787861}select.placeholder-selected{color:#787861}select:not(.placeholder-selected){color:#000}select option{color:#454733;cursor:pointer}input[type=date]{color:#787861!important}input[type=date]:valid{color:#454733!important}.label-disabled{color:#1c1c1266}.input:disabled,.input--disabled,.input.disabled,.input[readonly]{border:1px solid #a9a97f;color:#a9a97f;cursor:not-allowed;pointer-events:none}@media (max-width: 768px){.grid{grid-template-columns:1fr}.col{grid-column:span 1!important}}\n"] }]
|
|
1923
1949
|
}], propDecorators: { form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }], sections: [{ type: i0.Input, args: [{ isSignal: true, alias: "sections", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }] } });
|
|
1924
1950
|
|
|
1925
1951
|
class WizardForm {
|
|
@@ -2071,11 +2097,11 @@ class ModalForm {
|
|
|
2071
2097
|
this.evidenceChange.emit(file);
|
|
2072
2098
|
}
|
|
2073
2099
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ModalForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2074
|
-
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:
|
|
2100
|
+
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:2.4rem;font-weight:700;text-transform:uppercase;color:#1c1c12}.header-content p{font-size:1.4rem;font-weight:300;color:#454733;text-transform:uppercase}.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:1.4rem;font-weight:500;color:#6a750a;border:1px solid #6A750A;max-width:260px;width:100%;overflow:hidden;text-transform:uppercase}.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;text-transform:uppercase}.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"] }] });
|
|
2075
2101
|
}
|
|
2076
2102
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ModalForm, decorators: [{
|
|
2077
2103
|
type: Component,
|
|
2078
|
-
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:
|
|
2104
|
+
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:2.4rem;font-weight:700;text-transform:uppercase;color:#1c1c12}.header-content p{font-size:1.4rem;font-weight:300;color:#454733;text-transform:uppercase}.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:1.4rem;font-weight:500;color:#6a750a;border:1px solid #6A750A;max-width:260px;width:100%;overflow:hidden;text-transform:uppercase}.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;text-transform:uppercase}.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"] }]
|
|
2079
2105
|
}], 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 }] }] } });
|
|
2080
2106
|
|
|
2081
2107
|
class DialogAlertComponent {
|
|
@@ -2205,11 +2231,11 @@ class DialogConfirmation {
|
|
|
2205
2231
|
this.close.emit(false);
|
|
2206
2232
|
}
|
|
2207
2233
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DialogConfirmation, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2208
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DialogConfirmation, isStandalone: true, selector: "lib-dialog-confirmation", inputs: { title: "title", confirm: "confirm", confirmLabel: "confirmLabel", items: "items" }, outputs: { close: "close" }, ngImport: i0, template: "<div class=\"modal-backdrop\">\r\n <div class=\"modal-card\">\r\n <div class=\"modal-header\">\r\n <h2>{{ title }}</h2>\r\n <button class=\"close-btn\" (click)=\"onCancel()\" aria-label=\"Cerrar\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M18 6l-12 12\" />\r\n <path d=\"M6 6l12 12\" />\r\n </svg>\r\n </button>\r\n </div>\r\n <div class=\"modal-body\">\r\n <div class=\"info-container\" [class.expanded]=\"expandedIndex !== null\">\r\n @for (item of items; track item.key; let i = $index) {\r\n\r\n <div class=\"info-item\">\r\n <div\r\n class=\"info-main\"\r\n [class.info-main-expanded]=\"item.expandible\"\r\n (click)=\"item.expandible && toggle(i)\"\r\n >\r\n <span class=\"label\"\r\n >{{ item.label }} @if (item.expandible) {\r\n <span class=\"arrow\"> {{ expandedIndex === i ? '\u25B2' : '\u25BC' }} </span>\r\n }\r\n </span>\r\n <span class=\"value\"> {{ item.value }} </span>\r\n </div>\r\n\r\n @if (expandedIndex === i && item.children?.length) {\r\n <div class=\"info-children\">\r\n @for (child of item.children; track child.key) {\r\n <div class=\"info-item child-item\">\r\n <div class=\"info-main\">\r\n <span class=\"label\">{{ child.label }}</span>\r\n <span class=\"value\">{{ child.value }}</span>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n\r\n }\r\n </div>\r\n </div>\r\n <div class=\"modal-footer\">\r\n @if (confirm) {\r\n <button class=\"btn cancel\" (click)=\"onCancel()\">Cancelar</button>\r\n <button class=\"btn confirm\" (click)=\"onConfirm()\">\r\n {{ confirmLabel }}\r\n </button>\r\n } @else {\r\n <button class=\"btn confirm\" (click)=\"onConfirm()\">\r\n {{ confirmLabel }}\r\n </button>\r\n }\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".modal-backdrop{position:fixed;inset:0;background:#00000073;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:10000}.modal-card{width:35%;max-width:50%;max-height:90%;background:#ebe8d6;border-radius:28px;padding:32px 48px;animation:fadeIn .25s ease;border:1px solid rgba(255,255,255,.07);box-shadow:0 8px 20px #0003;overflow:hidden;display:flex;flex-direction:column;transition:max-height .35s cubic-bezier(.4,0,.2,1)}.modal-header{position:relative;display:flex;align-items:center;gap:12px;color:#0c0c0c;justify-content:center}.modal-header h2{font-weight:700;font-size:24px;margin:0;text-align:center;text-transform:uppercase}.close-btn{position:absolute;right:-36px;top:-24px;width:36px;height:36px;border-radius:50%;background:#ebe8d6;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#333;transition:background .2s ease,transform .2s ease}.close-btn:hover{background:#d8d6c0;transform:scale(1.05)}.close-btn svg{width:18px;height:18px}.modal-body{position:relative;margin-top:16px;text-align:center;flex:1;overflow:hidden;display:flex;flex-direction:column;transition:all .35s cubic-bezier(.4,0,.2,1)}.modal-body p{color:#555;margin:0;font-size:14px;line-height:1.5;padding-top:21px}.modal-footer{margin-top:25px;display:flex;justify-content:center;gap:10px;flex-shrink:0}button{background-color:transparent;border:none}.btn{padding:10px 16px;border-radius:99px;font-weight:700;cursor:pointer;border:none}.btn:hover{background-color:#61661f}.btn.cancel{background:transparent;border:1px solid #454733;color:#454733}.btn.cancel:hover{background-color:#454733;color:#fff}.btn.confirm{background:#596300;color:#fff}@keyframes fadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.btn.confirm.warning,.btn.confirm.error{background-color:#ba1a1a;color:#fff}.btn.confirm.info{background-color:#063546;color:#fff}.btn.confirm.success{background-color:#596300;color:#fff}.info-container{max-height:400;background:#e3e3d1;border-radius:20px;padding:24px;flex:1;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.35) transparent;transition:max-height .35s cubic-bezier(.4,0,.2,1)}.info-container.expanded{max-height:600px}.info-container::-webkit-scrollbar{width:6px;background:transparent}.info-container::-webkit-scrollbar-track{background:transparent}.info-container::-webkit-scrollbar-thumb{background:#00000059;border-radius:6px}.info-container::-webkit-scrollbar-thumb:hover{background:#00000080}.info-item{border-bottom:1px solid rgba(0,0,0,.05);padding:16px 0}.info-item:last-child{border-bottom:none}.info-main{display:flex;flex-direction:column;text-align:center;gap:8px}.info-main-expanded{cursor:pointer}.info-children{margin-top:12px}.child-item{padding:16px 0;border-bottom:1px solid rgba(0,0,0,.05);margin:0 16px}.child-item:first-child{border-top:1px solid rgba(0,0,0,.05)}.child-item:last-child{border-bottom:none}.label{font-size:16px;color:#555;text-transform:uppercase}.value{font-size:16px;font-weight:700;display:flex;justify-content:center;gap:6px;align-items:center}.arrow{font-size:12px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
2234
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DialogConfirmation, isStandalone: true, selector: "lib-dialog-confirmation", inputs: { title: "title", confirm: "confirm", confirmLabel: "confirmLabel", items: "items" }, outputs: { close: "close" }, ngImport: i0, template: "<div class=\"modal-backdrop\">\r\n <div class=\"modal-card\">\r\n <div class=\"modal-header\">\r\n <h2>{{ title }}</h2>\r\n <button class=\"close-btn\" (click)=\"onCancel()\" aria-label=\"Cerrar\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M18 6l-12 12\" />\r\n <path d=\"M6 6l12 12\" />\r\n </svg>\r\n </button>\r\n </div>\r\n <div class=\"modal-body\">\r\n <div class=\"info-container\" [class.expanded]=\"expandedIndex !== null\">\r\n @for (item of items; track item.key; let i = $index) {\r\n\r\n <div class=\"info-item\">\r\n <div\r\n class=\"info-main\"\r\n [class.info-main-expanded]=\"item.expandible\"\r\n (click)=\"item.expandible && toggle(i)\"\r\n >\r\n <span class=\"label\"\r\n >{{ item.label }} @if (item.expandible) {\r\n <span class=\"arrow\"> {{ expandedIndex === i ? '\u25B2' : '\u25BC' }} </span>\r\n }\r\n </span>\r\n <span class=\"value\"> {{ item.value }} </span>\r\n </div>\r\n\r\n @if (expandedIndex === i && item.children?.length) {\r\n <div class=\"info-children\">\r\n @for (child of item.children; track child.key) {\r\n <div class=\"info-item child-item\">\r\n <div class=\"info-main\">\r\n <span class=\"label\">{{ child.label }}</span>\r\n <span class=\"value\">{{ child.value }}</span>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n\r\n }\r\n </div>\r\n </div>\r\n <div class=\"modal-footer\">\r\n @if (confirm) {\r\n <button class=\"btn cancel\" (click)=\"onCancel()\">Cancelar</button>\r\n <button class=\"btn confirm\" (click)=\"onConfirm()\">\r\n {{ confirmLabel }}\r\n </button>\r\n } @else {\r\n <button class=\"btn confirm\" (click)=\"onConfirm()\">\r\n {{ confirmLabel }}\r\n </button>\r\n }\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".modal-backdrop{position:fixed;inset:0;background:#00000073;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:10000}.modal-card{width:35%;max-width:50%;max-height:90%;background:#ebe8d6;border-radius:28px;padding:32px 48px;animation:fadeIn .25s ease;border:1px solid rgba(255,255,255,.07);box-shadow:0 8px 20px #0003;overflow:hidden;display:flex;flex-direction:column;transition:max-height .35s cubic-bezier(.4,0,.2,1)}.modal-header{position:relative;display:flex;align-items:center;gap:12px;color:#0c0c0c;justify-content:center}.modal-header h2{font-weight:700;font-size:24px;margin:0;text-align:center;text-transform:uppercase}.close-btn{position:absolute;right:-36px;top:-24px;width:36px;height:36px;border-radius:50%;background:#ebe8d6;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#333;transition:background .2s ease,transform .2s ease}.close-btn:hover{background:#d8d6c0;transform:scale(1.05)}.close-btn svg{width:18px;height:18px}.modal-body{position:relative;margin-top:16px;text-align:center;flex:1;overflow:hidden;display:flex;flex-direction:column;transition:all .35s cubic-bezier(.4,0,.2,1)}.modal-body p{color:#555;margin:0;font-size:14px;line-height:1.5;padding-top:21px}.modal-footer{margin-top:25px;display:flex;justify-content:center;gap:10px;flex-shrink:0}button{background-color:transparent;border:none}.btn{padding:10px 16px;border-radius:99px;font-weight:700;cursor:pointer;border:none;text-transform:uppercase}.btn:hover{background-color:#61661f}.btn.cancel{background:transparent;border:1px solid #454733;color:#454733;text-transform:uppercase}.btn.cancel:hover{background-color:#454733;color:#fff}.btn.confirm{background:#596300;color:#fff}@keyframes fadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.btn.confirm.warning,.btn.confirm.error{background-color:#ba1a1a;color:#fff}.btn.confirm.warning:hover,.btn.confirm.error:hover{background-color:#ce3535}.btn.confirm.info{background-color:#063546;color:#fff}.btn.confirm.info:hover{background-color:#0b495f}.btn.confirm.success{background-color:#596300;color:#fff}.btn.confirm.success:hover{background-color:#61661f}.info-container{max-height:400;background:#e3e3d1;border-radius:20px;padding:24px;flex:1;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.35) transparent;transition:max-height .35s cubic-bezier(.4,0,.2,1)}.info-container.expanded{max-height:600px}.info-container::-webkit-scrollbar{width:6px;background:transparent}.info-container::-webkit-scrollbar-track{background:transparent}.info-container::-webkit-scrollbar-thumb{background:#00000059;border-radius:6px}.info-container::-webkit-scrollbar-thumb:hover{background:#00000080}.info-item{border-bottom:1px solid rgba(0,0,0,.05);padding:16px 0}.info-item:last-child{border-bottom:none}.info-main{display:flex;flex-direction:column;text-align:center;gap:8px}.info-main-expanded{cursor:pointer}.info-children{margin-top:12px}.child-item{padding:16px 0;border-bottom:1px solid rgba(0,0,0,.05);margin:0 16px}.child-item:first-child{border-top:1px solid rgba(0,0,0,.05)}.child-item:last-child{border-bottom:none}.label{font-size:16px;color:#555;text-transform:uppercase}.value{font-size:16px;font-weight:700;display:flex;justify-content:center;gap:6px;align-items:center;text-transform:uppercase}.arrow{font-size:12px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
2209
2235
|
}
|
|
2210
2236
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DialogConfirmation, decorators: [{
|
|
2211
2237
|
type: Component,
|
|
2212
|
-
args: [{ selector: 'lib-dialog-confirmation', imports: [CommonModule], template: "<div class=\"modal-backdrop\">\r\n <div class=\"modal-card\">\r\n <div class=\"modal-header\">\r\n <h2>{{ title }}</h2>\r\n <button class=\"close-btn\" (click)=\"onCancel()\" aria-label=\"Cerrar\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M18 6l-12 12\" />\r\n <path d=\"M6 6l12 12\" />\r\n </svg>\r\n </button>\r\n </div>\r\n <div class=\"modal-body\">\r\n <div class=\"info-container\" [class.expanded]=\"expandedIndex !== null\">\r\n @for (item of items; track item.key; let i = $index) {\r\n\r\n <div class=\"info-item\">\r\n <div\r\n class=\"info-main\"\r\n [class.info-main-expanded]=\"item.expandible\"\r\n (click)=\"item.expandible && toggle(i)\"\r\n >\r\n <span class=\"label\"\r\n >{{ item.label }} @if (item.expandible) {\r\n <span class=\"arrow\"> {{ expandedIndex === i ? '\u25B2' : '\u25BC' }} </span>\r\n }\r\n </span>\r\n <span class=\"value\"> {{ item.value }} </span>\r\n </div>\r\n\r\n @if (expandedIndex === i && item.children?.length) {\r\n <div class=\"info-children\">\r\n @for (child of item.children; track child.key) {\r\n <div class=\"info-item child-item\">\r\n <div class=\"info-main\">\r\n <span class=\"label\">{{ child.label }}</span>\r\n <span class=\"value\">{{ child.value }}</span>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n\r\n }\r\n </div>\r\n </div>\r\n <div class=\"modal-footer\">\r\n @if (confirm) {\r\n <button class=\"btn cancel\" (click)=\"onCancel()\">Cancelar</button>\r\n <button class=\"btn confirm\" (click)=\"onConfirm()\">\r\n {{ confirmLabel }}\r\n </button>\r\n } @else {\r\n <button class=\"btn confirm\" (click)=\"onConfirm()\">\r\n {{ confirmLabel }}\r\n </button>\r\n }\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".modal-backdrop{position:fixed;inset:0;background:#00000073;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:10000}.modal-card{width:35%;max-width:50%;max-height:90%;background:#ebe8d6;border-radius:28px;padding:32px 48px;animation:fadeIn .25s ease;border:1px solid rgba(255,255,255,.07);box-shadow:0 8px 20px #0003;overflow:hidden;display:flex;flex-direction:column;transition:max-height .35s cubic-bezier(.4,0,.2,1)}.modal-header{position:relative;display:flex;align-items:center;gap:12px;color:#0c0c0c;justify-content:center}.modal-header h2{font-weight:700;font-size:24px;margin:0;text-align:center;text-transform:uppercase}.close-btn{position:absolute;right:-36px;top:-24px;width:36px;height:36px;border-radius:50%;background:#ebe8d6;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#333;transition:background .2s ease,transform .2s ease}.close-btn:hover{background:#d8d6c0;transform:scale(1.05)}.close-btn svg{width:18px;height:18px}.modal-body{position:relative;margin-top:16px;text-align:center;flex:1;overflow:hidden;display:flex;flex-direction:column;transition:all .35s cubic-bezier(.4,0,.2,1)}.modal-body p{color:#555;margin:0;font-size:14px;line-height:1.5;padding-top:21px}.modal-footer{margin-top:25px;display:flex;justify-content:center;gap:10px;flex-shrink:0}button{background-color:transparent;border:none}.btn{padding:10px 16px;border-radius:99px;font-weight:700;cursor:pointer;border:none}.btn:hover{background-color:#61661f}.btn.cancel{background:transparent;border:1px solid #454733;color:#454733}.btn.cancel:hover{background-color:#454733;color:#fff}.btn.confirm{background:#596300;color:#fff}@keyframes fadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.btn.confirm.warning,.btn.confirm.error{background-color:#ba1a1a;color:#fff}.btn.confirm.info{background-color:#063546;color:#fff}.btn.confirm.success{background-color:#596300;color:#fff}.info-container{max-height:400;background:#e3e3d1;border-radius:20px;padding:24px;flex:1;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.35) transparent;transition:max-height .35s cubic-bezier(.4,0,.2,1)}.info-container.expanded{max-height:600px}.info-container::-webkit-scrollbar{width:6px;background:transparent}.info-container::-webkit-scrollbar-track{background:transparent}.info-container::-webkit-scrollbar-thumb{background:#00000059;border-radius:6px}.info-container::-webkit-scrollbar-thumb:hover{background:#00000080}.info-item{border-bottom:1px solid rgba(0,0,0,.05);padding:16px 0}.info-item:last-child{border-bottom:none}.info-main{display:flex;flex-direction:column;text-align:center;gap:8px}.info-main-expanded{cursor:pointer}.info-children{margin-top:12px}.child-item{padding:16px 0;border-bottom:1px solid rgba(0,0,0,.05);margin:0 16px}.child-item:first-child{border-top:1px solid rgba(0,0,0,.05)}.child-item:last-child{border-bottom:none}.label{font-size:16px;color:#555;text-transform:uppercase}.value{font-size:16px;font-weight:700;display:flex;justify-content:center;gap:6px;align-items:center}.arrow{font-size:12px}\n"] }]
|
|
2238
|
+
args: [{ selector: 'lib-dialog-confirmation', imports: [CommonModule], template: "<div class=\"modal-backdrop\">\r\n <div class=\"modal-card\">\r\n <div class=\"modal-header\">\r\n <h2>{{ title }}</h2>\r\n <button class=\"close-btn\" (click)=\"onCancel()\" aria-label=\"Cerrar\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M18 6l-12 12\" />\r\n <path d=\"M6 6l12 12\" />\r\n </svg>\r\n </button>\r\n </div>\r\n <div class=\"modal-body\">\r\n <div class=\"info-container\" [class.expanded]=\"expandedIndex !== null\">\r\n @for (item of items; track item.key; let i = $index) {\r\n\r\n <div class=\"info-item\">\r\n <div\r\n class=\"info-main\"\r\n [class.info-main-expanded]=\"item.expandible\"\r\n (click)=\"item.expandible && toggle(i)\"\r\n >\r\n <span class=\"label\"\r\n >{{ item.label }} @if (item.expandible) {\r\n <span class=\"arrow\"> {{ expandedIndex === i ? '\u25B2' : '\u25BC' }} </span>\r\n }\r\n </span>\r\n <span class=\"value\"> {{ item.value }} </span>\r\n </div>\r\n\r\n @if (expandedIndex === i && item.children?.length) {\r\n <div class=\"info-children\">\r\n @for (child of item.children; track child.key) {\r\n <div class=\"info-item child-item\">\r\n <div class=\"info-main\">\r\n <span class=\"label\">{{ child.label }}</span>\r\n <span class=\"value\">{{ child.value }}</span>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n\r\n }\r\n </div>\r\n </div>\r\n <div class=\"modal-footer\">\r\n @if (confirm) {\r\n <button class=\"btn cancel\" (click)=\"onCancel()\">Cancelar</button>\r\n <button class=\"btn confirm\" (click)=\"onConfirm()\">\r\n {{ confirmLabel }}\r\n </button>\r\n } @else {\r\n <button class=\"btn confirm\" (click)=\"onConfirm()\">\r\n {{ confirmLabel }}\r\n </button>\r\n }\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".modal-backdrop{position:fixed;inset:0;background:#00000073;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:10000}.modal-card{width:35%;max-width:50%;max-height:90%;background:#ebe8d6;border-radius:28px;padding:32px 48px;animation:fadeIn .25s ease;border:1px solid rgba(255,255,255,.07);box-shadow:0 8px 20px #0003;overflow:hidden;display:flex;flex-direction:column;transition:max-height .35s cubic-bezier(.4,0,.2,1)}.modal-header{position:relative;display:flex;align-items:center;gap:12px;color:#0c0c0c;justify-content:center}.modal-header h2{font-weight:700;font-size:24px;margin:0;text-align:center;text-transform:uppercase}.close-btn{position:absolute;right:-36px;top:-24px;width:36px;height:36px;border-radius:50%;background:#ebe8d6;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#333;transition:background .2s ease,transform .2s ease}.close-btn:hover{background:#d8d6c0;transform:scale(1.05)}.close-btn svg{width:18px;height:18px}.modal-body{position:relative;margin-top:16px;text-align:center;flex:1;overflow:hidden;display:flex;flex-direction:column;transition:all .35s cubic-bezier(.4,0,.2,1)}.modal-body p{color:#555;margin:0;font-size:14px;line-height:1.5;padding-top:21px}.modal-footer{margin-top:25px;display:flex;justify-content:center;gap:10px;flex-shrink:0}button{background-color:transparent;border:none}.btn{padding:10px 16px;border-radius:99px;font-weight:700;cursor:pointer;border:none;text-transform:uppercase}.btn:hover{background-color:#61661f}.btn.cancel{background:transparent;border:1px solid #454733;color:#454733;text-transform:uppercase}.btn.cancel:hover{background-color:#454733;color:#fff}.btn.confirm{background:#596300;color:#fff}@keyframes fadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.btn.confirm.warning,.btn.confirm.error{background-color:#ba1a1a;color:#fff}.btn.confirm.warning:hover,.btn.confirm.error:hover{background-color:#ce3535}.btn.confirm.info{background-color:#063546;color:#fff}.btn.confirm.info:hover{background-color:#0b495f}.btn.confirm.success{background-color:#596300;color:#fff}.btn.confirm.success:hover{background-color:#61661f}.info-container{max-height:400;background:#e3e3d1;border-radius:20px;padding:24px;flex:1;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.35) transparent;transition:max-height .35s cubic-bezier(.4,0,.2,1)}.info-container.expanded{max-height:600px}.info-container::-webkit-scrollbar{width:6px;background:transparent}.info-container::-webkit-scrollbar-track{background:transparent}.info-container::-webkit-scrollbar-thumb{background:#00000059;border-radius:6px}.info-container::-webkit-scrollbar-thumb:hover{background:#00000080}.info-item{border-bottom:1px solid rgba(0,0,0,.05);padding:16px 0}.info-item:last-child{border-bottom:none}.info-main{display:flex;flex-direction:column;text-align:center;gap:8px}.info-main-expanded{cursor:pointer}.info-children{margin-top:12px}.child-item{padding:16px 0;border-bottom:1px solid rgba(0,0,0,.05);margin:0 16px}.child-item:first-child{border-top:1px solid rgba(0,0,0,.05)}.child-item:last-child{border-bottom:none}.label{font-size:16px;color:#555;text-transform:uppercase}.value{font-size:16px;font-weight:700;display:flex;justify-content:center;gap:6px;align-items:center;text-transform:uppercase}.arrow{font-size:12px}\n"] }]
|
|
2213
2239
|
}], propDecorators: { title: [{
|
|
2214
2240
|
type: Input$1
|
|
2215
2241
|
}], confirm: [{
|
|
@@ -2390,10 +2416,9 @@ class SideCard {
|
|
|
2390
2416
|
//actions
|
|
2391
2417
|
showBtnPrimary = false;
|
|
2392
2418
|
primaryButtonLabel = 'Aceptar';
|
|
2393
|
-
primaryButtonClick = new EventEmitter();
|
|
2394
2419
|
showBtnSecondary = false;
|
|
2395
2420
|
secondaryButtonLabel = 'Cancelar';
|
|
2396
|
-
|
|
2421
|
+
buttonClick = new EventEmitter();
|
|
2397
2422
|
get statusLabel() {
|
|
2398
2423
|
return this.statusValue === 1 ? 'Activo' : 'Inactivo';
|
|
2399
2424
|
}
|
|
@@ -2402,6 +2427,10 @@ class SideCard {
|
|
|
2402
2427
|
? 'status-chip-active'
|
|
2403
2428
|
: 'status-chip-inactive';
|
|
2404
2429
|
}
|
|
2430
|
+
get sliderPercentage() {
|
|
2431
|
+
const max = this.max || 1000;
|
|
2432
|
+
return ((this.sliderValue / max) * 100) + '%';
|
|
2433
|
+
}
|
|
2405
2434
|
// Inicializa slider cuando llegan secciones
|
|
2406
2435
|
ngOnChanges() {
|
|
2407
2436
|
const section = this.sections.find(s => s.showSlider);
|
|
@@ -2426,19 +2455,13 @@ class SideCard {
|
|
|
2426
2455
|
onSliderChange(event) {
|
|
2427
2456
|
const input = event.target;
|
|
2428
2457
|
this.sliderValue = Number(input.value);
|
|
2429
|
-
const max = Number(input.max || 1000);
|
|
2430
|
-
const percentage = (this.sliderValue / max) * 100;
|
|
2431
|
-
input.style.setProperty('--slider-value', percentage + '%');
|
|
2432
2458
|
this.sliderChange.emit(this.sliderValue);
|
|
2433
2459
|
}
|
|
2434
|
-
|
|
2460
|
+
onButtonSectionClick(section) {
|
|
2435
2461
|
this.sectionButtonClick.emit(section);
|
|
2436
2462
|
}
|
|
2437
|
-
|
|
2438
|
-
this.
|
|
2439
|
-
}
|
|
2440
|
-
onSecondaryClick() {
|
|
2441
|
-
this.secondaryButtonClick.emit();
|
|
2463
|
+
onButtonClick(type) {
|
|
2464
|
+
this.buttonClick.emit(type);
|
|
2442
2465
|
}
|
|
2443
2466
|
changeStatusLabel() {
|
|
2444
2467
|
if (this.modeSideCard !== 'edit')
|
|
@@ -2450,11 +2473,11 @@ class SideCard {
|
|
|
2450
2473
|
this.btnClickIcon.emit();
|
|
2451
2474
|
}
|
|
2452
2475
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SideCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2453
|
-
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",
|
|
2476
|
+
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", buttonClick: "buttonClick" }, 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 [style.--slider-value]=\"sliderPercentage\" (input)=\"onSliderChange($event)\" />\r\n }} @if (section.buttonSectionLabel && modeSideCard !== 'info') {\r\n <button class=\"btn-assign\" (click)=\"onButtonSectionClick(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)=\"onButtonClick('primary')\">{{ primaryButtonLabel }}</button>\r\n }\r\n @if (showBtnSecondary) {\r\n <button class=\"btn-secondary\" (click)=\"onButtonClick('secondary')\">{{ 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;text-transform:uppercase}.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%;text-transform:uppercase}.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"] }] });
|
|
2454
2477
|
}
|
|
2455
2478
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SideCard, decorators: [{
|
|
2456
2479
|
type: Component,
|
|
2457
|
-
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
|
|
2480
|
+
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 [style.--slider-value]=\"sliderPercentage\" (input)=\"onSliderChange($event)\" />\r\n }} @if (section.buttonSectionLabel && modeSideCard !== 'info') {\r\n <button class=\"btn-assign\" (click)=\"onButtonSectionClick(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)=\"onButtonClick('primary')\">{{ primaryButtonLabel }}</button>\r\n }\r\n @if (showBtnSecondary) {\r\n <button class=\"btn-secondary\" (click)=\"onButtonClick('secondary')\">{{ 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;text-transform:uppercase}.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%;text-transform:uppercase}.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"] }]
|
|
2458
2481
|
}], propDecorators: { isFloating: [{
|
|
2459
2482
|
type: Input$1
|
|
2460
2483
|
}], isCompact: [{
|
|
@@ -2491,16 +2514,193 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
2491
2514
|
type: Input$1
|
|
2492
2515
|
}], primaryButtonLabel: [{
|
|
2493
2516
|
type: Input$1
|
|
2494
|
-
}], primaryButtonClick: [{
|
|
2495
|
-
type: Output
|
|
2496
2517
|
}], showBtnSecondary: [{
|
|
2497
2518
|
type: Input$1
|
|
2498
2519
|
}], secondaryButtonLabel: [{
|
|
2499
2520
|
type: Input$1
|
|
2500
|
-
}],
|
|
2521
|
+
}], buttonClick: [{
|
|
2501
2522
|
type: Output
|
|
2502
2523
|
}] } });
|
|
2503
2524
|
|
|
2525
|
+
class SideCardDetail {
|
|
2526
|
+
isFloating = true;
|
|
2527
|
+
isCompact = false;
|
|
2528
|
+
nowLabel = 'Ahora mismo';
|
|
2529
|
+
agoLabel = 'Hace';
|
|
2530
|
+
// Header
|
|
2531
|
+
title = 'Titulo';
|
|
2532
|
+
subtitle = 'Subtitulo';
|
|
2533
|
+
btnClickIcon = new EventEmitter();
|
|
2534
|
+
statusValue = 1; // backend value
|
|
2535
|
+
statusChange = new EventEmitter();
|
|
2536
|
+
// Sections
|
|
2537
|
+
sections = [];
|
|
2538
|
+
activeTab = 'principal';
|
|
2539
|
+
tabChange = new EventEmitter();
|
|
2540
|
+
get statusLabel() {
|
|
2541
|
+
return this.statusValue === 1 ? 'Dentro de geocerca' : 'Fuera de geocerca';
|
|
2542
|
+
}
|
|
2543
|
+
get statusClass() {
|
|
2544
|
+
return this.statusValue === 1
|
|
2545
|
+
? 'status-chip-active'
|
|
2546
|
+
: 'status-chip-inactive';
|
|
2547
|
+
}
|
|
2548
|
+
buttonClickIcon(type) {
|
|
2549
|
+
this.btnClickIcon.emit(type);
|
|
2550
|
+
}
|
|
2551
|
+
setTab(tab) {
|
|
2552
|
+
this.activeTab = tab;
|
|
2553
|
+
this.tabChange.emit(tab);
|
|
2554
|
+
}
|
|
2555
|
+
getIndicatorLeft() {
|
|
2556
|
+
return this.activeTab === 'principal' ? '0%' : '50%';
|
|
2557
|
+
}
|
|
2558
|
+
isDateValue(value) {
|
|
2559
|
+
if (!value)
|
|
2560
|
+
return false;
|
|
2561
|
+
return (typeof value === 'string' &&
|
|
2562
|
+
!isNaN(Date.parse(value)));
|
|
2563
|
+
}
|
|
2564
|
+
getRelativeTime(date) {
|
|
2565
|
+
const d = new Date(date);
|
|
2566
|
+
const now = new Date();
|
|
2567
|
+
if (isNaN(d.getTime()))
|
|
2568
|
+
return '';
|
|
2569
|
+
const diff = Math.floor((now.getTime() - d.getTime()) / 1000);
|
|
2570
|
+
if (diff < 10)
|
|
2571
|
+
return this.nowLabel;
|
|
2572
|
+
const units = [
|
|
2573
|
+
{ singular: 'Segundo', plural: 'Segundos', value: 60 },
|
|
2574
|
+
{ singular: 'Minuto', plural: 'Minutos', value: 60 },
|
|
2575
|
+
{ singular: 'Hora', plural: 'Horas', value: 24 },
|
|
2576
|
+
{ singular: 'Día', plural: 'Días', value: 7 },
|
|
2577
|
+
{ singular: 'Semana', plural: 'Semanas', value: 4 },
|
|
2578
|
+
{ singular: 'Mes', plural: 'Meses', value: 12 },
|
|
2579
|
+
{ singular: 'Año', plural: 'Años', value: Infinity }
|
|
2580
|
+
];
|
|
2581
|
+
let value = diff;
|
|
2582
|
+
let unit = units[0];
|
|
2583
|
+
for (let i = 0; i < units.length; i++) {
|
|
2584
|
+
if (value < units[i].value) {
|
|
2585
|
+
unit = units[i];
|
|
2586
|
+
break;
|
|
2587
|
+
}
|
|
2588
|
+
value = Math.floor(value / units[i].value);
|
|
2589
|
+
}
|
|
2590
|
+
const label = value === 1 ? unit.singular : unit.plural;
|
|
2591
|
+
return `${this.agoLabel} ${value} ${label}`;
|
|
2592
|
+
}
|
|
2593
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SideCardDetail, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2594
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: SideCardDetail, isStandalone: true, selector: "lib-side-card-detail", inputs: { isFloating: "isFloating", isCompact: "isCompact", title: "title", subtitle: "subtitle", statusValue: "statusValue", sections: "sections" }, outputs: { btnClickIcon: "btnClickIcon", statusChange: "statusChange", tabChange: "tabChange" }, ngImport: i0, template: "<div class=\"side-card\" [class.floating]=\"isFloating\" [class.compact]=\"isCompact\">\r\n <div class=\"element-header\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"icon icon-tabler icons-tabler-outline icon-tabler-arrow-left\"\r\n (click)=\"buttonClickIcon('back')\">\r\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path d=\"M5 12l12 0\" />\r\n <path d=\"M5 12l4 5\" />\r\n <path d=\"M5 12l4 -5\" />\r\n </svg>\r\n\r\n <div class=\"text-container\">\r\n <span class=\"title\"> {{ title }} </span>\r\n <span class=\"subtitle\"> {{ subtitle }} </span>\r\n <div class=\"container-chip\">\r\n <span #statusChip class=\"status-chip\" [ngClass]=\"statusClass\">\r\n {{ statusLabel }}\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"right-icons\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"currentColor\"\r\n class=\"icon icon-tabler icons-tabler-filled icon-tabler-current-location\" (click)=\"buttonClickIcon('location')\">\r\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path\r\n d=\"M12 1a1 1 0 0 1 1 1v1.055a9.004 9.004 0 0 1 7.946 7.945h1.054a1 1 0 0 1 0 2h-1.055a9.004 9.004 0 0 1 -7.944 7.945l-.001 1.055a1 1 0 0 1 -2 0v-1.055a9.004 9.004 0 0 1 -7.945 -7.944l-1.055 -.001a1 1 0 0 1 0 -2h1.055a9.004 9.004 0 0 1 7.945 -7.945v-1.055a1 1 0 0 1 1 -1m0 4a7 7 0 1 0 0 14a7 7 0 0 0 0 -14m0 3a4 4 0 1 1 -4 4l.005 -.2a4 4 0 0 1 3.995 -3.8\" />\r\n </svg>\r\n\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" 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-message-circle\" (click)=\"buttonClickIcon('message')\">\r\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path\r\n d=\"M3 20l1.3 -3.9c-2.324 -3.437 -1.426 -7.872 2.1 -10.374c3.526 -2.501 8.59 -2.296 11.845 .48c3.255 2.777 3.695 7.266 1.029 10.501c-2.666 3.235 -7.615 4.215 -11.574 2.293l-4.7 1\" />\r\n </svg>\r\n </div>\r\n </div>\r\n <div class=\"side-tabs\">\r\n <div\r\n class=\"tab\"\r\n [class.active]=\"activeTab === 'principal'\"\r\n (click)=\"setTab('principal')\"\r\n >\r\n Principal\r\n </div>\r\n \r\n <div\r\n class=\"tab\"\r\n [class.active]=\"activeTab === 'historial'\"\r\n (click)=\"setTab('historial')\"\r\n >\r\n Historial\r\n </div>\r\n \r\n <div\r\n class=\"tab-indicator\"\r\n [style.left]=\"getIndicatorLeft()\"\r\n ></div>\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\">{{ isDateValue(item.value) ? getRelativeTime(item.value) : item.value }}</span>\r\n </div>\r\n } }\r\n </div>\r\n </div>\r\n }\r\n</div>", styles: [".side-card{width:368px;max-width:380px;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}.element-header{width:100%;display:flex;gap:12px}.text-container{flex:1;display:flex;flex-direction:column;gap:8px}.title{font-size:2rem;font-weight:700;text-transform:uppercase;max-lines:2}.subtitle{font-size:1.5rem;font-weight:300;color:#454733;text-transform:uppercase}.right-icons{display:flex;flex-direction:column;gap:8px}.icon{color:#1c1c1c;cursor:pointer}.icon.icon-tabler-current-location{color:#d3d936}.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;margin-bottom:12px}.status-chip-active{background-color:#78db5c;color:#0f5e00}.status-chip-inactive{background-color:#a60321;color:#fafae8}.icon:hover{color:#61661f}.side-tabs{position:relative;display:flex;width:100%;border-bottom:2px solid #C7C7AD;margin-bottom:8px}.tab{flex:1;text-align:center;padding:12px 0;font-size:1.4rem;font-weight:500;cursor:pointer;color:#454733;transition:color .3s ease;text-transform:uppercase}.tab.active{background-color:transparent;color:#596300;font-weight:600}.tab:hover{color:#6a7500}.tab-indicator{position:absolute;bottom:-2px;left:0;width:50%;height:4px;background-color:#596300;border-radius:4px 4px 0 0;transition:left .3s ease}.element-section{display:flex;flex-direction:column;gap:8px}.element-section h3{margin:0;font-size:1.6rem;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,.element-item .value{font-size:1.5rem;color:#454733;font-weight:300;text-transform:uppercase}.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"] }] });
|
|
2595
|
+
}
|
|
2596
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SideCardDetail, decorators: [{
|
|
2597
|
+
type: Component,
|
|
2598
|
+
args: [{ selector: 'lib-side-card-detail', imports: [CommonModule], template: "<div class=\"side-card\" [class.floating]=\"isFloating\" [class.compact]=\"isCompact\">\r\n <div class=\"element-header\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"icon icon-tabler icons-tabler-outline icon-tabler-arrow-left\"\r\n (click)=\"buttonClickIcon('back')\">\r\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path d=\"M5 12l12 0\" />\r\n <path d=\"M5 12l4 5\" />\r\n <path d=\"M5 12l4 -5\" />\r\n </svg>\r\n\r\n <div class=\"text-container\">\r\n <span class=\"title\"> {{ title }} </span>\r\n <span class=\"subtitle\"> {{ subtitle }} </span>\r\n <div class=\"container-chip\">\r\n <span #statusChip class=\"status-chip\" [ngClass]=\"statusClass\">\r\n {{ statusLabel }}\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"right-icons\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"currentColor\"\r\n class=\"icon icon-tabler icons-tabler-filled icon-tabler-current-location\" (click)=\"buttonClickIcon('location')\">\r\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path\r\n d=\"M12 1a1 1 0 0 1 1 1v1.055a9.004 9.004 0 0 1 7.946 7.945h1.054a1 1 0 0 1 0 2h-1.055a9.004 9.004 0 0 1 -7.944 7.945l-.001 1.055a1 1 0 0 1 -2 0v-1.055a9.004 9.004 0 0 1 -7.945 -7.944l-1.055 -.001a1 1 0 0 1 0 -2h1.055a9.004 9.004 0 0 1 7.945 -7.945v-1.055a1 1 0 0 1 1 -1m0 4a7 7 0 1 0 0 14a7 7 0 0 0 0 -14m0 3a4 4 0 1 1 -4 4l.005 -.2a4 4 0 0 1 3.995 -3.8\" />\r\n </svg>\r\n\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" 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-message-circle\" (click)=\"buttonClickIcon('message')\">\r\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path\r\n d=\"M3 20l1.3 -3.9c-2.324 -3.437 -1.426 -7.872 2.1 -10.374c3.526 -2.501 8.59 -2.296 11.845 .48c3.255 2.777 3.695 7.266 1.029 10.501c-2.666 3.235 -7.615 4.215 -11.574 2.293l-4.7 1\" />\r\n </svg>\r\n </div>\r\n </div>\r\n <div class=\"side-tabs\">\r\n <div\r\n class=\"tab\"\r\n [class.active]=\"activeTab === 'principal'\"\r\n (click)=\"setTab('principal')\"\r\n >\r\n Principal\r\n </div>\r\n \r\n <div\r\n class=\"tab\"\r\n [class.active]=\"activeTab === 'historial'\"\r\n (click)=\"setTab('historial')\"\r\n >\r\n Historial\r\n </div>\r\n \r\n <div\r\n class=\"tab-indicator\"\r\n [style.left]=\"getIndicatorLeft()\"\r\n ></div>\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\">{{ isDateValue(item.value) ? getRelativeTime(item.value) : item.value }}</span>\r\n </div>\r\n } }\r\n </div>\r\n </div>\r\n }\r\n</div>", styles: [".side-card{width:368px;max-width:380px;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}.element-header{width:100%;display:flex;gap:12px}.text-container{flex:1;display:flex;flex-direction:column;gap:8px}.title{font-size:2rem;font-weight:700;text-transform:uppercase;max-lines:2}.subtitle{font-size:1.5rem;font-weight:300;color:#454733;text-transform:uppercase}.right-icons{display:flex;flex-direction:column;gap:8px}.icon{color:#1c1c1c;cursor:pointer}.icon.icon-tabler-current-location{color:#d3d936}.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;margin-bottom:12px}.status-chip-active{background-color:#78db5c;color:#0f5e00}.status-chip-inactive{background-color:#a60321;color:#fafae8}.icon:hover{color:#61661f}.side-tabs{position:relative;display:flex;width:100%;border-bottom:2px solid #C7C7AD;margin-bottom:8px}.tab{flex:1;text-align:center;padding:12px 0;font-size:1.4rem;font-weight:500;cursor:pointer;color:#454733;transition:color .3s ease;text-transform:uppercase}.tab.active{background-color:transparent;color:#596300;font-weight:600}.tab:hover{color:#6a7500}.tab-indicator{position:absolute;bottom:-2px;left:0;width:50%;height:4px;background-color:#596300;border-radius:4px 4px 0 0;transition:left .3s ease}.element-section{display:flex;flex-direction:column;gap:8px}.element-section h3{margin:0;font-size:1.6rem;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,.element-item .value{font-size:1.5rem;color:#454733;font-weight:300;text-transform:uppercase}.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"] }]
|
|
2599
|
+
}], propDecorators: { isFloating: [{
|
|
2600
|
+
type: Input$1
|
|
2601
|
+
}], isCompact: [{
|
|
2602
|
+
type: Input$1
|
|
2603
|
+
}], title: [{
|
|
2604
|
+
type: Input$1
|
|
2605
|
+
}], subtitle: [{
|
|
2606
|
+
type: Input$1
|
|
2607
|
+
}], btnClickIcon: [{
|
|
2608
|
+
type: Output
|
|
2609
|
+
}], statusValue: [{
|
|
2610
|
+
type: Input$1
|
|
2611
|
+
}], statusChange: [{
|
|
2612
|
+
type: Output
|
|
2613
|
+
}], sections: [{
|
|
2614
|
+
type: Input$1
|
|
2615
|
+
}], tabChange: [{
|
|
2616
|
+
type: Output
|
|
2617
|
+
}] } });
|
|
2618
|
+
|
|
2619
|
+
class DevicesCarousel {
|
|
2620
|
+
devices = [];
|
|
2621
|
+
nowLabel = 'AHORA MISMO';
|
|
2622
|
+
agoLabel = 'HACE';
|
|
2623
|
+
canScrollLeft = false;
|
|
2624
|
+
canScrollRight = false;
|
|
2625
|
+
listRef;
|
|
2626
|
+
onResize() {
|
|
2627
|
+
this.updateScrollButtons();
|
|
2628
|
+
}
|
|
2629
|
+
onScroll(el) {
|
|
2630
|
+
this.updateScrollButtons(el);
|
|
2631
|
+
}
|
|
2632
|
+
updateScrollButtons(el) {
|
|
2633
|
+
const element = el ?? this.listRef?.nativeElement;
|
|
2634
|
+
if (!element)
|
|
2635
|
+
return;
|
|
2636
|
+
this.canScrollLeft = element.scrollLeft > 0;
|
|
2637
|
+
this.canScrollRight =
|
|
2638
|
+
element.scrollLeft + element.clientWidth < element.scrollWidth - 1;
|
|
2639
|
+
}
|
|
2640
|
+
ngAfterViewInit() {
|
|
2641
|
+
setTimeout(() => {
|
|
2642
|
+
this.updateScrollButtons();
|
|
2643
|
+
});
|
|
2644
|
+
}
|
|
2645
|
+
scroll(el, dir) {
|
|
2646
|
+
const amount = 300;
|
|
2647
|
+
el.scrollBy({
|
|
2648
|
+
left: dir === 'right' ? amount : -amount,
|
|
2649
|
+
behavior: 'smooth'
|
|
2650
|
+
});
|
|
2651
|
+
setTimeout(() => this.updateScrollButtons(el), 300);
|
|
2652
|
+
}
|
|
2653
|
+
getGeofenceClass(state) {
|
|
2654
|
+
return state === 'inside' ? 'badge-inside' : 'badge-outside';
|
|
2655
|
+
}
|
|
2656
|
+
getSignalClass(level) {
|
|
2657
|
+
return 'signal-' + level;
|
|
2658
|
+
}
|
|
2659
|
+
getRelativeTime(date) {
|
|
2660
|
+
const d = new Date(date);
|
|
2661
|
+
const now = new Date();
|
|
2662
|
+
if (isNaN(d.getTime()))
|
|
2663
|
+
return 'Fecha inválida';
|
|
2664
|
+
const diff = Math.floor((now.getTime() - d.getTime()) / 1000);
|
|
2665
|
+
if (diff < 10)
|
|
2666
|
+
return this.nowLabel;
|
|
2667
|
+
const units = [
|
|
2668
|
+
{ singular: 'SEGUNDO', plural: 'SEGUNDOS', value: 60 },
|
|
2669
|
+
{ singular: 'MINUTO', plural: 'MINUTOS', value: 60 },
|
|
2670
|
+
{ singular: 'HORA', plural: 'HORAS', value: 24 },
|
|
2671
|
+
{ singular: 'DÍA', plural: 'DÍAS', value: 7 },
|
|
2672
|
+
{ singular: 'SEMANA', plural: 'SEMANAS', value: 4 },
|
|
2673
|
+
{ singular: 'MES', plural: 'MESES', value: 12 },
|
|
2674
|
+
{ singular: 'AÑO', plural: 'AÑOS', value: Infinity }
|
|
2675
|
+
];
|
|
2676
|
+
let value = diff;
|
|
2677
|
+
let unit = units[0];
|
|
2678
|
+
for (let i = 0; i < units.length; i++) {
|
|
2679
|
+
if (value < units[i].value) {
|
|
2680
|
+
unit = units[i];
|
|
2681
|
+
break;
|
|
2682
|
+
}
|
|
2683
|
+
value = Math.floor(value / units[i].value);
|
|
2684
|
+
}
|
|
2685
|
+
const label = value === 1 ? unit.singular : unit.plural;
|
|
2686
|
+
return `${this.agoLabel} ${value} ${label}`;
|
|
2687
|
+
}
|
|
2688
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DevicesCarousel, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2689
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DevicesCarousel, isStandalone: true, selector: "lib-devices-carousel", inputs: { devices: "devices" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "listRef", first: true, predicate: ["list"], descendants: true }], ngImport: i0, template: "<div class=\"carousel-container\">\r\n <div class=\"carousel-wrapper\">\r\n\r\n @if (canScrollLeft) {\r\n <button class=\"nav left\" (click)=\"scroll(list,'left')\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\r\n class=\"icon icon-tabler icons-tabler-outline icon-tabler-chevron-left\" viewBox=\"0 0 24 24\">\r\n <path fill=\"none\" stroke=\"none\" d=\"M0 0h24v24H0z\" />\r\n <path d=\"m15 6-6 6 6 6\" />\r\n </svg>\r\n </button>\r\n }\r\n\r\n <div class=\"carousel-mask\">\r\n <div class=\"carousel-list\" #list (scroll)=\"onScroll(list)\">\r\n @for (d of devices; track d.code) {\r\n <div class=\"device-card\">\r\n <div class=\"card-header\">\r\n <span class=\"code\">{{ d.code }} - {{ d.name }}</span>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"currentColor\"\r\n class=\"target icon icon-tabler icons-tabler-filled icon-tabler-current-location\"\r\n viewBox=\"0 0 24 24\">\r\n <path fill=\"none\" d=\"M0 0h24v24H0z\" />\r\n <path\r\n d=\"M12 1a1 1 0 0 1 1 1v1.055A9.004 9.004 0 0 1 20.946 11H22a1 1 0 0 1 0 2h-1.055a9.004 9.004 0 0 1-7.944 7.945L13 22a1 1 0 0 1-2 0v-1.055a9.004 9.004 0 0 1-7.945-7.944L2 13a1 1 0 0 1 0-2h1.055A9.004 9.004 0 0 1 11 3.055V2a1 1 0 0 1 1-1m0 4a7 7 0 1 0 0 14 7 7 0 0 0 0-14m0 3a4 4 0 1 1-4 4l.005-.2A4 4 0 0 1 12 8\" />\r\n </svg>\r\n </div>\r\n\r\n <span class=\"geofence\">{{ d.geofenceName }}</span>\r\n\r\n <div class=\"device-info\">\r\n <span>{{ d.deviceInfo }}</span>\r\n <div class=\"icons\">\r\n @if (d.status.wifi) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\"\r\n viewBox=\"0 0 20 20\">\r\n <path fill=\"#454733\"\r\n d=\"M.833 7.314 2.5 8.98c4.142-4.141 10.858-4.141 15 0l1.667-1.666C14.108 2.255 5.9 2.255.833 7.314M7.5 13.98l2.5 2.5 2.5-2.5a3.53 3.53 0 0 0-5 0m-3.333-3.333 1.666 1.667c2.3-2.3 6.034-2.3 8.334 0l1.666-1.667c-3.216-3.217-8.441-3.217-11.666 0\" />\r\n </svg>\r\n } @else {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\"\r\n viewBox=\"0 0 20 20\">\r\n <path fill=\"#454733\"\r\n d=\"m17.5 10.142 1.667-1.667C16.058 5.367 11.775 4.183 7.75 4.883l2.15 2.15a10.62 10.62 0 0 1 7.6 3.109m-1.667 1.666a8.25 8.25 0 0 0-3.1-1.941l2.517 2.516zM7.5 15.142l2.5 2.5 2.5-2.5a3.53 3.53 0 0 0-5 0m-4.658-12.8L1.667 3.517l2.541 2.541A13.1 13.1 0 0 0 .833 8.475L2.5 10.142a10.5 10.5 0 0 1 3.475-2.317l1.867 1.867a8.2 8.2 0 0 0-3.675 2.116l1.666 1.667a5.83 5.83 0 0 1 4.075-1.717l5.9 5.9 1.175-1.175z\" />\r\n </svg>\r\n }\r\n @if (d.status.signalStatus! >= 3) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\"\r\n viewBox=\"0 0 20 20\">\r\n <path fill=\"#454733\" d=\"M1.667 18.333h16.666V1.667z\" />\r\n </svg>\r\n } @else {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\"\r\n viewBox=\"0 0 20 20\">\r\n <path fill=\"#454733\" d=\"M1.667 18.333h16.666V1.667zm15-1.666H5.692L16.667 5.692z\" />\r\n </svg>\r\n }\r\n @if (d.status.bluetooth) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\"\r\n viewBox=\"0 0 20 20\">\r\n <path fill=\"#454733\"\r\n d=\"m15.296 6.425-4.758-4.758h-.834v6.325L5.88 4.167 4.704 5.342 9.363 10l-4.659 4.658 1.175 1.175 3.825-3.825v6.325h.834l4.758-4.758L11.713 10zM11.37 4.858l1.567 1.567-1.567 1.567zm1.567 8.717-1.567 1.567v-3.134z\" />\r\n </svg>\r\n } @else {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\"\r\n viewBox=\"0 0 20 20\">\r\n <path fill=\"#454733\"\r\n d=\"M10.833 4.858 12.4 6.425l-1.333 1.333 1.175 1.175 2.516-2.516L10 1.667h-.833v4.191l1.666 1.667zM4.508 3.333 3.333 4.508 8.825 10l-4.658 4.658 1.175 1.175 3.825-3.825v6.325H10l3.575-3.575 1.917 1.909 1.175-1.175zm6.325 11.809v-3.134l1.567 1.567z\" />\r\n </svg>\r\n }\r\n @if (d.status.gps) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\"\r\n viewBox=\"0 0 20 20\">\r\n <g clip-path=\"url(#clip0_3_9268)\">\r\n <path fill=\"#454733\"\r\n d=\"M10 6.667a3.332 3.332 0 1 0 0 6.666 3.332 3.332 0 1 0 0-6.666m7.45 2.5a7.495 7.495 0 0 0-6.617-6.617V.833H9.167V2.55A7.495 7.495 0 0 0 2.55 9.167H.833v1.666H2.55a7.495 7.495 0 0 0 6.617 6.617v1.717h1.666V17.45a7.495 7.495 0 0 0 6.617-6.617h1.717V9.167zM10 15.833A5.83 5.83 0 0 1 4.167 10 5.83 5.83 0 0 1 10 4.167 5.83 5.83 0 0 1 15.833 10 5.83 5.83 0 0 1 10 15.833\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3_9268\">\r\n <path fill=\"#fff\" d=\"M0 0h20v20H0z\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n } @else {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\"\r\n viewBox=\"0 0 20 20\">\r\n <g clip-path=\"url(#clip0_3_9268)\">\r\n <path fill=\"#454733\"\r\n d=\"M17.45 9.167a7.495 7.495 0 0 0-6.617-6.617V.833H9.167V2.55a7.4 7.4 0 0 0-2.309.65l1.275 1.275a5.83 5.83 0 0 1 7.392 7.392l1.275 1.275a7.4 7.4 0 0 0 .65-2.309h1.717V9.167zM2.5 3.558l1.7 1.7a7.5 7.5 0 0 0-1.65 3.909H.833v1.666H2.55a7.495 7.495 0 0 0 6.617 6.617v1.717h1.666V17.45a7.5 7.5 0 0 0 3.909-1.65l1.7 1.7 1.175-1.175L3.675 2.383zm11.058 11.059a5.829 5.829 0 0 1-8.175-8.175z\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3_9268\">\r\n <path fill=\"#fff\" d=\"M0 0h20v20H0z\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n }\r\n </div>\r\n </div>\r\n <div class=\"card-footer\">\r\n <span class=\"badge\" [ngClass]=\"getGeofenceClass(d.status.geofence)\">\r\n {{ d.status.geofence === 'inside' ? 'DENTRO DE GEOCERCA' : 'FUERA DE GEOCERCA' }}\r\n </span>\r\n\r\n <span class=\"badge update\">{{ getRelativeTime(d.lastUpdate) }}</span>\r\n </div>\r\n\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n @if (canScrollRight) {\r\n <button class=\"nav right\" (click)=\"scroll(list,'right')\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\r\n class=\"icon icon-tabler icons-tabler-outline icon-tabler-chevron-right\" viewBox=\"0 0 24 24\">\r\n <path fill=\"none\" stroke=\"none\" d=\"M0 0h24v24H0z\" />\r\n <path d=\"m9 6 6 6-6 6\" />\r\n </svg>\r\n </button>\r\n }\r\n </div>\r\n\r\n</div>", styles: [".carousel-container{width:100%}.carousel-title{font-weight:600;color:#6f6f6f}.carousel-wrapper{position:relative;width:100%;display:flex;gap:16px;align-items:center}.carousel-mask{overflow:hidden;flex:1;border-radius:20px}.carousel-list{width:100%;display:flex;gap:16px;justify-content:space-between;overflow-x:auto;scroll-behavior:smooth;padding:8px 0;border-radius:20px}.carousel-list::-webkit-scrollbar{display:none}.device-card{width:100%;min-width:220px;max-width:340px;height:auto;background:#f5f5e0;border-radius:20px;padding:16px;box-shadow:0 2px 6px #00000026;display:flex;flex-direction:column;gap:8px;flex-shrink:0}.card-header{width:100%;display:flex;font-weight:600;gap:16px;align-items:center}.code{flex:1;font-size:1.6rem;font-weight:700;color:#1c1c12;text-transform:uppercase;max-lines:1;text-overflow:ellipsis}.geofence{font-size:1.4rem;color:#1c1c12;max-lines:1;text-overflow:ellipsis;text-transform:uppercase}.device-info{display:flex;align-items:center;gap:12px;font-size:1.3rem;color:#454733;text-transform:uppercase}.icons span{margin-right:6px}.icon-active{color:#3cb371}.icon-inactive{color:#aaa}.card-footer{display:flex;gap:12px;align-items:center}.badge{font-size:1.1rem;padding:6px 12px;border-radius:8px}.badge-inside{background:#78db5c;color:#0f5e00}.badge-outside{background:#a60321;color:#fafae8}.badge.update{font-size:11px;color:#454733;background:#00c0e8}.nav{position:relative;background:transparent;border:none;font-size:24px;cursor:pointer;z-index:10}.nav.left{left:6px}.nav.right{right:6px}.icon{color:#1c1c1c;cursor:pointer}.icon.icon-tabler-current-location{color:#d3d936}.icon.icon-tabler-current-location:hover{color:#61661f}.icon-active path{fill:#454733}.signal-1 path{fill-opacity:.25}.signal-2 path{fill-opacity:.5}.signal-3 path{fill-opacity:.75}.signal-4 path{fill-opacity:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
2690
|
+
}
|
|
2691
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DevicesCarousel, decorators: [{
|
|
2692
|
+
type: Component,
|
|
2693
|
+
args: [{ selector: 'lib-devices-carousel', imports: [CommonModule], template: "<div class=\"carousel-container\">\r\n <div class=\"carousel-wrapper\">\r\n\r\n @if (canScrollLeft) {\r\n <button class=\"nav left\" (click)=\"scroll(list,'left')\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\r\n class=\"icon icon-tabler icons-tabler-outline icon-tabler-chevron-left\" viewBox=\"0 0 24 24\">\r\n <path fill=\"none\" stroke=\"none\" d=\"M0 0h24v24H0z\" />\r\n <path d=\"m15 6-6 6 6 6\" />\r\n </svg>\r\n </button>\r\n }\r\n\r\n <div class=\"carousel-mask\">\r\n <div class=\"carousel-list\" #list (scroll)=\"onScroll(list)\">\r\n @for (d of devices; track d.code) {\r\n <div class=\"device-card\">\r\n <div class=\"card-header\">\r\n <span class=\"code\">{{ d.code }} - {{ d.name }}</span>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"currentColor\"\r\n class=\"target icon icon-tabler icons-tabler-filled icon-tabler-current-location\"\r\n viewBox=\"0 0 24 24\">\r\n <path fill=\"none\" d=\"M0 0h24v24H0z\" />\r\n <path\r\n d=\"M12 1a1 1 0 0 1 1 1v1.055A9.004 9.004 0 0 1 20.946 11H22a1 1 0 0 1 0 2h-1.055a9.004 9.004 0 0 1-7.944 7.945L13 22a1 1 0 0 1-2 0v-1.055a9.004 9.004 0 0 1-7.945-7.944L2 13a1 1 0 0 1 0-2h1.055A9.004 9.004 0 0 1 11 3.055V2a1 1 0 0 1 1-1m0 4a7 7 0 1 0 0 14 7 7 0 0 0 0-14m0 3a4 4 0 1 1-4 4l.005-.2A4 4 0 0 1 12 8\" />\r\n </svg>\r\n </div>\r\n\r\n <span class=\"geofence\">{{ d.geofenceName }}</span>\r\n\r\n <div class=\"device-info\">\r\n <span>{{ d.deviceInfo }}</span>\r\n <div class=\"icons\">\r\n @if (d.status.wifi) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\"\r\n viewBox=\"0 0 20 20\">\r\n <path fill=\"#454733\"\r\n d=\"M.833 7.314 2.5 8.98c4.142-4.141 10.858-4.141 15 0l1.667-1.666C14.108 2.255 5.9 2.255.833 7.314M7.5 13.98l2.5 2.5 2.5-2.5a3.53 3.53 0 0 0-5 0m-3.333-3.333 1.666 1.667c2.3-2.3 6.034-2.3 8.334 0l1.666-1.667c-3.216-3.217-8.441-3.217-11.666 0\" />\r\n </svg>\r\n } @else {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\"\r\n viewBox=\"0 0 20 20\">\r\n <path fill=\"#454733\"\r\n d=\"m17.5 10.142 1.667-1.667C16.058 5.367 11.775 4.183 7.75 4.883l2.15 2.15a10.62 10.62 0 0 1 7.6 3.109m-1.667 1.666a8.25 8.25 0 0 0-3.1-1.941l2.517 2.516zM7.5 15.142l2.5 2.5 2.5-2.5a3.53 3.53 0 0 0-5 0m-4.658-12.8L1.667 3.517l2.541 2.541A13.1 13.1 0 0 0 .833 8.475L2.5 10.142a10.5 10.5 0 0 1 3.475-2.317l1.867 1.867a8.2 8.2 0 0 0-3.675 2.116l1.666 1.667a5.83 5.83 0 0 1 4.075-1.717l5.9 5.9 1.175-1.175z\" />\r\n </svg>\r\n }\r\n @if (d.status.signalStatus! >= 3) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\"\r\n viewBox=\"0 0 20 20\">\r\n <path fill=\"#454733\" d=\"M1.667 18.333h16.666V1.667z\" />\r\n </svg>\r\n } @else {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\"\r\n viewBox=\"0 0 20 20\">\r\n <path fill=\"#454733\" d=\"M1.667 18.333h16.666V1.667zm15-1.666H5.692L16.667 5.692z\" />\r\n </svg>\r\n }\r\n @if (d.status.bluetooth) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\"\r\n viewBox=\"0 0 20 20\">\r\n <path fill=\"#454733\"\r\n d=\"m15.296 6.425-4.758-4.758h-.834v6.325L5.88 4.167 4.704 5.342 9.363 10l-4.659 4.658 1.175 1.175 3.825-3.825v6.325h.834l4.758-4.758L11.713 10zM11.37 4.858l1.567 1.567-1.567 1.567zm1.567 8.717-1.567 1.567v-3.134z\" />\r\n </svg>\r\n } @else {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\"\r\n viewBox=\"0 0 20 20\">\r\n <path fill=\"#454733\"\r\n d=\"M10.833 4.858 12.4 6.425l-1.333 1.333 1.175 1.175 2.516-2.516L10 1.667h-.833v4.191l1.666 1.667zM4.508 3.333 3.333 4.508 8.825 10l-4.658 4.658 1.175 1.175 3.825-3.825v6.325H10l3.575-3.575 1.917 1.909 1.175-1.175zm6.325 11.809v-3.134l1.567 1.567z\" />\r\n </svg>\r\n }\r\n @if (d.status.gps) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\"\r\n viewBox=\"0 0 20 20\">\r\n <g clip-path=\"url(#clip0_3_9268)\">\r\n <path fill=\"#454733\"\r\n d=\"M10 6.667a3.332 3.332 0 1 0 0 6.666 3.332 3.332 0 1 0 0-6.666m7.45 2.5a7.495 7.495 0 0 0-6.617-6.617V.833H9.167V2.55A7.495 7.495 0 0 0 2.55 9.167H.833v1.666H2.55a7.495 7.495 0 0 0 6.617 6.617v1.717h1.666V17.45a7.495 7.495 0 0 0 6.617-6.617h1.717V9.167zM10 15.833A5.83 5.83 0 0 1 4.167 10 5.83 5.83 0 0 1 10 4.167 5.83 5.83 0 0 1 15.833 10 5.83 5.83 0 0 1 10 15.833\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3_9268\">\r\n <path fill=\"#fff\" d=\"M0 0h20v20H0z\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n } @else {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\"\r\n viewBox=\"0 0 20 20\">\r\n <g clip-path=\"url(#clip0_3_9268)\">\r\n <path fill=\"#454733\"\r\n d=\"M17.45 9.167a7.495 7.495 0 0 0-6.617-6.617V.833H9.167V2.55a7.4 7.4 0 0 0-2.309.65l1.275 1.275a5.83 5.83 0 0 1 7.392 7.392l1.275 1.275a7.4 7.4 0 0 0 .65-2.309h1.717V9.167zM2.5 3.558l1.7 1.7a7.5 7.5 0 0 0-1.65 3.909H.833v1.666H2.55a7.495 7.495 0 0 0 6.617 6.617v1.717h1.666V17.45a7.5 7.5 0 0 0 3.909-1.65l1.7 1.7 1.175-1.175L3.675 2.383zm11.058 11.059a5.829 5.829 0 0 1-8.175-8.175z\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3_9268\">\r\n <path fill=\"#fff\" d=\"M0 0h20v20H0z\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n }\r\n </div>\r\n </div>\r\n <div class=\"card-footer\">\r\n <span class=\"badge\" [ngClass]=\"getGeofenceClass(d.status.geofence)\">\r\n {{ d.status.geofence === 'inside' ? 'DENTRO DE GEOCERCA' : 'FUERA DE GEOCERCA' }}\r\n </span>\r\n\r\n <span class=\"badge update\">{{ getRelativeTime(d.lastUpdate) }}</span>\r\n </div>\r\n\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n @if (canScrollRight) {\r\n <button class=\"nav right\" (click)=\"scroll(list,'right')\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\r\n class=\"icon icon-tabler icons-tabler-outline icon-tabler-chevron-right\" viewBox=\"0 0 24 24\">\r\n <path fill=\"none\" stroke=\"none\" d=\"M0 0h24v24H0z\" />\r\n <path d=\"m9 6 6 6-6 6\" />\r\n </svg>\r\n </button>\r\n }\r\n </div>\r\n\r\n</div>", styles: [".carousel-container{width:100%}.carousel-title{font-weight:600;color:#6f6f6f}.carousel-wrapper{position:relative;width:100%;display:flex;gap:16px;align-items:center}.carousel-mask{overflow:hidden;flex:1;border-radius:20px}.carousel-list{width:100%;display:flex;gap:16px;justify-content:space-between;overflow-x:auto;scroll-behavior:smooth;padding:8px 0;border-radius:20px}.carousel-list::-webkit-scrollbar{display:none}.device-card{width:100%;min-width:220px;max-width:340px;height:auto;background:#f5f5e0;border-radius:20px;padding:16px;box-shadow:0 2px 6px #00000026;display:flex;flex-direction:column;gap:8px;flex-shrink:0}.card-header{width:100%;display:flex;font-weight:600;gap:16px;align-items:center}.code{flex:1;font-size:1.6rem;font-weight:700;color:#1c1c12;text-transform:uppercase;max-lines:1;text-overflow:ellipsis}.geofence{font-size:1.4rem;color:#1c1c12;max-lines:1;text-overflow:ellipsis;text-transform:uppercase}.device-info{display:flex;align-items:center;gap:12px;font-size:1.3rem;color:#454733;text-transform:uppercase}.icons span{margin-right:6px}.icon-active{color:#3cb371}.icon-inactive{color:#aaa}.card-footer{display:flex;gap:12px;align-items:center}.badge{font-size:1.1rem;padding:6px 12px;border-radius:8px}.badge-inside{background:#78db5c;color:#0f5e00}.badge-outside{background:#a60321;color:#fafae8}.badge.update{font-size:11px;color:#454733;background:#00c0e8}.nav{position:relative;background:transparent;border:none;font-size:24px;cursor:pointer;z-index:10}.nav.left{left:6px}.nav.right{right:6px}.icon{color:#1c1c1c;cursor:pointer}.icon.icon-tabler-current-location{color:#d3d936}.icon.icon-tabler-current-location:hover{color:#61661f}.icon-active path{fill:#454733}.signal-1 path{fill-opacity:.25}.signal-2 path{fill-opacity:.5}.signal-3 path{fill-opacity:.75}.signal-4 path{fill-opacity:1}\n"] }]
|
|
2694
|
+
}], propDecorators: { devices: [{
|
|
2695
|
+
type: Input$1
|
|
2696
|
+
}], listRef: [{
|
|
2697
|
+
type: ViewChild,
|
|
2698
|
+
args: ['list', { static: false }]
|
|
2699
|
+
}], onResize: [{
|
|
2700
|
+
type: HostListener,
|
|
2701
|
+
args: ['window:resize']
|
|
2702
|
+
}] } });
|
|
2703
|
+
|
|
2504
2704
|
// src/app/components/public-api.ts
|
|
2505
2705
|
// Exportar el componente
|
|
2506
2706
|
|
|
@@ -2508,5 +2708,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
2508
2708
|
* Generated bundle index. Do not edit.
|
|
2509
2709
|
*/
|
|
2510
2710
|
|
|
2511
|
-
export { DateTimeFilter, DateTimePicker, DialogAlertComponent, DialogConfirmation, DynamicFormFields, FeatureCard, InfoGroup, Input, InputNumberFilter, InputSelectFilter, InputTextFilter, Loader, ModalForm, NotFoundModal, PaginationComponent, ProcessingOverlay, ProgressBar, ProgressFormService, STATUS_TONE_STYLES, SelectCustomSearch, SideCard, TOAST_EVENTS, Table, ToastHelper, WizardForm };
|
|
2711
|
+
export { DateTimeFilter, DateTimePicker, DevicesCarousel, DialogAlertComponent, DialogConfirmation, DynamicFormFields, FeatureCard, InfoGroup, Input, InputNumberFilter, InputSelectFilter, InputTextFilter, Loader, ModalForm, NotFoundModal, PaginationComponent, ProcessingOverlay, ProgressBar, ProgressFormService, STATUS_TONE_STYLES, SelectCustomSearch, SideCard, SideCardDetail, TOAST_EVENTS, Table, ToastHelper, WizardForm };
|
|
2512
2712
|
//# sourceMappingURL=sapenlinea-components.mjs.map
|