@yourself.create/ngx-form-designer 0.0.6 → 0.0.8

package/fesm2022/uch-web-ngx-form-designer.mjs

@@ -5257,7 +5257,7 @@ class JsonFormRendererComponent {
         this.runtimeFieldDataAccessRegistry.unregister(this.engine);
     }
     async emitValuePayload(values) {
-        const fieldValueMap = await this.buildFieldValueMap(values);
+        const fieldValueMap = await this.buildFieldValueMap(values, { normalizeFileFieldsForSubmit: true });
         const groupedValues = this.buildGroupedValues(fieldValueMap);
         const combinedValues = this.buildCombinedValues(fieldValueMap);
         this.valueChange.emit(fieldValueMap);
@@ -5419,16 +5419,10 @@ class JsonFormRendererComponent {
         this.validationChange.emit(validation);
         // Notify all widgets to show errors if any
         this.engine?.submit();
-        const preUploadFieldValueMap = this.uploadOnSubmit
-            ? await this.buildFieldValueMap(this.engine?.getValues() ?? {}, { normalizeFileFieldsForSubmit: true })
-            : undefined;
         const uploadedFiles = this.uploadOnSubmit ? await this.uploadPendingFiles() : {};
         this.uploadedFilesChange.emit(uploadedFiles);
         const values = this.engine?.getValues() ?? {};
-        const fieldValueMap = await this.buildFieldValueMap(values, { normalizeFileFieldsForSubmit: true });
-        const submitValues = preUploadFieldValueMap
-            ? this.mergeFileMetadata(fieldValueMap, preUploadFieldValueMap)
-            : fieldValueMap;
+        const submitValues = await this.buildFieldValueMap(values, { normalizeFileFieldsForSubmit: true });
         this.formSubmit.emit({
             values: submitValues,
             groupedValues: this.buildGroupedValues(submitValues),
@@ -5689,13 +5683,14 @@ class JsonFormRendererComponent {
                 continue;
             }
             if (field.type === 'file') {
+                const normalizeFileFieldsForSubmit = options.normalizeFileFieldsForSubmit === true;
                 const fileValue = {
                     fieldName: field.name,
-                    fieldValue: options.normalizeFileFieldsForSubmit
-                        ? this.normalizeFileFieldSubmitValue(rawValue)
+                    fieldValue: normalizeFileFieldsForSubmit
+                        ? await this.buildFileSubmitValueEntries(rawValue)
                         : rawValue,
-                    ...(options.normalizeFileFieldsForSubmit ? { fieldType: field.type } : {}),
-                    ...(await this.buildFileFieldMetadata(rawValue))
+                    ...(normalizeFileFieldsForSubmit ? { fieldType: field.type } : {}),
+                    ...(!normalizeFileFieldsForSubmit ? await this.buildFileFieldMetadata(rawValue) : {})
                 };
                 mapped[field.id] = fileValue;
                 continue;
@@ -5782,7 +5777,12 @@ class JsonFormRendererComponent {
             return undefined;
         return values.length === 1 ? values[0] : values;
     }
-    normalizeFileFieldSubmitValue(value) {
+    async buildFileSubmitValueEntries(value) {
+        const rawEntries = this.normalizeFileFieldEntries(value);
+        const normalizedEntries = await Promise.all(rawEntries.map(entry => this.normalizeSingleFileFieldEntry(entry)));
+        return normalizedEntries.filter((entry) => entry !== null);
+    }
+    normalizeFileFieldEntries(value) {
         if (this.isFileList(value)) {
             return Array.from(value);
         }
@@ -5794,6 +5794,23 @@ class JsonFormRendererComponent {
         }
         return [value];
     }
+    async normalizeSingleFileFieldEntry(value) {
+        if (this.isFile(value)) {
+            return this.buildPendingSubmitFileValue(value);
+        }
+        if (this.isUploadedFileRef(value)) {
+            return { ...value };
+        }
+        return null;
+    }
+    async buildPendingSubmitFileValue(file) {
+        return {
+            name: file.name || undefined,
+            size: Number.isFinite(file.size) ? file.size : undefined,
+            type: file.type || undefined,
+            data: await this.readFileBase64(file)
+        };
+    }
     getUploadedFileRefs(value) {
         if (this.isUploadedFileRef(value))
             return [value];
@@ -5808,26 +5825,6 @@ class JsonFormRendererComponent {
             : undefined;
         return fieldLabel === undefined ? {} : { fieldLabel };
     }
-    mergeFileMetadata(target, source) {
-        const merged = { ...target };
-        for (const fieldId of Object.keys(source)) {
-            const sourceValue = source[fieldId];
-            const targetValue = merged[fieldId];
-            if (!sourceValue || !targetValue)
-                continue;
-            if (sourceValue.fileType === undefined && sourceValue.data === undefined)
-                continue;
-            const nextValue = { ...targetValue };
-            if (sourceValue.fileType !== undefined) {
-                nextValue.fileType = sourceValue.fileType;
-            }
-            if (sourceValue.data !== undefined) {
-                nextValue.data = sourceValue.data;
-            }
-            merged[fieldId] = nextValue;
-        }
-        return merged;
-    }
     buildGroupedValues(values) {
         const grouped = {};
         const schema = this.engine?.getSchema();
@@ -15891,8 +15888,33 @@ class DataPanelComponent {
     showOptionMappingControls() {
         return this.sourceType === 'source' && this.widgetType !== 'table' && this.usesOptionMapping();
     }
-    showOptionLabelFormattingControls() {
-        return this.widgetType === 'select' && this.usesOptionMapping();
+    showDisplayFormattingControls() {
+        if (this.widgetType === 'select' && this.usesOptionMapping()) {
+            return true;
+        }
+        return this.sourceType === 'source'
+            && this.bindingShape === 'scalar'
+            && (this.widgetType === 'text' || this.widgetType === 'number');
+    }
+    supportsNumericDisplayFormatting() {
+        return this.widgetType === 'select' || this.widgetType === 'number';
+    }
+    displayFormattingTitle() {
+        return this.widgetType === 'select' ? 'Amount Display' : 'Field Display';
+    }
+    displayFormattingDescription() {
+        if (this.widgetType === 'select') {
+            return 'Format the visible dropdown label without changing the stored option value.';
+        }
+        if (this.widgetType === 'number') {
+            return 'Show a fixed prefix and grouped digits in the visible field value without changing the stored number.';
+        }
+        return 'Show a fixed prefix beside the editable value without changing the stored field value.';
+    }
+    numericDisplayFormattingLabel() {
+        return this.widgetType === 'select'
+            ? 'Show thousand separators for numeric labels'
+            : 'Show thousand separators for numeric values';
     }
     showStaticOptionsEditor() {
         return this.sourceType === 'static' && this.widgetType !== 'table' && this.usesOptionMapping();
@@ -15945,7 +15967,12 @@ class DataPanelComponent {
         return sample ? collectArrayPaths(sample) : [];
     }
     shouldPersistOptionLabelFormatting() {
-        return this.widgetType === 'select' && this.usesOptionMapping();
+        if (this.widgetType === 'select' && this.usesOptionMapping()) {
+            return true;
+        }
+        return this.sourceType === 'source'
+            && this.bindingShape === 'scalar'
+            && (this.widgetType === 'text' || this.widgetType === 'number');
     }
     usesOptionMapping() {
         return this.bindingShape === 'list' || this.widgetType === 'search';
@@ -16266,17 +16293,17 @@ class DataPanelComponent {
                              </div>
                          </div>
 
-                         <div class="rounded-lg border border-gray-200 bg-white p-3" *ngIf="showOptionLabelFormattingControls()">
-                             <div class="text-xs font-semibold uppercase tracking-wide text-gray-500">Amount Display</div>
-                             <div class="mt-1 text-[11px] text-gray-500">Format the visible dropdown label without changing the stored option value.</div>
+                         <div class="rounded-lg border border-gray-200 bg-white p-3" *ngIf="showDisplayFormattingControls()">
+                             <div class="text-xs font-semibold uppercase tracking-wide text-gray-500">{{ displayFormattingTitle() }}</div>
+                             <div class="mt-1 text-[11px] text-gray-500">{{ displayFormattingDescription() }}</div>
 
-                             <label class="mt-3 flex items-center gap-2 text-sm text-gray-700">
+                             <label class="mt-3 flex items-center gap-2 text-sm text-gray-700" *ngIf="supportsNumericDisplayFormatting()">
                                  <input
                                      type="checkbox"
                                      [checked]="formatNumericOptionLabels"
                                      (change)="formatNumericOptionLabels = $any($event.target).checked; emitChange()"
                                      class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
-                                 <span>Show thousand separators for numeric labels</span>
+                                 <span>{{ numericDisplayFormattingLabel() }}</span>
                              </label>
 
                              <div class="mt-3 flex flex-col gap-1">
@@ -16885,17 +16912,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                              </div>
                          </div>
 
-                         <div class="rounded-lg border border-gray-200 bg-white p-3" *ngIf="showOptionLabelFormattingControls()">
-                             <div class="text-xs font-semibold uppercase tracking-wide text-gray-500">Amount Display</div>
-                             <div class="mt-1 text-[11px] text-gray-500">Format the visible dropdown label without changing the stored option value.</div>
+                         <div class="rounded-lg border border-gray-200 bg-white p-3" *ngIf="showDisplayFormattingControls()">
+                             <div class="text-xs font-semibold uppercase tracking-wide text-gray-500">{{ displayFormattingTitle() }}</div>
+                             <div class="mt-1 text-[11px] text-gray-500">{{ displayFormattingDescription() }}</div>
 
-                             <label class="mt-3 flex items-center gap-2 text-sm text-gray-700">
+                             <label class="mt-3 flex items-center gap-2 text-sm text-gray-700" *ngIf="supportsNumericDisplayFormatting()">
                                  <input
                                      type="checkbox"
                                      [checked]="formatNumericOptionLabels"
                                      (change)="formatNumericOptionLabels = $any($event.target).checked; emitChange()"
                                      class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
-                                 <span>Show thousand separators for numeric labels</span>
+                                 <span>{{ numericDisplayFormattingLabel() }}</span>
                              </label>
 
                              <div class="mt-3 flex flex-col gap-1">
@@ -17674,11 +17701,18 @@ class RulesPanelComponent {
     ruleActionOptions = [
         { label: 'Visible', value: 'visible' },
         { label: 'Hidden', value: 'hidden' },
-        { label: 'Enabled', value: 'enable' },
         { label: 'Disabled', value: 'disable' },
         { label: 'Required', value: 'required' },
         { label: 'Optional', value: 'optional' }
     ];
+    actionLabels = {
+        visible: 'Visible',
+        hidden: 'Hidden',
+        enable: 'Enabled',
+        disable: 'Disabled',
+        required: 'Required',
+        optional: 'Optional'
+    };
     severityOptions = [
         { label: 'Warn', value: 'warn' },
         { label: 'Error', value: 'error' }
@@ -17730,7 +17764,7 @@ class RulesPanelComponent {
         return `${primary} / else ${this.getActionLabel(rule.elseAction)}`;
     }
     getActionLabel(action) {
-        return this.ruleActionOptions.find((option) => option.value === action)?.label ?? action;
+        return this.actionLabels[action] ?? action;
     }
     getActionColor(action) {
         switch (action) {
@@ -17749,7 +17783,7 @@ class RulesPanelComponent {
       <div class="flex items-center justify-between mb-2">
          <div class="flex flex-col">
             <span class="font-semibold text-gray-700">Rules</span>
-            <span class="text-xs text-gray-500">Rules can override visibility, enabled, and required set elsewhere.</span>
+            <span class="text-xs text-gray-500">Rules can override visibility, disabled, and required state set elsewhere.</span>
          </div>
          <button (click)="addRule()"
                  [disabled]="readOnly"
@@ -17871,7 +17905,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
       <div class="flex items-center justify-between mb-2">
          <div class="flex flex-col">
             <span class="font-semibold text-gray-700">Rules</span>
-            <span class="text-xs text-gray-500">Rules can override visibility, enabled, and required set elsewhere.</span>
+            <span class="text-xs text-gray-500">Rules can override visibility, disabled, and required state set elsewhere.</span>
          </div>
          <button (click)="addRule()"
                  [disabled]="readOnly"
@@ -19546,34 +19580,35 @@ class FormPreviewComponent {
     copyData() {
         navigator.clipboard.writeText(JSON.stringify(this.previewData(), null, 2));
     }
-    sanitizePreviewData(value) {
+    sanitizePreviewData(value, withinFileField = false) {
         if (Array.isArray(value)) {
-            return value.map(item => this.sanitizePreviewData(item));
+            return value.map(item => this.sanitizePreviewData(item, withinFileField));
         }
         if (!this.isObjectRecord(value)) {
             return value;
         }
+        const nextWithinFileField = withinFileField || this.isFileFieldRecord(value);
         const sanitized = {};
         for (const [key, entryValue] of Object.entries(value)) {
-            if (key === 'data' && this.shouldHideFileData(value, entryValue)) {
+            if (key === 'data' && this.shouldHideFileData(nextWithinFileField, entryValue)) {
                 continue;
             }
-            sanitized[key] = this.sanitizePreviewData(entryValue);
+            sanitized[key] = this.sanitizePreviewData(entryValue, nextWithinFileField);
         }
         return sanitized;
     }
     isObjectRecord(value) {
         return !!value && typeof value === 'object';
     }
-    shouldHideFileData(record, value) {
-        if (!this.isFileFieldRecord(record))
+    shouldHideFileData(withinFileField, value) {
+        if (!withinFileField)
             return false;
         return this.isBytePayload(value) || this.isBase64Payload(value);
     }
     isFileFieldRecord(value) {
         return typeof value['fieldName'] === 'string'
             && Object.hasOwn(value, 'fieldValue')
-            && Object.hasOwn(value, 'fileType');
+            && (value['fieldType'] === 'file' || Object.hasOwn(value, 'fileType'));
     }
     isBytePayload(value) {
         if (value instanceof Uint8Array)
@@ -31774,7 +31809,20 @@ function compareSortableValues(left, right) {
     }
     return String(left ?? '').localeCompare(String(right ?? ''));
 }
+function toDisplayText(value) {
+    if (typeof value === 'string') {
+        const trimmed = value.trim();
+        return trimmed.length > 0 ? trimmed : undefined;
+    }
+    if (typeof value === 'number' || typeof value === 'boolean') {
+        return String(value);
+    }
+    return undefined;
+}
 class DataProvider {
+    async getValueDisplayPrefix(_field, _engine) {
+        return '';
+    }
     // Non-abstract with default implementation for backward compatibility
     async queryOptions(field, query, engine) {
         const options = await this.getOptions(field, engine);
@@ -31946,23 +31994,17 @@ class DefaultDataProvider extends DataProvider {
     }
     async getValue(field, engine) {
         const cfg = getEffectiveDataConfig(field);
+        const currentValue = this.getCurrentFieldValue(field, engine);
         if (cfg.type === 'static') {
             if (cfg.staticValue !== undefined)
                 return cfg.staticValue;
-            return field.defaultValue;
-        }
-        let rows = await this.getRawRows(cfg, field, engine);
-        rows = this.resolveCollectionRows(rows, cfg, engine);
-        rows = this.applyRowFilters(rows, cfg.filters, engine);
-        if (!rows || rows.length === 0) {
-            return field.defaultValue;
+            return currentValue !== undefined ? currentValue : field.defaultValue;
         }
-        const selectedRow = this.selectScalarRow(rows, cfg, engine);
-        if (cfg.rowSelectionMode === 'selected' && !selectedRow) {
-            const currentValue = field.name && engine ? engine.getValue(field.name) : undefined;
+        const context = await this.getScalarValueContext(cfg, field, engine);
+        if (!context) {
             return currentValue !== undefined ? currentValue : field.defaultValue;
         }
-        const row = selectedRow ?? rows[0];
+        const row = context.row;
         const resolvedPath = cfg.valueKey;
         const resolvedValue = resolvePathValue(row, resolvedPath);
         if (resolvedPath && resolvedValue !== undefined) {
@@ -31973,6 +32015,27 @@ class DefaultDataProvider extends DataProvider {
         }
         return row;
     }
+    async getValueDisplayPrefix(field, engine) {
+        const cfg = getEffectiveDataConfig(field);
+        const prefixPath = cfg.optionLabelPrefixPath?.trim();
+        if (!prefixPath) {
+            return '';
+        }
+        const context = await this.getScalarValueContext(cfg, field, engine);
+        if (!context) {
+            return '';
+        }
+        for (const candidate of [context.row, context.parentRow, context.sourceRow]) {
+            if (!candidate)
+                continue;
+            const resolved = resolvePathValue(candidate, prefixPath);
+            const value = toDisplayText(resolved);
+            if (value) {
+                return value;
+            }
+        }
+        return '';
+    }
     async resolveValue(field, value) {
         return String(value);
     }
@@ -32007,6 +32070,9 @@ class DefaultDataProvider extends DataProvider {
                 return [];
         }
     }
+    getCurrentFieldValue(field, engine) {
+        return field.name && engine ? engine.getValue(field.name) : undefined;
+    }
     async getGlobalRows(cfg) {
         if (!cfg.datasourceId)
             return [];
@@ -32017,6 +32083,18 @@ class DefaultDataProvider extends DataProvider {
         const rows = await this.getRawRows(cfg, field, engine);
         return this.resolveCollectionRowContexts(rows, cfg, engine);
     }
+    async getScalarValueContext(cfg, field, engine) {
+        const contexts = await this.getOptionRowContexts(cfg, field, engine);
+        const filteredContexts = this.applyOptionRowFilters(contexts, cfg.filters, engine);
+        if (filteredContexts.length === 0) {
+            return undefined;
+        }
+        const selectedContext = this.selectOptionContext(filteredContexts, cfg, engine);
+        if (cfg.rowSelectionMode === 'selected' && !selectedContext) {
+            return undefined;
+        }
+        return selectedContext ?? filteredContexts[0];
+    }
     resolveCollectionRowContexts(rows, cfg, engine) {
         const parentContexts = this.extractRowContexts(rows, cfg.rowsPath);
         if (cfg.rowSelectionMode === 'selected' && cfg.childRowsPath) {
@@ -32237,10 +32315,8 @@ class DefaultDataProvider extends DataProvider {
             if (!candidate)
                 continue;
             const resolved = resolvePathValue(candidate, prefixPath);
-            if (resolved === undefined || resolved === null)
-                continue;
-            const value = String(resolved).trim();
-            if (value.length > 0) {
+            const value = toDisplayText(resolved);
+            if (value) {
                 return value;
             }
         }
@@ -32433,6 +32509,8 @@ class TextFieldWidgetComponent {
     dependencyValueSnapshot = new Map();
     isControlFocused = false;
     isControlHovered = false;
+    displayPrefix = '';
+    formattedNumberValue = '';
     set config(value) {
         const previousSignature = this.getDataConfigSignature(this._config);
         this._config = value;
@@ -32447,7 +32525,10 @@ class TextFieldWidgetComponent {
         if (this.dataProvider && this._config?.dataConfig) {
             this.seedDependencySnapshotFromEngine();
             void this.refreshValueFromDataSource();
+            return;
         }
+        this.displayPrefix = '';
+        this.syncFormattedNumberValue();
     }
     get config() {
         return this._config;
@@ -32470,6 +32551,12 @@ class TextFieldWidgetComponent {
     isColorField() {
         return this.config?.type === 'color';
     }
+    usesFormattedNumberInput() {
+        return this.config?.type === 'number' && this.config?.dataConfig?.formatNumericOptionLabels === true;
+    }
+    hasDisplayPrefix() {
+        return !this.isTextarea() && !this.isColorField() && this.displayPrefix.trim().length > 0;
+    }
     getControlClass(multiline = false) {
         return getTextControlClass({
             invalid: !!this.error,
@@ -32507,6 +32594,9 @@ class TextFieldWidgetComponent {
         if (this.dataProvider && this.config.dataConfig) {
             void this.refreshValueFromDataSource();
         }
+        else {
+            this.syncFormattedNumberValue();
+        }
         // Sync enabled state based on config + rules
         this.syncEnabledState();
         if (this.engine) {
@@ -32542,6 +32632,9 @@ class TextFieldWidgetComponent {
         this.control.valueChanges
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe(val => {
+            if (this.usesFormattedNumberInput() && !this.isControlFocused) {
+                this.syncFormattedNumberValue();
+            }
             if (this.engine) {
                 this.engine.setValue(this.config.name, val);
                 this.engine.emitUiEvent({ fieldId: this.config.id, fieldName: this.config.name, type: 'change', value: val });
@@ -32553,6 +32646,7 @@ class TextFieldWidgetComponent {
     }
     onFocus() {
         this.isControlFocused = true;
+        this.syncFormattedNumberValue();
         if (this.engine)
             this.engine.emitUiEvent({ fieldId: this.config.id, fieldName: this.config.name, type: 'focus' });
     }
@@ -32562,6 +32656,8 @@ class TextFieldWidgetComponent {
     }
     onBlur() {
         this.isControlFocused = false;
+        this.control.markAsTouched();
+        this.syncFormattedNumberValue();
         if (this.engine) {
             this.engine.emitUiEvent({ fieldId: this.config.id, fieldName: this.config.name, type: 'blur' });
             if (this.control.touched) {
@@ -32609,6 +32705,15 @@ class TextFieldWidgetComponent {
             invalid: !!this.error
         }), splitControlSurfaceStyles(this.config.style).controlStyles);
     }
+    getSingleLineControlStyles() {
+        const styles = this.getControlStyles();
+        if (!this.hasDisplayPrefix()) {
+            return styles;
+        }
+        return mergeAndNormalize(styles, {
+            paddingLeft: `calc(20px + ${Math.max(this.displayPrefix.length, 1)}ch)`
+        });
+    }
     hasWrapperFrame() {
         return hasWrapperSurfaceStyles(this.config.style);
     }
@@ -32647,9 +32752,11 @@ class TextFieldWidgetComponent {
             return;
         try {
             const val = await this.dataProvider.getValue(this.config, this.engine);
+            this.displayPrefix = await this.dataProvider.getValueDisplayPrefix(this.config, this.engine);
             if (val === undefined || val === null)
                 return;
             this.control.setValue(val, { emitEvent: false });
+            this.syncFormattedNumberValue();
             if (this.engine) {
                 this.engine.setValue(this.config.name, val);
             }
@@ -32675,6 +32782,9 @@ class TextFieldWidgetComponent {
             sourceKey,
             String(dataConfig.valueKey ?? ''),
             String(dataConfig.rowsPath ?? ''),
+            String(dataConfig.formatNumericOptionLabels ?? ''),
+            String(dataConfig.optionLabelPrefixPath ?? ''),
+            String(dataConfig.optionLabelPrefixFieldId ?? ''),
             String(dataConfig.rowSelectionMode ?? ''),
             String(dataConfig.selectionFieldId ?? ''),
             String(dataConfig.selectionMatchPath ?? ''),
@@ -32730,6 +32840,59 @@ class TextFieldWidgetComponent {
             .filter(field => dependencyIds.has(field.id))
             .map(field => field.name);
     }
+    onFormattedNumberInput(event) {
+        const input = event.target;
+        this.formattedNumberValue = input.value;
+        if (this.control.pristine) {
+            this.control.markAsDirty();
+        }
+        const normalized = input.value.replace(/,/g, '').trim();
+        if (!normalized) {
+            this.control.setValue(null);
+            return;
+        }
+        const parsed = Number(normalized);
+        this.control.setValue(Number.isFinite(parsed) ? parsed : null);
+    }
+    syncFormattedNumberValue() {
+        if (!this.usesFormattedNumberInput()) {
+            return;
+        }
+        const rawValue = this.control.value;
+        if (rawValue === undefined || rawValue === null || rawValue === '') {
+            this.formattedNumberValue = '';
+            return;
+        }
+        if (typeof rawValue !== 'string' && typeof rawValue !== 'number') {
+            this.formattedNumberValue = '';
+            return;
+        }
+        const normalized = String(rawValue).replace(/,/g, '').trim();
+        if (!normalized) {
+            this.formattedNumberValue = '';
+            return;
+        }
+        if (this.isControlFocused) {
+            this.formattedNumberValue = normalized;
+            return;
+        }
+        this.formattedNumberValue = this.formatNumericValue(normalized);
+    }
+    formatNumericValue(value) {
+        if (!/^-?\d+(\.\d+)?$/.test(value)) {
+            return value;
+        }
+        const numericValue = Number(value);
+        if (!Number.isFinite(numericValue)) {
+            return value;
+        }
+        const fractionPart = value.split('.')[1];
+        return new Intl.NumberFormat(undefined, {
+            useGrouping: true,
+            minimumFractionDigits: fractionPart?.length ?? 0,
+            maximumFractionDigits: fractionPart?.length ?? 0
+        }).format(numericValue);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TextFieldWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: TextFieldWidgetComponent, isStandalone: true, selector: "app-text-field-widget", inputs: { config: "config", engine: "engine", control: "control" }, ngImport: i0, template: `
     <div [class]="fieldContainerClass"
@@ -32794,7 +32957,46 @@ class TextFieldWidgetComponent {
             [cpFallbackColor]="'#000000'"
             [cpDisabled]="config.readonly || !enabled"
             (colorPickerChange)="onColorPickerChange($event)">
+        } @else if (usesFormattedNumberInput()) {
+          @if (hasDisplayPrefix()) {
+            <span
+              class="pointer-events-none absolute left-3 top-1/2 z-[1] -translate-y-1/2 text-sm text-slate-500"
+              data-fd-field-prefix>
+              {{ displayPrefix }}
+            </span>
+          }
+          <input
+            [id]="fieldId"
+            type="text"
+            inputmode="decimal"
+            [placeholder]="config.placeholder || ''"
+            [value]="formattedNumberValue"
+            (input)="onFormattedNumberInput($event)"
+            (click)="onClick()"
+            (focus)="onFocus()"
+            (blur)="onBlur()"
+            (mouseenter)="onMouseEnter()"
+            (mouseleave)="onMouseLeave()"
+            [readonly]="config.readonly"
+            [disabled]="control.disabled"
+            [attr.aria-required]="required"
+            [attr.aria-invalid]="!!error"
+            [attr.aria-describedby]="getAriaDescribedBy()"
+            [attr.aria-label]="getAccessibleLabel()"
+            [class]="getControlClass()"
+            [ngStyle]="getSingleLineControlStyles()"
+            data-fd="field-control"
+            [attr.min]="config.html5?.min"
+            [attr.max]="config.html5?.max"
+            [attr.step]="config.html5?.step">
         } @else {
+          @if (hasDisplayPrefix()) {
+            <span
+              class="pointer-events-none absolute left-3 top-1/2 z-[1] -translate-y-1/2 text-sm text-slate-500"
+              data-fd-field-prefix>
+              {{ displayPrefix }}
+            </span>
+          }
           <input
             [id]="fieldId"
             [type]="config.type"
@@ -32811,7 +33013,7 @@ class TextFieldWidgetComponent {
             [attr.aria-describedby]="getAriaDescribedBy()"
             [attr.aria-label]="getAccessibleLabel()"
             [class]="getControlClass()"
-            [ngStyle]="getControlStyles()"
+            [ngStyle]="getSingleLineControlStyles()"
             data-fd="field-control"
             [attr.min]="config.html5?.min"
             [attr.max]="config.html5?.max"
@@ -32898,7 +33100,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
             [cpFallbackColor]="'#000000'"
             [cpDisabled]="config.readonly || !enabled"
             (colorPickerChange)="onColorPickerChange($event)">
+        } @else if (usesFormattedNumberInput()) {
+          @if (hasDisplayPrefix()) {
+            <span
+              class="pointer-events-none absolute left-3 top-1/2 z-[1] -translate-y-1/2 text-sm text-slate-500"
+              data-fd-field-prefix>
+              {{ displayPrefix }}
+            </span>
+          }
+          <input
+            [id]="fieldId"
+            type="text"
+            inputmode="decimal"
+            [placeholder]="config.placeholder || ''"
+            [value]="formattedNumberValue"
+            (input)="onFormattedNumberInput($event)"
+            (click)="onClick()"
+            (focus)="onFocus()"
+            (blur)="onBlur()"
+            (mouseenter)="onMouseEnter()"
+            (mouseleave)="onMouseLeave()"
+            [readonly]="config.readonly"
+            [disabled]="control.disabled"
+            [attr.aria-required]="required"
+            [attr.aria-invalid]="!!error"
+            [attr.aria-describedby]="getAriaDescribedBy()"
+            [attr.aria-label]="getAccessibleLabel()"
+            [class]="getControlClass()"
+            [ngStyle]="getSingleLineControlStyles()"
+            data-fd="field-control"
+            [attr.min]="config.html5?.min"
+            [attr.max]="config.html5?.max"
+            [attr.step]="config.html5?.step">
         } @else {
+          @if (hasDisplayPrefix()) {
+            <span
+              class="pointer-events-none absolute left-3 top-1/2 z-[1] -translate-y-1/2 text-sm text-slate-500"
+              data-fd-field-prefix>
+              {{ displayPrefix }}
+            </span>
+          }
           <input
             [id]="fieldId"
             [type]="config.type"
@@ -32915,7 +33156,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
             [attr.aria-describedby]="getAriaDescribedBy()"
             [attr.aria-label]="getAccessibleLabel()"
             [class]="getControlClass()"
-            [ngStyle]="getControlStyles()"
+            [ngStyle]="getSingleLineControlStyles()"
             data-fd="field-control"
             [attr.min]="config.html5?.min"
             [attr.max]="config.html5?.max"
@@ -37657,6 +37898,10 @@ function generateId$2() {
 const COMMON_GROUP_FIELDS = [
     { key: 'groupKey', type: 'text', label: 'Group Key', placeholder: 'documents', helpText: 'Group fields into one object on submit/preview (uses the field key inside the group).' }
 ];
+const COMMON_INTERACTIVITY_FIELDS = [
+    { key: 'readonly', type: 'checkbox', label: 'Read Only' },
+    { key: 'disabled', type: 'checkbox', label: 'Disabled' }
+];
 const COMMON_BASIC_FIELDS = [
     { key: 'name', type: 'text', label: 'Field Key (Name)' },
     { key: 'label', type: 'text', label: 'Label' },
@@ -37664,6 +37909,7 @@ const COMMON_BASIC_FIELDS = [
     { key: 'placeholder', type: 'text', label: 'Placeholder' },
     { key: 'helpText', type: 'text', label: 'Help Text' }, // Hint
     { key: 'tooltip', type: 'text', label: 'Tooltip' },
+    ...COMMON_INTERACTIVITY_FIELDS,
     ...COMMON_GROUP_FIELDS
 ];
 const FILE_BASIC_FIELDS = [
@@ -37672,6 +37918,7 @@ const FILE_BASIC_FIELDS = [
     { key: 'showLabel', type: 'checkbox', label: 'Show Native Label' },
     { key: 'helpText', type: 'text', label: 'Help Text' },
     { key: 'tooltip', type: 'text', label: 'Tooltip' },
+    ...COMMON_INTERACTIVITY_FIELDS,
     ...COMMON_GROUP_FIELDS
 ];
 const COMMON_APPEARANCE_FIELDS = [
@@ -37696,9 +37943,7 @@ const COMMON_APPEARANCE_FIELDS = [
             { label: 'Third Width (33%)', value: '33.33%' },
             { label: 'Quarter Width (25%)', value: '25%' }
         ]
-    },
-    { key: 'readonly', type: 'checkbox', label: 'Read Only' },
-    { key: 'disabled', type: 'checkbox', label: 'Disabled' }
+    }
 ];
 const COMMON_STYLE_SECTIONS = [
     STYLE_LAYOUT_SECTION,
@@ -37749,6 +37994,7 @@ const BUTTON_PROPERTIES = [
         label: 'Style',
         fields: [
             { key: 'variant', type: 'select', label: 'Variant', options: BUTTON_VARIANT_OPTIONS },
+            ...COMMON_INTERACTIVITY_FIELDS,
             ...COMMON_APPEARANCE_FIELDS
         ]
     },
@@ -37767,6 +38013,7 @@ const IMAGE_BUTTON_PROPERTIES = [
         label: 'Style',
         fields: [
             { key: 'variant', type: 'select', label: 'Variant', options: BUTTON_VARIANT_OPTIONS },
+            ...COMMON_INTERACTIVITY_FIELDS,
             ...COMMON_APPEARANCE_FIELDS
         ]
     },
@@ -37816,6 +38063,7 @@ const REPEATABLE_WIDGET_PROPERTIES = [
             { key: 'showLabel', type: 'checkbox', label: 'Show Native Label' },
             { key: 'helpText', type: 'text', label: 'Help Text' },
             { key: 'tooltip', type: 'text', label: 'Tooltip' },
+            ...COMMON_INTERACTIVITY_FIELDS,
             ...COMMON_GROUP_FIELDS
         ]
     },