@mk-kit/ui 0.41.0 → 0.43.0

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

@@ -1,5 +1,6 @@
 import * as i1 from '@angular/forms';
 import { Validators, FormArray, FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { schema, hidden, disabled, validate, applyEach, required, min, max, minLength, maxLength, pattern, email } from '@angular/forms/signals';
 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';
@@ -196,6 +197,152 @@ function mkDynamicSpan(field, columns) {
     return Math.min(12, Math.max(1, span));
 }
 
+/**
+ * Converts an `mk-dynamic-form` schema into a Signal Forms `Schema`, so the
+ * same JSON definition can drive `form()` from `@angular/forms/signals`:
+ *
+ * ```ts
+ * const definition: MkDynamicSchema = { fields: [ … ] };
+ * const model = signal(mkDynamicDefaults(definition.fields));
+ * const f = form(model, mkDynamicFormToSignalSchema(definition));
+ * ```
+ *
+ * What maps:
+ * - `required` → `required()` (for `checkbox` / `switch` this means "must be
+ *   on", as Signal Forms treats `false` as empty — the `requiredTrue`
+ *   behaviour of the renderer);
+ * - `validators.min` / `max` / `minLength` / `maxLength` / `pattern` / `email`
+ *   (and `type: 'email'`) → the matching built-in rules, so the field's
+ *   `min()` / `maxLength()` / `pattern()` state is set as well;
+ * - `validators.custom` → `validate()` running each `ValidatorFn` against a
+ *   throw-away `FormControl` holding the field's value; the reactive error
+ *   keys become error `kind`s with their payload attached, so
+ *   `mk-form-field` renders them through the same i18n table;
+ * - `disabled: true` and `disabledWhen` → `disabled()`, `showWhen` →
+ *   `hidden()` — the condition is evaluated against the form value exactly as
+ *   the renderer does it (dotted paths, `and` / `or` / `not`, and inside an
+ *   array item the item's own value with the root under `$root` and the
+ *   position under `$index`);
+ * - `group` → the nested fields under the group's key, `array` → `applyEach`
+ *   over the items plus `minItems` / `maxItems` errors from `min` / `max`.
+ *
+ * What differs from the renderer: a hidden Signal Forms field is skipped for
+ * validation and touched / dirty state but **keeps its value in the model**
+ * (the model is your data — nothing is stripped), so remove hidden controls
+ * from the template with `@if (!f.company().hidden())` and drop the value
+ * yourself before saving if it must not be sent. Layout properties (`span`,
+ * `columns`), `options`, `props` and `section` entries have no schema
+ * equivalent and are ignored.
+ *
+ * @param definition The dynamic-form schema, or just its `fields`.
+ * @template TModel The model type the schema binds to (defaults to a loose record).
+ */
+function mkDynamicFormToSignalSchema(definition) {
+    const fields = Array.isArray(definition) ? definition : definition.fields;
+    return schema((root) => {
+        const rootPath = root;
+        applyFields(root, fields, (ctx) => ctx.valueOf(rootPath));
+    });
+}
+function applyFields(tree, fields, scopeOf) {
+    for (const f of fields) {
+        if (mkIsSection(f))
+            continue;
+        const path = tree[f.key];
+        if (!path)
+            continue;
+        if (f.showWhen !== undefined) {
+            const cond = f.showWhen;
+            hidden(path, { when: (ctx) => !mkDynamicCondition(cond, scopeOf(ctx)) });
+        }
+        if (f.disabledWhen !== undefined) {
+            const cond = f.disabledWhen;
+            disabled(path, { when: (ctx) => mkDynamicCondition(cond, scopeOf(ctx)) });
+        }
+        if (mkIsGroup(f)) {
+            applyFields(path, f.fields, scopeOf);
+        }
+        else if (mkIsArray(f)) {
+            applyArray(path, f, scopeOf);
+        }
+        else {
+            applyValueField(path, f);
+        }
+    }
+}
+function applyArray(path, f, scopeOf) {
+    if (f.min || f.max) {
+        const minItems = f.min;
+        const maxItems = f.max;
+        validate(path, (ctx) => {
+            const length = ctx.value()?.length ?? 0;
+            if (minItems && length < minItems) {
+                return customError('minItems', { requiredLength: minItems, actualLength: length });
+            }
+            if (maxItems && length > maxItems) {
+                return customError('maxItems', { requiredLength: maxItems, actualLength: length });
+            }
+            return undefined;
+        });
+    }
+    const itemPath = path;
+    applyEach(itemPath, (item) => {
+        const itemScope = (ctx) => ({
+            ...ctx.valueOf(item),
+            $root: scopeOf(ctx),
+            $index: ctx.stateOf(item).keyInParent(),
+        });
+        applyFields(item, f.fields, itemScope);
+    });
+}
+function applyValueField(path, f) {
+    const v = f.validators ?? {};
+    if (f.required)
+        required(path);
+    if (f.disabled)
+        disabled(path);
+    if (v.min !== undefined)
+        min(path, v.min);
+    if (v.max !== undefined)
+        max(path, v.max);
+    if (v.minLength !== undefined)
+        minLength(path, v.minLength);
+    if (v.maxLength !== undefined)
+        maxLength(path, v.maxLength);
+    if (v.pattern !== undefined) {
+        pattern(path, typeof v.pattern === 'string' ? new RegExp(v.pattern) : v.pattern);
+    }
+    if (v.email || f.type === 'email')
+        email(path);
+    if (v.custom?.length) {
+        const fns = v.custom;
+        validate(path, (ctx) => {
+            const control = new FormControl(ctx.value());
+            const out = [];
+            for (const fn of fns) {
+                const errors = fn(control);
+                if (!errors)
+                    continue;
+                for (const [kind, payload] of Object.entries(errors)) {
+                    out.push(customError(kind, payload));
+                }
+            }
+            return out.length ? out : undefined;
+        });
+    }
+}
+/**
+ * A validation error of the given kind carrying a reactive-forms payload
+ * (`{ requiredLength, actualLength }`, `true`, …) spread onto the error so
+ * per-key `errorMessages` functions receive what they always did.
+ */
+function customError(kind, payload) {
+    const err = { kind };
+    if (payload && typeof payload === 'object')
+        Object.assign(err, payload);
+    return err;
+}
+
 /**
  * Registers a renderer for a custom field type:
  *
@@ -310,7 +457,7 @@ class MkDynamicFields {
         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: ["aria-label", "min", "max", "step", "value", "placeholder", "disabled", "invalid", "size"], outputs: ["valueChange"] }, { kind: "component", type: i0.forwardRef(() => MkCurrencyInput), selector: "mk-currency-input", inputs: ["aria-label", "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: ["aria-label", "options", "placeholder", "size", "invalid", "disabled", "value"], outputs: ["valueChange"] }, { kind: "component", type: i0.forwardRef(() => MkMultiSelect), selector: "mk-multi-select", inputs: ["aria-label", "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: ["aria-label", "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", "aria-label", "min", "max", "disabledDate", "placeholder", "displayFormat", "disabled", "clearable", "invalid", "firstDayOfWeek", "size"], outputs: ["valueChange"] }, { kind: "component", type: i0.forwardRef(() => MkTimePicker), selector: "mk-time-picker", inputs: ["value", "aria-label", "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 });
+    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", "field"] }, { 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: ["aria-label", "min", "max", "step", "value", "placeholder", "disabled", "invalid", "required", "size"], outputs: ["valueChange"] }, { kind: "component", type: i0.forwardRef(() => MkCurrencyInput), selector: "mk-currency-input", inputs: ["aria-label", "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: ["aria-label", "options", "placeholder", "size", "invalid", "required", "disabled", "value"], outputs: ["valueChange"] }, { kind: "component", type: i0.forwardRef(() => MkMultiSelect), selector: "mk-multi-select", inputs: ["aria-label", "options", "placeholder", "size", "invalid", "required", "disabled", "filterMode", "minChars", "loading", "max", "closeOnSelect", "emptyMessage", "value"], outputs: ["valueChange", "search", "optionAdded", "optionRemoved"] }, { kind: "component", type: i0.forwardRef(() => MkAutocomplete), selector: "mk-autocomplete", inputs: ["aria-label", "options", "placeholder", "size", "invalid", "required", "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", "required", "size", "tone", "aria-label"], outputs: ["checkedChange"] }, { kind: "component", type: i0.forwardRef(() => MkSlider), selector: "mk-slider", inputs: ["min", "max", "step", "disabled", "invalid", "required", "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", "required", "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", "aria-label", "min", "max", "disabledDate", "placeholder", "displayFormat", "disabled", "clearable", "invalid", "required", "firstDayOfWeek", "size"], outputs: ["valueChange"] }, { kind: "component", type: i0.forwardRef(() => MkTimePicker), selector: "mk-time-picker", inputs: ["value", "aria-label", "valueFormat", "min", "max", "step", "hour12", "disabled", "placeholder", "clearable", "invalid", "required", "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", "required", "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,
@@ -574,5 +721,5 @@ function shallowEqual(a, b) {
  * Generated bundle index. Do not edit.
  */
 
-export { MkDynamicFieldDef, MkDynamicFields, MkDynamicForm, mkDynamicCondition, mkDynamicControl, mkDynamicDefaults, mkDynamicEmptyValue, mkDynamicFlatten, mkDynamicForm, mkDynamicGroup, mkDynamicSpan, mkDynamicValidators, mkIsArray, mkIsGroup, mkIsSection, mkIsValueField };
+export { MkDynamicFieldDef, MkDynamicFields, MkDynamicForm, mkDynamicCondition, mkDynamicControl, mkDynamicDefaults, mkDynamicEmptyValue, mkDynamicFlatten, mkDynamicForm, mkDynamicFormToSignalSchema, mkDynamicGroup, mkDynamicSpan, mkDynamicValidators, mkIsArray, mkIsGroup, mkIsSection, mkIsValueField };
 //# sourceMappingURL=mk-kit-ui-dynamic-form.mjs.map