@solcre-org/core-ui 2.11.25 → 2.11.27

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

@@ -309,6 +309,20 @@ class CheckboxFieldComponent extends BaseFieldComponent {
                 control.enable();
             }
         });
+        effect(() => {
+            const fieldCfg = this.field();
+            const formValue = this.formValue();
+            if ('dynamicValue' in fieldCfg && typeof fieldCfg.dynamicValue === 'function' && formValue) {
+                const newValue = fieldCfg.dynamicValue(formValue);
+                const currentValue = this.formControl().value;
+                if (newValue !== null && newValue !== undefined && newValue !== currentValue) {
+                    setTimeout(() => {
+                        this.formControl().setValue(newValue, { emitEvent: true });
+                        this.valueChange.emit(newValue);
+                    }, 0);
+                }
+            }
+        });
         effect(() => {
             if (this.formControl() && this.hasMultipleOptions()) {
                 const options = this.options();
@@ -496,6 +510,30 @@ class DateFieldComponent extends BaseFieldComponent {
                 control.enable();
             }
         });
+        effect(() => {
+            const fieldCfg = this.field();
+            const formValue = this.formValue();
+            if ('dynamicValue' in fieldCfg && typeof fieldCfg.dynamicValue === 'function' && formValue) {
+                const newValue = fieldCfg.dynamicValue(formValue);
+                const currentValue = this.formControl().value;
+                if (newValue !== null && newValue !== undefined && newValue !== currentValue) {
+                    setTimeout(() => {
+                        let formattedValue = newValue;
+                        if (newValue instanceof Date && !isNaN(newValue.getTime())) {
+                            formattedValue = newValue.toISOString().split('T')[0];
+                        }
+                        else if (typeof newValue === 'string') {
+                            const date = new Date(newValue);
+                            if (!isNaN(date.getTime())) {
+                                formattedValue = date.toISOString().split('T')[0];
+                            }
+                        }
+                        this.formControl().setValue(formattedValue, { emitEvent: true });
+                        this.valueChange.emit(formattedValue);
+                    }, 0);
+                }
+            }
+        });
     }
     initializeFormControl() {
         const modeConfig = this.field().modes?.[this.mode()];
@@ -610,7 +648,17 @@ class DatetimeFieldComponent {
     selectedDate = signal(null);
     selectedHour = signal(0);
     selectedMinute = signal(0);
+    hasHourValue = signal(false);
+    hasMinuteValue = signal(false);
     hours = Array.from({ length: 24 }, (_, i) => i);
+    isHourPlaceholderVisible = computed(() => {
+        const hasVal = this.hasHourValue();
+        return !hasVal;
+    });
+    isMinutePlaceholderVisible = computed(() => {
+        const hasVal = this.hasMinuteValue();
+        return !hasVal;
+    });
     hoursOptions = computed(() => {
         return this.hours.map(hour => ({
             value: hour,
@@ -677,6 +725,44 @@ class DatetimeFieldComponent {
                 this.selectedMinute.set(this.roundToNearestInterval(newDate).getMinutes());
             }
         });
+        // Update hasValue signals when selected values change
+        effect(() => {
+            const hour = this.selectedHour();
+            this.hasHourValue.set(hour !== null && hour !== undefined);
+        });
+        effect(() => {
+            const minute = this.selectedMinute();
+            this.hasMinuteValue.set(minute !== null && minute !== undefined);
+        });
+        effect(() => {
+            const fieldCfg = this.field();
+            const formValue = this.formValue();
+            if ('dynamicValue' in fieldCfg && typeof fieldCfg.dynamicValue === 'function' && formValue) {
+                const newValue = fieldCfg.dynamicValue(formValue);
+                const currentValue = this.value();
+                if (newValue !== null && newValue !== undefined && newValue !== currentValue) {
+                    setTimeout(() => {
+                        let dateValue = null;
+                        if (newValue instanceof Date && !isNaN(newValue.getTime())) {
+                            dateValue = new Date(newValue);
+                        }
+                        else if (typeof newValue === 'string' || typeof newValue === 'number') {
+                            const parsedDate = new Date(newValue);
+                            if (!isNaN(parsedDate.getTime())) {
+                                dateValue = parsedDate;
+                            }
+                        }
+                        if (dateValue) {
+                            this.selectedDate.set(dateValue);
+                            this.selectedHour.set(dateValue.getHours());
+                            const roundedMinute = this.roundToNearestInterval(dateValue).getMinutes();
+                            this.selectedMinute.set(roundedMinute);
+                        }
+                        this.valueChange.emit(newValue);
+                    }, 0);
+                }
+            }
+        });
     }
     ngOnInit() {
         this.initializeValues();
@@ -786,11 +872,11 @@ class DatetimeFieldComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DatetimeFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.6", type: DatetimeFieldComponent, isStandalone: true, selector: "core-datetime-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: true, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, rowData: { classPropertyName: "rowData", publicName: "rowData", isSignal: true, isRequired: false, transformFunction: null }, formValue: { classPropertyName: "formValue", publicName: "formValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", onBlurEvent: "onBlurEvent", onEnterEvent: "onEnterEvent" }, usesOnChanges: true, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "<div class=\"c-entry-item\" [class.c-entry-item--inline]=\"field().inline\">\n  <label class=\"c-entry-text\" *ngIf=\"field().label\" [for]=\"field().key.toString()\">{{ field().label | translate }}</label>\n  <div class=\"c-entry-datetime\">\n    <span class=\"c-entry-input\" [class.is-invalid]=\"hasError()\">\n      <input\n        type=\"date\"\n        [id]=\"field().key.toString()\"\n        [name]=\"field().key.toString()\"\n        [value]=\"formattedDate()\"\n        [disabled]=\"isDisabled()\"\n        (input)=\"onDateChange($event)\"\n        (blur)=\"onBlur()\"\n        (keydown.enter)=\"onEnter($any($event))\"\n      />\n      <button class=\"c-entry-input__addon icon-calendar-thin\" \n        tabindex=\"-1\"\n        type=\"button\"\n        (click)=\"onCalendarClick($event)\"></button>\n    </span>\n    <span class=\"c-entry-input c-entry-input--ng-select\" [class.is-invalid]=\"hasError()\">\n      <ng-select\n        [items]=\"hoursOptions()\"\n        bindValue=\"value\"\n        bindLabel=\"label\"\n        [ngModel]=\"selectedHour()\"\n        (ngModelChange)=\"onHourChange($event)\"\n        [disabled]=\"isDisabled()\"\n        [clearable]=\"false\"\n        [searchable]=\"false\"\n        (blur)=\"onBlur()\"\n        placeholder=\"HH\"\n      >\n        <ng-template ng-option-tmp let-item=\"item\">\n          {{ item.label }}\n        </ng-template>\n        <ng-template ng-label-tmp let-item=\"item\">\n          {{ item.label }}\n        </ng-template>\n      </ng-select>\n      <span class=\"c-entry-input__addon icon-select-arrow\"></span>\n    </span>\n    <span class=\"c-entry-datetime__separator\">:</span>\n    <span class=\"c-entry-input c-entry-input--ng-select\" [class.is-invalid]=\"hasError()\">\n      <ng-select\n        [items]=\"minutesOptions()\"\n        bindValue=\"value\"\n        bindLabel=\"label\"\n        [ngModel]=\"selectedMinute()\"\n        (ngModelChange)=\"onMinuteChange($event)\"\n        [disabled]=\"isDisabled()\"\n        [clearable]=\"false\"\n        [searchable]=\"false\"\n        (blur)=\"onBlur()\"\n        placeholder=\"MM\"\n      >\n        <ng-template ng-option-tmp let-item=\"item\">\n          {{ item.label }}\n        </ng-template>\n        <ng-template ng-label-tmp let-item=\"item\">\n          {{ item.label }}\n        </ng-template>\n      </ng-select>\n      <span class=\"c-entry-input__addon icon-select-arrow\"></span>\n    </span>\n  </div>\n  <core-field-errors [errors]=\"errors()\" />\n</div>\n\n\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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i5.NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "bindLabel", "bindValue", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "tabFocusOnClearButton", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick", "keyDownFn"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i5.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i5.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "component", type: FieldErrorsComponent, selector: "core-field-errors", inputs: ["errors"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.6", type: DatetimeFieldComponent, isStandalone: true, selector: "core-datetime-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: true, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, rowData: { classPropertyName: "rowData", publicName: "rowData", isSignal: true, isRequired: false, transformFunction: null }, formValue: { classPropertyName: "formValue", publicName: "formValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", onBlurEvent: "onBlurEvent", onEnterEvent: "onEnterEvent" }, usesOnChanges: true, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "<div class=\"c-entry-item\" [class.c-entry-item--inline]=\"field().inline\">\n  <label class=\"c-entry-text\" *ngIf=\"field().label\" [for]=\"field().key.toString()\">{{ field().label | translate }}</label>\n  <div class=\"c-entry-datetime\">\n    <span class=\"c-entry-input\" [class.is-invalid]=\"hasError()\">\n      <input\n        type=\"date\"\n        [id]=\"field().key.toString()\"\n        [name]=\"field().key.toString()\"\n        [value]=\"formattedDate()\"\n        [disabled]=\"isDisabled()\"\n        (input)=\"onDateChange($event)\"\n        (blur)=\"onBlur()\"\n        (keydown.enter)=\"onEnter($any($event))\"\n      />\n      <button class=\"c-entry-input__addon icon-calendar-thin\" \n        tabindex=\"-1\"\n        type=\"button\"\n        (click)=\"onCalendarClick($event)\"></button>\n    </span>\n    <span class=\"c-entry-input c-entry-input--ng-select\" [class.is-invalid]=\"hasError()\">\n      <ng-select\n        [items]=\"hoursOptions()\"\n        bindValue=\"value\"\n        bindLabel=\"label\"\n        [ngModel]=\"selectedHour()\"\n        (ngModelChange)=\"onHourChange($event)\"\n        [disabled]=\"isDisabled()\"\n        [clearable]=\"false\"\n        [searchable]=\"false\"\n        (blur)=\"onBlur()\"\n        [placeholder]=\"isHourPlaceholderVisible() ? 'HH' : ''\"\n      >\n        <ng-template ng-option-tmp let-item=\"item\">\n          {{ item.label }}\n        </ng-template>\n        <ng-template ng-label-tmp let-item=\"item\">\n          {{ item.label }}\n        </ng-template>\n      </ng-select>\n      <span class=\"c-entry-input__addon icon-select-arrow\"></span>\n    </span>\n    <span class=\"c-entry-datetime__separator\">:</span>\n    <span class=\"c-entry-input c-entry-input--ng-select\" [class.is-invalid]=\"hasError()\">\n      <ng-select\n        [items]=\"minutesOptions()\"\n        bindValue=\"value\"\n        bindLabel=\"label\"\n        [ngModel]=\"selectedMinute()\"\n        (ngModelChange)=\"onMinuteChange($event)\"\n        [disabled]=\"isDisabled()\"\n        [clearable]=\"false\"\n        [searchable]=\"false\"\n        (blur)=\"onBlur()\"\n        [placeholder]=\"isMinutePlaceholderVisible() ? 'MM' : ''\"\n      >\n        <ng-template ng-option-tmp let-item=\"item\">\n          {{ item.label }}\n        </ng-template>\n        <ng-template ng-label-tmp let-item=\"item\">\n          {{ item.label }}\n        </ng-template>\n      </ng-select>\n      <span class=\"c-entry-input__addon icon-select-arrow\"></span>\n    </span>\n  </div>\n  <core-field-errors [errors]=\"errors()\" />\n</div>\n\n\n", styles: [".ng-select .ng-select-container .ng-value-container{flex-wrap:wrap}.c-entry-input--ng-select.is-placeholder ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input input::placeholder{color:var(--_entry-input-placeholder-color);opacity:1}.c-entry-input--ng-select.is-placeholder ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input input{color:var(--_entry-input-placeholder-color)}.c-entry-input--ng-select:not(.is-placeholder) ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input input::placeholder{opacity:0}::ng-deep .ng-select{width:100%!important;display:contents}.c-entry-input--ng-select{position:relative}::ng-deep .ng-dropdown-panel{top:0;right:0}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-value{background-color:var(--form-highlighted-color, var(--color-neutral-300));color:#3f4e6a;border-radius:var(--_entry-input-br);padding:.2em .8em;margin:.2em;border:none;border-radius:4px}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-value .ng-value-icon{border:none;padding-right:.4em;color:#3f4e6a}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items{border:none;min-height:auto;padding:0;position:relative;right:0;margin-top:3em;box-shadow:1em 2.4em 3.4em -2em hsl(var(--color-neutral-900-hsl)/25%);background-color:var(--color-neutral-100)}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{padding:.6em .8em;color:#6a788c;cursor:pointer;transition:background-color .1s ease-out}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{color:var(--color-primary-400)}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{color:var(--color-primary-400);font-weight:500}::ng-deep .ng-dropdown-panel .scrollable-content{background:#f2f5fa}::ng-deep .ng-dropdown-panel-items.scroll-host{background:#f2f5fa;padding:1em;border-radius:var(--_entry-input-br)}::ng-deep app-server-select-field .ng-select:not(.ng-select-filtered):not(.ng-select-opened) .ng-dropdown-panel{opacity:0!important}::ng-deep .c-entry-input--ng-select{--_entry-input-padd-y: .76em}::ng-deep .c-entry-input--ng-select:has(.ng-value-container .ng-value){--_entry-input-padd-y: .35em}::ng-deep .c-entry-input--ng-select:has(.ng-value-container .ng-value) .ng-select .ng-select-container .ng-value-container .ng-input{margin-left:8px}::ng-deep .c-entry-input--ng-select:has(.ng-value-container .ng-value) .ng-select .ng-select-container .ng-value-container .ng-input>input{height:100%}::ng-deep .ng-dropdown-panel-items.scroll-host:has(.ng-select-notfound){background-color:hsl(from hsl(var(--color-context-error-hsl)) h s 94%);color:hsl(from hsl(var(--color-context-error-hsl)) h s 60%)}::ng-deep .ng-dropdown-panel-items.scroll-host:has(.ng-select-loading){background-color:hsl(from hsl(var(--color-alternative-800-hsl)) h s 96%);color:hsl(from hsl(var(--color-alternative-800-hsl)) h 90% 70%)}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container,.ng-select.ng-select-single .ng-select-container .ng-value-container{display:grid}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{height:-webkit-fill-available}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input>input{height:98%}::ng-deep .ng-select.ng-select-single .ng-select-container{overflow:visible;position:relative;cursor:pointer}::ng-deep .ng-select.ng-select-single .ng-select-container:before{content:\"\";position:absolute;left:calc(var(--_entry-input-padd-x) * -1);right:calc(var(--_entry-input-padd-x) * -1 - var(--_entry-input-addon-gap) - var(--_entry-input-addon-icon-fz));top:calc(max(var(--_entry-input-padd-y) * var(--_size-factor, 1),2px)*-1);bottom:calc(max(var(--_entry-input-padd-y) * var(--_size-factor, 1),2px)*-1)}::ng-deep .ng-select .ng-clear-wrapper .ng-clear{position:absolute;top:50%;transform:translateY(-50%)}@media (hover: hover){::ng-deep .ng-select .ng-clear-wrapper:is(:hover,:focus-visible){color:var(--color-hover)}}\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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i5.NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "bindLabel", "bindValue", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "tabFocusOnClearButton", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick", "keyDownFn"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i5.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i5.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "component", type: FieldErrorsComponent, selector: "core-field-errors", inputs: ["errors"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DatetimeFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'core-datetime-field', standalone: true, imports: [CommonModule, FormsModule, TranslateModule, ReactiveFormsModule, NgSelectModule, FieldErrorsComponent], hostDirectives: [CoreHostDirective], template: "<div class=\"c-entry-item\" [class.c-entry-item--inline]=\"field().inline\">\n  <label class=\"c-entry-text\" *ngIf=\"field().label\" [for]=\"field().key.toString()\">{{ field().label | translate }}</label>\n  <div class=\"c-entry-datetime\">\n    <span class=\"c-entry-input\" [class.is-invalid]=\"hasError()\">\n      <input\n        type=\"date\"\n        [id]=\"field().key.toString()\"\n        [name]=\"field().key.toString()\"\n        [value]=\"formattedDate()\"\n        [disabled]=\"isDisabled()\"\n        (input)=\"onDateChange($event)\"\n        (blur)=\"onBlur()\"\n        (keydown.enter)=\"onEnter($any($event))\"\n      />\n      <button class=\"c-entry-input__addon icon-calendar-thin\" \n        tabindex=\"-1\"\n        type=\"button\"\n        (click)=\"onCalendarClick($event)\"></button>\n    </span>\n    <span class=\"c-entry-input c-entry-input--ng-select\" [class.is-invalid]=\"hasError()\">\n      <ng-select\n        [items]=\"hoursOptions()\"\n        bindValue=\"value\"\n        bindLabel=\"label\"\n        [ngModel]=\"selectedHour()\"\n        (ngModelChange)=\"onHourChange($event)\"\n        [disabled]=\"isDisabled()\"\n        [clearable]=\"false\"\n        [searchable]=\"false\"\n        (blur)=\"onBlur()\"\n        placeholder=\"HH\"\n      >\n        <ng-template ng-option-tmp let-item=\"item\">\n          {{ item.label }}\n        </ng-template>\n        <ng-template ng-label-tmp let-item=\"item\">\n          {{ item.label }}\n        </ng-template>\n      </ng-select>\n      <span class=\"c-entry-input__addon icon-select-arrow\"></span>\n    </span>\n    <span class=\"c-entry-datetime__separator\">:</span>\n    <span class=\"c-entry-input c-entry-input--ng-select\" [class.is-invalid]=\"hasError()\">\n      <ng-select\n        [items]=\"minutesOptions()\"\n        bindValue=\"value\"\n        bindLabel=\"label\"\n        [ngModel]=\"selectedMinute()\"\n        (ngModelChange)=\"onMinuteChange($event)\"\n        [disabled]=\"isDisabled()\"\n        [clearable]=\"false\"\n        [searchable]=\"false\"\n        (blur)=\"onBlur()\"\n        placeholder=\"MM\"\n      >\n        <ng-template ng-option-tmp let-item=\"item\">\n          {{ item.label }}\n        </ng-template>\n        <ng-template ng-label-tmp let-item=\"item\">\n          {{ item.label }}\n        </ng-template>\n      </ng-select>\n      <span class=\"c-entry-input__addon icon-select-arrow\"></span>\n    </span>\n  </div>\n  <core-field-errors [errors]=\"errors()\" />\n</div>\n\n\n" }]
+            args: [{ selector: 'core-datetime-field', standalone: true, imports: [CommonModule, FormsModule, TranslateModule, ReactiveFormsModule, NgSelectModule, FieldErrorsComponent], hostDirectives: [CoreHostDirective], template: "<div class=\"c-entry-item\" [class.c-entry-item--inline]=\"field().inline\">\n  <label class=\"c-entry-text\" *ngIf=\"field().label\" [for]=\"field().key.toString()\">{{ field().label | translate }}</label>\n  <div class=\"c-entry-datetime\">\n    <span class=\"c-entry-input\" [class.is-invalid]=\"hasError()\">\n      <input\n        type=\"date\"\n        [id]=\"field().key.toString()\"\n        [name]=\"field().key.toString()\"\n        [value]=\"formattedDate()\"\n        [disabled]=\"isDisabled()\"\n        (input)=\"onDateChange($event)\"\n        (blur)=\"onBlur()\"\n        (keydown.enter)=\"onEnter($any($event))\"\n      />\n      <button class=\"c-entry-input__addon icon-calendar-thin\" \n        tabindex=\"-1\"\n        type=\"button\"\n        (click)=\"onCalendarClick($event)\"></button>\n    </span>\n    <span class=\"c-entry-input c-entry-input--ng-select\" [class.is-invalid]=\"hasError()\">\n      <ng-select\n        [items]=\"hoursOptions()\"\n        bindValue=\"value\"\n        bindLabel=\"label\"\n        [ngModel]=\"selectedHour()\"\n        (ngModelChange)=\"onHourChange($event)\"\n        [disabled]=\"isDisabled()\"\n        [clearable]=\"false\"\n        [searchable]=\"false\"\n        (blur)=\"onBlur()\"\n        [placeholder]=\"isHourPlaceholderVisible() ? 'HH' : ''\"\n      >\n        <ng-template ng-option-tmp let-item=\"item\">\n          {{ item.label }}\n        </ng-template>\n        <ng-template ng-label-tmp let-item=\"item\">\n          {{ item.label }}\n        </ng-template>\n      </ng-select>\n      <span class=\"c-entry-input__addon icon-select-arrow\"></span>\n    </span>\n    <span class=\"c-entry-datetime__separator\">:</span>\n    <span class=\"c-entry-input c-entry-input--ng-select\" [class.is-invalid]=\"hasError()\">\n      <ng-select\n        [items]=\"minutesOptions()\"\n        bindValue=\"value\"\n        bindLabel=\"label\"\n        [ngModel]=\"selectedMinute()\"\n        (ngModelChange)=\"onMinuteChange($event)\"\n        [disabled]=\"isDisabled()\"\n        [clearable]=\"false\"\n        [searchable]=\"false\"\n        (blur)=\"onBlur()\"\n        [placeholder]=\"isMinutePlaceholderVisible() ? 'MM' : ''\"\n      >\n        <ng-template ng-option-tmp let-item=\"item\">\n          {{ item.label }}\n        </ng-template>\n        <ng-template ng-label-tmp let-item=\"item\">\n          {{ item.label }}\n        </ng-template>\n      </ng-select>\n      <span class=\"c-entry-input__addon icon-select-arrow\"></span>\n    </span>\n  </div>\n  <core-field-errors [errors]=\"errors()\" />\n</div>\n\n\n", styles: [".ng-select .ng-select-container .ng-value-container{flex-wrap:wrap}.c-entry-input--ng-select.is-placeholder ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input input::placeholder{color:var(--_entry-input-placeholder-color);opacity:1}.c-entry-input--ng-select.is-placeholder ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input input{color:var(--_entry-input-placeholder-color)}.c-entry-input--ng-select:not(.is-placeholder) ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input input::placeholder{opacity:0}::ng-deep .ng-select{width:100%!important;display:contents}.c-entry-input--ng-select{position:relative}::ng-deep .ng-dropdown-panel{top:0;right:0}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-value{background-color:var(--form-highlighted-color, var(--color-neutral-300));color:#3f4e6a;border-radius:var(--_entry-input-br);padding:.2em .8em;margin:.2em;border:none;border-radius:4px}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-value .ng-value-icon{border:none;padding-right:.4em;color:#3f4e6a}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items{border:none;min-height:auto;padding:0;position:relative;right:0;margin-top:3em;box-shadow:1em 2.4em 3.4em -2em hsl(var(--color-neutral-900-hsl)/25%);background-color:var(--color-neutral-100)}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{padding:.6em .8em;color:#6a788c;cursor:pointer;transition:background-color .1s ease-out}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{color:var(--color-primary-400)}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{color:var(--color-primary-400);font-weight:500}::ng-deep .ng-dropdown-panel .scrollable-content{background:#f2f5fa}::ng-deep .ng-dropdown-panel-items.scroll-host{background:#f2f5fa;padding:1em;border-radius:var(--_entry-input-br)}::ng-deep app-server-select-field .ng-select:not(.ng-select-filtered):not(.ng-select-opened) .ng-dropdown-panel{opacity:0!important}::ng-deep .c-entry-input--ng-select{--_entry-input-padd-y: .76em}::ng-deep .c-entry-input--ng-select:has(.ng-value-container .ng-value){--_entry-input-padd-y: .35em}::ng-deep .c-entry-input--ng-select:has(.ng-value-container .ng-value) .ng-select .ng-select-container .ng-value-container .ng-input{margin-left:8px}::ng-deep .c-entry-input--ng-select:has(.ng-value-container .ng-value) .ng-select .ng-select-container .ng-value-container .ng-input>input{height:100%}::ng-deep .ng-dropdown-panel-items.scroll-host:has(.ng-select-notfound){background-color:hsl(from hsl(var(--color-context-error-hsl)) h s 94%);color:hsl(from hsl(var(--color-context-error-hsl)) h s 60%)}::ng-deep .ng-dropdown-panel-items.scroll-host:has(.ng-select-loading){background-color:hsl(from hsl(var(--color-alternative-800-hsl)) h s 96%);color:hsl(from hsl(var(--color-alternative-800-hsl)) h 90% 70%)}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container,.ng-select.ng-select-single .ng-select-container .ng-value-container{display:grid}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{height:-webkit-fill-available}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input>input{height:98%}::ng-deep .ng-select.ng-select-single .ng-select-container{overflow:visible;position:relative;cursor:pointer}::ng-deep .ng-select.ng-select-single .ng-select-container:before{content:\"\";position:absolute;left:calc(var(--_entry-input-padd-x) * -1);right:calc(var(--_entry-input-padd-x) * -1 - var(--_entry-input-addon-gap) - var(--_entry-input-addon-icon-fz));top:calc(max(var(--_entry-input-padd-y) * var(--_size-factor, 1),2px)*-1);bottom:calc(max(var(--_entry-input-padd-y) * var(--_size-factor, 1),2px)*-1)}::ng-deep .ng-select .ng-clear-wrapper .ng-clear{position:absolute;top:50%;transform:translateY(-50%)}@media (hover: hover){::ng-deep .ng-select .ng-clear-wrapper:is(:hover,:focus-visible){color:var(--color-hover)}}\n"] }]
         }], ctorParameters: () => [] });
 
 // icon-compat.pipe.ts
@@ -1154,6 +1240,20 @@ class NumberFieldComponent extends BaseFieldComponent {
                 control.enable();
             }
         });
+        effect(() => {
+            const fieldCfg = this.field();
+            const formValue = this.formValue();
+            if ('dynamicValue' in fieldCfg && typeof fieldCfg.dynamicValue === 'function' && formValue) {
+                const newValue = fieldCfg.dynamicValue(formValue);
+                const currentValue = this.formControl().value;
+                if (newValue !== null && newValue !== undefined && newValue !== currentValue) {
+                    setTimeout(() => {
+                        this.formControl().setValue(newValue, { emitEvent: true });
+                        this.valueChange.emit(newValue);
+                    }, 0);
+                }
+            }
+        });
     }
     ngOnDestroy() {
         this.stopHold();
@@ -1274,6 +1374,20 @@ class PasswordFieldComponent extends BaseFieldComponent {
                 control.enable();
             }
         });
+        effect(() => {
+            const fieldCfg = this.field();
+            const formValue = this.formValue();
+            if ('dynamicValue' in fieldCfg && typeof fieldCfg.dynamicValue === 'function' && formValue) {
+                const newValue = fieldCfg.dynamicValue(formValue);
+                const currentValue = this.formControl().value;
+                if (newValue !== null && newValue !== undefined && newValue !== currentValue) {
+                    setTimeout(() => {
+                        this.formControl().setValue(newValue, { emitEvent: true });
+                        this.valueChange.emit(newValue);
+                    }, 0);
+                }
+            }
+        });
     }
     inputType() {
         return this.showPassword() ? 'text' : 'password';
@@ -1486,11 +1600,11 @@ class SelectFieldComponent extends BaseFieldComponent {
         this.hasValue.set(false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SelectFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.6", type: SelectFieldComponent, isStandalone: true, selector: "core-select-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, viewQueries: [{ propertyName: "ngSelect", first: true, predicate: NgSelectComponent, descendants: true }], usesInheritance: true, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "<!-- Todo: Ng select + c-entry-select -->\n  \n<div class=\"c-entry-item\" [class.c-entry-item--inline]=\"field().inline\">\n  <span class=\"c-entry-text\" *ngIf=\"field().label\">{{ field().label | translate }}</span>\n \n  <div class=\"c-entry-input c-entry-input--ng-select c-entry-input--ng-select-alt\"\n      [class.is-placeholder]=\"isPlaceholderVisible()\"\n      [class.is-invalid]=\"hasError()\">\n      <ng-select\n        [items]=\"field().options ?? []\"\n        bindValue=\"value\"\n        bindLabel=\"label\"\n        [multiple]=\"field().multiple\"\n        [formControl]=\"formControl()\"\n        [compareWith]=\"compareWith\"\n        [class.has-error]=\"hasError()\"\n        [readonly]=\"field().readonly\"\n        [clearable]=\"true\"\n        [searchable]=\"isSearchable()\"\n        (blur)=\"onBlurInput()\"\n        (change)=\"onSelectChange($event)\"\n        (clear)=\"onSelectClear()\"\n        [placeholder]=\"isPlaceholderVisible() ? ((field().placeholder ?? '') | translate) : ''\"\n      >\n        <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\">\n          {{ item.label | translate }}\n        </ng-template>\n        <ng-template ng-label-tmp let-item=\"item\">\n            <!-- Estilos que aparecen en la etiqueta del item seleccionado -->\n            {{ item.label | translate }}\n        </ng-template>\n        <ng-template ng-notfound-tmp>\n          <span class=\"ng-select-notfound\">{{ 'modal.field.serverSelect.noResults' | translate }}</span>\n        </ng-template>\n      </ng-select>\n    <span class=\"c-entry-input__addon icon-select-arrow\"></span>\n  </div>\n  <core-field-errors [errors]=\"errors()\" />\n</div>", styles: [".ng-select .ng-select-container .ng-value-container{flex-wrap:wrap}.c-entry-input--ng-select.is-placeholder ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input input::placeholder{color:var(--_entry-input-placeholder-color);opacity:1}.c-entry-input--ng-select.is-placeholder ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input input{color:var(--_entry-input-placeholder-color)}.c-entry-input--ng-select:not(.is-placeholder) ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input input::placeholder{opacity:0}::ng-deep .ng-select{width:100%!important;display:contents}.c-entry-input--ng-select{position:relative;overflow:auto}::ng-deep .ng-dropdown-panel{top:0;right:0}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-value{background-color:var(--form-highlighted-color, var(--color-neutral-300));color:#3f4e6a;border-radius:var(--_entry-input-br);padding:.2em .8em;margin:.2em;border:none;border-radius:4px}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-value .ng-value-icon{border:none;padding-right:.4em;color:#3f4e6a}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items{border:none;min-height:auto;padding:0;position:relative;right:0;margin-top:3em;box-shadow:1em 2.4em 3.4em -2em hsl(var(--color-neutral-900-hsl)/25%);background-color:var(--color-neutral-100)}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{padding:.6em .8em;color:#6a788c;cursor:pointer;transition:background-color .1s ease-out}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{color:var(--color-primary-400)}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{color:var(--color-primary-400);font-weight:500}::ng-deep .ng-dropdown-panel .scrollable-content{background:#f2f5fa}::ng-deep .ng-dropdown-panel-items.scroll-host{background:#f2f5fa;padding:1em;border-radius:var(--_entry-input-br)}::ng-deep app-server-select-field .ng-select:not(.ng-select-filtered):not(.ng-select-opened) .ng-dropdown-panel{opacity:0!important}::ng-deep .c-entry-input--ng-select{--_entry-input-padd-y: .76em}::ng-deep .c-entry-input--ng-select:has(.ng-value-container .ng-value){--_entry-input-padd-y: .35em}::ng-deep .c-entry-input--ng-select:has(.ng-value-container .ng-value) .ng-select .ng-select-container .ng-value-container .ng-input{margin-left:8px}::ng-deep .c-entry-input--ng-select:has(.ng-value-container .ng-value) .ng-select .ng-select-container .ng-value-container .ng-input>input{height:100%}::ng-deep .ng-dropdown-panel-items.scroll-host:has(.ng-select-notfound){background-color:hsl(from hsl(var(--color-context-error-hsl)) h s 94%);color:hsl(from hsl(var(--color-context-error-hsl)) h s 60%)}::ng-deep .ng-dropdown-panel-items.scroll-host:has(.ng-select-loading){background-color:hsl(from hsl(var(--color-alternative-800-hsl)) h s 96%);color:hsl(from hsl(var(--color-alternative-800-hsl)) h 90% 70%)}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container,.ng-select.ng-select-single .ng-select-container .ng-value-container{display:grid}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{height:-webkit-fill-available}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input>input{height:98%}::ng-deep .ng-select.ng-select-single .ng-select-container{overflow:visible;position:relative;cursor:pointer}::ng-deep .ng-select.ng-select-single .ng-select-container:before{content:\"\";position:absolute;left:calc(var(--_entry-input-padd-x) * -1);right:calc(var(--_entry-input-padd-x) * -1 - var(--_entry-input-addon-gap) - var(--_entry-input-addon-icon-fz));top:calc(max(var(--_entry-input-padd-y) * var(--_size-factor, 1),2px)*-1);bottom:calc(max(var(--_entry-input-padd-y) * var(--_size-factor, 1),2px)*-1)}::ng-deep .ng-select .ng-clear-wrapper .ng-clear{position:absolute;top:50%;transform:translateY(-50%)}@media (hover: hover){::ng-deep .ng-select .ng-clear-wrapper:is(:hover,:focus-visible){color:var(--color-hover)}}\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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i5.NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "bindLabel", "bindValue", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "tabFocusOnClearButton", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick", "keyDownFn"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i5.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i5.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i5.NgNotFoundTemplateDirective, selector: "[ng-notfound-tmp]" }, { kind: "component", type: FieldErrorsComponent, selector: "core-field-errors", inputs: ["errors"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.6", type: SelectFieldComponent, isStandalone: true, selector: "core-select-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, viewQueries: [{ propertyName: "ngSelect", first: true, predicate: NgSelectComponent, descendants: true }], usesInheritance: true, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "<!-- Todo: Ng select + c-entry-select -->\n  \n<div class=\"c-entry-item\" [class.c-entry-item--inline]=\"field().inline\">\n  <span class=\"c-entry-text\" *ngIf=\"field().label\">{{ field().label | translate }}</span>\n \n  <div class=\"c-entry-input c-entry-input--ng-select c-entry-input--ng-select-alt\"\n      [class.is-placeholder]=\"isPlaceholderVisible()\"\n      [class.is-invalid]=\"hasError()\">\n      <ng-select\n        [items]=\"field().options ?? []\"\n        bindValue=\"value\"\n        bindLabel=\"label\"\n        [multiple]=\"field().multiple\"\n        [formControl]=\"formControl()\"\n        [compareWith]=\"compareWith\"\n        [class.has-error]=\"hasError()\"\n        [readonly]=\"field().readonly\"\n        [clearable]=\"true\"\n        [searchable]=\"isSearchable()\"\n        (blur)=\"onBlurInput()\"\n        (change)=\"onSelectChange($event)\"\n        (clear)=\"onSelectClear()\"\n        [placeholder]=\"isPlaceholderVisible() ? ((field().placeholder ?? '') | translate) : ''\"\n      >\n        <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\">\n          {{ item.label | translate }}\n        </ng-template>\n        <ng-template ng-label-tmp let-item=\"item\">\n            <!-- Estilos que aparecen en la etiqueta del item seleccionado -->\n            {{ item.label | translate }}\n        </ng-template>\n        <ng-template ng-notfound-tmp>\n          <span class=\"ng-select-notfound\">{{ 'modal.field.serverSelect.noResults' | translate }}</span>\n        </ng-template>\n      </ng-select>\n    <span class=\"c-entry-input__addon icon-select-arrow\"></span>\n  </div>\n  <core-field-errors [errors]=\"errors()\" />\n</div>", styles: [".ng-select .ng-select-container .ng-value-container{flex-wrap:wrap}.c-entry-input--ng-select.is-placeholder ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input input::placeholder{color:var(--_entry-input-placeholder-color);opacity:1}.c-entry-input--ng-select.is-placeholder ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input input{color:var(--_entry-input-placeholder-color)}.c-entry-input--ng-select:not(.is-placeholder) ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input input::placeholder{opacity:0}::ng-deep .ng-select{width:100%!important;display:contents}.c-entry-input--ng-select{position:relative}::ng-deep .ng-dropdown-panel{top:0;right:0}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-value{background-color:var(--form-highlighted-color, var(--color-neutral-300));color:#3f4e6a;border-radius:var(--_entry-input-br);padding:.2em .8em;margin:.2em;border:none;border-radius:4px}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-value .ng-value-icon{border:none;padding-right:.4em;color:#3f4e6a}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items{border:none;min-height:auto;padding:0;position:relative;right:0;margin-top:3em;box-shadow:1em 2.4em 3.4em -2em hsl(var(--color-neutral-900-hsl)/25%);background-color:var(--color-neutral-100)}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{padding:.6em .8em;color:#6a788c;cursor:pointer;transition:background-color .1s ease-out}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{color:var(--color-primary-400)}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{color:var(--color-primary-400);font-weight:500}::ng-deep .ng-dropdown-panel .scrollable-content{background:#f2f5fa}::ng-deep .ng-dropdown-panel-items.scroll-host{background:#f2f5fa;padding:1em;border-radius:var(--_entry-input-br)}::ng-deep app-server-select-field .ng-select:not(.ng-select-filtered):not(.ng-select-opened) .ng-dropdown-panel{opacity:0!important}::ng-deep .c-entry-input--ng-select{--_entry-input-padd-y: .76em}::ng-deep .c-entry-input--ng-select:has(.ng-value-container .ng-value){--_entry-input-padd-y: .35em}::ng-deep .c-entry-input--ng-select:has(.ng-value-container .ng-value) .ng-select .ng-select-container .ng-value-container .ng-input{margin-left:8px}::ng-deep .c-entry-input--ng-select:has(.ng-value-container .ng-value) .ng-select .ng-select-container .ng-value-container .ng-input>input{height:100%}::ng-deep .ng-dropdown-panel-items.scroll-host:has(.ng-select-notfound){background-color:hsl(from hsl(var(--color-context-error-hsl)) h s 94%);color:hsl(from hsl(var(--color-context-error-hsl)) h s 60%)}::ng-deep .ng-dropdown-panel-items.scroll-host:has(.ng-select-loading){background-color:hsl(from hsl(var(--color-alternative-800-hsl)) h s 96%);color:hsl(from hsl(var(--color-alternative-800-hsl)) h 90% 70%)}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container,.ng-select.ng-select-single .ng-select-container .ng-value-container{display:grid}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{height:-webkit-fill-available}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input>input{height:98%}::ng-deep .ng-select.ng-select-single .ng-select-container{overflow:visible;position:relative;cursor:pointer}::ng-deep .ng-select.ng-select-single .ng-select-container:before{content:\"\";position:absolute;left:calc(var(--_entry-input-padd-x) * -1);right:calc(var(--_entry-input-padd-x) * -1 - var(--_entry-input-addon-gap) - var(--_entry-input-addon-icon-fz));top:calc(max(var(--_entry-input-padd-y) * var(--_size-factor, 1),2px)*-1);bottom:calc(max(var(--_entry-input-padd-y) * var(--_size-factor, 1),2px)*-1)}::ng-deep .ng-select .ng-clear-wrapper .ng-clear{position:absolute;top:50%;transform:translateY(-50%)}@media (hover: hover){::ng-deep .ng-select .ng-clear-wrapper:is(:hover,:focus-visible){color:var(--color-hover)}}\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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i5.NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "bindLabel", "bindValue", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "tabFocusOnClearButton", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick", "keyDownFn"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i5.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i5.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i5.NgNotFoundTemplateDirective, selector: "[ng-notfound-tmp]" }, { kind: "component", type: FieldErrorsComponent, selector: "core-field-errors", inputs: ["errors"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SelectFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'core-select-field', standalone: true, imports: [CommonModule, FormsModule, TranslateModule, ReactiveFormsModule, NgSelectModule, FieldErrorsComponent], hostDirectives: [CoreHostDirective], template: "<!-- Todo: Ng select + c-entry-select -->\n  \n<div class=\"c-entry-item\" [class.c-entry-item--inline]=\"field().inline\">\n  <span class=\"c-entry-text\" *ngIf=\"field().label\">{{ field().label | translate }}</span>\n \n  <div class=\"c-entry-input c-entry-input--ng-select c-entry-input--ng-select-alt\"\n      [class.is-placeholder]=\"isPlaceholderVisible()\"\n      [class.is-invalid]=\"hasError()\">\n      <ng-select\n        [items]=\"field().options ?? []\"\n        bindValue=\"value\"\n        bindLabel=\"label\"\n        [multiple]=\"field().multiple\"\n        [formControl]=\"formControl()\"\n        [compareWith]=\"compareWith\"\n        [class.has-error]=\"hasError()\"\n        [readonly]=\"field().readonly\"\n        [clearable]=\"true\"\n        [searchable]=\"isSearchable()\"\n        (blur)=\"onBlurInput()\"\n        (change)=\"onSelectChange($event)\"\n        (clear)=\"onSelectClear()\"\n        [placeholder]=\"isPlaceholderVisible() ? ((field().placeholder ?? '') | translate) : ''\"\n      >\n        <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\">\n          {{ item.label | translate }}\n        </ng-template>\n        <ng-template ng-label-tmp let-item=\"item\">\n            <!-- Estilos que aparecen en la etiqueta del item seleccionado -->\n            {{ item.label | translate }}\n        </ng-template>\n        <ng-template ng-notfound-tmp>\n          <span class=\"ng-select-notfound\">{{ 'modal.field.serverSelect.noResults' | translate }}</span>\n        </ng-template>\n      </ng-select>\n    <span class=\"c-entry-input__addon icon-select-arrow\"></span>\n  </div>\n  <core-field-errors [errors]=\"errors()\" />\n</div>", styles: [".ng-select .ng-select-container .ng-value-container{flex-wrap:wrap}.c-entry-input--ng-select.is-placeholder ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input input::placeholder{color:var(--_entry-input-placeholder-color);opacity:1}.c-entry-input--ng-select.is-placeholder ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input input{color:var(--_entry-input-placeholder-color)}.c-entry-input--ng-select:not(.is-placeholder) ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input input::placeholder{opacity:0}::ng-deep .ng-select{width:100%!important;display:contents}.c-entry-input--ng-select{position:relative;overflow:auto}::ng-deep .ng-dropdown-panel{top:0;right:0}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-value{background-color:var(--form-highlighted-color, var(--color-neutral-300));color:#3f4e6a;border-radius:var(--_entry-input-br);padding:.2em .8em;margin:.2em;border:none;border-radius:4px}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-value .ng-value-icon{border:none;padding-right:.4em;color:#3f4e6a}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items{border:none;min-height:auto;padding:0;position:relative;right:0;margin-top:3em;box-shadow:1em 2.4em 3.4em -2em hsl(var(--color-neutral-900-hsl)/25%);background-color:var(--color-neutral-100)}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{padding:.6em .8em;color:#6a788c;cursor:pointer;transition:background-color .1s ease-out}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{color:var(--color-primary-400)}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{color:var(--color-primary-400);font-weight:500}::ng-deep .ng-dropdown-panel .scrollable-content{background:#f2f5fa}::ng-deep .ng-dropdown-panel-items.scroll-host{background:#f2f5fa;padding:1em;border-radius:var(--_entry-input-br)}::ng-deep app-server-select-field .ng-select:not(.ng-select-filtered):not(.ng-select-opened) .ng-dropdown-panel{opacity:0!important}::ng-deep .c-entry-input--ng-select{--_entry-input-padd-y: .76em}::ng-deep .c-entry-input--ng-select:has(.ng-value-container .ng-value){--_entry-input-padd-y: .35em}::ng-deep .c-entry-input--ng-select:has(.ng-value-container .ng-value) .ng-select .ng-select-container .ng-value-container .ng-input{margin-left:8px}::ng-deep .c-entry-input--ng-select:has(.ng-value-container .ng-value) .ng-select .ng-select-container .ng-value-container .ng-input>input{height:100%}::ng-deep .ng-dropdown-panel-items.scroll-host:has(.ng-select-notfound){background-color:hsl(from hsl(var(--color-context-error-hsl)) h s 94%);color:hsl(from hsl(var(--color-context-error-hsl)) h s 60%)}::ng-deep .ng-dropdown-panel-items.scroll-host:has(.ng-select-loading){background-color:hsl(from hsl(var(--color-alternative-800-hsl)) h s 96%);color:hsl(from hsl(var(--color-alternative-800-hsl)) h 90% 70%)}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container,.ng-select.ng-select-single .ng-select-container .ng-value-container{display:grid}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{height:-webkit-fill-available}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input>input{height:98%}::ng-deep .ng-select.ng-select-single .ng-select-container{overflow:visible;position:relative;cursor:pointer}::ng-deep .ng-select.ng-select-single .ng-select-container:before{content:\"\";position:absolute;left:calc(var(--_entry-input-padd-x) * -1);right:calc(var(--_entry-input-padd-x) * -1 - var(--_entry-input-addon-gap) - var(--_entry-input-addon-icon-fz));top:calc(max(var(--_entry-input-padd-y) * var(--_size-factor, 1),2px)*-1);bottom:calc(max(var(--_entry-input-padd-y) * var(--_size-factor, 1),2px)*-1)}::ng-deep .ng-select .ng-clear-wrapper .ng-clear{position:absolute;top:50%;transform:translateY(-50%)}@media (hover: hover){::ng-deep .ng-select .ng-clear-wrapper:is(:hover,:focus-visible){color:var(--color-hover)}}\n"] }]
+            args: [{ selector: 'core-select-field', standalone: true, imports: [CommonModule, FormsModule, TranslateModule, ReactiveFormsModule, NgSelectModule, FieldErrorsComponent], hostDirectives: [CoreHostDirective], template: "<!-- Todo: Ng select + c-entry-select -->\n  \n<div class=\"c-entry-item\" [class.c-entry-item--inline]=\"field().inline\">\n  <span class=\"c-entry-text\" *ngIf=\"field().label\">{{ field().label | translate }}</span>\n \n  <div class=\"c-entry-input c-entry-input--ng-select c-entry-input--ng-select-alt\"\n      [class.is-placeholder]=\"isPlaceholderVisible()\"\n      [class.is-invalid]=\"hasError()\">\n      <ng-select\n        [items]=\"field().options ?? []\"\n        bindValue=\"value\"\n        bindLabel=\"label\"\n        [multiple]=\"field().multiple\"\n        [formControl]=\"formControl()\"\n        [compareWith]=\"compareWith\"\n        [class.has-error]=\"hasError()\"\n        [readonly]=\"field().readonly\"\n        [clearable]=\"true\"\n        [searchable]=\"isSearchable()\"\n        (blur)=\"onBlurInput()\"\n        (change)=\"onSelectChange($event)\"\n        (clear)=\"onSelectClear()\"\n        [placeholder]=\"isPlaceholderVisible() ? ((field().placeholder ?? '') | translate) : ''\"\n      >\n        <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\">\n          {{ item.label | translate }}\n        </ng-template>\n        <ng-template ng-label-tmp let-item=\"item\">\n            <!-- Estilos que aparecen en la etiqueta del item seleccionado -->\n            {{ item.label | translate }}\n        </ng-template>\n        <ng-template ng-notfound-tmp>\n          <span class=\"ng-select-notfound\">{{ 'modal.field.serverSelect.noResults' | translate }}</span>\n        </ng-template>\n      </ng-select>\n    <span class=\"c-entry-input__addon icon-select-arrow\"></span>\n  </div>\n  <core-field-errors [errors]=\"errors()\" />\n</div>", styles: [".ng-select .ng-select-container .ng-value-container{flex-wrap:wrap}.c-entry-input--ng-select.is-placeholder ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input input::placeholder{color:var(--_entry-input-placeholder-color);opacity:1}.c-entry-input--ng-select.is-placeholder ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input input{color:var(--_entry-input-placeholder-color)}.c-entry-input--ng-select:not(.is-placeholder) ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input input::placeholder{opacity:0}::ng-deep .ng-select{width:100%!important;display:contents}.c-entry-input--ng-select{position:relative}::ng-deep .ng-dropdown-panel{top:0;right:0}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-value{background-color:var(--form-highlighted-color, var(--color-neutral-300));color:#3f4e6a;border-radius:var(--_entry-input-br);padding:.2em .8em;margin:.2em;border:none;border-radius:4px}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-value .ng-value-icon{border:none;padding-right:.4em;color:#3f4e6a}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items{border:none;min-height:auto;padding:0;position:relative;right:0;margin-top:3em;box-shadow:1em 2.4em 3.4em -2em hsl(var(--color-neutral-900-hsl)/25%);background-color:var(--color-neutral-100)}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{padding:.6em .8em;color:#6a788c;cursor:pointer;transition:background-color .1s ease-out}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{color:var(--color-primary-400)}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{color:var(--color-primary-400);font-weight:500}::ng-deep .ng-dropdown-panel .scrollable-content{background:#f2f5fa}::ng-deep .ng-dropdown-panel-items.scroll-host{background:#f2f5fa;padding:1em;border-radius:var(--_entry-input-br)}::ng-deep app-server-select-field .ng-select:not(.ng-select-filtered):not(.ng-select-opened) .ng-dropdown-panel{opacity:0!important}::ng-deep .c-entry-input--ng-select{--_entry-input-padd-y: .76em}::ng-deep .c-entry-input--ng-select:has(.ng-value-container .ng-value){--_entry-input-padd-y: .35em}::ng-deep .c-entry-input--ng-select:has(.ng-value-container .ng-value) .ng-select .ng-select-container .ng-value-container .ng-input{margin-left:8px}::ng-deep .c-entry-input--ng-select:has(.ng-value-container .ng-value) .ng-select .ng-select-container .ng-value-container .ng-input>input{height:100%}::ng-deep .ng-dropdown-panel-items.scroll-host:has(.ng-select-notfound){background-color:hsl(from hsl(var(--color-context-error-hsl)) h s 94%);color:hsl(from hsl(var(--color-context-error-hsl)) h s 60%)}::ng-deep .ng-dropdown-panel-items.scroll-host:has(.ng-select-loading){background-color:hsl(from hsl(var(--color-alternative-800-hsl)) h s 96%);color:hsl(from hsl(var(--color-alternative-800-hsl)) h 90% 70%)}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container,.ng-select.ng-select-single .ng-select-container .ng-value-container{display:grid}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{height:-webkit-fill-available}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input>input{height:98%}::ng-deep .ng-select.ng-select-single .ng-select-container{overflow:visible;position:relative;cursor:pointer}::ng-deep .ng-select.ng-select-single .ng-select-container:before{content:\"\";position:absolute;left:calc(var(--_entry-input-padd-x) * -1);right:calc(var(--_entry-input-padd-x) * -1 - var(--_entry-input-addon-gap) - var(--_entry-input-addon-icon-fz));top:calc(max(var(--_entry-input-padd-y) * var(--_size-factor, 1),2px)*-1);bottom:calc(max(var(--_entry-input-padd-y) * var(--_size-factor, 1),2px)*-1)}::ng-deep .ng-select .ng-clear-wrapper .ng-clear{position:absolute;top:50%;transform:translateY(-50%)}@media (hover: hover){::ng-deep .ng-select .ng-clear-wrapper:is(:hover,:focus-visible){color:var(--color-hover)}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { ngSelect: [{
                 type: ViewChild,
                 args: [NgSelectComponent]
@@ -2162,11 +2276,11 @@ class ServerSelectFieldComponent extends BaseFieldComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ServerSelectFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.6", type: ServerSelectFieldComponent, isStandalone: true, selector: "core-server-select-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, viewQueries: [{ propertyName: "ngSelect", first: true, predicate: ["ngSelect"], descendants: true }], usesInheritance: true, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "<!-- ! Solcre: Deberia ser el mismo componente que el select-field.component -->\n<!-- Todo: Ng select + c-entry-select -->\n  \n<div class=\"c-entry-item\" [class.c-entry-item--inline]=\"field().inline\">\n    <span class=\"c-entry-text\" *ngIf=\"field().label\">{{ field().label | translate }}</span>\n \n    <!-- ! Solcre: El .c-entry-select deberia ser un componente en s\u00ED mismo -->\n    <!-- ! Solcre: Sacar el .is-placeholder en el onChange -->\n \n    <span class=\"c-entry-input c-entry-input--ng-select\"\n          [class.is-placeholder]=\"isPlaceholderVisible()\">\n    <!-- <div class=\"c-entry-select\"> -->\n \n        <ng-select #ngSelect\n            [items]=\"items()\"\n            [bindValue]=\"field().bindValue ?? 'id'\"\n            [multiple]=\"field().multiple\"\n            [formControl]=\"formControl()\"\n            [compareWith]=\"compareWith\"\n            [class.has-error]=\"hasError()\"\n            [readonly]=\"field().readonly\"\n            [clearable]=\"!!value()\"\n            [searchable]=\"isSearchable()\"\n            [loading]=\"isLoading()\"\n            [typeahead]=\"searchInput$\"\n            (blur)=\"onBlurInput()\"\n            (click)=\"onFieldClick()\"\n            (beforeOpen)=\"onBeforeOpen()\"\n            (open)=\"onOpen()\"\n            (close)=\"onClose()\"\n            (change)=\"onSelectChange($event)\"\n            (clear)=\"onSelectClear()\"\n            [placeholder]=\"isPlaceholderVisible() ? ((field().placeholder ?? 'commons.select.placeholder') | translate) : ''\"\n            [virtualScroll]=\"true\"\n            [clearable]=\"true\"\n        >\n            <!-- Estilos para cuando se clickea el select para buscar (si es conveniente dejarlo vac\u00EDo) -->\n            <ng-template ng-typetosearch-tmp></ng-template>\n            <ng-template ng-option-tmp let-item=\"item\">\n                <!-- Estilos de opciones del select-->\n                {{ getDisplayLabel(item) }}\n            </ng-template>\n            <ng-template ng-label-tmp let-item=\"item\">\n                <!-- Estilos que aparecen en la etiqueta del item seleccionado -->\n                {{ getDisplayLabel(item) }}\n            </ng-template>\n            <ng-template ng-loadingtext-tmp>\n                <span class=\"ng-select-loading\">{{ 'commons.loading' | translate }}</span>\n            </ng-template>\n            <ng-template ng-notfound-tmp>\n                <ng-container *ngIf=\"isLoading(); else noData\">\n                    <span class=\"ng-select-loading\">{{ 'commons.loading' | translate }}</span>\n                </ng-container>\n                <ng-template #noData>\n                    <ng-container *ngIf=\"hasSearched(); else startTyping\">\n                        <span class=\"ng-select-notfound\">{{ 'modal.field.serverSelect.noResults' | translate }}</span>\n                    </ng-container>\n                    <ng-template #startTyping>\n                        <span class=\"ng-select-start-typing\">{{ 'modal.field.serverSelect.typeToSearch' | translate }}</span>\n                    </ng-template>\n                </ng-template>\n            </ng-template>\n        </ng-select>\n \n        <!-- <span class=\"c-entry-select__arrow icon-arrow-down\"></span> -->\n        <span class=\"c-entry-input__addon icon-select-arrow\"></span>\n    </span> <!-- .c-entry-select || .c-entry-input -->\n    <core-field-errors [errors]=\"errors()\" />\n</div> <!-- .c-entry-item -->", styles: [".ng-select .ng-select-container .ng-value-container{flex-wrap:wrap}.c-entry-input--ng-select.is-placeholder ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input input::placeholder{color:var(--_entry-input-placeholder-color);opacity:1}.c-entry-input--ng-select.is-placeholder ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input input{color:var(--_entry-input-placeholder-color)}.c-entry-input--ng-select:not(.is-placeholder) ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input input::placeholder{opacity:0}::ng-deep .ng-select{width:100%!important;display:contents}.c-entry-input--ng-select{position:relative;overflow:auto}::ng-deep .ng-dropdown-panel{top:0;right:0}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-value{background-color:var(--form-highlighted-color, var(--color-neutral-300));color:#3f4e6a;border-radius:var(--_entry-input-br);padding:.2em .8em;margin:.2em;border:none;border-radius:4px}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-value .ng-value-icon{border:none;padding-right:.4em;color:#3f4e6a}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items{border:none;min-height:auto;padding:0;position:relative;right:0;margin-top:3em;box-shadow:1em 2.4em 3.4em -2em hsl(var(--color-neutral-900-hsl)/25%);background-color:var(--color-neutral-100)}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{padding:.6em .8em;color:#6a788c;cursor:pointer;transition:background-color .1s ease-out}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{color:var(--color-primary-400)}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{color:var(--color-primary-400);font-weight:500}::ng-deep .ng-dropdown-panel .scrollable-content{background:#f2f5fa}::ng-deep .ng-dropdown-panel-items.scroll-host{background:#f2f5fa;padding:1em;border-radius:var(--_entry-input-br)}::ng-deep app-server-select-field .ng-select:not(.ng-select-filtered):not(.ng-select-opened) .ng-dropdown-panel{opacity:0!important}::ng-deep .c-entry-input--ng-select{--_entry-input-padd-y: .76em}::ng-deep .c-entry-input--ng-select:has(.ng-value-container .ng-value){--_entry-input-padd-y: .35em}::ng-deep .c-entry-input--ng-select:has(.ng-value-container .ng-value) .ng-select .ng-select-container .ng-value-container .ng-input{margin-left:8px}::ng-deep .c-entry-input--ng-select:has(.ng-value-container .ng-value) .ng-select .ng-select-container .ng-value-container .ng-input>input{height:100%}::ng-deep .ng-dropdown-panel-items.scroll-host:has(.ng-select-notfound){background-color:hsl(from hsl(var(--color-context-error-hsl)) h s 94%);color:hsl(from hsl(var(--color-context-error-hsl)) h s 60%)}::ng-deep .ng-dropdown-panel-items.scroll-host:has(.ng-select-loading){background-color:hsl(from hsl(var(--color-alternative-800-hsl)) h s 96%);color:hsl(from hsl(var(--color-alternative-800-hsl)) h 90% 70%)}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container,.ng-select.ng-select-single .ng-select-container .ng-value-container{display:grid}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{height:-webkit-fill-available}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input>input{height:98%}::ng-deep .ng-select.ng-select-single .ng-select-container{overflow:visible;position:relative;cursor:pointer}::ng-deep .ng-select.ng-select-single .ng-select-container:before{content:\"\";position:absolute;left:calc(var(--_entry-input-padd-x) * -1);right:calc(var(--_entry-input-padd-x) * -1 - var(--_entry-input-addon-gap) - var(--_entry-input-addon-icon-fz));top:calc(max(var(--_entry-input-padd-y) * var(--_size-factor, 1),2px)*-1);bottom:calc(max(var(--_entry-input-padd-y) * var(--_size-factor, 1),2px)*-1)}::ng-deep .ng-select .ng-clear-wrapper .ng-clear{position:absolute;top:50%;transform:translateY(-50%)}@media (hover: hover){::ng-deep .ng-select .ng-clear-wrapper:is(:hover,:focus-visible){color:var(--color-hover)}}\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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i5.NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "bindLabel", "bindValue", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "tabFocusOnClearButton", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick", "keyDownFn"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i5.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i5.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i5.NgNotFoundTemplateDirective, selector: "[ng-notfound-tmp]" }, { kind: "directive", type: i5.NgTypeToSearchTemplateDirective, selector: "[ng-typetosearch-tmp]" }, { kind: "directive", type: i5.NgLoadingTextTemplateDirective, selector: "[ng-loadingtext-tmp]" }, { kind: "component", type: FieldErrorsComponent, selector: "core-field-errors", inputs: ["errors"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.6", type: ServerSelectFieldComponent, isStandalone: true, selector: "core-server-select-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, viewQueries: [{ propertyName: "ngSelect", first: true, predicate: ["ngSelect"], descendants: true }], usesInheritance: true, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "<!-- ! Solcre: Deberia ser el mismo componente que el select-field.component -->\n<!-- Todo: Ng select + c-entry-select -->\n  \n<div class=\"c-entry-item\" [class.c-entry-item--inline]=\"field().inline\">\n    <span class=\"c-entry-text\" *ngIf=\"field().label\">{{ field().label | translate }}</span>\n \n    <!-- ! Solcre: El .c-entry-select deberia ser un componente en s\u00ED mismo -->\n    <!-- ! Solcre: Sacar el .is-placeholder en el onChange -->\n \n    <span class=\"c-entry-input c-entry-input--ng-select\"\n          [class.is-placeholder]=\"isPlaceholderVisible()\">\n    <!-- <div class=\"c-entry-select\"> -->\n \n        <ng-select #ngSelect\n            [items]=\"items()\"\n            [bindValue]=\"field().bindValue ?? 'id'\"\n            [multiple]=\"field().multiple\"\n            [formControl]=\"formControl()\"\n            [compareWith]=\"compareWith\"\n            [class.has-error]=\"hasError()\"\n            [readonly]=\"field().readonly\"\n            [clearable]=\"!!value()\"\n            [searchable]=\"isSearchable()\"\n            [loading]=\"isLoading()\"\n            [typeahead]=\"searchInput$\"\n            (blur)=\"onBlurInput()\"\n            (click)=\"onFieldClick()\"\n            (beforeOpen)=\"onBeforeOpen()\"\n            (open)=\"onOpen()\"\n            (close)=\"onClose()\"\n            (change)=\"onSelectChange($event)\"\n            (clear)=\"onSelectClear()\"\n            [placeholder]=\"isPlaceholderVisible() ? ((field().placeholder ?? 'commons.select.placeholder') | translate) : ''\"\n            [virtualScroll]=\"true\"\n            [clearable]=\"true\"\n        >\n            <!-- Estilos para cuando se clickea el select para buscar (si es conveniente dejarlo vac\u00EDo) -->\n            <ng-template ng-typetosearch-tmp></ng-template>\n            <ng-template ng-option-tmp let-item=\"item\">\n                <!-- Estilos de opciones del select-->\n                {{ getDisplayLabel(item) }}\n            </ng-template>\n            <ng-template ng-label-tmp let-item=\"item\">\n                <!-- Estilos que aparecen en la etiqueta del item seleccionado -->\n                {{ getDisplayLabel(item) }}\n            </ng-template>\n            <ng-template ng-loadingtext-tmp>\n                <span class=\"ng-select-loading\">{{ 'commons.loading' | translate }}</span>\n            </ng-template>\n            <ng-template ng-notfound-tmp>\n                <ng-container *ngIf=\"isLoading(); else noData\">\n                    <span class=\"ng-select-loading\">{{ 'commons.loading' | translate }}</span>\n                </ng-container>\n                <ng-template #noData>\n                    <ng-container *ngIf=\"hasSearched(); else startTyping\">\n                        <span class=\"ng-select-notfound\">{{ 'modal.field.serverSelect.noResults' | translate }}</span>\n                    </ng-container>\n                    <ng-template #startTyping>\n                        <span class=\"ng-select-start-typing\">{{ 'modal.field.serverSelect.typeToSearch' | translate }}</span>\n                    </ng-template>\n                </ng-template>\n            </ng-template>\n        </ng-select>\n \n        <!-- <span class=\"c-entry-select__arrow icon-arrow-down\"></span> -->\n        <span class=\"c-entry-input__addon icon-select-arrow\"></span>\n    </span> <!-- .c-entry-select || .c-entry-input -->\n    <core-field-errors [errors]=\"errors()\" />\n</div> <!-- .c-entry-item -->", styles: [".ng-select .ng-select-container .ng-value-container{flex-wrap:wrap}.c-entry-input--ng-select.is-placeholder ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input input::placeholder{color:var(--_entry-input-placeholder-color);opacity:1}.c-entry-input--ng-select.is-placeholder ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input input{color:var(--_entry-input-placeholder-color)}.c-entry-input--ng-select:not(.is-placeholder) ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input input::placeholder{opacity:0}::ng-deep .ng-select{width:100%!important;display:contents}.c-entry-input--ng-select{position:relative}::ng-deep .ng-dropdown-panel{top:0;right:0}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-value{background-color:var(--form-highlighted-color, var(--color-neutral-300));color:#3f4e6a;border-radius:var(--_entry-input-br);padding:.2em .8em;margin:.2em;border:none;border-radius:4px}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-value .ng-value-icon{border:none;padding-right:.4em;color:#3f4e6a}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items{border:none;min-height:auto;padding:0;position:relative;right:0;margin-top:3em;box-shadow:1em 2.4em 3.4em -2em hsl(var(--color-neutral-900-hsl)/25%);background-color:var(--color-neutral-100)}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{padding:.6em .8em;color:#6a788c;cursor:pointer;transition:background-color .1s ease-out}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{color:var(--color-primary-400)}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{color:var(--color-primary-400);font-weight:500}::ng-deep .ng-dropdown-panel .scrollable-content{background:#f2f5fa}::ng-deep .ng-dropdown-panel-items.scroll-host{background:#f2f5fa;padding:1em;border-radius:var(--_entry-input-br)}::ng-deep app-server-select-field .ng-select:not(.ng-select-filtered):not(.ng-select-opened) .ng-dropdown-panel{opacity:0!important}::ng-deep .c-entry-input--ng-select{--_entry-input-padd-y: .76em}::ng-deep .c-entry-input--ng-select:has(.ng-value-container .ng-value){--_entry-input-padd-y: .35em}::ng-deep .c-entry-input--ng-select:has(.ng-value-container .ng-value) .ng-select .ng-select-container .ng-value-container .ng-input{margin-left:8px}::ng-deep .c-entry-input--ng-select:has(.ng-value-container .ng-value) .ng-select .ng-select-container .ng-value-container .ng-input>input{height:100%}::ng-deep .ng-dropdown-panel-items.scroll-host:has(.ng-select-notfound){background-color:hsl(from hsl(var(--color-context-error-hsl)) h s 94%);color:hsl(from hsl(var(--color-context-error-hsl)) h s 60%)}::ng-deep .ng-dropdown-panel-items.scroll-host:has(.ng-select-loading){background-color:hsl(from hsl(var(--color-alternative-800-hsl)) h s 96%);color:hsl(from hsl(var(--color-alternative-800-hsl)) h 90% 70%)}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container,.ng-select.ng-select-single .ng-select-container .ng-value-container{display:grid}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{height:-webkit-fill-available}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input>input{height:98%}::ng-deep .ng-select.ng-select-single .ng-select-container{overflow:visible;position:relative;cursor:pointer}::ng-deep .ng-select.ng-select-single .ng-select-container:before{content:\"\";position:absolute;left:calc(var(--_entry-input-padd-x) * -1);right:calc(var(--_entry-input-padd-x) * -1 - var(--_entry-input-addon-gap) - var(--_entry-input-addon-icon-fz));top:calc(max(var(--_entry-input-padd-y) * var(--_size-factor, 1),2px)*-1);bottom:calc(max(var(--_entry-input-padd-y) * var(--_size-factor, 1),2px)*-1)}::ng-deep .ng-select .ng-clear-wrapper .ng-clear{position:absolute;top:50%;transform:translateY(-50%)}@media (hover: hover){::ng-deep .ng-select .ng-clear-wrapper:is(:hover,:focus-visible){color:var(--color-hover)}}\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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i5.NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "bindLabel", "bindValue", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "tabFocusOnClearButton", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick", "keyDownFn"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i5.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i5.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i5.NgNotFoundTemplateDirective, selector: "[ng-notfound-tmp]" }, { kind: "directive", type: i5.NgTypeToSearchTemplateDirective, selector: "[ng-typetosearch-tmp]" }, { kind: "directive", type: i5.NgLoadingTextTemplateDirective, selector: "[ng-loadingtext-tmp]" }, { kind: "component", type: FieldErrorsComponent, selector: "core-field-errors", inputs: ["errors"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ServerSelectFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'core-server-select-field', standalone: true, imports: [CommonModule, FormsModule, TranslateModule, ReactiveFormsModule, NgSelectModule, FieldErrorsComponent], hostDirectives: [CoreHostDirective], template: "<!-- ! Solcre: Deberia ser el mismo componente que el select-field.component -->\n<!-- Todo: Ng select + c-entry-select -->\n  \n<div class=\"c-entry-item\" [class.c-entry-item--inline]=\"field().inline\">\n    <span class=\"c-entry-text\" *ngIf=\"field().label\">{{ field().label | translate }}</span>\n \n    <!-- ! Solcre: El .c-entry-select deberia ser un componente en s\u00ED mismo -->\n    <!-- ! Solcre: Sacar el .is-placeholder en el onChange -->\n \n    <span class=\"c-entry-input c-entry-input--ng-select\"\n          [class.is-placeholder]=\"isPlaceholderVisible()\">\n    <!-- <div class=\"c-entry-select\"> -->\n \n        <ng-select #ngSelect\n            [items]=\"items()\"\n            [bindValue]=\"field().bindValue ?? 'id'\"\n            [multiple]=\"field().multiple\"\n            [formControl]=\"formControl()\"\n            [compareWith]=\"compareWith\"\n            [class.has-error]=\"hasError()\"\n            [readonly]=\"field().readonly\"\n            [clearable]=\"!!value()\"\n            [searchable]=\"isSearchable()\"\n            [loading]=\"isLoading()\"\n            [typeahead]=\"searchInput$\"\n            (blur)=\"onBlurInput()\"\n            (click)=\"onFieldClick()\"\n            (beforeOpen)=\"onBeforeOpen()\"\n            (open)=\"onOpen()\"\n            (close)=\"onClose()\"\n            (change)=\"onSelectChange($event)\"\n            (clear)=\"onSelectClear()\"\n            [placeholder]=\"isPlaceholderVisible() ? ((field().placeholder ?? 'commons.select.placeholder') | translate) : ''\"\n            [virtualScroll]=\"true\"\n            [clearable]=\"true\"\n        >\n            <!-- Estilos para cuando se clickea el select para buscar (si es conveniente dejarlo vac\u00EDo) -->\n            <ng-template ng-typetosearch-tmp></ng-template>\n            <ng-template ng-option-tmp let-item=\"item\">\n                <!-- Estilos de opciones del select-->\n                {{ getDisplayLabel(item) }}\n            </ng-template>\n            <ng-template ng-label-tmp let-item=\"item\">\n                <!-- Estilos que aparecen en la etiqueta del item seleccionado -->\n                {{ getDisplayLabel(item) }}\n            </ng-template>\n            <ng-template ng-loadingtext-tmp>\n                <span class=\"ng-select-loading\">{{ 'commons.loading' | translate }}</span>\n            </ng-template>\n            <ng-template ng-notfound-tmp>\n                <ng-container *ngIf=\"isLoading(); else noData\">\n                    <span class=\"ng-select-loading\">{{ 'commons.loading' | translate }}</span>\n                </ng-container>\n                <ng-template #noData>\n                    <ng-container *ngIf=\"hasSearched(); else startTyping\">\n                        <span class=\"ng-select-notfound\">{{ 'modal.field.serverSelect.noResults' | translate }}</span>\n                    </ng-container>\n                    <ng-template #startTyping>\n                        <span class=\"ng-select-start-typing\">{{ 'modal.field.serverSelect.typeToSearch' | translate }}</span>\n                    </ng-template>\n                </ng-template>\n            </ng-template>\n        </ng-select>\n \n        <!-- <span class=\"c-entry-select__arrow icon-arrow-down\"></span> -->\n        <span class=\"c-entry-input__addon icon-select-arrow\"></span>\n    </span> <!-- .c-entry-select || .c-entry-input -->\n    <core-field-errors [errors]=\"errors()\" />\n</div> <!-- .c-entry-item -->", styles: [".ng-select .ng-select-container .ng-value-container{flex-wrap:wrap}.c-entry-input--ng-select.is-placeholder ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input input::placeholder{color:var(--_entry-input-placeholder-color);opacity:1}.c-entry-input--ng-select.is-placeholder ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input input{color:var(--_entry-input-placeholder-color)}.c-entry-input--ng-select:not(.is-placeholder) ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input input::placeholder{opacity:0}::ng-deep .ng-select{width:100%!important;display:contents}.c-entry-input--ng-select{position:relative;overflow:auto}::ng-deep .ng-dropdown-panel{top:0;right:0}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-value{background-color:var(--form-highlighted-color, var(--color-neutral-300));color:#3f4e6a;border-radius:var(--_entry-input-br);padding:.2em .8em;margin:.2em;border:none;border-radius:4px}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-value .ng-value-icon{border:none;padding-right:.4em;color:#3f4e6a}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items{border:none;min-height:auto;padding:0;position:relative;right:0;margin-top:3em;box-shadow:1em 2.4em 3.4em -2em hsl(var(--color-neutral-900-hsl)/25%);background-color:var(--color-neutral-100)}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{padding:.6em .8em;color:#6a788c;cursor:pointer;transition:background-color .1s ease-out}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{color:var(--color-primary-400)}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{color:var(--color-primary-400);font-weight:500}::ng-deep .ng-dropdown-panel .scrollable-content{background:#f2f5fa}::ng-deep .ng-dropdown-panel-items.scroll-host{background:#f2f5fa;padding:1em;border-radius:var(--_entry-input-br)}::ng-deep app-server-select-field .ng-select:not(.ng-select-filtered):not(.ng-select-opened) .ng-dropdown-panel{opacity:0!important}::ng-deep .c-entry-input--ng-select{--_entry-input-padd-y: .76em}::ng-deep .c-entry-input--ng-select:has(.ng-value-container .ng-value){--_entry-input-padd-y: .35em}::ng-deep .c-entry-input--ng-select:has(.ng-value-container .ng-value) .ng-select .ng-select-container .ng-value-container .ng-input{margin-left:8px}::ng-deep .c-entry-input--ng-select:has(.ng-value-container .ng-value) .ng-select .ng-select-container .ng-value-container .ng-input>input{height:100%}::ng-deep .ng-dropdown-panel-items.scroll-host:has(.ng-select-notfound){background-color:hsl(from hsl(var(--color-context-error-hsl)) h s 94%);color:hsl(from hsl(var(--color-context-error-hsl)) h s 60%)}::ng-deep .ng-dropdown-panel-items.scroll-host:has(.ng-select-loading){background-color:hsl(from hsl(var(--color-alternative-800-hsl)) h s 96%);color:hsl(from hsl(var(--color-alternative-800-hsl)) h 90% 70%)}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container,.ng-select.ng-select-single .ng-select-container .ng-value-container{display:grid}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{height:-webkit-fill-available}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input>input{height:98%}::ng-deep .ng-select.ng-select-single .ng-select-container{overflow:visible;position:relative;cursor:pointer}::ng-deep .ng-select.ng-select-single .ng-select-container:before{content:\"\";position:absolute;left:calc(var(--_entry-input-padd-x) * -1);right:calc(var(--_entry-input-padd-x) * -1 - var(--_entry-input-addon-gap) - var(--_entry-input-addon-icon-fz));top:calc(max(var(--_entry-input-padd-y) * var(--_size-factor, 1),2px)*-1);bottom:calc(max(var(--_entry-input-padd-y) * var(--_size-factor, 1),2px)*-1)}::ng-deep .ng-select .ng-clear-wrapper .ng-clear{position:absolute;top:50%;transform:translateY(-50%)}@media (hover: hover){::ng-deep .ng-select .ng-clear-wrapper:is(:hover,:focus-visible){color:var(--color-hover)}}\n"] }]
+            args: [{ selector: 'core-server-select-field', standalone: true, imports: [CommonModule, FormsModule, TranslateModule, ReactiveFormsModule, NgSelectModule, FieldErrorsComponent], hostDirectives: [CoreHostDirective], template: "<!-- ! Solcre: Deberia ser el mismo componente que el select-field.component -->\n<!-- Todo: Ng select + c-entry-select -->\n  \n<div class=\"c-entry-item\" [class.c-entry-item--inline]=\"field().inline\">\n    <span class=\"c-entry-text\" *ngIf=\"field().label\">{{ field().label | translate }}</span>\n \n    <!-- ! Solcre: El .c-entry-select deberia ser un componente en s\u00ED mismo -->\n    <!-- ! Solcre: Sacar el .is-placeholder en el onChange -->\n \n    <span class=\"c-entry-input c-entry-input--ng-select\"\n          [class.is-placeholder]=\"isPlaceholderVisible()\">\n    <!-- <div class=\"c-entry-select\"> -->\n \n        <ng-select #ngSelect\n            [items]=\"items()\"\n            [bindValue]=\"field().bindValue ?? 'id'\"\n            [multiple]=\"field().multiple\"\n            [formControl]=\"formControl()\"\n            [compareWith]=\"compareWith\"\n            [class.has-error]=\"hasError()\"\n            [readonly]=\"field().readonly\"\n            [clearable]=\"!!value()\"\n            [searchable]=\"isSearchable()\"\n            [loading]=\"isLoading()\"\n            [typeahead]=\"searchInput$\"\n            (blur)=\"onBlurInput()\"\n            (click)=\"onFieldClick()\"\n            (beforeOpen)=\"onBeforeOpen()\"\n            (open)=\"onOpen()\"\n            (close)=\"onClose()\"\n            (change)=\"onSelectChange($event)\"\n            (clear)=\"onSelectClear()\"\n            [placeholder]=\"isPlaceholderVisible() ? ((field().placeholder ?? 'commons.select.placeholder') | translate) : ''\"\n            [virtualScroll]=\"true\"\n            [clearable]=\"true\"\n        >\n            <!-- Estilos para cuando se clickea el select para buscar (si es conveniente dejarlo vac\u00EDo) -->\n            <ng-template ng-typetosearch-tmp></ng-template>\n            <ng-template ng-option-tmp let-item=\"item\">\n                <!-- Estilos de opciones del select-->\n                {{ getDisplayLabel(item) }}\n            </ng-template>\n            <ng-template ng-label-tmp let-item=\"item\">\n                <!-- Estilos que aparecen en la etiqueta del item seleccionado -->\n                {{ getDisplayLabel(item) }}\n            </ng-template>\n            <ng-template ng-loadingtext-tmp>\n                <span class=\"ng-select-loading\">{{ 'commons.loading' | translate }}</span>\n            </ng-template>\n            <ng-template ng-notfound-tmp>\n                <ng-container *ngIf=\"isLoading(); else noData\">\n                    <span class=\"ng-select-loading\">{{ 'commons.loading' | translate }}</span>\n                </ng-container>\n                <ng-template #noData>\n                    <ng-container *ngIf=\"hasSearched(); else startTyping\">\n                        <span class=\"ng-select-notfound\">{{ 'modal.field.serverSelect.noResults' | translate }}</span>\n                    </ng-container>\n                    <ng-template #startTyping>\n                        <span class=\"ng-select-start-typing\">{{ 'modal.field.serverSelect.typeToSearch' | translate }}</span>\n                    </ng-template>\n                </ng-template>\n            </ng-template>\n        </ng-select>\n \n        <!-- <span class=\"c-entry-select__arrow icon-arrow-down\"></span> -->\n        <span class=\"c-entry-input__addon icon-select-arrow\"></span>\n    </span> <!-- .c-entry-select || .c-entry-input -->\n    <core-field-errors [errors]=\"errors()\" />\n</div> <!-- .c-entry-item -->", styles: [".ng-select .ng-select-container .ng-value-container{flex-wrap:wrap}.c-entry-input--ng-select.is-placeholder ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input input::placeholder{color:var(--_entry-input-placeholder-color);opacity:1}.c-entry-input--ng-select.is-placeholder ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input input{color:var(--_entry-input-placeholder-color)}.c-entry-input--ng-select:not(.is-placeholder) ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input input::placeholder{opacity:0}::ng-deep .ng-select{width:100%!important;display:contents}.c-entry-input--ng-select{position:relative}::ng-deep .ng-dropdown-panel{top:0;right:0}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-value{background-color:var(--form-highlighted-color, var(--color-neutral-300));color:#3f4e6a;border-radius:var(--_entry-input-br);padding:.2em .8em;margin:.2em;border:none;border-radius:4px}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-value .ng-value-icon{border:none;padding-right:.4em;color:#3f4e6a}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items{border:none;min-height:auto;padding:0;position:relative;right:0;margin-top:3em;box-shadow:1em 2.4em 3.4em -2em hsl(var(--color-neutral-900-hsl)/25%);background-color:var(--color-neutral-100)}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{padding:.6em .8em;color:#6a788c;cursor:pointer;transition:background-color .1s ease-out}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{color:var(--color-primary-400)}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{color:var(--color-primary-400);font-weight:500}::ng-deep .ng-dropdown-panel .scrollable-content{background:#f2f5fa}::ng-deep .ng-dropdown-panel-items.scroll-host{background:#f2f5fa;padding:1em;border-radius:var(--_entry-input-br)}::ng-deep app-server-select-field .ng-select:not(.ng-select-filtered):not(.ng-select-opened) .ng-dropdown-panel{opacity:0!important}::ng-deep .c-entry-input--ng-select{--_entry-input-padd-y: .76em}::ng-deep .c-entry-input--ng-select:has(.ng-value-container .ng-value){--_entry-input-padd-y: .35em}::ng-deep .c-entry-input--ng-select:has(.ng-value-container .ng-value) .ng-select .ng-select-container .ng-value-container .ng-input{margin-left:8px}::ng-deep .c-entry-input--ng-select:has(.ng-value-container .ng-value) .ng-select .ng-select-container .ng-value-container .ng-input>input{height:100%}::ng-deep .ng-dropdown-panel-items.scroll-host:has(.ng-select-notfound){background-color:hsl(from hsl(var(--color-context-error-hsl)) h s 94%);color:hsl(from hsl(var(--color-context-error-hsl)) h s 60%)}::ng-deep .ng-dropdown-panel-items.scroll-host:has(.ng-select-loading){background-color:hsl(from hsl(var(--color-alternative-800-hsl)) h s 96%);color:hsl(from hsl(var(--color-alternative-800-hsl)) h 90% 70%)}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container,.ng-select.ng-select-single .ng-select-container .ng-value-container{display:grid}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{height:-webkit-fill-available}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input>input{height:98%}::ng-deep .ng-select.ng-select-single .ng-select-container{overflow:visible;position:relative;cursor:pointer}::ng-deep .ng-select.ng-select-single .ng-select-container:before{content:\"\";position:absolute;left:calc(var(--_entry-input-padd-x) * -1);right:calc(var(--_entry-input-padd-x) * -1 - var(--_entry-input-addon-gap) - var(--_entry-input-addon-icon-fz));top:calc(max(var(--_entry-input-padd-y) * var(--_size-factor, 1),2px)*-1);bottom:calc(max(var(--_entry-input-padd-y) * var(--_size-factor, 1),2px)*-1)}::ng-deep .ng-select .ng-clear-wrapper .ng-clear{position:absolute;top:50%;transform:translateY(-50%)}@media (hover: hover){::ng-deep .ng-select .ng-clear-wrapper:is(:hover,:focus-visible){color:var(--color-hover)}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { ngSelect: [{
                 type: ViewChild,
                 args: ['ngSelect']
@@ -2176,6 +2290,20 @@ class SwitchFieldComponent extends BaseFieldComponent {
     isDisabled = computed(() => this.mode() === 'view' || this.evaluateReadonly());
     constructor() {
         super();
+        effect(() => {
+            const fieldCfg = this.field();
+            const formValue = this.formValue();
+            if ('dynamicValue' in fieldCfg && typeof fieldCfg.dynamicValue === 'function' && formValue) {
+                const newValue = fieldCfg.dynamicValue(formValue);
+                const currentValue = this.formControl().value;
+                if (newValue !== null && newValue !== undefined && newValue !== currentValue) {
+                    setTimeout(() => {
+                        this.formControl().setValue(newValue, { emitEvent: true });
+                        this.valueChange.emit(newValue);
+                    }, 0);
+                }
+            }
+        });
         effect(() => {
             if (this.formControl()) {
                 const currentValue = this.getCurrentValue();
@@ -2251,6 +2379,20 @@ class TextAreaFieldComponent extends BaseFieldComponent {
                 control.enable();
             }
         });
+        effect(() => {
+            const fieldCfg = this.field();
+            const formValue = this.formValue();
+            if ('dynamicValue' in fieldCfg && typeof fieldCfg.dynamicValue === 'function' && formValue) {
+                const newValue = fieldCfg.dynamicValue(formValue);
+                const currentValue = this.formControl().value;
+                if (newValue !== null && newValue !== undefined && newValue !== currentValue) {
+                    setTimeout(() => {
+                        this.formControl().setValue(newValue, { emitEvent: true });
+                        this.valueChange.emit(newValue);
+                    }, 0);
+                }
+            }
+        });
     }
     isDisabled() {
         return this.mode() === ModalMode.VIEW || this.evaluateReadonly();
@@ -2279,6 +2421,20 @@ class TextFieldComponent extends BaseFieldComponent {
                 control.enable();
             }
         });
+        effect(() => {
+            const fieldCfg = this.field();
+            const formValue = this.formValue();
+            if ('dynamicValue' in fieldCfg && typeof fieldCfg.dynamicValue === 'function' && formValue) {
+                const newValue = fieldCfg.dynamicValue(formValue);
+                const currentValue = this.formControl().value;
+                if (newValue !== null && newValue !== undefined && newValue !== currentValue) {
+                    setTimeout(() => {
+                        this.formControl().setValue(newValue, { emitEvent: true });
+                        this.valueChange.emit(newValue);
+                    }, 0);
+                }
+            }
+        });
     }
     isDisabled() {
         return this.mode() === ModalMode.VIEW || this.evaluateReadonly();
@@ -2320,7 +2476,17 @@ class TimeFieldComponent {
     ModalMode = ModalMode;
     selectedStartTime = signal(null);
     selectedEndTime = signal(null);
+    hasStartValue = signal(false);
+    hasEndValue = signal(false);
     config = computed(() => this.field().config || {});
+    isStartPlaceholderVisible = computed(() => {
+        const hasVal = this.hasStartValue();
+        return !hasVal;
+    });
+    isEndPlaceholderVisible = computed(() => {
+        const hasVal = this.hasEndValue();
+        return !hasVal;
+    });
     availableOptions = computed(() => {
         const baseOptions = this.config().options || [];
         const interval = this.config().timeInterval;
@@ -2377,6 +2543,28 @@ class TimeFieldComponent {
             const newValue = this.value();
             this.initializeFromValue(newValue);
         });
+        effect(() => {
+            const startTime = this.selectedStartTime();
+            this.hasStartValue.set(startTime !== null && startTime !== undefined && startTime !== '');
+        });
+        effect(() => {
+            const endTime = this.selectedEndTime();
+            this.hasEndValue.set(endTime !== null && endTime !== undefined && endTime !== '');
+        });
+        effect(() => {
+            const fieldCfg = this.field();
+            const formValue = this.formValue();
+            if ('dynamicValue' in fieldCfg && typeof fieldCfg.dynamicValue === 'function') {
+                const newValue = fieldCfg.dynamicValue(formValue || {});
+                const currentValue = this.value();
+                if (newValue !== null && newValue !== undefined && newValue !== currentValue) {
+                    this.initializeFromValue(newValue);
+                    setTimeout(() => {
+                        this.valueChange.emit(newValue);
+                    }, 0);
+                }
+            }
+        });
     }
     initializeFromValue(value) {
         if (!value) {
@@ -2457,11 +2645,11 @@ class TimeFieldComponent {
         this.onBlurEvent.emit(this.field().key);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TimeFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: TimeFieldComponent, isStandalone: true, selector: "core-time-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: true, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, rowData: { classPropertyName: "rowData", publicName: "rowData", isSignal: true, isRequired: false, transformFunction: null }, formValue: { classPropertyName: "formValue", publicName: "formValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", onBlurEvent: "onBlurEvent", onEnterEvent: "onEnterEvent" }, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "<div class=\"c-entry-item\" [class.c-entry-item--inline]=\"field().inline\" [class.time-field-range]=\"includeEndTime()\">\n  <!-- Start Time Field -->\n  <div class=\"time-field-container\">\n    <label class=\"c-entry-text\" [for]=\"field().key.toString() + '-start'\">\n      {{ startTimeLabel() | translate }}\n      @if (hasRequiredValidators()) {\n        <span class=\"c-required\">*</span>\n      }\n    </label>\n    \n    <span class=\"c-entry-input c-entry-input--ng-select\" [class.is-invalid]=\"hasError()\">\n      <ng-select\n        [id]=\"field().key.toString() + '-start'\"\n        [items]=\"startTimeOptions()\"\n        bindLabel=\"label\"\n        bindValue=\"value\"\n        [clearable]=\"!hasRequiredValidators()\"\n        [disabled]=\"isDisabled()\"\n        [ngModel]=\"selectedStartTime()\"\n        (ngModelChange)=\"onStartTimeChange($event)\"\n        (blur)=\"onStartTimeBlur()\"\n        [placeholder]=\"'time-field.select-time' | translate\"\n        [searchable]=\"false\">\n        \n        <ng-template ng-option-tmp let-item=\"item\">\n          {{ item.label }}\n          @if (item.used) {\n            <span class=\"used-indicator\"> ({{ 'time-field.used' | translate }})</span>\n          }\n        </ng-template>\n        <ng-template ng-label-tmp let-item=\"item\">\n          {{ item.label }}\n        </ng-template>\n      </ng-select>\n      <span class=\"c-entry-input__addon icon-select-arrow\"></span>\n    </span>\n  </div>\n\n  <!-- End Time Field (only if includeEndTime is true) -->\n  @if (includeEndTime()) {\n    <div class=\"time-field-container time-field-end\">\n      <label class=\"c-entry-text\" [for]=\"field().key.toString() + '-end'\">\n        {{ endTimeLabel() | translate }}\n        @if (hasRequiredValidators()) {\n          <span class=\"c-required\">*</span>\n        }\n      </label>\n      \n      <span class=\"c-entry-input c-entry-input--ng-select\" [class.is-invalid]=\"hasError()\">\n        <ng-select\n          [id]=\"field().key.toString() + '-end'\"\n          [items]=\"endTimeOptions()\"\n          bindLabel=\"label\"\n          bindValue=\"value\"\n          [clearable]=\"true\"\n          [disabled]=\"isDisabled() || !selectedStartTime()\"\n          [ngModel]=\"selectedEndTime()\"\n          (ngModelChange)=\"onEndTimeChange($event)\"\n          (blur)=\"onEndTimeBlur()\"\n          [placeholder]=\"'time-field.select-end-time' | translate\"\n          [searchable]=\"false\">\n          \n          <ng-template ng-option-tmp let-item=\"item\">\n            {{ item.label }}\n            @if (item.used) {\n              <span class=\"used-indicator\"> ({{ 'time-field.used' | translate }})</span>\n            }\n            @if (selectedStartTime() && item.value === selectedStartTime()!) {\n              <span class=\"unavailable-indicator\"> ({{ 'time-field.unavailable' | translate }})</span>\n            }\n          </ng-template>\n          <ng-template ng-label-tmp let-item=\"item\">\n            {{ item.label }}\n          </ng-template>\n        </ng-select>\n        <span class=\"c-entry-input__addon icon-select-arrow\"></span>\n      </span>\n    </div>\n  }\n\n  <!-- Error Messages -->\n  @if (hasError()) {\n    <core-field-errors [errors]=\"errors()\"></core-field-errors>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i5.NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "bindLabel", "bindValue", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "tabFocusOnClearButton", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick", "keyDownFn"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i5.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i5.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "component", type: FieldErrorsComponent, selector: "core-field-errors", inputs: ["errors"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: TimeFieldComponent, isStandalone: true, selector: "core-time-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: true, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, rowData: { classPropertyName: "rowData", publicName: "rowData", isSignal: true, isRequired: false, transformFunction: null }, formValue: { classPropertyName: "formValue", publicName: "formValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", onBlurEvent: "onBlurEvent", onEnterEvent: "onEnterEvent" }, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "<div class=\"c-entry-item\" [class.c-entry-item--inline]=\"field().inline\" [class.time-field-range]=\"includeEndTime()\">\n  <!-- Start Time Field -->\n  <div class=\"time-field-container\">\n    <label class=\"c-entry-text\" [for]=\"field().key.toString() + '-start'\">\n      {{ startTimeLabel() | translate }}\n      @if (hasRequiredValidators()) {\n        <span class=\"c-required\">*</span>\n      }\n    </label>\n    \n    <span class=\"c-entry-input c-entry-input--ng-select\" [class.is-invalid]=\"hasError()\">\n      <ng-select\n        [id]=\"field().key.toString() + '-start'\"\n        [items]=\"startTimeOptions()\"\n        bindLabel=\"label\"\n        bindValue=\"value\"\n        [clearable]=\"!hasRequiredValidators()\"\n        [disabled]=\"isDisabled()\"\n        [ngModel]=\"selectedStartTime()\"\n        (ngModelChange)=\"onStartTimeChange($event)\"\n        (blur)=\"onStartTimeBlur()\"\n        [placeholder]=\"isStartPlaceholderVisible() ? ('time-field.select-time' | translate) : ''\"\n        [searchable]=\"false\">\n        \n        <ng-template ng-option-tmp let-item=\"item\">\n          {{ item.label }}\n          @if (item.used) {\n            <span class=\"used-indicator\"> ({{ 'time-field.used' | translate }})</span>\n          }\n        </ng-template>\n        <ng-template ng-label-tmp let-item=\"item\">\n          {{ item.label }}\n        </ng-template>\n      </ng-select>\n      <span class=\"c-entry-input__addon icon-select-arrow\"></span>\n    </span>\n  </div>\n\n  <!-- End Time Field (only if includeEndTime is true) -->\n  @if (includeEndTime()) {\n    <div class=\"time-field-container time-field-end\">\n      <label class=\"c-entry-text\" [for]=\"field().key.toString() + '-end'\">\n        {{ endTimeLabel() | translate }}\n        @if (hasRequiredValidators()) {\n          <span class=\"c-required\">*</span>\n        }\n      </label>\n      \n      <span class=\"c-entry-input c-entry-input--ng-select\" [class.is-invalid]=\"hasError()\">\n        <ng-select\n          [id]=\"field().key.toString() + '-end'\"\n          [items]=\"endTimeOptions()\"\n          bindLabel=\"label\"\n          bindValue=\"value\"\n          [clearable]=\"true\"\n          [disabled]=\"isDisabled() || !selectedStartTime()\"\n          [ngModel]=\"selectedEndTime()\"\n          (ngModelChange)=\"onEndTimeChange($event)\"\n          (blur)=\"onEndTimeBlur()\"\n          [placeholder]=\"isEndPlaceholderVisible() ? ('time-field.select-end-time' | translate) : ''\"\n          [searchable]=\"false\">\n          \n          <ng-template ng-option-tmp let-item=\"item\">\n            {{ item.label }}\n            @if (item.used) {\n              <span class=\"used-indicator\"> ({{ 'time-field.used' | translate }})</span>\n            }\n            @if (selectedStartTime() && item.value === selectedStartTime()!) {\n              <span class=\"unavailable-indicator\"> ({{ 'time-field.unavailable' | translate }})</span>\n            }\n          </ng-template>\n          <ng-template ng-label-tmp let-item=\"item\">\n            {{ item.label }}\n          </ng-template>\n        </ng-select>\n        <span class=\"c-entry-input__addon icon-select-arrow\"></span>\n      </span>\n    </div>\n  }\n\n  <!-- Error Messages -->\n  @if (hasError()) {\n    <core-field-errors [errors]=\"errors()\"></core-field-errors>\n  }\n</div>\n", styles: [".ng-select .ng-select-container .ng-value-container{flex-wrap:wrap}.c-entry-input--ng-select.is-placeholder ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input input::placeholder{color:var(--_entry-input-placeholder-color);opacity:1}.c-entry-input--ng-select.is-placeholder ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input input{color:var(--_entry-input-placeholder-color)}.c-entry-input--ng-select:not(.is-placeholder) ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input input::placeholder{opacity:0}::ng-deep .ng-select{width:100%!important;display:contents}.c-entry-input--ng-select{position:relative}::ng-deep .ng-dropdown-panel{top:0;right:0}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-value{background-color:var(--form-highlighted-color, var(--color-neutral-300));color:#3f4e6a;border-radius:var(--_entry-input-br);padding:.2em .8em;margin:.2em;border:none;border-radius:4px}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-value .ng-value-icon{border:none;padding-right:.4em;color:#3f4e6a}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items{border:none;min-height:auto;padding:0;position:relative;right:0;margin-top:3em;box-shadow:1em 2.4em 3.4em -2em hsl(var(--color-neutral-900-hsl)/25%);background-color:var(--color-neutral-100)}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{padding:.6em .8em;color:#6a788c;cursor:pointer;transition:background-color .1s ease-out}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{color:var(--color-primary-400)}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{color:var(--color-primary-400);font-weight:500}::ng-deep .ng-dropdown-panel .scrollable-content{background:#f2f5fa}::ng-deep .ng-dropdown-panel-items.scroll-host{background:#f2f5fa;padding:1em;border-radius:var(--_entry-input-br)}::ng-deep app-server-select-field .ng-select:not(.ng-select-filtered):not(.ng-select-opened) .ng-dropdown-panel{opacity:0!important}::ng-deep .c-entry-input--ng-select{--_entry-input-padd-y: .76em}::ng-deep .c-entry-input--ng-select:has(.ng-value-container .ng-value){--_entry-input-padd-y: .35em}::ng-deep .c-entry-input--ng-select:has(.ng-value-container .ng-value) .ng-select .ng-select-container .ng-value-container .ng-input{margin-left:8px}::ng-deep .c-entry-input--ng-select:has(.ng-value-container .ng-value) .ng-select .ng-select-container .ng-value-container .ng-input>input{height:100%}::ng-deep .ng-dropdown-panel-items.scroll-host:has(.ng-select-notfound){background-color:hsl(from hsl(var(--color-context-error-hsl)) h s 94%);color:hsl(from hsl(var(--color-context-error-hsl)) h s 60%)}::ng-deep .ng-dropdown-panel-items.scroll-host:has(.ng-select-loading){background-color:hsl(from hsl(var(--color-alternative-800-hsl)) h s 96%);color:hsl(from hsl(var(--color-alternative-800-hsl)) h 90% 70%)}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container,.ng-select.ng-select-single .ng-select-container .ng-value-container{display:grid}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{height:-webkit-fill-available}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input>input{height:98%}::ng-deep .ng-select.ng-select-single .ng-select-container{overflow:visible;position:relative;cursor:pointer}::ng-deep .ng-select.ng-select-single .ng-select-container:before{content:\"\";position:absolute;left:calc(var(--_entry-input-padd-x) * -1);right:calc(var(--_entry-input-padd-x) * -1 - var(--_entry-input-addon-gap) - var(--_entry-input-addon-icon-fz));top:calc(max(var(--_entry-input-padd-y) * var(--_size-factor, 1),2px)*-1);bottom:calc(max(var(--_entry-input-padd-y) * var(--_size-factor, 1),2px)*-1)}::ng-deep .ng-select .ng-clear-wrapper .ng-clear{position:absolute;top:50%;transform:translateY(-50%)}@media (hover: hover){::ng-deep .ng-select .ng-clear-wrapper:is(:hover,:focus-visible){color:var(--color-hover)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i5.NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "bindLabel", "bindValue", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "tabFocusOnClearButton", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick", "keyDownFn"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i5.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i5.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "component", type: FieldErrorsComponent, selector: "core-field-errors", inputs: ["errors"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TimeFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'core-time-field', standalone: true, imports: [CommonModule, FormsModule, TranslateModule, ReactiveFormsModule, NgSelectModule, FieldErrorsComponent], hostDirectives: [CoreHostDirective], template: "<div class=\"c-entry-item\" [class.c-entry-item--inline]=\"field().inline\" [class.time-field-range]=\"includeEndTime()\">\n  <!-- Start Time Field -->\n  <div class=\"time-field-container\">\n    <label class=\"c-entry-text\" [for]=\"field().key.toString() + '-start'\">\n      {{ startTimeLabel() | translate }}\n      @if (hasRequiredValidators()) {\n        <span class=\"c-required\">*</span>\n      }\n    </label>\n    \n    <span class=\"c-entry-input c-entry-input--ng-select\" [class.is-invalid]=\"hasError()\">\n      <ng-select\n        [id]=\"field().key.toString() + '-start'\"\n        [items]=\"startTimeOptions()\"\n        bindLabel=\"label\"\n        bindValue=\"value\"\n        [clearable]=\"!hasRequiredValidators()\"\n        [disabled]=\"isDisabled()\"\n        [ngModel]=\"selectedStartTime()\"\n        (ngModelChange)=\"onStartTimeChange($event)\"\n        (blur)=\"onStartTimeBlur()\"\n        [placeholder]=\"'time-field.select-time' | translate\"\n        [searchable]=\"false\">\n        \n        <ng-template ng-option-tmp let-item=\"item\">\n          {{ item.label }}\n          @if (item.used) {\n            <span class=\"used-indicator\"> ({{ 'time-field.used' | translate }})</span>\n          }\n        </ng-template>\n        <ng-template ng-label-tmp let-item=\"item\">\n          {{ item.label }}\n        </ng-template>\n      </ng-select>\n      <span class=\"c-entry-input__addon icon-select-arrow\"></span>\n    </span>\n  </div>\n\n  <!-- End Time Field (only if includeEndTime is true) -->\n  @if (includeEndTime()) {\n    <div class=\"time-field-container time-field-end\">\n      <label class=\"c-entry-text\" [for]=\"field().key.toString() + '-end'\">\n        {{ endTimeLabel() | translate }}\n        @if (hasRequiredValidators()) {\n          <span class=\"c-required\">*</span>\n        }\n      </label>\n      \n      <span class=\"c-entry-input c-entry-input--ng-select\" [class.is-invalid]=\"hasError()\">\n        <ng-select\n          [id]=\"field().key.toString() + '-end'\"\n          [items]=\"endTimeOptions()\"\n          bindLabel=\"label\"\n          bindValue=\"value\"\n          [clearable]=\"true\"\n          [disabled]=\"isDisabled() || !selectedStartTime()\"\n          [ngModel]=\"selectedEndTime()\"\n          (ngModelChange)=\"onEndTimeChange($event)\"\n          (blur)=\"onEndTimeBlur()\"\n          [placeholder]=\"'time-field.select-end-time' | translate\"\n          [searchable]=\"false\">\n          \n          <ng-template ng-option-tmp let-item=\"item\">\n            {{ item.label }}\n            @if (item.used) {\n              <span class=\"used-indicator\"> ({{ 'time-field.used' | translate }})</span>\n            }\n            @if (selectedStartTime() && item.value === selectedStartTime()!) {\n              <span class=\"unavailable-indicator\"> ({{ 'time-field.unavailable' | translate }})</span>\n            }\n          </ng-template>\n          <ng-template ng-label-tmp let-item=\"item\">\n            {{ item.label }}\n          </ng-template>\n        </ng-select>\n        <span class=\"c-entry-input__addon icon-select-arrow\"></span>\n      </span>\n    </div>\n  }\n\n  <!-- Error Messages -->\n  @if (hasError()) {\n    <core-field-errors [errors]=\"errors()\"></core-field-errors>\n  }\n</div>\n" }]
+            args: [{ selector: 'core-time-field', standalone: true, imports: [CommonModule, FormsModule, TranslateModule, ReactiveFormsModule, NgSelectModule, FieldErrorsComponent], hostDirectives: [CoreHostDirective], template: "<div class=\"c-entry-item\" [class.c-entry-item--inline]=\"field().inline\" [class.time-field-range]=\"includeEndTime()\">\n  <!-- Start Time Field -->\n  <div class=\"time-field-container\">\n    <label class=\"c-entry-text\" [for]=\"field().key.toString() + '-start'\">\n      {{ startTimeLabel() | translate }}\n      @if (hasRequiredValidators()) {\n        <span class=\"c-required\">*</span>\n      }\n    </label>\n    \n    <span class=\"c-entry-input c-entry-input--ng-select\" [class.is-invalid]=\"hasError()\">\n      <ng-select\n        [id]=\"field().key.toString() + '-start'\"\n        [items]=\"startTimeOptions()\"\n        bindLabel=\"label\"\n        bindValue=\"value\"\n        [clearable]=\"!hasRequiredValidators()\"\n        [disabled]=\"isDisabled()\"\n        [ngModel]=\"selectedStartTime()\"\n        (ngModelChange)=\"onStartTimeChange($event)\"\n        (blur)=\"onStartTimeBlur()\"\n        [placeholder]=\"isStartPlaceholderVisible() ? ('time-field.select-time' | translate) : ''\"\n        [searchable]=\"false\">\n        \n        <ng-template ng-option-tmp let-item=\"item\">\n          {{ item.label }}\n          @if (item.used) {\n            <span class=\"used-indicator\"> ({{ 'time-field.used' | translate }})</span>\n          }\n        </ng-template>\n        <ng-template ng-label-tmp let-item=\"item\">\n          {{ item.label }}\n        </ng-template>\n      </ng-select>\n      <span class=\"c-entry-input__addon icon-select-arrow\"></span>\n    </span>\n  </div>\n\n  <!-- End Time Field (only if includeEndTime is true) -->\n  @if (includeEndTime()) {\n    <div class=\"time-field-container time-field-end\">\n      <label class=\"c-entry-text\" [for]=\"field().key.toString() + '-end'\">\n        {{ endTimeLabel() | translate }}\n        @if (hasRequiredValidators()) {\n          <span class=\"c-required\">*</span>\n        }\n      </label>\n      \n      <span class=\"c-entry-input c-entry-input--ng-select\" [class.is-invalid]=\"hasError()\">\n        <ng-select\n          [id]=\"field().key.toString() + '-end'\"\n          [items]=\"endTimeOptions()\"\n          bindLabel=\"label\"\n          bindValue=\"value\"\n          [clearable]=\"true\"\n          [disabled]=\"isDisabled() || !selectedStartTime()\"\n          [ngModel]=\"selectedEndTime()\"\n          (ngModelChange)=\"onEndTimeChange($event)\"\n          (blur)=\"onEndTimeBlur()\"\n          [placeholder]=\"isEndPlaceholderVisible() ? ('time-field.select-end-time' | translate) : ''\"\n          [searchable]=\"false\">\n          \n          <ng-template ng-option-tmp let-item=\"item\">\n            {{ item.label }}\n            @if (item.used) {\n              <span class=\"used-indicator\"> ({{ 'time-field.used' | translate }})</span>\n            }\n            @if (selectedStartTime() && item.value === selectedStartTime()!) {\n              <span class=\"unavailable-indicator\"> ({{ 'time-field.unavailable' | translate }})</span>\n            }\n          </ng-template>\n          <ng-template ng-label-tmp let-item=\"item\">\n            {{ item.label }}\n          </ng-template>\n        </ng-select>\n        <span class=\"c-entry-input__addon icon-select-arrow\"></span>\n      </span>\n    </div>\n  }\n\n  <!-- Error Messages -->\n  @if (hasError()) {\n    <core-field-errors [errors]=\"errors()\"></core-field-errors>\n  }\n</div>\n", styles: [".ng-select .ng-select-container .ng-value-container{flex-wrap:wrap}.c-entry-input--ng-select.is-placeholder ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input input::placeholder{color:var(--_entry-input-placeholder-color);opacity:1}.c-entry-input--ng-select.is-placeholder ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input input{color:var(--_entry-input-placeholder-color)}.c-entry-input--ng-select:not(.is-placeholder) ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input input::placeholder{opacity:0}::ng-deep .ng-select{width:100%!important;display:contents}.c-entry-input--ng-select{position:relative}::ng-deep .ng-dropdown-panel{top:0;right:0}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-value{background-color:var(--form-highlighted-color, var(--color-neutral-300));color:#3f4e6a;border-radius:var(--_entry-input-br);padding:.2em .8em;margin:.2em;border:none;border-radius:4px}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-value .ng-value-icon{border:none;padding-right:.4em;color:#3f4e6a}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items{border:none;min-height:auto;padding:0;position:relative;right:0;margin-top:3em;box-shadow:1em 2.4em 3.4em -2em hsl(var(--color-neutral-900-hsl)/25%);background-color:var(--color-neutral-100)}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{padding:.6em .8em;color:#6a788c;cursor:pointer;transition:background-color .1s ease-out}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{color:var(--color-primary-400)}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{color:var(--color-primary-400);font-weight:500}::ng-deep .ng-dropdown-panel .scrollable-content{background:#f2f5fa}::ng-deep .ng-dropdown-panel-items.scroll-host{background:#f2f5fa;padding:1em;border-radius:var(--_entry-input-br)}::ng-deep app-server-select-field .ng-select:not(.ng-select-filtered):not(.ng-select-opened) .ng-dropdown-panel{opacity:0!important}::ng-deep .c-entry-input--ng-select{--_entry-input-padd-y: .76em}::ng-deep .c-entry-input--ng-select:has(.ng-value-container .ng-value){--_entry-input-padd-y: .35em}::ng-deep .c-entry-input--ng-select:has(.ng-value-container .ng-value) .ng-select .ng-select-container .ng-value-container .ng-input{margin-left:8px}::ng-deep .c-entry-input--ng-select:has(.ng-value-container .ng-value) .ng-select .ng-select-container .ng-value-container .ng-input>input{height:100%}::ng-deep .ng-dropdown-panel-items.scroll-host:has(.ng-select-notfound){background-color:hsl(from hsl(var(--color-context-error-hsl)) h s 94%);color:hsl(from hsl(var(--color-context-error-hsl)) h s 60%)}::ng-deep .ng-dropdown-panel-items.scroll-host:has(.ng-select-loading){background-color:hsl(from hsl(var(--color-alternative-800-hsl)) h s 96%);color:hsl(from hsl(var(--color-alternative-800-hsl)) h 90% 70%)}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container,.ng-select.ng-select-single .ng-select-container .ng-value-container{display:grid}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{height:-webkit-fill-available}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input>input{height:98%}::ng-deep .ng-select.ng-select-single .ng-select-container{overflow:visible;position:relative;cursor:pointer}::ng-deep .ng-select.ng-select-single .ng-select-container:before{content:\"\";position:absolute;left:calc(var(--_entry-input-padd-x) * -1);right:calc(var(--_entry-input-padd-x) * -1 - var(--_entry-input-addon-gap) - var(--_entry-input-addon-icon-fz));top:calc(max(var(--_entry-input-padd-y) * var(--_size-factor, 1),2px)*-1);bottom:calc(max(var(--_entry-input-padd-y) * var(--_size-factor, 1),2px)*-1)}::ng-deep .ng-select .ng-clear-wrapper .ng-clear{position:absolute;top:50%;transform:translateY(-50%)}@media (hover: hover){::ng-deep .ng-select .ng-clear-wrapper:is(:hover,:focus-visible){color:var(--color-hover)}}\n"] }]
         }], ctorParameters: () => [] });
 
 class DynamicFieldDirective {
@@ -5074,12 +5262,27 @@ class ModelApiService {
             if (!this.moreDataSubjects.has(config.key)) {
                 this.moreDataSubjects.set(config.key, new BehaviorSubject([]));
             }
-            return this.apiService.fetchData(config.endpoint).pipe(map((res) => {
+            const apiCall = config.isSingleObject
+                ? this.apiService.getObj(config.endpoint, config.id)
+                : this.apiService.fetchData(config.endpoint);
+            return apiCall.pipe(map((res) => {
                 if (!res || !res.data) {
-                    return { key: config.key, data: [] };
+                    return { key: config.key, data: config.isSingleObject ? null : [] };
+                }
+                if (config.isSingleObject) {
+                    const modelInstance = new config.model();
+                    if (modelInstance.fromJSON && typeof modelInstance.fromJSON === 'function') {
+                        modelInstance.fromJSON(res.data);
+                    }
+                    return { key: config.key, data: modelInstance };
                 }
                 let dataArray = [];
-                if (typeof res.data === 'object' && 'data' in res.data && Array.isArray(res.data.data)) {
+                if (config.customArrayKey && typeof res.data === 'object' && res.data[config.customArrayKey]) {
+                    if (Array.isArray(res.data[config.customArrayKey])) {
+                        dataArray = res.data[config.customArrayKey];
+                    }
+                }
+                else if (typeof res.data === 'object' && 'data' in res.data && Array.isArray(res.data.data)) {
                     dataArray = res.data.data;
                 }
                 else if (Array.isArray(res.data)) {
@@ -5101,7 +5304,7 @@ class ModelApiService {
                     inBottom: true,
                     duration: 5000
                 });
-                return of({ key: config.key, data: [] });
+                return of({ key: config.key, data: config.isSingleObject ? null : [] });
             }));
         });
         forkJoin(observables).subscribe({
@@ -5109,7 +5312,10 @@ class ModelApiService {
                 results.forEach(result => {
                     const subject = this.moreDataSubjects.get(result.key);
                     if (subject) {
-                        subject.next(result.data);
+                        const dataToStore = result.data === null
+                            ? []
+                            : (Array.isArray(result.data) ? result.data : [result.data]);
+                        subject.next(dataToStore);
                     }
                 });
             },
@@ -5126,6 +5332,10 @@ class ModelApiService {
     getMoreData(key) {
         return this.moreDataSubjects.has(key) ? [...this.moreDataSubjects.get(key).value] : [];
     }
+    getMoreDataSingleObject(key) {
+        const data = this.getMoreData(key);
+        return data.length > 0 ? data[0] : null;
+    }
     getMoreDataObservable(key) {
         const subject = this.moreDataSubjects.get(key);
         if (!subject) {
@@ -5133,6 +5343,9 @@ class ModelApiService {
         }
         return this.moreDataSubjects.get(key).asObservable();
     }
+    getMoreDataSingleObjectObservable(key) {
+        return this.getMoreDataObservable(key).pipe(map(data => data.length > 0 ? data[0] : null));
+    }
     callApiWithHeaders(method, args, headers) {
         return headers ? method(...args, headers) : method(...args);
     }
@@ -10269,12 +10482,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.11.25',
+    full: '2.11.27',
     major: 2,
     minor: 11,
-    patch: 25,
-    timestamp: '2025-08-28T15:07:48.558Z',
-    buildDate: '28/8/2025'
+    patch: 27,
+    timestamp: '2025-08-29T11:47:03.838Z',
+    buildDate: '29/8/2025'
 };
 
 class MainNavComponent {