xt-components 0.5.5 → 0.6.0

package/fesm2022/xt-components.mjs

@@ -1,11 +1,189 @@
+import { isTypeReference, XtBaseTypeReference, xtTypeManager, ManagedDataHandler, isPrimitive } from 'xt-type';
 import * as i0 from '@angular/core';
 import { signal, computed, InjectionToken, inject, Injectable, input, model, output, viewChild, Component } from '@angular/core';
-import { xtTypeManager, ManagedDataHandler, isPrimitive } from 'xt-type';
 import { loadRemoteModule } from '@angular-architects/native-federation';
+import { from, firstValueFrom } from 'rxjs';
 import { NgComponentOutlet, CommonModule } from '@angular/common';
 import * as i1 from '@angular/forms';
 import { ReactiveFormsModule, FormControl, FormGroup, FormBuilder, FormArray } from '@angular/forms';
-import { from } from 'rxjs';
+
+class XtPluginRegistry {
+    constructor() {
+        this.pluginRegistry = new Map();
+        this.componentRegistry = new Map();
+        this.componentByTypeCache = new Map();
+        this.actionByTypeRegistry = new Map();
+        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
+     * string
+     * number
+     * bigint
+     * boolean
+     * undefined
+     * null
+     * symbol is not managed
+     * Date, while an object and not a primitive, is managed
+     */
+    static { this.ANY_PRIMITIVE_TYPE = "ANY_PRIMITIVE_TYPE"; }
+    /**
+     * The components can manage any composite javascript type. Default when no type has been defined and it's a user defined javascript object (not a data type)
+     */
+    static { this.ANY_OBJECT_TYPE = "ANY_OBJECT_TYPE"; }
+    static { this.ANY_PRIMITIVE_SET = "ANY_PRIMITIVE_SET"; }
+    static { this.ANY_OBJECT_SET = "ANY_OBJECT_SET"; }
+    /**
+     * Whenever a component can handle any type of reference to a single entity or to multiple entities.
+     */
+    static { this.ANY_SINGLE_REFERENCE = "ANY_SINGLE_REFERENCE"; }
+    static { this.ANY_MULTIPLE_REFERENCE = "ANY_MULTIPLE_REFERENCE"; }
+    registerPlugin(info) {
+        this.pluginRegistry.set(info.name, info);
+        if (info.components != null) {
+            let updated = false;
+            for (const comp of info.components) {
+                updated = true;
+                this.registerComponent(comp);
+            }
+            if (updated)
+                this.componentByTypeCache.clear(); // Force recalculation of type
+        }
+        if (info.actionHandlers != null) {
+            for (const handler of info.actionHandlers) {
+                this.registerActionHandler(handler);
+            }
+        }
+        this.listPlugins.update((array) => {
+            let found = false;
+            for (let i = 0; i < array.length; i++) {
+                if (array[i].name == info.name) {
+                    found = true;
+                    array[i] = info;
+                }
+            }
+            if (!found)
+                array.push(info);
+            return [...array]; // You have to send another value, not just update the existing one.
+        });
+    }
+    registerComponent(info) {
+        this.componentRegistry.set(info.componentName, info);
+        this.listComponents.update((array) => {
+            let found = false;
+            for (let i = 0; i < array.length; i++) {
+                if (array[i].componentName == info.componentName) {
+                    found = true;
+                    array[i] = info;
+                }
+            }
+            if (!found)
+                array.push(info);
+            return array;
+        });
+    }
+    findComponentsForType(valueType, value) {
+        let originalType = valueType;
+        //console.debug('Finding type from '+valueType+' with value ',value);
+        // We don't know the value type, let's try to guess if it's a primitive or object based on the value
+        if (valueType == null) {
+            valueType = XtPluginRegistry.ANY_OBJECT_TYPE;
+            if ((value == null) || (typeof value != 'object')) {
+                valueType = XtPluginRegistry.ANY_PRIMITIVE_TYPE;
+            }
+            else if (value instanceof Date) {
+                valueType = XtPluginRegistry.ANY_PRIMITIVE_TYPE;
+            }
+            if (Array.isArray(value)) {
+                valueType = (valueType === XtPluginRegistry.ANY_PRIMITIVE_TYPE) ? XtPluginRegistry.ANY_PRIMITIVE_SET : XtPluginRegistry.ANY_OBJECT_SET;
+            }
+        }
+        else { // originalType has been defined.
+            if (Array.isArray(value)) {
+                valueType = valueType.endsWith('[]') ? valueType : valueType + '[]';
+                originalType = valueType;
+            }
+        }
+        //console.debug('Type found is '+valueType);
+        let ret = this.componentByTypeCache.get(valueType);
+        if (ret == null) {
+            ret = new Array();
+            for (const comp of this.componentRegistry) {
+                const info = comp[1];
+                if (info.typesHandled.includes(valueType)) {
+                    ret.push(info);
+                }
+            }
+            if ((ret.length == 0) && (originalType != null)) {
+                // Couldn't find a specific component, let's try the generic ones, so we don't pass any type
+                ret = this.findComponentsForType(null, value);
+                // Cache the component only if we were able to assert its type.
+                // If no type has been given and value is null, then we cannot assess the real type
+                if (value != null) {
+                    this.componentByTypeCache.set(originalType, ret);
+                }
+            }
+            else {
+                // Cache the component only if we were able to assert its type.
+                // If no type has been given and value is null, then we cannot assess the real type
+                if ((value != null) || (originalType != null)) {
+                    this.componentByTypeCache.set(originalType ?? valueType, ret);
+                }
+            }
+        }
+        return ret;
+    }
+    static registry() {
+        return XT_REGISTRY;
+    }
+    findComponentInfo(type) {
+        // Search for the component registered with this class
+        for (const info of this.componentRegistry.values()) {
+            if (info.componentClass == type) {
+                return info;
+            }
+        }
+        return null;
+    }
+    getComponentInfo(type) {
+        const ret = this.findComponentInfo(type);
+        if (ret == null) {
+            throw new Error("No component found with class " + type);
+        }
+        return ret;
+    }
+    registerActionHandler(handlerInfo) {
+        for (const type of handlerInfo.types) {
+            const handlers = handlerInfo.actions;
+            for (const actionName of Object.keys(handlers)) {
+                let exist = this.actionByTypeRegistry.get(type);
+                if (exist == null) {
+                    exist = new Map();
+                    this.actionByTypeRegistry.set(type, exist);
+                }
+                exist.set(actionName, handlers[actionName]);
+            }
+        }
+    }
+    findActionInfo(type, actionName) {
+        const handlers = this.actionByTypeRegistry.get(type);
+        if (handlers != null) {
+            return handlers.get(actionName);
+        }
+        return undefined;
+    }
+    listActionInfos(type) {
+        const handlers = this.actionByTypeRegistry.get(type);
+        if (handlers != null) {
+            return Array.from(handlers.entries()).map(([name, info]) => {
+                return { name: name, info: info };
+            });
+        }
+        else
+            return [];
+    }
+}
 
 class XtBaseContext {
     /**
@@ -17,6 +195,11 @@ class XtBaseContext {
      */
     constructor(displayMode, subName, parentGroup, parentContext) {
         this.displayMode = 'FULL_VIEW';
+        /**
+         * If it's a reference, we keep the context referenced
+         *
+        referencedContext?:XtContext<any>;*/
+        //subReferencesResolved = signal(false);
         /**
          * Keeps track of all the possible actions for this context
          * @protected
@@ -168,11 +351,18 @@ class XtBaseContext {
         if (!Array.isArray(this.value())) {
             throw new Error("The value must be an Array / Set to create a subElement context.");
         }
-        const ret = new XtBaseContext(this.displayMode, undefined, undefined, this);
-        ret.setDisplayValue(value[elementIndex]);
-        if (this.valueType != null) {
-            // Convert potential array type into single type
-            ret.valueType = this.valueType.endsWith('[]') ? this.valueType.substring(0, this.valueType.length - 2) : this.valueType;
+        const indexKey = elementIndex.toString();
+        let ret = this.childContexts?.get(indexKey);
+        if (ret == null) {
+            ret = new XtBaseContext(this.displayMode, undefined, undefined, this);
+            ret.setDisplayValue(value[elementIndex]);
+            if (this.valueType != null) {
+                // Convert potential array type into single type
+                ret.valueType = this.valueType.endsWith('[]') ? this.valueType.substring(0, this.valueType.length - 2) : this.valueType;
+            }
+            if (this.childContexts == null)
+                this.childContexts = new Map();
+            this.childContexts?.set(indexKey, ret);
         }
         return ret;
     }
@@ -205,7 +395,25 @@ class XtBaseContext {
                 ret.valueType = subType;
             }
             else if ((this.valueType != null) && (typeResolver != null)) {
-                ret.valueType = typeResolver.findTypeName(this.valueType, subName, this.value()) ?? undefined;
+                const subType = typeResolver.findType(this.valueType, subName, this.value());
+                if (subType != null) {
+                    if (isTypeReference(subType)) {
+                        if (subType.type == XtBaseTypeReference.UNRESOLVED_TYPE)
+                            throw new Error("You must resolve all reference types before using them in a context. Missing type " + subType.type + " for subName " + subName + " in valueType " + this.valueType + " of context " + this.toString());
+                        ret.valueType = subType.toType;
+                        ret.reference = subType;
+                        if (this.displayMode == 'LIST_VIEW')
+                            ret.displayMode = 'INLINE_VIEW'; // We display a reference as inline in a list
+                        else if (this.displayMode == 'FULL_EDITABLE') {
+                            // We don't edit directly references, we simply enable selection of them.
+                            ret.valueType = (subType.referenceType == 'ONE-TO-MANY') ? XtPluginRegistry.ANY_MULTIPLE_REFERENCE : XtPluginRegistry.ANY_SINGLE_REFERENCE;
+                        }
+                    }
+                    else {
+                        ret.valueType = subType.type;
+                    }
+                }
+                //ret.valueType=typeResolver.findTypeName(this.valueType, subName, this.value())??undefined;
             }
             if (this.childContexts == null)
                 this.childContexts = new Map();
@@ -216,6 +424,28 @@ class XtBaseContext {
     formGroup() {
         return this.localFormGroup ?? this.parentFormGroup;
     }
+    isReference() {
+        return (this.reference != null);
+    }
+    setReferenceInfo(reference) {
+        this.reference = reference;
+        //this.subReferencesResolved.set(this.reference!=null);
+    }
+    /**
+     * creates the referencedContext by using this referenced value
+     * @param val
+     *
+    updateReferencedContext(val: any, valueType?:string): void {
+      if (!this.isReference()) throw new Error ('This context '+this.toString()+' is not a reference.');
+  
+      if( this.referencedContext==null) {
+        let refDisplayMode = 'INLINE_VIEW' as XtDisplayMode;
+        if (this.displayMode=='FULL_VIEW') refDisplayMode = 'FULL_VIEW';
+        this.referencedContext = new XtBaseContext(refDisplayMode);
+      }
+      this.referencedContext.setDisplayValue(val);
+      if( valueType!=null) this.referencedContext.valueType=valueType;
+    }*/
     toString() {
         let ret = 'XtContext named ';
         ret += this.subName ?? 'None';
@@ -223,6 +453,10 @@ class XtBaseContext {
         ret += this.valueType ?? 'None';
         ret += ' with value ';
         ret += this.nonFormValue ? this.nonFormValue() : this.formControlValue();
+        if (this.isReference()) {
+            ret += ' referencing ';
+            ret += this.reference?.type;
+        }
         return ret;
     }
 }
@@ -242,225 +476,221 @@ class XtResolvedComponent {
     }
 }
 
-class XtPluginRegistry {
-    constructor() {
-        this.pluginRegistry = new Map();
-        this.componentRegistry = new Map();
-        this.componentByTypeCache = new Map();
-        this.actionByTypeRegistry = new Map();
-        this.listComponents = signal(new Array(), ...(ngDevMode ? [{ debugName: "listComponents" }] : []));
-        this.listPlugins = signal(new Array(), ...(ngDevMode ? [{ debugName: "listPlugins" }] : []));
+/**
+ * The global plugin registry.
+ * Plugins will register to this when loaded.
+ */
+function initXtPluginRegistry() {
+    if (globalThis.XT_REGISTRY == null) {
+        globalThis.XT_REGISTRY = new XtPluginRegistry();
     }
-    /**
-     * The component can manage any standard javascript primitives types. That's usually the default whenever we don't know any particular type
-     * string
-     * number
-     * bigint
-     * boolean
-     * undefined
-     * null
-     * symbol is not managed
-     * Date, while an object and not a primitive, is managed
-     */
-    static { this.ANY_PRIMITIVE_TYPE = "ANY_PRIMITIVE_TYPE"; }
-    /**
-     * The components can manage any composite javascript type. Default when no type has been defined and it's a user defined javascript object (not a data type)
-     */
-    static { this.ANY_OBJECT_TYPE = "ANY_OBJECT_TYPE"; }
-    static { this.ANY_PRIMITIVE_SET = "ANY_PRIMITIVE_SET"; }
-    static { this.ANY_OBJECT_SET = "ANY_OBJECT_SET"; }
-    registerPlugin(info) {
-        this.pluginRegistry.set(info.name, info);
-        if (info.components != null) {
-            let updated = false;
-            for (const comp of info.components) {
-                updated = true;
-                this.registerComponent(comp);
-            }
-            if (updated)
-                this.componentByTypeCache.clear(); // Force recalculation of type
-        }
-        if (info.actionHandlers != null) {
-            for (const handler of info.actionHandlers) {
-                this.registerActionHandler(handler);
-            }
-        }
-        this.listPlugins.update((array) => {
-            let found = false;
-            for (let i = 0; i < array.length; i++) {
-                if (array[i].name == info.name) {
-                    found = true;
-                    array[i] = info;
-                }
-            }
-            if (!found)
-                array.push(info);
-            return [...array]; // You have to send another value, not just update the existing one.
-        });
+}
+function xtPluginRegistry() {
+    if (globalThis.XT_REGISTRY == null) {
+        initXtPluginRegistry();
     }
-    registerComponent(info) {
-        this.componentRegistry.set(info.componentName, info);
-        this.listComponents.update((array) => {
-            let found = false;
-            for (let i = 0; i < array.length; i++) {
-                if (array[i].componentName == info.componentName) {
-                    found = true;
-                    array[i] = info;
-                }
-            }
-            if (!found)
-                array.push(info);
-            return array;
-        });
+    return globalThis.XT_REGISTRY;
+}
+
+const XT_RESOLVER_TOKEN = new InjectionToken('Enable providing a custom component resolver.');
+const XT_TYPE_RESOLVER_TOKEN = new InjectionToken('Enable providing a custom type resolver.');
+const XT_REGISTRY_TOKEN = new InjectionToken("Injects the Plugin Registry right into your angular component", {
+    factory: () => {
+        return xtPluginRegistry();
     }
-    findComponentsForType(valueType, value) {
-        let originalType = valueType;
-        //console.debug('Finding type from '+valueType+' with value ',value);
-        // We don't know the value type, let's try to guess if it's a primitive or object based on the value
-        if (valueType == null) {
-            valueType = XtPluginRegistry.ANY_OBJECT_TYPE;
-            if ((value == null) || (typeof value != 'object')) {
-                valueType = XtPluginRegistry.ANY_PRIMITIVE_TYPE;
-            }
-            else if (value instanceof Date) {
-                valueType = XtPluginRegistry.ANY_PRIMITIVE_TYPE;
+});
+
+class XtRegistryResolver {
+    constructor(registry, typeResolver) {
+        this.registry = registry;
+        this.typeResolver = typeResolver;
+    }
+    resolve(baseContext, subName) {
+        let typeToFind = baseContext.valueType;
+        const typeInfo = this.typeResolver.findType(baseContext.valueType, subName);
+        // If it's a type reference, we find the component of the referenced type
+        if (isTypeReference(typeInfo)) {
+            if (baseContext.displayMode == 'FULL_EDITABLE') {
+                typeToFind = XtPluginRegistry.ANY_SINGLE_REFERENCE;
             }
-            if (Array.isArray(value)) {
-                valueType = (valueType === XtPluginRegistry.ANY_PRIMITIVE_TYPE) ? XtPluginRegistry.ANY_PRIMITIVE_SET : XtPluginRegistry.ANY_OBJECT_SET;
+            else {
+                typeToFind = typeInfo.toType;
             }
         }
-        else { // originalType has been defined.
-            if (Array.isArray(value)) {
-                valueType = valueType.endsWith('[]') ? valueType : valueType + '[]';
-                originalType = valueType;
-            }
+        const ret = this.registry.findComponentsForType(typeToFind, baseContext.subValue(subName));
+        if (ret != null && ret.length > 0) {
+            return XtResolvedComponent.from(ret[0]);
         }
-        //console.debug('Type found is '+valueType);
-        let ret = this.componentByTypeCache.get(valueType);
+        return null;
+    }
+}
+
+class XtAction {
+    constructor(name, info, enabled) {
+        this.enabled = signal(false, ...(ngDevMode ? [{ debugName: "enabled" }] : []));
+        this.name = name;
+        this.info = info;
+        if (enabled != null) {
+            this.enabled.set(enabled);
+        }
+    }
+}
+
+/**
+ * A very light and not 100% compatible storemanager in case you are not using xt-store.
+ * It can emulate XtStoreManager to some extends for doing some tests
+ */
+class StoreTestHelper {
+    static ensureTestProviderOnly() {
+        StoreSupport.setTestStoreManager(new TestStoreManager());
+    }
+}
+class TestStoreManager {
+    constructor() {
+        this.defaultProvider = new TestStoreProvider();
+    }
+    getProvider(name) {
+        return this.defaultProvider;
+    }
+    getProviderSafe(name) {
+        return this.defaultProvider;
+    }
+    getDefaultProvider() {
+        return this.defaultProvider;
+    }
+    getDefaultProviderSafe() {
+        return this.defaultProvider;
+    }
+    newStoreCriteria(name, value, operator) {
+        return new TestStoreCriteria(name, value, operator);
+    }
+}
+class TestStoreProvider {
+    constructor() {
+        this.data = new Map();
+    }
+    getOrCreateArray(name) {
+        let ret = this.data.get(name);
         if (ret == null) {
-            ret = new Array();
-            for (const comp of this.componentRegistry) {
-                const info = comp[1];
-                if (info.typesHandled.includes(valueType)) {
-                    ret.push(info);
-                }
-            }
-            if ((ret.length == 0) && (originalType != null)) {
-                // Couldn't find a specific component, let's try the generic ones, so we don't pass any type
-                ret = this.findComponentsForType(null, value);
-                // Cache the component only if we were able to assert its type.
-                // If no type has been given and value is null, then we cannot assess the real type
-                if (value != null) {
-                    this.componentByTypeCache.set(originalType, ret);
-                }
-            }
-            else {
-                // Cache the component only if we were able to assert its type.
-                // If no type has been given and value is null, then we cannot assess the real type
-                if ((value != null) || (originalType != null)) {
-                    this.componentByTypeCache.set(originalType ?? valueType, ret);
-                }
-            }
+            ret = new Map();
+            this.data.set(name, ret);
         }
         return ret;
     }
-    static registry() {
-        return XT_REGISTRY;
-    }
-    findComponentInfo(type) {
-        // Search for the component registered with this class
-        for (const info of this.componentRegistry.values()) {
-            if (info.componentClass == type) {
-                return info;
+    extractKey(value, create) {
+        if (value._id != null)
+            return value._id; // ManagedData key
+        else if (value.id != null)
+            return value.id;
+        else {
+            if (create === true) {
+                const newId = Math.random().toString(36).substring(2, 8);
+                value._id = newId;
+                return newId;
             }
+            return value.toString();
         }
-        return null;
     }
-    getComponentInfo(type) {
-        const ret = this.findComponentInfo(type);
+    storeEntity(name, entity) {
+        this.getOrCreateArray(name).set(this.extractKey(entity, true), entity);
+        return Promise.resolve(entity);
+    }
+    safeLoadEntity(name, key) {
+        const ret = this.getOrCreateArray(name).get(key);
         if (ret == null) {
-            throw new Error("No component found with class " + type);
+            throw new Error("No entity named " + name + " with key " + key);
         }
-        return ret;
+        return Promise.resolve(ret);
     }
-    registerActionHandler(handlerInfo) {
-        for (const type of handlerInfo.types) {
-            const handlers = handlerInfo.actions;
-            for (const actionName of Object.keys(handlers)) {
-                let exist = this.actionByTypeRegistry.get(type);
-                if (exist == null) {
-                    exist = new Map();
-                    this.actionByTypeRegistry.set(type, exist);
+    loadEntity(name, key) {
+        return Promise.resolve(this.getOrCreateArray(name).get(key));
+    }
+    deleteEntity(name, key) {
+        return Promise.resolve(this.getOrCreateArray(name).delete(key));
+    }
+    searchEntities(name, ...criteria) {
+        // No criteria defined, just send the full list
+        const ret = new Array();
+        if ((criteria == null) || (criteria.length == 0)) {
+            for (const toAdd of this.getOrCreateArray(name).values()) {
+                ret.push(toAdd);
+            }
+        }
+        else {
+            for (const toAdd of this.getOrCreateArray(name).values()) {
+                let canAdd = true;
+                for (const criter of criteria) {
+                    if (!criter.filter(toAdd)) {
+                        canAdd = false;
+                        break;
+                    }
                 }
-                exist.set(actionName, handlers[actionName]);
+                if (canAdd)
+                    ret.push(toAdd);
             }
         }
+        return from([ret]);
     }
-    findActionInfo(type, actionName) {
-        const handlers = this.actionByTypeRegistry.get(type);
-        if (handlers != null) {
-            return handlers.get(actionName);
-        }
-        return undefined;
+    searchAndPrepareEntities(name, sort, groupBy, transformer, ...criteria) {
+        throw new Error('Method not implemented.');
     }
-    listActionInfos(type) {
-        const handlers = this.actionByTypeRegistry.get(type);
-        if (handlers != null) {
-            return Array.from(handlers.entries()).map(([name, info]) => {
-                return { name: name, info: info };
-            });
-        }
-        else
-            return [];
+    canStoreDocument() {
+        return true;
     }
-}
-
-/**
- * The global plugin registry.
- * Plugins will register to this when loaded.
- */
-function initXtPluginRegistry() {
-    if (globalThis.XT_REGISTRY == null) {
-        globalThis.XT_REGISTRY = new XtPluginRegistry();
+    storeDocument(toStore) {
+        const ret = new TestDocumentInfo(toStore.name, true, URL.createObjectURL(toStore));
+        return Promise.resolve(ret);
     }
-}
-function xtPluginRegistry() {
-    if (globalThis.XT_REGISTRY == null) {
-        initXtPluginRegistry();
+    storeDocuments(toStore) {
+        throw new Error('Method not implemented.');
     }
-    return globalThis.XT_REGISTRY;
 }
-
-const XT_RESOLVER_TOKEN = new InjectionToken('Enable providing a custom component resolver.');
-const XT_TYPE_RESOLVER_TOKEN = new InjectionToken('Enable providing a custom type resolver.');
-const XT_REGISTRY_TOKEN = new InjectionToken("Injects the Plugin Registry right into your angular component", {
-    factory: () => {
-        return xtPluginRegistry();
+class TestDocumentInfo {
+    constructor(documentName, isUrl, documentId) {
+        this.documentId = documentId;
+        this.documentName = documentName;
+        this.isUrl = isUrl;
     }
-});
-
-class XtRegistryResolver {
-    constructor(registry, typeResolver) {
-        this.registry = registry;
-        this.typeResolver = typeResolver;
+}
+class TestStoreCriteria {
+    constructor(name, value, operator) {
+        this.name = name;
+        this.value = value;
+        if (!operator)
+            this.operator = '=';
+        else {
+            this.operator = operator;
+        }
     }
-    resolve(baseContext, subName) {
-        const ret = this.registry.findComponentsForType(this.typeResolver.findTypeName(baseContext.valueType, subName), baseContext.subValue(subName));
-        if (ret != null && ret.length > 0) {
-            return XtResolvedComponent.from(ret[0]);
+    filter(toFilter) {
+        const testValue = toFilter[this.name];
+        switch (this.operator) {
+            case '=':
+                return testValue == this.value;
+            case '<':
+                return testValue < this.value;
+            case '<=':
+                return testValue < this.value;
+            default:
+                return true;
         }
-        return null;
     }
 }
 
-class XtAction {
-    constructor(name, info, enabled) {
-        this.enabled = signal(false, ...(ngDevMode ? [{ debugName: "enabled" }] : []));
-        this.name = name;
-        this.info = info;
-        if (enabled != null) {
-            this.enabled.set(enabled);
-        }
+class StoreSupport {
+    static isStoreManagerAvailable() {
+        if (this.testStoreManager != null)
+            return true;
+        return (globalThis.xtStoreManager != undefined);
+    }
+    static getStoreManager() {
+        return this.testStoreManager ?? (globalThis.xtStoreManager());
+    }
+    static setTestStoreManager(testStoreManager) {
+        StoreSupport.testStoreManager = testStoreManager;
+    }
+    static newStoreCriteria(name, value, operator) {
+        return new TestStoreCriteria(name, value, operator);
     }
 }
 
@@ -501,7 +731,13 @@ class XtResolverService {
         return ret;
     }
     findTypeHandlerOf(baseContext, subName, value) {
-        const ret = this.typeResolver.findTypeHandler(baseContext.valueType, false, subName, value);
+        let ret = { typeName: undefined, handler: undefined };
+        if (baseContext.isReference()) {
+            ret = this.typeResolver.findTypeHandler(baseContext.reference.toType, false, undefined, value);
+        }
+        else {
+            ret = this.typeResolver.findTypeHandler(baseContext.valueType, false, subName, value);
+        }
         return ret;
     }
     listSubNamesOf(baseContext, value) {
@@ -657,6 +893,41 @@ class XtResolverService {
         }
         return undefined;
     }
+    async resolveReferencedValue(context, storeMgr) {
+        if (!context.isReference())
+            return undefined;
+        const ref = context.reference;
+        const storeProvider = storeMgr.getProvider(ref.type);
+        if (storeProvider == null) {
+            throw new Error('No Store provider found for type ' + ref.type);
+        }
+        const ret = await firstValueFrom(storeProvider.searchEntities(ref.toType, storeMgr.newStoreCriteria(ref.field, context.value(), '=')));
+        if (ret.length == 0)
+            return null;
+        if (ref.referenceType == 'MANY-TO-ONE') {
+            if (ret.length > 1)
+                throw new Error('Multiple values for many to one relation between ' + context.valueType + ' and ' + ref.type + ' with value ' + context.value());
+            return ret[0];
+        }
+        else if (ref.referenceType == 'ONE-TO-MANY') {
+            return ret;
+        }
+        return undefined;
+    }
+    resolvePendingReferences() {
+        this.typeResolver.resolveAllTypeReferences();
+    }
+    /**
+     * Calculates the values that can be referenced by the reference & value of this context
+     * @param context
+     */
+    findPossibleReferences(context) {
+        if (!context.isReference())
+            throw new Error('Cannot find possible references of this non reference context' + context.toString());
+        const reference = context.reference;
+        const store = StoreSupport.getStoreManager().getProviderSafe(reference.toType);
+        return store.searchEntities(reference.toType);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: XtResolverService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: XtResolverService, providedIn: 'root' }); }
 }
@@ -694,6 +965,10 @@ class XtRenderComponent {
             let form = this.formGroup();
             const ret = new XtBaseContext(this.displayMode(), this.subName(), form);
             ret.valueType = this.valueType();
+            const typeInfo = this.resolverService.typeResolver.findType(ret.valueType);
+            if (isTypeReference(typeInfo)) {
+                ret.setReferenceInfo(typeInfo);
+            }
             if (!ret.isInForm()) {
                 const subName = this.subName();
                 const value = this.value();
@@ -706,6 +981,13 @@ class XtRenderComponent {
             }
             return ret;
         }, ...(ngDevMode ? [{ debugName: "context" }] : []));
+        this.realContext = computed(() => {
+            let ret = this.context();
+            /*if ((ret.isReference())&& (ret.referencedContext!=null)) {
+              ret = ret.referencedContext;
+            }*/
+            return ret;
+        }, ...(ngDevMode ? [{ debugName: "realContext" }] : []));
         this.type = computed(() => {
             //console.debug("Calculating type in XtRenderSubComponent");
             let type = this.componentType();
@@ -714,7 +996,7 @@ class XtRenderComponent {
                 //console.debug('XtRender, using component set '+ type);
                 //compFound = this.resolverService.findComponentInfo (type);
                 //} else {
-                compFound = this.resolverService.findBestComponent(this.context());
+                compFound = this.resolverService.findBestComponent(this.realContext());
                 //console.debug('XtRender, found component ',compFound.componentName);
                 type = compFound.componentClass;
             }
@@ -767,6 +1049,13 @@ class XtRenderSubComponent {
         this.outputs = output();
         this.outlet = viewChild.required(NgComponentOutlet);
         this.resolverService = inject(XtResolverService);
+        this.realContext = computed(() => {
+            let ret = this.context();
+            /*if ((ret.isReference()) && (ret.referencedContext!=null)) {
+              ret = ret.referencedContext;
+            }*/
+            return ret;
+        }, ...(ngDevMode ? [{ debugName: "realContext" }] : []));
         this.type = computed(() => {
             //console.debug("Calculating type in XtRenderSubComponent");
             let type = this.componentType();
@@ -775,7 +1064,7 @@ class XtRenderSubComponent {
                 //console.debug('XtRender, using component set '+ type);
                 //compFound = this.resolverService.findComponentInfo (type);
                 //} else {
-                compFound = this.resolverService.findBestComponent(this.context());
+                compFound = this.resolverService.findBestComponent(this.realContext());
                 //console.debug('XtRender, found component ',compFound.componentName);
                 type = compFound.componentClass;
             }
@@ -805,14 +1094,14 @@ class XtRenderSubComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: XtRenderSubComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.9", 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 }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.9", 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:realContext ()}\" />\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: "20.3.9", ngImport: i0, type: XtRenderSubComponent, decorators: [{
             type: Component,
             args: [{ selector: 'xt-render-sub', standalone: true, imports: [
                         NgComponentOutlet,
                         ReactiveFormsModule
-                    ], template: "{{componentType()}}\n<ng-container *ngComponentOutlet=\"type(); inputs: {context:context ()}\" />\n" }]
+                    ], template: "{{componentType()}}\n<ng-container *ngComponentOutlet=\"type(); inputs: {context:realContext ()}\" />\n" }]
         }], propDecorators: { context: [{ type: i0.Input, args: [{ isSignal: true, alias: "context", required: true }] }], componentType: [{ type: i0.Input, args: [{ isSignal: true, alias: "componentType", required: false }] }], inputs: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputs", required: false }] }], outputs: [{ type: i0.Output, args: ["outputs"] }], outlet: [{ type: i0.ViewChild, args: [i0.forwardRef(() => NgComponentOutlet), { isSignal: true }] }] } });
 
 class XtBaseInput {
@@ -987,20 +1276,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                 }]
         }] });
 
-class StoreSupport {
-    static isStoreManagerAvailable() {
-        if (this.testStoreManager != null)
-            return true;
-        return (globalThis.xtStoreManager != undefined);
-    }
-    static getStoreManager() {
-        return this.testStoreManager ?? (globalThis.xtStoreManager());
-    }
-    static setTestStoreManager(testStoreManager) {
-        StoreSupport.testStoreManager = testStoreManager;
-    }
-}
-
 function attachToFormGroup(formGroup, controlName, value, valueType, resolver) {
     // If it's a single value, just create the control
     if (((value != null) && (isPrimitive(value))
@@ -1026,13 +1301,14 @@ function updateFormGroupWithValue(formGroup, value, valueType, resolver) {
     }
     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);
+        const subType = resolver?.findType(valueType, valueKey, subValue) ?? undefined;
+        const subTypeName = isTypeReference(subType) ? subType.toType : subType?.type;
+        const primitive = resolver?.isPrimitiveType(subType, subValue);
         if (toDelete.delete(valueKey)) {
             // Already a control
             const oldControl = formGroup.get(valueKey);
             // Is it the right type ?
-            if (primitive) {
+            if ((primitive) || (isTypeReference(subType))) {
                 // Must be an FormControl2
                 if (oldControl.controls === undefined) {
                     // It's ok, just set the value
@@ -1047,22 +1323,22 @@ function updateFormGroupWithValue(formGroup, value, valueType, resolver) {
                 if (oldControl.controls === undefined) {
                     const newFormGroup = new FormGroup({});
                     formGroup.setControl(valueKey, newFormGroup);
-                    updateFormGroupWithValue(newFormGroup, subValue, subType, resolver);
+                    updateFormGroupWithValue(newFormGroup, subValue, subTypeName, resolver);
                 }
                 else {
                     // It was already a formgroup, so just update it
-                    updateFormGroupWithValue(oldControl, subValue, subType, resolver);
+                    updateFormGroupWithValue(oldControl, subValue, subTypeName, resolver);
                 }
             }
         }
         else {
-            if (primitive) {
+            if ((primitive) || (isTypeReference(subType))) {
                 formGroup.addControl(valueKey, new FormControl(subValue));
             }
             else {
                 const newFormGroup = new FormGroup({});
                 formGroup.addControl(valueKey, newFormGroup);
-                updateFormGroupWithValue(newFormGroup, subValue, subType, resolver);
+                updateFormGroupWithValue(newFormGroup, subValue, subTypeName, resolver);
             }
         }
     }
@@ -1111,6 +1387,7 @@ class HostTestFormComponent {
         this.formDescription = input({}, ...(ngDevMode ? [{ debugName: "formDescription" }] : []));
         // Or set the FormGroup directly
         this.formGroup = input(...(ngDevMode ? [undefined, { debugName: "formGroup" }] : []));
+        //  parentFormGroup = this.builder.group<{[keys:string]: AbstractControl}>({});
         this.createdFormGroup = null;
     }
     computedFormGroup() {
@@ -1118,6 +1395,7 @@ class HostTestFormComponent {
             const formGroup = this.formGroup();
             this.createdFormGroup = formGroup ?? generateFormGroup(this.formDescription());
         }
+        //  this.parentFormGroup.addControl(this.controlName()??HostTestTypedFormComponent.CONTROL_NAME, this.createdFormGroup);
         return this.createdFormGroup;
     }
     patchValue(newVal) {
@@ -1274,108 +1552,6 @@ function generateFormControl(formDescription) {
     return new FormControl(formDescription);
 }
 
-/**
- * A very light and not 100% compatible storemanager in case you are not using xt-store.
- * It can emulate XtStoreManager to some extends for doing some tests
- */
-class StoreTestHelper {
-    static ensureTestProviderOnly() {
-        StoreSupport.setTestStoreManager(new TestStoreManager());
-    }
-}
-class TestStoreManager {
-    constructor() {
-        this.defaultProvider = new TestStoreProvider();
-    }
-    getProvider(name) {
-        return this.defaultProvider;
-    }
-    getProviderSafe(name) {
-        return this.defaultProvider;
-    }
-    getDefaultProvider() {
-        return this.defaultProvider;
-    }
-    getDefaultProviderSafe() {
-        return this.defaultProvider;
-    }
-}
-class TestStoreProvider {
-    constructor() {
-        this.data = new Map();
-    }
-    getOrCreateArray(name) {
-        let ret = this.data.get(name);
-        if (ret == null) {
-            ret = new Map();
-            this.data.set(name, ret);
-        }
-        return ret;
-    }
-    extractKey(value, create) {
-        if (value._id != null)
-            return value._id; // ManagedData key
-        else if (value.id != null)
-            return value.id;
-        else {
-            if (create === true) {
-                const newId = new Date().getTime().toString();
-                value._id = newId;
-                return newId;
-            }
-            return value.toString();
-        }
-    }
-    storeEntity(name, entity) {
-        this.getOrCreateArray(name).set(this.extractKey(entity, true), entity);
-        return Promise.resolve(entity);
-    }
-    safeLoadEntity(name, key) {
-        const ret = this.getOrCreateArray(name).get(key);
-        if (ret == null) {
-            throw new Error("No entity named " + name + " with key " + key);
-        }
-        return Promise.resolve(ret);
-    }
-    loadEntity(name, key) {
-        return Promise.resolve(this.getOrCreateArray(name).get(key));
-    }
-    deleteEntity(name, key) {
-        return Promise.resolve(this.getOrCreateArray(name).delete(key));
-    }
-    searchEntities(name, ...criteria) {
-        if ((criteria != null) && (criteria.length > 0)) {
-            throw new Error('Method not implemented.');
-        }
-        // No criteria defined, just send the full list
-        const ret = new Array();
-        for (const toAdd of this.getOrCreateArray(name).values()) {
-            ret.push(toAdd);
-        }
-        return from([ret]);
-    }
-    searchAndPrepareEntities(name, sort, groupBy, transformer, ...criteria) {
-        throw new Error('Method not implemented.');
-    }
-    canStoreDocument() {
-        return true;
-    }
-    storeDocument(toStore) {
-        const ret = new TestDocumentInfo(toStore.name, true, URL.createObjectURL(toStore));
-        return Promise.resolve(ret);
-    }
-    storeDocuments(toStore) {
-        throw new Error('Method not implemented.');
-    }
-}
-class TestDocumentInfo {
-    constructor(documentName, isUrl, documentId) {
-        this.documentId = documentId;
-        this.documentName = documentName;
-        this.isUrl = isUrl;
-    }
-}
-
 /*
  * Public API Surface of xt-components
  */
@@ -1384,5 +1560,5 @@ class TestDocumentInfo {
  * Generated bundle index. Do not edit.
  */
 
-export { HostTestFormComponent, HostTestSimpleComponent, HostTestTypedComponent, HostTestTypedFormComponent, StoreSupport, StoreTestHelper, TestDocumentInfo, TestStoreManager, TestStoreProvider, XT_REGISTRY_TOKEN, XT_RESOLVER_TOKEN, XT_TYPE_RESOLVER_TOKEN, XtBaseContext, XtCompositeComponent, XtMessageHandler, XtPluginRegistry, XtRenderComponent, XtRenderSubComponent, XtResolvedComponent, XtResolverService, XtSimpleComponent, XtUnitTestHelper, attachToFormGroup, initXtPluginRegistry, updateFormGroupWithValue, xtPluginRegistry };
+export { HostTestFormComponent, HostTestSimpleComponent, HostTestTypedComponent, HostTestTypedFormComponent, StoreSupport, StoreTestHelper, TestDocumentInfo, TestStoreCriteria, TestStoreManager, TestStoreProvider, XT_REGISTRY_TOKEN, XT_RESOLVER_TOKEN, XT_TYPE_RESOLVER_TOKEN, XtBaseContext, XtCompositeComponent, XtMessageHandler, XtPluginRegistry, XtRenderComponent, XtRenderSubComponent, XtResolvedComponent, XtResolverService, XtSimpleComponent, XtUnitTestHelper, attachToFormGroup, initXtPluginRegistry, updateFormGroupWithValue, xtPluginRegistry };
 //# sourceMappingURL=xt-components.mjs.map