orbiq-neural-ui-kit 1.0.10 → 1.0.12

package/README.md

@@ -25,6 +25,7 @@ Elementos de UI básicos e indivisibles. No dependen de otros componentes.
 - **Checkbox (`<neural-checkbox>`)**: Selector booleano simple.
 - **Divider (`<neural-divider>`)**: Línea separadora estructural.
 - **Error Message (`<neural-error-message>`)**: Texto estandarizado para feedback de validación.
+- **FilterBuilder (`<neural-filter-builder>`)**: Organismo interactivo para construir filtros dinámicos y pasárselos a tablas o listas.
 - **Form Label (`<neural-form-label>`)**: Etiqueta tipográfica para campos de entrada.
 - **Icon (`<neural-icon>`)**: Componente envoltorio para renderizar vectores de Lucide.
 - **Loading Indicator & Text**: Elementos visuales de carga y estados de espera.

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

@@ -1921,8 +1921,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
 class NeuralFooterComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.4", type: NeuralFooterComponent, isStandalone: true, selector: "neural-footer", ngImport: i0, template: `
-    <footer class="border-t border-gray-200 p-4 text-center text-sm text-gray-500 w-full">
-      <ng-content></ng-content>
+    <footer class="flex items-center justify-between w-full h-10 px-4 bg-white border-t border-outline-gray-2 text-ink-gray-5 text-xs">
+      
+      <!-- Zona Izquierda: Estados e Indicadores -->
+      <div class="flex items-center gap-3">
+        <ng-content select="[left]"></ng-content>
+      </div>
+      <!-- Zona Central: Copyright o Mensajes (Fallback o contenido por defecto) -->
+      <div class="flex items-center justify-center">
+        <ng-content></ng-content>
+      </div>
+      <!-- Zona Derecha: Acciones y Herramientas Operativas -->
+      <div class="flex items-center gap-2">
+        <ng-content select="[right]"></ng-content>
+      </div>
     </footer>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
@@ -1933,8 +1945,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                     standalone: true,
                     imports: [CommonModule],
                     template: `
-    <footer class="border-t border-gray-200 p-4 text-center text-sm text-gray-500 w-full">
-      <ng-content></ng-content>
+    <footer class="flex items-center justify-between w-full h-10 px-4 bg-white border-t border-outline-gray-2 text-ink-gray-5 text-xs">
+      
+      <!-- Zona Izquierda: Estados e Indicadores -->
+      <div class="flex items-center gap-3">
+        <ng-content select="[left]"></ng-content>
+      </div>
+      <!-- Zona Central: Copyright o Mensajes (Fallback o contenido por defecto) -->
+      <div class="flex items-center justify-center">
+        <ng-content></ng-content>
+      </div>
+      <!-- Zona Derecha: Acciones y Herramientas Operativas -->
+      <div class="flex items-center gap-2">
+        <ng-content select="[right]"></ng-content>
+      </div>
     </footer>
   `
                 }]
@@ -12163,6 +12187,58 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                 type: Output
             }] } });
 
+class NeuralFilterBuilderComponent {
+    // Configuración de los campos disponibles para filtrar
+    fields = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fields" }] : /* istanbul ignore next */ []));
+    // Template opcional para inyectar un input de valor personalizado desde el componente padre
+    valueInputTemplate = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "valueInputTemplate" }] : /* istanbul ignore next */ []));
+    // Evento que se emite cuando el usuario hace clic en "Aplicar filtros"
+    apply = output();
+    // Estado interno de las reglas
+    rules = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rules" }] : /* istanbul ignore next */ []));
+    // Operadores disponibles (se podrían dinamizar según el tipo de campo en el futuro)
+    operators = [
+        { value: 'equals', label: 'Iguales' },
+        { value: 'not_equals', label: 'Diferentes' },
+        { value: 'contains', label: 'Contiene' },
+        { value: 'greater_than', label: 'Mayor que' },
+        { value: 'less_than', label: 'Menor que' }
+    ];
+    addRule() {
+        this.rules.update(current => [
+            ...current,
+            { field: '', operator: 'equals', value: '' }
+        ]);
+    }
+    removeRule(index) {
+        this.rules.update(current => current.filter((_, i) => i !== index));
+    }
+    clearRules() {
+        this.rules.set([]);
+    }
+    applyFilters() {
+        // Solo emitir reglas que tengan un campo seleccionado
+        const validRules = this.rules().filter(r => r.field);
+        this.apply.emit(validRules);
+    }
+    updateRule(index, key, value) {
+        this.rules.update(current => {
+            const newRules = [...current];
+            newRules[index] = { ...newRules[index], [key]: value };
+            return newRules;
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralFilterBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: NeuralFilterBuilderComponent, isStandalone: true, selector: "neural-filter-builder", inputs: { fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: true, transformFunction: null }, valueInputTemplate: { classPropertyName: "valueInputTemplate", publicName: "valueInputTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { apply: "apply" }, ngImport: i0, template: "<div class=\"bg-white border border-gray-200 rounded-lg shadow-lg w-full max-w-2xl text-sm flex flex-col overflow-hidden\">\n  \n  <!-- Lista de Filtros -->\n  <div class=\"p-4 flex flex-col gap-3\">\n    @for (rule of rules(); track $index) {\n      <div class=\"flex items-center gap-2 w-full\">\n        \n        <!-- Seleccionar Campo -->\n        <select \n          class=\"flex-1 bg-gray-50 border border-transparent focus:border-gray-300 focus:bg-white focus:ring-0 rounded-md p-2 outline-none transition-colors\"\n          [ngModel]=\"rule.field\" \n          (ngModelChange)=\"updateRule($index, 'field', $event)\">\n          <option value=\"\" disabled>Seleccione un campo...</option>\n          @for (field of fields(); track field.key) {\n            <option [value]=\"field.key\">{{ field.label }}</option>\n          }\n        </select>\n\n        <!-- Seleccionar Operador -->\n        <select \n          class=\"flex-1 bg-gray-50 border border-transparent focus:border-gray-300 focus:bg-white focus:ring-0 rounded-md p-2 outline-none transition-colors\"\n          [ngModel]=\"rule.operator\" \n          (ngModelChange)=\"updateRule($index, 'operator', $event)\">\n          @for (op of operators; track op.value) {\n            <option [value]=\"op.value\">{{ op.label }}</option>\n          }\n        </select>\n\n        <!-- Valor: Template personalizado o input por defecto -->\n        <div class=\"flex-[1.5] relative\">\n          @if (valueInputTemplate()) {\n            <ng-container *ngTemplateOutlet=\"valueInputTemplate()!; context: { $implicit: rule, index: $index, updateRule: updateRule.bind(this) }\"></ng-container>\n          } @else {\n            <input \n              type=\"text\" \n              class=\"w-full bg-gray-50 border border-transparent focus:border-gray-300 focus:bg-white focus:ring-0 rounded-md p-2 outline-none transition-colors\"\n              placeholder=\"Valor...\"\n              [ngModel]=\"rule.value\" \n              (ngModelChange)=\"updateRule($index, 'value', $event)\">\n          }\n        </div>\n\n        <!-- Bot\u00F3n para eliminar regla -->\n        <button \n          (click)=\"removeRule($index)\"\n          class=\"p-2 text-gray-400 hover:text-red-500 rounded-md hover:bg-red-50 transition-colors ml-1\"\n          aria-label=\"Eliminar filtro\">\n          <neural-icon name=\"x\" size=\"16\"></neural-icon>\n        </button>\n      </div>\n    }\n\n    <!-- Fila vac\u00EDa inicial si no hay filtros -->\n    @if (rules().length === 0) {\n      <div class=\"text-gray-400 italic text-center py-4 text-xs\">\n        No hay filtros activos. Haz clic en \"+ A\u00F1adir Filtro\".\n      </div>\n    }\n  </div>\n\n  <hr class=\"border-gray-100 m-0\">\n\n  <!-- Acciones -->\n  <div class=\"p-4 bg-gray-50 flex items-center justify-between\">\n    <button \n      (click)=\"addRule()\"\n      class=\"text-gray-600 font-medium hover:text-gray-900 transition-colors flex items-center gap-1\">\n      <span class=\"text-lg leading-none\">+</span> A\u00F1adir Filtro\n    </button>\n\n    <div class=\"flex items-center gap-2\">\n      <neural-button \n        variant=\"ghost\" \n        theme=\"gray\" \n        (click)=\"clearRules()\">\n        Borrar Filtros\n      </neural-button>\n      \n      <neural-button \n        variant=\"solid\" \n        theme=\"gray\" \n        (click)=\"applyFilters()\">\n        Aplicar filtros\n      </neural-button>\n    </div>\n  </div>\n\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NeuralButtonComponent, selector: "neural-button", inputs: ["variant", "theme", "size", "type", "disabled", "loading", "icon", "iconLeft", "iconRight", "iconOnly"], outputs: ["clicked"] }, { kind: "component", type: NeuralIconComponent, selector: "neural-icon", inputs: ["name"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralFilterBuilderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'neural-filter-builder', standalone: true, imports: [CommonModule, FormsModule, NeuralButtonComponent, NeuralIconComponent], template: "<div class=\"bg-white border border-gray-200 rounded-lg shadow-lg w-full max-w-2xl text-sm flex flex-col overflow-hidden\">\n  \n  <!-- Lista de Filtros -->\n  <div class=\"p-4 flex flex-col gap-3\">\n    @for (rule of rules(); track $index) {\n      <div class=\"flex items-center gap-2 w-full\">\n        \n        <!-- Seleccionar Campo -->\n        <select \n          class=\"flex-1 bg-gray-50 border border-transparent focus:border-gray-300 focus:bg-white focus:ring-0 rounded-md p-2 outline-none transition-colors\"\n          [ngModel]=\"rule.field\" \n          (ngModelChange)=\"updateRule($index, 'field', $event)\">\n          <option value=\"\" disabled>Seleccione un campo...</option>\n          @for (field of fields(); track field.key) {\n            <option [value]=\"field.key\">{{ field.label }}</option>\n          }\n        </select>\n\n        <!-- Seleccionar Operador -->\n        <select \n          class=\"flex-1 bg-gray-50 border border-transparent focus:border-gray-300 focus:bg-white focus:ring-0 rounded-md p-2 outline-none transition-colors\"\n          [ngModel]=\"rule.operator\" \n          (ngModelChange)=\"updateRule($index, 'operator', $event)\">\n          @for (op of operators; track op.value) {\n            <option [value]=\"op.value\">{{ op.label }}</option>\n          }\n        </select>\n\n        <!-- Valor: Template personalizado o input por defecto -->\n        <div class=\"flex-[1.5] relative\">\n          @if (valueInputTemplate()) {\n            <ng-container *ngTemplateOutlet=\"valueInputTemplate()!; context: { $implicit: rule, index: $index, updateRule: updateRule.bind(this) }\"></ng-container>\n          } @else {\n            <input \n              type=\"text\" \n              class=\"w-full bg-gray-50 border border-transparent focus:border-gray-300 focus:bg-white focus:ring-0 rounded-md p-2 outline-none transition-colors\"\n              placeholder=\"Valor...\"\n              [ngModel]=\"rule.value\" \n              (ngModelChange)=\"updateRule($index, 'value', $event)\">\n          }\n        </div>\n\n        <!-- Bot\u00F3n para eliminar regla -->\n        <button \n          (click)=\"removeRule($index)\"\n          class=\"p-2 text-gray-400 hover:text-red-500 rounded-md hover:bg-red-50 transition-colors ml-1\"\n          aria-label=\"Eliminar filtro\">\n          <neural-icon name=\"x\" size=\"16\"></neural-icon>\n        </button>\n      </div>\n    }\n\n    <!-- Fila vac\u00EDa inicial si no hay filtros -->\n    @if (rules().length === 0) {\n      <div class=\"text-gray-400 italic text-center py-4 text-xs\">\n        No hay filtros activos. Haz clic en \"+ A\u00F1adir Filtro\".\n      </div>\n    }\n  </div>\n\n  <hr class=\"border-gray-100 m-0\">\n\n  <!-- Acciones -->\n  <div class=\"p-4 bg-gray-50 flex items-center justify-between\">\n    <button \n      (click)=\"addRule()\"\n      class=\"text-gray-600 font-medium hover:text-gray-900 transition-colors flex items-center gap-1\">\n      <span class=\"text-lg leading-none\">+</span> A\u00F1adir Filtro\n    </button>\n\n    <div class=\"flex items-center gap-2\">\n      <neural-button \n        variant=\"ghost\" \n        theme=\"gray\" \n        (click)=\"clearRules()\">\n        Borrar Filtros\n      </neural-button>\n      \n      <neural-button \n        variant=\"solid\" \n        theme=\"gray\" \n        (click)=\"applyFilters()\">\n        Aplicar filtros\n      </neural-button>\n    </div>\n  </div>\n\n</div>\n" }]
+        }], propDecorators: { fields: [{ type: i0.Input, args: [{ isSignal: true, alias: "fields", required: true }] }], valueInputTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueInputTemplate", required: false }] }], apply: [{ type: i0.Output, args: ["apply"] }] } });
+
 class NeuralPageHeaderComponent {
     title = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
@@ -13714,5 +13790,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { NeuralAccordionComponent, NeuralAlertComponent, NeuralAvatarComponent, NeuralAxisChartComponent, NeuralBadgeComponent, NeuralBottomSheetComponent, NeuralBreadcrumbsComponent, NeuralButtonComponent, NeuralCalendarComponent, NeuralCheckboxComponent, NeuralCodeEditorComponent, NeuralCodePreviewComponent, NeuralComboboxComponent, NeuralCommandPaletteComponent, NeuralContextMenuComponent, NeuralDatePickerComponent, NeuralDesktopShellComponent, NeuralDialogComponent, NeuralDividerComponent, NeuralDonutChartComponent, NeuralDropdownComponent, NeuralDurationComponent, NeuralEChartsComponent, NeuralErrorMessageComponent, NeuralFileUploaderComponent, NeuralFloatingWindowComponent, NeuralFooterComponent, NeuralFormControlComponent, NeuralFormLabelComponent, NeuralFunnelChartComponent, NeuralHoverCardComponent, NeuralIconComponent, NeuralInputDescriptionComponent, NeuralInputErrorComponent, NeuralInputLabelComponent, NeuralItemListRowComponent, NeuralKeyboardShortcutComponent, NeuralLabelingWrapperComponent, NeuralListViewComponent, NeuralLoadingIndicatorComponent, NeuralLoadingTextComponent, NeuralMenuComponent, NeuralMobileNavComponent, NeuralMobileNavItemComponent, NeuralMobileShellComponent, NeuralMultiEmailInputComponent, NeuralMultiSelectComponent, NeuralNumberChartComponent, NeuralPageHeaderComponent, NeuralPasswordComponent, NeuralPopoverComponent, NeuralPopoverContentDirective, NeuralPopoverPanelComponent, NeuralPopoverTriggerDirective, NeuralProgressComponent, NeuralRadioComponent, NeuralRadioGroupComponent, NeuralRailComponent, NeuralRailItemComponent, NeuralRatingComponent, NeuralRequiredIndicatorComponent, NeuralScrollAreaComponent, NeuralSelectComponent, NeuralSettingsContentComponent, NeuralSettingsDialogComponent, NeuralSettingsNavItemComponent, NeuralSettingsPanelComponent, NeuralSettingsSidebarComponent, NeuralSidebarComponent, NeuralSidebarItemComponent, NeuralSkeletonComponent, NeuralSliderComponent, NeuralSpinnerComponent, NeuralSwitchComponent, NeuralTabComponent, NeuralTabPanelComponent, NeuralTabsComponent, NeuralTextEditorComponent, NeuralTextInputComponent, NeuralTextareaComponent, NeuralThemeSwitcherComponent, NeuralTimePickerComponent, NeuralToastComponent, NeuralTooltipComponent, NeuralTreeComponent, NeuralTreeItemComponent, RADIO_GROUP, TABS_ROOT, ToastService, formatDuration, parseDuration };
+export { NeuralAccordionComponent, NeuralAlertComponent, NeuralAvatarComponent, NeuralAxisChartComponent, NeuralBadgeComponent, NeuralBottomSheetComponent, NeuralBreadcrumbsComponent, NeuralButtonComponent, NeuralCalendarComponent, NeuralCheckboxComponent, NeuralCodeEditorComponent, NeuralCodePreviewComponent, NeuralComboboxComponent, NeuralCommandPaletteComponent, NeuralContextMenuComponent, NeuralDatePickerComponent, NeuralDesktopShellComponent, NeuralDialogComponent, NeuralDividerComponent, NeuralDonutChartComponent, NeuralDropdownComponent, NeuralDurationComponent, NeuralEChartsComponent, NeuralErrorMessageComponent, NeuralFileUploaderComponent, NeuralFilterBuilderComponent, NeuralFloatingWindowComponent, NeuralFooterComponent, NeuralFormControlComponent, NeuralFormLabelComponent, NeuralFunnelChartComponent, NeuralHoverCardComponent, NeuralIconComponent, NeuralInputDescriptionComponent, NeuralInputErrorComponent, NeuralInputLabelComponent, NeuralItemListRowComponent, NeuralKeyboardShortcutComponent, NeuralLabelingWrapperComponent, NeuralListViewComponent, NeuralLoadingIndicatorComponent, NeuralLoadingTextComponent, NeuralMenuComponent, NeuralMobileNavComponent, NeuralMobileNavItemComponent, NeuralMobileShellComponent, NeuralMultiEmailInputComponent, NeuralMultiSelectComponent, NeuralNumberChartComponent, NeuralPageHeaderComponent, NeuralPasswordComponent, NeuralPopoverComponent, NeuralPopoverContentDirective, NeuralPopoverPanelComponent, NeuralPopoverTriggerDirective, NeuralProgressComponent, NeuralRadioComponent, NeuralRadioGroupComponent, NeuralRailComponent, NeuralRailItemComponent, NeuralRatingComponent, NeuralRequiredIndicatorComponent, NeuralScrollAreaComponent, NeuralSelectComponent, NeuralSettingsContentComponent, NeuralSettingsDialogComponent, NeuralSettingsNavItemComponent, NeuralSettingsPanelComponent, NeuralSettingsSidebarComponent, NeuralSidebarComponent, NeuralSidebarItemComponent, NeuralSkeletonComponent, NeuralSliderComponent, NeuralSpinnerComponent, NeuralSwitchComponent, NeuralTabComponent, NeuralTabPanelComponent, NeuralTabsComponent, NeuralTextEditorComponent, NeuralTextInputComponent, NeuralTextareaComponent, NeuralThemeSwitcherComponent, NeuralTimePickerComponent, NeuralToastComponent, NeuralTooltipComponent, NeuralTreeComponent, NeuralTreeItemComponent, RADIO_GROUP, TABS_ROOT, ToastService, formatDuration, parseDuration };
 //# sourceMappingURL=orbiq-neural-ui-kit.mjs.map