orbiq-neural-ui-kit 1.1.14 → 1.1.16

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.
Files changed (4) hide show
  1. package/fesm2022/orbiq-neural-ui-kit.mjs +152 -120
  2. package/fesm2022/orbiq-neural-ui-kit.mjs.map +1 -1
  3. package/package.json +1 -1
  4. package/types/orbiq-neural-ui-kit.d.ts +2 -1
package/fesm2022/orbiq-neural-ui-kit.mjs CHANGED
@@ -12412,6 +12412,8 @@ class NeuralDataTableComponent {
12412
12412
  ...(ngDevMode ? [{ debugName: "subtitle" }] : /* istanbul ignore next */ []));
12413
12413
  hasInfo = input(false, /* @ts-ignore */
12414
12414
  ...(ngDevMode ? [{ debugName: "hasInfo" }] : /* istanbul ignore next */ []));
12415
+ viewMode = input('list', /* @ts-ignore */
12416
+ ...(ngDevMode ? [{ debugName: "viewMode" }] : /* istanbul ignore next */ []));
12415
12417
  newLabel = input('Nuevo', /* @ts-ignore */
12416
12418
  ...(ngDevMode ? [{ debugName: "newLabel" }] : /* istanbul ignore next */ []));
12417
12419
  searchPlaceholder = input('Search', /* @ts-ignore */
@@ -12522,7 +12524,7 @@ class NeuralDataTableComponent {
12522
12524
  this.sortChange.emit(key);
12523
12525
  }
12524
12526
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralDataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
12525
- 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 }, hasInfo: { classPropertyName: "hasInfo", publicName: "hasInfo", isSignal: true, isRequired: false, transformFunction: null }, newLabel: { classPropertyName: "newLabel", publicName: "newLabel", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, allColumns: { classPropertyName: "allColumns", publicName: "allColumns", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, rowKey: { classPropertyName: "rowKey", publicName: "rowKey", isSignal: true, isRequired: true, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, 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 }, customActions: { classPropertyName: "customActions", publicName: "customActions", isSignal: true, isRequired: false, transformFunction: null }, maxVisibleActions: { classPropertyName: "maxVisibleActions", publicName: "maxVisibleActions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSearch: "onSearch", onPageChange: "onPageChange", sortChange: "sortChange", onInfoClick: "onInfoClick", onHelpClick: "onHelpClick", onRefreshClick: "onRefreshClick", onViewChange: "onViewChange", onFilterClick: "onFilterClick", onSortChangeClick: "onSortChangeClick", onSearchClick: "onSearchClick", onCustomActionClick: "onCustomActionClick", onNewClick: "onNewClick" }, host: { properties: { "attr.title": "null" } }, queries: [{ propertyName: "cellTemplate", first: true, predicate: ["cellTemplate"], descendants: true }], ngImport: i0, template: `
12527
+ 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 }, hasInfo: { classPropertyName: "hasInfo", publicName: "hasInfo", isSignal: true, isRequired: false, transformFunction: null }, viewMode: { classPropertyName: "viewMode", publicName: "viewMode", isSignal: true, isRequired: false, transformFunction: null }, newLabel: { classPropertyName: "newLabel", publicName: "newLabel", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, allColumns: { classPropertyName: "allColumns", publicName: "allColumns", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, rowKey: { classPropertyName: "rowKey", publicName: "rowKey", isSignal: true, isRequired: true, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, 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 }, customActions: { classPropertyName: "customActions", publicName: "customActions", isSignal: true, isRequired: false, transformFunction: null }, maxVisibleActions: { classPropertyName: "maxVisibleActions", publicName: "maxVisibleActions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSearch: "onSearch", onPageChange: "onPageChange", sortChange: "sortChange", onInfoClick: "onInfoClick", onHelpClick: "onHelpClick", onRefreshClick: "onRefreshClick", onViewChange: "onViewChange", onFilterClick: "onFilterClick", onSortChangeClick: "onSortChangeClick", onSearchClick: "onSearchClick", onCustomActionClick: "onCustomActionClick", onNewClick: "onNewClick" }, host: { properties: { "attr.title": "null" } }, queries: [{ propertyName: "cellTemplate", first: true, predicate: ["cellTemplate"], descendants: true }], ngImport: i0, template: `
12526
12528
  <div class="flex flex-col w-full h-full bg-white rounded-md border border-outline-gray-2 shadow-sm overflow-hidden">
12527
12529
 
12528
12530
  <!-- Top Header Area -->
@@ -12533,76 +12535,84 @@ class NeuralDataTableComponent {
12533
12535
  </div>
12534
12536
 
12535
12537
  <!-- Right: Actions Toolbar -->
12536
- <div class="flex items-center gap-1">
12537
-
12538
- <!-- Built-in Actions Group (Clean, no background) -->
12539
- <div class="flex items-center gap-0.5">
12540
- <button class="flex items-center justify-center size-8 rounded-md hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors" title="Vista" (click)="onViewChange.emit('report')">
12541
- <i class="lucide-list size-[18px]" style="stroke-width: 1.5px;"></i>
12542
- </button>
12543
- <button class="flex items-center justify-center size-8 rounded-md hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors" title="Filtrar" (click)="onFilterClick.emit()">
12544
- <i class="lucide-filter size-[18px]" style="stroke-width: 1.5px;"></i>
12545
- </button>
12546
- <button class="flex items-center justify-center size-8 rounded-md hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors" title="Orden" (click)="onSortChangeClick.emit()">
12547
- <i class="lucide-arrow-up-down size-[18px]" style="stroke-width: 1.5px;"></i>
12548
- </button>
12549
- </div>
12550
-
12551
- <div class="w-px h-4 bg-outline-gray-2 mx-1.5"></div>
12552
-
12553
- <div class="flex items-center gap-0.5">
12554
- <!-- Search Icon -->
12555
- <button class="flex items-center justify-center size-8 rounded-md hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors" title="Buscar" (click)="onSearchClick.emit()">
12556
- <i class="lucide-search size-[18px]" style="stroke-width: 1.5px;"></i>
12557
- </button>
12558
- <button class="flex items-center justify-center size-8 rounded-md hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors" title="Actualizar" (click)="onRefreshClick.emit()">
12559
- <i class="lucide-refresh-cw size-[18px]" style="stroke-width: 1.5px;"></i>
12560
- </button>
12538
+ @if (viewMode() === 'list') {
12539
+ <div class="flex items-center gap-1">
12561
12540
 
12562
- <!-- Dynamic Custom Actions -->
12563
- @for (action of visibleCustomActions(); track action.id) {
12564
- <button class="flex items-center justify-center size-8 rounded-md hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors disabled:opacity-50"
12565
- [title]="action.label"
12566
- [disabled]="action.disabled"
12567
- (click)="onCustomActionClick.emit(action.id)">
12568
- <i [class]="action.icon + ' size-[18px]'" style="stroke-width: 1.5px;"></i>
12541
+ <!-- Built-in Actions Group (Clean, no background) -->
12542
+ <div class="flex items-center gap-0.5">
12543
+ <button class="flex items-center justify-center size-8 rounded-md hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors" title="Vista" (click)="onViewChange.emit('report')">
12544
+ <i class="lucide-list size-[18px]" style="stroke-width: 1.5px;"></i>
12569
12545
  </button>
12570
- }
12546
+ <button class="flex items-center justify-center size-8 rounded-md hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors" title="Filtrar" (click)="onFilterClick.emit()">
12547
+ <i class="lucide-filter size-[18px]" style="stroke-width: 1.5px;"></i>
12548
+ </button>
12549
+ <button class="flex items-center justify-center size-8 rounded-md hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors" title="Orden" (click)="onSortChangeClick.emit()">
12550
+ <i class="lucide-arrow-up-down size-[18px]" style="stroke-width: 1.5px;"></i>
12551
+ </button>
12552
+ </div>
12571
12553
 
12572
- @if (overflowCustomActions().length > 0) {
12573
- <neural-dropdown [options]="overflowDropdownOptions()" (onSelect)="onCustomActionDropdownSelect($event)" [hasTriggerSlot]="true" placement="bottom-end">
12574
- <button trigger class="flex items-center justify-center size-8 rounded-md hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors" title="Más acciones">
12575
- <i class="lucide-more-horizontal size-[18px]" style="stroke-width: 1.5px;"></i>
12554
+ <div class="w-px h-4 bg-outline-gray-2 mx-1.5"></div>
12555
+
12556
+ <div class="flex items-center gap-0.5">
12557
+ <!-- Search Icon -->
12558
+ <button class="flex items-center justify-center size-8 rounded-md hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors" title="Buscar" (click)="onSearchClick.emit()">
12559
+ <i class="lucide-search size-[18px]" style="stroke-width: 1.5px;"></i>
12560
+ </button>
12561
+ <button class="flex items-center justify-center size-8 rounded-md hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors" title="Actualizar" (click)="onRefreshClick.emit()">
12562
+ <i class="lucide-refresh-cw size-[18px]" style="stroke-width: 1.5px;"></i>
12563
+ </button>
12564
+
12565
+ <!-- Dynamic Custom Actions -->
12566
+ @for (action of visibleCustomActions(); track action.id) {
12567
+ <button class="flex items-center justify-center size-8 rounded-md hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors disabled:opacity-50"
12568
+ [title]="action.label"
12569
+ [disabled]="action.disabled"
12570
+ (click)="onCustomActionClick.emit(action.id)">
12571
+ <i [class]="action.icon + ' size-[18px]'" style="stroke-width: 1.5px;"></i>
12576
12572
  </button>
12577
- </neural-dropdown>
12578
- }
12579
- </div>
12573
+ }
12574
+
12575
+ @if (overflowCustomActions().length > 0) {
12576
+ <neural-dropdown [options]="overflowDropdownOptions()" (onSelect)="onCustomActionDropdownSelect($event)" [hasTriggerSlot]="true" placement="bottom-end">
12577
+ <button trigger class="flex items-center justify-center size-8 rounded-md hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors" title="Más acciones">
12578
+ <i class="lucide-more-horizontal size-[18px]" style="stroke-width: 1.5px;"></i>
12579
+ </button>
12580
+ </neural-dropdown>
12581
+ }
12582
+ </div>
12580
12583
 
12581
- <div class="w-px h-4 bg-outline-gray-2 mx-1.5"></div>
12584
+ <div class="w-px h-4 bg-outline-gray-2 mx-1.5"></div>
12582
12585
 
12583
- <!-- Settings, Help and External Actions -->
12584
- <div class="flex items-center gap-0.5">
12585
- <button class="flex items-center justify-center size-8 rounded-md hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors" title="Configurar columnas" (click)="isPreferencesOpen.set(true)">
12586
- <i class="lucide-columns size-[18px]" style="stroke-width: 1.5px;"></i>
12587
- </button>
12588
- <button class="flex items-center justify-center size-8 rounded-md hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors" title="Ayuda / Información" (click)="onHelpClick.emit()">
12589
- <i class="lucide-help-circle size-[18px]" style="stroke-width: 1.5px;"></i>
12590
- </button>
12586
+ <!-- Settings, Help and External Actions -->
12587
+ <div class="flex items-center gap-0.5">
12588
+ <button class="flex items-center justify-center size-8 rounded-md hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors" title="Configurar columnas" (click)="isPreferencesOpen.set(true)">
12589
+ <i class="lucide-columns size-[18px]" style="stroke-width: 1.5px;"></i>
12590
+ </button>
12591
+ <button class="flex items-center justify-center size-8 rounded-md hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors" title="Ayuda / Información" (click)="onHelpClick.emit()">
12592
+ <i class="lucide-help-circle size-[18px]" style="stroke-width: 1.5px;"></i>
12593
+ </button>
12594
+
12595
+ <ng-content select="[header-actions]"></ng-content>
12596
+ </div>
12591
12597
 
12592
- <ng-content select="[header-actions]"></ng-content>
12598
+ <div class="ms-1.5">
12599
+ <!-- + Nuevo Button -->
12600
+ <neural-button variant="solid" theme="gray" size="sm" icon="lucide-plus" [iconLeft]="true" class="!px-3 !h-8 !text-[12px]" (click)="onNewClick.emit()">
12601
+ {{ newLabel() }}
12602
+ </neural-button>
12603
+ </div>
12593
12604
  </div>
12594
-
12595
- <div class="ms-1.5">
12596
- <!-- + Nuevo Button -->
12597
- <neural-button variant="solid" theme="gray" size="sm" icon="lucide-plus" [iconLeft]="true" class="!px-3 !h-8 !text-[12px]" (click)="onNewClick.emit()">
12598
- {{ newLabel() }}
12599
- </neural-button>
12605
+ }
12606
+ @if (viewMode() === 'form') {
12607
+ <div class="flex items-center gap-1">
12608
+ <ng-content select="[form-actions]"></ng-content>
12600
12609
  </div>
12601
- </div>
12610
+ }
12602
12611
  </div>
12603
12612
 
12604
- <!-- Table Content -->
12605
- <div class="flex-1 overflow-x-auto min-h-[300px] relative px-4 pb-4">
12613
+ @if (viewMode() === 'list') {
12614
+ <!-- Table Content -->
12615
+ <div class="flex-1 overflow-x-auto min-h-[300px] relative px-4 pb-4">
12606
12616
  <table class="w-full text-left border-separate" style="border-spacing: 0;">
12607
12617
  <thead>
12608
12618
  <tr>
@@ -12701,6 +12711,13 @@ class NeuralDataTableComponent {
12701
12711
  </div>
12702
12712
  </div>
12703
12713
  </div>
12714
+ }
12715
+
12716
+ @if (viewMode() === 'form') {
12717
+ <div class="flex-1 w-full h-full relative">
12718
+ <ng-content select="[form-view]"></ng-content>
12719
+ </div>
12720
+ }
12704
12721
 
12705
12722
  <!-- Dialog moved outside of the main flex flows -->
12706
12723
  <neural-dialog [openModel]="isPreferencesOpen()" (openModelChange)="isPreferencesOpen.set($event)" [hasTitleSlot]="true" [hasActionsSlot]="true" size="md">
@@ -12774,76 +12791,84 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
12774
12791
  </div>
12775
12792
 
12776
12793
  <!-- Right: Actions Toolbar -->
12777
- <div class="flex items-center gap-1">
12778
-
12779
- <!-- Built-in Actions Group (Clean, no background) -->
12780
- <div class="flex items-center gap-0.5">
12781
- <button class="flex items-center justify-center size-8 rounded-md hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors" title="Vista" (click)="onViewChange.emit('report')">
12782
- <i class="lucide-list size-[18px]" style="stroke-width: 1.5px;"></i>
12783
- </button>
12784
- <button class="flex items-center justify-center size-8 rounded-md hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors" title="Filtrar" (click)="onFilterClick.emit()">
12785
- <i class="lucide-filter size-[18px]" style="stroke-width: 1.5px;"></i>
12786
- </button>
12787
- <button class="flex items-center justify-center size-8 rounded-md hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors" title="Orden" (click)="onSortChangeClick.emit()">
12788
- <i class="lucide-arrow-up-down size-[18px]" style="stroke-width: 1.5px;"></i>
12789
- </button>
12790
- </div>
12791
-
12792
- <div class="w-px h-4 bg-outline-gray-2 mx-1.5"></div>
12793
-
12794
- <div class="flex items-center gap-0.5">
12795
- <!-- Search Icon -->
12796
- <button class="flex items-center justify-center size-8 rounded-md hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors" title="Buscar" (click)="onSearchClick.emit()">
12797
- <i class="lucide-search size-[18px]" style="stroke-width: 1.5px;"></i>
12798
- </button>
12799
- <button class="flex items-center justify-center size-8 rounded-md hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors" title="Actualizar" (click)="onRefreshClick.emit()">
12800
- <i class="lucide-refresh-cw size-[18px]" style="stroke-width: 1.5px;"></i>
12801
- </button>
12794
+ @if (viewMode() === 'list') {
12795
+ <div class="flex items-center gap-1">
12802
12796
 
12803
- <!-- Dynamic Custom Actions -->
12804
- @for (action of visibleCustomActions(); track action.id) {
12805
- <button class="flex items-center justify-center size-8 rounded-md hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors disabled:opacity-50"
12806
- [title]="action.label"
12807
- [disabled]="action.disabled"
12808
- (click)="onCustomActionClick.emit(action.id)">
12809
- <i [class]="action.icon + ' size-[18px]'" style="stroke-width: 1.5px;"></i>
12797
+ <!-- Built-in Actions Group (Clean, no background) -->
12798
+ <div class="flex items-center gap-0.5">
12799
+ <button class="flex items-center justify-center size-8 rounded-md hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors" title="Vista" (click)="onViewChange.emit('report')">
12800
+ <i class="lucide-list size-[18px]" style="stroke-width: 1.5px;"></i>
12810
12801
  </button>
12811
- }
12802
+ <button class="flex items-center justify-center size-8 rounded-md hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors" title="Filtrar" (click)="onFilterClick.emit()">
12803
+ <i class="lucide-filter size-[18px]" style="stroke-width: 1.5px;"></i>
12804
+ </button>
12805
+ <button class="flex items-center justify-center size-8 rounded-md hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors" title="Orden" (click)="onSortChangeClick.emit()">
12806
+ <i class="lucide-arrow-up-down size-[18px]" style="stroke-width: 1.5px;"></i>
12807
+ </button>
12808
+ </div>
12812
12809
 
12813
- @if (overflowCustomActions().length > 0) {
12814
- <neural-dropdown [options]="overflowDropdownOptions()" (onSelect)="onCustomActionDropdownSelect($event)" [hasTriggerSlot]="true" placement="bottom-end">
12815
- <button trigger class="flex items-center justify-center size-8 rounded-md hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors" title="Más acciones">
12816
- <i class="lucide-more-horizontal size-[18px]" style="stroke-width: 1.5px;"></i>
12810
+ <div class="w-px h-4 bg-outline-gray-2 mx-1.5"></div>
12811
+
12812
+ <div class="flex items-center gap-0.5">
12813
+ <!-- Search Icon -->
12814
+ <button class="flex items-center justify-center size-8 rounded-md hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors" title="Buscar" (click)="onSearchClick.emit()">
12815
+ <i class="lucide-search size-[18px]" style="stroke-width: 1.5px;"></i>
12816
+ </button>
12817
+ <button class="flex items-center justify-center size-8 rounded-md hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors" title="Actualizar" (click)="onRefreshClick.emit()">
12818
+ <i class="lucide-refresh-cw size-[18px]" style="stroke-width: 1.5px;"></i>
12819
+ </button>
12820
+
12821
+ <!-- Dynamic Custom Actions -->
12822
+ @for (action of visibleCustomActions(); track action.id) {
12823
+ <button class="flex items-center justify-center size-8 rounded-md hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors disabled:opacity-50"
12824
+ [title]="action.label"
12825
+ [disabled]="action.disabled"
12826
+ (click)="onCustomActionClick.emit(action.id)">
12827
+ <i [class]="action.icon + ' size-[18px]'" style="stroke-width: 1.5px;"></i>
12817
12828
  </button>
12818
- </neural-dropdown>
12819
- }
12820
- </div>
12829
+ }
12830
+
12831
+ @if (overflowCustomActions().length > 0) {
12832
+ <neural-dropdown [options]="overflowDropdownOptions()" (onSelect)="onCustomActionDropdownSelect($event)" [hasTriggerSlot]="true" placement="bottom-end">
12833
+ <button trigger class="flex items-center justify-center size-8 rounded-md hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors" title="Más acciones">
12834
+ <i class="lucide-more-horizontal size-[18px]" style="stroke-width: 1.5px;"></i>
12835
+ </button>
12836
+ </neural-dropdown>
12837
+ }
12838
+ </div>
12821
12839
 
12822
- <div class="w-px h-4 bg-outline-gray-2 mx-1.5"></div>
12840
+ <div class="w-px h-4 bg-outline-gray-2 mx-1.5"></div>
12823
12841
 
12824
- <!-- Settings, Help and External Actions -->
12825
- <div class="flex items-center gap-0.5">
12826
- <button class="flex items-center justify-center size-8 rounded-md hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors" title="Configurar columnas" (click)="isPreferencesOpen.set(true)">
12827
- <i class="lucide-columns size-[18px]" style="stroke-width: 1.5px;"></i>
12828
- </button>
12829
- <button class="flex items-center justify-center size-8 rounded-md hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors" title="Ayuda / Información" (click)="onHelpClick.emit()">
12830
- <i class="lucide-help-circle size-[18px]" style="stroke-width: 1.5px;"></i>
12831
- </button>
12842
+ <!-- Settings, Help and External Actions -->
12843
+ <div class="flex items-center gap-0.5">
12844
+ <button class="flex items-center justify-center size-8 rounded-md hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors" title="Configurar columnas" (click)="isPreferencesOpen.set(true)">
12845
+ <i class="lucide-columns size-[18px]" style="stroke-width: 1.5px;"></i>
12846
+ </button>
12847
+ <button class="flex items-center justify-center size-8 rounded-md hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors" title="Ayuda / Información" (click)="onHelpClick.emit()">
12848
+ <i class="lucide-help-circle size-[18px]" style="stroke-width: 1.5px;"></i>
12849
+ </button>
12850
+
12851
+ <ng-content select="[header-actions]"></ng-content>
12852
+ </div>
12832
12853
 
12833
- <ng-content select="[header-actions]"></ng-content>
12854
+ <div class="ms-1.5">
12855
+ <!-- + Nuevo Button -->
12856
+ <neural-button variant="solid" theme="gray" size="sm" icon="lucide-plus" [iconLeft]="true" class="!px-3 !h-8 !text-[12px]" (click)="onNewClick.emit()">
12857
+ {{ newLabel() }}
12858
+ </neural-button>
12859
+ </div>
12834
12860
  </div>
12835
-
12836
- <div class="ms-1.5">
12837
- <!-- + Nuevo Button -->
12838
- <neural-button variant="solid" theme="gray" size="sm" icon="lucide-plus" [iconLeft]="true" class="!px-3 !h-8 !text-[12px]" (click)="onNewClick.emit()">
12839
- {{ newLabel() }}
12840
- </neural-button>
12861
+ }
12862
+ @if (viewMode() === 'form') {
12863
+ <div class="flex items-center gap-1">
12864
+ <ng-content select="[form-actions]"></ng-content>
12841
12865
  </div>
12842
- </div>
12866
+ }
12843
12867
  </div>
12844
12868
 
12845
- <!-- Table Content -->
12846
- <div class="flex-1 overflow-x-auto min-h-[300px] relative px-4 pb-4">
12869
+ @if (viewMode() === 'list') {
12870
+ <!-- Table Content -->
12871
+ <div class="flex-1 overflow-x-auto min-h-[300px] relative px-4 pb-4">
12847
12872
  <table class="w-full text-left border-separate" style="border-spacing: 0;">
12848
12873
  <thead>
12849
12874
  <tr>
@@ -12942,6 +12967,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
12942
12967
  </div>
12943
12968
  </div>
12944
12969
  </div>
12970
+ }
12971
+
12972
+ @if (viewMode() === 'form') {
12973
+ <div class="flex-1 w-full h-full relative">
12974
+ <ng-content select="[form-view]"></ng-content>
12975
+ </div>
12976
+ }
12945
12977
 
12946
12978
  <!-- Dialog moved outside of the main flex flows -->
12947
12979
  <neural-dialog [openModel]="isPreferencesOpen()" (openModelChange)="isPreferencesOpen.set($event)" [hasTitleSlot]="true" [hasActionsSlot]="true" size="md">
@@ -12988,7 +13020,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
12988
13020
  </div>
12989
13021
  `
12990
13022
  }]
12991
- }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], hasInfo: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasInfo", required: false }] }], newLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "newLabel", 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 }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], 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 }] }], customActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "customActions", required: false }] }], maxVisibleActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisibleActions", required: false }] }], onSearch: [{
13023
+ }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], hasInfo: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasInfo", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], newLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "newLabel", 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 }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], 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 }] }], customActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "customActions", required: false }] }], maxVisibleActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisibleActions", required: false }] }], onSearch: [{
12992
13024
  type: Output
12993
13025
  }], onPageChange: [{
12994
13026
  type: Output