ui-core-abv 0.9.3 → 0.9.5

package/fesm2022/ui-core-abv.mjs

@@ -3209,7 +3209,7 @@ class UicSelectComponent extends base$6 {
                 useExisting: forwardRef(() => UicSelectComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true }], usesInheritance: true, usesOnChanges: 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=\"fakeinput-wrapp\" > \r\n        <!-- INPUT -->\r\n        <div  (click)=\"openList()\"  class=\"fakeinput\" #fakeinput \r\n            [ngClass]=\"{'errorinput':error, 'disabledinput':disabled, 'loading-input':loading}\" style=\"cursor: pointer;\">\r\n            @if (internalIcon) {\r\n                <i class=\"input-internalicon {{internalIcon}} f-{{internalIconColor}}\" ></i>\r\n            }\r\n            <div class=\"fakeinput-emptytext\" [class.disabled-placeholder]=\"disabled && !selectedOption?.text\" >\r\n                @if (selectedOption?.icon) {\r\n                    <i class=\"{{selectedOption?.icon}} f-{{selectedOption?.iconColor}}\" style=\"margin-right: 5px;\"></i>\r\n                }\r\n                {{(selectedOption?.text || nonSelectedText) | uicTranslate}}\r\n            </div>\r\n            @if (!disabled && !loading) {\r\n                <i  class=\"ri-arrow-down-s-line\"></i>\r\n            }\r\n        </div>            \r\n        <!-- DESPLEGABLE -->\r\n        <ng-template #dropdownTemplate >\r\n             <div class=\"input-options\">\r\n                 @if (showSearcher) {\r\n                    <div class=\"select-searcher\">\r\n                        <input\r\n                            #searchInput\r\n                            type=\"text\"\r\n                            [placeholder]=\"'select.search_placeholder'|uicTranslate\"\r\n                            [value]=\"searchTerm\"\r\n                            (input)=\"updateSearchTerm($any($event.target).value)\"\r\n                            (click)=\"$event.stopPropagation()\">\r\n                        <ui-button\r\n                            icon=\"ri-close-line\"\r\n                            size=\"s\"\r\n                            type=\"ghost\"\r\n                            color=\"red\"\r\n                            [iconOnly]=\"true\"\r\n                            (click)=\"clearSearch($event)\">\r\n                        </ui-button>\r\n                    </div>\r\n                 }\r\n                 <!-- OPCIONES -->\r\n                 <div class=\"input-option-scroll\">\r\n                    @if (showNullableOption) {\r\n                        <div\r\n                          (click)=\"selectOption(null)\"\r\n                          class=\"input-option\"\r\n                          [class.input-option-focused]=\"isNoneOptionActive()\"\r\n                          [attr.data-option-index]=\"0\"\r\n                          style=\"padding: 3px;\">\r\n                          {{noneText | uicTranslate}}\r\n                        </div>\r\n                        <div class=\"option-divider\"></div>\r\n                    }\r\n    \r\n                    \r\n                    @for (group of groupedFilteredOptions; track $index) {\r\n                        @if (group.label) {\r\n                            <div class=\"option-group-header\">{{group.label}}</div>\r\n                        }\r\n                        @for (item of group.options; track item.flatIndex; let isLast = $last) {\r\n                            <div\r\n                              (click)=\"selectOption(item.option)\"\r\n                              class=\"input-option\"\r\n                              [class.input-option-disabled]=\"!!item.option.disabled\"\r\n                              [class.input-option-focused]=\"isOptionActive(item.flatIndex)\"\r\n                              [attr.data-option-index]=\"getOptionIndex(item.flatIndex)\">\r\n                                @if (item.option.icon) {\r\n                                    <i class=\"{{item.option.icon}} f-{{item.option.iconColor}}\" style=\"margin-right: 5px;\"></i>\r\n                                }\r\n                                <div style=\"padding: 2px;\" >\r\n                                    <div class=\"f-medium option-text-highlight\" [innerHTML]=\"highlightMatch(item.option.text)\"></div>\r\n                                    @if (showSubtitle) {\r\n                                        <div class=\"f-extralight\">{{item.option.detail}}</div>\r\n                                    }\r\n                                </div>\r\n                            </div>\r\n                            @if (!isLast) {\r\n                                <span class=\"option-divider\"></span>\r\n                            }\r\n                        }\r\n                    }\r\n    \r\n                     @if (filteredOptions.length == 0) {\r\n                         <div class=\"fakeinput-alert t-disabled\">{{emptyText | uicTranslate}}</div>\r\n                     }\r\n                 </div>\r\n             </div>\r\n        </ng-template>\r\n    \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)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}.select-searcher{width:100%;display:flex;gap:5px;padding:.25rem;border-bottom:1px solid var(--grey-200);background-color:var(--white)}.select-searcher>input{flex:1 1;padding:3px 5px;border:solid 1px var(--grey-200);margin:0 auto;border-radius:4px}.select-searcher>input:focus{outline:none;box-shadow:0 0 0 3px var(--secondary-alpha);border-color:var(--primary-500)}.option-text-highlight ::ng-deep mark{background-color:var(--secondary-200);color:inherit;padding:0;border-radius:2px}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"], dependencies: [{ kind: "component", type: InputWrapperComponent, selector: "ui-input-wrapper", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }] });
+        ], viewQueries: [{ propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true }], usesInheritance: true, usesOnChanges: 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=\"fakeinput-wrapp\" > \r\n        <!-- INPUT -->\r\n        <div  (click)=\"openList()\"  class=\"fakeinput\" #fakeinput \r\n            [ngClass]=\"{'errorinput':error, 'disabledinput':disabled, 'loading-input':loading}\" style=\"cursor: pointer;\">\r\n            @if (internalIcon) {\r\n                <i class=\"input-internalicon {{internalIcon}} f-{{internalIconColor}}\" ></i>\r\n            }\r\n            <div class=\"fakeinput-emptytext\" [class.disabled-placeholder]=\"disabled && !selectedOption?.text\" >\r\n                @if (selectedOption?.icon) {\r\n                    <i class=\"{{selectedOption?.icon}} f-{{selectedOption?.iconColor}}\" style=\"margin-right: 5px;\"></i>\r\n                }\r\n                {{(selectedOption?.text || nonSelectedText) | uicTranslate}}\r\n            </div>\r\n            @if (!disabled && !loading) {\r\n                <i  class=\"ri-arrow-down-s-line\"></i>\r\n            }\r\n        </div>            \r\n        <!-- DESPLEGABLE -->\r\n        <ng-template #dropdownTemplate >\r\n             <div class=\"input-options\">\r\n                 @if (showSearcher) {\r\n                    <div class=\"select-searcher\">\r\n                        <input\r\n                            #searchInput\r\n                            type=\"text\"\r\n                            [placeholder]=\"'select.search_placeholder'|uicTranslate\"\r\n                            [value]=\"searchTerm\"\r\n                            (input)=\"updateSearchTerm($any($event.target).value)\"\r\n                            (click)=\"$event.stopPropagation()\">\r\n                        <ui-button\r\n                            icon=\"ri-close-line\"\r\n                            size=\"s\"\r\n                            type=\"ghost\"\r\n                            color=\"red\"\r\n                            [iconOnly]=\"true\"\r\n                            (click)=\"clearSearch($event)\">\r\n                        </ui-button>\r\n                    </div>\r\n                 }\r\n                 <!-- OPCIONES -->\r\n                 <div class=\"input-option-scroll\">\r\n                    @if (showNullableOption) {\r\n                        <div\r\n                          (click)=\"selectOption(null)\"\r\n                          class=\"input-option\"\r\n                          [class.input-option-focused]=\"isNoneOptionActive()\"\r\n                          [attr.data-option-index]=\"0\">\r\n                          <div style=\"padding: 2px;\">\r\n                            {{noneText | uicTranslate}}\r\n                          </div>\r\n                        </div>\r\n                        <div class=\"option-divider\"></div>\r\n                    }\r\n    \r\n                    \r\n                    @for (group of groupedFilteredOptions; track $index) {\r\n                        @if (group.label) {\r\n                            <div class=\"option-group-header\">{{group.label}}</div>\r\n                        }\r\n                        @for (item of group.options; track item.flatIndex; let isLast = $last) {\r\n                            <div\r\n                              (click)=\"selectOption(item.option)\"\r\n                              class=\"input-option\"\r\n                              [class.input-option-disabled]=\"!!item.option.disabled\"\r\n                              [class.input-option-focused]=\"isOptionActive(item.flatIndex)\"\r\n                              [attr.data-option-index]=\"getOptionIndex(item.flatIndex)\">\r\n                                @if (item.option.icon) {\r\n                                    <i class=\"{{item.option.icon}} f-{{item.option.iconColor}}\" style=\"margin-right: 5px;\"></i>\r\n                                }\r\n                                <div style=\"padding: 2px;\" >\r\n                                    <div class=\"f-medium option-text-highlight\" [innerHTML]=\"highlightMatch(item.option.text)\"></div>\r\n                                    @if (showSubtitle) {\r\n                                        <div class=\"f-extralight\">{{item.option.detail}}</div>\r\n                                    }\r\n                                </div>\r\n                            </div>\r\n                            @if (!isLast) {\r\n                                <span class=\"option-divider\"></span>\r\n                            }\r\n                        }\r\n                    }\r\n    \r\n                     @if (filteredOptions.length == 0) {\r\n                         <div class=\"fakeinput-alert t-disabled\">{{emptyText | uicTranslate}}</div>\r\n                     }\r\n                 </div>\r\n             </div>\r\n        </ng-template>\r\n    \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)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}.select-searcher{width:100%;display:flex;gap:5px;padding:.25rem;border-bottom:1px solid var(--grey-200);background-color:var(--white)}.select-searcher>input{flex:1 1;padding:3px 5px;border:solid 1px var(--grey-200);margin:0 auto;border-radius:4px}.select-searcher>input:focus{outline:none;box-shadow:0 0 0 3px var(--secondary-alpha);border-color:var(--primary-500)}.option-text-highlight ::ng-deep mark{background-color:var(--secondary-200);color:inherit;padding:0;border-radius:2px}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"], dependencies: [{ kind: "component", type: InputWrapperComponent, selector: "ui-input-wrapper", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSelectComponent, decorators: [{
             type: Component,
@@ -3219,7 +3219,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                             useExisting: forwardRef(() => UicSelectComponent),
                             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=\"fakeinput-wrapp\" > \r\n        <!-- INPUT -->\r\n        <div  (click)=\"openList()\"  class=\"fakeinput\" #fakeinput \r\n            [ngClass]=\"{'errorinput':error, 'disabledinput':disabled, 'loading-input':loading}\" style=\"cursor: pointer;\">\r\n            @if (internalIcon) {\r\n                <i class=\"input-internalicon {{internalIcon}} f-{{internalIconColor}}\" ></i>\r\n            }\r\n            <div class=\"fakeinput-emptytext\" [class.disabled-placeholder]=\"disabled && !selectedOption?.text\" >\r\n                @if (selectedOption?.icon) {\r\n                    <i class=\"{{selectedOption?.icon}} f-{{selectedOption?.iconColor}}\" style=\"margin-right: 5px;\"></i>\r\n                }\r\n                {{(selectedOption?.text || nonSelectedText) | uicTranslate}}\r\n            </div>\r\n            @if (!disabled && !loading) {\r\n                <i  class=\"ri-arrow-down-s-line\"></i>\r\n            }\r\n        </div>            \r\n        <!-- DESPLEGABLE -->\r\n        <ng-template #dropdownTemplate >\r\n             <div class=\"input-options\">\r\n                 @if (showSearcher) {\r\n                    <div class=\"select-searcher\">\r\n                        <input\r\n                            #searchInput\r\n                            type=\"text\"\r\n                            [placeholder]=\"'select.search_placeholder'|uicTranslate\"\r\n                            [value]=\"searchTerm\"\r\n                            (input)=\"updateSearchTerm($any($event.target).value)\"\r\n                            (click)=\"$event.stopPropagation()\">\r\n                        <ui-button\r\n                            icon=\"ri-close-line\"\r\n                            size=\"s\"\r\n                            type=\"ghost\"\r\n                            color=\"red\"\r\n                            [iconOnly]=\"true\"\r\n                            (click)=\"clearSearch($event)\">\r\n                        </ui-button>\r\n                    </div>\r\n                 }\r\n                 <!-- OPCIONES -->\r\n                 <div class=\"input-option-scroll\">\r\n                    @if (showNullableOption) {\r\n                        <div\r\n                          (click)=\"selectOption(null)\"\r\n                          class=\"input-option\"\r\n                          [class.input-option-focused]=\"isNoneOptionActive()\"\r\n                          [attr.data-option-index]=\"0\"\r\n                          style=\"padding: 3px;\">\r\n                          {{noneText | uicTranslate}}\r\n                        </div>\r\n                        <div class=\"option-divider\"></div>\r\n                    }\r\n    \r\n                    \r\n                    @for (group of groupedFilteredOptions; track $index) {\r\n                        @if (group.label) {\r\n                            <div class=\"option-group-header\">{{group.label}}</div>\r\n                        }\r\n                        @for (item of group.options; track item.flatIndex; let isLast = $last) {\r\n                            <div\r\n                              (click)=\"selectOption(item.option)\"\r\n                              class=\"input-option\"\r\n                              [class.input-option-disabled]=\"!!item.option.disabled\"\r\n                              [class.input-option-focused]=\"isOptionActive(item.flatIndex)\"\r\n                              [attr.data-option-index]=\"getOptionIndex(item.flatIndex)\">\r\n                                @if (item.option.icon) {\r\n                                    <i class=\"{{item.option.icon}} f-{{item.option.iconColor}}\" style=\"margin-right: 5px;\"></i>\r\n                                }\r\n                                <div style=\"padding: 2px;\" >\r\n                                    <div class=\"f-medium option-text-highlight\" [innerHTML]=\"highlightMatch(item.option.text)\"></div>\r\n                                    @if (showSubtitle) {\r\n                                        <div class=\"f-extralight\">{{item.option.detail}}</div>\r\n                                    }\r\n                                </div>\r\n                            </div>\r\n                            @if (!isLast) {\r\n                                <span class=\"option-divider\"></span>\r\n                            }\r\n                        }\r\n                    }\r\n    \r\n                     @if (filteredOptions.length == 0) {\r\n                         <div class=\"fakeinput-alert t-disabled\">{{emptyText | uicTranslate}}</div>\r\n                     }\r\n                 </div>\r\n             </div>\r\n        </ng-template>\r\n    \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)}.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"] }]
+                    ], template: "\r\n<ui-input-wrapper\r\n    [icon]=\"icon\"\r\n    [iconColor]=\"iconColor\"\r\n    [label]=\"label\"\r\n    [error]=\"error\"\r\n    [tip]=\"tip\"\r\n    [disabled]=\"disabled\">\r\n    <div class=\"fakeinput-wrapp\" > \r\n        <!-- INPUT -->\r\n        <div  (click)=\"openList()\"  class=\"fakeinput\" #fakeinput \r\n            [ngClass]=\"{'errorinput':error, 'disabledinput':disabled, 'loading-input':loading}\" style=\"cursor: pointer;\">\r\n            @if (internalIcon) {\r\n                <i class=\"input-internalicon {{internalIcon}} f-{{internalIconColor}}\" ></i>\r\n            }\r\n            <div class=\"fakeinput-emptytext\" [class.disabled-placeholder]=\"disabled && !selectedOption?.text\" >\r\n                @if (selectedOption?.icon) {\r\n                    <i class=\"{{selectedOption?.icon}} f-{{selectedOption?.iconColor}}\" style=\"margin-right: 5px;\"></i>\r\n                }\r\n                {{(selectedOption?.text || nonSelectedText) | uicTranslate}}\r\n            </div>\r\n            @if (!disabled && !loading) {\r\n                <i  class=\"ri-arrow-down-s-line\"></i>\r\n            }\r\n        </div>            \r\n        <!-- DESPLEGABLE -->\r\n        <ng-template #dropdownTemplate >\r\n             <div class=\"input-options\">\r\n                 @if (showSearcher) {\r\n                    <div class=\"select-searcher\">\r\n                        <input\r\n                            #searchInput\r\n                            type=\"text\"\r\n                            [placeholder]=\"'select.search_placeholder'|uicTranslate\"\r\n                            [value]=\"searchTerm\"\r\n                            (input)=\"updateSearchTerm($any($event.target).value)\"\r\n                            (click)=\"$event.stopPropagation()\">\r\n                        <ui-button\r\n                            icon=\"ri-close-line\"\r\n                            size=\"s\"\r\n                            type=\"ghost\"\r\n                            color=\"red\"\r\n                            [iconOnly]=\"true\"\r\n                            (click)=\"clearSearch($event)\">\r\n                        </ui-button>\r\n                    </div>\r\n                 }\r\n                 <!-- OPCIONES -->\r\n                 <div class=\"input-option-scroll\">\r\n                    @if (showNullableOption) {\r\n                        <div\r\n                          (click)=\"selectOption(null)\"\r\n                          class=\"input-option\"\r\n                          [class.input-option-focused]=\"isNoneOptionActive()\"\r\n                          [attr.data-option-index]=\"0\">\r\n                          <div style=\"padding: 2px;\">\r\n                            {{noneText | uicTranslate}}\r\n                          </div>\r\n                        </div>\r\n                        <div class=\"option-divider\"></div>\r\n                    }\r\n    \r\n                    \r\n                    @for (group of groupedFilteredOptions; track $index) {\r\n                        @if (group.label) {\r\n                            <div class=\"option-group-header\">{{group.label}}</div>\r\n                        }\r\n                        @for (item of group.options; track item.flatIndex; let isLast = $last) {\r\n                            <div\r\n                              (click)=\"selectOption(item.option)\"\r\n                              class=\"input-option\"\r\n                              [class.input-option-disabled]=\"!!item.option.disabled\"\r\n                              [class.input-option-focused]=\"isOptionActive(item.flatIndex)\"\r\n                              [attr.data-option-index]=\"getOptionIndex(item.flatIndex)\">\r\n                                @if (item.option.icon) {\r\n                                    <i class=\"{{item.option.icon}} f-{{item.option.iconColor}}\" style=\"margin-right: 5px;\"></i>\r\n                                }\r\n                                <div style=\"padding: 2px;\" >\r\n                                    <div class=\"f-medium option-text-highlight\" [innerHTML]=\"highlightMatch(item.option.text)\"></div>\r\n                                    @if (showSubtitle) {\r\n                                        <div class=\"f-extralight\">{{item.option.detail}}</div>\r\n                                    }\r\n                                </div>\r\n                            </div>\r\n                            @if (!isLast) {\r\n                                <span class=\"option-divider\"></span>\r\n                            }\r\n                        }\r\n                    }\r\n    \r\n                     @if (filteredOptions.length == 0) {\r\n                         <div class=\"fakeinput-alert t-disabled\">{{emptyText | uicTranslate}}</div>\r\n                     }\r\n                 </div>\r\n             </div>\r\n        </ng-template>\r\n    \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)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}.select-searcher{width:100%;display:flex;gap:5px;padding:.25rem;border-bottom:1px solid var(--grey-200);background-color:var(--white)}.select-searcher>input{flex:1 1;padding:3px 5px;border:solid 1px var(--grey-200);margin:0 auto;border-radius:4px}.select-searcher>input:focus{outline:none;box-shadow:0 0 0 3px var(--secondary-alpha);border-color:var(--primary-500)}.option-text-highlight ::ng-deep mark{background-color:var(--secondary-200);color:inherit;padding:0;border-radius:2px}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"] }]
         }], propDecorators: { icon: [{
                 type: Input
             }], iconColor: [{
@@ -10645,12 +10645,13 @@ class FieldEditorComponent {
     updateFieldValues(fr) {
         const current = this.localField();
         const hadExternalOptionsSource = !!current.optionsSource?.key;
+        const isAutoName = /^(field|sf)_\d+$/.test(current.name ?? '');
         const isNameManuallySet = this.config().nameManuallySet ?? false;
         if (fr['name'] !== undefined && fr['name'] !== current.name) {
             this.nameManuallySet.emit();
         }
         let derivedName;
-        if (!isNameManuallySet && fr['label'] !== undefined && fr['label'] !== current.label) {
+        if (isAutoName && !isNameManuallySet && fr['label'] !== undefined && fr['label'] !== current.label) {
             const labelStr = typeof fr['label'] === 'string' ? fr['label'] : '';
             derivedName = this.normalizeLabelToName(labelStr);
         }
@@ -11361,9 +11362,11 @@ class UicUserFormbuilderComponent {
             subtitleMargin: this.editableSubtitleMargin() ?? undefined,
             blocks: this.editableBlocks().map(block => ({
                 ...block,
+                id: 0,
                 fields: block.fields.map(({ field, ...restField }) => ({
                     ...restField,
-                    repeaterSubFields: restField.repeaterSubFields?.map(({ field: _sf, ...sfRest }) => sfRest)
+                    id: 0,
+                    repeaterSubFields: restField.repeaterSubFields?.map(({ field: _sf, ...sfRest }) => ({ ...sfRest, id: 0 }))
                 }))
             }))
         };