orbiq-neural-ui-kit 1.0.32 → 1.0.33
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.
|
@@ -12207,8 +12207,8 @@ class NeuralDataTableComponent {
|
|
|
12207
12207
|
...(ngDevMode ? [{ debugName: "subtitle" }] : /* istanbul ignore next */ []));
|
|
12208
12208
|
count = input(/* @ts-ignore */
|
|
12209
12209
|
...(ngDevMode ? [undefined, { debugName: "count" }] : /* istanbul ignore next */ []));
|
|
12210
|
-
|
|
12211
|
-
...(ngDevMode ? [{ debugName: "
|
|
12210
|
+
hasInfo = input(false, /* @ts-ignore */
|
|
12211
|
+
...(ngDevMode ? [{ debugName: "hasInfo" }] : /* istanbul ignore next */ []));
|
|
12212
12212
|
searchPlaceholder = input('Search', /* @ts-ignore */
|
|
12213
12213
|
...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
|
|
12214
12214
|
allColumns = input([], /* @ts-ignore */
|
|
@@ -12228,6 +12228,11 @@ class NeuralDataTableComponent {
|
|
|
12228
12228
|
onSearch = new EventEmitter();
|
|
12229
12229
|
onPageChange = new EventEmitter();
|
|
12230
12230
|
sortChange = new EventEmitter();
|
|
12231
|
+
// New Emitters for Advanced Actions
|
|
12232
|
+
onInfoClick = new EventEmitter();
|
|
12233
|
+
onRefreshClick = new EventEmitter();
|
|
12234
|
+
onViewChange = new EventEmitter();
|
|
12235
|
+
onFilterClick = new EventEmitter();
|
|
12231
12236
|
cellTemplate;
|
|
12232
12237
|
isPreferencesOpen = signal(false, /* @ts-ignore */
|
|
12233
12238
|
...(ngDevMode ? [{ debugName: "isPreferencesOpen" }] : /* istanbul ignore next */ []));
|
|
@@ -12259,37 +12264,55 @@ class NeuralDataTableComponent {
|
|
|
12259
12264
|
this.sortChange.emit(key);
|
|
12260
12265
|
}
|
|
12261
12266
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralDataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
12262
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: NeuralDataTableComponent, isStandalone: true, selector: "neural-data-table", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null },
|
|
12267
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: NeuralDataTableComponent, isStandalone: true, selector: "neural-data-table", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, hasInfo: { classPropertyName: "hasInfo", publicName: "hasInfo", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, allColumns: { classPropertyName: "allColumns", publicName: "allColumns", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, rowKey: { classPropertyName: "rowKey", publicName: "rowKey", isSignal: true, isRequired: true, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, totalPages: { classPropertyName: "totalPages", publicName: "totalPages", isSignal: true, isRequired: false, transformFunction: null }, emptyStateTitle: { classPropertyName: "emptyStateTitle", publicName: "emptyStateTitle", isSignal: true, isRequired: false, transformFunction: null }, emptyStateDesc: { classPropertyName: "emptyStateDesc", publicName: "emptyStateDesc", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSearch: "onSearch", onPageChange: "onPageChange", sortChange: "sortChange", onInfoClick: "onInfoClick", onRefreshClick: "onRefreshClick", onViewChange: "onViewChange", onFilterClick: "onFilterClick" }, queries: [{ propertyName: "cellTemplate", first: true, predicate: ["cellTemplate"], descendants: true }], ngImport: i0, template: `
|
|
12263
12268
|
<div class="flex flex-col w-full h-full bg-white rounded-md border border-outline-gray-2 shadow-sm overflow-hidden">
|
|
12264
12269
|
|
|
12265
12270
|
<!-- Top Header Area -->
|
|
12266
|
-
<div class="flex items-
|
|
12267
|
-
|
|
12268
|
-
|
|
12269
|
-
|
|
12270
|
-
|
|
12271
|
-
|
|
12272
|
-
|
|
12273
|
-
|
|
12274
|
-
|
|
12275
|
-
|
|
12276
|
-
|
|
12277
|
-
@if (subtitle()) {
|
|
12278
|
-
<p class="text-[13px] text-ink-gray-6">{{ subtitle() }}</p>
|
|
12271
|
+
<div class="flex items-center justify-between px-4 py-3 border-b border-outline-gray-2 bg-white">
|
|
12272
|
+
<!-- Left: Title & Info -->
|
|
12273
|
+
<div class="flex items-center gap-3">
|
|
12274
|
+
<h2 class="text-[16px] font-semibold text-ink-gray-9">{{ title() }}</h2>
|
|
12275
|
+
@if (count() !== undefined) {
|
|
12276
|
+
<span class="text-[13px] font-medium text-ink-gray-5 px-1.5 py-0.5 rounded-full bg-surface-gray-2">{{ count() }}</span>
|
|
12277
|
+
}
|
|
12278
|
+
@if (hasInfo()) {
|
|
12279
|
+
<button class="text-[13px] font-medium text-blue-600 hover:underline cursor-pointer flex items-center gap-1" (click)="onInfoClick.emit()">
|
|
12280
|
+
Información
|
|
12281
|
+
</button>
|
|
12279
12282
|
}
|
|
12280
12283
|
</div>
|
|
12281
12284
|
|
|
12285
|
+
<!-- Right: Actions Toolbar -->
|
|
12282
12286
|
<div class="flex items-center gap-2">
|
|
12287
|
+
|
|
12288
|
+
<!-- Built-in Actions Group -->
|
|
12289
|
+
<div class="flex items-center p-0.5 bg-surface-gray-1 border border-outline-gray-2 rounded-md h-8">
|
|
12290
|
+
<neural-button variant="ghost" size="sm" icon="lucide-list" [iconLeft]="true" class="!px-2 !text-[13px] !text-ink-gray-7 hover:!text-ink-gray-9" (click)="onViewChange.emit('report')">Vista</neural-button>
|
|
12291
|
+
<div class="w-px h-4 bg-outline-gray-3 mx-0.5"></div>
|
|
12292
|
+
<neural-button variant="ghost" size="sm" icon="lucide-filter" [iconLeft]="true" class="!px-2 !text-[13px] !text-ink-gray-7 hover:!text-ink-gray-9" (click)="onFilterClick.emit()">Filtrar</neural-button>
|
|
12293
|
+
<div class="w-px h-4 bg-outline-gray-3 mx-0.5"></div>
|
|
12294
|
+
<neural-button variant="ghost" size="sm" icon="lucide-arrow-up-down" [iconLeft]="true" class="!px-2 !text-[13px] !text-ink-gray-7 hover:!text-ink-gray-9" title="Orden">Orden</neural-button>
|
|
12295
|
+
</div>
|
|
12296
|
+
|
|
12297
|
+
<div class="flex items-center gap-1">
|
|
12298
|
+
<button class="flex items-center justify-center size-8 rounded-md hover:bg-surface-gray-2 text-ink-gray-6 hover:text-ink-gray-9 transition-colors border border-transparent hover:border-outline-gray-2" title="Actualizar" (click)="onRefreshClick.emit()">
|
|
12299
|
+
<i class="lucide-refresh-cw size-4"></i>
|
|
12300
|
+
</button>
|
|
12301
|
+
<button class="flex items-center justify-center size-8 rounded-md hover:bg-surface-gray-2 text-ink-gray-6 hover:text-ink-gray-9 transition-colors border border-transparent hover:border-outline-gray-2" title="Más acciones">
|
|
12302
|
+
<i class="lucide-more-horizontal size-4"></i>
|
|
12303
|
+
</button>
|
|
12304
|
+
</div>
|
|
12305
|
+
|
|
12306
|
+
<div class="w-px h-6 bg-outline-gray-2 mx-1"></div>
|
|
12307
|
+
|
|
12283
12308
|
<!-- External Actions (Refresh, Create, etc) -->
|
|
12284
12309
|
<ng-content select="[header-actions]"></ng-content>
|
|
12285
12310
|
</div>
|
|
12286
12311
|
</div>
|
|
12287
12312
|
|
|
12288
|
-
<!--
|
|
12289
|
-
<div class="
|
|
12290
|
-
|
|
12291
|
-
<!-- Search -->
|
|
12292
|
-
<div class="w-72">
|
|
12313
|
+
<!-- Search Area -->
|
|
12314
|
+
<div class="px-4 py-2 border-b border-outline-gray-1 bg-surface-base">
|
|
12315
|
+
<div class="w-full max-w-sm">
|
|
12293
12316
|
<neural-text-input
|
|
12294
12317
|
[placeholder]="searchPlaceholder()"
|
|
12295
12318
|
icon="lucide-search"
|
|
@@ -12297,69 +12320,6 @@ class NeuralDataTableComponent {
|
|
|
12297
12320
|
(valueModelChange)="onSearch.emit($event)"
|
|
12298
12321
|
></neural-text-input>
|
|
12299
12322
|
</div>
|
|
12300
|
-
|
|
12301
|
-
<!-- Pagination & Settings -->
|
|
12302
|
-
<div class="flex items-center gap-3">
|
|
12303
|
-
<div class="flex items-center gap-1 text-sm text-ink-gray-7 font-medium">
|
|
12304
|
-
<button class="p-1 hover:bg-surface-gray-3 rounded text-ink-gray-4 hover:text-ink-gray-8 disabled:opacity-50" [disabled]="page() === 1" (click)="onPageChange.emit(page() - 1)">
|
|
12305
|
-
<i class="lucide-chevron-left size-4"></i>
|
|
12306
|
-
</button>
|
|
12307
|
-
<span class="px-2">{{ page() }}</span>
|
|
12308
|
-
<button class="p-1 hover:bg-surface-gray-3 rounded text-ink-gray-4 hover:text-ink-gray-8 disabled:opacity-50" [disabled]="page() >= totalPages()" (click)="onPageChange.emit(page() + 1)">
|
|
12309
|
-
<i class="lucide-chevron-right size-4"></i>
|
|
12310
|
-
</button>
|
|
12311
|
-
</div>
|
|
12312
|
-
|
|
12313
|
-
<div class="w-px h-4 bg-outline-gray-3 mx-1"></div>
|
|
12314
|
-
|
|
12315
|
-
<!-- Preferences Dialog Trigger -->
|
|
12316
|
-
<button class="p-1.5 hover:bg-surface-gray-3 rounded text-ink-gray-5 hover:text-ink-gray-8 transition-colors" (click)="isPreferencesOpen.set(true)">
|
|
12317
|
-
<i class="lucide-settings size-4"></i>
|
|
12318
|
-
</button>
|
|
12319
|
-
|
|
12320
|
-
<!-- Preferences Dialog Content -->
|
|
12321
|
-
<neural-dialog [openModel]="isPreferencesOpen()" (openModelChange)="isPreferencesOpen.set($event)" [hasTitleSlot]="true" [hasActionsSlot]="true" size="md">
|
|
12322
|
-
<div title>
|
|
12323
|
-
<h3 class="text-lg font-semibold text-ink-gray-9">Preferencias</h3>
|
|
12324
|
-
</div>
|
|
12325
|
-
|
|
12326
|
-
<div class="flex flex-col gap-6 py-2">
|
|
12327
|
-
<div class="flex items-start gap-4">
|
|
12328
|
-
<neural-checkbox [checkedModel]="wrapLines()" (checkedModelChange)="wrapLines.set($event)"></neural-checkbox>
|
|
12329
|
-
<div class="flex flex-col">
|
|
12330
|
-
<span class="text-sm font-medium text-ink-gray-9">Ajustar líneas</span>
|
|
12331
|
-
<span class="text-xs text-ink-gray-5">Seleccione la casilla de verificación para ajustar todas las líneas.</span>
|
|
12332
|
-
</div>
|
|
12333
|
-
</div>
|
|
12334
|
-
|
|
12335
|
-
<div class="border-t border-outline-gray-2 pt-4">
|
|
12336
|
-
<div class="flex flex-col mb-3">
|
|
12337
|
-
<span class="text-sm font-semibold text-ink-gray-9">Seleccionar columnas visibles</span>
|
|
12338
|
-
<span class="text-xs text-ink-gray-5">Personalice la visibilidad y el orden de las columnas.</span>
|
|
12339
|
-
</div>
|
|
12340
|
-
|
|
12341
|
-
<div class="flex flex-col gap-0 border border-outline-gray-2 rounded-md bg-white overflow-hidden">
|
|
12342
|
-
@for (col of allColumns(); track col.key) {
|
|
12343
|
-
<div class="flex items-center justify-between p-3 border-b border-outline-gray-1 last:border-0 hover:bg-surface-gray-1">
|
|
12344
|
-
<div class="flex items-center gap-2">
|
|
12345
|
-
<i class="lucide-grip-vertical size-4 text-ink-gray-4 cursor-grab"></i>
|
|
12346
|
-
<span class="text-sm text-ink-gray-8 font-medium">{{ col.label }}</span>
|
|
12347
|
-
</div>
|
|
12348
|
-
<neural-switch [valueModel]="isColumnVisible(col.key)" (valueModelChange)="toggleColumnVisibility(col.key, $event)"></neural-switch>
|
|
12349
|
-
</div>
|
|
12350
|
-
}
|
|
12351
|
-
</div>
|
|
12352
|
-
</div>
|
|
12353
|
-
</div>
|
|
12354
|
-
|
|
12355
|
-
<div actions>
|
|
12356
|
-
<div class="flex items-center justify-end gap-2 w-full">
|
|
12357
|
-
<neural-button variant="ghost" (click)="isPreferencesOpen.set(false)">Cancelar</neural-button>
|
|
12358
|
-
<neural-button variant="solid" theme="blue" (click)="applyPreferences()">Continuar</neural-button>
|
|
12359
|
-
</div>
|
|
12360
|
-
</div>
|
|
12361
|
-
</neural-dialog>
|
|
12362
|
-
</div>
|
|
12363
12323
|
</div>
|
|
12364
12324
|
|
|
12365
12325
|
<!-- Table Content -->
|
|
@@ -12413,6 +12373,85 @@ class NeuralDataTableComponent {
|
|
|
12413
12373
|
</tbody>
|
|
12414
12374
|
</table>
|
|
12415
12375
|
</div>
|
|
12376
|
+
|
|
12377
|
+
<!-- Footer / Pagination Area -->
|
|
12378
|
+
<div class="flex items-center justify-between px-4 py-3 border-t border-outline-gray-2 bg-white">
|
|
12379
|
+
<!-- Left Footer -->
|
|
12380
|
+
<div class="text-[13px] text-ink-gray-5">
|
|
12381
|
+
<!-- Espacio para contadores de selección -->
|
|
12382
|
+
</div>
|
|
12383
|
+
|
|
12384
|
+
<!-- Right Footer: Pagination & Settings -->
|
|
12385
|
+
<div class="flex items-center gap-4">
|
|
12386
|
+
<div class="flex items-center gap-1 text-sm text-ink-gray-7 font-medium">
|
|
12387
|
+
<button class="p-1 hover:bg-surface-gray-2 rounded text-ink-gray-5 hover:text-ink-gray-8 disabled:opacity-30 disabled:hover:bg-transparent" [disabled]="page() === 1" (click)="onPageChange.emit(1)" title="Primera página">
|
|
12388
|
+
<i class="lucide-chevrons-left size-4"></i>
|
|
12389
|
+
</button>
|
|
12390
|
+
<button class="p-1 hover:bg-surface-gray-2 rounded text-ink-gray-5 hover:text-ink-gray-8 disabled:opacity-30 disabled:hover:bg-transparent" [disabled]="page() === 1" (click)="onPageChange.emit(page() - 1)" title="Anterior">
|
|
12391
|
+
<i class="lucide-chevron-left size-4"></i>
|
|
12392
|
+
</button>
|
|
12393
|
+
|
|
12394
|
+
<span class="px-2 text-[13px] min-w-[70px] text-center">{{ page() }} <span class="text-ink-gray-4 mx-1">/</span> {{ totalPages() }}</span>
|
|
12395
|
+
|
|
12396
|
+
<button class="p-1 hover:bg-surface-gray-2 rounded text-ink-gray-5 hover:text-ink-gray-8 disabled:opacity-30 disabled:hover:bg-transparent" [disabled]="page() >= totalPages()" (click)="onPageChange.emit(page() + 1)" title="Siguiente">
|
|
12397
|
+
<i class="lucide-chevron-right size-4"></i>
|
|
12398
|
+
</button>
|
|
12399
|
+
<button class="p-1 hover:bg-surface-gray-2 rounded text-ink-gray-5 hover:text-ink-gray-8 disabled:opacity-30 disabled:hover:bg-transparent" [disabled]="page() >= totalPages()" (click)="onPageChange.emit(totalPages())" title="Última página">
|
|
12400
|
+
<i class="lucide-chevrons-right size-4"></i>
|
|
12401
|
+
</button>
|
|
12402
|
+
</div>
|
|
12403
|
+
|
|
12404
|
+
<div class="w-px h-5 bg-outline-gray-2"></div>
|
|
12405
|
+
|
|
12406
|
+
<!-- Preferences / Columns Dialog Trigger -->
|
|
12407
|
+
<button class="p-1.5 rounded-md border border-outline-gray-2 bg-white hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors" (click)="isPreferencesOpen.set(true)" title="Configurar columnas">
|
|
12408
|
+
<i class="lucide-settings size-4"></i>
|
|
12409
|
+
</button>
|
|
12410
|
+
</div>
|
|
12411
|
+
</div>
|
|
12412
|
+
|
|
12413
|
+
<!-- Dialog moved outside of the main flex flows -->
|
|
12414
|
+
<neural-dialog [openModel]="isPreferencesOpen()" (openModelChange)="isPreferencesOpen.set($event)" [hasTitleSlot]="true" [hasActionsSlot]="true" size="md">
|
|
12415
|
+
<div title>
|
|
12416
|
+
<h3 class="text-lg font-semibold text-ink-gray-9">Preferencias</h3>
|
|
12417
|
+
</div>
|
|
12418
|
+
|
|
12419
|
+
<div class="flex flex-col gap-6 py-2">
|
|
12420
|
+
<div class="flex items-start gap-4">
|
|
12421
|
+
<neural-checkbox [checkedModel]="wrapLines()" (checkedModelChange)="wrapLines.set($event)"></neural-checkbox>
|
|
12422
|
+
<div class="flex flex-col">
|
|
12423
|
+
<span class="text-sm font-medium text-ink-gray-9">Ajustar líneas</span>
|
|
12424
|
+
<span class="text-xs text-ink-gray-5">Seleccione la casilla de verificación para ajustar todas las líneas.</span>
|
|
12425
|
+
</div>
|
|
12426
|
+
</div>
|
|
12427
|
+
|
|
12428
|
+
<div class="border-t border-outline-gray-2 pt-4">
|
|
12429
|
+
<div class="flex flex-col mb-3">
|
|
12430
|
+
<span class="text-sm font-semibold text-ink-gray-9">Seleccionar columnas visibles</span>
|
|
12431
|
+
<span class="text-xs text-ink-gray-5">Personalice la visibilidad y el orden de las columnas.</span>
|
|
12432
|
+
</div>
|
|
12433
|
+
|
|
12434
|
+
<div class="flex flex-col gap-0 border border-outline-gray-2 rounded-md bg-white overflow-hidden">
|
|
12435
|
+
@for (col of allColumns(); track col.key) {
|
|
12436
|
+
<div class="flex items-center justify-between p-3 border-b border-outline-gray-1 last:border-0 hover:bg-surface-gray-1">
|
|
12437
|
+
<div class="flex items-center gap-2">
|
|
12438
|
+
<i class="lucide-grip-vertical size-4 text-ink-gray-4 cursor-grab"></i>
|
|
12439
|
+
<span class="text-sm text-ink-gray-8 font-medium">{{ col.label }}</span>
|
|
12440
|
+
</div>
|
|
12441
|
+
<neural-switch [valueModel]="isColumnVisible(col.key)" (valueModelChange)="toggleColumnVisibility(col.key, $event)"></neural-switch>
|
|
12442
|
+
</div>
|
|
12443
|
+
}
|
|
12444
|
+
</div>
|
|
12445
|
+
</div>
|
|
12446
|
+
</div>
|
|
12447
|
+
|
|
12448
|
+
<div actions>
|
|
12449
|
+
<div class="flex items-center justify-end gap-2 w-full">
|
|
12450
|
+
<neural-button variant="ghost" (click)="isPreferencesOpen.set(false)">Cancelar</neural-button>
|
|
12451
|
+
<neural-button variant="solid" theme="blue" (click)="applyPreferences()">Continuar</neural-button>
|
|
12452
|
+
</div>
|
|
12453
|
+
</div>
|
|
12454
|
+
</neural-dialog>
|
|
12416
12455
|
</div>
|
|
12417
12456
|
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NeuralButtonComponent, selector: "neural-button", inputs: ["variant", "theme", "size", "type", "disabled", "loading", "icon", "iconLeft", "iconRight", "iconOnly"], outputs: ["clicked"] }, { kind: "component", type: NeuralTextInputComponent, selector: "neural-text-input", inputs: ["valueModel", "type", "size", "variant", "placeholder", "disabled", "readonly", "required", "label", "description", "error", "id", "debounce", "wrapperClass", "wrapperStyle", "hasLabelSlot", "hasDescriptionSlot", "hasPrefixSlot", "hasSuffixSlot"], outputs: ["valueModelChange", "debounceChange"] }, { kind: "component", type: NeuralDialogComponent, selector: "neural-dialog", inputs: ["openModel", "title", "message", "icon", "size", "position", "paddingTop", "actions", "dismissible", "showCloseButton", "bare", "hasTitleSlot", "hasActionsSlot", "hasDefaultSlot"], outputs: ["openModelChange"] }, { kind: "component", type: NeuralSwitchComponent, selector: "neural-switch", inputs: ["valueModel", "size", "padded", "disabled", "required", "controlPosition", "icon", "label", "description", "error", "id", "hasLabelSlot", "hasDescriptionSlot"], outputs: ["valueModelChange"] }, { kind: "component", type: NeuralCheckboxComponent, selector: "neural-checkbox", inputs: ["checkedModel", "size", "padded", "indeterminate", "disabled", "required", "label", "description", "error", "id", "hasLabelSlot", "hasDescriptionSlot"], outputs: ["checkedModelChange"] }] });
|
|
12418
12457
|
}
|
|
@@ -12433,33 +12472,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
|
|
|
12433
12472
|
<div class="flex flex-col w-full h-full bg-white rounded-md border border-outline-gray-2 shadow-sm overflow-hidden">
|
|
12434
12473
|
|
|
12435
12474
|
<!-- Top Header Area -->
|
|
12436
|
-
<div class="flex items-
|
|
12437
|
-
|
|
12438
|
-
|
|
12439
|
-
|
|
12440
|
-
|
|
12441
|
-
|
|
12442
|
-
|
|
12443
|
-
|
|
12444
|
-
|
|
12445
|
-
|
|
12446
|
-
|
|
12447
|
-
@if (subtitle()) {
|
|
12448
|
-
<p class="text-[13px] text-ink-gray-6">{{ subtitle() }}</p>
|
|
12475
|
+
<div class="flex items-center justify-between px-4 py-3 border-b border-outline-gray-2 bg-white">
|
|
12476
|
+
<!-- Left: Title & Info -->
|
|
12477
|
+
<div class="flex items-center gap-3">
|
|
12478
|
+
<h2 class="text-[16px] font-semibold text-ink-gray-9">{{ title() }}</h2>
|
|
12479
|
+
@if (count() !== undefined) {
|
|
12480
|
+
<span class="text-[13px] font-medium text-ink-gray-5 px-1.5 py-0.5 rounded-full bg-surface-gray-2">{{ count() }}</span>
|
|
12481
|
+
}
|
|
12482
|
+
@if (hasInfo()) {
|
|
12483
|
+
<button class="text-[13px] font-medium text-blue-600 hover:underline cursor-pointer flex items-center gap-1" (click)="onInfoClick.emit()">
|
|
12484
|
+
Información
|
|
12485
|
+
</button>
|
|
12449
12486
|
}
|
|
12450
12487
|
</div>
|
|
12451
12488
|
|
|
12489
|
+
<!-- Right: Actions Toolbar -->
|
|
12452
12490
|
<div class="flex items-center gap-2">
|
|
12491
|
+
|
|
12492
|
+
<!-- Built-in Actions Group -->
|
|
12493
|
+
<div class="flex items-center p-0.5 bg-surface-gray-1 border border-outline-gray-2 rounded-md h-8">
|
|
12494
|
+
<neural-button variant="ghost" size="sm" icon="lucide-list" [iconLeft]="true" class="!px-2 !text-[13px] !text-ink-gray-7 hover:!text-ink-gray-9" (click)="onViewChange.emit('report')">Vista</neural-button>
|
|
12495
|
+
<div class="w-px h-4 bg-outline-gray-3 mx-0.5"></div>
|
|
12496
|
+
<neural-button variant="ghost" size="sm" icon="lucide-filter" [iconLeft]="true" class="!px-2 !text-[13px] !text-ink-gray-7 hover:!text-ink-gray-9" (click)="onFilterClick.emit()">Filtrar</neural-button>
|
|
12497
|
+
<div class="w-px h-4 bg-outline-gray-3 mx-0.5"></div>
|
|
12498
|
+
<neural-button variant="ghost" size="sm" icon="lucide-arrow-up-down" [iconLeft]="true" class="!px-2 !text-[13px] !text-ink-gray-7 hover:!text-ink-gray-9" title="Orden">Orden</neural-button>
|
|
12499
|
+
</div>
|
|
12500
|
+
|
|
12501
|
+
<div class="flex items-center gap-1">
|
|
12502
|
+
<button class="flex items-center justify-center size-8 rounded-md hover:bg-surface-gray-2 text-ink-gray-6 hover:text-ink-gray-9 transition-colors border border-transparent hover:border-outline-gray-2" title="Actualizar" (click)="onRefreshClick.emit()">
|
|
12503
|
+
<i class="lucide-refresh-cw size-4"></i>
|
|
12504
|
+
</button>
|
|
12505
|
+
<button class="flex items-center justify-center size-8 rounded-md hover:bg-surface-gray-2 text-ink-gray-6 hover:text-ink-gray-9 transition-colors border border-transparent hover:border-outline-gray-2" title="Más acciones">
|
|
12506
|
+
<i class="lucide-more-horizontal size-4"></i>
|
|
12507
|
+
</button>
|
|
12508
|
+
</div>
|
|
12509
|
+
|
|
12510
|
+
<div class="w-px h-6 bg-outline-gray-2 mx-1"></div>
|
|
12511
|
+
|
|
12453
12512
|
<!-- External Actions (Refresh, Create, etc) -->
|
|
12454
12513
|
<ng-content select="[header-actions]"></ng-content>
|
|
12455
12514
|
</div>
|
|
12456
12515
|
</div>
|
|
12457
12516
|
|
|
12458
|
-
<!--
|
|
12459
|
-
<div class="
|
|
12460
|
-
|
|
12461
|
-
<!-- Search -->
|
|
12462
|
-
<div class="w-72">
|
|
12517
|
+
<!-- Search Area -->
|
|
12518
|
+
<div class="px-4 py-2 border-b border-outline-gray-1 bg-surface-base">
|
|
12519
|
+
<div class="w-full max-w-sm">
|
|
12463
12520
|
<neural-text-input
|
|
12464
12521
|
[placeholder]="searchPlaceholder()"
|
|
12465
12522
|
icon="lucide-search"
|
|
@@ -12467,69 +12524,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
|
|
|
12467
12524
|
(valueModelChange)="onSearch.emit($event)"
|
|
12468
12525
|
></neural-text-input>
|
|
12469
12526
|
</div>
|
|
12470
|
-
|
|
12471
|
-
<!-- Pagination & Settings -->
|
|
12472
|
-
<div class="flex items-center gap-3">
|
|
12473
|
-
<div class="flex items-center gap-1 text-sm text-ink-gray-7 font-medium">
|
|
12474
|
-
<button class="p-1 hover:bg-surface-gray-3 rounded text-ink-gray-4 hover:text-ink-gray-8 disabled:opacity-50" [disabled]="page() === 1" (click)="onPageChange.emit(page() - 1)">
|
|
12475
|
-
<i class="lucide-chevron-left size-4"></i>
|
|
12476
|
-
</button>
|
|
12477
|
-
<span class="px-2">{{ page() }}</span>
|
|
12478
|
-
<button class="p-1 hover:bg-surface-gray-3 rounded text-ink-gray-4 hover:text-ink-gray-8 disabled:opacity-50" [disabled]="page() >= totalPages()" (click)="onPageChange.emit(page() + 1)">
|
|
12479
|
-
<i class="lucide-chevron-right size-4"></i>
|
|
12480
|
-
</button>
|
|
12481
|
-
</div>
|
|
12482
|
-
|
|
12483
|
-
<div class="w-px h-4 bg-outline-gray-3 mx-1"></div>
|
|
12484
|
-
|
|
12485
|
-
<!-- Preferences Dialog Trigger -->
|
|
12486
|
-
<button class="p-1.5 hover:bg-surface-gray-3 rounded text-ink-gray-5 hover:text-ink-gray-8 transition-colors" (click)="isPreferencesOpen.set(true)">
|
|
12487
|
-
<i class="lucide-settings size-4"></i>
|
|
12488
|
-
</button>
|
|
12489
|
-
|
|
12490
|
-
<!-- Preferences Dialog Content -->
|
|
12491
|
-
<neural-dialog [openModel]="isPreferencesOpen()" (openModelChange)="isPreferencesOpen.set($event)" [hasTitleSlot]="true" [hasActionsSlot]="true" size="md">
|
|
12492
|
-
<div title>
|
|
12493
|
-
<h3 class="text-lg font-semibold text-ink-gray-9">Preferencias</h3>
|
|
12494
|
-
</div>
|
|
12495
|
-
|
|
12496
|
-
<div class="flex flex-col gap-6 py-2">
|
|
12497
|
-
<div class="flex items-start gap-4">
|
|
12498
|
-
<neural-checkbox [checkedModel]="wrapLines()" (checkedModelChange)="wrapLines.set($event)"></neural-checkbox>
|
|
12499
|
-
<div class="flex flex-col">
|
|
12500
|
-
<span class="text-sm font-medium text-ink-gray-9">Ajustar líneas</span>
|
|
12501
|
-
<span class="text-xs text-ink-gray-5">Seleccione la casilla de verificación para ajustar todas las líneas.</span>
|
|
12502
|
-
</div>
|
|
12503
|
-
</div>
|
|
12504
|
-
|
|
12505
|
-
<div class="border-t border-outline-gray-2 pt-4">
|
|
12506
|
-
<div class="flex flex-col mb-3">
|
|
12507
|
-
<span class="text-sm font-semibold text-ink-gray-9">Seleccionar columnas visibles</span>
|
|
12508
|
-
<span class="text-xs text-ink-gray-5">Personalice la visibilidad y el orden de las columnas.</span>
|
|
12509
|
-
</div>
|
|
12510
|
-
|
|
12511
|
-
<div class="flex flex-col gap-0 border border-outline-gray-2 rounded-md bg-white overflow-hidden">
|
|
12512
|
-
@for (col of allColumns(); track col.key) {
|
|
12513
|
-
<div class="flex items-center justify-between p-3 border-b border-outline-gray-1 last:border-0 hover:bg-surface-gray-1">
|
|
12514
|
-
<div class="flex items-center gap-2">
|
|
12515
|
-
<i class="lucide-grip-vertical size-4 text-ink-gray-4 cursor-grab"></i>
|
|
12516
|
-
<span class="text-sm text-ink-gray-8 font-medium">{{ col.label }}</span>
|
|
12517
|
-
</div>
|
|
12518
|
-
<neural-switch [valueModel]="isColumnVisible(col.key)" (valueModelChange)="toggleColumnVisibility(col.key, $event)"></neural-switch>
|
|
12519
|
-
</div>
|
|
12520
|
-
}
|
|
12521
|
-
</div>
|
|
12522
|
-
</div>
|
|
12523
|
-
</div>
|
|
12524
|
-
|
|
12525
|
-
<div actions>
|
|
12526
|
-
<div class="flex items-center justify-end gap-2 w-full">
|
|
12527
|
-
<neural-button variant="ghost" (click)="isPreferencesOpen.set(false)">Cancelar</neural-button>
|
|
12528
|
-
<neural-button variant="solid" theme="blue" (click)="applyPreferences()">Continuar</neural-button>
|
|
12529
|
-
</div>
|
|
12530
|
-
</div>
|
|
12531
|
-
</neural-dialog>
|
|
12532
|
-
</div>
|
|
12533
12527
|
</div>
|
|
12534
12528
|
|
|
12535
12529
|
<!-- Table Content -->
|
|
@@ -12583,15 +12577,102 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
|
|
|
12583
12577
|
</tbody>
|
|
12584
12578
|
</table>
|
|
12585
12579
|
</div>
|
|
12580
|
+
|
|
12581
|
+
<!-- Footer / Pagination Area -->
|
|
12582
|
+
<div class="flex items-center justify-between px-4 py-3 border-t border-outline-gray-2 bg-white">
|
|
12583
|
+
<!-- Left Footer -->
|
|
12584
|
+
<div class="text-[13px] text-ink-gray-5">
|
|
12585
|
+
<!-- Espacio para contadores de selección -->
|
|
12586
|
+
</div>
|
|
12587
|
+
|
|
12588
|
+
<!-- Right Footer: Pagination & Settings -->
|
|
12589
|
+
<div class="flex items-center gap-4">
|
|
12590
|
+
<div class="flex items-center gap-1 text-sm text-ink-gray-7 font-medium">
|
|
12591
|
+
<button class="p-1 hover:bg-surface-gray-2 rounded text-ink-gray-5 hover:text-ink-gray-8 disabled:opacity-30 disabled:hover:bg-transparent" [disabled]="page() === 1" (click)="onPageChange.emit(1)" title="Primera página">
|
|
12592
|
+
<i class="lucide-chevrons-left size-4"></i>
|
|
12593
|
+
</button>
|
|
12594
|
+
<button class="p-1 hover:bg-surface-gray-2 rounded text-ink-gray-5 hover:text-ink-gray-8 disabled:opacity-30 disabled:hover:bg-transparent" [disabled]="page() === 1" (click)="onPageChange.emit(page() - 1)" title="Anterior">
|
|
12595
|
+
<i class="lucide-chevron-left size-4"></i>
|
|
12596
|
+
</button>
|
|
12597
|
+
|
|
12598
|
+
<span class="px-2 text-[13px] min-w-[70px] text-center">{{ page() }} <span class="text-ink-gray-4 mx-1">/</span> {{ totalPages() }}</span>
|
|
12599
|
+
|
|
12600
|
+
<button class="p-1 hover:bg-surface-gray-2 rounded text-ink-gray-5 hover:text-ink-gray-8 disabled:opacity-30 disabled:hover:bg-transparent" [disabled]="page() >= totalPages()" (click)="onPageChange.emit(page() + 1)" title="Siguiente">
|
|
12601
|
+
<i class="lucide-chevron-right size-4"></i>
|
|
12602
|
+
</button>
|
|
12603
|
+
<button class="p-1 hover:bg-surface-gray-2 rounded text-ink-gray-5 hover:text-ink-gray-8 disabled:opacity-30 disabled:hover:bg-transparent" [disabled]="page() >= totalPages()" (click)="onPageChange.emit(totalPages())" title="Última página">
|
|
12604
|
+
<i class="lucide-chevrons-right size-4"></i>
|
|
12605
|
+
</button>
|
|
12606
|
+
</div>
|
|
12607
|
+
|
|
12608
|
+
<div class="w-px h-5 bg-outline-gray-2"></div>
|
|
12609
|
+
|
|
12610
|
+
<!-- Preferences / Columns Dialog Trigger -->
|
|
12611
|
+
<button class="p-1.5 rounded-md border border-outline-gray-2 bg-white hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors" (click)="isPreferencesOpen.set(true)" title="Configurar columnas">
|
|
12612
|
+
<i class="lucide-settings size-4"></i>
|
|
12613
|
+
</button>
|
|
12614
|
+
</div>
|
|
12615
|
+
</div>
|
|
12616
|
+
|
|
12617
|
+
<!-- Dialog moved outside of the main flex flows -->
|
|
12618
|
+
<neural-dialog [openModel]="isPreferencesOpen()" (openModelChange)="isPreferencesOpen.set($event)" [hasTitleSlot]="true" [hasActionsSlot]="true" size="md">
|
|
12619
|
+
<div title>
|
|
12620
|
+
<h3 class="text-lg font-semibold text-ink-gray-9">Preferencias</h3>
|
|
12621
|
+
</div>
|
|
12622
|
+
|
|
12623
|
+
<div class="flex flex-col gap-6 py-2">
|
|
12624
|
+
<div class="flex items-start gap-4">
|
|
12625
|
+
<neural-checkbox [checkedModel]="wrapLines()" (checkedModelChange)="wrapLines.set($event)"></neural-checkbox>
|
|
12626
|
+
<div class="flex flex-col">
|
|
12627
|
+
<span class="text-sm font-medium text-ink-gray-9">Ajustar líneas</span>
|
|
12628
|
+
<span class="text-xs text-ink-gray-5">Seleccione la casilla de verificación para ajustar todas las líneas.</span>
|
|
12629
|
+
</div>
|
|
12630
|
+
</div>
|
|
12631
|
+
|
|
12632
|
+
<div class="border-t border-outline-gray-2 pt-4">
|
|
12633
|
+
<div class="flex flex-col mb-3">
|
|
12634
|
+
<span class="text-sm font-semibold text-ink-gray-9">Seleccionar columnas visibles</span>
|
|
12635
|
+
<span class="text-xs text-ink-gray-5">Personalice la visibilidad y el orden de las columnas.</span>
|
|
12636
|
+
</div>
|
|
12637
|
+
|
|
12638
|
+
<div class="flex flex-col gap-0 border border-outline-gray-2 rounded-md bg-white overflow-hidden">
|
|
12639
|
+
@for (col of allColumns(); track col.key) {
|
|
12640
|
+
<div class="flex items-center justify-between p-3 border-b border-outline-gray-1 last:border-0 hover:bg-surface-gray-1">
|
|
12641
|
+
<div class="flex items-center gap-2">
|
|
12642
|
+
<i class="lucide-grip-vertical size-4 text-ink-gray-4 cursor-grab"></i>
|
|
12643
|
+
<span class="text-sm text-ink-gray-8 font-medium">{{ col.label }}</span>
|
|
12644
|
+
</div>
|
|
12645
|
+
<neural-switch [valueModel]="isColumnVisible(col.key)" (valueModelChange)="toggleColumnVisibility(col.key, $event)"></neural-switch>
|
|
12646
|
+
</div>
|
|
12647
|
+
}
|
|
12648
|
+
</div>
|
|
12649
|
+
</div>
|
|
12650
|
+
</div>
|
|
12651
|
+
|
|
12652
|
+
<div actions>
|
|
12653
|
+
<div class="flex items-center justify-end gap-2 w-full">
|
|
12654
|
+
<neural-button variant="ghost" (click)="isPreferencesOpen.set(false)">Cancelar</neural-button>
|
|
12655
|
+
<neural-button variant="solid" theme="blue" (click)="applyPreferences()">Continuar</neural-button>
|
|
12656
|
+
</div>
|
|
12657
|
+
</div>
|
|
12658
|
+
</neural-dialog>
|
|
12586
12659
|
</div>
|
|
12587
12660
|
`
|
|
12588
12661
|
}]
|
|
12589
|
-
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }],
|
|
12662
|
+
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }], hasInfo: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasInfo", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], allColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "allColumns", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], rowKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowKey", required: true }] }], page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }], totalPages: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalPages", required: false }] }], emptyStateTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyStateTitle", required: false }] }], emptyStateDesc: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyStateDesc", required: false }] }], onSearch: [{
|
|
12590
12663
|
type: Output
|
|
12591
12664
|
}], onPageChange: [{
|
|
12592
12665
|
type: Output
|
|
12593
12666
|
}], sortChange: [{
|
|
12594
12667
|
type: Output
|
|
12668
|
+
}], onInfoClick: [{
|
|
12669
|
+
type: Output
|
|
12670
|
+
}], onRefreshClick: [{
|
|
12671
|
+
type: Output
|
|
12672
|
+
}], onViewChange: [{
|
|
12673
|
+
type: Output
|
|
12674
|
+
}], onFilterClick: [{
|
|
12675
|
+
type: Output
|
|
12595
12676
|
}], cellTemplate: [{
|
|
12596
12677
|
type: ContentChild,
|
|
12597
12678
|
args: ['cellTemplate']
|