@praxisui/tabs 9.0.56 → 9.0.57

package/README.md

@@ -73,6 +73,16 @@ export class TabsHostComponent {
 
 Controlled `selectedIndex` updates the active tab without re-emitting `selectedIndexChange`, which prevents loops in dynamic-page state projections.
 
+Nested widgets declared in `tabs[].widgets` or `nav.links[].widgets` expose their
+registered outputs automatically through the contextual `widgetEvent` envelope.
+Do not repeat component outputs in each nested widget definition only to make a
+`UiCompositionPlan` link work. The envelope preserves the container/tab path and
+`childWidgetKey`, allowing Dynamic Page to resolve canonical `nestedPath` links.
+
+When Dynamic Page reprojects a config object solely to deliver a nested input,
+Tabs preserves the active tab by stable tab/link id. An explicitly authored
+`group.selectedIndex` or `nav.selectedIndex` change remains authoritative.
+
 For navigation where the host renders the active content externally, set `config.group.renderBody = false` in group mode or `config.nav.renderBody = false` in nav mode. The component still owns the Material tab header/link header, selected index, keyboard navigation and selection ARIA, but it does not render internal tab/nav bodies or empty states. Hosts should render the external active panel next to the tabs and give that panel a stable accessible label that matches the active section.
 
 ## Metadata Shape

package/ai/component-registry.json

@@ -1,8 +1,8 @@
 {
   "schemaVersion": "1.0.0",
-  "generatedAt": "2026-09-01T07:07:50.474Z",
+  "generatedAt": "2026-09-01T14:12:48.929Z",
   "packageName": "@praxisui/tabs",
-  "packageVersion": "9.0.56",
+  "packageVersion": "9.0.57",
   "sourceRegistry": "praxis-component-registry-ingestion",
   "sourceRegistryVersion": "1.0.0",
   "componentCount": 1,

package/fesm2022/praxisui-tabs.mjs

@@ -1,10 +1,10 @@
 import * as i0 from '@angular/core';
-import { inject, Input, Inject, Component, ChangeDetectorRef, effect, EventEmitter, signal, Output, ChangeDetectionStrategy, ViewChild, ENVIRONMENT_INITIALIZER } from '@angular/core';
+import { inject, Input, Inject, Component, ChangeDetectorRef, effect, EventEmitter, signal, ViewChild, Output, ChangeDetectionStrategy, ENVIRONMENT_INITIALIZER } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i3 from '@angular/material/tabs';
-import { MatTabsModule } from '@angular/material/tabs';
+import { MatTabsModule, MatTabGroup } from '@angular/material/tabs';
 import * as i4$1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i10 from '@angular/material/tooltip';
@@ -3182,6 +3182,8 @@ class PraxisTabs {
     groupLoaded = new Set();
     navLoaded = new Set();
     controlledSelectedIndex;
+    destroyed = false;
+    groupComponent;
     destroy$ = new Subject();
     widgetDefinitionCache = new WeakMap();
     generatedContentForm = new FormGroup({});
@@ -3200,8 +3202,10 @@ class PraxisTabs {
             // previous inputs in that case (for example, a newly selected parent
             // identity projected into a related-resource outlet).
             this.widgetDefinitionCache = new WeakMap();
-            // Reset loaded caches on config change and seed with current selections
-            this.syncSelectionFromConfig();
+            // Runtime composition can replace the config object only to project a
+            // nested child input. Preserve the user's active tab when the incoming
+            // document did not author a different selectedIndex explicitly.
+            this.syncSelectionFromConfigChange(changes['config']);
             this.syncGeneratedContentForm();
             // Persist when tabsId provided and the instance is storage-owned.
             this.persistConfig(this.config);
@@ -3209,6 +3213,7 @@ class PraxisTabs {
         }
     }
     ngOnDestroy() {
+        this.destroyed = true;
         this.assistantSessions.removeContextSession(this.buildAiAssistantContextSnapshot().identity);
         this.aiAssistantStateSubscription?.unsubscribe();
         this.destroy$.next();
@@ -3253,8 +3258,45 @@ class PraxisTabs {
         const entry = this.visibleTabEntries()[index];
         if (!entry)
             return;
+        if (entry.index === this.selectedIndexSignal())
+            return;
         this.onSelectedIndexChange(entry.index);
     }
+    /**
+     * Material commits a pointer-selected tab during its next content-check cycle.
+     * A Tabs instance hosted by DynamicWidgetLoader can receive a composition
+     * reprojection in that same cycle, leaving Material's pending index uncommitted.
+     * Resolve the semantic tab identity at the container boundary so pointer
+     * selection remains deterministic without changing keyboard focus semantics.
+     */
+    onGroupPointerClick(event) {
+        const tabElement = event.composedPath().find((candidate) => (candidate instanceof HTMLElement && candidate.getAttribute('role') === 'tab'));
+        if (!tabElement || tabElement.getAttribute('aria-disabled') === 'true')
+            return;
+        const entries = this.visibleTabEntries();
+        const tabId = tabElement.id;
+        const byId = tabId
+            ? entries.findIndex((entry) => entry.tab.id === tabId)
+            : -1;
+        const ariaPosition = Number(tabElement.getAttribute('aria-posinset')) - 1;
+        const visibleIndex = byId >= 0
+            ? byId
+            : Number.isInteger(ariaPosition) ? ariaPosition : -1;
+        if (visibleIndex < 0 || visibleIndex >= entries.length)
+            return;
+        this.onVisibleTabIndexChange(visibleIndex);
+        // Dynamic widget hosts can reconcile inputs outside the regular parent
+        // change-detection traversal. Material records its pending selection in
+        // the target click handler, so finish the local check after bubbling ends.
+        queueMicrotask(() => {
+            if (!this.destroyed) {
+                // Commit Material's delayed selection before rendering nested content;
+                // a child widget may fail independently while loading remote metadata.
+                this.groupComponent?.ngAfterContentChecked();
+                this.cdr.detectChanges();
+            }
+        });
+    }
     onNavClick(i) {
         if (!this.config?.nav?.links?.length)
             return;
@@ -3893,6 +3935,41 @@ class PraxisTabs {
         if (linksLength > 0)
             this.navLoaded.add(navIndex);
     }
+    syncSelectionFromConfigChange(change) {
+        if (change.firstChange) {
+            this.syncSelectionFromConfig();
+            return;
+        }
+        const previous = change.previousValue;
+        const current = change.currentValue;
+        const previousGroupIndex = this.selectedIndexSignal();
+        const previousNavIndex = this.currentNavIndex();
+        const previousTabId = previous?.tabs?.[previousGroupIndex]?.id;
+        const previousNavId = previous?.nav?.links?.[previousNavIndex]?.id;
+        const groupSelectionAuthored = previous?.group?.selectedIndex !== current?.group?.selectedIndex;
+        const navSelectionAuthored = previous?.nav?.selectedIndex !== current?.nav?.selectedIndex;
+        this.syncSelectionFromConfig();
+        if (!groupSelectionAuthored && (current?.tabs?.length ?? 0) > 0) {
+            const preservedGroupIndex = previousTabId
+                ? current.tabs.findIndex((tab) => tab.id === previousTabId)
+                : this.clampIndex(previousGroupIndex, current.tabs.length);
+            const nextGroupIndex = preservedGroupIndex >= 0
+                ? preservedGroupIndex
+                : this.clampIndex(previousGroupIndex, current.tabs.length);
+            this.selectedIndexSignal.set(nextGroupIndex);
+            this.groupLoaded.add(nextGroupIndex);
+        }
+        if (!navSelectionAuthored && (current?.nav?.links?.length ?? 0) > 0) {
+            const preservedNavIndex = previousNavId
+                ? current.nav.links.findIndex((link) => link.id === previousNavId)
+                : this.clampIndex(previousNavIndex, current.nav.links.length);
+            const nextNavIndex = preservedNavIndex >= 0
+                ? preservedNavIndex
+                : this.clampIndex(previousNavIndex, current.nav.links.length);
+            this.currentNavIndex.set(nextNavIndex);
+            this.navLoaded.add(nextNavIndex);
+        }
+    }
     pruneLoadedIndexes(indexes, size) {
         for (const index of Array.from(indexes)) {
             if (index < 0 || index >= size) {
@@ -4237,7 +4314,7 @@ class PraxisTabs {
         return JSON.parse(JSON.stringify(config));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisTabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PraxisTabs, isStandalone: true, selector: "praxis-tabs", inputs: { config: "config", tabsId: "tabsId", componentInstanceId: "componentInstanceId", configPersistenceStrategy: "configPersistenceStrategy", selectedIndex: "selectedIndex", enableCustomization: "enableCustomization", form: "form", context: "context" }, outputs: { animationDone: "animationDone", focusChange: "focusChange", selectedIndexChange: "selectedIndexChange", selectedTabChange: "selectedTabChange", indexFocused: "indexFocused", selectFocusedIndex: "selectFocusedIndex", configChange: "configChange", widgetEvent: "widgetEvent" }, providers: [providePraxisI18nConfig(PRAXIS_TABS_I18N_CONFIG)], usesOnChanges: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PraxisTabs, isStandalone: true, selector: "praxis-tabs", inputs: { config: "config", tabsId: "tabsId", componentInstanceId: "componentInstanceId", configPersistenceStrategy: "configPersistenceStrategy", selectedIndex: "selectedIndex", enableCustomization: "enableCustomization", form: "form", context: "context" }, outputs: { animationDone: "animationDone", focusChange: "focusChange", selectedIndexChange: "selectedIndexChange", selectedTabChange: "selectedTabChange", indexFocused: "indexFocused", selectFocusedIndex: "selectFocusedIndex", configChange: "configChange", widgetEvent: "widgetEvent" }, providers: [providePraxisI18nConfig(PRAXIS_TABS_I18N_CONFIG)], viewQueries: [{ propertyName: "groupComponent", first: true, predicate: MatTabGroup, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
     <div
       class="praxis-tabs-root"
       [class.density-compact]="config?.appearance?.density === 'compact'"
@@ -4387,6 +4464,7 @@ class PraxisTabs {
                             <ng-container
                               [dynamicWidgetLoader]="resolveWidgetDefinition(w)"
                               [context]="context || {}"
+                              [autoWireOutputs]="true"
                               (widgetEvent)="emitWidgetEvent(linkEventPath(l.id, currentNavIndex()), $event)"
                             ></ng-container>
                           </div>
@@ -4427,6 +4505,7 @@ class PraxisTabs {
             (focusChange)="focusChange.emit($event)"
             (selectedIndexChange)="onVisibleTabIndexChange($event)"
             (selectedTabChange)="selectedTabChange.emit($event)"
+            (click)="onGroupPointerClick($event)"
             class="praxis-tabs-group"
             >
             @for (entry of visibleTabEntries(); track trackVisibleTab(i, entry); let i = $index) {
@@ -4493,6 +4572,7 @@ class PraxisTabs {
                           <ng-container
                             [dynamicWidgetLoader]="resolveWidgetDefinition(w)"
                             [context]="context || {}"
+                            [autoWireOutputs]="true"
                             (widgetEvent)="emitWidgetEvent(tabEventPath(entry.tab.id, entry.index), $event)"
                           ></ng-container>
                         </div>
@@ -4708,6 +4788,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                             <ng-container
                               [dynamicWidgetLoader]="resolveWidgetDefinition(w)"
                               [context]="context || {}"
+                              [autoWireOutputs]="true"
                               (widgetEvent)="emitWidgetEvent(linkEventPath(l.id, currentNavIndex()), $event)"
                             ></ng-container>
                           </div>
@@ -4748,6 +4829,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
             (focusChange)="focusChange.emit($event)"
             (selectedIndexChange)="onVisibleTabIndexChange($event)"
             (selectedTabChange)="selectedTabChange.emit($event)"
+            (click)="onGroupPointerClick($event)"
             class="praxis-tabs-group"
             >
             @for (entry of visibleTabEntries(); track trackVisibleTab(i, entry); let i = $index) {
@@ -4814,6 +4896,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                           <ng-container
                             [dynamicWidgetLoader]="resolveWidgetDefinition(w)"
                             [context]="context || {}"
+                            [autoWireOutputs]="true"
                             (widgetEvent)="emitWidgetEvent(tabEventPath(entry.tab.id, entry.index), $event)"
                           ></ng-container>
                         </div>
@@ -4895,6 +4978,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                 type: Output
             }], widgetEvent: [{
                 type: Output
+            }], groupComponent: [{
+                type: ViewChild,
+                args: [MatTabGroup]
             }] } });
 
 class PraxisTabsWidgetConfigEditor {

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@praxisui/tabs",
-  "version": "9.0.56",
+  "version": "9.0.57",
   "description": "Configurable tabs (group and nav) for Praxis UI with metadata-driven content and runtime editor.",
   "peerDependencies": {
     "@angular/common": "^21.0.0",
     "@angular/core": "^21.0.0",
     "@angular/material": "^21.0.0",
     "@angular/cdk": "^21.0.0",
-    "@praxisui/core": "^9.0.56",
-    "@praxisui/dynamic-fields": "^9.0.56",
-    "@praxisui/settings-panel": "^9.0.56",
+    "@praxisui/core": "^9.0.57",
+    "@praxisui/dynamic-fields": "^9.0.57",
+    "@praxisui/settings-panel": "^9.0.57",
     "@angular/forms": "^21.0.0",
     "@angular/router": "^21.0.0",
-    "@praxisui/ai": "^9.0.56",
+    "@praxisui/ai": "^9.0.57",
     "rxjs": "~7.8.0"
   },
   "dependencies": {

package/types/praxisui-tabs.d.ts

@@ -206,6 +206,8 @@ declare class PraxisTabs implements OnInit, OnChanges, OnDestroy {
     private groupLoaded;
     private navLoaded;
     private controlledSelectedIndex?;
+    private destroyed;
+    private groupComponent?;
     private readonly destroy$;
     private widgetDefinitionCache;
     private readonly generatedContentForm;
@@ -227,6 +229,14 @@ declare class PraxisTabs implements OnInit, OnChanges, OnDestroy {
     protected selectedVisibleTabIndex(): number;
     protected effectiveContentForm(): FormGroup;
     protected onVisibleTabIndexChange(index: number): void;
+    /**
+     * Material commits a pointer-selected tab during its next content-check cycle.
+     * A Tabs instance hosted by DynamicWidgetLoader can receive a composition
+     * reprojection in that same cycle, leaving Material's pending index uncommitted.
+     * Resolve the semantic tab identity at the container boundary so pointer
+     * selection remains deterministic without changing keyboard focus semantics.
+     */
+    protected onGroupPointerClick(event: MouseEvent): void;
     onNavClick(i: number): void;
     onNavDrop(event: CdkDragDrop<any>): void;
     protected onVisibleNavDrop(event: CdkDragDrop<any>): void;
@@ -271,6 +281,7 @@ declare class PraxisTabs implements OnInit, OnChanges, OnDestroy {
     private storageKey;
     private loadStoredConfigForCurrentIdentity;
     private syncSelectionFromConfig;
+    private syncSelectionFromConfigChange;
     private pruneLoadedIndexes;
     private persistConfig;
     private usesInputFirstConfig;