@praxisui/core 1.0.0-beta.7 → 1.0.0-beta.8

package/README.md

@@ -105,6 +105,54 @@ Observação: os IDs de widgets usados na página devem estar registrados via `C
   [`public-api.ts`](https://github.com/codexrodrigues/praxis/blob/main/frontend-libs/praxis-ui-workspace/projects/praxis-core/src/public-api.ts)
   para a lista consolidada de serviços, tokens, modelos e utilitários disponíveis para importação.
 
+## 🔎 Schema Viewer (para Showcases)
+
+Para exibir os metadados e schemas usados por um exemplo (ex.: na aba “Schema” de um showcase), use o componente `SchemaViewerComponent` e (opcionalmente) injete o contexto via `SCHEMA_VIEWER_CONTEXT`.
+
+```ts
+import { Component, Provider } from '@angular/core';
+import { PraxisTabs, TabsMetadata } from '@praxisui/tabs';
+import { SchemaViewerComponent, SCHEMA_VIEWER_CONTEXT } from '@praxisui/core';
+
+@Component({
+  standalone: true,
+  selector: 'app-tabs-showcase',
+  imports: [PraxisTabs, SchemaViewerComponent],
+  template: `
+    <!-- Aba Preview -->
+    <praxis-tabs [config]="tabs"></praxis-tabs>
+
+    <!-- Aba Schema -->
+    <praxis-schema-viewer [context]="schemaCtx"></praxis-schema-viewer>
+  `,
+  providers: [
+    {
+      provide: SCHEMA_VIEWER_CONTEXT,
+      useFactory: () => ({
+        componentId: 'praxis-tabs',
+        title: 'Tabs — Schema & Metadata',
+        rawConfig: {
+          group: { alignTabs: 'center', dynamicHeight: true },
+          tabs: [ { id: 't1', textLabel: 'Dados', content: [] } ],
+        } satisfies TabsMetadata,
+      }),
+    } as Provider,
+  ],
+})
+export class TabsShowcaseComponent {
+  tabs: TabsMetadata = { group: { dynamicHeight: true }, tabs: [] };
+  schemaCtx = {
+    componentId: 'praxis-tabs',
+    rawConfig: this.tabs,
+  };
+}
+```
+
+Campos opcionais do contexto (`SchemaViewerContext`):
+- `rawConfig` (JSON usado pelo exemplo), `effectiveConfig` (se houver merge de defaults);
+- `backendSchema` (OpenAPI/JSON Schema) e `schemaMeta` (path/operation/schemaType/schemaHash);
+- `normalizedFields` (se já normalizado; caso contrário, o componente aplica `SchemaNormalizerService`).
+
 ## 🧩 Compatibilidade
 
 - `@praxisui/core` `1.0.0-beta.x` → Angular `20.x`

package/fesm2022/praxisui-core.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, InjectionToken, Injectable, inject, APP_INITIALIZER, Inject, makeEnvironmentProviders, ViewContainerRef, EventEmitter, Output, Input, Directive, signal, computed, HostListener, Optional } from '@angular/core';
+import { Component, InjectionToken, Injectable, inject, APP_INITIALIZER, Inject, makeEnvironmentProviders, ViewContainerRef, EventEmitter, Output, Input, Directive, signal, computed, HostListener, Optional, ChangeDetectionStrategy } from '@angular/core';
 import * as i1 from '@angular/common/http';
 import { HttpHeaders, HttpClient, HttpParams } from '@angular/common/http';
 import { BehaviorSubject, from, of, EMPTY, throwError, firstValueFrom } from 'rxjs';
@@ -8,20 +8,22 @@ import * as i1$1 from '@angular/forms';
 import { Validators, FormGroup, FormControl, FormsModule } from '@angular/forms';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i2$1 from '@angular/material/card';
+import * as i3 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
-import * as i3 from '@angular/material/button';
+import * as i3$1 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i4 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i2$2 from '@angular/material/form-field';
+import * as i2$1 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i3$1 from '@angular/material/input';
+import * as i3$2 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
 import * as i8 from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
 import * as i1$2 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule, MatDialog } from '@angular/material/dialog';
+import * as i2$2 from '@angular/material/tabs';
+import { MatTabsModule } from '@angular/material/tabs';
 
 class PraxisCore {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: PraxisCore, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -5744,7 +5746,7 @@ class EmptyStateCardComponent {
         </div>
       </mat-card-content>
     </mat-card>
-  `, isInline: true, styles: [".empty-card{display:block;margin:12px}.empty-card.empty-inline{margin:8px 0}.content{display:flex;align-items:center;gap:12px}.icon{font-size:32px;width:32px;height:32px;opacity:.9}.title{margin:0;font-size:16px;font-weight:600}.desc{margin:4px 0 0;opacity:.76}.actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i2$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i2$1.MatCardContent, selector: "mat-card-content" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+  `, isInline: true, styles: [".empty-card{display:block;margin:12px}.empty-card.empty-inline{margin:8px 0}.content{display:flex;align-items:center;gap:12px}.icon{font-size:32px;width:32px;height:32px;opacity:.9}.title{margin:0;font-size:16px;font-weight:600}.desc{margin:4px 0 0;opacity:.76}.actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3.MatCardContent, selector: "mat-card-content" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: EmptyStateCardComponent, decorators: [{
             type: Component,
@@ -5898,7 +5900,7 @@ class ResourceQuickConnectComponent {
       </mat-form-field>
       <small style="opacity:.75">Conecte o componente à fonte de dados (ex.: /api/&lt;rota-do-recurso&gt;)</small>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$1.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.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.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.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ResourceQuickConnectComponent, decorators: [{
             type: Component,
@@ -6087,7 +6089,7 @@ class PraxisIconPickerComponent {
       <span class="pip-typed" *ngIf="query.trim()">{{ previewValue() }}</span>
     </div>
   </div>
-  `, isInline: true, styles: [".pip-root{display:flex;flex-direction:column;min-width:340px;max-width:760px;max-height:80vh;overflow:hidden;padding:16px}.pip-head{display:flex;gap:12px;align-items:center;margin-bottom:12px}.pip-search{flex:1;min-width:180px}.pip-spacer{flex:1}.pip-body{flex:1;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;padding:4px}.pip-item{display:flex;gap:10px;align-items:center;justify-content:flex-start;padding:10px;border:1px solid rgba(0,0,0,.08);border-radius:10px;background:var(--md-sys-color-surface);cursor:pointer}.pip-item:hover{background:#0000000a}.pip-name{font-size:12px;color:#0009;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.pip-hint{font-size:12px;color:#0009;margin:-6px 0 8px}.pip-footer{display:flex;gap:12px;align-items:center;margin-top:10px}.pip-typed{font-family:monospace;font-size:12px;color:#000000b3}.pip-family{display:flex;align-items:center}.pip-family .mat-mdc-chip-listbox{min-width:260px}.pip-root .mat-icon{font-family:Material Icons,Material Symbols Outlined,Material Symbols Rounded,Material Symbols Sharp!important;font-variation-settings:\"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 24}.material-symbols-outlined{font-family:Material Symbols Outlined;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased;font-variation-settings:\"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 24}.material-symbols-rounded{font-family:Material Symbols Rounded;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased;font-variation-settings:\"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 24}.material-symbols-sharp{font-family:Material Symbols Sharp;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased;font-variation-settings:\"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 24}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$1.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.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i8.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i8.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "ngmodule", type: MatDialogModule }] });
+  `, isInline: true, styles: [".pip-root{display:flex;flex-direction:column;min-width:340px;max-width:760px;max-height:80vh;overflow:hidden;padding:16px}.pip-head{display:flex;gap:12px;align-items:center;margin-bottom:12px}.pip-search{flex:1;min-width:180px}.pip-spacer{flex:1}.pip-body{flex:1;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;padding:4px}.pip-item{display:flex;gap:10px;align-items:center;justify-content:flex-start;padding:10px;border:1px solid rgba(0,0,0,.08);border-radius:10px;background:var(--md-sys-color-surface);cursor:pointer}.pip-item:hover{background:#0000000a}.pip-name{font-size:12px;color:#0009;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.pip-hint{font-size:12px;color:#0009;margin:-6px 0 8px}.pip-footer{display:flex;gap:12px;align-items:center;margin-top:10px}.pip-typed{font-family:monospace;font-size:12px;color:#000000b3}.pip-family{display:flex;align-items:center}.pip-family .mat-mdc-chip-listbox{min-width:260px}.pip-root .mat-icon{font-family:Material Icons,Material Symbols Outlined,Material Symbols Rounded,Material Symbols Sharp!important;font-variation-settings:\"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 24}.material-symbols-outlined{font-family:Material Symbols Outlined;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased;font-variation-settings:\"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 24}.material-symbols-rounded{font-family:Material Symbols Rounded;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased;font-variation-settings:\"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 24}.material-symbols-sharp{font-family:Material Symbols Sharp;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased;font-variation-settings:\"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 24}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.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.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i8.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i8.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "ngmodule", type: MatDialogModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: PraxisIconPickerComponent, decorators: [{
             type: Component,
@@ -6190,6 +6192,246 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
             args: [{ providedIn: 'root' }]
         }] });
 
+/** Optional DI token used by SchemaViewer when input is not provided. */
+const SCHEMA_VIEWER_CONTEXT = new InjectionToken('SCHEMA_VIEWER_CONTEXT');
+
+class SchemaViewerComponent {
+    registry = inject(ComponentMetadataRegistry);
+    normalizer = inject(SchemaNormalizerService);
+    injected = inject(SCHEMA_VIEWER_CONTEXT, { optional: true });
+    context;
+    // Internal reactive state
+    _ctx = signal(undefined, ...(ngDevMode ? [{ debugName: "_ctx" }] : []));
+    ctx = computed(() => this._ctx(), ...(ngDevMode ? [{ debugName: "ctx" }] : []));
+    _componentMeta = signal(undefined, ...(ngDevMode ? [{ debugName: "_componentMeta" }] : []));
+    componentMeta = computed(() => this._componentMeta(), ...(ngDevMode ? [{ debugName: "componentMeta" }] : []));
+    _normalizedFields = signal([], ...(ngDevMode ? [{ debugName: "_normalizedFields" }] : []));
+    normalizedFields = computed(() => this._normalizedFields(), ...(ngDevMode ? [{ debugName: "normalizedFields" }] : []));
+    ngOnChanges(changes) {
+        if ('context' in changes) {
+            this.refresh();
+        }
+    }
+    refresh() {
+        const ctx = this.context || this.injected || undefined;
+        this._ctx.set(ctx);
+        if (!ctx) {
+            this._componentMeta.set(undefined);
+            this._normalizedFields.set([]);
+            return;
+        }
+        const meta = ctx.componentId ? this.registry.get(ctx.componentId) : undefined;
+        this._componentMeta.set(meta);
+        // Compute normalized fields if needed
+        if (ctx.normalizedFields && ctx.normalizedFields.length) {
+            this._normalizedFields.set(ctx.normalizedFields);
+        }
+        else if (ctx.backendSchema) {
+            try {
+                const defs = this.normalizer.normalizeSchema(ctx.backendSchema);
+                this._normalizedFields.set(defs || []);
+            }
+            catch {
+                this._normalizedFields.set([]);
+            }
+        }
+        else {
+            this._normalizedFields.set([]);
+        }
+    }
+    hasAnyData() {
+        const c = this._ctx();
+        return !!(c?.rawConfig || c?.effectiveConfig || c?.backendSchema || (this._normalizedFields()?.length));
+    }
+    copyAll() {
+        const c = this._ctx();
+        const payload = {
+            component: this._componentMeta(),
+            config: { raw: c?.rawConfig, effective: c?.effectiveConfig },
+            backendSchema: { meta: c?.schemaMeta, body: c?.backendSchema },
+            fields: this._normalizedFields(),
+        };
+        try {
+            const text = JSON.stringify(payload, null, 2);
+            if (typeof navigator !== 'undefined' && navigator.clipboard?.writeText) {
+                navigator.clipboard.writeText(text);
+            }
+            else {
+                // Fallback: create a temp textarea
+                const ta = document.createElement('textarea');
+                ta.value = text;
+                document.body.appendChild(ta);
+                ta.select();
+                document.execCommand('copy');
+                document.body.removeChild(ta);
+            }
+        }
+        catch { }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SchemaViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.4", type: SchemaViewerComponent, isStandalone: true, selector: "praxis-schema-viewer", inputs: { context: "context" }, usesOnChanges: true, ngImport: i0, template: `
+    <mat-card class="schema-viewer" appearance="outlined">
+      <mat-card-header>
+        <div class="header">
+          <div class="title">
+            <mat-icon fontIcon="schema"></mat-icon>
+            <h3>{{ ctx()?.title || 'Schema & Metadata' }}</h3>
+          </div>
+          <div class="actions">
+            <button mat-stroked-button color="primary" (click)="copyAll()" [disabled]="!hasAnyData()">
+              <mat-icon>content_copy</mat-icon>
+              Copiar tudo
+            </button>
+          </div>
+        </div>
+        <div class="notes" *ngIf="ctx()?.notes">{{ ctx()?.notes }}</div>
+      </mat-card-header>
+      <mat-card-content>
+        <mat-tab-group>
+          <mat-tab label="Component">
+            <div class="section">
+              <div class="kv"><span>Id</span><code>{{ componentMeta()?.id }}</code></div>
+              <div class="kv"><span>Selector</span><code>{{ componentMeta()?.selector }}</code></div>
+              <div class="kv"><span>Lib</span><code>{{ componentMeta()?.lib || '—' }}</code></div>
+              <div class="kv"><span>Friendly</span><code>{{ componentMeta()?.friendlyName }}</code></div>
+              <div class="kv" *ngIf="componentMeta()?.description"><span>Descrição</span><code>{{ componentMeta()?.description }}</code></div>
+
+              <div class="sub">Inputs</div>
+              <pre class="pretty" *ngIf="componentMeta()?.inputs?.length; else noInputs">{{ componentMeta()?.inputs | json }}</pre>
+              <ng-template #noInputs><div class="muted">Sem inputs documentados.</div></ng-template>
+
+              <div class="sub">Outputs</div>
+              <pre class="pretty" *ngIf="componentMeta()?.outputs?.length; else noOutputs">{{ componentMeta()?.outputs | json }}</pre>
+              <ng-template #noOutputs><div class="muted">Sem outputs documentados.</div></ng-template>
+            </div>
+          </mat-tab>
+
+          <mat-tab label="Config">
+            <div class="section">
+              <div class="sub">Raw</div>
+              <pre class="pretty" *ngIf="ctx()?.rawConfig as rc; else noRaw">{{ rc | json }}</pre>
+              <ng-template #noRaw><div class="muted">Sem configuração fornecida.</div></ng-template>
+
+              <div class="sub">Effective</div>
+              <pre class="pretty" *ngIf="ctx()?.effectiveConfig as ec; else noEff">{{ ec | json }}</pre>
+              <ng-template #noEff><div class="muted">Sem configuração efetiva (usando raw/defaults do componente).</div></ng-template>
+            </div>
+          </mat-tab>
+
+          <mat-tab label="Backend Schema">
+            <div class="section">
+              <div class="kv" *ngIf="ctx()?.schemaMeta as m">
+                <span>Path</span><code>{{ m.path }}</code>
+              </div>
+              <div class="kv" *ngIf="ctx()?.schemaMeta as m">
+                <span>Operation</span><code>{{ m.operation }}</code>
+              </div>
+              <div class="kv" *ngIf="ctx()?.schemaMeta as m">
+                <span>Schema Type</span><code>{{ m.schemaType }}</code>
+              </div>
+              <div class="kv" *ngIf="ctx()?.schemaMeta?.schemaHash">
+                <span>Server Hash</span><code>{{ ctx()?.schemaMeta?.schemaHash }}</code>
+              </div>
+              <pre class="pretty" *ngIf="ctx()?.backendSchema as bs; else noSchema">{{ bs | json }}</pre>
+              <ng-template #noSchema><div class="muted">Sem schema de backend.</div></ng-template>
+            </div>
+          </mat-tab>
+
+          <mat-tab label="Fields">
+            <div class="section">
+              <div class="muted" *ngIf="!normalizedFields()?.length">Sem campos normalizados.</div>
+              <pre class="pretty" *ngIf="normalizedFields()?.length">{{ normalizedFields() | json }}</pre>
+            </div>
+          </mat-tab>
+        </mat-tab-group>
+      </mat-card-content>
+    </mat-card>
+  `, isInline: true, styles: [".schema-viewer{display:block}.header{display:flex;align-items:center;justify-content:space-between;gap:8px}.title{display:flex;align-items:center;gap:8px}.title h3{margin:0;font-weight:600}.notes{margin-top:6px;opacity:.78;font-size:12px}.section{padding:12px}.sub{font-weight:600;margin:12px 0 4px;opacity:.9}.pretty{background:#0b0b0b0d;padding:8px;border-radius:4px;overflow:auto}.kv{display:grid;grid-template-columns:140px 1fr;align-items:baseline;gap:8px;margin:2px 0}.kv>span{opacity:.75}.kv>code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.muted{opacity:.6}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i2$2.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i2$2.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: MatCardModule }, { kind: "component", type: i3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3.MatCardHeader, selector: "mat-card-header" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i2.JsonPipe, name: "json" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SchemaViewerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'praxis-schema-viewer', standalone: true, imports: [CommonModule, MatTabsModule, MatCardModule, MatButtonModule, MatIconModule], template: `
+    <mat-card class="schema-viewer" appearance="outlined">
+      <mat-card-header>
+        <div class="header">
+          <div class="title">
+            <mat-icon fontIcon="schema"></mat-icon>
+            <h3>{{ ctx()?.title || 'Schema & Metadata' }}</h3>
+          </div>
+          <div class="actions">
+            <button mat-stroked-button color="primary" (click)="copyAll()" [disabled]="!hasAnyData()">
+              <mat-icon>content_copy</mat-icon>
+              Copiar tudo
+            </button>
+          </div>
+        </div>
+        <div class="notes" *ngIf="ctx()?.notes">{{ ctx()?.notes }}</div>
+      </mat-card-header>
+      <mat-card-content>
+        <mat-tab-group>
+          <mat-tab label="Component">
+            <div class="section">
+              <div class="kv"><span>Id</span><code>{{ componentMeta()?.id }}</code></div>
+              <div class="kv"><span>Selector</span><code>{{ componentMeta()?.selector }}</code></div>
+              <div class="kv"><span>Lib</span><code>{{ componentMeta()?.lib || '—' }}</code></div>
+              <div class="kv"><span>Friendly</span><code>{{ componentMeta()?.friendlyName }}</code></div>
+              <div class="kv" *ngIf="componentMeta()?.description"><span>Descrição</span><code>{{ componentMeta()?.description }}</code></div>
+
+              <div class="sub">Inputs</div>
+              <pre class="pretty" *ngIf="componentMeta()?.inputs?.length; else noInputs">{{ componentMeta()?.inputs | json }}</pre>
+              <ng-template #noInputs><div class="muted">Sem inputs documentados.</div></ng-template>
+
+              <div class="sub">Outputs</div>
+              <pre class="pretty" *ngIf="componentMeta()?.outputs?.length; else noOutputs">{{ componentMeta()?.outputs | json }}</pre>
+              <ng-template #noOutputs><div class="muted">Sem outputs documentados.</div></ng-template>
+            </div>
+          </mat-tab>
+
+          <mat-tab label="Config">
+            <div class="section">
+              <div class="sub">Raw</div>
+              <pre class="pretty" *ngIf="ctx()?.rawConfig as rc; else noRaw">{{ rc | json }}</pre>
+              <ng-template #noRaw><div class="muted">Sem configuração fornecida.</div></ng-template>
+
+              <div class="sub">Effective</div>
+              <pre class="pretty" *ngIf="ctx()?.effectiveConfig as ec; else noEff">{{ ec | json }}</pre>
+              <ng-template #noEff><div class="muted">Sem configuração efetiva (usando raw/defaults do componente).</div></ng-template>
+            </div>
+          </mat-tab>
+
+          <mat-tab label="Backend Schema">
+            <div class="section">
+              <div class="kv" *ngIf="ctx()?.schemaMeta as m">
+                <span>Path</span><code>{{ m.path }}</code>
+              </div>
+              <div class="kv" *ngIf="ctx()?.schemaMeta as m">
+                <span>Operation</span><code>{{ m.operation }}</code>
+              </div>
+              <div class="kv" *ngIf="ctx()?.schemaMeta as m">
+                <span>Schema Type</span><code>{{ m.schemaType }}</code>
+              </div>
+              <div class="kv" *ngIf="ctx()?.schemaMeta?.schemaHash">
+                <span>Server Hash</span><code>{{ ctx()?.schemaMeta?.schemaHash }}</code>
+              </div>
+              <pre class="pretty" *ngIf="ctx()?.backendSchema as bs; else noSchema">{{ bs | json }}</pre>
+              <ng-template #noSchema><div class="muted">Sem schema de backend.</div></ng-template>
+            </div>
+          </mat-tab>
+
+          <mat-tab label="Fields">
+            <div class="section">
+              <div class="muted" *ngIf="!normalizedFields()?.length">Sem campos normalizados.</div>
+              <pre class="pretty" *ngIf="normalizedFields()?.length">{{ normalizedFields() | json }}</pre>
+            </div>
+          </mat-tab>
+        </mat-tab-group>
+      </mat-card-content>
+    </mat-card>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".schema-viewer{display:block}.header{display:flex;align-items:center;justify-content:space-between;gap:8px}.title{display:flex;align-items:center;gap:8px}.title h3{margin:0;font-weight:600}.notes{margin-top:6px;opacity:.78;font-size:12px}.section{padding:12px}.sub{font-weight:600;margin:12px 0 4px;opacity:.9}.pretty{background:#0b0b0b0d;padding:8px;border-radius:4px;overflow:auto}.kv{display:grid;grid-template-columns:140px 1fr;align-items:baseline;gap:8px;margin:2px 0}.kv>span{opacity:.75}.kv>code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.muted{opacity:.6}\n"] }]
+        }], propDecorators: { context: [{
+                type: Input
+            }] } });
+
 async function fetchWithETag(params) {
     const headers = { Accept: 'application/json' };
     if (params.schemaHash)
@@ -6788,5 +7030,5 @@ function provideHookWhitelist(allowed) {
  * Generated bundle index. Do not edit.
  */
 
-export { API_URL, AllowedFileTypes, ApiEndpoint, CONFIG_STORAGE, CONNECTION_STORAGE, ComponentMetadataRegistry, ConnectionManagerService, DEFAULT_TABLE_CONFIG, DynamicFormService, DynamicGridPageComponent, DynamicWidgetLoaderDirective, DynamicWidgetPageComponent, EmptyStateCardComponent, ErrorMessageService, FORM_HOOKS, FORM_HOOKS_PRESETS, FORM_HOOKS_WHITELIST, FORM_HOOK_RESOLVERS, FieldControlType, FieldDataType, FormHooksRegistry, GLOBAL_CONFIG, GenericCrudService, GlobalConfigService, IconPickerService, IconPosition, IconSize, LocalConnectionStorage, LocalStorageCacheAdapter, LocalStorageConfigService, NumericFormat, OVERLAY_DECIDER_DEBUG, OVERLAY_DECISION_MATRIX, OverlayDeciderService, PraxisCore, PraxisIconDirective, PraxisIconPickerComponent, ResourceQuickConnectComponent, SETTINGS_PANEL_BRIDGE, SETTINGS_PANEL_DATA, STEPPER_CONFIG_EDITOR, SchemaMetadataClient, SchemaNormalizerService, TABLE_CONFIG_EDITOR, TableConfigService, TelemetryService, ValidationPattern, applyLocalCustomizations$2 as applyLocalCustomizations, applyLocalCustomizations$1 as applyLocalFormCustomizations, buildAngularValidators, buildApiUrl, buildBaseColumnFromDef, buildBaseFormField, buildHeaders, buildPageKey, buildSchemaId, buildValidatorsFromValidatorOptions, cancelIfCpfInvalidHook, cloneTableConfig, cnpjAlphaValidator, collapseWhitespace, composeHeadersWithVersion, conditionalAsyncValidator, convertFormLayoutToConfig, createCpfCnpjValidator, createDefaultFormConfig, createDefaultTableConfig, createEmptyFormConfig, createPersistedPage, customAsyncValidatorFn, customValidatorFn, debounceAsyncValidator, deepMerge, ensureIds, ensureNoConflictsHookFactory, ensurePageIds, fetchWithETag, fileTypeValidator, fillUndefined, generateId, getEssentialConfig, getReferencedFieldMetadata, getTextTransformer, isCssTextTransform, isTableConfigV2, isValidFormConfig, isValidTableConfig, legacyCnpjValidator, legacyCpfValidator, logOnErrorHook, mapFieldDefinitionToMetadata, mapFieldDefinitionsToMetadata, matchFieldValidator, maxFileSizeValidator, mergeFieldMetadata, mergeTableConfigs, minWordsValidator, normalizeFieldConstraints, normalizeFormConfig, normalizeFormMetadata, normalizePath, notifySuccessHook, prefillFromContextHook, provideDefaultFormHooks, provideFormHookPresets, provideFormHooks, provideGlobalConfig, provideGlobalConfigSeed, provideGlobalConfigTenant, provideHookResolvers, provideHookWhitelist, provideOverlayDecisionMatrix, provideRemoteGlobalConfig, reconcileFilterConfig, reconcileFormConfig, reconcileTableConfig, removeDiacritics, reportTelemetryHookFactory, requiredCheckedValidator, resolveHidden, resolveOffset, resolveOrder, resolveSpan, slugify, stripMasksHook, syncWithServerMetadata, toCamel, toCapitalize, toKebab, toPascal, toSentenceCase, toSnake, toTitleCase, trim, uniqueAsyncValidator, urlValidator, withMessage };
+export { API_URL, AllowedFileTypes, ApiEndpoint, CONFIG_STORAGE, CONNECTION_STORAGE, ComponentMetadataRegistry, ConnectionManagerService, DEFAULT_TABLE_CONFIG, DynamicFormService, DynamicGridPageComponent, DynamicWidgetLoaderDirective, DynamicWidgetPageComponent, EmptyStateCardComponent, ErrorMessageService, FORM_HOOKS, FORM_HOOKS_PRESETS, FORM_HOOKS_WHITELIST, FORM_HOOK_RESOLVERS, FieldControlType, FieldDataType, FormHooksRegistry, GLOBAL_CONFIG, GenericCrudService, GlobalConfigService, IconPickerService, IconPosition, IconSize, LocalConnectionStorage, LocalStorageCacheAdapter, LocalStorageConfigService, NumericFormat, OVERLAY_DECIDER_DEBUG, OVERLAY_DECISION_MATRIX, OverlayDeciderService, PraxisCore, PraxisIconDirective, PraxisIconPickerComponent, ResourceQuickConnectComponent, SCHEMA_VIEWER_CONTEXT, SETTINGS_PANEL_BRIDGE, SETTINGS_PANEL_DATA, STEPPER_CONFIG_EDITOR, SchemaMetadataClient, SchemaNormalizerService, SchemaViewerComponent, TABLE_CONFIG_EDITOR, TableConfigService, TelemetryService, ValidationPattern, applyLocalCustomizations$2 as applyLocalCustomizations, applyLocalCustomizations$1 as applyLocalFormCustomizations, buildAngularValidators, buildApiUrl, buildBaseColumnFromDef, buildBaseFormField, buildHeaders, buildPageKey, buildSchemaId, buildValidatorsFromValidatorOptions, cancelIfCpfInvalidHook, cloneTableConfig, cnpjAlphaValidator, collapseWhitespace, composeHeadersWithVersion, conditionalAsyncValidator, convertFormLayoutToConfig, createCpfCnpjValidator, createDefaultFormConfig, createDefaultTableConfig, createEmptyFormConfig, createPersistedPage, customAsyncValidatorFn, customValidatorFn, debounceAsyncValidator, deepMerge, ensureIds, ensureNoConflictsHookFactory, ensurePageIds, fetchWithETag, fileTypeValidator, fillUndefined, generateId, getEssentialConfig, getReferencedFieldMetadata, getTextTransformer, isCssTextTransform, isTableConfigV2, isValidFormConfig, isValidTableConfig, legacyCnpjValidator, legacyCpfValidator, logOnErrorHook, mapFieldDefinitionToMetadata, mapFieldDefinitionsToMetadata, matchFieldValidator, maxFileSizeValidator, mergeFieldMetadata, mergeTableConfigs, minWordsValidator, normalizeFieldConstraints, normalizeFormConfig, normalizeFormMetadata, normalizePath, notifySuccessHook, prefillFromContextHook, provideDefaultFormHooks, provideFormHookPresets, provideFormHooks, provideGlobalConfig, provideGlobalConfigSeed, provideGlobalConfigTenant, provideHookResolvers, provideHookWhitelist, provideOverlayDecisionMatrix, provideRemoteGlobalConfig, reconcileFilterConfig, reconcileFormConfig, reconcileTableConfig, removeDiacritics, reportTelemetryHookFactory, requiredCheckedValidator, resolveHidden, resolveOffset, resolveOrder, resolveSpan, slugify, stripMasksHook, syncWithServerMetadata, toCamel, toCapitalize, toKebab, toPascal, toSentenceCase, toSnake, toTitleCase, trim, uniqueAsyncValidator, urlValidator, withMessage };
 //# sourceMappingURL=praxisui-core.mjs.map