ui-core-abv 0.0.92 → 0.1.0

package/fesm2022/ui-core-abv.mjs

@@ -2,11 +2,11 @@ import * as i1 from '@angular/common';
 import { CommonModule, DatePipe, AsyncPipe } from '@angular/common';
 import * as i0 from '@angular/core';
 import { Input, Component, EventEmitter, Output, Directive, forwardRef, inject, ViewContainerRef, ElementRef, ViewChild, HostListener, Pipe, createComponent, Injectable, Injector, Inject, EnvironmentInjector } from '@angular/core';
-import * as i1$1 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, ReactiveFormsModule, FormsModule, FormBuilder, Validators } from '@angular/forms';
-import * as i1$2 from '@angular/cdk/overlay';
+import * as i2 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, ReactiveFormsModule, FormsModule, FormBuilder, FormGroup, FormArray, Validators } from '@angular/forms';
+import * as i1$1 from '@angular/cdk/overlay';
 import { Overlay, OverlayRef } from '@angular/cdk/overlay';
-import * as i1$3 from '@angular/cdk/portal';
+import * as i1$2 from '@angular/cdk/portal';
 import { TemplatePortal, ComponentPortal, PortalModule, CdkPortalOutlet } from '@angular/cdk/portal';
 import { Subject, debounceTime, distinctUntilChanged, tap, switchMap, of, finalize } from 'rxjs';
 import { trigger, transition, style, animate, state, keyframes } from '@angular/animations';
@@ -435,151 +435,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 args: ['document:mouseup']
             }] } });
 
-class UicDynamicFormComponent {
-    fields = [];
-    form;
-    flag = false;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicDynamicFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicDynamicFormComponent, isStandalone: true, selector: "ui-dynamic-form", inputs: { fields: "fields", form: "form" }, ngImport: i0, template: "<div class=\"form\"  [formGroup]=\"form\">\r\n  @for (field of fields; track field.name) {\r\n    <div class=\"col-span-{{field.colSpan || 1}}\">\r\n      \r\n      @if ( ['text','number','date'].includes(field.type)  ) {\r\n        <ui-input \r\n          [error]=\"(form.get(field.name)?.touched && form.get(field.name)?.invalid) ? 'Error': ''\"\r\n          [label]=\"field.label\"\r\n          [icon]=\"field.icon??''\"\r\n          [tip]=\"field.tip??''\"\r\n          >\r\n            <input \r\n              [id]=\"field.name\"\r\n              [formControlName]=\"field.name\"\r\n              [type]=\"field.type\"\r\n              [placeholder]=\"field.placeholder??field.label\"\r\n            />\r\n        </ui-input>\r\n\r\n      }\r\n      @else if (field.type === 'select') {\r\n        <ui-select\r\n          [error]=\"(form.get(field.name)?.touched && form.get(field.name)?.invalid) ? 'Error': ''\"\r\n          [label]=\"field.label\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [tip]=\"field.tip??''\"\r\n          [formControlName]=\"field.name\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-select>\r\n      }\r\n      @else if (field.type === 'checkbox') {\r\n        <ui-checkbox\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [placeholder]=\"field.placeholder??''\"\r\n          [tip]=\"field.tip??''\"\r\n          [label]=\"field.label\"\r\n        ></ui-checkbox>\r\n      }\r\n      @else if (field.type === 'slider') {\r\n        <ui-slider\r\n          [min]=\"field.min??0\"\r\n          [max]=\"field.max??100\"\r\n          [step]=\"field.sliderInterval??1\"\r\n          [markerCount]=\"field.sliderMarks??5\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [tip]=\"field.tip??''\"\r\n          [error]=\"(form.get(field.name)?.touched && form.get(field.name)?.invalid) ? 'Error': ''\"\r\n          [label]=\"field.label\"\r\n        ></ui-slider>\r\n      }\r\n      @else if (field.type === 'switch') {\r\n        <ui-checkbox\r\n          type=\"switch\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [formControlName]=\"field.name\"\r\n          [tip]=\"field.tip??''\"\r\n          [placeholder]=\"field.placeholder??''\"\r\n          [label]=\"field.label\"\r\n        >\r\n        </ui-checkbox>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".form{width:100%;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:stretch;gap:1rem;padding-bottom:1.5rem}h2{margin-top:1.5rem}.col-span-1{grid-column:span 1/span 1}.col-span-2{grid-column:span 2/span 2}.col-span-3{grid-column:span 3/span 3}.col-span-4{grid-column:span 4/span 4}.col-span-5{grid-column:span 5/span 5}.col-span-6{grid-column:span 6/span 6}.col-span-7{grid-column:span 7/span 7}.col-span-8{grid-column:span 8/span 8}.col-span-9{grid-column:span 9/span 9}.col-span-10{grid-column:span 10/span 10}.col-span-11{grid-column:span 11/span 11}.col-span-12{grid-column:span 12/span 12}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: UicSliderComponent, selector: "ui-slider", inputs: ["icon", "iconColor", "label", "error", "tip", "min", "max", "step", "markerCount", "disabled", "loading"] }, { kind: "component", type: UicSelectComponent, selector: "ui-select", inputs: ["icon", "iconColor", "internalIcon", "size", "label", "error", "tip", "showSubtitle", "disabled", "nullable", "options"] }, { kind: "component", type: UicInputComponent, selector: "ui-input", inputs: ["icon", "iconColor", "internalIcon", "size", "label", "error", "tip", "disabled"], outputs: ["clickButton"] }, { kind: "component", type: UicCheckboxComponent, selector: "ui-checkbox", inputs: ["icon", "iconColor", "label", "tip", "type", "placeholder", "disabled", "loading"] }, { kind: "ngmodule", type: FormsModule }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicDynamicFormComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ui-dynamic-form', imports: [ReactiveFormsModule, UicSliderComponent, UicSelectComponent, UicInputComponent, UicCheckboxComponent, FormsModule], template: "<div class=\"form\"  [formGroup]=\"form\">\r\n  @for (field of fields; track field.name) {\r\n    <div class=\"col-span-{{field.colSpan || 1}}\">\r\n      \r\n      @if ( ['text','number','date'].includes(field.type)  ) {\r\n        <ui-input \r\n          [error]=\"(form.get(field.name)?.touched && form.get(field.name)?.invalid) ? 'Error': ''\"\r\n          [label]=\"field.label\"\r\n          [icon]=\"field.icon??''\"\r\n          [tip]=\"field.tip??''\"\r\n          >\r\n            <input \r\n              [id]=\"field.name\"\r\n              [formControlName]=\"field.name\"\r\n              [type]=\"field.type\"\r\n              [placeholder]=\"field.placeholder??field.label\"\r\n            />\r\n        </ui-input>\r\n\r\n      }\r\n      @else if (field.type === 'select') {\r\n        <ui-select\r\n          [error]=\"(form.get(field.name)?.touched && form.get(field.name)?.invalid) ? 'Error': ''\"\r\n          [label]=\"field.label\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [tip]=\"field.tip??''\"\r\n          [formControlName]=\"field.name\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-select>\r\n      }\r\n      @else if (field.type === 'checkbox') {\r\n        <ui-checkbox\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [placeholder]=\"field.placeholder??''\"\r\n          [tip]=\"field.tip??''\"\r\n          [label]=\"field.label\"\r\n        ></ui-checkbox>\r\n      }\r\n      @else if (field.type === 'slider') {\r\n        <ui-slider\r\n          [min]=\"field.min??0\"\r\n          [max]=\"field.max??100\"\r\n          [step]=\"field.sliderInterval??1\"\r\n          [markerCount]=\"field.sliderMarks??5\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [tip]=\"field.tip??''\"\r\n          [error]=\"(form.get(field.name)?.touched && form.get(field.name)?.invalid) ? 'Error': ''\"\r\n          [label]=\"field.label\"\r\n        ></ui-slider>\r\n      }\r\n      @else if (field.type === 'switch') {\r\n        <ui-checkbox\r\n          type=\"switch\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [formControlName]=\"field.name\"\r\n          [tip]=\"field.tip??''\"\r\n          [placeholder]=\"field.placeholder??''\"\r\n          [label]=\"field.label\"\r\n        >\r\n        </ui-checkbox>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".form{width:100%;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:stretch;gap:1rem;padding-bottom:1.5rem}h2{margin-top:1.5rem}.col-span-1{grid-column:span 1/span 1}.col-span-2{grid-column:span 2/span 2}.col-span-3{grid-column:span 3/span 3}.col-span-4{grid-column:span 4/span 4}.col-span-5{grid-column:span 5/span 5}.col-span-6{grid-column:span 6/span 6}.col-span-7{grid-column:span 7/span 7}.col-span-8{grid-column:span 8/span 8}.col-span-9{grid-column:span 9/span 9}.col-span-10{grid-column:span 10/span 10}.col-span-11{grid-column:span 11/span 11}.col-span-12{grid-column:span 12/span 12}\n"] }]
-        }], propDecorators: { fields: [{
-                type: Input
-            }], form: [{
-                type: Input,
-                args: [{ required: true }]
-            }] } });
-
-class UicSkeletonLoaderComponent {
-    inputs = 3;
-    cols = 3;
-    get gridStyle() {
-        return {
-            'grid-template-columns': `repeat(${this.cols}, 1fr)`
-        };
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSkeletonLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicSkeletonLoaderComponent, isStandalone: true, selector: "ui-skeleton-loader", inputs: { inputs: "inputs", cols: "cols" }, ngImport: i0, template: "<div class=\"skeleton-form\" [ngStyle]=\"gridStyle\">\r\n    @for (r of [].constructor(inputs); track $index) {\r\n        <div class=\"skeleton-input-container\">\r\n            <div class=\"skeleton-gradient skeleton-label\"></div>\r\n            <div class=\"skeleton-gradient skeleton-input\"></div>\r\n        </div>\r\n    }\r\n</div>", styles: [".skeleton-form{width:100%;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:stretch;gap:16px;padding:24px 0}.skeleton-gradient{background:linear-gradient(90deg,var(--grey-100) 25%,var(--grey-200) 50%,var(--grey-100) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--input-radius)}.skeleton-label{height:20px;width:50%;margin-bottom:var(--input-label-space)}.skeleton-input{height:40px;width:100%}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSkeletonLoaderComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ui-skeleton-loader', imports: [CommonModule], template: "<div class=\"skeleton-form\" [ngStyle]=\"gridStyle\">\r\n    @for (r of [].constructor(inputs); track $index) {\r\n        <div class=\"skeleton-input-container\">\r\n            <div class=\"skeleton-gradient skeleton-label\"></div>\r\n            <div class=\"skeleton-gradient skeleton-input\"></div>\r\n        </div>\r\n    }\r\n</div>", styles: [".skeleton-form{width:100%;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:stretch;gap:16px;padding:24px 0}.skeleton-gradient{background:linear-gradient(90deg,var(--grey-100) 25%,var(--grey-200) 50%,var(--grey-100) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--input-radius)}.skeleton-label{height:20px;width:50%;margin-bottom:var(--input-label-space)}.skeleton-input{height:40px;width:100%}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}\n"] }]
-        }], propDecorators: { inputs: [{
-                type: Input
-            }], cols: [{
-                type: Input
-            }] } });
-
-class UicFormWrapperComponent {
-    schema;
-    loading = false;
-    initialValues = {};
-    useSteps = false;
-    formSubmit = new EventEmitter();
-    fb = inject(FormBuilder);
-    form = this.fb.group({});
-    currentStep = 0;
-    ngOnInit() {
-        this.buildForm();
-        this.useSteps = !!this.schema.steps && this.schema.steps.length > 0;
-    }
-    ngOnChanges(changes) {
-        if (changes['schema']) {
-            this.buildForm();
-            this.useSteps = !!this.schema.steps && this.schema.steps.length > 0;
-            if (this.useSteps && this.schema?.steps) {
-                this.currentStep = Math.min(this.currentStep, (this.schema.steps.length - 1) || 0);
-            }
-        }
-    }
-    handleSubmit() {
-        if (this.form.valid) {
-            this.formSubmit.emit({ result: true, form: this.form.value });
-        }
-        else {
-            this.form.markAllAsTouched();
-            this.formSubmit.emit({ result: false, form: null });
-        }
-    }
-    collectAllFields() {
-        if (!this.schema)
-            return [];
-        if (this.useSteps && this.schema.steps) {
-            return this.schema.steps.flatMap(step => (step.blocks ?? []).flatMap(b => b.fields ?? []));
-        }
-        return (this.schema.blocks ?? []).flatMap(b => b.fields ?? []);
-    }
-    buildForm() {
-        const fields = this.collectAllFields();
-        fields.forEach(f => {
-            if (!this.form.contains(f.name)) {
-                const validators = this.mapValidatorsFromField(f);
-                let initial = this.initialValues[f.name] ?? null;
-                if (f.type == 'checkbox' && initial == null)
-                    initial = false;
-                this.form.addControl(f.name, this.fb.control(initial, validators));
-            }
-        });
-        const namesToKeep = new Set(fields.map(f => f.name));
-        Object.keys(this.form.controls).forEach(name => {
-            if (!namesToKeep.has(name)) {
-                this.form.removeControl(name);
-            }
-        });
-    }
-    mapValidatorsFromField(f) {
-        const validators = [];
-        if (f.required)
-            validators.push(Validators.required);
-        if (typeof f.min === 'number')
-            validators.push(Validators.min(f.min));
-        if (typeof f.max === 'number')
-            validators.push(Validators.max(f.max));
-        if (f.pattern instanceof RegExp)
-            validators.push(Validators.pattern(f.pattern));
-        return validators;
-    }
-    getCurrentBlocks() {
-        if (!this.schema)
-            return [];
-        if (this.useSteps) {
-            const step = this.schema.steps?.[this.currentStep];
-            return step?.blocks ?? [];
-        }
-        return this.schema.blocks ?? [];
-    }
-    nextStep() {
-        const stepsCount = this.schema?.steps?.length ?? 0;
-        if (this.useSteps && this.currentStep < stepsCount - 1) {
-            this.currentStep++;
-        }
-    }
-    prevStep() {
-        if (this.useSteps && this.currentStep > 0) {
-            this.currentStep--;
-        }
-    }
-    getStepTitle() {
-        return this.schema.steps?.[this.currentStep]?.title ?? '';
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicFormWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicFormWrapperComponent, isStandalone: true, selector: "ui-form-wrapper", inputs: { schema: "schema", loading: "loading", initialValues: "initialValues" }, outputs: { formSubmit: "formSubmit" }, usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"form\" (ngSubmit)=\"handleSubmit()\">\r\n\r\n  @if (useSteps) {\r\n    @if (schema.steps?.length) {\r\n\r\n      <div class=\"step-title\">{{ getStepTitle()}}</div>\r\n      @if (loading) {\r\n        <ui-skeleton-loader\r\n          [cols]=\"schema.cols\"\r\n          [inputs]=\"(schema.steps?.[currentStep]?.blocks?.[0]?.fields?.length) ?? 0\"\r\n        ></ui-skeleton-loader>\r\n      } \r\n      @else {\r\n        @for (block of getCurrentBlocks(); track block.title) {\r\n          <section class=\"form-block\">\r\n            <div class=\"block-title\">{{ block.title }}</div>\r\n            <ui-dynamic-form\r\n              [fields]=\"block.fields\"\r\n              [form]=\"form\">\r\n            </ui-dynamic-form>\r\n          </section>\r\n        }\r\n      }\r\n      <div class=\"step-controls\">\r\n        <button type=\"button\" (click)=\"prevStep()\" [disabled]=\"currentStep === 0\">Anterior</button>\r\n\r\n        @if ((schema.steps?.length ?? 0) > 0 && currentStep < ((schema.steps?.length ?? 1) - 1)) {\r\n          <button type=\"button\" (click)=\"nextStep()\">Siguiente</button>\r\n        } @else {\r\n          <button type=\"submit\">Guardar</button>\r\n        }\r\n      </div>\r\n    } \r\n  } \r\n  @else {\r\n    @for (block of getCurrentBlocks(); track block.title) {\r\n      <section class=\"form-block\">\r\n        @if (block.title){\r\n            <div class=\"block-title\">{{ block.title }}</div>\r\n        }\r\n        @if (loading) {\r\n          <ui-skeleton-loader\r\n            [cols]=\"schema.cols\"\r\n            [inputs]=\"block.fields.length\"\r\n          ></ui-skeleton-loader>\r\n        } @else {\r\n          <ui-dynamic-form\r\n            [fields]=\"block.fields\"\r\n            [form]=\"form\">\r\n          </ui-dynamic-form>\r\n        }\r\n      </section>\r\n    }\r\n  }\r\n</form>\r\n", styles: [":host{display:block;padding:.25rem 0}.block-title{font-size:1.625rem;font-weight:600;line-height:calc(1.625rem + 4px);margin:1.5rem 0;color:var(--grey-950)}\n"], dependencies: [{ kind: "component", type: UicDynamicFormComponent, selector: "ui-dynamic-form", inputs: ["fields", "form"] }, { kind: "component", type: UicSkeletonLoaderComponent, selector: "ui-skeleton-loader", inputs: ["inputs", "cols"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicFormWrapperComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ui-form-wrapper', imports: [UicDynamicFormComponent, UicSkeletonLoaderComponent, ReactiveFormsModule], template: "<form [formGroup]=\"form\" (ngSubmit)=\"handleSubmit()\">\r\n\r\n  @if (useSteps) {\r\n    @if (schema.steps?.length) {\r\n\r\n      <div class=\"step-title\">{{ getStepTitle()}}</div>\r\n      @if (loading) {\r\n        <ui-skeleton-loader\r\n          [cols]=\"schema.cols\"\r\n          [inputs]=\"(schema.steps?.[currentStep]?.blocks?.[0]?.fields?.length) ?? 0\"\r\n        ></ui-skeleton-loader>\r\n      } \r\n      @else {\r\n        @for (block of getCurrentBlocks(); track block.title) {\r\n          <section class=\"form-block\">\r\n            <div class=\"block-title\">{{ block.title }}</div>\r\n            <ui-dynamic-form\r\n              [fields]=\"block.fields\"\r\n              [form]=\"form\">\r\n            </ui-dynamic-form>\r\n          </section>\r\n        }\r\n      }\r\n      <div class=\"step-controls\">\r\n        <button type=\"button\" (click)=\"prevStep()\" [disabled]=\"currentStep === 0\">Anterior</button>\r\n\r\n        @if ((schema.steps?.length ?? 0) > 0 && currentStep < ((schema.steps?.length ?? 1) - 1)) {\r\n          <button type=\"button\" (click)=\"nextStep()\">Siguiente</button>\r\n        } @else {\r\n          <button type=\"submit\">Guardar</button>\r\n        }\r\n      </div>\r\n    } \r\n  } \r\n  @else {\r\n    @for (block of getCurrentBlocks(); track block.title) {\r\n      <section class=\"form-block\">\r\n        @if (block.title){\r\n            <div class=\"block-title\">{{ block.title }}</div>\r\n        }\r\n        @if (loading) {\r\n          <ui-skeleton-loader\r\n            [cols]=\"schema.cols\"\r\n            [inputs]=\"block.fields.length\"\r\n          ></ui-skeleton-loader>\r\n        } @else {\r\n          <ui-dynamic-form\r\n            [fields]=\"block.fields\"\r\n            [form]=\"form\">\r\n          </ui-dynamic-form>\r\n        }\r\n      </section>\r\n    }\r\n  }\r\n</form>\r\n", styles: [":host{display:block;padding:.25rem 0}.block-title{font-size:1.625rem;font-weight:600;line-height:calc(1.625rem + 4px);margin:1.5rem 0;color:var(--grey-950)}\n"] }]
-        }], propDecorators: { schema: [{
-                type: Input
-            }], loading: [{
-                type: Input
-            }], initialValues: [{
-                type: Input
-            }], formSubmit: [{
-                type: Output
-            }] } });
-
 const base = createValueAccessor();
 class UicDatePickerComponent extends base {
     icon = ''; // Icono externo
@@ -804,7 +659,7 @@ class UicDatePickerComponent extends base {
                 useExisting: forwardRef(() => UicDatePickerComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "calendarTemplate", first: true, predicate: ["calendarTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"input-wrapper\">\r\n  @if (icon) {\r\n  <i class=\"input-externalicon f-{{ iconColor }} {{ icon }}\"></i>\r\n  }\r\n  <div\r\n    class=\"input-elements\"\r\n    [style]=\"icon ? 'max-width: calc(100% - 34px);' : ''\"\r\n  >\r\n    @if (label) {\r\n    <div class=\"label inputlabel\" [class.font-error]=\"error\">{{ label }}</div>\r\n    }\r\n    <div class=\"fakeinput-wrapp \" >\r\n      <div  class=\"fakeinput \" \r\n        [ngClass]=\"{ errorinput: error, disabledinput: disabled }\">\r\n        @if (internalIcon) {\r\n        <i class=\"input-internalicon-m {{ internalIcon }}\"></i>\r\n        }\r\n        <input\r\n          type=\"text\"\r\n          [disabled]=\"disabled\"\r\n          placeholder=\"dd-mm-yyyy\"\r\n          [value]=\"value ? (value | date : 'dd/MM/yyyy') : ''\"\r\n          readonly\r\n          (click)=\"openCalendar()\"\r\n        />\r\n      </div>\r\n      <!-- Overlay Template -->\r\n      <ng-template #calendarTemplate>\r\n        <div class=\"calendar\">\r\n          <div class=\"calendar-header\">\r\n            <span (click)=\"changeView()\">\r\n              @if (view === 'days') {\r\n              {{ monthName }} de {{ selectedYear }}\r\n              } @else if (view === 'months') {\r\n              {{ selectedYear }}\r\n              } @else {\r\n              {{ decadeRange[0] }} - {{ decadeRange[decadeRange.length - 1] }}\r\n              }\r\n            </span>\r\n            <ui-button\r\n              size=\"s\"\r\n              type=\"ghost\"\r\n              [iconOnly]=\"true\"\r\n              icon=\"ri-arrow-drop-up-line\"\r\n              (click)=\"prev()\"\r\n              >&lt;</ui-button\r\n            >\r\n            <ui-button\r\n              size=\"s\"\r\n              type=\"ghost\"\r\n              [iconOnly]=\"true\"\r\n              icon=\"ri-arrow-drop-down-line\"\r\n              (click)=\"next()\"\r\n              >&gt;</ui-button\r\n            >\r\n          </div>\r\n          <!-- Vista Days -->\r\n          @if (view === 'days') {\r\n          <div class=\"calendar-grid\">\r\n            @for (d of ['DO','LU','MA','MI','JU','VI','SA']; track $index) {\r\n            <div class=\"weekday\">{{ d }}</div>\r\n            } @for (week of monthWeeks; track $index) { @for (day of week;\r\n            track $index) {\r\n            <button\r\n              class=\"day\"\r\n              [disabled]=\"\r\n                (minDate && day ? day < minDate : false) ||\r\n                (maxDate && day ? day > maxDate : false)\r\n              \"\r\n              [class.today]=\"isToday(day)\"\r\n              [class.day-selected]=\"isPainted(day)\"\r\n              [class.empty]=\"!day\"\r\n              (click)=\"day && selectDate(day)\"\r\n            >\r\n              {{ day?.getDate() }}\r\n            </button>\r\n            } }\r\n          </div>\r\n          }\r\n          <!-- Vista Months -->\r\n          @if (view === 'months') {\r\n          <div class=\"calendar-grid months\">\r\n            @for (m of months; let i = $index; track i) {\r\n            <button\r\n              class=\"day\"\r\n              [class.today]=\"isThisMonth(m)\"\r\n              (click)=\"selectMonth(i)\"\r\n            >\r\n              {{ m }}\r\n            </button>\r\n            }\r\n          </div>\r\n          }\r\n          <!-- Vista Years -->\r\n          @if (view === 'years') {\r\n          <div class=\"calendar-grid years\">\r\n            @for (y of decadeRange; track $index) {\r\n            <button\r\n              class=\"day\"\r\n              [class.today]=\"y == currentYear\"\r\n              (click)=\"selectYear(y)\"\r\n            >\r\n              {{ y }}\r\n            </button>\r\n            }\r\n          </div>\r\n          }\r\n          <div class=\"calendar-footer\">\r\n            <ui-button\r\n              color=\"red\"\r\n              size=\"s\"\r\n              type=\"ghost\"\r\n              (click)=\"cleanInput()\"\r\n              >Limpiar</ui-button\r\n            >\r\n            <ui-button\r\n              color=\"blue\"\r\n              size=\"s\"\r\n              type=\"ghost\"\r\n              (click)=\"pickToday()\"\r\n              >Hoy</ui-button\r\n            >\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".date-picker{position:relative}.calendar{background:var(--white);border:1px solid var(--grey-300);border-radius:var(--input-radius);box-shadow:0 2px 6px #00000026;padding:.5rem;width:250px}.calendar-header{display:flex;gap:5px;align-items:center;margin-bottom:8px}.calendar-header span{-webkit-user-select:none;user-select:none;flex:1 1;cursor:pointer;font-size:.875rem;line-height:1.25rem;font-weight:500;transition:ease .3s;padding:.25rem;border-radius:6px;margin-right:3px}.calendar-header span:hover{background-color:var(--primary-100)}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.calendar-grid.months{grid-template-columns:repeat(3,1fr)}.calendar-grid.years{grid-template-columns:repeat(4,1fr)}.calendar-grid .empty{visibility:hidden}.weekday{font-size:.875rem}.day{padding:6px;border:none;background:transparent;border-radius:var(--button-radius);cursor:pointer;transition:ease .5s}.day:enabled:hover{color:var(--grey-950);background:var(--secondary-300)}.day:disabled{color:var(--grey-300)}.today{box-shadow:0 0 0 3px var(--secondary-alpha)}.day-selected{background-color:var(--secondary-500);color:var(--white)}.calendar-footer{display:flex;padding-top:.25rem;border-top:solid 1px var(--grey-200);justify-content:space-between}\n", ":host{width:100%}.input-container{flex:1 1;padding:.25rem;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{line-height:1rem;display:flex;align-items:center;padding:6px 12px;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon-s{color:var(--grey-200);font-size:1rem}.input-internalicon-m{color:var(--grey-200);font-size:1.125rem}.input-internalicon-l{color:var(--grey-200);font-size:1.25rem}.label{font-size:.875rem;line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.fakeinput{border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;padding-left:.25rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;height:calc(4 * var(--form-ref))}.fakeinput-wrapp{position:relative}.fakeinput-content{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;white-space:nowrap}.fakeinput-content i{font-size:20px}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:5px;font-size:14px;flex-grow:1;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--grey-400)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--grey-200);color:var(--grey-800)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--grey-200);color:var(--red-500)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:focus-within button{background-color:var(--primary-500);color:var(--white)}.fakeinput:focus-within button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput:focus-within button:enabled:active{background-color:var(--primary-600)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)}.t-disabled{color:var(--grey-300);padding:5px;text-align:center}.disabledinput{background-color:var(--grey-100);color:var(--grey-400)}.disabledinput ::ng-deep input{color:var(--grey-800)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-300)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}\n"], dependencies: [{ kind: "pipe", type: DatePipe, name: "date" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }] });
+        ], viewQueries: [{ propertyName: "calendarTemplate", first: true, predicate: ["calendarTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"input-wrapper\">\r\n  @if (icon) {\r\n  <i class=\"input-externalicon f-{{ iconColor }} {{ icon }}\"></i>\r\n  }\r\n  <div\r\n    class=\"input-elements\"\r\n    [style]=\"icon ? 'max-width: calc(100% - 34px);' : ''\"\r\n  >\r\n    @if (label) {\r\n    <div class=\"label inputlabel\" [class.font-error]=\"error\">{{ label }}</div>\r\n    }\r\n    <div class=\"fakeinput-wrapp \" >\r\n      <div  class=\"fakeinput \" \r\n        [ngClass]=\"{ errorinput: error, disabledinput: disabled }\">\r\n        @if (internalIcon) {\r\n        <i class=\"input-internalicon-m {{ internalIcon }}\"></i>\r\n        }\r\n        <input\r\n          type=\"text\"\r\n          [disabled]=\"disabled\"\r\n          placeholder=\"dd-mm-yyyy\"\r\n          [value]=\"value ? (value | date : 'dd/MM/yyyy') : ''\"\r\n          readonly\r\n          (click)=\"openCalendar()\"\r\n        />\r\n      </div>\r\n      <!-- Overlay Template -->\r\n      <ng-template #calendarTemplate>\r\n        <div class=\"calendar\">\r\n          <div class=\"calendar-header\">\r\n            <span (click)=\"changeView()\">\r\n              @if (view === 'days') {\r\n              {{ monthName }} de {{ selectedYear }}\r\n              } @else if (view === 'months') {\r\n              {{ selectedYear }}\r\n              } @else {\r\n              {{ decadeRange[0] }} - {{ decadeRange[decadeRange.length - 1] }}\r\n              }\r\n            </span>\r\n            <ui-button\r\n              size=\"s\"\r\n              type=\"ghost\"\r\n              [iconOnly]=\"true\"\r\n              icon=\"ri-arrow-drop-up-line\"\r\n              (click)=\"prev()\"\r\n              >&lt;</ui-button\r\n            >\r\n            <ui-button\r\n              size=\"s\"\r\n              type=\"ghost\"\r\n              [iconOnly]=\"true\"\r\n              icon=\"ri-arrow-drop-down-line\"\r\n              (click)=\"next()\"\r\n              >&gt;</ui-button\r\n            >\r\n          </div>\r\n          <!-- Vista Days -->\r\n          @if (view === 'days') {\r\n          <div class=\"calendar-grid\">\r\n            @for (d of ['DO','LU','MA','MI','JU','VI','SA']; track $index) {\r\n            <div class=\"weekday\">{{ d }}</div>\r\n            } @for (week of monthWeeks; track $index) { @for (day of week;\r\n            track $index) {\r\n            <button\r\n              class=\"day\"\r\n              [disabled]=\"\r\n                (minDate && day ? day < minDate : false) ||\r\n                (maxDate && day ? day > maxDate : false)\r\n              \"\r\n              [class.today]=\"isToday(day)\"\r\n              [class.day-selected]=\"isPainted(day)\"\r\n              [class.empty]=\"!day\"\r\n              (click)=\"day && selectDate(day)\"\r\n            >\r\n              {{ day?.getDate() }}\r\n            </button>\r\n            } }\r\n          </div>\r\n          }\r\n          <!-- Vista Months -->\r\n          @if (view === 'months') {\r\n          <div class=\"calendar-grid months\">\r\n            @for (m of months; let i = $index; track i) {\r\n            <button\r\n              class=\"day\"\r\n              [class.today]=\"isThisMonth(m)\"\r\n              (click)=\"selectMonth(i)\"\r\n            >\r\n              {{ m }}\r\n            </button>\r\n            }\r\n          </div>\r\n          }\r\n          <!-- Vista Years -->\r\n          @if (view === 'years') {\r\n          <div class=\"calendar-grid years\">\r\n            @for (y of decadeRange; track $index) {\r\n            <button\r\n              class=\"day\"\r\n              [class.today]=\"y == currentYear\"\r\n              (click)=\"selectYear(y)\"\r\n            >\r\n              {{ y }}\r\n            </button>\r\n            }\r\n          </div>\r\n          }\r\n          <div class=\"calendar-footer\">\r\n            <ui-button\r\n              color=\"red\"\r\n              size=\"s\"\r\n              type=\"ghost\"\r\n              (click)=\"cleanInput()\"\r\n              >Limpiar</ui-button\r\n            >\r\n            <ui-button\r\n              color=\"blue\"\r\n              size=\"s\"\r\n              type=\"ghost\"\r\n              (click)=\"pickToday()\"\r\n              >Hoy</ui-button\r\n            >\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n    </div>\r\n    <!-- ALERTS -->\r\n    @if (error) {\r\n        <div class=\"fakeinput-alert f-red\">{{error}}</div>\r\n    }\r\n    @if (tip) {\r\n        <div class=\"fakeinput-alert tip\">{{tip}}</div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".date-picker{position:relative}.calendar{background:var(--white);border:1px solid var(--grey-300);border-radius:var(--input-radius);box-shadow:0 2px 6px #00000026;padding:.5rem;width:250px}.calendar-header{display:flex;gap:5px;align-items:center;margin-bottom:8px}.calendar-header span{-webkit-user-select:none;user-select:none;flex:1 1;cursor:pointer;font-size:.875rem;line-height:1.25rem;font-weight:500;transition:ease .3s;padding:.25rem;border-radius:6px;margin-right:3px}.calendar-header span:hover{background-color:var(--primary-100)}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.calendar-grid.months{grid-template-columns:repeat(3,1fr)}.calendar-grid.years{grid-template-columns:repeat(4,1fr)}.calendar-grid .empty{visibility:hidden}.weekday{font-size:.875rem}.day{padding:6px;border:none;background:transparent;border-radius:var(--button-radius);cursor:pointer;transition:ease .5s}.day:enabled:hover{color:var(--grey-950);background:var(--secondary-300)}.day:disabled{color:var(--grey-300)}.today{box-shadow:0 0 0 3px var(--secondary-alpha)}.day-selected{background-color:var(--secondary-500);color:var(--white)}.calendar-footer{display:flex;padding-top:.25rem;border-top:solid 1px var(--grey-200);justify-content:space-between}\n", ":host{width:100%}.input-container{flex:1 1;padding:.25rem;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{line-height:1rem;display:flex;align-items:center;padding:6px 12px;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon-s{color:var(--grey-200);font-size:1rem}.input-internalicon-m{color:var(--grey-200);font-size:1.125rem}.input-internalicon-l{color:var(--grey-200);font-size:1.25rem}.label{font-size:.875rem;line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.fakeinput{border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;padding-left:.25rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;height:calc(4 * var(--form-ref))}.fakeinput-wrapp{position:relative}.fakeinput-content{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;white-space:nowrap}.fakeinput-content i{font-size:20px}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:5px;font-size:14px;flex-grow:1;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--grey-400)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--grey-200);color:var(--grey-800)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--grey-200);color:var(--red-500)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:focus-within button{background-color:var(--primary-500);color:var(--white)}.fakeinput:focus-within button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput:focus-within button:enabled:active{background-color:var(--primary-600)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)}.t-disabled{color:var(--grey-300);padding:5px;text-align:center}.disabledinput{background-color:var(--grey-100);color:var(--grey-400)}.disabledinput ::ng-deep input{color:var(--grey-800)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-300)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}\n"], dependencies: [{ kind: "pipe", type: DatePipe, name: "date" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicDatePickerComponent, decorators: [{
             type: Component,
@@ -814,7 +669,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                             useExisting: forwardRef(() => UicDatePickerComponent),
                             multi: true
                         }
-                    ], template: "<div class=\"input-wrapper\">\r\n  @if (icon) {\r\n  <i class=\"input-externalicon f-{{ iconColor }} {{ icon }}\"></i>\r\n  }\r\n  <div\r\n    class=\"input-elements\"\r\n    [style]=\"icon ? 'max-width: calc(100% - 34px);' : ''\"\r\n  >\r\n    @if (label) {\r\n    <div class=\"label inputlabel\" [class.font-error]=\"error\">{{ label }}</div>\r\n    }\r\n    <div class=\"fakeinput-wrapp \" >\r\n      <div  class=\"fakeinput \" \r\n        [ngClass]=\"{ errorinput: error, disabledinput: disabled }\">\r\n        @if (internalIcon) {\r\n        <i class=\"input-internalicon-m {{ internalIcon }}\"></i>\r\n        }\r\n        <input\r\n          type=\"text\"\r\n          [disabled]=\"disabled\"\r\n          placeholder=\"dd-mm-yyyy\"\r\n          [value]=\"value ? (value | date : 'dd/MM/yyyy') : ''\"\r\n          readonly\r\n          (click)=\"openCalendar()\"\r\n        />\r\n      </div>\r\n      <!-- Overlay Template -->\r\n      <ng-template #calendarTemplate>\r\n        <div class=\"calendar\">\r\n          <div class=\"calendar-header\">\r\n            <span (click)=\"changeView()\">\r\n              @if (view === 'days') {\r\n              {{ monthName }} de {{ selectedYear }}\r\n              } @else if (view === 'months') {\r\n              {{ selectedYear }}\r\n              } @else {\r\n              {{ decadeRange[0] }} - {{ decadeRange[decadeRange.length - 1] }}\r\n              }\r\n            </span>\r\n            <ui-button\r\n              size=\"s\"\r\n              type=\"ghost\"\r\n              [iconOnly]=\"true\"\r\n              icon=\"ri-arrow-drop-up-line\"\r\n              (click)=\"prev()\"\r\n              >&lt;</ui-button\r\n            >\r\n            <ui-button\r\n              size=\"s\"\r\n              type=\"ghost\"\r\n              [iconOnly]=\"true\"\r\n              icon=\"ri-arrow-drop-down-line\"\r\n              (click)=\"next()\"\r\n              >&gt;</ui-button\r\n            >\r\n          </div>\r\n          <!-- Vista Days -->\r\n          @if (view === 'days') {\r\n          <div class=\"calendar-grid\">\r\n            @for (d of ['DO','LU','MA','MI','JU','VI','SA']; track $index) {\r\n            <div class=\"weekday\">{{ d }}</div>\r\n            } @for (week of monthWeeks; track $index) { @for (day of week;\r\n            track $index) {\r\n            <button\r\n              class=\"day\"\r\n              [disabled]=\"\r\n                (minDate && day ? day < minDate : false) ||\r\n                (maxDate && day ? day > maxDate : false)\r\n              \"\r\n              [class.today]=\"isToday(day)\"\r\n              [class.day-selected]=\"isPainted(day)\"\r\n              [class.empty]=\"!day\"\r\n              (click)=\"day && selectDate(day)\"\r\n            >\r\n              {{ day?.getDate() }}\r\n            </button>\r\n            } }\r\n          </div>\r\n          }\r\n          <!-- Vista Months -->\r\n          @if (view === 'months') {\r\n          <div class=\"calendar-grid months\">\r\n            @for (m of months; let i = $index; track i) {\r\n            <button\r\n              class=\"day\"\r\n              [class.today]=\"isThisMonth(m)\"\r\n              (click)=\"selectMonth(i)\"\r\n            >\r\n              {{ m }}\r\n            </button>\r\n            }\r\n          </div>\r\n          }\r\n          <!-- Vista Years -->\r\n          @if (view === 'years') {\r\n          <div class=\"calendar-grid years\">\r\n            @for (y of decadeRange; track $index) {\r\n            <button\r\n              class=\"day\"\r\n              [class.today]=\"y == currentYear\"\r\n              (click)=\"selectYear(y)\"\r\n            >\r\n              {{ y }}\r\n            </button>\r\n            }\r\n          </div>\r\n          }\r\n          <div class=\"calendar-footer\">\r\n            <ui-button\r\n              color=\"red\"\r\n              size=\"s\"\r\n              type=\"ghost\"\r\n              (click)=\"cleanInput()\"\r\n              >Limpiar</ui-button\r\n            >\r\n            <ui-button\r\n              color=\"blue\"\r\n              size=\"s\"\r\n              type=\"ghost\"\r\n              (click)=\"pickToday()\"\r\n              >Hoy</ui-button\r\n            >\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".date-picker{position:relative}.calendar{background:var(--white);border:1px solid var(--grey-300);border-radius:var(--input-radius);box-shadow:0 2px 6px #00000026;padding:.5rem;width:250px}.calendar-header{display:flex;gap:5px;align-items:center;margin-bottom:8px}.calendar-header span{-webkit-user-select:none;user-select:none;flex:1 1;cursor:pointer;font-size:.875rem;line-height:1.25rem;font-weight:500;transition:ease .3s;padding:.25rem;border-radius:6px;margin-right:3px}.calendar-header span:hover{background-color:var(--primary-100)}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.calendar-grid.months{grid-template-columns:repeat(3,1fr)}.calendar-grid.years{grid-template-columns:repeat(4,1fr)}.calendar-grid .empty{visibility:hidden}.weekday{font-size:.875rem}.day{padding:6px;border:none;background:transparent;border-radius:var(--button-radius);cursor:pointer;transition:ease .5s}.day:enabled:hover{color:var(--grey-950);background:var(--secondary-300)}.day:disabled{color:var(--grey-300)}.today{box-shadow:0 0 0 3px var(--secondary-alpha)}.day-selected{background-color:var(--secondary-500);color:var(--white)}.calendar-footer{display:flex;padding-top:.25rem;border-top:solid 1px var(--grey-200);justify-content:space-between}\n", ":host{width:100%}.input-container{flex:1 1;padding:.25rem;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{line-height:1rem;display:flex;align-items:center;padding:6px 12px;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon-s{color:var(--grey-200);font-size:1rem}.input-internalicon-m{color:var(--grey-200);font-size:1.125rem}.input-internalicon-l{color:var(--grey-200);font-size:1.25rem}.label{font-size:.875rem;line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.fakeinput{border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;padding-left:.25rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;height:calc(4 * var(--form-ref))}.fakeinput-wrapp{position:relative}.fakeinput-content{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;white-space:nowrap}.fakeinput-content i{font-size:20px}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:5px;font-size:14px;flex-grow:1;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--grey-400)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--grey-200);color:var(--grey-800)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--grey-200);color:var(--red-500)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:focus-within button{background-color:var(--primary-500);color:var(--white)}.fakeinput:focus-within button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput:focus-within button:enabled:active{background-color:var(--primary-600)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)}.t-disabled{color:var(--grey-300);padding:5px;text-align:center}.disabledinput{background-color:var(--grey-100);color:var(--grey-400)}.disabledinput ::ng-deep input{color:var(--grey-800)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-300)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}\n"] }]
+                    ], template: "<div class=\"input-wrapper\">\r\n  @if (icon) {\r\n  <i class=\"input-externalicon f-{{ iconColor }} {{ icon }}\"></i>\r\n  }\r\n  <div\r\n    class=\"input-elements\"\r\n    [style]=\"icon ? 'max-width: calc(100% - 34px);' : ''\"\r\n  >\r\n    @if (label) {\r\n    <div class=\"label inputlabel\" [class.font-error]=\"error\">{{ label }}</div>\r\n    }\r\n    <div class=\"fakeinput-wrapp \" >\r\n      <div  class=\"fakeinput \" \r\n        [ngClass]=\"{ errorinput: error, disabledinput: disabled }\">\r\n        @if (internalIcon) {\r\n        <i class=\"input-internalicon-m {{ internalIcon }}\"></i>\r\n        }\r\n        <input\r\n          type=\"text\"\r\n          [disabled]=\"disabled\"\r\n          placeholder=\"dd-mm-yyyy\"\r\n          [value]=\"value ? (value | date : 'dd/MM/yyyy') : ''\"\r\n          readonly\r\n          (click)=\"openCalendar()\"\r\n        />\r\n      </div>\r\n      <!-- Overlay Template -->\r\n      <ng-template #calendarTemplate>\r\n        <div class=\"calendar\">\r\n          <div class=\"calendar-header\">\r\n            <span (click)=\"changeView()\">\r\n              @if (view === 'days') {\r\n              {{ monthName }} de {{ selectedYear }}\r\n              } @else if (view === 'months') {\r\n              {{ selectedYear }}\r\n              } @else {\r\n              {{ decadeRange[0] }} - {{ decadeRange[decadeRange.length - 1] }}\r\n              }\r\n            </span>\r\n            <ui-button\r\n              size=\"s\"\r\n              type=\"ghost\"\r\n              [iconOnly]=\"true\"\r\n              icon=\"ri-arrow-drop-up-line\"\r\n              (click)=\"prev()\"\r\n              >&lt;</ui-button\r\n            >\r\n            <ui-button\r\n              size=\"s\"\r\n              type=\"ghost\"\r\n              [iconOnly]=\"true\"\r\n              icon=\"ri-arrow-drop-down-line\"\r\n              (click)=\"next()\"\r\n              >&gt;</ui-button\r\n            >\r\n          </div>\r\n          <!-- Vista Days -->\r\n          @if (view === 'days') {\r\n          <div class=\"calendar-grid\">\r\n            @for (d of ['DO','LU','MA','MI','JU','VI','SA']; track $index) {\r\n            <div class=\"weekday\">{{ d }}</div>\r\n            } @for (week of monthWeeks; track $index) { @for (day of week;\r\n            track $index) {\r\n            <button\r\n              class=\"day\"\r\n              [disabled]=\"\r\n                (minDate && day ? day < minDate : false) ||\r\n                (maxDate && day ? day > maxDate : false)\r\n              \"\r\n              [class.today]=\"isToday(day)\"\r\n              [class.day-selected]=\"isPainted(day)\"\r\n              [class.empty]=\"!day\"\r\n              (click)=\"day && selectDate(day)\"\r\n            >\r\n              {{ day?.getDate() }}\r\n            </button>\r\n            } }\r\n          </div>\r\n          }\r\n          <!-- Vista Months -->\r\n          @if (view === 'months') {\r\n          <div class=\"calendar-grid months\">\r\n            @for (m of months; let i = $index; track i) {\r\n            <button\r\n              class=\"day\"\r\n              [class.today]=\"isThisMonth(m)\"\r\n              (click)=\"selectMonth(i)\"\r\n            >\r\n              {{ m }}\r\n            </button>\r\n            }\r\n          </div>\r\n          }\r\n          <!-- Vista Years -->\r\n          @if (view === 'years') {\r\n          <div class=\"calendar-grid years\">\r\n            @for (y of decadeRange; track $index) {\r\n            <button\r\n              class=\"day\"\r\n              [class.today]=\"y == currentYear\"\r\n              (click)=\"selectYear(y)\"\r\n            >\r\n              {{ y }}\r\n            </button>\r\n            }\r\n          </div>\r\n          }\r\n          <div class=\"calendar-footer\">\r\n            <ui-button\r\n              color=\"red\"\r\n              size=\"s\"\r\n              type=\"ghost\"\r\n              (click)=\"cleanInput()\"\r\n              >Limpiar</ui-button\r\n            >\r\n            <ui-button\r\n              color=\"blue\"\r\n              size=\"s\"\r\n              type=\"ghost\"\r\n              (click)=\"pickToday()\"\r\n              >Hoy</ui-button\r\n            >\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n    </div>\r\n    <!-- ALERTS -->\r\n    @if (error) {\r\n        <div class=\"fakeinput-alert f-red\">{{error}}</div>\r\n    }\r\n    @if (tip) {\r\n        <div class=\"fakeinput-alert tip\">{{tip}}</div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".date-picker{position:relative}.calendar{background:var(--white);border:1px solid var(--grey-300);border-radius:var(--input-radius);box-shadow:0 2px 6px #00000026;padding:.5rem;width:250px}.calendar-header{display:flex;gap:5px;align-items:center;margin-bottom:8px}.calendar-header span{-webkit-user-select:none;user-select:none;flex:1 1;cursor:pointer;font-size:.875rem;line-height:1.25rem;font-weight:500;transition:ease .3s;padding:.25rem;border-radius:6px;margin-right:3px}.calendar-header span:hover{background-color:var(--primary-100)}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.calendar-grid.months{grid-template-columns:repeat(3,1fr)}.calendar-grid.years{grid-template-columns:repeat(4,1fr)}.calendar-grid .empty{visibility:hidden}.weekday{font-size:.875rem}.day{padding:6px;border:none;background:transparent;border-radius:var(--button-radius);cursor:pointer;transition:ease .5s}.day:enabled:hover{color:var(--grey-950);background:var(--secondary-300)}.day:disabled{color:var(--grey-300)}.today{box-shadow:0 0 0 3px var(--secondary-alpha)}.day-selected{background-color:var(--secondary-500);color:var(--white)}.calendar-footer{display:flex;padding-top:.25rem;border-top:solid 1px var(--grey-200);justify-content:space-between}\n", ":host{width:100%}.input-container{flex:1 1;padding:.25rem;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{line-height:1rem;display:flex;align-items:center;padding:6px 12px;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon-s{color:var(--grey-200);font-size:1rem}.input-internalicon-m{color:var(--grey-200);font-size:1.125rem}.input-internalicon-l{color:var(--grey-200);font-size:1.25rem}.label{font-size:.875rem;line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.fakeinput{border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;padding-left:.25rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;height:calc(4 * var(--form-ref))}.fakeinput-wrapp{position:relative}.fakeinput-content{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;white-space:nowrap}.fakeinput-content i{font-size:20px}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:5px;font-size:14px;flex-grow:1;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--grey-400)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--grey-200);color:var(--grey-800)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--grey-200);color:var(--red-500)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:focus-within button{background-color:var(--primary-500);color:var(--white)}.fakeinput:focus-within button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput:focus-within button:enabled:active{background-color:var(--primary-600)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)}.t-disabled{color:var(--grey-300);padding:5px;text-align:center}.disabledinput{background-color:var(--grey-100);color:var(--grey-400)}.disabledinput ::ng-deep input{color:var(--grey-800)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-300)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}\n"] }]
         }], propDecorators: { icon: [{
                 type: Input
             }], iconColor: [{
@@ -838,6 +693,228 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 args: ['calendarTemplate']
             }] } });
 
+class UicDynamicFormComponent {
+    fields = [];
+    form;
+    flag = false;
+    cols = 2;
+    // MANEJO DE ERRORES
+    getErrorMessages(field) {
+        const control = this.form.get(field.name);
+        if (!control?.errors)
+            return [];
+        if (!(control.touched || control.dirty))
+            return [];
+        return Object.keys(control.errors).map(errorKey => {
+            const error = control.errors?.[errorKey];
+            const mapper = this.errorMessages[errorKey];
+            return mapper ? mapper(error, field) : `${field.label ?? field.name} es inválido.`;
+        });
+    }
+    errorMessages = {
+        required: (_err, field) => `${field.label ?? field.name} es obligatorio.`,
+        min: (err, field) => `${field.label ?? field.name} debe ser mayor o igual a ${err.min}.`,
+        max: (err, field) => `${field.label ?? field.name} debe ser menor o igual a ${err.max}.`,
+        minlength: (err, field) => `${field.label ?? field.name} debe tener al menos ${err.requiredLength} caracteres.`,
+        maxlength: (err, field) => `${field.label ?? field.name} no puede superar ${err.requiredLength} caracteres.`,
+        pattern: (_err, field) => `${field.label ?? field.name} no tiene el formato correcto.`
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicDynamicFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicDynamicFormComponent, isStandalone: true, selector: "ui-dynamic-form", inputs: { fields: "fields", form: "form", cols: "cols" }, ngImport: i0, template: "<div class=\"form\" [ngStyle]=\"{'--cols': cols, '--min': '180px'}\" [formGroup]=\"form\">\r\n  @for (field of fields; track field.name) {\r\n    <div class=\"col-span-{{field.colSpan || 1}}\">\r\n      \r\n      @if ( ['text','number'].includes(field.type)  ) {\r\n        <ui-input \r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [tip]=\"field.tip??''\"\r\n          >\r\n            <input \r\n              [id]=\"field.name\"\r\n              [formControlName]=\"field.name\"\r\n              [type]=\"field.type\"\r\n              [placeholder]=\"field.placeholder??field.label\"\r\n            />\r\n        </ui-input>\r\n\r\n      }\r\n      @else if (field.type === 'date') {\r\n        <ui-date-picker\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [tip]=\"field.tip??''\"\r\n          [formControlName]=\"field.name\"\r\n        ></ui-date-picker>\r\n      }\r\n      @else if (field.type === 'select') {\r\n        <ui-select\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [tip]=\"field.tip??''\"\r\n          [formControlName]=\"field.name\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-select>\r\n      }\r\n      @else if (field.type === 'checkbox') {\r\n        <ui-checkbox\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [placeholder]=\"field.placeholder??''\"\r\n          [tip]=\"field.tip??''\"\r\n        ></ui-checkbox>\r\n      }\r\n      @else if (field.type === 'slider') {\r\n        <ui-slider\r\n          [min]=\"field.min??0\"\r\n          [max]=\"field.max??100\"\r\n          [step]=\"field.sliderInterval??1\"\r\n          [markerCount]=\"field.sliderMarks??5\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [tip]=\"field.tip??''\"\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n        ></ui-slider>\r\n      }\r\n      @else if (field.type === 'switch') {\r\n        <ui-checkbox\r\n          type=\"switch\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [formControlName]=\"field.name\"\r\n          [tip]=\"field.tip??''\"\r\n          [placeholder]=\"field.placeholder??''\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n        >\r\n        </ui-checkbox>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".form{width:100%;display:grid;align-items:stretch;gap:1rem;padding-bottom:1.5rem}@media (max-width: 399px){.form{grid-template-columns:1fr}}@media (min-width: 768px){.form{grid-template-columns:repeat(var(--cols),1fr)}}@media (min-width: 400px) and (max-width: 767px){.form{grid-template-columns:repeat(min(var(--cols),2),1fr)}}h2{margin-top:1.5rem}.col-span-1{grid-column:span 1/span 1}.col-span-2{grid-column:span 2/span 2}.col-span-3{grid-column:span 3/span 3}.col-span-4{grid-column:span 4/span 4}.col-span-5{grid-column:span 5/span 5}.col-span-6{grid-column:span 6/span 6}.col-span-7{grid-column:span 7/span 7}.col-span-8{grid-column:span 8/span 8}.col-span-9{grid-column:span 9/span 9}.col-span-10{grid-column:span 10/span 10}.col-span-11{grid-column:span 11/span 11}.col-span-12{grid-column:span 12/span 12}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: UicDatePickerComponent, selector: "ui-date-picker", inputs: ["icon", "iconColor", "internalIcon", "label", "error", "tip", "disabled", "max", "min"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: UicSliderComponent, selector: "ui-slider", inputs: ["icon", "iconColor", "label", "error", "tip", "min", "max", "step", "markerCount", "disabled", "loading"] }, { kind: "component", type: UicSelectComponent, selector: "ui-select", inputs: ["icon", "iconColor", "internalIcon", "size", "label", "error", "tip", "showSubtitle", "disabled", "nullable", "options"] }, { kind: "component", type: UicInputComponent, selector: "ui-input", inputs: ["icon", "iconColor", "internalIcon", "size", "label", "error", "tip", "disabled"], outputs: ["clickButton"] }, { kind: "component", type: UicCheckboxComponent, selector: "ui-checkbox", inputs: ["icon", "iconColor", "label", "tip", "type", "placeholder", "disabled", "loading"] }, { kind: "ngmodule", type: FormsModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicDynamicFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-dynamic-form', imports: [CommonModule, UicDatePickerComponent,
+                        ReactiveFormsModule, UicSliderComponent, UicSelectComponent, UicInputComponent, UicCheckboxComponent, FormsModule], template: "<div class=\"form\" [ngStyle]=\"{'--cols': cols, '--min': '180px'}\" [formGroup]=\"form\">\r\n  @for (field of fields; track field.name) {\r\n    <div class=\"col-span-{{field.colSpan || 1}}\">\r\n      \r\n      @if ( ['text','number'].includes(field.type)  ) {\r\n        <ui-input \r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [tip]=\"field.tip??''\"\r\n          >\r\n            <input \r\n              [id]=\"field.name\"\r\n              [formControlName]=\"field.name\"\r\n              [type]=\"field.type\"\r\n              [placeholder]=\"field.placeholder??field.label\"\r\n            />\r\n        </ui-input>\r\n\r\n      }\r\n      @else if (field.type === 'date') {\r\n        <ui-date-picker\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [tip]=\"field.tip??''\"\r\n          [formControlName]=\"field.name\"\r\n        ></ui-date-picker>\r\n      }\r\n      @else if (field.type === 'select') {\r\n        <ui-select\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [tip]=\"field.tip??''\"\r\n          [formControlName]=\"field.name\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-select>\r\n      }\r\n      @else if (field.type === 'checkbox') {\r\n        <ui-checkbox\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [placeholder]=\"field.placeholder??''\"\r\n          [tip]=\"field.tip??''\"\r\n        ></ui-checkbox>\r\n      }\r\n      @else if (field.type === 'slider') {\r\n        <ui-slider\r\n          [min]=\"field.min??0\"\r\n          [max]=\"field.max??100\"\r\n          [step]=\"field.sliderInterval??1\"\r\n          [markerCount]=\"field.sliderMarks??5\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [tip]=\"field.tip??''\"\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n        ></ui-slider>\r\n      }\r\n      @else if (field.type === 'switch') {\r\n        <ui-checkbox\r\n          type=\"switch\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [formControlName]=\"field.name\"\r\n          [tip]=\"field.tip??''\"\r\n          [placeholder]=\"field.placeholder??''\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n        >\r\n        </ui-checkbox>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".form{width:100%;display:grid;align-items:stretch;gap:1rem;padding-bottom:1.5rem}@media (max-width: 399px){.form{grid-template-columns:1fr}}@media (min-width: 768px){.form{grid-template-columns:repeat(var(--cols),1fr)}}@media (min-width: 400px) and (max-width: 767px){.form{grid-template-columns:repeat(min(var(--cols),2),1fr)}}h2{margin-top:1.5rem}.col-span-1{grid-column:span 1/span 1}.col-span-2{grid-column:span 2/span 2}.col-span-3{grid-column:span 3/span 3}.col-span-4{grid-column:span 4/span 4}.col-span-5{grid-column:span 5/span 5}.col-span-6{grid-column:span 6/span 6}.col-span-7{grid-column:span 7/span 7}.col-span-8{grid-column:span 8/span 8}.col-span-9{grid-column:span 9/span 9}.col-span-10{grid-column:span 10/span 10}.col-span-11{grid-column:span 11/span 11}.col-span-12{grid-column:span 12/span 12}\n"] }]
+        }], propDecorators: { fields: [{
+                type: Input
+            }], form: [{
+                type: Input,
+                args: [{ required: true }]
+            }], cols: [{
+                type: Input
+            }] } });
+
+class UicSkeletonLoaderComponent {
+    inputs = 3;
+    cols = 3;
+    get gridStyle() {
+        return {
+            'grid-template-columns': `repeat(${this.cols}, 1fr)`
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSkeletonLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicSkeletonLoaderComponent, isStandalone: true, selector: "ui-skeleton-loader", inputs: { inputs: "inputs", cols: "cols" }, ngImport: i0, template: "<div class=\"skeleton-form\" [ngStyle]=\"gridStyle\">\r\n    @for (r of [].constructor(inputs); track $index) {\r\n        <div class=\"skeleton-input-container\">\r\n            <div class=\"skeleton-gradient skeleton-label\"></div>\r\n            <div class=\"skeleton-gradient skeleton-input\"></div>\r\n        </div>\r\n    }\r\n</div>", styles: [".skeleton-form{width:100%;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:stretch;gap:16px;padding:24px 0}.skeleton-gradient{background:linear-gradient(90deg,var(--grey-100) 25%,var(--grey-200) 50%,var(--grey-100) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--input-radius)}.skeleton-label{height:20px;width:50%;margin-bottom:var(--input-label-space)}.skeleton-input{height:40px;width:100%}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSkeletonLoaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-skeleton-loader', imports: [CommonModule], template: "<div class=\"skeleton-form\" [ngStyle]=\"gridStyle\">\r\n    @for (r of [].constructor(inputs); track $index) {\r\n        <div class=\"skeleton-input-container\">\r\n            <div class=\"skeleton-gradient skeleton-label\"></div>\r\n            <div class=\"skeleton-gradient skeleton-input\"></div>\r\n        </div>\r\n    }\r\n</div>", styles: [".skeleton-form{width:100%;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:stretch;gap:16px;padding:24px 0}.skeleton-gradient{background:linear-gradient(90deg,var(--grey-100) 25%,var(--grey-200) 50%,var(--grey-100) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--input-radius)}.skeleton-label{height:20px;width:50%;margin-bottom:var(--input-label-space)}.skeleton-input{height:40px;width:100%}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}\n"] }]
+        }], propDecorators: { inputs: [{
+                type: Input
+            }], cols: [{
+                type: Input
+            }] } });
+
+class UicFormWrapperComponent {
+    schema;
+    externalData = {};
+    loading = false;
+    initialValues = {};
+    useSteps = false;
+    formSubmit = new EventEmitter();
+    fb = inject(FormBuilder);
+    form = this.fb.group({});
+    currentStep = 0;
+    ngOnInit() {
+        this.buildForm();
+        this.useSteps = !!this.schema.steps && this.schema.steps.length > 0;
+    }
+    ngOnChanges(changes) {
+        if (changes['schema']) {
+            this.handleSchemaChange();
+        }
+        if (changes['externalData'] && !changes['externalData'].firstChange) {
+            this.updateExtenalData();
+            this.handleSchemaChange();
+        }
+    }
+    handleSchemaChange() {
+        this.buildForm();
+        this.useSteps = !!this.schema?.steps?.length;
+        if (this.useSteps && this.schema?.steps) {
+            this.currentStep = Math.min(this.currentStep, this.schema.steps.length - 1);
+        }
+    }
+    handleSubmit() {
+        if (this.form.valid) {
+            this.formSubmit.emit({ result: true, form: this.form.value });
+        }
+        else {
+            //this.logFormErrors(this.form);
+            this.form.markAllAsTouched();
+            this.formSubmit.emit({ result: false, form: null });
+        }
+    }
+    collectAllFields() {
+        if (!this.schema)
+            return [];
+        if (this.useSteps && this.schema.steps) {
+            return this.schema.steps.flatMap(step => (step.blocks ?? []).flatMap(b => b.fields ?? []));
+        }
+        return (this.schema.blocks ?? []).flatMap(b => b.fields ?? []);
+    }
+    logFormErrors(form, parentKey = '') {
+        Object.keys(form.controls).forEach(key => {
+            const control = form.get(key);
+            const controlPath = parentKey ? `${parentKey}.${key}` : key;
+            if (control instanceof FormGroup || control instanceof FormArray) {
+                // Recursión para anidar grupos
+                this.logFormErrors(control, controlPath);
+            }
+            else if (control?.errors) {
+                console.warn(`❌ Errores en [${controlPath}]:`, control.errors);
+            }
+        });
+    }
+    updateExtenalData() {
+        if (this.useSteps) {
+            this.schema.steps?.forEach(step => {
+                step.blocks.forEach(block => {
+                    block.fields = this.updateFieldOptions(block);
+                });
+            });
+        }
+        else {
+            this.schema.blocks?.forEach(block => {
+                block.fields = this.updateFieldOptions(block);
+            });
+        }
+    }
+    updateFieldOptions(block) {
+        return block.fields.map(f => {
+            if (f.type === 'select') {
+                let options = f.options ?? [];
+                Object.keys(this.externalData).forEach(key => {
+                    if (key === f.name) {
+                        options = this.externalData[key] ?? [];
+                    }
+                });
+                return { ...f, options: options };
+            }
+            return f;
+        });
+    }
+    buildForm() {
+        const fields = this.collectAllFields();
+        const newForm = this.fb.group({});
+        fields.forEach(f => {
+            const validators = this.mapValidatorsFromField(f);
+            let initial = this.initialValues[f.name] ?? null;
+            if ((f.type === 'checkbox' || f.type === 'switch') && initial == null)
+                initial = false;
+            if (f.type === 'slider' && initial == null)
+                initial = f.min ?? 0;
+            newForm.addControl(f.name, this.fb.control(initial, validators));
+        });
+        this.form = newForm;
+    }
+    mapValidatorsFromField(f) {
+        const validators = [];
+        if (f.required)
+            validators.push(Validators.required);
+        if (typeof f.min === 'number')
+            validators.push(Validators.min(f.min));
+        if (typeof f.max === 'number')
+            validators.push(Validators.max(f.max));
+        if (typeof f.maxLength === 'number')
+            validators.push(Validators.maxLength(f.maxLength));
+        if (typeof f.minLength === 'number')
+            validators.push(Validators.minLength(f.minLength));
+        if (f.pattern instanceof RegExp)
+            validators.push(Validators.pattern(f.pattern));
+        return validators;
+    }
+    getCurrentBlocks() {
+        if (!this.schema)
+            return [];
+        if (this.useSteps) {
+            const step = this.schema.steps?.[this.currentStep];
+            return step?.blocks ?? [];
+        }
+        return this.schema.blocks ?? [];
+    }
+    nextStep() {
+        const stepsCount = this.schema?.steps?.length ?? 0;
+        if (this.useSteps && this.currentStep < stepsCount - 1) {
+            this.currentStep++;
+        }
+    }
+    prevStep() {
+        if (this.useSteps && this.currentStep > 0) {
+            this.currentStep--;
+        }
+    }
+    getStepTitle() {
+        return this.schema.steps?.[this.currentStep]?.title ?? '';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicFormWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicFormWrapperComponent, isStandalone: true, selector: "ui-form-wrapper", inputs: { schema: "schema", externalData: "externalData", loading: "loading", initialValues: "initialValues" }, outputs: { formSubmit: "formSubmit" }, usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"form\" (ngSubmit)=\"handleSubmit()\">\r\n\r\n  @if (useSteps) {\r\n    @if (schema.steps?.length) {\r\n\r\n      <div class=\"step-title\">{{ getStepTitle()}}</div>\r\n      @if (loading) {\r\n        <ui-skeleton-loader\r\n          [cols]=\"schema.cols\"\r\n          [inputs]=\"(schema.steps?.[currentStep]?.blocks?.[0]?.fields?.length) ?? 0\"\r\n        ></ui-skeleton-loader>\r\n      } \r\n      @else {\r\n        @for (block of getCurrentBlocks(); track block.title) {\r\n          <section class=\"form-block\">\r\n            <div class=\"block-title\">{{ block.title }}</div>\r\n            <ui-dynamic-form\r\n              [cols]=\"schema.cols\"\r\n              [fields]=\"block.fields\"\r\n              [form]=\"form\">\r\n            </ui-dynamic-form>\r\n          </section>\r\n        }\r\n      }\r\n      <div class=\"step-controls\">\r\n        <button type=\"button\" (click)=\"prevStep()\" [disabled]=\"currentStep === 0\">Anterior</button>\r\n\r\n        @if ((schema.steps?.length ?? 0) > 0 && currentStep < ((schema.steps?.length ?? 1) - 1)) {\r\n          <button type=\"button\" (click)=\"nextStep()\">Siguiente</button>\r\n        } @else {\r\n          <button type=\"submit\">Guardar</button>\r\n        }\r\n      </div>\r\n    } \r\n  } \r\n  @else {\r\n    @for (block of getCurrentBlocks(); track block.title) {\r\n      <section class=\"form-block\">\r\n        @if (block.title){\r\n            <div class=\"block-title\">{{ block.title }}</div>\r\n        }\r\n        @if (loading) {\r\n          <ui-skeleton-loader\r\n            [cols]=\"schema.cols\"\r\n            [inputs]=\"block.fields.length\"\r\n          ></ui-skeleton-loader>\r\n        } @else {\r\n          <ui-dynamic-form\r\n            [cols]=\"schema.cols\"\r\n            [fields]=\"block.fields\"\r\n            [form]=\"form\">\r\n          </ui-dynamic-form>\r\n        }\r\n      </section>\r\n    }\r\n  }\r\n</form>\r\n", styles: [":host{display:block;padding:.25rem 0}.block-title{font-size:1.625rem;font-weight:600;line-height:calc(1.625rem + 4px);margin:1.5rem 0;color:var(--grey-950)}\n"], dependencies: [{ kind: "component", type: UicDynamicFormComponent, selector: "ui-dynamic-form", inputs: ["fields", "form", "cols"] }, { kind: "component", type: UicSkeletonLoaderComponent, selector: "ui-skeleton-loader", inputs: ["inputs", "cols"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicFormWrapperComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-form-wrapper', imports: [UicDynamicFormComponent, UicSkeletonLoaderComponent, ReactiveFormsModule], template: "<form [formGroup]=\"form\" (ngSubmit)=\"handleSubmit()\">\r\n\r\n  @if (useSteps) {\r\n    @if (schema.steps?.length) {\r\n\r\n      <div class=\"step-title\">{{ getStepTitle()}}</div>\r\n      @if (loading) {\r\n        <ui-skeleton-loader\r\n          [cols]=\"schema.cols\"\r\n          [inputs]=\"(schema.steps?.[currentStep]?.blocks?.[0]?.fields?.length) ?? 0\"\r\n        ></ui-skeleton-loader>\r\n      } \r\n      @else {\r\n        @for (block of getCurrentBlocks(); track block.title) {\r\n          <section class=\"form-block\">\r\n            <div class=\"block-title\">{{ block.title }}</div>\r\n            <ui-dynamic-form\r\n              [cols]=\"schema.cols\"\r\n              [fields]=\"block.fields\"\r\n              [form]=\"form\">\r\n            </ui-dynamic-form>\r\n          </section>\r\n        }\r\n      }\r\n      <div class=\"step-controls\">\r\n        <button type=\"button\" (click)=\"prevStep()\" [disabled]=\"currentStep === 0\">Anterior</button>\r\n\r\n        @if ((schema.steps?.length ?? 0) > 0 && currentStep < ((schema.steps?.length ?? 1) - 1)) {\r\n          <button type=\"button\" (click)=\"nextStep()\">Siguiente</button>\r\n        } @else {\r\n          <button type=\"submit\">Guardar</button>\r\n        }\r\n      </div>\r\n    } \r\n  } \r\n  @else {\r\n    @for (block of getCurrentBlocks(); track block.title) {\r\n      <section class=\"form-block\">\r\n        @if (block.title){\r\n            <div class=\"block-title\">{{ block.title }}</div>\r\n        }\r\n        @if (loading) {\r\n          <ui-skeleton-loader\r\n            [cols]=\"schema.cols\"\r\n            [inputs]=\"block.fields.length\"\r\n          ></ui-skeleton-loader>\r\n        } @else {\r\n          <ui-dynamic-form\r\n            [cols]=\"schema.cols\"\r\n            [fields]=\"block.fields\"\r\n            [form]=\"form\">\r\n          </ui-dynamic-form>\r\n        }\r\n      </section>\r\n    }\r\n  }\r\n</form>\r\n", styles: [":host{display:block;padding:.25rem 0}.block-title{font-size:1.625rem;font-weight:600;line-height:calc(1.625rem + 4px);margin:1.5rem 0;color:var(--grey-950)}\n"] }]
+        }], propDecorators: { schema: [{
+                type: Input
+            }], externalData: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], initialValues: [{
+                type: Input
+            }], formSubmit: [{
+                type: Output
+            }] } });
+
 class UicSearcherComponent {
     renderer;
     overlay;
@@ -965,13 +1042,13 @@ class UicSearcherComponent {
         this.overlayRef.backdropClick().subscribe(() => this.closeOverlay());
         this.overlayRef.overlayElement.style.width = `${width}px`;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSearcherComponent, deps: [{ token: i0.Renderer2 }, { token: i1$2.Overlay }, { token: i1$2.OverlayPositionBuilder }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicSearcherComponent, isStandalone: true, selector: "ui-searcher", inputs: { icon: "icon", iconColor: "iconColor", internalIcon: "internalIcon", size: "size", label: "label", error: "error", tip: "tip", disabled: "disabled", showSelected: "showSelected", placeholder: "placeholder", searchFn: "searchFn", itemDisplayFn: "itemDisplayFn", itemIsEnabledFn: "itemIsEnabledFn", manualSearch: "manualSearch", selectedItem: "selectedItem" }, outputs: { selectedItemChange: "selectedItemChange" }, viewQueries: [{ propertyName: "toggleButton", first: true, predicate: ["inputwrapp"], descendants: true }, { propertyName: "dropdownTemplateRef", first: true, predicate: ["dropdownTemplate"], descendants: true }], ngImport: i0, template: "\r\n<div class=\"input-wrapper\">\r\n  @if (icon) {\r\n    <i class=\"input-externalicon f-{{iconColor}} {{icon}}\"></i>\r\n  }\r\n  <div class=\"input-elements\" [style]=\"icon?'max-width: calc(100% - 34px);':''\"> \r\n      <div class=\"label  inputlabel\" [class.font-error]=\"error\">\r\n          {{label}} \r\n      </div>\r\n      \r\n      <div class=\"fakeinput-wrapp\" #inputwrapp >\r\n        <!-- INPUT -->\r\n        <div class=\"fakeinput\" [ngClass]=\"{'errorinput':error, 'disabledinput':disabled}\">\r\n          @if (selectedItem == null) {           \r\n            @if (internalIcon) {\r\n                <i class=\"input-internalicon-{{size}} {{internalIcon}}\" ></i>\r\n            }\r\n            <div class=\"input-container pad-{{size}}\" >\r\n                <input\r\n                  (focus)=\"openList()\"\r\n                  type=\"text\"\r\n                  (keydown.enter)=\"triggerSearch()\"\r\n                  (keydown.escape)=\"clearSearch()\"\r\n                  [(ngModel)]=\"searchText\"\r\n                  (ngModelChange)=\"onSearchChange($event)\"\r\n                  [placeholder]=\"placeholder\"\r\n                />\r\n            </div>     \r\n            @if (manualSearch) {\r\n              <ui-button  (click)=\"triggerSearch()\" size=\"t\" ></ui-button>\r\n            }\r\n            <ui-button size=\"t\" icon=\"ri-close-large-line\" (click)=\"clearSearch()\"></ui-button>\r\n          }@else {\r\n            <div class=\"input-container pad-{{size}}\" >\r\n              <div class=\"selected-item\" >\r\n                <div class=\"selected-item-text\" [innerHTML]=\"itemDisplayFn(selectedItem)\"></div> \r\n                <ui-button (click)=\"unselect()\" type=\"ghost\" size=\"t\" icon=\"ri-close-large-line\" color=\"red\"></ui-button>\r\n              </div>\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n\r\n      @if (tip) {\r\n          <div class=\"fakeinput-alert tip\">{{tip}}</div>\r\n      }\r\n      @if (error) {\r\n          <div class=\"fakeinput-alert f-red\">{{error}}</div>\r\n      }\r\n      \r\n  </div>\r\n</div>\r\n\r\n<ng-template #dropdownTemplate>\r\n  @if (results$ | async; as items){\r\n  <div class=\"results\">\r\n    @if (isLoading) {\r\n      <div class=\"loader\"></div>\r\n    }\r\n      <div class=\"input-option-scroll\">\r\n        @for (item of items; track $index) {\r\n          <div class=\"input-option\" [class.item-disabled]=\"!itemIsEnabledFn(item)\" (click)=\"selectItem(item)\" [innerHTML]=\"itemDisplayFn(item)\">\r\n          </div>\r\n        }@empty {\r\n          <div class=\"t-disabled\">No hay elementos para mostrar</div>\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n</ng-template>\r\n\r\n\r\n\r\n", styles: [".loader{height:4px;width:100%;--c:no-repeat linear-gradient(#6100ee 0 0);background:var(--c),var(--c),#d7b8fc;background-size:60% 100%;animation:l16 3s infinite}@keyframes l16{0%{background-position:-150% 0,-150% 0}66%{background-position:250% 0,-150% 0}to{background-position:250% 0,250% 0}}.wrapp-fakeinput{position:relative}.selected-item{border-radius:5px;background-color:var(--primary-500);padding-left:10px;height:25px;display:flex;align-items:center;justify-content:space-between}.selected-item-text{overflow:hidden;white-space:nowrap}.results{background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;border:solid 1px var(--grey-200);border-radius:5px;font-size:13px;z-index:150;overflow:hidden}\n", ":host{width:100%}.input-container{flex:1 1;padding:.25rem;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{line-height:1rem;display:flex;align-items:center;padding:6px 12px;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon-s{color:var(--grey-200);font-size:1rem}.input-internalicon-m{color:var(--grey-200);font-size:1.125rem}.input-internalicon-l{color:var(--grey-200);font-size:1.25rem}.label{font-size:.875rem;line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.fakeinput{border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;padding-left:.25rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;height:calc(4 * var(--form-ref))}.fakeinput-wrapp{position:relative}.fakeinput-content{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;white-space:nowrap}.fakeinput-content i{font-size:20px}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:5px;font-size:14px;flex-grow:1;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--grey-400)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--grey-200);color:var(--grey-800)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--grey-200);color:var(--red-500)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:focus-within button{background-color:var(--primary-500);color:var(--white)}.fakeinput:focus-within button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput:focus-within button:enabled:active{background-color:var(--primary-600)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)}.t-disabled{color:var(--grey-300);padding:5px;text-align:center}.disabledinput{background-color:var(--grey-100);color:var(--grey-400)}.disabledinput ::ng-deep input{color:var(--grey-800)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-300)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSearcherComponent, deps: [{ token: i0.Renderer2 }, { token: i1$1.Overlay }, { token: i1$1.OverlayPositionBuilder }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicSearcherComponent, isStandalone: true, selector: "ui-searcher", inputs: { icon: "icon", iconColor: "iconColor", internalIcon: "internalIcon", size: "size", label: "label", error: "error", tip: "tip", disabled: "disabled", showSelected: "showSelected", placeholder: "placeholder", searchFn: "searchFn", itemDisplayFn: "itemDisplayFn", itemIsEnabledFn: "itemIsEnabledFn", manualSearch: "manualSearch", selectedItem: "selectedItem" }, outputs: { selectedItemChange: "selectedItemChange" }, viewQueries: [{ propertyName: "toggleButton", first: true, predicate: ["inputwrapp"], descendants: true }, { propertyName: "dropdownTemplateRef", first: true, predicate: ["dropdownTemplate"], descendants: true }], ngImport: i0, template: "\r\n<div class=\"input-wrapper\">\r\n  @if (icon) {\r\n    <i class=\"input-externalicon f-{{iconColor}} {{icon}}\"></i>\r\n  }\r\n  <div class=\"input-elements\" [style]=\"icon?'max-width: calc(100% - 34px);':''\"> \r\n      <div class=\"label  inputlabel\" [class.font-error]=\"error\">\r\n          {{label}} \r\n      </div>\r\n      \r\n      <div class=\"fakeinput-wrapp\" #inputwrapp >\r\n        <!-- INPUT -->\r\n        <div class=\"fakeinput\" [ngClass]=\"{'errorinput':error, 'disabledinput':disabled}\">\r\n          @if (selectedItem == null) {           \r\n            @if (internalIcon) {\r\n                <i class=\"input-internalicon-{{size}} {{internalIcon}}\" ></i>\r\n            }\r\n            <div class=\"input-container pad-{{size}}\" >\r\n                <input\r\n                  (focus)=\"openList()\"\r\n                  type=\"text\"\r\n                  (keydown.enter)=\"triggerSearch()\"\r\n                  (keydown.escape)=\"clearSearch()\"\r\n                  [(ngModel)]=\"searchText\"\r\n                  (ngModelChange)=\"onSearchChange($event)\"\r\n                  [placeholder]=\"placeholder\"\r\n                />\r\n            </div>     \r\n            @if (manualSearch) {\r\n              <ui-button  (click)=\"triggerSearch()\" size=\"t\" ></ui-button>\r\n            }\r\n            <ui-button size=\"t\" icon=\"ri-close-large-line\" (click)=\"clearSearch()\"></ui-button>\r\n          }@else {\r\n            <div class=\"input-container pad-{{size}}\" >\r\n              <div class=\"selected-item\" >\r\n                <div class=\"selected-item-text\" [innerHTML]=\"itemDisplayFn(selectedItem)\"></div> \r\n                <ui-button (click)=\"unselect()\" type=\"ghost\" size=\"t\" icon=\"ri-close-large-line\" color=\"red\"></ui-button>\r\n              </div>\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n\r\n      @if (tip) {\r\n          <div class=\"fakeinput-alert tip\">{{tip}}</div>\r\n      }\r\n      @if (error) {\r\n          <div class=\"fakeinput-alert f-red\">{{error}}</div>\r\n      }\r\n      \r\n  </div>\r\n</div>\r\n\r\n<ng-template #dropdownTemplate>\r\n  @if (results$ | async; as items){\r\n  <div class=\"results\">\r\n    @if (isLoading) {\r\n      <div class=\"loader\"></div>\r\n    }\r\n      <div class=\"input-option-scroll\">\r\n        @for (item of items; track $index) {\r\n          <div class=\"input-option\" [class.item-disabled]=\"!itemIsEnabledFn(item)\" (click)=\"selectItem(item)\" [innerHTML]=\"itemDisplayFn(item)\">\r\n          </div>\r\n        }@empty {\r\n          <div class=\"t-disabled\">No hay elementos para mostrar</div>\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n</ng-template>\r\n\r\n\r\n\r\n", styles: [".loader{height:4px;width:100%;--c:no-repeat linear-gradient(#6100ee 0 0);background:var(--c),var(--c),#d7b8fc;background-size:60% 100%;animation:l16 3s infinite}@keyframes l16{0%{background-position:-150% 0,-150% 0}66%{background-position:250% 0,-150% 0}to{background-position:250% 0,250% 0}}.wrapp-fakeinput{position:relative}.selected-item{border-radius:5px;background-color:var(--primary-500);padding-left:10px;height:25px;display:flex;align-items:center;justify-content:space-between}.selected-item-text{overflow:hidden;white-space:nowrap}.results{background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;border:solid 1px var(--grey-200);border-radius:5px;font-size:13px;z-index:150;overflow:hidden}\n", ":host{width:100%}.input-container{flex:1 1;padding:.25rem;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{line-height:1rem;display:flex;align-items:center;padding:6px 12px;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon-s{color:var(--grey-200);font-size:1rem}.input-internalicon-m{color:var(--grey-200);font-size:1.125rem}.input-internalicon-l{color:var(--grey-200);font-size:1.25rem}.label{font-size:.875rem;line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.fakeinput{border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;padding-left:.25rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;height:calc(4 * var(--form-ref))}.fakeinput-wrapp{position:relative}.fakeinput-content{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;white-space:nowrap}.fakeinput-content i{font-size:20px}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:5px;font-size:14px;flex-grow:1;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--grey-400)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--grey-200);color:var(--grey-800)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--grey-200);color:var(--red-500)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:focus-within button{background-color:var(--primary-500);color:var(--white)}.fakeinput:focus-within button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput:focus-within button:enabled:active{background-color:var(--primary-600)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)}.t-disabled{color:var(--grey-300);padding:5px;text-align:center}.disabledinput{background-color:var(--grey-100);color:var(--grey-400)}.disabledinput ::ng-deep input{color:var(--grey-800)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-300)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSearcherComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ui-searcher', imports: [CommonModule, FormsModule, AsyncPipe, UicButtonComponent], template: "\r\n<div class=\"input-wrapper\">\r\n  @if (icon) {\r\n    <i class=\"input-externalicon f-{{iconColor}} {{icon}}\"></i>\r\n  }\r\n  <div class=\"input-elements\" [style]=\"icon?'max-width: calc(100% - 34px);':''\"> \r\n      <div class=\"label  inputlabel\" [class.font-error]=\"error\">\r\n          {{label}} \r\n      </div>\r\n      \r\n      <div class=\"fakeinput-wrapp\" #inputwrapp >\r\n        <!-- INPUT -->\r\n        <div class=\"fakeinput\" [ngClass]=\"{'errorinput':error, 'disabledinput':disabled}\">\r\n          @if (selectedItem == null) {           \r\n            @if (internalIcon) {\r\n                <i class=\"input-internalicon-{{size}} {{internalIcon}}\" ></i>\r\n            }\r\n            <div class=\"input-container pad-{{size}}\" >\r\n                <input\r\n                  (focus)=\"openList()\"\r\n                  type=\"text\"\r\n                  (keydown.enter)=\"triggerSearch()\"\r\n                  (keydown.escape)=\"clearSearch()\"\r\n                  [(ngModel)]=\"searchText\"\r\n                  (ngModelChange)=\"onSearchChange($event)\"\r\n                  [placeholder]=\"placeholder\"\r\n                />\r\n            </div>     \r\n            @if (manualSearch) {\r\n              <ui-button  (click)=\"triggerSearch()\" size=\"t\" ></ui-button>\r\n            }\r\n            <ui-button size=\"t\" icon=\"ri-close-large-line\" (click)=\"clearSearch()\"></ui-button>\r\n          }@else {\r\n            <div class=\"input-container pad-{{size}}\" >\r\n              <div class=\"selected-item\" >\r\n                <div class=\"selected-item-text\" [innerHTML]=\"itemDisplayFn(selectedItem)\"></div> \r\n                <ui-button (click)=\"unselect()\" type=\"ghost\" size=\"t\" icon=\"ri-close-large-line\" color=\"red\"></ui-button>\r\n              </div>\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n\r\n      @if (tip) {\r\n          <div class=\"fakeinput-alert tip\">{{tip}}</div>\r\n      }\r\n      @if (error) {\r\n          <div class=\"fakeinput-alert f-red\">{{error}}</div>\r\n      }\r\n      \r\n  </div>\r\n</div>\r\n\r\n<ng-template #dropdownTemplate>\r\n  @if (results$ | async; as items){\r\n  <div class=\"results\">\r\n    @if (isLoading) {\r\n      <div class=\"loader\"></div>\r\n    }\r\n      <div class=\"input-option-scroll\">\r\n        @for (item of items; track $index) {\r\n          <div class=\"input-option\" [class.item-disabled]=\"!itemIsEnabledFn(item)\" (click)=\"selectItem(item)\" [innerHTML]=\"itemDisplayFn(item)\">\r\n          </div>\r\n        }@empty {\r\n          <div class=\"t-disabled\">No hay elementos para mostrar</div>\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n</ng-template>\r\n\r\n\r\n\r\n", styles: [".loader{height:4px;width:100%;--c:no-repeat linear-gradient(#6100ee 0 0);background:var(--c),var(--c),#d7b8fc;background-size:60% 100%;animation:l16 3s infinite}@keyframes l16{0%{background-position:-150% 0,-150% 0}66%{background-position:250% 0,-150% 0}to{background-position:250% 0,250% 0}}.wrapp-fakeinput{position:relative}.selected-item{border-radius:5px;background-color:var(--primary-500);padding-left:10px;height:25px;display:flex;align-items:center;justify-content:space-between}.selected-item-text{overflow:hidden;white-space:nowrap}.results{background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;border:solid 1px var(--grey-200);border-radius:5px;font-size:13px;z-index:150;overflow:hidden}\n", ":host{width:100%}.input-container{flex:1 1;padding:.25rem;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{line-height:1rem;display:flex;align-items:center;padding:6px 12px;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon-s{color:var(--grey-200);font-size:1rem}.input-internalicon-m{color:var(--grey-200);font-size:1.125rem}.input-internalicon-l{color:var(--grey-200);font-size:1.25rem}.label{font-size:.875rem;line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.fakeinput{border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;padding-left:.25rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;height:calc(4 * var(--form-ref))}.fakeinput-wrapp{position:relative}.fakeinput-content{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;white-space:nowrap}.fakeinput-content i{font-size:20px}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:5px;font-size:14px;flex-grow:1;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--grey-400)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--grey-200);color:var(--grey-800)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--grey-200);color:var(--red-500)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:focus-within button{background-color:var(--primary-500);color:var(--white)}.fakeinput:focus-within button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput:focus-within button:enabled:active{background-color:var(--primary-600)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)}.t-disabled{color:var(--grey-300);padding:5px;text-align:center}.disabledinput{background-color:var(--grey-100);color:var(--grey-400)}.disabledinput ::ng-deep input{color:var(--grey-800)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-300)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}\n"] }]
-        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i1$2.Overlay }, { type: i1$2.OverlayPositionBuilder }, { type: i0.ViewContainerRef }], propDecorators: { icon: [{
+        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i1$1.Overlay }, { type: i1$1.OverlayPositionBuilder }, { type: i0.ViewContainerRef }], propDecorators: { icon: [{
                 type: Input
             }], iconColor: [{
                 type: Input
@@ -1027,11 +1104,11 @@ class UicTableUicSearcherComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableUicSearcherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: UicTableUicSearcherComponent, isStandalone: true, selector: "uic-table-searcher", inputs: { placeholder: "placeholder", label: "label", searchOnKeydown: "searchOnKeydown" }, outputs: { filter: "filter" }, ngImport: i0, template: "\r\n<div class=\"searcher\">\r\n    <div class=\"fakeinput\">\r\n        <i class=\"ri-search-line\"></i>\r\n        <input [(ngModel)]=\"text\" type=\"text\" (ngModelChange)=\"updateText()\" (keydown.enter)=\"filter.emit(text)\" placeholder=\"{{placeholder}}\">\r\n    </div>\r\n    <ui-button (click)=\"filter.emit(text)\" color=\"black\" type=\"bordered\" rightIcon=\"ri-search-2-line\" size=\"m\">Buscar</ui-button>\r\n    <ui-button (click)=\"reset()\" color=\"black\" type=\"bordered\" rightIcon=\"ri-close-circle-line\" size=\"m\">Limpiar</ui-button>\r\n</div>", styles: [".searcher{display:flex;gap:8px;align-items:center;flex-wrap:wrap}@media (max-width: 767px){.searcher{margin-bottom:16px}}.searcher .fakeinput{display:flex;align-items:center;border:solid 1px var(--grey-200);height:40px;padding:2px 1px 2px 10px;border-radius:8px;transition:ease .3s;width:350px}@media (max-width: 767px){.searcher .fakeinput{width:100%}}.searcher .fakeinput i{font-size:24px;margin-right:8px}.searcher .fakeinput input{width:100%;border:none}.searcher .fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}\n"], dependencies: [{ kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: UicTableUicSearcherComponent, isStandalone: true, selector: "uic-table-searcher", inputs: { placeholder: "placeholder", label: "label", searchOnKeydown: "searchOnKeydown" }, outputs: { filter: "filter" }, ngImport: i0, template: "\r\n<div class=\"searcher\">\r\n    <div class=\"fakeinput\">\r\n        <i class=\"ri-search-line\"></i>\r\n        <input [(ngModel)]=\"text\" type=\"text\" (ngModelChange)=\"updateText()\" (keydown.enter)=\"filter.emit(text)\" placeholder=\"{{placeholder}}\">\r\n    </div>\r\n    <ui-button (click)=\"filter.emit(text)\" color=\"black\" type=\"bordered\" rightIcon=\"ri-search-2-line\" size=\"m\">Buscar</ui-button>\r\n    <ui-button (click)=\"reset()\" color=\"black\" type=\"bordered\" rightIcon=\"ri-close-circle-line\" size=\"m\">Limpiar</ui-button>\r\n</div>", styles: [".searcher{display:flex;gap:8px;align-items:center;flex-wrap:wrap}@media (max-width: 399px){.searcher{margin-bottom:16px}}.searcher .fakeinput{display:flex;align-items:center;border:solid 1px var(--grey-200);height:40px;padding:2px 1px 2px 10px;border-radius:8px;transition:ease .3s;width:350px}@media (max-width: 399px){.searcher .fakeinput{width:100%}}.searcher .fakeinput i{font-size:24px;margin-right:8px}.searcher .fakeinput input{width:100%;border:none}.searcher .fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}\n"], dependencies: [{ kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableUicSearcherComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'uic-table-searcher', imports: [UicButtonComponent, FormsModule], template: "\r\n<div class=\"searcher\">\r\n    <div class=\"fakeinput\">\r\n        <i class=\"ri-search-line\"></i>\r\n        <input [(ngModel)]=\"text\" type=\"text\" (ngModelChange)=\"updateText()\" (keydown.enter)=\"filter.emit(text)\" placeholder=\"{{placeholder}}\">\r\n    </div>\r\n    <ui-button (click)=\"filter.emit(text)\" color=\"black\" type=\"bordered\" rightIcon=\"ri-search-2-line\" size=\"m\">Buscar</ui-button>\r\n    <ui-button (click)=\"reset()\" color=\"black\" type=\"bordered\" rightIcon=\"ri-close-circle-line\" size=\"m\">Limpiar</ui-button>\r\n</div>", styles: [".searcher{display:flex;gap:8px;align-items:center;flex-wrap:wrap}@media (max-width: 767px){.searcher{margin-bottom:16px}}.searcher .fakeinput{display:flex;align-items:center;border:solid 1px var(--grey-200);height:40px;padding:2px 1px 2px 10px;border-radius:8px;transition:ease .3s;width:350px}@media (max-width: 767px){.searcher .fakeinput{width:100%}}.searcher .fakeinput i{font-size:24px;margin-right:8px}.searcher .fakeinput input{width:100%;border:none}.searcher .fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}\n"] }]
+            args: [{ selector: 'uic-table-searcher', imports: [UicButtonComponent, FormsModule], template: "\r\n<div class=\"searcher\">\r\n    <div class=\"fakeinput\">\r\n        <i class=\"ri-search-line\"></i>\r\n        <input [(ngModel)]=\"text\" type=\"text\" (ngModelChange)=\"updateText()\" (keydown.enter)=\"filter.emit(text)\" placeholder=\"{{placeholder}}\">\r\n    </div>\r\n    <ui-button (click)=\"filter.emit(text)\" color=\"black\" type=\"bordered\" rightIcon=\"ri-search-2-line\" size=\"m\">Buscar</ui-button>\r\n    <ui-button (click)=\"reset()\" color=\"black\" type=\"bordered\" rightIcon=\"ri-close-circle-line\" size=\"m\">Limpiar</ui-button>\r\n</div>", styles: [".searcher{display:flex;gap:8px;align-items:center;flex-wrap:wrap}@media (max-width: 399px){.searcher{margin-bottom:16px}}.searcher .fakeinput{display:flex;align-items:center;border:solid 1px var(--grey-200);height:40px;padding:2px 1px 2px 10px;border-radius:8px;transition:ease .3s;width:350px}@media (max-width: 399px){.searcher .fakeinput{width:100%}}.searcher .fakeinput i{font-size:24px;margin-right:8px}.searcher .fakeinput input{width:100%;border:none}.searcher .fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}\n"] }]
         }], propDecorators: { placeholder: [{
                 type: Input
             }], label: [{
@@ -1385,7 +1462,7 @@ class UicTableComponent {
         this.checkedChange.emit([]);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTableComponent, isStandalone: true, selector: "ui-table", inputs: { columns: "columns", data: "data", loading: "loading", pages: "pages", size: "size", squeletonRows: "squeletonRows", buttonSize: "buttonSize", highlightedId: "highlightedId", headerText: "headerText", totalItems: "totalItems", searchEnabled: "searchEnabled", searchLabel: "searchLabel", searchPlaceholder: "searchPlaceholder", striped: "striped", showPagination: "showPagination", showEmptyMessage: "showEmptyMessage", emptyMessage: "emptyMessage" }, outputs: { action: "action", update: "update", checkedChange: "checkedChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"table-filters\">\r\n    @if (searchEnabled) {\r\n        <uic-table-searcher (filter)=\"search($event)\" [placeholder]=\"searchPlaceholder\" ></uic-table-searcher>\r\n    }\r\n    <div class=\"filter-actions\">\r\n        <ng-content select=\"[actions]\"></ng-content>\r\n    </div>\r\n</div>\r\n<div class=\"table-wrapper\">\r\n    @if (headerText) {\r\n        <div class=\"table-topbar\"> {{headerText}} <span class=\"hightlited-note\"> {{totalItems}} </span> </div>\r\n    }\r\n    <div class=\"table-container\">    \r\n        <table [class.striped]=\"striped\">\r\n            <thead>\r\n                <tr>\r\n                    @for (header of columns; track $index) {\r\n                        <th>\r\n                            <div class=\"th-wrap\">{{header.label.toUpperCase() }} \r\n                                @if (header.sortEnable) {\r\n                                    <div (click)=\"sortClick(header.key)\" [ngClass]=\"{'sort-active':header.key == sortKey}\">\r\n                                        <i  [class]=\"(sortAsc||header.key != sortKey)?'ri-arrow-down-line':'ri-arrow-up-line'\"></i> \r\n                                    </div>\r\n                                }\r\n                                @if (header.type=='checkbox') {\r\n                                    <ui-checkbox [(ngModel)]=\"allSelected\" (ngModelChange)=\"toggleAll($event)\"></ui-checkbox>\r\n                                }\r\n                            </div>\r\n                        </th>   \r\n                    }\r\n                </tr>\r\n            </thead>\r\n            <tbody>\r\n\r\n                @if (loading) {\r\n                    @for (item of [].constructor(squeletonRows); track $index) {\r\n                        <tr class=\"\">\r\n                            @for (header of columns; track $index) {\r\n                                <td> <div class=\"row-loader\"></div> </td>\r\n                            }\r\n                        </tr>       \r\n                    }\r\n                } @else {\r\n                    @for (row of data; track row.id) {\r\n                        <tr [@highlightRow]=\"highlightedId === row.id ? 'highlighted' : null\"  [class.tr-highlighted]=\"row.highlighted\">\r\n                            @for (header of columns; track $index) {\r\n                                <!-- TIPOS DE HEADERS -->\r\n                                <td [class]=\"getFontColor(row.data,header.key)\">\r\n                                @if (header.type == 'text') {\r\n                                    {{  getValue(row.data,header.key) }} \r\n                                }\r\n                                @if (header.type == 'icon-list') {\r\n                                    <div class=\"table-icon-wrap\">\r\n                                        @for (alert of getList(row.data,header.key); track $index) {\r\n                                            <i [tip]=\"alert.text\" [class]=\"alert.icon + ' alert'\" ></i>\r\n                                        }\r\n                                    </div>\r\n                                }\r\n                                @else if (header.type == 'list'){\r\n                                    <uic-table-list [list]=\"getList(row.data,header.key)\"></uic-table-list>                 \r\n                                }\r\n                                @else if (header.type == 'user'){\r\n                                    <uic-table-user [user]=\"getUser(row.data,header.key)\"></uic-table-user>                 \r\n                                }\r\n                                @else if (header.type == 'checkbox'){\r\n                                    <ui-checkbox [ngModel]=\"checkedIds.has(row.id)\" (ngModelChange)=\"toggleSelection(row.id,$event)\" ></ui-checkbox>                \r\n                                }\r\n                                @else if (header.type == 'actions') {                        \r\n                                    <div class=\"table-actions\">\r\n                                        @for (btn of header.actions; track $index) {\r\n                                            @if (isValidRule(row.data,btn.rule)) {\r\n                                                <ui-button \r\n                                                    [disabled]=\"loading\"\r\n                                                    [tip]=\"btn.tooltip??''\"\r\n                                                    size=\"s\"\r\n                                                    [iconOnly]=\"btn.text==null\"\r\n                                                    [text]=\"btn.text??''\"\r\n                                                    [icon]=\"btn.icon??''\"\r\n                                                    [color]=\"btn.color\"\r\n                                                    (click)=\"doAction(row.id,btn.key)\">\r\n                                                </ui-button> \r\n                                            }\r\n                                        } \r\n                                    </div>\r\n                                    }\r\n                                </td>\r\n                            }\r\n                        </tr>\r\n                    }@empty {\r\n                        @if (showEmptyMessage) {\r\n                            <tr> \r\n                                <td [colSpan]=\"columns.length\">\r\n                                    <div class=\"empty\">{{emptyMessage}} </div>\r\n                                </td>\r\n                            </tr>\r\n                        }\r\n                    }\r\n                }\r\n            </tbody>\r\n        </table>\r\n    </div>\r\n    \r\n    @if (showPagination) {\r\n        <uic-table-pagination \r\n            [loading]=\"loading\" \r\n            [totalPages]=\"pages\" \r\n            [size]=\"size\"\r\n            [buttonSize]=\"buttonSize\"\r\n            (sizeChange)=\"sizeChabge($event)\"\r\n            (pageChange)=\"pageChage($event)\">\r\n        </uic-table-pagination>\r\n    }\r\n</div>", styles: [".table-wrapper{overflow:hidden;border:solid 1px var(--table-border-color);border-radius:12px}table{width:100%;font-weight:400}table th{font-size:12px;height:calc(var(--table-spacing-ref) * 5.4);font-weight:500;color:var(--table-header-color);background-color:var(--table-header-background)}table th .th-wrap{white-space:nowrap;display:flex;align-items:center;justify-content:center}table th .th-wrap div{padding:1px;display:flex;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none;border-radius:50%;margin-left:10px;cursor:pointer;transition:ease .3s;color:var(--grey-400)}table th .th-wrap div:hover{color:var(--primary-500)}table td{font-size:14px;color:var(--grey-600);height:calc(var(--table-spacing-ref) * 6)}table td,table th{text-align:center;padding:0 calc(var(--table-spacing-ref) * 2);vertical-align:middle;border-bottom:solid 1px var(--table-border-color)}table tr{transition:ease .3s}table tr:hover{background-color:var(--grey-50)}.table-container{width:100%;overflow-x:auto}.table-topbar{padding:20px 24px;font-weight:600;font-size:18px;line-height:28px;gap:16px;display:flex;align-items:center;color:var(--grey-900);border-bottom:solid 1px var(--table-border-color)}.table-actions{display:flex;gap:2px}.table-icon-wrap{display:flex;justify-content:center;gap:8px;font-size:18px;margin-right:5px}.loader-tr{border-bottom:none!important}.loader-tr td{padding:0}.sort-active{color:var(--secondary-500)!important;border:solid 1px}.empty{text-align:center;color:var(--grey-300)}.table-filters{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:16px 0}.filter-actions{display:flex;gap:8px}.alert{width:24px;height:24px;font-size:18px;background-color:var(--red-500);color:var(--white);border-radius:50%;padding:3px}.loader{height:5px;width:100%;--c:no-repeat linear-gradient(var(--primary-500) 0 0);background:var(--c),var(--c),var(--primary-500);background-size:60% 100%;animation:l16 3s infinite}@keyframes l16{0%{background-position:-150% 0,-150% 0}66%{background-position:250% 0,-150% 0}to{background-position:250% 0,250% 0}}.striped tbody tr:nth-child(odd){background-color:var(--grey-50);transition:ease .3s}.striped tbody tr:nth-child(odd):hover{background-color:var(--primary-500)}.tr-highlighted{border-left:solid 6px var(--green-500)}.trc-primary{color:var(--primary-500)}.trc-red{color:var(--red-500)}.trc-blue{color:var(--blue-500)}.trc-green{color:var(--green-500)}.trc-yellow{color:var(--yellow-500)}.trc-black{color:var(--grey-900)}.trc-grey{color:var(--grey-300)}.row-loader{background:linear-gradient(90deg,var(--grey-100) 25%,var(--grey-200) 50%,var(--grey-100) 75%);height:20px;width:100%;background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:4px}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: UicTableUserComponent, selector: "uic-table-user", inputs: ["user"] }, { kind: "component", type: UicTableListComponent, selector: "uic-table-list", inputs: ["list"] }, { kind: "component", type: UicTableUicSearcherComponent, selector: "uic-table-searcher", inputs: ["placeholder", "label", "searchOnKeydown"], outputs: ["filter"] }, { kind: "component", type: UicTablePaginationComponent, selector: "uic-table-pagination", inputs: ["buttonSize", "currentPage", "totalPages", "size", "loading"], outputs: ["pageChange", "sizeChange"] }, { kind: "directive", type: UicToolTipDirective, selector: "[tip]", inputs: ["tip"] }, { kind: "component", type: UicCheckboxComponent, selector: "ui-checkbox", inputs: ["icon", "iconColor", "label", "tip", "type", "placeholder", "disabled", "loading"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], animations: [highlightRow, animatedRow] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTableComponent, isStandalone: true, selector: "ui-table", inputs: { columns: "columns", data: "data", loading: "loading", pages: "pages", size: "size", squeletonRows: "squeletonRows", buttonSize: "buttonSize", highlightedId: "highlightedId", headerText: "headerText", totalItems: "totalItems", searchEnabled: "searchEnabled", searchLabel: "searchLabel", searchPlaceholder: "searchPlaceholder", striped: "striped", showPagination: "showPagination", showEmptyMessage: "showEmptyMessage", emptyMessage: "emptyMessage" }, outputs: { action: "action", update: "update", checkedChange: "checkedChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"table-filters\">\r\n    @if (searchEnabled) {\r\n        <uic-table-searcher (filter)=\"search($event)\" [placeholder]=\"searchPlaceholder\" ></uic-table-searcher>\r\n    }\r\n    <div class=\"filter-actions\">\r\n        <ng-content select=\"[actions]\"></ng-content>\r\n    </div>\r\n</div>\r\n<div class=\"table-wrapper\">\r\n    @if (headerText) {\r\n        <div class=\"table-topbar\"> {{headerText}} <span class=\"hightlited-note\"> {{totalItems}} </span> </div>\r\n    }\r\n    <div class=\"table-container\">    \r\n        <table [class.striped]=\"striped\">\r\n            <thead>\r\n                <tr>\r\n                    @for (header of columns; track $index) {\r\n                        <th>\r\n                            <div class=\"th-wrap\">{{header.label.toUpperCase() }} \r\n                                @if (header.sortEnable) {\r\n                                    <div (click)=\"sortClick(header.key)\" [ngClass]=\"{'sort-active':header.key == sortKey}\">\r\n                                        <i  [class]=\"(sortAsc||header.key != sortKey)?'ri-arrow-down-line':'ri-arrow-up-line'\"></i> \r\n                                    </div>\r\n                                }\r\n                                @if (header.type=='checkbox') {\r\n                                    <ui-checkbox [(ngModel)]=\"allSelected\" (ngModelChange)=\"toggleAll($event)\"></ui-checkbox>\r\n                                }\r\n                            </div>\r\n                        </th>   \r\n                    }\r\n                </tr>\r\n            </thead>\r\n            <tbody>\r\n\r\n                @if (loading) {\r\n                    @for (item of [].constructor(squeletonRows); track $index) {\r\n                        <tr class=\"\">\r\n                            @for (header of columns; track $index) {\r\n                                <td> <div class=\"row-loader\"></div> </td>\r\n                            }\r\n                        </tr>       \r\n                    }\r\n                } @else {\r\n                    @for (row of data; track row.id) {\r\n                        <tr [@highlightRow]=\"highlightedId === row.id ? 'highlighted' : null\"  [class.tr-highlighted]=\"row.highlighted\">\r\n                            @for (header of columns; track $index) {\r\n                                <!-- TIPOS DE HEADERS -->\r\n                                <td [class]=\"getFontColor(row.data,header.key)\">\r\n                                @if (header.type == 'text') {\r\n                                    {{  getValue(row.data,header.key) }} \r\n                                }\r\n                                @if (header.type == 'icon-list') {\r\n                                    <div class=\"table-icon-wrap\">\r\n                                        @for (alert of getList(row.data,header.key); track $index) {\r\n                                            <i [tip]=\"alert.text\" [class]=\"alert.icon + ' alert'\" ></i>\r\n                                        }\r\n                                    </div>\r\n                                }\r\n                                @else if (header.type == 'list'){\r\n                                    <uic-table-list [list]=\"getList(row.data,header.key)\"></uic-table-list>                 \r\n                                }\r\n                                @else if (header.type == 'user'){\r\n                                    <uic-table-user [user]=\"getUser(row.data,header.key)\"></uic-table-user>                 \r\n                                }\r\n                                @else if (header.type == 'checkbox'){\r\n                                    <ui-checkbox [ngModel]=\"checkedIds.has(row.id)\" (ngModelChange)=\"toggleSelection(row.id,$event)\" ></ui-checkbox>                \r\n                                }\r\n                                @else if (header.type == 'actions') {                        \r\n                                    <div class=\"table-actions\">\r\n                                        @for (btn of header.actions; track $index) {\r\n                                            @if (isValidRule(row.data,btn.rule)) {\r\n                                                <ui-button \r\n                                                    [disabled]=\"loading\"\r\n                                                    [tip]=\"btn.tooltip??''\"\r\n                                                    size=\"s\"\r\n                                                    [iconOnly]=\"btn.text==null\"\r\n                                                    [text]=\"btn.text??''\"\r\n                                                    [icon]=\"btn.icon??''\"\r\n                                                    [color]=\"btn.color\"\r\n                                                    (click)=\"doAction(row.id,btn.key)\">\r\n                                                </ui-button> \r\n                                            }\r\n                                        } \r\n                                    </div>\r\n                                    }\r\n                                </td>\r\n                            }\r\n                        </tr>\r\n                    }@empty {\r\n                        @if (showEmptyMessage) {\r\n                            <tr> \r\n                                <td [colSpan]=\"columns.length\">\r\n                                    <div class=\"empty\">{{emptyMessage}} </div>\r\n                                </td>\r\n                            </tr>\r\n                        }\r\n                    }\r\n                }\r\n            </tbody>\r\n        </table>\r\n    </div>\r\n    \r\n    @if (showPagination) {\r\n        <uic-table-pagination \r\n            [loading]=\"loading\" \r\n            [totalPages]=\"pages\" \r\n            [size]=\"size\"\r\n            [buttonSize]=\"buttonSize\"\r\n            (sizeChange)=\"sizeChabge($event)\"\r\n            (pageChange)=\"pageChage($event)\">\r\n        </uic-table-pagination>\r\n    }\r\n</div>", styles: [".table-wrapper{overflow:hidden;border:solid 1px var(--table-border-color);border-radius:12px}table{width:100%;font-weight:400}table th{font-size:12px;height:calc(var(--table-spacing-ref) * 5.4);font-weight:500;color:var(--table-header-color);background-color:var(--table-header-background)}table th .th-wrap{white-space:nowrap;display:flex;align-items:center;justify-content:center}table th .th-wrap div{padding:1px;display:flex;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none;border-radius:50%;margin-left:10px;cursor:pointer;transition:ease .3s;color:var(--grey-400)}table th .th-wrap div:hover{color:var(--primary-500)}table td{font-size:14px;color:var(--grey-600);height:calc(var(--table-spacing-ref) * 6)}table td,table th{text-align:center;padding:0 calc(var(--table-spacing-ref) * 2);vertical-align:middle;border-bottom:solid 1px var(--table-border-color)}table tr{transition:ease .3s}table tr:hover{background-color:var(--grey-50)}.table-container{width:100%;overflow-x:auto}.table-topbar{padding:20px 24px;font-weight:600;font-size:18px;line-height:28px;gap:16px;display:flex;align-items:center;color:var(--grey-900);border-bottom:solid 1px var(--table-border-color)}.table-actions{display:flex;gap:2px}.table-icon-wrap{display:flex;justify-content:center;gap:8px;font-size:18px;margin-right:5px}.loader-tr{border-bottom:none!important}.loader-tr td{padding:0}.sort-active{color:var(--secondary-500)!important;border:solid 1px}.empty{text-align:center;color:var(--grey-300)}.table-filters{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:16px 0}.filter-actions{display:flex;gap:8px}.alert{width:24px;height:24px;font-size:18px;background-color:var(--red-500);color:var(--white);border-radius:50%;padding:3px}.loader{height:5px;width:100%;--c:no-repeat linear-gradient(var(--primary-500) 0 0);background:var(--c),var(--c),var(--primary-500);background-size:60% 100%;animation:l16 3s infinite}@keyframes l16{0%{background-position:-150% 0,-150% 0}66%{background-position:250% 0,-150% 0}to{background-position:250% 0,250% 0}}.striped tbody tr:nth-child(odd){background-color:var(--grey-50);transition:ease .3s}.striped tbody tr:nth-child(odd):hover{background-color:var(--primary-500)}.tr-highlighted{border-left:solid 6px var(--green-500)}.trc-primary{color:var(--primary-500)}.trc-red{color:var(--red-500)}.trc-blue{color:var(--blue-500)}.trc-green{color:var(--green-500)}.trc-yellow{color:var(--yellow-500)}.trc-black{color:var(--grey-900)}.trc-grey{color:var(--grey-300)}.row-loader{background:linear-gradient(90deg,var(--grey-100) 25%,var(--grey-200) 50%,var(--grey-100) 75%);height:20px;width:100%;background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:4px}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: UicTableUserComponent, selector: "uic-table-user", inputs: ["user"] }, { kind: "component", type: UicTableListComponent, selector: "uic-table-list", inputs: ["list"] }, { kind: "component", type: UicTableUicSearcherComponent, selector: "uic-table-searcher", inputs: ["placeholder", "label", "searchOnKeydown"], outputs: ["filter"] }, { kind: "component", type: UicTablePaginationComponent, selector: "uic-table-pagination", inputs: ["buttonSize", "currentPage", "totalPages", "size", "loading"], outputs: ["pageChange", "sizeChange"] }, { kind: "directive", type: UicToolTipDirective, selector: "[tip]", inputs: ["tip"] }, { kind: "component", type: UicCheckboxComponent, selector: "ui-checkbox", inputs: ["icon", "iconColor", "label", "tip", "type", "placeholder", "disabled", "loading"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], animations: [highlightRow, animatedRow] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableComponent, decorators: [{
             type: Component,
@@ -1662,11 +1739,11 @@ class UicModalComponent {
         this.modalRef.closeFloating(null);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicModalComponent, deps: [{ token: UiModalRef }, { token: MODAL_COMPONENT }, { token: MODAL_CONFIG }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicModalComponent, isStandalone: true, selector: "ui-modal", viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }], ngImport: i0, template: "<div  class=\"backdrop\" (click)=\"closeOuside()\">   \r\n    <div @pushTop class=\"modal\" \r\n        [class]=\"myConfig.size\"\r\n        (click)=\"$event.stopPropagation()\">\r\n        \r\n        @if ( myConfig.title) {\r\n            <div class=\"modal-header\">\r\n                {{myConfig.title}}\r\n                <ui-button color=\"red\" type=\"ghost\" icon=\"ri-close-large-line\" (click)=\"close()\" [iconOnly]=\"true\"></ui-button>\r\n            </div>\r\n        }\r\n        <div class=\"modal-body\" [class.body-padding]=\"myConfig.title!='' && !myConfig.noPadding\">\r\n            <ng-template cdkPortalOutlet></ng-template>\r\n        </div>\r\n\r\n    </div>\r\n</div>", styles: [".backdrop{position:fixed;width:100%;height:100vh;background-color:#00000080;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center}@media (max-width: 767px){.backdrop{align-items:flex-start;padding-top:20px}}.modal{background:var(--white);border-radius:20px;min-width:300px;max-width:90%;height:fit-content;max-height:90vh;box-shadow:0 20px 70px #00000052;padding:0 10px;display:flex;flex-direction:column}.modal-header{padding:0 15px;width:100%;display:flex;align-items:center;font-size:22px;font-weight:600;justify-content:space-between;margin:0 auto;color:var(--primary-500);height:63px;border-bottom:solid 1px var(--primary-500)}@media (max-width: 767px){.modal-header{padding:5px}}.modal-body{flex:1 1;overflow-y:auto}.body-padding{padding:25px}@media (max-width: 767px){.body-padding{padding:10px}}.medium{width:70%;max-width:800px;max-height:80%}@media (max-width: 767px){.medium{width:90%}}.large{width:80%;max-width:900px}@media (max-width: 767px){.large{width:95%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1$3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }], animations: [pushTop] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicModalComponent, isStandalone: true, selector: "ui-modal", viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }], ngImport: i0, template: "<div  class=\"backdrop\" (click)=\"closeOuside()\">   \r\n    <div @pushTop class=\"modal\" \r\n        [class]=\"myConfig.size\"\r\n        (click)=\"$event.stopPropagation()\">\r\n        \r\n        @if ( myConfig.title) {\r\n            <div class=\"modal-header\">\r\n                {{myConfig.title}}\r\n                <ui-button color=\"red\" type=\"ghost\" icon=\"ri-close-large-line\" (click)=\"close()\" [iconOnly]=\"true\"></ui-button>\r\n            </div>\r\n        }\r\n        <div class=\"modal-body\" [class.body-padding]=\"myConfig.title!='' && !myConfig.noPadding\">\r\n            <ng-template cdkPortalOutlet></ng-template>\r\n        </div>\r\n\r\n    </div>\r\n</div>", styles: [".backdrop{position:fixed;width:100%;height:100vh;background-color:#00000080;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center}@media (max-width: 399px){.backdrop{align-items:flex-start;padding-top:20px}}.modal{background:var(--white);border-radius:20px;min-width:300px;max-width:90%;height:fit-content;max-height:90vh;box-shadow:0 20px 70px #00000052;padding:0 10px;display:flex;flex-direction:column}.modal-header{padding:0 15px;width:100%;display:flex;align-items:center;font-size:22px;font-weight:600;justify-content:space-between;margin:0 auto;color:var(--primary-500);height:63px;border-bottom:solid 1px var(--primary-500)}@media (max-width: 399px){.modal-header{padding:5px}}.modal-body{flex:1 1;overflow-y:auto}.body-padding{padding:25px}@media (max-width: 399px){.body-padding{padding:10px}}.medium{width:70%;max-width:800px;max-height:80%}@media (max-width: 399px){.medium{width:90%}}.large{width:80%;max-width:900px}@media (max-width: 399px){.large{width:95%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1$2.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }], animations: [pushTop] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-modal', imports: [CommonModule, PortalModule, UicButtonComponent], animations: [pushTop], template: "<div  class=\"backdrop\" (click)=\"closeOuside()\">   \r\n    <div @pushTop class=\"modal\" \r\n        [class]=\"myConfig.size\"\r\n        (click)=\"$event.stopPropagation()\">\r\n        \r\n        @if ( myConfig.title) {\r\n            <div class=\"modal-header\">\r\n                {{myConfig.title}}\r\n                <ui-button color=\"red\" type=\"ghost\" icon=\"ri-close-large-line\" (click)=\"close()\" [iconOnly]=\"true\"></ui-button>\r\n            </div>\r\n        }\r\n        <div class=\"modal-body\" [class.body-padding]=\"myConfig.title!='' && !myConfig.noPadding\">\r\n            <ng-template cdkPortalOutlet></ng-template>\r\n        </div>\r\n\r\n    </div>\r\n</div>", styles: [".backdrop{position:fixed;width:100%;height:100vh;background-color:#00000080;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center}@media (max-width: 767px){.backdrop{align-items:flex-start;padding-top:20px}}.modal{background:var(--white);border-radius:20px;min-width:300px;max-width:90%;height:fit-content;max-height:90vh;box-shadow:0 20px 70px #00000052;padding:0 10px;display:flex;flex-direction:column}.modal-header{padding:0 15px;width:100%;display:flex;align-items:center;font-size:22px;font-weight:600;justify-content:space-between;margin:0 auto;color:var(--primary-500);height:63px;border-bottom:solid 1px var(--primary-500)}@media (max-width: 767px){.modal-header{padding:5px}}.modal-body{flex:1 1;overflow-y:auto}.body-padding{padding:25px}@media (max-width: 767px){.body-padding{padding:10px}}.medium{width:70%;max-width:800px;max-height:80%}@media (max-width: 767px){.medium{width:90%}}.large{width:80%;max-width:900px}@media (max-width: 767px){.large{width:95%}}\n"] }]
+            args: [{ selector: 'ui-modal', imports: [CommonModule, PortalModule, UicButtonComponent], animations: [pushTop], template: "<div  class=\"backdrop\" (click)=\"closeOuside()\">   \r\n    <div @pushTop class=\"modal\" \r\n        [class]=\"myConfig.size\"\r\n        (click)=\"$event.stopPropagation()\">\r\n        \r\n        @if ( myConfig.title) {\r\n            <div class=\"modal-header\">\r\n                {{myConfig.title}}\r\n                <ui-button color=\"red\" type=\"ghost\" icon=\"ri-close-large-line\" (click)=\"close()\" [iconOnly]=\"true\"></ui-button>\r\n            </div>\r\n        }\r\n        <div class=\"modal-body\" [class.body-padding]=\"myConfig.title!='' && !myConfig.noPadding\">\r\n            <ng-template cdkPortalOutlet></ng-template>\r\n        </div>\r\n\r\n    </div>\r\n</div>", styles: [".backdrop{position:fixed;width:100%;height:100vh;background-color:#00000080;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center}@media (max-width: 399px){.backdrop{align-items:flex-start;padding-top:20px}}.modal{background:var(--white);border-radius:20px;min-width:300px;max-width:90%;height:fit-content;max-height:90vh;box-shadow:0 20px 70px #00000052;padding:0 10px;display:flex;flex-direction:column}.modal-header{padding:0 15px;width:100%;display:flex;align-items:center;font-size:22px;font-weight:600;justify-content:space-between;margin:0 auto;color:var(--primary-500);height:63px;border-bottom:solid 1px var(--primary-500)}@media (max-width: 399px){.modal-header{padding:5px}}.modal-body{flex:1 1;overflow-y:auto}.body-padding{padding:25px}@media (max-width: 399px){.body-padding{padding:10px}}.medium{width:70%;max-width:800px;max-height:80%}@media (max-width: 399px){.medium{width:90%}}.large{width:80%;max-width:900px}@media (max-width: 399px){.large{width:95%}}\n"] }]
         }], ctorParameters: () => [{ type: UiModalRef, decorators: [{
                     type: Inject,
                     args: [UiModalRef]
@@ -1737,11 +1814,11 @@ class UicSideModalComponent {
         this.modal.triggerSave();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSideModalComponent, deps: [{ token: UiModalRef }, { token: MODAL_COMPONENT }, { token: MODAL_CONFIG }, { token: i0.Injector }, { token: UicModalService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicSideModalComponent, isStandalone: true, selector: "ui-side-modal", viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }], ngImport: i0, template: "<div  [@fadeBackdrop]=\"state\" class=\"backdrop\" (click)=\"closeOuside()\">   \r\n</div>\r\n<div [@sideModal]=\"state\" \r\n    (@sideModal.done)=\"onAnimationDone($event)\" \r\n    class=\"sidemodal\" \r\n    [style.padding-top]=\"myConfig.headerEnabled?'28px':'0'\"\r\n    [style.width]=\"myConfig.width??'60%'\" \r\n    (click)=\"$event.stopPropagation()\">\r\n    @if (myConfig.headerEnabled) {\r\n        <ui-button class=\"close-icon\" (click)=\"close()\" icon=\"ri-close-large-line\" type=\"ghost\" color=\"black\" [iconOnly]=\"true\" size=\"m\"></ui-button>\r\n    }\r\n    <div class=\"sidemodal-body\" [class.body-padding]=\"myConfig.title!=''\">\r\n        <ng-template cdkPortalOutlet></ng-template>\r\n    </div>\r\n    @if (myConfig.footerEnabled) {\r\n        <div class=\"sidemodal-footer\">\r\n            @if (myConfig.showCancelButton) {\r\n                <ui-button (click)=\"close()\" color=\"black\" size=\"l\" type=\"bordered\" icon=\"ri-close-line\">{{myConfig.footerCancelButtonText??'Cancelar'}}</ui-button>\r\n            }\r\n            <ui-button (click)=\"save()\" color=\"black\" size=\"l\" rightIcon=\"ri-check-line\">{{myConfig.footerOkButtonText??'Siguiente'}}</ui-button>\r\n        </div>\r\n    }\r\n</div>", styles: ["::ng-deep .side-modal-panel{position:fixed!important;top:0;right:0;height:100%;width:400px;background:#fff;z-index:2000;box-shadow:-2px 0 8px #0003;display:flex;flex-direction:column}.backdrop{position:fixed;inset:0;width:100%;height:100vh;background-color:#00000080;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);display:flex;justify-content:flex-end}.close-icon{position:absolute;right:30px;height:30px}.sidemodal{position:fixed;right:0;top:0;height:100%;background-color:var(--white);display:flex;flex-direction:column}.sidemodal-header{height:30px;width:100%;padding:0 30px;display:flex;align-items:center;justify-content:space-between}.sidemodal-body{flex:1;overflow-y:auto;padding:32px}.sidemodal-footer{height:96px;padding:24px 40px;width:100%;display:flex;gap:8px;justify-content:flex-end;border-top:1px solid var(--grey-300)}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1$3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }], animations: [sideModal, fadeBackdrop] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicSideModalComponent, isStandalone: true, selector: "ui-side-modal", viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }], ngImport: i0, template: "<div  [@fadeBackdrop]=\"state\" class=\"backdrop\" (click)=\"closeOuside()\">   \r\n</div>\r\n<div [@sideModal]=\"state\" \r\n    (@sideModal.done)=\"onAnimationDone($event)\" \r\n    class=\"sidemodal\" \r\n    [style.padding-top]=\"myConfig.headerEnabled?'28px':'0'\"\r\n    [style.width]=\"myConfig.width??'60%'\" \r\n    (click)=\"$event.stopPropagation()\">\r\n    @if (myConfig.headerEnabled) {\r\n        <ui-button class=\"close-icon\" (click)=\"close()\" icon=\"ri-close-large-line\" type=\"ghost\" color=\"black\" [iconOnly]=\"true\" size=\"m\"></ui-button>\r\n    }\r\n    <div class=\"sidemodal-body\" [class.body-padding]=\"myConfig.title!=''\">\r\n        <ng-template cdkPortalOutlet></ng-template>\r\n    </div>\r\n    @if (myConfig.footerEnabled) {\r\n        <div class=\"sidemodal-footer\">\r\n            @if (myConfig.showCancelButton) {\r\n                <ui-button (click)=\"close()\" color=\"black\" size=\"l\" type=\"bordered\" icon=\"ri-close-line\">{{myConfig.footerCancelButtonText??'Cancelar'}}</ui-button>\r\n            }\r\n            <ui-button (click)=\"save()\" color=\"black\" size=\"l\" rightIcon=\"ri-check-line\">{{myConfig.footerOkButtonText??'Siguiente'}}</ui-button>\r\n        </div>\r\n    }\r\n</div>", styles: ["::ng-deep .side-modal-panel{position:fixed!important;top:0;right:0;height:100%;width:400px;background:#fff;z-index:2000;box-shadow:-2px 0 8px #0003;display:flex;flex-direction:column}.backdrop{position:fixed;inset:0;width:100%;height:100vh;background-color:#00000080;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);display:flex;justify-content:flex-end}.close-icon{position:absolute;right:30px;height:30px}.sidemodal{position:fixed;right:0;top:0;height:100%;background-color:var(--white);display:flex;flex-direction:column}@media (max-width: 399px){.sidemodal{width:100%!important}}@media (min-width: 400px) and (max-width: 767px){.sidemodal{width:90%!important}}.sidemodal-header{height:30px;width:100%;padding:0 30px;display:flex;align-items:center;justify-content:space-between}.sidemodal-body{flex:1;overflow-y:auto;padding:32px}.sidemodal-footer{height:96px;padding:24px 40px;width:100%;display:flex;gap:8px;justify-content:flex-end;border-top:1px solid var(--grey-300)}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1$2.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }], animations: [sideModal, fadeBackdrop] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSideModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-side-modal', imports: [PortalModule, UicButtonComponent], animations: [sideModal, fadeBackdrop], template: "<div  [@fadeBackdrop]=\"state\" class=\"backdrop\" (click)=\"closeOuside()\">   \r\n</div>\r\n<div [@sideModal]=\"state\" \r\n    (@sideModal.done)=\"onAnimationDone($event)\" \r\n    class=\"sidemodal\" \r\n    [style.padding-top]=\"myConfig.headerEnabled?'28px':'0'\"\r\n    [style.width]=\"myConfig.width??'60%'\" \r\n    (click)=\"$event.stopPropagation()\">\r\n    @if (myConfig.headerEnabled) {\r\n        <ui-button class=\"close-icon\" (click)=\"close()\" icon=\"ri-close-large-line\" type=\"ghost\" color=\"black\" [iconOnly]=\"true\" size=\"m\"></ui-button>\r\n    }\r\n    <div class=\"sidemodal-body\" [class.body-padding]=\"myConfig.title!=''\">\r\n        <ng-template cdkPortalOutlet></ng-template>\r\n    </div>\r\n    @if (myConfig.footerEnabled) {\r\n        <div class=\"sidemodal-footer\">\r\n            @if (myConfig.showCancelButton) {\r\n                <ui-button (click)=\"close()\" color=\"black\" size=\"l\" type=\"bordered\" icon=\"ri-close-line\">{{myConfig.footerCancelButtonText??'Cancelar'}}</ui-button>\r\n            }\r\n            <ui-button (click)=\"save()\" color=\"black\" size=\"l\" rightIcon=\"ri-check-line\">{{myConfig.footerOkButtonText??'Siguiente'}}</ui-button>\r\n        </div>\r\n    }\r\n</div>", styles: ["::ng-deep .side-modal-panel{position:fixed!important;top:0;right:0;height:100%;width:400px;background:#fff;z-index:2000;box-shadow:-2px 0 8px #0003;display:flex;flex-direction:column}.backdrop{position:fixed;inset:0;width:100%;height:100vh;background-color:#00000080;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);display:flex;justify-content:flex-end}.close-icon{position:absolute;right:30px;height:30px}.sidemodal{position:fixed;right:0;top:0;height:100%;background-color:var(--white);display:flex;flex-direction:column}.sidemodal-header{height:30px;width:100%;padding:0 30px;display:flex;align-items:center;justify-content:space-between}.sidemodal-body{flex:1;overflow-y:auto;padding:32px}.sidemodal-footer{height:96px;padding:24px 40px;width:100%;display:flex;gap:8px;justify-content:flex-end;border-top:1px solid var(--grey-300)}\n"] }]
+            args: [{ selector: 'ui-side-modal', imports: [PortalModule, UicButtonComponent], animations: [sideModal, fadeBackdrop], template: "<div  [@fadeBackdrop]=\"state\" class=\"backdrop\" (click)=\"closeOuside()\">   \r\n</div>\r\n<div [@sideModal]=\"state\" \r\n    (@sideModal.done)=\"onAnimationDone($event)\" \r\n    class=\"sidemodal\" \r\n    [style.padding-top]=\"myConfig.headerEnabled?'28px':'0'\"\r\n    [style.width]=\"myConfig.width??'60%'\" \r\n    (click)=\"$event.stopPropagation()\">\r\n    @if (myConfig.headerEnabled) {\r\n        <ui-button class=\"close-icon\" (click)=\"close()\" icon=\"ri-close-large-line\" type=\"ghost\" color=\"black\" [iconOnly]=\"true\" size=\"m\"></ui-button>\r\n    }\r\n    <div class=\"sidemodal-body\" [class.body-padding]=\"myConfig.title!=''\">\r\n        <ng-template cdkPortalOutlet></ng-template>\r\n    </div>\r\n    @if (myConfig.footerEnabled) {\r\n        <div class=\"sidemodal-footer\">\r\n            @if (myConfig.showCancelButton) {\r\n                <ui-button (click)=\"close()\" color=\"black\" size=\"l\" type=\"bordered\" icon=\"ri-close-line\">{{myConfig.footerCancelButtonText??'Cancelar'}}</ui-button>\r\n            }\r\n            <ui-button (click)=\"save()\" color=\"black\" size=\"l\" rightIcon=\"ri-check-line\">{{myConfig.footerOkButtonText??'Siguiente'}}</ui-button>\r\n        </div>\r\n    }\r\n</div>", styles: ["::ng-deep .side-modal-panel{position:fixed!important;top:0;right:0;height:100%;width:400px;background:#fff;z-index:2000;box-shadow:-2px 0 8px #0003;display:flex;flex-direction:column}.backdrop{position:fixed;inset:0;width:100%;height:100vh;background-color:#00000080;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);display:flex;justify-content:flex-end}.close-icon{position:absolute;right:30px;height:30px}.sidemodal{position:fixed;right:0;top:0;height:100%;background-color:var(--white);display:flex;flex-direction:column}@media (max-width: 399px){.sidemodal{width:100%!important}}@media (min-width: 400px) and (max-width: 767px){.sidemodal{width:90%!important}}.sidemodal-header{height:30px;width:100%;padding:0 30px;display:flex;align-items:center;justify-content:space-between}.sidemodal-body{flex:1;overflow-y:auto;padding:32px}.sidemodal-footer{height:96px;padding:24px 40px;width:100%;display:flex;gap:8px;justify-content:flex-end;border-top:1px solid var(--grey-300)}\n"] }]
         }], ctorParameters: () => [{ type: UiModalRef, decorators: [{
                     type: Inject,
                     args: [UiModalRef]
@@ -1838,11 +1915,11 @@ class TinyAlertComponent {
         this.modalRef.closeFloating(value ? this.response : null);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TinyAlertComponent, deps: [{ token: MODAL_DATA }, { token: UiModalRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: TinyAlertComponent, isStandalone: true, selector: "ui-tiny-alert", ngImport: i0, template: "<div class=\"alert-wrapper\">\r\n    @if (data.iconPath != '') {\r\n        <img [src]=\"data.iconPath\" alt=\"\">    \r\n    }\r\n    <h3>  {{data.title}} </h3>\r\n    <div class=\"alert-body\" [innerHTML]=\"data.body\">   </div>\r\n    <div class=\"card-buttons\">\r\n        @if (data.showCancelButton) {\r\n            <ui-button (click)=\"close(false)\" type=\"bordered\" [color]=\"data.cancelButtonColor??'primary'\" size=\"l\"> {{data.cancelButtonText??'Cancelar'}} </ui-button>\r\n        }\r\n        <ui-button (click)=\"close(true)\" [color]=\"data.okButtonColor??'primary'\" size=\"l\"> {{data.okButtonText??'Continuar'}} </ui-button>\r\n    </div>\r\n    <button class=\"floating-close\" (click)=\"close(false)\" >\r\n        <i class=\"ri-close-line\"></i>\r\n    </button>\r\n</div>\r\n", styles: [".alert-wrapper{position:relative;display:flex;flex-direction:column;align-items:center;padding:20px 20px 5px;width:400px;max-width:100%;-webkit-user-select:none;user-select:none}.alert-wrapper img{height:88px;margin-bottom:20px}h3{font-size:24px;font-weight:800;margin-bottom:10px}.alert-body{font-size:18px;font-weight:700;line-height:24px;text-align:center;color:var(--grey-500)}.floating-close{position:absolute;top:-10px;right:-20px;background-color:transparent;font-size:28px;border:none;cursor:pointer;transition:ease .3s}.floating-close:hover{color:var(--red-500)}@media (max-width: 767px){.floating-close{top:0;right:-5px}}\n"], dependencies: [{ kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: TinyAlertComponent, isStandalone: true, selector: "ui-tiny-alert", ngImport: i0, template: "<div class=\"alert-wrapper\">\r\n    @if (data.iconPath != '') {\r\n        <img [src]=\"data.iconPath\" alt=\"\">    \r\n    }\r\n    <h3>  {{data.title}} </h3>\r\n    <div class=\"alert-body\" [innerHTML]=\"data.body\">   </div>\r\n    <div class=\"card-buttons\">\r\n        @if (data.showCancelButton) {\r\n            <ui-button (click)=\"close(false)\" type=\"bordered\" [color]=\"data.cancelButtonColor??'primary'\" size=\"l\"> {{data.cancelButtonText??'Cancelar'}} </ui-button>\r\n        }\r\n        <ui-button (click)=\"close(true)\" [color]=\"data.okButtonColor??'primary'\" size=\"l\"> {{data.okButtonText??'Continuar'}} </ui-button>\r\n    </div>\r\n    <button class=\"floating-close\" (click)=\"close(false)\" >\r\n        <i class=\"ri-close-line\"></i>\r\n    </button>\r\n</div>\r\n", styles: [".alert-wrapper{position:relative;display:flex;flex-direction:column;align-items:center;padding:20px 20px 5px;width:400px;max-width:100%;-webkit-user-select:none;user-select:none}.alert-wrapper img{height:88px;margin-bottom:20px}h3{font-size:24px;font-weight:800;margin-bottom:10px}.alert-body{font-size:18px;font-weight:700;line-height:24px;text-align:center;color:var(--grey-500)}.floating-close{position:absolute;top:-10px;right:-20px;background-color:transparent;font-size:28px;border:none;cursor:pointer;transition:ease .3s}.floating-close:hover{color:var(--red-500)}@media (max-width: 399px){.floating-close{top:0;right:-5px}}\n"], dependencies: [{ kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TinyAlertComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-tiny-alert', imports: [UicButtonComponent], template: "<div class=\"alert-wrapper\">\r\n    @if (data.iconPath != '') {\r\n        <img [src]=\"data.iconPath\" alt=\"\">    \r\n    }\r\n    <h3>  {{data.title}} </h3>\r\n    <div class=\"alert-body\" [innerHTML]=\"data.body\">   </div>\r\n    <div class=\"card-buttons\">\r\n        @if (data.showCancelButton) {\r\n            <ui-button (click)=\"close(false)\" type=\"bordered\" [color]=\"data.cancelButtonColor??'primary'\" size=\"l\"> {{data.cancelButtonText??'Cancelar'}} </ui-button>\r\n        }\r\n        <ui-button (click)=\"close(true)\" [color]=\"data.okButtonColor??'primary'\" size=\"l\"> {{data.okButtonText??'Continuar'}} </ui-button>\r\n    </div>\r\n    <button class=\"floating-close\" (click)=\"close(false)\" >\r\n        <i class=\"ri-close-line\"></i>\r\n    </button>\r\n</div>\r\n", styles: [".alert-wrapper{position:relative;display:flex;flex-direction:column;align-items:center;padding:20px 20px 5px;width:400px;max-width:100%;-webkit-user-select:none;user-select:none}.alert-wrapper img{height:88px;margin-bottom:20px}h3{font-size:24px;font-weight:800;margin-bottom:10px}.alert-body{font-size:18px;font-weight:700;line-height:24px;text-align:center;color:var(--grey-500)}.floating-close{position:absolute;top:-10px;right:-20px;background-color:transparent;font-size:28px;border:none;cursor:pointer;transition:ease .3s}.floating-close:hover{color:var(--red-500)}@media (max-width: 767px){.floating-close{top:0;right:-5px}}\n"] }]
+            args: [{ selector: 'ui-tiny-alert', imports: [UicButtonComponent], template: "<div class=\"alert-wrapper\">\r\n    @if (data.iconPath != '') {\r\n        <img [src]=\"data.iconPath\" alt=\"\">    \r\n    }\r\n    <h3>  {{data.title}} </h3>\r\n    <div class=\"alert-body\" [innerHTML]=\"data.body\">   </div>\r\n    <div class=\"card-buttons\">\r\n        @if (data.showCancelButton) {\r\n            <ui-button (click)=\"close(false)\" type=\"bordered\" [color]=\"data.cancelButtonColor??'primary'\" size=\"l\"> {{data.cancelButtonText??'Cancelar'}} </ui-button>\r\n        }\r\n        <ui-button (click)=\"close(true)\" [color]=\"data.okButtonColor??'primary'\" size=\"l\"> {{data.okButtonText??'Continuar'}} </ui-button>\r\n    </div>\r\n    <button class=\"floating-close\" (click)=\"close(false)\" >\r\n        <i class=\"ri-close-line\"></i>\r\n    </button>\r\n</div>\r\n", styles: [".alert-wrapper{position:relative;display:flex;flex-direction:column;align-items:center;padding:20px 20px 5px;width:400px;max-width:100%;-webkit-user-select:none;user-select:none}.alert-wrapper img{height:88px;margin-bottom:20px}h3{font-size:24px;font-weight:800;margin-bottom:10px}.alert-body{font-size:18px;font-weight:700;line-height:24px;text-align:center;color:var(--grey-500)}.floating-close{position:absolute;top:-10px;right:-20px;background-color:transparent;font-size:28px;border:none;cursor:pointer;transition:ease .3s}.floating-close:hover{color:var(--red-500)}@media (max-width: 399px){.floating-close{top:0;right:-5px}}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [MODAL_DATA]