@ng-formworks/core 16.6.5 → 16.6.7

package/fesm2022/ng-formworks-core.mjs

@@ -10,7 +10,7 @@ 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 { from, Observable, forkJoin, Subject, BehaviorSubject, lastValueFrom } from 'rxjs';
-import { some, isNil, isEmpty as isEmpty$1, isObject as isObject$1, pick, isEqual as isEqual$2 } from 'lodash';
+import { some, isNil, isEmpty as isEmpty$1, isObject as isObject$1, pick, isEqual as isEqual$2, memoize } from 'lodash';
 import isEqual$1 from 'lodash/isEqual';
 import { map, takeUntil } from 'rxjs/operators';
 import omit from 'lodash/omit';
@@ -19,8 +19,8 @@ import map$1 from 'lodash/map';
 import _isArray from 'lodash/isArray';
 import _isPlainObject from 'lodash/isPlainObject';
 import uniqueId from 'lodash/uniqueId';
-import * as i3$1 from 'nxt-sortablejs';
-import { SortablejsModule } from 'nxt-sortablejs';
+import * as i3$1 from '@angular/cdk/drag-drop';
+import { DragDropModule } from '@angular/cdk/drag-drop';
 import * as i1 from '@angular/common/http';
 
 class Framework {
@@ -5265,14 +5265,24 @@ function buildFormGroupTemplate(jsf, nodeValue = null, setValues = true, schemaP
                         const schemaRefPointer = removeRecursiveReferences(schemaPointer + '/items/' + i, jsf.schemaRecursiveRefMap);
                         const itemRefPointer = removeRecursiveReferences(shortDataPointer + '/' + i, jsf.dataRecursiveRefMap, jsf.arrayMap);
                         const itemRecursive = itemRefPointer !== shortDataPointer + '/' + i;
+                        //if is in templateLibrary then need to check if its a conditional
+                        //and conditional pointers match orthewise create a new ref
+                        let conditionalRefPointer = `${itemRefPointer}@${schemaPointer}`;
+                        let templateRefToUse = itemRefPointer;
+                        if (hasOwn(jsf.templateRefLibrary, itemRefPointer)
+                            && !hasOwn(jsf.templateRefLibrary, conditionalRefPointer)) {
+                            jsf.templateRefLibrary[conditionalRefPointer] = buildFormGroupTemplate(jsf, null, setValues, schemaRefPointer, itemRefPointer, templatePointer + '/controls/' + i);
+                            templateRefToUse = conditionalRefPointer;
+                        }
                         if (!hasOwn(jsf.templateRefLibrary, itemRefPointer)) {
                             jsf.templateRefLibrary[itemRefPointer] = null;
                             jsf.templateRefLibrary[itemRefPointer] = buildFormGroupTemplate(jsf, null, setValues, schemaRefPointer, itemRefPointer, templatePointer + '/controls/' + i);
+                            jsf.templateRefLibrary[conditionalRefPointer] = jsf.templateRefLibrary[itemRefPointer];
                         }
                         controls.push(isArray(nodeValue) ?
                             buildFormGroupTemplate(jsf, nodeValue[i], setValues, schemaPointer + '/items/' + i, dataPointer + '/' + i, templatePointer + '/controls/' + i) :
                             itemRecursive ?
-                                null : cloneDeep(jsf.templateRefLibrary[itemRefPointer]));
+                                null : cloneDeep(jsf.templateRefLibrary[templateRefToUse]));
                     }
                 }
                 // If 'additionalItems' is an object = additional list items (after tuple items)
@@ -5288,9 +5298,19 @@ function buildFormGroupTemplate(jsf, nodeValue = null, setValues = true, schemaP
                 const schemaRefPointer = removeRecursiveReferences(additionalItemsPointer, jsf.schemaRecursiveRefMap);
                 const itemRefPointer = removeRecursiveReferences(shortDataPointer + '/-', jsf.dataRecursiveRefMap, jsf.arrayMap);
                 const itemRecursive = itemRefPointer !== shortDataPointer + '/-';
+                //if is in templateLibrary then need to check if its a conditional
+                //and conditional pointers match orthewise create a new ref
+                let conditionalRefPointer = `${itemRefPointer}@${schemaPointer}`;
+                let templateRefToUse = itemRefPointer;
+                if (hasOwn(jsf.templateRefLibrary, itemRefPointer)
+                    && !hasOwn(jsf.templateRefLibrary, conditionalRefPointer)) {
+                    jsf.templateRefLibrary[conditionalRefPointer] = buildFormGroupTemplate(jsf, null, setValues, schemaRefPointer, itemRefPointer, templatePointer + '/controls/-');
+                    templateRefToUse = conditionalRefPointer;
+                }
                 if (!hasOwn(jsf.templateRefLibrary, itemRefPointer)) {
                     jsf.templateRefLibrary[itemRefPointer] = null;
                     jsf.templateRefLibrary[itemRefPointer] = buildFormGroupTemplate(jsf, null, setValues, schemaRefPointer, itemRefPointer, templatePointer + '/controls/-');
+                    jsf.templateRefLibrary[conditionalRefPointer] = jsf.templateRefLibrary[itemRefPointer];
                 }
                 // const itemOptions = jsf.dataMap.get(itemRefPointer) || new Map();
                 const itemOptions = nodeOptions;
@@ -5301,7 +5321,7 @@ function buildFormGroupTemplate(jsf, nodeValue = null, setValues = true, schemaP
                         controls.push(isArray(nodeValue) ?
                             buildFormGroupTemplate(jsf, nodeValue[i], setValues, schemaRefPointer, dataPointer + '/-', templatePointer + '/controls/-') :
                             itemRecursive ?
-                                null : cloneDeep(jsf.templateRefLibrary[itemRefPointer]));
+                                null : cloneDeep(jsf.templateRefLibrary[templateRefToUse]));
                     }
                 }
             }
@@ -5620,6 +5640,35 @@ function getControl(formGroup, dataPointer, returnGroup = false, schemaPointer)
     // or formGroup.get() failed to return the control,
     // search the formGroup object for dataPointer's control
     let subGroup = formGroup;
+    //if schemapointer provided but no control matched
+    //it could mean the schema pointer is a nested child
+    //for example this could be in form group
+    //formGroup.controls.$allOf$0$then$properties$foo
+    //but schemapointer provided is '/allOf/0/then/properties/foo/items/properties/name'
+    //and dataPointer is '/foo/0/name'
+    //then need to look in formGroup.controls.$allOf$0$then$properties$foo
+    //for control path /0/name
+    if (schemaPointer) {
+        let controlPointer = JsonPointer.toControlPointer(dataPointer, {});
+        let schemaPointerArray = schemaPointer.split('/');
+        let controlPointerArray = JsonPointer.parse(dataPointer);
+        //controlPointer.split('/').splice(1);
+        let currSPAKey;
+        let spFormGroup;
+        while (schemaPointerArray.length > 0) {
+            currSPAKey = schemaPointerArray.pop();
+            let ckey = path2ControlKey(schemaPointerArray.join("/"));
+            spFormGroup = formGroup.get(ckey);
+            if (controlPointerArray[0] == schemaPointerArray[schemaPointerArray.length - 1]) {
+                controlPointerArray.shift();
+            }
+            if (spFormGroup) {
+                break;
+            }
+        }
+        subGroup = spFormGroup || subGroup;
+        dataPointerArray = spFormGroup ? controlPointerArray : dataPointerArray;
+    }
     for (const key of dataPointerArray) {
         if (hasOwn(subGroup, 'controls')) {
             subGroup = subGroup.controls;
@@ -6320,13 +6369,15 @@ function fixNestedArrayLayout(options) {
 function buildLayoutFromSchema(jsf, widgetLibrary, nodeValue = null, schemaPointer = '', dataPointer = '', arrayItem = false, arrayItemType = null, removable = null, forRefLibrary = false, dataPointerPrefix = '', jsonSchema) {
     function applyITEConditions(builtLayout, schPointer, keySchemaPointer, negateClause, parentLayout) {
         if (builtLayout) {
-            if (parentLayout && parentLayout.isITEItem && parentLayout.options.condition) {
+            const parentCondition = parentLayout && parentLayout.isITEItem && parentLayout.options.condition;
+            if (parentCondition) {
+                //builtLayout.isITEItem=true;
                 return;
             }
             if (isArray(builtLayout)) {
                 builtLayout.forEach(item => {
                     item.isITEItem = true;
-                    item.options.condition = convertJSONSchemaIfToCondition(schema, item, negateClause);
+                    item.options.condition = parentCondition ? null : convertJSONSchemaIfToCondition(schema, item, negateClause);
                     applyITEConditions(item, schPointer, keySchemaPointer, negateClause, builtLayout);
                     //item.schemaPointer = schPointer + keySchemaPointer + item.dataPointer;
                     //item.options.condition = convertJSONSchemaIfToCondition(schema, negateClause);
@@ -6344,7 +6395,7 @@ function buildLayoutFromSchema(jsf, widgetLibrary, nodeValue = null, schemaPoint
             else {
                 builtLayout.isITEItem = true;
                 //builtLayout.schemaPointer = `${schPointer}${keySchemaPointer}/${builtLayout.name}`;
-                builtLayout.options.condition = convertJSONSchemaIfToCondition(schema, builtLayout, negateClause);
+                builtLayout.options.condition = parentCondition ? null : convertJSONSchemaIfToCondition(schema, builtLayout, negateClause);
                 //newSection.push(builtLayout)
             }
         }
@@ -6456,7 +6507,8 @@ function buildLayoutFromSchema(jsf, widgetLibrary, nodeValue = null, schemaPoint
                                         '/properties/' + innerItemLevel2.name : innerItemLevel2.name;
                                     //innerItemLevel2.oneOfPointer =  schemaPointer + keySchemaPointer + l2SchemaPointer;
                                     // innerItemLevel2.schemaPointer=innerItemLevel2.schemaPointer; 
-                                    innerItemLevel2.oneOfPointer = innerItemLevel2.schemaPointer;
+                                    const ofPointer = { anyOf: "anyOfPointer", oneOf: "oneOfPointer" }[ofType];
+                                    innerItemLevel2[ofPointer] = ofPointer ? innerItemLevel2.schemaPointer : undefined;
                                 });
                             }
                             //TODO review-will never reach here if forRefLibrary==true
@@ -6466,6 +6518,9 @@ function buildLayoutFromSchema(jsf, widgetLibrary, nodeValue = null, schemaPoint
                                 innerItem.forEach(item => {
                                     const l2SchemaPointer = hasOwn(ofItem, 'properties') ?
                                         '/properties/' + item.name : item.name;
+                                    if (ofType == "anyOf") {
+                                        item.anyOfPointer = item.schemaPointer;
+                                    }
                                     if (outerOneOfItem) {
                                         ////item.oneOfPointer =  schemaPointer + keySchemaPointer + l2SchemaPointer;
                                         //schemaPointer + keySchemaPointer + item.dataPointer;
@@ -6489,7 +6544,8 @@ function buildLayoutFromSchema(jsf, widgetLibrary, nodeValue = null, schemaPoint
                             }
                             else {
                                 if (outerOneOfItem) {
-                                    innerItem.oneOfPointer = schemaPointer + keySchemaPointer; // + innerItem.dataPointer;
+                                    const ofPointer = { anyOf: "anyOfPointer", oneOf: "oneOfPointer" }[ofType];
+                                    innerItem[ofPointer] = ofPointer ? schemaPointer + keySchemaPointer : undefined;
                                     ////innerItem.schemaPointer=innerItem.oneOfPointer; 
                                     outerOneOfItem.items = outerOneOfItem.items || [];
                                     outerOneOfItem.items.push(innerItem);
@@ -6582,6 +6638,13 @@ function buildLayoutFromSchema(jsf, widgetLibrary, nodeValue = null, schemaPoint
                     itemRefPointer !== shortDataPointer + '/' + i;
                 // If removable, add tuple item layout to layoutRefLibrary
                 if (removable && i >= newNode.options.minItems) {
+                    let conditionalRefPointer = `${itemRefPointer}@${schemaPointer}`;
+                    let templateRefToUse = itemRefPointer;
+                    if (hasOwn(jsf.layoutRefLibrary, itemRefPointer)
+                        && !hasOwn(jsf.layoutRefLibrary, conditionalRefPointer)) {
+                        jsf.layoutRefLibrary[conditionalRefPointer] = buildLayoutFromSchema(jsf, widgetLibrary, isArray(nodeValue) ? nodeValue[i] : null, schemaPointer + '/items/' + i, itemRecursive ? '' : dataPointer + '/' + i, true, 'tuple', true, true, itemRecursive ? dataPointer + '/' + i : '');
+                        templateRefToUse = conditionalRefPointer;
+                    }
                     if (!hasOwn(jsf.layoutRefLibrary, itemRefPointer)) {
                         // Set to null first to prevent recursive reference from causing endless loop
                         jsf.layoutRefLibrary[itemRefPointer] = null;
@@ -6589,9 +6652,10 @@ function buildLayoutFromSchema(jsf, widgetLibrary, nodeValue = null, schemaPoint
                         if (itemRecursive) {
                             jsf.layoutRefLibrary[itemRefPointer].recursiveReference = true;
                         }
+                        jsf.layoutRefLibrary[conditionalRefPointer] = jsf.layoutRefLibrary[itemRefPointer];
                     }
                     newItem = getLayoutNode({
-                        $ref: itemRefPointer,
+                        $ref: templateRefToUse,
                         dataPointer: dataPointer + '/' + i,
                         recursiveReference: itemRecursive,
                     }, jsf, widgetLibrary, isArray(nodeValue) ? nodeValue[i] : null);
@@ -6617,6 +6681,13 @@ function buildLayoutFromSchema(jsf, widgetLibrary, nodeValue = null, schemaPoint
             const itemRecursive = !itemRefPointer.length ||
                 itemRefPointer !== shortDataPointer + '/-';
             const itemSchemaPointer = removeRecursiveReferences(additionalItemsSchemaPointer, jsf.schemaRecursiveRefMap, jsf.arrayMap);
+            let conditionalRefPointer = `${itemRefPointer}@${schemaPointer}`;
+            let templateRefToUse = itemRefPointer;
+            if (hasOwn(jsf.layoutRefLibrary, itemRefPointer)
+                && !hasOwn(jsf.layoutRefLibrary, conditionalRefPointer)) {
+                jsf.layoutRefLibrary[conditionalRefPointer] = buildLayoutFromSchema(jsf, widgetLibrary, null, itemSchemaPointer, itemRecursive ? '' : dataPointer + '/-', true, 'list', removable, true, itemRecursive ? dataPointer + '/-' : '');
+                templateRefToUse = conditionalRefPointer;
+            }
             // Add list item layout to layoutRefLibrary
             if (itemRefPointer.length && !hasOwn(jsf.layoutRefLibrary, itemRefPointer)) {
                 // Set to null first to prevent recursive reference from causing endless loop
@@ -6625,6 +6696,7 @@ function buildLayoutFromSchema(jsf, widgetLibrary, nodeValue = null, schemaPoint
                 if (itemRecursive) {
                     jsf.layoutRefLibrary[itemRefPointer].recursiveReference = true;
                 }
+                jsf.layoutRefLibrary[conditionalRefPointer] = jsf.layoutRefLibrary[itemRefPointer];
             }
             // Add any additional default items
             if (!itemRecursive || newNode.options.required) {
@@ -6633,7 +6705,7 @@ function buildLayoutFromSchema(jsf, widgetLibrary, nodeValue = null, schemaPoint
                 if (newNode.items.length < arrayLength) {
                     for (let i = newNode.items.length; i < arrayLength; i++) {
                         newNode.items.push(getLayoutNode({
-                            $ref: itemRefPointer,
+                            $ref: templateRefToUse,
                             dataPointer: dataPointer + '/-',
                             recursiveReference: itemRecursive,
                         }, jsf, widgetLibrary, isArray(nodeValue) ? nodeValue[i] : null));
@@ -6668,7 +6740,7 @@ function buildLayoutFromSchema(jsf, widgetLibrary, nodeValue = null, schemaPoint
                     recursiveReference: itemRecursive,
                     type: '$ref',
                     widget: widgetLibrary.getWidget('$ref'),
-                    $ref: itemRefPointer,
+                    $ref: templateRefToUse //itemRefPointer,
                 });
             }
         }
@@ -7019,9 +7091,6 @@ class JsonSchemaFormService {
     setDraggableState(value) {
         this.draggableStateSubject.next(value); // Update the draggable value
     }
-    setSortableOptions(value) {
-        this.sortableOptionsSubject.next(value); // Update the sortable options value
-    }
     createAjvInstance(ajvOptions) {
         let ajvInstance = new Ajv2019(ajvOptions);
         ajvInstance.addMetaSchema(jsonDraft6);
@@ -7142,17 +7211,12 @@ class JsonSchemaFormService {
         //and will only be enabled when/if the caller sets the value back to true 
         this.draggableStateSubject = new BehaviorSubject(true); // Default value true
         this.draggableState$ = this.draggableStateSubject.asObservable();
-        //this is introduced to look at replacing the orderable directive with 
-        //nxt-sortablejs and sortablejs 
-        this.sortableOptionsSubject = new BehaviorSubject({ disabled: false }); // Default value true
-        this.sortableOptions$ = this.sortableOptionsSubject.asObservable();
         this.ajvRegistry = {};
         this.setLanguage(this.language);
         this.ajv.addMetaSchema(jsonDraft6);
         this.ajv.addMetaSchema(jsonDraft7);
         addFormats(this.ajv);
         this.ajvRegistry['default'] = { name: 'default', ajvInstance: this.ajv, ajvValidator: null };
-        console.log(this.ajvRegistry);
         // Add custom 'duration' format using a regex
         /*
         this.ajv.addFormat("duration", {
@@ -7284,12 +7348,12 @@ class JsonSchemaFormService {
         this.formGroup = buildFormGroup(this.formGroupTemplate);
         if (this.formGroup) {
             this.compileAjvSchema(ajvInstanceName);
-            this.validateData(this.formGroup.value, true, ajvInstanceName);
+            this.validateData(this.formGroup.getRawValue(), true, ajvInstanceName);
             // Set up observables to emit data and validation info when form data changes
             if (this.formValueSubscription) {
                 this.formValueSubscription.unsubscribe();
             }
-            this.formValueSubscription = this.formGroup.valueChanges.subscribe(formValue => this.validateData(formValue, true, ajvInstanceName));
+            this.formValueSubscription = this.formGroup.valueChanges.subscribe(formValue => this.validateData(this.formGroup.getRawValue(), true, ajvInstanceName));
         }
     }
     buildLayout(widgetLibrary) {
@@ -7408,6 +7472,12 @@ class JsonSchemaFormService {
         }
         return '';
     }
+    //TODO fix- if template has value in title
+    // "items": {
+    //   "title": "{{ 'Input ' + $index+value }}",
+    //                   "type": "string"
+    // }
+    // result on button will be "Add Input [object Object]"
     setArrayItemTitle(parentCtx = {}, childNode = null, index = null) {
         const parentNode = parentCtx.layoutNode;
         const parentValues = this.getFormControlValue(parentCtx);
@@ -7484,7 +7554,8 @@ class JsonSchemaFormService {
         //introduced to check if the node  is part of ITE conditional
         //then change or add the control
         if (layoutNode?.schemaPointer && layoutNode.isITEItem ||
-            (layoutNode?.schemaPointer && layoutNode?.oneOfPointer)) {
+            (layoutNode?.schemaPointer && layoutNode?.oneOfPointer) ||
+            layoutNode?.schemaPointer && layoutNode.anyOfPointer) {
             //before changing control, need to set the new data type for data formatting
             const schemaType = this.dataMap.get(layoutNode?.dataPointer).get("schemaType");
             if (schemaType != layoutNode.dataType) {
@@ -7527,9 +7598,12 @@ class JsonSchemaFormService {
         //set, as the control would only be initialized when the condition is true 
         //TODO-review need to decide which of the data sets between data,formValues and default 
         //to use for the value
-        if (ctx.options?.condition || layoutNode?.oneOfPointer) {
+        //TODO try maybe marking descendants in applyITEConditions
+        let isITEDescendant = layoutNode?.schemaPointer?.split("/")
+            .some(elt => ["then", "else"].includes(elt));
+        if (ctx.options?.condition || layoutNode?.oneOfPointer || layoutNode?.anyOfPointer || isITEDescendant) {
             const dataPointer = this.getDataPointer(ctx);
-            const controlValue = ctx.formControl.value;
+            const controlValue = ctx.formControl?.value;
             const dataValue = JsonPointer.has(this.data, dataPointer) ?
                 JsonPointer.get(this.data, dataPointer) : undefined;
             const formValue = JsonPointer.has(this.formValues, dataPointer) ?
@@ -7660,7 +7734,8 @@ class JsonSchemaFormService {
         }
         const schemaPointer = ctx.layoutNode?.isITEItem ? ctx.layoutNode?.schemaPointer : null;
         const oneOfPointer = ctx.layoutNode?.oneOfPointer;
-        return getControl(this.formGroup, this.getDataPointer(ctx), false, schemaPointer || oneOfPointer);
+        const anyOfPointer = ctx.layoutNode?.anyOfPointer;
+        return getControl(this.formGroup, this.getDataPointer(ctx), false, schemaPointer || oneOfPointer || anyOfPointer);
     }
     setFormControl(ctx, control) {
         if (!ctx || !ctx.layoutNode ||
@@ -7678,7 +7753,8 @@ class JsonSchemaFormService {
         }
         const schemaPointer = ctx.layoutNode?.isITEItem ? ctx.layoutNode?.schemaPointer : null;
         const oneOfPointer = ctx.layoutNode?.oneOfPointer;
-        const control = getControl(this.formGroup, this.getDataPointer(ctx), false, schemaPointer || oneOfPointer);
+        const anyOfPointer = ctx.layoutNode?.anyOfPointer;
+        const control = getControl(this.formGroup, this.getDataPointer(ctx), false, schemaPointer || oneOfPointer || anyOfPointer);
         return control ? control.value : null;
     }
     getFormControlGroup(ctx) {
@@ -7687,7 +7763,8 @@ class JsonSchemaFormService {
         }
         const schemaPointer = ctx.layoutNode?.isITEItem ? ctx.layoutNode?.schemaPointer : null;
         const oneOfPointer = ctx.layoutNode?.oneOfPointer;
-        return getControl(this.formGroup, this.getDataPointer(ctx), true, schemaPointer || oneOfPointer);
+        const anyOfPointer = ctx.layoutNode?.anyOfPointer;
+        return getControl(this.formGroup, this.getDataPointer(ctx), true, schemaPointer || oneOfPointer || anyOfPointer);
     }
     getFormControlName(ctx) {
         if (!ctx.layoutNode ||
@@ -7775,6 +7852,9 @@ class JsonSchemaFormService {
         }
         // Move item in the formArray
         const formArray = this.getFormControlGroup(ctx);
+        if (oldIndex >= formArray.length) {
+            return false;
+        }
         const arrayItem = formArray.at(oldIndex);
         formArray.removeAt(oldIndex);
         formArray.insert(newIndex, arrayItem);
@@ -7821,7 +7901,7 @@ class SelectWidgetComponent {
     ngOnInit() {
         this.updateComponent();
     }
-    ngOnChanges() {
+    ngOnChanges(changes) {
         this.updateComponent();
     }
     updateComponent() {
@@ -7830,8 +7910,9 @@ class SelectWidgetComponent {
             this.newComponent = widgetContainer.createComponent((this.layoutNode.widget));
         }
         if (this.newComponent) {
-            for (const input of ['layoutNode', 'layoutIndex', 'dataIndex']) {
-                this.newComponent.instance[input] = this[input];
+            for (const inp of ['layoutNode', 'layoutIndex', 'dataIndex']) {
+                //this.newComponent.instance[inp] = this[inp];
+                this.newComponent.setInput(inp, this[inp]);
             }
         }
     }
@@ -7917,6 +7998,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }] } });
 
+//TODO review:stopPropagation used as a workaround 
+//to prevent dragging onMouseDown and onTouchStart events
+class StopPropagationDirective {
+    constructor(el, renderer) {
+        this.el = el;
+        this.renderer = renderer;
+        // The input property to receive an array of event names
+        this.events = [];
+        // An array to hold the unsubscribe functions for each event listener
+        this.unsubscribeFunctions = [];
+    }
+    ngOnInit() {
+        // If the input array is empty, default to 'mousedown'
+        const eventsToListen = this.events.length > 0 ? this.events : ['mousedown'];
+        // Loop through the array of event names and set up a listener for each
+        eventsToListen.forEach(eventName => {
+            const unsub = this.renderer.listen(this.el.nativeElement, eventName, (event) => {
+                event.stopPropagation();
+            });
+            // Store the unsubscribe function to be called on destruction
+            this.unsubscribeFunctions.push(unsub);
+        });
+    }
+    ngOnDestroy() {
+        // Call each stored unsubscribe function to clean up listeners
+        this.unsubscribeFunctions.forEach(unsub => unsub());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StopPropagationDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: StopPropagationDirective, selector: "[appStopPropagation]", inputs: { events: ["appStopPropagation", "events"] }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StopPropagationDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[appStopPropagation]', standalone: false
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { events: [{
+                type: Input,
+                args: ['appStopPropagation']
+            }] } });
+
 class AddReferenceComponent {
     constructor(jsf) {
         this.jsf = jsf;
@@ -7945,13 +8066,16 @@ class AddReferenceComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AddReferenceComponent, selector: "add-reference-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
     <section [class]="options?.htmlClass || ''" align="end">
       <button *ngIf="showAddButton"
-        [class]="options?.fieldHtmlClass || ''" class="sortable-filter sortable-fixed"
+        [class]="options?.fieldHtmlClass || ''"
         [disabled]="options?.readonly"
-        (click)="addItem($event)">
+        (click)="addItem($event)"
+        [appStopPropagation]="['mousedown', 'touchstart']"
+        >
         <span *ngIf="options?.icon" [class]="options?.icon"></span>
         <span *ngIf="options?.title" [innerHTML]="buttonText"></span>
+        
       </button>
-    </section>`, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.Default }); }
+    </section>`, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: StopPropagationDirective, selector: "[appStopPropagation]", inputs: ["appStopPropagation"] }], changeDetection: i0.ChangeDetectionStrategy.Default }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AddReferenceComponent, decorators: [{
             type: Component,
@@ -7961,11 +8085,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     template: `
     <section [class]="options?.htmlClass || ''" align="end">
       <button *ngIf="showAddButton"
-        [class]="options?.fieldHtmlClass || ''" class="sortable-filter sortable-fixed"
+        [class]="options?.fieldHtmlClass || ''"
         [disabled]="options?.readonly"
-        (click)="addItem($event)">
+        (click)="addItem($event)"
+        [appStopPropagation]="['mousedown', 'touchstart']"
+        >
         <span *ngIf="options?.icon" [class]="options?.icon"></span>
         <span *ngIf="options?.title" [innerHTML]="buttonText"></span>
+        
       </button>
     </section>`,
                     changeDetection: ChangeDetectionStrategy.Default,
@@ -8011,12 +8138,14 @@ class ButtonComponent {
         [name]="controlName"
         [type]="layoutNode?.type"
         [value]="controlValue"
-        (click)="updateValue($event)">
+        (click)="updateValue($event)"
+        [appStopPropagation]="['mousedown', 'touchstart']"
+        >
         <span *ngIf="options?.icon || options?.title"
           [class]="options?.icon"
           [innerHTML]="options?.title"></span>
       </button>
-    </div>`, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    </div>`, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: StopPropagationDirective, selector: "[appStopPropagation]", inputs: ["appStopPropagation"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
@@ -8034,7 +8163,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         [name]="controlName"
         [type]="layoutNode?.type"
         [value]="controlValue"
-        (click)="updateValue($event)">
+        (click)="updateValue($event)"
+        [appStopPropagation]="['mousedown', 'touchstart']"
+        >
         <span *ngIf="options?.icon || options?.title"
           [class]="options?.icon"
           [innerHTML]="options?.title"></span>
@@ -8053,6 +8184,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 //this mainly affects checkboxes coupled with conditions
 //-the value is rechecked
 //-see https://github.com/SortableJS/Sortable/issues/1052#issuecomment-369613072
+//-switched to angular cdk for dnd
 class CheckboxComponent {
     constructor(jsf) {
         this.jsf = jsf;
@@ -8416,7 +8548,7 @@ class InputComponent {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InputComponent, deps: [{ token: JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: InputComponent, selector: "input-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
-    <div [class]="options?.htmlClass || ''" class="sortable-filter" >
+    <div [class]="options?.htmlClass || ''" >
       <label *ngIf="options?.title"
         [attr.for]="'control' + layoutNode?._id"
         [class]="options?.labelHtmlClass || ''"
@@ -8437,6 +8569,7 @@ class InputComponent {
         [readonly]="options?.readonly ? 'readonly' : null"
         [type]="layoutNode?.type"
         [attributes]="inputAttributes"
+        [appStopPropagation]="['mousedown', 'touchstart']"
         >
       <input *ngIf="!boundControl"
         [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
@@ -8455,12 +8588,13 @@ class InputComponent {
         [value]="controlValue"
         (input)="updateValue($event)"
         [attributes]="inputAttributes"
+        [appStopPropagation]="['mousedown', 'touchstart']"
         >
         <datalist *ngIf="options?.typeahead?.source"
           [id]="'control' + layoutNode?._id + 'Autocomplete'">
           <option *ngFor="let word of options?.typeahead?.source" [value]="word">
         </datalist>
-    </div>`, isInline: true, dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: ElementAttributeDirective, selector: "[attributes]", inputs: ["attributes"] }] }); }
+    </div>`, isInline: true, dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: ElementAttributeDirective, selector: "[attributes]", inputs: ["attributes"] }, { kind: "directive", type: StopPropagationDirective, selector: "[appStopPropagation]", inputs: ["appStopPropagation"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InputComponent, decorators: [{
             type: Component,
@@ -8468,7 +8602,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     // tslint:disable-next-line:component-selector
                     selector: 'input-widget',
                     template: `
-    <div [class]="options?.htmlClass || ''" class="sortable-filter" >
+    <div [class]="options?.htmlClass || ''" >
       <label *ngIf="options?.title"
         [attr.for]="'control' + layoutNode?._id"
         [class]="options?.labelHtmlClass || ''"
@@ -8489,6 +8623,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         [readonly]="options?.readonly ? 'readonly' : null"
         [type]="layoutNode?.type"
         [attributes]="inputAttributes"
+        [appStopPropagation]="['mousedown', 'touchstart']"
         >
       <input *ngIf="!boundControl"
         [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
@@ -8507,6 +8642,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         [value]="controlValue"
         (input)="updateValue($event)"
         [attributes]="inputAttributes"
+        [appStopPropagation]="['mousedown', 'touchstart']"
         >
         <datalist *ngIf="options?.typeahead?.source"
           [id]="'control' + layoutNode?._id + 'Autocomplete'">
@@ -8605,7 +8741,7 @@ class NumberComponent {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NumberComponent, deps: [{ token: JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NumberComponent, selector: "number-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
-    <div #divElt [class]="options?.htmlClass || ''" class="sortable-filter" >
+    <div #divElt [class]="options?.htmlClass || ''"  >
       <label *ngIf="options?.title"
         [attr.for]="'control' + layoutNode?._id"
         [class]="options?.labelHtmlClass || ''"
@@ -8627,7 +8763,7 @@ class NumberComponent {
         [title]="lastValidNumber"
         [type]="layoutNode?.type === 'range' ? 'range' : 'number'"
         [attributes]="inputAttributes"
-
+        [appStopPropagation]="['mousedown', 'touchstart']"
         >
       <input #inputControl *ngIf="!boundControl"
         [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
@@ -8647,9 +8783,10 @@ class NumberComponent {
         [value]="controlValue"
         (input)="updateValue($event)"
         [attributes]="inputAttributes"
+        [appStopPropagation]="['mousedown', 'touchstart']"
         >
       <span *ngIf="layoutNode?.type === 'range'" [innerHTML]="controlValue"></span>
-    </div>`, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: ElementAttributeDirective, selector: "[attributes]", inputs: ["attributes"] }] }); }
+    </div>`, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: ElementAttributeDirective, selector: "[attributes]", inputs: ["attributes"] }, { kind: "directive", type: StopPropagationDirective, selector: "[appStopPropagation]", inputs: ["appStopPropagation"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NumberComponent, decorators: [{
             type: Component,
@@ -8657,7 +8794,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     // tslint:disable-next-line:component-selector
                     selector: 'number-widget',
                     template: `
-    <div #divElt [class]="options?.htmlClass || ''" class="sortable-filter" >
+    <div #divElt [class]="options?.htmlClass || ''"  >
       <label *ngIf="options?.title"
         [attr.for]="'control' + layoutNode?._id"
         [class]="options?.labelHtmlClass || ''"
@@ -8679,7 +8816,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         [title]="lastValidNumber"
         [type]="layoutNode?.type === 'range' ? 'range' : 'number'"
         [attributes]="inputAttributes"
-
+        [appStopPropagation]="['mousedown', 'touchstart']"
         >
       <input #inputControl *ngIf="!boundControl"
         [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
@@ -8699,6 +8836,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         [value]="controlValue"
         (input)="updateValue($event)"
         [attributes]="inputAttributes"
+        [appStopPropagation]="['mousedown', 'touchstart']"
         >
       <span *ngIf="layoutNode?.type === 'range'" [innerHTML]="controlValue"></span>
     </div>`,
@@ -8719,7 +8857,7 @@ class SelectFrameworkComponent {
     ngOnInit() {
         this.updateComponent();
     }
-    ngOnChanges() {
+    ngOnChanges(changes) {
         this.updateComponent();
     }
     updateComponent() {
@@ -8730,9 +8868,12 @@ class SelectFrameworkComponent {
             //this.widgetContainer.createComponent<any>(this.jsf.framework)
         }
         if (this.newComponent) {
-            for (const input of ['layoutNode', 'layoutIndex', 'dataIndex']) {
-                this.newComponent.instance[input] = this[input];
+            for (const inp of ['layoutNode', 'layoutIndex', 'dataIndex']) {
+                //this.newComponent.instance[inp] = this[inp];
+                this.newComponent.setInput(inp, this[inp]);
             }
+            // Manually trigger change detection after updating inputs
+            //this.changeDetectorRef.detectChanges();
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectFrameworkComponent, deps: [{ token: JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
@@ -9173,236 +9314,88 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }] } });
 
-/**
- * OrderableDirective
- *
- * Enables array elements to be reordered by dragging and dropping.
- *
- * Only works for arrays that have at least two elements.
- *
- * Also detects arrays-within-arrays, and correctly moves either
- * the child array element or the parent array element,
- * depending on the drop targert.
- *
- * Listeners for movable element being dragged:
- * - dragstart: add 'dragging' class to element, set effectAllowed = 'move'
- * - dragover: set dropEffect = 'move'
- * - dragend: remove 'dragging' class from element
- *
- * Listeners for stationary items being dragged over:
- * - dragenter: add 'drag-target-...' classes to element
- * - dragleave: remove 'drag-target-...' classes from element
- * - drop: remove 'drag-target-...' classes from element, move dropped array item
- */
-class OrderableDirective {
-    constructor(elementRef, jsf, ngZone) {
-        this.elementRef = elementRef;
-        this.jsf = jsf;
-        this.ngZone = ngZone;
-        this.overParentElement = false;
-        this.overChildElement = false;
-    }
-    ngOnInit() {
-        if (this.orderable && this.layoutNode && this.layoutIndex && this.dataIndex) {
-            this.element = this.elementRef.nativeElement;
-            this.element.draggable = true;
-            this.arrayLayoutIndex = 'move:' + this.layoutIndex.slice(0, -1).toString();
-            this.ngZone.runOutsideAngular(() => {
-                // Listeners for movable element being dragged:
-                this.element.addEventListener('dragstart', (event) => {
-                    event.dataTransfer.effectAllowed = 'move';
-                    event.dataTransfer.setData('text', '');
-                    // Hack to bypass stupid HTML drag-and-drop dataTransfer protection
-                    // so drag source info will be available on dragenter
-                    const sourceArrayIndex = this.dataIndex[this.dataIndex.length - 1];
-                    sessionStorage.setItem(this.arrayLayoutIndex, sourceArrayIndex + '');
-                });
-                this.element.addEventListener('dragover', (event) => {
-                    if (event.preventDefault) {
-                        event.preventDefault();
-                    }
-                    event.dataTransfer.dropEffect = 'move';
-                    return false;
-                });
-                // Listeners for stationary items being dragged over:
-                this.element.addEventListener('dragenter', (event) => {
-                    // Part 1 of a hack, inspired by Dragster, to simulate mouseover and mouseout
-                    // behavior while dragging items - http://bensmithett.github.io/dragster/
-                    if (this.overParentElement) {
-                        return this.overChildElement = true;
-                    }
-                    else {
-                        this.overParentElement = true;
-                    }
-                    const sourceArrayIndex = sessionStorage.getItem(this.arrayLayoutIndex);
-                    if (sourceArrayIndex !== null) {
-                        if (this.dataIndex[this.dataIndex.length - 1] < +sourceArrayIndex) {
-                            this.element.classList.add('drag-target-top');
-                        }
-                        else if (this.dataIndex[this.dataIndex.length - 1] > +sourceArrayIndex) {
-                            this.element.classList.add('drag-target-bottom');
-                        }
-                    }
-                });
-                this.element.addEventListener('dragleave', (event) => {
-                    // Part 2 of the Dragster hack
-                    if (this.overChildElement) {
-                        this.overChildElement = false;
-                    }
-                    else if (this.overParentElement) {
-                        this.overParentElement = false;
-                    }
-                    const sourceArrayIndex = sessionStorage.getItem(this.arrayLayoutIndex);
-                    if (!this.overParentElement && !this.overChildElement && sourceArrayIndex !== null) {
-                        this.element.classList.remove('drag-target-top');
-                        this.element.classList.remove('drag-target-bottom');
-                    }
-                });
-                this.element.addEventListener('drop', (event) => {
-                    this.element.classList.remove('drag-target-top');
-                    this.element.classList.remove('drag-target-bottom');
-                    // Confirm that drop target is another item in the same array as source item
-                    const sourceArrayIndex = sessionStorage.getItem(this.arrayLayoutIndex);
-                    const destArrayIndex = this.dataIndex[this.dataIndex.length - 1];
-                    if (sourceArrayIndex !== null && +sourceArrayIndex !== destArrayIndex) {
-                        // Move array item
-                        this.jsf.moveArrayItem(this, +sourceArrayIndex, destArrayIndex);
-                    }
-                    sessionStorage.removeItem(this.arrayLayoutIndex);
-                    return false;
-                });
-            });
-            // Subscribe to the draggable state
-            this.draggableStateSubscription = this.jsf.draggableState$.subscribe((value) => {
-                this.element.draggable = value;
-            });
-        }
-    }
-    ngOnDestroy() {
-        if (this.draggableStateSubscription) {
-            this.draggableStateSubscription.unsubscribe();
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OrderableDirective, deps: [{ token: i0.ElementRef }, { token: JsonSchemaFormService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: OrderableDirective, selector: "[orderable]", inputs: { orderable: "orderable", layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OrderableDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    // tslint:disable-next-line:directive-selector
-                    selector: '[orderable]',
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: JsonSchemaFormService }, { type: i0.NgZone }]; }, propDecorators: { orderable: [{
-                type: Input
-            }], layoutNode: [{
-                type: Input
-            }], layoutIndex: [{
-                type: Input
-            }], dataIndex: [{
-                type: Input
-            }] } });
-
 class RootComponent {
     constructor(jsf) {
         this.jsf = jsf;
         this.isFlexItem = false;
-        this.sortableConfig = {
-            filter: ".sortable-filter",
-            preventOnFilter: false,
-            onEnd: (/**Event*/ evt) => {
-                evt.newIndex; // most likely why this event is used is to get the dragging element's current index
-                // same properties as onEnd
-                //console.log(`sortablejs event:${evt}`);
-                let srcInd = evt.oldIndex;
-                let trgInd = evt.newIndex;
-                let layoutItem = this.layout[trgInd];
-                let dataInd = layoutItem?.arrayItem ? (this.dataIndex || []).concat(trgInd) : (this.dataIndex || []);
-                let layoutInd = (this.layoutIndex || []).concat(trgInd);
-                let itemCtx = {
-                    dataIndex: dataInd,
-                    layoutIndex: layoutInd,
-                    layoutNode: layoutItem,
-                };
-                //must set moveLayout to false as nxtSortable already moves it
-                this.jsf.moveArrayItem(itemCtx, evt.oldIndex, evt.newIndex, false);
-            },
-            onMove: function (/**Event*/ evt, /**Event*/ originalEvent) {
-                if (evt.related.classList.contains("sortable-fixed")) {
-                    //console.log(evt.related);
-                    return false;
-                }
-            }
+        this.memoizationEnabled = true;
+        /**
+         * Predicate function that disallows '$ref' item sorts
+         * NB declared as a var instead of a function
+         * like sortPredicate(index: number, item: CdkDrag<number>){..}
+         * since 'this' is bound to the draglist and doesn't reference the
+         * FlexLayoutRootComponent instance
+         */
+        //TODO also need to think of other types such as button which can be
+        //created by an arbitrary layout
+        //might not be needed added condition to [cdkDragDisabled]
+        this.sortPredicate = (index, item) => {
+            let layoutItem = this.layout[index];
+            let result = this.isDraggable(layoutItem);
+            //layoutItem.type != '$ref';
+            return result;
         };
-    }
-    sortableInit(sortable) {
-        this.sortableObj = sortable;
-        //Sortable.utils.on(this.sortableObj.el,"nulling",(s)=>{console.log("event nulling sortablejs")})
-        ///NB issue caused by sortablejs when it its destroyed
-        //this mainly affects checkboxes coupled with conditions
-        //-the value is rechecked
-        //-see https://github.com/SortableJS/Sortable/issues/1052#issuecomment-369613072
-        /* attempt to monkey patch sortable js
-        const originalMethod = sortable._nulling;
-        let zone=this.zone;
-        sortable._nulling=function() {
-          console.log(`pluginEvent 2 ${pluginEvent}`)
-                zone.runOutsideAngular(() => {
-                  console.log(`pluginEvent3 ${pluginEvent}`)
-          pluginEvent('nulling', this);
-      
-          rootEl =
-          dragEl =
-          parentEl =
-          ghostEl =
-          nextEl =
-          cloneEl =
-          lastDownEl =
-          cloneHidden =
-      
-          tapEvt =
-          touchEvt =
+        //private selectframeworkInputCache = new Map<string, { dataIndex: any[], layoutIndex: any[], layoutNode: any }>();
+        //TODO review caching-if form field values change, the changes are not propagated
+        /*
+        getSelectFrameworkInputs(layoutItem: any, i: number) {
+          // Create a unique key based on the layoutItem and index
+          const cacheKey = `${layoutItem._id}-${i}`;
+        
+          // If the result is already in the cache, return it
+          if(this.enableCaching){
+            if (this.selectframeworkInputCache.has(cacheKey)) {
+              return this.selectframeworkInputCache.get(cacheKey);
+            }
+          }
       
-          moved =
-          newIndex =
-          newDraggableIndex =
-          oldIndex =
-          oldDraggableIndex =
       
-          lastTarget =
-          lastDirection =
+          // If not cached, calculate the values (assuming dataIndex() and layoutIndex() are functions)
+          const dataIndex = layoutItem?.arrayItem ? (this.dataIndex() || []).concat(i) : (this.dataIndex() || []);
+          const layoutIndex = (this.layoutIndex() || []).concat(i);
       
-          putSortable =
-          activeGroup =
-          Sortable.dragged =
-          Sortable.ghost =
-          Sortable.clone =
-          Sortable.active = null;
+          // Save the result in the cache
+          const result = { dataIndex, layoutIndex, layoutNode: layoutItem };
+          if(this.enableCaching){
+            this.selectframeworkInputCache.set(cacheKey, result);
+          }
       
-        
-            let el = this.el;
-            savedInputChecked.forEach(function (checkEl) {
-              if (el.contains(checkEl)) {
-                checkEl.checked = true;
-              }
-            });
-        
-            savedInputChecked.length =
-            lastDx =
-            lastDy = 0;
-    
-          })
-    
-        }.bind(sortable)
-        */
+          return result;
+        }
+          */
+        this._getSelectFrameworkInputsRaw = (layoutItem, i) => {
+            const dataIndexValue = this.dataIndex || [];
+            const layoutIndexValue = this.layoutIndex || [];
+            return {
+                layoutNode: layoutItem,
+                layoutIndex: [...layoutIndexValue, i],
+                dataIndex: layoutItem?.arrayItem ? [...dataIndexValue, i] : dataIndexValue,
+            };
+        };
+        // Define a separate function to hold the memoized version
+        this._getSelectFrameworkInputsMemoized = memoize(this._getSelectFrameworkInputsRaw, (layoutItem, i) => {
+            const layoutItemKey = layoutItem?.id ?? JSON.stringify(layoutItem);
+            return `${layoutItemKey}-${i}`;
+        });
+    }
+    drop(event) {
+        // most likely why this event is used is to get the dragging element's current index
+        let srcInd = event.previousIndex;
+        let trgInd = event.currentIndex;
+        let layoutItem = this.layout[trgInd];
+        let dataInd = layoutItem?.arrayItem ? (this.dataIndex || []).concat(trgInd) : (this.dataIndex || []);
+        let layoutInd = (this.layoutIndex || []).concat(trgInd);
+        let itemCtx = {
+            dataIndex: dataInd,
+            layoutIndex: layoutInd,
+            layoutNode: layoutItem
+        };
+        this.jsf.moveArrayItem(itemCtx, srcInd, trgInd, true);
     }
     isDraggable(node) {
         let result = node.arrayItem && node.type !== '$ref' &&
-            node.arrayItemType === 'list' && this.isOrderable !== false;
-        if (this.sortableObj) {
-            //this.sortableObj.option("disabled",true);
-            //this.sortableObj.option("sort",false);
-            //this.sortableObj.option("disabled",!result);
-        }
+            node.arrayItemType === 'list' && this.isOrderable !== false
+            && node.type !== 'submit';
         return result;
     }
     //TODO also need to think of other types such as button which can be
@@ -9418,93 +9411,157 @@ class RootComponent {
         return ((node.options || {}).flex || '').split(/\s+/)[index] ||
             (node.options || {})[attribute] || ['1', '1', 'auto'][index];
     }
+    // This is the public function that the template calls
+    getSelectFrameworkInputs(layoutItem, i) {
+        if (this.memoizationEnabled) {
+            return this._getSelectFrameworkInputsMemoized(layoutItem, i);
+        }
+        else {
+            return this._getSelectFrameworkInputsRaw(layoutItem, i);
+        }
+    }
+    trackByFn(index, item) {
+        return item._id ?? index;
+    }
+    /*
+    ngOnChanges(changes: SimpleChanges): void {
+      // If any of the input properties change, clear the cache
+      if (changes.dataIndex || changes.layoutIndex || changes.layout) {
+        this.selectframeworkInputCache?.clear(); // Clear the entire cache
+      }
+    }
+    */
+    ngOnChanges(changes) {
+        if (changes['layout'] || changes['dataIndex'] || changes['layoutIndex']) {
+            // Clear the entire cache of the memoized function
+            this._getSelectFrameworkInputsMemoized.cache.clear();
+        }
+    }
     showWidget(layoutNode) {
         return this.jsf.evaluateCondition(layoutNode, this.dataIndex);
     }
     ngOnInit() {
-        // Subscribe to the draggable state
-        this.sortableOptionsSubscription = this.jsf.sortableOptions$.subscribe((optsValue) => {
-            if (this.sortableObj) {
-                Object.keys(optsValue).forEach(opt => {
-                    let optVal = optsValue[opt];
-                    this.sortableObj.option(opt, optVal);
-                });
-                //this.sortableObj.option("disabled",true);
-                //this.sortableObj.option("sort",false);
-            }
-        });
+        if (this.memoizationEnabled) {
+            this.jsf.dataChanges.subscribe((val) => {
+                //this.selectframeworkInputCache?.clear();
+                this._getSelectFrameworkInputsMemoized.cache.clear();
+            });
+        }
     }
     ngOnDestroy() {
-        if (this.sortableOptionsSubscription) {
-            this.sortableOptionsSubscription.unsubscribe();
-        }
+        //this.selectframeworkInputCache?.clear()
+        //this.selectframeworkInputCache=null;
+        this._getSelectFrameworkInputsMemoized.cache.clear();
+        this.dataChangesSubs?.unsubscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RootComponent, deps: [{ token: JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RootComponent, selector: "root-widget", inputs: { dataIndex: "dataIndex", layoutIndex: "layoutIndex", layout: "layout", isOrderable: "isOrderable", isFlexItem: "isFlexItem" }, ngImport: i0, template: `
-    <div [class.flex-inherit]="true" #sortableContainter [nxtSortablejs]="layout" [config]="sortableConfig" (init)="sortableInit($event)">
-      <div *ngFor="let layoutItem of layout; let i = index"
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RootComponent, selector: "root-widget", inputs: { dataIndex: "dataIndex", layoutIndex: "layoutIndex", layout: "layout", isOrderable: "isOrderable", isFlexItem: "isFlexItem", memoizationEnabled: "memoizationEnabled" }, usesOnChanges: true, ngImport: i0, template: `
+    <div cdkDropList (cdkDropListDropped)="drop($event)" 
+      [class.flex-inherit]="true"
+      [cdkDropListSortPredicate]="sortPredicate"
+    >
+      <!-- -for now left out
+      cdkDragHandle directive, by itself, does not disable the 
+      default drag behavior of its parent cdkDrag element. 
+      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"
+         cdkDrag  [cdkDragStartDelay]="{touch:1000,mouse:0}"
+        [cdkDragDisabled]="!isDraggable(layoutItem)"
         [class.form-flex-item]="isFlexItem"
         [style.align-self]="(layoutItem.options || {})['align-self']"
         [style.flex-basis]="getFlexAttribute(layoutItem, 'flex-basis')"
         [style.flex-grow]="getFlexAttribute(layoutItem, 'flex-grow')"
         [style.flex-shrink]="getFlexAttribute(layoutItem, 'flex-shrink')"
         [style.order]="(layoutItem.options || {}).order"
-        [class.sortable-filter]="!isDraggable(layoutItem)"
-        [class.sortable-fixed]="isFixed(layoutItem)"
         >
+
+        <!-- workaround to disbale dragging of input fields -->
+        <!--
+        <div *ngIf="layoutItem?.dataType !='object'"  cdkDragHandle>
+         <p>Drag Handle {{layoutItem?.dataType}}</p>
+        </div>
+        -->
         <!--NB orderable directive is not used but has been left in for now and set to false
           otherwise the compiler won't recognize dataIndex and other dependent attributes
         -->
+        <!--
         <div 
           [dataIndex]="layoutItem?.arrayItem ? (dataIndex || []).concat(i) : (dataIndex || [])"
           [layoutIndex]="(layoutIndex || []).concat(i)"
           [layoutNode]="layoutItem"
           [orderable]="false"
-          [class.sortable-filter]="!isDraggable(layoutItem)"
-          [class.sortable-fixed]="isFixed(layoutItem)"
           >
           <select-framework-widget *ngIf="showWidget(layoutItem)"
             [dataIndex]="layoutItem?.arrayItem ? (dataIndex || []).concat(i) : (dataIndex || [])"
             [layoutIndex]="(layoutIndex || []).concat(i)"
             [layoutNode]="layoutItem"></select-framework-widget>
         </div>
+        -->
+      <select-framework-widget *ngIf="showWidget(layoutItem)"
+            [dataIndex]="getSelectFrameworkInputs(layoutItem,i).dataIndex"
+            [layoutIndex]="getSelectFrameworkInputs(layoutItem,i).layoutIndex"
+            [layoutNode]="getSelectFrameworkInputs(layoutItem,i).layoutNode">
+		  </select-framework-widget>
       </div>
     </div>
-    `, isInline: true, styles: ["[draggable=true]{transition:all .15s cubic-bezier(.4,0,.2,1)}[draggable=true]:hover{cursor:move;box-shadow:2px 2px 4px #0003;position:relative;z-index:10;margin:-1px 1px 1px -1px}[draggable=true].drag-target-top{box-shadow:0 -2px #000;position:relative;z-index:20}[draggable=true].drag-target-bottom{box-shadow:0 2px #000;position:relative;z-index:20}.flex-inherit{display:inherit;flex-flow:inherit;flex-wrap:inherit;flex-direction:inherit;width:100%}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.SortablejsDirective, selector: "[nxtSortablejs]", inputs: ["nxtSortablejs", "sortablejsContainer", "config", "cloneFunction"], outputs: ["init"] }, { kind: "component", type: SelectFrameworkComponent, selector: "select-framework-widget", inputs: ["layoutNode", "layoutIndex", "dataIndex"] }, { kind: "directive", type: OrderableDirective, selector: "[orderable]", inputs: ["orderable", "layoutNode", "layoutIndex", "dataIndex"] }] }); }
+    `, isInline: true, styles: ["[draggable=true]{transition:all .15s cubic-bezier(.4,0,.2,1)}[draggable=true]:hover{cursor:move;box-shadow:2px 2px 4px #0003;position:relative;z-index:10;margin:-1px 1px 1px -1px}[draggable=true].drag-target-top{box-shadow:0 -2px #000;position:relative;z-index:20}[draggable=true].drag-target-bottom{box-shadow:0 2px #000;position:relative;z-index:20}.flex-inherit{display:inherit;flex-flow:inherit;flex-wrap:inherit;flex-direction:inherit;width:100%}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: SelectFrameworkComponent, selector: "select-framework-widget", inputs: ["layoutNode", "layoutIndex", "dataIndex"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RootComponent, decorators: [{
             type: Component,
             args: [{ selector: 'root-widget', template: `
-    <div [class.flex-inherit]="true" #sortableContainter [nxtSortablejs]="layout" [config]="sortableConfig" (init)="sortableInit($event)">
-      <div *ngFor="let layoutItem of layout; let i = index"
+    <div cdkDropList (cdkDropListDropped)="drop($event)" 
+      [class.flex-inherit]="true"
+      [cdkDropListSortPredicate]="sortPredicate"
+    >
+      <!-- -for now left out
+      cdkDragHandle directive, by itself, does not disable the 
+      default drag behavior of its parent cdkDrag element. 
+      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"
+         cdkDrag  [cdkDragStartDelay]="{touch:1000,mouse:0}"
+        [cdkDragDisabled]="!isDraggable(layoutItem)"
         [class.form-flex-item]="isFlexItem"
         [style.align-self]="(layoutItem.options || {})['align-self']"
         [style.flex-basis]="getFlexAttribute(layoutItem, 'flex-basis')"
         [style.flex-grow]="getFlexAttribute(layoutItem, 'flex-grow')"
         [style.flex-shrink]="getFlexAttribute(layoutItem, 'flex-shrink')"
         [style.order]="(layoutItem.options || {}).order"
-        [class.sortable-filter]="!isDraggable(layoutItem)"
-        [class.sortable-fixed]="isFixed(layoutItem)"
         >
+
+        <!-- workaround to disbale dragging of input fields -->
+        <!--
+        <div *ngIf="layoutItem?.dataType !='object'"  cdkDragHandle>
+         <p>Drag Handle {{layoutItem?.dataType}}</p>
+        </div>
+        -->
         <!--NB orderable directive is not used but has been left in for now and set to false
           otherwise the compiler won't recognize dataIndex and other dependent attributes
         -->
+        <!--
         <div 
           [dataIndex]="layoutItem?.arrayItem ? (dataIndex || []).concat(i) : (dataIndex || [])"
           [layoutIndex]="(layoutIndex || []).concat(i)"
           [layoutNode]="layoutItem"
           [orderable]="false"
-          [class.sortable-filter]="!isDraggable(layoutItem)"
-          [class.sortable-fixed]="isFixed(layoutItem)"
           >
           <select-framework-widget *ngIf="showWidget(layoutItem)"
             [dataIndex]="layoutItem?.arrayItem ? (dataIndex || []).concat(i) : (dataIndex || [])"
             [layoutIndex]="(layoutIndex || []).concat(i)"
             [layoutNode]="layoutItem"></select-framework-widget>
         </div>
+        -->
+      <select-framework-widget *ngIf="showWidget(layoutItem)"
+            [dataIndex]="getSelectFrameworkInputs(layoutItem,i).dataIndex"
+            [layoutIndex]="getSelectFrameworkInputs(layoutItem,i).layoutIndex"
+            [layoutNode]="getSelectFrameworkInputs(layoutItem,i).layoutNode">
+		  </select-framework-widget>
       </div>
     </div>
-    `, standalone: false, styles: ["[draggable=true]{transition:all .15s cubic-bezier(.4,0,.2,1)}[draggable=true]:hover{cursor:move;box-shadow:2px 2px 4px #0003;position:relative;z-index:10;margin:-1px 1px 1px -1px}[draggable=true].drag-target-top{box-shadow:0 -2px #000;position:relative;z-index:20}[draggable=true].drag-target-bottom{box-shadow:0 2px #000;position:relative;z-index:20}.flex-inherit{display:inherit;flex-flow:inherit;flex-wrap:inherit;flex-direction:inherit;width:100%}\n"] }]
+    `, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, styles: ["[draggable=true]{transition:all .15s cubic-bezier(.4,0,.2,1)}[draggable=true]:hover{cursor:move;box-shadow:2px 2px 4px #0003;position:relative;z-index:10;margin:-1px 1px 1px -1px}[draggable=true].drag-target-top{box-shadow:0 -2px #000;position:relative;z-index:20}[draggable=true].drag-target-bottom{box-shadow:0 2px #000;position:relative;z-index:20}.flex-inherit{display:inherit;flex-flow:inherit;flex-wrap:inherit;flex-direction:inherit;width:100%}\n"] }]
         }], ctorParameters: function () { return [{ type: JsonSchemaFormService }]; }, propDecorators: { dataIndex: [{
                 type: Input
             }], layoutIndex: [{
@@ -9515,6 +9572,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], isFlexItem: [{
                 type: Input
+            }], memoizationEnabled: [{
+                type: Input
             }] } });
 
 class SectionComponent {
@@ -9637,7 +9696,7 @@ class SectionComponent {
         [class]="options?.labelHelpBlockClass || ''"
         [innerHTML]="options?.description"></p>
       </div>
-    </fieldset>`, isInline: true, styles: [".legend{font-weight:700}.expandable>legend:before,.expandable>label:before{content:\"\\25b6\";padding-right:.3em;font-family:auto}.expanded>legend:before,.expanded>label:before{content:\"\\25bc\";padding-right:.2em}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: RootComponent, selector: "root-widget", inputs: ["dataIndex", "layoutIndex", "layout", "isOrderable", "isFlexItem"] }] }); }
+    </fieldset>`, isInline: true, styles: [".legend{font-weight:700}.expandable>legend:before,.expandable>label:before{content:\"\\25b6\";padding-right:.3em;font-family:auto}.expanded>legend:before,.expanded>label:before{content:\"\\25bc\";padding-right:.2em}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: RootComponent, selector: "root-widget", inputs: ["dataIndex", "layoutIndex", "layout", "isOrderable", "isFlexItem", "memoizationEnabled"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SectionComponent, decorators: [{
             type: Component,
@@ -9987,8 +10046,10 @@ class SubmitComponent {
         [name]="controlName"
         [type]="layoutNode?.type"
         [value]="controlValue"
-        (click)="updateValue($event)">
-    </div>`, isInline: true }); }
+        (click)="updateValue($event)"
+        [appStopPropagation]="['mousedown', 'touchstart']"
+        >
+    </div>`, isInline: true, dependencies: [{ kind: "directive", type: StopPropagationDirective, selector: "[appStopPropagation]", inputs: ["appStopPropagation"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SubmitComponent, decorators: [{
             type: Component,
@@ -10008,7 +10069,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         [name]="controlName"
         [type]="layoutNode?.type"
         [value]="controlValue"
-        (click)="updateValue($event)">
+        (click)="updateValue($event)"
+        [appStopPropagation]="['mousedown', 'touchstart']"
+        >
     </div>`,
                 }]
         }], ctorParameters: function () { return [{ type: JsonSchemaFormService }]; }, propDecorators: { layoutNode: [{
@@ -10732,7 +10795,7 @@ class TabComponent {
         [dataIndex]="dataIndex"
         [layoutIndex]="layoutIndex"
         [layout]="layoutNode.items"></root-widget>
-    </div>`, isInline: true, dependencies: [{ kind: "component", type: RootComponent, selector: "root-widget", inputs: ["dataIndex", "layoutIndex", "layout", "isOrderable", "isFlexItem"] }] }); }
+    </div>`, isInline: true, dependencies: [{ kind: "component", type: RootComponent, selector: "root-widget", inputs: ["dataIndex", "layoutIndex", "layout", "isOrderable", "isFlexItem", "memoizationEnabled"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabComponent, decorators: [{
             type: Component,
@@ -10755,6 +10818,135 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }] } });
 
+/**
+ * OrderableDirective
+ *
+ * Enables array elements to be reordered by dragging and dropping.
+ *
+ * Only works for arrays that have at least two elements.
+ *
+ * Also detects arrays-within-arrays, and correctly moves either
+ * the child array element or the parent array element,
+ * depending on the drop targert.
+ *
+ * Listeners for movable element being dragged:
+ * - dragstart: add 'dragging' class to element, set effectAllowed = 'move'
+ * - dragover: set dropEffect = 'move'
+ * - dragend: remove 'dragging' class from element
+ *
+ * Listeners for stationary items being dragged over:
+ * - dragenter: add 'drag-target-...' classes to element
+ * - dragleave: remove 'drag-target-...' classes from element
+ * - drop: remove 'drag-target-...' classes from element, move dropped array item
+ */
+class OrderableDirective {
+    constructor(elementRef, jsf, ngZone) {
+        this.elementRef = elementRef;
+        this.jsf = jsf;
+        this.ngZone = ngZone;
+        this.overParentElement = false;
+        this.overChildElement = false;
+    }
+    ngOnInit() {
+        if (this.orderable && this.layoutNode && this.layoutIndex && this.dataIndex) {
+            this.element = this.elementRef.nativeElement;
+            this.element.draggable = true;
+            this.arrayLayoutIndex = 'move:' + this.layoutIndex.slice(0, -1).toString();
+            this.ngZone.runOutsideAngular(() => {
+                // Listeners for movable element being dragged:
+                this.element.addEventListener('dragstart', (event) => {
+                    event.dataTransfer.effectAllowed = 'move';
+                    event.dataTransfer.setData('text', '');
+                    // Hack to bypass stupid HTML drag-and-drop dataTransfer protection
+                    // so drag source info will be available on dragenter
+                    const sourceArrayIndex = this.dataIndex[this.dataIndex.length - 1];
+                    sessionStorage.setItem(this.arrayLayoutIndex, sourceArrayIndex + '');
+                });
+                this.element.addEventListener('dragover', (event) => {
+                    if (event.preventDefault) {
+                        event.preventDefault();
+                    }
+                    event.dataTransfer.dropEffect = 'move';
+                    return false;
+                });
+                // Listeners for stationary items being dragged over:
+                this.element.addEventListener('dragenter', (event) => {
+                    // Part 1 of a hack, inspired by Dragster, to simulate mouseover and mouseout
+                    // behavior while dragging items - http://bensmithett.github.io/dragster/
+                    if (this.overParentElement) {
+                        return this.overChildElement = true;
+                    }
+                    else {
+                        this.overParentElement = true;
+                    }
+                    const sourceArrayIndex = sessionStorage.getItem(this.arrayLayoutIndex);
+                    if (sourceArrayIndex !== null) {
+                        if (this.dataIndex[this.dataIndex.length - 1] < +sourceArrayIndex) {
+                            this.element.classList.add('drag-target-top');
+                        }
+                        else if (this.dataIndex[this.dataIndex.length - 1] > +sourceArrayIndex) {
+                            this.element.classList.add('drag-target-bottom');
+                        }
+                    }
+                });
+                this.element.addEventListener('dragleave', (event) => {
+                    // Part 2 of the Dragster hack
+                    if (this.overChildElement) {
+                        this.overChildElement = false;
+                    }
+                    else if (this.overParentElement) {
+                        this.overParentElement = false;
+                    }
+                    const sourceArrayIndex = sessionStorage.getItem(this.arrayLayoutIndex);
+                    if (!this.overParentElement && !this.overChildElement && sourceArrayIndex !== null) {
+                        this.element.classList.remove('drag-target-top');
+                        this.element.classList.remove('drag-target-bottom');
+                    }
+                });
+                this.element.addEventListener('drop', (event) => {
+                    this.element.classList.remove('drag-target-top');
+                    this.element.classList.remove('drag-target-bottom');
+                    // Confirm that drop target is another item in the same array as source item
+                    const sourceArrayIndex = sessionStorage.getItem(this.arrayLayoutIndex);
+                    const destArrayIndex = this.dataIndex[this.dataIndex.length - 1];
+                    if (sourceArrayIndex !== null && +sourceArrayIndex !== destArrayIndex) {
+                        // Move array item
+                        this.jsf.moveArrayItem(this, +sourceArrayIndex, destArrayIndex);
+                    }
+                    sessionStorage.removeItem(this.arrayLayoutIndex);
+                    return false;
+                });
+            });
+            // Subscribe to the draggable state
+            this.draggableStateSubscription = this.jsf.draggableState$.subscribe((value) => {
+                this.element.draggable = value;
+            });
+        }
+    }
+    ngOnDestroy() {
+        if (this.draggableStateSubscription) {
+            this.draggableStateSubscription.unsubscribe();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OrderableDirective, deps: [{ token: i0.ElementRef }, { token: JsonSchemaFormService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: OrderableDirective, selector: "[orderable]", inputs: { orderable: "orderable", layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OrderableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // tslint:disable-next-line:directive-selector
+                    selector: '[orderable]',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: JsonSchemaFormService }, { type: i0.NgZone }]; }, propDecorators: { orderable: [{
+                type: Input
+            }], layoutNode: [{
+                type: Input
+            }], layoutIndex: [{
+                type: Input
+            }], dataIndex: [{
+                type: Input
+            }] } });
+
 const BASIC_WIDGETS = [
     AddReferenceComponent, OneOfComponent, ButtonComponent, CheckboxComponent,
     CheckboxesComponent, FileComponent, HiddenComponent, InputComponent,
@@ -10766,39 +10958,16 @@ const BASIC_WIDGETS = [
 
 class WidgetLibraryModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: WidgetLibraryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.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], imports: [CommonModule, FormsModule, ReactiveFormsModule, i3$1.SortablejsModule], 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] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: WidgetLibraryModule, imports: [CommonModule, FormsModule, ReactiveFormsModule,
-            SortablejsModule.forRoot({
-                //disabled:false,
-                //draggable:".draggableitem",//">:not(.nonsort)",//">.draggable-item",//":not(.nonsort)",//">*",//":not(.nonsort)",//":not(.non-draggable)",
-                filter: ".sortable-filter",
-                preventOnFilter: false,
-                onMove: function (/**Event*/ evt, /**Event*/ originalEvent) {
-                    if (evt.related.classList.contains("sortable-fixed")) {
-                        //console.log(evt.related);
-                        return false;
-                    }
-                }
-            })] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.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.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: WidgetLibraryModule, imports: [CommonModule, FormsModule, ReactiveFormsModule, DragDropModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: WidgetLibraryModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, FormsModule, ReactiveFormsModule,
-                        SortablejsModule.forRoot({
-                            //disabled:false,
-                            //draggable:".draggableitem",//">:not(.nonsort)",//">.draggable-item",//":not(.nonsort)",//">*",//":not(.nonsort)",//":not(.non-draggable)",
-                            filter: ".sortable-filter",
-                            preventOnFilter: false,
-                            onMove: function (/**Event*/ evt, /**Event*/ originalEvent) {
-                                if (evt.related.classList.contains("sortable-fixed")) {
-                                    //console.log(evt.related);
-                                    return false;
-                                }
-                            }
-                        })],
-                    declarations: [...BASIC_WIDGETS, OrderableDirective, ElementAttributeDirective],
-                    exports: [...BASIC_WIDGETS, OrderableDirective, ElementAttributeDirective]
+                    imports: [CommonModule, FormsModule, ReactiveFormsModule, DragDropModule
+                    ],
+                    declarations: [...BASIC_WIDGETS, OrderableDirective, ElementAttributeDirective, StopPropagationDirective],
+                    exports: [...BASIC_WIDGETS, OrderableDirective, ElementAttributeDirective, StopPropagationDirective]
                 }]
         }] });
 
@@ -11524,7 +11693,7 @@ class JsonSchemaFormComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: JsonSchemaFormComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: FrameworkLibraryService }, { token: WidgetLibraryService }, { token: JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: JsonSchemaFormComponent, selector: "json-schema-form", inputs: { schema: "schema", layout: "layout", data: "data", options: "options", framework: "framework", widgets: "widgets", form: "form", model: "model", JSONSchema: "JSONSchema", UISchema: "UISchema", formData: "formData", ngModel: "ngModel", language: "language", loadExternalAssets: "loadExternalAssets", debug: "debug", theme: "theme", ajvOptions: "ajvOptions", value: "value" }, outputs: { onChanges: "onChanges", onSubmit: "onSubmit", isValid: "isValid", validationErrors: "validationErrors", formSchema: "formSchema", formLayout: "formLayout", dataChange: "dataChange", modelChange: "modelChange", formDataChange: "formDataChange", ngModelChange: "ngModelChange" }, providers: [JsonSchemaFormService, JSON_SCHEMA_FORM_VALUE_ACCESSOR], usesOnChanges: true, ngImport: i0, template: "<form [autocomplete]=\"jsf?.formOptions?.autocomplete ? 'on' : 'off'\" class=\"json-schema-form\" (ngSubmit)=\"submitForm()\">\r\n  <root-widget [layout]=\"jsf?.layout\"></root-widget>\r\n</form>\r\n<div *ngIf=\"debug || jsf?.formOptions?.debug\">\r\n  Debug output:\r\n  <pre>{{debugOutput}}</pre>\r\n</div>", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: RootComponent, selector: "root-widget", inputs: ["dataIndex", "layoutIndex", "layout", "isOrderable", "isFlexItem"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: JsonSchemaFormComponent, selector: "json-schema-form", inputs: { schema: "schema", layout: "layout", data: "data", options: "options", framework: "framework", widgets: "widgets", form: "form", model: "model", JSONSchema: "JSONSchema", UISchema: "UISchema", formData: "formData", ngModel: "ngModel", language: "language", loadExternalAssets: "loadExternalAssets", debug: "debug", theme: "theme", ajvOptions: "ajvOptions", value: "value" }, outputs: { onChanges: "onChanges", onSubmit: "onSubmit", isValid: "isValid", validationErrors: "validationErrors", formSchema: "formSchema", formLayout: "formLayout", dataChange: "dataChange", modelChange: "modelChange", formDataChange: "formDataChange", ngModelChange: "ngModelChange" }, providers: [JsonSchemaFormService, JSON_SCHEMA_FORM_VALUE_ACCESSOR], usesOnChanges: true, ngImport: i0, template: "<form [autocomplete]=\"jsf?.formOptions?.autocomplete ? 'on' : 'off'\" class=\"json-schema-form\" (ngSubmit)=\"submitForm()\">\r\n  <root-widget [layout]=\"jsf?.layout\"></root-widget>\r\n</form>\r\n<div *ngIf=\"debug || jsf?.formOptions?.debug\">\r\n  Debug output:\r\n  <pre>{{debugOutput}}</pre>\r\n</div>", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: RootComponent, selector: "root-widget", inputs: ["dataIndex", "layoutIndex", "layout", "isOrderable", "isFlexItem", "memoizationEnabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: JsonSchemaFormComponent, decorators: [{
             type: Component,
@@ -11614,5 +11783,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.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, 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, 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