@solcre-org/core-ui 2.15.34 → 2.15.35

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

@@ -371,6 +371,12 @@ class CheckboxFieldComponent extends BaseFieldComponent {
         const checkboxField = this.field();
         return checkboxField.checkboxConfig?.required ?? false;
     });
+    hasRequiredIndicator = computed(() => {
+        if (this.hasRequiredValidators()) {
+            return true;
+        }
+        return this.isRequired();
+    });
     hasMultipleOptions = computed(() => this.options().length > 0);
     hasSeparatedOptions = computed(() => this.field().checkboxConfig?.separatedOptions ?? false);
     constructor() {
@@ -444,8 +450,7 @@ class CheckboxFieldComponent extends BaseFieldComponent {
         }
     }
     initializeFormControl() {
-        const modeConfig = this.field().modes?.[this.mode()];
-        const validators = modeConfig?.validators ?? this.field().validators ?? [];
+        const validators = this.getCurrentValidators();
         let initialValue = this.getInitialValue();
         this.formControl.set(new FormControl(initialValue, validators));
         this.formControl().valueChanges.subscribe(newValue => {
@@ -561,11 +566,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 (!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"] }] });
+    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 (hasRequiredIndicator()) {\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 (hasRequiredIndicator()) {\n                    <span class=\"c-required\">*</span>\n                }\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 (!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"] }]
+            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 (hasRequiredIndicator()) {\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 (hasRequiredIndicator()) {\n                    <span class=\"c-required\">*</span>\n                }\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 {
@@ -10860,6 +10865,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                 }]
         }] });
 
+const MODEL_REFERENCE_SORT_KEY = '__model_reference__';
 class TableSortService {
     sortConfigsSubject = new BehaviorSubject([]);
     tableSortConfig = { mode: SortMode.MEMORY };
@@ -10911,24 +10917,23 @@ class TableSortService {
         const existingSort = currentSorts.find(sort => sort.key === columnKey);
         let newSorts;
         if (existingSort) {
-            if (existingSort.direction === SortDirection.ASC) {
-                if (this.tableSortConfig.multiColumn) {
-                    newSorts = currentSorts.map(sort => sort.key === columnKey
-                        ? { ...sort, direction: SortDirection.DESC }
-                        : sort);
-                }
-                else {
-                    newSorts = [{ ...existingSort, direction: SortDirection.DESC, priority: 0 }];
-                }
+            const currentDirection = existingSort.direction;
+            const newDirection = currentDirection === SortDirection.DESC
+                ? SortDirection.ASC
+                : SortDirection.DESC;
+            if (this.tableSortConfig.multiColumn) {
+                newSorts = currentSorts.map(sort => sort.key === columnKey
+                    ? { ...sort, direction: newDirection }
+                    : sort);
             }
             else {
-                newSorts = currentSorts.filter(sort => sort.key !== columnKey);
+                newSorts = [{ ...existingSort, direction: newDirection, priority: 0 }];
             }
         }
         else {
             const newSort = {
                 key: columnKey,
-                direction: SortDirection.ASC,
+                direction: SortDirection.DESC,
                 priority: 0
             };
             if (this.tableSortConfig.multiColumn) {
@@ -10974,7 +10979,12 @@ class TableSortService {
             for (const sortConfig of sortConfigs.sort((x, y) => (x.priority ?? 0) - (y.priority ?? 0))) {
                 const column = columns.find(col => col.key === sortConfig.key || col.sortKey === sortConfig.key);
                 let result = 0;
-                if (column?.sortFunction) {
+                if (sortConfig.key === MODEL_REFERENCE_SORT_KEY) {
+                    const referenceA = this.getModelReferenceValue(a);
+                    const referenceB = this.getModelReferenceValue(b);
+                    result = this.compareValues(referenceA, referenceB);
+                }
+                else if (column?.sortFunction) {
                     result = column.sortFunction(a, b);
                 }
                 else {
@@ -11001,12 +11011,18 @@ class TableSortService {
             sortConfigs
                 .sort((a, b) => (a.priority ?? 0) - (b.priority ?? 0))
                 .forEach(sort => {
+                if (sort.key === MODEL_REFERENCE_SORT_KEY) {
+                    return;
+                }
                 params[`${paramName}[${sort.key}]`] = sort.direction;
             });
             return params;
         }
         else {
             const firstSort = sortConfigs[0];
+            if (firstSort.key === MODEL_REFERENCE_SORT_KEY) {
+                return {};
+            }
             return {
                 [`${paramName}[${firstSort.key}]`]: firstSort.direction
             };
@@ -11023,6 +11039,13 @@ class TableSortService {
             return value && value[key] !== undefined ? value[key] : null;
         }, obj);
     }
+    getModelReferenceValue(item) {
+        if (item && typeof item.getReference === 'function') {
+            const reference = item.getReference();
+            return reference !== undefined && reference !== null ? String(reference) : null;
+        }
+        return null;
+    }
     compareValues(a, b) {
         if (a === null || a === undefined)
             return b === null || b === undefined ? 0 : -1;
@@ -12846,6 +12869,10 @@ class GenericTableComponent {
         window.addEventListener('createRequested', this.handleCreateRequested);
         window.addEventListener('globalActionTriggered', this.handleGlobalActionTriggered);
         window.addEventListener('popstate', this.handlePopstate);
+        effect(() => {
+            this.columns();
+            queueMicrotask(() => this.applyDefaultSortIfNeeded());
+        });
         effect(() => {
             this.updateHeaderService();
         });
@@ -12903,6 +12930,10 @@ class GenericTableComponent {
                 }
             }
             this.tableSortService.configure(this.sortConfig());
+            this.applyDefaultSortIfNeeded();
+        }
+        else {
+            this.applyDefaultSortIfNeeded();
         }
         this.subscriptions.push(this.tableSortService.sortConfigs$.subscribe(() => {
             this.handleSortChange();
@@ -13048,6 +13079,34 @@ class GenericTableComponent {
             this.processDataInput(this.dataInput());
         }
     }
+    applyDefaultSortIfNeeded() {
+        const currentSorts = this.tableSortService.getCurrentSortConfigs();
+        if (currentSorts.length > 0) {
+            return;
+        }
+        if (!this.tableSortService.isServerMode()) {
+            this.tableSortService.setSortConfigs([
+                {
+                    key: MODEL_REFERENCE_SORT_KEY,
+                    direction: SortDirection.DESC,
+                    priority: 0,
+                },
+            ]);
+            return;
+        }
+        const firstSortableColumn = this.columns().find(column => column.sortable);
+        if (!firstSortableColumn) {
+            return;
+        }
+        const sortKey = firstSortableColumn.sortKey || firstSortableColumn.key;
+        this.tableSortService.setSortConfigs([
+            {
+                key: sortKey,
+                direction: SortDirection.DESC,
+                priority: 0,
+            },
+        ]);
+    }
     updateDisplayedDataFromServer(data) {
         if (!Array.isArray(data)) {
             data = [];
@@ -14169,6 +14228,7 @@ class GenericTableComponent {
     ngOnDestroy() {
         this.subscriptions.forEach(sub => sub.unsubscribe());
         this.inlineEditService.destroy();
+        this.tableSortService.reset();
         this.loaderTimeouts.forEach((timeoutId) => {
             clearTimeout(timeoutId);
         });
@@ -16216,12 +16276,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.15.34',
+    full: '2.15.35',
     major: 2,
     minor: 15,
-    patch: 34,
-    timestamp: '2025-11-12T16:27:37.988Z',
-    buildDate: '12/11/2025'
+    patch: 35,
+    timestamp: '2025-11-14T15:54:22.049Z',
+    buildDate: '14/11/2025'
 };
 
 class MainNavComponent {
@@ -19984,5 +20044,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ALL_COUNTRY_CODES, ActiveFiltersComponent, AgeValidationHelper, AlertComponent, AlertContainerComponent, AlertService, AlertType, ApiConfigurationProvider, BaseFieldComponent, ButtonContext, ButtonSize, ButtonType, COMMON_COUNTRIES, CacheBustingInterceptor, CardComponent, CarouselComponent, ChatMessagePosition, ChatMessageType, CheckboxFieldComponent, ConfigurationModel, ConfirmationDialogComponent, ConfirmationDialogService, CoreHostDirective, CoreManualRefreshComponent, CoreUiHttpLoaderFactory, CoreUiTranslateLoader, CoreUiTranslateService, CountryCode, CustomClassService, DEFAULT_COUNTRIES, DataListComponent, DataListItemComponent, DataStoreService, DateFieldComponent, DateUtility, DatetimeFieldComponent, DialogActions, DocumentAction, DocumentDisplayMode, DocumentFieldComponent, DocumentFieldValidators, DocumentPayloadMode, DropdownComponent, DropdownDirection, DropdownService, DynamicFieldDirective, DynamicFieldsHelper, FieldErrorsComponent, FieldType, FileFieldComponent, FileModel, FilePreviewActionType, FileTemplateModel, FileTemplateType, FileType, FileTypeModel, FileUploadService, FilterModalComponent, FilterService, FilterType, FixedActionPosition, FixedActionsMobileModalComponent, FixedActionsMobileModalService, GalleryAnimationType, GalleryLayoutType, GalleryModalComponent, GalleryModalGlobalService, GenericButtonComponent, GenericChatComponent, GenericChatService, GenericDocumentationComponent, GenericFixedActionsComponent, GenericGalleryComponent, GenericModalComponent, GenericPaginationComponent, GenericRatingComponent, GenericSidebarComponent, GenericSkeletonComponent, GenericStepsComponent, GenericSwitchComponent, GenericTableComponent, GenericTabsComponent, GenericTimelineComponent, GlobalApiConfigService, HeaderComponent, HeaderConfigurationService, HeaderElementType, HeaderService, HttpLoaderFactory, ImageModalComponent, ImageModalService, ImagePreviewComponent, LATIN_AMERICA_COUNTRIES, LayoutAuth, LayoutBreakpoint, LayoutComponent, LayoutService, LayoutStateService, LayoutType, LoaderComponent, LoaderService, MainNavComponent, MainNavService, ManualRefreshService, MobileHeaderComponent, MobileResolutionService, ModalMode, ModelApiService, MultiEntryFieldComponent, MultiEntryOutputFormat, NumberFieldComponent, NumberFieldConfigType, NumberFieldType, NumberRange, PERMISSION_ACTIONS_PROVIDER, PERMISSION_PROVIDER, PERMISSION_RESOURCES_PROVIDER, PaginationService, PasswordFieldComponent, PermissionEnumsService, PermissionModel, PermissionService, PermissionWrapperService, PermissionsActions, PermissionsCustomActions, PermissionsInterceptor, PermissionsResources, PhoneFieldComponent, ProgressBarComponent, ProgressBarSize, RatingService, RatingSize, RatingType, RedirectUrlService, ResetPasswordModel, RoleModel, SOUTH_AMERICA_COUNTRIES, SelectFieldComponent, ServerSelectFieldComponent, ServerSelectService, SidebarCustomModalComponent, SidebarCustomModalService, SidebarHeight, SidebarMobileModalService, SidebarMobileType, SidebarPosition, SidebarService, SidebarState, SidebarTemplateRegistryService, SidebarVisibility, SidebarWidth, SkeletonAnimation, SkeletonService, SkeletonSize, SkeletonType, SmartFieldComponent, SortDirection, SortMode, StepSize, StepStatus, StepType, StepsService, SwitchFieldComponent, TableAction, TableActionService, TableDataService, TableFixedActionsService, TableSortService, TextAreaFieldComponent, TextFieldComponent, TimeFieldComponent, TimeInterval, TimelineService, TimelineStatus, TimelineType, TranslationMergeService, UruguayanDocumentValidationHelper, UsersModel, VERSION, ageValidator, calculateAge, equalToValidator, generateRandomUruguayanDocument, getCountryCodeStrings, getLatestBirthDateForAge, getRandomCi, getUruguayanDocumentValidationDigit, getValidationDigit, isSameDate, isValidCountryCode, provideCoreUiTranslateLoader, providePermissionActions, providePermissionEnums, providePermissionResources, providePermissionService, providePermissionServiceFactory, provideTranslateLoader, random, transform, transformUruguayanDocument, uruguayanDocumentValidator, validate, validateAge, validateCi, validateUruguayanDocument, validationDigit };
+export { ALL_COUNTRY_CODES, ActiveFiltersComponent, AgeValidationHelper, AlertComponent, AlertContainerComponent, AlertService, AlertType, ApiConfigurationProvider, BaseFieldComponent, ButtonContext, ButtonSize, ButtonType, COMMON_COUNTRIES, CacheBustingInterceptor, CardComponent, CarouselComponent, ChatMessagePosition, ChatMessageType, CheckboxFieldComponent, ConfigurationModel, ConfirmationDialogComponent, ConfirmationDialogService, CoreHostDirective, CoreManualRefreshComponent, CoreUiHttpLoaderFactory, CoreUiTranslateLoader, CoreUiTranslateService, CountryCode, CustomClassService, DEFAULT_COUNTRIES, DataListComponent, DataListItemComponent, DataStoreService, DateFieldComponent, DateUtility, DatetimeFieldComponent, DialogActions, DocumentAction, DocumentDisplayMode, DocumentFieldComponent, DocumentFieldValidators, DocumentPayloadMode, DropdownComponent, DropdownDirection, DropdownService, DynamicFieldDirective, DynamicFieldsHelper, FieldErrorsComponent, FieldType, FileFieldComponent, FileModel, FilePreviewActionType, FileTemplateModel, FileTemplateType, FileType, FileTypeModel, FileUploadService, FilterModalComponent, FilterService, FilterType, FixedActionPosition, FixedActionsMobileModalComponent, FixedActionsMobileModalService, GalleryAnimationType, GalleryLayoutType, GalleryModalComponent, GalleryModalGlobalService, GenericButtonComponent, GenericChatComponent, GenericChatService, GenericDocumentationComponent, GenericFixedActionsComponent, GenericGalleryComponent, GenericModalComponent, GenericPaginationComponent, GenericRatingComponent, GenericSidebarComponent, GenericSkeletonComponent, GenericStepsComponent, GenericSwitchComponent, GenericTableComponent, GenericTabsComponent, GenericTimelineComponent, GlobalApiConfigService, HeaderComponent, HeaderConfigurationService, HeaderElementType, HeaderService, HttpLoaderFactory, ImageModalComponent, ImageModalService, ImagePreviewComponent, LATIN_AMERICA_COUNTRIES, LayoutAuth, LayoutBreakpoint, LayoutComponent, LayoutService, LayoutStateService, LayoutType, LoaderComponent, LoaderService, MODEL_REFERENCE_SORT_KEY, MainNavComponent, MainNavService, ManualRefreshService, MobileHeaderComponent, MobileResolutionService, ModalMode, ModelApiService, MultiEntryFieldComponent, MultiEntryOutputFormat, NumberFieldComponent, NumberFieldConfigType, NumberFieldType, NumberRange, PERMISSION_ACTIONS_PROVIDER, PERMISSION_PROVIDER, PERMISSION_RESOURCES_PROVIDER, PaginationService, PasswordFieldComponent, PermissionEnumsService, PermissionModel, PermissionService, PermissionWrapperService, PermissionsActions, PermissionsCustomActions, PermissionsInterceptor, PermissionsResources, PhoneFieldComponent, ProgressBarComponent, ProgressBarSize, RatingService, RatingSize, RatingType, RedirectUrlService, ResetPasswordModel, RoleModel, SOUTH_AMERICA_COUNTRIES, SelectFieldComponent, ServerSelectFieldComponent, ServerSelectService, SidebarCustomModalComponent, SidebarCustomModalService, SidebarHeight, SidebarMobileModalService, SidebarMobileType, SidebarPosition, SidebarService, SidebarState, SidebarTemplateRegistryService, SidebarVisibility, SidebarWidth, SkeletonAnimation, SkeletonService, SkeletonSize, SkeletonType, SmartFieldComponent, SortDirection, SortMode, StepSize, StepStatus, StepType, StepsService, SwitchFieldComponent, TableAction, TableActionService, TableDataService, TableFixedActionsService, TableSortService, TextAreaFieldComponent, TextFieldComponent, TimeFieldComponent, TimeInterval, TimelineService, TimelineStatus, TimelineType, TranslationMergeService, UruguayanDocumentValidationHelper, UsersModel, VERSION, ageValidator, calculateAge, equalToValidator, generateRandomUruguayanDocument, getCountryCodeStrings, getLatestBirthDateForAge, getRandomCi, getUruguayanDocumentValidationDigit, getValidationDigit, isSameDate, isValidCountryCode, provideCoreUiTranslateLoader, providePermissionActions, providePermissionEnums, providePermissionResources, providePermissionService, providePermissionServiceFactory, provideTranslateLoader, random, transform, transformUruguayanDocument, uruguayanDocumentValidator, validate, validateAge, validateCi, validateUruguayanDocument, validationDigit };
 //# sourceMappingURL=solcre-org-core-ui.mjs.map