xt-components 0.4.0

package/fesm2022/xt-components.mjs

@@ -0,0 +1,1053 @@
+import * as i0 from '@angular/core';
+import { computed, signal, InjectionToken, inject, Injectable, input, model, output, viewChild, Component } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { FormControl, FormGroup, ReactiveFormsModule, FormBuilder, FormArray } from '@angular/forms';
+import { NgComponentOutlet, CommonModule } from '@angular/common';
+
+class XtBaseContext {
+    /**
+     *
+     * @param displayMode
+     * @param readOnly
+     * @param parentGroup
+     * @param controlName
+     */
+    constructor(displayMode, subName, parentGroup, parentContext) {
+        this.displayMode = 'FULL_VIEW';
+        this.displayValue = computed(() => {
+            if (this.nonFormValue !== undefined) {
+                return this.nonFormValue();
+            }
+            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());
+            }
+        });
+        this.displayMode = displayMode;
+        this.parentFormGroup = parentGroup;
+        this.parentContext = parentContext;
+        this.subName = subName;
+    }
+    setDisplayValue(newValue, type, updateParent = true) {
+        if (newValue !== undefined) {
+            const oldValue = this.nonFormValue ? this.nonFormValue() : null;
+            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);
+            }
+            else {
+                this.nonFormValue.set(newValue);
+            }
+            // Change the children values if needed
+            if (this.childContexts != null) {
+                if (newValue == null) {
+                    for (const [subName, child] of this.childContexts) {
+                        child.setDisplayValue(null, undefined, false);
+                    }
+                }
+                else if (oldValue != null) {
+                    for (const [subName, child] of this.childContexts) {
+                        if (newValue[subName] != oldValue[subName]) {
+                            // The value has changed, let's update
+                            child.setDisplayValue(newValue[subName], undefined, false);
+                        }
+                    }
+                }
+            }
+            if ((updateParent) && (this.subName != null))
+                this.parentContext?.updateSubDisplayValue(this.subName, newValue);
+        }
+        if (type !== undefined)
+            this.valueType = type;
+        return this;
+    }
+    isInForm() {
+        return ((this.subName != null) && (this.formGroup() != null));
+    }
+    formControlNameOrNull() {
+        return this.subName ?? null;
+    }
+    value() {
+        if (this.nonFormValue != null)
+            return this.nonFormValue() ?? this.formControlValue();
+        else
+            return this.formControlValue();
+    }
+    subValue(subsubName) {
+        const value = this.nonFormValue ? this.nonFormValue() : this.formControlValue();
+        if ((subsubName != null) && (value != null)) {
+            return value[subsubName];
+        }
+        else {
+            return value;
+        }
+    }
+    /**
+     * Enable child contexts to update its own value in the parent context whenever it's value changes
+     */
+    updateSubDisplayValue(subName, subValue) {
+        if (this.nonFormValue != null) {
+            let newValue = this.nonFormValue();
+            if (newValue == null) {
+                const newValue = {};
+                newValue[subName] = subValue;
+                this.nonFormValue.set(newValue);
+            }
+            else {
+                newValue[subName] = subValue; // Discretly update the subValue without triggering parent signal
+            }
+        }
+        else {
+            throw new Error("No nonFormValue to update subDisplayValue" + this.toString());
+        }
+    }
+    formControlValue() {
+        let ret = undefined;
+        if (this.isInForm()) {
+            if (this.subName != null) {
+                //console.debug ("formControlValue parentGroup value is ", this.parentFormGroup?.value);
+                ret = this.parentFormGroup?.value[this.subName];
+            }
+            else {
+                ret = this.parentFormGroup?.value;
+            }
+        }
+        else {
+            ret = undefined;
+        }
+        //console.debug("formControlValue of "+this.subName+ " is ",ret);
+        return ret;
+    }
+    /**
+     * Returns the context associated with a specific element in a set.
+     * Value must be an array.
+     * @param elementIndex
+     */
+    elementSetContext(elementIndex) {
+        const value = this.value();
+        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;
+        }
+        return ret;
+    }
+    subContext(subName, subType, typeResolver) {
+        if ((subName == null) || (subName.length == 0)) {
+            return this;
+        }
+        else if (this.childContexts?.has(subName)) {
+            return this.childContexts?.get(subName);
+        }
+        else {
+            let subValue = null;
+            let parentGroup = this.formGroup();
+            // Recalculate parentGroup and formControlName and value if needed.
+            if (parentGroup == null) {
+                let curValue = this.nonFormValue;
+                if (curValue != null) {
+                    if (curValue() != null) {
+                        subValue = signal(curValue()[subName]);
+                    }
+                }
+                if (subValue == null) {
+                    subValue = signal(null);
+                }
+            }
+            const ret = new XtBaseContext(this.displayMode, subName, parentGroup, this);
+            if (subValue != null)
+                ret.nonFormValue = subValue;
+            if (subType != null) {
+                ret.valueType = subType;
+            }
+            else if ((this.valueType != null) && (typeResolver != null)) {
+                ret.valueType = typeResolver.findType(this, subName, this.value()) ?? undefined;
+            }
+            if (this.childContexts == null)
+                this.childContexts = new Map();
+            this.childContexts.set(subName, ret);
+            return ret;
+        }
+    }
+    formGroup() {
+        return this.localFormGroup ?? this.parentFormGroup;
+    }
+    toString() {
+        let ret = 'XtContext named ';
+        ret += this.subName ?? 'None';
+        ret += ' with type ';
+        ret += this.valueType ?? 'None';
+        ret += ' with value ';
+        ret += this.nonFormValue ? this.nonFormValue() : this.formControlValue();
+        return ret;
+    }
+}
+
+class XtResolvedComponent {
+    constructor(componantName, componentClass, outputs = false) {
+        this.componentName = componantName;
+        this.componentClass = componentClass;
+        this.outputs = outputs;
+    }
+    static from(info) {
+        const ret = new XtResolvedComponent(info.componentName, info.componentClass);
+        if ((info.outputs != null) && (info.outputs.length > 0)) {
+            ret.outputs = true;
+        }
+        return ret;
+    }
+}
+
+class XtPluginRegistry {
+    constructor() {
+        this.pluginRegistry = new Map();
+        this.componentRegistry = new Map();
+        this.componentByTypeCache = new Map();
+        this.listComponents = signal(new Array());
+    }
+    /**
+     * 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
+        }
+    }
+    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;
+    }
+}
+const XT_REGISTRY = new XtPluginRegistry();
+
+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 XT_REGISTRY;
+    }
+});
+
+class XtRegistryResolver {
+    constructor(registry, typeResolver) {
+        this.registry = registry;
+        this.typeResolver = typeResolver;
+    }
+    resolve(baseContext, subName) {
+        const ret = this.registry.findComponentsForType(this.typeResolver.findType(baseContext, subName), baseContext.subValue(subName));
+        if (ret != null && ret.length > 0) {
+            return XtResolvedComponent.from(ret[0]);
+        }
+        return null;
+    }
+}
+
+class XtTypeHierarchyResolver {
+    constructor() {
+        this.types = new Map();
+    }
+    addType(typeName, type) {
+        this.types.set(typeName, fromDescription(type));
+    }
+    canUpdate() {
+        return true;
+    }
+    findType(typeInfo, subName, value) {
+        if (typeInfo == null)
+            return typeInfo;
+        if (typeInfo.valueType == null)
+            return typeInfo.valueType;
+        if (subName == null) {
+            return typeInfo.valueType;
+        }
+        else {
+            const selectedType = this.types.get(typeInfo.valueType);
+            if ((selectedType != null) && (selectedType.children != null)) {
+                const type = selectedType.children[subName].type;
+                if (type == null) {
+                    throw new Error('SubType named ' + subName + ' of ' + typeInfo.valueType + ' doesn\'t have a type name.');
+                }
+                else {
+                    return type;
+                }
+            }
+        }
+        return undefined;
+    }
+    listSubNames(context, value) {
+        let ret = [];
+        if ((context != null) && (context.valueType != null)) {
+            const typeInfo = this.types.get(context.valueType);
+            if (typeInfo?.children != null) {
+                ret = Object.keys(typeInfo.children);
+            }
+        }
+        if (ret.length == 0) {
+            // We will use the value to extract properties
+            if (value != null) {
+                if (Array.isArray(value)) {
+                    if (value.length > 0) {
+                        const setOfKeys = new Set();
+                        for (const element of value) {
+                            const elementKeys = Object.keys(element);
+                            for (const key of elementKeys) {
+                                setOfKeys.add(key);
+                            }
+                        }
+                        ret = Array.from(setOfKeys.values());
+                    }
+                }
+                else {
+                    ret = Object.keys(value);
+                }
+            }
+        }
+        return ret;
+    }
+}
+class XtBaseTypeHierarchy {
+    constructor(type, parent) {
+        this.type = type;
+        this.parent = parent;
+    }
+    addChild(key, child) {
+        if (this.children == null)
+            this.children = {};
+        this.children[key] = child;
+    }
+}
+function fromDescription(typeHierarchy, name, parent) {
+    let ret = null;
+    if (typeof typeHierarchy == 'string') {
+        ret = new XtBaseTypeHierarchy(typeHierarchy, parent);
+    }
+    else {
+        ret = new XtBaseTypeHierarchy(undefined, parent);
+        for (const key of Object.keys(typeHierarchy)) {
+            const value = typeHierarchy[key];
+            fromDescription(value, key, ret);
+        }
+    }
+    if ((parent != null) && (name != null))
+        parent.addChild(name, ret);
+    else if ((parent != null) && (name == null)) {
+        throw new Error("Cannot add type to parent without a name.");
+    }
+    return ret;
+}
+function updateFormGroupWithValue(formGroup, value) {
+    const toDelete = new Set(Object.keys(formGroup.controls));
+    for (const valueKey in value) {
+        const primitive = isPrimitive(value[valueKey]);
+        if (toDelete.delete(valueKey)) {
+            // Already a control
+            const oldControl = formGroup.get(valueKey);
+            // Is it the right type ?
+            if (primitive) {
+                // Must be an FormControl2
+                if (oldControl.controls === undefined) {
+                    // It's ok, just set the value
+                    oldControl.setValue(value[valueKey]);
+                }
+                else {
+                    formGroup.setControl(valueKey, new FormControl(value[valueKey]));
+                }
+            }
+            else {
+                // Must be a FormGroup
+                if (oldControl.controls === undefined) {
+                    const newFormGroup = new FormGroup({});
+                    formGroup.setControl(valueKey, newFormGroup);
+                    updateFormGroupWithValue(newFormGroup, value[valueKey]);
+                }
+                else {
+                    // It was already a formgroup, so just update it
+                    updateFormGroupWithValue(oldControl, value[valueKey]);
+                }
+            }
+        }
+        else {
+            if (primitive) {
+                formGroup.addControl(valueKey, new FormControl(value[valueKey]));
+            }
+            else {
+                const newFormGroup = new FormGroup({});
+                formGroup.addControl(valueKey, newFormGroup);
+                updateFormGroupWithValue(newFormGroup, value[valueKey]);
+            }
+        }
+    }
+    // Delete controls that are no more used
+    for (const delName of toDelete) {
+        formGroup.removeControl(delName);
+    }
+}
+function isPrimitive(valueElement) {
+    if (typeof valueElement == 'object') {
+        if (valueElement == null)
+            return true;
+        else {
+            return valueElement instanceof Date;
+        }
+    }
+    else
+        return true;
+}
+
+class XtResolverService {
+    constructor() {
+        this.pluginRegistry = inject(XT_REGISTRY_TOKEN);
+        this.baseResolver = inject(XT_RESOLVER_TOKEN, { optional: true });
+        this.baseTypeResolver = inject(XT_TYPE_RESOLVER_TOKEN, { optional: true });
+        this.listComponents = computed(() => {
+            return this.pluginRegistry.listComponents();
+        });
+        if (this.baseTypeResolver == null) {
+            this.typeResolver = new XtTypeHierarchyResolver();
+        }
+        else
+            this.typeResolver = this.baseTypeResolver;
+        if (this.baseResolver == null) {
+            this.resolver = new XtRegistryResolver(this.pluginRegistry, this.typeResolver);
+        }
+        else
+            this.resolver = this.baseResolver;
+    }
+    findBestComponent(baseContext, subName) {
+        const ret = this.resolver.resolve(baseContext, subName);
+        if (ret != null)
+            return ret;
+        else
+            throw new Error("No components found for this context " + baseContext.toString());
+    }
+    findTypeOf(baseContext, subName, value) {
+        const ret = this.typeResolver.findType(baseContext, subName, value);
+        return ret;
+    }
+    listSubNamesOf(baseContext, value) {
+        return this.typeResolver.listSubNames(baseContext, value);
+    }
+    registerPlugin(info) {
+        this.pluginRegistry.registerPlugin(info);
+        this.registerTypes(info.types);
+    }
+    registerTypes(types) {
+        if ((types != null) && (this.typeResolver.canUpdate())) {
+            for (const newType in types) {
+                this.typeResolver.addType(newType, types[newType]);
+            }
+        }
+    }
+    getComponentInfo(type) {
+        return XtResolvedComponent.from(this.pluginRegistry.getComponentInfo(type));
+    }
+    findComponentInfo(type) {
+        const ret = this.pluginRegistry.findComponentInfo(type);
+        if (ret == null)
+            return null;
+        else
+            return XtResolvedComponent.from(ret);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: XtResolverService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: XtResolverService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: XtResolverService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Offers a nice and easy to dynamically embed a component.
+ * You set the type, the display mode, and either the value or the formgroup & subName to use.
+ * XtRender will then instantiate the component, bind it to the value or form, and display it.
+ */
+class XtRenderComponent {
+    constructor() {
+        this.resolverService = inject(XtResolverService);
+        this.componentType = input();
+        this.displayMode = input.required();
+        this.valueType = input();
+        // Either we set the value directly
+        this.value = model();
+        // Or we are inside a Form
+        this.formGroup = input();
+        this.subName = input();
+        this.outputs = output();
+        this.hasOutputs = false;
+        this.outlet = viewChild.required(NgComponentOutlet);
+        this.context = computed(() => {
+            let form = this.formGroup();
+            const ret = new XtBaseContext(this.displayMode(), this.subName(), form);
+            ret.valueType = this.valueType();
+            if (!ret.isInForm()) {
+                const subName = this.subName();
+                const value = this.value();
+                if ((subName == null) || (value == null)) {
+                    ret.setDisplayValue(value);
+                }
+                else {
+                    ret.setDisplayValue(value[subName]);
+                }
+            }
+            return ret;
+        });
+        this.type = computed(() => {
+            //console.debug("Calculating type in XtRenderSubComponent");
+            let type = this.componentType();
+            let compFound = null;
+            if (type == null) {
+                //console.debug('XtRender, using component set '+ type);
+                //compFound = this.resolverService.findComponentInfo (type);
+                //} else {
+                compFound = this.resolverService.findBestComponent(this.context());
+                //console.debug('XtRender, found component ',compFound.componentName);
+                type = compFound.componentClass;
+            }
+            return type ?? null;
+        });
+    }
+    ngAfterViewInit() {
+        const instance = this.outlet().componentInstance;
+        if ((instance != null) && (instance.hasOutputs) && (instance.outputs != null)) {
+            instance.outputs.subscribe((out) => this.outputs.emit(out));
+            this.hasOutputs = true;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: XtRenderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.4", 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 } }, 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 }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: XtRenderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'xt-render', standalone: true, imports: [
+                        NgComponentOutlet,
+                        ReactiveFormsModule
+                    ], template: "<ng-container *ngComponentOutlet=\"type(); inputs: {context:context ()}\" />\n" }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Dynamically render a component that will display the given subValue.
+ * To be used only inside an XtSimpleComponent or XtCompositeComponent
+ */
+class XtRenderSubComponent {
+    constructor() {
+        this.context = input.required();
+        this.componentType = input();
+        this.outputs = output();
+        this.hasOutputs = false;
+        this.outlet = viewChild.required(NgComponentOutlet);
+        this.resolverService = inject(XtResolverService);
+        this.type = computed(() => {
+            //console.debug("Calculating type in XtRenderSubComponent");
+            let type = this.componentType();
+            let compFound = null;
+            if (type == null) {
+                //console.debug('XtRender, using component set '+ type);
+                //compFound = this.resolverService.findComponentInfo (type);
+                //} else {
+                compFound = this.resolverService.findBestComponent(this.context());
+                //console.debug('XtRender, found component ',compFound.componentName);
+                type = compFound.componentClass;
+            }
+            return type ?? null;
+        });
+    }
+    ngAfterViewInit() {
+        const instance = this.outlet().componentInstance;
+        if ((instance != null) && (instance.hasOutputs) && (instance.outputs != null)) {
+            instance.outputs.subscribe((out) => this.outputs.emit(out));
+            this.hasOutputs = true;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: XtRenderSubComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.4", 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 } }, 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 }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", 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" }]
+        }] });
+
+class XtBaseOutput {
+    setNewOutput(name, value) {
+        let ret = false;
+        if (this[name] == null) {
+            this[name] = signal(value);
+            ret = true;
+        }
+        else {
+            this[name].set(value);
+        }
+        return ret;
+    }
+}
+
+/**
+ * An XtSimpleComponent just displays the given value or element in a form.
+ * If you need to dynamically embed other XtComponents to display sub elements, then please use the XtCompositeComponent
+ */
+class XtSimpleComponent {
+    constructor() {
+        this.context = input.required();
+        this.outputs = output();
+        /**
+         * Does the component provides Output or not ?
+         * @protected
+         */
+        this.hasOutputs = false;
+        this.isInForm = computed(() => {
+            return this.context()?.isInForm() ?? false;
+        });
+        this.formControlNameIfAny = computed(() => {
+            return this.context()?.subName;
+        });
+        this.formGroupIfAny = computed(() => {
+            return this.context()?.formGroup();
+        });
+        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;
+        });
+        /**
+         * Returns the component form name, which is for now the subName
+         */
+        this.componentNameInForm = computed(() => {
+            return this.safelyGetSubName();
+        });
+        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;
+        });
+        /**
+         * 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
+            return ret;
+        });
+        this.formControl = computed(() => {
+            const subName = this.safelyGetSubName();
+            const formControl = this.manageFormControl(subName);
+            if (formControl == null)
+                throw new Error("Calling formControl for subName " + subName + " when none exist.");
+            return formControl;
+        });
+        this.getValue = computed(() => {
+            return this.context().value();
+        });
+        this.displayValue = computed(() => {
+            return this.context().displayValue();
+        });
+        if (this.hasOutputs) {
+            if (this.outputElement == null) {
+                this.outputElement = new XtBaseOutput();
+            }
+        }
+    }
+    manageFormControl(ctrlName) {
+        const formGroup = this.formGroupIfAny();
+        if (formGroup == null) {
+            // You can call manageFormControl even in not a form, it just get ignored
+            //console.debug('FormGroup is undefined when declaring managedcontrol '+ctrlName);
+            return undefined;
+        }
+        else {
+            let ctrl = formGroup.get(ctrlName);
+            if (ctrl == null) {
+                ctrl = new FormControl(undefined);
+                formGroup.setControl(ctrlName, ctrl);
+            }
+            return ctrl;
+        }
+    }
+    componentDescriptor() {
+        return "Component with type " + this.constructor.name + " with context " + this.context().toString();
+    }
+    emitOutput(outputName, newValue) {
+        if (!this.hasOutputs) {
+            throw new Error("Component without outputs cannot emit output");
+        }
+        let newOutput = false;
+        if (this.outputElement == null) {
+            this.outputElement = new XtBaseOutput();
+            newOutput = true;
+        }
+        newOutput = this.outputElement.setNewOutput(outputName, newValue) || newOutput;
+        if (newOutput) {
+            this.outputs?.emit(this.outputElement);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: XtSimpleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.4", 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.4", ngImport: i0, type: XtSimpleComponent, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    imports: [],
+                    template: ''
+                }]
+        }], ctorParameters: () => [] });
+
+class XtCompositeComponent extends XtSimpleComponent {
+    constructor() {
+        super(...arguments);
+        this.resolverService = inject(XtResolverService);
+        this.formGroupIfAny = computed(() => {
+            const context = this.context();
+            if (context == null)
+                return undefined;
+            let ret = context.localFormGroup;
+            if ((ret == null) && (context.parentFormGroup != null) && (context.subName != null)) {
+                if (context.parentFormGroup.contains(context.subName)) {
+                    context.localFormGroup = context.parentFormGroup.get(context.subName);
+                }
+                else {
+                    context.localFormGroup = new FormGroup({});
+                    context.parentFormGroup.addControl(context.subName, context.localFormGroup);
+                }
+                ret = context.localFormGroup;
+            }
+            return ret;
+        });
+        /**
+         * We need to create a new form group to manage the sub elements.
+         */
+        this.formGroup = computed(() => {
+            const ret = this.formGroupIfAny();
+            if (ret == null)
+                throw new Error('No form groups in this component of type ' + this.componentDescriptor());
+            return ret;
+        });
+    }
+    /**
+     * Helper function to calculate the sub context
+     * @param subName
+     * @param subType
+     */
+    subContext(subName, subType) {
+        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.4", ngImport: i0, type: XtCompositeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: XtCompositeComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: '', isInline: true, styles: [""] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: XtCompositeComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [], template: '' }]
+        }] });
+
+class XtUnitTestHelper {
+}
+
+/**
+ * Component that can be used to bootstrap tests.
+ * Just set the value and component type, and it will be injected in your test.
+ */
+class HostTestSimpleComponent {
+    constructor() {
+        this.type = input.required();
+        this.displayMode = input('FULL_VIEW');
+        this.value = input(undefined);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: HostTestSimpleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.4", 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"], outputs: ["valueChange", "outputs"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: HostTestSimpleComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'test-host',
+                    standalone: true,
+                    imports: [CommonModule, XtRenderComponent],
+                    template: '<h1>Test Simple Component</h1> <xt-render [componentType]="type()" [displayMode]="displayMode()" [value]="value()" ></xt-render> '
+                }]
+        }] });
+/**
+ * Same as HostTestSimpleComponent but it includes everything in a form.
+ * Just set the component type, the formGroup and the component  name, and your component will be run.
+ * You can as well easily read and set the value.
+ */
+class HostTestFormComponent {
+    constructor() {
+        this.builder = inject(FormBuilder);
+        this.type = input.required();
+        this.controlName = input.required();
+        // You can send the description to be used in a FormBuilder to create the formgroup;
+        this.formDescription = input({});
+        // Or set the FormGroup directly
+        this.formGroup = input();
+        this.createdFormGroup = null;
+    }
+    computedFormGroup() {
+        if (this.createdFormGroup == null) {
+            const formGroup = this.formGroup();
+            this.createdFormGroup = formGroup ?? generateFormGroup(this.formDescription());
+        }
+        return this.createdFormGroup;
+    }
+    patchValue(newVal) {
+        const patch = {};
+        patch[this.controlName()] = newVal;
+        if (this.createdFormGroup != null)
+            this.createdFormGroup.patchValue(patch);
+        else
+            throw new Error("FormGroup not yet created. Did you set formGroup or formDescription property ?");
+    }
+    retrieveValue() {
+        if (this.createdFormGroup != null)
+            return this.createdFormGroup.value[this.controlName()];
+        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.4", ngImport: i0, type: HostTestFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.4", 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"], 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.4", ngImport: i0, type: HostTestFormComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'test-form-host',
+                    standalone: true,
+                    imports: [CommonModule, XtRenderComponent, ReactiveFormsModule],
+                    template: '<h1>Test Form Component</h1> <form [formGroup]="computedFormGroup()"> <xt-render [componentType]="type()" displayMode="FULL_EDITABLE" [subName]="controlName()" [formGroup]="computedFormGroup()"></xt-render></form>'
+                }]
+        }] });
+/**
+ * Component that can be used to test your component based on the type it handles
+ * Just set the type hierarchy to register, the value, and it will instantiate the right component in your plugin
+ */
+class HostTestTypedComponent {
+    constructor() {
+        this.displayMode = input('FULL_VIEW');
+        this.value = input();
+        this.valueType = input();
+        this.context = computed(() => {
+            const ret = new XtBaseContext(this.displayMode());
+            ret.valueType = this.valueType();
+            ret.setDisplayValue(this.value());
+            return ret;
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: HostTestTypedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.4", 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"], outputs: ["outputs"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: HostTestTypedComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'test-typed-host',
+                    standalone: true,
+                    imports: [CommonModule, XtRenderSubComponent],
+                    template: '<h1>Test Typed Component</h1> <xt-render-sub [context]="context()" ></xt-render-sub> '
+                }]
+        }] });
+/**
+ * Same as HostTestSimpleComponent but it includes everything in a form.
+ * Just set the component type, the formGroup and the component  name, and your component will be run.
+ * You can as well easily read and set the value.
+ */
+class HostTestTypedFormComponent {
+    constructor() {
+        this.builder = inject(FormBuilder);
+        this.resolver = inject(XtResolverService);
+        this.valueType = input();
+        this.controlName = input();
+        // You can send the description to be used in a FormBuilder to create the formgroup;
+        this.formDescription = input({});
+        // Or set the FormGroup directly
+        this.formGroup = input();
+        this.parentFormGroup = this.builder.group({});
+        this.createdFormGroup = null;
+        this.computedFormGroup = computed(() => {
+            if (this.createdFormGroup == null) {
+                const formGroup = this.formGroup();
+                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);
+            }
+            ret.valueType = this.valueType();
+            return ret;
+        });
+    }
+    static { this.CONTROL_NAME = 'ForTest'; }
+    patchValue(controlName, newVal) {
+        const patch = {};
+        patch[controlName] = newVal;
+        this.computedFormGroup().patchValue(patch);
+    }
+    retrieveValue(controlName) {
+        return this.computedFormGroup().value[controlName];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: HostTestTypedFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.4", 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"], outputs: ["outputs"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: HostTestTypedFormComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'test-typed-form-host',
+                    standalone: true,
+                    imports: [CommonModule, ReactiveFormsModule, XtRenderSubComponent],
+                    template: '<h1>Test Typed Form Component</h1> <form [formGroup]="parentFormGroup"> <xt-render-sub [context]="subContext()"></xt-render-sub></form>'
+                }]
+        }] });
+function generateFormGroup(formDescription) {
+    if (typeof formDescription != 'object') {
+        throw new Error('Form Description should be an object of values');
+    }
+    return generateFormControl(formDescription);
+}
+function generateFormControl(formDescription) {
+    if (formDescription == null) {
+        return new FormControl(formDescription);
+    }
+    if (Array.isArray(formDescription)) {
+        const retArray = new FormArray([]);
+        for (const val of formDescription) {
+            retArray.push(generateFormControl(val), { emitEvent: false });
+        }
+        return retArray;
+    }
+    if ((typeof formDescription == 'object') && (!(formDescription instanceof Date))) {
+        const retObject = new FormGroup({});
+        for (const key of Object.keys(formDescription)) {
+            retObject.addControl(key, generateFormControl(formDescription[key]));
+        }
+        return retObject;
+    }
+    return new FormControl(formDescription);
+}
+
+/*
+ * Public API Surface of xt-components
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { HostTestFormComponent, HostTestSimpleComponent, HostTestTypedComponent, HostTestTypedFormComponent, XT_REGISTRY, XT_REGISTRY_TOKEN, XT_RESOLVER_TOKEN, XT_TYPE_RESOLVER_TOKEN, XtBaseContext, XtBaseTypeHierarchy, XtCompositeComponent, XtPluginRegistry, XtRenderComponent, XtRenderSubComponent, XtResolvedComponent, XtResolverService, XtSimpleComponent, XtTypeHierarchyResolver, XtUnitTestHelper, fromDescription, updateFormGroupWithValue };
+//# sourceMappingURL=xt-components.mjs.map