@fuentis/phoenix-ui 0.0.9-alpha.658 → 0.0.9-alpha.660

package/fesm2022/fuentis-phoenix-ui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Input, Component, EventEmitter, Output, ViewEncapsulation, signal, Injectable, inject, input, output, ViewChild, ChangeDetectionStrategy, ViewChildren, Pipe, DestroyRef, ChangeDetectorRef, HostBinding, ContentChild, Directive, forwardRef, HostListener, computed, InjectionToken, Optional, Inject } from '@angular/core';
+import { Input, Component, EventEmitter, Output, ViewEncapsulation, signal, Injectable, inject, input, output, ViewChild, ChangeDetectionStrategy, ViewChildren, Pipe, DestroyRef, ChangeDetectorRef, HostBinding, ContentChild, Directive, forwardRef, HostListener, computed, InjectionToken, Optional, Inject, effect } from '@angular/core';
 import * as i1$2 from '@angular/common';
 import { CommonModule, DatePipe } from '@angular/common';
 import * as i1 from 'primeng/tooltip';
@@ -37,7 +37,7 @@ import * as i5 from 'primeng/inputicon';
 import { InputIconModule } from 'primeng/inputicon';
 import * as i2$5 from 'primeng/message';
 import { MessageModule } from 'primeng/message';
-import { Subject, debounceTime, switchMap, of, catchError, map, BehaviorSubject, merge, distinctUntilChanged, combineLatest, firstValueFrom } from 'rxjs';
+import { Subject, debounceTime, switchMap, of, catchError, map, BehaviorSubject, merge, distinctUntilChanged, combineLatest, EMPTY, startWith, firstValueFrom } from 'rxjs';
 import * as i4$3 from '@angular/common/http';
 import { HttpParams } from '@angular/common/http';
 import * as i2$1 from '@angular/forms';
@@ -60,7 +60,7 @@ import { PanelModule } from 'primeng/panel';
 import { SkeletonModule } from 'primeng/skeleton';
 import * as i2$4 from 'primeng/table';
 import { TableModule } from 'primeng/table';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { takeUntilDestroyed, toSignal, toObservable } from '@angular/core/rxjs-interop';
 import * as i3$4 from 'primeng/select';
 import { SelectModule } from 'primeng/select';
 import * as i5$2 from 'primeng/multiselect';
@@ -100,6 +100,7 @@ import { Schema } from 'prosemirror-model';
 import * as i2$9 from 'primeng/fileupload';
 import { FileUploadModule } from 'primeng/fileupload';
 import * as i1$4 from '@angular/platform-browser';
+import { switchMap as switchMap$1 } from 'rxjs/operators';
 
 class InnerHeaderComponent {
     title = '';
@@ -8669,6 +8670,108 @@ function clearPersistedTableState(userPrefix) {
         store.removeItem(key);
 }
 
+/**
+ * V2 TIMEPERIOD field (signal-based, OnPush). A plain text input for a duration
+ * string (e.g. `2w 4d 6h 45m`) with a calm, always-on format helper underneath.
+ *
+ * Unlike the legacy `phoenix-meta-timeperiod`, the format guidance is rendered as
+ * neutral helper text — never a red validation error — because the pattern is
+ * guidance, not a failure. The control still carries whatever validators the form
+ * config attaches (for form-level validity on submit); this field just doesn't
+ * shout at the user while they type. The label is owned by the field wrapper, as
+ * with every other V2 field.
+ */
+class MetaTimeperiodV2Component {
+    /** Field key, used for the input id / data-cy. */
+    key = input(...(ngDevMode ? [undefined, { debugName: "key" }] : []));
+    /** Field-level disable coming from the meta config (combined with the CVA state). */
+    disable = input(false, ...(ngDevMode ? [{ debugName: "disable" }] : []));
+    formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "formDisabled" }] : []));
+    /** The duration string shown in the input (the control value is this string). */
+    value = signal('', ...(ngDevMode ? [{ debugName: "value" }] : []));
+    disabled = computed(() => this.disable() || this.formDisabled(), ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(v) {
+        if (v === null || v === undefined || v === '') {
+            this.value.set('');
+            return;
+        }
+        this.value.set(typeof v === 'string' ? v : timePeriodFromMS(v));
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.formDisabled.set(isDisabled);
+    }
+    onInput(event) {
+        const next = event.target?.value ?? '';
+        this.value.set(next);
+        this.onChange(next);
+    }
+    handleBlur() {
+        this.onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaTimeperiodV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: MetaTimeperiodV2Component, isStandalone: true, selector: "phoenix-meta-timeperiod-v2", inputs: { key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: false, transformFunction: null }, disable: { classPropertyName: "disable", publicName: "disable", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => MetaTimeperiodV2Component),
+                multi: true,
+            },
+        ], ngImport: i0, template: `
+    <input
+      pInputText
+      type="text"
+      class="w-full"
+      [attr.id]="key() ?? null"
+      [attr.data-cy]="'time-period-v2-' + (key() ?? '')"
+      [value]="value()"
+      [disabled]="disabled()"
+      (input)="onInput($event)"
+      (blur)="handleBlur()"
+    />
+    <!-- Guidance only once the user starts typing — not on an empty field. -->
+    @if (value()) {
+      <small class="block mt-1 timeperiod-v2-hint">
+        <i class="pi pi-info-circle mr-1"></i>{{ 'VALIDATION_MESSAGE.VALUE_SHOULD_MATCH_TIMEPATTERN' | translate }}
+      </small>
+    }
+  `, isInline: true, styles: [".timeperiod-v2-hint{color:var(--p-text-muted-color, #6b7280);font-size:12px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$3.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i4$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaTimeperiodV2Component, decorators: [{
+            type: Component,
+            args: [{ selector: 'phoenix-meta-timeperiod-v2', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, InputTextModule, TranslateModule], template: `
+    <input
+      pInputText
+      type="text"
+      class="w-full"
+      [attr.id]="key() ?? null"
+      [attr.data-cy]="'time-period-v2-' + (key() ?? '')"
+      [value]="value()"
+      [disabled]="disabled()"
+      (input)="onInput($event)"
+      (blur)="handleBlur()"
+    />
+    <!-- Guidance only once the user starts typing — not on an empty field. -->
+    @if (value()) {
+      <small class="block mt-1 timeperiod-v2-hint">
+        <i class="pi pi-info-circle mr-1"></i>{{ 'VALIDATION_MESSAGE.VALUE_SHOULD_MATCH_TIMEPATTERN' | translate }}
+      </small>
+    }
+  `, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => MetaTimeperiodV2Component),
+                            multi: true,
+                        },
+                    ], styles: [".timeperiod-v2-hint{color:var(--p-text-muted-color, #6b7280);font-size:12px}\n"] }]
+        }], propDecorators: { key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: false }] }], disable: [{ type: i0.Input, args: [{ isSignal: true, alias: "disable", required: false }] }] } });
+
 class StripHtmlSafePipe {
     transform(value) {
         if (value === null || value === undefined)
@@ -8933,120 +9036,67 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 args: [{ required: true }]
             }] } });
 
+/**
+ * V2 ASSIGN field — signal-based ControlValueAccessor (OnPush, no manual CD).
+ * Holds the full selected assignee (downstream fields often need more than uuid);
+ * a picker dialog returns the chosen row.
+ */
 class MetaAssignResponsibleV2Component {
-    /**
-     * 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';
+    /** Selectable assignees shown in the picker dialog. */
+    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
+    /** i18n key for the dialog header title. */
+    dialogHeaderKey = input('LABELS.ASSIGN_RESPONSIBLE', ...(ngDevMode ? [{ debugName: "dialogHeaderKey" }] : []));
     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).
-     */
+    /** The full selected assignee bound to the parent control. */
+    value = signal(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    /** Disabled state from Angular Forms (this field has no separate field-level disable). */
+    disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
     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;
+        this.value.set(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;
+        this.disabled.set(isDisabled);
     }
-    /**
-     * Clears current assignee value.
-     * - emits `null`
-     * - marks as touched (user action)
-     */
+    /** Clears the assignee (emits null + touched). */
     clear() {
-        if (this.disabled)
+        if (this.disabled())
             return;
-        // prevent redundant emits
-        if (this.value === null) {
+        if (this.value() === null) {
             this.onTouched();
             return;
         }
-        this.value = null;
+        this.value.set(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
+     * Opens the picker dialog and applies the selected row. Touched on open
+     * (interaction started); onChange only when a row is actually selected.
      */
     openDialog() {
-        if (this.disabled)
+        if (this.disabled())
             return;
         this.onTouched();
         const ref = this.dialog.open(ObjectItemDialogComponent, {
-            header: this.translate.instant(this.dialogHeaderKey),
+            header: this.translate.instant(this.dialogHeaderKey()),
             width: '700px',
             modal: true,
             data: {
-                tableData: this.items,
+                tableData: this.items(),
                 columns: [
-                    {
-                        field: 'name',
-                        header: 'LABELS.NAME',
-                        columnType: tableColumnType.TEXT,
-                    },
-                    {
-                        field: 'function',
-                        header: 'LABELS.FUNCTION',
-                        columnType: tableColumnType.TEXT,
-                    },
-                    {
-                        field: 'phone',
-                        header: 'LABELS.PHONE',
-                        columnType: tableColumnType.TEXT,
-                    },
-                    {
-                        field: 'email',
-                        header: 'LABELS.EMAIL',
-                        columnType: tableColumnType.TEXT,
-                    },
+                    { field: 'name', header: 'LABELS.NAME', columnType: tableColumnType.TEXT },
+                    { field: 'function', header: 'LABELS.FUNCTION', columnType: tableColumnType.TEXT },
+                    { field: 'phone', header: 'LABELS.PHONE', columnType: tableColumnType.TEXT },
+                    { field: 'email', header: 'LABELS.EMAIL', columnType: tableColumnType.TEXT },
                 ],
             },
             contentStyle: { overflow: 'auto' },
@@ -9056,47 +9106,46 @@ 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;
-            if (!same) {
+            const current = this.value();
+            const same = (current?.uuid ?? null) === (response?.uuid ?? null) &&
+                JSON.stringify(current ?? null) === JSON.stringify(response ?? null);
+            this.value.set(response);
+            if (!same)
                 this.onChange(response);
-            }
             this.onTouched();
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaAssignResponsibleV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: MetaAssignResponsibleV2Component, isStandalone: true, selector: "phoenix-meta-assign-responsible-v2", inputs: { items: "items", dialogHeaderKey: "dialogHeaderKey" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: MetaAssignResponsibleV2Component, isStandalone: true, selector: "phoenix-meta-assign-responsible-v2", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, dialogHeaderKey: { classPropertyName: "dialogHeaderKey", publicName: "dialogHeaderKey", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => MetaAssignResponsibleV2Component),
                 multi: true,
             },
         ], ngImport: i0, template: `
-    @if (value?.uuid) {
+    @if (value()?.uuid) {
       <div class="flex align-items-center">
         <div>
           <p-button
             [rounded]="true"
             [text]="true"
             (onClick)="op.toggle($event)"
-            [disabled]="disabled"
+            [disabled]="disabled()"
           >
             <div class="person-wrap">
               <div class="person-avatar">
-                {{ (value?.name ?? '').toUpperCase().charAt(0) }}
+                {{ (value()?.name ?? '').toUpperCase().charAt(0) }}
               </div>
               <div>
                 <p
                   class="white-space-nowrap overflow-hidden text-overflow-ellipsis"
                 >
-                  {{ value?.name ?? '--' }}
+                  {{ value()?.name ?? '--' }}
                 </p>
                 <p
                   class="white-space-nowrap overflow-hidden text-overflow-ellipsis"
                 >
-                  {{ value?.function ?? '--' }}
+                  {{ value()?.function ?? '--' }}
                 </p>
               </div>
             </div>
@@ -9107,28 +9156,28 @@ class MetaAssignResponsibleV2Component {
               <span
                 class="block mb-2"
                 pTooltip="{{
-                  (value?.email?.length ?? 0) > 25 ? value?.email : ''
+                  (value()?.email?.length ?? 0) > 25 ? value()?.email : ''
                 }}"
                 tooltipPosition="right"
               >
                 <i class="pi pi-envelope mr-1 text-500"></i>
                 {{
-                  (value?.email?.length ?? 0) > 25
-                    ? value?.email?.slice(0, 25) + '...'
-                    : (value?.email ?? '--')
+                  (value()?.email?.length ?? 0) > 25
+                    ? value()?.email?.slice(0, 25) + '...'
+                    : (value()?.email ?? '--')
                 }}
               </span>
               <p
                 pTooltip="{{
-                  (value?.phone?.length ?? 0) > 25 ? value?.phone : ''
+                  (value()?.phone?.length ?? 0) > 25 ? value()?.phone : ''
                 }}"
                 tooltipPosition="right"
               >
                 <i class="pi pi-phone mr-1 text-500"></i>
                 {{
-                  (value?.phone?.length ?? 0) > 25
-                    ? value?.phone?.slice(0, 25) + '...'
-                    : (value?.phone ?? '--')
+                  (value()?.phone?.length ?? 0) > 25
+                    ? value()?.phone?.slice(0, 25) + '...'
+                    : (value()?.phone ?? '--')
                 }}
               </p>
             </div>
@@ -9140,7 +9189,7 @@ class MetaAssignResponsibleV2Component {
             styleClass="p-button-sm mt-1"
             type="button"
             [text]="true"
-            [disabled]="disabled"
+            [disabled]="disabled()"
             [label]="'ACTION.REASSIGN' | translate"
             (click)="op.hide(); openDialog()"
           ></p-button>
@@ -9148,7 +9197,7 @@ class MetaAssignResponsibleV2Component {
           <p-button
             type="button"
             icon="pi pi-times"
-            [disabled]="disabled"
+            [disabled]="disabled()"
             (click)="op.hide(); clear()"
             [text]="true"
             styleClass="p-button-danger p-button-sm mt-1 ml-2"
@@ -9163,14 +9212,14 @@ class MetaAssignResponsibleV2Component {
         [label]="'ACTION.ASSIGN' | translate"
         (click)="openDialog()"
         [text]="true"
-        [disabled]="disabled"
+        [disabled]="disabled()"
       ></p-button>
     }
-  `, isInline: true, styles: ["::ng-deep .p-popover-content{padding:0!important}.person-wrap{display:flex;align-items:center;margin-left:-6px}.person-wrap p{margin:0}.person-avatar{display:flex;justify-content:center;align-items:center;width:28px;height:28px;min-width:28px;min-height:28px;margin-right:5px;background-color:#e94260;color:#fff;border-radius:50%;font-size:1rem}.person-details{border-top:1px solid #e0e0e0;padding:10px;width:200px}.person-details p{margin:0;display:flex;align-items:center}.person-details i{color:#e94260;padding-right:5px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i3$2.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip"] }, { kind: "pipe", type: i4$2.TranslatePipe, name: "translate" }] });
+  `, isInline: true, styles: ["::ng-deep .p-popover-content{padding:0!important}.person-wrap{display:flex;align-items:center;margin-left:-6px}.person-wrap p{margin:0}.person-avatar{display:flex;justify-content:center;align-items:center;width:28px;height:28px;min-width:28px;min-height:28px;margin-right:5px;background-color:#e94260;color:#fff;border-radius:50%;font-size:1rem}.person-details{border-top:1px solid #e0e0e0;padding:10px;width:200px}.person-details p{margin:0;display:flex;align-items:center}.person-details i{color:#e94260;padding-right:5px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i3$2.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip"] }, { kind: "pipe", type: i4$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaAssignResponsibleV2Component, decorators: [{
             type: Component,
-            args: [{ selector: 'phoenix-meta-assign-responsible-v2', standalone: true, imports: [
+            args: [{ selector: 'phoenix-meta-assign-responsible-v2', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         CommonModule,
                         ButtonModule,
                         PopoverModule,
@@ -9183,29 +9232,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                             multi: true,
                         },
                     ], template: `
-    @if (value?.uuid) {
+    @if (value()?.uuid) {
       <div class="flex align-items-center">
         <div>
           <p-button
             [rounded]="true"
             [text]="true"
             (onClick)="op.toggle($event)"
-            [disabled]="disabled"
+            [disabled]="disabled()"
           >
             <div class="person-wrap">
               <div class="person-avatar">
-                {{ (value?.name ?? '').toUpperCase().charAt(0) }}
+                {{ (value()?.name ?? '').toUpperCase().charAt(0) }}
               </div>
               <div>
                 <p
                   class="white-space-nowrap overflow-hidden text-overflow-ellipsis"
                 >
-                  {{ value?.name ?? '--' }}
+                  {{ value()?.name ?? '--' }}
                 </p>
                 <p
                   class="white-space-nowrap overflow-hidden text-overflow-ellipsis"
                 >
-                  {{ value?.function ?? '--' }}
+                  {{ value()?.function ?? '--' }}
                 </p>
               </div>
             </div>
@@ -9216,28 +9265,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
               <span
                 class="block mb-2"
                 pTooltip="{{
-                  (value?.email?.length ?? 0) > 25 ? value?.email : ''
+                  (value()?.email?.length ?? 0) > 25 ? value()?.email : ''
                 }}"
                 tooltipPosition="right"
               >
                 <i class="pi pi-envelope mr-1 text-500"></i>
                 {{
-                  (value?.email?.length ?? 0) > 25
-                    ? value?.email?.slice(0, 25) + '...'
-                    : (value?.email ?? '--')
+                  (value()?.email?.length ?? 0) > 25
+                    ? value()?.email?.slice(0, 25) + '...'
+                    : (value()?.email ?? '--')
                 }}
               </span>
               <p
                 pTooltip="{{
-                  (value?.phone?.length ?? 0) > 25 ? value?.phone : ''
+                  (value()?.phone?.length ?? 0) > 25 ? value()?.phone : ''
                 }}"
                 tooltipPosition="right"
               >
                 <i class="pi pi-phone mr-1 text-500"></i>
                 {{
-                  (value?.phone?.length ?? 0) > 25
-                    ? value?.phone?.slice(0, 25) + '...'
-                    : (value?.phone ?? '--')
+                  (value()?.phone?.length ?? 0) > 25
+                    ? value()?.phone?.slice(0, 25) + '...'
+                    : (value()?.phone ?? '--')
                 }}
               </p>
             </div>
@@ -9249,7 +9298,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             styleClass="p-button-sm mt-1"
             type="button"
             [text]="true"
-            [disabled]="disabled"
+            [disabled]="disabled()"
             [label]="'ACTION.REASSIGN' | translate"
             (click)="op.hide(); openDialog()"
           ></p-button>
@@ -9257,7 +9306,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
           <p-button
             type="button"
             icon="pi pi-times"
-            [disabled]="disabled"
+            [disabled]="disabled()"
             (click)="op.hide(); clear()"
             [text]="true"
             styleClass="p-button-danger p-button-sm mt-1 ml-2"
@@ -9272,109 +9321,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
         [label]="'ACTION.ASSIGN' | translate"
         (click)="openDialog()"
         [text]="true"
-        [disabled]="disabled"
+        [disabled]="disabled()"
       ></p-button>
     }
   `, styles: ["::ng-deep .p-popover-content{padding:0!important}.person-wrap{display:flex;align-items:center;margin-left:-6px}.person-wrap p{margin:0}.person-avatar{display:flex;justify-content:center;align-items:center;width:28px;height:28px;min-width:28px;min-height:28px;margin-right:5px;background-color:#e94260;color:#fff;border-radius:50%;font-size:1rem}.person-details{border-top:1px solid #e0e0e0;padding:10px;width:200px}.person-details p{margin:0;display:flex;align-items:center}.person-details i{color:#e94260;padding-right:5px}\n"] }]
-        }], propDecorators: { items: [{
-                type: Input
-            }], dialogHeaderKey: [{
-                type: Input
-            }] } });
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], dialogHeaderKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "dialogHeaderKey", required: false }] }] } });
 
+/**
+ * V2 COLOR field — signal-based ControlValueAccessor (OnPush, no manual CD).
+ * Stores a HEX string (or null); the template reads the value/disabled signals.
+ */
 class MetaColorPickerV2Component {
-    /**
-     * 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;
-    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.
-     */
+    /** Field-level disable (meta config), combined with the Angular Forms state. */
+    disable = input(false, ...(ngDevMode ? [{ debugName: "disable" }] : []));
+    /** Selected colour: HEX string (e.g. "#ff00aa") or null. */
+    value = signal(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "formDisabled" }] : []));
+    disabled = computed(() => this.disable() || this.formDisabled(), ...(ngDevMode ? [{ debugName: "disabled" }] : []));
     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 = this.normalizeHex(v);
-        this.cdr.markForCheck();
+        this.value.set(this.normalizeHex(v));
     }
-    /**
-     * 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();
+        this.formDisabled.set(isDisabled);
     }
-    /**
-     * 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() {
-        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();
+    /** Touched is emitted on blur (not on value change). */
+    onPickerChange(next) {
+        if (this.disabled())
             return;
-        }
-        this.value = next;
-        this.onChange(next);
-        this.cdr.markForCheck();
+        const normalized = this.normalizeHex(next);
+        this.value.set(normalized);
+        this.onChange(normalized);
     }
-    /**
-     * Marks control as touched when user leaves the component.
-     * (Matches "touched on blur" CVA guideline.)
-     */
     handleBlur() {
-        if (this.disabled)
+        if (this.disabled())
             return;
         this.onTouched();
     }
-    /**
-     * Normalizes incoming values to a safe HEX string or null.
-     * - accepts "#RRGGBB" / "#RGB" / "RRGGBB"
-     * - returns null for empty/invalid inputs
-     */
+    /** Normalizes to "#rrggbb"/"#rgb" (adds '#', lowercases) or null. */
     normalizeHex(v) {
         if (v === null || v === undefined)
             return null;
@@ -9386,7 +9377,7 @@ class MetaColorPickerV2Component {
         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: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.16", type: MetaColorPickerV2Component, isStandalone: true, selector: "phoenix-meta-color-picker-v2", inputs: { disable: { classPropertyName: "disable", publicName: "disable", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => MetaColorPickerV2Component),
@@ -9395,10 +9386,10 @@ class MetaColorPickerV2Component {
         ], ngImport: i0, template: `
     <p-colorPicker
       class="color-swatch"
-      [(ngModel)]="value"
-      (onChange)="onPickerChange()"
+      [ngModel]="value()"
+      (ngModelChange)="onPickerChange($event)"
       (onBlur)="handleBlur()"
-      [disabled]="disabled"
+      [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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ColorPickerModule }, { kind: "component", type: i2$7.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 });
@@ -9408,10 +9399,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             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()"
+      [ngModel]="value()"
+      (ngModelChange)="onPickerChange($event)"
       (onBlur)="handleBlur()"
-      [disabled]="disabled"
+      [disabled]="disabled()"
       [appendTo]="'body'"
     ></p-colorPicker>
   `, providers: [
@@ -9421,128 +9412,61 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                             multi: 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"] }]
-        }], propDecorators: { disable: [{
-                type: Input
-            }] } });
+        }], propDecorators: { disable: [{ type: i0.Input, args: [{ isSignal: true, alias: "disable", required: false }] }] } });
 
+/**
+ * V2 CHECKBOX_COLOR field — signal-based ControlValueAccessor (OnPush, no manual
+ * CD). A colour swatch that opens a grid popover; value + focus highlight live in
+ * signals.
+ */
 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.
-     */
+    /** 2D grid of colours rendered in the popover. */
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
+    /** Field-level disable (meta config), combined with the Angular Forms state. */
+    disable = input(false, ...(ngDevMode ? [{ debugName: "disable" }] : []));
+    /** Selected colour bound to the parent control. */
+    value = signal(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    /** Colour currently focused/hovered in the grid (visual outline only). */
+    focusedColor = signal(null, ...(ngDevMode ? [{ debugName: "focusedColor" }] : []));
+    formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "formDisabled" }] : []));
+    disabled = computed(() => this.disable() || this.formDisabled(), ...(ngDevMode ? [{ debugName: "disabled" }] : []));
     onChange = () => { };
-    /**
-     * CVA callback invoked when the control is marked as touched.
-     * Standard: touched on "open/blur/close" actions, not necessarily on hover.
-     */
     onTouched = () => { };
-    /**
-     * 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 = this.normalizeColor(v);
-        this.focusedColor = this.value;
-        this.cdr.markForCheck();
+        const next = this.normalizeColor(v);
+        this.value.set(next);
+        this.focusedColor.set(next);
     }
-    /**
-     * 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();
+        this.formDisabled.set(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)
+        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)
+        if (this.disabled())
             return;
         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.set(next);
+        if (next !== this.value()) {
+            this.value.set(next);
+            this.onChange(next);
         }
-        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
+     * Normalizes hex ("#rgb"/"#rrggbb", with/without '#') and passes through other
+     * CSS colours ("red", "var(--x)"); empty → null.
      */
     normalizeColor(v) {
         if (v === null || v === undefined)
@@ -9550,15 +9474,13 @@ class MetaCheckboxColorPickerV2Component {
         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: [
+    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: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, disable: { classPropertyName: "disable", publicName: "disable", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => MetaCheckboxColorPickerV2Component),
@@ -9567,18 +9489,18 @@ class MetaCheckboxColorPickerV2Component {
         ], ngImport: i0, template: `
     <p-popover #popover>
       <div class="color-picker">
-        @for (row of options; track $index; let last = $last) {
+        @for (row of options(); track $index; let last = $last) {
           <div class="color-row" [class.mb-2]="!last">
             @for (color of row; track color) {
               <button
                 type="button"
                 class="color-box"
-                [disabled]="disabled"
+                [disabled]="disabled()"
                 [style.backgroundColor]="color"
-                [style.outline]="focusedColor === color ? '3px solid ' + color : 'none'"
-                [style.outlineOffset]="focusedColor === color ? '3px' : '0'"
+                [style.outline]="focusedColor() === color ? '3px solid ' + color : 'none'"
+                [style.outlineOffset]="focusedColor() === color ? '3px' : '0'"
                 (click)="select(color, popover)"
-                (mouseenter)="focusedColor = color"
+                (mouseenter)="focusedColor.set(color)"
               ></button>
             }
           </div>
@@ -9589,8 +9511,8 @@ class MetaCheckboxColorPickerV2Component {
     <button
       type="button"
       class="selected-color"
-      [disabled]="disabled"
-      [style.backgroundColor]="value || 'transparent'"
+      [disabled]="disabled()"
+      [style.backgroundColor]="value() || 'transparent'"
       (click)="toggle(popover, $event)"
       aria-label="Select color"
     ></button>
@@ -9607,18 +9529,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                     ], template: `
     <p-popover #popover>
       <div class="color-picker">
-        @for (row of options; track $index; let last = $last) {
+        @for (row of options(); track $index; let last = $last) {
           <div class="color-row" [class.mb-2]="!last">
             @for (color of row; track color) {
               <button
                 type="button"
                 class="color-box"
-                [disabled]="disabled"
+                [disabled]="disabled()"
                 [style.backgroundColor]="color"
-                [style.outline]="focusedColor === color ? '3px solid ' + color : 'none'"
-                [style.outlineOffset]="focusedColor === color ? '3px' : '0'"
+                [style.outline]="focusedColor() === color ? '3px solid ' + color : 'none'"
+                [style.outlineOffset]="focusedColor() === color ? '3px' : '0'"
                 (click)="select(color, popover)"
-                (mouseenter)="focusedColor = color"
+                (mouseenter)="focusedColor.set(color)"
               ></button>
             }
           </div>
@@ -9629,174 +9551,97 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
     <button
       type="button"
       class="selected-color"
-      [disabled]="disabled"
-      [style.backgroundColor]="value || 'transparent'"
+      [disabled]="disabled()"
+      [style.backgroundColor]="value() || 'transparent'"
       (click)="toggle(popover, $event)"
       aria-label="Select color"
     ></button>
   `, styles: [":host ::ng-deep .p-popover-content{padding:0!important}.color-picker{display:flex;flex-direction:column;padding:10px}.color-row{display:flex;justify-content:center;gap:8px}.mb-2{margin-bottom:8px}.color-box{margin:2px;width:30px;height:30px;cursor:pointer;border-radius:4px;border:0;padding:0;background:transparent}.color-box:hover:not(:disabled){transform:scale(1.1);opacity:.9;box-shadow:0 0 5px #0003}.color-box:disabled{cursor:not-allowed;opacity:.6}.selected-color{width:35px;height:35px;border:2px solid #ccc;cursor:pointer;border-radius:6px;padding:0;background:transparent}.selected-color:disabled{cursor:not-allowed;opacity:.6}\n"] }]
-        }], propDecorators: { options: [{
-                type: Input
-            }], disable: [{
-                type: Input
-            }] } });
+        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], disable: [{ type: i0.Input, args: [{ isSignal: true, alias: "disable", required: false }] }] } });
 
+/**
+ * V2 START_DUE_DATE field — signal-based ControlValueAccessor (OnPush, no manual
+ * CD). Two date pickers whose composite value is propagated through CVA.
+ */
 class MetaStartDueDateV2Component {
-    /**
-     * Optional data-cy attribute prefix for e2e testing.
-     * Can be used by parent components to uniquely identify this field in tests.
-     */
-    dataCy;
-    /**
-     * 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.
-     */
+    /** Optional data-cy prefix for e2e tests. */
+    dataCy = input(...(ngDevMode ? [undefined, { debugName: "dataCy" }] : []));
+    /** Field-level disable (meta config), combined with the Angular Forms state. */
+    disable = input(false, ...(ngDevMode ? [{ debugName: "disable" }] : []));
+    /** Selected start/end dates (Date or null) for the pickers. */
+    startDate = signal(null, ...(ngDevMode ? [{ debugName: "startDate" }] : []));
+    endDate = signal(null, ...(ngDevMode ? [{ debugName: "endDate" }] : []));
+    formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "formDisabled" }] : []));
+    disabled = computed(() => this.disable() || this.formDisabled(), ...(ngDevMode ? [{ debugName: "disabled" }] : []));
     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) {
-        this.startDate = this.normalizeDateOnly(this.parseToDate(v?.startDate ?? null));
-        this.endDate = this.normalizeDateOnly(this.parseToDate(v?.endDate ?? null));
-        // OnPush: ensure UI reflects external value writes (patchValue/setValue)
-        this.cdr.markForCheck();
+        this.startDate.set(this.normalizeDateOnly(this.parseToDate(v?.startDate ?? null)));
+        this.endDate.set(this.normalizeDateOnly(this.parseToDate(v?.endDate ?? null)));
     }
-    /**
-     * 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.isDisabled = isDisabled;
-        // OnPush: reflect disabled state changes immediately
-        this.cdr.markForCheck();
+        this.formDisabled.set(isDisabled);
     }
-    /**
-     * Handler used by PrimeNG DatePicker blur events.
-     * Marks the control as touched without emitting a value change.
-     */
     handleBlur() {
-        if (this.disabled)
+        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)
+        if (this.disabled())
             return;
-        this.startDate = this.normalizeDateOnly(d ?? null);
+        this.startDate.set(this.normalizeDateOnly(d ?? null));
         this.emitChange();
     }
-    /**
-     * Handler for end date change coming from the DatePicker.
-     * Updates local state and propagates the composite value.
-     */
     onEndChange(d) {
-        if (this.disabled)
+        if (this.disabled())
             return;
-        this.endDate = this.normalizeDateOnly(d ?? null);
+        this.endDate.set(this.normalizeDateOnly(d ?? null));
         this.emitChange();
     }
-    /**
-     * 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).
-     */
+    /** Emits `null` when both dates are empty, otherwise the range object. */
     emitChange() {
-        if (!this.startDate && !this.endDate) {
+        const start = this.startDate();
+        const end = this.endDate();
+        if (!start && !end) {
             this.onChange(null);
-            this.cdr.markForCheck();
             return;
         }
-        this.onChange({
-            startDate: this.startDate,
-            endDate: this.endDate,
-        });
-        this.cdr.markForCheck();
+        this.onChange({ startDate: start, endDate: end });
     }
     /**
-     * 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).
+     * Parses Date | string to a Date. "YYYY-MM-DD" is treated as a LOCAL date to
+     * avoid timezone day-shifts.
      */
     parseToDate(v) {
         if (!v)
             return null;
-        if (v instanceof Date) {
+        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, 12, 0, 0, 0);
+            const local = new Date(Number(m[1]), Number(m[2]) - 1, Number(m[3]), 12, 0, 0, 0);
             return isNaN(local.getTime()) ? null : local;
         }
-        // ISO / other -> fallback
         const dt = new Date(s);
         return isNaN(dt.getTime()) ? null : dt;
     }
     normalizeDateOnly(d) {
-        if (!d)
-            return null;
-        if (isNaN(d.getTime()))
+        if (!d || isNaN(d.getTime()))
             return null;
         return new Date(d.getFullYear(), d.getMonth(), d.getDate(), 12, 0, 0, 0);
     }
     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", disable: "disable" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.16", type: MetaStartDueDateV2Component, isStandalone: true, selector: "phoenix-meta-start-due-date-v2", inputs: { dataCy: { classPropertyName: "dataCy", publicName: "dataCy", isSignal: true, isRequired: false, transformFunction: null }, disable: { classPropertyName: "disable", publicName: "disable", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => MetaStartDueDateV2Component),
@@ -9812,8 +9657,8 @@ class MetaStartDueDateV2Component {
             [showButtonBar]="true"
             [showIcon]="true"
             [placeholder]="'LABELS.PLANNED_START' | translate"
-            [disabled]="disabled"
-            [ngModel]="startDate"
+            [disabled]="disabled()"
+            [ngModel]="startDate()"
             (ngModelChange)="onStartChange($event)"
             (onBlur)="handleBlur()"
             appendTo="body"
@@ -9831,8 +9676,8 @@ class MetaStartDueDateV2Component {
             [showButtonBar]="true"
             [showIcon]="true"
             [placeholder]="'LABELS.PLANNED_END' | translate"
-            [disabled]="disabled"
-            [ngModel]="endDate"
+            [disabled]="disabled()"
+            [ngModel]="endDate()"
             (ngModelChange)="onEndChange($event)"
             (onBlur)="handleBlur()"
             appendTo="body"
@@ -9860,8 +9705,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             [showButtonBar]="true"
             [showIcon]="true"
             [placeholder]="'LABELS.PLANNED_START' | translate"
-            [disabled]="disabled"
-            [ngModel]="startDate"
+            [disabled]="disabled()"
+            [ngModel]="startDate()"
             (ngModelChange)="onStartChange($event)"
             (onBlur)="handleBlur()"
             appendTo="body"
@@ -9879,8 +9724,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             [showButtonBar]="true"
             [showIcon]="true"
             [placeholder]="'LABELS.PLANNED_END' | translate"
-            [disabled]="disabled"
-            [ngModel]="endDate"
+            [disabled]="disabled()"
+            [ngModel]="endDate()"
             (ngModelChange)="onEndChange($event)"
             (onBlur)="handleBlur()"
             appendTo="body"
@@ -9889,116 +9734,55 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
       </div>
     </div>
   `, styles: [":host{display:block}\n"] }]
-        }], propDecorators: { dataCy: [{
-                type: Input
-            }], disable: [{
-                type: Input
-            }] } });
+        }], propDecorators: { dataCy: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataCy", required: false }] }], disable: [{ type: i0.Input, args: [{ isSignal: true, alias: "disable", required: false }] }] } });
 
+/**
+ * V2 SWITCH field — signal-based ControlValueAccessor (OnPush, no manual CD).
+ * Value + disabled live in signals; the template reads them as functions.
+ */
 class MetaSwitchV2Component {
-    /**
-     * 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;
-    /**
-     * Optional flag to hide the switch from UI (meta hidden).
-     * Keep in mind: hidden does not automatically disable the control.
-     */
-    hidden = false;
-    /**
-     * Optional data-cy attribute for e2e tests (e.g. "switch-singleEntity").
-     */
-    dataCy;
-    cdr = inject(ChangeDetectorRef);
-    /**
-     * Current boolean value stored inside the component.
-     * This value is synchronized with the parent FormControl through CVA.
-     */
-    value = false;
-    /**
-     * CVA callback invoked when the value changes.
-     */
+    /** Field-level disable (meta config), combined with the Angular Forms state. */
+    disable = input(false, ...(ngDevMode ? [{ debugName: "disable" }] : []));
+    /** Hide the switch (meta hidden). Does not disable it. */
+    hidden = input(false, ...(ngDevMode ? [{ debugName: "hidden" }] : []));
+    /** Optional data-cy for e2e tests. */
+    dataCy = input(...(ngDevMode ? [undefined, { debugName: "dataCy" }] : []));
+    /** Current boolean value, synced with the parent control through CVA. */
+    value = signal(false, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "formDisabled" }] : []));
+    /** Final disabled = field-level disable OR the Forms disabled state. */
+    disabled = computed(() => this.disable() || this.formDisabled(), ...(ngDevMode ? [{ debugName: "disabled" }] : []));
     onChange = () => { };
-    /**
-     * CVA callback invoked when the control is marked as touched.
-     * Standard: call on blur, not on every 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 = this.normalizeBool(v);
-        this.cdr.markForCheck();
+        this.value.set(this.normalizeBool(v));
     }
-    /**
-     * 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();
+        this.formDisabled.set(isDisabled);
     }
     /**
-     * Handler for switch change.
-     * Propagates value to the parent form control.
-     *
-     * Important note:
-     * We intentionally use [ngModel] instead of [(ngModel)] in the template.
-     * Two-way binding would update the local value BEFORE this handler runs,
-     * which would prevent correct change detection and CVA propagation.
+     * We use one-way [ngModel] + (ngModelChange) on purpose: two-way binding would
+     * mutate the value before this handler runs and break CVA propagation.
      */
     onSwitchChange(next) {
-        if (this.disabled)
+        if (this.disabled())
             return;
         const normalized = this.normalizeBool(next);
-        if (normalized !== this.value) {
-            this.value = normalized;
-            this.onChange(normalized);
-            this.cdr.markForCheck();
-            return;
-        }
-        // ensure the form control still receives the value
+        this.value.set(normalized);
         this.onChange(normalized);
-        this.cdr.markForCheck();
     }
-    /**
-     * Marks control as touched when user leaves the component.
-     */
     handleBlur() {
-        if (this.disabled)
+        if (this.disabled())
             return;
         this.onTouched();
     }
-    /**
-     * Normalizes incoming values to strict boolean.
-     * Supports: boolean, "true"/"false", 1/0, "1"/"0".
-     */
+    /** Normalizes boolean-ish values (boolean, "true"/"false", 1/0, "1"/"0"). */
     normalizeBool(v) {
         if (v === true || v === false)
             return v;
@@ -10016,7 +9800,7 @@ class MetaSwitchV2Component {
         return !!v;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaSwitchV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: MetaSwitchV2Component, isStandalone: true, selector: "phoenix-meta-switch-v2", inputs: { disable: "disable", hidden: "hidden", dataCy: "dataCy" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.16", type: MetaSwitchV2Component, isStandalone: true, selector: "phoenix-meta-switch-v2", inputs: { disable: { classPropertyName: "disable", publicName: "disable", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, dataCy: { classPropertyName: "dataCy", publicName: "dataCy", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => MetaSwitchV2Component),
@@ -10025,12 +9809,12 @@ class MetaSwitchV2Component {
         ], ngImport: i0, template: `
     <p-toggleSwitch
       class="phoenix-switch-v2"
-      [ngModel]="value"
+      [ngModel]="value()"
       (ngModelChange)="onSwitchChange($event)"
       (onBlur)="handleBlur()"
-      [disabled]="disabled"
-      [hidden]="hidden"
-      [attr.data-cy]="dataCy ?? null"
+      [disabled]="disabled()"
+      [hidden]="hidden()"
+      [attr.data-cy]="dataCy() ?? null"
     ></p-toggleSwitch>
   `, isInline: true, styles: [":host ::ng-deep .p-toggleswitch{margin-top:12px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ToggleSwitchModule }, { kind: "component", type: i3$6.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["styleClass", "tabindex", "inputId", "readonly", "trueValue", "falseValue", "ariaLabel", "size", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -10039,12 +9823,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             args: [{ selector: 'phoenix-meta-switch-v2', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule, ToggleSwitchModule], template: `
     <p-toggleSwitch
       class="phoenix-switch-v2"
-      [ngModel]="value"
+      [ngModel]="value()"
       (ngModelChange)="onSwitchChange($event)"
       (onBlur)="handleBlur()"
-      [disabled]="disabled"
-      [hidden]="hidden"
-      [attr.data-cy]="dataCy ?? null"
+      [disabled]="disabled()"
+      [hidden]="hidden()"
+      [attr.data-cy]="dataCy() ?? null"
     ></p-toggleSwitch>
   `, providers: [
                         {
@@ -10053,178 +9837,70 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                             multi: true,
                         },
                     ], styles: [":host ::ng-deep .p-toggleswitch{margin-top:12px}\n"] }]
-        }], propDecorators: { disable: [{
-                type: Input
-            }], hidden: [{
-                type: Input
-            }], dataCy: [{
-                type: Input
-            }] } });
+        }], propDecorators: { disable: [{ type: i0.Input, args: [{ isSignal: true, alias: "disable", required: false }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }], dataCy: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataCy", required: false }] }] } });
 
 /**
- * V2 Password meta field component.
- *
- * Goals vs legacy component:
- * - Uses a clean ControlValueAccessor implementation (no BaseMetaField inheritance).
- * - OnPush + explicit markForCheck() for predictable rendering in large dynamic forms.
- * - Supports "disable" (meta-level) + Angular Forms disabled state (CVA) combined.
- * - Emits touched on blur (standard), not on every input.
- * - Keeps value as string and normalizes null/undefined to ''.
- *
- * Notes:
- * - PrimeNG <p-password> supports toggleMask, feedback, strength meter, etc.
- * - We keep [feedback]="false" to match old behavior.
+ * V2 PASSWORD field — signal-based ControlValueAccessor (OnPush, no manual CD).
+ * Value + disabled live in signals; touched is emitted on blur, value kept as a
+ * string (null/undefined normalized to '').
  */
 class MetaPasswordFieldV2Component {
-    /**
-     * Meta control configuration passed from dynamic forms system.
-     * Keep it `any` to be compatible with existing meta-form model.
-     *
-     * If you have a shared type (e.g. MetaFormControl), replace `any`.
-     */
-    control;
-    /**
-     * Underlying Angular control reference used by InlineFieldError.
-     * In your meta system this is typically injected/assigned by parent wrapper.
-     *
-     * If you have a strict type: AbstractControl | null
-     */
-    ctrl;
-    /**
-     * 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;
-    /**
-     * Optional flag to hide the control from UI (meta hidden).
-     * Keep in mind: hidden does not automatically disable the control.
-     */
-    hidden = false;
-    /**
-     * Optional data-cy attribute for e2e tests (e.g. "password-admin").
-     * If not provided, you can still generate it from control.id in template usage.
-     */
-    dataCy;
-    /**
-     * PrimeNG feedback (strength meter / hints). Disabled by default to match v1.
-     */
-    feedback = false;
-    /**
-     * Autocomplete attribute: by default we set to "off" (match old component).
-     * For login forms you might want "current-password" or "new-password".
-     */
-    autocomplete = 'off';
-    cdr = inject(ChangeDetectorRef);
-    /**
-     * Current password value.
-     * Always keep as string to avoid null/undefined edge cases with ngModel.
-     */
-    value = '';
-    /**
-     * CVA callback invoked when the value changes.
-     */
+    /** Meta control configuration (kept for API compatibility). */
+    control = input(...(ngDevMode ? [undefined, { debugName: "control" }] : []));
+    /** Underlying control reference (kept for API compatibility). */
+    ctrl = input(...(ngDevMode ? [undefined, { debugName: "ctrl" }] : []));
+    /** Field-level disable (meta config), combined with the Angular Forms state. */
+    disable = input(false, ...(ngDevMode ? [{ debugName: "disable" }] : []));
+    /** Hide the control (meta hidden). Does not disable it. */
+    hidden = input(false, ...(ngDevMode ? [{ debugName: "hidden" }] : []));
+    /** Optional data-cy for e2e tests. */
+    dataCy = input(...(ngDevMode ? [undefined, { debugName: "dataCy" }] : []));
+    /** PrimeNG strength meter; off by default to match v1. */
+    feedback = input(false, ...(ngDevMode ? [{ debugName: "feedback" }] : []));
+    /** Autocomplete attribute (default "off"). */
+    autocomplete = input('off', ...(ngDevMode ? [{ debugName: "autocomplete" }] : []));
+    /** Current password value (always a string). */
+    value = signal('', ...(ngDevMode ? [{ debugName: "value" }] : []));
+    formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "formDisabled" }] : []));
+    disabled = computed(() => this.disable() || this.formDisabled(), ...(ngDevMode ? [{ debugName: "disabled" }] : []));
     onChange = () => { };
-    /**
-     * CVA callback invoked when the control is marked as touched.
-     * Standard: call on blur, not on every 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) {
-        const next = this.normalizeString(v);
-        // Prevent redundant UI updates.
-        if (next === this.value) {
-            this.cdr.markForCheck();
-            return;
-        }
-        this.value = next;
-        this.cdr.markForCheck();
+        this.value.set(this.normalizeString(v));
     }
-    /**
-     * 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();
+        this.formDisabled.set(isDisabled);
     }
-    /**
-     * Handler for user typing into the password input.
-     * Propagates current value to the parent form control.
-     *
-     * Note:
-     * - PrimeNG (input) gives us an event; we can also just use this.value directly.
-     * - We intentionally do NOT call onTouched here (touched on blur).
-     */
+    /** Propagates every keystroke; touched is emitted on blur. */
     onPasswordInput(event) {
-        if (this.disabled)
+        if (this.disabled())
             return;
         const next = this.getInputValue(event);
-        // Prevent redundant emits.
-        // if (next === this.value) {
-        //   this.cdr.markForCheck();
-        //   return;
-        // }
-        this.value = next;
+        this.value.set(next);
         this.onChange(next);
-        this.cdr.markForCheck();
     }
-    /**
-     * Marks control as touched when user leaves the component.
-     */
     handleBlur() {
-        if (this.disabled)
+        if (this.disabled())
             return;
         this.onTouched();
     }
-    /**
-     * PrimeNG input event -> string value.
-     * Supports:
-     * - native input event: event.target.value
-     * - direct string (some wrappers)
-     */
     getInputValue(event) {
         const v = event?.target?.value ?? event;
         return this.normalizeString(v);
     }
-    /**
-     * Normalizes incoming values to a string.
-     * - null/undefined -> ''
-     * - other -> String(v)
-     */
     normalizeString(v) {
         if (v === null || v === undefined)
             return '';
         return String(v);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaPasswordFieldV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: MetaPasswordFieldV2Component, isStandalone: true, selector: "phoenix-meta-password-field-v2", inputs: { control: "control", ctrl: "ctrl", disable: "disable", hidden: "hidden", dataCy: "dataCy", feedback: "feedback", autocomplete: "autocomplete" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.16", type: MetaPasswordFieldV2Component, isStandalone: true, selector: "phoenix-meta-password-field-v2", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, ctrl: { classPropertyName: "ctrl", publicName: "ctrl", isSignal: true, isRequired: false, transformFunction: null }, disable: { classPropertyName: "disable", publicName: "disable", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, dataCy: { classPropertyName: "dataCy", publicName: "dataCy", isSignal: true, isRequired: false, transformFunction: null }, feedback: { classPropertyName: "feedback", publicName: "feedback", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => MetaPasswordFieldV2Component),
@@ -10232,22 +9908,16 @@ class MetaPasswordFieldV2Component {
             },
         ], ngImport: i0, template: `
     <div>
-      <!--
-        PrimeNG Password:
-        - We use ngModel for simple CVA integration (same pattern as other meta v2 fields).
-        - We handle change via (input) to propagate every keystroke to the parent form.
-        - We mark touched on blur to match standard UX (touched != changed).
-      -->
       <p-password
         class="phoenix-password-v2"
-        [(ngModel)]="value"
+        [ngModel]="value()"
         (ngModelChange)="onPasswordInput($event)"
         (onBlur)="handleBlur()"
-        [disabled]="disabled"
-        [hidden]="hidden"
-        [feedback]="feedback"
-        [attr.autocomplete]="autocomplete"
-        [attr.data-cy]="dataCy ?? null"
+        [disabled]="disabled()"
+        [hidden]="hidden()"
+        [feedback]="feedback()"
+        [attr.autocomplete]="autocomplete()"
+        [attr.data-cy]="dataCy() ?? null"
       ></p-password>
     </div>
   `, isInline: true, styles: [":host ::ng-deep .p-component{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: PasswordModule }, { kind: "component", type: i2$8.Password, selector: "p-password", inputs: ["ariaLabel", "ariaLabelledBy", "label", "promptLabel", "mediumRegex", "strongRegex", "weakLabel", "mediumLabel", "maxLength", "strongLabel", "inputId", "feedback", "toggleMask", "inputStyleClass", "styleClass", "inputStyle", "showTransitionOptions", "hideTransitionOptions", "autocomplete", "placeholder", "showClear", "autofocus", "tabindex", "appendTo"], outputs: ["onFocus", "onBlur", "onClear"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
@@ -10256,22 +9926,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             type: Component,
             args: [{ selector: 'phoenix-meta-password-field-v2', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule, TranslateModule, PasswordModule], template: `
     <div>
-      <!--
-        PrimeNG Password:
-        - We use ngModel for simple CVA integration (same pattern as other meta v2 fields).
-        - We handle change via (input) to propagate every keystroke to the parent form.
-        - We mark touched on blur to match standard UX (touched != changed).
-      -->
       <p-password
         class="phoenix-password-v2"
-        [(ngModel)]="value"
+        [ngModel]="value()"
         (ngModelChange)="onPasswordInput($event)"
         (onBlur)="handleBlur()"
-        [disabled]="disabled"
-        [hidden]="hidden"
-        [feedback]="feedback"
-        [attr.autocomplete]="autocomplete"
-        [attr.data-cy]="dataCy ?? null"
+        [disabled]="disabled()"
+        [hidden]="hidden()"
+        [feedback]="feedback()"
+        [attr.autocomplete]="autocomplete()"
+        [attr.data-cy]="dataCy() ?? null"
       ></p-password>
     </div>
   `, providers: [
@@ -10281,47 +9945,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                             multi: true,
                         },
                     ], styles: [":host ::ng-deep .p-component{width:100%}\n"] }]
-        }], propDecorators: { control: [{
-                type: Input
-            }], ctrl: [{
-                type: Input
-            }], disable: [{
-                type: Input
-            }], hidden: [{
-                type: Input
-            }], dataCy: [{
-                type: Input
-            }], feedback: [{
-                type: Input
-            }], autocomplete: [{
-                type: Input
-            }] } });
+        }], propDecorators: { control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: false }] }], ctrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "ctrl", required: false }] }], disable: [{ type: i0.Input, args: [{ isSignal: true, alias: "disable", required: false }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }], dataCy: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataCy", required: false }] }], feedback: [{ type: i0.Input, args: [{ isSignal: true, alias: "feedback", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }] } });
 
+/**
+ * Renders one meta field. Signal-based (OnPush): every template-facing value is a
+ * `computed()` so it is memoized and recomputed only when its inputs actually
+ * change — instead of a plain method re-running on every change-detection pass.
+ * Control state (value/status) is bridged into a signal (`controlTick`), so the
+ * error helpers stay reactive without a manual `markForCheck()`.
+ */
 class MetaFormFieldV2Component {
     /** Metadata definition of the field (type, key, options, styles, flags, etc.) */
-    field;
-    /** Parent FormGroup that contains the FormControl for this field */
-    form;
-    /**
-     * Page-level read-only flag.
-     * When true, the component renders ReadOnlyInputV2Component instead of editable controls.
-     */
-    readOnly = false;
-    /**
-     * 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 */
+    field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
+    /** Parent FormGroup that contains the FormControl for this field. */
+    form = input.required(...(ngDevMode ? [{ debugName: "form" }] : []));
+    /** Page-level read-only flag (renders the read-only view). */
+    readOnly = input(false, ...(ngDevMode ? [{ debugName: "readOnly" }] : []));
+    /** Global disable flag (merged with the field-level disable config). */
+    disableForm = input(false, ...(ngDevMode ? [{ debugName: "disableForm" }] : []));
     translate = inject(TranslateService);
-    /**
-     * Exposed enum-like mapping of MetaFieldType for template usage.
-     * Keeps templates readable and avoids magic strings.
-     */
+    /** Enum-like map for the template `@switch`. */
     MetaFieldType = Object.freeze({
         TEXT: 'TEXT',
         URL: 'URL',
@@ -10348,95 +9991,41 @@ 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');
-    }
-    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);
-    }
-    /**
-     * 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 (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() {
+    // ---- Pure, input-derived views (memoized) ----
+    key = computed(() => this.field()?.configuration?.key ?? '', ...(ngDevMode ? [{ debugName: "key" }] : []));
+    type = computed(() => this.field()?.configuration?.type ?? 'TEXT', ...(ngDevMode ? [{ debugName: "type" }] : []));
+    colClass = computed(() => this.field()?.hidden ? 'p-0' : (this.field()?.style.colWidth ?? 'col-12 md:col-6'), ...(ngDevMode ? [{ debugName: "colClass" }] : []));
+    userFriendlyMessage = computed(() => this.field()?.userFriendlyMessage ?? null, ...(ngDevMode ? [{ debugName: "userFriendlyMessage" }] : []));
+    placeholderKey = computed(() => this.field()?.configuration?.placeholderKey ?? null, ...(ngDevMode ? [{ debugName: "placeholderKey" }] : []));
+    isReadOnly = computed(() => !!this.readOnly() || !!this.field()?.readOnly, ...(ngDevMode ? [{ debugName: "isReadOnly" }] : []));
+    isDisabled = computed(() => !!this.disableForm() || !!this.field()?.disable, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    isCheckbox = computed(() => this.type() === this.MetaFieldType.CHECKBOX, ...(ngDevMode ? [{ debugName: "isCheckbox" }] : []));
+    /** The underlying FormControl for this field (recomputed if form/key change). */
+    ctrl = computed(() => this.form().get(this.key()) ?? null, ...(ngDevMode ? [{ debugName: "ctrl" }] : []));
+    /**
+     * Bridge the current control's value/status stream into a signal so the error
+     * helpers below recompute reactively (reactive forms aren't signal-native yet).
+     * Re-subscribes when the control identity changes.
+     */
+    controlTick = toSignal(toObservable(this.ctrl).pipe(switchMap$1((c) => c ? merge(c.valueChanges, c.statusChanges).pipe(startWith(null)) : EMPTY)), { initialValue: null });
+    /** Bumped for silent (emitEvent:false) programmatic writes, e.g. the date field. */
+    manualTick = signal(0, ...(ngDevMode ? [{ debugName: "manualTick" }] : []));
+    /** Track the active language so translated error text refreshes on lang change. */
+    lang = toSignal(this.translate.onLangChange.pipe(startWith(null)), { initialValue: null });
+    /** Show validation only after interaction (touched/dirty). */
+    showError = computed(() => {
+        this.controlTick();
+        this.manualTick();
         const c = this.ctrl();
         return !!c && (c.touched || c.dirty) && !!c.errors;
-    }
-    /**
-     * Maps control error object to a normalized error key.
-     * Supports:
-     * - Angular built-in validators
-     * - Phoenix custom validators
-     * - Submit-only async validators
-     */
-    errorKey() {
+    }, ...(ngDevMode ? [{ debugName: "showError" }] : []));
+    /** Normalized error key for the current control. */
+    errorKey = computed(() => {
+        this.controlTick();
+        this.manualTick();
         const c = this.ctrl();
         if (!c?.errors)
             return null;
-        // Angular built-in validators
         if (c.errors['required'])
             return 'required';
         if (c.errors['minlength'])
@@ -10451,7 +10040,6 @@ class MetaFormFieldV2Component {
             return 'min';
         if (c.errors['max'])
             return 'max';
-        // Phoenix custom validators
         if (c.errors['dangerousChars'])
             return 'dangerousChars';
         if (c.errors['timeperiod'])
@@ -10462,21 +10050,17 @@ class MetaFormFieldV2Component {
             return 'dueDate';
         if (c.errors['bothDates'])
             return 'bothDates';
-        // 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;
-    }
-    /**
-     * Resolves translated error message based on errorKey().
-     * This is the single place responsible for validation message UX.
-     */
-    errorText() {
+    }, ...(ngDevMode ? [{ debugName: "errorKey" }] : []));
+    /** Translated validation message (the single place that owns error UX text). */
+    errorText = computed(() => {
+        this.lang();
         const c = this.ctrl();
         const k = this.errorKey();
         if (!c || !k)
@@ -10497,10 +10081,8 @@ class MetaFormFieldV2Component {
             case 'dangerousChars':
                 return this.translate.instant('VALIDATION_MESSAGE.NO_SPECIAL_CHARS_ALLOWED');
             case 'custom':
-                // Legacy behavior: custom error can already be a translation key
                 return this.translate.instant(c.errors?.['custom']);
             case 'uniqueEntry':
-                // 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':
@@ -10517,7 +10099,6 @@ class MetaFormFieldV2Component {
                     upperValue: c.errors?.['max']?.max,
                 });
             case 'pattern': {
-                // 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) {
@@ -10528,54 +10109,54 @@ class MetaFormFieldV2Component {
             default:
                 return this.translate.instant('VALIDATION_MESSAGE.INVALID_VALUE');
         }
+    }, ...(ngDevMode ? [{ debugName: "errorText" }] : []));
+    /** Minimal value formatter for legacy read-only rendering (not used in template). */
+    displayValue() {
+        const v = this.ctrl()?.value;
+        if (v === null || v === undefined)
+            return '';
+        if (typeof v === 'string' || typeof v === 'number' || typeof v === 'boolean')
+            return v;
+        if (typeof v === 'object') {
+            return v.label ?? v.name ?? v.fileName ?? JSON.stringify(v);
+        }
+        return String(v);
     }
-    /**
-     * Lightweight text formatter for simple read-only display use cases.
-     * This is used mainly for inline displays and summary UIs.
-     */
+    /** Lightweight text formatter for simple read-only/summary display. */
     valueText() {
         const c = this.ctrl();
         const v = c?.value;
         if (v === null || v === undefined || v === '')
             return '--';
-        // Single-select option: resolve label from options
-        if (this.type === 'SS_OPTION') {
-            const opts = this.field?.configuration?.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;
-                return this.translate.instant(label);
+                return this.translate.instant(hit?.label ?? v);
             }
-            // Object value fallback
-            const label = v.label ?? v.value;
-            return this.translate.instant(label);
+            return this.translate.instant(v.label ?? v.value);
         }
-        // Date formatting
-        if (this.type === 'DATE' && v instanceof Date) {
+        if (this.type() === 'DATE' && v instanceof Date) {
             return v.toLocaleDateString();
         }
-        // Text editor / textarea: strip basic HTML tags for compact display
-        if (this.type === 'TEXT_EDITOR' || this.type === 'TEXT_AREA') {
+        if (this.type() === 'TEXT_EDITOR' || this.type() === 'TEXT_AREA') {
             return String(v).replace(/<[^>]*>/g, '').trim() || '--';
         }
         return String(v);
     }
-    isCheckbox() {
-        return this.type === this.MetaFieldType.CHECKBOX;
-    }
     onDateSelected(val) {
         const ctrl = this.ctrl();
         if (!ctrl)
             return;
-        const d = val instanceof Date ? val : (val ? new Date(val) : null);
+        const d = val instanceof Date ? val : val ? new Date(val) : null;
         if (!d || isNaN(d.getTime()))
             return;
         const normalized = new Date(d.getFullYear(), d.getMonth(), d.getDate(), 12, 0, 0, 0);
-        // set without re-triggering loops
+        // Silent write (no loops); bump the tick so error helpers re-evaluate.
         ctrl.setValue(normalized, { emitEvent: false });
         ctrl.markAsDirty();
         ctrl.markAsTouched();
-        this.cdr.markForCheck();
+        this.manualTick.update((v) => v + 1);
     }
     onDateCleared() {
         const ctrl = this.ctrl();
@@ -10584,16 +10165,14 @@ class MetaFormFieldV2Component {
         ctrl.setValue(null, { emitEvent: false });
         ctrl.markAsDirty();
         ctrl.markAsTouched();
-        this.cdr.markForCheck();
+        this.manualTick.update((v) => v + 1);
     }
     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\n    class=\"meta-field flex gap-2\"\n    [class.flex-column]=\"!(isCheckbox() && !isReadOnly())\"\n    [class.align-items-center]=\"isCheckbox() && !isReadOnly()\"\n    [style.order]=\"field.order ?? null\"\n    [attr.data-cy]=\"'meta-field-' + key\"\n  >\n\n    <!-- Skip the wrapper label only where the control supplies its own:\n         - an editable checkbox renders an inline label beside the box;\n         - an editable TIMEPERIOD self-labels (phoenix-meta-timeperiod).\n         The read-only view has no inline/self label, so it keeps the wrapper\n         label (otherwise a read-only checkbox shows a bare \"Yes\" with no field\n         name). -->\n    @if (userFriendlyMessage() && !(isCheckbox() && !isReadOnly()) && !(type === MetaFieldType.TIMEPERIOD && !isReadOnly())) {\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        @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.URL) {\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-field-v2 [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\">\n        </phoenix-meta-password-field-v2>\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\n            [inputId]=\"key\"\n            [formControlName]=\"key\"\n            [showIcon]=\"true\"\n            [readonlyInput]=\"true\"\n            [showButtonBar]=\"true\"\n            appendTo=\"body\"\n            (onSelect)=\"onDateSelected($event)\"\n            (onClearClick)=\"onDateCleared()\"\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\" appendTo=\"body\">\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\" appendTo=\"body\">\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\" appendTo=\"body\">\n        </p-multiselect>\n        }\n\n        @case (MetaFieldType.CHECKBOX) {\n          <p-checkbox\n            [inputId]=\"key\"\n            [binary]=\"true\"\n            [formControlName]=\"key\"\n            [disabled]=\"isDisabled()\"\n          ></p-checkbox>\n\n          <label class=\"meta-inline-label\" [attr.for]=\"key\">\n            {{ (userFriendlyMessage() ?? placeholderKey() ?? '') | translate }}\n            @if (field.mandatory) { <span class=\"meta-required\">*</span> }\n          </label>\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-v2 [disable]=\"isDisabled()\" [formControlName]=\"key\" [hidden]=\"field.hidden ?? false\"\n          [dataCy]=\"'switch-' + key\"></phoenix-meta-switch-v2>\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      @if (field.configuration.extra?.['dividerAfter']) {\n        <div\n          class=\"meta-divider\"\n          [style.margin]=\"field.configuration.extra?.['dividerMargin'] ?? '12px 0'\"\n        ></div>\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;margin:0;cursor:pointer}.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}.meta-divider{width:100%;height:1px;background:#0000001f}:host-context(.dark-theme) .meta-divider{background:#ffffff26}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: 
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: MetaFormFieldV2Component, isStandalone: true, selector: "phoenix-meta-form-field-v2", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, disableForm: { classPropertyName: "disableForm", publicName: "disableForm", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [formGroup]=\"form()\">\n  @if (!field().hidden) {\n  <div\n    class=\"meta-field flex gap-2\"\n    [class.flex-column]=\"!(isCheckbox() && !isReadOnly())\"\n    [class.align-items-center]=\"isCheckbox() && !isReadOnly()\"\n    [style.order]=\"field().order ?? null\"\n    [attr.data-cy]=\"'meta-field-' + key()\"\n  >\n\n    <!-- Skip the wrapper label only where the control supplies its own:\n         - an editable checkbox renders an inline label beside the box;\n         - an editable TIMEPERIOD self-labels (phoenix-meta-timeperiod).\n         The read-only view has no inline/self label, so it keeps the wrapper\n         label (otherwise a read-only checkbox shows a bare \"Yes\" with no field\n         name). -->\n    @if (userFriendlyMessage() && !(isCheckbox() && !isReadOnly())) {\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        @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.URL) {\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-field-v2 [disable]=\"isDisabled()\" [formControlName]=\"key()\" [control]=\"field()\">\n        </phoenix-meta-password-field-v2>\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\n            [inputId]=\"key()\"\n            [formControlName]=\"key()\"\n            [showIcon]=\"true\"\n            [readonlyInput]=\"true\"\n            [showButtonBar]=\"true\"\n            appendTo=\"body\"\n            (onSelect)=\"onDateSelected($event)\"\n            (onClearClick)=\"onDateCleared()\"\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\" appendTo=\"body\">\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\" appendTo=\"body\">\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\" appendTo=\"body\">\n        </p-multiselect>\n        }\n\n        @case (MetaFieldType.CHECKBOX) {\n          <p-checkbox\n            [inputId]=\"key()\"\n            [binary]=\"true\"\n            [formControlName]=\"key()\"\n            [disabled]=\"isDisabled()\"\n          ></p-checkbox>\n\n          <label class=\"meta-inline-label\" [attr.for]=\"key()\">\n            {{ (userFriendlyMessage() ?? placeholderKey() ?? '') | translate }}\n            @if (field().mandatory) { <span class=\"meta-required\">*</span> }\n          </label>\n        }\n\n        <!-- advanced: preko postoje\u0107ih komponenti -->\n        @case (MetaFieldType.TIMEPERIOD) {\n        <phoenix-meta-timeperiod-v2 [formControlName]=\"key()\" [key]=\"key()\" [disable]=\"isDisabled()\"></phoenix-meta-timeperiod-v2>\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-v2 [disable]=\"isDisabled()\" [formControlName]=\"key()\" [hidden]=\"field().hidden ?? false\"\n          [dataCy]=\"'switch-' + key()\"></phoenix-meta-switch-v2>\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      @if (field().configuration.extra?.['dividerAfter']) {\n        <div\n          class=\"meta-divider\"\n          [style.margin]=\"field().configuration.extra?.['dividerMargin'] ?? '12px 0'\"\n        ></div>\n      }\n    }\n\n\n    <!-- TIMEPERIOD carries its own calm format helper; don't duplicate a red error here. -->\n    @if (!readOnly() && showError() && type() !== MetaFieldType.TIMEPERIOD) {\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>\n", styles: [".meta-field{width:100%}.meta-required{margin-left:4px;color:#ef4444}.meta-textarea{resize:none!important}.meta-inline-label{opacity:.9;margin:0;cursor:pointer}.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}.meta-divider{width:100%;height:1px;background:#0000001f}:host-context(.dark-theme) .meta-divider{background:#ffffff26}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.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$3.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i3$7.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "ngmodule", type: InputNumberModule }, { kind: "component", type: i3$5.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$4.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: i5$2.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$4.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$6.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: 
                 // 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: MetaSwitchV2Component, selector: "phoenix-meta-switch-v2", inputs: ["disable", "hidden", "dataCy"] }, { 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,
-                MetaPasswordFieldV2Component, selector: "phoenix-meta-password-field-v2", inputs: ["control", "ctrl", "disable", "hidden", "dataCy", "feedback", "autocomplete"] }, { 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: 
+                MetaTimeperiodV2Component, selector: "phoenix-meta-timeperiod-v2", inputs: ["key", "disable"] }, { 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: MetaSwitchV2Component, selector: "phoenix-meta-switch-v2", inputs: ["disable", "hidden", "dataCy"] }, { 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: MetaPasswordFieldV2Component, selector: "phoenix-meta-password-field-v2", inputs: ["control", "ctrl", "disable", "hidden", "dataCy", "feedback", "autocomplete"] }, { 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: i4$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -10613,7 +10192,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         DatePickerModule,
                         MessageModule,
                         // Advanced / custom Phoenix fields
-                        MetaTimeperiodComponent,
+                        MetaTimeperiodV2Component,
                         MetaCurrencyComponent,
                         MetaStartDueDateV2Component,
                         MetaTextEditorComponent,
@@ -10621,25 +10200,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         MetaSwitchV2Component,
                         MetaSelectButtonComponent,
                         MetaAssignResponsibleV2Component,
-                        // MetaAssignAssetComponent,
                         MetaPasswordFieldV2Component,
                         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\n    class=\"meta-field flex gap-2\"\n    [class.flex-column]=\"!(isCheckbox() && !isReadOnly())\"\n    [class.align-items-center]=\"isCheckbox() && !isReadOnly()\"\n    [style.order]=\"field.order ?? null\"\n    [attr.data-cy]=\"'meta-field-' + key\"\n  >\n\n    <!-- Skip the wrapper label only where the control supplies its own:\n         - an editable checkbox renders an inline label beside the box;\n         - an editable TIMEPERIOD self-labels (phoenix-meta-timeperiod).\n         The read-only view has no inline/self label, so it keeps the wrapper\n         label (otherwise a read-only checkbox shows a bare \"Yes\" with no field\n         name). -->\n    @if (userFriendlyMessage() && !(isCheckbox() && !isReadOnly()) && !(type === MetaFieldType.TIMEPERIOD && !isReadOnly())) {\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        @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.URL) {\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-field-v2 [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\">\n        </phoenix-meta-password-field-v2>\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\n            [inputId]=\"key\"\n            [formControlName]=\"key\"\n            [showIcon]=\"true\"\n            [readonlyInput]=\"true\"\n            [showButtonBar]=\"true\"\n            appendTo=\"body\"\n            (onSelect)=\"onDateSelected($event)\"\n            (onClearClick)=\"onDateCleared()\"\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\" appendTo=\"body\">\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\" appendTo=\"body\">\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\" appendTo=\"body\">\n        </p-multiselect>\n        }\n\n        @case (MetaFieldType.CHECKBOX) {\n          <p-checkbox\n            [inputId]=\"key\"\n            [binary]=\"true\"\n            [formControlName]=\"key\"\n            [disabled]=\"isDisabled()\"\n          ></p-checkbox>\n\n          <label class=\"meta-inline-label\" [attr.for]=\"key\">\n            {{ (userFriendlyMessage() ?? placeholderKey() ?? '') | translate }}\n            @if (field.mandatory) { <span class=\"meta-required\">*</span> }\n          </label>\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-v2 [disable]=\"isDisabled()\" [formControlName]=\"key\" [hidden]=\"field.hidden ?? false\"\n          [dataCy]=\"'switch-' + key\"></phoenix-meta-switch-v2>\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      @if (field.configuration.extra?.['dividerAfter']) {\n        <div\n          class=\"meta-divider\"\n          [style.margin]=\"field.configuration.extra?.['dividerMargin'] ?? '12px 0'\"\n        ></div>\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;margin:0;cursor:pointer}.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}.meta-divider{width:100%;height:1px;background:#0000001f}:host-context(.dark-theme) .meta-divider{background:#ffffff26}\n"] }]
-        }], propDecorators: { field: [{
-                type: Input,
-                args: [{ required: true }]
-            }], form: [{
-                type: Input,
-                args: [{ required: true }]
-            }], readOnly: [{
-                type: Input
-            }], disableForm: [{
-                type: Input
-            }] } });
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [formGroup]=\"form()\">\n  @if (!field().hidden) {\n  <div\n    class=\"meta-field flex gap-2\"\n    [class.flex-column]=\"!(isCheckbox() && !isReadOnly())\"\n    [class.align-items-center]=\"isCheckbox() && !isReadOnly()\"\n    [style.order]=\"field().order ?? null\"\n    [attr.data-cy]=\"'meta-field-' + key()\"\n  >\n\n    <!-- Skip the wrapper label only where the control supplies its own:\n         - an editable checkbox renders an inline label beside the box;\n         - an editable TIMEPERIOD self-labels (phoenix-meta-timeperiod).\n         The read-only view has no inline/self label, so it keeps the wrapper\n         label (otherwise a read-only checkbox shows a bare \"Yes\" with no field\n         name). -->\n    @if (userFriendlyMessage() && !(isCheckbox() && !isReadOnly())) {\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        @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.URL) {\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-field-v2 [disable]=\"isDisabled()\" [formControlName]=\"key()\" [control]=\"field()\">\n        </phoenix-meta-password-field-v2>\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\n            [inputId]=\"key()\"\n            [formControlName]=\"key()\"\n            [showIcon]=\"true\"\n            [readonlyInput]=\"true\"\n            [showButtonBar]=\"true\"\n            appendTo=\"body\"\n            (onSelect)=\"onDateSelected($event)\"\n            (onClearClick)=\"onDateCleared()\"\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\" appendTo=\"body\">\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\" appendTo=\"body\">\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\" appendTo=\"body\">\n        </p-multiselect>\n        }\n\n        @case (MetaFieldType.CHECKBOX) {\n          <p-checkbox\n            [inputId]=\"key()\"\n            [binary]=\"true\"\n            [formControlName]=\"key()\"\n            [disabled]=\"isDisabled()\"\n          ></p-checkbox>\n\n          <label class=\"meta-inline-label\" [attr.for]=\"key()\">\n            {{ (userFriendlyMessage() ?? placeholderKey() ?? '') | translate }}\n            @if (field().mandatory) { <span class=\"meta-required\">*</span> }\n          </label>\n        }\n\n        <!-- advanced: preko postoje\u0107ih komponenti -->\n        @case (MetaFieldType.TIMEPERIOD) {\n        <phoenix-meta-timeperiod-v2 [formControlName]=\"key()\" [key]=\"key()\" [disable]=\"isDisabled()\"></phoenix-meta-timeperiod-v2>\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-v2 [disable]=\"isDisabled()\" [formControlName]=\"key()\" [hidden]=\"field().hidden ?? false\"\n          [dataCy]=\"'switch-' + key()\"></phoenix-meta-switch-v2>\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      @if (field().configuration.extra?.['dividerAfter']) {\n        <div\n          class=\"meta-divider\"\n          [style.margin]=\"field().configuration.extra?.['dividerMargin'] ?? '12px 0'\"\n        ></div>\n      }\n    }\n\n\n    <!-- TIMEPERIOD carries its own calm format helper; don't duplicate a red error here. -->\n    @if (!readOnly() && showError() && type() !== MetaFieldType.TIMEPERIOD) {\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>\n", styles: [".meta-field{width:100%}.meta-required{margin-left:4px;color:#ef4444}.meta-textarea{resize:none!important}.meta-inline-label{opacity:.9;margin:0;cursor:pointer}.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}.meta-divider{width:100%;height:1px;background:#0000001f}:host-context(.dark-theme) .meta-divider{background:#ffffff26}\n"] }]
+        }], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], disableForm: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableForm", required: false }] }] } });
 
 /**
  * Splits a flat list of fields into row chunks for grid rendering.
@@ -11108,161 +10676,135 @@ function flattenControls(input) {
         .filter((x) => !!x?.configuration?.key);
 }
 
+/**
+ * V2 form host. Signal-based (OnPush): inputs are `input()` signals, the
+ * template-facing structure (`hasControls`/`isGrouped`/`groupedControls`/
+ * `controlRows`) is `computed()` (so `splitControlsIntoRows` runs only when the
+ * config changes, not on every CD pass), and `expandedGroupIds` is a signal.
+ *
+ * Reactive forms aren't signal-native, so control building stays imperative: the
+ * first build runs synchronously in `ngOnInit` (controls exist before first
+ * paint), and an `effect()` re-runs the same build when `config`/`form`/`readOnly`
+ * change — with the same change-detection semantics the old `ngOnChanges` had.
+ */
 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 state controlled by parent.
-     * Used both for rendering and for "enter edit mode" behavior.
-     */
-    readOnly = false;
-    /** 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) */
+    /** Form instance created/owned by the parent (dialog/page). */
+    form = input.required(...(ngDevMode ? [{ debugName: "form" }] : []));
+    /** V2 metadata/config (controls, initialValues, submitValidators, setupDependencies). */
+    config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
+    /** Page-level readOnly state (rendering + "enter edit mode" behavior). */
+    readOnly = input(false, ...(ngDevMode ? [{ debugName: "readOnly" }] : []));
+    /** Optional layout customization for the inner content wrapper. */
+    contentStyle = input(null, ...(ngDevMode ? [{ debugName: "contentStyle" }] : []));
+    /** Optional class name(s) for the inner content wrapper. */
+    contentClass = input(null, ...(ngDevMode ? [{ debugName: "contentClass" }] : []));
     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).
-     */
+    /** Signature of the current schema (key+type only) to detect real schema changes. */
     lastSignature = '';
-    /**
-     * Cleanup function returned by setupDependencies (if any).
-     * Called only when metadata structure changes or on destroy.
-     */
+    /** Cleanup from setupDependencies; called on schema change or destroy. */
     depCleanup;
+    /** Previous input references, to reproduce the old SimpleChanges semantics. */
+    prevConfig = null;
+    prevForm = null;
+    prevReadOnly = false;
+    initialized = false;
+    /** PrimeNG Accordion opened-panel ids. */
+    expandedGroupIds = signal([], ...(ngDevMode ? [{ debugName: "expandedGroupIds" }] : []));
+    // ---- Memoized, config-derived structure for the template ----
+    hasControls = computed(() => Array.isArray(this.config()?.controls) && this.config().controls.length > 0, ...(ngDevMode ? [{ debugName: "hasControls" }] : []));
+    /** Heuristic: grouped config has "ctrl" on the first element. */
+    isGrouped = computed(() => {
+        const c = this.config()?.controls ?? [];
+        return !!c[0]?.ctrl;
+    }, ...(ngDevMode ? [{ debugName: "isGrouped" }] : []));
+    groupedControls = computed(() => this.config()?.controls ?? [], ...(ngDevMode ? [{ debugName: "groupedControls" }] : []));
+    flatControls = computed(() => this.config()?.controls ?? [], ...(ngDevMode ? [{ debugName: "flatControls" }] : []));
+    /** Flat schema split into rows, honoring `style.newRow` hard breaks. */
+    controlRows = computed(() => splitControlsIntoRows(this.flatControls()), ...(ngDevMode ? [{ debugName: "controlRows" }] : []));
+    constructor() {
+        // Reactive updates on input changes. The first run happens during the first
+        // CD (after ngOnInit's synchronous build), and no-ops via the change guard.
+        effect(() => this.rebuild());
+    }
+    ngOnInit() {
+        // First build runs synchronously so controls exist before the first paint.
+        this.rebuild();
+    }
     /**
-     * PrimeNG Accordion "value" for opened panels.
-     * For multiple panels, PrimeNG expects an array of ids.
+     * Ensures controls, patches initial values, wires validators/dependencies and
+     * initializes accordion state — only when config/form/readOnly actually change
+     * (same early-exit the old ngOnChanges had).
      */
-    expandedGroupIds = [];
-    ngOnChanges(changes) {
-        if (!this.form || !this.config)
+    rebuild() {
+        const form = this.form();
+        const config = this.config();
+        const readOnly = this.readOnly();
+        if (!form || !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 flat = flattenControls(config.controls);
+        const signature = flat
+            .map((f) => `${f.configuration.key}:${f.configuration.type}`)
+            .join('|');
+        const configChanged = config !== this.prevConfig;
+        const formChanged = form !== this.prevForm;
         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 early to avoid unnecessary work.
+        const enteringEdit = this.initialized && this.prevReadOnly === true && readOnly === false;
+        // Record inputs seen this run (before the early-exit, so the guard is stable).
+        this.prevConfig = config;
+        this.prevForm = form;
+        this.prevReadOnly = readOnly;
+        this.initialized = true;
         if (!configChanged && !formChanged && !metaChanged && !enteringEdit)
             return;
-        /**
-         * 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 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 without emitting changes:
-         * - prevents loops
-         * - keeps create/edit initialization silent
-         */
-        this.form.patchValue(initial, { emitEvent: false });
-        this.form.updateValueAndValidity({ emitEvent: false });
-        /**
-         * Initialize accordion open panels ONLY when schema changes.
-         * IMPORTANT: do NOT do this on readOnly toggle, otherwise user-collapsed state resets.
-         */
+        const initial = config.initialValues ?? {};
+        ensureControlsV2(this.fb, form, flat, initial, { lang: this.translate.currentLang });
+        // Patch initial values silently (no loops, silent create/edit init).
+        form.patchValue(initial, { emitEvent: false });
+        form.updateValueAndValidity({ emitEvent: false });
+        // Initialize accordion open panels ONLY on schema change (don't reset the
+        // user-collapsed state on a readOnly toggle).
         if (metaChanged) {
-            if (this.isGrouped) {
-                const groups = this.groupedControls ?? [];
-                this.expandedGroupIds = groups
+            if (this.isGrouped()) {
+                const groups = this.groupedControls() ?? [];
+                this.expandedGroupIds.set(groups
                     .filter((g) => !g?.collapsed)
                     .map((g) => this.panelValue(g))
-                    .filter(Boolean);
+                    .filter(Boolean));
             }
             else {
-                this.expandedGroupIds = [];
+                this.expandedGroupIds.set([]);
             }
         }
-        /**
-         * 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 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,
+        this.submitValidator.register(form, config.submitValidators);
+        if ((configChanged || metaChanged) && config.setupDependencies) {
+            const maybeCleanup = config.setupDependencies({
+                form,
                 flatControls: flat,
                 initialValues: initial,
-                getControl: (k) => this.form.get(k),
+                getControl: (k) => form.get(k),
                 findField: (k) => flat.find((f) => f.configuration.key === k) ?? null,
             });
             if (typeof maybeCleanup === 'function')
                 this.depCleanup = maybeCleanup;
         }
-        /**
-         * 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(() => {
                 this.touchAndValidateOnlyFilledControls();
                 this.expandVisibleInvalidGroupsUnion();
             });
         }
-        // Store signature for the next change detection pass
         this.lastSignature = signature;
     }
-    /**
-     * PrimeNG Accordion emits value as:
-     * - single id (string/number)
-     * - array of ids
-     * We normalize everything into string[] for stable internal state.
-     */
+    /** Normalizes PrimeNG Accordion value into a stable string[]. */
     onAccordionValueChange(v) {
-        this.expandedGroupIds = this.normalizeAccordionValue(v);
+        this.expandedGroupIds.set(this.normalizeAccordionValue(v));
     }
-    /** Normalizes Accordion value into a stable string[] representation */
     normalizeAccordionValue(v) {
         if (Array.isArray(v))
             return v.map((x) => `${x}`);
@@ -11271,74 +10813,30 @@ 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 ?? [];
-    }
-    /**
-     * Flat schema split into row chunks, honoring `style.newRow` hard breaks.
-     * Used by the non-grouped grid template.
-     */
-    get controlRows() {
-        return splitControlsIntoRows(this.flatControls);
-    }
-    /** TrackBy for group rendering */
+    /** TrackBy for group rendering. */
     groupTrack(g, idx) {
         return g?.id ?? idx;
     }
-    /**
-     * PrimeNG accordion panel `value` must match accordion `value` type.
-     * We always convert group id to string for consistent behavior.
-     */
+    /** Group id as a string (matches the accordion `value` type). */
     panelValue(g) {
         const id = g?.id;
         return id === null || id === undefined ? '' : `${id}`;
     }
     // ---------------- core behavior ----------------
-    /**
-     * 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
-     */
+    /** Marks & validates ONLY controls that already have meaningful values. */
     touchAndValidateOnlyFilledControls() {
-        const controls = this.form?.controls ?? {};
-        for (const [key, ctrl] of Object.entries(controls)) {
+        const controls = this.form()?.controls ?? {};
+        for (const [, ctrl] of Object.entries(controls)) {
             if (!ctrl)
                 continue;
-            const value = ctrl.value;
-            // Touch only if this field is already populated (edit case) or prefilled.
-            if (this.hasMeaningfulValue(value)) {
+            if (this.hasMeaningfulValue(ctrl.value)) {
                 ctrl.markAsTouched();
                 ctrl.updateValueAndValidity({ emitEvent: true });
             }
         }
-        // Optional: keep form status consistent after selective updates
-        this.form.updateValueAndValidity({ emitEvent: true });
+        this.form().updateValueAndValidity({ emitEvent: true });
     }
-    /**
-     * Defines what counts as a "meaningful" value:
-     * - non-empty strings
-     * - numbers / booleans
-     * - non-empty arrays
-     * - objects with common identifiers (key/uuid/id) or any own keys
-     */
+    /** What counts as a "meaningful" value (non-empty string/number/boolean/array/object). */
     hasMeaningfulValue(v) {
         if (v === null || v === undefined)
             return false;
@@ -11351,61 +10849,46 @@ class MetaFormV2Component {
         if (Array.isArray(v))
             return v.length > 0;
         if (typeof v === 'object') {
-            // 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
             return Object.keys(v).length > 0;
         }
         return false;
     }
-    /**
-     * "Visible invalid" means:
-     * - invalid
-     * - AND user has interacted with it (touched or dirty)
-     * This matches typical UI behavior: show errors only after interaction.
-     */
+    /** "Visible invalid" = invalid AND interacted with (touched/dirty). */
     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)));
+        return keys.some((k) => this.isVisibleInvalid(this.form().get(k)));
     }
-    /**
-     * Expands all groups that contain visible invalid controls,
-     * while preserving any groups already expanded by the user.
-     */
+    /** Expands groups with visible-invalid controls, preserving user-expanded ones. */
     expandVisibleInvalidGroupsUnion() {
-        if (!this.isGrouped)
+        if (!this.isGrouped())
             return;
-        const groups = this.groupedControls ?? [];
+        const groups = this.groupedControls() ?? [];
         const invalidIds = groups
             .filter((g) => this.groupHasVisibleInvalid(g))
             .map((g) => this.panelValue(g))
             .filter(Boolean);
         if (!invalidIds.length)
             return;
-        this.expandedGroupIds = Array.from(new Set([...this.expandedGroupIds, ...invalidIds]));
+        this.expandedGroupIds.set(Array.from(new Set([...this.expandedGroupIds(), ...invalidIds])));
     }
-    /** Cleanup dependency subscriptions when component is destroyed */
     ngOnDestroy() {
         this.depCleanup?.();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaFormV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: MetaFormV2Component, isStandalone: true, selector: "phoenix-meta-form-v2", inputs: { form: "form", config: "config", readOnly: "readOnly", contentStyle: "contentStyle", contentClass: "contentClass" }, usesOnChanges: true, ngImport: i0, template: "<div [formGroup]=\"form\">\n  @if (hasControls) {\n\n    @if (isGrouped) {\n      <p-accordion\n        [multiple]=\"true\"\n        [value]=\"expandedGroupIds\"\n        (valueChange)=\"onAccordionValueChange($event)\"\n      >\n        @for (g of groupedControls; track groupTrack(g, $index)) {\n            <p-accordion-panel [value]=\"panelValue(g)\">\n                <p-accordion-header>\n\n                  <!-- plus/minus toggle icon -->\n                  <ng-template #toggleicon let-active=\"active\">\n                    @if (active) {\n                      <i class=\"pi pi-minus-circle\"></i>\n                    } @else {\n                      <i class=\"pi pi-plus-circle\"></i>\n                    }\n                  </ng-template>\n\n                  {{ g?.groupName | translate }}\n                </p-accordion-header>\n            \n                <p-accordion-content>\n                  <div [ngStyle]=\"contentStyle\" [ngClass]=\"contentClass\">\n                    <phoenix-meta-form-group-v2 [group]=\"g\" [form]=\"form\" [readOnly]=\"readOnly\"></phoenix-meta-form-group-v2>\n                  </div>\n                </p-accordion-content>\n            </p-accordion-panel>\n        }\n      </p-accordion>\n\n    } @else {\n        @for (row of controlRows; track $index) {\n          <div class=\"grid\">\n              @for (f of row; track f.configuration.key) {\n              <div [ngClass]=\"f.style.colWidth ?? 'col-12 md:col-6'\">\n                  <phoenix-meta-form-field-v2 [field]=\"f\" [form]=\"form\" [readOnly]=\"readOnly\"></phoenix-meta-form-field-v2>\n              </div>\n              }\n          </div>\n        }\n    }\n\n  }\n</div>", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: AccordionModule }, { kind: "component", type: i3$1.Accordion, selector: "p-accordion", inputs: ["value", "multiple", "styleClass", "expandIcon", "collapseIcon", "selectOnFocus", "transitionOptions"], outputs: ["valueChange", "onClose", "onOpen"] }, { kind: "component", type: i3$1.AccordionPanel, selector: "p-accordion-panel, p-accordionpanel", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: i3$1.AccordionHeader, selector: "p-accordion-header, p-accordionheader" }, { kind: "component", type: i3$1.AccordionContent, selector: "p-accordion-content, p-accordioncontent" }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: MetaFormFieldV2Component, selector: "phoenix-meta-form-field-v2", inputs: ["field", "form", "readOnly", "disableForm"] }, { kind: "component", type: MetaFormGroupV2Component, selector: "phoenix-meta-form-group-v2", inputs: ["group", "form", "readOnly"] }, { kind: "pipe", type: i4$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: MetaFormV2Component, isStandalone: true, selector: "phoenix-meta-form-v2", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, contentStyle: { classPropertyName: "contentStyle", publicName: "contentStyle", isSignal: true, isRequired: false, transformFunction: null }, contentClass: { classPropertyName: "contentClass", publicName: "contentClass", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [formGroup]=\"form()\">\n  @if (hasControls()) {\n\n    @if (isGrouped()) {\n      <p-accordion\n        [multiple]=\"true\"\n        [value]=\"expandedGroupIds()\"\n        (valueChange)=\"onAccordionValueChange($event)\"\n      >\n        @for (g of groupedControls(); track groupTrack(g, $index)) {\n            <p-accordion-panel [value]=\"panelValue(g)\">\n                <p-accordion-header>\n\n                  <!-- plus/minus toggle icon -->\n                  <ng-template #toggleicon let-active=\"active\">\n                    @if (active) {\n                      <i class=\"pi pi-minus-circle\"></i>\n                    } @else {\n                      <i class=\"pi pi-plus-circle\"></i>\n                    }\n                  </ng-template>\n\n                  {{ g?.groupName | translate }}\n                </p-accordion-header>\n\n                <p-accordion-content>\n                  <div [ngStyle]=\"contentStyle()\" [ngClass]=\"contentClass()\">\n                    <phoenix-meta-form-group-v2 [group]=\"g\" [form]=\"form()\" [readOnly]=\"readOnly()\"></phoenix-meta-form-group-v2>\n                  </div>\n                </p-accordion-content>\n            </p-accordion-panel>\n        }\n      </p-accordion>\n\n    } @else {\n        @for (row of controlRows(); track $index) {\n          <div class=\"grid\">\n              @for (f of row; track f.configuration.key) {\n              <div [ngClass]=\"f.style.colWidth ?? 'col-12 md:col-6'\">\n                  <phoenix-meta-form-field-v2 [field]=\"f\" [form]=\"form()\" [readOnly]=\"readOnly()\"></phoenix-meta-form-field-v2>\n              </div>\n              }\n          </div>\n        }\n    }\n\n  }\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: AccordionModule }, { kind: "component", type: i3$1.Accordion, selector: "p-accordion", inputs: ["value", "multiple", "styleClass", "expandIcon", "collapseIcon", "selectOnFocus", "transitionOptions"], outputs: ["valueChange", "onClose", "onOpen"] }, { kind: "component", type: i3$1.AccordionPanel, selector: "p-accordion-panel, p-accordionpanel", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: i3$1.AccordionHeader, selector: "p-accordion-header, p-accordionheader" }, { kind: "component", type: i3$1.AccordionContent, selector: "p-accordion-content, p-accordioncontent" }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: MetaFormFieldV2Component, selector: "phoenix-meta-form-field-v2", inputs: ["field", "form", "readOnly", "disableForm"] }, { kind: "component", type: MetaFormGroupV2Component, selector: "phoenix-meta-form-group-v2", inputs: ["group", "form", "readOnly"] }, { kind: "pipe", type: i4$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaFormV2Component, decorators: [{
             type: Component,
@@ -11416,20 +10899,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         TranslateModule,
                         MetaFormFieldV2Component,
                         MetaFormGroupV2Component,
-                    ], template: "<div [formGroup]=\"form\">\n  @if (hasControls) {\n\n    @if (isGrouped) {\n      <p-accordion\n        [multiple]=\"true\"\n        [value]=\"expandedGroupIds\"\n        (valueChange)=\"onAccordionValueChange($event)\"\n      >\n        @for (g of groupedControls; track groupTrack(g, $index)) {\n            <p-accordion-panel [value]=\"panelValue(g)\">\n                <p-accordion-header>\n\n                  <!-- plus/minus toggle icon -->\n                  <ng-template #toggleicon let-active=\"active\">\n                    @if (active) {\n                      <i class=\"pi pi-minus-circle\"></i>\n                    } @else {\n                      <i class=\"pi pi-plus-circle\"></i>\n                    }\n                  </ng-template>\n\n                  {{ g?.groupName | translate }}\n                </p-accordion-header>\n            \n                <p-accordion-content>\n                  <div [ngStyle]=\"contentStyle\" [ngClass]=\"contentClass\">\n                    <phoenix-meta-form-group-v2 [group]=\"g\" [form]=\"form\" [readOnly]=\"readOnly\"></phoenix-meta-form-group-v2>\n                  </div>\n                </p-accordion-content>\n            </p-accordion-panel>\n        }\n      </p-accordion>\n\n    } @else {\n        @for (row of controlRows; track $index) {\n          <div class=\"grid\">\n              @for (f of row; track f.configuration.key) {\n              <div [ngClass]=\"f.style.colWidth ?? 'col-12 md:col-6'\">\n                  <phoenix-meta-form-field-v2 [field]=\"f\" [form]=\"form\" [readOnly]=\"readOnly\"></phoenix-meta-form-field-v2>\n              </div>\n              }\n          </div>\n        }\n    }\n\n  }\n</div>", styles: [":host{display:block}\n"] }]
-        }], propDecorators: { form: [{
-                type: Input,
-                args: [{ required: true }]
-            }], config: [{
-                type: Input,
-                args: [{ required: true }]
-            }], readOnly: [{
-                type: Input
-            }], contentStyle: [{
-                type: Input
-            }], contentClass: [{
-                type: Input
-            }] } });
+                    ], template: "<div [formGroup]=\"form()\">\n  @if (hasControls()) {\n\n    @if (isGrouped()) {\n      <p-accordion\n        [multiple]=\"true\"\n        [value]=\"expandedGroupIds()\"\n        (valueChange)=\"onAccordionValueChange($event)\"\n      >\n        @for (g of groupedControls(); track groupTrack(g, $index)) {\n            <p-accordion-panel [value]=\"panelValue(g)\">\n                <p-accordion-header>\n\n                  <!-- plus/minus toggle icon -->\n                  <ng-template #toggleicon let-active=\"active\">\n                    @if (active) {\n                      <i class=\"pi pi-minus-circle\"></i>\n                    } @else {\n                      <i class=\"pi pi-plus-circle\"></i>\n                    }\n                  </ng-template>\n\n                  {{ g?.groupName | translate }}\n                </p-accordion-header>\n\n                <p-accordion-content>\n                  <div [ngStyle]=\"contentStyle()\" [ngClass]=\"contentClass()\">\n                    <phoenix-meta-form-group-v2 [group]=\"g\" [form]=\"form()\" [readOnly]=\"readOnly()\"></phoenix-meta-form-group-v2>\n                  </div>\n                </p-accordion-content>\n            </p-accordion-panel>\n        }\n      </p-accordion>\n\n    } @else {\n        @for (row of controlRows(); track $index) {\n          <div class=\"grid\">\n              @for (f of row; track f.configuration.key) {\n              <div [ngClass]=\"f.style.colWidth ?? 'col-12 md:col-6'\">\n                  <phoenix-meta-form-field-v2 [field]=\"f\" [form]=\"form()\" [readOnly]=\"readOnly()\"></phoenix-meta-form-field-v2>\n              </div>\n              }\n          </div>\n        }\n    }\n\n  }\n</div>\n", styles: [":host{display:block}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], contentStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentStyle", required: false }] }], contentClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentClass", required: false }] }] } });
 
 class MetaFormButtonsV2Component {
     /**