sapenlinea-components 0.0.35 → 0.0.37
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,
|
|
2
|
+
import { model, input, signal, computed, Component, output, HostListener, ViewChildren, forwardRef, effect, ViewChild, EventEmitter, Output, Input as Input$1, Injectable, ElementRef } 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';
|
|
@@ -122,13 +122,9 @@ class Table {
|
|
|
122
122
|
statusEnumMap = input({}, ...(ngDevMode ? [{ debugName: "statusEnumMap" }] : []));
|
|
123
123
|
chips;
|
|
124
124
|
ngAfterViewInit() {
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
const maxContentWidth = Math.max(...widths);
|
|
129
|
-
chipEls.forEach(el => {
|
|
130
|
-
el.style.width = maxContentWidth + 'px';
|
|
131
|
-
});
|
|
125
|
+
this.recalculateStatusChipWidth();
|
|
126
|
+
this.chips.changes.subscribe(() => {
|
|
127
|
+
this.recalculateStatusChipWidth();
|
|
132
128
|
});
|
|
133
129
|
}
|
|
134
130
|
toggleMenu(index) {
|
|
@@ -275,12 +271,24 @@ class Table {
|
|
|
275
271
|
row
|
|
276
272
|
});
|
|
277
273
|
}
|
|
274
|
+
recalculateStatusChipWidth() {
|
|
275
|
+
const chipEls = this.chips.map(c => c.nativeElement);
|
|
276
|
+
if (!chipEls.length)
|
|
277
|
+
return;
|
|
278
|
+
// reset previo
|
|
279
|
+
chipEls.forEach(el => (el.style.width = 'auto'));
|
|
280
|
+
const widths = chipEls.map(el => el.scrollWidth);
|
|
281
|
+
const maxContentWidth = Math.max(...widths);
|
|
282
|
+
chipEls.forEach(el => {
|
|
283
|
+
el.style.width = `${maxContentWidth}px`;
|
|
284
|
+
});
|
|
285
|
+
}
|
|
278
286
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Table, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
279
|
-
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() }}\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\"></span>\r\n </button>\r\n } @else {\r\n {{ formatValue(col, row[col.key]) }}\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-table\" (click)=\"$event.stopPropagation()\">\r\n <div class=\"modal-content-table\">\r\n <ul>\r\n @for (option of getActionsForRow(row); track $index) {\r\n <li class=\"option-item-table\" [style.color]=\"getActionColor(option)\" (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}.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-table{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-table{width:100%;border-radius:8px;border:1px solid var(--outline-variant, #c7c7ad);overflow:hidden}.option-item-table{display:flex;align-items:center;height:56px;padding:8px 12px;cursor:pointer}.option-item-table:hover{background-color:#0000001a}.option-item-table:active{background-color:#dee58f}.icon{margin-right:8px}.option-item-table .label{font-weight:500;font-size:16px;text-transform:capitalize}.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:1rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box}.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"] });
|
|
287
|
+
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 class=\"actions-header\">Acciones</th>\r\n }\r\n </tr>\r\n </thead>\r\n\r\n <tbody>\r\n @for (row of sortData(); track row['id']) {\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() }}\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\"></span>\r\n </button>\r\n } @else {\r\n {{ formatValue(col, row[col.key]) }}\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-table\" (click)=\"$event.stopPropagation()\">\r\n <div class=\"modal-content-table\">\r\n <ul>\r\n @for (option of getActionsForRow(row); track $index) {\r\n <li class=\"option-item-table\" [style.color]=\"getActionColor(option)\" (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}.inner-table thead .actions-header{text-align:center}.acciones-cell{text-align:center;padding:6px}.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-table{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-table{width:100%;border-radius:8px;border:1px solid var(--outline-variant, #c7c7ad);overflow:hidden}.option-item-table{display:flex;align-items:center;height:56px;padding:8px 12px;cursor:pointer}.option-item-table:hover{background-color:#0000001a}.option-item-table:active{background-color:#dee58f}.icon{margin-right:8px}.option-item-table .label{font-weight:500;font-size:16px;text-transform:capitalize}.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:1rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;text-transform:uppercase}.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"] });
|
|
280
288
|
}
|
|
281
289
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Table, decorators: [{
|
|
282
290
|
type: Component,
|
|
283
|
-
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() }}\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\"></span>\r\n </button>\r\n } @else {\r\n {{ formatValue(col, row[col.key]) }}\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-table\" (click)=\"$event.stopPropagation()\">\r\n <div class=\"modal-content-table\">\r\n <ul>\r\n @for (option of getActionsForRow(row); track $index) {\r\n <li class=\"option-item-table\" [style.color]=\"getActionColor(option)\" (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}.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-table{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-table{width:100%;border-radius:8px;border:1px solid var(--outline-variant, #c7c7ad);overflow:hidden}.option-item-table{display:flex;align-items:center;height:56px;padding:8px 12px;cursor:pointer}.option-item-table:hover{background-color:#0000001a}.option-item-table:active{background-color:#dee58f}.icon{margin-right:8px}.option-item-table .label{font-weight:500;font-size:16px;text-transform:capitalize}.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:1rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box}.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"] }]
|
|
291
|
+
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 class=\"actions-header\">Acciones</th>\r\n }\r\n </tr>\r\n </thead>\r\n\r\n <tbody>\r\n @for (row of sortData(); track row['id']) {\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() }}\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\"></span>\r\n </button>\r\n } @else {\r\n {{ formatValue(col, row[col.key]) }}\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-table\" (click)=\"$event.stopPropagation()\">\r\n <div class=\"modal-content-table\">\r\n <ul>\r\n @for (option of getActionsForRow(row); track $index) {\r\n <li class=\"option-item-table\" [style.color]=\"getActionColor(option)\" (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}.inner-table thead .actions-header{text-align:center}.acciones-cell{text-align:center;padding:6px}.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-table{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-table{width:100%;border-radius:8px;border:1px solid var(--outline-variant, #c7c7ad);overflow:hidden}.option-item-table{display:flex;align-items:center;height:56px;padding:8px 12px;cursor:pointer}.option-item-table:hover{background-color:#0000001a}.option-item-table:active{background-color:#dee58f}.icon{margin-right:8px}.option-item-table .label{font-weight:500;font-size:16px;text-transform:capitalize}.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:1rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;text-transform:uppercase}.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"] }]
|
|
284
292
|
}], 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: [{
|
|
285
293
|
type: ViewChildren,
|
|
286
294
|
args: ['statusChip']
|
|
@@ -767,11 +775,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
767
775
|
class DateTimeFilter {
|
|
768
776
|
elementRef;
|
|
769
777
|
ngZone;
|
|
778
|
+
chipRef;
|
|
770
779
|
// Inputs
|
|
771
780
|
filters = input([], ...(ngDevMode ? [{ debugName: "filters" }] : []));
|
|
772
781
|
// Outputs
|
|
773
782
|
dateSelected = output();
|
|
774
783
|
dateChange = output();
|
|
784
|
+
enterPressed = output();
|
|
775
785
|
// Internal State
|
|
776
786
|
activeFilterType = signal(null, ...(ngDevMode ? [{ debugName: "activeFilterType" }] : []));
|
|
777
787
|
isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
|
|
@@ -779,6 +789,7 @@ class DateTimeFilter {
|
|
|
779
789
|
inputTextValue = signal('', ...(ngDevMode ? [{ debugName: "inputTextValue" }] : []));
|
|
780
790
|
isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
|
|
781
791
|
isTouched = signal(false, ...(ngDevMode ? [{ debugName: "isTouched" }] : []));
|
|
792
|
+
dropdownDirection = signal('right', ...(ngDevMode ? [{ debugName: "dropdownDirection" }] : []));
|
|
782
793
|
// Máscara visual dinámica para la guía de fecha __/__/____
|
|
783
794
|
// Devuelve un arreglo de caracteres con flag "filled" para poder dar color distinto
|
|
784
795
|
inputMask = computed(() => {
|
|
@@ -848,6 +859,12 @@ class DateTimeFilter {
|
|
|
848
859
|
ngOnDestroy() {
|
|
849
860
|
this.removeDocumentListener();
|
|
850
861
|
}
|
|
862
|
+
onEnter(event) {
|
|
863
|
+
if (event.key !== 'Enter')
|
|
864
|
+
return;
|
|
865
|
+
event.preventDefault();
|
|
866
|
+
this.enterPressed.emit();
|
|
867
|
+
}
|
|
851
868
|
// ControlValueAccessor Implementation
|
|
852
869
|
writeValue(value) {
|
|
853
870
|
let date = null;
|
|
@@ -877,22 +894,44 @@ class DateTimeFilter {
|
|
|
877
894
|
this.isDisabled.set(isDisabled);
|
|
878
895
|
}
|
|
879
896
|
// Public Methods
|
|
897
|
+
// toggle(filterValue: string) {
|
|
898
|
+
// if (this.isDisabled()) return;
|
|
899
|
+
// if (this.activeFilterType() === filterValue && this.isOpen()) {
|
|
900
|
+
// this.close();
|
|
901
|
+
// } else {
|
|
902
|
+
// this.activeFilterType.set(filterValue);
|
|
903
|
+
// this.open();
|
|
904
|
+
// }
|
|
905
|
+
// }
|
|
880
906
|
toggle(filterValue) {
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
if (this.activeFilterType() === filterValue && this.isOpen()) {
|
|
907
|
+
this.activeFilterType.set(filterValue);
|
|
908
|
+
if (this.isOpen()) {
|
|
884
909
|
this.close();
|
|
885
910
|
}
|
|
886
911
|
else {
|
|
887
|
-
this.activeFilterType.set(filterValue);
|
|
888
912
|
this.open();
|
|
889
913
|
}
|
|
890
914
|
}
|
|
915
|
+
calculateDropdownDirectionFromChip() {
|
|
916
|
+
const chip = this.chipRef?.nativeElement;
|
|
917
|
+
if (!chip)
|
|
918
|
+
return;
|
|
919
|
+
const rect = chip.getBoundingClientRect();
|
|
920
|
+
// espacio disponible hasta el borde derecho
|
|
921
|
+
const spaceRight = window.innerWidth - rect.right;
|
|
922
|
+
if (spaceRight < 400) {
|
|
923
|
+
this.dropdownDirection.set('left');
|
|
924
|
+
}
|
|
925
|
+
else {
|
|
926
|
+
this.dropdownDirection.set('right');
|
|
927
|
+
}
|
|
928
|
+
}
|
|
891
929
|
open() {
|
|
892
930
|
if (this.isDisabled())
|
|
893
931
|
return;
|
|
894
932
|
this.markAsTouched();
|
|
895
933
|
this.isOpen.set(true);
|
|
934
|
+
this.calculateDropdownDirectionFromChip();
|
|
896
935
|
this.addDocumentListener();
|
|
897
936
|
const selected = this.selectedDate();
|
|
898
937
|
if (selected) {
|
|
@@ -1227,13 +1266,13 @@ class DateTimeFilter {
|
|
|
1227
1266
|
return false;
|
|
1228
1267
|
}
|
|
1229
1268
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DateTimeFilter, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
1230
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DateTimeFilter, isStandalone: true, selector: "lib-date-time-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: { dateSelected: "dateSelected", dateChange: "dateChange" }, providers: [
|
|
1269
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DateTimeFilter, isStandalone: true, selector: "lib-date-time-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: { dateSelected: "dateSelected", dateChange: "dateChange", enterPressed: "enterPressed" }, providers: [
|
|
1231
1270
|
{
|
|
1232
1271
|
provide: NG_VALUE_ACCESSOR,
|
|
1233
1272
|
useExisting: forwardRef(() => DateTimeFilter),
|
|
1234
1273
|
multi: true,
|
|
1235
1274
|
},
|
|
1236
|
-
], ngImport: i0, template: "<div class=\"filter-chips\">\r\n @for (item of filters(); track item.value) {\r\n <div class=\"chip-input-wrapper\" [class.has-value]=\"selectedDate() || inputTextValue()\"\r\n [class.active]=\"activeFilterType() === item.value\">\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 class=\"mask-char\" [class.mask-char-filled]=\"part.filled\" [class.mask-char-placeholder]=\"!part.filled\">\r\n {{ part.char }}\r\n </span>\r\n }\r\n </div>\r\n\r\n <input type=\"text\" [value]=\"inputTextValue()\" (input)=\"onInputChange($event, item.value)\"\r\n (focus)=\"onInputFocus(item.value)\" [placeholder]=\"item.placeholder || 'Seleccionar Fecha'\" class=\"chip-input\"\r\n [disabled]=\"isDisabled()\" />\r\n\r\n <button type=\"button\" class=\"calendar-icon-button\" (click)=\"toggle(item.value)\" title=\"Abrir calendario\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" 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-calendar-event\">\r\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path 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 <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 type=\"button\" class=\"nav-btn\" (click)=\"previousYear()\" title=\"A\u00F1o anterior\">\r\n \u2039\u2039\r\n </button>\r\n <button type=\"button\" class=\"nav-btn\" (click)=\"previousMonth()\" title=\"Mes anterior\">\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 type=\"button\" class=\"nav-btn\" (click)=\"nextMonth()\" title=\"Siguiente mes\">\r\n \u203A\r\n </button>\r\n <button type=\"button\" class=\"nav-btn\" (click)=\"nextYear()\" title=\"Siguiente a\u00F1o\">\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 class=\"calendar-day\" [class.selected]=\"isDaySelected(day)\" [class.today]=\"isToday(day)\"\r\n [class.disabled]=\"isDayDisabled(day)\" [class.empty]=\"!day\" (click)=\"selectDay(day)\">\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 class=\"time-option\" [class.selected]=\"hour.value === selectedHour12()\"\r\n (click)=\"setHour12(hour.value)\">\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 class=\"time-option\" [class.selected]=\"minute === selectedMinute()\" (click)=\"setMinute(minute)\">\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 class=\"time-option\" [class.selected]=\"selectedAmPm() === 'AM'\" (click)=\"setAmPm('AM')\">\r\n AM\r\n </div>\r\n <div class=\"time-option\" [class.selected]=\"selectedAmPm() === 'PM'\" (click)=\"setAmPm('PM')\">\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>", styles: [".datetime-container{position:relative;width:100%}.filter-chips{display:flex;gap:10px;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;min-width:80px;max-width:180px;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:#e3e3d1;padding:0 4px;border-radius:2px;text-transform:capitalize}.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:capitalize}.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 }] });
|
|
1275
|
+
], viewQueries: [{ propertyName: "chipRef", first: true, predicate: ["chip"], descendants: true }], ngImport: i0, template: "<div class=\"filter-chips\">\r\n @for (item of filters(); track item.value) {\r\n <div class=\"chip-input-wrapper\" #chip [class.has-value]=\"selectedDate() || inputTextValue()\"\r\n [class.active]=\"activeFilterType() === item.value\">\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 class=\"mask-char\" [class.mask-char-filled]=\"part.filled\" [class.mask-char-placeholder]=\"!part.filled\">\r\n {{ part.char }}\r\n </span>\r\n }\r\n </div>\r\n\r\n <input type=\"text\" [value]=\"inputTextValue()\" (input)=\"onInputChange($event, item.value)\"\r\n (focus)=\"onInputFocus(item.value)\" [placeholder]=\"item.placeholder || 'Seleccionar Fecha'\" class=\"chip-input\"\r\n [disabled]=\"isDisabled()\" (keydown)=\"onEnter($event)\" />\r\n\r\n <button type=\"button\" class=\"calendar-icon-button\" (click)=\"toggle(item.value)\" title=\"Abrir calendario\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" 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-calendar-event\">\r\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path 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 <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\" [class.open-left]=\"dropdownDirection() === 'left'\">\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 type=\"button\" class=\"nav-btn\" (click)=\"previousYear()\" title=\"A\u00F1o anterior\">\r\n \u2039\u2039\r\n </button>\r\n <button type=\"button\" class=\"nav-btn\" (click)=\"previousMonth()\" title=\"Mes anterior\">\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 type=\"button\" class=\"nav-btn\" (click)=\"nextMonth()\" title=\"Siguiente mes\">\r\n \u203A\r\n </button>\r\n <button type=\"button\" class=\"nav-btn\" (click)=\"nextYear()\" title=\"Siguiente a\u00F1o\">\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 class=\"calendar-day\" [class.selected]=\"isDaySelected(day)\" [class.today]=\"isToday(day)\"\r\n [class.disabled]=\"isDayDisabled(day)\" [class.empty]=\"!day\" (click)=\"selectDay(day)\">\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 class=\"time-option\" [class.selected]=\"hour.value === selectedHour12()\"\r\n (click)=\"setHour12(hour.value)\">\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 class=\"time-option\" [class.selected]=\"minute === selectedMinute()\" (click)=\"setMinute(minute)\">\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 class=\"time-option\" [class.selected]=\"selectedAmPm() === 'AM'\" (click)=\"setAmPm('AM')\">\r\n AM\r\n </div>\r\n <div class=\"time-option\" [class.selected]=\"selectedAmPm() === 'PM'\" (click)=\"setAmPm('PM')\">\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>", styles: [".datetime-container{position:relative;width:100%;overflow-x:clip}.filter-chips{display:flex;gap:10px;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;min-width:80px;max-width:180px;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:#e3e3d1;padding:0 4px;border-radius:2px;text-transform:capitalize}.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:capitalize}.chip-input:disabled{cursor:not-allowed;opacity:.6}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px #E3E3D1 inset;box-shadow:0 0 0 1000px #e3e3d1 inset;-webkit-text-fill-color:#454733;caret-color:#454733;transition:background-color 9999s ease-in-out 0s}input:-moz-autofill,textarea:-moz-autofill{box-shadow:0 0 0 1000px #e3e3d1 inset}input[readonly]:-webkit-autofill,input:disabled:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #E3E3D1 inset;-webkit-text-fill-color:#a9a97f}.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;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}.dropdown.open-left{left:auto;right:0}.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 }] });
|
|
1237
1276
|
}
|
|
1238
1277
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DateTimeFilter, decorators: [{
|
|
1239
1278
|
type: Component,
|
|
@@ -1243,8 +1282,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
1243
1282
|
useExisting: forwardRef(() => DateTimeFilter),
|
|
1244
1283
|
multi: true,
|
|
1245
1284
|
},
|
|
1246
|
-
], template: "<div class=\"filter-chips\">\r\n @for (item of filters(); track item.value) {\r\n <div class=\"chip-input-wrapper\" [class.has-value]=\"selectedDate() || inputTextValue()\"\r\n [class.active]=\"activeFilterType() === item.value\">\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 class=\"mask-char\" [class.mask-char-filled]=\"part.filled\" [class.mask-char-placeholder]=\"!part.filled\">\r\n {{ part.char }}\r\n </span>\r\n }\r\n </div>\r\n\r\n <input type=\"text\" [value]=\"inputTextValue()\" (input)=\"onInputChange($event, item.value)\"\r\n (focus)=\"onInputFocus(item.value)\" [placeholder]=\"item.placeholder || 'Seleccionar Fecha'\" class=\"chip-input\"\r\n [disabled]=\"isDisabled()\" />\r\n\r\n <button type=\"button\" class=\"calendar-icon-button\" (click)=\"toggle(item.value)\" title=\"Abrir calendario\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" 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-calendar-event\">\r\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path 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 <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 type=\"button\" class=\"nav-btn\" (click)=\"previousYear()\" title=\"A\u00F1o anterior\">\r\n \u2039\u2039\r\n </button>\r\n <button type=\"button\" class=\"nav-btn\" (click)=\"previousMonth()\" title=\"Mes anterior\">\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 type=\"button\" class=\"nav-btn\" (click)=\"nextMonth()\" title=\"Siguiente mes\">\r\n \u203A\r\n </button>\r\n <button type=\"button\" class=\"nav-btn\" (click)=\"nextYear()\" title=\"Siguiente a\u00F1o\">\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 class=\"calendar-day\" [class.selected]=\"isDaySelected(day)\" [class.today]=\"isToday(day)\"\r\n [class.disabled]=\"isDayDisabled(day)\" [class.empty]=\"!day\" (click)=\"selectDay(day)\">\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 class=\"time-option\" [class.selected]=\"hour.value === selectedHour12()\"\r\n (click)=\"setHour12(hour.value)\">\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 class=\"time-option\" [class.selected]=\"minute === selectedMinute()\" (click)=\"setMinute(minute)\">\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 class=\"time-option\" [class.selected]=\"selectedAmPm() === 'AM'\" (click)=\"setAmPm('AM')\">\r\n AM\r\n </div>\r\n <div class=\"time-option\" [class.selected]=\"selectedAmPm() === 'PM'\" (click)=\"setAmPm('PM')\">\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>", styles: [".datetime-container{position:relative;width:100%}.filter-chips{display:flex;gap:10px;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;min-width:80px;max-width:180px;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:#e3e3d1;padding:0 4px;border-radius:2px;text-transform:capitalize}.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:capitalize}.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"] }]
|
|
1247
|
-
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: {
|
|
1285
|
+
], template: "<div class=\"filter-chips\">\r\n @for (item of filters(); track item.value) {\r\n <div class=\"chip-input-wrapper\" #chip [class.has-value]=\"selectedDate() || inputTextValue()\"\r\n [class.active]=\"activeFilterType() === item.value\">\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 class=\"mask-char\" [class.mask-char-filled]=\"part.filled\" [class.mask-char-placeholder]=\"!part.filled\">\r\n {{ part.char }}\r\n </span>\r\n }\r\n </div>\r\n\r\n <input type=\"text\" [value]=\"inputTextValue()\" (input)=\"onInputChange($event, item.value)\"\r\n (focus)=\"onInputFocus(item.value)\" [placeholder]=\"item.placeholder || 'Seleccionar Fecha'\" class=\"chip-input\"\r\n [disabled]=\"isDisabled()\" (keydown)=\"onEnter($event)\" />\r\n\r\n <button type=\"button\" class=\"calendar-icon-button\" (click)=\"toggle(item.value)\" title=\"Abrir calendario\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" 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-calendar-event\">\r\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path 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 <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\" [class.open-left]=\"dropdownDirection() === 'left'\">\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 type=\"button\" class=\"nav-btn\" (click)=\"previousYear()\" title=\"A\u00F1o anterior\">\r\n \u2039\u2039\r\n </button>\r\n <button type=\"button\" class=\"nav-btn\" (click)=\"previousMonth()\" title=\"Mes anterior\">\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 type=\"button\" class=\"nav-btn\" (click)=\"nextMonth()\" title=\"Siguiente mes\">\r\n \u203A\r\n </button>\r\n <button type=\"button\" class=\"nav-btn\" (click)=\"nextYear()\" title=\"Siguiente a\u00F1o\">\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 class=\"calendar-day\" [class.selected]=\"isDaySelected(day)\" [class.today]=\"isToday(day)\"\r\n [class.disabled]=\"isDayDisabled(day)\" [class.empty]=\"!day\" (click)=\"selectDay(day)\">\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 class=\"time-option\" [class.selected]=\"hour.value === selectedHour12()\"\r\n (click)=\"setHour12(hour.value)\">\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 class=\"time-option\" [class.selected]=\"minute === selectedMinute()\" (click)=\"setMinute(minute)\">\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 class=\"time-option\" [class.selected]=\"selectedAmPm() === 'AM'\" (click)=\"setAmPm('AM')\">\r\n AM\r\n </div>\r\n <div class=\"time-option\" [class.selected]=\"selectedAmPm() === 'PM'\" (click)=\"setAmPm('PM')\">\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>", styles: [".datetime-container{position:relative;width:100%;overflow-x:clip}.filter-chips{display:flex;gap:10px;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;min-width:80px;max-width:180px;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:#e3e3d1;padding:0 4px;border-radius:2px;text-transform:capitalize}.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:capitalize}.chip-input:disabled{cursor:not-allowed;opacity:.6}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px #E3E3D1 inset;box-shadow:0 0 0 1000px #e3e3d1 inset;-webkit-text-fill-color:#454733;caret-color:#454733;transition:background-color 9999s ease-in-out 0s}input:-moz-autofill,textarea:-moz-autofill{box-shadow:0 0 0 1000px #e3e3d1 inset}input[readonly]:-webkit-autofill,input:disabled:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #E3E3D1 inset;-webkit-text-fill-color:#a9a97f}.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;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}.dropdown.open-left{left:auto;right:0}.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"] }]
|
|
1286
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { chipRef: [{
|
|
1287
|
+
type: ViewChild,
|
|
1288
|
+
args: ['chip']
|
|
1289
|
+
}], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }], dateSelected: [{ type: i0.Output, args: ["dateSelected"] }], dateChange: [{ type: i0.Output, args: ["dateChange"] }], enterPressed: [{ type: i0.Output, args: ["enterPressed"] }], clearTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearTrigger", required: false }] }] } });
|
|
1248
1290
|
|
|
1249
1291
|
class InputNumberFilter {
|
|
1250
1292
|
// Inputs
|
|
@@ -1253,6 +1295,7 @@ class InputNumberFilter {
|
|
|
1253
1295
|
// Outputs
|
|
1254
1296
|
filterSelected = output();
|
|
1255
1297
|
valueChange = output();
|
|
1298
|
+
enterPressed = output();
|
|
1256
1299
|
// Internal State
|
|
1257
1300
|
filterValues = signal({}, ...(ngDevMode ? [{ debugName: "filterValues" }] : []));
|
|
1258
1301
|
isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
|
|
@@ -1332,14 +1375,20 @@ class InputNumberFilter {
|
|
|
1332
1375
|
value: '',
|
|
1333
1376
|
});
|
|
1334
1377
|
}
|
|
1378
|
+
onEnter(event) {
|
|
1379
|
+
if (event.key !== 'Enter')
|
|
1380
|
+
return;
|
|
1381
|
+
event.preventDefault();
|
|
1382
|
+
this.enterPressed.emit();
|
|
1383
|
+
}
|
|
1335
1384
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InputNumberFilter, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1336
|
-
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: [
|
|
1385
|
+
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", enterPressed: "enterPressed" }, providers: [
|
|
1337
1386
|
{
|
|
1338
1387
|
provide: NG_VALUE_ACCESSOR,
|
|
1339
1388
|
useExisting: forwardRef(() => InputNumberFilter),
|
|
1340
1389
|
multi: true,
|
|
1341
1390
|
},
|
|
1342
|
-
], ngImport: i0, template: "<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 type=\"number\" [value]=\"filterValues()[item.value] || ''\" (input)=\"onInputChange($event, item.value)\"\r\n [placeholder]=\"filterValues()[item.value] ? '' : (item.placeholder || item.label || 'Escribir N\u00FAmero')\"\r\n class=\"chip-input\" [disabled]=\"isDisabled()\" />\r\n @if (filterValues()[item.value]) {\r\n <button type=\"button\" class=\"clear-button\" (click)=\"clearFilter(item.value)\" title=\"Limpiar\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n 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>", styles: [".filter-chips{display:flex;gap:10px;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;min-width:80px;max-width:180px;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:#e3e3d1;padding:0 4px;border-radius:2px;text-transform:capitalize}.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:capitalize}.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 }] });
|
|
1391
|
+
], ngImport: i0, template: "<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 type=\"number\" [value]=\"filterValues()[item.value] || ''\" (input)=\"onInputChange($event, item.value)\"\r\n [placeholder]=\"filterValues()[item.value] ? '' : (item.placeholder || item.label || 'Escribir N\u00FAmero')\"\r\n class=\"chip-input\" [disabled]=\"isDisabled()\" (keydown)=\"onEnter($event)\" />\r\n @if (filterValues()[item.value]) {\r\n <button type=\"button\" class=\"clear-button\" (click)=\"clearFilter(item.value)\" title=\"Limpiar\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n 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>", styles: [".filter-chips{display:flex;gap:10px;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;min-width:80px;max-width:180px;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:#e3e3d1;padding:0 4px;border-radius:2px;text-transform:capitalize}.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:capitalize}.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}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px #E3E3D1 inset;box-shadow:0 0 0 1000px #e3e3d1 inset;-webkit-text-fill-color:#454733;caret-color:#454733;transition:background-color 9999s ease-in-out 0s}input:-moz-autofill,textarea:-moz-autofill{box-shadow:0 0 0 1000px #e3e3d1 inset}input[readonly]:-webkit-autofill,input:disabled:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #E3E3D1 inset;-webkit-text-fill-color:#a9a97f}.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 }] });
|
|
1343
1392
|
}
|
|
1344
1393
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InputNumberFilter, decorators: [{
|
|
1345
1394
|
type: Component,
|
|
@@ -1349,8 +1398,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
1349
1398
|
useExisting: forwardRef(() => InputNumberFilter),
|
|
1350
1399
|
multi: true,
|
|
1351
1400
|
},
|
|
1352
|
-
], template: "<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 type=\"number\" [value]=\"filterValues()[item.value] || ''\" (input)=\"onInputChange($event, item.value)\"\r\n [placeholder]=\"filterValues()[item.value] ? '' : (item.placeholder || item.label || 'Escribir N\u00FAmero')\"\r\n class=\"chip-input\" [disabled]=\"isDisabled()\" />\r\n @if (filterValues()[item.value]) {\r\n <button type=\"button\" class=\"clear-button\" (click)=\"clearFilter(item.value)\" title=\"Limpiar\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n 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>", styles: [".filter-chips{display:flex;gap:10px;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;min-width:80px;max-width:180px;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:#e3e3d1;padding:0 4px;border-radius:2px;text-transform:capitalize}.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:capitalize}.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"] }]
|
|
1353
|
-
}], 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"] }] } });
|
|
1401
|
+
], template: "<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 type=\"number\" [value]=\"filterValues()[item.value] || ''\" (input)=\"onInputChange($event, item.value)\"\r\n [placeholder]=\"filterValues()[item.value] ? '' : (item.placeholder || item.label || 'Escribir N\u00FAmero')\"\r\n class=\"chip-input\" [disabled]=\"isDisabled()\" (keydown)=\"onEnter($event)\" />\r\n @if (filterValues()[item.value]) {\r\n <button type=\"button\" class=\"clear-button\" (click)=\"clearFilter(item.value)\" title=\"Limpiar\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n 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>", styles: [".filter-chips{display:flex;gap:10px;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;min-width:80px;max-width:180px;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:#e3e3d1;padding:0 4px;border-radius:2px;text-transform:capitalize}.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:capitalize}.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}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px #E3E3D1 inset;box-shadow:0 0 0 1000px #e3e3d1 inset;-webkit-text-fill-color:#454733;caret-color:#454733;transition:background-color 9999s ease-in-out 0s}input:-moz-autofill,textarea:-moz-autofill{box-shadow:0 0 0 1000px #e3e3d1 inset}input[readonly]:-webkit-autofill,input:disabled:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #E3E3D1 inset;-webkit-text-fill-color:#a9a97f}.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"] }]
|
|
1402
|
+
}], 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"] }], enterPressed: [{ type: i0.Output, args: ["enterPressed"] }] } });
|
|
1354
1403
|
|
|
1355
1404
|
class InputSelectFilter {
|
|
1356
1405
|
elementRef;
|
|
@@ -1361,6 +1410,7 @@ class InputSelectFilter {
|
|
|
1361
1410
|
// Outputs
|
|
1362
1411
|
filterSelected = output();
|
|
1363
1412
|
valueChange = output();
|
|
1413
|
+
enterPressed = output();
|
|
1364
1414
|
// Internal State
|
|
1365
1415
|
activeFilterType = signal(null, ...(ngDevMode ? [{ debugName: "activeFilterType" }] : []));
|
|
1366
1416
|
isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
|
|
@@ -1522,6 +1572,12 @@ class InputSelectFilter {
|
|
|
1522
1572
|
}
|
|
1523
1573
|
}
|
|
1524
1574
|
}
|
|
1575
|
+
onEnter(event) {
|
|
1576
|
+
if (event.key !== 'Enter')
|
|
1577
|
+
return;
|
|
1578
|
+
event.preventDefault();
|
|
1579
|
+
this.enterPressed.emit();
|
|
1580
|
+
}
|
|
1525
1581
|
addDocumentListener() {
|
|
1526
1582
|
if (this.documentClickListener)
|
|
1527
1583
|
this.removeDocumentListener();
|
|
@@ -1547,13 +1603,13 @@ class InputSelectFilter {
|
|
|
1547
1603
|
}
|
|
1548
1604
|
}
|
|
1549
1605
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InputSelectFilter, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
1550
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: InputSelectFilter, isStandalone: true, selector: "lib-input-select-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: [
|
|
1606
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: InputSelectFilter, isStandalone: true, selector: "lib-input-select-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", enterPressed: "enterPressed" }, providers: [
|
|
1551
1607
|
{
|
|
1552
1608
|
provide: NG_VALUE_ACCESSOR,
|
|
1553
1609
|
useExisting: forwardRef(() => InputSelectFilter),
|
|
1554
1610
|
multi: true,
|
|
1555
1611
|
},
|
|
1556
|
-
], ngImport: i0, template: "<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 type=\"text\" class=\"chip-input\" [value]=\"filterValues()[item.value] || ''\"\r\n (input)=\"onInputChange($event, item.value)\" (focus)=\"onFocusFilter(item.value)\"\r\n (click)=\"$event.stopPropagation()\" (keydown)=\"onKeyDown($event)\"\r\n [placeholder]=\"filterValues()[item.value] ? '' : (item.placeholder || item.label || 'Seleccionar')\"\r\n [disabled]=\"isDisabled()\" />\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>", styles: [".filter-chips{display:flex;gap:10px;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;min-width:80px;max-width:180px;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:#e3e3d1;padding:0 4px;border-radius:2px;text-transform:capitalize}.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:capitalize}.chip-input::placeholder{color:var(--schemes-on-surface-variant, #454733);opacity:.6;text-transform:capitalize}.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:capitalize;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 }] });
|
|
1612
|
+
], ngImport: i0, template: "<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 type=\"text\" class=\"chip-input\" [value]=\"filterValues()[item.value] || ''\"\r\n (input)=\"onInputChange($event, item.value)\" (focus)=\"onFocusFilter(item.value)\"\r\n (click)=\"$event.stopPropagation()\" (keydown)=\"onKeyDown($event)\" (keydown)=\"onEnter($event)\"\r\n [placeholder]=\"filterValues()[item.value] ? '' : (item.placeholder || item.label || 'Seleccionar')\"\r\n [disabled]=\"isDisabled()\" />\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>", styles: [".filter-chips{display:flex;gap:10px;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;min-width:80px;max-width:180px;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:#e3e3d1;padding:0 4px;border-radius:2px;text-transform:capitalize}.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:capitalize}.chip-input::placeholder{color:var(--schemes-on-surface-variant, #454733);opacity:.6;text-transform:capitalize}.chip-input:disabled{cursor:not-allowed;opacity:.6}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px transparent inset;box-shadow:0 0 0 1000px transparent inset;-webkit-text-fill-color:#454733;caret-color:#454733;transition:background-color 9999s ease-in-out 0s}input:-moz-autofill,textarea:-moz-autofill{box-shadow:0 0 0 1000px transparent inset}input[readonly]:-webkit-autofill,input:disabled:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px transparent inset;-webkit-text-fill-color:#a9a97f}.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:capitalize;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 }] });
|
|
1557
1613
|
}
|
|
1558
1614
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InputSelectFilter, decorators: [{
|
|
1559
1615
|
type: Component,
|
|
@@ -1563,8 +1619,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
1563
1619
|
useExisting: forwardRef(() => InputSelectFilter),
|
|
1564
1620
|
multi: true,
|
|
1565
1621
|
},
|
|
1566
|
-
], template: "<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 type=\"text\" class=\"chip-input\" [value]=\"filterValues()[item.value] || ''\"\r\n (input)=\"onInputChange($event, item.value)\" (focus)=\"onFocusFilter(item.value)\"\r\n (click)=\"$event.stopPropagation()\" (keydown)=\"onKeyDown($event)\"\r\n [placeholder]=\"filterValues()[item.value] ? '' : (item.placeholder || item.label || 'Seleccionar')\"\r\n [disabled]=\"isDisabled()\" />\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>", styles: [".filter-chips{display:flex;gap:10px;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;min-width:80px;max-width:180px;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:#e3e3d1;padding:0 4px;border-radius:2px;text-transform:capitalize}.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:capitalize}.chip-input::placeholder{color:var(--schemes-on-surface-variant, #454733);opacity:.6;text-transform:capitalize}.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:capitalize;transition:background-color .2s}.option-item:hover{background-color:#7878611a}.no-options{padding:10px 15px;color:#787861;font-size:.9rem;font-style:italic}\n"] }]
|
|
1567
|
-
}], 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"] }] } });
|
|
1622
|
+
], template: "<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 type=\"text\" class=\"chip-input\" [value]=\"filterValues()[item.value] || ''\"\r\n (input)=\"onInputChange($event, item.value)\" (focus)=\"onFocusFilter(item.value)\"\r\n (click)=\"$event.stopPropagation()\" (keydown)=\"onKeyDown($event)\" (keydown)=\"onEnter($event)\"\r\n [placeholder]=\"filterValues()[item.value] ? '' : (item.placeholder || item.label || 'Seleccionar')\"\r\n [disabled]=\"isDisabled()\" />\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>", styles: [".filter-chips{display:flex;gap:10px;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;min-width:80px;max-width:180px;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:#e3e3d1;padding:0 4px;border-radius:2px;text-transform:capitalize}.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:capitalize}.chip-input::placeholder{color:var(--schemes-on-surface-variant, #454733);opacity:.6;text-transform:capitalize}.chip-input:disabled{cursor:not-allowed;opacity:.6}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px transparent inset;box-shadow:0 0 0 1000px transparent inset;-webkit-text-fill-color:#454733;caret-color:#454733;transition:background-color 9999s ease-in-out 0s}input:-moz-autofill,textarea:-moz-autofill{box-shadow:0 0 0 1000px transparent inset}input[readonly]:-webkit-autofill,input:disabled:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px transparent inset;-webkit-text-fill-color:#a9a97f}.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:capitalize;transition:background-color .2s}.option-item:hover{background-color:#7878611a}.no-options{padding:10px 15px;color:#787861;font-size:.9rem;font-style:italic}\n"] }]
|
|
1623
|
+
}], 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"] }], enterPressed: [{ type: i0.Output, args: ["enterPressed"] }] } });
|
|
1568
1624
|
|
|
1569
1625
|
class InputTextFilter {
|
|
1570
1626
|
// Inputs
|
|
@@ -1573,6 +1629,7 @@ class InputTextFilter {
|
|
|
1573
1629
|
// Outputs
|
|
1574
1630
|
filterSelected = output();
|
|
1575
1631
|
valueChange = output();
|
|
1632
|
+
enterPressed = output();
|
|
1576
1633
|
// Internal State
|
|
1577
1634
|
filterValues = signal({}, ...(ngDevMode ? [{ debugName: "filterValues" }] : []));
|
|
1578
1635
|
isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
|
|
@@ -1652,14 +1709,20 @@ class InputTextFilter {
|
|
|
1652
1709
|
this.onTouched();
|
|
1653
1710
|
}
|
|
1654
1711
|
}
|
|
1712
|
+
onEnter(event) {
|
|
1713
|
+
if (event.key !== 'Enter')
|
|
1714
|
+
return;
|
|
1715
|
+
event.preventDefault();
|
|
1716
|
+
this.enterPressed.emit();
|
|
1717
|
+
}
|
|
1655
1718
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InputTextFilter, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1656
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: InputTextFilter, isStandalone: true, selector: "lib-input-text-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: [
|
|
1719
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: InputTextFilter, isStandalone: true, selector: "lib-input-text-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", enterPressed: "enterPressed" }, providers: [
|
|
1657
1720
|
{
|
|
1658
1721
|
provide: NG_VALUE_ACCESSOR,
|
|
1659
1722
|
useExisting: forwardRef(() => InputTextFilter),
|
|
1660
1723
|
multi: true,
|
|
1661
1724
|
},
|
|
1662
|
-
], ngImport: i0, template: "<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 type=\"text\" [value]=\"filterValues()[item.value] || ''\" (input)=\"onInputChange($event, item.value)\"\r\n [placeholder]=\"filterValues()[item.value] ? '' : (item.placeholder || item.label || 'Escribir')\"\r\n class=\"chip-input\" [disabled]=\"isDisabled()\" />\r\n @if (filterValues()[item.value]) {\r\n <button type=\"button\" class=\"clear-button\" (click)=\"clearFilter(item.value)\" title=\"Limpiar\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n 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>", styles: [".filter-chips{display:flex;gap:10px;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;min-width:80px;height:32px;flex-shrink:0;transition:.2s ease;background-color:transparent;flex:1 1 auto;max-width:180px}.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:#e3e3d1;padding:0 4px;border-radius:2px;text-transform:capitalize}.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}.chip-input::placeholder{color:var(--schemes-on-surface-variant, #454733);opacity:.6;text-transform:capitalize}.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 }] });
|
|
1725
|
+
], ngImport: i0, template: "<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 type=\"text\" [value]=\"filterValues()[item.value] || ''\" (input)=\"onInputChange($event, item.value)\"\r\n [placeholder]=\"filterValues()[item.value] ? '' : (item.placeholder || item.label || 'Escribir')\"\r\n class=\"chip-input\" [disabled]=\"isDisabled()\" (keydown)=\"onEnter($event)\" />\r\n @if (filterValues()[item.value]) {\r\n <button type=\"button\" class=\"clear-button\" (click)=\"clearFilter(item.value)\" title=\"Limpiar\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n 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>", styles: [".filter-chips{display:flex;gap:10px;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;min-width:80px;height:32px;flex-shrink:0;transition:.2s ease;background-color:transparent;flex:1 1 auto;max-width:180px}.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:#e3e3d1;padding:0 4px;border-radius:2px;text-transform:capitalize}.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}.chip-input::placeholder{color:var(--schemes-on-surface-variant, #454733);opacity:.6;text-transform:capitalize}.chip-input:disabled{cursor:not-allowed;opacity:.6}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px #E3E3D1 inset;box-shadow:0 0 0 1000px #e3e3d1 inset;-webkit-text-fill-color:#454733;caret-color:#454733;transition:background-color 9999s ease-in-out 0s}input:-moz-autofill,textarea:-moz-autofill{box-shadow:0 0 0 1000px #e3e3d1 inset}input[readonly]:-webkit-autofill,input:disabled:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #E3E3D1 inset;-webkit-text-fill-color:#a9a97f}.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 }] });
|
|
1663
1726
|
}
|
|
1664
1727
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InputTextFilter, decorators: [{
|
|
1665
1728
|
type: Component,
|
|
@@ -1669,8 +1732,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
1669
1732
|
useExisting: forwardRef(() => InputTextFilter),
|
|
1670
1733
|
multi: true,
|
|
1671
1734
|
},
|
|
1672
|
-
], template: "<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 type=\"text\" [value]=\"filterValues()[item.value] || ''\" (input)=\"onInputChange($event, item.value)\"\r\n [placeholder]=\"filterValues()[item.value] ? '' : (item.placeholder || item.label || 'Escribir')\"\r\n class=\"chip-input\" [disabled]=\"isDisabled()\" />\r\n @if (filterValues()[item.value]) {\r\n <button type=\"button\" class=\"clear-button\" (click)=\"clearFilter(item.value)\" title=\"Limpiar\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n 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>", styles: [".filter-chips{display:flex;gap:10px;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;min-width:80px;height:32px;flex-shrink:0;transition:.2s ease;background-color:transparent;flex:1 1 auto;max-width:180px}.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:#e3e3d1;padding:0 4px;border-radius:2px;text-transform:capitalize}.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}.chip-input::placeholder{color:var(--schemes-on-surface-variant, #454733);opacity:.6;text-transform:capitalize}.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"] }]
|
|
1673
|
-
}], 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"] }] } });
|
|
1735
|
+
], template: "<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 type=\"text\" [value]=\"filterValues()[item.value] || ''\" (input)=\"onInputChange($event, item.value)\"\r\n [placeholder]=\"filterValues()[item.value] ? '' : (item.placeholder || item.label || 'Escribir')\"\r\n class=\"chip-input\" [disabled]=\"isDisabled()\" (keydown)=\"onEnter($event)\" />\r\n @if (filterValues()[item.value]) {\r\n <button type=\"button\" class=\"clear-button\" (click)=\"clearFilter(item.value)\" title=\"Limpiar\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n 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>", styles: [".filter-chips{display:flex;gap:10px;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;min-width:80px;height:32px;flex-shrink:0;transition:.2s ease;background-color:transparent;flex:1 1 auto;max-width:180px}.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:#e3e3d1;padding:0 4px;border-radius:2px;text-transform:capitalize}.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}.chip-input::placeholder{color:var(--schemes-on-surface-variant, #454733);opacity:.6;text-transform:capitalize}.chip-input:disabled{cursor:not-allowed;opacity:.6}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px #E3E3D1 inset;box-shadow:0 0 0 1000px #e3e3d1 inset;-webkit-text-fill-color:#454733;caret-color:#454733;transition:background-color 9999s ease-in-out 0s}input:-moz-autofill,textarea:-moz-autofill{box-shadow:0 0 0 1000px #e3e3d1 inset}input[readonly]:-webkit-autofill,input:disabled:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #E3E3D1 inset;-webkit-text-fill-color:#a9a97f}.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"] }]
|
|
1736
|
+
}], 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"] }], enterPressed: [{ type: i0.Output, args: ["enterPressed"] }] } });
|
|
1674
1737
|
|
|
1675
1738
|
class Input {
|
|
1676
1739
|
mode = input('search', ...(ngDevMode ? [{ debugName: "mode" }] : []));
|
|
@@ -2273,11 +2336,11 @@ class DialogConfirmation {
|
|
|
2273
2336
|
this.close.emit(false);
|
|
2274
2337
|
}
|
|
2275
2338
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DialogConfirmation, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2276
|
-
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
|
|
2339
|
+
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.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}.arrow{font-size:12px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
2277
2340
|
}
|
|
2278
2341
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DialogConfirmation, decorators: [{
|
|
2279
2342
|
type: Component,
|
|
2280
|
-
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
|
|
2343
|
+
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.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}.arrow{font-size:12px}\n"] }]
|
|
2281
2344
|
}], propDecorators: { title: [{
|
|
2282
2345
|
type: Input$1
|
|
2283
2346
|
}], confirm: [{
|
|
@@ -2585,56 +2648,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
2585
2648
|
type: Output
|
|
2586
2649
|
}] } });
|
|
2587
2650
|
|
|
2588
|
-
class NotificationModal {
|
|
2589
|
-
messageInput;
|
|
2590
|
-
mode = 'list';
|
|
2591
|
-
titulo = 'Notificar a este Agente';
|
|
2592
|
-
buttonClick = new EventEmitter();
|
|
2593
|
-
itemLabel = '¡URGENTE!';
|
|
2594
|
-
btnLabel = 'Personalizado';
|
|
2595
|
-
defaultMessages = [
|
|
2596
|
-
'¡URGENTE!',
|
|
2597
|
-
'¡ALERTA!',
|
|
2598
|
-
'¡EMERGENCIA!'
|
|
2599
|
-
];
|
|
2600
|
-
messageValue = '';
|
|
2601
|
-
selectDefaultMessage(message) {
|
|
2602
|
-
this.messageValue = message;
|
|
2603
|
-
this.mode = 'edit';
|
|
2604
|
-
setTimeout(() => {
|
|
2605
|
-
this.messageInput?.nativeElement.focus();
|
|
2606
|
-
this.messageInput?.nativeElement.setSelectionRange(this.messageValue.length, this.messageValue.length);
|
|
2607
|
-
});
|
|
2608
|
-
}
|
|
2609
|
-
customMessage() {
|
|
2610
|
-
this.messageValue = '';
|
|
2611
|
-
this.mode = 'edit';
|
|
2612
|
-
setTimeout(() => {
|
|
2613
|
-
this.messageInput?.nativeElement.focus();
|
|
2614
|
-
});
|
|
2615
|
-
}
|
|
2616
|
-
btnClick() {
|
|
2617
|
-
this.buttonClick.emit();
|
|
2618
|
-
}
|
|
2619
|
-
backToList() {
|
|
2620
|
-
this.mode = 'list';
|
|
2621
|
-
this.messageValue = '';
|
|
2622
|
-
}
|
|
2623
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NotificationModal, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2624
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: NotificationModal, isStandalone: true, selector: "lib-notification-modal", inputs: { titulo: "titulo" }, outputs: { buttonClick: "buttonClick" }, viewQueries: [{ propertyName: "messageInput", first: true, predicate: ["messageInput"], descendants: true }], ngImport: i0, template: "<div class=\"notification-modal-container\">\r\n <div class=\"notification-modal-header\">\r\n <h3>{{ titulo }}</h3>\r\n </div>\r\n <div class=\"notification-modal-body\">\r\n <!-- LISTA DE MENSAJES -->\r\n @if (mode === 'list') {\r\n <div class=\"default-message-list\">\r\n @for (msg of defaultMessages; track msg) {\r\n <div class=\"default-message-item\" (click)=\"selectDefaultMessage(msg)\">\r\n <span>{{ msg }}</span>\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-send-2\" viewBox=\"0 0 24 24\">\r\n <path fill=\"none\" stroke=\"none\" d=\"M0 0h24v24H0z\" />\r\n <path\r\n d=\"M4.698 4.034 21 12 4.698 19.966a.5.5 0 0 1-.546-.124.56.56 0 0 1-.12-.568L6.5 12 4.032 4.726a.56.56 0 0 1 .12-.568.5.5 0 0 1 .546-.124M6.5 12H21\" />\r\n </svg>\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- EDICI\u00D3N -->\r\n @if (mode === 'edit') {\r\n <div class=\"text-area-wrapper\">\r\n <textarea #messageInput class=\"message-textarea\" rows=\"5\" placeholder=\"Mensaje...\">{{messageValue}}</textarea>\r\n </div>\r\n }\r\n\r\n </div>\r\n\r\n <div class=\"notification-modal-actions\">\r\n @if (mode === 'edit') {\r\n <button class=\"btn-back\" (click)=\"backToList()\">\r\n Volver\r\n </button>\r\n <button class=\"btn-custom\" (click)=\"btnClick()\">\r\n Notificar\r\n </button>\r\n } @else {\r\n <button class=\"btn-custom\" (click)=\"customMessage()\">\r\n Personalizado\r\n </button>\r\n }\r\n </div>\r\n</div>", styles: [".notification-modal-container{width:100%;min-width:300px;max-width:320px;display:flex;flex-direction:column;border-radius:12px;background-color:#f0f0db}.notification-modal-header{padding:16px}.notification-modal-header h3{font-size:1.6rem;font-weight:700;color:#454733;text-transform:uppercase}.notification-modal-body{display:flex;flex-direction:column;gap:12px;overflow:hidden;padding:0 6px}.notification-modal-actions{width:100%;display:flex;justify-content:flex-end;align-items:center;gap:16px;padding:16px}.default-message-item{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;cursor:pointer;border-radius:6px}.default-message-item:hover{background:#dee58f}.default-message-item .span{font-size:1.4rem;color:#454733}.text-area-wrapper{position:relative;width:100%;padding:0 10px}.message-textarea{width:100%;resize:none;border-radius:6px;border:1px solid #787861;background:transparent;padding:6px 12px}button{border:none;background-color:transparent}.btn-custom,.btn-back{color:#596300;font-weight:500;font-size:1.4rem;padding:6px 12px;cursor:pointer;border-radius:50px}.btn-custom:hover{background-color:#596300;color:#f0f0db}.btn-back:hover{background-color:#dee58f;color:#596300}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
2625
|
-
}
|
|
2626
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NotificationModal, decorators: [{
|
|
2627
|
-
type: Component,
|
|
2628
|
-
args: [{ selector: 'lib-notification-modal', imports: [CommonModule], template: "<div class=\"notification-modal-container\">\r\n <div class=\"notification-modal-header\">\r\n <h3>{{ titulo }}</h3>\r\n </div>\r\n <div class=\"notification-modal-body\">\r\n <!-- LISTA DE MENSAJES -->\r\n @if (mode === 'list') {\r\n <div class=\"default-message-list\">\r\n @for (msg of defaultMessages; track msg) {\r\n <div class=\"default-message-item\" (click)=\"selectDefaultMessage(msg)\">\r\n <span>{{ msg }}</span>\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-send-2\" viewBox=\"0 0 24 24\">\r\n <path fill=\"none\" stroke=\"none\" d=\"M0 0h24v24H0z\" />\r\n <path\r\n d=\"M4.698 4.034 21 12 4.698 19.966a.5.5 0 0 1-.546-.124.56.56 0 0 1-.12-.568L6.5 12 4.032 4.726a.56.56 0 0 1 .12-.568.5.5 0 0 1 .546-.124M6.5 12H21\" />\r\n </svg>\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- EDICI\u00D3N -->\r\n @if (mode === 'edit') {\r\n <div class=\"text-area-wrapper\">\r\n <textarea #messageInput class=\"message-textarea\" rows=\"5\" placeholder=\"Mensaje...\">{{messageValue}}</textarea>\r\n </div>\r\n }\r\n\r\n </div>\r\n\r\n <div class=\"notification-modal-actions\">\r\n @if (mode === 'edit') {\r\n <button class=\"btn-back\" (click)=\"backToList()\">\r\n Volver\r\n </button>\r\n <button class=\"btn-custom\" (click)=\"btnClick()\">\r\n Notificar\r\n </button>\r\n } @else {\r\n <button class=\"btn-custom\" (click)=\"customMessage()\">\r\n Personalizado\r\n </button>\r\n }\r\n </div>\r\n</div>", styles: [".notification-modal-container{width:100%;min-width:300px;max-width:320px;display:flex;flex-direction:column;border-radius:12px;background-color:#f0f0db}.notification-modal-header{padding:16px}.notification-modal-header h3{font-size:1.6rem;font-weight:700;color:#454733;text-transform:uppercase}.notification-modal-body{display:flex;flex-direction:column;gap:12px;overflow:hidden;padding:0 6px}.notification-modal-actions{width:100%;display:flex;justify-content:flex-end;align-items:center;gap:16px;padding:16px}.default-message-item{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;cursor:pointer;border-radius:6px}.default-message-item:hover{background:#dee58f}.default-message-item .span{font-size:1.4rem;color:#454733}.text-area-wrapper{position:relative;width:100%;padding:0 10px}.message-textarea{width:100%;resize:none;border-radius:6px;border:1px solid #787861;background:transparent;padding:6px 12px}button{border:none;background-color:transparent}.btn-custom,.btn-back{color:#596300;font-weight:500;font-size:1.4rem;padding:6px 12px;cursor:pointer;border-radius:50px}.btn-custom:hover{background-color:#596300;color:#f0f0db}.btn-back:hover{background-color:#dee58f;color:#596300}\n"] }]
|
|
2629
|
-
}], propDecorators: { messageInput: [{
|
|
2630
|
-
type: ViewChild,
|
|
2631
|
-
args: ['messageInput']
|
|
2632
|
-
}], titulo: [{
|
|
2633
|
-
type: Input$1
|
|
2634
|
-
}], buttonClick: [{
|
|
2635
|
-
type: Output
|
|
2636
|
-
}] } });
|
|
2637
|
-
|
|
2638
2651
|
class SideCardDetail {
|
|
2639
2652
|
wrapper;
|
|
2640
2653
|
isFloating = true;
|
|
@@ -2733,7 +2746,7 @@ class SideCardDetail {
|
|
|
2733
2746
|
}
|
|
2734
2747
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SideCardDetail, decorators: [{
|
|
2735
2748
|
type: Component,
|
|
2736
|
-
args: [{ selector: 'lib-side-card-detail', imports: [CommonModule
|
|
2749
|
+
args: [{ selector: 'lib-side-card-detail', imports: [CommonModule], template: "<div #SideCard class=\"side-card-wrapper\">\r\n <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\"\r\n stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"icon icon-tabler icons-tabler-outline icon-tabler-arrow-left\" (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\"\r\n (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 <!-- message + modal -->\r\n <div class=\"message-icon-wrapper\">\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\"\r\n (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\r\n <!-- @if (showMessageModal) {\r\n <div class=\"message-modal-anchor\">\r\n <lib-notification-modal />\r\n </div>\r\n } -->\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"side-tabs\">\r\n <div class=\"tab\" [class.active]=\"activeTab === 'principal'\" (click)=\"setTab('principal')\">\r\n Principal\r\n </div>\r\n\r\n <div class=\"tab\" [class.active]=\"activeTab === 'historial'\" (click)=\"setTab('historial')\">\r\n Historial\r\n </div>\r\n\r\n <div class=\"tab-indicator\" [style.left]=\"getIndicatorLeft()\"></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>\r\n</div>", styles: [".side-card-wrapper{position:relative;width:100%;height:100%}.side-card{width:354px;max-width:368px;min-width:240px;height:auto;max-height:90vh;background:#ebe8d6b0;border-radius:8px;padding:16px;font-size: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}.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:capitalize;max-lines:2}.subtitle{font-size:1.5rem;font-weight:300;color:#454733;text-transform:capitalize}.right-icons{display:flex;flex-direction:column;gap:8px}.icon{color:#1c1c1c;cursor:pointer}.icon.icon-tabler-current-location{color:#d3d936}.icon.icon-tabler-current-location:hover{color:#d3d93666}.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:#1c1c1c66}.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}.side-card.compact{font-size:13px;padding:12px;gap:10px}.side-card.compact *{margin-bottom:0}.side-card.compact{gap:10px}.side-card.compact .element-section,.side-card.compact .element-content{gap:6px}.side-card.compact .title{font-size:1.6rem;line-height:1.2}.side-card.compact .subtitle{font-size:1.3rem}.side-card.compact .icon{width:22px;height:22px}.side-card.compact svg.icon{width:22px;height:22px}.side-card.compact h3{font-size:1.2rem}.side-card.compact .label,.side-card.compact .value{font-size:1.1rem}.side-card.compact .status-chip{font-size:.9rem;padding:.5rem .8rem;margin-bottom:6px}.side-card.compact .tab{padding:8px 0;font-size:1.1rem}.side-card.compact .tab-indicator{height:3px}.side-card.compact .element-header{gap:8px}.side-card.compact .right-icons{gap:4px}.side-card.compact{max-width:312px;max-height:460px;overflow-y:auto}.side-card.floating.compact{top:9px;right:9px}.message-icon-wrapper{position:relative;display:inline-flex}.message-modal-anchor{position:absolute;top:36px;right:0;z-index:20}\n"] }]
|
|
2737
2750
|
}], propDecorators: { wrapper: [{
|
|
2738
2751
|
type: ViewChild,
|
|
2739
2752
|
args: ['SideCard', { static: true }]
|
|
@@ -2861,6 +2874,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
2861
2874
|
}] } });
|
|
2862
2875
|
|
|
2863
2876
|
class TitleFilters {
|
|
2877
|
+
filtersContainer;
|
|
2864
2878
|
showFilters = signal(false, ...(ngDevMode ? [{ debugName: "showFilters" }] : []));
|
|
2865
2879
|
title = input('Listado', ...(ngDevMode ? [{ debugName: "title" }] : []));
|
|
2866
2880
|
filtersConfig = input([], ...(ngDevMode ? [{ debugName: "filtersConfig" }] : []));
|
|
@@ -2915,6 +2929,7 @@ class TitleFilters {
|
|
|
2915
2929
|
this.selectedTextFilters.set({});
|
|
2916
2930
|
this.clearFilterTrigger.update(v => v + 1);
|
|
2917
2931
|
this.filtersChange.emit({});
|
|
2932
|
+
this.applyFilters.emit();
|
|
2918
2933
|
}
|
|
2919
2934
|
onApplyFilters() {
|
|
2920
2935
|
this.applyFilters.emit();
|
|
@@ -2939,13 +2954,90 @@ class TitleFilters {
|
|
|
2939
2954
|
return updated;
|
|
2940
2955
|
});
|
|
2941
2956
|
}
|
|
2957
|
+
focusNextFilter() {
|
|
2958
|
+
const container = this.filtersContainer?.nativeElement;
|
|
2959
|
+
if (!container)
|
|
2960
|
+
return;
|
|
2961
|
+
const focusable = Array.from(container.querySelectorAll('input:not([disabled]), textarea:not([disabled]), select:not([disabled])')).filter(el => el.offsetParent !== null); // solo visibles
|
|
2962
|
+
const active = document.activeElement;
|
|
2963
|
+
const index = focusable.indexOf(active);
|
|
2964
|
+
// 👉 Si hay siguiente → foco
|
|
2965
|
+
if (index >= 0 && index < focusable.length - 1) {
|
|
2966
|
+
focusable[index + 1].focus();
|
|
2967
|
+
return;
|
|
2968
|
+
}
|
|
2969
|
+
// 👉 Si es el último → aplicar filtros
|
|
2970
|
+
this.onApplyFilters();
|
|
2971
|
+
}
|
|
2942
2972
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TitleFilters, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2943
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: TitleFilters, isStandalone: true, selector: "lib-title-filters", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, filtersConfig: { classPropertyName: "filtersConfig", publicName: "filtersConfig", isSignal: true, isRequired: false, transformFunction: null }, buttonMode: { classPropertyName: "buttonMode", publicName: "buttonMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filtersChange: "filtersChange", applyFilters: "applyFilters", filterButtonClicked: "filterButtonClicked" }, ngImport: i0, template: "<div class=\"header-container-table\">\r\n <div class=\"filters-dashboard-table\">\r\n <div class=\"title-table\">{{ title() }}</div>\r\n\r\n @if (buttonMode() === 'toggle') {\r\n <div class=\"button-small-primary\" (click)=\"toggleFilters()\">\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-filter\">\r\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path\r\n d=\"M4 4h16v2.172a2 2 0 0 1 -.586 1.414l-4.414 4.414v7l-6 2v-8.5l-4.48 -4.928a2 2 0 0 1 -.52 -1.345v-2.227z\" />\r\n </svg>\r\n <div class=\"label\">Filtros</div>\r\n </div>\r\n }\r\n @if (buttonMode() === 'action') {\r\n <div class=\"button-small-primary\" (click)=\"onFilterButtonClick()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\" viewBox=\"0 0 20 20\">\r\n <path fill=\"#fff\"\r\n d=\"M10.85 16.608v1.684a8.3 8.3 0 0 0 4.433-1.842L14.1 15.258a6.6 6.6 0 0 1-3.25 1.35M3.358 10c0-3.375 2.525-6.175 5.792-6.608V1.708C4.958 2.15 1.692 5.7 1.692 10s3.266 7.85 7.458 8.292v-1.684C5.883 16.175 3.358 13.375 3.358 10m13.267-.833h1.683a8.3 8.3 0 0 0-1.841-4.434l-1.192 1.192a6.56 6.56 0 0 1 1.35 3.242M15.283 3.55a8.3 8.3 0 0 0-4.433-1.842v1.684a6.6 6.6 0 0 1 3.25 1.35zm-.008 10.533 1.192 1.184a8.3 8.3 0 0 0 1.841-4.434h-1.683a6.6 6.6 0 0 1-1.35 3.25\" />\r\n <path fill=\"#fff\"\r\n d=\"M13.333 9.25c0-2.075-1.583-3.417-3.333-3.417S6.667 7.175 6.667 9.25c0 1.383 1.108 3.025 3.333 4.917 2.225-1.892 3.333-3.534 3.333-4.917M10 10a.893.893 0 0 1 0-1.783A.893.893 0 0 1 10 10\" />\r\n </svg>\r\n <div class=\"label\">Ir al Mapa</div>\r\n </div>\r\n }\r\n </div>\r\n\r\n @if (showFilters()) {\r\n <div class=\"filters-container\">\r\n <div class=\"
|
|
2973
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: TitleFilters, isStandalone: true, selector: "lib-title-filters", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, filtersConfig: { classPropertyName: "filtersConfig", publicName: "filtersConfig", isSignal: true, isRequired: false, transformFunction: null }, buttonMode: { classPropertyName: "buttonMode", publicName: "buttonMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filtersChange: "filtersChange", applyFilters: "applyFilters", filterButtonClicked: "filterButtonClicked" }, viewQueries: [{ propertyName: "filtersContainer", first: true, predicate: ["filtersContainer"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"header-container-table\">\r\n <div class=\"filters-dashboard-table\">\r\n <div class=\"title-table\">{{ title() }}</div>\r\n\r\n @if (buttonMode() === 'toggle') {\r\n <div class=\"button-small-primary\" (click)=\"toggleFilters()\">\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-filter\">\r\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path\r\n d=\"M4 4h16v2.172a2 2 0 0 1 -.586 1.414l-4.414 4.414v7l-6 2v-8.5l-4.48 -4.928a2 2 0 0 1 -.52 -1.345v-2.227z\" />\r\n </svg>\r\n <div class=\"label\">Filtros</div>\r\n </div>\r\n }\r\n @if (buttonMode() === 'action') {\r\n <div class=\"button-small-primary\" (click)=\"onFilterButtonClick()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\" viewBox=\"0 0 20 20\">\r\n <path fill=\"#fff\"\r\n d=\"M10.85 16.608v1.684a8.3 8.3 0 0 0 4.433-1.842L14.1 15.258a6.6 6.6 0 0 1-3.25 1.35M3.358 10c0-3.375 2.525-6.175 5.792-6.608V1.708C4.958 2.15 1.692 5.7 1.692 10s3.266 7.85 7.458 8.292v-1.684C5.883 16.175 3.358 13.375 3.358 10m13.267-.833h1.683a8.3 8.3 0 0 0-1.841-4.434l-1.192 1.192a6.56 6.56 0 0 1 1.35 3.242M15.283 3.55a8.3 8.3 0 0 0-4.433-1.842v1.684a6.6 6.6 0 0 1 3.25 1.35zm-.008 10.533 1.192 1.184a8.3 8.3 0 0 0 1.841-4.434h-1.683a6.6 6.6 0 0 1-1.35 3.25\" />\r\n <path fill=\"#fff\"\r\n d=\"M13.333 9.25c0-2.075-1.583-3.417-3.333-3.417S6.667 7.175 6.667 9.25c0 1.383 1.108 3.025 3.333 4.917 2.225-1.892 3.333-3.534 3.333-4.917M10 10a.893.893 0 0 1 0-1.783A.893.893 0 0 1 10 10\" />\r\n </svg>\r\n <div class=\"label\">Ir al Mapa</div>\r\n </div>\r\n }\r\n </div>\r\n\r\n @if (showFilters()) {\r\n <div class=\"filters-container\" #filtersContainer>\r\n <div class=\"filters-wrapper\">\r\n\r\n @for (config of normalizedFiltersConfig(); track $index) {\r\n @switch (config.type) {\r\n @case ('text') {\r\n <lib-input-text-filter [filters]=\"config.filters\" [clearTrigger]=\"clearFilterTrigger()\"\r\n (filterSelected)=\"onFilterSelected($event)\" (enterPressed)=\"focusNextFilter()\" />\r\n }\r\n @case ('number') {\r\n <lib-input-number-filter [filters]=\"config.filters\" [clearTrigger]=\"clearFilterTrigger()\"\r\n (filterSelected)=\"onFilterSelected($event)\" (enterPressed)=\"focusNextFilter()\" />\r\n }\r\n @case ('select') {\r\n <lib-input-select-filter [filters]=\"config.filters\" [clearTrigger]=\"clearFilterTrigger()\"\r\n (filterSelected)=\"onFilterSelected($event)\" (enterPressed)=\"focusNextFilter()\" />\r\n }\r\n @case ('date') {\r\n <lib-date-time-filter [filters]=\"config.filters\" [clearTrigger]=\"clearFilterTrigger()\"\r\n (dateSelected)=\"onDateSelected($event)\" (enterPressed)=\"focusNextFilter()\" />\r\n }\r\n }\r\n }\r\n\r\n <div class=\"actions\">\r\n <div class=\"button-small-primary\" (click)=\"onApplyFilters()\">\r\n <div class=\"label\">Aplicar Filtros</div>\r\n </div>\r\n\r\n <div class=\"button-text\" (click)=\"clearAllFilters()\">\r\n Borrar Filtros\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n }\r\n</div>", styles: [".header-container-table{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;flex:1;width:100%;position:relative}.filters-dashboard-table{display:flex;flex-direction:row;gap:24px;align-items:center;justify-content:flex-start;flex-shrink:0;width:100%;position:relative}.title-table{color:var(--schemes-on-surface, #171c1f);font-family:var(--headline-large-font, \"Roboto-SemiBold\", sans-serif);font-size:32px;line-height:40px;font-weight:600;position:relative}.filters-container{display:flex;flex-direction:row;gap:24px;margin-top:12px;position:relative;flex-wrap:wrap}.filters-wrapper{display:flex;position:relative;align-items:center;margin-top:4px;z-index:1000;flex-wrap:wrap;gap:10px}.actions{display:flex;gap:10px}.button-text{display:flex;background-color:transparent;color:#61661f;padding:0 12px;font-size:1.3rem;font-weight:500;border:1px solid #61661F;border-radius:20px;cursor:pointer;justify-content:center;align-items:center;position:relative;flex-shrink:0}.button-text:hover{background-color:#d8eb2ca7;border:1px solid #d8eb2ca7}.button-small-primary{background-color:var(--primary, #596300);padding:10px 16px;display:flex;flex-direction:row;gap:8px;align-items:center;justify-content:center;flex-shrink:0;position:relative;border:none;border-radius:99px;cursor:pointer}.button-small-primary:hover{background-color:var(--on-secondary-container, #61661F)}.button-small-primary:active{background-color:#737928}.icon{color:var(--surface, #fafae8);flex-shrink:0;width:20px;height:20px;position:relative;overflow:visible}.button-small-primary .label{color:var(--schemes-on-primary, #ffffff);text-align:left;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);position:relative;display:flex;align-items:center;justify-content:flex-start}\n"], dependencies: [{ kind: "component", type: InputNumberFilter, selector: "lib-input-number-filter", inputs: ["filters", "clearTrigger"], outputs: ["filterSelected", "valueChange", "enterPressed"] }, { kind: "component", type: InputTextFilter, selector: "lib-input-text-filter", inputs: ["filters", "clearTrigger"], outputs: ["filterSelected", "valueChange", "enterPressed"] }, { kind: "component", type: InputSelectFilter, selector: "lib-input-select-filter", inputs: ["filters", "clearTrigger"], outputs: ["filterSelected", "valueChange", "enterPressed"] }, { kind: "component", type: DateTimeFilter, selector: "lib-date-time-filter", inputs: ["filters", "clearTrigger"], outputs: ["dateSelected", "dateChange", "enterPressed"] }] });
|
|
2944
2974
|
}
|
|
2945
2975
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TitleFilters, decorators: [{
|
|
2946
2976
|
type: Component,
|
|
2947
|
-
args: [{ selector: 'lib-title-filters', imports: [InputNumberFilter, InputTextFilter, InputSelectFilter, DateTimeFilter], template: "<div class=\"header-container-table\">\r\n <div class=\"filters-dashboard-table\">\r\n <div class=\"title-table\">{{ title() }}</div>\r\n\r\n @if (buttonMode() === 'toggle') {\r\n <div class=\"button-small-primary\" (click)=\"toggleFilters()\">\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-filter\">\r\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path\r\n d=\"M4 4h16v2.172a2 2 0 0 1 -.586 1.414l-4.414 4.414v7l-6 2v-8.5l-4.48 -4.928a2 2 0 0 1 -.52 -1.345v-2.227z\" />\r\n </svg>\r\n <div class=\"label\">Filtros</div>\r\n </div>\r\n }\r\n @if (buttonMode() === 'action') {\r\n <div class=\"button-small-primary\" (click)=\"onFilterButtonClick()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\" viewBox=\"0 0 20 20\">\r\n <path fill=\"#fff\"\r\n d=\"M10.85 16.608v1.684a8.3 8.3 0 0 0 4.433-1.842L14.1 15.258a6.6 6.6 0 0 1-3.25 1.35M3.358 10c0-3.375 2.525-6.175 5.792-6.608V1.708C4.958 2.15 1.692 5.7 1.692 10s3.266 7.85 7.458 8.292v-1.684C5.883 16.175 3.358 13.375 3.358 10m13.267-.833h1.683a8.3 8.3 0 0 0-1.841-4.434l-1.192 1.192a6.56 6.56 0 0 1 1.35 3.242M15.283 3.55a8.3 8.3 0 0 0-4.433-1.842v1.684a6.6 6.6 0 0 1 3.25 1.35zm-.008 10.533 1.192 1.184a8.3 8.3 0 0 0 1.841-4.434h-1.683a6.6 6.6 0 0 1-1.35 3.25\" />\r\n <path fill=\"#fff\"\r\n d=\"M13.333 9.25c0-2.075-1.583-3.417-3.333-3.417S6.667 7.175 6.667 9.25c0 1.383 1.108 3.025 3.333 4.917 2.225-1.892 3.333-3.534 3.333-4.917M10 10a.893.893 0 0 1 0-1.783A.893.893 0 0 1 10 10\" />\r\n </svg>\r\n <div class=\"label\">Ir al Mapa</div>\r\n </div>\r\n }\r\n </div>\r\n\r\n @if (showFilters()) {\r\n <div class=\"filters-container\">\r\n <div class=\"
|
|
2948
|
-
}], propDecorators: {
|
|
2977
|
+
args: [{ selector: 'lib-title-filters', imports: [InputNumberFilter, InputTextFilter, InputSelectFilter, DateTimeFilter], template: "<div class=\"header-container-table\">\r\n <div class=\"filters-dashboard-table\">\r\n <div class=\"title-table\">{{ title() }}</div>\r\n\r\n @if (buttonMode() === 'toggle') {\r\n <div class=\"button-small-primary\" (click)=\"toggleFilters()\">\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-filter\">\r\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path\r\n d=\"M4 4h16v2.172a2 2 0 0 1 -.586 1.414l-4.414 4.414v7l-6 2v-8.5l-4.48 -4.928a2 2 0 0 1 -.52 -1.345v-2.227z\" />\r\n </svg>\r\n <div class=\"label\">Filtros</div>\r\n </div>\r\n }\r\n @if (buttonMode() === 'action') {\r\n <div class=\"button-small-primary\" (click)=\"onFilterButtonClick()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\" viewBox=\"0 0 20 20\">\r\n <path fill=\"#fff\"\r\n d=\"M10.85 16.608v1.684a8.3 8.3 0 0 0 4.433-1.842L14.1 15.258a6.6 6.6 0 0 1-3.25 1.35M3.358 10c0-3.375 2.525-6.175 5.792-6.608V1.708C4.958 2.15 1.692 5.7 1.692 10s3.266 7.85 7.458 8.292v-1.684C5.883 16.175 3.358 13.375 3.358 10m13.267-.833h1.683a8.3 8.3 0 0 0-1.841-4.434l-1.192 1.192a6.56 6.56 0 0 1 1.35 3.242M15.283 3.55a8.3 8.3 0 0 0-4.433-1.842v1.684a6.6 6.6 0 0 1 3.25 1.35zm-.008 10.533 1.192 1.184a8.3 8.3 0 0 0 1.841-4.434h-1.683a6.6 6.6 0 0 1-1.35 3.25\" />\r\n <path fill=\"#fff\"\r\n d=\"M13.333 9.25c0-2.075-1.583-3.417-3.333-3.417S6.667 7.175 6.667 9.25c0 1.383 1.108 3.025 3.333 4.917 2.225-1.892 3.333-3.534 3.333-4.917M10 10a.893.893 0 0 1 0-1.783A.893.893 0 0 1 10 10\" />\r\n </svg>\r\n <div class=\"label\">Ir al Mapa</div>\r\n </div>\r\n }\r\n </div>\r\n\r\n @if (showFilters()) {\r\n <div class=\"filters-container\" #filtersContainer>\r\n <div class=\"filters-wrapper\">\r\n\r\n @for (config of normalizedFiltersConfig(); track $index) {\r\n @switch (config.type) {\r\n @case ('text') {\r\n <lib-input-text-filter [filters]=\"config.filters\" [clearTrigger]=\"clearFilterTrigger()\"\r\n (filterSelected)=\"onFilterSelected($event)\" (enterPressed)=\"focusNextFilter()\" />\r\n }\r\n @case ('number') {\r\n <lib-input-number-filter [filters]=\"config.filters\" [clearTrigger]=\"clearFilterTrigger()\"\r\n (filterSelected)=\"onFilterSelected($event)\" (enterPressed)=\"focusNextFilter()\" />\r\n }\r\n @case ('select') {\r\n <lib-input-select-filter [filters]=\"config.filters\" [clearTrigger]=\"clearFilterTrigger()\"\r\n (filterSelected)=\"onFilterSelected($event)\" (enterPressed)=\"focusNextFilter()\" />\r\n }\r\n @case ('date') {\r\n <lib-date-time-filter [filters]=\"config.filters\" [clearTrigger]=\"clearFilterTrigger()\"\r\n (dateSelected)=\"onDateSelected($event)\" (enterPressed)=\"focusNextFilter()\" />\r\n }\r\n }\r\n }\r\n\r\n <div class=\"actions\">\r\n <div class=\"button-small-primary\" (click)=\"onApplyFilters()\">\r\n <div class=\"label\">Aplicar Filtros</div>\r\n </div>\r\n\r\n <div class=\"button-text\" (click)=\"clearAllFilters()\">\r\n Borrar Filtros\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n }\r\n</div>", styles: [".header-container-table{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;flex:1;width:100%;position:relative}.filters-dashboard-table{display:flex;flex-direction:row;gap:24px;align-items:center;justify-content:flex-start;flex-shrink:0;width:100%;position:relative}.title-table{color:var(--schemes-on-surface, #171c1f);font-family:var(--headline-large-font, \"Roboto-SemiBold\", sans-serif);font-size:32px;line-height:40px;font-weight:600;position:relative}.filters-container{display:flex;flex-direction:row;gap:24px;margin-top:12px;position:relative;flex-wrap:wrap}.filters-wrapper{display:flex;position:relative;align-items:center;margin-top:4px;z-index:1000;flex-wrap:wrap;gap:10px}.actions{display:flex;gap:10px}.button-text{display:flex;background-color:transparent;color:#61661f;padding:0 12px;font-size:1.3rem;font-weight:500;border:1px solid #61661F;border-radius:20px;cursor:pointer;justify-content:center;align-items:center;position:relative;flex-shrink:0}.button-text:hover{background-color:#d8eb2ca7;border:1px solid #d8eb2ca7}.button-small-primary{background-color:var(--primary, #596300);padding:10px 16px;display:flex;flex-direction:row;gap:8px;align-items:center;justify-content:center;flex-shrink:0;position:relative;border:none;border-radius:99px;cursor:pointer}.button-small-primary:hover{background-color:var(--on-secondary-container, #61661F)}.button-small-primary:active{background-color:#737928}.icon{color:var(--surface, #fafae8);flex-shrink:0;width:20px;height:20px;position:relative;overflow:visible}.button-small-primary .label{color:var(--schemes-on-primary, #ffffff);text-align:left;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);position:relative;display:flex;align-items:center;justify-content:flex-start}\n"] }]
|
|
2978
|
+
}], propDecorators: { filtersContainer: [{
|
|
2979
|
+
type: ViewChild,
|
|
2980
|
+
args: ['filtersContainer', { read: ElementRef }]
|
|
2981
|
+
}], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], filtersConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "filtersConfig", required: false }] }], filtersChange: [{ type: i0.Output, args: ["filtersChange"] }], applyFilters: [{ type: i0.Output, args: ["applyFilters"] }], buttonMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonMode", required: false }] }], filterButtonClicked: [{ type: i0.Output, args: ["filterButtonClicked"] }] } });
|
|
2982
|
+
|
|
2983
|
+
class NotificationModal {
|
|
2984
|
+
messageInput;
|
|
2985
|
+
mode = 'list';
|
|
2986
|
+
titulo = 'Notificar a este Agente';
|
|
2987
|
+
buttonClick = new EventEmitter();
|
|
2988
|
+
itemLabel = '¡URGENTE!';
|
|
2989
|
+
btnLabel = 'Personalizado';
|
|
2990
|
+
defaultMessages = [
|
|
2991
|
+
'¡URGENTE!',
|
|
2992
|
+
'¡ALERTA!',
|
|
2993
|
+
'¡EMERGENCIA!'
|
|
2994
|
+
];
|
|
2995
|
+
messageValue = '';
|
|
2996
|
+
selectDefaultMessage(message) {
|
|
2997
|
+
this.messageValue = message;
|
|
2998
|
+
this.mode = 'edit';
|
|
2999
|
+
setTimeout(() => {
|
|
3000
|
+
this.messageInput?.nativeElement.focus();
|
|
3001
|
+
this.messageInput?.nativeElement.setSelectionRange(this.messageValue.length, this.messageValue.length);
|
|
3002
|
+
});
|
|
3003
|
+
}
|
|
3004
|
+
customMessage() {
|
|
3005
|
+
this.messageValue = '';
|
|
3006
|
+
this.mode = 'edit';
|
|
3007
|
+
setTimeout(() => {
|
|
3008
|
+
this.messageInput?.nativeElement.focus();
|
|
3009
|
+
});
|
|
3010
|
+
}
|
|
3011
|
+
btnClick() {
|
|
3012
|
+
this.buttonClick.emit();
|
|
3013
|
+
}
|
|
3014
|
+
backToList() {
|
|
3015
|
+
this.mode = 'list';
|
|
3016
|
+
this.messageValue = '';
|
|
3017
|
+
}
|
|
3018
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NotificationModal, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3019
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: NotificationModal, isStandalone: true, selector: "lib-notification-modal", inputs: { titulo: "titulo" }, outputs: { buttonClick: "buttonClick" }, viewQueries: [{ propertyName: "messageInput", first: true, predicate: ["messageInput"], descendants: true }], ngImport: i0, template: "<div class=\"notification-modal-container\">\r\n <div class=\"notification-modal-header\">\r\n <h3>{{ titulo }}</h3>\r\n </div>\r\n <div class=\"notification-modal-body\">\r\n <!-- LISTA DE MENSAJES -->\r\n @if (mode === 'list') {\r\n <div class=\"default-message-list\">\r\n @for (msg of defaultMessages; track msg) {\r\n <div class=\"default-message-item\" (click)=\"selectDefaultMessage(msg)\">\r\n <span>{{ msg }}</span>\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-send-2\" viewBox=\"0 0 24 24\">\r\n <path fill=\"none\" stroke=\"none\" d=\"M0 0h24v24H0z\" />\r\n <path\r\n d=\"M4.698 4.034 21 12 4.698 19.966a.5.5 0 0 1-.546-.124.56.56 0 0 1-.12-.568L6.5 12 4.032 4.726a.56.56 0 0 1 .12-.568.5.5 0 0 1 .546-.124M6.5 12H21\" />\r\n </svg>\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- EDICI\u00D3N -->\r\n @if (mode === 'edit') {\r\n <div class=\"text-area-wrapper\">\r\n <textarea #messageInput class=\"message-textarea\" rows=\"5\" placeholder=\"Mensaje...\">{{messageValue}}</textarea>\r\n </div>\r\n }\r\n\r\n </div>\r\n\r\n <div class=\"notification-modal-actions\">\r\n @if (mode === 'edit') {\r\n <button class=\"btn-back\" (click)=\"backToList()\">\r\n Volver\r\n </button>\r\n <button class=\"btn-custom\" (click)=\"btnClick()\">\r\n Notificar\r\n </button>\r\n } @else {\r\n <button class=\"btn-custom\" (click)=\"customMessage()\">\r\n Personalizado\r\n </button>\r\n }\r\n </div>\r\n</div>", styles: [".notification-modal-container{width:100%;min-width:300px;max-width:320px;display:flex;flex-direction:column;border-radius:12px;background-color:#f0f0db}.notification-modal-header{padding:16px}.notification-modal-header h3{font-size:1.6rem;font-weight:700;color:#454733;text-transform:uppercase}.notification-modal-body{display:flex;flex-direction:column;gap:12px;overflow:hidden;padding:0 6px}.notification-modal-actions{width:100%;display:flex;justify-content:flex-end;align-items:center;gap:16px;padding:16px}.default-message-item{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;cursor:pointer;border-radius:6px}.default-message-item:hover{background:#dee58f}.default-message-item .span{font-size:1.4rem;color:#454733}.text-area-wrapper{position:relative;width:100%;padding:0 10px}.message-textarea{width:100%;resize:none;border-radius:6px;border:1px solid #787861;background:transparent;padding:6px 12px}button{border:none;background-color:transparent}.btn-custom,.btn-back{color:#596300;font-weight:500;font-size:1.4rem;padding:6px 12px;cursor:pointer;border-radius:50px}.btn-custom:hover{background-color:#596300;color:#f0f0db}.btn-back:hover{background-color:#dee58f;color:#596300}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
3020
|
+
}
|
|
3021
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NotificationModal, decorators: [{
|
|
3022
|
+
type: Component,
|
|
3023
|
+
args: [{ selector: 'lib-notification-modal', imports: [CommonModule], template: "<div class=\"notification-modal-container\">\r\n <div class=\"notification-modal-header\">\r\n <h3>{{ titulo }}</h3>\r\n </div>\r\n <div class=\"notification-modal-body\">\r\n <!-- LISTA DE MENSAJES -->\r\n @if (mode === 'list') {\r\n <div class=\"default-message-list\">\r\n @for (msg of defaultMessages; track msg) {\r\n <div class=\"default-message-item\" (click)=\"selectDefaultMessage(msg)\">\r\n <span>{{ msg }}</span>\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-send-2\" viewBox=\"0 0 24 24\">\r\n <path fill=\"none\" stroke=\"none\" d=\"M0 0h24v24H0z\" />\r\n <path\r\n d=\"M4.698 4.034 21 12 4.698 19.966a.5.5 0 0 1-.546-.124.56.56 0 0 1-.12-.568L6.5 12 4.032 4.726a.56.56 0 0 1 .12-.568.5.5 0 0 1 .546-.124M6.5 12H21\" />\r\n </svg>\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- EDICI\u00D3N -->\r\n @if (mode === 'edit') {\r\n <div class=\"text-area-wrapper\">\r\n <textarea #messageInput class=\"message-textarea\" rows=\"5\" placeholder=\"Mensaje...\">{{messageValue}}</textarea>\r\n </div>\r\n }\r\n\r\n </div>\r\n\r\n <div class=\"notification-modal-actions\">\r\n @if (mode === 'edit') {\r\n <button class=\"btn-back\" (click)=\"backToList()\">\r\n Volver\r\n </button>\r\n <button class=\"btn-custom\" (click)=\"btnClick()\">\r\n Notificar\r\n </button>\r\n } @else {\r\n <button class=\"btn-custom\" (click)=\"customMessage()\">\r\n Personalizado\r\n </button>\r\n }\r\n </div>\r\n</div>", styles: [".notification-modal-container{width:100%;min-width:300px;max-width:320px;display:flex;flex-direction:column;border-radius:12px;background-color:#f0f0db}.notification-modal-header{padding:16px}.notification-modal-header h3{font-size:1.6rem;font-weight:700;color:#454733;text-transform:uppercase}.notification-modal-body{display:flex;flex-direction:column;gap:12px;overflow:hidden;padding:0 6px}.notification-modal-actions{width:100%;display:flex;justify-content:flex-end;align-items:center;gap:16px;padding:16px}.default-message-item{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;cursor:pointer;border-radius:6px}.default-message-item:hover{background:#dee58f}.default-message-item .span{font-size:1.4rem;color:#454733}.text-area-wrapper{position:relative;width:100%;padding:0 10px}.message-textarea{width:100%;resize:none;border-radius:6px;border:1px solid #787861;background:transparent;padding:6px 12px}button{border:none;background-color:transparent}.btn-custom,.btn-back{color:#596300;font-weight:500;font-size:1.4rem;padding:6px 12px;cursor:pointer;border-radius:50px}.btn-custom:hover{background-color:#596300;color:#f0f0db}.btn-back:hover{background-color:#dee58f;color:#596300}\n"] }]
|
|
3024
|
+
}], propDecorators: { messageInput: [{
|
|
3025
|
+
type: ViewChild,
|
|
3026
|
+
args: ['messageInput']
|
|
3027
|
+
}], titulo: [{
|
|
3028
|
+
type: Input$1
|
|
3029
|
+
}], buttonClick: [{
|
|
3030
|
+
type: Output
|
|
3031
|
+
}] } });
|
|
3032
|
+
|
|
3033
|
+
class Footer {
|
|
3034
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Footer, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3035
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: Footer, isStandalone: true, selector: "app-footer", ngImport: i0, template: "<footer class=\"footer\">\r\n \u00A9 2026 <span>PAICO \u00B7 Sistemas y Aplicaciones en L\u00EDnea.</span> Todos los derechos reservados.\r\n</footer>\r\n", styles: ["footer{background-color:#f0f0db;color:#787861;padding:20px 30px;border-radius:16px;display:flex;gap:6px;justify-content:center;align-items:center;position:fixed;bottom:16px;left:32px;right:32px;font-size:1.8rem}span{font-weight:700}\n"] });
|
|
3036
|
+
}
|
|
3037
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Footer, decorators: [{
|
|
3038
|
+
type: Component,
|
|
3039
|
+
args: [{ selector: 'app-footer', standalone: true, imports: [], template: "<footer class=\"footer\">\r\n \u00A9 2026 <span>PAICO \u00B7 Sistemas y Aplicaciones en L\u00EDnea.</span> Todos los derechos reservados.\r\n</footer>\r\n", styles: ["footer{background-color:#f0f0db;color:#787861;padding:20px 30px;border-radius:16px;display:flex;gap:6px;justify-content:center;align-items:center;position:fixed;bottom:16px;left:32px;right:32px;font-size:1.8rem}span{font-weight:700}\n"] }]
|
|
3040
|
+
}] });
|
|
2949
3041
|
|
|
2950
3042
|
// src/app/components/public-api.ts
|
|
2951
3043
|
// Exportar el componente
|
|
@@ -2954,5 +3046,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
2954
3046
|
* Generated bundle index. Do not edit.
|
|
2955
3047
|
*/
|
|
2956
3048
|
|
|
2957
|
-
export { DateTimeFilter, DateTimePicker, DevicesCarousel, DialogAlertComponent, DialogConfirmation, DynamicFormFields, FeatureCard, InfoGroup, Input, InputNumberFilter, InputSelectFilter, InputTextFilter, Loader, ModalForm, NotFoundModal, NotificationModal, PaginationComponent, ProcessingOverlay, ProgressBar, ProgressFormService, SelectCustomSearch, SideCard, SideCardDetail, TOAST_EVENTS, Table, TitleFilters, ToastHelper, WizardForm };
|
|
3049
|
+
export { DateTimeFilter, DateTimePicker, DevicesCarousel, DialogAlertComponent, DialogConfirmation, DynamicFormFields, FeatureCard, Footer, InfoGroup, Input, InputNumberFilter, InputSelectFilter, InputTextFilter, Loader, ModalForm, NotFoundModal, NotificationModal, PaginationComponent, ProcessingOverlay, ProgressBar, ProgressFormService, SelectCustomSearch, SideCard, SideCardDetail, TOAST_EVENTS, Table, TitleFilters, ToastHelper, WizardForm };
|
|
2958
3050
|
//# sourceMappingURL=sapenlinea-components.mjs.map
|