orbiq-neural-ui-kit 1.0.24 → 1.0.26
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.
|
@@ -473,7 +473,16 @@ class NeuralButtonComponent {
|
|
|
473
473
|
}, /* @ts-ignore */
|
|
474
474
|
...(ngDevMode ? [{ debugName: "spinnerClasses" }] : /* istanbul ignore next */ []));
|
|
475
475
|
iconClasses = computed(() => {
|
|
476
|
-
|
|
476
|
+
const fontSizes = {
|
|
477
|
+
'xs': 'text-[14px]',
|
|
478
|
+
'sm': 'text-[18px]', // Aumentado a 18px para que se vean mejor en botones pequeños
|
|
479
|
+
'md': 'text-[20px]',
|
|
480
|
+
'lg': 'text-[24px]',
|
|
481
|
+
'xl': 'text-[28px]',
|
|
482
|
+
'2xl': 'text-[32px]',
|
|
483
|
+
'3xl': 'text-[40px]',
|
|
484
|
+
};
|
|
485
|
+
return fontSizes[this.size()] + ' ' + this.spinnerClasses();
|
|
477
486
|
}, /* @ts-ignore */
|
|
478
487
|
...(ngDevMode ? [{ debugName: "iconClasses" }] : /* istanbul ignore next */ []));
|
|
479
488
|
computedClasses = computed(() => {
|
|
@@ -12474,7 +12483,7 @@ class NeuralFilterBuilderComponent {
|
|
|
12474
12483
|
// Evento que se emite cuando el usuario hace clic en "Aplicar filtros"
|
|
12475
12484
|
apply = output();
|
|
12476
12485
|
// Estado interno de las reglas
|
|
12477
|
-
rules = signal([], /* @ts-ignore */
|
|
12486
|
+
rules = signal([{ field: '', operator: 'equals', value: '' }], /* @ts-ignore */
|
|
12478
12487
|
...(ngDevMode ? [{ debugName: "rules" }] : /* istanbul ignore next */ []));
|
|
12479
12488
|
// Operadores disponibles (se podrían dinamizar según el tipo de campo en el futuro)
|
|
12480
12489
|
operators = [
|
|
@@ -12491,10 +12500,13 @@ class NeuralFilterBuilderComponent {
|
|
|
12491
12500
|
]);
|
|
12492
12501
|
}
|
|
12493
12502
|
removeRule(index) {
|
|
12494
|
-
this.rules.update(current =>
|
|
12503
|
+
this.rules.update(current => {
|
|
12504
|
+
const filtered = current.filter((_, i) => i !== index);
|
|
12505
|
+
return filtered.length > 0 ? filtered : [{ field: '', operator: 'equals', value: '' }];
|
|
12506
|
+
});
|
|
12495
12507
|
}
|
|
12496
12508
|
clearRules() {
|
|
12497
|
-
this.rules.set([]);
|
|
12509
|
+
this.rules.set([{ field: '', operator: 'equals', value: '' }]);
|
|
12498
12510
|
}
|
|
12499
12511
|
applyFilters() {
|
|
12500
12512
|
// Solo emitir reglas que tengan un campo seleccionado
|
|
@@ -12509,11 +12521,11 @@ class NeuralFilterBuilderComponent {
|
|
|
12509
12521
|
});
|
|
12510
12522
|
}
|
|
12511
12523
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralFilterBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
12512
|
-
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-surface-base border border-outline-gray-2 rounded-[12px] shadow-[0_12px_40px_rgba(0,0,0,0.12)] w-full max-w-[540px] text-[13px] flex flex-col p-5\">\n \n <!-- Lista de Filtros -->\n <div class=\"flex flex-col gap-3
|
|
12524
|
+
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-surface-base border border-outline-gray-2 rounded-[12px] shadow-[0_12px_40px_rgba(0,0,0,0.12)] w-full max-w-[540px] text-[13px] flex flex-col p-5\">\n \n <!-- Lista de Filtros -->\n <div class=\"flex flex-col gap-3\">\n @for (rule of rules(); track $index) {\n <div class=\"flex items-center gap-3 w-full\">\n \n <!-- Seleccionar Campo -->\n <select \n class=\"w-[170px] flex-shrink-0 bg-surface-gray-1 border-none focus:ring-1 focus:ring-outline-gray-4 rounded-md h-9 px-3 outline-none transition-colors text-ink-gray-8 text-[13px]\"\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=\"w-[120px] flex-shrink-0 bg-surface-gray-1 border-none focus:ring-1 focus:ring-outline-gray-4 rounded-md h-9 px-3 outline-none transition-colors text-ink-gray-8 text-[13px]\"\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 relative h-9\">\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 h-full bg-surface-gray-1 border-none focus:ring-1 focus:ring-outline-gray-4 rounded-md px-3 outline-none transition-colors text-ink-gray-8 text-[13px]\"\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=\"h-9 w-6 flex items-center justify-center text-ink-gray-4 hover:text-ink-gray-8 transition-colors flex-shrink-0\"\n aria-label=\"Eliminar filtro\">\n <neural-icon name=\"lucide-x\" class=\"size-4 stroke-[3]\"></neural-icon>\n </button>\n </div>\n }\n </div>\n\n <hr class=\"border-outline-gray-2 my-5\">\n\n <!-- Acciones -->\n <div class=\"flex items-center justify-between\">\n <button \n (click)=\"addRule()\"\n class=\"text-[13.5px] text-ink-gray-5 font-medium hover:text-ink-gray-9 transition-colors flex items-center\">\n + A\u00F1adir Filtro\n </button>\n\n <div class=\"flex items-center gap-2\">\n <neural-button \n variant=\"subtle\" \n theme=\"gray\" \n size=\"md\"\n class=\"bg-surface-gray-1\"\n (click)=\"clearRules()\">\n Borrar Filtros\n </neural-button>\n \n <neural-button \n variant=\"solid\" \n theme=\"gray\"\n size=\"md\"\n (click)=\"applyFilters()\">\n Aplicar filtros\n </neural-button>\n </div>\n </div>\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"] }] });
|
|
12513
12525
|
}
|
|
12514
12526
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralFilterBuilderComponent, decorators: [{
|
|
12515
12527
|
type: Component,
|
|
12516
|
-
args: [{ selector: 'neural-filter-builder', standalone: true, imports: [CommonModule, FormsModule, NeuralButtonComponent, NeuralIconComponent], template: "<div class=\"bg-surface-base border border-outline-gray-2 rounded-[12px] shadow-[0_12px_40px_rgba(0,0,0,0.12)] w-full max-w-[540px] text-[13px] flex flex-col p-5\">\n \n <!-- Lista de Filtros -->\n <div class=\"flex flex-col gap-3
|
|
12528
|
+
args: [{ selector: 'neural-filter-builder', standalone: true, imports: [CommonModule, FormsModule, NeuralButtonComponent, NeuralIconComponent], template: "<div class=\"bg-surface-base border border-outline-gray-2 rounded-[12px] shadow-[0_12px_40px_rgba(0,0,0,0.12)] w-full max-w-[540px] text-[13px] flex flex-col p-5\">\n \n <!-- Lista de Filtros -->\n <div class=\"flex flex-col gap-3\">\n @for (rule of rules(); track $index) {\n <div class=\"flex items-center gap-3 w-full\">\n \n <!-- Seleccionar Campo -->\n <select \n class=\"w-[170px] flex-shrink-0 bg-surface-gray-1 border-none focus:ring-1 focus:ring-outline-gray-4 rounded-md h-9 px-3 outline-none transition-colors text-ink-gray-8 text-[13px]\"\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=\"w-[120px] flex-shrink-0 bg-surface-gray-1 border-none focus:ring-1 focus:ring-outline-gray-4 rounded-md h-9 px-3 outline-none transition-colors text-ink-gray-8 text-[13px]\"\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 relative h-9\">\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 h-full bg-surface-gray-1 border-none focus:ring-1 focus:ring-outline-gray-4 rounded-md px-3 outline-none transition-colors text-ink-gray-8 text-[13px]\"\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=\"h-9 w-6 flex items-center justify-center text-ink-gray-4 hover:text-ink-gray-8 transition-colors flex-shrink-0\"\n aria-label=\"Eliminar filtro\">\n <neural-icon name=\"lucide-x\" class=\"size-4 stroke-[3]\"></neural-icon>\n </button>\n </div>\n }\n </div>\n\n <hr class=\"border-outline-gray-2 my-5\">\n\n <!-- Acciones -->\n <div class=\"flex items-center justify-between\">\n <button \n (click)=\"addRule()\"\n class=\"text-[13.5px] text-ink-gray-5 font-medium hover:text-ink-gray-9 transition-colors flex items-center\">\n + A\u00F1adir Filtro\n </button>\n\n <div class=\"flex items-center gap-2\">\n <neural-button \n variant=\"subtle\" \n theme=\"gray\" \n size=\"md\"\n class=\"bg-surface-gray-1\"\n (click)=\"clearRules()\">\n Borrar Filtros\n </neural-button>\n \n <neural-button \n variant=\"solid\" \n theme=\"gray\"\n size=\"md\"\n (click)=\"applyFilters()\">\n Aplicar filtros\n </neural-button>\n </div>\n </div>\n</div>\n" }]
|
|
12517
12529
|
}], 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"] }] } });
|
|
12518
12530
|
|
|
12519
12531
|
class NeuralPageHeaderComponent {
|