orbiq-neural-ui-kit 1.0.30 → 1.0.32

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,403 @@ 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
+ infoLink = input('', /* @ts-ignore */
12211
+ ...(ngDevMode ? [{ debugName: "infoLink" }] : /* 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
+ cellTemplate;
12232
+ isPreferencesOpen = signal(false, /* @ts-ignore */
12233
+ ...(ngDevMode ? [{ debugName: "isPreferencesOpen" }] : /* istanbul ignore next */ []));
12234
+ wrapLines = signal(false, /* @ts-ignore */
12235
+ ...(ngDevMode ? [{ debugName: "wrapLines" }] : /* istanbul ignore next */ []));
12236
+ hiddenColumns = signal(new Set(), /* @ts-ignore */
12237
+ ...(ngDevMode ? [{ debugName: "hiddenColumns" }] : /* istanbul ignore next */ []));
12238
+ visibleColumns = computed(() => {
12239
+ return this.allColumns().filter(col => !this.hiddenColumns().has(col.key));
12240
+ }, /* @ts-ignore */
12241
+ ...(ngDevMode ? [{ debugName: "visibleColumns" }] : /* istanbul ignore next */ []));
12242
+ isColumnVisible(key) {
12243
+ return !this.hiddenColumns().has(key);
12244
+ }
12245
+ toggleColumnVisibility(key, visible) {
12246
+ const hidden = new Set(this.hiddenColumns());
12247
+ if (visible) {
12248
+ hidden.delete(key);
12249
+ }
12250
+ else {
12251
+ hidden.add(key);
12252
+ }
12253
+ this.hiddenColumns.set(hidden);
12254
+ }
12255
+ applyPreferences() {
12256
+ this.isPreferencesOpen.set(false);
12257
+ }
12258
+ onSort(key) {
12259
+ this.sortChange.emit(key);
12260
+ }
12261
+ 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 }, infoLink: { classPropertyName: "infoLink", publicName: "infoLink", 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" }, queries: [{ propertyName: "cellTemplate", first: true, predicate: ["cellTemplate"], descendants: true }], ngImport: i0, template: `
12263
+ <div class="flex flex-col w-full h-full bg-white rounded-md border border-outline-gray-2 shadow-sm overflow-hidden">
12264
+
12265
+ <!-- Top Header Area -->
12266
+ <div class="flex items-start justify-between px-4 py-4 border-b border-outline-gray-2 bg-surface-base">
12267
+ <div class="flex flex-col gap-1">
12268
+ <div class="flex items-center gap-2">
12269
+ <h2 class="text-[17px] font-semibold text-ink-gray-9">{{ title() }}</h2>
12270
+ @if (count() !== undefined) {
12271
+ <span class="text-[15px] font-medium text-ink-gray-5">({{ count() }})</span>
12272
+ }
12273
+ @if (infoLink()) {
12274
+ <a [href]="infoLink()" class="text-xs font-medium text-blue-600 hover:underline ml-2 cursor-pointer">Información</a>
12275
+ }
12276
+ </div>
12277
+ @if (subtitle()) {
12278
+ <p class="text-[13px] text-ink-gray-6">{{ subtitle() }}</p>
12279
+ }
12280
+ </div>
12281
+
12282
+ <div class="flex items-center gap-2">
12283
+ <!-- External Actions (Refresh, Create, etc) -->
12284
+ <ng-content select="[header-actions]"></ng-content>
12285
+ </div>
12286
+ </div>
12287
+
12288
+ <!-- Toolbar Area -->
12289
+ <div class="flex items-center justify-between px-4 py-2 border-b border-outline-gray-1 bg-surface-gray-1 min-h-[52px]">
12290
+
12291
+ <!-- Search -->
12292
+ <div class="w-72">
12293
+ <neural-text-input
12294
+ [placeholder]="searchPlaceholder()"
12295
+ icon="lucide-search"
12296
+ size="sm"
12297
+ (valueModelChange)="onSearch.emit($event)"
12298
+ ></neural-text-input>
12299
+ </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
+ </div>
12364
+
12365
+ <!-- Table Content -->
12366
+ <div class="flex-1 overflow-x-auto min-h-[300px] relative">
12367
+ <table class="w-full text-left border-collapse">
12368
+ <thead>
12369
+ <tr class="border-b border-outline-gray-2 bg-white">
12370
+ @for (col of visibleColumns(); track col.key) {
12371
+ <th
12372
+ class="px-4 py-3 text-[13px] font-semibold text-ink-gray-7 truncate border-r border-outline-gray-2 last:border-r-0"
12373
+ [style.width]="col.width || 'auto'"
12374
+ >
12375
+ <div class="flex items-center justify-between group cursor-pointer hover:text-ink-gray-9" (click)="col.sortable ? onSort(col.key) : null">
12376
+ <span class="truncate">{{ col.label }}</span>
12377
+ @if (col.sortable) {
12378
+ <i class="lucide-caret-down size-3.5 text-ink-gray-4 opacity-0 group-hover:opacity-100 transition-opacity"></i>
12379
+ }
12380
+ </div>
12381
+ </th>
12382
+ }
12383
+ </tr>
12384
+ </thead>
12385
+ <tbody>
12386
+ @if (rows().length > 0) {
12387
+ @for (row of rows(); track row[rowKey()]) {
12388
+ <tr class="border-b border-outline-gray-1 hover:bg-surface-gray-1 transition-colors group">
12389
+ @for (col of visibleColumns(); track col.key) {
12390
+ <td
12391
+ class="px-4 py-3 text-[13.5px] text-ink-gray-9"
12392
+ [class.truncate]="!wrapLines()"
12393
+ [class.whitespace-nowrap]="!wrapLines()"
12394
+ >
12395
+ <!-- Render slot or direct value -->
12396
+ <ng-container *ngTemplateOutlet="cellTemplate || defaultCell; context: { $implicit: row, column: col }"></ng-container>
12397
+ <ng-template #defaultCell>{{ row[col.key] }}</ng-template>
12398
+ </td>
12399
+ }
12400
+ </tr>
12401
+ }
12402
+ } @else {
12403
+ <tr>
12404
+ <td [attr.colspan]="visibleColumns().length" class="h-64 border-0 p-0">
12405
+ <div class="absolute inset-0 flex flex-col items-center justify-center p-6 text-center">
12406
+ <h3 class="text-[15px] font-bold text-ink-gray-8 mb-1">{{ emptyStateTitle() }}</h3>
12407
+ <p class="text-[13px] text-ink-gray-5 mb-4 max-w-md">{{ emptyStateDesc() }}</p>
12408
+ <ng-content select="[empty-actions]"></ng-content>
12409
+ </div>
12410
+ </td>
12411
+ </tr>
12412
+ }
12413
+ </tbody>
12414
+ </table>
12415
+ </div>
12416
+ </div>
12417
+ `, 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
+ }
12419
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralDataTableComponent, decorators: [{
12420
+ type: Component,
12421
+ args: [{
12422
+ selector: 'neural-data-table',
12423
+ standalone: true,
12424
+ imports: [
12425
+ CommonModule,
12426
+ NeuralButtonComponent,
12427
+ NeuralTextInputComponent,
12428
+ NeuralDialogComponent,
12429
+ NeuralSwitchComponent,
12430
+ NeuralCheckboxComponent
12431
+ ],
12432
+ template: `
12433
+ <div class="flex flex-col w-full h-full bg-white rounded-md border border-outline-gray-2 shadow-sm overflow-hidden">
12434
+
12435
+ <!-- Top Header Area -->
12436
+ <div class="flex items-start justify-between px-4 py-4 border-b border-outline-gray-2 bg-surface-base">
12437
+ <div class="flex flex-col gap-1">
12438
+ <div class="flex items-center gap-2">
12439
+ <h2 class="text-[17px] font-semibold text-ink-gray-9">{{ title() }}</h2>
12440
+ @if (count() !== undefined) {
12441
+ <span class="text-[15px] font-medium text-ink-gray-5">({{ count() }})</span>
12442
+ }
12443
+ @if (infoLink()) {
12444
+ <a [href]="infoLink()" class="text-xs font-medium text-blue-600 hover:underline ml-2 cursor-pointer">Información</a>
12445
+ }
12446
+ </div>
12447
+ @if (subtitle()) {
12448
+ <p class="text-[13px] text-ink-gray-6">{{ subtitle() }}</p>
12449
+ }
12450
+ </div>
12451
+
12452
+ <div class="flex items-center gap-2">
12453
+ <!-- External Actions (Refresh, Create, etc) -->
12454
+ <ng-content select="[header-actions]"></ng-content>
12455
+ </div>
12456
+ </div>
12457
+
12458
+ <!-- Toolbar Area -->
12459
+ <div class="flex items-center justify-between px-4 py-2 border-b border-outline-gray-1 bg-surface-gray-1 min-h-[52px]">
12460
+
12461
+ <!-- Search -->
12462
+ <div class="w-72">
12463
+ <neural-text-input
12464
+ [placeholder]="searchPlaceholder()"
12465
+ icon="lucide-search"
12466
+ size="sm"
12467
+ (valueModelChange)="onSearch.emit($event)"
12468
+ ></neural-text-input>
12469
+ </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
+ </div>
12534
+
12535
+ <!-- Table Content -->
12536
+ <div class="flex-1 overflow-x-auto min-h-[300px] relative">
12537
+ <table class="w-full text-left border-collapse">
12538
+ <thead>
12539
+ <tr class="border-b border-outline-gray-2 bg-white">
12540
+ @for (col of visibleColumns(); track col.key) {
12541
+ <th
12542
+ class="px-4 py-3 text-[13px] font-semibold text-ink-gray-7 truncate border-r border-outline-gray-2 last:border-r-0"
12543
+ [style.width]="col.width || 'auto'"
12544
+ >
12545
+ <div class="flex items-center justify-between group cursor-pointer hover:text-ink-gray-9" (click)="col.sortable ? onSort(col.key) : null">
12546
+ <span class="truncate">{{ col.label }}</span>
12547
+ @if (col.sortable) {
12548
+ <i class="lucide-caret-down size-3.5 text-ink-gray-4 opacity-0 group-hover:opacity-100 transition-opacity"></i>
12549
+ }
12550
+ </div>
12551
+ </th>
12552
+ }
12553
+ </tr>
12554
+ </thead>
12555
+ <tbody>
12556
+ @if (rows().length > 0) {
12557
+ @for (row of rows(); track row[rowKey()]) {
12558
+ <tr class="border-b border-outline-gray-1 hover:bg-surface-gray-1 transition-colors group">
12559
+ @for (col of visibleColumns(); track col.key) {
12560
+ <td
12561
+ class="px-4 py-3 text-[13.5px] text-ink-gray-9"
12562
+ [class.truncate]="!wrapLines()"
12563
+ [class.whitespace-nowrap]="!wrapLines()"
12564
+ >
12565
+ <!-- Render slot or direct value -->
12566
+ <ng-container *ngTemplateOutlet="cellTemplate || defaultCell; context: { $implicit: row, column: col }"></ng-container>
12567
+ <ng-template #defaultCell>{{ row[col.key] }}</ng-template>
12568
+ </td>
12569
+ }
12570
+ </tr>
12571
+ }
12572
+ } @else {
12573
+ <tr>
12574
+ <td [attr.colspan]="visibleColumns().length" class="h-64 border-0 p-0">
12575
+ <div class="absolute inset-0 flex flex-col items-center justify-center p-6 text-center">
12576
+ <h3 class="text-[15px] font-bold text-ink-gray-8 mb-1">{{ emptyStateTitle() }}</h3>
12577
+ <p class="text-[13px] text-ink-gray-5 mb-4 max-w-md">{{ emptyStateDesc() }}</p>
12578
+ <ng-content select="[empty-actions]"></ng-content>
12579
+ </div>
12580
+ </td>
12581
+ </tr>
12582
+ }
12583
+ </tbody>
12584
+ </table>
12585
+ </div>
12586
+ </div>
12587
+ `
12588
+ }]
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 }] }], infoLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "infoLink", 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
+ type: Output
12591
+ }], onPageChange: [{
12592
+ type: Output
12593
+ }], sortChange: [{
12594
+ type: Output
12595
+ }], cellTemplate: [{
12596
+ type: ContentChild,
12597
+ args: ['cellTemplate']
12598
+ }] } });
12599
+
12203
12600
  class NeuralMenuComponent {
12204
12601
  options = input([], /* @ts-ignore */
12205
12602
  ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
@@ -12521,11 +12918,11 @@ class NeuralFilterBuilderComponent {
12521
12918
  });
12522
12919
  }
12523
12920
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralFilterBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
12524
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: NeuralFilterBuilderComponent, isStandalone: true, selector: "neural-filter-builder", inputs: { fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: true, transformFunction: null }, valueInputTemplate: { classPropertyName: "valueInputTemplate", publicName: "valueInputTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { apply: "apply" }, ngImport: i0, template: "<div class=\"bg-surface-base border border-outline-gray-2 rounded-[12px] shadow-[0_12px_40px_rgba(0,0,0,0.12)] w-full max-w-[540px] text-[13px] flex flex-col p-5\">\n \n <!-- Lista de Filtros -->\n <div class=\"flex flex-col gap-3\">\n @for (rule of rules(); track $index) {\n <div class=\"flex items-center gap-3 w-full\">\n \n <!-- Seleccionar Campo -->\n <select \n class=\"w-[170px] flex-shrink-0 bg-surface-gray-1 border-none focus:ring-1 focus:ring-outline-gray-4 rounded-md h-9 px-3 outline-none transition-colors text-ink-gray-8 text-[13px]\"\n [ngModel]=\"rule.field\" \n (ngModelChange)=\"updateRule($index, 'field', $event)\">\n <option value=\"\" disabled>Seleccione un campo...</option>\n @for (field of fields(); track field.key) {\n <option [value]=\"field.key\">{{ field.label }}</option>\n }\n </select>\n\n <!-- Seleccionar Operador -->\n <select \n class=\"w-[120px] flex-shrink-0 bg-surface-gray-1 border-none focus:ring-1 focus:ring-outline-gray-4 rounded-md h-9 px-3 outline-none transition-colors text-ink-gray-8 text-[13px]\"\n [ngModel]=\"rule.operator\" \n (ngModelChange)=\"updateRule($index, 'operator', $event)\">\n @for (op of operators; track op.value) {\n <option [value]=\"op.value\">{{ op.label }}</option>\n }\n </select>\n\n <!-- Valor: Template personalizado o input por defecto -->\n <div class=\"flex-1 relative h-9\">\n @if (valueInputTemplate()) {\n <ng-container *ngTemplateOutlet=\"valueInputTemplate()!; context: { $implicit: rule, index: $index, updateRule: updateRule.bind(this) }\"></ng-container>\n } @else {\n <input \n type=\"text\" \n class=\"w-full h-full bg-surface-gray-1 border-none focus:ring-1 focus:ring-outline-gray-4 rounded-md px-3 outline-none transition-colors text-ink-gray-8 text-[13px]\"\n placeholder=\"Valor...\"\n [ngModel]=\"rule.value\" \n (ngModelChange)=\"updateRule($index, 'value', $event)\">\n }\n </div>\n\n <!-- Bot\u00F3n para eliminar regla -->\n <button \n (click)=\"removeRule($index)\"\n class=\"h-9 w-6 flex items-center justify-center text-ink-gray-4 hover:text-ink-gray-8 transition-colors flex-shrink-0\"\n aria-label=\"Eliminar filtro\">\n <neural-icon name=\"lucide-x\" class=\"size-4 stroke-[3]\"></neural-icon>\n </button>\n </div>\n }\n </div>\n\n <hr class=\"border-outline-gray-2 my-5\">\n\n <!-- Acciones -->\n <div class=\"flex items-center justify-between\">\n <neural-button \n variant=\"ghost\" \n size=\"sm\"\n icon=\"lucide-plus\"\n [iconLeft]=\"true\"\n (clicked)=\"addRule()\">\n A\u00F1adir Filtro\n </neural-button>\n\n <div class=\"flex items-center gap-2\">\n <neural-button \n variant=\"subtle\" \n theme=\"gray\" \n size=\"md\"\n class=\"bg-surface-gray-1\"\n (click)=\"clearRules()\">\n Borrar Filtros\n </neural-button>\n \n <neural-button \n variant=\"solid\" \n theme=\"gray\"\n size=\"md\"\n (click)=\"applyFilters()\">\n Aplicar filtros\n </neural-button>\n </div>\n </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NeuralButtonComponent, selector: "neural-button", inputs: ["variant", "theme", "size", "type", "disabled", "loading", "icon", "iconLeft", "iconRight", "iconOnly"], outputs: ["clicked"] }, { kind: "component", type: NeuralIconComponent, selector: "neural-icon", inputs: ["name"] }] });
12921
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: NeuralFilterBuilderComponent, isStandalone: true, selector: "neural-filter-builder", inputs: { fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: true, transformFunction: null }, valueInputTemplate: { classPropertyName: "valueInputTemplate", publicName: "valueInputTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { apply: "apply" }, ngImport: i0, template: "<div class=\"bg-surface-base border border-outline-gray-2 rounded-[12px] shadow-[0_12px_40px_rgba(0,0,0,0.12)] w-full max-w-[540px] text-[13px] flex flex-col p-5\">\n \n <!-- Lista de Filtros -->\n <div class=\"flex flex-col gap-3\">\n @for (rule of rules(); track $index) {\n <div class=\"flex items-center gap-3 w-full\">\n \n <!-- Seleccionar Campo -->\n <select \n class=\"w-[170px] flex-shrink-0 bg-surface-gray-1 border-none focus:ring-1 focus:ring-outline-gray-4 rounded-md h-8 px-3 outline-none transition-colors text-ink-gray-8 text-[13px]\"\n [ngModel]=\"rule.field\" \n (ngModelChange)=\"updateRule($index, 'field', $event)\">\n <option value=\"\" disabled>Seleccione un campo...</option>\n @for (field of fields(); track field.key) {\n <option [value]=\"field.key\">{{ field.label }}</option>\n }\n </select>\n\n <!-- Seleccionar Operador -->\n <select \n class=\"w-[120px] flex-shrink-0 bg-surface-gray-1 border-none focus:ring-1 focus:ring-outline-gray-4 rounded-md h-8 px-3 outline-none transition-colors text-ink-gray-8 text-[13px]\"\n [ngModel]=\"rule.operator\" \n (ngModelChange)=\"updateRule($index, 'operator', $event)\">\n @for (op of operators; track op.value) {\n <option [value]=\"op.value\">{{ op.label }}</option>\n }\n </select>\n\n <!-- Valor: Template personalizado o input por defecto -->\n <div class=\"flex-1 relative h-8\">\n @if (valueInputTemplate()) {\n <ng-container *ngTemplateOutlet=\"valueInputTemplate()!; context: { $implicit: rule, index: $index, updateRule: updateRule.bind(this) }\"></ng-container>\n } @else {\n <input \n type=\"text\" \n class=\"w-full h-full bg-surface-gray-1 border-none focus:ring-1 focus:ring-outline-gray-4 rounded-md px-3 outline-none transition-colors text-ink-gray-8 text-[13px]\"\n placeholder=\"Valor...\"\n [ngModel]=\"rule.value\" \n (ngModelChange)=\"updateRule($index, 'value', $event)\">\n }\n </div>\n\n <!-- Bot\u00F3n para eliminar regla -->\n <button \n (click)=\"removeRule($index)\"\n class=\"h-8 w-6 flex items-center justify-center text-ink-gray-4 hover:text-ink-gray-8 transition-colors flex-shrink-0\"\n aria-label=\"Eliminar filtro\">\n <neural-icon name=\"lucide-x\" class=\"size-4 stroke-[3]\"></neural-icon>\n </button>\n </div>\n }\n </div>\n\n <hr class=\"border-outline-gray-2 my-5\">\n\n <!-- Acciones -->\n <div class=\"flex items-center justify-between\">\n <neural-button \n variant=\"ghost\" \n size=\"sm\"\n icon=\"lucide-plus\"\n [iconLeft]=\"true\"\n (clicked)=\"addRule()\">\n A\u00F1adir Filtro\n </neural-button>\n\n <div class=\"flex items-center gap-2\">\n <neural-button \n variant=\"subtle\" \n theme=\"gray\" \n size=\"sm\"\n class=\"bg-surface-gray-1\"\n (click)=\"clearRules()\">\n Borrar Filtros\n </neural-button>\n \n <neural-button \n variant=\"solid\" \n theme=\"gray\"\n size=\"sm\"\n (click)=\"applyFilters()\">\n Aplicar filtros\n </neural-button>\n </div>\n </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NeuralButtonComponent, selector: "neural-button", inputs: ["variant", "theme", "size", "type", "disabled", "loading", "icon", "iconLeft", "iconRight", "iconOnly"], outputs: ["clicked"] }, { kind: "component", type: NeuralIconComponent, selector: "neural-icon", inputs: ["name"] }] });
12525
12922
  }
12526
12923
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralFilterBuilderComponent, decorators: [{
12527
12924
  type: Component,
12528
- args: [{ selector: 'neural-filter-builder', standalone: true, imports: [CommonModule, FormsModule, NeuralButtonComponent, NeuralIconComponent], template: "<div class=\"bg-surface-base border border-outline-gray-2 rounded-[12px] shadow-[0_12px_40px_rgba(0,0,0,0.12)] w-full max-w-[540px] text-[13px] flex flex-col p-5\">\n \n <!-- Lista de Filtros -->\n <div class=\"flex flex-col gap-3\">\n @for (rule of rules(); track $index) {\n <div class=\"flex items-center gap-3 w-full\">\n \n <!-- Seleccionar Campo -->\n <select \n class=\"w-[170px] flex-shrink-0 bg-surface-gray-1 border-none focus:ring-1 focus:ring-outline-gray-4 rounded-md h-9 px-3 outline-none transition-colors text-ink-gray-8 text-[13px]\"\n [ngModel]=\"rule.field\" \n (ngModelChange)=\"updateRule($index, 'field', $event)\">\n <option value=\"\" disabled>Seleccione un campo...</option>\n @for (field of fields(); track field.key) {\n <option [value]=\"field.key\">{{ field.label }}</option>\n }\n </select>\n\n <!-- Seleccionar Operador -->\n <select \n class=\"w-[120px] flex-shrink-0 bg-surface-gray-1 border-none focus:ring-1 focus:ring-outline-gray-4 rounded-md h-9 px-3 outline-none transition-colors text-ink-gray-8 text-[13px]\"\n [ngModel]=\"rule.operator\" \n (ngModelChange)=\"updateRule($index, 'operator', $event)\">\n @for (op of operators; track op.value) {\n <option [value]=\"op.value\">{{ op.label }}</option>\n }\n </select>\n\n <!-- Valor: Template personalizado o input por defecto -->\n <div class=\"flex-1 relative h-9\">\n @if (valueInputTemplate()) {\n <ng-container *ngTemplateOutlet=\"valueInputTemplate()!; context: { $implicit: rule, index: $index, updateRule: updateRule.bind(this) }\"></ng-container>\n } @else {\n <input \n type=\"text\" \n class=\"w-full h-full bg-surface-gray-1 border-none focus:ring-1 focus:ring-outline-gray-4 rounded-md px-3 outline-none transition-colors text-ink-gray-8 text-[13px]\"\n placeholder=\"Valor...\"\n [ngModel]=\"rule.value\" \n (ngModelChange)=\"updateRule($index, 'value', $event)\">\n }\n </div>\n\n <!-- Bot\u00F3n para eliminar regla -->\n <button \n (click)=\"removeRule($index)\"\n class=\"h-9 w-6 flex items-center justify-center text-ink-gray-4 hover:text-ink-gray-8 transition-colors flex-shrink-0\"\n aria-label=\"Eliminar filtro\">\n <neural-icon name=\"lucide-x\" class=\"size-4 stroke-[3]\"></neural-icon>\n </button>\n </div>\n }\n </div>\n\n <hr class=\"border-outline-gray-2 my-5\">\n\n <!-- Acciones -->\n <div class=\"flex items-center justify-between\">\n <neural-button \n variant=\"ghost\" \n size=\"sm\"\n icon=\"lucide-plus\"\n [iconLeft]=\"true\"\n (clicked)=\"addRule()\">\n A\u00F1adir Filtro\n </neural-button>\n\n <div class=\"flex items-center gap-2\">\n <neural-button \n variant=\"subtle\" \n theme=\"gray\" \n size=\"md\"\n class=\"bg-surface-gray-1\"\n (click)=\"clearRules()\">\n Borrar Filtros\n </neural-button>\n \n <neural-button \n variant=\"solid\" \n theme=\"gray\"\n size=\"md\"\n (click)=\"applyFilters()\">\n Aplicar filtros\n </neural-button>\n </div>\n </div>\n</div>\n" }]
12925
+ args: [{ selector: 'neural-filter-builder', standalone: true, imports: [CommonModule, FormsModule, NeuralButtonComponent, NeuralIconComponent], template: "<div class=\"bg-surface-base border border-outline-gray-2 rounded-[12px] shadow-[0_12px_40px_rgba(0,0,0,0.12)] w-full max-w-[540px] text-[13px] flex flex-col p-5\">\n \n <!-- Lista de Filtros -->\n <div class=\"flex flex-col gap-3\">\n @for (rule of rules(); track $index) {\n <div class=\"flex items-center gap-3 w-full\">\n \n <!-- Seleccionar Campo -->\n <select \n class=\"w-[170px] flex-shrink-0 bg-surface-gray-1 border-none focus:ring-1 focus:ring-outline-gray-4 rounded-md h-8 px-3 outline-none transition-colors text-ink-gray-8 text-[13px]\"\n [ngModel]=\"rule.field\" \n (ngModelChange)=\"updateRule($index, 'field', $event)\">\n <option value=\"\" disabled>Seleccione un campo...</option>\n @for (field of fields(); track field.key) {\n <option [value]=\"field.key\">{{ field.label }}</option>\n }\n </select>\n\n <!-- Seleccionar Operador -->\n <select \n class=\"w-[120px] flex-shrink-0 bg-surface-gray-1 border-none focus:ring-1 focus:ring-outline-gray-4 rounded-md h-8 px-3 outline-none transition-colors text-ink-gray-8 text-[13px]\"\n [ngModel]=\"rule.operator\" \n (ngModelChange)=\"updateRule($index, 'operator', $event)\">\n @for (op of operators; track op.value) {\n <option [value]=\"op.value\">{{ op.label }}</option>\n }\n </select>\n\n <!-- Valor: Template personalizado o input por defecto -->\n <div class=\"flex-1 relative h-8\">\n @if (valueInputTemplate()) {\n <ng-container *ngTemplateOutlet=\"valueInputTemplate()!; context: { $implicit: rule, index: $index, updateRule: updateRule.bind(this) }\"></ng-container>\n } @else {\n <input \n type=\"text\" \n class=\"w-full h-full bg-surface-gray-1 border-none focus:ring-1 focus:ring-outline-gray-4 rounded-md px-3 outline-none transition-colors text-ink-gray-8 text-[13px]\"\n placeholder=\"Valor...\"\n [ngModel]=\"rule.value\" \n (ngModelChange)=\"updateRule($index, 'value', $event)\">\n }\n </div>\n\n <!-- Bot\u00F3n para eliminar regla -->\n <button \n (click)=\"removeRule($index)\"\n class=\"h-8 w-6 flex items-center justify-center text-ink-gray-4 hover:text-ink-gray-8 transition-colors flex-shrink-0\"\n aria-label=\"Eliminar filtro\">\n <neural-icon name=\"lucide-x\" class=\"size-4 stroke-[3]\"></neural-icon>\n </button>\n </div>\n }\n </div>\n\n <hr class=\"border-outline-gray-2 my-5\">\n\n <!-- Acciones -->\n <div class=\"flex items-center justify-between\">\n <neural-button \n variant=\"ghost\" \n size=\"sm\"\n icon=\"lucide-plus\"\n [iconLeft]=\"true\"\n (clicked)=\"addRule()\">\n A\u00F1adir Filtro\n </neural-button>\n\n <div class=\"flex items-center gap-2\">\n <neural-button \n variant=\"subtle\" \n theme=\"gray\" \n size=\"sm\"\n class=\"bg-surface-gray-1\"\n (click)=\"clearRules()\">\n Borrar Filtros\n </neural-button>\n \n <neural-button \n variant=\"solid\" \n theme=\"gray\"\n size=\"sm\"\n (click)=\"applyFilters()\">\n Aplicar filtros\n </neural-button>\n </div>\n </div>\n</div>\n" }]
12529
12926
  }], propDecorators: { fields: [{ type: i0.Input, args: [{ isSignal: true, alias: "fields", required: true }] }], valueInputTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueInputTemplate", required: false }] }], apply: [{ type: i0.Output, args: ["apply"] }] } });
12530
12927
 
12531
12928
  class NeuralPageHeaderComponent {
@@ -14172,6 +14569,221 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
14172
14569
  type: Output
14173
14570
  }] } });
14174
14571
 
14572
+ class NeuralSubGridComponent {
14573
+ columns = input([], /* @ts-ignore */
14574
+ ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
14575
+ rows = input([], /* @ts-ignore */
14576
+ ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
14577
+ rowKey = input.required(/* @ts-ignore */
14578
+ ...(ngDevMode ? [{ debugName: "rowKey" }] : /* istanbul ignore next */ []));
14579
+ onAddRow = new EventEmitter();
14580
+ cellTemplate;
14581
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralSubGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
14582
+ 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: `
14583
+ <div class="flex flex-col w-full">
14584
+ <!-- Top actions (Escanear código de barras, etc) -->
14585
+ <div class="mb-4">
14586
+ <ng-content select="[toolbar]"></ng-content>
14587
+ </div>
14588
+
14589
+ <!-- Table -->
14590
+ <div class="border border-outline-gray-2 rounded-md bg-white overflow-x-auto">
14591
+ <table class="w-full text-left border-collapse">
14592
+ <thead>
14593
+ <tr class="bg-surface-gray-1 border-b border-outline-gray-2">
14594
+ <th class="px-3 py-2 w-10 text-center">
14595
+ <neural-checkbox></neural-checkbox>
14596
+ </th>
14597
+ @for (col of columns(); track col.key) {
14598
+ <th
14599
+ class="px-3 py-2 text-[12px] font-semibold text-ink-gray-6 uppercase tracking-wider"
14600
+ [style.width]="col.width || 'auto'"
14601
+ [ngClass]="{
14602
+ 'text-left': !col.align || col.align === 'left',
14603
+ 'text-center': col.align === 'center',
14604
+ 'text-right': col.align === 'right'
14605
+ }"
14606
+ >
14607
+ {{ col.label }}
14608
+ </th>
14609
+ }
14610
+ <th class="px-3 py-2 w-12 text-center">
14611
+ <i class="lucide-settings size-4 text-ink-gray-4"></i>
14612
+ </th>
14613
+ </tr>
14614
+ </thead>
14615
+ <tbody>
14616
+ @if (rows().length > 0) {
14617
+ @for (row of rows(); track row[rowKey()]; let i = $index) {
14618
+ <tr class="border-b border-outline-gray-1 hover:bg-surface-gray-1 group">
14619
+ <td class="px-3 py-2 text-center">
14620
+ <neural-checkbox></neural-checkbox>
14621
+ </td>
14622
+
14623
+ @for (col of columns(); track col.key) {
14624
+ <td class="px-3 py-2">
14625
+ <ng-container *ngTemplateOutlet="cellTemplate || defaultCell; context: { $implicit: row, column: col, index: i }"></ng-container>
14626
+ <ng-template #defaultCell>
14627
+ <div
14628
+ class="text-[13px] text-ink-gray-8"
14629
+ [ngClass]="{
14630
+ 'text-left': !col.align || col.align === 'left',
14631
+ 'text-center': col.align === 'center',
14632
+ 'text-right': col.align === 'right'
14633
+ }"
14634
+ >
14635
+ {{ row[col.key] }}
14636
+ </div>
14637
+ </ng-template>
14638
+ </td>
14639
+ }
14640
+
14641
+ <td class="px-3 py-2 text-center">
14642
+ <button type="button" class="p-1 text-ink-gray-4 hover:text-ink-gray-7 rounded hover:bg-surface-gray-2">
14643
+ <i class="lucide-edit-2 size-3.5"></i>
14644
+ </button>
14645
+ </td>
14646
+ </tr>
14647
+ }
14648
+ } @else {
14649
+ <tr>
14650
+ <td [attr.colspan]="columns().length + 2" class="p-4 text-center text-[13px] text-ink-gray-5">
14651
+ No hay filas.
14652
+ </td>
14653
+ </tr>
14654
+ }
14655
+ </tbody>
14656
+ </table>
14657
+ </div>
14658
+
14659
+ <!-- Bottom Actions -->
14660
+ <div class="flex items-center justify-between mt-3">
14661
+ <div class="flex items-center gap-2">
14662
+ <neural-button variant="subtle" size="sm" (click)="onAddRow.emit()">Añadir fila</neural-button>
14663
+ <neural-button variant="ghost" size="sm">Agregar varios</neural-button>
14664
+ </div>
14665
+ <div class="flex items-center gap-2">
14666
+ <neural-button variant="ghost" size="sm">Descargar</neural-button>
14667
+ <neural-button variant="ghost" size="sm">Subir</neural-button>
14668
+ </div>
14669
+ </div>
14670
+
14671
+ <!-- Footer Area for Totals -->
14672
+ <div class="mt-6 border-t border-outline-gray-2 pt-4">
14673
+ <ng-content select="[footer-totals]"></ng-content>
14674
+ </div>
14675
+ </div>
14676
+ `, 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"] }] });
14677
+ }
14678
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralSubGridComponent, decorators: [{
14679
+ type: Component,
14680
+ args: [{
14681
+ selector: 'neural-sub-grid',
14682
+ standalone: true,
14683
+ imports: [CommonModule, NeuralButtonComponent, NeuralCheckboxComponent],
14684
+ template: `
14685
+ <div class="flex flex-col w-full">
14686
+ <!-- Top actions (Escanear código de barras, etc) -->
14687
+ <div class="mb-4">
14688
+ <ng-content select="[toolbar]"></ng-content>
14689
+ </div>
14690
+
14691
+ <!-- Table -->
14692
+ <div class="border border-outline-gray-2 rounded-md bg-white overflow-x-auto">
14693
+ <table class="w-full text-left border-collapse">
14694
+ <thead>
14695
+ <tr class="bg-surface-gray-1 border-b border-outline-gray-2">
14696
+ <th class="px-3 py-2 w-10 text-center">
14697
+ <neural-checkbox></neural-checkbox>
14698
+ </th>
14699
+ @for (col of columns(); track col.key) {
14700
+ <th
14701
+ class="px-3 py-2 text-[12px] font-semibold text-ink-gray-6 uppercase tracking-wider"
14702
+ [style.width]="col.width || 'auto'"
14703
+ [ngClass]="{
14704
+ 'text-left': !col.align || col.align === 'left',
14705
+ 'text-center': col.align === 'center',
14706
+ 'text-right': col.align === 'right'
14707
+ }"
14708
+ >
14709
+ {{ col.label }}
14710
+ </th>
14711
+ }
14712
+ <th class="px-3 py-2 w-12 text-center">
14713
+ <i class="lucide-settings size-4 text-ink-gray-4"></i>
14714
+ </th>
14715
+ </tr>
14716
+ </thead>
14717
+ <tbody>
14718
+ @if (rows().length > 0) {
14719
+ @for (row of rows(); track row[rowKey()]; let i = $index) {
14720
+ <tr class="border-b border-outline-gray-1 hover:bg-surface-gray-1 group">
14721
+ <td class="px-3 py-2 text-center">
14722
+ <neural-checkbox></neural-checkbox>
14723
+ </td>
14724
+
14725
+ @for (col of columns(); track col.key) {
14726
+ <td class="px-3 py-2">
14727
+ <ng-container *ngTemplateOutlet="cellTemplate || defaultCell; context: { $implicit: row, column: col, index: i }"></ng-container>
14728
+ <ng-template #defaultCell>
14729
+ <div
14730
+ class="text-[13px] text-ink-gray-8"
14731
+ [ngClass]="{
14732
+ 'text-left': !col.align || col.align === 'left',
14733
+ 'text-center': col.align === 'center',
14734
+ 'text-right': col.align === 'right'
14735
+ }"
14736
+ >
14737
+ {{ row[col.key] }}
14738
+ </div>
14739
+ </ng-template>
14740
+ </td>
14741
+ }
14742
+
14743
+ <td class="px-3 py-2 text-center">
14744
+ <button type="button" class="p-1 text-ink-gray-4 hover:text-ink-gray-7 rounded hover:bg-surface-gray-2">
14745
+ <i class="lucide-edit-2 size-3.5"></i>
14746
+ </button>
14747
+ </td>
14748
+ </tr>
14749
+ }
14750
+ } @else {
14751
+ <tr>
14752
+ <td [attr.colspan]="columns().length + 2" class="p-4 text-center text-[13px] text-ink-gray-5">
14753
+ No hay filas.
14754
+ </td>
14755
+ </tr>
14756
+ }
14757
+ </tbody>
14758
+ </table>
14759
+ </div>
14760
+
14761
+ <!-- Bottom Actions -->
14762
+ <div class="flex items-center justify-between mt-3">
14763
+ <div class="flex items-center gap-2">
14764
+ <neural-button variant="subtle" size="sm" (click)="onAddRow.emit()">Añadir fila</neural-button>
14765
+ <neural-button variant="ghost" size="sm">Agregar varios</neural-button>
14766
+ </div>
14767
+ <div class="flex items-center gap-2">
14768
+ <neural-button variant="ghost" size="sm">Descargar</neural-button>
14769
+ <neural-button variant="ghost" size="sm">Subir</neural-button>
14770
+ </div>
14771
+ </div>
14772
+
14773
+ <!-- Footer Area for Totals -->
14774
+ <div class="mt-6 border-t border-outline-gray-2 pt-4">
14775
+ <ng-content select="[footer-totals]"></ng-content>
14776
+ </div>
14777
+ </div>
14778
+ `
14779
+ }]
14780
+ }], 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: [{
14781
+ type: Output
14782
+ }], cellTemplate: [{
14783
+ type: ContentChild,
14784
+ args: ['cellTemplate']
14785
+ }] } });
14786
+
14175
14787
  class NeuralDesktopShellComponent {
14176
14788
  scroll = input(true, /* @ts-ignore */
14177
14789
  ...(ngDevMode ? [{ debugName: "scroll" }] : /* istanbul ignore next */ []));
@@ -14286,6 +14898,94 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
14286
14898
  }]
14287
14899
  }] });
14288
14900
 
14901
+ class NeuralEntityFormComponent {
14902
+ title = input.required(/* @ts-ignore */
14903
+ ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
14904
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralEntityFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
14905
+ 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: `
14906
+ <div class="flex flex-col w-full h-full min-h-screen bg-white">
14907
+
14908
+ <!-- Top Fixed Header -->
14909
+ <div class="sticky top-0 z-20 flex flex-col bg-white border-b border-outline-gray-2 shadow-sm">
14910
+
14911
+ <!-- Breadcrumbs & Title Bar -->
14912
+ <div class="flex items-center justify-between px-6 py-3">
14913
+ <div class="flex items-center gap-3">
14914
+ <!-- Breadcrumbs or Icon -->
14915
+ <ng-content select="[breadcrumb]"></ng-content>
14916
+
14917
+ <h1 class="text-lg font-bold text-ink-gray-9">{{ title() }}</h1>
14918
+
14919
+ <!-- Badges like 'No guardado' -->
14920
+ <ng-content select="[status-badge]"></ng-content>
14921
+ </div>
14922
+
14923
+ <div class="flex items-center gap-2">
14924
+ <!-- Header actions (Save, Cancel, Actions dropdown) -->
14925
+ <ng-content select="[header-actions]"></ng-content>
14926
+ </div>
14927
+ </div>
14928
+
14929
+ <!-- Tabs Bar -->
14930
+ <div class="px-6 -mb-px">
14931
+ <ng-content select="[tabs]"></ng-content>
14932
+ </div>
14933
+ </div>
14934
+
14935
+ <!-- Form Content Area -->
14936
+ <div class="flex-1 w-full max-w-6xl mx-auto px-6 py-8">
14937
+ <ng-content></ng-content>
14938
+ </div>
14939
+
14940
+ </div>
14941
+ `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] });
14942
+ }
14943
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralEntityFormComponent, decorators: [{
14944
+ type: Component,
14945
+ args: [{
14946
+ selector: 'neural-entity-form',
14947
+ standalone: true,
14948
+ imports: [CommonModule],
14949
+ template: `
14950
+ <div class="flex flex-col w-full h-full min-h-screen bg-white">
14951
+
14952
+ <!-- Top Fixed Header -->
14953
+ <div class="sticky top-0 z-20 flex flex-col bg-white border-b border-outline-gray-2 shadow-sm">
14954
+
14955
+ <!-- Breadcrumbs & Title Bar -->
14956
+ <div class="flex items-center justify-between px-6 py-3">
14957
+ <div class="flex items-center gap-3">
14958
+ <!-- Breadcrumbs or Icon -->
14959
+ <ng-content select="[breadcrumb]"></ng-content>
14960
+
14961
+ <h1 class="text-lg font-bold text-ink-gray-9">{{ title() }}</h1>
14962
+
14963
+ <!-- Badges like 'No guardado' -->
14964
+ <ng-content select="[status-badge]"></ng-content>
14965
+ </div>
14966
+
14967
+ <div class="flex items-center gap-2">
14968
+ <!-- Header actions (Save, Cancel, Actions dropdown) -->
14969
+ <ng-content select="[header-actions]"></ng-content>
14970
+ </div>
14971
+ </div>
14972
+
14973
+ <!-- Tabs Bar -->
14974
+ <div class="px-6 -mb-px">
14975
+ <ng-content select="[tabs]"></ng-content>
14976
+ </div>
14977
+ </div>
14978
+
14979
+ <!-- Form Content Area -->
14980
+ <div class="flex-1 w-full max-w-6xl mx-auto px-6 py-8">
14981
+ <ng-content></ng-content>
14982
+ </div>
14983
+
14984
+ </div>
14985
+ `
14986
+ }]
14987
+ }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }] } });
14988
+
14289
14989
  /*
14290
14990
  * Public API Surface of neural-ui-kit
14291
14991
  */
@@ -14295,5 +14995,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
14295
14995
  * Generated bundle index. Do not edit.
14296
14996
  */
14297
14997
 
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 };
14998
+ 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
14999
  //# sourceMappingURL=orbiq-neural-ui-kit.mjs.map