@praxisui/dynamic-fields 1.0.0-beta.14 → 1.0.0-beta.15

package/README.md

@@ -92,6 +92,7 @@ O sistema usa as constantes do `@praxisui/core` para garantir consistência:
 - `FieldControlType.TIME_PICKER` - Seletor de horário
 - `FieldControlType.RATING` - Classificação por estrelas
 - `FieldControlType.COLOR_PICKER` - Seletor de cores
+- `FieldControlType.AVATAR` - Avatar visual (imagem/ícone/iniciais)
 
 Campos com `FieldControlType.AUTO_COMPLETE` utilizam internamente o `MaterialSearchableSelectComponent`, habilitando busca automaticamente.
 
@@ -122,6 +123,44 @@ Grupo de botões de rádio que consome metadados ou dados remotos para criar sel
 - **Carregamento Dinâmico**: mesmas chaves de configuração de `MaterialSelectComponent` para buscar opções.
 - **Layout Flexível**: configuração de orientação, `labelPosition` e `color` segundo a [documentação oficial](https://material.angular.dev/components/radio/overview).
 
+## 🧩 Avatar Field
+
+Componente visual para exibir representação de usuário/entidade/estado, com prioridade de conteúdo:
+
+- imageSrc > icon > initials > ng-content
+
+Propriedades principais: `themeColor`, `rounded`, `size`, `fillMode`, `border`, `tooltip`, `ariaLabel`.
+
+Exemplos:
+
+```html
+<pdx-material-avatar [imageSrc]="user.img" size="large" themeColor="tertiary"></pdx-material-avatar>
+<pdx-material-avatar initials="MB" themeColor="secondary"></pdx-material-avatar>
+<pdx-material-avatar icon="person" fillMode="outline"></pdx-material-avatar>
+<pdx-material-avatar><app-status-badge></app-status-badge></pdx-material-avatar>
+```
+
+Uso em formulários dinâmicos (via metadata):
+
+```ts
+import { FieldControlType, type FieldMetadata } from '@praxisui/core';
+
+const fields: FieldMetadata[] = [
+  {
+    name: 'avatar',
+    label: 'Avatar',
+    controlType: FieldControlType.AVATAR,
+    // opções específicas via `extra` (quando aplicável)
+    extra: { imageSrc: 'https://example.com/u/42.png', size: 'large' }
+  }
+];
+```
+
+Tokens M3 aplicados:
+
+- `--pfx-avatar-bg`, `--pfx-avatar-fg`, `--pfx-avatar-border-color`, `--pfx-avatar-border-w`
+- `--pfx-avatar-size`, `--pfx-avatar-radius-[full|lg|md|sm]`
+
 ## 📦 Instalação
 
 ```bash

package/fesm2022/praxisui-dynamic-fields.mjs

@@ -1,9 +1,9 @@
 import * as i4 from '@angular/forms';
 import { NgControl, FormControl, Validators, ReactiveFormsModule, NG_VALUE_ACCESSOR, FormGroup, FormsModule } from '@angular/forms';
 import * as i0 from '@angular/core';
-import { inject, DestroyRef, ElementRef, ChangeDetectorRef, Injector, signal, output, computed, Input, Directive, viewChild, effect, forwardRef, Component, ViewChild, LOCALE_ID, EventEmitter, Injectable, ViewContainerRef, HostListener, HostBinding, Output, ViewEncapsulation, ChangeDetectionStrategy, Inject, TemplateRef, ContentChild, APP_INITIALIZER } from '@angular/core';
+import { inject, DestroyRef, ElementRef, ChangeDetectorRef, Injector, signal, output, computed, Input, Directive, viewChild, effect, forwardRef, Component, ViewChild, LOCALE_ID, EventEmitter, Injectable, Output, ViewContainerRef, HostListener, HostBinding, ViewEncapsulation, ChangeDetectionStrategy, Inject, TemplateRef, ContentChild, ENVIRONMENT_INITIALIZER, APP_INITIALIZER } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { isCssTextTransform, getTextTransformer, GenericCrudService, GlobalConfigService, PraxisIconDirective, createCpfCnpjValidator, FieldControlType } from '@praxisui/core';
+import { isCssTextTransform, getTextTransformer, GenericCrudService, GlobalConfigService, PraxisIconDirective, createCpfCnpjValidator, FieldControlType, ComponentMetadataRegistry } from '@praxisui/core';
 import { BehaviorSubject, combineLatest, take as take$1, of, EMPTY, firstValueFrom, fromEvent, Subscription } from 'rxjs';
 import { Router } from '@angular/router';
 import * as i1$4 from '@angular/material/dialog';
@@ -59,6 +59,7 @@ import * as i2$3 from '@angular/material/slide-toggle';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import * as i3$7 from '@angular/material/list';
 import { MatListModule } from '@angular/material/list';
+import { DomSanitizer } from '@angular/platform-browser';
 import * as i2$4 from '@angular/cdk/drag-drop';
 import { moveItemInArray, transferArrayItem, DragDropModule } from '@angular/cdk/drag-drop';
 import { PdxCronBuilderComponent } from '@praxisui/cron-builder';
@@ -13196,6 +13197,341 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
                 type: Input
             }] } });
 
+class MaterialAvatarComponent {
+    sanitizer = inject(DomSanitizer);
+    elementRef = inject(ElementRef);
+    // Dynamic field metadata (optional, for DynamicFieldLoader integration)
+    metadata = signal(null, ...(ngDevMode ? [{ debugName: "metadata" }] : []));
+    componentId = signal('pdx-avatar-' + Math.random().toString(36).slice(2), ...(ngDevMode ? [{ debugName: "componentId" }] : []));
+    // Optional reactive control from DynamicFieldLoader (read-only consumption)
+    // The loader will set this when available. We use its current value as a
+    // fallback for image source when the input [imageSrc] is not provided.
+    formControl = signal(null, ...(ngDevMode ? [{ debugName: "formControl" }] : []));
+    // Content sources (priority: imageSrc > icon > initials > content)
+    imageSrc;
+    imageAlt;
+    initials;
+    icon;
+    /** Fallback icon used when no image/icon/initials provided via inputs */
+    defaultIcon;
+    // Visual props
+    themeColor = 'primary';
+    rounded = 'full';
+    size = 'medium';
+    fillMode = 'solid';
+    border = false;
+    // UX/ARIA
+    tooltip;
+    ariaLabel;
+    // Dynamic field global states (herdadas do shell/loader)
+    readonlyMode;
+    disabledMode;
+    visible;
+    presentationMode;
+    // Style/class passthroughs (optional)
+    class;
+    style;
+    imageError = new EventEmitter();
+    // Internal image error flag
+    _imgFailed = signal(false, ...(ngDevMode ? [{ debugName: "_imgFailed" }] : []));
+    // Resolved sources
+    resolvedImageSrc = computed(() => {
+        // Priority: explicit input > form control value > metadata.defaultValue
+        const byInput = (this.imageSrc || '').trim();
+        if (byInput)
+            return byInput;
+        const c = this.formControl();
+        const val = (c?.value ?? '');
+        if (typeof val === 'string' && val.trim())
+            return val.trim();
+        const byMeta = String(this.metadata()?.defaultValue || '').trim();
+        if (byMeta)
+            return byMeta;
+        return '';
+    }, ...(ngDevMode ? [{ debugName: "resolvedImageSrc" }] : []));
+    // Reset image error flag whenever source changes
+    _resetOnSrcChange = effect(() => {
+        // touch computed to track its deps
+        this.resolvedImageSrc();
+        this._imgFailed.set(false);
+    }, ...(ngDevMode ? [{ debugName: "_resetOnSrcChange" }] : []));
+    // Derived flags
+    hasImage = computed(() => !!this.resolvedImageSrc() && !this._imgFailed(), ...(ngDevMode ? [{ debugName: "hasImage" }] : []));
+    hasIcon = computed(() => this.resolveIconKind(this.icon ?? this.defaultIcon) !== null, ...(ngDevMode ? [{ debugName: "hasIcon" }] : []));
+    hasInitials = computed(() => this.normalizedInitials().length > 0, ...(ngDevMode ? [{ debugName: "hasInitials" }] : []));
+    // Host classes
+    componentCssClasses = computed(() => {
+        const classes = ['pfx-avatar'];
+        classes.push(`theme-${this.themeColor || 'primary'}`);
+        classes.push(`rounded-${this.rounded || 'full'}`);
+        classes.push(`size-${this.size || 'medium'}`);
+        classes.push(`fill-${this.fillMode || 'solid'}`);
+        if (this.border)
+            classes.push('has-border');
+        if (this.hasImage())
+            classes.push('has-image');
+        else if (this.hasIcon())
+            classes.push('has-icon');
+        else if (this.hasInitials())
+            classes.push('has-initials');
+        if (this.class)
+            classes.push(String(this.class));
+        return classes.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "componentCssClasses" }] : []));
+    // Accessible label fallback
+    computedAriaLabel = computed(() => {
+        const explicit = (this.ariaLabel || '').trim();
+        if (explicit)
+            return explicit;
+        const meta = this.metadata();
+        if (meta?.label)
+            return String(meta.label);
+        if (this.imageAlt)
+            return this.imageAlt;
+        if (this.initials)
+            return `Avatar ${this.normalizedInitials()}`;
+        const name = this.iconName();
+        if (name)
+            return `Avatar ${name}`;
+        return 'Avatar';
+    }, ...(ngDevMode ? [{ debugName: "computedAriaLabel" }] : []));
+    // Helpers for icon resolution
+    resolveIconKind(i) {
+        if (!i)
+            return null;
+        if (typeof i === 'string')
+            return i.trim() ? 'name' : null;
+        if (i['changingThisBreaksApplicationSecurity'])
+            return 'svg';
+        if (i.svg)
+            return 'svg';
+        if (i.fontClass)
+            return 'font';
+        if (i.name)
+            return 'name';
+        return null;
+    }
+    iconName() {
+        const i = (this.icon ?? this.defaultIcon);
+        const kind = this.resolveIconKind(i);
+        if (kind === 'name') {
+            return typeof i === 'string' ? i : i?.name || null;
+        }
+        return null;
+    }
+    iconSvgSafe() {
+        const i = (this.icon ?? this.defaultIcon);
+        const kind = this.resolveIconKind(i);
+        if (kind === 'svg') {
+            const raw = typeof i === 'string' ? undefined : (i?.svg ?? i);
+            if (typeof raw === 'string') {
+                return this.sanitizer.bypassSecurityTrustHtml(raw);
+            }
+            return raw || null;
+        }
+        return null;
+    }
+    iconFontClass() {
+        const i = (this.icon ?? this.defaultIcon);
+        const kind = this.resolveIconKind(i);
+        if (kind === 'font') {
+            return i?.fontClass || null;
+        }
+        return null;
+    }
+    shouldShowImage() {
+        return this.hasImage();
+    }
+    shouldShowIcon() {
+        return !this.hasImage() && this.hasIcon();
+    }
+    shouldShowInitials() {
+        return !this.hasImage() && !this.hasIcon() && this.hasInitials();
+    }
+    normalizedInitials() {
+        const s = (this.initials || '').trim();
+        if (!s)
+            return '';
+        // Keep max 3 chars, uppercase
+        return s.slice(0, 3).toUpperCase();
+    }
+    onImgError() {
+        this._imgFailed.set(true);
+        this.imageError.emit();
+    }
+    // BaseDynamicFieldComponent minimal API
+    focus() {
+        try {
+            this.elementRef.nativeElement?.focus?.();
+        }
+        catch { }
+    }
+    blur() {
+        try {
+            this.elementRef.nativeElement?.blur?.();
+        }
+        catch { }
+    }
+    // Allow DynamicFieldLoader to apply metadata extras
+    setInputMetadata(meta) {
+        this.metadata.set(meta);
+        const extras = meta?.extra || {};
+        // Known keys: imageSrc, imageAlt, initials, icon, themeColor, rounded, size, fillMode, border, tooltip, ariaLabel
+        if (extras.imageSrc !== undefined)
+            this.imageSrc = extras.imageSrc;
+        if (extras.imageAlt !== undefined)
+            this.imageAlt = extras.imageAlt;
+        if (extras.initials !== undefined)
+            this.initials = extras.initials;
+        if (extras.icon !== undefined)
+            this.icon = extras.icon;
+        if (extras.defaultIcon !== undefined)
+            this.defaultIcon = extras.defaultIcon;
+        if (extras.themeColor !== undefined)
+            this.themeColor = extras.themeColor;
+        if (extras.rounded !== undefined)
+            this.rounded = extras.rounded;
+        if (extras.size !== undefined)
+            this.size = extras.size;
+        if (extras.fillMode !== undefined)
+            this.fillMode = extras.fillMode;
+        if (extras.border !== undefined)
+            this.border = !!extras.border;
+        if (extras.tooltip !== undefined)
+            this.tooltip = extras.tooltip;
+        if (extras.ariaLabel !== undefined)
+            this.ariaLabel = extras.ariaLabel;
+        if (extras.class !== undefined)
+            this.class = extras.class;
+        if (extras.style !== undefined) {
+            if (typeof extras.style === 'string') {
+                try {
+                    const obj = JSON.parse(extras.style);
+                    if (obj && typeof obj === 'object')
+                        this.style = obj;
+                }
+                catch {
+                    // ignore invalid JSON
+                }
+            }
+            else if (typeof extras.style === 'object') {
+                this.style = extras.style;
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: MaterialAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: MaterialAvatarComponent, isStandalone: true, selector: "pdx-material-avatar", inputs: { imageSrc: "imageSrc", imageAlt: "imageAlt", initials: "initials", icon: "icon", defaultIcon: "defaultIcon", themeColor: "themeColor", rounded: "rounded", size: "size", fillMode: "fillMode", border: "border", tooltip: "tooltip", ariaLabel: "ariaLabel", readonlyMode: "readonlyMode", disabledMode: "disabledMode", visible: "visible", presentationMode: "presentationMode", class: "class", style: "style" }, outputs: { imageError: "imageError" }, host: { properties: { "class": "componentCssClasses()", "style.display": "visible === false ? \"none\" : null", "attr.role": "\"img\"", "attr.aria-label": "computedAriaLabel() || null", "attr.data-field-type": "\"avatar\"", "attr.data-field-name": "metadata()?.name", "attr.data-component-id": "componentId()", "class.praxis-disabled": "disabledMode === true", "class.praxis-readonly": "readonlyMode === true", "class.presentation-mode": "presentationMode === true" } }, ngImport: i0, template: `
+    <span class="pfx-avatar__inner"
+          [attr.aria-hidden]="presentationMode ? 'true' : null"
+          [ngStyle]="style || null"
+          [matTooltip]="tooltip || null"
+          [matTooltipDisabled]="!tooltip">
+      <!-- Image (highest priority) -->
+      @if (shouldShowImage()) {
+        <img class="pfx-avatar__img"
+             [src]="resolvedImageSrc()!"
+             [alt]="imageAlt || computedAriaLabel() || ''"
+             (error)="onImgError()" />
+      } @else if (shouldShowIcon()) {
+        <!-- Icon (Material, Praxis, SVG or font class) -->
+        @if (iconName()) {
+          <mat-icon class="pfx-avatar__icon" [praxisIcon]="iconName()"></mat-icon>
+        } @else if (iconSvgSafe()) {
+          <span class="pfx-avatar__icon-svg" [innerHTML]="iconSvgSafe()"></span>
+        } @else if (iconFontClass()) {
+          <span class="pfx-avatar__icon-font" [class]="iconFontClass()" aria-hidden="true"></span>
+        }
+      } @else if (shouldShowInitials()) {
+        <span class="pfx-avatar__initials">{{ normalizedInitials() }}</span>
+      } @else {
+        <!-- Custom projected content (lowest priority) -->
+        <ng-content></ng-content>
+      }
+    </span>
+  `, isInline: true, styles: [":host{--pfx-avatar-size: 40px;--pfx-avatar-radius-full: 9999px;--pfx-avatar-radius-lg: 16px;--pfx-avatar-radius-md: 12px;--pfx-avatar-radius-sm: 8px;--pfx-avatar-border-w: 1px;--pfx-avatar-border-color: var(--md-sys-color-outline-variant, #e0e0e0);--pfx-avatar-bg: var(--md-sys-color-primary, #6750a4);--pfx-avatar-fg: var(--md-sys-color-on-primary, #ffffff);display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}.pfx-avatar__inner{position:relative;box-sizing:border-box;width:var(--pfx-avatar-size);height:var(--pfx-avatar-size);border-radius:var(--_pfx-avatar-radius, var(--pfx-avatar-radius-full));display:inline-flex;align-items:center;justify-content:center;overflow:hidden;-webkit-user-select:none;user-select:none;line-height:1;background:var(--_pfx-avatar-bg, var(--pfx-avatar-bg));color:var(--_pfx-avatar-fg, var(--pfx-avatar-fg));border:var(--_pfx-avatar-border, 0)}:host(.fill-outline) .pfx-avatar__inner{background:transparent;color:var(--_pfx-avatar-fg, var(--pfx-avatar-fg));border:var(--pfx-avatar-border-w) solid var(--pfx-avatar-border-color)}:host(.has-border) .pfx-avatar__inner{border:var(--pfx-avatar-border-w) solid var(--pfx-avatar-border-color)}:host(.size-small){--pfx-avatar-size: 24px}:host(.size-medium){--pfx-avatar-size: 40px}:host(.size-large){--pfx-avatar-size: 56px}:host(.size-none){--pfx-avatar-size: auto}:host(.rounded-full){--_pfx-avatar-radius: var(--pfx-avatar-radius-full)}:host(.rounded-large){--_pfx-avatar-radius: var(--pfx-avatar-radius-lg)}:host(.rounded-medium){--_pfx-avatar-radius: var(--pfx-avatar-radius-md)}:host(.rounded-small){--_pfx-avatar-radius: var(--pfx-avatar-radius-sm)}:host(.rounded-none){--_pfx-avatar-radius: 0}.pfx-avatar__img{width:100%;height:100%;object-fit:cover;display:block}.pfx-avatar__icon,.pfx-avatar__icon-svg,.pfx-avatar__icon-font{font-size:calc(var(--pfx-avatar-size) * .6);width:calc(var(--pfx-avatar-size) * .6);height:calc(var(--pfx-avatar-size) * .6);display:inline-flex;align-items:center;justify-content:center}.pfx-avatar__initials{font-weight:600;letter-spacing:.02em;font-size:calc(var(--pfx-avatar-size) * .4);line-height:1}:host(.theme-primary){--_pfx-avatar-bg: var(--md-sys-color-primary);--_pfx-avatar-fg: var(--md-sys-color-on-primary)}:host(.theme-secondary){--_pfx-avatar-bg: var(--md-sys-color-secondary);--_pfx-avatar-fg: var(--md-sys-color-on-secondary)}:host(.theme-tertiary){--_pfx-avatar-bg: var(--md-sys-color-tertiary);--_pfx-avatar-fg: var(--md-sys-color-on-tertiary)}:host(.theme-base){--_pfx-avatar-bg: var(--md-sys-color-surface-variant);--_pfx-avatar-fg: var(--md-sys-color-on-surface-variant)}:host(.theme-info){--_pfx-avatar-bg: var(--md-sys-color-primary-container);--_pfx-avatar-fg: var(--md-sys-color-on-primary-container)}:host(.theme-success){--_pfx-avatar-bg: var(--md-sys-color-secondary-container);--_pfx-avatar-fg: var(--md-sys-color-on-secondary-container)}:host(.theme-warning){--_pfx-avatar-bg: var(--md-sys-color-tertiary-container);--_pfx-avatar-fg: var(--md-sys-color-on-tertiary-container)}:host(.theme-error){--_pfx-avatar-bg: var(--md-sys-color-error-container);--_pfx-avatar-fg: var(--md-sys-color-on-error-container)}:host(.theme-dark){--_pfx-avatar-bg: #111318;--_pfx-avatar-fg: #f1f1f1}:host(.theme-light){--_pfx-avatar-bg: #ffffff;--_pfx-avatar-fg: #1a1a1a}:host(.theme-inverse){--_pfx-avatar-bg: var(--md-sys-color-on-surface);--_pfx-avatar-fg: var(--md-sys-color-surface)}:host(.theme-none){--_pfx-avatar-bg: transparent;--_pfx-avatar-fg: inherit}:host(.fill-none) .pfx-avatar__inner{background:none;color:inherit;border:0}:host(.size-none) .pfx-avatar__inner{width:auto;height:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: MaterialAvatarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pdx-material-avatar', standalone: true, imports: [CommonModule, MatIconModule, MatTooltipModule, PraxisIconDirective], host: {
+                        '[class]': 'componentCssClasses()',
+                        '[style.display]': 'visible === false ? "none" : null',
+                        '[attr.role]': '"img"',
+                        '[attr.aria-label]': 'computedAriaLabel() || null',
+                        '[attr.data-field-type]': '"avatar"',
+                        '[attr.data-field-name]': 'metadata()?.name',
+                        '[attr.data-component-id]': 'componentId()',
+                        '[class.praxis-disabled]': 'disabledMode === true',
+                        '[class.praxis-readonly]': 'readonlyMode === true',
+                        '[class.presentation-mode]': 'presentationMode === true',
+                    }, template: `
+    <span class="pfx-avatar__inner"
+          [attr.aria-hidden]="presentationMode ? 'true' : null"
+          [ngStyle]="style || null"
+          [matTooltip]="tooltip || null"
+          [matTooltipDisabled]="!tooltip">
+      <!-- Image (highest priority) -->
+      @if (shouldShowImage()) {
+        <img class="pfx-avatar__img"
+             [src]="resolvedImageSrc()!"
+             [alt]="imageAlt || computedAriaLabel() || ''"
+             (error)="onImgError()" />
+      } @else if (shouldShowIcon()) {
+        <!-- Icon (Material, Praxis, SVG or font class) -->
+        @if (iconName()) {
+          <mat-icon class="pfx-avatar__icon" [praxisIcon]="iconName()"></mat-icon>
+        } @else if (iconSvgSafe()) {
+          <span class="pfx-avatar__icon-svg" [innerHTML]="iconSvgSafe()"></span>
+        } @else if (iconFontClass()) {
+          <span class="pfx-avatar__icon-font" [class]="iconFontClass()" aria-hidden="true"></span>
+        }
+      } @else if (shouldShowInitials()) {
+        <span class="pfx-avatar__initials">{{ normalizedInitials() }}</span>
+      } @else {
+        <!-- Custom projected content (lowest priority) -->
+        <ng-content></ng-content>
+      }
+    </span>
+  `, styles: [":host{--pfx-avatar-size: 40px;--pfx-avatar-radius-full: 9999px;--pfx-avatar-radius-lg: 16px;--pfx-avatar-radius-md: 12px;--pfx-avatar-radius-sm: 8px;--pfx-avatar-border-w: 1px;--pfx-avatar-border-color: var(--md-sys-color-outline-variant, #e0e0e0);--pfx-avatar-bg: var(--md-sys-color-primary, #6750a4);--pfx-avatar-fg: var(--md-sys-color-on-primary, #ffffff);display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}.pfx-avatar__inner{position:relative;box-sizing:border-box;width:var(--pfx-avatar-size);height:var(--pfx-avatar-size);border-radius:var(--_pfx-avatar-radius, var(--pfx-avatar-radius-full));display:inline-flex;align-items:center;justify-content:center;overflow:hidden;-webkit-user-select:none;user-select:none;line-height:1;background:var(--_pfx-avatar-bg, var(--pfx-avatar-bg));color:var(--_pfx-avatar-fg, var(--pfx-avatar-fg));border:var(--_pfx-avatar-border, 0)}:host(.fill-outline) .pfx-avatar__inner{background:transparent;color:var(--_pfx-avatar-fg, var(--pfx-avatar-fg));border:var(--pfx-avatar-border-w) solid var(--pfx-avatar-border-color)}:host(.has-border) .pfx-avatar__inner{border:var(--pfx-avatar-border-w) solid var(--pfx-avatar-border-color)}:host(.size-small){--pfx-avatar-size: 24px}:host(.size-medium){--pfx-avatar-size: 40px}:host(.size-large){--pfx-avatar-size: 56px}:host(.size-none){--pfx-avatar-size: auto}:host(.rounded-full){--_pfx-avatar-radius: var(--pfx-avatar-radius-full)}:host(.rounded-large){--_pfx-avatar-radius: var(--pfx-avatar-radius-lg)}:host(.rounded-medium){--_pfx-avatar-radius: var(--pfx-avatar-radius-md)}:host(.rounded-small){--_pfx-avatar-radius: var(--pfx-avatar-radius-sm)}:host(.rounded-none){--_pfx-avatar-radius: 0}.pfx-avatar__img{width:100%;height:100%;object-fit:cover;display:block}.pfx-avatar__icon,.pfx-avatar__icon-svg,.pfx-avatar__icon-font{font-size:calc(var(--pfx-avatar-size) * .6);width:calc(var(--pfx-avatar-size) * .6);height:calc(var(--pfx-avatar-size) * .6);display:inline-flex;align-items:center;justify-content:center}.pfx-avatar__initials{font-weight:600;letter-spacing:.02em;font-size:calc(var(--pfx-avatar-size) * .4);line-height:1}:host(.theme-primary){--_pfx-avatar-bg: var(--md-sys-color-primary);--_pfx-avatar-fg: var(--md-sys-color-on-primary)}:host(.theme-secondary){--_pfx-avatar-bg: var(--md-sys-color-secondary);--_pfx-avatar-fg: var(--md-sys-color-on-secondary)}:host(.theme-tertiary){--_pfx-avatar-bg: var(--md-sys-color-tertiary);--_pfx-avatar-fg: var(--md-sys-color-on-tertiary)}:host(.theme-base){--_pfx-avatar-bg: var(--md-sys-color-surface-variant);--_pfx-avatar-fg: var(--md-sys-color-on-surface-variant)}:host(.theme-info){--_pfx-avatar-bg: var(--md-sys-color-primary-container);--_pfx-avatar-fg: var(--md-sys-color-on-primary-container)}:host(.theme-success){--_pfx-avatar-bg: var(--md-sys-color-secondary-container);--_pfx-avatar-fg: var(--md-sys-color-on-secondary-container)}:host(.theme-warning){--_pfx-avatar-bg: var(--md-sys-color-tertiary-container);--_pfx-avatar-fg: var(--md-sys-color-on-tertiary-container)}:host(.theme-error){--_pfx-avatar-bg: var(--md-sys-color-error-container);--_pfx-avatar-fg: var(--md-sys-color-on-error-container)}:host(.theme-dark){--_pfx-avatar-bg: #111318;--_pfx-avatar-fg: #f1f1f1}:host(.theme-light){--_pfx-avatar-bg: #ffffff;--_pfx-avatar-fg: #1a1a1a}:host(.theme-inverse){--_pfx-avatar-bg: var(--md-sys-color-on-surface);--_pfx-avatar-fg: var(--md-sys-color-surface)}:host(.theme-none){--_pfx-avatar-bg: transparent;--_pfx-avatar-fg: inherit}:host(.fill-none) .pfx-avatar__inner{background:none;color:inherit;border:0}:host(.size-none) .pfx-avatar__inner{width:auto;height:auto}\n"] }]
+        }], propDecorators: { imageSrc: [{
+                type: Input
+            }], imageAlt: [{
+                type: Input
+            }], initials: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], defaultIcon: [{
+                type: Input
+            }], themeColor: [{
+                type: Input
+            }], rounded: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], fillMode: [{
+                type: Input
+            }], border: [{
+                type: Input
+            }], tooltip: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], readonlyMode: [{
+                type: Input
+            }], disabledMode: [{
+                type: Input
+            }], visible: [{
+                type: Input
+            }], presentationMode: [{
+                type: Input
+            }], class: [{
+                type: Input
+            }], style: [{
+                type: Input
+            }], imageError: [{
+                type: Output
+            }] } });
+
 class MaterialTransferListComponent extends SimpleBaseSelectComponent {
     // Praxis Field States
     readonlyMode = false;
@@ -14291,6 +14627,8 @@ class ComponentRegistryService {
         this.register(FieldControlType.MONTH_INPUT, () => wrap(MonthInputComponent));
         this.register(FieldControlType.NUMERIC_TEXT_BOX, () => wrap(NumberInputComponent));
         this.register(FieldControlType.SLIDER, () => wrap(MaterialSliderComponent));
+        // Avatar (display component)
+        this.register(FieldControlType.AVATAR, () => wrap(MaterialAvatarComponent));
         this.register(FieldControlType.CURRENCY_INPUT, () => wrap(MaterialCurrencyComponent));
         this.register(FieldControlType.CPF_CNPJ_INPUT, () => wrap(MaterialCpfCnpjInputComponent));
         this.register(FieldControlType.RANGE_SLIDER, () => wrap(PdxMaterialRangeSliderComponent));
@@ -18380,6 +18718,49 @@ const PDX_MATERIAL_SLIDER_COMPONENT_METADATA = {
     lib: '@praxisui/dynamic-fields',
 };
 
+const PDX_MATERIAL_AVATAR_COMPONENT_METADATA = {
+    id: 'pdx-material-avatar',
+    selector: 'pdx-material-avatar',
+    component: MaterialAvatarComponent,
+    friendlyName: 'Avatar (Material)',
+    description: 'Avatar reusável com imagem, ícone, iniciais e tokens M3; integra com DynamicFieldLoader.',
+    icon: 'person',
+    inputs: [
+        { name: 'metadata', type: 'FieldMetadata', description: 'Configuração do campo' },
+        { name: 'imageSrc', type: 'string', description: 'URL da imagem' },
+        { name: 'imageAlt', type: 'string', description: 'Texto alternativo da imagem' },
+        { name: 'initials', type: 'string', description: 'Iniciais a exibir (ex.: MB)' },
+        { name: 'icon', type: "string | SafeHtml | { name?: string; svg?: string; fontClass?: string }", description: 'Ícone Material/Praxis, SVG inline ou classe de fonte' },
+        { name: 'defaultIcon', type: "string | SafeHtml | { name?: string; svg?: string; fontClass?: string }", description: 'Ícone padrão (fallback) quando não houver imagem/ícone/iniciais' },
+        { name: 'themeColor', type: "'primary'|'secondary'|'tertiary'|'base'|'info'|'success'|'warning'|'error'|'dark'|'light'|'inverse'|'none'", default: 'primary' },
+        { name: 'rounded', type: "'full'|'large'|'medium'|'small'|'none'", default: 'full' },
+        { name: 'size', type: "'small'|'medium'|'large'|'none'", default: 'medium' },
+        { name: 'fillMode', type: "'solid'|'outline'|'none'", default: 'solid' },
+        { name: 'border', type: 'boolean', default: false },
+        { name: 'tooltip', type: 'string' },
+        { name: 'ariaLabel', type: 'string' },
+        { name: 'class', type: 'string', description: 'Classes CSS adicionais no host' },
+        { name: 'style', type: 'NgStyle | Record<string, any>', description: 'Estilos inline (objeto ou JSON via extra.style)' },
+        { name: 'readonlyMode', type: 'boolean', default: false },
+        { name: 'disabledMode', type: 'boolean', default: false },
+        { name: 'visible', type: 'boolean', default: true },
+        { name: 'presentationMode', type: 'boolean', default: false },
+    ],
+    tags: ['widget', 'field', 'avatar', 'material'],
+    lib: '@praxisui/dynamic-fields',
+};
+/** Optional provider to auto-register the metadata for editors/palettes */
+function provideMaterialAvatarMetadata() {
+    return {
+        provide: ENVIRONMENT_INITIALIZER,
+        multi: true,
+        useFactory: (registry) => () => {
+            registry.register(PDX_MATERIAL_AVATAR_COMPONENT_METADATA);
+        },
+        deps: [ComponentMetadataRegistry],
+    };
+}
+
 const PDX_MATERIAL_TIMEPICKER_COMPONENT_METADATA = {
     id: 'pdx-material-timepicker',
     selector: 'pdx-material-timepicker',
@@ -19363,5 +19744,5 @@ function normalizeFormMetadata(input) {
  * Generated bundle index. Do not edit.
  */
 
-export { ActionResolverService, CACHE_TTL, ColorInputComponent, ComponentPreloaderService, ComponentRegistryService, ConfirmDialogComponent, DateInputComponent, DateUtilsService, DatetimeLocalInputComponent, DynamicFieldLoaderDirective, EmailInputComponent, KeyboardShortcutService, LoggerPresets, MAX_LOAD_ATTEMPTS, MaterialAsyncSelectComponent, MaterialAutocompleteComponent, MaterialButtonComponent, MaterialButtonToggleComponent, MaterialCheckboxGroupComponent, MaterialChipsComponent, MaterialColorPickerComponent, MaterialCpfCnpjInputComponent, MaterialCurrencyComponent, MaterialDateRangeComponent, MaterialDatepickerComponent, MaterialFileUploadComponent, MaterialMultiSelectComponent, MaterialMultiSelectTreeComponent, MaterialPriceRangeComponent, MaterialRadioGroupComponent, MaterialRatingComponent, MaterialSearchableSelectComponent, MaterialSelectComponent, MaterialSelectionListComponent, MaterialSlideToggleComponent, MaterialSliderComponent, MaterialTextareaComponent, MaterialTimepickerComponent, MaterialTransferListComponent, MaterialTreeSelectComponent, MonthInputComponent, NumberInputComponent, OptionStore, PDX_COLOR_INPUT_COMPONENT_METADATA, PDX_COLOR_PICKER_COMPONENT_METADATA, PDX_DATETIME_LOCAL_INPUT_COMPONENT_METADATA, PDX_DATE_INPUT_COMPONENT_METADATA, PDX_EMAIL_INPUT_COMPONENT_METADATA, PDX_FIELD_SHELL_COMPONENT_METADATA, PDX_MATERIAL_BUTTON_COMPONENT_METADATA, PDX_MATERIAL_BUTTON_TOGGLE_COMPONENT_METADATA, PDX_MATERIAL_CHECKBOX_GROUP_COMPONENT_METADATA, PDX_MATERIAL_CHIPS_COMPONENT_METADATA, PDX_MATERIAL_COLORPICKER_COMPONENT_METADATA, PDX_MATERIAL_CPF_CNPJ_INPUT_COMPONENT_METADATA, PDX_MATERIAL_CURRENCY_COMPONENT_METADATA, PDX_MATERIAL_DATEPICKER_COMPONENT_METADATA, PDX_MATERIAL_DATE_RANGE_COMPONENT_METADATA, PDX_MATERIAL_FILE_UPLOAD_COMPONENT_METADATA, PDX_MATERIAL_MULTI_SELECT_COMPONENT_METADATA, PDX_MATERIAL_MULTI_SELECT_TREE_COMPONENT_METADATA, PDX_MATERIAL_PRICE_RANGE_COMPONENT_METADATA, PDX_MATERIAL_RADIO_GROUP_COMPONENT_METADATA, PDX_MATERIAL_RANGE_SLIDER_COMPONENT_METADATA, PDX_MATERIAL_RATING_COMPONENT_METADATA, PDX_MATERIAL_SEARCHABLE_SELECT_COMPONENT_METADATA, PDX_MATERIAL_SELECTION_LIST_COMPONENT_METADATA, PDX_MATERIAL_SELECT_COMPONENT_METADATA, PDX_MATERIAL_SLIDER_COMPONENT_METADATA, PDX_MATERIAL_TEXTAREA_COMPONENT_METADATA, PDX_MATERIAL_TIMEPICKER_COMPONENT_METADATA, PDX_MATERIAL_TIME_RANGE_COMPONENT_METADATA, PDX_MATERIAL_TRANSFER_LIST_COMPONENT_METADATA, PDX_MATERIAL_TREE_SELECT_COMPONENT_METADATA, PDX_MONTH_INPUT_COMPONENT_METADATA, PDX_NUMBER_INPUT_COMPONENT_METADATA, PDX_PASSWORD_INPUT_COMPONENT_METADATA, PDX_PHONE_INPUT_COMPONENT_METADATA, PDX_PRELOAD_STATUS_COMPONENT_METADATA, PDX_SEARCH_INPUT_COMPONENT_METADATA, PDX_TEXT_INPUT_COMPONENT_METADATA, PDX_TIME_INPUT_COMPONENT_METADATA, PDX_URL_INPUT_COMPONENT_METADATA, PDX_WEEK_INPUT_COMPONENT_METADATA, PDX_YEAR_INPUT_COMPONENT_METADATA, PasswordInputComponent, PdxColorPickerComponent, PdxMaterialRangeSliderComponent, PdxMaterialTimeRangeComponent, PdxYearInputComponent, PhoneInputComponent, PraxisErrorStateMatcher, PreloadStatusComponent, RETRY_DELAY, SearchInputComponent, SimpleBaseButtonComponent, SimpleBaseInputComponent, SimpleBaseSelectComponent, TextInputComponent, TimeInputComponent, UrlInputComponent, WeekInputComponent, configureDynamicFieldsLogger, createErrorStateMatcher, enableDebugForComponent, getErrorStateMatcherForField, inferErrorStateStrategy, initializeComponentSystem, initializeComponentSystemSync, isBaseDynamicFieldComponent, isLoadingCapableComponent, isValidJsonSchema, isValueBasedComponent, logger, mapJsonSchemaToFields, mapPropertyToFieldMetadata, normalizeFormMetadata, providePraxisDynamicFields, providePraxisDynamicFieldsCore, silenceComponent };
+export { ActionResolverService, CACHE_TTL, ColorInputComponent, ComponentPreloaderService, ComponentRegistryService, ConfirmDialogComponent, DateInputComponent, DateUtilsService, DatetimeLocalInputComponent, DynamicFieldLoaderDirective, EmailInputComponent, KeyboardShortcutService, LoggerPresets, MAX_LOAD_ATTEMPTS, MaterialAsyncSelectComponent, MaterialAutocompleteComponent, MaterialAvatarComponent, MaterialButtonComponent, MaterialButtonToggleComponent, MaterialCheckboxGroupComponent, MaterialChipsComponent, MaterialColorPickerComponent, MaterialCpfCnpjInputComponent, MaterialCurrencyComponent, MaterialDateRangeComponent, MaterialDatepickerComponent, MaterialFileUploadComponent, MaterialMultiSelectComponent, MaterialMultiSelectTreeComponent, MaterialPriceRangeComponent, MaterialRadioGroupComponent, MaterialRatingComponent, MaterialSearchableSelectComponent, MaterialSelectComponent, MaterialSelectionListComponent, MaterialSlideToggleComponent, MaterialSliderComponent, MaterialTextareaComponent, MaterialTimepickerComponent, MaterialTransferListComponent, MaterialTreeSelectComponent, MonthInputComponent, NumberInputComponent, OptionStore, PDX_COLOR_INPUT_COMPONENT_METADATA, PDX_COLOR_PICKER_COMPONENT_METADATA, PDX_DATETIME_LOCAL_INPUT_COMPONENT_METADATA, PDX_DATE_INPUT_COMPONENT_METADATA, PDX_EMAIL_INPUT_COMPONENT_METADATA, PDX_FIELD_SHELL_COMPONENT_METADATA, PDX_MATERIAL_AVATAR_COMPONENT_METADATA, PDX_MATERIAL_BUTTON_COMPONENT_METADATA, PDX_MATERIAL_BUTTON_TOGGLE_COMPONENT_METADATA, PDX_MATERIAL_CHECKBOX_GROUP_COMPONENT_METADATA, PDX_MATERIAL_CHIPS_COMPONENT_METADATA, PDX_MATERIAL_COLORPICKER_COMPONENT_METADATA, PDX_MATERIAL_CPF_CNPJ_INPUT_COMPONENT_METADATA, PDX_MATERIAL_CURRENCY_COMPONENT_METADATA, PDX_MATERIAL_DATEPICKER_COMPONENT_METADATA, PDX_MATERIAL_DATE_RANGE_COMPONENT_METADATA, PDX_MATERIAL_FILE_UPLOAD_COMPONENT_METADATA, PDX_MATERIAL_MULTI_SELECT_COMPONENT_METADATA, PDX_MATERIAL_MULTI_SELECT_TREE_COMPONENT_METADATA, PDX_MATERIAL_PRICE_RANGE_COMPONENT_METADATA, PDX_MATERIAL_RADIO_GROUP_COMPONENT_METADATA, PDX_MATERIAL_RANGE_SLIDER_COMPONENT_METADATA, PDX_MATERIAL_RATING_COMPONENT_METADATA, PDX_MATERIAL_SEARCHABLE_SELECT_COMPONENT_METADATA, PDX_MATERIAL_SELECTION_LIST_COMPONENT_METADATA, PDX_MATERIAL_SELECT_COMPONENT_METADATA, PDX_MATERIAL_SLIDER_COMPONENT_METADATA, PDX_MATERIAL_TEXTAREA_COMPONENT_METADATA, PDX_MATERIAL_TIMEPICKER_COMPONENT_METADATA, PDX_MATERIAL_TIME_RANGE_COMPONENT_METADATA, PDX_MATERIAL_TRANSFER_LIST_COMPONENT_METADATA, PDX_MATERIAL_TREE_SELECT_COMPONENT_METADATA, PDX_MONTH_INPUT_COMPONENT_METADATA, PDX_NUMBER_INPUT_COMPONENT_METADATA, PDX_PASSWORD_INPUT_COMPONENT_METADATA, PDX_PHONE_INPUT_COMPONENT_METADATA, PDX_PRELOAD_STATUS_COMPONENT_METADATA, PDX_SEARCH_INPUT_COMPONENT_METADATA, PDX_TEXT_INPUT_COMPONENT_METADATA, PDX_TIME_INPUT_COMPONENT_METADATA, PDX_URL_INPUT_COMPONENT_METADATA, PDX_WEEK_INPUT_COMPONENT_METADATA, PDX_YEAR_INPUT_COMPONENT_METADATA, PasswordInputComponent, PdxColorPickerComponent, PdxMaterialRangeSliderComponent, PdxMaterialTimeRangeComponent, PdxYearInputComponent, PhoneInputComponent, PraxisErrorStateMatcher, PreloadStatusComponent, RETRY_DELAY, SearchInputComponent, SimpleBaseButtonComponent, SimpleBaseInputComponent, SimpleBaseSelectComponent, TextInputComponent, TimeInputComponent, UrlInputComponent, WeekInputComponent, configureDynamicFieldsLogger, createErrorStateMatcher, enableDebugForComponent, getErrorStateMatcherForField, inferErrorStateStrategy, initializeComponentSystem, initializeComponentSystemSync, isBaseDynamicFieldComponent, isLoadingCapableComponent, isValidJsonSchema, isValueBasedComponent, logger, mapJsonSchemaToFields, mapPropertyToFieldMetadata, normalizeFormMetadata, provideMaterialAvatarMetadata, providePraxisDynamicFields, providePraxisDynamicFieldsCore, silenceComponent };
 //# sourceMappingURL=praxisui-dynamic-fields.mjs.map