@ng-formworks/core 19.5.3 → 19.5.7

package/fesm2022/ng-formworks-core.mjs

@@ -1,1401 +1,1416 @@
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i2 from '@angular/forms';
-import { UntypedFormControl, UntypedFormArray, UntypedFormGroup, NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i0 from '@angular/core';
-import { Injectable, inject, input, Component, ChangeDetectionStrategy, ComponentFactoryResolver, viewChild, ViewContainerRef, ElementRef, NgZone, Directive, signal, Inject, forwardRef, ChangeDetectorRef, output, Input, 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 { HttpClient } from '@angular/common/http';
+import { Injectable, inject, input, viewChild, ViewContainerRef, Component, Input, Directive, ChangeDetectionStrategy, ViewChild, ElementRef, NgZone, signal, NgModule, Inject, forwardRef, ChangeDetectorRef, output } from '@angular/core';
+import * as i2 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 i2$1 from 'nxt-sortablejs';
+import { SortablejsModule } from 'nxt-sortablejs';
+import { HttpClient } from '@angular/common/http';
 
-/**
- * '_executeValidators' utility function
- *
- * Validates a control against an array of validators, and returns
- * an array of the same length containing a combination of error messages
- * (from invalid validators) and null values (from valid validators)
- *
- * //  { AbstractControl } control - control to validate
- * //  { IValidatorFn[] } validators - array of validators
- * //  { boolean } invert - invert?
- * // { PlainObject[] } - array of nulls and error message
- */
-function _executeValidators(control, validators, invert = false) {
-    return validators.map(validator => validator(control, invert));
-}
-/**
- * '_executeAsyncValidators' utility function
- *
- * Validates a control against an array of async validators, and returns
- * an array of observabe results of the same length containing a combination of
- * error messages (from invalid validators) and null values (from valid ones)
- *
- * //  { AbstractControl } control - control to validate
- * //  { AsyncIValidatorFn[] } validators - array of async validators
- * //  { boolean } invert - invert?
- * //  - array of observable nulls and error message
- */
-function _executeAsyncValidators(control, validators, invert = false) {
-    return validators.map(validator => validator(control, invert));
-}
-/**
- * '_mergeObjects' utility function
- *
- * Recursively Merges one or more objects into a single object with combined keys.
- * Automatically detects and ignores null and undefined inputs.
- * Also detects duplicated boolean 'not' keys and XORs their values.
- *
- * //  { PlainObject[] } objects - one or more objects to merge
- * // { PlainObject } - merged object
- */
-function _mergeObjects(...objects) {
-    const mergedObject = {};
-    for (const currentObject of objects) {
-        if (isObject(currentObject)) {
-            for (const key of Object.keys(currentObject)) {
-                const currentValue = currentObject[key];
-                const mergedValue = mergedObject[key];
-                mergedObject[key] = !isDefined(mergedValue) ? currentValue :
-                    key === 'not' && isBoolean(mergedValue, 'strict') &&
-                        isBoolean(currentValue, 'strict') ? xor(mergedValue, currentValue) :
-                        getType(mergedValue) === 'object' && getType(currentValue) === 'object' ?
-                            _mergeObjects(mergedValue, currentValue) :
-                            currentValue;
-            }
-        }
-    }
-    return mergedObject;
-}
-/**
- * '_mergeErrors' utility function
- *
- * Merges an array of objects.
- * Used for combining the validator errors returned from 'executeValidators'
- *
- * //  { PlainObject[] } arrayOfErrors - array of objects
- * // { PlainObject } - merged object, or null if no usable input objectcs
- */
-function _mergeErrors(arrayOfErrors) {
-    const mergedErrors = _mergeObjects(...arrayOfErrors);
-    return isEmpty(mergedErrors) ? null : mergedErrors;
-}
-/**
- * 'isDefined' utility function
- *
- * Checks if a variable contains a value of any type.
- * Returns true even for otherwise 'falsey' values of 0, '', and false.
- *
- * //   value - the value to check
- * // { boolean } - false if undefined or null, otherwise true
- */
-function isDefined(value) {
-    return value !== undefined && value !== null;
-}
-/**
- * 'hasValue' utility function
- *
- * Checks if a variable contains a value.
- * Returs false for null, undefined, or a zero-length strng, '',
- * otherwise returns true.
- * (Stricter than 'isDefined' because it also returns false for '',
- * though it stil returns true for otherwise 'falsey' values 0 and false.)
- *
- * //   value - the value to check
- * // { boolean } - false if undefined, null, or '', otherwise true
- */
-function hasValue(value) {
-    return value !== undefined && value !== null && value !== '';
-}
-/**
- * 'isEmpty' utility function
- *
- * Similar to !hasValue, but also returns true for empty arrays and objects.
- *
- * //   value - the value to check
- * // { boolean } - false if undefined, null, or '', otherwise true
- */
-function isEmpty(value) {
-    if (isArray(value)) {
-        return !value.length;
-    }
-    if (isObject(value)) {
-        return !Object.keys(value).length;
-    }
-    return value === undefined || value === null || value === '';
-}
-/**
- * 'isString' utility function
- *
- * Checks if a value is a string.
- *
- * //   value - the value to check
- * // { boolean } - true if string, false if not
- */
-function isString(value) {
-    return typeof value === 'string';
-}
-/**
- * 'isNumber' utility function
- *
- * Checks if a value is a regular number, numeric string, or JavaScript Date.
- *
- * //   value - the value to check
- * //  { any = false } strict - if truthy, also checks JavaScript tyoe
- * // { boolean } - true if number, false if not
- */
-function isNumber(value, strict = false) {
-    if (strict && typeof value !== 'number') {
-        return false;
-    }
-    return !isNaN(value) && value !== value / 0;
-}
-/**
- * 'isInteger' utility function
- *
- * Checks if a value is an integer.
- *
- * //   value - the value to check
- * //  { any = false } strict - if truthy, also checks JavaScript tyoe
- * // {boolean } - true if number, false if not
- */
-function isInteger(value, strict = false) {
-    if (strict && typeof value !== 'number') {
-        return false;
-    }
-    return !isNaN(value) && value !== value / 0 && value % 1 === 0;
-}
-/**
- * 'isBoolean' utility function
- *
- * Checks if a value is a boolean.
- *
- * //   value - the value to check
- * //  { any = null } option - if 'strict', also checks JavaScript type
- *                              if TRUE or FALSE, checks only for that value
- * // { boolean } - true if boolean, false if not
- */
-function isBoolean(value, option = null) {
-    if (option === 'strict') {
-        return value === true || value === false;
-    }
-    if (option === true) {
-        return value === true || value === 1 || value === 'true' || value === '1';
-    }
-    if (option === false) {
-        return value === false || value === 0 || value === 'false' || value === '0';
+class Framework {
+    constructor() {
+        this.widgets = {};
+        this.stylesheets = [];
+        this.scripts = [];
     }
-    return value === true || value === 1 || value === 'true' || value === '1' ||
-        value === false || value === 0 || value === 'false' || value === '0';
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: Framework, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: Framework }); }
 }
-function isFunction(item) {
-    return typeof item === 'function';
-}
-function isObject(item) {
-    return item !== null && typeof item === 'object';
-}
-function isArray(item) {
-    return Array.isArray(item);
-}
-function isDate(item) {
-    return !!item && Object.prototype.toString.call(item) === '[object Date]';
-}
-function isMap(item) {
-    return !!item && Object.prototype.toString.call(item) === '[object Map]';
-}
-function isSet(item) {
-    return !!item && Object.prototype.toString.call(item) === '[object Set]';
-}
-function isSymbol(item) {
-    return typeof item === 'symbol';
-}
-/**
- * 'getType' function
- *
- * Detects the JSON Schema Type of a value.
- * By default, detects numbers and integers even if formatted as strings.
- * (So all integers are also numbers, and any number may also be a string.)
- * However, it only detects true boolean values (to detect boolean values
- * in non-boolean formats, use isBoolean() instead).
- *
- * If passed a second optional parameter of 'strict', it will only detect
- * numbers and integers if they are formatted as JavaScript numbers.
- *
- * Examples:
- * getType('10.5') = 'number'
- * getType(10.5) = 'number'
- * getType('10') = 'integer'
- * getType(10) = 'integer'
- * getType('true') = 'string'
- * getType(true) = 'boolean'
- * getType(null) = 'null'
- * getType({ }) = 'object'
- * getType([]) = 'array'
- *
- * getType('10.5', 'strict') = 'string'
- * getType(10.5, 'strict') = 'number'
- * getType('10', 'strict') = 'string'
- * getType(10, 'strict') = 'integer'
- * getType('true', 'strict') = 'string'
- * getType(true, 'strict') = 'boolean'
- *
- * //   value - value to check
- * //  { any = false } strict - if truthy, also checks JavaScript tyoe
- * // { SchemaType }
- */
-function getType(value, strict = false) {
-    if (!isDefined(value)) {
-        return 'null';
-    }
-    if (isArray(value)) {
-        return 'array';
-    }
-    if (isObject(value)) {
-        return 'object';
-    }
-    if (isBoolean(value, 'strict')) {
-        return 'boolean';
-    }
-    if (isInteger(value, strict)) {
-        return 'integer';
-    }
-    if (isNumber(value, strict)) {
-        return 'number';
-    }
-    if (isString(value) || (!strict && isDate(value))) {
-        return 'string';
-    }
-    return null;
-}
-/**
- * 'isType' function
- *
- * Checks wether an input (probably string) value contains data of
- * a specified JSON Schema type
- *
- * //  { PrimitiveValue } value - value to check
- * //  { SchemaPrimitiveType } type - type to check
- * // { boolean }
- */
-function isType(value, type) {
-    switch (type) {
-        case 'string':
-            return isString(value) || isDate(value);
-        case 'number':
-            return isNumber(value);
-        case 'integer':
-            return isInteger(value);
-        case 'boolean':
-            return isBoolean(value);
-        case 'null':
-            return !hasValue(value);
-        default:
-            console.error(`isType error: "${type}" is not a recognized type.`);
-            return null;
-    }
-}
-/**
- * 'isPrimitive' function
- *
- * Checks wether an input value is a JavaScript primitive type:
- * string, number, boolean, or null.
- *
- * //   value - value to check
- * // { boolean }
- */
-function isPrimitive(value) {
-    return (isString(value) || isNumber(value) ||
-        isBoolean(value, 'strict') || value === null);
-}
-/**
- *
- * @param date
- * @returns {string}
- * exmaple:
- * toDateString('2018-01-01') = '2018-01-01'
- * toDateString('2018-01-30T00:00:00.000Z') = '2018-01-30'
- */
-const toIsoString = (date) => {
-    const day = date.getDate();
-    const month = date.getMonth() + 1;
-    const year = date.getFullYear();
-    return `${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}`;
-};
-/**
- * 'toJavaScriptType' function
- *
- * Converts an input (probably string) value to a JavaScript primitive type -
- * 'string', 'number', 'boolean', or 'null' - before storing in a JSON object.
- *
- * Does not coerce values (other than null), and only converts the types
- * of values that would otherwise be valid.
- *
- * If the optional third parameter 'strictIntegers' is TRUE, and the
- * JSON Schema type 'integer' is specified, it also verifies the input value
- * is an integer and, if it is, returns it as a JaveScript number.
- * If 'strictIntegers' is FALSE (or not set) the type 'integer' is treated
- * exactly the same as 'number', and allows decimals.
- *
- * Valid Examples:
- * toJavaScriptType('10',   'number' ) = 10   // '10'   is a number
- * toJavaScriptType('10',   'integer') = 10   // '10'   is also an integer
- * toJavaScriptType( 10,    'integer') = 10   //  10    is still an integer
- * toJavaScriptType( 10,    'string' ) = '10' //  10    can be made into a string
- * toJavaScriptType('10.5', 'number' ) = 10.5 // '10.5' is a number
- *
- * Invalid Examples:
- * toJavaScriptType('10.5', 'integer') = null // '10.5' is not an integer
- * toJavaScriptType( 10.5,  'integer') = null //  10.5  is still not an integer
- *
- * //  { PrimitiveValue } value - value to convert
- * //  { SchemaPrimitiveType | SchemaPrimitiveType[] } types - types to convert to
- * //  { boolean = false } strictIntegers - if FALSE, treat integers as numbers
- * // { PrimitiveValue }
- */
-function toJavaScriptType(value, types, strictIntegers = true) {
-    if (!isDefined(value)) {
-        return null;
-    }
-    if (isString(types)) {
-        types = [types];
-    }
-    if (strictIntegers && inArray('integer', types)) {
-        if (isInteger(value, 'strict')) {
-            return value;
-        }
-        if (isInteger(value)) {
-            return parseInt(value, 10);
-        }
-    }
-    if (inArray('number', types) || (!strictIntegers && inArray('integer', types))) {
-        if (isNumber(value, 'strict')) {
-            return value;
-        }
-        if (isNumber(value)) {
-            return parseFloat(value);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: Framework, decorators: [{
+            type: Injectable
+        }] });
+
+const deValidationMessages = {
+    required: 'Darf nicht leer sein',
+    minLength: 'Mindestens {{minimumLength}} Zeichen benötigt (aktuell: {{currentLength}})',
+    maxLength: 'Maximal {{maximumLength}} Zeichen erlaubt (aktuell: {{currentLength}})',
+    pattern: 'Entspricht nicht diesem regulären Ausdruck: {{requiredPattern}}',
+    format: function (error) {
+        switch (error.requiredFormat) {
+            case 'date':
+                return 'Muss ein Datum sein, z. B. "2000-12-31"';
+            case 'time':
+                return 'Muss eine Zeitangabe sein, z. B. "16:20" oder "03:14:15.9265"';
+            case 'date-time':
+                return 'Muss Datum mit Zeit beinhalten, z. B. "2000-03-14T01:59" oder "2000-03-14T01:59:26.535Z"';
+            case 'email':
+                return 'Keine gültige E-Mail-Adresse (z. B. "name@example.com")';
+            case 'hostname':
+                return 'Kein gültiger Hostname (z. B. "example.com")';
+            case 'ipv4':
+                return 'Keine gültige IPv4-Adresse (z. B. "127.0.0.1")';
+            case 'ipv6':
+                return 'Keine gültige IPv6-Adresse (z. B. "1234:5678:9ABC:DEF0:1234:5678:9ABC:DEF0")';
+            // TODO: add examples for 'uri', 'uri-reference', and 'uri-template'
+            // case 'uri': case 'uri-reference': case 'uri-template':
+            case 'url':
+                return 'Keine gültige URL (z. B. "http://www.example.com/page.html")';
+            case 'uuid':
+                return 'Keine gültige UUID (z. B. "12345678-9ABC-DEF0-1234-56789ABCDEF0")';
+            case 'color':
+                return 'Kein gültiger Farbwert (z. B. "#FFFFFF" oder "rgb(255, 255, 255)")';
+            case 'json-pointer':
+                return 'Kein gültiger JSON-Pointer (z. B. "/pointer/to/something")';
+            case 'relative-json-pointer':
+                return 'Kein gültiger relativer JSON-Pointer (z. B. "2/pointer/to/something")';
+            case 'regex':
+                return 'Kein gültiger regulärer Ausdruck (z. B. "(1-)?\\d{3}-\\d{3}-\\d{4}")';
+            default:
+                return 'Muss diesem Format entsprechen: ' + error.requiredFormat;
         }
-    }
-    if (inArray('string', types)) {
-        if (isString(value)) {
-            return value;
+    },
+    minimum: 'Muss mindestens {{minimumValue}} sein',
+    exclusiveMinimum: 'Muss größer als {{exclusiveMinimumValue}} sein',
+    maximum: 'Darf maximal {{maximumValue}} sein',
+    exclusiveMaximum: 'Muss kleiner als {{exclusiveMaximumValue}} sein',
+    multipleOf: function (error) {
+        if ((1 / error.multipleOfValue) % 10 === 0) {
+            const decimals = Math.log10(1 / error.multipleOfValue);
+            return `Maximal ${decimals} Dezimalstellen erlaubt`;
         }
-        // If value is a date, and types includes 'string',
-        // convert the date to a string
-        if (isDate(value)) {
-            return toIsoString(value);
+        else {
+            return `Muss ein Vielfaches von ${error.multipleOfValue} sein`;
         }
-        if (isNumber(value)) {
-            return value.toString();
+    },
+    minProperties: 'Mindestens {{minimumProperties}} Attribute erforderlich (aktuell: {{currentProperties}})',
+    maxProperties: 'Maximal {{maximumProperties}} Attribute erlaubt (aktuell: {{currentProperties}})',
+    minItems: 'Mindestens {{minimumItems}} Werte erforderlich (aktuell: {{currentItems}})',
+    maxItems: 'Maximal {{maximumItems}} Werte erlaubt (aktuell: {{currentItems}})',
+    uniqueItems: 'Alle Werte müssen eindeutig sein',
+    // Note: No default error messages for 'type', 'const', 'enum', or 'dependencies'
+};
+
+const enValidationMessages = {
+    required: 'This field is required.',
+    minLength: 'Must be {{minimumLength}} characters or longer (current length: {{currentLength}})',
+    maxLength: 'Must be {{maximumLength}} characters or shorter (current length: {{currentLength}})',
+    pattern: 'Must match pattern: {{requiredPattern}}',
+    format: function (error) {
+        switch (error.requiredFormat) {
+            case 'date':
+                return 'Must be a date, like "2000-12-31"';
+            case 'time':
+                return 'Must be a time, like "16:20" or "03:14:15.9265"';
+            case 'date-time':
+                return 'Must be a date-time, like "2000-03-14T01:59" or "2000-03-14T01:59:26.535Z"';
+            case 'email':
+                return 'Must be an email address, like "name@example.com"';
+            case 'hostname':
+                return 'Must be a hostname, like "example.com"';
+            case 'ipv4':
+                return 'Must be an IPv4 address, like "127.0.0.1"';
+            case 'ipv6':
+                return 'Must be an IPv6 address, like "1234:5678:9ABC:DEF0:1234:5678:9ABC:DEF0"';
+            // TODO: add examples for 'uri', 'uri-reference', and 'uri-template'
+            // case 'uri': case 'uri-reference': case 'uri-template':
+            case 'url':
+                return 'Must be a url, like "http://www.example.com/page.html"';
+            case 'uuid':
+                return 'Must be a uuid, like "12345678-9ABC-DEF0-1234-56789ABCDEF0"';
+            case 'color':
+                return 'Must be a color, like "#FFFFFF" or "rgb(255, 255, 255)"';
+            case 'json-pointer':
+                return 'Must be a JSON Pointer, like "/pointer/to/something"';
+            case 'relative-json-pointer':
+                return 'Must be a relative JSON Pointer, like "2/pointer/to/something"';
+            case 'regex':
+                return 'Must be a regular expression, like "(1-)?\\d{3}-\\d{3}-\\d{4}"';
+            default:
+                return 'Must be a correctly formatted ' + error.requiredFormat;
         }
-    }
-    // If value is a date, and types includes 'integer' or 'number',
-    // but not 'string', convert the date to a number
-    if (isDate(value) && (inArray('integer', types) || inArray('number', types))) {
-        return value.getTime();
-    }
-    if (inArray('boolean', types)) {
-        if (isBoolean(value, true)) {
-            return true;
+    },
+    minimum: 'Must be {{minimumValue}} or more',
+    exclusiveMinimum: 'Must be more than {{exclusiveMinimumValue}}',
+    maximum: 'Must be {{maximumValue}} or less',
+    exclusiveMaximum: 'Must be less than {{exclusiveMaximumValue}}',
+    multipleOf: function (error) {
+        if ((1 / error.multipleOfValue) % 10 === 0) {
+            const decimals = Math.log10(1 / error.multipleOfValue);
+            return `Must have ${decimals} or fewer decimal places.`;
         }
-        if (isBoolean(value, false)) {
-            return false;
+        else {
+            return `Must be a multiple of ${error.multipleOfValue}.`;
         }
-    }
-    return null;
-}
-/**
- * 'toSchemaType' function
- *
- * Converts an input (probably string) value to the "best" JavaScript
- * equivalent available from an allowed list of JSON Schema types, which may
- * contain 'string', 'number', 'integer', 'boolean', and/or 'null'.
- * If necssary, it does progressively agressive type coersion.
- * It will not return null unless null is in the list of allowed types.
- *
- * Number conversion examples:
- * toSchemaType('10', ['number','integer','string']) = 10 // integer
- * toSchemaType('10', ['number','string']) = 10 // number
- * toSchemaType('10', ['string']) = '10' // string
- * toSchemaType('10.5', ['number','integer','string']) = 10.5 // number
- * toSchemaType('10.5', ['integer','string']) = '10.5' // string
- * toSchemaType('10.5', ['integer']) = 10 // integer
- * toSchemaType(10.5, ['null','boolean','string']) = '10.5' // string
- * toSchemaType(10.5, ['null','boolean']) = true // boolean
- *
- * String conversion examples:
- * toSchemaType('1.5x', ['boolean','number','integer','string']) = '1.5x' // string
- * toSchemaType('1.5x', ['boolean','number','integer']) = '1.5' // number
- * toSchemaType('1.5x', ['boolean','integer']) = '1' // integer
- * toSchemaType('1.5x', ['boolean']) = true // boolean
- * toSchemaType('xyz', ['number','integer','boolean','null']) = true // boolean
- * toSchemaType('xyz', ['number','integer','null']) = null // null
- * toSchemaType('xyz', ['number','integer']) = 0 // number
- *
- * Boolean conversion examples:
- * toSchemaType('1', ['integer','number','string','boolean']) = 1 // integer
- * toSchemaType('1', ['number','string','boolean']) = 1 // number
- * toSchemaType('1', ['string','boolean']) = '1' // string
- * toSchemaType('1', ['boolean']) = true // boolean
- * toSchemaType('true', ['number','string','boolean']) = 'true' // string
- * toSchemaType('true', ['boolean']) = true // boolean
- * toSchemaType('true', ['number']) = 0 // number
- * toSchemaType(true, ['number','string','boolean']) = true // boolean
- * toSchemaType(true, ['number','string']) = 'true' // string
- * toSchemaType(true, ['number']) = 1 // number
- *
- * //  { PrimitiveValue } value - value to convert
- * //  { SchemaPrimitiveType | SchemaPrimitiveType[] } types - allowed types to convert to
- * // { PrimitiveValue }
- */
-function toSchemaType(value, types) {
-    if (!isArray(types)) {
-        types = [types];
-    }
-    if (types.includes('null') && !hasValue(value)) {
-        return null;
-    }
-    if (types.includes('boolean') && !isBoolean(value, 'strict')) {
-        return value;
-    }
-    if (types.includes('integer')) {
-        const testValue = toJavaScriptType(value, 'integer');
-        if (testValue !== null) {
-            return +testValue;
+    },
+    minProperties: 'Must have {{minimumProperties}} or more items (current items: {{currentProperties}})',
+    maxProperties: 'Must have {{maximumProperties}} or fewer items (current items: {{currentProperties}})',
+    minItems: 'Must have {{minimumItems}} or more items (current items: {{currentItems}})',
+    maxItems: 'Must have {{maximumItems}} or fewer items (current items: {{currentItems}})',
+    uniqueItems: 'All items must be unique',
+    // Note: No default error messages for 'type', 'const', 'enum', or 'dependencies'
+};
+
+const esValidationMessages = {
+    required: 'Este campo está requerido.',
+    minLength: 'Debe tener {{minimumLength}} caracteres o más longitud (longitud actual: {{currentLength}})',
+    maxLength: 'Debe tener {{maximumLength}} caracteres o menos longitud (longitud actual: {{currentLength}})',
+    pattern: 'Must match pattern: {{requiredPattern}}',
+    format: function (error) {
+        switch (error.requiredFormat) {
+            case 'date':
+                return 'Debe tener una fecha, ej "2000-12-31"';
+            case 'time':
+                return 'Debe tener una hora, ej "16:20" o "03:14:15.9265"';
+            case 'date-time':
+                return 'Debe tener fecha y hora, ej "2000-03-14T01:59" o "2000-03-14T01:59:26.535Z"';
+            case 'email':
+                return 'No hay dirección de correo electrónico válida, ej "name@example.com"';
+            case 'hostname':
+                return 'Debe ser un nombre de host válido, ej "example.com"';
+            case 'ipv4':
+                return 'Debe ser una dirección de IPv4, ej "127.0.0.1"';
+            case 'ipv6':
+                return 'Debe ser una dirección de IPv6, ej "1234:5678:9ABC:DEF0:1234:5678:9ABC:DEF0"';
+            case 'url':
+                return 'Debe ser una URL, ej "http://www.example.com/page.html"';
+            case 'uuid':
+                return 'Debe ser un UUID, ej "12345678-9ABC-DEF0-1234-56789ABCDEF0"';
+            case 'color':
+                return 'Debe ser un color, ej "#FFFFFF" or "rgb(255, 255, 255)"';
+            case 'json-pointer':
+                return 'Debe ser un JSON Pointer, ej "/pointer/to/something"';
+            case 'relative-json-pointer':
+                return 'Debe ser un JSON Pointer relativo, ej "2/pointer/to/something"';
+            case 'regex':
+                return 'Debe ser una expresión regular, ej "(1-)?\\d{3}-\\d{3}-\\d{4}"';
+            default:
+                return 'Debe tener el formato correcto ' + error.requiredFormat;
         }
-    }
-    if (types.includes('number')) {
-        const testValue = toJavaScriptType(value, 'number');
-        if (testValue !== null) {
-            return +testValue;
+    },
+    minimum: 'Debe ser {{minimumValue}} o más',
+    exclusiveMinimum: 'Debe ser superior a {{exclusiveMinimumValue}}',
+    maximum: 'Debe ser {{maximumValue}} o menos',
+    exclusiveMaximum: 'Debe ser menor que {{exclusiveMaximumValue}}',
+    multipleOf: function (error) {
+        if ((1 / error.multipleOfValue) % 10 === 0) {
+            const decimals = Math.log10(1 / error.multipleOfValue);
+            return `Se permite un máximo de ${decimals} decimales`;
         }
-    }
-    if ((isString(value) || isNumber(value, 'strict')) &&
-        types.includes('string')) { // Convert number to string
-        return toJavaScriptType(value, 'string');
-    }
-    if (types.includes('boolean') && isBoolean(value)) {
-        return toJavaScriptType(value, 'boolean');
-    }
-    if (types.includes('string')) { // Convert null & boolean to string
-        if (value === null) {
-            return '';
+        else {
+            return `Debe ser múltiplo de ${error.multipleOfValue}.`;
         }
-        const testValue = toJavaScriptType(value, 'string');
-        if (testValue !== null) {
-            return testValue;
+    },
+    minProperties: 'Debe tener {{minimumProperties}} o más elementos (elementos actuales: {{currentProperties}})',
+    maxProperties: 'Debe tener {{maximumProperties}} o menos elementos (elementos actuales: {{currentProperties}})',
+    minItems: 'Debe tener {{minimumItems}} o más elementos (elementos actuales: {{currentItems}})',
+    maxItems: 'Debe tener {{maximumItems}} o menos elementos (elementos actuales: {{currentItems}})',
+    uniqueItems: 'Todos los elementos deben ser únicos',
+};
+
+const frValidationMessages = {
+    required: 'Est obligatoire.',
+    minLength: 'Doit avoir minimum {{minimumLength}} caractères (actuellement: {{currentLength}})',
+    maxLength: 'Doit avoir maximum {{maximumLength}} caractères (actuellement: {{currentLength}})',
+    pattern: 'Doit respecter: {{requiredPattern}}',
+    format: function (error) {
+        switch (error.requiredFormat) {
+            case 'date':
+                return 'Doit être une date, tel que "2000-12-31"';
+            case 'time':
+                return 'Doit être une heure, tel que "16:20" ou "03:14:15.9265"';
+            case 'date-time':
+                return 'Doit être une date et une heure, tel que "2000-03-14T01:59" ou "2000-03-14T01:59:26.535Z"';
+            case 'email':
+                return 'Doit être une adresse e-mail, tel que "name@example.com"';
+            case 'hostname':
+                return 'Doit être un nom de domaine, tel que "example.com"';
+            case 'ipv4':
+                return 'Doit être une adresse IPv4, tel que "127.0.0.1"';
+            case 'ipv6':
+                return 'Doit être une adresse IPv6, tel que "1234:5678:9ABC:DEF0:1234:5678:9ABC:DEF0"';
+            // TODO: add examples for 'uri', 'uri-reference', and 'uri-template'
+            // case 'uri': case 'uri-reference': case 'uri-template':
+            case 'url':
+                return 'Doit être une URL, tel que "http://www.example.com/page.html"';
+            case 'uuid':
+                return 'Doit être un UUID, tel que "12345678-9ABC-DEF0-1234-56789ABCDEF0"';
+            case 'color':
+                return 'Doit être une couleur, tel que "#FFFFFF" or "rgb(255, 255, 255)"';
+            case 'json-pointer':
+                return 'Doit être un JSON Pointer, tel que "/pointer/to/something"';
+            case 'relative-json-pointer':
+                return 'Doit être un relative JSON Pointer, tel que "2/pointer/to/something"';
+            case 'regex':
+                return 'Doit être une expression régulière, tel que "(1-)?\\d{3}-\\d{3}-\\d{4}"';
+            default:
+                return 'Doit être avoir le format correct: ' + error.requiredFormat;
         }
-    }
-    if ((types.includes('number') ||
-        types.includes('integer'))) {
-        if (value === true) {
-            return 1;
-        } // Convert boolean & null to number
-        if (value === false || value === null || value === '') {
-            return 0;
+    },
+    minimum: 'Doit être supérieur à {{minimumValue}}',
+    exclusiveMinimum: 'Doit avoir minimum {{exclusiveMinimumValue}} charactères',
+    maximum: 'Doit être inférieur à {{maximumValue}}',
+    exclusiveMaximum: 'Doit avoir maximum {{exclusiveMaximumValue}} charactères',
+    multipleOf: function (error) {
+        if ((1 / error.multipleOfValue) % 10 === 0) {
+            const decimals = Math.log10(1 / error.multipleOfValue);
+            return `Doit comporter ${decimals} ou moins de decimales.`;
         }
-    }
-    if (types.includes('number')) { // Convert mixed string to number
-        const testValue = parseFloat(value);
-        if (!!testValue) {
-            return testValue;
+        else {
+            return `Doit être un multiple de ${error.multipleOfValue}.`;
         }
-    }
-    if (types.includes('integer')) { // Convert string or number to integer
-        const testValue = parseInt(value, 10);
-        if (!!testValue) {
-            return testValue;
+    },
+    minProperties: 'Doit comporter au minimum {{minimumProperties}} éléments',
+    maxProperties: 'Doit comporter au maximum {{maximumProperties}} éléments',
+    minItems: 'Doit comporter au minimum {{minimumItems}} éléments',
+    maxItems: 'Doit comporter au maximum {{minimumItems}} éléments',
+    uniqueItems: 'Tous les éléments doivent être uniques',
+    // Note: No default error messages for 'type', 'const', 'enum', or 'dependencies'
+};
+
+const itValidationMessages = {
+    required: 'Il campo è obbligatorio',
+    minLength: 'Deve inserire almeno {{minimumLength}} caratteri (lunghezza corrente: {{currentLength}})',
+    maxLength: 'Il numero massimo di caratteri consentito è {{maximumLength}} (lunghezza corrente: {{currentLength}})',
+    pattern: 'Devi rispettare il pattern : {{requiredPattern}}',
+    format: function (error) {
+        switch (error.requiredFormat) {
+            case 'date':
+                return 'Deve essere una data, come "31-12-2000"';
+            case 'time':
+                return 'Deve essere un orario, come "16:20" o "03:14:15.9265"';
+            case 'date-time':
+                return 'Deve essere data-orario, come "14-03-2000T01:59" or "14-03-2000T01:59:26.535Z"';
+            case 'email':
+                return 'Deve essere un indirzzo email, come "name@example.com"';
+            case 'hostname':
+                return 'Deve essere un hostname, come "example.com"';
+            case 'ipv4':
+                return 'Deve essere un indirizzo IPv4, come "127.0.0.1"';
+            case 'ipv6':
+                return 'Deve essere un indirizzo IPv6, come "1234:5678:9ABC:DEF0:1234:5678:9ABC:DEF0"';
+            // TODO: add examples for 'uri', 'uri-reference', and 'uri-template'
+            // case 'uri': case 'uri-reference': case 'uri-template':
+            case 'url':
+                return 'Deve essere un url, come "http://www.example.com/page.html"';
+            case 'uuid':
+                return 'Deve essere un uuid, come "12345678-9ABC-DEF0-1234-56789ABCDEF0"';
+            case 'color':
+                return 'Deve essere un colore, come "#FFFFFF" o "rgb(255, 255, 255)"';
+            case 'json-pointer':
+                return 'Deve essere un JSON Pointer, come "/pointer/to/something"';
+            case 'relative-json-pointer':
+                return 'Deve essere un JSON Pointer relativo, come "2/pointer/to/something"';
+            case 'regex':
+                return 'Deve essere una regular expression, come "(1-)?\\d{3}-\\d{3}-\\d{4}"';
+            default:
+                return 'Deve essere formattato correttamente ' + error.requiredFormat;
         }
-    }
-    if (types.includes('boolean')) { // Convert anything to boolean
-        return !!value;
-    }
-    if ((types.includes('number') ||
-        types.includes('integer')) && !types.includes('null')) {
-        return 0; // If null not allowed, return 0 for non-convertable values
-    }
-}
+    },
+    minimum: 'Deve essere {{minimumValue}} o più',
+    exclusiveMinimum: 'Deve essere più di {{exclusiveMinimumValue}}',
+    maximum: 'Deve essere {{maximumValue}} o meno',
+    exclusiveMaximum: 'Deve essere minore di {{exclusiveMaximumValue}}',
+    multipleOf: function (error) {
+        if ((1 / error.multipleOfValue) % 10 === 0) {
+            const decimals = Math.log10(1 / error.multipleOfValue);
+            return `Deve avere ${decimals} o meno decimali.`;
+        }
+        else {
+            return `Deve essere multiplo di ${error.multipleOfValue}.`;
+        }
+    },
+    minProperties: 'Deve avere {{minimumProperties}} o più elementi (elementi correnti: {{currentProperties}})',
+    maxProperties: 'Deve avere {{maximumProperties}} o meno elementi (elementi correnti: {{currentProperties}})',
+    minItems: 'Deve avere {{minimumItems}} o più elementi (elementi correnti: {{currentItems}})',
+    maxItems: 'Deve avere {{maximumItems}} o meno elementi (elementi correnti: {{currentItems}})',
+    uniqueItems: 'Tutti gli elementi devono essere unici',
+    // Note: No default error messages for 'type', 'const', 'enum', or 'dependencies'
+};
+
+const ptValidationMessages = {
+    required: 'Este campo é obrigatório.',
+    minLength: 'É preciso no mínimo {{minimumLength}} caracteres ou mais (tamanho atual: {{currentLength}})',
+    maxLength: 'É preciso no máximo  {{maximumLength}} caracteres ou menos (tamanho atual: {{currentLength}})',
+    pattern: 'Tem que ajustar ao formato: {{requiredPattern}}',
+    format: function (error) {
+        switch (error.requiredFormat) {
+            case 'date':
+                return 'Tem que ser uma data, por exemplo "2000-12-31"';
+            case 'time':
+                return 'Tem que ser horário, por exemplo "16:20" ou "03:14:15.9265"';
+            case 'date-time':
+                return 'Tem que ser data e hora, por exemplo "2000-03-14T01:59" ou "2000-03-14T01:59:26.535Z"';
+            case 'email':
+                return 'Tem que ser um email, por exemplo "fulano@exemplo.com.br"';
+            case 'hostname':
+                return 'Tem que ser uma nome de domínio, por exemplo "exemplo.com.br"';
+            case 'ipv4':
+                return 'Tem que ser um endereço IPv4, por exemplo "127.0.0.1"';
+            case 'ipv6':
+                return 'Tem que ser um endereço IPv6, por exemplo "1234:5678:9ABC:DEF0:1234:5678:9ABC:DEF0"';
+            // TODO: add examples for 'uri', 'uri-reference', and 'uri-template'
+            // case 'uri': case 'uri-reference': case 'uri-template':
+            case 'url':
+                return 'Tem que ser uma URL, por exemplo "http://www.exemplo.com.br/pagina.html"';
+            case 'uuid':
+                return 'Tem que ser um uuid, por exemplo "12345678-9ABC-DEF0-1234-56789ABCDEF0"';
+            case 'color':
+                return 'Tem que ser uma cor, por exemplo "#FFFFFF" ou "rgb(255, 255, 255)"';
+            case 'json-pointer':
+                return 'Tem que ser um JSON Pointer, por exemplo "/referencia/para/algo"';
+            case 'relative-json-pointer':
+                return 'Tem que ser um JSON Pointer relativo, por exemplo "2/referencia/para/algo"';
+            case 'regex':
+                return 'Tem que ser uma expressão regular, por exemplo "(1-)?\\d{3}-\\d{3}-\\d{4}"';
+            default:
+                return 'Tem que ser no formato: ' + error.requiredFormat;
+        }
+    },
+    minimum: 'Tem que ser {{minimumValue}} ou mais',
+    exclusiveMinimum: 'Tem que ser mais que {{exclusiveMinimumValue}}',
+    maximum: 'Tem que ser {{maximumValue}} ou menos',
+    exclusiveMaximum: 'Tem que ser menor que {{exclusiveMaximumValue}}',
+    multipleOf: function (error) {
+        if ((1 / error.multipleOfValue) % 10 === 0) {
+            const decimals = Math.log10(1 / error.multipleOfValue);
+            return `Tem que ter ${decimals} ou menos casas decimais.`;
+        }
+        else {
+            return `Tem que ser um múltiplo de ${error.multipleOfValue}.`;
+        }
+    },
+    minProperties: 'Deve ter {{minimumProperties}} ou mais itens (itens até o momento: {{currentProperties}})',
+    maxProperties: 'Deve ter {{maximumProperties}} ou menos intens (itens até o momento: {{currentProperties}})',
+    minItems: 'Deve ter {{minimumItems}} ou mais itens (itens até o momento: {{currentItems}})',
+    maxItems: 'Deve ter {{maximumItems}} ou menos itens (itens até o momento: {{currentItems}})',
+    uniqueItems: 'Todos os itens devem ser únicos',
+    // Note: No default error messages for 'type', 'const', 'enum', or 'dependencies'
+};
+
+const zhValidationMessages = {
+    required: '必填字段.',
+    minLength: '字符长度必须大于或者等于 {{minimumLength}} (当前长度: {{currentLength}})',
+    maxLength: '字符长度必须小于或者等于 {{maximumLength}} (当前长度: {{currentLength}})',
+    pattern: '必须匹配正则表达式: {{requiredPattern}}',
+    format: function (error) {
+        switch (error.requiredFormat) {
+            case 'date':
+                return '必须为日期格式, 比如 "2000-12-31"';
+            case 'time':
+                return '必须为时间格式, 比如 "16:20" 或者 "03:14:15.9265"';
+            case 'date-time':
+                return '必须为日期时间格式, 比如 "2000-03-14T01:59" 或者 "2000-03-14T01:59:26.535Z"';
+            case 'email':
+                return '必须为邮箱地址, 比如 "name@example.com"';
+            case 'hostname':
+                return '必须为主机名, 比如 "example.com"';
+            case 'ipv4':
+                return '必须为 IPv4 地址, 比如 "127.0.0.1"';
+            case 'ipv6':
+                return '必须为 IPv6 地址, 比如 "1234:5678:9ABC:DEF0:1234:5678:9ABC:DEF0"';
+            // TODO: add examples for 'uri', 'uri-reference', and 'uri-template'
+            // case 'uri': case 'uri-reference': case 'uri-template':
+            case 'url':
+                return '必须为 url, 比如 "http://www.example.com/page.html"';
+            case 'uuid':
+                return '必须为 uuid, 比如 "12345678-9ABC-DEF0-1234-56789ABCDEF0"';
+            case 'color':
+                return '必须为颜色值, 比如 "#FFFFFF" 或者 "rgb(255, 255, 255)"';
+            case 'json-pointer':
+                return '必须为 JSON Pointer, 比如 "/pointer/to/something"';
+            case 'relative-json-pointer':
+                return '必须为相对的 JSON Pointer, 比如 "2/pointer/to/something"';
+            case 'regex':
+                return '必须为正则表达式, 比如 "(1-)?\\d{3}-\\d{3}-\\d{4}"';
+            default:
+                return '必须为格式正确的 ' + error.requiredFormat;
+        }
+    },
+    minimum: '必须大于或者等于最小值: {{minimumValue}}',
+    exclusiveMinimum: '必须大于最小值: {{exclusiveMinimumValue}}',
+    maximum: '必须小于或者等于最大值: {{maximumValue}}',
+    exclusiveMaximum: '必须小于最大值: {{exclusiveMaximumValue}}',
+    multipleOf: function (error) {
+        if ((1 / error.multipleOfValue) % 10 === 0) {
+            const decimals = Math.log10(1 / error.multipleOfValue);
+            return `必须有 ${decimals} 位或更少的小数位`;
+        }
+        else {
+            return `必须为 ${error.multipleOfValue} 的倍数`;
+        }
+    },
+    minProperties: '项目数必须大于或者等于 {{minimumProperties}} (当前项目数: {{currentProperties}})',
+    maxProperties: '项目数必须小于或者等于 {{maximumProperties}} (当前项目数: {{currentProperties}})',
+    minItems: '项目数必须大于或者等于 {{minimumItems}} (当前项目数: {{currentItems}})',
+    maxItems: '项目数必须小于或者等于 {{maximumItems}} (当前项目数: {{currentItems}})',
+    uniqueItems: '所有项目必须是唯一的',
+    // Note: No default error messages for 'type', 'const', 'enum', or 'dependencies'
+};
+
 /**
- * 'isPromise' function
+ * '_executeValidators' utility function
  *
- * //   object
- * // { boolean }
- */
-function isPromise(object) {
-    return !!object && typeof object.then === 'function';
-}
-/**
- * 'isObservable' function
+ * Validates a control against an array of validators, and returns
+ * an array of the same length containing a combination of error messages
+ * (from invalid validators) and null values (from valid validators)
  *
- * //   object
- * // { boolean }
+ * //  { AbstractControl } control - control to validate
+ * //  { IValidatorFn[] } validators - array of validators
+ * //  { boolean } invert - invert?
+ * // { PlainObject[] } - array of nulls and error message
  */
-function isObservable(object) {
-    return !!object && typeof object.subscribe === 'function';
+function _executeValidators(control, validators, invert = false) {
+    return validators.map(validator => validator(control, invert));
 }
 /**
- * '_toPromise' function
+ * '_executeAsyncValidators' utility function
  *
- * //  { object } object
- * // { Promise<any> }
+ * Validates a control against an array of async validators, and returns
+ * an array of observabe results of the same length containing a combination of
+ * error messages (from invalid validators) and null values (from valid ones)
+ *
+ * //  { AbstractControl } control - control to validate
+ * //  { AsyncIValidatorFn[] } validators - array of async validators
+ * //  { boolean } invert - invert?
+ * //  - array of observable nulls and error message
  */
-function _toPromise(object) {
-    return isPromise(object) ? object : object.toPromise();
+function _executeAsyncValidators(control, validators, invert = false) {
+    return validators.map(validator => validator(control, invert));
 }
 /**
- * 'toObservable' function
+ * '_mergeObjects' utility function
  *
- * //  { object } object
- * // { Observable<any> }
+ * Recursively Merges one or more objects into a single object with combined keys.
+ * Automatically detects and ignores null and undefined inputs.
+ * Also detects duplicated boolean 'not' keys and XORs their values.
+ *
+ * //  { PlainObject[] } objects - one or more objects to merge
+ * // { PlainObject } - merged object
  */
-function toObservable(object) {
-    const observable = isPromise(object) ? from(object) : object;
-    if (isObservable(observable)) {
-        return observable;
+function _mergeObjects(...objects) {
+    const mergedObject = {};
+    for (const currentObject of objects) {
+        if (isObject(currentObject)) {
+            for (const key of Object.keys(currentObject)) {
+                const currentValue = currentObject[key];
+                const mergedValue = mergedObject[key];
+                mergedObject[key] = !isDefined(mergedValue) ? currentValue :
+                    key === 'not' && isBoolean(mergedValue, 'strict') &&
+                        isBoolean(currentValue, 'strict') ? xor(mergedValue, currentValue) :
+                        getType(mergedValue) === 'object' && getType(currentValue) === 'object' ?
+                            _mergeObjects(mergedValue, currentValue) :
+                            currentValue;
+            }
+        }
     }
-    console.error('toObservable error: Expected validator to return Promise or Observable.');
-    return new Observable();
+    return mergedObject;
 }
 /**
- * 'inArray' function
- *
- * Searches an array for an item, or one of a list of items, and returns true
- * as soon as a match is found, or false if no match.
+ * '_mergeErrors' utility function
  *
- * If the optional third parameter allIn is set to TRUE, and the item to find
- * is an array, then the function returns true only if all elements from item
- * are found in the array list, and false if any element is not found. If the
- * item to find is not an array, setting allIn to TRUE has no effect.
+ * Merges an array of objects.
+ * Used for combining the validator errors returned from 'executeValidators'
  *
- * //  { any|any[] } item - the item to search for
- * //   array - the array to search
- * //  { boolean = false } allIn - if TRUE, all items must be in array
- * // { boolean } - true if item(s) in array, false otherwise
+ * //  { PlainObject[] } arrayOfErrors - array of objects
+ * // { PlainObject } - merged object, or null if no usable input objectcs
  */
-function inArray(item, array, allIn = false) {
-    if (!isDefined(item) || !isArray(array)) {
-        return false;
-    }
-    return isArray(item) ?
-        item[allIn ? 'every' : 'some'](subItem => array.includes(subItem)) :
-        array.includes(item);
+function _mergeErrors(arrayOfErrors) {
+    const mergedErrors = _mergeObjects(...arrayOfErrors);
+    return isEmpty(mergedErrors) ? null : mergedErrors;
 }
 /**
- * 'xor' utility function - exclusive or
+ * 'isDefined' utility function
  *
- * Returns true if exactly one of two values is truthy.
+ * Checks if a variable contains a value of any type.
+ * Returns true even for otherwise 'falsey' values of 0, '', and false.
  *
- * //   value1 - first value to check
- * //   value2 - second value to check
- * // { boolean } - true if exactly one input value is truthy, false if not
+ * //   value - the value to check
+ * // { boolean } - false if undefined or null, otherwise true
  */
-function xor(value1, value2) {
-    return (!!value1 && !value2) || (!value1 && !!value2);
+function isDefined(value) {
+    return value !== undefined && value !== null;
 }
-
-/**
- * Utility function library:
- *
- * addClasses, copy, forEach, forEachCopy, hasOwn, mergeFilteredObject,
- * uniqueItems, commonItems, fixTitle, toTitleCase
-*/
 /**
- * 'addClasses' function
+ * 'hasValue' utility function
  *
- * Merges two space-delimited lists of CSS classes and removes duplicates.
+ * Checks if a variable contains a value.
+ * Returs false for null, undefined, or a zero-length strng, '',
+ * otherwise returns true.
+ * (Stricter than 'isDefined' because it also returns false for '',
+ * though it stil returns true for otherwise 'falsey' values 0 and false.)
  *
- * // {string | string[] | Set<string>} oldClasses
- * // {string | string[] | Set<string>} newClasses
- * // {string | string[] | Set<string>} - Combined classes
+ * //   value - the value to check
+ * // { boolean } - false if undefined, null, or '', otherwise true
  */
-function addClasses(oldClasses, newClasses) {
-    const badType = i => !isSet(i) && !isArray(i) && !isString(i);
-    if (badType(newClasses)) {
-        return oldClasses;
-    }
-    if (badType(oldClasses)) {
-        oldClasses = '';
-    }
-    const toSet = i => isSet(i) ? i : isArray(i) ? new Set(i) : new Set(i.split(' '));
-    const combinedSet = toSet(oldClasses);
-    const newSet = toSet(newClasses);
-    newSet.forEach(c => combinedSet.add(c));
-    if (isSet(oldClasses)) {
-        return combinedSet;
-    }
-    if (isArray(oldClasses)) {
-        return Array.from(combinedSet);
-    }
-    return Array.from(combinedSet).join(' ');
+function hasValue(value) {
+    return value !== undefined && value !== null && value !== '';
 }
 /**
- * 'copy' function
+ * 'isEmpty' utility function
  *
- * Makes a shallow copy of a JavaScript object, array, Map, or Set.
- * If passed a JavaScript primitive value (string, number, boolean, or null),
- * it returns the value.
+ * Similar to !hasValue, but also returns true for empty arrays and objects.
  *
- * // {Object|Array|string|number|boolean|null} object - The object to copy
- * // {boolean = false} errors - Show errors?
- * // {Object|Array|string|number|boolean|null} - The copied object
+ * //   value - the value to check
+ * // { boolean } - false if undefined, null, or '', otherwise true
  */
-function copy(object, errors = false) {
-    if (typeof object !== 'object' || object === null) {
-        return object;
-    }
-    if (isMap(object)) {
-        return new Map(object);
-    }
-    if (isSet(object)) {
-        return new Set(object);
-    }
-    if (isArray(object)) {
-        return [...object];
-    }
-    if (isObject(object)) {
-        return { ...object };
+function isEmpty(value) {
+    if (isArray(value)) {
+        return !value.length;
     }
-    if (errors) {
-        console.error('copy error: Object to copy must be a JavaScript object or value.');
+    if (isObject(value)) {
+        return !Object.keys(value).length;
     }
-    return object;
+    return value === undefined || value === null || value === '';
 }
 /**
- * 'forEach' function
- *
- * Iterates over all items in the first level of an object or array
- * and calls an iterator funciton on each item.
- *
- * The iterator function is called with four values:
- * 1. The current item's value
- * 2. The current item's key
- * 3. The parent object, which contains the current item
- * 4. The root object
+ * 'isString' utility function
  *
- * Setting the optional third parameter to 'top-down' or 'bottom-up' will cause
- * it to also recursively iterate over items in sub-objects or sub-arrays in the
- * specified direction.
+ * Checks if a value is a string.
  *
- * // {Object|Array} object - The object or array to iterate over
- * // {function} fn - the iterator funciton to call on each item
- * // {boolean = false} errors - Show errors?
- * // {void}
+ * //   value - the value to check
+ * // { boolean } - true if string, false if not
  */
-function forEach(object, fn, recurse = false, rootObject = object, errors = false) {
-    if (isEmpty(object)) {
-        return;
-    }
-    if ((isObject(object) || isArray(object)) && typeof fn === 'function') {
-        for (const key of Object.keys(object)) {
-            const value = object[key];
-            if (recurse === 'bottom-up' && (isObject(value) || isArray(value))) {
-                forEach(value, fn, recurse, rootObject);
-            }
-            fn(value, key, object, rootObject);
-            if (recurse === 'top-down' && (isObject(value) || isArray(value))) {
-                forEach(value, fn, recurse, rootObject);
-            }
-        }
-    }
-    if (errors) {
-        if (typeof fn !== 'function') {
-            console.error('forEach error: Iterator must be a function.');
-            console.error('function', fn);
-        }
-        if (!isObject(object) && !isArray(object)) {
-            console.error('forEach error: Input object must be an object or array.');
-            console.error('object', object);
-        }
-    }
+function isString(value) {
+    return typeof value === 'string';
 }
 /**
- * 'forEachCopy' function
- *
- * Iterates over all items in the first level of an object or array
- * and calls an iterator function on each item. Returns a new object or array
- * with the same keys or indexes as the original, and values set to the results
- * of the iterator function.
+ * 'isNumber' utility function
  *
- * Does NOT recursively iterate over items in sub-objects or sub-arrays.
+ * Checks if a value is a regular number, numeric string, or JavaScript Date.
  *
- * // {Object | Array} object - The object or array to iterate over
- * // {function} fn - The iterator funciton to call on each item
- * // {boolean = false} errors - Show errors?
- * // {Object | Array} - The resulting object or array
+ * //   value - the value to check
+ * //  { any = false } strict - if truthy, also checks JavaScript tyoe
+ * // { boolean } - true if number, false if not
  */
-function forEachCopy(object, fn, errors = false) {
-    if (!hasValue(object)) {
-        return;
-    }
-    if ((isObject(object) || isArray(object)) && typeof object !== 'function') {
-        const newObject = isArray(object) ? [] : {};
-        for (const key of Object.keys(object)) {
-            newObject[key] = fn(object[key], key, object);
-        }
-        return newObject;
-    }
-    if (errors) {
-        if (typeof fn !== 'function') {
-            console.error('forEachCopy error: Iterator must be a function.');
-            console.error('function', fn);
-        }
-        if (!isObject(object) && !isArray(object)) {
-            console.error('forEachCopy error: Input object must be an object or array.');
-            console.error('object', object);
-        }
+function isNumber(value, strict = false) {
+    if (strict && typeof value !== 'number') {
+        return false;
     }
+    return !isNaN(value) && value !== value / 0;
 }
 /**
- * 'hasOwn' utility function
+ * 'isInteger' utility function
  *
- * Checks whether an object or array has a particular property.
+ * Checks if a value is an integer.
  *
- * // {any} object - the object to check
- * // {string} property - the property to look for
- * // {boolean} - true if object has property, false if not
+ * //   value - the value to check
+ * //  { any = false } strict - if truthy, also checks JavaScript tyoe
+ * // {boolean } - true if number, false if not
  */
-function hasOwn(object, property) {
-    if (!object || !['number', 'string', 'symbol'].includes(typeof property) ||
-        (!isObject(object) && !isArray(object) && !isMap(object) && !isSet(object))) {
+function isInteger(value, strict = false) {
+    if (strict && typeof value !== 'number') {
         return false;
     }
-    if (isMap(object) || isSet(object)) {
-        return object.has(property);
-    }
-    if (typeof property === 'number') {
-        if (isArray(object)) {
-            return object[property];
-        }
-        property = property + '';
-    }
-    return object.hasOwnProperty(property);
+    return !isNaN(value) && value !== value / 0 && value % 1 === 0;
 }
 /**
- * Types of possible expressions which the app is able to evaluate.
- */
-var ExpressionType;
-(function (ExpressionType) {
-    ExpressionType[ExpressionType["EQUALS"] = 0] = "EQUALS";
-    ExpressionType[ExpressionType["NOT_EQUALS"] = 1] = "NOT_EQUALS";
-    ExpressionType[ExpressionType["NOT_AN_EXPRESSION"] = 2] = "NOT_AN_EXPRESSION";
-})(ExpressionType || (ExpressionType = {}));
-/**
- * Detects the type of expression from the given candidate. `==` for equals,
- * `!=` for not equals. If none of these are contained in the candidate, the candidate
- * is not considered to be an expression at all and thus `NOT_AN_EXPRESSION` is returned.
- * // {expressionCandidate} expressionCandidate - potential expression
+ * 'isBoolean' utility function
+ *
+ * Checks if a value is a boolean.
+ *
+ * //   value - the value to check
+ * //  { any = null } option - if 'strict', also checks JavaScript type
+ *                              if TRUE or FALSE, checks only for that value
+ * // { boolean } - true if boolean, false if not
  */
-function getExpressionType(expressionCandidate) {
-    if (expressionCandidate.indexOf('==') !== -1) {
-        return ExpressionType.EQUALS;
+function isBoolean(value, option = null) {
+    if (option === 'strict') {
+        return value === true || value === false;
     }
-    if (expressionCandidate.toString().indexOf('!=') !== -1) {
-        return ExpressionType.NOT_EQUALS;
+    if (option === true) {
+        return value === true || value === 1 || value === 'true' || value === '1';
     }
-    return ExpressionType.NOT_AN_EXPRESSION;
+    if (option === false) {
+        return value === false || value === 0 || value === 'false' || value === '0';
+    }
+    return value === true || value === 1 || value === 'true' || value === '1' ||
+        value === false || value === 0 || value === 'false' || value === '0';
 }
-function isEqual(expressionType) {
-    return expressionType === ExpressionType.EQUALS;
+function isFunction(item) {
+    return typeof item === 'function';
 }
-function isNotEqual(expressionType) {
-    return expressionType === ExpressionType.NOT_EQUALS;
+function isObject(item) {
+    return item !== null && typeof item === 'object';
 }
-function isNotExpression(expressionType) {
-    return expressionType === ExpressionType.NOT_AN_EXPRESSION;
+function isArray(item) {
+    return Array.isArray(item);
 }
-/**
- * Splits the expression key by the expressionType on a pair of values
- * before and after the equals or nor equals sign.
- * // {expressionType} enum of an expression type
- * // {key} the given key from a for loop iver all conditions
- */
-function getKeyAndValueByExpressionType(expressionType, key) {
-    if (isEqual(expressionType)) {
-        return key.split('==', 2);
-    }
-    if (isNotEqual(expressionType)) {
-        return key.split('!=', 2);
-    }
-    return null;
+function isDate(item) {
+    return !!item && Object.prototype.toString.call(item) === '[object Date]';
 }
-function cleanValueOfQuotes(keyAndValue) {
-    if (keyAndValue.charAt(0) === '\'' && keyAndValue.charAt(keyAndValue.length - 1) === '\'') {
-        return keyAndValue.replace('\'', '').replace('\'', '');
-    }
-    return keyAndValue;
+function isMap(item) {
+    return !!item && Object.prototype.toString.call(item) === '[object Map]';
+}
+function isSet(item) {
+    return !!item && Object.prototype.toString.call(item) === '[object Set]';
+}
+function isSymbol(item) {
+    return typeof item === 'symbol';
 }
 /**
- * 'mergeFilteredObject' utility function
+ * 'getType' function
  *
- * Shallowly merges two objects, setting key and values from source object
- * in target object, excluding specified keys.
+ * Detects the JSON Schema Type of a value.
+ * By default, detects numbers and integers even if formatted as strings.
+ * (So all integers are also numbers, and any number may also be a string.)
+ * However, it only detects true boolean values (to detect boolean values
+ * in non-boolean formats, use isBoolean() instead).
  *
- * Optionally, it can also use functions to transform the key names and/or
- * the values of the merging object.
+ * If passed a second optional parameter of 'strict', it will only detect
+ * numbers and integers if they are formatted as JavaScript numbers.
  *
- * // {PlainObject} targetObject - Target object to add keys and values to
- * // {PlainObject} sourceObject - Source object to copy keys and values from
- * // {string[]} excludeKeys - Array of keys to exclude
- * // {(string: string) => string = (k) => k} keyFn - Function to apply to keys
- * // {(any: any) => any = (v) => v} valueFn - Function to apply to values
- * // {PlainObject} - Returns targetObject
+ * Examples:
+ * getType('10.5') = 'number'
+ * getType(10.5) = 'number'
+ * getType('10') = 'integer'
+ * getType(10) = 'integer'
+ * getType('true') = 'string'
+ * getType(true) = 'boolean'
+ * getType(null) = 'null'
+ * getType({ }) = 'object'
+ * getType([]) = 'array'
+ *
+ * getType('10.5', 'strict') = 'string'
+ * getType(10.5, 'strict') = 'number'
+ * getType('10', 'strict') = 'string'
+ * getType(10, 'strict') = 'integer'
+ * getType('true', 'strict') = 'string'
+ * getType(true, 'strict') = 'boolean'
+ *
+ * //   value - value to check
+ * //  { any = false } strict - if truthy, also checks JavaScript tyoe
+ * // { SchemaType }
  */
-function mergeFilteredObject(targetObject, sourceObject, excludeKeys = [], keyFn = (key) => key, valFn = (val) => val) {
-    if (!isObject(sourceObject)) {
-        return targetObject;
+function getType(value, strict = false) {
+    if (!isDefined(value)) {
+        return 'null';
     }
-    if (!isObject(targetObject)) {
-        targetObject = {};
+    if (isArray(value)) {
+        return 'array';
     }
-    for (const key of Object.keys(sourceObject)) {
-        if (!inArray(key, excludeKeys) && isDefined(sourceObject[key])) {
-            targetObject[keyFn(key)] = valFn(sourceObject[key]);
-        }
+    if (isObject(value)) {
+        return 'object';
     }
-    return targetObject;
+    if (isBoolean(value, 'strict')) {
+        return 'boolean';
+    }
+    if (isInteger(value, strict)) {
+        return 'integer';
+    }
+    if (isNumber(value, strict)) {
+        return 'number';
+    }
+    if (isString(value) || (!strict && isDate(value))) {
+        return 'string';
+    }
+    return null;
 }
 /**
- * 'uniqueItems' function
+ * 'isType' function
  *
- * Accepts any number of string value inputs,
- * and returns an array of all input vaues, excluding duplicates.
+ * Checks wether an input (probably string) value contains data of
+ * a specified JSON Schema type
  *
- * // {...string} ...items -
- * // {string[]} -
+ * //  { PrimitiveValue } value - value to check
+ * //  { SchemaPrimitiveType } type - type to check
+ * // { boolean }
  */
-function uniqueItems(...items) {
-    const returnItems = [];
-    for (const item of items) {
-        if (!returnItems.includes(item)) {
-            returnItems.push(item);
-        }
+function isType(value, type) {
+    switch (type) {
+        case 'string':
+            return isString(value) || isDate(value);
+        case 'number':
+            return isNumber(value);
+        case 'integer':
+            return isInteger(value);
+        case 'boolean':
+            return isBoolean(value);
+        case 'null':
+            return !hasValue(value);
+        default:
+            console.error(`isType error: "${type}" is not a recognized type.`);
+            return null;
     }
-    return returnItems;
 }
 /**
- * 'commonItems' function
+ * 'isPrimitive' function
  *
- * Accepts any number of strings or arrays of string values,
- * and returns a single array containing only values present in all inputs.
+ * Checks wether an input value is a JavaScript primitive type:
+ * string, number, boolean, or null.
  *
- * // {...string|string[]} ...arrays -
- * // {string[]} -
+ * //   value - value to check
+ * // { boolean }
  */
-function commonItems(...arrays) {
-    let returnItems = null;
-    for (let array of arrays) {
-        if (isString(array)) {
-            array = [array];
-        }
-        returnItems = returnItems === null ? [...array] :
-            returnItems.filter(item => array.includes(item));
-        if (!returnItems.length) {
-            return [];
-        }
-    }
-    return returnItems;
+function isPrimitive(value) {
+    return (isString(value) || isNumber(value) ||
+        isBoolean(value, 'strict') || value === null);
 }
 /**
- * 'fixTitle' function
- *
  *
- * // {string} input -
- * // {string} -
+ * @param date
+ * @returns {string}
+ * exmaple:
+ * toDateString('2018-01-01') = '2018-01-01'
+ * toDateString('2018-01-30T00:00:00.000Z') = '2018-01-30'
  */
-function fixTitle(name) {
-    return name && toTitleCase(name.replace(/([a-z])([A-Z])/g, '$1 $2').replace(/_/g, ' '));
-}
+const toIsoString = (date) => {
+    const day = date.getDate();
+    const month = date.getMonth() + 1;
+    const year = date.getFullYear();
+    return `${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}`;
+};
 /**
- * 'toTitleCase' function
+ * 'toJavaScriptType' function
  *
- * Intelligently converts an input string to Title Case.
+ * Converts an input (probably string) value to a JavaScript primitive type -
+ * 'string', 'number', 'boolean', or 'null' - before storing in a JSON object.
  *
- * Accepts an optional second parameter with a list of additional
- * words and abbreviations to force into a particular case.
+ * Does not coerce values (other than null), and only converts the types
+ * of values that would otherwise be valid.
  *
- * This function is built on prior work by John Gruber and David Gouch:
- * http://daringfireball.net/2008/08/title_case_update
- * https://github.com/gouch/to-title-case
+ * If the optional third parameter 'strictIntegers' is TRUE, and the
+ * JSON Schema type 'integer' is specified, it also verifies the input value
+ * is an integer and, if it is, returns it as a JaveScript number.
+ * If 'strictIntegers' is FALSE (or not set) the type 'integer' is treated
+ * exactly the same as 'number', and allows decimals.
  *
- * // {string} input -
- * // {string|string[]} forceWords? -
- * // {string} -
+ * Valid Examples:
+ * toJavaScriptType('10',   'number' ) = 10   // '10'   is a number
+ * toJavaScriptType('10',   'integer') = 10   // '10'   is also an integer
+ * toJavaScriptType( 10,    'integer') = 10   //  10    is still an integer
+ * toJavaScriptType( 10,    'string' ) = '10' //  10    can be made into a string
+ * toJavaScriptType('10.5', 'number' ) = 10.5 // '10.5' is a number
+ *
+ * Invalid Examples:
+ * toJavaScriptType('10.5', 'integer') = null // '10.5' is not an integer
+ * toJavaScriptType( 10.5,  'integer') = null //  10.5  is still not an integer
+ *
+ * //  { PrimitiveValue } value - value to convert
+ * //  { SchemaPrimitiveType | SchemaPrimitiveType[] } types - types to convert to
+ * //  { boolean = false } strictIntegers - if FALSE, treat integers as numbers
+ * // { PrimitiveValue }
  */
-function toTitleCase(input, forceWords) {
-    if (!isString(input)) {
-        return input;
+function toJavaScriptType(value, types, strictIntegers = true) {
+    if (!isDefined(value)) {
+        return null;
     }
-    let forceArray = ['a', 'an', 'and', 'as', 'at', 'but', 'by', 'en',
-        'for', 'if', 'in', 'nor', 'of', 'on', 'or', 'per', 'the', 'to', 'v', 'v.',
-        'vs', 'vs.', 'via'];
-    if (isString(forceWords)) {
-        forceWords = forceWords.split('|');
+    if (isString(types)) {
+        types = [types];
     }
-    if (isArray(forceWords)) {
-        forceArray = forceArray.concat(forceWords);
+    if (strictIntegers && inArray('integer', types)) {
+        if (isInteger(value, 'strict')) {
+            return value;
+        }
+        if (isInteger(value)) {
+            return parseInt(value, 10);
+        }
     }
-    const forceArrayLower = forceArray.map(w => w.toLowerCase());
-    const noInitialCase = input === input.toUpperCase() || input === input.toLowerCase();
-    let prevLastChar = '';
-    input = input.trim();
-    return input.replace(/[A-Za-z0-9\u00C0-\u00FF]+[^\s-]*/g, (word, idx) => {
-        if (!noInitialCase && word.slice(1).search(/[A-Z]|\../) !== -1) {
-            return word;
+    if (inArray('number', types) || (!strictIntegers && inArray('integer', types))) {
+        if (isNumber(value, 'strict')) {
+            return value;
         }
-        else {
-            let newWord;
-            const forceWord = forceArray[forceArrayLower.indexOf(word.toLowerCase())];
-            if (!forceWord) {
-                if (noInitialCase) {
-                    if (word.slice(1).search(/\../) !== -1) {
-                        newWord = word.toLowerCase();
-                    }
-                    else {
-                        newWord = word[0].toUpperCase() + word.slice(1).toLowerCase();
-                    }
-                }
-                else {
-                    newWord = word[0].toUpperCase() + word.slice(1);
-                }
-            }
-            else if (forceWord === forceWord.toLowerCase() && (idx === 0 || idx + word.length === input.length ||
-                prevLastChar === ':' || input[idx - 1].search(/[^\s-]/) !== -1 ||
-                (input[idx - 1] !== '-' && input[idx + word.length] === '-'))) {
-                newWord = forceWord[0].toUpperCase() + forceWord.slice(1);
-            }
-            else {
-                newWord = forceWord;
-            }
-            prevLastChar = word.slice(-1);
-            return newWord;
+        if (isNumber(value)) {
+            return parseFloat(value);
         }
-    });
-}
-
-const deValidationMessages = {
-    required: 'Darf nicht leer sein',
-    minLength: 'Mindestens {{minimumLength}} Zeichen benötigt (aktuell: {{currentLength}})',
-    maxLength: 'Maximal {{maximumLength}} Zeichen erlaubt (aktuell: {{currentLength}})',
-    pattern: 'Entspricht nicht diesem regulären Ausdruck: {{requiredPattern}}',
-    format: function (error) {
-        switch (error.requiredFormat) {
-            case 'date':
-                return 'Muss ein Datum sein, z. B. "2000-12-31"';
-            case 'time':
-                return 'Muss eine Zeitangabe sein, z. B. "16:20" oder "03:14:15.9265"';
-            case 'date-time':
-                return 'Muss Datum mit Zeit beinhalten, z. B. "2000-03-14T01:59" oder "2000-03-14T01:59:26.535Z"';
-            case 'email':
-                return 'Keine gültige E-Mail-Adresse (z. B. "name@example.com")';
-            case 'hostname':
-                return 'Kein gültiger Hostname (z. B. "example.com")';
-            case 'ipv4':
-                return 'Keine gültige IPv4-Adresse (z. B. "127.0.0.1")';
-            case 'ipv6':
-                return 'Keine gültige IPv6-Adresse (z. B. "1234:5678:9ABC:DEF0:1234:5678:9ABC:DEF0")';
-            // TODO: add examples for 'uri', 'uri-reference', and 'uri-template'
-            // case 'uri': case 'uri-reference': case 'uri-template':
-            case 'url':
-                return 'Keine gültige URL (z. B. "http://www.example.com/page.html")';
-            case 'uuid':
-                return 'Keine gültige UUID (z. B. "12345678-9ABC-DEF0-1234-56789ABCDEF0")';
-            case 'color':
-                return 'Kein gültiger Farbwert (z. B. "#FFFFFF" oder "rgb(255, 255, 255)")';
-            case 'json-pointer':
-                return 'Kein gültiger JSON-Pointer (z. B. "/pointer/to/something")';
-            case 'relative-json-pointer':
-                return 'Kein gültiger relativer JSON-Pointer (z. B. "2/pointer/to/something")';
-            case 'regex':
-                return 'Kein gültiger regulärer Ausdruck (z. B. "(1-)?\\d{3}-\\d{3}-\\d{4}")';
-            default:
-                return 'Muss diesem Format entsprechen: ' + error.requiredFormat;
-        }
-    },
-    minimum: 'Muss mindestens {{minimumValue}} sein',
-    exclusiveMinimum: 'Muss größer als {{exclusiveMinimumValue}} sein',
-    maximum: 'Darf maximal {{maximumValue}} sein',
-    exclusiveMaximum: 'Muss kleiner als {{exclusiveMaximumValue}} sein',
-    multipleOf: function (error) {
-        if ((1 / error.multipleOfValue) % 10 === 0) {
-            const decimals = Math.log10(1 / error.multipleOfValue);
-            return `Maximal ${decimals} Dezimalstellen erlaubt`;
-        }
-        else {
-            return `Muss ein Vielfaches von ${error.multipleOfValue} sein`;
+    }
+    if (inArray('string', types)) {
+        if (isString(value)) {
+            return value;
         }
-    },
-    minProperties: 'Mindestens {{minimumProperties}} Attribute erforderlich (aktuell: {{currentProperties}})',
-    maxProperties: 'Maximal {{maximumProperties}} Attribute erlaubt (aktuell: {{currentProperties}})',
-    minItems: 'Mindestens {{minimumItems}} Werte erforderlich (aktuell: {{currentItems}})',
-    maxItems: 'Maximal {{maximumItems}} Werte erlaubt (aktuell: {{currentItems}})',
-    uniqueItems: 'Alle Werte müssen eindeutig sein',
-    // Note: No default error messages for 'type', 'const', 'enum', or 'dependencies'
-};
-
-const enValidationMessages = {
-    required: 'This field is required.',
-    minLength: 'Must be {{minimumLength}} characters or longer (current length: {{currentLength}})',
-    maxLength: 'Must be {{maximumLength}} characters or shorter (current length: {{currentLength}})',
-    pattern: 'Must match pattern: {{requiredPattern}}',
-    format: function (error) {
-        switch (error.requiredFormat) {
-            case 'date':
-                return 'Must be a date, like "2000-12-31"';
-            case 'time':
-                return 'Must be a time, like "16:20" or "03:14:15.9265"';
-            case 'date-time':
-                return 'Must be a date-time, like "2000-03-14T01:59" or "2000-03-14T01:59:26.535Z"';
-            case 'email':
-                return 'Must be an email address, like "name@example.com"';
-            case 'hostname':
-                return 'Must be a hostname, like "example.com"';
-            case 'ipv4':
-                return 'Must be an IPv4 address, like "127.0.0.1"';
-            case 'ipv6':
-                return 'Must be an IPv6 address, like "1234:5678:9ABC:DEF0:1234:5678:9ABC:DEF0"';
-            // TODO: add examples for 'uri', 'uri-reference', and 'uri-template'
-            // case 'uri': case 'uri-reference': case 'uri-template':
-            case 'url':
-                return 'Must be a url, like "http://www.example.com/page.html"';
-            case 'uuid':
-                return 'Must be a uuid, like "12345678-9ABC-DEF0-1234-56789ABCDEF0"';
-            case 'color':
-                return 'Must be a color, like "#FFFFFF" or "rgb(255, 255, 255)"';
-            case 'json-pointer':
-                return 'Must be a JSON Pointer, like "/pointer/to/something"';
-            case 'relative-json-pointer':
-                return 'Must be a relative JSON Pointer, like "2/pointer/to/something"';
-            case 'regex':
-                return 'Must be a regular expression, like "(1-)?\\d{3}-\\d{3}-\\d{4}"';
-            default:
-                return 'Must be a correctly formatted ' + error.requiredFormat;
+        // If value is a date, and types includes 'string',
+        // convert the date to a string
+        if (isDate(value)) {
+            return toIsoString(value);
         }
-    },
-    minimum: 'Must be {{minimumValue}} or more',
-    exclusiveMinimum: 'Must be more than {{exclusiveMinimumValue}}',
-    maximum: 'Must be {{maximumValue}} or less',
-    exclusiveMaximum: 'Must be less than {{exclusiveMaximumValue}}',
-    multipleOf: function (error) {
-        if ((1 / error.multipleOfValue) % 10 === 0) {
-            const decimals = Math.log10(1 / error.multipleOfValue);
-            return `Must have ${decimals} or fewer decimal places.`;
+        if (isNumber(value)) {
+            return value.toString();
         }
-        else {
-            return `Must be a multiple of ${error.multipleOfValue}.`;
+    }
+    // If value is a date, and types includes 'integer' or 'number',
+    // but not 'string', convert the date to a number
+    if (isDate(value) && (inArray('integer', types) || inArray('number', types))) {
+        return value.getTime();
+    }
+    if (inArray('boolean', types)) {
+        if (isBoolean(value, true)) {
+            return true;
         }
-    },
-    minProperties: 'Must have {{minimumProperties}} or more items (current items: {{currentProperties}})',
-    maxProperties: 'Must have {{maximumProperties}} or fewer items (current items: {{currentProperties}})',
-    minItems: 'Must have {{minimumItems}} or more items (current items: {{currentItems}})',
-    maxItems: 'Must have {{maximumItems}} or fewer items (current items: {{currentItems}})',
-    uniqueItems: 'All items must be unique',
-    // Note: No default error messages for 'type', 'const', 'enum', or 'dependencies'
-};
-
-const esValidationMessages = {
-    required: 'Este campo está requerido.',
-    minLength: 'Debe tener {{minimumLength}} caracteres o más longitud (longitud actual: {{currentLength}})',
-    maxLength: 'Debe tener {{maximumLength}} caracteres o menos longitud (longitud actual: {{currentLength}})',
-    pattern: 'Must match pattern: {{requiredPattern}}',
-    format: function (error) {
-        switch (error.requiredFormat) {
-            case 'date':
-                return 'Debe tener una fecha, ej "2000-12-31"';
-            case 'time':
-                return 'Debe tener una hora, ej "16:20" o "03:14:15.9265"';
-            case 'date-time':
-                return 'Debe tener fecha y hora, ej "2000-03-14T01:59" o "2000-03-14T01:59:26.535Z"';
-            case 'email':
-                return 'No hay dirección de correo electrónico válida, ej "name@example.com"';
-            case 'hostname':
-                return 'Debe ser un nombre de host válido, ej "example.com"';
-            case 'ipv4':
-                return 'Debe ser una dirección de IPv4, ej "127.0.0.1"';
-            case 'ipv6':
-                return 'Debe ser una dirección de IPv6, ej "1234:5678:9ABC:DEF0:1234:5678:9ABC:DEF0"';
-            case 'url':
-                return 'Debe ser una URL, ej "http://www.example.com/page.html"';
-            case 'uuid':
-                return 'Debe ser un UUID, ej "12345678-9ABC-DEF0-1234-56789ABCDEF0"';
-            case 'color':
-                return 'Debe ser un color, ej "#FFFFFF" or "rgb(255, 255, 255)"';
-            case 'json-pointer':
-                return 'Debe ser un JSON Pointer, ej "/pointer/to/something"';
-            case 'relative-json-pointer':
-                return 'Debe ser un JSON Pointer relativo, ej "2/pointer/to/something"';
-            case 'regex':
-                return 'Debe ser una expresión regular, ej "(1-)?\\d{3}-\\d{3}-\\d{4}"';
-            default:
-                return 'Debe tener el formato correcto ' + error.requiredFormat;
+        if (isBoolean(value, false)) {
+            return false;
         }
-    },
-    minimum: 'Debe ser {{minimumValue}} o más',
-    exclusiveMinimum: 'Debe ser superior a {{exclusiveMinimumValue}}',
-    maximum: 'Debe ser {{maximumValue}} o menos',
-    exclusiveMaximum: 'Debe ser menor que {{exclusiveMaximumValue}}',
-    multipleOf: function (error) {
-        if ((1 / error.multipleOfValue) % 10 === 0) {
-            const decimals = Math.log10(1 / error.multipleOfValue);
-            return `Se permite un máximo de ${decimals} decimales`;
+    }
+    return null;
+}
+/**
+ * 'toSchemaType' function
+ *
+ * Converts an input (probably string) value to the "best" JavaScript
+ * equivalent available from an allowed list of JSON Schema types, which may
+ * contain 'string', 'number', 'integer', 'boolean', and/or 'null'.
+ * If necssary, it does progressively agressive type coersion.
+ * It will not return null unless null is in the list of allowed types.
+ *
+ * Number conversion examples:
+ * toSchemaType('10', ['number','integer','string']) = 10 // integer
+ * toSchemaType('10', ['number','string']) = 10 // number
+ * toSchemaType('10', ['string']) = '10' // string
+ * toSchemaType('10.5', ['number','integer','string']) = 10.5 // number
+ * toSchemaType('10.5', ['integer','string']) = '10.5' // string
+ * toSchemaType('10.5', ['integer']) = 10 // integer
+ * toSchemaType(10.5, ['null','boolean','string']) = '10.5' // string
+ * toSchemaType(10.5, ['null','boolean']) = true // boolean
+ *
+ * String conversion examples:
+ * toSchemaType('1.5x', ['boolean','number','integer','string']) = '1.5x' // string
+ * toSchemaType('1.5x', ['boolean','number','integer']) = '1.5' // number
+ * toSchemaType('1.5x', ['boolean','integer']) = '1' // integer
+ * toSchemaType('1.5x', ['boolean']) = true // boolean
+ * toSchemaType('xyz', ['number','integer','boolean','null']) = true // boolean
+ * toSchemaType('xyz', ['number','integer','null']) = null // null
+ * toSchemaType('xyz', ['number','integer']) = 0 // number
+ *
+ * Boolean conversion examples:
+ * toSchemaType('1', ['integer','number','string','boolean']) = 1 // integer
+ * toSchemaType('1', ['number','string','boolean']) = 1 // number
+ * toSchemaType('1', ['string','boolean']) = '1' // string
+ * toSchemaType('1', ['boolean']) = true // boolean
+ * toSchemaType('true', ['number','string','boolean']) = 'true' // string
+ * toSchemaType('true', ['boolean']) = true // boolean
+ * toSchemaType('true', ['number']) = 0 // number
+ * toSchemaType(true, ['number','string','boolean']) = true // boolean
+ * toSchemaType(true, ['number','string']) = 'true' // string
+ * toSchemaType(true, ['number']) = 1 // number
+ *
+ * //  { PrimitiveValue } value - value to convert
+ * //  { SchemaPrimitiveType | SchemaPrimitiveType[] } types - allowed types to convert to
+ * // { PrimitiveValue }
+ */
+function toSchemaType(value, types) {
+    if (!isArray(types)) {
+        types = [types];
+    }
+    if (types.includes('null') && !hasValue(value)) {
+        return null;
+    }
+    if (types.includes('boolean') && !isBoolean(value, 'strict')) {
+        return value;
+    }
+    if (types.includes('integer')) {
+        const testValue = toJavaScriptType(value, 'integer');
+        if (testValue !== null) {
+            return +testValue;
         }
-        else {
-            return `Debe ser múltiplo de ${error.multipleOfValue}.`;
+    }
+    if (types.includes('number')) {
+        const testValue = toJavaScriptType(value, 'number');
+        if (testValue !== null) {
+            return +testValue;
         }
-    },
-    minProperties: 'Debe tener {{minimumProperties}} o más elementos (elementos actuales: {{currentProperties}})',
-    maxProperties: 'Debe tener {{maximumProperties}} o menos elementos (elementos actuales: {{currentProperties}})',
-    minItems: 'Debe tener {{minimumItems}} o más elementos (elementos actuales: {{currentItems}})',
-    maxItems: 'Debe tener {{maximumItems}} o menos elementos (elementos actuales: {{currentItems}})',
-    uniqueItems: 'Todos los elementos deben ser únicos',
-};
-
-const frValidationMessages = {
-    required: 'Est obligatoire.',
-    minLength: 'Doit avoir minimum {{minimumLength}} caractères (actuellement: {{currentLength}})',
-    maxLength: 'Doit avoir maximum {{maximumLength}} caractères (actuellement: {{currentLength}})',
-    pattern: 'Doit respecter: {{requiredPattern}}',
-    format: function (error) {
-        switch (error.requiredFormat) {
-            case 'date':
-                return 'Doit être une date, tel que "2000-12-31"';
-            case 'time':
-                return 'Doit être une heure, tel que "16:20" ou "03:14:15.9265"';
-            case 'date-time':
-                return 'Doit être une date et une heure, tel que "2000-03-14T01:59" ou "2000-03-14T01:59:26.535Z"';
-            case 'email':
-                return 'Doit être une adresse e-mail, tel que "name@example.com"';
-            case 'hostname':
-                return 'Doit être un nom de domaine, tel que "example.com"';
-            case 'ipv4':
-                return 'Doit être une adresse IPv4, tel que "127.0.0.1"';
-            case 'ipv6':
-                return 'Doit être une adresse IPv6, tel que "1234:5678:9ABC:DEF0:1234:5678:9ABC:DEF0"';
-            // TODO: add examples for 'uri', 'uri-reference', and 'uri-template'
-            // case 'uri': case 'uri-reference': case 'uri-template':
-            case 'url':
-                return 'Doit être une URL, tel que "http://www.example.com/page.html"';
-            case 'uuid':
-                return 'Doit être un UUID, tel que "12345678-9ABC-DEF0-1234-56789ABCDEF0"';
-            case 'color':
-                return 'Doit être une couleur, tel que "#FFFFFF" or "rgb(255, 255, 255)"';
-            case 'json-pointer':
-                return 'Doit être un JSON Pointer, tel que "/pointer/to/something"';
-            case 'relative-json-pointer':
-                return 'Doit être un relative JSON Pointer, tel que "2/pointer/to/something"';
-            case 'regex':
-                return 'Doit être une expression régulière, tel que "(1-)?\\d{3}-\\d{3}-\\d{4}"';
-            default:
-                return 'Doit être avoir le format correct: ' + error.requiredFormat;
-        }
-    },
-    minimum: 'Doit être supérieur à {{minimumValue}}',
-    exclusiveMinimum: 'Doit avoir minimum {{exclusiveMinimumValue}} charactères',
-    maximum: 'Doit être inférieur à {{maximumValue}}',
-    exclusiveMaximum: 'Doit avoir maximum {{exclusiveMaximumValue}} charactères',
-    multipleOf: function (error) {
-        if ((1 / error.multipleOfValue) % 10 === 0) {
-            const decimals = Math.log10(1 / error.multipleOfValue);
-            return `Doit comporter ${decimals} ou moins de decimales.`;
+    }
+    if ((isString(value) || isNumber(value, 'strict')) &&
+        types.includes('string')) { // Convert number to string
+        return toJavaScriptType(value, 'string');
+    }
+    if (types.includes('boolean') && isBoolean(value)) {
+        return toJavaScriptType(value, 'boolean');
+    }
+    if (types.includes('string')) { // Convert null & boolean to string
+        if (value === null) {
+            return '';
         }
-        else {
-            return `Doit être un multiple de ${error.multipleOfValue}.`;
+        const testValue = toJavaScriptType(value, 'string');
+        if (testValue !== null) {
+            return testValue;
         }
-    },
-    minProperties: 'Doit comporter au minimum {{minimumProperties}} éléments',
-    maxProperties: 'Doit comporter au maximum {{maximumProperties}} éléments',
-    minItems: 'Doit comporter au minimum {{minimumItems}} éléments',
-    maxItems: 'Doit comporter au maximum {{minimumItems}} éléments',
-    uniqueItems: 'Tous les éléments doivent être uniques',
-    // Note: No default error messages for 'type', 'const', 'enum', or 'dependencies'
-};
-
-const itValidationMessages = {
-    required: 'Il campo è obbligatorio',
-    minLength: 'Deve inserire almeno {{minimumLength}} caratteri (lunghezza corrente: {{currentLength}})',
-    maxLength: 'Il numero massimo di caratteri consentito è {{maximumLength}} (lunghezza corrente: {{currentLength}})',
-    pattern: 'Devi rispettare il pattern : {{requiredPattern}}',
-    format: function (error) {
-        switch (error.requiredFormat) {
-            case 'date':
-                return 'Deve essere una data, come "31-12-2000"';
-            case 'time':
-                return 'Deve essere un orario, come "16:20" o "03:14:15.9265"';
-            case 'date-time':
-                return 'Deve essere data-orario, come "14-03-2000T01:59" or "14-03-2000T01:59:26.535Z"';
-            case 'email':
-                return 'Deve essere un indirzzo email, come "name@example.com"';
-            case 'hostname':
-                return 'Deve essere un hostname, come "example.com"';
-            case 'ipv4':
-                return 'Deve essere un indirizzo IPv4, come "127.0.0.1"';
-            case 'ipv6':
-                return 'Deve essere un indirizzo IPv6, come "1234:5678:9ABC:DEF0:1234:5678:9ABC:DEF0"';
-            // TODO: add examples for 'uri', 'uri-reference', and 'uri-template'
-            // case 'uri': case 'uri-reference': case 'uri-template':
-            case 'url':
-                return 'Deve essere un url, come "http://www.example.com/page.html"';
-            case 'uuid':
-                return 'Deve essere un uuid, come "12345678-9ABC-DEF0-1234-56789ABCDEF0"';
-            case 'color':
-                return 'Deve essere un colore, come "#FFFFFF" o "rgb(255, 255, 255)"';
-            case 'json-pointer':
-                return 'Deve essere un JSON Pointer, come "/pointer/to/something"';
-            case 'relative-json-pointer':
-                return 'Deve essere un JSON Pointer relativo, come "2/pointer/to/something"';
-            case 'regex':
-                return 'Deve essere una regular expression, come "(1-)?\\d{3}-\\d{3}-\\d{4}"';
-            default:
-                return 'Deve essere formattato correttamente ' + error.requiredFormat;
+    }
+    if ((types.includes('number') ||
+        types.includes('integer'))) {
+        if (value === true) {
+            return 1;
+        } // Convert boolean & null to number
+        if (value === false || value === null || value === '') {
+            return 0;
         }
-    },
-    minimum: 'Deve essere {{minimumValue}} o più',
-    exclusiveMinimum: 'Deve essere più di {{exclusiveMinimumValue}}',
-    maximum: 'Deve essere {{maximumValue}} o meno',
-    exclusiveMaximum: 'Deve essere minore di {{exclusiveMaximumValue}}',
-    multipleOf: function (error) {
-        if ((1 / error.multipleOfValue) % 10 === 0) {
-            const decimals = Math.log10(1 / error.multipleOfValue);
-            return `Deve avere ${decimals} o meno decimali.`;
+    }
+    if (types.includes('number')) { // Convert mixed string to number
+        const testValue = parseFloat(value);
+        if (!!testValue) {
+            return testValue;
         }
-        else {
-            return `Deve essere multiplo di ${error.multipleOfValue}.`;
+    }
+    if (types.includes('integer')) { // Convert string or number to integer
+        const testValue = parseInt(value, 10);
+        if (!!testValue) {
+            return testValue;
         }
-    },
-    minProperties: 'Deve avere {{minimumProperties}} o più elementi (elementi correnti: {{currentProperties}})',
-    maxProperties: 'Deve avere {{maximumProperties}} o meno elementi (elementi correnti: {{currentProperties}})',
-    minItems: 'Deve avere {{minimumItems}} o più elementi (elementi correnti: {{currentItems}})',
-    maxItems: 'Deve avere {{maximumItems}} o meno elementi (elementi correnti: {{currentItems}})',
-    uniqueItems: 'Tutti gli elementi devono essere unici',
-    // Note: No default error messages for 'type', 'const', 'enum', or 'dependencies'
-};
+    }
+    if (types.includes('boolean')) { // Convert anything to boolean
+        return !!value;
+    }
+    if ((types.includes('number') ||
+        types.includes('integer')) && !types.includes('null')) {
+        return 0; // If null not allowed, return 0 for non-convertable values
+    }
+}
+/**
+ * 'isPromise' function
+ *
+ * //   object
+ * // { boolean }
+ */
+function isPromise(object) {
+    return !!object && typeof object.then === 'function';
+}
+/**
+ * 'isObservable' function
+ *
+ * //   object
+ * // { boolean }
+ */
+function isObservable(object) {
+    return !!object && typeof object.subscribe === 'function';
+}
+/**
+ * '_toPromise' function
+ *
+ * //  { object } object
+ * // { Promise<any> }
+ */
+function _toPromise(object) {
+    return isPromise(object) ? object : object.toPromise();
+}
+/**
+ * 'toObservable' function
+ *
+ * //  { object } object
+ * // { Observable<any> }
+ */
+function toObservable(object) {
+    const observable = isPromise(object) ? from(object) : object;
+    if (isObservable(observable)) {
+        return observable;
+    }
+    console.error('toObservable error: Expected validator to return Promise or Observable.');
+    return new Observable();
+}
+/**
+ * 'inArray' function
+ *
+ * Searches an array for an item, or one of a list of items, and returns true
+ * as soon as a match is found, or false if no match.
+ *
+ * If the optional third parameter allIn is set to TRUE, and the item to find
+ * is an array, then the function returns true only if all elements from item
+ * are found in the array list, and false if any element is not found. If the
+ * item to find is not an array, setting allIn to TRUE has no effect.
+ *
+ * //  { any|any[] } item - the item to search for
+ * //   array - the array to search
+ * //  { boolean = false } allIn - if TRUE, all items must be in array
+ * // { boolean } - true if item(s) in array, false otherwise
+ */
+function inArray(item, array, allIn = false) {
+    if (!isDefined(item) || !isArray(array)) {
+        return false;
+    }
+    return isArray(item) ?
+        item[allIn ? 'every' : 'some'](subItem => array.includes(subItem)) :
+        array.includes(item);
+}
+/**
+ * 'xor' utility function - exclusive or
+ *
+ * Returns true if exactly one of two values is truthy.
+ *
+ * //   value1 - first value to check
+ * //   value2 - second value to check
+ * // { boolean } - true if exactly one input value is truthy, false if not
+ */
+function xor(value1, value2) {
+    return (!!value1 && !value2) || (!value1 && !!value2);
+}
 
-const ptValidationMessages = {
-    required: 'Este campo é obrigatório.',
-    minLength: 'É preciso no mínimo {{minimumLength}} caracteres ou mais (tamanho atual: {{currentLength}})',
-    maxLength: 'É preciso no máximo  {{maximumLength}} caracteres ou menos (tamanho atual: {{currentLength}})',
-    pattern: 'Tem que ajustar ao formato: {{requiredPattern}}',
-    format: function (error) {
-        switch (error.requiredFormat) {
-            case 'date':
-                return 'Tem que ser uma data, por exemplo "2000-12-31"';
-            case 'time':
-                return 'Tem que ser horário, por exemplo "16:20" ou "03:14:15.9265"';
-            case 'date-time':
-                return 'Tem que ser data e hora, por exemplo "2000-03-14T01:59" ou "2000-03-14T01:59:26.535Z"';
-            case 'email':
-                return 'Tem que ser um email, por exemplo "fulano@exemplo.com.br"';
-            case 'hostname':
-                return 'Tem que ser uma nome de domínio, por exemplo "exemplo.com.br"';
-            case 'ipv4':
-                return 'Tem que ser um endereço IPv4, por exemplo "127.0.0.1"';
-            case 'ipv6':
-                return 'Tem que ser um endereço IPv6, por exemplo "1234:5678:9ABC:DEF0:1234:5678:9ABC:DEF0"';
-            // TODO: add examples for 'uri', 'uri-reference', and 'uri-template'
-            // case 'uri': case 'uri-reference': case 'uri-template':
-            case 'url':
-                return 'Tem que ser uma URL, por exemplo "http://www.exemplo.com.br/pagina.html"';
-            case 'uuid':
-                return 'Tem que ser um uuid, por exemplo "12345678-9ABC-DEF0-1234-56789ABCDEF0"';
-            case 'color':
-                return 'Tem que ser uma cor, por exemplo "#FFFFFF" ou "rgb(255, 255, 255)"';
-            case 'json-pointer':
-                return 'Tem que ser um JSON Pointer, por exemplo "/referencia/para/algo"';
-            case 'relative-json-pointer':
-                return 'Tem que ser um JSON Pointer relativo, por exemplo "2/referencia/para/algo"';
-            case 'regex':
-                return 'Tem que ser uma expressão regular, por exemplo "(1-)?\\d{3}-\\d{3}-\\d{4}"';
-            default:
-                return 'Tem que ser no formato: ' + error.requiredFormat;
+/**
+ * Utility function library:
+ *
+ * addClasses, copy, forEach, forEachCopy, hasOwn, mergeFilteredObject,
+ * uniqueItems, commonItems, fixTitle, toTitleCase
+*/
+/**
+ * 'addClasses' function
+ *
+ * Merges two space-delimited lists of CSS classes and removes duplicates.
+ *
+ * // {string | string[] | Set<string>} oldClasses
+ * // {string | string[] | Set<string>} newClasses
+ * // {string | string[] | Set<string>} - Combined classes
+ */
+function addClasses(oldClasses, newClasses) {
+    const badType = i => !isSet(i) && !isArray(i) && !isString(i);
+    if (badType(newClasses)) {
+        return oldClasses;
+    }
+    if (badType(oldClasses)) {
+        oldClasses = '';
+    }
+    const toSet = i => isSet(i) ? i : isArray(i) ? new Set(i) : new Set(i.split(' '));
+    const combinedSet = toSet(oldClasses);
+    const newSet = toSet(newClasses);
+    newSet.forEach(c => combinedSet.add(c));
+    if (isSet(oldClasses)) {
+        return combinedSet;
+    }
+    if (isArray(oldClasses)) {
+        return Array.from(combinedSet);
+    }
+    return Array.from(combinedSet).join(' ');
+}
+/**
+ * 'copy' function
+ *
+ * Makes a shallow copy of a JavaScript object, array, Map, or Set.
+ * If passed a JavaScript primitive value (string, number, boolean, or null),
+ * it returns the value.
+ *
+ * // {Object|Array|string|number|boolean|null} object - The object to copy
+ * // {boolean = false} errors - Show errors?
+ * // {Object|Array|string|number|boolean|null} - The copied object
+ */
+function copy(object, errors = false) {
+    if (typeof object !== 'object' || object === null) {
+        return object;
+    }
+    if (isMap(object)) {
+        return new Map(object);
+    }
+    if (isSet(object)) {
+        return new Set(object);
+    }
+    if (isArray(object)) {
+        return [...object];
+    }
+    if (isObject(object)) {
+        return { ...object };
+    }
+    if (errors) {
+        console.error('copy error: Object to copy must be a JavaScript object or value.');
+    }
+    return object;
+}
+/**
+ * 'forEach' function
+ *
+ * Iterates over all items in the first level of an object or array
+ * and calls an iterator funciton on each item.
+ *
+ * The iterator function is called with four values:
+ * 1. The current item's value
+ * 2. The current item's key
+ * 3. The parent object, which contains the current item
+ * 4. The root object
+ *
+ * Setting the optional third parameter to 'top-down' or 'bottom-up' will cause
+ * it to also recursively iterate over items in sub-objects or sub-arrays in the
+ * specified direction.
+ *
+ * // {Object|Array} object - The object or array to iterate over
+ * // {function} fn - the iterator funciton to call on each item
+ * // {boolean = false} errors - Show errors?
+ * // {void}
+ */
+function forEach(object, fn, recurse = false, rootObject = object, errors = false) {
+    if (isEmpty(object)) {
+        return;
+    }
+    if ((isObject(object) || isArray(object)) && typeof fn === 'function') {
+        for (const key of Object.keys(object)) {
+            const value = object[key];
+            if (recurse === 'bottom-up' && (isObject(value) || isArray(value))) {
+                forEach(value, fn, recurse, rootObject);
+            }
+            fn(value, key, object, rootObject);
+            if (recurse === 'top-down' && (isObject(value) || isArray(value))) {
+                forEach(value, fn, recurse, rootObject);
+            }
         }
-    },
-    minimum: 'Tem que ser {{minimumValue}} ou mais',
-    exclusiveMinimum: 'Tem que ser mais que {{exclusiveMinimumValue}}',
-    maximum: 'Tem que ser {{maximumValue}} ou menos',
-    exclusiveMaximum: 'Tem que ser menor que {{exclusiveMaximumValue}}',
-    multipleOf: function (error) {
-        if ((1 / error.multipleOfValue) % 10 === 0) {
-            const decimals = Math.log10(1 / error.multipleOfValue);
-            return `Tem que ter ${decimals} ou menos casas decimais.`;
+    }
+    if (errors) {
+        if (typeof fn !== 'function') {
+            console.error('forEach error: Iterator must be a function.');
+            console.error('function', fn);
         }
-        else {
-            return `Tem que ser um múltiplo de ${error.multipleOfValue}.`;
+        if (!isObject(object) && !isArray(object)) {
+            console.error('forEach error: Input object must be an object or array.');
+            console.error('object', object);
         }
-    },
-    minProperties: 'Deve ter {{minimumProperties}} ou mais itens (itens até o momento: {{currentProperties}})',
-    maxProperties: 'Deve ter {{maximumProperties}} ou menos intens (itens até o momento: {{currentProperties}})',
-    minItems: 'Deve ter {{minimumItems}} ou mais itens (itens até o momento: {{currentItems}})',
-    maxItems: 'Deve ter {{maximumItems}} ou menos itens (itens até o momento: {{currentItems}})',
-    uniqueItems: 'Todos os itens devem ser únicos',
-    // Note: No default error messages for 'type', 'const', 'enum', or 'dependencies'
-};
-
-const zhValidationMessages = {
-    required: '必填字段.',
-    minLength: '字符长度必须大于或者等于 {{minimumLength}} (当前长度: {{currentLength}})',
-    maxLength: '字符长度必须小于或者等于 {{maximumLength}} (当前长度: {{currentLength}})',
-    pattern: '必须匹配正则表达式: {{requiredPattern}}',
-    format: function (error) {
-        switch (error.requiredFormat) {
-            case 'date':
-                return '必须为日期格式, 比如 "2000-12-31"';
-            case 'time':
-                return '必须为时间格式, 比如 "16:20" 或者 "03:14:15.9265"';
-            case 'date-time':
-                return '必须为日期时间格式, 比如 "2000-03-14T01:59" 或者 "2000-03-14T01:59:26.535Z"';
-            case 'email':
-                return '必须为邮箱地址, 比如 "name@example.com"';
-            case 'hostname':
-                return '必须为主机名, 比如 "example.com"';
-            case 'ipv4':
-                return '必须为 IPv4 地址, 比如 "127.0.0.1"';
-            case 'ipv6':
-                return '必须为 IPv6 地址, 比如 "1234:5678:9ABC:DEF0:1234:5678:9ABC:DEF0"';
-            // TODO: add examples for 'uri', 'uri-reference', and 'uri-template'
-            // case 'uri': case 'uri-reference': case 'uri-template':
-            case 'url':
-                return '必须为 url, 比如 "http://www.example.com/page.html"';
-            case 'uuid':
-                return '必须为 uuid, 比如 "12345678-9ABC-DEF0-1234-56789ABCDEF0"';
-            case 'color':
-                return '必须为颜色值, 比如 "#FFFFFF" 或者 "rgb(255, 255, 255)"';
-            case 'json-pointer':
-                return '必须为 JSON Pointer, 比如 "/pointer/to/something"';
-            case 'relative-json-pointer':
-                return '必须为相对的 JSON Pointer, 比如 "2/pointer/to/something"';
-            case 'regex':
-                return '必须为正则表达式, 比如 "(1-)?\\d{3}-\\d{3}-\\d{4}"';
-            default:
-                return '必须为格式正确的 ' + error.requiredFormat;
+    }
+}
+/**
+ * 'forEachCopy' function
+ *
+ * Iterates over all items in the first level of an object or array
+ * and calls an iterator function on each item. Returns a new object or array
+ * with the same keys or indexes as the original, and values set to the results
+ * of the iterator function.
+ *
+ * Does NOT recursively iterate over items in sub-objects or sub-arrays.
+ *
+ * // {Object | Array} object - The object or array to iterate over
+ * // {function} fn - The iterator funciton to call on each item
+ * // {boolean = false} errors - Show errors?
+ * // {Object | Array} - The resulting object or array
+ */
+function forEachCopy(object, fn, errors = false) {
+    if (!hasValue(object)) {
+        return;
+    }
+    if ((isObject(object) || isArray(object)) && typeof object !== 'function') {
+        const newObject = isArray(object) ? [] : {};
+        for (const key of Object.keys(object)) {
+            newObject[key] = fn(object[key], key, object);
+        }
+        return newObject;
+    }
+    if (errors) {
+        if (typeof fn !== 'function') {
+            console.error('forEachCopy error: Iterator must be a function.');
+            console.error('function', fn);
+        }
+        if (!isObject(object) && !isArray(object)) {
+            console.error('forEachCopy error: Input object must be an object or array.');
+            console.error('object', object);
+        }
+    }
+}
+/**
+ * 'hasOwn' utility function
+ *
+ * Checks whether an object or array has a particular property.
+ *
+ * // {any} object - the object to check
+ * // {string} property - the property to look for
+ * // {boolean} - true if object has property, false if not
+ */
+function hasOwn(object, property) {
+    if (!object || !['number', 'string', 'symbol'].includes(typeof property) ||
+        (!isObject(object) && !isArray(object) && !isMap(object) && !isSet(object))) {
+        return false;
+    }
+    if (isMap(object) || isSet(object)) {
+        return object.has(property);
+    }
+    if (typeof property === 'number') {
+        if (isArray(object)) {
+            return object[property];
+        }
+        property = property + '';
+    }
+    return object.hasOwnProperty(property);
+}
+/**
+ * Types of possible expressions which the app is able to evaluate.
+ */
+var ExpressionType;
+(function (ExpressionType) {
+    ExpressionType[ExpressionType["EQUALS"] = 0] = "EQUALS";
+    ExpressionType[ExpressionType["NOT_EQUALS"] = 1] = "NOT_EQUALS";
+    ExpressionType[ExpressionType["NOT_AN_EXPRESSION"] = 2] = "NOT_AN_EXPRESSION";
+})(ExpressionType || (ExpressionType = {}));
+/**
+ * Detects the type of expression from the given candidate. `==` for equals,
+ * `!=` for not equals. If none of these are contained in the candidate, the candidate
+ * is not considered to be an expression at all and thus `NOT_AN_EXPRESSION` is returned.
+ * // {expressionCandidate} expressionCandidate - potential expression
+ */
+function getExpressionType(expressionCandidate) {
+    if (expressionCandidate.indexOf('==') !== -1) {
+        return ExpressionType.EQUALS;
+    }
+    if (expressionCandidate.toString().indexOf('!=') !== -1) {
+        return ExpressionType.NOT_EQUALS;
+    }
+    return ExpressionType.NOT_AN_EXPRESSION;
+}
+function isEqual(expressionType) {
+    return expressionType === ExpressionType.EQUALS;
+}
+function isNotEqual(expressionType) {
+    return expressionType === ExpressionType.NOT_EQUALS;
+}
+function isNotExpression(expressionType) {
+    return expressionType === ExpressionType.NOT_AN_EXPRESSION;
+}
+/**
+ * Splits the expression key by the expressionType on a pair of values
+ * before and after the equals or nor equals sign.
+ * // {expressionType} enum of an expression type
+ * // {key} the given key from a for loop iver all conditions
+ */
+function getKeyAndValueByExpressionType(expressionType, key) {
+    if (isEqual(expressionType)) {
+        return key.split('==', 2);
+    }
+    if (isNotEqual(expressionType)) {
+        return key.split('!=', 2);
+    }
+    return null;
+}
+function cleanValueOfQuotes(keyAndValue) {
+    if (keyAndValue.charAt(0) === '\'' && keyAndValue.charAt(keyAndValue.length - 1) === '\'') {
+        return keyAndValue.replace('\'', '').replace('\'', '');
+    }
+    return keyAndValue;
+}
+/**
+ * 'mergeFilteredObject' utility function
+ *
+ * Shallowly merges two objects, setting key and values from source object
+ * in target object, excluding specified keys.
+ *
+ * Optionally, it can also use functions to transform the key names and/or
+ * the values of the merging object.
+ *
+ * // {PlainObject} targetObject - Target object to add keys and values to
+ * // {PlainObject} sourceObject - Source object to copy keys and values from
+ * // {string[]} excludeKeys - Array of keys to exclude
+ * // {(string: string) => string = (k) => k} keyFn - Function to apply to keys
+ * // {(any: any) => any = (v) => v} valueFn - Function to apply to values
+ * // {PlainObject} - Returns targetObject
+ */
+function mergeFilteredObject(targetObject, sourceObject, excludeKeys = [], keyFn = (key) => key, valFn = (val) => val) {
+    if (!isObject(sourceObject)) {
+        return targetObject;
+    }
+    if (!isObject(targetObject)) {
+        targetObject = {};
+    }
+    for (const key of Object.keys(sourceObject)) {
+        if (!inArray(key, excludeKeys) && isDefined(sourceObject[key])) {
+            targetObject[keyFn(key)] = valFn(sourceObject[key]);
+        }
+    }
+    return targetObject;
+}
+/**
+ * 'uniqueItems' function
+ *
+ * Accepts any number of string value inputs,
+ * and returns an array of all input vaues, excluding duplicates.
+ *
+ * // {...string} ...items -
+ * // {string[]} -
+ */
+function uniqueItems(...items) {
+    const returnItems = [];
+    for (const item of items) {
+        if (!returnItems.includes(item)) {
+            returnItems.push(item);
         }
-    },
-    minimum: '必须大于或者等于最小值: {{minimumValue}}',
-    exclusiveMinimum: '必须大于最小值: {{exclusiveMinimumValue}}',
-    maximum: '必须小于或者等于最大值: {{maximumValue}}',
-    exclusiveMaximum: '必须小于最大值: {{exclusiveMaximumValue}}',
-    multipleOf: function (error) {
-        if ((1 / error.multipleOfValue) % 10 === 0) {
-            const decimals = Math.log10(1 / error.multipleOfValue);
-            return `必须有 ${decimals} 位或更少的小数位`;
+    }
+    return returnItems;
+}
+/**
+ * 'commonItems' function
+ *
+ * Accepts any number of strings or arrays of string values,
+ * and returns a single array containing only values present in all inputs.
+ *
+ * // {...string|string[]} ...arrays -
+ * // {string[]} -
+ */
+function commonItems(...arrays) {
+    let returnItems = null;
+    for (let array of arrays) {
+        if (isString(array)) {
+            array = [array];
+        }
+        returnItems = returnItems === null ? [...array] :
+            returnItems.filter(item => array.includes(item));
+        if (!returnItems.length) {
+            return [];
+        }
+    }
+    return returnItems;
+}
+/**
+ * 'fixTitle' function
+ *
+ *
+ * // {string} input -
+ * // {string} -
+ */
+function fixTitle(name) {
+    return name && toTitleCase(name.replace(/([a-z])([A-Z])/g, '$1 $2').replace(/_/g, ' '));
+}
+/**
+ * 'toTitleCase' function
+ *
+ * Intelligently converts an input string to Title Case.
+ *
+ * Accepts an optional second parameter with a list of additional
+ * words and abbreviations to force into a particular case.
+ *
+ * This function is built on prior work by John Gruber and David Gouch:
+ * http://daringfireball.net/2008/08/title_case_update
+ * https://github.com/gouch/to-title-case
+ *
+ * // {string} input -
+ * // {string|string[]} forceWords? -
+ * // {string} -
+ */
+function toTitleCase(input, forceWords) {
+    if (!isString(input)) {
+        return input;
+    }
+    let forceArray = ['a', 'an', 'and', 'as', 'at', 'but', 'by', 'en',
+        'for', 'if', 'in', 'nor', 'of', 'on', 'or', 'per', 'the', 'to', 'v', 'v.',
+        'vs', 'vs.', 'via'];
+    if (isString(forceWords)) {
+        forceWords = forceWords.split('|');
+    }
+    if (isArray(forceWords)) {
+        forceArray = forceArray.concat(forceWords);
+    }
+    const forceArrayLower = forceArray.map(w => w.toLowerCase());
+    const noInitialCase = input === input.toUpperCase() || input === input.toLowerCase();
+    let prevLastChar = '';
+    input = input.trim();
+    return input.replace(/[A-Za-z0-9\u00C0-\u00FF]+[^\s-]*/g, (word, idx) => {
+        if (!noInitialCase && word.slice(1).search(/[A-Z]|\../) !== -1) {
+            return word;
         }
         else {
-            return `必须为 ${error.multipleOfValue} 的倍数`;
+            let newWord;
+            const forceWord = forceArray[forceArrayLower.indexOf(word.toLowerCase())];
+            if (!forceWord) {
+                if (noInitialCase) {
+                    if (word.slice(1).search(/\../) !== -1) {
+                        newWord = word.toLowerCase();
+                    }
+                    else {
+                        newWord = word[0].toUpperCase() + word.slice(1).toLowerCase();
+                    }
+                }
+                else {
+                    newWord = word[0].toUpperCase() + word.slice(1);
+                }
+            }
+            else if (forceWord === forceWord.toLowerCase() && (idx === 0 || idx + word.length === input.length ||
+                prevLastChar === ':' || input[idx - 1].search(/[^\s-]/) !== -1 ||
+                (input[idx - 1] !== '-' && input[idx + word.length] === '-'))) {
+                newWord = forceWord[0].toUpperCase() + forceWord.slice(1);
+            }
+            else {
+                newWord = forceWord;
+            }
+            prevLastChar = word.slice(-1);
+            return newWord;
         }
-    },
-    minProperties: '项目数必须大于或者等于 {{minimumProperties}} (当前项目数: {{currentProperties}})',
-    maxProperties: '项目数必须小于或者等于 {{maximumProperties}} (当前项目数: {{currentProperties}})',
-    minItems: '项目数必须大于或者等于 {{minimumItems}} (当前项目数: {{currentItems}})',
-    maxItems: '项目数必须小于或者等于 {{maximumItems}} (当前项目数: {{currentItems}})',
-    uniqueItems: '所有项目必须是唯一的',
-    // Note: No default error messages for 'type', 'const', 'enum', or 'dependencies'
-};
+    });
+}
 
 class JsonPointer {
     /**
@@ -2412,10 +2427,10 @@ class JsonPointer {
         }
         console.error('parseObjectPath error: Input object path must be a string.');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: JsonPointer, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: JsonPointer }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: JsonPointer, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: JsonPointer }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: JsonPointer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: JsonPointer, decorators: [{
             type: Injectable
         }] });
 
@@ -6361,6 +6376,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;
@@ -6445,6 +6466,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);
@@ -6996,7 +7029,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 || !ctx.layoutNode ||
             !isDefined(ctx.layoutNode().dataPointer) ||
             !hasValue(ctx.dataIndex()) ||
@@ -7013,8 +7046,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) {
@@ -7037,13 +7072,112 @@ class JsonSchemaFormService {
         JsonPointer.remove(this.layout, this.getLayoutPointer(ctx));
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: JsonSchemaFormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: JsonSchemaFormService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: JsonSchemaFormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: JsonSchemaFormService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: JsonSchemaFormService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: JsonSchemaFormService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
+class SelectWidgetComponent {
+    constructor() {
+        this.jsf = inject(JsonSchemaFormService);
+        this.newComponent = null;
+        this.layoutNode = input(undefined);
+        this.layoutIndex = input(undefined);
+        this.dataIndex = input(undefined);
+        this.widgetContainer = viewChild('widgetContainer', { read: ViewContainerRef });
+    }
+    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: "19.2.6", ngImport: i0, type: SelectWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.6", type: SelectWidgetComponent, isStandalone: false, selector: "select-widget-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "widgetContainer", first: true, predicate: ["widgetContainer"], descendants: true, read: ViewContainerRef, isSignal: true }], usesOnChanges: true, ngImport: i0, template: `<div #widgetContainer></div>`, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: SelectWidgetComponent, decorators: [{
+            type: Component,
+            args: [{
+                    // tslint:disable-next-line:component-selector
+                    selector: 'select-widget-widget',
+                    template: `<div #widgetContainer></div>`,
+                    standalone: false
+                }]
+        }] });
+
+class NoFrameworkComponent {
+    constructor() {
+        this.layoutNode = input(undefined);
+        this.layoutIndex = input(undefined);
+        this.dataIndex = input(undefined);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: NoFrameworkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.6", type: NoFrameworkComponent, isStandalone: false, selector: "no-framework", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<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: "19.2.6", ngImport: i0, type: NoFrameworkComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'no-framework', standalone: false, template: "<select-widget-widget [dataIndex]=\"dataIndex()\" [layoutIndex]=\"layoutIndex()\" [layoutNode]=\"layoutNode()\">\r\n</select-widget-widget>" }]
+        }] });
+
+// 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: "19.2.6", ngImport: i0, type: NoFramework, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: NoFramework }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", 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: "19.2.6", 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: "19.2.6", type: ElementAttributeDirective, isStandalone: false, selector: "[attributes]", inputs: { attributes: "attributes" }, usesOnChanges: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ElementAttributeDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[attributes]',
+                    standalone: false
+                }]
+        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { attributes: [{
+                type: Input
+            }] } });
+
 class AddReferenceComponent {
     constructor() {
         this.jsf = inject(JsonSchemaFormService);
@@ -7071,8 +7205,8 @@ class AddReferenceComponent {
         return parent.layoutNode.add ||
             this.jsf.setArrayItemTitle(parent, this.layoutNode(), this.itemCount);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: AddReferenceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", type: AddReferenceComponent, isStandalone: false, selector: "add-reference-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: AddReferenceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.6", type: AddReferenceComponent, isStandalone: false, selector: "add-reference-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <button *ngIf="showAddButton"
       [class]="options?.fieldHtmlClass || ''"
       [disabled]="options?.readonly"
@@ -7081,7 +7215,7 @@ class AddReferenceComponent {
       <span *ngIf="options?.title" [innerHTML]="buttonText"></span>
     </button>`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.Default }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: AddReferenceComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: AddReferenceComponent, decorators: [{
             type: Component,
             args: [{
                     // tslint:disable-next-line:component-selector
@@ -7120,8 +7254,8 @@ class ButtonComponent {
             this.jsf.updateValue(this, event.target.value);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", type: ButtonComponent, isStandalone: false, selector: "button-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.6", type: ButtonComponent, isStandalone: false, selector: "button-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <div
       [class]="options?.htmlClass || ''">
       <button
@@ -7139,7 +7273,7 @@ class ButtonComponent {
       </button>
     </div>`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
             args: [{
                     // tslint:disable-next-line:component-selector
@@ -7190,8 +7324,8 @@ class CheckboxComponent {
     get isChecked() {
         return this.jsf.getFormControlValue(this) === this.trueValue;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", type: CheckboxComponent, isStandalone: false, selector: "checkbox-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.6", type: CheckboxComponent, isStandalone: false, selector: "checkbox-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <label
       [attr.for]="'control' + layoutNode()?._id"
       [class]="options?.itemLabelHtmlClass || ''">
@@ -7223,7 +7357,7 @@ class CheckboxComponent {
         [innerHTML]="options?.title"></span>
     </label>`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: CheckboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
             args: [{
                     // tslint:disable-next-line:component-selector
@@ -7295,8 +7429,8 @@ class CheckboxesComponent {
             this.jsf.updateArrayCheckboxList(this, this.checkboxList);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: CheckboxesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", type: CheckboxesComponent, isStandalone: false, selector: "checkboxes-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: CheckboxesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.6", type: CheckboxesComponent, isStandalone: false, selector: "checkboxes-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <label *ngIf="options?.title"
       [class]="options?.labelHtmlClass || ''"
       [style.display]="options?.notitle ? 'none' : ''"
@@ -7346,7 +7480,7 @@ class CheckboxesComponent {
       </div>
     </div>`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: CheckboxesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: CheckboxesComponent, decorators: [{
             type: Component,
             args: [{
                     // tslint:disable-next-line:component-selector
@@ -7421,10 +7555,10 @@ class FileComponent {
     updateValue(event) {
         this.jsf.updateValue(this, event.target.value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: FileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", type: FileComponent, isStandalone: false, selector: "file-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: ``, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.6", type: FileComponent, isStandalone: false, selector: "file-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: ``, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: FileComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FileComponent, decorators: [{
             type: Component,
             args: [{
                     // tslint:disable-next-line:component-selector
@@ -7434,6 +7568,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                 }]
         }] });
 
+class HiddenComponent {
+    constructor() {
+        this.jsf = inject(JsonSchemaFormService);
+        this.controlDisabled = false;
+        this.boundControl = false;
+        this.layoutNode = input(undefined);
+        this.layoutIndex = input(undefined);
+        this.dataIndex = input(undefined);
+    }
+    ngOnInit() {
+        this.jsf.initializeControl(this);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: HiddenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.6", type: HiddenComponent, isStandalone: false, selector: "hidden-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <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: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", 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">`,
+                    standalone: false
+                }]
+        }] });
+
 class InputComponent {
     constructor() {
         this.jsf = inject(JsonSchemaFormService);
@@ -7444,6 +7625,10 @@ class InputComponent {
         this.layoutIndex = input(undefined);
         this.dataIndex = input(undefined);
     }
+    //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);
@@ -7451,9 +7636,9 @@ class InputComponent {
     updateValue(event) {
         this.jsf.updateValue(this, event.target.value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", type: InputComponent, isStandalone: false, selector: "input-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <div [class]="options?.htmlClass || ''">
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.6", type: InputComponent, isStandalone: false, selector: "input-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div [class]="options?.htmlClass || ''" class="sortable-filter" >
       <label *ngIf="options?.title"
         [attr.for]="'control' + layoutNode()?._id"
         [class]="options?.labelHtmlClass || ''"
@@ -7472,7 +7657,9 @@ class InputComponent {
         [id]="'control' + layoutNode()?._id"
         [name]="controlName"
         [readonly]="options?.readonly ? 'readonly' : null"
-        [type]="layoutNode()?.type">
+        [type]="layoutNode()?.type"
+        [attributes]="inputAttributes"
+        >
       <input *ngIf="!boundControl"
         [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
         [attr.list]="'control' + layoutNode()?._id + 'Autocomplete'"
@@ -7488,20 +7675,22 @@ class InputComponent {
         [readonly]="options?.readonly ? 'readonly' : null"
         [type]="layoutNode()?.type"
         [value]="controlValue"
-        (input)="updateValue($event)">
+        (input)="updateValue($event)"
+        [attributes]="inputAttributes"
+        >
         <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: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
+    </div>`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.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: "19.1.4", ngImport: i0, type: InputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: InputComponent, decorators: [{
             type: Component,
             args: [{
                     // 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 || ''"
@@ -7520,7 +7709,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
         [id]="'control' + layoutNode()?._id"
         [name]="controlName"
         [readonly]="options?.readonly ? 'readonly' : null"
-        [type]="layoutNode()?.type">
+        [type]="layoutNode()?.type"
+        [attributes]="inputAttributes"
+        >
       <input *ngIf="!boundControl"
         [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
         [attr.list]="'control' + layoutNode()?._id + 'Autocomplete'"
@@ -7536,7 +7727,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
         [readonly]="options?.readonly ? 'readonly' : null"
         [type]="layoutNode()?.type"
         [value]="controlValue"
-        (input)="updateValue($event)">
+        (input)="updateValue($event)"
+        [attributes]="inputAttributes"
+        >
         <datalist *ngIf="options?.typeahead?.source"
           [id]="'control' + layoutNode()?._id + 'Autocomplete'">
           <option *ngFor="let word of options?.typeahead?.source" [value]="word">
@@ -7559,13 +7752,13 @@ class MessageComponent {
         this.message = this.options.help || this.options.helpvalue ||
             this.options.msg || this.options.message;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: MessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", type: MessageComponent, isStandalone: false, selector: "message-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.6", type: MessageComponent, isStandalone: false, selector: "message-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <span *ngIf="message"
       [class]="options?.labelHtmlClass || ''"
       [innerHTML]="message"></span>`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: MessageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MessageComponent, decorators: [{
             type: Component,
             args: [{
                     // tslint:disable-next-line:component-selector
@@ -7584,10 +7777,10 @@ class NoneComponent {
         this.layoutIndex = input(undefined);
         this.dataIndex = input(undefined);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NoneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", type: NoneComponent, isStandalone: false, selector: "none-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: ``, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: NoneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.6", type: NoneComponent, isStandalone: false, selector: "none-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: ``, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NoneComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: NoneComponent, decorators: [{
             type: Component,
             args: [{
                     // tslint:disable-next-line:component-selector
@@ -7597,6 +7790,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                 }]
         }] });
 
+//TODO look at reusing InputComponent
 class NumberComponent {
     constructor() {
         this.jsf = inject(JsonSchemaFormService);
@@ -7610,6 +7804,10 @@ class NumberComponent {
         this.layoutIndex = input(undefined);
         this.dataIndex = input(undefined);
     }
+    //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);
@@ -7620,15 +7818,15 @@ class NumberComponent {
     updateValue(event) {
         this.jsf.updateValue(this, event.target.value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", type: NumberComponent, isStandalone: false, selector: "number-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <div [class]="options?.htmlClass || ''">
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: NumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.6", type: NumberComponent, isStandalone: false, selector: "number-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "inputControl", first: true, predicate: ["inputControl"], descendants: true }, { propertyName: "div", first: true, predicate: ["divElt"], descendants: true }], ngImport: i0, template: `
+    <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"
@@ -7642,8 +7840,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"
@@ -7659,23 +7860,25 @@ 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: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
+    </div>`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.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: "19.1.4", ngImport: i0, type: NumberComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: NumberComponent, decorators: [{
             type: Component,
             args: [{
                     // 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"
@@ -7689,8 +7892,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
         [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"
@@ -7706,12 +7912,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
         [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>`,
                     standalone: false
                 }]
-        }] });
+        }], propDecorators: { inputControl: [{
+                type: ViewChild,
+                args: ['inputControl', {}]
+            }], div: [{
+                type: ViewChild,
+                args: ['divElt', {}]
+            }] } });
 
 // TODO: Add this control
 class OneOfComponent {
@@ -7730,10 +7944,10 @@ class OneOfComponent {
     updateValue(event) {
         this.jsf.updateValue(this, event.target.value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: OneOfComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", type: OneOfComponent, isStandalone: false, selector: "one-of-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: ``, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: OneOfComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.6", type: OneOfComponent, isStandalone: false, selector: "one-of-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: ``, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: OneOfComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: OneOfComponent, decorators: [{
             type: Component,
             args: [{
                     // tslint:disable-next-line:component-selector
@@ -7767,8 +7981,8 @@ class RadiosComponent {
     updateValue(event) {
         this.jsf.updateValue(this, event.target.value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: RadiosComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", type: RadiosComponent, isStandalone: false, selector: "radios-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: RadiosComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.6", type: RadiosComponent, isStandalone: false, selector: "radios-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <label *ngIf="options?.title"
       [attr.for]="'control' + layoutNode()?._id"
       [class]="options?.labelHtmlClass || ''"
@@ -7825,7 +8039,7 @@ class RadiosComponent {
       </div>
     </div>`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: RadiosComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: RadiosComponent, decorators: [{
             type: Component,
             args: [{
                     // tslint:disable-next-line:component-selector
@@ -7892,7 +8106,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
 
 class SelectFrameworkComponent {
     constructor() {
-        this.componentFactory = inject(ComponentFactoryResolver);
         this.jsf = inject(JsonSchemaFormService);
         this.newComponent = null;
         this.layoutNode = input(undefined);
@@ -7909,7 +8122,7 @@ class SelectFrameworkComponent {
     updateComponent() {
         const widgetContainer = this.widgetContainer();
         if (widgetContainer && !this.newComponent && this.jsf.framework) {
-            this.newComponent = widgetContainer.createComponent(this.componentFactory.resolveComponentFactory(this.jsf.framework));
+            this.newComponent = widgetContainer.createComponent((this.jsf.framework));
             //TODO fix all deprecated calls and test 
             //this.widgetContainer.createComponent<any>(this.jsf.framework)
         }
@@ -7919,10 +8132,10 @@ class SelectFrameworkComponent {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: SelectFrameworkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.1.4", type: SelectFrameworkComponent, isStandalone: false, selector: "select-framework-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "widgetContainer", first: true, predicate: ["widgetContainer"], descendants: true, read: ViewContainerRef, isSignal: true }], usesOnChanges: true, ngImport: i0, template: `<div #widgetContainer></div>`, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: SelectFrameworkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.6", type: SelectFrameworkComponent, isStandalone: false, selector: "select-framework-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "widgetContainer", first: true, predicate: ["widgetContainer"], descendants: true, read: ViewContainerRef, isSignal: true }], usesOnChanges: true, ngImport: i0, template: `<div #widgetContainer></div>`, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: SelectFrameworkComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: SelectFrameworkComponent, decorators: [{
             type: Component,
             args: [{
                     // tslint:disable-next-line:component-selector
@@ -8036,12 +8249,21 @@ 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: "19.1.4", ngImport: i0, type: OrderableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.4", type: OrderableDirective, isStandalone: false, selector: "[orderable]", inputs: { orderable: { classPropertyName: "orderable", publicName: "orderable", isSignal: true, isRequired: false, transformFunction: null }, layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: OrderableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.6", type: OrderableDirective, isStandalone: false, selector: "[orderable]", inputs: { orderable: { classPropertyName: "orderable", publicName: "orderable", isSignal: true, isRequired: false, transformFunction: null }, layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: OrderableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: OrderableDirective, decorators: [{
             type: Directive,
             args: [{
                     // tslint:disable-next-line:directive-selector
@@ -8058,10 +8280,42 @@ class RootComponent {
         this.layout = input(undefined);
         this.isOrderable = input(undefined);
         this.isFlexItem = input(false);
+        this.sortableConfig = {
+            filter: ".sortable-filter", //needed to disable dragging on input range elements, class needs to be added to the element or its parent
+            preventOnFilter: false, //needed for input range elements slider do still work
+            delay: 1000,
+            delayOnTouchOnly: true,
+            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: () => { return dataInd; },
+                    layoutIndex: () => { return layoutInd; },
+                    layoutNode: () => { return 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)
@@ -8073,48 +8327,86 @@ class RootComponent {
     showWidget(layoutNode) {
         return this.jsf.evaluateCondition(layoutNode, this.dataIndex());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: RootComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", type: RootComponent, isStandalone: false, selector: "root-widget", inputs: { dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, isOrderable: { classPropertyName: "isOrderable", publicName: "isOrderable", isSignal: true, isRequired: false, transformFunction: null }, isFlexItem: { classPropertyName: "isFlexItem", publicName: "isFlexItem", isSignal: true, isRequired: false, transformFunction: null } }, 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)"
+    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: "19.2.6", ngImport: i0, type: RootComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.6", type: RootComponent, isStandalone: false, selector: "root-widget", inputs: { dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, isOrderable: { classPropertyName: "isOrderable", publicName: "isOrderable", isSignal: true, isRequired: false, transformFunction: null }, isFlexItem: { classPropertyName: "isFlexItem", publicName: "isFlexItem", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div #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: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.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}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$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: "19.1.4", ngImport: i0, type: RootComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", 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 #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>`, 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}\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}\n"] }]
         }] });
 
 class SectionComponent {
@@ -8178,8 +8470,8 @@ class SectionComponent {
                 return this.options[attribute];
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: SectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", type: SectionComponent, isStandalone: false, selector: "section-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: SectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.6", type: SectionComponent, isStandalone: false, selector: "section-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <div *ngIf="containerType === 'div'"
       [class]="options?.htmlClass || ''"
       [class.expandable]="options?.expandable && !expanded"
@@ -8189,7 +8481,7 @@ class SectionComponent {
         [class]="options?.labelHtmlClass || ''"
         [innerHTML]="sectionTitle"
         (click)="toggleExpanded()"></label>
-      <root-widget *ngIf="expanded"
+      <root-widget 
         [dataIndex]="dataIndex()"
         [layout]="layoutNode().items"
         [layoutIndex]="layoutIndex()"
@@ -8199,7 +8491,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>
@@ -8220,7 +8512,7 @@ class SectionComponent {
         [class]="options?.labelHelpBlockClass || ''"
         [innerHTML]="options?.description"></p>
       </div>
-      <root-widget *ngIf="expanded"
+      <root-widget 
         [dataIndex]="dataIndex()"
         [layout]="layoutNode().items"
         [layoutIndex]="layoutIndex()"
@@ -8230,7 +8522,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>
@@ -8242,7 +8534,7 @@ class SectionComponent {
       </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: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: RootComponent, selector: "root-widget", inputs: ["dataIndex", "layoutIndex", "layout", "isOrderable", "isFlexItem"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: SectionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: SectionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'section-widget', template: `
     <div *ngIf="containerType === 'div'"
@@ -8254,7 +8546,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
         [class]="options?.labelHtmlClass || ''"
         [innerHTML]="sectionTitle"
         (click)="toggleExpanded()"></label>
-      <root-widget *ngIf="expanded"
+      <root-widget 
         [dataIndex]="dataIndex()"
         [layout]="layoutNode().items"
         [layoutIndex]="layoutIndex()"
@@ -8264,7 +8556,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
         [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>
@@ -8285,7 +8577,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
         [class]="options?.labelHelpBlockClass || ''"
         [innerHTML]="options?.description"></p>
       </div>
-      <root-widget *ngIf="expanded"
+      <root-widget 
         [dataIndex]="dataIndex()"
         [layout]="layoutNode().items"
         [layoutIndex]="layoutIndex()"
@@ -8295,7 +8587,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
         [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>
@@ -8327,8 +8619,8 @@ class SelectComponent {
     updateValue(event) {
         this.jsf.updateValue(this, event.target.value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", type: SelectComponent, isStandalone: false, selector: "select-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.6", type: SelectComponent, isStandalone: false, selector: "select-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <div
       [class]="options?.htmlClass || ''">
       <label *ngIf="options?.title"
@@ -8385,7 +8677,7 @@ class SelectComponent {
       </select>
     </div>`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: SelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
             args: [{
                     // tslint:disable-next-line:component-selector
@@ -8450,46 +8742,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                 }]
         }] });
 
-class SelectWidgetComponent {
-    constructor() {
-        this.componentFactory = inject(ComponentFactoryResolver);
-        this.jsf = inject(JsonSchemaFormService);
-        this.newComponent = null;
-        this.layoutNode = input(undefined);
-        this.layoutIndex = input(undefined);
-        this.dataIndex = input(undefined);
-        this.widgetContainer = viewChild('widgetContainer', { read: ViewContainerRef });
-    }
-    ngOnInit() {
-        this.updateComponent();
-    }
-    ngOnChanges() {
-        this.updateComponent();
-    }
-    updateComponent() {
-        const widgetContainer = this.widgetContainer();
-        if (widgetContainer && !this.newComponent && (this.layoutNode() || {}).widget) {
-            this.newComponent = widgetContainer.createComponent(this.componentFactory.resolveComponentFactory(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: "19.1.4", ngImport: i0, type: SelectWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.1.4", type: SelectWidgetComponent, isStandalone: false, selector: "select-widget-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "widgetContainer", first: true, predicate: ["widgetContainer"], descendants: true, read: ViewContainerRef, isSignal: true }], usesOnChanges: true, ngImport: i0, template: `<div #widgetContainer></div>`, isInline: true }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: SelectWidgetComponent, decorators: [{
-            type: Component,
-            args: [{
-                    // tslint:disable-next-line:component-selector
-                    selector: 'select-widget-widget',
-                    template: `<div #widgetContainer></div>`,
-                    standalone: false
-                }]
-        }] });
-
 class SubmitComponent {
     constructor() {
         this.jsf = inject(JsonSchemaFormService);
@@ -8525,8 +8777,8 @@ class SubmitComponent {
             this.jsf.updateValue(this, event.target.value);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: SubmitComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", type: SubmitComponent, isStandalone: false, selector: "submit-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: SubmitComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.6", type: SubmitComponent, isStandalone: false, selector: "submit-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <div
       [class]="options?.htmlClass || ''">
       <input
@@ -8542,7 +8794,7 @@ class SubmitComponent {
         (click)="updateValue($event)">
     </div>`, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: SubmitComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: SubmitComponent, decorators: [{
             type: Component,
             args: [{
                     // tslint:disable-next-line:component-selector
@@ -8566,6 +8818,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                 }]
         }] });
 
+class TabComponent {
+    constructor() {
+        this.jsf = inject(JsonSchemaFormService);
+        this.layoutNode = input(undefined);
+        this.layoutIndex = input(undefined);
+        this.dataIndex = input(undefined);
+    }
+    ngOnInit() {
+        this.options = this.layoutNode().options || {};
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.6", type: TabComponent, isStandalone: false, selector: "tab-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <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: "19.2.6", 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>`,
+                    standalone: false
+                }]
+        }] });
+
 class TabsComponent {
     constructor() {
         this.jsf = inject(JsonSchemaFormService);
@@ -8603,8 +8890,8 @@ class TabsComponent {
     setTabTitle(item, index) {
         return this.jsf.setArrayItemTitle(this, item, index);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", type: TabsComponent, isStandalone: false, selector: "tabs-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.6", type: TabsComponent, isStandalone: false, selector: "tabs-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <ul
       [class]="options?.labelHtmlClass || ''">
       <li *ngFor="let item of layoutNode()?.items; let i = index"
@@ -8634,7 +8921,7 @@ class TabsComponent {
 
     </div>`, isInline: true, styles: ["a{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SelectFrameworkComponent, selector: "select-framework-widget", inputs: ["layoutNode", "layoutIndex", "dataIndex"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: TabsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TabsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tabs-widget', template: `
     <ul
@@ -8669,7 +8956,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
 
 class TemplateComponent {
     constructor() {
-        this.componentFactory = inject(ComponentFactoryResolver);
         this.jsf = inject(JsonSchemaFormService);
         this.newComponent = null;
         this.layoutNode = input(undefined);
@@ -8687,7 +8973,7 @@ class TemplateComponent {
         const layoutNode = this.layoutNode();
         const widgetContainer = this.widgetContainer();
         if (widgetContainer && !this.newComponent && layoutNode.options.template) {
-            this.newComponent = widgetContainer.createComponent(this.componentFactory.resolveComponentFactory(layoutNode.options.template));
+            this.newComponent = widgetContainer.createComponent((layoutNode.options.template));
         }
         if (this.newComponent) {
             for (const input of ['layoutNode', 'layoutIndex', 'dataIndex']) {
@@ -8695,10 +8981,10 @@ class TemplateComponent {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: TemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.1.4", type: TemplateComponent, isStandalone: false, selector: "template-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "widgetContainer", first: true, predicate: ["widgetContainer"], descendants: true, read: ViewContainerRef, isSignal: true }], usesOnChanges: true, ngImport: i0, template: `<div #widgetContainer></div>`, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.6", type: TemplateComponent, isStandalone: false, selector: "template-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "widgetContainer", first: true, predicate: ["widgetContainer"], descendants: true, read: ViewContainerRef, isSignal: true }], usesOnChanges: true, ngImport: i0, template: `<div #widgetContainer></div>`, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: TemplateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TemplateComponent, decorators: [{
             type: Component,
             args: [{
                     // tslint:disable-next-line:component-selector
@@ -8724,8 +9010,8 @@ class TextareaComponent {
     updateValue(event) {
         this.jsf.updateValue(this, event.target.value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", type: TextareaComponent, isStandalone: false, selector: "textarea-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.6", type: TextareaComponent, isStandalone: false, selector: "textarea-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <div
       [class]="options?.htmlClass || ''">
       <label *ngIf="options?.title"
@@ -8761,7 +9047,7 @@ class TextareaComponent {
         (input)="updateValue($event)">{{controlValue}}</textarea>
     </div>`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: TextareaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TextareaComponent, decorators: [{
             type: Component,
             args: [{
                     // tslint:disable-next-line:component-selector
@@ -8998,27 +9284,69 @@ class WidgetLibraryService {
             activeWidgets: this.activeWidgets,
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WidgetLibraryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WidgetLibraryService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: WidgetLibraryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: WidgetLibraryService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WidgetLibraryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: WidgetLibraryService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
         }], ctorParameters: () => [] });
 
-class Framework {
-    constructor() {
-        this.widgets = {};
-        this.stylesheets = [];
-        this.scripts = [];
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: Framework, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.4", 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: "19.2.6", ngImport: i0, type: WidgetLibraryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.6", 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, i2$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: "19.2.6", 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", //needed to disable dragging on input range elements, class needs to be added to the element or its parent
+                preventOnFilter: false //needed for input range elements slider do still work
+            })] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: Framework, decorators: [{
-            type: Injectable
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", 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", //needed to disable dragging on input range elements, class needs to be added to the element or its parent
+                            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: "19.2.6", ngImport: i0, type: NoFrameworkModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.6", ngImport: i0, type: NoFrameworkModule, declarations: [NoFrameworkComponent], imports: [CommonModule, WidgetLibraryModule], exports: [NoFrameworkComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: NoFrameworkModule, providers: [
+            { provide: Framework, useClass: NoFramework, multi: true }
+        ], imports: [CommonModule, WidgetLibraryModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", 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:
@@ -9173,10 +9501,10 @@ class FrameworkLibraryService {
             return actFramework.unregisterTheme(name);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: FrameworkLibraryService, deps: [{ token: Framework }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: FrameworkLibraryService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FrameworkLibraryService, deps: [{ token: Framework }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FrameworkLibraryService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: FrameworkLibraryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FrameworkLibraryService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -9385,7 +9713,7 @@ class JsonSchemaFormComponent {
             }
             // Get names of changed inputs
             let changedInput = Object.keys(this.previousInputs)
-                .filter(input => this.previousInputs[input] !== this[input]);
+                .filter(input => this.previousInputs[input] !== this.getInputValue(input));
             let resetFirst = true;
             if (changedInput.length === 1 && changedInput[0] === 'form' &&
                 this.formValuesInput.startsWith('form.')) {
@@ -9398,12 +9726,13 @@ class JsonSchemaFormComponent {
             // If only input values have changed, update the form values
             if (changedInput.length === 1 && changedInput[0] === this.formValuesInput) {
                 if (this.formValuesInput.indexOf('.') === -1) {
-                    changedData = this[this.formValuesInput];
+                    changedData = this.getInputValue(this.formValuesInput);
+                    //this[this.formValuesInput];
                     this.setFormValues(changedData, resetFirst);
                 }
                 else {
                     const [input, key] = this.formValuesInput.split('.');
-                    changedData = this[input][key];
+                    changedData = this.getInputValue(input)[key];
                     this.setFormValues(changedData, resetFirst);
                 }
                 // If anything else has changed, re-render the entire form
@@ -9424,7 +9753,7 @@ class JsonSchemaFormComponent {
             }
             // Update previous inputs
             Object.keys(this.previousInputs)
-                .filter(input => this.previousInputs[input] !== this[input])
+                .filter(input => this.previousInputs[input] !== this.getInputValue(input))
                 .forEach(input => this.previousInputs[input] = this.getInputValue(input));
         }
     }
@@ -9917,178 +10246,24 @@ class JsonSchemaFormComponent {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: JsonSchemaFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", type: JsonSchemaFormComponent, isStandalone: false, selector: "json-schema-form", inputs: { schema: { classPropertyName: "schema", publicName: "schema", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, framework: { classPropertyName: "framework", publicName: "framework", isSignal: true, isRequired: false, transformFunction: null }, widgets: { classPropertyName: "widgets", publicName: "widgets", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, JSONSchema: { classPropertyName: "JSONSchema", publicName: "JSONSchema", isSignal: true, isRequired: false, transformFunction: null }, UISchema: { classPropertyName: "UISchema", publicName: "UISchema", isSignal: true, isRequired: false, transformFunction: null }, formData: { classPropertyName: "formData", publicName: "formData", isSignal: true, isRequired: false, transformFunction: null }, ngModel: { classPropertyName: "ngModel", publicName: "ngModel", isSignal: true, isRequired: false, transformFunction: null }, language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: false, transformFunction: null }, loadExternalAssets: { classPropertyName: "loadExternalAssets", publicName: "loadExternalAssets", isSignal: true, isRequired: false, transformFunction: null }, debug: { classPropertyName: "debug", publicName: "debug", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null } }, 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: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: JsonSchemaFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.6", type: JsonSchemaFormComponent, isStandalone: false, selector: "json-schema-form", inputs: { schema: { classPropertyName: "schema", publicName: "schema", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, framework: { classPropertyName: "framework", publicName: "framework", isSignal: true, isRequired: false, transformFunction: null }, widgets: { classPropertyName: "widgets", publicName: "widgets", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, JSONSchema: { classPropertyName: "JSONSchema", publicName: "JSONSchema", isSignal: true, isRequired: false, transformFunction: null }, UISchema: { classPropertyName: "UISchema", publicName: "UISchema", isSignal: true, isRequired: false, transformFunction: null }, formData: { classPropertyName: "formData", publicName: "formData", isSignal: true, isRequired: false, transformFunction: null }, ngModel: { classPropertyName: "ngModel", publicName: "ngModel", isSignal: true, isRequired: false, transformFunction: null }, language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: false, transformFunction: null }, loadExternalAssets: { classPropertyName: "loadExternalAssets", publicName: "loadExternalAssets", isSignal: true, isRequired: false, transformFunction: null }, debug: { classPropertyName: "debug", publicName: "debug", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null } }, 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: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: JsonSchemaFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: JsonSchemaFormComponent, decorators: [{
             type: Component,
             args: [{ selector: 'json-schema-form', changeDetection: ChangeDetectionStrategy.OnPush, providers: [JsonSchemaFormService, JSON_SCHEMA_FORM_VALUE_ACCESSOR], standalone: false, 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>" }]
         }], propDecorators: { value: [{
                 type: Input
             }] } });
 
-class NoFrameworkComponent {
-    constructor() {
-        this.layoutNode = input(undefined);
-        this.layoutIndex = input(undefined);
-        this.dataIndex = input(undefined);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NoFrameworkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", type: NoFrameworkComponent, isStandalone: false, selector: "no-framework", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<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: "19.1.4", ngImport: i0, type: NoFrameworkComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'no-framework', standalone: false, template: "<select-widget-widget [dataIndex]=\"dataIndex()\" [layoutIndex]=\"layoutIndex()\" [layoutNode]=\"layoutNode()\">\r\n</select-widget-widget>" }]
-        }] });
-
-// 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: "19.1.4", ngImport: i0, type: NoFramework, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NoFramework }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NoFramework, decorators: [{
-            type: Injectable
-        }] });
-
-class HiddenComponent {
-    constructor() {
-        this.jsf = inject(JsonSchemaFormService);
-        this.controlDisabled = false;
-        this.boundControl = false;
-        this.layoutNode = input(undefined);
-        this.layoutIndex = input(undefined);
-        this.dataIndex = input(undefined);
-    }
-    ngOnInit() {
-        this.jsf.initializeControl(this);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: HiddenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", type: HiddenComponent, isStandalone: false, selector: "hidden-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <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: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", 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">`,
-                    standalone: false
-                }]
-        }] });
-
-class TabComponent {
-    constructor() {
-        this.jsf = inject(JsonSchemaFormService);
-        this.layoutNode = input(undefined);
-        this.layoutIndex = input(undefined);
-        this.dataIndex = input(undefined);
-    }
-    ngOnInit() {
-        this.options = this.layoutNode().options || {};
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: TabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", type: TabComponent, isStandalone: false, selector: "tab-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <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: "19.1.4", 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>`,
-                    standalone: false
-                }]
-        }] });
-
-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: "19.1.4", ngImport: i0, type: WidgetLibraryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.4", 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], 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] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WidgetLibraryModule, imports: [CommonModule, FormsModule, ReactiveFormsModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WidgetLibraryModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule, FormsModule, ReactiveFormsModule],
-                    declarations: [...BASIC_WIDGETS, OrderableDirective],
-                    exports: [...BASIC_WIDGETS, OrderableDirective]
-                }]
-        }] });
-
-// No framework - plain HTML controls (styles from form layout only)
-class NoFrameworkModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NoFrameworkModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.4", ngImport: i0, type: NoFrameworkModule, declarations: [NoFrameworkComponent], imports: [CommonModule, WidgetLibraryModule], exports: [NoFrameworkComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NoFrameworkModule, providers: [
-            { provide: Framework, useClass: NoFramework, multi: true }
-        ], imports: [CommonModule, WidgetLibraryModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", 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: "19.1.4", ngImport: i0, type: JsonSchemaFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.4", ngImport: i0, type: JsonSchemaFormModule, declarations: [JsonSchemaFormComponent], imports: [CommonModule, FormsModule, ReactiveFormsModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: JsonSchemaFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.6", ngImport: i0, type: JsonSchemaFormModule, declarations: [JsonSchemaFormComponent], imports: [CommonModule, FormsModule, ReactiveFormsModule,
             WidgetLibraryModule, NoFrameworkModule], exports: [JsonSchemaFormComponent, WidgetLibraryModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: JsonSchemaFormModule, imports: [CommonModule, FormsModule, ReactiveFormsModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: JsonSchemaFormModule, imports: [CommonModule, FormsModule, ReactiveFormsModule,
             WidgetLibraryModule, NoFrameworkModule, WidgetLibraryModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: JsonSchemaFormModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: JsonSchemaFormModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -10108,5 +10283,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AddReferenceComponent, BASIC_WIDGETS, ButtonComponent, CheckboxComponent, CheckboxesComponent, FileComponent, Framework, FrameworkLibraryService, HiddenComponent, InputComponent, JsonPointer, JsonSchemaFormComponent, JsonSchemaFormModule, JsonSchemaFormService, JsonValidators, MessageComponent, NoneComponent, NumberComponent, OneOfComponent, OrderableDirective, RadiosComponent, RootComponent, SectionComponent, 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, hasOwn, hasValue, inArray, isArray, isBoolean, isDate, isDefined, isEmpty, isFunction, isInputRequired, isInteger, isMap, isNumber, isObject, isObservable, isPrimitive, isPromise, isSet, isString, isType, itValidationMessages, mapLayout, mergeFilteredObject, mergeSchemas, ptValidationMessages, removeRecursiveReferences, resolveSchemaReferences, 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, 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, hasOwn, hasValue, inArray, isArray, isBoolean, isDate, isDefined, isEmpty, isFunction, isInputRequired, isInteger, isMap, isNumber, isObject, isObservable, isPrimitive, isPromise, isSet, isString, isType, itValidationMessages, mapLayout, mergeFilteredObject, mergeSchemas, ptValidationMessages, removeRecursiveReferences, resolveSchemaReferences, setRequiredFields, toJavaScriptType, toObservable, toSchemaType, toTitleCase, uniqueItems, updateInputOptions, xor, zhValidationMessages };
 //# sourceMappingURL=ng-formworks-core.mjs.map