@mk-kit/ui 0.36.0 → 0.38.0

package/fesm2022/mk-kit-ui-dynamic-form.mjs

@@ -0,0 +1,578 @@
+import * as i1 from '@angular/forms';
+import { Validators, FormArray, FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import * as i0 from '@angular/core';
+import { input, inject, TemplateRef, Directive, forwardRef, numberAttribute, computed, ChangeDetectionStrategy, Component, DestroyRef, model, booleanAttribute, output, contentChildren, signal, effect, untracked } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { MK_I18N } from '@mk-kit/ui/core';
+import { MkButton } from '@mk-kit/ui/button';
+import { MkCheckbox } from '@mk-kit/ui/checkbox';
+import { MkFormField, MkInput, MkNumberInput, MkCurrencyInput, MkSelect, MkMultiSelect, MkAutocomplete, MkRadioGroup, MkRadio, MkButtonToggleGroup, MkButtonToggle, MkSwitch, MkSlider, MkRating, MkColorPicker, MkTagInput, MkPhoneInput, MkFileUpload, MkCodeEditor, MkPasswordInput } from '@mk-kit/ui/forms';
+import { MkDatePicker, MkTimePicker, MkDateTimePicker } from '@mk-kit/ui/datetime';
+
+function mkIsGroup(f) {
+    return f.type === 'group';
+}
+function mkIsArray(f) {
+    return f.type === 'array';
+}
+function mkIsSection(f) {
+    return f.type === 'section';
+}
+function mkIsValueField(f) {
+    return f.type !== 'group' && f.type !== 'array' && f.type !== 'section';
+}
+
+/* ------------------------------------------------------------------------ */
+/* Defaults                                                                  */
+/* ------------------------------------------------------------------------ */
+/** The empty value a field type starts with when no `default` is given. */
+function mkDynamicEmptyValue(field) {
+    switch (field.type) {
+        case 'checkbox':
+        case 'switch':
+            return false;
+        case 'multi-select':
+        case 'tags':
+        case 'file':
+            return [];
+        case 'number':
+        case 'currency':
+        case 'slider':
+        case 'rating':
+        case 'date':
+        case 'time':
+        case 'datetime':
+        case 'select':
+        case 'radio':
+        case 'toggle':
+        case 'autocomplete':
+        case 'color':
+        case 'phone':
+            return null;
+        default:
+            return '';
+    }
+}
+/** Default value object of a field list (groups nested, arrays as item lists). */
+function mkDynamicDefaults(fields) {
+    const out = {};
+    for (const f of fields) {
+        if (mkIsSection(f))
+            continue;
+        if (mkIsGroup(f))
+            out[f.key] = mkDynamicDefaults(f.fields);
+        else if (mkIsArray(f))
+            out[f.key] = (f.default ?? []).map((item) => ({ ...mkDynamicDefaults(f.fields), ...item }));
+        else
+            out[f.key] = f.default !== undefined ? f.default : mkDynamicEmptyValue(f);
+    }
+    return out;
+}
+/* ------------------------------------------------------------------------ */
+/* Validators                                                                */
+/* ------------------------------------------------------------------------ */
+/** Angular validators for one value field, from its declarative `validators` + `required`. */
+function mkDynamicValidators(field) {
+    const v = field.validators ?? {};
+    const out = [];
+    if (field.required)
+        out.push(field.type === 'checkbox' || field.type === 'switch' ? Validators.requiredTrue : Validators.required);
+    if (v.min !== undefined)
+        out.push(Validators.min(v.min));
+    if (v.max !== undefined)
+        out.push(Validators.max(v.max));
+    if (v.minLength !== undefined)
+        out.push(Validators.minLength(v.minLength));
+    if (v.maxLength !== undefined)
+        out.push(Validators.maxLength(v.maxLength));
+    if (v.pattern !== undefined)
+        out.push(Validators.pattern(v.pattern));
+    if (v.email || field.type === 'email')
+        out.push(Validators.email);
+    if (v.custom)
+        out.push(...v.custom);
+    return out;
+}
+/* ------------------------------------------------------------------------ */
+/* Form construction                                                         */
+/* ------------------------------------------------------------------------ */
+/** Build the `FormControl` / `FormGroup` / `FormArray` for one field. */
+function mkDynamicControl(field, value) {
+    if (mkIsGroup(field))
+        return mkDynamicGroup(field.fields, value);
+    if (mkIsArray(field)) {
+        const items = value ?? field.default ?? [];
+        return new FormArray(items.map((item) => mkDynamicGroup(field.fields, item)), arrayValidators(field));
+    }
+    const f = field;
+    const initial = value !== undefined ? value : f.default !== undefined ? f.default : mkDynamicEmptyValue(f);
+    return new FormControl({ value: initial, disabled: !!f.disabled }, { validators: mkDynamicValidators(f) });
+}
+function arrayValidators(field) {
+    const out = [];
+    if (field.min)
+        out.push((c) => (c.length < field.min ? { minItems: { requiredLength: field.min, actualLength: c.length } } : null));
+    if (field.max)
+        out.push((c) => (c.length > field.max ? { maxItems: { requiredLength: field.max, actualLength: c.length } } : null));
+    return out;
+}
+/** A `FormGroup` for a field list; `value` (partial) overrides the defaults. */
+function mkDynamicGroup(fields, value) {
+    const controls = {};
+    for (const f of fields) {
+        if (mkIsSection(f))
+            continue;
+        controls[f.key] = mkDynamicControl(f, value?.[f.key]);
+    }
+    return new FormGroup(controls);
+}
+/** Build the reactive form of a whole schema. */
+function mkDynamicForm(schema, value) {
+    return mkDynamicGroup(schema.fields, value);
+}
+/* ------------------------------------------------------------------------ */
+/* Conditions                                                                */
+/* ------------------------------------------------------------------------ */
+function read(value, path) {
+    return path.split('.').reduce((acc, k) => (acc && typeof acc === 'object' ? acc[k] : undefined), value);
+}
+function isEmpty(v) {
+    return v === null || v === undefined || v === '' || v === false || (Array.isArray(v) && v.length === 0);
+}
+/**
+ * Evaluate a condition against a form value. `value` is normally the whole
+ * form value; inside an array item the item's own value is used, with the
+ * root available under `$root`.
+ */
+function mkDynamicCondition(cond, value) {
+    if (cond === undefined)
+        return true;
+    if (typeof cond === 'function')
+        return !!cond(value);
+    if ('and' in cond)
+        return cond.and.every((c) => mkDynamicCondition(c, value));
+    if ('or' in cond)
+        return cond.or.some((c) => mkDynamicCondition(c, value));
+    if ('not' in cond)
+        return !mkDynamicCondition(cond.not, value);
+    const v = read(value, cond.field);
+    if ('eq' in cond && v !== cond.eq)
+        return false;
+    if ('neq' in cond && v === cond.neq)
+        return false;
+    if (cond.in && !cond.in.includes(v))
+        return false;
+    if (cond.notIn && cond.notIn.includes(v))
+        return false;
+    if (cond.truthy !== undefined && !!v !== cond.truthy)
+        return false;
+    if (cond.empty !== undefined && isEmpty(v) !== cond.empty)
+        return false;
+    return true;
+}
+/* ------------------------------------------------------------------------ */
+/* Introspection helpers                                                     */
+/* ------------------------------------------------------------------------ */
+/** Depth-first list of every value field with its dotted path. */
+function mkDynamicFlatten(fields, prefix = '') {
+    const out = [];
+    for (const f of fields) {
+        if (mkIsSection(f))
+            continue;
+        const path = prefix ? `${prefix}.${f.key}` : f.key;
+        out.push({ path, field: f });
+        if (mkIsGroup(f))
+            out.push(...mkDynamicFlatten(f.fields, path));
+    }
+    return out;
+}
+/** Column span a field takes in a grid of `columns`. */
+function mkDynamicSpan(field, columns) {
+    const c = Math.min(12, Math.max(1, columns || 1));
+    if (mkIsSection(field) || mkIsGroup(field) || mkIsArray(field))
+        return field.span ?? 12;
+    const span = field.span ?? Math.round(12 / c);
+    return Math.min(12, Math.max(1, span));
+}
+
+/**
+ * Registers a renderer for a custom field type:
+ *
+ * ```html
+ * <mk-dynamic-form [schema]="schema">
+ *   <ng-template mkDynamicField="signature" let-field let-control="control">
+ *     <mk-signature-pad [formControl]="control" />
+ *   </ng-template>
+ * </mk-dynamic-form>
+ * ```
+ *
+ * A field `{ type: 'custom', key: 'sig', props: { renderer: 'signature' } }`
+ * (or any built-in `type` you want to override) then renders this template
+ * inside the usual `mk-form-field`.
+ */
+class MkDynamicFieldDef {
+    /** The type (or `props.renderer` name) this template renders. */
+    mkDynamicField = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mkDynamicField" }] : /* istanbul ignore next */ []));
+    template = inject(TemplateRef);
+    static ngTemplateContextGuard(_dir, ctx) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkDynamicFieldDef, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: MkDynamicFieldDef, isStandalone: true, selector: "ng-template[mkDynamicField]", inputs: { mkDynamicField: { classPropertyName: "mkDynamicField", publicName: "mkDynamicField", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkDynamicFieldDef, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[mkDynamicField]' }]
+        }], propDecorators: { mkDynamicField: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkDynamicField", required: true }] }] } });
+/**
+ * Renders one field list (the root, a group, or one array item) as a grid.
+ * Internal — projected by {@link MkDynamicForm}; recursive for groups/arrays.
+ */
+class MkDynamicFields {
+    root = inject(forwardRef(() => MkDynamicForm));
+    i18n = inject(MK_I18N);
+    fields = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fields" }] : /* istanbul ignore next */ []));
+    group = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "group" }] : /* istanbul ignore next */ []));
+    columns = input(1, { ...(ngDevMode ? { debugName: "columns" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /** Value the conditions of this level are evaluated against. */
+    scope = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scope" }] : /* istanbul ignore next */ []));
+    labelPosition = computed(() => this.root.labelPosition(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelPosition" }] : /* istanbul ignore next */ []));
+    size = computed(() => this.root.size(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    control(f) {
+        return this.group().get(f.key);
+    }
+    formGroup(f) {
+        return this.group().get(f.key);
+    }
+    formArray(f) {
+        return this.group().get(f.key);
+    }
+    isVisible(f) {
+        return mkDynamicCondition(f.showWhen, this.scope());
+    }
+    span(f) {
+        return mkDynamicSpan(f, this.columns());
+    }
+    columnsOf(f) {
+        return f.columns ?? this.columns();
+    }
+    isGroup = mkIsGroup;
+    isArray = mkIsArray;
+    isSection = mkIsSection;
+    isValue = mkIsValueField;
+    /** Custom template for a value field, if one is registered. */
+    customTemplate(f) {
+        const name = f.props?.['renderer'] ?? f.type;
+        return this.root.templateFor(name);
+    }
+    customContext(f) {
+        return { $implicit: f, field: f, control: this.control(f), value: this.scope() };
+    }
+    /** `props.x` with a typed default. */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    p(f, key, fallback) {
+        const v = f.props?.[key];
+        return v === undefined ? fallback : v;
+    }
+    inputType(f) {
+        return f.type === 'text' || f.type === 'textarea' ? 'text' : f.type;
+    }
+    itemScope(f, index) {
+        const item = (this.formArray(f).at(index)?.getRawValue() ?? {});
+        return { ...item, $root: this.scope()['$root'] ?? this.scope(), $index: index };
+    }
+    canAdd(f) {
+        return !this.control(f).disabled && (!f.max || this.formArray(f).length < f.max);
+    }
+    canRemove(f) {
+        return !this.control(f).disabled && this.formArray(f).length > (f.min ?? 0);
+    }
+    addItem(f) {
+        const arr = this.formArray(f);
+        arr.push(mkDynamicGroup(f.fields));
+        arr.markAsDirty();
+        this.root.sync();
+    }
+    removeItem(f, index) {
+        const arr = this.formArray(f);
+        arr.removeAt(index);
+        arr.markAsDirty();
+        this.root.sync();
+    }
+    trackItem(index, item) {
+        return item;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkDynamicFields, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkDynamicFields, isStandalone: true, selector: "mk-dynamic-fields", inputs: { fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: true, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, scope: { classPropertyName: "scope", publicName: "scope", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "style.--mk-dyn-columns": "columns()" }, classAttribute: "mk-dynamic-fields" }, ngImport: i0, template: "@for (f of fields(); track f.type + ':' + ($any(f).key ?? $any(f).label ?? $index)) {\n  @if (isVisible(f)) {\n    @if (isSection(f)) {\n      <div class=\"mk-dynamic-fields__section\" [style.--mk-dyn-span]=\"span(f)\">\n        <h3 class=\"mk-dynamic-fields__section-title\">{{ f.label }}</h3>\n        @if (f.hint) {\n          <p class=\"mk-dynamic-fields__section-hint\">{{ f.hint }}</p>\n        }\n      </div>\n    } @else if (isGroup(f)) {\n      <fieldset class=\"mk-dynamic-fields__group\" [style.--mk-dyn-span]=\"span(f)\" [disabled]=\"control(f).disabled\">\n        @if (f.label) {\n          <legend class=\"mk-dynamic-fields__legend\">{{ f.label }}</legend>\n        }\n        @if (f.hint) {\n          <p class=\"mk-dynamic-fields__section-hint\">{{ f.hint }}</p>\n        }\n        <mk-dynamic-fields [fields]=\"f.fields\" [group]=\"formGroup(f)\" [columns]=\"columnsOf(f)\" [scope]=\"scope()\" />\n      </fieldset>\n    } @else if (isArray(f)) {\n      <fieldset class=\"mk-dynamic-fields__array\" [style.--mk-dyn-span]=\"span(f)\" [disabled]=\"control(f).disabled\">\n        @if (f.label) {\n          <legend class=\"mk-dynamic-fields__legend\">{{ f.label }}</legend>\n        }\n        @if (f.hint) {\n          <p class=\"mk-dynamic-fields__section-hint\">{{ f.hint }}</p>\n        }\n        @for (item of formArray(f).controls; track item; let i = $index) {\n          <div class=\"mk-dynamic-fields__item\">\n            <mk-dynamic-fields class=\"mk-dynamic-fields__item-fields\" [fields]=\"f.fields\" [group]=\"item\" [columns]=\"columnsOf(f)\" [scope]=\"itemScope(f, i)\" />\n            <button\n              mkButton\n              type=\"button\"\n              variant=\"ghost\"\n              tone=\"neutral\"\n              size=\"sm\"\n              iconOnly\n              class=\"mk-dynamic-fields__remove\"\n              [attr.aria-label]=\"i18n.dynamicFormRemove(i + 1)\"\n              [title]=\"i18n.dynamicFormRemove(i + 1)\"\n              [disabled]=\"!canRemove(f)\"\n              (click)=\"removeItem(f, i)\"\n            >\n              <svg viewBox=\"0 0 16 16\" width=\"16\" height=\"16\" aria-hidden=\"true\" focusable=\"false\">\n                <path d=\"M4 4l8 8M12 4l-8 8\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\n              </svg>\n            </button>\n          </div>\n        }\n        <div class=\"mk-dynamic-fields__array-actions\">\n          <button mkButton type=\"button\" variant=\"soft\" size=\"sm\" [disabled]=\"!canAdd(f)\" (click)=\"addItem(f)\">\n            {{ f.addLabel || i18n.dynamicFormAdd }}\n          </button>\n        </div>\n      </fieldset>\n    } @else if (isValue(f)) {\n      @let ctrl = control(f);\n      @let custom = customTemplate(f);\n      <mk-form-field\n        class=\"mk-dynamic-fields__field\"\n        [style.--mk-dyn-span]=\"span(f)\"\n        [label]=\"f.type === 'checkbox' || f.type === 'switch' ? '' : (f.label ?? '')\"\n        [hint]=\"f.hint ?? ''\"\n        [required]=\"!!f.required\"\n        [size]=\"size()\"\n        [labelPosition]=\"labelPosition()\"\n      >\n        @if (custom) {\n          <ng-container *ngTemplateOutlet=\"custom; context: customContext(f)\" />\n        } @else {\n          @switch (f.type) {\n            @case ('textarea') {\n              <textarea mkInput [formControl]=\"$any(ctrl)\" [placeholder]=\"f.placeholder ?? ''\" [rows]=\"p(f, 'rows', 3)\"></textarea>\n            }\n            @case ('password') {\n              <mk-password-input [formControl]=\"$any(ctrl)\" [placeholder]=\"f.placeholder ?? ''\" [showStrength]=\"p(f, 'showStrength', false)\" [showRules]=\"p(f, 'showRules', false)\" [minLength]=\"p(f, 'minLength', 8)\" />\n            }\n            @case ('number') {\n              <mk-number-input [formControl]=\"$any(ctrl)\" [placeholder]=\"f.placeholder ?? ''\" [min]=\"p(f, 'min', f.validators?.min ?? null)\" [max]=\"p(f, 'max', f.validators?.max ?? null)\" [step]=\"p(f, 'step', 1)\" />\n            }\n            @case ('currency') {\n              <mk-currency-input [formControl]=\"$any(ctrl)\" [placeholder]=\"f.placeholder ?? ''\" [currency]=\"p(f, 'currency', 'USD')\" [locale]=\"p(f, 'locale', undefined)\" [min]=\"p(f, 'min', f.validators?.min ?? null)\" [max]=\"p(f, 'max', f.validators?.max ?? null)\" />\n            }\n            @case ('date') {\n              <mk-date-picker [formControl]=\"$any(ctrl)\" [placeholder]=\"f.placeholder ?? ''\" [min]=\"p(f, 'min', null)\" [max]=\"p(f, 'max', null)\" [clearable]=\"p(f, 'clearable', true)\" />\n            }\n            @case ('time') {\n              <mk-time-picker [formControl]=\"$any(ctrl)\" [placeholder]=\"f.placeholder ?? ''\" [step]=\"p(f, 'step', 15)\" [hour12]=\"p(f, 'hour12', false)\" [clearable]=\"p(f, 'clearable', true)\" />\n            }\n            @case ('datetime') {\n              <mk-datetime-picker [formControl]=\"$any(ctrl)\" [placeholder]=\"f.placeholder ?? ''\" [min]=\"p(f, 'min', null)\" [max]=\"p(f, 'max', null)\" [clearable]=\"p(f, 'clearable', true)\" />\n            }\n            @case ('select') {\n              <mk-select [formControl]=\"$any(ctrl)\" [options]=\"$any(f.options ?? [])\" [placeholder]=\"f.placeholder ?? ''\" />\n            }\n            @case ('multi-select') {\n              <mk-multi-select [formControl]=\"$any(ctrl)\" [options]=\"$any(f.options ?? [])\" [placeholder]=\"f.placeholder ?? ''\" [max]=\"p(f, 'max', 0)\" />\n            }\n            @case ('autocomplete') {\n              <mk-autocomplete [formControl]=\"$any(ctrl)\" [options]=\"$any(f.options ?? [])\" [placeholder]=\"f.placeholder ?? ''\" [requireSelection]=\"p(f, 'requireSelection', false)\" />\n            }\n            @case ('radio') {\n              <mk-radio-group [formControl]=\"$any(ctrl)\" [orientation]=\"p(f, 'orientation', 'vertical')\">\n                @for (o of f.options ?? []; track $index) {\n                  <mk-radio [value]=\"o.value\" [disabled]=\"!!o.disabled\">{{ o.label }}</mk-radio>\n                }\n              </mk-radio-group>\n            }\n            @case ('toggle') {\n              <mk-button-toggle-group [formControl]=\"$any(ctrl)\" [multiple]=\"p(f, 'multiple', false)\" [aria-label]=\"f.label ?? ''\">\n                @for (o of f.options ?? []; track $index) {\n                  <mk-button-toggle [value]=\"o.value\" [disabled]=\"!!o.disabled\">{{ o.label }}</mk-button-toggle>\n                }\n              </mk-button-toggle-group>\n            }\n            @case ('checkbox') {\n              <mk-checkbox [formControl]=\"$any(ctrl)\" [required]=\"!!f.required\">{{ f.label }}</mk-checkbox>\n            }\n            @case ('switch') {\n              <mk-switch [formControl]=\"$any(ctrl)\">{{ f.label }}</mk-switch>\n            }\n            @case ('slider') {\n              <mk-slider [formControl]=\"$any(ctrl)\" [min]=\"p(f, 'min', f.validators?.min ?? 0)\" [max]=\"p(f, 'max', f.validators?.max ?? 100)\" [step]=\"p(f, 'step', 1)\" [aria-label]=\"f.label ?? ''\" />\n            }\n            @case ('rating') {\n              <mk-rating [formControl]=\"$any(ctrl)\" [max]=\"p(f, 'max', 5)\" [ariaLabel]=\"f.label ?? ''\" />\n            }\n            @case ('color') {\n              <mk-color-picker [formControl]=\"$any(ctrl)\" [swatches]=\"p(f, 'swatches', [])\" [ariaLabel]=\"f.label ?? ''\" />\n            }\n            @case ('tags') {\n              <mk-tag-input [formControl]=\"$any(ctrl)\" [placeholder]=\"f.placeholder ?? ''\" [max]=\"p(f, 'max', 0)\" />\n            }\n            @case ('phone') {\n              <mk-phone-input [formControl]=\"$any(ctrl)\" [placeholder]=\"f.placeholder ?? ''\" [valueFormat]=\"p(f, 'valueFormat', 'e164')\" [country]=\"p(f, 'country', undefined)\" />\n            }\n            @case ('file') {\n              <mk-file-upload [formControl]=\"$any(ctrl)\" [accept]=\"p(f, 'accept', '')\" [multiple]=\"p(f, 'multiple', false)\" [maxSize]=\"p(f, 'maxSize', 0)\" [maxFiles]=\"p(f, 'maxFiles', 0)\" />\n            }\n            @case ('code') {\n              <mk-code-editor [formControl]=\"$any(ctrl)\" [language]=\"p(f, 'language', 'json')\" [rows]=\"p(f, 'rows', 8)\" [placeholder]=\"f.placeholder ?? ''\" />\n            }\n            @default {\n              <input\n                mkInput\n                [type]=\"inputType(f)\"\n                [formControl]=\"$any(ctrl)\"\n                [placeholder]=\"f.placeholder ?? ''\"\n                [attr.maxlength]=\"f.validators?.maxLength ?? null\"\n              />\n            }\n          }\n        }\n      </mk-form-field>\n    }\n  }\n}\n", dependencies: [{ kind: "component", type: i0.forwardRef(() => MkDynamicFields), selector: "mk-dynamic-fields", inputs: ["fields", "group", "columns", "scope"] }, { kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "directive", type: i0.forwardRef(() => i1.DefaultValueAccessor), selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i0.forwardRef(() => i1.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i1.RequiredValidator), selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i0.forwardRef(() => i1.FormControlDirective), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(() => NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i0.forwardRef(() => MkButton), selector: "button[mkButton], a[mkButton]", inputs: ["variant", "tone", "size", "loading", "fullWidth", "iconOnly", "disabled"] }, { kind: "component", type: i0.forwardRef(() => MkCheckbox), selector: "mk-checkbox", inputs: ["checked", "indeterminate", "disabled", "invalid", "required", "size", "tone", "aria-label"], outputs: ["checkedChange", "indeterminateChange"] }, { kind: "component", type: i0.forwardRef(() => MkFormField), selector: "mk-form-field", inputs: ["label", "hint", "error", "errorMessages", "errorOn", "required", "disabled", "size", "labelPosition"] }, { kind: "component", type: i0.forwardRef(() => MkInput), selector: "input[mkInput], textarea[mkInput]", inputs: ["size", "invalid"] }, { kind: "component", type: i0.forwardRef(() => MkNumberInput), selector: "mk-number-input", inputs: ["min", "max", "step", "value", "placeholder", "disabled", "invalid", "size"], outputs: ["valueChange"] }, { kind: "component", type: i0.forwardRef(() => MkCurrencyInput), selector: "mk-currency-input", inputs: ["currency", "locale", "decimals", "min", "max", "allowNegative", "size", "invalid", "disabled", "placeholder", "value"], outputs: ["valueChange"], exportAs: ["mkCurrencyInput"] }, { kind: "component", type: i0.forwardRef(() => MkSelect), selector: "mk-select", inputs: ["options", "placeholder", "size", "invalid", "disabled", "value"], outputs: ["valueChange"] }, { kind: "component", type: i0.forwardRef(() => MkMultiSelect), selector: "mk-multi-select", inputs: ["options", "placeholder", "size", "invalid", "disabled", "filterMode", "minChars", "loading", "max", "closeOnSelect", "emptyMessage", "value"], outputs: ["valueChange", "search", "optionAdded", "optionRemoved"] }, { kind: "component", type: i0.forwardRef(() => MkAutocomplete), selector: "mk-autocomplete", inputs: ["options", "placeholder", "size", "invalid", "disabled", "filterMode", "minChars", "loading", "requireSelection", "emptyMessage", "value"], outputs: ["valueChange", "search", "optionSelected"] }, { kind: "component", type: i0.forwardRef(() => MkRadioGroup), selector: "mk-radio-group", inputs: ["value", "disabled", "invalid", "required", "size", "tone", "name", "orientation"], outputs: ["valueChange"] }, { kind: "component", type: i0.forwardRef(() => MkRadio), selector: "mk-radio", inputs: ["value", "disabled"] }, { kind: "component", type: i0.forwardRef(() => MkButtonToggleGroup), selector: "mk-button-toggle-group", inputs: ["multiple", "size", "tone", "disabled", "invalid", "aria-label", "value"], outputs: ["valueChange"] }, { kind: "component", type: i0.forwardRef(() => MkButtonToggle), selector: "mk-button-toggle", inputs: ["value", "disabled"] }, { kind: "component", type: i0.forwardRef(() => MkSwitch), selector: "mk-switch", inputs: ["checked", "disabled", "invalid", "size", "tone", "aria-label"], outputs: ["checkedChange"] }, { kind: "component", type: i0.forwardRef(() => MkSlider), selector: "mk-slider", inputs: ["min", "max", "step", "disabled", "invalid", "size", "tone", "aria-label", "value"], outputs: ["valueChange"] }, { kind: "component", type: i0.forwardRef(() => MkRating), selector: "mk-rating", inputs: ["max", "value", "readonly", "disabled", "invalid", "size", "ariaLabel"], outputs: ["valueChange"] }, { kind: "component", type: i0.forwardRef(() => MkColorPicker), selector: "mk-color-picker", inputs: ["value", "swatches", "hexInput", "disabled", "invalid", "size", "ariaLabel"], outputs: ["valueChange"] }, { kind: "component", type: i0.forwardRef(() => MkTagInput), selector: "mk-tag-input", inputs: ["value", "placeholder", "max", "allowDuplicates", "addOnBlur", "separators", "invalid", "disabled", "size"], outputs: ["valueChange", "added", "removed"] }, { kind: "component", type: i0.forwardRef(() => MkPhoneInput), selector: "mk-phone-input", inputs: ["countries", "preferredCountries", "valueFormat", "size", "invalid", "disabled", "placeholder", "country", "value"], outputs: ["countryChange", "valueChange"], exportAs: ["mkPhoneInput"] }, { kind: "component", type: i0.forwardRef(() => MkFileUpload), selector: "mk-file-upload", inputs: ["accept", "multiple", "maxSize", "maxFiles", "disabled", "invalid", "label", "hint", "hideList", "uploadFn", "autoUpload", "valueFormat", "files"], outputs: ["filesChange", "filesSelected", "rejected", "uploaded", "removed"] }, { kind: "component", type: i0.forwardRef(() => MkCodeEditor), selector: "mk-code-editor", inputs: ["language", "placeholder", "readOnly", "disabled", "invalid", "rows", "lineNumbers", "tabSize", "wrap", "size", "ariaLabel", "value"], outputs: ["valueChange", "validate"], exportAs: ["mkCodeEditor"] }, { kind: "component", type: i0.forwardRef(() => MkPasswordInput), selector: "mk-password-input", inputs: ["value", "placeholder", "disabled", "size", "invalid", "showStrength", "showRules", "minLength", "autocomplete"], outputs: ["valueChange"], exportAs: ["mkPasswordInput"] }, { kind: "component", type: i0.forwardRef(() => MkDatePicker), selector: "mk-date-picker", inputs: ["value", "min", "max", "disabledDate", "placeholder", "displayFormat", "disabled", "clearable", "invalid", "firstDayOfWeek", "size"], outputs: ["valueChange"] }, { kind: "component", type: i0.forwardRef(() => MkTimePicker), selector: "mk-time-picker", inputs: ["value", "valueFormat", "min", "max", "step", "hour12", "disabled", "placeholder", "clearable", "invalid", "size"], outputs: ["valueChange"] }, { kind: "component", type: i0.forwardRef(() => MkDateTimePicker), selector: "mk-datetime-picker", inputs: ["value", "min", "max", "disabledDate", "placeholder", "displayFormat", "step", "hour12", "disabled", "clearable", "invalid", "firstDayOfWeek", "size"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkDynamicFields, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-dynamic-fields', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        ReactiveFormsModule,
+                        NgTemplateOutlet,
+                        MkButton,
+                        MkCheckbox,
+                        MkFormField,
+                        MkInput,
+                        MkNumberInput,
+                        MkCurrencyInput,
+                        MkSelect,
+                        MkMultiSelect,
+                        MkAutocomplete,
+                        MkRadioGroup,
+                        MkRadio,
+                        MkButtonToggleGroup,
+                        MkButtonToggle,
+                        MkSwitch,
+                        MkSlider,
+                        MkRating,
+                        MkColorPicker,
+                        MkTagInput,
+                        MkPhoneInput,
+                        MkFileUpload,
+                        MkCodeEditor,
+                        MkPasswordInput,
+                        MkDatePicker,
+                        MkTimePicker,
+                        MkDateTimePicker,
+                        forwardRef(() => MkDynamicFields),
+                    ], host: {
+                        class: 'mk-dynamic-fields',
+                        '[style.--mk-dyn-columns]': 'columns()',
+                    }, template: "@for (f of fields(); track f.type + ':' + ($any(f).key ?? $any(f).label ?? $index)) {\n  @if (isVisible(f)) {\n    @if (isSection(f)) {\n      <div class=\"mk-dynamic-fields__section\" [style.--mk-dyn-span]=\"span(f)\">\n        <h3 class=\"mk-dynamic-fields__section-title\">{{ f.label }}</h3>\n        @if (f.hint) {\n          <p class=\"mk-dynamic-fields__section-hint\">{{ f.hint }}</p>\n        }\n      </div>\n    } @else if (isGroup(f)) {\n      <fieldset class=\"mk-dynamic-fields__group\" [style.--mk-dyn-span]=\"span(f)\" [disabled]=\"control(f).disabled\">\n        @if (f.label) {\n          <legend class=\"mk-dynamic-fields__legend\">{{ f.label }}</legend>\n        }\n        @if (f.hint) {\n          <p class=\"mk-dynamic-fields__section-hint\">{{ f.hint }}</p>\n        }\n        <mk-dynamic-fields [fields]=\"f.fields\" [group]=\"formGroup(f)\" [columns]=\"columnsOf(f)\" [scope]=\"scope()\" />\n      </fieldset>\n    } @else if (isArray(f)) {\n      <fieldset class=\"mk-dynamic-fields__array\" [style.--mk-dyn-span]=\"span(f)\" [disabled]=\"control(f).disabled\">\n        @if (f.label) {\n          <legend class=\"mk-dynamic-fields__legend\">{{ f.label }}</legend>\n        }\n        @if (f.hint) {\n          <p class=\"mk-dynamic-fields__section-hint\">{{ f.hint }}</p>\n        }\n        @for (item of formArray(f).controls; track item; let i = $index) {\n          <div class=\"mk-dynamic-fields__item\">\n            <mk-dynamic-fields class=\"mk-dynamic-fields__item-fields\" [fields]=\"f.fields\" [group]=\"item\" [columns]=\"columnsOf(f)\" [scope]=\"itemScope(f, i)\" />\n            <button\n              mkButton\n              type=\"button\"\n              variant=\"ghost\"\n              tone=\"neutral\"\n              size=\"sm\"\n              iconOnly\n              class=\"mk-dynamic-fields__remove\"\n              [attr.aria-label]=\"i18n.dynamicFormRemove(i + 1)\"\n              [title]=\"i18n.dynamicFormRemove(i + 1)\"\n              [disabled]=\"!canRemove(f)\"\n              (click)=\"removeItem(f, i)\"\n            >\n              <svg viewBox=\"0 0 16 16\" width=\"16\" height=\"16\" aria-hidden=\"true\" focusable=\"false\">\n                <path d=\"M4 4l8 8M12 4l-8 8\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\n              </svg>\n            </button>\n          </div>\n        }\n        <div class=\"mk-dynamic-fields__array-actions\">\n          <button mkButton type=\"button\" variant=\"soft\" size=\"sm\" [disabled]=\"!canAdd(f)\" (click)=\"addItem(f)\">\n            {{ f.addLabel || i18n.dynamicFormAdd }}\n          </button>\n        </div>\n      </fieldset>\n    } @else if (isValue(f)) {\n      @let ctrl = control(f);\n      @let custom = customTemplate(f);\n      <mk-form-field\n        class=\"mk-dynamic-fields__field\"\n        [style.--mk-dyn-span]=\"span(f)\"\n        [label]=\"f.type === 'checkbox' || f.type === 'switch' ? '' : (f.label ?? '')\"\n        [hint]=\"f.hint ?? ''\"\n        [required]=\"!!f.required\"\n        [size]=\"size()\"\n        [labelPosition]=\"labelPosition()\"\n      >\n        @if (custom) {\n          <ng-container *ngTemplateOutlet=\"custom; context: customContext(f)\" />\n        } @else {\n          @switch (f.type) {\n            @case ('textarea') {\n              <textarea mkInput [formControl]=\"$any(ctrl)\" [placeholder]=\"f.placeholder ?? ''\" [rows]=\"p(f, 'rows', 3)\"></textarea>\n            }\n            @case ('password') {\n              <mk-password-input [formControl]=\"$any(ctrl)\" [placeholder]=\"f.placeholder ?? ''\" [showStrength]=\"p(f, 'showStrength', false)\" [showRules]=\"p(f, 'showRules', false)\" [minLength]=\"p(f, 'minLength', 8)\" />\n            }\n            @case ('number') {\n              <mk-number-input [formControl]=\"$any(ctrl)\" [placeholder]=\"f.placeholder ?? ''\" [min]=\"p(f, 'min', f.validators?.min ?? null)\" [max]=\"p(f, 'max', f.validators?.max ?? null)\" [step]=\"p(f, 'step', 1)\" />\n            }\n            @case ('currency') {\n              <mk-currency-input [formControl]=\"$any(ctrl)\" [placeholder]=\"f.placeholder ?? ''\" [currency]=\"p(f, 'currency', 'USD')\" [locale]=\"p(f, 'locale', undefined)\" [min]=\"p(f, 'min', f.validators?.min ?? null)\" [max]=\"p(f, 'max', f.validators?.max ?? null)\" />\n            }\n            @case ('date') {\n              <mk-date-picker [formControl]=\"$any(ctrl)\" [placeholder]=\"f.placeholder ?? ''\" [min]=\"p(f, 'min', null)\" [max]=\"p(f, 'max', null)\" [clearable]=\"p(f, 'clearable', true)\" />\n            }\n            @case ('time') {\n              <mk-time-picker [formControl]=\"$any(ctrl)\" [placeholder]=\"f.placeholder ?? ''\" [step]=\"p(f, 'step', 15)\" [hour12]=\"p(f, 'hour12', false)\" [clearable]=\"p(f, 'clearable', true)\" />\n            }\n            @case ('datetime') {\n              <mk-datetime-picker [formControl]=\"$any(ctrl)\" [placeholder]=\"f.placeholder ?? ''\" [min]=\"p(f, 'min', null)\" [max]=\"p(f, 'max', null)\" [clearable]=\"p(f, 'clearable', true)\" />\n            }\n            @case ('select') {\n              <mk-select [formControl]=\"$any(ctrl)\" [options]=\"$any(f.options ?? [])\" [placeholder]=\"f.placeholder ?? ''\" />\n            }\n            @case ('multi-select') {\n              <mk-multi-select [formControl]=\"$any(ctrl)\" [options]=\"$any(f.options ?? [])\" [placeholder]=\"f.placeholder ?? ''\" [max]=\"p(f, 'max', 0)\" />\n            }\n            @case ('autocomplete') {\n              <mk-autocomplete [formControl]=\"$any(ctrl)\" [options]=\"$any(f.options ?? [])\" [placeholder]=\"f.placeholder ?? ''\" [requireSelection]=\"p(f, 'requireSelection', false)\" />\n            }\n            @case ('radio') {\n              <mk-radio-group [formControl]=\"$any(ctrl)\" [orientation]=\"p(f, 'orientation', 'vertical')\">\n                @for (o of f.options ?? []; track $index) {\n                  <mk-radio [value]=\"o.value\" [disabled]=\"!!o.disabled\">{{ o.label }}</mk-radio>\n                }\n              </mk-radio-group>\n            }\n            @case ('toggle') {\n              <mk-button-toggle-group [formControl]=\"$any(ctrl)\" [multiple]=\"p(f, 'multiple', false)\" [aria-label]=\"f.label ?? ''\">\n                @for (o of f.options ?? []; track $index) {\n                  <mk-button-toggle [value]=\"o.value\" [disabled]=\"!!o.disabled\">{{ o.label }}</mk-button-toggle>\n                }\n              </mk-button-toggle-group>\n            }\n            @case ('checkbox') {\n              <mk-checkbox [formControl]=\"$any(ctrl)\" [required]=\"!!f.required\">{{ f.label }}</mk-checkbox>\n            }\n            @case ('switch') {\n              <mk-switch [formControl]=\"$any(ctrl)\">{{ f.label }}</mk-switch>\n            }\n            @case ('slider') {\n              <mk-slider [formControl]=\"$any(ctrl)\" [min]=\"p(f, 'min', f.validators?.min ?? 0)\" [max]=\"p(f, 'max', f.validators?.max ?? 100)\" [step]=\"p(f, 'step', 1)\" [aria-label]=\"f.label ?? ''\" />\n            }\n            @case ('rating') {\n              <mk-rating [formControl]=\"$any(ctrl)\" [max]=\"p(f, 'max', 5)\" [ariaLabel]=\"f.label ?? ''\" />\n            }\n            @case ('color') {\n              <mk-color-picker [formControl]=\"$any(ctrl)\" [swatches]=\"p(f, 'swatches', [])\" [ariaLabel]=\"f.label ?? ''\" />\n            }\n            @case ('tags') {\n              <mk-tag-input [formControl]=\"$any(ctrl)\" [placeholder]=\"f.placeholder ?? ''\" [max]=\"p(f, 'max', 0)\" />\n            }\n            @case ('phone') {\n              <mk-phone-input [formControl]=\"$any(ctrl)\" [placeholder]=\"f.placeholder ?? ''\" [valueFormat]=\"p(f, 'valueFormat', 'e164')\" [country]=\"p(f, 'country', undefined)\" />\n            }\n            @case ('file') {\n              <mk-file-upload [formControl]=\"$any(ctrl)\" [accept]=\"p(f, 'accept', '')\" [multiple]=\"p(f, 'multiple', false)\" [maxSize]=\"p(f, 'maxSize', 0)\" [maxFiles]=\"p(f, 'maxFiles', 0)\" />\n            }\n            @case ('code') {\n              <mk-code-editor [formControl]=\"$any(ctrl)\" [language]=\"p(f, 'language', 'json')\" [rows]=\"p(f, 'rows', 8)\" [placeholder]=\"f.placeholder ?? ''\" />\n            }\n            @default {\n              <input\n                mkInput\n                [type]=\"inputType(f)\"\n                [formControl]=\"$any(ctrl)\"\n                [placeholder]=\"f.placeholder ?? ''\"\n                [attr.maxlength]=\"f.validators?.maxLength ?? null\"\n              />\n            }\n          }\n        }\n      </mk-form-field>\n    }\n  }\n}\n" }]
+        }], propDecorators: { fields: [{ type: i0.Input, args: [{ isSignal: true, alias: "fields", required: true }] }], group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: true }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], scope: [{ type: i0.Input, args: [{ isSignal: true, alias: "scope", required: true }] }] } });
+/**
+ * Dynamic form — renders a form from a JSON schema and manages one reactive
+ * `FormGroup` for it. Every value field renders inside `mk-form-field`, so
+ * labels, hints, required marks and localised validation messages come from
+ * the schema alone.
+ *
+ * ```html
+ * <mk-dynamic-form [schema]="schema" [(value)]="user" (formSubmit)="save($event)">
+ *   <button mkButton type="submit">Save</button>
+ * </mk-dynamic-form>
+ * ```
+ *
+ * ```ts
+ * schema: MkDynamicSchema = {
+ *   columns: 2,
+ *   fields: [
+ *     { key: 'name', type: 'text', label: 'Name', required: true },
+ *     { key: 'role', type: 'select', label: 'Role', options: roles },
+ *     { key: 'company', type: 'text', label: 'Company', showWhen: { field: 'role', eq: 'b2b' } },
+ *   ],
+ * };
+ * ```
+ *
+ * - Hidden fields (`showWhen` false) are disabled, so `value` only carries
+ *   what the user can see; `form.getRawValue()` has everything.
+ * - `form` is the live `FormGroup` for anything the schema does not cover.
+ * - Custom field types: project an `ng-template[mkDynamicField]`.
+ */
+class MkDynamicForm {
+    destroyRef = inject(DestroyRef);
+    /** The schema. Changing it rebuilds the form (values of surviving keys are kept). */
+    schema = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "schema" }] : /* istanbul ignore next */ []));
+    /** Two-way form value (visible, enabled fields only). */
+    value = model({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Disable every control. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Label placement forwarded to every `mk-form-field`. */
+    labelPosition = input('top', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelPosition" }] : /* istanbul ignore next */ []));
+    /** Control size forwarded to the fields. */
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Emits the value when the form is submitted and valid. */
+    formSubmit = output();
+    /** Emits when a submit is attempted while invalid (every control is marked touched). */
+    invalidSubmit = output();
+    defs = contentChildren(MkDynamicFieldDef, { ...(ngDevMode ? { debugName: "defs" } : /* istanbul ignore next */ {}), descendants: true });
+    formSignal = signal(new FormGroup({}), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formSignal" }] : /* istanbul ignore next */ []));
+    formValue = signal({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formValue" }] : /* istanbul ignore next */ []));
+    subscription = null;
+    applying = false;
+    /** The live reactive form. */
+    get form() {
+        return this.formSignal();
+    }
+    formRef = computed(() => this.formSignal(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formRef" }] : /* istanbul ignore next */ []));
+    /** Value including disabled fields — what conditions are evaluated against. */
+    scope = computed(() => this.formValue(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scope" }] : /* istanbul ignore next */ []));
+    columns = computed(() => this.schema().columns ?? 1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    fields = computed(() => this.schema().fields, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fields" }] : /* istanbul ignore next */ []));
+    /** `true` while every control passes validation. */
+    valid = computed(() => {
+        this.formValue();
+        return this.formSignal().valid;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valid" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Rebuild on schema change, keeping the current value where keys survive.
+        effect(() => {
+            const schema = this.schema();
+            const current = untracked(() => ({ ...this.formValue(), ...this.value() }));
+            const form = mkDynamicForm(schema, current);
+            untracked(() => this.attach(form));
+        });
+        // External value → form.
+        effect(() => {
+            const v = this.value();
+            untracked(() => {
+                if (this.applying)
+                    return;
+                const form = this.formSignal();
+                if (!shallowEqual(v, form.value)) {
+                    form.patchValue(v ?? {}, { emitEvent: true });
+                }
+            });
+        });
+        // Disabled input.
+        effect(() => {
+            const disabled = this.disabled();
+            untracked(() => {
+                const form = this.formSignal();
+                if (disabled)
+                    form.disable({ emitEvent: false });
+                else
+                    form.enable({ emitEvent: false });
+                this.applyConditions(form, this.schema().fields, form.getRawValue());
+                this.sync();
+            });
+        });
+        this.destroyRef.onDestroy(() => this.subscription?.unsubscribe());
+    }
+    attach(form) {
+        this.subscription?.unsubscribe();
+        this.subscription = form.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => this.sync());
+        this.formSignal.set(form);
+        if (this.disabled())
+            form.disable({ emitEvent: false });
+        this.sync();
+    }
+    /** Re-evaluate conditions and push the form value to `value`. @internal */
+    sync() {
+        const form = this.formSignal();
+        const raw = form.getRawValue();
+        this.applyConditions(form, this.schema().fields, raw);
+        this.formValue.set(raw);
+        const visible = form.value;
+        if (!shallowEqual(visible, this.value())) {
+            this.applying = true;
+            try {
+                this.value.set(visible);
+            }
+            finally {
+                this.applying = false;
+            }
+        }
+    }
+    applyConditions(group, fields, scope) {
+        if (this.disabled())
+            return;
+        for (const f of fields) {
+            if (mkIsSection(f))
+                continue;
+            const ctrl = group.get(f.key);
+            if (!ctrl)
+                continue;
+            const visible = mkDynamicCondition(f.showWhen, scope);
+            const disabled = !visible || mkDynamicCondition(f.disabledWhen ?? (() => false), scope) || (mkIsValueField(f) && !!f.disabled);
+            if (disabled && ctrl.enabled)
+                ctrl.disable({ emitEvent: false });
+            else if (!disabled && ctrl.disabled)
+                ctrl.enable({ emitEvent: false });
+            if (visible && mkIsGroup(f))
+                this.applyConditions(ctrl, f.fields, scope);
+            if (visible && mkIsArray(f)) {
+                for (const item of ctrl.controls) {
+                    this.applyConditions(item, f.fields, { ...item.getRawValue(), $root: scope });
+                }
+            }
+        }
+    }
+    /** Template registered for a custom type / renderer name. @internal */
+    templateFor(name) {
+        return this.defs().find((d) => d.mkDynamicField() === name)?.template ?? null;
+    }
+    /** Patch part of the value. */
+    patch(value) {
+        this.form.patchValue(value);
+        this.sync();
+    }
+    /** Reset to the schema defaults (or the given value). */
+    reset(value) {
+        const form = mkDynamicForm(this.schema(), value);
+        this.attach(form);
+    }
+    /** Mark every control touched so validation messages show. */
+    touchAll() {
+        this.form.markAllAsTouched();
+        this.formValue.set({ ...this.form.getRawValue() });
+    }
+    onSubmit(event) {
+        event.preventDefault();
+        const form = this.form;
+        if (form.valid) {
+            this.formSubmit.emit(form.value);
+        }
+        else {
+            this.touchAll();
+            this.invalidSubmit.emit(form);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkDynamicForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.7", type: MkDynamicForm, isStandalone: true, selector: "mk-dynamic-form", inputs: { schema: { classPropertyName: "schema", publicName: "schema", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", formSubmit: "formSubmit", invalidSubmit: "invalidSubmit" }, host: { properties: { "class.mk-dynamic-form--disabled": "disabled()" }, classAttribute: "mk-dynamic-form" }, queries: [{ propertyName: "defs", predicate: MkDynamicFieldDef, descendants: true, isSignal: true }], ngImport: i0, template: "<form class=\"mk-dynamic-form__form\" [formGroup]=\"formRef()\" (submit)=\"onSubmit($event)\" novalidate>\n  <mk-dynamic-fields [fields]=\"fields()\" [group]=\"formRef()\" [columns]=\"columns()\" [scope]=\"scope()\" />\n  <div class=\"mk-dynamic-form__actions\">\n    <ng-content />\n  </div>\n</form>\n", styles: [":host{display:block}.mk-dynamic-form__form{display:flex;flex-direction:column;gap:var(--mk-space-4)}.mk-dynamic-form__actions:empty{display:none}.mk-dynamic-form__actions{display:flex;flex-wrap:wrap;gap:var(--mk-space-2)}:host ::ng-deep .mk-dynamic-fields{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--mk-space-4) var(--mk-space-4);min-width:0}:host ::ng-deep .mk-dynamic-fields>.mk-dynamic-fields__field,:host ::ng-deep .mk-dynamic-fields>.mk-dynamic-fields__section,:host ::ng-deep .mk-dynamic-fields>.mk-dynamic-fields__group,:host ::ng-deep .mk-dynamic-fields>.mk-dynamic-fields__array{grid-column:span var(--mk-dyn-span, 12);min-width:0}@media(max-width:640px){:host ::ng-deep .mk-dynamic-fields>.mk-dynamic-fields__field,:host ::ng-deep .mk-dynamic-fields>.mk-dynamic-fields__section,:host ::ng-deep .mk-dynamic-fields>.mk-dynamic-fields__group,:host ::ng-deep .mk-dynamic-fields>.mk-dynamic-fields__array{grid-column:span 12}}:host ::ng-deep .mk-dynamic-fields__section{padding-top:var(--mk-space-2)}:host ::ng-deep .mk-dynamic-fields__section-title{margin:0;font-size:var(--mk-font-size-md);font-weight:var(--mk-font-weight-semibold);color:var(--mk-text)}:host ::ng-deep .mk-dynamic-fields__section-hint{margin:var(--mk-space-1) 0 0;font-size:var(--mk-font-size-sm);color:var(--mk-text-muted)}:host ::ng-deep .mk-dynamic-fields__group,:host ::ng-deep .mk-dynamic-fields__array{margin:0;padding:var(--mk-space-4);border:1px solid var(--mk-border);border-radius:var(--mk-radius-lg);min-width:0}:host ::ng-deep .mk-dynamic-fields__legend{padding:0 var(--mk-space-2);font-size:var(--mk-font-size-sm);font-weight:var(--mk-font-weight-semibold);color:var(--mk-text)}:host ::ng-deep .mk-dynamic-fields__group>.mk-dynamic-fields__section-hint,:host ::ng-deep .mk-dynamic-fields__array>.mk-dynamic-fields__section-hint{margin:0 0 var(--mk-space-3)}:host ::ng-deep .mk-dynamic-fields__item{display:flex;align-items:flex-start;gap:var(--mk-space-2);padding:var(--mk-space-3) 0;border-bottom:1px dashed var(--mk-border)}:host ::ng-deep .mk-dynamic-fields__item:first-of-type{padding-top:0}:host ::ng-deep .mk-dynamic-fields__item-fields{flex:1;min-width:0}:host ::ng-deep .mk-dynamic-fields__remove{flex:none;margin-top:var(--mk-space-6)}:host ::ng-deep .mk-dynamic-fields__array-actions{padding-top:var(--mk-space-3)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: MkDynamicFields, selector: "mk-dynamic-fields", inputs: ["fields", "group", "columns", "scope"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkDynamicForm, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-dynamic-form', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ReactiveFormsModule, MkDynamicFields], host: {
+                        class: 'mk-dynamic-form',
+                        '[class.mk-dynamic-form--disabled]': 'disabled()',
+                    }, template: "<form class=\"mk-dynamic-form__form\" [formGroup]=\"formRef()\" (submit)=\"onSubmit($event)\" novalidate>\n  <mk-dynamic-fields [fields]=\"fields()\" [group]=\"formRef()\" [columns]=\"columns()\" [scope]=\"scope()\" />\n  <div class=\"mk-dynamic-form__actions\">\n    <ng-content />\n  </div>\n</form>\n", styles: [":host{display:block}.mk-dynamic-form__form{display:flex;flex-direction:column;gap:var(--mk-space-4)}.mk-dynamic-form__actions:empty{display:none}.mk-dynamic-form__actions{display:flex;flex-wrap:wrap;gap:var(--mk-space-2)}:host ::ng-deep .mk-dynamic-fields{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--mk-space-4) var(--mk-space-4);min-width:0}:host ::ng-deep .mk-dynamic-fields>.mk-dynamic-fields__field,:host ::ng-deep .mk-dynamic-fields>.mk-dynamic-fields__section,:host ::ng-deep .mk-dynamic-fields>.mk-dynamic-fields__group,:host ::ng-deep .mk-dynamic-fields>.mk-dynamic-fields__array{grid-column:span var(--mk-dyn-span, 12);min-width:0}@media(max-width:640px){:host ::ng-deep .mk-dynamic-fields>.mk-dynamic-fields__field,:host ::ng-deep .mk-dynamic-fields>.mk-dynamic-fields__section,:host ::ng-deep .mk-dynamic-fields>.mk-dynamic-fields__group,:host ::ng-deep .mk-dynamic-fields>.mk-dynamic-fields__array{grid-column:span 12}}:host ::ng-deep .mk-dynamic-fields__section{padding-top:var(--mk-space-2)}:host ::ng-deep .mk-dynamic-fields__section-title{margin:0;font-size:var(--mk-font-size-md);font-weight:var(--mk-font-weight-semibold);color:var(--mk-text)}:host ::ng-deep .mk-dynamic-fields__section-hint{margin:var(--mk-space-1) 0 0;font-size:var(--mk-font-size-sm);color:var(--mk-text-muted)}:host ::ng-deep .mk-dynamic-fields__group,:host ::ng-deep .mk-dynamic-fields__array{margin:0;padding:var(--mk-space-4);border:1px solid var(--mk-border);border-radius:var(--mk-radius-lg);min-width:0}:host ::ng-deep .mk-dynamic-fields__legend{padding:0 var(--mk-space-2);font-size:var(--mk-font-size-sm);font-weight:var(--mk-font-weight-semibold);color:var(--mk-text)}:host ::ng-deep .mk-dynamic-fields__group>.mk-dynamic-fields__section-hint,:host ::ng-deep .mk-dynamic-fields__array>.mk-dynamic-fields__section-hint{margin:0 0 var(--mk-space-3)}:host ::ng-deep .mk-dynamic-fields__item{display:flex;align-items:flex-start;gap:var(--mk-space-2);padding:var(--mk-space-3) 0;border-bottom:1px dashed var(--mk-border)}:host ::ng-deep .mk-dynamic-fields__item:first-of-type{padding-top:0}:host ::ng-deep .mk-dynamic-fields__item-fields{flex:1;min-width:0}:host ::ng-deep .mk-dynamic-fields__remove{flex:none;margin-top:var(--mk-space-6)}:host ::ng-deep .mk-dynamic-fields__array-actions{padding-top:var(--mk-space-3)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { schema: [{ type: i0.Input, args: [{ isSignal: true, alias: "schema", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], formSubmit: [{ type: i0.Output, args: ["formSubmit"] }], invalidSubmit: [{ type: i0.Output, args: ["invalidSubmit"] }], defs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MkDynamicFieldDef), { ...{ descendants: true }, isSignal: true }] }] } });
+function shallowEqual(a, b) {
+    if (a === b)
+        return true;
+    if (!a || !b || typeof a !== 'object' || typeof b !== 'object')
+        return false;
+    const ka = Object.keys(a);
+    const kb = Object.keys(b);
+    if (ka.length !== kb.length)
+        return false;
+    for (const k of ka) {
+        const x = a[k];
+        const y = b[k];
+        if (x === y)
+            continue;
+        if (x && y && typeof x === 'object' && typeof y === 'object') {
+            if (JSON.stringify(x) !== JSON.stringify(y))
+                return false;
+            continue;
+        }
+        return false;
+    }
+    return true;
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MkDynamicFieldDef, MkDynamicFields, MkDynamicForm, mkDynamicCondition, mkDynamicControl, mkDynamicDefaults, mkDynamicEmptyValue, mkDynamicFlatten, mkDynamicForm, mkDynamicGroup, mkDynamicSpan, mkDynamicValidators, mkIsArray, mkIsGroup, mkIsSection, mkIsValueField };
+//# sourceMappingURL=mk-kit-ui-dynamic-form.mjs.map