orbiq-neural-ui-kit 1.1.13 → 1.1.15
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.
|
@@ -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,96 +12535,103 @@ class NeuralDataTableComponent {
|
|
|
12533
12535
|
</div>
|
|
12534
12536
|
|
|
12535
12537
|
<!-- Right: Actions Toolbar -->
|
|
12536
|
-
|
|
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
|
-
<!--
|
|
12563
|
-
|
|
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
|
|
12565
|
-
|
|
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>
|
|
12553
|
+
|
|
12554
|
+
<div class="w-px h-4 bg-outline-gray-2 mx-1.5"></div>
|
|
12571
12555
|
|
|
12572
|
-
|
|
12573
|
-
|
|
12574
|
-
|
|
12575
|
-
|
|
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
|
-
|
|
12578
|
-
|
|
12579
|
-
|
|
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
|
-
|
|
12584
|
+
<div class="w-px h-4 bg-outline-gray-2 mx-1.5"></div>
|
|
12582
12585
|
|
|
12583
|
-
|
|
12584
|
-
|
|
12585
|
-
|
|
12586
|
-
|
|
12587
|
-
|
|
12588
|
-
|
|
12589
|
-
|
|
12590
|
-
|
|
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
|
-
<
|
|
12593
|
-
|
|
12594
|
-
|
|
12595
|
-
|
|
12596
|
-
|
|
12597
|
-
|
|
12598
|
-
{{ newLabel() }}
|
|
12599
|
-
</neural-button>
|
|
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>
|
|
12600
12604
|
</div>
|
|
12601
|
-
|
|
12605
|
+
}
|
|
12602
12606
|
</div>
|
|
12603
12607
|
|
|
12604
|
-
|
|
12605
|
-
|
|
12608
|
+
@if (viewMode() === 'list') {
|
|
12609
|
+
<!-- Table Content -->
|
|
12610
|
+
<div class="flex-1 overflow-x-auto min-h-[300px] relative px-4 pb-4">
|
|
12606
12611
|
<table class="w-full text-left border-separate" style="border-spacing: 0;">
|
|
12607
12612
|
<thead>
|
|
12608
12613
|
<tr>
|
|
12609
12614
|
@if (selectable()) {
|
|
12610
|
-
<th
|
|
12611
|
-
|
|
12615
|
+
<th
|
|
12616
|
+
class="px-4 py-1.5 align-middle w-12 bg-surface-gray-1 border-0"
|
|
12617
|
+
style="border-top-left-radius: 8px; border-bottom-left-radius: 8px;"
|
|
12618
|
+
>
|
|
12619
|
+
<div class="flex items-center justify-center h-full w-full">
|
|
12612
12620
|
<neural-checkbox size="sm" [checkedModel]="isAllSelected()" (checkedModelChange)="toggleAll($event)"></neural-checkbox>
|
|
12613
12621
|
</div>
|
|
12614
12622
|
</th>
|
|
12615
12623
|
}
|
|
12616
12624
|
@for (col of visibleColumns(); track col.key; let first = $first; let last = $last) {
|
|
12617
|
-
<th
|
|
12618
|
-
|
|
12619
|
-
|
|
12620
|
-
|
|
12621
|
-
|
|
12622
|
-
|
|
12623
|
-
|
|
12624
|
-
|
|
12625
|
-
|
|
12625
|
+
<th
|
|
12626
|
+
class="px-4 py-1.5 text-[13px] font-medium text-ink-gray-6 bg-surface-gray-1 border-0 align-middle hover:text-ink-gray-9 cursor-pointer transition-colors"
|
|
12627
|
+
[style.width]="col.width || 'auto'"
|
|
12628
|
+
[style.border-top-left-radius]="!selectable() && first ? '8px' : '0'"
|
|
12629
|
+
[style.border-bottom-left-radius]="!selectable() && first ? '8px' : '0'"
|
|
12630
|
+
[style.border-top-right-radius]="last ? '8px' : '0'"
|
|
12631
|
+
[style.border-bottom-right-radius]="last ? '8px' : '0'"
|
|
12632
|
+
(click)="col.sortable ? onSort(col.key) : null"
|
|
12633
|
+
>
|
|
12634
|
+
<div class="flex items-center justify-between group">
|
|
12626
12635
|
<span class="truncate">{{ col.label }}</span>
|
|
12627
12636
|
@if (col.sortable) {
|
|
12628
12637
|
<i class="lucide-caret-down size-3.5 text-ink-gray-5 opacity-0 group-hover:opacity-100 transition-opacity"></i>
|
|
@@ -12697,6 +12706,13 @@ class NeuralDataTableComponent {
|
|
|
12697
12706
|
</div>
|
|
12698
12707
|
</div>
|
|
12699
12708
|
</div>
|
|
12709
|
+
}
|
|
12710
|
+
|
|
12711
|
+
@if (viewMode() === 'form') {
|
|
12712
|
+
<div class="flex-1 w-full h-full relative">
|
|
12713
|
+
<ng-content select="[form-view]"></ng-content>
|
|
12714
|
+
</div>
|
|
12715
|
+
}
|
|
12700
12716
|
|
|
12701
12717
|
<!-- Dialog moved outside of the main flex flows -->
|
|
12702
12718
|
<neural-dialog [openModel]="isPreferencesOpen()" (openModelChange)="isPreferencesOpen.set($event)" [hasTitleSlot]="true" [hasActionsSlot]="true" size="md">
|
|
@@ -12741,7 +12757,7 @@ class NeuralDataTableComponent {
|
|
|
12741
12757
|
</div>
|
|
12742
12758
|
</neural-dialog>
|
|
12743
12759
|
</div>
|
|
12744
|
-
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.
|
|
12760
|
+
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NeuralButtonComponent, selector: "neural-button", inputs: ["variant", "theme", "size", "type", "disabled", "loading", "icon", "iconLeft", "iconRight", "iconOnly"], outputs: ["clicked"] }, { kind: "component", type: NeuralDialogComponent, selector: "neural-dialog", inputs: ["openModel", "title", "message", "icon", "size", "position", "paddingTop", "actions", "dismissible", "showCloseButton", "bare", "hasTitleSlot", "hasActionsSlot", "hasDefaultSlot"], outputs: ["openModelChange"] }, { kind: "component", type: NeuralSwitchComponent, selector: "neural-switch", inputs: ["valueModel", "size", "padded", "disabled", "required", "controlPosition", "icon", "label", "description", "error", "id", "hasLabelSlot", "hasDescriptionSlot"], outputs: ["valueModelChange"] }, { kind: "component", type: NeuralCheckboxComponent, selector: "neural-checkbox", inputs: ["checkedModel", "size", "padded", "indeterminate", "disabled", "required", "label", "description", "error", "id", "hasLabelSlot", "hasDescriptionSlot"], outputs: ["checkedModelChange"] }, { kind: "component", type: NeuralDropdownComponent, selector: "neural-dropdown", inputs: ["options", "side", "align", "offset", "buttonLabel", "hasTriggerSlot"] }] });
|
|
12745
12761
|
}
|
|
12746
12762
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralDataTableComponent, decorators: [{
|
|
12747
12763
|
type: Component,
|
|
@@ -12770,96 +12786,103 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
|
|
|
12770
12786
|
</div>
|
|
12771
12787
|
|
|
12772
12788
|
<!-- Right: Actions Toolbar -->
|
|
12773
|
-
|
|
12774
|
-
|
|
12775
|
-
<!-- Built-in Actions Group (Clean, no background) -->
|
|
12776
|
-
<div class="flex items-center gap-0.5">
|
|
12777
|
-
<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')">
|
|
12778
|
-
<i class="lucide-list size-[18px]" style="stroke-width: 1.5px;"></i>
|
|
12779
|
-
</button>
|
|
12780
|
-
<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()">
|
|
12781
|
-
<i class="lucide-filter size-[18px]" style="stroke-width: 1.5px;"></i>
|
|
12782
|
-
</button>
|
|
12783
|
-
<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()">
|
|
12784
|
-
<i class="lucide-arrow-up-down size-[18px]" style="stroke-width: 1.5px;"></i>
|
|
12785
|
-
</button>
|
|
12786
|
-
</div>
|
|
12787
|
-
|
|
12788
|
-
<div class="w-px h-4 bg-outline-gray-2 mx-1.5"></div>
|
|
12789
|
-
|
|
12790
|
-
<div class="flex items-center gap-0.5">
|
|
12791
|
-
<!-- Search Icon -->
|
|
12792
|
-
<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()">
|
|
12793
|
-
<i class="lucide-search size-[18px]" style="stroke-width: 1.5px;"></i>
|
|
12794
|
-
</button>
|
|
12795
|
-
<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()">
|
|
12796
|
-
<i class="lucide-refresh-cw size-[18px]" style="stroke-width: 1.5px;"></i>
|
|
12797
|
-
</button>
|
|
12789
|
+
@if (viewMode() === 'list') {
|
|
12790
|
+
<div class="flex items-center gap-1">
|
|
12798
12791
|
|
|
12799
|
-
<!--
|
|
12800
|
-
|
|
12801
|
-
<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
|
|
12802
|
-
|
|
12803
|
-
[disabled]="action.disabled"
|
|
12804
|
-
(click)="onCustomActionClick.emit(action.id)">
|
|
12805
|
-
<i [class]="action.icon + ' size-[18px]'" style="stroke-width: 1.5px;"></i>
|
|
12792
|
+
<!-- Built-in Actions Group (Clean, no background) -->
|
|
12793
|
+
<div class="flex items-center gap-0.5">
|
|
12794
|
+
<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')">
|
|
12795
|
+
<i class="lucide-list size-[18px]" style="stroke-width: 1.5px;"></i>
|
|
12806
12796
|
</button>
|
|
12807
|
-
|
|
12797
|
+
<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()">
|
|
12798
|
+
<i class="lucide-filter size-[18px]" style="stroke-width: 1.5px;"></i>
|
|
12799
|
+
</button>
|
|
12800
|
+
<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()">
|
|
12801
|
+
<i class="lucide-arrow-up-down size-[18px]" style="stroke-width: 1.5px;"></i>
|
|
12802
|
+
</button>
|
|
12803
|
+
</div>
|
|
12804
|
+
|
|
12805
|
+
<div class="w-px h-4 bg-outline-gray-2 mx-1.5"></div>
|
|
12808
12806
|
|
|
12809
|
-
|
|
12810
|
-
|
|
12811
|
-
|
|
12812
|
-
|
|
12807
|
+
<div class="flex items-center gap-0.5">
|
|
12808
|
+
<!-- Search Icon -->
|
|
12809
|
+
<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()">
|
|
12810
|
+
<i class="lucide-search size-[18px]" style="stroke-width: 1.5px;"></i>
|
|
12811
|
+
</button>
|
|
12812
|
+
<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()">
|
|
12813
|
+
<i class="lucide-refresh-cw size-[18px]" style="stroke-width: 1.5px;"></i>
|
|
12814
|
+
</button>
|
|
12815
|
+
|
|
12816
|
+
<!-- Dynamic Custom Actions -->
|
|
12817
|
+
@for (action of visibleCustomActions(); track action.id) {
|
|
12818
|
+
<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"
|
|
12819
|
+
[title]="action.label"
|
|
12820
|
+
[disabled]="action.disabled"
|
|
12821
|
+
(click)="onCustomActionClick.emit(action.id)">
|
|
12822
|
+
<i [class]="action.icon + ' size-[18px]'" style="stroke-width: 1.5px;"></i>
|
|
12813
12823
|
</button>
|
|
12814
|
-
|
|
12815
|
-
|
|
12816
|
-
|
|
12824
|
+
}
|
|
12825
|
+
|
|
12826
|
+
@if (overflowCustomActions().length > 0) {
|
|
12827
|
+
<neural-dropdown [options]="overflowDropdownOptions()" (onSelect)="onCustomActionDropdownSelect($event)" [hasTriggerSlot]="true" placement="bottom-end">
|
|
12828
|
+
<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">
|
|
12829
|
+
<i class="lucide-more-horizontal size-[18px]" style="stroke-width: 1.5px;"></i>
|
|
12830
|
+
</button>
|
|
12831
|
+
</neural-dropdown>
|
|
12832
|
+
}
|
|
12833
|
+
</div>
|
|
12817
12834
|
|
|
12818
|
-
|
|
12835
|
+
<div class="w-px h-4 bg-outline-gray-2 mx-1.5"></div>
|
|
12819
12836
|
|
|
12820
|
-
|
|
12821
|
-
|
|
12822
|
-
|
|
12823
|
-
|
|
12824
|
-
|
|
12825
|
-
|
|
12826
|
-
|
|
12827
|
-
|
|
12837
|
+
<!-- Settings, Help and External Actions -->
|
|
12838
|
+
<div class="flex items-center gap-0.5">
|
|
12839
|
+
<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)">
|
|
12840
|
+
<i class="lucide-columns size-[18px]" style="stroke-width: 1.5px;"></i>
|
|
12841
|
+
</button>
|
|
12842
|
+
<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()">
|
|
12843
|
+
<i class="lucide-help-circle size-[18px]" style="stroke-width: 1.5px;"></i>
|
|
12844
|
+
</button>
|
|
12845
|
+
|
|
12846
|
+
<ng-content select="[header-actions]"></ng-content>
|
|
12847
|
+
</div>
|
|
12828
12848
|
|
|
12829
|
-
<
|
|
12830
|
-
|
|
12831
|
-
|
|
12832
|
-
|
|
12833
|
-
|
|
12834
|
-
|
|
12835
|
-
{{ newLabel() }}
|
|
12836
|
-
</neural-button>
|
|
12849
|
+
<div class="ms-1.5">
|
|
12850
|
+
<!-- + Nuevo Button -->
|
|
12851
|
+
<neural-button variant="solid" theme="gray" size="sm" icon="lucide-plus" [iconLeft]="true" class="!px-3 !h-8 !text-[12px]" (click)="onNewClick.emit()">
|
|
12852
|
+
{{ newLabel() }}
|
|
12853
|
+
</neural-button>
|
|
12854
|
+
</div>
|
|
12837
12855
|
</div>
|
|
12838
|
-
|
|
12856
|
+
}
|
|
12839
12857
|
</div>
|
|
12840
12858
|
|
|
12841
|
-
|
|
12842
|
-
|
|
12859
|
+
@if (viewMode() === 'list') {
|
|
12860
|
+
<!-- Table Content -->
|
|
12861
|
+
<div class="flex-1 overflow-x-auto min-h-[300px] relative px-4 pb-4">
|
|
12843
12862
|
<table class="w-full text-left border-separate" style="border-spacing: 0;">
|
|
12844
12863
|
<thead>
|
|
12845
12864
|
<tr>
|
|
12846
12865
|
@if (selectable()) {
|
|
12847
|
-
<th
|
|
12848
|
-
|
|
12866
|
+
<th
|
|
12867
|
+
class="px-4 py-1.5 align-middle w-12 bg-surface-gray-1 border-0"
|
|
12868
|
+
style="border-top-left-radius: 8px; border-bottom-left-radius: 8px;"
|
|
12869
|
+
>
|
|
12870
|
+
<div class="flex items-center justify-center h-full w-full">
|
|
12849
12871
|
<neural-checkbox size="sm" [checkedModel]="isAllSelected()" (checkedModelChange)="toggleAll($event)"></neural-checkbox>
|
|
12850
12872
|
</div>
|
|
12851
12873
|
</th>
|
|
12852
12874
|
}
|
|
12853
12875
|
@for (col of visibleColumns(); track col.key; let first = $first; let last = $last) {
|
|
12854
|
-
<th
|
|
12855
|
-
|
|
12856
|
-
|
|
12857
|
-
|
|
12858
|
-
|
|
12859
|
-
|
|
12860
|
-
|
|
12861
|
-
|
|
12862
|
-
|
|
12876
|
+
<th
|
|
12877
|
+
class="px-4 py-1.5 text-[13px] font-medium text-ink-gray-6 bg-surface-gray-1 border-0 align-middle hover:text-ink-gray-9 cursor-pointer transition-colors"
|
|
12878
|
+
[style.width]="col.width || 'auto'"
|
|
12879
|
+
[style.border-top-left-radius]="!selectable() && first ? '8px' : '0'"
|
|
12880
|
+
[style.border-bottom-left-radius]="!selectable() && first ? '8px' : '0'"
|
|
12881
|
+
[style.border-top-right-radius]="last ? '8px' : '0'"
|
|
12882
|
+
[style.border-bottom-right-radius]="last ? '8px' : '0'"
|
|
12883
|
+
(click)="col.sortable ? onSort(col.key) : null"
|
|
12884
|
+
>
|
|
12885
|
+
<div class="flex items-center justify-between group">
|
|
12863
12886
|
<span class="truncate">{{ col.label }}</span>
|
|
12864
12887
|
@if (col.sortable) {
|
|
12865
12888
|
<i class="lucide-caret-down size-3.5 text-ink-gray-5 opacity-0 group-hover:opacity-100 transition-opacity"></i>
|
|
@@ -12934,6 +12957,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
|
|
|
12934
12957
|
</div>
|
|
12935
12958
|
</div>
|
|
12936
12959
|
</div>
|
|
12960
|
+
}
|
|
12961
|
+
|
|
12962
|
+
@if (viewMode() === 'form') {
|
|
12963
|
+
<div class="flex-1 w-full h-full relative">
|
|
12964
|
+
<ng-content select="[form-view]"></ng-content>
|
|
12965
|
+
</div>
|
|
12966
|
+
}
|
|
12937
12967
|
|
|
12938
12968
|
<!-- Dialog moved outside of the main flex flows -->
|
|
12939
12969
|
<neural-dialog [openModel]="isPreferencesOpen()" (openModelChange)="isPreferencesOpen.set($event)" [hasTitleSlot]="true" [hasActionsSlot]="true" size="md">
|
|
@@ -12980,7 +13010,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
|
|
|
12980
13010
|
</div>
|
|
12981
13011
|
`
|
|
12982
13012
|
}]
|
|
12983
|
-
}], 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: [{
|
|
13013
|
+
}], 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: [{
|
|
12984
13014
|
type: Output
|
|
12985
13015
|
}], onPageChange: [{
|
|
12986
13016
|
type: Output
|