sapenlinea-components 0.10.87 → 0.11.89
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.
- package/README.md +58 -4
- package/fesm2022/sapenlinea-components.mjs +188 -13
- package/fesm2022/sapenlinea-components.mjs.map +1 -1
- package/index.d.ts +104 -13
- package/package.json +3 -2
|
@@ -595,11 +595,11 @@ class Table {
|
|
|
595
595
|
this.pdfViewerService.open({ name, urls });
|
|
596
596
|
}
|
|
597
597
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Table, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
598
|
-
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 }, subActions: { classPropertyName: "subActions", publicName: "subActions", isSignal: true, isRequired: false, transformFunction: null }, showSubActions: { classPropertyName: "showSubActions", publicName: "showSubActions", 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 }, columnGroups: { classPropertyName: "columnGroups", publicName: "columnGroups", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { optionSelected: "optionSelected", subOptionSelected: "subOptionSelected", iconAction: "iconAction", columnGroupChange: "columnGroupChange" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, viewQueries: [{ propertyName: "chips", predicate: ["statusChip"], descendants: true }], ngImport: i0, template: "<div class=\"table-wrapper\">\n <table class=\"inner-table\">\n <thead>\n <!-- Fila 1 -->\n <tr>\n\n @if (showSelection()) {\n <th class=\"checkbox-header\" [attr.rowspan]=\"hasColumnGroups() ? 2 : null\">\n <label class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\">\n <input type=\"checkbox\" [checked]=\"isAllSelected()\" (change)=\"toggleAllRows($event.target.checked)\" />\n <span class=\"checkmark\"></span>\n </label>\n </th>\n }\n\n @for (col of columns(); track col.key) {\n <th (click)=\"col.sortable !== false && onSort(col)\" [class.sortable]=\"col.sortable !== false\"\n [class]=\"getAlignment(col) + ' ' + (col.headerClass || '')\" [attr.rowspan]=\"hasColumnGroups() ? 2 : null\"\n [style.maxWidth]=\"getColMaxWidth(col)\" [style.width]=\"getColWidth(col)\"\n [style.whiteSpace]=\"col.compact ? 'nowrap' : null\">\n {{ col.label }}\n\n <!-- iconos de orden opcionales -->\n @if (sortColumn() === col.key) {\n <span class=\"sort-icon\">\n {{ sortDirection() === 'asc' ? '\u25B2' : '\u25BC' }}\n </span>\n }\n </th>\n }\n\n <!-- headers de grupo (colspan = n\u00FAmero de sub-columnas) -->\n @for (group of columnGroups(); track group.groupLabel) {\n <th class=\"column-group-header\" [attr.colspan]=\"group.columns.length\">\n {{ group.groupLabel }}\n </th>\n }\n\n <!-- columna para acciones -->\n @if (showActions()) {\n <th class=\"actions-header\" [attr.rowspan]=\"hasColumnGroups() ? 2 : null\">Acciones</th>\n }\n </tr>\n\n <!-- Fila 2: sub-headers de grupo (solo si hay groups) -->\n @if (hasColumnGroups()) {\n <tr>\n @for (group of columnGroups(); track group.groupLabel) {\n @for (subCol of group.columns; track subCol.key) {\n <th class=\"column-group-sub-header\">{{ subCol.label }}</th>\n }\n }\n </tr>\n }\n </thead>\n\n <tbody>\n @for (row of sortedData(); track row['id']) {\n <tr class=\"parent-row\"\n [class.expandable]=\"isRowExpandable()(row)\"\n [class.expanded]=\"isExpanded(row)\"\n [class.selected]=\"isRowSelected(row)\"\n (click)=\"toggleRowExpand(row, $event)\">\n\n @if (showSelection()) {\n <td class=\"checkbox-cell\">\n <label class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\">\n <input type=\"checkbox\" [checked]=\"isRowSelected(row)\" (change)=\"toggleRow(row, $event.target.checked)\" />\n <span class=\"checkmark\"></span>\n </label>\n </td>\n }\n\n @for (col of columns(); track col.key) {\n <td [class]=\"getAlignment(col) + ' ' + (col.cellClass ? col.cellClass(row) : '')\"\n [style.maxWidth]=\"getColMaxWidth(col)\" [style.width]=\"getColWidth(col)\"\n [style.whiteSpace]=\"col.compact ? 'nowrap' : null\">\n @if (col.type === 'status') { @let style =\n getStatusStyle(row[col.key]);\n <span #statusChip class=\"status-chip\" [style.background-color]=\"style.bg\" [style.color]=\"style.color\">\n {{ getStatusLabel(row[col.key]) }}\n </span>\n\n } @else if (col.type === 'icon-button') {\n\n <button (click)=\"onIconColumnClick(col, row, $event)\">\n <span class=\"icon\" [class]=\"col.icon\"></span>\n </button>\n } @else if (col.type === 'grade') {\n @let style = getGradeStyle(row[col.key]);\n <span class=\"status-chip\" [style.background-color]=\"style.bg\" [style.color]=\"style.color\">\n {{ formatValue(col, row[col.key]) }}\n </span>\n } @else {\n {{ formatValue(col, row[col.key]) }}\n\n }\n </td>\n }\n\n <!-- Celdas de grupo -->\n @for (group of columnGroups(); track group.groupLabel) {\n @for (subCol of group.columns; track subCol.key) {\n <td class=\"column-group-cell\">\n @if (!subCol.type || subCol.type === 'checkbox') {\n <label class=\"custom-checkbox\"\n [class.custom-checkbox--file]=\"hasCheckboxFile(subCol, row)\"\n (click)=\"onGroupCheckboxClick(subCol, row, $event)\">\n <input type=\"checkbox\" disabled [checked]=\"row[subCol.key]\" />\n <span class=\"checkmark\"></span>\n </label>\n } @else if (subCol.type === 'number') {\n {{ row[subCol.key] }}\n } @else if (subCol.type === 'percentage') {\n {{ row[subCol.key] }}%\n } @else if (subCol.type === 'icon-button') {\n <button (click)=\"onGroupIconClick(subCol, row, $event)\">\n <span class=\"icon\" [class]=\"subCol.icon\"></span>\n </button>\n }\n </td>\n }\n }\n\n <!-- Celda de acciones -->\n @if (showActions()) {\n <td class=\"acciones-cell\" [style.whiteSpace]=\"'nowrap'\">\n <div class=\"menu-acciones\">\n <button class=\"icon-button\" (click)=\"openModal(row); $event.stopPropagation()\">\n <div class=\"content\">\n <div class=\"state-layer\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"more-vert\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"\n fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <circle cx=\"12\" cy=\"5\" r=\"1\" />\n <circle cx=\"12\" cy=\"12\" r=\"1\" />\n <circle cx=\"12\" cy=\"19\" r=\"1\" />\n </svg>\n </div>\n </div>\n </button>\n @if(selectedRow()?.['id'] === row['id']){\n <div class=\"modal-options-table\" (click)=\"$event.stopPropagation()\">\n <div class=\"modal-content-table\">\n <ul>\n @for (option of getActionsForRow(row); track $index) {\n <li class=\"option-item-table\" [style.color]=\"getActionColor(option)\"\n (click)=\"onOptionClick(option, row)\">\n <span class=\"icon\" [class]=\"option.icon\"></span>\n <span class=\"label\">{{ option.label }}</span>\n </li>\n }\n </ul>\n </div>\n </div>\n }\n </div>\n </td>\n }\n </tr>\n <!-- Subfilas (solo si es expandible y est\u00E1 expandida) -->\n @if (isRowExpandable()(row) && isExpanded(row)) {\n <tr class=\"child-row child-header-row\">\n <td class=\"child-cell-full\"\n [attr.colspan]=\"totalColspan()\">\n <div class=\"child-grid\">\n @for (subCol of subColumns(); track subCol.key) {\n <div class=\"child-item\">\n <span class=\"child-label\">{{ subCol.label }}</span>\n </div>\n }\n @if (showSubActions()) {\n <div class=\"child-item child-actions-header\">\n <span class=\"child-label\">Acciones</span>\n </div>\n }\n </div>\n </td>\n </tr>\n\n @for (child of getChildRows(row); track child['id']) {\n <tr class=\"child-row\">\n <td class=\"child-cell-full\" [attr.colspan]=\"totalColspan()\">\n <div class=\"child-grid\">\n @for (subCol of subColumns(); track subCol.key) {\n <div class=\"child-item\">\n\n @if (subCol.type === 'status') {\n @let style = getStatusStyle(child[subCol.key]);\n <span class=\"status-chip child-status-chip\" [style.background-color]=\"style.bg\"\n [style.color]=\"style.color\">\n {{ getStatusLabel(child[subCol.key]) }}\n </span>\n } @else {\n <span class=\"child-value\">\n {{ formatValue(subCol, child[subCol.key]) }}\n </span>\n }\n\n </div>\n }\n @if (showSubActions()) {\n <div class=\"child-item child-actions-cell\">\n <div class=\"menu-acciones\">\n <button class=\"icon-button\" (click)=\"openSubModal(child, $event)\">\n <div class=\"content\">\n <div class=\"state-layer\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"more-vert\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"\n fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <circle cx=\"12\" cy=\"5\" r=\"1\" />\n <circle cx=\"12\" cy=\"12\" r=\"1\" />\n <circle cx=\"12\" cy=\"19\" r=\"1\" />\n </svg>\n </div>\n </div>\n </button>\n @if(selectedChildRow()?.['id'] === child['id']){\n <div class=\"modal-options-table\" (click)=\"$event.stopPropagation()\">\n <div class=\"modal-content-table\">\n <ul>\n @for (option of getActionsForChildRow(child); track $index) {\n <li class=\"option-item-table\" [style.color]=\"getActionColor(option)\"\n (click)=\"onSubOptionClick(option, child)\">\n <span class=\"icon\" [class]=\"option.icon\"></span>\n <span class=\"label\">{{ option.label }}</span>\n </li>\n }\n </ul>\n </div>\n </div>\n }\n </div>\n </div>\n }\n </div>\n </td>\n </tr>\n }\n }\n }\n @if (showTotals()) {\n <tr class=\"total-row\">\n \n <!-- checkbox -->\n @if (showSelection()) {\n <td class=\"checkbox-cell\"></td>\n }\n \n @for (col of columns(); track col.key) {\n <td [class]=\"getAlignment(col)\">\n \n @if (col.type === 'money' && col.totalizable) {\n {{ formatValue(col, getMoneyTotal(col)) }}\n } @else if (col === columns()[0]) {\n <strong>Total</strong>\n }\n \n </td>\n }\n\n <!-- celdas vac\u00EDas para sub-columnas de grupo -->\n @for (group of columnGroups(); track group.groupLabel) {\n @for (subCol of group.columns; track subCol.key) {\n <td></td>\n }\n }\n \n @if (showActions()) {\n <td></td>\n }\n \n </tr>\n }\n\n <!-- Fila de leyenda (solo si hay columnGroups) -->\n @for (group of columnGroups(); track group.groupLabel) {\n <tr class=\"legend-row\">\n <td class=\"legend-cell\" [attr.colspan]=\"totalColspan()\">\n <span class=\"legend-title\">{{ group.groupLabel | uppercase }}:</span>\n @for (col of group.columns; track col.key; let last = $last) {\n <span class=\"legend-item\">{{ col.label }}:\n {{ col.description }}{{ last ? '' : ' \u00B7 ' }}</span>\n }\n </td>\n </tr>\n }\n \n </tbody>\n </table>\n</div>", styles: [".table-wrapper{width:100%;max-width:100%;border-radius:20px;border:1px solid #c7c7ad}.inner-table{width:100%;max-width:100%;table-layout:auto;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:center;padding:8px 12px;font-weight:600;color:#3a3a3a;text-transform:uppercase;overflow-wrap:anywhere;word-break:break-word}.inner-table td{padding:8px 12px;color:#4a4a4a;border-top:1px solid #c7c7ad;overflow-wrap:anywhere;word-break:break-word}.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}.custom-checkbox--file{cursor:pointer}.custom-checkbox--file .checkmark{box-shadow:0 0 0 2px #59630033}.custom-checkbox--file:hover .checkmark{box-shadow:0 0 0 3px #59630059}.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:inline-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}.option-item-table .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>')}.icon-logout{-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 stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2\"/><path d=\"M9 12h12l-3 -3\"/><path d=\"M18 15l3 -3\"/></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 stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2\"/><path d=\"M9 12h12l-3 -3\"/><path d=\"M18 15l3 -3\"/></svg>')}.icon-export{-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 stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M12.5 21h-7.5a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v7.5\"/><path d=\"M3 10h18\"/><path d=\"M10 3v18\"/><path d=\"M16 19h6\"/><path d=\"M19 16l3 3l-3 3\"/></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 stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M12.5 21h-7.5a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v7.5\"/><path d=\"M3 10h18\"/><path d=\"M10 3v18\"/><path d=\"M16 19h6\"/><path d=\"M19 16l3 3l-3 3\"/></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}.column-group-header{text-align:center;padding:4px 8px}.column-group-sub-header{text-align:center;padding:4px 6px;font-size:12px;font-weight:700;white-space:nowrap}.column-group-sub-header:first-child{border-radius:0}.column-group-sub-header:last-child{border-radius:0}.column-group-cell{text-align:center;vertical-align:middle;padding:4px 6px}.legend-row td{border-top:1px solid #c7c7ad}.legend-cell{padding:10px 16px;font-size:12px;color:#5a5a5a;font-style:italic}.legend-title{font-weight:700;font-style:italic;color:#3a3a3a;margin-right:4px}.legend-item{color:#5a5a5a}.legend-row:last-child td{border-bottom-left-radius:20px;border-bottom-right-radius:20px}.inner-table tbody tr.total-row:has(+.legend-row) td:first-child{border-bottom-left-radius:0}.inner-table tbody tr.total-row:has(+.legend-row) td:last-child{border-bottom-right-radius:0}.cell-prev-changed{background-color:#ffe5e5!important;color:#ba1a1a!important}.cell-curr-changed{background-color:#c6f6c1!important;color:#006d2f!important}.header-prev{color:#ba1a1a!important}.header-curr{color:#006d2f!important}\n"], dependencies: [{ kind: "pipe", type: UpperCasePipe, name: "uppercase" }] });
|
|
598
|
+
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 }, subActions: { classPropertyName: "subActions", publicName: "subActions", isSignal: true, isRequired: false, transformFunction: null }, showSubActions: { classPropertyName: "showSubActions", publicName: "showSubActions", 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 }, columnGroups: { classPropertyName: "columnGroups", publicName: "columnGroups", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { optionSelected: "optionSelected", subOptionSelected: "subOptionSelected", iconAction: "iconAction", columnGroupChange: "columnGroupChange" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, viewQueries: [{ propertyName: "chips", predicate: ["statusChip"], descendants: true }], ngImport: i0, template: "<div class=\"table-wrapper\">\n <table class=\"inner-table\">\n <thead>\n <!-- Fila 1 -->\n <tr>\n\n @if (showSelection()) {\n <th class=\"checkbox-header\" [attr.rowspan]=\"hasColumnGroups() ? 2 : null\">\n <label class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\">\n <input type=\"checkbox\" [checked]=\"isAllSelected()\" (change)=\"toggleAllRows($event.target.checked)\" />\n <span class=\"checkmark\"></span>\n </label>\n </th>\n }\n\n @for (col of columns(); track col.key) {\n <th (click)=\"col.sortable !== false && onSort(col)\" [class.sortable]=\"col.sortable !== false\"\n [class]=\"getAlignment(col) + ' ' + (col.headerClass || '')\" [attr.rowspan]=\"hasColumnGroups() ? 2 : null\"\n [style.maxWidth]=\"getColMaxWidth(col)\" [style.width]=\"getColWidth(col)\" [style.]\n [style.whiteSpace]=\"col.compact ? 'nowrap' : null\">\n {{ col.label }}\n\n <!-- iconos de orden opcionales -->\n @if (sortColumn() === col.key) {\n <span class=\"sort-icon\">\n {{ sortDirection() === 'asc' ? '\u25B2' : '\u25BC' }}\n </span>\n }\n </th>\n }\n\n <!-- headers de grupo (colspan = n\u00FAmero de sub-columnas) -->\n @for (group of columnGroups(); track group.groupLabel) {\n <th class=\"column-group-header\" [attr.colspan]=\"group.columns.length\">\n {{ group.groupLabel }}\n </th>\n }\n\n <!-- columna para acciones -->\n @if (showActions()) {\n <th class=\"actions-header\" [attr.rowspan]=\"hasColumnGroups() ? 2 : null\">Acciones</th>\n }\n </tr>\n\n <!-- Fila 2: sub-headers de grupo (solo si hay groups) -->\n @if (hasColumnGroups()) {\n <tr>\n @for (group of columnGroups(); track group.groupLabel) {\n @for (subCol of group.columns; track subCol.key) {\n <th class=\"column-group-sub-header\">{{ subCol.label }}</th>\n }\n }\n </tr>\n }\n </thead>\n\n <tbody>\n @for (row of sortedData(); track row['id']) {\n <tr class=\"parent-row\"\n [class.expandable]=\"isRowExpandable()(row)\"\n [class.expanded]=\"isExpanded(row)\"\n [class.selected]=\"isRowSelected(row)\"\n (click)=\"toggleRowExpand(row, $event)\">\n\n @if (showSelection()) {\n <td class=\"checkbox-cell\">\n <label class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\">\n <input type=\"checkbox\" [checked]=\"isRowSelected(row)\" (change)=\"toggleRow(row, $event.target.checked)\" />\n <span class=\"checkmark\"></span>\n </label>\n </td>\n }\n\n @for (col of columns(); track col.key) {\n <td [class]=\"getAlignment(col) + ' ' + (col.cellClass ? col.cellClass(row) : '')\"\n [style.maxWidth]=\"getColMaxWidth(col)\" [style.width]=\"getColWidth(col)\"\n [style.whiteSpace]=\"col.compact ? 'nowrap' : null\">\n @if (col.type === 'status') { @let style =\n getStatusStyle(row[col.key]);\n <span #statusChip class=\"status-chip\" [style.background-color]=\"style.bg\" [style.color]=\"style.color\">\n {{ getStatusLabel(row[col.key]) }}\n </span>\n\n } @else if (col.type === 'icon-button') {\n\n <button (click)=\"onIconColumnClick(col, row, $event)\">\n <span class=\"icon\" [class]=\"col.icon\"></span>\n </button>\n } @else if (col.type === 'grade') {\n @let style = getGradeStyle(row[col.key]);\n <span class=\"status-chip\" [style.background-color]=\"style.bg\" [style.color]=\"style.color\">\n {{ formatValue(col, row[col.key]) }}\n </span>\n } @else {\n {{ formatValue(col, row[col.key]) }}\n\n }\n </td>\n }\n\n <!-- Celdas de grupo -->\n @for (group of columnGroups(); track group.groupLabel) {\n @for (subCol of group.columns; track subCol.key) {\n <td class=\"column-group-cell\">\n @if (!subCol.type || subCol.type === 'checkbox') {\n <label class=\"custom-checkbox\"\n [class.custom-checkbox--file]=\"hasCheckboxFile(subCol, row)\"\n (click)=\"onGroupCheckboxClick(subCol, row, $event)\">\n <input type=\"checkbox\" disabled [checked]=\"row[subCol.key]\" />\n <span class=\"checkmark\"></span>\n </label>\n } @else if (subCol.type === 'number') {\n {{ row[subCol.key] }}\n } @else if (subCol.type === 'percentage') {\n {{ row[subCol.key] }}%\n } @else if (subCol.type === 'icon-button') {\n <button (click)=\"onGroupIconClick(subCol, row, $event)\">\n <span class=\"icon\" [class]=\"subCol.icon\"></span>\n </button>\n }\n </td>\n }\n }\n\n <!-- Celda de acciones -->\n @if (showActions()) {\n <td class=\"acciones-cell\" [style.whiteSpace]=\"'nowrap'\">\n <div class=\"menu-acciones\">\n <button class=\"icon-button\" (click)=\"openModal(row); $event.stopPropagation()\">\n <div class=\"content\">\n <div class=\"state-layer\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"more-vert\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"\n fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <circle cx=\"12\" cy=\"5\" r=\"1\" />\n <circle cx=\"12\" cy=\"12\" r=\"1\" />\n <circle cx=\"12\" cy=\"19\" r=\"1\" />\n </svg>\n </div>\n </div>\n </button>\n @if(selectedRow()?.['id'] === row['id']){\n <div class=\"modal-options-table\" (click)=\"$event.stopPropagation()\">\n <div class=\"modal-content-table\">\n <ul>\n @for (option of getActionsForRow(row); track $index) {\n <li class=\"option-item-table\" [style.color]=\"getActionColor(option)\"\n (click)=\"onOptionClick(option, row)\">\n <span class=\"icon\" [class]=\"option.icon\"></span>\n <span class=\"label\">{{ option.label }}</span>\n </li>\n }\n </ul>\n </div>\n </div>\n }\n </div>\n </td>\n }\n </tr>\n <!-- Subfilas (solo si es expandible y est\u00E1 expandida) -->\n @if (isRowExpandable()(row) && isExpanded(row)) {\n <tr class=\"child-row child-header-row\">\n <td class=\"child-cell-full\"\n [attr.colspan]=\"totalColspan()\">\n <div class=\"child-grid\">\n @for (subCol of subColumns(); track subCol.key) {\n <div class=\"child-item\">\n <span class=\"child-label\">{{ subCol.label }}</span>\n </div>\n }\n @if (showSubActions()) {\n <div class=\"child-item child-actions-header\">\n <span class=\"child-label\">Acciones</span>\n </div>\n }\n </div>\n </td>\n </tr>\n\n @for (child of getChildRows(row); track child['id']) {\n <tr class=\"child-row\">\n <td class=\"child-cell-full\" [attr.colspan]=\"totalColspan()\">\n <div class=\"child-grid\">\n @for (subCol of subColumns(); track subCol.key) {\n <div class=\"child-item\">\n\n @if (subCol.type === 'status') {\n @let style = getStatusStyle(child[subCol.key]);\n <span class=\"status-chip child-status-chip\" [style.background-color]=\"style.bg\"\n [style.color]=\"style.color\">\n {{ getStatusLabel(child[subCol.key]) }}\n </span>\n } @else {\n <span class=\"child-value\">\n {{ formatValue(subCol, child[subCol.key]) }}\n </span>\n }\n\n </div>\n }\n @if (showSubActions()) {\n <div class=\"child-item child-actions-cell\">\n <div class=\"menu-acciones\">\n <button class=\"icon-button\" (click)=\"openSubModal(child, $event)\">\n <div class=\"content\">\n <div class=\"state-layer\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"more-vert\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"\n fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <circle cx=\"12\" cy=\"5\" r=\"1\" />\n <circle cx=\"12\" cy=\"12\" r=\"1\" />\n <circle cx=\"12\" cy=\"19\" r=\"1\" />\n </svg>\n </div>\n </div>\n </button>\n @if(selectedChildRow()?.['id'] === child['id']){\n <div class=\"modal-options-table\" (click)=\"$event.stopPropagation()\">\n <div class=\"modal-content-table\">\n <ul>\n @for (option of getActionsForChildRow(child); track $index) {\n <li class=\"option-item-table\" [style.color]=\"getActionColor(option)\"\n (click)=\"onSubOptionClick(option, child)\">\n <span class=\"icon\" [class]=\"option.icon\"></span>\n <span class=\"label\">{{ option.label }}</span>\n </li>\n }\n </ul>\n </div>\n </div>\n }\n </div>\n </div>\n }\n </div>\n </td>\n </tr>\n }\n }\n }\n @if (showTotals()) {\n <tr class=\"total-row\">\n \n <!-- checkbox -->\n @if (showSelection()) {\n <td class=\"checkbox-cell\"></td>\n }\n \n @for (col of columns(); track col.key) {\n <td [class]=\"getAlignment(col)\">\n \n @if (col.type === 'money' && col.totalizable) {\n {{ formatValue(col, getMoneyTotal(col)) }}\n } @else if (col === columns()[0]) {\n <strong>Total</strong>\n }\n \n </td>\n }\n\n <!-- celdas vac\u00EDas para sub-columnas de grupo -->\n @for (group of columnGroups(); track group.groupLabel) {\n @for (subCol of group.columns; track subCol.key) {\n <td></td>\n }\n }\n \n @if (showActions()) {\n <td></td>\n }\n \n </tr>\n }\n\n <!-- Fila de leyenda (solo si hay columnGroups) -->\n @for (group of columnGroups(); track group.groupLabel) {\n <tr class=\"legend-row\">\n <td class=\"legend-cell\" [attr.colspan]=\"totalColspan()\">\n <span class=\"legend-title\">{{ group.groupLabel | uppercase }}:</span>\n @for (col of group.columns; track col.key; let last = $last) {\n <span class=\"legend-item\">{{ col.label }}:\n {{ col.description }}{{ last ? '' : ' \u00B7 ' }}</span>\n }\n </td>\n </tr>\n }\n \n </tbody>\n </table>\n</div>", styles: [".table-wrapper{width:100%;max-width:100%;border-radius:20px;border:1px solid #c7c7ad}.inner-table{width:100%;max-width:100%;table-layout:auto;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:center;padding:8px 12px;font-weight:600;color:#3a3a3a;text-transform:uppercase;overflow-wrap:anywhere;word-break:break-word;white-space:pre-line}.inner-table td{padding:8px 12px;color:#4a4a4a;border-top:1px solid #c7c7ad;overflow-wrap:anywhere;word-break:break-word}.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}.custom-checkbox--file{cursor:pointer}.custom-checkbox--file .checkmark{box-shadow:0 0 0 2px #59630033}.custom-checkbox--file:hover .checkmark{box-shadow:0 0 0 3px #59630059}.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:inline-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}.option-item-table .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>')}.icon-logout{-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 stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2\"/><path d=\"M9 12h12l-3 -3\"/><path d=\"M18 15l3 -3\"/></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 stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2\"/><path d=\"M9 12h12l-3 -3\"/><path d=\"M18 15l3 -3\"/></svg>')}.icon-export{-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 stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M12.5 21h-7.5a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v7.5\"/><path d=\"M3 10h18\"/><path d=\"M10 3v18\"/><path d=\"M16 19h6\"/><path d=\"M19 16l3 3l-3 3\"/></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 stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M12.5 21h-7.5a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v7.5\"/><path d=\"M3 10h18\"/><path d=\"M10 3v18\"/><path d=\"M16 19h6\"/><path d=\"M19 16l3 3l-3 3\"/></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}.column-group-header{text-align:center;padding:4px 8px}.column-group-sub-header{text-align:center;padding:4px 6px;font-size:12px;font-weight:700;white-space:nowrap}.column-group-sub-header:first-child{border-radius:0}.column-group-sub-header:last-child{border-radius:0}.column-group-cell{text-align:center;vertical-align:middle;padding:4px 6px}.legend-row td{border-top:1px solid #c7c7ad}.legend-cell{padding:10px 16px;font-size:12px;color:#5a5a5a;font-style:italic}.legend-title{font-weight:700;font-style:italic;color:#3a3a3a;margin-right:4px}.legend-item{color:#5a5a5a}.legend-row:last-child td{border-bottom-left-radius:20px;border-bottom-right-radius:20px}.inner-table tbody tr.total-row:has(+.legend-row) td:first-child{border-bottom-left-radius:0}.inner-table tbody tr.total-row:has(+.legend-row) td:last-child{border-bottom-right-radius:0}.cell-prev-changed{background-color:#ffe5e5!important;color:#ba1a1a!important}.cell-curr-changed{background-color:#c6f6c1!important;color:#006d2f!important}.header-prev{color:#ba1a1a!important}.header-curr{color:#006d2f!important}\n"], dependencies: [{ kind: "pipe", type: UpperCasePipe, name: "uppercase" }] });
|
|
599
599
|
}
|
|
600
600
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Table, decorators: [{
|
|
601
601
|
type: Component,
|
|
602
|
-
args: [{ selector: 'lib-table', imports: [UpperCasePipe], standalone: true, template: "<div class=\"table-wrapper\">\n <table class=\"inner-table\">\n <thead>\n <!-- Fila 1 -->\n <tr>\n\n @if (showSelection()) {\n <th class=\"checkbox-header\" [attr.rowspan]=\"hasColumnGroups() ? 2 : null\">\n <label class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\">\n <input type=\"checkbox\" [checked]=\"isAllSelected()\" (change)=\"toggleAllRows($event.target.checked)\" />\n <span class=\"checkmark\"></span>\n </label>\n </th>\n }\n\n @for (col of columns(); track col.key) {\n <th (click)=\"col.sortable !== false && onSort(col)\" [class.sortable]=\"col.sortable !== false\"\n [class]=\"getAlignment(col) + ' ' + (col.headerClass || '')\" [attr.rowspan]=\"hasColumnGroups() ? 2 : null\"\n [style.maxWidth]=\"getColMaxWidth(col)\" [style.width]=\"getColWidth(col)\"\n [style.whiteSpace]=\"col.compact ? 'nowrap' : null\">\n {{ col.label }}\n\n <!-- iconos de orden opcionales -->\n @if (sortColumn() === col.key) {\n <span class=\"sort-icon\">\n {{ sortDirection() === 'asc' ? '\u25B2' : '\u25BC' }}\n </span>\n }\n </th>\n }\n\n <!-- headers de grupo (colspan = n\u00FAmero de sub-columnas) -->\n @for (group of columnGroups(); track group.groupLabel) {\n <th class=\"column-group-header\" [attr.colspan]=\"group.columns.length\">\n {{ group.groupLabel }}\n </th>\n }\n\n <!-- columna para acciones -->\n @if (showActions()) {\n <th class=\"actions-header\" [attr.rowspan]=\"hasColumnGroups() ? 2 : null\">Acciones</th>\n }\n </tr>\n\n <!-- Fila 2: sub-headers de grupo (solo si hay groups) -->\n @if (hasColumnGroups()) {\n <tr>\n @for (group of columnGroups(); track group.groupLabel) {\n @for (subCol of group.columns; track subCol.key) {\n <th class=\"column-group-sub-header\">{{ subCol.label }}</th>\n }\n }\n </tr>\n }\n </thead>\n\n <tbody>\n @for (row of sortedData(); track row['id']) {\n <tr class=\"parent-row\"\n [class.expandable]=\"isRowExpandable()(row)\"\n [class.expanded]=\"isExpanded(row)\"\n [class.selected]=\"isRowSelected(row)\"\n (click)=\"toggleRowExpand(row, $event)\">\n\n @if (showSelection()) {\n <td class=\"checkbox-cell\">\n <label class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\">\n <input type=\"checkbox\" [checked]=\"isRowSelected(row)\" (change)=\"toggleRow(row, $event.target.checked)\" />\n <span class=\"checkmark\"></span>\n </label>\n </td>\n }\n\n @for (col of columns(); track col.key) {\n <td [class]=\"getAlignment(col) + ' ' + (col.cellClass ? col.cellClass(row) : '')\"\n [style.maxWidth]=\"getColMaxWidth(col)\" [style.width]=\"getColWidth(col)\"\n [style.whiteSpace]=\"col.compact ? 'nowrap' : null\">\n @if (col.type === 'status') { @let style =\n getStatusStyle(row[col.key]);\n <span #statusChip class=\"status-chip\" [style.background-color]=\"style.bg\" [style.color]=\"style.color\">\n {{ getStatusLabel(row[col.key]) }}\n </span>\n\n } @else if (col.type === 'icon-button') {\n\n <button (click)=\"onIconColumnClick(col, row, $event)\">\n <span class=\"icon\" [class]=\"col.icon\"></span>\n </button>\n } @else if (col.type === 'grade') {\n @let style = getGradeStyle(row[col.key]);\n <span class=\"status-chip\" [style.background-color]=\"style.bg\" [style.color]=\"style.color\">\n {{ formatValue(col, row[col.key]) }}\n </span>\n } @else {\n {{ formatValue(col, row[col.key]) }}\n\n }\n </td>\n }\n\n <!-- Celdas de grupo -->\n @for (group of columnGroups(); track group.groupLabel) {\n @for (subCol of group.columns; track subCol.key) {\n <td class=\"column-group-cell\">\n @if (!subCol.type || subCol.type === 'checkbox') {\n <label class=\"custom-checkbox\"\n [class.custom-checkbox--file]=\"hasCheckboxFile(subCol, row)\"\n (click)=\"onGroupCheckboxClick(subCol, row, $event)\">\n <input type=\"checkbox\" disabled [checked]=\"row[subCol.key]\" />\n <span class=\"checkmark\"></span>\n </label>\n } @else if (subCol.type === 'number') {\n {{ row[subCol.key] }}\n } @else if (subCol.type === 'percentage') {\n {{ row[subCol.key] }}%\n } @else if (subCol.type === 'icon-button') {\n <button (click)=\"onGroupIconClick(subCol, row, $event)\">\n <span class=\"icon\" [class]=\"subCol.icon\"></span>\n </button>\n }\n </td>\n }\n }\n\n <!-- Celda de acciones -->\n @if (showActions()) {\n <td class=\"acciones-cell\" [style.whiteSpace]=\"'nowrap'\">\n <div class=\"menu-acciones\">\n <button class=\"icon-button\" (click)=\"openModal(row); $event.stopPropagation()\">\n <div class=\"content\">\n <div class=\"state-layer\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"more-vert\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"\n fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <circle cx=\"12\" cy=\"5\" r=\"1\" />\n <circle cx=\"12\" cy=\"12\" r=\"1\" />\n <circle cx=\"12\" cy=\"19\" r=\"1\" />\n </svg>\n </div>\n </div>\n </button>\n @if(selectedRow()?.['id'] === row['id']){\n <div class=\"modal-options-table\" (click)=\"$event.stopPropagation()\">\n <div class=\"modal-content-table\">\n <ul>\n @for (option of getActionsForRow(row); track $index) {\n <li class=\"option-item-table\" [style.color]=\"getActionColor(option)\"\n (click)=\"onOptionClick(option, row)\">\n <span class=\"icon\" [class]=\"option.icon\"></span>\n <span class=\"label\">{{ option.label }}</span>\n </li>\n }\n </ul>\n </div>\n </div>\n }\n </div>\n </td>\n }\n </tr>\n <!-- Subfilas (solo si es expandible y est\u00E1 expandida) -->\n @if (isRowExpandable()(row) && isExpanded(row)) {\n <tr class=\"child-row child-header-row\">\n <td class=\"child-cell-full\"\n [attr.colspan]=\"totalColspan()\">\n <div class=\"child-grid\">\n @for (subCol of subColumns(); track subCol.key) {\n <div class=\"child-item\">\n <span class=\"child-label\">{{ subCol.label }}</span>\n </div>\n }\n @if (showSubActions()) {\n <div class=\"child-item child-actions-header\">\n <span class=\"child-label\">Acciones</span>\n </div>\n }\n </div>\n </td>\n </tr>\n\n @for (child of getChildRows(row); track child['id']) {\n <tr class=\"child-row\">\n <td class=\"child-cell-full\" [attr.colspan]=\"totalColspan()\">\n <div class=\"child-grid\">\n @for (subCol of subColumns(); track subCol.key) {\n <div class=\"child-item\">\n\n @if (subCol.type === 'status') {\n @let style = getStatusStyle(child[subCol.key]);\n <span class=\"status-chip child-status-chip\" [style.background-color]=\"style.bg\"\n [style.color]=\"style.color\">\n {{ getStatusLabel(child[subCol.key]) }}\n </span>\n } @else {\n <span class=\"child-value\">\n {{ formatValue(subCol, child[subCol.key]) }}\n </span>\n }\n\n </div>\n }\n @if (showSubActions()) {\n <div class=\"child-item child-actions-cell\">\n <div class=\"menu-acciones\">\n <button class=\"icon-button\" (click)=\"openSubModal(child, $event)\">\n <div class=\"content\">\n <div class=\"state-layer\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"more-vert\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"\n fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <circle cx=\"12\" cy=\"5\" r=\"1\" />\n <circle cx=\"12\" cy=\"12\" r=\"1\" />\n <circle cx=\"12\" cy=\"19\" r=\"1\" />\n </svg>\n </div>\n </div>\n </button>\n @if(selectedChildRow()?.['id'] === child['id']){\n <div class=\"modal-options-table\" (click)=\"$event.stopPropagation()\">\n <div class=\"modal-content-table\">\n <ul>\n @for (option of getActionsForChildRow(child); track $index) {\n <li class=\"option-item-table\" [style.color]=\"getActionColor(option)\"\n (click)=\"onSubOptionClick(option, child)\">\n <span class=\"icon\" [class]=\"option.icon\"></span>\n <span class=\"label\">{{ option.label }}</span>\n </li>\n }\n </ul>\n </div>\n </div>\n }\n </div>\n </div>\n }\n </div>\n </td>\n </tr>\n }\n }\n }\n @if (showTotals()) {\n <tr class=\"total-row\">\n \n <!-- checkbox -->\n @if (showSelection()) {\n <td class=\"checkbox-cell\"></td>\n }\n \n @for (col of columns(); track col.key) {\n <td [class]=\"getAlignment(col)\">\n \n @if (col.type === 'money' && col.totalizable) {\n {{ formatValue(col, getMoneyTotal(col)) }}\n } @else if (col === columns()[0]) {\n <strong>Total</strong>\n }\n \n </td>\n }\n\n <!-- celdas vac\u00EDas para sub-columnas de grupo -->\n @for (group of columnGroups(); track group.groupLabel) {\n @for (subCol of group.columns; track subCol.key) {\n <td></td>\n }\n }\n \n @if (showActions()) {\n <td></td>\n }\n \n </tr>\n }\n\n <!-- Fila de leyenda (solo si hay columnGroups) -->\n @for (group of columnGroups(); track group.groupLabel) {\n <tr class=\"legend-row\">\n <td class=\"legend-cell\" [attr.colspan]=\"totalColspan()\">\n <span class=\"legend-title\">{{ group.groupLabel | uppercase }}:</span>\n @for (col of group.columns; track col.key; let last = $last) {\n <span class=\"legend-item\">{{ col.label }}:\n {{ col.description }}{{ last ? '' : ' \u00B7 ' }}</span>\n }\n </td>\n </tr>\n }\n \n </tbody>\n </table>\n</div>", styles: [".table-wrapper{width:100%;max-width:100%;border-radius:20px;border:1px solid #c7c7ad}.inner-table{width:100%;max-width:100%;table-layout:auto;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:center;padding:8px 12px;font-weight:600;color:#3a3a3a;text-transform:uppercase;overflow-wrap:anywhere;word-break:break-word}.inner-table td{padding:8px 12px;color:#4a4a4a;border-top:1px solid #c7c7ad;overflow-wrap:anywhere;word-break:break-word}.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}.custom-checkbox--file{cursor:pointer}.custom-checkbox--file .checkmark{box-shadow:0 0 0 2px #59630033}.custom-checkbox--file:hover .checkmark{box-shadow:0 0 0 3px #59630059}.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:inline-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}.option-item-table .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>')}.icon-logout{-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 stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2\"/><path d=\"M9 12h12l-3 -3\"/><path d=\"M18 15l3 -3\"/></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 stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2\"/><path d=\"M9 12h12l-3 -3\"/><path d=\"M18 15l3 -3\"/></svg>')}.icon-export{-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 stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M12.5 21h-7.5a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v7.5\"/><path d=\"M3 10h18\"/><path d=\"M10 3v18\"/><path d=\"M16 19h6\"/><path d=\"M19 16l3 3l-3 3\"/></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 stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M12.5 21h-7.5a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v7.5\"/><path d=\"M3 10h18\"/><path d=\"M10 3v18\"/><path d=\"M16 19h6\"/><path d=\"M19 16l3 3l-3 3\"/></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}.column-group-header{text-align:center;padding:4px 8px}.column-group-sub-header{text-align:center;padding:4px 6px;font-size:12px;font-weight:700;white-space:nowrap}.column-group-sub-header:first-child{border-radius:0}.column-group-sub-header:last-child{border-radius:0}.column-group-cell{text-align:center;vertical-align:middle;padding:4px 6px}.legend-row td{border-top:1px solid #c7c7ad}.legend-cell{padding:10px 16px;font-size:12px;color:#5a5a5a;font-style:italic}.legend-title{font-weight:700;font-style:italic;color:#3a3a3a;margin-right:4px}.legend-item{color:#5a5a5a}.legend-row:last-child td{border-bottom-left-radius:20px;border-bottom-right-radius:20px}.inner-table tbody tr.total-row:has(+.legend-row) td:first-child{border-bottom-left-radius:0}.inner-table tbody tr.total-row:has(+.legend-row) td:last-child{border-bottom-right-radius:0}.cell-prev-changed{background-color:#ffe5e5!important;color:#ba1a1a!important}.cell-curr-changed{background-color:#c6f6c1!important;color:#006d2f!important}.header-prev{color:#ba1a1a!important}.header-curr{color:#006d2f!important}\n"] }]
|
|
602
|
+
args: [{ selector: 'lib-table', imports: [UpperCasePipe], standalone: true, template: "<div class=\"table-wrapper\">\n <table class=\"inner-table\">\n <thead>\n <!-- Fila 1 -->\n <tr>\n\n @if (showSelection()) {\n <th class=\"checkbox-header\" [attr.rowspan]=\"hasColumnGroups() ? 2 : null\">\n <label class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\">\n <input type=\"checkbox\" [checked]=\"isAllSelected()\" (change)=\"toggleAllRows($event.target.checked)\" />\n <span class=\"checkmark\"></span>\n </label>\n </th>\n }\n\n @for (col of columns(); track col.key) {\n <th (click)=\"col.sortable !== false && onSort(col)\" [class.sortable]=\"col.sortable !== false\"\n [class]=\"getAlignment(col) + ' ' + (col.headerClass || '')\" [attr.rowspan]=\"hasColumnGroups() ? 2 : null\"\n [style.maxWidth]=\"getColMaxWidth(col)\" [style.width]=\"getColWidth(col)\" [style.]\n [style.whiteSpace]=\"col.compact ? 'nowrap' : null\">\n {{ col.label }}\n\n <!-- iconos de orden opcionales -->\n @if (sortColumn() === col.key) {\n <span class=\"sort-icon\">\n {{ sortDirection() === 'asc' ? '\u25B2' : '\u25BC' }}\n </span>\n }\n </th>\n }\n\n <!-- headers de grupo (colspan = n\u00FAmero de sub-columnas) -->\n @for (group of columnGroups(); track group.groupLabel) {\n <th class=\"column-group-header\" [attr.colspan]=\"group.columns.length\">\n {{ group.groupLabel }}\n </th>\n }\n\n <!-- columna para acciones -->\n @if (showActions()) {\n <th class=\"actions-header\" [attr.rowspan]=\"hasColumnGroups() ? 2 : null\">Acciones</th>\n }\n </tr>\n\n <!-- Fila 2: sub-headers de grupo (solo si hay groups) -->\n @if (hasColumnGroups()) {\n <tr>\n @for (group of columnGroups(); track group.groupLabel) {\n @for (subCol of group.columns; track subCol.key) {\n <th class=\"column-group-sub-header\">{{ subCol.label }}</th>\n }\n }\n </tr>\n }\n </thead>\n\n <tbody>\n @for (row of sortedData(); track row['id']) {\n <tr class=\"parent-row\"\n [class.expandable]=\"isRowExpandable()(row)\"\n [class.expanded]=\"isExpanded(row)\"\n [class.selected]=\"isRowSelected(row)\"\n (click)=\"toggleRowExpand(row, $event)\">\n\n @if (showSelection()) {\n <td class=\"checkbox-cell\">\n <label class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\">\n <input type=\"checkbox\" [checked]=\"isRowSelected(row)\" (change)=\"toggleRow(row, $event.target.checked)\" />\n <span class=\"checkmark\"></span>\n </label>\n </td>\n }\n\n @for (col of columns(); track col.key) {\n <td [class]=\"getAlignment(col) + ' ' + (col.cellClass ? col.cellClass(row) : '')\"\n [style.maxWidth]=\"getColMaxWidth(col)\" [style.width]=\"getColWidth(col)\"\n [style.whiteSpace]=\"col.compact ? 'nowrap' : null\">\n @if (col.type === 'status') { @let style =\n getStatusStyle(row[col.key]);\n <span #statusChip class=\"status-chip\" [style.background-color]=\"style.bg\" [style.color]=\"style.color\">\n {{ getStatusLabel(row[col.key]) }}\n </span>\n\n } @else if (col.type === 'icon-button') {\n\n <button (click)=\"onIconColumnClick(col, row, $event)\">\n <span class=\"icon\" [class]=\"col.icon\"></span>\n </button>\n } @else if (col.type === 'grade') {\n @let style = getGradeStyle(row[col.key]);\n <span class=\"status-chip\" [style.background-color]=\"style.bg\" [style.color]=\"style.color\">\n {{ formatValue(col, row[col.key]) }}\n </span>\n } @else {\n {{ formatValue(col, row[col.key]) }}\n\n }\n </td>\n }\n\n <!-- Celdas de grupo -->\n @for (group of columnGroups(); track group.groupLabel) {\n @for (subCol of group.columns; track subCol.key) {\n <td class=\"column-group-cell\">\n @if (!subCol.type || subCol.type === 'checkbox') {\n <label class=\"custom-checkbox\"\n [class.custom-checkbox--file]=\"hasCheckboxFile(subCol, row)\"\n (click)=\"onGroupCheckboxClick(subCol, row, $event)\">\n <input type=\"checkbox\" disabled [checked]=\"row[subCol.key]\" />\n <span class=\"checkmark\"></span>\n </label>\n } @else if (subCol.type === 'number') {\n {{ row[subCol.key] }}\n } @else if (subCol.type === 'percentage') {\n {{ row[subCol.key] }}%\n } @else if (subCol.type === 'icon-button') {\n <button (click)=\"onGroupIconClick(subCol, row, $event)\">\n <span class=\"icon\" [class]=\"subCol.icon\"></span>\n </button>\n }\n </td>\n }\n }\n\n <!-- Celda de acciones -->\n @if (showActions()) {\n <td class=\"acciones-cell\" [style.whiteSpace]=\"'nowrap'\">\n <div class=\"menu-acciones\">\n <button class=\"icon-button\" (click)=\"openModal(row); $event.stopPropagation()\">\n <div class=\"content\">\n <div class=\"state-layer\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"more-vert\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"\n fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <circle cx=\"12\" cy=\"5\" r=\"1\" />\n <circle cx=\"12\" cy=\"12\" r=\"1\" />\n <circle cx=\"12\" cy=\"19\" r=\"1\" />\n </svg>\n </div>\n </div>\n </button>\n @if(selectedRow()?.['id'] === row['id']){\n <div class=\"modal-options-table\" (click)=\"$event.stopPropagation()\">\n <div class=\"modal-content-table\">\n <ul>\n @for (option of getActionsForRow(row); track $index) {\n <li class=\"option-item-table\" [style.color]=\"getActionColor(option)\"\n (click)=\"onOptionClick(option, row)\">\n <span class=\"icon\" [class]=\"option.icon\"></span>\n <span class=\"label\">{{ option.label }}</span>\n </li>\n }\n </ul>\n </div>\n </div>\n }\n </div>\n </td>\n }\n </tr>\n <!-- Subfilas (solo si es expandible y est\u00E1 expandida) -->\n @if (isRowExpandable()(row) && isExpanded(row)) {\n <tr class=\"child-row child-header-row\">\n <td class=\"child-cell-full\"\n [attr.colspan]=\"totalColspan()\">\n <div class=\"child-grid\">\n @for (subCol of subColumns(); track subCol.key) {\n <div class=\"child-item\">\n <span class=\"child-label\">{{ subCol.label }}</span>\n </div>\n }\n @if (showSubActions()) {\n <div class=\"child-item child-actions-header\">\n <span class=\"child-label\">Acciones</span>\n </div>\n }\n </div>\n </td>\n </tr>\n\n @for (child of getChildRows(row); track child['id']) {\n <tr class=\"child-row\">\n <td class=\"child-cell-full\" [attr.colspan]=\"totalColspan()\">\n <div class=\"child-grid\">\n @for (subCol of subColumns(); track subCol.key) {\n <div class=\"child-item\">\n\n @if (subCol.type === 'status') {\n @let style = getStatusStyle(child[subCol.key]);\n <span class=\"status-chip child-status-chip\" [style.background-color]=\"style.bg\"\n [style.color]=\"style.color\">\n {{ getStatusLabel(child[subCol.key]) }}\n </span>\n } @else {\n <span class=\"child-value\">\n {{ formatValue(subCol, child[subCol.key]) }}\n </span>\n }\n\n </div>\n }\n @if (showSubActions()) {\n <div class=\"child-item child-actions-cell\">\n <div class=\"menu-acciones\">\n <button class=\"icon-button\" (click)=\"openSubModal(child, $event)\">\n <div class=\"content\">\n <div class=\"state-layer\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"more-vert\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"\n fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <circle cx=\"12\" cy=\"5\" r=\"1\" />\n <circle cx=\"12\" cy=\"12\" r=\"1\" />\n <circle cx=\"12\" cy=\"19\" r=\"1\" />\n </svg>\n </div>\n </div>\n </button>\n @if(selectedChildRow()?.['id'] === child['id']){\n <div class=\"modal-options-table\" (click)=\"$event.stopPropagation()\">\n <div class=\"modal-content-table\">\n <ul>\n @for (option of getActionsForChildRow(child); track $index) {\n <li class=\"option-item-table\" [style.color]=\"getActionColor(option)\"\n (click)=\"onSubOptionClick(option, child)\">\n <span class=\"icon\" [class]=\"option.icon\"></span>\n <span class=\"label\">{{ option.label }}</span>\n </li>\n }\n </ul>\n </div>\n </div>\n }\n </div>\n </div>\n }\n </div>\n </td>\n </tr>\n }\n }\n }\n @if (showTotals()) {\n <tr class=\"total-row\">\n \n <!-- checkbox -->\n @if (showSelection()) {\n <td class=\"checkbox-cell\"></td>\n }\n \n @for (col of columns(); track col.key) {\n <td [class]=\"getAlignment(col)\">\n \n @if (col.type === 'money' && col.totalizable) {\n {{ formatValue(col, getMoneyTotal(col)) }}\n } @else if (col === columns()[0]) {\n <strong>Total</strong>\n }\n \n </td>\n }\n\n <!-- celdas vac\u00EDas para sub-columnas de grupo -->\n @for (group of columnGroups(); track group.groupLabel) {\n @for (subCol of group.columns; track subCol.key) {\n <td></td>\n }\n }\n \n @if (showActions()) {\n <td></td>\n }\n \n </tr>\n }\n\n <!-- Fila de leyenda (solo si hay columnGroups) -->\n @for (group of columnGroups(); track group.groupLabel) {\n <tr class=\"legend-row\">\n <td class=\"legend-cell\" [attr.colspan]=\"totalColspan()\">\n <span class=\"legend-title\">{{ group.groupLabel | uppercase }}:</span>\n @for (col of group.columns; track col.key; let last = $last) {\n <span class=\"legend-item\">{{ col.label }}:\n {{ col.description }}{{ last ? '' : ' \u00B7 ' }}</span>\n }\n </td>\n </tr>\n }\n \n </tbody>\n </table>\n</div>", styles: [".table-wrapper{width:100%;max-width:100%;border-radius:20px;border:1px solid #c7c7ad}.inner-table{width:100%;max-width:100%;table-layout:auto;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:center;padding:8px 12px;font-weight:600;color:#3a3a3a;text-transform:uppercase;overflow-wrap:anywhere;word-break:break-word;white-space:pre-line}.inner-table td{padding:8px 12px;color:#4a4a4a;border-top:1px solid #c7c7ad;overflow-wrap:anywhere;word-break:break-word}.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}.custom-checkbox--file{cursor:pointer}.custom-checkbox--file .checkmark{box-shadow:0 0 0 2px #59630033}.custom-checkbox--file:hover .checkmark{box-shadow:0 0 0 3px #59630059}.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:inline-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}.option-item-table .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>')}.icon-logout{-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 stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2\"/><path d=\"M9 12h12l-3 -3\"/><path d=\"M18 15l3 -3\"/></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 stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2\"/><path d=\"M9 12h12l-3 -3\"/><path d=\"M18 15l3 -3\"/></svg>')}.icon-export{-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 stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M12.5 21h-7.5a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v7.5\"/><path d=\"M3 10h18\"/><path d=\"M10 3v18\"/><path d=\"M16 19h6\"/><path d=\"M19 16l3 3l-3 3\"/></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 stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M12.5 21h-7.5a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v7.5\"/><path d=\"M3 10h18\"/><path d=\"M10 3v18\"/><path d=\"M16 19h6\"/><path d=\"M19 16l3 3l-3 3\"/></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}.column-group-header{text-align:center;padding:4px 8px}.column-group-sub-header{text-align:center;padding:4px 6px;font-size:12px;font-weight:700;white-space:nowrap}.column-group-sub-header:first-child{border-radius:0}.column-group-sub-header:last-child{border-radius:0}.column-group-cell{text-align:center;vertical-align:middle;padding:4px 6px}.legend-row td{border-top:1px solid #c7c7ad}.legend-cell{padding:10px 16px;font-size:12px;color:#5a5a5a;font-style:italic}.legend-title{font-weight:700;font-style:italic;color:#3a3a3a;margin-right:4px}.legend-item{color:#5a5a5a}.legend-row:last-child td{border-bottom-left-radius:20px;border-bottom-right-radius:20px}.inner-table tbody tr.total-row:has(+.legend-row) td:first-child{border-bottom-left-radius:0}.inner-table tbody tr.total-row:has(+.legend-row) td:last-child{border-bottom-right-radius:0}.cell-prev-changed{background-color:#ffe5e5!important;color:#ba1a1a!important}.cell-curr-changed{background-color:#c6f6c1!important;color:#006d2f!important}.header-prev{color:#ba1a1a!important}.header-curr{color:#006d2f!important}\n"] }]
|
|
603
603
|
}], 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"] }], subOptionSelected: [{ type: i0.Output, args: ["subOptionSelected"] }], 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 }] }], subActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "subActions", required: false }] }], showSubActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSubActions", 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 }] }], columnGroups: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnGroups", required: false }] }], columnGroupChange: [{ type: i0.Output, args: ["columnGroupChange"] }], chips: [{
|
|
604
604
|
type: ViewChildren,
|
|
605
605
|
args: ['statusChip']
|
|
@@ -1163,7 +1163,7 @@ class DateTimePicker {
|
|
|
1163
1163
|
useExisting: forwardRef(() => DateTimePicker),
|
|
1164
1164
|
multi: true,
|
|
1165
1165
|
},
|
|
1166
|
-
], ngImport: i0, template: "<div class=\"datetime-container\">\r\n <div\r\n class=\"datetime-header\"\r\n [class.active]=\"isOpen()\"\r\n [class.disabled]=\"isBlocked()\"\r\n [class.readonly]=\"isBlocked()\"\r\n (click)=\"!isBlocked() && toggle()\"\r\n (keydown)=\"!isBlocked() && onKeyDown($event)\"\r\n tabindex=\"0\"\r\n >\r\n <input\r\n type=\"text\"\r\n class=\"datetime-input\"\r\n [value]=\"displayValue()\"\r\n [placeholder]=\"placeholder()\"\r\n (input)=\"onInputChange($event)\"\r\n (click)=\"onInputClick($event)\"\r\n (focus)=\"!isBlocked() && onInputFocus()\"\r\n [disabled]=\"isDisabled()\"\r\n [readOnly]=\"readonly()\"\r\n />\r\n\r\n <div class=\"header-icons\">\r\n @if (selectedDate()) {\r\n <span\r\n class=\"clear-icon\"\r\n (click)=\"!isBlocked() && clear(); $event.stopPropagation()\"\r\n title=\"Limpiar\"\r\n >\r\n \u00D7\r\n </span>\r\n }\r\n <span class=\"arrow\" [class.open]=\"isOpen()\"></span>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n@if (isOpen()) {\r\n<div class=\"dropdown\" [class.dropdown--upward]=\"openUpward()\">\r\n <div class=\"datetime-content\">\r\n <!-- Secci\u00F3n del calendario -->\r\n <div class=\"calendar-section\">\r\n <!-- Navegaci\u00F3n del calendario -->\r\n <div class=\"calendar-nav\">\r\n <div class=\"nav-section\">\r\n <button\r\n type=\"button\"\r\n class=\"nav-btn\"\r\n (click)=\"previousYear()\"\r\n title=\"A\u00F1o anterior\"\r\n >\r\n \u2039\u2039\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"nav-btn\"\r\n (click)=\"previousMonth()\"\r\n title=\"Mes anterior\"\r\n >\r\n \u2039\r\n </button>\r\n </div>\r\n\r\n <div class=\"current-date\">{{ monthName() }} {{ currentYear() }}</div>\r\n\r\n <div class=\"nav-section\">\r\n <button\r\n type=\"button\"\r\n class=\"nav-btn\"\r\n (click)=\"nextMonth()\"\r\n title=\"Siguiente mes\"\r\n >\r\n \u203A\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"nav-btn\"\r\n (click)=\"nextYear()\"\r\n title=\"Siguiente a\u00F1o\"\r\n >\r\n \u203A\u203A\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <!-- D\u00EDas de la semana -->\r\n <div class=\"weekdays\">\r\n <div class=\"weekday\">Dom</div>\r\n <div class=\"weekday\">Lun</div>\r\n <div class=\"weekday\">Mar</div>\r\n <div class=\"weekday\">Mi\u00E9</div>\r\n <div class=\"weekday\">Jue</div>\r\n <div class=\"weekday\">Vie</div>\r\n <div class=\"weekday\">S\u00E1b</div>\r\n </div>\r\n\r\n <!-- D\u00EDas del mes -->\r\n <div class=\"calendar-grid\">\r\n @for (day of calendarDays(); track $index) {\r\n <div\r\n class=\"calendar-day\"\r\n [class.selected]=\"isDaySelected(day)\"\r\n [class.today]=\"isToday(day)\"\r\n [class.disabled]=\"isDayDisabled(day)\"\r\n [class.empty]=\"!day\"\r\n (click)=\"selectDay(day)\"\r\n >\r\n {{ day || '' }}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n <!-- Selector de tiempo (solo si mode === 'datetime') -->\r\n @if (mode() === 'datetime') {\r\n <div class=\"time-section\">\r\n <div class=\"time-header\">Horario</div>\r\n\r\n <div class=\"time-selectors\">\r\n <div class=\"time-group\">\r\n <div class=\"time-column\">\r\n <div class=\"time-label\">Hora</div>\r\n <div class=\"time-scroll\">\r\n @for (hour of hours12(); track hour.value) {\r\n <div\r\n class=\"time-option\"\r\n [class.selected]=\"hour.value === selectedHour12()\"\r\n (click)=\"setHour12(hour.value)\"\r\n >\r\n {{ hour.display }}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n <div class=\"time-separator-vertical\">:</div>\r\n\r\n <div class=\"time-column\">\r\n <div class=\"time-label\">Min</div>\r\n <div class=\"time-scroll\">\r\n @for (minute of minutes(); track minute) {\r\n <div\r\n class=\"time-option\"\r\n [class.selected]=\"minute === selectedMinute()\"\r\n (click)=\"setMinute(minute)\"\r\n >\r\n {{ minute.toString().padStart(2, '0') }}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n <div class=\"time-column\">\r\n <div class=\"time-label\">AM/PM</div>\r\n <div class=\"time-scroll ampm\">\r\n <div\r\n class=\"time-option\"\r\n [class.selected]=\"selectedAmPm() === 'AM'\"\r\n (click)=\"setAmPm('AM')\"\r\n >\r\n AM\r\n </div>\r\n <div\r\n class=\"time-option\"\r\n [class.selected]=\"selectedAmPm() === 'PM'\"\r\n (click)=\"setAmPm('PM')\"\r\n >\r\n PM\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n\r\n <!-- Botones de acci\u00F3n -->\r\n <div class=\"action-buttons\">\r\n <button type=\"button\" class=\"action-btn secondary\" (click)=\"today()\">\r\n Hoy\r\n </button>\r\n @if (mode() === 'datetime') {\r\n <button type=\"button\" class=\"action-btn primary\" (click)=\"close()\">\r\n Aceptar\r\n </button>\r\n }\r\n </div>\r\n</div>\r\n}\r\n", styles: [".datetime-container{position:relative;width:100%}.datetime-header{width:100%;border:1px solid #787861;border-radius:5px;padding:12px 15px;background-color:transparent;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:auto;transition:border-color .2s}.datetime-input{flex:1;border:none;outline:none;background:transparent;font-size:1.3rem;color:#454733;padding:0;margin:0}.datetime-input::placeholder{color:#787861;text-transform:capitalize}.datetime-input:disabled{cursor:not-allowed}.datetime-header:hover,.datetime-header:focus{outline:none;border-color:#a9a97f}.datetime-header.active{border-color:#a9a97f;outline:none}.datetime-header.disabled,.datetime-header.readonly{pointer-events:none;opacity:.6;cursor:not-allowed}.selected-text{color:#454733;font-size:1.3rem;flex:1}.selected-text.placeholder{color:#787861}.header-icons{display:flex;align-items:center;gap:8px}.clear-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center;color:#787861;font-size:1.5rem;cursor:pointer;border-radius:50%;transition:all .2s}.clear-icon:hover{background-color:#7878611a;color:#454733}.arrow{width:20px;height:20px;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='icon icon-tabler icons-tabler-outline icon-tabler-calendar-event'%3e%3cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3e%3cpath d='M4 5m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z' /%3e%3cpath d='M16 3l0 4' /%3e%3cpath d='M8 3l0 4' /%3e%3cpath d='M4 11l16 0' /%3e%3cpath d='M8 15h2v2h-2z' /%3e%3c/svg%3e\");background-repeat:no-repeat;background-size:20px;background-position:center;color:#787861;flex-shrink:0;transition:transform .2s}.arrow.open{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' class='icon icon-tabler icons-tabler-filled icon-tabler-calendar-event'%3e%3cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3e%3cpath d='M16 2a1 1 0 0 1 .993 .883l.007 .117v1h1a3 3 0 0 1 2.995 2.824l.005 .176v12a3 3 0 0 1 -2.824 2.995l-.176 .005h-12a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-12a3 3 0 0 1 2.824 -2.995l.176 -.005h1v-1a1 1 0 0 1 1.993 -.117l.007 .117v1h6v-1a1 1 0 0 1 1 -1m3 7h-14v9.625c0 .705 .386 1.286 .883 1.366l.117 .009h12c.513 0 .936 -.53 .993 -1.215l.007 -.16z' /%3e%3cpath d='M8 14h2v2h-2z' /%3e%3c/svg%3e\")}.dropdown{position:absolute;top:100%;left:0;right:0;background:#e3e3d1;border:1px solid #787861;border-top:none;border-radius:0 0 5px 5px;z-index:100000;box-shadow:0 4px 12px #00000026;min-width:400px}.dropdown--upward{top:auto;bottom:calc(100% + 20px);border-top:1px solid #787861;border-bottom:none;border-radius:5px 5px 0 0;box-shadow:0 -4px 12px #00000026}.datetime-content{display:flex}.calendar-section{flex:1;min-width:280px}.calendar-nav{display:flex;justify-content:space-between;align-items:center;padding:15px;border-bottom:1px solid rgba(120,120,97,.2)}.nav-section{display:flex;gap:5px}.nav-btn{background:none;border:none;color:#787861;cursor:pointer;font-size:1.2rem;padding:5px 10px;border-radius:3px;transition:all .2s}.nav-btn:hover{background-color:#a9a97f1a;color:#454733}.current-date{font-weight:500;color:#454733;font-size:1.1rem}.weekdays{display:grid;grid-template-columns:repeat(7,1fr);background:#7878611a}.weekday{padding:10px 5px;text-align:center;font-size:.9rem;font-weight:500;color:#787861}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr)}.calendar-day{padding:12px 5px;text-align:center;cursor:pointer;color:#454733;font-size:1rem;border-right:1px solid rgba(120,120,97,.1);border-bottom:1px solid rgba(120,120,97,.1);transition:all .2s}.calendar-day:hover:not(.disabled):not(.empty){background-color:#a9a97f33}.calendar-day.selected{background-color:#a9a97f;color:#e3e3d1;font-weight:500}.calendar-day.today:not(.selected){background-color:#a9a97f4d;font-weight:500}.calendar-day.disabled{color:#78786166;cursor:not-allowed}.calendar-day.empty{cursor:default}.calendar-day:nth-child(7n){border-right:none}.time-section{border-left:1px solid rgba(120,120,97,.2);min-width:140px;display:flex;flex-direction:column;background:#a9a97f0d}.time-header{padding:15px;border-bottom:1px solid rgba(120,120,97,.2);text-align:center;font-weight:500;color:#454733;background:#a9a97f1a}.time-selectors{display:flex;flex-direction:column;padding:15px;gap:20px;flex:1}.time-group{display:flex;align-items:center;gap:10px}.time-column{flex:1;display:flex;flex-direction:column;align-items:center}.time-label{font-size:.9rem;color:#787861;margin-bottom:10px;font-weight:500}.time-scroll{max-height:150px;overflow-y:auto;border:1px solid rgba(120,120,97,.2);border-radius:3px;width:50px;background:#a9a97f}.time-option{padding:8px 12px;text-align:center;cursor:pointer;color:#454733;font-size:1rem;transition:all .2s}.time-option:hover{background-color:#a9a97f1a}.time-option.selected{background-color:#a9a97f;color:#e3e3d1;font-weight:500}.time-separator-vertical{font-size:1.5rem;color:#787861;font-weight:700;align-self:flex-end;margin-bottom:10px}.time-scroll::-webkit-scrollbar{width:4px}.time-scroll::-webkit-scrollbar-track{background:#7878611a}.time-scroll::-webkit-scrollbar-thumb{background:#787861;border-radius:2px}.time-scroll::-webkit-scrollbar-thumb:hover{background:#a9a97f}.action-buttons{display:flex;justify-content:space-between;padding:15px;border-top:1px solid rgba(120,120,97,.2);gap:10px}.action-btn{padding:10px 20px;border:none;border-radius:3px;cursor:pointer;font-size:1rem;transition:all .2s}.action-btn.secondary{background:transparent;color:#787861;border:1px solid #787861}.action-btn.secondary:hover{background:#7878611a;color:#454733}.action-btn.primary{background:#a9a97f;color:#e3e3d1;border:1px solid #a9a97f}.action-btn.primary:hover{background:#969669;border-color:#969669}@media (max-width: 768px){.dropdown{min-width:320px}.datetime-content{flex-direction:column}.time-section{border-left:none;border-top:1px solid rgba(120,120,97,.2)}.time-selectors{flex-direction:row;justify-content:center;padding:15px}.time-group{gap:15px}.datetime-header{padding:10px 15px}.calendar-nav{padding:12px}.calendar-day{padding:10px 3px;font-size:.9rem}.action-buttons{padding:12px}}@media (max-width: 480px){.dropdown{min-width:280px}.time-section{min-width:auto}.time-scroll{width:45px}.time-selectors{padding:10px}}.datetime-input:-webkit-autofill,.datetime-input:-webkit-autofill:hover,.datetime-input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 1000px var(--sl-form-surface, #E3E3D1) inset;-webkit-text-fill-color:#454733;transition:background-color 5000s ease-in-out 0s}.datetime-input:-moz-autofill{box-shadow:0 0 0 1000px var(--sl-form-surface, #E3E3D1) inset}.datetime-input[readonly]:-webkit-autofill,.datetime-input:disabled:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--sl-form-surface, #E3E3D1) inset;-webkit-text-fill-color:#a9a97f}\n"] });
|
|
1166
|
+
], ngImport: i0, template: "<div class=\"datetime-container\">\r\n <div\r\n class=\"datetime-header\"\r\n [class.active]=\"isOpen()\"\r\n [class.disabled]=\"isBlocked()\"\r\n [class.readonly]=\"isBlocked()\"\r\n (click)=\"!isBlocked() && toggle()\"\r\n (keydown)=\"!isBlocked() && onKeyDown($event)\"\r\n tabindex=\"0\"\r\n >\r\n <input\r\n type=\"text\"\r\n class=\"datetime-input\"\r\n [value]=\"displayValue()\"\r\n [placeholder]=\"placeholder()\"\r\n (input)=\"onInputChange($event)\"\r\n (click)=\"onInputClick($event)\"\r\n (focus)=\"!isBlocked() && onInputFocus()\"\r\n [disabled]=\"isDisabled()\"\r\n [readOnly]=\"readonly()\"\r\n />\r\n\r\n <div class=\"header-icons\">\r\n @if (selectedDate()) {\r\n <span\r\n class=\"clear-icon\"\r\n (click)=\"!isBlocked() && clear(); $event.stopPropagation()\"\r\n title=\"Limpiar\"\r\n >\r\n \u00D7\r\n </span>\r\n }\r\n <span class=\"arrow\" [class.open]=\"isOpen()\"></span>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n@if (isOpen()) {\r\n<div class=\"dropdown\" [class.dropdown--upward]=\"openUpward()\">\r\n <div class=\"datetime-content\">\r\n <!-- Secci\u00F3n del calendario -->\r\n <div class=\"calendar-section\">\r\n <!-- Navegaci\u00F3n del calendario -->\r\n <div class=\"calendar-nav\">\r\n <div class=\"nav-section\">\r\n <button\r\n type=\"button\"\r\n class=\"nav-btn\"\r\n (click)=\"previousYear()\"\r\n title=\"A\u00F1o anterior\"\r\n >\r\n \u2039\u2039\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"nav-btn\"\r\n (click)=\"previousMonth()\"\r\n title=\"Mes anterior\"\r\n >\r\n \u2039\r\n </button>\r\n </div>\r\n\r\n <div class=\"current-date\">{{ monthName() }} {{ currentYear() }}</div>\r\n\r\n <div class=\"nav-section\">\r\n <button\r\n type=\"button\"\r\n class=\"nav-btn\"\r\n (click)=\"nextMonth()\"\r\n title=\"Siguiente mes\"\r\n >\r\n \u203A\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"nav-btn\"\r\n (click)=\"nextYear()\"\r\n title=\"Siguiente a\u00F1o\"\r\n >\r\n \u203A\u203A\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <!-- D\u00EDas de la semana -->\r\n <div class=\"weekdays\">\r\n <div class=\"weekday\">Dom</div>\r\n <div class=\"weekday\">Lun</div>\r\n <div class=\"weekday\">Mar</div>\r\n <div class=\"weekday\">Mi\u00E9</div>\r\n <div class=\"weekday\">Jue</div>\r\n <div class=\"weekday\">Vie</div>\r\n <div class=\"weekday\">S\u00E1b</div>\r\n </div>\r\n\r\n <!-- D\u00EDas del mes -->\r\n <div class=\"calendar-grid\">\r\n @for (day of calendarDays(); track $index) {\r\n <div\r\n class=\"calendar-day\"\r\n [class.selected]=\"isDaySelected(day)\"\r\n [class.today]=\"isToday(day)\"\r\n [class.disabled]=\"isDayDisabled(day)\"\r\n [class.empty]=\"!day\"\r\n (click)=\"selectDay(day)\"\r\n >\r\n {{ day || '' }}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n <!-- Selector de tiempo (solo si mode === 'datetime') -->\r\n @if (mode() === 'datetime') {\r\n <div class=\"time-section\">\r\n <div class=\"time-header\">Horario</div>\r\n\r\n <div class=\"time-selectors\">\r\n <div class=\"time-group\">\r\n <div class=\"time-column\">\r\n <div class=\"time-label\">Hora</div>\r\n <div class=\"time-scroll\">\r\n @for (hour of hours12(); track hour.value) {\r\n <div\r\n class=\"time-option\"\r\n [class.selected]=\"hour.value === selectedHour12()\"\r\n (click)=\"setHour12(hour.value)\"\r\n >\r\n {{ hour.display }}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n <div class=\"time-separator-vertical\">:</div>\r\n\r\n <div class=\"time-column\">\r\n <div class=\"time-label\">Min</div>\r\n <div class=\"time-scroll\">\r\n @for (minute of minutes(); track minute) {\r\n <div\r\n class=\"time-option\"\r\n [class.selected]=\"minute === selectedMinute()\"\r\n (click)=\"setMinute(minute)\"\r\n >\r\n {{ minute.toString().padStart(2, '0') }}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n <div class=\"time-column\">\r\n <div class=\"time-label\">AM/PM</div>\r\n <div class=\"time-scroll ampm\">\r\n <div\r\n class=\"time-option\"\r\n [class.selected]=\"selectedAmPm() === 'AM'\"\r\n (click)=\"setAmPm('AM')\"\r\n >\r\n AM\r\n </div>\r\n <div\r\n class=\"time-option\"\r\n [class.selected]=\"selectedAmPm() === 'PM'\"\r\n (click)=\"setAmPm('PM')\"\r\n >\r\n PM\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n\r\n <!-- Botones de acci\u00F3n -->\r\n <div class=\"action-buttons\">\r\n <button type=\"button\" class=\"action-btn secondary\" (click)=\"today()\">\r\n Hoy\r\n </button>\r\n @if (mode() === 'datetime') {\r\n <button type=\"button\" class=\"action-btn primary\" (click)=\"close()\">\r\n Aceptar\r\n </button>\r\n }\r\n </div>\r\n</div>\r\n}\r\n", styles: [".datetime-container{position:relative;width:100%}.datetime-header{width:100%;border:1px solid #787861;border-radius:5px;padding:12px 15px;background-color:transparent;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:auto;transition:border-color .2s}.datetime-input{flex:1;border:none;outline:none;background:transparent;font-size:1.3rem;color:#454733;padding:0;margin:0}.datetime-input::placeholder{color:#787861;text-transform:capitalize}.datetime-input:disabled{cursor:not-allowed}.datetime-header:hover,.datetime-header:focus{outline:none;border-color:#a9a97f}.datetime-header.active{border-color:#a9a97f;outline:none}.datetime-header.disabled,.datetime-header.readonly{pointer-events:none;opacity:.6;cursor:not-allowed}.selected-text{color:#454733;font-size:1.3rem;flex:1}.selected-text.placeholder{color:#787861}.header-icons{display:flex;align-items:center;gap:8px}.clear-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center;color:#787861;font-size:1.5rem;cursor:pointer;border-radius:50%;transition:all .2s}.clear-icon:hover{background-color:#7878611a;color:#454733}.arrow{width:20px;height:20px;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='icon icon-tabler icons-tabler-outline icon-tabler-calendar-event'%3e%3cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3e%3cpath d='M4 5m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z' /%3e%3cpath d='M16 3l0 4' /%3e%3cpath d='M8 3l0 4' /%3e%3cpath d='M4 11l16 0' /%3e%3cpath d='M8 15h2v2h-2z' /%3e%3c/svg%3e\");background-repeat:no-repeat;background-size:20px;background-position:center;color:#787861;flex-shrink:0;transition:transform .2s}.arrow.open{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' class='icon icon-tabler icons-tabler-filled icon-tabler-calendar-event'%3e%3cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3e%3cpath d='M16 2a1 1 0 0 1 .993 .883l.007 .117v1h1a3 3 0 0 1 2.995 2.824l.005 .176v12a3 3 0 0 1 -2.824 2.995l-.176 .005h-12a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-12a3 3 0 0 1 2.824 -2.995l.176 -.005h1v-1a1 1 0 0 1 1.993 -.117l.007 .117v1h6v-1a1 1 0 0 1 1 -1m3 7h-14v9.625c0 .705 .386 1.286 .883 1.366l.117 .009h12c.513 0 .936 -.53 .993 -1.215l.007 -.16z' /%3e%3cpath d='M8 14h2v2h-2z' /%3e%3c/svg%3e\")}.dropdown{position:absolute;top:100%;left:0;right:0;background:#e3e3d1;border:1px solid #787861;border-top:none;border-radius:0 0 5px 5px;z-index:100000;box-shadow:0 4px 12px #00000026;min-width:400px}.dropdown--upward{top:auto;bottom:calc(100% + 20px);border-top:1px solid #787861;border-radius:5px;box-shadow:0 -4px 12px #00000026}.datetime-content{display:flex}.calendar-section{flex:1;min-width:280px}.calendar-nav{display:flex;justify-content:space-between;align-items:center;padding:15px;border-bottom:1px solid rgba(120,120,97,.2)}.nav-section{display:flex;gap:5px}.nav-btn{background:none;border:none;color:#787861;cursor:pointer;font-size:1.2rem;padding:5px 10px;border-radius:3px;transition:all .2s}.nav-btn:hover{background-color:#a9a97f1a;color:#454733}.current-date{font-weight:500;color:#454733;font-size:1.1rem}.weekdays{display:grid;grid-template-columns:repeat(7,1fr);background:#7878611a}.weekday{padding:10px 5px;text-align:center;font-size:.9rem;font-weight:500;color:#787861}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr)}.calendar-day{padding:12px 5px;text-align:center;cursor:pointer;color:#454733;font-size:1rem;border-right:1px solid rgba(120,120,97,.1);border-bottom:1px solid rgba(120,120,97,.1);transition:all .2s}.calendar-day:hover:not(.disabled):not(.empty){background-color:#a9a97f33}.calendar-day.selected{background-color:#a9a97f;color:#e3e3d1;font-weight:500}.calendar-day.today:not(.selected){background-color:#a9a97f4d;font-weight:500}.calendar-day.disabled{color:#78786166;cursor:not-allowed}.calendar-day.empty{cursor:default}.calendar-day:nth-child(7n){border-right:none}.time-section{border-left:1px solid rgba(120,120,97,.2);min-width:140px;display:flex;flex-direction:column;background:#a9a97f0d}.time-header{padding:15px;border-bottom:1px solid rgba(120,120,97,.2);text-align:center;font-weight:500;color:#454733;background:#a9a97f1a}.time-selectors{display:flex;flex-direction:column;padding:15px;gap:20px;flex:1}.time-group{display:flex;align-items:center;gap:10px}.time-column{flex:1;display:flex;flex-direction:column;align-items:center}.time-label{font-size:.9rem;color:#787861;margin-bottom:10px;font-weight:500}.time-scroll{max-height:150px;overflow-y:auto;border:1px solid rgba(120,120,97,.2);border-radius:3px;width:50px;background:#a9a97f}.time-option{padding:8px 12px;text-align:center;cursor:pointer;color:#454733;font-size:1rem;transition:all .2s}.time-option:hover{background-color:#a9a97f1a}.time-option.selected{background-color:#a9a97f;color:#e3e3d1;font-weight:500}.time-separator-vertical{font-size:1.5rem;color:#787861;font-weight:700;align-self:flex-end;margin-bottom:10px}.time-scroll::-webkit-scrollbar{width:4px}.time-scroll::-webkit-scrollbar-track{background:#7878611a}.time-scroll::-webkit-scrollbar-thumb{background:#787861;border-radius:2px}.time-scroll::-webkit-scrollbar-thumb:hover{background:#a9a97f}.action-buttons{display:flex;justify-content:space-between;padding:15px;border-top:1px solid rgba(120,120,97,.2);gap:10px}.action-btn{padding:10px 20px;border:none;border-radius:3px;cursor:pointer;font-size:1rem;transition:all .2s}.action-btn.secondary{background:transparent;color:#787861;border:1px solid #787861}.action-btn.secondary:hover{background:#7878611a;color:#454733}.action-btn.primary{background:#a9a97f;color:#e3e3d1;border:1px solid #a9a97f}.action-btn.primary:hover{background:#969669;border-color:#969669}@media (max-width: 768px){.dropdown{min-width:320px}.datetime-content{flex-direction:column}.time-section{border-left:none;border-top:1px solid rgba(120,120,97,.2)}.time-selectors{flex-direction:row;justify-content:center;padding:15px}.time-group{gap:15px}.datetime-header{padding:10px 15px}.calendar-nav{padding:12px}.calendar-day{padding:10px 3px;font-size:.9rem}.action-buttons{padding:12px}}@media (max-width: 480px){.dropdown{min-width:280px}.time-section{min-width:auto}.time-scroll{width:45px}.time-selectors{padding:10px}}.datetime-input:-webkit-autofill,.datetime-input:-webkit-autofill:hover,.datetime-input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 1000px var(--sl-form-surface, #E3E3D1) inset;-webkit-text-fill-color:#454733;transition:background-color 5000s ease-in-out 0s}.datetime-input:-moz-autofill{box-shadow:0 0 0 1000px var(--sl-form-surface, #E3E3D1) inset}.datetime-input[readonly]:-webkit-autofill,.datetime-input:disabled:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--sl-form-surface, #E3E3D1) inset;-webkit-text-fill-color:#a9a97f}\n"] });
|
|
1167
1167
|
}
|
|
1168
1168
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DateTimePicker, decorators: [{
|
|
1169
1169
|
type: Component,
|
|
@@ -1173,7 +1173,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
1173
1173
|
useExisting: forwardRef(() => DateTimePicker),
|
|
1174
1174
|
multi: true,
|
|
1175
1175
|
},
|
|
1176
|
-
], template: "<div class=\"datetime-container\">\r\n <div\r\n class=\"datetime-header\"\r\n [class.active]=\"isOpen()\"\r\n [class.disabled]=\"isBlocked()\"\r\n [class.readonly]=\"isBlocked()\"\r\n (click)=\"!isBlocked() && toggle()\"\r\n (keydown)=\"!isBlocked() && onKeyDown($event)\"\r\n tabindex=\"0\"\r\n >\r\n <input\r\n type=\"text\"\r\n class=\"datetime-input\"\r\n [value]=\"displayValue()\"\r\n [placeholder]=\"placeholder()\"\r\n (input)=\"onInputChange($event)\"\r\n (click)=\"onInputClick($event)\"\r\n (focus)=\"!isBlocked() && onInputFocus()\"\r\n [disabled]=\"isDisabled()\"\r\n [readOnly]=\"readonly()\"\r\n />\r\n\r\n <div class=\"header-icons\">\r\n @if (selectedDate()) {\r\n <span\r\n class=\"clear-icon\"\r\n (click)=\"!isBlocked() && clear(); $event.stopPropagation()\"\r\n title=\"Limpiar\"\r\n >\r\n \u00D7\r\n </span>\r\n }\r\n <span class=\"arrow\" [class.open]=\"isOpen()\"></span>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n@if (isOpen()) {\r\n<div class=\"dropdown\" [class.dropdown--upward]=\"openUpward()\">\r\n <div class=\"datetime-content\">\r\n <!-- Secci\u00F3n del calendario -->\r\n <div class=\"calendar-section\">\r\n <!-- Navegaci\u00F3n del calendario -->\r\n <div class=\"calendar-nav\">\r\n <div class=\"nav-section\">\r\n <button\r\n type=\"button\"\r\n class=\"nav-btn\"\r\n (click)=\"previousYear()\"\r\n title=\"A\u00F1o anterior\"\r\n >\r\n \u2039\u2039\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"nav-btn\"\r\n (click)=\"previousMonth()\"\r\n title=\"Mes anterior\"\r\n >\r\n \u2039\r\n </button>\r\n </div>\r\n\r\n <div class=\"current-date\">{{ monthName() }} {{ currentYear() }}</div>\r\n\r\n <div class=\"nav-section\">\r\n <button\r\n type=\"button\"\r\n class=\"nav-btn\"\r\n (click)=\"nextMonth()\"\r\n title=\"Siguiente mes\"\r\n >\r\n \u203A\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"nav-btn\"\r\n (click)=\"nextYear()\"\r\n title=\"Siguiente a\u00F1o\"\r\n >\r\n \u203A\u203A\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <!-- D\u00EDas de la semana -->\r\n <div class=\"weekdays\">\r\n <div class=\"weekday\">Dom</div>\r\n <div class=\"weekday\">Lun</div>\r\n <div class=\"weekday\">Mar</div>\r\n <div class=\"weekday\">Mi\u00E9</div>\r\n <div class=\"weekday\">Jue</div>\r\n <div class=\"weekday\">Vie</div>\r\n <div class=\"weekday\">S\u00E1b</div>\r\n </div>\r\n\r\n <!-- D\u00EDas del mes -->\r\n <div class=\"calendar-grid\">\r\n @for (day of calendarDays(); track $index) {\r\n <div\r\n class=\"calendar-day\"\r\n [class.selected]=\"isDaySelected(day)\"\r\n [class.today]=\"isToday(day)\"\r\n [class.disabled]=\"isDayDisabled(day)\"\r\n [class.empty]=\"!day\"\r\n (click)=\"selectDay(day)\"\r\n >\r\n {{ day || '' }}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n <!-- Selector de tiempo (solo si mode === 'datetime') -->\r\n @if (mode() === 'datetime') {\r\n <div class=\"time-section\">\r\n <div class=\"time-header\">Horario</div>\r\n\r\n <div class=\"time-selectors\">\r\n <div class=\"time-group\">\r\n <div class=\"time-column\">\r\n <div class=\"time-label\">Hora</div>\r\n <div class=\"time-scroll\">\r\n @for (hour of hours12(); track hour.value) {\r\n <div\r\n class=\"time-option\"\r\n [class.selected]=\"hour.value === selectedHour12()\"\r\n (click)=\"setHour12(hour.value)\"\r\n >\r\n {{ hour.display }}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n <div class=\"time-separator-vertical\">:</div>\r\n\r\n <div class=\"time-column\">\r\n <div class=\"time-label\">Min</div>\r\n <div class=\"time-scroll\">\r\n @for (minute of minutes(); track minute) {\r\n <div\r\n class=\"time-option\"\r\n [class.selected]=\"minute === selectedMinute()\"\r\n (click)=\"setMinute(minute)\"\r\n >\r\n {{ minute.toString().padStart(2, '0') }}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n <div class=\"time-column\">\r\n <div class=\"time-label\">AM/PM</div>\r\n <div class=\"time-scroll ampm\">\r\n <div\r\n class=\"time-option\"\r\n [class.selected]=\"selectedAmPm() === 'AM'\"\r\n (click)=\"setAmPm('AM')\"\r\n >\r\n AM\r\n </div>\r\n <div\r\n class=\"time-option\"\r\n [class.selected]=\"selectedAmPm() === 'PM'\"\r\n (click)=\"setAmPm('PM')\"\r\n >\r\n PM\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n\r\n <!-- Botones de acci\u00F3n -->\r\n <div class=\"action-buttons\">\r\n <button type=\"button\" class=\"action-btn secondary\" (click)=\"today()\">\r\n Hoy\r\n </button>\r\n @if (mode() === 'datetime') {\r\n <button type=\"button\" class=\"action-btn primary\" (click)=\"close()\">\r\n Aceptar\r\n </button>\r\n }\r\n </div>\r\n</div>\r\n}\r\n", styles: [".datetime-container{position:relative;width:100%}.datetime-header{width:100%;border:1px solid #787861;border-radius:5px;padding:12px 15px;background-color:transparent;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:auto;transition:border-color .2s}.datetime-input{flex:1;border:none;outline:none;background:transparent;font-size:1.3rem;color:#454733;padding:0;margin:0}.datetime-input::placeholder{color:#787861;text-transform:capitalize}.datetime-input:disabled{cursor:not-allowed}.datetime-header:hover,.datetime-header:focus{outline:none;border-color:#a9a97f}.datetime-header.active{border-color:#a9a97f;outline:none}.datetime-header.disabled,.datetime-header.readonly{pointer-events:none;opacity:.6;cursor:not-allowed}.selected-text{color:#454733;font-size:1.3rem;flex:1}.selected-text.placeholder{color:#787861}.header-icons{display:flex;align-items:center;gap:8px}.clear-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center;color:#787861;font-size:1.5rem;cursor:pointer;border-radius:50%;transition:all .2s}.clear-icon:hover{background-color:#7878611a;color:#454733}.arrow{width:20px;height:20px;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='icon icon-tabler icons-tabler-outline icon-tabler-calendar-event'%3e%3cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3e%3cpath d='M4 5m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z' /%3e%3cpath d='M16 3l0 4' /%3e%3cpath d='M8 3l0 4' /%3e%3cpath d='M4 11l16 0' /%3e%3cpath d='M8 15h2v2h-2z' /%3e%3c/svg%3e\");background-repeat:no-repeat;background-size:20px;background-position:center;color:#787861;flex-shrink:0;transition:transform .2s}.arrow.open{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' class='icon icon-tabler icons-tabler-filled icon-tabler-calendar-event'%3e%3cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3e%3cpath d='M16 2a1 1 0 0 1 .993 .883l.007 .117v1h1a3 3 0 0 1 2.995 2.824l.005 .176v12a3 3 0 0 1 -2.824 2.995l-.176 .005h-12a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-12a3 3 0 0 1 2.824 -2.995l.176 -.005h1v-1a1 1 0 0 1 1.993 -.117l.007 .117v1h6v-1a1 1 0 0 1 1 -1m3 7h-14v9.625c0 .705 .386 1.286 .883 1.366l.117 .009h12c.513 0 .936 -.53 .993 -1.215l.007 -.16z' /%3e%3cpath d='M8 14h2v2h-2z' /%3e%3c/svg%3e\")}.dropdown{position:absolute;top:100%;left:0;right:0;background:#e3e3d1;border:1px solid #787861;border-top:none;border-radius:0 0 5px 5px;z-index:100000;box-shadow:0 4px 12px #00000026;min-width:400px}.dropdown--upward{top:auto;bottom:calc(100% + 20px);border-top:1px solid #787861;border-bottom:none;border-radius:5px 5px 0 0;box-shadow:0 -4px 12px #00000026}.datetime-content{display:flex}.calendar-section{flex:1;min-width:280px}.calendar-nav{display:flex;justify-content:space-between;align-items:center;padding:15px;border-bottom:1px solid rgba(120,120,97,.2)}.nav-section{display:flex;gap:5px}.nav-btn{background:none;border:none;color:#787861;cursor:pointer;font-size:1.2rem;padding:5px 10px;border-radius:3px;transition:all .2s}.nav-btn:hover{background-color:#a9a97f1a;color:#454733}.current-date{font-weight:500;color:#454733;font-size:1.1rem}.weekdays{display:grid;grid-template-columns:repeat(7,1fr);background:#7878611a}.weekday{padding:10px 5px;text-align:center;font-size:.9rem;font-weight:500;color:#787861}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr)}.calendar-day{padding:12px 5px;text-align:center;cursor:pointer;color:#454733;font-size:1rem;border-right:1px solid rgba(120,120,97,.1);border-bottom:1px solid rgba(120,120,97,.1);transition:all .2s}.calendar-day:hover:not(.disabled):not(.empty){background-color:#a9a97f33}.calendar-day.selected{background-color:#a9a97f;color:#e3e3d1;font-weight:500}.calendar-day.today:not(.selected){background-color:#a9a97f4d;font-weight:500}.calendar-day.disabled{color:#78786166;cursor:not-allowed}.calendar-day.empty{cursor:default}.calendar-day:nth-child(7n){border-right:none}.time-section{border-left:1px solid rgba(120,120,97,.2);min-width:140px;display:flex;flex-direction:column;background:#a9a97f0d}.time-header{padding:15px;border-bottom:1px solid rgba(120,120,97,.2);text-align:center;font-weight:500;color:#454733;background:#a9a97f1a}.time-selectors{display:flex;flex-direction:column;padding:15px;gap:20px;flex:1}.time-group{display:flex;align-items:center;gap:10px}.time-column{flex:1;display:flex;flex-direction:column;align-items:center}.time-label{font-size:.9rem;color:#787861;margin-bottom:10px;font-weight:500}.time-scroll{max-height:150px;overflow-y:auto;border:1px solid rgba(120,120,97,.2);border-radius:3px;width:50px;background:#a9a97f}.time-option{padding:8px 12px;text-align:center;cursor:pointer;color:#454733;font-size:1rem;transition:all .2s}.time-option:hover{background-color:#a9a97f1a}.time-option.selected{background-color:#a9a97f;color:#e3e3d1;font-weight:500}.time-separator-vertical{font-size:1.5rem;color:#787861;font-weight:700;align-self:flex-end;margin-bottom:10px}.time-scroll::-webkit-scrollbar{width:4px}.time-scroll::-webkit-scrollbar-track{background:#7878611a}.time-scroll::-webkit-scrollbar-thumb{background:#787861;border-radius:2px}.time-scroll::-webkit-scrollbar-thumb:hover{background:#a9a97f}.action-buttons{display:flex;justify-content:space-between;padding:15px;border-top:1px solid rgba(120,120,97,.2);gap:10px}.action-btn{padding:10px 20px;border:none;border-radius:3px;cursor:pointer;font-size:1rem;transition:all .2s}.action-btn.secondary{background:transparent;color:#787861;border:1px solid #787861}.action-btn.secondary:hover{background:#7878611a;color:#454733}.action-btn.primary{background:#a9a97f;color:#e3e3d1;border:1px solid #a9a97f}.action-btn.primary:hover{background:#969669;border-color:#969669}@media (max-width: 768px){.dropdown{min-width:320px}.datetime-content{flex-direction:column}.time-section{border-left:none;border-top:1px solid rgba(120,120,97,.2)}.time-selectors{flex-direction:row;justify-content:center;padding:15px}.time-group{gap:15px}.datetime-header{padding:10px 15px}.calendar-nav{padding:12px}.calendar-day{padding:10px 3px;font-size:.9rem}.action-buttons{padding:12px}}@media (max-width: 480px){.dropdown{min-width:280px}.time-section{min-width:auto}.time-scroll{width:45px}.time-selectors{padding:10px}}.datetime-input:-webkit-autofill,.datetime-input:-webkit-autofill:hover,.datetime-input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 1000px var(--sl-form-surface, #E3E3D1) inset;-webkit-text-fill-color:#454733;transition:background-color 5000s ease-in-out 0s}.datetime-input:-moz-autofill{box-shadow:0 0 0 1000px var(--sl-form-surface, #E3E3D1) inset}.datetime-input[readonly]:-webkit-autofill,.datetime-input:disabled:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--sl-form-surface, #E3E3D1) inset;-webkit-text-fill-color:#a9a97f}\n"] }]
|
|
1176
|
+
], template: "<div class=\"datetime-container\">\r\n <div\r\n class=\"datetime-header\"\r\n [class.active]=\"isOpen()\"\r\n [class.disabled]=\"isBlocked()\"\r\n [class.readonly]=\"isBlocked()\"\r\n (click)=\"!isBlocked() && toggle()\"\r\n (keydown)=\"!isBlocked() && onKeyDown($event)\"\r\n tabindex=\"0\"\r\n >\r\n <input\r\n type=\"text\"\r\n class=\"datetime-input\"\r\n [value]=\"displayValue()\"\r\n [placeholder]=\"placeholder()\"\r\n (input)=\"onInputChange($event)\"\r\n (click)=\"onInputClick($event)\"\r\n (focus)=\"!isBlocked() && onInputFocus()\"\r\n [disabled]=\"isDisabled()\"\r\n [readOnly]=\"readonly()\"\r\n />\r\n\r\n <div class=\"header-icons\">\r\n @if (selectedDate()) {\r\n <span\r\n class=\"clear-icon\"\r\n (click)=\"!isBlocked() && clear(); $event.stopPropagation()\"\r\n title=\"Limpiar\"\r\n >\r\n \u00D7\r\n </span>\r\n }\r\n <span class=\"arrow\" [class.open]=\"isOpen()\"></span>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n@if (isOpen()) {\r\n<div class=\"dropdown\" [class.dropdown--upward]=\"openUpward()\">\r\n <div class=\"datetime-content\">\r\n <!-- Secci\u00F3n del calendario -->\r\n <div class=\"calendar-section\">\r\n <!-- Navegaci\u00F3n del calendario -->\r\n <div class=\"calendar-nav\">\r\n <div class=\"nav-section\">\r\n <button\r\n type=\"button\"\r\n class=\"nav-btn\"\r\n (click)=\"previousYear()\"\r\n title=\"A\u00F1o anterior\"\r\n >\r\n \u2039\u2039\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"nav-btn\"\r\n (click)=\"previousMonth()\"\r\n title=\"Mes anterior\"\r\n >\r\n \u2039\r\n </button>\r\n </div>\r\n\r\n <div class=\"current-date\">{{ monthName() }} {{ currentYear() }}</div>\r\n\r\n <div class=\"nav-section\">\r\n <button\r\n type=\"button\"\r\n class=\"nav-btn\"\r\n (click)=\"nextMonth()\"\r\n title=\"Siguiente mes\"\r\n >\r\n \u203A\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"nav-btn\"\r\n (click)=\"nextYear()\"\r\n title=\"Siguiente a\u00F1o\"\r\n >\r\n \u203A\u203A\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <!-- D\u00EDas de la semana -->\r\n <div class=\"weekdays\">\r\n <div class=\"weekday\">Dom</div>\r\n <div class=\"weekday\">Lun</div>\r\n <div class=\"weekday\">Mar</div>\r\n <div class=\"weekday\">Mi\u00E9</div>\r\n <div class=\"weekday\">Jue</div>\r\n <div class=\"weekday\">Vie</div>\r\n <div class=\"weekday\">S\u00E1b</div>\r\n </div>\r\n\r\n <!-- D\u00EDas del mes -->\r\n <div class=\"calendar-grid\">\r\n @for (day of calendarDays(); track $index) {\r\n <div\r\n class=\"calendar-day\"\r\n [class.selected]=\"isDaySelected(day)\"\r\n [class.today]=\"isToday(day)\"\r\n [class.disabled]=\"isDayDisabled(day)\"\r\n [class.empty]=\"!day\"\r\n (click)=\"selectDay(day)\"\r\n >\r\n {{ day || '' }}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n <!-- Selector de tiempo (solo si mode === 'datetime') -->\r\n @if (mode() === 'datetime') {\r\n <div class=\"time-section\">\r\n <div class=\"time-header\">Horario</div>\r\n\r\n <div class=\"time-selectors\">\r\n <div class=\"time-group\">\r\n <div class=\"time-column\">\r\n <div class=\"time-label\">Hora</div>\r\n <div class=\"time-scroll\">\r\n @for (hour of hours12(); track hour.value) {\r\n <div\r\n class=\"time-option\"\r\n [class.selected]=\"hour.value === selectedHour12()\"\r\n (click)=\"setHour12(hour.value)\"\r\n >\r\n {{ hour.display }}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n <div class=\"time-separator-vertical\">:</div>\r\n\r\n <div class=\"time-column\">\r\n <div class=\"time-label\">Min</div>\r\n <div class=\"time-scroll\">\r\n @for (minute of minutes(); track minute) {\r\n <div\r\n class=\"time-option\"\r\n [class.selected]=\"minute === selectedMinute()\"\r\n (click)=\"setMinute(minute)\"\r\n >\r\n {{ minute.toString().padStart(2, '0') }}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n <div class=\"time-column\">\r\n <div class=\"time-label\">AM/PM</div>\r\n <div class=\"time-scroll ampm\">\r\n <div\r\n class=\"time-option\"\r\n [class.selected]=\"selectedAmPm() === 'AM'\"\r\n (click)=\"setAmPm('AM')\"\r\n >\r\n AM\r\n </div>\r\n <div\r\n class=\"time-option\"\r\n [class.selected]=\"selectedAmPm() === 'PM'\"\r\n (click)=\"setAmPm('PM')\"\r\n >\r\n PM\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n\r\n <!-- Botones de acci\u00F3n -->\r\n <div class=\"action-buttons\">\r\n <button type=\"button\" class=\"action-btn secondary\" (click)=\"today()\">\r\n Hoy\r\n </button>\r\n @if (mode() === 'datetime') {\r\n <button type=\"button\" class=\"action-btn primary\" (click)=\"close()\">\r\n Aceptar\r\n </button>\r\n }\r\n </div>\r\n</div>\r\n}\r\n", styles: [".datetime-container{position:relative;width:100%}.datetime-header{width:100%;border:1px solid #787861;border-radius:5px;padding:12px 15px;background-color:transparent;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:auto;transition:border-color .2s}.datetime-input{flex:1;border:none;outline:none;background:transparent;font-size:1.3rem;color:#454733;padding:0;margin:0}.datetime-input::placeholder{color:#787861;text-transform:capitalize}.datetime-input:disabled{cursor:not-allowed}.datetime-header:hover,.datetime-header:focus{outline:none;border-color:#a9a97f}.datetime-header.active{border-color:#a9a97f;outline:none}.datetime-header.disabled,.datetime-header.readonly{pointer-events:none;opacity:.6;cursor:not-allowed}.selected-text{color:#454733;font-size:1.3rem;flex:1}.selected-text.placeholder{color:#787861}.header-icons{display:flex;align-items:center;gap:8px}.clear-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center;color:#787861;font-size:1.5rem;cursor:pointer;border-radius:50%;transition:all .2s}.clear-icon:hover{background-color:#7878611a;color:#454733}.arrow{width:20px;height:20px;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='icon icon-tabler icons-tabler-outline icon-tabler-calendar-event'%3e%3cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3e%3cpath d='M4 5m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z' /%3e%3cpath d='M16 3l0 4' /%3e%3cpath d='M8 3l0 4' /%3e%3cpath d='M4 11l16 0' /%3e%3cpath d='M8 15h2v2h-2z' /%3e%3c/svg%3e\");background-repeat:no-repeat;background-size:20px;background-position:center;color:#787861;flex-shrink:0;transition:transform .2s}.arrow.open{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' class='icon icon-tabler icons-tabler-filled icon-tabler-calendar-event'%3e%3cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3e%3cpath d='M16 2a1 1 0 0 1 .993 .883l.007 .117v1h1a3 3 0 0 1 2.995 2.824l.005 .176v12a3 3 0 0 1 -2.824 2.995l-.176 .005h-12a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-12a3 3 0 0 1 2.824 -2.995l.176 -.005h1v-1a1 1 0 0 1 1.993 -.117l.007 .117v1h6v-1a1 1 0 0 1 1 -1m3 7h-14v9.625c0 .705 .386 1.286 .883 1.366l.117 .009h12c.513 0 .936 -.53 .993 -1.215l.007 -.16z' /%3e%3cpath d='M8 14h2v2h-2z' /%3e%3c/svg%3e\")}.dropdown{position:absolute;top:100%;left:0;right:0;background:#e3e3d1;border:1px solid #787861;border-top:none;border-radius:0 0 5px 5px;z-index:100000;box-shadow:0 4px 12px #00000026;min-width:400px}.dropdown--upward{top:auto;bottom:calc(100% + 20px);border-top:1px solid #787861;border-radius:5px;box-shadow:0 -4px 12px #00000026}.datetime-content{display:flex}.calendar-section{flex:1;min-width:280px}.calendar-nav{display:flex;justify-content:space-between;align-items:center;padding:15px;border-bottom:1px solid rgba(120,120,97,.2)}.nav-section{display:flex;gap:5px}.nav-btn{background:none;border:none;color:#787861;cursor:pointer;font-size:1.2rem;padding:5px 10px;border-radius:3px;transition:all .2s}.nav-btn:hover{background-color:#a9a97f1a;color:#454733}.current-date{font-weight:500;color:#454733;font-size:1.1rem}.weekdays{display:grid;grid-template-columns:repeat(7,1fr);background:#7878611a}.weekday{padding:10px 5px;text-align:center;font-size:.9rem;font-weight:500;color:#787861}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr)}.calendar-day{padding:12px 5px;text-align:center;cursor:pointer;color:#454733;font-size:1rem;border-right:1px solid rgba(120,120,97,.1);border-bottom:1px solid rgba(120,120,97,.1);transition:all .2s}.calendar-day:hover:not(.disabled):not(.empty){background-color:#a9a97f33}.calendar-day.selected{background-color:#a9a97f;color:#e3e3d1;font-weight:500}.calendar-day.today:not(.selected){background-color:#a9a97f4d;font-weight:500}.calendar-day.disabled{color:#78786166;cursor:not-allowed}.calendar-day.empty{cursor:default}.calendar-day:nth-child(7n){border-right:none}.time-section{border-left:1px solid rgba(120,120,97,.2);min-width:140px;display:flex;flex-direction:column;background:#a9a97f0d}.time-header{padding:15px;border-bottom:1px solid rgba(120,120,97,.2);text-align:center;font-weight:500;color:#454733;background:#a9a97f1a}.time-selectors{display:flex;flex-direction:column;padding:15px;gap:20px;flex:1}.time-group{display:flex;align-items:center;gap:10px}.time-column{flex:1;display:flex;flex-direction:column;align-items:center}.time-label{font-size:.9rem;color:#787861;margin-bottom:10px;font-weight:500}.time-scroll{max-height:150px;overflow-y:auto;border:1px solid rgba(120,120,97,.2);border-radius:3px;width:50px;background:#a9a97f}.time-option{padding:8px 12px;text-align:center;cursor:pointer;color:#454733;font-size:1rem;transition:all .2s}.time-option:hover{background-color:#a9a97f1a}.time-option.selected{background-color:#a9a97f;color:#e3e3d1;font-weight:500}.time-separator-vertical{font-size:1.5rem;color:#787861;font-weight:700;align-self:flex-end;margin-bottom:10px}.time-scroll::-webkit-scrollbar{width:4px}.time-scroll::-webkit-scrollbar-track{background:#7878611a}.time-scroll::-webkit-scrollbar-thumb{background:#787861;border-radius:2px}.time-scroll::-webkit-scrollbar-thumb:hover{background:#a9a97f}.action-buttons{display:flex;justify-content:space-between;padding:15px;border-top:1px solid rgba(120,120,97,.2);gap:10px}.action-btn{padding:10px 20px;border:none;border-radius:3px;cursor:pointer;font-size:1rem;transition:all .2s}.action-btn.secondary{background:transparent;color:#787861;border:1px solid #787861}.action-btn.secondary:hover{background:#7878611a;color:#454733}.action-btn.primary{background:#a9a97f;color:#e3e3d1;border:1px solid #a9a97f}.action-btn.primary:hover{background:#969669;border-color:#969669}@media (max-width: 768px){.dropdown{min-width:320px}.datetime-content{flex-direction:column}.time-section{border-left:none;border-top:1px solid rgba(120,120,97,.2)}.time-selectors{flex-direction:row;justify-content:center;padding:15px}.time-group{gap:15px}.datetime-header{padding:10px 15px}.calendar-nav{padding:12px}.calendar-day{padding:10px 3px;font-size:.9rem}.action-buttons{padding:12px}}@media (max-width: 480px){.dropdown{min-width:280px}.time-section{min-width:auto}.time-scroll{width:45px}.time-selectors{padding:10px}}.datetime-input:-webkit-autofill,.datetime-input:-webkit-autofill:hover,.datetime-input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 1000px var(--sl-form-surface, #E3E3D1) inset;-webkit-text-fill-color:#454733;transition:background-color 5000s ease-in-out 0s}.datetime-input:-moz-autofill{box-shadow:0 0 0 1000px var(--sl-form-surface, #E3E3D1) inset}.datetime-input[readonly]:-webkit-autofill,.datetime-input:disabled:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--sl-form-surface, #E3E3D1) inset;-webkit-text-fill-color:#a9a97f}\n"] }]
|
|
1177
1177
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], dateChange: [{ type: i0.Output, args: ["dateChange"] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }] } });
|
|
1178
1178
|
|
|
1179
1179
|
class DateTimeFilter {
|
|
@@ -2614,11 +2614,11 @@ class Input {
|
|
|
2614
2614
|
this.showDropdown.set(!this.showDropdown());
|
|
2615
2615
|
}
|
|
2616
2616
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Input, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2617
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: Input, isStandalone: true, selector: "lib-input", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, uppercase: { classPropertyName: "uppercase", publicName: "uppercase", isSignal: true, isRequired: false, transformFunction: null }, regex: { classPropertyName: "regex", publicName: "regex", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", onSearch: "onSearch", onSelect: "onSelect", onClear: "onClear" }, ngImport: i0, template: "<div class=\"input-wrapper\">\r\n <input\r\n [type]=\"type()\"\r\n [placeholder]=\"placeholder()\"\r\n class=\"custom-input\"\r\n [
|
|
2617
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: Input, isStandalone: true, selector: "lib-input", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, uppercase: { classPropertyName: "uppercase", publicName: "uppercase", isSignal: true, isRequired: false, transformFunction: null }, regex: { classPropertyName: "regex", publicName: "regex", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", onSearch: "onSearch", onSelect: "onSelect", onClear: "onClear" }, ngImport: i0, template: "<div class=\"input-wrapper\">\r\n <input\r\n [type]=\"type()\"\r\n [placeholder]=\"placeholder()\"\r\n class=\"custom-input\"\r\n [attr.maxlength]=\"maxLength()\"\r\n [style.text-transform]=\"uppercase() ? 'uppercase' : null\"\r\n (input)=\"handleInput($event)\"\r\n (keyup.enter)=\"search()\"\r\n />\r\n\r\n @if (value() && mode() === 'search') {\r\n <button class=\"clear-btn\" (click)=\"clear()\" type=\"button\">\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"20\"\r\n height=\"20\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n >\r\n <path d=\"M18 6l-12 12\" />\r\n <path d=\"M6 6l12 12\" />\r\n </svg>\r\n </button>\r\n } @if (mode() === 'search') {\r\n <button class=\"search-btn\" (click)=\"search()\" type=\"button\">\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"56\"\r\n height=\"56\"\r\n fill=\"none\"\r\n viewBox=\"0 0 56 56\"\r\n >\r\n <g clip-path=\"url(#clip0_190_2403)\">\r\n <path\r\n fill=\"#454733\"\r\n d=\"M31.755 30.255h-.79l-.28-.27a6.47 6.47 0 0 0 1.57-4.23 6.5 6.5 0 1 0-6.5 6.5c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99 1.49-1.49zm-6 0c-2.49 0-4.5-2.01-4.5-4.5s2.01-4.5 4.5-4.5 4.5 2.01 4.5 4.5-2.01 4.5-4.5 4.5\"\r\n />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_190_2403\">\r\n <rect width=\"56\" height=\"56\" fill=\"#fff\" rx=\"28\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </button>\r\n } @else {\r\n <button class=\"select-btn\" (click)=\"openSelect()\" type=\"button\">\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n class=\"icon icon-tabler icons-tabler-outline icon-tabler-chevron-down\"\r\n >\r\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path d=\"M6 9l6 6l6 -6\" />\r\n </svg>\r\n </button>\r\n }\r\n</div>\r\n\r\n@if (showDropdown()) {\r\n <div class=\"dropdown-menu\">\r\n @for (option of options(); track option.code) {\r\n <button\r\n type=\"button\"\r\n class=\"dropdown-item\"\r\n (click)=\"selectOption(option)\"\r\n >\r\n <span class=\"code\">{{ option.code }}</span>\r\n <span class=\"dash\">-</span>\r\n <span class=\"name\">{{ option.name }}</span>\r\n </button>\r\n }\r\n </div>\r\n}", styles: [".input-wrapper{position:relative;width:100%}.custom-input{width:100%;padding:20px 50px 20px 20px;border-radius:32px;font-size:16px;background-color:#fff;border:none}custom-input::placeholder{color:#40484c;opacity:1}.custom-input:focus{outline:none;box-shadow:0 0 0 3px #8bc34a1a}.custom-input:hover{background-color:#d8dfe4;transform:translateY(-1px)}.clear-btn{position:absolute;right:55px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;font-size:10px;color:#596300;padding:5px}.clear-btn svg{height:50px;pointer-events:none;transition:filter .2s ease}.clear-btn:hover{color:red}.clear-btn:hover svg{filter:brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%)}.search-btn{position:absolute;right:5px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;font-size:18px;border-radius:50%;background-color:#596300;display:flex;justify-content:center;align-items:center;width:50px;height:50px}.search-btn svg{filter:brightness(0) invert(1)}.search-btn:hover{background:#7cb342}.select-btn{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;font-size:20px;color:#454733;display:flex;align-items:center;justify-content:center}.select-btn:hover{color:#596300}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.dropdown-menu{position:absolute;top:calc(100% + 8px);left:0;width:100%;background:#fff;border-radius:16px;box-shadow:0 4px 12px #00000026;z-index:50;overflow:hidden;animation:dropdownFade .15s ease}.dropdown-item{width:100%;padding:14px 20px;text-align:left;background:none;border:none;cursor:pointer;display:flex;align-items:center;gap:10px;border-bottom:1px solid #f0f0f0;transition:background .2s ease}.dropdown-item:last-child{border-bottom:none}.dropdown-item:hover{background:#f5f7f8}.code{font-weight:600;color:#40484c;font-size:14px}.dash{color:#40484c}.name{color:#40484c;font-size:14px}@keyframes dropdownFade{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}\n"] });
|
|
2618
2618
|
}
|
|
2619
2619
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Input, decorators: [{
|
|
2620
2620
|
type: Component,
|
|
2621
|
-
args: [{ selector: 'lib-input', standalone: true, imports: [], template: "<div class=\"input-wrapper\">\r\n <input\r\n [type]=\"type()\"\r\n [placeholder]=\"placeholder()\"\r\n class=\"custom-input\"\r\n [
|
|
2621
|
+
args: [{ selector: 'lib-input', standalone: true, imports: [], template: "<div class=\"input-wrapper\">\r\n <input\r\n [type]=\"type()\"\r\n [placeholder]=\"placeholder()\"\r\n class=\"custom-input\"\r\n [attr.maxlength]=\"maxLength()\"\r\n [style.text-transform]=\"uppercase() ? 'uppercase' : null\"\r\n (input)=\"handleInput($event)\"\r\n (keyup.enter)=\"search()\"\r\n />\r\n\r\n @if (value() && mode() === 'search') {\r\n <button class=\"clear-btn\" (click)=\"clear()\" type=\"button\">\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"20\"\r\n height=\"20\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n >\r\n <path d=\"M18 6l-12 12\" />\r\n <path d=\"M6 6l12 12\" />\r\n </svg>\r\n </button>\r\n } @if (mode() === 'search') {\r\n <button class=\"search-btn\" (click)=\"search()\" type=\"button\">\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"56\"\r\n height=\"56\"\r\n fill=\"none\"\r\n viewBox=\"0 0 56 56\"\r\n >\r\n <g clip-path=\"url(#clip0_190_2403)\">\r\n <path\r\n fill=\"#454733\"\r\n d=\"M31.755 30.255h-.79l-.28-.27a6.47 6.47 0 0 0 1.57-4.23 6.5 6.5 0 1 0-6.5 6.5c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99 1.49-1.49zm-6 0c-2.49 0-4.5-2.01-4.5-4.5s2.01-4.5 4.5-4.5 4.5 2.01 4.5 4.5-2.01 4.5-4.5 4.5\"\r\n />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_190_2403\">\r\n <rect width=\"56\" height=\"56\" fill=\"#fff\" rx=\"28\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </button>\r\n } @else {\r\n <button class=\"select-btn\" (click)=\"openSelect()\" type=\"button\">\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n class=\"icon icon-tabler icons-tabler-outline icon-tabler-chevron-down\"\r\n >\r\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path d=\"M6 9l6 6l6 -6\" />\r\n </svg>\r\n </button>\r\n }\r\n</div>\r\n\r\n@if (showDropdown()) {\r\n <div class=\"dropdown-menu\">\r\n @for (option of options(); track option.code) {\r\n <button\r\n type=\"button\"\r\n class=\"dropdown-item\"\r\n (click)=\"selectOption(option)\"\r\n >\r\n <span class=\"code\">{{ option.code }}</span>\r\n <span class=\"dash\">-</span>\r\n <span class=\"name\">{{ option.name }}</span>\r\n </button>\r\n }\r\n </div>\r\n}", styles: [".input-wrapper{position:relative;width:100%}.custom-input{width:100%;padding:20px 50px 20px 20px;border-radius:32px;font-size:16px;background-color:#fff;border:none}custom-input::placeholder{color:#40484c;opacity:1}.custom-input:focus{outline:none;box-shadow:0 0 0 3px #8bc34a1a}.custom-input:hover{background-color:#d8dfe4;transform:translateY(-1px)}.clear-btn{position:absolute;right:55px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;font-size:10px;color:#596300;padding:5px}.clear-btn svg{height:50px;pointer-events:none;transition:filter .2s ease}.clear-btn:hover{color:red}.clear-btn:hover svg{filter:brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%)}.search-btn{position:absolute;right:5px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;font-size:18px;border-radius:50%;background-color:#596300;display:flex;justify-content:center;align-items:center;width:50px;height:50px}.search-btn svg{filter:brightness(0) invert(1)}.search-btn:hover{background:#7cb342}.select-btn{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;font-size:20px;color:#454733;display:flex;align-items:center;justify-content:center}.select-btn:hover{color:#596300}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.dropdown-menu{position:absolute;top:calc(100% + 8px);left:0;width:100%;background:#fff;border-radius:16px;box-shadow:0 4px 12px #00000026;z-index:50;overflow:hidden;animation:dropdownFade .15s ease}.dropdown-item{width:100%;padding:14px 20px;text-align:left;background:none;border:none;cursor:pointer;display:flex;align-items:center;gap:10px;border-bottom:1px solid #f0f0f0;transition:background .2s ease}.dropdown-item:last-child{border-bottom:none}.dropdown-item:hover{background:#f5f7f8}.code{font-weight:600;color:#40484c;font-size:14px}.dash{color:#40484c}.name{color:#40484c;font-size:14px}@keyframes dropdownFade{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}\n"] }]
|
|
2622
2622
|
}], ctorParameters: () => [], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], uppercase: [{ type: i0.Input, args: [{ isSignal: true, alias: "uppercase", required: false }] }], regex: [{ type: i0.Input, args: [{ isSignal: true, alias: "regex", required: false }] }], onSearch: [{ type: i0.Output, args: ["onSearch"] }], onSelect: [{ type: i0.Output, args: ["onSelect"] }], onClear: [{ type: i0.Output, args: ["onClear"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }] } });
|
|
2623
2623
|
|
|
2624
2624
|
class SelectCustomSearch {
|
|
@@ -2765,7 +2765,7 @@ class SelectCustomSearch {
|
|
|
2765
2765
|
useExisting: forwardRef(() => SelectCustomSearch),
|
|
2766
2766
|
multi: true,
|
|
2767
2767
|
},
|
|
2768
|
-
], ngImport: i0, template: "<div class=\"select-container\">\r\n <div\r\n class=\"select-header\"\r\n [class.active]=\"isOpen()\"\r\n [class.disabled]=\"isBlocked()\"\r\n [class.readonly]=\"isBlocked()\"\r\n (click)=\"!isBlocked() && toggle()\"\r\n (keydown)=\"!isBlocked() && onKeyDown($event)\"\r\n tabindex=\"0\"\r\n >\r\n <span class=\"selected-text\" [class.placeholder]=\"!selectedOption()\">\r\n {{ selectedOption()?.label || placeholder() }}\r\n </span>\r\n\r\n <span class=\"arrow\" [class.open]=\"isOpen()\"></span>\r\n </div>\r\n\r\n @if (isOpen()) {\r\n <div class=\"dropdown\" [class.dropdown--upward]=\"openUpward()\">\r\n <input\r\n type=\"text\"\r\n class=\"search-input\"\r\n [value]=\"searchTerm()\"\r\n placeholder=\"Buscar...\"\r\n (input)=\"!isBlocked() &&onSearch($event)\"\r\n (keydown)=\"!isBlocked() && onKeyDown($event)\"\r\n />\r\n\r\n @if (filteredOptions().length > 0) {\r\n <div class=\"options\">\r\n <div\r\n class=\"option default-option\"\r\n [class.selected]=\"selectedValue() === null\"\r\n (click)=\"!isBlocked() && clearSelection()\"\r\n >\r\n {{ placeholder() }}\r\n </div>\r\n @for (option of filteredOptions(); track option.value) {\r\n <div\r\n class=\"option\"\r\n [class.selected]=\"option.value === selectedValue()\"\r\n (click)=\"!isBlocked() && selectOption(option)\"\r\n [attr.disabled]=\"isBlocked()\"\r\n >\r\n {{ option.label }}\r\n </div>\r\n }\r\n </div>\r\n } @else {\r\n <div class=\"no-results\">No se encontraron resultados</div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [".select-container{position:relative;width:100%}.select-header{width:100%;border:1px solid #787861;border-radius:5px;padding:15px;background-color:transparent;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:auto}.select-header:hover,.select-header:focus{outline:none;border-color:#a9a97f}.select-header.active{border-color:#a9a97f;outline:none}.select-header.disabled,.select-header.readonly{cursor:not-allowed;opacity:.6;pointer-events:none}.selected-text{color:#454733;font-size:1.3rem;text-transform:capitalize}.selected-text.placeholder{color:#787861;text-transform:capitalize}.arrow{width:15px;height:15px;background-image:url(\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\");background-repeat:no-repeat;background-size:15px;background-position:center;color:#787861;flex-shrink:0;transition:transform .2s}.arrow.open{transform:rotate(180deg)}.dropdown{position:absolute;top:100%;left:0;right:0;background:#e3e3d1;border:1px solid #787861;border-top:none;border-radius:0 0 5px 5px;max-height:250px;overflow:hidden;z-index:100000;box-shadow:0 2px 8px #0000001a}.dropdown--upward{top:auto;bottom:calc(100% + 20px);border-top:1px solid #787861;border-
|
|
2768
|
+
], ngImport: i0, template: "<div class=\"select-container\">\r\n <div\r\n class=\"select-header\"\r\n [class.active]=\"isOpen()\"\r\n [class.disabled]=\"isBlocked()\"\r\n [class.readonly]=\"isBlocked()\"\r\n (click)=\"!isBlocked() && toggle()\"\r\n (keydown)=\"!isBlocked() && onKeyDown($event)\"\r\n tabindex=\"0\"\r\n >\r\n <span class=\"selected-text\" [class.placeholder]=\"!selectedOption()\">\r\n {{ selectedOption()?.label || placeholder() }}\r\n </span>\r\n\r\n <span class=\"arrow\" [class.open]=\"isOpen()\"></span>\r\n </div>\r\n\r\n @if (isOpen()) {\r\n <div class=\"dropdown\" [class.dropdown--upward]=\"openUpward()\">\r\n <input\r\n type=\"text\"\r\n class=\"search-input\"\r\n [value]=\"searchTerm()\"\r\n placeholder=\"Buscar...\"\r\n (input)=\"!isBlocked() &&onSearch($event)\"\r\n (keydown)=\"!isBlocked() && onKeyDown($event)\"\r\n />\r\n\r\n @if (filteredOptions().length > 0) {\r\n <div class=\"options\">\r\n <div\r\n class=\"option default-option\"\r\n [class.selected]=\"selectedValue() === null\"\r\n (click)=\"!isBlocked() && clearSelection()\"\r\n >\r\n {{ placeholder() }}\r\n </div>\r\n @for (option of filteredOptions(); track option.value) {\r\n <div\r\n class=\"option\"\r\n [class.selected]=\"option.value === selectedValue()\"\r\n (click)=\"!isBlocked() && selectOption(option)\"\r\n [attr.disabled]=\"isBlocked()\"\r\n >\r\n {{ option.label }}\r\n </div>\r\n }\r\n </div>\r\n } @else {\r\n <div class=\"no-results\">No se encontraron resultados</div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [".select-container{position:relative;width:100%}.select-header{width:100%;border:1px solid #787861;border-radius:5px;padding:15px;background-color:transparent;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:auto}.select-header:hover,.select-header:focus{outline:none;border-color:#a9a97f}.select-header.active{border-color:#a9a97f;outline:none}.select-header.disabled,.select-header.readonly{cursor:not-allowed;opacity:.6;pointer-events:none}.selected-text{color:#454733;font-size:1.3rem;text-transform:capitalize}.selected-text.placeholder{color:#787861;text-transform:capitalize}.arrow{width:15px;height:15px;background-image:url(\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\");background-repeat:no-repeat;background-size:15px;background-position:center;color:#787861;flex-shrink:0;transition:transform .2s}.arrow.open{transform:rotate(180deg)}.dropdown{position:absolute;top:100%;left:0;right:0;background:#e3e3d1;border:1px solid #787861;border-top:none;border-radius:0 0 5px 5px;max-height:250px;overflow:hidden;z-index:100000;box-shadow:0 2px 8px #0000001a}.dropdown--upward{top:auto;bottom:calc(100% + 20px);border-top:1px solid #787861;border-radius:5px;box-shadow:0 -2px 8px #0000001a}.search-input{width:100%;border:none;border-bottom:1px solid #787861;border-radius:0;padding:15px;background-color:transparent;outline:none;font-size:inherit;color:#454733;font-size:1.3rem}.search-input::placeholder{color:#787861;text-transform:capitalize}.search-input:focus{outline:none;border-bottom-color:#a9a97f}.options{max-height:180px;overflow-y:auto;background:#e3e3d1}.option{padding:15px;cursor:pointer;border-bottom:1px solid rgba(120,120,97,.2);color:#454733;background:#e3e3d1;font-size:1.3rem;text-transform:capitalize}.option:hover{background-color:#a9a97f1a;color:#454733}.option.selected{background-color:#a9a97f;color:#e3e3d1;font-weight:500}.option.default-option{color:#787861;font-style:italic;border-bottom:1px solid rgba(120,120,97,.35)}.option.default-option.selected{background-color:transparent;color:#787861;font-weight:400}.option:last-child{border-bottom:none}.no-results{padding:15px;text-align:center;color:#787861;font-style:italic;background:#e3e3d1;font-size:1.3rem}.options::-webkit-scrollbar{width:6px}.options::-webkit-scrollbar-track{background:#7878611a}.options::-webkit-scrollbar-thumb{background:#787861;border-radius:3px}.options::-webkit-scrollbar-thumb:hover{background:#a9a97f}@media (max-width: 768px){.select-header,.search-input,.option{padding:12px 15px}}\n"] });
|
|
2769
2769
|
}
|
|
2770
2770
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SelectCustomSearch, decorators: [{
|
|
2771
2771
|
type: Component,
|
|
@@ -2775,7 +2775,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
2775
2775
|
useExisting: forwardRef(() => SelectCustomSearch),
|
|
2776
2776
|
multi: true,
|
|
2777
2777
|
},
|
|
2778
|
-
], template: "<div class=\"select-container\">\r\n <div\r\n class=\"select-header\"\r\n [class.active]=\"isOpen()\"\r\n [class.disabled]=\"isBlocked()\"\r\n [class.readonly]=\"isBlocked()\"\r\n (click)=\"!isBlocked() && toggle()\"\r\n (keydown)=\"!isBlocked() && onKeyDown($event)\"\r\n tabindex=\"0\"\r\n >\r\n <span class=\"selected-text\" [class.placeholder]=\"!selectedOption()\">\r\n {{ selectedOption()?.label || placeholder() }}\r\n </span>\r\n\r\n <span class=\"arrow\" [class.open]=\"isOpen()\"></span>\r\n </div>\r\n\r\n @if (isOpen()) {\r\n <div class=\"dropdown\" [class.dropdown--upward]=\"openUpward()\">\r\n <input\r\n type=\"text\"\r\n class=\"search-input\"\r\n [value]=\"searchTerm()\"\r\n placeholder=\"Buscar...\"\r\n (input)=\"!isBlocked() &&onSearch($event)\"\r\n (keydown)=\"!isBlocked() && onKeyDown($event)\"\r\n />\r\n\r\n @if (filteredOptions().length > 0) {\r\n <div class=\"options\">\r\n <div\r\n class=\"option default-option\"\r\n [class.selected]=\"selectedValue() === null\"\r\n (click)=\"!isBlocked() && clearSelection()\"\r\n >\r\n {{ placeholder() }}\r\n </div>\r\n @for (option of filteredOptions(); track option.value) {\r\n <div\r\n class=\"option\"\r\n [class.selected]=\"option.value === selectedValue()\"\r\n (click)=\"!isBlocked() && selectOption(option)\"\r\n [attr.disabled]=\"isBlocked()\"\r\n >\r\n {{ option.label }}\r\n </div>\r\n }\r\n </div>\r\n } @else {\r\n <div class=\"no-results\">No se encontraron resultados</div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [".select-container{position:relative;width:100%}.select-header{width:100%;border:1px solid #787861;border-radius:5px;padding:15px;background-color:transparent;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:auto}.select-header:hover,.select-header:focus{outline:none;border-color:#a9a97f}.select-header.active{border-color:#a9a97f;outline:none}.select-header.disabled,.select-header.readonly{cursor:not-allowed;opacity:.6;pointer-events:none}.selected-text{color:#454733;font-size:1.3rem;text-transform:capitalize}.selected-text.placeholder{color:#787861;text-transform:capitalize}.arrow{width:15px;height:15px;background-image:url(\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\");background-repeat:no-repeat;background-size:15px;background-position:center;color:#787861;flex-shrink:0;transition:transform .2s}.arrow.open{transform:rotate(180deg)}.dropdown{position:absolute;top:100%;left:0;right:0;background:#e3e3d1;border:1px solid #787861;border-top:none;border-radius:0 0 5px 5px;max-height:250px;overflow:hidden;z-index:100000;box-shadow:0 2px 8px #0000001a}.dropdown--upward{top:auto;bottom:calc(100% + 20px);border-top:1px solid #787861;border-
|
|
2778
|
+
], template: "<div class=\"select-container\">\r\n <div\r\n class=\"select-header\"\r\n [class.active]=\"isOpen()\"\r\n [class.disabled]=\"isBlocked()\"\r\n [class.readonly]=\"isBlocked()\"\r\n (click)=\"!isBlocked() && toggle()\"\r\n (keydown)=\"!isBlocked() && onKeyDown($event)\"\r\n tabindex=\"0\"\r\n >\r\n <span class=\"selected-text\" [class.placeholder]=\"!selectedOption()\">\r\n {{ selectedOption()?.label || placeholder() }}\r\n </span>\r\n\r\n <span class=\"arrow\" [class.open]=\"isOpen()\"></span>\r\n </div>\r\n\r\n @if (isOpen()) {\r\n <div class=\"dropdown\" [class.dropdown--upward]=\"openUpward()\">\r\n <input\r\n type=\"text\"\r\n class=\"search-input\"\r\n [value]=\"searchTerm()\"\r\n placeholder=\"Buscar...\"\r\n (input)=\"!isBlocked() &&onSearch($event)\"\r\n (keydown)=\"!isBlocked() && onKeyDown($event)\"\r\n />\r\n\r\n @if (filteredOptions().length > 0) {\r\n <div class=\"options\">\r\n <div\r\n class=\"option default-option\"\r\n [class.selected]=\"selectedValue() === null\"\r\n (click)=\"!isBlocked() && clearSelection()\"\r\n >\r\n {{ placeholder() }}\r\n </div>\r\n @for (option of filteredOptions(); track option.value) {\r\n <div\r\n class=\"option\"\r\n [class.selected]=\"option.value === selectedValue()\"\r\n (click)=\"!isBlocked() && selectOption(option)\"\r\n [attr.disabled]=\"isBlocked()\"\r\n >\r\n {{ option.label }}\r\n </div>\r\n }\r\n </div>\r\n } @else {\r\n <div class=\"no-results\">No se encontraron resultados</div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [".select-container{position:relative;width:100%}.select-header{width:100%;border:1px solid #787861;border-radius:5px;padding:15px;background-color:transparent;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:auto}.select-header:hover,.select-header:focus{outline:none;border-color:#a9a97f}.select-header.active{border-color:#a9a97f;outline:none}.select-header.disabled,.select-header.readonly{cursor:not-allowed;opacity:.6;pointer-events:none}.selected-text{color:#454733;font-size:1.3rem;text-transform:capitalize}.selected-text.placeholder{color:#787861;text-transform:capitalize}.arrow{width:15px;height:15px;background-image:url(\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\");background-repeat:no-repeat;background-size:15px;background-position:center;color:#787861;flex-shrink:0;transition:transform .2s}.arrow.open{transform:rotate(180deg)}.dropdown{position:absolute;top:100%;left:0;right:0;background:#e3e3d1;border:1px solid #787861;border-top:none;border-radius:0 0 5px 5px;max-height:250px;overflow:hidden;z-index:100000;box-shadow:0 2px 8px #0000001a}.dropdown--upward{top:auto;bottom:calc(100% + 20px);border-top:1px solid #787861;border-radius:5px;box-shadow:0 -2px 8px #0000001a}.search-input{width:100%;border:none;border-bottom:1px solid #787861;border-radius:0;padding:15px;background-color:transparent;outline:none;font-size:inherit;color:#454733;font-size:1.3rem}.search-input::placeholder{color:#787861;text-transform:capitalize}.search-input:focus{outline:none;border-bottom-color:#a9a97f}.options{max-height:180px;overflow-y:auto;background:#e3e3d1}.option{padding:15px;cursor:pointer;border-bottom:1px solid rgba(120,120,97,.2);color:#454733;background:#e3e3d1;font-size:1.3rem;text-transform:capitalize}.option:hover{background-color:#a9a97f1a;color:#454733}.option.selected{background-color:#a9a97f;color:#e3e3d1;font-weight:500}.option.default-option{color:#787861;font-style:italic;border-bottom:1px solid rgba(120,120,97,.35)}.option.default-option.selected{background-color:transparent;color:#787861;font-weight:400}.option:last-child{border-bottom:none}.no-results{padding:15px;text-align:center;color:#787861;font-style:italic;background:#e3e3d1;font-size:1.3rem}.options::-webkit-scrollbar{width:6px}.options::-webkit-scrollbar-track{background:#7878611a}.options::-webkit-scrollbar-thumb{background:#787861;border-radius:3px}.options::-webkit-scrollbar-thumb:hover{background:#a9a97f}@media (max-width: 768px){.select-header,.search-input,.option{padding:12px 15px}}\n"] }]
|
|
2779
2779
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], onDocumentClick: [{
|
|
2780
2780
|
type: HostListener,
|
|
2781
2781
|
args: ['document:click', ['$event']]
|
|
@@ -2840,11 +2840,13 @@ class DynamicFormFields {
|
|
|
2840
2840
|
form = input.required(...(ngDevMode ? [{ debugName: "form" }] : []));
|
|
2841
2841
|
sections = input([], ...(ngDevMode ? [{ debugName: "sections" }] : []));
|
|
2842
2842
|
compact = input(false, ...(ngDevMode ? [{ debugName: "compact" }] : []));
|
|
2843
|
+
el = inject(ElementRef);
|
|
2843
2844
|
copyFromSubscriptions = [];
|
|
2844
2845
|
realTimeCopySubscriptions = [];
|
|
2845
2846
|
ngOnInit() {
|
|
2846
2847
|
setTimeout(() => {
|
|
2847
2848
|
this.setupCopyFromLogic();
|
|
2849
|
+
this.initCurrencyDisplay();
|
|
2848
2850
|
}, 100);
|
|
2849
2851
|
}
|
|
2850
2852
|
getDatePickerMode(fieldType) {
|
|
@@ -2984,6 +2986,68 @@ class DynamicFormFields {
|
|
|
2984
2986
|
}
|
|
2985
2987
|
this.onCheckboxChange(event, key, optionIndex);
|
|
2986
2988
|
}
|
|
2989
|
+
// ── currency-cop ─────────────────────────────────────────────────────────
|
|
2990
|
+
onCurrencyInput(event, key) {
|
|
2991
|
+
const input = event.target;
|
|
2992
|
+
const raw = input.value;
|
|
2993
|
+
// Quitar $ y puntos de miles; conservar dígitos y una coma decimal
|
|
2994
|
+
const stripped = raw.replace(/\$/g, '').replace(/\./g, '');
|
|
2995
|
+
const sanitized = stripped.replace(/[^\d,]/g, '');
|
|
2996
|
+
const commaIdx = sanitized.indexOf(',');
|
|
2997
|
+
let intStr;
|
|
2998
|
+
let decStr = null;
|
|
2999
|
+
if (commaIdx >= 0) {
|
|
3000
|
+
intStr = sanitized.slice(0, commaIdx);
|
|
3001
|
+
decStr = sanitized.slice(commaIdx + 1).replace(/,/g, '');
|
|
3002
|
+
}
|
|
3003
|
+
else {
|
|
3004
|
+
intStr = sanitized;
|
|
3005
|
+
}
|
|
3006
|
+
// Eliminar ceros a la izquierda ("020" → "20"), preservar "0" solo
|
|
3007
|
+
intStr = intStr.replace(/^0+(?=\d)/, '');
|
|
3008
|
+
const formattedInt = intStr ? intStr.replace(/\B(?=(\d{3})+(?!\d))/g, '.') : '';
|
|
3009
|
+
let displayValue = '';
|
|
3010
|
+
if (formattedInt) {
|
|
3011
|
+
displayValue = `$${formattedInt}`;
|
|
3012
|
+
if (decStr !== null)
|
|
3013
|
+
displayValue += `,${decStr}`;
|
|
3014
|
+
}
|
|
3015
|
+
else if (decStr !== null) {
|
|
3016
|
+
displayValue = `$0,${decStr}`;
|
|
3017
|
+
}
|
|
3018
|
+
// Actualizar el DOM directamente para preservar el formato
|
|
3019
|
+
input.value = displayValue;
|
|
3020
|
+
const ctrl = this.form().get(key);
|
|
3021
|
+
if (!ctrl)
|
|
3022
|
+
return;
|
|
3023
|
+
const numStr = decStr !== null ? `${intStr || '0'}.${decStr}` : intStr;
|
|
3024
|
+
const numericValue = numStr ? parseFloat(numStr) : null;
|
|
3025
|
+
// emitModelToViewChange: false evita que Angular sobreescriba el valor formateado
|
|
3026
|
+
ctrl.setValue(numericValue, { emitModelToViewChange: false });
|
|
3027
|
+
}
|
|
3028
|
+
formatCurrencyCOP(value) {
|
|
3029
|
+
if (value === null || value === undefined || value === '')
|
|
3030
|
+
return '';
|
|
3031
|
+
const num = Number(value);
|
|
3032
|
+
if (isNaN(num))
|
|
3033
|
+
return '';
|
|
3034
|
+
const parts = num.toString().split('.');
|
|
3035
|
+
const intPart = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, '.');
|
|
3036
|
+
return parts[1] && Number(parts[1]) > 0 ? `$${intPart},${parts[1]}` : `$${intPart}`;
|
|
3037
|
+
}
|
|
3038
|
+
initCurrencyDisplay() {
|
|
3039
|
+
const inputs = this.el.nativeElement.querySelectorAll('[data-currency-key]');
|
|
3040
|
+
inputs.forEach((inputEl) => {
|
|
3041
|
+
const key = inputEl.getAttribute('data-currency-key');
|
|
3042
|
+
if (!key)
|
|
3043
|
+
return;
|
|
3044
|
+
const ctrl = this.form().get(key);
|
|
3045
|
+
if (ctrl?.value != null && ctrl.value !== '') {
|
|
3046
|
+
inputEl.value = this.formatCurrencyCOP(ctrl.value);
|
|
3047
|
+
}
|
|
3048
|
+
});
|
|
3049
|
+
}
|
|
3050
|
+
// ─────────────────────────────────────────────────────────────────────────
|
|
2987
3051
|
ngOnDestroy() {
|
|
2988
3052
|
this.copyFromSubscriptions.forEach((sub) => sub.unsubscribe());
|
|
2989
3053
|
this.realTimeCopySubscriptions.forEach((item) => item.subscription.unsubscribe());
|
|
@@ -3030,11 +3094,11 @@ class DynamicFormFields {
|
|
|
3030
3094
|
submitBtn?.click();
|
|
3031
3095
|
}
|
|
3032
3096
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DynamicFormFields, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3033
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DynamicFormFields, isStandalone: true, selector: "lib-dynamic-form-fields", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (form()) {\n<form class=\"form\" [formGroup]=\"form()\" [class.form--compact]=\"compact()\" (keydown)=\"onEnter($event)\">\n @for (sec of sections(); track $index) {\n <section class=\"section\">\n @if (sec.title) {\n <h3 class=\"section-title\">{{ sec.title }}</h3>\n } @if (sec.description) {\n <p class=\"section-desc\">{{ sec.description }}</p>\n }\n\n <div class=\"grid\">\n @for (run of getFieldRuns(sec.fields); track $index) {\n\n @if (run.isGroup) {\n <!-- toggle: wrapper que siempre ocupa la fila completa -->\n <div class=\"col col--group-wrapper\">\n @for (f of run.fields; track f.key) {\n <div class=\"group-item\">\n <lib-toggle-custom [key]=\"f.key\" [label]=\"f.label ?? ''\" [formControlName]=\"f.key\" />\n </div>\n }\n </div>\n\n } @else {\n <!-- Campos normales (incluye checkbox y radio con su col configurable) -->\n @for (f of run.fields; track f.key) {\n <div class=\"col\" [style.--col-span]=\"f.col || 6\">\n @if (['text','number','email', 'password', 'time'].includes(f.type))\n {\n <input\n class=\"input\"\n [type]=\"f.type\"\n [placeholder]=\"f.placeholder\"\n [formControlName]=\"f.key\"\n [readonly]=\"f.readonly || false\"\n (input)=\"onUppercaseInput($event, f.type, f.key)\"\n />\n } @if (['date', 'datetime-local'].includes(f.type)) {\n <lib-date-time-picker\n [mode]=\"getDatePickerMode(f.type)\"\n [placeholder]=\"\n f.placeholder ||\n (f.type === 'date'\n ? 'Seleccionar fecha'\n : 'Seleccionar fecha y hora')\n \"\n [formControlName]=\"f.key\"\n [minDate]=\"f.minDate || null\"\n [maxDate]=\"f.maxDate || null\"\n [readonly]=\"f.readonly || false\"\n />\n } @if (f.type === 'textarea') {\n <textarea\n class=\"input textarea\"\n [placeholder]=\"f.placeholder\"\n [formControlName]=\"f.key\"\n [rows]=\"f.rows ?? 6\"\n [style.resize]=\"(f.resizable ?? true) ? 'vertical' : 'none'\"\n [readonly]=\"f.readonly || false\"\n ></textarea>\n } @if (f.type === 'select') {\n <lib-select-custom-search\n [options]=\"f.options ?? []\"\n [placeholder]=\"f.placeholder || 'Seleccionar...'\"\n [formControlName]=\"f.key\"\n [readonly]=\"f.readonly || false\"\n />\n } @if (f.type === 'radio') {\n <div class=\"radio-group\">\n @for (o of f.options ?? []; track o.value) {\n <label class=\"radio\">\n <input\n type=\"radio\"\n [value]=\"o.value\"\n [formControlName]=\"f.key\"\n [readonly]=\"f.readonly || false\"\n />\n <span class=\"radio-mark\"></span>\n <span class=\"radio-label\">{{ o.label }}</span>\n </label>\n }\n </div>\n } @if (f.type === 'checkbox') {\n <div class=\"checkbox-group\"\n [class.checkbox-group--cards]=\"f.variant === 'cards'\"\n [class.checkbox-group--lowercase]=\"f.uppercase === false\"\n [class.checkbox-group--readonly]=\"f.readonly && !f.disabled\">\n @for (o of f.options ?? []; track o.value) {\n <label class=\"checkbox\">\n <input\n type=\"checkbox\"\n [checked]=\"getCheckboxArray(f.key)?.at($index)?.value\"\n (change)=\"onCheckboxInteract($event, f, $index)\"\n [disabled]=\"f.disabled || f.readonly || false\"\n />\n <span class=\"checkbox-mark\"></span>\n <span class=\"checkbox-text\">\n <span class=\"checkbox-label\">{{ o.label }}</span>\n @if (o.subtitle) {\n <span class=\"checkbox-subtitle\">{{ o.subtitle }}</span>\n }\n </span>\n </label>\n }\n </div>\n } @if (f.type === 'disabled') {\n <input\n class=\"input input--disabled\"\n [placeholder]=\"f.placeholder || 'Autom\u00E1tico'\"\n disabled\n />\n } @if (ctrl(f.key)?.touched && ctrl(f.key)?.invalid) {\n <div class=\"error\">\n @if (ctrl(f.key)?.errors?.['required']) {\n <span>Campo requerido</span>\n } @if (ctrl(f.key)?.errors?.['email']) {\n <span>Correo inv\u00E1lido</span>\n } @if (ctrl(f.key)?.errors?.['pattern']) {\n <span>\n @switch (f.patternType) { @case ('numbers') { Solo se permiten\n n\u00FAmeros } @case ('phone') { Formato de tel\u00E9fono inv\u00E1lido } @case\n ('text') { Solo se permiten letras y espacios } @case ('username') {\n Solo se permiten letras, n\u00FAmeros, puntos y guiones bajos (no al\n inicio ni al final) } @case ('alphanumeric') { Solo se permiten\n letras y n\u00FAmeros } @default { Formato inv\u00E1lido } }\n </span>\n } @if (ctrl(f.key)?.errors?.['notMatching']) {\n <span>Las contrase\u00F1as no coinciden</span>\n }\n </div>\n }\n\n @if(f.label && f.type !== 'toggle') {\n <label\n [class.label-radio]=\"f.type === 'radio'\"\n [class.label-checkbox]=\"f.type === 'checkbox'\"\n [class.label-disabled]=\"f.readonly || f.disabled\"\n class=\"label\"\n >\n {{ f.label }} </label>\n }\n </div>\n }\n }\n\n }\n </div>\n </section>\n }\n</form>\n}\n", styles: [".form{width:100%}.form{display:grid}.section{padding:20px 0 0}.section-title{font-size:1.6rem;font-weight:700;margin-bottom:30px}.section-desc{margin:0 0 .75rem;color:#666}.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}.form.form--compact .grid{gap:12px}.col{grid-column:span var(--col-span, 6);min-width:0;width:100%;position:relative;padding-bottom:20px}.col--group-wrapper{grid-column:span 12;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding-bottom:0}.form.form--compact .col--group-wrapper{gap:12px}.group-item--full{grid-column:span 4}.form.form--compact .col{padding-bottom:0}.label{position:absolute;top:-8px;left:12px;font-size:1.2rem;color:#454733;background-color:var(--sl-form-surface, #E3E3D1);padding:0 4px;font-weight:500;text-transform:capitalize}.input{width:100%;border:1px solid #787861;border-radius:5px;padding:15px;background-color:transparent}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=date]::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:auto;height:auto;color:transparent;background:transparent}.input:focus{outline:none;border-color:#a9a97f}.input--disabled{color:#888}.input:-webkit-autofill,.input:-webkit-autofill:hover,.input:-webkit-autofill:focus,.input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px var(--sl-form-surface, #E3E3D1) inset;box-shadow:0 0 0 1000px var(--sl-form-surface, #E3E3D1) inset;-webkit-text-fill-color:#454733;caret-color:#454733;transition:background-color 9999s ease-in-out 0s}.input:-moz-autofill,.textarea:-moz-autofill{box-shadow:0 0 0 1000px var(--sl-form-surface, #E3E3D1) inset}.input[readonly]:-webkit-autofill,.input:disabled:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--sl-form-surface, #E3E3D1) inset;-webkit-text-fill-color:#a9a97f}.label-radio{font-size:1.4rem;position:static;padding-left:0}.radio-group,.checkbox-group{display:flex;gap:2rem;padding:.5rem 0}.form.form--compact .checkbox-group{padding:0 8px 0 0}.checkbox,.radio{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:1.4rem;color:#1c1c12;-webkit-user-select:none;user-select:none}.checkbox:has(.checkbox-subtitle){align-items:flex-start}.checkbox:has(.checkbox-subtitle) .checkbox-mark,.checkbox-group--cards .checkbox-mark{margin-top:2px}.checkbox-text{display:flex;flex-direction:column;gap:2px}.checkbox-subtitle{font-size:1.2rem;color:#787861;font-weight:400;line-height:1.3}.checkbox-label,.checkbox-subtitle{text-transform:uppercase}.checkbox-group--lowercase .checkbox-label,.checkbox-group--lowercase .checkbox-subtitle{text-transform:none}.checkbox:hover{color:#454733}.checkbox input,.radio input{position:absolute;opacity:0;pointer-events:none}.checkbox-mark{width:18px;height:18px;border:2px solid #787861;border-radius:4px;background-color:transparent;position:relative;display:inline-flex;align-items:center;justify-content:center;transition:all .2s ease}.checkbox input:checked+.checkbox-mark{background-color:#596300;border-color:#596300}.checkbox input:checked+.checkbox-mark:after{content:\"\";position:absolute;width:6px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:translate(-50%,-60%) rotate(45deg);top:50%;left:50%}.radio-mark{width:18px;height:18px;border:2px solid #787861;border-radius:50%;background-color:transparent;position:relative;transition:all .2s ease}.radio input:checked+.radio-mark{border-color:#596300}.radio input:checked+.radio-mark:after{content:\"\";width:8px;height:8px;background-color:#454733;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.radio:hover .radio-mark{border-color:#a9a97f}.checkbox input:disabled+.checkbox-mark,.radio input:disabled+.radio-mark{border-color:#a9a97f;background-color:var(--sl-form-surface, #E3E3D1);cursor:not-allowed}.checkbox:has(input:disabled),.radio:has(input:disabled){cursor:not-allowed}.checkbox:has(input:disabled) .checkbox-text,.radio:has(input:disabled) .radio-label{color:#1c1c1266}.checkbox-group--cards .checkbox:has(input:disabled){opacity:.5;pointer-events:none}.checkbox-group--readonly .checkbox{opacity:.6;pointer-events:none;cursor:not-allowed}.checkbox-group--readonly .checkbox input:disabled+.checkbox-mark{border-color:#787861;background-color:transparent}.checkbox-group--readonly .checkbox input:disabled:checked+.checkbox-mark{background-color:#596300;border-color:#596300}.checkbox-group--cards.checkbox-group--readonly .checkbox{opacity:.8;pointer-events:none}.checkbox-group--cards .checkbox{display:flex;align-items:flex-start;width:100%;gap:12px;padding:14px 16px;background-color:#f0f0db;font-size:14px;font-weight:300;text-transform:uppercase;border-radius:10px;border:1px solid transparent;transition:all .2s ease;cursor:pointer;position:relative}.checkbox-group--cards .checkbox:hover{background-color:#dee58f}.error{position:absolute;bottom:0;left:0;font-size:1.2rem;color:#b00020;width:100%;height:15px;display:none}.col:has(.error) .error{display:block}.textarea{resize:vertical;min-height:100px;max-height:300px;line-height:1.5;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#a9a97f transparent}.textarea::-webkit-scrollbar{width:8px}.textarea::-webkit-scrollbar-track{background:transparent;margin:4px 0}.textarea::-webkit-scrollbar-thumb{background:#a9a97f;border-radius:4px}.textarea::-webkit-scrollbar-thumb:hover{background:#787861}.textarea:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--sl-form-surface, #E3E3D1) inset;-webkit-text-fill-color:#454733}select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url(\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\");background-repeat:no-repeat;background-size:15px;background-position:right 15px center;cursor:pointer}select:invalid{color:#787861}select.placeholder-selected{color:#787861}select:not(.placeholder-selected){color:#000}select option{color:#454733;cursor:pointer}input[type=date]{color:#787861!important}input[type=date]:valid{color:#454733!important}.label-disabled{color:#1c1c1266}.input:disabled,.input--disabled,.input.disabled,.input[readonly]{border:1px solid #a9a97f;color:#a9a97f;cursor:not-allowed;pointer-events:none}@media (max-width: 768px){.grid{grid-template-columns:1fr}.col{grid-column:span 1!important}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: SelectCustomSearch, selector: "lib-select-custom-search", inputs: ["options", "placeholder", "readonly"], outputs: ["selectionChange"] }, { kind: "component", type: DateTimePicker, selector: "lib-date-time-picker", inputs: ["mode", "placeholder", "minDate", "maxDate", "readonly"], outputs: ["dateChange"] }, { kind: "component", type: ToggleCustom, selector: "lib-toggle-custom", inputs: ["label", "key", "disabled", "checked"], outputs: ["checkedChange", "toggleChange"] }] });
|
|
3097
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DynamicFormFields, isStandalone: true, selector: "lib-dynamic-form-fields", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (form()) {\n<form class=\"form\" [formGroup]=\"form()\" [class.form--compact]=\"compact()\" (keydown)=\"onEnter($event)\">\n @for (sec of sections(); track $index) {\n <section class=\"section\">\n @if (sec.title) {\n <h3 class=\"section-title\">{{ sec.title }}</h3>\n } @if (sec.description) {\n <p class=\"section-desc\">{{ sec.description }}</p>\n }\n\n <div class=\"grid\">\n @for (run of getFieldRuns(sec.fields); track $index) {\n\n @if (run.isGroup) {\n <!-- toggle: wrapper que siempre ocupa la fila completa -->\n <div class=\"col col--group-wrapper\">\n @for (f of run.fields; track f.key) {\n <div class=\"group-item\">\n <lib-toggle-custom [key]=\"f.key\" [label]=\"f.label ?? ''\" [formControlName]=\"f.key\" />\n </div>\n }\n </div>\n\n } @else {\n <!-- Campos normales (incluye checkbox y radio con su col configurable) -->\n @for (f of run.fields; track f.key) {\n <div class=\"col\" [style.--col-span]=\"f.col || 6\">\n @if (['text','number','email', 'password', 'time'].includes(f.type))\n {\n <input\n class=\"input\"\n [type]=\"f.type\"\n [placeholder]=\"f.placeholder\"\n [formControlName]=\"f.key\"\n [readonly]=\"f.readonly || false\"\n (input)=\"onUppercaseInput($event, f.type, f.key)\"\n />\n } @if (f.type === 'currency-cop') {\n <input\n type=\"text\"\n class=\"input\"\n inputmode=\"decimal\"\n [placeholder]=\"f.placeholder || '$0'\"\n [formControlName]=\"f.key\"\n [attr.data-currency-key]=\"f.key\"\n [readonly]=\"f.readonly || false\"\n (input)=\"onCurrencyInput($event, f.key)\"\n />\n } @if (['date', 'datetime-local'].includes(f.type)) {\n <lib-date-time-picker\n [mode]=\"getDatePickerMode(f.type)\"\n [placeholder]=\"\n f.placeholder ||\n (f.type === 'date'\n ? 'Seleccionar fecha'\n : 'Seleccionar fecha y hora')\n \"\n [formControlName]=\"f.key\"\n [minDate]=\"f.minDate || null\"\n [maxDate]=\"f.maxDate || null\"\n [readonly]=\"f.readonly || false\"\n />\n } @if (f.type === 'textarea') {\n <textarea\n class=\"input textarea\"\n [placeholder]=\"f.placeholder\"\n [formControlName]=\"f.key\"\n [rows]=\"f.rows ?? 6\"\n [style.resize]=\"(f.resizable ?? true) ? 'vertical' : 'none'\"\n [readonly]=\"f.readonly || false\"\n ></textarea>\n } @if (f.type === 'select') {\n <lib-select-custom-search\n [options]=\"f.options ?? []\"\n [placeholder]=\"f.placeholder || 'Seleccionar...'\"\n [formControlName]=\"f.key\"\n [readonly]=\"f.readonly || false\"\n />\n } @if (f.type === 'radio') {\n <div class=\"radio-group\">\n @for (o of f.options ?? []; track o.value) {\n <label class=\"radio\">\n <input\n type=\"radio\"\n [value]=\"o.value\"\n [formControlName]=\"f.key\"\n [readonly]=\"f.readonly || false\"\n />\n <span class=\"radio-mark\"></span>\n <span class=\"radio-label\">{{ o.label }}</span>\n </label>\n }\n </div>\n } @if (f.type === 'checkbox') {\n <div class=\"checkbox-group\"\n [class.checkbox-group--cards]=\"f.variant === 'cards'\"\n [class.checkbox-group--lowercase]=\"f.uppercase === false\"\n [class.checkbox-group--readonly]=\"f.readonly && !f.disabled\">\n @for (o of f.options ?? []; track o.value) {\n <label class=\"checkbox\">\n <input\n type=\"checkbox\"\n [checked]=\"getCheckboxArray(f.key)?.at($index)?.value\"\n (change)=\"onCheckboxInteract($event, f, $index)\"\n [disabled]=\"f.disabled || f.readonly || false\"\n />\n <span class=\"checkbox-mark\"></span>\n <span class=\"checkbox-text\">\n <span class=\"checkbox-label\">{{ o.label }}</span>\n @if (o.subtitle) {\n <span class=\"checkbox-subtitle\">{{ o.subtitle }}</span>\n }\n </span>\n </label>\n }\n </div>\n } @if (f.type === 'disabled') {\n <input\n class=\"input input--disabled\"\n [placeholder]=\"f.placeholder || 'Autom\u00E1tico'\"\n disabled\n />\n } @if (ctrl(f.key)?.touched && ctrl(f.key)?.invalid) {\n <div class=\"error\">\n @if (ctrl(f.key)?.errors?.['required']) {\n <span>Campo requerido</span>\n } @if (ctrl(f.key)?.errors?.['email']) {\n <span>Correo inv\u00E1lido</span>\n } @if (ctrl(f.key)?.errors?.['pattern']) {\n <span>\n @switch (f.patternType) { @case ('numbers') { Solo se permiten\n n\u00FAmeros } @case ('phone') { Formato de tel\u00E9fono inv\u00E1lido } @case\n ('text') { Solo se permiten letras y espacios } @case ('username') {\n Solo se permiten letras, n\u00FAmeros, puntos y guiones bajos (no al\n inicio ni al final) } @case ('alphanumeric') { Solo se permiten\n letras y n\u00FAmeros } @default { Formato inv\u00E1lido } }\n </span>\n } @if (ctrl(f.key)?.errors?.['notMatching']) {\n <span>Las contrase\u00F1as no coinciden</span>\n }\n </div>\n }\n\n @if(f.label && f.type !== 'toggle') {\n <label\n [class.label-radio]=\"f.type === 'radio'\"\n [class.label-checkbox]=\"f.type === 'checkbox'\"\n [class.label-disabled]=\"f.readonly || f.disabled\"\n class=\"label\"\n >\n {{ f.label }} </label>\n }\n </div>\n }\n }\n\n }\n </div>\n </section>\n }\n</form>\n}\n", styles: [".form{width:100%}.form{display:grid}.section{padding:20px 0 0}.section-title{font-size:1.6rem;font-weight:700;margin-bottom:30px}.section-desc{margin:0 0 .75rem;color:#666}.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}.form.form--compact .grid{gap:12px}.col{grid-column:span var(--col-span, 6);min-width:0;width:100%;position:relative;padding-bottom:20px}.col--group-wrapper{grid-column:span 12;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding-bottom:0}.form.form--compact .col--group-wrapper{gap:12px}.group-item--full{grid-column:span 4}.form.form--compact .col{padding-bottom:0}.label{position:absolute;top:-8px;left:12px;font-size:1.2rem;color:#454733;background-color:var(--sl-form-surface, #E3E3D1);padding:0 4px;font-weight:500;text-transform:capitalize}.input{width:100%;border:1px solid #787861;border-radius:5px;padding:15px;background-color:transparent}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=date]::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:auto;height:auto;color:transparent;background:transparent}.input:focus{outline:none;border-color:#a9a97f}.input--disabled{color:#888}.input:-webkit-autofill,.input:-webkit-autofill:hover,.input:-webkit-autofill:focus,.input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px var(--sl-form-surface, #E3E3D1) inset;box-shadow:0 0 0 1000px var(--sl-form-surface, #E3E3D1) inset;-webkit-text-fill-color:#454733;caret-color:#454733;transition:background-color 9999s ease-in-out 0s}.input:-moz-autofill,.textarea:-moz-autofill{box-shadow:0 0 0 1000px var(--sl-form-surface, #E3E3D1) inset}.input[readonly]:-webkit-autofill,.input:disabled:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--sl-form-surface, #E3E3D1) inset;-webkit-text-fill-color:#a9a97f}.label-radio{font-size:1.4rem;position:static;padding-left:0}.radio-group,.checkbox-group{display:flex;gap:2rem;padding:.5rem 0}.form.form--compact .checkbox-group{padding:0 8px 0 0}.checkbox,.radio{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:1.4rem;color:#1c1c12;-webkit-user-select:none;user-select:none}.checkbox:has(.checkbox-subtitle){align-items:flex-start}.checkbox:has(.checkbox-subtitle) .checkbox-mark,.checkbox-group--cards .checkbox-mark{margin-top:2px}.checkbox-text{display:flex;flex-direction:column;gap:2px}.checkbox-subtitle{font-size:1.2rem;color:#787861;font-weight:400;line-height:1.3}.checkbox-label,.checkbox-subtitle{text-transform:uppercase}.checkbox-group--lowercase .checkbox-label,.checkbox-group--lowercase .checkbox-subtitle{text-transform:none}.checkbox:hover{color:#454733}.checkbox input,.radio input{position:absolute;opacity:0;pointer-events:none}.checkbox-mark{width:18px;height:18px;border:2px solid #787861;border-radius:4px;background-color:transparent;position:relative;display:inline-flex;align-items:center;justify-content:center;transition:all .2s ease}.checkbox input:checked+.checkbox-mark{background-color:#596300;border-color:#596300}.checkbox input:checked+.checkbox-mark:after{content:\"\";position:absolute;width:6px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:translate(-50%,-60%) rotate(45deg);top:50%;left:50%}.radio-mark{width:18px;height:18px;border:2px solid #787861;border-radius:50%;background-color:transparent;position:relative;transition:all .2s ease}.radio input:checked+.radio-mark{border-color:#596300}.radio input:checked+.radio-mark:after{content:\"\";width:8px;height:8px;background-color:#454733;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.radio:hover .radio-mark{border-color:#a9a97f}.checkbox input:disabled+.checkbox-mark,.radio input:disabled+.radio-mark{border-color:#a9a97f;background-color:var(--sl-form-surface, #E3E3D1);cursor:not-allowed}.checkbox:has(input:disabled),.radio:has(input:disabled){cursor:not-allowed}.checkbox:has(input:disabled) .checkbox-text,.radio:has(input:disabled) .radio-label{color:#1c1c1266}.checkbox-group--cards .checkbox:has(input:disabled){opacity:.5;pointer-events:none}.checkbox-group--readonly .checkbox{opacity:.6;pointer-events:none;cursor:not-allowed}.checkbox-group--readonly .checkbox input:disabled+.checkbox-mark{border-color:#787861;background-color:transparent}.checkbox-group--readonly .checkbox input:disabled:checked+.checkbox-mark{background-color:#596300;border-color:#596300}.checkbox-group--cards.checkbox-group--readonly .checkbox{opacity:.8;pointer-events:none}.checkbox-group--cards .checkbox{display:flex;align-items:flex-start;width:100%;gap:12px;padding:14px 16px;background-color:#f0f0db;font-size:14px;font-weight:300;text-transform:uppercase;border-radius:10px;border:1px solid transparent;transition:all .2s ease;cursor:pointer;position:relative}.checkbox-group--cards .checkbox:hover{background-color:#dee58f}.error{position:absolute;bottom:0;left:0;font-size:1.2rem;color:#b00020;width:100%;height:15px;display:none}.col:has(.error) .error{display:block}.textarea{resize:vertical;min-height:100px;max-height:300px;line-height:1.5;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#a9a97f transparent}.textarea::-webkit-scrollbar{width:8px}.textarea::-webkit-scrollbar-track{background:transparent;margin:4px 0}.textarea::-webkit-scrollbar-thumb{background:#a9a97f;border-radius:4px}.textarea::-webkit-scrollbar-thumb:hover{background:#787861}.textarea:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--sl-form-surface, #E3E3D1) inset;-webkit-text-fill-color:#454733}select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url(\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\");background-repeat:no-repeat;background-size:15px;background-position:right 15px center;cursor:pointer}select:invalid{color:#787861}select.placeholder-selected{color:#787861}select:not(.placeholder-selected){color:#000}select option{color:#454733;cursor:pointer}input[type=date]{color:#787861!important}input[type=date]:valid{color:#454733!important}.label-disabled{color:#1c1c1266}.input:disabled,.input--disabled,.input.disabled,.input[readonly]{border:1px solid #a9a97f;color:#a9a97f;cursor:not-allowed;pointer-events:none}@media (max-width: 768px){.grid{grid-template-columns:1fr}.col{grid-column:span 1!important}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: SelectCustomSearch, selector: "lib-select-custom-search", inputs: ["options", "placeholder", "readonly"], outputs: ["selectionChange"] }, { kind: "component", type: DateTimePicker, selector: "lib-date-time-picker", inputs: ["mode", "placeholder", "minDate", "maxDate", "readonly"], outputs: ["dateChange"] }, { kind: "component", type: ToggleCustom, selector: "lib-toggle-custom", inputs: ["label", "key", "disabled", "checked"], outputs: ["checkedChange", "toggleChange"] }] });
|
|
3034
3098
|
}
|
|
3035
3099
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DynamicFormFields, decorators: [{
|
|
3036
3100
|
type: Component,
|
|
3037
|
-
args: [{ selector: 'lib-dynamic-form-fields', standalone: true, imports: [ReactiveFormsModule, SelectCustomSearch, DateTimePicker, ToggleCustom], template: "@if (form()) {\n<form class=\"form\" [formGroup]=\"form()\" [class.form--compact]=\"compact()\" (keydown)=\"onEnter($event)\">\n @for (sec of sections(); track $index) {\n <section class=\"section\">\n @if (sec.title) {\n <h3 class=\"section-title\">{{ sec.title }}</h3>\n } @if (sec.description) {\n <p class=\"section-desc\">{{ sec.description }}</p>\n }\n\n <div class=\"grid\">\n @for (run of getFieldRuns(sec.fields); track $index) {\n\n @if (run.isGroup) {\n <!-- toggle: wrapper que siempre ocupa la fila completa -->\n <div class=\"col col--group-wrapper\">\n @for (f of run.fields; track f.key) {\n <div class=\"group-item\">\n <lib-toggle-custom [key]=\"f.key\" [label]=\"f.label ?? ''\" [formControlName]=\"f.key\" />\n </div>\n }\n </div>\n\n } @else {\n <!-- Campos normales (incluye checkbox y radio con su col configurable) -->\n @for (f of run.fields; track f.key) {\n <div class=\"col\" [style.--col-span]=\"f.col || 6\">\n @if (['text','number','email', 'password', 'time'].includes(f.type))\n {\n <input\n class=\"input\"\n [type]=\"f.type\"\n [placeholder]=\"f.placeholder\"\n [formControlName]=\"f.key\"\n [readonly]=\"f.readonly || false\"\n (input)=\"onUppercaseInput($event, f.type, f.key)\"\n />\n } @if (['date', 'datetime-local'].includes(f.type)) {\n <lib-date-time-picker\n [mode]=\"getDatePickerMode(f.type)\"\n [placeholder]=\"\n f.placeholder ||\n (f.type === 'date'\n ? 'Seleccionar fecha'\n : 'Seleccionar fecha y hora')\n \"\n [formControlName]=\"f.key\"\n [minDate]=\"f.minDate || null\"\n [maxDate]=\"f.maxDate || null\"\n [readonly]=\"f.readonly || false\"\n />\n } @if (f.type === 'textarea') {\n <textarea\n class=\"input textarea\"\n [placeholder]=\"f.placeholder\"\n [formControlName]=\"f.key\"\n [rows]=\"f.rows ?? 6\"\n [style.resize]=\"(f.resizable ?? true) ? 'vertical' : 'none'\"\n [readonly]=\"f.readonly || false\"\n ></textarea>\n } @if (f.type === 'select') {\n <lib-select-custom-search\n [options]=\"f.options ?? []\"\n [placeholder]=\"f.placeholder || 'Seleccionar...'\"\n [formControlName]=\"f.key\"\n [readonly]=\"f.readonly || false\"\n />\n } @if (f.type === 'radio') {\n <div class=\"radio-group\">\n @for (o of f.options ?? []; track o.value) {\n <label class=\"radio\">\n <input\n type=\"radio\"\n [value]=\"o.value\"\n [formControlName]=\"f.key\"\n [readonly]=\"f.readonly || false\"\n />\n <span class=\"radio-mark\"></span>\n <span class=\"radio-label\">{{ o.label }}</span>\n </label>\n }\n </div>\n } @if (f.type === 'checkbox') {\n <div class=\"checkbox-group\"\n [class.checkbox-group--cards]=\"f.variant === 'cards'\"\n [class.checkbox-group--lowercase]=\"f.uppercase === false\"\n [class.checkbox-group--readonly]=\"f.readonly && !f.disabled\">\n @for (o of f.options ?? []; track o.value) {\n <label class=\"checkbox\">\n <input\n type=\"checkbox\"\n [checked]=\"getCheckboxArray(f.key)?.at($index)?.value\"\n (change)=\"onCheckboxInteract($event, f, $index)\"\n [disabled]=\"f.disabled || f.readonly || false\"\n />\n <span class=\"checkbox-mark\"></span>\n <span class=\"checkbox-text\">\n <span class=\"checkbox-label\">{{ o.label }}</span>\n @if (o.subtitle) {\n <span class=\"checkbox-subtitle\">{{ o.subtitle }}</span>\n }\n </span>\n </label>\n }\n </div>\n } @if (f.type === 'disabled') {\n <input\n class=\"input input--disabled\"\n [placeholder]=\"f.placeholder || 'Autom\u00E1tico'\"\n disabled\n />\n } @if (ctrl(f.key)?.touched && ctrl(f.key)?.invalid) {\n <div class=\"error\">\n @if (ctrl(f.key)?.errors?.['required']) {\n <span>Campo requerido</span>\n } @if (ctrl(f.key)?.errors?.['email']) {\n <span>Correo inv\u00E1lido</span>\n } @if (ctrl(f.key)?.errors?.['pattern']) {\n <span>\n @switch (f.patternType) { @case ('numbers') { Solo se permiten\n n\u00FAmeros } @case ('phone') { Formato de tel\u00E9fono inv\u00E1lido } @case\n ('text') { Solo se permiten letras y espacios } @case ('username') {\n Solo se permiten letras, n\u00FAmeros, puntos y guiones bajos (no al\n inicio ni al final) } @case ('alphanumeric') { Solo se permiten\n letras y n\u00FAmeros } @default { Formato inv\u00E1lido } }\n </span>\n } @if (ctrl(f.key)?.errors?.['notMatching']) {\n <span>Las contrase\u00F1as no coinciden</span>\n }\n </div>\n }\n\n @if(f.label && f.type !== 'toggle') {\n <label\n [class.label-radio]=\"f.type === 'radio'\"\n [class.label-checkbox]=\"f.type === 'checkbox'\"\n [class.label-disabled]=\"f.readonly || f.disabled\"\n class=\"label\"\n >\n {{ f.label }} </label>\n }\n </div>\n }\n }\n\n }\n </div>\n </section>\n }\n</form>\n}\n", styles: [".form{width:100%}.form{display:grid}.section{padding:20px 0 0}.section-title{font-size:1.6rem;font-weight:700;margin-bottom:30px}.section-desc{margin:0 0 .75rem;color:#666}.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}.form.form--compact .grid{gap:12px}.col{grid-column:span var(--col-span, 6);min-width:0;width:100%;position:relative;padding-bottom:20px}.col--group-wrapper{grid-column:span 12;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding-bottom:0}.form.form--compact .col--group-wrapper{gap:12px}.group-item--full{grid-column:span 4}.form.form--compact .col{padding-bottom:0}.label{position:absolute;top:-8px;left:12px;font-size:1.2rem;color:#454733;background-color:var(--sl-form-surface, #E3E3D1);padding:0 4px;font-weight:500;text-transform:capitalize}.input{width:100%;border:1px solid #787861;border-radius:5px;padding:15px;background-color:transparent}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=date]::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:auto;height:auto;color:transparent;background:transparent}.input:focus{outline:none;border-color:#a9a97f}.input--disabled{color:#888}.input:-webkit-autofill,.input:-webkit-autofill:hover,.input:-webkit-autofill:focus,.input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px var(--sl-form-surface, #E3E3D1) inset;box-shadow:0 0 0 1000px var(--sl-form-surface, #E3E3D1) inset;-webkit-text-fill-color:#454733;caret-color:#454733;transition:background-color 9999s ease-in-out 0s}.input:-moz-autofill,.textarea:-moz-autofill{box-shadow:0 0 0 1000px var(--sl-form-surface, #E3E3D1) inset}.input[readonly]:-webkit-autofill,.input:disabled:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--sl-form-surface, #E3E3D1) inset;-webkit-text-fill-color:#a9a97f}.label-radio{font-size:1.4rem;position:static;padding-left:0}.radio-group,.checkbox-group{display:flex;gap:2rem;padding:.5rem 0}.form.form--compact .checkbox-group{padding:0 8px 0 0}.checkbox,.radio{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:1.4rem;color:#1c1c12;-webkit-user-select:none;user-select:none}.checkbox:has(.checkbox-subtitle){align-items:flex-start}.checkbox:has(.checkbox-subtitle) .checkbox-mark,.checkbox-group--cards .checkbox-mark{margin-top:2px}.checkbox-text{display:flex;flex-direction:column;gap:2px}.checkbox-subtitle{font-size:1.2rem;color:#787861;font-weight:400;line-height:1.3}.checkbox-label,.checkbox-subtitle{text-transform:uppercase}.checkbox-group--lowercase .checkbox-label,.checkbox-group--lowercase .checkbox-subtitle{text-transform:none}.checkbox:hover{color:#454733}.checkbox input,.radio input{position:absolute;opacity:0;pointer-events:none}.checkbox-mark{width:18px;height:18px;border:2px solid #787861;border-radius:4px;background-color:transparent;position:relative;display:inline-flex;align-items:center;justify-content:center;transition:all .2s ease}.checkbox input:checked+.checkbox-mark{background-color:#596300;border-color:#596300}.checkbox input:checked+.checkbox-mark:after{content:\"\";position:absolute;width:6px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:translate(-50%,-60%) rotate(45deg);top:50%;left:50%}.radio-mark{width:18px;height:18px;border:2px solid #787861;border-radius:50%;background-color:transparent;position:relative;transition:all .2s ease}.radio input:checked+.radio-mark{border-color:#596300}.radio input:checked+.radio-mark:after{content:\"\";width:8px;height:8px;background-color:#454733;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.radio:hover .radio-mark{border-color:#a9a97f}.checkbox input:disabled+.checkbox-mark,.radio input:disabled+.radio-mark{border-color:#a9a97f;background-color:var(--sl-form-surface, #E3E3D1);cursor:not-allowed}.checkbox:has(input:disabled),.radio:has(input:disabled){cursor:not-allowed}.checkbox:has(input:disabled) .checkbox-text,.radio:has(input:disabled) .radio-label{color:#1c1c1266}.checkbox-group--cards .checkbox:has(input:disabled){opacity:.5;pointer-events:none}.checkbox-group--readonly .checkbox{opacity:.6;pointer-events:none;cursor:not-allowed}.checkbox-group--readonly .checkbox input:disabled+.checkbox-mark{border-color:#787861;background-color:transparent}.checkbox-group--readonly .checkbox input:disabled:checked+.checkbox-mark{background-color:#596300;border-color:#596300}.checkbox-group--cards.checkbox-group--readonly .checkbox{opacity:.8;pointer-events:none}.checkbox-group--cards .checkbox{display:flex;align-items:flex-start;width:100%;gap:12px;padding:14px 16px;background-color:#f0f0db;font-size:14px;font-weight:300;text-transform:uppercase;border-radius:10px;border:1px solid transparent;transition:all .2s ease;cursor:pointer;position:relative}.checkbox-group--cards .checkbox:hover{background-color:#dee58f}.error{position:absolute;bottom:0;left:0;font-size:1.2rem;color:#b00020;width:100%;height:15px;display:none}.col:has(.error) .error{display:block}.textarea{resize:vertical;min-height:100px;max-height:300px;line-height:1.5;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#a9a97f transparent}.textarea::-webkit-scrollbar{width:8px}.textarea::-webkit-scrollbar-track{background:transparent;margin:4px 0}.textarea::-webkit-scrollbar-thumb{background:#a9a97f;border-radius:4px}.textarea::-webkit-scrollbar-thumb:hover{background:#787861}.textarea:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--sl-form-surface, #E3E3D1) inset;-webkit-text-fill-color:#454733}select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url(\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\");background-repeat:no-repeat;background-size:15px;background-position:right 15px center;cursor:pointer}select:invalid{color:#787861}select.placeholder-selected{color:#787861}select:not(.placeholder-selected){color:#000}select option{color:#454733;cursor:pointer}input[type=date]{color:#787861!important}input[type=date]:valid{color:#454733!important}.label-disabled{color:#1c1c1266}.input:disabled,.input--disabled,.input.disabled,.input[readonly]{border:1px solid #a9a97f;color:#a9a97f;cursor:not-allowed;pointer-events:none}@media (max-width: 768px){.grid{grid-template-columns:1fr}.col{grid-column:span 1!important}}\n"] }]
|
|
3101
|
+
args: [{ selector: 'lib-dynamic-form-fields', standalone: true, imports: [ReactiveFormsModule, SelectCustomSearch, DateTimePicker, ToggleCustom], template: "@if (form()) {\n<form class=\"form\" [formGroup]=\"form()\" [class.form--compact]=\"compact()\" (keydown)=\"onEnter($event)\">\n @for (sec of sections(); track $index) {\n <section class=\"section\">\n @if (sec.title) {\n <h3 class=\"section-title\">{{ sec.title }}</h3>\n } @if (sec.description) {\n <p class=\"section-desc\">{{ sec.description }}</p>\n }\n\n <div class=\"grid\">\n @for (run of getFieldRuns(sec.fields); track $index) {\n\n @if (run.isGroup) {\n <!-- toggle: wrapper que siempre ocupa la fila completa -->\n <div class=\"col col--group-wrapper\">\n @for (f of run.fields; track f.key) {\n <div class=\"group-item\">\n <lib-toggle-custom [key]=\"f.key\" [label]=\"f.label ?? ''\" [formControlName]=\"f.key\" />\n </div>\n }\n </div>\n\n } @else {\n <!-- Campos normales (incluye checkbox y radio con su col configurable) -->\n @for (f of run.fields; track f.key) {\n <div class=\"col\" [style.--col-span]=\"f.col || 6\">\n @if (['text','number','email', 'password', 'time'].includes(f.type))\n {\n <input\n class=\"input\"\n [type]=\"f.type\"\n [placeholder]=\"f.placeholder\"\n [formControlName]=\"f.key\"\n [readonly]=\"f.readonly || false\"\n (input)=\"onUppercaseInput($event, f.type, f.key)\"\n />\n } @if (f.type === 'currency-cop') {\n <input\n type=\"text\"\n class=\"input\"\n inputmode=\"decimal\"\n [placeholder]=\"f.placeholder || '$0'\"\n [formControlName]=\"f.key\"\n [attr.data-currency-key]=\"f.key\"\n [readonly]=\"f.readonly || false\"\n (input)=\"onCurrencyInput($event, f.key)\"\n />\n } @if (['date', 'datetime-local'].includes(f.type)) {\n <lib-date-time-picker\n [mode]=\"getDatePickerMode(f.type)\"\n [placeholder]=\"\n f.placeholder ||\n (f.type === 'date'\n ? 'Seleccionar fecha'\n : 'Seleccionar fecha y hora')\n \"\n [formControlName]=\"f.key\"\n [minDate]=\"f.minDate || null\"\n [maxDate]=\"f.maxDate || null\"\n [readonly]=\"f.readonly || false\"\n />\n } @if (f.type === 'textarea') {\n <textarea\n class=\"input textarea\"\n [placeholder]=\"f.placeholder\"\n [formControlName]=\"f.key\"\n [rows]=\"f.rows ?? 6\"\n [style.resize]=\"(f.resizable ?? true) ? 'vertical' : 'none'\"\n [readonly]=\"f.readonly || false\"\n ></textarea>\n } @if (f.type === 'select') {\n <lib-select-custom-search\n [options]=\"f.options ?? []\"\n [placeholder]=\"f.placeholder || 'Seleccionar...'\"\n [formControlName]=\"f.key\"\n [readonly]=\"f.readonly || false\"\n />\n } @if (f.type === 'radio') {\n <div class=\"radio-group\">\n @for (o of f.options ?? []; track o.value) {\n <label class=\"radio\">\n <input\n type=\"radio\"\n [value]=\"o.value\"\n [formControlName]=\"f.key\"\n [readonly]=\"f.readonly || false\"\n />\n <span class=\"radio-mark\"></span>\n <span class=\"radio-label\">{{ o.label }}</span>\n </label>\n }\n </div>\n } @if (f.type === 'checkbox') {\n <div class=\"checkbox-group\"\n [class.checkbox-group--cards]=\"f.variant === 'cards'\"\n [class.checkbox-group--lowercase]=\"f.uppercase === false\"\n [class.checkbox-group--readonly]=\"f.readonly && !f.disabled\">\n @for (o of f.options ?? []; track o.value) {\n <label class=\"checkbox\">\n <input\n type=\"checkbox\"\n [checked]=\"getCheckboxArray(f.key)?.at($index)?.value\"\n (change)=\"onCheckboxInteract($event, f, $index)\"\n [disabled]=\"f.disabled || f.readonly || false\"\n />\n <span class=\"checkbox-mark\"></span>\n <span class=\"checkbox-text\">\n <span class=\"checkbox-label\">{{ o.label }}</span>\n @if (o.subtitle) {\n <span class=\"checkbox-subtitle\">{{ o.subtitle }}</span>\n }\n </span>\n </label>\n }\n </div>\n } @if (f.type === 'disabled') {\n <input\n class=\"input input--disabled\"\n [placeholder]=\"f.placeholder || 'Autom\u00E1tico'\"\n disabled\n />\n } @if (ctrl(f.key)?.touched && ctrl(f.key)?.invalid) {\n <div class=\"error\">\n @if (ctrl(f.key)?.errors?.['required']) {\n <span>Campo requerido</span>\n } @if (ctrl(f.key)?.errors?.['email']) {\n <span>Correo inv\u00E1lido</span>\n } @if (ctrl(f.key)?.errors?.['pattern']) {\n <span>\n @switch (f.patternType) { @case ('numbers') { Solo se permiten\n n\u00FAmeros } @case ('phone') { Formato de tel\u00E9fono inv\u00E1lido } @case\n ('text') { Solo se permiten letras y espacios } @case ('username') {\n Solo se permiten letras, n\u00FAmeros, puntos y guiones bajos (no al\n inicio ni al final) } @case ('alphanumeric') { Solo se permiten\n letras y n\u00FAmeros } @default { Formato inv\u00E1lido } }\n </span>\n } @if (ctrl(f.key)?.errors?.['notMatching']) {\n <span>Las contrase\u00F1as no coinciden</span>\n }\n </div>\n }\n\n @if(f.label && f.type !== 'toggle') {\n <label\n [class.label-radio]=\"f.type === 'radio'\"\n [class.label-checkbox]=\"f.type === 'checkbox'\"\n [class.label-disabled]=\"f.readonly || f.disabled\"\n class=\"label\"\n >\n {{ f.label }} </label>\n }\n </div>\n }\n }\n\n }\n </div>\n </section>\n }\n</form>\n}\n", styles: [".form{width:100%}.form{display:grid}.section{padding:20px 0 0}.section-title{font-size:1.6rem;font-weight:700;margin-bottom:30px}.section-desc{margin:0 0 .75rem;color:#666}.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}.form.form--compact .grid{gap:12px}.col{grid-column:span var(--col-span, 6);min-width:0;width:100%;position:relative;padding-bottom:20px}.col--group-wrapper{grid-column:span 12;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding-bottom:0}.form.form--compact .col--group-wrapper{gap:12px}.group-item--full{grid-column:span 4}.form.form--compact .col{padding-bottom:0}.label{position:absolute;top:-8px;left:12px;font-size:1.2rem;color:#454733;background-color:var(--sl-form-surface, #E3E3D1);padding:0 4px;font-weight:500;text-transform:capitalize}.input{width:100%;border:1px solid #787861;border-radius:5px;padding:15px;background-color:transparent}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=date]::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:auto;height:auto;color:transparent;background:transparent}.input:focus{outline:none;border-color:#a9a97f}.input--disabled{color:#888}.input:-webkit-autofill,.input:-webkit-autofill:hover,.input:-webkit-autofill:focus,.input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px var(--sl-form-surface, #E3E3D1) inset;box-shadow:0 0 0 1000px var(--sl-form-surface, #E3E3D1) inset;-webkit-text-fill-color:#454733;caret-color:#454733;transition:background-color 9999s ease-in-out 0s}.input:-moz-autofill,.textarea:-moz-autofill{box-shadow:0 0 0 1000px var(--sl-form-surface, #E3E3D1) inset}.input[readonly]:-webkit-autofill,.input:disabled:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--sl-form-surface, #E3E3D1) inset;-webkit-text-fill-color:#a9a97f}.label-radio{font-size:1.4rem;position:static;padding-left:0}.radio-group,.checkbox-group{display:flex;gap:2rem;padding:.5rem 0}.form.form--compact .checkbox-group{padding:0 8px 0 0}.checkbox,.radio{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:1.4rem;color:#1c1c12;-webkit-user-select:none;user-select:none}.checkbox:has(.checkbox-subtitle){align-items:flex-start}.checkbox:has(.checkbox-subtitle) .checkbox-mark,.checkbox-group--cards .checkbox-mark{margin-top:2px}.checkbox-text{display:flex;flex-direction:column;gap:2px}.checkbox-subtitle{font-size:1.2rem;color:#787861;font-weight:400;line-height:1.3}.checkbox-label,.checkbox-subtitle{text-transform:uppercase}.checkbox-group--lowercase .checkbox-label,.checkbox-group--lowercase .checkbox-subtitle{text-transform:none}.checkbox:hover{color:#454733}.checkbox input,.radio input{position:absolute;opacity:0;pointer-events:none}.checkbox-mark{width:18px;height:18px;border:2px solid #787861;border-radius:4px;background-color:transparent;position:relative;display:inline-flex;align-items:center;justify-content:center;transition:all .2s ease}.checkbox input:checked+.checkbox-mark{background-color:#596300;border-color:#596300}.checkbox input:checked+.checkbox-mark:after{content:\"\";position:absolute;width:6px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:translate(-50%,-60%) rotate(45deg);top:50%;left:50%}.radio-mark{width:18px;height:18px;border:2px solid #787861;border-radius:50%;background-color:transparent;position:relative;transition:all .2s ease}.radio input:checked+.radio-mark{border-color:#596300}.radio input:checked+.radio-mark:after{content:\"\";width:8px;height:8px;background-color:#454733;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.radio:hover .radio-mark{border-color:#a9a97f}.checkbox input:disabled+.checkbox-mark,.radio input:disabled+.radio-mark{border-color:#a9a97f;background-color:var(--sl-form-surface, #E3E3D1);cursor:not-allowed}.checkbox:has(input:disabled),.radio:has(input:disabled){cursor:not-allowed}.checkbox:has(input:disabled) .checkbox-text,.radio:has(input:disabled) .radio-label{color:#1c1c1266}.checkbox-group--cards .checkbox:has(input:disabled){opacity:.5;pointer-events:none}.checkbox-group--readonly .checkbox{opacity:.6;pointer-events:none;cursor:not-allowed}.checkbox-group--readonly .checkbox input:disabled+.checkbox-mark{border-color:#787861;background-color:transparent}.checkbox-group--readonly .checkbox input:disabled:checked+.checkbox-mark{background-color:#596300;border-color:#596300}.checkbox-group--cards.checkbox-group--readonly .checkbox{opacity:.8;pointer-events:none}.checkbox-group--cards .checkbox{display:flex;align-items:flex-start;width:100%;gap:12px;padding:14px 16px;background-color:#f0f0db;font-size:14px;font-weight:300;text-transform:uppercase;border-radius:10px;border:1px solid transparent;transition:all .2s ease;cursor:pointer;position:relative}.checkbox-group--cards .checkbox:hover{background-color:#dee58f}.error{position:absolute;bottom:0;left:0;font-size:1.2rem;color:#b00020;width:100%;height:15px;display:none}.col:has(.error) .error{display:block}.textarea{resize:vertical;min-height:100px;max-height:300px;line-height:1.5;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#a9a97f transparent}.textarea::-webkit-scrollbar{width:8px}.textarea::-webkit-scrollbar-track{background:transparent;margin:4px 0}.textarea::-webkit-scrollbar-thumb{background:#a9a97f;border-radius:4px}.textarea::-webkit-scrollbar-thumb:hover{background:#787861}.textarea:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--sl-form-surface, #E3E3D1) inset;-webkit-text-fill-color:#454733}select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url(\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\");background-repeat:no-repeat;background-size:15px;background-position:right 15px center;cursor:pointer}select:invalid{color:#787861}select.placeholder-selected{color:#787861}select:not(.placeholder-selected){color:#000}select option{color:#454733;cursor:pointer}input[type=date]{color:#787861!important}input[type=date]:valid{color:#454733!important}.label-disabled{color:#1c1c1266}.input:disabled,.input--disabled,.input.disabled,.input[readonly]{border:1px solid #a9a97f;color:#a9a97f;cursor:not-allowed;pointer-events:none}@media (max-width: 768px){.grid{grid-template-columns:1fr}.col{grid-column:span 1!important}}\n"] }]
|
|
3038
3102
|
}], propDecorators: { form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }], sections: [{ type: i0.Input, args: [{ isSignal: true, alias: "sections", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }] } });
|
|
3039
3103
|
|
|
3040
3104
|
class WizardForm {
|
|
@@ -6654,16 +6718,20 @@ class CardHistory {
|
|
|
6654
6718
|
case 'paid':
|
|
6655
6719
|
case 'pagado':
|
|
6656
6720
|
return 'status-chip--paid';
|
|
6721
|
+
case 'in_process':
|
|
6722
|
+
case 'en_proceso':
|
|
6723
|
+
case 'en proceso':
|
|
6724
|
+
return 'status-chip--in-process';
|
|
6657
6725
|
default:
|
|
6658
6726
|
return 'status-chip--neutral';
|
|
6659
6727
|
}
|
|
6660
6728
|
}
|
|
6661
6729
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CardHistory, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6662
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CardHistory, isStandalone: true, selector: "lib-card-history", inputs: { DataCard: { classPropertyName: "DataCard", publicName: "DataCard", isSignal: true, isRequired: false, transformFunction: null }, historialEntry: { classPropertyName: "historialEntry", publicName: "historialEntry", isSignal: true, isRequired: false, transformFunction: null }, withResponsible: { classPropertyName: "withResponsible", publicName: "withResponsible", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if(variant() == 'default' && withResponsible()) {\r\n<div class=\"card-history\">\r\n <span class=\"card-date\">{{ formatDate(DataCard()?.date || \"\") }}</span>\r\n <div class=\"event-card\" [class.expanded]=\"isExpanded()\">\r\n <div class=\"event-header\" (click)=\"toggleExpanded()\">\r\n <div class=\"event-info\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"expand-icon icon icon-tabler icons-tabler-outline icon-tabler-chevron-up\">\r\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path d=\"M6 15l6 -6l6 6\" />\r\n </svg>\r\n <span class=\"event-type\">{{ DataCard()?.title }}</span>\r\n <span class=\"event-time\">{{ DataCard()?.time }}</span>\r\n </div>\r\n <div class=\"status-badges\">\r\n <span class=\"badge\" [ngClass]=\"getBadgeClass(DataCard()?.previousStatus || '')\">\r\n {{ DataCard()?.previousStatus }}\r\n </span>\r\n\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"icon icon-tabler icons-tabler-outline icon-tabler-chevrons-right\">\r\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path d=\"M7 7l5 5l-5 5\" />\r\n <path d=\"M13 7l5 5l-5 5\" />\r\n </svg>\r\n\r\n <span class=\"badge\" [ngClass]=\"getBadgeClass(DataCard()?.currentStatus || '')\">\r\n {{ DataCard()?.currentStatus }}\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"event-details\">\r\n <div class=\"responsible-info\">\r\n <div class=\"avatar\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"icon icon-tabler icons-tabler-outline icon-tabler-user\">\r\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path d=\"M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0\" />\r\n <path d=\"M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2\" />\r\n </svg>\r\n </div>\r\n <div class=\"responsible-details\">\r\n <h4>Responsable</h4>\r\n <div class=\"responsible-name\">{{ DataCard()?.responsible }}</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"technical-description\">\r\n <div class=\"tech-label\">Descripci\u00F3n t\u00E9cnica</div>\r\n <div class=\"tech-content\">\r\n {{ DataCard()?.description }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n}\r\n\r\n@if(variant() == 'default' && !withResponsible()) {\r\n<div class=\"card-history\">\r\n <div class=\"event-card no-responsible\">\r\n <div class=\"nr-header\">\r\n <span class=\"nr-title\">{{ DataCard()?.title }}</span>\r\n <span class=\"nr-type\">({{ DataCard()?.type || 'estado' }})</span>\r\n </div>\r\n <div class=\"nr-body\">\r\n @if (DataCard()?.actionType === 'create') {\r\n <p class=\"nr-description\">\r\n El registro fue creado con los siguientes datos.\r\n </p>\r\n <div class=\"nr-comparison single\">\r\n <div class=\"nr-col\">\r\n <span class=\"nr-label curr\">VALOR INICIAL</span>\r\n <div class=\"nr-value curr-val\">{{ DataCard()?.currentStatus }}</div>\r\n </div>\r\n </div>\r\n } @else if (DataCard()?.actionType === 'delete') {\r\n <p class=\"nr-description\">\r\n El registro fue eliminado permanentemente.\r\n </p>\r\n <div class=\"nr-comparison single\">\r\n <div class=\"nr-col\">\r\n <span class=\"nr-label prev\">VALOR ELIMINADO</span>\r\n <div class=\"nr-value prev-val\">{{ DataCard()?.previousStatus }}</div>\r\n </div>\r\n </div>\r\n } @else {\r\n <p class=\"nr-description\">\r\n <span style=\"text-transform: capitalize;\">{{ DataCard()?.type || 'El registro' }}</span> cambi\u00F3 de \"{{\r\n DataCard()?.previousStatus }}\" a \"{{ DataCard()?.currentStatus }}\".\r\n </p>\r\n\r\n <div class=\"nr-comparison\">\r\n <div class=\"nr-col\">\r\n <span class=\"nr-label prev\">VALOR ANTERIOR</span>\r\n <div class=\"nr-value prev-val\">{{ DataCard()?.previousStatus }}</div>\r\n </div>\r\n\r\n <div class=\"nr-arrow\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"icon icon-tabler icons-tabler-outline icon-tabler-arrow-right\">\r\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path d=\"M5 12l14 0\" />\r\n <path d=\"M13 18l6 -6\" />\r\n <path d=\"M13 6l6 6\" />\r\n </svg>\r\n </div>\r\n\r\n <div class=\"nr-col\">\r\n <span class=\"nr-label curr\">VALOR NUEVO</span>\r\n <div class=\"nr-value curr-val\">{{ DataCard()?.currentStatus }}</div>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n</div>\r\n}\r\n\r\n@if (variant() == 'history') {\r\n@let entry = historialEntry();\r\n<!-- Historial y movimientos -->\r\n<article class=\"historial-card\">\r\n <!-- Card Header -->\r\n <div class=\"historial-card__header\">\r\n <div class=\"historial-card__title-area\">\r\n <span class=\"historial-card__icon-wrapper\"\r\n [ngClass]=\"{'state-change': entry?.tipo === 'estado', 'doc-change': entry?.tipo === 'documento'}\">\r\n @if (entry?.tipo === 'documento') {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path d=\"M14 3v4a1 1 0 0 0 1 1h4\" />\r\n <path d=\"M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z\" />\r\n <path d=\"M9 9l1 0\" />\r\n <path d=\"M9 13l6 0\" />\r\n <path d=\"M9 17l6 0\" />\r\n </svg>\r\n } @else if (entry?.previousState || entry?.currentState) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path d=\"M3 9l4 -4l4 4m-4 -4v14\" />\r\n <path d=\"M21 15l-4 4l-4 -4m4 4v-14\" />\r\n </svg>\r\n } @else {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path d=\"M12 8l.01 0\" />\r\n <path d=\"M12 12l0 9\" />\r\n <path d=\"M12 3a9 9 0 1 0 9 9\" />\r\n </svg>\r\n }\r\n </span>\r\n <h3 class=\"historial-card__title\">{{ entry?.titulo }}</h3>\r\n </div>\r\n @if (entry?.tipo === 'estado') {\r\n <div class=\"historial-card__id\">ID #{{ entry?.id }}</div>\r\n } @else {\r\n <div class=\"historial-card__id historial-card__id--local\">{{ entry?.tipo === 'documento' ? 'Documento' : 'Movimiento' }}\r\n </div>\r\n }\r\n </div>\r\n\r\n <!-- Card Body -->\r\n <div class=\"historial-card__body\">\r\n @if (entry?.detalle) {\r\n <div class=\"historial-card__reason-box\">\r\n <span class=\"reason-label\">Detalles</span>\r\n <p class=\"reason-text\">{{ entry?.detalle }}</p>\r\n </div>\r\n }\r\n\r\n @if (entry?.previousState || entry?.currentState) {\r\n <div class=\"historial-card__states-container\">\r\n <span class=\"states-label\">Transici\u00F3n:</span>\r\n <div class=\"historial-item__status-row\">\r\n @if (entry?.previousState) {\r\n <span class=\"status-chip\" [ngClass]=\"getStatusChipClass(entry!.previousState!)\">\r\n {{ statusLabel(entry!.previousState!) }}\r\n </span>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"history-arrow\">\r\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path d=\"M7 7l5 5l-5 5\" />\r\n <path d=\"M13 7l5 5l-5 5\" />\r\n </svg>\r\n }\r\n @if (entry?.currentState) {\r\n <span class=\"status-chip\" [ngClass]=\"getStatusChipClass(entry!.currentState!)\">\r\n {{ statusLabel(entry!.currentState!) }}\r\n </span>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n\r\n <!-- Card Footer -->\r\n <div class=\"historial-card__footer\">\r\n <div class=\"historial-card__meta-item\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"me-1\">\r\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path d=\"M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0\" />\r\n <path d=\"M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2\" />\r\n </svg>\r\n <span>Usuario: <strong>{{ entry?.createdBy || 'SISTEMA' }}</strong></span>\r\n </div>\r\n <div class=\"historial-card__meta-item\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"me-1\">\r\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path d=\"M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12z\" />\r\n <path d=\"M16 3v4\" />\r\n <path d=\"M8 3v4\" />\r\n <path d=\"M4 11h16\" />\r\n <path d=\"M11 15h1\" />\r\n <path d=\"M12 15v3\" />\r\n </svg>\r\n <span>{{ entry?.creationDate | date:'dd/MM/yyyy h:mm a' }}</span>\r\n </div>\r\n </div>\r\n</article>\r\n}", styles: [".card-history{display:flex;flex-direction:column;gap:15px}.card-date{color:#1c1c12;font-size:1.4rem;font-weight:600}.event-card{background-color:#f0f0db;border-radius:8px;margin-bottom:15px;overflow:hidden;border:1px solid #c7c7ad}.event-header{padding:12px 16px;display:flex;align-items:center;justify-content:space-between;cursor:pointer}.event-header:hover{background-color:#e0e0c8}.event-info{display:flex;align-items:center;gap:8px}.expand-icon{font-size:12px;transform:rotate(180deg);transition:transform .2s}.event-card.expanded .expand-icon{transform:rotate(90deg)}.event-type{font-weight:600;font-size:1.4rem;color:#1c1c12}.event-time{color:#454733;font-size:1.1rem}.status-badges{display:flex;align-items:center;gap:8px}.badge{padding:6px 10px;border-radius:6px;font-size:1.2rem;font-weight:600;border:none}.badge-maintenance{background:#bfd100;color:#4f5700}.badge-operational{background-color:#78db5c;color:#0f5e00}.badge-no-date{background-color:#bfe9ff;color:#004d65}.event-details{max-height:0;overflow:hidden;padding:0 10px;background-color:#f0f0e0;transition:max-height .3s ease-in-out,padding .3s ease-in-out}.event-card.expanded .event-details{max-height:300px;padding:20px 10px}.responsible-info{display:flex;align-items:center;gap:12px;margin-bottom:15px;padding:20px 10px;background-color:#ebe8d6;border-radius:8px}.avatar{width:36px;height:36px;border-radius:50%;background-color:#bfd100;display:flex;align-items:center;justify-content:center;font-weight:700}.avatar img{width:24px;height:24px}.responsible-details h4{font-size:1.2rem;color:#454733;margin-bottom:2px;font-weight:400}.responsible-name{font-size:1.4rem;font-weight:600;color:#1c1c12}.technical-description{padding:20px 10px;background-color:#ebe8d6;border-radius:8px;height:120px}.tech-label{font-size:1.2rem;color:#454733;margin-bottom:5px}.tech-content{font-size:1.4rem;color:#1c1c12;font-weight:600}.badge-active{color:#006d2f;font-weight:600;background-color:#c6f6c1;border-radius:8px;padding:6px 10px}.badge-inactive{color:#454733e7;font-weight:600;background-color:#e0e0e0;border-radius:8px;padding:6px 10px}.badge-retired{color:#ba1a1a;font-weight:600;background-color:#ffe5e5;border-radius:8px;padding:6px 10px}.badge-obsolete{color:#454733;font-weight:600;border:1px solid #c7c7ad;border-radius:8px;padding:6px 10px}.badge-operativo{color:#0f5e00;font-weight:600;background-color:#80ff66;border-radius:8px;padding:6px 10px}.badge-maintenance{color:#4f5700;font-weight:600;background-color:#bfd100;border-radius:8px;padding:6px 10px}.badge-failures{color:#94000a;font-weight:600;background-color:#fcd;border-radius:8px;padding:6px 10px}.badge-deactivated{color:#ba1a1a;font-weight:600;border:1px solid #ba1a1a;border-radius:8px;padding:6px 10px}.badge-default{color:#6b6b47;font-weight:600;border:1px dashed #c7c7ad;border-radius:8px;padding:6px 10px;font-style:italic}.nr-header{padding:12px 16px;border-bottom:1px solid #c7c7ad;display:flex;align-items:center;gap:6px}.nr-title{font-weight:600;font-size:1.4rem;color:#1c1c12}.nr-type{font-size:1.2rem;color:#6b6b47}.nr-body{padding:16px}.nr-description{font-size:1.3rem;color:#454733;margin:0 0 16px}.nr-comparison{display:flex;align-items:center;gap:16px}.nr-col{flex:1;display:flex;flex-direction:column;gap:8px}.nr-label{font-size:1.1rem;font-weight:700;text-transform:uppercase}.nr-label.prev{color:#ba1a1a}.nr-label.curr{color:#006d2f}.nr-value{padding:12px 16px;border-radius:8px;font-size:1.3rem;font-weight:600}.nr-value.prev-val{background-color:#ffe5e5;color:#ba1a1a}.nr-value.curr-val{background-color:#c6f6c1;color:#006d2f}.nr-arrow{display:flex;align-items:center;justify-content:center;color:#6b6b47;padding-top:20px}.historial-card{background-color:#fafae8;border-radius:16px;padding:1.25rem 1.5rem;box-shadow:0 3px 10px #78724d0f;display:flex;flex-direction:column;gap:.8rem;transition:all .22s cubic-bezier(.16,1,.3,1)}.historial-card__header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px dashed rgba(120,114,77,.15);padding-bottom:.65rem}.historial-card__title-area{display:flex;align-items:center;gap:.75rem}.historial-card__icon-wrapper{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background-color:#78724d1a;color:#5a5a46}.historial-card__icon-wrapper.state-change{background-color:#5963001a;color:#596300}.historial-card__icon-wrapper.doc-change{background-color:#3974c01a;color:#3974c0}.historial-card__id--local{background-color:#3974c014;color:#3974c0}.historial-card__title{margin:0;font-size:1.35rem;font-weight:700;color:#2c3016}.historial-card__id{font-size:1rem;font-weight:600;color:#7b7d60;background-color:#78724d14;padding:.2rem .6rem;border-radius:99px}.historial-card__body{display:flex;flex-direction:column;gap:.75rem}.historial-card__reason-box{border-left:3px solid #b2ac88;padding:.75rem 1rem;border-radius:4px 12px 12px 4px}.reason-label{display:flex;align-items:center;font-size:.95rem;font-weight:700;color:#615c3c;margin-bottom:.35rem;text-transform:uppercase;letter-spacing:.03em}.reason-text{margin:0;font-size:1.25rem;font-weight:700;color:#383a30;line-height:1.45;white-space:pre-wrap}.historial-card__states-container{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;padding:.5rem 0;border-radius:8px}.states-label{font-size:1.1rem;font-weight:700;color:#615c3c}.historial-card__footer{display:flex;justify-content:flex-start;align-items:center;gap:1.8rem;border-top:1px solid rgba(120,114,77,.08);padding-top:.75rem;flex-wrap:wrap}.historial-card__meta-item{display:flex;align-items:center;gap:.6rem;font-size:1.15rem;color:#6b6a55}.historial-card__meta-item svg{color:#7b7d60}.historial-item__status-row{display:inline-flex;align-items:center;gap:.5rem;flex-wrap:wrap}.history-arrow{color:#6d6a58;display:inline-flex;align-self:center}.status-chip{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.25rem .65rem;border-radius:6px;font-size:1.1rem;text-transform:uppercase;font-weight:600;line-height:1.2;white-space:nowrap;box-sizing:border-box;min-width:max-content;vertical-align:middle}.status-chip--active,.status-chip--restructured,.status-chip--process{background-color:#9dafd8;color:#0746cf}.status-chip--completed,.status-chip--paid{background-color:#9ed89d;color:#006d2f}.status-chip--pending{background-color:#d8bf9d;color:#cf6507}.status-chip--defaulted{background-color:#c7b0d8;color:#6a1b9a}.status-chip--cancelled{background-color:#d89d9d;color:#cf0707}.status-chip--neutral{background-color:#bac2bb;color:#40484c}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: DatePipe, name: "date" }] });
|
|
6730
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CardHistory, isStandalone: true, selector: "lib-card-history", inputs: { DataCard: { classPropertyName: "DataCard", publicName: "DataCard", isSignal: true, isRequired: false, transformFunction: null }, historialEntry: { classPropertyName: "historialEntry", publicName: "historialEntry", isSignal: true, isRequired: false, transformFunction: null }, withResponsible: { classPropertyName: "withResponsible", publicName: "withResponsible", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if(variant() == 'default' && withResponsible()) {\r\n<div class=\"card-history\">\r\n <span class=\"card-date\">{{ formatDate(DataCard()?.date || \"\") }}</span>\r\n <div class=\"event-card\" [class.expanded]=\"isExpanded()\">\r\n <div class=\"event-header\" (click)=\"toggleExpanded()\">\r\n <div class=\"event-info\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"expand-icon icon icon-tabler icons-tabler-outline icon-tabler-chevron-up\">\r\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path d=\"M6 15l6 -6l6 6\" />\r\n </svg>\r\n <span class=\"event-type\">{{ DataCard()?.title }}</span>\r\n <span class=\"event-time\">{{ DataCard()?.time }}</span>\r\n </div>\r\n <div class=\"status-badges\">\r\n <span class=\"badge\" [ngClass]=\"getBadgeClass(DataCard()?.previousStatus || '')\">\r\n {{ DataCard()?.previousStatus }}\r\n </span>\r\n\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"icon icon-tabler icons-tabler-outline icon-tabler-chevrons-right\">\r\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path d=\"M7 7l5 5l-5 5\" />\r\n <path d=\"M13 7l5 5l-5 5\" />\r\n </svg>\r\n\r\n <span class=\"badge\" [ngClass]=\"getBadgeClass(DataCard()?.currentStatus || '')\">\r\n {{ DataCard()?.currentStatus }}\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"event-details\">\r\n <div class=\"responsible-info\">\r\n <div class=\"avatar\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"icon icon-tabler icons-tabler-outline icon-tabler-user\">\r\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path d=\"M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0\" />\r\n <path d=\"M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2\" />\r\n </svg>\r\n </div>\r\n <div class=\"responsible-details\">\r\n <h4>Responsable</h4>\r\n <div class=\"responsible-name\">{{ DataCard()?.responsible }}</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"technical-description\">\r\n <div class=\"tech-label\">Descripci\u00F3n t\u00E9cnica</div>\r\n <div class=\"tech-content\">\r\n {{ DataCard()?.description }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n}\r\n\r\n@if(variant() == 'default' && !withResponsible()) {\r\n<div class=\"card-history\">\r\n <div class=\"event-card no-responsible\">\r\n <div class=\"nr-header\">\r\n <span class=\"nr-title\">{{ DataCard()?.title }}</span>\r\n <span class=\"nr-type\">({{ DataCard()?.type || 'estado' }})</span>\r\n </div>\r\n <div class=\"nr-body\">\r\n @if (DataCard()?.actionType === 'create') {\r\n <p class=\"nr-description\">\r\n El registro fue creado con los siguientes datos.\r\n </p>\r\n <div class=\"nr-comparison single\">\r\n <div class=\"nr-col\">\r\n <span class=\"nr-label curr\">VALOR INICIAL</span>\r\n <div class=\"nr-value curr-val\">{{ DataCard()?.currentStatus }}</div>\r\n </div>\r\n </div>\r\n } @else if (DataCard()?.actionType === 'delete') {\r\n <p class=\"nr-description\">\r\n El registro fue eliminado permanentemente.\r\n </p>\r\n <div class=\"nr-comparison single\">\r\n <div class=\"nr-col\">\r\n <span class=\"nr-label prev\">VALOR ELIMINADO</span>\r\n <div class=\"nr-value prev-val\">{{ DataCard()?.previousStatus }}</div>\r\n </div>\r\n </div>\r\n } @else {\r\n <p class=\"nr-description\">\r\n <span style=\"text-transform: capitalize;\">{{ DataCard()?.type || 'El registro' }}</span> cambi\u00F3 de \"{{\r\n DataCard()?.previousStatus }}\" a \"{{ DataCard()?.currentStatus }}\".\r\n </p>\r\n\r\n <div class=\"nr-comparison\">\r\n <div class=\"nr-col\">\r\n <span class=\"nr-label prev\">VALOR ANTERIOR</span>\r\n <div class=\"nr-value prev-val\">{{ DataCard()?.previousStatus }}</div>\r\n </div>\r\n\r\n <div class=\"nr-arrow\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"icon icon-tabler icons-tabler-outline icon-tabler-arrow-right\">\r\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path d=\"M5 12l14 0\" />\r\n <path d=\"M13 18l6 -6\" />\r\n <path d=\"M13 6l6 6\" />\r\n </svg>\r\n </div>\r\n\r\n <div class=\"nr-col\">\r\n <span class=\"nr-label curr\">VALOR NUEVO</span>\r\n <div class=\"nr-value curr-val\">{{ DataCard()?.currentStatus }}</div>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n</div>\r\n}\r\n\r\n@if (variant() == 'history') {\r\n@let entry = historialEntry();\r\n<!-- Historial y movimientos -->\r\n<article class=\"historial-card\">\r\n <!-- Card Header -->\r\n <div class=\"historial-card__header\">\r\n <div class=\"historial-card__title-area\">\r\n <span class=\"historial-card__icon-wrapper\"\r\n [ngClass]=\"{'state-change': entry?.tipo === 'estado', 'doc-change': entry?.tipo === 'documento'}\">\r\n @if (entry?.tipo === 'documento') {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path d=\"M14 3v4a1 1 0 0 0 1 1h4\" />\r\n <path d=\"M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z\" />\r\n <path d=\"M9 9l1 0\" />\r\n <path d=\"M9 13l6 0\" />\r\n <path d=\"M9 17l6 0\" />\r\n </svg>\r\n } @else if (entry?.previousState || entry?.currentState) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path d=\"M3 9l4 -4l4 4m-4 -4v14\" />\r\n <path d=\"M21 15l-4 4l-4 -4m4 4v-14\" />\r\n </svg>\r\n } @else {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path d=\"M12 8l.01 0\" />\r\n <path d=\"M12 12l0 9\" />\r\n <path d=\"M12 3a9 9 0 1 0 9 9\" />\r\n </svg>\r\n }\r\n </span>\r\n <h3 class=\"historial-card__title\">{{ entry?.titulo }}</h3>\r\n </div>\r\n @if (entry?.tipo === 'estado') {\r\n <div class=\"historial-card__id\">ID #{{ entry?.id }}</div>\r\n } @else {\r\n <div class=\"historial-card__id historial-card__id--local\">{{ entry?.tipo === 'documento' ? 'Documento' : 'Movimiento' }}\r\n </div>\r\n }\r\n </div>\r\n\r\n <!-- Card Body -->\r\n <div class=\"historial-card__body\">\r\n @if (entry?.detalle) {\r\n <div class=\"historial-card__reason-box\">\r\n <span class=\"reason-label\">Detalles</span>\r\n <p class=\"reason-text\">{{ entry?.detalle }}</p>\r\n </div>\r\n }\r\n\r\n @if (entry?.previousState || entry?.currentState) {\r\n <div class=\"historial-card__states-container\">\r\n <span class=\"states-label\">Transici\u00F3n:</span>\r\n <div class=\"historial-item__status-row\">\r\n @if (entry?.previousState) {\r\n <span class=\"status-chip\" [ngClass]=\"getStatusChipClass(entry!.previousState!)\">\r\n {{ statusLabel(entry!.previousState!) }}\r\n </span>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"history-arrow\">\r\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path d=\"M7 7l5 5l-5 5\" />\r\n <path d=\"M13 7l5 5l-5 5\" />\r\n </svg>\r\n }\r\n @if (entry?.currentState) {\r\n <span class=\"status-chip\" [ngClass]=\"getStatusChipClass(entry!.currentState!)\">\r\n {{ statusLabel(entry!.currentState!) }}\r\n </span>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n\r\n <!-- Card Footer -->\r\n <div class=\"historial-card__footer\">\r\n <div class=\"historial-card__meta-item\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"me-1\">\r\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path d=\"M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0\" />\r\n <path d=\"M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2\" />\r\n </svg>\r\n <span>Usuario: <strong>{{ entry?.createdBy || 'SISTEMA' }}</strong></span>\r\n </div>\r\n <div class=\"historial-card__meta-item\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"me-1\">\r\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path d=\"M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12z\" />\r\n <path d=\"M16 3v4\" />\r\n <path d=\"M8 3v4\" />\r\n <path d=\"M4 11h16\" />\r\n <path d=\"M11 15h1\" />\r\n <path d=\"M12 15v3\" />\r\n </svg>\r\n <span>{{ entry?.creationDate | date:'dd/MM/yyyy h:mm a' }}</span>\r\n </div>\r\n </div>\r\n</article>\r\n}", styles: [".card-history{display:flex;flex-direction:column;gap:15px}.card-date{color:#1c1c12;font-size:1.4rem;font-weight:600}.event-card{background-color:#f0f0db;border-radius:8px;margin-bottom:15px;overflow:hidden;border:1px solid #c7c7ad}.event-header{padding:12px 16px;display:flex;align-items:center;justify-content:space-between;cursor:pointer}.event-header:hover{background-color:#e0e0c8}.event-info{display:flex;align-items:center;gap:8px}.expand-icon{font-size:12px;transform:rotate(180deg);transition:transform .2s}.event-card.expanded .expand-icon{transform:rotate(90deg)}.event-type{font-weight:600;font-size:1.4rem;color:#1c1c12}.event-time{color:#454733;font-size:1.1rem}.status-badges{display:flex;align-items:center;gap:8px}.badge{padding:6px 10px;border-radius:6px;font-size:1.2rem;font-weight:600;border:none}.badge-maintenance{background:#bfd100;color:#4f5700}.badge-operational{background-color:#78db5c;color:#0f5e00}.badge-no-date{background-color:#bfe9ff;color:#004d65}.event-details{max-height:0;overflow:hidden;padding:0 10px;background-color:#f0f0e0;transition:max-height .3s ease-in-out,padding .3s ease-in-out}.event-card.expanded .event-details{max-height:300px;padding:20px 10px}.responsible-info{display:flex;align-items:center;gap:12px;margin-bottom:15px;padding:20px 10px;background-color:#ebe8d6;border-radius:8px}.avatar{width:36px;height:36px;border-radius:50%;background-color:#bfd100;display:flex;align-items:center;justify-content:center;font-weight:700}.avatar img{width:24px;height:24px}.responsible-details h4{font-size:1.2rem;color:#454733;margin-bottom:2px;font-weight:400}.responsible-name{font-size:1.4rem;font-weight:600;color:#1c1c12}.technical-description{padding:20px 10px;background-color:#ebe8d6;border-radius:8px;height:120px}.tech-label{font-size:1.2rem;color:#454733;margin-bottom:5px}.tech-content{font-size:1.4rem;color:#1c1c12;font-weight:600}.badge-active{color:#006d2f;font-weight:600;background-color:#c6f6c1;border-radius:8px;padding:6px 10px}.badge-inactive{color:#454733e7;font-weight:600;background-color:#e0e0e0;border-radius:8px;padding:6px 10px}.badge-retired{color:#ba1a1a;font-weight:600;background-color:#ffe5e5;border-radius:8px;padding:6px 10px}.badge-obsolete{color:#454733;font-weight:600;border:1px solid #c7c7ad;border-radius:8px;padding:6px 10px}.badge-operativo{color:#0f5e00;font-weight:600;background-color:#80ff66;border-radius:8px;padding:6px 10px}.badge-maintenance{color:#4f5700;font-weight:600;background-color:#bfd100;border-radius:8px;padding:6px 10px}.badge-failures{color:#94000a;font-weight:600;background-color:#fcd;border-radius:8px;padding:6px 10px}.badge-deactivated{color:#ba1a1a;font-weight:600;border:1px solid #ba1a1a;border-radius:8px;padding:6px 10px}.badge-default{color:#6b6b47;font-weight:600;border:1px dashed #c7c7ad;border-radius:8px;padding:6px 10px;font-style:italic}.nr-header{padding:12px 16px;border-bottom:1px solid #c7c7ad;display:flex;align-items:center;gap:6px}.nr-title{font-weight:600;font-size:1.4rem;color:#1c1c12}.nr-type{font-size:1.2rem;color:#6b6b47}.nr-body{padding:16px}.nr-description{font-size:1.3rem;color:#454733;margin:0 0 16px}.nr-comparison{display:flex;align-items:center;gap:16px}.nr-col{flex:1;display:flex;flex-direction:column;gap:8px}.nr-label{font-size:1.1rem;font-weight:700;text-transform:uppercase}.nr-label.prev{color:#ba1a1a}.nr-label.curr{color:#006d2f}.nr-value{padding:12px 16px;border-radius:8px;font-size:1.3rem;font-weight:600}.nr-value.prev-val{background-color:#ffe5e5;color:#ba1a1a}.nr-value.curr-val{background-color:#c6f6c1;color:#006d2f}.nr-arrow{display:flex;align-items:center;justify-content:center;color:#6b6b47;padding-top:20px}.historial-card{background-color:#fafae8;border-radius:16px;padding:1.25rem 1.5rem;box-shadow:0 3px 10px #78724d0f;display:flex;flex-direction:column;gap:.8rem;transition:all .22s cubic-bezier(.16,1,.3,1)}.historial-card__header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px dashed rgba(120,114,77,.15);padding-bottom:.65rem}.historial-card__title-area{display:flex;align-items:center;gap:.75rem}.historial-card__icon-wrapper{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background-color:#78724d1a;color:#5a5a46}.historial-card__icon-wrapper.state-change{background-color:#5963001a;color:#596300}.historial-card__icon-wrapper.doc-change{background-color:#3974c01a;color:#3974c0}.historial-card__id--local{background-color:#3974c014;color:#3974c0}.historial-card__title{margin:0;font-size:1.35rem;font-weight:700;color:#2c3016}.historial-card__id{font-size:1rem;font-weight:600;color:#7b7d60;background-color:#78724d14;padding:.2rem .6rem;border-radius:99px}.historial-card__body{display:flex;flex-direction:column;gap:.75rem}.historial-card__reason-box{border-left:3px solid #b2ac88;padding:.75rem 1rem;border-radius:4px 12px 12px 4px}.reason-label{display:flex;align-items:center;font-size:.95rem;font-weight:700;color:#615c3c;margin-bottom:.35rem;text-transform:uppercase;letter-spacing:.03em}.reason-text{margin:0;font-size:1.25rem;font-weight:700;color:#383a30;line-height:1.45;white-space:pre-wrap}.historial-card__states-container{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;padding:.5rem 0;border-radius:8px}.states-label{font-size:1.1rem;font-weight:700;color:#615c3c}.historial-card__footer{display:flex;justify-content:flex-start;align-items:center;gap:1.8rem;border-top:1px solid rgba(120,114,77,.08);padding-top:.75rem;flex-wrap:wrap}.historial-card__meta-item{display:flex;align-items:center;gap:.6rem;font-size:1.15rem;color:#6b6a55}.historial-card__meta-item svg{color:#7b7d60}.historial-item__status-row{display:inline-flex;align-items:center;gap:.5rem;flex-wrap:wrap}.history-arrow{color:#6d6a58;display:inline-flex;align-self:center}.status-chip{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.25rem .65rem;border-radius:6px;font-size:1.1rem;text-transform:uppercase;font-weight:600;line-height:1.2;white-space:nowrap;box-sizing:border-box;min-width:max-content;vertical-align:middle}.status-chip--active,.status-chip--restructured,.status-chip--in-process{background-color:#9dafd8;color:#0746cf}.status-chip--completed,.status-chip--paid{background-color:#9ed89d;color:#006d2f}.status-chip--pending{background-color:#d8bf9d;color:#cf6507}.status-chip--defaulted{background-color:#c7b0d8;color:#6a1b9a}.status-chip--cancelled{background-color:#d89d9d;color:#cf0707}.status-chip--neutral{background-color:#bac2bb;color:#40484c}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: DatePipe, name: "date" }] });
|
|
6663
6731
|
}
|
|
6664
6732
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CardHistory, decorators: [{
|
|
6665
6733
|
type: Component,
|
|
6666
|
-
args: [{ selector: 'lib-card-history', imports: [NgClass, DatePipe], template: "@if(variant() == 'default' && withResponsible()) {\r\n<div class=\"card-history\">\r\n <span class=\"card-date\">{{ formatDate(DataCard()?.date || \"\") }}</span>\r\n <div class=\"event-card\" [class.expanded]=\"isExpanded()\">\r\n <div class=\"event-header\" (click)=\"toggleExpanded()\">\r\n <div class=\"event-info\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"expand-icon icon icon-tabler icons-tabler-outline icon-tabler-chevron-up\">\r\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path d=\"M6 15l6 -6l6 6\" />\r\n </svg>\r\n <span class=\"event-type\">{{ DataCard()?.title }}</span>\r\n <span class=\"event-time\">{{ DataCard()?.time }}</span>\r\n </div>\r\n <div class=\"status-badges\">\r\n <span class=\"badge\" [ngClass]=\"getBadgeClass(DataCard()?.previousStatus || '')\">\r\n {{ DataCard()?.previousStatus }}\r\n </span>\r\n\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"icon icon-tabler icons-tabler-outline icon-tabler-chevrons-right\">\r\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path d=\"M7 7l5 5l-5 5\" />\r\n <path d=\"M13 7l5 5l-5 5\" />\r\n </svg>\r\n\r\n <span class=\"badge\" [ngClass]=\"getBadgeClass(DataCard()?.currentStatus || '')\">\r\n {{ DataCard()?.currentStatus }}\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"event-details\">\r\n <div class=\"responsible-info\">\r\n <div class=\"avatar\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"icon icon-tabler icons-tabler-outline icon-tabler-user\">\r\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path d=\"M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0\" />\r\n <path d=\"M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2\" />\r\n </svg>\r\n </div>\r\n <div class=\"responsible-details\">\r\n <h4>Responsable</h4>\r\n <div class=\"responsible-name\">{{ DataCard()?.responsible }}</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"technical-description\">\r\n <div class=\"tech-label\">Descripci\u00F3n t\u00E9cnica</div>\r\n <div class=\"tech-content\">\r\n {{ DataCard()?.description }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n}\r\n\r\n@if(variant() == 'default' && !withResponsible()) {\r\n<div class=\"card-history\">\r\n <div class=\"event-card no-responsible\">\r\n <div class=\"nr-header\">\r\n <span class=\"nr-title\">{{ DataCard()?.title }}</span>\r\n <span class=\"nr-type\">({{ DataCard()?.type || 'estado' }})</span>\r\n </div>\r\n <div class=\"nr-body\">\r\n @if (DataCard()?.actionType === 'create') {\r\n <p class=\"nr-description\">\r\n El registro fue creado con los siguientes datos.\r\n </p>\r\n <div class=\"nr-comparison single\">\r\n <div class=\"nr-col\">\r\n <span class=\"nr-label curr\">VALOR INICIAL</span>\r\n <div class=\"nr-value curr-val\">{{ DataCard()?.currentStatus }}</div>\r\n </div>\r\n </div>\r\n } @else if (DataCard()?.actionType === 'delete') {\r\n <p class=\"nr-description\">\r\n El registro fue eliminado permanentemente.\r\n </p>\r\n <div class=\"nr-comparison single\">\r\n <div class=\"nr-col\">\r\n <span class=\"nr-label prev\">VALOR ELIMINADO</span>\r\n <div class=\"nr-value prev-val\">{{ DataCard()?.previousStatus }}</div>\r\n </div>\r\n </div>\r\n } @else {\r\n <p class=\"nr-description\">\r\n <span style=\"text-transform: capitalize;\">{{ DataCard()?.type || 'El registro' }}</span> cambi\u00F3 de \"{{\r\n DataCard()?.previousStatus }}\" a \"{{ DataCard()?.currentStatus }}\".\r\n </p>\r\n\r\n <div class=\"nr-comparison\">\r\n <div class=\"nr-col\">\r\n <span class=\"nr-label prev\">VALOR ANTERIOR</span>\r\n <div class=\"nr-value prev-val\">{{ DataCard()?.previousStatus }}</div>\r\n </div>\r\n\r\n <div class=\"nr-arrow\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"icon icon-tabler icons-tabler-outline icon-tabler-arrow-right\">\r\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path d=\"M5 12l14 0\" />\r\n <path d=\"M13 18l6 -6\" />\r\n <path d=\"M13 6l6 6\" />\r\n </svg>\r\n </div>\r\n\r\n <div class=\"nr-col\">\r\n <span class=\"nr-label curr\">VALOR NUEVO</span>\r\n <div class=\"nr-value curr-val\">{{ DataCard()?.currentStatus }}</div>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n</div>\r\n}\r\n\r\n@if (variant() == 'history') {\r\n@let entry = historialEntry();\r\n<!-- Historial y movimientos -->\r\n<article class=\"historial-card\">\r\n <!-- Card Header -->\r\n <div class=\"historial-card__header\">\r\n <div class=\"historial-card__title-area\">\r\n <span class=\"historial-card__icon-wrapper\"\r\n [ngClass]=\"{'state-change': entry?.tipo === 'estado', 'doc-change': entry?.tipo === 'documento'}\">\r\n @if (entry?.tipo === 'documento') {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path d=\"M14 3v4a1 1 0 0 0 1 1h4\" />\r\n <path d=\"M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z\" />\r\n <path d=\"M9 9l1 0\" />\r\n <path d=\"M9 13l6 0\" />\r\n <path d=\"M9 17l6 0\" />\r\n </svg>\r\n } @else if (entry?.previousState || entry?.currentState) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path d=\"M3 9l4 -4l4 4m-4 -4v14\" />\r\n <path d=\"M21 15l-4 4l-4 -4m4 4v-14\" />\r\n </svg>\r\n } @else {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path d=\"M12 8l.01 0\" />\r\n <path d=\"M12 12l0 9\" />\r\n <path d=\"M12 3a9 9 0 1 0 9 9\" />\r\n </svg>\r\n }\r\n </span>\r\n <h3 class=\"historial-card__title\">{{ entry?.titulo }}</h3>\r\n </div>\r\n @if (entry?.tipo === 'estado') {\r\n <div class=\"historial-card__id\">ID #{{ entry?.id }}</div>\r\n } @else {\r\n <div class=\"historial-card__id historial-card__id--local\">{{ entry?.tipo === 'documento' ? 'Documento' : 'Movimiento' }}\r\n </div>\r\n }\r\n </div>\r\n\r\n <!-- Card Body -->\r\n <div class=\"historial-card__body\">\r\n @if (entry?.detalle) {\r\n <div class=\"historial-card__reason-box\">\r\n <span class=\"reason-label\">Detalles</span>\r\n <p class=\"reason-text\">{{ entry?.detalle }}</p>\r\n </div>\r\n }\r\n\r\n @if (entry?.previousState || entry?.currentState) {\r\n <div class=\"historial-card__states-container\">\r\n <span class=\"states-label\">Transici\u00F3n:</span>\r\n <div class=\"historial-item__status-row\">\r\n @if (entry?.previousState) {\r\n <span class=\"status-chip\" [ngClass]=\"getStatusChipClass(entry!.previousState!)\">\r\n {{ statusLabel(entry!.previousState!) }}\r\n </span>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"history-arrow\">\r\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path d=\"M7 7l5 5l-5 5\" />\r\n <path d=\"M13 7l5 5l-5 5\" />\r\n </svg>\r\n }\r\n @if (entry?.currentState) {\r\n <span class=\"status-chip\" [ngClass]=\"getStatusChipClass(entry!.currentState!)\">\r\n {{ statusLabel(entry!.currentState!) }}\r\n </span>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n\r\n <!-- Card Footer -->\r\n <div class=\"historial-card__footer\">\r\n <div class=\"historial-card__meta-item\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"me-1\">\r\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path d=\"M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0\" />\r\n <path d=\"M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2\" />\r\n </svg>\r\n <span>Usuario: <strong>{{ entry?.createdBy || 'SISTEMA' }}</strong></span>\r\n </div>\r\n <div class=\"historial-card__meta-item\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"me-1\">\r\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path d=\"M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12z\" />\r\n <path d=\"M16 3v4\" />\r\n <path d=\"M8 3v4\" />\r\n <path d=\"M4 11h16\" />\r\n <path d=\"M11 15h1\" />\r\n <path d=\"M12 15v3\" />\r\n </svg>\r\n <span>{{ entry?.creationDate | date:'dd/MM/yyyy h:mm a' }}</span>\r\n </div>\r\n </div>\r\n</article>\r\n}", styles: [".card-history{display:flex;flex-direction:column;gap:15px}.card-date{color:#1c1c12;font-size:1.4rem;font-weight:600}.event-card{background-color:#f0f0db;border-radius:8px;margin-bottom:15px;overflow:hidden;border:1px solid #c7c7ad}.event-header{padding:12px 16px;display:flex;align-items:center;justify-content:space-between;cursor:pointer}.event-header:hover{background-color:#e0e0c8}.event-info{display:flex;align-items:center;gap:8px}.expand-icon{font-size:12px;transform:rotate(180deg);transition:transform .2s}.event-card.expanded .expand-icon{transform:rotate(90deg)}.event-type{font-weight:600;font-size:1.4rem;color:#1c1c12}.event-time{color:#454733;font-size:1.1rem}.status-badges{display:flex;align-items:center;gap:8px}.badge{padding:6px 10px;border-radius:6px;font-size:1.2rem;font-weight:600;border:none}.badge-maintenance{background:#bfd100;color:#4f5700}.badge-operational{background-color:#78db5c;color:#0f5e00}.badge-no-date{background-color:#bfe9ff;color:#004d65}.event-details{max-height:0;overflow:hidden;padding:0 10px;background-color:#f0f0e0;transition:max-height .3s ease-in-out,padding .3s ease-in-out}.event-card.expanded .event-details{max-height:300px;padding:20px 10px}.responsible-info{display:flex;align-items:center;gap:12px;margin-bottom:15px;padding:20px 10px;background-color:#ebe8d6;border-radius:8px}.avatar{width:36px;height:36px;border-radius:50%;background-color:#bfd100;display:flex;align-items:center;justify-content:center;font-weight:700}.avatar img{width:24px;height:24px}.responsible-details h4{font-size:1.2rem;color:#454733;margin-bottom:2px;font-weight:400}.responsible-name{font-size:1.4rem;font-weight:600;color:#1c1c12}.technical-description{padding:20px 10px;background-color:#ebe8d6;border-radius:8px;height:120px}.tech-label{font-size:1.2rem;color:#454733;margin-bottom:5px}.tech-content{font-size:1.4rem;color:#1c1c12;font-weight:600}.badge-active{color:#006d2f;font-weight:600;background-color:#c6f6c1;border-radius:8px;padding:6px 10px}.badge-inactive{color:#454733e7;font-weight:600;background-color:#e0e0e0;border-radius:8px;padding:6px 10px}.badge-retired{color:#ba1a1a;font-weight:600;background-color:#ffe5e5;border-radius:8px;padding:6px 10px}.badge-obsolete{color:#454733;font-weight:600;border:1px solid #c7c7ad;border-radius:8px;padding:6px 10px}.badge-operativo{color:#0f5e00;font-weight:600;background-color:#80ff66;border-radius:8px;padding:6px 10px}.badge-maintenance{color:#4f5700;font-weight:600;background-color:#bfd100;border-radius:8px;padding:6px 10px}.badge-failures{color:#94000a;font-weight:600;background-color:#fcd;border-radius:8px;padding:6px 10px}.badge-deactivated{color:#ba1a1a;font-weight:600;border:1px solid #ba1a1a;border-radius:8px;padding:6px 10px}.badge-default{color:#6b6b47;font-weight:600;border:1px dashed #c7c7ad;border-radius:8px;padding:6px 10px;font-style:italic}.nr-header{padding:12px 16px;border-bottom:1px solid #c7c7ad;display:flex;align-items:center;gap:6px}.nr-title{font-weight:600;font-size:1.4rem;color:#1c1c12}.nr-type{font-size:1.2rem;color:#6b6b47}.nr-body{padding:16px}.nr-description{font-size:1.3rem;color:#454733;margin:0 0 16px}.nr-comparison{display:flex;align-items:center;gap:16px}.nr-col{flex:1;display:flex;flex-direction:column;gap:8px}.nr-label{font-size:1.1rem;font-weight:700;text-transform:uppercase}.nr-label.prev{color:#ba1a1a}.nr-label.curr{color:#006d2f}.nr-value{padding:12px 16px;border-radius:8px;font-size:1.3rem;font-weight:600}.nr-value.prev-val{background-color:#ffe5e5;color:#ba1a1a}.nr-value.curr-val{background-color:#c6f6c1;color:#006d2f}.nr-arrow{display:flex;align-items:center;justify-content:center;color:#6b6b47;padding-top:20px}.historial-card{background-color:#fafae8;border-radius:16px;padding:1.25rem 1.5rem;box-shadow:0 3px 10px #78724d0f;display:flex;flex-direction:column;gap:.8rem;transition:all .22s cubic-bezier(.16,1,.3,1)}.historial-card__header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px dashed rgba(120,114,77,.15);padding-bottom:.65rem}.historial-card__title-area{display:flex;align-items:center;gap:.75rem}.historial-card__icon-wrapper{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background-color:#78724d1a;color:#5a5a46}.historial-card__icon-wrapper.state-change{background-color:#5963001a;color:#596300}.historial-card__icon-wrapper.doc-change{background-color:#3974c01a;color:#3974c0}.historial-card__id--local{background-color:#3974c014;color:#3974c0}.historial-card__title{margin:0;font-size:1.35rem;font-weight:700;color:#2c3016}.historial-card__id{font-size:1rem;font-weight:600;color:#7b7d60;background-color:#78724d14;padding:.2rem .6rem;border-radius:99px}.historial-card__body{display:flex;flex-direction:column;gap:.75rem}.historial-card__reason-box{border-left:3px solid #b2ac88;padding:.75rem 1rem;border-radius:4px 12px 12px 4px}.reason-label{display:flex;align-items:center;font-size:.95rem;font-weight:700;color:#615c3c;margin-bottom:.35rem;text-transform:uppercase;letter-spacing:.03em}.reason-text{margin:0;font-size:1.25rem;font-weight:700;color:#383a30;line-height:1.45;white-space:pre-wrap}.historial-card__states-container{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;padding:.5rem 0;border-radius:8px}.states-label{font-size:1.1rem;font-weight:700;color:#615c3c}.historial-card__footer{display:flex;justify-content:flex-start;align-items:center;gap:1.8rem;border-top:1px solid rgba(120,114,77,.08);padding-top:.75rem;flex-wrap:wrap}.historial-card__meta-item{display:flex;align-items:center;gap:.6rem;font-size:1.15rem;color:#6b6a55}.historial-card__meta-item svg{color:#7b7d60}.historial-item__status-row{display:inline-flex;align-items:center;gap:.5rem;flex-wrap:wrap}.history-arrow{color:#6d6a58;display:inline-flex;align-self:center}.status-chip{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.25rem .65rem;border-radius:6px;font-size:1.1rem;text-transform:uppercase;font-weight:600;line-height:1.2;white-space:nowrap;box-sizing:border-box;min-width:max-content;vertical-align:middle}.status-chip--active,.status-chip--restructured,.status-chip--process{background-color:#9dafd8;color:#0746cf}.status-chip--completed,.status-chip--paid{background-color:#9ed89d;color:#006d2f}.status-chip--pending{background-color:#d8bf9d;color:#cf6507}.status-chip--defaulted{background-color:#c7b0d8;color:#6a1b9a}.status-chip--cancelled{background-color:#d89d9d;color:#cf0707}.status-chip--neutral{background-color:#bac2bb;color:#40484c}\n"] }]
|
|
6734
|
+
args: [{ selector: 'lib-card-history', imports: [NgClass, DatePipe], template: "@if(variant() == 'default' && withResponsible()) {\r\n<div class=\"card-history\">\r\n <span class=\"card-date\">{{ formatDate(DataCard()?.date || \"\") }}</span>\r\n <div class=\"event-card\" [class.expanded]=\"isExpanded()\">\r\n <div class=\"event-header\" (click)=\"toggleExpanded()\">\r\n <div class=\"event-info\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"expand-icon icon icon-tabler icons-tabler-outline icon-tabler-chevron-up\">\r\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path d=\"M6 15l6 -6l6 6\" />\r\n </svg>\r\n <span class=\"event-type\">{{ DataCard()?.title }}</span>\r\n <span class=\"event-time\">{{ DataCard()?.time }}</span>\r\n </div>\r\n <div class=\"status-badges\">\r\n <span class=\"badge\" [ngClass]=\"getBadgeClass(DataCard()?.previousStatus || '')\">\r\n {{ DataCard()?.previousStatus }}\r\n </span>\r\n\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"icon icon-tabler icons-tabler-outline icon-tabler-chevrons-right\">\r\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path d=\"M7 7l5 5l-5 5\" />\r\n <path d=\"M13 7l5 5l-5 5\" />\r\n </svg>\r\n\r\n <span class=\"badge\" [ngClass]=\"getBadgeClass(DataCard()?.currentStatus || '')\">\r\n {{ DataCard()?.currentStatus }}\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"event-details\">\r\n <div class=\"responsible-info\">\r\n <div class=\"avatar\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"icon icon-tabler icons-tabler-outline icon-tabler-user\">\r\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path d=\"M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0\" />\r\n <path d=\"M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2\" />\r\n </svg>\r\n </div>\r\n <div class=\"responsible-details\">\r\n <h4>Responsable</h4>\r\n <div class=\"responsible-name\">{{ DataCard()?.responsible }}</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"technical-description\">\r\n <div class=\"tech-label\">Descripci\u00F3n t\u00E9cnica</div>\r\n <div class=\"tech-content\">\r\n {{ DataCard()?.description }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n}\r\n\r\n@if(variant() == 'default' && !withResponsible()) {\r\n<div class=\"card-history\">\r\n <div class=\"event-card no-responsible\">\r\n <div class=\"nr-header\">\r\n <span class=\"nr-title\">{{ DataCard()?.title }}</span>\r\n <span class=\"nr-type\">({{ DataCard()?.type || 'estado' }})</span>\r\n </div>\r\n <div class=\"nr-body\">\r\n @if (DataCard()?.actionType === 'create') {\r\n <p class=\"nr-description\">\r\n El registro fue creado con los siguientes datos.\r\n </p>\r\n <div class=\"nr-comparison single\">\r\n <div class=\"nr-col\">\r\n <span class=\"nr-label curr\">VALOR INICIAL</span>\r\n <div class=\"nr-value curr-val\">{{ DataCard()?.currentStatus }}</div>\r\n </div>\r\n </div>\r\n } @else if (DataCard()?.actionType === 'delete') {\r\n <p class=\"nr-description\">\r\n El registro fue eliminado permanentemente.\r\n </p>\r\n <div class=\"nr-comparison single\">\r\n <div class=\"nr-col\">\r\n <span class=\"nr-label prev\">VALOR ELIMINADO</span>\r\n <div class=\"nr-value prev-val\">{{ DataCard()?.previousStatus }}</div>\r\n </div>\r\n </div>\r\n } @else {\r\n <p class=\"nr-description\">\r\n <span style=\"text-transform: capitalize;\">{{ DataCard()?.type || 'El registro' }}</span> cambi\u00F3 de \"{{\r\n DataCard()?.previousStatus }}\" a \"{{ DataCard()?.currentStatus }}\".\r\n </p>\r\n\r\n <div class=\"nr-comparison\">\r\n <div class=\"nr-col\">\r\n <span class=\"nr-label prev\">VALOR ANTERIOR</span>\r\n <div class=\"nr-value prev-val\">{{ DataCard()?.previousStatus }}</div>\r\n </div>\r\n\r\n <div class=\"nr-arrow\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"icon icon-tabler icons-tabler-outline icon-tabler-arrow-right\">\r\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path d=\"M5 12l14 0\" />\r\n <path d=\"M13 18l6 -6\" />\r\n <path d=\"M13 6l6 6\" />\r\n </svg>\r\n </div>\r\n\r\n <div class=\"nr-col\">\r\n <span class=\"nr-label curr\">VALOR NUEVO</span>\r\n <div class=\"nr-value curr-val\">{{ DataCard()?.currentStatus }}</div>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n</div>\r\n}\r\n\r\n@if (variant() == 'history') {\r\n@let entry = historialEntry();\r\n<!-- Historial y movimientos -->\r\n<article class=\"historial-card\">\r\n <!-- Card Header -->\r\n <div class=\"historial-card__header\">\r\n <div class=\"historial-card__title-area\">\r\n <span class=\"historial-card__icon-wrapper\"\r\n [ngClass]=\"{'state-change': entry?.tipo === 'estado', 'doc-change': entry?.tipo === 'documento'}\">\r\n @if (entry?.tipo === 'documento') {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path d=\"M14 3v4a1 1 0 0 0 1 1h4\" />\r\n <path d=\"M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z\" />\r\n <path d=\"M9 9l1 0\" />\r\n <path d=\"M9 13l6 0\" />\r\n <path d=\"M9 17l6 0\" />\r\n </svg>\r\n } @else if (entry?.previousState || entry?.currentState) {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path d=\"M3 9l4 -4l4 4m-4 -4v14\" />\r\n <path d=\"M21 15l-4 4l-4 -4m4 4v-14\" />\r\n </svg>\r\n } @else {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path d=\"M12 8l.01 0\" />\r\n <path d=\"M12 12l0 9\" />\r\n <path d=\"M12 3a9 9 0 1 0 9 9\" />\r\n </svg>\r\n }\r\n </span>\r\n <h3 class=\"historial-card__title\">{{ entry?.titulo }}</h3>\r\n </div>\r\n @if (entry?.tipo === 'estado') {\r\n <div class=\"historial-card__id\">ID #{{ entry?.id }}</div>\r\n } @else {\r\n <div class=\"historial-card__id historial-card__id--local\">{{ entry?.tipo === 'documento' ? 'Documento' : 'Movimiento' }}\r\n </div>\r\n }\r\n </div>\r\n\r\n <!-- Card Body -->\r\n <div class=\"historial-card__body\">\r\n @if (entry?.detalle) {\r\n <div class=\"historial-card__reason-box\">\r\n <span class=\"reason-label\">Detalles</span>\r\n <p class=\"reason-text\">{{ entry?.detalle }}</p>\r\n </div>\r\n }\r\n\r\n @if (entry?.previousState || entry?.currentState) {\r\n <div class=\"historial-card__states-container\">\r\n <span class=\"states-label\">Transici\u00F3n:</span>\r\n <div class=\"historial-item__status-row\">\r\n @if (entry?.previousState) {\r\n <span class=\"status-chip\" [ngClass]=\"getStatusChipClass(entry!.previousState!)\">\r\n {{ statusLabel(entry!.previousState!) }}\r\n </span>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"history-arrow\">\r\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path d=\"M7 7l5 5l-5 5\" />\r\n <path d=\"M13 7l5 5l-5 5\" />\r\n </svg>\r\n }\r\n @if (entry?.currentState) {\r\n <span class=\"status-chip\" [ngClass]=\"getStatusChipClass(entry!.currentState!)\">\r\n {{ statusLabel(entry!.currentState!) }}\r\n </span>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n\r\n <!-- Card Footer -->\r\n <div class=\"historial-card__footer\">\r\n <div class=\"historial-card__meta-item\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"me-1\">\r\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path d=\"M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0\" />\r\n <path d=\"M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2\" />\r\n </svg>\r\n <span>Usuario: <strong>{{ entry?.createdBy || 'SISTEMA' }}</strong></span>\r\n </div>\r\n <div class=\"historial-card__meta-item\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"me-1\">\r\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path d=\"M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12z\" />\r\n <path d=\"M16 3v4\" />\r\n <path d=\"M8 3v4\" />\r\n <path d=\"M4 11h16\" />\r\n <path d=\"M11 15h1\" />\r\n <path d=\"M12 15v3\" />\r\n </svg>\r\n <span>{{ entry?.creationDate | date:'dd/MM/yyyy h:mm a' }}</span>\r\n </div>\r\n </div>\r\n</article>\r\n}", styles: [".card-history{display:flex;flex-direction:column;gap:15px}.card-date{color:#1c1c12;font-size:1.4rem;font-weight:600}.event-card{background-color:#f0f0db;border-radius:8px;margin-bottom:15px;overflow:hidden;border:1px solid #c7c7ad}.event-header{padding:12px 16px;display:flex;align-items:center;justify-content:space-between;cursor:pointer}.event-header:hover{background-color:#e0e0c8}.event-info{display:flex;align-items:center;gap:8px}.expand-icon{font-size:12px;transform:rotate(180deg);transition:transform .2s}.event-card.expanded .expand-icon{transform:rotate(90deg)}.event-type{font-weight:600;font-size:1.4rem;color:#1c1c12}.event-time{color:#454733;font-size:1.1rem}.status-badges{display:flex;align-items:center;gap:8px}.badge{padding:6px 10px;border-radius:6px;font-size:1.2rem;font-weight:600;border:none}.badge-maintenance{background:#bfd100;color:#4f5700}.badge-operational{background-color:#78db5c;color:#0f5e00}.badge-no-date{background-color:#bfe9ff;color:#004d65}.event-details{max-height:0;overflow:hidden;padding:0 10px;background-color:#f0f0e0;transition:max-height .3s ease-in-out,padding .3s ease-in-out}.event-card.expanded .event-details{max-height:300px;padding:20px 10px}.responsible-info{display:flex;align-items:center;gap:12px;margin-bottom:15px;padding:20px 10px;background-color:#ebe8d6;border-radius:8px}.avatar{width:36px;height:36px;border-radius:50%;background-color:#bfd100;display:flex;align-items:center;justify-content:center;font-weight:700}.avatar img{width:24px;height:24px}.responsible-details h4{font-size:1.2rem;color:#454733;margin-bottom:2px;font-weight:400}.responsible-name{font-size:1.4rem;font-weight:600;color:#1c1c12}.technical-description{padding:20px 10px;background-color:#ebe8d6;border-radius:8px;height:120px}.tech-label{font-size:1.2rem;color:#454733;margin-bottom:5px}.tech-content{font-size:1.4rem;color:#1c1c12;font-weight:600}.badge-active{color:#006d2f;font-weight:600;background-color:#c6f6c1;border-radius:8px;padding:6px 10px}.badge-inactive{color:#454733e7;font-weight:600;background-color:#e0e0e0;border-radius:8px;padding:6px 10px}.badge-retired{color:#ba1a1a;font-weight:600;background-color:#ffe5e5;border-radius:8px;padding:6px 10px}.badge-obsolete{color:#454733;font-weight:600;border:1px solid #c7c7ad;border-radius:8px;padding:6px 10px}.badge-operativo{color:#0f5e00;font-weight:600;background-color:#80ff66;border-radius:8px;padding:6px 10px}.badge-maintenance{color:#4f5700;font-weight:600;background-color:#bfd100;border-radius:8px;padding:6px 10px}.badge-failures{color:#94000a;font-weight:600;background-color:#fcd;border-radius:8px;padding:6px 10px}.badge-deactivated{color:#ba1a1a;font-weight:600;border:1px solid #ba1a1a;border-radius:8px;padding:6px 10px}.badge-default{color:#6b6b47;font-weight:600;border:1px dashed #c7c7ad;border-radius:8px;padding:6px 10px;font-style:italic}.nr-header{padding:12px 16px;border-bottom:1px solid #c7c7ad;display:flex;align-items:center;gap:6px}.nr-title{font-weight:600;font-size:1.4rem;color:#1c1c12}.nr-type{font-size:1.2rem;color:#6b6b47}.nr-body{padding:16px}.nr-description{font-size:1.3rem;color:#454733;margin:0 0 16px}.nr-comparison{display:flex;align-items:center;gap:16px}.nr-col{flex:1;display:flex;flex-direction:column;gap:8px}.nr-label{font-size:1.1rem;font-weight:700;text-transform:uppercase}.nr-label.prev{color:#ba1a1a}.nr-label.curr{color:#006d2f}.nr-value{padding:12px 16px;border-radius:8px;font-size:1.3rem;font-weight:600}.nr-value.prev-val{background-color:#ffe5e5;color:#ba1a1a}.nr-value.curr-val{background-color:#c6f6c1;color:#006d2f}.nr-arrow{display:flex;align-items:center;justify-content:center;color:#6b6b47;padding-top:20px}.historial-card{background-color:#fafae8;border-radius:16px;padding:1.25rem 1.5rem;box-shadow:0 3px 10px #78724d0f;display:flex;flex-direction:column;gap:.8rem;transition:all .22s cubic-bezier(.16,1,.3,1)}.historial-card__header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px dashed rgba(120,114,77,.15);padding-bottom:.65rem}.historial-card__title-area{display:flex;align-items:center;gap:.75rem}.historial-card__icon-wrapper{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background-color:#78724d1a;color:#5a5a46}.historial-card__icon-wrapper.state-change{background-color:#5963001a;color:#596300}.historial-card__icon-wrapper.doc-change{background-color:#3974c01a;color:#3974c0}.historial-card__id--local{background-color:#3974c014;color:#3974c0}.historial-card__title{margin:0;font-size:1.35rem;font-weight:700;color:#2c3016}.historial-card__id{font-size:1rem;font-weight:600;color:#7b7d60;background-color:#78724d14;padding:.2rem .6rem;border-radius:99px}.historial-card__body{display:flex;flex-direction:column;gap:.75rem}.historial-card__reason-box{border-left:3px solid #b2ac88;padding:.75rem 1rem;border-radius:4px 12px 12px 4px}.reason-label{display:flex;align-items:center;font-size:.95rem;font-weight:700;color:#615c3c;margin-bottom:.35rem;text-transform:uppercase;letter-spacing:.03em}.reason-text{margin:0;font-size:1.25rem;font-weight:700;color:#383a30;line-height:1.45;white-space:pre-wrap}.historial-card__states-container{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;padding:.5rem 0;border-radius:8px}.states-label{font-size:1.1rem;font-weight:700;color:#615c3c}.historial-card__footer{display:flex;justify-content:flex-start;align-items:center;gap:1.8rem;border-top:1px solid rgba(120,114,77,.08);padding-top:.75rem;flex-wrap:wrap}.historial-card__meta-item{display:flex;align-items:center;gap:.6rem;font-size:1.15rem;color:#6b6a55}.historial-card__meta-item svg{color:#7b7d60}.historial-item__status-row{display:inline-flex;align-items:center;gap:.5rem;flex-wrap:wrap}.history-arrow{color:#6d6a58;display:inline-flex;align-self:center}.status-chip{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.25rem .65rem;border-radius:6px;font-size:1.1rem;text-transform:uppercase;font-weight:600;line-height:1.2;white-space:nowrap;box-sizing:border-box;min-width:max-content;vertical-align:middle}.status-chip--active,.status-chip--restructured,.status-chip--in-process{background-color:#9dafd8;color:#0746cf}.status-chip--completed,.status-chip--paid{background-color:#9ed89d;color:#006d2f}.status-chip--pending{background-color:#d8bf9d;color:#cf6507}.status-chip--defaulted{background-color:#c7b0d8;color:#6a1b9a}.status-chip--cancelled{background-color:#d89d9d;color:#cf0707}.status-chip--neutral{background-color:#bac2bb;color:#40484c}\n"] }]
|
|
6667
6735
|
}], propDecorators: { DataCard: [{ type: i0.Input, args: [{ isSignal: true, alias: "DataCard", required: false }] }], historialEntry: [{ type: i0.Input, args: [{ isSignal: true, alias: "historialEntry", required: false }] }], withResponsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "withResponsible", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
|
|
6668
6736
|
|
|
6669
6737
|
class Signature {
|
|
@@ -6720,6 +6788,113 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
6720
6788
|
args: [{ selector: 'lib-document-item', imports: [], template: "<div class=\"document-item\">\n <div class=\"document-info\">\n <div class=\"document-header\">\n <span [class]=\"iconClass\"></span>\n </div>\n\n <div class=\"document-details\">\n <span class=\"folio\">{{ data()?.folio }}</span>\n <h3 class=\"title\">{{ data()?.name }}</h3>\n <p class=\"date\">Fecha de creaci\u00F3n: {{ data()?.creation_date }}</p>\n </div>\n </div>\n <a (click)=\"viewDocument()\" class=\"document-action\">Ver documento</a>\n</div>\n", styles: [".document-item{background-color:#fafae8;border-radius:15px;padding:10px;margin-bottom:12px;display:flex;justify-content:space-between;align-items:center;transition:background-color .2s;min-width:0}.document-info{display:flex;align-items:flex-start;gap:15px;min-width:0;flex:1}.document-icon{display:inline-block;width:24px;height:24px;flex-shrink:0;background-color:#596300;mask-size:contain;mask-repeat:no-repeat;mask-position:center;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center}.document-icon--document{mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M14 3v4a1 1 0 0 0 1 1h4'/%3E%3Cpath d='M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z'/%3E%3Cpath d='M9 13l6 0'/%3E%3Cpath d='M9 17l6 0'/%3E%3C/svg%3E\");-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M14 3v4a1 1 0 0 0 1 1h4'/%3E%3Cpath d='M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z'/%3E%3Cpath d='M9 13l6 0'/%3E%3Cpath d='M9 17l6 0'/%3E%3C/svg%3E\")}.document-icon--image{mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M15 8h.01'/%3E%3Cpath d='M3 6a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3v-12z'/%3E%3Cpath d='M3 16l5 -5c.928 -.893 2.072 -.893 3 0l5 5'/%3E%3Cpath d='M14 14l1 -1c.928 -.893 2.072 -.893 3 0l3 3'/%3E%3C/svg%3E\");-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M15 8h.01'/%3E%3Cpath d='M3 6a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3v-12z'/%3E%3Cpath d='M3 16l5 -5c.928 -.893 2.072 -.893 3 0l5 5'/%3E%3Cpath d='M14 14l1 -1c.928 -.893 2.072 -.893 3 0l3 3'/%3E%3C/svg%3E\")}.document-icon--video{mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M15 10l4.553 -2.276a1 1 0 0 1 1.447 .894v6.764a1 1 0 0 1 -1.447 .894l-4.553 -2.276v-4z'/%3E%3Cpath d='M3 6m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z'/%3E%3C/svg%3E\");-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M15 10l4.553 -2.276a1 1 0 0 1 1.447 .894v6.764a1 1 0 0 1 -1.447 .894l-4.553 -2.276v-4z'/%3E%3Cpath d='M3 6m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z'/%3E%3C/svg%3E\")}.document-details{min-width:0;display:flex;flex-direction:column;gap:0;line-height:1.1}.document-details .folio{color:#454733;font-size:1.2rem;font-weight:500;margin:0;padding:0}.document-details h3{color:#1c1c12;font-size:16px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:4px 0 0;padding:0}.document-details p{color:#454733;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:2px 0 0;padding:0}.document-action{color:#596300;font-size:16px;text-decoration:none;font-weight:500;flex-shrink:0;margin-left:10px;cursor:pointer;padding:8px 12px;border-radius:50px;transition:background-color .3s ease}.document-action:hover{background-color:#5963001a}@media (max-width: 768px){.document-item{padding:12px;border-radius:12px;margin-bottom:10px}.document-info{gap:12px}.document-details h3{font-size:15px}.document-details p{font-size:13px}.document-action{font-size:15px}}@media (max-width: 480px){.document-item{padding:10px 8px;border-radius:10px;flex-direction:column;align-items:flex-start;gap:8px}.document-info{gap:10px;width:100%}.document-icon{width:20px;height:20px}.document-details h3{font-size:14px;margin-top:3px}.document-details p{font-size:12px;margin-top:2px}.document-action{font-size:14px;margin-left:0;align-self:flex-end;width:100%;text-align:right}}\n"] }]
|
|
6721
6789
|
}], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], view: [{ type: i0.Output, args: ["view"] }] } });
|
|
6722
6790
|
|
|
6791
|
+
class RolCard {
|
|
6792
|
+
roleName = input.required(...(ngDevMode ? [{ debugName: "roleName" }] : []));
|
|
6793
|
+
description = input('', ...(ngDevMode ? [{ debugName: "description" }] : []));
|
|
6794
|
+
color = input('#596300', ...(ngDevMode ? [{ debugName: "color" }] : []));
|
|
6795
|
+
userCount = input(0, ...(ngDevMode ? [{ debugName: "userCount" }] : []));
|
|
6796
|
+
edit = output();
|
|
6797
|
+
permissions = output();
|
|
6798
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RolCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6799
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.16", type: RolCard, isStandalone: true, selector: "lib-rol-card", inputs: { roleName: { classPropertyName: "roleName", publicName: "roleName", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, userCount: { classPropertyName: "userCount", publicName: "userCount", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { edit: "edit", permissions: "permissions" }, ngImport: i0, template: "<div class=\"rol-card\">\n <div class=\"card-header\">\n <div class=\"icon-container\" [style.backgroundColor]=\"color()\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 22C12 22 20 18 20 12V5L12 2L4 5V12C4 18 12 22 12 22Z\" stroke=\"white\" stroke-width=\"2\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n <div class=\"header-text\">\n <h3 class=\"role-name\">{{ roleName() }}</h3>\n <p class=\"role-description\">{{ description() }}</p>\n </div>\n </div>\n\n <hr class=\"divider\" />\n\n <div class=\"card-footer\">\n <span class=\"user-count\">{{ userCount() }} usuarios</span>\n <div class=\"actions\">\n <lib-button variant=\"outline\" size=\"compact\" (clicked)=\"edit.emit()\">\n <div class=\"button-content\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11 4H4C3.46957 4 2.96086 4.21071 2.58579 4.58579C2.21071 4.96086 2 5.46957 2 6V20C2 20.5304 2.21071 21.0391 2.58579 21.4142C2.96086 21.7893 3.46957 22 4 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V13\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M18.5 2.50001C18.8978 2.10219 19.4374 1.87869 20 1.87869C20.5626 1.87869 21.1022 2.10219 21.5 2.50001C21.8978 2.89784 22.1213 3.4374 22.1213 4.00001C22.1213 4.56262 21.8978 5.10219 21.5 5.50001L12 15L8 16L9 12L18.5 2.50001Z\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n Editar\n </div>\n </lib-button>\n <lib-button variant=\"primary\" size=\"compact\" (clicked)=\"permissions.emit()\">\n <div class=\"button-content\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n class=\"icon icon-tabler icons-tabler-outline icon-tabler-settings\">\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n <path\n d=\"M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065\" />\n <path d=\"M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0\" />\n </svg>\n Permisos\n </div>\n </lib-button>\n </div>\n </div>\n</div>", styles: [".rol-card{width:100%;max-width:400px;background-color:#f6f7eb;border:1px solid #e2e4cc;border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:16px;box-shadow:0 2px 4px #0000000d;font-family:Inter,system-ui,sans-serif;color:#1a1c00}.card-header{display:flex;align-items:center;gap:16px}.icon-container{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.header-text{display:flex;flex-direction:column;gap:4px}.role-name{margin:0;font-size:18px;font-weight:600;color:#1a1c00}.role-description{margin:0;font-size:14px;color:#6a7138}.divider{margin:0;border:none;border-top:1px solid #dcdfb8;width:100%}.card-footer{display:flex;justify-content:space-between;align-items:center}.user-count{font-size:14px;font-weight:500;color:#383c16}.actions{display:flex;gap:8px;align-items:center}.button-content{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:500}.button-content svg{flex-shrink:0}\n"], dependencies: [{ kind: "component", type: Button, selector: "lib-button", inputs: ["variant", "type", "disabled", "fullWidth", "size"], outputs: ["clicked"] }] });
|
|
6800
|
+
}
|
|
6801
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RolCard, decorators: [{
|
|
6802
|
+
type: Component,
|
|
6803
|
+
args: [{ selector: 'lib-rol-card', imports: [Button], template: "<div class=\"rol-card\">\n <div class=\"card-header\">\n <div class=\"icon-container\" [style.backgroundColor]=\"color()\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 22C12 22 20 18 20 12V5L12 2L4 5V12C4 18 12 22 12 22Z\" stroke=\"white\" stroke-width=\"2\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n <div class=\"header-text\">\n <h3 class=\"role-name\">{{ roleName() }}</h3>\n <p class=\"role-description\">{{ description() }}</p>\n </div>\n </div>\n\n <hr class=\"divider\" />\n\n <div class=\"card-footer\">\n <span class=\"user-count\">{{ userCount() }} usuarios</span>\n <div class=\"actions\">\n <lib-button variant=\"outline\" size=\"compact\" (clicked)=\"edit.emit()\">\n <div class=\"button-content\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11 4H4C3.46957 4 2.96086 4.21071 2.58579 4.58579C2.21071 4.96086 2 5.46957 2 6V20C2 20.5304 2.21071 21.0391 2.58579 21.4142C2.96086 21.7893 3.46957 22 4 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V13\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M18.5 2.50001C18.8978 2.10219 19.4374 1.87869 20 1.87869C20.5626 1.87869 21.1022 2.10219 21.5 2.50001C21.8978 2.89784 22.1213 3.4374 22.1213 4.00001C22.1213 4.56262 21.8978 5.10219 21.5 5.50001L12 15L8 16L9 12L18.5 2.50001Z\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n Editar\n </div>\n </lib-button>\n <lib-button variant=\"primary\" size=\"compact\" (clicked)=\"permissions.emit()\">\n <div class=\"button-content\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n class=\"icon icon-tabler icons-tabler-outline icon-tabler-settings\">\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n <path\n d=\"M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065\" />\n <path d=\"M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0\" />\n </svg>\n Permisos\n </div>\n </lib-button>\n </div>\n </div>\n</div>", styles: [".rol-card{width:100%;max-width:400px;background-color:#f6f7eb;border:1px solid #e2e4cc;border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:16px;box-shadow:0 2px 4px #0000000d;font-family:Inter,system-ui,sans-serif;color:#1a1c00}.card-header{display:flex;align-items:center;gap:16px}.icon-container{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.header-text{display:flex;flex-direction:column;gap:4px}.role-name{margin:0;font-size:18px;font-weight:600;color:#1a1c00}.role-description{margin:0;font-size:14px;color:#6a7138}.divider{margin:0;border:none;border-top:1px solid #dcdfb8;width:100%}.card-footer{display:flex;justify-content:space-between;align-items:center}.user-count{font-size:14px;font-weight:500;color:#383c16}.actions{display:flex;gap:8px;align-items:center}.button-content{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:500}.button-content svg{flex-shrink:0}\n"] }]
|
|
6804
|
+
}], propDecorators: { roleName: [{ type: i0.Input, args: [{ isSignal: true, alias: "roleName", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], userCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "userCount", required: false }] }], edit: [{ type: i0.Output, args: ["edit"] }], permissions: [{ type: i0.Output, args: ["permissions"] }] } });
|
|
6805
|
+
|
|
6806
|
+
class ModuleCardApplicativo {
|
|
6807
|
+
sanitizer = inject(DomSanitizer);
|
|
6808
|
+
/** Datos del aplicativo */
|
|
6809
|
+
app = input.required(...(ngDevMode ? [{ debugName: "app" }] : []));
|
|
6810
|
+
/** Id del submódulo padre; null si es directo del módulo */
|
|
6811
|
+
subId = input(null, ...(ngDevMode ? [{ debugName: "subId" }] : []));
|
|
6812
|
+
/** Controla si la fila está expandida (chips visibles) */
|
|
6813
|
+
expanded = input(false, ...(ngDevMode ? [{ debugName: "expanded" }] : []));
|
|
6814
|
+
/** Solicita cambiar el estado de expansión */
|
|
6815
|
+
expandToggle = output();
|
|
6816
|
+
/** Todos los eventos del aplicativo */
|
|
6817
|
+
event = output();
|
|
6818
|
+
getSafeHtml(html) {
|
|
6819
|
+
return this.sanitizer.bypassSecurityTrustHtml(html);
|
|
6820
|
+
}
|
|
6821
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ModuleCardApplicativo, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6822
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ModuleCardApplicativo, isStandalone: true, selector: "lib-module-card-applicativo", inputs: { app: { classPropertyName: "app", publicName: "app", isSignal: true, isRequired: true, transformFunction: null }, subId: { classPropertyName: "subId", publicName: "subId", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expandToggle: "expandToggle", event: "event" }, ngImport: i0, template: "<div class=\"mc-aplicativo\" [class.mc-aplicativo--expanded]=\"expanded()\">\n\n <!-- \u2500\u2500 Encabezado del aplicativo \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <div class=\"mc-row mc-row--app\">\n <div class=\"mc-header-left\">\n <button class=\"mc-expand-btn\" [class.mc-expand-btn--open]=\"expanded()\"\n (click)=\"expandToggle.emit()\" title=\"Expandir / Colapsar\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M9 18L15 12L9 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n @if (app().icon) {\n <div class=\"mc-icon mc-icon--sm\" [innerHTML]=\"getSafeHtml(app().icon!)\"></div>\n }\n <span class=\"mc-name mc-name--app\">{{ app().name }}</span>\n </div>\n\n <div class=\"mc-header-right\">\n <!-- Mover arriba -->\n <button class=\"mc-icon-btn\" title=\"Mover arriba\"\n (click)=\"event.emit({ type: 'moveUp', applicativoId: app().id, submoduleId: subId() })\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 19V5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M5 12L12 5L19 12\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n <!-- Mover abajo -->\n <button class=\"mc-icon-btn\" title=\"Mover abajo\"\n (click)=\"event.emit({ type: 'moveDown', applicativoId: app().id, submoduleId: subId() })\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 5V19\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M19 12L12 19L5 12\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n <!-- Editar -->\n <button class=\"mc-icon-btn mc-icon-btn--edit\" title=\"Editar\"\n (click)=\"event.emit({ type: 'edit', applicativoId: app().id, submoduleId: subId() })\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M11 4H4C3.46957 4 2.96086 4.21071 2.58579 4.58579C2.21071 4.96086 2 5.46957 2 6V20C2 20.5304 2.21071 21.0391 2.58579 21.4142C2.96086 21.7893 3.46957 22 4 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V13\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M18.5 2.5C18.8978 2.10219 19.4374 1.87869 20 1.87869C20.5626 1.87869 21.1022 2.10219 21.5 2.5C21.8978 2.89784 22.1213 3.4374 22.1213 4C22.1213 4.56262 21.8978 5.10219 21.5 5.5L12 15L8 16L9 12L18.5 2.5Z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n <!-- Eliminar -->\n <button class=\"mc-icon-btn mc-icon-btn--delete\" title=\"Eliminar\"\n (click)=\"event.emit({ type: 'delete', applicativoId: app().id, submoduleId: subId() })\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M3 6H5H21\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.96086 2.21071 9.46957 2 10 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4V6M19 6V20C19 20.5304 18.7893 21.0391 18.4142 21.4142C18.0391 21.7893 17.5304 22 17 22H7C6.46957 22 5.96086 21.7893 5.58579 21.4142C5.21071 20.7893 5 20.5304 5 20V6H19Z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M10 11V17M14 11V17\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n <!-- Toggle visible -->\n <lib-toggle-custom\n [checked]=\"app().visible\"\n (toggleChange)=\"event.emit({ type: 'visibleChange', applicativoId: app().id, submoduleId: subId(), data: $event.checked })\"/>\n </div>\n </div>\n\n <!-- \u2500\u2500 Chips de acciones (expandido) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n @if (expanded()) {\n <div class=\"mc-actions-row\">\n @for (action of app().actions; track action.key) {\n <div class=\"mc-chip mc-chip--active\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M20 6L9 17L4 12\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n {{ action.label }}\n <button class=\"mc-chip-remove\" title=\"Quitar acci\u00F3n\"\n (click)=\"event.emit({ type: 'removeAction', applicativoId: app().id, submoduleId: subId(), data: action.key })\">\n \u00D7\n </button>\n </div>\n }\n <button class=\"mc-chip mc-chip--add\"\n (click)=\"event.emit({ type: 'addAction', applicativoId: app().id, submoduleId: subId() })\">\n + Acci\u00F3n\n </button>\n </div>\n }\n\n</div>\n", styles: [".mc-aplicativo{display:flex;flex-direction:column;background-color:#fff;border:1px solid #d4d7b0;border-radius:8px;overflow:hidden;transition:background-color .2s}.mc-aplicativo--expanded{background-color:#e9ead3}.mc-row--app{background-color:transparent!important;border-top:none!important}.mc-row{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;gap:12px;min-height:48px}.mc-header-left{display:flex;align-items:center;gap:10px;flex:1;min-width:0}.mc-header-right{display:flex;align-items:center;gap:6px;flex-shrink:0}.mc-expand-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:none;background:transparent;color:#6a7138;cursor:pointer;border-radius:4px;flex-shrink:0;transition:color .15s,background-color .15s,transform .2s;transform:rotate(0);padding:0}.mc-expand-btn:hover{color:#596300;background-color:#e8ebb8}.mc-expand-btn--open{transform:rotate(90deg)}.mc-icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;flex-shrink:0;color:#596300}.mc-icon svg{width:100%;height:100%}.mc-icon--sm{width:24px;height:24px}.mc-name{font-size:16px;font-weight:600;color:#1a1c00;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mc-name--app{font-size:14px;font-weight:500;color:#2e3000}.mc-icon-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;background:transparent;border-radius:6px;cursor:pointer;color:#6a7138;padding:0;transition:color .15s,background-color .15s;flex-shrink:0}.mc-icon-btn:hover{background-color:#e8ebb8;color:#596300}.mc-icon-btn--edit:hover{color:#596300;background-color:#dde899}.mc-icon-btn--delete:hover{color:#cf0707;background-color:#fde8e8}.mc-actions-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 16px 16px 56px;background-color:transparent;border-top:1px solid rgba(89,99,0,.1)}.mc-chip{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 10px;border-radius:9999px;font-size:13px;font-weight:500;cursor:default;-webkit-user-select:none;user-select:none;white-space:nowrap}.mc-chip--active{background-color:#596300;color:#f6f7eb;border:1.5px solid #596300}.mc-chip--active svg{color:#d4e850;flex-shrink:0}.mc-chip-remove{display:inline-flex;align-items:center;justify-content:center;background:transparent;border:none;color:#c8d85a;font-size:15px;line-height:1;cursor:pointer;padding:0 0 0 2px;border-left:1px solid rgba(255,255,255,.25);margin-left:2px;height:16px;transition:color .15s}.mc-chip-remove:hover{color:#fff}.mc-chip--add{background-color:transparent;color:#596300;border:1.5px solid #8a9e00;cursor:pointer;font-size:13px;font-weight:500;transition:background-color .15s,color .15s}.mc-chip--add:hover{background-color:#e8ebb8}\n"], dependencies: [{ kind: "component", type: ToggleCustom, selector: "lib-toggle-custom", inputs: ["label", "key", "disabled", "checked"], outputs: ["checkedChange", "toggleChange"] }] });
|
|
6823
|
+
}
|
|
6824
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ModuleCardApplicativo, decorators: [{
|
|
6825
|
+
type: Component,
|
|
6826
|
+
args: [{ selector: 'lib-module-card-applicativo', imports: [ToggleCustom], template: "<div class=\"mc-aplicativo\" [class.mc-aplicativo--expanded]=\"expanded()\">\n\n <!-- \u2500\u2500 Encabezado del aplicativo \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <div class=\"mc-row mc-row--app\">\n <div class=\"mc-header-left\">\n <button class=\"mc-expand-btn\" [class.mc-expand-btn--open]=\"expanded()\"\n (click)=\"expandToggle.emit()\" title=\"Expandir / Colapsar\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M9 18L15 12L9 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n @if (app().icon) {\n <div class=\"mc-icon mc-icon--sm\" [innerHTML]=\"getSafeHtml(app().icon!)\"></div>\n }\n <span class=\"mc-name mc-name--app\">{{ app().name }}</span>\n </div>\n\n <div class=\"mc-header-right\">\n <!-- Mover arriba -->\n <button class=\"mc-icon-btn\" title=\"Mover arriba\"\n (click)=\"event.emit({ type: 'moveUp', applicativoId: app().id, submoduleId: subId() })\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 19V5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M5 12L12 5L19 12\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n <!-- Mover abajo -->\n <button class=\"mc-icon-btn\" title=\"Mover abajo\"\n (click)=\"event.emit({ type: 'moveDown', applicativoId: app().id, submoduleId: subId() })\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 5V19\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M19 12L12 19L5 12\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n <!-- Editar -->\n <button class=\"mc-icon-btn mc-icon-btn--edit\" title=\"Editar\"\n (click)=\"event.emit({ type: 'edit', applicativoId: app().id, submoduleId: subId() })\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M11 4H4C3.46957 4 2.96086 4.21071 2.58579 4.58579C2.21071 4.96086 2 5.46957 2 6V20C2 20.5304 2.21071 21.0391 2.58579 21.4142C2.96086 21.7893 3.46957 22 4 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V13\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M18.5 2.5C18.8978 2.10219 19.4374 1.87869 20 1.87869C20.5626 1.87869 21.1022 2.10219 21.5 2.5C21.8978 2.89784 22.1213 3.4374 22.1213 4C22.1213 4.56262 21.8978 5.10219 21.5 5.5L12 15L8 16L9 12L18.5 2.5Z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n <!-- Eliminar -->\n <button class=\"mc-icon-btn mc-icon-btn--delete\" title=\"Eliminar\"\n (click)=\"event.emit({ type: 'delete', applicativoId: app().id, submoduleId: subId() })\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M3 6H5H21\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.96086 2.21071 9.46957 2 10 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4V6M19 6V20C19 20.5304 18.7893 21.0391 18.4142 21.4142C18.0391 21.7893 17.5304 22 17 22H7C6.46957 22 5.96086 21.7893 5.58579 21.4142C5.21071 20.7893 5 20.5304 5 20V6H19Z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M10 11V17M14 11V17\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n <!-- Toggle visible -->\n <lib-toggle-custom\n [checked]=\"app().visible\"\n (toggleChange)=\"event.emit({ type: 'visibleChange', applicativoId: app().id, submoduleId: subId(), data: $event.checked })\"/>\n </div>\n </div>\n\n <!-- \u2500\u2500 Chips de acciones (expandido) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n @if (expanded()) {\n <div class=\"mc-actions-row\">\n @for (action of app().actions; track action.key) {\n <div class=\"mc-chip mc-chip--active\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M20 6L9 17L4 12\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n {{ action.label }}\n <button class=\"mc-chip-remove\" title=\"Quitar acci\u00F3n\"\n (click)=\"event.emit({ type: 'removeAction', applicativoId: app().id, submoduleId: subId(), data: action.key })\">\n \u00D7\n </button>\n </div>\n }\n <button class=\"mc-chip mc-chip--add\"\n (click)=\"event.emit({ type: 'addAction', applicativoId: app().id, submoduleId: subId() })\">\n + Acci\u00F3n\n </button>\n </div>\n }\n\n</div>\n", styles: [".mc-aplicativo{display:flex;flex-direction:column;background-color:#fff;border:1px solid #d4d7b0;border-radius:8px;overflow:hidden;transition:background-color .2s}.mc-aplicativo--expanded{background-color:#e9ead3}.mc-row--app{background-color:transparent!important;border-top:none!important}.mc-row{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;gap:12px;min-height:48px}.mc-header-left{display:flex;align-items:center;gap:10px;flex:1;min-width:0}.mc-header-right{display:flex;align-items:center;gap:6px;flex-shrink:0}.mc-expand-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:none;background:transparent;color:#6a7138;cursor:pointer;border-radius:4px;flex-shrink:0;transition:color .15s,background-color .15s,transform .2s;transform:rotate(0);padding:0}.mc-expand-btn:hover{color:#596300;background-color:#e8ebb8}.mc-expand-btn--open{transform:rotate(90deg)}.mc-icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;flex-shrink:0;color:#596300}.mc-icon svg{width:100%;height:100%}.mc-icon--sm{width:24px;height:24px}.mc-name{font-size:16px;font-weight:600;color:#1a1c00;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mc-name--app{font-size:14px;font-weight:500;color:#2e3000}.mc-icon-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;background:transparent;border-radius:6px;cursor:pointer;color:#6a7138;padding:0;transition:color .15s,background-color .15s;flex-shrink:0}.mc-icon-btn:hover{background-color:#e8ebb8;color:#596300}.mc-icon-btn--edit:hover{color:#596300;background-color:#dde899}.mc-icon-btn--delete:hover{color:#cf0707;background-color:#fde8e8}.mc-actions-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 16px 16px 56px;background-color:transparent;border-top:1px solid rgba(89,99,0,.1)}.mc-chip{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 10px;border-radius:9999px;font-size:13px;font-weight:500;cursor:default;-webkit-user-select:none;user-select:none;white-space:nowrap}.mc-chip--active{background-color:#596300;color:#f6f7eb;border:1.5px solid #596300}.mc-chip--active svg{color:#d4e850;flex-shrink:0}.mc-chip-remove{display:inline-flex;align-items:center;justify-content:center;background:transparent;border:none;color:#c8d85a;font-size:15px;line-height:1;cursor:pointer;padding:0 0 0 2px;border-left:1px solid rgba(255,255,255,.25);margin-left:2px;height:16px;transition:color .15s}.mc-chip-remove:hover{color:#fff}.mc-chip--add{background-color:transparent;color:#596300;border:1.5px solid #8a9e00;cursor:pointer;font-size:13px;font-weight:500;transition:background-color .15s,color .15s}.mc-chip--add:hover{background-color:#e8ebb8}\n"] }]
|
|
6827
|
+
}], propDecorators: { app: [{ type: i0.Input, args: [{ isSignal: true, alias: "app", required: true }] }], subId: [{ type: i0.Input, args: [{ isSignal: true, alias: "subId", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }], expandToggle: [{ type: i0.Output, args: ["expandToggle"] }], event: [{ type: i0.Output, args: ["event"] }] } });
|
|
6828
|
+
|
|
6829
|
+
// ─── Componente ─────────────────────────────────────────────────────────────
|
|
6830
|
+
class ModuleCard {
|
|
6831
|
+
sanitizer = inject(DomSanitizer);
|
|
6832
|
+
// ── Inputs ──────────────────────────────────────────────────────────────
|
|
6833
|
+
/** Nombre del módulo */
|
|
6834
|
+
moduleName = input.required(...(ngDevMode ? [{ debugName: "moduleName" }] : []));
|
|
6835
|
+
/**
|
|
6836
|
+
* Icono del módulo como cadena SVG.
|
|
6837
|
+
* Se acepta de la misma forma que el campo `icon` de TableAction:
|
|
6838
|
+
* puede ser un SVG inline string.
|
|
6839
|
+
*/
|
|
6840
|
+
moduleIcon = input('', ...(ngDevMode ? [{ debugName: "moduleIcon" }] : []));
|
|
6841
|
+
/** Visibilidad del módulo (soporta two-way binding) */
|
|
6842
|
+
visible = model(true, ...(ngDevMode ? [{ debugName: "visible" }] : []));
|
|
6843
|
+
/** Lista de submódulos hijos */
|
|
6844
|
+
submodules = input([], ...(ngDevMode ? [{ debugName: "submodules" }] : []));
|
|
6845
|
+
/** Aplicativos directos (no dentro de un submódulo) */
|
|
6846
|
+
aplicativos = input([], ...(ngDevMode ? [{ debugName: "aplicativos" }] : []));
|
|
6847
|
+
// ── Outputs del módulo ──────────────────────────────────────────────────
|
|
6848
|
+
moveUp = output();
|
|
6849
|
+
moveDown = output();
|
|
6850
|
+
edit = output();
|
|
6851
|
+
delete = output();
|
|
6852
|
+
addApplicativo = output();
|
|
6853
|
+
addSubmodule = output();
|
|
6854
|
+
// ── Outputs de submódulos / aplicativos ─────────────────────────────────
|
|
6855
|
+
submoduleEvent = output();
|
|
6856
|
+
applicativoEvent = output();
|
|
6857
|
+
// ── Estado interno ───────────────────────────────────────────────────────
|
|
6858
|
+
expanded = signal(true, ...(ngDevMode ? [{ debugName: "expanded" }] : []));
|
|
6859
|
+
expandedSubmodules = signal(new Set(), ...(ngDevMode ? [{ debugName: "expandedSubmodules" }] : []));
|
|
6860
|
+
expandedApplicativos = signal(new Set(), ...(ngDevMode ? [{ debugName: "expandedApplicativos" }] : []));
|
|
6861
|
+
// ── Helpers ──────────────────────────────────────────────────────────────
|
|
6862
|
+
getSafeHtml(html) {
|
|
6863
|
+
return this.sanitizer.bypassSecurityTrustHtml(html);
|
|
6864
|
+
}
|
|
6865
|
+
toggleExpand() {
|
|
6866
|
+
this.expanded.set(!this.expanded());
|
|
6867
|
+
}
|
|
6868
|
+
toggleSubmodule(id) {
|
|
6869
|
+
const next = new Set(this.expandedSubmodules());
|
|
6870
|
+
next.has(id) ? next.delete(id) : next.add(id);
|
|
6871
|
+
this.expandedSubmodules.set(next);
|
|
6872
|
+
}
|
|
6873
|
+
isSubmoduleExpanded(id) {
|
|
6874
|
+
return this.expandedSubmodules().has(id);
|
|
6875
|
+
}
|
|
6876
|
+
toggleApplicativo(id) {
|
|
6877
|
+
const next = new Set(this.expandedApplicativos());
|
|
6878
|
+
next.has(id) ? next.delete(id) : next.add(id);
|
|
6879
|
+
this.expandedApplicativos.set(next);
|
|
6880
|
+
}
|
|
6881
|
+
isApplicativoExpanded(id) {
|
|
6882
|
+
return this.expandedApplicativos().has(id);
|
|
6883
|
+
}
|
|
6884
|
+
onSubmoduleVisibleChange(subId, value) {
|
|
6885
|
+
this.submoduleEvent.emit({ type: 'visibleChange', submoduleId: subId, data: value });
|
|
6886
|
+
}
|
|
6887
|
+
onApplicativoVisibleChange(appId, value, subId) {
|
|
6888
|
+
this.applicativoEvent.emit({ type: 'visibleChange', applicativoId: appId, submoduleId: subId, data: value });
|
|
6889
|
+
}
|
|
6890
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ModuleCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6891
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ModuleCard, isStandalone: true, selector: "lib-module-card", inputs: { moduleName: { classPropertyName: "moduleName", publicName: "moduleName", isSignal: true, isRequired: true, transformFunction: null }, moduleIcon: { classPropertyName: "moduleIcon", publicName: "moduleIcon", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, submodules: { classPropertyName: "submodules", publicName: "submodules", isSignal: true, isRequired: false, transformFunction: null }, aplicativos: { classPropertyName: "aplicativos", publicName: "aplicativos", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange", moveUp: "moveUp", moveDown: "moveDown", edit: "edit", delete: "delete", addApplicativo: "addApplicativo", addSubmodule: "addSubmodule", submoduleEvent: "submoduleEvent", applicativoEvent: "applicativoEvent" }, ngImport: i0, template: "<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<!-- MODULE CARD \u2014 Angular 20 \u00B7 solo @if / @for, sin ng-template -->\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<div class=\"mc-card\">\n\n <!-- \u2500\u2500 ENCABEZADO DEL M\u00D3DULO \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <div class=\"mc-header\">\n <div class=\"mc-header-left\">\n <button class=\"mc-expand-btn\" [class.mc-expand-btn--open]=\"expanded()\"\n (click)=\"toggleExpand()\" title=\"Expandir / Colapsar\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M9 18L15 12L9 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n <div class=\"mc-icon\" [innerHTML]=\"getSafeHtml(moduleIcon())\"></div>\n <span class=\"mc-name\">{{ moduleName() }}</span>\n </div>\n\n <div class=\"mc-header-right\">\n <!-- Orden -->\n <button class=\"mc-icon-btn\" title=\"Mover arriba\" (click)=\"moveUp.emit()\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 19V5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M5 12L12 5L19 12\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n <button class=\"mc-icon-btn\" title=\"Mover abajo\" (click)=\"moveDown.emit()\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 5V19\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M19 12L12 19L5 12\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n <!-- Editar -->\n <button class=\"mc-icon-btn mc-icon-btn--edit\" title=\"Editar\" (click)=\"edit.emit()\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M11 4H4C3.46957 4 2.96086 4.21071 2.58579 4.58579C2.21071 4.96086 2 5.46957 2 6V20C2 20.5304 2.21071 21.0391 2.58579 21.4142C2.96086 21.7893 3.46957 22 4 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V13\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M18.5 2.5C18.8978 2.10219 19.4374 1.87869 20 1.87869C20.5626 1.87869 21.1022 2.10219 21.5 2.5C21.8978 2.89784 22.1213 3.4374 22.1213 4C22.1213 4.56262 21.8978 5.10219 21.5 5.5L12 15L8 16L9 12L18.5 2.5Z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n <!-- Eliminar -->\n <button class=\"mc-icon-btn mc-icon-btn--delete\" title=\"Eliminar\" (click)=\"delete.emit()\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M3 6H5H21\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.96086 2.21071 9.46957 2 10 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4V6M19 6V20C19 20.5304 18.7893 21.0391 18.4142 21.4142C18.0391 21.7893 17.5304 22 17 22H7C6.46957 22 5.96086 21.7893 5.58579 21.4142C5.21071 20.7893 5 20.5304 5 20V6H19Z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M10 11V17M14 11V17\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n <!-- Toggle visible -->\n <lib-toggle-custom [checked]=\"visible()\" (toggleChange)=\"visible.set($event.checked)\" />\n </div>\n </div>\n\n <!-- \u2500\u2500 CUERPO (expandido) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n @if (expanded()) {\n <div class=\"mc-body\">\n\n <!-- \u2500\u2500 SUBM\u00D3DULOS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n @for (sub of submodules(); track sub.id) {\n <div class=\"mc-submodule\" [class.mc-submodule--expanded]=\"isSubmoduleExpanded(sub.id)\">\n\n <!-- Encabezado del subm\u00F3dulo -->\n <div class=\"mc-row mc-row--submodule\">\n <div class=\"mc-header-left\">\n <button class=\"mc-expand-btn\" [class.mc-expand-btn--open]=\"isSubmoduleExpanded(sub.id)\"\n (click)=\"toggleSubmodule(sub.id)\" title=\"Expandir / Colapsar\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M9 18L15 12L9 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n @if (sub.icon) {\n <div class=\"mc-icon mc-icon--sm\" [innerHTML]=\"getSafeHtml(sub.icon)\"></div>\n }\n <span class=\"mc-name mc-name--sub\">{{ sub.name }}</span>\n </div>\n\n <div class=\"mc-header-right\">\n <!-- Orden -->\n <button class=\"mc-icon-btn\" title=\"Mover arriba\"\n (click)=\"submoduleEvent.emit({ type: 'moveUp', submoduleId: sub.id })\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 19V5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M5 12L12 5L19 12\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n <button class=\"mc-icon-btn\" title=\"Mover abajo\"\n (click)=\"submoduleEvent.emit({ type: 'moveDown', submoduleId: sub.id })\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 5V19\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M19 12L12 19L5 12\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n <!-- Editar -->\n <button class=\"mc-icon-btn mc-icon-btn--edit\" title=\"Editar\"\n (click)=\"submoduleEvent.emit({ type: 'edit', submoduleId: sub.id })\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M11 4H4C3.46957 4 2.96086 4.21071 2.58579 4.58579C2.21071 4.96086 2 5.46957 2 6V20C2 20.5304 2.21071 21.0391 2.58579 21.4142C2.96086 21.7893 3.46957 22 4 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V13\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M18.5 2.5C18.8978 2.10219 19.4374 1.87869 20 1.87869C20.5626 1.87869 21.1022 2.10219 21.5 2.5C21.8978 2.89784 22.1213 3.4374 22.1213 4C22.1213 4.56262 21.8978 5.10219 21.5 5.5L12 15L8 16L9 12L18.5 2.5Z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n <!-- Eliminar -->\n <button class=\"mc-icon-btn mc-icon-btn--delete\" title=\"Eliminar\"\n (click)=\"submoduleEvent.emit({ type: 'delete', submoduleId: sub.id })\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M3 6H5H21\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.96086 2.21071 9.46957 2 10 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4V6M19 6V20C19 20.5304 18.7893 21.0391 18.4142 21.4142C18.0391 21.7893 17.5304 22 17 22H7C6.46957 22 5.96086 21.7893 5.58579 21.4142C5.21071 20.7893 5 20.5304 5 20V6H19Z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M10 11V17M14 11V17\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n <!-- Toggle -->\n <lib-toggle-custom [checked]=\"sub.visible\"\n (toggleChange)=\"onSubmoduleVisibleChange(sub.id, $event.checked)\" />\n </div>\n </div>\n\n <!-- Aplicativos del subm\u00F3dulo -->\n @if (isSubmoduleExpanded(sub.id)) {\n <div class=\"mc-sub-body\">\n @for (app of sub.aplicativos; track app.id) {\n <lib-module-card-applicativo\n [app]=\"app\"\n [subId]=\"sub.id\"\n [expanded]=\"isApplicativoExpanded(app.id)\"\n (expandToggle)=\"toggleApplicativo(app.id)\"\n (event)=\"applicativoEvent.emit($event)\" />\n }\n </div>\n }\n </div>\n }\n\n <!-- \u2500\u2500 APLICATIVOS DIRECTOS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n @for (app of aplicativos(); track app.id) {\n <lib-module-card-applicativo\n [app]=\"app\"\n [subId]=\"null\"\n [expanded]=\"isApplicativoExpanded(app.id)\"\n (expandToggle)=\"toggleApplicativo(app.id)\"\n (event)=\"applicativoEvent.emit($event)\" />\n }\n\n <!-- \u2500\u2500 PIE DE M\u00D3DULO \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <div class=\"mc-footer\">\n <button class=\"mc-add-btn\" (click)=\"addApplicativo.emit()\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 5V19M5 12H19\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n Agregar Aplicativo\n </button>\n <button class=\"mc-add-btn\" (click)=\"addSubmodule.emit()\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M22 19C22 19.5304 21.7893 20.0391 21.4142 20.4142C21.0391 20.7893 20.5304 21 20 21H4C3.46957 21 2.96086 20.7893 2.58579 20.4142C2.21071 20.0391 2 19.5304 2 19V5C2 4.46957 2.21071 3.96086 2.58579 3.58579C2.96086 3.21071 3.46957 3 4 3H9L11 6H20C20.5304 6 21.0391 6.21071 21.4142 6.58579C21.7893 6.96086 22 7.46957 22 8V19Z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n Agregar Subm\u00F3dulo\n </button>\n </div>\n\n </div>\n }\n\n</div>\n", styles: [".mc-card{width:100%;background-color:#f6f7eb;border:1px solid #d4d7b0;border-radius:12px;font-family:Inter,system-ui,sans-serif;color:#1a1c00;overflow:hidden}.mc-header{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;gap:12px;min-height:56px}.mc-header-left{display:flex;align-items:center;gap:10px;flex:1;min-width:0}.mc-header-right{display:flex;align-items:center;gap:6px;flex-shrink:0}.mc-expand-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:none;background:transparent;color:#6a7138;cursor:pointer;border-radius:4px;flex-shrink:0;transition:color .15s,background-color .15s,transform .2s;transform:rotate(0);padding:0}.mc-expand-btn:hover{color:#596300;background-color:#e8ebb8}.mc-expand-btn--open{transform:rotate(90deg)}.mc-icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;flex-shrink:0;color:#596300}.mc-icon svg{width:100%;height:100%}.mc-icon--sm{width:24px;height:24px}.mc-name{font-size:16px;font-weight:600;color:#1a1c00;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mc-name--sub{font-size:14px;font-weight:600}.mc-icon-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;background:transparent;border-radius:6px;cursor:pointer;color:#6a7138;padding:0;transition:color .15s,background-color .15s;flex-shrink:0}.mc-icon-btn:hover{background-color:#e8ebb8;color:#596300}.mc-icon-btn--edit:hover{color:#596300;background-color:#dde899}.mc-icon-btn--delete:hover{color:#cf0707;background-color:#fde8e8}.mc-body{display:flex;flex-direction:column;padding:16px;gap:8px;background-color:#fff;border-top:1px solid #d4d7b0;border-radius:0 0 12px 12px}.mc-row{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;gap:12px;min-height:48px}.mc-row--submodule{background-color:transparent!important;border-top:none!important}.mc-submodule{display:flex;flex-direction:column;background-color:#fff;border:1px solid #d4d7b0;border-radius:8px;overflow:hidden;transition:background-color .2s}.mc-submodule--expanded{background-color:#e9ead3}.mc-sub-body{display:flex;flex-direction:column;padding-left:32px;padding-bottom:8px;padding-right:16px;background-color:transparent;border-top:none;gap:8px}.mc-footer{display:flex;align-items:center;gap:20px;padding:8px 16px;border-top:none;background-color:transparent}.mc-add-btn{display:inline-flex;align-items:center;gap:6px;background:transparent;border:none;font-size:13px;font-weight:500;color:#596300;cursor:pointer;padding:4px 6px;border-radius:6px;transition:background-color .15s,color .15s}.mc-add-btn:hover{background-color:#e8ebb8;color:#3d4500}.mc-add-btn svg{flex-shrink:0;color:currentColor}\n"], dependencies: [{ kind: "component", type: ToggleCustom, selector: "lib-toggle-custom", inputs: ["label", "key", "disabled", "checked"], outputs: ["checkedChange", "toggleChange"] }, { kind: "component", type: ModuleCardApplicativo, selector: "lib-module-card-applicativo", inputs: ["app", "subId", "expanded"], outputs: ["expandToggle", "event"] }] });
|
|
6892
|
+
}
|
|
6893
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ModuleCard, decorators: [{
|
|
6894
|
+
type: Component,
|
|
6895
|
+
args: [{ selector: 'lib-module-card', imports: [ToggleCustom, ModuleCardApplicativo], template: "<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<!-- MODULE CARD \u2014 Angular 20 \u00B7 solo @if / @for, sin ng-template -->\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<div class=\"mc-card\">\n\n <!-- \u2500\u2500 ENCABEZADO DEL M\u00D3DULO \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <div class=\"mc-header\">\n <div class=\"mc-header-left\">\n <button class=\"mc-expand-btn\" [class.mc-expand-btn--open]=\"expanded()\"\n (click)=\"toggleExpand()\" title=\"Expandir / Colapsar\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M9 18L15 12L9 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n <div class=\"mc-icon\" [innerHTML]=\"getSafeHtml(moduleIcon())\"></div>\n <span class=\"mc-name\">{{ moduleName() }}</span>\n </div>\n\n <div class=\"mc-header-right\">\n <!-- Orden -->\n <button class=\"mc-icon-btn\" title=\"Mover arriba\" (click)=\"moveUp.emit()\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 19V5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M5 12L12 5L19 12\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n <button class=\"mc-icon-btn\" title=\"Mover abajo\" (click)=\"moveDown.emit()\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 5V19\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M19 12L12 19L5 12\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n <!-- Editar -->\n <button class=\"mc-icon-btn mc-icon-btn--edit\" title=\"Editar\" (click)=\"edit.emit()\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M11 4H4C3.46957 4 2.96086 4.21071 2.58579 4.58579C2.21071 4.96086 2 5.46957 2 6V20C2 20.5304 2.21071 21.0391 2.58579 21.4142C2.96086 21.7893 3.46957 22 4 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V13\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M18.5 2.5C18.8978 2.10219 19.4374 1.87869 20 1.87869C20.5626 1.87869 21.1022 2.10219 21.5 2.5C21.8978 2.89784 22.1213 3.4374 22.1213 4C22.1213 4.56262 21.8978 5.10219 21.5 5.5L12 15L8 16L9 12L18.5 2.5Z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n <!-- Eliminar -->\n <button class=\"mc-icon-btn mc-icon-btn--delete\" title=\"Eliminar\" (click)=\"delete.emit()\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M3 6H5H21\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.96086 2.21071 9.46957 2 10 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4V6M19 6V20C19 20.5304 18.7893 21.0391 18.4142 21.4142C18.0391 21.7893 17.5304 22 17 22H7C6.46957 22 5.96086 21.7893 5.58579 21.4142C5.21071 20.7893 5 20.5304 5 20V6H19Z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M10 11V17M14 11V17\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n <!-- Toggle visible -->\n <lib-toggle-custom [checked]=\"visible()\" (toggleChange)=\"visible.set($event.checked)\" />\n </div>\n </div>\n\n <!-- \u2500\u2500 CUERPO (expandido) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n @if (expanded()) {\n <div class=\"mc-body\">\n\n <!-- \u2500\u2500 SUBM\u00D3DULOS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n @for (sub of submodules(); track sub.id) {\n <div class=\"mc-submodule\" [class.mc-submodule--expanded]=\"isSubmoduleExpanded(sub.id)\">\n\n <!-- Encabezado del subm\u00F3dulo -->\n <div class=\"mc-row mc-row--submodule\">\n <div class=\"mc-header-left\">\n <button class=\"mc-expand-btn\" [class.mc-expand-btn--open]=\"isSubmoduleExpanded(sub.id)\"\n (click)=\"toggleSubmodule(sub.id)\" title=\"Expandir / Colapsar\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M9 18L15 12L9 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n @if (sub.icon) {\n <div class=\"mc-icon mc-icon--sm\" [innerHTML]=\"getSafeHtml(sub.icon)\"></div>\n }\n <span class=\"mc-name mc-name--sub\">{{ sub.name }}</span>\n </div>\n\n <div class=\"mc-header-right\">\n <!-- Orden -->\n <button class=\"mc-icon-btn\" title=\"Mover arriba\"\n (click)=\"submoduleEvent.emit({ type: 'moveUp', submoduleId: sub.id })\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 19V5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M5 12L12 5L19 12\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n <button class=\"mc-icon-btn\" title=\"Mover abajo\"\n (click)=\"submoduleEvent.emit({ type: 'moveDown', submoduleId: sub.id })\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 5V19\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M19 12L12 19L5 12\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n <!-- Editar -->\n <button class=\"mc-icon-btn mc-icon-btn--edit\" title=\"Editar\"\n (click)=\"submoduleEvent.emit({ type: 'edit', submoduleId: sub.id })\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M11 4H4C3.46957 4 2.96086 4.21071 2.58579 4.58579C2.21071 4.96086 2 5.46957 2 6V20C2 20.5304 2.21071 21.0391 2.58579 21.4142C2.96086 21.7893 3.46957 22 4 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V13\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M18.5 2.5C18.8978 2.10219 19.4374 1.87869 20 1.87869C20.5626 1.87869 21.1022 2.10219 21.5 2.5C21.8978 2.89784 22.1213 3.4374 22.1213 4C22.1213 4.56262 21.8978 5.10219 21.5 5.5L12 15L8 16L9 12L18.5 2.5Z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n <!-- Eliminar -->\n <button class=\"mc-icon-btn mc-icon-btn--delete\" title=\"Eliminar\"\n (click)=\"submoduleEvent.emit({ type: 'delete', submoduleId: sub.id })\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M3 6H5H21\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.96086 2.21071 9.46957 2 10 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4V6M19 6V20C19 20.5304 18.7893 21.0391 18.4142 21.4142C18.0391 21.7893 17.5304 22 17 22H7C6.46957 22 5.96086 21.7893 5.58579 21.4142C5.21071 20.7893 5 20.5304 5 20V6H19Z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M10 11V17M14 11V17\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n <!-- Toggle -->\n <lib-toggle-custom [checked]=\"sub.visible\"\n (toggleChange)=\"onSubmoduleVisibleChange(sub.id, $event.checked)\" />\n </div>\n </div>\n\n <!-- Aplicativos del subm\u00F3dulo -->\n @if (isSubmoduleExpanded(sub.id)) {\n <div class=\"mc-sub-body\">\n @for (app of sub.aplicativos; track app.id) {\n <lib-module-card-applicativo\n [app]=\"app\"\n [subId]=\"sub.id\"\n [expanded]=\"isApplicativoExpanded(app.id)\"\n (expandToggle)=\"toggleApplicativo(app.id)\"\n (event)=\"applicativoEvent.emit($event)\" />\n }\n </div>\n }\n </div>\n }\n\n <!-- \u2500\u2500 APLICATIVOS DIRECTOS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n @for (app of aplicativos(); track app.id) {\n <lib-module-card-applicativo\n [app]=\"app\"\n [subId]=\"null\"\n [expanded]=\"isApplicativoExpanded(app.id)\"\n (expandToggle)=\"toggleApplicativo(app.id)\"\n (event)=\"applicativoEvent.emit($event)\" />\n }\n\n <!-- \u2500\u2500 PIE DE M\u00D3DULO \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <div class=\"mc-footer\">\n <button class=\"mc-add-btn\" (click)=\"addApplicativo.emit()\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 5V19M5 12H19\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n Agregar Aplicativo\n </button>\n <button class=\"mc-add-btn\" (click)=\"addSubmodule.emit()\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M22 19C22 19.5304 21.7893 20.0391 21.4142 20.4142C21.0391 20.7893 20.5304 21 20 21H4C3.46957 21 2.96086 20.7893 2.58579 20.4142C2.21071 20.0391 2 19.5304 2 19V5C2 4.46957 2.21071 3.96086 2.58579 3.58579C2.96086 3.21071 3.46957 3 4 3H9L11 6H20C20.5304 6 21.0391 6.21071 21.4142 6.58579C21.7893 6.96086 22 7.46957 22 8V19Z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n Agregar Subm\u00F3dulo\n </button>\n </div>\n\n </div>\n }\n\n</div>\n", styles: [".mc-card{width:100%;background-color:#f6f7eb;border:1px solid #d4d7b0;border-radius:12px;font-family:Inter,system-ui,sans-serif;color:#1a1c00;overflow:hidden}.mc-header{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;gap:12px;min-height:56px}.mc-header-left{display:flex;align-items:center;gap:10px;flex:1;min-width:0}.mc-header-right{display:flex;align-items:center;gap:6px;flex-shrink:0}.mc-expand-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:none;background:transparent;color:#6a7138;cursor:pointer;border-radius:4px;flex-shrink:0;transition:color .15s,background-color .15s,transform .2s;transform:rotate(0);padding:0}.mc-expand-btn:hover{color:#596300;background-color:#e8ebb8}.mc-expand-btn--open{transform:rotate(90deg)}.mc-icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;flex-shrink:0;color:#596300}.mc-icon svg{width:100%;height:100%}.mc-icon--sm{width:24px;height:24px}.mc-name{font-size:16px;font-weight:600;color:#1a1c00;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mc-name--sub{font-size:14px;font-weight:600}.mc-icon-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;background:transparent;border-radius:6px;cursor:pointer;color:#6a7138;padding:0;transition:color .15s,background-color .15s;flex-shrink:0}.mc-icon-btn:hover{background-color:#e8ebb8;color:#596300}.mc-icon-btn--edit:hover{color:#596300;background-color:#dde899}.mc-icon-btn--delete:hover{color:#cf0707;background-color:#fde8e8}.mc-body{display:flex;flex-direction:column;padding:16px;gap:8px;background-color:#fff;border-top:1px solid #d4d7b0;border-radius:0 0 12px 12px}.mc-row{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;gap:12px;min-height:48px}.mc-row--submodule{background-color:transparent!important;border-top:none!important}.mc-submodule{display:flex;flex-direction:column;background-color:#fff;border:1px solid #d4d7b0;border-radius:8px;overflow:hidden;transition:background-color .2s}.mc-submodule--expanded{background-color:#e9ead3}.mc-sub-body{display:flex;flex-direction:column;padding-left:32px;padding-bottom:8px;padding-right:16px;background-color:transparent;border-top:none;gap:8px}.mc-footer{display:flex;align-items:center;gap:20px;padding:8px 16px;border-top:none;background-color:transparent}.mc-add-btn{display:inline-flex;align-items:center;gap:6px;background:transparent;border:none;font-size:13px;font-weight:500;color:#596300;cursor:pointer;padding:4px 6px;border-radius:6px;transition:background-color .15s,color .15s}.mc-add-btn:hover{background-color:#e8ebb8;color:#3d4500}.mc-add-btn svg{flex-shrink:0;color:currentColor}\n"] }]
|
|
6896
|
+
}], propDecorators: { moduleName: [{ type: i0.Input, args: [{ isSignal: true, alias: "moduleName", required: true }] }], moduleIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "moduleIcon", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }, { type: i0.Output, args: ["visibleChange"] }], submodules: [{ type: i0.Input, args: [{ isSignal: true, alias: "submodules", required: false }] }], aplicativos: [{ type: i0.Input, args: [{ isSignal: true, alias: "aplicativos", required: false }] }], moveUp: [{ type: i0.Output, args: ["moveUp"] }], moveDown: [{ type: i0.Output, args: ["moveDown"] }], edit: [{ type: i0.Output, args: ["edit"] }], delete: [{ type: i0.Output, args: ["delete"] }], addApplicativo: [{ type: i0.Output, args: ["addApplicativo"] }], addSubmodule: [{ type: i0.Output, args: ["addSubmodule"] }], submoduleEvent: [{ type: i0.Output, args: ["submoduleEvent"] }], applicativoEvent: [{ type: i0.Output, args: ["applicativoEvent"] }] } });
|
|
6897
|
+
|
|
6723
6898
|
// src/app/components/public-api.ts
|
|
6724
6899
|
// Exportar los componentes
|
|
6725
6900
|
|
|
@@ -6727,5 +6902,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
6727
6902
|
* Generated bundle index. Do not edit.
|
|
6728
6903
|
*/
|
|
6729
6904
|
|
|
6730
|
-
export { BarChart, BaseChart, Button, ButtonCards, CARD_BG, CardContent, CardHistory, Colors, DateTimeFilter, DateTimePicker, DevicesCarousel, DialogAlertComponent, DialogConfirmation, DocumentItem, DocumentUpload, DonutChart, DynamicFormFields, FeatureCard, Footer, GeoAPIMaps, Heatmap, InfoGroup, Input, InputNumberFilter, InputSelectFilter, InputTextFilter, InputTimeFilter, KpiCard, LineChart, LoadImage, Loader, MapGeo, ModalForm, NotFoundModal, NotFoundSection, NotificationModal, OptionCard, PaginationComponent, PdfViewer, PdfViewerService, ProcessingOverlay, ProgressBar, ProgressFormService, QuickAccessCards, SelectCustomSearch, SideCard, SideCardDetail, Signature, TOAST_EVENTS, Table, TableChart, Tabs, TitleFilters, Toast, ToastHelper, ToastService, ToggleCustom, UI_CHART_TOKENS, WizardForm };
|
|
6905
|
+
export { BarChart, BaseChart, Button, ButtonCards, CARD_BG, CardContent, CardHistory, Colors, DateTimeFilter, DateTimePicker, DevicesCarousel, DialogAlertComponent, DialogConfirmation, DocumentItem, DocumentUpload, DonutChart, DynamicFormFields, FeatureCard, Footer, GeoAPIMaps, Heatmap, InfoGroup, Input, InputNumberFilter, InputSelectFilter, InputTextFilter, InputTimeFilter, KpiCard, LineChart, LoadImage, Loader, MapGeo, ModalForm, ModuleCard, NotFoundModal, NotFoundSection, NotificationModal, OptionCard, PaginationComponent, PdfViewer, PdfViewerService, ProcessingOverlay, ProgressBar, ProgressFormService, QuickAccessCards, RolCard, SelectCustomSearch, SideCard, SideCardDetail, Signature, TOAST_EVENTS, Table, TableChart, Tabs, TitleFilters, Toast, ToastHelper, ToastService, ToggleCustom, UI_CHART_TOKENS, WizardForm };
|
|
6731
6906
|
//# sourceMappingURL=sapenlinea-components.mjs.map
|