@solcre-org/core-ui 2.11.26 → 2.11.28

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

@@ -11,7 +11,7 @@ import { NgSelectModule, NgSelectComponent } from '@ng-select/ng-select';
 import { AuthService, ApiService } from '@solcre-org/core';
 import { map, BehaviorSubject, Subject, throttleTime, takeUntil, debounceTime, distinctUntilChanged, tap, switchMap, of, catchError, finalize, throwError, Observable, forkJoin, zip, timeout, Subscription } from 'rxjs';
 import * as i4 from '@angular/router';
-import { RouterModule, Router, NavigationEnd } from '@angular/router';
+import { RouterModule, Router, NavigationEnd, NavigationStart } from '@angular/router';
 import { DomSanitizer } from '@angular/platform-browser';
 import { tap as tap$1, filter, catchError as catchError$1, map as map$1 } from 'rxjs/operators';
 import * as i1$1 from '@angular/common/http';
@@ -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';
@@ -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);
     }
@@ -7373,6 +7586,7 @@ class GenericTableComponent {
     tableActionService = inject((TableActionService));
     modelApiService = inject((ModelApiService));
     loaderService = inject(LoaderService);
+    router = inject(Router);
     confirmationDialogService = inject(ConfirmationDialogService);
     permissionService = inject(PermissionWrapperService);
     dropdownService = inject(DropdownService);
@@ -7516,16 +7730,31 @@ class GenericTableComponent {
     inlineEditSave = output();
     inlineEditModeChanged = output();
     inlineEditValidationError = output();
+    handlePopstate = () => {
+        if (this.tableActionService.getIsModalOpen()) {
+            this.tableActionService.closeModal();
+        }
+    };
+    handleFilterRequested = () => {
+        this.showFiltersPopup();
+    };
+    handleCreateRequested = () => {
+        this.triggerAction(TableAction.CREATE);
+    };
+    handleGlobalActionTriggered = (event) => {
+        this.triggerGlobalAction(event.detail);
+    };
+    onBeforeUnload(event) {
+        if (this.tableActionService.getIsModalOpen()) {
+            console.log('🔄 Página descargándose, cerrando modal automáticamente');
+            this.tableActionService.closeModal();
+        }
+    }
     constructor() {
-        window.addEventListener('filterRequested', () => {
-            this.showFiltersPopup();
-        });
-        window.addEventListener('createRequested', () => {
-            this.triggerAction(TableAction.CREATE);
-        });
-        window.addEventListener('globalActionTriggered', ((event) => {
-            this.triggerGlobalAction(event.detail);
-        }));
+        window.addEventListener('filterRequested', this.handleFilterRequested);
+        window.addEventListener('createRequested', this.handleCreateRequested);
+        window.addEventListener('globalActionTriggered', this.handleGlobalActionTriggered);
+        window.addEventListener('popstate', this.handlePopstate);
         effect(() => {
             this.updateHeaderService();
         });
@@ -7693,6 +7922,13 @@ class GenericTableComponent {
             onInlineEditValidationError: (event) => this.inlineEditValidationError.emit(event),
             getDisplayedData: () => this.displayedData()
         });
+        this.subscriptions.push(this.router.events
+            .pipe(filter(event => event instanceof NavigationStart || event instanceof NavigationEnd))
+            .subscribe((event) => {
+            if (this.tableActionService.getIsModalOpen()) {
+                this.tableActionService.closeModal();
+            }
+        }));
         if (this.dataInput()) {
             this.processDataInput(this.dataInput());
         }
@@ -8447,15 +8683,10 @@ class GenericTableComponent {
         this.loadingStates.moreData.forEach(key => {
             this.loaderService.hideLoader(this.MORE_DATA_LOADER_PREFIX + key);
         });
-        window.removeEventListener('filterRequested', () => {
-            this.showFiltersPopup();
-        });
-        window.removeEventListener('createRequested', () => {
-            this.triggerAction(TableAction.CREATE);
-        });
-        window.removeEventListener('globalActionTriggered', ((event) => {
-            this.triggerGlobalAction(event.detail);
-        }));
+        window.removeEventListener('filterRequested', this.handleFilterRequested);
+        window.removeEventListener('createRequested', this.handleCreateRequested);
+        window.removeEventListener('globalActionTriggered', this.handleGlobalActionTriggered);
+        window.removeEventListener('popstate', this.handlePopstate);
         if (!this.inModal()) {
             this.headerService.clearHeaderData();
         }
@@ -8722,7 +8953,7 @@ class GenericTableComponent {
         this.tableDataService.updateRowData(rowId, updatedFields, updateFunction);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: GenericTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: GenericTableComponent, isStandalone: true, selector: "core-generic-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, modalFields: { classPropertyName: "modalFields", publicName: "modalFields", isSignal: true, isRequired: false, transformFunction: null }, modalTabs: { classPropertyName: "modalTabs", publicName: "modalTabs", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: true, transformFunction: null }, customActions: { classPropertyName: "customActions", publicName: "customActions", isSignal: true, isRequired: false, transformFunction: null }, globalActions: { classPropertyName: "globalActions", publicName: "globalActions", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, showFilter: { classPropertyName: "showFilter", publicName: "showFilter", isSignal: true, isRequired: false, transformFunction: null }, showSelection: { classPropertyName: "showSelection", publicName: "showSelection", isSignal: true, isRequired: false, transformFunction: null }, showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: true, isRequired: false, transformFunction: null }, showCreateButton: { classPropertyName: "showCreateButton", publicName: "showCreateButton", isSignal: true, isRequired: false, transformFunction: null }, filterButtonConfig: { classPropertyName: "filterButtonConfig", publicName: "filterButtonConfig", isSignal: true, isRequired: false, transformFunction: null }, createButtonConfig: { classPropertyName: "createButtonConfig", publicName: "createButtonConfig", isSignal: true, isRequired: false, transformFunction: null }, dataInput: { classPropertyName: "dataInput", publicName: "dataInput", isSignal: true, isRequired: false, transformFunction: null }, customFilters: { classPropertyName: "customFilters", publicName: "customFilters", isSignal: true, isRequired: false, transformFunction: null }, enablePagination: { classPropertyName: "enablePagination", publicName: "enablePagination", isSignal: true, isRequired: false, transformFunction: null }, modelFactory: { classPropertyName: "modelFactory", publicName: "modelFactory", isSignal: true, isRequired: false, transformFunction: null }, endpoint: { classPropertyName: "endpoint", publicName: "endpoint", isSignal: true, isRequired: false, transformFunction: null }, customParams: { classPropertyName: "customParams", publicName: "customParams", isSignal: true, isRequired: false, transformFunction: null }, customArrayKey: { classPropertyName: "customArrayKey", publicName: "customArrayKey", isSignal: true, isRequired: false, transformFunction: null }, listTitle: { classPropertyName: "listTitle", publicName: "listTitle", isSignal: true, isRequired: false, transformFunction: null }, moreData: { classPropertyName: "moreData", publicName: "moreData", isSignal: true, isRequired: false, transformFunction: null }, inModal: { classPropertyName: "inModal", publicName: "inModal", isSignal: true, isRequired: false, transformFunction: null }, expansionConfig: { classPropertyName: "expansionConfig", publicName: "expansionConfig", isSignal: true, isRequired: false, transformFunction: null }, fileUploadConfig: { classPropertyName: "fileUploadConfig", publicName: "fileUploadConfig", isSignal: true, isRequired: false, transformFunction: null }, rowStyleConfigs: { classPropertyName: "rowStyleConfigs", publicName: "rowStyleConfigs", isSignal: true, isRequired: false, transformFunction: null }, columnDisabledConfigs: { classPropertyName: "columnDisabledConfigs", publicName: "columnDisabledConfigs", isSignal: true, isRequired: false, transformFunction: null }, rowVisibilityConfigs: { classPropertyName: "rowVisibilityConfigs", publicName: "rowVisibilityConfigs", isSignal: true, isRequired: false, transformFunction: null }, headerOrder: { classPropertyName: "headerOrder", publicName: "headerOrder", isSignal: true, isRequired: false, transformFunction: null }, showActiveFilters: { classPropertyName: "showActiveFilters", publicName: "showActiveFilters", isSignal: true, isRequired: false, transformFunction: null }, activeFiltersConfig: { classPropertyName: "activeFiltersConfig", publicName: "activeFiltersConfig", isSignal: true, isRequired: false, transformFunction: null }, customEdit: { classPropertyName: "customEdit", publicName: "customEdit", isSignal: true, isRequired: false, transformFunction: null }, customDelete: { classPropertyName: "customDelete", publicName: "customDelete", isSignal: true, isRequired: false, transformFunction: null }, customView: { classPropertyName: "customView", publicName: "customView", isSignal: true, isRequired: false, transformFunction: null }, customSave: { classPropertyName: "customSave", publicName: "customSave", isSignal: true, isRequired: false, transformFunction: null }, useCustomSave: { classPropertyName: "useCustomSave", publicName: "useCustomSave", isSignal: true, isRequired: false, transformFunction: null }, onApiError: { classPropertyName: "onApiError", publicName: "onApiError", isSignal: true, isRequired: false, transformFunction: null }, inlineEditConfig: { classPropertyName: "inlineEditConfig", publicName: "inlineEditConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionTriggered: "actionTriggered", selectionChanged: "selectionChanged", dataCreated: "dataCreated", dataUpdated: "dataUpdated", dataDeleted: "dataDeleted", onMoreDataLoaded: "onMoreDataLoaded", globalActionTriggered: "globalActionTriggered", modalData: "modalData", beforeSave: "beforeSave", onFilterChange: "onFilterChange", onClearFilters: "onClearFilters", activeFilterRemoved: "activeFilterRemoved", activeFiltersCleared: "activeFiltersCleared", inlineEditSave: "inlineEditSave", inlineEditModeChanged: "inlineEditModeChanged", inlineEditValidationError: "inlineEditValidationError" }, host: { listeners: { "document:click": "closeSubmenu()" } }, providers: [TableDataService, FilterService, PaginationService, ModelApiService, InlineEditService], viewQueries: [{ propertyName: "sentinel", first: true, predicate: ["sentinel"], descendants: true }, { propertyName: "dropdownTrigger", first: true, predicate: ["dropdownTrigger"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "@if (showActiveFilters()) {\n  <core-active-filters\n    [activeFilters]=\"currentActiveFilters()\"\n    [config]=\"activeFiltersConfig()\"\n    (onFilterRemove)=\"onActiveFilterRemove($event)\"\n    (onClearAll)=\"onActiveFiltersClear()\">\n  </core-active-filters>\n}\n\n<div class=\"c-table\" [class.in-modal]=\"inModal()\" [class.inline-edit-mode]=\"inlineEditService.isInlineEditMode()\">\n  <table>\n    <thead>\n      <tr>\n        @if (showSelection()) {\n        <!-- Todo: Tabla con row selection -->\n        <th class=\"select-column\">\n          <input type=\"checkbox\" [checked]=\"isAllSelected()\" (change)=\"masterToggle()\" />\n        </th>\n        }\n        @for (column of columns(); track $index) {\n        <th [ngClass]=\"column.align ? 'u-align-' + column.align : ''\">\n          @if (column.sortable !== false) {\n          <!-- \u2705 Solcre: Agregado [title] din\u00E1mico y capacidad de volver al estado sin selecci\u00F3n -->\n          <button class=\"c-table-order\" tabindex=\"-1\"\n            [class.is-asc]=\"currentSortColumn() === column.key && currentSortDirection() === 'asc'\"\n            [class.is-desc]=\"currentSortColumn() === column.key && currentSortDirection() === 'desc'\"\n            [title]=\"getSortTitle(column) | translate\" (click)=\"sortData(column)\">\n            {{ column.label | translate }}\n            <span class=\"c-table-order__controls\">\n              <span class=\"c-table-order__arrow--desc icon-arrow-up\"></span>\n              <span class=\"c-table-order__arrow--asc icon-arrow-down\"></span>\n            </span>\n          </button>\n          <!-- <button \n                class=\"c-table__order\" \n                [class.is-asc]=\"currentSortColumn() === column.key && currentSortDirection() === 'asc'\" \n                [class.is-desc]=\"currentSortColumn() === column.key && currentSortDirection() === 'desc'\"\n                (click)=\"sortData(column)\">\n                {{ column.label | translate }}\n                <span class=\"icon-order-arrow\"></span>\n              </button> -->\n          } @else {\n          {{ column.label | translate }}\n          }\n        </th>\n        }\n        @if (showActions() && (actions().length > 0 || customActions().length > 0)) {\n        <th class=\"u-align-right\">{{ 'table.actions' | translate }}</th>\n        }\n      </tr>\n    </thead>\n    <tbody>\n      @for (row of displayedData(); track row.getId()) {\n      <tr [ngClass]=\"getRowClasses(row)\" \n          [class.is-editing-inline]=\"isRowInEditMode(row.getId())\"\n          [class.is-disabled]=\"isRowDisabled(row)\">\n        @if (showSelection()) {\n        <!-- Todo: Tabla con row selection -->\n        <td class=\"select-column\">\n          <input type=\"checkbox\" [checked]=\"isRowSelected(row)\" (change)=\"toggleRow(row)\" />\n        </td>\n        }\n        @for (column of columns(); track $index) {\n        <td [attr.data-label]=\"column.label | translate\" \n            [ngClass]=\"[\n              column.align ? 'u-align-' + column.align : '',\n              getCellDisabledClasses(row, column)\n            ]\" \n            [class.is-editing]=\"isColumnEditable(column, row)\"\n            [class.is-column-disabled]=\"isColumnDisabledForRow(row, column)\">\n          @if (column.template) {\n          <!-- Todo: Ver qu\u00E9 es esto -->\n            <ng-container *ngTemplateOutlet=\"column.template; context: { $implicit: row, column: column }\"></ng-container>\n          } @else if (isColumnEditable(column, row)) {\n            <!-- !Solcre: Modo de edici\u00F3n en l\u00EDnea usando DynamicField -->\n            <div class=\"c-table__inline-edit\">\n              <strong class=\"c-table__mobile-heading\">{{ column.label | translate }}:</strong>\n              <div\n                coreDynamicField\n                [field]=\"getInlineEditableConfigWithState(row, column)!\"\n                [value]=\"getEditingValue(row, column)\"\n                [mode]=\"ModalMode.EDIT\"\n                [errors]=\"getCellErrors(row, column)\"\n                [rowData]=\"row\"\n                (valueChange)=\"onCellValueChange(row, column, $event)\"\n                (onBlurEvent)=\"onCellBlur(row, column)\"\n                (onEnterEvent)=\"onCellEnter(row, column)\"\n              ></div>\n            </div>\n          } @else {\n            <div class=\"c-table__content\">\n              <strong class=\"c-table__mobile-heading\">{{ column.label | translate }}:</strong> {{ getFormattedValue(row,\n              column) }}\n            </div>\n          }\n        </td>\n        }\n\n        <!-- Actions-->\n\n        @if (showActions() && (actions().length > 0 || customActions().length > 0 || expansionConfig()?.enabled)) {\n\n        <td class=\"u-align-right\">\n          <div class=\"c-table__actions\">\n\n            @for (actionConfig of regularDefaultActions(); track actionConfig.action) {\n              @if (hasPermission(actionConfig)) {\n                @if (actionConfig.action === TableAction.VIEW || actionConfig.action === TableAction.EDIT ||\n                actionConfig.action === TableAction.DELETE) {\n                  <core-generic-button [config]=\"getActionButtonConfig(actionConfig.action, actionConfig)\"\n                    (buttonClick)=\"onButtonClick($event, actionConfig.action, row)\">\n                  </core-generic-button>\n                }\n              }\n            }\n            @for (customAction of getVisibleCustomActions(row, false); track customAction.label || $index) {\n              @if (hasPermission(customAction)) {\n                <core-generic-button [config]=\"getCustomActionButtonConfigForRow(customAction, row)\"\n                  (buttonClick)=\"onButtonClick($event, customAction, row)\">\n                </core-generic-button>\n              }\n            }\n\n            @if (hasExtraActionsForRow(row)) {\n              <core-generic-button [config]=\"getMoreActionsButtonConfig(row.getId())\" [data]=\"row\"\n                (buttonClick)=\"onMoreActionsClick($event, row.getId())\" #dropdownTrigger>\n              </core-generic-button>\n              <core-dropdown [rowId]=\"row.getId()\" [extraDefaultActions]=\"extraDefaultActions()\"\n                [extraCustomActions]=\"getVisibleCustomActions(row, true)\" [row]=\"row\"\n                [triggerElementId]=\"'dropdown-trigger-' + row.getId()\"\n                (actionTriggered)=\"triggerAction($event.action, $event.row)\"\n                (customActionTriggered)=\"triggerCustomAction($event.action, $event.row)\" #dropdown>\n              </core-dropdown>\n            }\n\n            @if (expansionConfig()?.enabled) {\n              <!-- \u2705 Solcre: Celda dedicada para expansi\u00F3n en su posici\u00F3n correcta -->\n              <core-generic-button [config]=\"getExpandButtonConfig(row)\" (buttonClick)=\"onExpandButtonClick($event, row)\">\n              </core-generic-button>\n            }\n\n          </div> <!-- .c-table__actions -->\n        </td> <!-- td parent of .c-table__actions -->\n        } <!-- @if (showActions() -->\n\n\n      </tr>\n      @if (expansionConfig()?.enabled && isRowExpanded(row)) {\n        <!-- Todo: Ver que es esto -->\n        <tr class=\"expansion-row\" [ngClass]=\"getRowClasses(row)\">\n          <td [attr.colspan]=\"displayedColumns().length\" class=\"expansion-content\">\n            <ng-container *ngTemplateOutlet=\"expansionConfig()!.template; context: { $implicit: row }\">\n            </ng-container>\n          </td>\n        </tr>\n      }\n      } @empty {\n        <tr>\n          <!-- Todo: Estilo .no-data -->\n          <td [attr.colspan]=\"displayedColumns().length\">\n            <p class=\"c-placeholder\">{{ 'table.noData' | translate }}</p>\n          </td>\n        </tr>\n      }\n    </tbody>\n  </table>\n</div> <!-- .c-table -->\n\n<!-- Todo: Todo lo que viene dsp de la tabla -->\n\n@if (!enablePagination()) {\n<!-- Todo: Ver qu\u00E9 onda esto -->\n<div #sentinel class=\"sentinel\"></div>\n}\n\n@if (enablePagination()) {\n<!-- Todo: Ver qu\u00E9 onda esto -->\n<core-generic-pagination [tableId]=\"tableId\"></core-generic-pagination>\n}\n\n<core-generic-modal [isOpen]=\"tableActionService.getIsModalOpen()\" [mode]=\"tableActionService.getModalMode()\"\n  [data]=\"tableActionService.getModalData()\" [fields]=\"hasTabs() ? [] : tableActionService.getModalFieldsToShow()\"\n  [tabs]=\"hasTabs() ? modalTabs() : []\" [title]=\"tableActionService.getModalTitle()\" [modelFactory]=\"modelFactory() || null\"\n  (save)=\"onModalSave($event)\" (close)=\"tableActionService.closeModal()\" (modalData)=\"onModalData($event)\">\n</core-generic-modal>\n\n<core-filter-modal [isOpen]=\"isFilterModalOpen()\" [filters]=\"customFilters()\" [currentFilterValues]=\"currentFilterValues()\" (close)=\"closeFiltersPopup()\"\n  (filterChange)=\"handleFilterChange($event)\" (globalFilterChange)=\"applyGlobalFilter($event)\"\n  (clearFilters)=\"handleClearFilters()\">\n</core-filter-modal>", styles: [".in-modal .c-table thead th:last-child,.c-table tbody td:last-child{text-align:left}.c-table__order-btn--asc{transform:rotate(180deg)}.c-table__order-btn--desc{transform:rotate(0)}.c-table tr.is-editing-inline{background-color:#fff3cd;border-left:3px solid #ffc107}.c-table tr.is-editing-inline td{background-color:#fff3cd}.c-table tr.is-editing-inline:hover td{background-color:#ffecb5}.expansion-row .expansion-content{padding:16px;background-color:#f8f9fa;border-top:1px solid #dee2e6}.expansion-row td{border-bottom:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "component", type: GenericModalComponent, selector: "core-generic-modal", inputs: ["isOpen", "mode", "data", "fields", "tabs", "title", "isMultiple", "customTemplate", "customViewTemplate", "buttonConfig", "modelFactory", "errors", "validators"], outputs: ["save", "close", "modalData"] }, { kind: "component", type: GenericPaginationComponent, selector: "core-generic-pagination", inputs: ["tableId", "isServerSide"] }, { kind: "component", type: DropdownComponent, selector: "core-dropdown", inputs: ["rowId", "triggerElementId", "extraDefaultActions", "extraCustomActions", "row"], outputs: ["actionTriggered", "customActionTriggered"] }, { kind: "component", type: FilterModalComponent, selector: "core-filter-modal", inputs: ["isOpen", "filters", "currentFilterValues"], outputs: ["close", "filterChange", "clearFilters", "globalFilterChange"] }, { kind: "component", type: GenericButtonComponent, selector: "core-generic-button", inputs: ["config", "data"], outputs: ["buttonClick"] }, { kind: "directive", type: DynamicFieldDirective, selector: "[coreDynamicField]", inputs: ["field", "value", "mode", "errors", "rowData", "formValue"], outputs: ["valueChange", "onBlurEvent", "onEnterEvent", "selectionChange"] }, { kind: "component", type: ActiveFiltersComponent, selector: "core-active-filters", inputs: ["activeFilters", "config"], outputs: ["onFilterRemove", "onClearAll"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: GenericTableComponent, isStandalone: true, selector: "core-generic-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, modalFields: { classPropertyName: "modalFields", publicName: "modalFields", isSignal: true, isRequired: false, transformFunction: null }, modalTabs: { classPropertyName: "modalTabs", publicName: "modalTabs", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: true, transformFunction: null }, customActions: { classPropertyName: "customActions", publicName: "customActions", isSignal: true, isRequired: false, transformFunction: null }, globalActions: { classPropertyName: "globalActions", publicName: "globalActions", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, showFilter: { classPropertyName: "showFilter", publicName: "showFilter", isSignal: true, isRequired: false, transformFunction: null }, showSelection: { classPropertyName: "showSelection", publicName: "showSelection", isSignal: true, isRequired: false, transformFunction: null }, showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: true, isRequired: false, transformFunction: null }, showCreateButton: { classPropertyName: "showCreateButton", publicName: "showCreateButton", isSignal: true, isRequired: false, transformFunction: null }, filterButtonConfig: { classPropertyName: "filterButtonConfig", publicName: "filterButtonConfig", isSignal: true, isRequired: false, transformFunction: null }, createButtonConfig: { classPropertyName: "createButtonConfig", publicName: "createButtonConfig", isSignal: true, isRequired: false, transformFunction: null }, dataInput: { classPropertyName: "dataInput", publicName: "dataInput", isSignal: true, isRequired: false, transformFunction: null }, customFilters: { classPropertyName: "customFilters", publicName: "customFilters", isSignal: true, isRequired: false, transformFunction: null }, enablePagination: { classPropertyName: "enablePagination", publicName: "enablePagination", isSignal: true, isRequired: false, transformFunction: null }, modelFactory: { classPropertyName: "modelFactory", publicName: "modelFactory", isSignal: true, isRequired: false, transformFunction: null }, endpoint: { classPropertyName: "endpoint", publicName: "endpoint", isSignal: true, isRequired: false, transformFunction: null }, customParams: { classPropertyName: "customParams", publicName: "customParams", isSignal: true, isRequired: false, transformFunction: null }, customArrayKey: { classPropertyName: "customArrayKey", publicName: "customArrayKey", isSignal: true, isRequired: false, transformFunction: null }, listTitle: { classPropertyName: "listTitle", publicName: "listTitle", isSignal: true, isRequired: false, transformFunction: null }, moreData: { classPropertyName: "moreData", publicName: "moreData", isSignal: true, isRequired: false, transformFunction: null }, inModal: { classPropertyName: "inModal", publicName: "inModal", isSignal: true, isRequired: false, transformFunction: null }, expansionConfig: { classPropertyName: "expansionConfig", publicName: "expansionConfig", isSignal: true, isRequired: false, transformFunction: null }, fileUploadConfig: { classPropertyName: "fileUploadConfig", publicName: "fileUploadConfig", isSignal: true, isRequired: false, transformFunction: null }, rowStyleConfigs: { classPropertyName: "rowStyleConfigs", publicName: "rowStyleConfigs", isSignal: true, isRequired: false, transformFunction: null }, columnDisabledConfigs: { classPropertyName: "columnDisabledConfigs", publicName: "columnDisabledConfigs", isSignal: true, isRequired: false, transformFunction: null }, rowVisibilityConfigs: { classPropertyName: "rowVisibilityConfigs", publicName: "rowVisibilityConfigs", isSignal: true, isRequired: false, transformFunction: null }, headerOrder: { classPropertyName: "headerOrder", publicName: "headerOrder", isSignal: true, isRequired: false, transformFunction: null }, showActiveFilters: { classPropertyName: "showActiveFilters", publicName: "showActiveFilters", isSignal: true, isRequired: false, transformFunction: null }, activeFiltersConfig: { classPropertyName: "activeFiltersConfig", publicName: "activeFiltersConfig", isSignal: true, isRequired: false, transformFunction: null }, customEdit: { classPropertyName: "customEdit", publicName: "customEdit", isSignal: true, isRequired: false, transformFunction: null }, customDelete: { classPropertyName: "customDelete", publicName: "customDelete", isSignal: true, isRequired: false, transformFunction: null }, customView: { classPropertyName: "customView", publicName: "customView", isSignal: true, isRequired: false, transformFunction: null }, customSave: { classPropertyName: "customSave", publicName: "customSave", isSignal: true, isRequired: false, transformFunction: null }, useCustomSave: { classPropertyName: "useCustomSave", publicName: "useCustomSave", isSignal: true, isRequired: false, transformFunction: null }, onApiError: { classPropertyName: "onApiError", publicName: "onApiError", isSignal: true, isRequired: false, transformFunction: null }, inlineEditConfig: { classPropertyName: "inlineEditConfig", publicName: "inlineEditConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionTriggered: "actionTriggered", selectionChanged: "selectionChanged", dataCreated: "dataCreated", dataUpdated: "dataUpdated", dataDeleted: "dataDeleted", onMoreDataLoaded: "onMoreDataLoaded", globalActionTriggered: "globalActionTriggered", modalData: "modalData", beforeSave: "beforeSave", onFilterChange: "onFilterChange", onClearFilters: "onClearFilters", activeFilterRemoved: "activeFilterRemoved", activeFiltersCleared: "activeFiltersCleared", inlineEditSave: "inlineEditSave", inlineEditModeChanged: "inlineEditModeChanged", inlineEditValidationError: "inlineEditValidationError" }, host: { listeners: { "window:beforeunload": "onBeforeUnload($event)", "document:click": "closeSubmenu()" } }, providers: [TableDataService, FilterService, PaginationService, ModelApiService, InlineEditService], viewQueries: [{ propertyName: "sentinel", first: true, predicate: ["sentinel"], descendants: true }, { propertyName: "dropdownTrigger", first: true, predicate: ["dropdownTrigger"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "@if (showActiveFilters()) {\n  <core-active-filters\n    [activeFilters]=\"currentActiveFilters()\"\n    [config]=\"activeFiltersConfig()\"\n    (onFilterRemove)=\"onActiveFilterRemove($event)\"\n    (onClearAll)=\"onActiveFiltersClear()\">\n  </core-active-filters>\n}\n\n<div class=\"c-table\" [class.in-modal]=\"inModal()\" [class.inline-edit-mode]=\"inlineEditService.isInlineEditMode()\">\n  <table>\n    <thead>\n      <tr>\n        @if (showSelection()) {\n        <!-- Todo: Tabla con row selection -->\n        <th class=\"select-column\">\n          <input type=\"checkbox\" [checked]=\"isAllSelected()\" (change)=\"masterToggle()\" />\n        </th>\n        }\n        @for (column of columns(); track $index) {\n        <th [ngClass]=\"column.align ? 'u-align-' + column.align : ''\">\n          @if (column.sortable !== false) {\n          <!-- \u2705 Solcre: Agregado [title] din\u00E1mico y capacidad de volver al estado sin selecci\u00F3n -->\n          <button class=\"c-table-order\" tabindex=\"-1\"\n            [class.is-asc]=\"currentSortColumn() === column.key && currentSortDirection() === 'asc'\"\n            [class.is-desc]=\"currentSortColumn() === column.key && currentSortDirection() === 'desc'\"\n            [title]=\"getSortTitle(column) | translate\" (click)=\"sortData(column)\">\n            {{ column.label | translate }}\n            <span class=\"c-table-order__controls\">\n              <span class=\"c-table-order__arrow--desc icon-arrow-up\"></span>\n              <span class=\"c-table-order__arrow--asc icon-arrow-down\"></span>\n            </span>\n          </button>\n          <!-- <button \n                class=\"c-table__order\" \n                [class.is-asc]=\"currentSortColumn() === column.key && currentSortDirection() === 'asc'\" \n                [class.is-desc]=\"currentSortColumn() === column.key && currentSortDirection() === 'desc'\"\n                (click)=\"sortData(column)\">\n                {{ column.label | translate }}\n                <span class=\"icon-order-arrow\"></span>\n              </button> -->\n          } @else {\n          {{ column.label | translate }}\n          }\n        </th>\n        }\n        @if (showActions() && (actions().length > 0 || customActions().length > 0)) {\n        <th class=\"u-align-right\">{{ 'table.actions' | translate }}</th>\n        }\n      </tr>\n    </thead>\n    <tbody>\n      @for (row of displayedData(); track row.getId()) {\n      <tr [ngClass]=\"getRowClasses(row)\" \n          [class.is-editing-inline]=\"isRowInEditMode(row.getId())\"\n          [class.is-disabled]=\"isRowDisabled(row)\">\n        @if (showSelection()) {\n        <!-- Todo: Tabla con row selection -->\n        <td class=\"select-column\">\n          <input type=\"checkbox\" [checked]=\"isRowSelected(row)\" (change)=\"toggleRow(row)\" />\n        </td>\n        }\n        @for (column of columns(); track $index) {\n        <td [attr.data-label]=\"column.label | translate\" \n            [ngClass]=\"[\n              column.align ? 'u-align-' + column.align : '',\n              getCellDisabledClasses(row, column)\n            ]\" \n            [class.is-editing]=\"isColumnEditable(column, row)\"\n            [class.is-column-disabled]=\"isColumnDisabledForRow(row, column)\">\n          @if (column.template) {\n          <!-- Todo: Ver qu\u00E9 es esto -->\n            <ng-container *ngTemplateOutlet=\"column.template; context: { $implicit: row, column: column }\"></ng-container>\n          } @else if (isColumnEditable(column, row)) {\n            <!-- !Solcre: Modo de edici\u00F3n en l\u00EDnea usando DynamicField -->\n            <div class=\"c-table__inline-edit\">\n              <strong class=\"c-table__mobile-heading\">{{ column.label | translate }}:</strong>\n              <div\n                coreDynamicField\n                [field]=\"getInlineEditableConfigWithState(row, column)!\"\n                [value]=\"getEditingValue(row, column)\"\n                [mode]=\"ModalMode.EDIT\"\n                [errors]=\"getCellErrors(row, column)\"\n                [rowData]=\"row\"\n                (valueChange)=\"onCellValueChange(row, column, $event)\"\n                (onBlurEvent)=\"onCellBlur(row, column)\"\n                (onEnterEvent)=\"onCellEnter(row, column)\"\n              ></div>\n            </div>\n          } @else {\n            <div class=\"c-table__content\">\n              <strong class=\"c-table__mobile-heading\">{{ column.label | translate }}:</strong> {{ getFormattedValue(row,\n              column) }}\n            </div>\n          }\n        </td>\n        }\n\n        <!-- Actions-->\n\n        @if (showActions() && (actions().length > 0 || customActions().length > 0 || expansionConfig()?.enabled)) {\n\n        <td class=\"u-align-right\">\n          <div class=\"c-table__actions\">\n\n            @for (actionConfig of regularDefaultActions(); track actionConfig.action) {\n              @if (hasPermission(actionConfig)) {\n                @if (actionConfig.action === TableAction.VIEW || actionConfig.action === TableAction.EDIT ||\n                actionConfig.action === TableAction.DELETE) {\n                  <core-generic-button [config]=\"getActionButtonConfig(actionConfig.action, actionConfig)\"\n                    (buttonClick)=\"onButtonClick($event, actionConfig.action, row)\">\n                  </core-generic-button>\n                }\n              }\n            }\n            @for (customAction of getVisibleCustomActions(row, false); track customAction.label || $index) {\n              @if (hasPermission(customAction)) {\n                <core-generic-button [config]=\"getCustomActionButtonConfigForRow(customAction, row)\"\n                  (buttonClick)=\"onButtonClick($event, customAction, row)\">\n                </core-generic-button>\n              }\n            }\n\n            @if (hasExtraActionsForRow(row)) {\n              <core-generic-button [config]=\"getMoreActionsButtonConfig(row.getId())\" [data]=\"row\"\n                (buttonClick)=\"onMoreActionsClick($event, row.getId())\" #dropdownTrigger>\n              </core-generic-button>\n              <core-dropdown [rowId]=\"row.getId()\" [extraDefaultActions]=\"extraDefaultActions()\"\n                [extraCustomActions]=\"getVisibleCustomActions(row, true)\" [row]=\"row\"\n                [triggerElementId]=\"'dropdown-trigger-' + row.getId()\"\n                (actionTriggered)=\"triggerAction($event.action, $event.row)\"\n                (customActionTriggered)=\"triggerCustomAction($event.action, $event.row)\" #dropdown>\n              </core-dropdown>\n            }\n\n            @if (expansionConfig()?.enabled) {\n              <!-- \u2705 Solcre: Celda dedicada para expansi\u00F3n en su posici\u00F3n correcta -->\n              <core-generic-button [config]=\"getExpandButtonConfig(row)\" (buttonClick)=\"onExpandButtonClick($event, row)\">\n              </core-generic-button>\n            }\n\n          </div> <!-- .c-table__actions -->\n        </td> <!-- td parent of .c-table__actions -->\n        } <!-- @if (showActions() -->\n\n\n      </tr>\n      @if (expansionConfig()?.enabled && isRowExpanded(row)) {\n        <!-- Todo: Ver que es esto -->\n        <tr class=\"expansion-row\" [ngClass]=\"getRowClasses(row)\">\n          <td [attr.colspan]=\"displayedColumns().length\" class=\"expansion-content\">\n            <ng-container *ngTemplateOutlet=\"expansionConfig()!.template; context: { $implicit: row }\">\n            </ng-container>\n          </td>\n        </tr>\n      }\n      } @empty {\n        <tr>\n          <!-- Todo: Estilo .no-data -->\n          <td [attr.colspan]=\"displayedColumns().length\">\n            <p class=\"c-placeholder\">{{ 'table.noData' | translate }}</p>\n          </td>\n        </tr>\n      }\n    </tbody>\n  </table>\n</div> <!-- .c-table -->\n\n<!-- Todo: Todo lo que viene dsp de la tabla -->\n\n@if (!enablePagination()) {\n<!-- Todo: Ver qu\u00E9 onda esto -->\n<div #sentinel class=\"sentinel\"></div>\n}\n\n@if (enablePagination()) {\n<!-- Todo: Ver qu\u00E9 onda esto -->\n<core-generic-pagination [tableId]=\"tableId\"></core-generic-pagination>\n}\n\n<core-generic-modal [isOpen]=\"tableActionService.getIsModalOpen()\" [mode]=\"tableActionService.getModalMode()\"\n  [data]=\"tableActionService.getModalData()\" [fields]=\"hasTabs() ? [] : tableActionService.getModalFieldsToShow()\"\n  [tabs]=\"hasTabs() ? modalTabs() : []\" [title]=\"tableActionService.getModalTitle()\" [modelFactory]=\"modelFactory() || null\"\n  (save)=\"onModalSave($event)\" (close)=\"tableActionService.closeModal()\" (modalData)=\"onModalData($event)\">\n</core-generic-modal>\n\n<core-filter-modal [isOpen]=\"isFilterModalOpen()\" [filters]=\"customFilters()\" [currentFilterValues]=\"currentFilterValues()\" (close)=\"closeFiltersPopup()\"\n  (filterChange)=\"handleFilterChange($event)\" (globalFilterChange)=\"applyGlobalFilter($event)\"\n  (clearFilters)=\"handleClearFilters()\">\n</core-filter-modal>", styles: [".in-modal .c-table thead th:last-child,.c-table tbody td:last-child{text-align:left}.c-table__order-btn--asc{transform:rotate(180deg)}.c-table__order-btn--desc{transform:rotate(0)}.c-table tr.is-editing-inline{background-color:#fff3cd;border-left:3px solid #ffc107}.c-table tr.is-editing-inline td{background-color:#fff3cd}.c-table tr.is-editing-inline:hover td{background-color:#ffecb5}.expansion-row .expansion-content{padding:16px;background-color:#f8f9fa;border-top:1px solid #dee2e6}.expansion-row td{border-bottom:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "component", type: GenericModalComponent, selector: "core-generic-modal", inputs: ["isOpen", "mode", "data", "fields", "tabs", "title", "isMultiple", "customTemplate", "customViewTemplate", "buttonConfig", "modelFactory", "errors", "validators"], outputs: ["save", "close", "modalData"] }, { kind: "component", type: GenericPaginationComponent, selector: "core-generic-pagination", inputs: ["tableId", "isServerSide"] }, { kind: "component", type: DropdownComponent, selector: "core-dropdown", inputs: ["rowId", "triggerElementId", "extraDefaultActions", "extraCustomActions", "row"], outputs: ["actionTriggered", "customActionTriggered"] }, { kind: "component", type: FilterModalComponent, selector: "core-filter-modal", inputs: ["isOpen", "filters", "currentFilterValues"], outputs: ["close", "filterChange", "clearFilters", "globalFilterChange"] }, { kind: "component", type: GenericButtonComponent, selector: "core-generic-button", inputs: ["config", "data"], outputs: ["buttonClick"] }, { kind: "directive", type: DynamicFieldDirective, selector: "[coreDynamicField]", inputs: ["field", "value", "mode", "errors", "rowData", "formValue"], outputs: ["valueChange", "onBlurEvent", "onEnterEvent", "selectionChange"] }, { kind: "component", type: ActiveFiltersComponent, selector: "core-active-filters", inputs: ["activeFilters", "config"], outputs: ["onFilterRemove", "onClearAll"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: GenericTableComponent, decorators: [{
             type: Component,
@@ -8746,6 +8977,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
             }], dropdown: [{
                 type: ViewChild,
                 args: ['dropdown']
+            }], onBeforeUnload: [{
+                type: HostListener,
+                args: ['window:beforeunload', ['$event']]
             }], closeSubmenu: [{
                 type: HostListener,
                 args: ['document:click']
@@ -10269,12 +10503,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.26',
+    full: '2.11.28',
     major: 2,
     minor: 11,
-    patch: 26,
-    timestamp: '2025-08-28T15:28:38.169Z',
-    buildDate: '28/8/2025'
+    patch: 28,
+    timestamp: '2025-08-29T12:24:53.917Z',
+    buildDate: '29/8/2025'
 };
 
 class MainNavComponent {