xt-components 0.4.7 → 0.5.0

package/fesm2022/xt-components.mjs

@@ -23,7 +23,7 @@ class XtBaseContext {
             else {
                 throw new Error("Cannot display a value that does not exist. Are you sure you're not using Reactive Form with this context? " + this.toString());
             }
-        });
+        }, ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
         this.displayMode = displayMode;
         this.parentFormGroup = parentGroup;
         this.parentContext = parentContext;
@@ -35,7 +35,7 @@ class XtBaseContext {
             if (this.nonFormValue == null) {
                 if ((this.childContexts != null) && (this.childContexts.size > 0))
                     throw new Error('An XtContext with no values cannot have children ', { cause: this });
-                this.nonFormValue = signal(newValue);
+                this.nonFormValue = signal(newValue, ...(ngDevMode ? [{ debugName: "nonFormValue" }] : []));
             }
             else {
                 this.nonFormValue.set(newValue);
@@ -234,8 +234,8 @@ class XtPluginRegistry {
         this.pluginRegistry = new Map();
         this.componentRegistry = new Map();
         this.componentByTypeCache = new Map();
-        this.listComponents = signal(new Array());
-        this.listPlugins = signal(new Array());
+        this.listComponents = signal(new Array(), ...(ngDevMode ? [{ debugName: "listComponents" }] : []));
+        this.listPlugins = signal(new Array(), ...(ngDevMode ? [{ debugName: "listPlugins" }] : []));
     }
     /**
      * The component can manage any standard javascript primitives types. That's usually the default whenever we don't know any particular type
@@ -411,10 +411,10 @@ class XtResolverService {
         this.baseTypeResolver = inject(XT_TYPE_RESOLVER_TOKEN, { optional: true });
         this.listComponents = computed(() => {
             return this.pluginRegistry.listComponents();
-        });
+        }, ...(ngDevMode ? [{ debugName: "listComponents" }] : []));
         this.listPlugins = computed(() => {
             return this.pluginRegistry.listPlugins();
-        });
+        }, ...(ngDevMode ? [{ debugName: "listPlugins" }] : []));
         if (this.baseTypeResolver == null) {
             this.typeResolver = xtTypeManager();
         }
@@ -444,6 +444,9 @@ class XtResolverService {
     listSubNamesOf(baseContext, value) {
         return this.typeResolver.listSubNames(baseContext.valueType, value);
     }
+    listSubNamesOfType(valueType, value) {
+        return this.typeResolver.listSubNames(valueType, value);
+    }
     registerPlugin(info) {
         this.pluginRegistry.registerPlugin(info);
         this.registerTypes(info.types, info.typeHandlers);
@@ -500,10 +503,10 @@ class XtResolverService {
             return module;
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: XtResolverService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: XtResolverService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: XtResolverService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: XtResolverService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: XtResolverService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: XtResolverService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -521,16 +524,16 @@ class XtBaseOutput {
 class XtRenderComponent {
     constructor() {
         this.resolverService = inject(XtResolverService);
-        this.componentType = input();
-        this.displayMode = input.required();
-        this.valueType = input();
+        this.componentType = input(...(ngDevMode ? [undefined, { debugName: "componentType" }] : []));
+        this.displayMode = input.required(...(ngDevMode ? [{ debugName: "displayMode" }] : []));
+        this.valueType = input(...(ngDevMode ? [undefined, { debugName: "valueType" }] : []));
         // Either we set the value directly
-        this.value = model();
+        this.value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
         // Or we are inside a Form
-        this.formGroup = input();
-        this.subName = input();
+        this.formGroup = input(...(ngDevMode ? [undefined, { debugName: "formGroup" }] : []));
+        this.subName = input(...(ngDevMode ? [undefined, { debugName: "subName" }] : []));
         this.outputsObject = new XtBaseOutput();
-        this.inputs = input();
+        this.inputs = input(...(ngDevMode ? [undefined, { debugName: "inputs" }] : []));
         this.outputs = output();
         this.outlet = viewChild.required(NgComponentOutlet);
         this.context = computed(() => {
@@ -548,7 +551,7 @@ class XtRenderComponent {
                 }
             }
             return ret;
-        });
+        }, ...(ngDevMode ? [{ debugName: "context" }] : []));
         this.type = computed(() => {
             //console.debug("Calculating type in XtRenderSubComponent");
             let type = this.componentType();
@@ -562,7 +565,7 @@ class XtRenderComponent {
                 type = compFound.componentClass;
             }
             return type ?? null;
-        });
+        }, ...(ngDevMode ? [{ debugName: "type" }] : []));
     }
     /**
      * Transfers the input and outputs from the host to the rendered component
@@ -586,10 +589,10 @@ class XtRenderComponent {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: XtRenderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.10", type: XtRenderComponent, isStandalone: true, selector: "xt-render", inputs: { componentType: { classPropertyName: "componentType", publicName: "componentType", isSignal: true, isRequired: false, transformFunction: null }, displayMode: { classPropertyName: "displayMode", publicName: "displayMode", isSignal: true, isRequired: true, transformFunction: null }, valueType: { classPropertyName: "valueType", publicName: "valueType", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: false, transformFunction: null }, subName: { classPropertyName: "subName", publicName: "subName", isSignal: true, isRequired: false, transformFunction: null }, inputs: { classPropertyName: "inputs", publicName: "inputs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", outputs: "outputs" }, viewQueries: [{ propertyName: "outlet", first: true, predicate: NgComponentOutlet, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container *ngComponentOutlet=\"type(); inputs: {context:context ()}\" />\n", styles: [""], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: ReactiveFormsModule }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: XtRenderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.2.3", type: XtRenderComponent, isStandalone: true, selector: "xt-render", inputs: { componentType: { classPropertyName: "componentType", publicName: "componentType", isSignal: true, isRequired: false, transformFunction: null }, displayMode: { classPropertyName: "displayMode", publicName: "displayMode", isSignal: true, isRequired: true, transformFunction: null }, valueType: { classPropertyName: "valueType", publicName: "valueType", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: false, transformFunction: null }, subName: { classPropertyName: "subName", publicName: "subName", isSignal: true, isRequired: false, transformFunction: null }, inputs: { classPropertyName: "inputs", publicName: "inputs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", outputs: "outputs" }, viewQueries: [{ propertyName: "outlet", first: true, predicate: NgComponentOutlet, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container *ngComponentOutlet=\"type(); inputs: {context:context ()}\" />\n", styles: [""], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: ReactiveFormsModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: XtRenderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: XtRenderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'xt-render', standalone: true, imports: [
                         NgComponentOutlet,
@@ -603,10 +606,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
  */
 class XtRenderSubComponent {
     constructor() {
-        this.context = input.required();
-        this.componentType = input();
+        this.context = input.required(...(ngDevMode ? [{ debugName: "context" }] : []));
+        this.componentType = input(...(ngDevMode ? [undefined, { debugName: "componentType" }] : []));
         this.outputsObject = new XtBaseOutput();
-        this.inputs = input();
+        this.inputs = input(...(ngDevMode ? [undefined, { debugName: "inputs" }] : []));
         this.outputs = output();
         this.outlet = viewChild.required(NgComponentOutlet);
         this.resolverService = inject(XtResolverService);
@@ -623,7 +626,7 @@ class XtRenderSubComponent {
                 type = compFound.componentClass;
             }
             return type ?? null;
-        });
+        }, ...(ngDevMode ? [{ debugName: "type" }] : []));
     }
     /**
      * Transfers the input and outputs from the host to the rendered component
@@ -647,10 +650,10 @@ class XtRenderSubComponent {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: XtRenderSubComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.10", type: XtRenderSubComponent, isStandalone: true, selector: "xt-render-sub", inputs: { context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: true, transformFunction: null }, componentType: { classPropertyName: "componentType", publicName: "componentType", isSignal: true, isRequired: false, transformFunction: null }, inputs: { classPropertyName: "inputs", publicName: "inputs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { outputs: "outputs" }, viewQueries: [{ propertyName: "outlet", first: true, predicate: NgComponentOutlet, descendants: true, isSignal: true }], ngImport: i0, template: "{{componentType()}}\n<ng-container *ngComponentOutlet=\"type(); inputs: {context:context ()}\" />\n", styles: [""], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: ReactiveFormsModule }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: XtRenderSubComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.2.3", type: XtRenderSubComponent, isStandalone: true, selector: "xt-render-sub", inputs: { context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: true, transformFunction: null }, componentType: { classPropertyName: "componentType", publicName: "componentType", isSignal: true, isRequired: false, transformFunction: null }, inputs: { classPropertyName: "inputs", publicName: "inputs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { outputs: "outputs" }, viewQueries: [{ propertyName: "outlet", first: true, predicate: NgComponentOutlet, descendants: true, isSignal: true }], ngImport: i0, template: "{{componentType()}}\n<ng-container *ngComponentOutlet=\"type(); inputs: {context:context ()}\" />\n", styles: [""], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: ReactiveFormsModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: XtRenderSubComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: XtRenderSubComponent, decorators: [{
             type: Component,
             args: [{ selector: 'xt-render-sub', standalone: true, imports: [
                         NgComponentOutlet,
@@ -667,58 +670,58 @@ class XtBaseInput {
  */
 class XtSimpleComponent {
     constructor() {
-        this.context = input.required();
+        this.context = input.required(...(ngDevMode ? [{ debugName: "context" }] : []));
         this.outputsObject = new XtBaseOutput();
         this.inputsObject = new XtBaseInput();
         this.outputs = output();
         this.isInForm = computed(() => {
             return this.context()?.isInForm() ?? false;
-        });
+        }, ...(ngDevMode ? [{ debugName: "isInForm" }] : []));
         this.formControlNameIfAny = computed(() => {
             return this.context()?.subName;
-        });
+        }, ...(ngDevMode ? [{ debugName: "formControlNameIfAny" }] : []));
         this.formGroupIfAny = computed(() => {
             return this.context()?.formGroup();
-        });
+        }, ...(ngDevMode ? [{ debugName: "formGroupIfAny" }] : []));
         this.formGroup = computed(() => {
             const ret = this.context()?.formGroup();
             if (ret == null)
                 throw new Error('No form groups in this component of type ' + this.componentDescriptor());
             return ret;
-        });
+        }, ...(ngDevMode ? [{ debugName: "formGroup" }] : []));
         /**
          * Returns the component form name, which is for now the subName
          */
         this.componentNameInForm = computed(() => {
             return this.safelyGetSubName();
-        });
+        }, ...(ngDevMode ? [{ debugName: "componentNameInForm" }] : []));
         this.safelyGetSubName = computed(() => {
             const ret = this.context()?.subName;
             if (ret == null)
                 throw new Error('This component has no name in the form ' + this.componentDescriptor());
             return ret;
-        });
+        }, ...(ngDevMode ? [{ debugName: "safelyGetSubName" }] : []));
         /**
          * Returns the form control name and create a form control behind the scene
          */
         this.formControlName = computed(() => {
             const ret = this.safelyGetSubName();
-            this.manageFormControl(ret); // Creates the form control
+            //this.manageFormControl<any>(ret); // Don't create anything at this point. It's a computed value.
             return ret;
-        });
+        }, ...(ngDevMode ? [{ debugName: "formControlName" }] : []));
         this.formControl = computed(() => {
             const subName = this.safelyGetSubName();
-            const formControl = this.manageFormControl(subName);
+            const formControl = this.manageFormControl(subName, false);
             if (formControl == null)
                 throw new Error("Calling formControl for subName " + subName + " when none exist.");
             return formControl;
-        });
+        }, ...(ngDevMode ? [{ debugName: "formControl" }] : []));
         this.getValue = computed(() => {
             return this.context().value();
-        });
+        }, ...(ngDevMode ? [{ debugName: "getValue" }] : []));
         this.displayValue = computed(() => {
             return this.context().displayValue();
-        });
+        }, ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
     }
     ngOnInit() {
         this.setupInputOutput();
@@ -727,7 +730,7 @@ class XtSimpleComponent {
             this.outputs.emit(this.outputsObject);
         }
     }
-    manageFormControl(ctrlName) {
+    manageFormControl(ctrlName, create = true) {
         const formGroup = this.formGroupIfAny();
         if (formGroup == null) {
             // You can call manageFormControl even in not a form, it just get ignored
@@ -736,11 +739,11 @@ class XtSimpleComponent {
         }
         else {
             let ctrl = formGroup.get(ctrlName);
-            if (ctrl == null) {
+            if ((create) && (ctrl == null)) {
                 ctrl = new FormControl(undefined);
                 formGroup.setControl(ctrlName, ctrl);
             }
-            return ctrl;
+            return ctrl ?? undefined;
         }
     }
     componentDescriptor() {
@@ -753,10 +756,10 @@ class XtSimpleComponent {
     setupInputOutput() {
         // Nothing to do here
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: XtSimpleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.10", type: XtSimpleComponent, isStandalone: true, selector: "ng-component", inputs: { context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { outputs: "outputs" }, ngImport: i0, template: '', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: XtSimpleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.3", type: XtSimpleComponent, isStandalone: true, selector: "ng-component", inputs: { context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { outputs: "outputs" }, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: XtSimpleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: XtSimpleComponent, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
@@ -785,7 +788,7 @@ class XtCompositeComponent extends XtSimpleComponent {
                 ret = context.localFormGroup;
             }
             return ret;
-        });
+        }, ...(ngDevMode ? [{ debugName: "formGroupIfAny" }] : []));
         /**
          * We need to create a new form group to manage the sub elements.
          */
@@ -794,7 +797,7 @@ class XtCompositeComponent extends XtSimpleComponent {
             if (ret == null)
                 throw new Error('No form groups in this component of type ' + this.componentDescriptor());
             return ret;
-        });
+        }, ...(ngDevMode ? [{ debugName: "formGroup" }] : []));
     }
     /**
      * Helper function to calculate the sub context
@@ -805,10 +808,10 @@ class XtCompositeComponent extends XtSimpleComponent {
         this.formGroupIfAny(); // Ensure the context is properly initialized
         return this.context().subContext(subName, subType, this.resolverService.typeResolver);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: XtCompositeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: XtCompositeComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: '', isInline: true, styles: [""] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: XtCompositeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.3", type: XtCompositeComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: '', isInline: true, styles: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: XtCompositeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: XtCompositeComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [], template: '' }]
         }] });
@@ -820,10 +823,10 @@ class MessageHandler {
     warningOccurred(warningMsg) {
         console.warn(warningMsg);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: MessageHandler, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: MessageHandler, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MessageHandler, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MessageHandler, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: MessageHandler, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MessageHandler, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -844,10 +847,33 @@ class StoreSupport {
     }
 }
 
-function updateFormGroupWithValue(formGroup, value) {
+function attachToFormGroup(formGroup, controlName, value, valueType, resolver) {
+    // If it's a single value, just create the control
+    if (((value != null) && (isPrimitive(value))
+        || (resolver?.isPrimitiveType(valueType)))) {
+        const simpleControl = new FormControl(value);
+        formGroup.addControl(controlName, simpleControl);
+    }
+    else {
+        const complexGroup = new FormGroup({});
+        updateFormGroupWithValue(complexGroup, value, valueType, resolver);
+        formGroup.addControl(controlName, complexGroup);
+    }
+}
+function updateFormGroupWithValue(formGroup, value, valueType, resolver) {
     const toDelete = new Set(Object.keys(formGroup.controls));
-    for (const valueKey in value) {
-        const primitive = isPrimitive(value[valueKey]);
+    // We merge the properties of the value if any, with the properties of the model
+    const keySet = new Set((value != null) ? Object.keys(value) : null);
+    if (((valueType != null) && (resolver != null))) {
+        const modelSubName = resolver.listSubNames(valueType, value);
+        for (const sub of modelSubName) {
+            keySet.add(sub);
+        }
+    }
+    for (const valueKey of keySet) {
+        const subValue = (value != null) ? value[valueKey] : null;
+        const subType = resolver?.findTypeName(valueType, valueKey, subValue) ?? undefined;
+        const primitive = (subType != null) ? resolver?.isPrimitiveType(subType, subValue) : isPrimitive(subValue);
         if (toDelete.delete(valueKey)) {
             // Already a control
             const oldControl = formGroup.get(valueKey);
@@ -859,7 +885,7 @@ function updateFormGroupWithValue(formGroup, value) {
                     oldControl.setValue(value[valueKey]);
                 }
                 else {
-                    formGroup.setControl(valueKey, new FormControl(value[valueKey]));
+                    formGroup.setControl(valueKey, new FormControl(subValue));
                 }
             }
             else {
@@ -867,22 +893,22 @@ function updateFormGroupWithValue(formGroup, value) {
                 if (oldControl.controls === undefined) {
                     const newFormGroup = new FormGroup({});
                     formGroup.setControl(valueKey, newFormGroup);
-                    updateFormGroupWithValue(newFormGroup, value[valueKey]);
+                    updateFormGroupWithValue(newFormGroup, subValue, subType, resolver);
                 }
                 else {
                     // It was already a formgroup, so just update it
-                    updateFormGroupWithValue(oldControl, value[valueKey]);
+                    updateFormGroupWithValue(oldControl, subValue, subType, resolver);
                 }
             }
         }
         else {
             if (primitive) {
-                formGroup.addControl(valueKey, new FormControl(value[valueKey]));
+                formGroup.addControl(valueKey, new FormControl(subValue));
             }
             else {
                 const newFormGroup = new FormGroup({});
                 formGroup.addControl(valueKey, newFormGroup);
-                updateFormGroupWithValue(newFormGroup, value[valueKey]);
+                updateFormGroupWithValue(newFormGroup, subValue, subType, resolver);
             }
         }
     }
@@ -901,14 +927,14 @@ class XtUnitTestHelper {
  */
 class HostTestSimpleComponent {
     constructor() {
-        this.type = input.required();
-        this.displayMode = input('FULL_VIEW');
-        this.value = input(undefined);
+        this.type = input.required(...(ngDevMode ? [{ debugName: "type" }] : []));
+        this.displayMode = input('FULL_VIEW', ...(ngDevMode ? [{ debugName: "displayMode" }] : []));
+        this.value = input(undefined, ...(ngDevMode ? [{ debugName: "value" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: HostTestSimpleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.10", type: HostTestSimpleComponent, isStandalone: true, selector: "test-host", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: true, transformFunction: null }, displayMode: { classPropertyName: "displayMode", publicName: "displayMode", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '<h1>Test Simple Component</h1> <xt-render [componentType]="type()" [displayMode]="displayMode()" [value]="value()" ></xt-render> ', isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: XtRenderComponent, selector: "xt-render", inputs: ["componentType", "displayMode", "valueType", "value", "formGroup", "subName", "inputs"], outputs: ["valueChange", "outputs"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: HostTestSimpleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.3", type: HostTestSimpleComponent, isStandalone: true, selector: "test-host", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: true, transformFunction: null }, displayMode: { classPropertyName: "displayMode", publicName: "displayMode", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '<h1>Test Simple Component</h1> <xt-render [componentType]="type()" [displayMode]="displayMode()" [value]="value()" ></xt-render> ', isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: XtRenderComponent, selector: "xt-render", inputs: ["componentType", "displayMode", "valueType", "value", "formGroup", "subName", "inputs"], outputs: ["valueChange", "outputs"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: HostTestSimpleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: HostTestSimpleComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'test-host',
@@ -925,12 +951,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
 class HostTestFormComponent {
     constructor() {
         this.builder = inject(FormBuilder);
-        this.type = input.required();
-        this.controlName = input.required();
+        this.type = input.required(...(ngDevMode ? [{ debugName: "type" }] : []));
+        this.controlName = input.required(...(ngDevMode ? [{ debugName: "controlName" }] : []));
         // You can send the description to be used in a FormBuilder to create the formgroup;
-        this.formDescription = input({});
+        this.formDescription = input({}, ...(ngDevMode ? [{ debugName: "formDescription" }] : []));
         // Or set the FormGroup directly
-        this.formGroup = input();
+        this.formGroup = input(...(ngDevMode ? [undefined, { debugName: "formGroup" }] : []));
         this.createdFormGroup = null;
     }
     computedFormGroup() {
@@ -954,10 +980,10 @@ class HostTestFormComponent {
         else
             throw new Error("FormGroup not yet created. Did you set formGroup or formDescription property ?");
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: HostTestFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.10", type: HostTestFormComponent, isStandalone: true, selector: "test-form-host", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: true, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: true, transformFunction: null }, formDescription: { classPropertyName: "formDescription", publicName: "formDescription", isSignal: true, isRequired: false, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '<h1>Test Form Component</h1> <form [formGroup]="computedFormGroup()"> <xt-render [componentType]="type()" displayMode="FULL_EDITABLE" [subName]="controlName()" [formGroup]="computedFormGroup()"></xt-render></form>', isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: XtRenderComponent, selector: "xt-render", inputs: ["componentType", "displayMode", "valueType", "value", "formGroup", "subName", "inputs"], outputs: ["valueChange", "outputs"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: HostTestFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.3", type: HostTestFormComponent, isStandalone: true, selector: "test-form-host", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: true, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: true, transformFunction: null }, formDescription: { classPropertyName: "formDescription", publicName: "formDescription", isSignal: true, isRequired: false, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '<h1>Test Form Component</h1> <form [formGroup]="computedFormGroup()"> <xt-render [componentType]="type()" displayMode="FULL_EDITABLE" [subName]="controlName()" [formGroup]="computedFormGroup()"></xt-render></form>', isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: XtRenderComponent, selector: "xt-render", inputs: ["componentType", "displayMode", "valueType", "value", "formGroup", "subName", "inputs"], outputs: ["valueChange", "outputs"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: HostTestFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: HostTestFormComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'test-form-host',
@@ -972,20 +998,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
  */
 class HostTestTypedComponent {
     constructor() {
-        this.displayMode = input('FULL_VIEW');
-        this.value = input();
-        this.valueType = input();
+        this.displayMode = input('FULL_VIEW', ...(ngDevMode ? [{ debugName: "displayMode" }] : []));
+        this.value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
+        this.valueType = input(...(ngDevMode ? [undefined, { debugName: "valueType" }] : []));
         this.context = computed(() => {
             const ret = new XtBaseContext(this.displayMode());
             ret.valueType = this.valueType();
             ret.setDisplayValue(this.value());
             return ret;
-        });
+        }, ...(ngDevMode ? [{ debugName: "context" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: HostTestTypedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.10", type: HostTestTypedComponent, isStandalone: true, selector: "test-typed-host", inputs: { displayMode: { classPropertyName: "displayMode", publicName: "displayMode", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, valueType: { classPropertyName: "valueType", publicName: "valueType", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '<h1>Test Typed Component</h1> <xt-render-sub [context]="context()" ></xt-render-sub> ', isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: XtRenderSubComponent, selector: "xt-render-sub", inputs: ["context", "componentType", "inputs"], outputs: ["outputs"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: HostTestTypedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.3", type: HostTestTypedComponent, isStandalone: true, selector: "test-typed-host", inputs: { displayMode: { classPropertyName: "displayMode", publicName: "displayMode", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, valueType: { classPropertyName: "valueType", publicName: "valueType", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '<h1>Test Typed Component</h1> <xt-render-sub [context]="context()" ></xt-render-sub> ', isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: XtRenderSubComponent, selector: "xt-render-sub", inputs: ["context", "componentType", "inputs"], outputs: ["outputs"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: HostTestTypedComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: HostTestTypedComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'test-typed-host',
@@ -1003,49 +1029,62 @@ class HostTestTypedFormComponent {
     constructor() {
         this.builder = inject(FormBuilder);
         this.resolver = inject(XtResolverService);
-        this.valueType = input();
-        this.controlName = input();
+        this.valueType = input(...(ngDevMode ? [undefined, { debugName: "valueType" }] : []));
+        this.controlName = input(...(ngDevMode ? [undefined, { debugName: "controlName" }] : []));
         // You can send the description to be used in a FormBuilder to create the formgroup;
-        this.formDescription = input({});
+        this.formDescription = input(null, ...(ngDevMode ? [{ debugName: "formDescription" }] : []));
         // Or set the FormGroup directly
-        this.formGroup = input();
+        this.formGroup = input(...(ngDevMode ? [undefined, { debugName: "formGroup" }] : []));
         this.parentFormGroup = this.builder.group({});
         this.createdFormGroup = null;
-        this.computedFormGroup = computed(() => {
-            if (this.createdFormGroup == null) {
-                const formGroup = this.formGroup();
+    }
+    static { this.CONTROL_NAME = 'ForTest'; }
+    ngOnInit() {
+        this.computeFormGroup();
+    }
+    computeFormGroup() {
+        if (this.createdFormGroup == null) {
+            const formGroup = this.formGroup();
+            if (this.formDescription() != null) {
                 this.createdFormGroup = formGroup ?? generateFormGroup(this.formDescription());
-                this.parentFormGroup.addControl(this.controlName() ?? HostTestTypedFormComponent.CONTROL_NAME, this.createdFormGroup);
-            }
-            return this.createdFormGroup;
-        });
-        this.subContext = computed(() => {
-            this.computedFormGroup(); // Make sure the subformgroups are created
-            const ctrlName = this.controlName();
-            let ret = null;
-            if (ctrlName == null) {
-                ret = new XtBaseContext('FULL_EDITABLE', HostTestTypedFormComponent.CONTROL_NAME, this.parentFormGroup);
             }
             else {
-                ret = new XtBaseContext('FULL_EDITABLE', ctrlName, this.createdFormGroup);
+                this.createdFormGroup = this.builder.group({});
+                if (this.valueType() != null) {
+                    updateFormGroupWithValue(this.createdFormGroup, {}, this.valueType(), this.resolver.typeResolver);
+                }
             }
-            ret.valueType = this.valueType();
-            return ret;
-        });
+            this.parentFormGroup.addControl(this.controlName() ?? HostTestTypedFormComponent.CONTROL_NAME, this.createdFormGroup);
+        }
+        return this.createdFormGroup;
     }
-    static { this.CONTROL_NAME = 'ForTest'; }
+    ;
+    subContext() {
+        this.computeFormGroup(); // Make sure the subformgroups are created
+        const ctrlName = this.controlName();
+        let ret = null;
+        if (ctrlName == null) {
+            ret = new XtBaseContext('FULL_EDITABLE', HostTestTypedFormComponent.CONTROL_NAME, this.parentFormGroup);
+        }
+        else {
+            ret = new XtBaseContext('FULL_EDITABLE', ctrlName, this.createdFormGroup);
+        }
+        ret.valueType = this.valueType();
+        return ret;
+    }
+    ;
     patchValue(controlName, newVal) {
         const patch = {};
         patch[controlName] = newVal;
-        this.computedFormGroup().patchValue(patch);
+        this.computeFormGroup().patchValue(patch);
     }
     retrieveValue(controlName) {
-        return this.computedFormGroup().value[controlName];
+        return this.computeFormGroup().value[controlName];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: HostTestTypedFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.10", type: HostTestTypedFormComponent, isStandalone: true, selector: "test-typed-form-host", inputs: { valueType: { classPropertyName: "valueType", publicName: "valueType", isSignal: true, isRequired: false, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: false, transformFunction: null }, formDescription: { classPropertyName: "formDescription", publicName: "formDescription", isSignal: true, isRequired: false, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '<h1>Test Typed Form Component</h1> <form [formGroup]="parentFormGroup"> <xt-render-sub [context]="subContext()"></xt-render-sub></form>', isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: XtRenderSubComponent, selector: "xt-render-sub", inputs: ["context", "componentType", "inputs"], outputs: ["outputs"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: HostTestTypedFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.3", type: HostTestTypedFormComponent, isStandalone: true, selector: "test-typed-form-host", inputs: { valueType: { classPropertyName: "valueType", publicName: "valueType", isSignal: true, isRequired: false, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: false, transformFunction: null }, formDescription: { classPropertyName: "formDescription", publicName: "formDescription", isSignal: true, isRequired: false, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '<h1>Test Typed Form Component</h1> <form [formGroup]="parentFormGroup"> <xt-render-sub [context]="subContext()"></xt-render-sub></form>', isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: XtRenderSubComponent, selector: "xt-render-sub", inputs: ["context", "componentType", "inputs"], outputs: ["outputs"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: HostTestTypedFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: HostTestTypedFormComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'test-typed-form-host',
@@ -1177,5 +1216,5 @@ class TestDocumentInfo {
  * Generated bundle index. Do not edit.
  */
 
-export { HostTestFormComponent, HostTestSimpleComponent, HostTestTypedComponent, HostTestTypedFormComponent, MessageHandler, StoreSupport, StoreTestHelper, TestDocumentInfo, TestStoreManager, TestStoreProvider, XT_REGISTRY_TOKEN, XT_RESOLVER_TOKEN, XT_TYPE_RESOLVER_TOKEN, XtBaseContext, XtCompositeComponent, XtPluginRegistry, XtRenderComponent, XtRenderSubComponent, XtResolvedComponent, XtResolverService, XtSimpleComponent, XtUnitTestHelper, initXtPluginRegistry, updateFormGroupWithValue, xtPluginRegistry };
+export { HostTestFormComponent, HostTestSimpleComponent, HostTestTypedComponent, HostTestTypedFormComponent, MessageHandler, StoreSupport, StoreTestHelper, TestDocumentInfo, TestStoreManager, TestStoreProvider, XT_REGISTRY_TOKEN, XT_RESOLVER_TOKEN, XT_TYPE_RESOLVER_TOKEN, XtBaseContext, XtCompositeComponent, XtPluginRegistry, XtRenderComponent, XtRenderSubComponent, XtResolvedComponent, XtResolverService, XtSimpleComponent, XtUnitTestHelper, attachToFormGroup, initXtPluginRegistry, updateFormGroupWithValue, xtPluginRegistry };
 //# sourceMappingURL=xt-components.mjs.map