orbiq-neural-ui-kit 1.0.36 → 1.0.38
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.
|
@@ -12236,6 +12236,7 @@ class NeuralDataTableComponent {
|
|
|
12236
12236
|
onViewChange = new EventEmitter();
|
|
12237
12237
|
onFilterClick = new EventEmitter();
|
|
12238
12238
|
onSortChangeClick = new EventEmitter();
|
|
12239
|
+
onSearchClick = new EventEmitter();
|
|
12239
12240
|
onMoreClick = new EventEmitter();
|
|
12240
12241
|
onImportClick = new EventEmitter();
|
|
12241
12242
|
onExportClick = new EventEmitter();
|
|
@@ -12271,19 +12272,19 @@ class NeuralDataTableComponent {
|
|
|
12271
12272
|
this.sortChange.emit(key);
|
|
12272
12273
|
}
|
|
12273
12274
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralDataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
12274
|
-
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 }, newLabel: { classPropertyName: "newLabel", publicName: "newLabel", 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", onSortChangeClick: "onSortChangeClick", onMoreClick: "onMoreClick", onImportClick: "onImportClick", onExportClick: "onExportClick", onNewClick: "onNewClick" }, queries: [{ propertyName: "cellTemplate", first: true, predicate: ["cellTemplate"], descendants: true }], ngImport: i0, template: `
|
|
12275
|
+
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 }, newLabel: { classPropertyName: "newLabel", publicName: "newLabel", 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", onSortChangeClick: "onSortChangeClick", onSearchClick: "onSearchClick", onMoreClick: "onMoreClick", onImportClick: "onImportClick", onExportClick: "onExportClick", onNewClick: "onNewClick" }, queries: [{ propertyName: "cellTemplate", first: true, predicate: ["cellTemplate"], descendants: true }], ngImport: i0, template: `
|
|
12275
12276
|
<div class="flex flex-col w-full h-full bg-white rounded-md border border-outline-gray-2 shadow-sm overflow-hidden">
|
|
12276
12277
|
|
|
12277
12278
|
<!-- Top Header Area -->
|
|
12278
12279
|
<div class="flex items-center justify-between px-4 py-2 border-b border-outline-gray-2 bg-white">
|
|
12279
12280
|
<!-- Left: Title & Info -->
|
|
12280
12281
|
<div class="flex items-center gap-3">
|
|
12281
|
-
<h2 class="text-
|
|
12282
|
+
<h2 class="text-lg font-semibold text-ink-gray-9">{{ title() }}</h2>
|
|
12282
12283
|
@if (count() !== undefined) {
|
|
12283
12284
|
<span class="text-[11px] font-medium text-ink-gray-5 px-1.5 py-0.5 rounded-full bg-surface-gray-2">{{ count() }}</span>
|
|
12284
12285
|
}
|
|
12285
12286
|
@if (hasInfo()) {
|
|
12286
|
-
<button class="text-
|
|
12287
|
+
<button class="text-sm font-medium text-blue-600 hover:underline cursor-pointer flex items-center gap-1" (click)="onInfoClick.emit()">
|
|
12287
12288
|
Información
|
|
12288
12289
|
</button>
|
|
12289
12290
|
}
|
|
@@ -12294,61 +12295,56 @@ class NeuralDataTableComponent {
|
|
|
12294
12295
|
|
|
12295
12296
|
<!-- Built-in Actions Group (Clean, no background) -->
|
|
12296
12297
|
<div class="flex items-center gap-0.5">
|
|
12297
|
-
<button class="flex items-center justify-center size-
|
|
12298
|
-
<i class="lucide-list size-
|
|
12298
|
+
<button class="flex items-center justify-center size-8 rounded-md hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors" title="Vista" (click)="onViewChange.emit('report')">
|
|
12299
|
+
<i class="lucide-list size-[18px]" style="stroke-width: 1.5px;"></i>
|
|
12299
12300
|
</button>
|
|
12300
|
-
<button class="flex items-center justify-center size-
|
|
12301
|
-
<i class="lucide-filter size-
|
|
12301
|
+
<button class="flex items-center justify-center size-8 rounded-md hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors" title="Filtrar" (click)="onFilterClick.emit()">
|
|
12302
|
+
<i class="lucide-filter size-[18px]" style="stroke-width: 1.5px;"></i>
|
|
12302
12303
|
</button>
|
|
12303
|
-
<button class="flex items-center justify-center size-
|
|
12304
|
-
<i class="lucide-arrow-up-down size-
|
|
12304
|
+
<button class="flex items-center justify-center size-8 rounded-md hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors" title="Orden" (click)="onSortChangeClick.emit()">
|
|
12305
|
+
<i class="lucide-arrow-up-down size-[18px]" style="stroke-width: 1.5px;"></i>
|
|
12305
12306
|
</button>
|
|
12306
12307
|
</div>
|
|
12307
12308
|
|
|
12308
|
-
<div class="w-px h-
|
|
12309
|
+
<div class="w-px h-4 bg-outline-gray-2 mx-1.5"></div>
|
|
12309
12310
|
|
|
12310
12311
|
<div class="flex items-center gap-0.5">
|
|
12311
|
-
|
|
12312
|
-
|
|
12312
|
+
<!-- Search Icon -->
|
|
12313
|
+
<button class="flex items-center justify-center size-8 rounded-md hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors" title="Buscar" (click)="onSearchClick.emit()">
|
|
12314
|
+
<i class="lucide-search size-[18px]" style="stroke-width: 1.5px;"></i>
|
|
12313
12315
|
</button>
|
|
12314
|
-
<button class="flex items-center justify-center size-
|
|
12315
|
-
<i class="lucide-
|
|
12316
|
+
<button class="flex items-center justify-center size-8 rounded-md hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors" title="Actualizar" (click)="onRefreshClick.emit()">
|
|
12317
|
+
<i class="lucide-refresh-cw size-[18px]" style="stroke-width: 1.5px;"></i>
|
|
12316
12318
|
</button>
|
|
12317
|
-
<button class="flex items-center justify-center size-
|
|
12318
|
-
<i class="lucide-
|
|
12319
|
+
<button class="flex items-center justify-center size-8 rounded-md hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors" title="Importar" (click)="onImportClick.emit()">
|
|
12320
|
+
<i class="lucide-upload size-[18px]" style="stroke-width: 1.5px;"></i>
|
|
12319
12321
|
</button>
|
|
12320
|
-
<button class="flex items-center justify-center size-
|
|
12321
|
-
<i class="lucide-
|
|
12322
|
+
<button class="flex items-center justify-center size-8 rounded-md hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors" title="Exportar" (click)="onExportClick.emit()">
|
|
12323
|
+
<i class="lucide-download size-[18px]" style="stroke-width: 1.5px;"></i>
|
|
12324
|
+
</button>
|
|
12325
|
+
<button class="flex items-center justify-center size-8 rounded-md hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors" title="Más acciones" (click)="onMoreClick.emit()">
|
|
12326
|
+
<i class="lucide-more-horizontal size-[18px]" style="stroke-width: 1.5px;"></i>
|
|
12322
12327
|
</button>
|
|
12323
12328
|
</div>
|
|
12324
12329
|
|
|
12325
|
-
<div class="w-px h-
|
|
12330
|
+
<div class="w-px h-4 bg-outline-gray-2 mx-1.5"></div>
|
|
12326
12331
|
|
|
12327
|
-
<!-- External Actions -->
|
|
12328
|
-
<
|
|
12332
|
+
<!-- Settings and External Actions -->
|
|
12333
|
+
<div class="flex items-center gap-0.5">
|
|
12334
|
+
<button class="flex items-center justify-center size-8 rounded-md hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors" title="Configurar columnas" (click)="isPreferencesOpen.set(true)">
|
|
12335
|
+
<i class="lucide-settings size-[18px]" style="stroke-width: 1.5px;"></i>
|
|
12336
|
+
</button>
|
|
12337
|
+
|
|
12338
|
+
<ng-content select="[header-actions]"></ng-content>
|
|
12339
|
+
</div>
|
|
12329
12340
|
|
|
12330
|
-
|
|
12331
|
-
|
|
12332
|
-
|
|
12333
|
-
|
|
12334
|
-
|
|
12335
|
-
|
|
12336
|
-
|
|
12337
|
-
<!-- Search Area -->
|
|
12338
|
-
<div class="flex items-center justify-between px-4 py-1.5 border-b border-outline-gray-1 bg-surface-base">
|
|
12339
|
-
<div class="w-full max-w-sm">
|
|
12340
|
-
<neural-text-input
|
|
12341
|
-
[placeholder]="searchPlaceholder()"
|
|
12342
|
-
icon="lucide-search"
|
|
12343
|
-
size="xs"
|
|
12344
|
-
(valueModelChange)="onSearch.emit($event)"
|
|
12345
|
-
></neural-text-input>
|
|
12341
|
+
<div class="ms-1.5">
|
|
12342
|
+
<!-- + Nuevo Button -->
|
|
12343
|
+
<neural-button variant="solid" theme="blue" size="sm" icon="lucide-plus" [iconLeft]="true" class="!px-3 !h-8 !text-[12px]" (click)="onNewClick.emit()">
|
|
12344
|
+
{{ newLabel() }}
|
|
12345
|
+
</neural-button>
|
|
12346
|
+
</div>
|
|
12346
12347
|
</div>
|
|
12347
|
-
|
|
12348
|
-
<!-- Preferences / Columns Dialog Trigger -->
|
|
12349
|
-
<button class="flex items-center justify-center size-6 rounded-md bg-transparent hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors" (click)="isPreferencesOpen.set(true)" title="Configurar columnas">
|
|
12350
|
-
<i class="lucide-settings size-3.5" style="stroke-width: 1.5px;"></i>
|
|
12351
|
-
</button>
|
|
12352
12348
|
</div>
|
|
12353
12349
|
|
|
12354
12350
|
<!-- Table Content -->
|
|
@@ -12358,13 +12354,13 @@ class NeuralDataTableComponent {
|
|
|
12358
12354
|
<tr class="border-b border-outline-gray-2 bg-white">
|
|
12359
12355
|
@for (col of visibleColumns(); track col.key) {
|
|
12360
12356
|
<th
|
|
12361
|
-
class="px-4 py-2 text-
|
|
12357
|
+
class="px-4 py-2 text-sm font-medium text-ink-gray-8 truncate border-r border-outline-gray-2 last:border-r-0"
|
|
12362
12358
|
[style.width]="col.width || 'auto'"
|
|
12363
12359
|
>
|
|
12364
12360
|
<div class="flex items-center justify-between group cursor-pointer hover:text-ink-gray-9" (click)="col.sortable ? onSort(col.key) : null">
|
|
12365
12361
|
<span class="truncate">{{ col.label }}</span>
|
|
12366
12362
|
@if (col.sortable) {
|
|
12367
|
-
<i class="lucide-caret-down size-3 text-ink-gray-
|
|
12363
|
+
<i class="lucide-caret-down size-3.5 text-ink-gray-5 opacity-0 group-hover:opacity-100 transition-opacity"></i>
|
|
12368
12364
|
}
|
|
12369
12365
|
</div>
|
|
12370
12366
|
</th>
|
|
@@ -12377,7 +12373,7 @@ class NeuralDataTableComponent {
|
|
|
12377
12373
|
<tr class="border-b border-outline-gray-1 hover:bg-surface-gray-1 transition-colors group">
|
|
12378
12374
|
@for (col of visibleColumns(); track col.key) {
|
|
12379
12375
|
<td
|
|
12380
|
-
class="px-4 py-2.5 text-
|
|
12376
|
+
class="px-4 py-2.5 text-sm font-normal text-ink-gray-7"
|
|
12381
12377
|
[class.truncate]="!wrapLines()"
|
|
12382
12378
|
[class.whitespace-nowrap]="!wrapLines()"
|
|
12383
12379
|
>
|
|
@@ -12406,13 +12402,13 @@ class NeuralDataTableComponent {
|
|
|
12406
12402
|
<!-- Footer / Pagination Area -->
|
|
12407
12403
|
<div class="flex items-center justify-between px-4 py-2 border-t border-outline-gray-2 bg-white">
|
|
12408
12404
|
<!-- Left Footer -->
|
|
12409
|
-
<div class="text-[
|
|
12405
|
+
<div class="text-[13px] text-ink-gray-5">
|
|
12410
12406
|
<!-- Espacio para contadores de selección -->
|
|
12411
12407
|
</div>
|
|
12412
12408
|
|
|
12413
12409
|
<!-- Right Footer: Pagination & Settings -->
|
|
12414
12410
|
<div class="flex items-center gap-4">
|
|
12415
|
-
<div class="flex items-center gap-0.5 text-
|
|
12411
|
+
<div class="flex items-center gap-0.5 text-sm text-ink-gray-7 font-medium">
|
|
12416
12412
|
<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">
|
|
12417
12413
|
<i class="lucide-chevrons-left size-3.5" style="stroke-width: 1.5px;"></i>
|
|
12418
12414
|
</button>
|
|
@@ -12475,7 +12471,7 @@ class NeuralDataTableComponent {
|
|
|
12475
12471
|
</div>
|
|
12476
12472
|
</neural-dialog>
|
|
12477
12473
|
</div>
|
|
12478
|
-
`, 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:
|
|
12474
|
+
`, 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: 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"] }] });
|
|
12479
12475
|
}
|
|
12480
12476
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralDataTableComponent, decorators: [{
|
|
12481
12477
|
type: Component,
|
|
@@ -12485,7 +12481,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
|
|
|
12485
12481
|
imports: [
|
|
12486
12482
|
CommonModule,
|
|
12487
12483
|
NeuralButtonComponent,
|
|
12488
|
-
NeuralTextInputComponent,
|
|
12489
12484
|
NeuralDialogComponent,
|
|
12490
12485
|
NeuralSwitchComponent,
|
|
12491
12486
|
NeuralCheckboxComponent
|
|
@@ -12497,12 +12492,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
|
|
|
12497
12492
|
<div class="flex items-center justify-between px-4 py-2 border-b border-outline-gray-2 bg-white">
|
|
12498
12493
|
<!-- Left: Title & Info -->
|
|
12499
12494
|
<div class="flex items-center gap-3">
|
|
12500
|
-
<h2 class="text-
|
|
12495
|
+
<h2 class="text-lg font-semibold text-ink-gray-9">{{ title() }}</h2>
|
|
12501
12496
|
@if (count() !== undefined) {
|
|
12502
12497
|
<span class="text-[11px] font-medium text-ink-gray-5 px-1.5 py-0.5 rounded-full bg-surface-gray-2">{{ count() }}</span>
|
|
12503
12498
|
}
|
|
12504
12499
|
@if (hasInfo()) {
|
|
12505
|
-
<button class="text-
|
|
12500
|
+
<button class="text-sm font-medium text-blue-600 hover:underline cursor-pointer flex items-center gap-1" (click)="onInfoClick.emit()">
|
|
12506
12501
|
Información
|
|
12507
12502
|
</button>
|
|
12508
12503
|
}
|
|
@@ -12513,61 +12508,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
|
|
|
12513
12508
|
|
|
12514
12509
|
<!-- Built-in Actions Group (Clean, no background) -->
|
|
12515
12510
|
<div class="flex items-center gap-0.5">
|
|
12516
|
-
<button class="flex items-center justify-center size-
|
|
12517
|
-
<i class="lucide-list size-
|
|
12511
|
+
<button class="flex items-center justify-center size-8 rounded-md hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors" title="Vista" (click)="onViewChange.emit('report')">
|
|
12512
|
+
<i class="lucide-list size-[18px]" style="stroke-width: 1.5px;"></i>
|
|
12518
12513
|
</button>
|
|
12519
|
-
<button class="flex items-center justify-center size-
|
|
12520
|
-
<i class="lucide-filter size-
|
|
12514
|
+
<button class="flex items-center justify-center size-8 rounded-md hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors" title="Filtrar" (click)="onFilterClick.emit()">
|
|
12515
|
+
<i class="lucide-filter size-[18px]" style="stroke-width: 1.5px;"></i>
|
|
12521
12516
|
</button>
|
|
12522
|
-
<button class="flex items-center justify-center size-
|
|
12523
|
-
<i class="lucide-arrow-up-down size-
|
|
12517
|
+
<button class="flex items-center justify-center size-8 rounded-md hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors" title="Orden" (click)="onSortChangeClick.emit()">
|
|
12518
|
+
<i class="lucide-arrow-up-down size-[18px]" style="stroke-width: 1.5px;"></i>
|
|
12524
12519
|
</button>
|
|
12525
12520
|
</div>
|
|
12526
12521
|
|
|
12527
|
-
<div class="w-px h-
|
|
12522
|
+
<div class="w-px h-4 bg-outline-gray-2 mx-1.5"></div>
|
|
12528
12523
|
|
|
12529
12524
|
<div class="flex items-center gap-0.5">
|
|
12530
|
-
|
|
12531
|
-
|
|
12525
|
+
<!-- Search Icon -->
|
|
12526
|
+
<button class="flex items-center justify-center size-8 rounded-md hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors" title="Buscar" (click)="onSearchClick.emit()">
|
|
12527
|
+
<i class="lucide-search size-[18px]" style="stroke-width: 1.5px;"></i>
|
|
12528
|
+
</button>
|
|
12529
|
+
<button class="flex items-center justify-center size-8 rounded-md hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors" title="Actualizar" (click)="onRefreshClick.emit()">
|
|
12530
|
+
<i class="lucide-refresh-cw size-[18px]" style="stroke-width: 1.5px;"></i>
|
|
12532
12531
|
</button>
|
|
12533
|
-
<button class="flex items-center justify-center size-
|
|
12534
|
-
<i class="lucide-upload size-
|
|
12532
|
+
<button class="flex items-center justify-center size-8 rounded-md hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors" title="Importar" (click)="onImportClick.emit()">
|
|
12533
|
+
<i class="lucide-upload size-[18px]" style="stroke-width: 1.5px;"></i>
|
|
12535
12534
|
</button>
|
|
12536
|
-
<button class="flex items-center justify-center size-
|
|
12537
|
-
<i class="lucide-download size-
|
|
12535
|
+
<button class="flex items-center justify-center size-8 rounded-md hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors" title="Exportar" (click)="onExportClick.emit()">
|
|
12536
|
+
<i class="lucide-download size-[18px]" style="stroke-width: 1.5px;"></i>
|
|
12538
12537
|
</button>
|
|
12539
|
-
<button class="flex items-center justify-center size-
|
|
12540
|
-
<i class="lucide-more-horizontal size-
|
|
12538
|
+
<button class="flex items-center justify-center size-8 rounded-md hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors" title="Más acciones" (click)="onMoreClick.emit()">
|
|
12539
|
+
<i class="lucide-more-horizontal size-[18px]" style="stroke-width: 1.5px;"></i>
|
|
12541
12540
|
</button>
|
|
12542
12541
|
</div>
|
|
12543
12542
|
|
|
12544
|
-
<div class="w-px h-
|
|
12543
|
+
<div class="w-px h-4 bg-outline-gray-2 mx-1.5"></div>
|
|
12545
12544
|
|
|
12546
|
-
<!-- External Actions -->
|
|
12547
|
-
<
|
|
12545
|
+
<!-- Settings and External Actions -->
|
|
12546
|
+
<div class="flex items-center gap-0.5">
|
|
12547
|
+
<button class="flex items-center justify-center size-8 rounded-md hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors" title="Configurar columnas" (click)="isPreferencesOpen.set(true)">
|
|
12548
|
+
<i class="lucide-settings size-[18px]" style="stroke-width: 1.5px;"></i>
|
|
12549
|
+
</button>
|
|
12550
|
+
|
|
12551
|
+
<ng-content select="[header-actions]"></ng-content>
|
|
12552
|
+
</div>
|
|
12548
12553
|
|
|
12549
|
-
|
|
12550
|
-
|
|
12551
|
-
|
|
12552
|
-
|
|
12553
|
-
|
|
12554
|
-
|
|
12555
|
-
|
|
12556
|
-
<!-- Search Area -->
|
|
12557
|
-
<div class="flex items-center justify-between px-4 py-1.5 border-b border-outline-gray-1 bg-surface-base">
|
|
12558
|
-
<div class="w-full max-w-sm">
|
|
12559
|
-
<neural-text-input
|
|
12560
|
-
[placeholder]="searchPlaceholder()"
|
|
12561
|
-
icon="lucide-search"
|
|
12562
|
-
size="xs"
|
|
12563
|
-
(valueModelChange)="onSearch.emit($event)"
|
|
12564
|
-
></neural-text-input>
|
|
12554
|
+
<div class="ms-1.5">
|
|
12555
|
+
<!-- + Nuevo Button -->
|
|
12556
|
+
<neural-button variant="solid" theme="blue" size="sm" icon="lucide-plus" [iconLeft]="true" class="!px-3 !h-8 !text-[12px]" (click)="onNewClick.emit()">
|
|
12557
|
+
{{ newLabel() }}
|
|
12558
|
+
</neural-button>
|
|
12559
|
+
</div>
|
|
12565
12560
|
</div>
|
|
12566
|
-
|
|
12567
|
-
<!-- Preferences / Columns Dialog Trigger -->
|
|
12568
|
-
<button class="flex items-center justify-center size-6 rounded-md bg-transparent hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors" (click)="isPreferencesOpen.set(true)" title="Configurar columnas">
|
|
12569
|
-
<i class="lucide-settings size-3.5" style="stroke-width: 1.5px;"></i>
|
|
12570
|
-
</button>
|
|
12571
12561
|
</div>
|
|
12572
12562
|
|
|
12573
12563
|
<!-- Table Content -->
|
|
@@ -12577,13 +12567,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
|
|
|
12577
12567
|
<tr class="border-b border-outline-gray-2 bg-white">
|
|
12578
12568
|
@for (col of visibleColumns(); track col.key) {
|
|
12579
12569
|
<th
|
|
12580
|
-
class="px-4 py-2 text-
|
|
12570
|
+
class="px-4 py-2 text-sm font-medium text-ink-gray-8 truncate border-r border-outline-gray-2 last:border-r-0"
|
|
12581
12571
|
[style.width]="col.width || 'auto'"
|
|
12582
12572
|
>
|
|
12583
12573
|
<div class="flex items-center justify-between group cursor-pointer hover:text-ink-gray-9" (click)="col.sortable ? onSort(col.key) : null">
|
|
12584
12574
|
<span class="truncate">{{ col.label }}</span>
|
|
12585
12575
|
@if (col.sortable) {
|
|
12586
|
-
<i class="lucide-caret-down size-3 text-ink-gray-
|
|
12576
|
+
<i class="lucide-caret-down size-3.5 text-ink-gray-5 opacity-0 group-hover:opacity-100 transition-opacity"></i>
|
|
12587
12577
|
}
|
|
12588
12578
|
</div>
|
|
12589
12579
|
</th>
|
|
@@ -12596,7 +12586,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
|
|
|
12596
12586
|
<tr class="border-b border-outline-gray-1 hover:bg-surface-gray-1 transition-colors group">
|
|
12597
12587
|
@for (col of visibleColumns(); track col.key) {
|
|
12598
12588
|
<td
|
|
12599
|
-
class="px-4 py-2.5 text-
|
|
12589
|
+
class="px-4 py-2.5 text-sm font-normal text-ink-gray-7"
|
|
12600
12590
|
[class.truncate]="!wrapLines()"
|
|
12601
12591
|
[class.whitespace-nowrap]="!wrapLines()"
|
|
12602
12592
|
>
|
|
@@ -12625,13 +12615,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
|
|
|
12625
12615
|
<!-- Footer / Pagination Area -->
|
|
12626
12616
|
<div class="flex items-center justify-between px-4 py-2 border-t border-outline-gray-2 bg-white">
|
|
12627
12617
|
<!-- Left Footer -->
|
|
12628
|
-
<div class="text-[
|
|
12618
|
+
<div class="text-[13px] text-ink-gray-5">
|
|
12629
12619
|
<!-- Espacio para contadores de selección -->
|
|
12630
12620
|
</div>
|
|
12631
12621
|
|
|
12632
12622
|
<!-- Right Footer: Pagination & Settings -->
|
|
12633
12623
|
<div class="flex items-center gap-4">
|
|
12634
|
-
<div class="flex items-center gap-0.5 text-
|
|
12624
|
+
<div class="flex items-center gap-0.5 text-sm text-ink-gray-7 font-medium">
|
|
12635
12625
|
<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">
|
|
12636
12626
|
<i class="lucide-chevrons-left size-3.5" style="stroke-width: 1.5px;"></i>
|
|
12637
12627
|
</button>
|
|
@@ -12712,6 +12702,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
|
|
|
12712
12702
|
type: Output
|
|
12713
12703
|
}], onSortChangeClick: [{
|
|
12714
12704
|
type: Output
|
|
12705
|
+
}], onSearchClick: [{
|
|
12706
|
+
type: Output
|
|
12715
12707
|
}], onMoreClick: [{
|
|
12716
12708
|
type: Output
|
|
12717
12709
|
}], onImportClick: [{
|