@ng-formworks/core 17.4.0 → 17.5.2

package/fesm2022/ng-formworks-core.mjs

@@ -1,13 +1,14 @@
-import * as i2 from '@angular/common';
+import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i3 from '@angular/forms';
+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, Component, ChangeDetectionStrategy, Input, ViewContainerRef, ViewChild, Directive, Inject, forwardRef, EventEmitter, Output, NgModule } from '@angular/core';
+import { Injectable, inject, input, ChangeDetectionStrategy, Component, 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 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';
@@ -16,424 +17,6 @@ import map$1 from 'lodash/map';
 import _isArray from 'lodash/isArray';
 import _isPlainObject from 'lodash/isPlainObject';
 import uniqueId from 'lodash/uniqueId';
-import * as i1 from '@angular/common/http';
-
-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`;
-        }
-    },
-    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;
-        }
-    },
-    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.`;
-        }
-        else {
-            return `Must be a multiple of ${error.multipleOfValue}.`;
-        }
-    },
-    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;
-        }
-    },
-    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`;
-        }
-        else {
-            return `Debe ser múltiplo de ${error.multipleOfValue}.`;
-        }
-    },
-    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.`;
-        }
-        else {
-            return `Doit être un multiple de ${error.multipleOfValue}.`;
-        }
-    },
-    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;
-        }
-    },
-    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'
-};
 
 /**
  * '_executeValidators' utility function
@@ -873,529 +456,946 @@ function toJavaScriptType(value, types, strictIntegers = true) {
  * //  { 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;
-        }
+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;
+        }
+    }
+    if (types.includes('number')) {
+        const testValue = toJavaScriptType(value, 'number');
+        if (testValue !== null) {
+            return +testValue;
+        }
+    }
+    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 '';
+        }
+        const testValue = toJavaScriptType(value, 'string');
+        if (testValue !== null) {
+            return testValue;
+        }
+    }
+    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;
+        }
+    }
+    if (types.includes('number')) { // Convert mixed string to number
+        const testValue = parseFloat(value);
+        if (!!testValue) {
+            return testValue;
+        }
+    }
+    if (types.includes('integer')) { // Convert string or number to integer
+        const testValue = parseInt(value, 10);
+        if (!!testValue) {
+            return testValue;
+        }
+    }
+    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);
+}
+
+/**
+ * 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 (types.includes('number')) {
-        const testValue = toJavaScriptType(value, 'number');
-        if (testValue !== null) {
-            return +testValue;
+    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 ((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 '';
+    if (errors) {
+        if (typeof fn !== 'function') {
+            console.error('forEach error: Iterator must be a function.');
+            console.error('function', fn);
         }
-        const testValue = toJavaScriptType(value, 'string');
-        if (testValue !== null) {
-            return testValue;
+        if (!isObject(object) && !isArray(object)) {
+            console.error('forEach error: Input object must be an object or array.');
+            console.error('object', object);
         }
     }
-    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;
-        }
+}
+/**
+ * '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 (types.includes('number')) { // Convert mixed string to number
-        const testValue = parseFloat(value);
-        if (!!testValue) {
-            return testValue;
+    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 (types.includes('integer')) { // Convert string or number to integer
-        const testValue = parseInt(value, 10);
-        if (!!testValue) {
-            return testValue;
+    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);
         }
-    }
-    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
+ * 'hasOwn' utility function
  *
- * //   object
- * // { boolean }
+ * 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 isPromise(object) {
-    return !!object && typeof object.then === 'function';
+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);
 }
 /**
- * 'isObservable' function
- *
- * //   object
- * // { boolean }
+ * Types of possible expressions which the app is able to evaluate.
  */
-function isObservable(object) {
-    return !!object && typeof object.subscribe === 'function';
-}
+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 = {}));
 /**
- * '_toPromise' function
- *
- * //  { object } object
- * // { Promise<any> }
+ * 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 _toPromise(object) {
-    return isPromise(object) ? object : object.toPromise();
+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;
 }
 /**
- * 'toObservable' function
- *
- * //  { object } object
- * // { Observable<any> }
+ * 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 toObservable(object) {
-    const observable = isPromise(object) ? from(object) : object;
-    if (isObservable(observable)) {
-        return observable;
+function getKeyAndValueByExpressionType(expressionType, key) {
+    if (isEqual(expressionType)) {
+        return key.split('==', 2);
     }
-    console.error('toObservable error: Expected validator to return Promise or Observable.');
-    return new Observable();
+    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;
 }
 /**
- * 'inArray' function
+ * 'mergeFilteredObject' utility 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.
+ * Shallowly merges two objects, setting key and values from source object
+ * in target object, excluding specified keys.
  *
- * 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.
+ * Optionally, it can also use functions to transform the key names and/or
+ * the values of the merging object.
  *
- * //  { 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} 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 inArray(item, array, allIn = false) {
-    if (!isDefined(item) || !isArray(array)) {
-        return false;
+function mergeFilteredObject(targetObject, sourceObject, excludeKeys = [], keyFn = (key) => key, valFn = (val) => val) {
+    if (!isObject(sourceObject)) {
+        return targetObject;
     }
-    return isArray(item) ?
-        item[allIn ? 'every' : 'some'](subItem => array.includes(subItem)) :
-        array.includes(item);
+    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;
 }
 /**
- * 'xor' utility function - exclusive or
+ * 'uniqueItems' function
  *
- * Returns true if exactly one of two values is truthy.
+ * Accepts any number of string value inputs,
+ * and returns an array of all input vaues, excluding duplicates.
  *
- * //   value1 - first value to check
- * //   value2 - second value to check
- * // { boolean } - true if exactly one input value is truthy, false if not
+ * // {...string} ...items -
+ * // {string[]} -
  */
-function xor(value1, value2) {
-    return (!!value1 && !value2) || (!value1 && !!value2);
+function uniqueItems(...items) {
+    const returnItems = [];
+    for (const item of items) {
+        if (!returnItems.includes(item)) {
+            returnItems.push(item);
+        }
+    }
+    return returnItems;
 }
-
-/**
- * Utility function library:
- *
- * addClasses, copy, forEach, forEachCopy, hasOwn, mergeFilteredObject,
- * uniqueItems, commonItems, fixTitle, toTitleCase
-*/
 /**
- * 'addClasses' function
+ * 'commonItems' function
  *
- * Merges two space-delimited lists of CSS classes and removes duplicates.
+ * Accepts any number of strings or arrays of string values,
+ * and returns a single array containing only values present in all inputs.
  *
- * // {string | string[] | Set<string>} oldClasses
- * // {string | string[] | Set<string>} newClasses
- * // {string | string[] | Set<string>} - Combined classes
+ * // {...string|string[]} ...arrays -
+ * // {string[]} -
  */
-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);
+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 Array.from(combinedSet).join(' ');
+    return returnItems;
 }
 /**
- * 'copy' function
+ * 'fixTitle' 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
+ * // {string} input -
+ * // {string} -
  */
-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;
+function fixTitle(name) {
+    return name && toTitleCase(name.replace(/([a-z])([A-Z])/g, '$1 $2').replace(/_/g, ' '));
 }
 /**
- * 'forEach' function
+ * 'toTitleCase' function
  *
- * Iterates over all items in the first level of an object or array
- * and calls an iterator funciton on each item.
+ * Intelligently converts an input string to Title Case.
  *
- * 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
+ * Accepts an optional second parameter with a list of additional
+ * words and abbreviations to force into a particular case.
  *
- * 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.
+ * 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
  *
- * // {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}
+ * // {string} input -
+ * // {string|string[]} forceWords? -
+ * // {string} -
  */
-function forEach(object, fn, recurse = false, rootObject = object, errors = false) {
-    if (isEmpty(object)) {
-        return;
+function toTitleCase(input, forceWords) {
+    if (!isString(input)) {
+        return input;
     }
-    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);
+    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 {
+            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);
+                }
             }
-            fn(value, key, object, rootObject);
-            if (recurse === 'top-down' && (isObject(value) || isArray(value))) {
-                forEach(value, fn, recurse, rootObject);
+            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 (errors) {
-        if (typeof fn !== 'function') {
-            console.error('forEach error: Iterator must be a function.');
-            console.error('function', fn);
+    });
+}
+
+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`;
+        }
+    },
+    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 (!isObject(object) && !isArray(object)) {
-            console.error('forEach error: Input object must be an object or array.');
-            console.error('object', object);
+    },
+    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.`;
         }
-    }
-}
-/**
- * '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);
+        else {
+            return `Must be a multiple of ${error.multipleOfValue}.`;
         }
-        return newObject;
-    }
-    if (errors) {
-        if (typeof fn !== 'function') {
-            console.error('forEachCopy error: Iterator must be a function.');
-            console.error('function', fn);
+    },
+    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 (!isObject(object) && !isArray(object)) {
-            console.error('forEachCopy error: Input object must be an object or array.');
-            console.error('object', object);
+    },
+    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`;
         }
-    }
-}
-/**
- * '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];
+        else {
+            return `Debe ser múltiplo de ${error.multipleOfValue}.`;
         }
-        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]);
+    },
+    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;
         }
-    }
-    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: '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.`;
         }
-    }
-    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];
+        else {
+            return `Doit être un multiple de ${error.multipleOfValue}.`;
         }
-        returnItems = returnItems === null ? [...array] :
-            returnItems.filter(item => array.includes(item));
-        if (!returnItems.length) {
-            return [];
+    },
+    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;
         }
-    }
-    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;
+    },
+    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 {
-            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;
+            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'
+};
 
 class JsonPointer {
     /**
@@ -5106,21 +5106,24 @@ function formatFormData(formData, dataMap, recursiveRefMap, arrayMap, returnEmpt
                         JsonPointer.set(formattedData, dataPointer, newValue);
                     }
                 }
+                // commented out completely as value can be 'null' if not entered
                 // Finish incomplete 'date-time' entries
-                if (dataMap.get(genericPointer).get('schemaFormat') === 'date-time') {
-                    // "2000-03-14T01:59:26.535" -> "2000-03-14T01:59:26.535Z" (add "Z")
-                    if (/^\d\d\d\d-[0-1]\d-[0-3]\d[t\s][0-2]\d:[0-5]\d:[0-5]\d(?:\.\d+)?$/i.test(value)) {
-                        JsonPointer.set(formattedData, dataPointer, `${value}Z`);
-                        // "2000-03-14T01:59" -> "2000-03-14T01:59:00Z" (add ":00Z")
-                    }
-                    else if (/^\d\d\d\d-[0-1]\d-[0-3]\d[t\s][0-2]\d:[0-5]\d$/i.test(value)) {
-                        JsonPointer.set(formattedData, dataPointer, `${value}:00Z`);
-                        // "2000-03-14" -> "2000-03-14T00:00:00Z" (add "T00:00:00Z")
-                    }
-                    else if (fixErrors && /^\d\d\d\d-[0-1]\d-[0-3]\d$/i.test(value)) {
-                        JsonPointer.set(formattedData, dataPointer, `${value}:00:00:00Z`);
-                    }
-                }
+                // if (dataMap.get(genericPointer).get('schemaFormat') === 'date-time') {
+                //   /* commented out-should use same format as datetime-local input
+                //   for initial data to bind back to the input
+                //   // "2000-03-14T01:59:26.535" -> "2000-03-14T01:59:26.535Z" (add "Z")
+                //   if (/^\d\d\d\d-[0-1]\d-[0-3]\d[t\s][0-2]\d:[0-5]\d:[0-5]\d(?:\.\d+)?$/i.test(value)) {
+                //     JsonPointer.set(formattedData, dataPointer, `${value}Z`);
+                //     // "2000-03-14T01:59" -> "2000-03-14T01:59:00Z" (add ":00Z")
+                //   } else if (/^\d\d\d\d-[0-1]\d-[0-3]\d[t\s][0-2]\d:[0-5]\d$/i.test(value)) {
+                //     JsonPointer.set(formattedData, dataPointer, `${value}:00Z`);
+                //     // "2000-03-14" -> "2000-03-14T00:00:00Z" (add "T00:00:00Z")
+                //   } else if (fixErrors && /^\d\d\d\d-[0-1]\d-[0-3]\d$/i.test(value)) {
+                //     JsonPointer.set(formattedData, dataPointer, `${value}:00:00:00Z`);
+                //   }
+                //   */
+                //   JsonPointer.set(formattedData, dataPointer, `${value}`);
+                // }
             }
             else if (typeof value !== 'object' || isDate(value) ||
                 (value === null && returnEmptyFields)) {
@@ -6685,8 +6688,24 @@ class JsonSchemaFormService {
         return '';
     }
     setArrayItemTitle(parentCtx = {}, childNode = null, index = null) {
-        const parentNode = parentCtx.layoutNode;
-        const parentValues = this.getFormControlValue(parentCtx);
+        //for legacy compatibility, parentCtx.layoutNode could either be a value
+        //or have been converted to use Signals
+        let parentCtxAsSignals = {
+            layoutNode: () => {
+                if (isObject(parentCtx.layoutNode)) {
+                    return parentCtx.layoutNode;
+                }
+                return parentCtx.layoutNode();
+            },
+            dataIndex: () => {
+                if (isObject(parentCtx.dataIndex)) {
+                    return parentCtx.dataIndex;
+                }
+                return parentCtx.dataIndex();
+            }
+        };
+        const parentNode = parentCtxAsSignals.layoutNode();
+        const parentValues = this.getFormControlValue(parentCtxAsSignals);
         const isArrayItem = (parentNode.type || '').slice(-5) === 'array' && isArray(parentValues);
         const text = JsonPointer.getFirst(isArrayItem && childNode.type !== '$ref'
             ? [
@@ -6710,9 +6729,9 @@ class JsonSchemaFormService {
         return this.parseText(text, childValue, parentValues, index);
     }
     setItemTitle(ctx) {
-        return !ctx.options.title && /^(\d+|-)$/.test(ctx.layoutNode.name)
+        return !ctx.options.title && /^(\d+|-)$/.test(ctx.layoutNode().name)
             ? null
-            : this.parseText(ctx.options.title || toTitleCase(ctx.layoutNode.name), this.getFormControlValue(this), (this.getFormControlGroup(this) || {}).value, ctx.dataIndex[ctx.dataIndex.length - 1]);
+            : this.parseText(ctx.options.title || toTitleCase(ctx.layoutNode().name), this.getFormControlValue(ctx), (this.getFormControlGroup(ctx) || {}).value, ctx.dataIndex()[ctx.dataIndex().length - 1]);
     }
     evaluateCondition(layoutNode, dataIndex) {
         const arrayIndex = dataIndex && dataIndex[dataIndex.length - 1];
@@ -6751,8 +6770,8 @@ class JsonSchemaFormService {
             return false;
         }
         if (isEmpty(ctx.options)) {
-            ctx.options = !isEmpty((ctx.layoutNode || {}).options)
-                ? ctx.layoutNode.options
+            ctx.options = !isEmpty((ctx.layoutNode() || {}).options)
+                ? ctx.layoutNode().options
                 : cloneDeep(this.formOptions);
         }
         ctx.formControl = this.getFormControl(ctx);
@@ -6788,8 +6807,8 @@ class JsonSchemaFormService {
             });
         }
         else {
-            ctx.controlName = ctx.layoutNode.name;
-            ctx.controlValue = ctx.layoutNode.value || null;
+            ctx.controlName = ctx.layoutNode().name;
+            ctx.controlValue = ctx.layoutNode().value || null;
             const dataPointer = this.getDataPointer(ctx);
             if (bind && dataPointer) {
                 console.error(`warning: control "${dataPointer}" is not bound to the Angular FormGroup.`);
@@ -6846,7 +6865,7 @@ class JsonSchemaFormService {
             ctx.formControl.setValue(value);
             ctx.formControl.markAsDirty();
         }
-        ctx.layoutNode.value = value;
+        ctx.layoutNode().value = value;
         // Set values of any related controls in copyValueTo array
         if (isArray(ctx.options.copyValueTo)) {
             for (const item of ctx.options.copyValueTo) {
@@ -6866,7 +6885,7 @@ class JsonSchemaFormService {
             formArray.removeAt(0);
         }
         // Re-add an item for each checked box
-        const refPointer = removeRecursiveReferences(ctx.layoutNode.dataPointer + '/-', this.dataRecursiveRefMap, this.arrayMap);
+        const refPointer = removeRecursiveReferences(ctx.layoutNode().dataPointer + '/-', this.dataRecursiveRefMap, this.arrayMap);
         for (const checkboxItem of checkboxList) {
             if (checkboxItem.checked) {
                 const newFormControl = buildFormGroup(this.templateRefLibrary[refPointer]);
@@ -6877,32 +6896,32 @@ class JsonSchemaFormService {
         formArray.markAsDirty();
     }
     getFormControl(ctx) {
-        if (!ctx.layoutNode ||
-            !isDefined(ctx.layoutNode.dataPointer) ||
-            ctx.layoutNode.type === '$ref') {
+        if (!ctx || !ctx.layoutNode ||
+            !isDefined(ctx.layoutNode().dataPointer) ||
+            ctx.layoutNode().type === '$ref') {
             return null;
         }
         return getControl(this.formGroup, this.getDataPointer(ctx));
     }
     getFormControlValue(ctx) {
-        if (!ctx.layoutNode ||
-            !isDefined(ctx.layoutNode.dataPointer) ||
-            ctx.layoutNode.type === '$ref') {
+        if (!ctx || !ctx.layoutNode ||
+            !isDefined(ctx.layoutNode().dataPointer) ||
+            ctx.layoutNode().type === '$ref') {
             return null;
         }
         const control = getControl(this.formGroup, this.getDataPointer(ctx));
         return control ? control.value : null;
     }
     getFormControlGroup(ctx) {
-        if (!ctx.layoutNode || !isDefined(ctx.layoutNode.dataPointer)) {
+        if (!ctx || !ctx.layoutNode || !isDefined(ctx.layoutNode().dataPointer)) {
             return null;
         }
         return getControl(this.formGroup, this.getDataPointer(ctx), true);
     }
     getFormControlName(ctx) {
-        if (!ctx.layoutNode ||
-            !isDefined(ctx.layoutNode.dataPointer) ||
-            !hasValue(ctx.dataIndex)) {
+        if (!ctx || !ctx.layoutNode ||
+            !isDefined(ctx.layoutNode().dataPointer) ||
+            !hasValue(ctx.dataIndex())) {
             return null;
         }
         return JsonPointer.toKey(this.getDataPointer(ctx));
@@ -6914,23 +6933,23 @@ class JsonSchemaFormService {
         return JsonPointer.get(this.layout, this.getLayoutPointer(ctx), 0, -2);
     }
     getDataPointer(ctx) {
-        if (!ctx.layoutNode ||
-            !isDefined(ctx.layoutNode.dataPointer) ||
-            !hasValue(ctx.dataIndex)) {
+        if (!ctx || !ctx.layoutNode ||
+            !isDefined(ctx.layoutNode().dataPointer) ||
+            !hasValue(ctx.dataIndex())) {
             return null;
         }
-        return JsonPointer.toIndexedPointer(ctx.layoutNode.dataPointer, ctx.dataIndex, this.arrayMap);
+        return JsonPointer.toIndexedPointer(ctx.layoutNode().dataPointer, ctx.dataIndex(), this.arrayMap);
     }
     getLayoutPointer(ctx) {
-        if (!hasValue(ctx.layoutIndex)) {
+        if (!hasValue(ctx.layoutIndex())) {
             return null;
         }
-        return '/' + ctx.layoutIndex.join('/items/');
+        return '/' + ctx.layoutIndex().join('/items/');
     }
     isControlBound(ctx) {
-        if (!ctx.layoutNode ||
-            !isDefined(ctx.layoutNode.dataPointer) ||
-            !hasValue(ctx.dataIndex)) {
+        if (!ctx || !ctx.layoutNode ||
+            !isDefined(ctx.layoutNode().dataPointer) ||
+            !hasValue(ctx.dataIndex())) {
             return false;
         }
         const controlGroup = this.getFormControlGroup(ctx);
@@ -6938,16 +6957,16 @@ class JsonSchemaFormService {
         return controlGroup ? hasOwn(controlGroup.controls, name) : false;
     }
     addItem(ctx, name) {
-        if (!ctx.layoutNode ||
-            !isDefined(ctx.layoutNode.$ref) ||
-            !hasValue(ctx.dataIndex) ||
-            !hasValue(ctx.layoutIndex)) {
+        if (!ctx || !ctx.layoutNode ||
+            !isDefined(ctx.layoutNode().$ref) ||
+            !hasValue(ctx.dataIndex()) ||
+            !hasValue(ctx.layoutIndex())) {
             return false;
         }
         // Create a new Angular form control from a template in templateRefLibrary
-        const newFormGroup = buildFormGroup(this.templateRefLibrary[ctx.layoutNode.$ref]);
+        const newFormGroup = buildFormGroup(this.templateRefLibrary[ctx.layoutNode().$ref]);
         // Add the new form control to the parent formArray or formGroup
-        if (ctx.layoutNode.arrayItem) {
+        if (ctx.layoutNode().arrayItem) {
             // Add new array item to formArray
             this.getFormControlGroup(ctx).push(newFormGroup);
         }
@@ -6956,10 +6975,10 @@ class JsonSchemaFormService {
             this.getFormControlGroup(ctx).addControl(name || this.getFormControlName(ctx), newFormGroup);
         }
         // Copy a new layoutNode from layoutRefLibrary
-        const newLayoutNode = getLayoutNode(ctx.layoutNode, this);
-        newLayoutNode.arrayItem = ctx.layoutNode.arrayItem;
-        if (ctx.layoutNode.arrayItemType) {
-            newLayoutNode.arrayItemType = ctx.layoutNode.arrayItemType;
+        const newLayoutNode = getLayoutNode(ctx.layoutNode(), this);
+        newLayoutNode.arrayItem = ctx.layoutNode().arrayItem;
+        if (ctx.layoutNode().arrayItemType) {
+            newLayoutNode.arrayItemType = ctx.layoutNode().arrayItemType;
         }
         else {
             delete newLayoutNode.arrayItemType;
@@ -6974,10 +6993,10 @@ class JsonSchemaFormService {
         return true;
     }
     moveArrayItem(ctx, oldIndex, newIndex) {
-        if (!ctx.layoutNode ||
-            !isDefined(ctx.layoutNode.dataPointer) ||
-            !hasValue(ctx.dataIndex) ||
-            !hasValue(ctx.layoutIndex) ||
+        if (!ctx || !ctx.layoutNode ||
+            !isDefined(ctx.layoutNode().dataPointer) ||
+            !hasValue(ctx.dataIndex()) ||
+            !hasValue(ctx.layoutIndex()) ||
             !isDefined(oldIndex) ||
             !isDefined(newIndex) ||
             oldIndex === newIndex) {
@@ -6995,16 +7014,16 @@ class JsonSchemaFormService {
         return true;
     }
     removeItem(ctx) {
-        if (!ctx.layoutNode ||
-            !isDefined(ctx.layoutNode.dataPointer) ||
-            !hasValue(ctx.dataIndex) ||
-            !hasValue(ctx.layoutIndex)) {
+        if (!ctx || !ctx.layoutNode ||
+            !isDefined(ctx.layoutNode().dataPointer) ||
+            !hasValue(ctx.dataIndex()) ||
+            !hasValue(ctx.layoutIndex())) {
             return false;
         }
         // Remove the Angular form control from the parent formArray or formGroup
-        if (ctx.layoutNode.arrayItem) {
+        if (ctx.layoutNode().arrayItem) {
             // Remove array item from formArray
-            this.getFormControlGroup(ctx).removeAt(ctx.dataIndex[ctx.dataIndex.length - 1]);
+            this.getFormControlGroup(ctx).removeAt(ctx.dataIndex()[ctx.dataIndex().length - 1]);
         }
         else {
             // Remove $ref item from formGroup
@@ -7022,15 +7041,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
         }], ctorParameters: () => [] });
 
 class AddReferenceComponent {
-    constructor(jsf) {
-        this.jsf = jsf;
+    constructor() {
+        this.jsf = inject(JsonSchemaFormService);
+        this.layoutNode = input(undefined);
+        this.layoutIndex = input(undefined);
+        this.dataIndex = input(undefined);
     }
     ngOnInit() {
-        this.options = this.layoutNode.options || {};
+        this.options = this.layoutNode().options || {};
     }
     get showAddButton() {
-        return !this.layoutNode.arrayItem ||
-            this.layoutIndex[this.layoutIndex.length - 1] < this.options.maxItems;
+        return !this.layoutNode().arrayItem ||
+            this.layoutIndex()[this.layoutIndex().length - 1] < this.options.maxItems;
     }
     addItem(event) {
         event.preventDefault();
@@ -7038,22 +7060,22 @@ class AddReferenceComponent {
     }
     get buttonText() {
         const parent = {
-            dataIndex: this.dataIndex.slice(0, -1),
-            layoutIndex: this.layoutIndex.slice(0, -1),
+            dataIndex: this.dataIndex().slice(0, -1),
+            layoutIndex: this.layoutIndex().slice(0, -1),
             layoutNode: this.jsf.getParentNode(this)
         };
         return parent.layoutNode.add ||
-            this.jsf.setArrayItemTitle(parent, this.layoutNode, this.itemCount);
+            this.jsf.setArrayItemTitle(parent, this.layoutNode(), this.itemCount);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AddReferenceComponent, deps: [{ token: JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: AddReferenceComponent, selector: "add-reference-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AddReferenceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: AddReferenceComponent, selector: "add-reference-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <button *ngIf="showAddButton"
       [class]="options?.fieldHtmlClass || ''"
       [disabled]="options?.readonly"
       (click)="addItem($event)">
       <span *ngIf="options?.icon" [class]="options?.icon"></span>
       <span *ngIf="options?.title" [innerHTML]="buttonText"></span>
-    </button>`, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.Default }); }
+    </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: "17.3.12", ngImport: i0, type: AddReferenceComponent, decorators: [{
             type: Component,
@@ -7070,22 +7092,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
     </button>`,
                     changeDetection: ChangeDetectionStrategy.Default,
                 }]
-        }], ctorParameters: () => [{ type: JsonSchemaFormService }], propDecorators: { layoutNode: [{
-                type: Input
-            }], layoutIndex: [{
-                type: Input
-            }], dataIndex: [{
-                type: Input
-            }] } });
+        }] });
 
 class ButtonComponent {
-    constructor(jsf) {
-        this.jsf = jsf;
+    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.options = this.layoutNode.options || {};
+        this.options = this.layoutNode().options || {};
         this.jsf.initializeControl(this);
     }
     updateValue(event) {
@@ -7096,24 +7115,24 @@ class ButtonComponent {
             this.jsf.updateValue(this, event.target.value);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ButtonComponent, deps: [{ token: JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ButtonComponent, selector: "button-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: ButtonComponent, 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
         [attr.readonly]="options?.readonly ? 'readonly' : null"
-        [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
+        [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
         [class]="options?.fieldHtmlClass || ''"
         [disabled]="controlDisabled"
         [name]="controlName"
-        [type]="layoutNode?.type"
+        [type]="layoutNode()?.type"
         [value]="controlValue"
         (click)="updateValue($event)">
         <span *ngIf="options?.icon || options?.title"
           [class]="options?.icon"
           [innerHTML]="options?.title"></span>
       </button>
-    </div>`, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    </div>`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
@@ -7125,11 +7144,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
       [class]="options?.htmlClass || ''">
       <button
         [attr.readonly]="options?.readonly ? 'readonly' : null"
-        [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
+        [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
         [class]="options?.fieldHtmlClass || ''"
         [disabled]="controlDisabled"
         [name]="controlName"
-        [type]="layoutNode?.type"
+        [type]="layoutNode()?.type"
         [value]="controlValue"
         (click)="updateValue($event)">
         <span *ngIf="options?.icon || options?.title"
@@ -7138,24 +7157,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
       </button>
     </div>`,
                 }]
-        }], ctorParameters: () => [{ type: JsonSchemaFormService }], propDecorators: { layoutNode: [{
-                type: Input
-            }], layoutIndex: [{
-                type: Input
-            }], dataIndex: [{
-                type: Input
-            }] } });
+        }] });
 
 class CheckboxComponent {
-    constructor(jsf) {
-        this.jsf = jsf;
+    constructor() {
+        this.jsf = inject(JsonSchemaFormService);
         this.controlDisabled = false;
         this.boundControl = false;
         this.trueValue = true;
         this.falseValue = false;
+        this.layoutNode = input(undefined);
+        this.layoutIndex = input(undefined);
+        this.dataIndex = input(undefined);
     }
     ngOnInit() {
-        this.options = this.layoutNode.options || {};
+        this.options = this.layoutNode().options || {};
         this.jsf.initializeControl(this);
         if (this.controlValue === null || this.controlValue === undefined) {
             this.controlValue = this.options.title;
@@ -7168,29 +7184,29 @@ class CheckboxComponent {
     get isChecked() {
         return this.jsf.getFormControlValue(this) === this.trueValue;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CheckboxComponent, deps: [{ token: JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CheckboxComponent, selector: "checkbox-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: CheckboxComponent, 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"
+      [attr.for]="'control' + layoutNode()?._id"
       [class]="options?.itemLabelHtmlClass || ''">
       <input *ngIf="boundControl"
         [formControl]="formControl"
-        [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
+        [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
         [class]="(options?.fieldHtmlClass || '') + (isChecked ?
           (' ' + (options?.activeClass || '') + ' ' + (options?.style?.selected || '')) :
           (' ' + (options?.style?.unselected || '')))"
-        [id]="'control' + layoutNode?._id"
+        [id]="'control' + layoutNode()?._id"
         [name]="controlName"
         [readonly]="options?.readonly ? 'readonly' : null"
         type="checkbox">
       <input *ngIf="!boundControl"
-        [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
+        [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
         [checked]="isChecked ? 'checked' : null"
         [class]="(options?.fieldHtmlClass || '') + (isChecked ?
           (' ' + (options?.activeClass || '') + ' ' + (options?.style?.selected || '')) :
           (' ' + (options?.style?.unselected || '')))"
         [disabled]="controlDisabled"
-        [id]="'control' + layoutNode?._id"
+        [id]="'control' + layoutNode()?._id"
         [name]="controlName"
         [readonly]="options?.readonly ? 'readonly' : null"
         [value]="controlValue"
@@ -7199,7 +7215,7 @@ class CheckboxComponent {
       <span *ngIf="options?.title"
         [style.display]="options?.notitle ? 'none' : ''"
         [innerHTML]="options?.title"></span>
-    </label>`, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
+    </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: "17.3.12", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
@@ -7208,26 +7224,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                     selector: 'checkbox-widget',
                     template: `
     <label
-      [attr.for]="'control' + layoutNode?._id"
+      [attr.for]="'control' + layoutNode()?._id"
       [class]="options?.itemLabelHtmlClass || ''">
       <input *ngIf="boundControl"
         [formControl]="formControl"
-        [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
+        [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
         [class]="(options?.fieldHtmlClass || '') + (isChecked ?
           (' ' + (options?.activeClass || '') + ' ' + (options?.style?.selected || '')) :
           (' ' + (options?.style?.unselected || '')))"
-        [id]="'control' + layoutNode?._id"
+        [id]="'control' + layoutNode()?._id"
         [name]="controlName"
         [readonly]="options?.readonly ? 'readonly' : null"
         type="checkbox">
       <input *ngIf="!boundControl"
-        [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
+        [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
         [checked]="isChecked ? 'checked' : null"
         [class]="(options?.fieldHtmlClass || '') + (isChecked ?
           (' ' + (options?.activeClass || '') + ' ' + (options?.style?.selected || '')) :
           (' ' + (options?.style?.unselected || '')))"
         [disabled]="controlDisabled"
-        [id]="'control' + layoutNode?._id"
+        [id]="'control' + layoutNode()?._id"
         [name]="controlName"
         [readonly]="options?.readonly ? 'readonly' : null"
         [value]="controlValue"
@@ -7238,25 +7254,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
         [innerHTML]="options?.title"></span>
     </label>`,
                 }]
-        }], ctorParameters: () => [{ type: JsonSchemaFormService }], propDecorators: { layoutNode: [{
-                type: Input
-            }], layoutIndex: [{
-                type: Input
-            }], dataIndex: [{
-                type: Input
-            }] } });
+        }] });
 
 class CheckboxesComponent {
-    constructor(jsf) {
-        this.jsf = jsf;
+    constructor() {
+        this.jsf = inject(JsonSchemaFormService);
         this.controlDisabled = false;
         this.boundControl = false;
         this.checkboxList = [];
+        this.layoutNode = input(undefined);
+        this.layoutIndex = input(undefined);
+        this.dataIndex = input(undefined);
     }
     ngOnInit() {
-        this.options = this.layoutNode.options || {};
-        this.layoutOrientation = (this.layoutNode.type === 'checkboxes-inline' ||
-            this.layoutNode.type === 'checkboxbuttons') ? 'horizontal' : 'vertical';
+        this.options = this.layoutNode().options || {};
+        const layoutNode = this.layoutNode();
+        this.layoutOrientation = (layoutNode.type === 'checkboxes-inline' ||
+            layoutNode.type === 'checkboxbuttons') ? 'horizontal' : 'vertical';
         this.jsf.initializeControl(this);
         this.checkboxList = buildTitleMap(this.options.titleMap || this.options.enumNames, this.options.enum, true);
         if (this.boundControl) {
@@ -7274,8 +7288,8 @@ class CheckboxesComponent {
             this.jsf.updateArrayCheckboxList(this, this.checkboxList);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CheckboxesComponent, deps: [{ token: JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CheckboxesComponent, selector: "checkboxes-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CheckboxesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: CheckboxesComponent, 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' : ''"
@@ -7284,7 +7298,7 @@ class CheckboxesComponent {
     <!-- 'horizontal' = checkboxes-inline or checkboxbuttons -->
     <div *ngIf="layoutOrientation === 'horizontal'" [class]="options?.htmlClass || ''">
       <label *ngFor="let checkboxItem of checkboxList"
-        [attr.for]="'control' + layoutNode?._id + '/' + checkboxItem.value"
+        [attr.for]="'control' + layoutNode()?._id + '/' + checkboxItem.value"
         [class]="(options?.itemLabelHtmlClass || '') + (checkboxItem.checked ?
           (' ' + (options?.activeClass || '') + ' ' + (options?.style?.selected || '')) :
           (' ' + (options?.style?.unselected || '')))">
@@ -7293,7 +7307,7 @@ class CheckboxesComponent {
           [checked]="checkboxItem.checked"
           [class]="options?.fieldHtmlClass || ''"
           [disabled]="controlDisabled"
-          [id]="'control' + layoutNode?._id + '/' + checkboxItem.value"
+          [id]="'control' + layoutNode()?._id + '/' + checkboxItem.value"
           [name]="checkboxItem?.name"
           [readonly]="options?.readonly ? 'readonly' : null"
           [value]="checkboxItem.value"
@@ -7306,7 +7320,7 @@ class CheckboxesComponent {
     <div *ngIf="layoutOrientation === 'vertical'">
       <div *ngFor="let checkboxItem of checkboxList" [class]="options?.htmlClass || ''">
         <label
-          [attr.for]="'control' + layoutNode?._id + '/' + checkboxItem.value"
+          [attr.for]="'control' + layoutNode()?._id + '/' + checkboxItem.value"
           [class]="(options?.itemLabelHtmlClass || '') + (checkboxItem.checked ?
             (' ' + (options?.activeClass || '') + ' ' + (options?.style?.selected || '')) :
             (' ' + (options?.style?.unselected || '')))">
@@ -7323,7 +7337,7 @@ class CheckboxesComponent {
           <span [innerHTML]="checkboxItem?.name"></span>
         </label>
       </div>
-    </div>`, isInline: true, dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    </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: "17.3.12", ngImport: i0, type: CheckboxesComponent, decorators: [{
             type: Component,
@@ -7339,7 +7353,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
     <!-- 'horizontal' = checkboxes-inline or checkboxbuttons -->
     <div *ngIf="layoutOrientation === 'horizontal'" [class]="options?.htmlClass || ''">
       <label *ngFor="let checkboxItem of checkboxList"
-        [attr.for]="'control' + layoutNode?._id + '/' + checkboxItem.value"
+        [attr.for]="'control' + layoutNode()?._id + '/' + checkboxItem.value"
         [class]="(options?.itemLabelHtmlClass || '') + (checkboxItem.checked ?
           (' ' + (options?.activeClass || '') + ' ' + (options?.style?.selected || '')) :
           (' ' + (options?.style?.unselected || '')))">
@@ -7348,7 +7362,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
           [checked]="checkboxItem.checked"
           [class]="options?.fieldHtmlClass || ''"
           [disabled]="controlDisabled"
-          [id]="'control' + layoutNode?._id + '/' + checkboxItem.value"
+          [id]="'control' + layoutNode()?._id + '/' + checkboxItem.value"
           [name]="checkboxItem?.name"
           [readonly]="options?.readonly ? 'readonly' : null"
           [value]="checkboxItem.value"
@@ -7361,7 +7375,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
     <div *ngIf="layoutOrientation === 'vertical'">
       <div *ngFor="let checkboxItem of checkboxList" [class]="options?.htmlClass || ''">
         <label
-          [attr.for]="'control' + layoutNode?._id + '/' + checkboxItem.value"
+          [attr.for]="'control' + layoutNode()?._id + '/' + checkboxItem.value"
           [class]="(options?.itemLabelHtmlClass || '') + (checkboxItem.checked ?
             (' ' + (options?.activeClass || '') + ' ' + (options?.style?.selected || '')) :
             (' ' + (options?.style?.unselected || '')))">
@@ -7380,30 +7394,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
       </div>
     </div>`,
                 }]
-        }], ctorParameters: () => [{ type: JsonSchemaFormService }], propDecorators: { layoutNode: [{
-                type: Input
-            }], layoutIndex: [{
-                type: Input
-            }], dataIndex: [{
-                type: Input
-            }] } });
+        }] });
 
 // TODO: Add this control
 class FileComponent {
-    constructor(jsf) {
-        this.jsf = jsf;
+    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.options = this.layoutNode.options || {};
+        this.options = this.layoutNode().options || {};
         this.jsf.initializeControl(this);
     }
     updateValue(event) {
         this.jsf.updateValue(this, event.target.value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FileComponent, deps: [{ token: JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FileComponent, selector: "file-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: ``, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: FileComponent, 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: "17.3.12", ngImport: i0, type: FileComponent, decorators: [{
             type: Component,
@@ -7412,53 +7423,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                     selector: 'file-widget',
                     template: ``,
                 }]
-        }], ctorParameters: () => [{ type: JsonSchemaFormService }], propDecorators: { layoutNode: [{
-                type: Input
-            }], layoutIndex: [{
-                type: Input
-            }], dataIndex: [{
-                type: Input
-            }] } });
+        }] });
 
 class InputComponent {
-    constructor(jsf) {
-        this.jsf = jsf;
+    constructor() {
+        this.jsf = inject(JsonSchemaFormService);
         this.controlDisabled = false;
         this.boundControl = false;
         this.autoCompleteList = [];
+        this.layoutNode = input(undefined);
+        this.layoutIndex = input(undefined);
+        this.dataIndex = input(undefined);
     }
     ngOnInit() {
-        this.options = this.layoutNode.options || {};
+        this.options = this.layoutNode().options || {};
         this.jsf.initializeControl(this);
     }
     updateValue(event) {
         this.jsf.updateValue(this, event.target.value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputComponent, deps: [{ token: JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: InputComponent, selector: "input-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: InputComponent, selector: "input-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <div [class]="options?.htmlClass || ''">
       <label *ngIf="options?.title"
-        [attr.for]="'control' + layoutNode?._id"
+        [attr.for]="'control' + layoutNode()?._id"
         [class]="options?.labelHtmlClass || ''"
         [style.display]="options?.notitle ? 'none' : ''"
         [innerHTML]="options?.title"></label>
       <input *ngIf="boundControl"
         [formControl]="formControl"
-        [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
-        [attr.list]="'control' + layoutNode?._id + 'Autocomplete'"
+        [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
+        [attr.list]="'control' + layoutNode()?._id + 'Autocomplete'"
         [attr.maxlength]="options?.maxLength"
         [attr.minlength]="options?.minLength"
         [attr.pattern]="options?.pattern"
         [attr.placeholder]="options?.placeholder"
         [attr.required]="options?.required"
         [class]="options?.fieldHtmlClass || ''"
-        [id]="'control' + layoutNode?._id"
+        [id]="'control' + layoutNode()?._id"
         [name]="controlName"
         [readonly]="options?.readonly ? 'readonly' : null"
-        [type]="layoutNode?.type">
+        [type]="layoutNode()?.type">
       <input *ngIf="!boundControl"
-        [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
-        [attr.list]="'control' + layoutNode?._id + 'Autocomplete'"
+        [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
+        [attr.list]="'control' + layoutNode()?._id + 'Autocomplete'"
         [attr.maxlength]="options?.maxLength"
         [attr.minlength]="options?.minLength"
         [attr.pattern]="options?.pattern"
@@ -7466,17 +7474,17 @@ class InputComponent {
         [attr.required]="options?.required"
         [class]="options?.fieldHtmlClass || ''"
         [disabled]="controlDisabled"
-        [id]="'control' + layoutNode?._id"
+        [id]="'control' + layoutNode()?._id"
         [name]="controlName"
         [readonly]="options?.readonly ? 'readonly' : null"
-        [type]="layoutNode?.type"
+        [type]="layoutNode()?.type"
         [value]="controlValue"
         (input)="updateValue($event)">
         <datalist *ngIf="options?.typeahead?.source"
-          [id]="'control' + layoutNode?._id + 'Autocomplete'">
+          [id]="'control' + layoutNode()?._id + 'Autocomplete'">
           <option *ngFor="let word of options?.typeahead?.source" [value]="word">
         </datalist>
-    </div>`, isInline: true, dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
+    </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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputComponent, decorators: [{
             type: Component,
@@ -7486,27 +7494,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                     template: `
     <div [class]="options?.htmlClass || ''">
       <label *ngIf="options?.title"
-        [attr.for]="'control' + layoutNode?._id"
+        [attr.for]="'control' + layoutNode()?._id"
         [class]="options?.labelHtmlClass || ''"
         [style.display]="options?.notitle ? 'none' : ''"
         [innerHTML]="options?.title"></label>
       <input *ngIf="boundControl"
         [formControl]="formControl"
-        [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
-        [attr.list]="'control' + layoutNode?._id + 'Autocomplete'"
+        [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
+        [attr.list]="'control' + layoutNode()?._id + 'Autocomplete'"
         [attr.maxlength]="options?.maxLength"
         [attr.minlength]="options?.minLength"
         [attr.pattern]="options?.pattern"
         [attr.placeholder]="options?.placeholder"
         [attr.required]="options?.required"
         [class]="options?.fieldHtmlClass || ''"
-        [id]="'control' + layoutNode?._id"
+        [id]="'control' + layoutNode()?._id"
         [name]="controlName"
         [readonly]="options?.readonly ? 'readonly' : null"
-        [type]="layoutNode?.type">
+        [type]="layoutNode()?.type">
       <input *ngIf="!boundControl"
-        [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
-        [attr.list]="'control' + layoutNode?._id + 'Autocomplete'"
+        [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
+        [attr.list]="'control' + layoutNode()?._id + 'Autocomplete'"
         [attr.maxlength]="options?.maxLength"
         [attr.minlength]="options?.minLength"
         [attr.pattern]="options?.pattern"
@@ -7514,41 +7522,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
         [attr.required]="options?.required"
         [class]="options?.fieldHtmlClass || ''"
         [disabled]="controlDisabled"
-        [id]="'control' + layoutNode?._id"
+        [id]="'control' + layoutNode()?._id"
         [name]="controlName"
         [readonly]="options?.readonly ? 'readonly' : null"
-        [type]="layoutNode?.type"
+        [type]="layoutNode()?.type"
         [value]="controlValue"
         (input)="updateValue($event)">
         <datalist *ngIf="options?.typeahead?.source"
-          [id]="'control' + layoutNode?._id + 'Autocomplete'">
+          [id]="'control' + layoutNode()?._id + 'Autocomplete'">
           <option *ngFor="let word of options?.typeahead?.source" [value]="word">
         </datalist>
     </div>`,
                 }]
-        }], ctorParameters: () => [{ type: JsonSchemaFormService }], propDecorators: { layoutNode: [{
-                type: Input
-            }], layoutIndex: [{
-                type: Input
-            }], dataIndex: [{
-                type: Input
-            }] } });
+        }] });
 
 class MessageComponent {
-    constructor(jsf) {
-        this.jsf = jsf;
+    constructor() {
+        this.jsf = inject(JsonSchemaFormService);
         this.message = null;
+        this.layoutNode = input(undefined);
+        this.layoutIndex = input(undefined);
+        this.dataIndex = input(undefined);
     }
     ngOnInit() {
-        this.options = this.layoutNode.options || {};
+        this.options = this.layoutNode().options || {};
         this.message = this.options.help || this.options.helpvalue ||
             this.options.msg || this.options.message;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MessageComponent, deps: [{ token: JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: MessageComponent, selector: "message-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: MessageComponent, 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: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+      [innerHTML]="message"></span>`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MessageComponent, decorators: [{
             type: Component,
@@ -7560,17 +7565,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
       [class]="options?.labelHtmlClass || ''"
       [innerHTML]="message"></span>`,
                 }]
-        }], ctorParameters: () => [{ type: JsonSchemaFormService }], propDecorators: { layoutNode: [{
-                type: Input
-            }], layoutIndex: [{
-                type: Input
-            }], dataIndex: [{
-                type: Input
-            }] } });
+        }] });
 
 class NoneComponent {
+    constructor() {
+        this.layoutNode = input(undefined);
+        this.layoutIndex = input(undefined);
+        this.dataIndex = input(undefined);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NoneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NoneComponent, selector: "none-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: ``, isInline: true }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: NoneComponent, 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: "17.3.12", ngImport: i0, type: NoneComponent, decorators: [{
             type: Component,
@@ -7579,45 +7583,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                     selector: 'none-widget',
                     template: ``,
                 }]
-        }], propDecorators: { layoutNode: [{
-                type: Input
-            }], layoutIndex: [{
-                type: Input
-            }], dataIndex: [{
-                type: Input
-            }] } });
+        }] });
 
 class NumberComponent {
-    constructor(jsf) {
-        this.jsf = jsf;
+    constructor() {
+        this.jsf = inject(JsonSchemaFormService);
         this.controlDisabled = false;
         this.boundControl = false;
         this.allowNegative = true;
         this.allowDecimal = true;
         this.allowExponents = false;
         this.lastValidNumber = '';
+        this.layoutNode = input(undefined);
+        this.layoutIndex = input(undefined);
+        this.dataIndex = input(undefined);
     }
     ngOnInit() {
-        this.options = this.layoutNode.options || {};
+        this.options = this.layoutNode().options || {};
         this.jsf.initializeControl(this);
-        if (this.layoutNode.dataType === 'integer') {
+        if (this.layoutNode().dataType === 'integer') {
             this.allowDecimal = false;
         }
     }
     updateValue(event) {
         this.jsf.updateValue(this, event.target.value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NumberComponent, deps: [{ token: JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NumberComponent, selector: "number-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: NumberComponent, selector: "number-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <div [class]="options?.htmlClass || ''">
       <label *ngIf="options?.title"
-        [attr.for]="'control' + layoutNode?._id"
+        [attr.for]="'control' + layoutNode()?._id"
         [class]="options?.labelHtmlClass || ''"
         [style.display]="options?.notitle ? 'none' : ''"
         [innerHTML]="options?.title"></label>
       <input *ngIf="boundControl"
         [formControl]="formControl"
-        [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
+        [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
         [attr.max]="options?.maximum"
         [attr.min]="options?.minimum"
         [attr.placeholder]="options?.placeholder"
@@ -7625,13 +7626,13 @@ class NumberComponent {
         [attr.readonly]="options?.readonly ? 'readonly' : null"
         [attr.step]="options?.multipleOf || options?.step || 'any'"
         [class]="options?.fieldHtmlClass || ''"
-        [id]="'control' + layoutNode?._id"
+        [id]="'control' + layoutNode()?._id"
         [name]="controlName"
         [readonly]="options?.readonly ? 'readonly' : null"
         [title]="lastValidNumber"
-        [type]="layoutNode?.type === 'range' ? 'range' : 'number'">
+        [type]="layoutNode()?.type === 'range' ? 'range' : 'number'">
       <input *ngIf="!boundControl"
-        [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
+        [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
         [attr.max]="options?.maximum"
         [attr.min]="options?.minimum"
         [attr.placeholder]="options?.placeholder"
@@ -7640,15 +7641,15 @@ class NumberComponent {
         [attr.step]="options?.multipleOf || options?.step || 'any'"
         [class]="options?.fieldHtmlClass || ''"
         [disabled]="controlDisabled"
-        [id]="'control' + layoutNode?._id"
+        [id]="'control' + layoutNode()?._id"
         [name]="controlName"
         [readonly]="options?.readonly ? 'readonly' : null"
         [title]="lastValidNumber"
-        [type]="layoutNode?.type === 'range' ? 'range' : 'number'"
+        [type]="layoutNode()?.type === 'range' ? 'range' : 'number'"
         [value]="controlValue"
         (input)="updateValue($event)">
-      <span *ngIf="layoutNode?.type === 'range'" [innerHTML]="controlValue"></span>
-    </div>`, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
+      <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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NumberComponent, decorators: [{
             type: Component,
@@ -7658,13 +7659,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                     template: `
     <div [class]="options?.htmlClass || ''">
       <label *ngIf="options?.title"
-        [attr.for]="'control' + layoutNode?._id"
+        [attr.for]="'control' + layoutNode()?._id"
         [class]="options?.labelHtmlClass || ''"
         [style.display]="options?.notitle ? 'none' : ''"
         [innerHTML]="options?.title"></label>
       <input *ngIf="boundControl"
         [formControl]="formControl"
-        [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
+        [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
         [attr.max]="options?.maximum"
         [attr.min]="options?.minimum"
         [attr.placeholder]="options?.placeholder"
@@ -7672,13 +7673,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
         [attr.readonly]="options?.readonly ? 'readonly' : null"
         [attr.step]="options?.multipleOf || options?.step || 'any'"
         [class]="options?.fieldHtmlClass || ''"
-        [id]="'control' + layoutNode?._id"
+        [id]="'control' + layoutNode()?._id"
         [name]="controlName"
         [readonly]="options?.readonly ? 'readonly' : null"
         [title]="lastValidNumber"
-        [type]="layoutNode?.type === 'range' ? 'range' : 'number'">
+        [type]="layoutNode()?.type === 'range' ? 'range' : 'number'">
       <input *ngIf="!boundControl"
-        [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
+        [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
         [attr.max]="options?.maximum"
         [attr.min]="options?.minimum"
         [attr.placeholder]="options?.placeholder"
@@ -7687,40 +7688,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
         [attr.step]="options?.multipleOf || options?.step || 'any'"
         [class]="options?.fieldHtmlClass || ''"
         [disabled]="controlDisabled"
-        [id]="'control' + layoutNode?._id"
+        [id]="'control' + layoutNode()?._id"
         [name]="controlName"
         [readonly]="options?.readonly ? 'readonly' : null"
         [title]="lastValidNumber"
-        [type]="layoutNode?.type === 'range' ? 'range' : 'number'"
+        [type]="layoutNode()?.type === 'range' ? 'range' : 'number'"
         [value]="controlValue"
         (input)="updateValue($event)">
-      <span *ngIf="layoutNode?.type === 'range'" [innerHTML]="controlValue"></span>
+      <span *ngIf="layoutNode()?.type === 'range'" [innerHTML]="controlValue"></span>
     </div>`,
                 }]
-        }], ctorParameters: () => [{ type: JsonSchemaFormService }], propDecorators: { layoutNode: [{
-                type: Input
-            }], layoutIndex: [{
-                type: Input
-            }], dataIndex: [{
-                type: Input
-            }] } });
+        }] });
 
 // TODO: Add this control
 class OneOfComponent {
-    constructor(jsf) {
-        this.jsf = jsf;
+    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.options = this.layoutNode.options || {};
+        this.options = this.layoutNode().options || {};
         this.jsf.initializeControl(this);
     }
     updateValue(event) {
         this.jsf.updateValue(this, event.target.value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OneOfComponent, deps: [{ token: JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: OneOfComponent, selector: "one-of-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: ``, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OneOfComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: OneOfComponent, 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: "17.3.12", ngImport: i0, type: OneOfComponent, decorators: [{
             type: Component,
@@ -7729,26 +7727,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                     selector: 'one-of-widget',
                     template: ``,
                 }]
-        }], ctorParameters: () => [{ type: JsonSchemaFormService }], propDecorators: { layoutNode: [{
-                type: Input
-            }], layoutIndex: [{
-                type: Input
-            }], dataIndex: [{
-                type: Input
-            }] } });
+        }] });
 
 class RadiosComponent {
-    constructor(jsf) {
-        this.jsf = jsf;
+    constructor() {
+        this.jsf = inject(JsonSchemaFormService);
         this.controlDisabled = false;
         this.boundControl = false;
         this.layoutOrientation = 'vertical';
         this.radiosList = [];
+        this.layoutNode = input(undefined);
+        this.layoutIndex = input(undefined);
+        this.dataIndex = input(undefined);
     }
     ngOnInit() {
-        this.options = this.layoutNode.options || {};
-        if (this.layoutNode.type === 'radios-inline' ||
-            this.layoutNode.type === 'radiobuttons') {
+        this.options = this.layoutNode().options || {};
+        const layoutNode = this.layoutNode();
+        if (layoutNode.type === 'radios-inline' ||
+            layoutNode.type === 'radiobuttons') {
             this.layoutOrientation = 'horizontal';
         }
         this.radiosList = buildTitleMap(this.options.titleMap || this.options.enumNames, this.options.enum, true);
@@ -7757,10 +7753,10 @@ class RadiosComponent {
     updateValue(event) {
         this.jsf.updateValue(this, event.target.value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RadiosComponent, deps: [{ token: JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: RadiosComponent, selector: "radios-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RadiosComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: RadiosComponent, 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"
+      [attr.for]="'control' + layoutNode()?._id"
       [class]="options?.labelHtmlClass || ''"
       [style.display]="options?.notitle ? 'none' : ''"
       [innerHTML]="options?.title"></label>
@@ -7769,19 +7765,19 @@ class RadiosComponent {
     <div *ngIf="layoutOrientation === 'horizontal'"
       [class]="options?.htmlClass || ''">
       <label *ngFor="let radioItem of radiosList"
-        [attr.for]="'control' + layoutNode?._id + '/' + radioItem?.value"
+        [attr.for]="'control' + layoutNode()?._id + '/' + radioItem?.value"
         [class]="(options?.itemLabelHtmlClass || '') +
           ((controlValue + '' === radioItem?.value + '') ?
           (' ' + (options?.activeClass || '') + ' ' + (options?.style?.selected || '')) :
           (' ' + (options?.style?.unselected || '')))">
         <input type="radio"
-          [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
+          [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
           [attr.readonly]="options?.readonly ? 'readonly' : null"
           [attr.required]="options?.required"
           [checked]="radioItem?.value === controlValue"
           [class]="options?.fieldHtmlClass || ''"
           [disabled]="controlDisabled"
-          [id]="'control' + layoutNode?._id + '/' + radioItem?.value"
+          [id]="'control' + layoutNode()?._id + '/' + radioItem?.value"
           [name]="controlName"
           [value]="radioItem?.value"
           (change)="updateValue($event)">
@@ -7794,26 +7790,26 @@ class RadiosComponent {
       <div *ngFor="let radioItem of radiosList"
         [class]="options?.htmlClass || ''">
         <label
-          [attr.for]="'control' + layoutNode?._id + '/' + radioItem?.value"
+          [attr.for]="'control' + layoutNode()?._id + '/' + radioItem?.value"
           [class]="(options?.itemLabelHtmlClass || '') +
             ((controlValue + '' === radioItem?.value + '') ?
             (' ' + (options?.activeClass || '') + ' ' + (options?.style?.selected || '')) :
             (' ' + (options?.style?.unselected || '')))">
           <input type="radio"
-            [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
+            [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
             [attr.readonly]="options?.readonly ? 'readonly' : null"
             [attr.required]="options?.required"
             [checked]="radioItem?.value === controlValue"
             [class]="options?.fieldHtmlClass || ''"
             [disabled]="controlDisabled"
-            [id]="'control' + layoutNode?._id + '/' + radioItem?.value"
+            [id]="'control' + layoutNode()?._id + '/' + radioItem?.value"
             [name]="controlName"
             [value]="radioItem?.value"
             (change)="updateValue($event)">
           <span [innerHTML]="radioItem?.name"></span>
         </label>
       </div>
-    </div>`, isInline: true, dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    </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: "17.3.12", ngImport: i0, type: RadiosComponent, decorators: [{
             type: Component,
@@ -7822,7 +7818,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                     selector: 'radios-widget',
                     template: `
     <label *ngIf="options?.title"
-      [attr.for]="'control' + layoutNode?._id"
+      [attr.for]="'control' + layoutNode()?._id"
       [class]="options?.labelHtmlClass || ''"
       [style.display]="options?.notitle ? 'none' : ''"
       [innerHTML]="options?.title"></label>
@@ -7831,19 +7827,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
     <div *ngIf="layoutOrientation === 'horizontal'"
       [class]="options?.htmlClass || ''">
       <label *ngFor="let radioItem of radiosList"
-        [attr.for]="'control' + layoutNode?._id + '/' + radioItem?.value"
+        [attr.for]="'control' + layoutNode()?._id + '/' + radioItem?.value"
         [class]="(options?.itemLabelHtmlClass || '') +
           ((controlValue + '' === radioItem?.value + '') ?
           (' ' + (options?.activeClass || '') + ' ' + (options?.style?.selected || '')) :
           (' ' + (options?.style?.unselected || '')))">
         <input type="radio"
-          [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
+          [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
           [attr.readonly]="options?.readonly ? 'readonly' : null"
           [attr.required]="options?.required"
           [checked]="radioItem?.value === controlValue"
           [class]="options?.fieldHtmlClass || ''"
           [disabled]="controlDisabled"
-          [id]="'control' + layoutNode?._id + '/' + radioItem?.value"
+          [id]="'control' + layoutNode()?._id + '/' + radioItem?.value"
           [name]="controlName"
           [value]="radioItem?.value"
           (change)="updateValue($event)">
@@ -7856,19 +7852,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
       <div *ngFor="let radioItem of radiosList"
         [class]="options?.htmlClass || ''">
         <label
-          [attr.for]="'control' + layoutNode?._id + '/' + radioItem?.value"
+          [attr.for]="'control' + layoutNode()?._id + '/' + radioItem?.value"
           [class]="(options?.itemLabelHtmlClass || '') +
             ((controlValue + '' === radioItem?.value + '') ?
             (' ' + (options?.activeClass || '') + ' ' + (options?.style?.selected || '')) :
             (' ' + (options?.style?.unselected || '')))">
           <input type="radio"
-            [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
+            [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
             [attr.readonly]="options?.readonly ? 'readonly' : null"
             [attr.required]="options?.required"
             [checked]="radioItem?.value === controlValue"
             [class]="options?.fieldHtmlClass || ''"
             [disabled]="controlDisabled"
-            [id]="'control' + layoutNode?._id + '/' + radioItem?.value"
+            [id]="'control' + layoutNode()?._id + '/' + radioItem?.value"
             [name]="controlName"
             [value]="radioItem?.value"
             (change)="updateValue($event)">
@@ -7877,19 +7873,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
       </div>
     </div>`,
                 }]
-        }], ctorParameters: () => [{ type: JsonSchemaFormService }], propDecorators: { layoutNode: [{
-                type: Input
-            }], layoutIndex: [{
-                type: Input
-            }], dataIndex: [{
-                type: Input
-            }] } });
+        }] });
 
 class SelectFrameworkComponent {
-    constructor(componentFactory, jsf) {
-        this.componentFactory = componentFactory;
-        this.jsf = jsf;
+    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();
@@ -7898,8 +7892,9 @@ class SelectFrameworkComponent {
         this.updateComponent();
     }
     updateComponent() {
-        if (this.widgetContainer && !this.newComponent && this.jsf.framework) {
-            this.newComponent = this.widgetContainer.createComponent(this.componentFactory.resolveComponentFactory(this.jsf.framework));
+        const widgetContainer = this.widgetContainer();
+        if (widgetContainer && !this.newComponent && this.jsf.framework) {
+            this.newComponent = widgetContainer.createComponent(this.componentFactory.resolveComponentFactory(this.jsf.framework));
             //TODO fix all deprecated calls and test 
             //this.widgetContainer.createComponent<any>(this.jsf.framework)
         }
@@ -7909,8 +7904,8 @@ class SelectFrameworkComponent {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectFrameworkComponent, deps: [{ token: i0.ComponentFactoryResolver }, { token: JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SelectFrameworkComponent, selector: "select-framework-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, viewQueries: [{ propertyName: "widgetContainer", first: true, predicate: ["widgetContainer"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: `<div #widgetContainer></div>`, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectFrameworkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "17.3.12", type: SelectFrameworkComponent, 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: "17.3.12", ngImport: i0, type: SelectFrameworkComponent, decorators: [{
             type: Component,
@@ -7919,19 +7914,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                     selector: 'select-framework-widget',
                     template: `<div #widgetContainer></div>`,
                 }]
-        }], ctorParameters: () => [{ type: i0.ComponentFactoryResolver }, { type: JsonSchemaFormService }], propDecorators: { layoutNode: [{
-                type: Input
-            }], layoutIndex: [{
-                type: Input
-            }], dataIndex: [{
-                type: Input
-            }], widgetContainer: [{
-                type: ViewChild,
-                args: ['widgetContainer', {
-                        read: ViewContainerRef,
-                        static: true
-                    }]
-            }] } });
+        }] });
 
 /**
  * OrderableDirective
@@ -7955,18 +7938,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * - drop: remove 'drag-target-...' classes from element, move dropped array item
  */
 class OrderableDirective {
-    constructor(elementRef, jsf, ngZone) {
-        this.elementRef = elementRef;
-        this.jsf = jsf;
-        this.ngZone = ngZone;
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this.jsf = inject(JsonSchemaFormService);
+        this.ngZone = inject(NgZone);
         this.overParentElement = false;
         this.overChildElement = false;
+        this.orderable = input(undefined);
+        this.layoutNode = input(undefined);
+        this.layoutIndex = input(undefined);
+        this.dataIndex = input(undefined);
     }
     ngOnInit() {
-        if (this.orderable && this.layoutNode && this.layoutIndex && this.dataIndex) {
+        const layoutIndex = this.layoutIndex();
+        if (this.orderable() && this.layoutNode() && layoutIndex && this.dataIndex()) {
             this.element = this.elementRef.nativeElement;
             this.element.draggable = true;
-            this.arrayLayoutIndex = 'move:' + this.layoutIndex.slice(0, -1).toString();
+            this.arrayLayoutIndex = 'move:' + layoutIndex.slice(0, -1).toString();
             this.ngZone.runOutsideAngular(() => {
                 // Listeners for movable element being dragged:
                 this.element.addEventListener('dragstart', (event) => {
@@ -7974,7 +7962,7 @@ class OrderableDirective {
                     event.dataTransfer.setData('text', '');
                     // Hack to bypass stupid HTML drag-and-drop dataTransfer protection
                     // so drag source info will be available on dragenter
-                    const sourceArrayIndex = this.dataIndex[this.dataIndex.length - 1];
+                    const sourceArrayIndex = this.dataIndex()[this.dataIndex().length - 1];
                     sessionStorage.setItem(this.arrayLayoutIndex, sourceArrayIndex + '');
                 });
                 this.element.addEventListener('dragover', (event) => {
@@ -7996,10 +7984,10 @@ class OrderableDirective {
                     }
                     const sourceArrayIndex = sessionStorage.getItem(this.arrayLayoutIndex);
                     if (sourceArrayIndex !== null) {
-                        if (this.dataIndex[this.dataIndex.length - 1] < +sourceArrayIndex) {
+                        if (this.dataIndex()[this.dataIndex().length - 1] < +sourceArrayIndex) {
                             this.element.classList.add('drag-target-top');
                         }
-                        else if (this.dataIndex[this.dataIndex.length - 1] > +sourceArrayIndex) {
+                        else if (this.dataIndex()[this.dataIndex().length - 1] > +sourceArrayIndex) {
                             this.element.classList.add('drag-target-bottom');
                         }
                     }
@@ -8023,7 +8011,7 @@ class OrderableDirective {
                     this.element.classList.remove('drag-target-bottom');
                     // Confirm that drop target is another item in the same array as source item
                     const sourceArrayIndex = sessionStorage.getItem(this.arrayLayoutIndex);
-                    const destArrayIndex = this.dataIndex[this.dataIndex.length - 1];
+                    const destArrayIndex = this.dataIndex()[this.dataIndex().length - 1];
                     if (sourceArrayIndex !== null && +sourceArrayIndex !== destArrayIndex) {
                         // Move array item
                         this.jsf.moveArrayItem(this, +sourceArrayIndex, destArrayIndex);
@@ -8034,8 +8022,8 @@ class OrderableDirective {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OrderableDirective, deps: [{ token: i0.ElementRef }, { token: JsonSchemaFormService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: OrderableDirective, selector: "[orderable]", inputs: { orderable: "orderable", layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OrderableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "17.3.12", type: OrderableDirective, 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: "17.3.12", ngImport: i0, type: OrderableDirective, decorators: [{
             type: Directive,
@@ -8043,24 +8031,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                     // tslint:disable-next-line:directive-selector
                     selector: '[orderable]',
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: JsonSchemaFormService }, { type: i0.NgZone }], propDecorators: { orderable: [{
-                type: Input
-            }], layoutNode: [{
-                type: Input
-            }], layoutIndex: [{
-                type: Input
-            }], dataIndex: [{
-                type: Input
-            }] } });
+        }] });
 
 class RootComponent {
-    constructor(jsf) {
-        this.jsf = jsf;
-        this.isFlexItem = false;
+    constructor() {
+        this.jsf = inject(JsonSchemaFormService);
+        this.dataIndex = input(undefined);
+        this.layoutIndex = input(undefined);
+        this.layout = input(undefined);
+        this.isOrderable = input(undefined);
+        this.isFlexItem = input(false);
     }
     isDraggable(node) {
         return node.arrayItem && node.type !== '$ref' &&
-            node.arrayItemType === 'list' && this.isOrderable !== false;
+            node.arrayItemType === 'list' && this.isOrderable() !== false;
     }
     // Set attributes for flexbox child
     // (container attributes are set in section.component)
@@ -8070,76 +8054,69 @@ class RootComponent {
             (node.options || {})[attribute] || ['1', '1', 'auto'][index];
     }
     showWidget(layoutNode) {
-        return this.jsf.evaluateCondition(layoutNode, this.dataIndex);
+        return this.jsf.evaluateCondition(layoutNode, this.dataIndex());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RootComponent, deps: [{ token: JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: RootComponent, selector: "root-widget", inputs: { dataIndex: "dataIndex", layoutIndex: "layoutIndex", layout: "layout", isOrderable: "isOrderable", isFlexItem: "isFlexItem" }, ngImport: i0, template: `
-    <div *ngFor="let layoutItem of layout; let i = index"
-      [class.form-flex-item]="isFlexItem"
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RootComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: RootComponent, 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)"
+        [dataIndex]="layoutItem?.arrayItem ? (dataIndex() || []).concat(i) : (dataIndex() || [])"
+        [layoutIndex]="(layoutIndex() || []).concat(i)"
         [layoutNode]="layoutItem"
         [orderable]="isDraggable(layoutItem)">
         <select-framework-widget *ngIf="showWidget(layoutItem)"
-          [dataIndex]="layoutItem?.arrayItem ? (dataIndex || []).concat(i) : (dataIndex || [])"
-          [layoutIndex]="(layoutIndex || []).concat(i)"
+          [dataIndex]="layoutItem?.arrayItem ? (dataIndex() || []).concat(i) : (dataIndex() || [])"
+          [layoutIndex]="(layoutIndex() || []).concat(i)"
           [layoutNode]="layoutItem"></select-framework-widget>
       </div>
-    </div>`, isInline: true, styles: ["[draggable=true]{transition:all .15s cubic-bezier(.4,0,.2,1)}[draggable=true]:hover{cursor:move;box-shadow:2px 2px 4px #0003;position:relative;z-index:10;margin:-1px 1px 1px -1px}[draggable=true].drag-target-top{box-shadow:0 -2px #000;position:relative;z-index:20}[draggable=true].drag-target-bottom{box-shadow:0 2px #000;position:relative;z-index:20}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SelectFrameworkComponent, selector: "select-framework-widget", inputs: ["layoutNode", "layoutIndex", "dataIndex"] }, { kind: "directive", type: OrderableDirective, selector: "[orderable]", inputs: ["orderable", "layoutNode", "layoutIndex", "dataIndex"] }] }); }
+    </div>`, isInline: true, styles: ["[draggable=true]{transition:all .15s cubic-bezier(.4,0,.2,1)}[draggable=true]:hover{cursor:move;box-shadow:2px 2px 4px #0003;position:relative;z-index:10;margin:-1px 1px 1px -1px}[draggable=true].drag-target-top{box-shadow:0 -2px #000;position:relative;z-index:20}[draggable=true].drag-target-bottom{box-shadow:0 2px #000;position:relative;z-index:20}\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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RootComponent, decorators: [{
             type: Component,
             args: [{ selector: 'root-widget', template: `
-    <div *ngFor="let layoutItem of layout; let i = index"
-      [class.form-flex-item]="isFlexItem"
+    <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)"
+        [dataIndex]="layoutItem?.arrayItem ? (dataIndex() || []).concat(i) : (dataIndex() || [])"
+        [layoutIndex]="(layoutIndex() || []).concat(i)"
         [layoutNode]="layoutItem"
         [orderable]="isDraggable(layoutItem)">
         <select-framework-widget *ngIf="showWidget(layoutItem)"
-          [dataIndex]="layoutItem?.arrayItem ? (dataIndex || []).concat(i) : (dataIndex || [])"
-          [layoutIndex]="(layoutIndex || []).concat(i)"
+          [dataIndex]="layoutItem?.arrayItem ? (dataIndex() || []).concat(i) : (dataIndex() || [])"
+          [layoutIndex]="(layoutIndex() || []).concat(i)"
           [layoutNode]="layoutItem"></select-framework-widget>
       </div>
     </div>`, styles: ["[draggable=true]{transition:all .15s cubic-bezier(.4,0,.2,1)}[draggable=true]:hover{cursor:move;box-shadow:2px 2px 4px #0003;position:relative;z-index:10;margin:-1px 1px 1px -1px}[draggable=true].drag-target-top{box-shadow:0 -2px #000;position:relative;z-index:20}[draggable=true].drag-target-bottom{box-shadow:0 2px #000;position:relative;z-index:20}\n"] }]
-        }], ctorParameters: () => [{ type: JsonSchemaFormService }], propDecorators: { dataIndex: [{
-                type: Input
-            }], layoutIndex: [{
-                type: Input
-            }], layout: [{
-                type: Input
-            }], isOrderable: [{
-                type: Input
-            }], isFlexItem: [{
-                type: Input
-            }] } });
+        }] });
 
 class SectionComponent {
-    constructor(jsf) {
-        this.jsf = jsf;
+    constructor() {
+        this.jsf = inject(JsonSchemaFormService);
         this.expanded = true;
+        this.layoutNode = input(undefined);
+        this.layoutIndex = input(undefined);
+        this.dataIndex = input(undefined);
     }
     get sectionTitle() {
         return this.options.notitle ? null : this.jsf.setItemTitle(this);
     }
     ngOnInit() {
         this.jsf.initializeControl(this);
-        this.options = this.layoutNode.options || {};
+        this.options = this.layoutNode().options || {};
         this.expanded = typeof this.options.expanded === 'boolean' ?
             this.options.expanded : !this.options.expandable;
-        switch (this.layoutNode.type) {
+        switch (this.layoutNode().type) {
             case 'fieldset':
             case 'array':
             case 'tab':
@@ -8162,7 +8139,7 @@ class SectionComponent {
     // Set attributes for flexbox container
     // (child attributes are set in root.component)
     getFlexAttribute(attribute) {
-        const flexActive = this.layoutNode.type === 'flex' ||
+        const flexActive = this.layoutNode().type === 'flex' ||
             !!this.options.displayFlex ||
             this.options.display === 'flex';
         if (attribute !== 'flex' && !flexActive) {
@@ -8184,8 +8161,8 @@ class SectionComponent {
                 return this.options[attribute];
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SectionComponent, deps: [{ token: JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SectionComponent, selector: "section-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: SectionComponent, 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"
@@ -8196,9 +8173,9 @@ class SectionComponent {
         [innerHTML]="sectionTitle"
         (click)="toggleExpanded()"></label>
       <root-widget *ngIf="expanded"
-        [dataIndex]="dataIndex"
-        [layout]="layoutNode.items"
-        [layoutIndex]="layoutIndex"
+        [dataIndex]="dataIndex()"
+        [layout]="layoutNode().items"
+        [layoutIndex]="layoutIndex()"
         [isFlexItem]="getFlexAttribute('is-flex')"
         [isOrderable]="options?.orderable"
         [class.form-flex-column]="getFlexAttribute('flex-direction') === 'column'"
@@ -8227,9 +8204,9 @@ class SectionComponent {
         [innerHTML]="options?.description"></p>
       </div>
       <root-widget *ngIf="expanded"
-        [dataIndex]="dataIndex"
-        [layout]="layoutNode.items"
-        [layoutIndex]="layoutIndex"
+        [dataIndex]="dataIndex()"
+        [layout]="layoutNode().items"
+        [layoutIndex]="layoutIndex()"
         [isFlexItem]="getFlexAttribute('is-flex')"
         [isOrderable]="options?.orderable"
         [class.form-flex-column]="getFlexAttribute('flex-direction') === 'column'"
@@ -8246,7 +8223,7 @@ class SectionComponent {
         [class]="options?.labelHelpBlockClass || ''"
         [innerHTML]="options?.description"></p>
       </div>
-    </fieldset>`, isInline: true, styles: [".legend{font-weight:700}.expandable>legend:before,.expandable>label:before{content:\"\\25b6\";padding-right:.3em}.expanded>legend:before,.expanded>label:before{content:\"\\25bc\";padding-right:.2em}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: RootComponent, selector: "root-widget", inputs: ["dataIndex", "layoutIndex", "layout", "isOrderable", "isFlexItem"] }] }); }
+    </fieldset>`, isInline: true, styles: [".legend{font-weight:700}.expandable>legend:before,.expandable>label:before{content:\"\\25b6\";padding-right:.3em;font-family:auto}.expanded>legend:before,.expanded>label:before{content:\"\\25bc\";padding-right:.2em}\n"], dependencies: [{ kind: "directive", type: 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: "17.3.12", ngImport: i0, type: SectionComponent, decorators: [{
             type: Component,
@@ -8261,9 +8238,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
         [innerHTML]="sectionTitle"
         (click)="toggleExpanded()"></label>
       <root-widget *ngIf="expanded"
-        [dataIndex]="dataIndex"
-        [layout]="layoutNode.items"
-        [layoutIndex]="layoutIndex"
+        [dataIndex]="dataIndex()"
+        [layout]="layoutNode().items"
+        [layoutIndex]="layoutIndex()"
         [isFlexItem]="getFlexAttribute('is-flex')"
         [isOrderable]="options?.orderable"
         [class.form-flex-column]="getFlexAttribute('flex-direction') === 'column'"
@@ -8292,9 +8269,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
         [innerHTML]="options?.description"></p>
       </div>
       <root-widget *ngIf="expanded"
-        [dataIndex]="dataIndex"
-        [layout]="layoutNode.items"
-        [layoutIndex]="layoutIndex"
+        [dataIndex]="dataIndex()"
+        [layout]="layoutNode().items"
+        [layoutIndex]="layoutIndex()"
         [isFlexItem]="getFlexAttribute('is-flex')"
         [isOrderable]="options?.orderable"
         [class.form-flex-column]="getFlexAttribute('flex-direction') === 'column'"
@@ -8311,47 +8288,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
         [class]="options?.labelHelpBlockClass || ''"
         [innerHTML]="options?.description"></p>
       </div>
-    </fieldset>`, styles: [".legend{font-weight:700}.expandable>legend:before,.expandable>label:before{content:\"\\25b6\";padding-right:.3em}.expanded>legend:before,.expanded>label:before{content:\"\\25bc\";padding-right:.2em}\n"] }]
-        }], ctorParameters: () => [{ type: JsonSchemaFormService }], propDecorators: { layoutNode: [{
-                type: Input
-            }], layoutIndex: [{
-                type: Input
-            }], dataIndex: [{
-                type: Input
-            }] } });
+    </fieldset>`, 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"] }]
+        }] });
 
 class SelectComponent {
-    constructor(jsf) {
-        this.jsf = jsf;
+    constructor() {
+        this.jsf = inject(JsonSchemaFormService);
         this.controlDisabled = false;
         this.boundControl = false;
         this.selectList = [];
         this.isArray = isArray;
+        this.layoutNode = input(undefined);
+        this.layoutIndex = input(undefined);
+        this.dataIndex = input(undefined);
     }
     ngOnInit() {
-        this.options = this.layoutNode.options || {};
+        this.options = this.layoutNode().options || {};
         this.selectList = buildTitleMap(this.options.titleMap || this.options.enumNames, this.options.enum, !!this.options.required, !!this.options.flatList);
         this.jsf.initializeControl(this);
     }
     updateValue(event) {
         this.jsf.updateValue(this, event.target.value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectComponent, deps: [{ token: JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SelectComponent, selector: "select-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: SelectComponent, 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"
-        [attr.for]="'control' + layoutNode?._id"
+        [attr.for]="'control' + layoutNode()?._id"
         [class]="options?.labelHtmlClass || ''"
         [style.display]="options?.notitle ? 'none' : ''"
         [innerHTML]="options?.title"></label>
       <select *ngIf="boundControl"
         [formControl]="formControl"
-        [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
+        [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
         [attr.readonly]="options?.readonly ? 'readonly' : null"
         [attr.required]="options?.required"
         [class]="options?.fieldHtmlClass || ''"
-        [id]="'control' + layoutNode?._id"
+        [id]="'control' + layoutNode()?._id"
         [name]="controlName">
         <ng-template ngFor let-selectItem [ngForOf]="selectList">
           <option *ngIf="!isArray(selectItem?.items)"
@@ -8368,12 +8342,12 @@ class SelectComponent {
         </ng-template>
       </select>
       <select *ngIf="!boundControl"
-        [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
+        [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
         [attr.readonly]="options?.readonly ? 'readonly' : null"
         [attr.required]="options?.required"
         [class]="options?.fieldHtmlClass || ''"
         [disabled]="controlDisabled"
-        [id]="'control' + layoutNode?._id"
+        [id]="'control' + layoutNode()?._id"
         [name]="controlName"
         (change)="updateValue($event)">
         <ng-template ngFor let-selectItem [ngForOf]="selectList">
@@ -8392,7 +8366,7 @@ class SelectComponent {
           </optgroup>
         </ng-template>
       </select>
-    </div>`, isInline: true, dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
+    </div>`, isInline: true, dependencies: [{ kind: "directive", type: 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: "17.3.12", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
@@ -8403,17 +8377,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
     <div
       [class]="options?.htmlClass || ''">
       <label *ngIf="options?.title"
-        [attr.for]="'control' + layoutNode?._id"
+        [attr.for]="'control' + layoutNode()?._id"
         [class]="options?.labelHtmlClass || ''"
         [style.display]="options?.notitle ? 'none' : ''"
         [innerHTML]="options?.title"></label>
       <select *ngIf="boundControl"
         [formControl]="formControl"
-        [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
+        [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
         [attr.readonly]="options?.readonly ? 'readonly' : null"
         [attr.required]="options?.required"
         [class]="options?.fieldHtmlClass || ''"
-        [id]="'control' + layoutNode?._id"
+        [id]="'control' + layoutNode()?._id"
         [name]="controlName">
         <ng-template ngFor let-selectItem [ngForOf]="selectList">
           <option *ngIf="!isArray(selectItem?.items)"
@@ -8430,12 +8404,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
         </ng-template>
       </select>
       <select *ngIf="!boundControl"
-        [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
+        [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
         [attr.readonly]="options?.readonly ? 'readonly' : null"
         [attr.required]="options?.required"
         [class]="options?.fieldHtmlClass || ''"
         [disabled]="controlDisabled"
-        [id]="'control' + layoutNode?._id"
+        [id]="'control' + layoutNode()?._id"
         [name]="controlName"
         (change)="updateValue($event)">
         <ng-template ngFor let-selectItem [ngForOf]="selectList">
@@ -8456,19 +8430,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
       </select>
     </div>`,
                 }]
-        }], ctorParameters: () => [{ type: JsonSchemaFormService }], propDecorators: { layoutNode: [{
-                type: Input
-            }], layoutIndex: [{
-                type: Input
-            }], dataIndex: [{
-                type: Input
-            }] } });
+        }] });
 
 class SelectWidgetComponent {
-    constructor(componentFactory, jsf) {
-        this.componentFactory = componentFactory;
-        this.jsf = jsf;
+    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();
@@ -8477,8 +8449,9 @@ class SelectWidgetComponent {
         this.updateComponent();
     }
     updateComponent() {
-        if (this.widgetContainer && !this.newComponent && (this.layoutNode || {}).widget) {
-            this.newComponent = this.widgetContainer.createComponent(this.componentFactory.resolveComponentFactory(this.layoutNode.widget));
+        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']) {
@@ -8486,8 +8459,8 @@ class SelectWidgetComponent {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectWidgetComponent, deps: [{ token: i0.ComponentFactoryResolver }, { token: JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SelectWidgetComponent, selector: "select-widget-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, viewQueries: [{ propertyName: "widgetContainer", first: true, predicate: ["widgetContainer"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: `<div #widgetContainer></div>`, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "17.3.12", type: SelectWidgetComponent, 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: "17.3.12", ngImport: i0, type: SelectWidgetComponent, decorators: [{
             type: Component,
@@ -8496,29 +8469,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                     selector: 'select-widget-widget',
                     template: `<div #widgetContainer></div>`,
                 }]
-        }], ctorParameters: () => [{ type: i0.ComponentFactoryResolver }, { type: JsonSchemaFormService }], propDecorators: { layoutNode: [{
-                type: Input
-            }], layoutIndex: [{
-                type: Input
-            }], dataIndex: [{
-                type: Input
-            }], widgetContainer: [{
-                type: ViewChild,
-                args: ['widgetContainer', { read: ViewContainerRef, static: true }]
-            }] } });
+        }] });
 
 class SubmitComponent {
-    constructor(jsf) {
-        this.jsf = jsf;
+    constructor() {
+        this.jsf = inject(JsonSchemaFormService);
         this.controlDisabled = false;
         this.boundControl = false;
+        this.layoutNode = input(undefined);
+        this.layoutIndex = input(undefined);
+        this.dataIndex = input(undefined);
     }
     ngOnDestroy() {
         this.isValidChangesSubs?.unsubscribe();
         this.isValidChangesSubs = null;
     }
     ngOnInit() {
-        this.options = this.layoutNode.options || {};
+        this.options = this.layoutNode().options || {};
         this.jsf.initializeControl(this);
         if (hasOwn(this.options, 'disabled')) {
             this.controlDisabled = this.options.disabled;
@@ -8539,19 +8506,19 @@ class SubmitComponent {
             this.jsf.updateValue(this, event.target.value);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SubmitComponent, deps: [{ token: JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SubmitComponent, selector: "submit-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SubmitComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: SubmitComponent, 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
-        [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
+        [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
         [attr.readonly]="options?.readonly ? 'readonly' : null"
         [attr.required]="options?.required"
         [class]="options?.fieldHtmlClass || ''"
         [disabled]="controlDisabled"
-        [id]="'control' + layoutNode?._id"
+        [id]="'control' + layoutNode()?._id"
         [name]="controlName"
-        [type]="layoutNode?.type"
+        [type]="layoutNode()?.type"
         [value]="controlValue"
         (click)="updateValue($event)">
     </div>`, isInline: true }); }
@@ -8565,51 +8532,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
     <div
       [class]="options?.htmlClass || ''">
       <input
-        [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
+        [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
         [attr.readonly]="options?.readonly ? 'readonly' : null"
         [attr.required]="options?.required"
         [class]="options?.fieldHtmlClass || ''"
         [disabled]="controlDisabled"
-        [id]="'control' + layoutNode?._id"
+        [id]="'control' + layoutNode()?._id"
         [name]="controlName"
-        [type]="layoutNode?.type"
+        [type]="layoutNode()?.type"
         [value]="controlValue"
         (click)="updateValue($event)">
     </div>`,
                 }]
-        }], ctorParameters: () => [{ type: JsonSchemaFormService }], propDecorators: { layoutNode: [{
-                type: Input
-            }], layoutIndex: [{
-                type: Input
-            }], dataIndex: [{
-                type: Input
-            }] } });
+        }] });
 
 class TabsComponent {
-    constructor(jsf) {
-        this.jsf = jsf;
+    constructor() {
+        this.jsf = inject(JsonSchemaFormService);
         this.selectedItem = 0;
         this.showAddTab = true;
+        this.layoutNode = input(undefined);
+        this.layoutIndex = input(undefined);
+        this.dataIndex = input(undefined);
     }
     ngOnInit() {
-        this.options = this.layoutNode.options || {};
-        this.itemCount = this.layoutNode.items.length - 1;
+        this.options = this.layoutNode().options || {};
+        this.itemCount = this.layoutNode().items.length - 1;
         this.updateControl();
     }
     select(index) {
-        if (this.layoutNode.items[index].type === '$ref') {
-            this.itemCount = this.layoutNode.items.length;
+        const layoutNode = this.layoutNode();
+        if (layoutNode.items[index].type === '$ref') {
+            this.itemCount = layoutNode.items.length;
             this.jsf.addItem({
-                layoutNode: this.layoutNode.items[index],
-                layoutIndex: this.layoutIndex.concat(index),
-                dataIndex: this.dataIndex.concat(index)
+                layoutNode: signal(layoutNode.items[index]),
+                layoutIndex: signal(this.layoutIndex().concat(index)),
+                dataIndex: signal(this.dataIndex().concat(index))
             });
             this.updateControl();
         }
         this.selectedItem = index;
     }
     updateControl() {
-        const lastItem = this.layoutNode.items[this.layoutNode.items.length - 1];
+        const lastItem = this.layoutNode().items[this.layoutNode().items.length - 1];
         if (lastItem.type === '$ref' &&
             this.itemCount >= (lastItem.options.maxItems || 1000)) {
             this.showAddTab = false;
@@ -8618,11 +8583,11 @@ class TabsComponent {
     setTabTitle(item, index) {
         return this.jsf.setArrayItemTitle(this, item, index);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TabsComponent, deps: [{ token: JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TabsComponent, selector: "tabs-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: TabsComponent, selector: "tabs-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <ul
       [class]="options?.labelHtmlClass || ''">
-      <li *ngFor="let item of layoutNode?.items; let i = index"
+      <li *ngFor="let item of layoutNode()?.items; let i = index"
         [class]="(options?.itemLabelHtmlClass || '') + (selectedItem === i ?
           (' ' + (options?.activeClass || '') + ' ' + (options?.style?.selected || '')) :
           (' ' + options?.style?.unselected))"
@@ -8636,25 +8601,25 @@ class TabsComponent {
       </li>
     </ul>
 
-    <div *ngFor="let layoutItem of layoutNode?.items; let i = index"
+    <div *ngFor="let layoutItem of layoutNode()?.items; let i = index"
       [class]="options?.htmlClass || ''">
 
       <select-framework-widget *ngIf="selectedItem === i"
         [class]="(options?.fieldHtmlClass || '') +
           ' ' + (options?.activeClass || '') +
           ' ' + (options?.style?.selected || '')"
-        [dataIndex]="layoutNode?.dataType === 'array' ? (dataIndex || []).concat(i) : dataIndex"
-        [layoutIndex]="(layoutIndex || []).concat(i)"
+        [dataIndex]="layoutNode()?.dataType === 'array' ? (dataIndex() || []).concat(i) : dataIndex()"
+        [layoutIndex]="(layoutIndex() || []).concat(i)"
         [layoutNode]="layoutItem"></select-framework-widget>
 
-    </div>`, isInline: true, styles: ["a{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SelectFrameworkComponent, selector: "select-framework-widget", inputs: ["layoutNode", "layoutIndex", "dataIndex"] }] }); }
+    </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: "17.3.12", ngImport: i0, type: TabsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tabs-widget', template: `
     <ul
       [class]="options?.labelHtmlClass || ''">
-      <li *ngFor="let item of layoutNode?.items; let i = index"
+      <li *ngFor="let item of layoutNode()?.items; let i = index"
         [class]="(options?.itemLabelHtmlClass || '') + (selectedItem === i ?
           (' ' + (options?.activeClass || '') + ' ' + (options?.style?.selected || '')) :
           (' ' + options?.style?.unselected))"
@@ -8668,31 +8633,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
       </li>
     </ul>
 
-    <div *ngFor="let layoutItem of layoutNode?.items; let i = index"
+    <div *ngFor="let layoutItem of layoutNode()?.items; let i = index"
       [class]="options?.htmlClass || ''">
 
       <select-framework-widget *ngIf="selectedItem === i"
         [class]="(options?.fieldHtmlClass || '') +
           ' ' + (options?.activeClass || '') +
           ' ' + (options?.style?.selected || '')"
-        [dataIndex]="layoutNode?.dataType === 'array' ? (dataIndex || []).concat(i) : dataIndex"
-        [layoutIndex]="(layoutIndex || []).concat(i)"
+        [dataIndex]="layoutNode()?.dataType === 'array' ? (dataIndex() || []).concat(i) : dataIndex()"
+        [layoutIndex]="(layoutIndex() || []).concat(i)"
         [layoutNode]="layoutItem"></select-framework-widget>
 
     </div>`, styles: ["a{cursor:pointer}\n"] }]
-        }], ctorParameters: () => [{ type: JsonSchemaFormService }], propDecorators: { layoutNode: [{
-                type: Input
-            }], layoutIndex: [{
-                type: Input
-            }], dataIndex: [{
-                type: Input
-            }] } });
+        }] });
 
 class TemplateComponent {
-    constructor(componentFactory, jsf) {
-        this.componentFactory = componentFactory;
-        this.jsf = jsf;
+    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();
@@ -8701,8 +8664,10 @@ class TemplateComponent {
         this.updateComponent();
     }
     updateComponent() {
-        if (this.widgetContainer && !this.newComponent && this.layoutNode.options.template) {
-            this.newComponent = this.widgetContainer.createComponent(this.componentFactory.resolveComponentFactory(this.layoutNode.options.template));
+        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));
         }
         if (this.newComponent) {
             for (const input of ['layoutNode', 'layoutIndex', 'dataIndex']) {
@@ -8710,8 +8675,8 @@ class TemplateComponent {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TemplateComponent, deps: [{ token: i0.ComponentFactoryResolver }, { token: JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TemplateComponent, selector: "template-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, viewQueries: [{ propertyName: "widgetContainer", first: true, predicate: ["widgetContainer"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: `<div #widgetContainer></div>`, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "17.3.12", type: TemplateComponent, 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: "17.3.12", ngImport: i0, type: TemplateComponent, decorators: [{
             type: Component,
@@ -8720,42 +8685,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                     selector: 'template-widget',
                     template: `<div #widgetContainer></div>`,
                 }]
-        }], ctorParameters: () => [{ type: i0.ComponentFactoryResolver }, { type: JsonSchemaFormService }], propDecorators: { layoutNode: [{
-                type: Input
-            }], layoutIndex: [{
-                type: Input
-            }], dataIndex: [{
-                type: Input
-            }], widgetContainer: [{
-                type: ViewChild,
-                args: ['widgetContainer', { read: ViewContainerRef, static: true }]
-            }] } });
+        }] });
 
 class TextareaComponent {
-    constructor(jsf) {
-        this.jsf = jsf;
+    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.options = this.layoutNode.options || {};
+        this.options = this.layoutNode().options || {};
         this.jsf.initializeControl(this);
     }
     updateValue(event) {
         this.jsf.updateValue(this, event.target.value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TextareaComponent, deps: [{ token: JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TextareaComponent, selector: "textarea-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: TextareaComponent, selector: "textarea-widget", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <div
       [class]="options?.htmlClass || ''">
       <label *ngIf="options?.title"
-        [attr.for]="'control' + layoutNode?._id"
+        [attr.for]="'control' + layoutNode()?._id"
         [class]="options?.labelHtmlClass || ''"
         [style.display]="options?.notitle ? 'none' : ''"
         [innerHTML]="options?.title"></label>
       <textarea *ngIf="boundControl"
         [formControl]="formControl"
-        [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
+        [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
         [attr.maxlength]="options?.maxLength"
         [attr.minlength]="options?.minLength"
         [attr.pattern]="options?.pattern"
@@ -8763,10 +8722,10 @@ class TextareaComponent {
         [attr.readonly]="options?.readonly ? 'readonly' : null"
         [attr.required]="options?.required"
         [class]="options?.fieldHtmlClass || ''"
-        [id]="'control' + layoutNode?._id"
+        [id]="'control' + layoutNode()?._id"
         [name]="controlName"></textarea>
       <textarea *ngIf="!boundControl"
-        [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
+        [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
         [attr.maxlength]="options?.maxLength"
         [attr.minlength]="options?.minLength"
         [attr.pattern]="options?.pattern"
@@ -8775,11 +8734,11 @@ class TextareaComponent {
         [attr.required]="options?.required"
         [class]="options?.fieldHtmlClass || ''"
         [disabled]="controlDisabled"
-        [id]="'control' + layoutNode?._id"
+        [id]="'control' + layoutNode()?._id"
         [name]="controlName"
         [value]="controlValue"
         (input)="updateValue($event)">{{controlValue}}</textarea>
-    </div>`, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
+    </div>`, isInline: true, dependencies: [{ kind: "directive", type: 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: "17.3.12", ngImport: i0, type: TextareaComponent, decorators: [{
             type: Component,
@@ -8790,13 +8749,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
     <div
       [class]="options?.htmlClass || ''">
       <label *ngIf="options?.title"
-        [attr.for]="'control' + layoutNode?._id"
+        [attr.for]="'control' + layoutNode()?._id"
         [class]="options?.labelHtmlClass || ''"
         [style.display]="options?.notitle ? 'none' : ''"
         [innerHTML]="options?.title"></label>
       <textarea *ngIf="boundControl"
         [formControl]="formControl"
-        [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
+        [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
         [attr.maxlength]="options?.maxLength"
         [attr.minlength]="options?.minLength"
         [attr.pattern]="options?.pattern"
@@ -8804,10 +8763,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
         [attr.readonly]="options?.readonly ? 'readonly' : null"
         [attr.required]="options?.required"
         [class]="options?.fieldHtmlClass || ''"
-        [id]="'control' + layoutNode?._id"
+        [id]="'control' + layoutNode()?._id"
         [name]="controlName"></textarea>
       <textarea *ngIf="!boundControl"
-        [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
+        [attr.aria-describedby]="'control' + layoutNode()?._id + 'Status'"
         [attr.maxlength]="options?.maxLength"
         [attr.minlength]="options?.minLength"
         [attr.pattern]="options?.pattern"
@@ -8816,19 +8775,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
         [attr.required]="options?.required"
         [class]="options?.fieldHtmlClass || ''"
         [disabled]="controlDisabled"
-        [id]="'control' + layoutNode?._id"
+        [id]="'control' + layoutNode()?._id"
         [name]="controlName"
         [value]="controlValue"
         (input)="updateValue($event)">{{controlValue}}</textarea>
     </div>`,
                 }]
-        }], ctorParameters: () => [{ type: JsonSchemaFormService }], propDecorators: { layoutNode: [{
-                type: Input
-            }], layoutIndex: [{
-                type: Input
-            }], dataIndex: [{
-                type: Input
-            }] } });
+        }] });
 
 class WidgetLibraryService {
     constructor() {
@@ -9054,10 +9007,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
 //   https://github.com/edcarroll/ng2-semantic-ui
 //   https://github.com/vladotesanovic/ngSemantic
 class FrameworkLibraryService {
-    constructor(frameworks, widgetLibrary, http) {
+    constructor(frameworks) {
         this.frameworks = frameworks;
-        this.widgetLibrary = widgetLibrary;
-        this.http = http;
+        //private frameworks = inject(Framework);
+        this.widgetLibrary = inject(WidgetLibraryService);
+        this.http = inject(HttpClient);
         this.activeFramework = null;
         this.loadExternalAssets = false;
         this.frameworkLibrary = {};
@@ -9197,7 +9151,7 @@ class FrameworkLibraryService {
             return actFramework.unregisterTheme(name);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FrameworkLibraryService, deps: [{ token: Framework }, { token: WidgetLibraryService }, { token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FrameworkLibraryService, deps: [{ token: Framework }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FrameworkLibraryService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FrameworkLibraryService, decorators: [{
@@ -9208,10 +9162,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [Framework]
-                }] }, { type: WidgetLibraryService, decorators: [{
-                    type: Inject,
-                    args: [WidgetLibraryService]
-                }] }, { type: i1.HttpClient }] });
+                }] }] });
 
 const JSON_SCHEMA_FORM_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
@@ -9253,17 +9204,11 @@ const JSON_SCHEMA_FORM_VALUE_ACCESSOR = {
  *  - brace, Browserified Ace editor       http://thlorenz.github.io/brace
  */
 class JsonSchemaFormComponent {
-    get value() {
-        return this.objectWrap ? this.jsf.data['1'] : this.jsf.data;
-    }
-    set value(value) {
-        this.setFormValues(value, false);
-    }
-    constructor(changeDetector, frameworkLibrary, widgetLibrary, jsf) {
-        this.changeDetector = changeDetector;
-        this.frameworkLibrary = frameworkLibrary;
-        this.widgetLibrary = widgetLibrary;
-        this.jsf = jsf;
+    constructor() {
+        this.changeDetector = inject(ChangeDetectorRef);
+        this.frameworkLibrary = inject(FrameworkLibraryService);
+        this.widgetLibrary = inject(WidgetLibraryService);
+        this.jsf = inject(JsonSchemaFormService);
         // TODO: quickfix to avoid subscribing twice to the same emitters
         this.unsubscribeOnActivateForm$ = new Subject();
         this.formValueSubscription = null;
@@ -9274,21 +9219,48 @@ class JsonSchemaFormComponent {
             widgets: null, form: null, model: null, JSONSchema: null, UISchema: null,
             formData: null, loadExternalAssets: null, debug: null,
         };
+        // Recommended inputs
+        this.schema = input(undefined); // The JSON Schema
+        this.layout = input(undefined); // The form layout
+        this.data = input(undefined); // The form data
+        this.options = input(undefined); // The global form options
+        this.framework = input(undefined); // The framework to load
+        this.widgets = input(undefined); // Any custom widgets to load
+        // Alternate combined single input
+        this.form = input(undefined); // For testing, and JSON Schema Form API compatibility
+        // Angular Schema Form API compatibility input
+        this.model = input(undefined); // Alternate input for form data
+        // React JSON Schema Form API compatibility inputs
+        this.JSONSchema = input(undefined); // Alternate input for JSON Schema
+        this.UISchema = input(undefined); // UI schema - alternate form layout format
+        this.formData = input(undefined); // Alternate input for form data
+        this.ngModel = input(undefined); // Alternate input for Angular forms
+        this.language = input(undefined); // Language
+        // Development inputs, for testing and debugging
+        this.loadExternalAssets = input(undefined); // Load external framework assets?
+        this.debug = input(undefined); // Show debug information?
+        this.theme = input(undefined); // Theme
         // Outputs
-        this.onChanges = new EventEmitter(); // Live unvalidated internal form data
-        this.onSubmit = new EventEmitter(); // Complete validated form data
-        this.isValid = new EventEmitter(); // Is current data valid?
-        this.validationErrors = new EventEmitter(); // Validation errors (if any)
-        this.formSchema = new EventEmitter(); // Final schema used to create form
-        this.formLayout = new EventEmitter(); // Final layout used to create form
+        this.onChanges = output(); // Live unvalidated internal form data
+        this.onSubmit = output(); // Complete validated form data
+        this.isValid = output(); // Is current data valid?
+        this.validationErrors = output(); // Validation errors (if any)
+        this.formSchema = output(); // Final schema used to create form
+        this.formLayout = output(); // Final layout used to create form
         // Outputs for possible 2-way data binding
         // Only the one input providing the initial form data will be bound.
         // If there is no inital data, input '{}' to activate 2-way data binding.
         // There is no 2-way binding if inital data is combined inside the 'form' input.
-        this.dataChange = new EventEmitter();
-        this.modelChange = new EventEmitter();
-        this.formDataChange = new EventEmitter();
-        this.ngModelChange = new EventEmitter();
+        this.dataChange = output();
+        this.modelChange = output();
+        this.formDataChange = output();
+        this.ngModelChange = output();
+    }
+    get value() {
+        return this.objectWrap ? this.jsf.data['1'] : this.jsf.data;
+    }
+    set value(value) {
+        this.setFormValues(value, false);
     }
     ngOnDestroy() {
         this.dataChangesSubs?.unsubscribe();
@@ -9300,6 +9272,14 @@ class JsonSchemaFormComponent {
         this.isValidChangesSubs = null;
         this.validationErrorChangesSubs = null;
     }
+    getInputValue(inputKey) {
+        //TODO review if the value is meant to be a function and not a signal,
+        //it might inadvertently be called!
+        if (typeof this[inputKey] == "function") {
+            return this[inputKey]();
+        }
+        return this[inputKey];
+    }
     resetScriptsAndStyleSheets() {
         document.querySelectorAll('.ajsf').forEach(element => element.remove());
     }
@@ -9372,13 +9352,14 @@ class JsonSchemaFormComponent {
     }
     updateForm() {
         let changedData;
+        const language = this.language();
         if (!this.formInitialized || !this.formValuesInput ||
-            (this.language && this.language !== this.jsf.language)) {
+            (language && language !== this.jsf.language)) {
             this.initializeForm();
         }
         else {
-            if (this.language && this.language !== this.jsf.language) {
-                this.jsf.setLanguage(this.language);
+            if (language && language !== this.jsf.language) {
+                this.jsf.setLanguage(language);
             }
             // Get names of changed inputs
             let changedInput = Object.keys(this.previousInputs)
@@ -9388,7 +9369,7 @@ class JsonSchemaFormComponent {
                 this.formValuesInput.startsWith('form.')) {
                 // If only 'form' input changed, get names of changed keys
                 changedInput = Object.keys(this.previousInputs.form || {})
-                    .filter(key => !isEqual$1(this.previousInputs.form[key], this.form[key]))
+                    .filter(key => !isEqual$1(this.previousInputs.form[key], this.form()[key]))
                     .map(key => `form.${key}`);
                 resetFirst = false;
             }
@@ -9415,13 +9396,14 @@ class JsonSchemaFormComponent {
                 }
             }
             //set framework theme
-            if (this.theme && this.theme !== this.frameworkLibrary.getActiveTheme()?.name) {
-                this.frameworkLibrary.requestThemeChange(this.theme);
+            const theme = this.theme();
+            if (theme && theme !== this.frameworkLibrary.getActiveTheme()?.name) {
+                this.frameworkLibrary.requestThemeChange(theme);
             }
             // Update previous inputs
             Object.keys(this.previousInputs)
                 .filter(input => this.previousInputs[input] !== this[input])
-                .forEach(input => this.previousInputs[input] = this[input]);
+                .forEach(input => this.previousInputs[input] = this.getInputValue(input));
         }
     }
     setFormValues(formValues, resetFirst = true) {
@@ -9473,8 +9455,8 @@ class JsonSchemaFormComponent {
      *   the Angular formGroup used to control the reactive form.
      */
     initializeForm(initialData) {
-        if (this.schema || this.layout || this.data || this.form || this.model ||
-            this.JSONSchema || this.UISchema || this.formData || this.ngModel ||
+        if (this.schema() || this.layout() || this.data() || this.form() || this.model() ||
+            this.JSONSchema() || this.UISchema() || this.formData() || this.ngModel() ||
             this.jsf.data) {
             // Reset all form values to defaults
             this.jsf.resetAllValues();
@@ -9507,7 +9489,7 @@ class JsonSchemaFormComponent {
             // console.log('dataRecursiveRefMap', this.jsf.dataRecursiveRefMap);
             // Uncomment individual lines to output debugging information to browser:
             // (These only work if the 'debug' option has also been set to 'true'.)
-            if (this.debug || this.jsf.formOptions.debug) {
+            if (this.debug() || this.jsf.formOptions.debug) {
                 const vars = [];
                 // vars.push(this.jsf.schema);
                 // vars.push(this.jsf.layout);
@@ -9537,24 +9519,28 @@ class JsonSchemaFormComponent {
      * 2. form.options - Single input style
      */
     initializeOptions() {
-        if (this.language && this.language !== this.jsf.language) {
-            this.jsf.setLanguage(this.language);
-        }
-        this.jsf.setOptions({ debug: !!this.debug });
-        let loadExternalAssets = this.loadExternalAssets || false;
-        let framework = this.framework || 'default';
-        if (isObject(this.options)) {
-            this.jsf.setOptions(this.options);
-            loadExternalAssets = this.options.loadExternalAssets || loadExternalAssets;
-            framework = this.options.framework || framework;
-        }
-        if (isObject(this.form) && isObject(this.form.options)) {
-            this.jsf.setOptions(this.form.options);
-            loadExternalAssets = this.form.options.loadExternalAssets || loadExternalAssets;
-            framework = this.form.options.framework || framework;
-        }
-        if (isObject(this.widgets)) {
-            this.jsf.setOptions({ widgets: this.widgets });
+        const language = this.language();
+        if (language && language !== this.jsf.language) {
+            this.jsf.setLanguage(language);
+        }
+        this.jsf.setOptions({ debug: !!this.debug() });
+        let loadExternalAssets = this.loadExternalAssets() || false;
+        let framework = this.framework() || 'default';
+        const options = this.options();
+        if (isObject(options)) {
+            this.jsf.setOptions(options);
+            loadExternalAssets = options.loadExternalAssets || loadExternalAssets;
+            framework = options.framework || framework;
+        }
+        const form = this.form();
+        if (isObject(form) && isObject(form.options)) {
+            this.jsf.setOptions(form.options);
+            loadExternalAssets = form.options.loadExternalAssets || loadExternalAssets;
+            framework = form.options.framework || framework;
+        }
+        const widgets = this.widgets();
+        if (isObject(widgets)) {
+            this.jsf.setOptions({ widgets: widgets });
         }
         this.frameworkLibrary.setLoadExternalAssets(loadExternalAssets);
         this.frameworkLibrary.setFramework(framework);
@@ -9564,11 +9550,12 @@ class JsonSchemaFormComponent {
                 this.widgetLibrary.registerWidget(widget, this.jsf.formOptions.widgets[widget]);
             }
         }
-        if (isObject(this.form) && isObject(this.form.tpldata)) {
-            this.jsf.setTpldata(this.form.tpldata);
+        if (isObject(form) && isObject(form.tpldata)) {
+            this.jsf.setTpldata(form.tpldata);
         }
-        if (this.theme) {
-            this.frameworkLibrary.requestThemeChange(this.theme);
+        const theme = this.theme();
+        if (theme) {
+            this.frameworkLibrary.requestThemeChange(theme);
         }
     }
     /**
@@ -9589,25 +9576,28 @@ class JsonSchemaFormComponent {
      */
     initializeSchema() {
         // TODO: update to allow non-object schemas
-        if (isObject(this.schema)) {
+        const form = this.form();
+        const schema = this.schema();
+        const JSONSchema = this.JSONSchema();
+        if (isObject(schema)) {
             this.jsf.AngularSchemaFormCompatibility = true;
-            this.jsf.schema = cloneDeep(this.schema);
+            this.jsf.schema = cloneDeep(schema);
         }
-        else if (hasOwn(this.form, 'schema') && isObject(this.form.schema)) {
-            this.jsf.schema = cloneDeep(this.form.schema);
+        else if (hasOwn(form, 'schema') && isObject(form.schema)) {
+            this.jsf.schema = cloneDeep(form.schema);
         }
-        else if (isObject(this.JSONSchema)) {
+        else if (isObject(JSONSchema)) {
             this.jsf.ReactJsonSchemaFormCompatibility = true;
-            this.jsf.schema = cloneDeep(this.JSONSchema);
+            this.jsf.schema = cloneDeep(JSONSchema);
         }
-        else if (hasOwn(this.form, 'JSONSchema') && isObject(this.form.JSONSchema)) {
+        else if (hasOwn(form, 'JSONSchema') && isObject(form.JSONSchema)) {
             this.jsf.ReactJsonSchemaFormCompatibility = true;
-            this.jsf.schema = cloneDeep(this.form.JSONSchema);
+            this.jsf.schema = cloneDeep(form.JSONSchema);
         }
-        else if (hasOwn(this.form, 'properties') && isObject(this.form.properties)) {
-            this.jsf.schema = cloneDeep(this.form);
+        else if (hasOwn(form, 'properties') && isObject(form.properties)) {
+            this.jsf.schema = cloneDeep(form);
         }
-        else if (isObject(this.form)) {
+        else if (isObject(form)) {
             // TODO: Handle other types of form input
         }
         if (!isEmpty(this.jsf.schema)) {
@@ -9673,36 +9663,40 @@ class JsonSchemaFormComponent {
      * 7. (none) no data - initialize data from schema and layout defaults only
      */
     initializeData() {
-        if (hasValue(this.data)) {
-            this.jsf.formValues = cloneDeep(this.data);
+        const form = this.form();
+        const data = this.data();
+        const model = this.model();
+        const ngModel = this.ngModel();
+        if (hasValue(data)) {
+            this.jsf.formValues = cloneDeep(data);
             this.formValuesInput = 'data';
         }
-        else if (hasValue(this.model)) {
+        else if (hasValue(model)) {
             this.jsf.AngularSchemaFormCompatibility = true;
-            this.jsf.formValues = cloneDeep(this.model);
+            this.jsf.formValues = cloneDeep(model);
             this.formValuesInput = 'model';
         }
-        else if (hasValue(this.ngModel)) {
+        else if (hasValue(ngModel)) {
             this.jsf.AngularSchemaFormCompatibility = true;
-            this.jsf.formValues = cloneDeep(this.ngModel);
+            this.jsf.formValues = cloneDeep(ngModel);
             this.formValuesInput = 'ngModel';
         }
-        else if (isObject(this.form) && hasValue(this.form.value)) {
+        else if (isObject(form) && hasValue(form.value)) {
             this.jsf.JsonFormCompatibility = true;
-            this.jsf.formValues = cloneDeep(this.form.value);
+            this.jsf.formValues = cloneDeep(form.value);
             this.formValuesInput = 'form.value';
         }
-        else if (isObject(this.form) && hasValue(this.form.data)) {
-            this.jsf.formValues = cloneDeep(this.form.data);
+        else if (isObject(form) && hasValue(form.data)) {
+            this.jsf.formValues = cloneDeep(form.data);
             this.formValuesInput = 'form.data';
         }
-        else if (hasValue(this.formData)) {
+        else if (hasValue(this.formData())) {
             this.jsf.ReactJsonSchemaFormCompatibility = true;
             this.formValuesInput = 'formData';
         }
-        else if (hasOwn(this.form, 'formData') && hasValue(this.form.formData)) {
+        else if (hasOwn(form, 'formData') && hasValue(form.formData)) {
             this.jsf.ReactJsonSchemaFormCompatibility = true;
-            this.jsf.formValues = cloneDeep(this.form.formData);
+            this.jsf.formValues = cloneDeep(form.formData);
             this.formValuesInput = 'form.formData';
         }
         else {
@@ -9745,40 +9739,44 @@ class JsonSchemaFormComponent {
             return layout;
         };
         // Check for layout inputs and, if found, initialize form layout
-        if (isArray(this.layout)) {
-            this.jsf.layout = cloneDeep(this.layout);
+        const form = this.form();
+        const layoutValue = this.layout();
+        if (isArray(layoutValue)) {
+            this.jsf.layout = cloneDeep(layoutValue);
         }
-        else if (isArray(this.form)) {
+        else if (isArray(form)) {
             this.jsf.AngularSchemaFormCompatibility = true;
-            this.jsf.layout = cloneDeep(this.form);
+            this.jsf.layout = cloneDeep(form);
         }
-        else if (this.form && isArray(this.form.form)) {
+        else if (form && isArray(form.form)) {
             this.jsf.JsonFormCompatibility = true;
-            this.jsf.layout = fixJsonFormOptions(cloneDeep(this.form.form));
+            this.jsf.layout = fixJsonFormOptions(cloneDeep(form.form));
         }
-        else if (this.form && isArray(this.form.layout)) {
-            this.jsf.layout = cloneDeep(this.form.layout);
+        else if (form && isArray(form.layout)) {
+            this.jsf.layout = cloneDeep(form.layout);
         }
         else {
             this.jsf.layout = ['*'];
         }
         // Check for alternate layout inputs
         let alternateLayout = null;
-        if (isObject(this.UISchema)) {
+        const formValue = this.form();
+        const UISchema = this.UISchema();
+        if (isObject(UISchema)) {
             this.jsf.ReactJsonSchemaFormCompatibility = true;
-            alternateLayout = cloneDeep(this.UISchema);
+            alternateLayout = cloneDeep(UISchema);
         }
-        else if (hasOwn(this.form, 'UISchema')) {
+        else if (hasOwn(formValue, 'UISchema')) {
             this.jsf.ReactJsonSchemaFormCompatibility = true;
-            alternateLayout = cloneDeep(this.form.UISchema);
+            alternateLayout = cloneDeep(formValue.UISchema);
         }
-        else if (hasOwn(this.form, 'uiSchema')) {
+        else if (hasOwn(formValue, 'uiSchema')) {
             this.jsf.ReactJsonSchemaFormCompatibility = true;
-            alternateLayout = cloneDeep(this.form.uiSchema);
+            alternateLayout = cloneDeep(formValue.uiSchema);
         }
-        else if (hasOwn(this.form, 'customFormItems')) {
+        else if (hasOwn(formValue, 'customFormItems')) {
             this.jsf.JsonFormCompatibility = true;
-            alternateLayout = fixJsonFormOptions(cloneDeep(this.form.customFormItems));
+            alternateLayout = fixJsonFormOptions(cloneDeep(formValue.customFormItems));
         }
         // if alternate layout found, copy alternate layout options into schema
         if (alternateLayout) {
@@ -9897,82 +9895,29 @@ class JsonSchemaFormComponent {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: JsonSchemaFormComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: FrameworkLibraryService }, { token: WidgetLibraryService }, { token: JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: JsonSchemaFormComponent, selector: "json-schema-form", inputs: { schema: "schema", layout: "layout", data: "data", options: "options", framework: "framework", widgets: "widgets", form: "form", model: "model", JSONSchema: "JSONSchema", UISchema: "UISchema", formData: "formData", ngModel: "ngModel", language: "language", loadExternalAssets: "loadExternalAssets", debug: "debug", theme: "theme", value: "value" }, outputs: { onChanges: "onChanges", onSubmit: "onSubmit", isValid: "isValid", validationErrors: "validationErrors", formSchema: "formSchema", formLayout: "formLayout", dataChange: "dataChange", modelChange: "modelChange", formDataChange: "formDataChange", ngModelChange: "ngModelChange" }, providers: [JsonSchemaFormService, JSON_SCHEMA_FORM_VALUE_ACCESSOR], usesOnChanges: true, ngImport: i0, template: "<form [autocomplete]=\"jsf?.formOptions?.autocomplete ? 'on' : 'off'\" class=\"json-schema-form\" (ngSubmit)=\"submitForm()\">\r\n  <root-widget [layout]=\"jsf?.layout\"></root-widget>\r\n</form>\r\n<div *ngIf=\"debug || jsf?.formOptions?.debug\">\r\n  Debug output:\r\n  <pre>{{debugOutput}}</pre>\r\n</div>", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: RootComponent, selector: "root-widget", inputs: ["dataIndex", "layoutIndex", "layout", "isOrderable", "isFlexItem"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: JsonSchemaFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: JsonSchemaFormComponent, 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: "17.3.12", ngImport: i0, type: JsonSchemaFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'json-schema-form', changeDetection: ChangeDetectionStrategy.OnPush, providers: [JsonSchemaFormService, JSON_SCHEMA_FORM_VALUE_ACCESSOR], 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>" }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: FrameworkLibraryService }, { type: WidgetLibraryService }, { type: JsonSchemaFormService }], propDecorators: { schema: [{
-                type: Input
-            }], layout: [{
-                type: Input
-            }], data: [{
-                type: Input
-            }], options: [{
+            args: [{ selector: 'json-schema-form', changeDetection: ChangeDetectionStrategy.OnPush, providers: [JsonSchemaFormService, JSON_SCHEMA_FORM_VALUE_ACCESSOR], 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
-            }], framework: [{
-                type: Input
-            }], widgets: [{
-                type: Input
-            }], form: [{
-                type: Input
-            }], model: [{
-                type: Input
-            }], JSONSchema: [{
-                type: Input
-            }], UISchema: [{
-                type: Input
-            }], formData: [{
-                type: Input
-            }], ngModel: [{
-                type: Input
-            }], language: [{
-                type: Input
-            }], loadExternalAssets: [{
-                type: Input
-            }], debug: [{
-                type: Input
-            }], theme: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], onChanges: [{
-                type: Output
-            }], onSubmit: [{
-                type: Output
-            }], isValid: [{
-                type: Output
-            }], validationErrors: [{
-                type: Output
-            }], formSchema: [{
-                type: Output
-            }], formLayout: [{
-                type: Output
-            }], dataChange: [{
-                type: Output
-            }], modelChange: [{
-                type: Output
-            }], formDataChange: [{
-                type: Output
-            }], ngModelChange: [{
-                type: Output
             }] } });
 
 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: "17.3.12", ngImport: i0, type: NoFrameworkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NoFrameworkComponent, selector: "no-framework", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: "<select-widget-widget [dataIndex]=\"dataIndex\" [layoutIndex]=\"layoutIndex\" [layoutNode]=\"layoutNode\">\r\n</select-widget-widget>", dependencies: [{ kind: "component", type: SelectWidgetComponent, selector: "select-widget-widget", inputs: ["layoutNode", "layoutIndex", "dataIndex"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: NoFrameworkComponent, 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: "17.3.12", ngImport: i0, type: NoFrameworkComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'no-framework', template: "<select-widget-widget [dataIndex]=\"dataIndex\" [layoutIndex]=\"layoutIndex\" [layoutNode]=\"layoutNode\">\r\n</select-widget-widget>" }]
-        }], propDecorators: { layoutNode: [{
-                type: Input
-            }], layoutIndex: [{
-                type: Input
-            }], dataIndex: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'no-framework', 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 {
@@ -9990,27 +9935,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
         }] });
 
 class HiddenComponent {
-    constructor(jsf) {
-        this.jsf = jsf;
+    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: "17.3.12", ngImport: i0, type: HiddenComponent, deps: [{ token: JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: HiddenComponent, selector: "hidden-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HiddenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: HiddenComponent, 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"
+      [id]="'control' + layoutNode()?._id"
       [name]="controlName"
       type="hidden">
     <input *ngIf="!boundControl"
       [disabled]="controlDisabled"
       [name]="controlName"
-      [id]="'control' + layoutNode?._id"
+      [id]="'control' + layoutNode()?._id"
       type="hidden"
-      [value]="controlValue">`, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
+      [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: "17.3.12", ngImport: i0, type: HiddenComponent, decorators: [{
             type: Component,
@@ -10020,38 +9968,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                     template: `
     <input *ngIf="boundControl"
       [formControl]="formControl"
-      [id]="'control' + layoutNode?._id"
+      [id]="'control' + layoutNode()?._id"
       [name]="controlName"
       type="hidden">
     <input *ngIf="!boundControl"
       [disabled]="controlDisabled"
       [name]="controlName"
-      [id]="'control' + layoutNode?._id"
+      [id]="'control' + layoutNode()?._id"
       type="hidden"
       [value]="controlValue">`,
                 }]
-        }], ctorParameters: () => [{ type: JsonSchemaFormService }], propDecorators: { layoutNode: [{
-                type: Input
-            }], layoutIndex: [{
-                type: Input
-            }], dataIndex: [{
-                type: Input
-            }] } });
+        }] });
 
 class TabComponent {
-    constructor(jsf) {
-        this.jsf = jsf;
+    constructor() {
+        this.jsf = inject(JsonSchemaFormService);
+        this.layoutNode = input(undefined);
+        this.layoutIndex = input(undefined);
+        this.dataIndex = input(undefined);
     }
     ngOnInit() {
-        this.options = this.layoutNode.options || {};
+        this.options = this.layoutNode().options || {};
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TabComponent, deps: [{ token: JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TabComponent, selector: "tab-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: TabComponent, 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>
+        [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: "17.3.12", ngImport: i0, type: TabComponent, decorators: [{
@@ -10062,18 +10007,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                     template: `
     <div [class]="options?.htmlClass || ''">
       <root-widget
-        [dataIndex]="dataIndex"
-        [layoutIndex]="layoutIndex"
-        [layout]="layoutNode.items"></root-widget>
+        [dataIndex]="dataIndex()"
+        [layoutIndex]="layoutIndex()"
+        [layout]="layoutNode().items"></root-widget>
     </div>`,
                 }]
-        }], ctorParameters: () => [{ type: JsonSchemaFormService }], propDecorators: { layoutNode: [{
-                type: Input
-            }], layoutIndex: [{
-                type: Input
-            }], dataIndex: [{
-                type: Input
-            }] } });
+        }] });
 
 const BASIC_WIDGETS = [
     AddReferenceComponent, OneOfComponent, ButtonComponent, CheckboxComponent,