@yourself.create/ngx-form-designer 0.0.8 → 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;
     }
@@ -5435,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) {
@@ -5459,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;
@@ -5542,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
@@ -10271,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 [];
@@ -10609,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">
@@ -10813,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) || ''"
@@ -11106,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) || ''"
@@ -15261,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;
@@ -15277,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)) {
@@ -15301,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;
     }
@@ -15437,7 +15349,6 @@ class DataPanelComponent {
     selectionFieldId;
     selectionMatchPath;
     childRowsPath;
-    formatNumericOptionLabels = false;
     optionLabelPrefixPath;
     rootPathOptions = [];
     rowPathOptions = [];
@@ -15679,7 +15590,6 @@ class DataPanelComponent {
         this.selectionFieldId = undefined;
         this.selectionMatchPath = undefined;
         this.childRowsPath = undefined;
-        this.formatNumericOptionLabels = false;
         this.optionLabelPrefixPath = undefined;
         this.rootPathOptions = [];
         this.rowPathOptions = [];
@@ -15721,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;
@@ -15774,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'
@@ -15896,9 +15802,6 @@ class DataPanelComponent {
             && this.bindingShape === 'scalar'
             && (this.widgetType === 'text' || this.widgetType === 'number');
     }
-    supportsNumericDisplayFormatting() {
-        return this.widgetType === 'select' || this.widgetType === 'number';
-    }
     displayFormattingTitle() {
         return this.widgetType === 'select' ? 'Amount Display' : 'Field Display';
     }
@@ -15907,15 +15810,10 @@ class DataPanelComponent {
             return 'Format the visible dropdown label without changing the stored option value.';
         }
         if (this.widgetType === 'number') {
-            return 'Show a fixed prefix and grouped digits in the visible field value without changing the stored number.';
+            return 'Show a fixed prefix in the visible field value without changing the stored number.';
         }
         return 'Show a fixed prefix beside the editable value without changing the stored field value.';
     }
-    numericDisplayFormattingLabel() {
-        return this.widgetType === 'select'
-            ? 'Show thousand separators for numeric labels'
-            : 'Show thousand separators for numeric values';
-    }
     showStaticOptionsEditor() {
         return this.sourceType === 'static' && this.widgetType !== 'table' && this.usesOptionMapping();
     }
@@ -15944,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() {
@@ -15966,7 +15864,7 @@ class DataPanelComponent {
         const sample = this.extractPreviewRows(this.previewRows, this.effectiveRowsPath())[0];
         return sample ? collectArrayPaths(sample) : [];
     }
-    shouldPersistOptionLabelFormatting() {
+    shouldPersistOptionLabelPrefix() {
         if (this.widgetType === 'select' && this.usesOptionMapping()) {
             return true;
         }
@@ -15982,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;
         }
@@ -16005,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;
@@ -16297,15 +16195,6 @@ class DataPanelComponent {
                              <div class="text-xs font-semibold uppercase tracking-wide text-gray-500">{{ displayFormattingTitle() }}</div>
                              <div class="mt-1 text-[11px] text-gray-500">{{ displayFormattingDescription() }}</div>
 
-                             <label class="mt-3 flex items-center gap-2 text-sm text-gray-700" *ngIf="supportsNumericDisplayFormatting()">
-                                 <input
-                                     type="checkbox"
-                                     [checked]="formatNumericOptionLabels"
-                                     (change)="formatNumericOptionLabels = $any($event.target).checked; emitChange()"
-                                     class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
-                                 <span>{{ numericDisplayFormattingLabel() }}</span>
-                             </label>
-
                              <div class="mt-3 flex flex-col gap-1">
                                  <label class="text-xs font-medium text-gray-500">Prefix Key</label>
                                  <input
@@ -16916,15 +16805,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                              <div class="text-xs font-semibold uppercase tracking-wide text-gray-500">{{ displayFormattingTitle() }}</div>
                              <div class="mt-1 text-[11px] text-gray-500">{{ displayFormattingDescription() }}</div>
 
-                             <label class="mt-3 flex items-center gap-2 text-sm text-gray-700" *ngIf="supportsNumericDisplayFormatting()">
-                                 <input
-                                     type="checkbox"
-                                     [checked]="formatNumericOptionLabels"
-                                     (change)="formatNumericOptionLabels = $any($event.target).checked; emitChange()"
-                                     class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
-                                 <span>{{ numericDisplayFormattingLabel() }}</span>
-                             </label>
-
                              <div class="mt-3 flex flex-col gap-1">
                                  <label class="text-xs font-medium text-gray-500">Prefix Key</label>
                                  <input
@@ -17866,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">
@@ -17988,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">
@@ -20255,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') {
@@ -22071,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."
         },
         {
@@ -22477,8 +22357,8 @@ const TRANSACTION_KYC_REVIEW_TEMPLATE = {
             "name": "clientDisplay",
             "type": "text",
             "label": "Client",
-            "readonly": true,
             "html5": {
+                "readonly": true,
                 "required": false
             },
             "rules": [
@@ -22524,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",
@@ -23292,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",
@@ -23497,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",
@@ -23510,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",
@@ -31742,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;
@@ -31758,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;
         }
@@ -31789,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)
@@ -31845,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);
@@ -32006,12 +31886,12 @@ class DefaultDataProvider extends DataProvider {
         }
         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;
     }
@@ -32028,7 +31908,7 @@ class DefaultDataProvider extends DataProvider {
         for (const candidate of [context.row, context.parentRow, context.sourceRow]) {
             if (!candidate)
                 continue;
-            const resolved = resolvePathValue(candidate, prefixPath);
+            const resolved = resolvePathValue$1(candidate, prefixPath);
             const value = toDisplayText(resolved);
             if (value) {
                 return value;
@@ -32131,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({
@@ -32159,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));
@@ -32187,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)
@@ -32204,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)
@@ -32221,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;
@@ -32293,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) {
@@ -32314,7 +32193,7 @@ class DefaultDataProvider extends DataProvider {
         for (const candidate of [context.row, context.parentRow, context.sourceRow]) {
             if (!candidate)
                 continue;
-            const resolved = resolvePathValue(candidate, prefixPath);
+            const resolved = resolvePathValue$1(candidate, prefixPath);
             const value = toDisplayText(resolved);
             if (value) {
                 return value;
@@ -32322,29 +32201,6 @@ class DefaultDataProvider extends DataProvider {
         }
         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;
@@ -32503,6 +32359,60 @@ 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;
@@ -32552,7 +32462,7 @@ class TextFieldWidgetComponent {
         return this.config?.type === 'color';
     }
     usesFormattedNumberInput() {
-        return this.config?.type === 'number' && this.config?.dataConfig?.formatNumericOptionLabels === true;
+        return this.config?.type === 'number' && usesFieldThousandSeparator(this.config);
     }
     hasDisplayPrefix() {
         return !this.isTextarea() && !this.isColorField() && this.displayPrefix.trim().length > 0;
@@ -32609,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$
@@ -32617,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
@@ -32721,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;
     }
@@ -32747,14 +32657,23 @@ 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);
             this.displayPrefix = await this.dataProvider.getValueDisplayPrefix(this.config, this.engine);
-            if (val === undefined || val === null)
+            if (val === undefined || val === null) {
+                if (!clearWhenMissing) {
+                    return;
+                }
+                this.clearResolvedValue();
                 return;
+            }
             this.control.setValue(val, { emitEvent: false });
             this.syncFormattedNumberValue();
             if (this.engine) {
@@ -32765,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 ?? '')
@@ -32778,16 +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.formatNumericOptionLabels ?? ''),
             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('::');
     }
@@ -32922,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()"
@@ -32943,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()"
@@ -32955,7 +32912,7 @@ 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()) {
@@ -32977,7 +32934,7 @@ class TextFieldWidgetComponent {
             (blur)="onBlur()"
             (mouseenter)="onMouseEnter()"
             (mouseleave)="onMouseLeave()"
-            [readonly]="config.readonly"
+            [readonly]="config.html5?.readonly"
             [disabled]="control.disabled"
             [attr.aria-required]="required"
             [attr.aria-invalid]="!!error"
@@ -33007,7 +32964,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()"
@@ -33065,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()"
@@ -33086,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()"
@@ -33098,7 +33055,7 @@ 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()) {
@@ -33120,7 +33077,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"
             [disabled]="control.disabled"
             [attr.aria-required]="required"
             [attr.aria-invalid]="!!error"
@@ -33150,7 +33107,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()"
@@ -33263,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;
@@ -33759,7 +33716,7 @@ class SelectWidgetComponent {
                     this.runtimeOptionsLoaded = false;
                     this.currentSearchTerm = '';
                     this.setOptionsFromRaw([]);
-                    void this.loadOptions(this.currentSearchTerm);
+                    void this.loadOptions(this.currentSearchTerm, false, true);
                 });
             }
         }
@@ -33902,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;
     }
@@ -33959,7 +33916,7 @@ class SelectWidgetComponent {
         event.preventDefault();
     }
     onPillClick() {
-        if (this.config.readonly) {
+        if (isFieldReadonly(this.config)) {
             return;
         }
         this.onClick();
@@ -34026,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;
@@ -34044,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();
@@ -34152,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('::');
@@ -34164,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 ?? ''),
@@ -34221,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;
@@ -34312,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)) {
@@ -34356,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') {
@@ -34394,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$"
@@ -34421,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>
@@ -34474,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$"
@@ -34501,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>
@@ -34596,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;
     }
@@ -34659,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$
@@ -34803,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 = [];
@@ -34813,7 +34793,7 @@ class SearchWidgetComponent {
             this.cdr.markForCheck();
             return;
         }
-        await this.loadOptions(query);
+        await this.loadOptions(query, clearStaleSelection);
     }
     async handleQueryChange(query) {
         if (this.selectingOption) {
@@ -34833,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;
@@ -34847,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;
@@ -34878,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);
     }
@@ -34945,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()"
@@ -35024,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()"
@@ -35311,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) {
@@ -35423,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"
@@ -35527,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"
@@ -35778,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;
     }
@@ -36094,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;
     }
@@ -36330,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;
     }
@@ -36564,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;
     }
@@ -37899,8 +37913,8 @@ const COMMON_GROUP_FIELDS = [
     { key: 'groupKey', type: 'text', label: 'Group Key', placeholder: 'documents', helpText: 'Group fields into one object on submit/preview (uses the field key inside the group).' }
 ];
 const COMMON_INTERACTIVITY_FIELDS = [
-    { key: 'readonly', type: 'checkbox', label: 'Read Only' },
-    { key: 'disabled', type: 'checkbox', label: 'Disabled' }
+    { 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)' },
@@ -37960,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)' });
@@ -37979,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' }
@@ -38187,6 +38217,7 @@ const FIELD_WIDGETS = [
                 ]
             },
             NUMBER_VALIDATION_SECTION,
+            NUMBER_DISPLAY_SECTION,
             { label: 'Appearance', fields: COMMON_APPEARANCE_FIELDS },
             ...COMMON_STYLE_SECTIONS
         ]
@@ -38648,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
         ]
@@ -41463,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