@praxisui/dynamic-fields 3.0.0-beta.4 → 3.0.0-beta.5

package/fesm2022/praxisui-dynamic-fields.mjs

@@ -7450,9 +7450,33 @@ class MaterialButtonComponent extends SimpleBaseButtonComponent {
     // =============================================================================
     // LIFECYCLE
     // =============================================================================
+    syncKeyboardShortcutEffect = effect((onCleanup) => {
+        const shortcut = this.keyboardShortcut();
+        if (!shortcut || !this.keyboardService) {
+            return;
+        }
+        const unregister = this.keyboardService.registerShortcut(shortcut, {
+            callback: () => { this.triggerAction(); },
+            description: this.resolveDynamicFieldsMessage(null, 'button.shortcutDescription', 'Executar {{label}}', {
+                label: this.metadata()?.label || this.tDynamicFields('button.defaultLabel', 'Button'),
+            }),
+            componentId: this.componentId(),
+            priority: 10
+        });
+        this.unregisterShortcut = unregister;
+        this.log('debug', 'Keyboard shortcut registered', { shortcut });
+        onCleanup(() => {
+            try {
+                unregister?.();
+            }
+            catch { }
+            if (this.unregisterShortcut === unregister) {
+                this.unregisterShortcut = undefined;
+            }
+        });
+    }, ...(ngDevMode ? [{ debugName: "syncKeyboardShortcutEffect" }] : []));
     ngOnInit() {
         super.ngOnInit();
-        this.setupKeyboardShortcuts();
     }
     ngOnDestroy() {
         super.ngOnDestroy();
@@ -7527,23 +7551,6 @@ class MaterialButtonComponent extends SimpleBaseButtonComponent {
             isIconOnly: this.isIconOnlyButton()
         };
     }
-    // =============================================================================
-    // MÉTODOS PRIVADOS
-    // =============================================================================
-    setupKeyboardShortcuts() {
-        const shortcut = this.keyboardShortcut();
-        if (shortcut && this.keyboardService) {
-            this.unregisterShortcut = this.keyboardService.registerShortcut(shortcut, {
-                callback: () => { this.triggerAction(); },
-                description: this.resolveDynamicFieldsMessage(null, 'button.shortcutDescription', 'Executar {{label}}', {
-                    label: this.metadata()?.label || this.tDynamicFields('button.defaultLabel', 'Button'),
-                }),
-                componentId: this.componentId(),
-                priority: 10
-            });
-            this.log('debug', 'Keyboard shortcut registered', { shortcut });
-        }
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: MaterialButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: MaterialButtonComponent, isStandalone: true, selector: "pdx-material-button", host: { properties: { "class": "componentCssClasses()", "attr.data-field-type": "\"button\"", "attr.data-field-name": "metadata()?.name", "attr.data-button-variant": "buttonVariant()", "attr.data-component-id": "componentId()" } }, usesInheritance: true, ngImport: i0, template: "<!-- Container principal do button -->\n<div class=\"pdx-button-container\" [class]=\"componentCssClasses()\">\n\n  <!-- Button b\u00E1sico -->\n  @if (buttonVariant() === 'basic') {\n    <button\n      mat-button\n      [type]=\"buttonType()\"\n      [color]=\"materialColor()\"\n      [disabled]=\"isDisabled()\"\n      [disableRipple]=\"shouldDisableRipple()\"\n      [attr.aria-label]=\"metadata()?.label\"\n      [attr.aria-describedby]=\"metadata()?.description ? componentId() + '-description' : null\"\n      [matTooltip]=\"tooltipText()\"\n      [matTooltipDisabled]=\"!tooltipText()\"\n      matTooltipPosition=\"above\"\n      (click)=\"handleClick($event)\"\n                        class=\"pdx-button-element\">\n      \n      @if (isLoading()) {\n        <mat-spinner diameter=\"16\" class=\"pdx-button-spinner\"></mat-spinner>\n      }\n      \n      @if (shouldShowIcon()) {\n        <mat-icon class=\"pdx-button-icon\" [praxisIcon]=\"buttonIcon()\"></mat-icon>\n      }\n      \n      <span class=\"pdx-button-text\">{{ buttonText() }}</span>\n    </button>\n  }\n\n  <!-- Button raised -->\n  @if (buttonVariant() === 'raised') {\n    <button\n      mat-raised-button\n      [type]=\"buttonType()\"\n      [color]=\"materialColor()\"\n      [disabled]=\"isDisabled()\"\n      [disableRipple]=\"shouldDisableRipple()\"\n      [attr.aria-label]=\"metadata()?.label\"\n      [attr.aria-describedby]=\"metadata()?.description ? componentId() + '-description' : null\"\n      [matTooltip]=\"tooltipText()\"\n      [matTooltipDisabled]=\"!tooltipText()\"\n      matTooltipPosition=\"above\"\n      (click)=\"handleClick($event)\"\n                        class=\"pdx-button-element\">\n      \n      @if (isLoading()) {\n        <mat-spinner diameter=\"16\" class=\"pdx-button-spinner\"></mat-spinner>\n      }\n      \n      @if (shouldShowIcon()) {\n        <mat-icon class=\"pdx-button-icon\" [praxisIcon]=\"buttonIcon()\"></mat-icon>\n      }\n      \n      <span class=\"pdx-button-text\">{{ buttonText() }}</span>\n    </button>\n  }\n\n  <!-- Button stroked -->\n  @if (buttonVariant() === 'stroked') {\n    <button\n      mat-stroked-button\n      [type]=\"buttonType()\"\n      [color]=\"materialColor()\"\n      [disabled]=\"isDisabled()\"\n      [disableRipple]=\"shouldDisableRipple()\"\n      [attr.aria-label]=\"metadata()?.label\"\n      [attr.aria-describedby]=\"metadata()?.description ? componentId() + '-description' : null\"\n      [matTooltip]=\"tooltipText()\"\n      [matTooltipDisabled]=\"!tooltipText()\"\n      matTooltipPosition=\"above\"\n      (click)=\"handleClick($event)\"\n                        class=\"pdx-button-element\">\n      \n      @if (isLoading()) {\n        <mat-spinner diameter=\"16\" class=\"pdx-button-spinner\"></mat-spinner>\n      }\n      \n      @if (shouldShowIcon()) {\n        <mat-icon class=\"pdx-button-icon\" [praxisIcon]=\"buttonIcon()\"></mat-icon>\n      }\n      \n      <span class=\"pdx-button-text\">{{ buttonText() }}</span>\n    </button>\n  }\n\n  <!-- Button flat -->\n  @if (buttonVariant() === 'flat') {\n    <button\n      mat-flat-button\n      [type]=\"buttonType()\"\n      [color]=\"materialColor()\"\n      [disabled]=\"isDisabled()\"\n      [disableRipple]=\"shouldDisableRipple()\"\n      [attr.aria-label]=\"metadata()?.label\"\n      [attr.aria-describedby]=\"metadata()?.description ? componentId() + '-description' : null\"\n      [matTooltip]=\"tooltipText()\"\n      [matTooltipDisabled]=\"!tooltipText()\"\n      matTooltipPosition=\"above\"\n      (click)=\"handleClick($event)\"\n                        class=\"pdx-button-element\">\n      \n      @if (isLoading()) {\n        <mat-spinner diameter=\"16\" class=\"pdx-button-spinner\"></mat-spinner>\n      }\n      \n      @if (shouldShowIcon()) {\n        <mat-icon class=\"pdx-button-icon\" [praxisIcon]=\"buttonIcon()\"></mat-icon>\n      }\n      \n      <span class=\"pdx-button-text\">{{ buttonText() }}</span>\n    </button>\n  }\n\n  <!-- Button icon -->\n  @if (buttonVariant() === 'icon') {\n    <button\n      mat-icon-button\n      [type]=\"buttonType()\"\n      [color]=\"materialColor()\"\n      [disabled]=\"isDisabled()\"\n      [disableRipple]=\"shouldDisableRipple()\"\n      [attr.aria-label]=\"metadata()?.label || buttonIcon()\"\n      [attr.aria-describedby]=\"metadata()?.description ? componentId() + '-description' : null\"\n      [matTooltip]=\"tooltipText() || metadata()?.label\"\n      [matTooltipDisabled]=\"!tooltipText() && !metadata()?.label\"\n      matTooltipPosition=\"above\"\n      (click)=\"handleClick($event)\"\n                        class=\"pdx-button-element\">\n      \n      @if (isLoading()) {\n        <mat-spinner diameter=\"16\" class=\"pdx-button-spinner\"></mat-spinner>\n      } @else {\n        <mat-icon [praxisIcon]=\"buttonIcon() || 'mi:smart_button'\"></mat-icon>\n      }\n    </button>\n  }\n\n  <!-- Button FAB -->\n  @if (buttonVariant() === 'fab') {\n    <button\n      mat-fab\n      [type]=\"buttonType()\"\n      [color]=\"materialColor()\"\n      [disabled]=\"isDisabled()\"\n      [disableRipple]=\"shouldDisableRipple()\"\n      [attr.aria-label]=\"metadata()?.label || buttonIcon()\"\n      [attr.aria-describedby]=\"metadata()?.description ? componentId() + '-description' : null\"\n      [matTooltip]=\"tooltipText() || metadata()?.label\"\n      [matTooltipDisabled]=\"!tooltipText() && !metadata()?.label\"\n      matTooltipPosition=\"above\"\n      (click)=\"handleClick($event)\"\n                        class=\"pdx-button-element\">\n      \n      @if (isLoading()) {\n        <mat-spinner diameter=\"20\" class=\"pdx-button-spinner\"></mat-spinner>\n      } @else {\n        <mat-icon [praxisIcon]=\"buttonIcon() || 'add'\"></mat-icon>\n      }\n    </button>\n  }\n\n  <!-- Button Mini FAB -->\n  @if (buttonVariant() === 'mini-fab') {\n    <button\n      mat-mini-fab\n      [type]=\"buttonType()\"\n      [color]=\"materialColor()\"\n      [disabled]=\"isDisabled()\"\n      [disableRipple]=\"shouldDisableRipple()\"\n      [attr.aria-label]=\"metadata()?.label || buttonIcon()\"\n      [attr.aria-describedby]=\"metadata()?.description ? componentId() + '-description' : null\"\n      [matTooltip]=\"tooltipText() || metadata()?.label\"\n      [matTooltipDisabled]=\"!tooltipText() && !metadata()?.label\"\n      matTooltipPosition=\"above\"\n      (click)=\"handleClick($event)\"\n                        class=\"pdx-button-element\">\n      \n      @if (isLoading()) {\n        <mat-spinner diameter=\"16\" class=\"pdx-button-spinner\"></mat-spinner>\n      } @else {\n        <mat-icon [praxisIcon]=\"buttonIcon() || 'add'\"></mat-icon>\n      }\n    </button>\n  }\n\n  <!-- Descri\u00E7\u00E3o do bot\u00E3o (se dispon\u00EDvel) -->\n  @if (metadata()?.description && !isIconOnlyButton()) {\n    <div \n      class=\"pdx-button-description\"\n      [id]=\"componentId() + '-description'\">\n      {{ metadata()?.description }}\n    </div>\n  }\n\n</div>\n\n<!-- Loading indicator para valida\u00E7\u00E3o ass\u00EDncrona -->\n@if (isLoading()) {\n  <div class=\"pdx-validation-loading\" [attr.aria-label]=\"validationLoadingAriaLabel()\">\n    <mat-icon class=\"pdx-loading-spinner\" [praxisIcon]=\"'mi:hourglass_empty'\"></mat-icon>\n    <span class=\"pdx-sr-only\">{{ validationLoadingSrOnly() }}</span>\n  </div>\n}\n\n<!-- Indicador de estado enterprise (debug) -->\n@if (false && metadata()?.security) {\n  <div class=\"pdx-debug-info\">\n    <small class=\"pdx-debug-security\">\n      Security Level: {{ metadata()?.security?.securityLevel }}\n      @if (metadata()?.security?.audit?.enabled) {\n        | Audit: ON\n      }\n      | Clicks: {{ 0 }}\n      @if (keyboardShortcut()) {\n        | Shortcut: {{ keyboardShortcut() }}\n      }\n    </small>\n  </div>\n}\n", styles: [".pdx-button-container{display:inline-block;position:relative}.pdx-button-container .pdx-button-element{position:relative;overflow:hidden;transition:all .2s ease}.pdx-button-container .pdx-button-element.pdx-button-with-icon .pdx-button-icon{margin-right:8px;font-size:18px;height:18px;width:18px}.pdx-button-container .pdx-button-element .pdx-button-spinner{margin-right:8px}.pdx-button-container .pdx-button-element .pdx-button-spinner:only-child{margin-right:0}.pdx-button-container .pdx-button-element .pdx-button-text{display:inline-block;vertical-align:middle}.pdx-button-container .pdx-button-element:disabled{cursor:not-allowed;opacity:.6}.pdx-button-container .pdx-button-element:focus{outline:2px solid var(--mat-focus-indicator-color, var(--md-sys-color-primary));outline-offset:2px}.pdx-button-container .pdx-button-description{margin-top:4px;font-size:12px;color:var(--mat-form-field-subscript-text-color);text-align:center;line-height:1.3}.pdx-button-container.pdx-button-loading .pdx-button-element{cursor:wait}.pdx-button-container.pdx-button-loading .pdx-button-element .pdx-button-text{opacity:.7}.pdx-button-container.pdx-button-pressed .pdx-button-element{transform:scale(.98);transition:transform .1s ease}.pdx-button-container.pdx-button-no-ripple .pdx-button-element .mat-ripple{display:none}.pdx-button-container.pdx-button-variant-raised .pdx-button-element{box-shadow:var(--md-sys-elevation-level1, var(--md-sys-elevation-level1))}.pdx-button-container.pdx-button-variant-raised .pdx-button-element:hover:not(:disabled){box-shadow:var(--md-sys-elevation-level2, var(--md-sys-elevation-level2))}.pdx-button-container.pdx-button-variant-stroked .pdx-button-element{border:1px solid var(--mat-stroked-button-outline-color)}.pdx-button-container.pdx-button-variant-icon .pdx-button-element{min-width:40px;width:40px;height:40px;border-radius:50%}.pdx-button-container.pdx-button-variant-icon .pdx-button-element .mat-icon{font-size:20px;height:20px;width:20px}.pdx-button-container.pdx-button-variant-fab .pdx-button-element{min-width:56px;width:56px;height:56px}.pdx-button-container.pdx-button-variant-fab .pdx-button-element .mat-icon{font-size:24px;height:24px;width:24px}.pdx-button-container.pdx-button-variant-mini-fab .pdx-button-element{min-width:40px;width:40px;height:40px}.pdx-button-container.pdx-button-variant-mini-fab .pdx-button-element .mat-icon{font-size:20px;height:20px;width:20px}.pdx-button-container.pdx-button-icon-only .pdx-button-description{max-width:120px;font-size:11px}.pdx-validation-loading{display:flex;align-items:center;gap:8px;margin-top:8px;color:var(--mat-form-field-subscript-text-color);font-size:12px}.pdx-validation-loading .pdx-loading-spinner{font-size:16px;height:16px;width:16px;animation:spin 1s linear infinite}.pdx-validation-loading .pdx-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.pdx-debug-info{margin-top:8px;padding:4px 8px;background-color:var(--mat-toolbar-container-background-color, var(--md-sys-color-surface-variant));border-radius:4px;max-width:200px}.pdx-debug-info .pdx-debug-security{font-family:monospace;font-size:10px;color:var(--mat-toolbar-container-text-color, var(--md-sys-color-on-surface-variant));word-break:break-all}@media(max-width:600px){.pdx-button-container.pdx-button-variant-fab .pdx-button-element{min-width:48px;width:48px;height:48px}.pdx-button-container.pdx-button-variant-fab .pdx-button-element .mat-icon{font-size:20px;height:20px;width:20px}.pdx-button-container .pdx-button-element.pdx-button-with-icon .pdx-button-icon{margin-right:6px;font-size:16px;height:16px;width:16px}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes buttonPulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}.pdx-button-container .pdx-button-element:hover:not(:disabled){transform:translateY(-1px);transition:transform .2s ease}.pdx-button-container .pdx-button-element:active:not(:disabled){transform:translateY(0) scale(.98);transition:transform .1s ease}.pdx-button-container.pdx-button-loading .pdx-button-element{animation:buttonPulse 1.5s infinite ease-in-out}@media(prefers-reduced-motion:reduce){.pdx-button-container .pdx-button-element{transition:none;animation:none}.pdx-button-container .pdx-button-element:hover:not(:disabled){transform:none}.pdx-button-container .pdx-button-element:active:not(:disabled){transform:none}.pdx-loading-spinner,.pdx-button-loading .pdx-button-element{animation:none}}@media(prefers-contrast:high){.pdx-button-container .pdx-button-element:focus{outline:3px solid;outline-offset:2px}}@media(prefers-color-scheme:dark){.pdx-button-container.pdx-button-variant-raised .pdx-button-element{box-shadow:var(--md-sys-elevation-level2, var(--md-sys-elevation-level2))}.pdx-button-container.pdx-button-variant-raised .pdx-button-element:hover:not(:disabled){box-shadow:var(--md-sys-elevation-level3, var(--md-sys-elevation-level3))}}@media print{.pdx-button-container .pdx-button-element{box-shadow:none!important;border:1px solid var(--md-sys-color-outline);background:transparent!important;color:var(--md-sys-color-on-surface)!important}.pdx-button-container .pdx-button-element .pdx-button-spinner,.pdx-validation-loading,.pdx-debug-info{display:none}}.pdx-button-container .mat-primary.pdx-button-loading{background-color:var(--md-sys-color-primary)}.pdx-button-container .mat-accent.pdx-button-loading{background-color:var(--md-sys-color-secondary)}.pdx-button-container .mat-warn.pdx-button-loading{background-color:var(--md-sys-color-error)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$1.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$1.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.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: MatProgressSpinnerModule }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] });
 }
@@ -40285,6 +40292,7 @@ class MaterialAvatarComponent {
     defaultIcon;
     // Visual props
     appearanceTick = signal(0, ...(ngDevMode ? [{ debugName: "appearanceTick" }] : []));
+    contentTick = signal(0, ...(ngDevMode ? [{ debugName: "contentTick" }] : []));
     _themeColor = 'primary';
     _rounded = 'full';
     _size = 'medium';
@@ -40382,6 +40390,7 @@ class MaterialAvatarComponent {
     }, ...(ngDevMode ? [{ debugName: "_syncControlValue" }] : []));
     // Resolved sources
     resolvedImageSrc = computed(() => {
+        this.contentTick();
         // Priority: explicit input > form control value > metadata.defaultValue
         const byInput = this.normalizeImageUrl(this.imageSrc);
         if (byInput)
@@ -40419,6 +40428,7 @@ class MaterialAvatarComponent {
     // Host classes
     componentCssClasses = computed(() => {
         this.appearanceTick();
+        this.contentTick();
         const classes = ['pfx-avatar'];
         classes.push(`theme-${this.themeColor || 'primary'}`);
         classes.push(`rounded-${this.rounded || 'full'}`);
@@ -40456,6 +40466,7 @@ class MaterialAvatarComponent {
     }, ...(ngDevMode ? [{ debugName: "resolvedStyle" }] : []));
     // Accessible label fallback
     computedAriaLabel = computed(() => {
+        this.contentTick();
         const explicit = (this.ariaLabel || '').trim();
         if (explicit)
             return explicit;
@@ -40562,9 +40573,16 @@ class MaterialAvatarComponent {
     shouldShowDefaultIcon() {
         return !this.hasImage() && !this.hasExplicitIcon() && !this.hasInitials() && this.hasDefaultIcon();
     }
-    hasExplicitIcon = computed(() => this.resolveIconKind(this.icon) !== null, ...(ngDevMode ? [{ debugName: "hasExplicitIcon" }] : []));
-    hasDefaultIcon = computed(() => this.resolveIconKind(this.defaultIcon) !== null, ...(ngDevMode ? [{ debugName: "hasDefaultIcon" }] : []));
+    hasExplicitIcon = computed(() => {
+        this.contentTick();
+        return this.resolveIconKind(this.icon) !== null;
+    }, ...(ngDevMode ? [{ debugName: "hasExplicitIcon" }] : []));
+    hasDefaultIcon = computed(() => {
+        this.contentTick();
+        return this.resolveIconKind(this.defaultIcon) !== null;
+    }, ...(ngDevMode ? [{ debugName: "hasDefaultIcon" }] : []));
     normalizedInitials() {
+        this.contentTick();
         // Prioritize explicit initials
         const explicitInitials = (this.initials || '').trim();
         if (explicitInitials) {
@@ -40604,6 +40622,7 @@ class MaterialAvatarComponent {
     }
     // ... (rest of methods)
     iconName() {
+        this.contentTick();
         // Used in template inside specific blocks.
         // If showIcon() is true => icon is explicit.
         // If showDefaultIcon() is true => icon is default.
@@ -40627,6 +40646,7 @@ class MaterialAvatarComponent {
         return null;
     }
     iconSvgSafe() {
+        this.contentTick();
         // Similar logic for SVG
         const source = this.hasExplicitIcon() ? this.icon : this.defaultIcon;
         const kind = this.resolveIconKind(source);
@@ -40650,6 +40670,7 @@ class MaterialAvatarComponent {
         return null;
     }
     iconFontClass() {
+        this.contentTick();
         const source = this.hasExplicitIcon() ? this.icon : this.defaultIcon;
         const kind = this.resolveIconKind(source);
         if (kind === 'font') {
@@ -40657,66 +40678,78 @@ class MaterialAvatarComponent {
         }
         return null;
     }
+    ngOnChanges(_changes) {
+        this.contentTick.update((value) => value + 1);
+    }
     // Allow DynamicFieldLoader to apply metadata extras
     setInputMetadata(meta) {
+        const previousMeta = this.metadata();
         const typedMeta = meta;
         this.metadata.set(typedMeta);
         const extras = typedMeta?.extra || {};
+        const hadPrevExtra = (key) => !!previousMeta?.extra &&
+            Object.prototype.hasOwnProperty.call(previousMeta.extra, key);
+        const hadPrevRoot = (key) => !!previousMeta &&
+            Object.prototype.hasOwnProperty.call(previousMeta, key);
+        const resolveExtra = (key, rootValue) => {
+            if (extras[key] !== undefined) {
+                return extras[key];
+            }
+            if (rootValue !== undefined) {
+                return rootValue;
+            }
+            if (hadPrevExtra(String(key)) || hadPrevRoot(String(key))) {
+                return undefined;
+            }
+            return undefined;
+        };
         // Known keys: imageSrc, imageAlt, initials, name, icon, themeColor, rounded, size, fillMode, border, tooltip, ariaLabel
-        if (extras.imageSrc !== undefined)
-            this.imageSrc = extras.imageSrc;
-        else if (typedMeta?.imageSrc !== undefined)
-            this.imageSrc = String(typedMeta.imageSrc);
-        if (extras.imageAlt !== undefined)
-            this.imageAlt = extras.imageAlt;
-        else if (typedMeta?.imageAlt !== undefined)
-            this.imageAlt = typedMeta.imageAlt;
-        if (extras.initials !== undefined)
-            this.initials = extras.initials;
-        if (extras.name !== undefined)
-            this.name = extras.name;
-        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.sizePx !== undefined)
-            this.sizePx = typeof extras.sizePx === 'number' ? extras.sizePx : Number(extras.sizePx);
-        if (extras.sizeCss !== undefined)
-            this.sizeCss = extras.sizeCss;
-        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') {
+        this.imageSrc = resolveExtra('imageSrc', typedMeta?.imageSrc !== undefined ? String(typedMeta.imageSrc) : undefined);
+        this.imageAlt = resolveExtra('imageAlt', typedMeta?.imageAlt);
+        this.initials = resolveExtra('initials');
+        this.name = resolveExtra('name');
+        this.icon = resolveExtra('icon');
+        this.defaultIcon = resolveExtra('defaultIcon');
+        this.themeColor = resolveExtra('themeColor');
+        this.rounded = resolveExtra('rounded');
+        this.size = resolveExtra('size');
+        this.fillMode = resolveExtra('fillMode');
+        this.border = !!resolveExtra('border');
+        const sizePxValue = resolveExtra('sizePx');
+        this.sizePx =
+            sizePxValue === undefined
+                ? undefined
+                : typeof sizePxValue === 'number'
+                    ? sizePxValue
+                    : Number(sizePxValue);
+        this.sizeCss = resolveExtra('sizeCss');
+        this.tooltip = resolveExtra('tooltip');
+        this.ariaLabel = resolveExtra('ariaLabel');
+        this.class = resolveExtra('class');
+        const styleValue = resolveExtra('style');
+        if (styleValue !== undefined) {
+            if (typeof styleValue === 'string') {
                 try {
-                    const obj = JSON.parse(extras.style);
+                    const obj = JSON.parse(styleValue);
                     if (obj && typeof obj === 'object')
                         this.style = obj;
                 }
                 catch {
                     // ignore invalid JSON
+                    this.style = undefined;
                 }
             }
-            else if (typeof extras.style === 'object') {
-                this.style = extras.style;
+            else if (typeof styleValue === 'object') {
+                this.style = styleValue;
             }
         }
+        else if (hadPrevExtra('style')) {
+            this.style = undefined;
+        }
+        this.contentTick.update((value) => value + 1);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: MaterialAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: MaterialAvatarComponent, isStandalone: true, selector: "pdx-material-avatar", inputs: { imageSrc: "imageSrc", imageAlt: "imageAlt", initials: "initials", name: "name", icon: "icon", defaultIcon: "defaultIcon", themeColor: "themeColor", rounded: "rounded", size: "size", fillMode: "fillMode", border: "border", sizePx: "sizePx", sizeCss: "sizeCss", 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.aria-hidden": "visible ? null : \"true\"", "attr.role": "\"img\"", "attr.aria-label": "computedAriaLabel() || null", "attr.aria-describedby": "hintId()", "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: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: MaterialAvatarComponent, isStandalone: true, selector: "pdx-material-avatar", inputs: { imageSrc: "imageSrc", imageAlt: "imageAlt", initials: "initials", name: "name", icon: "icon", defaultIcon: "defaultIcon", themeColor: "themeColor", rounded: "rounded", size: "size", fillMode: "fillMode", border: "border", sizePx: "sizePx", sizeCss: "sizeCss", 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.aria-hidden": "visible ? null : \"true\"", "attr.role": "\"img\"", "attr.aria-label": "computedAriaLabel() || null", "attr.aria-describedby": "hintId()", "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" } }, usesOnChanges: true, ngImport: i0, template: `
     <span class="pfx-avatar__inner"
           [attr.aria-hidden]="presentationMode ? 'true' : null"
           [ngStyle]="resolvedStyle()"
@@ -44528,11 +44561,13 @@ class PdxColorPickerComponent extends SimpleBaseInputComponent {
     current = signal(null, ...(ngDevMode ? [{ debugName: "current" }] : []));
     draft = signal(null, ...(ngDevMode ? [{ debugName: "draft" }] : []));
     draftAlpha = signal(1, ...(ngDevMode ? [{ debugName: "draftAlpha" }] : []));
+    configTick = signal(0, ...(ngDevMode ? [{ debugName: "configTick" }] : []));
     panelWidthPx = 340;
     constructor(bottomSheet) {
         super();
         this.bottomSheet = bottomSheet;
         effect(() => {
+            this.configTick();
             this.panelWidthPx = this.coerceWidth(this.popupSettings?.width ?? 340);
         });
         // React to metadata changes to keep inputs in sync
@@ -44611,8 +44646,12 @@ class PdxColorPickerComponent extends SimpleBaseInputComponent {
                 this.visible = !!md.visible;
             if (typeof md.presentationMode === 'boolean')
                 this.presentationMode = !!md.presentationMode;
+            this.configTick.update((value) => value + 1);
         });
     }
+    ngOnChanges(_changes) {
+        this.configTick.update((value) => value + 1);
+    }
     resolveClearButtonConfig(md) {
         const metadata = md && typeof md === 'object' && !Array.isArray(md) ? md : {};
         const cfg = metadata.clearButton;
@@ -44727,8 +44766,14 @@ class PdxColorPickerComponent extends SimpleBaseInputComponent {
     onClose() { this.close.emit(); }
     // Views logic
     selectedTabIndex = signal(0, ...(ngDevMode ? [{ debugName: "selectedTabIndex" }] : []));
-    showGradient = computed(() => this.views.includes('gradient'), ...(ngDevMode ? [{ debugName: "showGradient" }] : []));
-    showPalette = computed(() => this.views.includes('palette'), ...(ngDevMode ? [{ debugName: "showPalette" }] : []));
+    showGradient = computed(() => {
+        this.configTick();
+        return this.views.includes('gradient');
+    }, ...(ngDevMode ? [{ debugName: "showGradient" }] : []));
+    showPalette = computed(() => {
+        this.configTick();
+        return this.views.includes('palette');
+    }, ...(ngDevMode ? [{ debugName: "showPalette" }] : []));
     onTabIndexChange(i) {
         this.selectedTabIndex.set(i);
         const v = this.views[i] || 'gradient';
@@ -44736,7 +44781,10 @@ class PdxColorPickerComponent extends SimpleBaseInputComponent {
         this.activeViewChange.emit(v);
     }
     // Draft preview strings
-    draftPreview = computed(() => this.toFormat(this.draft(), this.format, this.draftAlpha()), ...(ngDevMode ? [{ debugName: "draftPreview" }] : []));
+    draftPreview = computed(() => {
+        this.configTick();
+        return this.toFormat(this.draft(), this.format, this.draftAlpha());
+    }, ...(ngDevMode ? [{ debugName: "draftPreview" }] : []));
     draftSolidHex = computed(() => this.toHex(this.draft()) || this.defaultHex(), ...(ngDevMode ? [{ debugName: "draftSolidHex" }] : []));
     draftOpacity = computed(() => this.draftAlpha(), ...(ngDevMode ? [{ debugName: "draftOpacity" }] : []));
     // Preview swatch background for input prefix
@@ -44759,6 +44807,7 @@ class PdxColorPickerComponent extends SimpleBaseInputComponent {
     customColors = signal([], ...(ngDevMode ? [{ debugName: "customColors" }] : []));
     recentColors = signal([], ...(ngDevMode ? [{ debugName: "recentColors" }] : []));
     paletteColors = computed(() => {
+        this.configTick();
         const base = this.buildPaletteColors(this.paletteSettings);
         const extra = this.customColors();
         // dedupe (case-insensitive)
@@ -45125,7 +45174,7 @@ class PdxColorPickerComponent extends SimpleBaseInputComponent {
                 useExisting: forwardRef(() => PdxColorPickerComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "toggleBtn", first: true, predicate: ["toggleBtn"], descendants: true }, { propertyName: "menuTrigger", first: true, predicate: MatMenuTrigger, descendants: true }], usesInheritance: true, ngImport: i0, template: `
+        ], viewQueries: [{ propertyName: "toggleBtn", first: true, predicate: ["toggleBtn"], descendants: true }, { propertyName: "menuTrigger", first: true, predicate: MatMenuTrigger, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
     <mat-form-field
       [appearance]="materialAppearance()"
       [color]="materialColor()"