@praxisui/dynamic-fields 8.0.0-beta.24 → 8.0.0-beta.25

package/fesm2022/praxisui-dynamic-fields.mjs

@@ -752,6 +752,161 @@ function resolvePraxisDynamicFieldsText(value, fallback) {
     return { text: fallback ?? '' };
 }
 
+function resolveInlineDisplayMask(metadata, currentValue) {
+    const explicitMask = stringValue(metadata['displayMask']) ||
+        stringValue(metadata['mask']) ||
+        stringValue(metadata['inputMask']) ||
+        maskFromFormat(metadata['format']);
+    if (explicitMask) {
+        if (hasPhoneSignal(metadata, buildComparableSignals(metadata))) {
+            const digits = digitsOnly(currentValue);
+            if (digits.startsWith('55') && digits.length > 11 && explicitMask.includes('+55')) {
+                return {
+                    mask: resolveBrazilianPhoneMask(currentValue),
+                    rawMode: 'digits',
+                };
+            }
+        }
+        return {
+            mask: explicitMask,
+            rawMode: /[Xx]/.test(explicitMask) ? 'alphanumeric' : 'digits',
+        };
+    }
+    const documentType = normalizeComparableToken(metadata['documentType'] ??
+        metadata['documentKind'] ??
+        metadata['identifierType'] ??
+        metadata['identifierKind']);
+    if (documentType === 'cpf') {
+        return { mask: '000.000.000-00', rawMode: 'digits' };
+    }
+    if (documentType === 'cnpj') {
+        return { mask: '00.000.000/0000-00', rawMode: 'digits' };
+    }
+    const signals = buildComparableSignals(metadata);
+    if (hasSignal(signals, 'cpfcnpj')) {
+        const digits = digitsOnly(currentValue);
+        return {
+            mask: digits.length > 11 ? '00.000.000/0000-00' : '000.000.000-00',
+            rawMode: 'digits',
+        };
+    }
+    if (hasSignal(signals, 'cpf')) {
+        return { mask: '000.000.000-00', rawMode: 'digits' };
+    }
+    if (hasSignal(signals, 'cnpj')) {
+        return { mask: '00.000.000/0000-00', rawMode: 'digits' };
+    }
+    if (hasPhoneSignal(metadata, signals)) {
+        return {
+            mask: resolveBrazilianPhoneMask(currentValue),
+            rawMode: 'digits',
+        };
+    }
+    if (hasPostalCodeSignal(signals)) {
+        return { mask: '00000-000', rawMode: 'digits' };
+    }
+    return null;
+}
+function applyInlineDisplayMask(value, mask) {
+    if (!value) {
+        return '';
+    }
+    let valueIndex = 0;
+    let output = '';
+    for (const token of mask.mask) {
+        if (valueIndex >= value.length) {
+            break;
+        }
+        if (isMaskPlaceholder(token)) {
+            output += value[valueIndex++] ?? '';
+        }
+        else {
+            output += token;
+        }
+    }
+    return output;
+}
+function unmaskInlineDisplayValue(value, mask) {
+    const text = String(value ?? '');
+    return mask.rawMode === 'alphanumeric'
+        ? text.replace(/[^a-zA-Z0-9]/g, '')
+        : digitsOnly(text);
+}
+function resolveBrazilianPhoneMask(value) {
+    const digits = digitsOnly(value);
+    if (digits.startsWith('55') && digits.length > 11) {
+        return '+00 00 00000-0000';
+    }
+    return digits.length <= 10 ? '(00) 0000-0000' : '(00) 00000-0000';
+}
+function hasPhoneSignal(metadata, signals) {
+    const phoneFormat = normalizeComparableToken(metadata['phoneFormat']);
+    const defaultCountry = normalizeComparableToken(metadata['defaultCountry']);
+    return (phoneFormat === 'national' ||
+        phoneFormat === 'international' ||
+        phoneFormat === 'e164' ||
+        defaultCountry === 'br' ||
+        hasSignal(signals, 'phone') ||
+        hasSignal(signals, 'telefone') ||
+        hasSignal(signals, 'celular') ||
+        hasSignal(signals, 'mobile') ||
+        hasSignal(signals, 'whatsapp') ||
+        hasSignal(signals, 'tel'));
+}
+function hasPostalCodeSignal(signals) {
+    return (hasSignal(signals, 'cep') ||
+        hasSignal(signals, 'postalcode') ||
+        hasSignal(signals, 'zipcode') ||
+        hasSignal(signals, 'zip'));
+}
+function buildComparableSignals(metadata) {
+    return [
+        metadata['name'],
+        metadata['id'],
+        metadata['key'],
+        metadata['label'],
+        metadata['placeholder'],
+        metadata['controlType'],
+        metadata['type'],
+        metadata['dataType'],
+        metadata['format'],
+        metadata['mask'],
+        metadata['inputMask'],
+    ]
+        .map(normalizeComparableToken)
+        .filter(Boolean)
+        .join('|');
+}
+function hasSignal(signals, token) {
+    return signals.split('|').includes(token) || signals.includes(token);
+}
+function maskFromFormat(value) {
+    const format = stringValue(value);
+    if (!format) {
+        return null;
+    }
+    const hasMaskTokens = /[0#9Xx]/.test(format);
+    const hasInvalidLetters = /[A-WYZawyz]/.test(format);
+    return hasMaskTokens && !hasInvalidLetters ? format : null;
+}
+function stringValue(value) {
+    return typeof value === 'string' && value.trim() ? value.trim() : null;
+}
+function normalizeComparableToken(value) {
+    return String(value ?? '')
+        .trim()
+        .toLowerCase()
+        .normalize('NFD')
+        .replace(/[\u0300-\u036f]/g, '')
+        .replace(/[\s_-]+/g, '');
+}
+function digitsOnly(value) {
+    return String(value ?? '').replace(/\D/g, '');
+}
+function isMaskPlaceholder(token) {
+    return token === '0' || token === '9' || token === '#' || token === 'X' || token === 'x';
+}
+
 /**
  * @fileoverview Simple base component for input fields with basic ControlValueAccessor functionality
  *
@@ -1375,6 +1530,7 @@ class SimpleBaseInputComponent {
                 this.syncInProgress = false;
             }
         }
+        queueMicrotask(() => this.applyNativeDisplayMask());
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -1405,6 +1561,9 @@ class SimpleBaseInputComponent {
     // =============================================================================
     handleInput(event) {
         const input = event.target;
+        if (this.handleMaskedNativeInput(input)) {
+            return;
+        }
         const value = input.value;
         if (!this.syncInProgress) {
             this.syncInProgress = true;
@@ -1718,6 +1877,7 @@ class SimpleBaseInputComponent {
         this.nativeElement = el;
         this.attachNativeEventHandlers();
         this.applyNativeAttributes();
+        this.applyNativeDisplayMask();
         this.log('debug', 'registerInputElement: element attached and attributes applied');
     }
     /** Aplica atributos e ARIA com base no metadata */
@@ -1903,6 +2063,7 @@ class SimpleBaseInputComponent {
             .subscribe((value) => {
             this.fieldState.update((state) => ({ ...state, value }));
             this.syncComponentStateFromControl(control);
+            queueMicrotask(() => this.applyNativeDisplayMask(value));
         });
         control.statusChanges
             .pipe(takeUntilDestroyed(this.destroyRef))
@@ -1942,6 +2103,59 @@ class SimpleBaseInputComponent {
             disabled: !!control.disabled,
         }));
     }
+    handleMaskedNativeInput(input) {
+        if (!input) {
+            return false;
+        }
+        const mask = this.resolveNativeDisplayMask(input.value);
+        if (!mask) {
+            return false;
+        }
+        const rawValue = unmaskInlineDisplayValue(input.value, mask);
+        const displayValue = applyInlineDisplayMask(rawValue, mask);
+        if (!this.syncInProgress) {
+            this.syncInProgress = true;
+            try {
+                const control = this.control();
+                control.setValue(rawValue, { emitEvent: false });
+                this.onChange(rawValue);
+                this.valueChange.emit(rawValue);
+                this.fieldState.update((state) => ({ ...state, value: rawValue }));
+                this.markAsDirty();
+                this.applyErrorDebounceOnChange();
+            }
+            finally {
+                this.syncInProgress = false;
+            }
+        }
+        queueMicrotask(() => {
+            if (input.value !== displayValue) {
+                input.value = displayValue;
+            }
+        });
+        return true;
+    }
+    applyNativeDisplayMask(value = this.control().value) {
+        const input = this.nativeElement;
+        if (!input || input.tagName.toLowerCase() !== 'input') {
+            return;
+        }
+        const mask = this.resolveNativeDisplayMask(value);
+        if (!mask) {
+            return;
+        }
+        const displayValue = applyInlineDisplayMask(String(value ?? ''), mask);
+        if (input.value !== displayValue) {
+            input.value = displayValue;
+        }
+    }
+    resolveNativeDisplayMask(value) {
+        const metadata = this.metadata();
+        if (!metadata) {
+            return null;
+        }
+        return resolveInlineDisplayMask(metadata, value);
+    }
     // Atualiza tooltip/atributos de erro quando erros mudam e quando inline errors estiverem desabilitados
     refreshErrorTooltip() {
         if (!this.nativeElement)
@@ -2947,7 +3161,9 @@ class SimpleBaseSelectComponent extends SimpleBaseInputComponent {
         this.emptyOptionText.set(isMultiple ? null : (metadata.emptyOptionText ?? fallbackEmptyOption));
         const optionSource = metadata.optionSource ?? null;
         this.optionSource.set(optionSource);
-        this.useOptionsFilterEndpoint.set(this.isOptionsFilterEndpoint(metadata.endpoint));
+        this.useOptionsFilterEndpoint.set(this.isOptionsFilterEndpoint(metadata.endpoint) ||
+            this.isOptionsFilterEndpoint(metadata.optionsEndpoint) ||
+            String(metadata.optionsEndpoint ?? '').trim().toLowerCase() === 'filter');
         const path = optionSource?.resourcePath ?? metadata.resourcePath ?? metadata.endpoint;
         if (path) {
             this.resourcePath.set(path);
@@ -3038,8 +3254,10 @@ class SimpleBaseSelectComponent extends SimpleBaseInputComponent {
         const meta = this.metadata();
         if (!meta)
             return;
-        if (meta.compareWith)
-            this.matSelect.compareWith = meta.compareWith;
+        this.matSelect.compareWith =
+            typeof meta.compareWith === 'function'
+                ? meta.compareWith
+                : (left, right) => this.areOptionValuesEqual(left, right);
         // MatSelect does not support a displayWith property; formatting should
         // be handled via option labels or mat-select-trigger in templates.
         const panelClass = this.selectPanelClass();
@@ -3378,7 +3596,16 @@ class SimpleBaseSelectComponent extends SimpleBaseInputComponent {
         return currentCount >= max;
     }
     areOptionValuesEqual(left, right) {
-        return left === right;
+        return this.normalizeComparableOptionValue(left) === this.normalizeComparableOptionValue(right);
+    }
+    normalizeComparableOptionValue(value) {
+        if (value && typeof value === 'object' && 'id' in value) {
+            return this.normalizeComparableOptionValue(value.id);
+        }
+        if (typeof value === 'string' || typeof value === 'number') {
+            return String(value).trim();
+        }
+        return value;
     }
     /**
      * Toggles selection of all options when `selectAll` is enabled in multiple
@@ -3476,6 +3703,10 @@ class SimpleBaseSelectComponent extends SimpleBaseInputComponent {
         if (left === right) {
             return true;
         }
+        if (this.normalizeComparableOptionValue(left) ===
+            this.normalizeComparableOptionValue(right)) {
+            return true;
+        }
         try {
             return JSON.stringify(left) === JSON.stringify(right);
         }
@@ -11444,10 +11675,10 @@ class MaterialAsyncSelectComponent extends SimpleBaseSelectComponent {
         request$
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe((opts) => {
-            const returned = new Set(opts.map((o) => o.id));
+            const returned = new Set(opts.map((o) => this.normalizeComparableOptionValue(o.id)));
             opts.forEach((o) => this.store.upsertById(o));
             ids
-                .filter((id) => !returned.has(id))
+                .filter((id) => !returned.has(this.normalizeComparableOptionValue(id)))
                 .forEach((id) => this.store.upsertById({ id, label: this.missingOptionLabel(id) }, true));
             this.store.ensureVisible(ids);
             this.refreshOptions();
@@ -11748,7 +11979,8 @@ class MaterialAsyncSelectComponent extends SimpleBaseSelectComponent {
         return option.extra?.['selectable'] === false;
     }
     areOptionValuesEqual(left, right) {
-        return this.normalizeRemoteOptionValue(left) === this.normalizeRemoteOptionValue(right);
+        return (this.normalizeComparableOptionValue(this.normalizeRemoteOptionValue(left)) ===
+            this.normalizeComparableOptionValue(this.normalizeRemoteOptionValue(right)));
     }
     normalizeRemoteOptionValue(value) {
         if (value && typeof value === 'object' && 'id' in value) {
@@ -16039,6 +16271,8 @@ class MaterialSelectComponent extends SimpleBaseSelectComponent {
         this.devWarnSelectAliases(matMetadata, 'MaterialSelectComponent');
         const source = matMetadata.selectOptions ?? this.optionsFromLegacy(matMetadata);
         const mappedOptions = source?.map((option) => this.normalizeOption(option));
+        const optionLabelKey = matMetadata.optionLabelKey ?? matMetadata.displayField;
+        const optionValueKey = matMetadata.optionValueKey ?? matMetadata.valueField;
         super.setSelectMetadata({
             ...matMetadata,
             options: mappedOptions,
@@ -16046,8 +16280,8 @@ class MaterialSelectComponent extends SimpleBaseSelectComponent {
             searchable: matMetadata.searchable,
             resourcePath: matMetadata.resourcePath,
             filterCriteria: matMetadata.filterCriteria,
-            optionLabelKey: matMetadata.optionLabelKey,
-            optionValueKey: matMetadata.optionValueKey,
+            optionLabelKey,
+            optionValueKey,
         });
     }
     ngOnInit() {
@@ -16071,9 +16305,10 @@ class MaterialSelectComponent extends SimpleBaseSelectComponent {
     }
     normalizeOption(option) {
         const label = option['label'] ?? option['text'];
+        const value = option['value'] ?? option['id'];
         return {
             label: typeof label === 'string' ? label : String(label ?? ''),
-            value: option['value'],
+            value,
             disabled: option['disabled'] === true ? true : undefined,
         };
     }
@@ -17226,6 +17461,9 @@ class PhoneInputComponent extends SimpleBaseInputComponent {
         super.registerInputElement(el);
         this.applyPhoneDisplayValue();
     }
+    applyNativeDisplayMask() {
+        this.applyPhoneDisplayValue();
+    }
     handleInput(event) {
         if (!this.isPhoneRuntimeEnabled()) {
             super.handleInput(event);
@@ -20456,6 +20694,11 @@ class MaterialCurrencyComponent extends SimpleBaseInputComponent {
             this.setCaretToEnd();
         }
     }
+    applyNativeDisplayMask() {
+        if (this.inputRef?.nativeElement) {
+            this.formatDisplayValue();
+        }
+    }
     async validateField() {
         const errors = await super.validateField();
         this.validationChange.emit(errors);
@@ -20733,14 +20976,11 @@ class MaterialCurrencyComponent extends SimpleBaseInputComponent {
         </mat-hint>
       }
     </mat-form-field>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.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: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+  `, isInline: true, styles: [":host ::ng-deep .pdx-material-currency .mat-mdc-form-field-icon-prefix,:host ::ng-deep .pdx-material-currency .mat-mdc-form-field-text-prefix,:host ::ng-deep .pdx-material-currency .mat-mdc-form-field-icon-suffix,:host ::ng-deep .pdx-material-currency .mat-mdc-form-field-text-suffix{align-self:center;display:inline-flex;align-items:center}.currency-symbol{display:inline-flex;align-items:center;line-height:1;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.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: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: MaterialCurrencyComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'pdx-material-currency',
-                    standalone: true,
-                    template: `
+            args: [{ selector: 'pdx-material-currency', standalone: true, template: `
     <mat-form-field
       [appearance]="materialAppearance()"
       [color]="materialColor()"
@@ -20830,8 +21070,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
         </mat-hint>
       }
     </mat-form-field>
-  `,
-                    imports: [
+  `, imports: [
                         MatButtonModule,
                         CommonModule,
                         MatFormFieldModule,
@@ -20840,16 +21079,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                         MatTooltipModule,
                         PraxisIconDirective,
                         ReactiveFormsModule,
-                    ],
-                    providers: [
+                    ], providers: [
                         CurrencyPipe,
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => MaterialCurrencyComponent),
                             multi: true,
                         },
-                    ],
-                    host: {
+                    ], host: {
                         '[class]': 'componentCssClasses()',
                         '[class.praxis-disabled]': 'disabledMode',
                         '[style.display]': 'visible ? null : "none"',
@@ -20857,8 +21094,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                         '[attr.data-field-type]': '"currency"',
                         '[attr.data-field-name]': 'metadata()?.name',
                         '[attr.data-component-id]': 'componentId()',
-                    },
-                }]
+                    }, styles: [":host ::ng-deep .pdx-material-currency .mat-mdc-form-field-icon-prefix,:host ::ng-deep .pdx-material-currency .mat-mdc-form-field-text-prefix,:host ::ng-deep .pdx-material-currency .mat-mdc-form-field-icon-suffix,:host ::ng-deep .pdx-material-currency .mat-mdc-form-field-text-suffix{align-self:center;display:inline-flex;align-items:center}.currency-symbol{display:inline-flex;align-items:center;line-height:1;white-space:nowrap}\n"] }]
         }], propDecorators: { validationChange: [{ type: i0.Output, args: ["validationChange"] }], inputRef: [{
                 type: ViewChild,
                 args: ['currencyInput', { static: true }]
@@ -25369,161 +25605,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                 args: ['window:resize']
             }] } });
 
-function resolveInlineDisplayMask(metadata, currentValue) {
-    const explicitMask = stringValue(metadata['displayMask']) ||
-        stringValue(metadata['mask']) ||
-        stringValue(metadata['inputMask']) ||
-        maskFromFormat(metadata['format']);
-    if (explicitMask) {
-        if (hasPhoneSignal(metadata, buildComparableSignals(metadata))) {
-            const digits = digitsOnly(currentValue);
-            if (digits.startsWith('55') && digits.length > 11 && explicitMask.includes('+55')) {
-                return {
-                    mask: resolveBrazilianPhoneMask(currentValue),
-                    rawMode: 'digits',
-                };
-            }
-        }
-        return {
-            mask: explicitMask,
-            rawMode: /[Xx]/.test(explicitMask) ? 'alphanumeric' : 'digits',
-        };
-    }
-    const documentType = normalizeComparableToken(metadata['documentType'] ??
-        metadata['documentKind'] ??
-        metadata['identifierType'] ??
-        metadata['identifierKind']);
-    if (documentType === 'cpf') {
-        return { mask: '000.000.000-00', rawMode: 'digits' };
-    }
-    if (documentType === 'cnpj') {
-        return { mask: '00.000.000/0000-00', rawMode: 'digits' };
-    }
-    const signals = buildComparableSignals(metadata);
-    if (hasSignal(signals, 'cpfcnpj')) {
-        const digits = digitsOnly(currentValue);
-        return {
-            mask: digits.length > 11 ? '00.000.000/0000-00' : '000.000.000-00',
-            rawMode: 'digits',
-        };
-    }
-    if (hasSignal(signals, 'cpf')) {
-        return { mask: '000.000.000-00', rawMode: 'digits' };
-    }
-    if (hasSignal(signals, 'cnpj')) {
-        return { mask: '00.000.000/0000-00', rawMode: 'digits' };
-    }
-    if (hasPhoneSignal(metadata, signals)) {
-        return {
-            mask: resolveBrazilianPhoneMask(currentValue),
-            rawMode: 'digits',
-        };
-    }
-    if (hasPostalCodeSignal(signals)) {
-        return { mask: '00000-000', rawMode: 'digits' };
-    }
-    return null;
-}
-function applyInlineDisplayMask(value, mask) {
-    if (!value) {
-        return '';
-    }
-    let valueIndex = 0;
-    let output = '';
-    for (const token of mask.mask) {
-        if (valueIndex >= value.length) {
-            break;
-        }
-        if (isMaskPlaceholder(token)) {
-            output += value[valueIndex++] ?? '';
-        }
-        else {
-            output += token;
-        }
-    }
-    return output;
-}
-function unmaskInlineDisplayValue(value, mask) {
-    const text = String(value ?? '');
-    return mask.rawMode === 'alphanumeric'
-        ? text.replace(/[^a-zA-Z0-9]/g, '')
-        : digitsOnly(text);
-}
-function resolveBrazilianPhoneMask(value) {
-    const digits = digitsOnly(value);
-    if (digits.startsWith('55') && digits.length > 11) {
-        return '+00 00 00000-0000';
-    }
-    return digits.length <= 10 ? '(00) 0000-0000' : '(00) 00000-0000';
-}
-function hasPhoneSignal(metadata, signals) {
-    const phoneFormat = normalizeComparableToken(metadata['phoneFormat']);
-    const defaultCountry = normalizeComparableToken(metadata['defaultCountry']);
-    return (phoneFormat === 'national' ||
-        phoneFormat === 'international' ||
-        phoneFormat === 'e164' ||
-        defaultCountry === 'br' ||
-        hasSignal(signals, 'phone') ||
-        hasSignal(signals, 'telefone') ||
-        hasSignal(signals, 'celular') ||
-        hasSignal(signals, 'mobile') ||
-        hasSignal(signals, 'whatsapp') ||
-        hasSignal(signals, 'tel'));
-}
-function hasPostalCodeSignal(signals) {
-    return (hasSignal(signals, 'cep') ||
-        hasSignal(signals, 'postalcode') ||
-        hasSignal(signals, 'zipcode') ||
-        hasSignal(signals, 'zip'));
-}
-function buildComparableSignals(metadata) {
-    return [
-        metadata['name'],
-        metadata['id'],
-        metadata['key'],
-        metadata['label'],
-        metadata['placeholder'],
-        metadata['controlType'],
-        metadata['type'],
-        metadata['dataType'],
-        metadata['format'],
-        metadata['mask'],
-        metadata['inputMask'],
-    ]
-        .map(normalizeComparableToken)
-        .filter(Boolean)
-        .join('|');
-}
-function hasSignal(signals, token) {
-    return signals.split('|').includes(token) || signals.includes(token);
-}
-function maskFromFormat(value) {
-    const format = stringValue(value);
-    if (!format) {
-        return null;
-    }
-    const hasMaskTokens = /[0#9Xx]/.test(format);
-    const hasInvalidLetters = /[A-WYZawyz]/.test(format);
-    return hasMaskTokens && !hasInvalidLetters ? format : null;
-}
-function stringValue(value) {
-    return typeof value === 'string' && value.trim() ? value.trim() : null;
-}
-function normalizeComparableToken(value) {
-    return String(value ?? '')
-        .trim()
-        .toLowerCase()
-        .normalize('NFD')
-        .replace(/[\u0300-\u036f]/g, '')
-        .replace(/[\s_-]+/g, '');
-}
-function digitsOnly(value) {
-    return String(value ?? '').replace(/\D/g, '');
-}
-function isMaskPlaceholder(token) {
-    return token === '0' || token === '9' || token === '#' || token === 'X' || token === 'x';
-}
-
 class InlineInputComponent extends SimpleBaseInputComponent {
     readonlyMode = false;
     disabledMode = false;

package/index.d.ts

@@ -705,6 +705,9 @@ declare abstract class SimpleBaseInputComponent implements ControlValueAccessor,
     protected getSpecificCssClasses(): string[];
     private setupFormControlIntegration;
     private syncComponentStateFromControl;
+    private handleMaskedNativeInput;
+    protected applyNativeDisplayMask(value?: unknown): void;
+    private resolveNativeDisplayMask;
     private refreshErrorTooltip;
     protected ariaInvalidAttribute(): 'true' | null;
     protected tDynamicFields(keySuffix: string, fallback: string, params?: Record<string, string | number | boolean | null | undefined>): string;
@@ -1108,6 +1111,7 @@ declare abstract class SimpleBaseSelectComponent<T = any> extends SimpleBaseInpu
     isSelected(value: T): boolean;
     isOptionDisabled(option: SelectOption<T>): boolean;
     protected areOptionValuesEqual(left: unknown, right: unknown): boolean;
+    protected normalizeComparableOptionValue(value: unknown): unknown;
     /**
      * Toggles selection of all options when `selectAll` is enabled in multiple
      * selection mode.
@@ -2143,6 +2147,7 @@ declare class MaterialCurrencyComponent extends SimpleBaseInputComponent {
     /** Formats the input value without touching or changing focus state. */
     formatDisplayValue(): void;
     writeValue(value: unknown): void;
+    protected applyNativeDisplayMask(): void;
     validateField(): Promise<ValidationErrors | null>;
     readonlyMode: boolean;
     set disabledMode(value: boolean);
@@ -5651,6 +5656,7 @@ declare class PhoneInputComponent extends SimpleBaseInputComponent {
     ngOnInit(): void;
     writeValue(value: unknown): void;
     protected registerInputElement(el: HTMLElement): void;
+    protected applyNativeDisplayMask(): void;
     handleInput(event: Event): void;
     handleBlur(): void;
     validateField(): Promise<ValidationErrors | null>;

package/package.json

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