@mosaicoo/form-angular 0.1.0

package/fesm2022/mosaicoo-form-angular.mjs

@@ -0,0 +1,1047 @@
+import * as i0 from '@angular/core';
+import { input, signal, effect, untracked, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, output } from '@angular/core';
+import { importForm, createLegacyImporter, createFormEngine, collectInputs } from '@mosaicoo/form-core';
+
+/**
+ * Renders one schema node (input, container or static) and recurses into
+ * children. State lives in the headless engine — this component only projects
+ * it and forwards user interaction. `tick` changes whenever the engine emits,
+ * invalidating the OnPush view.
+ */
+class FormNodeComponent {
+    node = input.required(...(ngDevMode ? [{ debugName: "node" }] : /* istanbul ignore next */ []));
+    engine = input.required(...(ngDevMode ? [{ debugName: "engine" }] : /* istanbul ignore next */ []));
+    /** Monotonic counter bumped on every engine event — invalidates the view. */
+    tick = input.required(...(ngDevMode ? [{ debugName: "tick" }] : /* istanbul ignore next */ []));
+    /** Data-path prefix (set by array rows and nested groups above this node). */
+    scope = input('', ...(ngDevMode ? [{ debugName: "scope" }] : /* istanbul ignore next */ []));
+    /** Suppresses the panel chrome (used when a tab already framed the child). */
+    bare = input(false, ...(ngDevMode ? [{ debugName: "bare" }] : /* istanbul ignore next */ []));
+    /** Host-registered providers for `optionsSource: provider` fields. */
+    providers = input({}, ...(ngDevMode ? [{ debugName: "providers" }] : /* istanbul ignore next */ []));
+    activeTab = signal(0, ...(ngDevMode ? [{ debugName: "activeTab" }] : /* istanbul ignore next */ []));
+    /** Options resolved from a dynamic source (provider or remote URL). */
+    resolvedOptions = signal(null, ...(ngDevMode ? [{ debugName: "resolvedOptions" }] : /* istanbul ignore next */ []));
+    /** Snapshot of the observed refresh source at the last resolution. */
+    lastRefreshKey = null;
+    constructor() {
+        effect(() => {
+            const node = this.node();
+            const registry = this.providers();
+            if (node.kind !== 'input' || !node.optionsSource) {
+                this.resolvedOptions.set(null);
+                return;
+            }
+            const source = node.optionsSource;
+            // With refreshOn, engine events re-run this effect; the refresh key
+            // then decides whether the observed data actually changed.
+            if (source.refreshOn)
+                this.tick();
+            const engine = untracked(() => this.engine());
+            const path = untracked(() => this.path());
+            const refreshKey = !source.refreshOn
+                ? 'static'
+                : source.refreshOn === 'data'
+                    ? JSON.stringify(engine.getData())
+                    : JSON.stringify(engine.getValue(source.refreshOn) ?? null);
+            if (refreshKey === this.lastRefreshKey)
+                return;
+            this.lastRefreshKey = refreshKey;
+            if (source.type === 'provider') {
+                const provider = registry[source.name];
+                if (!provider)
+                    return; // no provider: static options/fallback stand
+                Promise.resolve(provider({ field: node, path, data: engine.getData(), args: source.args }))
+                    .then((options) => this.resolvedOptions.set(options))
+                    .catch(() => { }); // provider failure keeps the static fallback
+            }
+            else {
+                fetch(source.url)
+                    .then((response) => (response.ok ? response.json() : []))
+                    .then((list) => this.resolvedOptions.set((Array.isArray(list) ? list : []).map((item) => ({
+                    label: String(item[source.labelKey ?? 'label'] ?? item[source.valueKey ?? 'value'] ?? ''),
+                    value: (item[source.valueKey ?? 'value'] ?? ''),
+                }))))
+                    .catch(() => { });
+            }
+        });
+    }
+    /** Effective options: dynamically resolved first, static as fallback. */
+    options() {
+        return this.resolvedOptions() ?? this.field().options ?? [];
+    }
+    // -- typed views of the node ---------------------------------------------
+    field() {
+        return this.node();
+    }
+    container() {
+        return this.node();
+    }
+    content() {
+        return this.node().content ?? '';
+    }
+    buttonAction() {
+        return String(this.node().props?.['action'] ?? 'submit');
+    }
+    sourceType() {
+        return String(this.node().props?.['sourceType'] ?? '');
+    }
+    rowsProp() {
+        const rows = this.node().props?.['rows'];
+        return typeof rows === 'number' ? rows : null;
+    }
+    // -- paths and visibility -------------------------------------------------
+    /** Data path of this node (inputs) or of its scope (containers). */
+    path = computed(() => {
+        const scope = this.scope();
+        const node = this.node();
+        if (node.kind === 'input')
+            return scope ? `${scope}.${node.key}` : node.key;
+        if (node.kind === 'container' && node.dataScope !== 'inherit') {
+            return scope ? `${scope}.${node.key}` : node.key;
+        }
+        return scope;
+    }, ...(ngDevMode ? [{ debugName: "path" }] : /* istanbul ignore next */ []));
+    /** Scope handed to children (nested/array containers extend it). */
+    childScope = computed(() => {
+        const node = this.node();
+        if (node.kind === 'container' && node.dataScope === 'nested')
+            return this.path();
+        return this.scope();
+    }, ...(ngDevMode ? [{ debugName: "childScope" }] : /* istanbul ignore next */ []));
+    rowScope(index) {
+        return `${this.path()}.${index}`;
+    }
+    visible() {
+        this.tick();
+        const node = this.node();
+        const key = node.kind === 'input' ? this.path() : node.key;
+        return this.engine().isVisible(key);
+    }
+    containerLayout() {
+        const node = this.container();
+        if (node.dataScope === 'array')
+            return 'array';
+        if (node.type === 'tabs')
+            return 'tabs';
+        if (node.type === 'columns' && node.columns?.length)
+            return 'columns';
+        return 'block';
+    }
+    columns() {
+        const node = this.container();
+        return (node.columns ?? []).map((column) => column.children
+            .map((index) => node.children[index])
+            .filter((child) => child !== undefined));
+    }
+    columnsTemplate() {
+        const cols = this.container().columns ?? [];
+        const total = cols.reduce((sum, c) => sum + c.width, 0) || 12;
+        return cols.map((c) => `${((c.width / total) * 100).toFixed(3)}fr`).join(' ');
+    }
+    // -- values ---------------------------------------------------------------
+    value() {
+        this.tick();
+        return this.engine().getValue(this.path());
+    }
+    stringValue() {
+        const value = this.value();
+        return value === undefined || value === null ? '' : String(value);
+    }
+    mapValue() {
+        const value = this.value();
+        return value !== null && typeof value === 'object' && !Array.isArray(value)
+            ? value
+            : {};
+    }
+    rows() {
+        const value = this.value();
+        return Array.isArray(value) ? value : [];
+    }
+    required() {
+        return this.field().validators?.some((v) => v.type === 'required') ?? false;
+    }
+    errors() {
+        this.tick();
+        return this.engine().getFieldErrors(this.path());
+    }
+    controlId() {
+        return `mform-${this.path().replace(/\./g, '-')}`;
+    }
+    describedBy() {
+        const parts = [];
+        if (this.field().description)
+            parts.push(`${this.controlId()}-desc`);
+        if (this.errors().length > 0)
+            parts.push(`${this.controlId()}-err`);
+        return parts.length ? parts.join(' ') : null;
+    }
+    inputType() {
+        switch (this.field().type) {
+            case 'number':
+            case 'currency':
+                return 'number';
+            case 'email':
+                return 'email';
+            case 'password':
+                return 'password';
+            case 'phone':
+                return 'tel';
+            case 'url':
+                return 'url';
+            case 'time':
+                return 'time';
+            case 'datetime':
+                return 'datetime-local';
+            case 'day':
+                return 'date';
+            default:
+                return 'text';
+        }
+    }
+    // -- interaction ----------------------------------------------------------
+    setValue(value) {
+        this.engine().setValue(this.path(), value);
+    }
+    setString(event) {
+        const raw = event.target.value;
+        if (this.field().dataType === 'number') {
+            const parsed = raw === '' ? undefined : Number(raw);
+            this.setValue(parsed !== undefined && Number.isFinite(parsed) ? parsed : undefined);
+        }
+        else {
+            this.setValue(raw);
+        }
+    }
+    setSelect(event) {
+        this.setValue(event.target.value);
+    }
+    setChecked(event) {
+        this.setValue(event.target.checked);
+    }
+    toggleMap(option, event) {
+        const checked = event.target.checked;
+        this.setValue({ ...this.mapValue(), [option]: checked });
+    }
+    setFiles(event) {
+        const files = event.target.files;
+        this.setValue(files ? Array.from(files).map((f) => f.name) : []);
+    }
+    touch() {
+        this.engine().markTouched(this.path());
+        this.engine().validateField(this.path());
+    }
+    addRow() {
+        this.engine().addRow(this.path());
+    }
+    removeRow(index) {
+        this.engine().removeRow(this.path(), index);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FormNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FormNodeComponent, isStandalone: true, selector: "mform-node", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, engine: { classPropertyName: "engine", publicName: "engine", isSignal: true, isRequired: true, transformFunction: null }, tick: { classPropertyName: "tick", publicName: "tick", isSignal: true, isRequired: true, transformFunction: null }, scope: { classPropertyName: "scope", publicName: "scope", isSignal: true, isRequired: false, transformFunction: null }, bare: { classPropertyName: "bare", publicName: "bare", isSignal: true, isRequired: false, transformFunction: null }, providers: { classPropertyName: "providers", publicName: "providers", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "mform-node" }, ngImport: i0, template: `
+    @let n = node();
+    @if (visible()) {
+      @switch (n.kind) {
+        @case ('static') {
+          @if (n.type === 'button') {
+            <button
+              class="mform-btn"
+              [type]="buttonAction() === 'submit' ? 'submit' : 'button'"
+            >
+              {{ n.label || 'Submit' }}
+            </button>
+          } @else if (n.type === 'content') {
+            <div class="mform-content" [innerHTML]="content()"></div>
+          } @else {
+            <div class="mform-unsupported" role="note">
+              {{ n.label || n.key }} — unsupported content
+            </div>
+          }
+        }
+        @case ('container') {
+          @switch (containerLayout()) {
+            @case ('columns') {
+              <div class="mform-columns" [style.grid-template-columns]="columnsTemplate()">
+                @for (column of columns(); track $index) {
+                  <div class="mform-column">
+                    @for (child of column; track child.key) {
+                      <mform-node [node]="child" [engine]="engine()" [tick]="tick()" [providers]="providers()" [scope]="childScope()" />
+                    }
+                  </div>
+                }
+              </div>
+            }
+            @case ('tabs') {
+              <div class="mform-tabs">
+                <div class="mform-tabbar" role="tablist">
+                  @for (tab of container().children; track tab.key; let i = $index) {
+                    <button
+                      type="button"
+                      class="mform-tab"
+                      role="tab"
+                      [class.is-active]="activeTab() === i"
+                      [attr.aria-selected]="activeTab() === i"
+                      (click)="activeTab.set(i)"
+                    >
+                      {{ tab.label || 'Tab ' + (i + 1) }}
+                    </button>
+                  }
+                </div>
+                @for (tab of container().children; track tab.key; let i = $index) {
+                  @if (activeTab() === i) {
+                    <div class="mform-tabpanel" role="tabpanel">
+                      <mform-node [node]="tab" [engine]="engine()" [tick]="tick()" [providers]="providers()" [scope]="childScope()" [bare]="true" />
+                    </div>
+                  }
+                }
+              </div>
+            }
+            @case ('array') {
+              <section class="mform-panel mform-grid">
+                @if (container().label) {
+                  <header class="mform-panel-head">{{ container().label }}</header>
+                }
+                <div class="mform-panel-body">
+                  @for (row of rows(); track $index; let i = $index) {
+                    <div class="mform-grid-row" role="group" [attr.aria-label]="(container().label || container().key) + ' ' + (i + 1)">
+                      <div class="mform-grid-fields">
+                        @for (child of container().children; track child.key) {
+                          <mform-node [node]="child" [engine]="engine()" [tick]="tick()" [providers]="providers()" [scope]="rowScope(i)" />
+                        }
+                      </div>
+                      <button
+                        type="button"
+                        class="mform-row-remove"
+                        (click)="removeRow(i)"
+                        [attr.aria-label]="'Remove row ' + (i + 1)"
+                      >
+                        ✕
+                      </button>
+                    </div>
+                  }
+                  <button type="button" class="mform-row-add" (click)="addRow()">+ Add</button>
+                </div>
+              </section>
+            }
+            @default {
+              @if (container().label && !bare()) {
+                <section class="mform-panel">
+                  <header class="mform-panel-head">{{ container().label }}</header>
+                  <div class="mform-panel-body">
+                    @for (child of container().children; track child.key) {
+                      <mform-node [node]="child" [engine]="engine()" [tick]="tick()" [providers]="providers()" [scope]="childScope()" />
+                    }
+                  </div>
+                </section>
+              } @else {
+                <div class="mform-group">
+                  @for (child of container().children; track child.key) {
+                    <mform-node [node]="child" [engine]="engine()" [tick]="tick()" [providers]="providers()" [scope]="childScope()" />
+                  }
+                </div>
+              }
+            }
+          }
+        }
+        @case ('input') {
+          @if (field().type !== 'hidden') {
+            <div class="mform-field" [class.has-error]="errors().length > 0">
+              @if (field().type !== 'checkbox') {
+                <label class="mform-label" [attr.for]="controlId()">
+                  {{ field().label || field().key }}
+                  @if (required()) {
+                    <span class="mform-req" aria-hidden="true">*</span>
+                  }
+                </label>
+              }
+              @switch (field().type) {
+                @case ('textarea') {
+                  <textarea
+                    class="mform-control"
+                    [id]="controlId()"
+                    [value]="stringValue()"
+                    [placeholder]="field().placeholder || ''"
+                    [disabled]="field().disabled === true"
+                    [attr.rows]="rowsProp()"
+                    [attr.aria-required]="required() || null"
+                    [attr.aria-invalid]="errors().length > 0 || null"
+                    [attr.aria-describedby]="describedBy()"
+                    (input)="setString($event)"
+                    (blur)="touch()"
+                  ></textarea>
+                }
+                @case ('select') {
+                  <select
+                    class="mform-control"
+                    [id]="controlId()"
+                    [disabled]="field().disabled === true"
+                    [attr.aria-required]="required() || null"
+                    [attr.aria-invalid]="errors().length > 0 || null"
+                    [attr.aria-describedby]="describedBy()"
+                    (change)="setSelect($event)"
+                    (blur)="touch()"
+                  >
+                    <option value="" [selected]="stringValue() === ''"></option>
+                    @for (option of options(); track option.value) {
+                      <option
+                        [value]="option.value"
+                        [selected]="stringValue() === '' + option.value"
+                      >
+                        {{ option.label }}
+                      </option>
+                    }
+                  </select>
+                }
+                @case ('radio') {
+                  <div class="mform-choices" role="radiogroup" [attr.aria-label]="field().label || field().key">
+                    @for (option of options(); track option.value) {
+                      <label class="mform-check">
+                        <input
+                          type="radio"
+                          [name]="controlId()"
+                          [checked]="stringValue() === '' + option.value"
+                          [disabled]="field().disabled === true"
+                          (change)="setValue(option.value)"
+                          (blur)="touch()"
+                        />
+                        <span>{{ option.label }}</span>
+                      </label>
+                    }
+                  </div>
+                }
+                @case ('checkbox') {
+                  <label class="mform-check">
+                    <input
+                      type="checkbox"
+                      [id]="controlId()"
+                      [checked]="value() === true"
+                      [disabled]="field().disabled === true"
+                      [attr.aria-invalid]="errors().length > 0 || null"
+                      [attr.aria-describedby]="describedBy()"
+                      (change)="setChecked($event)"
+                      (blur)="touch()"
+                    />
+                    <span>
+                      {{ field().label || field().key }}
+                      @if (required()) {
+                        <span class="mform-req" aria-hidden="true">*</span>
+                      }
+                    </span>
+                  </label>
+                }
+                @case ('checkbox-group') {
+                  <div class="mform-choices" role="group" [attr.aria-label]="field().label || field().key">
+                    @for (option of options(); track option.value) {
+                      <label class="mform-check">
+                        <input
+                          type="checkbox"
+                          [checked]="mapValue()['' + option.value] === true"
+                          [disabled]="field().disabled === true"
+                          (change)="toggleMap('' + option.value, $event)"
+                          (blur)="touch()"
+                        />
+                        <span>{{ option.label }}</span>
+                      </label>
+                    }
+                  </div>
+                }
+                @case ('file') {
+                  <input
+                    class="mform-control"
+                    type="file"
+                    multiple
+                    [id]="controlId()"
+                    [disabled]="field().disabled === true"
+                    [attr.aria-describedby]="describedBy()"
+                    (change)="setFiles($event)"
+                    (blur)="touch()"
+                  />
+                }
+                @case ('unsupported') {
+                  <input
+                    class="mform-control"
+                    type="text"
+                    disabled
+                    [id]="controlId()"
+                    [value]="'Unsupported field (' + (sourceType() || 'unknown') + ')'"
+                  />
+                }
+                @default {
+                  <input
+                    class="mform-control"
+                    [type]="inputType()"
+                    [id]="controlId()"
+                    [value]="stringValue()"
+                    [placeholder]="field().placeholder || ''"
+                    [disabled]="field().disabled === true"
+                    [attr.aria-required]="required() || null"
+                    [attr.aria-invalid]="errors().length > 0 || null"
+                    [attr.aria-describedby]="describedBy()"
+                    (input)="setString($event)"
+                    (blur)="touch()"
+                  />
+                }
+              }
+              @if (field().description) {
+                <div class="mform-desc" [id]="controlId() + '-desc'">{{ field().description }}</div>
+              }
+              @for (error of errors(); track error.rule) {
+                <div class="mform-error" [id]="controlId() + '-err'" role="alert">{{ error.message }}</div>
+              }
+            </div>
+          }
+        }
+      }
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: FormNodeComponent, selector: "mform-node", inputs: ["node", "engine", "tick", "scope", "bare", "providers"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FormNodeComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mform-node',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: { class: 'mform-node' },
+                    template: `
+    @let n = node();
+    @if (visible()) {
+      @switch (n.kind) {
+        @case ('static') {
+          @if (n.type === 'button') {
+            <button
+              class="mform-btn"
+              [type]="buttonAction() === 'submit' ? 'submit' : 'button'"
+            >
+              {{ n.label || 'Submit' }}
+            </button>
+          } @else if (n.type === 'content') {
+            <div class="mform-content" [innerHTML]="content()"></div>
+          } @else {
+            <div class="mform-unsupported" role="note">
+              {{ n.label || n.key }} — unsupported content
+            </div>
+          }
+        }
+        @case ('container') {
+          @switch (containerLayout()) {
+            @case ('columns') {
+              <div class="mform-columns" [style.grid-template-columns]="columnsTemplate()">
+                @for (column of columns(); track $index) {
+                  <div class="mform-column">
+                    @for (child of column; track child.key) {
+                      <mform-node [node]="child" [engine]="engine()" [tick]="tick()" [providers]="providers()" [scope]="childScope()" />
+                    }
+                  </div>
+                }
+              </div>
+            }
+            @case ('tabs') {
+              <div class="mform-tabs">
+                <div class="mform-tabbar" role="tablist">
+                  @for (tab of container().children; track tab.key; let i = $index) {
+                    <button
+                      type="button"
+                      class="mform-tab"
+                      role="tab"
+                      [class.is-active]="activeTab() === i"
+                      [attr.aria-selected]="activeTab() === i"
+                      (click)="activeTab.set(i)"
+                    >
+                      {{ tab.label || 'Tab ' + (i + 1) }}
+                    </button>
+                  }
+                </div>
+                @for (tab of container().children; track tab.key; let i = $index) {
+                  @if (activeTab() === i) {
+                    <div class="mform-tabpanel" role="tabpanel">
+                      <mform-node [node]="tab" [engine]="engine()" [tick]="tick()" [providers]="providers()" [scope]="childScope()" [bare]="true" />
+                    </div>
+                  }
+                }
+              </div>
+            }
+            @case ('array') {
+              <section class="mform-panel mform-grid">
+                @if (container().label) {
+                  <header class="mform-panel-head">{{ container().label }}</header>
+                }
+                <div class="mform-panel-body">
+                  @for (row of rows(); track $index; let i = $index) {
+                    <div class="mform-grid-row" role="group" [attr.aria-label]="(container().label || container().key) + ' ' + (i + 1)">
+                      <div class="mform-grid-fields">
+                        @for (child of container().children; track child.key) {
+                          <mform-node [node]="child" [engine]="engine()" [tick]="tick()" [providers]="providers()" [scope]="rowScope(i)" />
+                        }
+                      </div>
+                      <button
+                        type="button"
+                        class="mform-row-remove"
+                        (click)="removeRow(i)"
+                        [attr.aria-label]="'Remove row ' + (i + 1)"
+                      >
+                        ✕
+                      </button>
+                    </div>
+                  }
+                  <button type="button" class="mform-row-add" (click)="addRow()">+ Add</button>
+                </div>
+              </section>
+            }
+            @default {
+              @if (container().label && !bare()) {
+                <section class="mform-panel">
+                  <header class="mform-panel-head">{{ container().label }}</header>
+                  <div class="mform-panel-body">
+                    @for (child of container().children; track child.key) {
+                      <mform-node [node]="child" [engine]="engine()" [tick]="tick()" [providers]="providers()" [scope]="childScope()" />
+                    }
+                  </div>
+                </section>
+              } @else {
+                <div class="mform-group">
+                  @for (child of container().children; track child.key) {
+                    <mform-node [node]="child" [engine]="engine()" [tick]="tick()" [providers]="providers()" [scope]="childScope()" />
+                  }
+                </div>
+              }
+            }
+          }
+        }
+        @case ('input') {
+          @if (field().type !== 'hidden') {
+            <div class="mform-field" [class.has-error]="errors().length > 0">
+              @if (field().type !== 'checkbox') {
+                <label class="mform-label" [attr.for]="controlId()">
+                  {{ field().label || field().key }}
+                  @if (required()) {
+                    <span class="mform-req" aria-hidden="true">*</span>
+                  }
+                </label>
+              }
+              @switch (field().type) {
+                @case ('textarea') {
+                  <textarea
+                    class="mform-control"
+                    [id]="controlId()"
+                    [value]="stringValue()"
+                    [placeholder]="field().placeholder || ''"
+                    [disabled]="field().disabled === true"
+                    [attr.rows]="rowsProp()"
+                    [attr.aria-required]="required() || null"
+                    [attr.aria-invalid]="errors().length > 0 || null"
+                    [attr.aria-describedby]="describedBy()"
+                    (input)="setString($event)"
+                    (blur)="touch()"
+                  ></textarea>
+                }
+                @case ('select') {
+                  <select
+                    class="mform-control"
+                    [id]="controlId()"
+                    [disabled]="field().disabled === true"
+                    [attr.aria-required]="required() || null"
+                    [attr.aria-invalid]="errors().length > 0 || null"
+                    [attr.aria-describedby]="describedBy()"
+                    (change)="setSelect($event)"
+                    (blur)="touch()"
+                  >
+                    <option value="" [selected]="stringValue() === ''"></option>
+                    @for (option of options(); track option.value) {
+                      <option
+                        [value]="option.value"
+                        [selected]="stringValue() === '' + option.value"
+                      >
+                        {{ option.label }}
+                      </option>
+                    }
+                  </select>
+                }
+                @case ('radio') {
+                  <div class="mform-choices" role="radiogroup" [attr.aria-label]="field().label || field().key">
+                    @for (option of options(); track option.value) {
+                      <label class="mform-check">
+                        <input
+                          type="radio"
+                          [name]="controlId()"
+                          [checked]="stringValue() === '' + option.value"
+                          [disabled]="field().disabled === true"
+                          (change)="setValue(option.value)"
+                          (blur)="touch()"
+                        />
+                        <span>{{ option.label }}</span>
+                      </label>
+                    }
+                  </div>
+                }
+                @case ('checkbox') {
+                  <label class="mform-check">
+                    <input
+                      type="checkbox"
+                      [id]="controlId()"
+                      [checked]="value() === true"
+                      [disabled]="field().disabled === true"
+                      [attr.aria-invalid]="errors().length > 0 || null"
+                      [attr.aria-describedby]="describedBy()"
+                      (change)="setChecked($event)"
+                      (blur)="touch()"
+                    />
+                    <span>
+                      {{ field().label || field().key }}
+                      @if (required()) {
+                        <span class="mform-req" aria-hidden="true">*</span>
+                      }
+                    </span>
+                  </label>
+                }
+                @case ('checkbox-group') {
+                  <div class="mform-choices" role="group" [attr.aria-label]="field().label || field().key">
+                    @for (option of options(); track option.value) {
+                      <label class="mform-check">
+                        <input
+                          type="checkbox"
+                          [checked]="mapValue()['' + option.value] === true"
+                          [disabled]="field().disabled === true"
+                          (change)="toggleMap('' + option.value, $event)"
+                          (blur)="touch()"
+                        />
+                        <span>{{ option.label }}</span>
+                      </label>
+                    }
+                  </div>
+                }
+                @case ('file') {
+                  <input
+                    class="mform-control"
+                    type="file"
+                    multiple
+                    [id]="controlId()"
+                    [disabled]="field().disabled === true"
+                    [attr.aria-describedby]="describedBy()"
+                    (change)="setFiles($event)"
+                    (blur)="touch()"
+                  />
+                }
+                @case ('unsupported') {
+                  <input
+                    class="mform-control"
+                    type="text"
+                    disabled
+                    [id]="controlId()"
+                    [value]="'Unsupported field (' + (sourceType() || 'unknown') + ')'"
+                  />
+                }
+                @default {
+                  <input
+                    class="mform-control"
+                    [type]="inputType()"
+                    [id]="controlId()"
+                    [value]="stringValue()"
+                    [placeholder]="field().placeholder || ''"
+                    [disabled]="field().disabled === true"
+                    [attr.aria-required]="required() || null"
+                    [attr.aria-invalid]="errors().length > 0 || null"
+                    [attr.aria-describedby]="describedBy()"
+                    (input)="setString($event)"
+                    (blur)="touch()"
+                  />
+                }
+              }
+              @if (field().description) {
+                <div class="mform-desc" [id]="controlId() + '-desc'">{{ field().description }}</div>
+              }
+              @for (error of errors(); track error.rule) {
+                <div class="mform-error" [id]="controlId() + '-err'" role="alert">{{ error.message }}</div>
+              }
+            </div>
+          }
+        }
+      }
+    }
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: true }] }], engine: [{ type: i0.Input, args: [{ isSignal: true, alias: "engine", required: true }] }], tick: [{ type: i0.Input, args: [{ isSignal: true, alias: "tick", required: true }] }], scope: [{ type: i0.Input, args: [{ isSignal: true, alias: "scope", required: false }] }], bare: [{ type: i0.Input, args: [{ isSignal: true, alias: "bare", required: false }] }], providers: [{ type: i0.Input, args: [{ isSignal: true, alias: "providers", required: false }] }] } });
+
+/**
+ * `<mform-renderer>` — renders a form at runtime from a `FormSchema` (or any
+ * definition a registered importer understands) and manages its lifecycle:
+ * values, validation, conditional visibility and submission. Wizard schemas
+ * (`settings.display: 'wizard'`) render as steps with per-step validation.
+ *
+ * Theming: every visual primitive reads a `--mform-*` CSS custom property
+ * with a self-contained fallback, so the component looks finished on its own
+ * and adopts the host design system when the host overrides the tokens.
+ */
+class FormRendererComponent {
+    /** Native schema input. Takes precedence over `source`. */
+    schema = input(null, ...(ngDevMode ? [{ debugName: "schema" }] : /* istanbul ignore next */ []));
+    /** Foreign definition (object or JSON string) resolved via importers. */
+    source = input(null, ...(ngDevMode ? [{ debugName: "source" }] : /* istanbul ignore next */ []));
+    /** Initial data merged over schema defaults. */
+    initialData = input(null, ...(ngDevMode ? [{ debugName: "initialData" }] : /* istanbul ignore next */ []));
+    /** Named providers resolving `optionsSource: provider` fields. */
+    optionsProviders = input({}, ...(ngDevMode ? [{ debugName: "optionsProviders" }] : /* istanbul ignore next */ []));
+    /** Host-supplied message resolver (localization of validation messages). */
+    messages = input(null, ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
+    /** Fixed renderer texts (override to localize). `{{count}}` in `summary`. */
+    labels = input({
+        previous: 'Previous',
+        next: 'Next',
+        submit: 'Submit',
+        summary: '{{count}} field(s) need attention:',
+    }, { ...(ngDevMode ? { debugName: "labels" } : /* istanbul ignore next */ {}), transform: (value) => ({
+            previous: 'Previous',
+            next: 'Next',
+            submit: 'Submit',
+            summary: '{{count}} field(s) need attention:',
+            ...value,
+        }) });
+    summaryTitle() {
+        return this.labels().summary.replace(/\{\{\s*count\s*\}\}/g, String(this.errorSummary().length));
+    }
+    /** Fired on submit; `ok` is false when validation failed. */
+    submitted = output();
+    /** Fired on every value change with the full data snapshot. */
+    valueChanged = output();
+    /** Bumped on every engine event; nodes read it to refresh. */
+    tick = signal(0, ...(ngDevMode ? [{ debugName: "tick" }] : /* istanbul ignore next */ []));
+    /** Active wizard step index. */
+    currentStep = signal(0, ...(ngDevMode ? [{ debugName: "currentStep" }] : /* istanbul ignore next */ []));
+    resolved = computed(() => {
+        const native = this.schema();
+        if (native)
+            return { schema: native, warnings: [] };
+        const source = this.source();
+        if (source === null || source === undefined)
+            return { schema: null, warnings: [] };
+        try {
+            const result = importForm(source, [createLegacyImporter()]);
+            return { schema: result.schema, warnings: result.warnings };
+        }
+        catch {
+            return {
+                schema: null,
+                warnings: [
+                    { code: 'unreadable-source', message: 'The form definition could not be read.' },
+                ],
+            };
+        }
+    }, ...(ngDevMode ? [{ debugName: "resolved" }] : /* istanbul ignore next */ []));
+    /** Import degradations for the current `source`, if any. */
+    importWarnings = computed(() => this.resolved().warnings, ...(ngDevMode ? [{ debugName: "importWarnings" }] : /* istanbul ignore next */ []));
+    engine = computed(() => {
+        const schema = this.resolved().schema;
+        return schema
+            ? createFormEngine(schema, {
+                initialData: this.initialData() ?? undefined,
+                messages: this.messages() ?? undefined,
+            })
+            : null;
+    }, ...(ngDevMode ? [{ debugName: "engine" }] : /* istanbul ignore next */ []));
+    isWizard = computed(() => this.resolved().schema?.settings?.display === 'wizard' && this.steps().length > 0, ...(ngDevMode ? [{ debugName: "isWizard" }] : /* istanbul ignore next */ []));
+    /** Wizard pages: the top-level containers of the schema. */
+    steps = computed(() => (this.resolved().schema?.fields ?? []).filter((node) => node.kind === 'container'), ...(ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []));
+    errorSummary = signal([], ...(ngDevMode ? [{ debugName: "errorSummary" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect((onCleanup) => {
+            const engine = this.engine();
+            this.errorSummary.set([]);
+            this.tick.set(0);
+            this.currentStep.set(0);
+            if (!engine)
+                return;
+            const unsubscribe = engine.subscribe((event) => {
+                this.tick.update((v) => v + 1);
+                if (event.type === 'value-change') {
+                    this.valueChanged.emit(engine.getData());
+                }
+                if (event.type === 'validation') {
+                    // Keep the banner in sync as the user fixes fields after a submit.
+                    if (this.errorSummary().length > 0) {
+                        this.errorSummary.set(event.errors);
+                    }
+                }
+            });
+            onCleanup(unsubscribe);
+        });
+    }
+    // -- wizard navigation ----------------------------------------------------
+    previousStep() {
+        this.errorSummary.set([]);
+        this.currentStep.update((step) => Math.max(0, step - 1));
+    }
+    nextStep() {
+        const engine = this.engine();
+        const step = this.steps()[this.currentStep()];
+        if (!engine || !step)
+            return;
+        const errors = engine.validateContainer(step.key);
+        if (errors.length > 0) {
+            this.errorSummary.set(errors);
+            this.focusFirstError(errors);
+            return;
+        }
+        this.errorSummary.set([]);
+        this.currentStep.update((index) => Math.min(this.steps().length - 1, index + 1));
+    }
+    // -- submission -----------------------------------------------------------
+    onSubmit(event) {
+        event.preventDefault();
+        const engine = this.engine();
+        if (!engine)
+            return;
+        const result = engine.submit();
+        this.errorSummary.set(result.errors);
+        if (!result.ok) {
+            if (this.isWizard()) {
+                const stepIndex = this.stepIndexForPath(result.errors[0]?.path ?? '');
+                if (stepIndex >= 0)
+                    this.currentStep.set(stepIndex);
+            }
+            this.focusFirstError(result.errors);
+        }
+        this.submitted.emit(result);
+    }
+    /** Finds the wizard step that owns a (possibly row-indexed) data path. */
+    stepIndexForPath(path) {
+        const pattern = path
+            .split('.')
+            .map((part) => (/^\d+$/.test(part) ? '*' : part))
+            .join('.');
+        return this.steps().findIndex((step) => collectInputs({ version: 1, fields: step.children }).some((entry) => entry.path === pattern));
+    }
+    focusFirstError(errors) {
+        const first = errors[0];
+        if (!first)
+            return;
+        const id = `mform-${first.path.replace(/\./g, '-')}`;
+        // Focus after the view updated with the error states.
+        queueMicrotask(() => document.getElementById(id)?.focus());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FormRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FormRendererComponent, isStandalone: true, selector: "mform-renderer", inputs: { schema: { classPropertyName: "schema", publicName: "schema", isSignal: true, isRequired: false, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: false, transformFunction: null }, initialData: { classPropertyName: "initialData", publicName: "initialData", isSignal: true, isRequired: false, transformFunction: null }, optionsProviders: { classPropertyName: "optionsProviders", publicName: "optionsProviders", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { submitted: "submitted", valueChanged: "valueChanged" }, ngImport: i0, template: `
+    @if (engine(); as engine) {
+      <form class="mform-root" novalidate (submit)="onSubmit($event)">
+        @if (errorSummary().length > 0) {
+          <div class="mform-summary" role="alert" tabindex="-1">
+            <strong>{{ summaryTitle() }}</strong>
+            <ul>
+              @for (error of errorSummary(); track error.path + error.rule) {
+                <li>{{ error.message }}</li>
+              }
+            </ul>
+          </div>
+        }
+        @if (isWizard()) {
+          <ol class="mform-steps">
+            @for (step of steps(); track step.key; let i = $index) {
+              <li
+                class="mform-step"
+                [class.is-active]="currentStep() === i"
+                [class.is-done]="i < currentStep()"
+                [attr.aria-current]="currentStep() === i ? 'step' : null"
+              >
+                <span class="mform-step-index">{{ i + 1 }}</span>
+                <span class="mform-step-label">{{ step.label || 'Step ' + (i + 1) }}</span>
+              </li>
+            }
+          </ol>
+          @if (steps()[currentStep()]; as step) {
+            <mform-node
+              [node]="step"
+              [engine]="engine"
+              [tick]="tick()"
+              [providers]="optionsProviders()"
+              [bare]="true"
+            />
+          }
+          <div class="mform-wizard-nav">
+            @if (currentStep() > 0) {
+              <button type="button" class="mform-btn mform-btn-secondary" (click)="previousStep()">
+                {{ labels().previous }}
+              </button>
+            }
+            @if (currentStep() < steps().length - 1) {
+              <button type="button" class="mform-btn" (click)="nextStep()">
+                {{ labels().next }}
+              </button>
+            } @else {
+              <button type="submit" class="mform-btn">{{ labels().submit }}</button>
+            }
+          </div>
+        } @else {
+          @for (node of engine.schema.fields; track node.key) {
+            <mform-node [node]="node" [engine]="engine" [tick]="tick()" [providers]="optionsProviders()" />
+          }
+        }
+      </form>
+    }
+  `, isInline: true, styles: [".mform-root{display:flex;flex-direction:column;gap:var(--mform-gap, 16px);font-family:var(--mform-font, system-ui, \"Segoe UI\", sans-serif);color:var(--mform-text, #1f1b2e)}.mform-node{display:contents}.mform-field{display:flex;flex-direction:column;gap:6px}.mform-label{font-size:var(--mform-label-size, 13px);font-weight:var(--mform-label-weight, 600)}.mform-req{color:var(--mform-danger, #c62842);margin-left:2px}.mform-control{font:inherit;width:100%;padding:var(--mform-control-padding, 9px 12px);border:1px solid var(--mform-border, #d9d5e6);border-radius:var(--mform-control-radius, 8px);background:var(--mform-control-bg, #fff);color:inherit;box-sizing:border-box}textarea.mform-control{min-height:72px;resize:vertical}.mform-control:focus-visible{outline:2px solid var(--mform-focus, #8e6ff0);outline-offset:1px;border-color:var(--mform-focus, #8e6ff0)}.mform-field.has-error .mform-control{border-color:var(--mform-danger, #c62842)}.mform-desc{font-size:12px;color:var(--mform-muted, #6b6580)}.mform-error{font-size:12px;color:var(--mform-danger, #c62842)}.mform-choices{display:flex;flex-direction:column;gap:6px}.mform-check{display:flex;align-items:center;gap:8px;font-size:14px;cursor:pointer}.mform-check input{width:16px;height:16px;accent-color:var(--mform-primary, #6d4bd0)}.mform-panel{border:1px solid var(--mform-border, #d9d5e6);border-radius:var(--mform-radius, 10px);overflow:hidden}.mform-panel-head{background:var(--mform-panel-head-bg, linear-gradient(90deg, #efeaff, #f8f6ff));color:var(--mform-panel-head-text, inherit);padding:10px 16px;font-weight:600;font-size:14px;border-bottom:1px solid var(--mform-border, #d9d5e6)}.mform-panel-body,.mform-group,.mform-column,.mform-tabpanel{display:flex;flex-direction:column;gap:var(--mform-gap, 16px)}.mform-panel-body{padding:var(--mform-panel-padding, 16px)}.mform-columns{display:grid;gap:var(--mform-gap, 16px)}.mform-tabbar{display:flex;gap:4px;border-bottom:2px solid var(--mform-border, #d9d5e6);margin-bottom:14px}.mform-tab{padding:8px 18px;font:inherit;font-size:14px;border:none;background:none;color:var(--mform-muted, #6b6580);cursor:pointer}.mform-tab.is-active{color:var(--mform-primary, #6d4bd0);font-weight:600;border-bottom:2px solid var(--mform-primary, #6d4bd0);margin-bottom:-2px}.mform-grid-row{display:flex;align-items:flex-start;gap:8px;padding:10px 0;border-bottom:1px dashed var(--mform-border, #d9d5e6)}.mform-grid-fields{flex:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--mform-gap, 16px)}.mform-row-remove{border:none;background:none;color:var(--mform-muted, #6b6580);font:inherit;cursor:pointer;padding:6px 8px}.mform-row-remove:hover{color:var(--mform-danger, #c62842)}.mform-row-add{align-self:flex-start;background:none;border:1px dashed var(--mform-primary, #6d4bd0);color:var(--mform-primary, #6d4bd0);padding:7px 14px;border-radius:var(--mform-control-radius, 8px);font:inherit;font-size:13px;cursor:pointer}.mform-btn{align-self:flex-start;background:var(--mform-primary, #6d4bd0);color:var(--mform-primary-contrast, #fff);border:none;border-radius:var(--mform-control-radius, 8px);padding:11px 26px;font:inherit;font-weight:600;cursor:pointer}.mform-btn:hover{filter:brightness(1.08)}.mform-btn:focus-visible{outline:2px solid var(--mform-focus, #8e6ff0);outline-offset:2px}.mform-content{font-size:14px}.mform-unsupported{font-size:13px;color:var(--mform-muted, #6b6580);border:1px dashed var(--mform-border, #d9d5e6);border-radius:var(--mform-radius, 10px);padding:10px 14px}.mform-steps{display:flex;gap:18px;list-style:none;margin:0 0 4px;padding:0 0 12px;border-bottom:1px solid var(--mform-border, #d9d5e6);flex-wrap:wrap}.mform-step{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--mform-muted, #6b6580)}.mform-step-index{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--mform-border, #d9d5e6);font-size:11px;font-weight:600}.mform-step.is-active{color:var(--mform-primary, #6d4bd0);font-weight:600}.mform-step.is-active .mform-step-index{border-color:var(--mform-primary, #6d4bd0);background:var(--mform-primary, #6d4bd0);color:var(--mform-primary-contrast, #fff)}.mform-step.is-done .mform-step-index{border-color:var(--mform-primary, #6d4bd0);color:var(--mform-primary, #6d4bd0)}.mform-wizard-nav{display:flex;gap:10px;padding-top:4px}.mform-btn-secondary{background:none;border:1px solid var(--mform-primary, #6d4bd0);color:var(--mform-primary, #6d4bd0)}.mform-summary{border:1px solid var(--mform-danger, #c62842);background:var(--mform-danger-bg, #fdf0f2);color:var(--mform-danger, #c62842);border-radius:var(--mform-radius, 10px);padding:12px 16px;font-size:13px}.mform-summary ul{margin:6px 0 0;padding-left:18px}\n"], dependencies: [{ kind: "component", type: FormNodeComponent, selector: "mform-node", inputs: ["node", "engine", "tick", "scope", "bare", "providers"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FormRendererComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mform-renderer', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [FormNodeComponent], template: `
+    @if (engine(); as engine) {
+      <form class="mform-root" novalidate (submit)="onSubmit($event)">
+        @if (errorSummary().length > 0) {
+          <div class="mform-summary" role="alert" tabindex="-1">
+            <strong>{{ summaryTitle() }}</strong>
+            <ul>
+              @for (error of errorSummary(); track error.path + error.rule) {
+                <li>{{ error.message }}</li>
+              }
+            </ul>
+          </div>
+        }
+        @if (isWizard()) {
+          <ol class="mform-steps">
+            @for (step of steps(); track step.key; let i = $index) {
+              <li
+                class="mform-step"
+                [class.is-active]="currentStep() === i"
+                [class.is-done]="i < currentStep()"
+                [attr.aria-current]="currentStep() === i ? 'step' : null"
+              >
+                <span class="mform-step-index">{{ i + 1 }}</span>
+                <span class="mform-step-label">{{ step.label || 'Step ' + (i + 1) }}</span>
+              </li>
+            }
+          </ol>
+          @if (steps()[currentStep()]; as step) {
+            <mform-node
+              [node]="step"
+              [engine]="engine"
+              [tick]="tick()"
+              [providers]="optionsProviders()"
+              [bare]="true"
+            />
+          }
+          <div class="mform-wizard-nav">
+            @if (currentStep() > 0) {
+              <button type="button" class="mform-btn mform-btn-secondary" (click)="previousStep()">
+                {{ labels().previous }}
+              </button>
+            }
+            @if (currentStep() < steps().length - 1) {
+              <button type="button" class="mform-btn" (click)="nextStep()">
+                {{ labels().next }}
+              </button>
+            } @else {
+              <button type="submit" class="mform-btn">{{ labels().submit }}</button>
+            }
+          </div>
+        } @else {
+          @for (node of engine.schema.fields; track node.key) {
+            <mform-node [node]="node" [engine]="engine" [tick]="tick()" [providers]="optionsProviders()" />
+          }
+        }
+      </form>
+    }
+  `, styles: [".mform-root{display:flex;flex-direction:column;gap:var(--mform-gap, 16px);font-family:var(--mform-font, system-ui, \"Segoe UI\", sans-serif);color:var(--mform-text, #1f1b2e)}.mform-node{display:contents}.mform-field{display:flex;flex-direction:column;gap:6px}.mform-label{font-size:var(--mform-label-size, 13px);font-weight:var(--mform-label-weight, 600)}.mform-req{color:var(--mform-danger, #c62842);margin-left:2px}.mform-control{font:inherit;width:100%;padding:var(--mform-control-padding, 9px 12px);border:1px solid var(--mform-border, #d9d5e6);border-radius:var(--mform-control-radius, 8px);background:var(--mform-control-bg, #fff);color:inherit;box-sizing:border-box}textarea.mform-control{min-height:72px;resize:vertical}.mform-control:focus-visible{outline:2px solid var(--mform-focus, #8e6ff0);outline-offset:1px;border-color:var(--mform-focus, #8e6ff0)}.mform-field.has-error .mform-control{border-color:var(--mform-danger, #c62842)}.mform-desc{font-size:12px;color:var(--mform-muted, #6b6580)}.mform-error{font-size:12px;color:var(--mform-danger, #c62842)}.mform-choices{display:flex;flex-direction:column;gap:6px}.mform-check{display:flex;align-items:center;gap:8px;font-size:14px;cursor:pointer}.mform-check input{width:16px;height:16px;accent-color:var(--mform-primary, #6d4bd0)}.mform-panel{border:1px solid var(--mform-border, #d9d5e6);border-radius:var(--mform-radius, 10px);overflow:hidden}.mform-panel-head{background:var(--mform-panel-head-bg, linear-gradient(90deg, #efeaff, #f8f6ff));color:var(--mform-panel-head-text, inherit);padding:10px 16px;font-weight:600;font-size:14px;border-bottom:1px solid var(--mform-border, #d9d5e6)}.mform-panel-body,.mform-group,.mform-column,.mform-tabpanel{display:flex;flex-direction:column;gap:var(--mform-gap, 16px)}.mform-panel-body{padding:var(--mform-panel-padding, 16px)}.mform-columns{display:grid;gap:var(--mform-gap, 16px)}.mform-tabbar{display:flex;gap:4px;border-bottom:2px solid var(--mform-border, #d9d5e6);margin-bottom:14px}.mform-tab{padding:8px 18px;font:inherit;font-size:14px;border:none;background:none;color:var(--mform-muted, #6b6580);cursor:pointer}.mform-tab.is-active{color:var(--mform-primary, #6d4bd0);font-weight:600;border-bottom:2px solid var(--mform-primary, #6d4bd0);margin-bottom:-2px}.mform-grid-row{display:flex;align-items:flex-start;gap:8px;padding:10px 0;border-bottom:1px dashed var(--mform-border, #d9d5e6)}.mform-grid-fields{flex:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--mform-gap, 16px)}.mform-row-remove{border:none;background:none;color:var(--mform-muted, #6b6580);font:inherit;cursor:pointer;padding:6px 8px}.mform-row-remove:hover{color:var(--mform-danger, #c62842)}.mform-row-add{align-self:flex-start;background:none;border:1px dashed var(--mform-primary, #6d4bd0);color:var(--mform-primary, #6d4bd0);padding:7px 14px;border-radius:var(--mform-control-radius, 8px);font:inherit;font-size:13px;cursor:pointer}.mform-btn{align-self:flex-start;background:var(--mform-primary, #6d4bd0);color:var(--mform-primary-contrast, #fff);border:none;border-radius:var(--mform-control-radius, 8px);padding:11px 26px;font:inherit;font-weight:600;cursor:pointer}.mform-btn:hover{filter:brightness(1.08)}.mform-btn:focus-visible{outline:2px solid var(--mform-focus, #8e6ff0);outline-offset:2px}.mform-content{font-size:14px}.mform-unsupported{font-size:13px;color:var(--mform-muted, #6b6580);border:1px dashed var(--mform-border, #d9d5e6);border-radius:var(--mform-radius, 10px);padding:10px 14px}.mform-steps{display:flex;gap:18px;list-style:none;margin:0 0 4px;padding:0 0 12px;border-bottom:1px solid var(--mform-border, #d9d5e6);flex-wrap:wrap}.mform-step{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--mform-muted, #6b6580)}.mform-step-index{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--mform-border, #d9d5e6);font-size:11px;font-weight:600}.mform-step.is-active{color:var(--mform-primary, #6d4bd0);font-weight:600}.mform-step.is-active .mform-step-index{border-color:var(--mform-primary, #6d4bd0);background:var(--mform-primary, #6d4bd0);color:var(--mform-primary-contrast, #fff)}.mform-step.is-done .mform-step-index{border-color:var(--mform-primary, #6d4bd0);color:var(--mform-primary, #6d4bd0)}.mform-wizard-nav{display:flex;gap:10px;padding-top:4px}.mform-btn-secondary{background:none;border:1px solid var(--mform-primary, #6d4bd0);color:var(--mform-primary, #6d4bd0)}.mform-summary{border:1px solid var(--mform-danger, #c62842);background:var(--mform-danger-bg, #fdf0f2);color:var(--mform-danger, #c62842);border-radius:var(--mform-radius, 10px);padding:12px 16px;font-size:13px}.mform-summary ul{margin:6px 0 0;padding-left:18px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { schema: [{ type: i0.Input, args: [{ isSignal: true, alias: "schema", required: false }] }], source: [{ type: i0.Input, args: [{ isSignal: true, alias: "source", required: false }] }], initialData: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialData", required: false }] }], optionsProviders: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionsProviders", required: false }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], submitted: [{ type: i0.Output, args: ["submitted"] }], valueChanged: [{ type: i0.Output, args: ["valueChanged"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FormNodeComponent, FormRendererComponent };
+//# sourceMappingURL=mosaicoo-form-angular.mjs.map