@fuentis/phoenix-ui 0.0.9-alpha.551 → 0.0.9-alpha.552

package/fesm2022/fuentis-phoenix-ui.mjs

@@ -8079,29 +8079,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
         }] });
 
 class ReadOnlyInputV2Component {
+    /** Field metadata (type, key, options, labels, etc.) */
     field;
+    /** Parent FormGroup that contains the control referenced by field.configuration.key */
     form;
+    /** Used to automatically unsubscribe from valueChanges on destroy */
     dr = inject(DestroyRef);
+    /**
+     * Internal reactive signal holding the current control value.
+     * We keep a local signal to optimize OnPush change detection and computed selectors.
+     */
     _v = signal(null, ...(ngDevMode ? [{ debugName: "_v" }] : []));
     ngOnInit() {
+        // Initial sync of the control value into the local signal
         this.sync();
+        // Keep local signal in sync with the form control value
         this.ctrl()?.valueChanges
             .pipe(takeUntilDestroyed(this.dr))
             .subscribe(() => this.sync());
     }
+    /** Control key resolved from MetaFieldConfig */
     get key() {
         return this.field?.configuration?.key ?? '';
     }
+    /** Meta field type (TEXT, DATE, ASSIGN, UPLOAD, etc.) */
     get type() {
         return this.field?.configuration?.type ?? 'TEXT';
     }
+    /** Shortcut to the underlying FormControl */
     ctrl() {
         return this.form.get(this.key);
     }
+    /**
+     * Synchronizes the FormControl value into the local signal.
+     * This keeps computed properties reactive and OnPush-friendly.
+     */
     sync() {
         this._v.set(this.ctrl()?.value ?? null);
     }
     // ---------- helpers ----------
+    /**
+     * Resolves language suffix used by backend DTOs (labelKeyValEn/De/Sr).
+     * This is used to pick the correct localized label for option objects.
+     */
     getLangSuffix() {
         const lang = (localStorage.getItem('language') ?? 'en').toLowerCase();
         if (lang.startsWith('de'))
@@ -8110,12 +8130,19 @@ class ReadOnlyInputV2Component {
             return 'Sr';
         return 'En';
     }
-    /** bool prikaz (switch/checkbox) */
+    /**
+     * Boolean renderer (for SWITCH / CHECKBOX).
+     * Returns boolean value or null if the value is not a boolean.
+     */
     bool = computed(() => {
         const v = this._v();
         return typeof v === 'boolean' ? v : null;
     }, ...(ngDevMode ? [{ debugName: "bool" }] : []));
-    /** DATE podrška: Date ili ISO */
+    /**
+     * DATE renderer.
+     * Supports both Date instances and ISO-like string values.
+     * Returns a valid Date object or null if parsing fails.
+     */
     dateValue = computed(() => {
         const v = this._v();
         if (!v)
@@ -8125,7 +8152,11 @@ class ReadOnlyInputV2Component {
         const d = new Date(String(v));
         return isNaN(d.getTime()) ? null : d;
     }, ...(ngDevMode ? [{ debugName: "dateValue" }] : []));
-    /** START_DUE_DATE: {startDate,endDate} (Date ili string) */
+    /**
+     * START_DUE_DATE renderer.
+     * Expects shape: { startDate, endDate } (Date or string).
+     * Returns normalized Date objects or null if invalid.
+     */
     startDue = computed(() => {
         const v = this._v();
         if (!v || typeof v !== 'object')
@@ -8141,7 +8172,10 @@ class ReadOnlyInputV2Component {
             endDate: ed && !isNaN(ed.getTime()) ? ed : null,
         };
     }, ...(ngDevMode ? [{ debugName: "startDue" }] : []));
-    /** ASSIGN: očekuje {name,function,email,phone} */
+    /**
+     * ASSIGN renderer.
+     * Normalizes various backend DTO shapes into a unified view model.
+     */
     assign = computed(() => {
         const v = this._v();
         if (!v || typeof v !== 'object')
@@ -8153,7 +8187,10 @@ class ReadOnlyInputV2Component {
             phone: v?.phone ?? null,
         };
     }, ...(ngDevMode ? [{ debugName: "assign" }] : []));
-    /** UPLOAD: {fileName,size,type} ili slično */
+    /**
+     * UPLOAD renderer.
+     * Supports common upload DTO shapes (fileName/name, size, type).
+     */
     upload = computed(() => {
         const v = this._v();
         if (!v || typeof v !== 'object')
@@ -8164,16 +8201,21 @@ class ReadOnlyInputV2Component {
             type: v?.type ?? null,
         };
     }, ...(ngDevMode ? [{ debugName: "upload" }] : []));
-    /** SS_OPTION i SS_OPTION_OBJECT_BASED: raw ili object */
+    /**
+     * Single-select option label resolver (SS_OPTION / SS_OPTION_OBJECT_BASED).
+     * - If value is primitive -> find matching option in configuration.options
+     * - If value is object -> resolve best display label using common DTO fields
+     */
     ssLabel = computed(() => {
         const v = this._v();
         if (v === null || v === undefined || v === '')
             return null;
-        // raw value (npr 'RS') -> nađi u options
+        // Primitive value: resolve label from options list
         if (typeof v !== 'object') {
             const opt = (this.field.configuration.options ?? []).find((x) => x?.value === v);
             return opt?.label ?? String(v);
         }
+        // Object value: resolve localized label from DTO
         const suffix = this.getLangSuffix();
         const key = `labelKeyVal${suffix}`;
         return (v?.label ??
@@ -8183,7 +8225,10 @@ class ReadOnlyInputV2Component {
             v?.value ??
             null);
     }, ...(ngDevMode ? [{ debugName: "ssLabel" }] : []));
-    /** MS_OPTION: array raw ili array objekata */
+    /**
+     * Multi-select option label resolver (MS_OPTION).
+     * Joins multiple labels into a single string with truncation after maxItems.
+     */
     msLabel = computed(() => {
         const v = this._v();
         if (!Array.isArray(v) || v.length === 0)
@@ -8201,7 +8246,10 @@ class ReadOnlyInputV2Component {
             ? labels.join(', ')
             : `${labels.slice(0, maxItems).join(', ')} ...`;
     }, ...(ngDevMode ? [{ debugName: "msLabel" }] : []));
-    /** general fallback text (siguran za sve tipove) */
+    /**
+     * Generic fallback display value.
+     * Ensures that every field type has a safe string representation.
+     */
     displayText = computed(() => {
         const v = this._v();
         if (v === null || v === undefined || v === '')
@@ -8217,7 +8265,7 @@ class ReadOnlyInputV2Component {
         if (this.type === 'ASSIGN' || this.type === 'ASSIGN_ASSET') {
             return this.assign()?.name ?? null;
         }
-        // textarea/editor su često html
+        // Text areas and editors often contain HTML
         if (this.type === 'TEXT_AREA' || this.type === 'TEXT_EDITOR') {
             return typeof v === 'string' ? v : String(v);
         }
@@ -8248,37 +8296,92 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             }] } });
 
 class MetaAssignResponsibleV2Component {
-    /** legacy meta-config data for dialog table */
-    items = []; // umesto control.configuration.items
+    /**
+     * List of available assignees used as table data inside the selection dialog.
+     * This replaces legacy `control.configuration.items` access and keeps the CVA independent
+     * from meta-form internals.
+     */
+    items = [];
+    /**
+     * Translation key for the dialog header title.
+     * Kept as an input so different contexts can reuse this field with a custom title.
+     */
     dialogHeaderKey = 'LABELS.ASSIGN_RESPONSIBLE';
     translate = inject(TranslateService);
     dialog = inject(DialogService);
+    /**
+     * Currently selected assignee value bound to the parent form control.
+     * We store the full object (row) because downstream fields often need more than uuid.
+     */
     value = null;
+    /**
+     * Disabled state propagated from Angular forms via `setDisabledState`.
+     * (If you later add a field-level `@Input() disable`, combine them like in other CVAs.)
+     */
     disabled = false;
+    /**
+     * CVA callback invoked when the value changes (selection/clear).
+     */
     onChange = () => { };
+    /**
+     * CVA callback invoked when the control is marked as touched (user interaction).
+     * Standard: call on meaningful interactions (open dialog, select, clear).
+     */
     onTouched = () => { };
+    /**
+     * Called by Angular forms when the model value changes programmatically.
+     * Keep it side-effect free: do not call `onChange`/`onTouched` from here.
+     */
     writeValue(value) {
         this.value = value ?? null;
     }
+    /**
+     * Registers the callback that should be called when the component updates the value.
+     */
     registerOnChange(fn) {
         this.onChange = fn;
     }
+    /**
+     * Registers the callback that should be called when the control becomes "touched".
+     */
     registerOnTouched(fn) {
         this.onTouched = fn;
     }
+    /**
+     * Receives disabled state from Angular forms and updates local state.
+     */
     setDisabledState(isDisabled) {
         this.disabled = isDisabled;
     }
+    /**
+     * Clears current assignee value.
+     * - emits `null`
+     * - marks as touched (user action)
+     */
     clear() {
         if (this.disabled)
             return;
+        // prevent redundant emits
+        if (this.value === null) {
+            this.onTouched();
+            return;
+        }
         this.value = null;
         this.onChange(null);
         this.onTouched();
     }
+    /**
+     * Opens object selection dialog for choosing a new assignee.
+     * The dialog renders a generic table and returns the selected row on close.
+     *
+     * Standard for CVA:
+     * - mark as touched when user opens the picker (interaction started)
+     * - emit onChange only when a row is actually selected
+     */
     openDialog() {
         if (this.disabled)
             return;
+        this.onTouched();
         const ref = this.dialog.open(ObjectItemDialogComponent, {
             header: this.translate.instant(this.dialogHeaderKey),
             width: '700px',
@@ -8299,8 +8402,13 @@ class MetaAssignResponsibleV2Component {
         ref?.onClose.subscribe((response) => {
             if (!response)
                 return;
+            // prevent redundant emits (same selection)
+            const same = (this.value?.uuid ?? null) === (response?.uuid ?? null) &&
+                JSON.stringify(this.value ?? null) === JSON.stringify(response ?? null);
             this.value = response;
-            this.onChange(response);
+            if (!same) {
+                this.onChange(response);
+            }
             this.onTouched();
         });
     }
@@ -8461,32 +8569,107 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             }] } });
 
 class MetaColorPickerV2Component {
-    /** optional: parent-level disable (pored reactive disable) */
+    /**
+     * Optional external disable flag (field-level disable coming from meta config).
+     * This is combined with the disabled state coming from Angular Forms (CVA).
+     */
     disable = false;
-    /** current value (hex string, npr "#ff00aa") */
+    cdr = inject(ChangeDetectorRef);
+    /**
+     * Currently selected color value.
+     * Expected format: HEX string (e.g. "#ff00aa") or null.
+     */
     value = null;
+    /**
+     * CVA callback invoked when the value changes.
+     */
     onChange = () => { };
+    /**
+     * CVA callback invoked when the control is marked as touched.
+     * Standard: call on blur / close, not on every value change.
+     */
     onTouched = () => { };
+    /**
+     * Disabled state coming from Angular Forms (ControlValueAccessor).
+     */
     isDisabled = false;
+    /**
+     * Final disabled state combining:
+     * - form-level disabled state (CVA)
+     * - field-level disable flag (input)
+     */
+    get disabled() {
+        return this.disable || this.isDisabled;
+    }
+    /**
+     * Writes a new value from the parent form control into the component.
+     * Keep it idempotent and UI-safe.
+     */
     writeValue(v) {
-        this.value = v ?? null;
+        this.value = this.normalizeHex(v);
+        this.cdr.markForCheck();
     }
+    /**
+     * Registers callback that is triggered when the value changes.
+     */
     registerOnChange(fn) {
         this.onChange = fn;
     }
+    /**
+     * Registers callback that is triggered when the control is touched.
+     */
     registerOnTouched(fn) {
         this.onTouched = fn;
     }
+    /**
+     * Receives disabled state from Angular Forms and updates local state.
+     */
     setDisabledState(isDisabled) {
         this.isDisabled = isDisabled;
+        this.cdr.markForCheck();
     }
-    // PrimeNG emituje event, ali nama treba value
+    /**
+     * Handler for PrimeNG color picker change event.
+     * Propagates the currently selected color value to the parent form control.
+     *
+     * Note: we intentionally do NOT call onTouched here (our standard is: touched on blur).
+     */
     onPickerChange() {
-        this.onChange(this.value);
+        if (this.disabled)
+            return;
+        const next = this.normalizeHex(this.value);
+        // prevent redundant emits (useful when PrimeNG fires multiple times)
+        if (next === this.value) {
+            this.cdr.markForCheck();
+            return;
+        }
+        this.value = next;
+        this.onChange(next);
+        this.cdr.markForCheck();
+    }
+    /**
+     * Marks control as touched when user leaves the component.
+     * (Matches "touched on blur" CVA guideline.)
+     */
+    handleBlur() {
+        if (this.disabled)
+            return;
         this.onTouched();
     }
-    get disabled() {
-        return this.disable || this.isDisabled;
+    /**
+     * Normalizes incoming values to a safe HEX string or null.
+     * - accepts "#RRGGBB" / "#RGB" / "RRGGBB"
+     * - returns null for empty/invalid inputs
+     */
+    normalizeHex(v) {
+        if (v === null || v === undefined)
+            return null;
+        const s = String(v).trim();
+        if (!s)
+            return null;
+        const withHash = s.startsWith('#') ? s : `#${s}`;
+        const ok = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(withHash);
+        return ok ? withHash.toLowerCase() : null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaColorPickerV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: MetaColorPickerV2Component, isStandalone: true, selector: "phoenix-meta-color-picker-v2", inputs: { disable: "disable" }, providers: [
@@ -8496,28 +8679,26 @@ class MetaColorPickerV2Component {
                 multi: true,
             },
         ], ngImport: i0, template: `
-
-   <p-colorPicker
-        class="color-swatch"
-        [(ngModel)]="value"
-        (onChange)="onPickerChange()"
-        (onBlur)="onTouched()"
-        [disabled]="disabled"
-        [appendTo]="'body'"
+    <p-colorPicker
+      class="color-swatch"
+      [(ngModel)]="value"
+      (onChange)="onPickerChange()"
+      (onBlur)="handleBlur()"
+      [disabled]="disabled"
+      [appendTo]="'body'"
     ></p-colorPicker>
   `, isInline: true, styles: [":host ::ng-deep .color-swatch.p-colorpicker{width:35px;height:35px;padding:0!important;border:none!important;background:transparent!important;box-shadow:none!important}:host ::ng-deep .color-swatch .p-colorpicker-preview{width:35px!important;height:35px!important;border:none!important;border-radius:6px!important;box-shadow:none!important}:host ::ng-deep .color-swatch .p-colorpicker-preview:focus,:host ::ng-deep .color-swatch .p-colorpicker-preview:focus-visible{outline:none!important;box-shadow:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ColorPickerModule }, { kind: "component", type: i2$8.ColorPicker, selector: "p-colorPicker, p-colorpicker, p-color-picker", inputs: ["styleClass", "inline", "format", "tabindex", "inputId", "autoZIndex", "showTransitionOptions", "hideTransitionOptions", "autofocus", "defaultColor", "appendTo"], outputs: ["onChange", "onShow", "onHide"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaColorPickerV2Component, decorators: [{
             type: Component,
             args: [{ selector: 'phoenix-meta-color-picker-v2', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule, ColorPickerModule], template: `
-
-   <p-colorPicker
-        class="color-swatch"
-        [(ngModel)]="value"
-        (onChange)="onPickerChange()"
-        (onBlur)="onTouched()"
-        [disabled]="disabled"
-        [appendTo]="'body'"
+    <p-colorPicker
+      class="color-swatch"
+      [(ngModel)]="value"
+      (onChange)="onPickerChange()"
+      (onBlur)="handleBlur()"
+      [disabled]="disabled"
+      [appendTo]="'body'"
     ></p-colorPicker>
   `, providers: [
                         {
@@ -8531,50 +8712,137 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             }] } });
 
 class MetaCheckboxColorPickerV2Component {
+    /**
+     * 2D array of color values used to render the color grid in the popover.
+     * Example:
+     * [
+     *   ['#ff0000', '#00ff00', '#0000ff'],
+     *   ['#facc15', '#22c55e', '#0ea5e9']
+     * ]
+     */
     options = [];
+    /**
+     * External disable flag (e.g. meta-form field-level disable).
+     * This is combined with CVA disabled state.
+     */
     disable = false;
     cdr = inject(ChangeDetectorRef);
+    /**
+     * Currently selected color value bound to the parent form control.
+     */
     value = null;
+    /**
+     * Color currently focused/hovered in the UI.
+     * Used only for visual outline highlight in the picker grid.
+     */
     focusedColor = null;
+    /**
+     * Disabled state coming from Angular Forms (ControlValueAccessor).
+     */
     isDisabled = false;
+    /**
+     * CVA callback invoked when the value changes.
+     */
     onChange = () => { };
+    /**
+     * CVA callback invoked when the control is marked as touched.
+     * Standard: touched on "open/blur/close" actions, not necessarily on hover.
+     */
     onTouched = () => { };
-    // ----- CVA -----
+    /**
+     * Final disabled state combining:
+     * - form-level disabled state (CVA)
+     * - field-level disable flag (input)
+     */
+    get disabled() {
+        return this.disable || this.isDisabled;
+    }
+    // ----- ControlValueAccessor implementation -----
+    /**
+     * Writes a new value from the parent form into the component.
+     * Keeps internal value and focusedColor in sync for correct UI outline.
+     */
     writeValue(v) {
-        this.value = v ?? null;
+        this.value = this.normalizeColor(v);
         this.focusedColor = this.value;
         this.cdr.markForCheck();
     }
+    /**
+     * Registers callback that is triggered when the value changes.
+     */
     registerOnChange(fn) {
         this.onChange = fn;
     }
+    /**
+     * Registers callback that is triggered when the control is touched.
+     */
     registerOnTouched(fn) {
         this.onTouched = fn;
     }
+    /**
+     * Receives disabled state from Angular Forms and updates local state.
+     */
     setDisabledState(isDisabled) {
         this.isDisabled = isDisabled;
         this.cdr.markForCheck();
     }
-    get disabled() {
-        return this.disable || this.isDisabled;
-    }
     // ----- UI handlers -----
+    /**
+     * Toggles the popover visibility when the selected-color button is clicked.
+     * We mark as touched because user interacted with the control.
+     */
     toggle(popover, ev) {
         if (this.disabled)
             return;
         this.onTouched();
         popover.toggle(ev);
     }
+    /**
+     * Handles color selection from the grid:
+     * - updates internal value
+     * - propagates value to parent form (onChange)
+     * - marks control as touched (selection is a meaningful interaction)
+     * - closes the popover
+     */
     select(color, popover) {
         if (this.disabled)
             return;
-        this.focusedColor = color;
-        this.value = color;
-        this.onChange(color);
+        const next = this.normalizeColor(color);
+        // prevent redundant emits
+        if (next === this.value) {
+            this.focusedColor = next;
+            this.onTouched();
+            this.cdr.markForCheck();
+            popover.hide();
+            return;
+        }
+        this.focusedColor = next;
+        this.value = next;
+        this.onChange(next);
         this.onTouched();
         this.cdr.markForCheck();
         popover.hide();
     }
+    /**
+     * Normalizes incoming values to a safe CSS color string or null.
+     * For this component we keep it permissive:
+     * - accepts "#RRGGBB" / "#RGB"
+     * - also allows any non-empty string (in case someone passes "red" or "var(--x)")
+     * - returns null for empty values
+     */
+    normalizeColor(v) {
+        if (v === null || v === undefined)
+            return null;
+        const s = String(v).trim();
+        if (!s)
+            return null;
+        // normalize common hex values (with/without '#')
+        const withHash = s.startsWith('#') ? s : `#${s}`;
+        if (/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(withHash))
+            return withHash.toLowerCase();
+        // fallback: allow CSS colors (e.g. "red") or CSS vars
+        return s;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaCheckboxColorPickerV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: MetaCheckboxColorPickerV2Component, isStandalone: true, selector: "phoenix-meta-checkbox-color-picker-v2", inputs: { options: "options", disable: "disable" }, providers: [
             {
@@ -8660,50 +8928,154 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             }] } });
 
 class MetaStartDueDateV2Component {
-    /** opcioni data-cy prefix ako ti treba (nije obavezno) */
+    /**
+     * Optional data-cy attribute prefix for e2e testing.
+     * Can be used by parent components to uniquely identify this field in tests.
+     */
     dataCy;
-    disabled = false;
+    /**
+     * Optional parent-level disable flag (in addition to reactive-form disable).
+     * Use this when the field must be disabled due to page/business logic.
+     */
+    disable = false;
+    cdr = inject(ChangeDetectorRef);
+    /**
+     * Disabled state coming from Angular Forms (ControlValueAccessor).
+     * When true, both date pickers are non-interactive.
+     */
+    isDisabled = false;
+    /**
+     * Local UI state for the selected start date.
+     * Normalized to Date or null for PrimeNG DatePicker compatibility.
+     */
     startDate = null;
+    /**
+     * Local UI state for the selected end date.
+     * Normalized to Date or null for PrimeNG DatePicker compatibility.
+     */
     endDate = null;
+    /**
+     * CVA callback invoked when the composite value changes.
+     */
     onChange = () => { };
+    /**
+     * CVA callback invoked when the control is marked as touched.
+     * IMPORTANT: We call this on blur (not on every change) to match standard CVA behavior.
+     */
     onTouched = () => { };
+    /**
+     * Effective disabled state used by the template.
+     * Combines reactive form disable + parent-level disable.
+     */
+    get disabled() {
+        return this.disable || this.isDisabled;
+    }
+    /**
+     * Writes a new value from the parent form control into the component.
+     * Incoming values are normalized to Date instances for the UI layer.
+     *
+     * NOTE: "YYYY-MM-DD" strings are parsed as local dates to avoid timezone day-shifts.
+     */
     writeValue(v) {
-        const sd = v?.startDate ? new Date(v.startDate) : null;
-        const ed = v?.endDate ? new Date(v.endDate) : null;
-        this.startDate = sd && !isNaN(sd.getTime()) ? sd : null;
-        this.endDate = ed && !isNaN(ed.getTime()) ? ed : null;
+        this.startDate = this.parseToDate(v?.startDate ?? null);
+        this.endDate = this.parseToDate(v?.endDate ?? null);
+        // OnPush: ensure UI reflects external value writes (patchValue/setValue)
+        this.cdr.markForCheck();
     }
+    /**
+     * Registers the callback that should be called when the value changes.
+     */
     registerOnChange(fn) {
         this.onChange = fn;
     }
+    /**
+     * Registers the callback that should be called when the control is touched.
+     */
     registerOnTouched(fn) {
         this.onTouched = fn;
     }
+    /**
+     * Receives disabled state from Angular Forms and updates local state.
+     */
     setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
+        this.isDisabled = isDisabled;
+        // OnPush: reflect disabled state changes immediately
+        this.cdr.markForCheck();
     }
+    /**
+     * Handler used by PrimeNG DatePicker blur events.
+     * Marks the control as touched without emitting a value change.
+     */
+    handleBlur() {
+        if (this.disabled)
+            return;
+        this.onTouched();
+    }
+    /**
+     * Handler for start date change coming from the DatePicker.
+     * Updates local state and propagates the composite value.
+     */
     onStartChange(d) {
+        if (this.disabled)
+            return;
         this.startDate = d ?? null;
-        this.emit();
+        this.emitChange();
     }
+    /**
+     * Handler for end date change coming from the DatePicker.
+     * Updates local state and propagates the composite value.
+     */
     onEndChange(d) {
+        if (this.disabled)
+            return;
         this.endDate = d ?? null;
-        this.emit();
+        this.emitChange();
     }
-    emit() {
-        this.onTouched();
-        // ako su oba null -> tretiraj kao null (čistije za required)
+    /**
+     * Emits the composite value to the parent form control.
+     * - Emits `null` when both dates are empty (cleaner semantics for required/bothDates validators).
+     * - Otherwise emits the `{ startDate, endDate }` object (partial values allowed; validator decides).
+     */
+    emitChange() {
         if (!this.startDate && !this.endDate) {
             this.onChange(null);
+            this.cdr.markForCheck();
             return;
         }
         this.onChange({
             startDate: this.startDate,
             endDate: this.endDate,
         });
+        this.cdr.markForCheck();
+    }
+    /**
+     * Parses Date | string safely into a Date instance for the UI.
+     * Important: "YYYY-MM-DD" is treated as a local date (prevents timezone day-shift).
+     */
+    parseToDate(v) {
+        if (!v)
+            return null;
+        if (v instanceof Date) {
+            return isNaN(v.getTime()) ? null : v;
+        }
+        const s = String(v).trim();
+        if (!s)
+            return null;
+        // Date-only string -> create LOCAL date (avoid UTC shifting)
+        const m = s.match(/^(\d{4})-(\d{2})-(\d{2})$/);
+        if (m) {
+            const y = Number(m[1]);
+            const mo = Number(m[2]) - 1;
+            const d = Number(m[3]);
+            const local = new Date(y, mo, d);
+            return isNaN(local.getTime()) ? null : local;
+        }
+        // ISO / other -> fallback
+        const dt = new Date(s);
+        return isNaN(dt.getTime()) ? null : dt;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaStartDueDateV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: MetaStartDueDateV2Component, isStandalone: true, selector: "phoenix-meta-start-due-date-v2", inputs: { dataCy: "dataCy" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: MetaStartDueDateV2Component, isStandalone: true, selector: "phoenix-meta-start-due-date-v2", inputs: { dataCy: "dataCy", disable: "disable" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => MetaStartDueDateV2Component),
@@ -8722,6 +9094,7 @@ class MetaStartDueDateV2Component {
             [disabled]="disabled"
             [ngModel]="startDate"
             (ngModelChange)="onStartChange($event)"
+            (onBlur)="handleBlur()"
             appendTo="body"
           ></p-datepicker>
         </div>
@@ -8740,16 +9113,17 @@ class MetaStartDueDateV2Component {
             [disabled]="disabled"
             [ngModel]="endDate"
             (ngModelChange)="onEndChange($event)"
+            (onBlur)="handleBlur()"
             appendTo="body"
           ></p-datepicker>
         </div>
       </div>
     </div>
-  `, isInline: true, styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i2$7.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "pipe", type: i3$2.TranslatePipe, name: "translate" }] });
+  `, isInline: true, styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i2$7.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "pipe", type: i3$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaStartDueDateV2Component, decorators: [{
             type: Component,
-            args: [{ selector: 'phoenix-meta-start-due-date-v2', standalone: true, imports: [CommonModule, FormsModule, TranslateModule, DatePickerModule], providers: [
+            args: [{ selector: 'phoenix-meta-start-due-date-v2', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule, TranslateModule, DatePickerModule], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => MetaStartDueDateV2Component),
@@ -8768,6 +9142,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             [disabled]="disabled"
             [ngModel]="startDate"
             (ngModelChange)="onStartChange($event)"
+            (onBlur)="handleBlur()"
             appendTo="body"
           ></p-datepicker>
         </div>
@@ -8786,6 +9161,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             [disabled]="disabled"
             [ngModel]="endDate"
             (ngModelChange)="onEndChange($event)"
+            (onBlur)="handleBlur()"
             appendTo="body"
           ></p-datepicker>
         </div>
@@ -8794,18 +9170,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
   `, styles: [":host{display:block}\n"] }]
         }], propDecorators: { dataCy: [{
                 type: Input
+            }], disable: [{
+                type: Input
             }] } });
 
 class MetaFormFieldV2Component {
+    /** Metadata definition of the field (type, key, options, styles, flags, etc.) */
     field;
+    /** Parent FormGroup that contains the FormControl for this field */
     form;
-    /** External "page read-only" state; when true, we render read-only fields (like V1). */
+    /**
+     * Page-level read-only flag.
+     * When true, the component renders ReadOnlyInputV2Component instead of editable controls.
+     */
     readOnly = false;
-    // ako hoćeš global readOnly/disable (npr. parent toggles)
+    /**
+     * Global disable flag (e.g. parent dialog toggles entire form disabled).
+     * This is merged with field-level disable configuration.
+     */
     disableForm = false;
+    /** Used to manually trigger change detection for OnPush strategy */
     cdr = inject(ChangeDetectorRef);
+    /** Used to automatically unsubscribe from value/status streams on destroy */
     dr = inject(DestroyRef);
+    /** Translation service for validation and display labels */
     translate = inject(TranslateService);
+    /**
+     * Exposed enum-like mapping of MetaFieldType for template usage.
+     * Keeps templates readable and avoids magic strings.
+     */
     MetaFieldType = Object.freeze({
         TEXT: 'TEXT',
         NUMBER: 'NUMBER',
@@ -8831,61 +9224,95 @@ class MetaFormFieldV2Component {
         LINKS_DATA: 'LINKS_DATA',
         SLOT: 'SLOT',
     });
+    /** Control key resolved from MetaFieldConfig */
     get key() {
         return this.field?.configuration?.key ?? '';
     }
+    /** Field type resolved from MetaFieldConfig */
     get type() {
         return this.field?.configuration?.type ?? 'TEXT';
     }
+    /** Column width class for grid layout (falls back to default if not provided) */
     get colClass() {
-        return this.field?.hidden ? 'p-0' : (this.field?.style.colWidth ?? 'col-12 md:col-6');
+        return this.field?.hidden
+            ? 'p-0'
+            : (this.field?.style.colWidth ?? 'col-12 md:col-6');
     }
     ngOnInit() {
         const ctrl = this.ctrl();
         if (!ctrl)
             return;
+        /**
+         * Subscribe to both valueChanges and statusChanges so the component:
+         * - re-renders when user changes the value
+         * - re-renders when validation state changes (touched/dirty/errors)
+         */
         merge(ctrl.valueChanges, ctrl.statusChanges)
             .pipe(takeUntilDestroyed(this.dr))
             .subscribe(() => this.cdr.markForCheck());
     }
+    /** Human-friendly label defined in metadata (already localized key) */
     userFriendlyMessage() {
         return this.field?.userFriendlyMessage ?? null;
     }
+    /** Optional placeholder i18n key defined in metadata */
     placeholderKey() {
         return this.field?.configuration?.placeholderKey ?? null;
     }
+    /**
+     * Resolves final read-only state for this field:
+     * - page-level readOnly OR field-level readOnly
+     */
     isReadOnly() {
         return !!this.readOnly || !!this.field?.readOnly;
     }
+    /**
+     * Resolves final disabled state for this field:
+     * - page-level disable OR field-level disable
+     */
     isDisabled() {
         return !!this.disableForm || !!this.field?.disable;
     }
+    /** Shortcut to underlying FormControl */
     ctrl() {
         return this.form.get(this.key);
     }
-    /** Used by read-only renderer. Keep it simple, same as V1 behavior. */
+    /**
+     * Minimal value formatter for legacy read-only rendering.
+     * Kept intentionally simple to match V1 behavior.
+     */
     displayValue() {
         const v = this.ctrl()?.value;
         if (v === null || v === undefined)
             return '';
         if (typeof v === 'string' || typeof v === 'number' || typeof v === 'boolean')
             return v;
-        // common DTO shapes (e.g. assign, option objects, upload)
+        // Common DTO shapes (assign, option objects, uploads, etc.)
         if (typeof v === 'object') {
             return v.label ?? v.name ?? v.fileName ?? JSON.stringify(v);
         }
         return String(v);
     }
+    /**
+     * Determines whether validation error should be displayed.
+     * Errors are shown only after user interaction (touched or dirty).
+     */
     showError() {
         const c = this.ctrl();
         return !!c && (c.touched || c.dirty) && !!c.errors;
     }
-    /** mapira error key (sync + submit-only async) */
+    /**
+     * Maps control error object to a normalized error key.
+     * Supports:
+     * - Angular built-in validators
+     * - Phoenix custom validators
+     * - Submit-only async validators
+     */
     errorKey() {
         const c = this.ctrl();
         if (!c?.errors)
             return null;
-        // sync (Angular built-ins)
+        // Angular built-in validators
         if (c.errors['required'])
             return 'required';
         if (c.errors['minlength'])
@@ -8900,27 +9327,31 @@ class MetaFormFieldV2Component {
             return 'min';
         if (c.errors['max'])
             return 'max';
-        // custom validators (Phoenix)
+        // Phoenix custom validators
         if (c.errors['dangerousChars'])
             return 'dangerousChars';
         if (c.errors['timeperiod'])
             return 'timeperiod';
         if (c.errors['invalidDate'])
-            return 'invalidDate'; // ako negde postoji
+            return 'invalidDate';
         if (c.errors['dueDate'])
             return 'dueDate';
         if (c.errors['bothDates'])
             return 'bothDates';
-        // submit-only async
+        // Submit-only async validators
         if (c.errors['unique'])
             return 'unique';
         if (c.errors['uniqueEntry'])
             return 'uniqueEntry';
         if (c.errors['custom'])
             return 'custom';
+        // Fallback: return first error key
         return Object.keys(c.errors)[0] ?? null;
     }
-    /** minimal: posle prevežeš na i18n ključeve */
+    /**
+     * Resolves translated error message based on errorKey().
+     * This is the single place responsible for validation message UX.
+     */
     errorText() {
         const c = this.ctrl();
         const k = this.errorKey();
@@ -8942,11 +9373,12 @@ class MetaFormFieldV2Component {
             case 'dangerousChars':
                 return this.translate.instant('VALIDATION_MESSAGE.NO_SPECIAL_CHARS_ALLOWED');
             case 'custom':
-                // legacy ponašanje: custom može biti string ključ poruke
+                // Legacy behavior: custom error can already be a translation key
                 return this.translate.instant(c.errors?.['custom']);
             case 'uniqueEntry':
-                // legacy: uniqueEntry je već tekst (ili već prevedeno)
-                return c.errors?.['uniqueEntry'] ?? this.translate.instant('VALIDATION_MESSAGE.VALUE_IS_ALREADY_IN_USE');
+                // Legacy behavior: uniqueEntry may already be a translated string
+                return (c.errors?.['uniqueEntry'] ??
+                    this.translate.instant('VALIDATION_MESSAGE.VALUE_IS_ALREADY_IN_USE'));
             case 'unique':
                 return this.translate.instant('VALIDATION_MESSAGE.VALUE_IS_ALREADY_IN_USE');
             case 'timeperiod':
@@ -8961,7 +9393,7 @@ class MetaFormFieldV2Component {
                     upperValue: c.errors?.['max']?.max,
                 });
             case 'pattern': {
-                // isti spec-case kao u starom InlineFieldError
+                // Special-case URL pattern handling (legacy InlineFieldError behavior)
                 const re = '^(https?://)?([\\da-z.-]+)\\.([a-z.]{2,6})[/\\w .-]*/?$';
                 const requiredPattern = c.errors?.['pattern']?.requiredPattern;
                 if (requiredPattern === re) {
@@ -8973,42 +9405,47 @@ class MetaFormFieldV2Component {
                 return this.translate.instant('VALIDATION_MESSAGE.INVALID_VALUE');
         }
     }
+    /**
+     * Lightweight text formatter for simple read-only display use cases.
+     * This is used mainly for inline displays and summary UIs.
+     */
     valueText() {
         const c = this.ctrl();
         const v = c?.value;
         if (v === null || v === undefined || v === '')
             return '--';
-        // SS_OPTION value object {label,value} ili raw
+        // Single-select option: resolve label from options
         if (this.type === 'SS_OPTION') {
             const opts = this.field?.configuration?.options ?? [];
             if (typeof v !== 'object') {
                 const hit = opts.find((o) => o?.value === v);
                 const label = hit?.label ?? v;
-                // ako je label i18n key
                 return this.translate.instant(label);
             }
-            // ako je objekat
+            // Object value fallback
             const label = v.label ?? v.value;
             return this.translate.instant(label);
         }
-        // DATE
+        // Date formatting
         if (this.type === 'DATE' && v instanceof Date) {
             return v.toLocaleDateString();
         }
-        // TEXT_EDITOR / TEXT_AREA: strip html (minimalno)
+        // Text editor / textarea: strip basic HTML tags for compact display
         if (this.type === 'TEXT_EDITOR' || this.type === 'TEXT_AREA') {
             return String(v).replace(/<[^>]*>/g, '').trim() || '--';
         }
         return String(v);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaFormFieldV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: MetaFormFieldV2Component, isStandalone: true, selector: "phoenix-meta-form-field-v2", inputs: { field: "field", form: "form", readOnly: "readOnly", disableForm: "disableForm" }, ngImport: i0, template: "<div [formGroup]=\"form\">\n  @if (!field.hidden) {\n  <div class=\"meta-field flex flex-column gap-2\" [style.order]=\"field.order ?? null\"\n    [attr.data-cy]=\"'meta-field-' + key\">\n\n    @if (userFriendlyMessage()) {\n    <label class=\"meta-label\" [attr.for]=\"key\">\n      {{ userFriendlyMessage()! | translate }}\n      @if (field.mandatory) { <span class=\"meta-required\">*</span> }\n    </label>\n    }\n\n      <!-- READ ONLY (page-level ili field-level) -->\n      @if (isReadOnly()) {\n        <phoenix-read-only-input-v2 [field]=\"field\" [form]=\"form\"></phoenix-read-only-input-v2>\n      } @else {\n\n      @switch (type) {\n\n        @case (MetaFieldType.TEXT) {\n        <input pInputText [id]=\"key\" [formControlName]=\"key\"\n          [attr.placeholder]=\"placeholderKey() ? (placeholderKey()! | translate) : null\" [readonly]=\"isReadOnly()\">\n        }\n\n        @case (MetaFieldType.PASSWORD) {\n        <!-- Ako nema\u0161 legacy komponentu, mo\u017Ee\u0161 samo input type=\"password\" -->\n        <phoenix-meta-password-feild [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\" [parentForm]=\"form\">\n        </phoenix-meta-password-feild>\n        }\n\n        @case (MetaFieldType.TEXT_AREA) {\n        <textarea pTextarea class=\"meta-textarea\" [id]=\"key\" [formControlName]=\"key\" fluid [autoResize]=\"false\" rows=\"5\"\n          [readonly]=\"isReadOnly()\" [attr.placeholder]=\"placeholderKey() ? (placeholderKey()! | translate) : null\">\n                </textarea>\n        }\n\n        @case (MetaFieldType.NUMBER) {\n        <p-inputNumber [inputId]=\"key\" [formControlName]=\"key\">\n        </p-inputNumber>\n        }\n\n        @case (MetaFieldType.DATE) {\n        <p-datepicker [inputId]=\"key\" [formControlName]=\"key\" [showIcon]=\"true\">\n        </p-datepicker>\n        }\n\n        @case (MetaFieldType.SS_OPTION) {\n        <p-select [inputId]=\"key\" [options]=\"field.configuration.options ?? []\" optionLabel=\"label\" optionValue=\"value\"\n          [formControlName]=\"key\" [showClear]=\"false\">\n        </p-select>\n        }\n\n        @case (MetaFieldType.SS_OPTION_OBJECT_BASED) {\n        <p-select [inputId]=\"key\" [options]=\"field.configuration.options ?? []\" optionLabel=\"label\" [formControlName]=\"key\"\n          [showClear]=\"true\">\n        </p-select>\n        }\n\n        @case (MetaFieldType.MS_OPTION) {\n        <p-multiselect [inputId]=\"key\" [options]=\"field.configuration.options ?? []\" optionLabel=\"label\" optionValue=\"value\"\n          [formControlName]=\"key\" [showClear]=\"false\" display=\"chip\">\n        </p-multiselect>\n        }\n\n        @case (MetaFieldType.CHECKBOX) {\n        <div class=\"flex align-items-center gap-2\">\n          <p-checkbox [inputId]=\"key\" [binary]=\"true\" [formControlName]=\"key\">\n          </p-checkbox>\n\n          @if (placeholderKey()) {\n          <label [attr.for]=\"key\" class=\"meta-inline-label\">\n            {{ placeholderKey()! | translate }}\n          </label>\n          }\n        </div>\n        }\n\n        <!-- advanced: preko postoje\u0107ih komponenti -->\n        @case (MetaFieldType.TIMEPERIOD) {\n        <phoenix-meta-timeperiod [formControlName]=\"key\" [control]=\"field\" [parentForm]=\"form\"></phoenix-meta-timeperiod>\n        }\n\n        @case (MetaFieldType.CURRENCY) {\n        <phoenix-meta-currency [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n          [parentForm]=\"form\"></phoenix-meta-currency>\n        }\n\n        @case (MetaFieldType.START_DUE_DATE) {\n        <phoenix-meta-start-due-date-v2\n          [formControlName]=\"key\"\n          [attr.data-cy]=\"'start-due-' + key\">\n        </phoenix-meta-start-due-date-v2>\n        }\n\n        @case (MetaFieldType.TEXT_EDITOR) {\n        <phoenix-meta-text-editor [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n          [parentForm]=\"form\"></phoenix-meta-text-editor>\n        }\n\n        @case (MetaFieldType.CHECKBOX_COLOR) {\n        <phoenix-meta-checkbox-color-picker-v2\n          [formControlName]=\"key\"\n          [options]=\"(field.configuration.extra?.['colorGrid'] ?? [])\"\n          [disable]=\"isDisabled()\">\n        </phoenix-meta-checkbox-color-picker-v2>\n        }\n\n        @case (MetaFieldType.SWITCH) {\n        <phoenix-meta-switch [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n          [parentForm]=\"form\"></phoenix-meta-switch>\n        }\n\n        @case (MetaFieldType.SELECT_BUTTON) {\n        <phoenix-meta-select-button [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n          [parentForm]=\"form\"></phoenix-meta-select-button>\n        }\n\n        @case (MetaFieldType.ASSIGN) {\n        <phoenix-meta-assign-responsible-v2\n          [formControlName]=\"key\"\n          [items]=\"(field.configuration.extra?.['items'] ?? [])\"\n          [dialogHeaderKey]=\"(field.configuration.extra?.['dialogHeaderKey'] ?? 'LABELS.ASSIGN_RESPONSIBLE')\"\n        ></phoenix-meta-assign-responsible-v2>\n        }\n\n        <!-- @case (MetaFieldType.ASSIGN_ASSET) {\n        <phoenix-meta-assign-asset [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n          [parentForm]=\"form\"></phoenix-meta-assign-asset>\n        } -->\n\n        @case (MetaFieldType.COLOR) {\n          <phoenix-meta-color-picker-v2\n            [formControlName]=\"key\"\n            [disable]=\"isDisabled()\">\n          </phoenix-meta-color-picker-v2>\n        }\n\n        @case (MetaFieldType.UPLOAD) {\n        <phoenix-meta-upload [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n          [parentForm]=\"form\"></phoenix-meta-upload>\n        }\n\n        @case (MetaFieldType.UPLOAD_DRAG_DROP) {\n        <phoenix-meta-upload-dragdrop [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n          [parentForm]=\"form\"></phoenix-meta-upload-dragdrop>\n        }\n\n        @case (MetaFieldType.LINKS_DATA) {\n        <!-- <input pInputText [id]=\"key\" [formControlName]=\"key\" [readonly]=\"true\"> -->\n        }\n\n        @case (MetaFieldType.SLOT) { }\n\n        @default {\n        <input pInputText [id]=\"key\" [formControlName]=\"key\">\n        }\n      }\n    }\n\n\n    @if (!readOnly && showError()) {\n    <small class=\"p-error block mt-1\">\n      <i class=\"pi pi-info-circle mr-1\"></i>{{ errorText() }}\n    </small>\n    }\n  </div>\n  }\n</div>", styles: [".meta-field{width:100%}.meta-required{margin-left:4px;color:#ef4444}.meta-textarea{resize:none!important}.meta-inline-label{opacity:.9}.p-inputtext.ng-invalid.ng-dirty{border-color:var(--p-inputtext-border-color)!important}.p-select.ng-invalid.ng-dirty{border-color:var(--p-select-border-color)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: 
-                // PrimeNG 20
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: MetaFormFieldV2Component, isStandalone: true, selector: "phoenix-meta-form-field-v2", inputs: { field: "field", form: "form", readOnly: "readOnly", disableForm: "disableForm" }, ngImport: i0, template: "<div [formGroup]=\"form\">\n  @if (!field.hidden) {\n  <div class=\"meta-field flex flex-column gap-2\" [style.order]=\"field.order ?? null\"\n    [attr.data-cy]=\"'meta-field-' + key\">\n\n    @if (userFriendlyMessage()) {\n    <label class=\"meta-label\" [attr.for]=\"key\">\n      {{ userFriendlyMessage()! | translate }}\n      @if (field.mandatory) { <span class=\"meta-required\">*</span> }\n    </label>\n    }\n\n      <!-- READ ONLY (page-level ili field-level) -->\n      @if (isReadOnly()) {\n        <phoenix-read-only-input-v2 [field]=\"field\" [form]=\"form\"></phoenix-read-only-input-v2>\n      } @else {\n\n      @switch (type) {\n\n        @case (MetaFieldType.TEXT) {\n        <input pInputText [id]=\"key\" [formControlName]=\"key\"\n          [attr.placeholder]=\"placeholderKey() ? (placeholderKey()! | translate) : null\" [readonly]=\"isReadOnly()\">\n        }\n\n        @case (MetaFieldType.PASSWORD) {\n        <phoenix-meta-password-feild [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\" [parentForm]=\"form\">\n        </phoenix-meta-password-feild>\n        }\n\n        @case (MetaFieldType.TEXT_AREA) {\n        <textarea pTextarea class=\"meta-textarea\" [id]=\"key\" [formControlName]=\"key\" fluid [autoResize]=\"false\" rows=\"5\"\n          [readonly]=\"isReadOnly()\" [attr.placeholder]=\"placeholderKey() ? (placeholderKey()! | translate) : null\">\n                </textarea>\n        }\n\n        @case (MetaFieldType.NUMBER) {\n        <p-inputNumber [inputId]=\"key\" [formControlName]=\"key\">\n        </p-inputNumber>\n        }\n\n        @case (MetaFieldType.DATE) {\n        <p-datepicker [inputId]=\"key\" [formControlName]=\"key\" [showIcon]=\"true\">\n        </p-datepicker>\n        }\n\n        @case (MetaFieldType.SS_OPTION) {\n        <p-select [inputId]=\"key\" [options]=\"field.configuration.options ?? []\" optionLabel=\"label\" optionValue=\"value\"\n          [formControlName]=\"key\" [showClear]=\"false\">\n        </p-select>\n        }\n\n        @case (MetaFieldType.SS_OPTION_OBJECT_BASED) {\n        <p-select [inputId]=\"key\" [options]=\"field.configuration.options ?? []\" optionLabel=\"label\" [formControlName]=\"key\"\n          [showClear]=\"true\">\n        </p-select>\n        }\n\n        @case (MetaFieldType.MS_OPTION) {\n        <p-multiselect [inputId]=\"key\" [options]=\"field.configuration.options ?? []\" optionLabel=\"label\" optionValue=\"value\"\n          [formControlName]=\"key\" [showClear]=\"false\" display=\"chip\">\n        </p-multiselect>\n        }\n\n        @case (MetaFieldType.CHECKBOX) {\n        <div class=\"flex align-items-center gap-2\">\n          <p-checkbox [inputId]=\"key\" [binary]=\"true\" [formControlName]=\"key\">\n          </p-checkbox>\n\n          @if (placeholderKey()) {\n          <label [attr.for]=\"key\" class=\"meta-inline-label\">\n            {{ placeholderKey()! | translate }}\n          </label>\n          }\n        </div>\n        }\n\n        <!-- advanced: preko postoje\u0107ih komponenti -->\n        @case (MetaFieldType.TIMEPERIOD) {\n        <phoenix-meta-timeperiod [formControlName]=\"key\" [control]=\"field\" [parentForm]=\"form\"></phoenix-meta-timeperiod>\n        }\n\n        @case (MetaFieldType.CURRENCY) {\n        <phoenix-meta-currency [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n          [parentForm]=\"form\"></phoenix-meta-currency>\n        }\n\n        @case (MetaFieldType.START_DUE_DATE) {\n        <phoenix-meta-start-due-date-v2\n          [formControlName]=\"key\"\n          [attr.data-cy]=\"'start-due-' + key\">\n        </phoenix-meta-start-due-date-v2>\n        }\n\n        @case (MetaFieldType.TEXT_EDITOR) {\n        <phoenix-meta-text-editor [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n          [parentForm]=\"form\"></phoenix-meta-text-editor>\n        }\n\n        @case (MetaFieldType.CHECKBOX_COLOR) {\n        <phoenix-meta-checkbox-color-picker-v2\n          [formControlName]=\"key\"\n          [options]=\"(field.configuration.extra?.['colorGrid'] ?? [])\"\n          [disable]=\"isDisabled()\">\n        </phoenix-meta-checkbox-color-picker-v2>\n        }\n\n        @case (MetaFieldType.SWITCH) {\n        <phoenix-meta-switch [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n          [parentForm]=\"form\"></phoenix-meta-switch>\n        }\n\n        @case (MetaFieldType.SELECT_BUTTON) {\n        <phoenix-meta-select-button [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n          [parentForm]=\"form\"></phoenix-meta-select-button>\n        }\n\n        @case (MetaFieldType.ASSIGN) {\n        <phoenix-meta-assign-responsible-v2\n          [formControlName]=\"key\"\n          [items]=\"(field.configuration.extra?.['items'] ?? [])\"\n          [dialogHeaderKey]=\"(field.configuration.extra?.['dialogHeaderKey'] ?? 'LABELS.ASSIGN_RESPONSIBLE')\"\n        ></phoenix-meta-assign-responsible-v2>\n        }\n\n        <!-- @case (MetaFieldType.ASSIGN_ASSET) {\n        <phoenix-meta-assign-asset [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n          [parentForm]=\"form\"></phoenix-meta-assign-asset>\n        } -->\n\n        @case (MetaFieldType.COLOR) {\n          <phoenix-meta-color-picker-v2\n            [formControlName]=\"key\"\n            [disable]=\"isDisabled()\">\n          </phoenix-meta-color-picker-v2>\n        }\n\n        @case (MetaFieldType.UPLOAD) {\n        <phoenix-meta-upload [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n          [parentForm]=\"form\"></phoenix-meta-upload>\n        }\n\n        @case (MetaFieldType.UPLOAD_DRAG_DROP) {\n        <phoenix-meta-upload-dragdrop [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n          [parentForm]=\"form\"></phoenix-meta-upload-dragdrop>\n        }\n\n        @case (MetaFieldType.LINKS_DATA) {\n        <!-- <input pInputText [id]=\"key\" [formControlName]=\"key\" [readonly]=\"true\"> -->\n        }\n\n        @case (MetaFieldType.SLOT) { }\n\n        @default {\n        <input pInputText [id]=\"key\" [formControlName]=\"key\">\n        }\n      }\n    }\n\n\n    @if (!readOnly && showError()) {\n    <small class=\"p-error block mt-1\">\n      <i class=\"pi pi-info-circle mr-1\"></i>{{ errorText() }}\n    </small>\n    }\n  </div>\n  }\n</div>", styles: [".meta-field{width:100%}.meta-required{margin-left:4px;color:#ef4444}.meta-textarea{resize:none!important}.meta-inline-label{opacity:.9}.p-inputtext.ng-invalid.ng-dirty{border-color:var(--p-inputtext-border-color)!important}.p-select.ng-invalid.ng-dirty{border-color:var(--p-select-border-color)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: 
+                // PrimeNG 20 base inputs
                 InputTextModule }, { kind: "directive", type: i3$4.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i3$8.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "ngmodule", type: InputNumberModule }, { kind: "component", type: i3$6.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "placeholder", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "autocomplete", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i10.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3$5.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i2$7.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: 
-                // optional advanced
-                MetaTimeperiodComponent, selector: "phoenix-meta-timeperiod", inputs: ["control", "parentForm"] }, { kind: "component", type: MetaCurrencyComponent, selector: "phoenix-meta-currency" }, { kind: "component", type: MetaStartDueDateV2Component, selector: "phoenix-meta-start-due-date-v2", inputs: ["dataCy"] }, { kind: "component", type: MetaTextEditorComponent, selector: "phoenix-meta-text-editor", inputs: ["previewMode", "hideLabel"] }, { kind: "component", type: MetaCheckboxColorPickerV2Component, selector: "phoenix-meta-checkbox-color-picker-v2", inputs: ["options", "disable"] }, { kind: "component", type: MetaSwitchComponent, selector: "phoenix-meta-switch" }, { kind: "component", type: MetaSelectButtonComponent, selector: "phoenix-meta-select-button" }, { kind: "component", type: MetaAssignResponsibleV2Component, selector: "phoenix-meta-assign-responsible-v2", inputs: ["items", "dialogHeaderKey"] }, { kind: "component", type: 
+                // Advanced / custom Phoenix fields
+                MetaTimeperiodComponent, selector: "phoenix-meta-timeperiod", inputs: ["control", "parentForm"] }, { kind: "component", type: MetaCurrencyComponent, selector: "phoenix-meta-currency" }, { kind: "component", type: MetaStartDueDateV2Component, selector: "phoenix-meta-start-due-date-v2", inputs: ["dataCy", "disable"] }, { kind: "component", type: MetaTextEditorComponent, selector: "phoenix-meta-text-editor", inputs: ["previewMode", "hideLabel"] }, { kind: "component", type: MetaCheckboxColorPickerV2Component, selector: "phoenix-meta-checkbox-color-picker-v2", inputs: ["options", "disable"] }, { kind: "component", type: MetaSwitchComponent, selector: "phoenix-meta-switch" }, { kind: "component", type: MetaSelectButtonComponent, selector: "phoenix-meta-select-button" }, { kind: "component", type: MetaAssignResponsibleV2Component, selector: "phoenix-meta-assign-responsible-v2", inputs: ["items", "dialogHeaderKey"] }, { kind: "component", type: 
                 // MetaAssignAssetComponent,
-                MetaPasswordFeildComponent, selector: "phoenix-meta-password-feild" }, { kind: "component", type: MetaColorPickerV2Component, selector: "phoenix-meta-color-picker-v2", inputs: ["disable"] }, { kind: "component", type: MetaUploadComponent, selector: "phoenix-meta-upload" }, { kind: "component", type: MetaUploadComponentDragDrop, selector: "phoenix-meta-upload-dragdrop" }, { kind: "component", type: ReadOnlyInputV2Component, selector: "phoenix-read-only-input-v2", inputs: ["field", "form"] }, { kind: "pipe", type: i3$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+                MetaPasswordFeildComponent, selector: "phoenix-meta-password-feild" }, { kind: "component", type: MetaColorPickerV2Component, selector: "phoenix-meta-color-picker-v2", inputs: ["disable"] }, { kind: "component", type: MetaUploadComponent, selector: "phoenix-meta-upload" }, { kind: "component", type: MetaUploadComponentDragDrop, selector: "phoenix-meta-upload-dragdrop" }, { kind: "component", type: 
+                // Read-only renderer used when page or field is in read-only mode
+                ReadOnlyInputV2Component, selector: "phoenix-read-only-input-v2", inputs: ["field", "form"] }, { kind: "pipe", type: i3$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaFormFieldV2Component, decorators: [{
             type: Component,
@@ -9016,7 +9453,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         CommonModule,
                         ReactiveFormsModule,
                         TranslateModule,
-                        // PrimeNG 20
+                        // PrimeNG 20 base inputs
                         InputTextModule,
                         TextareaModule,
                         InputNumberModule,
@@ -9025,7 +9462,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         SelectModule,
                         DatePickerModule,
                         MessageModule,
-                        // optional advanced
+                        // Advanced / custom Phoenix fields
                         MetaTimeperiodComponent,
                         MetaCurrencyComponent,
                         MetaStartDueDateV2Component,
@@ -9039,8 +9476,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         MetaColorPickerV2Component,
                         MetaUploadComponent,
                         MetaUploadComponentDragDrop,
+                        // Read-only renderer used when page or field is in read-only mode
                         ReadOnlyInputV2Component,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [formGroup]=\"form\">\n  @if (!field.hidden) {\n  <div class=\"meta-field flex flex-column gap-2\" [style.order]=\"field.order ?? null\"\n    [attr.data-cy]=\"'meta-field-' + key\">\n\n    @if (userFriendlyMessage()) {\n    <label class=\"meta-label\" [attr.for]=\"key\">\n      {{ userFriendlyMessage()! | translate }}\n      @if (field.mandatory) { <span class=\"meta-required\">*</span> }\n    </label>\n    }\n\n      <!-- READ ONLY (page-level ili field-level) -->\n      @if (isReadOnly()) {\n        <phoenix-read-only-input-v2 [field]=\"field\" [form]=\"form\"></phoenix-read-only-input-v2>\n      } @else {\n\n      @switch (type) {\n\n        @case (MetaFieldType.TEXT) {\n        <input pInputText [id]=\"key\" [formControlName]=\"key\"\n          [attr.placeholder]=\"placeholderKey() ? (placeholderKey()! | translate) : null\" [readonly]=\"isReadOnly()\">\n        }\n\n        @case (MetaFieldType.PASSWORD) {\n        <!-- Ako nema\u0161 legacy komponentu, mo\u017Ee\u0161 samo input type=\"password\" -->\n        <phoenix-meta-password-feild [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\" [parentForm]=\"form\">\n        </phoenix-meta-password-feild>\n        }\n\n        @case (MetaFieldType.TEXT_AREA) {\n        <textarea pTextarea class=\"meta-textarea\" [id]=\"key\" [formControlName]=\"key\" fluid [autoResize]=\"false\" rows=\"5\"\n          [readonly]=\"isReadOnly()\" [attr.placeholder]=\"placeholderKey() ? (placeholderKey()! | translate) : null\">\n                </textarea>\n        }\n\n        @case (MetaFieldType.NUMBER) {\n        <p-inputNumber [inputId]=\"key\" [formControlName]=\"key\">\n        </p-inputNumber>\n        }\n\n        @case (MetaFieldType.DATE) {\n        <p-datepicker [inputId]=\"key\" [formControlName]=\"key\" [showIcon]=\"true\">\n        </p-datepicker>\n        }\n\n        @case (MetaFieldType.SS_OPTION) {\n        <p-select [inputId]=\"key\" [options]=\"field.configuration.options ?? []\" optionLabel=\"label\" optionValue=\"value\"\n          [formControlName]=\"key\" [showClear]=\"false\">\n        </p-select>\n        }\n\n        @case (MetaFieldType.SS_OPTION_OBJECT_BASED) {\n        <p-select [inputId]=\"key\" [options]=\"field.configuration.options ?? []\" optionLabel=\"label\" [formControlName]=\"key\"\n          [showClear]=\"true\">\n        </p-select>\n        }\n\n        @case (MetaFieldType.MS_OPTION) {\n        <p-multiselect [inputId]=\"key\" [options]=\"field.configuration.options ?? []\" optionLabel=\"label\" optionValue=\"value\"\n          [formControlName]=\"key\" [showClear]=\"false\" display=\"chip\">\n        </p-multiselect>\n        }\n\n        @case (MetaFieldType.CHECKBOX) {\n        <div class=\"flex align-items-center gap-2\">\n          <p-checkbox [inputId]=\"key\" [binary]=\"true\" [formControlName]=\"key\">\n          </p-checkbox>\n\n          @if (placeholderKey()) {\n          <label [attr.for]=\"key\" class=\"meta-inline-label\">\n            {{ placeholderKey()! | translate }}\n          </label>\n          }\n        </div>\n        }\n\n        <!-- advanced: preko postoje\u0107ih komponenti -->\n        @case (MetaFieldType.TIMEPERIOD) {\n        <phoenix-meta-timeperiod [formControlName]=\"key\" [control]=\"field\" [parentForm]=\"form\"></phoenix-meta-timeperiod>\n        }\n\n        @case (MetaFieldType.CURRENCY) {\n        <phoenix-meta-currency [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n          [parentForm]=\"form\"></phoenix-meta-currency>\n        }\n\n        @case (MetaFieldType.START_DUE_DATE) {\n        <phoenix-meta-start-due-date-v2\n          [formControlName]=\"key\"\n          [attr.data-cy]=\"'start-due-' + key\">\n        </phoenix-meta-start-due-date-v2>\n        }\n\n        @case (MetaFieldType.TEXT_EDITOR) {\n        <phoenix-meta-text-editor [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n          [parentForm]=\"form\"></phoenix-meta-text-editor>\n        }\n\n        @case (MetaFieldType.CHECKBOX_COLOR) {\n        <phoenix-meta-checkbox-color-picker-v2\n          [formControlName]=\"key\"\n          [options]=\"(field.configuration.extra?.['colorGrid'] ?? [])\"\n          [disable]=\"isDisabled()\">\n        </phoenix-meta-checkbox-color-picker-v2>\n        }\n\n        @case (MetaFieldType.SWITCH) {\n        <phoenix-meta-switch [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n          [parentForm]=\"form\"></phoenix-meta-switch>\n        }\n\n        @case (MetaFieldType.SELECT_BUTTON) {\n        <phoenix-meta-select-button [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n          [parentForm]=\"form\"></phoenix-meta-select-button>\n        }\n\n        @case (MetaFieldType.ASSIGN) {\n        <phoenix-meta-assign-responsible-v2\n          [formControlName]=\"key\"\n          [items]=\"(field.configuration.extra?.['items'] ?? [])\"\n          [dialogHeaderKey]=\"(field.configuration.extra?.['dialogHeaderKey'] ?? 'LABELS.ASSIGN_RESPONSIBLE')\"\n        ></phoenix-meta-assign-responsible-v2>\n        }\n\n        <!-- @case (MetaFieldType.ASSIGN_ASSET) {\n        <phoenix-meta-assign-asset [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n          [parentForm]=\"form\"></phoenix-meta-assign-asset>\n        } -->\n\n        @case (MetaFieldType.COLOR) {\n          <phoenix-meta-color-picker-v2\n            [formControlName]=\"key\"\n            [disable]=\"isDisabled()\">\n          </phoenix-meta-color-picker-v2>\n        }\n\n        @case (MetaFieldType.UPLOAD) {\n        <phoenix-meta-upload [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n          [parentForm]=\"form\"></phoenix-meta-upload>\n        }\n\n        @case (MetaFieldType.UPLOAD_DRAG_DROP) {\n        <phoenix-meta-upload-dragdrop [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n          [parentForm]=\"form\"></phoenix-meta-upload-dragdrop>\n        }\n\n        @case (MetaFieldType.LINKS_DATA) {\n        <!-- <input pInputText [id]=\"key\" [formControlName]=\"key\" [readonly]=\"true\"> -->\n        }\n\n        @case (MetaFieldType.SLOT) { }\n\n        @default {\n        <input pInputText [id]=\"key\" [formControlName]=\"key\">\n        }\n      }\n    }\n\n\n    @if (!readOnly && showError()) {\n    <small class=\"p-error block mt-1\">\n      <i class=\"pi pi-info-circle mr-1\"></i>{{ errorText() }}\n    </small>\n    }\n  </div>\n  }\n</div>", styles: [".meta-field{width:100%}.meta-required{margin-left:4px;color:#ef4444}.meta-textarea{resize:none!important}.meta-inline-label{opacity:.9}.p-inputtext.ng-invalid.ng-dirty{border-color:var(--p-inputtext-border-color)!important}.p-select.ng-invalid.ng-dirty{border-color:var(--p-select-border-color)!important}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [formGroup]=\"form\">\n  @if (!field.hidden) {\n  <div class=\"meta-field flex flex-column gap-2\" [style.order]=\"field.order ?? null\"\n    [attr.data-cy]=\"'meta-field-' + key\">\n\n    @if (userFriendlyMessage()) {\n    <label class=\"meta-label\" [attr.for]=\"key\">\n      {{ userFriendlyMessage()! | translate }}\n      @if (field.mandatory) { <span class=\"meta-required\">*</span> }\n    </label>\n    }\n\n      <!-- READ ONLY (page-level ili field-level) -->\n      @if (isReadOnly()) {\n        <phoenix-read-only-input-v2 [field]=\"field\" [form]=\"form\"></phoenix-read-only-input-v2>\n      } @else {\n\n      @switch (type) {\n\n        @case (MetaFieldType.TEXT) {\n        <input pInputText [id]=\"key\" [formControlName]=\"key\"\n          [attr.placeholder]=\"placeholderKey() ? (placeholderKey()! | translate) : null\" [readonly]=\"isReadOnly()\">\n        }\n\n        @case (MetaFieldType.PASSWORD) {\n        <phoenix-meta-password-feild [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\" [parentForm]=\"form\">\n        </phoenix-meta-password-feild>\n        }\n\n        @case (MetaFieldType.TEXT_AREA) {\n        <textarea pTextarea class=\"meta-textarea\" [id]=\"key\" [formControlName]=\"key\" fluid [autoResize]=\"false\" rows=\"5\"\n          [readonly]=\"isReadOnly()\" [attr.placeholder]=\"placeholderKey() ? (placeholderKey()! | translate) : null\">\n                </textarea>\n        }\n\n        @case (MetaFieldType.NUMBER) {\n        <p-inputNumber [inputId]=\"key\" [formControlName]=\"key\">\n        </p-inputNumber>\n        }\n\n        @case (MetaFieldType.DATE) {\n        <p-datepicker [inputId]=\"key\" [formControlName]=\"key\" [showIcon]=\"true\">\n        </p-datepicker>\n        }\n\n        @case (MetaFieldType.SS_OPTION) {\n        <p-select [inputId]=\"key\" [options]=\"field.configuration.options ?? []\" optionLabel=\"label\" optionValue=\"value\"\n          [formControlName]=\"key\" [showClear]=\"false\">\n        </p-select>\n        }\n\n        @case (MetaFieldType.SS_OPTION_OBJECT_BASED) {\n        <p-select [inputId]=\"key\" [options]=\"field.configuration.options ?? []\" optionLabel=\"label\" [formControlName]=\"key\"\n          [showClear]=\"true\">\n        </p-select>\n        }\n\n        @case (MetaFieldType.MS_OPTION) {\n        <p-multiselect [inputId]=\"key\" [options]=\"field.configuration.options ?? []\" optionLabel=\"label\" optionValue=\"value\"\n          [formControlName]=\"key\" [showClear]=\"false\" display=\"chip\">\n        </p-multiselect>\n        }\n\n        @case (MetaFieldType.CHECKBOX) {\n        <div class=\"flex align-items-center gap-2\">\n          <p-checkbox [inputId]=\"key\" [binary]=\"true\" [formControlName]=\"key\">\n          </p-checkbox>\n\n          @if (placeholderKey()) {\n          <label [attr.for]=\"key\" class=\"meta-inline-label\">\n            {{ placeholderKey()! | translate }}\n          </label>\n          }\n        </div>\n        }\n\n        <!-- advanced: preko postoje\u0107ih komponenti -->\n        @case (MetaFieldType.TIMEPERIOD) {\n        <phoenix-meta-timeperiod [formControlName]=\"key\" [control]=\"field\" [parentForm]=\"form\"></phoenix-meta-timeperiod>\n        }\n\n        @case (MetaFieldType.CURRENCY) {\n        <phoenix-meta-currency [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n          [parentForm]=\"form\"></phoenix-meta-currency>\n        }\n\n        @case (MetaFieldType.START_DUE_DATE) {\n        <phoenix-meta-start-due-date-v2\n          [formControlName]=\"key\"\n          [attr.data-cy]=\"'start-due-' + key\">\n        </phoenix-meta-start-due-date-v2>\n        }\n\n        @case (MetaFieldType.TEXT_EDITOR) {\n        <phoenix-meta-text-editor [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n          [parentForm]=\"form\"></phoenix-meta-text-editor>\n        }\n\n        @case (MetaFieldType.CHECKBOX_COLOR) {\n        <phoenix-meta-checkbox-color-picker-v2\n          [formControlName]=\"key\"\n          [options]=\"(field.configuration.extra?.['colorGrid'] ?? [])\"\n          [disable]=\"isDisabled()\">\n        </phoenix-meta-checkbox-color-picker-v2>\n        }\n\n        @case (MetaFieldType.SWITCH) {\n        <phoenix-meta-switch [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n          [parentForm]=\"form\"></phoenix-meta-switch>\n        }\n\n        @case (MetaFieldType.SELECT_BUTTON) {\n        <phoenix-meta-select-button [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n          [parentForm]=\"form\"></phoenix-meta-select-button>\n        }\n\n        @case (MetaFieldType.ASSIGN) {\n        <phoenix-meta-assign-responsible-v2\n          [formControlName]=\"key\"\n          [items]=\"(field.configuration.extra?.['items'] ?? [])\"\n          [dialogHeaderKey]=\"(field.configuration.extra?.['dialogHeaderKey'] ?? 'LABELS.ASSIGN_RESPONSIBLE')\"\n        ></phoenix-meta-assign-responsible-v2>\n        }\n\n        <!-- @case (MetaFieldType.ASSIGN_ASSET) {\n        <phoenix-meta-assign-asset [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n          [parentForm]=\"form\"></phoenix-meta-assign-asset>\n        } -->\n\n        @case (MetaFieldType.COLOR) {\n          <phoenix-meta-color-picker-v2\n            [formControlName]=\"key\"\n            [disable]=\"isDisabled()\">\n          </phoenix-meta-color-picker-v2>\n        }\n\n        @case (MetaFieldType.UPLOAD) {\n        <phoenix-meta-upload [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n          [parentForm]=\"form\"></phoenix-meta-upload>\n        }\n\n        @case (MetaFieldType.UPLOAD_DRAG_DROP) {\n        <phoenix-meta-upload-dragdrop [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n          [parentForm]=\"form\"></phoenix-meta-upload-dragdrop>\n        }\n\n        @case (MetaFieldType.LINKS_DATA) {\n        <!-- <input pInputText [id]=\"key\" [formControlName]=\"key\" [readonly]=\"true\"> -->\n        }\n\n        @case (MetaFieldType.SLOT) { }\n\n        @default {\n        <input pInputText [id]=\"key\" [formControlName]=\"key\">\n        }\n      }\n    }\n\n\n    @if (!readOnly && showError()) {\n    <small class=\"p-error block mt-1\">\n      <i class=\"pi pi-info-circle mr-1\"></i>{{ errorText() }}\n    </small>\n    }\n  </div>\n  }\n</div>", styles: [".meta-field{width:100%}.meta-required{margin-left:4px;color:#ef4444}.meta-textarea{resize:none!important}.meta-inline-label{opacity:.9}.p-inputtext.ng-invalid.ng-dirty{border-color:var(--p-inputtext-border-color)!important}.p-select.ng-invalid.ng-dirty{border-color:var(--p-select-border-color)!important}\n"] }]
         }], propDecorators: { field: [{
                 type: Input,
                 args: [{ required: true }]
@@ -9079,22 +9517,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  */
 const META_FORM_ASYNC_EXECUTOR = new InjectionToken('META_FORM_ASYNC_EXECUTOR');
 
+// Symbols used to attach submit-only validators and cleanup subscriptions
+// directly onto the FormGroup instance without polluting its public API.
 const SUBMIT_VALIDATORS = Symbol('META_FORM_V2_SUBMIT_VALIDATORS');
 const SUBMIT_CLEAR_SUBS = Symbol('META_FORM_V2_SUBMIT_CLEAR_SUBS');
 class MetaSubmitValidatorService {
     executor;
+    /** Used to automatically clean up subscriptions when the service is destroyed */
     dr = inject(DestroyRef);
-    constructor(executor) {
+    constructor(
+    /**
+     * Optional async executor abstraction used to perform server-side validation
+     * (e.g. uniqueness checks).
+     *
+     * If not provided, submit-only validators will be skipped gracefully.
+     */
+    executor) {
         this.executor = executor;
     }
+    /**
+     * Registers submit-only validators on the given form.
+     *
+     * - Attaches validator metadata to the form instance (via Symbols)
+     * - Cleans up any previous subscriptions
+     * - Subscribes to valueChanges in order to auto-clear submit-only errors
+     *   when the user modifies the field after a failed submit
+     */
     register(form, validators) {
         const list = validators ?? [];
         form[SUBMIT_VALIDATORS] = list;
-        // cleanup starih sub-ova
+        // Cleanup old auto-clear subscriptions
         const old = form[SUBMIT_CLEAR_SUBS] ?? [];
         old.forEach((s) => s.unsubscribe());
         form[SUBMIT_CLEAR_SUBS] = [];
-        // auto-clear submit-only errora čim user menja input
+        // Subscribe to valueChanges in order to remove submit-only errors
+        // as soon as the user changes the input.
         const subs = [];
         for (const v of list) {
             const ctrl = form.get(v.controlKey);
@@ -9104,29 +9561,45 @@ class MetaSubmitValidatorService {
             subs.push(ctrl.valueChanges
                 .pipe(takeUntilDestroyed(this.dr))
                 .subscribe(() => {
-                // ✅ samo ukloni submit-only error, bez updateValueAndValidity
+                // ✅ Only remove submit-only error.
+                // ❌ Do NOT trigger updateValueAndValidity here to avoid noisy re-validation.
                 this.removeError(ctrl, errorKey);
             }));
         }
         form[SUBMIT_CLEAR_SUBS] = subs;
     }
+    /**
+     * Executes submit-only validators.
+     *
+     * Flow:
+     * 1) Mark all controls as touched/dirty so sync validation messages become visible
+     * 2) If form is sync-invalid, skip async validation
+     * 3) Clear previous submit-only errors
+     * 4) Execute async validators sequentially
+     * 5) Apply mapped errors back to controls
+     *
+     * Returns:
+     * - true  → form is valid (sync + submit-only async)
+     * - false → at least one submit-only validator failed
+     */
     async run(form) {
         const validators = form[SUBMIT_VALIDATORS] ?? [];
-        // pokaži sync greške
+        // Make sure sync validation errors are visible on submit
         this.markAllTouchedOnSubmit(form);
-        // ✅ ne mora emitEvent true ovde
+        // Do not emit valueChanges/statusChanges events here
         form.updateValueAndValidity({ emitEvent: false });
         if (!validators.length)
             return form.valid;
-        // ako nema executor-a, ne blokiraj
+        // If no async executor is provided, do not block submit
         if (!this.executor)
             return form.valid;
-        // očisti stare submit-only greške
+        // Clear previous submit-only errors before re-running validation
         this.clearSubmitErrors(form, validators);
-        // ako je sync-invalid, nema smisla okidati async
+        // If sync validation fails, skip async calls
         form.updateValueAndValidity({ emitEvent: false });
         if (form.invalid)
             return false;
+        // Execute submit-only validators sequentially
         for (const v of validators) {
             const req = v.buildRequest(form);
             if (!req)
@@ -9141,7 +9614,9 @@ class MetaSubmitValidatorService {
                 const errorKey = v.errorKey ?? 'unique';
                 const msg = mapped?.message ??
                     'VALIDATION_MESSAGE.VALUE_IS_ALREADY_IN_USE';
+                // Attach submit-only error to control
                 ctrl.setErrors({ ...(ctrl.errors ?? {}), [errorKey]: msg });
+                // Force visibility of the error in UI
                 ctrl.markAsTouched();
                 ctrl.markAsDirty();
                 return false;
@@ -9149,6 +9624,10 @@ class MetaSubmitValidatorService {
         }
         return form.valid;
     }
+    /**
+     * Removes a specific submit-only error from the control without
+     * touching other validation errors.
+     */
     removeError(ctrl, errorKey) {
         if (!ctrl.errors?.[errorKey])
             return;
@@ -9156,6 +9635,10 @@ class MetaSubmitValidatorService {
         delete next[errorKey];
         ctrl.setErrors(Object.keys(next).length ? next : null);
     }
+    /**
+     * Clears submit-only errors for all controls involved in submit validators.
+     * This does NOT trigger updateValueAndValidity to avoid unnecessary re-validation.
+     */
     clearSubmitErrors(form, validators) {
         const keys = new Set();
         validators.forEach((v) => keys.add(v.controlKey));
@@ -9166,10 +9649,14 @@ class MetaSubmitValidatorService {
                 return;
             const nextErrors = { ...(ctrl.errors ?? {}) };
             errorKeys.forEach((ek) => delete nextErrors[ek]);
-            // ✅ samo setErrors, bez updateValueAndValidity
+            // ✅ Only update errors object, no re-validation side effects
             ctrl.setErrors(Object.keys(nextErrors).length ? nextErrors : null);
         });
     }
+    /**
+     * Marks all form controls as touched and dirty.
+     * This is used on submit to make validation errors visible to the user.
+     */
     markAllTouchedOnSubmit(form) {
         Object.values(form.controls).forEach((c) => {
             c.markAsTouched();
@@ -9189,71 +9676,129 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                     args: [META_FORM_ASYNC_EXECUTOR]
                 }] }] });
 
+/**
+ * Validator for START_DUE_DATE composite field.
+ *
+ * Responsibilities:
+ *  - Optionally enforce that BOTH startDate and endDate are provided (requireBoth)
+ *  - Validate that provided dates are valid Date values
+ *  - Ensure startDate is not after endDate
+ *
+ * This is a synchronous validator and should be attached to the single FormControl
+ * that represents the composite START_DUE_DATE value.
+ */
 function startDueDateV2Validator(opts) {
     const requireBoth = !!opts?.requireBoth;
     return (control) => {
         const v = control.value;
         const sdRaw = v?.startDate ?? null;
         const edRaw = v?.endDate ?? null;
-        // oba prazna
+        // Case 1: both dates are empty
+        // - If both are required -> invalid
+        // - Otherwise -> valid (optional date range)
         if (!sdRaw && !edRaw) {
             return requireBoth ? { bothDates: true } : null;
         }
-        // fali jedan (ako su oba obavezna)
+        // Case 2: only one date is provided but both are required
         if (requireBoth && (!sdRaw || !edRaw)) {
             return { bothDates: true };
         }
-        // ako nije requireBoth, a jedan fali -> ok
+        // Case 3: both are optional and one is missing -> valid
         if (!sdRaw || !edRaw)
             return null;
+        // Parse raw values into Date instances
         const sd = new Date(sdRaw);
         const ed = new Date(edRaw);
+        // Invalid date values (e.g. unparsable strings)
         if (isNaN(sd.getTime()) || isNaN(ed.getTime()))
             return { dueDate: true };
+        // Normalize both dates to midnight for date-only comparison (ignore time)
         const s = new Date(sd);
         s.setHours(0, 0, 0, 0);
         const e = new Date(ed);
         e.setHours(0, 0, 0, 0);
+        // Start date must not be after end date
         return s.getTime() > e.getTime() ? { dueDate: true } : null;
     };
 }
 
+/**
+ * Builds synchronous Angular validators for a single meta-field.
+ *
+ * This function only returns *sync* validators:
+ * - Required, min/max, length
+ * - Email
+ * - Regex / phone
+ * - Timeperiod
+ * - Start/Due date cross-field-ish validator (but still sync)
+ * - Whitespace rules
+ * - Dangerous characters
+ *
+ * Submit-only async validators (e.g. uniqueness) are handled elsewhere (MetaSubmitValidatorService).
+ */
 function buildSyncValidators(field, ctx) {
     const out = [];
+    // `field.validators` is a metadata-driven bag of validation rules
     const v = field.validators ?? {};
+    // Field type drives some special-case validators
     const type = field.configuration.type;
+    // ---- numeric constraints ----
     if (v.min != null)
         out.push(Validators.min(v.min));
     if (v.max != null)
         out.push(Validators.max(v.max));
+    // ---- length constraints ----
     if (v.minLength != null)
         out.push(Validators.minLength(v.minLength));
     if (v.maxLength != null)
         out.push(Validators.maxLength(v.maxLength));
+    // ---- email ----
     if (v.email)
         out.push(Validators.email);
-    if (v.regex?.regexType)
+    // ---- regex / pattern ----
+    // Supports either:
+    // - plain pattern string
+    // - "/.../flags" format which we try to compile into RegExp
+    if (v.regex?.regexType) {
         out.push(Validators.pattern(resolvePattern(v.regex.regexType) ?? v.regex.regexType));
+    }
+    // ---- phone ----
+    // if (v.phone) out.push(Validators.pattern(/^\+?[1-9]\d{7,14}$/));
     if (v.phone)
-        out.push(Validators.pattern(/^\+?[1-9]\d{7,14}$/));
+        out.push(phoneHumanValidator({ minDigits: 8, maxDigits: 15 }));
+    // ---- time period ----
+    // Localized validator; tpMin can enforce minimal value/length depending on your implementation.
     if (v.timeperiod)
         out.push(timePeriod(ctx?.lang ?? 'en', v.tpMin));
+    // ---- start/due date ----
+    // Apply the validator if field is of START_DUE_DATE type or if metadata explicitly enables dueDate.
+    // requireBoth is driven by field.mandatory
     if (type === 'START_DUE_DATE' || v.dueDate) {
         out.push(startDueDateV2Validator({ requireBoth: !!field.mandatory }));
     }
+    // ---- required ----
     if (field.mandatory)
         out.push(Validators.required);
+    // ---- whitespace guard for required text fields ----
+    // Prevent "   " from passing required validation.
     if (field.mandatory && (type === 'TEXT' || type === 'TEXT_AREA')) {
         out.push(WhiteSpaceValidator.noWhiteSpaceValidator);
     }
+    // ---- dangerous characters ----
+    // Applied to text and textarea only.
     if (type === 'TEXT' || type === 'TEXT_AREA') {
         out.push(noDangerousCharsValidator());
     }
     return out;
 }
+/**
+ * Tries to interpret a regex string in "/pattern/flags" format.
+ * If parsing fails, returns null and the caller falls back to using the raw string.
+ */
 function resolvePattern(regexType) {
     if (!regexType)
         return null;
+    // Support format like: "/^[0-9]+$/g"
     const m = regexType.match(/^\/(.+)\/([gimsuy]*)$/);
     if (m) {
         try {
@@ -9263,26 +9808,94 @@ function resolvePattern(regexType) {
             return null;
         }
     }
+    // Otherwise treat it as a plain string pattern
     return regexType;
 }
+/**
+ * Phone validator that accepts common human formats:
+ * - spaces, hyphens, parentheses
+ * - local numbers starting with 0 (e.g. 060...)
+ * - international numbers with +
+ *
+ * Strategy:
+ * 1) Strip formatting chars
+ * 2) Validate the normalized digits
+ */
+function phoneHumanValidator(opts) {
+    const min = opts?.minDigits ?? 8;
+    const max = opts?.maxDigits ?? 15;
+    return (control) => {
+        const raw = (control.value ?? '').toString().trim();
+        if (!raw)
+            return null; // let required handle empties
+        // Keep leading "+" if present, remove common separators
+        const normalized = raw
+            .replace(/[\s\-().]/g, '') // remove spaces, dashes, parentheses, dots
+            .replace(/(?!^\+)\+/g, ''); // remove any "+" not at the start
+        // Allow optional leading "+"
+        const hasPlus = normalized.startsWith('+');
+        const digits = hasPlus ? normalized.slice(1) : normalized;
+        // Digits only after normalization
+        if (!/^\d+$/.test(digits))
+            return { phone: true };
+        // Length constraints (digits only)
+        if (digits.length < min || digits.length > max)
+            return { phone: true };
+        // If it has "+", require country code style (first digit not 0)
+        if (hasPlus && digits.startsWith('0'))
+            return { phone: true };
+        // If local, allow leading 0 (e.g. 060...)
+        return null;
+    };
+}
 
+/**
+ * Ensures that the FormGroup structure matches the provided metadata (flat field list).
+ *
+ * Responsibilities:
+ * - Create missing FormControls based on MetaFieldConfig
+ * - Apply (and re-apply) synchronous validators derived from metadata
+ * - Sync disabled/enabled state with metadata
+ * - Remove obsolete controls that are no longer present in metadata
+ *
+ * This function is intentionally idempotent:
+ * Calling it multiple times with the same metadata should not break form state.
+ */
 function ensureControlsV2(fb, form, flat, initialValues, ctx) {
+    // Tracks which control keys are allowed by current metadata
     const allowed = new Set();
     for (const field of flat) {
         const key = field?.configuration?.key;
         if (!key)
             continue;
         allowed.add(key);
+        /**
+         * Create control if it does not exist yet.
+         * Initial value is taken from initialValues map if provided,
+         * otherwise defaults to null.
+         */
         if (!form.contains(key)) {
             form.addControl(key, new FormControl(initialValues?.[key] ?? null));
         }
         const ctrl = form.get(key);
         if (!ctrl)
             continue;
-        // 1) validators
+        /**
+         * (1) Sync validators:
+         * Rebuild and apply synchronous validators based on current field metadata.
+         * This ensures that changes in metadata (e.g. required, min/max, patterns)
+         * are reflected on the form control.
+         */
         ctrl.setValidators(buildSyncValidators(field, ctx));
+        // Recalculate validity silently (do not emit events to avoid UI side-effects)
         ctrl.updateValueAndValidity({ emitEvent: false });
-        // 2) disabled state (symetric)
+        /**
+         * (2) Sync disabled/enabled state:
+         * The control's enabled state must reflect the field metadata.
+         * This is symmetric:
+         * - If metadata says "disable" → disable control
+         * - If metadata says "enable"  → enable control
+         */
         const shouldBeDisabled = !!field.disable;
         if (shouldBeDisabled && ctrl.enabled) {
             ctrl.disable({ emitEvent: false });
@@ -9291,6 +9904,13 @@ function ensureControlsV2(fb, form, flat, initialValues, ctx) {
             ctrl.enable({ emitEvent: false });
         }
     }
+    /**
+     * Remove any controls that are present in the FormGroup
+     * but no longer exist in the metadata.
+     *
+     * This keeps the form structure in sync when metadata changes dynamically
+     * (e.g. conditional fields, stage-based forms, etc.).
+     */
     Object.keys(form.controls).forEach((k) => {
         if (!allowed.has(k))
             form.removeControl(k);
@@ -9311,48 +9931,101 @@ function flattenControls(input) {
 }
 
 class MetaFormV2Component {
+    /** Form instance created/owned by the parent (dialog/page) */
     form;
+    /**
+     * V2 metadata/config:
+     * - controls (grouped or flat)
+     * - initialValues
+     * - submitValidators (run on submit only)
+     * - setupDependencies (optional runtime bindings)
+     */
     config;
-    /** Page-level readOnly (parent toggles) */
+    /**
+     * Page-level readOnly state controlled by parent.
+     * Used both for rendering and for "enter edit mode" behavior.
+     */
     readOnly = false;
-    /** Optional layout props */
+    /** Optional layout customization for inner content wrapper */
     contentStyle = null;
+    /** Optional class name(s) applied to inner content wrapper */
     contentClass = null;
+    /** Builds/ensures controls exist (ensures validators & default values are wired) */
     fb = inject(FormBuilder);
+    /** Registers and executes submit-only validators (async validation on submit) */
     submitValidator = inject(MetaSubmitValidatorService);
+    /** Used for validator localization (lang-dependent validators / messages) */
     translate = inject(TranslateService);
+    /**
+     * A lightweight signature of the current metadata structure.
+     * Used to detect when the form schema changes (and avoid unnecessary resets).
+     */
     lastSignature = '';
+    /**
+     * Cleanup function returned by setupDependencies (if any).
+     * Called only when metadata structure changes or on destroy.
+     */
     depCleanup;
-    /** PrimeNG accordion active value(s) */
+    /**
+     * PrimeNG Accordion "value" for opened panels.
+     * For multiple panels, PrimeNG expects an array of ids.
+     */
     expandedGroupIds = [];
     ngOnChanges(changes) {
         if (!this.form || !this.config)
             return;
+        /**
+         * Flatten metadata controls to a single list for:
+         * - building/enforcing FormControls
+         * - dependency binding
+         * - signature calculation
+         */
         const flat = flattenControls(this.config.controls);
+        /**
+         * Signature is used to detect real schema changes.
+         * We intentionally ignore labels/props and track key+type only.
+         */
         const signature = flat.map((f) => `${f.configuration.key}:${f.configuration.type}`).join('|');
+        /** "config changed" includes initialValues, validators, dependencies, etc. */
         const configChanged = !!changes['config'];
+        /** "form changed" means parent passed a different FormGroup instance */
         const formChanged = !!changes['form'];
+        /** schema changed if the signature differs from the last one */
         const metaChanged = signature !== this.lastSignature;
+        /**
+         * Special case: entering edit mode (readOnly true -> false).
+         * Used to selectively show validation for already-filled values.
+         */
         const enteringEdit = !!changes['readOnly'] &&
             changes['readOnly'].previousValue === true &&
             changes['readOnly'].currentValue === false;
-        // If nothing relevant changed, exit
+        // If nothing relevant changed, exit early to avoid unnecessary work.
         if (!configChanged && !formChanged && !metaChanged && !enteringEdit)
             return;
-        // Cleanup dependencies ONLY when metadata/structure changes
+        /**
+         * Dependencies are tied to the metadata structure.
+         * If schema changed, cleanup old subscriptions/bindings first.
+         */
         if (configChanged || metaChanged) {
             this.depCleanup?.();
             this.depCleanup = undefined;
         }
-        // Ensure controls exist + sync validators
+        /**
+         * Ensure controls exist on the passed FormGroup and sync validators.
+         * This is where missing controls are added and validator wiring is applied.
+         */
         const initial = this.config.initialValues ?? {};
         ensureControlsV2(this.fb, this.form, flat, initial, { lang: this.translate.currentLang });
-        // Patch initial values (no emit)
+        /**
+         * Patch initial values without emitting changes:
+         * - prevents loops
+         * - keeps create/edit initialization silent
+         */
         this.form.patchValue(initial, { emitEvent: false });
         this.form.updateValueAndValidity({ emitEvent: false });
         /**
-         * Initialize accordion expanded panels ONLY when structure changed.
-         * This must NOT run on readOnly toggle, otherwise you "reset" user-collapsed state.
+         * Initialize accordion open panels ONLY when schema changes.
+         * IMPORTANT: do NOT do this on readOnly toggle, otherwise user-collapsed state resets.
          */
         if (metaChanged) {
             if (this.isGrouped) {
@@ -9366,9 +10039,16 @@ class MetaFormV2Component {
                 this.expandedGroupIds = [];
             }
         }
-        // Register submit-only validators (safe even if empty)
+        /**
+         * Register submit-only validators.
+         * Safe to call even if empty; service will attach necessary structures internally.
+         */
         this.submitValidator.register(this.form, this.config.submitValidators);
-        // Bind dependencies ONLY when metadata/structure changes
+        /**
+         * Bind dependencies ONLY when schema changes.
+         * setupDependencies can subscribe to valueChanges, set options, reset fields, etc.
+         * If it returns a function, we store it for cleanup.
+         */
         if ((configChanged || metaChanged) && this.config.setupDependencies) {
             const maybeCleanup = this.config.setupDependencies({
                 form: this.form,
@@ -9381,10 +10061,10 @@ class MetaFormV2Component {
                 this.depCleanup = maybeCleanup;
         }
         /**
-         * Entering edit:
-         * ✅ Show errors ONLY for controls that already have a value.
-         * ❌ Do NOT trigger mandatory "required" messages for empty fields.
-         * ✅ Expand groups that contain such "visible invalid" controls.
+         * Entering edit mode:
+         * - mark controls as touched ONLY if they already have a meaningful value
+         * - expand groups that contain "visible invalid" controls (invalid + touched/dirty)
+         * This prevents CREATE dialogs from showing "required" errors immediately.
          */
         if (enteringEdit) {
             queueMicrotask(() => {
@@ -9392,12 +10072,19 @@ class MetaFormV2Component {
                 this.expandVisibleInvalidGroupsUnion();
             });
         }
+        // Store signature for the next change detection pass
         this.lastSignature = signature;
     }
-    // Template handler (typed exactly for our template usage)
+    /**
+     * PrimeNG Accordion emits value as:
+     * - single id (string/number)
+     * - array of ids
+     * We normalize everything into string[] for stable internal state.
+     */
     onAccordionValueChange(v) {
         this.expandedGroupIds = this.normalizeAccordionValue(v);
     }
+    /** Normalizes Accordion value into a stable string[] representation */
     normalizeAccordionValue(v) {
         if (Array.isArray(v))
             return v.map((x) => `${x}`);
@@ -9406,31 +10093,44 @@ class MetaFormV2Component {
         return [`${v}`];
     }
     // ---------------- template helpers ----------------
+    /** True when metadata contains at least one control definition */
     get hasControls() {
         return Array.isArray(this.config?.controls) && this.config.controls.length > 0;
     }
+    /**
+     * Heuristic: grouped config has "ctrl" on first element.
+     * (Keeps template simple and avoids extra schema fields.)
+     */
     get isGrouped() {
         const c = this.config?.controls ?? [];
         return !!c[0]?.ctrl;
     }
+    /** Returns grouped schema structure (accordion groups) */
     get groupedControls() {
         return this.config?.controls ?? [];
     }
+    /** Returns flat schema structure (grid mode) */
     get flatControls() {
         return this.config?.controls ?? [];
     }
+    /** TrackBy for group rendering */
     groupTrack(g, idx) {
         return g?.id ?? idx;
     }
-    /** PrimeNG panel value must match accordion value type */
+    /**
+     * PrimeNG accordion panel `value` must match accordion `value` type.
+     * We always convert group id to string for consistent behavior.
+     */
     panelValue(g) {
         const id = g?.id;
         return id === null || id === undefined ? '' : `${id}`;
     }
     // ---------------- core behavior ----------------
     /**
-     * Mark & validate ONLY controls that already have a meaningful value.
-     * This prevents "required" errors from showing immediately on CREATE dialogs.
+     * Marks & validates ONLY controls that already have meaningful values.
+     * This is used when switching from readOnly -> edit mode to avoid:
+     * - triggering "required" errors for empty fields
+     * - expanding groups based on empty mandatory fields on CREATE dialogs
      */
     touchAndValidateOnlyFilledControls() {
         const controls = this.form?.controls ?? {};
@@ -9438,21 +10138,21 @@ class MetaFormV2Component {
             if (!ctrl)
                 continue;
             const value = ctrl.value;
-            // Touch only if user already has a value (edit case) or prefilled values exist
+            // Touch only if this field is already populated (edit case) or prefilled.
             if (this.hasMeaningfulValue(value)) {
                 ctrl.markAsTouched();
                 ctrl.updateValueAndValidity({ emitEvent: true });
             }
         }
-        // Keep form validity in sync (optional)
+        // Optional: keep form status consistent after selective updates
         this.form.updateValueAndValidity({ emitEvent: true });
     }
     /**
-     * What counts as a "meaningful value"?
+     * Defines what counts as a "meaningful" value:
      * - non-empty strings
      * - numbers / booleans
      * - non-empty arrays
-     * - objects with at least one key (or common "selected item" shapes)
+     * - objects with common identifiers (key/uuid/id) or any own keys
      */
     hasMeaningfulValue(v) {
         if (v === null || v === undefined)
@@ -9466,34 +10166,43 @@ class MetaFormV2Component {
         if (Array.isArray(v))
             return v.length > 0;
         if (typeof v === 'object') {
-            // common selection shapes: { key }, { uuid }, { id }, etc.
+            // Common selection shapes: { key }, { uuid }, { id }, etc.
             if ('key' in v && v.key != null && `${v.key}`.trim() !== '')
                 return true;
             if ('uuid' in v && v.uuid != null && `${v.uuid}`.trim() !== '')
                 return true;
             if ('id' in v && v.id != null && `${v.id}`.trim() !== '')
                 return true;
-            // fallback: any own keys
+            // Fallback: any own keys
             return Object.keys(v).length > 0;
         }
         return false;
     }
     /**
-     * Visible invalid = invalid AND (touched OR dirty).
-     * This aligns with the goal: don't expand groups due to empty required fields on create.
+     * "Visible invalid" means:
+     * - invalid
+     * - AND user has interacted with it (touched or dirty)
+     * This matches typical UI behavior: show errors only after interaction.
      */
     isVisibleInvalid(ctrl) {
         if (!ctrl)
             return false;
         return ctrl.invalid && (ctrl.touched || ctrl.dirty);
     }
+    /**
+     * Checks if a group contains at least one visible invalid control.
+     * Used to auto-expand groups when entering edit mode.
+     */
     groupHasVisibleInvalid(g) {
         const keys = (g?.ctrl ?? [])
             .map((f) => f?.configuration?.key)
             .filter(Boolean);
         return keys.some((k) => this.isVisibleInvalid(this.form.get(k)));
     }
-    /** Expand invalid groups but KEEP already opened ones */
+    /**
+     * Expands all groups that contain visible invalid controls,
+     * while preserving any groups already expanded by the user.
+     */
     expandVisibleInvalidGroupsUnion() {
         if (!this.isGrouped)
             return;
@@ -9506,6 +10215,7 @@ class MetaFormV2Component {
             return;
         this.expandedGroupIds = Array.from(new Set([...this.expandedGroupIds, ...invalidIds]));
     }
+    /** Cleanup dependency subscriptions when component is destroyed */
     ngOnDestroy() {
         this.depCleanup?.();
     }