mn-angular-lib 0.0.17 → 0.0.23

package/fesm2022/mn-angular-lib.mjs

@@ -1,8 +1,12 @@
 import * as i0 from '@angular/core';
-import { signal, effect, Injectable, InjectionToken, inject, computed, Optional, Inject, Input, ChangeDetectionStrategy, Component } from '@angular/core';
-import { BehaviorSubject } from 'rxjs';
+import { signal, effect, Injectable, InjectionToken, inject, computed, Optional, Inject, Input, ChangeDetectionStrategy, Component, HostBinding, Self, APP_INITIALIZER, SkipSelf, Attribute, Directive } from '@angular/core';
+import { BehaviorSubject, firstValueFrom } from 'rxjs';
 import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
+import { CommonModule, NgClass, NgOptimizedImage } from '@angular/common';
+import { tv } from 'tailwind-variants';
+import * as i1$1 from '@angular/forms';
+import { Validators } from '@angular/forms';
+import * as i1$2 from '@angular/common/http';
 
 /**
  * MnThemeService is responsible for managing the theme configuration of the application.
@@ -179,7 +183,7 @@ const DEFAULT_MN_ALERT_CONFIG = {
         default: 'alert'
     },
     icons: {},
-    defaultDuration: 4000,
+    fallbackDuration: 4000,
     finalize: (a) => a
 };
 
@@ -201,7 +205,7 @@ class MnAlertStore {
     alerts$ = this._alerts$.asObservable();
     show(partial) {
         // Ensure every alert has a numeric duration: use provided or fall back to per-kind default
-        const computedDuration = partial.duration ?? DEFAULT_MN_ALERT_CONFIG.durations[partial.kind] ?? DEFAULT_MN_ALERT_CONFIG.defaultDuration;
+        const computedDuration = partial.duration ?? DEFAULT_MN_ALERT_CONFIG.durations[partial.kind] ?? DEFAULT_MN_ALERT_CONFIG.fallbackDuration;
         const a = { id: uid(), ...partial, duration: computedDuration };
         this._alerts$.next([...this._alerts$.value, a]);
         if (typeof a.duration === 'number' && a.duration > 0) {
@@ -250,7 +254,7 @@ class MnAlertService {
         let duration = input.duration;
         if (duration == null) {
             // Prefer user defaultDuration if provided and not null, otherwise use library per-kind default
-            const userDefault = this.cfg.defaultDuration;
+            const userDefault = this.cfg.fallbackDuration;
             if (typeof userDefault === 'number') {
                 duration = userDefault;
             }
@@ -293,8 +297,8 @@ class MnAlertService {
                 }
                 else {
                     // userDur is undefined or null -> fallback to user defaultDuration if numeric
-                    if (typeof this.cfg.defaultDuration === 'number') {
-                        duration = this.cfg.defaultDuration;
+                    if (typeof this.cfg.fallbackDuration === 'number') {
+                        duration = this.cfg.fallbackDuration;
                     }
                     else {
                         duration = this.cfg.durations[kind];
@@ -340,11 +344,11 @@ class MnAlertOutletComponent {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: MnAlertOutletComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: MnAlertOutletComponent, isStandalone: true, selector: "mn-alert-outlet", inputs: { template: "template" }, ngImport: i0, template: "@if (alerts$ | async; as alerts) {\n  @for (a of alerts; track trackById) {\n    <ng-container\n      [ngTemplateOutlet]=\"template\"\n      [ngTemplateOutletContext]=\"contextFor(a)\">\n    </ng-container>\n  }\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: MnAlertOutletComponent, isStandalone: true, selector: "mn-alert-outlet", inputs: { template: "template" }, ngImport: i0, template: "@if (alerts$ | async; as alerts) {\n  @for (a of alerts; track trackById($index, a)) {\n    <ng-container\n      [ngTemplateOutlet]=\"template\"\n      [ngTemplateOutletContext]=\"contextFor(a)\">\n    </ng-container>\n  }\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: MnAlertOutletComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mn-alert-outlet', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (alerts$ | async; as alerts) {\n  @for (a of alerts; track trackById) {\n    <ng-container\n      [ngTemplateOutlet]=\"template\"\n      [ngTemplateOutletContext]=\"contextFor(a)\">\n    </ng-container>\n  }\n}\n" }]
+            args: [{ selector: 'mn-alert-outlet', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (alerts$ | async; as alerts) {\n  @for (a of alerts; track trackById($index, a)) {\n    <ng-container\n      [ngTemplateOutlet]=\"template\"\n      [ngTemplateOutletContext]=\"contextFor(a)\">\n    </ng-container>\n  }\n}\n" }]
         }], ctorParameters: () => [], propDecorators: { template: [{
                 type: Input,
                 args: [{ required: true }]
@@ -359,6 +363,907 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
             args: [{ selector: 'lib-test', standalone: true, imports: [], template: "<p>test works!</p>\n", styles: ["p{color:var(--mn-primary)}\n"] }]
         }] });
 
+const mnButtonVariants = tv({
+    base: 'hover:cursor-pointer',
+    variants: {
+        size: {
+            sm: 'px-2 py-1 text-sm',
+            md: 'px-3 py-1.5 text-base',
+            lg: 'px-4 py-2 text-lg',
+        },
+        variant: {
+            fill: '',
+            outline: 'bg-transparent border',
+            text: 'bg-transparent',
+        },
+        // Intentionally empty; resolved via compoundVariants
+        color: {
+            primary: '',
+            secondary: '',
+            danger: '',
+            warning: '',
+            success: '',
+        },
+        borderRadius: {
+            none: 'rounded-none',
+            xs: 'rounded-xs',
+            sm: 'rounded-sm',
+            md: 'rounded-md',
+            lg: 'rounded-lg',
+            xl: 'rounded-xl',
+            two_xl: 'rounded-2xl',
+            three_xl: 'rounded-3xl',
+            four_xl: 'rounded-4xl',
+        },
+        disabled: {
+            true: 'opacity-50 pointer-events-none',
+        }
+    },
+    compoundVariants: [
+        // Fill
+        { variant: 'fill', color: 'primary', class: 'bg-blue-600 text-white hover:bg-blue-700' },
+        { variant: 'fill', color: 'secondary', class: 'bg-gray-600 text-white hover:bg-gray-700' },
+        { variant: 'fill', color: 'danger', class: 'bg-red-600 text-white hover:bg-red-700' },
+        { variant: 'fill', color: 'warning', class: 'bg-amber-500 text-black hover:bg-amber-600' },
+        { variant: 'fill', color: 'success', class: 'bg-green-600 text-white hover:bg-green-700' },
+        // Outline
+        { variant: 'outline', color: 'primary', class: 'border-blue-600 text-blue-600 hover:bg-blue-100' },
+        { variant: 'outline', color: 'secondary', class: 'border-gray-600 text-gray-700 hover:bg-gray-100' },
+        { variant: 'outline', color: 'danger', class: 'border-red-600 text-red-600 hover:bg-red-100' },
+        { variant: 'outline', color: 'warning', class: 'border-amber-500 text-amber-600 hover:bg-amber-100' },
+        { variant: 'outline', color: 'success', class: 'border-green-600 text-green-600 hover:bg-green-100' },
+        // Text
+        { variant: 'text', color: 'primary', class: 'text-blue-600 hover:bg-blue-100' },
+        { variant: 'text', color: 'secondary', class: 'text-gray-700 hover:bg-gray-100' },
+        { variant: 'text', color: 'danger', class: 'text-red-600 hover:bg-red-100' },
+        { variant: 'text', color: 'warning', class: 'text-amber-600 hover:bg-amber-100' },
+        { variant: 'text', color: 'success', class: 'text-green-600 hover:bg-green-100' },
+    ],
+    defaultVariants: {
+        size: 'md',
+        variant: 'fill',
+        color: 'primary',
+        borderRadius: 'xl',
+        disabled: false,
+    },
+});
+
+class MnButton {
+    data = {};
+    // Bind the computed classes to the host element
+    get hostClasses() {
+        return mnButtonVariants({
+            size: this.data.size,
+            variant: this.data.variant,
+            color: this.data.color,
+            borderRadius: this.data.borderRadius,
+            disabled: this.data.disabled,
+        });
+    }
+    // For accessibility (works for both <button> and <a>)
+    get ariaDisabled() {
+        return this.data.disabled ? 'true' : null;
+    }
+    // Only meaningful for <button>. For <a> it does nothing semantically.
+    get disabledAttr() {
+        return this.data.disabled ? '' : null;
+    }
+    // Make disabled anchors unfocusable + prevent activation
+    get tabIndex() {
+        return this.data.disabled ? '-1' : null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: MnButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", type: MnButton, isStandalone: true, selector: "button[mnButton], a[mnButton]", inputs: { data: "data" }, host: { properties: { "class": "this.hostClasses", "attr.aria-disabled": "this.ariaDisabled", "attr.disabled": "this.disabledAttr", "attr.tabindex": "this.tabIndex" } }, ngImport: i0, template: "<ng-content></ng-content>\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: MnButton, decorators: [{
+            type: Component,
+            args: [{ selector: 'button[mnButton], a[mnButton]', standalone: true, template: "<ng-content></ng-content>\n" }]
+        }], propDecorators: { data: [{
+                type: Input
+            }], hostClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }], ariaDisabled: [{
+                type: HostBinding,
+                args: ['attr.aria-disabled']
+            }], disabledAttr: [{
+                type: HostBinding,
+                args: ['attr.disabled']
+            }], tabIndex: [{
+                type: HostBinding,
+                args: ['attr.tabindex']
+            }] } });
+
+/**
+ * MnInputField Adapters
+ *
+ * This module implements the Adapter Pattern to handle type-specific behavior
+ * for different HTML input types in the MnInputField component.
+ *
+ * The adapter pattern allows the component to support multiple input types
+ * (text, number, date, time, etc.) without coupling the component logic to
+ * type-specific implementations. Each adapter handles:
+ * - Parsing: converting raw string input to the appropriate data type
+ * - Formatting: converting typed values back to string for display
+ * - Attributes: providing type-specific DOM attributes (min, max, step, inputmode)
+ * - Validation: implementing type-specific validation rules
+ *
+ * This approach keeps the component code clean and makes it easy to add
+ * support for new input types by creating new adapters.
+ */
+/**
+ * Utility function to convert empty strings to null.
+ * This is a common pattern for optional form fields where empty input
+ * should be treated as "no value" rather than an empty string.
+ *
+ * @param raw - Raw input string
+ * @returns The input string if non-empty, null if empty
+ *
+ * @example
+ * emptyToNull('hello') // => 'hello'
+ * emptyToNull('') // => null
+ */
+const emptyToNull = (raw) => (raw === '' ? null : raw);
+/**
+ * Default adapter for text-based input types.
+ * Used for: text, email, password, search, tel, url
+ *
+ * Behavior:
+ * - Empty strings are converted to null
+ * - Values are stored as strings in the FormControl
+ * - No special DOM attributes
+ * - No additional validation (relies on Angular's built-in validators)
+ */
+const defaultTextAdapter = {
+    parse: (raw) => emptyToNull(raw),
+    format: (val) => (val == null ? '' : String(val)),
+    attrs: () => ({}),
+    validate: () => null,
+};
+/**
+ * Adapter for date and time input types.
+ * Used for: date, time, datetime-local
+ *
+ * Behavior:
+ * - Empty strings are converted to null
+ * - Values are stored as ISO 8601 strings in the FormControl
+ * - Provides min/max attributes from startDate/endDate props
+ * - Validates date/time ranges using string comparison
+ *
+ * Note: String comparison works for ISO 8601 dates/times because they are
+ * lexicographically ordered (e.g., '2024-01-15' < '2024-12-31').
+ */
+const dateTimeAdapter = {
+    parse: (raw) => emptyToNull(raw),
+    format: (val) => (val == null ? '' : String(val)),
+    attrs: (props) => ({
+        min: props.startDate ?? null,
+        max: props.endDate ?? null,
+    }),
+    validate: (props, _control, currentRaw) => {
+        const value = currentRaw;
+        if (!value)
+            return null; // Don't validate empty values (use 'required' validator for that)
+        const min = props.startDate;
+        const max = props.endDate;
+        // Validate minimum date/time constraint
+        if (min && value < min) {
+            return { mnMin: { min, actual: value } };
+        }
+        // Validate maximum date/time constraint
+        if (max && value > max) {
+            return { mnMax: { max, actual: value } };
+        }
+        return null;
+    },
+};
+/**
+ * Adapter for number input type.
+ *
+ * Behavior:
+ * - Empty strings are converted to null
+ * - Valid numbers are parsed to number type
+ * - Invalid numbers (NaN, Infinity) are converted to null
+ * - Values are stored as numbers (or null) in the FormControl
+ * - Sets inputmode='decimal' for optimized mobile keyboards
+ * - No additional validation (relies on Angular's built-in validators)
+ *
+ * Note: The browser's native number input validation handles
+ * basic number format validation automatically.
+ */
+const numberAdapter = {
+    parse: (raw) => {
+        if (raw === '')
+            return null;
+        const num = Number(raw);
+        return Number.isFinite(num) ? num : null;
+    },
+    format: (val) => (val == null ? '' : String(val)),
+    attrs: () => ({
+        inputmode: 'decimal',
+    }),
+    validate: () => null,
+};
+/**
+ * Selects the appropriate adapter based on the input type.
+ * This is the main factory function used by the MnInputField component
+ * to determine which adapter to use for a given input type.
+ *
+ * @param type - The input type (e.g., 'text', 'email', 'date', 'number')
+ * @returns The appropriate adapter instance
+ *
+ * @example
+ * pickAdapter('text') // => defaultTextAdapter
+ * pickAdapter('email') // => defaultTextAdapter
+ * pickAdapter('date') // => dateTimeAdapter
+ * pickAdapter('number') // => numberAdapter
+ */
+function pickAdapter(type) {
+    // Date/time inputs use the dateTimeAdapter for range validation
+    if (type === 'date' || type === 'time' || type === 'datetime-local') {
+        return dateTimeAdapter;
+    }
+    // Number inputs use the numberAdapter for type conversion
+    if (type === 'number') {
+        return numberAdapter;
+    }
+    // All other input types use the default text adapter
+    return defaultTextAdapter;
+}
+
+const mnInputFieldVariants = tv({
+    base: 'bg-white border-1 border-gray-500 placeholder-gray-500 text-sm',
+    variants: {
+        shadow: {
+            true: 'shadow-lg',
+        },
+        size: {
+            sm: 'p-2',
+            md: 'p-3',
+            lg: 'p-4',
+        },
+        borderRadius: {
+            none: 'rounded-none',
+            xs: 'rounded-xs',
+            sm: 'rounded-sm',
+            md: 'rounded-md',
+            lg: 'rounded-lg',
+            xl: 'rounded-xl',
+            two_xl: 'rounded-2xl',
+            three_xl: 'rounded-3xl',
+            four_xl: 'rounded-4xl',
+        },
+        fullWidth: {
+            true: 'w-full',
+        }
+    },
+    defaultVariants: {
+        size: 'md',
+        borderRadius: 'md',
+    }
+});
+
+class MnErrorMessage {
+    errorMessage;
+    id;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: MnErrorMessage, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", type: MnErrorMessage, isStandalone: true, selector: "lib-mn-error-message", inputs: { errorMessage: "errorMessage", id: "id" }, ngImport: i0, template: "<div [id]=\"id + '-error'\" class=\"text-red-500 mt-2 text-sm\">\n  {{ errorMessage }}\n</div>\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: MnErrorMessage, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-mn-error-message', imports: [], template: "<div [id]=\"id + '-error'\" class=\"text-red-500 mt-2 text-sm\">\n  {{ errorMessage }}\n</div>\n" }]
+        }], propDecorators: { errorMessage: [{
+                type: Input,
+                args: [{ required: true }]
+            }], id: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
+
+/**
+ * MnInputField Component
+ *
+ * A flexible, accessible input field component that implements Angular's ControlValueAccessor
+ * and Validator interfaces. Supports multiple input types, custom validation messages,
+ * and configurable error display (single or multiple errors).
+ *
+ * Features:
+ * - Works with Angular Reactive Forms (FormControl, FormGroup)
+ * - Supports standard and date/time input types
+ * - Built-in error messages with internationalization support
+ * - Custom error messages per field
+ * - Priority-based error display or show all errors
+ * - Full accessibility (ARIA attributes)
+ * - Type-safe adapter pattern for different input types
+ *
+ * @example
+ * ```typescript
+ * <mn-input-field
+ *   formControlName="email"
+ *   [props]="{
+ *     id: 'email',
+ *     type: 'email',
+ *     label: 'Email Address',
+ *     size: 'md',
+ *     borderRadius: 'md',
+ *     errorMessages: { required: 'Email is required' }
+ *   }"
+ * ></mn-input-field>
+ * ```
+ */
+class MnInputField {
+    ngControl;
+    /** Configuration properties for the input field */
+    props;
+    /** Current raw string value of the input element */
+    value = null;
+    /** Whether the input is disabled */
+    isDisabled = false;
+    /** Callback function to notify Angular forms of value changes */
+    onChange = () => { };
+    /** Callback function to notify Angular forms when input is touched/blurred */
+    onTouched = () => { };
+    /**
+     * Built-in default error messages in English.
+     * These are used when useBuiltInErrorMessages is true (default).
+     * Can be overridden per-field using props.errorMessages.
+     */
+    builtInErrorMessages = {
+        required: 'This field is required',
+        email: 'Please enter a valid email address',
+        minlength: (args) => `Minimum ${args.requiredLength} characters required`,
+        maxlength: (args) => `Maximum ${args.requiredLength} characters allowed`,
+        mnMin: (args) => `Date/time must be from ${args.min} onwards`,
+        mnMax: (args) => `Date/time must be up to ${args.max}`,
+    };
+    /**
+     * Constructor - Registers this component as the ControlValueAccessor
+     * for the injected NgControl (FormControl).
+     *
+     * @param ngControl - Angular's NgControl (injected via Dependency Injection)
+     */
+    constructor(ngControl) {
+        this.ngControl = ngControl;
+        if (this.ngControl)
+            this.ngControl.valueAccessor = this;
+    }
+    /**
+     * Gets the appropriate adapter based on the input type.
+     * Adapters handle type-specific formatting, parsing, and validation.
+     */
+    get adapter() {
+        return pickAdapter(this.props.type);
+    }
+    // ========== ControlValueAccessor Implementation ==========
+    /**
+     * Writes a new value to the input element (called by Angular Forms).
+     * Formats the value using the type-specific adapter.
+     *
+     * @param val - The value to write (type depends on input type)
+     */
+    writeValue(val) {
+        this.value = this.adapter.format(val);
+    }
+    /**
+     * Registers a callback function to be called when the input value changes.
+     *
+     * @param fn - Callback function to notify Angular Forms of changes
+     */
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    /**
+     * Registers a callback function to be called when the input is touched/blurred.
+     *
+     * @param fn - Callback function to notify Angular Forms of touch events
+     */
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    /**
+     * Sets the disabled state of the input element.
+     *
+     * @param isDisabled - Whether the input should be disabled
+     */
+    setDisabledState(isDisabled) {
+        this.isDisabled = isDisabled;
+    }
+    // ========== Event Handlers ==========
+    /**
+     * Handles input events from the input element.
+     * Parses the raw string value and notifies Angular Forms.
+     *
+     * @param raw - Raw string value from the input element
+     */
+    handleInput(raw) {
+        this.value = raw;
+        this.onChange(this.adapter.parse(raw));
+    }
+    /**
+     * Handles blur events from the input element.
+     * Notifies Angular Forms that the input has been touched.
+     */
+    handleBlur() {
+        this.onTouched();
+    }
+    // ========== Validator Implementation ==========
+    /**
+     * Validates the control using the type-specific adapter.
+     * Called by Angular Forms during validation.
+     *
+     * @param control - The AbstractControl to validate
+     * @returns ValidationErrors if invalid, null if valid
+     */
+    validate(control) {
+        return this.adapter.validate(this.props, control, this.value);
+    }
+    // ========== Template Attribute Getters ==========
+    /**
+     * Gets all DOM attributes from the adapter.
+     * These are input-type-specific attributes (min, max, step, inputmode).
+     */
+    get domAttrs() {
+        return this.adapter.attrs(this.props);
+    }
+    /** Min attribute for date/time/number inputs */
+    get minAttr() {
+        return this.domAttrs.min ?? null;
+    }
+    /** Max attribute for date/time/number inputs */
+    get maxAttr() {
+        return this.domAttrs.max ?? null;
+    }
+    /** Step attribute for number/date/time inputs */
+    get stepAttr() {
+        return this.domAttrs.step ?? null;
+    }
+    /** Inputmode attribute for mobile keyboard optimization */
+    get inputmodeAttr() {
+        return this.domAttrs.inputmode ?? null;
+    }
+    // ========== Error Handling ==========
+    /**
+     * Gets the FormControl instance from Angular Forms.
+     * Returns null if no control is attached.
+     */
+    get control() {
+        return this.ngControl?.control ?? null;
+    }
+    /**
+     * Determines whether to show error messages.
+     * Errors are shown when the control is invalid and has been touched or modified.
+     */
+    get showError() {
+        const c = this.control;
+        return !!c && c.invalid && (c.touched || c.dirty);
+    }
+    /**
+     * Picks the error key to display based on errorPriority.
+     * Used when showAllErrors is false (default).
+     *
+     * @param errors - ValidationErrors object from the control
+     * @returns The error key to display
+     */
+    pickErrorKey(errors) {
+        // If priority is specified, use the first matching error from the priority list
+        if (this.props.errorPriority) {
+            for (const key of this.props.errorPriority) {
+                if (errors[key] !== undefined) {
+                    return key;
+                }
+            }
+        }
+        // Otherwise, use the first error key
+        return Object.keys(errors)[0];
+    }
+    isRequired() {
+        if (!this.control)
+            return false;
+        return this.control.hasValidator(Validators.required);
+    }
+    /**
+     * Resolves a single error message for a specific error key.
+     * Checks custom messages, built-in messages, and fallback in order.
+     *
+     * @param errorKey - The error key (e.g., 'required', 'email')
+     * @param errors - All validation errors on the control
+     * @returns The resolved error message string
+     */
+    resolveErrorMessageForKey(errorKey, errors) {
+        const errorArgs = errors[errorKey];
+        // Priority: custom > built-in > fallback > default
+        const customMsg = this.props.errorMessages?.[errorKey];
+        const useBuiltIn = this.props.useBuiltInErrorMessages !== false;
+        const builtInMsg = useBuiltIn ? this.builtInErrorMessages[errorKey] : undefined;
+        const fallbackMsg = this.props.defaultErrorMessage;
+        const msgDef = customMsg ?? builtInMsg ?? fallbackMsg ?? 'Invalid input';
+        // If the message is a function, call it with error arguments
+        if (typeof msgDef === 'function') {
+            return msgDef(errorArgs, errors);
+        }
+        return msgDef;
+    }
+    /**
+     * Gets all error messages for the current control state.
+     * Returns an array of error messages (used when showAllErrors is true).
+     *
+     * @returns Array of error message strings
+     */
+    get errorMessages() {
+        const errors = this.control?.errors;
+        if (!errors)
+            return [];
+        const errorKeys = Object.keys(errors);
+        return errorKeys.map(key => this.resolveErrorMessageForKey(key, errors));
+    }
+    /**
+     * Gets a single error message for the current control state.
+     * Uses errorPriority to determine which error to show (when showAllErrors is false).
+     *
+     * @returns Single error message string, or null if no errors
+     */
+    get errorMessage() {
+        const errors = this.control?.errors;
+        if (!errors)
+            return null;
+        const errorKey = this.pickErrorKey(errors);
+        return this.resolveErrorMessageForKey(errorKey, errors);
+    }
+    // ========== Resolved Properties ==========
+    /** Resolved ID for the input element */
+    get resolvedId() {
+        return this.props.id;
+    }
+    /** Resolved name attribute for the input element */
+    get resolvedName() {
+        return this.props?.name ?? null;
+    }
+    /**
+     * Computes the CSS classes from tailwind-variants based on the props.
+     * Returns the variant classes for styling the input element.
+     */
+    get inputClasses() {
+        return mnInputFieldVariants({
+            size: this.props.size,
+            borderRadius: this.props.borderRadius,
+            shadow: this.props.shadow,
+            fullWidth: this.props.fullWidth,
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: MnInputField, deps: [{ token: i1$1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: MnInputField, isStandalone: true, selector: "mn-input-field", inputs: { props: "props" }, ngImport: i0, template: "<div class=\"flex flex-col\" [class.is-fullwidth]=\"props.fullWidth\">\n  <!-- Label -->\n  @if (props.label) {\n    <label class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\" [attr.for]=\"resolvedId\">\n      <p>{{ props.label }}</p>\n      @if (isRequired()) {\n        <span class=\"text-red-500 \">*</span>\n      }\n    </label>\n  }\n\n  <!-- Input Element -->\n  <input\n    [id]=\"resolvedId\"\n    [attr.name]=\"resolvedName\"\n    [type]=\"props.type\"\n    [attr.placeholder]=\"props.placeholder || null\"\n    [attr.aria-label]=\"props.ariaLabel || props.label || null\"\n    [attr.aria-invalid]=\"showError || null\"\n    [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n    [disabled]=\"isDisabled\"\n    [attr.min]=\"minAttr\"\n    [attr.max]=\"maxAttr\"\n    [value]=\"value ?? ''\"\n    [ngClass]=\"inputClasses\"\n    (input)=\"handleInput(($any($event.target)).value)\"\n    (blur)=\"handleBlur()\"\n  />\n\n  <!-- Error Messages -->\n  @if (showError) {\n    <!-- Show all errors mode -->\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-1\">\n        @for (error of errorMessages; track $index) {\n          <lib-mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></lib-mn-error-message>\n        }\n      </div>\n    } @else {\n      @if (errorMessage != null) {\n        <lib-mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></lib-mn-error-message>\n\n      }\n    }\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MnErrorMessage, selector: "lib-mn-error-message", inputs: ["errorMessage", "id"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: MnInputField, decorators: [{
+            type: Component,
+            args: [{ selector: 'mn-input-field', standalone: true, imports: [NgClass, MnErrorMessage], template: "<div class=\"flex flex-col\" [class.is-fullwidth]=\"props.fullWidth\">\n  <!-- Label -->\n  @if (props.label) {\n    <label class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\" [attr.for]=\"resolvedId\">\n      <p>{{ props.label }}</p>\n      @if (isRequired()) {\n        <span class=\"text-red-500 \">*</span>\n      }\n    </label>\n  }\n\n  <!-- Input Element -->\n  <input\n    [id]=\"resolvedId\"\n    [attr.name]=\"resolvedName\"\n    [type]=\"props.type\"\n    [attr.placeholder]=\"props.placeholder || null\"\n    [attr.aria-label]=\"props.ariaLabel || props.label || null\"\n    [attr.aria-invalid]=\"showError || null\"\n    [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n    [disabled]=\"isDisabled\"\n    [attr.min]=\"minAttr\"\n    [attr.max]=\"maxAttr\"\n    [value]=\"value ?? ''\"\n    [ngClass]=\"inputClasses\"\n    (input)=\"handleInput(($any($event.target)).value)\"\n    (blur)=\"handleBlur()\"\n  />\n\n  <!-- Error Messages -->\n  @if (showError) {\n    <!-- Show all errors mode -->\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-1\">\n        @for (error of errorMessages; track $index) {\n          <lib-mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></lib-mn-error-message>\n        }\n      </div>\n    } @else {\n      @if (errorMessage != null) {\n        <lib-mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></lib-mn-error-message>\n\n      }\n    }\n  }\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i1$1.NgControl, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }] }], propDecorators: { props: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
+
+/**
+ * Represents the current section path based on nested mn-section directives.
+ */
+const MN_SECTION_PATH = new InjectionToken('MN_SECTION_PATH', {
+    providedIn: 'root',
+    factory: () => [],
+});
+/**
+ * Represents the current component instance id provided by [mn-instance].
+ */
+const MN_INSTANCE_ID = new InjectionToken('MN_INSTANCE_ID', {
+    providedIn: 'root',
+    factory: () => null,
+});
+
+function isPlainObject(value) {
+    return (typeof value === 'object' &&
+        value !== null &&
+        Object.prototype.toString.call(value) === '[object Object]');
+}
+class MnConfigService {
+    http;
+    _config = null;
+    constructor(http) {
+        this.http = http;
+    }
+    /**
+     * Load the configuration JSON from the provided URL and cache it in memory.
+     * Consumers should typically call this via the APP_INITIALIZER helper.
+     */
+    async load(url) {
+        let json = await firstValueFrom(this.http.get(url, { responseType: 'json' }));
+        if (typeof json === 'string') {
+            try {
+                json = JSON.parse(json);
+            }
+            catch {
+                json = {};
+            }
+        }
+        const cfg = (isPlainObject(json) ? json : {});
+        const defaults = (isPlainObject(cfg.defaults) ? cfg.defaults : {});
+        const overrides = isPlainObject(cfg.overrides) ? cfg.overrides : cfg.overrides ?? {};
+        this._config = { defaults, overrides };
+    }
+    /**
+     * Resolve a configuration object for a component, optionally scoped to a section path
+     * and optionally overridden by an instance id.
+     */
+    resolve(componentName, sectionPath = [], instanceId) {
+        const baseConfig = isPlainObject(this._config?.defaults)
+            ? (isPlainObject(this._config.defaults[componentName])
+                ? { ...this._config.defaults[componentName] }
+                : {})
+            : {};
+        const leaf = this.walkOverrides(this._config?.overrides ?? {}, sectionPath);
+        let resolved = baseConfig;
+        if (leaf && isPlainObject(leaf[componentName])) {
+            resolved = this.deepMerge(resolved, leaf[componentName]);
+        }
+        if (instanceId) {
+            const instKey = `#${instanceId}`;
+            if (leaf && isPlainObject(leaf[instKey])) {
+                resolved = this.deepMerge(resolved, leaf[instKey]);
+            }
+        }
+        return resolved;
+    }
+    /**
+     * Walk the overrides nested object using the provided section path and return the leaf node.
+     * If any segment is missing or the current node is not a plain object, returns undefined.
+     */
+    walkOverrides(overridesRoot, sectionPath) {
+        let node = overridesRoot;
+        for (const segment of sectionPath) {
+            if (!isPlainObject(node))
+                return undefined;
+            node = node[segment];
+            if (node === undefined)
+                return undefined;
+        }
+        return node;
+    }
+    /**
+     * Deep merge two plain-object trees. Arrays and non-plain values are replaced by the patch.
+     * Does not mutate inputs; returns a new object.
+     */
+    deepMerge(base, patch) {
+        const out = { ...base };
+        for (const key of Object.keys(patch)) {
+            const bVal = base[key];
+            const pVal = patch[key];
+            if (isPlainObject(bVal) && isPlainObject(pVal)) {
+                out[key] = this.deepMerge(bVal, pVal);
+            }
+            else {
+                // replace for arrays, primitives, null, undefined, and non-plain objects
+                out[key] = pVal;
+            }
+        }
+        return out;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: MnConfigService, deps: [{ token: i1$2.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: MnConfigService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: MnConfigService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: i1$2.HttpClient }] });
+
+/**
+ * Helper to provide a resolved, typed component config via DI.
+ *
+ * Usage in a component/module providers:
+ *   const MY_CFG = new InjectionToken<MyCfg>('MY_CFG');
+ *   providers: [ provideMnComponentConfig(MY_CFG, 'my-component') ]
+ * Then in the component:
+ *   readonly cfg = inject(MY_CFG)
+ */
+function provideMnComponentConfig(token, componentName, initial) {
+    return {
+        provide: token,
+        deps: [MnConfigService, [new Optional(), MN_SECTION_PATH], [new Optional(), MN_INSTANCE_ID]],
+        useFactory: (svc, sectionPath, instanceId) => {
+            const resolved = svc.resolve(componentName, sectionPath ?? [], instanceId ?? undefined);
+            // Apply optional initial (local defaults) over resolved? We prefer resolved to override initial local defaults,
+            // so merge initial first, then resolved on top.
+            return Object.assign({}, initial ?? {}, resolved);
+        },
+    };
+}
+
+const MN_TEST_COMPONENT_CONFIG = new InjectionToken('MN_TEST_COMPONENT_CONFIG');
+class MnTestComponent {
+    cfg = inject(MN_TEST_COMPONENT_CONFIG);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: MnTestComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", type: MnTestComponent, isStandalone: true, selector: "mn-test-component", providers: [
+            provideMnComponentConfig(MN_TEST_COMPONENT_CONFIG, 'test-component'),
+        ], ngImport: i0, template: `
+    <div class="mn-test" [style.color]="(cfg.color ?? 'inherit')">
+      {{ cfg.text ?? 'Hello from component' }}
+    </div>
+  `, isInline: true, styles: [".mn-test{font-weight:600;padding:8px 12px;border:1px dashed #ddd;border-radius:6px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: MnTestComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mn-test-component', standalone: true, imports: [CommonModule], providers: [
+                        provideMnComponentConfig(MN_TEST_COMPONENT_CONFIG, 'test-component'),
+                    ], template: `
+    <div class="mn-test" [style.color]="(cfg.color ?? 'inherit')">
+      {{ cfg.text ?? 'Hello from component' }}
+    </div>
+  `, styles: [".mn-test{font-weight:600;padding:8px 12px;border:1px dashed #ddd;border-radius:6px}\n"] }]
+        }] });
+
+class MnDualHorizontalImage {
+    _images = [];
+    set images(value) {
+        this._images = (value ?? []).slice(0, 2);
+    }
+    get images() {
+        return this._images;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: MnDualHorizontalImage, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: MnDualHorizontalImage, isStandalone: true, selector: "lib-mn-dual-horizontal-image", inputs: { images: "images" }, ngImport: i0, template: "<div class=\"flex flex-col w-full -space-y-5 md:-space-y-10 lg:-space-y-5\">\n  @for (image of images; track image.id) {\n    <div class=\"w-[75%] overflow-hidden rounded-3xl shadow-md md:w-[65%] lg:w-[80%] first:self-start last:self-end last:mb-4\">\n      <img [ngSrc]=\"image.url\" width=\"150\" height=\"100\" class=\"size-full object-cover\" [alt]=\"image.alt\" />\n    </div>\n  } @empty {\n    <p>No images found</p>\n  }\n</div>\n\n", dependencies: [{ kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: MnDualHorizontalImage, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-mn-dual-horizontal-image', standalone: true, imports: [
+                        NgOptimizedImage
+                    ], template: "<div class=\"flex flex-col w-full -space-y-5 md:-space-y-10 lg:-space-y-5\">\n  @for (image of images; track image.id) {\n    <div class=\"w-[75%] overflow-hidden rounded-3xl shadow-md md:w-[65%] lg:w-[80%] first:self-start last:self-end last:mb-4\">\n      <img [ngSrc]=\"image.url\" width=\"150\" height=\"100\" class=\"size-full object-cover\" [alt]=\"image.alt\" />\n    </div>\n  } @empty {\n    <p>No images found</p>\n  }\n</div>\n\n" }]
+        }], propDecorators: { images: [{
+                type: Input
+            }] } });
+
+const mnInformationCardVariants = tv({
+    base: '',
+    variants: {
+        bottomBorder: {
+            true: 'border-b border-b-2 border-brand-500',
+        },
+        shadow: {
+            true: 'shadow-lg',
+        },
+        textPosition: {
+            left: 'text-left',
+            center: 'text-center',
+            right: 'text-right',
+        },
+        borderRadius: {
+            none: 'rounded-none',
+            xs: 'rounded-xs',
+            sm: 'rounded-sm',
+            md: 'rounded-md',
+            lg: 'rounded-lg',
+            xl: 'rounded-xl',
+            two_xl: 'rounded-2xl',
+            three_xl: 'rounded-3xl',
+            four_xl: 'rounded-4xl',
+        },
+    },
+});
+
+class MnInformationCard {
+    data;
+    get hostClasses() {
+        return mnInformationCardVariants({
+            bottomBorder: this.data.bottomBorder,
+            shadow: this.data.shadow,
+            textPosition: this.data.textPosition,
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: MnInformationCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", type: MnInformationCard, isStandalone: true, selector: "lib-mn-information-card", inputs: { data: "data" }, ngImport: i0, template: "<div class=\"flex flex-col items-center gap-y-4 p-4 size-full\" [ngClass]=\"hostClasses\">\n<ng-content select=\"[header]\"></ng-content>\n<ng-content></ng-content>\n<ng-content select=\"[footer]\"></ng-content>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: MnInformationCard, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-mn-information-card', standalone: true, imports: [
+                        NgClass
+                    ], template: "<div class=\"flex flex-col items-center gap-y-4 p-4 size-full\" [ngClass]=\"hostClasses\">\n<ng-content select=\"[header]\"></ng-content>\n<ng-content></ng-content>\n<ng-content select=\"[footer]\"></ng-content>\n</div>\n" }]
+        }], propDecorators: { data: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
+
+/**
+ * Types for mn-lib configuration.
+ */
+
+/**
+ * Provides an APP_INITIALIZER that loads the mn-lib configuration from the given URL
+ * during application bootstrap. The consuming application is responsible for providing
+ * HttpClient (e.g., via HttpClientModule or provideHttpClient()).
+ */
+function provideMnConfig(url) {
+    return [
+        {
+            provide: APP_INITIALIZER,
+            multi: true,
+            useFactory: (svc) => () => svc.load(url),
+            deps: [MnConfigService],
+        },
+    ];
+}
+
+class MnSectionDirective {
+    /** Section name contributed by this DOM node to the section path */
+    mnSection;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: MnSectionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: MnSectionDirective, isStandalone: true, selector: "[mn-section]", inputs: { mnSection: ["mn-section", "mnSection"] }, providers: [
+            {
+                provide: MN_SECTION_PATH,
+                // Read parent MN_SECTION_PATH from ancestor injector (skipSelf to avoid self-reference),
+                // and read the attribute value using Attribute so it's available at provider creation time.
+                deps: [[new Optional(), new SkipSelf(), MN_SECTION_PATH], new Attribute('mn-section')],
+                useFactory: (parentPath, attr) => {
+                    const parent = Array.isArray(parentPath) ? parentPath : [];
+                    const name = (attr ?? '').trim();
+                    return name ? [...parent, name] : [...parent];
+                },
+            },
+        ], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: MnSectionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mn-section]',
+                    standalone: true,
+                    providers: [
+                        {
+                            provide: MN_SECTION_PATH,
+                            // Read parent MN_SECTION_PATH from ancestor injector (skipSelf to avoid self-reference),
+                            // and read the attribute value using Attribute so it's available at provider creation time.
+                            deps: [[new Optional(), new SkipSelf(), MN_SECTION_PATH], new Attribute('mn-section')],
+                            useFactory: (parentPath, attr) => {
+                                const parent = Array.isArray(parentPath) ? parentPath : [];
+                                const name = (attr ?? '').trim();
+                                return name ? [...parent, name] : [...parent];
+                            },
+                        },
+                    ],
+                }]
+        }], propDecorators: { mnSection: [{
+                type: Input,
+                args: ['mn-section']
+            }] } });
+
+class MnInstanceDirective {
+    /** Instance id for targeting per-component instance overrides */
+    mnInstance;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: MnInstanceDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: MnInstanceDirective, isStandalone: true, selector: "[mn-instance]", inputs: { mnInstance: ["mn-instance", "mnInstance"] }, providers: [
+            {
+                provide: MN_INSTANCE_ID,
+                // Read the attribute at provider creation time using Attribute token; Inputs may not be set yet.
+                deps: [new Attribute('mn-instance')],
+                useFactory: (attr) => (attr ?? '').trim() || null,
+            },
+        ], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: MnInstanceDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mn-instance]',
+                    standalone: true,
+                    providers: [
+                        {
+                            provide: MN_INSTANCE_ID,
+                            // Read the attribute at provider creation time using Attribute token; Inputs may not be set yet.
+                            deps: [new Attribute('mn-instance')],
+                            useFactory: (attr) => (attr ?? '').trim() || null,
+                        },
+                    ],
+                }]
+        }], propDecorators: { mnInstance: [{
+                type: Input,
+                args: ['mn-instance']
+            }] } });
+
 /*
  * Public API Surface of mn-lib
  */
@@ -367,5 +1272,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { DEFAULT_MN_ALERT_CONFIG, MN_ALERT_CONFIG, MN_THEME, MN_THEME_DEFAULTS, MnAlertOutletComponent, MnAlertService, MnAlertStore, MnThemeService, Test, injectTheme, injectThemeSignal, provideMnAlerts, provideMnTheme, provideMnThemeDynamic };
+export { DEFAULT_MN_ALERT_CONFIG, MN_ALERT_CONFIG, MN_INSTANCE_ID, MN_SECTION_PATH, MN_TEST_COMPONENT_CONFIG, MN_THEME, MN_THEME_DEFAULTS, MnAlertOutletComponent, MnAlertService, MnAlertStore, MnButton, MnConfigService, MnDualHorizontalImage, MnInformationCard, MnInputField, MnInstanceDirective, MnSectionDirective, MnTestComponent, MnThemeService, Test, dateTimeAdapter, defaultTextAdapter, injectTheme, injectThemeSignal, mnInformationCardVariants, mnInputFieldVariants, numberAdapter, pickAdapter, provideMnAlerts, provideMnComponentConfig, provideMnConfig, provideMnTheme, provideMnThemeDynamic };
 //# sourceMappingURL=mn-angular-lib.mjs.map