@elle96/ng-json-schema-manager 0.0.5

package/fesm2022/elle96-ng-json-schema-manager.mjs

@@ -0,0 +1,1679 @@
+import * as i0 from '@angular/core';
+import { Injectable, EventEmitter, Output, Input, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import * as i4 from '@angular/forms';
+import { FormGroup, FormArray, FormControl, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import Ajv from 'ajv';
+import Ajv2019 from 'ajv/dist/2019';
+import Ajv2020 from 'ajv/dist/2020';
+import addFormats from 'ajv-formats';
+import AjvDraft04 from 'ajv-draft-04';
+import * as i3 from '@angular/common';
+import { CommonModule } from '@angular/common';
+
+class JsonSchemaFormService {
+    buildControl(schema, value, required = false) {
+        const effectiveSchema = this.applyCombinators(schema);
+        const resolvedType = this.resolveType(effectiveSchema);
+        if (resolvedType === 'object') {
+            const group = {};
+            const properties = effectiveSchema.properties ?? {};
+            const requiredFields = new Set(effectiveSchema.required ?? []);
+            const valueObject = this.isRecord(value) ? value : {};
+            for (const [key, propertySchema] of Object.entries(properties)) {
+                const childValue = valueObject[key];
+                group[key] = this.buildControl(propertySchema, childValue, requiredFields.has(key));
+            }
+            // Include dynamic keys from value (patternProperties/additionalProperties).
+            for (const key of Object.keys(valueObject)) {
+                if (group[key]) {
+                    continue;
+                }
+                const dynamicSchema = this.resolveDynamicSchema(effectiveSchema, key);
+                group[key] = this.buildControl(dynamicSchema ?? {}, valueObject[key], false);
+            }
+            const control = new FormGroup(group, {
+                validators: this.buildValidators(effectiveSchema, required),
+            });
+            if (effectiveSchema.readOnly) {
+                control.disable({ emitEvent: false });
+            }
+            return control;
+        }
+        if (resolvedType === 'array') {
+            const controls = [];
+            const initialItems = Array.isArray(value) ? value : [];
+            const minItems = effectiveSchema.minItems ?? 0;
+            const prefixItems = effectiveSchema.prefixItems ?? [];
+            const tupleLength = Math.max(prefixItems.length, minItems, initialItems.length);
+            for (let i = 0; i < tupleLength; i += 1) {
+                const itemSchema = (prefixItems[i] ?? effectiveSchema.items);
+                if (itemSchema === false) {
+                    continue;
+                }
+                const itemValue = initialItems[i];
+                controls.push(this.buildControl(itemSchema ?? {}, itemValue, false));
+            }
+            const control = new FormArray(controls, {
+                validators: this.buildValidators(effectiveSchema, required),
+            });
+            if (effectiveSchema.readOnly) {
+                control.disable({ emitEvent: false });
+            }
+            return control;
+        }
+        const initialValue = this.resolveInitialValue(effectiveSchema, value);
+        const control = new FormControl(initialValue, {
+            validators: this.buildValidators(effectiveSchema, required, resolvedType),
+            nonNullable: false,
+        });
+        if (effectiveSchema.readOnly || effectiveSchema.const !== undefined) {
+            control.disable({ emitEvent: false });
+        }
+        return control;
+    }
+    resolveType(schema) {
+        if (schema.enum) {
+            return 'enum';
+        }
+        if (schema.oneOf?.length) {
+            return this.resolveType(schema.oneOf[0]);
+        }
+        if (schema.anyOf?.length) {
+            return this.resolveType(schema.anyOf[0]);
+        }
+        if (schema.allOf?.length) {
+            return this.resolveType(schema.allOf[0]);
+        }
+        if (schema.type) {
+            if (Array.isArray(schema.type)) {
+                const preferred = schema.type.find((item) => item !== 'null');
+                return preferred ?? schema.type[0];
+            }
+            return schema.type;
+        }
+        if (schema.properties || schema.patternProperties || schema.additionalProperties) {
+            return 'object';
+        }
+        if (schema.items || schema.prefixItems) {
+            return 'array';
+        }
+        return 'string';
+    }
+    applyCombinators(schema) {
+        let effective = schema;
+        if (schema.allOf?.length) {
+            effective = this.mergeSchemas([schema, ...schema.allOf]);
+        }
+        if (schema.oneOf?.length) {
+            effective = schema.oneOf[0];
+        }
+        if (schema.anyOf?.length) {
+            effective = schema.anyOf[0];
+        }
+        return effective;
+    }
+    resolveDynamicSchema(schema, key) {
+        const patternSchemas = schema.patternProperties ?? {};
+        for (const [pattern, patternSchema] of Object.entries(patternSchemas)) {
+            try {
+                const regex = new RegExp(pattern);
+                if (regex.test(key)) {
+                    return patternSchema;
+                }
+            }
+            catch {
+                // ignore invalid regex
+            }
+        }
+        if (schema.additionalProperties === true || schema.additionalProperties === undefined) {
+            return {};
+        }
+        if (schema.additionalProperties && typeof schema.additionalProperties === 'object') {
+            return schema.additionalProperties;
+        }
+        if (schema.unevaluatedProperties && typeof schema.unevaluatedProperties === 'object') {
+            return schema.unevaluatedProperties;
+        }
+        if (schema.unevaluatedProperties === true) {
+            return {};
+        }
+        return undefined;
+    }
+    resolveInitialValue(schema, value) {
+        if (value !== undefined) {
+            return value;
+        }
+        if (schema.const !== undefined) {
+            return schema.const;
+        }
+        if (schema.default !== undefined) {
+            return schema.default;
+        }
+        if (schema.enum && schema.enum.length > 0) {
+            return schema.enum[0];
+        }
+        if (schema.type === 'boolean') {
+            return false;
+        }
+        if (schema.type === 'array') {
+            return [];
+        }
+        if (schema.type === 'object') {
+            return {};
+        }
+        return null;
+    }
+    buildValidators(schema, required, resolvedType) {
+        const validators = [];
+        if (required) {
+            validators.push(Validators.required);
+        }
+        if (schema.minLength !== undefined) {
+            validators.push(Validators.minLength(schema.minLength));
+        }
+        if (schema.maxLength !== undefined) {
+            validators.push(Validators.maxLength(schema.maxLength));
+        }
+        if (schema.minimum !== undefined) {
+            validators.push(Validators.min(schema.minimum));
+        }
+        if (schema.maximum !== undefined) {
+            validators.push(Validators.max(schema.maximum));
+        }
+        if (schema.exclusiveMinimum !== undefined) {
+            validators.push((control) => control.value === null || control.value === undefined || control.value === ''
+                ? null
+                : Number(control.value) > schema.exclusiveMinimum
+                    ? null
+                    : { exclusiveMinimum: true });
+        }
+        if (schema.exclusiveMaximum !== undefined) {
+            validators.push((control) => control.value === null || control.value === undefined || control.value === ''
+                ? null
+                : Number(control.value) < schema.exclusiveMaximum
+                    ? null
+                    : { exclusiveMaximum: true });
+        }
+        if (schema.multipleOf !== undefined) {
+            validators.push((control) => {
+                if (control.value === null || control.value === undefined || control.value === '') {
+                    return null;
+                }
+                const numericValue = Number(control.value);
+                return numericValue % schema.multipleOf === 0 ? null : { multipleOf: true };
+            });
+        }
+        if (schema.pattern) {
+            validators.push(Validators.pattern(schema.pattern));
+        }
+        if (schema.format === 'email') {
+            validators.push(Validators.email);
+        }
+        if (schema.minItems !== undefined) {
+            validators.push((control) => Array.isArray(control.value) && control.value.length < schema.minItems
+                ? { minItems: true }
+                : null);
+        }
+        if (schema.maxItems !== undefined) {
+            validators.push((control) => Array.isArray(control.value) && control.value.length > schema.maxItems
+                ? { maxItems: true }
+                : null);
+        }
+        if (schema.uniqueItems) {
+            validators.push((control) => {
+                if (!Array.isArray(control.value)) {
+                    return null;
+                }
+                const unique = new Set(control.value.map((item) => JSON.stringify(item)));
+                return unique.size === control.value.length ? null : { uniqueItems: true };
+            });
+        }
+        if (schema.minProperties !== undefined) {
+            validators.push((control) => {
+                if (!control.value || typeof control.value !== 'object') {
+                    return null;
+                }
+                return Object.keys(control.value).length < schema.minProperties
+                    ? { minProperties: true }
+                    : null;
+            });
+        }
+        if (schema.maxProperties !== undefined) {
+            validators.push((control) => {
+                if (!control.value || typeof control.value !== 'object') {
+                    return null;
+                }
+                return Object.keys(control.value).length > schema.maxProperties
+                    ? { maxProperties: true }
+                    : null;
+            });
+        }
+        if (resolvedType === 'integer') {
+            validators.push((control) => {
+                if (control.value === null || control.value === undefined || control.value === '') {
+                    return null;
+                }
+                const numericValue = Number(control.value);
+                return Number.isInteger(numericValue) ? null : { integer: true };
+            });
+        }
+        return validators;
+    }
+    isRecord(value) {
+        return !!value && typeof value === 'object' && !Array.isArray(value);
+    }
+    mergeSchemas(schemas) {
+        return schemas.reduce((acc, schema) => {
+            const merged = {
+                ...acc,
+                ...schema,
+                properties: { ...(acc.properties ?? {}), ...(schema.properties ?? {}) },
+                patternProperties: { ...(acc.patternProperties ?? {}), ...(schema.patternProperties ?? {}) },
+                required: Array.from(new Set([...(acc.required ?? []), ...(schema.required ?? [])])),
+            };
+            return merged;
+        }, {});
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: JsonSchemaFormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: JsonSchemaFormService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: JsonSchemaFormService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class JsonSchemaResolverService {
+    async resolve(schema, baseUri) {
+        const rootBase = baseUri ?? schema.$id ?? '';
+        const localCache = new Map();
+        const externalCache = new Map();
+        return this.resolveRefs(schema, schema, rootBase, localCache, externalCache);
+    }
+    async resolveRefs(current, root, baseUri, localCache, externalCache) {
+        if (!current || typeof current !== 'object') {
+            return current;
+        }
+        if (current.$ref) {
+            const ref = current.$ref;
+            if (ref.startsWith('#/')) {
+                if (localCache.has(ref)) {
+                    return localCache.get(ref);
+                }
+                const resolved = this.resolvePointer(root, ref);
+                if (resolved) {
+                    localCache.set(ref, resolved);
+                    return this.resolveRefs(resolved, root, baseUri, localCache, externalCache);
+                }
+            }
+            else {
+                const resolved = await this.resolveExternalRef(ref, baseUri, externalCache, localCache);
+                if (resolved) {
+                    return resolved;
+                }
+            }
+        }
+        const next = { ...current };
+        if (next.properties) {
+            const entries = await Promise.all(Object.entries(next.properties).map(async ([key, value]) => [
+                key,
+                await this.resolveRefs(value, root, baseUri, localCache, externalCache),
+            ]));
+            next.properties = Object.fromEntries(entries);
+        }
+        if (next.patternProperties) {
+            const entries = await Promise.all(Object.entries(next.patternProperties).map(async ([key, value]) => [
+                key,
+                await this.resolveRefs(value, root, baseUri, localCache, externalCache),
+            ]));
+            next.patternProperties = Object.fromEntries(entries);
+        }
+        if (next.items && typeof next.items === 'object') {
+            next.items = await this.resolveRefs(next.items, root, baseUri, localCache, externalCache);
+        }
+        if (next.prefixItems) {
+            next.prefixItems = await Promise.all(next.prefixItems.map((item) => this.resolveRefs(item, root, baseUri, localCache, externalCache)));
+        }
+        if (next.additionalProperties && typeof next.additionalProperties === 'object') {
+            next.additionalProperties = await this.resolveRefs(next.additionalProperties, root, baseUri, localCache, externalCache);
+        }
+        if (next.additionalItems && typeof next.additionalItems === 'object') {
+            next.additionalItems = await this.resolveRefs(next.additionalItems, root, baseUri, localCache, externalCache);
+        }
+        if (next.unevaluatedProperties && typeof next.unevaluatedProperties === 'object') {
+            next.unevaluatedProperties = await this.resolveRefs(next.unevaluatedProperties, root, baseUri, localCache, externalCache);
+        }
+        if (next.unevaluatedItems && typeof next.unevaluatedItems === 'object') {
+            next.unevaluatedItems = await this.resolveRefs(next.unevaluatedItems, root, baseUri, localCache, externalCache);
+        }
+        if (next.contains) {
+            next.contains = await this.resolveRefs(next.contains, root, baseUri, localCache, externalCache);
+        }
+        if (next.oneOf) {
+            next.oneOf = await Promise.all(next.oneOf.map((item) => this.resolveRefs(item, root, baseUri, localCache, externalCache)));
+        }
+        if (next.anyOf) {
+            next.anyOf = await Promise.all(next.anyOf.map((item) => this.resolveRefs(item, root, baseUri, localCache, externalCache)));
+        }
+        if (next.allOf) {
+            next.allOf = await Promise.all(next.allOf.map((item) => this.resolveRefs(item, root, baseUri, localCache, externalCache)));
+        }
+        if (next.not) {
+            next.not = await this.resolveRefs(next.not, root, baseUri, localCache, externalCache);
+        }
+        if (next.if) {
+            next.if = await this.resolveRefs(next.if, root, baseUri, localCache, externalCache);
+        }
+        if (next.then) {
+            next.then = await this.resolveRefs(next.then, root, baseUri, localCache, externalCache);
+        }
+        if (next.else) {
+            next.else = await this.resolveRefs(next.else, root, baseUri, localCache, externalCache);
+        }
+        if (next.dependencies) {
+            const entries = await Promise.all(Object.entries(next.dependencies).map(async ([key, value]) => {
+                if (value && typeof value === 'object' && !Array.isArray(value)) {
+                    return [key, await this.resolveRefs(value, root, baseUri, localCache, externalCache)];
+                }
+                return [key, value];
+            }));
+            next.dependencies = Object.fromEntries(entries);
+        }
+        if (next.dependentSchemas) {
+            const entries = await Promise.all(Object.entries(next.dependentSchemas).map(async ([key, value]) => [
+                key,
+                await this.resolveRefs(value, root, baseUri, localCache, externalCache),
+            ]));
+            next.dependentSchemas = Object.fromEntries(entries);
+        }
+        if (next.$defs) {
+            const entries = await Promise.all(Object.entries(next.$defs).map(async ([key, value]) => [
+                key,
+                await this.resolveRefs(value, root, baseUri, localCache, externalCache),
+            ]));
+            next.$defs = Object.fromEntries(entries);
+        }
+        if (next.definitions) {
+            const entries = await Promise.all(Object.entries(next.definitions).map(async ([key, value]) => [
+                key,
+                await this.resolveRefs(value, root, baseUri, localCache, externalCache),
+            ]));
+            next.definitions = Object.fromEntries(entries);
+        }
+        return next;
+    }
+    async resolveExternalRef(ref, baseUri, externalCache, localCache) {
+        try {
+            const url = new URL(ref, baseUri || window.location.href).toString();
+            if (externalCache.has(url)) {
+                return externalCache.get(url);
+            }
+            const { schema, fragment } = await this.fetchSchema(url);
+            if (!schema) {
+                return null;
+            }
+            const target = fragment ? this.resolvePointer(schema, fragment) : schema;
+            if (!target) {
+                return null;
+            }
+            const resolved = await this.resolveRefs(target, schema, schema.$id ?? url, localCache, externalCache);
+            externalCache.set(url, resolved);
+            return resolved;
+        }
+        catch {
+            return null;
+        }
+    }
+    async fetchSchema(url) {
+        const [base, hash] = url.split('#');
+        const fragment = hash ? `#/${hash.replace(/^\//, '')}` : null;
+        const response = await fetch(base, { headers: { Accept: 'application/json' } });
+        if (!response.ok) {
+            return { schema: null, fragment: null };
+        }
+        const schema = (await response.json());
+        return { schema, fragment };
+    }
+    resolvePointer(root, ref) {
+        const pointer = ref.replace(/^#\//, '');
+        const parts = pointer.split('/').map((part) => part.replace(/~1/g, '/').replace(/~0/g, '~'));
+        let current = root;
+        for (const part of parts) {
+            if (current && typeof current === 'object' && part in current) {
+                current = current[part];
+            }
+            else {
+                return null;
+            }
+        }
+        return current;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: JsonSchemaResolverService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: JsonSchemaResolverService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: JsonSchemaResolverService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class JsonSchemaValidationService {
+    ajvCache = new Map();
+    validate(schema, value) {
+        const draft = this.detectDraft(schema);
+        const ajv = this.getAjv(draft);
+        const validate = ajv.compile(schema);
+        const valid = validate(value);
+        if (valid) {
+            return [];
+        }
+        return validate.errors ?? [];
+    }
+    detectDraft(schema) {
+        const schemaId = schema.$schema ?? '';
+        if (schemaId.includes('draft-04')) {
+            return 'draft4';
+        }
+        if (schemaId.includes('draft-06')) {
+            return 'draft6';
+        }
+        if (schemaId.includes('draft-07')) {
+            return 'draft7';
+        }
+        if (schemaId.includes('2019-09')) {
+            return 'draft2019';
+        }
+        if (schemaId.includes('2020-12')) {
+            return 'draft2020';
+        }
+        if (schema.$defs) {
+            return 'draft2020';
+        }
+        if (schema.definitions) {
+            return 'draft7';
+        }
+        return 'draft2020';
+    }
+    getAjv(draft) {
+        if (this.ajvCache.has(draft)) {
+            return this.ajvCache.get(draft);
+        }
+        let ajv;
+        switch (draft) {
+            case 'draft4':
+                ajv = new AjvDraft04({
+                    strict: false,
+                    allErrors: true,
+                    allowUnionTypes: true,
+                });
+                break;
+            case 'draft2019':
+                ajv = new Ajv2019({
+                    strict: false,
+                    allErrors: true,
+                    allowUnionTypes: true,
+                });
+                break;
+            case 'draft6':
+            case 'draft7':
+                ajv = new Ajv({
+                    strict: false,
+                    allErrors: true,
+                    allowUnionTypes: true,
+                });
+                break;
+            case 'draft2020':
+            default:
+                ajv = new Ajv2020({
+                    strict: false,
+                    allErrors: true,
+                    allowUnionTypes: true,
+                });
+        }
+        addFormats(ajv);
+        this.ajvCache.set(draft, ajv);
+        return ajv;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: JsonSchemaValidationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: JsonSchemaValidationService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: JsonSchemaValidationService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class JsonSchemaNodeComponent {
+    schemaService;
+    validation;
+    schema;
+    control;
+    label = '';
+    required = false;
+    path = '';
+    errorsMap = new Map();
+    parent;
+    controlKey;
+    controlReplaced = new EventEmitter();
+    selectedOneOf = 0;
+    selectedAnyOf = new Set();
+    newPropertyKey = '';
+    propertyError = '';
+    constructor(schemaService, validation) {
+        this.schemaService = schemaService;
+        this.validation = validation;
+    }
+    ngOnInit() {
+        if (this.schema.anyOf?.length) {
+            this.selectedAnyOf.add(0);
+        }
+    }
+    get nodeKind() {
+        if (this.schema.oneOf?.length) {
+            return 'oneOf';
+        }
+        if (this.schema.anyOf?.length) {
+            return 'anyOf';
+        }
+        if (this.schema.allOf?.length) {
+            return 'allOf';
+        }
+        const resolved = this.resolvedType;
+        if (resolved === 'object') {
+            return 'object';
+        }
+        if (resolved === 'array') {
+            return 'array';
+        }
+        return 'primitive';
+    }
+    get resolvedType() {
+        return this.schemaService.resolveType(this.effectiveSchema) ?? 'string';
+    }
+    get inputKind() {
+        if (this.effectiveSchema.enum) {
+            return 'select';
+        }
+        if (this.resolvedType === 'boolean') {
+            return 'checkbox';
+        }
+        if (this.effectiveSchema.format === 'textarea' || (this.effectiveSchema.maxLength ?? 0) > 200) {
+            return 'textarea';
+        }
+        return 'text';
+    }
+    get inputType() {
+        if (this.effectiveSchema.format === 'email') {
+            return 'email';
+        }
+        if (this.effectiveSchema.format === 'date') {
+            return 'date';
+        }
+        if (this.effectiveSchema.format === 'time') {
+            return 'time';
+        }
+        if (this.effectiveSchema.format === 'date-time') {
+            return 'datetime-local';
+        }
+        if (this.resolvedType === 'number' || this.resolvedType === 'integer') {
+            return 'number';
+        }
+        if (this.effectiveSchema.format === 'password') {
+            return 'password';
+        }
+        return 'text';
+    }
+    get controlAsGroup() {
+        return this.control;
+    }
+    get controlAsFormControl() {
+        return this.control;
+    }
+    get controlAsArray() {
+        return this.control;
+    }
+    get arrayControls() {
+        return this.controlAsArray.controls;
+    }
+    get objectKeys() {
+        return Object.keys(this.controlAsGroup.controls);
+    }
+    get canAddProperty() {
+        return this.effectiveSchema.additionalProperties !== false || !!this.effectiveSchema.patternProperties;
+    }
+    get errorsForPath() {
+        return this.errorsMap.get(this.path) ?? [];
+    }
+    get metaBadges() {
+        const badges = [];
+        if (this.effectiveSchema.deprecated) {
+            badges.push('Deprecated');
+        }
+        if (this.effectiveSchema.readOnly) {
+            badges.push('Read-only');
+        }
+        if (this.effectiveSchema.writeOnly) {
+            badges.push('Write-only');
+        }
+        if (this.effectiveSchema.nullable) {
+            badges.push('Nullable');
+        }
+        if (this.effectiveSchema.not) {
+            badges.push('Not constraint');
+        }
+        return badges;
+    }
+    get activeVariant() {
+        if (this.schema.oneOf?.length) {
+            return this.schema.oneOf[this.selectedOneOf] ?? null;
+        }
+        if (this.schema.anyOf?.length) {
+            const selections = Array.from(this.selectedAnyOf).map((index) => this.schema.anyOf[index]);
+            return selections.length ? this.mergeSchemas(selections) : this.schema.anyOf[0] ?? null;
+        }
+        if (this.schema.allOf?.length) {
+            return this.mergeSchemas([this.schema, ...this.schema.allOf]);
+        }
+        return this.effectiveSchema;
+    }
+    get mergedAllOf() {
+        return this.schema.allOf?.length ? [this.schema, ...this.schema.allOf] : [this.schema];
+    }
+    isRequired(key) {
+        return this.effectiveSchema.required?.includes(key) ?? false;
+    }
+    schemaForKey(key) {
+        return (this.effectiveSchema.properties?.[key] ??
+            this.schemaService.resolveDynamicSchema(this.effectiveSchema, key) ??
+            {});
+    }
+    isDynamicKey(key) {
+        return !this.effectiveSchema.properties?.[key];
+    }
+    pathForChild(key) {
+        if (this.path === '') {
+            return `/${key}`;
+        }
+        return `${this.path}/${key}`;
+    }
+    addDynamicProperty() {
+        this.propertyError = '';
+        const key = this.newPropertyKey.trim();
+        if (!key) {
+            this.propertyError = 'Property name is required.';
+            return;
+        }
+        if (this.effectiveSchema.propertyNames) {
+            const nameErrors = this.validation.validate(this.effectiveSchema.propertyNames, key);
+            if (nameErrors.length) {
+                this.propertyError = 'Property name does not match schema constraints.';
+                return;
+            }
+        }
+        if (this.controlAsGroup.contains(key)) {
+            this.propertyError = 'Property already exists.';
+            return;
+        }
+        const schemaForKey = this.schemaService.resolveDynamicSchema(this.effectiveSchema, key);
+        if (!schemaForKey) {
+            this.propertyError = 'This property is not allowed by the schema.';
+            return;
+        }
+        const control = this.schemaService.buildControl(schemaForKey, undefined, false);
+        this.controlAsGroup.addControl(key, control);
+        this.newPropertyKey = '';
+    }
+    removeDynamicKey(key) {
+        this.controlAsGroup.removeControl(key);
+    }
+    schemaForIndex(index) {
+        const prefixItems = this.effectiveSchema.prefixItems ?? [];
+        if (prefixItems[index]) {
+            return prefixItems[index];
+        }
+        if (this.effectiveSchema.items && this.effectiveSchema.items !== true) {
+            return this.effectiveSchema.items;
+        }
+        if (this.effectiveSchema.additionalItems && this.effectiveSchema.additionalItems !== true) {
+            return this.effectiveSchema.additionalItems;
+        }
+        if (this.effectiveSchema.unevaluatedItems && this.effectiveSchema.unevaluatedItems !== true) {
+            return this.effectiveSchema.unevaluatedItems;
+        }
+        return {};
+    }
+    get canAddArrayItem() {
+        if (this.effectiveSchema.items === false ||
+            this.effectiveSchema.additionalItems === false ||
+            this.effectiveSchema.unevaluatedItems === false) {
+            return false;
+        }
+        return true;
+    }
+    addArrayItem() {
+        if (!this.canAddArrayItem) {
+            return;
+        }
+        const formArray = this.controlAsArray;
+        const index = formArray.length;
+        const schemaForItem = this.schemaForIndex(index);
+        formArray.push(this.schemaService.buildControl(schemaForItem, undefined, false));
+        formArray.markAsDirty();
+    }
+    removeArrayItem(index) {
+        const formArray = this.controlAsArray;
+        formArray.removeAt(index);
+        formArray.markAsDirty();
+    }
+    onOneOfChange() {
+        if (!this.activeVariant) {
+            return;
+        }
+        this.replaceControl(this.schemaService.buildControl(this.activeVariant, this.control.value, this.required));
+    }
+    toggleAnyOf(index) {
+        if (this.selectedAnyOf.has(index)) {
+            this.selectedAnyOf.delete(index);
+        }
+        else {
+            this.selectedAnyOf.add(index);
+        }
+        const variant = this.activeVariant;
+        if (variant) {
+            this.replaceControl(this.schemaService.buildControl(variant, this.control.value, this.required));
+        }
+    }
+    replaceControl(control) {
+        if (this.parent) {
+            if (this.parent instanceof FormGroup && typeof this.controlKey === 'string') {
+                this.parent.setControl(this.controlKey, control);
+            }
+            if (this.parent instanceof FormArray && typeof this.controlKey === 'number') {
+                this.parent.setControl(this.controlKey, control);
+            }
+            this.control = control;
+            return;
+        }
+        this.control = control;
+        this.controlReplaced.emit(control);
+    }
+    childControl(key) {
+        return this.controlAsGroup.get(key);
+    }
+    get effectiveSchema() {
+        let schema = this.schema;
+        if (schema.allOf?.length) {
+            schema = this.mergeSchemas([schema, ...schema.allOf]);
+        }
+        schema = this.applyConditional(schema);
+        schema = this.applyDependencies(schema);
+        return schema;
+    }
+    applyConditional(schema) {
+        if (!schema.if) {
+            return schema;
+        }
+        const errors = this.validation.validate(schema.if, this.control.value);
+        const branch = errors.length === 0 ? schema.then : schema.else;
+        if (!branch) {
+            return schema;
+        }
+        return this.mergeSchemas([schema, branch]);
+    }
+    applyDependencies(schema) {
+        const value = this.control.value;
+        if (!value || typeof value !== 'object' || Array.isArray(value)) {
+            return schema;
+        }
+        let merged = { ...schema };
+        const valueKeys = Object.keys(value);
+        if (schema.dependentRequired) {
+            for (const key of valueKeys) {
+                const required = schema.dependentRequired[key];
+                if (required?.length) {
+                    merged = this.mergeSchemas([merged, { required }]);
+                }
+            }
+        }
+        if (schema.dependentSchemas) {
+            for (const key of valueKeys) {
+                const depSchema = schema.dependentSchemas[key];
+                if (depSchema) {
+                    merged = this.mergeSchemas([merged, depSchema]);
+                }
+            }
+        }
+        if (schema.dependencies) {
+            for (const key of valueKeys) {
+                const dep = schema.dependencies[key];
+                if (Array.isArray(dep)) {
+                    merged = this.mergeSchemas([merged, { required: dep }]);
+                }
+                else if (dep) {
+                    merged = this.mergeSchemas([merged, dep]);
+                }
+            }
+        }
+        return merged;
+    }
+    mergeSchemas(schemas) {
+        return schemas.reduce((acc, schema) => {
+            const merged = {
+                ...acc,
+                ...schema,
+                properties: { ...(acc.properties ?? {}), ...(schema.properties ?? {}) },
+                patternProperties: { ...(acc.patternProperties ?? {}), ...(schema.patternProperties ?? {}) },
+                required: Array.from(new Set([...(acc.required ?? []), ...(schema.required ?? [])])),
+            };
+            if (acc.type && schema.type) {
+                const accTypes = Array.isArray(acc.type) ? acc.type : [acc.type];
+                const schemaTypes = Array.isArray(schema.type) ? schema.type : [schema.type];
+                merged.type = Array.from(new Set([...accTypes, ...schemaTypes]));
+            }
+            return merged;
+        }, {});
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: JsonSchemaNodeComponent, deps: [{ token: JsonSchemaFormService }, { token: JsonSchemaValidationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: JsonSchemaNodeComponent, isStandalone: true, selector: "jsm-schema-node", inputs: { schema: "schema", control: "control", label: "label", required: "required", path: "path", errorsMap: "errorsMap", parent: "parent", controlKey: "controlKey" }, outputs: { controlReplaced: "controlReplaced" }, ngImport: i0, template: `
+    <ng-container [ngSwitch]="nodeKind">
+      <div *ngSwitchCase="'oneOf'" class="space-y-3">
+        <div class="flex items-center justify-between">
+          <div>
+            <div class="text-sm font-semibold text-slate-800">{{ schema.title || label }}</div>
+            <p *ngIf="schema.description" class="text-xs text-slate-500">{{ schema.description }}</p>
+          </div>
+          <span class="text-xs text-slate-400">oneOf</span>
+        </div>
+
+        <select
+          class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-slate-900"
+          [(ngModel)]="selectedOneOf"
+          (ngModelChange)="onOneOfChange()"
+        >
+          <option *ngFor="let option of schema.oneOf; let i = index" [ngValue]="i">
+            {{ option.title || ('Option ' + (i + 1)) }}
+          </option>
+        </select>
+
+        <jsm-schema-node
+          *ngIf="activeVariant"
+          [schema]="activeVariant"
+          [control]="control"
+          [parent]="parent"
+          [controlKey]="controlKey"
+          [path]="path"
+          [errorsMap]="errorsMap"
+          [label]="label"
+          [required]="required"
+          (controlReplaced)="controlReplaced.emit($event)"
+        ></jsm-schema-node>
+      </div>
+
+      <div *ngSwitchCase="'anyOf'" class="space-y-3">
+        <div class="flex items-center justify-between">
+          <div>
+            <div class="text-sm font-semibold text-slate-800">{{ schema.title || label }}</div>
+            <p *ngIf="schema.description" class="text-xs text-slate-500">{{ schema.description }}</p>
+          </div>
+          <span class="text-xs text-slate-400">anyOf</span>
+        </div>
+
+        <div class="flex flex-col gap-2">
+          <label
+            *ngFor="let option of schema.anyOf; let i = index"
+            class="inline-flex items-center gap-2 text-sm text-slate-700"
+          >
+            <input
+              type="checkbox"
+              class="h-4 w-4 rounded border-slate-300 text-slate-900"
+              [checked]="selectedAnyOf.has(i)"
+              (change)="toggleAnyOf(i)"
+            />
+            {{ option.title || ('Option ' + (i + 1)) }}
+          </label>
+        </div>
+
+        <jsm-schema-node
+          *ngIf="activeVariant"
+          [schema]="activeVariant"
+          [control]="control"
+          [parent]="parent"
+          [controlKey]="controlKey"
+          [path]="path"
+          [errorsMap]="errorsMap"
+          [label]="label"
+          [required]="required"
+          (controlReplaced)="controlReplaced.emit($event)"
+        ></jsm-schema-node>
+      </div>
+
+      <div *ngSwitchCase="'allOf'" class="space-y-4">
+        <div class="flex items-center justify-between">
+          <div>
+            <div class="text-sm font-semibold text-slate-800">{{ schema.title || label }}</div>
+            <p *ngIf="schema.description" class="text-xs text-slate-500">{{ schema.description }}</p>
+          </div>
+          <span class="text-xs text-slate-400">allOf</span>
+        </div>
+
+        <div *ngFor="let subSchema of mergedAllOf; let i = index" class="rounded-xl border border-slate-200 p-3">
+          <jsm-schema-node
+            [schema]="subSchema"
+            [control]="control"
+            [parent]="parent"
+            [controlKey]="controlKey"
+            [path]="path"
+            [errorsMap]="errorsMap"
+            [label]="subSchema.title || ('Section ' + (i + 1))"
+            [required]="required"
+            (controlReplaced)="controlReplaced.emit($event)"
+          ></jsm-schema-node>
+        </div>
+      </div>
+
+      <fieldset *ngSwitchCase="'object'" class="group border border-slate-200 rounded-2xl p-4 bg-white/70 shadow-sm transition hover:-translate-y-0.5 hover:shadow-md">
+        <legend class="px-2 text-sm font-semibold text-slate-700">{{ schema.title || label }}</legend>
+        <p *ngIf="schema.description" class="text-xs text-slate-500 mb-4">{{ schema.description }}</p>
+        <div *ngIf="metaBadges.length" class="flex flex-wrap gap-2 mb-4">
+          <span
+            *ngFor="let badge of metaBadges"
+            class="rounded-full bg-slate-100 px-2 py-0.5 text-[10px] font-semibold text-slate-600"
+          >
+            {{ badge }}
+          </span>
+        </div>
+
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4" [formGroup]="controlAsGroup">
+          <ng-container *ngFor="let key of objectKeys">
+            <div class="flex flex-col gap-2">
+              <div class="flex items-center justify-between" *ngIf="isDynamicKey(key)">
+                <span class="text-xs font-semibold text-slate-500">{{ key }}</span>
+                <button
+                  type="button"
+                  class="text-xs font-semibold text-rose-600 transition hover:text-rose-700"
+                  (click)="removeDynamicKey(key)"
+                >
+                  Remove
+                </button>
+              </div>
+              <jsm-schema-node
+                [schema]="schemaForKey(key)"
+                [control]="childControl(key)"
+                [parent]="controlAsGroup"
+                [controlKey]="key"
+                [path]="pathForChild(key)"
+                [errorsMap]="errorsMap"
+                [label]="key"
+                [required]="isRequired(key)"
+                (controlReplaced)="controlReplaced.emit($event)"
+              ></jsm-schema-node>
+            </div>
+          </ng-container>
+        </div>
+
+        <div class="mt-4 space-y-2" *ngIf="canAddProperty">
+          <div class="text-xs font-semibold text-slate-500">Add property</div>
+          <div class="flex flex-col md:flex-row gap-2">
+            <input
+              class="flex-1 rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm shadow-sm transition focus:outline-none focus:ring-2 focus:ring-slate-900 hover:border-slate-400"
+              [(ngModel)]="newPropertyKey"
+              placeholder="propertyName"
+            />
+            <button
+              type="button"
+              class="px-3 py-2 rounded-lg text-sm font-medium bg-slate-900 text-white shadow-sm transition hover:-translate-y-0.5 hover:bg-slate-800 hover:shadow-md"
+              (click)="addDynamicProperty()"
+            >
+              Add
+            </button>
+          </div>
+          <div *ngIf="propertyError" class="text-xs text-rose-600">{{ propertyError }}</div>
+        </div>
+
+        <div *ngIf="errorsForPath.length" class="mt-3 text-xs text-rose-600 space-y-1">
+          <div *ngFor="let error of errorsForPath">{{ error }}</div>
+        </div>
+      </fieldset>
+
+      <div *ngSwitchCase="'array'" class="space-y-3">
+        <div class="flex items-center justify-between">
+          <div>
+            <div class="text-sm font-semibold text-slate-700">{{ schema.title || label }}</div>
+            <p *ngIf="schema.description" class="text-xs text-slate-500">{{ schema.description }}</p>
+          </div>
+          <button
+            type="button"
+            class="px-3 py-1.5 rounded-full text-sm font-medium bg-slate-900 text-white shadow-sm transition hover:-translate-y-0.5 hover:bg-slate-800 hover:shadow-md disabled:opacity-50 disabled:cursor-not-allowed"
+            (click)="addArrayItem()"
+            [disabled]="!canAddArrayItem"
+          >
+            Add
+          </button>
+        </div>
+
+        <div class="text-xs text-slate-500" *ngIf="effectiveSchema.contains">
+          Must contain item(s) that match the contains schema.
+          <span *ngIf="effectiveSchema.minContains">Min: {{ effectiveSchema.minContains }}</span>
+          <span *ngIf="effectiveSchema.maxContains">Max: {{ effectiveSchema.maxContains }}</span>
+        </div>
+
+        <div *ngIf="metaBadges.length" class="flex flex-wrap gap-2">
+          <span
+            *ngFor="let badge of metaBadges"
+            class="rounded-full bg-slate-100 px-2 py-0.5 text-[10px] font-semibold text-slate-600"
+          >
+            {{ badge }}
+          </span>
+        </div>
+
+        <div class="space-y-3" *ngIf="arrayControls.length > 0; else emptyArray">
+          <div
+            *ngFor="let item of arrayControls; let i = index"
+            class="rounded-2xl border border-slate-200 p-3 bg-white shadow-sm transition hover:-translate-y-0.5 hover:shadow-md"
+          >
+            <div class="flex items-center justify-between mb-2">
+              <span class="text-xs font-semibold text-slate-500">Item {{ i + 1 }}</span>
+              <button
+                type="button"
+                class="text-xs font-semibold text-rose-600 transition hover:text-rose-700"
+                (click)="removeArrayItem(i)"
+              >
+                Remove
+              </button>
+            </div>
+            <jsm-schema-node
+              [schema]="schemaForIndex(i)"
+              [control]="item"
+              [parent]="controlAsArray"
+              [controlKey]="i"
+              [path]="pathForChild(i)"
+              [errorsMap]="errorsMap"
+              [label]="label + ' item'"
+              (controlReplaced)="controlReplaced.emit($event)"
+            ></jsm-schema-node>
+          </div>
+        </div>
+
+        <ng-template #emptyArray>
+          <div class="text-xs text-slate-400 italic">No items yet.</div>
+        </ng-template>
+
+        <div *ngIf="errorsForPath.length" class="text-xs text-rose-600 space-y-1">
+          <div *ngFor="let error of errorsForPath">{{ error }}</div>
+        </div>
+      </div>
+
+      <div *ngSwitchDefault class="space-y-2">
+        <ng-container *ngIf="inputKind !== 'checkbox'">
+          <label class="text-sm font-medium text-slate-700">
+            {{ schema.title || label }}
+            <span *ngIf="required" class="text-rose-500">*</span>
+          </label>
+          <p *ngIf="schema.description" class="text-xs text-slate-500">{{ schema.description }}</p>
+        </ng-container>
+
+        <div *ngIf="metaBadges.length" class="flex flex-wrap gap-2">
+          <span
+            *ngFor="let badge of metaBadges"
+            class="rounded-full bg-slate-100 px-2 py-0.5 text-[10px] font-semibold text-slate-600"
+          >
+            {{ badge }}
+          </span>
+        </div>
+
+        <ng-container [ngSwitch]="inputKind">
+          <input
+            *ngSwitchCase="'text'"
+            class="w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm shadow-sm transition focus:outline-none focus:ring-2 focus:ring-slate-900 hover:border-slate-400"
+            [attr.type]="inputType"
+            [attr.placeholder]="schema.title || label"
+            [formControl]="controlAsFormControl"
+          />
+
+          <textarea
+            *ngSwitchCase="'textarea'"
+            rows="4"
+            class="w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm shadow-sm transition focus:outline-none focus:ring-2 focus:ring-slate-900 hover:border-slate-400"
+            [attr.placeholder]="schema.title || label"
+            [formControl]="controlAsFormControl"
+          ></textarea>
+
+          <select
+            *ngSwitchCase="'select'"
+            class="w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm shadow-sm transition focus:outline-none focus:ring-2 focus:ring-slate-900 hover:border-slate-400"
+            [formControl]="controlAsFormControl"
+          >
+            <option *ngFor="let option of effectiveSchema.enum" [ngValue]="option">{{ option }}</option>
+          </select>
+
+          <label *ngSwitchCase="'checkbox'" class="inline-flex items-center gap-2 text-sm text-slate-700">
+            <input type="checkbox" class="h-4 w-4 rounded border-slate-300 text-slate-900 transition" [formControl]="controlAsFormControl" />
+            <span>
+              {{ schema.title || label }}
+              <span *ngIf="required" class="text-rose-500">*</span>
+            </span>
+          </label>
+        </ng-container>
+
+        <p *ngIf="inputKind === 'checkbox' && schema.description" class="text-xs text-slate-500">
+          {{ schema.description }}
+        </p>
+
+        <div *ngIf="effectiveSchema.examples?.length" class="text-xs text-slate-400">
+          Example: {{ effectiveSchema.examples?.[0] }}
+        </div>
+
+        <div *ngIf="effectiveSchema.contentMediaType" class="text-xs text-slate-400">
+          Content type: {{ effectiveSchema.contentMediaType }}
+          <span *ngIf="effectiveSchema.contentEncoding">({{ effectiveSchema.contentEncoding }})</span>
+        </div>
+
+        <div *ngIf="errorsForPath.length" class="text-xs text-rose-600 space-y-1">
+          <div *ngFor="let error of errorsForPath">{{ error }}</div>
+        </div>
+      </div>
+    </ng-container>
+  `, isInline: true, dependencies: [{ kind: "component", type: JsonSchemaNodeComponent, selector: "jsm-schema-node", inputs: ["schema", "control", "label", "required", "path", "errorsMap", "parent", "controlKey"], outputs: ["controlReplaced"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.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: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: JsonSchemaNodeComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'jsm-schema-node',
+                    standalone: true,
+                    imports: [CommonModule, FormsModule, ReactiveFormsModule],
+                    template: `
+    <ng-container [ngSwitch]="nodeKind">
+      <div *ngSwitchCase="'oneOf'" class="space-y-3">
+        <div class="flex items-center justify-between">
+          <div>
+            <div class="text-sm font-semibold text-slate-800">{{ schema.title || label }}</div>
+            <p *ngIf="schema.description" class="text-xs text-slate-500">{{ schema.description }}</p>
+          </div>
+          <span class="text-xs text-slate-400">oneOf</span>
+        </div>
+
+        <select
+          class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-slate-900"
+          [(ngModel)]="selectedOneOf"
+          (ngModelChange)="onOneOfChange()"
+        >
+          <option *ngFor="let option of schema.oneOf; let i = index" [ngValue]="i">
+            {{ option.title || ('Option ' + (i + 1)) }}
+          </option>
+        </select>
+
+        <jsm-schema-node
+          *ngIf="activeVariant"
+          [schema]="activeVariant"
+          [control]="control"
+          [parent]="parent"
+          [controlKey]="controlKey"
+          [path]="path"
+          [errorsMap]="errorsMap"
+          [label]="label"
+          [required]="required"
+          (controlReplaced)="controlReplaced.emit($event)"
+        ></jsm-schema-node>
+      </div>
+
+      <div *ngSwitchCase="'anyOf'" class="space-y-3">
+        <div class="flex items-center justify-between">
+          <div>
+            <div class="text-sm font-semibold text-slate-800">{{ schema.title || label }}</div>
+            <p *ngIf="schema.description" class="text-xs text-slate-500">{{ schema.description }}</p>
+          </div>
+          <span class="text-xs text-slate-400">anyOf</span>
+        </div>
+
+        <div class="flex flex-col gap-2">
+          <label
+            *ngFor="let option of schema.anyOf; let i = index"
+            class="inline-flex items-center gap-2 text-sm text-slate-700"
+          >
+            <input
+              type="checkbox"
+              class="h-4 w-4 rounded border-slate-300 text-slate-900"
+              [checked]="selectedAnyOf.has(i)"
+              (change)="toggleAnyOf(i)"
+            />
+            {{ option.title || ('Option ' + (i + 1)) }}
+          </label>
+        </div>
+
+        <jsm-schema-node
+          *ngIf="activeVariant"
+          [schema]="activeVariant"
+          [control]="control"
+          [parent]="parent"
+          [controlKey]="controlKey"
+          [path]="path"
+          [errorsMap]="errorsMap"
+          [label]="label"
+          [required]="required"
+          (controlReplaced)="controlReplaced.emit($event)"
+        ></jsm-schema-node>
+      </div>
+
+      <div *ngSwitchCase="'allOf'" class="space-y-4">
+        <div class="flex items-center justify-between">
+          <div>
+            <div class="text-sm font-semibold text-slate-800">{{ schema.title || label }}</div>
+            <p *ngIf="schema.description" class="text-xs text-slate-500">{{ schema.description }}</p>
+          </div>
+          <span class="text-xs text-slate-400">allOf</span>
+        </div>
+
+        <div *ngFor="let subSchema of mergedAllOf; let i = index" class="rounded-xl border border-slate-200 p-3">
+          <jsm-schema-node
+            [schema]="subSchema"
+            [control]="control"
+            [parent]="parent"
+            [controlKey]="controlKey"
+            [path]="path"
+            [errorsMap]="errorsMap"
+            [label]="subSchema.title || ('Section ' + (i + 1))"
+            [required]="required"
+            (controlReplaced)="controlReplaced.emit($event)"
+          ></jsm-schema-node>
+        </div>
+      </div>
+
+      <fieldset *ngSwitchCase="'object'" class="group border border-slate-200 rounded-2xl p-4 bg-white/70 shadow-sm transition hover:-translate-y-0.5 hover:shadow-md">
+        <legend class="px-2 text-sm font-semibold text-slate-700">{{ schema.title || label }}</legend>
+        <p *ngIf="schema.description" class="text-xs text-slate-500 mb-4">{{ schema.description }}</p>
+        <div *ngIf="metaBadges.length" class="flex flex-wrap gap-2 mb-4">
+          <span
+            *ngFor="let badge of metaBadges"
+            class="rounded-full bg-slate-100 px-2 py-0.5 text-[10px] font-semibold text-slate-600"
+          >
+            {{ badge }}
+          </span>
+        </div>
+
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4" [formGroup]="controlAsGroup">
+          <ng-container *ngFor="let key of objectKeys">
+            <div class="flex flex-col gap-2">
+              <div class="flex items-center justify-between" *ngIf="isDynamicKey(key)">
+                <span class="text-xs font-semibold text-slate-500">{{ key }}</span>
+                <button
+                  type="button"
+                  class="text-xs font-semibold text-rose-600 transition hover:text-rose-700"
+                  (click)="removeDynamicKey(key)"
+                >
+                  Remove
+                </button>
+              </div>
+              <jsm-schema-node
+                [schema]="schemaForKey(key)"
+                [control]="childControl(key)"
+                [parent]="controlAsGroup"
+                [controlKey]="key"
+                [path]="pathForChild(key)"
+                [errorsMap]="errorsMap"
+                [label]="key"
+                [required]="isRequired(key)"
+                (controlReplaced)="controlReplaced.emit($event)"
+              ></jsm-schema-node>
+            </div>
+          </ng-container>
+        </div>
+
+        <div class="mt-4 space-y-2" *ngIf="canAddProperty">
+          <div class="text-xs font-semibold text-slate-500">Add property</div>
+          <div class="flex flex-col md:flex-row gap-2">
+            <input
+              class="flex-1 rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm shadow-sm transition focus:outline-none focus:ring-2 focus:ring-slate-900 hover:border-slate-400"
+              [(ngModel)]="newPropertyKey"
+              placeholder="propertyName"
+            />
+            <button
+              type="button"
+              class="px-3 py-2 rounded-lg text-sm font-medium bg-slate-900 text-white shadow-sm transition hover:-translate-y-0.5 hover:bg-slate-800 hover:shadow-md"
+              (click)="addDynamicProperty()"
+            >
+              Add
+            </button>
+          </div>
+          <div *ngIf="propertyError" class="text-xs text-rose-600">{{ propertyError }}</div>
+        </div>
+
+        <div *ngIf="errorsForPath.length" class="mt-3 text-xs text-rose-600 space-y-1">
+          <div *ngFor="let error of errorsForPath">{{ error }}</div>
+        </div>
+      </fieldset>
+
+      <div *ngSwitchCase="'array'" class="space-y-3">
+        <div class="flex items-center justify-between">
+          <div>
+            <div class="text-sm font-semibold text-slate-700">{{ schema.title || label }}</div>
+            <p *ngIf="schema.description" class="text-xs text-slate-500">{{ schema.description }}</p>
+          </div>
+          <button
+            type="button"
+            class="px-3 py-1.5 rounded-full text-sm font-medium bg-slate-900 text-white shadow-sm transition hover:-translate-y-0.5 hover:bg-slate-800 hover:shadow-md disabled:opacity-50 disabled:cursor-not-allowed"
+            (click)="addArrayItem()"
+            [disabled]="!canAddArrayItem"
+          >
+            Add
+          </button>
+        </div>
+
+        <div class="text-xs text-slate-500" *ngIf="effectiveSchema.contains">
+          Must contain item(s) that match the contains schema.
+          <span *ngIf="effectiveSchema.minContains">Min: {{ effectiveSchema.minContains }}</span>
+          <span *ngIf="effectiveSchema.maxContains">Max: {{ effectiveSchema.maxContains }}</span>
+        </div>
+
+        <div *ngIf="metaBadges.length" class="flex flex-wrap gap-2">
+          <span
+            *ngFor="let badge of metaBadges"
+            class="rounded-full bg-slate-100 px-2 py-0.5 text-[10px] font-semibold text-slate-600"
+          >
+            {{ badge }}
+          </span>
+        </div>
+
+        <div class="space-y-3" *ngIf="arrayControls.length > 0; else emptyArray">
+          <div
+            *ngFor="let item of arrayControls; let i = index"
+            class="rounded-2xl border border-slate-200 p-3 bg-white shadow-sm transition hover:-translate-y-0.5 hover:shadow-md"
+          >
+            <div class="flex items-center justify-between mb-2">
+              <span class="text-xs font-semibold text-slate-500">Item {{ i + 1 }}</span>
+              <button
+                type="button"
+                class="text-xs font-semibold text-rose-600 transition hover:text-rose-700"
+                (click)="removeArrayItem(i)"
+              >
+                Remove
+              </button>
+            </div>
+            <jsm-schema-node
+              [schema]="schemaForIndex(i)"
+              [control]="item"
+              [parent]="controlAsArray"
+              [controlKey]="i"
+              [path]="pathForChild(i)"
+              [errorsMap]="errorsMap"
+              [label]="label + ' item'"
+              (controlReplaced)="controlReplaced.emit($event)"
+            ></jsm-schema-node>
+          </div>
+        </div>
+
+        <ng-template #emptyArray>
+          <div class="text-xs text-slate-400 italic">No items yet.</div>
+        </ng-template>
+
+        <div *ngIf="errorsForPath.length" class="text-xs text-rose-600 space-y-1">
+          <div *ngFor="let error of errorsForPath">{{ error }}</div>
+        </div>
+      </div>
+
+      <div *ngSwitchDefault class="space-y-2">
+        <ng-container *ngIf="inputKind !== 'checkbox'">
+          <label class="text-sm font-medium text-slate-700">
+            {{ schema.title || label }}
+            <span *ngIf="required" class="text-rose-500">*</span>
+          </label>
+          <p *ngIf="schema.description" class="text-xs text-slate-500">{{ schema.description }}</p>
+        </ng-container>
+
+        <div *ngIf="metaBadges.length" class="flex flex-wrap gap-2">
+          <span
+            *ngFor="let badge of metaBadges"
+            class="rounded-full bg-slate-100 px-2 py-0.5 text-[10px] font-semibold text-slate-600"
+          >
+            {{ badge }}
+          </span>
+        </div>
+
+        <ng-container [ngSwitch]="inputKind">
+          <input
+            *ngSwitchCase="'text'"
+            class="w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm shadow-sm transition focus:outline-none focus:ring-2 focus:ring-slate-900 hover:border-slate-400"
+            [attr.type]="inputType"
+            [attr.placeholder]="schema.title || label"
+            [formControl]="controlAsFormControl"
+          />
+
+          <textarea
+            *ngSwitchCase="'textarea'"
+            rows="4"
+            class="w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm shadow-sm transition focus:outline-none focus:ring-2 focus:ring-slate-900 hover:border-slate-400"
+            [attr.placeholder]="schema.title || label"
+            [formControl]="controlAsFormControl"
+          ></textarea>
+
+          <select
+            *ngSwitchCase="'select'"
+            class="w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm shadow-sm transition focus:outline-none focus:ring-2 focus:ring-slate-900 hover:border-slate-400"
+            [formControl]="controlAsFormControl"
+          >
+            <option *ngFor="let option of effectiveSchema.enum" [ngValue]="option">{{ option }}</option>
+          </select>
+
+          <label *ngSwitchCase="'checkbox'" class="inline-flex items-center gap-2 text-sm text-slate-700">
+            <input type="checkbox" class="h-4 w-4 rounded border-slate-300 text-slate-900 transition" [formControl]="controlAsFormControl" />
+            <span>
+              {{ schema.title || label }}
+              <span *ngIf="required" class="text-rose-500">*</span>
+            </span>
+          </label>
+        </ng-container>
+
+        <p *ngIf="inputKind === 'checkbox' && schema.description" class="text-xs text-slate-500">
+          {{ schema.description }}
+        </p>
+
+        <div *ngIf="effectiveSchema.examples?.length" class="text-xs text-slate-400">
+          Example: {{ effectiveSchema.examples?.[0] }}
+        </div>
+
+        <div *ngIf="effectiveSchema.contentMediaType" class="text-xs text-slate-400">
+          Content type: {{ effectiveSchema.contentMediaType }}
+          <span *ngIf="effectiveSchema.contentEncoding">({{ effectiveSchema.contentEncoding }})</span>
+        </div>
+
+        <div *ngIf="errorsForPath.length" class="text-xs text-rose-600 space-y-1">
+          <div *ngFor="let error of errorsForPath">{{ error }}</div>
+        </div>
+      </div>
+    </ng-container>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: () => [{ type: JsonSchemaFormService }, { type: JsonSchemaValidationService }], propDecorators: { schema: [{
+                type: Input,
+                args: [{ required: true }]
+            }], control: [{
+                type: Input,
+                args: [{ required: true }]
+            }], label: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], path: [{
+                type: Input
+            }], errorsMap: [{
+                type: Input
+            }], parent: [{
+                type: Input
+            }], controlKey: [{
+                type: Input
+            }], controlReplaced: [{
+                type: Output
+            }] } });
+
+class JsonSchemaFormComponent {
+    schemaService;
+    resolver;
+    validation;
+    schema;
+    value;
+    data;
+    formReady = new EventEmitter();
+    valueChange = new EventEmitter();
+    schemaReady = new EventEmitter();
+    form;
+    rootControl;
+    resolvedSchema;
+    errorsMap = new Map();
+    loading = false;
+    valueSub;
+    constructor(schemaService, resolver, validation) {
+        this.schemaService = schemaService;
+        this.resolver = resolver;
+        this.validation = validation;
+    }
+    ngOnChanges(changes) {
+        if (changes['schema'] || changes['value'] || changes['data']) {
+            void this.buildForm();
+        }
+    }
+    ngOnDestroy() {
+        this.valueSub?.unsubscribe();
+    }
+    async buildForm() {
+        this.valueSub?.unsubscribe();
+        this.loading = true;
+        this.resolvedSchema = await this.resolver.resolve(this.schema, this.schema?.$id);
+        this.schemaReady.emit(this.resolvedSchema);
+        const initialData = this.value !== undefined ? this.value : this.data;
+        this.rootControl = this.schemaService.buildControl(this.resolvedSchema, initialData);
+        this.form = this.rootControl instanceof FormGroup ? this.rootControl : new FormGroup({ value: this.rootControl });
+        this.formReady.emit(this.form);
+        this.loading = false;
+        this.attachValueSub();
+    }
+    updateErrors() {
+        if (!this.resolvedSchema) {
+            this.errorsMap = new Map();
+            return;
+        }
+        const errors = this.validation.validate(this.resolvedSchema, this.rootControl.value);
+        const map = new Map();
+        for (const error of errors) {
+            const path = error.instancePath ?? '';
+            const messages = map.get(path) ?? [];
+            messages.push(error.message ?? error.keyword);
+            map.set(path, messages);
+        }
+        this.errorsMap = map;
+    }
+    onRootReplaced(control) {
+        this.rootControl = control;
+        if (control instanceof FormGroup) {
+            this.form = control;
+        }
+        else {
+            if (!(this.form instanceof FormGroup) || !this.form.contains('value')) {
+                this.form = new FormGroup({ value: control });
+            }
+            else {
+                this.form.setControl('value', control);
+            }
+        }
+        this.attachValueSub();
+    }
+    attachValueSub() {
+        this.valueSub?.unsubscribe();
+        this.updateErrors();
+        this.valueSub = this.form.valueChanges.subscribe(() => {
+            this.updateErrors();
+            this.valueChange.emit(this.rootControl.value);
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: JsonSchemaFormComponent, deps: [{ token: JsonSchemaFormService }, { token: JsonSchemaResolverService }, { token: JsonSchemaValidationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: JsonSchemaFormComponent, isStandalone: true, selector: "jsm-json-schema-form", inputs: { schema: "schema", value: "value", data: "data" }, outputs: { formReady: "formReady", valueChange: "valueChange", schemaReady: "schemaReady" }, usesOnChanges: true, ngImport: i0, template: `
+    <form class="w-full max-w-4xl mx-auto p-4 md:p-6 space-y-6">
+      <div class="space-y-1">
+        <h2 class="text-xl font-semibold text-slate-900">{{ resolvedSchema?.title || 'Generated Form' }}</h2>
+        <p *ngIf="resolvedSchema?.description" class="text-sm text-slate-500">
+          {{ resolvedSchema?.description }}
+        </p>
+      </div>
+
+      <div *ngIf="loading" class="text-sm text-slate-500">Resolving schema...</div>
+
+      <div *ngIf="form && resolvedSchema" class="space-y-6" [formGroup]="form">
+        <jsm-schema-node
+          [schema]="resolvedSchema"
+          [control]="rootControl"
+          [path]="''"
+          [errorsMap]="errorsMap"
+          label="Root"
+          (controlReplaced)="onRootReplaced($event)"
+        ></jsm-schema-node>
+      </div>
+    </form>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: JsonSchemaNodeComponent, selector: "jsm-schema-node", inputs: ["schema", "control", "label", "required", "path", "errorsMap", "parent", "controlKey"], outputs: ["controlReplaced"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: JsonSchemaFormComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'jsm-json-schema-form',
+                    standalone: true,
+                    imports: [CommonModule, ReactiveFormsModule, JsonSchemaNodeComponent],
+                    template: `
+    <form class="w-full max-w-4xl mx-auto p-4 md:p-6 space-y-6">
+      <div class="space-y-1">
+        <h2 class="text-xl font-semibold text-slate-900">{{ resolvedSchema?.title || 'Generated Form' }}</h2>
+        <p *ngIf="resolvedSchema?.description" class="text-sm text-slate-500">
+          {{ resolvedSchema?.description }}
+        </p>
+      </div>
+
+      <div *ngIf="loading" class="text-sm text-slate-500">Resolving schema...</div>
+
+      <div *ngIf="form && resolvedSchema" class="space-y-6" [formGroup]="form">
+        <jsm-schema-node
+          [schema]="resolvedSchema"
+          [control]="rootControl"
+          [path]="''"
+          [errorsMap]="errorsMap"
+          label="Root"
+          (controlReplaced)="onRootReplaced($event)"
+        ></jsm-schema-node>
+      </div>
+    </form>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: () => [{ type: JsonSchemaFormService }, { type: JsonSchemaResolverService }, { type: JsonSchemaValidationService }], propDecorators: { schema: [{
+                type: Input,
+                args: [{ required: true }]
+            }], value: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], formReady: [{
+                type: Output
+            }], valueChange: [{
+                type: Output
+            }], schemaReady: [{
+                type: Output
+            }] } });
+
+class JsonSchemaFormModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: JsonSchemaFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: JsonSchemaFormModule, imports: [JsonSchemaFormComponent, JsonSchemaNodeComponent], exports: [JsonSchemaFormComponent, JsonSchemaNodeComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: JsonSchemaFormModule, imports: [JsonSchemaFormComponent, JsonSchemaNodeComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: JsonSchemaFormModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [JsonSchemaFormComponent, JsonSchemaNodeComponent],
+                    exports: [JsonSchemaFormComponent, JsonSchemaNodeComponent],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { JsonSchemaFormComponent, JsonSchemaFormModule, JsonSchemaFormService, JsonSchemaNodeComponent, JsonSchemaResolverService, JsonSchemaValidationService };
+//# sourceMappingURL=elle96-ng-json-schema-manager.mjs.map