@praxisui/tabs 9.0.0-beta.2 → 9.0.0-beta.20

package/fesm2022/praxisui-tabs.mjs

@@ -364,6 +364,7 @@ const PRAXIS_TABS_PT_BR = {
     'editor.toggles.disablePagination': 'Sem paginação',
     'editor.toggles.disableRipple': 'Sem ripple',
     'editor.toggles.preserveContent': 'Preservar conteúdo',
+    'editor.toggles.renderBody': 'Renderizar conteúdo interno',
     'editor.toggles.stretchTabs': 'Esticar abas',
     'editor.toggles.highContrast': 'Alto contraste',
     'editor.toggles.reduceMotion': 'Reduzir movimento',
@@ -509,6 +510,7 @@ const PRAXIS_TABS_EN_US = {
     'editor.toggles.disablePagination': 'Disable pagination',
     'editor.toggles.disableRipple': 'Disable ripple',
     'editor.toggles.preserveContent': 'Preserve content',
+    'editor.toggles.renderBody': 'Render internal content',
     'editor.toggles.stretchTabs': 'Stretch tabs',
     'editor.toggles.highContrast': 'High contrast',
     'editor.toggles.reduceMotion': 'Reduce motion',
@@ -1116,6 +1118,7 @@ class PraxisTabsConfigEditor {
       <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.renderBody !== false" (ngModelChange)="group.renderBody = $event ? undefined : false; onAppearanceChange()">{{ t('editor.toggles.renderBody', 'Renderizar conteudo interno') }}</mat-slide-toggle>
       <mat-slide-toggle [(ngModel)]="group.stretchTabs" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.stretchTabs', 'Esticar abas') }}</mat-slide-toggle>
     </div>
     </div>
@@ -1197,6 +1200,7 @@ class PraxisTabsConfigEditor {
       <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.renderBody !== false" (ngModelChange)="nav.renderBody = $event ? undefined : false; onAppearanceChange()">{{ t('editor.toggles.renderBody', 'Renderizar conteudo interno') }}</mat-slide-toggle>
       <mat-slide-toggle [(ngModel)]="nav.stretchTabs" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.stretchTabs', 'Esticar abas') }}</mat-slide-toggle>
     </div>
     </div>
@@ -1656,6 +1660,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
       <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.renderBody !== false" (ngModelChange)="group.renderBody = $event ? undefined : false; onAppearanceChange()">{{ t('editor.toggles.renderBody', 'Renderizar conteudo interno') }}</mat-slide-toggle>
       <mat-slide-toggle [(ngModel)]="group.stretchTabs" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.stretchTabs', 'Esticar abas') }}</mat-slide-toggle>
     </div>
     </div>
@@ -1737,6 +1742,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
       <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.renderBody !== false" (ngModelChange)="nav.renderBody = $event ? undefined : false; onAppearanceChange()">{{ t('editor.toggles.renderBody', 'Renderizar conteudo interno') }}</mat-slide-toggle>
       <mat-slide-toggle [(ngModel)]="nav.stretchTabs" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.stretchTabs', 'Esticar abas') }}</mat-slide-toggle>
     </div>
     </div>
@@ -3964,6 +3970,12 @@ class PraxisTabs {
     groupContentReady(index) {
         return !this.isLazy() || this.groupLoaded.has(index) || this.selectedIndexSignal() === index;
     }
+    shouldRenderGroupBody() {
+        return this.config?.group?.renderBody !== false;
+    }
+    shouldRenderNavBody() {
+        return this.config?.nav?.renderBody !== false;
+    }
     navContentReady(index) {
         return !this.isLazy() || this.navLoaded.has(index) || this.currentNavIndex() === index;
     }
@@ -4360,8 +4372,11 @@ class PraxisTabs {
               </a>
             }
           </nav>
-          <mat-tab-nav-panel #tabPanel>
-            @if (currentNavIndex() >= 0) {
+          <mat-tab-nav-panel
+            #tabPanel
+            [class.praxis-tabs-nav-panel--header-only]="!shouldRenderNavBody()"
+            >
+            @if (shouldRenderNavBody() && currentNavIndex() >= 0) {
               <div class="praxis-tabnav-content">
                 @if (config?.nav?.links?.[currentNavIndex()]; as l) {
                   @if ((l.content?.length || safeWidgetDefinitions(l.widgets).length) && navContentReady(currentNavIndex())) {
@@ -4396,6 +4411,7 @@ class PraxisTabs {
           </mat-tab-nav-panel>
         } @else {
           <mat-tab-group
+            [class.praxis-tabs-group--header-only]="!shouldRenderGroupBody()"
             [dynamicHeight]="config?.group?.dynamicHeight"
             [disableRipple]="config?.group?.disableRipple"
             [disablePagination]="config?.group?.disablePagination"
@@ -4467,6 +4483,7 @@ class PraxisTabs {
                     </button>
                   }
                 </ng-template>
+                @if (shouldRenderGroupBody()) {
                 @if ((entry.tab.content?.length || safeWidgetDefinitions(entry.tab.widgets).length) && groupContentReady(entry.index)) {
                   @if (entry.tab.content) {
                     <ng-container
@@ -4493,6 +4510,7 @@ class PraxisTabs {
                     [primaryAction]="{ label: t('emptyState.openEditor', 'Abrir editor'), icon: 'tune', action: openEditor.bind(this) }"
                   ></praxis-empty-state-card>
                 }
+                }
               </mat-tab>
             }
           </mat-tab-group>
@@ -4524,7 +4542,7 @@ class PraxisTabs {
         </button>
       }
     </div>
-    `, isInline: true, styles: [".praxis-tabs-root{position:relative;display:block}.praxis-tabs-group.align-start .mat-mdc-tab-header{justify-content:flex-start}.praxis-tabs-group.align-center .mat-mdc-tab-header{justify-content:center}.praxis-tabs-group.align-end .mat-mdc-tab-header{justify-content:flex-end}.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", "recommendedIntents", "prompt", "statusText", "errorText", "testIdPrefix", "panelTestId", "submitTestId", "applyTestId", "primaryAction", "secondaryActions", "governanceActions", "busy", "canSubmit", "canApply", "submitOnEnter", "showAttachAction", "enablePastedAttachments", "enableFileAttachments", "attachmentAccept", "attachmentMultiple", "voiceInputMode", "voiceLanguage", "draggable", "resizable", "minWidth", "minHeight", "margin", "layout"], outputs: ["promptChange", "submitPrompt", "apply", "retryTurn", "cancelTurn", "shellAction", "close", "attach", "attachmentsPasted", "attachmentsSelected", "removeAttachment", "messageAction", "editMessage", "resendMessage", "quickReply", "recommendedIntent", "layoutChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, styles: [".praxis-tabs-root{position:relative;display:block}.praxis-tabs-group.align-start .mat-mdc-tab-header{justify-content:flex-start}.praxis-tabs-group.align-center .mat-mdc-tab-header{justify-content:center}.praxis-tabs-group.align-end .mat-mdc-tab-header{justify-content:flex-end}.praxis-tabs-group--header-only .mat-mdc-tab-body-wrapper,.praxis-tabs-nav-panel--header-only{display:none}.density-compact .mat-mdc-tab-body-content{padding:8px}.density-comfortable .mat-mdc-tab-body-content{padding:16px}.density-spacious .mat-mdc-tab-body-content{padding:24px}.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", "recommendedIntents", "prompt", "statusText", "errorText", "testIdPrefix", "panelTestId", "submitTestId", "applyTestId", "primaryAction", "secondaryActions", "governanceActions", "busy", "canSubmit", "canApply", "submitOnEnter", "showAttachAction", "enablePastedAttachments", "enableFileAttachments", "attachmentAccept", "attachmentMultiple", "voiceInputMode", "voiceLanguage", "draggable", "resizable", "minWidth", "minHeight", "margin", "layout"], outputs: ["promptChange", "submitPrompt", "apply", "retryTurn", "cancelTurn", "shellAction", "close", "attach", "attachmentsPasted", "attachmentsSelected", "removeAttachment", "messageAction", "editMessage", "resendMessage", "quickReply", "recommendedIntent", "layoutChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisTabs, decorators: [{
             type: Component,
@@ -4669,8 +4687,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
               </a>
             }
           </nav>
-          <mat-tab-nav-panel #tabPanel>
-            @if (currentNavIndex() >= 0) {
+          <mat-tab-nav-panel
+            #tabPanel
+            [class.praxis-tabs-nav-panel--header-only]="!shouldRenderNavBody()"
+            >
+            @if (shouldRenderNavBody() && currentNavIndex() >= 0) {
               <div class="praxis-tabnav-content">
                 @if (config?.nav?.links?.[currentNavIndex()]; as l) {
                   @if ((l.content?.length || safeWidgetDefinitions(l.widgets).length) && navContentReady(currentNavIndex())) {
@@ -4705,6 +4726,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
           </mat-tab-nav-panel>
         } @else {
           <mat-tab-group
+            [class.praxis-tabs-group--header-only]="!shouldRenderGroupBody()"
             [dynamicHeight]="config?.group?.dynamicHeight"
             [disableRipple]="config?.group?.disableRipple"
             [disablePagination]="config?.group?.disablePagination"
@@ -4776,6 +4798,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                     </button>
                   }
                 </ng-template>
+                @if (shouldRenderGroupBody()) {
                 @if ((entry.tab.content?.length || safeWidgetDefinitions(entry.tab.widgets).length) && groupContentReady(entry.index)) {
                   @if (entry.tab.content) {
                     <ng-container
@@ -4802,6 +4825,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                     [primaryAction]="{ label: t('emptyState.openEditor', 'Abrir editor'), icon: 'tune', action: openEditor.bind(this) }"
                   ></praxis-empty-state-card>
                 }
+                }
               </mat-tab>
             }
           </mat-tab-group>
@@ -4833,7 +4857,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
         </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}.praxis-tabs-group--header-only .mat-mdc-tab-body-wrapper,.praxis-tabs-nav-panel--header-only{display:none}.density-compact .mat-mdc-tab-body-content{padding:8px}.density-comfortable .mat-mdc-tab-body-content{padding:16px}.density-spacious .mat-mdc-tab-body-content{padding:24px}.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: [{
@@ -5094,7 +5118,7 @@ const PRAXIS_TABS_COMPONENT_METADATA = {
             name: 'selectedIndex',
             type: 'number',
             label: 'Indice selecionado',
-            description: 'Indice ativo de abas/nav controlavel externamente pela composicao',
+            description: 'Indice ativo de abas/nav controlavel externamente pela composicao. Para usar tabs como header de navegacao com conteudo externo, configure group.renderBody=false ou nav.renderBody=false.',
         },
         {
             name: 'enableCustomization',
@@ -5277,6 +5301,7 @@ const PRAXIS_TABS_AUTHORING_MANIFEST = {
         { kind: 'visibility', resolver: 'tab-or-link-by-id', description: 'Runtime visibility flag for a group tab or nav link.' },
         { kind: 'disabledState', resolver: 'tab-or-link-by-id', description: 'Disabled state of a tab or nav link.' },
         { kind: 'layout', resolver: 'tabs-layout-config', description: 'Group/nav mode, header position, density, stretch and behavior settings.' },
+        { kind: 'renderBody', resolver: 'tabs-render-body-config', description: 'Config paths group.renderBody and nav.renderBody that let the host own external body content.' },
     ],
     operations: [
         {

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@praxisui/tabs",
-  "version": "9.0.0-beta.2",
+  "version": "9.0.0-beta.20",
   "description": "Configurable tabs (group and nav) for Praxis UI with metadata-driven content and runtime editor.",
   "peerDependencies": {
     "@angular/common": "^21.0.0",
     "@angular/core": "^21.0.0",
     "@angular/material": "^21.0.0",
     "@angular/cdk": "^21.0.0",
-    "@praxisui/core": "^9.0.0-beta.2",
-    "@praxisui/dynamic-fields": "^9.0.0-beta.2",
-    "@praxisui/settings-panel": "^9.0.0-beta.2",
+    "@praxisui/core": "^9.0.0-beta.20",
+    "@praxisui/dynamic-fields": "^9.0.0-beta.20",
+    "@praxisui/settings-panel": "^9.0.0-beta.20",
     "@angular/forms": "^21.0.0",
     "@angular/router": "^21.0.0",
-    "@praxisui/ai": "^9.0.0-beta.2",
+    "@praxisui/ai": "^9.0.0-beta.20",
     "rxjs": "~7.8.0"
   },
   "dependencies": {
@@ -23,17 +23,11 @@
   "publishConfig": {
     "access": "public"
   },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/codexrodrigues/praxis-ui-angular.git"
-  },
-  "homepage": "https://praxisui.dev",
-  "bugs": {
-    "url": "https://github.com/codexrodrigues/praxis-ui-angular/issues"
-  },
+  "homepage": "https://praxisui.dev/components/tabs",
   "keywords": [
     "angular",
     "praxisui",
+    "praxis",
     "tabs",
     "navigation",
     "material",
@@ -49,7 +43,10 @@
     ".": {
       "types": "./types/praxisui-tabs.d.ts",
       "default": "./fesm2022/praxisui-tabs.mjs"
+    },
+    "./ai/component-registry.json": {
+      "default": "./ai/component-registry.json"
     }
   },
   "type": "module"
-}
+}

package/src/lib/praxis-tabs-config-editor.json-api.md

@@ -22,8 +22,8 @@ source_of_truth:
   - "projects/praxis-tabs/src/lib/praxis-tabs.ts"
   - "projects/praxis-tabs/src/lib/quick-setup/tabs-quick-setup.component.ts"
   - "projects/praxis-tabs/src/lib/ai/tabs-ai-capabilities.ts"
-source_of_truth_last_verified: "2026-03-05"
-last_updated: "2026-03-05"
+source_of_truth_last_verified: "2026-06-24"
+last_updated: "2026-06-24"
 toc: true
 sidebar: true
 tags:
@@ -90,9 +90,11 @@ Este documento e a referencia canonica da API JSON de praxis-tabs-config-editor.
 | `accessibility.highContrast/reduceMotion` | not-specified | not-specified | n/a | Active | Preservado da documentação anterior. |
 | `accessibility.ariaLabels/keyboardNavigation` | not-specified | not-specified | n/a | Declared-only | Preservado no contrato JSON, sem superficie ativa na UI. |
 | `group.*` | not-specified | not-specified | n/a | Partial | Preservado da documentação anterior. |
+| `group.renderBody` | boolean | no | true | Active | Quando `false`, o group mode renderiza apenas o header de abas; o conteudo ativo fica sob controle externo do host. |
 | `tabs[]` | not-specified | not-specified | n/a | Active | Preservado da documentação anterior. |
 | `tabs[].content` | not-specified | not-specified | n/a | Partial | Preservado da documentação anterior. |
 | `nav.*` | not-specified | not-specified | n/a | Active | Preservado da documentação anterior. |
+| `nav.renderBody` | boolean | no | true | Active | Quando `false`, o nav mode renderiza apenas o header de links; o conteudo ativo fica sob controle externo do host. |
 | `nav.links[]` | not-specified | not-specified | n/a | Active | Preservado da documentação anterior. |
 
 ### Supported legacy paths
@@ -493,11 +495,13 @@ Risco conhecido:
 | `group.disablePagination` | Active | guia Grupo |
 | `group.disableRipple` | Active | guia Grupo |
 | `group.preserveContent` | Active | guia Grupo |
+| `group.renderBody` | Active | guia Grupo |
 | `group.stretchTabs` | Active | guia Grupo |
 | `nav.selectedIndex` | Active | guia Navegacao |
 | `nav.animationDuration` | Active | guia Navegacao |
 | `nav.ariaLabel` | Active | guia Navegacao |
 | `nav.ariaLabelledby` | Active | guia Navegacao |
+| `nav.renderBody` | Active | guia Navegacao |
 | `nav.color` | Active | guia Navegacao |
 | `nav.backgroundColor` | Active | guia Navegacao |
 | `nav.fitInkBarToContent` | Active | guia Navegacao |

package/types/praxisui-tabs.d.ts

@@ -98,6 +98,8 @@ interface TabGroupMetadata {
     fitInkBarToContent?: boolean;
     headerPosition?: 'above' | 'below';
     preserveContent?: boolean;
+    /** Quando false, renderiza apenas o header de abas; o conteudo fica sob controle externo do host. */
+    renderBody?: boolean;
     selectedIndex?: number;
     stretchTabs?: boolean;
     backgroundColor?: 'primary' | 'accent' | 'warn' | undefined;
@@ -127,6 +129,8 @@ interface TabNavMetadata {
     disablePagination?: boolean;
     disableRipple?: boolean;
     fitInkBarToContent?: boolean;
+    /** Quando false, renderiza apenas o header de nav; o conteudo fica sob controle externo do host. */
+    renderBody?: boolean;
     selectedIndex?: number;
     stretchTabs?: boolean;
     links: TabLinkMetadata[];
@@ -276,6 +280,8 @@ declare class PraxisTabs implements OnInit, OnChanges, OnDestroy {
     applyConfigFromAdapter(next: TabsMetadata): void;
     private isLazy;
     protected groupContentReady(index: number): boolean;
+    protected shouldRenderGroupBody(): boolean;
+    protected shouldRenderNavBody(): boolean;
     protected navContentReady(index: number): boolean;
     protected isEmptyGlobal(): boolean;
     protected trackVisibleNavLink(index: number, entry: {