sapenlinea-components 0.6.67 → 0.7.69

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.
Files changed (5) hide show
  1. package/README.md +31 -8
  2. package/fesm2022/sapenlinea-components.mjs +235 -59
  3. package/fesm2022/sapenlinea-components.mjs.map +1 -1
  4. package/index.d.ts +74 -8
  5. package/package.json +1 -1
package/fesm2022/sapenlinea-components.mjs CHANGED
@@ -8,7 +8,7 @@ import PubSub from 'pubsub-js';
8
8
  import { BarChart as BarChart$1, LineChart as LineChart$1, PieChart, HeatmapChart } from 'echarts/charts';
9
9
  import * as echarts from 'echarts/core';
10
10
  import { NgxEchartsDirective, provideEchartsCore } from 'ngx-echarts';
11
- import { GridComponent, TooltipComponent, GraphicComponent, DataZoomComponent, VisualMapComponent } from 'echarts/components';
11
+ import { GridComponent, TooltipComponent, GraphicComponent, DataZoomComponent, VisualMapComponent, LegendComponent } from 'echarts/components';
12
12
  import { CanvasRenderer } from 'echarts/renderers';
13
13
 
14
14
  class PaginationComponent {
@@ -178,6 +178,7 @@ class Table {
178
178
  case 'percentage':
179
179
  return 'right';
180
180
  case 'status':
181
+ case 'grade':
181
182
  return 'center';
182
183
  case 'email':
183
184
  default:
@@ -200,6 +201,8 @@ class Table {
200
201
  return this.formatDateTimeValue(value);
201
202
  case 'email':
202
203
  return String(value).toLowerCase();
204
+ case 'grade':
205
+ return `${value}°`;
203
206
  default:
204
207
  return String(value);
205
208
  }
@@ -465,12 +468,21 @@ class Table {
465
468
  return acc + (isNaN(value) ? 0 : value);
466
469
  }, 0);
467
470
  }
471
+ getGradeStyle(value) {
472
+ if (value >= 0 && value <= 0.9)
473
+ return { bg: '#9ED89D', color: '#006D2F' };
474
+ if (value > 0.9 && value <= 2.9)
475
+ return { bg: '#D8BF9D', color: '#CF6507' };
476
+ if (value > 2.9 && value <= 4)
477
+ return { bg: '#D89D9D', color: '#CF0707' };
478
+ return { bg: '#BAC2BB', color: '#40484C' };
479
+ }
468
480
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Table, deps: [], target: i0.ɵɵFactoryTarget.Component });
469
- 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 }, subColumns: { classPropertyName: "subColumns", publicName: "subColumns", isSignal: true, isRequired: false, transformFunction: null }, isRowExpandable: { classPropertyName: "isRowExpandable", publicName: "isRowExpandable", isSignal: true, isRequired: false, transformFunction: null }, expandedChildren: { classPropertyName: "expandedChildren", publicName: "expandedChildren", isSignal: true, isRequired: false, transformFunction: null }, rowIdKey: { classPropertyName: "rowIdKey", publicName: "rowIdKey", isSignal: true, isRequired: false, transformFunction: null }, showSelection: { classPropertyName: "showSelection", publicName: "showSelection", isSignal: true, isRequired: false, transformFunction: null }, showTotals: { classPropertyName: "showTotals", publicName: "showTotals", 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\r\n @if (showSelection()) {\r\n <th class=\"checkbox-header\">\r\n <label class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\">\r\n <input type=\"checkbox\" [checked]=\"isAllSelected()\" (change)=\"toggleAllRows($event.target.checked)\" />\r\n <span class=\"checkmark\"></span>\r\n </label>\r\n </th>\r\n }\r\n\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 sortedData(); track row['id']) {\r\n <tr class=\"parent-row\"\r\n [class.expandable]=\"isRowExpandable()(row)\"\r\n [class.expanded]=\"isExpanded(row)\"\r\n [class.selected]=\"isRowSelected(row)\"\r\n (click)=\"toggleRowExpand(row, $event)\">\r\n\r\n @if (showSelection()) {\r\n <td class=\"checkbox-cell\">\r\n <label class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\">\r\n <input type=\"checkbox\" [checked]=\"isRowSelected(row)\" (change)=\"toggleRow(row, $event.target.checked)\" />\r\n <span class=\"checkmark\"></span>\r\n </label>\r\n </td>\r\n }\r\n\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 {{ getStatusLabel(row[col.key]) }}\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); $event.stopPropagation()\">\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)\"\r\n (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 <!-- Subfilas (solo si es expandible y est\u00E1 expandida) -->\r\n @if (isRowExpandable()(row) && isExpanded(row)) {\r\n <tr class=\"child-row child-header-row\">\r\n <td class=\"child-cell-full\"\r\n [attr.colspan]=\" columns().length + (showActions() ? 1 : 0) + (showSelection() ? 1 : 0)\">\r\n <div class=\"child-grid\">\r\n @for (subCol of subColumns(); track subCol.key) {\r\n <div class=\"child-item\">\r\n <span class=\"child-label\">{{ subCol.label }}</span>\r\n </div>\r\n }\r\n </div>\r\n </td>\r\n </tr>\r\n\r\n @for (child of getChildRows(row); track child['id']) {\r\n <tr class=\"child-row\">\r\n <td class=\"child-cell-full\" [attr.colspan]=\"\r\n columns().length +\r\n (showActions() ? 1 : 0) +\r\n (showSelection() ? 1 : 0)\r\n \">\r\n <div class=\"child-grid\">\r\n @for (subCol of subColumns(); track subCol.key) {\r\n <div class=\"child-item\">\r\n\r\n @if (subCol.type === 'status') {\r\n @let style = getStatusStyle(child[subCol.key]);\r\n <span class=\"status-chip child-status-chip\" [style.background-color]=\"style.bg\"\r\n [style.color]=\"style.color\">\r\n {{ getStatusLabel(child[subCol.key]) }}\r\n </span>\r\n } @else {\r\n <span class=\"child-value\">\r\n {{ formatValue(subCol, child[subCol.key]) }}\r\n </span>\r\n }\r\n\r\n </div>\r\n }\r\n </div>\r\n </td>\r\n </tr>\r\n }\r\n }\r\n }\r\n @if (showTotals()) {\r\n <tr class=\"total-row\">\r\n \r\n <!-- checkbox -->\r\n @if (showSelection()) {\r\n <td class=\"checkbox-cell\"></td>\r\n }\r\n \r\n @for (col of columns(); track col.key) {\r\n <td [class]=\"getAlignment(col)\">\r\n \r\n @if (col.type === 'money' && col.totalizable) {\r\n {{ formatValue(col, getMoneyTotal(col)) }}\r\n } @else if (col === columns()[0]) {\r\n <strong>Total</strong>\r\n }\r\n \r\n </td>\r\n }\r\n \r\n @if (showActions()) {\r\n <td></td>\r\n }\r\n \r\n </tr>\r\n }\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:8px 16px;color:#4a4a4a;border-top:1px solid #c7c7ad}.inner-table thead .actions-header{text-align:center}.custom-checkbox{position:relative;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;cursor:pointer}.custom-checkbox input{position:absolute;opacity:0;pointer-events:none}.custom-checkbox .checkmark{width:14px;height:14px;border:1.5px solid #7a7a5a;border-radius:3px;box-sizing:border-box;transition:all .15s ease;background:transparent;position:relative;display:flex;align-items:center;justify-content:center}.custom-checkbox input:checked+.checkmark{background-color:#596300;border-color:#596300}.custom-checkbox input:checked+.checkmark:after{content:\"\";position:absolute;top:50%;left:50%;width:4px;height:8px;border:solid #ffffff;border-width:0 2px 2px 0;transform:translate(-50%,-60%) rotate(45deg)}.custom-checkbox:hover .checkmark{border-color:#596300}.checkbox-header,.checkbox-cell{width:32px;padding:0;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>')}.icon-add{-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=\"M12 5l0 14\"/><path d=\"M5 12l14 0\"/></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=\"M12 5l0 14\"/><path d=\"M5 12l14 0\"/></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}.inner-table tbody tr.parent-row{transition:background-color .15s ease;cursor:default}.inner-table tbody tr.parent-row:hover{background-color:transparent}.inner-table tbody tr.parent-row.expandable{cursor:pointer}.inner-table tbody tr.parent-row.expandable:hover{background-color:#e3dfcc}.inner-table tbody tr.parent-row.expandable.expanded{background-color:#d2cdb7}.inner-table tbody tr.parent-row.selected{background-color:#cfd8a5}.child-cell-full{padding:16px 24px;border-top:1px dashed #c7c7ad;background-color:#e5e2d1}.child-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px 24px}.child-item{display:flex;flex-direction:column;gap:4px;padding-left:48px}.child-label{font-size:12px;font-weight:600;text-transform:uppercase;color:#596300;text-align:start}.child-value{font-size:14px;color:#444;text-align:start}.total-row{background-color:#d9ddad;border-top:2px solid #596300}.total-row td{font-weight:600;color:#3a3a3a}.total-row td:first-child{border-bottom-left-radius:20px}.total-row td:last-child{border-bottom-right-radius:20px}\n"] });
481
+ 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 }, subColumns: { classPropertyName: "subColumns", publicName: "subColumns", isSignal: true, isRequired: false, transformFunction: null }, isRowExpandable: { classPropertyName: "isRowExpandable", publicName: "isRowExpandable", isSignal: true, isRequired: false, transformFunction: null }, expandedChildren: { classPropertyName: "expandedChildren", publicName: "expandedChildren", isSignal: true, isRequired: false, transformFunction: null }, rowIdKey: { classPropertyName: "rowIdKey", publicName: "rowIdKey", isSignal: true, isRequired: false, transformFunction: null }, showSelection: { classPropertyName: "showSelection", publicName: "showSelection", isSignal: true, isRequired: false, transformFunction: null }, showTotals: { classPropertyName: "showTotals", publicName: "showTotals", 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\r\n @if (showSelection()) {\r\n <th class=\"checkbox-header\">\r\n <label class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\">\r\n <input type=\"checkbox\" [checked]=\"isAllSelected()\" (change)=\"toggleAllRows($event.target.checked)\" />\r\n <span class=\"checkmark\"></span>\r\n </label>\r\n </th>\r\n }\r\n\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 sortedData(); track row['id']) {\r\n <tr class=\"parent-row\"\r\n [class.expandable]=\"isRowExpandable()(row)\"\r\n [class.expanded]=\"isExpanded(row)\"\r\n [class.selected]=\"isRowSelected(row)\"\r\n (click)=\"toggleRowExpand(row, $event)\">\r\n\r\n @if (showSelection()) {\r\n <td class=\"checkbox-cell\">\r\n <label class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\">\r\n <input type=\"checkbox\" [checked]=\"isRowSelected(row)\" (change)=\"toggleRow(row, $event.target.checked)\" />\r\n <span class=\"checkmark\"></span>\r\n </label>\r\n </td>\r\n }\r\n\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 {{ getStatusLabel(row[col.key]) }}\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 if (col.type === 'grade') {\r\n @let style = getGradeStyle(row[col.key]);\r\n <span class=\"status-chip\" [style.background-color]=\"style.bg\" [style.color]=\"style.color\">\r\n {{ formatValue(col, row[col.key]) }}\r\n </span>\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); $event.stopPropagation()\">\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)\"\r\n (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 <!-- Subfilas (solo si es expandible y est\u00E1 expandida) -->\r\n @if (isRowExpandable()(row) && isExpanded(row)) {\r\n <tr class=\"child-row child-header-row\">\r\n <td class=\"child-cell-full\"\r\n [attr.colspan]=\" columns().length + (showActions() ? 1 : 0) + (showSelection() ? 1 : 0)\">\r\n <div class=\"child-grid\">\r\n @for (subCol of subColumns(); track subCol.key) {\r\n <div class=\"child-item\">\r\n <span class=\"child-label\">{{ subCol.label }}</span>\r\n </div>\r\n }\r\n </div>\r\n </td>\r\n </tr>\r\n\r\n @for (child of getChildRows(row); track child['id']) {\r\n <tr class=\"child-row\">\r\n <td class=\"child-cell-full\" [attr.colspan]=\"\r\n columns().length +\r\n (showActions() ? 1 : 0) +\r\n (showSelection() ? 1 : 0)\r\n \">\r\n <div class=\"child-grid\">\r\n @for (subCol of subColumns(); track subCol.key) {\r\n <div class=\"child-item\">\r\n\r\n @if (subCol.type === 'status') {\r\n @let style = getStatusStyle(child[subCol.key]);\r\n <span class=\"status-chip child-status-chip\" [style.background-color]=\"style.bg\"\r\n [style.color]=\"style.color\">\r\n {{ getStatusLabel(child[subCol.key]) }}\r\n </span>\r\n } @else {\r\n <span class=\"child-value\">\r\n {{ formatValue(subCol, child[subCol.key]) }}\r\n </span>\r\n }\r\n\r\n </div>\r\n }\r\n </div>\r\n </td>\r\n </tr>\r\n }\r\n }\r\n }\r\n @if (showTotals()) {\r\n <tr class=\"total-row\">\r\n \r\n <!-- checkbox -->\r\n @if (showSelection()) {\r\n <td class=\"checkbox-cell\"></td>\r\n }\r\n \r\n @for (col of columns(); track col.key) {\r\n <td [class]=\"getAlignment(col)\">\r\n \r\n @if (col.type === 'money' && col.totalizable) {\r\n {{ formatValue(col, getMoneyTotal(col)) }}\r\n } @else if (col === columns()[0]) {\r\n <strong>Total</strong>\r\n }\r\n \r\n </td>\r\n }\r\n \r\n @if (showActions()) {\r\n <td></td>\r\n }\r\n \r\n </tr>\r\n }\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:8px 16px;color:#4a4a4a;border-top:1px solid #c7c7ad}.inner-table thead .actions-header{text-align:center}.custom-checkbox{position:relative;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;cursor:pointer}.custom-checkbox input{position:absolute;opacity:0;pointer-events:none}.custom-checkbox .checkmark{width:14px;height:14px;border:1.5px solid #7a7a5a;border-radius:3px;box-sizing:border-box;transition:all .15s ease;background:transparent;position:relative;display:flex;align-items:center;justify-content:center}.custom-checkbox input:checked+.checkmark{background-color:#596300;border-color:#596300}.custom-checkbox input:checked+.checkmark:after{content:\"\";position:absolute;top:50%;left:50%;width:4px;height:8px;border:solid #ffffff;border-width:0 2px 2px 0;transform:translate(-50%,-60%) rotate(45deg)}.custom-checkbox:hover .checkmark{border-color:#596300}.checkbox-header,.checkbox-cell{width:32px;padding:0;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>')}.icon-add{-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=\"M12 5l0 14\"/><path d=\"M5 12l14 0\"/></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=\"M12 5l0 14\"/><path d=\"M5 12l14 0\"/></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}.inner-table tbody tr.parent-row{transition:background-color .15s ease;cursor:default}.inner-table tbody tr.parent-row:hover{background-color:transparent}.inner-table tbody tr.parent-row.expandable{cursor:pointer}.inner-table tbody tr.parent-row.expandable:hover{background-color:#e3dfcc}.inner-table tbody tr.parent-row.expandable.expanded{background-color:#d2cdb7}.inner-table tbody tr.parent-row.selected{background-color:#cfd8a5}.child-cell-full{padding:16px 24px;border-top:1px dashed #c7c7ad;background-color:#e5e2d1}.child-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px 24px}.child-item{display:flex;flex-direction:column;gap:4px;padding-left:48px}.child-label{font-size:12px;font-weight:600;text-transform:uppercase;color:#596300;text-align:start}.child-value{font-size:14px;color:#444;text-align:start}.total-row{background-color:#d9ddad;border-top:2px solid #596300}.total-row td{font-weight:600;color:#3a3a3a}.total-row td:first-child{border-bottom-left-radius:20px}.total-row td:last-child{border-bottom-right-radius:20px}\n"] });
470
482
  }
471
483
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Table, decorators: [{
472
484
  type: Component,
473
- 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\r\n @if (showSelection()) {\r\n <th class=\"checkbox-header\">\r\n <label class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\">\r\n <input type=\"checkbox\" [checked]=\"isAllSelected()\" (change)=\"toggleAllRows($event.target.checked)\" />\r\n <span class=\"checkmark\"></span>\r\n </label>\r\n </th>\r\n }\r\n\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 sortedData(); track row['id']) {\r\n <tr class=\"parent-row\"\r\n [class.expandable]=\"isRowExpandable()(row)\"\r\n [class.expanded]=\"isExpanded(row)\"\r\n [class.selected]=\"isRowSelected(row)\"\r\n (click)=\"toggleRowExpand(row, $event)\">\r\n\r\n @if (showSelection()) {\r\n <td class=\"checkbox-cell\">\r\n <label class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\">\r\n <input type=\"checkbox\" [checked]=\"isRowSelected(row)\" (change)=\"toggleRow(row, $event.target.checked)\" />\r\n <span class=\"checkmark\"></span>\r\n </label>\r\n </td>\r\n }\r\n\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 {{ getStatusLabel(row[col.key]) }}\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); $event.stopPropagation()\">\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)\"\r\n (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 <!-- Subfilas (solo si es expandible y est\u00E1 expandida) -->\r\n @if (isRowExpandable()(row) && isExpanded(row)) {\r\n <tr class=\"child-row child-header-row\">\r\n <td class=\"child-cell-full\"\r\n [attr.colspan]=\" columns().length + (showActions() ? 1 : 0) + (showSelection() ? 1 : 0)\">\r\n <div class=\"child-grid\">\r\n @for (subCol of subColumns(); track subCol.key) {\r\n <div class=\"child-item\">\r\n <span class=\"child-label\">{{ subCol.label }}</span>\r\n </div>\r\n }\r\n </div>\r\n </td>\r\n </tr>\r\n\r\n @for (child of getChildRows(row); track child['id']) {\r\n <tr class=\"child-row\">\r\n <td class=\"child-cell-full\" [attr.colspan]=\"\r\n columns().length +\r\n (showActions() ? 1 : 0) +\r\n (showSelection() ? 1 : 0)\r\n \">\r\n <div class=\"child-grid\">\r\n @for (subCol of subColumns(); track subCol.key) {\r\n <div class=\"child-item\">\r\n\r\n @if (subCol.type === 'status') {\r\n @let style = getStatusStyle(child[subCol.key]);\r\n <span class=\"status-chip child-status-chip\" [style.background-color]=\"style.bg\"\r\n [style.color]=\"style.color\">\r\n {{ getStatusLabel(child[subCol.key]) }}\r\n </span>\r\n } @else {\r\n <span class=\"child-value\">\r\n {{ formatValue(subCol, child[subCol.key]) }}\r\n </span>\r\n }\r\n\r\n </div>\r\n }\r\n </div>\r\n </td>\r\n </tr>\r\n }\r\n }\r\n }\r\n @if (showTotals()) {\r\n <tr class=\"total-row\">\r\n \r\n <!-- checkbox -->\r\n @if (showSelection()) {\r\n <td class=\"checkbox-cell\"></td>\r\n }\r\n \r\n @for (col of columns(); track col.key) {\r\n <td [class]=\"getAlignment(col)\">\r\n \r\n @if (col.type === 'money' && col.totalizable) {\r\n {{ formatValue(col, getMoneyTotal(col)) }}\r\n } @else if (col === columns()[0]) {\r\n <strong>Total</strong>\r\n }\r\n \r\n </td>\r\n }\r\n \r\n @if (showActions()) {\r\n <td></td>\r\n }\r\n \r\n </tr>\r\n }\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:8px 16px;color:#4a4a4a;border-top:1px solid #c7c7ad}.inner-table thead .actions-header{text-align:center}.custom-checkbox{position:relative;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;cursor:pointer}.custom-checkbox input{position:absolute;opacity:0;pointer-events:none}.custom-checkbox .checkmark{width:14px;height:14px;border:1.5px solid #7a7a5a;border-radius:3px;box-sizing:border-box;transition:all .15s ease;background:transparent;position:relative;display:flex;align-items:center;justify-content:center}.custom-checkbox input:checked+.checkmark{background-color:#596300;border-color:#596300}.custom-checkbox input:checked+.checkmark:after{content:\"\";position:absolute;top:50%;left:50%;width:4px;height:8px;border:solid #ffffff;border-width:0 2px 2px 0;transform:translate(-50%,-60%) rotate(45deg)}.custom-checkbox:hover .checkmark{border-color:#596300}.checkbox-header,.checkbox-cell{width:32px;padding:0;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>')}.icon-add{-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=\"M12 5l0 14\"/><path d=\"M5 12l14 0\"/></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=\"M12 5l0 14\"/><path d=\"M5 12l14 0\"/></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}.inner-table tbody tr.parent-row{transition:background-color .15s ease;cursor:default}.inner-table tbody tr.parent-row:hover{background-color:transparent}.inner-table tbody tr.parent-row.expandable{cursor:pointer}.inner-table tbody tr.parent-row.expandable:hover{background-color:#e3dfcc}.inner-table tbody tr.parent-row.expandable.expanded{background-color:#d2cdb7}.inner-table tbody tr.parent-row.selected{background-color:#cfd8a5}.child-cell-full{padding:16px 24px;border-top:1px dashed #c7c7ad;background-color:#e5e2d1}.child-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px 24px}.child-item{display:flex;flex-direction:column;gap:4px;padding-left:48px}.child-label{font-size:12px;font-weight:600;text-transform:uppercase;color:#596300;text-align:start}.child-value{font-size:14px;color:#444;text-align:start}.total-row{background-color:#d9ddad;border-top:2px solid #596300}.total-row td{font-weight:600;color:#3a3a3a}.total-row td:first-child{border-bottom-left-radius:20px}.total-row td:last-child{border-bottom-right-radius:20px}\n"] }]
485
+ 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\r\n @if (showSelection()) {\r\n <th class=\"checkbox-header\">\r\n <label class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\">\r\n <input type=\"checkbox\" [checked]=\"isAllSelected()\" (change)=\"toggleAllRows($event.target.checked)\" />\r\n <span class=\"checkmark\"></span>\r\n </label>\r\n </th>\r\n }\r\n\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 sortedData(); track row['id']) {\r\n <tr class=\"parent-row\"\r\n [class.expandable]=\"isRowExpandable()(row)\"\r\n [class.expanded]=\"isExpanded(row)\"\r\n [class.selected]=\"isRowSelected(row)\"\r\n (click)=\"toggleRowExpand(row, $event)\">\r\n\r\n @if (showSelection()) {\r\n <td class=\"checkbox-cell\">\r\n <label class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\">\r\n <input type=\"checkbox\" [checked]=\"isRowSelected(row)\" (change)=\"toggleRow(row, $event.target.checked)\" />\r\n <span class=\"checkmark\"></span>\r\n </label>\r\n </td>\r\n }\r\n\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 {{ getStatusLabel(row[col.key]) }}\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 if (col.type === 'grade') {\r\n @let style = getGradeStyle(row[col.key]);\r\n <span class=\"status-chip\" [style.background-color]=\"style.bg\" [style.color]=\"style.color\">\r\n {{ formatValue(col, row[col.key]) }}\r\n </span>\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); $event.stopPropagation()\">\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)\"\r\n (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 <!-- Subfilas (solo si es expandible y est\u00E1 expandida) -->\r\n @if (isRowExpandable()(row) && isExpanded(row)) {\r\n <tr class=\"child-row child-header-row\">\r\n <td class=\"child-cell-full\"\r\n [attr.colspan]=\" columns().length + (showActions() ? 1 : 0) + (showSelection() ? 1 : 0)\">\r\n <div class=\"child-grid\">\r\n @for (subCol of subColumns(); track subCol.key) {\r\n <div class=\"child-item\">\r\n <span class=\"child-label\">{{ subCol.label }}</span>\r\n </div>\r\n }\r\n </div>\r\n </td>\r\n </tr>\r\n\r\n @for (child of getChildRows(row); track child['id']) {\r\n <tr class=\"child-row\">\r\n <td class=\"child-cell-full\" [attr.colspan]=\"\r\n columns().length +\r\n (showActions() ? 1 : 0) +\r\n (showSelection() ? 1 : 0)\r\n \">\r\n <div class=\"child-grid\">\r\n @for (subCol of subColumns(); track subCol.key) {\r\n <div class=\"child-item\">\r\n\r\n @if (subCol.type === 'status') {\r\n @let style = getStatusStyle(child[subCol.key]);\r\n <span class=\"status-chip child-status-chip\" [style.background-color]=\"style.bg\"\r\n [style.color]=\"style.color\">\r\n {{ getStatusLabel(child[subCol.key]) }}\r\n </span>\r\n } @else {\r\n <span class=\"child-value\">\r\n {{ formatValue(subCol, child[subCol.key]) }}\r\n </span>\r\n }\r\n\r\n </div>\r\n }\r\n </div>\r\n </td>\r\n </tr>\r\n }\r\n }\r\n }\r\n @if (showTotals()) {\r\n <tr class=\"total-row\">\r\n \r\n <!-- checkbox -->\r\n @if (showSelection()) {\r\n <td class=\"checkbox-cell\"></td>\r\n }\r\n \r\n @for (col of columns(); track col.key) {\r\n <td [class]=\"getAlignment(col)\">\r\n \r\n @if (col.type === 'money' && col.totalizable) {\r\n {{ formatValue(col, getMoneyTotal(col)) }}\r\n } @else if (col === columns()[0]) {\r\n <strong>Total</strong>\r\n }\r\n \r\n </td>\r\n }\r\n \r\n @if (showActions()) {\r\n <td></td>\r\n }\r\n \r\n </tr>\r\n }\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:8px 16px;color:#4a4a4a;border-top:1px solid #c7c7ad}.inner-table thead .actions-header{text-align:center}.custom-checkbox{position:relative;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;cursor:pointer}.custom-checkbox input{position:absolute;opacity:0;pointer-events:none}.custom-checkbox .checkmark{width:14px;height:14px;border:1.5px solid #7a7a5a;border-radius:3px;box-sizing:border-box;transition:all .15s ease;background:transparent;position:relative;display:flex;align-items:center;justify-content:center}.custom-checkbox input:checked+.checkmark{background-color:#596300;border-color:#596300}.custom-checkbox input:checked+.checkmark:after{content:\"\";position:absolute;top:50%;left:50%;width:4px;height:8px;border:solid #ffffff;border-width:0 2px 2px 0;transform:translate(-50%,-60%) rotate(45deg)}.custom-checkbox:hover .checkmark{border-color:#596300}.checkbox-header,.checkbox-cell{width:32px;padding:0;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>')}.icon-add{-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=\"M12 5l0 14\"/><path d=\"M5 12l14 0\"/></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=\"M12 5l0 14\"/><path d=\"M5 12l14 0\"/></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}.inner-table tbody tr.parent-row{transition:background-color .15s ease;cursor:default}.inner-table tbody tr.parent-row:hover{background-color:transparent}.inner-table tbody tr.parent-row.expandable{cursor:pointer}.inner-table tbody tr.parent-row.expandable:hover{background-color:#e3dfcc}.inner-table tbody tr.parent-row.expandable.expanded{background-color:#d2cdb7}.inner-table tbody tr.parent-row.selected{background-color:#cfd8a5}.child-cell-full{padding:16px 24px;border-top:1px dashed #c7c7ad;background-color:#e5e2d1}.child-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px 24px}.child-item{display:flex;flex-direction:column;gap:4px;padding-left:48px}.child-label{font-size:12px;font-weight:600;text-transform:uppercase;color:#596300;text-align:start}.child-value{font-size:14px;color:#444;text-align:start}.total-row{background-color:#d9ddad;border-top:2px solid #596300}.total-row td{font-weight:600;color:#3a3a3a}.total-row td:first-child{border-bottom-left-radius:20px}.total-row td:last-child{border-bottom-right-radius:20px}\n"] }]
474
486
  }], 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 }] }], subColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "subColumns", required: false }] }], isRowExpandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isRowExpandable", required: false }] }], expandedChildren: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedChildren", required: false }] }], rowIdKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowIdKey", required: false }] }], showSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSelection", required: false }] }], showTotals: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTotals", required: false }] }], chips: [{
475
487
  type: ViewChildren,
476
488
  args: ['statusChip']
@@ -4525,7 +4537,8 @@ echarts.use([
4525
4537
  CanvasRenderer,
4526
4538
  GraphicComponent,
4527
4539
  DataZoomComponent,
4528
- VisualMapComponent
4540
+ VisualMapComponent,
4541
+ LegendComponent
4529
4542
  ]);
4530
4543
  const UI_CHART_TOKENS = {
4531
4544
  fontFamily: 'Inter, sans-serif',
@@ -4544,38 +4557,104 @@ const UI_CHART_TOKENS = {
4544
4557
  labelLine: '#7f8572',
4545
4558
  centerText: '#202020',
4546
4559
  donutPalette: [
4547
- '#6b7319',
4548
- '#d9df88',
4549
- '#92001f',
4550
- '#003f55',
4551
- '#7c7d63',
4552
- '#c4d600',
4553
- '#37add1',
4554
- '#9fc6da',
4560
+ '#6b7319', // olive green (brand)
4561
+ '#d9df88', // lime soft
4562
+ '#92001f', // burgundy
4563
+ '#003f55', // deep teal
4564
+ '#7c7d63', // sage
4565
+ '#c4d600', // chartreuse
4566
+ '#37add1', // sky blue
4567
+ '#9fc6da', // light steel blue
4568
+ '#d4883a', // warm amber
4569
+ '#8b5e3c', // terracotta
4570
+ '#6a4c93', // dusty purple
4571
+ '#1b998b', // jade green
4572
+ '#e07a5f', // coral clay
4573
+ '#3d405b', // charcoal slate
4574
+ '#f2cc8f', // sand gold
4575
+ '#81b29a', // mint sage
4576
+ '#b56576', // rose mauve
4577
+ '#355070', // navy steel
4578
+ '#eaac8b', // peach
4579
+ '#a7c957', // spring green
4555
4580
  ],
4556
4581
  };
4557
4582
  class BaseChart {
4558
4583
  options = input.required(...(ngDevMode ? [{ debugName: "options" }] : []));
4584
+ chartClick = output();
4585
+ onChartClick(event) {
4586
+ this.chartClick.emit(event);
4587
+ }
4559
4588
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BaseChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
4560
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.16", type: BaseChart, isStandalone: true, selector: "lib-base-chart", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null } }, providers: [provideEchartsCore({ echarts })], ngImport: i0, template: "<div echarts class=\"ui-base-chart\" [options]=\"options()\" [autoResize]=\"true\">\r\n</div>", styles: [".ui-base-chart{display:block;width:100%;height:100%;min-height:320px}\n"], dependencies: [{ kind: "directive", type: NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
4589
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.16", type: BaseChart, isStandalone: true, selector: "lib-base-chart", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { chartClick: "chartClick" }, providers: [provideEchartsCore({ echarts })], ngImport: i0, template: "<div echarts class=\"ui-base-chart\" [options]=\"options()\" [autoResize]=\"true\" (chartClick)=\"onChartClick($event)\">\r\n</div>", styles: [".ui-base-chart{display:block;width:100%;height:100%;min-height:320px}\n"], dependencies: [{ kind: "directive", type: NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
4561
4590
  }
4562
4591
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BaseChart, decorators: [{
4563
4592
  type: Component,
4564
- args: [{ selector: 'lib-base-chart', imports: [NgxEchartsDirective], providers: [provideEchartsCore({ echarts })], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div echarts class=\"ui-base-chart\" [options]=\"options()\" [autoResize]=\"true\">\r\n</div>", styles: [".ui-base-chart{display:block;width:100%;height:100%;min-height:320px}\n"] }]
4565
- }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }] } });
4593
+ args: [{ selector: 'lib-base-chart', imports: [NgxEchartsDirective], providers: [provideEchartsCore({ echarts })], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div echarts class=\"ui-base-chart\" [options]=\"options()\" [autoResize]=\"true\" (chartClick)=\"onChartClick($event)\">\r\n</div>", styles: [".ui-base-chart{display:block;width:100%;height:100%;min-height:320px}\n"] }]
4594
+ }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], chartClick: [{ type: i0.Output, args: ["chartClick"] }] } });
4566
4595
 
4567
- function buildBarChartOptions(data) {
4596
+ function buildBarChartOptions(data, multiSeries) {
4568
4597
  const showScroll = data.length > 12;
4569
4598
  const zoomEnd = showScroll ? Math.floor((12 / data.length) * 100) : 100;
4599
+ const isMulti = !!multiSeries && multiSeries.length > 0;
4600
+ const xAxisData = data.map(item => item.label);
4601
+ const series = isMulti
4602
+ ? multiSeries.map((s, index) => ({
4603
+ name: s.name,
4604
+ type: 'bar',
4605
+ data: s.data,
4606
+ barMaxWidth: 32,
4607
+ itemStyle: {
4608
+ color: s.color || UI_CHART_TOKENS.donutPalette[index % UI_CHART_TOKENS.donutPalette.length],
4609
+ },
4610
+ label: {
4611
+ show: true,
4612
+ position: 'top',
4613
+ color: UI_CHART_TOKENS.muted,
4614
+ fontSize: 10,
4615
+ },
4616
+ }))
4617
+ : [
4618
+ {
4619
+ type: 'bar',
4620
+ data: data.map(item => item.value),
4621
+ barWidth: 32,
4622
+ itemStyle: {
4623
+ color: UI_CHART_TOKENS.secondary,
4624
+ },
4625
+ emphasis: {
4626
+ itemStyle: {
4627
+ color: UI_CHART_TOKENS.secondary,
4628
+ },
4629
+ },
4630
+ label: {
4631
+ show: true,
4632
+ position: 'top',
4633
+ color: '#374151',
4634
+ fontSize: 12,
4635
+ },
4636
+ },
4637
+ ];
4570
4638
  return {
4571
4639
  animation: true,
4572
4640
  grid: {
4573
4641
  left: 8,
4574
4642
  right: 8,
4575
- top: 16,
4643
+ top: isMulti ? 40 : 16,
4576
4644
  bottom: showScroll ? 46 : 32,
4577
4645
  containLabel: true,
4578
4646
  },
4647
+ legend: {
4648
+ show: isMulti,
4649
+ top: 0,
4650
+ icon: 'roundRect',
4651
+ itemWidth: 14,
4652
+ itemHeight: 14,
4653
+ textStyle: {
4654
+ color: UI_CHART_TOKENS.muted,
4655
+ fontFamily: UI_CHART_TOKENS.fontFamily,
4656
+ }
4657
+ },
4579
4658
  ...(showScroll && {
4580
4659
  dataZoom: [
4581
4660
  {
@@ -4647,7 +4726,7 @@ function buildBarChartOptions(data) {
4647
4726
  },
4648
4727
  xAxis: {
4649
4728
  type: 'category',
4650
- data: data.map(item => item.label),
4729
+ data: xAxisData,
4651
4730
  axisLine: {
4652
4731
  show: true,
4653
4732
  },
@@ -4696,42 +4775,23 @@ function buildBarChartOptions(data) {
4696
4775
  fontFamily: UI_CHART_TOKENS.fontFamily,
4697
4776
  },
4698
4777
  },
4699
- series: [
4700
- {
4701
- type: 'bar',
4702
- data: data.map(item => item.value),
4703
- barWidth: 32,
4704
- itemStyle: {
4705
- color: UI_CHART_TOKENS.secondary,
4706
- },
4707
- emphasis: {
4708
- itemStyle: {
4709
- color: UI_CHART_TOKENS.secondary,
4710
- },
4711
- },
4712
- label: {
4713
- show: true,
4714
- position: 'top',
4715
- color: '#374151',
4716
- fontSize: 12,
4717
- },
4718
- },
4719
- ],
4778
+ series: series,
4720
4779
  };
4721
4780
  }
4722
4781
  class BarChart {
4723
4782
  title = input('Bar Chart', ...(ngDevMode ? [{ debugName: "title" }] : []));
4724
4783
  data = input([], ...(ngDevMode ? [{ debugName: "data" }] : []));
4784
+ multiSeries = input(...(ngDevMode ? [undefined, { debugName: "multiSeries" }] : []));
4725
4785
  isExpanded = signal(false, ...(ngDevMode ? [{ debugName: "isExpanded" }] : []));
4726
4786
  toggleExpand = () => this.isExpanded.update(v => !v);
4727
- options = computed(() => buildBarChartOptions(this.data()), ...(ngDevMode ? [{ debugName: "options" }] : []));
4787
+ options = computed(() => buildBarChartOptions(this.data(), this.multiSeries()), ...(ngDevMode ? [{ debugName: "options" }] : []));
4728
4788
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BarChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
4729
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BarChart, isStandalone: true, selector: "lib-bar-chart", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"bar-chart-container\" [class.expanded]=\"isExpanded()\">\r\n <div class=\"bar-chart-header\">\r\n <h3 class=\"bar-chart-title\">{{ title() }}</h3>\r\n <button class=\"expand-btn\" (click)=\"toggleExpand()\" type=\"button\" [attr.aria-label]=\"isExpanded() ? 'Minimize chart' : 'Maximize chart'\">\r\n @if (isExpanded()) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-minimize-2\"><polyline points=\"4 14 10 14 10 20\"/><polyline points=\"20 10 14 10 14 4\"/><line x1=\"14\" x2=\"21\" y1=\"10\" y2=\"3\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n } @else {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-maximize-2\"><polyline points=\"15 3 21 3 21 9\"/><polyline points=\"9 21 3 21 3 15\"/><line x1=\"21\" x2=\"14\" y1=\"3\" y2=\"10\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n }\r\n </button>\r\n </div>\r\n <lib-base-chart [options]=\"options()\" class=\"chart-wrapper\" />\r\n</div>\r\n@if (isExpanded()) {\r\n <div class=\"overlay\" (click)=\"toggleExpand()\"></div>\r\n}\r\n", styles: [":host{display:block;width:100%;min-width:0}.bar-chart-container{width:100%;min-width:0;display:flex;flex-direction:column;gap:16px;background-color:#f0f0db;padding:24px 16px 16px;border-radius:20px;position:relative;transition:all .3s ease}.bar-chart-container.expanded{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90vw;height:90vh;z-index:9999;box-shadow:0 25px 50px -12px #00000040;margin:0}.chart-wrapper{flex:1;min-height:300px;display:block;width:100%;min-width:0}.bar-chart-container.expanded .chart-wrapper{min-height:unset;height:100%}.bar-chart-header{display:flex;justify-content:space-between;align-items:center;gap:16px}.bar-chart-title{font-size:20px;font-weight:600;color:#333;font-family:Inter,sans-serif}.expand-btn{background:transparent;border:none;cursor:pointer;color:#61661f;padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.expand-btn:hover{background-color:#61661f1a}.overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9998}\n"], dependencies: [{ kind: "component", type: BaseChart, selector: "lib-base-chart", inputs: ["options"] }] });
4789
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BarChart, isStandalone: true, selector: "lib-bar-chart", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, multiSeries: { classPropertyName: "multiSeries", publicName: "multiSeries", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"bar-chart-container\" [class.expanded]=\"isExpanded()\">\r\n <div class=\"bar-chart-header\">\r\n <h3 class=\"bar-chart-title\">{{ title() }}</h3>\r\n <button class=\"expand-btn\" (click)=\"toggleExpand()\" type=\"button\" [attr.aria-label]=\"isExpanded() ? 'Minimize chart' : 'Maximize chart'\">\r\n @if (isExpanded()) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-minimize-2\"><polyline points=\"4 14 10 14 10 20\"/><polyline points=\"20 10 14 10 14 4\"/><line x1=\"14\" x2=\"21\" y1=\"10\" y2=\"3\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n } @else {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-maximize-2\"><polyline points=\"15 3 21 3 21 9\"/><polyline points=\"9 21 3 21 3 15\"/><line x1=\"21\" x2=\"14\" y1=\"3\" y2=\"10\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n }\r\n </button>\r\n </div>\r\n <lib-base-chart [options]=\"options()\" class=\"chart-wrapper\" />\r\n</div>\r\n@if (isExpanded()) {\r\n <div class=\"overlay\" (click)=\"toggleExpand()\"></div>\r\n}\r\n", styles: [":host{display:block;width:100%;min-width:0}.bar-chart-container{width:100%;min-width:0;display:flex;flex-direction:column;gap:16px;background-color:#f0f0db;padding:24px 16px 16px;border-radius:20px;position:relative;transition:all .3s ease}.bar-chart-container.expanded{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90vw;height:90vh;z-index:9999;box-shadow:0 25px 50px -12px #00000040;margin:0}.chart-wrapper{flex:1;min-height:300px;display:block;width:100%;min-width:0}.bar-chart-container.expanded .chart-wrapper{min-height:unset;height:100%}.bar-chart-header{display:flex;justify-content:space-between;align-items:center;gap:16px}.bar-chart-title{font-size:20px;font-weight:600;color:#333;font-family:Inter,sans-serif}.expand-btn{background:transparent;border:none;cursor:pointer;color:#61661f;padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.expand-btn:hover{background-color:#61661f1a}.overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9998}\n"], dependencies: [{ kind: "component", type: BaseChart, selector: "lib-base-chart", inputs: ["options"], outputs: ["chartClick"] }] });
4730
4790
  }
4731
4791
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BarChart, decorators: [{
4732
4792
  type: Component,
4733
4793
  args: [{ selector: 'lib-bar-chart', imports: [BaseChart], template: "<div class=\"bar-chart-container\" [class.expanded]=\"isExpanded()\">\r\n <div class=\"bar-chart-header\">\r\n <h3 class=\"bar-chart-title\">{{ title() }}</h3>\r\n <button class=\"expand-btn\" (click)=\"toggleExpand()\" type=\"button\" [attr.aria-label]=\"isExpanded() ? 'Minimize chart' : 'Maximize chart'\">\r\n @if (isExpanded()) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-minimize-2\"><polyline points=\"4 14 10 14 10 20\"/><polyline points=\"20 10 14 10 14 4\"/><line x1=\"14\" x2=\"21\" y1=\"10\" y2=\"3\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n } @else {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-maximize-2\"><polyline points=\"15 3 21 3 21 9\"/><polyline points=\"9 21 3 21 3 15\"/><line x1=\"21\" x2=\"14\" y1=\"3\" y2=\"10\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n }\r\n </button>\r\n </div>\r\n <lib-base-chart [options]=\"options()\" class=\"chart-wrapper\" />\r\n</div>\r\n@if (isExpanded()) {\r\n <div class=\"overlay\" (click)=\"toggleExpand()\"></div>\r\n}\r\n", styles: [":host{display:block;width:100%;min-width:0}.bar-chart-container{width:100%;min-width:0;display:flex;flex-direction:column;gap:16px;background-color:#f0f0db;padding:24px 16px 16px;border-radius:20px;position:relative;transition:all .3s ease}.bar-chart-container.expanded{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90vw;height:90vh;z-index:9999;box-shadow:0 25px 50px -12px #00000040;margin:0}.chart-wrapper{flex:1;min-height:300px;display:block;width:100%;min-width:0}.bar-chart-container.expanded .chart-wrapper{min-height:unset;height:100%}.bar-chart-header{display:flex;justify-content:space-between;align-items:center;gap:16px}.bar-chart-title{font-size:20px;font-weight:600;color:#333;font-family:Inter,sans-serif}.expand-btn{background:transparent;border:none;cursor:pointer;color:#61661f;padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.expand-btn:hover{background-color:#61661f1a}.overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9998}\n"] }]
4734
- }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }] } });
4794
+ }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], multiSeries: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiSeries", required: false }] }] } });
4735
4795
 
4736
4796
  function buildLineChartOptions(data) {
4737
4797
  const showScroll = data.length > 12;
@@ -4910,7 +4970,7 @@ class LineChart {
4910
4970
  toggleExpand = () => this.isExpanded.update(v => !v);
4911
4971
  options = computed(() => buildLineChartOptions(this.data()), ...(ngDevMode ? [{ debugName: "options" }] : []));
4912
4972
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LineChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
4913
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: LineChart, isStandalone: true, selector: "lib-line-chart", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"line-chart-container\" [class.expanded]=\"isExpanded()\">\r\n <div class=\"line-chart-header\">\r\n <h3 class=\"line-chart-title\">{{ title() }}</h3>\r\n <button class=\"expand-btn\" (click)=\"toggleExpand()\" type=\"button\" [attr.aria-label]=\"isExpanded() ? 'Minimize chart' : 'Maximize chart'\">\r\n @if (isExpanded()) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-minimize-2\"><polyline points=\"4 14 10 14 10 20\"/><polyline points=\"20 10 14 10 14 4\"/><line x1=\"14\" x2=\"21\" y1=\"10\" y2=\"3\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n } @else {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-maximize-2\"><polyline points=\"15 3 21 3 21 9\"/><polyline points=\"9 21 3 21 3 15\"/><line x1=\"21\" x2=\"14\" y1=\"3\" y2=\"10\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n }\r\n </button>\r\n </div>\r\n <lib-base-chart [options]=\"options()\" class=\"chart-wrapper\" />\r\n</div>\r\n@if (isExpanded()) {\r\n <div class=\"overlay\" (click)=\"toggleExpand()\"></div>\r\n}\r\n", styles: [":host{display:block;width:100%;min-width:0}.line-chart-container{width:100%;min-width:0;display:flex;flex-direction:column;gap:16px;background-color:#f0f0db;padding:24px 16px 16px;border-radius:20px;position:relative;transition:all .3s ease}.line-chart-container.expanded{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90vw;height:90vh;z-index:9999;box-shadow:0 25px 50px -12px #00000040;margin:0}.chart-wrapper{flex:1;min-height:300px;display:block;width:100%;min-width:0}.line-chart-container.expanded .chart-wrapper{min-height:unset;height:100%}.line-chart-header{display:flex;justify-content:space-between;align-items:center}.line-chart-title{font-size:20px;font-weight:600;color:#333;font-family:Inter,sans-serif}.expand-btn{background:transparent;border:none;cursor:pointer;color:#61661f;padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.expand-btn:hover{background-color:#61661f1a}.overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9998}\n"], dependencies: [{ kind: "component", type: BaseChart, selector: "lib-base-chart", inputs: ["options"] }] });
4973
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: LineChart, isStandalone: true, selector: "lib-line-chart", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"line-chart-container\" [class.expanded]=\"isExpanded()\">\r\n <div class=\"line-chart-header\">\r\n <h3 class=\"line-chart-title\">{{ title() }}</h3>\r\n <button class=\"expand-btn\" (click)=\"toggleExpand()\" type=\"button\" [attr.aria-label]=\"isExpanded() ? 'Minimize chart' : 'Maximize chart'\">\r\n @if (isExpanded()) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-minimize-2\"><polyline points=\"4 14 10 14 10 20\"/><polyline points=\"20 10 14 10 14 4\"/><line x1=\"14\" x2=\"21\" y1=\"10\" y2=\"3\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n } @else {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-maximize-2\"><polyline points=\"15 3 21 3 21 9\"/><polyline points=\"9 21 3 21 3 15\"/><line x1=\"21\" x2=\"14\" y1=\"3\" y2=\"10\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n }\r\n </button>\r\n </div>\r\n <lib-base-chart [options]=\"options()\" class=\"chart-wrapper\" />\r\n</div>\r\n@if (isExpanded()) {\r\n <div class=\"overlay\" (click)=\"toggleExpand()\"></div>\r\n}\r\n", styles: [":host{display:block;width:100%;min-width:0}.line-chart-container{width:100%;min-width:0;display:flex;flex-direction:column;gap:16px;background-color:#f0f0db;padding:24px 16px 16px;border-radius:20px;position:relative;transition:all .3s ease}.line-chart-container.expanded{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90vw;height:90vh;z-index:9999;box-shadow:0 25px 50px -12px #00000040;margin:0}.chart-wrapper{flex:1;min-height:300px;display:block;width:100%;min-width:0}.line-chart-container.expanded .chart-wrapper{min-height:unset;height:100%}.line-chart-header{display:flex;justify-content:space-between;align-items:center}.line-chart-title{font-size:20px;font-weight:600;color:#333;font-family:Inter,sans-serif}.expand-btn{background:transparent;border:none;cursor:pointer;color:#61661f;padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.expand-btn:hover{background-color:#61661f1a}.overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9998}\n"], dependencies: [{ kind: "component", type: BaseChart, selector: "lib-base-chart", inputs: ["options"], outputs: ["chartClick"] }] });
4914
4974
  }
4915
4975
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LineChart, decorators: [{
4916
4976
  type: Component,
@@ -4922,6 +4982,7 @@ function getTotal(data) {
4922
4982
  }
4923
4983
  function buildDonutChartOptions(data) {
4924
4984
  const total = getTotal(data);
4985
+ const showLegend = data.length > 10;
4925
4986
  return {
4926
4987
  animation: true,
4927
4988
  backgroundColor: 'transparent',
@@ -4951,18 +5012,39 @@ function buildDonutChartOptions(data) {
4951
5012
  `,
4952
5013
  formatter: (params) => `${params.name}: ${params.value}`,
4953
5014
  },
5015
+ ...(showLegend ? {
5016
+ legend: {
5017
+ type: 'scroll',
5018
+ orient: 'horizontal',
5019
+ bottom: 0,
5020
+ left: 'center',
5021
+ itemWidth: 12,
5022
+ itemHeight: 12,
5023
+ itemGap: 10,
5024
+ textStyle: {
5025
+ fontSize: 11,
5026
+ fontFamily: UI_CHART_TOKENS.fontFamily,
5027
+ color: UI_CHART_TOKENS.muted,
5028
+ },
5029
+ pageTextStyle: {
5030
+ color: UI_CHART_TOKENS.muted,
5031
+ },
5032
+ pageIconColor: UI_CHART_TOKENS.centerText,
5033
+ pageIconInactiveColor: '#ccc',
5034
+ },
5035
+ } : {}),
4954
5036
  series: [
4955
5037
  {
4956
5038
  type: 'pie',
4957
5039
  radius: ['44%', '72%'],
4958
- center: ['50%', '52%'],
5040
+ center: ['50%', showLegend ? '46%' : '52%'],
4959
5041
  avoidLabelOverlap: true,
4960
5042
  minAngle: 4,
4961
5043
  itemStyle: {
4962
5044
  borderWidth: 0,
4963
5045
  },
4964
5046
  label: {
4965
- show: true,
5047
+ show: !showLegend,
4966
5048
  position: 'outside',
4967
5049
  formatter: (params) => {
4968
5050
  return `{label|${params.name}}\n{value|${params.value}}`;
@@ -4983,7 +5065,7 @@ function buildDonutChartOptions(data) {
4983
5065
  },
4984
5066
  },
4985
5067
  labelLine: {
4986
- show: true,
5068
+ show: !showLegend,
4987
5069
  length: 12,
4988
5070
  length2: 20,
4989
5071
  lineStyle: {
@@ -5012,7 +5094,7 @@ function buildDonutChartOptions(data) {
5012
5094
  {
5013
5095
  type: 'text',
5014
5096
  left: 'center',
5015
- top: '48%',
5097
+ top: showLegend ? '42%' : '48%',
5016
5098
  style: {
5017
5099
  text: `${total}`,
5018
5100
  textAlign: 'center',
@@ -5028,23 +5110,64 @@ function buildDonutChartOptions(data) {
5028
5110
  class DonutChart {
5029
5111
  title = input('Donut Chart', ...(ngDevMode ? [{ debugName: "title" }] : []));
5030
5112
  data = input.required(...(ngDevMode ? [{ debugName: "data" }] : []));
5113
+ // Drill-down inputs
5114
+ drillDown = input(false, ...(ngDevMode ? [{ debugName: "drillDown" }] : []));
5115
+ groupByPrefix = input(0, ...(ngDevMode ? [{ debugName: "groupByPrefix" }] : []));
5116
+ // Outputs
5117
+ sectionClick = output();
5031
5118
  isExpanded = signal(false, ...(ngDevMode ? [{ debugName: "isExpanded" }] : []));
5119
+ drilledGroup = signal(null, ...(ngDevMode ? [{ debugName: "drilledGroup" }] : []));
5032
5120
  toggleExpand = () => this.isExpanded.update(v => !v);
5033
- options = computed(() => buildDonutChartOptions(this.data()), ...(ngDevMode ? [{ debugName: "options" }] : []));
5121
+ // Data processing logic
5122
+ displayData = computed(() => {
5123
+ const rawData = this.data();
5124
+ const prefixLen = this.groupByPrefix();
5125
+ const currentGroup = this.drilledGroup();
5126
+ if (!this.drillDown() || prefixLen <= 0) {
5127
+ return rawData;
5128
+ }
5129
+ if (currentGroup) {
5130
+ // Filter detailed items that match the prefix
5131
+ return rawData.filter(item => item.label.startsWith(currentGroup));
5132
+ }
5133
+ else {
5134
+ // Group items by prefix
5135
+ const groups = new Map();
5136
+ rawData.forEach(item => {
5137
+ const prefix = item.label.substring(0, prefixLen);
5138
+ groups.set(prefix, (groups.get(prefix) || 0) + item.value);
5139
+ });
5140
+ return Array.from(groups.entries()).map(([label, value]) => ({ label, value }));
5141
+ }
5142
+ }, ...(ngDevMode ? [{ debugName: "displayData" }] : []));
5143
+ options = computed(() => buildDonutChartOptions(this.displayData()), ...(ngDevMode ? [{ debugName: "options" }] : []));
5144
+ onChartClick(event) {
5145
+ const clickedItem = {
5146
+ label: event.name,
5147
+ value: event.value
5148
+ };
5149
+ this.sectionClick.emit(clickedItem);
5150
+ if (this.drillDown() && this.groupByPrefix() > 0 && !this.drilledGroup()) {
5151
+ this.drilledGroup.set(clickedItem.label);
5152
+ }
5153
+ }
5154
+ resetDrillDown() {
5155
+ this.drilledGroup.set(null);
5156
+ }
5034
5157
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DonutChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
5035
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DonutChart, isStandalone: true, selector: "lib-donut-chart", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"donut-chart-container\" [class.expanded]=\"isExpanded()\">\r\n <div class=\"donut-chart-header\">\r\n <h3 class=\"donut-chart-title\">{{ title() }}</h3>\r\n <button class=\"expand-btn\" (click)=\"toggleExpand()\" type=\"button\" [attr.aria-label]=\"isExpanded() ? 'Minimize chart' : 'Maximize chart'\">\r\n @if (isExpanded()) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-minimize-2\"><polyline points=\"4 14 10 14 10 20\"/><polyline points=\"20 10 14 10 14 4\"/><line x1=\"14\" x2=\"21\" y1=\"10\" y2=\"3\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n } @else {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-maximize-2\"><polyline points=\"15 3 21 3 21 9\"/><polyline points=\"9 21 3 21 3 15\"/><line x1=\"21\" x2=\"14\" y1=\"3\" y2=\"10\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n }\r\n </button>\r\n </div>\r\n <lib-base-chart [options]=\"options()\" class=\"chart-wrapper\" />\r\n</div>\r\n@if (isExpanded()) {\r\n <div class=\"overlay\" (click)=\"toggleExpand()\"></div>\r\n}", styles: [":host{display:block;width:100%;min-width:0}.donut-chart-container{width:100%;min-width:0;display:flex;flex-direction:column;gap:16px;background-color:#f0f0db;padding:24px 16px 16px;border-radius:20px;position:relative;transition:all .3s ease}.donut-chart-container.expanded{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90vw;height:90vh;z-index:9999;box-shadow:0 25px 50px -12px #00000040;margin:0}.chart-wrapper{flex:1;min-height:300px;display:block;width:100%;min-width:0}.donut-chart-container.expanded .chart-wrapper{min-height:unset;height:100%}.donut-chart-header{display:flex;justify-content:space-between;align-items:center}.donut-chart-title{font-size:20px;font-weight:600;color:#333;font-family:Inter,sans-serif}.expand-btn{background:transparent;border:none;cursor:pointer;color:#61661f;padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.expand-btn:hover{background-color:#61661f1a}.overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9998}\n"], dependencies: [{ kind: "component", type: BaseChart, selector: "lib-base-chart", inputs: ["options"] }] });
5158
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DonutChart, isStandalone: true, selector: "lib-donut-chart", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, drillDown: { classPropertyName: "drillDown", publicName: "drillDown", isSignal: true, isRequired: false, transformFunction: null }, groupByPrefix: { classPropertyName: "groupByPrefix", publicName: "groupByPrefix", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sectionClick: "sectionClick" }, ngImport: i0, template: "<div class=\"donut-chart-container\" [class.expanded]=\"isExpanded()\">\r\n <div class=\"donut-chart-header\">\r\n <h3 class=\"donut-chart-title\">{{ title() }}</h3>\r\n <button class=\"expand-btn\" (click)=\"toggleExpand()\" type=\"button\" [attr.aria-label]=\"isExpanded() ? 'Minimize chart' : 'Maximize chart'\">\r\n @if (isExpanded()) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-minimize-2\"><polyline points=\"4 14 10 14 10 20\"/><polyline points=\"20 10 14 10 14 4\"/><line x1=\"14\" x2=\"21\" y1=\"10\" y2=\"3\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n } @else {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-maximize-2\"><polyline points=\"15 3 21 3 21 9\"/><polyline points=\"9 21 3 21 3 15\"/><line x1=\"21\" x2=\"14\" y1=\"3\" y2=\"10\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n }\r\n </button>\r\n </div>\r\n <lib-base-chart [options]=\"options()\" (chartClick)=\"onChartClick($event)\" class=\"chart-wrapper\" />\r\n \r\n @if (drilledGroup()) {\r\n <button class=\"back-btn\" (click)=\"resetDrillDown()\" type=\"button\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m15 18-6-6 6-6\"/></svg>\r\n <span>Volver</span>\r\n </button>\r\n }\r\n</div>\r\n@if (isExpanded()) {\r\n <div class=\"overlay\" (click)=\"toggleExpand()\"></div>\r\n}", styles: [":host{display:block;width:100%;min-width:0}.donut-chart-container{width:100%;min-width:0;display:flex;flex-direction:column;gap:16px;background-color:#f0f0db;padding:24px 16px 16px;border-radius:20px;position:relative;transition:all .3s ease}.donut-chart-container.expanded{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90vw;height:90vh;z-index:9999;box-shadow:0 25px 50px -12px #00000040;margin:0}.chart-wrapper{flex:1;min-height:300px;display:block;width:100%;min-width:0}.donut-chart-container.expanded .chart-wrapper{min-height:unset;height:100%}.donut-chart-header{display:flex;justify-content:space-between;align-items:center}.donut-chart-title{font-size:20px;font-weight:600;color:#333;font-family:Inter,sans-serif}.expand-btn{background:transparent;border:none;cursor:pointer;color:#61661f;padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.expand-btn:hover{background-color:#61661f1a}.overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9998}.back-btn{position:absolute;top:24px;right:60px;display:flex;align-items:center;gap:6px;background-color:#d9df88;border:1px solid rgba(97,102,31,.2);padding:6px 12px;border-radius:12px;cursor:pointer;color:#61661f;font-family:Inter,sans-serif;font-size:13px;font-weight:500;box-shadow:0 4px 12px #0000000d;transition:all .2s ease;z-index:100}.back-btn:hover{background-color:#61661f;color:#fff;box-shadow:0 6px 14px #61661f33;transform:translateY(-1px)}.back-btn:active{transform:translateY(0)}\n"], dependencies: [{ kind: "component", type: BaseChart, selector: "lib-base-chart", inputs: ["options"], outputs: ["chartClick"] }, { kind: "ngmodule", type: CommonModule }] });
5036
5159
  }
5037
5160
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DonutChart, decorators: [{
5038
5161
  type: Component,
5039
- args: [{ selector: 'lib-donut-chart', imports: [BaseChart], template: "<div class=\"donut-chart-container\" [class.expanded]=\"isExpanded()\">\r\n <div class=\"donut-chart-header\">\r\n <h3 class=\"donut-chart-title\">{{ title() }}</h3>\r\n <button class=\"expand-btn\" (click)=\"toggleExpand()\" type=\"button\" [attr.aria-label]=\"isExpanded() ? 'Minimize chart' : 'Maximize chart'\">\r\n @if (isExpanded()) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-minimize-2\"><polyline points=\"4 14 10 14 10 20\"/><polyline points=\"20 10 14 10 14 4\"/><line x1=\"14\" x2=\"21\" y1=\"10\" y2=\"3\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n } @else {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-maximize-2\"><polyline points=\"15 3 21 3 21 9\"/><polyline points=\"9 21 3 21 3 15\"/><line x1=\"21\" x2=\"14\" y1=\"3\" y2=\"10\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n }\r\n </button>\r\n </div>\r\n <lib-base-chart [options]=\"options()\" class=\"chart-wrapper\" />\r\n</div>\r\n@if (isExpanded()) {\r\n <div class=\"overlay\" (click)=\"toggleExpand()\"></div>\r\n}", styles: [":host{display:block;width:100%;min-width:0}.donut-chart-container{width:100%;min-width:0;display:flex;flex-direction:column;gap:16px;background-color:#f0f0db;padding:24px 16px 16px;border-radius:20px;position:relative;transition:all .3s ease}.donut-chart-container.expanded{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90vw;height:90vh;z-index:9999;box-shadow:0 25px 50px -12px #00000040;margin:0}.chart-wrapper{flex:1;min-height:300px;display:block;width:100%;min-width:0}.donut-chart-container.expanded .chart-wrapper{min-height:unset;height:100%}.donut-chart-header{display:flex;justify-content:space-between;align-items:center}.donut-chart-title{font-size:20px;font-weight:600;color:#333;font-family:Inter,sans-serif}.expand-btn{background:transparent;border:none;cursor:pointer;color:#61661f;padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.expand-btn:hover{background-color:#61661f1a}.overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9998}\n"] }]
5040
- }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }] } });
5162
+ args: [{ selector: 'lib-donut-chart', standalone: true, imports: [BaseChart, CommonModule], template: "<div class=\"donut-chart-container\" [class.expanded]=\"isExpanded()\">\r\n <div class=\"donut-chart-header\">\r\n <h3 class=\"donut-chart-title\">{{ title() }}</h3>\r\n <button class=\"expand-btn\" (click)=\"toggleExpand()\" type=\"button\" [attr.aria-label]=\"isExpanded() ? 'Minimize chart' : 'Maximize chart'\">\r\n @if (isExpanded()) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-minimize-2\"><polyline points=\"4 14 10 14 10 20\"/><polyline points=\"20 10 14 10 14 4\"/><line x1=\"14\" x2=\"21\" y1=\"10\" y2=\"3\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n } @else {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-maximize-2\"><polyline points=\"15 3 21 3 21 9\"/><polyline points=\"9 21 3 21 3 15\"/><line x1=\"21\" x2=\"14\" y1=\"3\" y2=\"10\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n }\r\n </button>\r\n </div>\r\n <lib-base-chart [options]=\"options()\" (chartClick)=\"onChartClick($event)\" class=\"chart-wrapper\" />\r\n \r\n @if (drilledGroup()) {\r\n <button class=\"back-btn\" (click)=\"resetDrillDown()\" type=\"button\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m15 18-6-6 6-6\"/></svg>\r\n <span>Volver</span>\r\n </button>\r\n }\r\n</div>\r\n@if (isExpanded()) {\r\n <div class=\"overlay\" (click)=\"toggleExpand()\"></div>\r\n}", styles: [":host{display:block;width:100%;min-width:0}.donut-chart-container{width:100%;min-width:0;display:flex;flex-direction:column;gap:16px;background-color:#f0f0db;padding:24px 16px 16px;border-radius:20px;position:relative;transition:all .3s ease}.donut-chart-container.expanded{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90vw;height:90vh;z-index:9999;box-shadow:0 25px 50px -12px #00000040;margin:0}.chart-wrapper{flex:1;min-height:300px;display:block;width:100%;min-width:0}.donut-chart-container.expanded .chart-wrapper{min-height:unset;height:100%}.donut-chart-header{display:flex;justify-content:space-between;align-items:center}.donut-chart-title{font-size:20px;font-weight:600;color:#333;font-family:Inter,sans-serif}.expand-btn{background:transparent;border:none;cursor:pointer;color:#61661f;padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.expand-btn:hover{background-color:#61661f1a}.overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9998}.back-btn{position:absolute;top:24px;right:60px;display:flex;align-items:center;gap:6px;background-color:#d9df88;border:1px solid rgba(97,102,31,.2);padding:6px 12px;border-radius:12px;cursor:pointer;color:#61661f;font-family:Inter,sans-serif;font-size:13px;font-weight:500;box-shadow:0 4px 12px #0000000d;transition:all .2s ease;z-index:100}.back-btn:hover{background-color:#61661f;color:#fff;box-shadow:0 6px 14px #61661f33;transform:translateY(-1px)}.back-btn:active{transform:translateY(0)}\n"] }]
5163
+ }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], drillDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "drillDown", required: false }] }], groupByPrefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupByPrefix", required: false }] }], sectionClick: [{ type: i0.Output, args: ["sectionClick"] }] } });
5041
5164
 
5042
5165
  function buildHeatmapOptions(config) {
5043
5166
  const { xLabels, yLabels, data } = config;
5044
5167
  // Flatten values to compute min/max for the visual map
5045
5168
  const values = data.map(d => d.value);
5046
- const minVal = config.min ?? Math.min(...values);
5047
- const maxVal = config.max ?? Math.max(...values);
5169
+ const minVal = config.min ?? (values.length > 0 ? Math.min(...values) : 0);
5170
+ const maxVal = config.max ?? (values.length > 0 ? Math.max(...values) : 100);
5048
5171
  // Build the series data as [x, y, value]
5049
5172
  const seriesData = data.map(d => [d.x, d.y, d.value]);
5050
5173
  return {
@@ -5082,7 +5205,12 @@ function buildHeatmapOptions(config) {
5082
5205
  xAxis: {
5083
5206
  type: 'category',
5084
5207
  data: xLabels,
5085
- splitArea: { show: true },
5208
+ splitArea: {
5209
+ show: true,
5210
+ areaStyle: {
5211
+ color: ['rgba(255, 255, 255, 0.05)', 'rgba(0, 0, 0, 0.02)']
5212
+ }
5213
+ },
5086
5214
  axisLine: { show: false },
5087
5215
  axisTick: { show: false },
5088
5216
  axisLabel: {
@@ -5096,7 +5224,12 @@ function buildHeatmapOptions(config) {
5096
5224
  yAxis: {
5097
5225
  type: 'category',
5098
5226
  data: yLabels,
5099
- splitArea: { show: true },
5227
+ splitArea: {
5228
+ show: true,
5229
+ areaStyle: {
5230
+ color: ['rgba(255, 255, 255, 0.05)', 'rgba(0, 0, 0, 0.02)']
5231
+ }
5232
+ },
5100
5233
  axisLine: { show: false },
5101
5234
  axisTick: { show: false },
5102
5235
  axisLabel: {
@@ -5164,7 +5297,7 @@ class Heatmap {
5164
5297
  }
5165
5298
  options = computed(() => buildHeatmapOptions(this.config()), ...(ngDevMode ? [{ debugName: "options" }] : []));
5166
5299
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Heatmap, deps: [], target: i0.ɵɵFactoryTarget.Component });
5167
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: Heatmap, isStandalone: true, selector: "lib-heatmap", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"heatmap-container\" [class.expanded]=\"isExpanded()\">\r\n <div class=\"heatmap-header\">\r\n <h3 class=\"heatmap-title\">{{ title() }}</h3>\r\n <button class=\"expand-btn\" (click)=\"toggleExpand()\" type=\"button\" [attr.aria-label]=\"isExpanded() ? 'Minimize chart' : 'Maximize chart'\">\r\n @if (isExpanded()) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-minimize-2\"><polyline points=\"4 14 10 14 10 20\"/><polyline points=\"20 10 14 10 14 4\"/><line x1=\"14\" x2=\"21\" y1=\"10\" y2=\"3\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n } @else {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-maximize-2\"><polyline points=\"15 3 21 3 21 9\"/><polyline points=\"9 21 3 21 3 15\"/><line x1=\"21\" x2=\"14\" y1=\"3\" y2=\"10\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n }\r\n </button>\r\n </div>\r\n <lib-base-chart [options]=\"options()\" class=\"chart-wrapper\" />\r\n</div>\r\n@if (isExpanded()) {\r\n <div class=\"overlay\" (click)=\"toggleExpand()\"></div>\r\n}", styles: [":host{display:block;width:100%;min-width:0}.heatmap-container{width:100%;min-width:0;display:flex;flex-direction:column;gap:16px;background-color:#f0f0db;padding:24px 16px 16px;border-radius:20px;position:relative;transition:all .3s ease}.heatmap-container.expanded{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90vw;height:90vh;z-index:9999;box-shadow:0 25px 50px -12px #00000040;margin:0}.chart-wrapper{flex:1;min-height:300px;display:block;width:100%;min-width:0}.heatmap-container.expanded .chart-wrapper{min-height:unset;height:100%}.heatmap-header{display:flex;justify-content:space-between;align-items:center;gap:16px}.heatmap-title{font-size:20px;font-weight:600;color:#333;font-family:Inter,sans-serif}.expand-btn{background:transparent;border:none;cursor:pointer;color:#61661f;padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.expand-btn:hover{background-color:#61661f1a}.overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9998}\n"], dependencies: [{ kind: "component", type: BaseChart, selector: "lib-base-chart", inputs: ["options"] }] });
5300
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: Heatmap, isStandalone: true, selector: "lib-heatmap", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"heatmap-container\" [class.expanded]=\"isExpanded()\">\r\n <div class=\"heatmap-header\">\r\n <h3 class=\"heatmap-title\">{{ title() }}</h3>\r\n <button class=\"expand-btn\" (click)=\"toggleExpand()\" type=\"button\" [attr.aria-label]=\"isExpanded() ? 'Minimize chart' : 'Maximize chart'\">\r\n @if (isExpanded()) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-minimize-2\"><polyline points=\"4 14 10 14 10 20\"/><polyline points=\"20 10 14 10 14 4\"/><line x1=\"14\" x2=\"21\" y1=\"10\" y2=\"3\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n } @else {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-maximize-2\"><polyline points=\"15 3 21 3 21 9\"/><polyline points=\"9 21 3 21 3 15\"/><line x1=\"21\" x2=\"14\" y1=\"3\" y2=\"10\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n }\r\n </button>\r\n </div>\r\n <lib-base-chart [options]=\"options()\" class=\"chart-wrapper\" />\r\n</div>\r\n@if (isExpanded()) {\r\n <div class=\"overlay\" (click)=\"toggleExpand()\"></div>\r\n}", styles: [":host{display:block;width:100%;min-width:0}.heatmap-container{width:100%;min-width:0;display:flex;flex-direction:column;gap:16px;background-color:#f0f0db;padding:24px 16px 16px;border-radius:20px;position:relative;transition:all .3s ease}.heatmap-container.expanded{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90vw;height:90vh;z-index:9999;box-shadow:0 25px 50px -12px #00000040;margin:0}.chart-wrapper{flex:1;min-height:300px;display:block;width:100%;min-width:0}.heatmap-container.expanded .chart-wrapper{min-height:unset;height:100%}.heatmap-header{display:flex;justify-content:space-between;align-items:center;gap:16px}.heatmap-title{font-size:20px;font-weight:600;color:#333;font-family:Inter,sans-serif}.expand-btn{background:transparent;border:none;cursor:pointer;color:#61661f;padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.expand-btn:hover{background-color:#61661f1a}.overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9998}\n"], dependencies: [{ kind: "component", type: BaseChart, selector: "lib-base-chart", inputs: ["options"], outputs: ["chartClick"] }] });
5168
5301
  }
5169
5302
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Heatmap, decorators: [{
5170
5303
  type: Component,
@@ -5321,6 +5454,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
5321
5454
  args: [{ selector: 'lib-map-geo', imports: [GeoAPIMaps], template: "<div class=\"map-geo-container\" [class.expanded]=\"isExpanded()\">\r\n <div class=\"map-geo-header\">\r\n <h3 class=\"map-geo-title\">{{ title() }}</h3>\r\n <button class=\"expand-btn\" (click)=\"toggleExpand()\" type=\"button\" [attr.aria-label]=\"isExpanded() ? 'Minimize chart' : 'Maximize chart'\">\r\n @if (isExpanded()) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-minimize-2\"><polyline points=\"4 14 10 14 10 20\"/><polyline points=\"20 10 14 10 14 4\"/><line x1=\"14\" x2=\"21\" y1=\"10\" y2=\"3\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n } @else {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-maximize-2\"><polyline points=\"15 3 21 3 21 9\"/><polyline points=\"9 21 3 21 3 15\"/><line x1=\"21\" x2=\"14\" y1=\"3\" y2=\"10\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n }\r\n </button>\r\n </div>\r\n <div class=\"chart-wrapper\">\r\n <lib-geo-api-maps [points]=\"points()\" />\r\n </div>\r\n</div>\r\n@if (isExpanded()) {\r\n <div class=\"overlay\" (click)=\"toggleExpand()\"></div>\r\n}", styles: [":host{display:block;width:100%;min-width:0}.map-geo-container{width:100%;min-width:0;display:flex;flex-direction:column;gap:16px;background-color:#f0f0db;padding:24px 16px 16px;border-radius:20px;position:relative;transition:all .3s ease}.map-geo-container.expanded{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90vw;height:90vh;z-index:9999;box-shadow:0 25px 50px -12px #00000040;margin:0}.chart-wrapper{position:relative;width:100%;height:450px;min-height:450px;display:block;min-width:0}.map-geo-container.expanded .chart-wrapper{flex:1;height:auto;min-height:0}.map-geo-header{display:flex;justify-content:space-between;align-items:center;gap:16px}.map-geo-title{font-size:20px;font-weight:600;color:#333;font-family:Inter,sans-serif}.expand-btn{background:transparent;border:none;cursor:pointer;color:#61661f;padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.expand-btn:hover{background-color:#61661f1a}.overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9998}\n"] }]
5322
5455
  }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], points: [{ type: i0.Input, args: [{ isSignal: true, alias: "points", required: false }] }] } });
5323
5456
 
5457
+ class TableChart {
5458
+ title = input('Table Chart', ...(ngDevMode ? [{ debugName: "title" }] : []));
5459
+ columns = input([], ...(ngDevMode ? [{ debugName: "columns" }] : []));
5460
+ data = input([], ...(ngDevMode ? [{ debugName: "data" }] : []));
5461
+ totalItems = input(0, ...(ngDevMode ? [{ debugName: "totalItems" }] : []));
5462
+ itemsPerPage = input(10, ...(ngDevMode ? [{ debugName: "itemsPerPage" }] : []));
5463
+ isExpanded = signal(false, ...(ngDevMode ? [{ debugName: "isExpanded" }] : []));
5464
+ localPage = signal(1, ...(ngDevMode ? [{ debugName: "localPage" }] : []));
5465
+ toggleExpand() {
5466
+ this.isExpanded.update((value) => !value);
5467
+ if (!this.isExpanded()) {
5468
+ this.localPage.set(1); // Reset page on collapse
5469
+ }
5470
+ }
5471
+ displayedData = computed(() => {
5472
+ const isExpanded = this.isExpanded();
5473
+ const data = this.data();
5474
+ if (!isExpanded) {
5475
+ return data.slice(0, 8);
5476
+ }
5477
+ const pageSize = this.itemsPerPage();
5478
+ const start = (this.localPage() - 1) * pageSize;
5479
+ return data.slice(start, start + pageSize);
5480
+ }, ...(ngDevMode ? [{ debugName: "displayedData" }] : []));
5481
+ onPageChange(page) {
5482
+ this.localPage.set(page);
5483
+ }
5484
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TableChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
5485
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: TableChart, isStandalone: true, selector: "lib-table-chart", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPage: { classPropertyName: "itemsPerPage", publicName: "itemsPerPage", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"table-chart-container\" [class.expanded]=\"isExpanded()\">\n <div class=\"table-chart-header\">\n <h3 class=\"table-chart-title\">{{ title() }}</h3>\n <button class=\"expand-btn\" (click)=\"toggleExpand()\" type=\"button\"\n [attr.aria-label]=\"isExpanded() ? 'Minimize chart' : 'Maximize chart'\">\n @if (isExpanded()) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n class=\"lucide lucide-minimize-2\">\n <polyline points=\"4 14 10 14 10 20\" />\n <polyline points=\"20 10 14 10 14 4\" />\n <line x1=\"14\" x2=\"21\" y1=\"10\" y2=\"3\" />\n <line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\" />\n </svg>\n } @else {\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n class=\"lucide lucide-maximize-2\">\n <polyline points=\"15 3 21 3 21 9\" />\n <polyline points=\"9 21 3 21 3 15\" />\n <line x1=\"21\" x2=\"14\" y1=\"3\" y2=\"10\" />\n <line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\" />\n </svg>\n }\n </button>\n </div>\n <div class=\"chart-wrapper\">\n @if (data().length > 0) {\n <lib-table [columns]=\"columns()\" [data]=\"displayedData()\" [showActions]=\"false\" />\n @if (isExpanded() && totalItems() > itemsPerPage()) {\n <lib-pagination [totalItems]=\"totalItems()\" [pageSize]=\"itemsPerPage()\" [(page)]=\"localPage\" />\n }\n } @else {\n <div class=\"no-data\">\n <lib-not-found-section [showButton]=\"false\" />\n </div>\n }\n </div>\n</div>\n@if (isExpanded()) {\n<div class=\"overlay\" (click)=\"toggleExpand()\"></div>\n}", styles: [":host{display:block;width:100%;height:100%;min-width:0}.table-chart-container{width:100%;height:100%;min-width:0;display:flex;flex-direction:column;gap:16px;background-color:#f0f0db;padding:24px 16px 16px;border-radius:20px;position:relative;transition:all .3s ease;box-sizing:border-box}.table-chart-container.expanded{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90vw;height:90vh;z-index:9999;box-shadow:0 25px 50px -12px #00000040;margin:0}.chart-wrapper{flex:1;min-height:0;display:flex;flex-direction:column;width:100%;min-width:0;overflow:auto}.table-chart-container.expanded .chart-wrapper{min-height:unset;height:100%}.table-chart-header{display:flex;justify-content:space-between;align-items:center;gap:16px}.table-chart-title{font-size:20px;font-weight:600;color:#333;font-family:Inter,sans-serif}.expand-btn{background:transparent;border:none;cursor:pointer;color:#61661f;padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.expand-btn:hover{background-color:#61661f1a}.overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9998}.no-data{display:flex;justify-content:center;align-items:center;height:100%}\n"], dependencies: [{ kind: "component", type: Table, selector: "lib-table", inputs: ["columns", "data", "actions", "showActions", "statusToneMap", "statusEnumMap", "subColumns", "isRowExpandable", "expandedChildren", "rowIdKey", "showSelection", "showTotals"], outputs: ["optionSelected", "iconAction"] }, { kind: "component", type: NotFoundSection, selector: "lib-not-found-section", inputs: ["showButton", "buttonLabel"], outputs: ["openModal"] }, { kind: "component", type: PaginationComponent, selector: "lib-pagination", inputs: ["page", "pageSize", "totalItems", "showPageSizeSelector", "pageSizeOptions"], outputs: ["pageChange", "pageSizeChange"] }] });
5486
+ }
5487
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TableChart, decorators: [{
5488
+ type: Component,
5489
+ args: [{ selector: 'lib-table-chart', imports: [Table, NotFoundSection, PaginationComponent], template: "<div class=\"table-chart-container\" [class.expanded]=\"isExpanded()\">\n <div class=\"table-chart-header\">\n <h3 class=\"table-chart-title\">{{ title() }}</h3>\n <button class=\"expand-btn\" (click)=\"toggleExpand()\" type=\"button\"\n [attr.aria-label]=\"isExpanded() ? 'Minimize chart' : 'Maximize chart'\">\n @if (isExpanded()) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n class=\"lucide lucide-minimize-2\">\n <polyline points=\"4 14 10 14 10 20\" />\n <polyline points=\"20 10 14 10 14 4\" />\n <line x1=\"14\" x2=\"21\" y1=\"10\" y2=\"3\" />\n <line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\" />\n </svg>\n } @else {\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n class=\"lucide lucide-maximize-2\">\n <polyline points=\"15 3 21 3 21 9\" />\n <polyline points=\"9 21 3 21 3 15\" />\n <line x1=\"21\" x2=\"14\" y1=\"3\" y2=\"10\" />\n <line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\" />\n </svg>\n }\n </button>\n </div>\n <div class=\"chart-wrapper\">\n @if (data().length > 0) {\n <lib-table [columns]=\"columns()\" [data]=\"displayedData()\" [showActions]=\"false\" />\n @if (isExpanded() && totalItems() > itemsPerPage()) {\n <lib-pagination [totalItems]=\"totalItems()\" [pageSize]=\"itemsPerPage()\" [(page)]=\"localPage\" />\n }\n } @else {\n <div class=\"no-data\">\n <lib-not-found-section [showButton]=\"false\" />\n </div>\n }\n </div>\n</div>\n@if (isExpanded()) {\n<div class=\"overlay\" (click)=\"toggleExpand()\"></div>\n}", styles: [":host{display:block;width:100%;height:100%;min-width:0}.table-chart-container{width:100%;height:100%;min-width:0;display:flex;flex-direction:column;gap:16px;background-color:#f0f0db;padding:24px 16px 16px;border-radius:20px;position:relative;transition:all .3s ease;box-sizing:border-box}.table-chart-container.expanded{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90vw;height:90vh;z-index:9999;box-shadow:0 25px 50px -12px #00000040;margin:0}.chart-wrapper{flex:1;min-height:0;display:flex;flex-direction:column;width:100%;min-width:0;overflow:auto}.table-chart-container.expanded .chart-wrapper{min-height:unset;height:100%}.table-chart-header{display:flex;justify-content:space-between;align-items:center;gap:16px}.table-chart-title{font-size:20px;font-weight:600;color:#333;font-family:Inter,sans-serif}.expand-btn{background:transparent;border:none;cursor:pointer;color:#61661f;padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.expand-btn:hover{background-color:#61661f1a}.overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9998}.no-data{display:flex;justify-content:center;align-items:center;height:100%}\n"] }]
5490
+ }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], totalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItems", required: false }] }], itemsPerPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsPerPage", required: false }] }] } });
5491
+
5324
5492
  const Colors = {
5325
5493
  primary: '#4B5E05',
5326
5494
  secondary: '#063546',
@@ -5351,6 +5519,12 @@ class LoadImage {
5351
5519
  recommendedSize = 'PNG · JPG · SVG · Recomendado: 300x100 px';
5352
5520
  // Ícono del título modificable por el usuario
5353
5521
  titleIcon = 'icon-upload';
5522
+ // URL de imagen por defecto (útil para mostrar imágenes traídas desde un bucket/backend)
5523
+ set imageUrl(url) {
5524
+ if (url) {
5525
+ this.imageSrc = url;
5526
+ }
5527
+ }
5354
5528
  imageLoaded = new EventEmitter();
5355
5529
  fileInput;
5356
5530
  imageSrc = null;
@@ -5426,11 +5600,11 @@ class LoadImage {
5426
5600
  this.zoomScale = 1;
5427
5601
  }
5428
5602
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LoadImage, deps: [], target: i0.ɵɵFactoryTarget.Component });
5429
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: LoadImage, isStandalone: true, selector: "lib-load-image", inputs: { title: "title", description: "description", recommendedSize: "recommendedSize", titleIcon: "titleIcon" }, outputs: { imageLoaded: "imageLoaded" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"load-image-container\">\n <!-- Header Info -->\n <div class=\"header-info\">\n <div class=\"title-section\">\n <i class=\"icon\" [ngClass]=\"titleIcon\"></i>\n <div class=\"text-group\">\n <h3 class=\"title\">{{ title }} <span *ngIf=\"imageSrc\" class=\"badge-cargado\">CARGADO</span></h3>\n <p class=\"description\">{{ description }}</p>\n </div>\n </div>\n </div>\n\n <hr class=\"divider\" />\n\n <!-- Upload / Preview Box -->\n <div class=\"box-area\" \n [class.empty]=\"!imageSrc\" \n [class.dragging]=\"isDragging\"\n (dragover)=\"onDragOver($event)\" \n (dragleave)=\"onDragLeave($event)\" \n (drop)=\"onDrop($event)\"\n (click)=\"!imageSrc ? triggerFileInput() : null\">\n \n <input type=\"file\" #fileInput (change)=\"onFileSelected($event)\" accept=\".png, .jpg, .jpeg, .svg\" hidden>\n\n <!-- Estado: Vac\u00EDo (Drag and Drop) -->\n <div class=\"upload-state\" *ngIf=\"!imageSrc\">\n <i class=\"icon-big icon-upload\"></i>\n <p class=\"upload-text\">Arrastra aqu\u00ED o haz clic para seleccionar</p>\n <p class=\"upload-hint\">{{ recommendedSize }}</p>\n </div>\n\n <!-- Estado: Cargado (Preview) -->\n <div class=\"preview-state\" *ngIf=\"imageSrc\">\n <img [src]=\"imageSrc\" alt=\"Preview\">\n \n <!-- Hover overlay de acciones -->\n <div class=\"actions-overlay\">\n <button class=\"action-btn btn-white\" (click)=\"$event.stopPropagation(); expandImage()\">\n <i class=\"icon-small icon-expand\"></i> Ampliar\n </button>\n <button class=\"action-btn btn-white\" (click)=\"$event.stopPropagation(); changeImage()\">\n <i class=\"icon-small icon-change\"></i> Cambiar\n </button>\n <button class=\"action-btn btn-outline\" (click)=\"$event.stopPropagation(); removeImage()\">\n <i class=\"icon-small icon-delete\"></i> Eliminar\n </button>\n </div>\n </div>\n </div>\n\n <!-- Footer Actions / Info -->\n <div class=\"footer-area\">\n <div class=\"footer-text\" *ngIf=\"!imageSrc\">\n </div>\n <div class=\"footer-text-loaded\" *ngIf=\"imageSrc\">\n <span>Recomendado: 300x100 px</span>\n <span class=\"hint-italic\">Pasar el mouse por encima para acciones</span>\n </div>\n <button class=\"btn-subir\" *ngIf=\"!imageSrc\" (click)=\"triggerFileInput()\">\n <i class=\"icon-small icon-upload\"></i> Subir\n </button>\n </div>\n</div>\n\n<!-- Modal Lightbox (Pantalla completa) -->\n<div class=\"lightbox-overlay\" *ngIf=\"isExpanded\" (click)=\"closeLightbox()\">\n <!-- Top Bar -->\n <div class=\"top-bar-lightbox\" (click)=\"$event.stopPropagation()\">\n <div class=\"zoom-controls\">\n <button class=\"btn-icon\" (click)=\"zoomIn()\">\n <i class=\"icon-small icon-plus\"></i>\n </button>\n <button class=\"btn-icon\" (click)=\"zoomOut()\">\n <i class=\"icon-small icon-minus\"></i>\n </button>\n <button class=\"btn-icon\" (click)=\"zoomReset()\">\n <i class=\"icon-small icon-expand\"></i>\n </button>\n </div>\n <button class=\"btn-close\" (click)=\"closeLightbox()\">&#x2715;</button>\n </div>\n\n <!-- Centro: Imagen Expandida -->\n <div class=\"lightbox-content\" (click)=\"$event.stopPropagation()\">\n <img [src]=\"imageSrc\" [style.transform]=\"'scale(' + zoomScale + ')'\" alt=\"Expanded image\" class=\"zoomable-image\">\n </div>\n \n <!-- Parte Inferior -->\n <div class=\"bottom-bar-lightbox\" (click)=\"$event.stopPropagation()\">\n <span class=\"lightbox-title\">{{ title }}</span>\n <span class=\"zoom-percentage\">{{ (zoomScale * 100) | number:'1.0-0' }}%</span>\n </div>\n</div>\n", styles: [".icon-upload,.icon-expand,.icon-change,.icon-delete,.icon-camera,.icon-building,.icon-user,.icon-shield,.icon-plus,.icon-minus{background-color:currentColor;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;mask-size:contain;mask-repeat:no-repeat;display:inline-block}.icon-upload{-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 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\"/><polyline points=\"7 9 12 4 17 9\"/><line x1=\"12\" y1=\"4\" x2=\"12\" y2=\"16\"/></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 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\"/><polyline points=\"7 9 12 4 17 9\"/><line x1=\"12\" y1=\"4\" x2=\"12\" y2=\"16\"/></svg>')}.icon-expand{-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=\"M15 3h6v6\"/><path d=\"M9 21H3v-6\"/><path d=\"M21 3l-7 7\"/><path d=\"M3 21l7-7\"/></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=\"M15 3h6v6\"/><path d=\"M9 21H3v-6\"/><path d=\"M21 3l-7 7\"/><path d=\"M3 21l7-7\"/></svg>')}.icon-change{-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-camera{-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M5 7h1a2 2 0 0 0 2 -2a1 1 0 0 1 1 -1h6a1 1 0 0 1 1 1a2 2 0 0 0 2 2h1a2 2 0 0 1 2 2v9a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-9a2 2 0 0 1 2 -2'/><path d='M9 13a3 3 0 1 0 6 0a3 3 0 0 0 -6 0'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M5 7h1a2 2 0 0 0 2 -2a1 1 0 0 1 1 -1h6a1 1 0 0 1 1 1a2 2 0 0 0 2 2h1a2 2 0 0 1 2 2v9a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-9a2 2 0 0 1 2 -2'/><path d='M9 13a3 3 0 1 0 6 0a3 3 0 0 0 -6 0'/></svg>\")}.icon-building{-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M3 21l18 0'/><path d='M9 8l1 0'/><path d='M9 12l1 0'/><path d='M9 16l1 0'/><path d='M14 8l1 0'/><path d='M14 12l1 0'/><path d='M14 16l1 0'/><path d='M5 21v-16a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v16'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M3 21l18 0'/><path d='M9 8l1 0'/><path d='M9 12l1 0'/><path d='M9 16l1 0'/><path d='M14 8l1 0'/><path d='M14 12l1 0'/><path d='M14 16l1 0'/><path d='M5 21v-16a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v16'/></svg>\")}.icon-user{-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0'/><path d='M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0'/><path d='M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2'/></svg>\")}.icon-shield{-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1 -8.5 15a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1 -8.5 15a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3'/></svg>\")}.icon-plus{-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M12 5v14'/><path d='M5 12h14'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M12 5v14'/><path d='M5 12h14'/></svg>\")}.icon-minus{-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M5 12h14'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M5 12h14'/></svg>\")}.load-image-container{background-color:#ebe8d6;border-radius:12px;padding:24px;width:100%;height:100%;display:flex;flex-direction:column;box-sizing:border-box;font-family:inherit;color:#333}.header-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.title-section{display:flex;align-items:center;gap:16px}.icon{width:24px;height:24px;color:#596300}.text-group{display:flex;flex-direction:column}.title{margin:0;font-size:16px;font-weight:600;display:flex;align-items:center;gap:12px}.badge-cargado{background-color:#f0f0db;color:#596300;font-size:11px;font-weight:700;padding:4px 8px;border-radius:12px}.description{margin:4px 0 0;font-size:14px;color:#666}.divider{border:none;border-top:1px solid #c7c7ad;margin:0 0 20px}.box-area{width:100%;min-height:220px;border-radius:12px;box-sizing:border-box;overflow:hidden;position:relative;transition:all .2s ease;flex:1}.box-area.empty{border:1.5px dashed #c7c7ad;background-color:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center}.box-area.empty:hover,.box-area.dragging{border-color:#596300;background-color:#5963000d}.upload-state{display:flex;flex-direction:column;align-items:center;text-align:center}.icon-big{width:40px;height:40px;color:#a3a391;margin-bottom:16px}.upload-text{font-size:15px;color:#596300;margin:0 0 8px;font-weight:500}.upload-hint{font-size:13px;color:#999;margin:0}.preview-state{width:100%;height:100%;position:absolute;inset:0;border-radius:12px;overflow:hidden;background-color:#333;border:1px solid transparent}.preview-state img{width:100%;height:100%;display:block;object-fit:cover;transition:filter .3s ease}.actions-overlay{position:absolute;inset:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;gap:16px;opacity:0;transition:opacity .3s ease}.preview-state:hover .actions-overlay{opacity:1}.action-btn{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.action-btn.btn-white{background-color:#fff;border:1px solid #fff;color:#333}.action-btn.btn-white:hover{background-color:#f0f0f0}.action-btn.btn-outline{background-color:transparent;border:1px solid #cf0707;color:#cf0707}.action-btn.btn-outline:hover{background-color:#cf07071a}.icon-small{width:18px;height:18px;color:currentColor}.footer-area{display:flex;justify-content:space-between;align-items:center;margin-top:16px}.footer-text-loaded{display:flex;align-items:center;gap:12px;font-size:13px;color:#666}.hint-italic{font-style:italic;color:#888}.btn-subir{display:flex;align-items:center;gap:8px;background-color:#596300;color:#fff;border:none;padding:10px 20px;border-radius:8px;font-weight:600;cursor:pointer;transition:background-color .2s;margin-left:auto}.btn-subir:hover{background-color:#4a5400}.lightbox-overlay{position:fixed;inset:0;background-color:#000000e6;z-index:9999;display:flex;flex-direction:column}.top-bar-lightbox{padding:20px 40px;display:flex;justify-content:space-between;align-items:center}.zoom-controls{display:flex;gap:12px}.btn-icon{width:48px;height:48px;background-color:#fff;border:none;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:24px;font-weight:700;color:#333}.btn-icon:hover{background-color:#e0e0e0}.btn-close{background:transparent;border:none;color:#fff;font-size:24px;cursor:pointer}.lightbox-content{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden}.zoomable-image{max-width:90%;max-height:80vh;object-fit:contain;transition:transform .2s ease-out}.bottom-bar-lightbox{padding:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;gap:8px}.lightbox-title{font-size:16px;font-weight:600}.zoom-percentage{background-color:#fff;color:#333;padding:8px 16px;border-radius:8px;font-weight:700;position:absolute;bottom:24px;right:24px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }] });
5603
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: LoadImage, isStandalone: true, selector: "lib-load-image", inputs: { title: "title", description: "description", recommendedSize: "recommendedSize", titleIcon: "titleIcon", imageUrl: "imageUrl" }, outputs: { imageLoaded: "imageLoaded" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"load-image-container\">\n <!-- Header Info -->\n <div class=\"header-info\">\n <div class=\"title-section\">\n <i class=\"icon\" [ngClass]=\"titleIcon\"></i>\n <div class=\"text-group\">\n <h3 class=\"title\">\n {{ title }}\n @if (imageSrc) {\n <span class=\"badge-cargado\">CARGADO</span>\n }\n </h3>\n <p class=\"description\">{{ description }}</p>\n </div>\n </div>\n </div>\n\n <hr class=\"divider\" />\n\n <!-- Upload / Preview Box -->\n <div class=\"box-area\" \n [class.empty]=\"!imageSrc\" \n [class.dragging]=\"isDragging\"\n (dragover)=\"onDragOver($event)\" \n (dragleave)=\"onDragLeave($event)\" \n (drop)=\"onDrop($event)\"\n (click)=\"!imageSrc ? triggerFileInput() : null\">\n \n <input type=\"file\" #fileInput (change)=\"onFileSelected($event)\" accept=\".png, .jpg, .jpeg, .svg\" hidden>\n\n <!-- Estado: Vac\u00EDo (Drag and Drop) -->\n @if (!imageSrc) {\n <div class=\"upload-state\">\n <i class=\"icon-big icon-upload\"></i>\n <p class=\"upload-text\">Arrastra aqu\u00ED o haz clic para seleccionar</p>\n <p class=\"upload-hint\">{{ recommendedSize }}</p>\n </div>\n }\n\n <!-- Estado: Cargado (Preview) -->\n @if (imageSrc) {\n <div class=\"preview-state\">\n <img [src]=\"imageSrc\" alt=\"Preview\">\n \n <!-- Hover overlay de acciones -->\n <div class=\"actions-overlay\">\n <button class=\"action-btn btn-white\" (click)=\"$event.stopPropagation(); expandImage()\">\n <i class=\"icon-small icon-expand\"></i> Ampliar\n </button>\n <button class=\"action-btn btn-white\" (click)=\"$event.stopPropagation(); changeImage()\">\n <i class=\"icon-small icon-change\"></i> Cambiar\n </button>\n <button class=\"action-btn btn-outline\" (click)=\"$event.stopPropagation(); removeImage()\">\n <i class=\"icon-small icon-delete\"></i> Eliminar\n </button>\n </div>\n </div>\n }\n </div>\n\n <!-- Footer Actions / Info -->\n <div class=\"footer-area\">\n @if (!imageSrc) {\n <div class=\"footer-text\">\n </div>\n <button class=\"btn-subir\" (click)=\"triggerFileInput()\">\n <i class=\"icon-small icon-upload\"></i> Subir\n </button>\n } @else {\n <div class=\"footer-text-loaded\">\n <span>Recomendado: 300x100 px</span>\n <span class=\"hint-italic\">Pasar el mouse por encima para acciones</span>\n </div>\n }\n </div>\n</div>\n\n<!-- Modal Lightbox (Pantalla completa) -->\n@if (isExpanded) {\n <div class=\"lightbox-overlay\" (click)=\"closeLightbox()\">\n <!-- Top Bar -->\n <div class=\"top-bar-lightbox\" (click)=\"$event.stopPropagation()\">\n <div class=\"zoom-controls\">\n <button class=\"btn-icon\" (click)=\"zoomIn()\">\n <i class=\"icon-small icon-plus\"></i>\n </button>\n <button class=\"btn-icon\" (click)=\"zoomOut()\">\n <i class=\"icon-small icon-minus\"></i>\n </button>\n <button class=\"btn-icon\" (click)=\"zoomReset()\">\n <i class=\"icon-small icon-expand\"></i>\n </button>\n </div>\n <button class=\"btn-close\" (click)=\"closeLightbox()\">&#x2715;</button>\n </div>\n\n <!-- Centro: Imagen Expandida -->\n <div class=\"lightbox-content\" (click)=\"$event.stopPropagation()\">\n <img [src]=\"imageSrc\" [style.transform]=\"'scale(' + zoomScale + ')'\" alt=\"Expanded image\" class=\"zoomable-image\">\n </div>\n \n <!-- Parte Inferior -->\n <div class=\"bottom-bar-lightbox\" (click)=\"$event.stopPropagation()\">\n <span class=\"lightbox-title\">{{ title }}</span>\n <span class=\"zoom-percentage\">{{ (zoomScale * 100) | number:'1.0-0' }}%</span>\n </div>\n </div>\n}\n", styles: [".icon-upload,.icon-expand,.icon-change,.icon-delete,.icon-camera,.icon-building,.icon-user,.icon-shield,.icon-plus,.icon-minus{background-color:currentColor;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;mask-size:contain;mask-repeat:no-repeat;display:inline-block}.icon-upload{-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 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\"/><polyline points=\"7 9 12 4 17 9\"/><line x1=\"12\" y1=\"4\" x2=\"12\" y2=\"16\"/></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 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\"/><polyline points=\"7 9 12 4 17 9\"/><line x1=\"12\" y1=\"4\" x2=\"12\" y2=\"16\"/></svg>')}.icon-expand{-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=\"M15 3h6v6\"/><path d=\"M9 21H3v-6\"/><path d=\"M21 3l-7 7\"/><path d=\"M3 21l7-7\"/></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=\"M15 3h6v6\"/><path d=\"M9 21H3v-6\"/><path d=\"M21 3l-7 7\"/><path d=\"M3 21l7-7\"/></svg>')}.icon-change{-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-camera{-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M5 7h1a2 2 0 0 0 2 -2a1 1 0 0 1 1 -1h6a1 1 0 0 1 1 1a2 2 0 0 0 2 2h1a2 2 0 0 1 2 2v9a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-9a2 2 0 0 1 2 -2'/><path d='M9 13a3 3 0 1 0 6 0a3 3 0 0 0 -6 0'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M5 7h1a2 2 0 0 0 2 -2a1 1 0 0 1 1 -1h6a1 1 0 0 1 1 1a2 2 0 0 0 2 2h1a2 2 0 0 1 2 2v9a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-9a2 2 0 0 1 2 -2'/><path d='M9 13a3 3 0 1 0 6 0a3 3 0 0 0 -6 0'/></svg>\")}.icon-building{-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M3 21l18 0'/><path d='M9 8l1 0'/><path d='M9 12l1 0'/><path d='M9 16l1 0'/><path d='M14 8l1 0'/><path d='M14 12l1 0'/><path d='M14 16l1 0'/><path d='M5 21v-16a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v16'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M3 21l18 0'/><path d='M9 8l1 0'/><path d='M9 12l1 0'/><path d='M9 16l1 0'/><path d='M14 8l1 0'/><path d='M14 12l1 0'/><path d='M14 16l1 0'/><path d='M5 21v-16a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v16'/></svg>\")}.icon-user{-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0'/><path d='M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0'/><path d='M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2'/></svg>\")}.icon-shield{-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1 -8.5 15a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1 -8.5 15a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3'/></svg>\")}.icon-plus{-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M12 5v14'/><path d='M5 12h14'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M12 5v14'/><path d='M5 12h14'/></svg>\")}.icon-minus{-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M5 12h14'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M5 12h14'/></svg>\")}.load-image-container{background-color:#ebe8d6;border-radius:12px;padding:24px;width:100%;height:100%;display:flex;flex-direction:column;box-sizing:border-box;font-family:inherit;color:#333}.header-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.title-section{display:flex;align-items:center;gap:16px}.icon{width:24px;height:24px;color:#596300}.text-group{display:flex;flex-direction:column}.title{margin:0;font-size:16px;font-weight:600;display:flex;align-items:center;gap:12px}.badge-cargado{background-color:#f0f0db;color:#596300;font-size:11px;font-weight:700;padding:4px 8px;border-radius:12px}.description{margin:4px 0 0;font-size:14px;color:#666}.divider{border:none;border-top:1px solid #c7c7ad;margin:0 0 20px}.box-area{width:100%;min-height:220px;border-radius:12px;box-sizing:border-box;overflow:hidden;position:relative;transition:all .2s ease;flex:1}.box-area.empty{border:1.5px dashed #c7c7ad;background-color:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center}.box-area.empty:hover,.box-area.dragging{border-color:#596300;background-color:#5963000d}.upload-state{display:flex;flex-direction:column;align-items:center;text-align:center}.icon-big{width:40px;height:40px;color:#a3a391;margin-bottom:16px}.upload-text{font-size:15px;color:#596300;margin:0 0 8px;font-weight:500}.upload-hint{font-size:13px;color:#999;margin:0}.preview-state{width:100%;height:100%;position:absolute;inset:0;border-radius:12px;overflow:hidden;background-color:#333;border:1px solid transparent}.preview-state img{width:100%;height:100%;display:block;object-fit:cover;transition:filter .3s ease}.actions-overlay{position:absolute;inset:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;gap:16px;opacity:0;transition:opacity .3s ease}.preview-state:hover .actions-overlay{opacity:1}.action-btn{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.action-btn.btn-white{background-color:#fff;border:1px solid #fff;color:#333}.action-btn.btn-white:hover{background-color:#f0f0f0}.action-btn.btn-outline{background-color:transparent;border:1px solid #cf0707;color:#cf0707}.action-btn.btn-outline:hover{background-color:#cf07071a}.icon-small{width:18px;height:18px;color:currentColor}.footer-area{display:flex;justify-content:space-between;align-items:center;margin-top:16px}.footer-text-loaded{display:flex;align-items:center;gap:12px;font-size:13px;color:#666}.hint-italic{font-style:italic;color:#888}.btn-subir{display:flex;align-items:center;gap:8px;background-color:#596300;color:#fff;border:none;padding:10px 20px;border-radius:8px;font-weight:600;cursor:pointer;transition:background-color .2s;margin-left:auto}.btn-subir:hover{background-color:#4a5400}.lightbox-overlay{position:fixed;inset:0;background-color:#000000e6;z-index:9999;display:flex;flex-direction:column}.top-bar-lightbox{padding:20px 40px;display:flex;justify-content:space-between;align-items:center}.zoom-controls{display:flex;gap:12px}.btn-icon{width:48px;height:48px;background-color:#fff;border:none;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:24px;font-weight:700;color:#333}.btn-icon:hover{background-color:#e0e0e0}.btn-close{background:transparent;border:none;color:#fff;font-size:24px;cursor:pointer}.lightbox-content{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden}.zoomable-image{max-width:90%;max-height:80vh;object-fit:contain;transition:transform .2s ease-out}.bottom-bar-lightbox{padding:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;gap:8px}.lightbox-title{font-size:16px;font-weight:600}.zoom-percentage{background-color:#fff;color:#333;padding:8px 16px;border-radius:8px;font-weight:700;position:absolute;bottom:24px;right:24px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }] });
5430
5604
  }
5431
5605
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LoadImage, decorators: [{
5432
5606
  type: Component,
5433
- args: [{ selector: 'lib-load-image', imports: [CommonModule], template: "<div class=\"load-image-container\">\n <!-- Header Info -->\n <div class=\"header-info\">\n <div class=\"title-section\">\n <i class=\"icon\" [ngClass]=\"titleIcon\"></i>\n <div class=\"text-group\">\n <h3 class=\"title\">{{ title }} <span *ngIf=\"imageSrc\" class=\"badge-cargado\">CARGADO</span></h3>\n <p class=\"description\">{{ description }}</p>\n </div>\n </div>\n </div>\n\n <hr class=\"divider\" />\n\n <!-- Upload / Preview Box -->\n <div class=\"box-area\" \n [class.empty]=\"!imageSrc\" \n [class.dragging]=\"isDragging\"\n (dragover)=\"onDragOver($event)\" \n (dragleave)=\"onDragLeave($event)\" \n (drop)=\"onDrop($event)\"\n (click)=\"!imageSrc ? triggerFileInput() : null\">\n \n <input type=\"file\" #fileInput (change)=\"onFileSelected($event)\" accept=\".png, .jpg, .jpeg, .svg\" hidden>\n\n <!-- Estado: Vac\u00EDo (Drag and Drop) -->\n <div class=\"upload-state\" *ngIf=\"!imageSrc\">\n <i class=\"icon-big icon-upload\"></i>\n <p class=\"upload-text\">Arrastra aqu\u00ED o haz clic para seleccionar</p>\n <p class=\"upload-hint\">{{ recommendedSize }}</p>\n </div>\n\n <!-- Estado: Cargado (Preview) -->\n <div class=\"preview-state\" *ngIf=\"imageSrc\">\n <img [src]=\"imageSrc\" alt=\"Preview\">\n \n <!-- Hover overlay de acciones -->\n <div class=\"actions-overlay\">\n <button class=\"action-btn btn-white\" (click)=\"$event.stopPropagation(); expandImage()\">\n <i class=\"icon-small icon-expand\"></i> Ampliar\n </button>\n <button class=\"action-btn btn-white\" (click)=\"$event.stopPropagation(); changeImage()\">\n <i class=\"icon-small icon-change\"></i> Cambiar\n </button>\n <button class=\"action-btn btn-outline\" (click)=\"$event.stopPropagation(); removeImage()\">\n <i class=\"icon-small icon-delete\"></i> Eliminar\n </button>\n </div>\n </div>\n </div>\n\n <!-- Footer Actions / Info -->\n <div class=\"footer-area\">\n <div class=\"footer-text\" *ngIf=\"!imageSrc\">\n </div>\n <div class=\"footer-text-loaded\" *ngIf=\"imageSrc\">\n <span>Recomendado: 300x100 px</span>\n <span class=\"hint-italic\">Pasar el mouse por encima para acciones</span>\n </div>\n <button class=\"btn-subir\" *ngIf=\"!imageSrc\" (click)=\"triggerFileInput()\">\n <i class=\"icon-small icon-upload\"></i> Subir\n </button>\n </div>\n</div>\n\n<!-- Modal Lightbox (Pantalla completa) -->\n<div class=\"lightbox-overlay\" *ngIf=\"isExpanded\" (click)=\"closeLightbox()\">\n <!-- Top Bar -->\n <div class=\"top-bar-lightbox\" (click)=\"$event.stopPropagation()\">\n <div class=\"zoom-controls\">\n <button class=\"btn-icon\" (click)=\"zoomIn()\">\n <i class=\"icon-small icon-plus\"></i>\n </button>\n <button class=\"btn-icon\" (click)=\"zoomOut()\">\n <i class=\"icon-small icon-minus\"></i>\n </button>\n <button class=\"btn-icon\" (click)=\"zoomReset()\">\n <i class=\"icon-small icon-expand\"></i>\n </button>\n </div>\n <button class=\"btn-close\" (click)=\"closeLightbox()\">&#x2715;</button>\n </div>\n\n <!-- Centro: Imagen Expandida -->\n <div class=\"lightbox-content\" (click)=\"$event.stopPropagation()\">\n <img [src]=\"imageSrc\" [style.transform]=\"'scale(' + zoomScale + ')'\" alt=\"Expanded image\" class=\"zoomable-image\">\n </div>\n \n <!-- Parte Inferior -->\n <div class=\"bottom-bar-lightbox\" (click)=\"$event.stopPropagation()\">\n <span class=\"lightbox-title\">{{ title }}</span>\n <span class=\"zoom-percentage\">{{ (zoomScale * 100) | number:'1.0-0' }}%</span>\n </div>\n</div>\n", styles: [".icon-upload,.icon-expand,.icon-change,.icon-delete,.icon-camera,.icon-building,.icon-user,.icon-shield,.icon-plus,.icon-minus{background-color:currentColor;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;mask-size:contain;mask-repeat:no-repeat;display:inline-block}.icon-upload{-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 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\"/><polyline points=\"7 9 12 4 17 9\"/><line x1=\"12\" y1=\"4\" x2=\"12\" y2=\"16\"/></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 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\"/><polyline points=\"7 9 12 4 17 9\"/><line x1=\"12\" y1=\"4\" x2=\"12\" y2=\"16\"/></svg>')}.icon-expand{-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=\"M15 3h6v6\"/><path d=\"M9 21H3v-6\"/><path d=\"M21 3l-7 7\"/><path d=\"M3 21l7-7\"/></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=\"M15 3h6v6\"/><path d=\"M9 21H3v-6\"/><path d=\"M21 3l-7 7\"/><path d=\"M3 21l7-7\"/></svg>')}.icon-change{-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-camera{-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M5 7h1a2 2 0 0 0 2 -2a1 1 0 0 1 1 -1h6a1 1 0 0 1 1 1a2 2 0 0 0 2 2h1a2 2 0 0 1 2 2v9a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-9a2 2 0 0 1 2 -2'/><path d='M9 13a3 3 0 1 0 6 0a3 3 0 0 0 -6 0'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M5 7h1a2 2 0 0 0 2 -2a1 1 0 0 1 1 -1h6a1 1 0 0 1 1 1a2 2 0 0 0 2 2h1a2 2 0 0 1 2 2v9a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-9a2 2 0 0 1 2 -2'/><path d='M9 13a3 3 0 1 0 6 0a3 3 0 0 0 -6 0'/></svg>\")}.icon-building{-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M3 21l18 0'/><path d='M9 8l1 0'/><path d='M9 12l1 0'/><path d='M9 16l1 0'/><path d='M14 8l1 0'/><path d='M14 12l1 0'/><path d='M14 16l1 0'/><path d='M5 21v-16a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v16'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M3 21l18 0'/><path d='M9 8l1 0'/><path d='M9 12l1 0'/><path d='M9 16l1 0'/><path d='M14 8l1 0'/><path d='M14 12l1 0'/><path d='M14 16l1 0'/><path d='M5 21v-16a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v16'/></svg>\")}.icon-user{-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0'/><path d='M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0'/><path d='M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2'/></svg>\")}.icon-shield{-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1 -8.5 15a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1 -8.5 15a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3'/></svg>\")}.icon-plus{-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M12 5v14'/><path d='M5 12h14'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M12 5v14'/><path d='M5 12h14'/></svg>\")}.icon-minus{-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M5 12h14'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M5 12h14'/></svg>\")}.load-image-container{background-color:#ebe8d6;border-radius:12px;padding:24px;width:100%;height:100%;display:flex;flex-direction:column;box-sizing:border-box;font-family:inherit;color:#333}.header-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.title-section{display:flex;align-items:center;gap:16px}.icon{width:24px;height:24px;color:#596300}.text-group{display:flex;flex-direction:column}.title{margin:0;font-size:16px;font-weight:600;display:flex;align-items:center;gap:12px}.badge-cargado{background-color:#f0f0db;color:#596300;font-size:11px;font-weight:700;padding:4px 8px;border-radius:12px}.description{margin:4px 0 0;font-size:14px;color:#666}.divider{border:none;border-top:1px solid #c7c7ad;margin:0 0 20px}.box-area{width:100%;min-height:220px;border-radius:12px;box-sizing:border-box;overflow:hidden;position:relative;transition:all .2s ease;flex:1}.box-area.empty{border:1.5px dashed #c7c7ad;background-color:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center}.box-area.empty:hover,.box-area.dragging{border-color:#596300;background-color:#5963000d}.upload-state{display:flex;flex-direction:column;align-items:center;text-align:center}.icon-big{width:40px;height:40px;color:#a3a391;margin-bottom:16px}.upload-text{font-size:15px;color:#596300;margin:0 0 8px;font-weight:500}.upload-hint{font-size:13px;color:#999;margin:0}.preview-state{width:100%;height:100%;position:absolute;inset:0;border-radius:12px;overflow:hidden;background-color:#333;border:1px solid transparent}.preview-state img{width:100%;height:100%;display:block;object-fit:cover;transition:filter .3s ease}.actions-overlay{position:absolute;inset:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;gap:16px;opacity:0;transition:opacity .3s ease}.preview-state:hover .actions-overlay{opacity:1}.action-btn{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.action-btn.btn-white{background-color:#fff;border:1px solid #fff;color:#333}.action-btn.btn-white:hover{background-color:#f0f0f0}.action-btn.btn-outline{background-color:transparent;border:1px solid #cf0707;color:#cf0707}.action-btn.btn-outline:hover{background-color:#cf07071a}.icon-small{width:18px;height:18px;color:currentColor}.footer-area{display:flex;justify-content:space-between;align-items:center;margin-top:16px}.footer-text-loaded{display:flex;align-items:center;gap:12px;font-size:13px;color:#666}.hint-italic{font-style:italic;color:#888}.btn-subir{display:flex;align-items:center;gap:8px;background-color:#596300;color:#fff;border:none;padding:10px 20px;border-radius:8px;font-weight:600;cursor:pointer;transition:background-color .2s;margin-left:auto}.btn-subir:hover{background-color:#4a5400}.lightbox-overlay{position:fixed;inset:0;background-color:#000000e6;z-index:9999;display:flex;flex-direction:column}.top-bar-lightbox{padding:20px 40px;display:flex;justify-content:space-between;align-items:center}.zoom-controls{display:flex;gap:12px}.btn-icon{width:48px;height:48px;background-color:#fff;border:none;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:24px;font-weight:700;color:#333}.btn-icon:hover{background-color:#e0e0e0}.btn-close{background:transparent;border:none;color:#fff;font-size:24px;cursor:pointer}.lightbox-content{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden}.zoomable-image{max-width:90%;max-height:80vh;object-fit:contain;transition:transform .2s ease-out}.bottom-bar-lightbox{padding:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;gap:8px}.lightbox-title{font-size:16px;font-weight:600}.zoom-percentage{background-color:#fff;color:#333;padding:8px 16px;border-radius:8px;font-weight:700;position:absolute;bottom:24px;right:24px}\n"] }]
5607
+ args: [{ selector: 'lib-load-image', imports: [CommonModule], template: "<div class=\"load-image-container\">\n <!-- Header Info -->\n <div class=\"header-info\">\n <div class=\"title-section\">\n <i class=\"icon\" [ngClass]=\"titleIcon\"></i>\n <div class=\"text-group\">\n <h3 class=\"title\">\n {{ title }}\n @if (imageSrc) {\n <span class=\"badge-cargado\">CARGADO</span>\n }\n </h3>\n <p class=\"description\">{{ description }}</p>\n </div>\n </div>\n </div>\n\n <hr class=\"divider\" />\n\n <!-- Upload / Preview Box -->\n <div class=\"box-area\" \n [class.empty]=\"!imageSrc\" \n [class.dragging]=\"isDragging\"\n (dragover)=\"onDragOver($event)\" \n (dragleave)=\"onDragLeave($event)\" \n (drop)=\"onDrop($event)\"\n (click)=\"!imageSrc ? triggerFileInput() : null\">\n \n <input type=\"file\" #fileInput (change)=\"onFileSelected($event)\" accept=\".png, .jpg, .jpeg, .svg\" hidden>\n\n <!-- Estado: Vac\u00EDo (Drag and Drop) -->\n @if (!imageSrc) {\n <div class=\"upload-state\">\n <i class=\"icon-big icon-upload\"></i>\n <p class=\"upload-text\">Arrastra aqu\u00ED o haz clic para seleccionar</p>\n <p class=\"upload-hint\">{{ recommendedSize }}</p>\n </div>\n }\n\n <!-- Estado: Cargado (Preview) -->\n @if (imageSrc) {\n <div class=\"preview-state\">\n <img [src]=\"imageSrc\" alt=\"Preview\">\n \n <!-- Hover overlay de acciones -->\n <div class=\"actions-overlay\">\n <button class=\"action-btn btn-white\" (click)=\"$event.stopPropagation(); expandImage()\">\n <i class=\"icon-small icon-expand\"></i> Ampliar\n </button>\n <button class=\"action-btn btn-white\" (click)=\"$event.stopPropagation(); changeImage()\">\n <i class=\"icon-small icon-change\"></i> Cambiar\n </button>\n <button class=\"action-btn btn-outline\" (click)=\"$event.stopPropagation(); removeImage()\">\n <i class=\"icon-small icon-delete\"></i> Eliminar\n </button>\n </div>\n </div>\n }\n </div>\n\n <!-- Footer Actions / Info -->\n <div class=\"footer-area\">\n @if (!imageSrc) {\n <div class=\"footer-text\">\n </div>\n <button class=\"btn-subir\" (click)=\"triggerFileInput()\">\n <i class=\"icon-small icon-upload\"></i> Subir\n </button>\n } @else {\n <div class=\"footer-text-loaded\">\n <span>Recomendado: 300x100 px</span>\n <span class=\"hint-italic\">Pasar el mouse por encima para acciones</span>\n </div>\n }\n </div>\n</div>\n\n<!-- Modal Lightbox (Pantalla completa) -->\n@if (isExpanded) {\n <div class=\"lightbox-overlay\" (click)=\"closeLightbox()\">\n <!-- Top Bar -->\n <div class=\"top-bar-lightbox\" (click)=\"$event.stopPropagation()\">\n <div class=\"zoom-controls\">\n <button class=\"btn-icon\" (click)=\"zoomIn()\">\n <i class=\"icon-small icon-plus\"></i>\n </button>\n <button class=\"btn-icon\" (click)=\"zoomOut()\">\n <i class=\"icon-small icon-minus\"></i>\n </button>\n <button class=\"btn-icon\" (click)=\"zoomReset()\">\n <i class=\"icon-small icon-expand\"></i>\n </button>\n </div>\n <button class=\"btn-close\" (click)=\"closeLightbox()\">&#x2715;</button>\n </div>\n\n <!-- Centro: Imagen Expandida -->\n <div class=\"lightbox-content\" (click)=\"$event.stopPropagation()\">\n <img [src]=\"imageSrc\" [style.transform]=\"'scale(' + zoomScale + ')'\" alt=\"Expanded image\" class=\"zoomable-image\">\n </div>\n \n <!-- Parte Inferior -->\n <div class=\"bottom-bar-lightbox\" (click)=\"$event.stopPropagation()\">\n <span class=\"lightbox-title\">{{ title }}</span>\n <span class=\"zoom-percentage\">{{ (zoomScale * 100) | number:'1.0-0' }}%</span>\n </div>\n </div>\n}\n", styles: [".icon-upload,.icon-expand,.icon-change,.icon-delete,.icon-camera,.icon-building,.icon-user,.icon-shield,.icon-plus,.icon-minus{background-color:currentColor;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;mask-size:contain;mask-repeat:no-repeat;display:inline-block}.icon-upload{-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 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\"/><polyline points=\"7 9 12 4 17 9\"/><line x1=\"12\" y1=\"4\" x2=\"12\" y2=\"16\"/></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 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\"/><polyline points=\"7 9 12 4 17 9\"/><line x1=\"12\" y1=\"4\" x2=\"12\" y2=\"16\"/></svg>')}.icon-expand{-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=\"M15 3h6v6\"/><path d=\"M9 21H3v-6\"/><path d=\"M21 3l-7 7\"/><path d=\"M3 21l7-7\"/></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=\"M15 3h6v6\"/><path d=\"M9 21H3v-6\"/><path d=\"M21 3l-7 7\"/><path d=\"M3 21l7-7\"/></svg>')}.icon-change{-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-camera{-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M5 7h1a2 2 0 0 0 2 -2a1 1 0 0 1 1 -1h6a1 1 0 0 1 1 1a2 2 0 0 0 2 2h1a2 2 0 0 1 2 2v9a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-9a2 2 0 0 1 2 -2'/><path d='M9 13a3 3 0 1 0 6 0a3 3 0 0 0 -6 0'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M5 7h1a2 2 0 0 0 2 -2a1 1 0 0 1 1 -1h6a1 1 0 0 1 1 1a2 2 0 0 0 2 2h1a2 2 0 0 1 2 2v9a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-9a2 2 0 0 1 2 -2'/><path d='M9 13a3 3 0 1 0 6 0a3 3 0 0 0 -6 0'/></svg>\")}.icon-building{-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M3 21l18 0'/><path d='M9 8l1 0'/><path d='M9 12l1 0'/><path d='M9 16l1 0'/><path d='M14 8l1 0'/><path d='M14 12l1 0'/><path d='M14 16l1 0'/><path d='M5 21v-16a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v16'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M3 21l18 0'/><path d='M9 8l1 0'/><path d='M9 12l1 0'/><path d='M9 16l1 0'/><path d='M14 8l1 0'/><path d='M14 12l1 0'/><path d='M14 16l1 0'/><path d='M5 21v-16a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v16'/></svg>\")}.icon-user{-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0'/><path d='M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0'/><path d='M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2'/></svg>\")}.icon-shield{-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1 -8.5 15a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1 -8.5 15a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3'/></svg>\")}.icon-plus{-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M12 5v14'/><path d='M5 12h14'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M12 5v14'/><path d='M5 12h14'/></svg>\")}.icon-minus{-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M5 12h14'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg 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'><path d='M5 12h14'/></svg>\")}.load-image-container{background-color:#ebe8d6;border-radius:12px;padding:24px;width:100%;height:100%;display:flex;flex-direction:column;box-sizing:border-box;font-family:inherit;color:#333}.header-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.title-section{display:flex;align-items:center;gap:16px}.icon{width:24px;height:24px;color:#596300}.text-group{display:flex;flex-direction:column}.title{margin:0;font-size:16px;font-weight:600;display:flex;align-items:center;gap:12px}.badge-cargado{background-color:#f0f0db;color:#596300;font-size:11px;font-weight:700;padding:4px 8px;border-radius:12px}.description{margin:4px 0 0;font-size:14px;color:#666}.divider{border:none;border-top:1px solid #c7c7ad;margin:0 0 20px}.box-area{width:100%;min-height:220px;border-radius:12px;box-sizing:border-box;overflow:hidden;position:relative;transition:all .2s ease;flex:1}.box-area.empty{border:1.5px dashed #c7c7ad;background-color:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center}.box-area.empty:hover,.box-area.dragging{border-color:#596300;background-color:#5963000d}.upload-state{display:flex;flex-direction:column;align-items:center;text-align:center}.icon-big{width:40px;height:40px;color:#a3a391;margin-bottom:16px}.upload-text{font-size:15px;color:#596300;margin:0 0 8px;font-weight:500}.upload-hint{font-size:13px;color:#999;margin:0}.preview-state{width:100%;height:100%;position:absolute;inset:0;border-radius:12px;overflow:hidden;background-color:#333;border:1px solid transparent}.preview-state img{width:100%;height:100%;display:block;object-fit:cover;transition:filter .3s ease}.actions-overlay{position:absolute;inset:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;gap:16px;opacity:0;transition:opacity .3s ease}.preview-state:hover .actions-overlay{opacity:1}.action-btn{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.action-btn.btn-white{background-color:#fff;border:1px solid #fff;color:#333}.action-btn.btn-white:hover{background-color:#f0f0f0}.action-btn.btn-outline{background-color:transparent;border:1px solid #cf0707;color:#cf0707}.action-btn.btn-outline:hover{background-color:#cf07071a}.icon-small{width:18px;height:18px;color:currentColor}.footer-area{display:flex;justify-content:space-between;align-items:center;margin-top:16px}.footer-text-loaded{display:flex;align-items:center;gap:12px;font-size:13px;color:#666}.hint-italic{font-style:italic;color:#888}.btn-subir{display:flex;align-items:center;gap:8px;background-color:#596300;color:#fff;border:none;padding:10px 20px;border-radius:8px;font-weight:600;cursor:pointer;transition:background-color .2s;margin-left:auto}.btn-subir:hover{background-color:#4a5400}.lightbox-overlay{position:fixed;inset:0;background-color:#000000e6;z-index:9999;display:flex;flex-direction:column}.top-bar-lightbox{padding:20px 40px;display:flex;justify-content:space-between;align-items:center}.zoom-controls{display:flex;gap:12px}.btn-icon{width:48px;height:48px;background-color:#fff;border:none;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:24px;font-weight:700;color:#333}.btn-icon:hover{background-color:#e0e0e0}.btn-close{background:transparent;border:none;color:#fff;font-size:24px;cursor:pointer}.lightbox-content{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden}.zoomable-image{max-width:90%;max-height:80vh;object-fit:contain;transition:transform .2s ease-out}.bottom-bar-lightbox{padding:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;gap:8px}.lightbox-title{font-size:16px;font-weight:600}.zoom-percentage{background-color:#fff;color:#333;padding:8px 16px;border-radius:8px;font-weight:700;position:absolute;bottom:24px;right:24px}\n"] }]
5434
5608
  }], propDecorators: { title: [{
5435
5609
  type: Input$1
5436
5610
  }], description: [{
@@ -5439,6 +5613,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
5439
5613
  type: Input$1
5440
5614
  }], titleIcon: [{
5441
5615
  type: Input$1
5616
+ }], imageUrl: [{
5617
+ type: Input$1
5442
5618
  }], imageLoaded: [{
5443
5619
  type: Output
5444
5620
  }], fileInput: [{
@@ -5453,5 +5629,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
5453
5629
  * Generated bundle index. Do not edit.
5454
5630
  */
5455
5631
 
5456
- export { BarChart, BaseChart, Button, ButtonCards, CARD_BG, CardContent, Colors, DateTimeFilter, DateTimePicker, DevicesCarousel, DialogAlertComponent, DialogConfirmation, DonutChart, DynamicFormFields, FeatureCard, Footer, GeoAPIMaps, Heatmap, InfoGroup, Input, InputNumberFilter, InputSelectFilter, InputTextFilter, InputTimeFilter, KpiCard, LineChart, LoadImage, Loader, MapGeo, ModalForm, NotFoundModal, NotFoundSection, NotificationModal, OptionCard, PaginationComponent, ProcessingOverlay, ProgressBar, ProgressFormService, SelectCustomSearch, SideCard, SideCardDetail, TOAST_EVENTS, Table, Tabs, TitleFilters, Toast, ToastHelper, ToastService, ToggleCustom, UI_CHART_TOKENS, WizardForm };
5632
+ export { BarChart, BaseChart, Button, ButtonCards, CARD_BG, CardContent, Colors, DateTimeFilter, DateTimePicker, DevicesCarousel, DialogAlertComponent, DialogConfirmation, DonutChart, DynamicFormFields, FeatureCard, Footer, GeoAPIMaps, Heatmap, InfoGroup, Input, InputNumberFilter, InputSelectFilter, InputTextFilter, InputTimeFilter, KpiCard, LineChart, LoadImage, Loader, MapGeo, ModalForm, NotFoundModal, NotFoundSection, NotificationModal, OptionCard, PaginationComponent, ProcessingOverlay, ProgressBar, ProgressFormService, SelectCustomSearch, SideCard, SideCardDetail, TOAST_EVENTS, Table, TableChart, Tabs, TitleFilters, Toast, ToastHelper, ToastService, ToggleCustom, UI_CHART_TOKENS, WizardForm };
5457
5633
  //# sourceMappingURL=sapenlinea-components.mjs.map