ui-core-abv 0.8.8 → 0.9.0

package/fesm2022/ui-core-abv.mjs

@@ -4,7 +4,7 @@ import * as i0 from '@angular/core';
 import { Input, Component, EventEmitter, Output, Directive, forwardRef, InjectionToken, Optional, Inject, Injectable, inject, ChangeDetectorRef, Pipe, ViewContainerRef, ElementRef, ViewChild, createComponent, HostListener, ViewChildren, Host, DestroyRef, signal, computed, output, effect, TemplateRef, ContentChild, Injector, EnvironmentInjector, HostBinding, input, contentChildren } from '@angular/core';
 import * as i1$1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule, FormBuilder, Validators, ReactiveFormsModule, FormArray } from '@angular/forms';
-import { BehaviorSubject, Subject, debounceTime, distinctUntilChanged, tap, switchMap, of, finalize, map, isObservable, from, Subscription } from 'rxjs';
+import { BehaviorSubject, Subject, debounceTime, distinctUntilChanged, switchMap, of, finalize, map, isObservable, from, Subscription } from 'rxjs';
 import { HttpClient } from '@angular/common/http';
 import { Overlay, OverlayRef } from '@angular/cdk/overlay';
 import * as i1$2 from '@angular/cdk/portal';
@@ -124,8 +124,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Input
             }] } });
 
-const base$c = createValueAccessor();
-class UicCheckboxComponent extends base$c {
+const base$d = createValueAccessor();
+class UicCheckboxComponent extends base$d {
     icon = ''; // Icono externo
     iconColor = 'black';
     label = '';
@@ -376,6 +376,7 @@ const DICTIONARY_EN = {
         clear_tip: 'Clear',
         empty: 'No items to show',
         without_selected: 'No selected items',
+        already_selected: 'This item is already selected',
     },
     alerts: {
         success_title: 'Operation successful',
@@ -728,6 +729,7 @@ const DICTIONARY_ES = {
         clear_tip: 'Limpiar',
         empty: 'No hay elementos para mostrar',
         without_selected: 'Sin elementos seleccionados',
+        already_selected: 'Este elemento ya fue seleccionado',
     },
     alerts: {
         success_title: 'Operacion exitosa',
@@ -1022,8 +1024,92 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 }]
         }] });
 
-const base$b = createValueAccessor();
-class UicDatePickerComponent extends base$b {
+const DEFAULT_POSITIONS$1 = [
+    { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },
+    { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' },
+];
+class UicOverlayHandle {
+    overlayRef;
+    constructor(overlayRef) {
+        this.overlayRef = overlayRef;
+    }
+    get isOpen() {
+        return !!this.overlayRef && this.overlayRef.hasAttached();
+    }
+    get overlayElement() {
+        return this.overlayRef.overlayElement;
+    }
+    updatePosition() {
+        this.overlayRef.updatePosition();
+    }
+    close() {
+        this.overlayRef.dispose();
+    }
+}
+class UicOverlayDropdownService {
+    overlay = inject(Overlay);
+    open(config) {
+        const positions = config.positions ?? this.getPreferredPositions(config.origin);
+        const width = config.width === 'auto' ? undefined : config.width ?? config.origin.offsetWidth;
+        const positionStrategy = this.overlay
+            .position()
+            .flexibleConnectedTo(config.origin)
+            .withPositions(positions)
+            .withFlexibleDimensions(config.flexibleDimensions ?? true)
+            .withPush(false);
+        const overlayRef = this.overlay.create({
+            positionStrategy,
+            width,
+            hasBackdrop: true,
+            backdropClass: 'cdk-overlay-transparent-backdrop',
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+        });
+        const portal = new TemplatePortal(config.template, config.viewContainerRef);
+        overlayRef.attach(portal);
+        overlayRef.backdropClick().subscribe(() => {
+            if (config.onBackdropClick) {
+                config.onBackdropClick();
+            }
+            else {
+                overlayRef.dispose();
+            }
+        });
+        if (config.onKeydown) {
+            overlayRef.keydownEvents().subscribe(event => config.onKeydown(event));
+        }
+        if (config.onClose) {
+            overlayRef.detachments().subscribe(() => config.onClose());
+        }
+        if (config.autoReposition ?? true) {
+            this.observeSizeChanges(overlayRef);
+        }
+        return new UicOverlayHandle(overlayRef);
+    }
+    observeSizeChanges(overlayRef) {
+        if (typeof ResizeObserver === 'undefined')
+            return;
+        const resizeObserver = new ResizeObserver(() => overlayRef.updatePosition());
+        resizeObserver.observe(overlayRef.overlayElement);
+        overlayRef.detachments().subscribe(() => resizeObserver.disconnect());
+    }
+    getPreferredPositions(origin) {
+        if (typeof window === 'undefined')
+            return DEFAULT_POSITIONS$1;
+        const rect = origin.getBoundingClientRect();
+        const spaceBelow = window.innerHeight - rect.bottom;
+        const spaceAbove = rect.top;
+        return spaceBelow >= spaceAbove ? DEFAULT_POSITIONS$1 : [...DEFAULT_POSITIONS$1].reverse();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicOverlayDropdownService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicOverlayDropdownService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicOverlayDropdownService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+const base$c = createValueAccessor();
+class UicDatePickerComponent extends base$c {
     icon = ''; // Icono externo
     iconColor = 'black';
     internalIcon = ''; //Icono interno
@@ -1039,7 +1125,7 @@ class UicDatePickerComponent extends base$b {
     justMonth = false;
     monthDay = 'first';
     calendarTemplate;
-    overlayRef;
+    overlayHandle;
     // Fijos
     months = Array.from({ length: 12 }, (_, i) => new Date(2000, i, 1).toLocaleString('default', { month: 'short' }));
     today = new Date();
@@ -1058,7 +1144,7 @@ class UicDatePickerComponent extends base$b {
     get inputPlaceholder() {
         return this.justMonth ? 'mm/yyyy' : 'dd/mm/yyyy';
     }
-    overlay = inject(Overlay);
+    overlayS = inject(UicOverlayDropdownService);
     vcr = inject(ViewContainerRef);
     host = inject((ElementRef));
     ngOnInit() {
@@ -1080,30 +1166,21 @@ class UicDatePickerComponent extends base$b {
         }
     }
     // --- Overlay ---
-    overlayPositions = [
-        { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },
-        { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' },
-    ];
     openCalendar() {
         if (this.disabled)
             return;
-        if (this.overlayRef) {
+        if (this.overlayHandle?.isOpen) {
             this.closeCalendar();
         }
-        const positionStrategy = this.overlay.position()
-            .flexibleConnectedTo(this.host.nativeElement.querySelector('.fakeinput'))
-            .withPositions(this.overlayPositions)
-            .withFlexibleDimensions(false)
-            .withPush(false);
-        this.overlayRef = this.overlay.create({
-            positionStrategy,
-            hasBackdrop: true,
-            backdropClass: 'cdk-overlay-transparent-backdrop',
-            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+        const input = this.host.nativeElement.querySelector('.fakeinput');
+        this.overlayHandle = this.overlayS.open({
+            origin: input,
+            template: this.calendarTemplate,
+            viewContainerRef: this.vcr,
+            width: 'auto',
+            flexibleDimensions: false,
+            onClose: () => this.onTouched(),
         });
-        const portal = new TemplatePortal(this.calendarTemplate, this.vcr);
-        this.overlayRef.attach(portal);
-        this.overlayRef.backdropClick().subscribe(() => this.closeCalendar());
         this.view = this.justMonth ? 'months' : 'days';
         if (this.justMonth) {
             this.decadeRange = this.getDecadeRange();
@@ -1111,11 +1188,7 @@ class UicDatePickerComponent extends base$b {
         this.setCurrentViewDate(this.getInitialViewDate());
     }
     closeCalendar() {
-        if (this.overlayRef) {
-            this.onTouched();
-            this.overlayRef.dispose();
-            this.overlayRef = null;
-        }
+        this.overlayHandle?.close();
     }
     get monthName() {
         return this.selectedDate.toLocaleString('default', { month: 'long' });
@@ -1586,8 +1659,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 }]
         }] });
 
-const base$a = createValueAccessor();
-class UicFileInputComponent extends base$a {
+const base$b = createValueAccessor();
+class UicFileInputComponent extends base$b {
     icon = ''; // Icono externo
     iconColor = 'black';
     internalIcon = ''; //Icono interno
@@ -1877,17 +1950,8 @@ class UicInputComponent {
     // FUNCTIONS
     disabled = false;
     loading = 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: UicInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicInputComponent, isStandalone: true, selector: "ui-input", inputs: { icon: "icon", iconColor: "iconColor", internalIcon: "internalIcon", internalIconColor: "internalIconColor", size: "size", label: "label", error: "error", tip: "tip", disabled: "disabled", loading: "loading" }, outputs: { clickButton: "clickButton" }, ngImport: i0, template: "\r\n<ui-input-wrapper\r\n    [icon]=\"icon\"\r\n    [iconColor]=\"iconColor\"\r\n    [label]=\"label\"\r\n    [error]=\"error\"\r\n    [tip]=\"tip\"\r\n    [disabled]=\"disabled\">    \r\n    <div class=\"fakeinput\" [ngClass]=\"{'errorinput':error, 'disabledinput':disabled,'loading-input':loading}\">\r\n        @if (internalIcon) {\r\n            <i class=\"input-internalicon {{internalIcon}} f-{{internalIconColor}}\" ></i>\r\n        }\r\n        <div class=\"input-container\" >\r\n            <ng-content></ng-content>\r\n        </div>     \r\n    </div>\r\n    <span class=\"char-counter\" style=\"padding-top: 1px;\" >\r\n        <ng-content select=\"[counter]\"></ng-content>\r\n    </span>\r\n</ui-input-wrapper>", styles: [":host{width:100%}.input-container{flex:1 1;overflow:hidden}.f-extralight{font-weight:300;color:var(--grey-500)}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden;display:flex;flex-direction:column}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.option-group-header{padding:.25rem .5rem 2px;font-size:.75rem;font-weight:600;color:var(--grey-500);text-transform:uppercase;letter-spacing:.05em;pointer-events:none;-webkit-user-select:none;user-select:none}.option-group-header:not(:first-child){border-top:1px solid var(--grey-200);margin-top:.25rem}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--secondary-100)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-disabled{opacity:.55;cursor:not-allowed}.input-option-disabled:hover{background-color:transparent;cursor:not-allowed}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;min-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}.select-searcher{width:100%;display:flex;gap:5px;padding:.25rem;border-bottom:1px solid var(--grey-200);background-color:var(--white)}.select-searcher>input{flex:1 1;padding:3px 5px;border:solid 1px var(--grey-200);margin:0 auto;border-radius:4px}.select-searcher>input:focus{outline:none;box-shadow:0 0 0 3px var(--secondary-alpha);border-color:var(--primary-500)}.option-text-highlight ::ng-deep mark{background-color:var(--secondary-200);color:inherit;padding:0;border-radius:2px}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: InputWrapperComponent, selector: "ui-input-wrapper", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicInputComponent, isStandalone: true, selector: "ui-input", inputs: { icon: "icon", iconColor: "iconColor", internalIcon: "internalIcon", internalIconColor: "internalIconColor", size: "size", label: "label", error: "error", tip: "tip", disabled: "disabled", loading: "loading" }, ngImport: i0, template: "\r\n<ui-input-wrapper\r\n    [icon]=\"icon\"\r\n    [iconColor]=\"iconColor\"\r\n    [label]=\"label\"\r\n    [error]=\"error\"\r\n    [tip]=\"tip\"\r\n    [disabled]=\"disabled\">    \r\n    <div class=\"fakeinput\" [ngClass]=\"{'errorinput':error, 'disabledinput':disabled,'loading-input':loading}\">\r\n        @if (internalIcon) {\r\n            <i class=\"input-internalicon {{internalIcon}} f-{{internalIconColor}}\" ></i>\r\n        }\r\n        <div class=\"input-container\" >\r\n            <ng-content></ng-content>\r\n        </div>     \r\n    </div>\r\n    <span class=\"char-counter\" style=\"padding-top: 1px;\" >\r\n        <ng-content select=\"[counter]\"></ng-content>\r\n    </span>\r\n</ui-input-wrapper>", styles: [":host{width:100%}.input-container{flex:1 1;overflow:hidden}.f-extralight{font-weight:300;color:var(--grey-500)}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden;display:flex;flex-direction:column}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.option-group-header{padding:.25rem .5rem 2px;font-size:.75rem;font-weight:600;color:var(--grey-500);text-transform:uppercase;letter-spacing:.05em;pointer-events:none;-webkit-user-select:none;user-select:none}.option-group-header:not(:first-child){border-top:1px solid var(--grey-200);margin-top:.25rem}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--secondary-100)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-disabled{opacity:.55;cursor:not-allowed}.input-option-disabled:hover{background-color:transparent;cursor:not-allowed}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;min-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}.select-searcher{width:100%;display:flex;gap:5px;padding:.25rem;border-bottom:1px solid var(--grey-200);background-color:var(--white)}.select-searcher>input{flex:1 1;padding:3px 5px;border:solid 1px var(--grey-200);margin:0 auto;border-radius:4px}.select-searcher>input:focus{outline:none;box-shadow:0 0 0 3px var(--secondary-alpha);border-color:var(--primary-500)}.option-text-highlight ::ng-deep mark{background-color:var(--secondary-200);color:inherit;padding:0;border-radius:2px}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: InputWrapperComponent, selector: "ui-input-wrapper", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicInputComponent, decorators: [{
             type: Component,
@@ -1912,12 +1976,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Input
             }], loading: [{
                 type: Input
-            }], clickButton: [{
-                type: Output
             }] } });
 
-const base$9 = createValueAccessor();
-class UicMultySelectComponent extends base$9 {
+const base$a = createValueAccessor();
+class UicMultySelectComponent extends base$a {
     icon = ''; // Icono externo
     iconColor = 'primary'; //color de ícono externo
     internalIcon = ''; //Icono interno
@@ -1999,12 +2061,8 @@ class UicMultySelectComponent extends base$9 {
         return Array.from(map.entries()).map(([label, options]) => ({ label: label || null, options }));
     }
     dropdownTemplate;
-    overlayRef;
-    overlayPositions = [
-        { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },
-        { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' },
-    ];
-    overlay = inject(Overlay);
+    overlayHandle;
+    overlayS = inject(UicOverlayDropdownService);
     vcr = inject(ViewContainerRef);
     host = inject((ElementRef));
     ngOnChanges(changes) {
@@ -2016,33 +2074,19 @@ class UicMultySelectComponent extends base$9 {
     openList() {
         if (this.disabled || this.loading)
             return;
-        if (this.overlayRef) {
+        if (this.overlayHandle?.isOpen) {
             this.closeList();
         }
         const input = this.host.nativeElement.querySelector('.fakeinput');
-        const width = input.offsetWidth;
-        const positionStrategy = this.overlay.position()
-            .flexibleConnectedTo(input)
-            .withPositions(this.overlayPositions)
-            .withFlexibleDimensions(true)
-            .withPush(false);
-        this.overlayRef = this.overlay.create({
-            positionStrategy,
-            width,
-            hasBackdrop: true,
-            backdropClass: 'cdk-overlay-transparent-backdrop',
-            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+        this.overlayHandle = this.overlayS.open({
+            origin: input,
+            template: this.dropdownTemplate,
+            viewContainerRef: this.vcr,
+            onClose: () => this.onTouched(),
         });
-        const portal = new TemplatePortal(this.dropdownTemplate, this.vcr);
-        this.overlayRef.attach(portal);
-        this.overlayRef.backdropClick().subscribe(() => this.closeList());
     }
     closeList() {
-        if (this.overlayRef) {
-            this.onTouched();
-            this.overlayRef.dispose();
-            this.overlayRef = null;
-        }
+        this.overlayHandle?.close();
     }
     writeValue(value) {
         super.writeValue(value ?? []);
@@ -2107,6 +2151,182 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 args: ['dropdownTemplate']
             }] } });
 
+class UicSearchResolverHandle {
+    config;
+    searchSubject = new Subject();
+    results$;
+    constructor(config) {
+        this.config = config;
+        this.results$ = this.searchSubject.pipe(debounceTime(config.debounceMs ?? 300), distinctUntilChanged(), switchMap(query => {
+            const searchFn = config.getSearchFn();
+            if (query.length < config.getMinimumLength() || !searchFn) {
+                config.onLoadingChange?.(false);
+                return of([]);
+            }
+            config.onLoadingChange?.(true);
+            return searchFn(query).pipe(finalize(() => config.onLoadingChange?.(false)));
+        }));
+    }
+    search(query) {
+        this.searchSubject.next(query);
+    }
+}
+class UicSearchResolverService {
+    create(config) {
+        return new UicSearchResolverHandle(config);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSearchResolverService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSearchResolverService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSearchResolverService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+const base$9 = createValueAccessor();
+class UicMultySearcherComponent extends base$9 {
+    icon = ''; // Icono externo
+    iconColor = 'primary'; //color de ícono externo
+    internalIcon = 'ri-search-2-line'; //Icono interno
+    // TEXTO
+    label = '';
+    error = '';
+    tip = '';
+    // FUNCTIONS
+    disabled = false;
+    loading = false;
+    minimumSearchLength = 3;
+    placeholder = 'common.search_ellipsis';
+    searchFn;
+    itemDisplayFn = item => String(item);
+    itemIsEnabledFn = () => true;
+    manualSearch = false;
+    push = inject(UicPushAlertService);
+    i18n = inject(UicTranslateService);
+    searchResolver = inject(UicSearchResolverService).create({
+        getMinimumLength: () => this.minimumSearchLength,
+        getSearchFn: () => this.searchFn,
+        onLoadingChange: loading => this.watingApi = loading,
+    });
+    results$ = this.searchResolver.results$;
+    selectedItems = [];
+    searchText = '';
+    watingApi = false;
+    overlayS = inject(UicOverlayDropdownService);
+    vcr = inject(ViewContainerRef);
+    host = inject((ElementRef));
+    onSearchChange(value) {
+        this.searchText = value;
+        if (!this.manualSearch) {
+            this.searchResolver.search(value);
+        }
+    }
+    triggerSearch() {
+        this.searchResolver.search(this.searchText);
+    }
+    selectItem(item) {
+        if (this.itemIsEnabledFn && !this.itemIsEnabledFn(item)) {
+            return;
+        }
+        if (this.selectedItems.some(selected => selected['id'] === item['id'])) {
+            this.push.warning(this.i18n.translate('searcher.already_selected'));
+            this.clearSearch();
+            this.closeList();
+            return;
+        }
+        this.selectedItems = [...this.selectedItems, item];
+        this.notifyChange(this.selectedItems);
+        this.clearSearch();
+        this.closeList();
+    }
+    removeItem(index) {
+        if (this.disabled)
+            return;
+        this.selectedItems = this.selectedItems.filter((_, i) => i !== index);
+        this.notifyChange(this.selectedItems);
+    }
+    clearSearch() {
+        this.searchText = '';
+        this.searchResolver.search('');
+    }
+    // --- Overlay ---
+    dropdownTemplate;
+    overlayHandle;
+    openList() {
+        if (this.disabled || this.loading)
+            return;
+        if (this.overlayHandle?.isOpen) {
+            this.closeList();
+        }
+        const input = this.host.nativeElement.querySelector('.fakeinput');
+        if (!input)
+            return;
+        this.overlayHandle = this.overlayS.open({
+            origin: input,
+            template: this.dropdownTemplate,
+            viewContainerRef: this.vcr,
+            onClose: () => this.onTouched(),
+        });
+    }
+    closeList() {
+        this.overlayHandle?.close();
+    }
+    writeValue(value) {
+        const normalized = value ?? [];
+        super.writeValue(normalized);
+        this.selectedItems = normalized;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicMultySearcherComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicMultySearcherComponent, isStandalone: true, selector: "ui-multy-searcher", inputs: { icon: "icon", iconColor: "iconColor", internalIcon: "internalIcon", label: "label", error: "error", tip: "tip", disabled: "disabled", loading: "loading", minimumSearchLength: "minimumSearchLength", placeholder: "placeholder", searchFn: "searchFn", itemDisplayFn: "itemDisplayFn", itemIsEnabledFn: "itemIsEnabledFn", manualSearch: "manualSearch" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => UicMultySearcherComponent),
+                multi: true
+            }
+        ], viewQueries: [{ propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ui-input-wrapper\n    [icon]=\"icon\"\n    [iconColor]=\"iconColor\"\n    [label]=\"label\"\n    [error]=\"error\"\n    [tip]=\"tip\"\n    [disabled]=\"disabled\">\n    <div class=\"fakeinput-wrapp\">\n        <!-- INPUT -->\n        <div class=\"fakeinput\" #fakeinput\n            [ngClass]=\"{'errorinput':error, 'disabledinput':disabled, 'loading-input':watingApi||loading}\">\n            @if (internalIcon) {\n                <i class=\"input-internalicon {{internalIcon}}\"></i>\n            }\n            <div class=\"input-container\">\n                <input\n                  [disabled]=\"disabled\"\n                  (focus)=\"openList()\"\n                  type=\"text\"\n                  (keydown.enter)=\"triggerSearch()\"\n                  (keydown.escape)=\"clearSearch()\"\n                  [(ngModel)]=\"searchText\"\n                  (ngModelChange)=\"onSearchChange($event)\"\n                  [placeholder]=\"placeholder | uicTranslate\"\n                />\n            </div>\n            @if (!disabled) {\n                @if (manualSearch) {\n                    <ui-button [iconOnly]=\"true\" size=\"s\" type=\"ghost\" icon=\"ri-search-line\" (click)=\"triggerSearch()\"></ui-button>\n                }\n                <ui-button [iconOnly]=\"true\" size=\"s\" type=\"ghost\" icon=\"ri-eraser-line\" (click)=\"clearSearch()\"></ui-button>\n            }\n        </div>\n    </div>\n\n    <!-- CHIPS -->\n    <div class=\"search-results\">\n        @for (item of selectedItems; track $index) {\n            <div class=\"search-result\" [class.disabledresult]=\"disabled\">\n                <div [innerHTML]=\"itemDisplayFn?itemDisplayFn(item):''\"></div>\n                @if (!disabled) {\n                    <ui-button (click)=\"removeItem($index)\" [iconOnly]=\"true\" icon=\"ri-delete-bin-line\" type=\"ghost\" color=\"red\" size=\"s\"></ui-button>\n                }\n            </div>\n        }\n        @if (disabled && selectedItems.length == 0) {\n            <div class=\"search-result-empty\">\n                {{'searcher.without_selected' | uicTranslate}}\n            </div>\n        }\n    </div>\n</ui-input-wrapper>\n\n<!-- DESPLEGABLE -->\n<ng-template #dropdownTemplate>\n    @if (results$ | async; as items) {\n        <div class=\"input-options\">\n            <div class=\"input-option-scroll\">\n                @for (item of items; track $index) {\n                    <div class=\"input-option\" [class.item-disabled]=\"itemIsEnabledFn?!itemIsEnabledFn(item):false\"\n                        (click)=\"selectItem(item)\"\n                        [innerHTML]=\"itemDisplayFn?itemDisplayFn(item):''\">\n                    </div>\n                } @empty {\n                    <div class=\"t-disabled\">{{'searcher.empty' | uicTranslate}}</div>\n                }\n            </div>\n        </div>\n    }\n</ng-template>\n", styles: [".search-results{display:flex;flex-direction:column;gap:5px;margin-top:5px}.search-results:empty{margin-top:0}.search-result{font-size:14px;line-height:16px;min-height:33px;padding:2px 2px 2px 10px;border:solid 1px var(--grey-300);border-radius:4px;display:flex;background-color:var(--grey-50);align-items:center;justify-content:space-between}.disabledresult{color:var(--disabled-color)}.search-result-empty{font-size:14px;line-height:16px;min-height:33px;padding:2px 2px 2px 10px;border:dashed 1px var(--grey-300);border-radius:4px;display:flex;color:var(--grey-400);align-items:center;justify-content:center}\n", ":host{width:100%}.input-container{flex:1 1;overflow:hidden}.f-extralight{font-weight:300;color:var(--grey-500)}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden;display:flex;flex-direction:column}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.option-group-header{padding:.25rem .5rem 2px;font-size:.75rem;font-weight:600;color:var(--grey-500);text-transform:uppercase;letter-spacing:.05em;pointer-events:none;-webkit-user-select:none;user-select:none}.option-group-header:not(:first-child){border-top:1px solid var(--grey-200);margin-top:.25rem}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--secondary-100)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-disabled{opacity:.55;cursor:not-allowed}.input-option-disabled:hover{background-color:transparent;cursor:not-allowed}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;min-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}.select-searcher{width:100%;display:flex;gap:5px;padding:.25rem;border-bottom:1px solid var(--grey-200);background-color:var(--white)}.select-searcher>input{flex:1 1;padding:3px 5px;border:solid 1px var(--grey-200);margin:0 auto;border-radius:4px}.select-searcher>input:focus{outline:none;box-shadow:0 0 0 3px var(--secondary-alpha);border-color:var(--primary-500)}.option-text-highlight ::ng-deep mark{background-color:var(--secondary-200);color:inherit;padding:0;border-radius:2px}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: InputWrapperComponent, selector: "ui-input-wrapper", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicMultySearcherComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-multy-searcher', imports: [CommonModule, FormsModule, UicButtonComponent, InputWrapperComponent, UicTranslatePipe], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => UicMultySearcherComponent),
+                            multi: true
+                        }
+                    ], template: "<ui-input-wrapper\n    [icon]=\"icon\"\n    [iconColor]=\"iconColor\"\n    [label]=\"label\"\n    [error]=\"error\"\n    [tip]=\"tip\"\n    [disabled]=\"disabled\">\n    <div class=\"fakeinput-wrapp\">\n        <!-- INPUT -->\n        <div class=\"fakeinput\" #fakeinput\n            [ngClass]=\"{'errorinput':error, 'disabledinput':disabled, 'loading-input':watingApi||loading}\">\n            @if (internalIcon) {\n                <i class=\"input-internalicon {{internalIcon}}\"></i>\n            }\n            <div class=\"input-container\">\n                <input\n                  [disabled]=\"disabled\"\n                  (focus)=\"openList()\"\n                  type=\"text\"\n                  (keydown.enter)=\"triggerSearch()\"\n                  (keydown.escape)=\"clearSearch()\"\n                  [(ngModel)]=\"searchText\"\n                  (ngModelChange)=\"onSearchChange($event)\"\n                  [placeholder]=\"placeholder | uicTranslate\"\n                />\n            </div>\n            @if (!disabled) {\n                @if (manualSearch) {\n                    <ui-button [iconOnly]=\"true\" size=\"s\" type=\"ghost\" icon=\"ri-search-line\" (click)=\"triggerSearch()\"></ui-button>\n                }\n                <ui-button [iconOnly]=\"true\" size=\"s\" type=\"ghost\" icon=\"ri-eraser-line\" (click)=\"clearSearch()\"></ui-button>\n            }\n        </div>\n    </div>\n\n    <!-- CHIPS -->\n    <div class=\"search-results\">\n        @for (item of selectedItems; track $index) {\n            <div class=\"search-result\" [class.disabledresult]=\"disabled\">\n                <div [innerHTML]=\"itemDisplayFn?itemDisplayFn(item):''\"></div>\n                @if (!disabled) {\n                    <ui-button (click)=\"removeItem($index)\" [iconOnly]=\"true\" icon=\"ri-delete-bin-line\" type=\"ghost\" color=\"red\" size=\"s\"></ui-button>\n                }\n            </div>\n        }\n        @if (disabled && selectedItems.length == 0) {\n            <div class=\"search-result-empty\">\n                {{'searcher.without_selected' | uicTranslate}}\n            </div>\n        }\n    </div>\n</ui-input-wrapper>\n\n<!-- DESPLEGABLE -->\n<ng-template #dropdownTemplate>\n    @if (results$ | async; as items) {\n        <div class=\"input-options\">\n            <div class=\"input-option-scroll\">\n                @for (item of items; track $index) {\n                    <div class=\"input-option\" [class.item-disabled]=\"itemIsEnabledFn?!itemIsEnabledFn(item):false\"\n                        (click)=\"selectItem(item)\"\n                        [innerHTML]=\"itemDisplayFn?itemDisplayFn(item):''\">\n                    </div>\n                } @empty {\n                    <div class=\"t-disabled\">{{'searcher.empty' | uicTranslate}}</div>\n                }\n            </div>\n        </div>\n    }\n</ng-template>\n", styles: [".search-results{display:flex;flex-direction:column;gap:5px;margin-top:5px}.search-results:empty{margin-top:0}.search-result{font-size:14px;line-height:16px;min-height:33px;padding:2px 2px 2px 10px;border:solid 1px var(--grey-300);border-radius:4px;display:flex;background-color:var(--grey-50);align-items:center;justify-content:space-between}.disabledresult{color:var(--disabled-color)}.search-result-empty{font-size:14px;line-height:16px;min-height:33px;padding:2px 2px 2px 10px;border:dashed 1px var(--grey-300);border-radius:4px;display:flex;color:var(--grey-400);align-items:center;justify-content:center}\n", ":host{width:100%}.input-container{flex:1 1;overflow:hidden}.f-extralight{font-weight:300;color:var(--grey-500)}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden;display:flex;flex-direction:column}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.option-group-header{padding:.25rem .5rem 2px;font-size:.75rem;font-weight:600;color:var(--grey-500);text-transform:uppercase;letter-spacing:.05em;pointer-events:none;-webkit-user-select:none;user-select:none}.option-group-header:not(:first-child){border-top:1px solid var(--grey-200);margin-top:.25rem}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--secondary-100)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-disabled{opacity:.55;cursor:not-allowed}.input-option-disabled:hover{background-color:transparent;cursor:not-allowed}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;min-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}.select-searcher{width:100%;display:flex;gap:5px;padding:.25rem;border-bottom:1px solid var(--grey-200);background-color:var(--white)}.select-searcher>input{flex:1 1;padding:3px 5px;border:solid 1px var(--grey-200);margin:0 auto;border-radius:4px}.select-searcher>input:focus{outline:none;box-shadow:0 0 0 3px var(--secondary-alpha);border-color:var(--primary-500)}.option-text-highlight ::ng-deep mark{background-color:var(--secondary-200);color:inherit;padding:0;border-radius:2px}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"] }]
+        }], propDecorators: { icon: [{
+                type: Input
+            }], iconColor: [{
+                type: Input
+            }], internalIcon: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], error: [{
+                type: Input
+            }], tip: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], minimumSearchLength: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], searchFn: [{
+                type: Input
+            }], itemDisplayFn: [{
+                type: Input
+            }], itemIsEnabledFn: [{
+                type: Input
+            }], manualSearch: [{
+                type: Input
+            }], dropdownTemplate: [{
+                type: ViewChild,
+                args: ['dropdownTemplate']
+            }] } });
+
 const PHONE_COUNTRIES = [
     { name: 'Argentina', iso2: 'ar', dialCode: '54' },
     { name: 'Australia', iso2: 'au', dialCode: '61' },
@@ -2174,13 +2394,9 @@ class UicPhoneInputComponent extends base$8 {
     changeRegistered = false;
     _countries = PHONE_COUNTRIES;
     host = inject((ElementRef));
-    overlay = inject(Overlay);
+    overlayS = inject(UicOverlayDropdownService);
     vcr = inject(ViewContainerRef);
-    overlayRef;
-    overlayPositions = [
-        { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },
-        { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' }
-    ];
+    overlayHandle;
     constructor() {
         super();
         this.resetCountryLists();
@@ -2294,40 +2510,29 @@ class UicPhoneInputComponent extends base$8 {
             return;
         }
         const trigger = this.host.nativeElement.querySelector('.fakeinput');
-        const width = trigger?.getBoundingClientRect().width ?? undefined;
-        const positionStrategy = this.overlay
-            .position()
-            .flexibleConnectedTo(trigger ?? this.host.nativeElement)
-            .withPositions(this.overlayPositions)
-            .withFlexibleDimensions(false)
-            .withPush(false);
-        this.overlayRef = this.overlay.create({
-            positionStrategy,
-            width,
-            hasBackdrop: true,
-            backdropClass: 'cdk-overlay-transparent-backdrop',
-            scrollStrategy: this.overlay.scrollStrategies.reposition()
+        this.overlayHandle = this.overlayS.open({
+            origin: trigger ?? this.host.nativeElement,
+            template: this.dropdownTemplate,
+            viewContainerRef: this.vcr,
+            width: trigger?.getBoundingClientRect().width ?? 'auto',
+            flexibleDimensions: false,
+            onClose: () => {
+                this.dropdownOpen = false;
+                this.resetSearch();
+            },
+            onKeydown: event => {
+                if (event.key === 'Escape') {
+                    event.preventDefault();
+                    this.closeDropdown();
+                }
+            },
         });
-        const portal = new TemplatePortal(this.dropdownTemplate, this.vcr);
-        this.overlayRef.attach(portal);
         this.filteredCountries = [...this.countries];
         this.dropdownOpen = true;
-        this.overlayRef.backdropClick().subscribe(() => this.closeDropdown());
-        this.overlayRef.keydownEvents().subscribe(event => {
-            if (event.key === 'Escape') {
-                event.preventDefault();
-                this.closeDropdown();
-            }
-        });
         setTimeout(() => this.searchInput?.nativeElement.focus());
     }
     closeDropdown() {
-        this.dropdownOpen = false;
-        this.resetSearch();
-        if (this.overlayRef) {
-            this.overlayRef.dispose();
-            this.overlayRef = undefined;
-        }
+        this.overlayHandle?.close();
     }
     resetSearch() {
         this.searchTerm = '';
@@ -2584,32 +2789,26 @@ class UicSearcherComponent extends base$7 {
     manualSearch = false;
     stateless = false;
     pickedItem = new EventEmitter();
-    searchSubject = new Subject();
-    results$ = this.searchSubject.pipe(debounceTime(300), distinctUntilChanged(), tap(() => this.watingApi = true), switchMap(v => {
-        if (v.length < this.minimumSearchLength) {
-            this.watingApi = false;
-            return of([]);
-        }
-        if (!this.searchFn)
-            return of([]);
-        return this.searchFn(v).pipe(finalize(() => this.watingApi = false));
-    }));
-    ;
+    searchResolver = inject(UicSearchResolverService).create({
+        getMinimumLength: () => this.minimumSearchLength,
+        getSearchFn: () => this.searchFn,
+        onLoadingChange: loading => this.watingApi = loading,
+    });
+    results$ = this.searchResolver.results$;
     selectedOption = null;
     searchText = '';
     watingApi = false;
-    overlay = inject(Overlay);
+    overlayS = inject(UicOverlayDropdownService);
     vcr = inject(ViewContainerRef);
     host = inject((ElementRef));
-    resizeObserver;
     onSearchChange(value) {
         this.searchText = value;
         if (!this.manualSearch) {
-            this.searchSubject.next(value);
+            this.searchResolver.search(value);
         }
     }
     triggerSearch() {
-        this.searchSubject.next(this.searchText);
+        this.searchResolver.search(this.searchText);
     }
     selectItem(item) {
         if (!this.itemIsEnabledFn || this.itemIsEnabledFn(item)) {
@@ -2627,7 +2826,7 @@ class UicSearcherComponent extends base$7 {
     }
     clearSearch() {
         this.searchText = '';
-        this.searchSubject.next('');
+        this.searchResolver.search('');
     }
     unselect() {
         this.selectedOption = null;
@@ -2635,63 +2834,24 @@ class UicSearcherComponent extends base$7 {
     }
     // --- Overlay ---
     dropdownTemplate;
-    overlayRef;
-    overlayPositions = [
-        { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },
-        { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' },
-    ];
+    overlayHandle;
     openList() {
         if (this.disabled || this.loading)
             return;
-        if (this.overlayRef) {
+        if (this.overlayHandle?.isOpen) {
             this.closeList();
         }
         const input = this.host.nativeElement.querySelector('.fakeinput');
         if (!input)
             return;
-        const width = input.offsetWidth;
-        const preferredPositions = this.getPreferredPositions(input);
-        const positionStrategy = this.overlay.position()
-            .flexibleConnectedTo(input)
-            .withPositions(preferredPositions)
-            .withFlexibleDimensions(true)
-            .withPush(false);
-        this.overlayRef = this.overlay.create({
-            positionStrategy,
-            width,
-            hasBackdrop: true,
-            backdropClass: 'cdk-overlay-transparent-backdrop',
-            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+        this.overlayHandle = this.overlayS.open({
+            origin: input,
+            template: this.dropdownTemplate,
+            viewContainerRef: this.vcr,
         });
-        const portal = new TemplatePortal(this.dropdownTemplate, this.vcr);
-        this.overlayRef.attach(portal);
-        this.observeOverlaySizeChanges();
-        this.overlayRef.backdropClick().subscribe(() => this.closeList());
     }
     closeList() {
-        if (this.overlayRef) {
-            this.resizeObserver?.disconnect();
-            this.resizeObserver = undefined;
-            this.overlayRef.dispose();
-            this.overlayRef = null;
-        }
-    }
-    observeOverlaySizeChanges() {
-        if (!this.overlayRef || typeof ResizeObserver === 'undefined')
-            return;
-        this.resizeObserver?.disconnect();
-        this.resizeObserver = new ResizeObserver(() => {
-            this.overlayRef?.updatePosition();
-        });
-        this.resizeObserver.observe(this.overlayRef.overlayElement);
-    }
-    getPreferredPositions(origin) {
-        if (typeof window === 'undefined')
-            return this.overlayPositions;
-        const rect = origin.getBoundingClientRect();
-        const spaceBelow = window.innerHeight - rect.bottom;
-        const spaceAbove = rect.top;
-        return spaceBelow >= spaceAbove ? this.overlayPositions : [...this.overlayPositions].reverse();
+        this.overlayHandle?.close();
     }
     writeValue(value) {
         super.writeValue(value);
@@ -2780,15 +2940,11 @@ class UicSelectComponent extends base$6 {
     nullable = false;
     options = [];
     dropdownTemplate;
-    overlayRef;
+    overlayHandle;
     searchTerm = '';
     activeOptionIndex = -1;
-    overlayPositions = [
-        { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },
-        { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' },
-    ];
     selectedOption = null;
-    overlay = inject(Overlay);
+    overlayS = inject(UicOverlayDropdownService);
     vcr = inject(ViewContainerRef);
     host = inject((ElementRef));
     ngOnChanges(changes) {
@@ -2839,30 +2995,20 @@ class UicSelectComponent extends base$6 {
     openList() {
         if (this.disabled || this.loading)
             return;
-        if (this.overlayRef) {
+        if (this.overlayHandle?.isOpen) {
             this.closeList();
         }
         const input = this.host.nativeElement.querySelector('.fakeinput');
-        const width = input.offsetWidth;
-        const positionStrategy = this.overlay.position()
-            .flexibleConnectedTo(input)
-            .withPositions(this.overlayPositions)
-            .withFlexibleDimensions(true)
-            .withPush(false);
-        this.overlayRef = this.overlay.create({
-            positionStrategy,
-            width,
-            hasBackdrop: true,
-            backdropClass: 'cdk-overlay-transparent-backdrop',
-            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+        this.overlayHandle = this.overlayS.open({
+            origin: input,
+            template: this.dropdownTemplate,
+            viewContainerRef: this.vcr,
+            onKeydown: event => this.handleOverlayKeydown(event),
+            onClose: () => this.handleOverlayClosed(),
         });
-        const portal = new TemplatePortal(this.dropdownTemplate, this.vcr);
-        this.overlayRef.attach(portal);
         this.setInitialActiveOption();
         this.scrollActiveOptionIntoView();
         this.focusSearcher();
-        this.overlayRef.keydownEvents().subscribe(event => this.handleOverlayKeydown(event));
-        this.overlayRef.backdropClick().subscribe(() => this.closeList());
     }
     selectOption(option) {
         if (option?.disabled) {
@@ -2873,13 +3019,12 @@ class UicSelectComponent extends base$6 {
         this.notifyChange(option?.id ?? null);
     }
     closeList() {
-        if (this.overlayRef) {
-            this.onTouched();
-            this.overlayRef.dispose();
-            this.overlayRef = null;
-            this.searchTerm = '';
-            this.activeOptionIndex = -1;
-        }
+        this.overlayHandle?.close();
+    }
+    handleOverlayClosed() {
+        this.onTouched();
+        this.searchTerm = '';
+        this.activeOptionIndex = -1;
     }
     writeValue(value) {
         super.writeValue(value);
@@ -2928,17 +3073,17 @@ class UicSelectComponent extends base$6 {
         return highlighted;
     }
     focusSearcher() {
-        if (!this.showSearcher || !this.overlayRef) {
+        if (!this.showSearcher || !this.overlayHandle) {
             return;
         }
         setTimeout(() => {
-            const input = this.overlayRef?.overlayElement.querySelector('.select-searcher input');
+            const input = this.overlayHandle?.overlayElement.querySelector('.select-searcher input');
             input?.focus();
             input?.select();
         });
     }
     handleOverlayKeydown(event) {
-        if (!this.overlayRef)
+        if (!this.overlayHandle?.isOpen)
             return;
         if (event.key === 'ArrowDown') {
             event.preventDefault();
@@ -3019,10 +3164,10 @@ class UicSelectComponent extends base$6 {
         return !option.disabled;
     }
     scrollActiveOptionIntoView() {
-        if (!this.overlayRef || this.activeOptionIndex < 0)
+        if (!this.overlayHandle || this.activeOptionIndex < 0)
             return;
         setTimeout(() => {
-            const active = this.overlayRef?.overlayElement.querySelector(`[data-option-index="${this.activeOptionIndex}"]`);
+            const active = this.overlayHandle?.overlayElement.querySelector(`[data-option-index="${this.activeOptionIndex}"]`);
             active?.scrollIntoView({ block: 'nearest' });
         });
     }
@@ -3285,14 +3430,10 @@ class UicTimePickerComponent extends base$3 {
     hourOptions;
     minuteOptions;
     meridiemOptions;
-    overlayRef = null;
-    overlay = inject(Overlay);
+    overlayHandle;
+    overlayS = inject(UicOverlayDropdownService);
     vcr = inject(ViewContainerRef);
     host = inject((ElementRef));
-    overlayPositions = [
-        { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },
-        { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' },
-    ];
     // Listas para construir la hora
     hours12 = Array.from({ length: 12 }, (_, i) => i + 1); // 1..12
     minutes = [];
@@ -3341,39 +3482,28 @@ class UicTimePickerComponent extends base$3 {
     openOverlay() {
         if (this.disabled)
             return;
-        if (this.overlayRef) {
+        if (this.overlayHandle?.isOpen) {
             this.closeOverlay();
             return;
         }
         this.isOverlayOpen = true;
         const inputEl = this.host.nativeElement.querySelector('.fakeinput');
-        const width = inputEl?.clientWidth;
-        const positionStrategy = this.overlay
-            .position()
-            .flexibleConnectedTo(inputEl)
-            .withPositions(this.overlayPositions)
-            .withFlexibleDimensions(false)
-            .withPush(false);
-        this.overlayRef = this.overlay.create({
-            positionStrategy,
-            hasBackdrop: true,
-            backdropClass: 'cdk-overlay-transparent-backdrop',
-            scrollStrategy: this.overlay.scrollStrategies.reposition(),
-            width,
+        this.overlayHandle = this.overlayS.open({
+            origin: inputEl,
+            template: this.overlayTemplate,
+            viewContainerRef: this.vcr,
+            flexibleDimensions: false,
+            onBackdropClick: () => this.closeOverlay(true),
         });
-        const portal = new TemplatePortal(this.overlayTemplate, this.vcr);
-        this.overlayRef.attach(portal);
-        this.overlayRef.backdropClick().subscribe(() => this.closeOverlay(true));
         this.syncSelectionFromValue();
         setTimeout(() => this.scrollToSelection(), 0);
     }
     closeOverlay(commitSelection = false) {
-        if (this.overlayRef) {
+        if (this.overlayHandle?.isOpen) {
             if (commitSelection) {
                 this.commitOverlaySelection();
             }
-            this.overlayRef.dispose();
-            this.overlayRef = null;
+            this.overlayHandle.close();
             this.isOverlayOpen = false;
         }
     }
@@ -3497,7 +3627,7 @@ class UicTimePickerComponent extends base$3 {
         return { hour12, minute, meridiem };
     }
     scrollToSelection(retries = 3) {
-        if (!this.overlayRef || !this.overlayRef.hasAttached()) {
+        if (!this.overlayHandle?.isOpen) {
             return;
         }
         const hourScrolled = this.scrollColumn(this.hourOptions, this.hours12, this.selectedHour12);
@@ -3666,7 +3796,7 @@ class UicPoolOptionsComponent extends base$2 {
                 useExisting: forwardRef(() => UicPoolOptionsComponent),
                 multi: true
             }
-        ], usesInheritance: true, usesOnChanges: 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\">{{label}} </div>\r\n        }\r\n        <div>\r\n            <div class=\"pool-wrapper\" > \r\n                @for (opt of options; track opt.id) {\r\n                    <div (click)=\"updateOptions(opt.id??'')\" class=\"pool-option\"  [class.disabled-opt]=\"disabled\" [class.active-opt]=\"isSelected(opt.id??'')\">{{opt.text}}</div>\r\n                }\r\n    \r\n            </div>\r\n            <!-- BLOQUE DE LISTTA DETALLADA -->\r\n            @if(enabledListView && selectedValues.length > 0){\r\n                <h3 class=\"pool-selected-title\">{{listViewTitle | uicTranslate}}</h3>\r\n                <div>\r\n                    @for (item of selectedValues; track item.id) {\r\n                        <div class=\"pool-selected\"> \r\n                            <div class=\"pool-selected-label\">{{getItemName(item.id)}} </div>\r\n                            <div class=\"pool-selected-input\">\r\n                                <ui-input [disabled]=\"disabled\">\r\n                                    <input [disabled]=\"disabled\" [placeholder]=\"'common.detail' | uicTranslate\" type=\"text\" [value]=\"item.detail ?? ''\" (input)=\"updateDetail(item.id, $any($event.target).value)\">\r\n                                </ui-input>\r\n                                @if (!disabled) {\r\n                                    <div class=\"pool-selected-button\" (click)=\"updateOptions(item.id)\" >\r\n                                        <i class=\"ri-delete-bin-5-line\" ></i>\r\n                                    </div>\r\n                                }\r\n                            </div>\r\n                        </div>\r\n                    }\r\n                </div>\r\n            }\r\n        </div>\r\n        <!-- ALERTS -->\r\n        @if (error) {\r\n            <div class=\"fakeinput-alert f-red\">{{error}}</div>\r\n        }\r\n        @if (tip) {\r\n            <div class=\"fakeinput-alert tip\">{{tip}}</div>\r\n        }\r\n    </div>\r\n</div>\r\n", styles: [".pool-wrapper{display:flex;gap:var(--design-size-ref);flex-wrap:wrap}.pool-option{border:solid 1px var(--grey-300);color:var(--secondary-400);background-color:var(--secondary-50);font-size:.875rem;line-height:1.25rem;font-weight:400;padding:.5rem 1rem;border-radius:1rem;transition:ease .3s;-webkit-user-select:none;user-select:none;cursor:pointer}.pool-option:hover{border-color:var(--secondary-400)}.pool-selected-title{font-size:1.625rem;font-weight:600;line-height:calc(1.625rem + 4px);margin:1.5rem 0;color:var(--grey-950)}.pool-selected-label{margin-top:24px;font-size:.875rem;margin-bottom:.5rem}.pool-selected-input{display:flex;align-items:center;gap:16px}.pool-selected-button{height:calc(4 * var(--form-ref));aspect-ratio:1;border-radius:var(--button-radius);border:solid 1px var(--grey-300);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.25rem;transition:ease .3s}.pool-selected-button:hover{border-color:var(--red-400);color:var(--red-600)}.disabled-opt{background-color:var(--grey-200);border:none;cursor:not-allowed}.active-opt{background-color:var(--secondary-100);border:solid 1px var(--primary-400)}\n", ":host{width:100%}.input-container{flex:1 1;overflow:hidden}.f-extralight{font-weight:300;color:var(--grey-500)}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden;display:flex;flex-direction:column}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.option-group-header{padding:.25rem .5rem 2px;font-size:.75rem;font-weight:600;color:var(--grey-500);text-transform:uppercase;letter-spacing:.05em;pointer-events:none;-webkit-user-select:none;user-select:none}.option-group-header:not(:first-child){border-top:1px solid var(--grey-200);margin-top:.25rem}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--secondary-100)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-disabled{opacity:.55;cursor:not-allowed}.input-option-disabled:hover{background-color:transparent;cursor:not-allowed}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;min-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}.select-searcher{width:100%;display:flex;gap:5px;padding:.25rem;border-bottom:1px solid var(--grey-200);background-color:var(--white)}.select-searcher>input{flex:1 1;padding:3px 5px;border:solid 1px var(--grey-200);margin:0 auto;border-radius:4px}.select-searcher>input:focus{outline:none;box-shadow:0 0 0 3px var(--secondary-alpha);border-color:var(--primary-500)}.option-text-highlight ::ng-deep mark{background-color:var(--secondary-200);color:inherit;padding:0;border-radius:2px}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"], dependencies: [{ kind: "component", type: UicInputComponent, selector: "ui-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "disabled", "loading"], outputs: ["clickButton"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }] });
+        ], usesInheritance: true, usesOnChanges: 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\">{{label}} </div>\r\n        }\r\n        <div>\r\n            <div class=\"pool-wrapper\" > \r\n                @for (opt of options; track opt.id) {\r\n                    <div (click)=\"updateOptions(opt.id??'')\" class=\"pool-option\"  [class.disabled-opt]=\"disabled\" [class.active-opt]=\"isSelected(opt.id??'')\">{{opt.text}}</div>\r\n                }\r\n    \r\n            </div>\r\n            <!-- BLOQUE DE LISTTA DETALLADA -->\r\n            @if(enabledListView && selectedValues.length > 0){\r\n                <h3 class=\"pool-selected-title\">{{listViewTitle | uicTranslate}}</h3>\r\n                <div>\r\n                    @for (item of selectedValues; track item.id) {\r\n                        <div class=\"pool-selected\"> \r\n                            <div class=\"pool-selected-label\">{{getItemName(item.id)}} </div>\r\n                            <div class=\"pool-selected-input\">\r\n                                <ui-input [disabled]=\"disabled\">\r\n                                    <input [disabled]=\"disabled\" [placeholder]=\"'common.detail' | uicTranslate\" type=\"text\" [value]=\"item.detail ?? ''\" (input)=\"updateDetail(item.id, $any($event.target).value)\">\r\n                                </ui-input>\r\n                                @if (!disabled) {\r\n                                    <div class=\"pool-selected-button\" (click)=\"updateOptions(item.id)\" >\r\n                                        <i class=\"ri-delete-bin-5-line\" ></i>\r\n                                    </div>\r\n                                }\r\n                            </div>\r\n                        </div>\r\n                    }\r\n                </div>\r\n            }\r\n        </div>\r\n        <!-- ALERTS -->\r\n        @if (error) {\r\n            <div class=\"fakeinput-alert f-red\">{{error}}</div>\r\n        }\r\n        @if (tip) {\r\n            <div class=\"fakeinput-alert tip\">{{tip}}</div>\r\n        }\r\n    </div>\r\n</div>\r\n", styles: [".pool-wrapper{display:flex;gap:var(--design-size-ref);flex-wrap:wrap}.pool-option{border:solid 1px var(--grey-300);color:var(--secondary-400);background-color:var(--secondary-50);font-size:.875rem;line-height:1.25rem;font-weight:400;padding:.5rem 1rem;border-radius:1rem;transition:ease .3s;-webkit-user-select:none;user-select:none;cursor:pointer}.pool-option:hover{border-color:var(--secondary-400)}.pool-selected-title{font-size:1.625rem;font-weight:600;line-height:calc(1.625rem + 4px);margin:1.5rem 0;color:var(--grey-950)}.pool-selected-label{margin-top:24px;font-size:.875rem;margin-bottom:.5rem}.pool-selected-input{display:flex;align-items:center;gap:16px}.pool-selected-button{height:calc(4 * var(--form-ref));aspect-ratio:1;border-radius:var(--button-radius);border:solid 1px var(--grey-300);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.25rem;transition:ease .3s}.pool-selected-button:hover{border-color:var(--red-400);color:var(--red-600)}.disabled-opt{background-color:var(--grey-200);border:none;cursor:not-allowed}.active-opt{background-color:var(--secondary-100);border:solid 1px var(--primary-400)}\n", ":host{width:100%}.input-container{flex:1 1;overflow:hidden}.f-extralight{font-weight:300;color:var(--grey-500)}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden;display:flex;flex-direction:column}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.option-group-header{padding:.25rem .5rem 2px;font-size:.75rem;font-weight:600;color:var(--grey-500);text-transform:uppercase;letter-spacing:.05em;pointer-events:none;-webkit-user-select:none;user-select:none}.option-group-header:not(:first-child){border-top:1px solid var(--grey-200);margin-top:.25rem}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--secondary-100)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-disabled{opacity:.55;cursor:not-allowed}.input-option-disabled:hover{background-color:transparent;cursor:not-allowed}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;min-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}.select-searcher{width:100%;display:flex;gap:5px;padding:.25rem;border-bottom:1px solid var(--grey-200);background-color:var(--white)}.select-searcher>input{flex:1 1;padding:3px 5px;border:solid 1px var(--grey-200);margin:0 auto;border-radius:4px}.select-searcher>input:focus{outline:none;box-shadow:0 0 0 3px var(--secondary-alpha);border-color:var(--primary-500)}.option-text-highlight ::ng-deep mark{background-color:var(--secondary-200);color:inherit;padding:0;border-radius:2px}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"], dependencies: [{ kind: "component", type: UicInputComponent, selector: "ui-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "disabled", "loading"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicPoolOptionsComponent, decorators: [{
             type: Component,
@@ -4310,7 +4440,7 @@ class UicDynamicFormComponent {
         if (fieldType === 'checkbox' || fieldType === 'switch') {
             return false;
         }
-        if (fieldType === 'multyselect' || fieldType === 'repeater') {
+        if (fieldType === 'multyselect' || fieldType === 'multisearcher' || fieldType === 'repeater') {
             return [];
         }
         return null;
@@ -4755,7 +4885,7 @@ class UicDynamicFormComponent {
         recognition.start();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicDynamicFormComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicDynamicFormComponent, isStandalone: true, selector: "ui-dynamic-form", inputs: { fields: "fields", isSubForm: "isSubForm", form: "form", disabled: "disabled", externalValidationStates: "externalValidationStates", voiceToTextSilenceMs: "voiceToTextSilenceMs", cols: "cols", fileUidResolverFn: "fileUidResolverFn", selectOptionsResolver: "selectOptionsResolver", parentFormValues: "parentFormValues" }, outputs: { fieldBlur: "fieldBlur" }, ngImport: i0, template: "<div class=\"form\" [ngStyle]=\"{'--cols': cols, '--min': '180px'}\" [formGroup]=\"form\">\r\n  @for (state of visibleFieldStates(); track state.field.name) {\r\n    @let field = state.field;\r\n    @let control = state.control;\r\n    @let currentValue = state.value ?? '';\r\n    @let error = getControlErrorMessages(control, field)[0];\r\n\r\n    <div [style.grid-column]=\"getGridColumn(field)\" (focusout)=\"onFieldContainerFocusout(field, $event)\">\r\n      @if (['text', 'number'].includes(field.type)) {\r\n        @let inputColor = getInputColor(field, currentValue);\r\n        <ui-input\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [disabled]=\"!!control?.disabled\"\r\n          [internalIconColor]=\"inputColor\"\r\n          [internalIcon]=\"field.internalIcon || (currentValue !== '' ? getIconByColor(field, inputColor) : '')\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\">\r\n          <input #inp\r\n            [id]=\"field.name\"\r\n            [formControlName]=\"field.name\"\r\n            [type]=\"field.type\"\r\n            [step]=\"field.step\"\r\n            [min]=\"field.min\"\r\n            [max]=\"field.max\"\r\n            [minLength]=\"field.minLength||null\"\r\n            [maxlength]=\"field.maxLength||null\"\r\n            [placeholder]=\"field.placeholder??field.label\"/>\r\n          @if (field.maxLength && field.showCounter) {\r\n            <span counter>{{inp.value.length}} /{{field.maxLength}}</span>\r\n          }\r\n        </ui-input>\r\n      }\r\n      @if (field.type === 'textarea') {\r\n        <ui-input\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [disabled]=\"!!control?.disabled\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\">\r\n          <textarea #ta\r\n            [id]=\"field.name\"\r\n            [formControlName]=\"field.name\"\r\n            [minLength]=\"field.minLength||null\"\r\n            [maxlength]=\"field.maxLength||null\"\r\n            [textareaAutoresize]=\"field.textareaResize\"\r\n            [textareaAutoresizeMinRows]=\"field.resizeMinRows??1\"\r\n            [textareaAutoresizeMaxRows]=\"field.resizeMaxRows??5\"\r\n            [rows]=\"field.resizeMinRows??3\"\r\n            [placeholder]=\"field.placeholder??field.label\"\r\n          ></textarea>\r\n          @if (field.voiceToTextEnabled && !control?.disabled) {\r\n            @let listening = isListening(field.name);\r\n            <div class=\"speak-icon\" (click)=\"ta.focus()\">\r\n              <ui-button\r\n                [disabled]=\"listening\"\r\n                style=\"margin-bottom: 2px;\"\r\n                (click)=\"voiceToText(ta, field.name)\"\r\n                [icon]=\"listening?'ri-mic-fill':'ri-mic-line'\"\r\n                [type]=\"listening?'filled':'bordered'\"\r\n                size=\"s\"\r\n                [iconOnly]=\"true\"\r\n              ></ui-button>\r\n              @if (listening) {\r\n                <i class=\"ri-voiceprint-line\"></i>\r\n              }\r\n            </div>\r\n          }\r\n          @if (field.showCounter) {\r\n            <span counter>\r\n              {{ta.value.length}}\r\n              @if (field.maxLength) {\r\n                /{{field.maxLength}}\r\n              }\r\n            </span>\r\n          }\r\n        </ui-input>\r\n      }\r\n      @if (field.type === 'phone') {\r\n        <ui-phone-input\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [placeholder]=\"field.placeholder||field.label||''\"\r\n        >\r\n        </ui-phone-input>\r\n      }\r\n      @else if (field.type === 'date') {\r\n        <ui-date-picker\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [tip]=\"field.tip??''\"\r\n          [justMonth]=\"!!field.monthMode\"\r\n          [min]=\"field.minDate??''\"\r\n          [max]=\"field.maxDate??''\"\r\n          [monthDay]=\"field.monthDay||'first'\"\r\n          [formControlName]=\"field.name\"\r\n        ></ui-date-picker>\r\n      }\r\n      @else if (field.type === 'time') {\r\n        <ui-time-picker\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [tip]=\"field.tip??''\"\r\n          [interval]=\"field.timeInterval??5\"\r\n          [formControlName]=\"field.name\"\r\n        ></ui-time-picker>\r\n      }\r\n      @else if (field.type === 'select') {\r\n        <ui-select\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [loading]=\"field.loading??false\"\r\n          [nullable]=\"field.selectNullable??false\"\r\n          [showSubtitle]=\"field.showSubtitle??false\"\r\n          [searcherEnabled]=\"field.selectSearchEnabled??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [formControlName]=\"field.name\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-select>\r\n      }\r\n      @else if (field.type === 'multyselect') {\r\n        <ui-multy-select\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [tip]=\"field.tip??''\"\r\n          [formControlName]=\"field.name\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-multy-select>\r\n      }\r\n      @else if (field.type === 'searcher') {\r\n        <ui-searcher\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [searchFn]=\"getSearcherFn(field)\"\r\n          [itemDisplayFn]=\"getSearcherDisplayFn(field)\"\r\n          [itemIsEnabledFn]=\"getSearcherIsEnabledFn(field)\"\r\n          [placeholder]=\"field.placeholder??'common.search_ellipsis'\"\r\n          [error]=\"error\"\r\n        ></ui-searcher>\r\n      }\r\n      @else if (field.type === 'file') {\r\n        <ui-file-input\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [multy]=\"field.multyEnabled??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [fileTypes]=\"field.fileTypes??null\"\r\n          [fileUidResolverFn]=\"fileUidResolverFn\"\r\n          [formControlName]=\"field.name\"\r\n        ></ui-file-input>\r\n      }\r\n      @else if (['checkbox', 'switch'].includes(field.type)) {\r\n        <ui-checkbox\r\n          [label]=\"(field.label??'') + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [placeholder]=\"field.placeholder??''\"\r\n          [tip]=\"field.tip??''\"\r\n          [type]=\"field.type === 'checkbox' ? 'checkbox' : 'switch'\"\r\n        ></ui-checkbox>\r\n      }\r\n      @else if (field.type === 'radio') {\r\n        <ui-radio\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [tip]=\"field.tip??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [error]=\"error\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-radio>\r\n      }\r\n      @else if (field.type === 'slider') {\r\n        <ui-slider\r\n          [min]=\"field.min??0\"\r\n          [max]=\"field.max??100\"\r\n          [step]=\"field.sliderInterval??1\"\r\n          [markerCount]=\"field.sliderMarks??5\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [tip]=\"field.tip??''\"\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n        ></ui-slider>\r\n      }\r\n      @else if (field.type === 'pool') {\r\n        <ui-pool-options\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [multy]=\"field.multyEnabled??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [listViewTitle]=\"field.poolTitle??'common.selected'\"\r\n          [enabledListView]=\"field.poolEnabledListView||false\"\r\n          [formControlName]=\"field.name\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-pool-options>\r\n      }\r\n      @else if (field.type === 'repeater') {\r\n        <ui-repeater\r\n          [formArray]=\"asFormArray(control)\"\r\n          [field]=\"field\"\r\n          [cols]=\"cols\"\r\n          [error]=\"error\"\r\n          [fileUidResolverFn]=\"fileUidResolverFn\"\r\n          [selectOptionsResolver]=\"selectOptionsResolver\"\r\n          [parentForm]=\"form\"\r\n        ></ui-repeater>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".form{width:100%;display:grid;align-items:stretch;gap:1rem;padding-bottom:.75rem}@media (max-width: 479px){.form{grid-template-columns:1fr}}@media (min-width: 768px){.form{grid-template-columns:repeat(var(--cols),minmax(0,1fr))}}@media (min-width: 480px) and (max-width: 767px){.form{grid-template-columns:repeat(min(var(--cols),2),minmax(0,1fr))}}.form>*{min-width:0}h2{margin-top:1.5rem}.speak-icon{display:flex;width:100%;align-items:center;gap:10px}.speak-icon i{font-size:20px;color:var(--primary-500)}textarea{resize:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: UicDatePickerComponent, selector: "ui-date-picker", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "disabled", "label", "error", "tip", "max", "min", "justMonth", "monthDay"] }, { 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.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: UicSliderComponent, selector: "ui-slider", inputs: ["icon", "iconColor", "label", "error", "tip", "min", "max", "step", "markerCount", "disabled", "loading"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: UicPoolOptionsComponent, selector: "ui-pool-options", inputs: ["icon", "iconColor", "size", "label", "error", "tip", "disabled", "loading", "multy", "enabledListView", "listViewTitle", "options"] }, { kind: "component", type: UicTimePickerComponent, selector: "ui-time-picker", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "disabled", "label", "error", "tip", "interval"] }, { kind: "component", type: UicRadioComponent, selector: "ui-radio", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled", "loading", "options", "emptyText", "direction"] }, { kind: "component", type: UicSearcherComponent, selector: "ui-searcher", inputs: ["icon", "iconColor", "internalIcon", "size", "label", "error", "tip", "showSubtitle", "disabled", "loading", "minimumSearchLength", "showSelected", "placeholder", "searchFn", "itemDisplayFn", "itemIsEnabledFn", "manualSearch", "stateless"], outputs: ["pickedItem"] }, { kind: "component", type: UicMultySelectComponent, selector: "ui-multy-select", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "showSubtitle", "disabled", "nonSelectedText", "allSelectedText", "loading", "options"] }, { kind: "component", type: UicFileInputComponent, selector: "ui-file-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "disabled", "loading", "multy", "fileTypes", "fileUidResolverFn"] }, { kind: "component", type: UicSelectComponent, selector: "ui-select", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "showSubtitle", "disabled", "nonSelectedText", "noneText", "emptyText", "searcherEnabled", "loading", "nullable", "options"] }, { kind: "directive", type: UicTextareaAutoresizeDirective, selector: "[textareaAutoresize]", inputs: ["minRows", "maxRows", "textareaAutoresize"] }, { kind: "directive", type: UicTextareaAutoresizeMinRowsDirective, selector: "[textareaAutoresizeMinRows]", inputs: ["textareaAutoresizeMinRows"] }, { kind: "directive", type: UicTextareaAutoresizeMaxRowsDirective, selector: "[textareaAutoresizeMaxRows]", inputs: ["textareaAutoresizeMaxRows"] }, { kind: "component", type: UicInputComponent, selector: "ui-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "disabled", "loading"], outputs: ["clickButton"] }, { kind: "component", type: UicCheckboxComponent, selector: "ui-checkbox", inputs: ["icon", "iconColor", "label", "tip", "type", "placeholder", "loading", "noPadding", "disabled"] }, { kind: "component", type: UicPhoneInputComponent, selector: "ui-phone-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "placeholder", "disabled", "loading", "preferredCountries", "flagPath", "countries"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: UicRepeaterComponent, selector: "ui-repeater", inputs: ["formArray", "field", "cols", "error", "fileUidResolverFn", "selectOptionsResolver", "parentForm"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicDynamicFormComponent, isStandalone: true, selector: "ui-dynamic-form", inputs: { fields: "fields", isSubForm: "isSubForm", form: "form", disabled: "disabled", externalValidationStates: "externalValidationStates", voiceToTextSilenceMs: "voiceToTextSilenceMs", cols: "cols", fileUidResolverFn: "fileUidResolverFn", selectOptionsResolver: "selectOptionsResolver", parentFormValues: "parentFormValues" }, outputs: { fieldBlur: "fieldBlur" }, ngImport: i0, template: "<div class=\"form\" [ngStyle]=\"{'--cols': cols, '--min': '180px'}\" [formGroup]=\"form\">\r\n  @for (state of visibleFieldStates(); track state.field.name) {\r\n    @let field = state.field;\r\n    @let control = state.control;\r\n    @let currentValue = state.value ?? '';\r\n    @let error = getControlErrorMessages(control, field)[0];\r\n\r\n    <div [style.grid-column]=\"getGridColumn(field)\" (focusout)=\"onFieldContainerFocusout(field, $event)\">\r\n      @if (['text', 'number'].includes(field.type)) {\r\n        @let inputColor = getInputColor(field, currentValue);\r\n        <ui-input\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [disabled]=\"!!control?.disabled\"\r\n          [internalIconColor]=\"inputColor\"\r\n          [internalIcon]=\"field.internalIcon || (currentValue !== '' ? getIconByColor(field, inputColor) : '')\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\">\r\n          <input #inp\r\n            [id]=\"field.name\"\r\n            [formControlName]=\"field.name\"\r\n            [type]=\"field.type\"\r\n            [step]=\"field.step\"\r\n            [min]=\"field.min\"\r\n            [max]=\"field.max\"\r\n            [minLength]=\"field.minLength||null\"\r\n            [maxlength]=\"field.maxLength||null\"\r\n            [placeholder]=\"field.placeholder??field.label\"/>\r\n          @if (field.maxLength && field.showCounter) {\r\n            <span counter>{{inp.value.length}} /{{field.maxLength}}</span>\r\n          }\r\n        </ui-input>\r\n      }\r\n      @if (field.type === 'textarea') {\r\n        <ui-input\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [disabled]=\"!!control?.disabled\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\">\r\n          <textarea #ta\r\n            [id]=\"field.name\"\r\n            [formControlName]=\"field.name\"\r\n            [minLength]=\"field.minLength||null\"\r\n            [maxlength]=\"field.maxLength||null\"\r\n            [textareaAutoresize]=\"field.textareaResize\"\r\n            [textareaAutoresizeMinRows]=\"field.resizeMinRows??1\"\r\n            [textareaAutoresizeMaxRows]=\"field.resizeMaxRows??5\"\r\n            [rows]=\"field.resizeMinRows??3\"\r\n            [placeholder]=\"field.placeholder??field.label\"\r\n          ></textarea>\r\n          @if (field.voiceToTextEnabled && !control?.disabled) {\r\n            @let listening = isListening(field.name);\r\n            <div class=\"speak-icon\" (click)=\"ta.focus()\">\r\n              <ui-button\r\n                [disabled]=\"listening\"\r\n                style=\"margin-bottom: 2px;\"\r\n                (click)=\"voiceToText(ta, field.name)\"\r\n                [icon]=\"listening?'ri-mic-fill':'ri-mic-line'\"\r\n                [type]=\"listening?'filled':'bordered'\"\r\n                size=\"s\"\r\n                [iconOnly]=\"true\"\r\n              ></ui-button>\r\n              @if (listening) {\r\n                <i class=\"ri-voiceprint-line\"></i>\r\n              }\r\n            </div>\r\n          }\r\n          @if (field.showCounter) {\r\n            <span counter>\r\n              {{ta.value.length}}\r\n              @if (field.maxLength) {\r\n                /{{field.maxLength}}\r\n              }\r\n            </span>\r\n          }\r\n        </ui-input>\r\n      }\r\n      @if (field.type === 'phone') {\r\n        <ui-phone-input\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [placeholder]=\"field.placeholder||field.label||''\"\r\n        >\r\n        </ui-phone-input>\r\n      }\r\n      @else if (field.type === 'date') {\r\n        <ui-date-picker\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [tip]=\"field.tip??''\"\r\n          [justMonth]=\"!!field.monthMode\"\r\n          [min]=\"field.minDate??''\"\r\n          [max]=\"field.maxDate??''\"\r\n          [monthDay]=\"field.monthDay||'first'\"\r\n          [formControlName]=\"field.name\"\r\n        ></ui-date-picker>\r\n      }\r\n      @else if (field.type === 'time') {\r\n        <ui-time-picker\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [tip]=\"field.tip??''\"\r\n          [interval]=\"field.timeInterval??5\"\r\n          [formControlName]=\"field.name\"\r\n        ></ui-time-picker>\r\n      }\r\n      @else if (field.type === 'select') {\r\n        <ui-select\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [loading]=\"field.loading??false\"\r\n          [nullable]=\"field.selectNullable??false\"\r\n          [showSubtitle]=\"field.showSubtitle??false\"\r\n          [searcherEnabled]=\"field.selectSearchEnabled??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [formControlName]=\"field.name\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-select>\r\n      }\r\n      @else if (field.type === 'multyselect') {\r\n        <ui-multy-select\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [tip]=\"field.tip??''\"\r\n          [formControlName]=\"field.name\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-multy-select>\r\n      }\r\n      @else if (field.type === 'searcher') {\r\n        <ui-searcher\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [searchFn]=\"getSearcherFn(field)\"\r\n          [itemDisplayFn]=\"getSearcherDisplayFn(field)\"\r\n          [itemIsEnabledFn]=\"getSearcherIsEnabledFn(field)\"\r\n          [placeholder]=\"field.placeholder??'common.search_ellipsis'\"\r\n          [error]=\"error\"\r\n        ></ui-searcher>\r\n      }\r\n      @else if (field.type === 'multisearcher') {\r\n        <ui-multy-searcher\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [searchFn]=\"getSearcherFn(field)\"\r\n          [itemDisplayFn]=\"getSearcherDisplayFn(field)\"\r\n          [itemIsEnabledFn]=\"getSearcherIsEnabledFn(field)\"\r\n          [placeholder]=\"field.placeholder??'common.search_ellipsis'\"\r\n          [error]=\"error\"\r\n        ></ui-multy-searcher>\r\n      }\r\n      @else if (field.type === 'file') {\r\n        <ui-file-input\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [multy]=\"field.multyEnabled??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [fileTypes]=\"field.fileTypes??null\"\r\n          [fileUidResolverFn]=\"fileUidResolverFn\"\r\n          [formControlName]=\"field.name\"\r\n        ></ui-file-input>\r\n      }\r\n      @else if (['checkbox', 'switch'].includes(field.type)) {\r\n        <ui-checkbox\r\n          [label]=\"(field.label??'') + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [placeholder]=\"field.placeholder??''\"\r\n          [tip]=\"field.tip??''\"\r\n          [type]=\"field.type === 'checkbox' ? 'checkbox' : 'switch'\"\r\n        ></ui-checkbox>\r\n      }\r\n      @else if (field.type === 'radio') {\r\n        <ui-radio\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [tip]=\"field.tip??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [error]=\"error\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-radio>\r\n      }\r\n      @else if (field.type === 'slider') {\r\n        <ui-slider\r\n          [min]=\"field.min??0\"\r\n          [max]=\"field.max??100\"\r\n          [step]=\"field.sliderInterval??1\"\r\n          [markerCount]=\"field.sliderMarks??5\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [tip]=\"field.tip??''\"\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n        ></ui-slider>\r\n      }\r\n      @else if (field.type === 'pool') {\r\n        <ui-pool-options\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [multy]=\"field.multyEnabled??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [listViewTitle]=\"field.poolTitle??'common.selected'\"\r\n          [enabledListView]=\"field.poolEnabledListView||false\"\r\n          [formControlName]=\"field.name\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-pool-options>\r\n      }\r\n      @else if (field.type === 'repeater') {\r\n        <ui-repeater\r\n          [formArray]=\"asFormArray(control)\"\r\n          [field]=\"field\"\r\n          [cols]=\"cols\"\r\n          [error]=\"error\"\r\n          [fileUidResolverFn]=\"fileUidResolverFn\"\r\n          [selectOptionsResolver]=\"selectOptionsResolver\"\r\n          [parentForm]=\"form\"\r\n        ></ui-repeater>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".form{width:100%;display:grid;align-items:stretch;gap:1rem;padding-bottom:.75rem}@media (max-width: 479px){.form{grid-template-columns:1fr}}@media (min-width: 768px){.form{grid-template-columns:repeat(var(--cols),minmax(0,1fr))}}@media (min-width: 480px) and (max-width: 767px){.form{grid-template-columns:repeat(min(var(--cols),2),minmax(0,1fr))}}.form>*{min-width:0}h2{margin-top:1.5rem}.speak-icon{display:flex;width:100%;align-items:center;gap:10px}.speak-icon i{font-size:20px;color:var(--primary-500)}textarea{resize:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: UicDatePickerComponent, selector: "ui-date-picker", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "disabled", "label", "error", "tip", "max", "min", "justMonth", "monthDay"] }, { 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.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: UicSliderComponent, selector: "ui-slider", inputs: ["icon", "iconColor", "label", "error", "tip", "min", "max", "step", "markerCount", "disabled", "loading"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: UicPoolOptionsComponent, selector: "ui-pool-options", inputs: ["icon", "iconColor", "size", "label", "error", "tip", "disabled", "loading", "multy", "enabledListView", "listViewTitle", "options"] }, { kind: "component", type: UicTimePickerComponent, selector: "ui-time-picker", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "disabled", "label", "error", "tip", "interval"] }, { kind: "component", type: UicRadioComponent, selector: "ui-radio", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled", "loading", "options", "emptyText", "direction"] }, { kind: "component", type: UicSearcherComponent, selector: "ui-searcher", inputs: ["icon", "iconColor", "internalIcon", "size", "label", "error", "tip", "showSubtitle", "disabled", "loading", "minimumSearchLength", "showSelected", "placeholder", "searchFn", "itemDisplayFn", "itemIsEnabledFn", "manualSearch", "stateless"], outputs: ["pickedItem"] }, { kind: "component", type: UicMultySelectComponent, selector: "ui-multy-select", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "showSubtitle", "disabled", "nonSelectedText", "allSelectedText", "loading", "options"] }, { kind: "component", type: UicMultySearcherComponent, selector: "ui-multy-searcher", inputs: ["icon", "iconColor", "internalIcon", "label", "error", "tip", "disabled", "loading", "minimumSearchLength", "placeholder", "searchFn", "itemDisplayFn", "itemIsEnabledFn", "manualSearch"] }, { kind: "component", type: UicFileInputComponent, selector: "ui-file-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "disabled", "loading", "multy", "fileTypes", "fileUidResolverFn"] }, { kind: "component", type: UicSelectComponent, selector: "ui-select", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "showSubtitle", "disabled", "nonSelectedText", "noneText", "emptyText", "searcherEnabled", "loading", "nullable", "options"] }, { kind: "directive", type: UicTextareaAutoresizeDirective, selector: "[textareaAutoresize]", inputs: ["minRows", "maxRows", "textareaAutoresize"] }, { kind: "directive", type: UicTextareaAutoresizeMinRowsDirective, selector: "[textareaAutoresizeMinRows]", inputs: ["textareaAutoresizeMinRows"] }, { kind: "directive", type: UicTextareaAutoresizeMaxRowsDirective, selector: "[textareaAutoresizeMaxRows]", inputs: ["textareaAutoresizeMaxRows"] }, { kind: "component", type: UicInputComponent, selector: "ui-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "disabled", "loading"] }, { kind: "component", type: UicCheckboxComponent, selector: "ui-checkbox", inputs: ["icon", "iconColor", "label", "tip", "type", "placeholder", "loading", "noPadding", "disabled"] }, { kind: "component", type: UicPhoneInputComponent, selector: "ui-phone-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "placeholder", "disabled", "loading", "preferredCountries", "flagPath", "countries"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: UicRepeaterComponent, selector: "ui-repeater", inputs: ["formArray", "field", "cols", "error", "fileUidResolverFn", "selectOptionsResolver", "parentForm"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicDynamicFormComponent, decorators: [{
             type: Component,
@@ -4770,6 +4900,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         UicRadioComponent,
                         UicSearcherComponent,
                         UicMultySelectComponent,
+                        UicMultySearcherComponent,
                         UicFileInputComponent,
                         UicSelectComponent,
                         UicTextareaAutoresizeDirective,
@@ -4780,7 +4911,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         UicPhoneInputComponent,
                         FormsModule,
                         UicRepeaterComponent
-                    ], template: "<div class=\"form\" [ngStyle]=\"{'--cols': cols, '--min': '180px'}\" [formGroup]=\"form\">\r\n  @for (state of visibleFieldStates(); track state.field.name) {\r\n    @let field = state.field;\r\n    @let control = state.control;\r\n    @let currentValue = state.value ?? '';\r\n    @let error = getControlErrorMessages(control, field)[0];\r\n\r\n    <div [style.grid-column]=\"getGridColumn(field)\" (focusout)=\"onFieldContainerFocusout(field, $event)\">\r\n      @if (['text', 'number'].includes(field.type)) {\r\n        @let inputColor = getInputColor(field, currentValue);\r\n        <ui-input\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [disabled]=\"!!control?.disabled\"\r\n          [internalIconColor]=\"inputColor\"\r\n          [internalIcon]=\"field.internalIcon || (currentValue !== '' ? getIconByColor(field, inputColor) : '')\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\">\r\n          <input #inp\r\n            [id]=\"field.name\"\r\n            [formControlName]=\"field.name\"\r\n            [type]=\"field.type\"\r\n            [step]=\"field.step\"\r\n            [min]=\"field.min\"\r\n            [max]=\"field.max\"\r\n            [minLength]=\"field.minLength||null\"\r\n            [maxlength]=\"field.maxLength||null\"\r\n            [placeholder]=\"field.placeholder??field.label\"/>\r\n          @if (field.maxLength && field.showCounter) {\r\n            <span counter>{{inp.value.length}} /{{field.maxLength}}</span>\r\n          }\r\n        </ui-input>\r\n      }\r\n      @if (field.type === 'textarea') {\r\n        <ui-input\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [disabled]=\"!!control?.disabled\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\">\r\n          <textarea #ta\r\n            [id]=\"field.name\"\r\n            [formControlName]=\"field.name\"\r\n            [minLength]=\"field.minLength||null\"\r\n            [maxlength]=\"field.maxLength||null\"\r\n            [textareaAutoresize]=\"field.textareaResize\"\r\n            [textareaAutoresizeMinRows]=\"field.resizeMinRows??1\"\r\n            [textareaAutoresizeMaxRows]=\"field.resizeMaxRows??5\"\r\n            [rows]=\"field.resizeMinRows??3\"\r\n            [placeholder]=\"field.placeholder??field.label\"\r\n          ></textarea>\r\n          @if (field.voiceToTextEnabled && !control?.disabled) {\r\n            @let listening = isListening(field.name);\r\n            <div class=\"speak-icon\" (click)=\"ta.focus()\">\r\n              <ui-button\r\n                [disabled]=\"listening\"\r\n                style=\"margin-bottom: 2px;\"\r\n                (click)=\"voiceToText(ta, field.name)\"\r\n                [icon]=\"listening?'ri-mic-fill':'ri-mic-line'\"\r\n                [type]=\"listening?'filled':'bordered'\"\r\n                size=\"s\"\r\n                [iconOnly]=\"true\"\r\n              ></ui-button>\r\n              @if (listening) {\r\n                <i class=\"ri-voiceprint-line\"></i>\r\n              }\r\n            </div>\r\n          }\r\n          @if (field.showCounter) {\r\n            <span counter>\r\n              {{ta.value.length}}\r\n              @if (field.maxLength) {\r\n                /{{field.maxLength}}\r\n              }\r\n            </span>\r\n          }\r\n        </ui-input>\r\n      }\r\n      @if (field.type === 'phone') {\r\n        <ui-phone-input\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [placeholder]=\"field.placeholder||field.label||''\"\r\n        >\r\n        </ui-phone-input>\r\n      }\r\n      @else if (field.type === 'date') {\r\n        <ui-date-picker\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [tip]=\"field.tip??''\"\r\n          [justMonth]=\"!!field.monthMode\"\r\n          [min]=\"field.minDate??''\"\r\n          [max]=\"field.maxDate??''\"\r\n          [monthDay]=\"field.monthDay||'first'\"\r\n          [formControlName]=\"field.name\"\r\n        ></ui-date-picker>\r\n      }\r\n      @else if (field.type === 'time') {\r\n        <ui-time-picker\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [tip]=\"field.tip??''\"\r\n          [interval]=\"field.timeInterval??5\"\r\n          [formControlName]=\"field.name\"\r\n        ></ui-time-picker>\r\n      }\r\n      @else if (field.type === 'select') {\r\n        <ui-select\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [loading]=\"field.loading??false\"\r\n          [nullable]=\"field.selectNullable??false\"\r\n          [showSubtitle]=\"field.showSubtitle??false\"\r\n          [searcherEnabled]=\"field.selectSearchEnabled??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [formControlName]=\"field.name\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-select>\r\n      }\r\n      @else if (field.type === 'multyselect') {\r\n        <ui-multy-select\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [tip]=\"field.tip??''\"\r\n          [formControlName]=\"field.name\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-multy-select>\r\n      }\r\n      @else if (field.type === 'searcher') {\r\n        <ui-searcher\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [searchFn]=\"getSearcherFn(field)\"\r\n          [itemDisplayFn]=\"getSearcherDisplayFn(field)\"\r\n          [itemIsEnabledFn]=\"getSearcherIsEnabledFn(field)\"\r\n          [placeholder]=\"field.placeholder??'common.search_ellipsis'\"\r\n          [error]=\"error\"\r\n        ></ui-searcher>\r\n      }\r\n      @else if (field.type === 'file') {\r\n        <ui-file-input\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [multy]=\"field.multyEnabled??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [fileTypes]=\"field.fileTypes??null\"\r\n          [fileUidResolverFn]=\"fileUidResolverFn\"\r\n          [formControlName]=\"field.name\"\r\n        ></ui-file-input>\r\n      }\r\n      @else if (['checkbox', 'switch'].includes(field.type)) {\r\n        <ui-checkbox\r\n          [label]=\"(field.label??'') + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [placeholder]=\"field.placeholder??''\"\r\n          [tip]=\"field.tip??''\"\r\n          [type]=\"field.type === 'checkbox' ? 'checkbox' : 'switch'\"\r\n        ></ui-checkbox>\r\n      }\r\n      @else if (field.type === 'radio') {\r\n        <ui-radio\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [tip]=\"field.tip??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [error]=\"error\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-radio>\r\n      }\r\n      @else if (field.type === 'slider') {\r\n        <ui-slider\r\n          [min]=\"field.min??0\"\r\n          [max]=\"field.max??100\"\r\n          [step]=\"field.sliderInterval??1\"\r\n          [markerCount]=\"field.sliderMarks??5\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [tip]=\"field.tip??''\"\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n        ></ui-slider>\r\n      }\r\n      @else if (field.type === 'pool') {\r\n        <ui-pool-options\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [multy]=\"field.multyEnabled??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [listViewTitle]=\"field.poolTitle??'common.selected'\"\r\n          [enabledListView]=\"field.poolEnabledListView||false\"\r\n          [formControlName]=\"field.name\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-pool-options>\r\n      }\r\n      @else if (field.type === 'repeater') {\r\n        <ui-repeater\r\n          [formArray]=\"asFormArray(control)\"\r\n          [field]=\"field\"\r\n          [cols]=\"cols\"\r\n          [error]=\"error\"\r\n          [fileUidResolverFn]=\"fileUidResolverFn\"\r\n          [selectOptionsResolver]=\"selectOptionsResolver\"\r\n          [parentForm]=\"form\"\r\n        ></ui-repeater>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".form{width:100%;display:grid;align-items:stretch;gap:1rem;padding-bottom:.75rem}@media (max-width: 479px){.form{grid-template-columns:1fr}}@media (min-width: 768px){.form{grid-template-columns:repeat(var(--cols),minmax(0,1fr))}}@media (min-width: 480px) and (max-width: 767px){.form{grid-template-columns:repeat(min(var(--cols),2),minmax(0,1fr))}}.form>*{min-width:0}h2{margin-top:1.5rem}.speak-icon{display:flex;width:100%;align-items:center;gap:10px}.speak-icon i{font-size:20px;color:var(--primary-500)}textarea{resize:none}\n"] }]
+                    ], template: "<div class=\"form\" [ngStyle]=\"{'--cols': cols, '--min': '180px'}\" [formGroup]=\"form\">\r\n  @for (state of visibleFieldStates(); track state.field.name) {\r\n    @let field = state.field;\r\n    @let control = state.control;\r\n    @let currentValue = state.value ?? '';\r\n    @let error = getControlErrorMessages(control, field)[0];\r\n\r\n    <div [style.grid-column]=\"getGridColumn(field)\" (focusout)=\"onFieldContainerFocusout(field, $event)\">\r\n      @if (['text', 'number'].includes(field.type)) {\r\n        @let inputColor = getInputColor(field, currentValue);\r\n        <ui-input\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [disabled]=\"!!control?.disabled\"\r\n          [internalIconColor]=\"inputColor\"\r\n          [internalIcon]=\"field.internalIcon || (currentValue !== '' ? getIconByColor(field, inputColor) : '')\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\">\r\n          <input #inp\r\n            [id]=\"field.name\"\r\n            [formControlName]=\"field.name\"\r\n            [type]=\"field.type\"\r\n            [step]=\"field.step\"\r\n            [min]=\"field.min\"\r\n            [max]=\"field.max\"\r\n            [minLength]=\"field.minLength||null\"\r\n            [maxlength]=\"field.maxLength||null\"\r\n            [placeholder]=\"field.placeholder??field.label\"/>\r\n          @if (field.maxLength && field.showCounter) {\r\n            <span counter>{{inp.value.length}} /{{field.maxLength}}</span>\r\n          }\r\n        </ui-input>\r\n      }\r\n      @if (field.type === 'textarea') {\r\n        <ui-input\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [disabled]=\"!!control?.disabled\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\">\r\n          <textarea #ta\r\n            [id]=\"field.name\"\r\n            [formControlName]=\"field.name\"\r\n            [minLength]=\"field.minLength||null\"\r\n            [maxlength]=\"field.maxLength||null\"\r\n            [textareaAutoresize]=\"field.textareaResize\"\r\n            [textareaAutoresizeMinRows]=\"field.resizeMinRows??1\"\r\n            [textareaAutoresizeMaxRows]=\"field.resizeMaxRows??5\"\r\n            [rows]=\"field.resizeMinRows??3\"\r\n            [placeholder]=\"field.placeholder??field.label\"\r\n          ></textarea>\r\n          @if (field.voiceToTextEnabled && !control?.disabled) {\r\n            @let listening = isListening(field.name);\r\n            <div class=\"speak-icon\" (click)=\"ta.focus()\">\r\n              <ui-button\r\n                [disabled]=\"listening\"\r\n                style=\"margin-bottom: 2px;\"\r\n                (click)=\"voiceToText(ta, field.name)\"\r\n                [icon]=\"listening?'ri-mic-fill':'ri-mic-line'\"\r\n                [type]=\"listening?'filled':'bordered'\"\r\n                size=\"s\"\r\n                [iconOnly]=\"true\"\r\n              ></ui-button>\r\n              @if (listening) {\r\n                <i class=\"ri-voiceprint-line\"></i>\r\n              }\r\n            </div>\r\n          }\r\n          @if (field.showCounter) {\r\n            <span counter>\r\n              {{ta.value.length}}\r\n              @if (field.maxLength) {\r\n                /{{field.maxLength}}\r\n              }\r\n            </span>\r\n          }\r\n        </ui-input>\r\n      }\r\n      @if (field.type === 'phone') {\r\n        <ui-phone-input\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [placeholder]=\"field.placeholder||field.label||''\"\r\n        >\r\n        </ui-phone-input>\r\n      }\r\n      @else if (field.type === 'date') {\r\n        <ui-date-picker\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [tip]=\"field.tip??''\"\r\n          [justMonth]=\"!!field.monthMode\"\r\n          [min]=\"field.minDate??''\"\r\n          [max]=\"field.maxDate??''\"\r\n          [monthDay]=\"field.monthDay||'first'\"\r\n          [formControlName]=\"field.name\"\r\n        ></ui-date-picker>\r\n      }\r\n      @else if (field.type === 'time') {\r\n        <ui-time-picker\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [tip]=\"field.tip??''\"\r\n          [interval]=\"field.timeInterval??5\"\r\n          [formControlName]=\"field.name\"\r\n        ></ui-time-picker>\r\n      }\r\n      @else if (field.type === 'select') {\r\n        <ui-select\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [loading]=\"field.loading??false\"\r\n          [nullable]=\"field.selectNullable??false\"\r\n          [showSubtitle]=\"field.showSubtitle??false\"\r\n          [searcherEnabled]=\"field.selectSearchEnabled??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [formControlName]=\"field.name\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-select>\r\n      }\r\n      @else if (field.type === 'multyselect') {\r\n        <ui-multy-select\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [tip]=\"field.tip??''\"\r\n          [formControlName]=\"field.name\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-multy-select>\r\n      }\r\n      @else if (field.type === 'searcher') {\r\n        <ui-searcher\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [searchFn]=\"getSearcherFn(field)\"\r\n          [itemDisplayFn]=\"getSearcherDisplayFn(field)\"\r\n          [itemIsEnabledFn]=\"getSearcherIsEnabledFn(field)\"\r\n          [placeholder]=\"field.placeholder??'common.search_ellipsis'\"\r\n          [error]=\"error\"\r\n        ></ui-searcher>\r\n      }\r\n      @else if (field.type === 'multisearcher') {\r\n        <ui-multy-searcher\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [searchFn]=\"getSearcherFn(field)\"\r\n          [itemDisplayFn]=\"getSearcherDisplayFn(field)\"\r\n          [itemIsEnabledFn]=\"getSearcherIsEnabledFn(field)\"\r\n          [placeholder]=\"field.placeholder??'common.search_ellipsis'\"\r\n          [error]=\"error\"\r\n        ></ui-multy-searcher>\r\n      }\r\n      @else if (field.type === 'file') {\r\n        <ui-file-input\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [multy]=\"field.multyEnabled??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [fileTypes]=\"field.fileTypes??null\"\r\n          [fileUidResolverFn]=\"fileUidResolverFn\"\r\n          [formControlName]=\"field.name\"\r\n        ></ui-file-input>\r\n      }\r\n      @else if (['checkbox', 'switch'].includes(field.type)) {\r\n        <ui-checkbox\r\n          [label]=\"(field.label??'') + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [placeholder]=\"field.placeholder??''\"\r\n          [tip]=\"field.tip??''\"\r\n          [type]=\"field.type === 'checkbox' ? 'checkbox' : 'switch'\"\r\n        ></ui-checkbox>\r\n      }\r\n      @else if (field.type === 'radio') {\r\n        <ui-radio\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [tip]=\"field.tip??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [error]=\"error\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-radio>\r\n      }\r\n      @else if (field.type === 'slider') {\r\n        <ui-slider\r\n          [min]=\"field.min??0\"\r\n          [max]=\"field.max??100\"\r\n          [step]=\"field.sliderInterval??1\"\r\n          [markerCount]=\"field.sliderMarks??5\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [tip]=\"field.tip??''\"\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n        ></ui-slider>\r\n      }\r\n      @else if (field.type === 'pool') {\r\n        <ui-pool-options\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [multy]=\"field.multyEnabled??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [listViewTitle]=\"field.poolTitle??'common.selected'\"\r\n          [enabledListView]=\"field.poolEnabledListView||false\"\r\n          [formControlName]=\"field.name\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-pool-options>\r\n      }\r\n      @else if (field.type === 'repeater') {\r\n        <ui-repeater\r\n          [formArray]=\"asFormArray(control)\"\r\n          [field]=\"field\"\r\n          [cols]=\"cols\"\r\n          [error]=\"error\"\r\n          [fileUidResolverFn]=\"fileUidResolverFn\"\r\n          [selectOptionsResolver]=\"selectOptionsResolver\"\r\n          [parentForm]=\"form\"\r\n        ></ui-repeater>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".form{width:100%;display:grid;align-items:stretch;gap:1rem;padding-bottom:.75rem}@media (max-width: 479px){.form{grid-template-columns:1fr}}@media (min-width: 768px){.form{grid-template-columns:repeat(var(--cols),minmax(0,1fr))}}@media (min-width: 480px) and (max-width: 767px){.form{grid-template-columns:repeat(min(var(--cols),2),minmax(0,1fr))}}.form>*{min-width:0}h2{margin-top:1.5rem}.speak-icon{display:flex;width:100%;align-items:center;gap:10px}.speak-icon i{font-size:20px;color:var(--primary-500)}textarea{resize:none}\n"] }]
         }], ctorParameters: () => [{ type: i0.NgZone }], propDecorators: { fields: [{
                 type: Input
             }], isSubForm: [{
@@ -4837,7 +4968,7 @@ class UicFormWrapperComponent {
     immediateExternalValidationValueByField = new Map();
     immediateValidationFieldTypes = new Set([
         'date', 'time', 'select', 'radio', 'checkbox', 'switch',
-        'pool', 'file', 'multyselect', 'searcher', 'slider'
+        'pool', 'file', 'multyselect', 'searcher', 'multisearcher', 'slider'
     ]);
     formValueSub = null;
     optionSourceSubs = new Map();
@@ -5850,6 +5981,7 @@ class UicFormWrapperComponent {
             case 'switch':
                 return false;
             case 'multyselect':
+            case 'multisearcher':
                 return [];
             default:
                 return null;
@@ -6165,31 +6297,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Output
             }] } });
 
-class UicMultySearcherComponent {
-    itemDisplayFn = item => String(item);
-    disabled = false;
-    values = [];
-    valuesChange = new EventEmitter();
-    removeItem(idx) {
-        this.values.splice(idx, 1);
-        this.valuesChange.emit(this.values);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicMultySearcherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicMultySearcherComponent, isStandalone: true, selector: "ui-multy-searcher", inputs: { itemDisplayFn: "itemDisplayFn", disabled: "disabled", values: "values" }, outputs: { valuesChange: "valuesChange" }, ngImport: i0, template: "<div class=\"search-results\">\r\n    @for (item of values; track $index) {\r\n        <div class=\"search-result\" [class.disabledresult]=\"disabled\">\r\n            <div [innerHTML]=\"itemDisplayFn?itemDisplayFn(item):''\">\r\n            </div>\r\n            @if ( !disabled ){\r\n                <ui-button (click)=\"removeItem($index)\" [iconOnly]=\"true\" icon=\"ri-delete-bin-line\" type=\"ghost\" color=\"red\" size=\"s\"></ui-button>\r\n            }\r\n        </div>\r\n    }\r\n    @if (disabled && values.length == 0) {\r\n        <div class=\"search-result-empty\">\r\n            {{'searcher.without_selected' | uicTranslate}}\r\n        </div>\r\n    }\r\n</div>\r\n", styles: [".search-results{display:flex;flex-direction:column;gap:5px}.search-result{font-size:14px;line-height:16px;min-height:33px;padding:2px 2px 2px 10px;border:solid 1px var(--grey-300);border-radius:4px;display:flex;background-color:var(--grey-50);align-items:center;justify-content:space-between}.disabledresult{color:var(--disabled-color)}.search-result-empty{font-size:14px;line-height:16px;min-height:33px;padding:2px 2px 2px 10px;border:dashed 1px var(--grey-300);border-radius:4px;display:flex;color:var(--grey-400);align-items:center;justify-content:center}\n"], dependencies: [{ kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicMultySearcherComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ui-multy-searcher', imports: [UicButtonComponent, UicTranslatePipe], template: "<div class=\"search-results\">\r\n    @for (item of values; track $index) {\r\n        <div class=\"search-result\" [class.disabledresult]=\"disabled\">\r\n            <div [innerHTML]=\"itemDisplayFn?itemDisplayFn(item):''\">\r\n            </div>\r\n            @if ( !disabled ){\r\n                <ui-button (click)=\"removeItem($index)\" [iconOnly]=\"true\" icon=\"ri-delete-bin-line\" type=\"ghost\" color=\"red\" size=\"s\"></ui-button>\r\n            }\r\n        </div>\r\n    }\r\n    @if (disabled && values.length == 0) {\r\n        <div class=\"search-result-empty\">\r\n            {{'searcher.without_selected' | uicTranslate}}\r\n        </div>\r\n    }\r\n</div>\r\n", styles: [".search-results{display:flex;flex-direction:column;gap:5px}.search-result{font-size:14px;line-height:16px;min-height:33px;padding:2px 2px 2px 10px;border:solid 1px var(--grey-300);border-radius:4px;display:flex;background-color:var(--grey-50);align-items:center;justify-content:space-between}.disabledresult{color:var(--disabled-color)}.search-result-empty{font-size:14px;line-height:16px;min-height:33px;padding:2px 2px 2px 10px;border:dashed 1px var(--grey-300);border-radius:4px;display:flex;color:var(--grey-400);align-items:center;justify-content:center}\n"] }]
-        }], propDecorators: { itemDisplayFn: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], values: [{
-                type: Input
-            }], valuesChange: [{
-                type: Output
-            }] } });
-
 const DROPDOWN_OVERLAY_CONTROLS = new InjectionToken('DROPDOWN_OVERLAY_CONTROLS');
 const DEFAULT_POSITIONS = [
     { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },
@@ -6423,7 +6530,7 @@ class UicTableUicSearcherComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableUicSearcherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTableUicSearcherComponent, isStandalone: true, selector: "uic-table-searcher", inputs: { placeholder: "placeholder", label: "label", searchOnKeydown: "searchOnKeydown", showButtonText: "showButtonText", showSearchButton: "showSearchButton" }, outputs: { filter: "filter" }, ngImport: i0, template: "\r\n<div class=\"ui-table-searcher\">\r\n    <ui-input [internalIcon]=\"!showSearchButton?'ri-search-line':''\">\r\n        <input [(ngModel)]=\"text\" type=\"text\" (ngModelChange)=\"updateText()\" (keydown.enter)=\"filter.emit(text)\" [placeholder]=\"placeholder | uicTranslate\">\r\n    </ui-input>\r\n    @if (showSearchButton) {\r\n    <ui-button [iconOnly]=\"!showButtonText\" (click)=\"filter.emit(text)\" color=\"black\" type=\"bordered\" rightIcon=\"showSearchButton ri-search-2-line\" size=\"m\">{{showButtonText?('common.search' | uicTranslate):''}}</ui-button>\r\n    }\r\n    <ui-button [iconOnly]=\"!showButtonText\" (click)=\"reset()\" color=\"black\" type=\"bordered\" rightIcon=\"ri-eraser-line\" size=\"m\">{{showButtonText?('common.clear' | uicTranslate):''}}</ui-button>\r\n</div>\r\n", styles: [".ui-table-searcher{display:flex;gap:5px;align-items:center}.ui-table-searcher ui-input{min-width:300px;flex:1 1}@media (max-width: 479px){.ui-table-searcher ui-input{min-width:5px}}.ui-table-searcher .fakeinput{display:flex;align-items:center;border:solid 1px var(--grey-200);height:40px;padding:2px 1px 2px 10px;border-radius:8px;transition:ease .3s;width:350px}@media (max-width: 479px){.ui-table-searcher .fakeinput{width:100%}}.ui-table-searcher .fakeinput i{font-size:24px;margin-right:8px}.ui-table-searcher .fakeinput input{width:100%;border:none}.ui-table-searcher .fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}\n"], dependencies: [{ kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: UicInputComponent, selector: "ui-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "disabled", "loading"], outputs: ["clickButton"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTableUicSearcherComponent, isStandalone: true, selector: "uic-table-searcher", inputs: { placeholder: "placeholder", label: "label", searchOnKeydown: "searchOnKeydown", showButtonText: "showButtonText", showSearchButton: "showSearchButton" }, outputs: { filter: "filter" }, ngImport: i0, template: "\r\n<div class=\"ui-table-searcher\">\r\n    <ui-input [internalIcon]=\"!showSearchButton?'ri-search-line':''\">\r\n        <input [(ngModel)]=\"text\" type=\"text\" (ngModelChange)=\"updateText()\" (keydown.enter)=\"filter.emit(text)\" [placeholder]=\"placeholder | uicTranslate\">\r\n    </ui-input>\r\n    @if (showSearchButton) {\r\n    <ui-button [iconOnly]=\"!showButtonText\" (click)=\"filter.emit(text)\" color=\"black\" type=\"bordered\" rightIcon=\"showSearchButton ri-search-2-line\" size=\"m\">{{showButtonText?('common.search' | uicTranslate):''}}</ui-button>\r\n    }\r\n    <ui-button [iconOnly]=\"!showButtonText\" (click)=\"reset()\" color=\"black\" type=\"bordered\" rightIcon=\"ri-eraser-line\" size=\"m\">{{showButtonText?('common.clear' | uicTranslate):''}}</ui-button>\r\n</div>\r\n", styles: [".ui-table-searcher{display:flex;gap:5px;align-items:center}.ui-table-searcher ui-input{min-width:300px;flex:1 1}@media (max-width: 479px){.ui-table-searcher ui-input{min-width:5px}}.ui-table-searcher .fakeinput{display:flex;align-items:center;border:solid 1px var(--grey-200);height:40px;padding:2px 1px 2px 10px;border-radius:8px;transition:ease .3s;width:350px}@media (max-width: 479px){.ui-table-searcher .fakeinput{width:100%}}.ui-table-searcher .fakeinput i{font-size:24px;margin-right:8px}.ui-table-searcher .fakeinput input{width:100%;border:none}.ui-table-searcher .fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}\n"], dependencies: [{ kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: UicInputComponent, selector: "ui-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "disabled", "loading"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableUicSearcherComponent, decorators: [{
             type: Component,
@@ -6751,7 +6858,7 @@ class TinyAlertComponent {
         this.modalRef.closeFloating(value ? this.response : null);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TinyAlertComponent, deps: [{ token: MODAL_DATA }, { token: UiModalRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: TinyAlertComponent, isStandalone: true, selector: "ui-tiny-alert", ngImport: i0, template: "<div class=\"alert-wrapper\">\r\n    @if (data.iconPath) {\r\n        <img [src]=\"data.iconPath\" alt=\"\">    \r\n    }@else{\r\n        <i [class]=\"'alert-main-icon icon-'+data.type + ' ' + data.iconChar\" ></i>\r\n    }\r\n    <div class=\"h3-alert\" [class]=\"'icon-'+data.type\">  {{data.title | uicTranslate}} </div>\r\n    \r\n    <div class=\"alert-body\" [innerHTML]=\"data.body | uicTranslate\">   </div>\r\n    @if ( data.showInput ){\r\n        <div class=\"alert-input\">\r\n            <ui-input [label]=\"data.inputLabel??'_'\">\r\n                @if (data.inputType == 'textarea') {\r\n                    <textarea [(ngModel)]=\"inputData\" [placeholder]=\"data.inputPlaceholder\"></textarea>\r\n                }@else{\r\n                    <input [(ngModel)]=\"inputData\" [placeholder]=\"data.inputPlaceholder\" type=\"text\" />\r\n                }\r\n            </ui-input>\r\n        </div>\r\n    }\r\n\r\n    <div class=\"tinyalert-buttons\">\r\n        @if (data.showCancelButton) {\r\n            <ui-button (click)=\"close(false)\" type=\"bordered\" [color]=\"data.cancelButtonColor??'black'\" size=\"l\"> {{(data.cancelButtonText??'common.cancel') | uicTranslate}} </ui-button>\r\n        }\r\n        <ui-button (click)=\"close(true)\" [color]=\"data.okButtonColor??'primary'\" size=\"l\"> {{(data.okButtonText??'common.continue') | uicTranslate}} </ui-button>\r\n    </div>\r\n    \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-input{width:100%;padding:10px 0}.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}.tinyalert-buttons{padding-top:20px;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}.h3-alert{font-size:24px;font-weight:800;margin-bottom:10px}.alert-body{font-size:18px;font-weight:500;line-height:24px;text-align:center;color:var(--grey-700)}.floating-close{position:absolute;top:-10px;right:-20px;background-color:transparent;font-size:28px;border:none;cursor:pointer;transition:ease .3s}.floating-close:hover{color:var(--red-500)}@media (max-width: 479px){.floating-close{top:0;right:-5px}}.alert-main-icon{font-size:80px;line-height:80px;margin-bottom:10px}.icon-error{color:var(--red-500)}.icon-delete{color:var(--red-800)}.icon-warning{color:var(--yellow-500)}.icon-info{color:var(--blue-800)}.icon-success{color:var(--green-500)}\n"], dependencies: [{ kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: UicInputComponent, selector: "ui-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "disabled", "loading"], outputs: ["clickButton"] }, { 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: "pipe", type: UicTranslatePipe, name: "uicTranslate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: TinyAlertComponent, isStandalone: true, selector: "ui-tiny-alert", ngImport: i0, template: "<div class=\"alert-wrapper\">\r\n    @if (data.iconPath) {\r\n        <img [src]=\"data.iconPath\" alt=\"\">    \r\n    }@else{\r\n        <i [class]=\"'alert-main-icon icon-'+data.type + ' ' + data.iconChar\" ></i>\r\n    }\r\n    <div class=\"h3-alert\" [class]=\"'icon-'+data.type\">  {{data.title | uicTranslate}} </div>\r\n    \r\n    <div class=\"alert-body\" [innerHTML]=\"data.body | uicTranslate\">   </div>\r\n    @if ( data.showInput ){\r\n        <div class=\"alert-input\">\r\n            <ui-input [label]=\"data.inputLabel??'_'\">\r\n                @if (data.inputType == 'textarea') {\r\n                    <textarea [(ngModel)]=\"inputData\" [placeholder]=\"data.inputPlaceholder\"></textarea>\r\n                }@else{\r\n                    <input [(ngModel)]=\"inputData\" [placeholder]=\"data.inputPlaceholder\" type=\"text\" />\r\n                }\r\n            </ui-input>\r\n        </div>\r\n    }\r\n\r\n    <div class=\"tinyalert-buttons\">\r\n        @if (data.showCancelButton) {\r\n            <ui-button (click)=\"close(false)\" type=\"bordered\" [color]=\"data.cancelButtonColor??'black'\" size=\"l\"> {{(data.cancelButtonText??'common.cancel') | uicTranslate}} </ui-button>\r\n        }\r\n        <ui-button (click)=\"close(true)\" [color]=\"data.okButtonColor??'primary'\" size=\"l\"> {{(data.okButtonText??'common.continue') | uicTranslate}} </ui-button>\r\n    </div>\r\n    \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-input{width:100%;padding:10px 0}.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}.tinyalert-buttons{padding-top:20px;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}.h3-alert{font-size:24px;font-weight:800;margin-bottom:10px}.alert-body{font-size:18px;font-weight:500;line-height:24px;text-align:center;color:var(--grey-700)}.floating-close{position:absolute;top:-10px;right:-20px;background-color:transparent;font-size:28px;border:none;cursor:pointer;transition:ease .3s}.floating-close:hover{color:var(--red-500)}@media (max-width: 479px){.floating-close{top:0;right:-5px}}.alert-main-icon{font-size:80px;line-height:80px;margin-bottom:10px}.icon-error{color:var(--red-500)}.icon-delete{color:var(--red-800)}.icon-warning{color:var(--yellow-500)}.icon-info{color:var(--blue-800)}.icon-success{color:var(--green-500)}\n"], dependencies: [{ kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: UicInputComponent, selector: "ui-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "disabled", "loading"] }, { 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: "pipe", type: UicTranslatePipe, name: "uicTranslate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TinyAlertComponent, decorators: [{
             type: Component,
@@ -7641,7 +7748,7 @@ class UicTableComponent {
         return `${a ?? ''}` === `${b ?? ''}`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTableComponent, isStandalone: true, selector: "ui-table", inputs: { columns: "columns", data: "data", loading: "loading", disabled: "disabled", editable: "editable", rowClickable: "rowClickable", rowExpandible: "rowExpandible", pages: "pages", size: "size", squeletonRows: "squeletonRows", buttonSize: "buttonSize", highlightedId: "highlightedId", headerText: "headerText", headerSubtitle: "headerSubtitle", totalItems: "totalItems", alignment: "alignment", searchEnabled: "searchEnabled", searchLabel: "searchLabel", searchPlaceholder: "searchPlaceholder", headerClass: "headerClass", headerBackgroundColor: "headerBackgroundColor", striped: "striped", showPagination: "showPagination", searchOnKeydown: "searchOnKeydown", showEmptyMessage: "showEmptyMessage", showSearchButton: "showSearchButton", showTextPagination: "showTextPagination", emptyMessage: "emptyMessage", switchValidation: "switchValidation", nextButtonText: "nextButtonText", previousButtonText: "previousButtonText", mobilePortletCols: "mobilePortletCols", searcherShowButtonText: "searcherShowButtonText" }, outputs: { action: "action", update: "update", checkedChange: "checkedChange", switchChange: "switchChange", clickedRow: "clickedRow", cellChange: "cellChange" }, queries: [{ propertyName: "actionsRef", first: true, predicate: ["[actions]"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if ( hasActions || searchEnabled){\r\n    <div class=\"ui-table-filters\">\r\n        @if (searchEnabled) {\r\n            <uic-table-searcher \r\n                [showSearchButton]=\"showSearchButton\" \r\n                [showButtonText]=\"searcherShowButtonText\" \r\n                [searchOnKeydown]=\"searchOnKeydown\"\r\n                (filter)=\"search($event)\" \r\n                [placeholder]=\"searchPlaceholder\" >\r\n            </uic-table-searcher>\r\n        }\r\n        <div class=\"ui-filter-actions\">\r\n            <ng-content select=\"[actions]\"></ng-content>\r\n        </div>\r\n    </div>\r\n}\r\n<ng-content select=\"[filters]\"></ng-content>\r\n<div class=\"ui-table-wrapper\">\r\n    @if (headerText) {\r\n        <div class=\"ui-table-topbar\"> \r\n            <div>\r\n                {{headerText}} <span class=\"hightlited-note\"> ({{totalItems}}) </span> \r\n            </div>\r\n            <p> {{headerSubtitle}} </p>\r\n        </div>\r\n    }\r\n    <div class=\"ui-table-container\">    \r\n        <table class=\"ui-table\" [class.ui-striped]=\"striped\">\r\n            <thead>\r\n                <tr [class]=\" headerClass || 'header-'+headerBackgroundColor\">\r\n                    @for (header of columns; track $index) {\r\n                        <th [class.noshow-small]=\"header.hideOn == 'small'\"\r\n                            [class.noshow-medium]=\"header.hideOn == 'medium'\">\r\n                            <div [class]=\"'ui-th-wrap ui-alignment-'+alignment\" >\r\n                                @if (header.type=='checkbox') {\r\n                                    <div>\r\n                                        <ui-checkbox style=\"margin-right: 5px;\" [(ngModel)]=\"allSelected\" (ngModelChange)=\"toggleAll($event)\"></ui-checkbox>\r\n                                    </div>\r\n                                }\r\n                                {{header.label.toUpperCase() }} \r\n                                @if (header.sortEnable) {\r\n                                    <div class=\"ui-sort-arrow\" (click)=\"sortClick(header.key)\" [ngClass]=\"{'ui-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                            </div>\r\n                        </th>   \r\n                    }\r\n                </tr>\r\n            </thead>\r\n            <tbody>\r\n\r\n                @if (loading) {\r\n                    @for (item of [].constructor(squeletonRows); track $index) {\r\n                        <tr>\r\n                            @for (header of columns; track $index) {\r\n                                <td> <div class=\"ui-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\"  \r\n                            [class.ui-tr-highlighted]=\"row.highlighted\"\r\n                            [class.clickable-row]=\"rowClickable\"\r\n                            (click)=\"clickRow(row.id)\"\r\n                            >\r\n                            @for (header of columns; track $index) {\r\n                                <!-- TIPOS DE HEADERS -->\r\n                                <td [class]=\"getFontColor(row.data,header.key)\"\r\n                                    [class.noshow-small]=\"header.hideOn == 'small'\"\r\n                                    [class.noshow-medium]=\"header.hideOn == 'medium'\">\r\n\r\n                                    <div [class]=\"'ui-cell-content ui-alignment-'+alignment\" \r\n                                        [style.justify-content]=\"header.align||null\"\r\n                                        [style.width.px]=\"header.width || null\">\r\n                                        @if (header.type == 'actions') {         \r\n                                            <div class=\"ui-centered-cell-content\">\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                                                            [uiTooltip]=\"btn.tooltip??''\"\n                                                            size=\"s\"\r\n                                                            [disabled]=\"disabled\"\r\n                                                            [text]=\"btn.text??''\"\r\n                                                            [type]=\"btn.type??'filled'\"\r\n                                                            [iconOnly]=\"!btn.text\"\r\n                                                            [icon]=\"btn.icon??''\"\r\n                                                            [color]=\"btn.color??'black'\"\r\n                                                            (click)=\"doAction(row.id,btn.key,$event)\">\r\n                                                        </ui-button> \r\n                                                    }\r\n                                                } \r\n                                                @if ( header.moreActions && header.moreActions.length>0  ) {\r\n                                                    @for (ma of header.moreActions; track $index) {\r\n                                                        <ui-action-button [icon]=\"ma.icon??'ri-more-2-line'\" (optionSelected)=\"doAction(row.id,$event.id)\"  [options]=\"getMoreActions(ma.actions||[],row.data)\"></ui-action-button>\r\n                                                    }\r\n                                                }\r\n                                            </div>               \r\n                                        }\r\n                                        @else if (header.type == 'checkbox'){\r\n                                            <ui-checkbox [disabled]=\"disabled\" [ngModel]=\"checkedIds.has(row.id)\" [placeholder]=\"getValue(row.data,header.key)\" (ngModelChange)=\"toggleSelection(row.id,$event)\" ></ui-checkbox>                \r\n                                        }\r\n                                        @else if (isCellEditable(header)) {\r\n                                            @if ((header.editionType ?? 'input') === 'select') {\r\n                                                <div class=\"ui-editable-cell\" (click)=\"$event.stopPropagation()\">\r\n                                                    <ui-select\r\n                                                        [disabled]=\"disabled\"\r\n                                                        [options]=\"header.editionTypeOptions || []\"\r\n                                                        [ngModel]=\"getEditableCellValue(row.id, header.key)\"\r\n                                                        (ngModelChange)=\"onEditableSelectChange(row.id, row.data, header.key, $event)\">\r\n                                                    </ui-select>\r\n                                                </div>\r\n                                            } @else {\r\n                                                <div class=\"ui-editable-cell\" (click)=\"$event.stopPropagation()\">\r\n                                                    <ui-input [disabled]=\"disabled\">\r\n                                                        <input\r\n                                                            [disabled]=\"disabled\"\r\n                                                            [ngModel]=\"getEditableCellValue(row.id, header.key)\"\r\n                                                            (ngModelChange)=\"onEditableInputChange(row.id, header.key, $event)\"\r\n                                                            (blur)=\"onEditableInputBlur(row.id, row.data, header.key)\" />\r\n                                                    </ui-input>\r\n                                                </div>\r\n                                            }\r\n                                        }\r\n                                        @else {\r\n                                            <ui-item-value\r\n                                                [disabled]=\"disabled\"\r\n                                                [key]=\"header.key\"\r\n                                                [type]=\"header.type??'text'\"\r\n                                                [row]=\"row\"\r\n                                                [alignment]=\"alignment\"\r\n                                                [switchValidation]=\"switchValidation\"\r\n                                                (switchConfirmed)=\"switchHandler(row.id, $event, header.label)\"\r\n                                            ></ui-item-value>\r\n                                        }\r\n                                    </div>\r\n                                </td>\r\n                            }\r\n                        </tr>\r\n                        @if (fullViewRows.includes(row.id)) {\r\n                            <tr style=\"border-top: none ;\">\r\n                                <td [colSpan]=\"columns.length\">\r\n                                    <div class=\"full-space-row\">\r\n                                        <ui-short-table [columns]=\"columns\" [cols]=\"mobilePortletCols\" [data]=\"row\"></ui-short-table>\r\n                                    </div>\r\n                                </td>\r\n                            </tr>\r\n                        }\r\n                    }\r\n                    @empty {\r\n                        @if (showEmptyMessage) {\r\n                            <tr> \r\n                                <td [colSpan]=\"columns.length\">\r\n                                    <div class=\"ui-empty\">{{emptyMessage | uicTranslate}} </div>\r\n                                </td>\r\n                            </tr>\r\n                        }\r\n                    }\r\n                }\r\n            </tbody>\r\n        </table>\r\n    </div>\r\n    \r\n    @if (showPagination) {\r\n        <uic-table-pagination \r\n            [loading]=\"loading\" \r\n            [totalPages]=\"pages\" \r\n            [showText]=\"showTextPagination\"\r\n            [size]=\"size\"\r\n            [nextButtonText]=\"nextButtonText\"\r\n            [previousButtonText]=\"previousButtonText\"\r\n            [buttonSize]=\"buttonSize\"\r\n            (sizeChange)=\"sizeChabge($event)\"\r\n            (pageChange)=\"pageChage($event)\">\r\n        </uic-table-pagination>\r\n    }\r\n</div>\r\n", styles: [".ui-table-wrapper{overflow:hidden;border:solid 1px var(--table-border-color);border-radius:12px}.ui-table{width:100%;font-weight:400;border-collapse:collapse;background-color:#fff}.ui-table th{font-size:12px;height:calc(var(--table-spacing-ref) * 5.4);font-weight:500}.ui-table th .ui-th-wrap{white-space:nowrap;display:flex;align-items:center}.ui-table th .ui-th-wrap .ui-sort-arrow{font-size:12px;line-height:12px}.ui-table th .ui-th-wrap div{padding:1px;display:flex;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none;border-radius:50%;cursor:pointer;transition:ease .3s;color:var(--grey-400)}.ui-table th .ui-th-wrap div:hover{color:var(--primary-500)}.ui-table td{font-size:14px;color:var(--grey-600);height:calc(var(--table-spacing-ref) * 6)}.ui-table td,.ui-table th{padding:0 calc(var(--table-spacing-ref) * 2);vertical-align:middle;border:none}.ui-table tr{transition:ease .3s}.ui-table tr:hover{background-color:var(--table-hover)}.ui-table tbody tr{border-top:solid 1px var(--table-border-color)}.ui-table thead tr:hover{color:var(--grey-900)}tbody tr:last-child td{border-bottom:none}.ui-table-container{width:100%;overflow-x:auto}.ui-table-topbar{padding:calc(var(--table-spacing-ref) * 1.6) 20px;font-weight:600;font-size:18px;line-height:20px;gap:16px;background-color:#fff;align-items:center;color:var(--grey-900);border-bottom:solid 1px var(--table-border-color)}.ui-table-topbar p{font-size:14px;font-weight:400;color:var(--grey-400)}.ui-cell-content{padding:5px 0;display:flex;gap:4px;align-items:center;width:100%;min-width:fit-content;text-align:left}.ui-editable-cell{width:100%;min-width:150px}.ui-loader-tr{border-bottom:none!important}.ui-loader-tr td{padding:0}.ui-sort-active{color:var(--secondary-500)!important;border:solid 1px}.ui-empty{text-align:center;color:var(--grey-300)}.ui-table-filters{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:16px 0}@media (max-width: 479px){.ui-table-filters{padding:8px 0;flex-direction:column;align-items:normal;gap:8px}}.ui-filter-actions{display:flex;flex-wrap:wrap;gap:8px}.ui-alert{width:24px;height:24px;font-size:18px;background-color:var(--red-500);color:var(--white);border-radius:50%;padding:3px}.ui-loader{height:5px;width:100%;--c:no-repeat linear-gradient(var(--primary-500) 0 0);background:var(--c),var(--c),var(--primary-500);background-size:60% 100%;animation:l16 3s infinite}@keyframes l16{0%{background-position:-150% 0,-150% 0}66%{background-position:250% 0,-150% 0}to{background-position:250% 0,250% 0}}.ui-striped tbody tr:nth-child(odd){background-color:var(--grey-50);transition:ease .3s}.ui-striped tbody tr:nth-child(odd):hover{background-color:var(--primary-500)}.ui-tr-highlighted{border-left:solid 6px var(--green-500)}.ui-centered-cell-content{width:100%;display:flex;gap:5px;justify-content:center}.ui-alignment-center{justify-content:center;text-align:center}.ui-trc-primary{color:var(--primary-500)}.ui-trc-red{color:var(--red-500)}.ui-trc-blue{color:var(--blue-600)}.ui-trc-green{color:var(--green-500)}.ui-trc-yellow{color:var(--yellow-500)}.ui-trc-black{color:var(--grey-900)}.ui-trc-grey{color:var(--grey-300)}.clickable-row{cursor:pointer}.ui-row-loader{background:linear-gradient(90deg,var(--grey-100) 25%,var(--grey-200) 50%,var(--grey-100) 75%);height:20px;width:100%;background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:4px}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.header-grey{background-color:var(--table-header-background);color:var(--table-header-color)}.header-blue{color:var(--white);background-color:var(--blue-600)}.header-red{color:var(--white);background-color:var(--red-600)}.header-green{color:var(--white);background-color:var(--green-600)}.header-primary{color:var(--white);background-color:var(--primary-600)}.header-secondary{color:var(--white);background-color:var(--secondary-600)}.header-yellow{color:var(--white);background-color:var(--yellow-600)}.header-white{color:var(--table-header-color);background-color:#fff}.header-white:hover{background-color:var(--table-hover)!important}.full-space-row{width:100%;padding:20px;text-align:center}@media (max-width: 479px){.noshow-small{display:none}}@media (min-width: 480px) and (max-width: 767px){.noshow-medium{display:none}}@media (max-width: 479px){.noshow-medium{display:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: ItemValueComponent, selector: "ui-item-value", inputs: ["key", "type", "alignment", "row", "disabled", "data", "switchValidation"], outputs: ["switchConfirmed"] }, { kind: "component", type: UicShortTableComponent, selector: "ui-short-table", inputs: ["columns", "data", "loading", "disabled", "cols"] }, { kind: "component", type: UicActionButtonComponent, selector: "ui-action-button", inputs: ["icon", "options", "multiselect", "size"], outputs: ["optionSelected", "optionsApplied"] }, { kind: "component", type: UicTableUicSearcherComponent, selector: "uic-table-searcher", inputs: ["placeholder", "label", "searchOnKeydown", "showButtonText", "showSearchButton"], outputs: ["filter"] }, { kind: "component", type: UicTablePaginationComponent, selector: "uic-table-pagination", inputs: ["buttonSize", "currentPage", "totalPages", "size", "loading", "showText", "nextButtonText", "previousButtonText"], outputs: ["pageChange", "sizeChange"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }, { kind: "directive", type: UicToolTipDirective, selector: "[uiTooltip]", inputs: ["uiTooltip"] }, { kind: "component", type: UicCheckboxComponent, selector: "ui-checkbox", inputs: ["icon", "iconColor", "label", "tip", "type", "placeholder", "loading", "noPadding", "disabled"] }, { kind: "component", type: UicInputComponent, selector: "ui-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "disabled", "loading"], outputs: ["clickButton"] }, { kind: "component", type: UicSelectComponent, selector: "ui-select", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "showSubtitle", "disabled", "nonSelectedText", "noneText", "emptyText", "searcherEnabled", "loading", "nullable", "options"] }, { 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"] }], animations: [highlightRow, animatedRow] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTableComponent, isStandalone: true, selector: "ui-table", inputs: { columns: "columns", data: "data", loading: "loading", disabled: "disabled", editable: "editable", rowClickable: "rowClickable", rowExpandible: "rowExpandible", pages: "pages", size: "size", squeletonRows: "squeletonRows", buttonSize: "buttonSize", highlightedId: "highlightedId", headerText: "headerText", headerSubtitle: "headerSubtitle", totalItems: "totalItems", alignment: "alignment", searchEnabled: "searchEnabled", searchLabel: "searchLabel", searchPlaceholder: "searchPlaceholder", headerClass: "headerClass", headerBackgroundColor: "headerBackgroundColor", striped: "striped", showPagination: "showPagination", searchOnKeydown: "searchOnKeydown", showEmptyMessage: "showEmptyMessage", showSearchButton: "showSearchButton", showTextPagination: "showTextPagination", emptyMessage: "emptyMessage", switchValidation: "switchValidation", nextButtonText: "nextButtonText", previousButtonText: "previousButtonText", mobilePortletCols: "mobilePortletCols", searcherShowButtonText: "searcherShowButtonText" }, outputs: { action: "action", update: "update", checkedChange: "checkedChange", switchChange: "switchChange", clickedRow: "clickedRow", cellChange: "cellChange" }, queries: [{ propertyName: "actionsRef", first: true, predicate: ["[actions]"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if ( hasActions || searchEnabled){\r\n    <div class=\"ui-table-filters\">\r\n        @if (searchEnabled) {\r\n            <uic-table-searcher \r\n                [showSearchButton]=\"showSearchButton\" \r\n                [showButtonText]=\"searcherShowButtonText\" \r\n                [searchOnKeydown]=\"searchOnKeydown\"\r\n                (filter)=\"search($event)\" \r\n                [placeholder]=\"searchPlaceholder\" >\r\n            </uic-table-searcher>\r\n        }\r\n        <div class=\"ui-filter-actions\">\r\n            <ng-content select=\"[actions]\"></ng-content>\r\n        </div>\r\n    </div>\r\n}\r\n<ng-content select=\"[filters]\"></ng-content>\r\n<div class=\"ui-table-wrapper\">\r\n    @if (headerText) {\r\n        <div class=\"ui-table-topbar\"> \r\n            <div>\r\n                {{headerText}} <span class=\"hightlited-note\"> ({{totalItems}}) </span> \r\n            </div>\r\n            <p> {{headerSubtitle}} </p>\r\n        </div>\r\n    }\r\n    <div class=\"ui-table-container\">    \r\n        <table class=\"ui-table\" [class.ui-striped]=\"striped\">\r\n            <thead>\r\n                <tr [class]=\" headerClass || 'header-'+headerBackgroundColor\">\r\n                    @for (header of columns; track $index) {\r\n                        <th [class.noshow-small]=\"header.hideOn == 'small'\"\r\n                            [class.noshow-medium]=\"header.hideOn == 'medium'\">\r\n                            <div [class]=\"'ui-th-wrap ui-alignment-'+alignment\" >\r\n                                @if (header.type=='checkbox') {\r\n                                    <div>\r\n                                        <ui-checkbox style=\"margin-right: 5px;\" [(ngModel)]=\"allSelected\" (ngModelChange)=\"toggleAll($event)\"></ui-checkbox>\r\n                                    </div>\r\n                                }\r\n                                {{header.label.toUpperCase() }} \r\n                                @if (header.sortEnable) {\r\n                                    <div class=\"ui-sort-arrow\" (click)=\"sortClick(header.key)\" [ngClass]=\"{'ui-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                            </div>\r\n                        </th>   \r\n                    }\r\n                </tr>\r\n            </thead>\r\n            <tbody>\r\n\r\n                @if (loading) {\r\n                    @for (item of [].constructor(squeletonRows); track $index) {\r\n                        <tr>\r\n                            @for (header of columns; track $index) {\r\n                                <td> <div class=\"ui-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\"  \r\n                            [class.ui-tr-highlighted]=\"row.highlighted\"\r\n                            [class.clickable-row]=\"rowClickable\"\r\n                            (click)=\"clickRow(row.id)\"\r\n                            >\r\n                            @for (header of columns; track $index) {\r\n                                <!-- TIPOS DE HEADERS -->\r\n                                <td [class]=\"getFontColor(row.data,header.key)\"\r\n                                    [class.noshow-small]=\"header.hideOn == 'small'\"\r\n                                    [class.noshow-medium]=\"header.hideOn == 'medium'\">\r\n\r\n                                    <div [class]=\"'ui-cell-content ui-alignment-'+alignment\" \r\n                                        [style.justify-content]=\"header.align||null\"\r\n                                        [style.width.px]=\"header.width || null\">\r\n                                        @if (header.type == 'actions') {         \r\n                                            <div class=\"ui-centered-cell-content\">\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                                                            [uiTooltip]=\"btn.tooltip??''\"\n                                                            size=\"s\"\r\n                                                            [disabled]=\"disabled\"\r\n                                                            [text]=\"btn.text??''\"\r\n                                                            [type]=\"btn.type??'filled'\"\r\n                                                            [iconOnly]=\"!btn.text\"\r\n                                                            [icon]=\"btn.icon??''\"\r\n                                                            [color]=\"btn.color??'black'\"\r\n                                                            (click)=\"doAction(row.id,btn.key,$event)\">\r\n                                                        </ui-button> \r\n                                                    }\r\n                                                } \r\n                                                @if ( header.moreActions && header.moreActions.length>0  ) {\r\n                                                    @for (ma of header.moreActions; track $index) {\r\n                                                        <ui-action-button [icon]=\"ma.icon??'ri-more-2-line'\" (optionSelected)=\"doAction(row.id,$event.id)\"  [options]=\"getMoreActions(ma.actions||[],row.data)\"></ui-action-button>\r\n                                                    }\r\n                                                }\r\n                                            </div>               \r\n                                        }\r\n                                        @else if (header.type == 'checkbox'){\r\n                                            <ui-checkbox [disabled]=\"disabled\" [ngModel]=\"checkedIds.has(row.id)\" [placeholder]=\"getValue(row.data,header.key)\" (ngModelChange)=\"toggleSelection(row.id,$event)\" ></ui-checkbox>                \r\n                                        }\r\n                                        @else if (isCellEditable(header)) {\r\n                                            @if ((header.editionType ?? 'input') === 'select') {\r\n                                                <div class=\"ui-editable-cell\" (click)=\"$event.stopPropagation()\">\r\n                                                    <ui-select\r\n                                                        [disabled]=\"disabled\"\r\n                                                        [options]=\"header.editionTypeOptions || []\"\r\n                                                        [ngModel]=\"getEditableCellValue(row.id, header.key)\"\r\n                                                        (ngModelChange)=\"onEditableSelectChange(row.id, row.data, header.key, $event)\">\r\n                                                    </ui-select>\r\n                                                </div>\r\n                                            } @else {\r\n                                                <div class=\"ui-editable-cell\" (click)=\"$event.stopPropagation()\">\r\n                                                    <ui-input [disabled]=\"disabled\">\r\n                                                        <input\r\n                                                            [disabled]=\"disabled\"\r\n                                                            [ngModel]=\"getEditableCellValue(row.id, header.key)\"\r\n                                                            (ngModelChange)=\"onEditableInputChange(row.id, header.key, $event)\"\r\n                                                            (blur)=\"onEditableInputBlur(row.id, row.data, header.key)\" />\r\n                                                    </ui-input>\r\n                                                </div>\r\n                                            }\r\n                                        }\r\n                                        @else {\r\n                                            <ui-item-value\r\n                                                [disabled]=\"disabled\"\r\n                                                [key]=\"header.key\"\r\n                                                [type]=\"header.type??'text'\"\r\n                                                [row]=\"row\"\r\n                                                [alignment]=\"alignment\"\r\n                                                [switchValidation]=\"switchValidation\"\r\n                                                (switchConfirmed)=\"switchHandler(row.id, $event, header.label)\"\r\n                                            ></ui-item-value>\r\n                                        }\r\n                                    </div>\r\n                                </td>\r\n                            }\r\n                        </tr>\r\n                        @if (fullViewRows.includes(row.id)) {\r\n                            <tr style=\"border-top: none ;\">\r\n                                <td [colSpan]=\"columns.length\">\r\n                                    <div class=\"full-space-row\">\r\n                                        <ui-short-table [columns]=\"columns\" [cols]=\"mobilePortletCols\" [data]=\"row\"></ui-short-table>\r\n                                    </div>\r\n                                </td>\r\n                            </tr>\r\n                        }\r\n                    }\r\n                    @empty {\r\n                        @if (showEmptyMessage) {\r\n                            <tr> \r\n                                <td [colSpan]=\"columns.length\">\r\n                                    <div class=\"ui-empty\">{{emptyMessage | uicTranslate}} </div>\r\n                                </td>\r\n                            </tr>\r\n                        }\r\n                    }\r\n                }\r\n            </tbody>\r\n        </table>\r\n    </div>\r\n    \r\n    @if (showPagination) {\r\n        <uic-table-pagination \r\n            [loading]=\"loading\" \r\n            [totalPages]=\"pages\" \r\n            [showText]=\"showTextPagination\"\r\n            [size]=\"size\"\r\n            [nextButtonText]=\"nextButtonText\"\r\n            [previousButtonText]=\"previousButtonText\"\r\n            [buttonSize]=\"buttonSize\"\r\n            (sizeChange)=\"sizeChabge($event)\"\r\n            (pageChange)=\"pageChage($event)\">\r\n        </uic-table-pagination>\r\n    }\r\n</div>\r\n", styles: [".ui-table-wrapper{overflow:hidden;border:solid 1px var(--table-border-color);border-radius:12px}.ui-table{width:100%;font-weight:400;border-collapse:collapse;background-color:#fff}.ui-table th{font-size:12px;height:calc(var(--table-spacing-ref) * 5.4);font-weight:500}.ui-table th .ui-th-wrap{white-space:nowrap;display:flex;align-items:center}.ui-table th .ui-th-wrap .ui-sort-arrow{font-size:12px;line-height:12px}.ui-table th .ui-th-wrap div{padding:1px;display:flex;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none;border-radius:50%;cursor:pointer;transition:ease .3s;color:var(--grey-400)}.ui-table th .ui-th-wrap div:hover{color:var(--primary-500)}.ui-table td{font-size:14px;color:var(--grey-600);height:calc(var(--table-spacing-ref) * 6)}.ui-table td,.ui-table th{padding:0 calc(var(--table-spacing-ref) * 2);vertical-align:middle;border:none}.ui-table tr{transition:ease .3s}.ui-table tr:hover{background-color:var(--table-hover)}.ui-table tbody tr{border-top:solid 1px var(--table-border-color)}.ui-table thead tr:hover{color:var(--grey-900)}tbody tr:last-child td{border-bottom:none}.ui-table-container{width:100%;overflow-x:auto}.ui-table-topbar{padding:calc(var(--table-spacing-ref) * 1.6) 20px;font-weight:600;font-size:18px;line-height:20px;gap:16px;background-color:#fff;align-items:center;color:var(--grey-900);border-bottom:solid 1px var(--table-border-color)}.ui-table-topbar p{font-size:14px;font-weight:400;color:var(--grey-400)}.ui-cell-content{padding:5px 0;display:flex;gap:4px;align-items:center;width:100%;min-width:fit-content;text-align:left}.ui-editable-cell{width:100%;min-width:150px}.ui-loader-tr{border-bottom:none!important}.ui-loader-tr td{padding:0}.ui-sort-active{color:var(--secondary-500)!important;border:solid 1px}.ui-empty{text-align:center;color:var(--grey-300)}.ui-table-filters{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:16px 0}@media (max-width: 479px){.ui-table-filters{padding:8px 0;flex-direction:column;align-items:normal;gap:8px}}.ui-filter-actions{display:flex;flex-wrap:wrap;gap:8px}.ui-alert{width:24px;height:24px;font-size:18px;background-color:var(--red-500);color:var(--white);border-radius:50%;padding:3px}.ui-loader{height:5px;width:100%;--c:no-repeat linear-gradient(var(--primary-500) 0 0);background:var(--c),var(--c),var(--primary-500);background-size:60% 100%;animation:l16 3s infinite}@keyframes l16{0%{background-position:-150% 0,-150% 0}66%{background-position:250% 0,-150% 0}to{background-position:250% 0,250% 0}}.ui-striped tbody tr:nth-child(odd){background-color:var(--grey-50);transition:ease .3s}.ui-striped tbody tr:nth-child(odd):hover{background-color:var(--primary-500)}.ui-tr-highlighted{border-left:solid 6px var(--green-500)}.ui-centered-cell-content{width:100%;display:flex;gap:5px;justify-content:center}.ui-alignment-center{justify-content:center;text-align:center}.ui-trc-primary{color:var(--primary-500)}.ui-trc-red{color:var(--red-500)}.ui-trc-blue{color:var(--blue-600)}.ui-trc-green{color:var(--green-500)}.ui-trc-yellow{color:var(--yellow-500)}.ui-trc-black{color:var(--grey-900)}.ui-trc-grey{color:var(--grey-300)}.clickable-row{cursor:pointer}.ui-row-loader{background:linear-gradient(90deg,var(--grey-100) 25%,var(--grey-200) 50%,var(--grey-100) 75%);height:20px;width:100%;background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:4px}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.header-grey{background-color:var(--table-header-background);color:var(--table-header-color)}.header-blue{color:var(--white);background-color:var(--blue-600)}.header-red{color:var(--white);background-color:var(--red-600)}.header-green{color:var(--white);background-color:var(--green-600)}.header-primary{color:var(--white);background-color:var(--primary-600)}.header-secondary{color:var(--white);background-color:var(--secondary-600)}.header-yellow{color:var(--white);background-color:var(--yellow-600)}.header-white{color:var(--table-header-color);background-color:#fff}.header-white:hover{background-color:var(--table-hover)!important}.full-space-row{width:100%;padding:20px;text-align:center}@media (max-width: 479px){.noshow-small{display:none}}@media (min-width: 480px) and (max-width: 767px){.noshow-medium{display:none}}@media (max-width: 479px){.noshow-medium{display:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: ItemValueComponent, selector: "ui-item-value", inputs: ["key", "type", "alignment", "row", "disabled", "data", "switchValidation"], outputs: ["switchConfirmed"] }, { kind: "component", type: UicShortTableComponent, selector: "ui-short-table", inputs: ["columns", "data", "loading", "disabled", "cols"] }, { kind: "component", type: UicActionButtonComponent, selector: "ui-action-button", inputs: ["icon", "options", "multiselect", "size"], outputs: ["optionSelected", "optionsApplied"] }, { kind: "component", type: UicTableUicSearcherComponent, selector: "uic-table-searcher", inputs: ["placeholder", "label", "searchOnKeydown", "showButtonText", "showSearchButton"], outputs: ["filter"] }, { kind: "component", type: UicTablePaginationComponent, selector: "uic-table-pagination", inputs: ["buttonSize", "currentPage", "totalPages", "size", "loading", "showText", "nextButtonText", "previousButtonText"], outputs: ["pageChange", "sizeChange"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }, { kind: "directive", type: UicToolTipDirective, selector: "[uiTooltip]", inputs: ["uiTooltip"] }, { kind: "component", type: UicCheckboxComponent, selector: "ui-checkbox", inputs: ["icon", "iconColor", "label", "tip", "type", "placeholder", "loading", "noPadding", "disabled"] }, { kind: "component", type: UicInputComponent, selector: "ui-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "disabled", "loading"] }, { kind: "component", type: UicSelectComponent, selector: "ui-select", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "showSubtitle", "disabled", "nonSelectedText", "noneText", "emptyText", "searcherEnabled", "loading", "nullable", "options"] }, { 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"] }], animations: [highlightRow, animatedRow] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableComponent, decorators: [{
             type: Component,
@@ -8657,7 +8764,7 @@ class UicTreeAdminComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTreeAdminComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTreeAdminComponent, isStandalone: true, selector: "ui-tree-admin", inputs: { searchEnabled: "searchEnabled", loading: "loading", emptyMessage: "emptyMessage", duplicateNameMessage: "duplicateNameMessage", tree: "tree" }, outputs: { edit: "edit", remove: "remove", deactivate: "deactivate", nameChange: "nameChange", create: "create" }, viewQueries: [{ propertyName: "childNameInputs", predicate: ["childNameInput"], descendants: true }, { propertyName: "parentNameInputs", predicate: ["parentNameInput"], descendants: true }], ngImport: i0, template: "@if (loading) {\r\n    <div class=\"tree-skeleton\">\r\n        <ui-skeleton-loader [inputs]=\"4\" [cols]=\"1\"></ui-skeleton-loader>\r\n    </div>\r\n} @else {\r\n    @if (searchEnabled) {\r\n        <div class=\"filter-bar\">\r\n            {{'tree.search_label' | uicTranslate}}\r\n            <ui-input>\r\n                <input #inp [placeholder]=\"'tree.search_placeholder' | uicTranslate\" [value]=\"filterTerm\" (input)=\"updateFilter($event)\">\r\n            </ui-input>\r\n            <ui-button\r\n                [iconOnly]=\"true\"\r\n                icon=\"ri-eraser-line\"\r\n                type=\"bordered\"\r\n                color=\"black\"\r\n                [disabled]=\"!filterTerm\"\r\n                (click)=\"clearFilter(); inp.focus()\"\r\n            ></ui-button>\r\n        </div>\r\n    }\r\n    @for (item of getVisibleTree(); track item.id) {\r\n        <div class=\"tree-item\" [class.is-collapsed]=\"!isExpanded(item)\">\r\n            <div class=\"tree-header\" (click)=\"toggleItem(item)\">\r\n                <i class=\"ri-arrow-down-s-line tree-arrow\" [class.is-collapsed]=\"!isExpanded(item)\"></i>\r\n                <div class=\"tree-header-name\">\r\n                    @if (isEditingParent(item)) {\r\n                        <input\r\n                            #parentNameInput\r\n                            class=\"tree-name-input\"\r\n                        [attr.data-id]=\"item.id\"\r\n                        [value]=\"item.name\"\r\n                        (input)=\"updateParentName(item, $event)\"\r\n                        (blur)=\"finalizeParentEdit(item)\"\r\n                        (keydown.enter)=\"finalizeParentEdit(item)\"\r\n                        (keydown.escape)=\"cancelParentEdit(item)\"\r\n                        (click)=\"$event.stopPropagation()\"\r\n                    />\r\n                    } @else {\r\n                        <div class=\"tree-name-text\" (click)=\"startEditParent(item, $event)\">\r\n                            {{item.name}}\r\n                        </div>\r\n                    }\r\n                    <span>{{item.children?.length || 0}}</span>\r\n                </div>\r\n                <div>\r\n                    <ui-switch\r\n                        [checked]=\"item.enabled\"\r\n                        (click)=\"$event.stopPropagation()\"\r\n                        (checkedChange)=\"emitDeactivateParent(item, $event)\"\r\n                    ></ui-switch>\r\n                </div>\r\n                <ui-button (click)=\"addSubItem(item, $event)\" icon=\"ri-add-line\" type=\"ghost\" [iconOnly]=\"true\" size=\"s\"></ui-button>\r\n                <ui-button (click)=\"emitEditParent(item, $event)\" icon=\"ri-edit-line\" type=\"ghost\" [iconOnly]=\"true\" size=\"s\"></ui-button>\r\n                @if (!item.children?.length) {\r\n                    <ui-button (click)=\"emitDeleteParent(item, $event)\" icon=\"ri-delete-bin-line\" type=\"ghost\" [iconOnly]=\"true\" size=\"s\"></ui-button>\r\n                }\r\n            </div>\r\n            <div class=\"tree-body\">\r\n                @if (getFilteredChildren(item).length) {\r\n                    @for (subitem of getFilteredChildren(item); track subitem.id) {\r\n                        <div\r\n                            class=\"tree-subitem\"\r\n                            [class.is-disabled]=\"!subitem.enabled\"\r\n                            [class.is-pending]=\"isPendingCreate(subitem)\"\r\n                            [class.is-parent-disabled]=\"!item.enabled\"\r\n                        >\r\n                            <div class=\"tree-subitem-name\">\r\n                                <i\r\n                                    class=\"ri-circle-fill tree-subitem-status\"\r\n                                    [class.is-enabled]=\"subitem.enabled\"\r\n                                    [class.is-disabled]=\"!subitem.enabled\"\r\n                                ></i>\r\n                                @if (isEditingChild(subitem)) {\r\n                                    <input\r\n                                        #childNameInput\r\n                                        class=\"tree-name-input tree-name-input--sub\"\r\n                                        [attr.data-id]=\"subitem.id\"\r\n                                        [value]=\"subitem.name\"\r\n                                        (input)=\"updateChildName(item, subitem, $event)\"\r\n                                        (blur)=\"finalizeChildEdit(item, subitem)\"\r\n                                        (keydown.enter)=\"finalizeChildEdit(item, subitem)\"\r\n                                        (keydown.escape)=\"cancelChildEdit(item, subitem)\"\r\n                                        (click)=\"$event.stopPropagation()\"\r\n                                    />\r\n                                } @else {\r\n                                    <span\r\n                                        class=\"tree-name-text\"\r\n                                        (click)=\"!isPendingCreate(subitem) && startEditChild(subitem, $event)\"\r\n                                    >{{subitem.name}}</span> \r\n                                    @if (subitem.tag) {\r\n                                        <span class=\"tree-tag tag-{{subitem.tagColor}}\" >{{subitem.tag}}</span>\r\n                                    }\r\n                                }\r\n                            </div>\r\n                            <div class=\"tree-subitem-actions\">\r\n                                <ui-switch\r\n                                    [checked]=\"subitem.enabled\"\r\n                                    [disabled]=\"isPendingCreate(subitem)\"\r\n                                    (checkedChange)=\"emitDeactivateChild(item, subitem, $event)\"\r\n                                ></ui-switch>\r\n                                <ui-button\r\n                                    (click)=\"emitEditChild(item, subitem, $event)\"\r\n                                    [disabled]=\"isPendingCreate(subitem)\"\r\n                                    icon=\"ri-edit-line\"\r\n                                    type=\"ghost\"\r\n                                    [iconOnly]=\"true\"\r\n                                    size=\"s\"\r\n                                ></ui-button>\r\n                                <ui-button \r\n                                    (click)=\"emitDeleteChild(item, subitem, $event)\" \r\n                                    icon=\"ri-delete-bin-line\" \r\n                                    [disabled]=\"isPendingCreate(subitem)\"\r\n                                    type=\"ghost\" \r\n                                    [iconOnly]=\"true\" size=\"s\"></ui-button>\r\n                            </div>\r\n                        </div>\r\n                    }\r\n                } @else {\r\n                    <div class=\"tree-empty\">\r\n                        {{emptyMessage | uicTranslate}}\r\n                    </div>\r\n                }\r\n            </div>\r\n        </div>\r\n    }\r\n}\r\n\r\n", styles: [":host{width:100%}.tree-item{border:solid 1px var(--grey-400);border-radius:10px;overflow:hidden;margin-bottom:4px;background:linear-gradient(180deg,var(--grey-100) 0%,var(--grey-50) 100%);transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}.tree-header{width:100%;display:flex;align-items:center;gap:5px;padding:4px 10px;border-bottom:solid 1px var(--grey-400);background-color:var(--grey-100);cursor:pointer;transition:background-color .16s ease}.tree-header:hover{background-color:var(--grey-200)}.tree-header-name{flex:1 1;display:flex;align-items:center;gap:10px}.tree-header-name span{border-radius:10px;padding:2px 10px;font-size:10px;color:var(--blue-800);background-color:var(--blue-100)}.tree-arrow{transition:transform .18s ease}.tree-arrow.is-collapsed{transform:rotate(-90deg)}.tree-body{background-color:var(--white);padding:2px 16px;display:flex;flex-direction:column;gap:1px;max-height:600px;opacity:1;transition:max-height .2s ease,opacity .2s ease,padding .2s ease}.tree-empty{padding:8px 10px;font-size:12px;color:var(--grey-500);background-color:var(--grey-50);border-radius:8px}.tree-subitem{color:var(--grey-700);border-radius:5px;padding:3px 15px;gap:5px;font-size:13px;display:flex;align-items:center}.tree-subitem-name{flex:1 1;display:inline-flex;align-items:center;gap:6px}.tree-subitem-status{font-size:10px;color:var(--grey-400)}.tree-subitem-status.is-enabled{color:var(--blue-500)}.tree-subitem-status.is-disabled{color:var(--grey-400)}.tree-subitem-actions{display:inline-flex;align-items:center;gap:4px;opacity:0;pointer-events:none;transform:translateY(-2px);transition:opacity .16s ease,transform .16s ease}.tree-subitem:hover{background-color:var(--blue-100)}.tree-subitem:hover .tree-subitem-actions{opacity:1;pointer-events:auto;transform:translateY(0)}.tree-subitem.is-disabled .tree-name-text,.tree-subitem.is-disabled .tree-name-input,.tree-subitem.is-parent-disabled .tree-name-text,.tree-subitem.is-parent-disabled .tree-name-input{color:var(--grey-500)}.tree-subitem.is-parent-disabled .tree-subitem-status{color:var(--grey-400)}.tree-subitem.is-pending .tree-name-text{cursor:default;color:var(--grey-500)}.tree-name-text{color:var(--grey-900);padding:0 20px;cursor:text}.filter-bar{display:flex;gap:10px;align-items:center;margin-bottom:10px;font-size:14px}.filter-bar input{flex:1 1}.tree-name-input{flex:1 1;min-width:0;border:solid 1px var(--grey-300);border-radius:6px;padding:7px;font-size:13px;color:var(--grey-900);background-color:var(--white);outline:none;transition:border-color .16s ease,box-shadow .16s ease;width:300px}.tree-name-input:focus{border-color:var(--blue-500);box-shadow:0 0 0 2px #3b82f626}.tree-name-input--sub{font-size:12px;padding:5px}.tree-item.is-collapsed .tree-body{max-height:0;opacity:0;padding-top:0;padding-bottom:0;overflow:hidden}.tree-skeleton{padding:8px;border:solid 1px var(--grey-400);border-radius:10px;background-color:var(--grey-50)}.tree-tag{font-size:11px;padding:2px 10px;font-weight:300;border-radius:10px}.tag-yellow{background-color:var(--yellow-100)}.tag-red{background-color:var(--red-100)}.tag-green{background-color:var(--green-100)}.tag-blue{background-color:var(--blue-100)}\n"], dependencies: [{ kind: "component", type: UicInputComponent, selector: "ui-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "disabled", "loading"], outputs: ["clickButton"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: UicSkeletonLoaderComponent, selector: "ui-skeleton-loader", inputs: ["inputs", "cols"] }, { kind: "component", type: UicSwichComponent, selector: "ui-switch", inputs: ["checked", "disabled", "placeholder", "label"], outputs: ["checkedChange"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTreeAdminComponent, isStandalone: true, selector: "ui-tree-admin", inputs: { searchEnabled: "searchEnabled", loading: "loading", emptyMessage: "emptyMessage", duplicateNameMessage: "duplicateNameMessage", tree: "tree" }, outputs: { edit: "edit", remove: "remove", deactivate: "deactivate", nameChange: "nameChange", create: "create" }, viewQueries: [{ propertyName: "childNameInputs", predicate: ["childNameInput"], descendants: true }, { propertyName: "parentNameInputs", predicate: ["parentNameInput"], descendants: true }], ngImport: i0, template: "@if (loading) {\r\n    <div class=\"tree-skeleton\">\r\n        <ui-skeleton-loader [inputs]=\"4\" [cols]=\"1\"></ui-skeleton-loader>\r\n    </div>\r\n} @else {\r\n    @if (searchEnabled) {\r\n        <div class=\"filter-bar\">\r\n            {{'tree.search_label' | uicTranslate}}\r\n            <ui-input>\r\n                <input #inp [placeholder]=\"'tree.search_placeholder' | uicTranslate\" [value]=\"filterTerm\" (input)=\"updateFilter($event)\">\r\n            </ui-input>\r\n            <ui-button\r\n                [iconOnly]=\"true\"\r\n                icon=\"ri-eraser-line\"\r\n                type=\"bordered\"\r\n                color=\"black\"\r\n                [disabled]=\"!filterTerm\"\r\n                (click)=\"clearFilter(); inp.focus()\"\r\n            ></ui-button>\r\n        </div>\r\n    }\r\n    @for (item of getVisibleTree(); track item.id) {\r\n        <div class=\"tree-item\" [class.is-collapsed]=\"!isExpanded(item)\">\r\n            <div class=\"tree-header\" (click)=\"toggleItem(item)\">\r\n                <i class=\"ri-arrow-down-s-line tree-arrow\" [class.is-collapsed]=\"!isExpanded(item)\"></i>\r\n                <div class=\"tree-header-name\">\r\n                    @if (isEditingParent(item)) {\r\n                        <input\r\n                            #parentNameInput\r\n                            class=\"tree-name-input\"\r\n                        [attr.data-id]=\"item.id\"\r\n                        [value]=\"item.name\"\r\n                        (input)=\"updateParentName(item, $event)\"\r\n                        (blur)=\"finalizeParentEdit(item)\"\r\n                        (keydown.enter)=\"finalizeParentEdit(item)\"\r\n                        (keydown.escape)=\"cancelParentEdit(item)\"\r\n                        (click)=\"$event.stopPropagation()\"\r\n                    />\r\n                    } @else {\r\n                        <div class=\"tree-name-text\" (click)=\"startEditParent(item, $event)\">\r\n                            {{item.name}}\r\n                        </div>\r\n                    }\r\n                    <span>{{item.children?.length || 0}}</span>\r\n                </div>\r\n                <div>\r\n                    <ui-switch\r\n                        [checked]=\"item.enabled\"\r\n                        (click)=\"$event.stopPropagation()\"\r\n                        (checkedChange)=\"emitDeactivateParent(item, $event)\"\r\n                    ></ui-switch>\r\n                </div>\r\n                <ui-button (click)=\"addSubItem(item, $event)\" icon=\"ri-add-line\" type=\"ghost\" [iconOnly]=\"true\" size=\"s\"></ui-button>\r\n                <ui-button (click)=\"emitEditParent(item, $event)\" icon=\"ri-edit-line\" type=\"ghost\" [iconOnly]=\"true\" size=\"s\"></ui-button>\r\n                @if (!item.children?.length) {\r\n                    <ui-button (click)=\"emitDeleteParent(item, $event)\" icon=\"ri-delete-bin-line\" type=\"ghost\" [iconOnly]=\"true\" size=\"s\"></ui-button>\r\n                }\r\n            </div>\r\n            <div class=\"tree-body\">\r\n                @if (getFilteredChildren(item).length) {\r\n                    @for (subitem of getFilteredChildren(item); track subitem.id) {\r\n                        <div\r\n                            class=\"tree-subitem\"\r\n                            [class.is-disabled]=\"!subitem.enabled\"\r\n                            [class.is-pending]=\"isPendingCreate(subitem)\"\r\n                            [class.is-parent-disabled]=\"!item.enabled\"\r\n                        >\r\n                            <div class=\"tree-subitem-name\">\r\n                                <i\r\n                                    class=\"ri-circle-fill tree-subitem-status\"\r\n                                    [class.is-enabled]=\"subitem.enabled\"\r\n                                    [class.is-disabled]=\"!subitem.enabled\"\r\n                                ></i>\r\n                                @if (isEditingChild(subitem)) {\r\n                                    <input\r\n                                        #childNameInput\r\n                                        class=\"tree-name-input tree-name-input--sub\"\r\n                                        [attr.data-id]=\"subitem.id\"\r\n                                        [value]=\"subitem.name\"\r\n                                        (input)=\"updateChildName(item, subitem, $event)\"\r\n                                        (blur)=\"finalizeChildEdit(item, subitem)\"\r\n                                        (keydown.enter)=\"finalizeChildEdit(item, subitem)\"\r\n                                        (keydown.escape)=\"cancelChildEdit(item, subitem)\"\r\n                                        (click)=\"$event.stopPropagation()\"\r\n                                    />\r\n                                } @else {\r\n                                    <span\r\n                                        class=\"tree-name-text\"\r\n                                        (click)=\"!isPendingCreate(subitem) && startEditChild(subitem, $event)\"\r\n                                    >{{subitem.name}}</span> \r\n                                    @if (subitem.tag) {\r\n                                        <span class=\"tree-tag tag-{{subitem.tagColor}}\" >{{subitem.tag}}</span>\r\n                                    }\r\n                                }\r\n                            </div>\r\n                            <div class=\"tree-subitem-actions\">\r\n                                <ui-switch\r\n                                    [checked]=\"subitem.enabled\"\r\n                                    [disabled]=\"isPendingCreate(subitem)\"\r\n                                    (checkedChange)=\"emitDeactivateChild(item, subitem, $event)\"\r\n                                ></ui-switch>\r\n                                <ui-button\r\n                                    (click)=\"emitEditChild(item, subitem, $event)\"\r\n                                    [disabled]=\"isPendingCreate(subitem)\"\r\n                                    icon=\"ri-edit-line\"\r\n                                    type=\"ghost\"\r\n                                    [iconOnly]=\"true\"\r\n                                    size=\"s\"\r\n                                ></ui-button>\r\n                                <ui-button \r\n                                    (click)=\"emitDeleteChild(item, subitem, $event)\" \r\n                                    icon=\"ri-delete-bin-line\" \r\n                                    [disabled]=\"isPendingCreate(subitem)\"\r\n                                    type=\"ghost\" \r\n                                    [iconOnly]=\"true\" size=\"s\"></ui-button>\r\n                            </div>\r\n                        </div>\r\n                    }\r\n                } @else {\r\n                    <div class=\"tree-empty\">\r\n                        {{emptyMessage | uicTranslate}}\r\n                    </div>\r\n                }\r\n            </div>\r\n        </div>\r\n    }\r\n}\r\n\r\n", styles: [":host{width:100%}.tree-item{border:solid 1px var(--grey-400);border-radius:10px;overflow:hidden;margin-bottom:4px;background:linear-gradient(180deg,var(--grey-100) 0%,var(--grey-50) 100%);transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}.tree-header{width:100%;display:flex;align-items:center;gap:5px;padding:4px 10px;border-bottom:solid 1px var(--grey-400);background-color:var(--grey-100);cursor:pointer;transition:background-color .16s ease}.tree-header:hover{background-color:var(--grey-200)}.tree-header-name{flex:1 1;display:flex;align-items:center;gap:10px}.tree-header-name span{border-radius:10px;padding:2px 10px;font-size:10px;color:var(--blue-800);background-color:var(--blue-100)}.tree-arrow{transition:transform .18s ease}.tree-arrow.is-collapsed{transform:rotate(-90deg)}.tree-body{background-color:var(--white);padding:2px 16px;display:flex;flex-direction:column;gap:1px;max-height:600px;opacity:1;transition:max-height .2s ease,opacity .2s ease,padding .2s ease}.tree-empty{padding:8px 10px;font-size:12px;color:var(--grey-500);background-color:var(--grey-50);border-radius:8px}.tree-subitem{color:var(--grey-700);border-radius:5px;padding:3px 15px;gap:5px;font-size:13px;display:flex;align-items:center}.tree-subitem-name{flex:1 1;display:inline-flex;align-items:center;gap:6px}.tree-subitem-status{font-size:10px;color:var(--grey-400)}.tree-subitem-status.is-enabled{color:var(--blue-500)}.tree-subitem-status.is-disabled{color:var(--grey-400)}.tree-subitem-actions{display:inline-flex;align-items:center;gap:4px;opacity:0;pointer-events:none;transform:translateY(-2px);transition:opacity .16s ease,transform .16s ease}.tree-subitem:hover{background-color:var(--blue-100)}.tree-subitem:hover .tree-subitem-actions{opacity:1;pointer-events:auto;transform:translateY(0)}.tree-subitem.is-disabled .tree-name-text,.tree-subitem.is-disabled .tree-name-input,.tree-subitem.is-parent-disabled .tree-name-text,.tree-subitem.is-parent-disabled .tree-name-input{color:var(--grey-500)}.tree-subitem.is-parent-disabled .tree-subitem-status{color:var(--grey-400)}.tree-subitem.is-pending .tree-name-text{cursor:default;color:var(--grey-500)}.tree-name-text{color:var(--grey-900);padding:0 20px;cursor:text}.filter-bar{display:flex;gap:10px;align-items:center;margin-bottom:10px;font-size:14px}.filter-bar input{flex:1 1}.tree-name-input{flex:1 1;min-width:0;border:solid 1px var(--grey-300);border-radius:6px;padding:7px;font-size:13px;color:var(--grey-900);background-color:var(--white);outline:none;transition:border-color .16s ease,box-shadow .16s ease;width:300px}.tree-name-input:focus{border-color:var(--blue-500);box-shadow:0 0 0 2px #3b82f626}.tree-name-input--sub{font-size:12px;padding:5px}.tree-item.is-collapsed .tree-body{max-height:0;opacity:0;padding-top:0;padding-bottom:0;overflow:hidden}.tree-skeleton{padding:8px;border:solid 1px var(--grey-400);border-radius:10px;background-color:var(--grey-50)}.tree-tag{font-size:11px;padding:2px 10px;font-weight:300;border-radius:10px}.tag-yellow{background-color:var(--yellow-100)}.tag-red{background-color:var(--red-100)}.tag-green{background-color:var(--green-100)}.tag-blue{background-color:var(--blue-100)}\n"], dependencies: [{ kind: "component", type: UicInputComponent, selector: "ui-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "disabled", "loading"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: UicSkeletonLoaderComponent, selector: "ui-skeleton-loader", inputs: ["inputs", "cols"] }, { kind: "component", type: UicSwichComponent, selector: "ui-switch", inputs: ["checked", "disabled", "placeholder", "label"], outputs: ["checkedChange"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTreeAdminComponent, decorators: [{
             type: Component,
@@ -9454,7 +9561,7 @@ class UicTagSelectorComponent extends base {
                 useExisting: forwardRef(() => UicTagSelectorComponent),
                 multi: true
             }
-        ], usesInheritance: true, ngImport: i0, template: "\r\n<ui-input-wrapper\r\n    [icon]=\"icon\"\r\n    [iconColor]=\"iconColor\"\r\n    [label]=\"label\"\r\n    [error]=\"error\"\r\n    [tip]=\"tip\"\r\n    [disabled]=\"disabled\">\r\n<div class=\"tags-reel\">\r\n    @for (item of selectedTags; track $index) {\r\n        <div [class]=\"'selected-tag lc-'+item.color\" ><i [class]=\"item.icon??'ri-hashtag'\"></i>{{item.name}} <i (click)=\"removeTag(item)\" class=\"ri-close-large-line close-icon\"></i> </div>\r\n    }\r\n    <ui-overlay-card>\r\n        <ui-button button type=\"bordered\" color=\"black\" icon=\"ri-add-line\" size=\"s\">{{buttonText | uicTranslate}}</ui-button>\r\n        <ng-container content >\r\n\r\n            <ui-input internalIcon=\"ri-search-line\" internalIconColor=\"blue\">\r\n                <input [placeholder]=\"placeholder | uicTranslate\" [(ngModel)]=\"filterText\" (ngModelChange)=\"filter()\" >\r\n            </ui-input>\r\n            <div class=\"tags-overflow\">\r\n                <div class=\"tags-title\">{{predefinedTitle | uicTranslate}}</div>\r\n                @for(item of filterArray; track $index){\r\n                    <div (click)=\"select(item)\" class=\"tag-option\"> \r\n                        <i class=\"ri-circle-fill f-grey\"></i> \r\n                        <div style=\"flex: 1 1;\">{{item.name}}</div>   \r\n                        @if ( isSelected(item.name) ) {\r\n                            <i class=\"ri-check-line\"></i>  \r\n                        }\r\n                    </div>\r\n                }\r\n                <div class=\"new-tag\">        \r\n                    <div class=\"new-tag-label\">{{newTagTitle | uicTranslate}}:</div>\r\n                    <div class=\"input-tag\">\r\n                        <input [(ngModel)]=\"newTagLabel\" (keydown.enter)=\"createTag()\" type=\"text\">\r\n                        <ui-button (click)=\"createTag()\" size=\"s\" [iconOnly]=\"true\" icon=\"ri-add-line\"></ui-button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </ui-overlay-card>\r\n</div>   \r\n</ui-input-wrapper>\r\n", styles: [".tags-reel{display:flex;gap:10px;flex-wrap:wrap}.selected-tag{display:flex;gap:5px;align-items:center;font-size:12px;line-height:28px;padding:0 12px;border:solid 1px var(--grey-200);border-radius:20px}.selected-tag i{font-size:14px}.close-icon{color:var(--red-600);cursor:pointer}.tags-title{font-size:13px;padding:4px;font-weight:600;margin-bottom:5px;color:var(--grey-500)}.tag-option{font-size:14px;padding:5px 10px;border-radius:5px;transition:ease;display:flex;gap:10px;color:var(--grey-600);cursor:pointer}.tag-option:hover{background-color:var(--grey-200)}.tags-overflow{display:flex;flex-direction:column;gap:2px;padding:3px;max-height:250px;overflow:auto}.new-tag{padding:5px;border-top:solid 1px var(--grey-200)}.new-tag-label{font-size:13px;line-height:25px;color:var(--grey-500)}.input-tag{display:flex;gap:5px}.input-tag input{border:solid 1px var(--grey-300);border-radius:8px;padding:0 10px}.f-grey{color:var(--grey-200)}.lc-blue{background-color:var(--blue-100);border-color:var(--blue-600);color:var(--blue-700)}\n"], dependencies: [{ kind: "component", type: UicOverlayCardComponent, selector: "ui-overlay-card" }, { kind: "component", type: UicInputComponent, selector: "ui-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "disabled", "loading"], outputs: ["clickButton"] }, { 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: InputWrapperComponent, selector: "ui-input-wrapper", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }] });
+        ], usesInheritance: true, ngImport: i0, template: "\r\n<ui-input-wrapper\r\n    [icon]=\"icon\"\r\n    [iconColor]=\"iconColor\"\r\n    [label]=\"label\"\r\n    [error]=\"error\"\r\n    [tip]=\"tip\"\r\n    [disabled]=\"disabled\">\r\n<div class=\"tags-reel\">\r\n    @for (item of selectedTags; track $index) {\r\n        <div [class]=\"'selected-tag lc-'+item.color\" ><i [class]=\"item.icon??'ri-hashtag'\"></i>{{item.name}} <i (click)=\"removeTag(item)\" class=\"ri-close-large-line close-icon\"></i> </div>\r\n    }\r\n    <ui-overlay-card>\r\n        <ui-button button type=\"bordered\" color=\"black\" icon=\"ri-add-line\" size=\"s\">{{buttonText | uicTranslate}}</ui-button>\r\n        <ng-container content >\r\n\r\n            <ui-input internalIcon=\"ri-search-line\" internalIconColor=\"blue\">\r\n                <input [placeholder]=\"placeholder | uicTranslate\" [(ngModel)]=\"filterText\" (ngModelChange)=\"filter()\" >\r\n            </ui-input>\r\n            <div class=\"tags-overflow\">\r\n                <div class=\"tags-title\">{{predefinedTitle | uicTranslate}}</div>\r\n                @for(item of filterArray; track $index){\r\n                    <div (click)=\"select(item)\" class=\"tag-option\"> \r\n                        <i class=\"ri-circle-fill f-grey\"></i> \r\n                        <div style=\"flex: 1 1;\">{{item.name}}</div>   \r\n                        @if ( isSelected(item.name) ) {\r\n                            <i class=\"ri-check-line\"></i>  \r\n                        }\r\n                    </div>\r\n                }\r\n                <div class=\"new-tag\">        \r\n                    <div class=\"new-tag-label\">{{newTagTitle | uicTranslate}}:</div>\r\n                    <div class=\"input-tag\">\r\n                        <input [(ngModel)]=\"newTagLabel\" (keydown.enter)=\"createTag()\" type=\"text\">\r\n                        <ui-button (click)=\"createTag()\" size=\"s\" [iconOnly]=\"true\" icon=\"ri-add-line\"></ui-button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </ui-overlay-card>\r\n</div>   \r\n</ui-input-wrapper>\r\n", styles: [".tags-reel{display:flex;gap:10px;flex-wrap:wrap}.selected-tag{display:flex;gap:5px;align-items:center;font-size:12px;line-height:28px;padding:0 12px;border:solid 1px var(--grey-200);border-radius:20px}.selected-tag i{font-size:14px}.close-icon{color:var(--red-600);cursor:pointer}.tags-title{font-size:13px;padding:4px;font-weight:600;margin-bottom:5px;color:var(--grey-500)}.tag-option{font-size:14px;padding:5px 10px;border-radius:5px;transition:ease;display:flex;gap:10px;color:var(--grey-600);cursor:pointer}.tag-option:hover{background-color:var(--grey-200)}.tags-overflow{display:flex;flex-direction:column;gap:2px;padding:3px;max-height:250px;overflow:auto}.new-tag{padding:5px;border-top:solid 1px var(--grey-200)}.new-tag-label{font-size:13px;line-height:25px;color:var(--grey-500)}.input-tag{display:flex;gap:5px}.input-tag input{border:solid 1px var(--grey-300);border-radius:8px;padding:0 10px}.f-grey{color:var(--grey-200)}.lc-blue{background-color:var(--blue-100);border-color:var(--blue-600);color:var(--blue-700)}\n"], dependencies: [{ kind: "component", type: UicOverlayCardComponent, selector: "ui-overlay-card" }, { kind: "component", type: UicInputComponent, selector: "ui-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "disabled", "loading"] }, { 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: InputWrapperComponent, selector: "ui-input-wrapper", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTagSelectorComponent, decorators: [{
             type: Component,
@@ -9657,6 +9764,7 @@ const FIELDS_CONFIG = [
     { value: 'pool', icon: 'ri-bubble-chart-line', detail: 'Seleccion con lista y detalle por item', label: 'Pool de opciones', properties: ['options', 'multyEnabled', 'poolEnabledListView', 'poolTitle'], visibility: { outputType: 'selectedDetailed[]', operators: ['isEmpty', 'isNotEmpty'] } },
     { value: 'file', icon: 'ri-attachment-line', detail: 'Carga de archivos', label: 'Archivo', properties: ['multyEnabled', 'fileTypes', 'iaValidation', 'iaValidationPrompt'], visibility: { outputType: 'UicFileInputValue[]', operators: ['isEmpty', 'isNotEmpty'] } },
     { value: 'searcher', icon: 'ri-seo-line', detail: 'Buscador con fuente de datos externa', label: 'Buscador', properties: ['placeholder', 'optionsSource.key', 'optionsSource.idField', 'optionsSource.textField', 'optionsSource.textTemplate', 'optionsSource.dependsOn', 'optionsSource.paramName'], visibility: { outputType: 'object', operators: ['isEmpty', 'isNotEmpty'] } },
+    { value: 'multisearcher', icon: 'ri-user-add-line', detail: 'Buscador con selección múltiple y fuente de datos externa', label: 'Buscador múltiple', properties: ['placeholder', 'optionsSource.key', 'optionsSource.idField', 'optionsSource.textField', 'optionsSource.textTemplate', 'optionsSource.dependsOn', 'optionsSource.paramName'], visibility: { outputType: 'object[]', operators: ['isEmpty', 'isNotEmpty'] } },
     { value: 'slider', icon: 'ri-equalizer-2-line', detail: 'Control deslizante continuo', label: 'Deslizador', properties: ['min', 'max', 'sliderInterval', 'sliderMarks'], visibility: { outputType: 'number', operators: ['equals', 'notEquals', 'greaterThan', 'lessThan', 'isEmpty', 'isNotEmpty'] } },
     { value: 'repeater', icon: 'ri-stack-line', detail: 'Grupo de campos repetibles', label: 'Repetidor', properties: ['repeaterMinItems', 'repeaterMaxItems', 'repeaterAddLabel', 'repeaterRemoveLabel', 'repeaterItemTitle'], visibility: { outputType: 'object[]', operators: ['isEmpty', 'isNotEmpty'] } },
     { value: 'computed', icon: 'ri-calculator-line', detail: 'Campo calculado automáticamente desde otros campos', label: 'Campo calculado', properties: ['computedSource.key', 'computedSource.dependsOn', 'minLength', 'maxLength'], visibility: { outputType: 'string', operators: ['equals', 'notEquals', 'includes', 'notIncludes', 'isEmpty', 'isNotEmpty'] } }
@@ -9806,6 +9914,7 @@ const EXTRA_FORM_FIELDS = [
         internalIcon: 'ri-database-2-line',
         tip: 'form_builder.extra.optionsSourceKey_tip',
         type: 'text',
+        selectNullable: true,
         selectSearchEnabled: true,
         showSubtitle: true
     },
@@ -10277,7 +10386,7 @@ class FieldEditorComponent {
     });
     hasOptionsSourceConfig = computed(() => {
         const fieldType = this.fieldType();
-        return !!fieldType && (fieldType.value === 'searcher' || fieldType.properties.includes('options'));
+        return !!fieldType && (fieldType.value === 'searcher' || fieldType.value === 'multisearcher' || fieldType.properties.includes('options'));
     });
     hasExternalOptionsSource = computed(() => !!this.localField().optionsSource?.key);
     isRepeater = computed(() => this.fieldType()?.value === 'repeater');
@@ -10504,6 +10613,7 @@ class FieldEditorComponent {
     }
     updateFieldValues(fr) {
         const current = this.localField();
+        const hadExternalOptionsSource = !!current.optionsSource?.key;
         const isAutoName = /^(field|sf)_\d+$/.test(current.name ?? '');
         const isNameManuallySet = this.config().nameManuallySet ?? false;
         if (fr['name'] !== undefined && fr['name'] !== current.name) {
@@ -10519,6 +10629,10 @@ class FieldEditorComponent {
             ...fr,
             ...(derivedName !== undefined ? { name: derivedName } : {})
         };
+        const hasExternalOptionsSource = !!updatedField.optionsSource?.key;
+        if (!hadExternalOptionsSource && hasExternalOptionsSource && this.hasOptions()) {
+            updatedField.options = [];
+        }
         this.localField.set(updatedField);
         this.fieldChange.emit(updatedField);
     }
@@ -11419,8 +11533,9 @@ class UicUserFormbuilderComponent {
             const { optionsSource: _optionsSource, ...restFieldData } = cleanFieldData;
             return this.cleanExternalValidationConfig(restFieldData, externalValidation);
         }
+        const { options: _manualOptions, ...fieldDataWithoutManualOptions } = cleanFieldData;
         return this.cleanExternalValidationConfig({
-            ...cleanFieldData,
+            ...fieldDataWithoutManualOptions,
             optionsSource: cleanOptionsSource
         }, externalValidation);
     }
@@ -11669,7 +11784,7 @@ class RuleDefinirionComponent {
         return condition.id === 0 ? (condition.temporalId ?? '') : condition.id;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: RuleDefinirionComponent, deps: [{ token: MODAL_DATA }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: RuleDefinirionComponent, isStandalone: true, selector: "lib-rule-definirion", ngImport: i0, template: "\n@if (newRule) {\n    <ui-form-wrapper #formWrapper \n        (formChange)=\"updateFormNewRule($event)\"\n        (formSubmit)=\"createAndSelectRule($event)\" \n        [initialValues]=\"initialValues\"\n        [fields]=\"fields\" \n        [cols]=\"2\"></ui-form-wrapper>\n    <div class=\"condition-btns\">\n        <ui-button icon=\"ri-arrow-left-line\" (click)=\"newRule = false\" color=\"black\" type=\"bordered\">{{ 'rule_builder.definition.cancel_and_back' | uicTranslate }}</ui-button>\n        <ui-button (click)=\"formWrapper.submit()\" icon=\"ri-check-line\" color=\"black\">{{ 'rule_builder.definition.create_and_select' | uicTranslate }}</ui-button>\n    </div>\n} @else {\n    <div class=\"condition-searcher\">\n        <ui-input>\n            <input [(ngModel)]=\"searchTerm\" (ngModelChange)=\"onSearchTermChange()\" [placeholder]=\"'rule_builder.definition.search_placeholder' | uicTranslate\" type=\"text\">\n        </ui-input>\n        <ui-button (click)=\"newRule = true\" color=\"black\">{{ 'rule_builder.definition.new_rule' | uicTranslate }}</ui-button>\n    </div>\n\n    @if (paginatedConditions.length > 0) {\n        @for (condition of paginatedConditions; track $index) {\n            <div class=\"condition\" [class.condition-selected]=\"isSelected(condition)\">\n                <i class=\"ri-align-item-horizontal-center-line\"></i>\n                <div style=\"flex: 1 1;\">\n                    <div class=\"condition-title\"><span [innerHTML]=\"highlightSearch(condition.description)\"></span></div>\n                    @if (customNamesEnabled) {\n                        <div class=\"condition-body\">\n                            <span class=\"condition-field\" [innerHTML]=\"highlightSearch(condition.fieldName)\"></span>\n                            <span class=\"condition-operator\" [innerHTML]=\"highlightSearch(condition.operatorName)\"></span>\n                            <span class=\"condition-value\" [innerHTML]=\"highlightSearch(condition.value)\"></span>\n                        </div>\n                    }\n                </div>\n                @if (!isSelected(condition)) {\n                    <ui-button (click)=\"select(condition)\" color=\"primary\" size=\"s\" type=\"bordered\">{{ 'common.select' | uicTranslate }}</ui-button>\n                }\n            </div>\n        }\n    } @else {\n        <div class=\"condition\">\n            <div class=\"condition-emptytext\">\n                {{ 'rule_builder.definition.no_results' | uicTranslate }}\n            </div>\n        </div>\n    }\n\n    <div class=\"condition-pagination\">\n        <ui-button [disabled]=\"!canGoToPreviousPage\" (click)=\"goToPreviousPage()\" color=\"black\" size=\"s\" type=\"bordered\">{{ 'rule_builder.definition.previous' | uicTranslate }}</ui-button>\n        <div><b>{{ currentPage }}</b> / {{ totalPages }}</div>\n        <ui-button [disabled]=\"!canGoToNextPage\" (click)=\"goToNextPage()\" color=\"black\" size=\"s\" type=\"bordered\">{{ 'rule_builder.definition.next' | uicTranslate }}</ui-button>\n    </div>\n}\n", styles: [".condition{border:solid 1px var(--grey-300);border-radius:10px;background-color:var(--grey-50);padding:6px;margin-bottom:4px;display:flex;align-items:center;gap:10px}.condition-emptytext{font-size:12px;text-align:center;color:var(--grey-400);padding:10px;width:100%}.condition i{color:var(--blue-600)}.condition-selected{border-color:var(--blue-500);background:linear-gradient(135deg,var(--blue-50) 0%,#eef6ff 100%);box-shadow:inset 0 0 0 1px #2563eb1f}.condition-selected .condition-title{color:var(--blue-800)}.condition-selected .condition-body,.condition-selected i{color:var(--blue-700)}.condition-title{font-size:14px;font-weight:500;line-height:16px}.condition-body{color:var(--grey-500);display:flex;gap:5px;font-size:12px}.condition-searcher{display:flex;gap:25px;margin-bottom:10px}.condition-pagination{margin-top:15px;display:flex;font-size:14px;align-items:center;justify-content:space-between}.condition-btns{padding-top:10px;border-top:solid 1px var(--grey-200);display:flex;justify-content:space-between}\n"], dependencies: [{ 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: UicFormWrapperComponent, selector: "ui-form-wrapper", inputs: ["schema", "fields", "cols", "externalData", "selectOptionsResolver", "computedFieldResolver", "externalValidatorResolver", "loading", "disabled", "showButtons", "fillSelects", "initialValues", "focusFieldName", "focusFieldTrigger", "fileUidResolverFn"], outputs: ["formSubmit", "formChange", "optionsSourceError"] }, { kind: "component", type: UicInputComponent, selector: "ui-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "disabled", "loading"], outputs: ["clickButton"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: RuleDefinirionComponent, isStandalone: true, selector: "lib-rule-definirion", ngImport: i0, template: "\n@if (newRule) {\n    <ui-form-wrapper #formWrapper \n        (formChange)=\"updateFormNewRule($event)\"\n        (formSubmit)=\"createAndSelectRule($event)\" \n        [initialValues]=\"initialValues\"\n        [fields]=\"fields\" \n        [cols]=\"2\"></ui-form-wrapper>\n    <div class=\"condition-btns\">\n        <ui-button icon=\"ri-arrow-left-line\" (click)=\"newRule = false\" color=\"black\" type=\"bordered\">{{ 'rule_builder.definition.cancel_and_back' | uicTranslate }}</ui-button>\n        <ui-button (click)=\"formWrapper.submit()\" icon=\"ri-check-line\" color=\"black\">{{ 'rule_builder.definition.create_and_select' | uicTranslate }}</ui-button>\n    </div>\n} @else {\n    <div class=\"condition-searcher\">\n        <ui-input>\n            <input [(ngModel)]=\"searchTerm\" (ngModelChange)=\"onSearchTermChange()\" [placeholder]=\"'rule_builder.definition.search_placeholder' | uicTranslate\" type=\"text\">\n        </ui-input>\n        <ui-button (click)=\"newRule = true\" color=\"black\">{{ 'rule_builder.definition.new_rule' | uicTranslate }}</ui-button>\n    </div>\n\n    @if (paginatedConditions.length > 0) {\n        @for (condition of paginatedConditions; track $index) {\n            <div class=\"condition\" [class.condition-selected]=\"isSelected(condition)\">\n                <i class=\"ri-align-item-horizontal-center-line\"></i>\n                <div style=\"flex: 1 1;\">\n                    <div class=\"condition-title\"><span [innerHTML]=\"highlightSearch(condition.description)\"></span></div>\n                    @if (customNamesEnabled) {\n                        <div class=\"condition-body\">\n                            <span class=\"condition-field\" [innerHTML]=\"highlightSearch(condition.fieldName)\"></span>\n                            <span class=\"condition-operator\" [innerHTML]=\"highlightSearch(condition.operatorName)\"></span>\n                            <span class=\"condition-value\" [innerHTML]=\"highlightSearch(condition.value)\"></span>\n                        </div>\n                    }\n                </div>\n                @if (!isSelected(condition)) {\n                    <ui-button (click)=\"select(condition)\" color=\"primary\" size=\"s\" type=\"bordered\">{{ 'common.select' | uicTranslate }}</ui-button>\n                }\n            </div>\n        }\n    } @else {\n        <div class=\"condition\">\n            <div class=\"condition-emptytext\">\n                {{ 'rule_builder.definition.no_results' | uicTranslate }}\n            </div>\n        </div>\n    }\n\n    <div class=\"condition-pagination\">\n        <ui-button [disabled]=\"!canGoToPreviousPage\" (click)=\"goToPreviousPage()\" color=\"black\" size=\"s\" type=\"bordered\">{{ 'rule_builder.definition.previous' | uicTranslate }}</ui-button>\n        <div><b>{{ currentPage }}</b> / {{ totalPages }}</div>\n        <ui-button [disabled]=\"!canGoToNextPage\" (click)=\"goToNextPage()\" color=\"black\" size=\"s\" type=\"bordered\">{{ 'rule_builder.definition.next' | uicTranslate }}</ui-button>\n    </div>\n}\n", styles: [".condition{border:solid 1px var(--grey-300);border-radius:10px;background-color:var(--grey-50);padding:6px;margin-bottom:4px;display:flex;align-items:center;gap:10px}.condition-emptytext{font-size:12px;text-align:center;color:var(--grey-400);padding:10px;width:100%}.condition i{color:var(--blue-600)}.condition-selected{border-color:var(--blue-500);background:linear-gradient(135deg,var(--blue-50) 0%,#eef6ff 100%);box-shadow:inset 0 0 0 1px #2563eb1f}.condition-selected .condition-title{color:var(--blue-800)}.condition-selected .condition-body,.condition-selected i{color:var(--blue-700)}.condition-title{font-size:14px;font-weight:500;line-height:16px}.condition-body{color:var(--grey-500);display:flex;gap:5px;font-size:12px}.condition-searcher{display:flex;gap:25px;margin-bottom:10px}.condition-pagination{margin-top:15px;display:flex;font-size:14px;align-items:center;justify-content:space-between}.condition-btns{padding-top:10px;border-top:solid 1px var(--grey-200);display:flex;justify-content:space-between}\n"], dependencies: [{ 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: UicFormWrapperComponent, selector: "ui-form-wrapper", inputs: ["schema", "fields", "cols", "externalData", "selectOptionsResolver", "computedFieldResolver", "externalValidatorResolver", "loading", "disabled", "showButtons", "fillSelects", "initialValues", "focusFieldName", "focusFieldTrigger", "fileUidResolverFn"], outputs: ["formSubmit", "formChange", "optionsSourceError"] }, { kind: "component", type: UicInputComponent, selector: "ui-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "disabled", "loading"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: RuleDefinirionComponent, decorators: [{
             type: Component,