@ngx-formbar/core 0.11.0

package/fesm2022/ngx-formbar-core.mjs

@@ -0,0 +1,2429 @@
+import * as i0 from '@angular/core';
+import { inject, Injectable, InjectionToken, ViewContainerRef, input, computed, effect, Directive, Component, signal, makeEnvironmentProviders, untracked } from '@angular/core';
+import { ControlContainer, Validators, FormGroup, FormControl } from '@angular/forms';
+import { toSignal } from '@angular/core/rxjs-interop';
+import * as acorn from 'acorn';
+
+class FormService {
+    controlContainer = inject(ControlContainer);
+    formGroup = this.controlContainer.control;
+    formValue = toSignal(this.formGroup.valueChanges);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FormService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FormService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * Provides the parent ControlContainer to child components
+ *
+ * This provider configuration allows child form components to access their parent's
+ * ControlContainer through dependency injection. This is particularly useful for
+ * creating nested form components that inherit the parent form context without
+ * explicitly passing FormGroup instances.
+ *
+ * @remarks
+ * The `skipSelf` option ensures the provider looks for the ControlContainer in parent
+ * components rather than trying to resolve it from the component where this is used.
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   selector: 'app-child-form',
+ *   template: '...',
+ *   viewProviders: [controlContainerViewProviders]
+ * })
+ * export class ChildFormComponent {
+ *   // Now this component can access the parent form
+ *   private controlContainer = inject(ControlContainer);
+ *
+ *   get parentFormGroup() {
+ *     return this.parentContainer.control as FormGroup | null;
+ *   }
+ * }
+ */
+const controlContainerViewProviders = [
+    {
+        provide: ControlContainer,
+        useFactory: () => inject(ControlContainer, { skipSelf: true }),
+    },
+];
+
+const NGX_FW_COMPONENT_RESOLVER = new InjectionToken('NGX_FW_COMPONENT_RESOLVER');
+
+/**
+ * Structural directive that renders the appropriate component based on the control's type.
+ *
+ * This directive acts as a dynamic renderer for form controls, blocks, and groups.
+ * It works by:
+ * 1. Receiving a content configuration and name
+ * 2. Looking up the registered component for the content's type
+ * 3. Creating an instance of that component and binding the content and name to it
+ *
+ * This allows forms to be composed declaratively through configuration objects
+ * rather than explicit templates.
+ *
+ * @example
+ * ```html
+ * <!-- Used with ngFor to render a list of controls -->
+ * @for (control of controls(); track control[0]) {
+ *   <ng-template *ngxfbAbstractControl="control" />
+ * }
+ *
+ * <!-- Used directly with a specific control -->
+ * <ng-template *ngxfbAbstractControl="['name', nameControlConfig]" />
+ * ```
+ */
+class NgxfbAbstractControlDirective {
+    viewContainerRef = inject(ViewContainerRef);
+    /**
+     * Service for component registration
+     * Provides access to component type mappings
+     */
+    contentRegistrationService = inject(NGX_FW_COMPONENT_RESOLVER);
+    /**
+     * Required input for control configuration
+     * Defines properties like type, validation, and other control-specific settings
+     */
+    content = input.required({
+        alias: 'ngxfbAbstractControl',
+    });
+    controlName = computed(() => this.content()[0]);
+    controlConfig = computed(() => this.content()[1]);
+    /**
+     * Registration map of component types
+     * Maps control types to component implementations
+     */
+    registrations = this.contentRegistrationService.registrations;
+    /**
+     * Computed component type based on content.type
+     * Looks up the component implementation from registrations map
+     */
+    component = computed(() => {
+        const registrations = this.registrations();
+        const content = this.controlConfig();
+        const component = registrations.get(content.type);
+        return component ?? null;
+    });
+    constructor() {
+        effect(() => {
+            const component = this.component();
+            this.viewContainerRef.clear();
+            if (component) {
+                const componentRef = this.viewContainerRef.createComponent(component);
+                componentRef.setInput('content', this.controlConfig());
+                componentRef.setInput('name', this.controlName());
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: NgxfbAbstractControlDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.15", type: NgxfbAbstractControlDirective, isStandalone: true, selector: "[ngxfbAbstractControl]", inputs: { content: { classPropertyName: "content", publicName: "ngxfbAbstractControl", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: NgxfbAbstractControlDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngxfbAbstractControl]',
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Ngx Formbar Form Component
+ *
+ * This component serves as the main container for Ngx Formbar forms:
+ * - Takes a form configuration
+ * - Establishes the form context through FormService provider
+ * - Renders each content item using NgxfbAbstractControlDirective
+ * - Handles component registration and dependency injection
+ *
+ * The component acts as the root element for declarative form creation,
+ * processing the form content configuration and rendering the appropriate
+ * components for each control defined in the configuration.
+ */
+class NgxfbFormComponent {
+    /**
+     * Required input containing form configuration
+     */
+    formConfig = input.required();
+    /**
+     * Computed value containing form content
+     */
+    formContent = computed(() => Object.entries(this.formConfig().content));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: NgxfbFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: NgxfbFormComponent, isStandalone: true, selector: "ngxfb-form", inputs: { formConfig: { classPropertyName: "formConfig", publicName: "formConfig", isSignal: true, isRequired: true, transformFunction: null } }, providers: [FormService], ngImport: i0, template: "@for (content of formContent(); track content[0]) {\n  <ng-template *ngxfbAbstractControl=\"content\" />\n}\n", dependencies: [{ kind: "directive", type: NgxfbAbstractControlDirective, selector: "[ngxfbAbstractControl]", inputs: ["ngxfbAbstractControl"] }], viewProviders: [controlContainerViewProviders] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: NgxfbFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngxfb-form', imports: [NgxfbAbstractControlDirective], providers: [FormService], viewProviders: [controlContainerViewProviders], template: "@for (content of formContent(); track content[0]) {\n  <ng-template *ngxfbAbstractControl=\"content\" />\n}\n" }]
+        }] });
+
+/**
+ * Type helper to make it easier to use formbar.config.ts
+ * accepts a direct {@link FormbarConfig} object
+ */
+function defineFormbarConfig(config) {
+    return config;
+}
+
+const NGX_FW_COMPONENT_REGISTRATIONS = new InjectionToken('NGX_FW_COMPONENT_REGISTRATIONS', {
+    providedIn: 'root',
+    factory: () => new Map(),
+});
+
+class ComponentRegistrationService {
+    _registrations = signal(inject(NGX_FW_COMPONENT_REGISTRATIONS));
+    registrations = this._registrations.asReadonly();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ComponentRegistrationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ComponentRegistrationService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ComponentRegistrationService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+const NGX_FW_DEFAULT_VALIDATOR_REGISTRATIONS = new InjectionToken('NgxFbDefaultValidatorRegistrations', {
+    providedIn: 'root',
+    factory: () => new Map([
+        ['required', [Validators.required]],
+        ['requiredTrue', [Validators.requiredTrue]],
+        ['email', [Validators.email]],
+        ['nullValidator', [Validators.nullValidator]],
+    ]),
+});
+const NGX_FW_DEFAULT_ASYNC_VALIDATOR_REGISTRATIONS = new InjectionToken('NGX_FW_DEFAULT_ASYNC_VALIDATOR_REGISTRATIONS', {
+    providedIn: 'root',
+    factory: () => new Map(),
+});
+const NGX_FW_VALIDATOR_REGISTRATIONS = new InjectionToken('NGX_FW_VALIDATOR_REGISTRATIONS');
+const NGX_FW_ASYNC_VALIDATOR_REGISTRATIONS = new InjectionToken('NGX_FW_ASYNC_VALIDATOR_REGISTRATIONS');
+const NGX_FW_VALIDATOR_REGISTRATIONS_RESOLVED = new InjectionToken('NGX_FW_VALIDATOR_REGISTRATIONS_RESOLVED', {
+    providedIn: 'root',
+    factory: () => {
+        const base = inject(NGX_FW_DEFAULT_VALIDATOR_REGISTRATIONS);
+        const extras = inject(NGX_FW_VALIDATOR_REGISTRATIONS, { optional: true }) ?? [];
+        return mergeMapsLastWins(base, ...extras);
+    },
+});
+const NGX_FW_ASYNC_VALIDATOR_REGISTRATIONS_RESOLVED = new InjectionToken('NGX_FW_ASYNC_VALIDATOR_REGISTRATIONS_RESOLVED', {
+    providedIn: 'root',
+    factory: () => {
+        const base = inject(NGX_FW_DEFAULT_ASYNC_VALIDATOR_REGISTRATIONS);
+        const extras = inject(NGX_FW_ASYNC_VALIDATOR_REGISTRATIONS, { optional: true }) ?? [];
+        return mergeMapsLastWins(base, ...extras);
+    },
+});
+/** Utility: merge maps left->right, later maps override earlier keys */
+function mergeMapsLastWins(...maps) {
+    const out = new Map();
+    for (const m of maps) {
+        for (const [k, v] of m) {
+            out.set(k, v);
+        }
+    }
+    return out;
+}
+
+class ValidatorRegistrationService {
+    _registrations = signal(inject(NGX_FW_VALIDATOR_REGISTRATIONS_RESOLVED));
+    registrations = this._registrations.asReadonly();
+    _asyncRegistrations = signal(inject(NGX_FW_ASYNC_VALIDATOR_REGISTRATIONS_RESOLVED));
+    asyncRegistrations = this._asyncRegistrations.asReadonly();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ValidatorRegistrationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ValidatorRegistrationService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ValidatorRegistrationService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+/**
+ * Set of node types that are not supported in expressions for security or complexity reasons
+ */
+const UNSUPPORTED_NODE_TYPES = new Set([
+    'ThisExpression',
+    'Super',
+    'PrivateIdentifier',
+    'FunctionExpression',
+    'UpdateExpression',
+    'AssignmentExpression',
+    'NewExpression',
+    'YieldExpression',
+    'TaggedTemplateExpression',
+    'ClassExpression',
+    'MetaProperty',
+    'AwaitExpression',
+    'ImportExpression',
+]);
+/**
+ * Mapping of safe methods that can be called on various types during evaluation
+ */
+const SAFE_METHODS = {
+    string: [
+        'charAt',
+        'concat',
+        'includes',
+        'endsWith',
+        'indexOf',
+        'lastIndexOf',
+        'padEnd',
+        'padStart',
+        'repeat',
+        'replace',
+        'slice',
+        'split',
+        'startsWith',
+        'substring',
+        'toLowerCase',
+        'toUpperCase',
+        'trim',
+        'trimEnd',
+        'trimStart',
+        'toString',
+    ],
+    number: ['toFixed', 'toPrecision', 'toString'],
+    boolean: ['toString'],
+    array: [
+        'concat',
+        'every',
+        'filter',
+        'find',
+        'findIndex',
+        'includes',
+        'indexOf',
+        'join',
+        'lastIndexOf',
+        'map',
+        'reduce',
+        'reduceRight',
+        'slice',
+        'some',
+        'toString',
+    ],
+};
+/**
+ * Service for parsing and evaluating JavaScript expressions within a context object
+ */
+class ExpressionService {
+    /**
+     * Cache for parsed ASTs to avoid re-parsing the same expression
+     */
+    astCache = new Map();
+    /**
+     * Parses an expression string into an abstract syntax tree (AST)
+     * @param expressionString - The expression to parse
+     * @returns The parsed AST or null
+     */
+    parseExpressionToAst(expressionString) {
+        if (!expressionString) {
+            return null;
+        }
+        const cachedAst = this.astCache.get(expressionString);
+        if (cachedAst) {
+            return cachedAst;
+        }
+        const ast = acorn.parse(expressionString, { ecmaVersion: 2022 });
+        this.astCache.set(expressionString, ast);
+        return ast;
+    }
+    /**
+     * Evaluates an expression AST within the provided context
+     * @param ast - The parsed AST to evaluate
+     * @param context - The context containing variables and objects referenced in the expression
+     * @returns The result of evaluating the expression
+     */
+    evaluateExpression(ast, context) {
+        if (!context || !ast) {
+            return null;
+        }
+        const node = ast.body[0];
+        if (node.type !== 'ExpressionStatement') {
+            throw new TypeError(`Unsupported statement type: ${node.type}`);
+        }
+        return this.evaluateAstNode(node.expression, context);
+    }
+    /**
+     * Evaluates a node in the AST
+     * @param node - The AST node to evaluate
+     * @param context - The context containing variables and objects
+     * @returns The result of evaluating the node
+     */
+    evaluateAstNode(node, context) {
+        // Check if the node type is unsupported first
+        if (UNSUPPORTED_NODE_TYPES.has(node.type)) {
+            throw new TypeError(`${node.type} is not supported in expressions`);
+        }
+        // Handle supported node types
+        switch (node.type) {
+            case 'Identifier':
+                return this.evaluateIdentifier(node, context);
+            case 'Literal':
+                return this.evaluateLiteral(node);
+            case 'ArrayExpression':
+                return this.evaluateArrayExpression(node, context);
+            case 'UnaryExpression':
+                return this.evaluateUnaryExpression(node, context);
+            case 'BinaryExpression':
+                return this.evaluateBinaryExpression(node, context);
+            case 'LogicalExpression':
+                return this.evaluateLogicalExpression(node, context);
+            case 'MemberExpression':
+                return this.evaluateMemberExpression(node, context);
+            case 'ConditionalExpression':
+                return this.evaluateConditionalExpression(node, context);
+            case 'ParenthesizedExpression':
+                return this.evaluateAstNode(node.expression, context);
+            case 'ObjectExpression':
+                return this.evaluateObjectExpression(node, context);
+            case 'SequenceExpression':
+                return this.evaluateSequenceExpression(node, context);
+            case 'TemplateLiteral':
+                return this.evaluateTemplateLiteral(node, context);
+            case 'CallExpression':
+                return this.evaluateCallExpression(node, context);
+            case 'ArrowFunctionExpression':
+                return this.evaluateArrowFunctionExpression(node, context);
+            case 'ChainExpression':
+                return this.evaluateAstNode(node.expression, context);
+            default:
+                throw new TypeError(`Unsupported node type: ${node.type}`);
+        }
+    }
+    /**
+     * Evaluates a literal value node
+     * @param node - The literal node to evaluate
+     * @returns The literal value
+     */
+    evaluateLiteral(node) {
+        return node.value;
+    }
+    /**
+     * Evaluates a binary expression (e.g., a + b, x > y)
+     * @param node - The binary expression node
+     * @param context - The context containing variables and objects
+     * @returns The result of the binary operation
+     */
+    evaluateBinaryExpression(node, context) {
+        const leftValue = this.evaluateAstNode(node.left, context);
+        const rightValue = this.evaluateAstNode(node.right, context);
+        return this.executeBinaryOperation(leftValue, node.operator, rightValue);
+    }
+    /**
+     * Executes a binary operation with the given values and operator
+     * @param leftValue - The left operand
+     * @param operator - The binary operator
+     * @param rightValue - The right operand
+     * @returns The result of applying the operator to the operands
+     */
+    executeBinaryOperation(leftValue, operator, rightValue) {
+        const isNumber = (value) => typeof value === 'number';
+        const isString = (value) => typeof value === 'string';
+        const isObject = (value) => value !== null && typeof value === 'object';
+        switch (operator) {
+            // Arithmetic operators
+            case '+':
+                if (isNumber(leftValue) && isNumber(rightValue)) {
+                    return leftValue + rightValue;
+                }
+                if (isString(leftValue) || isString(rightValue)) {
+                    return String(leftValue) + String(rightValue);
+                }
+                throw new TypeError('+ operator requires numbers or strings');
+            case '-':
+                if (isNumber(leftValue) && isNumber(rightValue)) {
+                    return leftValue - rightValue;
+                }
+                throw new TypeError('- operator requires numbers');
+            case '*':
+                if (isNumber(leftValue) && isNumber(rightValue)) {
+                    return leftValue * rightValue;
+                }
+                throw new TypeError('* operator requires numbers');
+            case '/':
+                if (isNumber(leftValue) && isNumber(rightValue)) {
+                    if (rightValue === 0) {
+                        throw new Error('Division by zero');
+                    }
+                    return leftValue / rightValue;
+                }
+                throw new TypeError('/ operator requires numbers');
+            case '%':
+                if (isNumber(leftValue) && isNumber(rightValue)) {
+                    if (rightValue === 0) {
+                        throw new Error('Modulo by zero');
+                    }
+                    return leftValue % rightValue;
+                }
+                throw new TypeError('% operator requires numbers');
+            case '**':
+                if (isNumber(leftValue) && isNumber(rightValue)) {
+                    return leftValue ** rightValue;
+                }
+                throw new TypeError('** operator requires numbers');
+            // Comparison operators
+            case '<':
+                if ((isNumber(leftValue) && isNumber(rightValue)) ||
+                    (isString(leftValue) && isString(rightValue))) {
+                    return leftValue < rightValue;
+                }
+                throw new TypeError('< operator requires operands of the same type (numbers or strings)');
+            case '>':
+                if ((isNumber(leftValue) && isNumber(rightValue)) ||
+                    (isString(leftValue) && isString(rightValue))) {
+                    return leftValue > rightValue;
+                }
+                throw new TypeError('> operator requires operands of the same type (numbers or strings)');
+            case '<=':
+                if ((isNumber(leftValue) && isNumber(rightValue)) ||
+                    (isString(leftValue) && isString(rightValue))) {
+                    return leftValue <= rightValue;
+                }
+                throw new TypeError('<= operator requires operands of the same type (numbers or strings)');
+            case '>=':
+                if ((isNumber(leftValue) && isNumber(rightValue)) ||
+                    (isString(leftValue) && isString(rightValue))) {
+                    return leftValue >= rightValue;
+                }
+                throw new TypeError('>= operator requires operands of the same type (numbers or strings)');
+            // Equality operators - maintain loose behavior as per specs
+            case '==':
+                return leftValue == rightValue;
+            case '!=':
+                return leftValue != rightValue;
+            case '===':
+                return leftValue === rightValue;
+            case '!==':
+                return leftValue !== rightValue;
+            // Bitwise operators
+            case '|':
+                if (isNumber(leftValue) && isNumber(rightValue)) {
+                    return leftValue | rightValue;
+                }
+                throw new TypeError('| operator requires numbers');
+            case '&':
+                if (isNumber(leftValue) && isNumber(rightValue)) {
+                    return leftValue & rightValue;
+                }
+                throw new TypeError('& operator requires numbers');
+            case '^':
+                if (isNumber(leftValue) && isNumber(rightValue)) {
+                    return leftValue ^ rightValue;
+                }
+                throw new TypeError('^ operator requires numbers');
+            case '<<':
+                if (isNumber(leftValue) && isNumber(rightValue)) {
+                    return leftValue << rightValue;
+                }
+                throw new TypeError('<< operator requires numbers');
+            case '>>':
+                if (isNumber(leftValue) && isNumber(rightValue)) {
+                    return leftValue >> rightValue;
+                }
+                throw new TypeError('>> operator requires numbers');
+            case '>>>':
+                if (isNumber(leftValue) && isNumber(rightValue)) {
+                    return leftValue >>> rightValue;
+                }
+                throw new TypeError('>>> operator requires numbers');
+            case 'in':
+                if (!isObject(rightValue)) {
+                    throw new TypeError('Right operand must be an object for "in" operator');
+                }
+                if (!isString(leftValue)) {
+                    throw new TypeError('Left operand must be of type string for "in" operator');
+                }
+                return leftValue in rightValue;
+            default:
+                throw new Error(`Unsupported binary operator: ${operator}`);
+        }
+    }
+    /**
+     * Evaluates a member expression (e.g., obj.prop, arr[0]) with improved safety
+     * @param node - The member expression node
+     * @param context - The context containing variables and objects
+     * @returns The value of the member
+     */
+    evaluateMemberExpression(node, context) {
+        const propertyValue = node.computed
+            ? this.evaluateAstNode(node.property, context)
+            : node.property.name;
+        if (typeof propertyValue !== 'string' &&
+            typeof propertyValue !== 'number') {
+            throw new Error(`Property accessor must be a string or number, but was ${typeof propertyValue}`);
+        }
+        const objectValue = this.evaluateAstNode(node.object, context);
+        const isOptional = node.optional;
+        if (objectValue === null || objectValue === undefined) {
+            if (isOptional) {
+                return undefined;
+            }
+            const readObject = node.object;
+            const readingFrom = readObject.type === 'Identifier' ? ` from ${readObject.name}` : '';
+            throw new Error(`Cannot access properties of null or undefined (Reading: ${propertyValue.toString()}${readingFrom})`);
+        }
+        if (typeof objectValue === 'object') {
+            return this.getPropertyFromObject(objectValue, propertyValue);
+        }
+        if (typeof objectValue === 'string') {
+            if (propertyValue === 'length' ||
+                typeof String.prototype[propertyValue] === 'function') {
+                return objectValue[propertyValue];
+            }
+            if (typeof propertyValue === 'number' ||
+                !Number.isNaN(Number(propertyValue))) {
+                return objectValue[propertyValue];
+            }
+            throw new Error(`Invalid property access on string: ${propertyValue}`);
+        }
+        if (typeof objectValue === 'number') {
+            throw new Error(`Cannot access properties on a number value: ${String(objectValue)}.${String(propertyValue)}`);
+        }
+        if (typeof objectValue === 'boolean') {
+            throw new Error(`Cannot access properties on a boolean value: ${String(objectValue)}.${String(propertyValue)}`);
+        }
+        return this.getPropertyFromObject(objectValue, propertyValue);
+    }
+    /**
+     * Gets a property from an object by key
+     * @param object - The object to retrieve the property from
+     * @param propertyKey - The property key (string or number)
+     * @returns The value of the property
+     */
+    getPropertyFromObject(object, propertyKey) {
+        return object !== null && object !== undefined
+            ? object[propertyKey]
+            : undefined;
+    }
+    /**
+     * Evaluates an identifier node by looking it up in the context
+     * @param node - The identifier node
+     * @param context - The context containing variables and objects
+     * @returns The value of the identifier from the context
+     */
+    evaluateIdentifier(node, context) {
+        if (typeof context === 'object' && node.name in context) {
+            return context[node.name];
+        }
+        return undefined;
+    }
+    /**
+     * Evaluates an array expression node
+     * @param node - The array expression node
+     * @param context - The context containing variables and objects
+     * @returns The evaluated array
+     */
+    evaluateArrayExpression(node, context) {
+        const resultArray = [];
+        for (const element of node.elements) {
+            if (element === null) {
+                resultArray.push(undefined);
+                continue;
+            }
+            if (element.type !== 'SpreadElement') {
+                resultArray.push(this.evaluateAstNode(element, context));
+                continue;
+            }
+            const spreadValue = this.evaluateAstNode(element.argument, context);
+            if (Array.isArray(spreadValue)) {
+                resultArray.push(...spreadValue);
+                continue;
+            }
+            throw new TypeError(`Cannot spread non-array value in array literal`);
+        }
+        return resultArray;
+    }
+    /**
+     * Evaluates a unary expression (e.g., !x, -value, typeof obj)
+     * @param node - The unary expression node
+     * @param context - The context containing variables and objects
+     * @returns The result of the unary operation
+     */
+    evaluateUnaryExpression(node, context) {
+        const argumentValue = this.evaluateAstNode(node.argument, context);
+        switch (node.operator) {
+            case '-':
+                if (typeof argumentValue !== 'number') {
+                    throw new TypeError('Unary - operator requires a number');
+                }
+                return -argumentValue;
+            case '+':
+                if (typeof argumentValue === 'string') {
+                    const numberValue = Number(argumentValue);
+                    if (Number.isNaN(numberValue)) {
+                        throw new TypeError(`Cannot convert string "${argumentValue}" to number`);
+                    }
+                    return numberValue;
+                }
+                else if (typeof argumentValue !== 'number') {
+                    throw new TypeError('Unary + operator requires a number or string');
+                }
+                return argumentValue;
+            case '!':
+                return !argumentValue;
+            case '~':
+                if (typeof argumentValue !== 'number') {
+                    throw new TypeError('Bitwise NOT (~) operator requires a number');
+                }
+                return ~argumentValue;
+            case 'typeof':
+                return typeof argumentValue;
+            case 'void':
+                return undefined;
+            case 'delete':
+                throw new Error('Delete operator is not supported in expressions');
+        }
+    }
+    /**
+     * Evaluates a logical expression (&&, ||, ??)
+     * @param node - The logical expression node
+     * @param context - The context containing variables and objects
+     * @returns The result of the logical operation
+     */
+    evaluateLogicalExpression(node, context) {
+        const leftValue = this.evaluateAstNode(node.left, context);
+        switch (node.operator) {
+            case '&&':
+                if (!leftValue) {
+                    return leftValue;
+                }
+                return this.evaluateAstNode(node.right, context);
+            case '||':
+                if (leftValue) {
+                    return leftValue;
+                }
+                return this.evaluateAstNode(node.right, context);
+            case '??':
+                if (leftValue === null || leftValue === undefined) {
+                    return this.evaluateAstNode(node.right, context);
+                }
+                return leftValue;
+        }
+    }
+    /**
+     * Evaluates a conditional (ternary) expression (condition ? trueValue : falseValue)
+     * @param node - The conditional expression node
+     * @param context - The context containing variables and objects
+     * @returns The result based on the condition evaluation
+     */
+    evaluateConditionalExpression(node, context) {
+        const condition = this.evaluateAstNode(node.test, context);
+        const isConditionTrue = Boolean(condition);
+        if (isConditionTrue) {
+            return this.evaluateAstNode(node.consequent, context);
+        }
+        return this.evaluateAstNode(node.alternate, context);
+    }
+    /**
+     * Evaluates an object expression (object literal)
+     * @param node - The object expression node
+     * @param context - The context containing variables and objects
+     * @returns The evaluated object
+     */
+    evaluateObjectExpression(node, context) {
+        const result = {};
+        for (const property of node.properties) {
+            if (property.type !== 'Property') {
+                continue;
+            }
+            const prop = property;
+            let key;
+            if (prop.key.type === 'Identifier' && !prop.computed) {
+                key = prop.key.name;
+            }
+            else {
+                const evaluatedKey = this.evaluateAstNode(prop.key, context);
+                key = String(evaluatedKey);
+            }
+            result[key] = this.evaluateAstNode(prop.value, context);
+        }
+        return result;
+    }
+    /**
+     * Evaluates a sequence expression (comma-separated expressions)
+     * @param node - The sequence expression node
+     * @param context - The context containing variables and objects
+     * @returns The result of the last expression in the sequence
+     */
+    evaluateSequenceExpression(node, context) {
+        let result;
+        for (const expression of node.expressions) {
+            result = this.evaluateAstNode(expression, context);
+        }
+        return result;
+    }
+    /**
+     * Evaluates a template literal
+     * @param node - The template literal node
+     * @param context - The context containing variables and objects
+     * @returns The evaluated template string
+     */
+    evaluateTemplateLiteral(node, context) {
+        let result = '';
+        for (let i = 0; i < node.quasis.length; i++) {
+            const cookedValue = node.quasis[i].value.cooked;
+            result = result.concat(cookedValue ?? '');
+            if (i < node.expressions.length) {
+                const exprValue = this.evaluateAstNode(node.expressions[i], context);
+                result = result.concat(String(exprValue));
+            }
+        }
+        return result;
+    }
+    /**
+     * Evaluates a function call expression with strict type checking
+     * @param node - The function call expression node
+     * @param context - The context containing variables and objects
+     * @returns The result of the function call
+     */
+    evaluateCallExpression(node, context) {
+        if (node.callee.type !== 'MemberExpression') {
+            throw new TypeError('Only method calls are supported');
+        }
+        const memberExpr = node.callee;
+        const object = this.evaluateAstNode(memberExpr.object, context);
+        const isOptionalCall = node.optional || memberExpr.optional;
+        if (object === null || object === undefined) {
+            if (isOptionalCall) {
+                return undefined;
+            }
+            throw new Error('Cannot call methods on null || undefined');
+        }
+        let methodName;
+        if (!memberExpr.computed && memberExpr.property.type === 'Identifier') {
+            methodName = memberExpr.property.name;
+        }
+        else if (memberExpr.computed) {
+            const propertyValue = this.evaluateAstNode(memberExpr.property, context);
+            if (typeof propertyValue !== 'string' &&
+                typeof propertyValue !== 'number') {
+                throw new TypeError('Method name must be a string || number');
+            }
+            methodName = String(propertyValue);
+        }
+        else {
+            throw new TypeError('Unexpected property type in method call');
+        }
+        const args = [];
+        for (const arg of node.arguments) {
+            args.push(this.evaluateAstNode(arg, context));
+        }
+        return this.callSafeMethod(object, methodName, args);
+    }
+    /**
+     * Calls a method on an object after verifying it's safe to do so
+     * @param object - The object to call the method on
+     * @param methodName - The name of the method to call
+     * @param args - The arguments to pass to the method
+     * @returns The result of the method call
+     */
+    callSafeMethod(object, methodName, args) {
+        const objType = typeof object;
+        const isAllowed = this.isAllowedMethod(objType, methodName, object);
+        if (!isAllowed) {
+            throw new TypeError(`Method ${methodName} is not supported on type ${objType}`);
+        }
+        const objectWithMethod = object;
+        const method = objectWithMethod[methodName];
+        if (typeof method !== 'function') {
+            throw new TypeError(`${methodName} is not a function`);
+        }
+        return method.apply(object, args);
+    }
+    isAllowedMethod(objectType, methodName, object) {
+        if (objectType === 'object' && object !== null) {
+            const objectWithMethods = object;
+            return (methodName in objectWithMethods &&
+                typeof objectWithMethods[methodName] === 'function');
+        }
+        if (!(objectType in SAFE_METHODS)) {
+            return false;
+        }
+        return SAFE_METHODS[objectType].includes(methodName);
+    }
+    /**
+     * Evaluates an arrow function expression
+     * @param node - The arrow function expression node
+     * @param context - The context containing variables and objects
+     * @returns A function that can be called from other expressions
+     */
+    evaluateArrowFunctionExpression(node, context) {
+        // We only support simple arrow functions with expression bodies
+        if (node.body.type !== 'BlockStatement' &&
+            node.body.type !== 'Identifier' &&
+            node.body.type !== 'MemberExpression' &&
+            node.body.type !== 'CallExpression' &&
+            node.body.type !== 'BinaryExpression' &&
+            node.body.type !== 'LogicalExpression' &&
+            node.body.type !== 'TemplateLiteral') {
+            throw new TypeError(`Unsupported arrow function body type: ${node.body.type}`);
+        }
+        return (...args) => {
+            const arrowContext = { ...context };
+            for (let i = 0; i < node.params.length && i < args.length; i++) {
+                const param = node.params[i];
+                if (param.type !== 'Identifier') {
+                    throw new TypeError('Only simple identifier parameters are supported in arrow functions');
+                }
+                const paramName = param.name;
+                arrowContext[paramName] = args[i];
+            }
+            if (node.body.type !== 'BlockStatement') {
+                return this.evaluateAstNode(node.body, arrowContext);
+            }
+            throw new TypeError('Block-bodied arrow functions are not supported');
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ExpressionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ExpressionService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ExpressionService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+const NGX_FW_DEFAULT_UPDATE_STRATEGY = new InjectionToken('NGX_FW_DEFAULT_UPDATE_STRATEGY', {
+    providedIn: 'root',
+    factory: () => 'change',
+});
+
+const NGX_VALIDATOR_RESOLVER = new InjectionToken('NGX_VALIDATOR_RESOLVER');
+
+const NGX_FW_DEFAULT_CONFIG = new InjectionToken('NGX_FW_DEFAULT_CONFIG', {
+    providedIn: 'root',
+    factory: () => ({}),
+});
+const NGX_FW_CONFIG = new InjectionToken('NGX_FW_CONFIG', {
+    providedIn: 'root',
+    factory: () => [],
+});
+const NGX_FW_CONFIG_RESOLVED = new InjectionToken('NGX_FW_CONFIG_RESOLVED', {
+    providedIn: 'root',
+    factory: () => {
+        const base = inject(NGX_FW_DEFAULT_CONFIG);
+        const extras = inject(NGX_FW_CONFIG, { optional: true }) ?? [];
+        return mergeDeep(base, ...extras);
+    },
+});
+function mergeDeep(base, ...partials) {
+    const out = { ...base };
+    for (const p of partials) {
+        for (const k of Object.keys(p)) {
+            const src = p[k];
+            const dst = out[k];
+            const bothObjects = typeof dst === 'object' &&
+                dst !== null &&
+                typeof src === 'object' &&
+                src !== null &&
+                !Array.isArray(dst) &&
+                !Array.isArray(src);
+            if (bothObjects) {
+                out[k] = mergeDeep(dst, src);
+                continue;
+            }
+            out[k] = src;
+        }
+    }
+    return out;
+}
+
+/**
+ * Configures and provides ngx-formbar to your application.
+ *
+ * This function is used in app.config.ts to register form components, validators,
+ * and set global configuration for the formbar library.
+ *
+ * @param config Configuration object for ngx-formbar:
+ *   - componentRegistrations: Optional mapping of control types to component implementations
+ *   - validatorRegistrations: Optional mapping of validator names to validator functions
+ *     (Angular's required, requiredTrue, email, and nullValidator are registered by default)
+ *   - asyncValidatorRegistrations: Optional mapping of async validator names to async validator functions
+ *   - updateOn: Optional default update strategy for all form controls
+ *   - globalConfig: Optional global configuration settings
+ *
+ * @returns Angular environment providers to be included in application configuration
+ *
+ * @example
+ * ```ts
+ * // app.config.ts
+ * export const appConfig: ApplicationConfig = {
+ *   providers: [
+ *     provideFormbar({
+ *       componentRegistrations: {
+ *         text: TextInputComponent,
+ *         select: SelectComponent,
+ *       },
+ *       validatorRegistrations: {
+ *         customValidator: [myCustomValidator]
+ *       }
+ *     })
+ *   ]
+ * };
+ * ```
+ */
+function provideFormbar(config) {
+    config ??= {};
+    const { componentRegistrations, validatorRegistrations, asyncValidatorRegistrations, updateOn, globalConfig, } = config;
+    const providers = [
+        {
+            provide: NGX_FW_COMPONENT_RESOLVER,
+            useClass: ComponentRegistrationService,
+        },
+        {
+            provide: NGX_VALIDATOR_RESOLVER,
+            useClass: ValidatorRegistrationService,
+        },
+        ExpressionService,
+    ];
+    if (componentRegistrations !== undefined) {
+        providers.push({
+            provide: NGX_FW_COMPONENT_REGISTRATIONS,
+            useValue: toComponentRegistrationMap(componentRegistrations),
+        });
+    }
+    if (validatorRegistrations !== undefined) {
+        providers.push({
+            provide: NGX_FW_VALIDATOR_REGISTRATIONS,
+            useFactory: () => toValidatorRegistrationMap(validatorRegistrations),
+            multi: true,
+        });
+    }
+    if (asyncValidatorRegistrations !== undefined) {
+        providers.push({
+            provide: NGX_FW_ASYNC_VALIDATOR_REGISTRATIONS,
+            useFactory: () => toAsyncValidatorRegistrationMap(asyncValidatorRegistrations),
+            multi: true,
+        });
+    }
+    if (updateOn !== undefined) {
+        providers.push({
+            provide: NGX_FW_DEFAULT_UPDATE_STRATEGY,
+            useValue: updateOn,
+        });
+    }
+    if (globalConfig !== undefined) {
+        providers.push({
+            provide: NGX_FW_CONFIG,
+            useValue: globalConfig,
+            multi: true,
+        });
+    }
+    return makeEnvironmentProviders(providers);
+}
+/**
+ * Converts component registration array to a lookup map
+ *
+ * @param componentRegistrations Array of component registration configurations
+ * @returns Map of component types to component implementations
+ */
+function toComponentRegistrationMap(componentRegistrations) {
+    return new Map(Object.entries(componentRegistrations));
+}
+/**
+ * Converts validator configuration to a map of validator functions
+ * Resolves validator keys to actual validator functions
+ *
+ * @param config Configuration object for validators
+ * @returns Map of validator keys to validator function arrays
+ */
+function toValidatorRegistrationMap(config) {
+    return toValidatorMap(config);
+}
+/**
+ * Converts async validator configuration to a map of async validator functions
+ *
+ * @param config Configuration object for async validators
+ * @returns Map of validator keys to async validator function arrays
+ */
+function toAsyncValidatorRegistrationMap(config) {
+    return toValidatorMap(config);
+}
+/**
+ * Resolves validator references to actual validator functions
+ * Supports recursive validator references and memoization
+ *
+ * @param validators Array of validator functions or validator keys
+ * @param registrations Map of all registered validators
+ * @param memo Memoization cache to avoid circular references
+ * @param visiting
+ * @returns Flattened array of validator functions
+ */
+function toValidatorFn(validators, registrations, memo = new Map(), visiting = new Set()) {
+    return validators.flatMap((v) => {
+        switch (typeof v) {
+            case 'string': {
+                const cached = memo.get(v);
+                if (cached)
+                    return cached;
+                if (visiting.has(v))
+                    throw new Error(`Cyclic validator reference: ${[...visiting, v].join(' -> ')}`);
+                if (!Object.prototype.hasOwnProperty.call(registrations, v))
+                    throw new Error(`Unknown validator key: "${v}"`);
+                const spec = registrations[v];
+                visiting.add(v);
+                const resolved = toValidatorFn(spec, registrations, memo, visiting);
+                visiting.delete(v);
+                memo.set(v, resolved);
+                return resolved;
+            }
+            default:
+                return v;
+        }
+    });
+}
+function toValidatorMap(source) {
+    const out = new Map();
+    const memo = new Map();
+    for (const key in source) {
+        if (!Object.prototype.hasOwnProperty.call(source, key)) {
+            continue;
+        }
+        const spec = source[key];
+        const cached = memo.get(key);
+        if (cached) {
+            out.set(key, cached);
+            continue;
+        }
+        const resolved = toValidatorFn(spec, source, memo);
+        memo.set(key, resolved);
+        out.set(key, resolved);
+    }
+    return out;
+}
+
+/**
+ * Computes a reactive readonly state based on control content
+ *
+ * The readonly state is determined using the following priority:
+ * 1. If content.readonly is a boolean, that value is used directly
+ * 2. If content.readonly is an expression string, it's parsed to AST and evaluated
+ *    against the current form values
+ * 3. If no readonly property is defined, the control inherits the readonly state
+ *    from its parent group
+ *
+ * This hierarchical inheritance ensures that child controls are automatically
+ * set to readonly when their parent group is readonly, unless explicitly overridden.
+ *
+ * @param content Signal containing control configuration with potential readonly property
+ * @returns Computed signal that resolves to boolean readonly state
+ */
+function withReadonlyState(content) {
+    const formService = inject(FormService);
+    const expressionService = inject(ExpressionService);
+    const parentGroupDirective = inject((NgxfbGroupDirective), {
+        optional: true,
+        skipSelf: true,
+    });
+    const parentGroupIsReadonly = computed(() => {
+        const parentGroup = parentGroupDirective;
+        if (!parentGroup) {
+            return false;
+        }
+        return parentGroup.readonly();
+    });
+    const readonlyAst = computed(() => {
+        const readonlyOption = content().readonly;
+        if (typeof readonlyOption === 'boolean' ||
+            typeof readonlyOption === 'function') {
+            return null;
+        }
+        return expressionService.parseExpressionToAst(readonlyOption);
+    });
+    const readonlyBool = computed(() => {
+        const readonlyOption = content().readonly;
+        if (typeof readonlyOption !== 'boolean') {
+            return null;
+        }
+        return readonlyOption;
+    });
+    const readonlyFunction = computed(() => {
+        const readonlyOption = content().readonly;
+        if (typeof readonlyOption !== 'function') {
+            return null;
+        }
+        return readonlyOption;
+    });
+    return computed(() => {
+        const readonlyStatic = readonlyBool();
+        if (readonlyStatic !== null) {
+            return readonlyStatic;
+        }
+        const reactiveFormValues = formService.formValue();
+        const currentSynchronousFormValues = formService.formGroup
+            .value;
+        const evaluationContext = reactiveFormValues ?? currentSynchronousFormValues;
+        const readonlyFn = readonlyFunction();
+        if (readonlyFn) {
+            return readonlyFn(evaluationContext);
+        }
+        const ast = readonlyAst();
+        if (!ast) {
+            return parentGroupIsReadonly();
+        }
+        const readonly = expressionService.evaluateExpression(ast, evaluationContext) ?? false;
+        return readonly;
+    });
+}
+
+/**
+ * Computes a reactive hidden state based on control content
+ *
+ * The hidden state is determined using the following priority:
+ * 1. If content.hidden is an expression string, it's parsed to AST and evaluated
+ *    against the current form values
+ * 2. If no hidden expression is defined, the control inherits the hidden state
+ *    from its parent group
+ * 3. Both conditions can be combined - a control is hidden if either its own
+ *    condition evaluates to true OR its parent group is hidden
+ *
+ * @param content Signal containing control configuration with potential hidden expression
+ * @returns Computed signal that resolves to boolean hidden state
+ */
+function withHiddenState(content) {
+    const formService = inject(FormService);
+    const expressionService = inject(ExpressionService);
+    const parentGroupDirective = inject((NgxfbGroupDirective), {
+        optional: true,
+        skipSelf: true,
+    });
+    const parentGroupIsHidden = computed(() => {
+        const parentGroup = parentGroupDirective;
+        if (!parentGroup) {
+            return false;
+        }
+        return parentGroup.isHidden();
+    });
+    const visibilityAst = computed(() => {
+        const hiddenOption = content().hidden;
+        if (typeof hiddenOption !== 'string') {
+            return null;
+        }
+        return expressionService.parseExpressionToAst(hiddenOption);
+    });
+    const visibilityFunction = computed(() => {
+        const visibilityOption = content().hidden;
+        if (typeof visibilityOption !== 'function') {
+            return null;
+        }
+        return visibilityOption;
+    });
+    return computed(() => {
+        const reactiveFormValues = formService.formValue();
+        const currentSynchronousFormValues = formService.formGroup
+            .value;
+        const evaluationContext = reactiveFormValues ?? currentSynchronousFormValues;
+        const visibilityFn = visibilityFunction();
+        if (visibilityFn) {
+            return visibilityFn(evaluationContext);
+        }
+        const ast = visibilityAst();
+        if (!ast) {
+            return parentGroupIsHidden();
+        }
+        const isHidden = expressionService.evaluateExpression(ast, evaluationContext) ?? false;
+        return isHidden || parentGroupIsHidden();
+    });
+}
+/**
+ * Creates a computed attribute value for hidden DOM elements
+ *
+ * When visibilityHandling is set to 'auto', this returns a boolean attribute value
+ * that can be used with Angular's [attr.hidden] binding. When set to 'manual',
+ * it returns null so the attribute is not applied.
+ *
+ * @param options Configuration object for hidden attribute
+ * @param options.hiddenSignal Signal that indicates if the control should be hidden
+ * @param options.hiddenHandlingSignal Signal that determines how visibility is managed
+ * @returns Computed signal that resolves to attribute value (true or null)
+ */
+function withHiddenAttribute(options) {
+    return computed(() => {
+        const isHidden = options.hiddenSignal();
+        const visibilityHandling = options.hiddenHandlingSignal();
+        if (visibilityHandling !== 'auto') {
+            return null;
+        }
+        return isHidden ? true : null;
+    });
+}
+/**
+ * Creates an effect that manages control visibility in forms
+ *
+ * Based on visibility state and hide strategy, this effect:
+ * 1. Attaches the control to the form when visible
+ * 2. Detaches the control from the form when hidden and strategy is 'remove'
+ * 3. Manages control values based on the specified valueStrategy when visibility changes
+ *
+ * @param options Configuration object for hidden effect
+ * @param options.content Signal containing control configuration
+ * @param options.name Signal containing the name of the control
+ * @param options.controlInstance Signal with the form control instance
+ * @param options.hiddenSignal Signal that indicates if the control should be hidden
+ * @param options.hideStrategySignal Signal with the strategy for handling hidden controls
+ * @param options.valueStrategySignal Signal with the strategy for handling control values
+ * @param options.parentValueStrategySignal Signal with the parent's value strategy
+ * @param options.attachFunction Function to call when control should be attached
+ * @param options.detachFunction Function to call when control should be detached
+ * @param options.valueHandleFunction Function to handle control value based on strategy
+ */
+function hiddenEffect(options) {
+    const parentContainer = inject(ControlContainer);
+    const parentFormGroup = parentContainer.control;
+    effect(() => {
+        options.controlInstance();
+        const isHidden = options.hiddenSignal();
+        const hideStrategy = options.hideStrategySignal();
+        const valueStrategy = options.valueStrategySignal() ?? options.parentValueStrategySignal();
+        const formControl = untracked(() => parentFormGroup?.get(options.name()));
+        // Re-attach control
+        // On initial render the form control will not be attached, but we need it for the hide strategy "keep"
+        if (!formControl && (!isHidden || hideStrategy === 'keep')) {
+            untracked(() => {
+                options.attachFunction();
+            });
+            return;
+        }
+        // Control is already detached
+        if (hideStrategy === 'remove' && !formControl) {
+            return;
+        }
+        // Remove control
+        if (hideStrategy === 'remove' && isHidden) {
+            untracked(() => {
+                options.detachFunction();
+            });
+        }
+        // Only thing left to check is value strategy
+        untracked(() => {
+            options.valueHandleFunction(valueStrategy);
+        });
+    });
+}
+
+/**
+ * Computes a reactive array of validators based on control content
+ *
+ * Extracts validator keys from content and maps them to actual validator functions
+ * by looking them up in the validator registration service.
+ *
+ * @param content Signal containing control configuration with validator keys
+ * @returns Computed signal that resolves to an array of validator functions
+ */
+function withValidators(content) {
+    const validatorRegistrations = inject(NGX_VALIDATOR_RESOLVER).registrations;
+    return computed(() => {
+        const validatorKeys = content().validators ?? [];
+        return validatorKeys.flatMap((key) => validatorRegistrations().get(key) ?? []);
+    });
+}
+/**
+ * Computes a reactive array of async validators based on control content
+ *
+ * Extracts async validator keys from content and maps them to actual async validator
+ * functions by looking them up in the validator registration service.
+ *
+ * @param content Signal containing control configuration with async validator keys
+ * @returns Computed signal that resolves to an array of async validator functions
+ */
+function withAsyncValidators(content) {
+    const asyncValidatorRegistrations = inject(NGX_VALIDATOR_RESOLVER).asyncRegistrations;
+    return computed(() => {
+        const validatorKeys = content().asyncValidators ?? [];
+        return validatorKeys.flatMap((key) => asyncValidatorRegistrations().get(key) ?? []);
+    });
+}
+
+class NgxFbConfigurationService {
+    _config = inject(NGX_FW_CONFIG_RESOLVED);
+    get testIdBuilder() {
+        return this._config.testIdBuilderFn;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: NgxFbConfigurationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: NgxFbConfigurationService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: NgxFbConfigurationService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+/**
+ * Creates a computed signal that extracts the ID for testing purposes
+ *
+ * This utility function derives a test identifier from a form control's content,
+ * which can be used for targeting elements in automated tests.
+ *
+ * @template T - Type extending NgxFbBaseContent
+ * @param content - Signal containing the control or group content configuration
+ * @param name - Signal containing the name of the control
+ * @param testIdBuilder - Signal holding a testIdBuilder function
+ * @returns Computed signal that resolves to the element's ID for testing
+ */
+function withTestId(content, name, testIdBuilder) {
+    const parentGroupDirective = inject((NgxfbGroupDirective), {
+        optional: true,
+        skipSelf: true,
+    });
+    const globalConfig = inject(NgxFbConfigurationService);
+    const globalTestIdBuilder = globalConfig.testIdBuilder;
+    return computed(() => {
+        const contentValue = content();
+        const id = name();
+        const parentGroupTestId = parentGroupDirective?.testId();
+        const builderFn = testIdBuilder();
+        if (builderFn) {
+            return builderFn(contentValue, id, parentGroupTestId);
+        }
+        if (globalTestIdBuilder) {
+            return globalTestIdBuilder(contentValue, id, parentGroupTestId);
+        }
+        if (!parentGroupTestId) {
+            return id;
+        }
+        return [parentGroupTestId, id].join('-');
+    });
+}
+
+/**
+ * Creates a computed signal for the control's update strategy
+ *
+ * This function determines when form controls should update:
+ * - Uses the control's specified updateOn strategy if defined
+ * - Falls back to parent group's strategy when not defined in the control
+ * - Handles inheritance of update strategies through the form hierarchy
+ * - Uses the application's default strategy as final fallback
+ *
+ * Update strategies control when form values and validation happen:
+ * - 'change': Update on every change event (default Angular behavior)
+ * - 'blur': Update when the control loses focus
+ * - 'submit': Update only when the form is submitted
+ *
+ * @param content Signal containing the NgxFbAbstractControl with possible updateOn configuration
+ * @returns Computed signal providing the resolved update strategy
+ */
+function withUpdateStrategy(content) {
+    const parentGroupDirective = inject((NgxfbGroupDirective), {
+        optional: true,
+        skipSelf: true,
+    });
+    const defaultUpdateStrategy = inject(NGX_FW_DEFAULT_UPDATE_STRATEGY);
+    const parentGroupUpdateStrategy = computed(() => {
+        return parentGroupDirective?.updateStrategy();
+    });
+    return computed(() => {
+        return (content().updateOn ?? parentGroupUpdateStrategy() ?? defaultUpdateStrategy);
+    });
+}
+
+/**
+ * Computes a dynamic title for a form control based on expression evaluation
+ *
+ * @param content Signal containing control configuration with dynamicTitle property
+ * @returns Computed signal that resolves to the evaluated dynamic title string or undefined
+ */
+function withDynamicTitle(content) {
+    const formService = inject(FormService);
+    const expressionService = inject(ExpressionService);
+    const dynamicTitleAst = computed(() => {
+        const dynamicTitleOption = content().dynamicTitle;
+        if (typeof dynamicTitleOption !== 'string') {
+            return null;
+        }
+        return expressionService.parseExpressionToAst(dynamicTitleOption);
+    });
+    const dynamicTitleFunction = computed(() => {
+        const dynamicTitleOption = content().dynamicTitle;
+        if (typeof dynamicTitleOption !== 'function') {
+            return null;
+        }
+        return dynamicTitleOption;
+    });
+    return computed(() => {
+        const reactiveFormValues = formService.formValue();
+        const currentSynchronousFormValues = formService.formGroup
+            .value;
+        const evaluationContext = reactiveFormValues ?? currentSynchronousFormValues;
+        const dynamicTitleFn = dynamicTitleFunction();
+        if (dynamicTitleFn) {
+            return dynamicTitleFn(evaluationContext);
+        }
+        const ast = dynamicTitleAst();
+        if (!ast) {
+            return undefined;
+        }
+        const title = expressionService.evaluateExpression(ast, evaluationContext);
+        return title;
+    });
+}
+
+/**
+ * Core directive for creating form groups in ngx-formbar.
+ *
+ * This directive handles the integration between Angular's reactive forms and
+ * ngx-formbar's declarative configuration for FormGroups. It manages:
+ *
+ * - Group registration and lifecycle within parent forms
+ * - State management (hidden, disabled, readonly)
+ * - Validation setup
+ * - Test ID generation
+ * - Dynamic title support
+ * - Child control management
+ *
+ * Use this directive with hostDirectives in your custom group components:
+ *
+ * ```typescript
+ * @Component({
+ *   hostDirectives: [
+ *     {
+ *       directive: NgxfbGroupDirective,
+ *       inputs: ['content', 'name'],
+ *     }
+ *   ],
+ * })
+ * export class GroupComponent {
+ *   private readonly control = inject(NgxfbGroupDirective<Group>);
+ *   readonly content = this.control.content;
+ *   readonly controls = this.control.controls;
+ * }
+ * ```
+ *
+ * @template T Type of the group configuration, must extend NgxFbFormGroup
+ */
+class NgxfbGroupDirective {
+    parentContainer = inject(ControlContainer);
+    parentGroupDirective = inject((NgxfbGroupDirective), {
+        optional: true,
+        skipSelf: true,
+    });
+    /**
+     * Required input containing the group configuration
+     * Defines properties like type, controls, validation, and state expressions
+     */
+    content = input.required();
+    /**
+     * Required input for the group's name
+     * Used as the key in the parent FormGroup
+     */
+    name = input.required();
+    /**
+     * Signal for managing the visibility handling strategy ('auto' or 'manual')
+     * - 'auto': directive handles visibility via hidden attribute
+     * - 'manual': component handles visibility in its own template
+     */
+    visibilityHandling = signal('auto');
+    /**
+     * Signal for managing the disabled state handling strategy ('auto' or 'manual')
+     * - 'auto': directive handles disabled state via FormGroup methods
+     * - 'manual': component handles disabled state in its own template
+     */
+    disabledHandling = signal('auto');
+    /**
+     * Signal for the test ID builder function
+     * Used to customize how test IDs are generated
+     */
+    testIdBuilder = signal(undefined);
+    /**
+     * Computed test ID derived from the group's name
+     * Used for automated testing identification
+     *
+     * Access this in your component template:
+     * ```html
+     * <div [attr.data-testid]="testId()">...</div>
+     * ```
+     */
+    testId = withTestId(this.content, this.name, this.testIdBuilder);
+    /**
+     * Computed signal for the group's hide strategy
+     * Determines how the group behaves when hidden (keep or remove from form)
+     */
+    hideStrategy = computed(() => this.content().hideStrategy);
+    /**
+     * Computed signal for the group's value strategy
+     * Determines how the group's values are managed when visibility changes:
+     * - 'last': preserves last values
+     * - 'default': reverts to default values
+     * - 'reset': clears values
+     */
+    valueStrategy = computed(() => this.content().valueStrategy ?? this.parentValueStrategy());
+    /**
+     * Computed signal for the parent's value strategy
+     * Used when group doesn't define its own strategy
+     */
+    parentValueStrategy = computed(() => this.parentGroupDirective?.valueStrategy());
+    /**
+     * Computed signal for the hidden state
+     * True when the group should be hidden based on 'hidden' expression
+     *
+     * Use this in your component when implementing custom visibility handling:
+     * ```typescript
+     * readonly isHidden = this.control.isHidden;
+     * ```
+     */
+    isHidden = withHiddenState(this.content);
+    /**
+     * Computed signal for the hidden attribute
+     * Used in DOM binding to show/hide the group element
+     */
+    hiddenAttribute = withHiddenAttribute({
+        hiddenSignal: this.isHidden,
+        hiddenHandlingSignal: this.visibilityHandling,
+    });
+    /**
+     * Computed signal for the disabled state
+     * True when the group should be disabled based on 'disabled' expression
+     *
+     * Use this in your component for custom disabled state handling:
+     * ```typescript
+     * readonly disabled = this.control.disabled;
+     * ```
+     */
+    disabled = withDisabledState(this.content);
+    /**
+     * Computed signal for the readonly state
+     * True when the group should be readonly based on 'readonly' expression
+     *
+     * Use this in your component to implement readonly behavior:
+     * ```typescript
+     * readonly readonly = this.control.readonly;
+     * ```
+     */
+    readonly = withReadonlyState(this.content);
+    /**
+     * Computed signal for the update strategy
+     * Determines when form values are updated ('change', 'blur', or 'submit')
+     */
+    updateStrategy = withUpdateStrategy(this.content);
+    /**
+     * Computed signal for the dynamic title
+     * Contains the evaluated result of the dynamicTitle expression
+     *
+     * Use this in your component to display dynamic titles:
+     * ```typescript
+     * readonly displayTitle = computed(() => {
+     *   const dynamic = this.control.dynamicTitle();
+     *   return dynamic || this.content().title || '';
+     * });
+     * ```
+     */
+    dynamicTitle = withDynamicTitle(this.content);
+    /**
+     * Computed signal for the validators
+     * Contains validator functions derived from configuration keys
+     */
+    validators = withValidators(this.content);
+    /**
+     * Computed signal for the async validators
+     * Contains async validator functions derived from configuration keys
+     */
+    asyncValidators = withAsyncValidators(this.content);
+    /**
+     * Computed signal for the form group instance
+     * Creates a new FormGroup with appropriate validators and configuration
+     */
+    groupInstance = computed(() => {
+        const validators = this.validators();
+        const asyncValidators = this.asyncValidators();
+        const updateOn = this.updateStrategy();
+        return new FormGroup({}, {
+            validators,
+            asyncValidators,
+            updateOn,
+        });
+    });
+    /**
+     * Computed signal for the title of the group
+     * Returns the static title from the configuration
+     */
+    title = computed(() => this.content().title);
+    /**
+     * Computed signal for the child controls of the group
+     * Returns an array of [name, control] pairs for rendering
+     */
+    controls = computed(() => Object.entries(this.content().controls));
+    /**
+     * Access to the parent FormGroup containing this group
+     */
+    get parentFormGroup() {
+        return this.parentContainer.control;
+    }
+    /**
+     * Access to this group's FormGroup instance
+     * Use this to access validation state, errors, and other FormGroup methods
+     */
+    get formGroup() {
+        return this.parentFormGroup?.get(this.name());
+    }
+    constructor() {
+        hiddenEffect({
+            content: this.content,
+            name: this.name,
+            controlInstance: this.groupInstance,
+            hiddenSignal: this.isHidden,
+            hideStrategySignal: this.hideStrategy,
+            valueStrategySignal: this.valueStrategy,
+            parentValueStrategySignal: this.parentValueStrategy,
+            attachFunction: this.setGroup.bind(this),
+            detachFunction: this.removeGroup.bind(this),
+            valueHandleFunction: this.handleValue.bind(this),
+        });
+        disabledEffect({
+            disabledSignal: this.disabled,
+            disabledHandlingSignal: this.disabledHandling,
+            enableFunction: this.enableGroup.bind(this),
+            disableFunction: this.disableGroup.bind(this),
+        });
+    }
+    /**
+     * Sets the visibility handling strategy
+     * Determines if visibility should be managed by the component (manual) or by Formbar (auto)
+     *
+     * Use 'manual' when implementing custom visibility handling in your component:
+     * ```typescript
+     * constructor() {
+     *   this.control.setVisibilityHandling('manual');
+     * }
+     * ```
+     *
+     * @param visibilityHandling Strategy for handling visibility ('auto' or 'manual')
+     */
+    setVisibilityHandling(visibilityHandling) {
+        this.visibilityHandling.set(visibilityHandling);
+    }
+    /**
+     * Sets the disabled handling strategy
+     * Determines if disabled state should be managed by the component (manual) or by Formbar (auto)
+     *
+     * Use 'manual' when implementing custom disabled state handling in your component:
+     * ```typescript
+     * constructor() {
+     *   this.control.setDisabledHandling('manual');
+     * }
+     * ```
+     *
+     * @param disabledHandling Strategy for handling disabled state ('auto' or 'manual')
+     */
+    setDisabledHandling(disabledHandling) {
+        this.disabledHandling.set(disabledHandling);
+    }
+    /**
+     * Sets the function to use for building a test id.
+     * This allows custom test ID generation strategies to be used.
+     *
+     * @param builderFn Function that returns the test id
+     */
+    setTestIdBuilderFn(builderFn) {
+        this.testIdBuilder.set(builderFn);
+    }
+    /**
+     * Registers this group with the parent FormGroup
+     * @private
+     */
+    setGroup() {
+        this.parentFormGroup?.setControl(this.name(), this.groupInstance(), {
+            emitEvent: false,
+        });
+    }
+    /**
+     * Removes this group from the parent FormGroup
+     * @private
+     */
+    removeGroup() {
+        const id = this.name();
+        const formGroup = this.formGroup;
+        // Check if control exists immediately before attempting removal
+        if (formGroup) {
+            this.parentFormGroup?.removeControl(id, { emitEvent: false });
+        }
+    }
+    /**
+     * Enables the form group
+     * @private
+     */
+    enableGroup() {
+        const formGroup = this.groupInstance();
+        formGroup.enable({ emitEvent: false });
+    }
+    /**
+     * Disables the form group
+     * @private
+     */
+    disableGroup() {
+        const formGroup = this.groupInstance();
+        formGroup.disable({ emitEvent: false });
+    }
+    /**
+     * Handles value changes when visibility changes
+     * @param valueStrategy Strategy for handling values
+     * @private
+     */
+    handleValue(valueStrategy) {
+        switch (valueStrategy) {
+            case 'last':
+                break;
+            case 'default':
+                break;
+            default:
+                // Instead of resetting  the group, we need to reset the controls individually
+                // to allow them to overwrite the value strategy
+                // If a control doesn't have a value strategy, we reset it
+                Object.entries(this.content().controls).forEach(([name, control]) => {
+                    if (!('valueStrategy' in control)) {
+                        return;
+                    }
+                    if (control.valueStrategy) {
+                        return;
+                    }
+                    const formControl = this.formGroup?.get(name);
+                    if (formControl) {
+                        formControl.reset(undefined, { emitEvent: false });
+                    }
+                });
+                break;
+        }
+    }
+    /**
+     * Removes the group when the directive is destroyed
+     */
+    ngOnDestroy() {
+        this.removeGroup();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: NgxfbGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.15", type: NgxfbGroupDirective, isStandalone: true, selector: "[ngxfbGroup]", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.hidden": "hiddenAttribute()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: NgxfbGroupDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngxfbGroup]',
+                    host: {
+                        '[attr.hidden]': 'hiddenAttribute()',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Computes a reactive disabled state based on control content
+ *
+ * The disabled state is determined using the following priority:
+ * 1. If content.disabled is a boolean, that value is used directly
+ * 2. If content.disabled is an expression string, it's parsed to AST and evaluated
+ *    against the current form values
+ * 3. If no disabled property is defined, the control inherits the disabled state
+ *    from its parent group
+ *
+ * This hierarchical inheritance ensures that child controls are automatically
+ * disabled when their parent group is disabled, unless explicitly overridden.
+ *
+ * @param content Signal containing control configuration with potential disabled property
+ * @returns Computed signal that resolves to boolean disabled state
+ */
+function withDisabledState(content) {
+    const formService = inject(FormService);
+    const expressionService = inject(ExpressionService);
+    const parentGroupDirective = inject((NgxfbGroupDirective), {
+        optional: true,
+        skipSelf: true,
+    });
+    const parentGroupIsDisabled = computed(() => {
+        const parentGroup = parentGroupDirective;
+        if (!parentGroup) {
+            return false;
+        }
+        return parentGroup.disabled();
+    });
+    const disabledAst = computed(() => {
+        const disabledOption = content().disabled;
+        if (typeof disabledOption !== 'string') {
+            return null;
+        }
+        return expressionService.parseExpressionToAst(disabledOption);
+    });
+    const disabledBool = computed(() => {
+        const disabledOption = content().disabled;
+        if (typeof disabledOption !== 'boolean') {
+            return null;
+        }
+        return disabledOption;
+    });
+    const disabledFunction = computed(() => {
+        const disabledOption = content().disabled;
+        if (typeof disabledOption !== 'function') {
+            return null;
+        }
+        return disabledOption;
+    });
+    return computed(() => {
+        const disabledStatic = disabledBool();
+        if (disabledStatic !== null) {
+            return disabledStatic;
+        }
+        const reactiveFormValues = formService.formValue();
+        const currentSynchronousFormValues = formService.formGroup
+            .value;
+        const evaluationContext = reactiveFormValues ?? currentSynchronousFormValues;
+        const disableFn = disabledFunction();
+        if (disableFn) {
+            return disableFn(evaluationContext);
+        }
+        const ast = disabledAst();
+        if (!ast) {
+            return parentGroupIsDisabled();
+        }
+        const disabled = expressionService.evaluateExpression(ast, evaluationContext) ?? false;
+        return disabled;
+    });
+}
+/**
+ * Creates an effect that manages control/group disabled state
+ *
+ * @param options Configuration object for disabled effect
+ * @param options.disabledSignal Signal that indicates if the component should be disabled
+ * @param options.disabledHandlingSignal Signal that determines how disabled state changes should be handled
+ * @param options.enableFunction Function to call when component should be enabled
+ * @param options.disableFunction Function to call when component should be disabled
+ */
+function disabledEffect(options) {
+    effect(() => {
+        const disabled = options.disabledSignal();
+        const disabledHandling = options.disabledHandlingSignal();
+        if (disabledHandling === 'manual') {
+            return;
+        }
+        if (!disabled) {
+            untracked(() => {
+                options.enableFunction();
+            });
+            return;
+        }
+        untracked(() => {
+            options.disableFunction();
+        });
+    });
+}
+
+function withComputedValue(content) {
+    const formService = inject(FormService);
+    const expressionService = inject(ExpressionService);
+    const parentContainer = inject(ControlContainer);
+    const computedValueAst = computed(() => {
+        const computedValueOption = content().computedValue;
+        if (typeof computedValueOption !== 'string') {
+            return null;
+        }
+        return expressionService.parseExpressionToAst(computedValueOption);
+    });
+    const computedValueFunction = computed(() => {
+        const computedValueOption = content().computedValue;
+        if (typeof computedValueOption !== 'function') {
+            return null;
+        }
+        return computedValueOption;
+    });
+    return computed(() => {
+        const value = formService.formValue() ?? parentContainer.value;
+        const computedValueFn = computedValueFunction();
+        if (computedValueFn) {
+            return computedValueFn(value);
+        }
+        const ast = computedValueAst();
+        if (!ast) {
+            return undefined;
+        }
+        return expressionService.evaluateExpression(ast, value);
+    });
+}
+function setComputedValueEffect(options) {
+    const parentContainer = inject(ControlContainer);
+    effect(() => {
+        const control = options.controlInstance();
+        const value = options.computeValueSignal();
+        if (!value && parentContainer.pristine) {
+            return;
+        }
+        control.setValue(value);
+    });
+}
+
+/**
+ * Computes a dynamic label for a form control based on expression evaluation
+ *
+ * @param content Signal containing control configuration with dynamicLabel property
+ * @returns Computed signal that resolves to the evaluated dynamic label string or undefined
+ */
+function withDynamicLabel(content) {
+    const formService = inject(FormService);
+    const expressionService = inject(ExpressionService);
+    const dynamicLabelAst = computed(() => {
+        const dynamicLabelOption = content().dynamicLabel;
+        if (typeof dynamicLabelOption !== 'string') {
+            return null;
+        }
+        return expressionService.parseExpressionToAst(dynamicLabelOption);
+    });
+    const dynamicLabelFunction = computed(() => {
+        const dynamicLabelOption = content().dynamicLabel;
+        if (typeof dynamicLabelOption !== 'function') {
+            return null;
+        }
+        return dynamicLabelOption;
+    });
+    return computed(() => {
+        const reactiveFormValues = formService.formValue();
+        const currentSynchronousFormValues = formService.formGroup
+            .value;
+        const evaluationContext = reactiveFormValues ?? currentSynchronousFormValues;
+        const dynamicLabelFn = dynamicLabelFunction();
+        if (dynamicLabelFn) {
+            return dynamicLabelFn(evaluationContext);
+        }
+        const ast = dynamicLabelAst();
+        if (!ast) {
+            return undefined;
+        }
+        const label = expressionService.evaluateExpression(ast, evaluationContext);
+        return label;
+    });
+}
+
+/**
+ * Core directive for creating form controls in ngx-formbar.
+ *
+ * This directive handles the integration between Angular's reactive forms and
+ * ngx-formbar's declarative configuration. It manages:
+ *
+ * - Control registration and lifecycle within parent form groups
+ * - State management (hidden, disabled, readonly)
+ * - Validation setup
+ * - Dynamic value computation
+ * - Test ID generation
+ * - Dynamic label support
+ *
+ * Use this directive with hostDirectives in your custom control components:
+ *
+ * ```typescript
+ * @Component({
+ *   hostDirectives: [
+ *     {
+ *       directive: NgxfbControlDirective,
+ *       inputs: ['content', 'name'],
+ *     }
+ *   ],
+ * })
+ * export class TextControlComponent {
+ *   private readonly control = inject(NgxfbControlDirective<TextControl>);
+ *   readonly content = this.control.content;
+ *   readonly name = this.control.name;
+ * }
+ * ```
+ *
+ * @template T Type of the control configuration, must extend NgxFbControl
+ */
+class NgxfbControlDirective {
+    parentContainer = inject(ControlContainer);
+    parentGroupDirective = inject((NgxfbGroupDirective), {
+        optional: true,
+    });
+    /**
+     * Required input containing the control configuration
+     * Defines properties like ID, default value, validation, and state expressions
+     */
+    content = input.required();
+    /**
+     * Required input for the controls name
+     */
+    name = input.required();
+    visibilityHandling = signal('auto');
+    disabledHandling = signal('auto');
+    testIdBuilder = signal(undefined);
+    /**
+     * Computed test ID derived from the control's ID
+     * Used for automated testing identification
+     *
+     * Access this in your component template:
+     * ```html
+     * <input [attr.data-testid]="testId()" ... />
+     * ```
+     */
+    testId = withTestId(this.content, this.name, this.testIdBuilder);
+    /**
+     * Computed signal for the control's hide strategy
+     * Determines how the control behaves when hidden (keep or remove from form)
+     */
+    hideStrategy = computed(() => this.content().hideStrategy);
+    /**
+     * Computed signal for the control's value strategy
+     * Determines how the control's value is managed when visibility changes
+     */
+    valueStrategy = computed(() => this.content().valueStrategy ?? this.parentValueStrategy());
+    /**
+     * Computed signal for the parent's value strategy
+     * Used when control doesn't define its own strategy
+     */
+    parentValueStrategy = computed(() => this.parentGroupDirective?.valueStrategy());
+    /**
+     * Computed signal for the hidden state
+     * True when the control should be hidden based on 'hidden' expression
+     *
+     * Use this in your component when implementing custom visibility handling:
+     * ```typescript
+     * readonly isHidden = this.control.isHidden;
+     * ```
+     */
+    isHidden = withHiddenState(this.content);
+    /**
+     * Computed signal for the hidden attribute
+     * Used in DOM binding to show/hide the control element
+     */
+    hiddenAttribute = withHiddenAttribute({
+        hiddenSignal: this.isHidden,
+        hiddenHandlingSignal: this.visibilityHandling,
+    });
+    /**
+     * Computed signal for the disabled state
+     * True when the control should be disabled based on 'disabled' expression
+     *
+     * Use this in your component for custom disabled state handling:
+     * ```typescript
+     * readonly disabled = this.control.disabled;
+     * ```
+     */
+    disabled = withDisabledState(this.content);
+    /**
+     * Computed signal for the readonly state
+     * True when the control should be readonly based on 'readonly' expression
+     *
+     * Use this in your component to implement readonly behavior:
+     * ```html
+     * <input [attr.readonly]="readonly() || null" ... />
+     * ```
+     */
+    readonly = withReadonlyState(this.content);
+    /**
+     * Computed signal for the update strategy
+     * Determines when form values are updated ('change', 'blur', or 'submit')
+     */
+    updateStrategy = withUpdateStrategy(this.content);
+    /**
+     * Computed signal for the dynamic label
+     * Contains the evaluated result of the dynamicLabel expression
+     *
+     * Use this in your component to display dynamic labels:
+     * ```typescript
+     * readonly displayLabel = computed(() => {
+     *   const dynamic = this.control.dynamicLabel();
+     *   return dynamic || this.content().label;
+     * });
+     * ```
+     */
+    dynamicLabel = withDynamicLabel(this.content);
+    /**
+     * Computed signal for the validators
+     * Contains validator functions derived from configuration keys
+     */
+    validators = withValidators(this.content);
+    /**
+     * Computed signal for the async validators
+     * Contains async validator functions derived from configuration keys
+     */
+    asyncValidators = withAsyncValidators(this.content);
+    /**
+     * Computed signal for the computed value
+     * Contains the evaluated result of computedValue expressions
+     */
+    computedValue = withComputedValue(this.content);
+    /**
+     * Computed signal for the form control instance
+     * Creates a new FormControl with appropriate validators and configuration
+     */
+    controlInstance = computed(() => {
+        const content = this.content();
+        const validators = this.validators();
+        const asyncValidators = this.asyncValidators();
+        const updateOn = this.updateStrategy();
+        return new FormControl(content.defaultValue, {
+            nonNullable: content.nonNullable,
+            validators,
+            asyncValidators,
+            updateOn,
+        });
+    });
+    /**
+     * Access to the parent FormGroup containing this control
+     */
+    get parentFormGroup() {
+        return this.parentContainer.control;
+    }
+    /**
+     * Access to this control's FormControl instance
+     * Use this to access validation state, errors, and other FormControl methods
+     *
+     * Example:
+     * ```typescript
+     * get hasError() {
+     *   return this.control.formControl?.hasError('required');
+     * }
+     * ```
+     */
+    get formControl() {
+        const id = this.name();
+        if (!this.parentFormGroup?.contains(id)) {
+            return null;
+        }
+        return this.parentFormGroup.get(id);
+    }
+    constructor() {
+        hiddenEffect({
+            content: this.content,
+            name: this.name,
+            controlInstance: this.controlInstance,
+            hiddenSignal: this.isHidden,
+            hideStrategySignal: this.hideStrategy,
+            valueStrategySignal: this.valueStrategy,
+            parentValueStrategySignal: this.parentValueStrategy,
+            attachFunction: this.setControl.bind(this),
+            detachFunction: this.removeControl.bind(this),
+            valueHandleFunction: this.handleValue.bind(this),
+        });
+        disabledEffect({
+            disabledSignal: this.disabled,
+            disabledHandlingSignal: this.disabledHandling,
+            enableFunction: this.enableControl.bind(this),
+            disableFunction: this.disableControl.bind(this),
+        });
+        setComputedValueEffect({
+            controlInstance: this.controlInstance,
+            computeValueSignal: this.computedValue,
+        });
+    }
+    /**
+     * Sets the visibility handling strategy
+     * Determines if visibility should be managed by the component (manual) or by Formbar (auto)
+     *
+     * Use 'manual' when implementing custom visibility handling in your component:
+     * ```typescript
+     * constructor() {
+     *   this.control.setVisibilityHandling('manual');
+     * }
+     * @param visibilityHandling Strategy for handling visibility ('auto' or 'manual')
+     */
+    setVisibilityHandling(visibilityHandling) {
+        this.visibilityHandling.set(visibilityHandling);
+    }
+    /**
+     * Sets the disabled handling strategy
+     * Determines if disabled state should be managed by the component (manual) or by Formbar (auto)
+     *
+     * @param disabledHandling Strategy for handling disabled state ('auto' or 'manual')
+     */
+    setDisabledHandling(disabledHandling) {
+        this.disabledHandling.set(disabledHandling);
+    }
+    /**
+     * Sets the function to use for building a test id.
+     *
+     * @param builderFn Function that returns the test id
+     */
+    setTestIdBuilderFn(builderFn) {
+        this.testIdBuilder.set(builderFn);
+    }
+    setControl() {
+        this.parentFormGroup?.setControl(this.name(), this.controlInstance(), {
+            emitEvent: false,
+        });
+    }
+    removeControl() {
+        const id = this.name();
+        const formControl = this.formControl;
+        // Check if control exists immediately before attempting removal
+        if (formControl) {
+            this.parentFormGroup?.removeControl(id, { emitEvent: false });
+        }
+    }
+    enableControl() {
+        const formControl = this.controlInstance();
+        formControl.enable({ emitEvent: false });
+    }
+    disableControl() {
+        const formControl = this.controlInstance();
+        formControl.disable({ emitEvent: false });
+    }
+    handleValue(valueStrategy) {
+        switch (valueStrategy) {
+            case 'last':
+                break;
+            case 'reset':
+                this.controlInstance().reset(undefined, { emitEvent: false });
+                break;
+            default:
+                this.controlInstance().setValue(this.content().defaultValue);
+                break;
+        }
+    }
+    ngOnDestroy() {
+        this.removeControl();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: NgxfbControlDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.15", type: NgxfbControlDirective, isStandalone: true, selector: "[ngxfbControl]", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.hidden": "hiddenAttribute()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: NgxfbControlDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngxfbControl]',
+                    host: {
+                        '[attr.hidden]': 'hiddenAttribute()',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Core directive for non-form elements that appear in forms.
+ *
+ * Block elements represent UI components that don't contribute to the form's value
+ * but provide information or functionality within forms, such as:
+ * - Information blocks
+ * - Images
+ * - Dividers
+ * - Help text
+ * - Custom UI elements
+ *
+ * This directive handles visibility conditions and test ID generation for block elements.
+ *
+ * Use this directive with hostDirectives in your custom block components:
+ *
+ * ```typescript
+ * @Component({
+ *   hostDirectives: [
+ *     {
+ *       directive: NgxfbBlockDirective,
+ *       inputs: ['content', 'name'],
+ *     }
+ *   ],
+ * })
+ * export class InfoBlockComponent {
+ *   private readonly blockDirective = inject(NgxfbBlockDirective<InfoBlock>);
+ *   readonly content = this.blockDirective.content;
+ *   readonly message = computed(() => this.content().message);
+ * }
+ * ```
+ *
+ * @template T Type of the block configuration, must extend NgxFbBaseContent
+ */
+class NgxfbBlockDirective {
+    /**
+     * Reference to the parent form container.
+     * Provides access to the form that contains this block.
+     */
+    parentContainer = inject(ControlContainer);
+    /**
+     * Required input containing the block configuration.
+     * Defines properties like type, hidden condition, and custom properties.
+     */
+    content = input.required();
+    /**
+     * Required input for the block's name.
+     * Used as an identifier within the form.
+     */
+    name = input.required();
+    /**
+     * Signal for managing the visibility handling strategy ('auto' or 'manual').
+     * - 'auto': directive handles visibility via hidden attribute
+     * - 'manual': component handles visibility in its own template
+     */
+    visibilityHandling = signal('auto');
+    /**
+     * Signal for the test ID builder function.
+     * Used to customize how test IDs are generated.
+     */
+    testIdBuilder = signal(undefined);
+    /**
+     * Computed test ID derived from the block's name.
+     * Used for automated testing identification.
+     *
+     * Access this in your component template:
+     * ```html
+     * <div [attr.data-testid]="testId()">...</div>
+     * ```
+     */
+    testId = withTestId(this.content, this.name, this.testIdBuilder);
+    /**
+     * Computed signal for the hidden state.
+     * True when the block should be hidden based on 'hidden' expression.
+     *
+     * Use this in your component when implementing custom visibility handling:
+     * ```typescript
+     * readonly isHidden = this.blockDirective.isHidden;
+     * ```
+     */
+    isHidden = withHiddenState(this.content);
+    /**
+     * Computed signal for the hidden attribute.
+     * Used in DOM binding to show/hide the block element.
+     */
+    hiddenAttribute = withHiddenAttribute({
+        hiddenSignal: this.isHidden,
+        hiddenHandlingSignal: this.visibilityHandling,
+    });
+    /**
+     * Returns the parent form container.
+     * Provides access to the form instance that contains this block.
+     *
+     * Use this to access form data or methods:
+     * ```typescript
+     * const formData = this.blockDirective.rootForm.control.value;
+     * ```
+     */
+    get rootForm() {
+        return this.parentContainer;
+    }
+    /**
+     * Sets the visibility handling strategy.
+     * Determines if visibility should be managed by the component (manual) or by Formbar (auto).
+     *
+     * Use 'manual' when implementing custom visibility handling in your component:
+     * ```typescript
+     * constructor() {
+     *   this.blockDirective.setVisibilityHandling('manual');
+     * }
+     * ```
+     *
+     * @param visibilityHandling Strategy for handling visibility ('auto' or 'manual')
+     */
+    setVisibilityHandling(visibilityHandling) {
+        this.visibilityHandling.set(visibilityHandling);
+    }
+    /**
+     * Sets the function to use for building a test id.
+     * This allows custom test ID generation strategies to be used.
+     *
+     * @param builderFn Function that returns the test id
+     */
+    setTestIdBuilderFn(builderFn) {
+        this.testIdBuilder.set(builderFn);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: NgxfbBlockDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.15", type: NgxfbBlockDirective, isStandalone: true, selector: "[ngxfbBlock]", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.hidden": "hiddenAttribute()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: NgxfbBlockDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngxfbBlock]',
+                    host: {
+                        '[attr.hidden]': 'hiddenAttribute()',
+                    },
+                }]
+        }] });
+
+/*
+ * Public API Surface of core
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NGX_FW_ASYNC_VALIDATOR_REGISTRATIONS, NGX_FW_ASYNC_VALIDATOR_REGISTRATIONS_RESOLVED, NGX_FW_COMPONENT_REGISTRATIONS, NGX_FW_COMPONENT_RESOLVER, NGX_FW_CONFIG, NGX_FW_CONFIG_RESOLVED, NGX_FW_DEFAULT_ASYNC_VALIDATOR_REGISTRATIONS, NGX_FW_DEFAULT_CONFIG, NGX_FW_DEFAULT_UPDATE_STRATEGY, NGX_FW_DEFAULT_VALIDATOR_REGISTRATIONS, NGX_FW_VALIDATOR_REGISTRATIONS, NGX_FW_VALIDATOR_REGISTRATIONS_RESOLVED, NGX_VALIDATOR_RESOLVER, NgxfbAbstractControlDirective, NgxfbBlockDirective, NgxfbControlDirective, NgxfbFormComponent, NgxfbGroupDirective, defineFormbarConfig, provideFormbar };
+//# sourceMappingURL=ngx-formbar-core.mjs.map