@yourself.create/ngx-form-designer 0.0.5 → 0.0.7

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

@@ -5420,12 +5420,12 @@ class JsonFormRendererComponent {
         // Notify all widgets to show errors if any
         this.engine?.submit();
         const preUploadFieldValueMap = this.uploadOnSubmit
-            ? await this.buildFieldValueMap(this.engine?.getValues() ?? {})
+            ? 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);
+        const fieldValueMap = await this.buildFieldValueMap(values, { normalizeFileFieldsForSubmit: true });
         const submitValues = preUploadFieldValueMap
             ? this.mergeFileMetadata(fieldValueMap, preUploadFieldValueMap)
             : fieldValueMap;
@@ -5658,13 +5658,13 @@ class JsonFormRendererComponent {
     isObjectRecord(value) {
         return !!value && typeof value === 'object' && !Array.isArray(value);
     }
-    async buildFieldValueMap(values) {
+    async buildFieldValueMap(values, options = {}) {
         const schema = this.engine?.getSchema();
         if (!schema)
             return {};
-        return this.buildFieldValueMapForSchema(schema, values);
+        return this.buildFieldValueMapForSchema(schema, values, options);
     }
-    async buildFieldValueMapForSchema(schema, valuesScope) {
+    async buildFieldValueMapForSchema(schema, valuesScope, options = {}) {
         const mapped = {};
         for (const field of schema.fields) {
             if (!field?.id || !field?.name)
@@ -5679,7 +5679,7 @@ class JsonFormRendererComponent {
                             rows.push({});
                             continue;
                         }
-                        rows.push(await this.buildFieldValueMapForSchema(itemSchema, row));
+                        rows.push(await this.buildFieldValueMapForSchema(itemSchema, row, options));
                     }
                 }
                 mapped[field.id] = {
@@ -5691,7 +5691,10 @@ class JsonFormRendererComponent {
             if (field.type === 'file') {
                 const fileValue = {
                     fieldName: field.name,
-                    fieldValue: rawValue,
+                    fieldValue: options.normalizeFileFieldsForSubmit
+                        ? this.normalizeFileFieldSubmitValue(rawValue)
+                        : rawValue,
+                    ...(options.normalizeFileFieldsForSubmit ? { fieldType: field.type } : {}),
                     ...(await this.buildFileFieldMetadata(rawValue))
                 };
                 mapped[field.id] = fileValue;
@@ -5779,6 +5782,18 @@ class JsonFormRendererComponent {
             return undefined;
         return values.length === 1 ? values[0] : values;
     }
+    normalizeFileFieldSubmitValue(value) {
+        if (this.isFileList(value)) {
+            return Array.from(value);
+        }
+        if (Array.isArray(value)) {
+            return [...value];
+        }
+        if (value === null || value === undefined) {
+            return [];
+        }
+        return [value];
+    }
     getUploadedFileRefs(value) {
         if (this.isUploadedFileRef(value))
             return [value];
@@ -15425,6 +15440,8 @@ class DataPanelComponent {
     selectionFieldId;
     selectionMatchPath;
     childRowsPath;
+    formatNumericOptionLabels = false;
+    optionLabelPrefixPath;
     rootPathOptions = [];
     rowPathOptions = [];
     // Value/Image Config
@@ -15665,6 +15682,8 @@ class DataPanelComponent {
         this.selectionFieldId = undefined;
         this.selectionMatchPath = undefined;
         this.childRowsPath = undefined;
+        this.formatNumericOptionLabels = false;
+        this.optionLabelPrefixPath = undefined;
         this.rootPathOptions = [];
         this.rowPathOptions = [];
     }
@@ -15698,13 +15717,15 @@ class DataPanelComponent {
         this.staticOptions = (d.staticOptions || []).map(option => ({ ...option }));
         this.staticValue = d.staticValue !== undefined ? d.staticValue : this.readScalarTargetValue();
         this.selectedSourceId = d.datasourceId;
-        this.labelKey = d.labelPath ?? d.labelKey;
-        this.valueKey = d.valuePath ?? d.valueKey;
+        this.labelKey = d.labelKey;
+        this.valueKey = d.valueKey;
         this.rowsPath = d.rowsPath;
         this.rowSelectionMode = d.rowSelectionMode ?? 'first';
         this.selectionFieldId = d.selectionFieldId;
         this.selectionMatchPath = d.selectionMatchPath;
         this.childRowsPath = d.childRowsPath;
+        this.formatNumericOptionLabels = d.formatNumericOptionLabels === true;
+        this.optionLabelPrefixPath = d.optionLabelPrefixPath;
         // Search
         this.searchEnabled = !!d.searchEnabled;
         this.optionsLimit = d.optionsLimit;
@@ -15756,8 +15777,12 @@ class DataPanelComponent {
             labelKey: this.sourceType === 'source' ? this.labelKey : undefined,
             valueKey: this.sourceType === 'source' ? this.valueKey : undefined,
             rowsPath: this.sourceType === 'source' ? this.normalizedRowsPath() : undefined,
-            labelPath: this.sourceType === 'source' && this.shouldPersistStructuredLabelPath() ? this.labelKey : undefined,
-            valuePath: this.sourceType === 'source' && this.shouldPersistStructuredValuePath() ? this.valueKey : undefined,
+            formatNumericOptionLabels: this.shouldPersistOptionLabelFormatting()
+                ? this.formatNumericOptionLabels
+                : undefined,
+            optionLabelPrefixPath: this.shouldPersistOptionLabelFormatting()
+                ? this.optionLabelPrefixPath
+                : undefined,
             rowSelectionMode: this.sourceType === 'source' && this.bindingShape === 'scalar' && this.rowSelectionMode === 'selected'
                 ? 'selected'
                 : this.sourceType === 'source' && this.bindingShape === 'list' && this.rowSelectionMode === 'selected'
@@ -15866,6 +15891,9 @@ class DataPanelComponent {
     showOptionMappingControls() {
         return this.sourceType === 'source' && this.widgetType !== 'table' && this.usesOptionMapping();
     }
+    showOptionLabelFormattingControls() {
+        return this.widgetType === 'select' && this.usesOptionMapping();
+    }
     showStaticOptionsEditor() {
         return this.sourceType === 'static' && this.widgetType !== 'table' && this.usesOptionMapping();
     }
@@ -15916,17 +15944,8 @@ class DataPanelComponent {
         const sample = this.extractPreviewRows(this.previewRows, this.effectiveRowsPath())[0];
         return sample ? collectArrayPaths(sample) : [];
     }
-    shouldPersistStructuredLabelPath() {
-        if (!this.usesOptionMapping() || !this.labelKey)
-            return false;
-        return !!this.normalizedRowsPath() || !!this.childRowsPath || hasPathSyntax$1(this.labelKey);
-    }
-    shouldPersistStructuredValuePath() {
-        if (!this.valueKey)
-            return false;
-        if (!this.usesOptionMapping())
-            return true;
-        return !!this.normalizedRowsPath() || !!this.childRowsPath || hasPathSyntax$1(this.valueKey);
+    shouldPersistOptionLabelFormatting() {
+        return this.widgetType === 'select' && this.usesOptionMapping();
     }
     usesOptionMapping() {
         return this.bindingShape === 'list' || this.widgetType === 'search';
@@ -16247,6 +16266,38 @@ 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>
+
+                             <label class="mt-3 flex items-center gap-2 text-sm text-gray-700">
+                                 <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>
+                             </label>
+
+                             <div class="mt-3 flex flex-col gap-1">
+                                 <label class="text-xs font-medium text-gray-500">Prefix Key</label>
+                                 <input
+                                     [attr.list]="'prefix-cols-' + config.id"
+                                     [(ngModel)]="optionLabelPrefixPath"
+                                     (ngModelChange)="emitChange()"
+                                     [placeholder]="effectiveRowsPath() ? 'e.g. currency or meta.currency' : 'e.g. currency'"
+                                     class="h-8 w-full rounded-md border border-gray-300 px-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none">
+                                 <datalist [id]="'prefix-cols-' + config.id">
+                                     <option *ngFor="let col of sourceColumns" [value]="col.name"></option>
+                                     <option *ngFor="let path of availableRowPaths()" [value]="path"></option>
+                                     <option *ngFor="let path of availableRootPaths()" [value]="path"></option>
+                                 </datalist>
+                                 <p class="text-[10px] text-gray-400">
+                                     Reads a display-only prefix from the datasource or event payload. The select still stores only the mapped value.
+                                 </p>
+                             </div>
+                         </div>
+
                          <div class="rounded-lg border border-gray-200 bg-white p-3" *ngIf="showScalarMappingControls()">
                              <div class="text-xs font-semibold uppercase tracking-wide text-gray-500">Value Mapping</div>
                              <div class="mt-1 text-[11px] text-gray-500">Choose the value path and how this field picks a row from the datasource.</div>
@@ -16834,6 +16885,38 @@ 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>
+
+                             <label class="mt-3 flex items-center gap-2 text-sm text-gray-700">
+                                 <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>
+                             </label>
+
+                             <div class="mt-3 flex flex-col gap-1">
+                                 <label class="text-xs font-medium text-gray-500">Prefix Key</label>
+                                 <input
+                                     [attr.list]="'prefix-cols-' + config.id"
+                                     [(ngModel)]="optionLabelPrefixPath"
+                                     (ngModelChange)="emitChange()"
+                                     [placeholder]="effectiveRowsPath() ? 'e.g. currency or meta.currency' : 'e.g. currency'"
+                                     class="h-8 w-full rounded-md border border-gray-300 px-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none">
+                                 <datalist [id]="'prefix-cols-' + config.id">
+                                     <option *ngFor="let col of sourceColumns" [value]="col.name"></option>
+                                     <option *ngFor="let path of availableRowPaths()" [value]="path"></option>
+                                     <option *ngFor="let path of availableRootPaths()" [value]="path"></option>
+                                 </datalist>
+                                 <p class="text-[10px] text-gray-400">
+                                     Reads a display-only prefix from the datasource or event payload. The select still stores only the mapped value.
+                                 </p>
+                             </div>
+                         </div>
+
                          <div class="rounded-lg border border-gray-200 bg-white p-3" *ngIf="showScalarMappingControls()">
                              <div class="text-xs font-semibold uppercase tracking-wide text-gray-500">Value Mapping</div>
                              <div class="mt-1 text-[11px] text-gray-500">Choose the value path and how this field picks a row from the datasource.</div>
@@ -31748,18 +31831,15 @@ class DefaultDataProvider extends DataProvider {
             return runtimeOptions;
         }
         const cfg = getEffectiveDataConfig(field);
-        // 1. Resolve Rows
-        let rows = await this.getRawRows(cfg, field, engine);
-        rows = this.resolveCollectionRows(rows, cfg, engine);
-        // 2. Apply Filters
-        rows = this.applyRowFilters(rows, cfg.filters, engine);
+        const rowContexts = await this.getOptionRowContexts(cfg, field, engine);
+        const filteredContexts = this.applyOptionRowFilters(rowContexts, cfg.filters, engine);
         // 3. Map to Options
         if (cfg.type === 'static') {
-            return rows.map(row => this.mapRowToOption(row, 'label', 'value'));
+            return filteredContexts.map(context => this.mapContextToOption(context, 'label', 'value', cfg));
         }
-        const labelKey = cfg.labelPath || cfg.labelKey || 'label';
-        const valueKey = cfg.valuePath || cfg.valueKey || 'value';
-        return rows.map(row => this.mapRowToOption(row, labelKey, valueKey));
+        const labelKey = cfg.labelKey || 'label';
+        const valueKey = cfg.valueKey || 'value';
+        return filteredContexts.map(context => this.mapContextToOption(context, labelKey, valueKey, cfg));
     }
     async queryOptions(field, query, engine) {
         const runtimeOptions = await this.getRuntimeOptions(field, engine);
@@ -31866,19 +31946,24 @@ 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;
+            return currentValue !== undefined ? currentValue : 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 row = this.selectScalarRow(rows, cfg, engine) ?? rows[0];
-        const resolvedPath = cfg.valuePath || cfg.valueKey;
+        const selectedRow = this.selectScalarRow(rows, cfg, engine);
+        if (cfg.rowSelectionMode === 'selected' && !selectedRow) {
+            return currentValue !== undefined ? currentValue : field.defaultValue;
+        }
+        const row = selectedRow ?? rows[0];
+        const resolvedPath = cfg.valueKey;
         const resolvedValue = resolvePathValue(row, resolvedPath);
         if (resolvedPath && resolvedValue !== undefined) {
             return resolvedValue;
@@ -31922,12 +32007,30 @@ class DefaultDataProvider extends DataProvider {
                 return [];
         }
     }
+    getCurrentFieldValue(field, engine) {
+        return field.name && engine ? engine.getValue(field.name) : undefined;
+    }
     async getGlobalRows(cfg) {
         if (!cfg.datasourceId)
             return [];
         const result = await this.client.query(cfg.datasourceId);
         return result.rows;
     }
+    async getOptionRowContexts(cfg, field, engine) {
+        const rows = await this.getRawRows(cfg, field, engine);
+        return this.resolveCollectionRowContexts(rows, cfg, engine);
+    }
+    resolveCollectionRowContexts(rows, cfg, engine) {
+        const parentContexts = this.extractRowContexts(rows, cfg.rowsPath);
+        if (cfg.rowSelectionMode === 'selected' && cfg.childRowsPath) {
+            const selectedParentContext = this.selectOptionContext(parentContexts, cfg, engine);
+            if (!selectedParentContext) {
+                return [];
+            }
+            return this.extractRowContexts([selectedParentContext.row], cfg.childRowsPath, selectedParentContext);
+        }
+        return parentContexts;
+    }
     resolveCollectionRows(rows, cfg, engine) {
         const parentRows = this.extractRows(rows, cfg.rowsPath);
         if (cfg.rowSelectionMode === 'selected' && cfg.childRowsPath) {
@@ -31942,6 +32045,38 @@ class DefaultDataProvider extends DataProvider {
         }
         return parentRows;
     }
+    extractRowContexts(rows, path, sourceContext) {
+        const normalizedPath = path?.trim();
+        if (!normalizedPath) {
+            return rows.map(row => ({
+                row,
+                parentRow: sourceContext?.row,
+                sourceRow: sourceContext?.sourceRow ?? row
+            }));
+        }
+        const flattened = [];
+        for (const row of rows) {
+            const resolved = resolvePathValue(row, normalizedPath);
+            if (Array.isArray(resolved)) {
+                for (const entry of resolved) {
+                    flattened.push({
+                        row: this.toRowRecord(entry),
+                        parentRow: sourceContext?.row,
+                        sourceRow: sourceContext?.sourceRow ?? row
+                    });
+                }
+                continue;
+            }
+            if (resolved !== undefined && resolved !== null) {
+                flattened.push({
+                    row: this.toRowRecord(resolved),
+                    parentRow: sourceContext?.row,
+                    sourceRow: sourceContext?.sourceRow ?? row
+                });
+            }
+        }
+        return flattened;
+    }
     extractRows(rows, path) {
         const normalizedPath = path?.trim();
         if (!normalizedPath) {
@@ -31979,36 +32114,57 @@ class DefaultDataProvider extends DataProvider {
         }
         return rows.find(row => valuesMatch(resolvePathValue(row, cfg.selectionMatchPath), selectorValue));
     }
+    selectOptionContext(contexts, cfg, engine) {
+        if (contexts.length === 0)
+            return undefined;
+        if (cfg.rowSelectionMode !== 'selected' || !cfg.selectionFieldId || !cfg.selectionMatchPath || !engine) {
+            return contexts[0];
+        }
+        const schema = engine.getSchema();
+        const selectorField = schema.fields.find(candidate => candidate.id === cfg.selectionFieldId);
+        if (!selectorField) {
+            return undefined;
+        }
+        const selectorValue = engine.getValue(selectorField.name);
+        if (selectorValue === undefined || selectorValue === null || selectorValue === '') {
+            return undefined;
+        }
+        return contexts.find(context => valuesMatch(resolvePathValue(context.row, cfg.selectionMatchPath), selectorValue));
+    }
     applyRowFilters(rows, filters, engine) {
         if (!filters || filters.length === 0)
             return rows;
-        return rows.filter(row => {
-            return filters.every(filter => {
-                const expected = this.resolveFilterValue(filter, engine);
-                if (expected === undefined)
-                    return true; // Ignore if dependency missing
-                const actual = resolvePathValue(row, filter.column);
-                const val = expected;
-                switch (filter.op) {
-                    case 'eq': return actual === val;
-                    case 'neq': return actual !== val;
-                    case 'in': return Array.isArray(val) ? val.includes(actual) : actual === val;
-                    // String Ops
-                    case 'contains':
-                    case 'like':
-                        return String(actual ?? '').toLowerCase().includes(String(val ?? '').toLowerCase());
-                    case 'startsWith':
-                        return String(actual ?? '').toLowerCase().startsWith(String(val ?? '').toLowerCase());
-                    case 'endsWith':
-                        return String(actual ?? '').toLowerCase().endsWith(String(val ?? '').toLowerCase());
-                    // Comparison Ops
-                    case 'gt': return (actual ?? 0) > (val ?? 0);
-                    case 'gte': return (actual ?? 0) >= (val ?? 0);
-                    case 'lt': return (actual ?? 0) < (val ?? 0);
-                    case 'lte': return (actual ?? 0) <= (val ?? 0);
-                    default: return true;
-                }
-            });
+        return rows.filter(row => this.matchesRowFilters(row, filters, engine));
+    }
+    applyOptionRowFilters(contexts, filters, engine) {
+        if (!filters || filters.length === 0)
+            return contexts;
+        return contexts.filter(context => this.matchesRowFilters(context.row, filters, engine));
+    }
+    matchesRowFilters(row, filters, engine) {
+        return filters.every(filter => {
+            const expected = this.resolveFilterValue(filter, engine);
+            if (expected === undefined)
+                return true;
+            const actual = resolvePathValue(row, filter.column);
+            const val = expected;
+            switch (filter.op) {
+                case 'eq': return actual === val;
+                case 'neq': return actual !== val;
+                case 'in': return Array.isArray(val) ? val.includes(actual) : actual === val;
+                case 'contains':
+                case 'like':
+                    return String(actual ?? '').toLowerCase().includes(String(val ?? '').toLowerCase());
+                case 'startsWith':
+                    return String(actual ?? '').toLowerCase().startsWith(String(val ?? '').toLowerCase());
+                case 'endsWith':
+                    return String(actual ?? '').toLowerCase().endsWith(String(val ?? '').toLowerCase());
+                case 'gt': return (actual ?? 0) > (val ?? 0);
+                case 'gte': return (actual ?? 0) >= (val ?? 0);
+                case 'lt': return (actual ?? 0) < (val ?? 0);
+                case 'lte': return (actual ?? 0) <= (val ?? 0);
+                default: return true;
+            }
         });
     }
     resolveFilters(cfg, engine) {
@@ -32066,6 +32222,56 @@ class DefaultDataProvider extends DataProvider {
             value: this.toOptionValue(resolvePathValue(row, valueKey))
         };
     }
+    mapContextToOption(context, labelKey, valueKey, cfg) {
+        const rawLabel = String(resolvePathValue(context.row, labelKey) ?? '');
+        const prefix = this.resolveOptionLabelPrefix(context, cfg);
+        const label = this.formatOptionLabel(rawLabel, cfg);
+        return {
+            label: prefix ? `${prefix} ${label}` : label,
+            value: this.toOptionValue(resolvePathValue(context.row, valueKey))
+        };
+    }
+    resolveOptionLabelPrefix(context, cfg) {
+        const prefixPath = cfg.optionLabelPrefixPath?.trim();
+        if (!prefixPath) {
+            return '';
+        }
+        for (const candidate of [context.row, context.parentRow, context.sourceRow]) {
+            if (!candidate)
+                continue;
+            const resolved = resolvePathValue(candidate, prefixPath);
+            if (resolved === undefined || resolved === null)
+                continue;
+            const value = String(resolved).trim();
+            if (value.length > 0) {
+                return value;
+            }
+        }
+        return '';
+    }
+    formatOptionLabel(label, cfg) {
+        if (!cfg.formatNumericOptionLabels) {
+            return label;
+        }
+        const trimmed = label.trim();
+        if (!trimmed) {
+            return label;
+        }
+        const normalized = trimmed.replace(/,/g, '');
+        if (!/^-?\d+(\.\d+)?$/.test(normalized)) {
+            return label;
+        }
+        const numericValue = Number(normalized);
+        if (!Number.isFinite(numericValue)) {
+            return label;
+        }
+        const fractionPart = normalized.split('.')[1];
+        return new Intl.NumberFormat(undefined, {
+            useGrouping: true,
+            minimumFractionDigits: fractionPart?.length ?? 0,
+            maximumFractionDigits: fractionPart?.length ?? 0
+        }).format(numericValue);
+    }
     async getRuntimeOptions(field, engine) {
         if (!engine)
             return undefined;
@@ -32080,7 +32286,7 @@ class DefaultDataProvider extends DataProvider {
         return cfg.type === 'source' || cfg.type === 'global' || cfg.type === 'api';
     }
     shouldUseLocalResolution(cfg) {
-        if (cfg.rowsPath || cfg.labelPath || cfg.valuePath || cfg.rowSelectionMode || cfg.selectionFieldId || cfg.selectionMatchPath || cfg.childRowsPath) {
+        if (cfg.rowsPath || cfg.optionLabelPrefixPath || cfg.rowSelectionMode || cfg.selectionFieldId || cfg.selectionMatchPath || cfg.childRowsPath) {
             return true;
         }
         if (hasPathSyntax(cfg.labelKey) || hasPathSyntax(cfg.valueKey)) {
@@ -32471,7 +32677,6 @@ class TextFieldWidgetComponent {
             dataConfig.type ?? '',
             sourceKey,
             String(dataConfig.valueKey ?? ''),
-            String(dataConfig.valuePath ?? ''),
             String(dataConfig.rowsPath ?? ''),
             String(dataConfig.rowSelectionMode ?? ''),
             String(dataConfig.selectionFieldId ?? ''),
@@ -33266,12 +33471,14 @@ class SelectWidgetComponent {
     loading = false;
     loadError = null;
     options = [];
+    rawOptions = [];
     searchTerms$ = new Subject();
     requestId = 0;
     currentSearchTerm = '';
     runtimeManagedField = false;
     runtimeOptionsLoaded = false;
     dependencyValueSnapshot = new Map();
+    displayDependencyValueSnapshot = new Map();
     cachedStyleSource;
     cachedWrapperStyles = { width: '100%' };
     cachedControlCssVars = this.toCssVarMap({});
@@ -33313,7 +33520,7 @@ class SelectWidgetComponent {
                         return;
                     this.runtimeOptionsLoaded = false;
                     this.currentSearchTerm = '';
-                    this.options = [];
+                    this.setOptionsFromRaw([]);
                     void this.loadOptions(this.currentSearchTerm);
                 });
             }
@@ -33335,7 +33542,7 @@ class SelectWidgetComponent {
         this.runtimeManagedField = this.runtimeFieldDataAccessRegistry.hasFieldAccess(this.config, this.engine);
         if (!this.runtimeManagedField) {
             if (this.areApiCallsSuppressed() && this.hasSelectedValue()) {
-                this.options = this.withSelectedValueFallbackOptions([]);
+                this.setOptionsFromRaw(this.withSelectedValueFallbackOptions([]));
             }
             else {
                 void this.loadOptions(this.currentSearchTerm);
@@ -33344,7 +33551,7 @@ class SelectWidgetComponent {
         }
         else if (this.hasSelectedValue()) {
             if (this.areApiCallsSuppressed()) {
-                this.options = this.withSelectedValueFallbackOptions([]);
+                this.setOptionsFromRaw(this.withSelectedValueFallbackOptions([]));
                 this.runtimeOptionsLoaded = true;
             }
             else {
@@ -33353,32 +33560,38 @@ class SelectWidgetComponent {
                 });
             }
         }
-        const dependencyIds = this.getDependencyFieldIds();
         if (this.engine) {
             const initialValues = this.engine.getValues();
-            this.seedDependencySnapshotFromValues(dependencyIds, initialValues);
+            this.seedValueSnapshotFromValues(this.dependencyValueSnapshot, this.getDependencyFieldIds(), initialValues);
+            this.seedValueSnapshotFromValues(this.displayDependencyValueSnapshot, this.getDisplayDependencyFieldIds(), initialValues);
             this.engine.valueChanges$
                 .pipe(takeUntilDestroyed(this.destroyRef))
                 .subscribe(values => {
                 this.syncEnabledState();
                 if (this.areApiCallsSuppressed()) {
-                    this.options = this.withSelectedValueFallbackOptions(this.options);
+                    this.setOptionsFromRaw(this.withSelectedValueFallbackOptions(this.rawOptions));
                     this.cdr.markForCheck();
                 }
-                if (dependencyIds.length === 0)
-                    return;
                 const schema = this.engine.getSchema();
-                const depNames = schema.fields
-                    .filter(f => dependencyIds.includes(f.id))
-                    .map(f => f.name);
-                if (!this.haveDependencyValuesChanged(depNames, values))
+                const dependencyIds = this.getDependencyFieldIds();
+                const displayDependencyIds = this.getDisplayDependencyFieldIds();
+                const dependencyNames = this.resolveFieldNames(schema.fields, dependencyIds);
+                const displayDependencyNames = this.resolveFieldNames(schema.fields, displayDependencyIds);
+                if (displayDependencyNames.length > 0 && this.haveFieldValuesChanged(this.displayDependencyValueSnapshot, displayDependencyNames, values)) {
+                    this.applyDisplayFormatting();
+                    this.syncStoredFieldLabel(this.control.value);
+                    this.cdr.markForCheck();
+                }
+                if (dependencyNames.length === 0)
+                    return;
+                if (!this.haveFieldValuesChanged(this.dependencyValueSnapshot, dependencyNames, values))
                     return;
                 this.runtimeFieldDataAccessRegistry.invalidateFieldAndDescendants(this.engine, this.config.id);
                 if (this.hasSelectedValue()) {
                     this.control.setValue(null);
                 }
                 this.currentSearchTerm = '';
-                this.options = [];
+                this.setOptionsFromRaw([]);
                 this.runtimeOptionsLoaded = false;
                 if (!this.runtimeManagedField) {
                     void this.loadOptions(this.currentSearchTerm);
@@ -33521,6 +33734,10 @@ class SelectWidgetComponent {
             return [];
         return cfg.dependsOn.map(d => d.fieldId).filter((id) => !!id);
     }
+    getDisplayDependencyFieldIds() {
+        const prefixFieldId = this.config.dataConfig?.optionLabelPrefixFieldId;
+        return prefixFieldId ? [prefixFieldId] : [];
+    }
     toCssVarMap(controlStyles) {
         const vars = {
             '--fd-select-border-color': OUTLINED_FIELD_IDLE_BORDER_COLOR,
@@ -33589,7 +33806,7 @@ class SelectWidgetComponent {
                 opts = await this.dataProvider.getOptions(this.config, this.engine);
             }
             if (this.requestId === reqId) {
-                this.options = this.withSelectedValueFallbackOptions(opts);
+                this.setOptionsFromRaw(this.withSelectedValueFallbackOptions(opts));
                 this.syncStoredFieldLabel(this.control.value);
                 this.loading = false;
                 this.loadError = null;
@@ -33601,7 +33818,7 @@ class SelectWidgetComponent {
                 this.loading = false;
                 this.loadError = 'Failed to load options.';
                 if (!isSearch) {
-                    this.options = this.withSelectedValueFallbackOptions(this.config.staticOptions || []);
+                    this.setOptionsFromRaw(this.withSelectedValueFallbackOptions(this.config.staticOptions || []));
                 }
                 this.cdr.markForCheck();
             }
@@ -33622,7 +33839,7 @@ class SelectWidgetComponent {
         if (this.runtimeOptionsLoaded && this.options.length > 0)
             return;
         if (this.areApiCallsSuppressed()) {
-            this.options = this.withSelectedValueFallbackOptions(this.options);
+            this.setOptionsFromRaw(this.withSelectedValueFallbackOptions(this.rawOptions));
             this.runtimeOptionsLoaded = true;
             return;
         }
@@ -33631,25 +33848,29 @@ class SelectWidgetComponent {
             this.runtimeOptionsLoaded = true;
         }
     }
-    seedDependencySnapshotFromValues(dependencyIds, values) {
-        if (!this.engine || dependencyIds.length === 0)
+    seedValueSnapshotFromValues(snapshot, fieldIds, values) {
+        if (!this.engine || fieldIds.length === 0)
             return;
-        const schema = this.engine.getSchema();
-        const depNames = schema.fields
-            .filter(field => dependencyIds.includes(field.id))
-            .map(field => field.name);
-        for (const depName of depNames) {
-            this.dependencyValueSnapshot.set(depName, values[depName]);
+        for (const fieldName of this.resolveFieldNames(this.engine.getSchema().fields, fieldIds)) {
+            snapshot.set(fieldName, values[fieldName]);
         }
     }
-    haveDependencyValuesChanged(dependencyNames, values) {
+    resolveFieldNames(fields, fieldIds) {
+        if (fieldIds.length === 0) {
+            return [];
+        }
+        return fields
+            .filter(field => fieldIds.includes(field.id))
+            .map(field => field.name);
+    }
+    haveFieldValuesChanged(snapshot, fieldNames, values) {
         let changed = false;
-        for (const depName of dependencyNames) {
-            const previousValue = this.dependencyValueSnapshot.get(depName);
-            const nextValue = values[depName];
+        for (const fieldName of fieldNames) {
+            const previousValue = snapshot.get(fieldName);
+            const nextValue = values[fieldName];
             if (!Object.is(previousValue, nextValue)) {
                 changed = true;
-                this.dependencyValueSnapshot.set(depName, nextValue);
+                snapshot.set(fieldName, nextValue);
             }
         }
         return changed;
@@ -33661,12 +33882,19 @@ class SelectWidgetComponent {
         this.syncEnabledState();
         this.runtimeManagedField = this.runtimeFieldDataAccessRegistry.hasFieldAccess(this.config, this.engine);
         this.runtimeOptionsLoaded = false;
-        this.options = [];
+        this.dependencyValueSnapshot.clear();
+        this.displayDependencyValueSnapshot.clear();
+        this.setOptionsFromRaw([]);
         this.loadError = null;
         this.currentSearchTerm = '';
+        if (this.engine) {
+            const currentValues = this.engine.getValues();
+            this.seedValueSnapshotFromValues(this.dependencyValueSnapshot, this.getDependencyFieldIds(), currentValues);
+            this.seedValueSnapshotFromValues(this.displayDependencyValueSnapshot, this.getDisplayDependencyFieldIds(), currentValues);
+        }
         if (!this.runtimeManagedField) {
             if (this.areApiCallsSuppressed() && this.hasSelectedValue()) {
-                this.options = this.withSelectedValueFallbackOptions([]);
+                this.setOptionsFromRaw(this.withSelectedValueFallbackOptions([]));
                 return;
             }
             void this.loadOptions(this.currentSearchTerm);
@@ -33702,6 +33930,8 @@ class SelectWidgetComponent {
             String(dataConfig.datasourceId ?? ''),
             String(dataConfig.labelKey ?? ''),
             String(dataConfig.valueKey ?? ''),
+            String(dataConfig.formatNumericOptionLabels ?? ''),
+            String(dataConfig.optionLabelPrefixFieldId ?? ''),
             String(dataConfig.searchEnabled ?? ''),
             String(dataConfig.optionsLimit ?? ''),
             dependencySignature,
@@ -33746,6 +33976,62 @@ class SelectWidgetComponent {
             this.cachedInputAttributes = { 'aria-label': accessibleLabel };
         }
     }
+    setOptionsFromRaw(options) {
+        this.rawOptions = [...options];
+        this.applyDisplayFormatting();
+    }
+    applyDisplayFormatting() {
+        this.options = this.rawOptions.map(option => ({
+            ...option,
+            label: this.formatOptionLabel(option.label)
+        }));
+    }
+    formatOptionLabel(label) {
+        const formattedLabel = this.config.dataConfig?.formatNumericOptionLabels
+            ? this.formatNumericLabel(label)
+            : label;
+        const prefix = this.resolveOptionLabelPrefix();
+        return prefix ? `${prefix} ${formattedLabel}` : formattedLabel;
+    }
+    resolveOptionLabelPrefix() {
+        const prefixFieldId = this.config.dataConfig?.optionLabelPrefixFieldId;
+        if (!prefixFieldId
+            || !this.engine
+            || typeof this.engine.getValue !== 'function') {
+            return '';
+        }
+        const prefixField = this.engine.getSchema().fields.find(field => field.id === prefixFieldId);
+        if (!prefixField) {
+            return '';
+        }
+        const value = this.engine.getValue(prefixField.name);
+        if (value === undefined || value === null) {
+            return '';
+        }
+        const trimmed = String(value).trim();
+        return trimmed;
+    }
+    formatNumericLabel(label) {
+        const trimmed = label.trim();
+        if (!trimmed) {
+            return label;
+        }
+        const normalized = trimmed.replace(/,/g, '');
+        if (!/^-?\d+(\.\d+)?$/.test(normalized)) {
+            return label;
+        }
+        const numericValue = Number(normalized);
+        if (!Number.isFinite(numericValue)) {
+            return label;
+        }
+        const fractionPart = normalized.split('.')[1];
+        const formatter = new Intl.NumberFormat(undefined, {
+            useGrouping: true,
+            minimumFractionDigits: fractionPart?.length ?? 0,
+            maximumFractionDigits: fractionPart?.length ?? 0
+        });
+        return formatter.format(numericValue);
+    }
     toSafeNonNegativeInt(value, fallback) {
         if (typeof value === 'number' && Number.isFinite(value) && value >= 0) {
             return Math.floor(value);
@@ -33779,7 +34065,11 @@ class SelectWidgetComponent {
         if (!this.hasMeaningfulValue(rawValue)) {
             return [];
         }
-        return buildFallbackOptions(rawValue, this.getStoredFieldLabel());
+        const storedLabel = this.getStoredFieldLabel();
+        if (this.shouldUseStoredFallbackLabel(storedLabel)) {
+            return buildFallbackOptions(rawValue, storedLabel);
+        }
+        return buildFallbackOptions(rawValue);
     }
     hasOptionValue(options, value) {
         return options.some(option => Object.is(option.value, value) || String(option.value) === String(value));
@@ -33818,6 +34108,18 @@ class SelectWidgetComponent {
         }
         return this.engine.getFieldLabel(this.config.name);
     }
+    shouldUseStoredFallbackLabel(label) {
+        if (label === undefined) {
+            return false;
+        }
+        if (this.config.dataConfig?.optionLabelPrefixPath) {
+            return true;
+        }
+        if (this.config.dataConfig?.optionLabelPrefixFieldId) {
+            return this.resolveOptionLabelPrefix().length === 0;
+        }
+        return this.config.dataConfig?.formatNumericOptionLabels !== true;
+    }
     setStoredFieldLabel(label) {
         if (!this.engine || typeof this.engine.setFieldLabel !== 'function') {
             return;