@ng-formworks/core 17.6.7 → 17.6.9

package/fesm2022/ng-formworks-core.mjs

@@ -9,6 +9,7 @@ import Ajv2019 from 'ajv/dist/2019';
 import jsonDraft6 from 'ajv/lib/refs/json-schema-draft-06.json';
 import jsonDraft7 from 'ajv/lib/refs/json-schema-draft-07.json';
 import cloneDeep from 'lodash/cloneDeep';
+import _isArray from 'lodash/isArray';
 import { from, Observable, forkJoin, Subject, BehaviorSubject, lastValueFrom } from 'rxjs';
 import { some, isNil, isEmpty as isEmpty$1, pick, isObject as isObject$1, isEqual as isEqual$2, memoize } from 'lodash';
 import isEqual$1 from 'lodash/isEqual';
@@ -16,7 +17,6 @@ import { map, takeUntil } from 'rxjs/operators';
 import omit from 'lodash/omit';
 import filter from 'lodash/filter';
 import map$1 from 'lodash/map';
-import _isArray from 'lodash/isArray';
 import _isPlainObject from 'lodash/isPlainObject';
 import uniqueId from 'lodash/uniqueId';
 import * as i2$1 from '@angular/cdk/drag-drop';
@@ -1457,6 +1457,49 @@ function hasNonNullValue(obj) {
         return !isNil(value);
     });
 }
+/**
+ * Recursively compares array sizes of nested arrays
+ *
+ * @param obj1 - The object to check.
+ * @param obj2 - The object to check.
+ * @returns `false` if at least one nested array size mismatches`.
+ *
+ * @example
+ * const obj1 = { a: ['a','aa'], b:{c:[1,11,11]} };
+ * const obj2 = { a: ['ee','dd'], b:{c:[2]} };
+ *
+ * console.log(compareObjectArraySizes(obj1,obj1));  // Output: false
+ * mismatch will be on path b/c
+ */
+function compareObjectArraySizes(obj1, obj2, comparePath = "") {
+    if (isArray(obj1) && isArray(obj2)) {
+        if (obj1.length != obj2.length) {
+            console.log(`size mismatch at ${comparePath}`);
+            return false; // immediately return false on mismatch
+        }
+        else {
+            for (let ind = 0; ind < obj1.length; ind++) {
+                const item1 = obj1[ind];
+                const item2 = obj2[ind];
+                const result = compareObjectArraySizes(item1, item2, `${comparePath}/${ind}`);
+                if (result === false) {
+                    return false; // propagate false if mismatch is found
+                }
+            }
+        }
+    }
+    if (isObject(obj1) && !isArray(obj1)) {
+        for (let key in obj1) {
+            if (obj2.hasOwnProperty(key)) {
+                const result = compareObjectArraySizes(obj1[key], obj2[key], `${comparePath}/${key}`);
+                if (result === false) {
+                    return false; // propagate false if mismatch is found
+                }
+            }
+        }
+    }
+    return true; // all checks passed
+}
 
 class JsonPointer {
     /**
@@ -4643,14 +4686,7 @@ function convertJSONSchemaIfToCondition(schema, layoutNode, negate = false) {
         .join("")
         : "";
     let modelPath = parentPath ? `model.${parentPath}` : "model";
-    let checkPath = modelPath.split('.')
-        .map((_, index, array) => {
-        return array.slice(0, index + 1).join('.'); // Build each part of the path dynamically
-    }).join(' && '); // Join the parts with '&&'
-    //  .reduce((accumulator, currentPart, index) => {
-    //   const currentExpression = index === 0 ? currentPart : `${accumulator}.${currentPart}`;
-    //   return index === 0 ? currentExpression : `${accumulator} && ${currentExpression}`;
-    // }, '');
+    let checkPath = modelPath.replace(/\[/g, ".[").split('.').join("?.");
     if (schema.if) {
         Object.keys(schema.if.properties).forEach((ifProp, ind) => {
             let amper = ind > 0 ? "&" : "";
@@ -6201,7 +6237,7 @@ function buildLayout_original(jsf, widgetLibrary) {
     return formLayout;
 }
 //TODO-review:this implements a quick 'post' fix rather than an
-//integrared ideal fix
+//integrated ideal fix
 function buildLayout(jsf, widgetLibrary) {
     let layout = buildLayout_original(jsf, widgetLibrary);
     if (jsf.formValues) {
@@ -6313,11 +6349,21 @@ function fixNestedArrayLayout(options) {
                         : cloneDeep(builtLayout.items[0]); //copy first
                     newItem._id = uniqueId("new_");
                     builtLayout.items.unshift(newItem);
+                    // builtLayout.items=[newItem, ...builtLayout.items];
                 }
-                if (builtLayout.options.listItems) {
-                    builtLayout.options.listItems = numDataItems;
+            }
+            else if (numActualItems > numDataItems) {
+                let numItemsToRemove = numActualItems - numDataItems;
+                for (let i = 0; i < numItemsToRemove; i++) {
+                    builtLayout.items.pop();
+                    //builtLayout.items=builtLayout.items.slice(0, -1);
+                    //builtLayout.items.slice(0, -1);
                 }
             }
+            if (builtLayout.options.listItems) {
+                builtLayout.options.listItems = numDataItems;
+            }
+            //builtLayout.items=[...builtLayout.items];
             indices[builtLayout.dataPointer] = indices[builtLayout.dataPointer] || -1;
             indexPos++;
             builtLayout.items.forEach((item, index) => {
@@ -7689,7 +7735,7 @@ class JsonSchemaFormService {
         // Set values of any related controls in copyValueTo array
         if (isArray(ctx.options.copyValueTo)) {
             for (const item of ctx.options.copyValueTo) {
-                const targetControl = getControl(this.formGroup, item);
+                const targetControl = this.formGroup && getControl(this.formGroup, item);
                 if (isObject(targetControl) &&
                     typeof targetControl.setValue === 'function') {
                     targetControl.setValue(value);
@@ -7764,7 +7810,8 @@ class JsonSchemaFormService {
     getFormControlValue(ctx) {
         if (!ctx || !ctx.layoutNode ||
             !isDefined(ctx.layoutNode().dataPointer) ||
-            ctx.layoutNode().type === '$ref') {
+            ctx.layoutNode().type === '$ref'
+            || this.formGroup == null) {
             return null;
         }
         const schemaPointer = ctx.layoutNode()?.isITEItem ? ctx.layoutNode()?.schemaPointer : null;
@@ -7774,7 +7821,7 @@ class JsonSchemaFormService {
         return control ? control.value : null;
     }
     getFormControlGroup(ctx) {
-        if (!ctx || !ctx.layoutNode || !isDefined(ctx.layoutNode().dataPointer)) {
+        if (!ctx || !ctx.layoutNode || !isDefined(ctx.layoutNode().dataPointer) || this.formGroup == null) {
             return null;
         }
         const schemaPointer = ctx.layoutNode()?.isITEItem ? ctx.layoutNode()?.schemaPointer : null;
@@ -7902,6 +7949,62 @@ class JsonSchemaFormService {
         JsonPointer.remove(this.layout, this.getLayoutPointer(ctx));
         return true;
     }
+    //TODO fix-doesnt seem to work for nested array
+    adjustLayout(layout, newData, currLayoutIndex = [0], currDataIndex = []) {
+        const createWidgetCtx = (layoutNode, layoutIndex, dataIndex) => {
+            return {
+                layoutNode: () => { return layoutNode; },
+                layoutIndex: () => { return layoutIndex; },
+                dataIndex: () => { return dataIndex; },
+            };
+        };
+        // console.log(`adjustLayout currLayoutIndex:${currLayoutIndex}`);
+        if (layout.items && _isArray(newData)) {
+            let ctx = createWidgetCtx({
+                ...layout,
+                $ref: layout.$ref || layout.items[0]?.dataPointer,
+                dataPointer: layout.items[0]?.dataPointer,
+                arrayItem: true,
+                arrayItemType: "list"
+            }, [...currLayoutIndex.slice(0, currLayoutIndex.length - 1), layout.items.length - 1], [...currDataIndex.slice(0, currDataIndex.length - 1), layout.items.length - 1]);
+            const lengthDifference = newData.length - layout.items.filter(litem => {
+                return litem?.type != "$ref";
+            }).length;
+            if (lengthDifference > 0) {
+                // Add missing controls if newData has more items
+                for (let i = 0; i < lengthDifference; i++) {
+                    this.addItem(ctx);
+                }
+            }
+            else if (lengthDifference < 0) {
+                let numToRemove = layout.items.filter(litem => {
+                    return litem?.type != "$ref";
+                })
+                    .length - newData.length;
+                // Remove extra controls if newData has fewer items
+                for (let i = 0; i < numToRemove; i++) {
+                    let oldDataIndex = ctx.dataIndex();
+                    let lastDataIndex = oldDataIndex[oldDataIndex.length - 1];
+                    let updatedLayoutIndex = [...currLayoutIndex.slice(0, currLayoutIndex.length - 1), 0];
+                    let updatedDataIndex = [...oldDataIndex.slice(0, oldDataIndex.length - 1), 0];
+                    ctx = createWidgetCtx(ctx.layoutNode(), updatedLayoutIndex, updatedDataIndex);
+                    let removed = this.removeItem(ctx);
+                    // if(removed){
+                    //}
+                }
+            }
+            return;
+        }
+        if (_isArray(layout)) {
+            layout.forEach((layoutNode, ind) => {
+                //if(layoutNode.items){
+                let layoutMappedData = layoutNode.dataPointer ? JsonPointer.get(newData, layoutNode.dataPointer)
+                    : undefined;
+                this.adjustLayout(layoutNode, layoutMappedData, [...currLayoutIndex, ind], [...currDataIndex, ind]);
+                ///}
+            });
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: JsonSchemaFormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: JsonSchemaFormService }); }
 }
@@ -8072,8 +8175,8 @@ class AddReferenceComponent {
             layoutIndex: this.layoutIndex().slice(0, -1),
             layoutNode: this.jsf.getParentNode(this)
         };
-        return parent.layoutNode.add ||
-            this.jsf.setArrayItemTitle(parent, this.layoutNode(), this.itemCount);
+        return parent.layoutNode && (parent.layoutNode.add ||
+            this.jsf.setArrayItemTitle(parent, this.layoutNode(), this.itemCount));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AddReferenceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: AddReferenceComponent, selector: "add-reference-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
@@ -8540,7 +8643,12 @@ class InputComponent {
         this.jsf.updateValue(this, event.target.value);
     }
     ngOnDestroy() {
-        this.jsf.updateValue(this, null);
+        //needed to be done in timeout for when dynamic/condition based
+        //titles depend on the formControls value but the formControl
+        //is also destroyed
+        setTimeout(() => {
+            this.jsf.updateValue(this, null);
+        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: InputComponent, selector: "input-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
@@ -8648,6 +8756,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 }]
         }] });
 
+// item-title.component.ts
+class ItemTitleComponent {
+    constructor(jsf) {
+        this.jsf = jsf;
+    }
+    ngOnChanges(changes) {
+        this.updateTitle();
+    }
+    ngOnInit() {
+        // Calculate the title once on init, or subscribe to changes here
+        this.updateTitle();
+        this.dataChangesSubs = this.jsf.dataChanges.subscribe((val) => {
+            this.updateTitle();
+        });
+    }
+    updateTitle() {
+        this.title = this.jsf.setArrayItemTitle(this.ctx, this.item, this.index);
+    }
+    ngOnDestroy() {
+        this.dataChangesSubs?.unsubscribe();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ItemTitleComponent, deps: [{ token: JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ItemTitleComponent, selector: "item-title", inputs: { item: "item", index: "index", ctx: "ctx" }, usesOnChanges: true, ngImport: i0, template: `<div>{{ title }}</div>`, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ItemTitleComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'item-title',
+                    template: `<div>{{ title }}</div>`,
+                    standalone: false
+                    // Consider using ChangeDetectionStrategy.OnPush here for maximum efficiency
+                }]
+        }], ctorParameters: () => [{ type: JsonSchemaFormService }], propDecorators: { item: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }], ctx: [{
+                type: Input
+            }] } });
+
 class MessageComponent {
     constructor() {
         this.jsf = inject(JsonSchemaFormService);
@@ -8726,7 +8874,10 @@ class NumberComponent {
         this.jsf.updateValue(this, event.target.value);
     }
     ngOnDestroy() {
-        this.jsf.updateValue(this, null);
+        //see cpmments in input component
+        setTimeout(() => {
+            this.jsf.updateValue(this, null);
+        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: NumberComponent, selector: "number-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "inputControl", first: true, predicate: ["inputControl"], descendants: true }, { propertyName: "div", first: true, predicate: ["divElt"], descendants: true }], ngImport: i0, template: `
@@ -8885,6 +9036,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
 class TabsComponent {
     constructor() {
         this.jsf = inject(JsonSchemaFormService);
+        this.cdr = inject(ChangeDetectorRef);
         this.selectedItem = 0;
         this.showAddTab = true;
         this.layoutNode = input(undefined);
@@ -8898,6 +9050,13 @@ class TabsComponent {
         }
         this.itemCount = this.layoutNode().items.length - 1;
         this.updateControl();
+        //TODO review/test-introduced to fix dynamic titles not updating
+        //when their conditional linked field is destroyed
+        //-forces change detection!
+        //-commented out, causing other issues
+        this.dataChangesSubs = this.jsf.dataChanges.subscribe((val) => {
+            //this.cdr.detectChanges();
+        });
     }
     select(index) {
         const layoutNode = this.layoutNode();
@@ -8922,6 +9081,9 @@ class TabsComponent {
     setTabTitle(item, index) {
         return this.jsf.setArrayItemTitle(this, item, index);
     }
+    ngOnDestroy() {
+        this.dataChangesSubs?.unsubscribe();
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: TabsComponent, selector: "tabs-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <ul
@@ -8945,6 +9107,7 @@ class TabsComponent {
           />
           {{setTabTitle(item, i)}}
           </a>
+          
       </li>
     </ul>
 
@@ -8999,6 +9162,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
           />
           {{setTabTitle(item, i)}}
           </a>
+          
       </li>
     </ul>
 
@@ -9292,6 +9456,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
 class RootComponent {
     constructor() {
         this.jsf = inject(JsonSchemaFormService);
+        this.cdr = inject(ChangeDetectorRef);
         this.dataIndex = input(undefined);
         this.layoutIndex = input(undefined);
         this.layout = input(undefined);
@@ -9399,6 +9564,8 @@ class RootComponent {
             return this._getSelectFrameworkInputsRaw(layoutItem, i);
         }
     }
+    //TODO investigate-causing layout issue with layout,for now
+    //removed from template
     trackByFn(index, item) {
         return item._id ?? index;
     }
@@ -9414,6 +9581,7 @@ class RootComponent {
         if (changes['layout'] || changes['dataIndex'] || changes['layoutIndex']) {
             // Clear the entire cache of the memoized function
             this._getSelectFrameworkInputsMemoized.cache.clear();
+            this.cdr.markForCheck();
         }
     }
     showWidget(layoutNode) {
@@ -9424,6 +9592,10 @@ class RootComponent {
             this.jsf.dataChanges.subscribe((val) => {
                 //this.selectframeworkInputCache?.clear();
                 this._getSelectFrameworkInputsMemoized.cache.clear();
+                //TODO-fix for now changed to detectChanges-
+                //used to updated the dynamic titles in tab compnents 
+                this.cdr.markForCheck();
+                // this.cdr.detectChanges();-breaks oneOf/ matdatepicker
             });
         }
     }
@@ -9445,7 +9617,7 @@ class RootComponent {
       You must explicitly disable dragging on the main element 
       and re-enable it only when using the handle.
       -->
-      <div *ngFor="let layoutItem of layout(); let i = index;trackBy: trackByFn"
+      <div *ngFor="let layoutItem of layout(); let i = index;"
          cdkDrag  [cdkDragStartDelay]="{touch:1000,mouse:0}"
         [cdkDragDisabled]="!isDraggable(layoutItem)"
         [class.form-flex-item]="isFlexItem()"
@@ -9500,7 +9672,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
       You must explicitly disable dragging on the main element 
       and re-enable it only when using the handle.
       -->
-      <div *ngFor="let layoutItem of layout(); let i = index;trackBy: trackByFn"
+      <div *ngFor="let layoutItem of layout(); let i = index;"
          cdkDrag  [cdkDragStartDelay]="{touch:1000,mouse:0}"
         [cdkDragDisabled]="!isDraggable(layoutItem)"
         [class.form-flex-item]="isFlexItem()"
@@ -10096,7 +10268,10 @@ class TextareaComponent {
         this.jsf.updateValue(this, event.target.value);
     }
     ngOnDestroy() {
-        this.jsf.updateValue(this, null);
+        //see cpmments in input component
+        setTimeout(() => {
+            this.jsf.updateValue(this, null);
+        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: TextareaComponent, selector: "textarea-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
@@ -10892,12 +11067,12 @@ const BASIC_WIDGETS = [
     MessageComponent, NoneComponent, NumberComponent, RadiosComponent,
     RootComponent, SectionComponent, SelectComponent, SelectFrameworkComponent,
     SelectWidgetComponent, SubmitComponent, TabComponent, TabsComponent,
-    TemplateComponent, TextareaComponent, SelectCheckboxComponent
+    TemplateComponent, TextareaComponent, SelectCheckboxComponent, ItemTitleComponent
 ];
 
 class WidgetLibraryModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: WidgetLibraryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: WidgetLibraryModule, declarations: [AddReferenceComponent, OneOfComponent, ButtonComponent, CheckboxComponent, CheckboxesComponent, FileComponent, HiddenComponent, InputComponent, MessageComponent, NoneComponent, NumberComponent, RadiosComponent, RootComponent, SectionComponent, SelectComponent, SelectFrameworkComponent, SelectWidgetComponent, SubmitComponent, TabComponent, TabsComponent, TemplateComponent, TextareaComponent, SelectCheckboxComponent, OrderableDirective, ElementAttributeDirective, StopPropagationDirective], imports: [CommonModule, FormsModule, ReactiveFormsModule, DragDropModule], exports: [AddReferenceComponent, OneOfComponent, ButtonComponent, CheckboxComponent, CheckboxesComponent, FileComponent, HiddenComponent, InputComponent, MessageComponent, NoneComponent, NumberComponent, RadiosComponent, RootComponent, SectionComponent, SelectComponent, SelectFrameworkComponent, SelectWidgetComponent, SubmitComponent, TabComponent, TabsComponent, TemplateComponent, TextareaComponent, SelectCheckboxComponent, OrderableDirective, ElementAttributeDirective, StopPropagationDirective] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: WidgetLibraryModule, declarations: [AddReferenceComponent, OneOfComponent, ButtonComponent, CheckboxComponent, CheckboxesComponent, FileComponent, HiddenComponent, InputComponent, MessageComponent, NoneComponent, NumberComponent, RadiosComponent, RootComponent, SectionComponent, SelectComponent, SelectFrameworkComponent, SelectWidgetComponent, SubmitComponent, TabComponent, TabsComponent, TemplateComponent, TextareaComponent, SelectCheckboxComponent, ItemTitleComponent, OrderableDirective, ElementAttributeDirective, StopPropagationDirective], imports: [CommonModule, FormsModule, ReactiveFormsModule, DragDropModule], exports: [AddReferenceComponent, OneOfComponent, ButtonComponent, CheckboxComponent, CheckboxesComponent, FileComponent, HiddenComponent, InputComponent, MessageComponent, NoneComponent, NumberComponent, RadiosComponent, RootComponent, SectionComponent, SelectComponent, SelectFrameworkComponent, SelectWidgetComponent, SubmitComponent, TabComponent, TabsComponent, TemplateComponent, TextareaComponent, SelectCheckboxComponent, ItemTitleComponent, OrderableDirective, ElementAttributeDirective, StopPropagationDirective] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: WidgetLibraryModule, imports: [CommonModule, FormsModule, ReactiveFormsModule, DragDropModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: WidgetLibraryModule, decorators: [{
@@ -11145,11 +11320,26 @@ class JsonSchemaFormComponent {
                 if (this.formValuesInput.indexOf('.') === -1) {
                     changedData = this.getInputValue(this.formValuesInput);
                     //this[this.formValuesInput];
-                    this.setFormValues(changedData, resetFirst);
                 }
                 else {
                     const [input, key] = this.formValuesInput.split('.');
                     changedData = this.getInputValue(input)[key];
+                }
+                //TODO -review if any of the the array sizes changed then the 
+                //layout array sizes need to be resynced to match
+                //-for now jsf.adjustLayout doesnt seem to work with nested arrays
+                //so entire form is reinited 
+                let arraySizesChanged = !compareObjectArraySizes(changedData, this.jsf.data);
+                if (arraySizesChanged) {
+                    this.initializeForm(changedData);
+                    if (this.onChange) {
+                        this.onChange(changedData);
+                    }
+                    if (this.onTouched) {
+                        this.onTouched(changedData);
+                    }
+                }
+                else {
                     this.setFormValues(changedData, resetFirst);
                 }
                 // If anything else has changed, re-render the entire form
@@ -11174,7 +11364,7 @@ class JsonSchemaFormComponent {
                 .forEach(input => this.previousInputs[input] = this.getInputValue(input));
         }
     }
-    setFormValues(formValues, resetFirst = true) {
+    setFormValues(formValues, resetFirst = true, emitFormEvent = true, usePatch = true) {
         if (formValues) {
             const newFormValues = this.objectWrap ? formValues['1'] : formValues;
             if (!this.jsf.formGroup) {
@@ -11182,10 +11372,15 @@ class JsonSchemaFormComponent {
                 this.activateForm();
             }
             else if (resetFirst) { //changed to avoid reset events
-                this.jsf.formGroup.reset({}, { emitEvent: false });
+                this.jsf.formGroup.reset({}, { emitEvent: emitFormEvent });
             }
             if (this.jsf.formGroup) { //changed to avoid reset events
-                this.jsf.formGroup.patchValue(newFormValues, { emitEvent: false });
+                if (usePatch) {
+                    this.jsf.formGroup.patchValue(newFormValues, { emitEvent: emitFormEvent });
+                }
+                else {
+                    this.jsf.formGroup.setValue(newFormValues, { emitEvent: emitFormEvent });
+                }
             }
             if (this.onChange) {
                 this.onChange(newFormValues);
@@ -11197,6 +11392,7 @@ class JsonSchemaFormComponent {
         else {
             this.jsf.formGroup.reset();
         }
+        this.changeDetector.markForCheck();
     }
     submitForm() {
         const validData = this.jsf.validData;
@@ -11717,5 +11913,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AddReferenceComponent, BASIC_WIDGETS, ButtonComponent, CheckboxComponent, CheckboxesComponent, ElementAttributeDirective, FileComponent, Framework, FrameworkLibraryService, HiddenComponent, InputComponent, JsonPointer, JsonSchemaFormComponent, JsonSchemaFormModule, JsonSchemaFormService, JsonValidators, MessageComponent, NoneComponent, NumberComponent, OneOfComponent, OrderableDirective, RadiosComponent, RootComponent, SectionComponent, SelectCheckboxComponent, SelectComponent, SelectFrameworkComponent, SelectWidgetComponent, StopPropagationDirective, SubmitComponent, TabComponent, TabsComponent, TemplateComponent, TextareaComponent, WidgetLibraryModule, WidgetLibraryService, _executeAsyncValidators, _executeValidators, _mergeErrors, _mergeObjects, _toPromise, addClasses, buildFormGroup, buildFormGroupTemplate, buildLayout, buildLayoutFromSchema, buildSchemaFromData, buildSchemaFromLayout, buildTitleMap, checkInlineType, combineAllOf, commonItems, convertSchemaToDraft6, copy, deValidationMessages, enValidationMessages, esValidationMessages, fixRequiredArrayProperties, fixTitle, forEach, forEachCopy, formatFormData, frValidationMessages, getControl, getControlValidators, getFromSchema, getInputType, getLayoutNode, getSubSchema, getTitleMapFromOneOf, getType, hasNonNullValue, hasOwn, hasValue, inArray, isArray, isBoolean, isDate, isDefined, isEmpty, isFunction, isInputRequired, isInteger, isMap, isNumber, isObject, isObservable, isPrimitive, isPromise, isSet, isString, isType, itValidationMessages, mapLayout, mergeFilteredObject, mergeSchemas, path2ControlKey, ptValidationMessages, removeRecursiveReferences, resolveSchemaReferences, setControl, setRequiredFields, toJavaScriptType, toObservable, toSchemaType, toTitleCase, uniqueItems, updateInputOptions, xor, zhValidationMessages };
+export { AddReferenceComponent, BASIC_WIDGETS, ButtonComponent, CheckboxComponent, CheckboxesComponent, ElementAttributeDirective, FileComponent, Framework, FrameworkLibraryService, HiddenComponent, InputComponent, ItemTitleComponent, JsonPointer, JsonSchemaFormComponent, JsonSchemaFormModule, JsonSchemaFormService, JsonValidators, MessageComponent, NoneComponent, NumberComponent, OneOfComponent, OrderableDirective, RadiosComponent, RootComponent, SectionComponent, SelectCheckboxComponent, SelectComponent, SelectFrameworkComponent, SelectWidgetComponent, StopPropagationDirective, SubmitComponent, TabComponent, TabsComponent, TemplateComponent, TextareaComponent, WidgetLibraryModule, WidgetLibraryService, _executeAsyncValidators, _executeValidators, _mergeErrors, _mergeObjects, _toPromise, addClasses, buildFormGroup, buildFormGroupTemplate, buildLayout, buildLayoutFromSchema, buildSchemaFromData, buildSchemaFromLayout, buildTitleMap, checkInlineType, combineAllOf, commonItems, convertSchemaToDraft6, copy, deValidationMessages, enValidationMessages, esValidationMessages, fixRequiredArrayProperties, fixTitle, forEach, forEachCopy, formatFormData, frValidationMessages, getControl, getControlValidators, getFromSchema, getInputType, getLayoutNode, getSubSchema, getTitleMapFromOneOf, getType, hasNonNullValue, hasOwn, hasValue, inArray, isArray, isBoolean, isDate, isDefined, isEmpty, isFunction, isInputRequired, isInteger, isMap, isNumber, isObject, isObservable, isPrimitive, isPromise, isSet, isString, isType, itValidationMessages, mapLayout, mergeFilteredObject, mergeSchemas, path2ControlKey, ptValidationMessages, removeRecursiveReferences, resolveSchemaReferences, setControl, setRequiredFields, toJavaScriptType, toObservable, toSchemaType, toTitleCase, uniqueItems, updateInputOptions, xor, zhValidationMessages };
 //# sourceMappingURL=ng-formworks-core.mjs.map