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

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

@@ -23,6 +23,15 @@ import Quill from 'quill';
 import { DomSanitizer } from '@angular/platform-browser';
 import { HttpClient, provideHttpClient } from '@angular/common/http';
 
+function usesFieldThousandSeparator(field) {
+    return field?.useThousandSeparator === true;
+}
+function isFieldReadonly(field) {
+    return field?.html5?.readonly === true;
+}
+function isFieldDisabled(field) {
+    return field?.html5?.disabled === true;
+}
 const CURRENT_SCHEMA_VERSION = '1.0.0';
 
 /**
@@ -446,8 +455,8 @@ class FormEngine {
     setValue(fieldName, value) {
         this.values[fieldName] = value;
         this.valueSubject.next({ ...this.values }); // Emit new state
-        // Re-run validation for this field.
-        this.validateField(fieldName);
+        // Rules and dependencies can affect other fields, so revalidate the full form.
+        this.validate();
     }
     getValues() {
         return { ...this.values };
@@ -502,7 +511,7 @@ class FormEngine {
         if (!field)
             return false;
         // 1. Dependencies (Legacy)
-        let enabled = this.evaluateDependencyRules(field, 'enable', 'disable', true);
+        let enabled = this.evaluateDependencyRules(field, 'enable', 'disable', !isFieldDisabled(field));
         // 2. Enterprise Rules
         enabled = this.evaluateEnterpriseRules(field, 'enable', 'disable', enabled);
         return enabled;
@@ -535,10 +544,16 @@ class FormEngine {
             return;
         const value = this.values[fieldName];
         const fieldErrors = [];
+        const ruleErrors = this.getRuleValidationErrors(field);
         // Visibility check
         const isVisible = this.isFieldVisible(field.id);
         if (!isVisible) {
-            delete this.errors[fieldName];
+            if (ruleErrors.length > 0) {
+                this.errors[fieldName] = ruleErrors;
+            }
+            else {
+                delete this.errors[fieldName];
+            }
             return;
         }
         const isRequired = this.isFieldRequired(field.id);
@@ -568,30 +583,9 @@ class FormEngine {
                     }
                 }
             }
-            // Custom Validation Rules
-            if (field.validation) {
-                field.validation.forEach(rule => {
-                    let isValid = true;
-                    if (rule.type === 'builtin') {
-                        if (rule.name === 'email') {
-                            isValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(String(value));
-                        }
-                    }
-                    else if (rule.type === 'expression' && rule.expression) {
-                        try {
-                            const checkFn = new Function('value', 'form', `return ${rule.expression}`);
-                            isValid = checkFn(value, this.values);
-                        }
-                        catch (e) {
-                            console.error('Validation expression error', e);
-                            isValid = false;
-                        }
-                    }
-                    if (!isValid) {
-                        fieldErrors.push(rule.message || 'Validation failed.');
-                    }
-                });
-            }
+        }
+        if (ruleErrors.length > 0) {
+            fieldErrors.push(...ruleErrors);
         }
         if (fieldErrors.length > 0) {
             this.errors[fieldName] = fieldErrors;
@@ -600,6 +594,11 @@ class FormEngine {
             delete this.errors[fieldName];
         }
     }
+    getRuleValidationErrors(field) {
+        return this.getEnterpriseRuleOutcomes(field)
+            .filter(({ rule, conditionMet }) => rule.severity === 'error' && !conditionMet && rule.elseAction === undefined)
+            .map(({ rule }) => this.getRuleValidationMessage(rule));
+    }
     // Generic rule evaluator
     evaluateDependencyRules(field, positiveEffect, negativeEffect, startValue) {
         if (!field.dependencies)
@@ -638,13 +637,31 @@ class FormEngine {
         if (hasPositiveRules && startValue === true) {
             currentState = false; // Implicitly hide/disable
         }
-        field.rules.forEach((rule) => {
-            const conditionMet = this.ruleEvaluator.evaluateRule(rule, this.values, this.schema.fields);
-            const nextAction = conditionMet ? rule.action : rule.elseAction;
+        this.getEnterpriseRuleOutcomes(field).forEach(({ nextAction }) => {
             currentState = this.applyRuleAction(currentState, nextAction, positiveAction, negativeAction);
         });
         return currentState;
     }
+    getEnterpriseRuleOutcomes(field) {
+        if (!field.rules || field.rules.length === 0) {
+            return [];
+        }
+        return field.rules.map((rule) => {
+            const conditionMet = this.ruleEvaluator.evaluateRule(rule, this.values, this.schema.fields);
+            return {
+                rule,
+                conditionMet,
+                nextAction: conditionMet ? rule.action : rule.elseAction
+            };
+        });
+    }
+    getRuleValidationMessage(rule) {
+        const name = rule.name?.trim();
+        if (name) {
+            return name;
+        }
+        return `Rule "${rule.action}" failed.`;
+    }
     applyRuleAction(currentState, action, positiveAction, negativeAction) {
         if (action === positiveAction) {
             return true;
@@ -4496,6 +4513,7 @@ class FormEventRunner {
         const target = fields.find(f => f.id === action.targetFieldId);
         if (!target)
             return;
+        const previousValue = this.engine.getValue(target.name);
         let val;
         if (action.valueFrom === 'literal') {
             val = action.valueLiteral;
@@ -4510,6 +4528,14 @@ class FormEventRunner {
             }
         }
         this.engine.setValue(target.name, val);
+        if (!Object.is(previousValue, val)) {
+            this.engine.emitUiEvent({
+                fieldId: target.id,
+                fieldName: target.name,
+                type: 'change',
+                value: val
+            });
+        }
     }
     async handleApiAction(action, eventId, evt, fields) {
         if (!this.apiExecutor) {
@@ -5181,6 +5207,7 @@ class JsonFormRendererComponent {
     uploadClient = inject(FILE_UPLOAD_CLIENT, { optional: true }) ?? inject(DefaultFileUploadClient);
     runtimeFieldDataAccessRegistry = inject(RuntimeFieldDataAccessRegistryService);
     dataCatalog = inject(DataCatalog, { optional: true });
+    ruleEvaluationService = inject(RuleEvaluationService);
     constructor(designerState) {
         this.designerState = designerState;
     }
@@ -5257,7 +5284,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 +5446,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),
@@ -5441,10 +5462,12 @@ class JsonFormRendererComponent {
         const errors = revalidate
             ? (this.engine?.validate() ?? {})
             : (this.engine?.getErrors() ?? {});
+        const fields = this.buildFieldValidationState(errors);
         return {
             errors: { ...errors },
             isValid: Object.keys(errors).length === 0,
-            fields: this.buildFieldValidationState(errors)
+            isSeverityError: Object.values(fields).some(field => field.isSeverityError),
+            fields
         };
     }
     buildFieldValidationState(errors) {
@@ -5465,71 +5488,99 @@ class JsonFormRendererComponent {
                 visible,
                 required,
                 valid: fieldErrors.length === 0,
+                isSeverityError: false,
                 errors: fieldErrors,
-                validators: this.describeFieldValidators(field, visible, required)
+                validators: this.describeFieldValidators(field, visible, required, fieldErrors)
             };
+            states[field.name].isSeverityError = states[field.name].validators.some(validator => validator.severity === 'error' && validator.valid === false);
         }
         return states;
     }
-    describeFieldValidators(field, visible, required) {
+    describeFieldValidators(field, visible, required, fieldErrors) {
         const validators = [];
         const value = this.engine?.getValue(field.name);
         const hasValue = !this.isValidationEmpty(value);
+        const ruleOutcomes = this.getRuleOutcomes(field);
+        const requiredSeverity = ruleOutcomes.some(outcome => outcome.rule.severity === 'error' && outcome.nextAction === 'required');
         if (this.hasRequiredValidation(field) || required) {
+            const message = 'This field is required.';
             validators.push({
                 name: 'required',
                 source: 'required',
                 active: visible && required,
-                message: 'This field is required.'
+                valid: !fieldErrors.includes(message),
+                message,
+                ...(requiredSeverity ? { severity: 'error' } : {})
             });
         }
         if (field.html5?.minLength !== undefined) {
+            const message = `Minimum length is ${field.html5.minLength}.`;
             validators.push({
                 name: 'minLength',
                 source: 'html5',
                 active: visible && hasValue,
-                value: field.html5.minLength
+                valid: !fieldErrors.includes(message),
+                value: field.html5.minLength,
+                message
             });
         }
         if (field.html5?.maxLength !== undefined) {
+            const message = `Maximum length is ${field.html5.maxLength}.`;
             validators.push({
                 name: 'maxLength',
                 source: 'html5',
                 active: visible && hasValue,
-                value: field.html5.maxLength
+                valid: !fieldErrors.includes(message),
+                value: field.html5.maxLength,
+                message
             });
         }
         if (field.html5?.min !== undefined) {
+            const message = `Minimum value is ${field.html5.min}.`;
             validators.push({
                 name: 'min',
                 source: 'html5',
                 active: visible && hasValue,
-                value: field.html5.min
+                valid: !fieldErrors.includes(message),
+                value: field.html5.min,
+                message
             });
         }
         if (field.html5?.max !== undefined) {
+            const message = `Maximum value is ${field.html5.max}.`;
             validators.push({
                 name: 'max',
                 source: 'html5',
                 active: visible && hasValue,
-                value: field.html5.max
+                valid: !fieldErrors.includes(message),
+                value: field.html5.max,
+                message
             });
         }
         if (field.html5?.pattern) {
+            const message = 'Invalid format.';
             validators.push({
                 name: 'pattern',
                 source: 'html5',
                 active: visible && hasValue,
-                value: field.html5.pattern
+                valid: !fieldErrors.includes(message),
+                value: field.html5.pattern,
+                message
             });
         }
-        for (const rule of field.validation ?? []) {
+        for (const outcome of ruleOutcomes) {
+            const message = this.getRuleValidationMessage(outcome.rule);
             validators.push({
-                name: rule.type === 'builtin' ? (rule.name ?? 'builtin') : 'expression',
-                source: 'custom',
-                active: visible && hasValue && this.isValidationRuleActive(rule),
-                value: rule.type === 'expression' ? rule.expression : rule.name,
-                message: rule.message
+                name: outcome.rule.name?.trim() || this.describeRuleName(outcome.rule),
+                source: 'rule',
+                active: true,
+                valid: outcome.conditionMet || outcome.nextAction !== undefined,
+                value: {
+                    action: outcome.rule.action,
+                    elseAction: outcome.rule.elseAction
+                },
+                message,
+                ...(outcome.rule.severity ? { severity: outcome.rule.severity } : {})
             });
         }
         return validators;
@@ -5548,16 +5599,30 @@ class JsonFormRendererComponent {
         }
         return false;
     }
-    isValidationRuleActive(rule) {
-        if (!rule.when)
-            return true;
-        try {
-            const checkFn = new Function('form', `return ${rule.when}`);
-            return checkFn(this.engine?.getValues() ?? {});
+    getRuleOutcomes(field) {
+        if (!field.rules?.length) {
+            return [];
         }
-        catch {
-            return false;
+        const schema = this.engine?.getSchema() ?? this.schema;
+        const formValues = this.engine?.getValues() ?? {};
+        return field.rules.map(rule => {
+            const conditionMet = this.ruleEvaluationService.evaluateRule(rule, formValues, schema?.fields ?? []);
+            return {
+                rule,
+                conditionMet,
+                nextAction: conditionMet ? rule.action : rule.elseAction
+            };
+        });
+    }
+    describeRuleName(rule) {
+        return rule.action.charAt(0).toUpperCase() + rule.action.slice(1);
+    }
+    getRuleValidationMessage(rule) {
+        const name = rule.name?.trim();
+        if (name) {
+            return name;
         }
+        return `Rule "${rule.action}" failed.`;
     }
     isValidationEmpty(value) {
         return value === null
@@ -5689,13 +5754,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 +5848,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 +5865,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 +5896,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();
@@ -10274,13 +10342,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
 class DynamicPropertiesComponent {
     onPropertyChange;
     designerCtx = inject(DesignerContext);
-    validatorTypeOptions = [
-        { label: 'Built-in', value: 'builtin' },
-        { label: 'Expression', value: 'expression' }
-    ];
-    builtinValidatorOptions = [
-        { label: 'Email', value: 'email' }
-    ];
     get properties() {
         if (!this.config)
             return [];
@@ -10612,68 +10673,6 @@ class DynamicPropertiesComponent {
             this.setValue(path, options);
         }
     }
-    // Validators editor methods
-    addValidator(path) {
-        if (this.readOnly)
-            return;
-        const validators = [...(this.getValue(path) || [])];
-        validators.push(this.createDefaultValidationRule());
-        this.setValue(path, validators);
-        this.handleFieldChange();
-    }
-    removeValidator(path, index) {
-        if (this.readOnly)
-            return;
-        const validators = [...(this.getValue(path) || [])];
-        validators.splice(index, 1);
-        this.setValue(path, validators);
-        this.handleFieldChange();
-    }
-    updateValidator(path, index, field, value) {
-        if (this.readOnly)
-            return;
-        const validators = [...(this.getValue(path) || [])];
-        const currentRule = validators[index];
-        if (!currentRule) {
-            return;
-        }
-        let nextRule = { ...currentRule };
-        if (field === 'type') {
-            nextRule = value === 'expression'
-                ? {
-                    type: 'expression',
-                    expression: 'return true;',
-                    message: 'Validation failed.'
-                }
-                : this.createDefaultValidationRule();
-        }
-        else if (field === 'name') {
-            nextRule.name = String(value);
-            nextRule.message = this.defaultValidationMessage(nextRule);
-        }
-        else if (field === 'expression') {
-            nextRule.expression = String(value);
-        }
-        else if (field === 'message') {
-            nextRule.message = String(value);
-        }
-        validators[index] = nextRule;
-        this.setValue(path, validators);
-        this.handleFieldChange();
-    }
-    createDefaultValidationRule() {
-        return {
-            type: 'builtin',
-            name: 'email',
-            message: 'Enter a valid email address.'
-        };
-    }
-    defaultValidationMessage(rule) {
-        if (rule.type === 'builtin' && rule.name === 'email') {
-            return 'Enter a valid email address.';
-        }
-        return 'Validation failed.';
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DynamicPropertiesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: DynamicPropertiesComponent, isStandalone: true, selector: "app-dynamic-properties", inputs: { onPropertyChange: "onPropertyChange", config: "config", readOnly: "readOnly", includeSections: "includeSections", excludeSections: "excludeSections", allFields: "allFields" }, outputs: { configChange: "configChange" }, usesOnChanges: true, ngImport: i0, template: `
       <div class="dynamic-properties flex flex-col font-sans text-sm">
@@ -10816,51 +10815,6 @@ class DynamicPropertiesComponent {
                       </div>
                     </ui-field-wrapper>
 
-                    <!-- Validators Editor -->
-                    <ui-field-wrapper *ngIf="field.type === 'validators-editor'" [label]="field.label || ''" [helpText]="field.helpText || ''">
-                      <div class="w-full border border-gray-200 rounded-lg p-3 bg-gray-50">
-                          <div class="flex items-center justify-between mb-3">
-                              <span class="text-xs font-semibold text-gray-600 uppercase">{{field.label}}</span>
-                              <button type="button"
-                                      (click)="addValidator(field.key)"
-                                      class="text-xs px-2 py-1 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors">
-                                  + 
-                              </button>
-                          </div>
-                          <div class="space-y-2">
-                              <div *ngFor="let val of getValue(field.key) || []; let i = index" class="flex items-center gap-2 p-2 bg-white rounded border border-gray-200">
-                                  <select [ngModel]="val.type || 'builtin'"
-                                          (ngModelChange)="updateValidator(field.key, i, 'type', $event)"
-                                          class="flex-1 h-8 px-2 text-sm rounded border border-gray-300 bg-white focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none">
-                                      <option *ngFor="let option of validatorTypeOptions" [value]="option.value">{{ option.label }}</option>
-                                  </select>
-                                  <select *ngIf="(val.type || 'builtin') === 'builtin'"
-                                          [ngModel]="val.name || 'email'"
-                                          (ngModelChange)="updateValidator(field.key, i, 'name', $event)"
-                                          class="flex-1 h-8 px-2 text-sm rounded border border-gray-300 bg-white focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none">
-                                      <option *ngFor="let option of builtinValidatorOptions" [value]="option.value">{{ option.label }}</option>
-                                  </select>
-                                  <input *ngIf="val.type === 'expression'"
-                                         type="text"
-                                         [ngModel]="val.expression || ''"
-                                         (ngModelChange)="updateValidator(field.key, i, 'expression', $event)"
-                                         placeholder="return true;"
-                                         class="flex-1 h-8 px-2 text-sm rounded border border-gray-300 bg-white focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none">
-                                  <input type="text"
-                                         [ngModel]="val.message || ''"
-                                         (ngModelChange)="updateValidator(field.key, i, 'message', $event)"
-                                         placeholder="Validation message"
-                                         class="flex-1 h-8 px-2 text-sm rounded border border-gray-300 bg-white focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none">
-                                  <button type="button"
-                                          (click)="removeValidator(field.key, i)"
-                                          class="w-8 h-8 flex items-center justify-center text-red-600 hover:bg-red-50 rounded transition-colors">
-                                      <lucide-icon name="x" class="w-4 h-4"></lucide-icon>
-                                  </button>
-                              </div>
-                          </div>
-                      </div>
-                    </ui-field-wrapper>
-
                     <!-- Field Reference -->
                     <ui-field-wrapper *ngIf="field.type === 'field-reference'" [label]="field.label || ''" [helpText]="field.helpText || ''">
                         <select [ngModel]="getValue(field.key) || ''"
@@ -11109,51 +11063,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                       </div>
                     </ui-field-wrapper>
 
-                    <!-- Validators Editor -->
-                    <ui-field-wrapper *ngIf="field.type === 'validators-editor'" [label]="field.label || ''" [helpText]="field.helpText || ''">
-                      <div class="w-full border border-gray-200 rounded-lg p-3 bg-gray-50">
-                          <div class="flex items-center justify-between mb-3">
-                              <span class="text-xs font-semibold text-gray-600 uppercase">{{field.label}}</span>
-                              <button type="button"
-                                      (click)="addValidator(field.key)"
-                                      class="text-xs px-2 py-1 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors">
-                                  + 
-                              </button>
-                          </div>
-                          <div class="space-y-2">
-                              <div *ngFor="let val of getValue(field.key) || []; let i = index" class="flex items-center gap-2 p-2 bg-white rounded border border-gray-200">
-                                  <select [ngModel]="val.type || 'builtin'"
-                                          (ngModelChange)="updateValidator(field.key, i, 'type', $event)"
-                                          class="flex-1 h-8 px-2 text-sm rounded border border-gray-300 bg-white focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none">
-                                      <option *ngFor="let option of validatorTypeOptions" [value]="option.value">{{ option.label }}</option>
-                                  </select>
-                                  <select *ngIf="(val.type || 'builtin') === 'builtin'"
-                                          [ngModel]="val.name || 'email'"
-                                          (ngModelChange)="updateValidator(field.key, i, 'name', $event)"
-                                          class="flex-1 h-8 px-2 text-sm rounded border border-gray-300 bg-white focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none">
-                                      <option *ngFor="let option of builtinValidatorOptions" [value]="option.value">{{ option.label }}</option>
-                                  </select>
-                                  <input *ngIf="val.type === 'expression'"
-                                         type="text"
-                                         [ngModel]="val.expression || ''"
-                                         (ngModelChange)="updateValidator(field.key, i, 'expression', $event)"
-                                         placeholder="return true;"
-                                         class="flex-1 h-8 px-2 text-sm rounded border border-gray-300 bg-white focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none">
-                                  <input type="text"
-                                         [ngModel]="val.message || ''"
-                                         (ngModelChange)="updateValidator(field.key, i, 'message', $event)"
-                                         placeholder="Validation message"
-                                         class="flex-1 h-8 px-2 text-sm rounded border border-gray-300 bg-white focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none">
-                                  <button type="button"
-                                          (click)="removeValidator(field.key, i)"
-                                          class="w-8 h-8 flex items-center justify-center text-red-600 hover:bg-red-50 rounded transition-colors">
-                                      <lucide-icon name="x" class="w-4 h-4"></lucide-icon>
-                                  </button>
-                              </div>
-                          </div>
-                      </div>
-                    </ui-field-wrapper>
-
                     <!-- Field Reference -->
                     <ui-field-wrapper *ngIf="field.type === 'field-reference'" [label]="field.label || ''" [helpText]="field.helpText || ''">
                         <select [ngModel]="getValue(field.key) || ''"
@@ -15264,7 +15173,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                 type: Output
             }] } });
 
-function parsePathSegments$2(path) {
+function parsePathSegments$3(path) {
     const segments = [];
     const matcher = /([^[.\]]+)|\[(\d+)\]/g;
     let match;
@@ -15280,14 +15189,14 @@ function parsePathSegments$2(path) {
     }
     return segments;
 }
-function resolvePathValue$1(value, path) {
+function resolvePathValue$2(value, path) {
     if (!path)
         return value;
     const normalized = path.trim();
     if (!normalized)
         return value;
     let current = value;
-    for (const segment of parsePathSegments$2(normalized)) {
+    for (const segment of parsePathSegments$3(normalized)) {
         if (current === null || current === undefined)
             return undefined;
         if (Array.isArray(current)) {
@@ -15304,7 +15213,7 @@ function resolvePathValue$1(value, path) {
     return current;
 }
 function assignPathValue(target, path, value) {
-    const segments = parsePathSegments$2(path);
+    const segments = parsePathSegments$3(path);
     if (!segments.length) {
         return;
     }
@@ -15440,7 +15349,6 @@ class DataPanelComponent {
     selectionFieldId;
     selectionMatchPath;
     childRowsPath;
-    formatNumericOptionLabels = false;
     optionLabelPrefixPath;
     rootPathOptions = [];
     rowPathOptions = [];
@@ -15682,7 +15590,6 @@ class DataPanelComponent {
         this.selectionFieldId = undefined;
         this.selectionMatchPath = undefined;
         this.childRowsPath = undefined;
-        this.formatNumericOptionLabels = false;
         this.optionLabelPrefixPath = undefined;
         this.rootPathOptions = [];
         this.rowPathOptions = [];
@@ -15724,7 +15631,6 @@ class DataPanelComponent {
         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;
@@ -15777,10 +15683,7 @@ class DataPanelComponent {
             labelKey: this.sourceType === 'source' ? this.labelKey : undefined,
             valueKey: this.sourceType === 'source' ? this.valueKey : undefined,
             rowsPath: this.sourceType === 'source' ? this.normalizedRowsPath() : undefined,
-            formatNumericOptionLabels: this.shouldPersistOptionLabelFormatting()
-                ? this.formatNumericOptionLabels
-                : undefined,
-            optionLabelPrefixPath: this.shouldPersistOptionLabelFormatting()
+            optionLabelPrefixPath: this.shouldPersistOptionLabelPrefix()
                 ? this.optionLabelPrefixPath
                 : undefined,
             rowSelectionMode: this.sourceType === 'source' && this.bindingShape === 'scalar' && this.rowSelectionMode === 'selected'
@@ -15891,8 +15794,25 @@ 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');
+    }
+    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 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.';
     }
     showStaticOptionsEditor() {
         return this.sourceType === 'static' && this.widgetType !== 'table' && this.usesOptionMapping();
@@ -15922,12 +15842,12 @@ class DataPanelComponent {
     }
     getPreviewLabel(row) {
         const key = this.labelKey || 'label';
-        const value = resolvePathValue$1(row, key);
+        const value = resolvePathValue$2(row, key);
         return value === undefined || value === null || value === '' ? '(no label)' : String(value);
     }
     getPreviewValue(row) {
         const key = this.valueKey || 'value';
-        const value = resolvePathValue$1(row, key);
+        const value = resolvePathValue$2(row, key);
         return value === undefined || value === null ? '' : String(value);
     }
     availableRootPaths() {
@@ -15944,8 +15864,13 @@ class DataPanelComponent {
         const sample = this.extractPreviewRows(this.previewRows, this.effectiveRowsPath())[0];
         return sample ? collectArrayPaths(sample) : [];
     }
-    shouldPersistOptionLabelFormatting() {
-        return this.widgetType === 'select' && this.usesOptionMapping();
+    shouldPersistOptionLabelPrefix() {
+        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';
@@ -15955,7 +15880,7 @@ class DataPanelComponent {
         return normalized ? normalized : 'defaultValue';
     }
     readScalarTargetValue() {
-        const resolved = resolvePathValue$1(this.config, this.scalarTargetPath());
+        const resolved = resolvePathValue$2(this.config, this.scalarTargetPath());
         if (resolved !== undefined) {
             return resolved;
         }
@@ -15978,7 +15903,7 @@ class DataPanelComponent {
         }
         const flattened = [];
         for (const row of rows) {
-            const resolved = resolvePathValue$1(row, normalizedPath);
+            const resolved = resolvePathValue$2(row, normalizedPath);
             if (Array.isArray(resolved)) {
                 flattened.push(...resolved);
                 continue;
@@ -16266,18 +16191,9 @@ 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="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>
 
                              <div class="mt-3 flex flex-col gap-1">
                                  <label class="text-xs font-medium text-gray-500">Prefix Key</label>
@@ -16885,18 +16801,9 @@ 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="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>
 
                              <div class="mt-3 flex flex-col gap-1">
                                  <label class="text-xs font-medium text-gray-500">Prefix Key</label>
@@ -17674,11 +17581,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 +17644,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 +17663,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"
@@ -17832,7 +17746,7 @@ class RulesPanelComponent {
                      <div class="flex flex-col gap-2">
                          <div class="flex items-center gap-2 bg-amber-50 p-2 rounded-md border border-amber-100">
                              <span class="text-xs font-semibold text-amber-700 uppercase">Severity</span>
-                             <span class="text-xs text-amber-800 italic">Saved for backend validation only.</span>
+                             <span class="text-xs text-amber-800 italic">Error severity is emitted in runtime validation; warn stays informational.</span>
                          </div>
 
                          <div class="flex items-center gap-2">
@@ -17871,7 +17785,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"
@@ -17954,7 +17868,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                      <div class="flex flex-col gap-2">
                          <div class="flex items-center gap-2 bg-amber-50 p-2 rounded-md border border-amber-100">
                              <span class="text-xs font-semibold text-amber-700 uppercase">Severity</span>
-                             <span class="text-xs text-amber-800 italic">Saved for backend validation only.</span>
+                             <span class="text-xs text-amber-800 italic">Error severity is emitted in runtime validation; warn stays informational.</span>
                          </div>
 
                          <div class="flex items-center gap-2">
@@ -19546,34 +19460,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)
@@ -20220,13 +20135,13 @@ async function updateFieldSettings(state, args, widgetDefs = []) {
             updates[key] = value;
         }
     }
+    const html5Patch = {};
     if (typeof a['disabled'] === 'boolean') {
-        updates.disabled = a['disabled'];
+        html5Patch['disabled'] = a['disabled'];
     }
     if (typeof a['readonly'] === 'boolean') {
-        updates.readonly = a['readonly'];
+        html5Patch['readonly'] = a['readonly'];
     }
-    const html5Patch = {};
     const html5Keys = ['required', 'min', 'max', 'step', 'minLength', 'maxLength', 'pattern'];
     for (const key of html5Keys) {
         if (typeof a[key] !== 'undefined') {
@@ -22036,7 +21951,7 @@ const DATA_SOURCES_TEMPLATE = {
             "type": "text",
             "label": "Selected country code",
             "placeholder": "Auto-filled",
-            "readonly": true,
+            "html5": { "readonly": true },
             "helpText": "Updated by an event binding on the Country field."
         },
         {
@@ -22442,8 +22357,8 @@ const TRANSACTION_KYC_REVIEW_TEMPLATE = {
             "name": "clientDisplay",
             "type": "text",
             "label": "Client",
-            "readonly": true,
             "html5": {
+                "readonly": true,
                 "required": false
             },
             "rules": [
@@ -22489,7 +22404,7 @@ const TRANSACTION_KYC_REVIEW_TEMPLATE = {
             "type": "text",
             "label": "Balance",
             "defaultValue": "USD 24,580.00",
-            "readonly": true,
+            "html5": { "readonly": true },
             "rules": [
                 {
                     "id": "rule_balance_visible",
@@ -23257,7 +23172,7 @@ const JOURNEY_BRANCHING_TEMPLATE_STEP_TWO = {
             "name": "summaryCountryCode",
             "type": "text",
             "label": "Country Code",
-            "readonly": true,
+            "html5": { "readonly": true },
             "dataConfig": {
                 "type": "source",
                 "datasourceId": "journey_branch_ds_country_profile",
@@ -23462,7 +23377,7 @@ const JOURNEY_BRANCHING_TEMPLATE_STEP_THREE = {
             "name": "summaryCurrency",
             "type": "text",
             "label": "Currency",
-            "readonly": true,
+            "html5": { "readonly": true },
             "dataConfig": {
                 "type": "source",
                 "datasourceId": "journey_branch_ds_country_profile",
@@ -23475,7 +23390,7 @@ const JOURNEY_BRANCHING_TEMPLATE_STEP_THREE = {
             "name": "summaryTimezone",
             "type": "text",
             "label": "Timezone",
-            "readonly": true,
+            "html5": { "readonly": true },
             "dataConfig": {
                 "type": "source",
                 "datasourceId": "journey_branch_ds_country_profile",
@@ -31707,7 +31622,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                 }]
         }] });
 
-function parsePathSegments$1(path) {
+function parsePathSegments$2(path) {
     const segments = [];
     const matcher = /([^[.\]]+)|\[(\d+)\]/g;
     let match;
@@ -31723,14 +31638,14 @@ function parsePathSegments$1(path) {
     }
     return segments;
 }
-function resolvePathValue(value, path) {
+function resolvePathValue$1(value, path) {
     if (!path)
         return value;
     const normalizedPath = path.trim();
     if (!normalizedPath)
         return value;
     let current = value;
-    for (const segment of parsePathSegments$1(normalizedPath)) {
+    for (const segment of parsePathSegments$2(normalizedPath)) {
         if (current === null || current === undefined) {
             return undefined;
         }
@@ -31754,7 +31669,7 @@ function hasPathSyntax(path) {
         return false;
     return path.includes('.') || path.includes('[');
 }
-function valuesMatch(left, right) {
+function valuesMatch$1(left, right) {
     if (Object.is(left, right))
         return true;
     if (left === undefined || left === null || right === undefined || right === null)
@@ -31774,7 +31689,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);
@@ -31797,8 +31725,8 @@ class DataProvider {
         if (query.sort && query.sort.length > 0) {
             rows = [...rows].sort((a, b) => {
                 for (const s of query.sort) {
-                    const valA = resolvePathValue(a, s.column);
-                    const valB = resolvePathValue(b, s.column);
+                    const valA = resolvePathValue$1(a, s.column);
+                    const valB = resolvePathValue$1(b, s.column);
                     if (valA === valB)
                         continue;
                     const result = compareSortableValues(valA, valB);
@@ -31952,27 +31880,42 @@ class DefaultDataProvider extends DataProvider {
                 return cfg.staticValue;
             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 currentValue !== undefined ? currentValue : field.defaultValue;
-        }
-        const selectedRow = this.selectScalarRow(rows, cfg, engine);
-        if (cfg.rowSelectionMode === 'selected' && !selectedRow) {
+        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);
+        const resolvedValue = resolvePathValue$1(row, resolvedPath);
         if (resolvedPath && resolvedValue !== undefined) {
             return resolvedValue;
         }
-        if (resolvePathValue(row, 'value') !== undefined) {
-            return resolvePathValue(row, 'value');
+        if (resolvePathValue$1(row, 'value') !== undefined) {
+            return resolvePathValue$1(row, 'value');
         }
         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$1(candidate, prefixPath);
+            const value = toDisplayText(resolved);
+            if (value) {
+                return value;
+            }
+        }
+        return '';
+    }
     async resolveValue(field, value) {
         return String(value);
     }
@@ -32020,6 +31963,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) {
@@ -32056,7 +32011,7 @@ class DefaultDataProvider extends DataProvider {
         }
         const flattened = [];
         for (const row of rows) {
-            const resolved = resolvePathValue(row, normalizedPath);
+            const resolved = resolvePathValue$1(row, normalizedPath);
             if (Array.isArray(resolved)) {
                 for (const entry of resolved) {
                     flattened.push({
@@ -32084,7 +32039,7 @@ class DefaultDataProvider extends DataProvider {
         }
         const flattened = [];
         for (const row of rows) {
-            const resolved = resolvePathValue(row, normalizedPath);
+            const resolved = resolvePathValue$1(row, normalizedPath);
             if (Array.isArray(resolved)) {
                 for (const entry of resolved) {
                     flattened.push(this.toRowRecord(entry));
@@ -32112,7 +32067,7 @@ class DefaultDataProvider extends DataProvider {
         if (selectorValue === undefined || selectorValue === null || selectorValue === '') {
             return undefined;
         }
-        return rows.find(row => valuesMatch(resolvePathValue(row, cfg.selectionMatchPath), selectorValue));
+        return rows.find(row => valuesMatch$1(resolvePathValue$1(row, cfg.selectionMatchPath), selectorValue));
     }
     selectOptionContext(contexts, cfg, engine) {
         if (contexts.length === 0)
@@ -32129,7 +32084,7 @@ class DefaultDataProvider extends DataProvider {
         if (selectorValue === undefined || selectorValue === null || selectorValue === '') {
             return undefined;
         }
-        return contexts.find(context => valuesMatch(resolvePathValue(context.row, cfg.selectionMatchPath), selectorValue));
+        return contexts.find(context => valuesMatch$1(resolvePathValue$1(context.row, cfg.selectionMatchPath), selectorValue));
     }
     applyRowFilters(rows, filters, engine) {
         if (!filters || filters.length === 0)
@@ -32146,7 +32101,7 @@ class DefaultDataProvider extends DataProvider {
             const expected = this.resolveFilterValue(filter, engine);
             if (expected === undefined)
                 return true;
-            const actual = resolvePathValue(row, filter.column);
+            const actual = resolvePathValue$1(row, filter.column);
             const val = expected;
             switch (filter.op) {
                 case 'eq': return actual === val;
@@ -32218,17 +32173,16 @@ class DefaultDataProvider extends DataProvider {
     }
     mapRowToOption(row, labelKey, valueKey) {
         return {
-            label: String(resolvePathValue(row, labelKey) ?? ''),
-            value: this.toOptionValue(resolvePathValue(row, valueKey))
+            label: String(resolvePathValue$1(row, labelKey) ?? ''),
+            value: this.toOptionValue(resolvePathValue$1(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))
+            label: String(resolvePathValue$1(context.row, labelKey) ?? ''),
+            displayPrefix: prefix || undefined,
+            value: this.toOptionValue(resolvePathValue$1(context.row, valueKey))
         };
     }
     resolveOptionLabelPrefix(context, cfg) {
@@ -32239,39 +32193,14 @@ class DefaultDataProvider extends DataProvider {
         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) {
+            const resolved = resolvePathValue$1(candidate, prefixPath);
+            const value = toDisplayText(resolved);
+            if (value) {
                 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;
@@ -32430,12 +32359,68 @@ function getHeadingClass(level) {
     }
 }
 
+function parsePathSegments$1(path) {
+    const segments = [];
+    const matcher = /([^[.\]]+)|\[(\d+)\]/g;
+    let match;
+    while ((match = matcher.exec(path)) !== null) {
+        const [, property, index] = match;
+        if (property) {
+            segments.push(property);
+            continue;
+        }
+        if (index !== undefined) {
+            segments.push(index);
+        }
+    }
+    return segments;
+}
+function resolvePathValue(value, path) {
+    if (!path)
+        return value;
+    const normalizedPath = path.trim();
+    if (!normalizedPath)
+        return value;
+    let current = value;
+    for (const segment of parsePathSegments$1(normalizedPath)) {
+        if (current === null || current === undefined) {
+            return undefined;
+        }
+        if (Array.isArray(current)) {
+            const index = Number(segment);
+            if (!Number.isInteger(index)) {
+                return undefined;
+            }
+            current = current[index];
+            continue;
+        }
+        if (typeof current !== 'object') {
+            return undefined;
+        }
+        current = current[segment];
+    }
+    return current;
+}
+function valuesMatch(left, right) {
+    if (Object.is(left, right))
+        return true;
+    if (left === undefined || left === null || right === undefined || right === null)
+        return false;
+    const leftIsPrimitive = typeof left === 'string' || typeof left === 'number' || typeof left === 'boolean';
+    const rightIsPrimitive = typeof right === 'string' || typeof right === 'number' || typeof right === 'boolean';
+    if (leftIsPrimitive && rightIsPrimitive) {
+        return String(left) === String(right);
+    }
+    return false;
+}
 class TextFieldWidgetComponent {
     _config;
     hasReceivedConfig = false;
     dependencyValueSnapshot = new Map();
     isControlFocused = false;
     isControlHovered = false;
+    displayPrefix = '';
+    formattedNumberValue = '';
     set config(value) {
         const previousSignature = this.getDataConfigSignature(this._config);
         this._config = value;
@@ -32450,7 +32435,10 @@ class TextFieldWidgetComponent {
         if (this.dataProvider && this._config?.dataConfig) {
             this.seedDependencySnapshotFromEngine();
             void this.refreshValueFromDataSource();
+            return;
         }
+        this.displayPrefix = '';
+        this.syncFormattedNumberValue();
     }
     get config() {
         return this._config;
@@ -32473,6 +32461,12 @@ class TextFieldWidgetComponent {
     isColorField() {
         return this.config?.type === 'color';
     }
+    usesFormattedNumberInput() {
+        return this.config?.type === 'number' && usesFieldThousandSeparator(this.config);
+    }
+    hasDisplayPrefix() {
+        return !this.isTextarea() && !this.isColorField() && this.displayPrefix.trim().length > 0;
+    }
     getControlClass(multiline = false) {
         return getTextControlClass({
             invalid: !!this.error,
@@ -32510,6 +32504,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) {
@@ -32522,7 +32519,7 @@ class TextFieldWidgetComponent {
                     const datasourceId = this.config?.dataConfig?.datasourceId;
                     if (!datasourceId || update.datasourceId !== datasourceId)
                         return;
-                    void this.refreshValueFromDataSource();
+                    void this.refreshValueFromDataSource(true);
                 });
             }
             this.engine.valueChanges$
@@ -32530,7 +32527,7 @@ class TextFieldWidgetComponent {
                 .subscribe(values => {
                 this.syncEnabledState();
                 if (this.haveDependencyValuesChanged(values)) {
-                    void this.refreshValueFromDataSource();
+                    void this.refreshValueFromDataSource(true);
                 }
             });
             // Listen for submit attempts to show validation errors
@@ -32545,6 +32542,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 });
@@ -32556,6 +32556,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' });
     }
@@ -32565,6 +32566,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) {
@@ -32612,6 +32615,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);
     }
@@ -32619,7 +32631,7 @@ class TextFieldWidgetComponent {
         return this.engine ? this.engine.isFieldVisible(this.config.id) : true;
     }
     get enabled() {
-        if (this.config?.disabled)
+        if (isFieldDisabled(this.config))
             return false;
         return this.engine ? this.engine.isFieldEnabled(this.config.id) : true;
     }
@@ -32645,14 +32657,25 @@ class TextFieldWidgetComponent {
             this.control.disable({ emitEvent: false });
         }
     }
-    async refreshValueFromDataSource() {
+    async refreshValueFromDataSource(clearWhenMissing = false) {
         if (!this.dataProvider || !this.config.dataConfig)
             return;
         try {
+            if (clearWhenMissing && !(await this.hasSelectedRowMatch())) {
+                this.clearResolvedValue();
+                return;
+            }
             const val = await this.dataProvider.getValue(this.config, this.engine);
-            if (val === undefined || val === null)
+            this.displayPrefix = await this.dataProvider.getValueDisplayPrefix(this.config, this.engine);
+            if (val === undefined || val === null) {
+                if (!clearWhenMissing) {
+                    return;
+                }
+                this.clearResolvedValue();
                 return;
+            }
             this.control.setValue(val, { emitEvent: false });
+            this.syncFormattedNumberValue();
             if (this.engine) {
                 this.engine.setValue(this.config.name, val);
             }
@@ -32661,12 +32684,48 @@ class TextFieldWidgetComponent {
             // Ignore failed datasource refreshes; field remains editable.
         }
     }
+    clearResolvedValue() {
+        this.displayPrefix = '';
+        this.control.setValue(null, { emitEvent: false });
+        this.syncFormattedNumberValue();
+        if (this.engine) {
+            this.engine.setValue(this.config.name, null);
+        }
+    }
+    async hasSelectedRowMatch() {
+        const cfg = this.config.dataConfig;
+        if (!cfg
+            || cfg.rowSelectionMode !== 'selected'
+            || !cfg.selectionFieldId
+            || !cfg.selectionMatchPath
+            || !this.engine) {
+            return true;
+        }
+        const selectorField = this.engine.getSchema().fields.find(field => field.id === cfg.selectionFieldId);
+        if (!selectorField) {
+            return false;
+        }
+        const selectorValue = this.engine.getValue(selectorField.name);
+        if (selectorValue === undefined || selectorValue === null || selectorValue === '') {
+            return false;
+        }
+        const rows = await this.dataProvider.getList(this.config, this.engine);
+        return rows.some(row => valuesMatch(resolvePathValue(row, cfg.selectionMatchPath), selectorValue));
+    }
     getDataConfigSignature(config) {
         if (!config)
             return '';
         const dataConfig = config.dataConfig;
         if (!dataConfig) {
-            return `${config.id}::no-data-config`;
+            return [
+                config.id,
+                config.name,
+                config.type,
+                String(config.html5?.readonly ?? ''),
+                String(config.html5?.disabled ?? ''),
+                String(config.useThousandSeparator ?? ''),
+                'no-data-config'
+            ].join('::');
         }
         const sourceKey = dataConfig.type === 'source' || dataConfig.type === 'global' || dataConfig.type === 'api'
             ? String(dataConfig.datasourceId ?? '')
@@ -32674,13 +32733,18 @@ class TextFieldWidgetComponent {
         return [
             config.id,
             config.name,
+            String(config.html5?.readonly ?? ''),
+            String(config.html5?.disabled ?? ''),
             dataConfig.type ?? '',
             sourceKey,
             String(dataConfig.valueKey ?? ''),
             String(dataConfig.rowsPath ?? ''),
+            String(dataConfig.optionLabelPrefixPath ?? ''),
+            String(dataConfig.optionLabelPrefixFieldId ?? ''),
             String(dataConfig.rowSelectionMode ?? ''),
             String(dataConfig.selectionFieldId ?? ''),
             String(dataConfig.selectionMatchPath ?? ''),
+            String(config.useThousandSeparator ?? ''),
             (dataConfig.filters ?? []).map(filter => `${filter.column}:${filter.valueFrom ?? ''}:${filter.fieldId ?? ''}`).join('|')
         ].join('::');
     }
@@ -32733,6 +32797,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"
@@ -32762,7 +32879,7 @@ class TextFieldWidgetComponent {
             (blur)="onBlur()"
             (mouseenter)="onMouseEnter()"
             (mouseleave)="onMouseLeave()"
-            [readonly]="config.readonly"
+            [readonly]="config.html5?.readonly"
             [attr.aria-required]="required"
             [attr.aria-invalid]="!!error"
             [attr.aria-describedby]="getAriaDescribedBy()"
@@ -32783,7 +32900,7 @@ class TextFieldWidgetComponent {
             (blur)="onBlur()"
             (mouseenter)="onMouseEnter()"
             (mouseleave)="onMouseLeave()"
-            [readonly]="config.readonly"
+            [readonly]="config.html5?.readonly"
             [attr.aria-required]="required"
             [attr.aria-invalid]="!!error"
             [attr.aria-describedby]="getAriaDescribedBy()"
@@ -32795,9 +32912,48 @@ class TextFieldWidgetComponent {
             [cpAlphaChannel]="'disabled'"
             [cpOutputFormat]="'hex'"
             [cpFallbackColor]="'#000000'"
-            [cpDisabled]="config.readonly || !enabled"
+            [cpDisabled]="config.html5?.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.html5?.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"
@@ -32808,13 +32964,13 @@ class TextFieldWidgetComponent {
             (blur)="onBlur()"
             (mouseenter)="onMouseEnter()"
             (mouseleave)="onMouseLeave()"
-            [readonly]="config.readonly"
+            [readonly]="config.html5?.readonly"
             [attr.aria-required]="required"
             [attr.aria-invalid]="!!error"
             [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"
@@ -32866,7 +33022,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
             (blur)="onBlur()"
             (mouseenter)="onMouseEnter()"
             (mouseleave)="onMouseLeave()"
-            [readonly]="config.readonly"
+            [readonly]="config.html5?.readonly"
             [attr.aria-required]="required"
             [attr.aria-invalid]="!!error"
             [attr.aria-describedby]="getAriaDescribedBy()"
@@ -32887,7 +33043,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
             (blur)="onBlur()"
             (mouseenter)="onMouseEnter()"
             (mouseleave)="onMouseLeave()"
-            [readonly]="config.readonly"
+            [readonly]="config.html5?.readonly"
             [attr.aria-required]="required"
             [attr.aria-invalid]="!!error"
             [attr.aria-describedby]="getAriaDescribedBy()"
@@ -32899,9 +33055,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
             [cpAlphaChannel]="'disabled'"
             [cpOutputFormat]="'hex'"
             [cpFallbackColor]="'#000000'"
-            [cpDisabled]="config.readonly || !enabled"
+            [cpDisabled]="config.html5?.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.html5?.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"
@@ -32912,13 +33107,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
             (blur)="onBlur()"
             (mouseenter)="onMouseEnter()"
             (mouseleave)="onMouseLeave()"
-            [readonly]="config.readonly"
+            [readonly]="config.html5?.readonly"
             [attr.aria-required]="required"
             [attr.aria-invalid]="!!error"
             [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"
@@ -33025,12 +33220,12 @@ class FileUploadWidgetComponent {
         return this.engine ? this.engine.isFieldVisible(this.config.id) : true;
     }
     get enabled() {
-        if (this.config?.disabled)
+        if (isFieldDisabled(this.config))
             return false;
         return this.engine ? this.engine.isFieldEnabled(this.config.id) : true;
     }
     get isDisabled() {
-        return !this.enabled || !!this.config?.readonly;
+        return !this.enabled || isFieldReadonly(this.config);
     }
     get required() {
         return this.engine ? this.engine.isFieldRequired(this.config.id) : !!this.config?.html5?.required;
@@ -33521,7 +33716,7 @@ class SelectWidgetComponent {
                     this.runtimeOptionsLoaded = false;
                     this.currentSearchTerm = '';
                     this.setOptionsFromRaw([]);
-                    void this.loadOptions(this.currentSearchTerm);
+                    void this.loadOptions(this.currentSearchTerm, false, true);
                 });
             }
         }
@@ -33664,7 +33859,7 @@ class SelectWidgetComponent {
         return this.engine ? this.engine.isFieldVisible(this.config.id) : true;
     }
     get enabled() {
-        if (this.config?.disabled)
+        if (isFieldDisabled(this.config))
             return false;
         return this.engine ? this.engine.isFieldEnabled(this.config.id) : true;
     }
@@ -33721,7 +33916,7 @@ class SelectWidgetComponent {
         event.preventDefault();
     }
     onPillClick() {
-        if (this.config.readonly) {
+        if (isFieldReadonly(this.config)) {
             return;
         }
         this.onClick();
@@ -33788,7 +33983,7 @@ class SelectWidgetComponent {
         assign('--fd-select-icon-color', controlStyles['iconColor'] ?? controlStyles['color']);
         return vars;
     }
-    async loadOptions(term = '', isSearch = false) {
+    async loadOptions(term = '', isSearch = false, clearStaleSelection = false) {
         if (!this.config)
             return;
         const reqId = ++this.requestId;
@@ -33806,8 +34001,17 @@ class SelectWidgetComponent {
                 opts = await this.dataProvider.getOptions(this.config, this.engine);
             }
             if (this.requestId === reqId) {
-                this.setOptionsFromRaw(this.withSelectedValueFallbackOptions(opts));
-                this.syncStoredFieldLabel(this.control.value);
+                const selectedValue = this.resolveSelectedValueForFallback();
+                const shouldClearStaleSelection = clearStaleSelection
+                    && this.hasMeaningfulValue(selectedValue)
+                    && !this.hasOptionValue(opts, this.toComparableOptionValue(selectedValue));
+                this.setOptionsFromRaw(shouldClearStaleSelection ? opts : this.withSelectedValueFallbackOptions(opts));
+                if (shouldClearStaleSelection) {
+                    this.control.setValue(null);
+                }
+                else {
+                    this.syncStoredFieldLabel(this.control.value);
+                }
                 this.loading = false;
                 this.loadError = null;
                 this.cdr.markForCheck();
@@ -33914,6 +34118,9 @@ class SelectWidgetComponent {
                 config.id,
                 config.name,
                 config.type,
+                String(config.html5?.readonly ?? ''),
+                String(config.html5?.disabled ?? ''),
+                String(config.useThousandSeparator ?? ''),
                 'no-data-config',
                 fieldStaticOptions
             ].join('::');
@@ -33926,11 +34133,13 @@ class SelectWidgetComponent {
             config.id,
             config.name,
             config.type,
+            String(config.html5?.readonly ?? ''),
+            String(config.html5?.disabled ?? ''),
             dataConfig.type ?? '',
             String(dataConfig.datasourceId ?? ''),
             String(dataConfig.labelKey ?? ''),
             String(dataConfig.valueKey ?? ''),
-            String(dataConfig.formatNumericOptionLabels ?? ''),
+            String(config.useThousandSeparator ?? ''),
             String(dataConfig.optionLabelPrefixFieldId ?? ''),
             String(dataConfig.searchEnabled ?? ''),
             String(dataConfig.optionsLimit ?? ''),
@@ -33983,15 +34192,18 @@ class SelectWidgetComponent {
     applyDisplayFormatting() {
         this.options = this.rawOptions.map(option => ({
             ...option,
-            label: this.formatOptionLabel(option.label)
+            label: this.formatOptionLabel(option)
         }));
     }
-    formatOptionLabel(label) {
-        const formattedLabel = this.config.dataConfig?.formatNumericOptionLabels
+    formatOptionLabel(option) {
+        const label = option.label;
+        const formattedLabel = usesFieldThousandSeparator(this.config)
             ? this.formatNumericLabel(label)
             : label;
-        const prefix = this.resolveOptionLabelPrefix();
-        return prefix ? `${prefix} ${formattedLabel}` : formattedLabel;
+        const prefixParts = [option.displayPrefix, this.resolveOptionLabelPrefix()]
+            .map(value => value?.trim())
+            .filter((value) => !!value);
+        return prefixParts.length > 0 ? `${prefixParts.join(' ')} ${formattedLabel}` : formattedLabel;
     }
     resolveOptionLabelPrefix() {
         const prefixFieldId = this.config.dataConfig?.optionLabelPrefixFieldId;
@@ -34074,6 +34286,12 @@ class SelectWidgetComponent {
     hasOptionValue(options, value) {
         return options.some(option => Object.is(option.value, value) || String(option.value) === String(value));
     }
+    toComparableOptionValue(value) {
+        if (typeof value === 'number' && Number.isFinite(value)) {
+            return value;
+        }
+        return String(value ?? '');
+    }
     resolveSelectedValueForFallback() {
         const controlValue = this.control.value;
         if (this.hasMeaningfulValue(controlValue)) {
@@ -34118,7 +34336,7 @@ class SelectWidgetComponent {
         if (this.config.dataConfig?.optionLabelPrefixFieldId) {
             return this.resolveOptionLabelPrefix().length === 0;
         }
-        return this.config.dataConfig?.formatNumericOptionLabels !== true;
+        return !usesFieldThousandSeparator(this.config);
     }
     setStoredFieldLabel(label) {
         if (!this.engine || typeof this.engine.setFieldLabel !== 'function') {
@@ -34156,8 +34374,8 @@ class SelectWidgetComponent {
           [loadingText]="'Loading options...'"
           [notFoundText]="loadError || 'No options found'"
           [searchable]="isSearchable()"
-          [clearable]="!required && !config.readonly && !hasPillLabel()"
-          [readonly]="config.readonly"
+          [clearable]="!required && !config.html5?.readonly && !hasPillLabel()"
+          [readonly]="config.html5?.readonly"
           [labelForId]="fieldId"
           [inputAttrs]="getInputAttributes()"
           [typeahead]="searchTerms$"
@@ -34183,7 +34401,7 @@ class SelectWidgetComponent {
             class="fd-select-pill"
             [ngStyle]="getPillStyles()"
             data-fd-select-pill
-            [disabled]="config.readonly"
+            [disabled]="config.html5?.readonly"
             (mousedown)="onPillMouseDown($event)"
             (click)="onPillClick()">
             <span class="fd-select-pill__label">{{ pillLabel() }}</span>
@@ -34236,8 +34454,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
           [loadingText]="'Loading options...'"
           [notFoundText]="loadError || 'No options found'"
           [searchable]="isSearchable()"
-          [clearable]="!required && !config.readonly && !hasPillLabel()"
-          [readonly]="config.readonly"
+          [clearable]="!required && !config.html5?.readonly && !hasPillLabel()"
+          [readonly]="config.html5?.readonly"
           [labelForId]="fieldId"
           [inputAttrs]="getInputAttributes()"
           [typeahead]="searchTerms$"
@@ -34263,7 +34481,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
             class="fd-select-pill"
             [ngStyle]="getPillStyles()"
             data-fd-select-pill
-            [disabled]="config.readonly"
+            [disabled]="config.html5?.readonly"
             (mousedown)="onPillMouseDown($event)"
             (click)="onPillClick()">
             <span class="fd-select-pill__label">{{ pillLabel() }}</span>
@@ -34358,7 +34576,7 @@ class SearchWidgetComponent {
         return this.engine ? this.engine.isFieldVisible(this.config.id) : true;
     }
     get enabled() {
-        if (this.config?.disabled)
+        if (isFieldDisabled(this.config))
             return false;
         return this.engine ? this.engine.isFieldEnabled(this.config.id) : true;
     }
@@ -34421,7 +34639,7 @@ class SearchWidgetComponent {
                     const datasourceId = this.config?.dataConfig?.datasourceId;
                     if (!datasourceId || update.datasourceId !== datasourceId)
                         return;
-                    void this.refreshForCurrentQuery();
+                    void this.refreshForCurrentQuery(true);
                 });
             }
             this.engine.valueChanges$
@@ -34565,7 +34783,7 @@ class SearchWidgetComponent {
             this.queryControl.disable({ emitEvent: false });
         }
     }
-    async refreshForCurrentQuery() {
+    async refreshForCurrentQuery(clearStaleSelection = false) {
         const query = this.queryControl.value ?? '';
         if (!this.shouldQuery(query)) {
             this.options = [];
@@ -34575,7 +34793,7 @@ class SearchWidgetComponent {
             this.cdr.markForCheck();
             return;
         }
-        await this.loadOptions(query);
+        await this.loadOptions(query, clearStaleSelection);
     }
     async handleQueryChange(query) {
         if (this.selectingOption) {
@@ -34595,7 +34813,7 @@ class SearchWidgetComponent {
         }
         await this.loadOptions(normalizedQuery);
     }
-    async loadOptions(term) {
+    async loadOptions(term, clearStaleSelection = false) {
         const requestId = ++this.requestId;
         this.loading = true;
         this.loadError = null;
@@ -34609,6 +34827,15 @@ class SearchWidgetComponent {
                 return;
             }
             this.options = this.normalizeOptions(options);
+            if (clearStaleSelection && this.isSelectedOptionState() && !this.hasOptionValue(this.options, this.control.value)) {
+                this.queryControl.setValue('', { emitEvent: false });
+                this.control.setValue(null);
+                this.loading = false;
+                this.loadError = null;
+                this.activeOptionIndex = -1;
+                this.cdr.markForCheck();
+                return;
+            }
             this.activeOptionIndex = this.options.length > 0 ? 0 : -1;
             this.loading = false;
             this.loadError = null;
@@ -34640,6 +34867,31 @@ class SearchWidgetComponent {
         const minChars = this.getMinChars();
         return (query ?? '').trim().length >= minChars;
     }
+    isSelectedOptionState() {
+        if (!this.hasMeaningfulValue(this.control.value)) {
+            return false;
+        }
+        const storedLabel = this.getStoredFieldLabel();
+        if (typeof storedLabel === 'string' && storedLabel.length > 0) {
+            return true;
+        }
+        return String(this.control.value ?? '') !== String(this.queryControl.value ?? '');
+    }
+    hasOptionValue(options, value) {
+        if (!this.hasMeaningfulValue(value)) {
+            return false;
+        }
+        return options.some(option => Object.is(option.value, value) || String(option.value) === String(value));
+    }
+    hasMeaningfulValue(value) {
+        if (value === undefined || value === null)
+            return false;
+        if (typeof value === 'string')
+            return value.length > 0;
+        if (Array.isArray(value))
+            return value.length > 0;
+        return true;
+    }
     getMinChars() {
         return this.toSafeNonNegativeInt(this.config?.['searchMinChars'], 1);
     }
@@ -34707,7 +34959,7 @@ class SearchWidgetComponent {
           type="search"
           [placeholder]="config.placeholder || 'Search...'"
           [formControl]="queryControl"
-          [readonly]="config.readonly"
+          [readonly]="config.html5?.readonly"
           [attr.aria-required]="required"
           [attr.aria-invalid]="!!error"
           [attr.aria-describedby]="getAriaDescribedBy()"
@@ -34786,7 +35038,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
           type="search"
           [placeholder]="config.placeholder || 'Search...'"
           [formControl]="queryControl"
-          [readonly]="config.readonly"
+          [readonly]="config.html5?.readonly"
           [attr.aria-required]="required"
           [attr.aria-invalid]="!!error"
           [attr.aria-describedby]="getAriaDescribedBy()"
@@ -35073,7 +35325,7 @@ class TreeSelectWidgetComponent {
         expandRecursive(filtered);
     }
     toggleDropdown(e) {
-        if (this.config.disabled || this.config.readonly)
+        if (isFieldDisabled(this.config) || isFieldReadonly(this.config))
             return;
         this.engine?.emitUiEvent({ fieldId: this.config.id, fieldName: this.config.name, type: 'click' });
         if (this.isOpen) {
@@ -35185,8 +35437,8 @@ class TreeSelectWidgetComponent {
         <!-- Dropdown Trigger -->
         <div class="relative group" (click)="toggleDropdown($event)">
             <div class="flex items-center justify-between w-full rounded-md border text-sm px-3 py-2 cursor-pointer transition-colors"
-                [class.bg-gray-50]="config.disabled"
-                [class.cursor-not-allowed]="config.disabled"
+                [class.bg-gray-50]="config.html5?.disabled"
+                [class.cursor-not-allowed]="config.html5?.disabled"
                 [class.border-gray-300]="!isInvalid && !isOpen"
                 [class.border-blue-500]="isOpen"
                 [class.ring-2]="isOpen"
@@ -35289,8 +35541,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
         <!-- Dropdown Trigger -->
         <div class="relative group" (click)="toggleDropdown($event)">
             <div class="flex items-center justify-between w-full rounded-md border text-sm px-3 py-2 cursor-pointer transition-colors"
-                [class.bg-gray-50]="config.disabled"
-                [class.cursor-not-allowed]="config.disabled"
+                [class.bg-gray-50]="config.html5?.disabled"
+                [class.cursor-not-allowed]="config.html5?.disabled"
                 [class.border-gray-300]="!isInvalid && !isOpen"
                 [class.border-blue-500]="isOpen"
                 [class.ring-2]="isOpen"
@@ -35540,7 +35792,7 @@ class RadioWidgetComponent {
         return this.engine ? this.engine.isFieldVisible(this.config.id) : true;
     }
     get enabled() {
-        if (this.config?.disabled)
+        if (isFieldDisabled(this.config))
             return false;
         return this.engine ? this.engine.isFieldEnabled(this.config.id) : true;
     }
@@ -35856,7 +36108,7 @@ class CheckboxGroupWidgetComponent {
         return this.engine ? this.engine.isFieldVisible(this.config.id) : true;
     }
     get enabled() {
-        if (this.config?.disabled)
+        if (isFieldDisabled(this.config))
             return false;
         return this.engine ? this.engine.isFieldEnabled(this.config.id) : true;
     }
@@ -36092,7 +36344,7 @@ class CheckboxWidgetComponent {
         return this.engine ? this.engine.isFieldVisible(this.config.id) : true;
     }
     get enabled() {
-        if (this.config?.disabled)
+        if (isFieldDisabled(this.config))
             return false;
         return this.engine ? this.engine.isFieldEnabled(this.config.id) : true;
     }
@@ -36326,7 +36578,7 @@ class RepeatableGroupWidgetComponent {
         return this.engine ? this.engine.isFieldVisible(this.config.id) : true;
     }
     get enabled() {
-        if (this.config?.disabled)
+        if (isFieldDisabled(this.config))
             return false;
         return this.engine ? this.engine.isFieldEnabled(this.config.id) : true;
     }
@@ -37660,6 +37912,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: 'html5.readonly', type: 'checkbox', label: 'Read Only' },
+    { key: 'html5.disabled', type: 'checkbox', label: 'Disabled' }
+];
 const COMMON_BASIC_FIELDS = [
     { key: 'name', type: 'text', label: 'Field Key (Name)' },
     { key: 'label', type: 'text', label: 'Label' },
@@ -37667,6 +37923,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 = [
@@ -37675,6 +37932,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 = [
@@ -37699,9 +37957,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,
@@ -37718,16 +37974,10 @@ const BASE_REQUIRED_FIELD = {
     label: 'Required',
     helpText: 'Base required state; Rules can override this dynamically.'
 };
-const CUSTOM_VALIDATION_RULES_FIELD = {
-    key: 'validation',
-    type: 'validators-editor',
-    label: 'Custom Validation Rules',
-    helpText: 'Use these for field-level validation checks. Use the Rules tab for conditional behaviour.'
-};
 function createValidationSection(...fields) {
     return {
         label: 'Validation',
-        fields: [...fields, CUSTOM_VALIDATION_RULES_FIELD]
+        fields
     };
 }
 const TEXT_VALIDATION_SECTION = createValidationSection(BASE_REQUIRED_FIELD, { key: 'html5.minLength', type: 'number', label: 'Min Length' }, { key: 'html5.maxLength', type: 'number', label: 'Max Length' }, { key: 'html5.pattern', type: 'text', label: 'Pattern (regex)' });
@@ -37737,6 +37987,28 @@ const TIME_VALIDATION_SECTION = createValidationSection(BASE_REQUIRED_FIELD, { k
 const DATETIME_VALIDATION_SECTION = createValidationSection(BASE_REQUIRED_FIELD, { key: 'html5.min', type: 'text', label: 'Earliest (YYYY-MM-DDTHH:MM)' }, { key: 'html5.max', type: 'text', label: 'Latest (YYYY-MM-DDTHH:MM)' });
 const SELECT_VALIDATION_SECTION = createValidationSection(BASE_REQUIRED_FIELD);
 const FILE_VALIDATION_SECTION = createValidationSection(BASE_REQUIRED_FIELD);
+const NUMBER_DISPLAY_SECTION = {
+    label: 'Display',
+    fields: [
+        {
+            key: 'useThousandSeparator',
+            type: 'checkbox',
+            label: 'Show thousand separators',
+            helpText: 'Formats grouped digits in the visible field value without changing the stored number.'
+        }
+    ]
+};
+const SELECT_DISPLAY_SECTION = {
+    label: 'Display',
+    fields: [
+        {
+            key: 'useThousandSeparator',
+            type: 'checkbox',
+            label: 'Show thousand separators for numeric labels',
+            helpText: 'Formats numeric option labels without changing the stored option value.'
+        }
+    ]
+};
 const BUTTON_VARIANT_OPTIONS = [
     { label: 'Primary (Blue)', value: 'primary' },
     { label: 'Secondary (Outline)', value: 'secondary' }
@@ -37752,6 +38024,7 @@ const BUTTON_PROPERTIES = [
         label: 'Style',
         fields: [
             { key: 'variant', type: 'select', label: 'Variant', options: BUTTON_VARIANT_OPTIONS },
+            ...COMMON_INTERACTIVITY_FIELDS,
             ...COMMON_APPEARANCE_FIELDS
         ]
     },
@@ -37770,6 +38043,7 @@ const IMAGE_BUTTON_PROPERTIES = [
         label: 'Style',
         fields: [
             { key: 'variant', type: 'select', label: 'Variant', options: BUTTON_VARIANT_OPTIONS },
+            ...COMMON_INTERACTIVITY_FIELDS,
             ...COMMON_APPEARANCE_FIELDS
         ]
     },
@@ -37819,6 +38093,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
         ]
     },
@@ -37942,6 +38217,7 @@ const FIELD_WIDGETS = [
                 ]
             },
             NUMBER_VALIDATION_SECTION,
+            NUMBER_DISPLAY_SECTION,
             { label: 'Appearance', fields: COMMON_APPEARANCE_FIELDS },
             ...COMMON_STYLE_SECTIONS
         ]
@@ -38403,6 +38679,7 @@ const FIELD_WIDGETS = [
             },
             // Options are now handled in Data Tab
             SELECT_VALIDATION_SECTION,
+            SELECT_DISPLAY_SECTION,
             { label: 'Appearance', fields: COMMON_APPEARANCE_FIELDS },
             ...COMMON_STYLE_SECTIONS
         ]
@@ -41218,5 +41495,5 @@ function provideHttpDataSourceClient(config) {
  * Generated bundle index. Do not edit.
  */
 
-export { APPEARANCE_FIELDS, AiToolRegistryService, CONTENT_TEXT_CLASS, CONTENT_TEXT_MUTED_CLASS, CORE_DESIGNER_PLUGINS, CURRENT_SCHEMA_VERSION, DATA_PROVIDER, DATA_SOURCE_CLIENT, DEFAULT_TEMPLATE_LIBRARY, DEFAULT_WEBSITE_SECTIONS, DEFAULT_WIDGET_PACKS, DESIGNER_PLUGINS, DESIGNER_SECTIONS, DataCatalog, DataPanelComponent, DataProvider, DefaultDataProvider, DefaultDataSourceClient, DefaultFileUploadClient, DesignerContext, DesignerStateService, DynamicPropertiesComponent, EFFECTS_FIELDS, EMAIL_SAFE_STYLE_SECTIONS, EMAIL_WIDGETS, EmailRendererComponent, EventsPanelComponent, EventsWorkspaceComponent, FIELD_CHOICE_LABEL_CLASS, FIELD_CHOICE_SURFACE_CLASS, FIELD_CONTAINER_CLASS, FIELD_ERROR_CLASS, FIELD_HELP_CLASS, FIELD_LABEL_CLASS, FIELD_OPTION_CLASS, FIELD_REQUIRED_CLASS, FIELD_RESULTS_PANEL_CLASS, FIELD_WIDGETS, FILE_UPLOAD_CARD_CLASS, FILE_UPLOAD_CLIENT, FORM_DESIGNER_AI_TOOL_PLUGIN, FULL_WEB_STYLE_SECTIONS, FieldPaletteComponent, FormDesignerAiFeatureStateService, FormDesignerShellComponent, FormEngine, FormJourneyStateService, FormJourneyViewerComponent, FormViewerComponent, GlobalDataManagerComponent, HTTP_DATA_SOURCE_CLIENT_CONFIG, HttpDataSourceClient, InMemoryDataCatalogService, InspectorAdvancedSectionComponent, InspectorBackgroundsSectionComponent, InspectorBordersSectionComponent, InspectorEffectsSectionComponent, InspectorLayoutSectionComponent, InspectorPositionSectionComponent, InspectorSizeSectionComponent, InspectorSpacingSectionComponent, InspectorSpinInputComponent, InspectorTypographySectionComponent, JsonFormDesignerComponent, JsonFormRendererComponent, LAYOUT_FIELDS, LayoutCanvasComponent, LayoutNodeComponent, OUTLINED_FIELD_BORDER_WIDTH, OUTLINED_FIELD_IDLE_BORDER_COLOR, OUTLINED_FIELD_INTERACTIVE_BORDER_COLOR, OUTLINED_FIELD_INVALID_BORDER_COLOR, PAGE_WIDGETS, PropertiesPanelComponent, RulesPanelComponent, RuntimeFieldDataAccessRegistryService, SELECT_THEME_HOOKS, SELECT_THEME_TOKENS, SPACING_BOX_MODEL_FIELD, SPACING_MARGIN_FIELDS, SPACING_PADDING_FIELDS, STANDARD_FORM_STYLE_SECTIONS, STYLE_APPEARANCE_SECTION, STYLE_EFFECTS_SECTION, STYLE_LAYOUT_SECTION, STYLE_SECTIONS, STYLE_SPACING_SECTION, STYLE_TRANSFORM_SECTION, STYLE_TYPOGRAPHY_SECTION, TABLE_CELL_CLASS, TABLE_EMPTY_CLASS, TABLE_GRID_CLASS, TABLE_HEAD_CELL_CLASS, TABLE_HEAD_CLASS, TABLE_ICON_BUTTON_CLASS, TABLE_ROOT_CLASS, TABLE_ROW_CLASS, TABLE_TOOLBAR_CLASS, TRANSFORM_FIELDS, TYPOGRAPHY_FIELDS, ThemeService, UiAccordionComponent, UiBoxModelComponent, UiColorSwatchComponent, UiDimensionComponent, UiEdgeBoxComponent, UiFieldWrapperComponent, UiInputComponent, UiRangeNumberComponent, UiSelectIconComponent, UiTabComponent, UiTabsComponent, WIDGET_DEFINITIONS, WIDGET_ID_SEPARATOR, WebsiteBrickStudioComponent, WebsiteDesignerShellComponent, WebsitePreviewShellComponent, WebsiteProjectService, WidgetDefinitionResolverService, WidgetInspectorComponent, appendSectionToSchema, buildWidgetId, checkSchemaForApiOnlySources, createDefaultWebsiteBrick, createDefaultWebsiteBricks, createDefaultWebsiteTheme, createEmptySchema, createFormEngine, createFormJourneyPage, createFormJourneyProject, createPluginContext, createWebsiteBrick, createWebsitePage, createWebsiteProject, defineWidget, flattenPluginWidgets, getButtonClass, getChoiceControlClass, getEffectiveDataConfig, getFileInputClass, getFileUploadShellClass, getHeadingClass, getOutlinedFieldInlineStyle, getTextControlClass, getWidgetsForFlavor, hasWrapperSurfaceStyles, inferSchema, isFormJourneyProject, isWidgetVisibleInPalette, mergeAndNormalize, normalizeRuntimeOptions, normalizeStyle$1 as normalizeStyle, normalizeToJourney, parseCsv, parseJsonArray, parseSchema, provideDesignerPlugins, provideFormDesignerAngaiFeature, provideHttpDataSourceClient, serializeSchema, slugifyId, splitControlSurfaceStyles, stripEmbeddedSourceData, unwrapSinglePageJourney };
+export { APPEARANCE_FIELDS, AiToolRegistryService, CONTENT_TEXT_CLASS, CONTENT_TEXT_MUTED_CLASS, CORE_DESIGNER_PLUGINS, CURRENT_SCHEMA_VERSION, DATA_PROVIDER, DATA_SOURCE_CLIENT, DEFAULT_TEMPLATE_LIBRARY, DEFAULT_WEBSITE_SECTIONS, DEFAULT_WIDGET_PACKS, DESIGNER_PLUGINS, DESIGNER_SECTIONS, DataCatalog, DataPanelComponent, DataProvider, DefaultDataProvider, DefaultDataSourceClient, DefaultFileUploadClient, DesignerContext, DesignerStateService, DynamicPropertiesComponent, EFFECTS_FIELDS, EMAIL_SAFE_STYLE_SECTIONS, EMAIL_WIDGETS, EmailRendererComponent, EventsPanelComponent, EventsWorkspaceComponent, FIELD_CHOICE_LABEL_CLASS, FIELD_CHOICE_SURFACE_CLASS, FIELD_CONTAINER_CLASS, FIELD_ERROR_CLASS, FIELD_HELP_CLASS, FIELD_LABEL_CLASS, FIELD_OPTION_CLASS, FIELD_REQUIRED_CLASS, FIELD_RESULTS_PANEL_CLASS, FIELD_WIDGETS, FILE_UPLOAD_CARD_CLASS, FILE_UPLOAD_CLIENT, FORM_DESIGNER_AI_TOOL_PLUGIN, FULL_WEB_STYLE_SECTIONS, FieldPaletteComponent, FormDesignerAiFeatureStateService, FormDesignerShellComponent, FormEngine, FormJourneyStateService, FormJourneyViewerComponent, FormViewerComponent, GlobalDataManagerComponent, HTTP_DATA_SOURCE_CLIENT_CONFIG, HttpDataSourceClient, InMemoryDataCatalogService, InspectorAdvancedSectionComponent, InspectorBackgroundsSectionComponent, InspectorBordersSectionComponent, InspectorEffectsSectionComponent, InspectorLayoutSectionComponent, InspectorPositionSectionComponent, InspectorSizeSectionComponent, InspectorSpacingSectionComponent, InspectorSpinInputComponent, InspectorTypographySectionComponent, JsonFormDesignerComponent, JsonFormRendererComponent, LAYOUT_FIELDS, LayoutCanvasComponent, LayoutNodeComponent, OUTLINED_FIELD_BORDER_WIDTH, OUTLINED_FIELD_IDLE_BORDER_COLOR, OUTLINED_FIELD_INTERACTIVE_BORDER_COLOR, OUTLINED_FIELD_INVALID_BORDER_COLOR, PAGE_WIDGETS, PropertiesPanelComponent, RulesPanelComponent, RuntimeFieldDataAccessRegistryService, SELECT_THEME_HOOKS, SELECT_THEME_TOKENS, SPACING_BOX_MODEL_FIELD, SPACING_MARGIN_FIELDS, SPACING_PADDING_FIELDS, STANDARD_FORM_STYLE_SECTIONS, STYLE_APPEARANCE_SECTION, STYLE_EFFECTS_SECTION, STYLE_LAYOUT_SECTION, STYLE_SECTIONS, STYLE_SPACING_SECTION, STYLE_TRANSFORM_SECTION, STYLE_TYPOGRAPHY_SECTION, TABLE_CELL_CLASS, TABLE_EMPTY_CLASS, TABLE_GRID_CLASS, TABLE_HEAD_CELL_CLASS, TABLE_HEAD_CLASS, TABLE_ICON_BUTTON_CLASS, TABLE_ROOT_CLASS, TABLE_ROW_CLASS, TABLE_TOOLBAR_CLASS, TRANSFORM_FIELDS, TYPOGRAPHY_FIELDS, ThemeService, UiAccordionComponent, UiBoxModelComponent, UiColorSwatchComponent, UiDimensionComponent, UiEdgeBoxComponent, UiFieldWrapperComponent, UiInputComponent, UiRangeNumberComponent, UiSelectIconComponent, UiTabComponent, UiTabsComponent, WIDGET_DEFINITIONS, WIDGET_ID_SEPARATOR, WebsiteBrickStudioComponent, WebsiteDesignerShellComponent, WebsitePreviewShellComponent, WebsiteProjectService, WidgetDefinitionResolverService, WidgetInspectorComponent, appendSectionToSchema, buildWidgetId, checkSchemaForApiOnlySources, createDefaultWebsiteBrick, createDefaultWebsiteBricks, createDefaultWebsiteTheme, createEmptySchema, createFormEngine, createFormJourneyPage, createFormJourneyProject, createPluginContext, createWebsiteBrick, createWebsitePage, createWebsiteProject, defineWidget, flattenPluginWidgets, getButtonClass, getChoiceControlClass, getEffectiveDataConfig, getFileInputClass, getFileUploadShellClass, getHeadingClass, getOutlinedFieldInlineStyle, getTextControlClass, getWidgetsForFlavor, hasWrapperSurfaceStyles, inferSchema, isFieldDisabled, isFieldReadonly, isFormJourneyProject, isWidgetVisibleInPalette, mergeAndNormalize, normalizeRuntimeOptions, normalizeStyle$1 as normalizeStyle, normalizeToJourney, parseCsv, parseJsonArray, parseSchema, provideDesignerPlugins, provideFormDesignerAngaiFeature, provideHttpDataSourceClient, serializeSchema, slugifyId, splitControlSurfaceStyles, stripEmbeddedSourceData, unwrapSinglePageJourney, usesFieldThousandSeparator };
 //# sourceMappingURL=uch-web-ngx-form-designer.mjs.map