@praxisui/tabs 8.0.0-beta.31 → 8.0.0-beta.33

package/fesm2022/praxisui-tabs.mjs

@@ -3,27 +3,27 @@ import { inject, Input, Inject, Component, ChangeDetectorRef, effect, EventEmitt
 import { ActivatedRoute } from '@angular/router';
 import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i3$1 from '@angular/material/tabs';
+import * as i3 from '@angular/material/tabs';
 import { MatTabsModule } from '@angular/material/tabs';
-import * as i7 from '@angular/material/icon';
+import * as i4$1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i11 from '@angular/material/tooltip';
+import * as i10 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import * as i1 from '@praxisui/core';
 import { providePraxisI18n, PraxisI18nService, PraxisIconDirective, providePraxisI18nConfig, deepMerge, ASYNC_CONFIG_STORAGE, ComponentKeyService, LoggerService, EmptyStateCardComponent, DynamicWidgetLoaderDirective, ComponentMetadataRegistry } from '@praxisui/core';
-import * as i6$1 from '@angular/material/button';
+import * as i6 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i3 from '@angular/forms';
+import * as i2_1 from '@angular/forms';
 import { FormsModule, FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms';
 import { DynamicFieldLoaderDirective } from '@praxisui/dynamic-fields';
 import { SETTINGS_PANEL_DATA, SettingsPanelService } from '@praxisui/settings-panel';
-import * as i5 from '@angular/material/form-field';
+import * as i4 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i6 from '@angular/material/input';
+import * as i5 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import * as i9 from '@angular/material/slide-toggle';
+import * as i8 from '@angular/material/slide-toggle';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import * as i10 from '@angular/cdk/drag-drop';
+import * as i9 from '@angular/cdk/drag-drop';
 import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
 import { BehaviorSubject, firstValueFrom, Subject, Subscription } from 'rxjs';
 import { produce } from 'immer';
@@ -980,8 +980,8 @@ class PraxisTabsConfigEditor {
         moveItemInArray(l.widgets, event.previousIndex, event.currentIndex);
         this.onAppearanceChange();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisTabsConfigEditor, deps: [{ token: SETTINGS_PANEL_DATA }, { token: i1.ComponentMetadataRegistry }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: PraxisTabsConfigEditor, isStandalone: true, selector: "praxis-tabs-config-editor", inputs: { document: "document" }, providers: [providePraxisI18nConfig(PRAXIS_TABS_I18N_CONFIG)], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisTabsConfigEditor, deps: [{ token: SETTINGS_PANEL_DATA }, { token: i1.ComponentMetadataRegistry }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PraxisTabsConfigEditor, isStandalone: true, selector: "praxis-tabs-config-editor", inputs: { document: "document" }, providers: [providePraxisI18nConfig(PRAXIS_TABS_I18N_CONFIG)], ngImport: i0, template: `
     <div class="editor-shell">
       <div class="editor-topbar">
         <mat-form-field appearance="outline" class="editor-mode-field">
@@ -992,36 +992,41 @@ class PraxisTabsConfigEditor {
           </select>
         </mat-form-field>
       </div>
-
-      <div *ngIf="diagnostics.length" class="editor-diagnostics">
-        <div class="editor-diagnostics-title">{{ t('editor.diagnostics.title', 'Diagnosticos de authoring') }}</div>
-        <div
-          *ngFor="let diagnostic of diagnostics"
-          class="editor-diagnostic"
-          [class.level-error]="diagnostic.level === 'error'"
-          [class.level-warning]="diagnostic.level === 'warning'"
-          [class.level-info]="diagnostic.level === 'info'"
-        >
-          <strong>{{ diagnosticLevelLabel(diagnostic.level) }}</strong>
-          <span>{{ diagnostic.message }}</span>
-          <code *ngIf="diagnostic.path">{{ diagnostic.path }}</code>
+    
+      @if (diagnostics.length) {
+        <div class="editor-diagnostics">
+          <div class="editor-diagnostics-title">{{ t('editor.diagnostics.title', 'Diagnosticos de authoring') }}</div>
+          @for (diagnostic of diagnostics; track diagnostic) {
+            <div
+              class="editor-diagnostic"
+              [class.level-error]="diagnostic.level === 'error'"
+              [class.level-warning]="diagnostic.level === 'warning'"
+              [class.level-info]="diagnostic.level === 'info'"
+              >
+              <strong>{{ diagnosticLevelLabel(diagnostic.level) }}</strong>
+              <span>{{ diagnostic.message }}</span>
+              @if (diagnostic.path) {
+                <code>{{ diagnostic.path }}</code>
+              }
+            </div>
+          }
         </div>
-      </div>
-
-    <mat-tab-group class="editor-tabs">
-      <mat-tab [label]="t('editor.tabs.behavior', 'Comportamento')">
-        <div class="editor-section">
-          <div class="editor-row">
-            <mat-slide-toggle [(ngModel)]="behavior.closeable" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.closeable', 'Fechavel') }}</mat-slide-toggle>
-            <mat-slide-toggle [(ngModel)]="behavior.lazyLoad" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.lazyLoad', 'Carregar sob demanda') }}</mat-slide-toggle>
-            <mat-slide-toggle [(ngModel)]="behavior.reorderable" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.reorderable', 'Reordenavel') }}</mat-slide-toggle>
+      }
+    
+      <mat-tab-group class="editor-tabs">
+        <mat-tab [label]="t('editor.tabs.behavior', 'Comportamento')">
+          <div class="editor-section">
+            <div class="editor-row">
+              <mat-slide-toggle [(ngModel)]="behavior.closeable" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.closeable', 'Fechavel') }}</mat-slide-toggle>
+              <mat-slide-toggle [(ngModel)]="behavior.lazyLoad" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.lazyLoad', 'Carregar sob demanda') }}</mat-slide-toggle>
+              <mat-slide-toggle [(ngModel)]="behavior.reorderable" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.reorderable', 'Reordenavel') }}</mat-slide-toggle>
+            </div>
           </div>
-        </div>
-      </mat-tab>
-      <mat-tab [label]="t('editor.tabs.group', 'Grupo')" [disabled]="primaryMode !== 'group'">
-        <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>
+        </mat-tab>
+        <mat-tab [label]="t('editor.tabs.group', 'Grupo')" [disabled]="primaryMode !== 'group'">
+          <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>
@@ -1030,428 +1035,445 @@ class PraxisTabsConfigEditor {
               </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-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()" />
-              <button
-                mat-icon-button
-                matSuffix
-                class="help-icon-button"
-                type="button"
-                [matTooltip]="t('editor.hints.selectedIndex', 'selectedIndex')"
-                matTooltipPosition="above"
-              >
-                <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
-              </button>
-            </mat-form-field>
-            <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.animationDuration', 'Duracao da animacao') }}</mat-label>
-              <input matInput [(ngModel)]="group.animationDuration" (ngModelChange)="onAppearanceChange()" [placeholder]="t('editor.fields.placeholder.animationDuration', '500ms')" />
-              <button
-                mat-icon-button
-                matSuffix
-                class="help-icon-button"
-                type="button"
-                [matTooltip]="t('editor.hints.animationDuration', 'animationDuration')"
-                matTooltipPosition="above"
-              >
-                <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
-              </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>
-              <button
-                mat-icon-button
-                matSuffix
-                class="help-icon-button"
-                type="button"
-                [matTooltip]="t('editor.hints.preferTokens', 'Preferir tokens em Estilo.')"
-                matTooltipPosition="above"
-              >
-                <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
-              </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>
-              <button
-                mat-icon-button
-                matSuffix
-                class="help-icon-button"
-                type="button"
-                [matTooltip]="t('editor.hints.preferTokens', 'Preferir tokens em Estilo.')"
-                matTooltipPosition="above"
-              >
-                <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
-              </button>
-            </mat-form-field>
-            <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.ariaLabel', 'aria-label') }}</mat-label>
-              <input matInput [(ngModel)]="group.ariaLabel" (ngModelChange)="onAppearanceChange()" />
-            </mat-form-field>
-            <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.ariaLabelledby', 'aria-labelledby') }}</mat-label>
-              <input matInput [(ngModel)]="group.ariaLabelledby" (ngModelChange)="onAppearanceChange()" />
-            </mat-form-field>
-          </div>
-          <div class="editor-row">
-            <mat-slide-toggle [(ngModel)]="group.dynamicHeight" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.dynamicHeight', 'Altura dinamica') }}</mat-slide-toggle>
-            <mat-slide-toggle [(ngModel)]="group.fitInkBarToContent" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.fitInkBarToContent', 'Indicador ajustado ao conteudo') }}</mat-slide-toggle>
-            <mat-slide-toggle [(ngModel)]="group.disablePagination" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.disablePagination', 'Sem paginacao') }}</mat-slide-toggle>
-            <mat-slide-toggle [(ngModel)]="group.disableRipple" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.disableRipple', 'Sem ripple') }}</mat-slide-toggle>
-            <mat-slide-toggle [(ngModel)]="group.preserveContent" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.preserveContent', 'Preservar conteudo') }}</mat-slide-toggle>
-            <mat-slide-toggle [(ngModel)]="group.stretchTabs" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.stretchTabs', 'Esticar abas') }}</mat-slide-toggle>
-          </div>
+            <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-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()" />
+          <button
+            mat-icon-button
+            matSuffix
+            class="help-icon-button"
+            type="button"
+            [matTooltip]="t('editor.hints.selectedIndex', 'selectedIndex')"
+            matTooltipPosition="above"
+            >
+            <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
+          </button>
+        </mat-form-field>
+        <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.animationDuration', 'Duracao da animacao') }}</mat-label>
+        <input matInput [(ngModel)]="group.animationDuration" (ngModelChange)="onAppearanceChange()" [placeholder]="t('editor.fields.placeholder.animationDuration', '500ms')" />
+        <button
+          mat-icon-button
+          matSuffix
+          class="help-icon-button"
+          type="button"
+          [matTooltip]="t('editor.hints.animationDuration', 'animationDuration')"
+          matTooltipPosition="above"
+          >
+          <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
+        </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>
+      <button
+        mat-icon-button
+        matSuffix
+        class="help-icon-button"
+        type="button"
+        [matTooltip]="t('editor.hints.preferTokens', 'Preferir tokens em Estilo.')"
+        matTooltipPosition="above"
+        >
+        <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
+      </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>
+    <button
+      mat-icon-button
+      matSuffix
+      class="help-icon-button"
+      type="button"
+      [matTooltip]="t('editor.hints.preferTokens', 'Preferir tokens em Estilo.')"
+      matTooltipPosition="above"
+      >
+      <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
+    </button>
+    </mat-form-field>
+    <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.ariaLabel', 'aria-label') }}</mat-label>
+    <input matInput [(ngModel)]="group.ariaLabel" (ngModelChange)="onAppearanceChange()" />
+    </mat-form-field>
+    <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.ariaLabelledby', 'aria-labelledby') }}</mat-label>
+    <input matInput [(ngModel)]="group.ariaLabelledby" (ngModelChange)="onAppearanceChange()" />
+    </mat-form-field>
+    </div>
+    <div class="editor-row">
+      <mat-slide-toggle [(ngModel)]="group.dynamicHeight" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.dynamicHeight', 'Altura dinamica') }}</mat-slide-toggle>
+      <mat-slide-toggle [(ngModel)]="group.fitInkBarToContent" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.fitInkBarToContent', 'Indicador ajustado ao conteudo') }}</mat-slide-toggle>
+      <mat-slide-toggle [(ngModel)]="group.disablePagination" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.disablePagination', 'Sem paginacao') }}</mat-slide-toggle>
+      <mat-slide-toggle [(ngModel)]="group.disableRipple" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.disableRipple', 'Sem ripple') }}</mat-slide-toggle>
+      <mat-slide-toggle [(ngModel)]="group.preserveContent" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.preserveContent', 'Preservar conteudo') }}</mat-slide-toggle>
+      <mat-slide-toggle [(ngModel)]="group.stretchTabs" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.stretchTabs', 'Esticar abas') }}</mat-slide-toggle>
+    </div>
+    </div>
+    </mat-tab>
+    
+    <mat-tab [label]="t('editor.tabs.nav', 'Navegacao')" [disabled]="primaryMode !== 'nav'">
+      <div class="editor-section">
+        <div class="editor-grid two">
+          <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.selectedIndex', 'Indice selecionado') }}</mat-label>
+          <input matInput type="number" [(ngModel)]="nav.selectedIndex" (ngModelChange)="onAppearanceChange()" />
+          <button
+            mat-icon-button
+            matSuffix
+            class="help-icon-button"
+            type="button"
+            [matTooltip]="t('editor.hints.selectedIndex', 'selectedIndex')"
+            matTooltipPosition="above"
+            >
+            <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
+          </button>
+        </mat-form-field>
+        <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.animationDuration', 'Duracao da animacao') }}</mat-label>
+        <input matInput [(ngModel)]="nav.animationDuration" (ngModelChange)="onAppearanceChange()" [placeholder]="t('editor.fields.placeholder.animationDuration', '500ms')" />
+        <button
+          mat-icon-button
+          matSuffix
+          class="help-icon-button"
+          type="button"
+          [matTooltip]="t('editor.hints.animationDuration', 'animationDuration')"
+          matTooltipPosition="above"
+          >
+          <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
+        </button>
+      </mat-form-field>
+      <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.ariaLabel', 'aria-label') }}</mat-label>
+      <input matInput [(ngModel)]="nav.ariaLabel" (ngModelChange)="onAppearanceChange()" />
+    </mat-form-field>
+    <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.ariaLabelledby', 'aria-labelledby') }}</mat-label>
+    <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>
+    <button
+      mat-icon-button
+      matSuffix
+      class="help-icon-button"
+      type="button"
+      [matTooltip]="t('editor.hints.preferTokens', 'Preferir tokens em Estilo.')"
+      matTooltipPosition="above"
+      >
+      <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
+    </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>
+    <button
+      mat-icon-button
+      matSuffix
+      class="help-icon-button"
+      type="button"
+      [matTooltip]="t('editor.hints.preferTokens', 'Preferir tokens em Estilo.')"
+      matTooltipPosition="above"
+      >
+      <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
+    </button>
+    </mat-form-field>
+    </div>
+    <div class="editor-row">
+      <mat-slide-toggle [(ngModel)]="nav.fitInkBarToContent" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.fitInkBarToContent', 'Indicador ajustado ao conteudo') }}</mat-slide-toggle>
+      <mat-slide-toggle [(ngModel)]="nav.disablePagination" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.disablePagination', 'Sem paginacao') }}</mat-slide-toggle>
+      <mat-slide-toggle [(ngModel)]="nav.disableRipple" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.disableRipple', 'Sem ripple') }}</mat-slide-toggle>
+      <mat-slide-toggle [(ngModel)]="nav.stretchTabs" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.stretchTabs', 'Esticar abas') }}</mat-slide-toggle>
+    </div>
+    </div>
+    </mat-tab>
+    <mat-tab [label]="t('editor.tabs.json', 'JSON')">
+      <div class="editor-section">
+        <div class="editor-toolbar">
+          <button mat-button (click)="formatJson()" [disabled]="!isValid">
+            <mat-icon [praxisIcon]="'format_align_left'"></mat-icon>{{ t('editor.actions.format', 'Formatar') }}
+          </button>
+          <button mat-button (click)="reset()">
+            <mat-icon [praxisIcon]="'restart_alt'"></mat-icon>{{ t('editor.actions.reset', 'Resetar') }}
+          </button>
         </div>
-      </mat-tab>
-
-      <mat-tab [label]="t('editor.tabs.nav', 'Navegacao')" [disabled]="primaryMode !== 'nav'">
-        <div class="editor-section">
-          <div class="editor-grid two">
-            <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.selectedIndex', 'Indice selecionado') }}</mat-label>
-              <input matInput type="number" [(ngModel)]="nav.selectedIndex" (ngModelChange)="onAppearanceChange()" />
-              <button
-                mat-icon-button
-                matSuffix
-                class="help-icon-button"
-                type="button"
-                [matTooltip]="t('editor.hints.selectedIndex', 'selectedIndex')"
-                matTooltipPosition="above"
-              >
-                <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
-              </button>
-            </mat-form-field>
-            <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.animationDuration', 'Duracao da animacao') }}</mat-label>
-              <input matInput [(ngModel)]="nav.animationDuration" (ngModelChange)="onAppearanceChange()" [placeholder]="t('editor.fields.placeholder.animationDuration', '500ms')" />
-              <button
-                mat-icon-button
-                matSuffix
-                class="help-icon-button"
-                type="button"
-                [matTooltip]="t('editor.hints.animationDuration', 'animationDuration')"
-                matTooltipPosition="above"
-              >
-                <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
-              </button>
-            </mat-form-field>
-            <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.ariaLabel', 'aria-label') }}</mat-label>
-              <input matInput [(ngModel)]="nav.ariaLabel" (ngModelChange)="onAppearanceChange()" />
-            </mat-form-field>
-            <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.ariaLabelledby', 'aria-labelledby') }}</mat-label>
-              <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>
-              <button
-                mat-icon-button
-                matSuffix
-                class="help-icon-button"
-                type="button"
-                [matTooltip]="t('editor.hints.preferTokens', 'Preferir tokens em Estilo.')"
-                matTooltipPosition="above"
-              >
-                <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
-              </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>
-              <button
-                mat-icon-button
-                matSuffix
-                class="help-icon-button"
-                type="button"
-                [matTooltip]="t('editor.hints.preferTokens', 'Preferir tokens em Estilo.')"
-                matTooltipPosition="above"
+    
+        <mat-form-field appearance="outline" class="json-textarea-field full">
+          <mat-label>{{ t('editor.fields.jsonConfig', 'Configuracao JSON') }}</mat-label>
+          <textarea
+            matInput
+            [(ngModel)]="jsonText"
+            (ngModelChange)="onJsonTextChange($event)"
+            rows="22"
+            spellcheck="false"
+            class="editor-json"
+          ></textarea>
+          @if (isValid) {
+            <mat-hint>{{ t('editor.json.valid', 'JSON valido') }}</mat-hint>
+          }
+          @if (!isValid && jsonText) {
+            <mat-error>{{ t('editor.json.invalidPrefix', 'JSON invalido:') }} {{ errorMsg }}</mat-error>
+          }
+        </mat-form-field>
+      </div>
+    </mat-tab>
+    
+    <mat-tab [label]="t('editor.tabs.style', 'Estilo')">
+      <div class="editor-section editor-section-lg">
+        <div class="editor-row">
+          <span class="editor-muted">{{ t('editor.presets.title', 'Presets:') }}</span>
+          <button mat-button color="primary" (click)="applyPreset('primary')">
+            <mat-icon [praxisIcon]="'palette'"></mat-icon>
+            {{ t('editor.presets.primary', 'Primario') }}
+          </button>
+          <button mat-button (click)="applyPreset('neutral')">
+            <mat-icon [praxisIcon]="'contrast'"></mat-icon>
+            {{ t('editor.presets.neutral', 'Neutro') }}
+          </button>
+          <button mat-button (click)="applyPreset('high-contrast')">
+            <mat-icon [praxisIcon]="'visibility'"></mat-icon>
+            {{ t('editor.presets.highContrast', 'Alto contraste') }}
+          </button>
+          <button mat-button (click)="clearTokens()">
+            <mat-icon [praxisIcon]="'backspace'"></mat-icon>
+            {{ t('editor.actions.clearTokens', 'Limpar tokens') }}
+          </button>
+        </div>
+    
+        <div class="editor-grid two tight">
+          <mat-form-field appearance="outline">
+            <mat-label>{{ t('editor.fields.themeClass', 'Classe de tema (opcional)') }}</mat-label>
+            <input matInput [(ngModel)]="appearance.themeClass" (ngModelChange)="onAppearanceChange()" [placeholder]="t('editor.fields.placeholder.themeClass', 'ex.: tabs-accented')" />
+          </mat-form-field>
+    
+          <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-form-field>
+        </div>
+    
+        <div>
+          <div class="editor-title-row">
+            <h3 class="editor-title">{{ t('editor.sections.tokens', 'Tokens (Material 3)') }}</h3>
+            <button
+              mat-icon-button
+              class="help-icon-button"
+              type="button"
+              [matTooltip]="t('editor.hints.tokenValueHelp', 'Valores aceitam CSS vars ou cores hex/rgb.')"
+              matTooltipPosition="above"
               >
-                <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
-              </button>
-            </mat-form-field>
+              <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
+            </button>
           </div>
-          <div class="editor-row">
-            <mat-slide-toggle [(ngModel)]="nav.fitInkBarToContent" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.fitInkBarToContent', 'Indicador ajustado ao conteudo') }}</mat-slide-toggle>
-            <mat-slide-toggle [(ngModel)]="nav.disablePagination" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.disablePagination', 'Sem paginacao') }}</mat-slide-toggle>
-            <mat-slide-toggle [(ngModel)]="nav.disableRipple" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.disableRipple', 'Sem ripple') }}</mat-slide-toggle>
-            <mat-slide-toggle [(ngModel)]="nav.stretchTabs" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.stretchTabs', 'Esticar abas') }}</mat-slide-toggle>
+          <div class="editor-grid two">
+            @for (token of tokenList; track token) {
+              <mat-form-field appearance="outline">
+                <mat-label>{{ t(token.labelKey, token.fallback) }}</mat-label>
+                <input matInput [placeholder]="t('editor.placeholders.tokenValue', 'var(--md-sys-color-primary) / #RRGGBB')" [ngModel]="appearance.tokens?.[token.key]" (ngModelChange)="onTokenChange(token.key, $event)" />
+              </mat-form-field>
+            }
           </div>
         </div>
-      </mat-tab>
-      <mat-tab [label]="t('editor.tabs.json', 'JSON')">
-        <div class="editor-section">
-          <div class="editor-toolbar">
-            <button mat-button (click)="formatJson()" [disabled]="!isValid">
-              <mat-icon [praxisIcon]="'format_align_left'"></mat-icon>{{ t('editor.actions.format', 'Formatar') }}
-            </button>
-            <button mat-button (click)="reset()">
-              <mat-icon [praxisIcon]="'restart_alt'"></mat-icon>{{ t('editor.actions.reset', 'Resetar') }}
-            </button>
-          </div>
-
+    
+        <div>
+          <h3 class="editor-title">{{ t('editor.sections.customCss', 'CSS personalizado') }}</h3>
           <mat-form-field appearance="outline" class="json-textarea-field full">
-            <mat-label>{{ t('editor.fields.jsonConfig', 'Configuracao JSON') }}</mat-label>
-            <textarea
-              matInput
-              [(ngModel)]="jsonText"
-              (ngModelChange)="onJsonTextChange($event)"
-              rows="22"
-              spellcheck="false"
-              class="editor-json"
-            ></textarea>
-            <mat-hint *ngIf="isValid">{{ t('editor.json.valid', 'JSON valido') }}</mat-hint>
-            <mat-error *ngIf="!isValid && jsonText">{{ t('editor.json.invalidPrefix', 'JSON invalido:') }} {{ errorMsg }}</mat-error>
+            <mat-label>{{ t('editor.fields.customCss', 'CSS a ser injetado no componente') }}</mat-label>
+            <textarea matInput rows="10" [(ngModel)]="appearance.customCss" (ngModelChange)="onAppearanceChange()" [placeholder]="t('editor.placeholders.customCssExample', '.praxis-tabs-root .mdc-tab__text-label { font-weight: 600; }')"></textarea>
           </mat-form-field>
         </div>
-      </mat-tab>
-
-      <mat-tab [label]="t('editor.tabs.style', 'Estilo')">
-        <div class="editor-section editor-section-lg">
-          <div class="editor-row">
-            <span class="editor-muted">{{ t('editor.presets.title', 'Presets:') }}</span>
-            <button mat-button color="primary" (click)="applyPreset('primary')">
-              <mat-icon [praxisIcon]="'palette'"></mat-icon>
-              {{ t('editor.presets.primary', 'Primario') }}
-            </button>
-            <button mat-button (click)="applyPreset('neutral')">
-              <mat-icon [praxisIcon]="'contrast'"></mat-icon>
-              {{ t('editor.presets.neutral', 'Neutro') }}
-            </button>
-            <button mat-button (click)="applyPreset('high-contrast')">
-              <mat-icon [praxisIcon]="'visibility'"></mat-icon>
-              {{ t('editor.presets.highContrast', 'Alto contraste') }}
-            </button>
-            <button mat-button (click)="clearTokens()">
-              <mat-icon [praxisIcon]="'backspace'"></mat-icon>
-              {{ t('editor.actions.clearTokens', 'Limpar tokens') }}
-            </button>
-          </div>
-
-          <div class="editor-grid two tight">
-            <mat-form-field appearance="outline">
-              <mat-label>{{ t('editor.fields.themeClass', 'Classe de tema (opcional)') }}</mat-label>
-              <input matInput [(ngModel)]="appearance.themeClass" (ngModelChange)="onAppearanceChange()" [placeholder]="t('editor.fields.placeholder.themeClass', 'ex.: tabs-accented')" />
-            </mat-form-field>
-
-            <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-form-field>
-          </div>
-
-          <div>
-            <div class="editor-title-row">
-              <h3 class="editor-title">{{ t('editor.sections.tokens', 'Tokens (Material 3)') }}</h3>
-              <button
-                mat-icon-button
-                class="help-icon-button"
-                type="button"
-                [matTooltip]="t('editor.hints.tokenValueHelp', 'Valores aceitam CSS vars ou cores hex/rgb.')"
-                matTooltipPosition="above"
-              >
-                <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
-              </button>
-            </div>
-            <div class="editor-grid two">
-              <ng-container *ngFor="let token of tokenList">
-                <mat-form-field appearance="outline">
-                  <mat-label>{{ t(token.labelKey, token.fallback) }}</mat-label>
-                  <input matInput [placeholder]="t('editor.placeholders.tokenValue', 'var(--md-sys-color-primary) / #RRGGBB')" [ngModel]="appearance.tokens?.[token.key]" (ngModelChange)="onTokenChange(token.key, $event)" />
+    
+        <div>
+          <h3 class="editor-title">{{ t('editor.sections.scssSnippet', 'Snippet SCSS (para uso em styles.scss)') }}</h3>
+          <pre class="editor-code">
+            @use '@angular/material' as mat;
+            {{ scssSnippet() }}
+          </pre>
+        </div>
+      </div>
+    </mat-tab>
+    
+    <mat-tab [label]="t('editor.tabs.items', 'Abas')" [disabled]="primaryMode !== 'group'">
+      <div class="editor-section">
+        <button mat-stroked-button color="primary" (click)="addTab()"><mat-icon [praxisIcon]="'add'"></mat-icon>{{ t('editor.actions.addTab', 'Adicionar aba') }}</button>
+        @if (editedConfig.tabs?.length) {
+          <div class="editor-grid">
+            @for (tab of editedConfig.tabs; track tab; let i = $index) {
+              <div class="editor-card">
+                <div class="editor-card-header">
+                  <strong class="editor-card-title">{{ t('editor.cards.tab', 'Aba') }} #{{ i+1 }}</strong>
+                  <button mat-icon-button (click)="moveTab(i, -1)" [disabled]="i===0"><mat-icon [praxisIcon]="'arrow_upward'"></mat-icon></button>
+                  <button mat-icon-button (click)="moveTab(i, 1)" [disabled]="i===editedConfig.tabs!.length-1"><mat-icon [praxisIcon]="'arrow_downward'"></mat-icon></button>
+                  <button mat-icon-button color="warn" (click)="removeTab(i)"><mat-icon [praxisIcon]="'delete'"></mat-icon></button>
+                </div>
+                <div class="editor-grid two tight">
+                  <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.id', 'ID') }}</mat-label>
+                  <input matInput [(ngModel)]="tab.id" (ngModelChange)="onAppearanceChange()" />
                 </mat-form-field>
-              </ng-container>
-            </div>
-          </div>
-
-          <div>
-            <h3 class="editor-title">{{ t('editor.sections.customCss', 'CSS personalizado') }}</h3>
-            <mat-form-field appearance="outline" class="json-textarea-field full">
-              <mat-label>{{ t('editor.fields.customCss', 'CSS a ser injetado no componente') }}</mat-label>
-              <textarea matInput rows="10" [(ngModel)]="appearance.customCss" (ngModelChange)="onAppearanceChange()" [placeholder]="t('editor.placeholders.customCssExample', '.praxis-tabs-root .mdc-tab__text-label { font-weight: 600; }')"></textarea>
+                <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.label', 'Rotulo') }}</mat-label>
+                <input matInput [(ngModel)]="tab.textLabel" (ngModelChange)="onAppearanceChange()" />
+              </mat-form-field>
+              <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.icon', 'Icone') }}</mat-label>
+              <input matInput [(ngModel)]="tab.icon" (ngModelChange)="onAppearanceChange()" />
             </mat-form-field>
-          </div>
-
-          <div>
-            <h3 class="editor-title">{{ t('editor.sections.scssSnippet', 'Snippet SCSS (para uso em styles.scss)') }}</h3>
-            <pre class="editor-code">
-@use '@angular/material' as mat;
-{{ scssSnippet() }}
-            </pre>
-          </div>
-        </div>
-      </mat-tab>
-
-      <mat-tab [label]="t('editor.tabs.items', 'Abas')" [disabled]="primaryMode !== 'group'">
-        <div class="editor-section">
-          <button mat-stroked-button color="primary" (click)="addTab()"><mat-icon [praxisIcon]="'add'"></mat-icon>{{ t('editor.actions.addTab', 'Adicionar aba') }}</button>
-          <div *ngIf="editedConfig.tabs?.length; else noTabs" class="editor-grid">
-            <div *ngFor="let tab of editedConfig.tabs; let i = index" class="editor-card">
+            <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.labelClass', 'Classe do rotulo') }}</mat-label>
+            <input matInput [(ngModel)]="tab.labelClass" (ngModelChange)="onAppearanceChange()" />
+          </mat-form-field>
+          <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.bodyClass', 'Classe do conteudo') }}</mat-label>
+          <input matInput [(ngModel)]="tab.bodyClass" (ngModelChange)="onAppearanceChange()" />
+        </mat-form-field>
+        <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.ariaLabel', 'aria-label') }}</mat-label>
+        <input matInput [(ngModel)]="tab.ariaLabel" (ngModelChange)="onAppearanceChange()" />
+      </mat-form-field>
+      <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.ariaLabelledby', 'aria-labelledby') }}</mat-label>
+      <input matInput [(ngModel)]="tab.ariaLabelledby" (ngModelChange)="onAppearanceChange()" />
+    </mat-form-field>
+    </div>
+    <div class="editor-row">
+      <mat-slide-toggle [(ngModel)]="tab.disabled" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.disabled', 'Desativada') }}</mat-slide-toggle>
+      <mat-slide-toggle [ngModel]="tab.visible !== false" (ngModelChange)="tab.visible = $event; onAppearanceChange()">{{ t('editor.toggles.visible', 'Visivel') }}</mat-slide-toggle>
+    </div>
+    <!-- Widgets (componentes dinâmicos) -->
+    <div class="editor-divider editor-grid">
+      <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>
+            @for (c of componentOptions; track c) {
+              <option [ngValue]="c.id">{{ c.friendlyName || c.id }}</option>
+            }
+          </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>
+        <mat-form-field appearance="outline" class="editor-field-240">
+          <mat-label>{{ t('editor.fields.resourcePath', 'Recurso (resourcePath)') }}</mat-label>
+          <input matInput [(ngModel)]="quickResourcePathTab[i]" [placeholder]="t('editor.fields.placeholder.resourcePath', 'ex.: usuarios')" />
+        </mat-form-field>
+        <button mat-button (click)="addPresetToTab(i, 'form')"><mat-icon [praxisIcon]="'description'"></mat-icon>{{ t('editor.templates.form', 'Form') }}</button>
+        <button mat-button (click)="addPresetToTab(i, 'table')"><mat-icon [praxisIcon]="'grid_on'"></mat-icon>{{ t('editor.templates.table', 'Tabela') }}</button>
+        <button mat-button (click)="addPresetToTab(i, 'crud')"><mat-icon [praxisIcon]="'dynamic_form'"></mat-icon>{{ t('editor.templates.crud', 'CRUD') }}</button>
+      </div>
+      @if (tab.widgets?.length) {
+        <div class="editor-grid" cdkDropList [cdkDropListData]="tab.widgets || []" (cdkDropListDropped)="onTabWidgetDrop(i, $event)">
+          @for (w of tab.widgets; track w; let wi = $index) {
+            <div cdkDrag class="editor-card dashed">
               <div class="editor-card-header">
-                <strong class="editor-card-title">{{ t('editor.cards.tab', 'Aba') }} #{{ i+1 }}</strong>
-                <button mat-icon-button (click)="moveTab(i, -1)" [disabled]="i===0"><mat-icon [praxisIcon]="'arrow_upward'"></mat-icon></button>
-                <button mat-icon-button (click)="moveTab(i, 1)" [disabled]="i===editedConfig.tabs!.length-1"><mat-icon [praxisIcon]="'arrow_downward'"></mat-icon></button>
-                <button mat-icon-button color="warn" (click)="removeTab(i)"><mat-icon [praxisIcon]="'delete'"></mat-icon></button>
+                <button mat-icon-button cdkDragHandle [matTooltip]="t('editor.actions.dragToReorder', 'Arrastar para reordenar')" [attr.aria-label]="t('editor.actions.dragToReorder', 'Arrastar para reordenar')">
+                  <mat-icon [praxisIcon]="'drag_indicator'"></mat-icon>
+                </button>
+                <strong class="editor-card-title">{{ getCompName(w.id) }}</strong>
+                <button mat-icon-button color="warn" (click)="removeWidgetFromTab(i, wi)" [matTooltip]="t('editor.actions.removeComponent', 'Remover componente')" [attr.aria-label]="t('editor.actions.removeComponent', 'Remover componente')"><mat-icon [praxisIcon]="'delete'"></mat-icon></button>
               </div>
               <div class="editor-grid two tight">
-                <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.id', 'ID') }}</mat-label>
-                  <input matInput [(ngModel)]="tab.id" (ngModelChange)="onAppearanceChange()" />
-                </mat-form-field>
-                <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.label', 'Rotulo') }}</mat-label>
-                  <input matInput [(ngModel)]="tab.textLabel" (ngModelChange)="onAppearanceChange()" />
-                </mat-form-field>
-                <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.icon', 'Icone') }}</mat-label>
-                  <input matInput [(ngModel)]="tab.icon" (ngModelChange)="onAppearanceChange()" />
-                </mat-form-field>
-                <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.labelClass', 'Classe do rotulo') }}</mat-label>
-                  <input matInput [(ngModel)]="tab.labelClass" (ngModelChange)="onAppearanceChange()" />
-                </mat-form-field>
-                <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.bodyClass', 'Classe do conteudo') }}</mat-label>
-                  <input matInput [(ngModel)]="tab.bodyClass" (ngModelChange)="onAppearanceChange()" />
-                </mat-form-field>
-            <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.ariaLabel', 'aria-label') }}</mat-label>
-                  <input matInput [(ngModel)]="tab.ariaLabel" (ngModelChange)="onAppearanceChange()" />
+                <mat-form-field appearance="outline">
+                  <mat-label>{{ t('editor.fields.inputsJson', 'Inputs (JSON)') }}</mat-label>
+                  <textarea matInput rows="4" [ngModel]="stringify(w.inputs)" (ngModelChange)="updateWidgetInputsTab(i, wi, $event)"></textarea>
                 </mat-form-field>
-            <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.ariaLabelledby', 'aria-labelledby') }}</mat-label>
-                  <input matInput [(ngModel)]="tab.ariaLabelledby" (ngModelChange)="onAppearanceChange()" />
+                <mat-form-field appearance="outline">
+                  <mat-label>{{ t('editor.fields.outputsJson', 'Outputs (JSON)') }}</mat-label>
+                  <textarea matInput rows="4" [ngModel]="stringify(w.outputs)" (ngModelChange)="updateWidgetOutputsTab(i, wi, $event)"></textarea>
                 </mat-form-field>
               </div>
-              <div class="editor-row">
-                <mat-slide-toggle [(ngModel)]="tab.disabled" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.disabled', 'Desativada') }}</mat-slide-toggle>
-                <mat-slide-toggle [ngModel]="tab.visible !== false" (ngModelChange)="tab.visible = $event; onAppearanceChange()">{{ t('editor.toggles.visible', 'Visivel') }}</mat-slide-toggle>
-              </div>
-
-              <!-- Widgets (componentes dinâmicos) -->
-              <div class="editor-divider editor-grid">
-                <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>
-                      <option *ngFor="let c of componentOptions" [ngValue]="c.id">{{ c.friendlyName || c.id }}</option>
-                    </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>
-                  <mat-form-field appearance="outline" class="editor-field-240">
-                    <mat-label>{{ t('editor.fields.resourcePath', 'Recurso (resourcePath)') }}</mat-label>
-                    <input matInput [(ngModel)]="quickResourcePathTab[i]" [placeholder]="t('editor.fields.placeholder.resourcePath', 'ex.: usuarios')" />
-                  </mat-form-field>
-                  <button mat-button (click)="addPresetToTab(i, 'form')"><mat-icon [praxisIcon]="'description'"></mat-icon>{{ t('editor.templates.form', 'Form') }}</button>
-                  <button mat-button (click)="addPresetToTab(i, 'table')"><mat-icon [praxisIcon]="'grid_on'"></mat-icon>{{ t('editor.templates.table', 'Tabela') }}</button>
-                  <button mat-button (click)="addPresetToTab(i, 'crud')"><mat-icon [praxisIcon]="'dynamic_form'"></mat-icon>{{ t('editor.templates.crud', 'CRUD') }}</button>
-                </div>
-
-              <div *ngIf="tab.widgets?.length" class="editor-grid" cdkDropList [cdkDropListData]="tab.widgets || []" (cdkDropListDropped)="onTabWidgetDrop(i, $event)">
-                <div *ngFor="let w of tab.widgets; let wi = index" cdkDrag class="editor-card dashed">
-                    <div class="editor-card-header">
-                      <button mat-icon-button cdkDragHandle [matTooltip]="t('editor.actions.dragToReorder', 'Arrastar para reordenar')" [attr.aria-label]="t('editor.actions.dragToReorder', 'Arrastar para reordenar')">
-                        <mat-icon [praxisIcon]="'drag_indicator'"></mat-icon>
-                      </button>
-                      <strong class="editor-card-title">{{ getCompName(w.id) }}</strong>
-                      <button mat-icon-button color="warn" (click)="removeWidgetFromTab(i, wi)" [matTooltip]="t('editor.actions.removeComponent', 'Remover componente')" [attr.aria-label]="t('editor.actions.removeComponent', 'Remover componente')"><mat-icon [praxisIcon]="'delete'"></mat-icon></button>
-                    </div>
-                    <div class="editor-grid two tight">
-                      <mat-form-field appearance="outline">
-                        <mat-label>{{ t('editor.fields.inputsJson', 'Inputs (JSON)') }}</mat-label>
-                        <textarea matInput rows="4" [ngModel]="stringify(w.inputs)" (ngModelChange)="updateWidgetInputsTab(i, wi, $event)"></textarea>
-                      </mat-form-field>
-                      <mat-form-field appearance="outline">
-                        <mat-label>{{ t('editor.fields.outputsJson', 'Outputs (JSON)') }}</mat-label>
-                        <textarea matInput rows="4" [ngModel]="stringify(w.outputs)" (ngModelChange)="updateWidgetOutputsTab(i, wi, $event)"></textarea>
-                      </mat-form-field>
-                    </div>
-                  </div>
-                </div>
-              </div>
             </div>
-          </div>
-          <ng-template #noTabs><em class="editor-muted">{{ t('editor.empty.noTabs', 'Nenhuma aba definida.') }}</em></ng-template>
+          }
         </div>
-      </mat-tab>
-
-      <mat-tab [label]="t('editor.tabs.accessibility', 'Acessibilidade')">
-        <div class="editor-section">
-          <div class="editor-row">
-            <mat-slide-toggle [(ngModel)]="accessibility.highContrast" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.highContrast', 'Alto contraste') }}</mat-slide-toggle>
-            <mat-slide-toggle [(ngModel)]="accessibility.reduceMotion" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.reduceMotion', 'Reduzir movimento') }}</mat-slide-toggle>
-          </div>
+      }
+    </div>
+    </div>
+    }
+    </div>
+    } @else {
+      <em class="editor-muted">{{ t('editor.empty.noTabs', 'Nenhuma aba definida.') }}</em>
+    }
+    </div>
+    </mat-tab>
+    
+    <mat-tab [label]="t('editor.tabs.accessibility', 'Acessibilidade')">
+      <div class="editor-section">
+        <div class="editor-row">
+          <mat-slide-toggle [(ngModel)]="accessibility.highContrast" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.highContrast', 'Alto contraste') }}</mat-slide-toggle>
+          <mat-slide-toggle [(ngModel)]="accessibility.reduceMotion" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.reduceMotion', 'Reduzir movimento') }}</mat-slide-toggle>
         </div>
-      </mat-tab>
-
-      <mat-tab [label]="t('editor.tabs.links', 'Links')" [disabled]="primaryMode !== 'nav'">
-        <div class="editor-section">
-          <button mat-stroked-button color="primary" (click)="addLink()"><mat-icon [praxisIcon]="'add_link'"></mat-icon>{{ t('editor.actions.addLink', 'Adicionar link') }}</button>
-          <div *ngIf="nav.links?.length; else noLinks" class="editor-grid">
-            <div *ngFor="let l of nav.links; let i = index" class="editor-card">
-              <div class="editor-card-header">
-                <strong class="editor-card-title">{{ t('editor.cards.link', 'Link') }} #{{ i+1 }}</strong>
-                <button mat-icon-button (click)="moveLink(i, -1)" [disabled]="i===0"><mat-icon [praxisIcon]="'arrow_upward'"></mat-icon></button>
-                <button mat-icon-button (click)="moveLink(i, 1)" [disabled]="i===nav.links!.length-1"><mat-icon [praxisIcon]="'arrow_downward'"></mat-icon></button>
-                <button mat-icon-button color="warn" (click)="removeLink(i)"><mat-icon [praxisIcon]="'delete'"></mat-icon></button>
-              </div>
-              <div class="editor-grid two tight">
-                <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.id', 'ID') }}</mat-label>
+      </div>
+    </mat-tab>
+    
+    <mat-tab [label]="t('editor.tabs.links', 'Links')" [disabled]="primaryMode !== 'nav'">
+      <div class="editor-section">
+        <button mat-stroked-button color="primary" (click)="addLink()"><mat-icon [praxisIcon]="'add_link'"></mat-icon>{{ t('editor.actions.addLink', 'Adicionar link') }}</button>
+        @if (nav.links?.length) {
+          <div class="editor-grid">
+            @for (l of nav.links; track l; let i = $index) {
+              <div class="editor-card">
+                <div class="editor-card-header">
+                  <strong class="editor-card-title">{{ t('editor.cards.link', 'Link') }} #{{ i+1 }}</strong>
+                  <button mat-icon-button (click)="moveLink(i, -1)" [disabled]="i===0"><mat-icon [praxisIcon]="'arrow_upward'"></mat-icon></button>
+                  <button mat-icon-button (click)="moveLink(i, 1)" [disabled]="i===nav.links!.length-1"><mat-icon [praxisIcon]="'arrow_downward'"></mat-icon></button>
+                  <button mat-icon-button color="warn" (click)="removeLink(i)"><mat-icon [praxisIcon]="'delete'"></mat-icon></button>
+                </div>
+                <div class="editor-grid two tight">
+                  <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.id', 'ID') }}</mat-label>
                   <input matInput [(ngModel)]="l.id" (ngModelChange)="onAppearanceChange()" />
                 </mat-form-field>
                 <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.label', 'Rotulo') }}</mat-label>
-                  <input matInput [(ngModel)]="l.label" (ngModelChange)="onAppearanceChange()" />
-                </mat-form-field>
-                <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.icon', 'Icone') }}</mat-label>
-                  <input matInput [(ngModel)]="l.icon" (ngModelChange)="onAppearanceChange()" />
-                </mat-form-field>
-              </div>
-              <div class="editor-row">
-                <mat-slide-toggle [(ngModel)]="l.disabled" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.linkDisabled', 'Desativado') }}</mat-slide-toggle>
-                <mat-slide-toggle [ngModel]="l.visible !== false" (ngModelChange)="l.visible = $event; onAppearanceChange()">{{ t('editor.toggles.visible', 'Visivel') }}</mat-slide-toggle>
-                <mat-slide-toggle [(ngModel)]="l.disableRipple" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.disableRipple', 'Sem ripple') }}</mat-slide-toggle>
-                <mat-slide-toggle [(ngModel)]="l.fitInkBarToContent" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.fitInkBarToContent', 'Indicador ajustado ao conteudo') }}</mat-slide-toggle>
-              </div>
-
-              <!-- Widgets para Links -->
-              <div class="editor-divider editor-grid">
-                <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>
-                      <option *ngFor="let c of componentOptions" [ngValue]="c.id">{{ c.friendlyName || c.id }}</option>
-                    </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>
-                  <mat-form-field appearance="outline" class="editor-field-240">
-                    <mat-label>{{ t('editor.fields.resourcePath', 'Recurso (resourcePath)') }}</mat-label>
-                    <input matInput [(ngModel)]="quickResourcePathLink[i]" [placeholder]="t('editor.fields.placeholder.resourcePath', 'ex.: usuarios')" />
-                  </mat-form-field>
-                  <button mat-button (click)="addPresetToLink(i, 'form')"><mat-icon [praxisIcon]="'description'"></mat-icon>{{ t('editor.templates.form', 'Form') }}</button>
-                  <button mat-button (click)="addPresetToLink(i, 'table')"><mat-icon [praxisIcon]="'grid_on'"></mat-icon>{{ t('editor.templates.table', 'Tabela') }}</button>
-                  <button mat-button (click)="addPresetToLink(i, 'crud')"><mat-icon [praxisIcon]="'dynamic_form'"></mat-icon>{{ t('editor.templates.crud', 'CRUD') }}</button>
-                </div>
-
-                <div *ngIf="l.widgets?.length" class="editor-grid" cdkDropList [cdkDropListData]="l.widgets || []" (cdkDropListDropped)="onLinkWidgetDrop(i, $event)">
-                  <div *ngFor="let w of l.widgets; let wi = index" cdkDrag class="editor-card dashed">
+                <input matInput [(ngModel)]="l.label" (ngModelChange)="onAppearanceChange()" />
+              </mat-form-field>
+              <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.icon', 'Icone') }}</mat-label>
+              <input matInput [(ngModel)]="l.icon" (ngModelChange)="onAppearanceChange()" />
+            </mat-form-field>
+          </div>
+          <div class="editor-row">
+            <mat-slide-toggle [(ngModel)]="l.disabled" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.linkDisabled', 'Desativado') }}</mat-slide-toggle>
+            <mat-slide-toggle [ngModel]="l.visible !== false" (ngModelChange)="l.visible = $event; onAppearanceChange()">{{ t('editor.toggles.visible', 'Visivel') }}</mat-slide-toggle>
+            <mat-slide-toggle [(ngModel)]="l.disableRipple" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.disableRipple', 'Sem ripple') }}</mat-slide-toggle>
+            <mat-slide-toggle [(ngModel)]="l.fitInkBarToContent" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.fitInkBarToContent', 'Indicador ajustado ao conteudo') }}</mat-slide-toggle>
+          </div>
+          <!-- Widgets para Links -->
+          <div class="editor-divider editor-grid">
+            <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>
+                  @for (c of componentOptions; track c) {
+                    <option [ngValue]="c.id">{{ c.friendlyName || c.id }}</option>
+                  }
+                </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>
+              <mat-form-field appearance="outline" class="editor-field-240">
+                <mat-label>{{ t('editor.fields.resourcePath', 'Recurso (resourcePath)') }}</mat-label>
+                <input matInput [(ngModel)]="quickResourcePathLink[i]" [placeholder]="t('editor.fields.placeholder.resourcePath', 'ex.: usuarios')" />
+              </mat-form-field>
+              <button mat-button (click)="addPresetToLink(i, 'form')"><mat-icon [praxisIcon]="'description'"></mat-icon>{{ t('editor.templates.form', 'Form') }}</button>
+              <button mat-button (click)="addPresetToLink(i, 'table')"><mat-icon [praxisIcon]="'grid_on'"></mat-icon>{{ t('editor.templates.table', 'Tabela') }}</button>
+              <button mat-button (click)="addPresetToLink(i, 'crud')"><mat-icon [praxisIcon]="'dynamic_form'"></mat-icon>{{ t('editor.templates.crud', 'CRUD') }}</button>
+            </div>
+            @if (l.widgets?.length) {
+              <div class="editor-grid" cdkDropList [cdkDropListData]="l.widgets || []" (cdkDropListDropped)="onLinkWidgetDrop(i, $event)">
+                @for (w of l.widgets; track w; let wi = $index) {
+                  <div cdkDrag class="editor-card dashed">
                     <div class="editor-card-header">
                       <button mat-icon-button cdkDragHandle [matTooltip]="t('editor.actions.dragToReorder', 'Arrastar para reordenar')" [attr.aria-label]="t('editor.actions.dragToReorder', 'Arrastar para reordenar')">
                         <mat-icon [praxisIcon]="'drag_indicator'"></mat-icon>
@@ -1470,21 +1492,25 @@ class PraxisTabsConfigEditor {
                       </mat-form-field>
                     </div>
                   </div>
-                </div>
+                }
               </div>
-            </div>
+            }
           </div>
-          <ng-template #noLinks><em class="editor-muted">{{ t('editor.empty.noLinks', 'Nenhum link definido.') }}</em></ng-template>
         </div>
-      </mat-tab>
+      }
+    </div>
+    } @else {
+      <em class="editor-muted">{{ t('editor.empty.noLinks', 'Nenhum link definido.') }}</em>
+    }
+    </div>
+    </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}.help-icon-button{--mdc-icon-button-state-layer-size: 28px;--mdc-icon-button-icon-size: 18px;width:28px;height:28px;padding:0;display:inline-flex;align-items:center;justify-content:center;margin-right:-4px}.help-icon-button mat-icon{font-size:18px;width:18px;height:18px}.mat-mdc-form-field-icon-suffix{align-self:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.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: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i3$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i3$1.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: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.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: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }, { 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: "component", type: i6$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", 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"] }] });
+    `, 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}.help-icon-button{--mdc-icon-button-state-layer-size: 28px;--mdc-icon-button-icon-size: 18px;width:28px;height:28px;padding:0;display:inline-flex;align-items:center;justify-content:center;margin-right:-4px}.help-icon-button mat-icon{font-size:18px;width:18px;height:18px}.mat-mdc-form-field-icon-suffix{align-self:center}\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: "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: "component", type: i6.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", 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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisTabsConfigEditor, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisTabsConfigEditor, decorators: [{
             type: Component,
             args: [{ selector: 'praxis-tabs-config-editor', standalone: true, imports: [
-                        CommonModule,
                         FormsModule,
                         MatTabsModule,
                         MatFormFieldModule,
@@ -1494,7 +1520,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                         MatButtonModule,
                         MatSlideToggleModule,
                         DragDropModule,
-                        MatTooltipModule,
+                        MatTooltipModule
                     ], providers: [providePraxisI18nConfig(PRAXIS_TABS_I18N_CONFIG)], template: `
     <div class="editor-shell">
       <div class="editor-topbar">
@@ -1506,36 +1532,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
           </select>
         </mat-form-field>
       </div>
-
-      <div *ngIf="diagnostics.length" class="editor-diagnostics">
-        <div class="editor-diagnostics-title">{{ t('editor.diagnostics.title', 'Diagnosticos de authoring') }}</div>
-        <div
-          *ngFor="let diagnostic of diagnostics"
-          class="editor-diagnostic"
-          [class.level-error]="diagnostic.level === 'error'"
-          [class.level-warning]="diagnostic.level === 'warning'"
-          [class.level-info]="diagnostic.level === 'info'"
-        >
-          <strong>{{ diagnosticLevelLabel(diagnostic.level) }}</strong>
-          <span>{{ diagnostic.message }}</span>
-          <code *ngIf="diagnostic.path">{{ diagnostic.path }}</code>
+    
+      @if (diagnostics.length) {
+        <div class="editor-diagnostics">
+          <div class="editor-diagnostics-title">{{ t('editor.diagnostics.title', 'Diagnosticos de authoring') }}</div>
+          @for (diagnostic of diagnostics; track diagnostic) {
+            <div
+              class="editor-diagnostic"
+              [class.level-error]="diagnostic.level === 'error'"
+              [class.level-warning]="diagnostic.level === 'warning'"
+              [class.level-info]="diagnostic.level === 'info'"
+              >
+              <strong>{{ diagnosticLevelLabel(diagnostic.level) }}</strong>
+              <span>{{ diagnostic.message }}</span>
+              @if (diagnostic.path) {
+                <code>{{ diagnostic.path }}</code>
+              }
+            </div>
+          }
         </div>
-      </div>
-
-    <mat-tab-group class="editor-tabs">
-      <mat-tab [label]="t('editor.tabs.behavior', 'Comportamento')">
-        <div class="editor-section">
-          <div class="editor-row">
-            <mat-slide-toggle [(ngModel)]="behavior.closeable" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.closeable', 'Fechavel') }}</mat-slide-toggle>
-            <mat-slide-toggle [(ngModel)]="behavior.lazyLoad" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.lazyLoad', 'Carregar sob demanda') }}</mat-slide-toggle>
-            <mat-slide-toggle [(ngModel)]="behavior.reorderable" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.reorderable', 'Reordenavel') }}</mat-slide-toggle>
+      }
+    
+      <mat-tab-group class="editor-tabs">
+        <mat-tab [label]="t('editor.tabs.behavior', 'Comportamento')">
+          <div class="editor-section">
+            <div class="editor-row">
+              <mat-slide-toggle [(ngModel)]="behavior.closeable" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.closeable', 'Fechavel') }}</mat-slide-toggle>
+              <mat-slide-toggle [(ngModel)]="behavior.lazyLoad" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.lazyLoad', 'Carregar sob demanda') }}</mat-slide-toggle>
+              <mat-slide-toggle [(ngModel)]="behavior.reorderable" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.reorderable', 'Reordenavel') }}</mat-slide-toggle>
+            </div>
           </div>
-        </div>
-      </mat-tab>
-      <mat-tab [label]="t('editor.tabs.group', 'Grupo')" [disabled]="primaryMode !== 'group'">
-        <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>
+        </mat-tab>
+        <mat-tab [label]="t('editor.tabs.group', 'Grupo')" [disabled]="primaryMode !== 'group'">
+          <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>
@@ -1544,428 +1575,445 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
               </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-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()" />
-              <button
-                mat-icon-button
-                matSuffix
-                class="help-icon-button"
-                type="button"
-                [matTooltip]="t('editor.hints.selectedIndex', 'selectedIndex')"
-                matTooltipPosition="above"
-              >
-                <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
-              </button>
-            </mat-form-field>
-            <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.animationDuration', 'Duracao da animacao') }}</mat-label>
-              <input matInput [(ngModel)]="group.animationDuration" (ngModelChange)="onAppearanceChange()" [placeholder]="t('editor.fields.placeholder.animationDuration', '500ms')" />
-              <button
-                mat-icon-button
-                matSuffix
-                class="help-icon-button"
-                type="button"
-                [matTooltip]="t('editor.hints.animationDuration', 'animationDuration')"
-                matTooltipPosition="above"
-              >
-                <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
-              </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>
-              <button
-                mat-icon-button
-                matSuffix
-                class="help-icon-button"
-                type="button"
-                [matTooltip]="t('editor.hints.preferTokens', 'Preferir tokens em Estilo.')"
-                matTooltipPosition="above"
-              >
-                <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
-              </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>
-              <button
-                mat-icon-button
-                matSuffix
-                class="help-icon-button"
-                type="button"
-                [matTooltip]="t('editor.hints.preferTokens', 'Preferir tokens em Estilo.')"
-                matTooltipPosition="above"
-              >
-                <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
-              </button>
-            </mat-form-field>
-            <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.ariaLabel', 'aria-label') }}</mat-label>
-              <input matInput [(ngModel)]="group.ariaLabel" (ngModelChange)="onAppearanceChange()" />
-            </mat-form-field>
-            <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.ariaLabelledby', 'aria-labelledby') }}</mat-label>
-              <input matInput [(ngModel)]="group.ariaLabelledby" (ngModelChange)="onAppearanceChange()" />
-            </mat-form-field>
-          </div>
-          <div class="editor-row">
-            <mat-slide-toggle [(ngModel)]="group.dynamicHeight" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.dynamicHeight', 'Altura dinamica') }}</mat-slide-toggle>
-            <mat-slide-toggle [(ngModel)]="group.fitInkBarToContent" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.fitInkBarToContent', 'Indicador ajustado ao conteudo') }}</mat-slide-toggle>
-            <mat-slide-toggle [(ngModel)]="group.disablePagination" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.disablePagination', 'Sem paginacao') }}</mat-slide-toggle>
-            <mat-slide-toggle [(ngModel)]="group.disableRipple" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.disableRipple', 'Sem ripple') }}</mat-slide-toggle>
-            <mat-slide-toggle [(ngModel)]="group.preserveContent" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.preserveContent', 'Preservar conteudo') }}</mat-slide-toggle>
-            <mat-slide-toggle [(ngModel)]="group.stretchTabs" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.stretchTabs', 'Esticar abas') }}</mat-slide-toggle>
-          </div>
+            <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-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()" />
+          <button
+            mat-icon-button
+            matSuffix
+            class="help-icon-button"
+            type="button"
+            [matTooltip]="t('editor.hints.selectedIndex', 'selectedIndex')"
+            matTooltipPosition="above"
+            >
+            <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
+          </button>
+        </mat-form-field>
+        <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.animationDuration', 'Duracao da animacao') }}</mat-label>
+        <input matInput [(ngModel)]="group.animationDuration" (ngModelChange)="onAppearanceChange()" [placeholder]="t('editor.fields.placeholder.animationDuration', '500ms')" />
+        <button
+          mat-icon-button
+          matSuffix
+          class="help-icon-button"
+          type="button"
+          [matTooltip]="t('editor.hints.animationDuration', 'animationDuration')"
+          matTooltipPosition="above"
+          >
+          <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
+        </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>
+      <button
+        mat-icon-button
+        matSuffix
+        class="help-icon-button"
+        type="button"
+        [matTooltip]="t('editor.hints.preferTokens', 'Preferir tokens em Estilo.')"
+        matTooltipPosition="above"
+        >
+        <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
+      </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>
+    <button
+      mat-icon-button
+      matSuffix
+      class="help-icon-button"
+      type="button"
+      [matTooltip]="t('editor.hints.preferTokens', 'Preferir tokens em Estilo.')"
+      matTooltipPosition="above"
+      >
+      <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
+    </button>
+    </mat-form-field>
+    <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.ariaLabel', 'aria-label') }}</mat-label>
+    <input matInput [(ngModel)]="group.ariaLabel" (ngModelChange)="onAppearanceChange()" />
+    </mat-form-field>
+    <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.ariaLabelledby', 'aria-labelledby') }}</mat-label>
+    <input matInput [(ngModel)]="group.ariaLabelledby" (ngModelChange)="onAppearanceChange()" />
+    </mat-form-field>
+    </div>
+    <div class="editor-row">
+      <mat-slide-toggle [(ngModel)]="group.dynamicHeight" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.dynamicHeight', 'Altura dinamica') }}</mat-slide-toggle>
+      <mat-slide-toggle [(ngModel)]="group.fitInkBarToContent" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.fitInkBarToContent', 'Indicador ajustado ao conteudo') }}</mat-slide-toggle>
+      <mat-slide-toggle [(ngModel)]="group.disablePagination" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.disablePagination', 'Sem paginacao') }}</mat-slide-toggle>
+      <mat-slide-toggle [(ngModel)]="group.disableRipple" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.disableRipple', 'Sem ripple') }}</mat-slide-toggle>
+      <mat-slide-toggle [(ngModel)]="group.preserveContent" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.preserveContent', 'Preservar conteudo') }}</mat-slide-toggle>
+      <mat-slide-toggle [(ngModel)]="group.stretchTabs" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.stretchTabs', 'Esticar abas') }}</mat-slide-toggle>
+    </div>
+    </div>
+    </mat-tab>
+    
+    <mat-tab [label]="t('editor.tabs.nav', 'Navegacao')" [disabled]="primaryMode !== 'nav'">
+      <div class="editor-section">
+        <div class="editor-grid two">
+          <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.selectedIndex', 'Indice selecionado') }}</mat-label>
+          <input matInput type="number" [(ngModel)]="nav.selectedIndex" (ngModelChange)="onAppearanceChange()" />
+          <button
+            mat-icon-button
+            matSuffix
+            class="help-icon-button"
+            type="button"
+            [matTooltip]="t('editor.hints.selectedIndex', 'selectedIndex')"
+            matTooltipPosition="above"
+            >
+            <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
+          </button>
+        </mat-form-field>
+        <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.animationDuration', 'Duracao da animacao') }}</mat-label>
+        <input matInput [(ngModel)]="nav.animationDuration" (ngModelChange)="onAppearanceChange()" [placeholder]="t('editor.fields.placeholder.animationDuration', '500ms')" />
+        <button
+          mat-icon-button
+          matSuffix
+          class="help-icon-button"
+          type="button"
+          [matTooltip]="t('editor.hints.animationDuration', 'animationDuration')"
+          matTooltipPosition="above"
+          >
+          <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
+        </button>
+      </mat-form-field>
+      <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.ariaLabel', 'aria-label') }}</mat-label>
+      <input matInput [(ngModel)]="nav.ariaLabel" (ngModelChange)="onAppearanceChange()" />
+    </mat-form-field>
+    <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.ariaLabelledby', 'aria-labelledby') }}</mat-label>
+    <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>
+    <button
+      mat-icon-button
+      matSuffix
+      class="help-icon-button"
+      type="button"
+      [matTooltip]="t('editor.hints.preferTokens', 'Preferir tokens em Estilo.')"
+      matTooltipPosition="above"
+      >
+      <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
+    </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>
+    <button
+      mat-icon-button
+      matSuffix
+      class="help-icon-button"
+      type="button"
+      [matTooltip]="t('editor.hints.preferTokens', 'Preferir tokens em Estilo.')"
+      matTooltipPosition="above"
+      >
+      <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
+    </button>
+    </mat-form-field>
+    </div>
+    <div class="editor-row">
+      <mat-slide-toggle [(ngModel)]="nav.fitInkBarToContent" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.fitInkBarToContent', 'Indicador ajustado ao conteudo') }}</mat-slide-toggle>
+      <mat-slide-toggle [(ngModel)]="nav.disablePagination" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.disablePagination', 'Sem paginacao') }}</mat-slide-toggle>
+      <mat-slide-toggle [(ngModel)]="nav.disableRipple" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.disableRipple', 'Sem ripple') }}</mat-slide-toggle>
+      <mat-slide-toggle [(ngModel)]="nav.stretchTabs" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.stretchTabs', 'Esticar abas') }}</mat-slide-toggle>
+    </div>
+    </div>
+    </mat-tab>
+    <mat-tab [label]="t('editor.tabs.json', 'JSON')">
+      <div class="editor-section">
+        <div class="editor-toolbar">
+          <button mat-button (click)="formatJson()" [disabled]="!isValid">
+            <mat-icon [praxisIcon]="'format_align_left'"></mat-icon>{{ t('editor.actions.format', 'Formatar') }}
+          </button>
+          <button mat-button (click)="reset()">
+            <mat-icon [praxisIcon]="'restart_alt'"></mat-icon>{{ t('editor.actions.reset', 'Resetar') }}
+          </button>
         </div>
-      </mat-tab>
-
-      <mat-tab [label]="t('editor.tabs.nav', 'Navegacao')" [disabled]="primaryMode !== 'nav'">
-        <div class="editor-section">
-          <div class="editor-grid two">
-            <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.selectedIndex', 'Indice selecionado') }}</mat-label>
-              <input matInput type="number" [(ngModel)]="nav.selectedIndex" (ngModelChange)="onAppearanceChange()" />
-              <button
-                mat-icon-button
-                matSuffix
-                class="help-icon-button"
-                type="button"
-                [matTooltip]="t('editor.hints.selectedIndex', 'selectedIndex')"
-                matTooltipPosition="above"
-              >
-                <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
-              </button>
-            </mat-form-field>
-            <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.animationDuration', 'Duracao da animacao') }}</mat-label>
-              <input matInput [(ngModel)]="nav.animationDuration" (ngModelChange)="onAppearanceChange()" [placeholder]="t('editor.fields.placeholder.animationDuration', '500ms')" />
-              <button
-                mat-icon-button
-                matSuffix
-                class="help-icon-button"
-                type="button"
-                [matTooltip]="t('editor.hints.animationDuration', 'animationDuration')"
-                matTooltipPosition="above"
-              >
-                <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
-              </button>
-            </mat-form-field>
-            <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.ariaLabel', 'aria-label') }}</mat-label>
-              <input matInput [(ngModel)]="nav.ariaLabel" (ngModelChange)="onAppearanceChange()" />
-            </mat-form-field>
-            <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.ariaLabelledby', 'aria-labelledby') }}</mat-label>
-              <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>
-              <button
-                mat-icon-button
-                matSuffix
-                class="help-icon-button"
-                type="button"
-                [matTooltip]="t('editor.hints.preferTokens', 'Preferir tokens em Estilo.')"
-                matTooltipPosition="above"
-              >
-                <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
-              </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>
-              <button
-                mat-icon-button
-                matSuffix
-                class="help-icon-button"
-                type="button"
-                [matTooltip]="t('editor.hints.preferTokens', 'Preferir tokens em Estilo.')"
-                matTooltipPosition="above"
+    
+        <mat-form-field appearance="outline" class="json-textarea-field full">
+          <mat-label>{{ t('editor.fields.jsonConfig', 'Configuracao JSON') }}</mat-label>
+          <textarea
+            matInput
+            [(ngModel)]="jsonText"
+            (ngModelChange)="onJsonTextChange($event)"
+            rows="22"
+            spellcheck="false"
+            class="editor-json"
+          ></textarea>
+          @if (isValid) {
+            <mat-hint>{{ t('editor.json.valid', 'JSON valido') }}</mat-hint>
+          }
+          @if (!isValid && jsonText) {
+            <mat-error>{{ t('editor.json.invalidPrefix', 'JSON invalido:') }} {{ errorMsg }}</mat-error>
+          }
+        </mat-form-field>
+      </div>
+    </mat-tab>
+    
+    <mat-tab [label]="t('editor.tabs.style', 'Estilo')">
+      <div class="editor-section editor-section-lg">
+        <div class="editor-row">
+          <span class="editor-muted">{{ t('editor.presets.title', 'Presets:') }}</span>
+          <button mat-button color="primary" (click)="applyPreset('primary')">
+            <mat-icon [praxisIcon]="'palette'"></mat-icon>
+            {{ t('editor.presets.primary', 'Primario') }}
+          </button>
+          <button mat-button (click)="applyPreset('neutral')">
+            <mat-icon [praxisIcon]="'contrast'"></mat-icon>
+            {{ t('editor.presets.neutral', 'Neutro') }}
+          </button>
+          <button mat-button (click)="applyPreset('high-contrast')">
+            <mat-icon [praxisIcon]="'visibility'"></mat-icon>
+            {{ t('editor.presets.highContrast', 'Alto contraste') }}
+          </button>
+          <button mat-button (click)="clearTokens()">
+            <mat-icon [praxisIcon]="'backspace'"></mat-icon>
+            {{ t('editor.actions.clearTokens', 'Limpar tokens') }}
+          </button>
+        </div>
+    
+        <div class="editor-grid two tight">
+          <mat-form-field appearance="outline">
+            <mat-label>{{ t('editor.fields.themeClass', 'Classe de tema (opcional)') }}</mat-label>
+            <input matInput [(ngModel)]="appearance.themeClass" (ngModelChange)="onAppearanceChange()" [placeholder]="t('editor.fields.placeholder.themeClass', 'ex.: tabs-accented')" />
+          </mat-form-field>
+    
+          <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-form-field>
+        </div>
+    
+        <div>
+          <div class="editor-title-row">
+            <h3 class="editor-title">{{ t('editor.sections.tokens', 'Tokens (Material 3)') }}</h3>
+            <button
+              mat-icon-button
+              class="help-icon-button"
+              type="button"
+              [matTooltip]="t('editor.hints.tokenValueHelp', 'Valores aceitam CSS vars ou cores hex/rgb.')"
+              matTooltipPosition="above"
               >
-                <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
-              </button>
-            </mat-form-field>
+              <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
+            </button>
           </div>
-          <div class="editor-row">
-            <mat-slide-toggle [(ngModel)]="nav.fitInkBarToContent" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.fitInkBarToContent', 'Indicador ajustado ao conteudo') }}</mat-slide-toggle>
-            <mat-slide-toggle [(ngModel)]="nav.disablePagination" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.disablePagination', 'Sem paginacao') }}</mat-slide-toggle>
-            <mat-slide-toggle [(ngModel)]="nav.disableRipple" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.disableRipple', 'Sem ripple') }}</mat-slide-toggle>
-            <mat-slide-toggle [(ngModel)]="nav.stretchTabs" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.stretchTabs', 'Esticar abas') }}</mat-slide-toggle>
+          <div class="editor-grid two">
+            @for (token of tokenList; track token) {
+              <mat-form-field appearance="outline">
+                <mat-label>{{ t(token.labelKey, token.fallback) }}</mat-label>
+                <input matInput [placeholder]="t('editor.placeholders.tokenValue', 'var(--md-sys-color-primary) / #RRGGBB')" [ngModel]="appearance.tokens?.[token.key]" (ngModelChange)="onTokenChange(token.key, $event)" />
+              </mat-form-field>
+            }
           </div>
         </div>
-      </mat-tab>
-      <mat-tab [label]="t('editor.tabs.json', 'JSON')">
-        <div class="editor-section">
-          <div class="editor-toolbar">
-            <button mat-button (click)="formatJson()" [disabled]="!isValid">
-              <mat-icon [praxisIcon]="'format_align_left'"></mat-icon>{{ t('editor.actions.format', 'Formatar') }}
-            </button>
-            <button mat-button (click)="reset()">
-              <mat-icon [praxisIcon]="'restart_alt'"></mat-icon>{{ t('editor.actions.reset', 'Resetar') }}
-            </button>
-          </div>
-
+    
+        <div>
+          <h3 class="editor-title">{{ t('editor.sections.customCss', 'CSS personalizado') }}</h3>
           <mat-form-field appearance="outline" class="json-textarea-field full">
-            <mat-label>{{ t('editor.fields.jsonConfig', 'Configuracao JSON') }}</mat-label>
-            <textarea
-              matInput
-              [(ngModel)]="jsonText"
-              (ngModelChange)="onJsonTextChange($event)"
-              rows="22"
-              spellcheck="false"
-              class="editor-json"
-            ></textarea>
-            <mat-hint *ngIf="isValid">{{ t('editor.json.valid', 'JSON valido') }}</mat-hint>
-            <mat-error *ngIf="!isValid && jsonText">{{ t('editor.json.invalidPrefix', 'JSON invalido:') }} {{ errorMsg }}</mat-error>
+            <mat-label>{{ t('editor.fields.customCss', 'CSS a ser injetado no componente') }}</mat-label>
+            <textarea matInput rows="10" [(ngModel)]="appearance.customCss" (ngModelChange)="onAppearanceChange()" [placeholder]="t('editor.placeholders.customCssExample', '.praxis-tabs-root .mdc-tab__text-label { font-weight: 600; }')"></textarea>
           </mat-form-field>
         </div>
-      </mat-tab>
-
-      <mat-tab [label]="t('editor.tabs.style', 'Estilo')">
-        <div class="editor-section editor-section-lg">
-          <div class="editor-row">
-            <span class="editor-muted">{{ t('editor.presets.title', 'Presets:') }}</span>
-            <button mat-button color="primary" (click)="applyPreset('primary')">
-              <mat-icon [praxisIcon]="'palette'"></mat-icon>
-              {{ t('editor.presets.primary', 'Primario') }}
-            </button>
-            <button mat-button (click)="applyPreset('neutral')">
-              <mat-icon [praxisIcon]="'contrast'"></mat-icon>
-              {{ t('editor.presets.neutral', 'Neutro') }}
-            </button>
-            <button mat-button (click)="applyPreset('high-contrast')">
-              <mat-icon [praxisIcon]="'visibility'"></mat-icon>
-              {{ t('editor.presets.highContrast', 'Alto contraste') }}
-            </button>
-            <button mat-button (click)="clearTokens()">
-              <mat-icon [praxisIcon]="'backspace'"></mat-icon>
-              {{ t('editor.actions.clearTokens', 'Limpar tokens') }}
-            </button>
-          </div>
-
-          <div class="editor-grid two tight">
-            <mat-form-field appearance="outline">
-              <mat-label>{{ t('editor.fields.themeClass', 'Classe de tema (opcional)') }}</mat-label>
-              <input matInput [(ngModel)]="appearance.themeClass" (ngModelChange)="onAppearanceChange()" [placeholder]="t('editor.fields.placeholder.themeClass', 'ex.: tabs-accented')" />
-            </mat-form-field>
-
-            <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-form-field>
-          </div>
-
-          <div>
-            <div class="editor-title-row">
-              <h3 class="editor-title">{{ t('editor.sections.tokens', 'Tokens (Material 3)') }}</h3>
-              <button
-                mat-icon-button
-                class="help-icon-button"
-                type="button"
-                [matTooltip]="t('editor.hints.tokenValueHelp', 'Valores aceitam CSS vars ou cores hex/rgb.')"
-                matTooltipPosition="above"
-              >
-                <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
-              </button>
-            </div>
-            <div class="editor-grid two">
-              <ng-container *ngFor="let token of tokenList">
-                <mat-form-field appearance="outline">
-                  <mat-label>{{ t(token.labelKey, token.fallback) }}</mat-label>
-                  <input matInput [placeholder]="t('editor.placeholders.tokenValue', 'var(--md-sys-color-primary) / #RRGGBB')" [ngModel]="appearance.tokens?.[token.key]" (ngModelChange)="onTokenChange(token.key, $event)" />
+    
+        <div>
+          <h3 class="editor-title">{{ t('editor.sections.scssSnippet', 'Snippet SCSS (para uso em styles.scss)') }}</h3>
+          <pre class="editor-code">
+            @use '@angular/material' as mat;
+            {{ scssSnippet() }}
+          </pre>
+        </div>
+      </div>
+    </mat-tab>
+    
+    <mat-tab [label]="t('editor.tabs.items', 'Abas')" [disabled]="primaryMode !== 'group'">
+      <div class="editor-section">
+        <button mat-stroked-button color="primary" (click)="addTab()"><mat-icon [praxisIcon]="'add'"></mat-icon>{{ t('editor.actions.addTab', 'Adicionar aba') }}</button>
+        @if (editedConfig.tabs?.length) {
+          <div class="editor-grid">
+            @for (tab of editedConfig.tabs; track tab; let i = $index) {
+              <div class="editor-card">
+                <div class="editor-card-header">
+                  <strong class="editor-card-title">{{ t('editor.cards.tab', 'Aba') }} #{{ i+1 }}</strong>
+                  <button mat-icon-button (click)="moveTab(i, -1)" [disabled]="i===0"><mat-icon [praxisIcon]="'arrow_upward'"></mat-icon></button>
+                  <button mat-icon-button (click)="moveTab(i, 1)" [disabled]="i===editedConfig.tabs!.length-1"><mat-icon [praxisIcon]="'arrow_downward'"></mat-icon></button>
+                  <button mat-icon-button color="warn" (click)="removeTab(i)"><mat-icon [praxisIcon]="'delete'"></mat-icon></button>
+                </div>
+                <div class="editor-grid two tight">
+                  <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.id', 'ID') }}</mat-label>
+                  <input matInput [(ngModel)]="tab.id" (ngModelChange)="onAppearanceChange()" />
                 </mat-form-field>
-              </ng-container>
-            </div>
-          </div>
-
-          <div>
-            <h3 class="editor-title">{{ t('editor.sections.customCss', 'CSS personalizado') }}</h3>
-            <mat-form-field appearance="outline" class="json-textarea-field full">
-              <mat-label>{{ t('editor.fields.customCss', 'CSS a ser injetado no componente') }}</mat-label>
-              <textarea matInput rows="10" [(ngModel)]="appearance.customCss" (ngModelChange)="onAppearanceChange()" [placeholder]="t('editor.placeholders.customCssExample', '.praxis-tabs-root .mdc-tab__text-label { font-weight: 600; }')"></textarea>
+                <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.label', 'Rotulo') }}</mat-label>
+                <input matInput [(ngModel)]="tab.textLabel" (ngModelChange)="onAppearanceChange()" />
+              </mat-form-field>
+              <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.icon', 'Icone') }}</mat-label>
+              <input matInput [(ngModel)]="tab.icon" (ngModelChange)="onAppearanceChange()" />
             </mat-form-field>
-          </div>
-
-          <div>
-            <h3 class="editor-title">{{ t('editor.sections.scssSnippet', 'Snippet SCSS (para uso em styles.scss)') }}</h3>
-            <pre class="editor-code">
-@use '@angular/material' as mat;
-{{ scssSnippet() }}
-            </pre>
-          </div>
-        </div>
-      </mat-tab>
-
-      <mat-tab [label]="t('editor.tabs.items', 'Abas')" [disabled]="primaryMode !== 'group'">
-        <div class="editor-section">
-          <button mat-stroked-button color="primary" (click)="addTab()"><mat-icon [praxisIcon]="'add'"></mat-icon>{{ t('editor.actions.addTab', 'Adicionar aba') }}</button>
-          <div *ngIf="editedConfig.tabs?.length; else noTabs" class="editor-grid">
-            <div *ngFor="let tab of editedConfig.tabs; let i = index" class="editor-card">
+            <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.labelClass', 'Classe do rotulo') }}</mat-label>
+            <input matInput [(ngModel)]="tab.labelClass" (ngModelChange)="onAppearanceChange()" />
+          </mat-form-field>
+          <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.bodyClass', 'Classe do conteudo') }}</mat-label>
+          <input matInput [(ngModel)]="tab.bodyClass" (ngModelChange)="onAppearanceChange()" />
+        </mat-form-field>
+        <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.ariaLabel', 'aria-label') }}</mat-label>
+        <input matInput [(ngModel)]="tab.ariaLabel" (ngModelChange)="onAppearanceChange()" />
+      </mat-form-field>
+      <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.ariaLabelledby', 'aria-labelledby') }}</mat-label>
+      <input matInput [(ngModel)]="tab.ariaLabelledby" (ngModelChange)="onAppearanceChange()" />
+    </mat-form-field>
+    </div>
+    <div class="editor-row">
+      <mat-slide-toggle [(ngModel)]="tab.disabled" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.disabled', 'Desativada') }}</mat-slide-toggle>
+      <mat-slide-toggle [ngModel]="tab.visible !== false" (ngModelChange)="tab.visible = $event; onAppearanceChange()">{{ t('editor.toggles.visible', 'Visivel') }}</mat-slide-toggle>
+    </div>
+    <!-- Widgets (componentes dinâmicos) -->
+    <div class="editor-divider editor-grid">
+      <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>
+            @for (c of componentOptions; track c) {
+              <option [ngValue]="c.id">{{ c.friendlyName || c.id }}</option>
+            }
+          </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>
+        <mat-form-field appearance="outline" class="editor-field-240">
+          <mat-label>{{ t('editor.fields.resourcePath', 'Recurso (resourcePath)') }}</mat-label>
+          <input matInput [(ngModel)]="quickResourcePathTab[i]" [placeholder]="t('editor.fields.placeholder.resourcePath', 'ex.: usuarios')" />
+        </mat-form-field>
+        <button mat-button (click)="addPresetToTab(i, 'form')"><mat-icon [praxisIcon]="'description'"></mat-icon>{{ t('editor.templates.form', 'Form') }}</button>
+        <button mat-button (click)="addPresetToTab(i, 'table')"><mat-icon [praxisIcon]="'grid_on'"></mat-icon>{{ t('editor.templates.table', 'Tabela') }}</button>
+        <button mat-button (click)="addPresetToTab(i, 'crud')"><mat-icon [praxisIcon]="'dynamic_form'"></mat-icon>{{ t('editor.templates.crud', 'CRUD') }}</button>
+      </div>
+      @if (tab.widgets?.length) {
+        <div class="editor-grid" cdkDropList [cdkDropListData]="tab.widgets || []" (cdkDropListDropped)="onTabWidgetDrop(i, $event)">
+          @for (w of tab.widgets; track w; let wi = $index) {
+            <div cdkDrag class="editor-card dashed">
               <div class="editor-card-header">
-                <strong class="editor-card-title">{{ t('editor.cards.tab', 'Aba') }} #{{ i+1 }}</strong>
-                <button mat-icon-button (click)="moveTab(i, -1)" [disabled]="i===0"><mat-icon [praxisIcon]="'arrow_upward'"></mat-icon></button>
-                <button mat-icon-button (click)="moveTab(i, 1)" [disabled]="i===editedConfig.tabs!.length-1"><mat-icon [praxisIcon]="'arrow_downward'"></mat-icon></button>
-                <button mat-icon-button color="warn" (click)="removeTab(i)"><mat-icon [praxisIcon]="'delete'"></mat-icon></button>
+                <button mat-icon-button cdkDragHandle [matTooltip]="t('editor.actions.dragToReorder', 'Arrastar para reordenar')" [attr.aria-label]="t('editor.actions.dragToReorder', 'Arrastar para reordenar')">
+                  <mat-icon [praxisIcon]="'drag_indicator'"></mat-icon>
+                </button>
+                <strong class="editor-card-title">{{ getCompName(w.id) }}</strong>
+                <button mat-icon-button color="warn" (click)="removeWidgetFromTab(i, wi)" [matTooltip]="t('editor.actions.removeComponent', 'Remover componente')" [attr.aria-label]="t('editor.actions.removeComponent', 'Remover componente')"><mat-icon [praxisIcon]="'delete'"></mat-icon></button>
               </div>
               <div class="editor-grid two tight">
-                <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.id', 'ID') }}</mat-label>
-                  <input matInput [(ngModel)]="tab.id" (ngModelChange)="onAppearanceChange()" />
-                </mat-form-field>
-                <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.label', 'Rotulo') }}</mat-label>
-                  <input matInput [(ngModel)]="tab.textLabel" (ngModelChange)="onAppearanceChange()" />
-                </mat-form-field>
-                <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.icon', 'Icone') }}</mat-label>
-                  <input matInput [(ngModel)]="tab.icon" (ngModelChange)="onAppearanceChange()" />
-                </mat-form-field>
-                <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.labelClass', 'Classe do rotulo') }}</mat-label>
-                  <input matInput [(ngModel)]="tab.labelClass" (ngModelChange)="onAppearanceChange()" />
-                </mat-form-field>
-                <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.bodyClass', 'Classe do conteudo') }}</mat-label>
-                  <input matInput [(ngModel)]="tab.bodyClass" (ngModelChange)="onAppearanceChange()" />
-                </mat-form-field>
-            <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.ariaLabel', 'aria-label') }}</mat-label>
-                  <input matInput [(ngModel)]="tab.ariaLabel" (ngModelChange)="onAppearanceChange()" />
+                <mat-form-field appearance="outline">
+                  <mat-label>{{ t('editor.fields.inputsJson', 'Inputs (JSON)') }}</mat-label>
+                  <textarea matInput rows="4" [ngModel]="stringify(w.inputs)" (ngModelChange)="updateWidgetInputsTab(i, wi, $event)"></textarea>
                 </mat-form-field>
-            <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.ariaLabelledby', 'aria-labelledby') }}</mat-label>
-                  <input matInput [(ngModel)]="tab.ariaLabelledby" (ngModelChange)="onAppearanceChange()" />
+                <mat-form-field appearance="outline">
+                  <mat-label>{{ t('editor.fields.outputsJson', 'Outputs (JSON)') }}</mat-label>
+                  <textarea matInput rows="4" [ngModel]="stringify(w.outputs)" (ngModelChange)="updateWidgetOutputsTab(i, wi, $event)"></textarea>
                 </mat-form-field>
               </div>
-              <div class="editor-row">
-                <mat-slide-toggle [(ngModel)]="tab.disabled" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.disabled', 'Desativada') }}</mat-slide-toggle>
-                <mat-slide-toggle [ngModel]="tab.visible !== false" (ngModelChange)="tab.visible = $event; onAppearanceChange()">{{ t('editor.toggles.visible', 'Visivel') }}</mat-slide-toggle>
-              </div>
-
-              <!-- Widgets (componentes dinâmicos) -->
-              <div class="editor-divider editor-grid">
-                <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>
-                      <option *ngFor="let c of componentOptions" [ngValue]="c.id">{{ c.friendlyName || c.id }}</option>
-                    </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>
-                  <mat-form-field appearance="outline" class="editor-field-240">
-                    <mat-label>{{ t('editor.fields.resourcePath', 'Recurso (resourcePath)') }}</mat-label>
-                    <input matInput [(ngModel)]="quickResourcePathTab[i]" [placeholder]="t('editor.fields.placeholder.resourcePath', 'ex.: usuarios')" />
-                  </mat-form-field>
-                  <button mat-button (click)="addPresetToTab(i, 'form')"><mat-icon [praxisIcon]="'description'"></mat-icon>{{ t('editor.templates.form', 'Form') }}</button>
-                  <button mat-button (click)="addPresetToTab(i, 'table')"><mat-icon [praxisIcon]="'grid_on'"></mat-icon>{{ t('editor.templates.table', 'Tabela') }}</button>
-                  <button mat-button (click)="addPresetToTab(i, 'crud')"><mat-icon [praxisIcon]="'dynamic_form'"></mat-icon>{{ t('editor.templates.crud', 'CRUD') }}</button>
-                </div>
-
-              <div *ngIf="tab.widgets?.length" class="editor-grid" cdkDropList [cdkDropListData]="tab.widgets || []" (cdkDropListDropped)="onTabWidgetDrop(i, $event)">
-                <div *ngFor="let w of tab.widgets; let wi = index" cdkDrag class="editor-card dashed">
-                    <div class="editor-card-header">
-                      <button mat-icon-button cdkDragHandle [matTooltip]="t('editor.actions.dragToReorder', 'Arrastar para reordenar')" [attr.aria-label]="t('editor.actions.dragToReorder', 'Arrastar para reordenar')">
-                        <mat-icon [praxisIcon]="'drag_indicator'"></mat-icon>
-                      </button>
-                      <strong class="editor-card-title">{{ getCompName(w.id) }}</strong>
-                      <button mat-icon-button color="warn" (click)="removeWidgetFromTab(i, wi)" [matTooltip]="t('editor.actions.removeComponent', 'Remover componente')" [attr.aria-label]="t('editor.actions.removeComponent', 'Remover componente')"><mat-icon [praxisIcon]="'delete'"></mat-icon></button>
-                    </div>
-                    <div class="editor-grid two tight">
-                      <mat-form-field appearance="outline">
-                        <mat-label>{{ t('editor.fields.inputsJson', 'Inputs (JSON)') }}</mat-label>
-                        <textarea matInput rows="4" [ngModel]="stringify(w.inputs)" (ngModelChange)="updateWidgetInputsTab(i, wi, $event)"></textarea>
-                      </mat-form-field>
-                      <mat-form-field appearance="outline">
-                        <mat-label>{{ t('editor.fields.outputsJson', 'Outputs (JSON)') }}</mat-label>
-                        <textarea matInput rows="4" [ngModel]="stringify(w.outputs)" (ngModelChange)="updateWidgetOutputsTab(i, wi, $event)"></textarea>
-                      </mat-form-field>
-                    </div>
-                  </div>
-                </div>
-              </div>
             </div>
-          </div>
-          <ng-template #noTabs><em class="editor-muted">{{ t('editor.empty.noTabs', 'Nenhuma aba definida.') }}</em></ng-template>
+          }
         </div>
-      </mat-tab>
-
-      <mat-tab [label]="t('editor.tabs.accessibility', 'Acessibilidade')">
-        <div class="editor-section">
-          <div class="editor-row">
-            <mat-slide-toggle [(ngModel)]="accessibility.highContrast" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.highContrast', 'Alto contraste') }}</mat-slide-toggle>
-            <mat-slide-toggle [(ngModel)]="accessibility.reduceMotion" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.reduceMotion', 'Reduzir movimento') }}</mat-slide-toggle>
-          </div>
+      }
+    </div>
+    </div>
+    }
+    </div>
+    } @else {
+      <em class="editor-muted">{{ t('editor.empty.noTabs', 'Nenhuma aba definida.') }}</em>
+    }
+    </div>
+    </mat-tab>
+    
+    <mat-tab [label]="t('editor.tabs.accessibility', 'Acessibilidade')">
+      <div class="editor-section">
+        <div class="editor-row">
+          <mat-slide-toggle [(ngModel)]="accessibility.highContrast" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.highContrast', 'Alto contraste') }}</mat-slide-toggle>
+          <mat-slide-toggle [(ngModel)]="accessibility.reduceMotion" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.reduceMotion', 'Reduzir movimento') }}</mat-slide-toggle>
         </div>
-      </mat-tab>
-
-      <mat-tab [label]="t('editor.tabs.links', 'Links')" [disabled]="primaryMode !== 'nav'">
-        <div class="editor-section">
-          <button mat-stroked-button color="primary" (click)="addLink()"><mat-icon [praxisIcon]="'add_link'"></mat-icon>{{ t('editor.actions.addLink', 'Adicionar link') }}</button>
-          <div *ngIf="nav.links?.length; else noLinks" class="editor-grid">
-            <div *ngFor="let l of nav.links; let i = index" class="editor-card">
-              <div class="editor-card-header">
-                <strong class="editor-card-title">{{ t('editor.cards.link', 'Link') }} #{{ i+1 }}</strong>
-                <button mat-icon-button (click)="moveLink(i, -1)" [disabled]="i===0"><mat-icon [praxisIcon]="'arrow_upward'"></mat-icon></button>
-                <button mat-icon-button (click)="moveLink(i, 1)" [disabled]="i===nav.links!.length-1"><mat-icon [praxisIcon]="'arrow_downward'"></mat-icon></button>
-                <button mat-icon-button color="warn" (click)="removeLink(i)"><mat-icon [praxisIcon]="'delete'"></mat-icon></button>
-              </div>
-              <div class="editor-grid two tight">
-                <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.id', 'ID') }}</mat-label>
+      </div>
+    </mat-tab>
+    
+    <mat-tab [label]="t('editor.tabs.links', 'Links')" [disabled]="primaryMode !== 'nav'">
+      <div class="editor-section">
+        <button mat-stroked-button color="primary" (click)="addLink()"><mat-icon [praxisIcon]="'add_link'"></mat-icon>{{ t('editor.actions.addLink', 'Adicionar link') }}</button>
+        @if (nav.links?.length) {
+          <div class="editor-grid">
+            @for (l of nav.links; track l; let i = $index) {
+              <div class="editor-card">
+                <div class="editor-card-header">
+                  <strong class="editor-card-title">{{ t('editor.cards.link', 'Link') }} #{{ i+1 }}</strong>
+                  <button mat-icon-button (click)="moveLink(i, -1)" [disabled]="i===0"><mat-icon [praxisIcon]="'arrow_upward'"></mat-icon></button>
+                  <button mat-icon-button (click)="moveLink(i, 1)" [disabled]="i===nav.links!.length-1"><mat-icon [praxisIcon]="'arrow_downward'"></mat-icon></button>
+                  <button mat-icon-button color="warn" (click)="removeLink(i)"><mat-icon [praxisIcon]="'delete'"></mat-icon></button>
+                </div>
+                <div class="editor-grid two tight">
+                  <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.id', 'ID') }}</mat-label>
                   <input matInput [(ngModel)]="l.id" (ngModelChange)="onAppearanceChange()" />
                 </mat-form-field>
                 <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.label', 'Rotulo') }}</mat-label>
-                  <input matInput [(ngModel)]="l.label" (ngModelChange)="onAppearanceChange()" />
-                </mat-form-field>
-                <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.icon', 'Icone') }}</mat-label>
-                  <input matInput [(ngModel)]="l.icon" (ngModelChange)="onAppearanceChange()" />
-                </mat-form-field>
-              </div>
-              <div class="editor-row">
-                <mat-slide-toggle [(ngModel)]="l.disabled" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.linkDisabled', 'Desativado') }}</mat-slide-toggle>
-                <mat-slide-toggle [ngModel]="l.visible !== false" (ngModelChange)="l.visible = $event; onAppearanceChange()">{{ t('editor.toggles.visible', 'Visivel') }}</mat-slide-toggle>
-                <mat-slide-toggle [(ngModel)]="l.disableRipple" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.disableRipple', 'Sem ripple') }}</mat-slide-toggle>
-                <mat-slide-toggle [(ngModel)]="l.fitInkBarToContent" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.fitInkBarToContent', 'Indicador ajustado ao conteudo') }}</mat-slide-toggle>
-              </div>
-
-              <!-- Widgets para Links -->
-              <div class="editor-divider editor-grid">
-                <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>
-                      <option *ngFor="let c of componentOptions" [ngValue]="c.id">{{ c.friendlyName || c.id }}</option>
-                    </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>
-                  <mat-form-field appearance="outline" class="editor-field-240">
-                    <mat-label>{{ t('editor.fields.resourcePath', 'Recurso (resourcePath)') }}</mat-label>
-                    <input matInput [(ngModel)]="quickResourcePathLink[i]" [placeholder]="t('editor.fields.placeholder.resourcePath', 'ex.: usuarios')" />
-                  </mat-form-field>
-                  <button mat-button (click)="addPresetToLink(i, 'form')"><mat-icon [praxisIcon]="'description'"></mat-icon>{{ t('editor.templates.form', 'Form') }}</button>
-                  <button mat-button (click)="addPresetToLink(i, 'table')"><mat-icon [praxisIcon]="'grid_on'"></mat-icon>{{ t('editor.templates.table', 'Tabela') }}</button>
-                  <button mat-button (click)="addPresetToLink(i, 'crud')"><mat-icon [praxisIcon]="'dynamic_form'"></mat-icon>{{ t('editor.templates.crud', 'CRUD') }}</button>
-                </div>
-
-                <div *ngIf="l.widgets?.length" class="editor-grid" cdkDropList [cdkDropListData]="l.widgets || []" (cdkDropListDropped)="onLinkWidgetDrop(i, $event)">
-                  <div *ngFor="let w of l.widgets; let wi = index" cdkDrag class="editor-card dashed">
+                <input matInput [(ngModel)]="l.label" (ngModelChange)="onAppearanceChange()" />
+              </mat-form-field>
+              <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.icon', 'Icone') }}</mat-label>
+              <input matInput [(ngModel)]="l.icon" (ngModelChange)="onAppearanceChange()" />
+            </mat-form-field>
+          </div>
+          <div class="editor-row">
+            <mat-slide-toggle [(ngModel)]="l.disabled" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.linkDisabled', 'Desativado') }}</mat-slide-toggle>
+            <mat-slide-toggle [ngModel]="l.visible !== false" (ngModelChange)="l.visible = $event; onAppearanceChange()">{{ t('editor.toggles.visible', 'Visivel') }}</mat-slide-toggle>
+            <mat-slide-toggle [(ngModel)]="l.disableRipple" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.disableRipple', 'Sem ripple') }}</mat-slide-toggle>
+            <mat-slide-toggle [(ngModel)]="l.fitInkBarToContent" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.fitInkBarToContent', 'Indicador ajustado ao conteudo') }}</mat-slide-toggle>
+          </div>
+          <!-- Widgets para Links -->
+          <div class="editor-divider editor-grid">
+            <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>
+                  @for (c of componentOptions; track c) {
+                    <option [ngValue]="c.id">{{ c.friendlyName || c.id }}</option>
+                  }
+                </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>
+              <mat-form-field appearance="outline" class="editor-field-240">
+                <mat-label>{{ t('editor.fields.resourcePath', 'Recurso (resourcePath)') }}</mat-label>
+                <input matInput [(ngModel)]="quickResourcePathLink[i]" [placeholder]="t('editor.fields.placeholder.resourcePath', 'ex.: usuarios')" />
+              </mat-form-field>
+              <button mat-button (click)="addPresetToLink(i, 'form')"><mat-icon [praxisIcon]="'description'"></mat-icon>{{ t('editor.templates.form', 'Form') }}</button>
+              <button mat-button (click)="addPresetToLink(i, 'table')"><mat-icon [praxisIcon]="'grid_on'"></mat-icon>{{ t('editor.templates.table', 'Tabela') }}</button>
+              <button mat-button (click)="addPresetToLink(i, 'crud')"><mat-icon [praxisIcon]="'dynamic_form'"></mat-icon>{{ t('editor.templates.crud', 'CRUD') }}</button>
+            </div>
+            @if (l.widgets?.length) {
+              <div class="editor-grid" cdkDropList [cdkDropListData]="l.widgets || []" (cdkDropListDropped)="onLinkWidgetDrop(i, $event)">
+                @for (w of l.widgets; track w; let wi = $index) {
+                  <div cdkDrag class="editor-card dashed">
                     <div class="editor-card-header">
                       <button mat-icon-button cdkDragHandle [matTooltip]="t('editor.actions.dragToReorder', 'Arrastar para reordenar')" [attr.aria-label]="t('editor.actions.dragToReorder', 'Arrastar para reordenar')">
                         <mat-icon [praxisIcon]="'drag_indicator'"></mat-icon>
@@ -1984,16 +2032,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                       </mat-form-field>
                     </div>
                   </div>
-                </div>
+                }
               </div>
-            </div>
+            }
           </div>
-          <ng-template #noLinks><em class="editor-muted">{{ t('editor.empty.noLinks', 'Nenhum link definido.') }}</em></ng-template>
         </div>
-      </mat-tab>
+      }
+    </div>
+    } @else {
+      <em class="editor-muted">{{ t('editor.empty.noLinks', 'Nenhum link definido.') }}</em>
+    }
+    </div>
+    </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}.help-icon-button{--mdc-icon-button-state-layer-size: 28px;--mdc-icon-button-icon-size: 18px;width:28px;height:28px;padding:0;display:inline-flex;align-items:center;justify-content:center;margin-right:-4px}.help-icon-button mat-icon{font-size:18px;width:18px;height:18px}.mat-mdc-form-field-icon-suffix{align-self:center}\n"] }]
+    `, 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}.help-icon-button{--mdc-icon-button-state-layer-size: 28px;--mdc-icon-button-icon-size: 18px;width:28px;height:28px;padding:0;display:inline-flex;align-items:center;justify-content:center;margin-right:-4px}.help-icon-button mat-icon{font-size:18px;width:18px;height:18px}.mat-mdc-form-field-icon-suffix{align-self:center}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [SETTINGS_PANEL_DATA]
@@ -2095,8 +2148,8 @@ class TabsQuickSetupComponent {
     onSave() {
         return this.buildOutputDocument();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: TabsQuickSetupComponent, deps: [{ token: SETTINGS_PANEL_DATA }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: TabsQuickSetupComponent, isStandalone: true, selector: "praxis-tabs-quick-setup", providers: [providePraxisI18nConfig(PRAXIS_TABS_I18N_CONFIG)], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TabsQuickSetupComponent, deps: [{ token: SETTINGS_PANEL_DATA }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: TabsQuickSetupComponent, isStandalone: true, selector: "praxis-tabs-quick-setup", providers: [providePraxisI18nConfig(PRAXIS_TABS_I18N_CONFIG)], ngImport: i0, template: `
     <div class="setup-root">
       <div class="setup-row">
         <button mat-stroked-button [color]="model.mode==='group' ? 'primary' : undefined" (click)="setMode('group')">
@@ -2108,7 +2161,7 @@ class TabsQuickSetupComponent {
           {{ t('quickSetup.mode.nav', 'Navegacao por links') }}
         </button>
       </div>
-
+    
       <div class="setup-grid">
         <mat-form-field appearance="outline">
           <mat-label>{{ t('editor.fields.addLabel', 'Adicionar rotulo') }}</mat-label>
@@ -2119,35 +2172,37 @@ class TabsQuickSetupComponent {
           {{ t('editor.actions.add', 'Adicionar') }}
         </button>
       </div>
-
-      <div *ngIf="model.labels.length; else emptyLabels" class="setup-row wrap">
-        <div *ngFor="let l of model.labels; let i = index" class="chip">
-          <span>{{ l }}</span>
-          <button mat-icon-button (click)="removeLabel(i)" [attr.aria-label]="t('editor.actions.removeLabel', 'Remover rotulo')"><mat-icon [praxisIcon]="'close'"></mat-icon></button>
+    
+      @if (model.labels.length) {
+        <div class="setup-row wrap">
+          @for (l of model.labels; track l; let i = $index) {
+            <div class="chip">
+              <span>{{ l }}</span>
+              <button mat-icon-button (click)="removeLabel(i)" [attr.aria-label]="t('editor.actions.removeLabel', 'Remover rotulo')"><mat-icon [praxisIcon]="'close'"></mat-icon></button>
+            </div>
+          }
         </div>
-      </div>
-      <ng-template #emptyLabels>
+      } @else {
         <em class="hint">{{ t('quickSetup.hints.emptyLabels', 'Adicione um ou mais rotulos para criar as abas.') }}</em>
-      </ng-template>
-
+      }
+    
       <div class="setup-row">
         <mat-slide-toggle [(ngModel)]="model.dynamicHeight" (ngModelChange)="updateState()">{{ t('editor.toggles.dynamicHeight', 'Altura dinamica') }}</mat-slide-toggle>
         <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: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.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: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }, { 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: "component", type: i6$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", 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"] }] });
+    `, 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: "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: "component", type: i6.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", 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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: TabsQuickSetupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TabsQuickSetupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'praxis-tabs-quick-setup', standalone: true, imports: [
-                        CommonModule,
                         FormsModule,
                         MatFormFieldModule,
                         MatInputModule,
                         MatIconModule,
                         PraxisIconDirective,
                         MatButtonModule,
-                        MatSlideToggleModule,
+                        MatSlideToggleModule
                     ], providers: [providePraxisI18nConfig(PRAXIS_TABS_I18N_CONFIG)], template: `
     <div class="setup-root">
       <div class="setup-row">
@@ -2160,7 +2215,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
           {{ t('quickSetup.mode.nav', 'Navegacao por links') }}
         </button>
       </div>
-
+    
       <div class="setup-grid">
         <mat-form-field appearance="outline">
           <mat-label>{{ t('editor.fields.addLabel', 'Adicionar rotulo') }}</mat-label>
@@ -2171,23 +2226,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
           {{ t('editor.actions.add', 'Adicionar') }}
         </button>
       </div>
-
-      <div *ngIf="model.labels.length; else emptyLabels" class="setup-row wrap">
-        <div *ngFor="let l of model.labels; let i = index" class="chip">
-          <span>{{ l }}</span>
-          <button mat-icon-button (click)="removeLabel(i)" [attr.aria-label]="t('editor.actions.removeLabel', 'Remover rotulo')"><mat-icon [praxisIcon]="'close'"></mat-icon></button>
+    
+      @if (model.labels.length) {
+        <div class="setup-row wrap">
+          @for (l of model.labels; track l; let i = $index) {
+            <div class="chip">
+              <span>{{ l }}</span>
+              <button mat-icon-button (click)="removeLabel(i)" [attr.aria-label]="t('editor.actions.removeLabel', 'Remover rotulo')"><mat-icon [praxisIcon]="'close'"></mat-icon></button>
+            </div>
+          }
         </div>
-      </div>
-      <ng-template #emptyLabels>
+      } @else {
         <em class="hint">{{ t('quickSetup.hints.emptyLabels', 'Adicione um ou mais rotulos para criar as abas.') }}</em>
-      </ng-template>
-
+      }
+    
       <div class="setup-row">
         <mat-slide-toggle [(ngModel)]="model.dynamicHeight" (ngModelChange)="updateState()">{{ t('editor.toggles.dynamicHeight', 'Altura dinamica') }}</mat-slide-toggle>
         <mat-slide-toggle [(ngModel)]="model.stretchTabs" (ngModelChange)="updateState()">{{ t('editor.toggles.stretchTabs', 'Esticar abas') }}</mat-slide-toggle>
       </div>
     </div>
-  `, 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"] }]
+    `, 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"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [SETTINGS_PANEL_DATA]
@@ -3064,7 +3122,7 @@ class PraxisTabs {
         if (!this.aiAssistantOpen) {
             this.openAiAssistantFromSession(session);
         }
-    }, ...(ngDevMode ? [{ debugName: "aiAssistantSessionEffect" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "aiAssistantSessionEffect" }] : /* istanbul ignore next */ []));
     warnedMissingId = false;
     loadedStorageKey = null;
     config = null;
@@ -3105,8 +3163,8 @@ class PraxisTabs {
     aiAssistantController = null;
     aiAssistantStateSubscription = null;
     // Signals to manage local state for selection in Nav mode and Group mode
-    currentNavIndex = signal(0, ...(ngDevMode ? [{ debugName: "currentNavIndex" }] : []));
-    selectedIndexSignal = signal(0, ...(ngDevMode ? [{ debugName: "selectedIndexSignal" }] : []));
+    currentNavIndex = signal(0, ...(ngDevMode ? [{ debugName: "currentNavIndex" }] : /* istanbul ignore next */ []));
+    selectedIndexSignal = signal(0, ...(ngDevMode ? [{ debugName: "selectedIndexSignal" }] : /* istanbul ignore next */ []));
     groupLoaded = new Set();
     navLoaded = new Set();
     controlledSelectedIndex;
@@ -4144,8 +4202,8 @@ class PraxisTabs {
         catch { }
         return JSON.parse(JSON.stringify(config));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisTabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: PraxisTabs, isStandalone: true, selector: "praxis-tabs", inputs: { config: "config", tabsId: "tabsId", componentInstanceId: "componentInstanceId", configPersistenceStrategy: "configPersistenceStrategy", selectedIndex: "selectedIndex", enableCustomization: "enableCustomization", form: "form", context: "context" }, outputs: { animationDone: "animationDone", focusChange: "focusChange", selectedIndexChange: "selectedIndexChange", selectedTabChange: "selectedTabChange", indexFocused: "indexFocused", selectFocusedIndex: "selectFocusedIndex", configChange: "configChange", widgetEvent: "widgetEvent" }, providers: [providePraxisI18nConfig(PRAXIS_TABS_I18N_CONFIG)], usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisTabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PraxisTabs, isStandalone: true, selector: "praxis-tabs", inputs: { config: "config", tabsId: "tabsId", componentInstanceId: "componentInstanceId", configPersistenceStrategy: "configPersistenceStrategy", selectedIndex: "selectedIndex", enableCustomization: "enableCustomization", form: "form", context: "context" }, outputs: { animationDone: "animationDone", focusChange: "focusChange", selectedIndexChange: "selectedIndexChange", selectedTabChange: "selectedTabChange", indexFocused: "indexFocused", selectFocusedIndex: "selectFocusedIndex", configChange: "configChange", widgetEvent: "widgetEvent" }, providers: [providePraxisI18nConfig(PRAXIS_TABS_I18N_CONFIG)], usesOnChanges: true, ngImport: i0, template: `
     <div
       class="praxis-tabs-root"
       [class.density-compact]="config?.appearance?.density === 'compact'"
@@ -4155,60 +4213,67 @@ class PraxisTabs {
       [class.reduce-motion]="config?.accessibility?.reduceMotion"
       [ngClass]="config?.appearance?.themeClass || ''"
       [attr.data-tabs-id]="styleScopeId()"
-    >
+      >
       <!-- Inline custom CSS, if provided -->
-      <style *ngIf="safeCustomCss() as css" [innerHTML]="css"></style>
+      @if (safeCustomCss(); as css) {
+        <style [innerHTML]="css"></style>
+      }
       <!-- Runtime style derived from tokens -->
-      <style *ngIf="styleCss() as s" [innerHTML]="s"></style>
-
-      <div class="tabs-ai-assistant" *ngIf="enableCustomization">
-        <button
-          mat-mini-fab
-          type="button"
-          color="primary"
-          class="tabs-ai-assistant-trigger"
-          (click)="openAiAssistant()"
-          matTooltip="Copiloto semantico Praxis"
-          aria-label="Abrir copiloto semantico Praxis das abas"
-          data-testid="praxis-tabs-ai-assistant-trigger"
-        >
-          <mat-icon [praxisIcon]="'auto_awesome'"></mat-icon>
-        </button>
-      </div>
-
-      <praxis-ai-assistant-shell
-        *ngIf="aiAssistantOpen && aiAssistantViewState"
-        [labels]="aiAssistantLabels"
-        [mode]="aiAssistantViewState.mode"
-        [state]="aiAssistantViewState.state"
-        [contextItems]="aiAssistantViewState.contextItems"
-        [attachments]="aiAssistantViewState.attachments"
-        [messages]="aiAssistantViewState.messages"
-        [quickReplies]="aiAssistantViewState.quickReplies"
-        [prompt]="aiAssistantPrompt"
-        [statusText]="aiAssistantViewState.statusText"
-        [errorText]="aiAssistantViewState.errorText"
-        [busy]="aiAssistantViewState.state === 'processing' || aiAssistantViewState.state === 'applying'"
-        [canApply]="aiAssistantViewState.canApply"
-        [layout]="aiAssistantLayout"
-        testIdPrefix="praxis-tabs-ai-assistant"
-        panelTestId="praxis-tabs-ai-assistant-panel"
-        submitTestId="praxis-tabs-ai-assistant-submit"
-        applyTestId="praxis-tabs-ai-assistant-apply"
-        (promptChange)="onAiAssistantPromptChange($event)"
-        (submitPrompt)="onAiAssistantSubmit($event)"
-        (apply)="onAiAssistantApply()"
-        (retryTurn)="onAiAssistantRetry()"
-        (cancelTurn)="onAiAssistantCancel()"
-        (quickReply)="onAiAssistantQuickReply($event)"
-        (editMessage)="onAiAssistantEditMessage($event)"
-        (resendMessage)="onAiAssistantResendMessage($event)"
-        (layoutChange)="onAiAssistantLayoutChange($event)"
-        (close)="closeAiAssistant()"
-      ></praxis-ai-assistant-shell>
-
+      @if (styleCss(); as s) {
+        <style [innerHTML]="s"></style>
+      }
+    
+      @if (enableCustomization) {
+        <div class="tabs-ai-assistant">
+          <button
+            mat-mini-fab
+            type="button"
+            color="primary"
+            class="tabs-ai-assistant-trigger"
+            (click)="openAiAssistant()"
+            matTooltip="Copiloto semantico Praxis"
+            aria-label="Abrir copiloto semantico Praxis das abas"
+            data-testid="praxis-tabs-ai-assistant-trigger"
+            >
+            <mat-icon [praxisIcon]="'auto_awesome'"></mat-icon>
+          </button>
+        </div>
+      }
+    
+      @if (aiAssistantOpen && aiAssistantViewState) {
+        <praxis-ai-assistant-shell
+          [labels]="aiAssistantLabels"
+          [mode]="aiAssistantViewState.mode"
+          [state]="aiAssistantViewState.state"
+          [contextItems]="aiAssistantViewState.contextItems"
+          [attachments]="aiAssistantViewState.attachments"
+          [messages]="aiAssistantViewState.messages"
+          [quickReplies]="aiAssistantViewState.quickReplies"
+          [prompt]="aiAssistantPrompt"
+          [statusText]="aiAssistantViewState.statusText"
+          [errorText]="aiAssistantViewState.errorText"
+          [busy]="aiAssistantViewState.state === 'processing' || aiAssistantViewState.state === 'applying'"
+          [canApply]="aiAssistantViewState.canApply"
+          [layout]="aiAssistantLayout"
+          testIdPrefix="praxis-tabs-ai-assistant"
+          panelTestId="praxis-tabs-ai-assistant-panel"
+          submitTestId="praxis-tabs-ai-assistant-submit"
+          applyTestId="praxis-tabs-ai-assistant-apply"
+          (promptChange)="onAiAssistantPromptChange($event)"
+          (submitPrompt)="onAiAssistantSubmit($event)"
+          (apply)="onAiAssistantApply()"
+          (retryTurn)="onAiAssistantRetry()"
+          (cancelTurn)="onAiAssistantCancel()"
+          (quickReply)="onAiAssistantQuickReply($event)"
+          (editMessage)="onAiAssistantEditMessage($event)"
+          (resendMessage)="onAiAssistantResendMessage($event)"
+          (layoutChange)="onAiAssistantLayoutChange($event)"
+          (close)="closeAiAssistant()"
+        ></praxis-ai-assistant-shell>
+      }
+    
       <!-- Empty state (global) -->
-      <ng-container *ngIf="isEmptyGlobal(); else notEmpty">
+      @if (isEmptyGlobal()) {
         <praxis-empty-state-card
           icon="tab"
           [title]="t('emptyState.title', 'Nenhuma aba configurada')"
@@ -4219,216 +4284,220 @@ class PraxisTabs {
             { label: t('emptyState.secondaryOpenEditor', 'Abrir editor completo'), icon: 'tune', action: openEditor.bind(this) }
           ]"
         ></praxis-empty-state-card>
-      </ng-container>
-
-      <ng-template #notEmpty>
-      <!-- Tab Nav variant -->
-      <ng-container *ngIf="isNavMode(); else groupMode">
-        <nav
-          mat-tab-nav-bar
-          [tabPanel]="tabPanel"
-          cdkDropList
-          cdkDropListOrientation="horizontal"
-          [cdkDropListDisabled]="!config?.behavior?.reorderable"
-          (cdkDropListDropped)="onVisibleNavDrop($event)"
-          [disablePagination]="config?.nav?.disablePagination"
-          [fitInkBarToContent]="config?.nav?.fitInkBarToContent"
-          [mat-stretch-tabs]="config?.nav?.stretchTabs"
-          [color]="config?.nav?.color"
-          [backgroundColor]="config?.nav?.backgroundColor"
-          [selectedIndex]="selectedVisibleNavIndex()"
-          [attr.aria-label]="config?.nav?.ariaLabel || config?.group?.ariaLabel || null"
-          [attr.aria-labelledby]="config?.nav?.ariaLabelledby || config?.group?.ariaLabelledby || null"
-          [animationDuration]="effectiveAnimationDuration()"
-          (indexFocused)="indexFocused.emit($event)"
-          (selectFocusedIndex)="selectFocusedIndex.emit($event)"
-        >
-          <a
-            mat-tab-link
-            *ngFor="let entry of visibleNavLinkEntries(); let i = index; trackBy: trackVisibleNavLink"
-            cdkDrag
-            [cdkDragDisabled]="!config?.behavior?.reorderable"
-            cdkDragLockAxis="x"
-            [active]="getNavActive(entry.index)"
-            [disabled]="entry.link.disabled"
-            [disableRipple]="config?.nav?.disableRipple || entry.link.disableRipple"
-            [fitInkBarToContent]="entry.link.fitInkBarToContent || false"
-            [id]="entry.link.id || ''"
-            (click)="onNavClick(entry.index)"
-          >
-            <span *ngIf="config?.behavior?.reorderable" class="drag-handle" cdkDragHandle>
-              <mat-icon fontIcon="drag_indicator"></mat-icon>
-            </span>
-            <mat-icon *ngIf="entry.link.icon" class="tab-label-icon" [praxisIcon]="entry.link.icon"></mat-icon>
-            {{ entry.link.label }}
-          </a>
-        </nav>
-
-        <mat-tab-nav-panel #tabPanel>
-          <div class="praxis-tabnav-content" *ngIf="currentNavIndex() >= 0">
-            <ng-container
-              *ngIf="config?.nav?.links?.[currentNavIndex()] as l"
+      } @else {
+        <!-- Tab Nav variant -->
+        @if (isNavMode()) {
+          <nav
+            mat-tab-nav-bar
+            [tabPanel]="tabPanel"
+            cdkDropList
+            cdkDropListOrientation="horizontal"
+            [cdkDropListDisabled]="!config?.behavior?.reorderable"
+            (cdkDropListDropped)="onVisibleNavDrop($event)"
+            [disablePagination]="config?.nav?.disablePagination"
+            [fitInkBarToContent]="config?.nav?.fitInkBarToContent"
+            [mat-stretch-tabs]="config?.nav?.stretchTabs"
+            [color]="config?.nav?.color"
+            [backgroundColor]="config?.nav?.backgroundColor"
+            [selectedIndex]="selectedVisibleNavIndex()"
+            [attr.aria-label]="config?.nav?.ariaLabel || config?.group?.ariaLabel || null"
+            [attr.aria-labelledby]="config?.nav?.ariaLabelledby || config?.group?.ariaLabelledby || null"
+            [animationDuration]="effectiveAnimationDuration()"
+            (indexFocused)="indexFocused.emit($event)"
+            (selectFocusedIndex)="selectFocusedIndex.emit($event)"
             >
-              <ng-container *ngIf="(l.content?.length || safeWidgetDefinitions(l.widgets).length) && navContentReady(currentNavIndex()); else emptyNav">
-                <ng-container *ngIf="l.content">
-                  <ng-container
-                    dynamicFieldLoader
-                    [fields]="l.content || []"
-                    [formGroup]="effectiveContentForm()"
-                  ></ng-container>
-                </ng-container>
-                <ng-container *ngIf="safeWidgetDefinitions(l.widgets).length">
-                  <ng-container *ngFor="let w of safeWidgetDefinitions(l.widgets); let wi = index; trackBy: trackWidgetDefinition">
-                    <ng-container
-                      [dynamicWidgetLoader]="resolveWidgetDefinition(w)"
-                      [context]="context || {}"
-                      (widgetEvent)="emitWidgetEvent(linkEventPath(l.id, currentNavIndex()), $event)"
-                    ></ng-container>
-                  </ng-container>
-                </ng-container>
-              </ng-container>
-              <ng-template #emptyNav>
-                <praxis-empty-state-card
-                  [inline]="true"
-                  icon="add_to_queue"
-                  [title]="t('emptyState.navTitle', 'Sem conteudo neste link')"
-                  [description]="t('emptyState.navDescription', 'Adicione conteudo ou use o editor para configurar.')"
-                  [primaryAction]="{ label: t('emptyState.openEditor', 'Abrir editor'), icon: 'tune', action: openEditor.bind(this) }"
-                ></praxis-empty-state-card>
-              </ng-template>
-            </ng-container>
-          </div>
-        </mat-tab-nav-panel>
-      </ng-container>
-
-      <!-- Tab Group variant -->
-      <ng-template #groupMode>
-        <mat-tab-group
-          [dynamicHeight]="config?.group?.dynamicHeight"
-          [disableRipple]="config?.group?.disableRipple"
-          [disablePagination]="config?.group?.disablePagination"
-          [fitInkBarToContent]="config?.group?.fitInkBarToContent"
-          [headerPosition]="config?.group?.headerPosition ?? 'above'"
-          [preserveContent]="config?.group?.preserveContent"
-          [selectedIndex]="selectedVisibleTabIndex()"
-          [mat-stretch-tabs]="config?.group?.stretchTabs"
-          [mat-align-tabs]="config?.group?.alignTabs || 'start'"
-          [color]="config?.group?.color"
-          [backgroundColor]="config?.group?.backgroundColor"
-          [animationDuration]="effectiveAnimationDuration()"
-          [attr.aria-label]="config?.group?.ariaLabel || null"
-          [attr.aria-labelledby]="config?.group?.ariaLabelledby || null"
-          (animationDone)="animationDone.emit()"
-          (focusChange)="focusChange.emit($event)"
-          (selectedIndexChange)="onVisibleTabIndexChange($event)"
-          (selectedTabChange)="selectedTabChange.emit($event)"
-          class="praxis-tabs-group"
-        >
-          <mat-tab
-            *ngFor="let entry of visibleTabEntries(); let i = index; trackBy: trackVisibleTab"
-            [disabled]="entry.tab.disabled"
-            [labelClass]="entry.tab.labelClass ?? ''"
-            [bodyClass]="entry.tab.bodyClass ?? ''"
-            [id]="entry.tab.id || ''"
-            [attr.aria-label]="entry.tab.ariaLabel || null"
-            [attr.aria-labelledby]="entry.tab.ariaLabelledby || null"
-          >
-            <ng-template mat-tab-label>
-              <mat-icon *ngIf="entry.tab.icon" class="tab-label-icon" [praxisIcon]="entry.tab.icon"></mat-icon>
-              <span>{{ entry.tab.textLabel }}</span>
-              <button
-                *ngIf="config?.behavior?.closeable"
-                mat-icon-button
-                type="button"
-                (click)="closeTab(entry.index); $event.stopPropagation()"
-                (keydown.enter)="$event.stopPropagation()"
-                (keydown.space)="$event.stopPropagation()"
-                [attr.aria-label]="t('chrome.closeTab', 'Fechar aba')"
-              >
-                <mat-icon fontIcon="close"></mat-icon>
-              </button>
-              <ng-container *ngIf="config?.behavior?.reorderable">
-                <button
-                  mat-icon-button
-                  type="button"
-                  (click)="moveTab(entry.index, -1); $event.stopPropagation()"
-                  (keydown.enter)="$event.stopPropagation()"
-                  (keydown.space)="$event.stopPropagation()"
-                  [disabled]="entry.index===0"
-                  [attr.aria-label]="t('chrome.moveTabLeft', 'Mover aba para esquerda')"
+            @for (entry of visibleNavLinkEntries(); track trackVisibleNavLink(i, entry); let i = $index) {
+              <a
+                mat-tab-link
+                cdkDrag
+                [cdkDragDisabled]="!config?.behavior?.reorderable"
+                cdkDragLockAxis="x"
+                [active]="getNavActive(entry.index)"
+                [disabled]="entry.link.disabled"
+                [disableRipple]="config?.nav?.disableRipple || entry.link.disableRipple"
+                [fitInkBarToContent]="entry.link.fitInkBarToContent || false"
+                [id]="entry.link.id || ''"
+                (click)="onNavClick(entry.index)"
                 >
-                  <mat-icon fontIcon="arrow_back"></mat-icon>
-                </button>
-                <button
-                  mat-icon-button
-                  type="button"
-                  (click)="moveTab(entry.index, 1); $event.stopPropagation()"
-                  (keydown.enter)="$event.stopPropagation()"
-                  (keydown.space)="$event.stopPropagation()"
-                  [disabled]="entry.index===(config?.tabs?.length||1)-1"
-                  [attr.aria-label]="t('chrome.moveTabRight', 'Mover aba para direita')"
+                @if (config?.behavior?.reorderable) {
+                  <span class="drag-handle" cdkDragHandle>
+                    <mat-icon fontIcon="drag_indicator"></mat-icon>
+                  </span>
+                }
+                @if (entry.link.icon) {
+                  <mat-icon class="tab-label-icon" [praxisIcon]="entry.link.icon"></mat-icon>
+                }
+                {{ entry.link.label }}
+              </a>
+            }
+          </nav>
+          <mat-tab-nav-panel #tabPanel>
+            @if (currentNavIndex() >= 0) {
+              <div class="praxis-tabnav-content">
+                @if (config?.nav?.links?.[currentNavIndex()]; as l) {
+                  @if ((l.content?.length || safeWidgetDefinitions(l.widgets).length) && navContentReady(currentNavIndex())) {
+                    @if (l.content) {
+                      <ng-container
+                        dynamicFieldLoader
+                        [fields]="l.content || []"
+                        [formGroup]="effectiveContentForm()"
+                      ></ng-container>
+                    }
+                    @if (safeWidgetDefinitions(l.widgets).length) {
+                      @for (w of safeWidgetDefinitions(l.widgets); track trackWidgetDefinition(wi, w); let wi = $index) {
+                        <ng-container
+                          [dynamicWidgetLoader]="resolveWidgetDefinition(w)"
+                          [context]="context || {}"
+                          (widgetEvent)="emitWidgetEvent(linkEventPath(l.id, currentNavIndex()), $event)"
+                        ></ng-container>
+                      }
+                    }
+                  } @else {
+                    <praxis-empty-state-card
+                      [inline]="true"
+                      icon="add_to_queue"
+                      [title]="t('emptyState.navTitle', 'Sem conteudo neste link')"
+                      [description]="t('emptyState.navDescription', 'Adicione conteudo ou use o editor para configurar.')"
+                      [primaryAction]="{ label: t('emptyState.openEditor', 'Abrir editor'), icon: 'tune', action: openEditor.bind(this) }"
+                    ></praxis-empty-state-card>
+                  }
+                }
+              </div>
+            }
+          </mat-tab-nav-panel>
+        } @else {
+          <mat-tab-group
+            [dynamicHeight]="config?.group?.dynamicHeight"
+            [disableRipple]="config?.group?.disableRipple"
+            [disablePagination]="config?.group?.disablePagination"
+            [fitInkBarToContent]="config?.group?.fitInkBarToContent"
+            [headerPosition]="config?.group?.headerPosition ?? 'above'"
+            [preserveContent]="config?.group?.preserveContent"
+            [selectedIndex]="selectedVisibleTabIndex()"
+            [mat-stretch-tabs]="config?.group?.stretchTabs"
+            [mat-align-tabs]="config?.group?.alignTabs || 'start'"
+            [color]="config?.group?.color"
+            [backgroundColor]="config?.group?.backgroundColor"
+            [animationDuration]="effectiveAnimationDuration()"
+            [attr.aria-label]="config?.group?.ariaLabel || null"
+            [attr.aria-labelledby]="config?.group?.ariaLabelledby || null"
+            (animationDone)="animationDone.emit()"
+            (focusChange)="focusChange.emit($event)"
+            (selectedIndexChange)="onVisibleTabIndexChange($event)"
+            (selectedTabChange)="selectedTabChange.emit($event)"
+            class="praxis-tabs-group"
+            >
+            @for (entry of visibleTabEntries(); track trackVisibleTab(i, entry); let i = $index) {
+              <mat-tab
+                [disabled]="entry.tab.disabled"
+                [labelClass]="entry.tab.labelClass ?? ''"
+                [bodyClass]="entry.tab.bodyClass ?? ''"
+                [id]="entry.tab.id || ''"
+                [attr.aria-label]="entry.tab.ariaLabel || null"
+                [attr.aria-labelledby]="entry.tab.ariaLabelledby || null"
                 >
-                  <mat-icon fontIcon="arrow_forward"></mat-icon>
-                </button>
-              </ng-container>
-            </ng-template>
-
-            <ng-container *ngIf="(entry.tab.content?.length || safeWidgetDefinitions(entry.tab.widgets).length) && groupContentReady(entry.index); else emptyTab">
-              <ng-container *ngIf="entry.tab.content">
-                <ng-container
-                  dynamicFieldLoader
-                  [fields]="entry.tab.content || []"
-                  [formGroup]="effectiveContentForm()"
-                ></ng-container>
-              </ng-container>
-              <ng-container *ngIf="safeWidgetDefinitions(entry.tab.widgets).length">
-                <ng-container *ngFor="let w of safeWidgetDefinitions(entry.tab.widgets); let wi = index; trackBy: trackWidgetDefinition">
-                  <ng-container
-                    [dynamicWidgetLoader]="resolveWidgetDefinition(w)"
-                    [context]="context || {}"
-                    (widgetEvent)="emitWidgetEvent(tabEventPath(entry.tab.id, entry.index), $event)"
-                  ></ng-container>
-                </ng-container>
-              </ng-container>
-            </ng-container>
-            <ng-template #emptyTab>
-              <praxis-empty-state-card
-                [inline]="true"
-                icon="dashboard_customize"
-                [title]="t('emptyState.tabTitle', 'Sem conteudo nesta aba')"
-                [description]="t('emptyState.tabDescription', 'Adicione conteudo ou use o editor para configurar.')"
-                [primaryAction]="{ label: t('emptyState.openEditor', 'Abrir editor'), icon: 'tune', action: openEditor.bind(this) }"
-              ></praxis-empty-state-card>
-            </ng-template>
-          </mat-tab>
-        </mat-tab-group>
-      </ng-template>
-      </ng-template>
-
+                <ng-template mat-tab-label>
+                  @if (entry.tab.icon) {
+                    <mat-icon class="tab-label-icon" [praxisIcon]="entry.tab.icon"></mat-icon>
+                  }
+                  <span>{{ entry.tab.textLabel }}</span>
+                  @if (config?.behavior?.closeable) {
+                    <button
+                      mat-icon-button
+                      type="button"
+                      (click)="closeTab(entry.index); $event.stopPropagation()"
+                      (keydown.enter)="$event.stopPropagation()"
+                      (keydown.space)="$event.stopPropagation()"
+                      [attr.aria-label]="t('chrome.closeTab', 'Fechar aba')"
+                      >
+                      <mat-icon fontIcon="close"></mat-icon>
+                    </button>
+                  }
+                  @if (config?.behavior?.reorderable) {
+                    <button
+                      mat-icon-button
+                      type="button"
+                      (click)="moveTab(entry.index, -1); $event.stopPropagation()"
+                      (keydown.enter)="$event.stopPropagation()"
+                      (keydown.space)="$event.stopPropagation()"
+                      [disabled]="entry.index===0"
+                      [attr.aria-label]="t('chrome.moveTabLeft', 'Mover aba para esquerda')"
+                      >
+                      <mat-icon fontIcon="arrow_back"></mat-icon>
+                    </button>
+                    <button
+                      mat-icon-button
+                      type="button"
+                      (click)="moveTab(entry.index, 1); $event.stopPropagation()"
+                      (keydown.enter)="$event.stopPropagation()"
+                      (keydown.space)="$event.stopPropagation()"
+                      [disabled]="entry.index===(config?.tabs?.length||1)-1"
+                      [attr.aria-label]="t('chrome.moveTabRight', 'Mover aba para direita')"
+                      >
+                      <mat-icon fontIcon="arrow_forward"></mat-icon>
+                    </button>
+                  }
+                </ng-template>
+                @if ((entry.tab.content?.length || safeWidgetDefinitions(entry.tab.widgets).length) && groupContentReady(entry.index)) {
+                  @if (entry.tab.content) {
+                    <ng-container
+                      dynamicFieldLoader
+                      [fields]="entry.tab.content || []"
+                      [formGroup]="effectiveContentForm()"
+                    ></ng-container>
+                  }
+                  @if (safeWidgetDefinitions(entry.tab.widgets).length) {
+                    @for (w of safeWidgetDefinitions(entry.tab.widgets); track trackWidgetDefinition(wi, w); let wi = $index) {
+                      <ng-container
+                        [dynamicWidgetLoader]="resolveWidgetDefinition(w)"
+                        [context]="context || {}"
+                        (widgetEvent)="emitWidgetEvent(tabEventPath(entry.tab.id, entry.index), $event)"
+                      ></ng-container>
+                    }
+                  }
+                } @else {
+                  <praxis-empty-state-card
+                    [inline]="true"
+                    icon="dashboard_customize"
+                    [title]="t('emptyState.tabTitle', 'Sem conteudo nesta aba')"
+                    [description]="t('emptyState.tabDescription', 'Adicione conteudo ou use o editor para configurar.')"
+                    [primaryAction]="{ label: t('emptyState.openEditor', 'Abrir editor'), icon: 'tune', action: openEditor.bind(this) }"
+                  ></praxis-empty-state-card>
+                }
+              </mat-tab>
+            }
+          </mat-tab-group>
+        }
+        <!-- Tab Group variant -->
+      }
+    
+    
       <!-- Edit button -->
-      <button
-        *ngIf="enableCustomization"
-        mat-fab
-        class="edit-fab"
-        [attr.aria-label]="t('chrome.editTabs', 'Editar abas')"
-        (click)="openEditor()"
-      >
-        <mat-icon fontIcon="edit"></mat-icon>
-      </button>
-      <button
-        *ngIf="enableCustomization && tabsId"
-        mat-mini-fab
-        class="edit-fab edit-fab-secondary"
-        [attr.aria-label]="t('settings.resetPreferences', 'Redefinir preferencias de abas')"
-        (click)="resetPreferences()"
-        [matTooltip]="t('settings.resetPreferences', 'Redefinir preferencias de abas')"
-      >
-        <mat-icon [praxisIcon]="'restart_alt'"></mat-icon>
-      </button>
+      @if (enableCustomization) {
+        <button
+          mat-fab
+          class="edit-fab"
+          [attr.aria-label]="t('chrome.editTabs', 'Editar abas')"
+          (click)="openEditor()"
+          >
+          <mat-icon fontIcon="edit"></mat-icon>
+        </button>
+      }
+      @if (enableCustomization && tabsId) {
+        <button
+          mat-mini-fab
+          class="edit-fab edit-fab-secondary"
+          [attr.aria-label]="t('settings.resetPreferences', 'Redefinir preferencias de abas')"
+          (click)="resetPreferences()"
+          [matTooltip]="t('settings.resetPreferences', 'Redefinir preferencias de abas')"
+          >
+          <mat-icon [praxisIcon]="'restart_alt'"></mat-icon>
+        </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}.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}.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: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "directive", type: i3$1.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i3$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i3$1.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$1.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i3$1.MatTabNavPanel, selector: "mat-tab-nav-panel", inputs: ["id"], exportAs: ["matTabNavPanel"] }, { kind: "component", type: i3$1.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i7.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: "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.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", 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"] }, { 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", "prompt", "statusText", "errorText", "testIdPrefix", "panelTestId", "submitTestId", "applyTestId", "primaryAction", "secondaryActions", "governanceActions", "busy", "canSubmit", "canApply", "submitOnEnter", "showAttachAction", "enablePastedAttachments", "enableFileAttachments", "attachmentAccept", "attachmentMultiple", "draggable", "resizable", "minWidth", "minHeight", "margin", "layout"], outputs: ["promptChange", "submitPrompt", "apply", "retryTurn", "cancelTurn", "shellAction", "close", "attach", "attachmentsPasted", "attachmentsSelected", "removeAttachment", "messageAction", "editMessage", "resendMessage", "quickReply", "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}.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}.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: "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.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", 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"] }, { 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", "prompt", "statusText", "errorText", "testIdPrefix", "panelTestId", "submitTestId", "applyTestId", "primaryAction", "secondaryActions", "governanceActions", "busy", "canSubmit", "canApply", "submitOnEnter", "showAttachAction", "enablePastedAttachments", "enableFileAttachments", "attachmentAccept", "attachmentMultiple", "draggable", "resizable", "minWidth", "minHeight", "margin", "layout"], outputs: ["promptChange", "submitPrompt", "apply", "retryTurn", "cancelTurn", "shellAction", "close", "attach", "attachmentsPasted", "attachmentsSelected", "removeAttachment", "messageAction", "editMessage", "resendMessage", "quickReply", "layoutChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisTabs, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisTabs, decorators: [{
             type: Component,
             args: [{ selector: 'praxis-tabs', standalone: true, providers: [providePraxisI18nConfig(PRAXIS_TABS_I18N_CONFIG)], imports: [
                         CommonModule,
@@ -4453,60 +4522,67 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
       [class.reduce-motion]="config?.accessibility?.reduceMotion"
       [ngClass]="config?.appearance?.themeClass || ''"
       [attr.data-tabs-id]="styleScopeId()"
-    >
+      >
       <!-- Inline custom CSS, if provided -->
-      <style *ngIf="safeCustomCss() as css" [innerHTML]="css"></style>
+      @if (safeCustomCss(); as css) {
+        <style [innerHTML]="css"></style>
+      }
       <!-- Runtime style derived from tokens -->
-      <style *ngIf="styleCss() as s" [innerHTML]="s"></style>
-
-      <div class="tabs-ai-assistant" *ngIf="enableCustomization">
-        <button
-          mat-mini-fab
-          type="button"
-          color="primary"
-          class="tabs-ai-assistant-trigger"
-          (click)="openAiAssistant()"
-          matTooltip="Copiloto semantico Praxis"
-          aria-label="Abrir copiloto semantico Praxis das abas"
-          data-testid="praxis-tabs-ai-assistant-trigger"
-        >
-          <mat-icon [praxisIcon]="'auto_awesome'"></mat-icon>
-        </button>
-      </div>
-
-      <praxis-ai-assistant-shell
-        *ngIf="aiAssistantOpen && aiAssistantViewState"
-        [labels]="aiAssistantLabels"
-        [mode]="aiAssistantViewState.mode"
-        [state]="aiAssistantViewState.state"
-        [contextItems]="aiAssistantViewState.contextItems"
-        [attachments]="aiAssistantViewState.attachments"
-        [messages]="aiAssistantViewState.messages"
-        [quickReplies]="aiAssistantViewState.quickReplies"
-        [prompt]="aiAssistantPrompt"
-        [statusText]="aiAssistantViewState.statusText"
-        [errorText]="aiAssistantViewState.errorText"
-        [busy]="aiAssistantViewState.state === 'processing' || aiAssistantViewState.state === 'applying'"
-        [canApply]="aiAssistantViewState.canApply"
-        [layout]="aiAssistantLayout"
-        testIdPrefix="praxis-tabs-ai-assistant"
-        panelTestId="praxis-tabs-ai-assistant-panel"
-        submitTestId="praxis-tabs-ai-assistant-submit"
-        applyTestId="praxis-tabs-ai-assistant-apply"
-        (promptChange)="onAiAssistantPromptChange($event)"
-        (submitPrompt)="onAiAssistantSubmit($event)"
-        (apply)="onAiAssistantApply()"
-        (retryTurn)="onAiAssistantRetry()"
-        (cancelTurn)="onAiAssistantCancel()"
-        (quickReply)="onAiAssistantQuickReply($event)"
-        (editMessage)="onAiAssistantEditMessage($event)"
-        (resendMessage)="onAiAssistantResendMessage($event)"
-        (layoutChange)="onAiAssistantLayoutChange($event)"
-        (close)="closeAiAssistant()"
-      ></praxis-ai-assistant-shell>
-
+      @if (styleCss(); as s) {
+        <style [innerHTML]="s"></style>
+      }
+    
+      @if (enableCustomization) {
+        <div class="tabs-ai-assistant">
+          <button
+            mat-mini-fab
+            type="button"
+            color="primary"
+            class="tabs-ai-assistant-trigger"
+            (click)="openAiAssistant()"
+            matTooltip="Copiloto semantico Praxis"
+            aria-label="Abrir copiloto semantico Praxis das abas"
+            data-testid="praxis-tabs-ai-assistant-trigger"
+            >
+            <mat-icon [praxisIcon]="'auto_awesome'"></mat-icon>
+          </button>
+        </div>
+      }
+    
+      @if (aiAssistantOpen && aiAssistantViewState) {
+        <praxis-ai-assistant-shell
+          [labels]="aiAssistantLabels"
+          [mode]="aiAssistantViewState.mode"
+          [state]="aiAssistantViewState.state"
+          [contextItems]="aiAssistantViewState.contextItems"
+          [attachments]="aiAssistantViewState.attachments"
+          [messages]="aiAssistantViewState.messages"
+          [quickReplies]="aiAssistantViewState.quickReplies"
+          [prompt]="aiAssistantPrompt"
+          [statusText]="aiAssistantViewState.statusText"
+          [errorText]="aiAssistantViewState.errorText"
+          [busy]="aiAssistantViewState.state === 'processing' || aiAssistantViewState.state === 'applying'"
+          [canApply]="aiAssistantViewState.canApply"
+          [layout]="aiAssistantLayout"
+          testIdPrefix="praxis-tabs-ai-assistant"
+          panelTestId="praxis-tabs-ai-assistant-panel"
+          submitTestId="praxis-tabs-ai-assistant-submit"
+          applyTestId="praxis-tabs-ai-assistant-apply"
+          (promptChange)="onAiAssistantPromptChange($event)"
+          (submitPrompt)="onAiAssistantSubmit($event)"
+          (apply)="onAiAssistantApply()"
+          (retryTurn)="onAiAssistantRetry()"
+          (cancelTurn)="onAiAssistantCancel()"
+          (quickReply)="onAiAssistantQuickReply($event)"
+          (editMessage)="onAiAssistantEditMessage($event)"
+          (resendMessage)="onAiAssistantResendMessage($event)"
+          (layoutChange)="onAiAssistantLayoutChange($event)"
+          (close)="closeAiAssistant()"
+        ></praxis-ai-assistant-shell>
+      }
+    
       <!-- Empty state (global) -->
-      <ng-container *ngIf="isEmptyGlobal(); else notEmpty">
+      @if (isEmptyGlobal()) {
         <praxis-empty-state-card
           icon="tab"
           [title]="t('emptyState.title', 'Nenhuma aba configurada')"
@@ -4517,214 +4593,218 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
             { label: t('emptyState.secondaryOpenEditor', 'Abrir editor completo'), icon: 'tune', action: openEditor.bind(this) }
           ]"
         ></praxis-empty-state-card>
-      </ng-container>
-
-      <ng-template #notEmpty>
-      <!-- Tab Nav variant -->
-      <ng-container *ngIf="isNavMode(); else groupMode">
-        <nav
-          mat-tab-nav-bar
-          [tabPanel]="tabPanel"
-          cdkDropList
-          cdkDropListOrientation="horizontal"
-          [cdkDropListDisabled]="!config?.behavior?.reorderable"
-          (cdkDropListDropped)="onVisibleNavDrop($event)"
-          [disablePagination]="config?.nav?.disablePagination"
-          [fitInkBarToContent]="config?.nav?.fitInkBarToContent"
-          [mat-stretch-tabs]="config?.nav?.stretchTabs"
-          [color]="config?.nav?.color"
-          [backgroundColor]="config?.nav?.backgroundColor"
-          [selectedIndex]="selectedVisibleNavIndex()"
-          [attr.aria-label]="config?.nav?.ariaLabel || config?.group?.ariaLabel || null"
-          [attr.aria-labelledby]="config?.nav?.ariaLabelledby || config?.group?.ariaLabelledby || null"
-          [animationDuration]="effectiveAnimationDuration()"
-          (indexFocused)="indexFocused.emit($event)"
-          (selectFocusedIndex)="selectFocusedIndex.emit($event)"
-        >
-          <a
-            mat-tab-link
-            *ngFor="let entry of visibleNavLinkEntries(); let i = index; trackBy: trackVisibleNavLink"
-            cdkDrag
-            [cdkDragDisabled]="!config?.behavior?.reorderable"
-            cdkDragLockAxis="x"
-            [active]="getNavActive(entry.index)"
-            [disabled]="entry.link.disabled"
-            [disableRipple]="config?.nav?.disableRipple || entry.link.disableRipple"
-            [fitInkBarToContent]="entry.link.fitInkBarToContent || false"
-            [id]="entry.link.id || ''"
-            (click)="onNavClick(entry.index)"
-          >
-            <span *ngIf="config?.behavior?.reorderable" class="drag-handle" cdkDragHandle>
-              <mat-icon fontIcon="drag_indicator"></mat-icon>
-            </span>
-            <mat-icon *ngIf="entry.link.icon" class="tab-label-icon" [praxisIcon]="entry.link.icon"></mat-icon>
-            {{ entry.link.label }}
-          </a>
-        </nav>
-
-        <mat-tab-nav-panel #tabPanel>
-          <div class="praxis-tabnav-content" *ngIf="currentNavIndex() >= 0">
-            <ng-container
-              *ngIf="config?.nav?.links?.[currentNavIndex()] as l"
+      } @else {
+        <!-- Tab Nav variant -->
+        @if (isNavMode()) {
+          <nav
+            mat-tab-nav-bar
+            [tabPanel]="tabPanel"
+            cdkDropList
+            cdkDropListOrientation="horizontal"
+            [cdkDropListDisabled]="!config?.behavior?.reorderable"
+            (cdkDropListDropped)="onVisibleNavDrop($event)"
+            [disablePagination]="config?.nav?.disablePagination"
+            [fitInkBarToContent]="config?.nav?.fitInkBarToContent"
+            [mat-stretch-tabs]="config?.nav?.stretchTabs"
+            [color]="config?.nav?.color"
+            [backgroundColor]="config?.nav?.backgroundColor"
+            [selectedIndex]="selectedVisibleNavIndex()"
+            [attr.aria-label]="config?.nav?.ariaLabel || config?.group?.ariaLabel || null"
+            [attr.aria-labelledby]="config?.nav?.ariaLabelledby || config?.group?.ariaLabelledby || null"
+            [animationDuration]="effectiveAnimationDuration()"
+            (indexFocused)="indexFocused.emit($event)"
+            (selectFocusedIndex)="selectFocusedIndex.emit($event)"
             >
-              <ng-container *ngIf="(l.content?.length || safeWidgetDefinitions(l.widgets).length) && navContentReady(currentNavIndex()); else emptyNav">
-                <ng-container *ngIf="l.content">
-                  <ng-container
-                    dynamicFieldLoader
-                    [fields]="l.content || []"
-                    [formGroup]="effectiveContentForm()"
-                  ></ng-container>
-                </ng-container>
-                <ng-container *ngIf="safeWidgetDefinitions(l.widgets).length">
-                  <ng-container *ngFor="let w of safeWidgetDefinitions(l.widgets); let wi = index; trackBy: trackWidgetDefinition">
-                    <ng-container
-                      [dynamicWidgetLoader]="resolveWidgetDefinition(w)"
-                      [context]="context || {}"
-                      (widgetEvent)="emitWidgetEvent(linkEventPath(l.id, currentNavIndex()), $event)"
-                    ></ng-container>
-                  </ng-container>
-                </ng-container>
-              </ng-container>
-              <ng-template #emptyNav>
-                <praxis-empty-state-card
-                  [inline]="true"
-                  icon="add_to_queue"
-                  [title]="t('emptyState.navTitle', 'Sem conteudo neste link')"
-                  [description]="t('emptyState.navDescription', 'Adicione conteudo ou use o editor para configurar.')"
-                  [primaryAction]="{ label: t('emptyState.openEditor', 'Abrir editor'), icon: 'tune', action: openEditor.bind(this) }"
-                ></praxis-empty-state-card>
-              </ng-template>
-            </ng-container>
-          </div>
-        </mat-tab-nav-panel>
-      </ng-container>
-
-      <!-- Tab Group variant -->
-      <ng-template #groupMode>
-        <mat-tab-group
-          [dynamicHeight]="config?.group?.dynamicHeight"
-          [disableRipple]="config?.group?.disableRipple"
-          [disablePagination]="config?.group?.disablePagination"
-          [fitInkBarToContent]="config?.group?.fitInkBarToContent"
-          [headerPosition]="config?.group?.headerPosition ?? 'above'"
-          [preserveContent]="config?.group?.preserveContent"
-          [selectedIndex]="selectedVisibleTabIndex()"
-          [mat-stretch-tabs]="config?.group?.stretchTabs"
-          [mat-align-tabs]="config?.group?.alignTabs || 'start'"
-          [color]="config?.group?.color"
-          [backgroundColor]="config?.group?.backgroundColor"
-          [animationDuration]="effectiveAnimationDuration()"
-          [attr.aria-label]="config?.group?.ariaLabel || null"
-          [attr.aria-labelledby]="config?.group?.ariaLabelledby || null"
-          (animationDone)="animationDone.emit()"
-          (focusChange)="focusChange.emit($event)"
-          (selectedIndexChange)="onVisibleTabIndexChange($event)"
-          (selectedTabChange)="selectedTabChange.emit($event)"
-          class="praxis-tabs-group"
-        >
-          <mat-tab
-            *ngFor="let entry of visibleTabEntries(); let i = index; trackBy: trackVisibleTab"
-            [disabled]="entry.tab.disabled"
-            [labelClass]="entry.tab.labelClass ?? ''"
-            [bodyClass]="entry.tab.bodyClass ?? ''"
-            [id]="entry.tab.id || ''"
-            [attr.aria-label]="entry.tab.ariaLabel || null"
-            [attr.aria-labelledby]="entry.tab.ariaLabelledby || null"
-          >
-            <ng-template mat-tab-label>
-              <mat-icon *ngIf="entry.tab.icon" class="tab-label-icon" [praxisIcon]="entry.tab.icon"></mat-icon>
-              <span>{{ entry.tab.textLabel }}</span>
-              <button
-                *ngIf="config?.behavior?.closeable"
-                mat-icon-button
-                type="button"
-                (click)="closeTab(entry.index); $event.stopPropagation()"
-                (keydown.enter)="$event.stopPropagation()"
-                (keydown.space)="$event.stopPropagation()"
-                [attr.aria-label]="t('chrome.closeTab', 'Fechar aba')"
-              >
-                <mat-icon fontIcon="close"></mat-icon>
-              </button>
-              <ng-container *ngIf="config?.behavior?.reorderable">
-                <button
-                  mat-icon-button
-                  type="button"
-                  (click)="moveTab(entry.index, -1); $event.stopPropagation()"
-                  (keydown.enter)="$event.stopPropagation()"
-                  (keydown.space)="$event.stopPropagation()"
-                  [disabled]="entry.index===0"
-                  [attr.aria-label]="t('chrome.moveTabLeft', 'Mover aba para esquerda')"
+            @for (entry of visibleNavLinkEntries(); track trackVisibleNavLink(i, entry); let i = $index) {
+              <a
+                mat-tab-link
+                cdkDrag
+                [cdkDragDisabled]="!config?.behavior?.reorderable"
+                cdkDragLockAxis="x"
+                [active]="getNavActive(entry.index)"
+                [disabled]="entry.link.disabled"
+                [disableRipple]="config?.nav?.disableRipple || entry.link.disableRipple"
+                [fitInkBarToContent]="entry.link.fitInkBarToContent || false"
+                [id]="entry.link.id || ''"
+                (click)="onNavClick(entry.index)"
                 >
-                  <mat-icon fontIcon="arrow_back"></mat-icon>
-                </button>
-                <button
-                  mat-icon-button
-                  type="button"
-                  (click)="moveTab(entry.index, 1); $event.stopPropagation()"
-                  (keydown.enter)="$event.stopPropagation()"
-                  (keydown.space)="$event.stopPropagation()"
-                  [disabled]="entry.index===(config?.tabs?.length||1)-1"
-                  [attr.aria-label]="t('chrome.moveTabRight', 'Mover aba para direita')"
+                @if (config?.behavior?.reorderable) {
+                  <span class="drag-handle" cdkDragHandle>
+                    <mat-icon fontIcon="drag_indicator"></mat-icon>
+                  </span>
+                }
+                @if (entry.link.icon) {
+                  <mat-icon class="tab-label-icon" [praxisIcon]="entry.link.icon"></mat-icon>
+                }
+                {{ entry.link.label }}
+              </a>
+            }
+          </nav>
+          <mat-tab-nav-panel #tabPanel>
+            @if (currentNavIndex() >= 0) {
+              <div class="praxis-tabnav-content">
+                @if (config?.nav?.links?.[currentNavIndex()]; as l) {
+                  @if ((l.content?.length || safeWidgetDefinitions(l.widgets).length) && navContentReady(currentNavIndex())) {
+                    @if (l.content) {
+                      <ng-container
+                        dynamicFieldLoader
+                        [fields]="l.content || []"
+                        [formGroup]="effectiveContentForm()"
+                      ></ng-container>
+                    }
+                    @if (safeWidgetDefinitions(l.widgets).length) {
+                      @for (w of safeWidgetDefinitions(l.widgets); track trackWidgetDefinition(wi, w); let wi = $index) {
+                        <ng-container
+                          [dynamicWidgetLoader]="resolveWidgetDefinition(w)"
+                          [context]="context || {}"
+                          (widgetEvent)="emitWidgetEvent(linkEventPath(l.id, currentNavIndex()), $event)"
+                        ></ng-container>
+                      }
+                    }
+                  } @else {
+                    <praxis-empty-state-card
+                      [inline]="true"
+                      icon="add_to_queue"
+                      [title]="t('emptyState.navTitle', 'Sem conteudo neste link')"
+                      [description]="t('emptyState.navDescription', 'Adicione conteudo ou use o editor para configurar.')"
+                      [primaryAction]="{ label: t('emptyState.openEditor', 'Abrir editor'), icon: 'tune', action: openEditor.bind(this) }"
+                    ></praxis-empty-state-card>
+                  }
+                }
+              </div>
+            }
+          </mat-tab-nav-panel>
+        } @else {
+          <mat-tab-group
+            [dynamicHeight]="config?.group?.dynamicHeight"
+            [disableRipple]="config?.group?.disableRipple"
+            [disablePagination]="config?.group?.disablePagination"
+            [fitInkBarToContent]="config?.group?.fitInkBarToContent"
+            [headerPosition]="config?.group?.headerPosition ?? 'above'"
+            [preserveContent]="config?.group?.preserveContent"
+            [selectedIndex]="selectedVisibleTabIndex()"
+            [mat-stretch-tabs]="config?.group?.stretchTabs"
+            [mat-align-tabs]="config?.group?.alignTabs || 'start'"
+            [color]="config?.group?.color"
+            [backgroundColor]="config?.group?.backgroundColor"
+            [animationDuration]="effectiveAnimationDuration()"
+            [attr.aria-label]="config?.group?.ariaLabel || null"
+            [attr.aria-labelledby]="config?.group?.ariaLabelledby || null"
+            (animationDone)="animationDone.emit()"
+            (focusChange)="focusChange.emit($event)"
+            (selectedIndexChange)="onVisibleTabIndexChange($event)"
+            (selectedTabChange)="selectedTabChange.emit($event)"
+            class="praxis-tabs-group"
+            >
+            @for (entry of visibleTabEntries(); track trackVisibleTab(i, entry); let i = $index) {
+              <mat-tab
+                [disabled]="entry.tab.disabled"
+                [labelClass]="entry.tab.labelClass ?? ''"
+                [bodyClass]="entry.tab.bodyClass ?? ''"
+                [id]="entry.tab.id || ''"
+                [attr.aria-label]="entry.tab.ariaLabel || null"
+                [attr.aria-labelledby]="entry.tab.ariaLabelledby || null"
                 >
-                  <mat-icon fontIcon="arrow_forward"></mat-icon>
-                </button>
-              </ng-container>
-            </ng-template>
-
-            <ng-container *ngIf="(entry.tab.content?.length || safeWidgetDefinitions(entry.tab.widgets).length) && groupContentReady(entry.index); else emptyTab">
-              <ng-container *ngIf="entry.tab.content">
-                <ng-container
-                  dynamicFieldLoader
-                  [fields]="entry.tab.content || []"
-                  [formGroup]="effectiveContentForm()"
-                ></ng-container>
-              </ng-container>
-              <ng-container *ngIf="safeWidgetDefinitions(entry.tab.widgets).length">
-                <ng-container *ngFor="let w of safeWidgetDefinitions(entry.tab.widgets); let wi = index; trackBy: trackWidgetDefinition">
-                  <ng-container
-                    [dynamicWidgetLoader]="resolveWidgetDefinition(w)"
-                    [context]="context || {}"
-                    (widgetEvent)="emitWidgetEvent(tabEventPath(entry.tab.id, entry.index), $event)"
-                  ></ng-container>
-                </ng-container>
-              </ng-container>
-            </ng-container>
-            <ng-template #emptyTab>
-              <praxis-empty-state-card
-                [inline]="true"
-                icon="dashboard_customize"
-                [title]="t('emptyState.tabTitle', 'Sem conteudo nesta aba')"
-                [description]="t('emptyState.tabDescription', 'Adicione conteudo ou use o editor para configurar.')"
-                [primaryAction]="{ label: t('emptyState.openEditor', 'Abrir editor'), icon: 'tune', action: openEditor.bind(this) }"
-              ></praxis-empty-state-card>
-            </ng-template>
-          </mat-tab>
-        </mat-tab-group>
-      </ng-template>
-      </ng-template>
-
+                <ng-template mat-tab-label>
+                  @if (entry.tab.icon) {
+                    <mat-icon class="tab-label-icon" [praxisIcon]="entry.tab.icon"></mat-icon>
+                  }
+                  <span>{{ entry.tab.textLabel }}</span>
+                  @if (config?.behavior?.closeable) {
+                    <button
+                      mat-icon-button
+                      type="button"
+                      (click)="closeTab(entry.index); $event.stopPropagation()"
+                      (keydown.enter)="$event.stopPropagation()"
+                      (keydown.space)="$event.stopPropagation()"
+                      [attr.aria-label]="t('chrome.closeTab', 'Fechar aba')"
+                      >
+                      <mat-icon fontIcon="close"></mat-icon>
+                    </button>
+                  }
+                  @if (config?.behavior?.reorderable) {
+                    <button
+                      mat-icon-button
+                      type="button"
+                      (click)="moveTab(entry.index, -1); $event.stopPropagation()"
+                      (keydown.enter)="$event.stopPropagation()"
+                      (keydown.space)="$event.stopPropagation()"
+                      [disabled]="entry.index===0"
+                      [attr.aria-label]="t('chrome.moveTabLeft', 'Mover aba para esquerda')"
+                      >
+                      <mat-icon fontIcon="arrow_back"></mat-icon>
+                    </button>
+                    <button
+                      mat-icon-button
+                      type="button"
+                      (click)="moveTab(entry.index, 1); $event.stopPropagation()"
+                      (keydown.enter)="$event.stopPropagation()"
+                      (keydown.space)="$event.stopPropagation()"
+                      [disabled]="entry.index===(config?.tabs?.length||1)-1"
+                      [attr.aria-label]="t('chrome.moveTabRight', 'Mover aba para direita')"
+                      >
+                      <mat-icon fontIcon="arrow_forward"></mat-icon>
+                    </button>
+                  }
+                </ng-template>
+                @if ((entry.tab.content?.length || safeWidgetDefinitions(entry.tab.widgets).length) && groupContentReady(entry.index)) {
+                  @if (entry.tab.content) {
+                    <ng-container
+                      dynamicFieldLoader
+                      [fields]="entry.tab.content || []"
+                      [formGroup]="effectiveContentForm()"
+                    ></ng-container>
+                  }
+                  @if (safeWidgetDefinitions(entry.tab.widgets).length) {
+                    @for (w of safeWidgetDefinitions(entry.tab.widgets); track trackWidgetDefinition(wi, w); let wi = $index) {
+                      <ng-container
+                        [dynamicWidgetLoader]="resolveWidgetDefinition(w)"
+                        [context]="context || {}"
+                        (widgetEvent)="emitWidgetEvent(tabEventPath(entry.tab.id, entry.index), $event)"
+                      ></ng-container>
+                    }
+                  }
+                } @else {
+                  <praxis-empty-state-card
+                    [inline]="true"
+                    icon="dashboard_customize"
+                    [title]="t('emptyState.tabTitle', 'Sem conteudo nesta aba')"
+                    [description]="t('emptyState.tabDescription', 'Adicione conteudo ou use o editor para configurar.')"
+                    [primaryAction]="{ label: t('emptyState.openEditor', 'Abrir editor'), icon: 'tune', action: openEditor.bind(this) }"
+                  ></praxis-empty-state-card>
+                }
+              </mat-tab>
+            }
+          </mat-tab-group>
+        }
+        <!-- Tab Group variant -->
+      }
+    
+    
       <!-- Edit button -->
-      <button
-        *ngIf="enableCustomization"
-        mat-fab
-        class="edit-fab"
-        [attr.aria-label]="t('chrome.editTabs', 'Editar abas')"
-        (click)="openEditor()"
-      >
-        <mat-icon fontIcon="edit"></mat-icon>
-      </button>
-      <button
-        *ngIf="enableCustomization && tabsId"
-        mat-mini-fab
-        class="edit-fab edit-fab-secondary"
-        [attr.aria-label]="t('settings.resetPreferences', 'Redefinir preferencias de abas')"
-        (click)="resetPreferences()"
-        [matTooltip]="t('settings.resetPreferences', 'Redefinir preferencias de abas')"
-      >
-        <mat-icon [praxisIcon]="'restart_alt'"></mat-icon>
-      </button>
+      @if (enableCustomization) {
+        <button
+          mat-fab
+          class="edit-fab"
+          [attr.aria-label]="t('chrome.editTabs', 'Editar abas')"
+          (click)="openEditor()"
+          >
+          <mat-icon fontIcon="edit"></mat-icon>
+        </button>
+      }
+      @if (enableCustomization && tabsId) {
+        <button
+          mat-mini-fab
+          class="edit-fab edit-fab-secondary"
+          [attr.aria-label]="t('settings.resetPreferences', 'Redefinir preferencias de abas')"
+          (click)="resetPreferences()"
+          [matTooltip]="t('settings.resetPreferences', 'Redefinir preferencias de abas')"
+          >
+          <mat-icon [praxisIcon]="'restart_alt'"></mat-icon>
+        </button>
+      }
     </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, 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}.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}.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"] }]
+    `, changeDetection: ChangeDetectionStrategy.OnPush, 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}.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}.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"] }]
         }], propDecorators: { config: [{
                 type: Input
             }], tabsId: [{
@@ -4833,19 +4913,19 @@ class PraxisTabsWidgetConfigEditor {
             },
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisTabsWidgetConfigEditor, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: PraxisTabsWidgetConfigEditor, isStandalone: true, selector: "praxis-tabs-widget-config-editor", inputs: { inputs: "inputs", widgetKey: "widgetKey" }, viewQueries: [{ propertyName: "tabsEditor", first: true, predicate: ["tabsEditor"], descendants: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisTabsWidgetConfigEditor, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.14", type: PraxisTabsWidgetConfigEditor, isStandalone: true, selector: "praxis-tabs-widget-config-editor", inputs: { inputs: "inputs", widgetKey: "widgetKey" }, viewQueries: [{ propertyName: "tabsEditor", first: true, predicate: ["tabsEditor"], descendants: true }], ngImport: i0, template: `
     <section data-testid="tabs-widget-config-editor">
       <praxis-tabs-config-editor #tabsEditor [document]="editorDocument" />
     </section>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: PraxisTabsConfigEditor, selector: "praxis-tabs-config-editor", inputs: ["document"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: PraxisTabsConfigEditor, selector: "praxis-tabs-config-editor", inputs: ["document"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisTabsWidgetConfigEditor, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisTabsWidgetConfigEditor, decorators: [{
             type: Component,
             args: [{
                     selector: 'praxis-tabs-widget-config-editor',
                     standalone: true,
-                    imports: [CommonModule, PraxisTabsConfigEditor],
+                    imports: [PraxisTabsConfigEditor],
                     template: `
     <section data-testid="tabs-widget-config-editor">
       <praxis-tabs-config-editor #tabsEditor [document]="editorDocument" />