@praxisui/dynamic-fields 9.0.0-beta.20 → 9.0.0-beta.21

package/docs/dynamic-fields-field-catalog.md

@@ -179,7 +179,7 @@ Use `stateInitialValues` apenas quando o valor do preset precisa continuar coere
 
 | Field         | controlType                                   | Quando usar                                                                                           | Quando evitar                                    | Valor esperado                | Snippet                                                                         | Detail doc                                |
 | ------------- | --------------------------------------------- | ----------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ----------------------------- | ------------------------------------------------------------------------------- | ----------------------------------------- |
-| Checkbox      | <span id="checkbox"></span>`checkbox`         | booleano simples com `selectionMode: 'boolean'` ou multiplas escolhas com `selectionMode: 'multiple'` | contrato novo sem `selectionMode`; escolha unica | `boolean \| unknown[]`        | `{ name: 'privacyConsent', controlType: 'checkbox', selectionMode: 'boolean' }` | `pdx-material-checkbox-group.json-api.md` |
+| Checkbox      | <span id="checkbox"></span>`checkbox`         | booleano simples com `selectionMode: 'boolean'` ou múltiplas escolhas com `selectionMode: 'multiple'`; em migrações, flags `S`/`N` e `1`/`0` são normalizadas no modo booleano | contrato novo sem `selectionMode`; escolha única | `boolean \| unknown[]`        | `{ name: 'privacyConsent', controlType: 'checkbox', selectionMode: 'boolean' }` | `pdx-material-checkbox-group.json-api.md` |
 | Radio group   | <span id="radio"></span>`radio`               | escolha unica explicita com `selectionMode: 'single'`                                                 | muitas opcoes/espaco restrito                    | `string \| number \| boolean` | `{ name: 'priority', controlType: 'radio', selectionMode: 'single' }`           | `pdx-material-radio-group.json-api.md`    |
 | Toggle        | <span id="toggle"></span>`toggle`             | booleano binario                                                                                      | multiplos estados                                | `boolean`                     | `{ name: 'active', controlType: 'toggle' }`                                     | `pdx-material-slide-toggle.json-api.md`   |
 | Button toggle | <span id="buttontoggle"></span>`buttonToggle` | escolha segmentada curta                                                                              | listas longas                                    | `string \| number`            | `{ name: 'mode', controlType: 'buttonToggle' }`                                 | `pdx-material-button-toggle.json-api.md`  |

package/fesm2022/praxisui-dynamic-fields.mjs

@@ -3,7 +3,7 @@ import { NgControl, FormControl, Validators, ReactiveFormsModule, NG_VALUE_ACCES
 import * as i0 from '@angular/core';
 import { InjectionToken, inject, DestroyRef, ElementRef, ChangeDetectorRef, Injector, signal, output, computed, Input, Directive, viewChild, effect, EventEmitter, Output, Component, forwardRef, LOCALE_ID, Injectable, ChangeDetectionStrategy, ViewChild, ViewContainerRef, HostListener, HostBinding, ViewEncapsulation, ENVIRONMENT_INITIALIZER, Inject, ViewChildren, TemplateRef, ContentChild, APP_INITIALIZER, Optional } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { providePraxisI18n, PraxisI18nService, isCssTextTransform, getTextTransformer, GlobalActionService, GenericCrudService, GlobalConfigService, PraxisIconDirective, FieldControlType, resolveBuiltinPresets, INLINE_FILTER_CONTROL_TYPES, FieldSelectorRegistry, FIELD_SELECTOR_REGISTRY_BASE, FIELD_SELECTOR_REGISTRY_DISABLE_DEFAULTS, LoggerService, normalizeControlTypeToken, resolveInlineFilterControlType, resolveControlTypeAlias, DEFAULT_FIELD_SELECTOR_CONTROL_TYPE_MAP, resolveValuePresentation, FieldDataType, DynamicFormService, ResourceDiscoveryService, ResourceSurfaceOpenAdapterService, classifyEntityLookupResult, ComponentMetadataRegistry, createCpfCnpjValidator, NumericFormat, interpolatePraxisTranslation, FIELD_METADATA_CAPABILITIES } from '@praxisui/core';
+import { providePraxisI18n, PraxisI18nService, isCssTextTransform, getTextTransformer, GlobalActionService, GenericCrudService, GlobalConfigService, PraxisIconDirective, FieldControlType, resolveBuiltinPresets, INLINE_FILTER_CONTROL_TYPES, FieldSelectorRegistry, FIELD_SELECTOR_REGISTRY_BASE, FIELD_SELECTOR_REGISTRY_DISABLE_DEFAULTS, LoggerService, normalizeControlTypeToken, resolveInlineFilterControlType, resolveControlTypeAlias, DEFAULT_FIELD_SELECTOR_CONTROL_TYPE_MAP, resolveValuePresentation, FieldDataType, PraxisJsonLogicService, resolveFieldPresentation as resolveFieldPresentation$1, DynamicFormService, ResourceDiscoveryService, ResourceSurfaceOpenAdapterService, classifyEntityLookupResult, ComponentMetadataRegistry, createCpfCnpjValidator, NumericFormat, interpolatePraxisTranslation, FIELD_METADATA_CAPABILITIES } from '@praxisui/core';
 import { Subscription, BehaviorSubject, combineLatest, of, EMPTY, firstValueFrom, fromEvent, take as take$1 } from 'rxjs';
 import { Router } from '@angular/router';
 import * as i1$3 from '@angular/material/dialog';
@@ -5963,6 +5963,7 @@ class MaterialCheckboxGroupComponent extends SimpleBaseSelectComponent {
     presentationMode = false;
     disabledModeAppliedToControl = false;
     ngDoCheck() {
+        this.normalizeBooleanControlValue();
         this.syncDisabledModeControlState();
     }
     checkboxInteractionDisabled() {
@@ -6041,6 +6042,11 @@ class MaterialCheckboxGroupComponent extends SimpleBaseSelectComponent {
             optionLabelKey: matMetadata.optionLabelKey,
             optionValueKey: matMetadata.optionValueKey,
         });
+        this.normalizeBooleanControlValue();
+    }
+    setExternalControl(control) {
+        super.setExternalControl(control);
+        this.normalizeBooleanControlValue();
     }
     /** Disables options when maxSelections reached */
     isOptionDisabled(option) {
@@ -6245,6 +6251,43 @@ class MaterialCheckboxGroupComponent extends SimpleBaseSelectComponent {
         this.markAsTouched();
         this.syncBooleanOperationalEvents(nextValue);
     }
+    normalizeBooleanControlValue() {
+        if (!this.isBooleanCheckbox()) {
+            return;
+        }
+        const control = this.control();
+        const coerced = this.coerceBooleanControlValue(control.value);
+        if (coerced === null || control.value === coerced) {
+            return;
+        }
+        control.setValue(coerced, { emitEvent: false });
+        this.fieldState.update((state) => ({ ...state, value: coerced }));
+    }
+    coerceBooleanControlValue(value) {
+        if (typeof value === 'boolean')
+            return value;
+        if (typeof value === 'number') {
+            if (value === 1)
+                return true;
+            if (value === 0)
+                return false;
+            return null;
+        }
+        if (typeof value !== 'string')
+            return null;
+        const normalized = value
+            .normalize('NFD')
+            .replace(/[\u0300-\u036f]/g, '')
+            .trim()
+            .toLowerCase();
+        if (['true', 't', 'sim', 's', 'yes', 'y', 'si', 'oui', 'ja', '1', 'on'].includes(normalized)) {
+            return true;
+        }
+        if (['false', 'f', 'nao', 'n', 'no', 'non', 'nein', '0', 'off'].includes(normalized)) {
+            return false;
+        }
+        return null;
+    }
     syncBooleanOperationalEvents(nextValue) {
         const emittedOption = {
             label: this.label?.trim() || this.humanizeName(this.metadata()?.name),
@@ -8855,7 +8898,7 @@ function formatDisplayValue(field, value, options) {
     if (value instanceof Date) {
         const explicit = resolveFieldPresentation(field, value, options);
         return explicit
-            ? formatTypedValue(field, value, explicit)
+            ? formatTypedValue(field, value, explicit, options)
             : formatHeuristicDateTime(value, options);
     }
     if (value && typeof value === 'object') {
@@ -8884,13 +8927,13 @@ function formatDisplayValue(field, value, options) {
         if (!trimmed)
             return EMPTY_DISPLAY;
         if (presentation && presentation.type !== 'string') {
-            return formatTypedValue(field, trimmed, presentation);
+            return formatTypedValue(field, trimmed, presentation, options);
         }
         const documentIdentifier = formatDocumentIdentifierValue(field, trimmed);
         if (documentIdentifier)
             return documentIdentifier;
         if (presentation) {
-            return formatTypedValue(field, trimmed, presentation);
+            return formatTypedValue(field, trimmed, presentation, options);
         }
         if (isISODate(trimmed))
             return formatHeuristicDate(trimmed, options);
@@ -8901,13 +8944,13 @@ function formatDisplayValue(field, value, options) {
     }
     if (typeof value === 'number') {
         if (presentation) {
-            return formatTypedValue(field, value, presentation);
+            return formatTypedValue(field, value, presentation, options);
         }
         return String(value);
     }
     if (typeof value === 'boolean') {
         if (presentation) {
-            return formatTypedValue(field, value, presentation);
+            return formatTypedValue(field, value, presentation, options);
         }
         return String(value);
     }
@@ -9337,10 +9380,10 @@ function mergeLocalization(base, override) {
             : {}),
     };
 }
-function formatTypedValue(field, value, presentation) {
+function formatTypedValue(field, value, presentation, options) {
     switch (presentation.type) {
         case 'boolean':
-            return formatBooleanPresentation(value, presentation.locale);
+            return formatBooleanPresentation(value, presentation.locale, field, options);
         case 'date':
         case 'datetime':
         case 'time':
@@ -9364,18 +9407,62 @@ function formatTypedValue(field, value, presentation) {
             return String(value);
     }
 }
-function formatBooleanPresentation(value, locale) {
-    const [trueLabel, falseLabel] = resolveBooleanLabels(locale);
-    if (typeof value === 'string') {
-        const normalized = value.trim().toLowerCase();
-        if (normalized === 'true')
-            return trueLabel;
-        if (normalized === 'false')
-            return falseLabel;
+function formatBooleanPresentation(value, locale, field, options) {
+    const labels = resolveBooleanLabels(locale, field, options);
+    const coerced = coerceBooleanPresentationValue(value);
+    if (coerced !== null)
+        return coerced ? labels[0] : labels[1];
+    return value ? labels[0] : labels[1];
+}
+function coerceBooleanPresentationValue(value) {
+    if (typeof value === 'boolean')
+        return value;
+    if (typeof value === 'number') {
+        if (value === 1)
+            return true;
+        if (value === 0)
+            return false;
+        return null;
+    }
+    if (typeof value !== 'string')
+        return null;
+    const normalized = normalizeComparableString(value);
+    if (normalized === 'true' ||
+        normalized === 't' ||
+        normalized === 'sim' ||
+        normalized === 's' ||
+        normalized === 'yes' ||
+        normalized === 'y' ||
+        normalized === 'si' ||
+        normalized === 'oui' ||
+        normalized === 'ja' ||
+        normalized === '1') {
+        return true;
     }
-    return value ? trueLabel : falseLabel;
+    if (normalized === 'false' ||
+        normalized === 'f' ||
+        normalized === 'nao' ||
+        normalized === 'n' ||
+        normalized === 'no' ||
+        normalized === 'non' ||
+        normalized === 'nein' ||
+        normalized === '0') {
+        return false;
+    }
+    return null;
 }
-function resolveBooleanLabels(locale) {
+function resolveBooleanLabels(locale, field, options) {
+    if (options?.booleanLabels?.trueLabel && options.booleanLabels.falseLabel) {
+        return [options.booleanLabels.trueLabel, options.booleanLabels.falseLabel];
+    }
+    const explicit = field?.valuePresentation?.booleanLabels ?? field?.booleanLabels;
+    if (explicit && typeof explicit === 'object') {
+        const trueLabel = normalizeString(explicit.trueLabel ?? explicit.true ?? explicit.yes);
+        const falseLabel = normalizeString(explicit.falseLabel ?? explicit.false ?? explicit.no);
+        if (trueLabel && falseLabel) {
+            return [trueLabel, falseLabel];
+        }
+    }
     const normalized = String(locale || '').trim().toLowerCase();
     if (normalized.startsWith('pt')) {
         return ['Sim', 'Não'];
@@ -9754,6 +9841,7 @@ class FieldShellComponent {
     angularLocale = inject(LOCALE_ID, { optional: true }) ?? 'en-US';
     i18n = inject(PraxisI18nService, { optional: true });
     cdr = inject(ChangeDetectorRef);
+    jsonLogic = inject(PraxisJsonLogicService);
     optionDisplayResolver = inject(OptionDisplayResolverService);
     crudService = inject(GenericCrudService, {
         optional: true,
@@ -9915,52 +10003,152 @@ class FieldShellComponent {
         }
     }
     getPresentationValue() {
-        const raw = this.presentationDisplayValue ?? this.control?.value;
+        const resolved = this.getResolvedPresentation();
+        const raw = this.getPresentationLabelOverride(resolved) ??
+            this.presentationDisplayValue ??
+            this.control?.value;
+        const field = this.getPresentationFormattingField(resolved);
         try {
-            const fn = this.field?.transformDisplayValue;
+            const fn = field?.transformDisplayValue;
             const formatted = typeof fn === 'function'
                 ? fn(raw)
-                : formatDisplayValue(this.field, raw, {
+                : formatDisplayValue(field, raw, {
                     appLocale: this.resolvePresentationAppLocale(),
-                    surfaceLocale: this.field?.localization?.locale ?? this.field?.locale ?? undefined,
-                    localization: this.field?.localization ?? undefined,
+                    surfaceLocale: field?.localization?.locale ?? field?.locale ?? undefined,
+                    localization: field?.localization ?? undefined,
+                    booleanLabels: this.resolveBooleanLabels(),
                 });
             return formatted == null ? '' : String(formatted);
         }
         catch {
-            return formatDisplayValue(this.field, raw, {
+            return formatDisplayValue(field, raw, {
                 appLocale: this.resolvePresentationAppLocale(),
-                surfaceLocale: this.field?.localization?.locale ?? this.field?.locale ?? undefined,
-                localization: this.field?.localization ?? undefined,
+                surfaceLocale: field?.localization?.locale ?? field?.locale ?? undefined,
+                localization: field?.localization ?? undefined,
+                booleanLabels: this.resolveBooleanLabels(),
             });
         }
     }
     getPresentationHtml() {
+        const resolved = this.getResolvedPresentation();
         const raw = this.control?.value;
         const displayValue = this.presentationDisplayValue;
+        const field = this.getPresentationFormattingField(resolved);
+        const semanticLabel = this.getPresentationLabelOverride(resolved);
         try {
-            const fn = this.field?.transformDisplayValue;
-            const formatted = displayValue !== null
-                ? displayValue
-                : typeof fn === 'function'
-                    ? fn(raw)
-                    : null;
+            const fn = field?.transformDisplayValue;
+            const formatted = semanticLabel !== null
+                ? semanticLabel
+                : displayValue !== null
+                    ? displayValue
+                    : typeof fn === 'function'
+                        ? fn(raw)
+                        : null;
             const val = formatted == null ? raw : formatted;
-            return formatDisplayHtml(this.field, val, {
+            return formatDisplayHtml(field, val, {
                 appLocale: this.resolvePresentationAppLocale(),
-                surfaceLocale: this.field?.localization?.locale ?? this.field?.locale ?? undefined,
-                localization: this.field?.localization ?? undefined,
+                surfaceLocale: field?.localization?.locale ?? field?.locale ?? undefined,
+                localization: field?.localization ?? undefined,
+                booleanLabels: this.resolveBooleanLabels(),
             });
         }
         catch {
-            return formatDisplayHtml(this.field, raw, {
+            return formatDisplayHtml(field, semanticLabel ?? raw, {
                 appLocale: this.resolvePresentationAppLocale(),
-                surfaceLocale: this.field?.localization?.locale ?? this.field?.locale ?? undefined,
-                localization: this.field?.localization ?? undefined,
+                surfaceLocale: field?.localization?.locale ?? field?.locale ?? undefined,
+                localization: field?.localization ?? undefined,
+                booleanLabels: this.resolveBooleanLabels(),
             });
         }
     }
+    getResolvedPresentation() {
+        const field = this.field;
+        return resolveFieldPresentation$1(field?.presentation, field?.presentationRules, this.buildPresentationContext(), { jsonLogic: this.jsonLogic });
+    }
+    hasResolvedPresentationState() {
+        const presentation = this.getResolvedPresentation();
+        return Boolean(presentation.presenter ||
+            presentation.tone ||
+            presentation.icon ||
+            presentation.label ||
+            presentation.badge ||
+            presentation.tooltip ||
+            presentation.appearance ||
+            presentation.valuePresentation);
+    }
+    getPresentationTone() {
+        return this.getResolvedPresentation().tone ?? null;
+    }
+    getPresentationAppearance() {
+        return this.getResolvedPresentation().appearance ?? null;
+    }
+    getPresentationPresenter() {
+        const presenter = this.getResolvedPresentation().presenter;
+        if (presenter) {
+            return presenter;
+        }
+        return this.isBooleanPresentationField() ? 'chip' : 'text';
+    }
+    getPresentationTooltip() {
+        return this.getResolvedPresentation().tooltip ?? this.field?.tooltip ?? null;
+    }
+    getPresentationBadge() {
+        const presentation = this.getResolvedPresentation();
+        if (!presentation.badge || this.shouldPresentationLabelReplaceValue(presentation)) {
+            return null;
+        }
+        return presentation.badge;
+    }
+    isBooleanPresentationField() {
+        const field = this.field;
+        const type = String(field?.valuePresentation?.type ?? field?.dataType ?? field?.controlType ?? '').toLowerCase();
+        return (type === 'boolean' ||
+            type.includes('checkbox') ||
+            type.includes('toggle'));
+    }
+    getBooleanPresentationState() {
+        if (!this.isBooleanPresentationField())
+            return null;
+        const raw = this.control?.value;
+        if (typeof raw === 'boolean')
+            return raw;
+        if (typeof raw === 'number') {
+            if (raw === 1)
+                return true;
+            if (raw === 0)
+                return false;
+            return null;
+        }
+        if (typeof raw !== 'string')
+            return null;
+        const normalized = raw.normalize('NFD').replace(/[\u0300-\u036f]/g, '').trim().toLowerCase();
+        if (['true', 't', 'sim', 's', 'yes', 'y', 'si', 'oui', 'ja', '1'].includes(normalized))
+            return true;
+        if (['false', 'f', 'nao', 'n', 'no', 'non', 'nein', '0'].includes(normalized))
+            return false;
+        return null;
+    }
+    resolveBooleanLabels() {
+        if (this.field?.localization?.locale || this.field?.locale) {
+            return null;
+        }
+        const locale = this.i18n?.getLocale?.() ?? this.angularLocale;
+        if (String(locale).toLowerCase().startsWith('pt')) {
+            return {
+                trueLabel: this.i18n?.t('praxis.dynamicFields.boolean.true', undefined, 'Sim') ?? 'Sim',
+                falseLabel: this.i18n?.t('praxis.dynamicFields.boolean.false', undefined, 'Não') ?? 'Não',
+            };
+        }
+        return {
+            trueLabel: this.i18n?.t('praxis.dynamicFields.boolean.true', undefined, 'Yes') ?? 'Yes',
+            falseLabel: this.i18n?.t('praxis.dynamicFields.boolean.false', undefined, 'No') ?? 'No',
+        };
+    }
     getPresentationPrefixIcon() {
+        const semanticIcon = this.normalizeIconName(this.getResolvedPresentation().icon);
+        if (semanticIcon) {
+            return semanticIcon;
+        }
         const field = this.field;
         const explicit = this.normalizeIconName(field?.prefixIcon);
         if (explicit) {
@@ -10026,6 +10214,9 @@ class FieldShellComponent {
         });
     }
     getPresentationIconColor(position) {
+        if (position === 'prefix' && this.getResolvedPresentation().icon) {
+            return undefined;
+        }
         const field = this.field;
         const value = position === 'prefix'
             ? field?.prefixIconColor ?? field?.iconColor
@@ -10060,6 +10251,55 @@ class FieldShellComponent {
         const angularLocale = this.angularLocale?.trim();
         return angularLocale || 'en-US';
     }
+    getPresentationFormattingField(presentation) {
+        if (!presentation.valuePresentation) {
+            return this.field;
+        }
+        return {
+            ...this.field,
+            valuePresentation: presentation.valuePresentation,
+        };
+    }
+    getPresentationLabelOverride(presentation) {
+        if (!presentation.label || !this.shouldPresentationLabelReplaceValue(presentation)) {
+            return null;
+        }
+        return presentation.label;
+    }
+    shouldPresentationLabelReplaceValue(presentation) {
+        return (Boolean(presentation.label) &&
+            ['status', 'badge', 'chip'].includes(String(presentation.presenter ?? '')));
+    }
+    buildPresentationContext() {
+        const field = this.field;
+        const rawValue = this.control?.value;
+        const fieldName = typeof field?.name === 'string' && field.name.trim().length
+            ? field.name.trim()
+            : undefined;
+        const formData = this.asRecord(field?.presentationContext?.formData ?? field?.formData);
+        const row = this.asRecord(field?.presentationContext?.row ?? field?.row);
+        const context = {
+            value: rawValue,
+            rawValue,
+            fieldName,
+            field,
+            metadata: field,
+            formData,
+            row,
+        };
+        if (formData) {
+            Object.assign(context, formData);
+        }
+        if (fieldName) {
+            context[fieldName] = rawValue;
+        }
+        return context;
+    }
+    asRecord(value) {
+        return value && typeof value === 'object' && !Array.isArray(value)
+            ? value
+            : undefined;
+    }
     refreshPresentationDisplayValue() {
         this.resolveSub?.unsubscribe();
         this.resolveSub = undefined;
@@ -10095,7 +10335,18 @@ class FieldShellComponent {
       >
         <!-- Presentation block -->
         @if (effectivePresentationMode && !renderContentInPresentation()) {
-          <div class="praxis-presentation" [attr.data-field]="fieldNameAttr">
+          <div
+            class="praxis-presentation"
+            [class.praxis-presentation--boolean]="isBooleanPresentationField()"
+            [class.praxis-presentation--boolean-true]="getBooleanPresentationState() === true"
+            [class.praxis-presentation--boolean-false]="getBooleanPresentationState() === false"
+            [class.praxis-presentation--semantic]="hasResolvedPresentationState()"
+            [attr.data-field]="fieldNameAttr"
+            [attr.data-presentation-tone]="getPresentationTone()"
+            [attr.data-presentation-appearance]="getPresentationAppearance()"
+            [attr.data-presentation-presenter]="getPresentationPresenter()"
+            [attr.title]="getPresentationTooltip()"
+          >
             <span class="praxis-presentation__label">{{
               fieldLabelText()
             }}</span>
@@ -10116,6 +10367,9 @@ class FieldShellComponent {
                 class="praxis-presentation__value"
                 [innerHTML]="getPresentationHtml()"
               ></span>
+              @if (getPresentationBadge(); as badge) {
+                <span class="praxis-presentation__badge">{{ badge }}</span>
+              }
               @if (getPresentationSuffixIcon(); as suffixIcon) {
                 <mat-icon
                   class="praxis-presentation__icon praxis-presentation__icon--suffix"
@@ -10179,7 +10433,7 @@ class FieldShellComponent {
 
       </div>
     </div>
-  `, isInline: true, styles: [".pfx-field-shell .mat-mdc-form-field,.pfx-field-shell mat-form-field{width:var(--pfx-field-shell-field-width, 100%)}.pfx-field-shell .mat-mdc-form-field-subscript-wrapper{min-height:20px;margin-top:2px}.pfx-field-shell .mat-mdc-form-field{margin-bottom:8px}.pfx-field-shell .mat-mdc-form-field-infix{min-width:0}:host{display:block;cursor:pointer;width:var(--pfx-field-shell-width, 100%);min-width:0;max-width:100%}.pfx-field-shell-wrapper,.pfx-field-shell-host{position:relative}.praxis-interaction-overlay{position:absolute;inset:0;pointer-events:all}.praxis-readonly-overlay,.praxis-disabled-overlay{cursor:not-allowed}.pfx-field-shell-authoring-hit-target{position:absolute;inset:0;z-index:2;display:block;width:100%;min-width:0;min-height:100%;padding:0;border:0;border-radius:inherit;background:transparent;cursor:pointer;appearance:none;-webkit-appearance:none}.pfx-field-shell-authoring-hit-target:focus-visible{outline:2px solid var(--mat-sys-primary, #90caf9);outline-offset:2px}.praxis-presentation{white-space:pre-wrap;display:block;max-width:100%;min-width:0;padding:6px 0}.praxis-presentation__label{display:block;font-size:var(--pfx-pres-label-size, .78rem);line-height:1.2;letter-spacing:.02em;font-weight:500;opacity:.8;margin-bottom:2px}.praxis-presentation__value{display:block;flex:1 1 auto;max-width:100%;min-width:0;overflow-wrap:anywhere;word-break:break-word;font-size:var(--pfx-pres-value-size, 1rem);line-height:1.35;font-weight:600;opacity:.95}.praxis-presentation__value a{color:var( --pfx-pres-link-color, color-mix( in srgb, var(--mat-sys-primary, #90caf9) 78%, var(--mat-sys-on-surface, #ffffff) 22% ) );text-decoration-color:var( --pfx-pres-link-decoration-color, color-mix(in srgb, currentColor 62%, transparent) );text-decoration-thickness:.08em;text-underline-offset:.18em;max-width:100%;overflow-wrap:anywhere;word-break:break-word}.praxis-presentation__value a:visited{color:var(--pfx-pres-link-visited-color, var(--pfx-pres-link-color, inherit))}.praxis-presentation__value a:hover{color:var(--pfx-pres-link-hover-color, var(--pfx-pres-link-color, currentColor));text-decoration-color:currentColor}.praxis-presentation__value a:focus-visible{outline:2px solid var(--pfx-pres-link-focus-ring-color, currentColor);outline-offset:2px;border-radius:2px}.praxis-presentation__content{display:flex;align-items:center;gap:6px;max-width:100%;min-width:0}.praxis-presentation__icon{flex:0 0 auto;font-size:1.125rem;width:1.125rem;height:1.125rem;line-height:1;opacity:.85}.presentation-mode.pres-label-left .praxis-presentation{display:flex;align-items:center;gap:8px}.presentation-mode.pres-label-left .praxis-presentation__label{margin:0;min-width:var(--pfx-pres-label-width, 140px);opacity:.85;text-align:var(--pfx-pres-label-align, start)}.presentation-mode .praxis-presentation__value,.presentation-mode .praxis-presentation__content{flex:1 1 auto;min-width:0;text-align:var(--pfx-pres-value-align, start)}.presentation-mode.pres-density-cozy .praxis-presentation{padding:6px 0}.presentation-mode.pres-density-compact .praxis-presentation{padding:2px 0;gap:6px}.presentation-mode.pres-compact .praxis-presentation{padding:2px 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".pfx-field-shell .mat-mdc-form-field,.pfx-field-shell mat-form-field{width:var(--pfx-field-shell-field-width, 100%)}.pfx-field-shell .mat-mdc-form-field-subscript-wrapper{min-height:20px;margin-top:2px}.pfx-field-shell .mat-mdc-form-field{margin-bottom:8px}.pfx-field-shell .mat-mdc-form-field-infix{min-width:0}:host{display:block;cursor:pointer;width:var(--pfx-field-shell-width, 100%);min-width:0;max-width:100%}.pfx-field-shell-wrapper,.pfx-field-shell-host{position:relative}.praxis-interaction-overlay{position:absolute;inset:0;pointer-events:all}.praxis-readonly-overlay,.praxis-disabled-overlay{cursor:not-allowed}.pfx-field-shell-authoring-hit-target{position:absolute;inset:0;z-index:2;display:block;width:100%;min-width:0;min-height:100%;padding:0;border:0;border-radius:inherit;background:transparent;cursor:pointer;appearance:none;-webkit-appearance:none}.pfx-field-shell-authoring-hit-target:focus-visible{outline:2px solid var(--mat-sys-primary, #90caf9);outline-offset:2px}.praxis-presentation{white-space:pre-wrap;display:block;max-width:100%;min-width:0;padding:6px 0}.praxis-presentation__label{display:block;font-size:var(--pfx-pres-label-size, .78rem);line-height:1.2;letter-spacing:.02em;font-weight:500;opacity:.8;margin-bottom:2px}.praxis-presentation__value{display:block;flex:1 1 auto;max-width:100%;min-width:0;overflow-wrap:anywhere;word-break:break-word;font-size:var(--pfx-pres-value-size, 1rem);line-height:1.35;font-weight:600;opacity:.95}.praxis-presentation__value a{color:var( --pfx-pres-link-color, color-mix( in srgb, var(--mat-sys-primary, #90caf9) 78%, var(--mat-sys-on-surface, #ffffff) 22% ) );text-decoration-color:var( --pfx-pres-link-decoration-color, color-mix(in srgb, currentColor 62%, transparent) );text-decoration-thickness:.08em;text-underline-offset:.18em;max-width:100%;overflow-wrap:anywhere;word-break:break-word}.praxis-presentation__value a:visited{color:var(--pfx-pres-link-visited-color, var(--pfx-pres-link-color, inherit))}.praxis-presentation__value a:hover{color:var(--pfx-pres-link-hover-color, var(--pfx-pres-link-color, currentColor));text-decoration-color:currentColor}.praxis-presentation__value a:focus-visible{outline:2px solid var(--pfx-pres-link-focus-ring-color, currentColor);outline-offset:2px;border-radius:2px}.praxis-presentation__content{display:flex;align-items:center;gap:6px;max-width:100%;min-width:0}.praxis-presentation__icon{flex:0 0 auto;font-size:1.125rem;width:1.125rem;height:1.125rem;line-height:1;opacity:.85}.praxis-presentation--semantic{--pfx-pres-semantic-color: var(--mat-sys-on-surface-variant, currentColor);--pfx-pres-semantic-bg: color-mix(in srgb, currentColor 7%, transparent);--pfx-pres-semantic-border: color-mix(in srgb, currentColor 16%, transparent)}.praxis-presentation[data-presentation-tone=info]{--pfx-pres-semantic-color: var(--pfx-pres-info-color, var(--mat-sys-primary, #0b5cad))}.praxis-presentation[data-presentation-tone=success]{--pfx-pres-semantic-color: var(--pfx-pres-success-color, var(--praxis-success, #0f7b4a))}.praxis-presentation[data-presentation-tone=warning]{--pfx-pres-semantic-color: var(--pfx-pres-warning-color, var(--praxis-warning, #a16207))}.praxis-presentation[data-presentation-tone=danger]{--pfx-pres-semantic-color: var(--pfx-pres-danger-color, var(--mat-sys-error, #ba1a1a))}.praxis-presentation--semantic .praxis-presentation__icon{color:var(--pfx-pres-semantic-color);opacity:1}.praxis-presentation--semantic .praxis-presentation__content{justify-content:flex-start}.praxis-presentation--semantic .praxis-presentation__value{flex:0 1 auto}.praxis-presentation[data-presentation-presenter=status] .praxis-presentation__value,.praxis-presentation[data-presentation-presenter=badge] .praxis-presentation__value,.praxis-presentation[data-presentation-presenter=chip] .praxis-presentation__value{display:inline-flex;flex:0 1 auto;align-items:center;justify-content:center;box-sizing:border-box;min-height:var(--pfx-pres-status-min-height, 24px);padding:var(--pfx-pres-status-padding, 2px 9px);border-radius:var(--pfx-pres-status-radius, 999px);border:1px solid var(--pfx-pres-semantic-border);color:var(--pfx-pres-semantic-color);background:var(--pfx-pres-semantic-bg);font-size:var(--pfx-pres-status-font-size, .8rem);font-weight:var(--pfx-pres-status-font-weight, 700);line-height:var(--pfx-pres-status-line-height, 1.1)}.praxis-presentation[data-presentation-appearance=filled] .praxis-presentation__value{color:var(--pfx-pres-status-filled-color, var(--mat-sys-on-primary, #ffffff));background:var(--pfx-pres-semantic-color);border-color:var(--pfx-pres-semantic-color)}.praxis-presentation[data-presentation-appearance=outlined] .praxis-presentation__value{background:transparent;border-color:var(--pfx-pres-semantic-color)}.praxis-presentation[data-presentation-appearance=plain] .praxis-presentation__value{border-color:transparent;background:transparent;padding-inline:0}.praxis-presentation__badge{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;box-sizing:border-box;min-height:20px;padding:1px 7px;border-radius:999px;border:1px solid var(--pfx-pres-semantic-border, color-mix(in srgb, currentColor 16%, transparent));color:var(--pfx-pres-semantic-color, currentColor);background:var(--pfx-pres-semantic-bg, color-mix(in srgb, currentColor 7%, transparent));font-size:.72rem;line-height:1;font-weight:700;white-space:nowrap}.presentation-mode.pres-label-left .praxis-presentation{display:flex;align-items:center;gap:8px}.presentation-mode.pres-label-left .praxis-presentation__label{margin:0;min-width:var(--pfx-pres-label-width, 140px);opacity:.85;text-align:var(--pfx-pres-label-align, start)}.presentation-mode .praxis-presentation__value,.presentation-mode .praxis-presentation__content{flex:1 1 auto;min-width:0;text-align:var(--pfx-pres-value-align, start)}.presentation-mode .praxis-presentation--semantic .praxis-presentation__value{flex:0 1 auto}.presentation-mode .praxis-presentation--semantic .praxis-presentation__content{justify-content:flex-start}.presentation-mode .praxis-presentation--semantic[data-presentation-presenter=iconValue] .praxis-presentation__value{display:inline-flex;flex:0 0 auto;width:auto}@media(max-width:480px){.presentation-mode.pres-label-left .praxis-presentation{flex-direction:column;align-items:flex-start;gap:4px}.presentation-mode.pres-label-left .praxis-presentation__label{min-width:0;width:auto;text-align:start}.presentation-mode.pres-label-left .praxis-presentation__content{width:100%;flex-basis:auto}}.presentation-mode.pres-density-cozy .praxis-presentation{padding:6px 0}.presentation-mode.pres-density-compact .praxis-presentation{padding:2px 0;gap:6px}.presentation-mode.pres-compact .praxis-presentation{padding:2px 0}.presentation-mode.pres-compact .praxis-presentation__label,.presentation-mode.pres-density-compact .praxis-presentation__label{font-size:var(--pfx-pres-compact-label-size, var(--pfx-pres-label-size, .72rem));margin-bottom:var(--pfx-pres-compact-label-gap, 1px)}.presentation-mode.pres-compact .praxis-presentation__value,.presentation-mode.pres-density-compact .praxis-presentation__value{font-size:var(--pfx-pres-compact-value-size, var(--pfx-pres-value-size, .92rem));line-height:var(--pfx-pres-compact-value-line-height, 1.22)}.presentation-mode .praxis-presentation--boolean .praxis-presentation__value{display:inline-flex;flex:0 1 auto;align-items:center;justify-content:center;box-sizing:border-box;min-height:var(--pfx-pres-boolean-min-height, 22px);padding:var(--pfx-pres-boolean-padding, 0 8px);border-radius:var(--pfx-pres-boolean-radius, 999px);border:1px solid var(--pfx-pres-boolean-border-color, color-mix(in srgb, currentColor 18%, transparent));background:var(--pfx-pres-boolean-bg, color-mix(in srgb, currentColor 8%, transparent));font-size:var(--pfx-pres-boolean-font-size, .78rem);font-weight:var(--pfx-pres-boolean-font-weight, 700);line-height:var(--pfx-pres-boolean-line-height, 1);text-transform:var(--pfx-pres-boolean-text-transform, none)}.presentation-mode .praxis-presentation--boolean-true .praxis-presentation__value{color:var(--pfx-pres-boolean-true-color, var(--mat-sys-primary, currentColor));background:var(--pfx-pres-boolean-true-bg, color-mix(in srgb, var(--mat-sys-primary, currentColor) 10%, transparent));border-color:var(--pfx-pres-boolean-true-border-color, color-mix(in srgb, var(--mat-sys-primary, currentColor) 24%, transparent))}.presentation-mode .praxis-presentation--boolean-false .praxis-presentation__value{color:var(--pfx-pres-boolean-false-color, var(--mat-sys-on-surface-variant, currentColor));background:var(--pfx-pres-boolean-false-bg, color-mix(in srgb, var(--mat-sys-on-surface, currentColor) 6%, transparent));border-color:var(--pfx-pres-boolean-false-border-color, color-mix(in srgb, var(--mat-sys-on-surface, currentColor) 16%, transparent))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: FieldShellComponent, decorators: [{
             type: Component,
@@ -10203,7 +10457,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
       >
         <!-- Presentation block -->
         @if (effectivePresentationMode && !renderContentInPresentation()) {
-          <div class="praxis-presentation" [attr.data-field]="fieldNameAttr">
+          <div
+            class="praxis-presentation"
+            [class.praxis-presentation--boolean]="isBooleanPresentationField()"
+            [class.praxis-presentation--boolean-true]="getBooleanPresentationState() === true"
+            [class.praxis-presentation--boolean-false]="getBooleanPresentationState() === false"
+            [class.praxis-presentation--semantic]="hasResolvedPresentationState()"
+            [attr.data-field]="fieldNameAttr"
+            [attr.data-presentation-tone]="getPresentationTone()"
+            [attr.data-presentation-appearance]="getPresentationAppearance()"
+            [attr.data-presentation-presenter]="getPresentationPresenter()"
+            [attr.title]="getPresentationTooltip()"
+          >
             <span class="praxis-presentation__label">{{
               fieldLabelText()
             }}</span>
@@ -10224,6 +10489,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                 class="praxis-presentation__value"
                 [innerHTML]="getPresentationHtml()"
               ></span>
+              @if (getPresentationBadge(); as badge) {
+                <span class="praxis-presentation__badge">{{ badge }}</span>
+              }
               @if (getPresentationSuffixIcon(); as suffixIcon) {
                 <mat-icon
                   class="praxis-presentation__icon praxis-presentation__icon--suffix"
@@ -10287,7 +10555,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
 
       </div>
     </div>
-  `, styles: [".pfx-field-shell .mat-mdc-form-field,.pfx-field-shell mat-form-field{width:var(--pfx-field-shell-field-width, 100%)}.pfx-field-shell .mat-mdc-form-field-subscript-wrapper{min-height:20px;margin-top:2px}.pfx-field-shell .mat-mdc-form-field{margin-bottom:8px}.pfx-field-shell .mat-mdc-form-field-infix{min-width:0}:host{display:block;cursor:pointer;width:var(--pfx-field-shell-width, 100%);min-width:0;max-width:100%}.pfx-field-shell-wrapper,.pfx-field-shell-host{position:relative}.praxis-interaction-overlay{position:absolute;inset:0;pointer-events:all}.praxis-readonly-overlay,.praxis-disabled-overlay{cursor:not-allowed}.pfx-field-shell-authoring-hit-target{position:absolute;inset:0;z-index:2;display:block;width:100%;min-width:0;min-height:100%;padding:0;border:0;border-radius:inherit;background:transparent;cursor:pointer;appearance:none;-webkit-appearance:none}.pfx-field-shell-authoring-hit-target:focus-visible{outline:2px solid var(--mat-sys-primary, #90caf9);outline-offset:2px}.praxis-presentation{white-space:pre-wrap;display:block;max-width:100%;min-width:0;padding:6px 0}.praxis-presentation__label{display:block;font-size:var(--pfx-pres-label-size, .78rem);line-height:1.2;letter-spacing:.02em;font-weight:500;opacity:.8;margin-bottom:2px}.praxis-presentation__value{display:block;flex:1 1 auto;max-width:100%;min-width:0;overflow-wrap:anywhere;word-break:break-word;font-size:var(--pfx-pres-value-size, 1rem);line-height:1.35;font-weight:600;opacity:.95}.praxis-presentation__value a{color:var( --pfx-pres-link-color, color-mix( in srgb, var(--mat-sys-primary, #90caf9) 78%, var(--mat-sys-on-surface, #ffffff) 22% ) );text-decoration-color:var( --pfx-pres-link-decoration-color, color-mix(in srgb, currentColor 62%, transparent) );text-decoration-thickness:.08em;text-underline-offset:.18em;max-width:100%;overflow-wrap:anywhere;word-break:break-word}.praxis-presentation__value a:visited{color:var(--pfx-pres-link-visited-color, var(--pfx-pres-link-color, inherit))}.praxis-presentation__value a:hover{color:var(--pfx-pres-link-hover-color, var(--pfx-pres-link-color, currentColor));text-decoration-color:currentColor}.praxis-presentation__value a:focus-visible{outline:2px solid var(--pfx-pres-link-focus-ring-color, currentColor);outline-offset:2px;border-radius:2px}.praxis-presentation__content{display:flex;align-items:center;gap:6px;max-width:100%;min-width:0}.praxis-presentation__icon{flex:0 0 auto;font-size:1.125rem;width:1.125rem;height:1.125rem;line-height:1;opacity:.85}.presentation-mode.pres-label-left .praxis-presentation{display:flex;align-items:center;gap:8px}.presentation-mode.pres-label-left .praxis-presentation__label{margin:0;min-width:var(--pfx-pres-label-width, 140px);opacity:.85;text-align:var(--pfx-pres-label-align, start)}.presentation-mode .praxis-presentation__value,.presentation-mode .praxis-presentation__content{flex:1 1 auto;min-width:0;text-align:var(--pfx-pres-value-align, start)}.presentation-mode.pres-density-cozy .praxis-presentation{padding:6px 0}.presentation-mode.pres-density-compact .praxis-presentation{padding:2px 0;gap:6px}.presentation-mode.pres-compact .praxis-presentation{padding:2px 0}\n"] }]
+  `, styles: [".pfx-field-shell .mat-mdc-form-field,.pfx-field-shell mat-form-field{width:var(--pfx-field-shell-field-width, 100%)}.pfx-field-shell .mat-mdc-form-field-subscript-wrapper{min-height:20px;margin-top:2px}.pfx-field-shell .mat-mdc-form-field{margin-bottom:8px}.pfx-field-shell .mat-mdc-form-field-infix{min-width:0}:host{display:block;cursor:pointer;width:var(--pfx-field-shell-width, 100%);min-width:0;max-width:100%}.pfx-field-shell-wrapper,.pfx-field-shell-host{position:relative}.praxis-interaction-overlay{position:absolute;inset:0;pointer-events:all}.praxis-readonly-overlay,.praxis-disabled-overlay{cursor:not-allowed}.pfx-field-shell-authoring-hit-target{position:absolute;inset:0;z-index:2;display:block;width:100%;min-width:0;min-height:100%;padding:0;border:0;border-radius:inherit;background:transparent;cursor:pointer;appearance:none;-webkit-appearance:none}.pfx-field-shell-authoring-hit-target:focus-visible{outline:2px solid var(--mat-sys-primary, #90caf9);outline-offset:2px}.praxis-presentation{white-space:pre-wrap;display:block;max-width:100%;min-width:0;padding:6px 0}.praxis-presentation__label{display:block;font-size:var(--pfx-pres-label-size, .78rem);line-height:1.2;letter-spacing:.02em;font-weight:500;opacity:.8;margin-bottom:2px}.praxis-presentation__value{display:block;flex:1 1 auto;max-width:100%;min-width:0;overflow-wrap:anywhere;word-break:break-word;font-size:var(--pfx-pres-value-size, 1rem);line-height:1.35;font-weight:600;opacity:.95}.praxis-presentation__value a{color:var( --pfx-pres-link-color, color-mix( in srgb, var(--mat-sys-primary, #90caf9) 78%, var(--mat-sys-on-surface, #ffffff) 22% ) );text-decoration-color:var( --pfx-pres-link-decoration-color, color-mix(in srgb, currentColor 62%, transparent) );text-decoration-thickness:.08em;text-underline-offset:.18em;max-width:100%;overflow-wrap:anywhere;word-break:break-word}.praxis-presentation__value a:visited{color:var(--pfx-pres-link-visited-color, var(--pfx-pres-link-color, inherit))}.praxis-presentation__value a:hover{color:var(--pfx-pres-link-hover-color, var(--pfx-pres-link-color, currentColor));text-decoration-color:currentColor}.praxis-presentation__value a:focus-visible{outline:2px solid var(--pfx-pres-link-focus-ring-color, currentColor);outline-offset:2px;border-radius:2px}.praxis-presentation__content{display:flex;align-items:center;gap:6px;max-width:100%;min-width:0}.praxis-presentation__icon{flex:0 0 auto;font-size:1.125rem;width:1.125rem;height:1.125rem;line-height:1;opacity:.85}.praxis-presentation--semantic{--pfx-pres-semantic-color: var(--mat-sys-on-surface-variant, currentColor);--pfx-pres-semantic-bg: color-mix(in srgb, currentColor 7%, transparent);--pfx-pres-semantic-border: color-mix(in srgb, currentColor 16%, transparent)}.praxis-presentation[data-presentation-tone=info]{--pfx-pres-semantic-color: var(--pfx-pres-info-color, var(--mat-sys-primary, #0b5cad))}.praxis-presentation[data-presentation-tone=success]{--pfx-pres-semantic-color: var(--pfx-pres-success-color, var(--praxis-success, #0f7b4a))}.praxis-presentation[data-presentation-tone=warning]{--pfx-pres-semantic-color: var(--pfx-pres-warning-color, var(--praxis-warning, #a16207))}.praxis-presentation[data-presentation-tone=danger]{--pfx-pres-semantic-color: var(--pfx-pres-danger-color, var(--mat-sys-error, #ba1a1a))}.praxis-presentation--semantic .praxis-presentation__icon{color:var(--pfx-pres-semantic-color);opacity:1}.praxis-presentation--semantic .praxis-presentation__content{justify-content:flex-start}.praxis-presentation--semantic .praxis-presentation__value{flex:0 1 auto}.praxis-presentation[data-presentation-presenter=status] .praxis-presentation__value,.praxis-presentation[data-presentation-presenter=badge] .praxis-presentation__value,.praxis-presentation[data-presentation-presenter=chip] .praxis-presentation__value{display:inline-flex;flex:0 1 auto;align-items:center;justify-content:center;box-sizing:border-box;min-height:var(--pfx-pres-status-min-height, 24px);padding:var(--pfx-pres-status-padding, 2px 9px);border-radius:var(--pfx-pres-status-radius, 999px);border:1px solid var(--pfx-pres-semantic-border);color:var(--pfx-pres-semantic-color);background:var(--pfx-pres-semantic-bg);font-size:var(--pfx-pres-status-font-size, .8rem);font-weight:var(--pfx-pres-status-font-weight, 700);line-height:var(--pfx-pres-status-line-height, 1.1)}.praxis-presentation[data-presentation-appearance=filled] .praxis-presentation__value{color:var(--pfx-pres-status-filled-color, var(--mat-sys-on-primary, #ffffff));background:var(--pfx-pres-semantic-color);border-color:var(--pfx-pres-semantic-color)}.praxis-presentation[data-presentation-appearance=outlined] .praxis-presentation__value{background:transparent;border-color:var(--pfx-pres-semantic-color)}.praxis-presentation[data-presentation-appearance=plain] .praxis-presentation__value{border-color:transparent;background:transparent;padding-inline:0}.praxis-presentation__badge{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;box-sizing:border-box;min-height:20px;padding:1px 7px;border-radius:999px;border:1px solid var(--pfx-pres-semantic-border, color-mix(in srgb, currentColor 16%, transparent));color:var(--pfx-pres-semantic-color, currentColor);background:var(--pfx-pres-semantic-bg, color-mix(in srgb, currentColor 7%, transparent));font-size:.72rem;line-height:1;font-weight:700;white-space:nowrap}.presentation-mode.pres-label-left .praxis-presentation{display:flex;align-items:center;gap:8px}.presentation-mode.pres-label-left .praxis-presentation__label{margin:0;min-width:var(--pfx-pres-label-width, 140px);opacity:.85;text-align:var(--pfx-pres-label-align, start)}.presentation-mode .praxis-presentation__value,.presentation-mode .praxis-presentation__content{flex:1 1 auto;min-width:0;text-align:var(--pfx-pres-value-align, start)}.presentation-mode .praxis-presentation--semantic .praxis-presentation__value{flex:0 1 auto}.presentation-mode .praxis-presentation--semantic .praxis-presentation__content{justify-content:flex-start}.presentation-mode .praxis-presentation--semantic[data-presentation-presenter=iconValue] .praxis-presentation__value{display:inline-flex;flex:0 0 auto;width:auto}@media(max-width:480px){.presentation-mode.pres-label-left .praxis-presentation{flex-direction:column;align-items:flex-start;gap:4px}.presentation-mode.pres-label-left .praxis-presentation__label{min-width:0;width:auto;text-align:start}.presentation-mode.pres-label-left .praxis-presentation__content{width:100%;flex-basis:auto}}.presentation-mode.pres-density-cozy .praxis-presentation{padding:6px 0}.presentation-mode.pres-density-compact .praxis-presentation{padding:2px 0;gap:6px}.presentation-mode.pres-compact .praxis-presentation{padding:2px 0}.presentation-mode.pres-compact .praxis-presentation__label,.presentation-mode.pres-density-compact .praxis-presentation__label{font-size:var(--pfx-pres-compact-label-size, var(--pfx-pres-label-size, .72rem));margin-bottom:var(--pfx-pres-compact-label-gap, 1px)}.presentation-mode.pres-compact .praxis-presentation__value,.presentation-mode.pres-density-compact .praxis-presentation__value{font-size:var(--pfx-pres-compact-value-size, var(--pfx-pres-value-size, .92rem));line-height:var(--pfx-pres-compact-value-line-height, 1.22)}.presentation-mode .praxis-presentation--boolean .praxis-presentation__value{display:inline-flex;flex:0 1 auto;align-items:center;justify-content:center;box-sizing:border-box;min-height:var(--pfx-pres-boolean-min-height, 22px);padding:var(--pfx-pres-boolean-padding, 0 8px);border-radius:var(--pfx-pres-boolean-radius, 999px);border:1px solid var(--pfx-pres-boolean-border-color, color-mix(in srgb, currentColor 18%, transparent));background:var(--pfx-pres-boolean-bg, color-mix(in srgb, currentColor 8%, transparent));font-size:var(--pfx-pres-boolean-font-size, .78rem);font-weight:var(--pfx-pres-boolean-font-weight, 700);line-height:var(--pfx-pres-boolean-line-height, 1);text-transform:var(--pfx-pres-boolean-text-transform, none)}.presentation-mode .praxis-presentation--boolean-true .praxis-presentation__value{color:var(--pfx-pres-boolean-true-color, var(--mat-sys-primary, currentColor));background:var(--pfx-pres-boolean-true-bg, color-mix(in srgb, var(--mat-sys-primary, currentColor) 10%, transparent));border-color:var(--pfx-pres-boolean-true-border-color, color-mix(in srgb, var(--mat-sys-primary, currentColor) 24%, transparent))}.presentation-mode .praxis-presentation--boolean-false .praxis-presentation__value{color:var(--pfx-pres-boolean-false-color, var(--mat-sys-on-surface-variant, currentColor));background:var(--pfx-pres-boolean-false-bg, color-mix(in srgb, var(--mat-sys-on-surface, currentColor) 6%, transparent));border-color:var(--pfx-pres-boolean-false-border-color, color-mix(in srgb, var(--mat-sys-on-surface, currentColor) 16%, transparent))}\n"] }]
         }], propDecorators: { field: [{
                 type: Input
             }], index: [{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@praxisui/dynamic-fields",
-  "version": "9.0.0-beta.20",
+  "version": "9.0.0-beta.21",
   "description": "Angular Material-based dynamic form fields for Praxis UI with lazy loading and metadata-driven rendering.",
   "peerDependencies": {
     "@angular/common": "^21.0.0",
@@ -11,8 +11,8 @@
     "@angular/platform-browser": "^21.0.0",
     "@angular/router": "^21.0.0",
     "rxjs": "^7.8.0",
-    "@praxisui/core": "^9.0.0-beta.20",
-    "@praxisui/cron-builder": "^9.0.0-beta.20"
+    "@praxisui/core": "^9.0.0-beta.21",
+    "@praxisui/cron-builder": "^9.0.0-beta.21"
   },
   "dependencies": {
     "libphonenumber-js": "^1.12.41",