@fuentis/phoenix-ui 0.0.9-alpha.538 → 0.0.9-alpha.539

package/fesm2022/fuentis-phoenix-ui.mjs

@@ -9301,9 +9301,9 @@ function flattenControls(input) {
 class MetaFormV2Component {
     form;
     config;
-    /** page-level readOnly (parent toggles) */
+    /** Page-level readOnly (parent toggles) */
     readOnly = false;
-    /** optional layout props */
+    /** Optional layout props */
     contentStyle = null;
     contentClass = null;
     fb = inject(FormBuilder);
@@ -9324,22 +9324,24 @@ class MetaFormV2Component {
         const enteringEdit = !!changes['readOnly'] &&
             changes['readOnly'].previousValue === true &&
             changes['readOnly'].currentValue === false;
-        // ako se ništa bitno nije promenilo — izađi
+        // If nothing relevant changed, exit
         if (!configChanged && !formChanged && !metaChanged && !enteringEdit)
             return;
-        // cleanup dependencies (samo kad config/meta menjaš)
+        // Cleanup dependencies ONLY when metadata/structure changes
         if (configChanged || metaChanged) {
             this.depCleanup?.();
             this.depCleanup = undefined;
         }
-        // ensure controls + sync validators
+        // Ensure controls exist + sync validators
         const initial = this.config.initialValues ?? {};
         ensureControlsV2(this.fb, this.form, flat, initial, { lang: this.translate.currentLang });
-        // patch initial values (no emit)
+        // Patch initial values (no emit)
         this.form.patchValue(initial, { emitEvent: false });
         this.form.updateValueAndValidity({ emitEvent: false });
-        // ✅ init expanded only when STRUCTURE changed (metaChanged)
-        // otvori sve što je collapsed:false
+        /**
+         * Initialize accordion expanded panels ONLY when structure changed.
+         * This must NOT run on readOnly toggle, otherwise you "reset" user-collapsed state.
+         */
         if (metaChanged) {
             if (this.isGrouped) {
                 const groups = this.groupedControls ?? [];
@@ -9352,9 +9354,9 @@ class MetaFormV2Component {
                 this.expandedGroupIds = [];
             }
         }
-        // register submit-only validators
+        // Register submit-only validators (safe even if empty)
         this.submitValidator.register(this.form, this.config.submitValidators);
-        // bind dependencies (samo kad config/meta menjaš)
+        // Bind dependencies ONLY when metadata/structure changes
         if ((configChanged || metaChanged) && this.config.setupDependencies) {
             const maybeCleanup = this.config.setupDependencies({
                 form: this.form,
@@ -9366,18 +9368,16 @@ class MetaFormV2Component {
             if (typeof maybeCleanup === 'function')
                 this.depCleanup = maybeCleanup;
         }
-        // ✅ entering edit:
-        // 1) odmah pokaži sync greške
-        // 2) auto-expand invalid groups (ne zatvaraj postojeće)
+        /**
+         * Entering edit:
+         * ✅ Show errors ONLY for controls that already have a value.
+         * ❌ Do NOT trigger mandatory "required" messages for empty fields.
+         * ✅ Expand groups that contain such "visible invalid" controls.
+         */
         if (enteringEdit) {
             queueMicrotask(() => {
-                this.form.markAllAsTouched();
-                // da status/value promene “prođu” do polja
-                Object.values(this.form.controls).forEach((c) => {
-                    c.updateValueAndValidity({ emitEvent: true });
-                });
-                this.form.updateValueAndValidity({ emitEvent: true });
-                this.expandInvalidGroupsUnion();
+                this.touchAndValidateOnlyFilledControls();
+                this.expandVisibleInvalidGroupsUnion();
             });
         }
         this.lastSignature = signature;
@@ -9393,7 +9393,7 @@ class MetaFormV2Component {
             return [];
         return [`${v}`];
     }
-    // ---- template helpers ----
+    // ---------------- template helpers ----------------
     get hasControls() {
         return Array.isArray(this.config?.controls) && this.config.controls.length > 0;
     }
@@ -9415,19 +9415,79 @@ class MetaFormV2Component {
         const id = g?.id;
         return id === null || id === undefined ? '' : `${id}`;
     }
-    groupHasInvalid(g) {
+    // ---------------- core behavior ----------------
+    /**
+     * Mark & validate ONLY controls that already have a meaningful value.
+     * This prevents "required" errors from showing immediately on CREATE dialogs.
+     */
+    touchAndValidateOnlyFilledControls() {
+        const controls = this.form?.controls ?? {};
+        for (const [key, ctrl] of Object.entries(controls)) {
+            if (!ctrl)
+                continue;
+            const value = ctrl.value;
+            // Touch only if user already has a value (edit case) or prefilled values exist
+            if (this.hasMeaningfulValue(value)) {
+                ctrl.markAsTouched();
+                ctrl.updateValueAndValidity({ emitEvent: true });
+            }
+        }
+        // Keep form validity in sync (optional)
+        this.form.updateValueAndValidity({ emitEvent: true });
+    }
+    /**
+     * What counts as a "meaningful value"?
+     * - non-empty strings
+     * - numbers / booleans
+     * - non-empty arrays
+     * - objects with at least one key (or common "selected item" shapes)
+     */
+    hasMeaningfulValue(v) {
+        if (v === null || v === undefined)
+            return false;
+        if (typeof v === 'string')
+            return v.trim().length > 0;
+        if (typeof v === 'number')
+            return true;
+        if (typeof v === 'boolean')
+            return true;
+        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 = invalid AND (touched OR dirty).
+     * This aligns with the goal: don't expand groups due to empty required fields on create.
+     */
+    isVisibleInvalid(ctrl) {
+        if (!ctrl)
+            return false;
+        return ctrl.invalid && (ctrl.touched || ctrl.dirty);
+    }
+    groupHasVisibleInvalid(g) {
         const keys = (g?.ctrl ?? [])
             .map((f) => f?.configuration?.key)
             .filter(Boolean);
-        return keys.some((k) => this.form.get(k)?.invalid);
+        return keys.some((k) => this.isVisibleInvalid(this.form.get(k)));
     }
-    /** ✅ open invalid groups but KEEP already opened ones */
-    expandInvalidGroupsUnion() {
+    /** Expand invalid groups but KEEP already opened ones */
+    expandVisibleInvalidGroupsUnion() {
         if (!this.isGrouped)
             return;
         const groups = this.groupedControls ?? [];
         const invalidIds = groups
-            .filter((g) => this.groupHasInvalid(g))
+            .filter((g) => this.groupHasVisibleInvalid(g))
             .map((g) => this.panelValue(g))
             .filter(Boolean);
         if (!invalidIds.length)