@ng-formworks/core 16.5.6 → 16.5.8

package/fesm2022/ng-formworks-core.mjs

@@ -1,23 +1,38 @@
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i3 from '@angular/forms';
-import { UntypedFormControl, UntypedFormArray, UntypedFormGroup, NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i0 from '@angular/core';
-import { Injectable, Component, ChangeDetectionStrategy, Input, Directive, ViewContainerRef, ViewChild, Inject, forwardRef, EventEmitter, Output, NgModule } from '@angular/core';
-import cloneDeep from 'lodash/cloneDeep';
-import isEqual$1 from 'lodash/isEqual';
-import { from, Observable, forkJoin, Subject, lastValueFrom } from 'rxjs';
-import { map, takeUntil } from 'rxjs/operators';
+import { Injectable, ViewContainerRef, Component, Input, ViewChild, Directive, ChangeDetectionStrategy, NgModule, Inject, forwardRef, EventEmitter, Output } from '@angular/core';
+import * as i3 from '@angular/forms';
+import { UntypedFormControl, UntypedFormArray, UntypedFormGroup, FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import Ajv2019 from 'ajv/dist/2019';
 import jsonDraft6 from 'ajv/lib/refs/json-schema-draft-06.json';
 import jsonDraft7 from 'ajv/lib/refs/json-schema-draft-07.json';
+import cloneDeep from 'lodash/cloneDeep';
+import { from, Observable, forkJoin, Subject, BehaviorSubject, lastValueFrom } from 'rxjs';
+import isEqual$1 from 'lodash/isEqual';
+import { map, takeUntil } from 'rxjs/operators';
 import filter from 'lodash/filter';
 import map$1 from 'lodash/map';
 import _isArray from 'lodash/isArray';
 import _isPlainObject from 'lodash/isPlainObject';
 import uniqueId from 'lodash/uniqueId';
+import * as i3$1 from 'nxt-sortablejs';
+import { SortablejsModule } from 'nxt-sortablejs';
 import * as i1 from '@angular/common/http';
 
+class Framework {
+    constructor() {
+        this.widgets = {};
+        this.stylesheets = [];
+        this.scripts = [];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: Framework, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: Framework }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: Framework, decorators: [{
+            type: Injectable
+        }] });
+
 const deValidationMessages = {
     required: 'Darf nicht leer sein',
     minLength: 'Mindestens {{minimumLength}} Zeichen benötigt (aktuell: {{currentLength}})',
@@ -6357,6 +6372,12 @@ function buildTitleMap(titleMap, enumList, fieldRequired = true, flatList = true
 // causes a library to be imported before another library it depends on.
 
 class JsonSchemaFormService {
+    setDraggableState(value) {
+        this.draggableStateSubject.next(value); // Update the draggable value
+    }
+    setSortableOptions(value) {
+        this.sortableOptionsSubject.next(value); // Update the sortable options value
+    }
     constructor() {
         this.JsonFormCompatibility = false;
         this.ReactJsonSchemaFormCompatibility = false;
@@ -6441,6 +6462,18 @@ class JsonSchemaFormService {
                 validationMessages: {} // set by setLanguage()
             }
         };
+        //this has been added to enable or disable the dragabble state of a component
+        //using the OrderableDirective, mainly when an <input type="range"> 
+        //elements are present, as the draggable attribute makes it difficult to
+        //slide the range sliders and end up dragging
+        //NB this will be set globally for all OrderableDirective instances
+        //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.setLanguage(this.language);
         this.ajv.addMetaSchema(jsonDraft6);
         this.ajv.addMetaSchema(jsonDraft7);
@@ -6976,7 +7009,7 @@ class JsonSchemaFormService {
         JsonPointer.insert(this.layout, this.getLayoutPointer(ctx), newLayoutNode);
         return true;
     }
-    moveArrayItem(ctx, oldIndex, newIndex) {
+    moveArrayItem(ctx, oldIndex, newIndex, moveLayout = true) {
         if (!ctx.layoutNode ||
             !isDefined(ctx.layoutNode.dataPointer) ||
             !hasValue(ctx.dataIndex) ||
@@ -6993,8 +7026,10 @@ class JsonSchemaFormService {
         formArray.insert(newIndex, arrayItem);
         formArray.updateValueAndValidity();
         // Move layout item
-        const layoutArray = this.getLayoutArray(ctx);
-        layoutArray.splice(newIndex, 0, layoutArray.splice(oldIndex, 1)[0]);
+        if (moveLayout) {
+            const layoutArray = this.getLayoutArray(ctx);
+            layoutArray.splice(newIndex, 0, layoutArray.splice(oldIndex, 1)[0]);
+        }
         return true;
     }
     removeItem(ctx) {
@@ -7024,6 +7059,110 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             type: Injectable
         }], ctorParameters: function () { return []; } });
 
+class SelectWidgetComponent {
+    constructor(jsf) {
+        this.jsf = jsf;
+        this.newComponent = null;
+    }
+    ngOnInit() {
+        this.updateComponent();
+    }
+    ngOnChanges() {
+        this.updateComponent();
+    }
+    updateComponent() {
+        const widgetContainer = this.widgetContainer;
+        if (widgetContainer && !this.newComponent && (this.layoutNode || {}).widget) {
+            this.newComponent = widgetContainer.createComponent((this.layoutNode.widget));
+        }
+        if (this.newComponent) {
+            for (const input of ['layoutNode', 'layoutIndex', 'dataIndex']) {
+                this.newComponent.instance[input] = this[input];
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectWidgetComponent, deps: [{ token: JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SelectWidgetComponent, selector: "select-widget-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, viewQueries: [{ propertyName: "widgetContainer", first: true, predicate: ["widgetContainer"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: `<div #widgetContainer></div>`, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectWidgetComponent, decorators: [{
+            type: Component,
+            args: [{
+                    // tslint:disable-next-line:component-selector
+                    selector: 'select-widget-widget',
+                    template: `<div #widgetContainer></div>`,
+                }]
+        }], ctorParameters: function () { return [{ type: JsonSchemaFormService }]; }, propDecorators: { layoutNode: [{
+                type: Input
+            }], layoutIndex: [{
+                type: Input
+            }], dataIndex: [{
+                type: Input
+            }], widgetContainer: [{
+                type: ViewChild,
+                args: ['widgetContainer', { read: ViewContainerRef, static: true }]
+            }] } });
+
+class NoFrameworkComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NoFrameworkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NoFrameworkComponent, selector: "no-framework", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: "<select-widget-widget [dataIndex]=\"dataIndex\" [layoutIndex]=\"layoutIndex\" [layoutNode]=\"layoutNode\">\r\n</select-widget-widget>", dependencies: [{ kind: "component", type: SelectWidgetComponent, selector: "select-widget-widget", inputs: ["layoutNode", "layoutIndex", "dataIndex"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NoFrameworkComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'no-framework', template: "<select-widget-widget [dataIndex]=\"dataIndex\" [layoutIndex]=\"layoutIndex\" [layoutNode]=\"layoutNode\">\r\n</select-widget-widget>" }]
+        }], propDecorators: { layoutNode: [{
+                type: Input
+            }], layoutIndex: [{
+                type: Input
+            }], dataIndex: [{
+                type: Input
+            }] } });
+
+// No framework - plain HTML controls (styles from form layout only)
+class NoFramework extends Framework {
+    constructor() {
+        super(...arguments);
+        this.name = 'no-framework';
+        this.text = 'None (plain HTML)';
+        this.framework = NoFrameworkComponent;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NoFramework, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NoFramework }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NoFramework, decorators: [{
+            type: Injectable
+        }] });
+
+class ElementAttributeDirective {
+    constructor(renderer, elementRef) {
+        this.renderer = renderer;
+        this.elementRef = elementRef;
+    }
+    ngOnChanges(changes) {
+        if (changes.attributes) {
+            for (let attributeName in this.attributes) {
+                const attributeValue = this.attributes[attributeName];
+                if (attributeValue) {
+                    this.renderer.setAttribute(this.elementRef.nativeElement, attributeName, attributeValue);
+                }
+                else {
+                    this.renderer.removeAttribute(this.elementRef.nativeElement, attributeName);
+                }
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ElementAttributeDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ElementAttributeDirective, selector: "[attributes]", inputs: { attributes: "attributes" }, usesOnChanges: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ElementAttributeDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[attributes]',
+                    standalone: false
+                }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { attributes: [{
+                type: Input
+            }] } });
+
 class AddReferenceComponent {
     constructor(jsf) {
         this.jsf = jsf;
@@ -7423,34 +7562,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }] } });
 
-class ElementAttributeDirective {
-    constructor(renderer, elementRef) {
-        this.renderer = renderer;
-        this.elementRef = elementRef;
+class HiddenComponent {
+    constructor(jsf) {
+        this.jsf = jsf;
+        this.controlDisabled = false;
+        this.boundControl = false;
     }
-    ngOnChanges(changes) {
-        if (changes.attributes) {
-            for (let attributeName in this.attributes) {
-                const attributeValue = this.attributes[attributeName];
-                if (attributeValue) {
-                    this.renderer.setAttribute(this.elementRef.nativeElement, attributeName, attributeValue);
-                }
-                else {
-                    this.renderer.removeAttribute(this.elementRef.nativeElement, attributeName);
-                }
-            }
-        }
+    ngOnInit() {
+        this.jsf.initializeControl(this);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ElementAttributeDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ElementAttributeDirective, selector: "[attributes]", inputs: { attributes: "attributes" }, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HiddenComponent, deps: [{ token: JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: HiddenComponent, selector: "hidden-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
+    <input *ngIf="boundControl"
+      [formControl]="formControl"
+      [id]="'control' + layoutNode?._id"
+      [name]="controlName"
+      type="hidden">
+    <input *ngIf="!boundControl"
+      [disabled]="controlDisabled"
+      [name]="controlName"
+      [id]="'control' + layoutNode?._id"
+      type="hidden"
+      [value]="controlValue">`, 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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ElementAttributeDirective, decorators: [{
-            type: Directive,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HiddenComponent, decorators: [{
+            type: Component,
             args: [{
-                    selector: '[attributes]',
-                    standalone: false
+                    // tslint:disable-next-line:component-selector
+                    selector: 'hidden-widget',
+                    template: `
+    <input *ngIf="boundControl"
+      [formControl]="formControl"
+      [id]="'control' + layoutNode?._id"
+      [name]="controlName"
+      type="hidden">
+    <input *ngIf="!boundControl"
+      [disabled]="controlDisabled"
+      [name]="controlName"
+      [id]="'control' + layoutNode?._id"
+      type="hidden"
+      [value]="controlValue">`,
                 }]
-        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { attributes: [{
+        }], ctorParameters: function () { return [{ type: JsonSchemaFormService }]; }, propDecorators: { layoutNode: [{
+                type: Input
+            }], layoutIndex: [{
+                type: Input
+            }], dataIndex: [{
                 type: Input
             }] } });
 
@@ -7474,7 +7631,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 || ''">
+    <div [class]="options?.htmlClass || ''" class="sortable-filter" >
       <label *ngIf="options?.title"
         [attr.for]="'control' + layoutNode?._id"
         [class]="options?.labelHtmlClass || ''"
@@ -7526,7 +7683,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 || ''">
+    <div [class]="options?.htmlClass || ''" class="sortable-filter" >
       <label *ngIf="options?.title"
         [attr.for]="'control' + layoutNode?._id"
         [class]="options?.labelHtmlClass || ''"
@@ -7633,6 +7790,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }] } });
 
+//TODO look at reusing InputComponent
 class NumberComponent {
     constructor(jsf) {
         this.jsf = jsf;
@@ -7643,6 +7801,10 @@ class NumberComponent {
         this.allowExponents = false;
         this.lastValidNumber = '';
     }
+    //needed as templates don't accept something like [attributes]="options?.['x-inputAttributes']"
+    get inputAttributes() {
+        return this.options?.['x-inputAttributes'];
+    }
     ngOnInit() {
         this.options = this.layoutNode.options || {};
         this.jsf.initializeControl(this);
@@ -7655,13 +7817,13 @@ 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 [class]="options?.htmlClass || ''">
+    <div #divElt [class]="options?.htmlClass || ''" class="sortable-filter" >
       <label *ngIf="options?.title"
         [attr.for]="'control' + layoutNode?._id"
         [class]="options?.labelHtmlClass || ''"
         [style.display]="options?.notitle ? 'none' : ''"
         [innerHTML]="options?.title"></label>
-      <input *ngIf="boundControl"
+      <input #inputControl *ngIf="boundControl"
         [formControl]="formControl"
         [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
         [attr.max]="options?.maximum"
@@ -7675,8 +7837,11 @@ class NumberComponent {
         [name]="controlName"
         [readonly]="options?.readonly ? 'readonly' : null"
         [title]="lastValidNumber"
-        [type]="layoutNode?.type === 'range' ? 'range' : 'number'">
-      <input *ngIf="!boundControl"
+        [type]="layoutNode?.type === 'range' ? 'range' : 'number'"
+        [attributes]="inputAttributes"
+
+        >
+      <input #inputControl *ngIf="!boundControl"
         [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
         [attr.max]="options?.maximum"
         [attr.min]="options?.minimum"
@@ -7692,9 +7857,11 @@ class NumberComponent {
         [title]="lastValidNumber"
         [type]="layoutNode?.type === 'range' ? 'range' : 'number'"
         [value]="controlValue"
-        (input)="updateValue($event)">
+        (input)="updateValue($event)"
+        [attributes]="inputAttributes"
+        >
       <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"] }] }); }
+    </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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NumberComponent, decorators: [{
             type: Component,
@@ -7702,13 +7869,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     // tslint:disable-next-line:component-selector
                     selector: 'number-widget',
                     template: `
-    <div [class]="options?.htmlClass || ''">
+    <div #divElt [class]="options?.htmlClass || ''" class="sortable-filter" >
       <label *ngIf="options?.title"
         [attr.for]="'control' + layoutNode?._id"
         [class]="options?.labelHtmlClass || ''"
         [style.display]="options?.notitle ? 'none' : ''"
         [innerHTML]="options?.title"></label>
-      <input *ngIf="boundControl"
+      <input #inputControl *ngIf="boundControl"
         [formControl]="formControl"
         [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
         [attr.max]="options?.maximum"
@@ -7722,8 +7889,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         [name]="controlName"
         [readonly]="options?.readonly ? 'readonly' : null"
         [title]="lastValidNumber"
-        [type]="layoutNode?.type === 'range' ? 'range' : 'number'">
-      <input *ngIf="!boundControl"
+        [type]="layoutNode?.type === 'range' ? 'range' : 'number'"
+        [attributes]="inputAttributes"
+
+        >
+      <input #inputControl *ngIf="!boundControl"
         [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
         [attr.max]="options?.maximum"
         [attr.min]="options?.minimum"
@@ -7739,7 +7909,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         [title]="lastValidNumber"
         [type]="layoutNode?.type === 'range' ? 'range' : 'number'"
         [value]="controlValue"
-        (input)="updateValue($event)">
+        (input)="updateValue($event)"
+        [attributes]="inputAttributes"
+        >
       <span *ngIf="layoutNode?.type === 'range'" [innerHTML]="controlValue"></span>
     </div>`,
                 }]
@@ -8078,6 +8250,15 @@ class OrderableDirective {
                     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 }); }
@@ -8103,10 +8284,40 @@ 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);
+            }
+        };
+    }
+    sortableInit(sortable) {
+        this.sortableObj = sortable;
     }
     isDraggable(node) {
-        return node.arrayItem && node.type !== '$ref' &&
+        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);
+        }
+        return result;
     }
     // Set attributes for flexbox child
     // (container attributes are set in section.component)
@@ -8118,48 +8329,86 @@ class RootComponent {
     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);
+            }
+        });
+    }
+    ngOnDestroy() {
+        if (this.sortableOptionsSubscription) {
+            this.sortableOptionsSubscription.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 *ngFor="let layoutItem of layout; let i = index"
-      [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">
-      <div
-        [dataIndex]="layoutItem?.arrayItem ? (dataIndex || []).concat(i) : (dataIndex || [])"
-        [layoutIndex]="(layoutIndex || []).concat(i)"
-        [layoutNode]="layoutItem"
-        [orderable]="isDraggable(layoutItem)">
-        <select-framework-widget *ngIf="showWidget(layoutItem)"
+    <div [class.flex-inherit]="true" #sortableContainter [nxtSortablejs]="layout" [config]="sortableConfig" (init)="sortableInit($event)">
+      <div *ngFor="let layoutItem of layout; let i = index"
+        [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)"
+        >
+        <!--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"></select-framework-widget>
+          [layoutNode]="layoutItem"
+          [orderable]="false"
+          [class.sortable-filter]="!isDraggable(layoutItem)"
+          >
+          <select-framework-widget *ngIf="showWidget(layoutItem)"
+            [dataIndex]="layoutItem?.arrayItem ? (dataIndex || []).concat(i) : (dataIndex || [])"
+            [layoutIndex]="(layoutIndex || []).concat(i)"
+            [layoutNode]="layoutItem"></select-framework-widget>
+        </div>
       </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}\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: "component", type: SelectFrameworkComponent, selector: "select-framework-widget", inputs: ["layoutNode", "layoutIndex", "dataIndex"] }, { kind: "directive", type: OrderableDirective, selector: "[orderable]", inputs: ["orderable", "layoutNode", "layoutIndex", "dataIndex"] }] }); }
+    </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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RootComponent, decorators: [{
             type: Component,
             args: [{ selector: 'root-widget', template: `
-    <div *ngFor="let layoutItem of layout; let i = index"
-      [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">
-      <div
-        [dataIndex]="layoutItem?.arrayItem ? (dataIndex || []).concat(i) : (dataIndex || [])"
-        [layoutIndex]="(layoutIndex || []).concat(i)"
-        [layoutNode]="layoutItem"
-        [orderable]="isDraggable(layoutItem)">
-        <select-framework-widget *ngIf="showWidget(layoutItem)"
+    <div [class.flex-inherit]="true" #sortableContainter [nxtSortablejs]="layout" [config]="sortableConfig" (init)="sortableInit($event)">
+      <div *ngFor="let layoutItem of layout; let i = index"
+        [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)"
+        >
+        <!--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"></select-framework-widget>
+          [layoutNode]="layoutItem"
+          [orderable]="false"
+          [class.sortable-filter]="!isDraggable(layoutItem)"
+          >
+          <select-framework-widget *ngIf="showWidget(layoutItem)"
+            [dataIndex]="layoutItem?.arrayItem ? (dataIndex || []).concat(i) : (dataIndex || [])"
+            [layoutIndex]="(layoutIndex || []).concat(i)"
+            [layoutNode]="layoutItem"></select-framework-widget>
+        </div>
       </div>
-    </div>`, 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}\n"] }]
+    </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"] }]
         }], ctorParameters: function () { return [{ type: JsonSchemaFormService }]; }, propDecorators: { dataIndex: [{
                 type: Input
             }], layoutIndex: [{
@@ -8241,7 +8490,7 @@ class SectionComponent {
         [class]="options?.labelHtmlClass || ''"
         [innerHTML]="sectionTitle"
         (click)="toggleExpanded()"></label>
-      <root-widget *ngIf="expanded"
+      <root-widget 
         [dataIndex]="dataIndex"
         [layout]="layoutNode.items"
         [layoutIndex]="layoutIndex"
@@ -8251,7 +8500,7 @@ class SectionComponent {
         [class.form-flex-row]="getFlexAttribute('flex-direction') === 'row'"
         [style.align-content]="getFlexAttribute('align-content')"
         [style.align-items]="getFlexAttribute('align-items')"
-        [style.display]="getFlexAttribute('display')"
+        [style.display]="!expanded?'none':getFlexAttribute('display')"
         [style.flex-direction]="getFlexAttribute('flex-direction')"
         [style.flex-wrap]="getFlexAttribute('flex-wrap')"
         [style.justify-content]="getFlexAttribute('justify-content')"></root-widget>
@@ -8272,7 +8521,7 @@ class SectionComponent {
         [class]="options?.labelHelpBlockClass || ''"
         [innerHTML]="options?.description"></p>
       </div>
-      <root-widget *ngIf="expanded"
+      <root-widget 
         [dataIndex]="dataIndex"
         [layout]="layoutNode.items"
         [layoutIndex]="layoutIndex"
@@ -8282,7 +8531,7 @@ class SectionComponent {
         [class.form-flex-row]="getFlexAttribute('flex-direction') === 'row'"
         [style.align-content]="getFlexAttribute('align-content')"
         [style.align-items]="getFlexAttribute('align-items')"
-        [style.display]="getFlexAttribute('display')"
+        [style.display]="!expanded?'none':getFlexAttribute('display')"
         [style.flex-direction]="getFlexAttribute('flex-direction')"
         [style.flex-wrap]="getFlexAttribute('flex-wrap')"
         [style.justify-content]="getFlexAttribute('justify-content')"></root-widget>
@@ -8306,7 +8555,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         [class]="options?.labelHtmlClass || ''"
         [innerHTML]="sectionTitle"
         (click)="toggleExpanded()"></label>
-      <root-widget *ngIf="expanded"
+      <root-widget 
         [dataIndex]="dataIndex"
         [layout]="layoutNode.items"
         [layoutIndex]="layoutIndex"
@@ -8316,7 +8565,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         [class.form-flex-row]="getFlexAttribute('flex-direction') === 'row'"
         [style.align-content]="getFlexAttribute('align-content')"
         [style.align-items]="getFlexAttribute('align-items')"
-        [style.display]="getFlexAttribute('display')"
+        [style.display]="!expanded?'none':getFlexAttribute('display')"
         [style.flex-direction]="getFlexAttribute('flex-direction')"
         [style.flex-wrap]="getFlexAttribute('flex-wrap')"
         [style.justify-content]="getFlexAttribute('justify-content')"></root-widget>
@@ -8337,7 +8586,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         [class]="options?.labelHelpBlockClass || ''"
         [innerHTML]="options?.description"></p>
       </div>
-      <root-widget *ngIf="expanded"
+      <root-widget 
         [dataIndex]="dataIndex"
         [layout]="layoutNode.items"
         [layoutIndex]="layoutIndex"
@@ -8347,7 +8596,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         [class.form-flex-row]="getFlexAttribute('flex-direction') === 'row'"
         [style.align-content]="getFlexAttribute('align-content')"
         [style.align-items]="getFlexAttribute('align-items')"
-        [style.display]="getFlexAttribute('display')"
+        [style.display]="!expanded?'none':getFlexAttribute('display')"
         [style.flex-direction]="getFlexAttribute('flex-direction')"
         [style.flex-wrap]="getFlexAttribute('flex-wrap')"
         [style.justify-content]="getFlexAttribute('justify-content')"></root-widget>
@@ -8510,58 +8759,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }] } });
 
-class SelectWidgetComponent {
+class SubmitComponent {
     constructor(jsf) {
         this.jsf = jsf;
-        this.newComponent = null;
-    }
-    ngOnInit() {
-        this.updateComponent();
+        this.controlDisabled = false;
+        this.boundControl = false;
     }
-    ngOnChanges() {
-        this.updateComponent();
-    }
-    updateComponent() {
-        const widgetContainer = this.widgetContainer;
-        if (widgetContainer && !this.newComponent && (this.layoutNode || {}).widget) {
-            this.newComponent = widgetContainer.createComponent((this.layoutNode.widget));
-        }
-        if (this.newComponent) {
-            for (const input of ['layoutNode', 'layoutIndex', 'dataIndex']) {
-                this.newComponent.instance[input] = this[input];
-            }
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectWidgetComponent, deps: [{ token: JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SelectWidgetComponent, selector: "select-widget-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, viewQueries: [{ propertyName: "widgetContainer", first: true, predicate: ["widgetContainer"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: `<div #widgetContainer></div>`, isInline: true }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectWidgetComponent, decorators: [{
-            type: Component,
-            args: [{
-                    // tslint:disable-next-line:component-selector
-                    selector: 'select-widget-widget',
-                    template: `<div #widgetContainer></div>`,
-                }]
-        }], ctorParameters: function () { return [{ type: JsonSchemaFormService }]; }, propDecorators: { layoutNode: [{
-                type: Input
-            }], layoutIndex: [{
-                type: Input
-            }], dataIndex: [{
-                type: Input
-            }], widgetContainer: [{
-                type: ViewChild,
-                args: ['widgetContainer', { read: ViewContainerRef, static: true }]
-            }] } });
-
-class SubmitComponent {
-    constructor(jsf) {
-        this.jsf = jsf;
-        this.controlDisabled = false;
-        this.boundControl = false;
-    }
-    ngOnDestroy() {
-        this.isValidChangesSubs?.unsubscribe();
-        this.isValidChangesSubs = null;
+    ngOnDestroy() {
+        this.isValidChangesSubs?.unsubscribe();
+        this.isValidChangesSubs = null;
     }
     ngOnInit() {
         this.options = this.layoutNode.options || {};
@@ -8631,6 +8837,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }] } });
 
+class TabComponent {
+    constructor(jsf) {
+        this.jsf = jsf;
+    }
+    ngOnInit() {
+        this.options = this.layoutNode.options || {};
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabComponent, deps: [{ token: JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TabComponent, selector: "tab-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
+    <div [class]="options?.htmlClass || ''">
+      <root-widget
+        [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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabComponent, decorators: [{
+            type: Component,
+            args: [{
+                    // tslint:disable-next-line:component-selector
+                    selector: 'tab-widget',
+                    template: `
+    <div [class]="options?.htmlClass || ''">
+      <root-widget
+        [dataIndex]="dataIndex"
+        [layoutIndex]="layoutIndex"
+        [layout]="layoutNode.items"></root-widget>
+    </div>`,
+                }]
+        }], ctorParameters: function () { return [{ type: JsonSchemaFormService }]; }, propDecorators: { layoutNode: [{
+                type: Input
+            }], layoutIndex: [{
+                type: Input
+            }], dataIndex: [{
+                type: Input
+            }] } });
+
 class TabsComponent {
     constructor(jsf) {
         this.jsf = jsf;
@@ -9080,17 +9323,59 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }], ctorParameters: function () { return []; } });
 
-class Framework {
-    constructor() {
-        this.widgets = {};
-        this.stylesheets = [];
-        this.scripts = [];
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: Framework, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: Framework }); }
+const BASIC_WIDGETS = [
+    AddReferenceComponent, OneOfComponent, ButtonComponent, CheckboxComponent,
+    CheckboxesComponent, FileComponent, HiddenComponent, InputComponent,
+    MessageComponent, NoneComponent, NumberComponent, RadiosComponent,
+    RootComponent, SectionComponent, SelectComponent, SelectFrameworkComponent,
+    SelectWidgetComponent, SubmitComponent, TabComponent, TabsComponent,
+    TemplateComponent, TextareaComponent
+];
+
+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, 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, 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 //needed for input range elements slider do still work
+            })] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: Framework, decorators: [{
-            type: Injectable
+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 //needed for input range elements slider do still work
+                        })],
+                    declarations: [...BASIC_WIDGETS, OrderableDirective, ElementAttributeDirective],
+                    exports: [...BASIC_WIDGETS, OrderableDirective, ElementAttributeDirective]
+                }]
+        }] });
+
+// No framework - plain HTML controls (styles from form layout only)
+class NoFrameworkModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NoFrameworkModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: NoFrameworkModule, declarations: [NoFrameworkComponent], imports: [CommonModule, WidgetLibraryModule], exports: [NoFrameworkComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NoFrameworkModule, providers: [
+            { provide: Framework, useClass: NoFramework, multi: true }
+        ], imports: [CommonModule, WidgetLibraryModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NoFrameworkModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, WidgetLibraryModule],
+                    declarations: [NoFrameworkComponent],
+                    exports: [NoFrameworkComponent],
+                    providers: [
+                        { provide: Framework, useClass: NoFramework, multi: true }
+                    ]
+                }]
         }] });
 
 // Possible future frameworks:
@@ -10006,165 +10291,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Output
             }] } });
 
-class NoFrameworkComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NoFrameworkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NoFrameworkComponent, selector: "no-framework", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: "<select-widget-widget [dataIndex]=\"dataIndex\" [layoutIndex]=\"layoutIndex\" [layoutNode]=\"layoutNode\">\r\n</select-widget-widget>", dependencies: [{ kind: "component", type: SelectWidgetComponent, selector: "select-widget-widget", inputs: ["layoutNode", "layoutIndex", "dataIndex"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NoFrameworkComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'no-framework', template: "<select-widget-widget [dataIndex]=\"dataIndex\" [layoutIndex]=\"layoutIndex\" [layoutNode]=\"layoutNode\">\r\n</select-widget-widget>" }]
-        }], propDecorators: { layoutNode: [{
-                type: Input
-            }], layoutIndex: [{
-                type: Input
-            }], dataIndex: [{
-                type: Input
-            }] } });
-
-// No framework - plain HTML controls (styles from form layout only)
-class NoFramework extends Framework {
-    constructor() {
-        super(...arguments);
-        this.name = 'no-framework';
-        this.text = 'None (plain HTML)';
-        this.framework = NoFrameworkComponent;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NoFramework, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NoFramework }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NoFramework, decorators: [{
-            type: Injectable
-        }] });
-
-class HiddenComponent {
-    constructor(jsf) {
-        this.jsf = jsf;
-        this.controlDisabled = false;
-        this.boundControl = false;
-    }
-    ngOnInit() {
-        this.jsf.initializeControl(this);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HiddenComponent, deps: [{ token: JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: HiddenComponent, selector: "hidden-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
-    <input *ngIf="boundControl"
-      [formControl]="formControl"
-      [id]="'control' + layoutNode?._id"
-      [name]="controlName"
-      type="hidden">
-    <input *ngIf="!boundControl"
-      [disabled]="controlDisabled"
-      [name]="controlName"
-      [id]="'control' + layoutNode?._id"
-      type="hidden"
-      [value]="controlValue">`, 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"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HiddenComponent, decorators: [{
-            type: Component,
-            args: [{
-                    // tslint:disable-next-line:component-selector
-                    selector: 'hidden-widget',
-                    template: `
-    <input *ngIf="boundControl"
-      [formControl]="formControl"
-      [id]="'control' + layoutNode?._id"
-      [name]="controlName"
-      type="hidden">
-    <input *ngIf="!boundControl"
-      [disabled]="controlDisabled"
-      [name]="controlName"
-      [id]="'control' + layoutNode?._id"
-      type="hidden"
-      [value]="controlValue">`,
-                }]
-        }], ctorParameters: function () { return [{ type: JsonSchemaFormService }]; }, propDecorators: { layoutNode: [{
-                type: Input
-            }], layoutIndex: [{
-                type: Input
-            }], dataIndex: [{
-                type: Input
-            }] } });
-
-class TabComponent {
-    constructor(jsf) {
-        this.jsf = jsf;
-    }
-    ngOnInit() {
-        this.options = this.layoutNode.options || {};
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabComponent, deps: [{ token: JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TabComponent, selector: "tab-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
-    <div [class]="options?.htmlClass || ''">
-      <root-widget
-        [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"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabComponent, decorators: [{
-            type: Component,
-            args: [{
-                    // tslint:disable-next-line:component-selector
-                    selector: 'tab-widget',
-                    template: `
-    <div [class]="options?.htmlClass || ''">
-      <root-widget
-        [dataIndex]="dataIndex"
-        [layoutIndex]="layoutIndex"
-        [layout]="layoutNode.items"></root-widget>
-    </div>`,
-                }]
-        }], ctorParameters: function () { return [{ type: JsonSchemaFormService }]; }, propDecorators: { layoutNode: [{
-                type: Input
-            }], layoutIndex: [{
-                type: Input
-            }], dataIndex: [{
-                type: Input
-            }] } });
-
-const BASIC_WIDGETS = [
-    AddReferenceComponent, OneOfComponent, ButtonComponent, CheckboxComponent,
-    CheckboxesComponent, FileComponent, HiddenComponent, InputComponent,
-    MessageComponent, NoneComponent, NumberComponent, RadiosComponent,
-    RootComponent, SectionComponent, SelectComponent, SelectFrameworkComponent,
-    SelectWidgetComponent, SubmitComponent, TabComponent, TabsComponent,
-    TemplateComponent, TextareaComponent
-];
-
-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, OrderableDirective, ElementAttributeDirective], imports: [CommonModule, FormsModule, ReactiveFormsModule], exports: [AddReferenceComponent, OneOfComponent, ButtonComponent, CheckboxComponent, CheckboxesComponent, FileComponent, HiddenComponent, InputComponent, MessageComponent, NoneComponent, NumberComponent, RadiosComponent, RootComponent, SectionComponent, SelectComponent, SelectFrameworkComponent, SelectWidgetComponent, SubmitComponent, TabComponent, TabsComponent, TemplateComponent, TextareaComponent, OrderableDirective, ElementAttributeDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: WidgetLibraryModule, imports: [CommonModule, FormsModule, ReactiveFormsModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: WidgetLibraryModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule, FormsModule, ReactiveFormsModule],
-                    declarations: [...BASIC_WIDGETS, OrderableDirective, ElementAttributeDirective],
-                    exports: [...BASIC_WIDGETS, OrderableDirective, ElementAttributeDirective]
-                }]
-        }] });
-
-// No framework - plain HTML controls (styles from form layout only)
-class NoFrameworkModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NoFrameworkModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: NoFrameworkModule, declarations: [NoFrameworkComponent], imports: [CommonModule, WidgetLibraryModule], exports: [NoFrameworkComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NoFrameworkModule, providers: [
-            { provide: Framework, useClass: NoFramework, multi: true }
-        ], imports: [CommonModule, WidgetLibraryModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NoFrameworkModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule, WidgetLibraryModule],
-                    declarations: [NoFrameworkComponent],
-                    exports: [NoFrameworkComponent],
-                    providers: [
-                        { provide: Framework, useClass: NoFramework, multi: true }
-                    ]
-                }]
-        }] });
-
 class JsonSchemaFormModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: JsonSchemaFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: JsonSchemaFormModule, declarations: [JsonSchemaFormComponent], imports: [CommonModule, FormsModule, ReactiveFormsModule,