orbiq-neural-ui-kit 1.0.39 → 1.1.0

package/fesm2022/orbiq-neural-ui-kit.mjs

@@ -12225,6 +12225,24 @@ class NeuralDataTableComponent {
     ...(ngDevMode ? [{ debugName: "emptyStateTitle" }] : /* istanbul ignore next */ []));
     emptyStateDesc = input('Ajusta los filtros o realiza una búsqueda para encontrar resultados.', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "emptyStateDesc" }] : /* istanbul ignore next */ []));
+    // Custom Dynamic Actions
+    customActions = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "customActions" }] : /* istanbul ignore next */ []));
+    maxVisibleActions = input(2, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxVisibleActions" }] : /* istanbul ignore next */ []));
+    visibleCustomActions = computed(() => this.customActions().slice(0, this.maxVisibleActions()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visibleCustomActions" }] : /* istanbul ignore next */ []));
+    overflowCustomActions = computed(() => this.customActions().slice(this.maxVisibleActions()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "overflowCustomActions" }] : /* istanbul ignore next */ []));
+    overflowDropdownOptions = computed(() => {
+        return this.overflowCustomActions().map(a => ({
+            value: a.id,
+            label: a.label,
+            icon: a.icon,
+            disabled: a.disabled
+        }));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "overflowDropdownOptions" }] : /* istanbul ignore next */ []));
     onSearch = new EventEmitter();
     onPageChange = new EventEmitter();
     sortChange = new EventEmitter();
@@ -12236,9 +12254,7 @@ class NeuralDataTableComponent {
     onFilterClick = new EventEmitter();
     onSortChangeClick = new EventEmitter();
     onSearchClick = new EventEmitter();
-    onMoreClick = new EventEmitter();
-    onImportClick = new EventEmitter();
-    onExportClick = new EventEmitter();
+    onCustomActionClick = new EventEmitter();
     onNewClick = new EventEmitter();
     cellTemplate;
     isPreferencesOpen = signal(false, /* @ts-ignore */
@@ -12251,6 +12267,9 @@ class NeuralDataTableComponent {
         return this.allColumns().filter(col => !this.hiddenColumns().has(col.key));
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "visibleColumns" }] : /* istanbul ignore next */ []));
+    onCustomActionDropdownSelect(option) {
+        this.onCustomActionClick.emit(option.value);
+    }
     isColumnVisible(key) {
         return !this.hiddenColumns().has(key);
     }
@@ -12271,7 +12290,7 @@ class NeuralDataTableComponent {
         this.sortChange.emit(key);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralDataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    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 }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, totalPages: { classPropertyName: "totalPages", publicName: "totalPages", isSignal: true, isRequired: false, transformFunction: null }, emptyStateTitle: { classPropertyName: "emptyStateTitle", publicName: "emptyStateTitle", isSignal: true, isRequired: false, transformFunction: null }, emptyStateDesc: { classPropertyName: "emptyStateDesc", publicName: "emptyStateDesc", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSearch: "onSearch", onPageChange: "onPageChange", sortChange: "sortChange", onInfoClick: "onInfoClick", onHelpClick: "onHelpClick", onRefreshClick: "onRefreshClick", onViewChange: "onViewChange", onFilterClick: "onFilterClick", onSortChangeClick: "onSortChangeClick", onSearchClick: "onSearchClick", onMoreClick: "onMoreClick", onImportClick: "onImportClick", onExportClick: "onExportClick", onNewClick: "onNewClick" }, host: { properties: { "attr.title": "null" } }, queries: [{ propertyName: "cellTemplate", first: true, predicate: ["cellTemplate"], descendants: true }], ngImport: i0, template: `
+    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 }, 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: `
     <div class="flex flex-col w-full h-full bg-white rounded-md border border-outline-gray-2 shadow-sm overflow-hidden">
       
       <!-- Top Header Area -->
@@ -12307,15 +12326,24 @@ class NeuralDataTableComponent {
             <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()">
               <i class="lucide-refresh-cw size-[18px]" style="stroke-width: 1.5px;"></i>
             </button>
-            <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="Importar" (click)="onImportClick.emit()">
-              <i class="lucide-upload size-[18px]" style="stroke-width: 1.5px;"></i>
-            </button>
-            <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="Exportar" (click)="onExportClick.emit()">
-              <i class="lucide-download size-[18px]" style="stroke-width: 1.5px;"></i>
-            </button>
-            <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="Más acciones" (click)="onMoreClick.emit()">
-              <i class="lucide-more-horizontal size-[18px]" style="stroke-width: 1.5px;"></i>
-            </button>
+            
+            <!-- Dynamic Custom Actions -->
+            @for (action of visibleCustomActions(); track action.id) {
+              <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" 
+                      [title]="action.label" 
+                      [disabled]="action.disabled"
+                      (click)="onCustomActionClick.emit(action.id)">
+                <i [class]="action.icon + ' size-[18px]'" style="stroke-width: 1.5px;"></i>
+              </button>
+            }
+            
+            @if (overflowCustomActions().length > 0) {
+              <neural-dropdown [options]="overflowDropdownOptions()" (onSelect)="onCustomActionDropdownSelect($event)" [hasTriggerSlot]="true" placement="bottom-end">
+                <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">
+                  <i class="lucide-more-horizontal size-[18px]" style="stroke-width: 1.5px;"></i>
+                </button>
+              </neural-dropdown>
+            }
           </div>
 
           <div class="w-px h-4 bg-outline-gray-2 mx-1.5"></div>
@@ -12323,7 +12351,7 @@ class NeuralDataTableComponent {
           <!-- Settings, Help and External Actions -->
           <div class="flex items-center gap-0.5">
             <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)">
-              <i class="lucide-settings size-[18px]" style="stroke-width: 1.5px;"></i>
+              <i class="lucide-columns size-[18px]" style="stroke-width: 1.5px;"></i>
             </button>
             <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()">
               <i class="lucide-help-circle size-[18px]" style="stroke-width: 1.5px;"></i>
@@ -12465,7 +12493,7 @@ class NeuralDataTableComponent {
         </div>
       </neural-dialog>
     </div>
-  `, 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"] }] });
+  `, 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralDataTableComponent, decorators: [{
             type: Component,
@@ -12477,7 +12505,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                         NeuralButtonComponent,
                         NeuralDialogComponent,
                         NeuralSwitchComponent,
-                        NeuralCheckboxComponent
+                        NeuralCheckboxComponent,
+                        NeuralDropdownComponent
                     ],
                     host: {
                         '[attr.title]': 'null'
@@ -12518,15 +12547,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
             <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()">
               <i class="lucide-refresh-cw size-[18px]" style="stroke-width: 1.5px;"></i>
             </button>
-            <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="Importar" (click)="onImportClick.emit()">
-              <i class="lucide-upload size-[18px]" style="stroke-width: 1.5px;"></i>
-            </button>
-            <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="Exportar" (click)="onExportClick.emit()">
-              <i class="lucide-download size-[18px]" style="stroke-width: 1.5px;"></i>
-            </button>
-            <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="Más acciones" (click)="onMoreClick.emit()">
-              <i class="lucide-more-horizontal size-[18px]" style="stroke-width: 1.5px;"></i>
-            </button>
+            
+            <!-- Dynamic Custom Actions -->
+            @for (action of visibleCustomActions(); track action.id) {
+              <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" 
+                      [title]="action.label" 
+                      [disabled]="action.disabled"
+                      (click)="onCustomActionClick.emit(action.id)">
+                <i [class]="action.icon + ' size-[18px]'" style="stroke-width: 1.5px;"></i>
+              </button>
+            }
+            
+            @if (overflowCustomActions().length > 0) {
+              <neural-dropdown [options]="overflowDropdownOptions()" (onSelect)="onCustomActionDropdownSelect($event)" [hasTriggerSlot]="true" placement="bottom-end">
+                <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">
+                  <i class="lucide-more-horizontal size-[18px]" style="stroke-width: 1.5px;"></i>
+                </button>
+              </neural-dropdown>
+            }
           </div>
 
           <div class="w-px h-4 bg-outline-gray-2 mx-1.5"></div>
@@ -12534,7 +12572,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
           <!-- Settings, Help and External Actions -->
           <div class="flex items-center gap-0.5">
             <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)">
-              <i class="lucide-settings size-[18px]" style="stroke-width: 1.5px;"></i>
+              <i class="lucide-columns size-[18px]" style="stroke-width: 1.5px;"></i>
             </button>
             <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()">
               <i class="lucide-help-circle size-[18px]" style="stroke-width: 1.5px;"></i>
@@ -12678,7 +12716,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
     </div>
   `
                 }]
-        }], 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 }] }], 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: [{
+        }], 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 }] }], 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: [{
                 type: Output
             }], onPageChange: [{
                 type: Output
@@ -12698,11 +12736,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                 type: Output
             }], onSearchClick: [{
                 type: Output
-            }], onMoreClick: [{
-                type: Output
-            }], onImportClick: [{
-                type: Output
-            }], onExportClick: [{
+            }], onCustomActionClick: [{
                 type: Output
             }], onNewClick: [{
                 type: Output