@qbs-origin/origin-form 0.8.11 → 0.8.12

package/fesm2022/qbs-origin-origin-form.mjs

@@ -95,7 +95,11 @@ import * as i3$2 from '@angular/platform-browser';
 class CustomSectionComponent extends FieldType {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CustomSectionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: CustomSectionComponent, selector: "formly-custom-section", usesInheritance: true, ngImport: i0, template: `
-    <div class="custom-section">
+    <div
+      class="custom-section"
+      [style.paddingTop]="props['sectionMarginTop']"
+      [style.paddingBottom]="props['sectionMarginBottom']"
+    >
       <ng-container *ngFor="let field of field.fieldGroup">
         <formly-field
           [field]="field"
@@ -108,7 +112,11 @@ class CustomSectionComponent extends FieldType {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CustomSectionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'formly-custom-section', template: `
-    <div class="custom-section">
+    <div
+      class="custom-section"
+      [style.paddingTop]="props['sectionMarginTop']"
+      [style.paddingBottom]="props['sectionMarginBottom']"
+    >
       <ng-container *ngFor="let field of field.fieldGroup">
         <formly-field
           [field]="field"
@@ -120,35 +128,58 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         }] });
 
 class FormSectionSeparatorComponent extends FieldType {
+    constructor() {
+        super(...arguments);
+        this.heading2Style = {};
+        this.separatorStyle = {};
+    }
     ngOnInit() {
         if (this.props['design']) {
-            this.heading2Style = this.props['design']['.font-heading-2'];
-            const separatorStyle = this.props['design']['.separator-section'];
-            if (separatorStyle && separatorStyle['height'] !== '0px') {
-                this.separatorStyle = separatorStyle;
+            // Use the corrected CSS class name for Heading 2
+            const heading2Design = this.props['design']['.font-heading-2'];
+            if (heading2Design) {
+                this.heading2Style = heading2Design;
+            }
+            // Apply separator section styles
+            const separatorDesign = this.props['design']['.separator-section'];
+            if (separatorDesign) {
+                this.separatorStyle = {
+                    ...separatorDesign,
+                    display: separatorDesign.height && separatorDesign.height !== '0px'
+                        ? 'block'
+                        : 'none',
+                };
             }
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormSectionSeparatorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FormSectionSeparatorComponent, selector: "form-section-separator", usesInheritance: true, ngImport: i0, template: `
-    <div class="separator" style="margin: 2% ;">
+    <div class="separator form-section-title" [style.paddingTop]="props['sectionMarginTop'] || '2%'">
       <h2 *ngIf="to && to['title']" [ngStyle]="heading2Style">
         {{ to['title'] }}
       </h2>
-      <hr *ngIf="to && to['showSeparator']" [ngStyle]="separatorStyle" />
+      <hr
+        *ngIf="to && to['showSeparator']"
+        [ngStyle]="separatorStyle"
+        class="section-separator"
+      />
     </div>
-  `, isInline: true, styles: [".separator{margin:2% 0}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+  `, isInline: true, styles: [".separator{padding-bottom:2%}.section-separator{border:none;margin:10px 0}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormSectionSeparatorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'form-section-separator', template: `
-    <div class="separator" style="margin: 2% ;">
+    <div class="separator form-section-title" [style.paddingTop]="props['sectionMarginTop'] || '2%'">
       <h2 *ngIf="to && to['title']" [ngStyle]="heading2Style">
         {{ to['title'] }}
       </h2>
-      <hr *ngIf="to && to['showSeparator']" [ngStyle]="separatorStyle" />
+      <hr
+        *ngIf="to && to['showSeparator']"
+        [ngStyle]="separatorStyle"
+        class="section-separator"
+      />
     </div>
-  `, styles: [".separator{margin:2% 0}\n"] }]
+  `, styles: [".separator{padding-bottom:2%}.section-separator{border:none;margin:10px 0}\n"] }]
         }] });
 
 class Partner {
@@ -2756,7 +2787,7 @@ class AppDataStep {
     }
 }
 class AppDataFill {
-    constructor(appDataId = '', configurationId = '', currentStepId = '', statusId = '', language = '', flux = [], offerId = '', isSubmitted = false, parentAppDataUuid = '') {
+    constructor(appDataId = '', configurationId = '', currentStepId = '', statusId = '', language = '', flux = [], offerId = '', isSubmitted = false) {
         this.metadata = {
             appDataId: appDataId || '',
             configurationId: configurationId || '',
@@ -2765,7 +2796,6 @@ class AppDataFill {
             language: language || '',
             offerId: offerId || '',
             isSubmitted: isSubmitted || false,
-            parentAppDataUuid: parentAppDataUuid || ''
         };
         this.flux = flux || [];
     }
@@ -2778,7 +2808,6 @@ class AppData {
         this.initFlowValues = data.initFlowValues;
         this.withNextStep = data.withNextStep;
         this.blockPreviousStep = data.blockPreviousStep;
-        this.parentAppDataUuid = data.parentAppDataUuid;
         if (!data.env) {
             this.env = 'Config';
         }
@@ -2818,8 +2847,10 @@ class FormModelExtenxions {
         const out = [];
         const walk = (node, pathParts) => {
             if (node === null || node === undefined) {
-                if (pathParts.length > 0)
+                // Leaf
+                if (pathParts.length > 0) {
                     out.push(this.buildInitFlowField(pathParts));
+                }
                 return;
             }
             if (Array.isArray(node)) {
@@ -2830,8 +2861,10 @@ class FormModelExtenxions {
                 Object.keys(node).forEach((key) => walk(node[key], [...pathParts, key]));
                 return;
             }
-            if (pathParts.length > 0)
+            // Primitive leaf
+            if (pathParts.length > 0) {
                 out.push(this.buildInitFlowField(pathParts));
+            }
         };
         walk(parsed, []);
         for (const f of out) {
@@ -2846,7 +2879,7 @@ class FormModelExtenxions {
         return {
             fieldName: `initFlowValues_${underscorePath}`,
             fieldType: StepControlType.Metadata,
-            id: `initFlowValues_${underscorePath}`
+            id: `initFlowValues_${underscorePath}`,
         };
     }
     fluxItems(untilStepIdentifier = undefined) {
@@ -2856,7 +2889,7 @@ class FormModelExtenxions {
                 items.push({
                     fieldName: fieldValue,
                     fieldType: StepControlType.Metadata,
-                    id: `metadata.${fieldValue}`
+                    id: `metadata.${fieldValue}`,
                 });
             });
         }
@@ -2884,13 +2917,13 @@ class FormModelExtenxions {
                                 StepControlType.Buttons,
                                 StepControlType.NewRow,
                                 StepControlType.FluxInfo,
-                                StepControlType.Paragraph
+                                StepControlType.Paragraph,
                             ].includes(control.type) == false) {
                                 items.push({
                                     fieldName: `${step.name} -> ${section.title} -> ${control.title}`,
                                     fieldType: control.type,
                                     manulInputControlType: control.specificControlData?.type,
-                                    id: control.identifier
+                                    id: control.identifier,
                                 });
                             }
                         });
@@ -2910,7 +2943,7 @@ class FormModelExtenxions {
                         fieldType: step.type,
                         id: document?.documentId
                             ? `upload.${document.documentId}`
-                            : `${step.type}.${step.name}`
+                            : `${step.type}.${step.name}`,
                     });
                 });
             }
@@ -2922,7 +2955,7 @@ class FormModelExtenxions {
                         fieldType: step.type,
                         id: document?.id
                             ? `generate.${document.id}`
-                            : `${step.type}.${step.name}`
+                            : `${step.type}.${step.name}`,
                     });
                 });
             }
@@ -2934,7 +2967,7 @@ class FormModelExtenxions {
                             fieldType: step.type,
                             id: document?.id
                                 ? `sign.${document.id}`
-                                : `${step.type}.${step.name}`
+                                : `${step.type}.${step.name}`,
                         });
                     });
                 }
@@ -2945,7 +2978,7 @@ class FormModelExtenxions {
                             fieldType: step.type,
                             id: document?.id
                                 ? `system.${document.id}`
-                                : `${step.type}.${step.name}`
+                                : `${step.type}.${step.name}`,
                         });
                     });
                 }
@@ -2953,19 +2986,55 @@ class FormModelExtenxions {
         });
         return items;
     }
+    /**
+     * Returns inherited parent fields as MethodField items.
+     * Reusable across all system step settings components.
+     */
+    static getInheritedMethodFields(formModel) {
+        const result = [];
+        const inheritedFields = formModel.parentChildConfig?.inheritedFields;
+        if (inheritedFields?.length) {
+            inheritedFields.forEach((field) => {
+                result.push({
+                    fieldName: `Inherited -> ${field.fieldName}`,
+                    fieldType: 'inherited',
+                    id: field.id,
+                });
+            });
+        }
+        return result;
+    }
+    /**
+     * Returns flux items + inherited parent fields (no API methods).
+     * Use this in system step settings that need parent field references.
+     */
+    fluxItemsWithInherited(untilStepIdentifier = undefined) {
+        const items = this.fluxItems(untilStepIdentifier);
+        items.push(...FormModelExtenxions.getInheritedMethodFields(this.formModel));
+        return items;
+    }
     fluxItemsWithGetApiMethods(excludedMethodId = '') {
-        let items = this.fluxItems();
+        let items = this.fluxItemsWithInherited();
         this.formModel.api.getItems.forEach((apiMethod) => {
             if (apiMethod.id !== excludedMethodId) {
                 apiMethod.fields?.forEach((f) => {
                     items.push({
                         fieldName: `${apiMethod.method} -> ${f.fieldName}`,
                         fieldType: StepControlType.ApiMethodField,
-                        id: f.id
+                        id: f.id,
                     });
                 });
             }
         });
+        this.formModel.api.validationItems.forEach((validateApiMethod) => {
+            validateApiMethod.fields?.forEach((f) => {
+                items.push({
+                    fieldName: `${validateApiMethod.method} -> ${f.fieldName}`,
+                    fieldType: StepControlType.ApiMethodField,
+                    id: f.id,
+                });
+            });
+        });
         return items;
     }
     offerMethodsItems() {
@@ -2980,7 +3049,7 @@ class FormModelExtenxions {
         const allApiItems = [
             ...this.formModel.api.getItems,
             ...this.formModel.api.validationItems,
-            ...this.formModel.api.sendItems
+            ...this.formModel.api.sendItems,
         ];
         offerMethodsIds.forEach((methodId) => {
             const apiMethod = allApiItems.find((item) => item.id === methodId);
@@ -2989,7 +3058,7 @@ class FormModelExtenxions {
                     items.push({
                         fieldName: `${apiMethod.method} -> ${f.fieldName}`,
                         fieldType: FluxType.ViewOffer,
-                        id: `api_${apiMethod.id} -> ${f.id}`
+                        id: `api_${apiMethod.id} -> ${f.id}`,
                     });
                 });
             }
@@ -3003,6 +3072,8 @@ class ApiItem {
 }
 class GetApiItem {
 }
+class ValidateApiItem {
+}
 class DesignModel {
     constructor(data) {
         this.fonts = [];
@@ -3119,12 +3190,16 @@ class ComponentConfig {
             this.border = data.border;
             this.borderRadius = data.borderRadius;
             this.labelStyle = data.labelStyle;
+            this.valueStyle = data.valueStyle;
             this.textAlign = data.textAlign;
             this.color = data.color;
             this.weight = data.weight;
             this.startColor = data.startColor;
             this.endColor = data.endColor;
             this.height = data.height;
+            this.textareaMaxHeight = data.textareaMaxHeight;
+            this.marginTop = data.marginTop;
+            this.marginBottom = data.marginBottom;
         }
     }
 }
@@ -3146,7 +3221,7 @@ const initialFormulareState = {
             showNameStep: false,
             showAllSteps: false,
             showProgressBar: false,
-            initFlowValues: ''
+            initFlowValues: '',
         },
         design: {
             fonts: [],
@@ -3162,7 +3237,7 @@ const initialFormulareState = {
             marginLeft: '',
             marginRight: '',
             marginTop: '',
-            marginBottom: ''
+            marginBottom: '',
         },
         flux: [],
         api: { getItems: [], validationItems: [], sendItems: [] },
@@ -3170,16 +3245,24 @@ const initialFormulareState = {
         documents: [],
         statuses: [],
         display: {
-            sections: []
+            sections: [],
         },
         generatedCss: {},
         metadataFields: [],
         errors: {},
         applicationMappings: {
             applicationTypeId: 0,
-            columnMappings: []
+            columnMappings: [],
+        },
+        parentChildConfig: {
+            parentApplicationUuid: null,
+            inheritedFields: [],
+            notificationConfig: {
+                enabled: false,
+                titleTemplate: 'Status update: {statusName}',
+                messageTemplate: 'Your application status has been updated to: {statusName}',
+            },
         },
-        parentChildConfig: undefined
     },
     selectedTab: 'Date generale',
     canGetFromProd: false,
@@ -3187,7 +3270,7 @@ const initialFormulareState = {
     canPublishInProd: false,
     canPublishInTest: false,
     applicationUuid: '',
-    version: ''
+    version: '',
 };
 class PartnerDictionaryMapping {
 }
@@ -3314,7 +3397,7 @@ class StatusModel {
         this.final = final;
         this.isActive = isActive;
         this.actions = actions;
-        this.childApplicationUuids = childApplicationUuids || [];
+        this.childApplicationUuids = childApplicationUuids;
         this.sendNotifications = sendNotifications;
     }
 }
@@ -4857,7 +4940,6 @@ class FormlyDictionaryDropdownTreeComponent extends FieldType {
         this.cdRef = cdRef;
         this.formlyKeys = LabelKeys.formly;
         this.selectedValueText = '';
-        this.labelStyle = {};
         this.selectedValueIds = [];
         this.valuesIdsToShow = [];
         this.selectedRelatedDictionaries = [];
@@ -4905,9 +4987,7 @@ class FormlyDictionaryDropdownTreeComponent extends FieldType {
         }
         this.currentLanguageIso = this.props['currentLanguageIso'];
         this.currentLanguageId = this.props['currentLanguageId'];
-        if (this.props['design']) {
-            this.labelStyle = this.props['design']['.component-data-label'] || {};
-        }
+        // Design styles are applied via generated CSS (same as Text Field)
         if (this.props['selectedValueIds'] &&
             Array.isArray(this.props['selectedValueIds'])) {
             this.selectedValueIds = this.props['selectedValueIds'];
@@ -5037,8 +5117,9 @@ class FormlyDictionaryDropdownTreeComponent extends FieldType {
                 }
                 this.onSelectedValueChanged(this.selectedValue);
             }
+            this.filteredText = '';
             if (this.autoInput) {
-                this.autoInput.nativeElement.value = this.filteredText = '';
+                this.autoInput.nativeElement.value = this.selectedValueText || '';
             }
         }
     }
@@ -5061,6 +5142,20 @@ class FormlyDictionaryDropdownTreeComponent extends FieldType {
             }
         }
     }
+    onInputFocus() {
+        // Clear the input so user can type to filter; open the dropdown
+        if (this.autoInput) {
+            this.autoInput.nativeElement.value = '';
+        }
+        this.filteredText = '';
+        this.openAutocomplete();
+    }
+    onInputBlur() {
+        // Restore the selected value text when leaving the field
+        if (this.autoInput) {
+            this.autoInput.nativeElement.value = this.selectedValueText || '';
+        }
+    }
     openAutocomplete() {
         if (this.autocompleteTrigger && !this.autocompleteTrigger.panelOpen) {
             this.autocompleteTrigger.openPanel();
@@ -5101,6 +5196,9 @@ class FormlyDictionaryDropdownTreeComponent extends FieldType {
             }
         }
         this.selectedValueText = this.getValueDisplayText(this.selectedValue);
+        if (this.autoInput) {
+            this.autoInput.nativeElement.value = this.selectedValueText;
+        }
     }
     getValueDisplayText(value) {
         if (!value)
@@ -5116,11 +5214,11 @@ class FormlyDictionaryDropdownTreeComponent extends FieldType {
         return this.dictionaryLabels[dictionaryId] || '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormlyDictionaryDropdownTreeComponent, deps: [{ token: DictionaryService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FormlyDictionaryDropdownTreeComponent, selector: "formly-dictionary-dropdown-tree", inputs: { dictionaryId: "dictionaryId" }, outputs: { selectedValue: "selectedValue" }, viewQueries: [{ propertyName: "autocompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }, { propertyName: "autoInput", first: true, predicate: ["autoInput"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<form>\n  <mat-label class=\"component-data-label m-l-2\" [ngStyle]=\"labelStyle\">\n    {{ label }}</mat-label\n  >\n  <mat-form-field class=\"full-width\">\n    <input\n      type=\"text\"\n      placeholder=\"{{ selectedValueText }}\"\n      #autoInput\n      aria-label=\"Text\"\n      matInput\n      [matAutocomplete]=\"auto\"\n      (input)=\"filterChanged($event)\"\n      (focus)=\"openAutocomplete()\"\n    />\n    <mat-icon matSuffix (click)=\"toggleAutocomplete($event)\"\n      >keyboard_arrow_down</mat-icon\n    >\n    <mat-autocomplete\n      #matAutocomplete=\"matAutocomplete\"\n      #auto=\"matAutocomplete\"\n      autoActiveFirstOption\n      (optionSelected)=\"\n        onSelectedDictionaryValuesChanged([$event.option.value])\n      \"\n    >\n      <mat-option disabled>{{\n        formlyKeys.selectAnItem | translate\n      }}</mat-option>\n      <app-dictionaries-tree\n        [allowCheckItems]=\"allowMultipleSelection\"\n        [drawReferenceDictionariesAsSeparateNode]=\"false\"\n        [drawChildDictionariesAsSeparateNode]=\"false\"\n        [drawRootNode]=\"false\"\n        [filterText]=\"filteredText\"\n        [allowSelectNonLeafNodes]=\"true\"\n        [selectedValueIds]=\"selectedValueIds\"\n        [languageId]=\"currentLanguageId\"\n        [valuesIdsToShow]=\"valuesIdsToShow\"\n        [selectedRelatedDictionaries]=\"selectedRelatedDictionaries\"\n        [dictionaryLabels]=\"dictionaryLabels\"\n        [preloadedDictionary]=\"preloadedDictionary\"\n        [preloadedDictionaries]=\"preloadedDictionaries\"\n        [usePreloadedData]=\"usePreloadedData\"\n        (selectedDictionaryValuesChanged)=\"\n          onSelectedDictionaryValuesChanged($event)\n        \"\n      >\n      </app-dictionaries-tree>\n    </mat-autocomplete>\n  </mat-form-field>\n\n  <formly-validation-message *ngIf=\"showError\" [field]=\"field\">\n  </formly-validation-message>\n</form>\n", styles: ["formly-validation-message{color:red;font-size:12px}::ng-deep .mat-mdc-autocomplete-panel>app-dictionaries-tree>app-treeview>cdk-virtual-scroll-viewport{overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i6$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i6$3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i6$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { kind: "component", type: DictionariesTreeComponent, selector: "app-dictionaries-tree", inputs: ["dictionaryId", "selectedValueIds", "allowCheckItems", "allowFilter", "drawReferenceDictionariesAsSeparateNode", "drawChildDictionariesAsSeparateNode", "drawRootNode", "filterText", "allowSelectNonLeafNodes", "languageId", "valuesIdsToShow", "hideParentArrow", "preloadedDictionary", "preloadedDictionaries", "usePreloadedData"], outputs: ["selectedDictionaryValuesChanged"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FormlyDictionaryDropdownTreeComponent, selector: "formly-dictionary-dropdown-tree", inputs: { dictionaryId: "dictionaryId" }, outputs: { selectedValue: "selectedValue" }, viewQueries: [{ propertyName: "autocompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }, { propertyName: "autoInput", first: true, predicate: ["autoInput"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<form>\n  <mat-form-field class=\"full-width\">\n    <mat-label class=\"component-dictionary-label\">{{ label }}</mat-label>\n    <input\n      type=\"text\"\n      #autoInput\n      aria-label=\"Text\"\n      matInput\n      [value]=\"selectedValueText || ''\"\n      [matAutocomplete]=\"auto\"\n      (input)=\"filterChanged($event)\"\n      (focus)=\"onInputFocus()\"\n      (blur)=\"onInputBlur()\"\n    />\n    <mat-icon matSuffix (click)=\"toggleAutocomplete($event)\"\n      >keyboard_arrow_down</mat-icon\n    >\n    <mat-autocomplete\n      #matAutocomplete=\"matAutocomplete\"\n      #auto=\"matAutocomplete\"\n      autoActiveFirstOption\n      (optionSelected)=\"\n        onSelectedDictionaryValuesChanged([$event.option.value])\n      \"\n    >\n      <mat-option disabled>{{\n        formlyKeys.selectAnItem | translate\n      }}</mat-option>\n      <app-dictionaries-tree\n        [allowCheckItems]=\"allowMultipleSelection\"\n        [drawReferenceDictionariesAsSeparateNode]=\"false\"\n        [drawChildDictionariesAsSeparateNode]=\"false\"\n        [drawRootNode]=\"false\"\n        [filterText]=\"filteredText\"\n        [allowSelectNonLeafNodes]=\"true\"\n        [selectedValueIds]=\"selectedValueIds\"\n        [languageId]=\"currentLanguageId\"\n        [valuesIdsToShow]=\"valuesIdsToShow\"\n        [selectedRelatedDictionaries]=\"selectedRelatedDictionaries\"\n        [dictionaryLabels]=\"dictionaryLabels\"\n        [preloadedDictionary]=\"preloadedDictionary\"\n        [preloadedDictionaries]=\"preloadedDictionaries\"\n        [usePreloadedData]=\"usePreloadedData\"\n        (selectedDictionaryValuesChanged)=\"\n          onSelectedDictionaryValuesChanged($event)\n        \"\n      >\n      </app-dictionaries-tree>\n    </mat-autocomplete>\n  </mat-form-field>\n\n  <formly-validation-message *ngIf=\"showError\" [field]=\"field\">\n  </formly-validation-message>\n</form>\n", styles: ["formly-validation-message{color:red;font-size:12px}::ng-deep .mat-mdc-autocomplete-panel>app-dictionaries-tree>app-treeview>cdk-virtual-scroll-viewport{overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i6$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i6$3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i6$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { kind: "component", type: DictionariesTreeComponent, selector: "app-dictionaries-tree", inputs: ["dictionaryId", "selectedValueIds", "allowCheckItems", "allowFilter", "drawReferenceDictionariesAsSeparateNode", "drawChildDictionariesAsSeparateNode", "drawRootNode", "filterText", "allowSelectNonLeafNodes", "languageId", "valuesIdsToShow", "hideParentArrow", "preloadedDictionary", "preloadedDictionaries", "usePreloadedData"], outputs: ["selectedDictionaryValuesChanged"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormlyDictionaryDropdownTreeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'formly-dictionary-dropdown-tree', template: "<form>\n  <mat-label class=\"component-data-label m-l-2\" [ngStyle]=\"labelStyle\">\n    {{ label }}</mat-label\n  >\n  <mat-form-field class=\"full-width\">\n    <input\n      type=\"text\"\n      placeholder=\"{{ selectedValueText }}\"\n      #autoInput\n      aria-label=\"Text\"\n      matInput\n      [matAutocomplete]=\"auto\"\n      (input)=\"filterChanged($event)\"\n      (focus)=\"openAutocomplete()\"\n    />\n    <mat-icon matSuffix (click)=\"toggleAutocomplete($event)\"\n      >keyboard_arrow_down</mat-icon\n    >\n    <mat-autocomplete\n      #matAutocomplete=\"matAutocomplete\"\n      #auto=\"matAutocomplete\"\n      autoActiveFirstOption\n      (optionSelected)=\"\n        onSelectedDictionaryValuesChanged([$event.option.value])\n      \"\n    >\n      <mat-option disabled>{{\n        formlyKeys.selectAnItem | translate\n      }}</mat-option>\n      <app-dictionaries-tree\n        [allowCheckItems]=\"allowMultipleSelection\"\n        [drawReferenceDictionariesAsSeparateNode]=\"false\"\n        [drawChildDictionariesAsSeparateNode]=\"false\"\n        [drawRootNode]=\"false\"\n        [filterText]=\"filteredText\"\n        [allowSelectNonLeafNodes]=\"true\"\n        [selectedValueIds]=\"selectedValueIds\"\n        [languageId]=\"currentLanguageId\"\n        [valuesIdsToShow]=\"valuesIdsToShow\"\n        [selectedRelatedDictionaries]=\"selectedRelatedDictionaries\"\n        [dictionaryLabels]=\"dictionaryLabels\"\n        [preloadedDictionary]=\"preloadedDictionary\"\n        [preloadedDictionaries]=\"preloadedDictionaries\"\n        [usePreloadedData]=\"usePreloadedData\"\n        (selectedDictionaryValuesChanged)=\"\n          onSelectedDictionaryValuesChanged($event)\n        \"\n      >\n      </app-dictionaries-tree>\n    </mat-autocomplete>\n  </mat-form-field>\n\n  <formly-validation-message *ngIf=\"showError\" [field]=\"field\">\n  </formly-validation-message>\n</form>\n", styles: ["formly-validation-message{color:red;font-size:12px}::ng-deep .mat-mdc-autocomplete-panel>app-dictionaries-tree>app-treeview>cdk-virtual-scroll-viewport{overflow:hidden}\n"] }]
+            args: [{ selector: 'formly-dictionary-dropdown-tree', template: "<form>\n  <mat-form-field class=\"full-width\">\n    <mat-label class=\"component-dictionary-label\">{{ label }}</mat-label>\n    <input\n      type=\"text\"\n      #autoInput\n      aria-label=\"Text\"\n      matInput\n      [value]=\"selectedValueText || ''\"\n      [matAutocomplete]=\"auto\"\n      (input)=\"filterChanged($event)\"\n      (focus)=\"onInputFocus()\"\n      (blur)=\"onInputBlur()\"\n    />\n    <mat-icon matSuffix (click)=\"toggleAutocomplete($event)\"\n      >keyboard_arrow_down</mat-icon\n    >\n    <mat-autocomplete\n      #matAutocomplete=\"matAutocomplete\"\n      #auto=\"matAutocomplete\"\n      autoActiveFirstOption\n      (optionSelected)=\"\n        onSelectedDictionaryValuesChanged([$event.option.value])\n      \"\n    >\n      <mat-option disabled>{{\n        formlyKeys.selectAnItem | translate\n      }}</mat-option>\n      <app-dictionaries-tree\n        [allowCheckItems]=\"allowMultipleSelection\"\n        [drawReferenceDictionariesAsSeparateNode]=\"false\"\n        [drawChildDictionariesAsSeparateNode]=\"false\"\n        [drawRootNode]=\"false\"\n        [filterText]=\"filteredText\"\n        [allowSelectNonLeafNodes]=\"true\"\n        [selectedValueIds]=\"selectedValueIds\"\n        [languageId]=\"currentLanguageId\"\n        [valuesIdsToShow]=\"valuesIdsToShow\"\n        [selectedRelatedDictionaries]=\"selectedRelatedDictionaries\"\n        [dictionaryLabels]=\"dictionaryLabels\"\n        [preloadedDictionary]=\"preloadedDictionary\"\n        [preloadedDictionaries]=\"preloadedDictionaries\"\n        [usePreloadedData]=\"usePreloadedData\"\n        (selectedDictionaryValuesChanged)=\"\n          onSelectedDictionaryValuesChanged($event)\n        \"\n      >\n      </app-dictionaries-tree>\n    </mat-autocomplete>\n  </mat-form-field>\n\n  <formly-validation-message *ngIf=\"showError\" [field]=\"field\">\n  </formly-validation-message>\n</form>\n", styles: ["formly-validation-message{color:red;font-size:12px}::ng-deep .mat-mdc-autocomplete-panel>app-dictionaries-tree>app-treeview>cdk-virtual-scroll-viewport{overflow:hidden}\n"] }]
         }], ctorParameters: () => [{ type: DictionaryService }, { type: i0.ChangeDetectorRef }], propDecorators: { autocompleteTrigger: [{
                 type: ViewChild,
                 args: [MatAutocompleteTrigger]
@@ -5972,38 +6070,97 @@ class FormCssHelper {
             case '.component-data':
                 cssText = this.getSpecificCssForData(key, values, cssRules);
                 break;
+            case '.component-dictionary':
+                cssText = this.getSpecificCssForDictionary(key, values, cssRules);
+                break;
             case '.table-details':
                 cssText = this.getSpecificCssForTableDetail(values);
                 break;
             case '.table-header':
                 cssText = this.getSpecificCssForTableHeader(values);
                 break;
+            case '.component-progress-bar':
+                cssText = this.getSpecificCssForProgressBar(values);
+                break;
+        }
+        // Append component-level margin rules (applies to all 5 margin-enabled components)
+        const marginTop = values['component-margin-top'];
+        const marginBottom = values['component-margin-bottom'];
+        const marginParts = [];
+        if (marginTop && marginTop !== 'none') {
+            marginParts.push(`margin-top: ${marginTop} !important;`);
+        }
+        if (marginBottom && marginBottom !== 'none') {
+            marginParts.push(`margin-bottom: ${marginBottom} !important;`);
+        }
+        if (marginParts.length > 0) {
+            cssText += ` ${key} { ${marginParts.join(' ')} }`;
         }
         return cssText;
     }
+    static getSpecificCssForDictionary(key, values, cssRules) {
+        let inputSpecificCss = '';
+        const fontStyleSource = cssRules['.component-dictionary-value'] || cssRules['.font-input'];
+        if (fontStyleSource) {
+            const fontStyleForInputText = { ...fontStyleSource };
+            if (values['text-align']) {
+                fontStyleForInputText['text-align'] = values['text-align'];
+            }
+            fontStyleForInputText['color'] = (fontStyleForInputText['color'] || '') + ' !important';
+            inputSpecificCss = this.styleObjectToString({ ...fontStyleForInputText });
+        }
+        let labelSpecificCss = '';
+        const labelSource = cssRules['.component-dictionary-label'];
+        if (labelSource) {
+            labelSpecificCss = this.styleObjectToString({ ...labelSource });
+        }
+        var css = `
+    .mat-mdc-text-field-wrapper.mdc-text-field {
+      ${this.styleObjectToString({ ...values })};
+      border-style: solid;
+      input {
+        ${inputSpecificCss}
+      }
+      mat-label {
+        ${labelSpecificCss}
+      }
+      .mdc-line-ripple--active::after {
+        border-bottom-color: ${labelSource ? labelSource['color'] : 'inherit'}
+      }
+    }
+
+    .component-dictionary-label label {
+      ${labelSpecificCss}
+    }
+    `;
+        return `${key} { ${css} }`;
+    }
     static getSpecificCssForInput(key, values, cssRules) {
         let inputSpecificCss = '';
         let signInputSpecificCss = '';
-        const fontStyleForInputText = cssRules['.font-input'];
-        if (fontStyleForInputText) {
+        const fontStyleSource = cssRules['.component-text-field-value'] || cssRules['.font-input'];
+        if (fontStyleSource) {
+            const fontStyleForInputText = { ...fontStyleSource };
             //transfer property from component to input
             if (values['text-align']) {
                 fontStyleForInputText['text-align'] = values['text-align'];
             }
-            fontStyleForInputText['color'] += ' !important';
-            inputSpecificCss = this.styleObjectToString(fontStyleForInputText);
-            signInputSpecificCss = this.styleObjectToString(fontStyleForInputText, true);
+            fontStyleForInputText['color'] = (fontStyleForInputText['color'] || '') + ' !important';
+            inputSpecificCss = this.styleObjectToString({ ...fontStyleForInputText });
+            signInputSpecificCss = this.styleObjectToString({ ...fontStyleForInputText }, true);
         }
         let labelSpecificCss = '';
         let signLabelSpecificCss = '';
-        const fontStyleForLabelText = cssRules['.component-text-field-label'];
-        if (fontStyleForLabelText) {
-            labelSpecificCss = this.styleObjectToString(fontStyleForLabelText);
-            signLabelSpecificCss = this.styleObjectToString(fontStyleForLabelText, true);
+        const labelSource = cssRules['.component-text-field-label'];
+        if (labelSource) {
+            labelSpecificCss = this.styleObjectToString({ ...labelSource });
+            signLabelSpecificCss = this.styleObjectToString({ ...labelSource }, true);
         }
+        const textareaHeight = values['textarea-height'] || '';
+        const textareaMaxHeight = values['textarea-max-height'] || '';
         var css = `
     .mat-mdc-text-field-wrapper.mdc-text-field {
-      ${this.styleObjectToString(values)};
+      ${this.styleObjectToString({ ...values })};
       border-style: solid;
       input {
         ${inputSpecificCss}
@@ -6012,13 +6169,13 @@ class FormCssHelper {
         ${labelSpecificCss}
       }
       .mdc-line-ripple--active::after {
-        border-bottom-color: ${fontStyleForLabelText['color']}
+        border-bottom-color: ${labelSource ? labelSource['color'] : 'inherit'}
       }
     }
 
     input.component-text-field {
       border-style: solid !important;
-      ${this.styleObjectToString(values, true)};
+      ${this.styleObjectToString({ ...values }, true)};
       ${signInputSpecificCss}
     }
 
@@ -6026,7 +6183,34 @@ class FormCssHelper {
       ${signLabelSpecificCss}
     }
     `;
-        return `${key} { ${css}}`;
+        // Flat explicit rules scoped to textarea only.
+        // :has(textarea) on the infix ensures min-height/max-height do NOT affect
+        // text/numeric inputs that share the same .component-text-field class.
+        const textareaFlatCss = `
+    ${key} .mat-mdc-text-field-wrapper.mdc-text-field:has(textarea) .mat-mdc-form-field-infix {
+      ${textareaHeight ? `min-height: ${textareaHeight} !important;` : ''}
+    }
+    ${key} .mat-mdc-text-field-wrapper.mdc-text-field textarea {
+      ${inputSpecificCss}
+      ${textareaHeight ? `min-height: ${textareaHeight} !important;` : ''}
+      ${textareaMaxHeight && textareaMaxHeight !== 'none' ? `max-height: ${textareaMaxHeight} !important; overflow-y: auto !important;` : ''}
+      resize: none !important;
+    }
+    `;
+        return `${key} { ${css}} ${textareaFlatCss}`;
+    }
+    static getSpecificCssForProgressBar(values) {
+        const startColor = values['startColor'] || '#8848EF';
+        const endColor = values['endColor'] || '#8848EF';
+        const height = values['height'] || '4px';
+        const borderRadius = values['borderRadius'] || '7px';
+        return `
+      .component-progress-bar {
+        background: linear-gradient(to right, ${startColor}, ${endColor}) !important;
+        height: ${height} !important;
+        border-radius: ${borderRadius} !important;
+      }
+    `;
     }
     static getSpecificCssForTableHeader(values) {
         const backgroundColor = values['background-color'] || '#ffffff';
@@ -6207,7 +6391,8 @@ class FormCssHelper {
       .component-text-field mat-label,
       .component-checkbox mat-label,
       .component-radio mat-label,
-      .component-date mat-label {
+      .component-date mat-label,
+      .component-dictionary mat-label {
         ${cssRules['.font-label']
             ? this.styleObjectToString(cssRules['.font-label'])
             : ''}
@@ -6262,21 +6447,22 @@ class FormCssHelper {
     }
     static getSpecificCssForData(key, values, cssRules) {
         let inputSpecificCss = '';
-        const fontStyleForInputText = cssRules['.font-list'];
-        if (fontStyleForInputText) {
+        const fontStyleSource = cssRules['.component-date-value'] || cssRules['.component-data-value'] || cssRules['.font-list'];
+        if (fontStyleSource) {
+            const fontStyleForInputText = { ...fontStyleSource };
             //transfer property from component to input
             if (values['text-align']) {
                 fontStyleForInputText['text-align'] = values['text-align'];
             }
-            inputSpecificCss = this.styleObjectToString(fontStyleForInputText);
+            inputSpecificCss = this.styleObjectToString({ ...fontStyleForInputText });
         }
         let labelSpecificCss = '';
-        const fontStyleForLabelText = cssRules['.component-data-label'];
-        if (fontStyleForLabelText) {
-            labelSpecificCss = this.styleObjectToString(fontStyleForLabelText);
+        const labelSource = cssRules['.component-data-label'];
+        if (labelSource) {
+            labelSpecificCss = this.styleObjectToString({ ...labelSource });
         }
         return ` ${key} { .mat-mdc-text-field-wrapper.mdc-text-field {
-                          ${this.styleObjectToString(values)};
+                          ${this.styleObjectToString({ ...values })};
                           border-style:solid;
                           input{
                             ${inputSpecificCss}
@@ -6289,13 +6475,19 @@ class FormCssHelper {
                        }
                     } `;
     }
+    static { this.INTERNAL_KEYS = ['textarea-height', 'textarea-max-height', 'component-margin-top', 'component-margin-bottom']; }
     static styleObjectToString(values, important = false) {
-        values['width'] =
-            'calc(100%' +
-                ('margin-left' in values ? ` - ${values['margin-left']}` : '') +
-                ('margin-right' in values ? ` - ${values['margin-right']}` : '') +
-                ')';
-        return Object.entries(values)
+        const output = { ...values };
+        // Remove internal keys that are not valid CSS properties
+        this.INTERNAL_KEYS.forEach(k => delete output[k]);
+        if (!output['width']) {
+            output['width'] =
+                'calc(100%' +
+                    ('margin-left' in output ? ` - ${output['margin-left']}` : '') +
+                    ('margin-right' in output ? ` - ${output['margin-right']}` : '') +
+                    ')';
+        }
+        return Object.entries(output)
             .map(([key, value]) => `${key}: ${value}${important ? ' !important' : ''}`)
             .join('; ');
     }
@@ -7652,9 +7844,10 @@ class CollectorFormComponent {
                                 }
                             }
                         }
-                        resolvedValue = displayValues.length > 0
-                            ? displayValues.join(', ')
-                            : (enriched.fillValue ?? String(value));
+                        resolvedValue =
+                            displayValues.length > 0
+                                ? displayValues.join(', ')
+                                : (enriched.fillValue ?? String(value));
                     }
                     else {
                         // Single-select
@@ -7771,6 +7964,39 @@ class CollectorFormComponent {
         }
         return actionsExecuted;
     }
+    /**
+     * Executes action/status steps that appear before the first visible step.
+     * Called on form initialization to handle leading action steps.
+     */
+    async executeLeadingActionSteps() {
+        if (!this.appDataUuid || !this.flux || this.flux.length === 0) {
+            return;
+        }
+        const leadingActionSteps = this.actionStepHandler.getActionStepsBeforeFirstVisibleStep(this.flux);
+        if (leadingActionSteps.length === 0) {
+            return;
+        }
+        console.log(`🎬 Executing ${leadingActionSteps.length} leading action steps before first visible step`);
+        this.isLoading = true;
+        try {
+            const result = await this.actionStepHandler.executeActionSteps(leadingActionSteps, this.appDataUuid, (step) => {
+                const loadingMessage = Utils.findTranslationInfo('loadingMessageTranslations', step.translations, this.currentLanguageIso);
+                this.loadingMessage = loadingMessage || null;
+            });
+            if (result.success) {
+                console.log('✅ Leading action steps executed successfully');
+            }
+            else {
+                console.error('❌ Leading action steps failed:', result.error);
+            }
+        }
+        catch (error) {
+            console.error('❌ Error executing leading action steps:', error);
+        }
+        finally {
+            this.loadingMessage = null;
+        }
+    }
     async executeActionStepsAfterCurrentStep(currentStepIndex) {
         if (this.actionStepHandler.isExecutingActions) {
             return false;
@@ -7826,35 +8052,6 @@ class CollectorFormComponent {
             return false;
         }
     }
-    async executeLeadingActionSteps() {
-        if (!this.appDataUuid || !this.flux || this.flux.length === 0) {
-            return;
-        }
-        const leadingActionSteps = this.actionStepHandler.getActionStepsBeforeFirstVisibleStep(this.flux);
-        if (leadingActionSteps.length === 0) {
-            return;
-        }
-        console.log(`🎬 Executing ${leadingActionSteps.length} leading action steps before first visible step`);
-        this.isLoading = true;
-        try {
-            const result = await this.actionStepHandler.executeActionSteps(leadingActionSteps, this.appDataUuid, (step) => {
-                const loadingMessage = Utils.findTranslationInfo('loadingMessageTranslations', step.translations, this.currentLanguageIso);
-                this.loadingMessage = loadingMessage || null;
-            });
-            if (result.success) {
-                console.log('✅ Leading action steps executed successfully');
-            }
-            else {
-                console.error('❌ Leading action steps failed:', result.error);
-            }
-        }
-        catch (error) {
-            console.error('❌ Error executing leading action steps:', error);
-        }
-        finally {
-            this.loadingMessage = null;
-        }
-    }
     onSelectedPageChanged(index) {
         if (this.formlyConfig[0].fieldGroup) {
             var selectedPage = this.formlyConfig[0].fieldGroup[index];
@@ -8483,15 +8680,47 @@ class CollectorFormComponent {
             if (section.dependentDictionary) {
                 this.attachToDependentDictionaryIfNecessary(section.dependentDictionary, separatorFormlyConfig);
             }
+            const sectionAny = section;
+            // When the section has a visible title or separator, sectionMarginTop is passed to
+            // separatorFormlyConfig so it appears ABOVE the title/hr. When neither is shown,
+            // the controls ARE the top of the section, so sectionMarginTop stays on custom-section.
+            const hasTitleOrSeparator = section.showSectionTitle || section.showSectionSeparator;
+            if (hasTitleOrSeparator && sectionAny.marginTop) {
+                separatorFormlyConfig = {
+                    ...separatorFormlyConfig,
+                    props: {
+                        ...separatorFormlyConfig.props,
+                        sectionMarginTop: sectionAny.marginTop,
+                    }
+                };
+            }
             stepSections.push(separatorFormlyConfig);
+            // firstRowMarginBottom is passed into buildControlsFieldGroupAsync so it ends up
+            // in the spacer AFTER the first row (not before it), matching user expectation.
+            const sectionControls = await this.buildControlsFieldGroupAsync(step, section.controls || [], section.presentationControls || [], sectionAny.firstRowMarginBottom || undefined);
+            // Prepend a spacer only for firstRowMarginTop (space ABOVE row 0).
+            // firstRowMarginBottom is handled inside buildControlsFieldGroupAsync.
+            if (sectionAny.firstRowMarginTop) {
+                sectionControls.unshift({
+                    type: 'row-spacer',
+                    className: 'percentage-width-12',
+                    props: {
+                        spacerMarginTop: sectionAny.firstRowMarginTop,
+                    }
+                });
+            }
             const sectionFormlyConfig = {
                 type: 'custom-section',
                 props: {
                     label: section.title,
                     description: section.translations?.find((t) => t.languageIso === this.currentLanguageIso)?.value ?? '',
-                    design: this.design
+                    design: this.design,
+                    // When title/separator is shown, sectionMarginTop lives on separatorFormlyConfig above.
+                    // When neither is shown, the controls are the top of section so keep margin here.
+                    sectionMarginTop: hasTitleOrSeparator ? undefined : (sectionAny.marginTop || undefined),
+                    sectionMarginBottom: sectionAny.marginBottom || undefined,
                 },
-                fieldGroup: await this.buildControlsFieldGroupAsync(step, section.controls || [], section.presentationControls || []),
+                fieldGroup: sectionControls,
                 fieldGroupClassName: 'display-flex'
             };
             if (section.dependentDictionary) {
@@ -8555,7 +8784,7 @@ class CollectorFormComponent {
             }
         };
     }
-    async buildControlsFieldGroupAsync(step, controls, presentationControls) {
+    async buildControlsFieldGroupAsync(step, controls, presentationControls, initialPendingMarginBottom) {
         const result = [];
         let rowItems = [];
         controls = controls.filter((c) => !c.isOnlyForConfig);
@@ -8567,12 +8796,15 @@ class CollectorFormComponent {
                 return false;
             return true;
         });
-        const processRow = async (items) => {
+        const processRow = async (items, useFlexWidth = false) => {
             const fields = [];
             const total = 12;
             const built = [];
             const auto = [];
             let used = 0;
+            const getWidthClass = (dim) => useFlexWidth
+                ? this.getFlexWidthClassName(dim)
+                : this.getPercentageClassName(dim);
             for (const i of items) {
                 if ('collectionControlIdentifier' in i === true) {
                     built.push(await this.buildPresentationFormFieldAsync(step, i));
@@ -8594,53 +8826,118 @@ class CollectorFormComponent {
                     else {
                         const s = Math.round((c.dimension / 100) * total);
                         used += s;
-                        const percentageClass = this.getPercentageClassName(c.dimension);
-                        f.className = `${f.className} ${percentageClass}`;
+                        f.className = `${f.className} ${getWidthClass(c.dimension)}`;
                     }
                 }
                 else if (c.dimensionType === DimensionType.Pixels) {
                     const s = Math.round((c.dimension / window.innerWidth) * total);
                     used += s;
-                    const percentageClass = this.getPercentageClassName((s / total) * 100);
-                    f.className = `${f.className} ${percentageClass}`;
+                    f.className = `${f.className} ${getWidthClass((s / total) * 100)}`;
                 }
                 else if (c.autoDimension) {
                     auto.push({ c, f });
                 }
                 else {
                     used += 1;
-                    const percentageClass = this.getPercentageClassName((1 / total) * 100);
-                    f.className = `${f.className} ${percentageClass}`;
+                    f.className = `${f.className} ${getWidthClass((1 / total) * 100)}`;
                 }
             }
             const rem = total - used;
             if (auto.length > 0) {
                 const share = Math.max(Math.floor(rem / auto.length), 1);
                 for (const a of auto) {
-                    const percentageClass = this.getPercentageClassName((share / total) * 100);
-                    a.f.className = `${a.f.className} ${percentageClass}`;
+                    a.f.className = `${a.f.className} ${getWidthClass((share / total) * 100)}`;
                 }
             }
             fields.push(...built);
             return fields;
         };
+        // pendingPrevRowMarginBottom: carries the marginBottom of the preceding row into the
+        // next spacer's marginTop so that "row margin bottom" appears BELOW the row, not above it.
+        let pendingPrevRowMarginBottom = initialPendingMarginBottom;
+        let pendingJustifyContent = undefined;
         for (const c of [...controls, ...presentationControls]) {
             if (('type' in c && c.type === StepControlType.NewRow) ||
                 c.type == PresentationControlType.NewRow) {
                 if (rowItems.length > 0) {
-                    result.push(...(await processRow(rowItems)));
+                    const jc = pendingJustifyContent;
+                    if (jc) {
+                        const rowFields = await processRow(rowItems, true);
+                        result.push({
+                            type: 'row-wrapper',
+                            className: 'percentage-width-12',
+                            props: { justifyContent: jc },
+                            fieldGroup: rowFields
+                        });
+                    }
+                    else {
+                        result.push(...(await processRow(rowItems)));
+                    }
                     rowItems = [];
                 }
+                const newRowControl = c;
+                pendingJustifyContent = newRowControl.rowJustifyContent || undefined;
+                // spacerMarginTop  = bottom margin of the PREVIOUS row (space below it)
+                // spacerMarginBottom = top margin of the CURRENT row  (space above it)
+                const spacerTop = pendingPrevRowMarginBottom;
+                const spacerBottom = newRowControl.rowMarginTop || undefined;
+                pendingPrevRowMarginBottom = newRowControl.rowMarginBottom || undefined;
+                if (spacerTop || spacerBottom) {
+                    result.push({
+                        type: 'row-spacer',
+                        className: 'percentage-width-12',
+                        props: {
+                            spacerMarginTop: spacerTop,
+                            spacerMarginBottom: spacerBottom,
+                        }
+                    });
+                }
             }
             else {
                 rowItems.push(c);
             }
         }
         if (rowItems.length > 0) {
-            result.push(...(await processRow(rowItems)));
+            if (pendingJustifyContent) {
+                const rowFields = await processRow(rowItems, true);
+                result.push({
+                    type: 'row-wrapper',
+                    className: 'percentage-width-12',
+                    props: { justifyContent: pendingJustifyContent },
+                    fieldGroup: rowFields
+                });
+            }
+            else {
+                result.push(...(await processRow(rowItems)));
+            }
+        }
+        // Trailing spacer for the last row's marginBottom
+        if (pendingPrevRowMarginBottom) {
+            result.push({
+                type: 'row-spacer',
+                className: 'percentage-width-12',
+                props: { spacerMarginTop: pendingPrevRowMarginBottom }
+            });
         }
         return result;
     }
+    getFlexWidthClassName(percentageDimension) {
+        const span = Math.round((percentageDimension / 100) * 12);
+        const className = `flex-width-${span}`;
+        if (!document.getElementById(className)) {
+            const style = document.createElement('style');
+            style.type = 'text/css';
+            style.id = className;
+            style.innerHTML = `
+        .${className} {
+          width: ${Math.round((span / 12) * 100)}%;
+          flex-shrink: 1;
+        }
+      `;
+            document.head.appendChild(style);
+        }
+        return className;
+    }
     getPixelClassName(pixelDimension) {
         const className = `pixel-width-${pixelDimension}`;
         if (!document.getElementById(className)) {
@@ -8676,7 +8973,8 @@ class CollectorFormComponent {
             '.component-checkbox',
             '.component-radio',
             '.component-date',
-            '.component-data'
+            '.component-data',
+            '.component-dictionary'
         ];
         let formlyConfig = this.getDefaultFormlyFieldConfig(control, initialType, pattern, componentStyleKey, componentsToExcludeFromStyle);
         //control.specificControlData.type === 3  is email
@@ -8700,8 +8998,8 @@ class CollectorFormComponent {
                         formlyConfig.type = 'input';
                         break;
                     case ManualInputControlType.TextArea:
-                        formlyConfig.type = 'input';
-                        formlyConfig.props['autosize'] = false;
+                        formlyConfig.type = 'textarea';
+                        formlyConfig.props['autosize'] = true;
                         componentStyleKey = '.component-text-field';
                         break;
                     case ManualInputControlType.DateTime:
@@ -8721,7 +9019,11 @@ class CollectorFormComponent {
                 formlyConfig.type = 'formly-paragraph';
                 componentStyleKey = '.component-text-field';
                 const translatedDescription = control.specificControlData?.descriptionTranslations?.find((d) => d.languageIso === this.currentLanguageIso)?.value || '';
+                const translatedParagraphTitle = control.translations?.find((d) => d.languageIso === this.currentLanguageIso)?.value || '';
                 formlyConfig.defaultValue = translatedDescription;
+                formlyConfig.props['translatedDescription'] = translatedDescription;
+                formlyConfig.props['translatedParagraphTitle'] =
+                    translatedParagraphTitle;
                 break;
             case StepControlType.CheckBox: // Checkbox
                 formlyConfig.type = 'formly-checkbox';
@@ -8730,10 +9032,15 @@ class CollectorFormComponent {
                 formlyConfig.props['checked'] = checked;
                 break;
             case StepControlType.Dictionary: // Dictionary (dropdown)
-                componentStyleKey =
-                    control.specificControlData.showAsRadioButtonsList === true
-                        ? '.component-radio'
-                        : '.component-data';
+                if (control.specificControlData.showAsCheckboxes === true) {
+                    componentStyleKey = '.component-checkbox';
+                }
+                else if (control.specificControlData.showAsRadioButtonsList === true) {
+                    componentStyleKey = '.component-radio';
+                }
+                else {
+                    componentStyleKey = '.component-dictionary';
+                }
                 await this.constructDictionary(control, formlyConfig);
                 break;
             case StepControlType.Buttons:
@@ -8849,6 +9156,7 @@ class CollectorFormComponent {
                 title: control.translations?.find((t) => t.languageIso === this.currentLanguageIso)?.value || '',
                 design: this.design,
                 required: control.isMandatory,
+                validateThroughApi: control.specificControlData?.isApiValidation,
                 attributes: {
                     style: componentsToExcludeFromStyle.find((c) => c === componentStyleKey)
                         ? ''
@@ -9067,7 +9375,6 @@ class CollectorFormComponent {
                             formlyConfig.defaultValue = fillValue ? '&check;' : '&cross;';
                             break;
                         case 'object':
-                            // Enriched inherited dictionary format: extract fillValue for display
                             if (fillValue.fillValue !== undefined) {
                                 formlyConfig.defaultValue = fillValue.fillValue;
                             }
@@ -10792,11 +11099,11 @@ class FormlyRadioComponent extends FieldType {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormlyRadioComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FormlyRadioComponent, selector: "formly-radio", usesInheritance: true, ngImport: i0, template: "<div class=\"mat-mdc-text-field-wrapper mdc-radiobox-field\" appExternalLink>\n  <label>\n    <markdown [data]=\"title\"></markdown>\n  </label>\n  <div *ngIf=\"radioOptionsList.length > 0\">\n    <mat-radio-group [value]=\"formControl.value?.id\"\n                     (change)=\"onRadioChange($event)\">\n      <ng-container *ngFor=\"let option of radioOptionsList\">\n        <div>\n          <mat-radio-button [value]=\"option.value.id\">\n            {{ option.label }}\n          </mat-radio-button>\n        </div>\n      </ng-container>\n    </mat-radio-group>\n  </div>\n  <formly-validation-message *ngIf=\"showError\" [field]=\"field\">\n  </formly-validation-message>\n</div>\n", styles: ["formly-validation-message{color:red;font-size:12px}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MarkdownComponent, selector: "markdown, [markdown]", inputs: ["data", "src", "disableSanitizer", "inline", "clipboard", "clipboardButtonComponent", "clipboardButtonTemplate", "emoji", "katex", "katexOptions", "mermaid", "mermaidOptions", "lineHighlight", "line", "lineOffset", "lineNumbers", "start", "commandLine", "filterOutput", "host", "prompt", "output", "user"], outputs: ["error", "load", "ready"] }, { kind: "directive", type: i3$1.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i3$1.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: i4.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { kind: "directive", type: ExternalLinkDirective, selector: "[appExternalLink]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FormlyRadioComponent, selector: "formly-radio", usesInheritance: true, ngImport: i0, template: "<div class=\"mat-mdc-text-field-wrapper mdc-radiobox-field\" appExternalLink>\n  <label [ngStyle]=\"props['design']?.['.font-label']\">\n    <markdown [data]=\"title\"></markdown>\n  </label>\n  <div *ngIf=\"radioOptionsList.length > 0\">\n    <mat-radio-group [value]=\"formControl.value?.id\"\n                     (change)=\"onRadioChange($event)\">\n      <ng-container *ngFor=\"let option of radioOptionsList\">\n        <div>\n          <mat-radio-button [value]=\"option.value.id\">\n            {{ option.label }}\n          </mat-radio-button>\n        </div>\n      </ng-container>\n    </mat-radio-group>\n  </div>\n  <formly-validation-message *ngIf=\"showError\" [field]=\"field\">\n  </formly-validation-message>\n</div>\n", styles: ["formly-validation-message{color:red;font-size:12px}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.MarkdownComponent, selector: "markdown, [markdown]", inputs: ["data", "src", "disableSanitizer", "inline", "clipboard", "clipboardButtonComponent", "clipboardButtonTemplate", "emoji", "katex", "katexOptions", "mermaid", "mermaidOptions", "lineHighlight", "line", "lineOffset", "lineNumbers", "start", "commandLine", "filterOutput", "host", "prompt", "output", "user"], outputs: ["error", "load", "ready"] }, { kind: "directive", type: i3$1.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i3$1.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: i4.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { kind: "directive", type: ExternalLinkDirective, selector: "[appExternalLink]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormlyRadioComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'formly-radio', template: "<div class=\"mat-mdc-text-field-wrapper mdc-radiobox-field\" appExternalLink>\n  <label>\n    <markdown [data]=\"title\"></markdown>\n  </label>\n  <div *ngIf=\"radioOptionsList.length > 0\">\n    <mat-radio-group [value]=\"formControl.value?.id\"\n                     (change)=\"onRadioChange($event)\">\n      <ng-container *ngFor=\"let option of radioOptionsList\">\n        <div>\n          <mat-radio-button [value]=\"option.value.id\">\n            {{ option.label }}\n          </mat-radio-button>\n        </div>\n      </ng-container>\n    </mat-radio-group>\n  </div>\n  <formly-validation-message *ngIf=\"showError\" [field]=\"field\">\n  </formly-validation-message>\n</div>\n", styles: ["formly-validation-message{color:red;font-size:12px}\n"] }]
+            args: [{ selector: 'formly-radio', template: "<div class=\"mat-mdc-text-field-wrapper mdc-radiobox-field\" appExternalLink>\n  <label [ngStyle]=\"props['design']?.['.font-label']\">\n    <markdown [data]=\"title\"></markdown>\n  </label>\n  <div *ngIf=\"radioOptionsList.length > 0\">\n    <mat-radio-group [value]=\"formControl.value?.id\"\n                     (change)=\"onRadioChange($event)\">\n      <ng-container *ngFor=\"let option of radioOptionsList\">\n        <div>\n          <mat-radio-button [value]=\"option.value.id\">\n            {{ option.label }}\n          </mat-radio-button>\n        </div>\n      </ng-container>\n    </mat-radio-group>\n  </div>\n  <formly-validation-message *ngIf=\"showError\" [field]=\"field\">\n  </formly-validation-message>\n</div>\n", styles: ["formly-validation-message{color:red;font-size:12px}\n"] }]
         }] });
 
 class FormlyCheckboxesComponent extends FieldType {
@@ -10913,11 +11220,10 @@ class FormlyScanIdComponent extends FieldType {
     ngOnInit() {
         const group = this.form;
         group.addControl(this.props['identifier'], this.control);
-        this.validFormats = this.props['config'].allowedFormats?.split(',') || [
-            '.jpg',
-            '.png',
-        ];
-        this.maxFileSizeKB = this.props['config'].maxFileSizeKB || 2000;
+        this.validFormats = this.props['config'].fileFormats
+            ? this.props['config'].fileFormats.split(',').map((f) => '.' + f.trim().replace(/^[*.]+/, ''))
+            : ['.jpg', '.png'];
+        this.maxFileSizeKB = this.props['config'].fileMaxSize || 2000;
         if (this.props['config'].collected) {
             const controlId = this.props['config'].componentCollected;
             const value = this.form.get(controlId)?.value ?? this.model?.[controlId];
@@ -11245,28 +11551,24 @@ class FormlyScanIdComponent extends FieldType {
                 ],
         };
         this.appDataService.scanId(command).subscribe({
-            next: async (result) => {
-                console.log('Scan ID result:', result);
+            next: async (isValid) => {
+                console.log('Scan ID result:', isValid);
                 this.isLoading = false;
+                if (!isValid) {
+                    this.fileError =
+                        this.props['errorMessages']?.invalidStatus ||
+                            'Invalid status response.';
+                    this.canRetry = true;
+                    this.control.setErrors({ invalidStatus: true });
+                    this.cdr.detectChanges();
+                    return;
+                }
                 const appData = await this.appDataService.getSteps(this.props['appDataId']);
-                if (appData) {
-                    const status = this.extractStatusFromAppData(appData);
-                    console.log('[SCAN-ID] extracted status:', status);
-                    if (status?.toLowerCase().includes('invalid')) {
-                        this.fileError =
-                            this.props['errorMessages']?.invalidStatus ||
-                                'Invalid status response.';
-                        this.canRetry = true;
-                        this.control.setErrors({ invalidStatus: true });
-                        this.cdr.detectChanges();
-                        return;
-                    }
-                    this.isScanValid = true;
-                    this.successMessage = 'Upload successful!';
-                    this.wizardSteps.forEach((s) => (s.status = 'completed'));
-                    if (this.props['event']) {
-                        this.props['event'](appData);
-                    }
+                this.isScanValid = true;
+                this.successMessage = 'Upload successful!';
+                this.wizardSteps.forEach((s) => (s.status = 'completed'));
+                if (this.props['event'] && appData) {
+                    this.props['event'](appData);
                 }
                 this.cdr.detectChanges();
             },
@@ -13511,6 +13813,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             args: [{ selector: 'app-formly-open-banking', template: "<div class=\"open-banking-container\">\n  <!-- Initial State -->\n  <div *ngIf=\"isInitialState\" class=\"state-initial\">\n    <div class=\"message-container\">\n      <p class=\"message\">{{ initialMessage }}</p>\n      <button mat-raised-button color=\"primary\" (click)=\"proceedToNextStep()\" [disabled]=\"isLoadingSubject | async\">\n        {{ nextButtonLabel }}\n      </button>\n    </div>\n  </div>\n\n  <!-- Bank Selection State -->\n  <div *ngIf=\"isBankSelectionState\" class=\"state-bank-selection\">\n    <h3 class=\"section-title\">{{ selectBankTitle }}</h3>\n\n    <!-- Bank Grid -->\n    <div class=\"banks-grid\" *ngIf=\"banks.length > 0\">\n      <div\n        *ngFor=\"let bank of banks\"\n        class=\"bank-card\"\n        [class.selected]=\"selectedBank === bank.bankCode\"\n        (click)=\"selectBank(bank)\">\n        <div class=\"bank-logo\" *ngIf=\"bank.logoUrl\">\n          <img [src]=\"bank.logoUrl\" [alt]=\"bank.displayName\">\n        </div>\n        <div class=\"bank-info\">\n          <h4>{{ bank.displayName }}</h4>\n          <span class=\"bank-code\">{{ bank.bankCode }}</span>\n        </div>\n        <mat-icon class=\"check-icon\" *ngIf=\"selectedBank === bank.bankCode\">check_circle</mat-icon>\n      </div>\n    </div>\n\n    <button\n      mat-raised-button\n      color=\"primary\"\n      (click)=\"proceedToNextStep()\"\n      [disabled]=\"!selectedBank || (isLoadingSubject | async)\"\n      class=\"m-t-16\">\n      {{ continueButtonLabel }}\n    </button>\n  </div>\n\n  <!-- Consent State -->\n  <div *ngIf=\"isConsentState\" class=\"state-consent\">\n    <div class=\"consent-header\">\n      <h3>{{ consentTitle }}</h3>\n      <p>{{ consentDescription }}</p>\n    </div>\n\n    <!-- Show iframe only if we have an authorization URL -->\n    <div class=\"consent-container\" *ngIf=\"authorizationUrl\">\n      <iframe\n        [src]=\"authorizationUrl\"\n        class=\"consent-iframe\"\n        frameborder=\"0\"\n        allowfullscreen\n        sandbox=\"allow-forms allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-top-navigation\">\n      </iframe>\n    </div>\n\n    <!-- Show waiting message when consent is in popup or iframe failed -->\n    <div class=\"consent-waiting\" *ngIf=\"!authorizationUrl\">\n      <mat-spinner diameter=\"40\"></mat-spinner>\n      <p>{{ waitingForAuthorizationText }}</p>\n      <p class=\"consent-popup-hint\">\n        <mat-icon>open_in_new</mat-icon>\n        <span>{{ popupWindowMessage }}</span>\n      </p>\n      <p class=\"consent-popup-note\">\n        {{ popupBlockerMessage }}\n      </p>\n    </div>\n  </div>\n\n  <!-- Processing State -->\n  <div *ngIf=\"isProcessingState\" class=\"state-processing\">\n    <div class=\"loading-container\">\n      <mat-spinner diameter=\"50\"></mat-spinner>\n      <p class=\"loading-message\">{{ waitingMessage }}</p>\n      <div class=\"progress-details\">\n        <p *ngIf=\"accounts.length > 0\">\n          {{ accountsRetrievedLabel }}: {{ accounts.length }}\n        </p>\n        <p *ngIf=\"transactions.length > 0\">\n          {{ transactionsRetrievedLabel }}: {{ transactions.length }}\n        </p>\n      </div>\n    </div>\n  </div>\n\n  <!-- Error State -->\n  <div *ngIf=\"isErrorState\" class=\"state-error\">\n    <div class=\"error-container\">\n      <mat-icon color=\"warn\" class=\"error-icon\">error_outline</mat-icon>\n      <p class=\"error-message\">{{ errorMessage }}</p>\n      <button mat-raised-button color=\"primary\" (click)=\"retry()\">\n        {{ retryButtonLabel }}\n      </button>\n    </div>\n  </div>\n\n  <!-- Complete State -->\n  <div *ngIf=\"isCompleteState\" class=\"state-complete\">\n    <div class=\"success-container\">\n      <mat-icon color=\"primary\" class=\"success-icon\">check_circle</mat-icon>\n      <p class=\"success-message\">{{ completionMessage }}</p>\n\n      <!-- Display summary of accounts found -->\n      <div class=\"accounts-summary\" *ngIf=\"accounts.length > 0\">\n        <h4>{{ accountsSummaryText }}</h4>\n        <div class=\"accounts-list\">\n          <div class=\"account-card\" *ngFor=\"let account of accounts\">\n            <div class=\"account-header\">\n              <mat-icon class=\"account-icon\">account_balance</mat-icon>\n              <div class=\"account-info\">\n                <div class=\"account-name\">{{ account.name || 'Account' }}</div>\n                <div class=\"account-iban\">{{ account.iban }}</div>\n              </div>\n            </div>\n            <div class=\"account-details\">\n              <div class=\"account-balance\">\n                <span class=\"balance-amount\">{{ account.balance | currency:account.currency:'symbol':'1.2-2' }}</span>\n              </div>\n              <div class=\"account-holder\">{{ account.accountHolderName }}</div>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"transaction-summary\" *ngIf=\"transactions.length > 0\">\n          <p>{{ transactionsSummaryText }}</p>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>", styles: [".open-banking-container{padding:20px;min-height:400px}.open-banking-container .section-title{margin-bottom:20px;font-size:1.25rem;font-weight:500;color:#000000de}.open-banking-container .message-container,.open-banking-container .loading-container,.open-banking-container .error-container,.open-banking-container .success-container{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:200px}.open-banking-container .message,.open-banking-container .loading-message,.open-banking-container .error-message,.open-banking-container .success-message{font-size:1rem;margin:20px 0;max-width:600px;line-height:1.5}.open-banking-container .error-message{color:#f44336}.open-banking-container .success-message{color:#4caf50}.open-banking-container .error-icon,.open-banking-container .success-icon{font-size:48px;width:48px;height:48px}.open-banking-container .state-bank-selection .banks-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-bottom:24px}.open-banking-container .state-bank-selection .bank-card{border:2px solid #e0e0e0;border-radius:8px;padding:16px;cursor:pointer;transition:all .3s ease;position:relative;background:#fff;min-height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center}.open-banking-container .state-bank-selection .bank-card:hover{border-color:#3f51b5;box-shadow:0 4px 8px #0000001a;transform:translateY(-2px)}.open-banking-container .state-bank-selection .bank-card.selected{border-color:#3f51b5;background:#f5f7ff}.open-banking-container .state-bank-selection .bank-card .bank-logo{width:80px;height:40px;margin-bottom:8px;display:flex;align-items:center;justify-content:center}.open-banking-container .state-bank-selection .bank-card .bank-logo img{max-width:100%;max-height:100%;object-fit:contain}.open-banking-container .state-bank-selection .bank-card .bank-info{text-align:center}.open-banking-container .state-bank-selection .bank-card .bank-info h4{margin:0;font-size:.9rem;font-weight:500;color:#333}.open-banking-container .state-bank-selection .bank-card .bank-info .bank-code{font-size:.75rem;color:#666;margin-top:4px;display:block}.open-banking-container .state-bank-selection .bank-card .check-icon{position:absolute;top:8px;right:8px;color:#3f51b5;font-size:20px}.open-banking-container .state-bank-selection .bank-dropdown{margin:20px 0}.open-banking-container .state-bank-selection .bank-selector{width:100%;max-width:400px}.open-banking-container .state-consent .consent-header{text-align:center;margin-bottom:20px}.open-banking-container .state-consent .consent-header h3{font-size:1.25rem;font-weight:500;margin-bottom:8px}.open-banking-container .state-consent .consent-header p{color:#666;font-size:.95rem}.open-banking-container .state-consent .consent-container{width:100%;height:600px;border:1px solid #e0e0e0;border-radius:4px;overflow:hidden;background:#fff}.open-banking-container .state-consent .consent-iframe{width:100%;height:100%}.open-banking-container .state-consent .consent-waiting{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:300px}.open-banking-container .state-consent .consent-waiting p{margin-top:16px;color:#666}.open-banking-container .state-consent .consent-waiting .consent-popup-hint{display:flex;align-items:center;gap:8px;margin-top:24px;font-size:1.1rem;color:#333}.open-banking-container .state-consent .consent-waiting .consent-popup-hint mat-icon{color:#3f51b5}.open-banking-container .state-consent .consent-waiting .consent-popup-note{margin-top:12px;font-size:.9rem;color:#999;font-style:italic}.open-banking-container .progress-details{margin-top:20px}.open-banking-container .progress-details p{font-size:.9rem;color:#666;margin:4px 0}.open-banking-container .accounts-summary{margin-top:30px;width:100%;max-width:800px}.open-banking-container .accounts-summary h4{font-size:1.15rem;font-weight:500;margin-bottom:20px;color:#000000de}.open-banking-container .accounts-summary .accounts-list{display:flex;flex-direction:column;gap:16px}.open-banking-container .accounts-summary .account-card{border:1px solid #e0e0e0;border-radius:8px;padding:16px;background:#fff;box-shadow:0 1px 3px #0000001a;transition:box-shadow .2s ease}.open-banking-container .accounts-summary .account-card:hover{box-shadow:0 2px 6px #00000026}.open-banking-container .accounts-summary .account-header{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px}.open-banking-container .accounts-summary .account-icon{color:#3f51b5;margin-top:2px}.open-banking-container .accounts-summary .account-info{flex:1}.open-banking-container .accounts-summary .account-name{font-weight:500;font-size:1rem;color:#333;margin-bottom:4px}.open-banking-container .accounts-summary .account-iban{font-size:.85rem;color:#666;font-family:Courier New,monospace;letter-spacing:.5px}.open-banking-container .accounts-summary .account-details{display:flex;justify-content:space-between;align-items:center;padding-left:36px}.open-banking-container .accounts-summary .account-balance{display:flex;flex-direction:column}.open-banking-container .accounts-summary .balance-amount{font-size:1.25rem;font-weight:600;color:#4caf50}.open-banking-container .accounts-summary .account-holder{font-size:.9rem;color:#666;text-align:right}.open-banking-container .accounts-summary .transaction-summary{margin-top:16px;padding:12px;background:#e8f5e9;border-radius:4px}.open-banking-container .accounts-summary .transaction-summary p{margin:0;color:#2e7d32;font-size:.95rem}.open-banking-container ::ng-deep .mat-spinner{margin:0 auto}.open-banking-container ::ng-deep .mat-progress-spinner circle,.open-banking-container ::ng-deep .mat-spinner circle{stroke:#3f51b5}@media (max-width: 768px){.open-banking-container{padding:10px}.open-banking-container .state-bank-selection .banks-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}.open-banking-container .state-bank-selection .bank-card{min-height:100px;padding:12px}.open-banking-container .state-bank-selection .bank-card .bank-logo{width:60px;height:30px}.open-banking-container .consent-container{height:500px}.open-banking-container .accounts-summary{max-width:100%}}@media (max-width: 480px){.open-banking-container .state-bank-selection .banks-grid{grid-template-columns:1fr}}\n"] }]
         }], ctorParameters: () => [{ type: OpenBankingService }, { type: DialogService }, { type: i3$2.DomSanitizer }, { type: i0.ChangeDetectorRef }] });
 
+class RowSpacerComponent extends FieldType {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RowSpacerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: RowSpacerComponent, selector: "formly-row-spacer", usesInheritance: true, ngImport: i0, template: `<div class="row-spacer" [style.paddingTop]="props['spacerMarginTop']" [style.paddingBottom]="props['spacerMarginBottom']"></div>`, isInline: true, styles: [".row-spacer{width:100%}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RowSpacerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'formly-row-spacer', template: `<div class="row-spacer" [style.paddingTop]="props['spacerMarginTop']" [style.paddingBottom]="props['spacerMarginBottom']"></div>`, styles: [".row-spacer{width:100%}\n"] }]
+        }] });
+
+class RowWrapperComponent extends FieldType {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RowWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: RowWrapperComponent, selector: "formly-row-wrapper", usesInheritance: true, ngImport: i0, template: `
+    <div
+      class="row-wrapper"
+      [style.justifyContent]="props['justifyContent'] || 'flex-start'"
+    >
+      <ng-container *ngFor="let f of field.fieldGroup">
+        <formly-field [field]="f" [ngClass]="f.className"></formly-field>
+      </ng-container>
+    </div>
+  `, isInline: true, styles: [".row-wrapper{display:flex;width:100%;gap:5px;grid-column:span 12}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i4.FormlyField, selector: "formly-field", inputs: ["field"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RowWrapperComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'formly-row-wrapper', template: `
+    <div
+      class="row-wrapper"
+      [style.justifyContent]="props['justifyContent'] || 'flex-start'"
+    >
+      <ng-container *ngFor="let f of field.fieldGroup">
+        <formly-field [field]="f" [ngClass]="f.className"></formly-field>
+      </ng-container>
+    </div>
+  `, styles: [".row-wrapper{display:flex;width:100%;gap:5px;grid-column:span 12}\n"] }]
+        }] });
+
 var themeCss = `
 @import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap");
 @import url("https://fonts.googleapis.com/icon?family=Material+Icons");
@@ -15808,6 +16146,8 @@ class OriginFormModule {
             FormlyRadioComponent,
             FormlyCheckboxesComponent,
             RowFillerComponent,
+            RowSpacerComponent,
+            RowWrapperComponent,
             FormlyScanIdComponent,
             FormlySignComponent,
             FormlyUploadDocumentsComponent,
@@ -15943,6 +16283,8 @@ class OriginFormModule {
                     { name: 'separator', component: FormSectionSeparatorComponent },
                     { name: 'custom-section', component: CustomSectionComponent },
                     { name: 'row-filler', component: RowFillerComponent },
+                    { name: 'row-spacer', component: RowSpacerComponent },
+                    { name: 'row-wrapper', component: RowWrapperComponent },
                     {
                         name: 'formly-identification-component',
                         component: FormlyFieldIdentificationComponent,
@@ -16012,6 +16354,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         FormlyRadioComponent,
                         FormlyCheckboxesComponent,
                         RowFillerComponent,
+                        RowSpacerComponent,
+                        RowWrapperComponent,
                         FormlyScanIdComponent,
                         FormlySignComponent,
                         FormlyUploadDocumentsComponent,
@@ -16092,6 +16436,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                                 { name: 'separator', component: FormSectionSeparatorComponent },
                                 { name: 'custom-section', component: CustomSectionComponent },
                                 { name: 'row-filler', component: RowFillerComponent },
+                                { name: 'row-spacer', component: RowSpacerComponent },
+                                { name: 'row-wrapper', component: RowWrapperComponent },
                                 {
                                     name: 'formly-identification-component',
                                     component: FormlyFieldIdentificationComponent,