ui-core-abv 0.9.9 → 0.10.0

package/fesm2022/ui-core-abv.mjs

@@ -464,6 +464,12 @@ const DICTIONARY_EN = {
             timeInterval_tip: 'Minute step',
             fileTypes: 'File types',
             fileTypes_tip: 'Comma-separated extensions',
+            templateUrl: 'Template URL',
+            templateUrl_tip: 'Link to the downloadable file the user must fill in',
+            templateText: 'Description text',
+            templateText_tip: 'Text shown before the download link',
+            templateLinkLabel: 'Link text',
+            templateLinkLabel_tip: 'Clickable text shown to download the template',
             poolEnabledListView: 'Enable list view',
             poolEnabledListView_tip: 'Show pool in list mode',
             poolTitle: 'List title',
@@ -826,6 +832,12 @@ const DICTIONARY_ES = {
             timeInterval_tip: 'Paso en minutos',
             fileTypes: 'Tipos de archivo',
             fileTypes_tip: 'Extensiones separadas por coma',
+            templateUrl: 'URL del formato',
+            templateUrl_tip: 'Enlace al archivo descargable que el usuario debe completar',
+            templateText: 'Texto descriptivo',
+            templateText_tip: 'Texto que precede al enlace de descarga',
+            templateLinkLabel: 'Texto del enlace',
+            templateLinkLabel_tip: 'Texto clickeable que se muestra para descargar el formato',
             poolEnabledListView: 'Ver lista habilitada',
             poolEnabledListView_tip: 'Mostrar opciones en lista',
             poolTitle: 'Título del listado',
@@ -1694,6 +1706,10 @@ class UicFileInputComponent extends base$b {
     multy = false;
     fileTypes = null;
     fileUidResolverFn;
+    // Formato descargable (ej: "descarga este formato y súbelo firmado")
+    templateUrl = '';
+    templateText = 'Descarga el formato haciendo';
+    templateLinkLabel = 'click aquí';
     fileInput;
     push = inject(UicPushAlertService);
     value = [];
@@ -1907,13 +1923,13 @@ class UicFileInputComponent extends base$b {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicFileInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicFileInputComponent, isStandalone: true, selector: "ui-file-input", inputs: { icon: "icon", iconColor: "iconColor", internalIcon: "internalIcon", internalIconColor: "internalIconColor", size: "size", label: "label", error: "error", tip: "tip", disabled: "disabled", loading: "loading", multy: "multy", fileTypes: "fileTypes", fileUidResolverFn: "fileUidResolverFn" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicFileInputComponent, isStandalone: true, selector: "ui-file-input", inputs: { icon: "icon", iconColor: "iconColor", internalIcon: "internalIcon", internalIconColor: "internalIconColor", size: "size", label: "label", error: "error", tip: "tip", disabled: "disabled", loading: "loading", multy: "multy", fileTypes: "fileTypes", fileUidResolverFn: "fileUidResolverFn", templateUrl: "templateUrl", templateText: "templateText", templateLinkLabel: "templateLinkLabel" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => UicFileInputComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: 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=\"fileinput\" [ngClass]=\"{'errorinput':error, 'disabledinput':disabled, 'dragging':isDragging}\">\r\n        <input\n            #fileInput\n            class=\"fileinput-native\"\n            type=\"file\"\n            (change)=\"onNativeInputChange($event)\"\n            [attr.multiple]=\"multy ? '' : null\"\n            [attr.accept]=\"acceptAttribute\"\n            [disabled]=\"disabled || loading\"\n        />\n        @if (internalIcon) {\r\n            <i class=\"input-internalicon {{internalIcon}}\" ></i>\r\n        }\r\n        <div class=\"fileinput-content\" >\r\n            @if (!disabled && !loading) {\r\n                <ui-button\r\n                    type=\"bordered\"\r\n                    color=\"black\"\r\n                    size=\"s\"\r\n                    (click)=\"openFileBrowser()\"\r\n                >Seleccionar</ui-button>\r\n            }\r\n            <div\r\n                class=\"fileinput-reel\"\r\n                (dragover)=\"onDragOver($event)\"\r\n                (dragleave)=\"onDragLeave($event)\"\r\n                (drop)=\"onDrop($event)\"\r\n            >\r\n                @if (!files.length) {\r\n                    <div class=\"fileinput-empty\">\r\n                        Aun no hay archivos\r\n                    </div>\r\n                } @else {\r\n                    @for (item of files; track $index) {\r\n                        <div class=\"fileinput-item\">\r\n                            <i class=\"fileinput-item__icon ri {{ getIcon(item) }}\" aria-hidden=\"true\"></i>\r\n                            <span (click)=\"downloadFile(item)\" class=\"fileinput-item__name\">{{item.name}}</span>\r\n                            <ui-button\r\n                                size=\"s\"\r\n                                [iconOnly]=\"true\"\r\n                                type=\"ghost\"\r\n                                icon=\"ri-close-line\"\r\n                                (click)=\"removeFile($index)\"\r\n                                [disabled]=\"disabled || loading\"\r\n                            ></ui-button>\r\n                        </div>\r\n                    }\r\n                }\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ui-input-wrapper>\n", 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)}.f-white{color:var(--white)}.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", ".fileinput{background-color:#fff;border:dashed 1px var(--grey-300);display:flex;align-items:center;border-radius:var(--input-radius);position:relative;transition:border-color .2s ease,background-color .2s ease}.fileinput.dragging{border-color:var(--primary-500, var(--blue-500));background-color:#1d4ed814}.fileinput-native{display:none}.fileinput-content{display:flex;padding:.25rem;gap:.25rem;flex:1 1;align-items:center}.fileinput-reel{display:flex;flex-wrap:wrap;flex:1 1;gap:10px;min-height:32px;align-items:center}.fileinput-item{display:flex;align-items:center;font-size:12px;line-height:12px;gap:10px;padding:0 8px;border-radius:5px;background-color:var(--grey-100);min-height:32px}.fileinput-item__icon{font-size:18px;color:var(--grey-600)}.fileinput-item__name{max-width:180px;text-decoration:underline;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fileinput-item__name:hover{color:var(--primary-500)}.fileinput-empty{font-size:12px;padding:0 5px;color:var(--grey-500)}\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: InputWrapperComponent, selector: "ui-input-wrapper", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled"] }] });
+        ], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: 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    @if (templateUrl) {\r\n        <div class=\"fileinput-template\">\r\n            {{templateText}} <a [href]=\"templateUrl\" target=\"_blank\" rel=\"noopener\" class=\"fileinput-template__link\">{{templateLinkLabel}}</a>\r\n        </div>\r\n    }\r\n    <div class=\"fileinput\" [ngClass]=\"{'errorinput':error, 'disabledinput':disabled, 'dragging':isDragging}\">\r\n        <input\r\n            #fileInput\r\n            class=\"fileinput-native\"\r\n            type=\"file\"\r\n            (change)=\"onNativeInputChange($event)\"\r\n            [attr.multiple]=\"multy ? '' : null\"\r\n            [attr.accept]=\"acceptAttribute\"\r\n            [disabled]=\"disabled || loading\"\r\n        />\r\n        @if (internalIcon) {\r\n            <i class=\"input-internalicon {{internalIcon}}\" ></i>\r\n        }\r\n        <div class=\"fileinput-content\" >\r\n            @if (!disabled && !loading) {\r\n                <ui-button\r\n                    type=\"bordered\"\r\n                    color=\"black\"\r\n                    size=\"s\"\r\n                    (click)=\"openFileBrowser()\"\r\n                >Seleccionar</ui-button>\r\n            }\r\n            <div\r\n                class=\"fileinput-reel\"\r\n                (dragover)=\"onDragOver($event)\"\r\n                (dragleave)=\"onDragLeave($event)\"\r\n                (drop)=\"onDrop($event)\"\r\n            >\r\n                @if (!files.length) {\r\n                    <div class=\"fileinput-empty\">\r\n                        Aun no hay archivos\r\n                    </div>\r\n                } @else {\r\n                    @for (item of files; track $index) {\r\n                        <div class=\"fileinput-item\">\r\n                            <i class=\"fileinput-item__icon ri {{ getIcon(item) }}\" aria-hidden=\"true\"></i>\r\n                            <span (click)=\"downloadFile(item)\" class=\"fileinput-item__name\">{{item.name}}</span>\r\n                            <ui-button\r\n                                size=\"s\"\r\n                                [iconOnly]=\"true\"\r\n                                type=\"ghost\"\r\n                                icon=\"ri-close-line\"\r\n                                (click)=\"removeFile($index)\"\r\n                                [disabled]=\"disabled || loading\"\r\n                            ></ui-button>\r\n                        </div>\r\n                    }\r\n                }\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ui-input-wrapper>\r\n", 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)}.f-white{color:var(--white)}.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", ".fileinput-template{font-size:12px;color:var(--grey-500);margin-bottom:.25rem}.fileinput-template__link{color:var(--primary-500);text-decoration:underline;cursor:pointer}.fileinput-template__link:hover{color:var(--primary-600, var(--primary-500))}.fileinput{background-color:#fff;border:dashed 1px var(--grey-300);display:flex;align-items:center;border-radius:var(--input-radius);position:relative;transition:border-color .2s ease,background-color .2s ease}.fileinput.dragging{border-color:var(--primary-500, var(--blue-500));background-color:#1d4ed814}.fileinput-native{display:none}.fileinput-content{display:flex;padding:.25rem;gap:.25rem;flex:1 1;align-items:center}.fileinput-reel{display:flex;flex-wrap:wrap;flex:1 1;gap:10px;min-height:32px;align-items:center}.fileinput-item{display:flex;align-items:center;font-size:12px;line-height:12px;gap:10px;padding:0 8px;border-radius:5px;background-color:var(--grey-100);min-height:32px}.fileinput-item__icon{font-size:18px;color:var(--grey-600)}.fileinput-item__name{max-width:180px;text-decoration:underline;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fileinput-item__name:hover{color:var(--primary-500)}.fileinput-empty{font-size:12px;padding:0 5px;color:var(--grey-500)}\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: 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: UicFileInputComponent, decorators: [{
             type: Component,
@@ -1923,7 +1939,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                             useExisting: forwardRef(() => UicFileInputComponent),
                             multi: true
                         }
-                    ], 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=\"fileinput\" [ngClass]=\"{'errorinput':error, 'disabledinput':disabled, 'dragging':isDragging}\">\r\n        <input\n            #fileInput\n            class=\"fileinput-native\"\n            type=\"file\"\n            (change)=\"onNativeInputChange($event)\"\n            [attr.multiple]=\"multy ? '' : null\"\n            [attr.accept]=\"acceptAttribute\"\n            [disabled]=\"disabled || loading\"\n        />\n        @if (internalIcon) {\r\n            <i class=\"input-internalicon {{internalIcon}}\" ></i>\r\n        }\r\n        <div class=\"fileinput-content\" >\r\n            @if (!disabled && !loading) {\r\n                <ui-button\r\n                    type=\"bordered\"\r\n                    color=\"black\"\r\n                    size=\"s\"\r\n                    (click)=\"openFileBrowser()\"\r\n                >Seleccionar</ui-button>\r\n            }\r\n            <div\r\n                class=\"fileinput-reel\"\r\n                (dragover)=\"onDragOver($event)\"\r\n                (dragleave)=\"onDragLeave($event)\"\r\n                (drop)=\"onDrop($event)\"\r\n            >\r\n                @if (!files.length) {\r\n                    <div class=\"fileinput-empty\">\r\n                        Aun no hay archivos\r\n                    </div>\r\n                } @else {\r\n                    @for (item of files; track $index) {\r\n                        <div class=\"fileinput-item\">\r\n                            <i class=\"fileinput-item__icon ri {{ getIcon(item) }}\" aria-hidden=\"true\"></i>\r\n                            <span (click)=\"downloadFile(item)\" class=\"fileinput-item__name\">{{item.name}}</span>\r\n                            <ui-button\r\n                                size=\"s\"\r\n                                [iconOnly]=\"true\"\r\n                                type=\"ghost\"\r\n                                icon=\"ri-close-line\"\r\n                                (click)=\"removeFile($index)\"\r\n                                [disabled]=\"disabled || loading\"\r\n                            ></ui-button>\r\n                        </div>\r\n                    }\r\n                }\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ui-input-wrapper>\n", 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)}.f-white{color:var(--white)}.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", ".fileinput{background-color:#fff;border:dashed 1px var(--grey-300);display:flex;align-items:center;border-radius:var(--input-radius);position:relative;transition:border-color .2s ease,background-color .2s ease}.fileinput.dragging{border-color:var(--primary-500, var(--blue-500));background-color:#1d4ed814}.fileinput-native{display:none}.fileinput-content{display:flex;padding:.25rem;gap:.25rem;flex:1 1;align-items:center}.fileinput-reel{display:flex;flex-wrap:wrap;flex:1 1;gap:10px;min-height:32px;align-items:center}.fileinput-item{display:flex;align-items:center;font-size:12px;line-height:12px;gap:10px;padding:0 8px;border-radius:5px;background-color:var(--grey-100);min-height:32px}.fileinput-item__icon{font-size:18px;color:var(--grey-600)}.fileinput-item__name{max-width:180px;text-decoration:underline;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fileinput-item__name:hover{color:var(--primary-500)}.fileinput-empty{font-size:12px;padding:0 5px;color:var(--grey-500)}\n"] }]
+                    ], 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    @if (templateUrl) {\r\n        <div class=\"fileinput-template\">\r\n            {{templateText}} <a [href]=\"templateUrl\" target=\"_blank\" rel=\"noopener\" class=\"fileinput-template__link\">{{templateLinkLabel}}</a>\r\n        </div>\r\n    }\r\n    <div class=\"fileinput\" [ngClass]=\"{'errorinput':error, 'disabledinput':disabled, 'dragging':isDragging}\">\r\n        <input\r\n            #fileInput\r\n            class=\"fileinput-native\"\r\n            type=\"file\"\r\n            (change)=\"onNativeInputChange($event)\"\r\n            [attr.multiple]=\"multy ? '' : null\"\r\n            [attr.accept]=\"acceptAttribute\"\r\n            [disabled]=\"disabled || loading\"\r\n        />\r\n        @if (internalIcon) {\r\n            <i class=\"input-internalicon {{internalIcon}}\" ></i>\r\n        }\r\n        <div class=\"fileinput-content\" >\r\n            @if (!disabled && !loading) {\r\n                <ui-button\r\n                    type=\"bordered\"\r\n                    color=\"black\"\r\n                    size=\"s\"\r\n                    (click)=\"openFileBrowser()\"\r\n                >Seleccionar</ui-button>\r\n            }\r\n            <div\r\n                class=\"fileinput-reel\"\r\n                (dragover)=\"onDragOver($event)\"\r\n                (dragleave)=\"onDragLeave($event)\"\r\n                (drop)=\"onDrop($event)\"\r\n            >\r\n                @if (!files.length) {\r\n                    <div class=\"fileinput-empty\">\r\n                        Aun no hay archivos\r\n                    </div>\r\n                } @else {\r\n                    @for (item of files; track $index) {\r\n                        <div class=\"fileinput-item\">\r\n                            <i class=\"fileinput-item__icon ri {{ getIcon(item) }}\" aria-hidden=\"true\"></i>\r\n                            <span (click)=\"downloadFile(item)\" class=\"fileinput-item__name\">{{item.name}}</span>\r\n                            <ui-button\r\n                                size=\"s\"\r\n                                [iconOnly]=\"true\"\r\n                                type=\"ghost\"\r\n                                icon=\"ri-close-line\"\r\n                                (click)=\"removeFile($index)\"\r\n                                [disabled]=\"disabled || loading\"\r\n                            ></ui-button>\r\n                        </div>\r\n                    }\r\n                }\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ui-input-wrapper>\r\n", 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)}.f-white{color:var(--white)}.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", ".fileinput-template{font-size:12px;color:var(--grey-500);margin-bottom:.25rem}.fileinput-template__link{color:var(--primary-500);text-decoration:underline;cursor:pointer}.fileinput-template__link:hover{color:var(--primary-600, var(--primary-500))}.fileinput{background-color:#fff;border:dashed 1px var(--grey-300);display:flex;align-items:center;border-radius:var(--input-radius);position:relative;transition:border-color .2s ease,background-color .2s ease}.fileinput.dragging{border-color:var(--primary-500, var(--blue-500));background-color:#1d4ed814}.fileinput-native{display:none}.fileinput-content{display:flex;padding:.25rem;gap:.25rem;flex:1 1;align-items:center}.fileinput-reel{display:flex;flex-wrap:wrap;flex:1 1;gap:10px;min-height:32px;align-items:center}.fileinput-item{display:flex;align-items:center;font-size:12px;line-height:12px;gap:10px;padding:0 8px;border-radius:5px;background-color:var(--grey-100);min-height:32px}.fileinput-item__icon{font-size:18px;color:var(--grey-600)}.fileinput-item__name{max-width:180px;text-decoration:underline;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fileinput-item__name:hover{color:var(--primary-500)}.fileinput-empty{font-size:12px;padding:0 5px;color:var(--grey-500)}\n"] }]
         }], propDecorators: { icon: [{
                 type: Input
             }], iconColor: [{
@@ -1950,6 +1966,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Input
             }], fileUidResolverFn: [{
                 type: Input
+            }], templateUrl: [{
+                type: Input
+            }], templateText: [{
+                type: Input
+            }], templateLinkLabel: [{
+                type: Input
             }], fileInput: [{
                 type: ViewChild,
                 args: ['fileInput']
@@ -4934,7 +4956,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", iconMode: "iconMode", 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    @if (!field.hidden) {\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]=\"getFieldIcon(field)\"\r\n          [iconColor]=\"getFieldIconColor(field, control, currentValue)\"\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]=\"getFieldIcon(field)\"\r\n          [iconColor]=\"getFieldIconColor(field, control, currentValue)\"\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]=\"getFieldIcon(field)\"\r\n          [iconColor]=\"getFieldIconColor(field, control, currentValue)\"\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]=\"getFieldIcon(field)\"\r\n          [iconColor]=\"getFieldIconColor(field, control, currentValue)\"\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]=\"getFieldIcon(field)\"\r\n          [iconColor]=\"getFieldIconColor(field, control, currentValue)\"\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]=\"getFieldIcon(field)\"\r\n          [iconColor]=\"getFieldIconColor(field, control, currentValue)\"\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]=\"getFieldIcon(field)\"\r\n          [iconColor]=\"getFieldIconColor(field, control, currentValue)\"\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]=\"getFieldIcon(field)\"\r\n          [iconColor]=\"getFieldIconColor(field, control, currentValue)\"\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]=\"getFieldIcon(field)\"\r\n          [iconColor]=\"getFieldIconColor(field, control, currentValue)\"\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]=\"getFieldIcon(field)\"\r\n          [iconColor]=\"getFieldIconColor(field, control, currentValue)\"\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]=\"getFieldIcon(field)\"\r\n          [iconColor]=\"getFieldIconColor(field, control, currentValue)\"\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]=\"getFieldIcon(field)\"\r\n          [iconColor]=\"getFieldIconColor(field, control, currentValue)\"\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]=\"getFieldIcon(field)\"\r\n          [iconColor]=\"getFieldIconColor(field, control, currentValue)\"\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]=\"getFieldIcon(field)\"\r\n          [iconColor]=\"getFieldIconColor(field, control, currentValue)\"\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  }\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"] }] });
+    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", iconMode: "iconMode", 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    @if (!field.hidden) {\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]=\"getFieldIcon(field)\"\r\n          [iconColor]=\"getFieldIconColor(field, control, currentValue)\"\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]=\"getFieldIcon(field)\"\r\n          [iconColor]=\"getFieldIconColor(field, control, currentValue)\"\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]=\"getFieldIcon(field)\"\r\n          [iconColor]=\"getFieldIconColor(field, control, currentValue)\"\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]=\"getFieldIcon(field)\"\r\n          [iconColor]=\"getFieldIconColor(field, control, currentValue)\"\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]=\"getFieldIcon(field)\"\r\n          [iconColor]=\"getFieldIconColor(field, control, currentValue)\"\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]=\"getFieldIcon(field)\"\r\n          [iconColor]=\"getFieldIconColor(field, control, currentValue)\"\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]=\"getFieldIcon(field)\"\r\n          [iconColor]=\"getFieldIconColor(field, control, currentValue)\"\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]=\"getFieldIcon(field)\"\r\n          [iconColor]=\"getFieldIconColor(field, control, currentValue)\"\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]=\"getFieldIcon(field)\"\r\n          [iconColor]=\"getFieldIconColor(field, control, currentValue)\"\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]=\"getFieldIcon(field)\"\r\n          [iconColor]=\"getFieldIconColor(field, control, currentValue)\"\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          [templateUrl]=\"field.templateUrl??''\"\r\n          [templateText]=\"field.templateText??'Descarga el formato haciendo'\"\r\n          [templateLinkLabel]=\"field.templateLinkLabel??'click aqu\u00ED'\"\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]=\"getFieldIcon(field)\"\r\n          [iconColor]=\"getFieldIconColor(field, control, currentValue)\"\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]=\"getFieldIcon(field)\"\r\n          [iconColor]=\"getFieldIconColor(field, control, currentValue)\"\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]=\"getFieldIcon(field)\"\r\n          [iconColor]=\"getFieldIconColor(field, control, currentValue)\"\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]=\"getFieldIcon(field)\"\r\n          [iconColor]=\"getFieldIconColor(field, control, currentValue)\"\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  }\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", "templateUrl", "templateText", "templateLinkLabel"] }, { 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,
@@ -4960,7 +4982,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    @if (!field.hidden) {\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]=\"getFieldIcon(field)\"\r\n          [iconColor]=\"getFieldIconColor(field, control, currentValue)\"\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]=\"getFieldIcon(field)\"\r\n          [iconColor]=\"getFieldIconColor(field, control, currentValue)\"\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]=\"getFieldIcon(field)\"\r\n          [iconColor]=\"getFieldIconColor(field, control, currentValue)\"\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]=\"getFieldIcon(field)\"\r\n          [iconColor]=\"getFieldIconColor(field, control, currentValue)\"\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]=\"getFieldIcon(field)\"\r\n          [iconColor]=\"getFieldIconColor(field, control, currentValue)\"\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]=\"getFieldIcon(field)\"\r\n          [iconColor]=\"getFieldIconColor(field, control, currentValue)\"\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]=\"getFieldIcon(field)\"\r\n          [iconColor]=\"getFieldIconColor(field, control, currentValue)\"\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]=\"getFieldIcon(field)\"\r\n          [iconColor]=\"getFieldIconColor(field, control, currentValue)\"\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]=\"getFieldIcon(field)\"\r\n          [iconColor]=\"getFieldIconColor(field, control, currentValue)\"\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]=\"getFieldIcon(field)\"\r\n          [iconColor]=\"getFieldIconColor(field, control, currentValue)\"\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]=\"getFieldIcon(field)\"\r\n          [iconColor]=\"getFieldIconColor(field, control, currentValue)\"\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]=\"getFieldIcon(field)\"\r\n          [iconColor]=\"getFieldIconColor(field, control, currentValue)\"\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]=\"getFieldIcon(field)\"\r\n          [iconColor]=\"getFieldIconColor(field, control, currentValue)\"\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]=\"getFieldIcon(field)\"\r\n          [iconColor]=\"getFieldIconColor(field, control, currentValue)\"\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  }\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    @if (!field.hidden) {\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]=\"getFieldIcon(field)\"\r\n          [iconColor]=\"getFieldIconColor(field, control, currentValue)\"\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]=\"getFieldIcon(field)\"\r\n          [iconColor]=\"getFieldIconColor(field, control, currentValue)\"\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]=\"getFieldIcon(field)\"\r\n          [iconColor]=\"getFieldIconColor(field, control, currentValue)\"\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]=\"getFieldIcon(field)\"\r\n          [iconColor]=\"getFieldIconColor(field, control, currentValue)\"\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]=\"getFieldIcon(field)\"\r\n          [iconColor]=\"getFieldIconColor(field, control, currentValue)\"\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]=\"getFieldIcon(field)\"\r\n          [iconColor]=\"getFieldIconColor(field, control, currentValue)\"\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]=\"getFieldIcon(field)\"\r\n          [iconColor]=\"getFieldIconColor(field, control, currentValue)\"\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]=\"getFieldIcon(field)\"\r\n          [iconColor]=\"getFieldIconColor(field, control, currentValue)\"\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]=\"getFieldIcon(field)\"\r\n          [iconColor]=\"getFieldIconColor(field, control, currentValue)\"\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]=\"getFieldIcon(field)\"\r\n          [iconColor]=\"getFieldIconColor(field, control, currentValue)\"\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          [templateUrl]=\"field.templateUrl??''\"\r\n          [templateText]=\"field.templateText??'Descarga el formato haciendo'\"\r\n          [templateLinkLabel]=\"field.templateLinkLabel??'click aqu\u00ED'\"\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]=\"getFieldIcon(field)\"\r\n          [iconColor]=\"getFieldIconColor(field, control, currentValue)\"\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]=\"getFieldIcon(field)\"\r\n          [iconColor]=\"getFieldIconColor(field, control, currentValue)\"\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]=\"getFieldIcon(field)\"\r\n          [iconColor]=\"getFieldIconColor(field, control, currentValue)\"\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]=\"getFieldIcon(field)\"\r\n          [iconColor]=\"getFieldIconColor(field, control, currentValue)\"\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  }\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: [{
@@ -9820,7 +9842,7 @@ const FIELDS_CONFIG = [
     { value: 'checkbox', icon: 'ri-checkbox-line', detail: 'Campo booleano tipo check', label: 'Checkbox', properties: ['placeholder'], visibility: { outputType: 'boolean', operators: ['equals', 'notEquals', 'isEmpty', 'isNotEmpty'] } },
     { value: 'switch', icon: 'ri-toggle-line', detail: 'Campo booleano tipo switch', label: 'Switch', properties: ['placeholder'], visibility: { outputType: 'boolean', operators: ['equals', 'notEquals', 'isEmpty', 'isNotEmpty'] } },
     { 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: 'file', icon: 'ri-attachment-line', detail: 'Carga de archivos', label: 'Archivo', properties: ['multyEnabled', 'fileTypes', 'templateUrl', 'templateText', 'templateLinkLabel', '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'] } },
@@ -10129,6 +10151,41 @@ const EXTRA_FORM_FIELDS = [
             { id: 'application/vnd.ms-powerpoint', text: 'PPT' },
         ]
     },
+    {
+        name: 'templateUrl',
+        label: 'form_builder.extra.templateUrl',
+        tip: 'form_builder.extra.templateUrl_tip',
+        internalIcon: 'ri-download-2-line',
+        type: 'text'
+    },
+    {
+        name: 'templateText',
+        label: 'form_builder.extra.templateText',
+        tip: 'form_builder.extra.templateText_tip',
+        internalIcon: 'ri-text',
+        type: 'text',
+        visibilityRules: [
+            {
+                fieldName: 'templateUrl',
+                operator: 'notEquals',
+                value: ''
+            }
+        ]
+    },
+    {
+        name: 'templateLinkLabel',
+        label: 'form_builder.extra.templateLinkLabel',
+        tip: 'form_builder.extra.templateLinkLabel_tip',
+        internalIcon: 'ri-link',
+        type: 'text',
+        visibilityRules: [
+            {
+                fieldName: 'templateUrl',
+                operator: 'notEquals',
+                value: ''
+            }
+        ]
+    },
     {
         name: 'selectNullable',
         label: 'form_builder.extra.selectNullable',