orbiq-neural-ui-kit 1.1.35 → 1.2.37

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 (3) hide show
  1. package/fesm2022/orbiq-neural-ui-kit.mjs +54 -74
  2. package/fesm2022/orbiq-neural-ui-kit.mjs.map +1 -1
  3. package/package.json +1 -1
package/fesm2022/orbiq-neural-ui-kit.mjs CHANGED
@@ -510,7 +510,9 @@ class NeuralButtonComponent {
510
510
  red: 'text-ink-red-7 bg-surface-base border border-outline-red-1 hover:border-outline-red-3 active:border-outline-red-3 active:bg-surface-red-3',
511
511
  };
512
512
  const ghostClasses = {
513
- gray: 'text-ink-gray-8 bg-transparent hover:bg-surface-gray-3 active:bg-surface-gray-4',
513
+ gray: this.iconOnly()
514
+ ? 'text-ink-gray-6 bg-transparent hover:bg-surface-gray-2 hover:text-ink-gray-9 active:bg-surface-gray-3'
515
+ : 'text-ink-gray-8 bg-transparent hover:bg-surface-gray-3 active:bg-surface-gray-4',
514
516
  blue: 'text-ink-blue-5 bg-transparent hover:bg-surface-blue-3 active:bg-surface-blue-4',
515
517
  green: 'text-ink-green-8 bg-transparent hover:bg-surface-green-3 active:bg-surface-green-4',
516
518
  red: 'text-ink-red-7 bg-transparent hover:bg-surface-red-3 active:bg-surface-red-4',
@@ -550,13 +552,13 @@ class NeuralButtonComponent {
550
552
  const stateClasses = this.disabled() ? disabledClasses : variantClasses;
551
553
  const sizeClasses = this.iconOnly()
552
554
  ? {
553
- xs: 'h-6 w-6 rounded-3',
554
- sm: 'h-7 w-7 rounded-4',
555
- md: 'h-10 w-10 rounded-4',
556
- lg: 'h-12 w-12 rounded-5',
557
- xl: 'h-14 w-14 rounded-5',
558
- '2xl': 'h-16 w-16 rounded-6',
559
- '3xl': 'h-20 w-20 rounded-7',
555
+ xs: 'h-6 w-6 rounded-md',
556
+ sm: 'h-7 w-7 rounded-md',
557
+ md: 'h-10 w-10 rounded-md',
558
+ lg: 'h-12 w-12 rounded-md',
559
+ xl: 'h-14 w-14 rounded-md',
560
+ '2xl': 'h-16 w-16 rounded-md',
561
+ '3xl': 'h-20 w-20 rounded-md',
560
562
  }[s]
561
563
  : {
562
564
  xs: 'h-6 text-xs px-1.5 rounded-3',
@@ -586,7 +588,7 @@ class NeuralButtonComponent {
586
588
  <button
587
589
  [type]="type()"
588
590
  [disabled]="isDisabled()"
589
- [class]="'w-full ' + computedClasses()"
591
+ [class]="(iconOnly() ? '' : 'w-full ') + computedClasses()"
590
592
  (click)="onClick($event)"
591
593
  [attr.aria-busy]="loading() ? 'true' : null"
592
594
  >
@@ -630,7 +632,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
630
632
  <button
631
633
  [type]="type()"
632
634
  [disabled]="isDisabled()"
633
- [class]="'w-full ' + computedClasses()"
635
+ [class]="(iconOnly() ? '' : 'w-full ') + computedClasses()"
634
636
  (click)="onClick($event)"
635
637
  [attr.aria-busy]="loading() ? 'true' : null"
636
638
  >
@@ -12799,47 +12801,40 @@ class NeuralDataTableComponent {
12799
12801
 
12800
12802
  <!-- Right: Actions Toolbar -->
12801
12803
  @if (viewMode() === 'list') {
12802
- <div class="flex items-center gap-1">
12804
+ <div class="flex items-center gap-2">
12803
12805
 
12804
12806
  <!-- Built-in Actions Group (Clean, no background) -->
12805
12807
  <div class="flex items-center gap-0.5">
12806
- <button class="flex items-center justify-center size-7 rounded-md hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors" title="Vista" (click)="onViewChange.emit('report')">
12807
- <i class="lucide-list size-4" style="stroke-width: 2px;"></i>
12808
- </button>
12809
- <button class="flex items-center justify-center size-7 rounded-md hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors" title="Filtrar" (click)="onFilterClick.emit()">
12810
- <i class="lucide-filter size-4" style="stroke-width: 2px;"></i>
12811
- </button>
12812
- <button class="flex items-center justify-center size-7 rounded-md hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors" title="Orden" (click)="onSortChangeClick.emit()">
12813
- <i class="lucide-arrow-up-down size-4" style="stroke-width: 2px;"></i>
12814
- </button>
12808
+ <neural-button variant="ghost" size="sm" icon="lucide-list" [iconOnly]="true" title="Vista" (clicked)="onViewChange.emit('report')"></neural-button>
12809
+ <neural-button variant="ghost" size="sm" icon="lucide-filter" [iconOnly]="true" title="Filtrar" (clicked)="onFilterClick.emit()"></neural-button>
12810
+ <neural-button variant="ghost" size="sm" icon="lucide-arrow-up-down" [iconOnly]="true" title="Orden" (clicked)="onSortChangeClick.emit()"></neural-button>
12815
12811
  </div>
12816
12812
 
12817
12813
  <div class="w-px h-4 bg-outline-gray-2 mx-1.5"></div>
12818
12814
 
12819
12815
  <div class="flex items-center gap-0.5">
12820
12816
  <!-- Search Icon -->
12821
- <button class="flex items-center justify-center size-7 rounded-md hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors" title="Buscar" (click)="onSearchClick.emit()">
12822
- <i class="lucide-search size-4" style="stroke-width: 2px;"></i>
12823
- </button>
12824
- <button class="flex items-center justify-center size-7 rounded-md hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors" title="Actualizar" (click)="onRefreshClick.emit()">
12825
- <i class="lucide-refresh-cw size-4" style="stroke-width: 2px;"></i>
12826
- </button>
12817
+ <neural-button variant="ghost" size="sm" icon="lucide-search" [iconOnly]="true" title="Buscar" (clicked)="onSearchClick.emit()"></neural-button>
12818
+ <neural-button variant="ghost" size="sm" icon="lucide-refresh-cw" [iconOnly]="true" title="Actualizar" (clicked)="onRefreshClick.emit()"></neural-button>
12827
12819
 
12828
12820
  <!-- Dynamic Custom Actions -->
12829
12821
  @for (action of visibleCustomActions(); track action.id) {
12830
- <button class="flex items-center justify-center size-7 rounded-md hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors disabled:opacity-50"
12831
- [title]="action.label"
12832
- [disabled]="action.disabled"
12833
- (click)="onCustomActionClick.emit(action.id)">
12834
- <i [class]="action.icon + ' size-4'" style="stroke-width: 2px;"></i>
12835
- </button>
12822
+ <neural-button
12823
+ variant="ghost"
12824
+ size="sm"
12825
+ [icon]="action.icon"
12826
+ [iconOnly]="true"
12827
+ [title]="action.label"
12828
+ [disabled]="action.disabled ?? false"
12829
+ (clicked)="onCustomActionClick.emit(action.id)">
12830
+ </neural-button>
12836
12831
  }
12837
12832
 
12838
12833
  @if (overflowCustomActions().length > 0) {
12839
12834
  <neural-dropdown [options]="overflowDropdownOptions()" (onSelect)="onCustomActionDropdownSelect($event)" [hasTriggerSlot]="true" placement="bottom-end">
12840
- <button trigger class="flex items-center justify-center size-7 rounded-md hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors" title="Más acciones">
12841
- <i class="lucide-more-horizontal size-4" style="stroke-width: 2px;"></i>
12842
- </button>
12835
+ <div trigger>
12836
+ <neural-button variant="ghost" size="sm" icon="lucide-more-horizontal" [iconOnly]="true" title="Más acciones"></neural-button>
12837
+ </div>
12843
12838
  </neural-dropdown>
12844
12839
  }
12845
12840
  </div>
@@ -12869,19 +12864,15 @@ class NeuralDataTableComponent {
12869
12864
 
12870
12865
  <!-- Settings, Help and External Actions -->
12871
12866
  <div class="flex items-center gap-0.5">
12872
- <button class="flex items-center justify-center size-7 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)">
12873
- <i class="lucide-columns size-4" style="stroke-width: 2px;"></i>
12874
- </button>
12875
- <button class="flex items-center justify-center size-7 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()">
12876
- <i class="lucide-help-circle size-4" style="stroke-width: 2px;"></i>
12877
- </button>
12867
+ <neural-button variant="ghost" size="sm" icon="lucide-columns" [iconOnly]="true" title="Configurar columnas" (clicked)="isPreferencesOpen.set(true)"></neural-button>
12868
+ <neural-button variant="ghost" size="sm" icon="lucide-help-circle" [iconOnly]="true" title="Ayuda / Información" (clicked)="onHelpClick.emit()"></neural-button>
12878
12869
 
12879
12870
  <ng-content select="[header-actions]"></ng-content>
12880
12871
  </div>
12881
12872
 
12882
12873
  <div class="ms-1.5">
12883
12874
  <!-- + Nuevo Button -->
12884
- <neural-button variant="solid" theme="gray" size="sm" icon="lucide-plus" [iconLeft]="true" class="!px-3 !h-7 !text-[11px]" (click)="onNewClick.emit()">
12875
+ <neural-button variant="solid" theme="gray" size="sm" icon="lucide-plus" [iconLeft]="true" class="!px-3 !h-7 !text-[11px]" (clicked)="onNewClick.emit()">
12885
12876
  {{ newLabel() }}
12886
12877
  </neural-button>
12887
12878
  </div>
@@ -13047,47 +13038,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
13047
13038
 
13048
13039
  <!-- Right: Actions Toolbar -->
13049
13040
  @if (viewMode() === 'list') {
13050
- <div class="flex items-center gap-1">
13041
+ <div class="flex items-center gap-2">
13051
13042
 
13052
13043
  <!-- Built-in Actions Group (Clean, no background) -->
13053
13044
  <div class="flex items-center gap-0.5">
13054
- <button class="flex items-center justify-center size-7 rounded-md hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors" title="Vista" (click)="onViewChange.emit('report')">
13055
- <i class="lucide-list size-4" style="stroke-width: 2px;"></i>
13056
- </button>
13057
- <button class="flex items-center justify-center size-7 rounded-md hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors" title="Filtrar" (click)="onFilterClick.emit()">
13058
- <i class="lucide-filter size-4" style="stroke-width: 2px;"></i>
13059
- </button>
13060
- <button class="flex items-center justify-center size-7 rounded-md hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors" title="Orden" (click)="onSortChangeClick.emit()">
13061
- <i class="lucide-arrow-up-down size-4" style="stroke-width: 2px;"></i>
13062
- </button>
13045
+ <neural-button variant="ghost" size="sm" icon="lucide-list" [iconOnly]="true" title="Vista" (clicked)="onViewChange.emit('report')"></neural-button>
13046
+ <neural-button variant="ghost" size="sm" icon="lucide-filter" [iconOnly]="true" title="Filtrar" (clicked)="onFilterClick.emit()"></neural-button>
13047
+ <neural-button variant="ghost" size="sm" icon="lucide-arrow-up-down" [iconOnly]="true" title="Orden" (clicked)="onSortChangeClick.emit()"></neural-button>
13063
13048
  </div>
13064
13049
 
13065
13050
  <div class="w-px h-4 bg-outline-gray-2 mx-1.5"></div>
13066
13051
 
13067
13052
  <div class="flex items-center gap-0.5">
13068
13053
  <!-- Search Icon -->
13069
- <button class="flex items-center justify-center size-7 rounded-md hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors" title="Buscar" (click)="onSearchClick.emit()">
13070
- <i class="lucide-search size-4" style="stroke-width: 2px;"></i>
13071
- </button>
13072
- <button class="flex items-center justify-center size-7 rounded-md hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors" title="Actualizar" (click)="onRefreshClick.emit()">
13073
- <i class="lucide-refresh-cw size-4" style="stroke-width: 2px;"></i>
13074
- </button>
13054
+ <neural-button variant="ghost" size="sm" icon="lucide-search" [iconOnly]="true" title="Buscar" (clicked)="onSearchClick.emit()"></neural-button>
13055
+ <neural-button variant="ghost" size="sm" icon="lucide-refresh-cw" [iconOnly]="true" title="Actualizar" (clicked)="onRefreshClick.emit()"></neural-button>
13075
13056
 
13076
13057
  <!-- Dynamic Custom Actions -->
13077
13058
  @for (action of visibleCustomActions(); track action.id) {
13078
- <button class="flex items-center justify-center size-7 rounded-md hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors disabled:opacity-50"
13079
- [title]="action.label"
13080
- [disabled]="action.disabled"
13081
- (click)="onCustomActionClick.emit(action.id)">
13082
- <i [class]="action.icon + ' size-4'" style="stroke-width: 2px;"></i>
13083
- </button>
13059
+ <neural-button
13060
+ variant="ghost"
13061
+ size="sm"
13062
+ [icon]="action.icon"
13063
+ [iconOnly]="true"
13064
+ [title]="action.label"
13065
+ [disabled]="action.disabled ?? false"
13066
+ (clicked)="onCustomActionClick.emit(action.id)">
13067
+ </neural-button>
13084
13068
  }
13085
13069
 
13086
13070
  @if (overflowCustomActions().length > 0) {
13087
13071
  <neural-dropdown [options]="overflowDropdownOptions()" (onSelect)="onCustomActionDropdownSelect($event)" [hasTriggerSlot]="true" placement="bottom-end">
13088
- <button trigger class="flex items-center justify-center size-7 rounded-md hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors" title="Más acciones">
13089
- <i class="lucide-more-horizontal size-4" style="stroke-width: 2px;"></i>
13090
- </button>
13072
+ <div trigger>
13073
+ <neural-button variant="ghost" size="sm" icon="lucide-more-horizontal" [iconOnly]="true" title="Más acciones"></neural-button>
13074
+ </div>
13091
13075
  </neural-dropdown>
13092
13076
  }
13093
13077
  </div>
@@ -13117,19 +13101,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
13117
13101
 
13118
13102
  <!-- Settings, Help and External Actions -->
13119
13103
  <div class="flex items-center gap-0.5">
13120
- <button class="flex items-center justify-center size-7 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)">
13121
- <i class="lucide-columns size-4" style="stroke-width: 2px;"></i>
13122
- </button>
13123
- <button class="flex items-center justify-center size-7 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()">
13124
- <i class="lucide-help-circle size-4" style="stroke-width: 2px;"></i>
13125
- </button>
13104
+ <neural-button variant="ghost" size="sm" icon="lucide-columns" [iconOnly]="true" title="Configurar columnas" (clicked)="isPreferencesOpen.set(true)"></neural-button>
13105
+ <neural-button variant="ghost" size="sm" icon="lucide-help-circle" [iconOnly]="true" title="Ayuda / Información" (clicked)="onHelpClick.emit()"></neural-button>
13126
13106
 
13127
13107
  <ng-content select="[header-actions]"></ng-content>
13128
13108
  </div>
13129
13109
 
13130
13110
  <div class="ms-1.5">
13131
13111
  <!-- + Nuevo Button -->
13132
- <neural-button variant="solid" theme="gray" size="sm" icon="lucide-plus" [iconLeft]="true" class="!px-3 !h-7 !text-[11px]" (click)="onNewClick.emit()">
13112
+ <neural-button variant="solid" theme="gray" size="sm" icon="lucide-plus" [iconLeft]="true" class="!px-3 !h-7 !text-[11px]" (clicked)="onNewClick.emit()">
13133
13113
  {{ newLabel() }}
13134
13114
  </neural-button>
13135
13115
  </div>