ngx-dynamic-entity 1.4.0 → 1.5.0

package/fesm2022/ngx-dynamic-entity.mjs

@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
 import { InjectionToken, makeEnvironmentProviders, inject, Injectable, signal, Input, ChangeDetectionStrategy, Component, DestroyRef, Injector, isDevMode, ViewContainerRef, ViewChild, forwardRef, ChangeDetectorRef, Optional, Inject, EventEmitter, computed, HostListener, ViewChildren, Output, ElementRef, afterNextRender } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { ReactiveFormsModule, Validators, FormBuilder, FormArray, FormGroup } from '@angular/forms';
-import { resolveLabel, formatDisplayValue, normalizeLookupValues, lookupValuesToOptions, valuesMatch, getOptionStoredValue, resolveOptionLabel, resolveOptionValue, buildReferenceCacheKey, normalizeReferenceOptions, entityKeyFromCacheKey, applyCascadeFilter, resolveEffectiveMask, shouldMaskField, findTab, fileRefName, evaluateFormRules, filterRulesForTab, evaluateFieldVisibility, normalizeConfigOptions, migrateRecord, getTabData, getValueByPath, setTabData, setValueByPath, normalizeArrayStructures, ambiguousFieldIds, toRefToken, collectFieldScopes, fieldRefFor, refOf, getTabPath, applyAutoPatch, applyPatchOnTrue } from '@dynamic-entity/core';
+import { resolveLabel, formatDisplayValue, normalizeLookupValues, lookupValuesToOptions, valuesMatch, getOptionStoredValue, resolveOptionLabel, resolveOptionValue, buildReferenceCacheKey, normalizeReferenceOptions, entityKeyFromCacheKey, applyCascadeFilter, resolveEffectiveMask, shouldMaskField, findTab, fileRefName, evaluateFormRules, filterRulesForTab, evaluateFieldVisibility, normalizeConfigOptions, migrateRecord, getTabData, getValueByPath, setTabData, setValueByPath, normalizeArrayStructures, ambiguousFieldIds, parseFieldRef, toRefToken, collectFieldScopes, fieldRefFor, refOf, getTabPath, applyAutoPatch, applyPatchOnTrue } from '@dynamic-entity/core';
 export { formatDisplayValue, normalizeConfig, normalizeOption, resolveLabel, resolveOptionLabel, resolveOptionValue, valuesMatch } from '@dynamic-entity/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { Subject, isObservable, firstValueFrom } from 'rxjs';
@@ -4096,12 +4096,20 @@ class DynamicFormComponent {
         this.statusSub?.unsubscribe();
         this.selectionSub?.unsubscribe();
     }
-    setActiveTab(tabId) {
+    /**
+     * `focusPanel: false` is for a caller that is about to focus something more specific.
+     *
+     * Activating a tab moves focus into its panel, which is right for a keyboard user pressing
+     * a tab. A quick-jump also switches tabs, but then focuses the field it was aiming at — and
+     * the panel focus runs on `requestAnimationFrame`, after `afterNextRender`, so it landed
+     * second and took the focus back every time. Saying so is better than out-timing it.
+     */
+    setActiveTab(tabId, options) {
         const changed = this.activeTab() !== tabId;
         if (changed)
             this.activeTabChange.emit(tabId);
         this.activeTab.set(tabId);
-        if (changed)
+        if (changed && options?.focusPanel !== false)
             this.focusActivePanel();
         const parent = findTab(this.tabs, tabId);
         if (parent?.children?.length) {
@@ -4111,10 +4119,10 @@ class DynamicFormComponent {
             this.activeSubTab.set('');
         }
     }
-    setActiveSubTab(subTabId) {
+    setActiveSubTab(subTabId, options) {
         const changed = this.activeSubTab() !== subTabId;
         this.activeSubTab.set(subTabId);
-        if (changed)
+        if (changed && options?.focusPanel !== false)
             this.focusActivePanel();
     }
     getFieldSpan(field) {
@@ -4411,9 +4419,8 @@ class DynamicFormComponent {
      * `flattenFormValues` keys by bare id, so one of the two silently wins and the rule reads
      * whichever landed there.
      *
-     * `validateConfig` catches this for `showWhen` and cascade parents, which live in the
-     * config. Rules do not: they arrive as a separate `@Input`, so the config alone cannot be
-     * checked for them and this is the only place both are in hand.
+     * `validateConfig({ rules })` catches this statically. The check here remains because
+     * consumers that never call the validator still get a signal in development.
      */
     warnAmbiguousRuleReferences() {
         if (!isDevMode() || !this.rules?.length || !this.config)
@@ -4434,14 +4441,18 @@ class DynamicFormComponent {
                     referenced.add(target.id);
             }
         }
-        for (const id of referenced) {
+        for (const raw of referenced) {
+            const parsed = parseFieldRef(raw);
+            if (parsed.kind === 'ref')
+                continue;
+            const id = parsed.value;
             const scopes = ambiguous.get(id);
             if (!scopes || DynamicFormComponent.warnedAmbiguousIds.has(id))
                 continue;
             DynamicFormComponent.warnedAmbiguousIds.add(id);
             console.warn(`[ngx-dynamic-entity] A rule references field "${id}", which is defined in ${scopes.join(' and ')}. ` +
-                `Rules address a field by bare id, so the rule will read whichever one the form finds first. ` +
-                `Give one of them a distinct id.`);
+                `A bare id cannot say which one is meant, so the rule will read whichever the form finds first. ` +
+                `Name it by path instead, as [${scopes[0]}.${id}].`);
         }
     }
     static warnedAmbiguousIds = new Set();
@@ -4643,6 +4654,13 @@ class DynamicFormComponent {
     getControl(fieldId, currentTabId) {
         if (!this.form)
             return null;
+        // A bracketed path names exactly one control, and the form nests by tab exactly as the
+        // path does — so `form.get('work.address')` walks straight to it. Anything that names a
+        // field can therefore use a path: `showWhen` keys, `patchOnTrue` mappings and `autoPatch`
+        // targets, not only rules.
+        const parsed = parseFieldRef(fieldId);
+        if (parsed.kind === 'ref')
+            return this.form.get(parsed.value);
         if (currentTabId) {
             const tabGrp = this.getTabGroup(currentTabId);
             const ctrl = tabGrp?.get(fieldId);
@@ -5259,12 +5277,14 @@ class DynamicRecordFormComponent {
         const location = this.locateField(fieldId);
         if (!location)
             return;
-        this.dynamicFormComp?.setActiveTab(location.tabId);
+        // The panel must not take the focus back: this jump is going to focus the field itself.
+        this.dynamicFormComp?.setActiveTab(location.tabId, { focusPanel: false });
         // `setActiveTab` resets to a tab's first child, so the sub-tab has to be selected after
         // it, not before. Without this the walk found sub-tab fields and then rendered the wrong
         // panel, so the element the callback below looks for never existed.
-        if (location.subTabId)
-            this.dynamicFormComp?.setActiveSubTab(location.subTabId);
+        if (location.subTabId) {
+            this.dynamicFormComp?.setActiveSubTab(location.subTabId, { focusPanel: false });
+        }
         afterNextRender(() => {
             // The field id comes from config, so it never goes into a selector string: no
             // escaping to get wrong, and no need for `CSS.escape`, which jsdom and older