@qbs-origin/origin-form 0.6.2 → 0.6.5

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

@@ -2666,10 +2666,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 class FormModel {
 }
 class AppDataControl {
-    constructor(controlId = '', fillValue = '', fillValueId = '') {
+    constructor(controlId = '', fillValue = '', fillValueId = '', fillValues, fillValueIds) {
         this.controlId = controlId || '';
         this.fillValue = fillValue || '';
         this.fillValueId = fillValueId || '';
+        this.fillValues = fillValues;
+        this.fillValueIds = fillValueIds;
     }
 }
 class AppDataSection {
@@ -4376,12 +4378,28 @@ class AppTreeviewComponent {
         const filterValue = event.target.value;
         return this.filterText(filterValue);
     }
+    updateSelectionByIds(ids) {
+        if (!this.treeControl.dataNodes)
+            return;
+        // Clear current selection
+        this.checklistSelection.clear();
+        // Select nodes that match the IDs
+        this.treeControl.dataNodes.forEach((node) => {
+            if (node.data && ids.includes(node.data.id)) {
+                this.checklistSelection.select(node);
+                node.isSelected = true;
+            }
+            else {
+                node.isSelected = false;
+            }
+        });
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AppTreeviewComponent, deps: [{ token: ChecklistDatabase }, { token: TranslatePipe }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: AppTreeviewComponent, selector: "app-treeview", inputs: { allowAddItems: "allowAddItems", autoSelectDescendants: "autoSelectDescendants", allowCheckItems: "allowCheckItems", allowFilter: "allowFilter" }, outputs: { selectionChanged: "selectionChanged" }, providers: [ChecklistDatabase], ngImport: i0, template: "<mat-form-field class=\"full-width p-10\"\n                *ngIf=\"allowFilter\"\n                appearance=\"outline\">\n  <mat-label> {{ commonKeys.actions.filter | translate }}</mat-label>\n  <input matInput\n         minlength=\"1\"\n         (keyup)=\"applyFilter($event)\"\n         placeholder=\"{{ commonKeys.actions.filter }}\"\n         #input />\n</mat-form-field>\n\n<!--<cdk-virtual-scroll-viewport itemSize=\"30\" class=\"dictionary-viewport\">-->\n<mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\n  <!-- Leaf Nodes -->\n  <mat-tree-node *matTreeNodeDef=\"let node\"\n                 matTreeNodePadding>\n    <button mat-icon-button disabled></button>\n    <!-- Node Content -->\n    <ng-container>\n      <!-- Checkbox for Selectable Nodes when checkboxes are allowed -->\n      <ng-container *ngIf=\"node.canSelect && allowCheckItems\">\n        <mat-checkbox class=\"checklist-leaf-node\"\n                      [checked]=\"checklistSelection.isSelected(node)\"\n                      (change)=\"leafItemSelectionToggle(node)\"\n                      color=\"primary\">\n          {{ node.name }}\n        </mat-checkbox>\n      </ng-container>\n      <!-- Clickable Label for Selectable Nodes when checkboxes are not allowed -->\n      <ng-container *ngIf=\"node.canSelect && !allowCheckItems\">\n        <mat-label class=\"mdc-label\"\n                   style=\"cursor: pointer\"\n                   (click)=\"leafItemSelectionToggle(node)\">\n          {{ node.name }}\n        </mat-label>\n      </ng-container>\n      <!-- Non-clickable Label for Non-selectable Nodes -->\n      <ng-container *ngIf=\"!node.canSelect\">\n        <mat-label class=\"mdc-label\">\n          {{ node.name }}\n        </mat-label>\n      </ng-container>\n    </ng-container>\n  </mat-tree-node>\n\n  <!-- Nodes with Children -->\n  <mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\"\n                 matTreeNodePadding>\n    <!-- Expand/Collapse Button -->\n    <button mat-icon-button\n            matTreeNodeToggle\n            [attr.aria-label]=\"'Toggle ' + node.name\"\n            *ngIf=\"!node.hideArrow\">\n      <mat-icon class=\"mat-icon-rtl-mirror\">\n        {{ treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\n      </mat-icon>\n    </button>\n    <!-- Node Content -->\n    <ng-container>\n      <!-- Checkbox for Selectable Nodes when checkboxes are allowed -->\n      <ng-container *ngIf=\"node.canSelect && allowCheckItems\">\n        <mat-checkbox [checked]=\"checklistSelection.isSelected(node)\"\n                      (change)=\"selectionToggle(node)\"\n                      color=\"primary\">\n          {{ node.name }}\n        </mat-checkbox>\n      </ng-container>\n      <!-- Clickable Label for Selectable Nodes when checkboxes are not allowed -->\n      <ng-container *ngIf=\"node.canSelect && !allowCheckItems\">\n        <mat-label class=\"mdc-label\"\n                   style=\"cursor: pointer\"\n                   (click)=\"leafItemSelectionToggle(node)\">\n          {{ node.name }}\n        </mat-label>\n      </ng-container>\n      <!-- Non-clickable Label for Non-selectable Nodes -->\n      <ng-container *ngIf=\"!node.canSelect\">\n        <mat-label class=\"mdc-label\">\n          {{ node.name }}\n        </mat-label>\n      </ng-container>\n    </ng-container>\n    <!-- Add New Item Button -->\n    <button mat-icon-button (click)=\"addNewItem(node)\" *ngIf=\"allowAddItems\">\n      <mat-icon>add</mat-icon>\n    </button>\n  </mat-tree-node>\n</mat-tree>\n<!--</cdk-virtual-scroll-viewport>-->\n", styles: [".dictionary-viewport{height:400px;width:100%}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatLabel, selector: "mat-label" }, { kind: "component", type: i4$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i7.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i7.MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "directive", type: i7.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i7.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i7.MatTreeNode, selector: "mat-tree-node", inputs: ["tabIndex", "disabled"], outputs: ["activation", "expandedChange"], exportAs: ["matTreeNode"] }, { kind: "component", type: i4$3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i5$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: AppTreeviewComponent, selector: "app-treeview", inputs: { allowAddItems: "allowAddItems", autoSelectDescendants: "autoSelectDescendants", allowCheckItems: "allowCheckItems", allowFilter: "allowFilter" }, outputs: { selectionChanged: "selectionChanged" }, providers: [ChecklistDatabase], ngImport: i0, template: "<mat-form-field class=\"full-width p-10\"\n                *ngIf=\"allowFilter\"\n                appearance=\"outline\">\n  <mat-label> {{ commonKeys.actions.filter | translate }}</mat-label>\n  <input matInput\n         minlength=\"1\"\n         (keyup)=\"applyFilter($event)\"\n         placeholder=\"{{ commonKeys.actions.filter }}\"\n         #input />\n</mat-form-field>\n\n<!--<cdk-virtual-scroll-viewport itemSize=\"30\" class=\"dictionary-viewport\">-->\n<mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\n  <!-- Leaf Nodes -->\n  <mat-tree-node *matTreeNodeDef=\"let node\"\n                 matTreeNodePadding>\n    <button mat-icon-button disabled></button>\n    <!-- Node Content -->\n    <ng-container>\n      <!-- Checkbox for Selectable Nodes when checkboxes are allowed -->\n      <ng-container *ngIf=\"node.canSelect && allowCheckItems\">\n        <mat-checkbox class=\"checklist-leaf-node\"\n                      [checked]=\"checklistSelection.isSelected(node)\"\n                      (change)=\"leafItemSelectionToggle(node)\"\n                      (click)=\"$event.stopPropagation()\"\n                      color=\"primary\">\n          {{ node.name }}\n        </mat-checkbox>\n      </ng-container>\n      <!-- Clickable Label for Selectable Nodes when checkboxes are not allowed -->\n      <ng-container *ngIf=\"node.canSelect && !allowCheckItems\">\n        <mat-label class=\"mdc-label\"\n                   style=\"cursor: pointer\"\n                   (click)=\"leafItemSelectionToggle(node)\">\n          {{ node.name }}\n        </mat-label>\n      </ng-container>\n      <!-- Non-clickable Label for Non-selectable Nodes -->\n      <ng-container *ngIf=\"!node.canSelect\">\n        <mat-label class=\"mdc-label\">\n          {{ node.name }}\n        </mat-label>\n      </ng-container>\n    </ng-container>\n  </mat-tree-node>\n\n  <!-- Nodes with Children -->\n  <mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\"\n                 matTreeNodePadding>\n    <!-- Expand/Collapse Button -->\n    <button mat-icon-button\n            matTreeNodeToggle\n            [attr.aria-label]=\"'Toggle ' + node.name\"\n            *ngIf=\"!node.hideArrow\">\n      <mat-icon class=\"mat-icon-rtl-mirror\">\n        {{ treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\n      </mat-icon>\n    </button>\n    <!-- Node Content -->\n    <ng-container>\n      <!-- Checkbox for Selectable Nodes when checkboxes are allowed -->\n      <ng-container *ngIf=\"node.canSelect && allowCheckItems && treeControl.getLevel(node) > 0\">\n        <mat-checkbox [checked]=\"checklistSelection.isSelected(node)\"\n                      (change)=\"selectionToggle(node)\"\n                      (click)=\"$event.stopPropagation()\"\n                      color=\"primary\">\n          {{ node.name }}\n        </mat-checkbox>\n      </ng-container>\n      <!-- Clickable Label for Selectable Nodes when checkboxes are not allowed -->\n      <ng-container *ngIf=\"node.canSelect && !allowCheckItems\">\n        <mat-label class=\"mdc-label\"\n                   style=\"cursor: pointer\"\n                   (click)=\"leafItemSelectionToggle(node)\">\n          {{ node.name }}\n        </mat-label>\n      </ng-container>\n      <!-- Non-clickable Label for Non-selectable Nodes -->\n      <ng-container *ngIf=\"!node.canSelect\">\n        <mat-label class=\"mdc-label\">\n          {{ node.name }}\n        </mat-label>\n      </ng-container>\n    </ng-container>\n    <!-- Add New Item Button -->\n    <button mat-icon-button (click)=\"addNewItem(node)\" *ngIf=\"allowAddItems\">\n      <mat-icon>add</mat-icon>\n    </button>\n  </mat-tree-node>\n</mat-tree>\n<!--</cdk-virtual-scroll-viewport>-->\n", styles: [".dictionary-viewport{height:400px;width:100%}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatLabel, selector: "mat-label" }, { kind: "component", type: i4$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i7.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i7.MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "directive", type: i7.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i7.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i7.MatTreeNode, selector: "mat-tree-node", inputs: ["tabIndex", "disabled"], outputs: ["activation", "expandedChange"], exportAs: ["matTreeNode"] }, { kind: "component", type: i4$3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i5$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AppTreeviewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-treeview', providers: [ChecklistDatabase], template: "<mat-form-field class=\"full-width p-10\"\n                *ngIf=\"allowFilter\"\n                appearance=\"outline\">\n  <mat-label> {{ commonKeys.actions.filter | translate }}</mat-label>\n  <input matInput\n         minlength=\"1\"\n         (keyup)=\"applyFilter($event)\"\n         placeholder=\"{{ commonKeys.actions.filter }}\"\n         #input />\n</mat-form-field>\n\n<!--<cdk-virtual-scroll-viewport itemSize=\"30\" class=\"dictionary-viewport\">-->\n<mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\n  <!-- Leaf Nodes -->\n  <mat-tree-node *matTreeNodeDef=\"let node\"\n                 matTreeNodePadding>\n    <button mat-icon-button disabled></button>\n    <!-- Node Content -->\n    <ng-container>\n      <!-- Checkbox for Selectable Nodes when checkboxes are allowed -->\n      <ng-container *ngIf=\"node.canSelect && allowCheckItems\">\n        <mat-checkbox class=\"checklist-leaf-node\"\n                      [checked]=\"checklistSelection.isSelected(node)\"\n                      (change)=\"leafItemSelectionToggle(node)\"\n                      color=\"primary\">\n          {{ node.name }}\n        </mat-checkbox>\n      </ng-container>\n      <!-- Clickable Label for Selectable Nodes when checkboxes are not allowed -->\n      <ng-container *ngIf=\"node.canSelect && !allowCheckItems\">\n        <mat-label class=\"mdc-label\"\n                   style=\"cursor: pointer\"\n                   (click)=\"leafItemSelectionToggle(node)\">\n          {{ node.name }}\n        </mat-label>\n      </ng-container>\n      <!-- Non-clickable Label for Non-selectable Nodes -->\n      <ng-container *ngIf=\"!node.canSelect\">\n        <mat-label class=\"mdc-label\">\n          {{ node.name }}\n        </mat-label>\n      </ng-container>\n    </ng-container>\n  </mat-tree-node>\n\n  <!-- Nodes with Children -->\n  <mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\"\n                 matTreeNodePadding>\n    <!-- Expand/Collapse Button -->\n    <button mat-icon-button\n            matTreeNodeToggle\n            [attr.aria-label]=\"'Toggle ' + node.name\"\n            *ngIf=\"!node.hideArrow\">\n      <mat-icon class=\"mat-icon-rtl-mirror\">\n        {{ treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\n      </mat-icon>\n    </button>\n    <!-- Node Content -->\n    <ng-container>\n      <!-- Checkbox for Selectable Nodes when checkboxes are allowed -->\n      <ng-container *ngIf=\"node.canSelect && allowCheckItems\">\n        <mat-checkbox [checked]=\"checklistSelection.isSelected(node)\"\n                      (change)=\"selectionToggle(node)\"\n                      color=\"primary\">\n          {{ node.name }}\n        </mat-checkbox>\n      </ng-container>\n      <!-- Clickable Label for Selectable Nodes when checkboxes are not allowed -->\n      <ng-container *ngIf=\"node.canSelect && !allowCheckItems\">\n        <mat-label class=\"mdc-label\"\n                   style=\"cursor: pointer\"\n                   (click)=\"leafItemSelectionToggle(node)\">\n          {{ node.name }}\n        </mat-label>\n      </ng-container>\n      <!-- Non-clickable Label for Non-selectable Nodes -->\n      <ng-container *ngIf=\"!node.canSelect\">\n        <mat-label class=\"mdc-label\">\n          {{ node.name }}\n        </mat-label>\n      </ng-container>\n    </ng-container>\n    <!-- Add New Item Button -->\n    <button mat-icon-button (click)=\"addNewItem(node)\" *ngIf=\"allowAddItems\">\n      <mat-icon>add</mat-icon>\n    </button>\n  </mat-tree-node>\n</mat-tree>\n<!--</cdk-virtual-scroll-viewport>-->\n", styles: [".dictionary-viewport{height:400px;width:100%}\n"] }]
+            args: [{ selector: 'app-treeview', providers: [ChecklistDatabase], template: "<mat-form-field class=\"full-width p-10\"\n                *ngIf=\"allowFilter\"\n                appearance=\"outline\">\n  <mat-label> {{ commonKeys.actions.filter | translate }}</mat-label>\n  <input matInput\n         minlength=\"1\"\n         (keyup)=\"applyFilter($event)\"\n         placeholder=\"{{ commonKeys.actions.filter }}\"\n         #input />\n</mat-form-field>\n\n<!--<cdk-virtual-scroll-viewport itemSize=\"30\" class=\"dictionary-viewport\">-->\n<mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\n  <!-- Leaf Nodes -->\n  <mat-tree-node *matTreeNodeDef=\"let node\"\n                 matTreeNodePadding>\n    <button mat-icon-button disabled></button>\n    <!-- Node Content -->\n    <ng-container>\n      <!-- Checkbox for Selectable Nodes when checkboxes are allowed -->\n      <ng-container *ngIf=\"node.canSelect && allowCheckItems\">\n        <mat-checkbox class=\"checklist-leaf-node\"\n                      [checked]=\"checklistSelection.isSelected(node)\"\n                      (change)=\"leafItemSelectionToggle(node)\"\n                      (click)=\"$event.stopPropagation()\"\n                      color=\"primary\">\n          {{ node.name }}\n        </mat-checkbox>\n      </ng-container>\n      <!-- Clickable Label for Selectable Nodes when checkboxes are not allowed -->\n      <ng-container *ngIf=\"node.canSelect && !allowCheckItems\">\n        <mat-label class=\"mdc-label\"\n                   style=\"cursor: pointer\"\n                   (click)=\"leafItemSelectionToggle(node)\">\n          {{ node.name }}\n        </mat-label>\n      </ng-container>\n      <!-- Non-clickable Label for Non-selectable Nodes -->\n      <ng-container *ngIf=\"!node.canSelect\">\n        <mat-label class=\"mdc-label\">\n          {{ node.name }}\n        </mat-label>\n      </ng-container>\n    </ng-container>\n  </mat-tree-node>\n\n  <!-- Nodes with Children -->\n  <mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\"\n                 matTreeNodePadding>\n    <!-- Expand/Collapse Button -->\n    <button mat-icon-button\n            matTreeNodeToggle\n            [attr.aria-label]=\"'Toggle ' + node.name\"\n            *ngIf=\"!node.hideArrow\">\n      <mat-icon class=\"mat-icon-rtl-mirror\">\n        {{ treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\n      </mat-icon>\n    </button>\n    <!-- Node Content -->\n    <ng-container>\n      <!-- Checkbox for Selectable Nodes when checkboxes are allowed -->\n      <ng-container *ngIf=\"node.canSelect && allowCheckItems && treeControl.getLevel(node) > 0\">\n        <mat-checkbox [checked]=\"checklistSelection.isSelected(node)\"\n                      (change)=\"selectionToggle(node)\"\n                      (click)=\"$event.stopPropagation()\"\n                      color=\"primary\">\n          {{ node.name }}\n        </mat-checkbox>\n      </ng-container>\n      <!-- Clickable Label for Selectable Nodes when checkboxes are not allowed -->\n      <ng-container *ngIf=\"node.canSelect && !allowCheckItems\">\n        <mat-label class=\"mdc-label\"\n                   style=\"cursor: pointer\"\n                   (click)=\"leafItemSelectionToggle(node)\">\n          {{ node.name }}\n        </mat-label>\n      </ng-container>\n      <!-- Non-clickable Label for Non-selectable Nodes -->\n      <ng-container *ngIf=\"!node.canSelect\">\n        <mat-label class=\"mdc-label\">\n          {{ node.name }}\n        </mat-label>\n      </ng-container>\n    </ng-container>\n    <!-- Add New Item Button -->\n    <button mat-icon-button (click)=\"addNewItem(node)\" *ngIf=\"allowAddItems\">\n      <mat-icon>add</mat-icon>\n    </button>\n  </mat-tree-node>\n</mat-tree>\n<!--</cdk-virtual-scroll-viewport>-->\n", styles: [".dictionary-viewport{height:400px;width:100%}\n"] }]
         }], ctorParameters: () => [{ type: ChecklistDatabase }, { type: TranslatePipe }], propDecorators: { allowAddItems: [{
                 type: Input
             }], autoSelectDescendants: [{
@@ -4438,6 +4456,13 @@ class DictionariesTreeComponent {
             let text = changes['filterText'].currentValue;
             this.treeViewControl.filterText(text);
         }
+        // Sync selection when selectedValueIds changes
+        if (changes['selectedValueIds'] && this.treeViewControl && this.allowCheckItems) {
+            const newIds = changes['selectedValueIds'].currentValue;
+            if (newIds) {
+                this.treeViewControl.updateSelectionByIds(newIds);
+            }
+        }
     }
     ngAfterViewInit() {
         // If we have a main dictionary but haven't built the tree yet, build it now
@@ -4645,11 +4670,11 @@ class DictionariesTreeComponent {
         return JSON.parse(news);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DictionariesTreeComponent, deps: [{ token: DictionaryService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DictionariesTreeComponent, selector: "app-dictionaries-tree", inputs: { dictionaryId: "dictionaryId", selectedValueIds: "selectedValueIds", allowCheckItems: "allowCheckItems", allowFilter: "allowFilter", drawReferenceDictionariesAsSeparateNode: "drawReferenceDictionariesAsSeparateNode", drawChildDictionariesAsSeparateNode: "drawChildDictionariesAsSeparateNode", drawRootNode: "drawRootNode", filterText: "filterText", allowSelectNonLeafNodes: "allowSelectNonLeafNodes", languageId: "languageId", valuesIdsToShow: "valuesIdsToShow", hideParentArrow: "hideParentArrow", preloadedDictionary: "preloadedDictionary", preloadedDictionaries: "preloadedDictionaries", usePreloadedData: "usePreloadedData" }, outputs: { selectedDictionaryValuesChanged: "selectedDictionaryValuesChanged" }, viewQueries: [{ propertyName: "treeViewControl", first: true, predicate: ["treeView"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<mat-spinner *ngIf=\"isLoading === true\" class=\"m-x-auto\"></mat-spinner>\n<app-treeview #treeView [autoSelectDescendants]=\"false\"\n              [allowCheckItems]=\"allowCheckItems\"\n              [allowFilter]=\"allowFilter\"\n              (selectionChanged)=\"onTreeSelectionChanged($event)\">\n\n</app-treeview>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: AppTreeviewComponent, selector: "app-treeview", inputs: ["allowAddItems", "autoSelectDescendants", "allowCheckItems", "allowFilter"], outputs: ["selectionChanged"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DictionariesTreeComponent, selector: "app-dictionaries-tree", inputs: { dictionaryId: "dictionaryId", selectedValueIds: "selectedValueIds", allowCheckItems: "allowCheckItems", allowFilter: "allowFilter", drawReferenceDictionariesAsSeparateNode: "drawReferenceDictionariesAsSeparateNode", drawChildDictionariesAsSeparateNode: "drawChildDictionariesAsSeparateNode", drawRootNode: "drawRootNode", filterText: "filterText", allowSelectNonLeafNodes: "allowSelectNonLeafNodes", languageId: "languageId", valuesIdsToShow: "valuesIdsToShow", hideParentArrow: "hideParentArrow", preloadedDictionary: "preloadedDictionary", preloadedDictionaries: "preloadedDictionaries", usePreloadedData: "usePreloadedData" }, outputs: { selectedDictionaryValuesChanged: "selectedDictionaryValuesChanged" }, viewQueries: [{ propertyName: "treeViewControl", first: true, predicate: ["treeView"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<mat-spinner *ngIf=\"isLoading === true\" class=\"m-x-auto\"></mat-spinner>\n<div (click)=\"$event.stopPropagation()\">\n  <app-treeview #treeView [autoSelectDescendants]=\"false\"\n                [allowCheckItems]=\"allowCheckItems\"\n                [allowFilter]=\"allowFilter\"\n                (selectionChanged)=\"onTreeSelectionChanged($event)\">\n  </app-treeview>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: AppTreeviewComponent, selector: "app-treeview", inputs: ["allowAddItems", "autoSelectDescendants", "allowCheckItems", "allowFilter"], outputs: ["selectionChanged"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DictionariesTreeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-dictionaries-tree', template: "<mat-spinner *ngIf=\"isLoading === true\" class=\"m-x-auto\"></mat-spinner>\n<app-treeview #treeView [autoSelectDescendants]=\"false\"\n              [allowCheckItems]=\"allowCheckItems\"\n              [allowFilter]=\"allowFilter\"\n              (selectionChanged)=\"onTreeSelectionChanged($event)\">\n\n</app-treeview>\n" }]
+            args: [{ selector: 'app-dictionaries-tree', template: "<mat-spinner *ngIf=\"isLoading === true\" class=\"m-x-auto\"></mat-spinner>\n<div (click)=\"$event.stopPropagation()\">\n  <app-treeview #treeView [autoSelectDescendants]=\"false\"\n                [allowCheckItems]=\"allowCheckItems\"\n                [allowFilter]=\"allowFilter\"\n                (selectionChanged)=\"onTreeSelectionChanged($event)\">\n  </app-treeview>\n</div>\n" }]
         }], ctorParameters: () => [{ type: DictionaryService }], propDecorators: { treeViewControl: [{
                 type: ViewChild,
                 args: ['treeView']
@@ -4699,6 +4724,9 @@ class FormlyDictionaryDropdownTreeComponent extends FieldType {
         this.valuesIdsToShow = [];
         this.selectedRelatedDictionaries = [];
         this.dictionaryLabels = {};
+        // Multiple selection support
+        this.allowMultipleSelection = false;
+        this.selectedValues = [];
         // NEW: Properties for preloaded dictionary data
         this.preloadedDictionary = null;
         this.preloadedDictionaries = null;
@@ -4721,6 +4749,10 @@ class FormlyDictionaryDropdownTreeComponent extends FieldType {
         if (this.props['dictionaryLabels']) {
             this.dictionaryLabels = this.props['dictionaryLabels'];
         }
+        // Initialize multiple selection
+        if (this.props['allowMultipleSelection']) {
+            this.allowMultipleSelection = this.props['allowMultipleSelection'];
+        }
         // NEW: Initialize preloaded dictionary data
         if (this.props['dictionaryData']) {
             this.preloadedDictionary = this.props['dictionaryData'];
@@ -4849,11 +4881,24 @@ class FormlyDictionaryDropdownTreeComponent extends FieldType {
     }
     onSelectedDictionaryValuesChanged(values) {
         if (values && values.length > 0) {
-            this.selectedValue = values[0];
-            if (this.autocompleteTrigger) {
-                this.autocompleteTrigger.closePanel();
+            if (this.allowMultipleSelection) {
+                // Multiple selection mode
+                this.selectedValues = values;
+                this.selectedValueIds = values.map(v => v.id);
+                this.formControl.setValue(values);
+                this.updateSelectedValueText();
+                if (this.props['onSelectedValuesChanged']) {
+                    this.props['onSelectedValuesChanged'](values);
+                }
+            }
+            else {
+                // Single selection mode
+                this.selectedValue = values[0];
+                if (this.autocompleteTrigger) {
+                    this.autocompleteTrigger.closePanel();
+                }
+                this.onSelectedValueChanged(this.selectedValue);
             }
-            this.onSelectedValueChanged(this.selectedValue);
             if (this.autoInput) {
                 this.autoInput.nativeElement.value = this.filteredText = '';
             }
@@ -4884,6 +4929,23 @@ class FormlyDictionaryDropdownTreeComponent extends FieldType {
         }
     }
     updateSelectedValueText() {
+        if (this.allowMultipleSelection) {
+            // Multiple selection mode - show comma-separated values
+            const formValue = this.formControl?.value;
+            if (Array.isArray(formValue) && formValue.length > 0) {
+                this.selectedValues = formValue;
+                this.selectedValueIds = formValue.map(v => v.id);
+                const texts = formValue.map(v => this.getValueDisplayText(v));
+                this.selectedValueText = texts.join(', ');
+            }
+            else {
+                this.selectedValueText = '';
+                this.selectedValues = [];
+                this.selectedValueIds = [];
+            }
+            return;
+        }
+        // Single selection mode
         if (!this.selectedValue) {
             const formValue = this.formControl?.value;
             if (formValue && typeof formValue === 'object' && formValue.id) {
@@ -4900,24 +4962,27 @@ class FormlyDictionaryDropdownTreeComponent extends FieldType {
                 return;
             }
         }
-        const translation = this.selectedValue.translations?.find((t) => t.languageId === this.currentLanguageId ||
+        this.selectedValueText = this.getValueDisplayText(this.selectedValue);
+    }
+    getValueDisplayText(value) {
+        if (!value)
+            return '';
+        const translation = value.translations?.find((t) => t.languageId === this.currentLanguageId ||
             t.languageIso === this.currentLanguageIso);
         if (translation) {
-            this.selectedValueText = translation.value;
-        }
-        else {
-            this.selectedValueText = this.selectedValue.name || '';
+            return translation.value;
         }
+        return value.name || '';
     }
     getDictionaryLabel(dictionaryId) {
         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]=\"false\"\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$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i6.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$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i5$2.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-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$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i6.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$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i5$2.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]=\"false\"\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-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"] }]
         }], ctorParameters: () => [{ type: DictionaryService }, { type: i0.ChangeDetectorRef }], propDecorators: { autocompleteTrigger: [{
                 type: ViewChild,
                 args: [MatAutocompleteTrigger]
@@ -5444,8 +5509,50 @@ class ModelPopulationHelper {
                 }
             }
         }
+        // Apply precompletion for ManualInput controls
+        ModelPopulationHelper.applyPrecompletionToModel(model, flux);
         return model;
     }
+    static applyPrecompletionToModel(model, flux) {
+        if (!flux)
+            return;
+        for (const step of flux) {
+            if (step.sections) {
+                for (const section of step.sections) {
+                    if (section.controls) {
+                        for (const controlDefinition of section.controls) {
+                            const controlId = controlDefinition.identifier;
+                            if (!controlId)
+                                continue;
+                            // Only process ManualInput controls with precompletion enabled
+                            if (controlDefinition.type === StepControlType.ManualInput) {
+                                const specificData = controlDefinition.specificControlData;
+                                if (specificData?.isPrecompletable &&
+                                    specificData?.precompletionFieldId) {
+                                    if (model[controlId] === undefined ||
+                                        model[controlId] === null ||
+                                        model[controlId] === '') {
+                                        const sourceValue = model[specificData.precompletionFieldId];
+                                        if (sourceValue !== undefined &&
+                                            sourceValue !== null &&
+                                            sourceValue !== '') {
+                                            // Handle dictionary values - extract the display value
+                                            if (typeof sourceValue === 'object' && sourceValue.name) {
+                                                model[controlId] = sourceValue.name;
+                                            }
+                                            else {
+                                                model[controlId] = sourceValue;
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
     static applyDefaultsToModel(flux, dictionaryMap, availableLanguages) {
         const model = {};
         if (!flux)
@@ -5492,6 +5599,8 @@ class ModelPopulationHelper {
                 }
             }
         }
+        // Apply precompletion for ManualInput controls
+        ModelPopulationHelper.applyPrecompletionToModel(model, flux);
         return model;
     }
     static mapDictionaryValueDto(dto, availableLanguages) {
@@ -5917,7 +6026,7 @@ class ProxyService {
     constructor(http, route) {
         this.http = http;
         this.route = route;
-        this.apiURL = 'https://apiro.id-kyc.com';
+        this.apiURL = 'https://apiontrace.id-kyc.com';
         this.env = '';
         this.tokenUrl = '';
         this.debug = false;
@@ -7225,6 +7334,12 @@ class CollectorFormComponent {
                 fieldGroup: formlyFilteredSteps,
             },
         ];
+        // For display mode, populate values immediately after config is built
+        if (this.showDisplayMode && this.formlyConfig[0]?.fieldGroup) {
+            for (const step of this.formlyConfig[0].fieldGroup) {
+                this.setPresentationControlValuesRecursively(step);
+            }
+        }
     }
     async onSelectedPageChanging(stepTransition) {
         let fromIndex;
@@ -7263,7 +7378,12 @@ class CollectorFormComponent {
         let filteredSteps = this.flux.filter((s) => {
             if (s.dependentDictionary &&
                 s.dependentDictionary.isDictionaryDependent) {
-                const selectedValue = this.model[s.dependentDictionary.dictionaryControlIdentifier]?.id;
+                const modelValue = this.model[s.dependentDictionary.dictionaryControlIdentifier];
+                // Skip dependency check for multiple selection (array)
+                if (Array.isArray(modelValue)) {
+                    return true;
+                }
+                const selectedValue = modelValue?.id;
                 if (selectedValue &&
                     s.dependentDictionary.dependentValueIds.includes(selectedValue)) {
                     return true;
@@ -7310,6 +7430,8 @@ class CollectorFormComponent {
         if (this.formlyConfig[0].fieldGroup) {
             var selectedPage = this.formlyConfig[0].fieldGroup[index];
             this.setPresentationControlValuesRecursively(selectedPage);
+            ModelPopulationHelper.applyPrecompletionToModel(this.model, this.flux);
+            this.form.patchValue(this.model);
         }
     }
     setPresentationControlValuesRecursively(fc) {
@@ -7325,7 +7447,32 @@ class CollectorFormComponent {
                     if (associatedControlId) {
                         const found = this.findControlInFillDataControls(associatedControlId);
                         if (found) {
-                            if (found.fillValueId) {
+                            // Multiple selection - show values with comma
+                            const valueIdsArray = found.fillValueIds || found.fillvalueids || found.FillValueIds;
+                            const valuesArray = found.fillValues || found.fillvalues || found.FillValues;
+                            if (valueIdsArray && Array.isArray(valueIdsArray) && valueIdsArray.length > 0) {
+                                const currentLanguageId = this.getCurrentLanguageId();
+                                const displayValues = [];
+                                for (const valueId of valueIdsArray) {
+                                    const numericValueId = typeof valueId === 'string' ? parseInt(valueId, 10) : valueId;
+                                    for (const [key, dict] of this.dictionaryMap.entries()) {
+                                        const value = dict.values?.find((v) => v.id === numericValueId);
+                                        if (value) {
+                                            const translation = value.valueTranslations.find((t) => t.languageId == currentLanguageId);
+                                            displayValues.push(translation?.value || value.name);
+                                            break;
+                                        }
+                                    }
+                                }
+                                if (displayValues.length > 0) {
+                                    fg.defaultValue = displayValues.join(', ');
+                                }
+                            }
+                            else if (valuesArray && Array.isArray(valuesArray) && valuesArray.length > 0) {
+                                // Fallback: use fillValues array directly
+                                fg.defaultValue = valuesArray.join(', ');
+                            }
+                            else if (found.fillValueId) {
                                 const currentLanguageId = this.getCurrentLanguageId();
                                 for (const [key, dict] of this.dictionaryMap.entries()) {
                                     const value = dict.values?.find((v) => v.id == found.fillValueId);
@@ -7398,7 +7545,12 @@ class CollectorFormComponent {
             if (s.props && s.props['dependentDictionary']) {
                 const depDict = s.props['dependentDictionary'];
                 if (depDict && depDict.isDictionaryDependent) {
-                    const selectedValue = this.model[depDict.dictionaryControlIdentifier]?.id;
+                    const modelValue = this.model[depDict.dictionaryControlIdentifier];
+                    // Skip dependency check for multiple selection (array)
+                    if (Array.isArray(modelValue)) {
+                        return true;
+                    }
+                    const selectedValue = modelValue?.id;
                     if (selectedValue &&
                         depDict.dependentValueIds.includes(selectedValue)) {
                         return true;
@@ -7641,7 +7793,7 @@ class CollectorFormComponent {
                 token: this.kycToken,
                 api_url: this.kycApiUrl,
                 appDataId: this.appDataUuid,
-                env: 'QA', // Consider making this dynamic if needed
+                env: 'DOCKER', // Consider making this dynamic if needed
                 redirect_id: this.kycRedirectId,
                 phone_number: '',
                 lang_iso: this.kycLangIso,
@@ -8589,10 +8741,16 @@ class CollectorFormComponent {
     }
     async constructDictionary(control, options) {
         const specificData = control.specificControlData;
-        options.type =
-            specificData.showAsRadioButtonsList === true
-                ? `formly-radio`
-                : `formly-dictionary-dropdown-tree`;
+        // Determine component type based on settings
+        if (specificData.showAsCheckboxes === true) {
+            options.type = 'formly-checkboxes';
+        }
+        else if (specificData.showAsRadioButtonsList === true) {
+            options.type = 'formly-radio';
+        }
+        else {
+            options.type = 'formly-dictionary-dropdown-tree';
+        }
         options.props['specificData'] = specificData;
         const dictionaryUuid = specificData.dictionaryUUID;
         if (dictionaryUuid) {
@@ -8604,10 +8762,7 @@ class CollectorFormComponent {
                     this.attachToValueChanges(control.identifier, options);
                 }
                 else {
-                    options.type =
-                        specificData.showAsRadioButtonsList === true
-                            ? 'formly-radio'
-                            : 'formly-dictionary-dropdown-tree';
+                    // Type is already set at the beginning of the method
                     options.props['dictionaryId'] = dictionaryUuid;
                     this.constructDictionaryWithReferences(dictionary, options, specificData);
                     this.attachToValueChanges(control.identifier, options);
@@ -8713,6 +8868,8 @@ class CollectorFormComponent {
             }));
             options.props['selectedRelatedDictionaries'] =
                 dictionaryControlData.selectedRelatedDictionaries || [];
+            options.props['allowMultipleSelection'] =
+                dictionaryControlData.allowMultipleSelection || false;
             let initialValueObject = null;
             const controlKey = options.key;
             const dictionaryDefaultValueId = dictionaryControlData.dictionaryDefaultValueId;
@@ -9516,8 +9673,20 @@ class FormlyFieldStepperComponent extends FieldType {
             else {
                 let fillValueId = '';
                 let fillValueName = '';
+                let fillValueIds;
+                let fillValueNames;
                 if (value !== null && value !== undefined) {
-                    if (typeof value === 'object' && value.id != null) {
+                    // Check for multiple selection (array of values)
+                    if (Array.isArray(value)) {
+                        fillValueIds = value.map((v) => String(v.id));
+                        fillValueNames = value.map((v) => v.name || '');
+                        // For backwards compatibility, also set single values
+                        if (value.length > 0) {
+                            fillValueId = String(value[0].id);
+                            fillValueName = value[0].name || '';
+                        }
+                    }
+                    else if (typeof value === 'object' && value.id != null) {
                         fillValueId = String(value.id);
                         fillValueName = value.name || '';
                     }
@@ -9540,7 +9709,7 @@ class FormlyFieldStepperComponent extends FieldType {
                         }
                     }
                 }
-                return new AppDataControl(control.identifier, fillValueName, fillValueId);
+                return new AppDataControl(control.identifier, fillValueName, fillValueId, fillValueNames, fillValueIds);
             }
         })))));
         if (this.appData.fillData) {
@@ -10104,6 +10273,70 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             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"] }]
         }] });
 
+class FormlyCheckboxesComponent extends FieldType {
+    constructor() {
+        super(...arguments);
+        this.checkboxOptionsList = [];
+        this.title = '';
+        this.langIso = 'en';
+        this.selectedValues = [];
+    }
+    ngOnInit() {
+        this.langIso = this.props['currentLanguageIso'];
+        this.title = this.props['label'] || '';
+        if (this.props.required) {
+            this.title += ' *';
+        }
+        if (Array.isArray(this.to.options)) {
+            this.checkboxOptionsList = this.to.options;
+        }
+        // Initialize selected values from form control
+        const currentValue = this.formControl.value;
+        if (Array.isArray(currentValue)) {
+            this.selectedValues = currentValue;
+        }
+        else if (currentValue && currentValue.id) {
+            this.selectedValues = [currentValue];
+        }
+    }
+    get formControl() {
+        if (this.field.key) {
+            const keyPath = typeof this.field.key === 'string' || Array.isArray(this.field.key)
+                ? this.field.key
+                : String(this.field.key);
+            return this.form.get(keyPath);
+        }
+        return new FormControl();
+    }
+    isChecked(option) {
+        return this.selectedValues.some((v) => v.id === option.value.id);
+    }
+    onCheckboxChange(event, option) {
+        if (event.checked) {
+            // Add to selection
+            if (!this.isChecked(option)) {
+                this.selectedValues = [...this.selectedValues, option.value];
+            }
+        }
+        else {
+            // Remove from selection
+            this.selectedValues = this.selectedValues.filter((v) => v.id !== option.value.id);
+        }
+        // Update form control with array of values
+        this.formControl.setValue(this.selectedValues);
+        // Notify parent component
+        if (this.props['onSelectedValuesChanged']) {
+            this.props['onSelectedValuesChanged'](this.selectedValues);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormlyCheckboxesComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FormlyCheckboxesComponent, selector: "formly-checkboxes", usesInheritance: true, ngImport: i0, template: "<div class=\"mat-mdc-text-field-wrapper mdc-checkbox-field\" appExternalLink>\n  <label class=\"checkbox-label\">\n    <markdown [data]=\"title\"></markdown>\n  </label>\n  <div *ngIf=\"checkboxOptionsList.length > 0\" class=\"checkbox-list\">\n    <ng-container *ngFor=\"let option of checkboxOptionsList\">\n      <div class=\"checkbox-item\">\n        <mat-checkbox\n          [checked]=\"isChecked(option)\"\n          (change)=\"onCheckboxChange($event, option)\"\n          color=\"primary\">\n          {{ option.label }}\n        </mat-checkbox>\n      </div>\n    </ng-container>\n  </div>\n  <div *ngIf=\"showError\" class=\"validation-error\">\n    <formly-validation-message [field]=\"field\"></formly-validation-message>\n  </div>\n</div>\n", styles: [".mdc-checkbox-field .checkbox-label{display:block;margin-bottom:8px}.mdc-checkbox-field .checkbox-list{display:flex;flex-direction:column;gap:4px}.mdc-checkbox-field .checkbox-item{padding:4px 0}.mdc-checkbox-field .validation-error{color:red;font-size:12px;margin-top:4px}\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: "component", type: i4$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { 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: FormlyCheckboxesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'formly-checkboxes', template: "<div class=\"mat-mdc-text-field-wrapper mdc-checkbox-field\" appExternalLink>\n  <label class=\"checkbox-label\">\n    <markdown [data]=\"title\"></markdown>\n  </label>\n  <div *ngIf=\"checkboxOptionsList.length > 0\" class=\"checkbox-list\">\n    <ng-container *ngFor=\"let option of checkboxOptionsList\">\n      <div class=\"checkbox-item\">\n        <mat-checkbox\n          [checked]=\"isChecked(option)\"\n          (change)=\"onCheckboxChange($event, option)\"\n          color=\"primary\">\n          {{ option.label }}\n        </mat-checkbox>\n      </div>\n    </ng-container>\n  </div>\n  <div *ngIf=\"showError\" class=\"validation-error\">\n    <formly-validation-message [field]=\"field\"></formly-validation-message>\n  </div>\n</div>\n", styles: [".mdc-checkbox-field .checkbox-label{display:block;margin-bottom:8px}.mdc-checkbox-field .checkbox-list{display:flex;flex-direction:column;gap:4px}.mdc-checkbox-field .checkbox-item{padding:4px 0}.mdc-checkbox-field .validation-error{color:red;font-size:12px;margin-top:4px}\n"] }]
+        }] });
+
 class RowFillerComponent extends FieldType {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RowFillerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: RowFillerComponent, selector: "formly-row-filler", usesInheritance: true, ngImport: i0, template: `<div class="row-filler"></div>`, isInline: true, styles: [".row-filler{width:100%}\n"] }); }
@@ -14847,6 +15080,7 @@ class OriginFormModule {
             FormlyFieldIdentificationComponent,
             FormlyParagraphComponent,
             FormlyRadioComponent,
+            FormlyCheckboxesComponent,
             RowFillerComponent,
             FormlyScanIdComponent,
             FormlySignComponent,
@@ -15018,6 +15252,7 @@ class OriginFormModule {
                         component: FormlyParagraphComponent,
                     },
                     { name: 'formly-radio', component: FormlyRadioComponent },
+                    { name: 'formly-checkboxes', component: FormlyCheckboxesComponent },
                     {
                         name: 'formly-validate-contact-info',
                         component: FormlyValidateContactInfoComponent,
@@ -15053,6 +15288,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         FormlyFieldIdentificationComponent,
                         FormlyParagraphComponent,
                         FormlyRadioComponent,
+                        FormlyCheckboxesComponent,
                         RowFillerComponent,
                         FormlyScanIdComponent,
                         FormlySignComponent,
@@ -15165,6 +15401,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                                     component: FormlyParagraphComponent,
                                 },
                                 { name: 'formly-radio', component: FormlyRadioComponent },
+                                { name: 'formly-checkboxes', component: FormlyCheckboxesComponent },
                                 {
                                     name: 'formly-validate-contact-info',
                                     component: FormlyValidateContactInfoComponent,