orbiq-neural-ui-kit 1.0.31 → 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.
|
@@ -12200,6 +12200,484 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
|
|
|
12200
12200
|
type: Output
|
|
12201
12201
|
}] } });
|
|
12202
12202
|
|
|
12203
|
+
class NeuralDataTableComponent {
|
|
12204
|
+
title = input('Title', /* @ts-ignore */
|
|
12205
|
+
...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
|
|
12206
|
+
subtitle = input('', /* @ts-ignore */
|
|
12207
|
+
...(ngDevMode ? [{ debugName: "subtitle" }] : /* istanbul ignore next */ []));
|
|
12208
|
+
count = input(/* @ts-ignore */
|
|
12209
|
+
...(ngDevMode ? [undefined, { debugName: "count" }] : /* istanbul ignore next */ []));
|
|
12210
|
+
hasInfo = input(false, /* @ts-ignore */
|
|
12211
|
+
...(ngDevMode ? [{ debugName: "hasInfo" }] : /* istanbul ignore next */ []));
|
|
12212
|
+
searchPlaceholder = input('Search', /* @ts-ignore */
|
|
12213
|
+
...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
|
|
12214
|
+
allColumns = input([], /* @ts-ignore */
|
|
12215
|
+
...(ngDevMode ? [{ debugName: "allColumns" }] : /* istanbul ignore next */ []));
|
|
12216
|
+
rows = input([], /* @ts-ignore */
|
|
12217
|
+
...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
|
|
12218
|
+
rowKey = input.required(/* @ts-ignore */
|
|
12219
|
+
...(ngDevMode ? [{ debugName: "rowKey" }] : /* istanbul ignore next */ []));
|
|
12220
|
+
page = input(1, /* @ts-ignore */
|
|
12221
|
+
...(ngDevMode ? [{ debugName: "page" }] : /* istanbul ignore next */ []));
|
|
12222
|
+
totalPages = input(1, /* @ts-ignore */
|
|
12223
|
+
...(ngDevMode ? [{ debugName: "totalPages" }] : /* istanbul ignore next */ []));
|
|
12224
|
+
emptyStateTitle = input('No data found', /* @ts-ignore */
|
|
12225
|
+
...(ngDevMode ? [{ debugName: "emptyStateTitle" }] : /* istanbul ignore next */ []));
|
|
12226
|
+
emptyStateDesc = input('There are no records to display.', /* @ts-ignore */
|
|
12227
|
+
...(ngDevMode ? [{ debugName: "emptyStateDesc" }] : /* istanbul ignore next */ []));
|
|
12228
|
+
onSearch = new EventEmitter();
|
|
12229
|
+
onPageChange = new EventEmitter();
|
|
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();
|
|
12236
|
+
cellTemplate;
|
|
12237
|
+
isPreferencesOpen = signal(false, /* @ts-ignore */
|
|
12238
|
+
...(ngDevMode ? [{ debugName: "isPreferencesOpen" }] : /* istanbul ignore next */ []));
|
|
12239
|
+
wrapLines = signal(false, /* @ts-ignore */
|
|
12240
|
+
...(ngDevMode ? [{ debugName: "wrapLines" }] : /* istanbul ignore next */ []));
|
|
12241
|
+
hiddenColumns = signal(new Set(), /* @ts-ignore */
|
|
12242
|
+
...(ngDevMode ? [{ debugName: "hiddenColumns" }] : /* istanbul ignore next */ []));
|
|
12243
|
+
visibleColumns = computed(() => {
|
|
12244
|
+
return this.allColumns().filter(col => !this.hiddenColumns().has(col.key));
|
|
12245
|
+
}, /* @ts-ignore */
|
|
12246
|
+
...(ngDevMode ? [{ debugName: "visibleColumns" }] : /* istanbul ignore next */ []));
|
|
12247
|
+
isColumnVisible(key) {
|
|
12248
|
+
return !this.hiddenColumns().has(key);
|
|
12249
|
+
}
|
|
12250
|
+
toggleColumnVisibility(key, visible) {
|
|
12251
|
+
const hidden = new Set(this.hiddenColumns());
|
|
12252
|
+
if (visible) {
|
|
12253
|
+
hidden.delete(key);
|
|
12254
|
+
}
|
|
12255
|
+
else {
|
|
12256
|
+
hidden.add(key);
|
|
12257
|
+
}
|
|
12258
|
+
this.hiddenColumns.set(hidden);
|
|
12259
|
+
}
|
|
12260
|
+
applyPreferences() {
|
|
12261
|
+
this.isPreferencesOpen.set(false);
|
|
12262
|
+
}
|
|
12263
|
+
onSort(key) {
|
|
12264
|
+
this.sortChange.emit(key);
|
|
12265
|
+
}
|
|
12266
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralDataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
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: `
|
|
12268
|
+
<div class="flex flex-col w-full h-full bg-white rounded-md border border-outline-gray-2 shadow-sm overflow-hidden">
|
|
12269
|
+
|
|
12270
|
+
<!-- Top Header Area -->
|
|
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>
|
|
12282
|
+
}
|
|
12283
|
+
</div>
|
|
12284
|
+
|
|
12285
|
+
<!-- Right: Actions Toolbar -->
|
|
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
|
+
|
|
12308
|
+
<!-- External Actions (Refresh, Create, etc) -->
|
|
12309
|
+
<ng-content select="[header-actions]"></ng-content>
|
|
12310
|
+
</div>
|
|
12311
|
+
</div>
|
|
12312
|
+
|
|
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">
|
|
12316
|
+
<neural-text-input
|
|
12317
|
+
[placeholder]="searchPlaceholder()"
|
|
12318
|
+
icon="lucide-search"
|
|
12319
|
+
size="sm"
|
|
12320
|
+
(valueModelChange)="onSearch.emit($event)"
|
|
12321
|
+
></neural-text-input>
|
|
12322
|
+
</div>
|
|
12323
|
+
</div>
|
|
12324
|
+
|
|
12325
|
+
<!-- Table Content -->
|
|
12326
|
+
<div class="flex-1 overflow-x-auto min-h-[300px] relative">
|
|
12327
|
+
<table class="w-full text-left border-collapse">
|
|
12328
|
+
<thead>
|
|
12329
|
+
<tr class="border-b border-outline-gray-2 bg-white">
|
|
12330
|
+
@for (col of visibleColumns(); track col.key) {
|
|
12331
|
+
<th
|
|
12332
|
+
class="px-4 py-3 text-[13px] font-semibold text-ink-gray-7 truncate border-r border-outline-gray-2 last:border-r-0"
|
|
12333
|
+
[style.width]="col.width || 'auto'"
|
|
12334
|
+
>
|
|
12335
|
+
<div class="flex items-center justify-between group cursor-pointer hover:text-ink-gray-9" (click)="col.sortable ? onSort(col.key) : null">
|
|
12336
|
+
<span class="truncate">{{ col.label }}</span>
|
|
12337
|
+
@if (col.sortable) {
|
|
12338
|
+
<i class="lucide-caret-down size-3.5 text-ink-gray-4 opacity-0 group-hover:opacity-100 transition-opacity"></i>
|
|
12339
|
+
}
|
|
12340
|
+
</div>
|
|
12341
|
+
</th>
|
|
12342
|
+
}
|
|
12343
|
+
</tr>
|
|
12344
|
+
</thead>
|
|
12345
|
+
<tbody>
|
|
12346
|
+
@if (rows().length > 0) {
|
|
12347
|
+
@for (row of rows(); track row[rowKey()]) {
|
|
12348
|
+
<tr class="border-b border-outline-gray-1 hover:bg-surface-gray-1 transition-colors group">
|
|
12349
|
+
@for (col of visibleColumns(); track col.key) {
|
|
12350
|
+
<td
|
|
12351
|
+
class="px-4 py-3 text-[13.5px] text-ink-gray-9"
|
|
12352
|
+
[class.truncate]="!wrapLines()"
|
|
12353
|
+
[class.whitespace-nowrap]="!wrapLines()"
|
|
12354
|
+
>
|
|
12355
|
+
<!-- Render slot or direct value -->
|
|
12356
|
+
<ng-container *ngTemplateOutlet="cellTemplate || defaultCell; context: { $implicit: row, column: col }"></ng-container>
|
|
12357
|
+
<ng-template #defaultCell>{{ row[col.key] }}</ng-template>
|
|
12358
|
+
</td>
|
|
12359
|
+
}
|
|
12360
|
+
</tr>
|
|
12361
|
+
}
|
|
12362
|
+
} @else {
|
|
12363
|
+
<tr>
|
|
12364
|
+
<td [attr.colspan]="visibleColumns().length" class="h-64 border-0 p-0">
|
|
12365
|
+
<div class="absolute inset-0 flex flex-col items-center justify-center p-6 text-center">
|
|
12366
|
+
<h3 class="text-[15px] font-bold text-ink-gray-8 mb-1">{{ emptyStateTitle() }}</h3>
|
|
12367
|
+
<p class="text-[13px] text-ink-gray-5 mb-4 max-w-md">{{ emptyStateDesc() }}</p>
|
|
12368
|
+
<ng-content select="[empty-actions]"></ng-content>
|
|
12369
|
+
</div>
|
|
12370
|
+
</td>
|
|
12371
|
+
</tr>
|
|
12372
|
+
}
|
|
12373
|
+
</tbody>
|
|
12374
|
+
</table>
|
|
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>
|
|
12455
|
+
</div>
|
|
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"] }] });
|
|
12457
|
+
}
|
|
12458
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralDataTableComponent, decorators: [{
|
|
12459
|
+
type: Component,
|
|
12460
|
+
args: [{
|
|
12461
|
+
selector: 'neural-data-table',
|
|
12462
|
+
standalone: true,
|
|
12463
|
+
imports: [
|
|
12464
|
+
CommonModule,
|
|
12465
|
+
NeuralButtonComponent,
|
|
12466
|
+
NeuralTextInputComponent,
|
|
12467
|
+
NeuralDialogComponent,
|
|
12468
|
+
NeuralSwitchComponent,
|
|
12469
|
+
NeuralCheckboxComponent
|
|
12470
|
+
],
|
|
12471
|
+
template: `
|
|
12472
|
+
<div class="flex flex-col w-full h-full bg-white rounded-md border border-outline-gray-2 shadow-sm overflow-hidden">
|
|
12473
|
+
|
|
12474
|
+
<!-- Top Header Area -->
|
|
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>
|
|
12486
|
+
}
|
|
12487
|
+
</div>
|
|
12488
|
+
|
|
12489
|
+
<!-- Right: Actions Toolbar -->
|
|
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
|
+
|
|
12512
|
+
<!-- External Actions (Refresh, Create, etc) -->
|
|
12513
|
+
<ng-content select="[header-actions]"></ng-content>
|
|
12514
|
+
</div>
|
|
12515
|
+
</div>
|
|
12516
|
+
|
|
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">
|
|
12520
|
+
<neural-text-input
|
|
12521
|
+
[placeholder]="searchPlaceholder()"
|
|
12522
|
+
icon="lucide-search"
|
|
12523
|
+
size="sm"
|
|
12524
|
+
(valueModelChange)="onSearch.emit($event)"
|
|
12525
|
+
></neural-text-input>
|
|
12526
|
+
</div>
|
|
12527
|
+
</div>
|
|
12528
|
+
|
|
12529
|
+
<!-- Table Content -->
|
|
12530
|
+
<div class="flex-1 overflow-x-auto min-h-[300px] relative">
|
|
12531
|
+
<table class="w-full text-left border-collapse">
|
|
12532
|
+
<thead>
|
|
12533
|
+
<tr class="border-b border-outline-gray-2 bg-white">
|
|
12534
|
+
@for (col of visibleColumns(); track col.key) {
|
|
12535
|
+
<th
|
|
12536
|
+
class="px-4 py-3 text-[13px] font-semibold text-ink-gray-7 truncate border-r border-outline-gray-2 last:border-r-0"
|
|
12537
|
+
[style.width]="col.width || 'auto'"
|
|
12538
|
+
>
|
|
12539
|
+
<div class="flex items-center justify-between group cursor-pointer hover:text-ink-gray-9" (click)="col.sortable ? onSort(col.key) : null">
|
|
12540
|
+
<span class="truncate">{{ col.label }}</span>
|
|
12541
|
+
@if (col.sortable) {
|
|
12542
|
+
<i class="lucide-caret-down size-3.5 text-ink-gray-4 opacity-0 group-hover:opacity-100 transition-opacity"></i>
|
|
12543
|
+
}
|
|
12544
|
+
</div>
|
|
12545
|
+
</th>
|
|
12546
|
+
}
|
|
12547
|
+
</tr>
|
|
12548
|
+
</thead>
|
|
12549
|
+
<tbody>
|
|
12550
|
+
@if (rows().length > 0) {
|
|
12551
|
+
@for (row of rows(); track row[rowKey()]) {
|
|
12552
|
+
<tr class="border-b border-outline-gray-1 hover:bg-surface-gray-1 transition-colors group">
|
|
12553
|
+
@for (col of visibleColumns(); track col.key) {
|
|
12554
|
+
<td
|
|
12555
|
+
class="px-4 py-3 text-[13.5px] text-ink-gray-9"
|
|
12556
|
+
[class.truncate]="!wrapLines()"
|
|
12557
|
+
[class.whitespace-nowrap]="!wrapLines()"
|
|
12558
|
+
>
|
|
12559
|
+
<!-- Render slot or direct value -->
|
|
12560
|
+
<ng-container *ngTemplateOutlet="cellTemplate || defaultCell; context: { $implicit: row, column: col }"></ng-container>
|
|
12561
|
+
<ng-template #defaultCell>{{ row[col.key] }}</ng-template>
|
|
12562
|
+
</td>
|
|
12563
|
+
}
|
|
12564
|
+
</tr>
|
|
12565
|
+
}
|
|
12566
|
+
} @else {
|
|
12567
|
+
<tr>
|
|
12568
|
+
<td [attr.colspan]="visibleColumns().length" class="h-64 border-0 p-0">
|
|
12569
|
+
<div class="absolute inset-0 flex flex-col items-center justify-center p-6 text-center">
|
|
12570
|
+
<h3 class="text-[15px] font-bold text-ink-gray-8 mb-1">{{ emptyStateTitle() }}</h3>
|
|
12571
|
+
<p class="text-[13px] text-ink-gray-5 mb-4 max-w-md">{{ emptyStateDesc() }}</p>
|
|
12572
|
+
<ng-content select="[empty-actions]"></ng-content>
|
|
12573
|
+
</div>
|
|
12574
|
+
</td>
|
|
12575
|
+
</tr>
|
|
12576
|
+
}
|
|
12577
|
+
</tbody>
|
|
12578
|
+
</table>
|
|
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>
|
|
12659
|
+
</div>
|
|
12660
|
+
`
|
|
12661
|
+
}]
|
|
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: [{
|
|
12663
|
+
type: Output
|
|
12664
|
+
}], onPageChange: [{
|
|
12665
|
+
type: Output
|
|
12666
|
+
}], sortChange: [{
|
|
12667
|
+
type: Output
|
|
12668
|
+
}], onInfoClick: [{
|
|
12669
|
+
type: Output
|
|
12670
|
+
}], onRefreshClick: [{
|
|
12671
|
+
type: Output
|
|
12672
|
+
}], onViewChange: [{
|
|
12673
|
+
type: Output
|
|
12674
|
+
}], onFilterClick: [{
|
|
12675
|
+
type: Output
|
|
12676
|
+
}], cellTemplate: [{
|
|
12677
|
+
type: ContentChild,
|
|
12678
|
+
args: ['cellTemplate']
|
|
12679
|
+
}] } });
|
|
12680
|
+
|
|
12203
12681
|
class NeuralMenuComponent {
|
|
12204
12682
|
options = input([], /* @ts-ignore */
|
|
12205
12683
|
...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
|
|
@@ -14172,6 +14650,221 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
|
|
|
14172
14650
|
type: Output
|
|
14173
14651
|
}] } });
|
|
14174
14652
|
|
|
14653
|
+
class NeuralSubGridComponent {
|
|
14654
|
+
columns = input([], /* @ts-ignore */
|
|
14655
|
+
...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
|
|
14656
|
+
rows = input([], /* @ts-ignore */
|
|
14657
|
+
...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
|
|
14658
|
+
rowKey = input.required(/* @ts-ignore */
|
|
14659
|
+
...(ngDevMode ? [{ debugName: "rowKey" }] : /* istanbul ignore next */ []));
|
|
14660
|
+
onAddRow = new EventEmitter();
|
|
14661
|
+
cellTemplate;
|
|
14662
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralSubGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
14663
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: NeuralSubGridComponent, isStandalone: true, selector: "neural-sub-grid", inputs: { columns: { classPropertyName: "columns", publicName: "columns", 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 } }, outputs: { onAddRow: "onAddRow" }, queries: [{ propertyName: "cellTemplate", first: true, predicate: ["cellTemplate"], descendants: true }], ngImport: i0, template: `
|
|
14664
|
+
<div class="flex flex-col w-full">
|
|
14665
|
+
<!-- Top actions (Escanear código de barras, etc) -->
|
|
14666
|
+
<div class="mb-4">
|
|
14667
|
+
<ng-content select="[toolbar]"></ng-content>
|
|
14668
|
+
</div>
|
|
14669
|
+
|
|
14670
|
+
<!-- Table -->
|
|
14671
|
+
<div class="border border-outline-gray-2 rounded-md bg-white overflow-x-auto">
|
|
14672
|
+
<table class="w-full text-left border-collapse">
|
|
14673
|
+
<thead>
|
|
14674
|
+
<tr class="bg-surface-gray-1 border-b border-outline-gray-2">
|
|
14675
|
+
<th class="px-3 py-2 w-10 text-center">
|
|
14676
|
+
<neural-checkbox></neural-checkbox>
|
|
14677
|
+
</th>
|
|
14678
|
+
@for (col of columns(); track col.key) {
|
|
14679
|
+
<th
|
|
14680
|
+
class="px-3 py-2 text-[12px] font-semibold text-ink-gray-6 uppercase tracking-wider"
|
|
14681
|
+
[style.width]="col.width || 'auto'"
|
|
14682
|
+
[ngClass]="{
|
|
14683
|
+
'text-left': !col.align || col.align === 'left',
|
|
14684
|
+
'text-center': col.align === 'center',
|
|
14685
|
+
'text-right': col.align === 'right'
|
|
14686
|
+
}"
|
|
14687
|
+
>
|
|
14688
|
+
{{ col.label }}
|
|
14689
|
+
</th>
|
|
14690
|
+
}
|
|
14691
|
+
<th class="px-3 py-2 w-12 text-center">
|
|
14692
|
+
<i class="lucide-settings size-4 text-ink-gray-4"></i>
|
|
14693
|
+
</th>
|
|
14694
|
+
</tr>
|
|
14695
|
+
</thead>
|
|
14696
|
+
<tbody>
|
|
14697
|
+
@if (rows().length > 0) {
|
|
14698
|
+
@for (row of rows(); track row[rowKey()]; let i = $index) {
|
|
14699
|
+
<tr class="border-b border-outline-gray-1 hover:bg-surface-gray-1 group">
|
|
14700
|
+
<td class="px-3 py-2 text-center">
|
|
14701
|
+
<neural-checkbox></neural-checkbox>
|
|
14702
|
+
</td>
|
|
14703
|
+
|
|
14704
|
+
@for (col of columns(); track col.key) {
|
|
14705
|
+
<td class="px-3 py-2">
|
|
14706
|
+
<ng-container *ngTemplateOutlet="cellTemplate || defaultCell; context: { $implicit: row, column: col, index: i }"></ng-container>
|
|
14707
|
+
<ng-template #defaultCell>
|
|
14708
|
+
<div
|
|
14709
|
+
class="text-[13px] text-ink-gray-8"
|
|
14710
|
+
[ngClass]="{
|
|
14711
|
+
'text-left': !col.align || col.align === 'left',
|
|
14712
|
+
'text-center': col.align === 'center',
|
|
14713
|
+
'text-right': col.align === 'right'
|
|
14714
|
+
}"
|
|
14715
|
+
>
|
|
14716
|
+
{{ row[col.key] }}
|
|
14717
|
+
</div>
|
|
14718
|
+
</ng-template>
|
|
14719
|
+
</td>
|
|
14720
|
+
}
|
|
14721
|
+
|
|
14722
|
+
<td class="px-3 py-2 text-center">
|
|
14723
|
+
<button type="button" class="p-1 text-ink-gray-4 hover:text-ink-gray-7 rounded hover:bg-surface-gray-2">
|
|
14724
|
+
<i class="lucide-edit-2 size-3.5"></i>
|
|
14725
|
+
</button>
|
|
14726
|
+
</td>
|
|
14727
|
+
</tr>
|
|
14728
|
+
}
|
|
14729
|
+
} @else {
|
|
14730
|
+
<tr>
|
|
14731
|
+
<td [attr.colspan]="columns().length + 2" class="p-4 text-center text-[13px] text-ink-gray-5">
|
|
14732
|
+
No hay filas.
|
|
14733
|
+
</td>
|
|
14734
|
+
</tr>
|
|
14735
|
+
}
|
|
14736
|
+
</tbody>
|
|
14737
|
+
</table>
|
|
14738
|
+
</div>
|
|
14739
|
+
|
|
14740
|
+
<!-- Bottom Actions -->
|
|
14741
|
+
<div class="flex items-center justify-between mt-3">
|
|
14742
|
+
<div class="flex items-center gap-2">
|
|
14743
|
+
<neural-button variant="subtle" size="sm" (click)="onAddRow.emit()">Añadir fila</neural-button>
|
|
14744
|
+
<neural-button variant="ghost" size="sm">Agregar varios</neural-button>
|
|
14745
|
+
</div>
|
|
14746
|
+
<div class="flex items-center gap-2">
|
|
14747
|
+
<neural-button variant="ghost" size="sm">Descargar</neural-button>
|
|
14748
|
+
<neural-button variant="ghost" size="sm">Subir</neural-button>
|
|
14749
|
+
</div>
|
|
14750
|
+
</div>
|
|
14751
|
+
|
|
14752
|
+
<!-- Footer Area for Totals -->
|
|
14753
|
+
<div class="mt-6 border-t border-outline-gray-2 pt-4">
|
|
14754
|
+
<ng-content select="[footer-totals]"></ng-content>
|
|
14755
|
+
</div>
|
|
14756
|
+
</div>
|
|
14757
|
+
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: NeuralCheckboxComponent, selector: "neural-checkbox", inputs: ["checkedModel", "size", "padded", "indeterminate", "disabled", "required", "label", "description", "error", "id", "hasLabelSlot", "hasDescriptionSlot"], outputs: ["checkedModelChange"] }] });
|
|
14758
|
+
}
|
|
14759
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralSubGridComponent, decorators: [{
|
|
14760
|
+
type: Component,
|
|
14761
|
+
args: [{
|
|
14762
|
+
selector: 'neural-sub-grid',
|
|
14763
|
+
standalone: true,
|
|
14764
|
+
imports: [CommonModule, NeuralButtonComponent, NeuralCheckboxComponent],
|
|
14765
|
+
template: `
|
|
14766
|
+
<div class="flex flex-col w-full">
|
|
14767
|
+
<!-- Top actions (Escanear código de barras, etc) -->
|
|
14768
|
+
<div class="mb-4">
|
|
14769
|
+
<ng-content select="[toolbar]"></ng-content>
|
|
14770
|
+
</div>
|
|
14771
|
+
|
|
14772
|
+
<!-- Table -->
|
|
14773
|
+
<div class="border border-outline-gray-2 rounded-md bg-white overflow-x-auto">
|
|
14774
|
+
<table class="w-full text-left border-collapse">
|
|
14775
|
+
<thead>
|
|
14776
|
+
<tr class="bg-surface-gray-1 border-b border-outline-gray-2">
|
|
14777
|
+
<th class="px-3 py-2 w-10 text-center">
|
|
14778
|
+
<neural-checkbox></neural-checkbox>
|
|
14779
|
+
</th>
|
|
14780
|
+
@for (col of columns(); track col.key) {
|
|
14781
|
+
<th
|
|
14782
|
+
class="px-3 py-2 text-[12px] font-semibold text-ink-gray-6 uppercase tracking-wider"
|
|
14783
|
+
[style.width]="col.width || 'auto'"
|
|
14784
|
+
[ngClass]="{
|
|
14785
|
+
'text-left': !col.align || col.align === 'left',
|
|
14786
|
+
'text-center': col.align === 'center',
|
|
14787
|
+
'text-right': col.align === 'right'
|
|
14788
|
+
}"
|
|
14789
|
+
>
|
|
14790
|
+
{{ col.label }}
|
|
14791
|
+
</th>
|
|
14792
|
+
}
|
|
14793
|
+
<th class="px-3 py-2 w-12 text-center">
|
|
14794
|
+
<i class="lucide-settings size-4 text-ink-gray-4"></i>
|
|
14795
|
+
</th>
|
|
14796
|
+
</tr>
|
|
14797
|
+
</thead>
|
|
14798
|
+
<tbody>
|
|
14799
|
+
@if (rows().length > 0) {
|
|
14800
|
+
@for (row of rows(); track row[rowKey()]; let i = $index) {
|
|
14801
|
+
<tr class="border-b border-outline-gray-1 hover:bg-surface-gray-1 group">
|
|
14802
|
+
<td class="px-3 py-2 text-center">
|
|
14803
|
+
<neural-checkbox></neural-checkbox>
|
|
14804
|
+
</td>
|
|
14805
|
+
|
|
14806
|
+
@for (col of columns(); track col.key) {
|
|
14807
|
+
<td class="px-3 py-2">
|
|
14808
|
+
<ng-container *ngTemplateOutlet="cellTemplate || defaultCell; context: { $implicit: row, column: col, index: i }"></ng-container>
|
|
14809
|
+
<ng-template #defaultCell>
|
|
14810
|
+
<div
|
|
14811
|
+
class="text-[13px] text-ink-gray-8"
|
|
14812
|
+
[ngClass]="{
|
|
14813
|
+
'text-left': !col.align || col.align === 'left',
|
|
14814
|
+
'text-center': col.align === 'center',
|
|
14815
|
+
'text-right': col.align === 'right'
|
|
14816
|
+
}"
|
|
14817
|
+
>
|
|
14818
|
+
{{ row[col.key] }}
|
|
14819
|
+
</div>
|
|
14820
|
+
</ng-template>
|
|
14821
|
+
</td>
|
|
14822
|
+
}
|
|
14823
|
+
|
|
14824
|
+
<td class="px-3 py-2 text-center">
|
|
14825
|
+
<button type="button" class="p-1 text-ink-gray-4 hover:text-ink-gray-7 rounded hover:bg-surface-gray-2">
|
|
14826
|
+
<i class="lucide-edit-2 size-3.5"></i>
|
|
14827
|
+
</button>
|
|
14828
|
+
</td>
|
|
14829
|
+
</tr>
|
|
14830
|
+
}
|
|
14831
|
+
} @else {
|
|
14832
|
+
<tr>
|
|
14833
|
+
<td [attr.colspan]="columns().length + 2" class="p-4 text-center text-[13px] text-ink-gray-5">
|
|
14834
|
+
No hay filas.
|
|
14835
|
+
</td>
|
|
14836
|
+
</tr>
|
|
14837
|
+
}
|
|
14838
|
+
</tbody>
|
|
14839
|
+
</table>
|
|
14840
|
+
</div>
|
|
14841
|
+
|
|
14842
|
+
<!-- Bottom Actions -->
|
|
14843
|
+
<div class="flex items-center justify-between mt-3">
|
|
14844
|
+
<div class="flex items-center gap-2">
|
|
14845
|
+
<neural-button variant="subtle" size="sm" (click)="onAddRow.emit()">Añadir fila</neural-button>
|
|
14846
|
+
<neural-button variant="ghost" size="sm">Agregar varios</neural-button>
|
|
14847
|
+
</div>
|
|
14848
|
+
<div class="flex items-center gap-2">
|
|
14849
|
+
<neural-button variant="ghost" size="sm">Descargar</neural-button>
|
|
14850
|
+
<neural-button variant="ghost" size="sm">Subir</neural-button>
|
|
14851
|
+
</div>
|
|
14852
|
+
</div>
|
|
14853
|
+
|
|
14854
|
+
<!-- Footer Area for Totals -->
|
|
14855
|
+
<div class="mt-6 border-t border-outline-gray-2 pt-4">
|
|
14856
|
+
<ng-content select="[footer-totals]"></ng-content>
|
|
14857
|
+
</div>
|
|
14858
|
+
</div>
|
|
14859
|
+
`
|
|
14860
|
+
}]
|
|
14861
|
+
}], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], rowKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowKey", required: true }] }], onAddRow: [{
|
|
14862
|
+
type: Output
|
|
14863
|
+
}], cellTemplate: [{
|
|
14864
|
+
type: ContentChild,
|
|
14865
|
+
args: ['cellTemplate']
|
|
14866
|
+
}] } });
|
|
14867
|
+
|
|
14175
14868
|
class NeuralDesktopShellComponent {
|
|
14176
14869
|
scroll = input(true, /* @ts-ignore */
|
|
14177
14870
|
...(ngDevMode ? [{ debugName: "scroll" }] : /* istanbul ignore next */ []));
|
|
@@ -14286,6 +14979,94 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
|
|
|
14286
14979
|
}]
|
|
14287
14980
|
}] });
|
|
14288
14981
|
|
|
14982
|
+
class NeuralEntityFormComponent {
|
|
14983
|
+
title = input.required(/* @ts-ignore */
|
|
14984
|
+
...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
|
|
14985
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralEntityFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
14986
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: NeuralEntityFormComponent, isStandalone: true, selector: "neural-entity-form", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
|
|
14987
|
+
<div class="flex flex-col w-full h-full min-h-screen bg-white">
|
|
14988
|
+
|
|
14989
|
+
<!-- Top Fixed Header -->
|
|
14990
|
+
<div class="sticky top-0 z-20 flex flex-col bg-white border-b border-outline-gray-2 shadow-sm">
|
|
14991
|
+
|
|
14992
|
+
<!-- Breadcrumbs & Title Bar -->
|
|
14993
|
+
<div class="flex items-center justify-between px-6 py-3">
|
|
14994
|
+
<div class="flex items-center gap-3">
|
|
14995
|
+
<!-- Breadcrumbs or Icon -->
|
|
14996
|
+
<ng-content select="[breadcrumb]"></ng-content>
|
|
14997
|
+
|
|
14998
|
+
<h1 class="text-lg font-bold text-ink-gray-9">{{ title() }}</h1>
|
|
14999
|
+
|
|
15000
|
+
<!-- Badges like 'No guardado' -->
|
|
15001
|
+
<ng-content select="[status-badge]"></ng-content>
|
|
15002
|
+
</div>
|
|
15003
|
+
|
|
15004
|
+
<div class="flex items-center gap-2">
|
|
15005
|
+
<!-- Header actions (Save, Cancel, Actions dropdown) -->
|
|
15006
|
+
<ng-content select="[header-actions]"></ng-content>
|
|
15007
|
+
</div>
|
|
15008
|
+
</div>
|
|
15009
|
+
|
|
15010
|
+
<!-- Tabs Bar -->
|
|
15011
|
+
<div class="px-6 -mb-px">
|
|
15012
|
+
<ng-content select="[tabs]"></ng-content>
|
|
15013
|
+
</div>
|
|
15014
|
+
</div>
|
|
15015
|
+
|
|
15016
|
+
<!-- Form Content Area -->
|
|
15017
|
+
<div class="flex-1 w-full max-w-6xl mx-auto px-6 py-8">
|
|
15018
|
+
<ng-content></ng-content>
|
|
15019
|
+
</div>
|
|
15020
|
+
|
|
15021
|
+
</div>
|
|
15022
|
+
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
15023
|
+
}
|
|
15024
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralEntityFormComponent, decorators: [{
|
|
15025
|
+
type: Component,
|
|
15026
|
+
args: [{
|
|
15027
|
+
selector: 'neural-entity-form',
|
|
15028
|
+
standalone: true,
|
|
15029
|
+
imports: [CommonModule],
|
|
15030
|
+
template: `
|
|
15031
|
+
<div class="flex flex-col w-full h-full min-h-screen bg-white">
|
|
15032
|
+
|
|
15033
|
+
<!-- Top Fixed Header -->
|
|
15034
|
+
<div class="sticky top-0 z-20 flex flex-col bg-white border-b border-outline-gray-2 shadow-sm">
|
|
15035
|
+
|
|
15036
|
+
<!-- Breadcrumbs & Title Bar -->
|
|
15037
|
+
<div class="flex items-center justify-between px-6 py-3">
|
|
15038
|
+
<div class="flex items-center gap-3">
|
|
15039
|
+
<!-- Breadcrumbs or Icon -->
|
|
15040
|
+
<ng-content select="[breadcrumb]"></ng-content>
|
|
15041
|
+
|
|
15042
|
+
<h1 class="text-lg font-bold text-ink-gray-9">{{ title() }}</h1>
|
|
15043
|
+
|
|
15044
|
+
<!-- Badges like 'No guardado' -->
|
|
15045
|
+
<ng-content select="[status-badge]"></ng-content>
|
|
15046
|
+
</div>
|
|
15047
|
+
|
|
15048
|
+
<div class="flex items-center gap-2">
|
|
15049
|
+
<!-- Header actions (Save, Cancel, Actions dropdown) -->
|
|
15050
|
+
<ng-content select="[header-actions]"></ng-content>
|
|
15051
|
+
</div>
|
|
15052
|
+
</div>
|
|
15053
|
+
|
|
15054
|
+
<!-- Tabs Bar -->
|
|
15055
|
+
<div class="px-6 -mb-px">
|
|
15056
|
+
<ng-content select="[tabs]"></ng-content>
|
|
15057
|
+
</div>
|
|
15058
|
+
</div>
|
|
15059
|
+
|
|
15060
|
+
<!-- Form Content Area -->
|
|
15061
|
+
<div class="flex-1 w-full max-w-6xl mx-auto px-6 py-8">
|
|
15062
|
+
<ng-content></ng-content>
|
|
15063
|
+
</div>
|
|
15064
|
+
|
|
15065
|
+
</div>
|
|
15066
|
+
`
|
|
15067
|
+
}]
|
|
15068
|
+
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }] } });
|
|
15069
|
+
|
|
14289
15070
|
/*
|
|
14290
15071
|
* Public API Surface of neural-ui-kit
|
|
14291
15072
|
*/
|
|
@@ -14295,5 +15076,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
|
|
|
14295
15076
|
* Generated bundle index. Do not edit.
|
|
14296
15077
|
*/
|
|
14297
15078
|
|
|
14298
|
-
export { NeuralAccordionComponent, NeuralAlertComponent, NeuralAvatarComponent, NeuralAxisChartComponent, NeuralBadgeComponent, NeuralBottomSheetComponent, NeuralBreadcrumbsComponent, NeuralButtonComponent, NeuralCalendarComponent, NeuralCheckboxComponent, NeuralCodeEditorComponent, NeuralCodePreviewComponent, NeuralComboboxComponent, NeuralCommandPaletteComponent, NeuralContextMenuComponent, NeuralDatePickerComponent, NeuralDesktopShellComponent, NeuralDialogComponent, NeuralDividerComponent, NeuralDonutChartComponent, NeuralDropdownComponent, NeuralDurationComponent, NeuralEChartsComponent, NeuralErrorMessageComponent, NeuralFileUploaderComponent, NeuralFilterBuilderComponent, NeuralFloatingWindowComponent, NeuralFooterComponent, NeuralFormControlComponent, NeuralFormLabelComponent, NeuralFunnelChartComponent, NeuralHoverCardComponent, NeuralIconComponent, NeuralInputDescriptionComponent, NeuralInputErrorComponent, NeuralInputLabelComponent, NeuralItemListRowComponent, NeuralKeyboardShortcutComponent, NeuralKeyboardShortcutsDialogComponent, NeuralLabelingWrapperComponent, NeuralListViewComponent, NeuralLoadingIndicatorComponent, NeuralLoadingTextComponent, NeuralMenuComponent, NeuralMobileNavComponent, NeuralMobileNavItemComponent, NeuralMobileShellComponent, NeuralMultiEmailInputComponent, NeuralMultiSelectComponent, NeuralNotificationCenterComponent, NeuralNumberChartComponent, NeuralPageHeaderComponent, NeuralPasswordComponent, NeuralPopoverComponent, NeuralPopoverContentDirective, NeuralPopoverPanelComponent, NeuralPopoverTriggerDirective, NeuralProgressComponent, NeuralRadioComponent, NeuralRadioGroupComponent, NeuralRailComponent, NeuralRailItemComponent, NeuralRatingComponent, NeuralRequiredIndicatorComponent, NeuralScrollAreaComponent, NeuralSearchTriggerComponent, NeuralSelectComponent, NeuralSettingsContentComponent, NeuralSettingsDialogComponent, NeuralSettingsNavItemComponent, NeuralSettingsPanelComponent, NeuralSettingsSidebarComponent, NeuralSidebarComponent, NeuralSidebarItemComponent, NeuralSkeletonComponent, NeuralSliderComponent, NeuralSpinnerComponent, NeuralSwitchComponent, NeuralTabComponent, NeuralTabPanelComponent, NeuralTabsComponent, NeuralTextEditorComponent, NeuralTextInputComponent, NeuralTextareaComponent, NeuralThemeSwitcherComponent, NeuralTimePickerComponent, NeuralToastComponent, NeuralTooltipComponent, NeuralTreeComponent, NeuralTreeItemComponent, RADIO_GROUP, TABS_ROOT, ToastService, formatDuration, parseDuration };
|
|
15079
|
+
export { NeuralAccordionComponent, NeuralAlertComponent, NeuralAvatarComponent, NeuralAxisChartComponent, NeuralBadgeComponent, NeuralBottomSheetComponent, NeuralBreadcrumbsComponent, NeuralButtonComponent, NeuralCalendarComponent, NeuralCheckboxComponent, NeuralCodeEditorComponent, NeuralCodePreviewComponent, NeuralComboboxComponent, NeuralCommandPaletteComponent, NeuralContextMenuComponent, NeuralDataTableComponent, NeuralDatePickerComponent, NeuralDesktopShellComponent, NeuralDialogComponent, NeuralDividerComponent, NeuralDonutChartComponent, NeuralDropdownComponent, NeuralDurationComponent, NeuralEChartsComponent, NeuralEntityFormComponent, NeuralErrorMessageComponent, NeuralFileUploaderComponent, NeuralFilterBuilderComponent, NeuralFloatingWindowComponent, NeuralFooterComponent, NeuralFormControlComponent, NeuralFormLabelComponent, NeuralFunnelChartComponent, NeuralHoverCardComponent, NeuralIconComponent, NeuralInputDescriptionComponent, NeuralInputErrorComponent, NeuralInputLabelComponent, NeuralItemListRowComponent, NeuralKeyboardShortcutComponent, NeuralKeyboardShortcutsDialogComponent, NeuralLabelingWrapperComponent, NeuralListViewComponent, NeuralLoadingIndicatorComponent, NeuralLoadingTextComponent, NeuralMenuComponent, NeuralMobileNavComponent, NeuralMobileNavItemComponent, NeuralMobileShellComponent, NeuralMultiEmailInputComponent, NeuralMultiSelectComponent, NeuralNotificationCenterComponent, NeuralNumberChartComponent, NeuralPageHeaderComponent, NeuralPasswordComponent, NeuralPopoverComponent, NeuralPopoverContentDirective, NeuralPopoverPanelComponent, NeuralPopoverTriggerDirective, NeuralProgressComponent, NeuralRadioComponent, NeuralRadioGroupComponent, NeuralRailComponent, NeuralRailItemComponent, NeuralRatingComponent, NeuralRequiredIndicatorComponent, NeuralScrollAreaComponent, NeuralSearchTriggerComponent, NeuralSelectComponent, NeuralSettingsContentComponent, NeuralSettingsDialogComponent, NeuralSettingsNavItemComponent, NeuralSettingsPanelComponent, NeuralSettingsSidebarComponent, NeuralSidebarComponent, NeuralSidebarItemComponent, NeuralSkeletonComponent, NeuralSliderComponent, NeuralSpinnerComponent, NeuralSubGridComponent, NeuralSwitchComponent, NeuralTabComponent, NeuralTabPanelComponent, NeuralTabsComponent, NeuralTextEditorComponent, NeuralTextInputComponent, NeuralTextareaComponent, NeuralThemeSwitcherComponent, NeuralTimePickerComponent, NeuralToastComponent, NeuralTooltipComponent, NeuralTreeComponent, NeuralTreeItemComponent, RADIO_GROUP, TABS_ROOT, ToastService, formatDuration, parseDuration };
|
|
14299
15080
|
//# sourceMappingURL=orbiq-neural-ui-kit.mjs.map
|