@mk-kit/ui 0.42.0 → 0.44.0

package/types/mk-kit-ui-dnd.d.ts

@@ -323,6 +323,12 @@ declare class MkDropList<T = unknown> {
      * move items across lists by keyboard.
      */
     readonly mkDropListLabel: _angular_core.InputSignal<string>;
+    /**
+     * Id of the element that names the list (`aria-labelledby`), e.g. a
+     * visible heading. Takes precedence over `mkDropListLabel` as the
+     * accessible name; the label is still used in announcements.
+     */
+    readonly mkDropListLabelledBy: _angular_core.InputSignal<string>;
     /** Layout axis; controls pointer hit-testing and arrow-key direction. */
     readonly mkDropListOrientation: _angular_core.InputSignal<MkDropListOrientation>;
     /** Disable dropping into (and dragging out of) this list. */
@@ -348,7 +354,11 @@ declare class MkDropList<T = unknown> {
     protected readonly orientationAllowed: _angular_core.Signal<boolean>;
     /** A static `aria-label` written in the template, kept when no label input is set. */
     private readonly staticAriaLabel;
-    /** Accessible name of the list: `mkDropListLabel`, else the template's own. */
+    /**
+     * Accessible name of the list: `mkDropListLabel`, else the template's own.
+     * Omitted while `mkDropListLabelledBy` names the list, so the referenced
+     * element is the single source of the name.
+     */
     protected readonly ariaLabel: _angular_core.Signal<string | null>;
     /** Connected-list ids, normalised to a plain array. */
     readonly connectedTo: _angular_core.Signal<readonly string[]>;
@@ -368,7 +378,7 @@ declare class MkDropList<T = unknown> {
     /** Emit a drop into this list. Called by the active `MkDrag`. */
     emitDrop(event: MkDropEvent<any>): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkDropList<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkDropList<any>, "[mkDropList]", ["mkDropList"], { "mkDropListData": { "alias": "mkDropListData"; "required": false; "isSignal": true; }; "mkDropListId": { "alias": "mkDropListId"; "required": false; "isSignal": true; }; "mkDropListConnectedTo": { "alias": "mkDropListConnectedTo"; "required": false; "isSignal": true; }; "mkDropListLabel": { "alias": "mkDropListLabel"; "required": false; "isSignal": true; }; "mkDropListOrientation": { "alias": "mkDropListOrientation"; "required": false; "isSignal": true; }; "mkDropListDisabled": { "alias": "mkDropListDisabled"; "required": false; "isSignal": true; }; }, { "mkDropListDropped": "mkDropListDropped"; }, ["drags"], ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkDropList<any>, "[mkDropList]", ["mkDropList"], { "mkDropListData": { "alias": "mkDropListData"; "required": false; "isSignal": true; }; "mkDropListId": { "alias": "mkDropListId"; "required": false; "isSignal": true; }; "mkDropListConnectedTo": { "alias": "mkDropListConnectedTo"; "required": false; "isSignal": true; }; "mkDropListLabel": { "alias": "mkDropListLabel"; "required": false; "isSignal": true; }; "mkDropListLabelledBy": { "alias": "mkDropListLabelledBy"; "required": false; "isSignal": true; }; "mkDropListOrientation": { "alias": "mkDropListOrientation"; "required": false; "isSignal": true; }; "mkDropListDisabled": { "alias": "mkDropListDisabled"; "required": false; "isSignal": true; }; }, { "mkDropListDropped": "mkDropListDropped"; }, ["drags"], ["*"], true, never>;
 }
 
 /** Layout axis a drop list lays its items along. */
@@ -475,8 +485,13 @@ declare class MkDragDropRegistry {
  *
  * For connected buckets / kanban, use `[mkDropList]` + `[mkDrag]` directly.
  *
+ * The list renders as a named `group` of `button` items: pass `label` (or
+ * `labelledBy` pointing at a visible heading) so screen readers say what is
+ * being reordered — the i18n `sortableListLabel` ("Sortable list") is the
+ * fallback.
+ *
  * ```html
- * <mk-sortable-list [(items)]="rows">
+ * <mk-sortable-list [(items)]="rows" label="Steps">
  *   <ng-template let-row let-i="index">
  *     <span mkDragHandle aria-hidden="true">⠿</span> {{ i + 1 }}. {{ row.name }}
  *   </ng-template>
@@ -486,8 +501,19 @@ declare class MkDragDropRegistry {
  * @typeParam T item data type.
  */
 declare class MkSortableList<T = unknown> {
+    private readonly i18n;
     /** The ordered items (two-way). Reordered in place on drop. */
     readonly items: _angular_core.ModelSignal<T[]>;
+    /**
+     * Accessible name of the list (`aria-label`), also used in the
+     * "moved into …" announcements. Defaults to the i18n `sortableListLabel`.
+     */
+    readonly label: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Id of an element that names the list (`aria-labelledby`), e.g. a visible
+     * heading. Wins over `label` as the accessible name.
+     */
+    readonly labelledBy: _angular_core.InputSignal<string | undefined>;
     /** Layout axis of the list. */
     readonly orientation: _angular_core.InputSignal<MkDropListOrientation>;
     /** Disable reordering. */
@@ -498,9 +524,11 @@ declare class MkSortableList<T = unknown> {
     readonly sorted: _angular_core.OutputEmitterRef<MkDropEvent<T>>;
     /** The row template projected as `<ng-template>`. */
     protected readonly itemTemplate: _angular_core.Signal<TemplateRef<any>>;
+    /** `label`, else the i18n default. */
+    protected readonly resolvedLabel: _angular_core.Signal<string>;
     protected onDrop(event: MkDropEvent<T>): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkSortableList<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkSortableList<any>, "mk-sortable-list", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "trackBy": { "alias": "trackBy"; "required": false; "isSignal": true; }; }, { "items": "itemsChange"; "sorted": "sorted"; }, ["itemTemplate"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkSortableList<any>, "mk-sortable-list", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "labelledBy": { "alias": "labelledBy"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "trackBy": { "alias": "trackBy"; "required": false; "isSignal": true; }; }, { "items": "itemsChange"; "sorted": "sorted"; }, ["itemTemplate"], never, true, never>;
 }
 
 export { MkDrag, MkDragDropRegistry, MkDragHandle, MkDropList, MkSortableList, mkMoveItemInArray, mkTransferArrayItem };

package/types/mk-kit-ui-dynamic-form.d.ts

@@ -1,4 +1,5 @@
 import { ValidatorFn, AbstractControl, FormGroup, FormControl, FormArray } from '@angular/forms';
+import { Schema } from '@angular/forms/signals';
 import * as _mk_kit_ui_core from '@mk-kit/ui/core';
 import * as _angular_core from '@angular/core';
 import { TemplateRef } from '@angular/core';
@@ -154,6 +155,48 @@ declare function mkDynamicFlatten(fields: readonly MkDynamicField[], prefix?: st
 /** Column span a field takes in a grid of `columns`. */
 declare function mkDynamicSpan(field: MkDynamicField, columns: number): number;
 
+/**
+ * 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).
+ */
+declare function mkDynamicFormToSignalSchema<TModel extends object = Record<string, unknown>>(definition: MkDynamicSchema | readonly MkDynamicField[]): Schema<TModel>;
+
 /** Context handed to a custom field template. */
 interface MkDynamicFieldContext {
     $implicit: MkDynamicFieldBase;
@@ -301,5 +344,5 @@ declare class MkDynamicForm {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkDynamicForm, "mk-dynamic-form", never, { "schema": { "alias": "schema"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "labelPosition": { "alias": "labelPosition"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "formSubmit": "formSubmit"; "invalidSubmit": "invalidSubmit"; }, ["defs"], ["*"], true, never>;
 }
 
-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 };
 export type { MkDynamicArray, MkDynamicCondition, MkDynamicField, MkDynamicFieldBase, MkDynamicFieldContext, MkDynamicFieldType, MkDynamicGroup, MkDynamicGroup as MkDynamicGroupField, MkDynamicOption, MkDynamicSchema, MkDynamicSection, MkDynamicValidators };