ui-core-abv 0.0.1

package/fesm2022/ui-core-abv.mjs

@@ -0,0 +1,1492 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, Output, Input, Directive, forwardRef, Component, Injectable, Pipe, createComponent, HostListener, inject, Renderer2, ViewChild, Injector, Inject, EnvironmentInjector } from '@angular/core';
+import * as i1$1 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule, FormBuilder, Validators } from '@angular/forms';
+import * as i1 from '@angular/common';
+import { CommonModule, AsyncPipe } from '@angular/common';
+import { Subject, debounceTime, distinctUntilChanged, tap, switchMap, of, finalize } from 'rxjs';
+import { trigger, transition, style, animate, state, keyframes } from '@angular/animations';
+import * as i1$2 from '@angular/cdk/overlay';
+import { OverlayModule, Overlay, OverlayRef } from '@angular/cdk/overlay';
+import * as i2 from '@angular/cdk/portal';
+import { TemplatePortal, ComponentPortal, PortalModule, CdkPortalOutlet } from '@angular/cdk/portal';
+
+function createValueAccessor() {
+    class BaseValueAccessor {
+        value;
+        valueChange = new EventEmitter();
+        onChange = () => { };
+        onTouched = () => { };
+        writeValue(obj) {
+            this.value = obj;
+        }
+        registerOnChange(fn) {
+            this.onChange = fn;
+        }
+        registerOnTouched(fn) {
+            this.onTouched = fn;
+        }
+        setDisabledState(isDisabled) {
+            // opcional
+        }
+        notifyChange(value) {
+            this.value = value;
+            this.valueChange.emit(value);
+            this.onChange(value);
+            this.onTouched();
+        }
+        static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BaseValueAccessor, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+        static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: BaseValueAccessor, isStandalone: true, inputs: { value: "value" }, outputs: { valueChange: "valueChange" }, ngImport: i0 });
+    }
+    i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BaseValueAccessor, decorators: [{
+                type: Directive
+            }], propDecorators: { value: [{
+                    type: Input
+                }], valueChange: [{
+                    type: Output
+                }] } });
+    return BaseValueAccessor;
+}
+
+const base$1 = createValueAccessor();
+class CheckboxComponent extends base$1 {
+    label = '';
+    placeholder = '';
+    disabled = false;
+    loading = false;
+    toggle() {
+        if (!this.disabled && !this.loading) {
+            this.notifyChange(!this.value);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: CheckboxComponent, isStandalone: true, selector: "ui-checkbox", inputs: { label: "label", placeholder: "placeholder", disabled: "disabled", loading: "loading" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => CheckboxComponent),
+                multi: true
+            }
+        ], usesInheritance: true, ngImport: i0, template: "@if (label){\r\n  <label for=\"\">{{label}} </label>\r\n}\r\n<div class=\"check-wrapper\">\r\n    <button\r\n      type=\"button\"\r\n      class=\"checkbox\"\r\n      [disabled]=\"disabled\"\r\n      [class.checked]=\"value\"\r\n      (click)=\"toggle()\"\r\n      (keydown.enter)=\"toggle()\"\r\n      (keydown.space)=\"toggle()\"\r\n    >\r\n      <span class=\"icon\">\r\n        @if (value) {\r\n            \u2714\r\n        }@else {\r\n            \u2212\r\n        }\r\n      </span>\r\n    </button>\r\n    {{placeholder}}\r\n</div>", styles: [".check-wrapper{padding:2px;display:flex;align-items:center;font-size:16px}.check-wrapper button{margin-right:8px}.checkbox{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;border:2px solid #717680;border-radius:6px;background:#fff;cursor:pointer;transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease;outline:none}.checkbox:hover:not(:disabled){border-color:#8230c4}.checkbox:focus,.checkbox:focus-visible{box-shadow:0 0 0 3px #8230c466}.checkbox:disabled{background:#d5d7da;border-color:#d5d7da;cursor:not-allowed}.checkbox:disabled .icon{opacity:.5}.checkbox.checked{background:#752bb0;border-color:#752bb0}.checkbox.checked:hover:not(:disabled){background:#8230c4;border-color:#8230c4}.checkbox.checked .icon{color:#fff}.checkbox.indeterminate{background:#752bb0;border-color:#752bb0}.checkbox.indeterminate .icon{color:#fff}.checkbox .icon{font-size:16px;font-weight:700;color:transparent;line-height:1;transition:color .2s ease}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-checkbox', imports: [], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => CheckboxComponent),
+                            multi: true
+                        }
+                    ], template: "@if (label){\r\n  <label for=\"\">{{label}} </label>\r\n}\r\n<div class=\"check-wrapper\">\r\n    <button\r\n      type=\"button\"\r\n      class=\"checkbox\"\r\n      [disabled]=\"disabled\"\r\n      [class.checked]=\"value\"\r\n      (click)=\"toggle()\"\r\n      (keydown.enter)=\"toggle()\"\r\n      (keydown.space)=\"toggle()\"\r\n    >\r\n      <span class=\"icon\">\r\n        @if (value) {\r\n            \u2714\r\n        }@else {\r\n            \u2212\r\n        }\r\n      </span>\r\n    </button>\r\n    {{placeholder}}\r\n</div>", styles: [".check-wrapper{padding:2px;display:flex;align-items:center;font-size:16px}.check-wrapper button{margin-right:8px}.checkbox{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;border:2px solid #717680;border-radius:6px;background:#fff;cursor:pointer;transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease;outline:none}.checkbox:hover:not(:disabled){border-color:#8230c4}.checkbox:focus,.checkbox:focus-visible{box-shadow:0 0 0 3px #8230c466}.checkbox:disabled{background:#d5d7da;border-color:#d5d7da;cursor:not-allowed}.checkbox:disabled .icon{opacity:.5}.checkbox.checked{background:#752bb0;border-color:#752bb0}.checkbox.checked:hover:not(:disabled){background:#8230c4;border-color:#8230c4}.checkbox.checked .icon{color:#fff}.checkbox.indeterminate{background:#752bb0;border-color:#752bb0}.checkbox.indeterminate .icon{color:#fff}.checkbox .icon{font-size:16px;font-weight:700;color:transparent;line-height:1;transition:color .2s ease}\n"] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }] } });
+
+class ToggleButtonComponent {
+    checked = false;
+    checkedChange = new EventEmitter();
+    disabled = false;
+    placeholder = '';
+    toggle() {
+        if (this.disabled)
+            return;
+        this.checked = !this.checked;
+        this.checkedChange.emit(this.checked);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ToggleButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ToggleButtonComponent, isStandalone: true, selector: "ui-switch", inputs: { checked: "checked", disabled: "disabled", placeholder: "placeholder" }, outputs: { checkedChange: "checkedChange" }, ngImport: i0, template: "<div class=\"toggle-wrapper\" [class.disabled]=\"disabled\">\r\n  <button\r\n    type=\"button\"\r\n    class=\"toggle\"\r\n    [class.checked]=\"checked\"\r\n    [disabled]=\"disabled\"\r\n    (click)=\"toggle()\"\r\n  >\r\n    <span class=\"thumb\"></span>\r\n  </button>\r\n  {{placeholder}}\r\n</div>", styles: [".toggle-wrapper{padding:2px;display:flex;align-items:center;font-size:16px}.toggle-wrapper button{margin-right:8px}.disabled{color:#d5d7da}.toggle{position:relative;width:44px;height:22px;border:none;border-radius:22px;background:#e9eaeb;cursor:pointer;padding:2px;display:flex;align-items:center;transition:background .2s ease}.toggle:disabled{background:#d5d7da;cursor:not-allowed}.toggle:disabled .thumb{opacity:.7}.toggle:hover:not(:disabled){background:#8230c4}.toggle:focus,.toggle:focus-visible{box-shadow:0 0 0 3px #8230c466}.toggle.checked{background:#752bb0}.toggle.checked:hover:not(:disabled){background:#8230c4}.toggle.checked .thumb{transform:translate(22px)}.toggle .thumb{width:18px;height:18px;background:#fff;border-radius:50%;transition:transform .2s ease;transform:translate(0)}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ToggleButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-switch', imports: [], template: "<div class=\"toggle-wrapper\" [class.disabled]=\"disabled\">\r\n  <button\r\n    type=\"button\"\r\n    class=\"toggle\"\r\n    [class.checked]=\"checked\"\r\n    [disabled]=\"disabled\"\r\n    (click)=\"toggle()\"\r\n  >\r\n    <span class=\"thumb\"></span>\r\n  </button>\r\n  {{placeholder}}\r\n</div>", styles: [".toggle-wrapper{padding:2px;display:flex;align-items:center;font-size:16px}.toggle-wrapper button{margin-right:8px}.disabled{color:#d5d7da}.toggle{position:relative;width:44px;height:22px;border:none;border-radius:22px;background:#e9eaeb;cursor:pointer;padding:2px;display:flex;align-items:center;transition:background .2s ease}.toggle:disabled{background:#d5d7da;cursor:not-allowed}.toggle:disabled .thumb{opacity:.7}.toggle:hover:not(:disabled){background:#8230c4}.toggle:focus,.toggle:focus-visible{box-shadow:0 0 0 3px #8230c466}.toggle.checked{background:#752bb0}.toggle.checked:hover:not(:disabled){background:#8230c4}.toggle.checked .thumb{transform:translate(22px)}.toggle .thumb{width:18px;height:18px;background:#fff;border-radius:50%;transition:transform .2s ease;transform:translate(0)}\n"] }]
+        }], propDecorators: { checked: [{
+                type: Input
+            }], checkedChange: [{
+                type: Output
+            }], disabled: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }] } });
+
+class SkeletonLoaderComponent {
+    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: SkeletonLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: SkeletonLoaderComponent, 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-input-label\"></div>\r\n            <div class=\"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-input-label{background:linear-gradient(90deg,#e0e0e0 25%,#f5f5f5,#e0e0e0 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:8px;height:20px;width:80%;margin-bottom:8px}.skeleton-input{background:linear-gradient(90deg,#e0e0e0 25%,#f5f5f5,#e0e0e0 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:8px;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: SkeletonLoaderComponent, 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-input-label\"></div>\r\n            <div class=\"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-input-label{background:linear-gradient(90deg,#e0e0e0 25%,#f5f5f5,#e0e0e0 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:8px;height:20px;width:80%;margin-bottom:8px}.skeleton-input{background:linear-gradient(90deg,#e0e0e0 25%,#f5f5f5,#e0e0e0 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:8px;height:40px;width:100%}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}\n"] }]
+        }], propDecorators: { inputs: [{
+                type: Input
+            }], cols: [{
+                type: Input
+            }] } });
+
+let nextId = 1;
+function createSuccessAlert(message, options) {
+    return {
+        id: nextId++,
+        message,
+        type: 'success',
+        duration: 3000,
+        ...options,
+    };
+}
+function createErrorAlert(message, options) {
+    return {
+        id: nextId++,
+        message,
+        type: 'error',
+        duration: 5000,
+        ...options,
+    };
+}
+function createWarningAlert(message, options) {
+    return {
+        id: nextId++,
+        message,
+        type: 'warning',
+        duration: 4000,
+        ...options,
+    };
+}
+function createInfoAlert(message, options) {
+    return {
+        id: nextId++,
+        message,
+        type: 'info',
+        duration: 3000,
+        ...options,
+    };
+}
+
+class PushAlertService {
+    autoIncId = 0;
+    alerts$ = new Subject();
+    get stream() {
+        return this.alerts$.asObservable();
+    }
+    show(alertData) {
+        this.autoIncId++;
+        const alert = { ...alertData, id: this.autoIncId };
+        this.alerts$.next(alert);
+    }
+    success(message, options) {
+        this.show(createSuccessAlert(message, options));
+    }
+    error(message, options) {
+        this.show(createErrorAlert(message, options));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PushAlertService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PushAlertService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PushAlertService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class AlertComponent {
+    alert;
+    closeAlert = new EventEmitter();
+    interval;
+    progressValue = 0;
+    animationIntevalMs = 100;
+    pauseAnimation = false;
+    id = 0;
+    ngOnInit() {
+        this.id = this.alert.id;
+        if (this.alert.duration && this.alert.duration > 0) {
+            const duration = this.alert.duration;
+            let count = 0;
+            this.interval = setInterval(() => {
+                count = this.pauseAnimation ? count : count + this.animationIntevalMs;
+                this.progressValue = Math.floor((count / duration) * 100);
+                if (this.progressValue > 100) {
+                    this.close();
+                }
+            }, this.animationIntevalMs);
+        }
+    }
+    close() {
+        clearInterval(this.interval);
+        this.closeAlert.emit(this.id);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: AlertComponent, isStandalone: true, selector: "lib-alert", inputs: { alert: "alert" }, outputs: { closeAlert: "closeAlert" }, ngImport: i0, template: "<div [class]=\"'alert ' + alert.type + ' ' + (alert.style??'filled')\"  >\r\n    @if (alert.showProgressBar) {\r\n        <div class=\"alert-process\">\r\n            <div class=\"alert-process-bar\" [style.width.%]=\"progressValue\"></div>\r\n        </div>\r\n    }\r\n    <div class=\"alert-body\">\r\n        <button class=\"close\" (click)=\"close()\"> \u2715 </button>\r\n        @if (alert.icon) {\r\n            <i [class]=\"'highlighted ' + alert.icon\"></i>\r\n        }\r\n        <div>\r\n            <div class=\"toast-title highlighted\">{{alert.title}}</div>\r\n            <div class=\"toast-body\">{{alert.message}}</div>\r\n            @if ( alert.okButtonText || alert.cancelButtonText){\r\n                <div class=\"toast-buttons \">\r\n                    @if ( alert.okButtonText ) {\r\n                        <button style=\"font-weight: 500;\">{{alert.okButtonText}}</button>\r\n                    }\r\n                    @if ( alert.cancelButtonText ){\r\n                        <button (click)=\"close()\">{{alert.cancelButtonText}}</button>\r\n                    }\r\n                </div>\r\n            }\r\n        </div>\r\n    </div>\r\n</div>", styles: [".alert{display:flex;flex-direction:column;min-width:250px;max-width:450px;overflow:hidden;animation:fadeIn .3s ease;border-radius:12px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.alert-process{width:100%;height:4px;background-color:#0000004f;display:flex}.alert-process-bar{background-color:#ffffff69;height:4px}.alert-body{position:relative;padding:16px;display:flex}.alert-body i{font-size:20;width:22px;height:22px;margin-right:16px}.toast-title{font-weight:500;font-size:16px;line-height:24px}.toast-body{font-weight:400;font-size:14px;line-height:20px}.toast-buttons{margin-top:16px;display:flex;gap:16px}.toast-buttons button{color:#fff;border:none;background-color:transparent;font-size:16px;line-height:24px;padding:0}.toast-buttons button:hover{text-decoration:underline;cursor:pointer}.close{background:transparent;border:none;color:inherit;font-size:16px;cursor:pointer;position:absolute;right:5px;top:5px}.filled{color:#fff}.filled.success{background:#15803d}.filled.error{background:#d92d20}.filled.warning{background:#dc6803}.filled.info{background:#6193d5}.bordered{border:solid 1px;color:#717680}.bordered.success{border-color:#15803d;background:#bbf7d0}.bordered.success .highlighted,.bordered.success button{color:#15803d}.bordered.error{border-color:#d92d20;background:#fee4e2}.bordered.error .highlighted,.bordered.error button{color:#d92d20}.bordered.warning{border-color:#dc6803;background:#fef0c7}.bordered.warning .highlighted,.bordered.warning button{color:#dc6803}.bordered.info{border-color:#6193d5;background:#e4eefb}.bordered.info .highlighted,.bordered.info button{color:#6193d5}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AlertComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-alert', imports: [], template: "<div [class]=\"'alert ' + alert.type + ' ' + (alert.style??'filled')\"  >\r\n    @if (alert.showProgressBar) {\r\n        <div class=\"alert-process\">\r\n            <div class=\"alert-process-bar\" [style.width.%]=\"progressValue\"></div>\r\n        </div>\r\n    }\r\n    <div class=\"alert-body\">\r\n        <button class=\"close\" (click)=\"close()\"> \u2715 </button>\r\n        @if (alert.icon) {\r\n            <i [class]=\"'highlighted ' + alert.icon\"></i>\r\n        }\r\n        <div>\r\n            <div class=\"toast-title highlighted\">{{alert.title}}</div>\r\n            <div class=\"toast-body\">{{alert.message}}</div>\r\n            @if ( alert.okButtonText || alert.cancelButtonText){\r\n                <div class=\"toast-buttons \">\r\n                    @if ( alert.okButtonText ) {\r\n                        <button style=\"font-weight: 500;\">{{alert.okButtonText}}</button>\r\n                    }\r\n                    @if ( alert.cancelButtonText ){\r\n                        <button (click)=\"close()\">{{alert.cancelButtonText}}</button>\r\n                    }\r\n                </div>\r\n            }\r\n        </div>\r\n    </div>\r\n</div>", styles: [".alert{display:flex;flex-direction:column;min-width:250px;max-width:450px;overflow:hidden;animation:fadeIn .3s ease;border-radius:12px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.alert-process{width:100%;height:4px;background-color:#0000004f;display:flex}.alert-process-bar{background-color:#ffffff69;height:4px}.alert-body{position:relative;padding:16px;display:flex}.alert-body i{font-size:20;width:22px;height:22px;margin-right:16px}.toast-title{font-weight:500;font-size:16px;line-height:24px}.toast-body{font-weight:400;font-size:14px;line-height:20px}.toast-buttons{margin-top:16px;display:flex;gap:16px}.toast-buttons button{color:#fff;border:none;background-color:transparent;font-size:16px;line-height:24px;padding:0}.toast-buttons button:hover{text-decoration:underline;cursor:pointer}.close{background:transparent;border:none;color:inherit;font-size:16px;cursor:pointer;position:absolute;right:5px;top:5px}.filled{color:#fff}.filled.success{background:#15803d}.filled.error{background:#d92d20}.filled.warning{background:#dc6803}.filled.info{background:#6193d5}.bordered{border:solid 1px;color:#717680}.bordered.success{border-color:#15803d;background:#bbf7d0}.bordered.success .highlighted,.bordered.success button{color:#15803d}.bordered.error{border-color:#d92d20;background:#fee4e2}.bordered.error .highlighted,.bordered.error button{color:#d92d20}.bordered.warning{border-color:#dc6803;background:#fef0c7}.bordered.warning .highlighted,.bordered.warning button{color:#dc6803}.bordered.info{border-color:#6193d5;background:#e4eefb}.bordered.info .highlighted,.bordered.info button{color:#6193d5}\n"] }]
+        }], propDecorators: { alert: [{
+                type: Input
+            }], closeAlert: [{
+                type: Output
+            }] } });
+
+class AlertContainerComponent {
+    alertService;
+    alerts = [];
+    constructor(alertService) {
+        this.alertService = alertService;
+    }
+    ngOnInit() {
+        this.alertService.stream.subscribe(alert => {
+            this.alerts.push(alert);
+        });
+    }
+    dismis(id) {
+        const idx = this.alerts.findIndex(f => f.id == id);
+        this.alerts.splice(idx, 1);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AlertContainerComponent, deps: [{ token: PushAlertService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: AlertContainerComponent, isStandalone: true, selector: "lib-alert-container", ngImport: i0, template: "<div class=\"alert-container\">\r\n    @for (alert of alerts; track alert.id){\r\n        <lib-alert\r\n            (closeAlert)=\"dismis($event)\"\r\n            [alert]=\"alert\">\r\n        </lib-alert>\r\n    }     \r\n</div>\r\n", styles: [".alert-container{position:fixed;top:1rem;right:1rem;display:flex;flex-direction:column;gap:.5rem;z-index:9999}\n"], dependencies: [{ kind: "component", type: AlertComponent, selector: "lib-alert", inputs: ["alert"], outputs: ["closeAlert"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AlertContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-alert-container', imports: [AlertComponent], template: "<div class=\"alert-container\">\r\n    @for (alert of alerts; track alert.id){\r\n        <lib-alert\r\n            (closeAlert)=\"dismis($event)\"\r\n            [alert]=\"alert\">\r\n        </lib-alert>\r\n    }     \r\n</div>\r\n", styles: [".alert-container{position:fixed;top:1rem;right:1rem;display:flex;flex-direction:column;gap:.5rem;z-index:9999}\n"] }]
+        }], ctorParameters: () => [{ type: PushAlertService }] });
+
+class ButtonComponent {
+    text = '';
+    icon = '';
+    rightIcon = '';
+    iconOnly = false;
+    disabled = false;
+    loading = false;
+    size = 'm';
+    type = 'filled';
+    color = 'primary';
+    buttonTypeClass = "";
+    ngOnInit() {
+        this.buttonTypeClass = 'btn-' + this.type + ' btn-' + this.color + "-" + this.type;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: ButtonComponent, isStandalone: true, selector: "ui-button", inputs: { text: "text", icon: "icon", rightIcon: "rightIcon", iconOnly: "iconOnly", disabled: "disabled", loading: "loading", size: "size", type: "type", color: "color" }, ngImport: i0, template: "<button\r\n    [class]=\"'main-btn ' + buttonTypeClass\"\r\n    [disabled]=\"disabled || loading\"\r\n    [ngClass]=\"{\r\n                'btn-tiny'      :size=='t',\r\n                'btn-small'     :size=='s',  \r\n                'btn-medium'    :size=='m',\r\n                'btn-large'     :size=='l', \r\n                'btn-gigant'    :size=='g'\r\n                }\" >\r\n    \r\n    @if (!loading) {\r\n        @if (icon!='' ) {\r\n            <i class=\"{{icon}}\"></i>\r\n        }\r\n        @if (!iconOnly) {\r\n            <div class=\"btn-text\" [class.norighticon]=\"rightIcon==''\" [class.noicon]=\"icon==''\">\r\n                {{text}}\r\n                <ng-content ></ng-content>\r\n            </div>\r\n        }\r\n        @if (rightIcon!='' ) {\r\n            <i class=\"{{rightIcon}}\"></i>\r\n        }\r\n    } @else {\r\n        <div class=\"btn-loader-container\"> <div class=\"btn-loader\"></div> </div>\r\n    }\r\n</button>", styles: [":host{width:fit-content;display:block}.main-btn{display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;border:none;text-align:center;border-radius:8px;padding:0;white-space:nowrap;outline:none}.main-btn:focus,.main-btn:focus-visible{box-shadow:0 0 0 3px #8230c466}.noicon{padding-left:16px}.norighticon{padding-right:16px}.btn-text{font-weight:500}.btn-tiny{height:22px;min-width:22px}.btn-tiny>.btn-text{font-size:10px;line-height:22px}.btn-tiny i{font-size:14px;line-height:22px;width:22px}.btn-tiny .btn-loader{line-height:10px;width:10px}.btn-small{height:30px;min-width:30px}.btn-small>.btn-text{font-size:12px;line-height:30px}.btn-small i{font-size:16px;line-height:30px;width:30px}.btn-small .btn-loader{line-height:12px;width:12px}.btn-medium{height:38px;min-width:38px}.btn-medium>.btn-text{font-size:14px;line-height:38px}.btn-medium i{font-size:24px;line-height:38px;width:38px}.btn-medium .btn-loader{line-height:14px;width:14px}.btn-large{height:46px;min-width:46px}.btn-large>.btn-text{font-size:16px;line-height:46px}.btn-large i{font-size:24px;line-height:46px;width:46px}.btn-large .btn-loader{line-height:16px;width:16px}.btn-gigant{height:54px;min-width:54px}.btn-gigant>.btn-text{font-size:18px;line-height:54px}.btn-gigant i{font-size:24px;line-height:54px;width:54px}.btn-gigant .btn-loader{line-height:18px;width:18px}.btn-filled{color:#fff;transition:background .3s ease;cursor:pointer}.btn-filled:disabled{cursor:not-allowed;color:#d5d7da}.btn-bordered{border:solid 1px #e9eaeb;background-color:transparent;transition:background .3s ease;cursor:pointer}.btn-bordered:disabled{cursor:not-allowed;color:#d5d7da;border-color:#d5d7da}.btn-ghost{color:#252b37;background-color:transparent;transition:background .3s ease;cursor:pointer}.btn-ghost:disabled{cursor:not-allowed;color:#d5d7da}.btn-primary-filled{background-color:#63277d}.btn-primary-filled:hover{background-color:#4f1f64}.btn-primary-filled:active{background-color:#2d1238}.btn-primary-filled:disabled{background-color:#efe9f2}.btn-primary-bordered{color:#63277d}.btn-primary-bordered:hover{background-color:#efe9f2}.btn-primary-bordered:active{background-color:#cfbcd7}.btn-primary-bordered:disabled{background-color:#efe9f2}.btn-primary-ghost:hover{background-color:#efe9f2}.btn-primary-ghost:active{background-color:#cfbcd7}.btn-primary-ghost:disabled{background-color:transparent}.btn-black-filled{background-color:#0a0d12}.btn-black-filled:hover{background-color:#752bb0}.btn-black-filled:active{background-color:#4e1d76}.btn-black-filled:disabled{background-color:#f5f5f5}.btn-black-bordered{color:#414651}.btn-black-bordered:hover{background-color:#f3eaf9}.btn-black-bordered:active{background-color:#d8bfed}.btn-black-bordered:disabled{background-color:#fafafa}.btn-black-ghost:hover{background-color:#f3eaf9}.btn-black-ghost:active{background-color:#d8bfed}.btn-black-ghost:disabled{background-color:transparent}.btn-green-filled{background-color:#22c55e}.btn-green-filled:hover{background-color:#15803d}.btn-green-filled:active{background-color:#1a2e21}.btn-green-filled:disabled{background-color:#bbf7d0}.btn-green-bordered{color:#22c55e}.btn-green-bordered:hover{background-color:#bbf7d0}.btn-green-bordered:active{background-color:#4ade80}.btn-green-bordered:disabled{background-color:#bbf7d0}.btn-green-ghost:hover{background-color:#bbf7d0}.btn-green-ghost:active{background-color:#4ade80}.btn-green-ghost:disabled{background-color:transparent}.btn-yellow-filled{background-color:#fdb022}.btn-yellow-filled:hover{background-color:#dc6803}.btn-yellow-filled:active{background-color:#792e0d}.btn-yellow-filled:disabled{background-color:#fef0c7}.btn-yellow-bordered{color:#fdb022}.btn-yellow-bordered:hover{background-color:#fef0c7}.btn-yellow-bordered:active{background-color:#fec84b}.btn-yellow-bordered:disabled{background-color:#fef0c7}.btn-yellow-ghost:hover{background-color:#fef0c7}.btn-yellow-ghost:active{background-color:#fec84b}.btn-yellow-ghost:disabled{background-color:transparent}.btn-blue-filled{background-color:#93bbf0}.btn-blue-filled:hover{background-color:#6193d5}.btn-blue-filled:active{background-color:#273b55}.btn-blue-filled:disabled{background-color:#e4eefb}.btn-blue-bordered{color:#93bbf0}.btn-blue-bordered:hover{background-color:#e4eefb}.btn-blue-bordered:active{background-color:#aeccf4}.btn-blue-bordered:disabled{background-color:#e4eefb}.btn-blue-ghost:hover{background-color:#e4eefb}.btn-blue-ghost:active{background-color:#aeccf4}.btn-blue-ghost:disabled{background-color:transparent}.btn-red-filled{background-color:#f97066}.btn-red-filled:hover{background-color:#d92d20}.btn-red-filled:active{background-color:#7a271a}.btn-red-filled:disabled{background-color:#fee4e2}.btn-red-bordered{color:#f97066}.btn-red-bordered:hover{background-color:#fee4e2}.btn-red-bordered:active{background-color:#fda29b}.btn-red-bordered:disabled{background-color:#fee4e2}.btn-red-ghost:hover{background-color:#fee4e2}.btn-red-ghost:active{background-color:#fda29b}.btn-red-ghost:disabled{background-color:transparent}.btn-loader{width:14px;aspect-ratio:1;border-radius:50%;animation:l5 1s infinite linear alternate;margin:2px}.btn-loader-container{line-height:14px;margin:3px 0;display:flex;justify-content:center;width:65px}@keyframes l5{0%{box-shadow:20px 0 #e8dfec,-20px 0 #4f1f64;background:#e8dfec}33%{box-shadow:20px 0 #e8dfec,-20px 0 #4f1f64;background:#4f1f64}66%{box-shadow:20px 0 #4f1f64,-20px 0 #e8dfec;background:#4f1f64}to{box-shadow:20px 0 #4f1f64,-20px 0 #e8dfec;background:#e8dfec}}.btn-loader:before,.btn-loader:after{content:\"\";grid-area:1/1;margin:15%;border-radius:50%;background:inherit;transform:rotate(0) translate(150%);animation:l22 1s infinite}.btn-loader:after{animation-delay:-.5s}@keyframes l22-0{to{transform:rotate(1turn)}}@keyframes l22{to{transform:rotate(1turn) translate(150%)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-button', imports: [CommonModule], template: "<button\r\n    [class]=\"'main-btn ' + buttonTypeClass\"\r\n    [disabled]=\"disabled || loading\"\r\n    [ngClass]=\"{\r\n                'btn-tiny'      :size=='t',\r\n                'btn-small'     :size=='s',  \r\n                'btn-medium'    :size=='m',\r\n                'btn-large'     :size=='l', \r\n                'btn-gigant'    :size=='g'\r\n                }\" >\r\n    \r\n    @if (!loading) {\r\n        @if (icon!='' ) {\r\n            <i class=\"{{icon}}\"></i>\r\n        }\r\n        @if (!iconOnly) {\r\n            <div class=\"btn-text\" [class.norighticon]=\"rightIcon==''\" [class.noicon]=\"icon==''\">\r\n                {{text}}\r\n                <ng-content ></ng-content>\r\n            </div>\r\n        }\r\n        @if (rightIcon!='' ) {\r\n            <i class=\"{{rightIcon}}\"></i>\r\n        }\r\n    } @else {\r\n        <div class=\"btn-loader-container\"> <div class=\"btn-loader\"></div> </div>\r\n    }\r\n</button>", styles: [":host{width:fit-content;display:block}.main-btn{display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;border:none;text-align:center;border-radius:8px;padding:0;white-space:nowrap;outline:none}.main-btn:focus,.main-btn:focus-visible{box-shadow:0 0 0 3px #8230c466}.noicon{padding-left:16px}.norighticon{padding-right:16px}.btn-text{font-weight:500}.btn-tiny{height:22px;min-width:22px}.btn-tiny>.btn-text{font-size:10px;line-height:22px}.btn-tiny i{font-size:14px;line-height:22px;width:22px}.btn-tiny .btn-loader{line-height:10px;width:10px}.btn-small{height:30px;min-width:30px}.btn-small>.btn-text{font-size:12px;line-height:30px}.btn-small i{font-size:16px;line-height:30px;width:30px}.btn-small .btn-loader{line-height:12px;width:12px}.btn-medium{height:38px;min-width:38px}.btn-medium>.btn-text{font-size:14px;line-height:38px}.btn-medium i{font-size:24px;line-height:38px;width:38px}.btn-medium .btn-loader{line-height:14px;width:14px}.btn-large{height:46px;min-width:46px}.btn-large>.btn-text{font-size:16px;line-height:46px}.btn-large i{font-size:24px;line-height:46px;width:46px}.btn-large .btn-loader{line-height:16px;width:16px}.btn-gigant{height:54px;min-width:54px}.btn-gigant>.btn-text{font-size:18px;line-height:54px}.btn-gigant i{font-size:24px;line-height:54px;width:54px}.btn-gigant .btn-loader{line-height:18px;width:18px}.btn-filled{color:#fff;transition:background .3s ease;cursor:pointer}.btn-filled:disabled{cursor:not-allowed;color:#d5d7da}.btn-bordered{border:solid 1px #e9eaeb;background-color:transparent;transition:background .3s ease;cursor:pointer}.btn-bordered:disabled{cursor:not-allowed;color:#d5d7da;border-color:#d5d7da}.btn-ghost{color:#252b37;background-color:transparent;transition:background .3s ease;cursor:pointer}.btn-ghost:disabled{cursor:not-allowed;color:#d5d7da}.btn-primary-filled{background-color:#63277d}.btn-primary-filled:hover{background-color:#4f1f64}.btn-primary-filled:active{background-color:#2d1238}.btn-primary-filled:disabled{background-color:#efe9f2}.btn-primary-bordered{color:#63277d}.btn-primary-bordered:hover{background-color:#efe9f2}.btn-primary-bordered:active{background-color:#cfbcd7}.btn-primary-bordered:disabled{background-color:#efe9f2}.btn-primary-ghost:hover{background-color:#efe9f2}.btn-primary-ghost:active{background-color:#cfbcd7}.btn-primary-ghost:disabled{background-color:transparent}.btn-black-filled{background-color:#0a0d12}.btn-black-filled:hover{background-color:#752bb0}.btn-black-filled:active{background-color:#4e1d76}.btn-black-filled:disabled{background-color:#f5f5f5}.btn-black-bordered{color:#414651}.btn-black-bordered:hover{background-color:#f3eaf9}.btn-black-bordered:active{background-color:#d8bfed}.btn-black-bordered:disabled{background-color:#fafafa}.btn-black-ghost:hover{background-color:#f3eaf9}.btn-black-ghost:active{background-color:#d8bfed}.btn-black-ghost:disabled{background-color:transparent}.btn-green-filled{background-color:#22c55e}.btn-green-filled:hover{background-color:#15803d}.btn-green-filled:active{background-color:#1a2e21}.btn-green-filled:disabled{background-color:#bbf7d0}.btn-green-bordered{color:#22c55e}.btn-green-bordered:hover{background-color:#bbf7d0}.btn-green-bordered:active{background-color:#4ade80}.btn-green-bordered:disabled{background-color:#bbf7d0}.btn-green-ghost:hover{background-color:#bbf7d0}.btn-green-ghost:active{background-color:#4ade80}.btn-green-ghost:disabled{background-color:transparent}.btn-yellow-filled{background-color:#fdb022}.btn-yellow-filled:hover{background-color:#dc6803}.btn-yellow-filled:active{background-color:#792e0d}.btn-yellow-filled:disabled{background-color:#fef0c7}.btn-yellow-bordered{color:#fdb022}.btn-yellow-bordered:hover{background-color:#fef0c7}.btn-yellow-bordered:active{background-color:#fec84b}.btn-yellow-bordered:disabled{background-color:#fef0c7}.btn-yellow-ghost:hover{background-color:#fef0c7}.btn-yellow-ghost:active{background-color:#fec84b}.btn-yellow-ghost:disabled{background-color:transparent}.btn-blue-filled{background-color:#93bbf0}.btn-blue-filled:hover{background-color:#6193d5}.btn-blue-filled:active{background-color:#273b55}.btn-blue-filled:disabled{background-color:#e4eefb}.btn-blue-bordered{color:#93bbf0}.btn-blue-bordered:hover{background-color:#e4eefb}.btn-blue-bordered:active{background-color:#aeccf4}.btn-blue-bordered:disabled{background-color:#e4eefb}.btn-blue-ghost:hover{background-color:#e4eefb}.btn-blue-ghost:active{background-color:#aeccf4}.btn-blue-ghost:disabled{background-color:transparent}.btn-red-filled{background-color:#f97066}.btn-red-filled:hover{background-color:#d92d20}.btn-red-filled:active{background-color:#7a271a}.btn-red-filled:disabled{background-color:#fee4e2}.btn-red-bordered{color:#f97066}.btn-red-bordered:hover{background-color:#fee4e2}.btn-red-bordered:active{background-color:#fda29b}.btn-red-bordered:disabled{background-color:#fee4e2}.btn-red-ghost:hover{background-color:#fee4e2}.btn-red-ghost:active{background-color:#fda29b}.btn-red-ghost:disabled{background-color:transparent}.btn-loader{width:14px;aspect-ratio:1;border-radius:50%;animation:l5 1s infinite linear alternate;margin:2px}.btn-loader-container{line-height:14px;margin:3px 0;display:flex;justify-content:center;width:65px}@keyframes l5{0%{box-shadow:20px 0 #e8dfec,-20px 0 #4f1f64;background:#e8dfec}33%{box-shadow:20px 0 #e8dfec,-20px 0 #4f1f64;background:#4f1f64}66%{box-shadow:20px 0 #4f1f64,-20px 0 #e8dfec;background:#4f1f64}to{box-shadow:20px 0 #4f1f64,-20px 0 #e8dfec;background:#e8dfec}}.btn-loader:before,.btn-loader:after{content:\"\";grid-area:1/1;margin:15%;border-radius:50%;background:inherit;transform:rotate(0) translate(150%);animation:l22 1s infinite}.btn-loader:after{animation-delay:-.5s}@keyframes l22-0{to{transform:rotate(1turn)}}@keyframes l22{to{transform:rotate(1turn) translate(150%)}}\n"] }]
+        }], propDecorators: { text: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], rightIcon: [{
+                type: Input
+            }], iconOnly: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }] } });
+
+class TableSearcherComponent {
+    placeholder = '';
+    label = 'Buscar';
+    searchOnKeydown = false;
+    search = new EventEmitter();
+    text = "";
+    reset() {
+        this.text = '';
+        this.search.emit(this.text);
+    }
+    updateText() {
+        if (this.searchOnKeydown) {
+            this.search.emit(this.text);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TableSearcherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: TableSearcherComponent, isStandalone: true, selector: "table-searcher", inputs: { placeholder: "placeholder", label: "label", searchOnKeydown: "searchOnKeydown" }, outputs: { search: "search" }, 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)=\"search.emit(text)\" placeholder=\"{{placeholder}}\">\r\n    </div>\r\n    <ui-button (click)=\"search.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 #e9eaeb;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{border:none}.searcher .fakeinput:focus-within{border-color:#4f1f64}\n"], dependencies: [{ kind: "component", type: ButtonComponent, 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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TableSearcherComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'table-searcher', imports: [ButtonComponent, 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)=\"search.emit(text)\" placeholder=\"{{placeholder}}\">\r\n    </div>\r\n    <ui-button (click)=\"search.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 #e9eaeb;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{border:none}.searcher .fakeinput:focus-within{border-color:#4f1f64}\n"] }]
+        }], propDecorators: { placeholder: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], searchOnKeydown: [{
+                type: Input
+            }], search: [{
+                type: Output
+            }] } });
+
+class TablePaginationComponent {
+    currentPage = 1;
+    totalPages = 1;
+    size = 25;
+    loading = false;
+    visiblePages = 3;
+    pagesInView = [];
+    pageChange = new EventEmitter();
+    sizeChange = new EventEmitter();
+    get pages() {
+        const pages = [];
+        const range = Math.floor(this.visiblePages / 2);
+        let start = Math.max(1, this.currentPage - range);
+        let end = Math.min(this.totalPages, this.currentPage + range);
+        if (end === this.totalPages) {
+            start = Math.max(1, this.totalPages - (this.visiblePages - 1));
+        }
+        if (start === 1) {
+            end = Math.min(this.totalPages, this.visiblePages);
+        }
+        if (start > 1) {
+            pages.push(1);
+            if (start > 2)
+                pages.push('...');
+        }
+        for (let i = start; i <= end; i++) {
+            pages.push(i);
+        }
+        if (end < this.totalPages) {
+            if (end < this.totalPages - 1)
+                pages.push('...');
+            pages.push(this.totalPages);
+        }
+        return pages;
+    }
+    changePage(newPage) {
+        if (newPage >= 1 && newPage <= this.totalPages && newPage !== this.currentPage) {
+            this.currentPage = newPage;
+            this.pageChange.emit(this.currentPage);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TablePaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: TablePaginationComponent, isStandalone: true, selector: "app-table-pagination", inputs: { currentPage: "currentPage", totalPages: "totalPages", size: "size", loading: "loading" }, outputs: { pageChange: "pageChange", sizeChange: "sizeChange" }, ngImport: i0, template: "\r\n<div class=\"table-page\">\r\n    <ui-button [disabled]=\"loading || currentPage == 1\" (click)=\"changePage(currentPage - 1)\" size=\"m\" color=\"black\" type=\"bordered\" text=\"Anterior\" icon=\"ri-arrow-left-line\" > </ui-button>    \r\n    <div class=\"table-numbers\">\r\n        @for (p of pages; track $index) {\r\n            @if ( p!= '...' ){\r\n                <button [disabled]=\"loading\" (click)=\"changePage(+p)\" [ngClass]=\"{'selected':currentPage==p}\" class=\"number\">{{p}}</button>\r\n            } @else {\r\n                <div class=\"space\">...</div>\r\n            }\r\n        \r\n        }\r\n    </div>\r\n    <ui-button [disabled]=\"loading || currentPage == totalPages\" (click)=\"changePage(currentPage + 1)\" size=\"m\" color=\"black\" type=\"bordered\" text=\"Siguiente\" rightIcon=\"ri-arrow-right-line\" > </ui-button>\r\n    <!-- <div class=\"page-size\">\r\n        <select [(ngModel)]=\"size\" (ngModelChange)=\"sizeChange.emit(+size)\" [disabled]=\"loading\">\r\n            <option value=\"25\">25</option>\r\n            <option value=\"50\">50</option>\r\n            <option value=\"100\">100</option>\r\n        </select>\r\n        elementos por p\u00E1gina\r\n    </div> -->\r\n</div>", styles: [".table-page{display:flex;align-items:center;justify-content:space-between;width:100%;gap:20px;padding:16px 24px}.table-numbers{display:flex;align-items:center;justify-content:center;gap:2px;-webkit-user-select:none;user-select:none;min-width:250px}.number{border:none;color:#717680;width:40px;height:40px;background-color:#fff;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer}.number:hover{background-color:#752bb0}.selected{background-color:#f5f5f5;font-weight:600;color:#752bb0}.space{letter-spacing:5px}.page-size{flex:1 1;display:flex;font-size:13px;color:#717680;align-items:center;justify-content:flex-end}.page-size select{padding:5px 8px;margin-right:10px;color:#717680;border:solid 1px #592371;border-radius:5px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "ngmodule", type: FormsModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TablePaginationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-table-pagination', imports: [CommonModule, ButtonComponent, FormsModule], template: "\r\n<div class=\"table-page\">\r\n    <ui-button [disabled]=\"loading || currentPage == 1\" (click)=\"changePage(currentPage - 1)\" size=\"m\" color=\"black\" type=\"bordered\" text=\"Anterior\" icon=\"ri-arrow-left-line\" > </ui-button>    \r\n    <div class=\"table-numbers\">\r\n        @for (p of pages; track $index) {\r\n            @if ( p!= '...' ){\r\n                <button [disabled]=\"loading\" (click)=\"changePage(+p)\" [ngClass]=\"{'selected':currentPage==p}\" class=\"number\">{{p}}</button>\r\n            } @else {\r\n                <div class=\"space\">...</div>\r\n            }\r\n        \r\n        }\r\n    </div>\r\n    <ui-button [disabled]=\"loading || currentPage == totalPages\" (click)=\"changePage(currentPage + 1)\" size=\"m\" color=\"black\" type=\"bordered\" text=\"Siguiente\" rightIcon=\"ri-arrow-right-line\" > </ui-button>\r\n    <!-- <div class=\"page-size\">\r\n        <select [(ngModel)]=\"size\" (ngModelChange)=\"sizeChange.emit(+size)\" [disabled]=\"loading\">\r\n            <option value=\"25\">25</option>\r\n            <option value=\"50\">50</option>\r\n            <option value=\"100\">100</option>\r\n        </select>\r\n        elementos por p\u00E1gina\r\n    </div> -->\r\n</div>", styles: [".table-page{display:flex;align-items:center;justify-content:space-between;width:100%;gap:20px;padding:16px 24px}.table-numbers{display:flex;align-items:center;justify-content:center;gap:2px;-webkit-user-select:none;user-select:none;min-width:250px}.number{border:none;color:#717680;width:40px;height:40px;background-color:#fff;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer}.number:hover{background-color:#752bb0}.selected{background-color:#f5f5f5;font-weight:600;color:#752bb0}.space{letter-spacing:5px}.page-size{flex:1 1;display:flex;font-size:13px;color:#717680;align-items:center;justify-content:flex-end}.page-size select{padding:5px 8px;margin-right:10px;color:#717680;border:solid 1px #592371;border-radius:5px}\n"] }]
+        }], propDecorators: { currentPage: [{
+                type: Input
+            }], totalPages: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], pageChange: [{
+                type: Output
+            }], sizeChange: [{
+                type: Output
+            }] } });
+
+class TableListComponent {
+    list = [];
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TableListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: TableListComponent, isStandalone: true, selector: "app-table-list", inputs: { list: "list" }, ngImport: i0, template: "@for (item of list; track $index) {\r\n    <div class=\"list-item\">\r\n        <i [class]=\"item.icon??'ri-capsule-fill'\"></i>\r\n        <div class=\"list-item-data\">\r\n            <div>{{item.text}}</div>\r\n            <p>{{item.subtext}}</p>\r\n        </div> \r\n    </div>\r\n\r\n}\r\n", styles: [".list-item{display:flex;margin-bottom:5px;align-items:center}.list-item i{color:#717680;margin-right:5px}.list-item-data p{color:#d5d7da;font-size:13px}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TableListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-table-list', imports: [], template: "@for (item of list; track $index) {\r\n    <div class=\"list-item\">\r\n        <i [class]=\"item.icon??'ri-capsule-fill'\"></i>\r\n        <div class=\"list-item-data\">\r\n            <div>{{item.text}}</div>\r\n            <p>{{item.subtext}}</p>\r\n        </div> \r\n    </div>\r\n\r\n}\r\n", styles: [".list-item{display:flex;margin-bottom:5px;align-items:center}.list-item i{color:#717680;margin-right:5px}.list-item-data p{color:#d5d7da;font-size:13px}\n"] }]
+        }], propDecorators: { list: [{
+                type: Input
+            }] } });
+
+class NameInitsPipe {
+    transform(value) {
+        if (!value) {
+            return "";
+        }
+        const names = value.split(" ");
+        if (names.length > 1) {
+            return names[0].charAt(0) + names[1].charAt(0).toUpperCase();
+        }
+        else if (names[0].length >= 2) {
+            return names[0].substring(0, 2).toUpperCase();
+        }
+        else {
+            return '';
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NameInitsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: NameInitsPipe, isStandalone: true, name: "nameInitials" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NameInitsPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'nameInitials'
+                }]
+        }] });
+
+class TableUserComponent {
+    user;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TableUserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: TableUserComponent, isStandalone: true, selector: "app-table-user", inputs: { user: "user" }, ngImport: i0, template: "@if (user) {\r\n    <div class=\"user-row\">\r\n        <div class=\"user-inits\">\r\n            {{user.name | nameInitials}}\r\n        </div>\r\n        <div class=\"user-row-data\">\r\n            <div>{{user.name}}</div>\r\n            <p>{{user.id}}</p>\r\n        </div>\r\n    </div>\r\n}@else{\r\n    -\r\n}", styles: [".user-inits{width:32px;height:32px;border-radius:50px;border:solid 1px #68269d;background-color:#d8bfed;color:#68269d;display:flex;justify-content:center;align-items:center;margin-right:12px}.user-row{display:flex;align-items:center;width:fit-content}.user-row-data{flex:1 1;font-weight:600;color:#181d27;font-size:14px}.user-row-data p{color:#717680;font-weight:400;font-size:12px;line-height:16px}\n"], dependencies: [{ kind: "pipe", type: NameInitsPipe, name: "nameInitials" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TableUserComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-table-user', imports: [NameInitsPipe], template: "@if (user) {\r\n    <div class=\"user-row\">\r\n        <div class=\"user-inits\">\r\n            {{user.name | nameInitials}}\r\n        </div>\r\n        <div class=\"user-row-data\">\r\n            <div>{{user.name}}</div>\r\n            <p>{{user.id}}</p>\r\n        </div>\r\n    </div>\r\n}@else{\r\n    -\r\n}", styles: [".user-inits{width:32px;height:32px;border-radius:50px;border:solid 1px #68269d;background-color:#d8bfed;color:#68269d;display:flex;justify-content:center;align-items:center;margin-right:12px}.user-row{display:flex;align-items:center;width:fit-content}.user-row-data{flex:1 1;font-weight:600;color:#181d27;font-size:14px}.user-row-data p{color:#717680;font-weight:400;font-size:12px;line-height:16px}\n"] }]
+        }], propDecorators: { user: [{
+                type: Input
+            }] } });
+
+const fadeAndRise = trigger('fadeAndRise', [
+    transition(':enter', [style({ opacity: 0, maxHeight: '0px' }), animate('.3s ease', style({ opacity: 1, maxHeight: '200px' }))]),
+    transition(':leave', [animate('.3s ease', style({ opacity: 0 }))])
+]);
+
+class TooltipComponent {
+    tooltip = '';
+    left = 0;
+    top = 0;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: TooltipComponent, isStandalone: true, selector: "app-tooltip", ngImport: i0, template: "<div @fadeAndRise  class=\"tooltip\" \r\n     [style.left]=\"left + 'px'\" [style.top]=\"top + 'px'\" [innerHTML]=\"tooltip\">\r\n</div>", styles: [".tooltip{position:fixed;background-color:#fff;box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;max-width:400px;color:#0a0d12;-webkit-user-select:none;user-select:none;padding:5px 10px;border-radius:4px;font-size:14px;margin-top:5px;transform:translate(-50%);z-index:1000}.tooltip:before{content:\"\";width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid #ffffff;position:absolute;left:calc(50% - 8px);top:-8px}\n"], animations: [fadeAndRise] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TooltipComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-tooltip', imports: [], animations: [fadeAndRise], template: "<div @fadeAndRise  class=\"tooltip\" \r\n     [style.left]=\"left + 'px'\" [style.top]=\"top + 'px'\" [innerHTML]=\"tooltip\">\r\n</div>", styles: [".tooltip{position:fixed;background-color:#fff;box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;max-width:400px;color:#0a0d12;-webkit-user-select:none;user-select:none;padding:5px 10px;border-radius:4px;font-size:14px;margin-top:5px;transform:translate(-50%);z-index:1000}.tooltip:before{content:\"\";width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid #ffffff;position:absolute;left:calc(50% - 8px);top:-8px}\n"] }]
+        }] });
+
+class ToolTipDirective {
+    elementRef;
+    appRef;
+    injector;
+    tooltip = '';
+    componentRef = null;
+    constructor(elementRef, appRef, injector) {
+        this.elementRef = elementRef;
+        this.appRef = appRef;
+        this.injector = injector;
+    }
+    onMouseEnter() {
+        if (this.componentRef === null && this.tooltip != '' && this.tooltip != null) {
+            this.componentRef = createComponent(TooltipComponent, {
+                environmentInjector: this.injector
+            });
+            this.appRef.attachView(this.componentRef.hostView);
+            const domElem = this.componentRef.hostView
+                .rootNodes[0];
+            document.body.appendChild(domElem);
+            this.setTooltipComponentProperties();
+        }
+    }
+    setTooltipComponentProperties() {
+        if (this.componentRef !== null) {
+            this.componentRef.instance.tooltip = this.tooltip;
+            const { left, right, bottom } = this.elementRef.nativeElement.getBoundingClientRect();
+            this.componentRef.instance.left = (right - left) / 2 + left;
+            this.componentRef.instance.top = bottom;
+        }
+    }
+    onMouseLeave() {
+        this.destroy();
+    }
+    ngOnDestroy() {
+        this.destroy();
+    }
+    destroy() {
+        if (this.componentRef !== null) {
+            this.appRef.detachView(this.componentRef.hostView);
+            this.componentRef.destroy();
+            this.componentRef = null;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ToolTipDirective, deps: [{ token: i0.ElementRef }, { token: i0.ApplicationRef }, { token: i0.EnvironmentInjector }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: ToolTipDirective, isStandalone: true, selector: "[tooltip]", inputs: { tooltip: "tooltip" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ToolTipDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tooltip]'
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ApplicationRef }, { type: i0.EnvironmentInjector }], propDecorators: { tooltip: [{
+                type: Input
+            }], onMouseEnter: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }], onMouseLeave: [{
+                type: HostListener,
+                args: ['mouseleave']
+            }] } });
+
+const highlightRow = trigger('highlightRow', [
+    state('highlighted', style({ backgroundColor: '#efe1f5' })),
+    transition('* => highlighted', [
+        animate('1000ms ease-in', keyframes([
+            style({ backgroundColor: '#ffffff', offset: 0 }),
+            style({ backgroundColor: '#efe1f5', offset: 0.3 }),
+            style({ backgroundColor: '#ffffff', offset: 1.0 }),
+        ]))
+    ])
+]);
+
+const animatedRow = trigger('animatedRow', [
+    transition(':enter', [
+        style({ opacity: 0, transform: 'translateY(-15px)' }),
+        animate('300ms ease-out', style({ opacity: 1, transform: 'translateY(0)' })),
+    ]),
+    transition(':leave', [
+        animate('300ms ease-in', style({ opacity: 0, height: 0, padding: 0, margin: 0 }))
+    ]),
+]);
+
+class TableComponent {
+    columns = [];
+    data = [];
+    loading = false;
+    pages = 0;
+    size = 25;
+    highlightedId = 0;
+    headerText = '';
+    totalItems = 0;
+    searchEnabled = true;
+    searchLabel = 'Buscar';
+    searchPlaceholder = 'Buscar';
+    striped = false;
+    showPagination = true;
+    showEmptyMessage = false;
+    emptyMessage = 'No hay elementos';
+    action = new EventEmitter();
+    update = new EventEmitter();
+    checkedChange = new EventEmitter();
+    checkedIds = new Set();
+    sortKey = '';
+    sortAsc = true;
+    filter = '';
+    page = 1;
+    getValue(data, key) {
+        const col = data.find(col => col.key == key);
+        return col?.value ?? '-';
+    }
+    getFontColor(data, key) {
+        const col = data.find(col => col.key == key);
+        return 'trc-' + (col?.textColor ?? 'black');
+    }
+    getBackgroundColor(data, key) {
+        const col = data.find(col => col.key == key);
+        return col?.color ?? 'transparent';
+    }
+    isValidRule(data, key) {
+        if (!key)
+            return true;
+        let valid = true;
+        key.forEach(k => {
+            const col = data.find(col => col.key == k);
+            valid = valid && !!(col?.value);
+        });
+        return valid;
+    }
+    getIcon(data, key) {
+        const col = data.find(col => col.key == key);
+        return '<i class="' + col?.icon + '"></i>';
+    }
+    getList(data, key) {
+        const col = data.find(col => col.key == key);
+        return col?.list ?? [];
+    }
+    getUser(data, key) {
+        const col = data.find(col => col.key == key);
+        return col?.user;
+    }
+    sortClick(key) {
+        if (this.sortKey != key) {
+            this.sortKey = key;
+            this.sortAsc = true;
+        }
+        else if (this.sortAsc) {
+            this.sortAsc = false;
+        }
+        else {
+            this.sortKey = '';
+            this.sortAsc = true;
+        }
+        this.updateData();
+    }
+    sizeChabge(newSize) {
+        this.size = newSize;
+        this.updateData();
+    }
+    pageChage(newPage) {
+        this.page = newPage;
+        this.updateData();
+    }
+    search(text) {
+        this.filter = text;
+        this.updateData();
+    }
+    updateData() {
+        this.update.emit({
+            sortBy: this.sortKey,
+            isSortAscending: this.sortAsc,
+            pageNumber: this.page,
+            pageSize: this.size,
+            filter: this.filter
+        });
+    }
+    toggleSelection(id, checked) {
+        if (checked) {
+            this.checkedIds.add(id);
+        }
+        else {
+            this.checkedIds.delete(id);
+        }
+        this.areAllSelected();
+        this.checkedChange.emit(Array.from(this.checkedIds));
+    }
+    toggleAll(checked) {
+        if (checked) {
+            this.data.forEach(item => this.checkedIds.add(item.id));
+        }
+        else {
+            this.checkedIds.clear();
+        }
+        this.checkedChange.emit(Array.from(this.checkedIds));
+    }
+    areAllSelected() {
+        this.allSelected = this.checkedIds.size === this.data.length;
+    }
+    allSelected = false;
+    ngOnChanges() {
+        this.areAllSelected();
+    }
+    doAction(rowId, key) {
+        this.action.emit({ rowId, key });
+    }
+    resetCheckedIds() {
+        this.checkedIds.clear();
+        this.checkedChange.emit([]);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: TableComponent, isStandalone: true, selector: "ui-table", inputs: { columns: "columns", data: "data", loading: "loading", pages: "pages", size: "size", 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        <table-searcher (search)=\"search($event)\" [placeholder]=\"searchPlaceholder\" ></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(10); 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                                \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 [tooltip]=\"alert.text\" [class]=\"alert.icon + ' alert'\" ></i>\r\n                                        }\r\n                                    </div>\r\n                                }\r\n                                @else if (header.type == 'list'){\r\n                                    <app-table-list [list]=\"getList(row.data,header.key)\"></app-table-list>                 \r\n                                }\r\n                                @else if (header.type == 'user'){\r\n                                    <app-table-user [user]=\"getUser(row.data,header.key)\"></app-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                                                    [tooltip]=\"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        <app-table-pagination \r\n            [loading]=\"loading\" \r\n            [totalPages]=\"pages\" \r\n            [size]=\"size\"\r\n            (sizeChange)=\"sizeChabge($event)\"\r\n            (pageChange)=\"pageChage($event)\">\r\n        </app-table-pagination>\r\n    }\r\n</div>", styles: [".table-wrapper{overflow:hidden;border:solid 1px #e9eaeb;border-radius:12px}table{width:100%;font-weight:400;color:#535862}table th{font-size:12px;height:44px;font-weight:500;background-color:#fafafa;border-left:solid 6px #fafafa}table th .th-wrap{white-space:nowrap;display:flex;align-items: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:#a4a7ae}table th .th-wrap div:hover{color:#592371}table td{font-size:14px;height:64px}table td,table th{padding:4px 24px;vertical-align:middle;border-bottom:solid 1px #e9eaeb}table tr{transition:ease .3s}table tr:hover{background-color:#fafafa}.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:#181d27;border-bottom:solid 1px #e9eaeb}.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:#752bb0!important;border:solid 1px}.empty{text-align:center;color:#d5d7da}.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:#f04438;color:#fff;border-radius:50%;padding:3px}.loader{height:5px;width:100%;--c:no-repeat linear-gradient(#592371 0 0);background:var(--c),var(--c),#592371;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:#fafafa;transition:ease .3s}.striped tbody tr:nth-child(odd):hover{background-color:#592371}.tr-highlighted{border-left:solid 6px #16a34a}.trc-primary{color:#592371}.trc-red{color:#f04438}.trc-blue{color:#78aaec}.trc-green{color:#16a34a}.trc-yellow{color:#f79009}.trc-black{color:#181d27}.trc-grey{color:#d5d7da}.row-loader{background:linear-gradient(90deg,#e0e0e0 25%,#f5f5f5,#e0e0e0 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: ButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: TableUserComponent, selector: "app-table-user", inputs: ["user"] }, { kind: "component", type: TableListComponent, selector: "app-table-list", inputs: ["list"] }, { kind: "component", type: TableSearcherComponent, selector: "table-searcher", inputs: ["placeholder", "label", "searchOnKeydown"], outputs: ["search"] }, { kind: "component", type: TablePaginationComponent, selector: "app-table-pagination", inputs: ["currentPage", "totalPages", "size", "loading"], outputs: ["pageChange", "sizeChange"] }, { kind: "directive", type: ToolTipDirective, selector: "[tooltip]", inputs: ["tooltip"] }, { kind: "component", type: CheckboxComponent, selector: "ui-checkbox", inputs: ["label", "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] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-table', imports: [CommonModule, ButtonComponent, TableUserComponent, TableListComponent, TableSearcherComponent,
+                        TablePaginationComponent, ToolTipDirective, CheckboxComponent, FormsModule], animations: [highlightRow, animatedRow], template: "<div class=\"table-filters\">\r\n    @if (searchEnabled) {\r\n        <table-searcher (search)=\"search($event)\" [placeholder]=\"searchPlaceholder\" ></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(10); 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                                \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 [tooltip]=\"alert.text\" [class]=\"alert.icon + ' alert'\" ></i>\r\n                                        }\r\n                                    </div>\r\n                                }\r\n                                @else if (header.type == 'list'){\r\n                                    <app-table-list [list]=\"getList(row.data,header.key)\"></app-table-list>                 \r\n                                }\r\n                                @else if (header.type == 'user'){\r\n                                    <app-table-user [user]=\"getUser(row.data,header.key)\"></app-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                                                    [tooltip]=\"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        <app-table-pagination \r\n            [loading]=\"loading\" \r\n            [totalPages]=\"pages\" \r\n            [size]=\"size\"\r\n            (sizeChange)=\"sizeChabge($event)\"\r\n            (pageChange)=\"pageChage($event)\">\r\n        </app-table-pagination>\r\n    }\r\n</div>", styles: [".table-wrapper{overflow:hidden;border:solid 1px #e9eaeb;border-radius:12px}table{width:100%;font-weight:400;color:#535862}table th{font-size:12px;height:44px;font-weight:500;background-color:#fafafa;border-left:solid 6px #fafafa}table th .th-wrap{white-space:nowrap;display:flex;align-items: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:#a4a7ae}table th .th-wrap div:hover{color:#592371}table td{font-size:14px;height:64px}table td,table th{padding:4px 24px;vertical-align:middle;border-bottom:solid 1px #e9eaeb}table tr{transition:ease .3s}table tr:hover{background-color:#fafafa}.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:#181d27;border-bottom:solid 1px #e9eaeb}.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:#752bb0!important;border:solid 1px}.empty{text-align:center;color:#d5d7da}.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:#f04438;color:#fff;border-radius:50%;padding:3px}.loader{height:5px;width:100%;--c:no-repeat linear-gradient(#592371 0 0);background:var(--c),var(--c),#592371;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:#fafafa;transition:ease .3s}.striped tbody tr:nth-child(odd):hover{background-color:#592371}.tr-highlighted{border-left:solid 6px #16a34a}.trc-primary{color:#592371}.trc-red{color:#f04438}.trc-blue{color:#78aaec}.trc-green{color:#16a34a}.trc-yellow{color:#f79009}.trc-black{color:#181d27}.trc-grey{color:#d5d7da}.row-loader{background:linear-gradient(90deg,#e0e0e0 25%,#f5f5f5,#e0e0e0 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"] }]
+        }], propDecorators: { columns: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], pages: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], highlightedId: [{
+                type: Input
+            }], headerText: [{
+                type: Input
+            }], totalItems: [{
+                type: Input
+            }], searchEnabled: [{
+                type: Input
+            }], searchLabel: [{
+                type: Input
+            }], searchPlaceholder: [{
+                type: Input
+            }], striped: [{
+                type: Input
+            }], showPagination: [{
+                type: Input
+            }], showEmptyMessage: [{
+                type: Input
+            }], emptyMessage: [{
+                type: Input
+            }], action: [{
+                type: Output
+            }], update: [{
+                type: Output
+            }], checkedChange: [{
+                type: Output
+            }] } });
+
+;
+;
+
+const pushTop = trigger('pushTop', [
+    transition(':enter', [style({ opacity: 0, transform: 'translateY(20px)' }), animate('.3s ease', style({ opacity: 1, transform: 'translateY(0)' }))]),
+    transition(':leave', [animate('.3s ease', style({ opacity: 0, transform: 'translateY(-20px)' }))])
+]);
+
+const sideModal = trigger('sideModal', [
+    state('visible', style({ transform: 'translateX(0)' })),
+    state('hidden', style({ transform: 'translateX(100%)' })),
+    // animación al CREARSE
+    transition('void => visible', [
+        style({ opacity: .8, transform: 'translateX(100%)' }),
+        animate('.5s ease')
+    ]),
+    // animación al CERRAR
+    transition('visible => hidden', [
+        animate('.5s ease')
+    ])
+]);
+const fadeBackdrop = trigger('fadeBackdrop', [
+    state('visible', style({ opacity: 1 })),
+    state('hidden', style({ opacity: 0 })),
+    transition('void => visible', [
+        style({ opacity: 0 }),
+        animate('300ms ease-out')
+    ]),
+    transition('visible => hidden', [
+        animate('300ms ease-in')
+    ])
+]);
+
+const simpleFade = trigger('simpleFade', [
+    transition(':enter', [style({ opacity: 0 }), animate('.3s ease', style({ opacity: 1 }))]),
+    transition(':leave', [animate('.3s ease', style({ opacity: 0 }))])
+]);
+
+const base = createValueAccessor();
+class SelectComponent extends base {
+    icon = ''; // Icono externo
+    iconColor = 'primary'; //color de ícono externo
+    internalIcon = ''; //Icono interno
+    size = 'm'; // tamaño general del input
+    label = '';
+    error = '';
+    tip = '';
+    disabled = false;
+    nullable = false;
+    options = [];
+    showSubtitle = false;
+    overlayPositions = [
+        {
+            originX: 'start',
+            originY: 'bottom',
+            overlayX: 'start',
+            overlayY: 'top'
+        },
+        {
+            originX: 'start',
+            originY: 'top',
+            overlayX: 'start',
+            overlayY: 'bottom'
+        }
+    ];
+    open = false;
+    emptyText = '- Seleccionar -';
+    renderer = inject(Renderer2);
+    toggleButton;
+    unlistener;
+    ngOnInit() {
+        this.emptyText = this.disabled ? '-' : '- Seleccionar -';
+    }
+    openList() {
+        if (!this.disabled) {
+            this.open = !this.open;
+            if (this.open) {
+                setTimeout(() => {
+                    this.unlistener = this.renderer.listen('window', 'click', (e) => {
+                        if (!this.toggleButton.nativeElement.contains(e.target)) {
+                            this.open = false;
+                            this.unlistener();
+                        }
+                    });
+                }, 200);
+            }
+        }
+    }
+    selectOption(option) {
+        this.open = false;
+        this.unlistener();
+        this.notifyChange(option);
+    }
+    //( overlay)
+    closeList() {
+        this.open = false;
+    }
+    openListOverlay() {
+        if (!this.disabled) {
+            this.open = !this.open;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: SelectComponent, isStandalone: true, selector: "ui-select", inputs: { icon: "icon", iconColor: "iconColor", internalIcon: "internalIcon", size: "size", label: "label", error: "error", tip: "tip", disabled: "disabled", nullable: "nullable", options: "options", showSubtitle: "showSubtitle" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => SelectComponent),
+                multi: true
+            }
+        ], viewQueries: [{ propertyName: "toggleButton", first: true, predicate: ["inputwrapp"], 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  class=\"input-elements\" [style]=\"icon?'max-width: calc(100% - 34px);':''\">\r\n        @if (label) {\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 cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\" > \r\n\r\n            <!-- INPUT -->\r\n            <div  (click)=\"openList()\"   class=\"fakeinput\" [ngClass]=\"{'activeselect':open, 'errorinput':error, 'disabledinput':disabled}\" style=\"cursor: pointer;\">\r\n                @if (internalIcon) {\r\n                    <i class=\"input-internalicon-{{size}} {{internalIcon}}\" ></i>\r\n                }\r\n                <div class=\"fakeinput-content\">{{(value?.text || emptyText)}}</div>\r\n                @if (!disabled) {\r\n                    <i  class=\"ri-arrow-down-s-line\"></i>\r\n                }\r\n            </div>            \r\n            <!-- DESPLEGABLE -->\r\n             @if (open) {\r\n\r\n            <ng-template\r\n                cdkConnectedOverlay\r\n                [cdkConnectedOverlayOrigin]=\"trigger\"\r\n                [cdkConnectedOverlayOpen]=\"open\"\r\n                [cdkConnectedOverlayHasBackdrop]=\"true\"\r\n                (backdropClick)=\"closeList()\"\r\n                [cdkConnectedOverlayWidth]=\"trigger.elementRef.nativeElement.offsetWidth\"\r\n                [cdkConnectedOverlayPositions]=\"overlayPositions\"\r\n            >\r\n\r\n                 <div class=\"input-options\" @fadeAndRise >\r\n                     <!-- OPCIONES -->\r\n                     <div class=\"input-option-scroll\">\r\n                        @if (options.length > 0 &&  nullable) {\r\n                            <div (click)=\"selectOption(null)\" class=\"input-option \" style=\"padding: 3px;\" >- Ninguno -</div>\r\n                        }\r\n\r\n                        @for (option of options; track $index) {\r\n                            <div (click)=\"selectOption(option)\"  class=\"input-option\">\r\n                                <div style=\"padding: 2px;\">\r\n                                    <div class=\"f-medium\">{{option.text }}</div>\r\n                                    <div *ngIf=\"showSubtitle\" class=\"f-extralight\">{{option.detail}}</div>\r\n                                </div>\r\n                            </div>\r\n                        }\r\n                         @if (options.length == 0) {\r\n                             <div class=\"fakeinput-alert t-disabled\">No hay elementos para mostrar</div>\r\n                         }\r\n                     </div>\r\n                 </div>\r\n            </ng-template>\r\n            }\r\n\r\n        </div>\r\n        <!-- ALERTS -->\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 font-error\">{{error}}</div>\r\n        }\r\n    </div>\r\n</div>", styles: [":host{width:100%}.input-container{flex:1 1;padding:3px;overflow:hidden}.pad-s{padding:0}.pad-l{padding:5px}.input-options{position:absolute;border-radius:8px;background-color:#fff;box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;left:0;font-size:13px;z-index:50;overflow:hidden}.input-option{line-height:15px;display:flex;align-items:center;padding:7px 15px;border-bottom:solid 1px #efe9f2;-webkit-user-select:none;user-select:none;transition:ease .3s}.input-option-focused{background-color:#592371}.input-option:hover{background-color:#f3eaf9;cursor:pointer}.input-option-scroll{padding:0 3px;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px #e9eaeb;width:100%;margin-top:2px}.input-option-scroll-focused{background-color:#cfbcd7}.input-option-scroll-btns{border-top:solid 1px #e9eaeb;padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:#fff;border:solid 1px #e9eaeb;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:8px;font-size:26px;height:26px;width:26px}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon-s{color:#e9eaeb;font-size:17px}.input-internalicon-m{color:#e9eaeb;font-size:20px}.input-internalicon-l{color:#e9eaeb;font-size:24px}.label{font-size:14px;line-height:20px;font-weight:400;color:#0a0d12;margin-bottom:8px}.inputlabel-mini{font-size:12.5px;line-height:15px}.inputlabel-s{font-size:14px}.inputlabel-m{font-size:16px}.inputlabel-l{font-size:17px}.fakeinput{border-radius:8px;overflow:hidden;border:solid 1px #e9eaeb;display:flex;align-items:center;font-size:13px;padding-left:5px;-webkit-user-select:none;user-select:none;background-color:#fff;transition:ease .3s;height:40px}.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:#d5d7da}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:#e9eaeb;color:#252b37}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:#e9eaeb}.fakeinput-button:disabled{background-color:#e9eaeb;color:#f04438}.fakeinput-button:enabled:hover{cursor:pointer;background-color:#cfbcd7;color:#fff}.fakeinput-button:enabled:active{background-color:#4a1d5e}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:#e9eaeb}.fakeinput:focus-within{box-shadow:0 0 3px #63277d}.fakeinput:focus-within button{background-color:#592371;color:#fff}.fakeinput:focus-within button:enabled:hover{cursor:pointer;background-color:#cfbcd7;color:#fff}.fakeinput:focus-within button:enabled:active{background-color:#4f1f64}.fakeinput:hover{border-color:#a4a7ae;cursor:text}.activeselect{border-color:#4f1f64}.inputpadnone{padding:0}.inputpadmini{padding:4px 5px}.inputpad0{padding:5px 10px}.inputpad1{padding:10px 15px}.inputpad2{padding:10px 20px}.errorinput{border-color:#f04438}.t-disabled{color:#d5d7da;padding:5px;text-align:center}.disabledinput{background-color:#fafafa -disabled;color:#252b37}.disabledinput ::ng-deep input{color:#252b37}.editor{border:none;border-radius:8px}.editor ::ng-deep .NgxEditor__MenuBar{border-top-left-radius:4px;border-top-right-radius:4px;border-bottom:1px solid #e9eaeb}.editor ::ng-deep .NgxEditor__Content{min-height:100px}.editor ::ng-deep .NgxEditor{border-top-left-radius:0;border-top-right-radius:0;background-color:transparent;border:none}.editor.onfocus ::ng-deep .NgxEditor__MenuBar{display:none}.editor.onfocus:focus-within ::ng-deep .NgxEditor__MenuBar{display:flex}.fakeinput-files{display:flex;align-items:center;border:dashed #e9eaeb 1px;padding:2px;border-radius:8px}.input-files{display:flex;align-items:center;flex-wrap:wrap;padding:0 10px;width:100%;min-height:30px}.input-file{display:flex;align-items:center;padding:0 5px;font-size:14px;height:30px;overflow:hidden;background-color:#fff;width:fit-content;border-radius:8px;margin:2px;border:solid 1px #f79009;transition:ease .3s}.input-file:hover{cursor:pointer;color:#592371}.input-file i{width:18px;height:18px;font-size:18px;color:#e9eaeb;margin-right:5px}.inputlabel{display:flex;align-items:center}.f-primary{color:#592371}.f{color:#cfbcd7}.f-secondary{color:#752bb0}.f-error{color:#f04438}.f-grey{color:#d5d7da}.font-error{color:#f04438}.tip{color:#592371}.item-disabled{color:#d5d7da}.item-disabled:hover{background-color:#fff;cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }], animations: [fadeAndRise] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-select', imports: [CommonModule, OverlayModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SelectComponent),
+                            multi: true
+                        }
+                    ], animations: [fadeAndRise], template: "<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        @if (label) {\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 cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\" > \r\n\r\n            <!-- INPUT -->\r\n            <div  (click)=\"openList()\"   class=\"fakeinput\" [ngClass]=\"{'activeselect':open, 'errorinput':error, 'disabledinput':disabled}\" style=\"cursor: pointer;\">\r\n                @if (internalIcon) {\r\n                    <i class=\"input-internalicon-{{size}} {{internalIcon}}\" ></i>\r\n                }\r\n                <div class=\"fakeinput-content\">{{(value?.text || emptyText)}}</div>\r\n                @if (!disabled) {\r\n                    <i  class=\"ri-arrow-down-s-line\"></i>\r\n                }\r\n            </div>            \r\n            <!-- DESPLEGABLE -->\r\n             @if (open) {\r\n\r\n            <ng-template\r\n                cdkConnectedOverlay\r\n                [cdkConnectedOverlayOrigin]=\"trigger\"\r\n                [cdkConnectedOverlayOpen]=\"open\"\r\n                [cdkConnectedOverlayHasBackdrop]=\"true\"\r\n                (backdropClick)=\"closeList()\"\r\n                [cdkConnectedOverlayWidth]=\"trigger.elementRef.nativeElement.offsetWidth\"\r\n                [cdkConnectedOverlayPositions]=\"overlayPositions\"\r\n            >\r\n\r\n                 <div class=\"input-options\" @fadeAndRise >\r\n                     <!-- OPCIONES -->\r\n                     <div class=\"input-option-scroll\">\r\n                        @if (options.length > 0 &&  nullable) {\r\n                            <div (click)=\"selectOption(null)\" class=\"input-option \" style=\"padding: 3px;\" >- Ninguno -</div>\r\n                        }\r\n\r\n                        @for (option of options; track $index) {\r\n                            <div (click)=\"selectOption(option)\"  class=\"input-option\">\r\n                                <div style=\"padding: 2px;\">\r\n                                    <div class=\"f-medium\">{{option.text }}</div>\r\n                                    <div *ngIf=\"showSubtitle\" class=\"f-extralight\">{{option.detail}}</div>\r\n                                </div>\r\n                            </div>\r\n                        }\r\n                         @if (options.length == 0) {\r\n                             <div class=\"fakeinput-alert t-disabled\">No hay elementos para mostrar</div>\r\n                         }\r\n                     </div>\r\n                 </div>\r\n            </ng-template>\r\n            }\r\n\r\n        </div>\r\n        <!-- ALERTS -->\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 font-error\">{{error}}</div>\r\n        }\r\n    </div>\r\n</div>", styles: [":host{width:100%}.input-container{flex:1 1;padding:3px;overflow:hidden}.pad-s{padding:0}.pad-l{padding:5px}.input-options{position:absolute;border-radius:8px;background-color:#fff;box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;left:0;font-size:13px;z-index:50;overflow:hidden}.input-option{line-height:15px;display:flex;align-items:center;padding:7px 15px;border-bottom:solid 1px #efe9f2;-webkit-user-select:none;user-select:none;transition:ease .3s}.input-option-focused{background-color:#592371}.input-option:hover{background-color:#f3eaf9;cursor:pointer}.input-option-scroll{padding:0 3px;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px #e9eaeb;width:100%;margin-top:2px}.input-option-scroll-focused{background-color:#cfbcd7}.input-option-scroll-btns{border-top:solid 1px #e9eaeb;padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:#fff;border:solid 1px #e9eaeb;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:8px;font-size:26px;height:26px;width:26px}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon-s{color:#e9eaeb;font-size:17px}.input-internalicon-m{color:#e9eaeb;font-size:20px}.input-internalicon-l{color:#e9eaeb;font-size:24px}.label{font-size:14px;line-height:20px;font-weight:400;color:#0a0d12;margin-bottom:8px}.inputlabel-mini{font-size:12.5px;line-height:15px}.inputlabel-s{font-size:14px}.inputlabel-m{font-size:16px}.inputlabel-l{font-size:17px}.fakeinput{border-radius:8px;overflow:hidden;border:solid 1px #e9eaeb;display:flex;align-items:center;font-size:13px;padding-left:5px;-webkit-user-select:none;user-select:none;background-color:#fff;transition:ease .3s;height:40px}.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:#d5d7da}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:#e9eaeb;color:#252b37}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:#e9eaeb}.fakeinput-button:disabled{background-color:#e9eaeb;color:#f04438}.fakeinput-button:enabled:hover{cursor:pointer;background-color:#cfbcd7;color:#fff}.fakeinput-button:enabled:active{background-color:#4a1d5e}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:#e9eaeb}.fakeinput:focus-within{box-shadow:0 0 3px #63277d}.fakeinput:focus-within button{background-color:#592371;color:#fff}.fakeinput:focus-within button:enabled:hover{cursor:pointer;background-color:#cfbcd7;color:#fff}.fakeinput:focus-within button:enabled:active{background-color:#4f1f64}.fakeinput:hover{border-color:#a4a7ae;cursor:text}.activeselect{border-color:#4f1f64}.inputpadnone{padding:0}.inputpadmini{padding:4px 5px}.inputpad0{padding:5px 10px}.inputpad1{padding:10px 15px}.inputpad2{padding:10px 20px}.errorinput{border-color:#f04438}.t-disabled{color:#d5d7da;padding:5px;text-align:center}.disabledinput{background-color:#fafafa -disabled;color:#252b37}.disabledinput ::ng-deep input{color:#252b37}.editor{border:none;border-radius:8px}.editor ::ng-deep .NgxEditor__MenuBar{border-top-left-radius:4px;border-top-right-radius:4px;border-bottom:1px solid #e9eaeb}.editor ::ng-deep .NgxEditor__Content{min-height:100px}.editor ::ng-deep .NgxEditor{border-top-left-radius:0;border-top-right-radius:0;background-color:transparent;border:none}.editor.onfocus ::ng-deep .NgxEditor__MenuBar{display:none}.editor.onfocus:focus-within ::ng-deep .NgxEditor__MenuBar{display:flex}.fakeinput-files{display:flex;align-items:center;border:dashed #e9eaeb 1px;padding:2px;border-radius:8px}.input-files{display:flex;align-items:center;flex-wrap:wrap;padding:0 10px;width:100%;min-height:30px}.input-file{display:flex;align-items:center;padding:0 5px;font-size:14px;height:30px;overflow:hidden;background-color:#fff;width:fit-content;border-radius:8px;margin:2px;border:solid 1px #f79009;transition:ease .3s}.input-file:hover{cursor:pointer;color:#592371}.input-file i{width:18px;height:18px;font-size:18px;color:#e9eaeb;margin-right:5px}.inputlabel{display:flex;align-items:center}.f-primary{color:#592371}.f{color:#cfbcd7}.f-secondary{color:#752bb0}.f-error{color:#f04438}.f-grey{color:#d5d7da}.font-error{color:#f04438}.tip{color:#592371}.item-disabled{color:#d5d7da}.item-disabled:hover{background-color:#fff;cursor:not-allowed}\n"] }]
+        }], propDecorators: { icon: [{
+                type: Input
+            }], iconColor: [{
+                type: Input
+            }], internalIcon: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], error: [{
+                type: Input
+            }], tip: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], nullable: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], showSubtitle: [{
+                type: Input
+            }], toggleButton: [{
+                type: ViewChild,
+                args: ['inputwrapp']
+            }] } });
+
+class InputComponent {
+    icon = ''; // Icono externo
+    iconColor = 'secondary'; //color de ícono externo
+    internalIcon = ''; //Icono interno
+    size = 'm'; // tamaño general del input
+    // TEXTO
+    label = '';
+    error = '';
+    tip = '';
+    // FUNCTIONS
+    disabled = false;
+    clickButton = new EventEmitter();
+    disableBtn = false;
+    disableButton() {
+        this.clickButton.emit();
+        this.disableBtn = true;
+        setTimeout(() => {
+            this.disableBtn = false;
+        }, 200);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: InputComponent, isStandalone: true, selector: "ui-input", inputs: { icon: "icon", iconColor: "iconColor", internalIcon: "internalIcon", size: "size", label: "label", error: "error", tip: "tip", disabled: "disabled" }, outputs: { clickButton: "clickButton" }, ngImport: i0, template: "<div class=\"input-wrapper\">\r\n    \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        \r\n        @if (label) {\r\n            <div class=\"label  inputlabel\" [class.font-error]=\"error\">\r\n                {{label}} \r\n            </div>\r\n        }\r\n        \r\n        <div class=\"fakeinput\" [ngClass]=\"{'errorinput':error, 'disabledinput':disabled}\">\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                <ng-content class=\"myinput\"></ng-content>\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 font-error\">{{error}}</div>\r\n        }\r\n        \r\n    </div>\r\n</div>\r\n", styles: [":host{width:100%}.input-container{flex:1 1;padding:3px;overflow:hidden}.pad-s{padding:0}.pad-l{padding:5px}.input-options{position:absolute;border-radius:8px;background-color:#fff;box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;left:0;font-size:13px;z-index:50;overflow:hidden}.input-option{line-height:15px;display:flex;align-items:center;padding:7px 15px;border-bottom:solid 1px #efe9f2;-webkit-user-select:none;user-select:none;transition:ease .3s}.input-option-focused{background-color:#592371}.input-option:hover{background-color:#f3eaf9;cursor:pointer}.input-option-scroll{padding:0 3px;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px #e9eaeb;width:100%;margin-top:2px}.input-option-scroll-focused{background-color:#cfbcd7}.input-option-scroll-btns{border-top:solid 1px #e9eaeb;padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:#fff;border:solid 1px #e9eaeb;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:8px;font-size:26px;height:26px;width:26px}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon-s{color:#e9eaeb;font-size:17px}.input-internalicon-m{color:#e9eaeb;font-size:20px}.input-internalicon-l{color:#e9eaeb;font-size:24px}.label{font-size:14px;line-height:20px;font-weight:400;color:#0a0d12;margin-bottom:8px}.inputlabel-mini{font-size:12.5px;line-height:15px}.inputlabel-s{font-size:14px}.inputlabel-m{font-size:16px}.inputlabel-l{font-size:17px}.fakeinput{border-radius:8px;overflow:hidden;border:solid 1px #e9eaeb;display:flex;align-items:center;font-size:13px;padding-left:5px;-webkit-user-select:none;user-select:none;background-color:#fff;transition:ease .3s;height:40px}.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:#d5d7da}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:#e9eaeb;color:#252b37}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:#e9eaeb}.fakeinput-button:disabled{background-color:#e9eaeb;color:#f04438}.fakeinput-button:enabled:hover{cursor:pointer;background-color:#cfbcd7;color:#fff}.fakeinput-button:enabled:active{background-color:#4a1d5e}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:#e9eaeb}.fakeinput:focus-within{box-shadow:0 0 3px #63277d}.fakeinput:focus-within button{background-color:#592371;color:#fff}.fakeinput:focus-within button:enabled:hover{cursor:pointer;background-color:#cfbcd7;color:#fff}.fakeinput:focus-within button:enabled:active{background-color:#4f1f64}.fakeinput:hover{border-color:#a4a7ae;cursor:text}.activeselect{border-color:#4f1f64}.inputpadnone{padding:0}.inputpadmini{padding:4px 5px}.inputpad0{padding:5px 10px}.inputpad1{padding:10px 15px}.inputpad2{padding:10px 20px}.errorinput{border-color:#f04438}.t-disabled{color:#d5d7da;padding:5px;text-align:center}.disabledinput{background-color:#fafafa -disabled;color:#252b37}.disabledinput ::ng-deep input{color:#252b37}.editor{border:none;border-radius:8px}.editor ::ng-deep .NgxEditor__MenuBar{border-top-left-radius:4px;border-top-right-radius:4px;border-bottom:1px solid #e9eaeb}.editor ::ng-deep .NgxEditor__Content{min-height:100px}.editor ::ng-deep .NgxEditor{border-top-left-radius:0;border-top-right-radius:0;background-color:transparent;border:none}.editor.onfocus ::ng-deep .NgxEditor__MenuBar{display:none}.editor.onfocus:focus-within ::ng-deep .NgxEditor__MenuBar{display:flex}.fakeinput-files{display:flex;align-items:center;border:dashed #e9eaeb 1px;padding:2px;border-radius:8px}.input-files{display:flex;align-items:center;flex-wrap:wrap;padding:0 10px;width:100%;min-height:30px}.input-file{display:flex;align-items:center;padding:0 5px;font-size:14px;height:30px;overflow:hidden;background-color:#fff;width:fit-content;border-radius:8px;margin:2px;border:solid 1px #f79009;transition:ease .3s}.input-file:hover{cursor:pointer;color:#592371}.input-file i{width:18px;height:18px;font-size:18px;color:#e9eaeb;margin-right:5px}.inputlabel{display:flex;align-items:center}.f-primary{color:#592371}.f{color:#cfbcd7}.f-secondary{color:#752bb0}.f-error{color:#f04438}.f-grey{color:#d5d7da}.font-error{color:#f04438}.tip{color:#592371}.item-disabled{color:#d5d7da}.item-disabled:hover{background-color:#fff;cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: InputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-input', imports: [CommonModule], template: "<div class=\"input-wrapper\">\r\n    \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        \r\n        @if (label) {\r\n            <div class=\"label  inputlabel\" [class.font-error]=\"error\">\r\n                {{label}} \r\n            </div>\r\n        }\r\n        \r\n        <div class=\"fakeinput\" [ngClass]=\"{'errorinput':error, 'disabledinput':disabled}\">\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                <ng-content class=\"myinput\"></ng-content>\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 font-error\">{{error}}</div>\r\n        }\r\n        \r\n    </div>\r\n</div>\r\n", styles: [":host{width:100%}.input-container{flex:1 1;padding:3px;overflow:hidden}.pad-s{padding:0}.pad-l{padding:5px}.input-options{position:absolute;border-radius:8px;background-color:#fff;box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;left:0;font-size:13px;z-index:50;overflow:hidden}.input-option{line-height:15px;display:flex;align-items:center;padding:7px 15px;border-bottom:solid 1px #efe9f2;-webkit-user-select:none;user-select:none;transition:ease .3s}.input-option-focused{background-color:#592371}.input-option:hover{background-color:#f3eaf9;cursor:pointer}.input-option-scroll{padding:0 3px;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px #e9eaeb;width:100%;margin-top:2px}.input-option-scroll-focused{background-color:#cfbcd7}.input-option-scroll-btns{border-top:solid 1px #e9eaeb;padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:#fff;border:solid 1px #e9eaeb;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:8px;font-size:26px;height:26px;width:26px}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon-s{color:#e9eaeb;font-size:17px}.input-internalicon-m{color:#e9eaeb;font-size:20px}.input-internalicon-l{color:#e9eaeb;font-size:24px}.label{font-size:14px;line-height:20px;font-weight:400;color:#0a0d12;margin-bottom:8px}.inputlabel-mini{font-size:12.5px;line-height:15px}.inputlabel-s{font-size:14px}.inputlabel-m{font-size:16px}.inputlabel-l{font-size:17px}.fakeinput{border-radius:8px;overflow:hidden;border:solid 1px #e9eaeb;display:flex;align-items:center;font-size:13px;padding-left:5px;-webkit-user-select:none;user-select:none;background-color:#fff;transition:ease .3s;height:40px}.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:#d5d7da}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:#e9eaeb;color:#252b37}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:#e9eaeb}.fakeinput-button:disabled{background-color:#e9eaeb;color:#f04438}.fakeinput-button:enabled:hover{cursor:pointer;background-color:#cfbcd7;color:#fff}.fakeinput-button:enabled:active{background-color:#4a1d5e}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:#e9eaeb}.fakeinput:focus-within{box-shadow:0 0 3px #63277d}.fakeinput:focus-within button{background-color:#592371;color:#fff}.fakeinput:focus-within button:enabled:hover{cursor:pointer;background-color:#cfbcd7;color:#fff}.fakeinput:focus-within button:enabled:active{background-color:#4f1f64}.fakeinput:hover{border-color:#a4a7ae;cursor:text}.activeselect{border-color:#4f1f64}.inputpadnone{padding:0}.inputpadmini{padding:4px 5px}.inputpad0{padding:5px 10px}.inputpad1{padding:10px 15px}.inputpad2{padding:10px 20px}.errorinput{border-color:#f04438}.t-disabled{color:#d5d7da;padding:5px;text-align:center}.disabledinput{background-color:#fafafa -disabled;color:#252b37}.disabledinput ::ng-deep input{color:#252b37}.editor{border:none;border-radius:8px}.editor ::ng-deep .NgxEditor__MenuBar{border-top-left-radius:4px;border-top-right-radius:4px;border-bottom:1px solid #e9eaeb}.editor ::ng-deep .NgxEditor__Content{min-height:100px}.editor ::ng-deep .NgxEditor{border-top-left-radius:0;border-top-right-radius:0;background-color:transparent;border:none}.editor.onfocus ::ng-deep .NgxEditor__MenuBar{display:none}.editor.onfocus:focus-within ::ng-deep .NgxEditor__MenuBar{display:flex}.fakeinput-files{display:flex;align-items:center;border:dashed #e9eaeb 1px;padding:2px;border-radius:8px}.input-files{display:flex;align-items:center;flex-wrap:wrap;padding:0 10px;width:100%;min-height:30px}.input-file{display:flex;align-items:center;padding:0 5px;font-size:14px;height:30px;overflow:hidden;background-color:#fff;width:fit-content;border-radius:8px;margin:2px;border:solid 1px #f79009;transition:ease .3s}.input-file:hover{cursor:pointer;color:#592371}.input-file i{width:18px;height:18px;font-size:18px;color:#e9eaeb;margin-right:5px}.inputlabel{display:flex;align-items:center}.f-primary{color:#592371}.f{color:#cfbcd7}.f-secondary{color:#752bb0}.f-error{color:#f04438}.f-grey{color:#d5d7da}.font-error{color:#f04438}.tip{color:#592371}.item-disabled{color:#d5d7da}.item-disabled:hover{background-color:#fff;cursor:not-allowed}\n"] }]
+        }], propDecorators: { icon: [{
+                type: Input
+            }], iconColor: [{
+                type: Input
+            }], internalIcon: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], error: [{
+                type: Input
+            }], tip: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], clickButton: [{
+                type: Output
+            }] } });
+
+class DynamicFormComponent {
+    fields = [];
+    form;
+    flag = false;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: DynamicFormComponent, isStandalone: true, selector: "app-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            <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\r\n      @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          [formControlName]=\"field.name\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-select>\r\n      }\r\n\r\n      @if (field.type === 'checkbox') {\r\n        <ui-checkbox\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [placeholder]=\"field.placeholder??''\"\r\n          [label]=\"field.label\"\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:16px;padding-bottom:24px}h2{margin-top:24px}.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: SelectComponent, selector: "ui-select", inputs: ["icon", "iconColor", "internalIcon", "size", "label", "error", "tip", "disabled", "nullable", "options", "showSubtitle"] }, { kind: "component", type: InputComponent, selector: "ui-input", inputs: ["icon", "iconColor", "internalIcon", "size", "label", "error", "tip", "disabled"], outputs: ["clickButton"] }, { kind: "component", type: CheckboxComponent, selector: "ui-checkbox", inputs: ["label", "placeholder", "disabled", "loading"] }, { kind: "ngmodule", type: FormsModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-dynamic-form', imports: [ReactiveFormsModule, SelectComponent, InputComponent, CheckboxComponent, 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            <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\r\n      @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          [formControlName]=\"field.name\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-select>\r\n      }\r\n\r\n      @if (field.type === 'checkbox') {\r\n        <ui-checkbox\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [placeholder]=\"field.placeholder??''\"\r\n          [label]=\"field.label\"\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:16px;padding-bottom:24px}h2{margin-top:24px}.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 FormWrapperComponent {
+    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;
+    }
+    // rebuild form controls when schema changes (revisar)
+    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 ?? []));
+        }
+        // modo sin steps: tomamos blocks del root (si existen)
+        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: FormWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: FormWrapperComponent, 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\r\n      <!-- cuerpo: loader o bloques del step -->\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            <!-- pasamos solo fields y el formGroup -->\r\n            <app-dynamic-form\r\n              [fields]=\"block.fields\"\r\n              [form]=\"form\">\r\n            </app-dynamic-form>\r\n          </section>\r\n        }\r\n      }\r\n\r\n      <!-- controles de navegaci\u00F3n -->\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          <app-dynamic-form\r\n            [fields]=\"block.fields\"\r\n            [form]=\"form\">\r\n          </app-dynamic-form>\r\n        }\r\n      </section>\r\n    }\r\n  }\r\n</form>\r\n", styles: [":host{display:block;padding:4px 0}.block-title{font-weight:600;margin:24px 0;font-size:24px;line-height:28px;color:#0a0d12}\n"], dependencies: [{ kind: "component", type: DynamicFormComponent, selector: "app-dynamic-form", inputs: ["fields", "form"] }, { kind: "component", type: SkeletonLoaderComponent, 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: FormWrapperComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-form-wrapper', imports: [DynamicFormComponent, SkeletonLoaderComponent, 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\r\n      <!-- cuerpo: loader o bloques del step -->\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            <!-- pasamos solo fields y el formGroup -->\r\n            <app-dynamic-form\r\n              [fields]=\"block.fields\"\r\n              [form]=\"form\">\r\n            </app-dynamic-form>\r\n          </section>\r\n        }\r\n      }\r\n\r\n      <!-- controles de navegaci\u00F3n -->\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          <app-dynamic-form\r\n            [fields]=\"block.fields\"\r\n            [form]=\"form\">\r\n          </app-dynamic-form>\r\n        }\r\n      </section>\r\n    }\r\n  }\r\n</form>\r\n", styles: [":host{display:block;padding:4px 0}.block-title{font-weight:600;margin:24px 0;font-size:24px;line-height:28px;color:#0a0d12}\n"] }]
+        }], propDecorators: { schema: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], initialValues: [{
+                type: Input
+            }], formSubmit: [{
+                type: Output
+            }] } });
+
+class SearcherComponent {
+    renderer;
+    overlay;
+    positionBuilder;
+    vcr;
+    icon = ''; // Icono externo
+    iconColor = 'secondary'; //color de ícono externo
+    internalIcon = ''; //Icono interno
+    size = 'm'; // tamaño general del input
+    // TEXTO
+    label = '';
+    error = '';
+    tip = '';
+    // FUNCTIONS
+    disabled = false;
+    showSelected = true;
+    placeholder = 'Buscar...';
+    open = false;
+    searchFn;
+    itemDisplayFn = item => String(item);
+    itemIsEnabledFn = () => true;
+    manualSearch = false;
+    selectedItem = null;
+    selectedItemChange = new EventEmitter();
+    isLoading = false;
+    searchText = '';
+    searchSubject = new Subject();
+    results$;
+    toggleButton;
+    unlistener;
+    constructor(renderer, overlay, positionBuilder, vcr) {
+        this.renderer = renderer;
+        this.overlay = overlay;
+        this.positionBuilder = positionBuilder;
+        this.vcr = vcr;
+        this.results$ = this.searchSubject.pipe(debounceTime(300), distinctUntilChanged(), tap(() => this.isLoading = true), switchMap(v => {
+            if (v.length < 3) {
+                this.isLoading = false;
+                return of([]);
+            }
+            return this.searchFn(v).pipe(finalize(() => this.isLoading = false));
+        }));
+    }
+    openList() {
+        if (!this.disabled && !this.open) {
+            this.open = true;
+            this.openOverlay();
+            if (this.open) {
+                setTimeout(() => {
+                    this.unlistener = this.renderer.listen('window', 'click', (e) => {
+                        if (!this.toggleButton.nativeElement.contains(e.target)) {
+                            this.clearSearch();
+                            this.unlistener();
+                        }
+                    });
+                }, 200);
+            }
+        }
+    }
+    onSearchChange(value) {
+        this.searchText = value;
+        if (!this.manualSearch) {
+            this.searchSubject.next(value);
+        }
+    }
+    triggerSearch() {
+        this.searchSubject.next(this.searchText);
+    }
+    selectItem(item) {
+        if (this.itemIsEnabledFn(item)) {
+            this.clearSearch();
+            this.selectedItemChange.emit(item);
+            if (this.showSelected)
+                this.selectedItem = item;
+        }
+    }
+    clearSearch() {
+        this.searchText = '';
+        this.open = false;
+        this.closeOverlay();
+        this.searchSubject.next('');
+    }
+    unselect() {
+        this.selectedItem = null;
+        this.selectedItemChange.emit(null);
+    }
+    dropdownTemplateRef;
+    overlayRef;
+    closeOverlay() {
+        if (this.overlayRef) {
+            this.overlayRef.dispose();
+            this.overlayRef = null;
+        }
+    }
+    openOverlay() {
+        if (this.overlayRef)
+            return;
+        const width = this.toggleButton.nativeElement.getBoundingClientRect().width;
+        const positionStrategy = this.positionBuilder
+            .flexibleConnectedTo(this.toggleButton)
+            .withPositions([
+            {
+                originX: 'start',
+                originY: 'bottom',
+                overlayX: 'start',
+                overlayY: 'top',
+            },
+            {
+                originX: 'start',
+                originY: 'top',
+                overlayX: 'start',
+                overlayY: 'bottom',
+            }
+        ])
+            .withFlexibleDimensions(false)
+            .withPush(false);
+        this.overlayRef = this.overlay.create({
+            positionStrategy,
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+            hasBackdrop: true,
+            backdropClass: 'transparent-backdrop'
+        });
+        const templatePortal = new TemplatePortal(this.dropdownTemplateRef, this.vcr);
+        this.overlayRef.attach(templatePortal);
+        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: SearcherComponent, 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: SearcherComponent, 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 font-error\">{{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:#592371;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:#fff;box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;border:solid 1px #e9eaeb;border-radius:5px;font-size:13px;z-index:150;overflow:hidden}\n", ":host{width:100%}.input-container{flex:1 1;padding:3px;overflow:hidden}.pad-s{padding:0}.pad-l{padding:5px}.input-options{position:absolute;border-radius:8px;background-color:#fff;box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;left:0;font-size:13px;z-index:50;overflow:hidden}.input-option{line-height:15px;display:flex;align-items:center;padding:7px 15px;border-bottom:solid 1px #efe9f2;-webkit-user-select:none;user-select:none;transition:ease .3s}.input-option-focused{background-color:#592371}.input-option:hover{background-color:#f3eaf9;cursor:pointer}.input-option-scroll{padding:0 3px;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px #e9eaeb;width:100%;margin-top:2px}.input-option-scroll-focused{background-color:#cfbcd7}.input-option-scroll-btns{border-top:solid 1px #e9eaeb;padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:#fff;border:solid 1px #e9eaeb;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:8px;font-size:26px;height:26px;width:26px}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon-s{color:#e9eaeb;font-size:17px}.input-internalicon-m{color:#e9eaeb;font-size:20px}.input-internalicon-l{color:#e9eaeb;font-size:24px}.label{font-size:14px;line-height:20px;font-weight:400;color:#0a0d12;margin-bottom:8px}.inputlabel-mini{font-size:12.5px;line-height:15px}.inputlabel-s{font-size:14px}.inputlabel-m{font-size:16px}.inputlabel-l{font-size:17px}.fakeinput{border-radius:8px;overflow:hidden;border:solid 1px #e9eaeb;display:flex;align-items:center;font-size:13px;padding-left:5px;-webkit-user-select:none;user-select:none;background-color:#fff;transition:ease .3s;height:40px}.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:#d5d7da}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:#e9eaeb;color:#252b37}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:#e9eaeb}.fakeinput-button:disabled{background-color:#e9eaeb;color:#f04438}.fakeinput-button:enabled:hover{cursor:pointer;background-color:#cfbcd7;color:#fff}.fakeinput-button:enabled:active{background-color:#4a1d5e}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:#e9eaeb}.fakeinput:focus-within{box-shadow:0 0 3px #63277d}.fakeinput:focus-within button{background-color:#592371;color:#fff}.fakeinput:focus-within button:enabled:hover{cursor:pointer;background-color:#cfbcd7;color:#fff}.fakeinput:focus-within button:enabled:active{background-color:#4f1f64}.fakeinput:hover{border-color:#a4a7ae;cursor:text}.activeselect{border-color:#4f1f64}.inputpadnone{padding:0}.inputpadmini{padding:4px 5px}.inputpad0{padding:5px 10px}.inputpad1{padding:10px 15px}.inputpad2{padding:10px 20px}.errorinput{border-color:#f04438}.t-disabled{color:#d5d7da;padding:5px;text-align:center}.disabledinput{background-color:#fafafa -disabled;color:#252b37}.disabledinput ::ng-deep input{color:#252b37}.editor{border:none;border-radius:8px}.editor ::ng-deep .NgxEditor__MenuBar{border-top-left-radius:4px;border-top-right-radius:4px;border-bottom:1px solid #e9eaeb}.editor ::ng-deep .NgxEditor__Content{min-height:100px}.editor ::ng-deep .NgxEditor{border-top-left-radius:0;border-top-right-radius:0;background-color:transparent;border:none}.editor.onfocus ::ng-deep .NgxEditor__MenuBar{display:none}.editor.onfocus:focus-within ::ng-deep .NgxEditor__MenuBar{display:flex}.fakeinput-files{display:flex;align-items:center;border:dashed #e9eaeb 1px;padding:2px;border-radius:8px}.input-files{display:flex;align-items:center;flex-wrap:wrap;padding:0 10px;width:100%;min-height:30px}.input-file{display:flex;align-items:center;padding:0 5px;font-size:14px;height:30px;overflow:hidden;background-color:#fff;width:fit-content;border-radius:8px;margin:2px;border:solid 1px #f79009;transition:ease .3s}.input-file:hover{cursor:pointer;color:#592371}.input-file i{width:18px;height:18px;font-size:18px;color:#e9eaeb;margin-right:5px}.inputlabel{display:flex;align-items:center}.f-primary{color:#592371}.f{color:#cfbcd7}.f-secondary{color:#752bb0}.f-error{color:#f04438}.f-grey{color:#d5d7da}.font-error{color:#f04438}.tip{color:#592371}.item-disabled{color:#d5d7da}.item-disabled:hover{background-color:#fff;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: ButtonComponent, 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: SearcherComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-searcher', imports: [CommonModule, FormsModule, AsyncPipe, ButtonComponent], 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 font-error\">{{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:#592371;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:#fff;box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;border:solid 1px #e9eaeb;border-radius:5px;font-size:13px;z-index:150;overflow:hidden}\n", ":host{width:100%}.input-container{flex:1 1;padding:3px;overflow:hidden}.pad-s{padding:0}.pad-l{padding:5px}.input-options{position:absolute;border-radius:8px;background-color:#fff;box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;left:0;font-size:13px;z-index:50;overflow:hidden}.input-option{line-height:15px;display:flex;align-items:center;padding:7px 15px;border-bottom:solid 1px #efe9f2;-webkit-user-select:none;user-select:none;transition:ease .3s}.input-option-focused{background-color:#592371}.input-option:hover{background-color:#f3eaf9;cursor:pointer}.input-option-scroll{padding:0 3px;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px #e9eaeb;width:100%;margin-top:2px}.input-option-scroll-focused{background-color:#cfbcd7}.input-option-scroll-btns{border-top:solid 1px #e9eaeb;padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:#fff;border:solid 1px #e9eaeb;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:8px;font-size:26px;height:26px;width:26px}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon-s{color:#e9eaeb;font-size:17px}.input-internalicon-m{color:#e9eaeb;font-size:20px}.input-internalicon-l{color:#e9eaeb;font-size:24px}.label{font-size:14px;line-height:20px;font-weight:400;color:#0a0d12;margin-bottom:8px}.inputlabel-mini{font-size:12.5px;line-height:15px}.inputlabel-s{font-size:14px}.inputlabel-m{font-size:16px}.inputlabel-l{font-size:17px}.fakeinput{border-radius:8px;overflow:hidden;border:solid 1px #e9eaeb;display:flex;align-items:center;font-size:13px;padding-left:5px;-webkit-user-select:none;user-select:none;background-color:#fff;transition:ease .3s;height:40px}.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:#d5d7da}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:#e9eaeb;color:#252b37}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:#e9eaeb}.fakeinput-button:disabled{background-color:#e9eaeb;color:#f04438}.fakeinput-button:enabled:hover{cursor:pointer;background-color:#cfbcd7;color:#fff}.fakeinput-button:enabled:active{background-color:#4a1d5e}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:#e9eaeb}.fakeinput:focus-within{box-shadow:0 0 3px #63277d}.fakeinput:focus-within button{background-color:#592371;color:#fff}.fakeinput:focus-within button:enabled:hover{cursor:pointer;background-color:#cfbcd7;color:#fff}.fakeinput:focus-within button:enabled:active{background-color:#4f1f64}.fakeinput:hover{border-color:#a4a7ae;cursor:text}.activeselect{border-color:#4f1f64}.inputpadnone{padding:0}.inputpadmini{padding:4px 5px}.inputpad0{padding:5px 10px}.inputpad1{padding:10px 15px}.inputpad2{padding:10px 20px}.errorinput{border-color:#f04438}.t-disabled{color:#d5d7da;padding:5px;text-align:center}.disabledinput{background-color:#fafafa -disabled;color:#252b37}.disabledinput ::ng-deep input{color:#252b37}.editor{border:none;border-radius:8px}.editor ::ng-deep .NgxEditor__MenuBar{border-top-left-radius:4px;border-top-right-radius:4px;border-bottom:1px solid #e9eaeb}.editor ::ng-deep .NgxEditor__Content{min-height:100px}.editor ::ng-deep .NgxEditor{border-top-left-radius:0;border-top-right-radius:0;background-color:transparent;border:none}.editor.onfocus ::ng-deep .NgxEditor__MenuBar{display:none}.editor.onfocus:focus-within ::ng-deep .NgxEditor__MenuBar{display:flex}.fakeinput-files{display:flex;align-items:center;border:dashed #e9eaeb 1px;padding:2px;border-radius:8px}.input-files{display:flex;align-items:center;flex-wrap:wrap;padding:0 10px;width:100%;min-height:30px}.input-file{display:flex;align-items:center;padding:0 5px;font-size:14px;height:30px;overflow:hidden;background-color:#fff;width:fit-content;border-radius:8px;margin:2px;border:solid 1px #f79009;transition:ease .3s}.input-file:hover{cursor:pointer;color:#592371}.input-file i{width:18px;height:18px;font-size:18px;color:#e9eaeb;margin-right:5px}.inputlabel{display:flex;align-items:center}.f-primary{color:#592371}.f{color:#cfbcd7}.f-secondary{color:#752bb0}.f-error{color:#f04438}.f-grey{color:#d5d7da}.font-error{color:#f04438}.tip{color:#592371}.item-disabled{color:#d5d7da}.item-disabled:hover{background-color:#fff;cursor:not-allowed}\n"] }]
+        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i1$2.Overlay }, { type: i1$2.OverlayPositionBuilder }, { type: i0.ViewContainerRef }], propDecorators: { icon: [{
+                type: Input
+            }], iconColor: [{
+                type: Input
+            }], internalIcon: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], error: [{
+                type: Input
+            }], tip: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], showSelected: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], searchFn: [{
+                type: Input
+            }], itemDisplayFn: [{
+                type: Input
+            }], itemIsEnabledFn: [{
+                type: Input
+            }], manualSearch: [{
+                type: Input
+            }], selectedItem: [{
+                type: Input
+            }], selectedItemChange: [{
+                type: Output
+            }], toggleButton: [{
+                type: ViewChild,
+                args: ['inputwrapp']
+            }], dropdownTemplateRef: [{
+                type: ViewChild,
+                args: ['dropdownTemplate']
+            }] } });
+
+const MODAL_DATA = 'MODAL_DATA';
+const MODAL_COMPONENT = 'MODAL_COMPONENT';
+const MODAL_CONFIG = 'MODAL_CONFIG';
+const MODAL_CLOSE_EVENT = 'modalClosed';
+const MODAL_CLOSE_REQUEST = 'modalCloserRequested';
+
+class UiModalRef {
+    overlayRef;
+    modalService;
+    _afterClosed = new Subject();
+    constructor(overlayRef, modalService) {
+        this.overlayRef = overlayRef;
+        this.modalService = modalService;
+    }
+    close(result = null) {
+        this.modalService.close(this.overlayRef, result);
+        this._afterClosed.next({ status: result != null, data: result });
+        this._afterClosed.complete();
+    }
+    closeFloating(result = null) {
+        this.modalService.closeFloating(this.overlayRef, result);
+        this._afterClosed.next({ status: result != null, data: result });
+        this._afterClosed.complete();
+    }
+    afterClosed() {
+        return this._afterClosed.asObservable();
+    }
+}
+
+class SideModalComponent {
+    modalRef;
+    component;
+    congif;
+    injector;
+    modal;
+    overlayRef; // lo setea el servicio
+    state = 'visible';
+    show = true;
+    myConfig = {};
+    ready = false;
+    title = '';
+    portalOutlet;
+    constructor(modalRef, component, congif, injector, modal) {
+        this.modalRef = modalRef;
+        this.component = component;
+        this.congif = congif;
+        this.injector = injector;
+        this.modal = modal;
+        this.myConfig = congif;
+    }
+    ngOnInit() {
+        if (this.overlayRef) {
+            this.overlayRef.hostElement.addEventListener(MODAL_CLOSE_REQUEST, () => {
+                this.close();
+            });
+        }
+    }
+    ngAfterViewInit() {
+        const childInjector = Injector.create({
+            providers: [
+                { provide: UiModalRef, useValue: this.modalRef },
+                { provide: MODAL_DATA, useValue: this.congif.data }
+            ],
+            parent: this.injector
+        });
+        const portal = new ComponentPortal(this.component, null, childInjector);
+        this.portalOutlet.attachComponentPortal(portal);
+    }
+    closeOuside() {
+        if (!this.congif.preventCloseingOutside === true) {
+            this.close();
+        }
+    }
+    close() {
+        this.state = 'hidden';
+    }
+    onAnimationDone(event) {
+        if (event.toState === 'hidden' && event.triggerName === 'sideModal') {
+            this.overlayRef.dispose();
+        }
+    }
+    save() {
+        this.modal.triggerSave();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SideModalComponent, deps: [{ token: UiModalRef }, { token: MODAL_COMPONENT }, { token: MODAL_CONFIG }, { token: i0.Injector }, { token: UiModalService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: SideModalComponent, isStandalone: true, selector: "app-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\" (@sideModal.done)=\"onAnimationDone($event)\" class=\"sidemodal\" [style.width]=\"myConfig.width??'60%'\" (click)=\"$event.stopPropagation()\">\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    <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:32px;height:32px}.sidemodal{position:fixed;right:0;top:0;height:100%;background-color:#fff;display:flex;flex-direction:column;padding-top:28px}.sidemodal-header{height:32px;width:100%;padding:0 32px;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 #d5d7da}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i2.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: ButtonComponent, 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: SideModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-side-modal', imports: [PortalModule, ButtonComponent], animations: [sideModal, fadeBackdrop], template: "<div  [@fadeBackdrop]=\"state\" class=\"backdrop\" (click)=\"closeOuside()\">   \r\n</div>\r\n<div [@sideModal]=\"state\" (@sideModal.done)=\"onAnimationDone($event)\" class=\"sidemodal\" [style.width]=\"myConfig.width??'60%'\" (click)=\"$event.stopPropagation()\">\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    <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:32px;height:32px}.sidemodal{position:fixed;right:0;top:0;height:100%;background-color:#fff;display:flex;flex-direction:column;padding-top:28px}.sidemodal-header{height:32px;width:100%;padding:0 32px;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 #d5d7da}\n"] }]
+        }], ctorParameters: () => [{ type: UiModalRef, decorators: [{
+                    type: Inject,
+                    args: [UiModalRef]
+                }] }, { type: i0.Type, decorators: [{
+                    type: Inject,
+                    args: [MODAL_COMPONENT]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MODAL_CONFIG]
+                }] }, { type: i0.Injector }, { type: UiModalService }], propDecorators: { portalOutlet: [{
+                type: ViewChild,
+                args: [CdkPortalOutlet, { static: true }]
+            }] } });
+
+class ModalComponent {
+    modalRef;
+    component;
+    congif;
+    injector;
+    myConfig = {};
+    ready = false;
+    title = '';
+    portalOutlet;
+    constructor(modalRef, component, congif, injector) {
+        this.modalRef = modalRef;
+        this.component = component;
+        this.congif = congif;
+        this.injector = injector;
+        this.myConfig = congif;
+    }
+    ngAfterViewInit() {
+        const childInjector = Injector.create({
+            providers: [
+                { provide: UiModalRef, useValue: this.modalRef },
+                { provide: MODAL_DATA, useValue: this.congif.data }
+            ],
+            parent: this.injector
+        });
+        const portal = new ComponentPortal(this.component, null, childInjector);
+        this.portalOutlet.attachComponentPortal(portal);
+    }
+    closeOuside() {
+        if (!this.congif.preventCloseingOutside === true) {
+            this.modalRef.closeFloating(null);
+        }
+    }
+    close() {
+        this.modalRef.closeFloating(null);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ModalComponent, 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: ModalComponent, isStandalone: true, selector: "app-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:#fff;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:#592371;height:63px;border-bottom:solid 1px #592371}@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: i2.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: ButtonComponent, 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: ModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-modal', imports: [CommonModule, PortalModule, ButtonComponent], 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:#fff;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:#592371;height:63px;border-bottom:solid 1px #592371}@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"] }]
+        }], ctorParameters: () => [{ type: UiModalRef, decorators: [{
+                    type: Inject,
+                    args: [UiModalRef]
+                }] }, { type: i0.Type, decorators: [{
+                    type: Inject,
+                    args: [MODAL_COMPONENT]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MODAL_CONFIG]
+                }] }, { type: i0.Injector }], propDecorators: { portalOutlet: [{
+                type: ViewChild,
+                args: [CdkPortalOutlet, { static: true }]
+            }] } });
+
+class UiModalService {
+    overlay = inject(Overlay);
+    envInjector = inject(EnvironmentInjector);
+    openFloatingModal(component, config = {}) {
+        return this.openModal(component, config, true);
+    }
+    openSideModal(component, config = {}) {
+        return this.openModal(component, config, false);
+    }
+    openModal(component, config = {}, isFloating = false) {
+        const overlayConfig = this.createOverlayConfig(isFloating);
+        const overlayRef = this.overlay.create(overlayConfig);
+        const modalRef = new UiModalRef(overlayRef, this);
+        const injector = this.createModalInjector(overlayRef, modalRef, component, config);
+        if (isFloating) {
+            const modalPortal = new ComponentPortal(ModalComponent, null, injector);
+            overlayRef.attach(modalPortal);
+        }
+        else {
+            const modalPortal = new ComponentPortal(SideModalComponent, null, injector);
+            const componentRef = overlayRef.attach(modalPortal);
+            componentRef.instance.overlayRef = overlayRef;
+        }
+        return modalRef;
+    }
+    close(overlayRef, result = null) {
+        overlayRef.hostElement.dispatchEvent(new CustomEvent(MODAL_CLOSE_REQUEST, { detail: result }));
+    }
+    closeFloating(overlayRef, result = null) {
+        overlayRef.backdropElement?.dispatchEvent(new CustomEvent(MODAL_CLOSE_EVENT, { detail: result }));
+        overlayRef.dispose();
+    }
+    _save$ = new Subject();
+    save$ = this._save$.asObservable();
+    triggerSave() {
+        this._save$.next();
+    }
+    createOverlayConfig(isFloating) {
+        const positionStrategy = isFloating
+            ? this.overlay.position().global().left()
+            : this.overlay.position().global().right();
+        return {
+            hasBackdrop: true,
+            backdropClass: 'cdk-overlay-dark-backdrop',
+            positionStrategy,
+            scrollStrategy: this.overlay.scrollStrategies.block(),
+            disposeOnNavigation: true,
+        };
+    }
+    createModalInjector(overlayRef, modalRef, component, config) {
+        return Injector.create({
+            providers: [
+                { provide: OverlayRef, useValue: overlayRef },
+                { provide: UiModalRef, useValue: modalRef },
+                { provide: MODAL_COMPONENT, useValue: component },
+                { provide: MODAL_CONFIG, useValue: config }
+            ],
+            parent: this.envInjector,
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UiModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UiModalService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UiModalService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class TinyAlertComponent {
+    modalRef;
+    data;
+    constructor(inData, modalRef) {
+        this.modalRef = modalRef;
+        this.data = inData.alert;
+    }
+    response = {};
+    close(value) {
+        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: "lib-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:#717680}.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:#f04438}@media (max-width: 767px){.floating-close{top:0;right:-5px}}\n"], dependencies: [{ kind: "component", type: ButtonComponent, 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: 'lib-tiny-alert', imports: [ButtonComponent], 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:#717680}.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:#f04438}@media (max-width: 767px){.floating-close{top:0;right:-5px}}\n"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MODAL_DATA]
+                }] }, { type: UiModalRef, decorators: [{
+                    type: Inject,
+                    args: [UiModalRef]
+                }] }] });
+
+class TinyAlertService {
+    modal = inject(UiModalService);
+    showAlert(data) {
+        return new Promise((resolve) => {
+            this.modal.openFloatingModal(TinyAlertComponent, {
+                data: { alert: data }
+            }).afterClosed().subscribe(result => {
+                resolve({
+                    value: result?.status,
+                    data: result?.data
+                });
+            });
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TinyAlertService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TinyAlertService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TinyAlertService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AlertContainerComponent, ButtonComponent, CheckboxComponent, FormWrapperComponent, InputComponent, MODAL_CLOSE_EVENT, MODAL_CLOSE_REQUEST, MODAL_COMPONENT, MODAL_CONFIG, MODAL_DATA, NameInitsPipe, PushAlertService, SearcherComponent, SelectComponent, SkeletonLoaderComponent, TableComponent, TinyAlertService, ToggleButtonComponent, ToolTipDirective, UiModalRef, UiModalService, animatedRow, fadeAndRise, fadeBackdrop, highlightRow, pushTop, sideModal, simpleFade };
+//# sourceMappingURL=ui-core-abv.mjs.map