@praxisui/tabs 10.0.0-rc.4 → 10.0.0-rc.41

package/ai/component-registry.json

@@ -1,8 +1,8 @@
 {
   "schemaVersion": "1.0.0",
-  "generatedAt": "2026-10-07T11:07:08.250Z",
+  "generatedAt": "2026-10-27T22:14:23.237Z",
   "packageName": "@praxisui/tabs",
-  "packageVersion": "10.0.0-rc.4",
+  "packageVersion": "10.0.0-rc.41",
   "sourceRegistry": "praxis-component-registry-ingestion",
   "sourceRegistryVersion": "1.0.0",
   "componentCount": 1,

package/fesm2022/praxisui-tabs.mjs

@@ -7,11 +7,11 @@ import * as i3 from '@angular/material/tabs';
 import { MatTabsModule, MatTabGroup, MatTabNav } 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';
+import * as i11 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import * as i1 from '@praxisui/core';
 import { providePraxisI18n, PraxisI18nService, PraxisIconDirective, PraxisIconButtonComponent, providePraxisI18nConfig, deepMerge, ASYNC_CONFIG_STORAGE, ComponentKeyService, LoggerService, EmptyStateCardComponent, DynamicWidgetLoaderDirective, ComponentMetadataRegistry } from '@praxisui/core';
-import * as i6 from '@angular/material/button';
+import * as i6$1 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i2_1 from '@angular/forms';
 import { FormsModule, FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms';
@@ -21,9 +21,11 @@ import * as i4 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import * as i5 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import * as i8 from '@angular/material/slide-toggle';
+import * as i6 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import * as i9 from '@angular/material/slide-toggle';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import * as i9 from '@angular/cdk/drag-drop';
+import * as i10 from '@angular/cdk/drag-drop';
 import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
 import { BehaviorSubject, firstValueFrom, Subject, Subscription } from 'rxjs';
 import { produce } from 'immer';
@@ -55,6 +57,7 @@ function validateTabsAuthoringDocument(doc, _context) {
     validateModeAmbiguity(normalized.config, diagnostics);
     validateDuplicateTabIds(normalized.config, diagnostics);
     validateDuplicateLinkIds(normalized.config, diagnostics);
+    validateDuplicateChildWidgetKeys(normalized.config, diagnostics);
     validateUnsupportedGuidedFields(normalized.config, diagnostics);
     return diagnostics;
 }
@@ -86,11 +89,28 @@ function buildTabsApplyPlan(doc, runtime, options) {
 function serializeTabsAuthoringDocument(doc) {
     return normalizeTabsAuthoringDocument(doc);
 }
+function buildUniqueChildWidgetKey(containerId, widgetId, existingKeys) {
+    const used = new Set(Array.from(existingKeys)
+        .map((key) => key.trim())
+        .filter(Boolean));
+    const ownerSlug = slugifyIdentifier(containerId) || 'item';
+    const widgetSlug = slugifyIdentifier((widgetId || 'widget').replace(/^praxis-/i, '')) || 'widget';
+    const base = `${ownerSlug}-${widgetSlug}`;
+    let candidate = base;
+    let suffix = 2;
+    while (used.has(candidate)) {
+        candidate = `${base}-${suffix++}`;
+    }
+    return candidate;
+}
 function normalizeTabsConfig(config) {
     const next = cloneJson(config ?? {});
     if (!Array.isArray(next.tabs) || next.tabs.length === 0) {
         delete next.tabs;
     }
+    else {
+        next.tabs = next.tabs.map((tab, index) => normalizeContainerWidgets(tab, `tab${index + 1}`));
+    }
     if (!next.nav || typeof next.nav !== 'object') {
         delete next.nav;
     }
@@ -104,8 +124,8 @@ function normalizeTabsConfig(config) {
         next.nav.selectedIndex = clampIndex(next.nav.selectedIndex, next.nav.links?.length ?? 0);
     }
     if (Array.isArray(next.nav?.links)) {
-        next.nav.links = next.nav.links.map((link) => {
-            const copy = { ...link };
+        next.nav.links = next.nav.links.map((link, index) => {
+            const copy = normalizeContainerWidgets({ ...link }, `link${index + 1}`);
             delete copy.active;
             return copy;
         });
@@ -166,6 +186,74 @@ function validateDuplicateLinkIds(config, diagnostics) {
         seen.add(id);
     });
 }
+function validateDuplicateChildWidgetKeys(config, diagnostics) {
+    (config.tabs ?? []).forEach((tab, tabIndex) => {
+        const seen = new Set();
+        (tab.widgets ?? []).forEach((widget, widgetIndex) => {
+            const key = normalizeId(widget?.childWidgetKey);
+            if (!key)
+                return;
+            if (seen.has(key)) {
+                diagnostics.push(errorDiagnostic('tabs.config.widgets.childWidgetKey.duplicate', 'Duplicate childWidgetKey detected within the same tab.', `config.tabs[${tabIndex}].widgets[${widgetIndex}].childWidgetKey`));
+                return;
+            }
+            seen.add(key);
+        });
+    });
+    (config.nav?.links ?? []).forEach((link, linkIndex) => {
+        const seen = new Set();
+        (link.widgets ?? []).forEach((widget, widgetIndex) => {
+            const key = normalizeId(widget?.childWidgetKey);
+            if (!key)
+                return;
+            if (seen.has(key)) {
+                diagnostics.push(errorDiagnostic('tabs.config.widgets.childWidgetKey.duplicate', 'Duplicate childWidgetKey detected within the same nav link.', `config.nav.links[${linkIndex}].widgets[${widgetIndex}].childWidgetKey`));
+                return;
+            }
+            seen.add(key);
+        });
+    });
+}
+function normalizeContainerWidgets(container, fallbackContainerId) {
+    if (!container || typeof container !== 'object' || !Array.isArray(container.widgets)) {
+        return container;
+    }
+    const usedKeys = new Set();
+    for (const widget of container.widgets) {
+        const explicitKey = normalizeId(widget?.childWidgetKey);
+        if (explicitKey) {
+            usedKeys.add(explicitKey);
+        }
+    }
+    return {
+        ...container,
+        widgets: container.widgets.map((widget) => {
+            if (!widget || typeof widget !== 'object') {
+                return widget;
+            }
+            const explicitKey = normalizeId(widget.childWidgetKey);
+            if (explicitKey) {
+                return {
+                    ...widget,
+                    childWidgetKey: explicitKey,
+                };
+            }
+            const generatedKey = buildUniqueChildWidgetKey(container.id || fallbackContainerId, widget.id, usedKeys);
+            usedKeys.add(generatedKey);
+            return {
+                ...widget,
+                childWidgetKey: generatedKey,
+            };
+        }),
+    };
+}
+function slugifyIdentifier(value) {
+    return String(value ?? '')
+        .trim()
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, '-')
+        .replace(/^-|-$/g, '');
+}
 function validateUnsupportedGuidedFields(config, diagnostics) {
     if (config.group?.contentTabIndex !== undefined) {
         diagnostics.push(infoDiagnostic('tabs.config.group.contentTabIndex.unsupported', 'group.contentTabIndex is outside the supported authoring surface.', 'config.group.contentTabIndex'));
@@ -849,7 +937,14 @@ class PraxisTabsConfigEditor {
             return;
         const t = this.editedConfig.tabs[tabIndex];
         t.widgets = t.widgets || [];
-        t.widgets.push({ id });
+        const childWidgetKey = this.nextChildWidgetKey(t.id || `tab${tabIndex + 1}`, id, t.widgets);
+        const rp = (this.quickResourcePathTab[tabIndex] || '').trim();
+        const defaultInputs = this.buildDefaultWidgetInputs(id, rp);
+        t.widgets.push({
+            id,
+            childWidgetKey,
+            ...(defaultInputs ? { inputs: defaultInputs } : {}),
+        });
         this.onAppearanceChange();
     }
     removeWidgetFromTab(tabIndex, widgetIndex) {
@@ -859,6 +954,20 @@ class PraxisTabsConfigEditor {
         t.widgets.splice(widgetIndex, 1);
         this.onAppearanceChange();
     }
+    updateWidgetKeyTab(tabIndex, widgetIndex, key) {
+        const t = this.editedConfig.tabs?.[tabIndex];
+        const widget = t?.widgets?.[widgetIndex];
+        if (!widget)
+            return;
+        const trimmed = String(key ?? '').trim();
+        if (trimmed) {
+            widget.childWidgetKey = trimmed;
+        }
+        else {
+            delete widget.childWidgetKey;
+        }
+        this.onAppearanceChange();
+    }
     updateWidgetInputsTab(tabIndex, widgetIndex, text) {
         const t = this.editedConfig.tabs[tabIndex];
         try {
@@ -883,14 +992,30 @@ class PraxisTabsConfigEditor {
             return;
         const t = this.editedConfig.tabs[tabIndex];
         t.widgets = t.widgets || [];
+        const containerId = t.id || `tab${tabIndex + 1}`;
         if (type === 'form') {
-            t.widgets.push({ id: 'praxis-dynamic-form', inputs: { resourcePath: rp } });
+            const id = 'praxis-dynamic-form';
+            t.widgets.push({
+                id,
+                childWidgetKey: this.nextChildWidgetKey(containerId, id, t.widgets),
+                inputs: { resourcePath: rp },
+            });
         }
         else if (type === 'table') {
-            t.widgets.push({ id: 'praxis-table', inputs: { resourcePath: rp, tableId: rp } });
+            const id = 'praxis-table';
+            t.widgets.push({
+                id,
+                childWidgetKey: this.nextChildWidgetKey(containerId, id, t.widgets),
+                inputs: { resourcePath: rp, tableId: rp },
+            });
         }
         else {
-            t.widgets.push({ id: 'praxis-crud', inputs: { crudId: rp, metadata: { resource: { path: rp } } } });
+            const id = 'praxis-crud';
+            t.widgets.push({
+                id,
+                childWidgetKey: this.nextChildWidgetKey(containerId, id, t.widgets),
+                inputs: { crudId: rp, metadata: { resource: { path: rp } } },
+            });
         }
         this.onAppearanceChange();
     }
@@ -927,7 +1052,14 @@ class PraxisTabsConfigEditor {
             return;
         const l = this.nav.links[linkIndex];
         l.widgets = l.widgets || [];
-        l.widgets.push({ id });
+        const childWidgetKey = this.nextChildWidgetKey(l.id || `link${linkIndex + 1}`, id, l.widgets);
+        const rp = (this.quickResourcePathLink[linkIndex] || '').trim();
+        const defaultInputs = this.buildDefaultWidgetInputs(id, rp);
+        l.widgets.push({
+            id,
+            childWidgetKey,
+            ...(defaultInputs ? { inputs: defaultInputs } : {}),
+        });
         this.onAppearanceChange();
     }
     removeWidgetFromLink(linkIndex, widgetIndex) {
@@ -937,6 +1069,20 @@ class PraxisTabsConfigEditor {
         l.widgets.splice(widgetIndex, 1);
         this.onAppearanceChange();
     }
+    updateWidgetKeyLink(linkIndex, widgetIndex, key) {
+        const l = this.nav.links?.[linkIndex];
+        const widget = l?.widgets?.[widgetIndex];
+        if (!widget)
+            return;
+        const trimmed = String(key ?? '').trim();
+        if (trimmed) {
+            widget.childWidgetKey = trimmed;
+        }
+        else {
+            delete widget.childWidgetKey;
+        }
+        this.onAppearanceChange();
+    }
     updateWidgetInputsLink(linkIndex, widgetIndex, text) {
         const l = this.nav.links[linkIndex];
         try {
@@ -961,17 +1107,58 @@ class PraxisTabsConfigEditor {
             return;
         const l = this.nav.links[linkIndex];
         l.widgets = l.widgets || [];
+        const containerId = l.id || `link${linkIndex + 1}`;
         if (type === 'form') {
-            l.widgets.push({ id: 'praxis-dynamic-form', inputs: { resourcePath: rp } });
+            const id = 'praxis-dynamic-form';
+            l.widgets.push({
+                id,
+                childWidgetKey: this.nextChildWidgetKey(containerId, id, l.widgets),
+                inputs: { resourcePath: rp },
+            });
         }
         else if (type === 'table') {
-            l.widgets.push({ id: 'praxis-table', inputs: { resourcePath: rp, tableId: rp } });
+            const id = 'praxis-table';
+            l.widgets.push({
+                id,
+                childWidgetKey: this.nextChildWidgetKey(containerId, id, l.widgets),
+                inputs: { resourcePath: rp, tableId: rp },
+            });
         }
         else {
-            l.widgets.push({ id: 'praxis-crud', inputs: { crudId: rp, metadata: { resource: { path: rp } } } });
+            const id = 'praxis-crud';
+            l.widgets.push({
+                id,
+                childWidgetKey: this.nextChildWidgetKey(containerId, id, l.widgets),
+                inputs: { crudId: rp, metadata: { resource: { path: rp } } },
+            });
         }
         this.onAppearanceChange();
     }
+    nextChildWidgetKey(containerId, widgetId, widgets) {
+        const existingKeys = (widgets ?? [])
+            .map((widget) => String(widget?.childWidgetKey ?? '').trim())
+            .filter(Boolean);
+        return buildUniqueChildWidgetKey(containerId, widgetId, existingKeys);
+    }
+    buildDefaultWidgetInputs(widgetId, resourcePath) {
+        if (widgetId === 'praxis-related-resource-outlet') {
+            return {
+                parentResourcePath: resourcePath,
+                surfaceId: '',
+                mode: 'inline',
+            };
+        }
+        if (!resourcePath) {
+            return undefined;
+        }
+        if (widgetId === 'praxis-table') {
+            return { resourcePath, tableId: resourcePath };
+        }
+        if (widgetId === 'praxis-dynamic-form') {
+            return { resourcePath };
+        }
+        return undefined;
+    }
     stringify(v) { try {
         return v ? JSON.stringify(v, null, 2) : '';
     }
@@ -1000,10 +1187,10 @@ class PraxisTabsConfigEditor {
       <div class="editor-topbar">
         <mat-form-field appearance="outline" class="editor-mode-field">
           <mat-label>{{ t('editor.fields.mode', 'Modo principal') }}</mat-label>
-          <select matNativeControl [ngModel]="primaryMode" (ngModelChange)="setPrimaryMode($event)">
-            <option value="group">{{ t('editor.mode.group', 'Grupo de abas') }}</option>
-            <option value="nav">{{ t('editor.mode.nav', 'Navegacao por links') }}</option>
-          </select>
+          <mat-select [ngModel]="primaryMode" (ngModelChange)="setPrimaryMode($event)">
+            <mat-option value="group">{{ t('editor.mode.group', 'Grupo de abas') }}</mat-option>
+            <mat-option value="nav">{{ t('editor.mode.nav', 'Navegacao por links') }}</mat-option>
+          </mat-select>
         </mat-form-field>
       </div>
     
@@ -1041,19 +1228,19 @@ class PraxisTabsConfigEditor {
           <div class="editor-section">
             <div class="editor-grid two">
               <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.groupAlignTabs', 'Alinhamento das abas') }}</mat-label>
-              <select matNativeControl [(ngModel)]="group.alignTabs" (ngModelChange)="onAppearanceChange()">
-                <option [ngValue]="undefined">{{ t('editor.options.default', 'Padrao') }}</option>
-                <option value="start">{{ t('editor.options.start', 'Inicio') }}</option>
-                <option value="center">{{ t('editor.options.center', 'Centro') }}</option>
-                <option value="end">{{ t('editor.options.end', 'Fim') }}</option>
-              </select>
+              <mat-select [(ngModel)]="group.alignTabs" (ngModelChange)="onAppearanceChange()" [placeholder]="t('editor.options.default', 'Padrao')">
+                <mat-option [value]="undefined">{{ t('editor.options.default', 'Padrao') }}</mat-option>
+                <mat-option value="start">{{ t('editor.options.start', 'Inicio') }}</mat-option>
+                <mat-option value="center">{{ t('editor.options.center', 'Centro') }}</mat-option>
+                <mat-option value="end">{{ t('editor.options.end', 'Fim') }}</mat-option>
+              </mat-select>
             </mat-form-field>
             <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.groupHeaderPosition', 'Posicao do header') }}</mat-label>
-            <select matNativeControl [(ngModel)]="group.headerPosition" (ngModelChange)="onAppearanceChange()">
-              <option [ngValue]="undefined">{{ t('editor.options.aboveDefault', 'Acima (padrao)') }}</option>
-              <option value="above">{{ t('editor.options.above', 'Acima') }}</option>
-              <option value="below">{{ t('editor.options.below', 'Abaixo') }}</option>
-            </select>
+            <mat-select [(ngModel)]="group.headerPosition" (ngModelChange)="onAppearanceChange()" [placeholder]="t('editor.options.aboveDefault', 'Acima (padrao)')">
+              <mat-option [value]="undefined">{{ t('editor.options.aboveDefault', 'Acima (padrao)') }}</mat-option>
+              <mat-option value="above">{{ t('editor.options.above', 'Acima') }}</mat-option>
+              <mat-option value="below">{{ t('editor.options.below', 'Abaixo') }}</mat-option>
+            </mat-select>
           </mat-form-field>
           <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.selectedIndex', 'Indice selecionado') }}</mat-label>
           <input matInput type="number" [(ngModel)]="group.selectedIndex" (ngModelChange)="onAppearanceChange()" />
@@ -1080,12 +1267,12 @@ class PraxisTabsConfigEditor {
         ></button>
       </mat-form-field>
       <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.color', 'Cor (M2)') }}</mat-label>
-      <select matNativeControl [(ngModel)]="group.color" (ngModelChange)="onAppearanceChange()">
-        <option [ngValue]="undefined">{{ t('editor.options.none', '(nenhuma)') }}</option>
-        <option value="primary">{{ t('editor.options.primary', 'Primary') }}</option>
-        <option value="accent">{{ t('editor.options.accent', 'Accent') }}</option>
-        <option value="warn">{{ t('editor.options.warn', 'Warn') }}</option>
-      </select>
+      <mat-select [(ngModel)]="group.color" (ngModelChange)="onAppearanceChange()" [placeholder]="t('editor.options.none', '(nenhuma)')">
+        <mat-option [value]="undefined">{{ t('editor.options.none', '(nenhuma)') }}</mat-option>
+        <mat-option value="primary">{{ t('editor.options.primary', 'Primary') }}</mat-option>
+        <mat-option value="accent">{{ t('editor.options.accent', 'Accent') }}</mat-option>
+        <mat-option value="warn">{{ t('editor.options.warn', 'Warn') }}</mat-option>
+      </mat-select>
       <button
         praxisIconButton="help_outline"
         size="dense"
@@ -1097,12 +1284,12 @@ class PraxisTabsConfigEditor {
       ></button>
     </mat-form-field>
     <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.backgroundColor', 'Cor de fundo (M2)') }}</mat-label>
-    <select matNativeControl [(ngModel)]="group.backgroundColor" (ngModelChange)="onAppearanceChange()">
-      <option [ngValue]="undefined">{{ t('editor.options.none', '(nenhuma)') }}</option>
-      <option value="primary">{{ t('editor.options.primary', 'Primary') }}</option>
-      <option value="accent">{{ t('editor.options.accent', 'Accent') }}</option>
-      <option value="warn">{{ t('editor.options.warn', 'Warn') }}</option>
-    </select>
+    <mat-select [(ngModel)]="group.backgroundColor" (ngModelChange)="onAppearanceChange()" [placeholder]="t('editor.options.none', '(nenhuma)')">
+      <mat-option [value]="undefined">{{ t('editor.options.none', '(nenhuma)') }}</mat-option>
+      <mat-option value="primary">{{ t('editor.options.primary', 'Primary') }}</mat-option>
+      <mat-option value="accent">{{ t('editor.options.accent', 'Accent') }}</mat-option>
+      <mat-option value="warn">{{ t('editor.options.warn', 'Warn') }}</mat-option>
+    </mat-select>
     <button
       praxisIconButton="help_outline"
       size="dense"
@@ -1166,12 +1353,12 @@ class PraxisTabsConfigEditor {
     <input matInput [(ngModel)]="nav.ariaLabelledby" (ngModelChange)="onAppearanceChange()" />
     </mat-form-field>
     <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.color', 'Cor (M2)') }}</mat-label>
-    <select matNativeControl [(ngModel)]="nav.color" (ngModelChange)="onAppearanceChange()">
-      <option [ngValue]="undefined">{{ t('editor.options.none', '(nenhuma)') }}</option>
-      <option value="primary">{{ t('editor.options.primary', 'Primary') }}</option>
-      <option value="accent">{{ t('editor.options.accent', 'Accent') }}</option>
-      <option value="warn">{{ t('editor.options.warn', 'Warn') }}</option>
-    </select>
+    <mat-select [(ngModel)]="nav.color" (ngModelChange)="onAppearanceChange()" [placeholder]="t('editor.options.none', '(nenhuma)')">
+      <mat-option [value]="undefined">{{ t('editor.options.none', '(nenhuma)') }}</mat-option>
+      <mat-option value="primary">{{ t('editor.options.primary', 'Primary') }}</mat-option>
+      <mat-option value="accent">{{ t('editor.options.accent', 'Accent') }}</mat-option>
+      <mat-option value="warn">{{ t('editor.options.warn', 'Warn') }}</mat-option>
+    </mat-select>
     <button
       praxisIconButton="help_outline"
       size="dense"
@@ -1183,12 +1370,12 @@ class PraxisTabsConfigEditor {
     ></button>
     </mat-form-field>
     <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.backgroundColor', 'Cor de fundo (M2)') }}</mat-label>
-    <select matNativeControl [(ngModel)]="nav.backgroundColor" (ngModelChange)="onAppearanceChange()">
-      <option [ngValue]="undefined">{{ t('editor.options.none', '(nenhuma)') }}</option>
-      <option value="primary">{{ t('editor.options.primary', 'Primary') }}</option>
-      <option value="accent">{{ t('editor.options.accent', 'Accent') }}</option>
-      <option value="warn">{{ t('editor.options.warn', 'Warn') }}</option>
-    </select>
+    <mat-select [(ngModel)]="nav.backgroundColor" (ngModelChange)="onAppearanceChange()" [placeholder]="t('editor.options.none', '(nenhuma)')">
+      <mat-option [value]="undefined">{{ t('editor.options.none', '(nenhuma)') }}</mat-option>
+      <mat-option value="primary">{{ t('editor.options.primary', 'Primary') }}</mat-option>
+      <mat-option value="accent">{{ t('editor.options.accent', 'Accent') }}</mat-option>
+      <mat-option value="warn">{{ t('editor.options.warn', 'Warn') }}</mat-option>
+    </mat-select>
     <button
       praxisIconButton="help_outline"
       size="dense"
@@ -1270,12 +1457,12 @@ class PraxisTabsConfigEditor {
     
           <mat-form-field appearance="outline">
             <mat-label>{{ t('editor.fields.density', 'Densidade') }}</mat-label>
-            <select matNativeControl [(ngModel)]="appearance.density" (ngModelChange)="onAppearanceChange()">
-              <option [ngValue]="undefined">{{ t('editor.density.default', 'Padrao') }}</option>
-              <option value="compact">{{ t('editor.density.compact', 'Compacta') }}</option>
-              <option value="comfortable">{{ t('editor.density.comfortable', 'Confortavel') }}</option>
-              <option value="spacious">{{ t('editor.density.spacious', 'Espacosa') }}</option>
-            </select>
+            <mat-select [(ngModel)]="appearance.density" (ngModelChange)="onAppearanceChange()" [placeholder]="t('editor.density.default', 'Padrao')">
+              <mat-option [value]="undefined">{{ t('editor.density.default', 'Padrao') }}</mat-option>
+              <mat-option value="compact">{{ t('editor.density.compact', 'Compacta') }}</mat-option>
+              <mat-option value="comfortable">{{ t('editor.density.comfortable', 'Confortavel') }}</mat-option>
+              <mat-option value="spacious">{{ t('editor.density.spacious', 'Espacosa') }}</mat-option>
+            </mat-select>
           </mat-form-field>
         </div>
     
@@ -1364,12 +1551,12 @@ class PraxisTabsConfigEditor {
       <div class="editor-row">
         <mat-form-field appearance="outline" class="editor-field-min">
           <mat-label>{{ t('editor.fields.addComponent', 'Adicionar componente') }}</mat-label>
-          <select matNativeControl [(ngModel)]="selectedTabWidgetId[i]">
-            <option [ngValue]="''">{{ t('editor.fields.selectPlaceholder', '(selecione)') }}</option>
+          <mat-select [(ngModel)]="selectedTabWidgetId[i]" [placeholder]="t('editor.fields.selectPlaceholder', '(selecione)')">
+            <mat-option [value]="''">{{ t('editor.fields.selectPlaceholder', '(selecione)') }}</mat-option>
             @for (c of componentOptions; track c) {
-              <option [ngValue]="c.id">{{ c.friendlyName || c.id }}</option>
+              <mat-option [value]="c.id">{{ c.friendlyName || c.id }}</mat-option>
             }
-          </select>
+          </mat-select>
         </mat-form-field>
         <button mat-stroked-button (click)="addWidgetToTab(i)"><mat-icon [praxisIcon]="'add'"></mat-icon>{{ t('editor.actions.add', 'Adicionar') }}</button>
         <span class="editor-spacer"></span>
@@ -1390,6 +1577,10 @@ class PraxisTabsConfigEditor {
                 <strong class="editor-card-title">{{ getCompName(w.id) }}</strong>
                 <button praxisIconButton="delete" size="compact" type="button" class="editor-icon-action--danger" (click)="removeWidgetFromTab(i, wi)" [matTooltip]="t('editor.actions.removeComponent', 'Remover componente')" [attr.aria-label]="t('editor.actions.removeComponent', 'Remover componente')"></button>
               </div>
+              <mat-form-field appearance="outline">
+                <mat-label>{{ t('editor.fields.childWidgetKey', 'Chave da instancia (childWidgetKey)') }}</mat-label>
+                <input matInput [ngModel]="w.childWidgetKey || ''" (ngModelChange)="updateWidgetKeyTab(i, wi, $event)" />
+              </mat-form-field>
               <div class="editor-grid two tight">
                 <mat-form-field appearance="outline">
                   <mat-label>{{ t('editor.fields.inputsJson', 'Inputs (JSON)') }}</mat-label>
@@ -1458,12 +1649,12 @@ class PraxisTabsConfigEditor {
             <div class="editor-row">
               <mat-form-field appearance="outline" class="editor-field-min">
                 <mat-label>{{ t('editor.fields.addComponent', 'Adicionar componente') }}</mat-label>
-                <select matNativeControl [(ngModel)]="selectedLinkWidgetId[i]">
-                  <option [ngValue]="''">{{ t('editor.fields.selectPlaceholder', '(selecione)') }}</option>
+                <mat-select [(ngModel)]="selectedLinkWidgetId[i]" [placeholder]="t('editor.fields.selectPlaceholder', '(selecione)')">
+                  <mat-option [value]="''">{{ t('editor.fields.selectPlaceholder', '(selecione)') }}</mat-option>
                   @for (c of componentOptions; track c) {
-                    <option [ngValue]="c.id">{{ c.friendlyName || c.id }}</option>
+                    <mat-option [value]="c.id">{{ c.friendlyName || c.id }}</mat-option>
                   }
-                </select>
+                </mat-select>
               </mat-form-field>
               <button mat-stroked-button (click)="addWidgetToLink(i)"><mat-icon [praxisIcon]="'add'"></mat-icon>{{ t('editor.actions.add', 'Adicionar') }}</button>
               <span class="editor-spacer"></span>
@@ -1484,6 +1675,10 @@ class PraxisTabsConfigEditor {
                       <strong class="editor-card-title">{{ getCompName(w.id) }}</strong>
                       <button praxisIconButton="delete" size="compact" type="button" class="editor-icon-action--danger" (click)="removeWidgetFromLink(i, wi)" [matTooltip]="t('editor.actions.removeComponent', 'Remover componente')" [attr.aria-label]="t('editor.actions.removeComponent', 'Remover componente')"></button>
                     </div>
+                    <mat-form-field appearance="outline">
+                      <mat-label>{{ t('editor.fields.childWidgetKey', 'Chave da instancia (childWidgetKey)') }}</mat-label>
+                      <input matInput [ngModel]="w.childWidgetKey || ''" (ngModelChange)="updateWidgetKeyLink(i, wi, $event)" />
+                    </mat-form-field>
                     <div class="editor-grid two tight">
                       <mat-form-field appearance="outline">
                         <mat-label>{{ t('editor.fields.inputsJson', 'Inputs (JSON)') }}</mat-label>
@@ -1509,7 +1704,7 @@ class PraxisTabsConfigEditor {
     </mat-tab>
     </mat-tab-group>
     </div>
-    `, isInline: true, styles: [":host{display:block;color:var(--md-sys-color-on-surface)}.editor-shell{display:grid;gap:12px}.editor-topbar{display:flex;align-items:start;justify-content:flex-start}.editor-mode-field{width:min(320px,100%)}.editor-diagnostics{display:grid;gap:8px}.editor-diagnostics-title{font-size:.95rem;font-weight:600;color:var(--md-sys-color-on-surface)}.editor-diagnostic{display:grid;gap:4px;padding:10px 12px;border-radius:10px;border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-container);color:var(--md-sys-color-on-surface)}.editor-diagnostic code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;color:var(--md-sys-color-on-surface-variant)}.editor-diagnostic.level-error{background:var(--md-sys-color-error-container);color:var(--md-sys-color-on-error-container);border-color:var(--md-sys-color-error)}.editor-diagnostic.level-warning{background:var(--md-sys-color-tertiary-container, var(--md-sys-color-surface-container));color:var(--md-sys-color-on-tertiary-container, var(--md-sys-color-on-surface));border-color:var(--md-sys-color-outline-variant)}.editor-tabs{--editor-surface: var(--md-sys-color-surface-container-lowest, var(--md-sys-color-surface));--editor-border: 1px solid var(--md-sys-color-outline-variant);--editor-radius: 12px;--editor-muted: var(--md-sys-color-on-surface-variant)}.editor-section{padding:12px;display:grid;gap:12px;background:var(--editor-surface);border:var(--editor-border);border-radius:var(--editor-radius)}.editor-section-lg{gap:16px}.editor-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.editor-grid{display:grid;gap:12px}.editor-grid.two{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.editor-grid.tight{gap:8px}.editor-toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.editor-muted{color:var(--editor-muted)}.editor-title{margin:6px 0 8px;font-size:1rem}.editor-title-row{display:flex;align-items:center;gap:8px}.editor-code{white-space:pre-wrap;background:var(--md-sys-color-surface-container);padding:8px;border-radius:6px;border:1px solid var(--md-sys-color-outline-variant)}.editor-card{border:1px solid var(--md-sys-color-outline-variant);padding:10px;border-radius:10px;display:grid;gap:8px;background:var(--md-sys-color-surface)}.editor-card.dashed{border-style:dashed}.editor-card-header{display:flex;align-items:center;gap:8px}.editor-card-title{flex:1;font-weight:600}.editor-divider{border-top:1px solid var(--md-sys-color-outline-variant);padding-top:8px}.editor-spacer{flex:1}.editor-field-min{min-width:260px}.editor-section .editor-field-min{width:260px;max-width:260px}.editor-field-240{width:240px}.editor-section .editor-field-240{width:240px;max-width:240px}.editor-json{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.editor-section .mat-mdc-form-field{width:100%;max-width:520px;--mdc-outlined-text-field-container-height: 48px;--mdc-outlined-text-field-outline-color: var(--md-sys-color-outline-variant);--mdc-outlined-text-field-hover-outline-color: var(--md-sys-color-outline);--mdc-outlined-text-field-focus-outline-color: var(--md-sys-color-primary);--mdc-outlined-text-field-error-outline-color: var(--md-sys-color-error);--mdc-outlined-text-field-error-focus-outline-color: var(--md-sys-color-error);--mdc-outlined-text-field-error-hover-outline-color: var(--md-sys-color-error);--mdc-outlined-text-field-label-text-color: var(--md-sys-color-on-surface-variant);--mdc-outlined-text-field-input-text-color: var(--md-sys-color-on-surface);--mdc-outlined-text-field-supporting-text-color: var(--md-sys-color-on-surface-variant)}.editor-section .mat-mdc-form-field.full{max-width:none}.editor-icon-action--danger{color:var(--md-sys-color-error)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2_1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2_1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2_1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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: MatTabsModule }, { kind: "component", type: i3.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i3.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }, { kind: "component", type: PraxisIconButtonComponent, selector: "button[praxisIconButton]", inputs: ["praxisIconButton", "size", "appearance", "presentation", "pressed", "busy"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i8.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i9.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i9.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i9.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
+    `, isInline: true, styles: [":host{display:block;container-type:inline-size;color:var(--pfx-settings-panel-text-primary, var(--md-sys-color-on-surface))}.editor-shell{display:grid;gap:12px}.editor-topbar{display:flex;align-items:start;justify-content:flex-start}.editor-mode-field{width:min(320px,100%)}.editor-diagnostics{display:grid;gap:8px}.editor-diagnostics-title{font-size:.95rem;font-weight:600;color:var(--md-sys-color-on-surface)}.editor-diagnostic{display:grid;gap:4px;padding:10px 12px;border-radius:10px;border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-container);color:var(--md-sys-color-on-surface)}.editor-diagnostic code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;color:var(--md-sys-color-on-surface-variant)}.editor-diagnostic.level-error{background:var(--md-sys-color-error-container);color:var(--md-sys-color-on-error-container);border-color:var(--md-sys-color-error)}.editor-diagnostic.level-warning{background:var(--md-sys-color-tertiary-container, var(--md-sys-color-surface-container));color:var(--md-sys-color-on-tertiary-container, var(--md-sys-color-on-surface));border-color:var(--md-sys-color-outline-variant)}.editor-tabs{--editor-surface: var(--pfx-settings-panel-surface-elevated, var(--md-sys-color-surface-container-lowest, var(--md-sys-color-surface)));--editor-border: 1px solid var(--pfx-settings-panel-border, var(--md-sys-color-outline-variant));--editor-radius: 12px;--editor-muted: var(--pfx-settings-panel-text-secondary, var(--md-sys-color-on-surface-variant))}.editor-section{padding:12px;display:grid;gap:12px;background:var(--editor-surface);border:var(--editor-border);border-radius:var(--editor-radius)}.editor-section-lg{gap:16px}.editor-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.editor-grid{display:grid;gap:12px}.editor-grid.two{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.editor-grid.tight{gap:8px}.editor-toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.editor-muted{color:var(--editor-muted)}.editor-title{margin:6px 0 8px;font-size:1rem}.editor-title-row{display:flex;align-items:center;gap:8px}.editor-code{white-space:pre-wrap;background:var(--md-sys-color-surface-container);padding:8px;border-radius:6px;border:1px solid var(--md-sys-color-outline-variant)}.editor-card{border:1px solid var(--pfx-settings-panel-border, var(--md-sys-color-outline-variant));padding:10px;border-radius:10px;display:grid;gap:8px;background:var(--pfx-settings-panel-surface, var(--md-sys-color-surface))}.editor-card.dashed{border-style:dashed}.editor-card-header{display:flex;align-items:center;gap:8px}.editor-card-title{flex:1;font-weight:600}.editor-divider{border-top:1px solid var(--pfx-settings-panel-border, var(--md-sys-color-outline-variant));padding-top:8px}.editor-spacer{flex:1}.editor-field-min{min-width:260px}.editor-section .editor-field-min{width:260px;max-width:260px}.editor-field-240{width:240px}.editor-section .editor-field-240{width:240px;max-width:240px}@container (max-width: 640px){.editor-grid.two{grid-template-columns:1fr}.editor-field-min,.editor-section .editor-field-min,.editor-field-240,.editor-section .editor-field-240{min-width:0;width:100%;max-width:100%}}.editor-json{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.editor-section .mat-mdc-form-field{width:100%;max-width:520px;--mdc-outlined-text-field-container-height: 48px;--mdc-outlined-text-field-outline-color: var(--md-sys-color-outline-variant);--mdc-outlined-text-field-hover-outline-color: var(--md-sys-color-outline);--mdc-outlined-text-field-focus-outline-color: var(--md-sys-color-primary);--mdc-outlined-text-field-error-outline-color: var(--md-sys-color-error);--mdc-outlined-text-field-error-focus-outline-color: var(--md-sys-color-error);--mdc-outlined-text-field-error-hover-outline-color: var(--md-sys-color-error);--mdc-outlined-text-field-label-text-color: var(--md-sys-color-on-surface-variant);--mdc-outlined-text-field-input-text-color: var(--md-sys-color-on-surface);--mdc-outlined-text-field-supporting-text-color: var(--md-sys-color-on-surface-variant)}.editor-section .mat-mdc-form-field.full{max-width:none}.editor-icon-action--danger{color:var(--md-sys-color-error)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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: MatTabsModule }, { kind: "component", type: i3.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i3.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i6.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }, { kind: "component", type: PraxisIconButtonComponent, selector: "button[praxisIconButton]", inputs: ["praxisIconButton", "size", "appearance", "presentation", "pressed", "busy"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i9.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i10.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i10.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i10.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisTabsConfigEditor, decorators: [{
             type: Component,
@@ -1518,6 +1713,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         MatTabsModule,
                         MatFormFieldModule,
                         MatInputModule,
+                        MatSelectModule,
                         MatIconModule,
                         PraxisIconDirective,
                         PraxisIconButtonComponent,
@@ -1530,10 +1726,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
       <div class="editor-topbar">
         <mat-form-field appearance="outline" class="editor-mode-field">
           <mat-label>{{ t('editor.fields.mode', 'Modo principal') }}</mat-label>
-          <select matNativeControl [ngModel]="primaryMode" (ngModelChange)="setPrimaryMode($event)">
-            <option value="group">{{ t('editor.mode.group', 'Grupo de abas') }}</option>
-            <option value="nav">{{ t('editor.mode.nav', 'Navegacao por links') }}</option>
-          </select>
+          <mat-select [ngModel]="primaryMode" (ngModelChange)="setPrimaryMode($event)">
+            <mat-option value="group">{{ t('editor.mode.group', 'Grupo de abas') }}</mat-option>
+            <mat-option value="nav">{{ t('editor.mode.nav', 'Navegacao por links') }}</mat-option>
+          </mat-select>
         </mat-form-field>
       </div>
     
@@ -1571,19 +1767,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
           <div class="editor-section">
             <div class="editor-grid two">
               <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.groupAlignTabs', 'Alinhamento das abas') }}</mat-label>
-              <select matNativeControl [(ngModel)]="group.alignTabs" (ngModelChange)="onAppearanceChange()">
-                <option [ngValue]="undefined">{{ t('editor.options.default', 'Padrao') }}</option>
-                <option value="start">{{ t('editor.options.start', 'Inicio') }}</option>
-                <option value="center">{{ t('editor.options.center', 'Centro') }}</option>
-                <option value="end">{{ t('editor.options.end', 'Fim') }}</option>
-              </select>
+              <mat-select [(ngModel)]="group.alignTabs" (ngModelChange)="onAppearanceChange()" [placeholder]="t('editor.options.default', 'Padrao')">
+                <mat-option [value]="undefined">{{ t('editor.options.default', 'Padrao') }}</mat-option>
+                <mat-option value="start">{{ t('editor.options.start', 'Inicio') }}</mat-option>
+                <mat-option value="center">{{ t('editor.options.center', 'Centro') }}</mat-option>
+                <mat-option value="end">{{ t('editor.options.end', 'Fim') }}</mat-option>
+              </mat-select>
             </mat-form-field>
             <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.groupHeaderPosition', 'Posicao do header') }}</mat-label>
-            <select matNativeControl [(ngModel)]="group.headerPosition" (ngModelChange)="onAppearanceChange()">
-              <option [ngValue]="undefined">{{ t('editor.options.aboveDefault', 'Acima (padrao)') }}</option>
-              <option value="above">{{ t('editor.options.above', 'Acima') }}</option>
-              <option value="below">{{ t('editor.options.below', 'Abaixo') }}</option>
-            </select>
+            <mat-select [(ngModel)]="group.headerPosition" (ngModelChange)="onAppearanceChange()" [placeholder]="t('editor.options.aboveDefault', 'Acima (padrao)')">
+              <mat-option [value]="undefined">{{ t('editor.options.aboveDefault', 'Acima (padrao)') }}</mat-option>
+              <mat-option value="above">{{ t('editor.options.above', 'Acima') }}</mat-option>
+              <mat-option value="below">{{ t('editor.options.below', 'Abaixo') }}</mat-option>
+            </mat-select>
           </mat-form-field>
           <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.selectedIndex', 'Indice selecionado') }}</mat-label>
           <input matInput type="number" [(ngModel)]="group.selectedIndex" (ngModelChange)="onAppearanceChange()" />
@@ -1610,12 +1806,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
         ></button>
       </mat-form-field>
       <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.color', 'Cor (M2)') }}</mat-label>
-      <select matNativeControl [(ngModel)]="group.color" (ngModelChange)="onAppearanceChange()">
-        <option [ngValue]="undefined">{{ t('editor.options.none', '(nenhuma)') }}</option>
-        <option value="primary">{{ t('editor.options.primary', 'Primary') }}</option>
-        <option value="accent">{{ t('editor.options.accent', 'Accent') }}</option>
-        <option value="warn">{{ t('editor.options.warn', 'Warn') }}</option>
-      </select>
+      <mat-select [(ngModel)]="group.color" (ngModelChange)="onAppearanceChange()" [placeholder]="t('editor.options.none', '(nenhuma)')">
+        <mat-option [value]="undefined">{{ t('editor.options.none', '(nenhuma)') }}</mat-option>
+        <mat-option value="primary">{{ t('editor.options.primary', 'Primary') }}</mat-option>
+        <mat-option value="accent">{{ t('editor.options.accent', 'Accent') }}</mat-option>
+        <mat-option value="warn">{{ t('editor.options.warn', 'Warn') }}</mat-option>
+      </mat-select>
       <button
         praxisIconButton="help_outline"
         size="dense"
@@ -1627,12 +1823,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
       ></button>
     </mat-form-field>
     <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.backgroundColor', 'Cor de fundo (M2)') }}</mat-label>
-    <select matNativeControl [(ngModel)]="group.backgroundColor" (ngModelChange)="onAppearanceChange()">
-      <option [ngValue]="undefined">{{ t('editor.options.none', '(nenhuma)') }}</option>
-      <option value="primary">{{ t('editor.options.primary', 'Primary') }}</option>
-      <option value="accent">{{ t('editor.options.accent', 'Accent') }}</option>
-      <option value="warn">{{ t('editor.options.warn', 'Warn') }}</option>
-    </select>
+    <mat-select [(ngModel)]="group.backgroundColor" (ngModelChange)="onAppearanceChange()" [placeholder]="t('editor.options.none', '(nenhuma)')">
+      <mat-option [value]="undefined">{{ t('editor.options.none', '(nenhuma)') }}</mat-option>
+      <mat-option value="primary">{{ t('editor.options.primary', 'Primary') }}</mat-option>
+      <mat-option value="accent">{{ t('editor.options.accent', 'Accent') }}</mat-option>
+      <mat-option value="warn">{{ t('editor.options.warn', 'Warn') }}</mat-option>
+    </mat-select>
     <button
       praxisIconButton="help_outline"
       size="dense"
@@ -1696,12 +1892,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
     <input matInput [(ngModel)]="nav.ariaLabelledby" (ngModelChange)="onAppearanceChange()" />
     </mat-form-field>
     <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.color', 'Cor (M2)') }}</mat-label>
-    <select matNativeControl [(ngModel)]="nav.color" (ngModelChange)="onAppearanceChange()">
-      <option [ngValue]="undefined">{{ t('editor.options.none', '(nenhuma)') }}</option>
-      <option value="primary">{{ t('editor.options.primary', 'Primary') }}</option>
-      <option value="accent">{{ t('editor.options.accent', 'Accent') }}</option>
-      <option value="warn">{{ t('editor.options.warn', 'Warn') }}</option>
-    </select>
+    <mat-select [(ngModel)]="nav.color" (ngModelChange)="onAppearanceChange()" [placeholder]="t('editor.options.none', '(nenhuma)')">
+      <mat-option [value]="undefined">{{ t('editor.options.none', '(nenhuma)') }}</mat-option>
+      <mat-option value="primary">{{ t('editor.options.primary', 'Primary') }}</mat-option>
+      <mat-option value="accent">{{ t('editor.options.accent', 'Accent') }}</mat-option>
+      <mat-option value="warn">{{ t('editor.options.warn', 'Warn') }}</mat-option>
+    </mat-select>
     <button
       praxisIconButton="help_outline"
       size="dense"
@@ -1713,12 +1909,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
     ></button>
     </mat-form-field>
     <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.backgroundColor', 'Cor de fundo (M2)') }}</mat-label>
-    <select matNativeControl [(ngModel)]="nav.backgroundColor" (ngModelChange)="onAppearanceChange()">
-      <option [ngValue]="undefined">{{ t('editor.options.none', '(nenhuma)') }}</option>
-      <option value="primary">{{ t('editor.options.primary', 'Primary') }}</option>
-      <option value="accent">{{ t('editor.options.accent', 'Accent') }}</option>
-      <option value="warn">{{ t('editor.options.warn', 'Warn') }}</option>
-    </select>
+    <mat-select [(ngModel)]="nav.backgroundColor" (ngModelChange)="onAppearanceChange()" [placeholder]="t('editor.options.none', '(nenhuma)')">
+      <mat-option [value]="undefined">{{ t('editor.options.none', '(nenhuma)') }}</mat-option>
+      <mat-option value="primary">{{ t('editor.options.primary', 'Primary') }}</mat-option>
+      <mat-option value="accent">{{ t('editor.options.accent', 'Accent') }}</mat-option>
+      <mat-option value="warn">{{ t('editor.options.warn', 'Warn') }}</mat-option>
+    </mat-select>
     <button
       praxisIconButton="help_outline"
       size="dense"
@@ -1800,12 +1996,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
     
           <mat-form-field appearance="outline">
             <mat-label>{{ t('editor.fields.density', 'Densidade') }}</mat-label>
-            <select matNativeControl [(ngModel)]="appearance.density" (ngModelChange)="onAppearanceChange()">
-              <option [ngValue]="undefined">{{ t('editor.density.default', 'Padrao') }}</option>
-              <option value="compact">{{ t('editor.density.compact', 'Compacta') }}</option>
-              <option value="comfortable">{{ t('editor.density.comfortable', 'Confortavel') }}</option>
-              <option value="spacious">{{ t('editor.density.spacious', 'Espacosa') }}</option>
-            </select>
+            <mat-select [(ngModel)]="appearance.density" (ngModelChange)="onAppearanceChange()" [placeholder]="t('editor.density.default', 'Padrao')">
+              <mat-option [value]="undefined">{{ t('editor.density.default', 'Padrao') }}</mat-option>
+              <mat-option value="compact">{{ t('editor.density.compact', 'Compacta') }}</mat-option>
+              <mat-option value="comfortable">{{ t('editor.density.comfortable', 'Confortavel') }}</mat-option>
+              <mat-option value="spacious">{{ t('editor.density.spacious', 'Espacosa') }}</mat-option>
+            </mat-select>
           </mat-form-field>
         </div>
     
@@ -1894,12 +2090,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
       <div class="editor-row">
         <mat-form-field appearance="outline" class="editor-field-min">
           <mat-label>{{ t('editor.fields.addComponent', 'Adicionar componente') }}</mat-label>
-          <select matNativeControl [(ngModel)]="selectedTabWidgetId[i]">
-            <option [ngValue]="''">{{ t('editor.fields.selectPlaceholder', '(selecione)') }}</option>
+          <mat-select [(ngModel)]="selectedTabWidgetId[i]" [placeholder]="t('editor.fields.selectPlaceholder', '(selecione)')">
+            <mat-option [value]="''">{{ t('editor.fields.selectPlaceholder', '(selecione)') }}</mat-option>
             @for (c of componentOptions; track c) {
-              <option [ngValue]="c.id">{{ c.friendlyName || c.id }}</option>
+              <mat-option [value]="c.id">{{ c.friendlyName || c.id }}</mat-option>
             }
-          </select>
+          </mat-select>
         </mat-form-field>
         <button mat-stroked-button (click)="addWidgetToTab(i)"><mat-icon [praxisIcon]="'add'"></mat-icon>{{ t('editor.actions.add', 'Adicionar') }}</button>
         <span class="editor-spacer"></span>
@@ -1920,6 +2116,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                 <strong class="editor-card-title">{{ getCompName(w.id) }}</strong>
                 <button praxisIconButton="delete" size="compact" type="button" class="editor-icon-action--danger" (click)="removeWidgetFromTab(i, wi)" [matTooltip]="t('editor.actions.removeComponent', 'Remover componente')" [attr.aria-label]="t('editor.actions.removeComponent', 'Remover componente')"></button>
               </div>
+              <mat-form-field appearance="outline">
+                <mat-label>{{ t('editor.fields.childWidgetKey', 'Chave da instancia (childWidgetKey)') }}</mat-label>
+                <input matInput [ngModel]="w.childWidgetKey || ''" (ngModelChange)="updateWidgetKeyTab(i, wi, $event)" />
+              </mat-form-field>
               <div class="editor-grid two tight">
                 <mat-form-field appearance="outline">
                   <mat-label>{{ t('editor.fields.inputsJson', 'Inputs (JSON)') }}</mat-label>
@@ -1988,12 +2188,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
             <div class="editor-row">
               <mat-form-field appearance="outline" class="editor-field-min">
                 <mat-label>{{ t('editor.fields.addComponent', 'Adicionar componente') }}</mat-label>
-                <select matNativeControl [(ngModel)]="selectedLinkWidgetId[i]">
-                  <option [ngValue]="''">{{ t('editor.fields.selectPlaceholder', '(selecione)') }}</option>
+                <mat-select [(ngModel)]="selectedLinkWidgetId[i]" [placeholder]="t('editor.fields.selectPlaceholder', '(selecione)')">
+                  <mat-option [value]="''">{{ t('editor.fields.selectPlaceholder', '(selecione)') }}</mat-option>
                   @for (c of componentOptions; track c) {
-                    <option [ngValue]="c.id">{{ c.friendlyName || c.id }}</option>
+                    <mat-option [value]="c.id">{{ c.friendlyName || c.id }}</mat-option>
                   }
-                </select>
+                </mat-select>
               </mat-form-field>
               <button mat-stroked-button (click)="addWidgetToLink(i)"><mat-icon [praxisIcon]="'add'"></mat-icon>{{ t('editor.actions.add', 'Adicionar') }}</button>
               <span class="editor-spacer"></span>
@@ -2014,6 +2214,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                       <strong class="editor-card-title">{{ getCompName(w.id) }}</strong>
                       <button praxisIconButton="delete" size="compact" type="button" class="editor-icon-action--danger" (click)="removeWidgetFromLink(i, wi)" [matTooltip]="t('editor.actions.removeComponent', 'Remover componente')" [attr.aria-label]="t('editor.actions.removeComponent', 'Remover componente')"></button>
                     </div>
+                    <mat-form-field appearance="outline">
+                      <mat-label>{{ t('editor.fields.childWidgetKey', 'Chave da instancia (childWidgetKey)') }}</mat-label>
+                      <input matInput [ngModel]="w.childWidgetKey || ''" (ngModelChange)="updateWidgetKeyLink(i, wi, $event)" />
+                    </mat-form-field>
                     <div class="editor-grid two tight">
                       <mat-form-field appearance="outline">
                         <mat-label>{{ t('editor.fields.inputsJson', 'Inputs (JSON)') }}</mat-label>
@@ -2039,7 +2243,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
     </mat-tab>
     </mat-tab-group>
     </div>
-    `, styles: [":host{display:block;color:var(--md-sys-color-on-surface)}.editor-shell{display:grid;gap:12px}.editor-topbar{display:flex;align-items:start;justify-content:flex-start}.editor-mode-field{width:min(320px,100%)}.editor-diagnostics{display:grid;gap:8px}.editor-diagnostics-title{font-size:.95rem;font-weight:600;color:var(--md-sys-color-on-surface)}.editor-diagnostic{display:grid;gap:4px;padding:10px 12px;border-radius:10px;border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-container);color:var(--md-sys-color-on-surface)}.editor-diagnostic code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;color:var(--md-sys-color-on-surface-variant)}.editor-diagnostic.level-error{background:var(--md-sys-color-error-container);color:var(--md-sys-color-on-error-container);border-color:var(--md-sys-color-error)}.editor-diagnostic.level-warning{background:var(--md-sys-color-tertiary-container, var(--md-sys-color-surface-container));color:var(--md-sys-color-on-tertiary-container, var(--md-sys-color-on-surface));border-color:var(--md-sys-color-outline-variant)}.editor-tabs{--editor-surface: var(--md-sys-color-surface-container-lowest, var(--md-sys-color-surface));--editor-border: 1px solid var(--md-sys-color-outline-variant);--editor-radius: 12px;--editor-muted: var(--md-sys-color-on-surface-variant)}.editor-section{padding:12px;display:grid;gap:12px;background:var(--editor-surface);border:var(--editor-border);border-radius:var(--editor-radius)}.editor-section-lg{gap:16px}.editor-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.editor-grid{display:grid;gap:12px}.editor-grid.two{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.editor-grid.tight{gap:8px}.editor-toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.editor-muted{color:var(--editor-muted)}.editor-title{margin:6px 0 8px;font-size:1rem}.editor-title-row{display:flex;align-items:center;gap:8px}.editor-code{white-space:pre-wrap;background:var(--md-sys-color-surface-container);padding:8px;border-radius:6px;border:1px solid var(--md-sys-color-outline-variant)}.editor-card{border:1px solid var(--md-sys-color-outline-variant);padding:10px;border-radius:10px;display:grid;gap:8px;background:var(--md-sys-color-surface)}.editor-card.dashed{border-style:dashed}.editor-card-header{display:flex;align-items:center;gap:8px}.editor-card-title{flex:1;font-weight:600}.editor-divider{border-top:1px solid var(--md-sys-color-outline-variant);padding-top:8px}.editor-spacer{flex:1}.editor-field-min{min-width:260px}.editor-section .editor-field-min{width:260px;max-width:260px}.editor-field-240{width:240px}.editor-section .editor-field-240{width:240px;max-width:240px}.editor-json{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.editor-section .mat-mdc-form-field{width:100%;max-width:520px;--mdc-outlined-text-field-container-height: 48px;--mdc-outlined-text-field-outline-color: var(--md-sys-color-outline-variant);--mdc-outlined-text-field-hover-outline-color: var(--md-sys-color-outline);--mdc-outlined-text-field-focus-outline-color: var(--md-sys-color-primary);--mdc-outlined-text-field-error-outline-color: var(--md-sys-color-error);--mdc-outlined-text-field-error-focus-outline-color: var(--md-sys-color-error);--mdc-outlined-text-field-error-hover-outline-color: var(--md-sys-color-error);--mdc-outlined-text-field-label-text-color: var(--md-sys-color-on-surface-variant);--mdc-outlined-text-field-input-text-color: var(--md-sys-color-on-surface);--mdc-outlined-text-field-supporting-text-color: var(--md-sys-color-on-surface-variant)}.editor-section .mat-mdc-form-field.full{max-width:none}.editor-icon-action--danger{color:var(--md-sys-color-error)}\n"] }]
+    `, styles: [":host{display:block;container-type:inline-size;color:var(--pfx-settings-panel-text-primary, var(--md-sys-color-on-surface))}.editor-shell{display:grid;gap:12px}.editor-topbar{display:flex;align-items:start;justify-content:flex-start}.editor-mode-field{width:min(320px,100%)}.editor-diagnostics{display:grid;gap:8px}.editor-diagnostics-title{font-size:.95rem;font-weight:600;color:var(--md-sys-color-on-surface)}.editor-diagnostic{display:grid;gap:4px;padding:10px 12px;border-radius:10px;border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-container);color:var(--md-sys-color-on-surface)}.editor-diagnostic code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;color:var(--md-sys-color-on-surface-variant)}.editor-diagnostic.level-error{background:var(--md-sys-color-error-container);color:var(--md-sys-color-on-error-container);border-color:var(--md-sys-color-error)}.editor-diagnostic.level-warning{background:var(--md-sys-color-tertiary-container, var(--md-sys-color-surface-container));color:var(--md-sys-color-on-tertiary-container, var(--md-sys-color-on-surface));border-color:var(--md-sys-color-outline-variant)}.editor-tabs{--editor-surface: var(--pfx-settings-panel-surface-elevated, var(--md-sys-color-surface-container-lowest, var(--md-sys-color-surface)));--editor-border: 1px solid var(--pfx-settings-panel-border, var(--md-sys-color-outline-variant));--editor-radius: 12px;--editor-muted: var(--pfx-settings-panel-text-secondary, var(--md-sys-color-on-surface-variant))}.editor-section{padding:12px;display:grid;gap:12px;background:var(--editor-surface);border:var(--editor-border);border-radius:var(--editor-radius)}.editor-section-lg{gap:16px}.editor-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.editor-grid{display:grid;gap:12px}.editor-grid.two{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.editor-grid.tight{gap:8px}.editor-toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.editor-muted{color:var(--editor-muted)}.editor-title{margin:6px 0 8px;font-size:1rem}.editor-title-row{display:flex;align-items:center;gap:8px}.editor-code{white-space:pre-wrap;background:var(--md-sys-color-surface-container);padding:8px;border-radius:6px;border:1px solid var(--md-sys-color-outline-variant)}.editor-card{border:1px solid var(--pfx-settings-panel-border, var(--md-sys-color-outline-variant));padding:10px;border-radius:10px;display:grid;gap:8px;background:var(--pfx-settings-panel-surface, var(--md-sys-color-surface))}.editor-card.dashed{border-style:dashed}.editor-card-header{display:flex;align-items:center;gap:8px}.editor-card-title{flex:1;font-weight:600}.editor-divider{border-top:1px solid var(--pfx-settings-panel-border, var(--md-sys-color-outline-variant));padding-top:8px}.editor-spacer{flex:1}.editor-field-min{min-width:260px}.editor-section .editor-field-min{width:260px;max-width:260px}.editor-field-240{width:240px}.editor-section .editor-field-240{width:240px;max-width:240px}@container (max-width: 640px){.editor-grid.two{grid-template-columns:1fr}.editor-field-min,.editor-section .editor-field-min,.editor-field-240,.editor-section .editor-field-240{min-width:0;width:100%;max-width:100%}}.editor-json{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.editor-section .mat-mdc-form-field{width:100%;max-width:520px;--mdc-outlined-text-field-container-height: 48px;--mdc-outlined-text-field-outline-color: var(--md-sys-color-outline-variant);--mdc-outlined-text-field-hover-outline-color: var(--md-sys-color-outline);--mdc-outlined-text-field-focus-outline-color: var(--md-sys-color-primary);--mdc-outlined-text-field-error-outline-color: var(--md-sys-color-error);--mdc-outlined-text-field-error-focus-outline-color: var(--md-sys-color-error);--mdc-outlined-text-field-error-hover-outline-color: var(--md-sys-color-error);--mdc-outlined-text-field-label-text-color: var(--md-sys-color-on-surface-variant);--mdc-outlined-text-field-input-text-color: var(--md-sys-color-on-surface);--mdc-outlined-text-field-supporting-text-color: var(--md-sys-color-on-surface-variant)}.editor-section .mat-mdc-form-field.full{max-width:none}.editor-icon-action--danger{color:var(--md-sys-color-error)}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [SETTINGS_PANEL_DATA]
@@ -2184,7 +2388,7 @@ class TabsQuickSetupComponent {
         <mat-slide-toggle [(ngModel)]="model.stretchTabs" (ngModelChange)="updateState()">{{ t('editor.toggles.stretchTabs', 'Esticar abas') }}</mat-slide-toggle>
       </div>
     </div>
-    `, isInline: true, styles: [":host{display:block;color:var(--md-sys-color-on-surface)}.setup-root{display:grid;gap:12px;padding:8px;background:var(--md-sys-color-surface-container-lowest, var(--md-sys-color-surface));border:1px solid var(--md-sys-color-outline-variant);border-radius:12px}.setup-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.setup-row.wrap{flex-wrap:wrap}.setup-grid{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:start}.setup-root .mat-mdc-form-field{width:100%;max-width:520px;--mdc-outlined-text-field-container-height: 48px;--mdc-outlined-text-field-outline-color: var(--md-sys-color-outline-variant);--mdc-outlined-text-field-hover-outline-color: var(--md-sys-color-outline);--mdc-outlined-text-field-focus-outline-color: var(--md-sys-color-primary);--mdc-outlined-text-field-error-outline-color: var(--md-sys-color-error);--mdc-outlined-text-field-error-focus-outline-color: var(--md-sys-color-error);--mdc-outlined-text-field-error-hover-outline-color: var(--md-sys-color-error);--mdc-outlined-text-field-label-text-color: var(--md-sys-color-on-surface-variant);--mdc-outlined-text-field-input-text-color: var(--md-sys-color-on-surface);--mdc-outlined-text-field-supporting-text-color: var(--md-sys-color-on-surface-variant)}.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border:1px solid var(--md-sys-color-outline-variant);border-radius:16px;background:var(--md-sys-color-surface)}.hint{color:var(--md-sys-color-on-surface-variant)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }, { kind: "component", type: PraxisIconButtonComponent, selector: "button[praxisIconButton]", inputs: ["praxisIconButton", "size", "appearance", "presentation", "pressed", "busy"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i8.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }] });
+    `, isInline: true, styles: [":host{display:block;color:var(--md-sys-color-on-surface)}.setup-root{display:grid;gap:12px;padding:8px;background:var(--md-sys-color-surface-container-lowest, var(--md-sys-color-surface));border:1px solid var(--md-sys-color-outline-variant);border-radius:12px}.setup-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.setup-row.wrap{flex-wrap:wrap}.setup-grid{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:start}.setup-root .mat-mdc-form-field{width:100%;max-width:520px;--mdc-outlined-text-field-container-height: 48px;--mdc-outlined-text-field-outline-color: var(--md-sys-color-outline-variant);--mdc-outlined-text-field-hover-outline-color: var(--md-sys-color-outline);--mdc-outlined-text-field-focus-outline-color: var(--md-sys-color-primary);--mdc-outlined-text-field-error-outline-color: var(--md-sys-color-error);--mdc-outlined-text-field-error-focus-outline-color: var(--md-sys-color-error);--mdc-outlined-text-field-error-hover-outline-color: var(--md-sys-color-error);--mdc-outlined-text-field-label-text-color: var(--md-sys-color-on-surface-variant);--mdc-outlined-text-field-input-text-color: var(--md-sys-color-on-surface);--mdc-outlined-text-field-supporting-text-color: var(--md-sys-color-on-surface-variant)}.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border:1px solid var(--md-sys-color-outline-variant);border-radius:16px;background:var(--md-sys-color-surface)}.hint{color:var(--md-sys-color-on-surface-variant)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }, { kind: "component", type: PraxisIconButtonComponent, selector: "button[praxisIconButton]", inputs: ["praxisIconButton", "size", "appearance", "presentation", "pressed", "busy"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i9.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TabsQuickSetupComponent, decorators: [{
             type: Component,
@@ -4692,7 +4896,7 @@ class PraxisTabs {
         </button>
       }
     </div>
-    `, isInline: true, styles: [".praxis-tabs-root{position:relative;display:block}.praxis-tabs-group.align-start .mat-mdc-tab-header{justify-content:flex-start}.praxis-tabs-group.align-center .mat-mdc-tab-header{justify-content:center}.praxis-tabs-group.align-end .mat-mdc-tab-header{justify-content:flex-end}.praxis-tabs-group--header-only .mat-mdc-tab-body-wrapper{display:none}:host ::ng-deep .praxis-tabs-group.mat-mdc-tab-group-dynamic-height>.mat-mdc-tab-body-wrapper,:host ::ng-deep .praxis-tabs-group.mat-mdc-tab-group-dynamic-height>.mat-mdc-tab-body-wrapper>.mat-mdc-tab-body,:host ::ng-deep .praxis-tabs-group.mat-mdc-tab-group-dynamic-height>.mat-mdc-tab-body-wrapper>.mat-mdc-tab-body>.mat-mdc-tab-body-content{overflow:clip}.praxis-tabs-nav-panel--header-only{display:none}.density-compact .mat-mdc-tab-body-content{padding:8px}.density-comfortable .mat-mdc-tab-body-content{padding:16px}.density-spacious .mat-mdc-tab-body-content{padding:24px}.praxis-tabs-widget-stack{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--p-tabs-widget-stack-gap, 16px);min-width:0}.praxis-tabs-widget-surface{display:block;min-width:0}.density-compact .praxis-tabs-widget-stack{--p-tabs-widget-stack-gap: 12px}.density-comfortable .praxis-tabs-widget-stack{--p-tabs-widget-stack-gap: 16px}.density-spacious .praxis-tabs-widget-stack{--p-tabs-widget-stack-gap: 24px}.tabs-ai-assistant{position:absolute;right:12px;bottom:72px;z-index:3}.tabs-ai-assistant-trigger{box-shadow:var(--md-sys-elevation-level2)}.edit-fab{position:absolute;right:12px;bottom:12px;z-index:2}.edit-fab-secondary{right:56px}.tab-empty{padding:16px;color:var(--md-sys-color-on-surface-variant);font-style:italic}.high-contrast{filter:contrast(1.2)}.reduce-motion{--mat-animation-duration: 0ms}.drag-handle{display:inline-flex;align-items:center;vertical-align:middle;margin-right:4px;cursor:grab}.tab-label-icon{font-size:18px;width:18px;height:18px;margin-right:6px;vertical-align:middle}:host-context(.pdx-gridster-item) .praxis-tabs-root{display:flex;flex-direction:column;height:100%;min-height:0}:host-context(.pdx-gridster-item) .praxis-tabs-group,:host-context(.pdx-gridster-item) .mat-mdc-tab-group{flex:1 1 auto;min-height:0}:host-context(.pdx-gridster-item) .mat-mdc-tab-body-wrapper,:host-context(.pdx-gridster-item) .mat-mdc-tab-body-content{height:100%;min-height:0}:host-context(.pdx-gridster-item) .mat-mdc-tab-body-content{overflow:auto}:host-context(.pdx-gridster-item) .praxis-tabnav-content{flex:1 1 auto;min-height:0;overflow:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2_1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2_1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "directive", type: i3.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i3.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i3.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: i3.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i3.MatTabNavPanel, selector: "mat-tab-nav-panel", inputs: ["id"], exportAs: ["matTabNavPanel"] }, { kind: "component", type: i3.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }, { kind: "component", type: PraxisIconButtonComponent, selector: "button[praxisIconButton]", inputs: ["praxisIconButton", "size", "appearance", "presentation", "pressed", "busy"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i6.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i9.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i9.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i9.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: EmptyStateCardComponent, selector: "praxis-empty-state-card", inputs: ["icon", "title", "description", "primaryAction", "secondaryActions", "inline", "tone", "variant", "alignment", "density", "iconContainer"] }, { kind: "directive", type: DynamicFieldLoaderDirective, selector: "[dynamicFieldLoader]", inputs: ["fields", "formGroup", "enableExternalControlBinding", "itemTemplate", "debugTrace", "debugTraceLabel", "readonlyMode", "disabledMode", "presentationMode", "visible", "canvasMode"], outputs: ["componentsCreated", "fieldCreated", "fieldDestroyed", "renderError", "canvasMouseEnter", "canvasMouseLeave", "canvasClick", "canvasFocus"] }, { kind: "directive", type: DynamicWidgetLoaderDirective, selector: "[dynamicWidgetLoader]", inputs: ["dynamicWidgetLoader", "ownerWidgetKey", "context", "strictValidation", "autoWireOutputs"], outputs: ["widgetEvent", "widgetDiagnostic"], exportAs: ["dynamicWidgetLoader"] }, { kind: "component", type: PraxisAiAssistantShellComponent, selector: "praxis-ai-assistant-shell", inputs: ["labels", "mode", "state", "contextItems", "attachments", "messages", "quickReplies", "recommendedIntents", "prompt", "statusText", "errorText", "testIdPrefix", "panelTestId", "submitTestId", "applyTestId", "primaryAction", "secondaryActions", "governanceActions", "busy", "canSubmit", "canApply", "submitOnEnter", "showAttachAction", "enablePastedAttachments", "enableFileAttachments", "attachmentAccept", "attachmentMultiple", "voiceInputMode", "voiceLanguage", "draggable", "resizable", "minWidth", "minHeight", "margin", "layout"], outputs: ["promptChange", "submitPrompt", "apply", "retryTurn", "cancelTurn", "shellAction", "close", "attach", "attachmentsPasted", "attachmentsSelected", "removeAttachment", "messageAction", "editMessage", "resendMessage", "quickReply", "recommendedIntent", "layoutChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, styles: [".praxis-tabs-root{position:relative;display:block}.praxis-tabs-group.align-start .mat-mdc-tab-header{justify-content:flex-start}.praxis-tabs-group.align-center .mat-mdc-tab-header{justify-content:center}.praxis-tabs-group.align-end .mat-mdc-tab-header{justify-content:flex-end}.praxis-tabs-group--header-only .mat-mdc-tab-body-wrapper{display:none}:host ::ng-deep .praxis-tabs-group.mat-mdc-tab-group-dynamic-height>.mat-mdc-tab-body-wrapper,:host ::ng-deep .praxis-tabs-group.mat-mdc-tab-group-dynamic-height>.mat-mdc-tab-body-wrapper>.mat-mdc-tab-body,:host ::ng-deep .praxis-tabs-group.mat-mdc-tab-group-dynamic-height>.mat-mdc-tab-body-wrapper>.mat-mdc-tab-body>.mat-mdc-tab-body-content{overflow:clip}.praxis-tabs-nav-panel--header-only{display:none}.density-compact .mat-mdc-tab-body-content{padding:8px}.density-comfortable .mat-mdc-tab-body-content{padding:16px}.density-spacious .mat-mdc-tab-body-content{padding:24px}.praxis-tabs-widget-stack{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--p-tabs-widget-stack-gap, 16px);min-width:0}.praxis-tabs-widget-surface{display:block;min-width:0}.density-compact .praxis-tabs-widget-stack{--p-tabs-widget-stack-gap: 12px}.density-comfortable .praxis-tabs-widget-stack{--p-tabs-widget-stack-gap: 16px}.density-spacious .praxis-tabs-widget-stack{--p-tabs-widget-stack-gap: 24px}.tabs-ai-assistant{position:absolute;right:12px;bottom:72px;z-index:3}.tabs-ai-assistant-trigger{box-shadow:var(--md-sys-elevation-level2)}.edit-fab{position:absolute;right:12px;bottom:12px;z-index:2}.edit-fab-secondary{right:56px}.tab-empty{padding:16px;color:var(--md-sys-color-on-surface-variant);font-style:italic}.high-contrast{filter:contrast(1.2)}.reduce-motion{--mat-animation-duration: 0ms}.drag-handle{display:inline-flex;align-items:center;vertical-align:middle;margin-right:4px;cursor:grab}.tab-label-icon{font-size:18px;width:18px;height:18px;margin-right:6px;vertical-align:middle}:host-context(.pdx-gridster-item) .praxis-tabs-root{display:flex;flex-direction:column;height:100%;min-height:0}:host-context(.pdx-gridster-item) .praxis-tabs-group,:host-context(.pdx-gridster-item) .mat-mdc-tab-group{flex:1 1 auto;min-height:0}:host-context(.pdx-gridster-item) .mat-mdc-tab-body-wrapper,:host-context(.pdx-gridster-item) .mat-mdc-tab-body-content{height:100%;min-height:0}:host-context(.pdx-gridster-item) .mat-mdc-tab-body-content{overflow:auto}:host-context(.pdx-gridster-item) .praxis-tabnav-content{flex:1 1 auto;min-height:0;overflow:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2_1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2_1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "directive", type: i3.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i3.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i3.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: i3.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i3.MatTabNavPanel, selector: "mat-tab-nav-panel", inputs: ["id"], exportAs: ["matTabNavPanel"] }, { kind: "component", type: i3.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }, { kind: "component", type: PraxisIconButtonComponent, selector: "button[praxisIconButton]", inputs: ["praxisIconButton", "size", "appearance", "presentation", "pressed", "busy"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6$1.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i6$1.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i10.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i10.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i10.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: EmptyStateCardComponent, selector: "praxis-empty-state-card", inputs: ["icon", "title", "description", "primaryAction", "secondaryActions", "inline", "tone", "variant", "alignment", "density", "iconContainer"] }, { kind: "directive", type: DynamicFieldLoaderDirective, selector: "[dynamicFieldLoader]", inputs: ["fields", "formGroup", "enableExternalControlBinding", "itemTemplate", "debugTrace", "debugTraceLabel", "readonlyMode", "disabledMode", "presentationMode", "visible", "canvasMode"], outputs: ["componentsCreated", "fieldCreated", "fieldDestroyed", "renderError", "canvasMouseEnter", "canvasMouseLeave", "canvasClick", "canvasFocus"] }, { kind: "directive", type: DynamicWidgetLoaderDirective, selector: "[dynamicWidgetLoader]", inputs: ["dynamicWidgetLoader", "ownerWidgetKey", "context", "strictValidation", "autoWireOutputs"], outputs: ["widgetEvent", "widgetDiagnostic"], exportAs: ["dynamicWidgetLoader"] }, { kind: "component", type: PraxisAiAssistantShellComponent, selector: "praxis-ai-assistant-shell", inputs: ["labels", "mode", "state", "contextItems", "attachments", "messages", "quickReplies", "recommendedIntents", "prompt", "statusText", "errorText", "testIdPrefix", "panelTestId", "submitTestId", "applyTestId", "primaryAction", "secondaryActions", "governanceActions", "busy", "canSubmit", "canApply", "submitOnEnter", "showAttachAction", "enablePastedAttachments", "enableFileAttachments", "attachmentAccept", "attachmentMultiple", "voiceInputMode", "voiceLanguage", "draggable", "resizable", "minWidth", "minHeight", "margin", "layout"], outputs: ["promptChange", "submitPrompt", "apply", "retryTurn", "cancelTurn", "shellAction", "close", "attach", "attachmentsPasted", "attachmentsSelected", "removeAttachment", "messageAction", "editMessage", "resendMessage", "quickReply", "recommendedIntent", "layoutChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisTabs, decorators: [{
             type: Component,
@@ -5764,4 +5968,4 @@ const PRAXIS_TABS_AUTHORING_MANIFEST = {
  * Generated bundle index. Do not edit.
  */
 
-export { PRAXIS_TABS_AUTHORING_MANIFEST, PRAXIS_TABS_COMPONENT_METADATA, PRAXIS_TABS_I18N_CONFIG, PRAXIS_TABS_I18N_NAMESPACE, PraxisTabs, PraxisTabsConfigEditor, PraxisTabsWidgetConfigEditor, TABS_AI_CAPABILITIES, buildTabsApplyPlan, createPraxisTabsI18nConfig, createTabsAuthoringDocument, normalizeTabsAuthoringDocument, providePraxisTabsI18n, providePraxisTabsMetadata, serializeTabsAuthoringDocument, toCanonicalTabsConfig, validateTabsAuthoringDocument };
+export { PRAXIS_TABS_AUTHORING_MANIFEST, PRAXIS_TABS_COMPONENT_METADATA, PRAXIS_TABS_I18N_CONFIG, PRAXIS_TABS_I18N_NAMESPACE, PraxisTabs, PraxisTabsConfigEditor, PraxisTabsWidgetConfigEditor, TABS_AI_CAPABILITIES, buildTabsApplyPlan, buildUniqueChildWidgetKey, createPraxisTabsI18nConfig, createTabsAuthoringDocument, normalizeTabsAuthoringDocument, providePraxisTabsI18n, providePraxisTabsMetadata, serializeTabsAuthoringDocument, toCanonicalTabsConfig, validateTabsAuthoringDocument };

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@praxisui/tabs",
-  "version": "10.0.0-rc.4",
+  "version": "10.0.0-rc.41",
   "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": "^10.0.0-rc.4",
-    "@praxisui/dynamic-fields": "^10.0.0-rc.4",
-    "@praxisui/settings-panel": "^10.0.0-rc.4",
+    "@praxisui/core": "^10.0.0-rc.41",
+    "@praxisui/dynamic-fields": "^10.0.0-rc.41",
+    "@praxisui/settings-panel": "^10.0.0-rc.41",
     "@angular/forms": "^21.0.0",
     "@angular/router": "^21.0.0",
-    "@praxisui/ai": "^10.0.0-rc.4",
+    "@praxisui/ai": "^10.0.0-rc.41",
     "rxjs": "~7.8.0"
   },
   "dependencies": {

package/types/praxisui-tabs.d.ts

@@ -492,6 +492,7 @@ declare class PraxisTabsConfigEditor implements SettingsValueProvider {
     moveTab(index: number, delta: number): void;
     addWidgetToTab(tabIndex: number): void;
     removeWidgetFromTab(tabIndex: number, widgetIndex: number): void;
+    updateWidgetKeyTab(tabIndex: number, widgetIndex: number, key: string): void;
     updateWidgetInputsTab(tabIndex: number, widgetIndex: number, text: string): void;
     updateWidgetOutputsTab(tabIndex: number, widgetIndex: number, text: string): void;
     addPresetToTab(tabIndex: number, type: 'form' | 'table' | 'crud'): void;
@@ -500,9 +501,12 @@ declare class PraxisTabsConfigEditor implements SettingsValueProvider {
     moveLink(index: number, delta: number): void;
     addWidgetToLink(linkIndex: number): void;
     removeWidgetFromLink(linkIndex: number, widgetIndex: number): void;
+    updateWidgetKeyLink(linkIndex: number, widgetIndex: number, key: string): void;
     updateWidgetInputsLink(linkIndex: number, widgetIndex: number, text: string): void;
     updateWidgetOutputsLink(linkIndex: number, widgetIndex: number, text: string): void;
     addPresetToLink(linkIndex: number, type: 'form' | 'table' | 'crud'): void;
+    private nextChildWidgetKey;
+    private buildDefaultWidgetInputs;
     stringify(v: any): string;
     getCompName(id: string): string;
     onTabWidgetDrop(tabIndex: number, event: CdkDragDrop<WidgetDefinition[]>): void;
@@ -560,6 +564,7 @@ declare function buildTabsApplyPlan(doc: TabsAuthoringDocument, runtime?: TabsRu
     saveBindings?: boolean;
 }): TabsApplyPlan;
 declare function serializeTabsAuthoringDocument(doc: TabsAuthoringDocument): TabsAuthoringDocument;
+declare function buildUniqueChildWidgetKey(containerId: string | undefined, widgetId: string | undefined, existingKeys: Iterable<string>): string;
 
 /**
  * Capabilities catalog for Praxis Tabs (TabsMetadata).
@@ -586,5 +591,5 @@ declare const TABS_AI_CAPABILITIES: CapabilityCatalog;
 
 declare const PRAXIS_TABS_AUTHORING_MANIFEST: ComponentAuthoringManifest;
 
-export { PRAXIS_TABS_AUTHORING_MANIFEST, PRAXIS_TABS_COMPONENT_METADATA, PRAXIS_TABS_I18N_CONFIG, PRAXIS_TABS_I18N_NAMESPACE, PraxisTabs, PraxisTabsConfigEditor, PraxisTabsWidgetConfigEditor, TABS_AI_CAPABILITIES, buildTabsApplyPlan, createPraxisTabsI18nConfig, createTabsAuthoringDocument, normalizeTabsAuthoringDocument, providePraxisTabsI18n, providePraxisTabsMetadata, serializeTabsAuthoringDocument, toCanonicalTabsConfig, validateTabsAuthoringDocument };
+export { PRAXIS_TABS_AUTHORING_MANIFEST, PRAXIS_TABS_COMPONENT_METADATA, PRAXIS_TABS_I18N_CONFIG, PRAXIS_TABS_I18N_NAMESPACE, PraxisTabs, PraxisTabsConfigEditor, PraxisTabsWidgetConfigEditor, TABS_AI_CAPABILITIES, buildTabsApplyPlan, buildUniqueChildWidgetKey, createPraxisTabsI18nConfig, createTabsAuthoringDocument, normalizeTabsAuthoringDocument, providePraxisTabsI18n, providePraxisTabsMetadata, serializeTabsAuthoringDocument, toCanonicalTabsConfig, validateTabsAuthoringDocument };
 export type { Capability, CapabilityCatalog, CapabilityCategory, PraxisTabsWidgetEditorInputs, PraxisTabsWidgetEditorValue, TabGroupMetadata, TabLinkMetadata, TabMetadata, TabNavMetadata, TabsAccessibilityConfig, TabsAppearanceConfig, TabsApplyPlan, TabsAuthoringBindings, TabsAuthoringDocument, TabsBehaviorConfig, TabsBindingsDiff, TabsConfigChangeEvent, TabsConfigPersistenceStrategy, TabsEditorDiagnostic, TabsEditorDiagnosticLevel, TabsEditorDocumentKind, TabsEventConfig, TabsMetadata, TabsRuntimeContext, TabsRuntimePlan, TabsStyleTokens, ValueKind };