@solcre-org/core-ui 2.12.11 → 2.12.13

package/fesm2022/solcre-org-core-ui.mjs

@@ -450,10 +450,9 @@ class CheckboxFieldComponent extends BaseFieldComponent {
                 this.formControl().setValue(option.value);
             }
             else if (currentValue === option.value) {
-                if (this.isRequired()) {
-                    return;
+                if (!this.isRequired()) {
+                    this.formControl().setValue(null);
                 }
-                this.formControl().setValue(null);
             }
         }
     }
@@ -467,17 +466,15 @@ class CheckboxFieldComponent extends BaseFieldComponent {
         }
     }
     cannotDeselect(option) {
+        if (!this.allowMultiple()) {
+            return false;
+        }
         if (!this.isRequired() || !this.isOptionSelected(option)) {
             return false;
         }
         const currentValue = this.formControl().value;
-        if (this.allowMultiple()) {
-            const selectedCount = Array.isArray(currentValue) ? currentValue.length : 0;
-            return selectedCount <= 1;
-        }
-        else {
-            return true;
-        }
+        const selectedCount = Array.isArray(currentValue) ? currentValue.length : 0;
+        return selectedCount <= 1;
     }
     onValueChange(newValue) {
         super.onValueChange(newValue);
@@ -493,11 +490,11 @@ class CheckboxFieldComponent extends BaseFieldComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: CheckboxFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: CheckboxFieldComponent, isStandalone: true, selector: "core-checkbox-field", usesInheritance: true, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "<!-- Clase para layout inline cuando hay m\u00FAltiples opciones -->\n<div class=\"c-entry-toggle-holder\" [class.hasSeparatedOptions]=\"hasSeparatedOptions()\" [class.multiple-inline]=\"hasMultipleOptions()\">\n\n    <span class=\"c-entry-text\"\n        *ngIf=\"field().label\">\n        {{ field().label | translate }}\n        @if (hasRequiredValidators()) {\n            <span class=\"c-required\">*</span>\n        }\n    </span>\n    \n    @if (hasMultipleOptions()) {\n        @for (option of options(); track option.value) {\n\n            <!-- ! Solcre: Este .c-entry-toggle deber\u00EDa ser un componente en s\u00ED mismo. -->\n            <!-- ! Solcre: El cannot-deselect no est\u00E1 over-engineered. Deber\u00EDa ser un Radio. -->\n            <label class=\"c-entry-toggle\"\n                [class.is-invalid]=\"hasError()\"\n                [class.is-disabled]=\"isDisabled()\"\n                [class.cannot-deselect]=\"cannotDeselect(option)\">\n\n                <!-- onBlurInput() maneja validaciones y marca el campo como touched para mostrar errores -->\n                @if (cannotDeselect(option)) {\n                    <!-- Usar radio cuando no se puede deseleccionar -->\n                    <input\n                        type=\"radio\"\n                        [attr.id]=\"field().key.toString() + '_' + option.value\"\n                        [attr.name]=\"field().key.toString()\"\n                        [checked]=\"isOptionSelected(option)\"\n                        (change)=\"handleOptionChange(option, $event)\"\n                        (blur)=\"onBlurInput()\"\n                    />\n                } @else {\n                    <!-- Usar checkbox normal cuando se puede deseleccionar -->\n                    <input\n                        type=\"checkbox\"\n                        [attr.id]=\"field().key.toString() + '_' + option.value\"\n                        [attr.name]=\"allowMultiple() ? field().key.toString() + '[]' : field().key.toString()\"\n                        [checked]=\"isOptionSelected(option)\"\n                        (change)=\"handleOptionChange(option, $event)\"\n                        (blur)=\"onBlurInput()\"\n                    />\n                }\n                <span class=\"c-entry-toggle__toggle\"></span>\n\n                <span class=\"c-entry-toggle__text\">\n                    {{ option.label | translate }}\n                    @if(option.externalLink) {\n                        <!-- Link externo funcional implementado -->\n                        <a class=\"icon-external-link-thin\" [href]=\"option.externalLink\" target=\"_blank\"></a>\n                    }\n                </span>\n                @if(option.detail) {\n                    <!-- Texto de detalle funcional implementado -->\n                    <span class=\"c-form-checkbox__detail\">{{ option.detail }}</span>\n                }\n            </label>\n\n        }\n    } @else {\n        <!-- ! Solcre: Este .c-entry-toggle deber\u00EDa ser un componente en s\u00ED mismo. -->\n        <!-- ! Solcre: El cannot-deselect no est\u00E1 over-engineered. Deber\u00EDa ser un Radio. -->\n        <label class=\"c-entry-toggle\"\n            [class.is-invalid]=\"hasError()\"\n            [class.is-disabled]=\"isDisabled()\"\n            [class.cannot-deselect]=\"isRequired() && !!formControl().value\">\n\n            <!-- onBlurInput() maneja validaciones y marca el campo como touched para mostrar errores -->\n            @if (isRequired() && !!formControl().value) {\n                <!-- Usar radio cuando es requerido y tiene valor (cannot-deselect) -->\n                <input\n                    type=\"radio\"\n                    [attr.id]=\"field().key.toString()\"\n                    [attr.name]=\"field().key.toString()\"\n                    [checked]=\"!!formControl().value\"\n                    (change)=\"onRadioChange($event)\"\n                    (blur)=\"onBlurInput()\"\n                />\n            } @else {\n                <!-- Usar checkbox normal cuando se puede deseleccionar -->\n                <input\n                    type=\"checkbox\"\n                    [attr.id]=\"field().key.toString()\"\n                    [attr.name]=\"field().key.toString()\"\n                    [formControl]=\"formControl()\"\n                    (blur)=\"onBlurInput()\"\n                />\n            }\n            <span class=\"c-entry-toggle__toggle\"></span>\n            <span class=\"c-entry-toggle__text\">\n                {{ field().label | translate }}\n                @if(externalLink()) {\n                    <!-- Link externo funcional implementado -->\n                    <a class=\"icon-external-link-thin\" [href]=\"externalLink()\" target=\"_blank\"></a>\n                }\n            </span>\n            @if(detail()) {\n                <!-- Texto de detalle funcional implementado -->\n                <span class=\"c-form-checkbox__detail\">{{ detail() }}</span>\n            }\n        </label>\n    }\n\n    <core-field-errors [errors]=\"errors()\" />\n</div>                                  \n                                  ", styles: [".cannot-deselect{pointer-events:none;cursor:not-allowed}.c-entry-text+.c-entry-toggle-holder.hasSeparatedOptions{margin-top:calc(var(--_entry-group-gap) * .8)}.c-entry-toggle-holder.hasSeparatedOptions{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--_entry-group-gap) * .8)}.c-entry-toggle-holder.hasSeparatedOptions .c-entry-text{grid-column:span 2;margin-top:1em}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "component", type: FieldErrorsComponent, selector: "core-field-errors", inputs: ["errors"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: CheckboxFieldComponent, isStandalone: true, selector: "core-checkbox-field", usesInheritance: true, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "<!-- Clase para layout inline cuando hay m\u00FAltiples opciones -->\n<div class=\"c-entry-toggle-holder\" [class.hasSeparatedOptions]=\"hasSeparatedOptions()\" [class.multiple-inline]=\"hasMultipleOptions()\">\n\n    <span class=\"c-entry-text\"\n        *ngIf=\"field().label\">\n        {{ field().label | translate }}\n        @if (hasRequiredValidators()) {\n            <span class=\"c-required\">*</span>\n        }\n    </span>\n    \n    @if (hasMultipleOptions()) {\n        @for (option of options(); track option.value) {\n\n            <!-- ! Solcre: Este .c-entry-toggle deber\u00EDa ser un componente en s\u00ED mismo. -->\n            <!-- ! Solcre: El cannot-deselect no est\u00E1 over-engineered. Deber\u00EDa ser un Radio. -->\n            <label class=\"c-entry-toggle\"\n                [class.is-invalid]=\"hasError()\"\n                [class.is-disabled]=\"isDisabled()\"\n                [class.cannot-deselect]=\"cannotDeselect(option)\">\n\n                <!-- onBlurInput() maneja validaciones y marca el campo como touched para mostrar errores -->\n                @if (!allowMultiple() && isRequired()) {\n                    <!-- Cuando allowMultiple: false y required: true, usar radio buttons para todas las opciones -->\n                    <input\n                        type=\"radio\"\n                        [attr.id]=\"field().key.toString() + '_' + option.value\"\n                        [attr.name]=\"field().key.toString()\"\n                        [checked]=\"isOptionSelected(option)\"\n                        (change)=\"handleOptionChange(option, $event)\"\n                        (blur)=\"onBlurInput()\"\n                    />\n                } @else if (cannotDeselect(option)) {\n                    <!-- Usar radio cuando no se puede deseleccionar (modo m\u00FAltiple con una sola opci\u00F3n) -->\n                    <input\n                        type=\"radio\"\n                        [attr.id]=\"field().key.toString() + '_' + option.value\"\n                        [attr.name]=\"field().key.toString()\"\n                        [checked]=\"isOptionSelected(option)\"\n                        (change)=\"handleOptionChange(option, $event)\"\n                        (blur)=\"onBlurInput()\"\n                    />\n                } @else {\n                    <!-- Usar checkbox normal cuando se puede deseleccionar -->\n                    <input\n                        type=\"checkbox\"\n                        [attr.id]=\"field().key.toString() + '_' + option.value\"\n                        [attr.name]=\"allowMultiple() ? field().key.toString() + '[]' : field().key.toString()\"\n                        [checked]=\"isOptionSelected(option)\"\n                        (change)=\"handleOptionChange(option, $event)\"\n                        (blur)=\"onBlurInput()\"\n                    />\n                }\n                <span class=\"c-entry-toggle__toggle\"></span>\n\n                <span class=\"c-entry-toggle__text\">\n                    {{ option.label | translate }}\n                    @if(option.externalLink) {\n                        <!-- Link externo funcional implementado -->\n                        <a class=\"icon-external-link-thin\" [href]=\"option.externalLink\" target=\"_blank\"></a>\n                    }\n                </span>\n                @if(option.detail) {\n                    <!-- Texto de detalle funcional implementado -->\n                    <span class=\"c-form-checkbox__detail\">{{ option.detail }}</span>\n                }\n            </label>\n\n        }\n    } @else {\n        <!-- ! Solcre: Este .c-entry-toggle deber\u00EDa ser un componente en s\u00ED mismo. -->\n        <!-- ! Solcre: El cannot-deselect no est\u00E1 over-engineered. Deber\u00EDa ser un Radio. -->\n        <label class=\"c-entry-toggle\"\n            [class.is-invalid]=\"hasError()\"\n            [class.is-disabled]=\"isDisabled()\"\n            [class.cannot-deselect]=\"isRequired() && !!formControl().value\">\n\n            <!-- onBlurInput() maneja validaciones y marca el campo como touched para mostrar errores -->\n            @if (isRequired() && !!formControl().value) {\n                <!-- Usar radio cuando es requerido y tiene valor (cannot-deselect) -->\n                <input\n                    type=\"radio\"\n                    [attr.id]=\"field().key.toString()\"\n                    [attr.name]=\"field().key.toString()\"\n                    [checked]=\"!!formControl().value\"\n                    (change)=\"onRadioChange($event)\"\n                    (blur)=\"onBlurInput()\"\n                />\n            } @else {\n                <!-- Usar checkbox normal cuando se puede deseleccionar -->\n                <input\n                    type=\"checkbox\"\n                    [attr.id]=\"field().key.toString()\"\n                    [attr.name]=\"field().key.toString()\"\n                    [formControl]=\"formControl()\"\n                    (blur)=\"onBlurInput()\"\n                />\n            }\n            <span class=\"c-entry-toggle__toggle\"></span>\n            <span class=\"c-entry-toggle__text\">\n                {{ field().label | translate }}\n                @if(externalLink()) {\n                    <!-- Link externo funcional implementado -->\n                    <a class=\"icon-external-link-thin\" [href]=\"externalLink()\" target=\"_blank\"></a>\n                }\n            </span>\n            @if(detail()) {\n                <!-- Texto de detalle funcional implementado -->\n                <span class=\"c-form-checkbox__detail\">{{ detail() }}</span>\n            }\n        </label>\n    }\n\n    <core-field-errors [errors]=\"errors()\" />\n</div>                                  \n                                  ", styles: [".cannot-deselect{pointer-events:none;cursor:not-allowed}.c-entry-text+.c-entry-toggle-holder.hasSeparatedOptions{margin-top:calc(var(--_entry-group-gap) * .8)}.c-entry-toggle-holder.hasSeparatedOptions{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--_entry-group-gap) * .8)}.c-entry-toggle-holder.hasSeparatedOptions .c-entry-text{grid-column:span 2;margin-top:1em}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "component", type: FieldErrorsComponent, selector: "core-field-errors", inputs: ["errors"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: CheckboxFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'core-checkbox-field', standalone: true, imports: [CommonModule, FormsModule, ReactiveFormsModule, TranslateModule, FieldErrorsComponent], hostDirectives: [CoreHostDirective], template: "<!-- Clase para layout inline cuando hay m\u00FAltiples opciones -->\n<div class=\"c-entry-toggle-holder\" [class.hasSeparatedOptions]=\"hasSeparatedOptions()\" [class.multiple-inline]=\"hasMultipleOptions()\">\n\n    <span class=\"c-entry-text\"\n        *ngIf=\"field().label\">\n        {{ field().label | translate }}\n        @if (hasRequiredValidators()) {\n            <span class=\"c-required\">*</span>\n        }\n    </span>\n    \n    @if (hasMultipleOptions()) {\n        @for (option of options(); track option.value) {\n\n            <!-- ! Solcre: Este .c-entry-toggle deber\u00EDa ser un componente en s\u00ED mismo. -->\n            <!-- ! Solcre: El cannot-deselect no est\u00E1 over-engineered. Deber\u00EDa ser un Radio. -->\n            <label class=\"c-entry-toggle\"\n                [class.is-invalid]=\"hasError()\"\n                [class.is-disabled]=\"isDisabled()\"\n                [class.cannot-deselect]=\"cannotDeselect(option)\">\n\n                <!-- onBlurInput() maneja validaciones y marca el campo como touched para mostrar errores -->\n                @if (cannotDeselect(option)) {\n                    <!-- Usar radio cuando no se puede deseleccionar -->\n                    <input\n                        type=\"radio\"\n                        [attr.id]=\"field().key.toString() + '_' + option.value\"\n                        [attr.name]=\"field().key.toString()\"\n                        [checked]=\"isOptionSelected(option)\"\n                        (change)=\"handleOptionChange(option, $event)\"\n                        (blur)=\"onBlurInput()\"\n                    />\n                } @else {\n                    <!-- Usar checkbox normal cuando se puede deseleccionar -->\n                    <input\n                        type=\"checkbox\"\n                        [attr.id]=\"field().key.toString() + '_' + option.value\"\n                        [attr.name]=\"allowMultiple() ? field().key.toString() + '[]' : field().key.toString()\"\n                        [checked]=\"isOptionSelected(option)\"\n                        (change)=\"handleOptionChange(option, $event)\"\n                        (blur)=\"onBlurInput()\"\n                    />\n                }\n                <span class=\"c-entry-toggle__toggle\"></span>\n\n                <span class=\"c-entry-toggle__text\">\n                    {{ option.label | translate }}\n                    @if(option.externalLink) {\n                        <!-- Link externo funcional implementado -->\n                        <a class=\"icon-external-link-thin\" [href]=\"option.externalLink\" target=\"_blank\"></a>\n                    }\n                </span>\n                @if(option.detail) {\n                    <!-- Texto de detalle funcional implementado -->\n                    <span class=\"c-form-checkbox__detail\">{{ option.detail }}</span>\n                }\n            </label>\n\n        }\n    } @else {\n        <!-- ! Solcre: Este .c-entry-toggle deber\u00EDa ser un componente en s\u00ED mismo. -->\n        <!-- ! Solcre: El cannot-deselect no est\u00E1 over-engineered. Deber\u00EDa ser un Radio. -->\n        <label class=\"c-entry-toggle\"\n            [class.is-invalid]=\"hasError()\"\n            [class.is-disabled]=\"isDisabled()\"\n            [class.cannot-deselect]=\"isRequired() && !!formControl().value\">\n\n            <!-- onBlurInput() maneja validaciones y marca el campo como touched para mostrar errores -->\n            @if (isRequired() && !!formControl().value) {\n                <!-- Usar radio cuando es requerido y tiene valor (cannot-deselect) -->\n                <input\n                    type=\"radio\"\n                    [attr.id]=\"field().key.toString()\"\n                    [attr.name]=\"field().key.toString()\"\n                    [checked]=\"!!formControl().value\"\n                    (change)=\"onRadioChange($event)\"\n                    (blur)=\"onBlurInput()\"\n                />\n            } @else {\n                <!-- Usar checkbox normal cuando se puede deseleccionar -->\n                <input\n                    type=\"checkbox\"\n                    [attr.id]=\"field().key.toString()\"\n                    [attr.name]=\"field().key.toString()\"\n                    [formControl]=\"formControl()\"\n                    (blur)=\"onBlurInput()\"\n                />\n            }\n            <span class=\"c-entry-toggle__toggle\"></span>\n            <span class=\"c-entry-toggle__text\">\n                {{ field().label | translate }}\n                @if(externalLink()) {\n                    <!-- Link externo funcional implementado -->\n                    <a class=\"icon-external-link-thin\" [href]=\"externalLink()\" target=\"_blank\"></a>\n                }\n            </span>\n            @if(detail()) {\n                <!-- Texto de detalle funcional implementado -->\n                <span class=\"c-form-checkbox__detail\">{{ detail() }}</span>\n            }\n        </label>\n    }\n\n    <core-field-errors [errors]=\"errors()\" />\n</div>                                  \n                                  ", styles: [".cannot-deselect{pointer-events:none;cursor:not-allowed}.c-entry-text+.c-entry-toggle-holder.hasSeparatedOptions{margin-top:calc(var(--_entry-group-gap) * .8)}.c-entry-toggle-holder.hasSeparatedOptions{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--_entry-group-gap) * .8)}.c-entry-toggle-holder.hasSeparatedOptions .c-entry-text{grid-column:span 2;margin-top:1em}\n"] }]
+            args: [{ selector: 'core-checkbox-field', standalone: true, imports: [CommonModule, FormsModule, ReactiveFormsModule, TranslateModule, FieldErrorsComponent], hostDirectives: [CoreHostDirective], template: "<!-- Clase para layout inline cuando hay m\u00FAltiples opciones -->\n<div class=\"c-entry-toggle-holder\" [class.hasSeparatedOptions]=\"hasSeparatedOptions()\" [class.multiple-inline]=\"hasMultipleOptions()\">\n\n    <span class=\"c-entry-text\"\n        *ngIf=\"field().label\">\n        {{ field().label | translate }}\n        @if (hasRequiredValidators()) {\n            <span class=\"c-required\">*</span>\n        }\n    </span>\n    \n    @if (hasMultipleOptions()) {\n        @for (option of options(); track option.value) {\n\n            <!-- ! Solcre: Este .c-entry-toggle deber\u00EDa ser un componente en s\u00ED mismo. -->\n            <!-- ! Solcre: El cannot-deselect no est\u00E1 over-engineered. Deber\u00EDa ser un Radio. -->\n            <label class=\"c-entry-toggle\"\n                [class.is-invalid]=\"hasError()\"\n                [class.is-disabled]=\"isDisabled()\"\n                [class.cannot-deselect]=\"cannotDeselect(option)\">\n\n                <!-- onBlurInput() maneja validaciones y marca el campo como touched para mostrar errores -->\n                @if (!allowMultiple() && isRequired()) {\n                    <!-- Cuando allowMultiple: false y required: true, usar radio buttons para todas las opciones -->\n                    <input\n                        type=\"radio\"\n                        [attr.id]=\"field().key.toString() + '_' + option.value\"\n                        [attr.name]=\"field().key.toString()\"\n                        [checked]=\"isOptionSelected(option)\"\n                        (change)=\"handleOptionChange(option, $event)\"\n                        (blur)=\"onBlurInput()\"\n                    />\n                } @else if (cannotDeselect(option)) {\n                    <!-- Usar radio cuando no se puede deseleccionar (modo m\u00FAltiple con una sola opci\u00F3n) -->\n                    <input\n                        type=\"radio\"\n                        [attr.id]=\"field().key.toString() + '_' + option.value\"\n                        [attr.name]=\"field().key.toString()\"\n                        [checked]=\"isOptionSelected(option)\"\n                        (change)=\"handleOptionChange(option, $event)\"\n                        (blur)=\"onBlurInput()\"\n                    />\n                } @else {\n                    <!-- Usar checkbox normal cuando se puede deseleccionar -->\n                    <input\n                        type=\"checkbox\"\n                        [attr.id]=\"field().key.toString() + '_' + option.value\"\n                        [attr.name]=\"allowMultiple() ? field().key.toString() + '[]' : field().key.toString()\"\n                        [checked]=\"isOptionSelected(option)\"\n                        (change)=\"handleOptionChange(option, $event)\"\n                        (blur)=\"onBlurInput()\"\n                    />\n                }\n                <span class=\"c-entry-toggle__toggle\"></span>\n\n                <span class=\"c-entry-toggle__text\">\n                    {{ option.label | translate }}\n                    @if(option.externalLink) {\n                        <!-- Link externo funcional implementado -->\n                        <a class=\"icon-external-link-thin\" [href]=\"option.externalLink\" target=\"_blank\"></a>\n                    }\n                </span>\n                @if(option.detail) {\n                    <!-- Texto de detalle funcional implementado -->\n                    <span class=\"c-form-checkbox__detail\">{{ option.detail }}</span>\n                }\n            </label>\n\n        }\n    } @else {\n        <!-- ! Solcre: Este .c-entry-toggle deber\u00EDa ser un componente en s\u00ED mismo. -->\n        <!-- ! Solcre: El cannot-deselect no est\u00E1 over-engineered. Deber\u00EDa ser un Radio. -->\n        <label class=\"c-entry-toggle\"\n            [class.is-invalid]=\"hasError()\"\n            [class.is-disabled]=\"isDisabled()\"\n            [class.cannot-deselect]=\"isRequired() && !!formControl().value\">\n\n            <!-- onBlurInput() maneja validaciones y marca el campo como touched para mostrar errores -->\n            @if (isRequired() && !!formControl().value) {\n                <!-- Usar radio cuando es requerido y tiene valor (cannot-deselect) -->\n                <input\n                    type=\"radio\"\n                    [attr.id]=\"field().key.toString()\"\n                    [attr.name]=\"field().key.toString()\"\n                    [checked]=\"!!formControl().value\"\n                    (change)=\"onRadioChange($event)\"\n                    (blur)=\"onBlurInput()\"\n                />\n            } @else {\n                <!-- Usar checkbox normal cuando se puede deseleccionar -->\n                <input\n                    type=\"checkbox\"\n                    [attr.id]=\"field().key.toString()\"\n                    [attr.name]=\"field().key.toString()\"\n                    [formControl]=\"formControl()\"\n                    (blur)=\"onBlurInput()\"\n                />\n            }\n            <span class=\"c-entry-toggle__toggle\"></span>\n            <span class=\"c-entry-toggle__text\">\n                {{ field().label | translate }}\n                @if(externalLink()) {\n                    <!-- Link externo funcional implementado -->\n                    <a class=\"icon-external-link-thin\" [href]=\"externalLink()\" target=\"_blank\"></a>\n                }\n            </span>\n            @if(detail()) {\n                <!-- Texto de detalle funcional implementado -->\n                <span class=\"c-form-checkbox__detail\">{{ detail() }}</span>\n            }\n        </label>\n    }\n\n    <core-field-errors [errors]=\"errors()\" />\n</div>                                  \n                                  ", styles: [".cannot-deselect{pointer-events:none;cursor:not-allowed}.c-entry-text+.c-entry-toggle-holder.hasSeparatedOptions{margin-top:calc(var(--_entry-group-gap) * .8)}.c-entry-toggle-holder.hasSeparatedOptions{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--_entry-group-gap) * .8)}.c-entry-toggle-holder.hasSeparatedOptions .c-entry-text{grid-column:span 2;margin-top:1em}\n"] }]
         }], ctorParameters: () => [] });
 
 class DateFieldComponent extends BaseFieldComponent {
@@ -5229,6 +5226,317 @@ const isSameDate = (date1, date2) => {
         date1.getDate() === date2.getDate());
 };
 
+class DynamicFieldsHelper {
+    formBuilder = new FormBuilder();
+    config;
+    mode;
+    _editedData = signal(null);
+    _fieldErrors = signal({});
+    _originalData = signal(null);
+    _form = signal(this.formBuilder.group({}));
+    state;
+    constructor(config, mode = ModalMode.CREATE) {
+        this.config = config;
+        this.mode = mode;
+        this.state = {
+            editedData: this._editedData.asReadonly(),
+            fieldErrors: this._fieldErrors.asReadonly(),
+            hasUnsavedChanges: computed(() => this.detectChanges()),
+            isValid: computed(() => this.isFormValid())
+        };
+        this.initializeData();
+    }
+    initializeData() {
+        const initialData = this.config.initialData;
+        let newInstance;
+        if (initialData && Object.keys(initialData).length > 0) {
+            if (this.config.modelFactory) {
+                newInstance = this.config.modelFactory(initialData);
+            }
+            else {
+                newInstance = Object.create(Object.getPrototypeOf(initialData));
+                Object.assign(newInstance, initialData);
+            }
+        }
+        else if (this.mode === ModalMode.CREATE) {
+            if (this.config.modelFactory) {
+                newInstance = this.config.modelFactory({});
+            }
+            else {
+                newInstance = {
+                    getId: () => 0,
+                };
+            }
+        }
+        else {
+            this._editedData.set(null);
+            return;
+        }
+        const formGroup = {};
+        this.config.fields.forEach(field => {
+            const fieldKey = field.key;
+            const payloadKey = (field.keyToPayload ?? field.key);
+            const modeConfig = field.modes?.[this.mode];
+            const defaultValue = modeConfig?.defaultValue ?? field.defaultValue;
+            if (this.mode === ModalMode.CREATE) {
+                if (defaultValue !== undefined && newInstance[fieldKey] === undefined) {
+                    if (typeof defaultValue === 'function') {
+                        const computedValue = defaultValue(newInstance);
+                        newInstance[payloadKey] = computedValue;
+                    }
+                    else {
+                        newInstance[payloadKey] = defaultValue;
+                    }
+                }
+            }
+            else if (this.mode === ModalMode.EDIT) {
+                if (typeof defaultValue === 'function') {
+                    const computedValue = defaultValue(newInstance);
+                    newInstance[payloadKey] = computedValue;
+                }
+            }
+            const validators = modeConfig?.validators ?? field.validators ?? [];
+            formGroup[fieldKey] = [newInstance[fieldKey], validators];
+        });
+        this._form.set(this.formBuilder.group(formGroup));
+        this.config.fields.forEach(field => {
+            const fieldKey = field.key;
+            const payloadKey = (field.keyToPayload ?? field.key);
+            if ('dynamicValue' in field && typeof field.dynamicValue === 'function') {
+                const dynamicVal = field.dynamicValue(newInstance);
+                if (dynamicVal !== undefined) {
+                    newInstance[payloadKey] = dynamicVal;
+                    const control = this._form().get(fieldKey);
+                    if (control) {
+                        control.setValue(dynamicVal, { emitEvent: false });
+                    }
+                }
+            }
+        });
+        this._editedData.set(newInstance);
+        if (this.mode !== ModalMode.VIEW) {
+            const originalCopy = this.config.modelFactory
+                ? this.config.modelFactory(newInstance)
+                : Object.create(Object.getPrototypeOf(newInstance));
+            Object.assign(originalCopy, newInstance);
+            this._originalData.set(originalCopy);
+        }
+        setTimeout(() => {
+            Object.values(this._form().controls).forEach(control => {
+                control.markAsUntouched();
+            });
+            this._fieldErrors.set({});
+        }, 0);
+        if (this.config.onDataChange) {
+            setTimeout(() => {
+                this.config.onDataChange(newInstance);
+            }, 1);
+        }
+    }
+    getFieldValue(fieldKey) {
+        const data = this._editedData();
+        return data ? data[fieldKey] : null;
+    }
+    onFieldValueChange(fieldKey, value) {
+        this.updateField(fieldKey, value);
+        const control = this._form().get(fieldKey);
+        if (control) {
+            control.markAsTouched();
+            this.validateField(fieldKey);
+            if (this.config.onDataChange && this._editedData()) {
+                this.config.onDataChange(this._editedData());
+            }
+        }
+    }
+    onFieldBlur(fieldKey) {
+        const control = this._form().get(fieldKey);
+        if (control) {
+            control.markAsTouched();
+            this.validateField(fieldKey);
+        }
+    }
+    getFieldErrors(fieldKey) {
+        return this._fieldErrors()[fieldKey] || [];
+    }
+    validateField(fieldKey) {
+        const field = this.config.fields.find(f => f.key === fieldKey);
+        const control = this._form().get(fieldKey);
+        const errors = [];
+        if (!field || !control)
+            return;
+        if (control.touched && control.errors) {
+            const modeConfig = field.modes?.[this.mode];
+            const errorMessages = modeConfig?.errorMessages ?? field.errorMessages ?? {};
+            Object.keys(control.errors).forEach(errorKey => {
+                const message = errorMessages[errorKey] || errorKey;
+                errors.push(message);
+            });
+        }
+        if (control.touched && this.config.customValidators && this._editedData()) {
+            const customErrors = this.config.customValidators
+                .flatMap(validator => validator(this._editedData()));
+            errors.push(...customErrors);
+        }
+        this._fieldErrors.update(current => {
+            const updated = { ...current };
+            if (errors.length > 0) {
+                updated[fieldKey] = errors;
+            }
+            else {
+                delete updated[fieldKey];
+            }
+            return updated;
+        });
+        if (this.config.onValidationChange) {
+            this.config.onValidationChange(this._fieldErrors());
+        }
+    }
+    validateAllFields() {
+        const allErrors = {};
+        let isValid = true;
+        this.config.fields.forEach(field => {
+            const modeConfig = field.modes?.[this.mode];
+            if (modeConfig?.visible === false)
+                return;
+            const control = this._form().get(field.key);
+            if (control) {
+                control.markAsTouched();
+                if (control.errors) {
+                    isValid = false;
+                    const errorMessages = modeConfig?.errorMessages ?? field.errorMessages ?? {};
+                    const fieldErrors = Object.keys(control.errors).map(errorKey => errorMessages[errorKey] || errorKey);
+                    allErrors[field.key] = fieldErrors;
+                }
+            }
+        });
+        if (this.config.customValidators && this._editedData()) {
+            const customErrors = this.config.customValidators
+                .flatMap(validator => validator(this._editedData()));
+            if (customErrors.length > 0) {
+                isValid = false;
+                allErrors['_custom'] = customErrors;
+            }
+        }
+        this._fieldErrors.set(allErrors);
+        if (this.config.onValidationChange) {
+            this.config.onValidationChange(allErrors);
+        }
+        return isValid;
+    }
+    reset() {
+        this._editedData.set(null);
+        this._fieldErrors.set({});
+        this._originalData.set(null);
+        this._form.set(this.formBuilder.group({}));
+        this.initializeData();
+    }
+    setData(data) {
+        this.config.initialData = data;
+        this.initializeData();
+    }
+    getPayloadData() {
+        const data = this._editedData();
+        if (!data)
+            return null;
+        let clonedData;
+        if (this.config.modelFactory) {
+            clonedData = this.config.modelFactory(data);
+        }
+        else {
+            clonedData = Object.create(Object.getPrototypeOf(data));
+            Object.assign(clonedData, data);
+        }
+        this.config.fields.forEach(field => {
+            const fieldConfig = this.getFieldConfig(field);
+            const shouldInclude = fieldConfig.includeInPayload !== false;
+            if (!shouldInclude) {
+                const targetKey = (fieldConfig.keyToPayload ?? field.key);
+                delete clonedData[targetKey];
+            }
+            else if (field.keyToPayload && field.keyToPayload !== field.key) {
+                delete clonedData[field.key];
+            }
+        });
+        this.convertEmptyStringsToNull(clonedData);
+        return clonedData;
+    }
+    updateField(fieldKey, value) {
+        if (!this._editedData())
+            return;
+        const field = this.config.fields.find(f => f.key === fieldKey);
+        if (!field)
+            return;
+        const payloadKey = (field.keyToPayload ?? field.key);
+        this._editedData.update(data => {
+            if (data) {
+                data[payloadKey] = value;
+            }
+            return data;
+        });
+        const control = this._form().get(fieldKey);
+        if (control) {
+            control.setValue(value, { emitEvent: false });
+        }
+    }
+    getFieldConfig(field) {
+        const modeConfig = field.modes?.[this.mode];
+        if (!modeConfig)
+            return field;
+        return {
+            ...field,
+            defaultValue: modeConfig.defaultValue ?? field.defaultValue,
+            readonly: modeConfig.readonly ?? field.readonly,
+            options: modeConfig.options ?? field.options,
+            validators: modeConfig.validators ?? field.validators,
+            errorMessages: modeConfig.errorMessages ?? field.errorMessages,
+            multiple: modeConfig.multiple ?? field.multiple,
+            visible: modeConfig.visible ?? field.visible,
+            includeInPayload: modeConfig.includeInPayload ?? field.includeInPayload
+        };
+    }
+    detectChanges() {
+        const editedData = this._editedData();
+        const originalData = this._originalData();
+        if (!editedData || !originalData || this.mode === ModalMode.VIEW) {
+            return false;
+        }
+        const relevantFields = this.config.fields.filter(field => {
+            const modeConfig = field.modes?.[this.mode];
+            return modeConfig?.visible !== false;
+        });
+        return relevantFields.some(field => {
+            const fieldKey = field.key;
+            const editedValue = editedData[fieldKey];
+            const originalValue = originalData[fieldKey];
+            if (Array.isArray(editedValue) && Array.isArray(originalValue)) {
+                return JSON.stringify(editedValue) !== JSON.stringify(originalValue);
+            }
+            if (editedValue instanceof Date && originalValue instanceof Date) {
+                return editedValue.getTime() !== originalValue.getTime();
+            }
+            return editedValue !== originalValue;
+        });
+    }
+    isFormValid() {
+        const fieldErrors = this._fieldErrors();
+        return Object.keys(fieldErrors).length === 0;
+    }
+    convertEmptyStringsToNull(data) {
+        Object.keys(data).forEach(key => {
+            const value = data[key];
+            if (typeof value === 'string' && value.trim() === '') {
+                data[key] = null;
+            }
+            else if (Array.isArray(value)) {
+                data[key] = value.map(item => typeof item === 'string' && item.trim() === '' ? null : item);
+            }
+            else if (value && typeof value === 'object' && value.constructor === Object) {
+                this.convertEmptyStringsToNull(value);
+            }
+        });
+    }
+}
+
 class FileModel {
     id;
     filename;
@@ -11311,12 +11619,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
 // Este archivo es generado automáticamente por scripts/update-version.js
 // No edites manualmente este archivo
 const VERSION = {
-    full: '2.12.11',
+    full: '2.12.13',
     major: 2,
     minor: 12,
-    patch: 11,
-    timestamp: '2025-09-05T14:00:47.757Z',
-    buildDate: '5/9/2025'
+    patch: 13,
+    timestamp: '2025-09-08T15:36:53.831Z',
+    buildDate: '8/9/2025'
 };
 
 class MainNavComponent {
@@ -13233,5 +13541,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ActiveFiltersComponent, AlertComponent, AlertContainerComponent, AlertService, AlertType, ApiConfigurationProvider, BaseFieldComponent, ButtonContext, ButtonSize, ButtonType, CacheBustingInterceptor, CardComponent, CarouselComponent, CheckboxFieldComponent, ConfigurationModel, ConfirmationDialogComponent, ConfirmationDialogService, CoreHostDirective, CoreUiHttpLoaderFactory, CoreUiTranslateLoader, CoreUiTranslateService, DataListComponent, DataListItemComponent, DateFieldComponent, DateUtility, DatetimeFieldComponent, DialogActions, DocumentAction, DocumentDisplayMode, DropdownComponent, DropdownDirection, DropdownService, DynamicFieldDirective, FieldErrorsComponent, FieldType, FileFieldComponent, FileModel, FileTemplateModel, FileTemplateType, FileType, FileTypeModel, FileUploadService, FilterModalComponent, FilterService, FilterType, GenericButtonComponent, GenericDocumentationComponent, GenericModalComponent, GenericPaginationComponent, GenericRatingComponent, GenericSidebarComponent, GenericStepsComponent, GenericTableComponent, GenericTabsComponent, GenericTimelineComponent, GlobalApiConfigService, HeaderComponent, HeaderConfigurationService, HeaderElementType, HeaderService, HttpLoaderFactory, ImageModalComponent, ImageModalService, ImagePreviewComponent, LayoutAuth, LayoutBreakpoint, LayoutComponent, LayoutService, LayoutStateService, LayoutType, LoaderComponent, LoaderService, MainNavComponent, MainNavService, ModalMode, ModelApiService, MultiEntryFieldComponent, MultiEntryOutputFormat, NumberFieldComponent, NumberFieldConfigType, NumberFieldType, NumberRange, PERMISSION_ACTIONS_PROVIDER, PERMISSION_PROVIDER, PERMISSION_RESOURCES_PROVIDER, PaginationService, PasswordFieldComponent, PermissionEnumsService, PermissionModel, PermissionService, PermissionWrapperService, PermissionsActions, PermissionsInterceptor, PermissionsResources, ProgressBarComponent, ProgressBarSize, RatingService, RatingSize, RatingType, ResetPasswordModel, RoleModel, SelectFieldComponent, ServerSelectFieldComponent, ServerSelectService, SidebarCustomModalComponent, SidebarCustomModalService, SidebarHeight, SidebarMobileModalService, SidebarMobileType, SidebarPosition, SidebarService, SidebarState, SidebarTemplateRegistryService, SidebarVisibility, SidebarWidth, SmartFieldComponent, SortDirection, SortMode, StepSize, StepStatus, StepType, StepsService, SwitchFieldComponent, TableAction, TableActionService, TableDataService, TableSortService, TextAreaFieldComponent, TextFieldComponent, TimeFieldComponent, TimeInterval, TimelineService, TimelineStatus, TimelineType, TranslationMergeService, UsersModel, VERSION, equalToValidator, isSameDate, provideCoreUiTranslateLoader, providePermissionActions, providePermissionEnums, providePermissionResources, providePermissionService, providePermissionServiceFactory, provideTranslateLoader };
+export { ActiveFiltersComponent, AlertComponent, AlertContainerComponent, AlertService, AlertType, ApiConfigurationProvider, BaseFieldComponent, ButtonContext, ButtonSize, ButtonType, CacheBustingInterceptor, CardComponent, CarouselComponent, CheckboxFieldComponent, ConfigurationModel, ConfirmationDialogComponent, ConfirmationDialogService, CoreHostDirective, CoreUiHttpLoaderFactory, CoreUiTranslateLoader, CoreUiTranslateService, DataListComponent, DataListItemComponent, DateFieldComponent, DateUtility, DatetimeFieldComponent, DialogActions, DocumentAction, DocumentDisplayMode, DropdownComponent, DropdownDirection, DropdownService, DynamicFieldDirective, DynamicFieldsHelper, FieldErrorsComponent, FieldType, FileFieldComponent, FileModel, FileTemplateModel, FileTemplateType, FileType, FileTypeModel, FileUploadService, FilterModalComponent, FilterService, FilterType, GenericButtonComponent, GenericDocumentationComponent, GenericModalComponent, GenericPaginationComponent, GenericRatingComponent, GenericSidebarComponent, GenericStepsComponent, GenericTableComponent, GenericTabsComponent, GenericTimelineComponent, GlobalApiConfigService, HeaderComponent, HeaderConfigurationService, HeaderElementType, HeaderService, HttpLoaderFactory, ImageModalComponent, ImageModalService, ImagePreviewComponent, LayoutAuth, LayoutBreakpoint, LayoutComponent, LayoutService, LayoutStateService, LayoutType, LoaderComponent, LoaderService, MainNavComponent, MainNavService, ModalMode, ModelApiService, MultiEntryFieldComponent, MultiEntryOutputFormat, NumberFieldComponent, NumberFieldConfigType, NumberFieldType, NumberRange, PERMISSION_ACTIONS_PROVIDER, PERMISSION_PROVIDER, PERMISSION_RESOURCES_PROVIDER, PaginationService, PasswordFieldComponent, PermissionEnumsService, PermissionModel, PermissionService, PermissionWrapperService, PermissionsActions, PermissionsInterceptor, PermissionsResources, ProgressBarComponent, ProgressBarSize, RatingService, RatingSize, RatingType, ResetPasswordModel, RoleModel, SelectFieldComponent, ServerSelectFieldComponent, ServerSelectService, SidebarCustomModalComponent, SidebarCustomModalService, SidebarHeight, SidebarMobileModalService, SidebarMobileType, SidebarPosition, SidebarService, SidebarState, SidebarTemplateRegistryService, SidebarVisibility, SidebarWidth, SmartFieldComponent, SortDirection, SortMode, StepSize, StepStatus, StepType, StepsService, SwitchFieldComponent, TableAction, TableActionService, TableDataService, TableSortService, TextAreaFieldComponent, TextFieldComponent, TimeFieldComponent, TimeInterval, TimelineService, TimelineStatus, TimelineType, TranslationMergeService, UsersModel, VERSION, equalToValidator, isSameDate, provideCoreUiTranslateLoader, providePermissionActions, providePermissionEnums, providePermissionResources, providePermissionService, providePermissionServiceFactory, provideTranslateLoader };
 //# sourceMappingURL=solcre-org-core-ui.mjs.map