ngx-dynamic-entity 1.7.0 → 1.8.1

package/fesm2022/ngx-dynamic-entity.mjs

@@ -1263,12 +1263,12 @@ class DateFieldComponent {
     formatDate(value) {
         if (!value)
             return '—';
-        try {
-            return new Date(value).toLocaleDateString();
-        }
-        catch {
-            return value;
-        }
+        // `new Date('nonsense')` does not throw and `toLocaleDateString()` returns the *string*
+        // "Invalid Date", so the try/catch this replaced never fired and readers saw that text
+        // instead of their data. Records outlive schemas — a field retyped from text to date can
+        // hold anything — so an unparseable value is shown as stored.
+        const parsed = new Date(value);
+        return Number.isNaN(parsed.getTime()) ? value : parsed.toLocaleDateString();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: DateFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: DateFieldComponent, isStandalone: true, selector: "ngx-date-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
@@ -2156,7 +2156,11 @@ class RadioFieldComponent {
      * into an id attribute.
      */
     getRadioId(option) {
-        const text = String(this.getOptVal(option) ?? 'opt');
+        // `??` cannot fire here: `resolveOptionValue` returns '' for an empty option, not null,
+        // so every valueless option produced the same id — and duplicate ids break the `for`
+        // that ties each label to its input.
+        const raw = String(this.getOptVal(option) ?? '').trim();
+        const text = raw || 'opt';
         return `${this.field.id}-${text.trim().replace(/\s+/g, '_').toLowerCase()}`;
     }
     getOptVal(option) {
@@ -4333,11 +4337,50 @@ class DynamicFormComponent {
         }
         if (changes['config'] || changes['initialData']) {
             this.buildForm();
-            if (this.visibleTabs.length > 0 && !this.activeTab()) {
-                this.setActiveTab(this.visibleTabs[0].id);
+            // Clear *before* the guard below, not after it.
+            //
+            // The reset used to sit behind `if (visibleTabs.length === 0) return`, so a swap that
+            // arrived while no tab was visible — a config still being applied, or every tab hidden
+            // by a rule at that instant — skipped it entirely and the previous record's tab
+            // survived into the next one. Clearing is unconditional and cheap, and safe on its own
+            // because `activeTabConfig` already falls back to the first visible tab when nothing
+            // is selected. Selecting the tab is what needs tabs to exist; forgetting the old one
+            // does not.
+            if (changes['config'] || this.isRecordSwap(changes['initialData'])) {
+                this.activeTab.set('');
+                this.activeSubTab.set('');
+            }
+            if (this.visibleTabs.length === 0)
+                return;
+            // The first tab used to be chosen only when no tab was active yet, and nothing ever
+            // cleared `activeTab` — so a form that stays mounted while `initialData` is swapped
+            // opened the next record on the tab the previous one was left on. The demo escaped it
+            // by destroying the form between records; a host that keeps it mounted did not.
+            //
+            // Resetting here is consistent with what already happens: `buildForm` assigns a brand
+            // new FormGroup, so a changed `initialData` has already discarded every control and
+            // all validation state. The tab was the one thing pretending nothing had changed.
+            if (!this.activeTab()) {
+                // No focus steal: the panel gains focus when a *user* picks a tab, not when a host
+                // swaps the record underneath them.
+                this.setActiveTab(this.visibleTabs[0].id, { focusPanel: false });
             }
         }
     }
+    /**
+     * Whether an `initialData` change represents loading a different record.
+     *
+     * Not every change does. A template binding like `[initialData]="record() || {}"` yields a
+     * fresh object literal on each evaluation, so `ngOnChanges` fires with two empty objects
+     * and nothing has actually been loaded — resetting there would drag someone back to the
+     * first tab while they were filling in a new record on the third.
+     */
+    isRecordSwap(change) {
+        if (!change || change.isFirstChange())
+            return false;
+        const empty = (v) => v === null || v === undefined || (typeof v === 'object' && Object.keys(v).length === 0);
+        return !(empty(change.previousValue) && empty(change.currentValue));
+    }
     ngOnDestroy() {
         this.valueSub?.unsubscribe();
         this.statusSub?.unsubscribe();
@@ -4950,7 +4993,12 @@ class DynamicFormComponent {
     focusActivePanel() {
         if (typeof requestAnimationFrame !== 'function')
             return;
-        requestAnimationFrame(() => this.formPanel?.nativeElement?.focus?.());
+        requestAnimationFrame(() => 
+        // `preventScroll` because this focus exists to tell a screen reader the panel changed,
+        // not to move the page. The default scrolls the panel into view, which on a short
+        // viewport jumps the layout — enough that a Save button below it moves out from under
+        // a tap. The panel sits directly beneath the tab strip and is already on screen.
+        this.formPanel?.nativeElement?.focus?.({ preventScroll: true }));
     }
     /** Accessible name for the field panel — it is the tabpanel for the active tab. */
     get activeTabLabel() {