@aemforms/af-core 0.22.99 → 0.22.100

package/esm/afb-runtime.js

@@ -116,10 +116,12 @@ class DataValue {
     $_value;
     $_type;
     $_fields = [];
-    constructor($_name, $_value, $_type = typeof $_value) {
+    parent;
+    constructor($_name, $_value, $_type = typeof $_value, parent) {
         this.$_name = $_name;
         this.$_value = $_value;
         this.$_type = $_type;
+        this.parent = parent;
     }
     valueOf() {
         return this.$_value;
@@ -156,6 +158,9 @@ class DataValue {
     get $isDataGroup() {
         return false;
     }
+    $addDataNode(name, value, override = false) {
+        throw 'add Data Node is called on a data value';
+    }
 }
 
 const value = Symbol('NullValue');
@@ -188,25 +193,25 @@ const NullDataValue = new NullDataValueClass();
 
 class DataGroup extends DataValue {
     $_items;
-    createEntry(key, value) {
-        const t = value instanceof Array ? 'array' : typeof value;
+    createEntry(key, value, parent) {
+        const t = Array.isArray(value) ? 'array' : typeof value;
         if (typeof value === 'object' && value != null) {
-            return new DataGroup(key, value, t);
+            return new DataGroup(key, value, t, parent);
         }
         else {
-            return new DataValue(key, value, t);
+            return new DataValue(key, value, t, parent);
         }
     }
-    constructor(_name, _value, _type = typeof _value) {
-        super(_name, _value, _type);
+    constructor(_name, _value, _type = typeof _value, parent) {
+        super(_name, _value, _type, parent);
         if (_value instanceof Array) {
             this.$_items = _value.map((value, index) => {
-                return this.createEntry(index, value);
+                return this.createEntry(index, value, this);
             });
         }
         else {
             this.$_items = Object.fromEntries(Object.entries(_value).map(([key, value]) => {
-                return [key, this.createEntry(key, value)];
+                return [key, this.createEntry(key, value, this)];
             }));
         }
     }
@@ -224,9 +229,16 @@ class DataGroup extends DataValue {
         return Object.entries(this.$_items).length;
     }
     $convertToDataValue() {
-        return new DataValue(this.$name, this.$value, this.$type);
+        return new DataValue(this.$name, this.$value, this.$type, this.parent);
     }
-    $addDataNode(name, value, override = false) {
+    syncDataAndFormModel(fromContainer) {
+        this.$_fields.forEach(x => {
+            if (fromContainer && fromContainer !== x) {
+                x.syncDataAndFormModel(this);
+            }
+        });
+    }
+    $addDataNode(name, value, override = false, fromContainer = null) {
         if (value !== NullDataValue) {
             if (this.$type === 'array') {
                 const index = name;
@@ -236,15 +248,18 @@ class DataGroup extends DataValue {
                 else {
                     this.$_items[name] = value;
                 }
+                this.syncDataAndFormModel(fromContainer);
             }
             else {
                 this.$_items[name] = value;
             }
+            value.parent = this;
         }
     }
-    $removeDataNode(name) {
+    $removeDataNode(name, fromContainer = null) {
         if (this.$type === 'array') {
             this.$_items.splice(name, 1);
+            this.syncDataAndFormModel(fromContainer);
         }
         else {
             this.$_items[name] = undefined;
@@ -1392,7 +1407,7 @@ class BaseNode {
         }
         return [];
     }
-    _bindToDataModel(contextualDataModel) {
+    bindToDataModel(contextualDataModel) {
         if (this.fieldType === 'form' || this.id === '$form') {
             this._data = contextualDataModel;
             return;
@@ -1454,6 +1469,7 @@ class BaseNode {
             _data?.$bindToField(this);
             this._data = _data;
         }
+        return this._data;
     }
     _data;
     getDataNode() {
@@ -1493,7 +1509,7 @@ class BaseNode {
                 dataNode = parent.getDataNode();
                 parent = parent.parent;
             } while (dataNode === undefined);
-            this._bindToDataModel(dataNode);
+            this.bindToDataModel(dataNode);
         }
     }
     _applyUpdates(propNames, updates) {
@@ -2034,7 +2050,7 @@ class Container extends Scriptable {
                 }
                 const _data = retVal.defaultDataModel(instanceIndex);
                 if (_data) {
-                    dataNode.$addDataNode(instanceIndex, _data);
+                    dataNode.$addDataNode(instanceIndex, _data, false, this);
                 }
                 retVal._initialize('create');
                 this.notifyDependents(propertyChange('items', retVal.getState(), null));
@@ -2059,7 +2075,7 @@ class Container extends Scriptable {
             if (this._children.length > this._jsonModel.minItems) {
                 this._childrenReference.pop();
                 this._children.splice(instanceIndex, 1);
-                this.getDataNode().$removeDataNode(instanceIndex);
+                this.getDataNode().$removeDataNode(instanceIndex, this);
                 for (let i = instanceIndex; i < this._children.length; i++) {
                     this._children[i].dispatch(new ExecuteRule());
                 }
@@ -2096,12 +2112,36 @@ class Container extends Scriptable {
     dispatch(action) {
         super.dispatch(action);
     }
-    importData(contextualDataModel) {
-        this._bindToDataModel(contextualDataModel);
-        const dataNode = this.getDataNode() || contextualDataModel;
-        this.syncDataAndFormModel(dataNode);
+    importData(dataModel) {
+        if (typeof this._data !== 'undefined' && this.type === 'array' && Array.isArray(dataModel)) {
+            const dataGroup = new DataGroup(this._data.$name, dataModel, this._data.$type, this._data.parent);
+            try {
+                this._data.parent?.$addDataNode(dataGroup.$name, dataGroup, true);
+            }
+            catch (e) {
+                this.form.logger.error(`unable to setItems for ${this.qualifiedName} : ${e}`);
+                return;
+            }
+            this._data = dataGroup;
+            const result = this.syncDataAndFormModel(dataGroup);
+            const newLength = this.items.length;
+            result.added.forEach((item) => {
+                this.notifyDependents(propertyChange('items', item.getState(), null));
+                item.dispatch(new Initialize());
+            });
+            for (let i = 0; i < newLength; i += 1) {
+                this._children[i].dispatch(new ExecuteRule());
+            }
+            result.removed.forEach((item) => {
+                this.notifyDependents(propertyChange('items', null, item.getState()));
+            });
+        }
     }
     syncDataAndFormModel(contextualDataModel) {
+        const result = {
+            added: [],
+            removed: []
+        };
         if (contextualDataModel?.$type === 'array' && this._itemTemplate != null) {
             const dataLength = contextualDataModel?.$value.length;
             const itemsLength = this._children.length;
@@ -2111,19 +2151,26 @@ class Container extends Scriptable {
             const items2Remove = Math.min(itemsLength - dataLength, itemsLength - minItems);
             while (items2Add > 0) {
                 items2Add--;
-                const child = this._addChild(this._itemTemplate);
+                const child = this._addChild(this._itemTemplate, this.items.length, true);
                 child._initialize('create');
+                result.added.push(child);
             }
             if (items2Remove > 0) {
-                this._children.splice(dataLength, items2Remove);
                 for (let i = 0; i < items2Remove; i++) {
                     this._childrenReference.pop();
+                    this._children.pop();
                 }
+                result.removed.push(...this._children);
             }
         }
         this._children.forEach(x => {
-            x.importData(contextualDataModel);
+            let dataModel = x.bindToDataModel(contextualDataModel);
+            if (x.isContainer && !dataModel) {
+                dataModel = contextualDataModel;
+            }
+            x.syncDataAndFormModel(dataModel);
         });
+        return result;
     }
     get activeChild() {
         return this._activeChild;
@@ -2596,8 +2643,8 @@ class FunctionRuntimeImpl {
                                     const args = [target];
                                     return FunctionRuntimeImpl.getInstance().getFunctions().validate._func.call(undefined, args, data, interpreter);
                                 },
-                                importData: (inputData) => {
-                                    const args = [inputData];
+                                importData: (inputData, qualifiedName) => {
+                                    const args = [inputData, qualifiedName];
                                     return FunctionRuntimeImpl.getInstance().getFunctions().importData._func.call(undefined, args, data, interpreter);
                                 },
                                 exportData: () => {
@@ -2737,9 +2784,19 @@ class FunctionRuntimeImpl {
             importData: {
                 _func: (args, data, interpreter) => {
                     const inputData = args[0];
-                    if (typeof inputData === 'object' && inputData !== null) {
+                    const qualifiedName = args[1];
+                    if (typeof inputData === 'object' && inputData !== null && !qualifiedName) {
                         interpreter.globals.form.importData(inputData);
                     }
+                    else {
+                        const field = interpreter.globals.form.resolveQualifiedName(qualifiedName);
+                        if (field?.isContainer) {
+                            field.importData(inputData, qualifiedName);
+                        }
+                        else {
+                            interpreter.globals.form.logger.error('Invalid argument passed in importData. A container is expected');
+                        }
+                    }
                     return {};
                 },
                 _signature: []
@@ -2962,7 +3019,7 @@ class Form extends Container {
             }
         }
         this._ids = IdGenerator();
-        this._bindToDataModel(new DataGroup('$form', {}));
+        this.bindToDataModel(new DataGroup('$form', {}));
         this._initialize(mode);
         if (mode === 'create') {
             this.queueEvent(new FormLoad());
@@ -3002,7 +3059,7 @@ class Form extends Container {
         return this._jsonModel.action;
     }
     importData(dataModel) {
-        this._bindToDataModel(new DataGroup('$form', dataModel));
+        this.bindToDataModel(new DataGroup('$form', dataModel));
         this.syncDataAndFormModel(this.getDataNode());
         this._eventQueue.runPendingQueue();
     }
@@ -3395,7 +3452,7 @@ class Fieldset extends Container {
         return super.items ? super.items : [];
     }
     get value() {
-        return null;
+        return this.getDataNode()?.$value;
     }
     get fieldType() {
         return 'panel';
@@ -4099,9 +4156,7 @@ class Field extends Scriptable {
         }
         return this.valid ? [] : [new ValidationError(this.id, [this._jsonModel.errorMessage])];
     }
-    importData(contextualDataModel) {
-        this._bindToDataModel(contextualDataModel);
-        const dataNode = this.getDataNode();
+    syncDataAndFormModel(dataNode) {
         if (dataNode !== undefined && dataNode !== NullDataValue && dataNode.$value !== this._jsonModel.value) {
             const changeAction = propertyChange('value', dataNode.$value, this._jsonModel.value);
             this._jsonModel.value = dataNode.$value;
@@ -4275,9 +4330,7 @@ class FileUpload extends Field {
         const filesInfo = await processFiles(val instanceof Array ? val : [val]);
         return filesInfo;
     }
-    importData(dataModel) {
-        this._bindToDataModel(dataModel);
-        const dataNode = this.getDataNode();
+    syncDataAndFormModel(dataNode) {
         if (dataNode !== undefined && dataNode !== NullDataValue) {
             const value = dataNode?.$value;
             if (value != null) {
@@ -4516,7 +4569,10 @@ class FormFieldFactoryImpl {
                     fieldType: child.fieldType,
                     type: 'array',
                     name: child.name,
-                    dataRef: child.dataRef
+                    dataRef: child.dataRef,
+                    events: {
+                        'custom:setProperty': '$event.payload'
+                    }
                 },
                 ...{
                     'items': [newChild]
@@ -4590,7 +4646,7 @@ const restoreFormInstance = (formModel, data = null, { logLevel } = defaultOptio
     try {
         const form = new Form({ ...formModel }, FormFieldFactory, new RuleEngine(), new EventQueue(new Logger(logLevel)), logLevel, 'restore');
         if (data) {
-            form._bindToDataModel(new DataGroup('$form', data));
+            form.bindToDataModel(new DataGroup('$form', data));
             form.syncDataAndFormModel(form.getDataNode());
         }
         form.getEventQueue().empty();

package/esm/types/src/BaseNode.d.ts

@@ -83,8 +83,8 @@ export declare abstract class BaseNode<T extends BaseJson> implements BaseModel
     notifyDependents(action: Action): void;
     protected isEmpty(value?: any): boolean;
     _setProperty<T>(prop: string, newValue: T, notify?: boolean, notifyChildren?: (action: Action) => void): any;
-    _bindToDataModel(contextualDataModel: DataGroup): void;
-    private _data?;
+    bindToDataModel(contextualDataModel: DataGroup): DataValue | undefined;
+    protected _data?: DataValue;
     getDataNode(): DataValue | undefined;
     get lang(): string | undefined;
     get properties(): {
@@ -94,7 +94,7 @@ export declare abstract class BaseNode<T extends BaseJson> implements BaseModel
         [key: string]: any;
     });
     abstract defaultDataModel(name: string | number): DataValue | undefined;
-    abstract importData(a: DataGroup): any;
+    abstract syncDataAndFormModel(a?: DataValue | DataGroup): any;
     getNonTransparentParent(): ContainerModel;
     _initialize(mode?: FormCreationMode): void;
     protected _applyUpdates(propNames: string[], updates: any): any;

package/esm/types/src/Container.d.ts

@@ -64,8 +64,8 @@ declare abstract class Container<T extends ContainerJson & RulesJson> extends Sc
     reset(): void;
     validate(): import("./types/Model").ValidationError[];
     dispatch(action: Action): void;
-    importData(contextualDataModel: DataGroup): void;
-    syncDataAndFormModel(contextualDataModel?: DataGroup): void;
+    importData(dataModel: any): void;
+    syncDataAndFormModel(contextualDataModel?: DataGroup): any;
     get activeChild(): BaseModel | null;
     set activeChild(c: BaseModel | null);
     get enabled(): boolean | undefined;

package/esm/types/src/Field.d.ts

@@ -1,7 +1,6 @@
 import { Action, ConstraintsMessages, ContainerModel, FieldJson, FieldModel, FormModel, ValidationError } from './types';
 import Scriptable from './Scriptable';
 import DataValue from './data/DataValue';
-import DataGroup from './data/DataGroup';
 declare class Field extends Scriptable<FieldJson> implements FieldModel {
     #private;
     constructor(params: FieldJson, _options: {
@@ -152,7 +151,7 @@ declare class Field extends Scriptable<FieldJson> implements FieldModel {
     protected evaluateConstraints(): any;
     triggerValidationEvent(changes: any): void;
     validate(): ValidationError[];
-    importData(contextualDataModel: DataGroup): void;
+    syncDataAndFormModel(dataNode: DataValue): void;
     defaultDataModel(name: string | number): DataValue;
     getState(isRepeatableChild?: boolean, forRestore?: boolean): {
         editFormat: string | undefined;

package/esm/types/src/Fieldset.d.ts

@@ -11,6 +11,6 @@ export declare class Fieldset extends Container<FieldsetJson> implements Fieldse
     private _applyDefaults;
     get type(): "array" | "object" | undefined;
     get items(): (import("./types/Model").FieldModel | FieldsetModel)[];
-    get value(): null;
+    get value(): any;
     get fieldType(): string;
 }

package/esm/types/src/FileUpload.d.ts

@@ -1,6 +1,6 @@
 import Field from './Field';
 import { FieldModel } from './types/index';
-import DataGroup from './data/DataGroup';
+import DataValue from './data/DataValue';
 declare class FileUpload extends Field implements FieldModel {
     protected _getDefaults(): {
         accept: string[];
@@ -22,6 +22,6 @@ declare class FileUpload extends Field implements FieldModel {
     protected getInternalType(): "file" | "file[]";
     protected getDataNodeValue(typedValue: any): any;
     serialize(): Promise<unknown[] | null>;
-    importData(dataModel: DataGroup): void;
+    syncDataAndFormModel(dataNode: DataValue): void;
 }
 export default FileUpload;

package/esm/types/src/data/DataGroup.d.ts

@@ -1,4 +1,5 @@
 import DataValue from './DataValue';
+import { ContainerModel } from '../types';
 export default class DataGroup extends DataValue {
     $_items: {
         [key: string]: DataValue | DataGroup;
@@ -6,14 +7,15 @@ export default class DataGroup extends DataValue {
     private createEntry;
     constructor(_name: string | number, _value: {
         [key: string]: any;
-    } | any[], _type?: string);
+    } | any[], _type?: string, parent?: DataValue);
     get $value(): Array<any> | {
         [key: string]: any;
     };
     get $length(): number;
     $convertToDataValue(): DataValue;
-    $addDataNode(name: string | number, value: DataGroup | DataValue, override?: boolean): void;
-    $removeDataNode(name: string | number): void;
+    private syncDataAndFormModel;
+    $addDataNode(name: string | number, value: DataGroup | DataValue, override?: boolean, fromContainer?: ContainerModel | null): void;
+    $removeDataNode(name: string | number, fromContainer?: ContainerModel | null): void;
     $getDataNode(name: string | number): any;
     $containsDataNode(name: string | number): boolean;
     get $isDataGroup(): boolean;

package/esm/types/src/data/DataValue.d.ts

@@ -4,7 +4,8 @@ export default class DataValue {
     private $_value;
     private $_type;
     $_fields: Array<FieldModel>;
-    constructor($_name: string | number, $_value: any, $_type?: string);
+    parent?: DataValue;
+    constructor($_name: string | number, $_value: any, $_type?: string, parent?: DataValue);
     valueOf(): any;
     get $name(): string | number;
     get disabled(): number | false;
@@ -14,4 +15,5 @@ export default class DataValue {
     $bindToField(field: FieldModel): void;
     $convertToDataValue(): DataValue;
     get $isDataGroup(): boolean;
+    $addDataNode(name: string | number, value: DataValue, override?: boolean): void;
 }

package/esm/types/src/types/Model.d.ts

@@ -4,6 +4,7 @@ import EventQueue from '../controller/EventQueue';
 import DataGroup from '../data/DataGroup';
 import { Logger } from '../controller/Logger';
 import { Version } from '../utils/Version';
+import DataValue from '../data/DataValue';
 export interface ScriptableField {
     rules?: {
         [key: string]: string;
@@ -73,7 +74,8 @@ export interface BaseModel extends ConstraintsJson, WithController {
     readonly repeatable?: boolean;
     validate(): Array<ValidationError>;
     reset(): any;
-    importData(a?: DataGroup): any;
+    bindToDataModel(a?: DataGroup): any;
+    syncDataAndFormModel(a?: DataValue | DataGroup): any;
     getRuleNode(): any;
     ruleNodeReference(): any;
     _initialize(mode?: FormCreationMode): any;
@@ -105,6 +107,7 @@ export interface ContainerModel extends BaseModel, ScriptableField {
     items: Array<FieldsetModel | FieldModel>;
     parent: ContainerModel;
     indexOf(f: FieldModel | FieldsetModel): number;
+    importData(data: any): any;
     isTransparent(): boolean;
     activeChild: BaseModel | null;
 }
@@ -119,7 +122,6 @@ export interface FormModel extends ContainerModel, WithState<FormJson> {
     readonly title: string;
     readonly logger: Logger;
     readonly specVersion: Version;
-    importData(data: any): any;
     exportData(): any;
     getElement(id: string): FieldModel | FormModel | FieldsetModel;
     getUniqueId(): string;

package/lib/BaseNode.d.ts

@@ -83,8 +83,8 @@ export declare abstract class BaseNode<T extends BaseJson> implements BaseModel
     notifyDependents(action: Action): void;
     protected isEmpty(value?: any): boolean;
     _setProperty<T>(prop: string, newValue: T, notify?: boolean, notifyChildren?: (action: Action) => void): any;
-    _bindToDataModel(contextualDataModel: DataGroup): void;
-    private _data?;
+    bindToDataModel(contextualDataModel: DataGroup): DataValue | undefined;
+    protected _data?: DataValue;
     getDataNode(): DataValue | undefined;
     get lang(): string | undefined;
     get properties(): {
@@ -94,7 +94,7 @@ export declare abstract class BaseNode<T extends BaseJson> implements BaseModel
         [key: string]: any;
     });
     abstract defaultDataModel(name: string | number): DataValue | undefined;
-    abstract importData(a: DataGroup): any;
+    abstract syncDataAndFormModel(a?: DataValue | DataGroup): any;
     getNonTransparentParent(): ContainerModel;
     _initialize(mode?: FormCreationMode): void;
     protected _applyUpdates(propNames: string[], updates: any): any;

package/lib/BaseNode.js

@@ -358,7 +358,7 @@ class BaseNode {
         }
         return [];
     }
-    _bindToDataModel(contextualDataModel) {
+    bindToDataModel(contextualDataModel) {
         if (this.fieldType === 'form' || this.id === '$form') {
             this._data = contextualDataModel;
             return;
@@ -420,6 +420,7 @@ class BaseNode {
             _data === null || _data === void 0 ? void 0 : _data.$bindToField(this);
             this._data = _data;
         }
+        return this._data;
     }
     getDataNode() {
         return this._data;
@@ -458,7 +459,7 @@ class BaseNode {
                 dataNode = parent.getDataNode();
                 parent = parent.parent;
             } while (dataNode === undefined);
-            this._bindToDataModel(dataNode);
+            this.bindToDataModel(dataNode);
         }
     }
     _applyUpdates(propNames, updates) {

package/lib/Container.d.ts

@@ -64,8 +64,8 @@ declare abstract class Container<T extends ContainerJson & RulesJson> extends Sc
     reset(): void;
     validate(): import("./types/Model").ValidationError[];
     dispatch(action: Action): void;
-    importData(contextualDataModel: DataGroup): void;
-    syncDataAndFormModel(contextualDataModel?: DataGroup): void;
+    importData(dataModel: any): void;
+    syncDataAndFormModel(contextualDataModel?: DataGroup): any;
     get activeChild(): BaseModel | null;
     set activeChild(c: BaseModel | null);
     get enabled(): boolean | undefined;

package/lib/Container.js

@@ -282,7 +282,7 @@ class Container extends Scriptable_1.default {
                 }
                 const _data = retVal.defaultDataModel(instanceIndex);
                 if (_data) {
-                    dataNode.$addDataNode(instanceIndex, _data);
+                    dataNode.$addDataNode(instanceIndex, _data, false, this);
                 }
                 retVal._initialize('create');
                 this.notifyDependents((0, Events_1.propertyChange)('items', retVal.getState(), null));
@@ -307,7 +307,7 @@ class Container extends Scriptable_1.default {
             if (this._children.length > this._jsonModel.minItems) {
                 this._childrenReference.pop();
                 this._children.splice(instanceIndex, 1);
-                this.getDataNode().$removeDataNode(instanceIndex);
+                this.getDataNode().$removeDataNode(instanceIndex, this);
                 for (let i = instanceIndex; i < this._children.length; i++) {
                     this._children[i].dispatch(new Events_1.ExecuteRule());
                 }
@@ -345,12 +345,37 @@ class Container extends Scriptable_1.default {
     dispatch(action) {
         super.dispatch(action);
     }
-    importData(contextualDataModel) {
-        this._bindToDataModel(contextualDataModel);
-        const dataNode = this.getDataNode() || contextualDataModel;
-        this.syncDataAndFormModel(dataNode);
+    importData(dataModel) {
+        var _a;
+        if (typeof this._data !== 'undefined' && this.type === 'array' && Array.isArray(dataModel)) {
+            const dataGroup = new DataGroup_1.default(this._data.$name, dataModel, this._data.$type, this._data.parent);
+            try {
+                (_a = this._data.parent) === null || _a === void 0 ? void 0 : _a.$addDataNode(dataGroup.$name, dataGroup, true);
+            }
+            catch (e) {
+                this.form.logger.error(`unable to setItems for ${this.qualifiedName} : ${e}`);
+                return;
+            }
+            this._data = dataGroup;
+            const result = this.syncDataAndFormModel(dataGroup);
+            const newLength = this.items.length;
+            result.added.forEach((item) => {
+                this.notifyDependents((0, Events_1.propertyChange)('items', item.getState(), null));
+                item.dispatch(new Events_1.Initialize());
+            });
+            for (let i = 0; i < newLength; i += 1) {
+                this._children[i].dispatch(new Events_1.ExecuteRule());
+            }
+            result.removed.forEach((item) => {
+                this.notifyDependents((0, Events_1.propertyChange)('items', null, item.getState()));
+            });
+        }
     }
     syncDataAndFormModel(contextualDataModel) {
+        const result = {
+            added: [],
+            removed: []
+        };
         if ((contextualDataModel === null || contextualDataModel === void 0 ? void 0 : contextualDataModel.$type) === 'array' && this._itemTemplate != null) {
             const dataLength = contextualDataModel === null || contextualDataModel === void 0 ? void 0 : contextualDataModel.$value.length;
             const itemsLength = this._children.length;
@@ -360,19 +385,26 @@ class Container extends Scriptable_1.default {
             const items2Remove = Math.min(itemsLength - dataLength, itemsLength - minItems);
             while (items2Add > 0) {
                 items2Add--;
-                const child = this._addChild(this._itemTemplate);
+                const child = this._addChild(this._itemTemplate, this.items.length, true);
                 child._initialize('create');
+                result.added.push(child);
             }
             if (items2Remove > 0) {
-                this._children.splice(dataLength, items2Remove);
                 for (let i = 0; i < items2Remove; i++) {
                     this._childrenReference.pop();
+                    this._children.pop();
                 }
+                result.removed.push(...this._children);
             }
         }
         this._children.forEach(x => {
-            x.importData(contextualDataModel);
+            let dataModel = x.bindToDataModel(contextualDataModel);
+            if (x.isContainer && !dataModel) {
+                dataModel = contextualDataModel;
+            }
+            x.syncDataAndFormModel(dataModel);
         });
+        return result;
     }
     get activeChild() {
         return this._activeChild;

package/lib/Field.d.ts

@@ -1,7 +1,6 @@
 import { Action, ConstraintsMessages, ContainerModel, FieldJson, FieldModel, FormModel, ValidationError } from './types';
 import Scriptable from './Scriptable';
 import DataValue from './data/DataValue';
-import DataGroup from './data/DataGroup';
 declare class Field extends Scriptable<FieldJson> implements FieldModel {
     #private;
     constructor(params: FieldJson, _options: {
@@ -152,7 +151,7 @@ declare class Field extends Scriptable<FieldJson> implements FieldModel {
     protected evaluateConstraints(): any;
     triggerValidationEvent(changes: any): void;
     validate(): ValidationError[];
-    importData(contextualDataModel: DataGroup): void;
+    syncDataAndFormModel(dataNode: DataValue): void;
     defaultDataModel(name: string | number): DataValue;
     getState(isRepeatableChild?: boolean, forRestore?: boolean): {
         editFormat: string | undefined;

package/lib/Field.js

@@ -685,9 +685,7 @@ class Field extends Scriptable_1.default {
         }
         return this.valid ? [] : [new types_1.ValidationError(this.id, [this._jsonModel.errorMessage])];
     }
-    importData(contextualDataModel) {
-        this._bindToDataModel(contextualDataModel);
-        const dataNode = this.getDataNode();
+    syncDataAndFormModel(dataNode) {
         if (dataNode !== undefined && dataNode !== EmptyDataValue_1.default && dataNode.$value !== this._jsonModel.value) {
             const changeAction = (0, Events_1.propertyChange)('value', dataNode.$value, this._jsonModel.value);
             this._jsonModel.value = dataNode.$value;

package/lib/Fieldset.d.ts

@@ -11,6 +11,6 @@ export declare class Fieldset extends Container<FieldsetJson> implements Fieldse
     private _applyDefaults;
     get type(): "array" | "object" | undefined;
     get items(): (import("./types/Model").FieldModel | FieldsetModel)[];
-    get value(): null;
+    get value(): any;
     get fieldType(): string;
 }

package/lib/Fieldset.js

@@ -38,7 +38,8 @@ class Fieldset extends Container_1.default {
         return super.items ? super.items : [];
     }
     get value() {
-        return null;
+        var _a;
+        return (_a = this.getDataNode()) === null || _a === void 0 ? void 0 : _a.$value;
     }
     get fieldType() {
         return 'panel';

package/lib/FileUpload.d.ts

@@ -1,6 +1,6 @@
 import Field from './Field';
 import { FieldModel } from './types/index';
-import DataGroup from './data/DataGroup';
+import DataValue from './data/DataValue';
 declare class FileUpload extends Field implements FieldModel {
     protected _getDefaults(): {
         accept: string[];
@@ -22,6 +22,6 @@ declare class FileUpload extends Field implements FieldModel {
     protected getInternalType(): "file" | "file[]";
     protected getDataNodeValue(typedValue: any): any;
     serialize(): Promise<unknown[] | null>;
-    importData(dataModel: DataGroup): void;
+    syncDataAndFormModel(dataNode: DataValue): void;
 }
 export default FileUpload;

package/lib/FileUpload.js

@@ -103,9 +103,7 @@ class FileUpload extends Field_1.default {
             return filesInfo;
         });
     }
-    importData(dataModel) {
-        this._bindToDataModel(dataModel);
-        const dataNode = this.getDataNode();
+    syncDataAndFormModel(dataNode) {
         if (dataNode !== undefined && dataNode !== EmptyDataValue_1.default) {
             const value = dataNode === null || dataNode === void 0 ? void 0 : dataNode.$value;
             if (value != null) {

package/lib/Form.js

@@ -46,7 +46,7 @@ class Form extends Container_1.default {
             }
         }
         this._ids = (0, FormUtils_1.IdGenerator)();
-        this._bindToDataModel(new DataGroup_1.default('$form', {}));
+        this.bindToDataModel(new DataGroup_1.default('$form', {}));
         this._initialize(mode);
         if (mode === 'create') {
             this.queueEvent(new Events_1.FormLoad());
@@ -84,7 +84,7 @@ class Form extends Container_1.default {
         return this._jsonModel.action;
     }
     importData(dataModel) {
-        this._bindToDataModel(new DataGroup_1.default('$form', dataModel));
+        this.bindToDataModel(new DataGroup_1.default('$form', dataModel));
         this.syncDataAndFormModel(this.getDataNode());
         this._eventQueue.runPendingQueue();
     }

package/lib/FormInstance.js

@@ -70,7 +70,7 @@ const restoreFormInstance = (formModel, data = null, { logLevel } = defaultOptio
     try {
         const form = new Form_1.default(Object.assign({}, formModel), FormCreationUtils_1.FormFieldFactory, new RuleEngine_1.default(), new EventQueue_1.default(new Logger_1.Logger(logLevel)), logLevel, 'restore');
         if (data) {
-            form._bindToDataModel(new DataGroup_1.default('$form', data));
+            form.bindToDataModel(new DataGroup_1.default('$form', data));
             form.syncDataAndFormModel(form.getDataNode());
         }
         form.getEventQueue().empty();

package/lib/data/DataGroup.d.ts

@@ -1,4 +1,5 @@
 import DataValue from './DataValue';
+import { ContainerModel } from '../types';
 export default class DataGroup extends DataValue {
     $_items: {
         [key: string]: DataValue | DataGroup;
@@ -6,14 +7,15 @@ export default class DataGroup extends DataValue {
     private createEntry;
     constructor(_name: string | number, _value: {
         [key: string]: any;
-    } | any[], _type?: string);
+    } | any[], _type?: string, parent?: DataValue);
     get $value(): Array<any> | {
         [key: string]: any;
     };
     get $length(): number;
     $convertToDataValue(): DataValue;
-    $addDataNode(name: string | number, value: DataGroup | DataValue, override?: boolean): void;
-    $removeDataNode(name: string | number): void;
+    private syncDataAndFormModel;
+    $addDataNode(name: string | number, value: DataGroup | DataValue, override?: boolean, fromContainer?: ContainerModel | null): void;
+    $removeDataNode(name: string | number, fromContainer?: ContainerModel | null): void;
     $getDataNode(name: string | number): any;
     $containsDataNode(name: string | number): boolean;
     get $isDataGroup(): boolean;

package/lib/data/DataGroup.js

@@ -6,26 +6,26 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const DataValue_1 = __importDefault(require("./DataValue"));
 const EmptyDataValue_1 = __importDefault(require("./EmptyDataValue"));
 class DataGroup extends DataValue_1.default {
-    constructor(_name, _value, _type = typeof _value) {
-        super(_name, _value, _type);
+    constructor(_name, _value, _type = typeof _value, parent) {
+        super(_name, _value, _type, parent);
         if (_value instanceof Array) {
             this.$_items = _value.map((value, index) => {
-                return this.createEntry(index, value);
+                return this.createEntry(index, value, this);
             });
         }
         else {
             this.$_items = Object.fromEntries(Object.entries(_value).map(([key, value]) => {
-                return [key, this.createEntry(key, value)];
+                return [key, this.createEntry(key, value, this)];
             }));
         }
     }
-    createEntry(key, value) {
-        const t = value instanceof Array ? 'array' : typeof value;
+    createEntry(key, value, parent) {
+        const t = Array.isArray(value) ? 'array' : typeof value;
         if (typeof value === 'object' && value != null) {
-            return new DataGroup(key, value, t);
+            return new DataGroup(key, value, t, parent);
         }
         else {
-            return new DataValue_1.default(key, value, t);
+            return new DataValue_1.default(key, value, t, parent);
         }
     }
     get $value() {
@@ -42,9 +42,16 @@ class DataGroup extends DataValue_1.default {
         return Object.entries(this.$_items).length;
     }
     $convertToDataValue() {
-        return new DataValue_1.default(this.$name, this.$value, this.$type);
+        return new DataValue_1.default(this.$name, this.$value, this.$type, this.parent);
     }
-    $addDataNode(name, value, override = false) {
+    syncDataAndFormModel(fromContainer) {
+        this.$_fields.forEach(x => {
+            if (fromContainer && fromContainer !== x) {
+                x.syncDataAndFormModel(this);
+            }
+        });
+    }
+    $addDataNode(name, value, override = false, fromContainer = null) {
         if (value !== EmptyDataValue_1.default) {
             if (this.$type === 'array') {
                 const index = name;
@@ -54,15 +61,18 @@ class DataGroup extends DataValue_1.default {
                 else {
                     this.$_items[name] = value;
                 }
+                this.syncDataAndFormModel(fromContainer);
             }
             else {
                 this.$_items[name] = value;
             }
+            value.parent = this;
         }
     }
-    $removeDataNode(name) {
+    $removeDataNode(name, fromContainer = null) {
         if (this.$type === 'array') {
             this.$_items.splice(name, 1);
+            this.syncDataAndFormModel(fromContainer);
         }
         else {
             this.$_items[name] = undefined;

package/lib/data/DataValue.d.ts

@@ -4,7 +4,8 @@ export default class DataValue {
     private $_value;
     private $_type;
     $_fields: Array<FieldModel>;
-    constructor($_name: string | number, $_value: any, $_type?: string);
+    parent?: DataValue;
+    constructor($_name: string | number, $_value: any, $_type?: string, parent?: DataValue);
     valueOf(): any;
     get $name(): string | number;
     get disabled(): number | false;
@@ -14,4 +15,5 @@ export default class DataValue {
     $bindToField(field: FieldModel): void;
     $convertToDataValue(): DataValue;
     get $isDataGroup(): boolean;
+    $addDataNode(name: string | number, value: DataValue, override?: boolean): void;
 }

package/lib/data/DataValue.js

@@ -1,11 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 class DataValue {
-    constructor($_name, $_value, $_type = typeof $_value) {
+    constructor($_name, $_value, $_type = typeof $_value, parent) {
         this.$_name = $_name;
         this.$_value = $_value;
         this.$_type = $_type;
         this.$_fields = [];
+        this.parent = parent;
     }
     valueOf() {
         return this.$_value;
@@ -42,5 +43,8 @@ class DataValue {
     get $isDataGroup() {
         return false;
     }
+    $addDataNode(name, value, override = false) {
+        throw 'add Data Node is called on a data value';
+    }
 }
 exports.default = DataValue;

package/lib/rules/FunctionRuntime.js

@@ -204,8 +204,8 @@ class FunctionRuntimeImpl {
                                     const args = [target];
                                     return FunctionRuntimeImpl.getInstance().getFunctions().validate._func.call(undefined, args, data, interpreter);
                                 },
-                                importData: (inputData) => {
-                                    const args = [inputData];
+                                importData: (inputData, qualifiedName) => {
+                                    const args = [inputData, qualifiedName];
                                     return FunctionRuntimeImpl.getInstance().getFunctions().importData._func.call(undefined, args, data, interpreter);
                                 },
                                 exportData: () => {
@@ -346,9 +346,19 @@ class FunctionRuntimeImpl {
             importData: {
                 _func: (args, data, interpreter) => {
                     const inputData = args[0];
-                    if (typeof inputData === 'object' && inputData !== null) {
+                    const qualifiedName = args[1];
+                    if (typeof inputData === 'object' && inputData !== null && !qualifiedName) {
                         interpreter.globals.form.importData(inputData);
                     }
+                    else {
+                        const field = interpreter.globals.form.resolveQualifiedName(qualifiedName);
+                        if (field === null || field === void 0 ? void 0 : field.isContainer) {
+                            field.importData(inputData, qualifiedName);
+                        }
+                        else {
+                            interpreter.globals.form.logger.error('Invalid argument passed in importData. A container is expected');
+                        }
+                    }
                     return {};
                 },
                 _signature: []

package/lib/types/Model.d.ts

@@ -4,6 +4,7 @@ import EventQueue from '../controller/EventQueue';
 import DataGroup from '../data/DataGroup';
 import { Logger } from '../controller/Logger';
 import { Version } from '../utils/Version';
+import DataValue from '../data/DataValue';
 export interface ScriptableField {
     rules?: {
         [key: string]: string;
@@ -73,7 +74,8 @@ export interface BaseModel extends ConstraintsJson, WithController {
     readonly repeatable?: boolean;
     validate(): Array<ValidationError>;
     reset(): any;
-    importData(a?: DataGroup): any;
+    bindToDataModel(a?: DataGroup): any;
+    syncDataAndFormModel(a?: DataValue | DataGroup): any;
     getRuleNode(): any;
     ruleNodeReference(): any;
     _initialize(mode?: FormCreationMode): any;
@@ -105,6 +107,7 @@ export interface ContainerModel extends BaseModel, ScriptableField {
     items: Array<FieldsetModel | FieldModel>;
     parent: ContainerModel;
     indexOf(f: FieldModel | FieldsetModel): number;
+    importData(data: any): any;
     isTransparent(): boolean;
     activeChild: BaseModel | null;
 }
@@ -119,7 +122,6 @@ export interface FormModel extends ContainerModel, WithState<FormJson> {
     readonly title: string;
     readonly logger: Logger;
     readonly specVersion: Version;
-    importData(data: any): any;
     exportData(): any;
     getElement(id: string): FieldModel | FormModel | FieldsetModel;
     getUniqueId(): string;

package/lib/utils/FormCreationUtils.js

@@ -38,7 +38,10 @@ class FormFieldFactoryImpl {
                 fieldType: child.fieldType,
                 type: 'array',
                 name: child.name,
-                dataRef: child.dataRef
+                dataRef: child.dataRef,
+                events: {
+                    'custom:setProperty': '$event.payload'
+                }
             }, {
                 'items': [newChild]
             });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aemforms/af-core",
-  "version": "0.22.99",
+  "version": "0.22.100",
   "description": "Core Module for Forms Runtime",
   "author": "Adobe Systems",
   "license": "Adobe Proprietary",
@@ -37,7 +37,7 @@
   },
   "dependencies": {
     "@adobe/json-formula": "0.1.50",
-    "@aemforms/af-formatters": "^0.22.99"
+    "@aemforms/af-formatters": "^0.22.100"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.20.2",