@malva-ui/core 0.1.12

package/esm2022/form-utils/lib/form-field/form-field.js

@@ -0,0 +1,245 @@
+import { ChangeDetectionStrategy, Component, computed, contentChild, effect, inject, input, isDevMode, signal, ViewEncapsulation, } from '@angular/core';
+import { FormGroupDirective, NgControl, NgForm, PristineChangeEvent, StatusChangeEvent, TouchedChangeEvent, } from '@angular/forms';
+import { FormField } from '@angular/forms/signals';
+import { MlvMessage } from '../message/message';
+import { MLV_FORM_UTILS_I18N } from '@malva-ui/i18n';
+import * as i0 from "@angular/core";
+const DEFAULT_ERROR_MESSAGES = {
+    required: () => 'This field is required',
+    email: () => 'Please enter a valid email address',
+    min: (err) => `Value must be at least ${err.min}`,
+    max: (err) => `Value must be at most ${err.max}`,
+    minlength: (err) => {
+        const e = err;
+        return `Must be at least ${e.requiredLength} characters`;
+    },
+    maxlength: (err) => {
+        const e = err;
+        return `Must be at most ${e.requiredLength} characters`;
+    },
+    pattern: () => 'Invalid format',
+};
+/**
+ * Validator keys already reported through {@link MlvFormField}'s dev-mode
+ * warning. Module-scoped so a key is named once per application run rather than
+ * on every change-detection pass.
+ */
+const WARNED_UNMAPPED_KEYS = new Set();
+export class MlvFormField {
+    /** Visual state of the field. Overridden to `'error'` when an auto error message is shown. */
+    state = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+    /** Custom validator-key → message map (string or factory) overriding the built-in defaults. */
+    errorMessages = input({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorMessages" }] : /* istanbul ignore next */ []));
+    /** Controls when validation errors become visible. */
+    displayStrategy = input('touched', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayStrategy" }] : /* istanbul ignore next */ []));
+    /**
+     * @private The form-utils i18n strings. Optional so `mlv-form-field` keeps
+     * rendering in applications that never called `provideMlvI18n()`.
+     */
+    _i18n = inject(MLV_FORM_UTILS_I18N, { optional: true });
+    /** @private The projected `NgControl` whose validation state this field reflects. */
+    _ngControl = contentChild(NgControl, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_ngControl" }] : /* istanbul ignore next */ []));
+    /**
+     * @private The projected signal-forms `[formField]` directive, when the
+     * child control is bound through `@angular/forms/signals` instead of an
+     * `NgControl`. Takes precedence over the NgControl path when present.
+     */
+    _signalField = contentChild(FormField, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_signalField" }] : /* istanbul ignore next */ []));
+    /**
+     * @private The bound signal-forms `FieldState`, or `null` while no
+     * `[formField]` child is projected. `field()` is the `FieldTree`; calling it
+     * yields the reactive `FieldState`.
+     */
+    _signalFieldState = computed(() => {
+        const formField = this._signalField();
+        return formField ? formField.field()() : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_signalFieldState" }] : /* istanbul ignore next */ []));
+    /** @private The ancestor form directive, used to observe submission state. */
+    _formDirective = inject(FormGroupDirective, { optional: true }) ??
+        inject(NgForm, { optional: true });
+    /** @private Current validation errors of the projected control. */
+    _controlErrors = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_controlErrors" }] : /* istanbul ignore next */ []));
+    /** @private Whether the projected control has been touched. */
+    _controlTouched = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_controlTouched" }] : /* istanbul ignore next */ []));
+    /** @private Whether the projected control is dirty. */
+    _controlDirty = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_controlDirty" }] : /* istanbul ignore next */ []));
+    /** @private Whether the ancestor form has been submitted. */
+    _formSubmitted = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_formSubmitted" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect((onCleanup) => {
+            // Signal-forms path: state is read reactively from the FieldState — no
+            // event subscriptions. (The signals interop also exposes a shim
+            // NgControl whose `.control` lacks the `events` stream, so the legacy
+            // path below must not run for a [formField]-bound child.)
+            if (this._signalField())
+                return;
+            const control = this._ngControl()?.control;
+            if (!control)
+                return;
+            this._controlErrors.set(control.errors);
+            this._controlTouched.set(control.touched);
+            this._controlDirty.set(control.dirty);
+            this._formSubmitted.set(this._formDirective?.submitted ?? false);
+            const subscription = control.events.subscribe((event) => {
+                if (event instanceof StatusChangeEvent) {
+                    this._controlErrors.set(control.errors);
+                }
+                else if (event instanceof TouchedChangeEvent) {
+                    this._controlTouched.set(event.touched);
+                }
+                else if (event instanceof PristineChangeEvent) {
+                    this._controlDirty.set(!event.pristine);
+                }
+            });
+            const formDirective = this._formDirective;
+            if (formDirective) {
+                const formControl = formDirective.form;
+                const formSub = formControl.events.subscribe(() => {
+                    this._formSubmitted.set(formDirective.submitted);
+                });
+                subscription.add(formSub);
+            }
+            onCleanup(() => subscription.unsubscribe());
+        });
+        // Dev-only diagnostic: a validator key with no mapped message renders the
+        // generic fallback, which is correct for users but usually a gap for the
+        // author. Warned once per key per application run.
+        effect(() => {
+            const key = this._unmappedErrorKey();
+            if (!key || !isDevMode() || WARNED_UNMAPPED_KEYS.has(key))
+                return;
+            WARNED_UNMAPPED_KEYS.add(key);
+            console.warn(`[mlv-form-field] No message is mapped for the validator key "${key}"; ` +
+                `showing the generic message instead. Supply one through [errorMessages].`);
+        });
+    }
+    /** @private Whether validation errors should currently be displayed, per {@link displayStrategy}. */
+    _shouldDisplay = computed(() => {
+        const signalState = this._signalFieldState();
+        switch (this.displayStrategy()) {
+            case 'touched':
+                return signalState ? signalState.touched() : this._controlTouched();
+            case 'dirty':
+                return signalState ? signalState.dirty() : this._controlDirty();
+            case 'submit':
+                // Signal forms: submission is field-tree-level state; the closest
+                // per-field proxy is touched (submit() marks all fields touched).
+                return signalState ? signalState.touched() : this._formSubmitted();
+            case 'immediate':
+                return true;
+        }
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_shouldDisplay" }] : /* istanbul ignore next */ []));
+    /**
+     * @private Unified error view: `[key, errorPayload]` pairs from whichever
+     * forms API the projected control is bound through. Signal-forms
+     * `ValidationError`s are keyed by their lower-cased `kind` (matching the
+     * legacy reactive keys: `minLength` → `minlength`); the payload is the
+     * error object itself (it carries `message` when a rule supplied one).
+     */
+    _errorEntries = computed(() => {
+        const signalState = this._signalFieldState();
+        if (signalState) {
+            return signalState
+                .errors()
+                .map((error) => [error.kind.toLowerCase(), error]);
+        }
+        const errors = this._controlErrors();
+        return errors ? Object.entries(errors) : [];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_errorEntries" }] : /* istanbul ignore next */ []));
+    /** The resolved auto error message for the projected control, or `''` when none should show. */
+    autoErrorMessage = computed(() => {
+        const entries = this._errorEntries();
+        if (entries.length === 0 || !this._shouldDisplay())
+            return '';
+        const customMessages = this.errorMessages();
+        const [key, payload] = entries[0];
+        const custom = customMessages[key];
+        if (custom) {
+            return typeof custom === 'function' ? custom(payload) : custom;
+        }
+        // Signal-forms rules can carry their own message — prefer it.
+        const ruleMessage = payload?.message;
+        if (ruleMessage)
+            return ruleMessage;
+        const defaultFn = DEFAULT_ERROR_MESSAGES[key];
+        if (defaultFn) {
+            return defaultFn(payload);
+        }
+        // Unknown validator key: never surface the raw key to end users.
+        return this._genericErrorMessage();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "autoErrorMessage" }] : /* istanbul ignore next */ []));
+    /**
+     * @private Neutral, translated message shown when a validator key has no
+     * consumer-supplied, rule-supplied or built-in message.
+     */
+    _genericErrorMessage = computed(() => this._i18n?.().invalidValue ?? 'This value is invalid', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_genericErrorMessage" }] : /* istanbul ignore next */ []));
+    /**
+     * @private The currently displayed validator key that has no mapped message
+     * and therefore falls back to {@link _genericErrorMessage} — `null` when a
+     * specific message applies. Drives the dev-mode warning only.
+     */
+    _unmappedErrorKey = computed(() => {
+        const entries = this._errorEntries();
+        if (entries.length === 0 || !this._shouldDisplay())
+            return null;
+        const [key, payload] = entries[0];
+        if (this.errorMessages()[key])
+            return null;
+        if (payload?.message)
+            return null;
+        if (DEFAULT_ERROR_MESSAGES[key])
+            return null;
+        return key;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_unmappedErrorKey" }] : /* istanbul ignore next */ []));
+    /** The effective visual state: `'error'` when an auto error message is shown, otherwise {@link state}. */
+    resolvedState = computed(() => {
+        if (this.autoErrorMessage())
+            return 'error';
+        return this.state();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedState" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvFormField, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MlvFormField, isStandalone: true, selector: "mlv-form-field", inputs: { state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: true, isRequired: false, transformFunction: null }, displayStrategy: { classPropertyName: "displayStrategy", publicName: "displayStrategy", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "_ngControl", first: true, predicate: NgControl, descendants: true, isSignal: true }, { propertyName: "_signalField", first: true, predicate: FormField, descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div class="mlv-form-field" [class]="'mlv-form-field--' + resolvedState()">
+      <ng-content select="mlv-label" />
+      <div class="mlv-form-field__control">
+        <ng-content />
+      </div>
+      <ng-content select="mlv-message" />
+      @if (autoErrorMessage()) {
+        <mlv-message state="error">{{ autoErrorMessage() }}</mlv-message>
+      }
+    </div>
+  `, isInline: true, styles: [":host{display:block}.mlv-form-field{display:flex;flex-direction:column}.mlv-form-field__control{display:flex;align-items:center;width:100%}.mlv-form-field__control>*{width:100%}.mlv-form-field--error>.mlv-form-field__control>*>.mlv-form-control-wrapper{--container-border-color: var(--mlv-border-error)}\n"], dependencies: [{ kind: "component", type: MlvMessage, selector: "mlv-message", inputs: ["state"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvFormField, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-form-field', imports: [MlvMessage], template: `
+    <div class="mlv-form-field" [class]="'mlv-form-field--' + resolvedState()">
+      <ng-content select="mlv-label" />
+      <div class="mlv-form-field__control">
+        <ng-content />
+      </div>
+      <ng-content select="mlv-message" />
+      @if (autoErrorMessage()) {
+        <mlv-message state="error">{{ autoErrorMessage() }}</mlv-message>
+      }
+    </div>
+  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}.mlv-form-field{display:flex;flex-direction:column}.mlv-form-field__control{display:flex;align-items:center;width:100%}.mlv-form-field__control>*{width:100%}.mlv-form-field--error>.mlv-form-field__control>*>.mlv-form-control-wrapper{--container-border-color: var(--mlv-border-error)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", required: false }] }], displayStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayStrategy", required: false }] }], _ngControl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgControl), { isSignal: true }] }], _signalField: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FormField), { isSignal: true }] }] } });
+//# sourceMappingURL=form-field.js.map

package/esm2022/form-utils/lib/form-field/form-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-field.js","sourceRoot":"","sources":["../../../../../../../libs/core/form-utils/src/lib/form-field/form-field.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  contentChild,\n  effect,\n  inject,\n  input,\n  isDevMode,\n  signal,\n  ViewEncapsulation,\n} from '@angular/core';\nimport type { ValidationErrors } from '@angular/forms';\nimport {\n  FormGroupDirective,\n  NgControl,\n  NgForm,\n  PristineChangeEvent,\n  StatusChangeEvent,\n  TouchedChangeEvent,\n} from '@angular/forms';\nimport { FormField } from '@angular/forms/signals';\nimport type { MlvFormState } from '../models/form-state';\nimport type { MlvErrorDisplayStrategy } from '../models/error-display-strategy';\nimport { MlvMessage } from '../message/message';\nimport { MLV_FORM_UTILS_I18N } from '@malva-ui/i18n';\n\nconst DEFAULT_ERROR_MESSAGES: Record<string, (err: unknown) => string> = {\n  required: () => 'This field is required',\n  email: () => 'Please enter a valid email address',\n  min: (err) => `Value must be at least ${(err as { min: number }).min}`,\n  max: (err) => `Value must be at most ${(err as { max: number }).max}`,\n  minlength: (err) => {\n    const e = err as { requiredLength: number };\n    return `Must be at least ${e.requiredLength} characters`;\n  },\n  maxlength: (err) => {\n    const e = err as { requiredLength: number };\n    return `Must be at most ${e.requiredLength} characters`;\n  },\n  pattern: () => 'Invalid format',\n};\n\n/**\n * Validator keys already reported through {@link MlvFormField}'s dev-mode\n * warning. Module-scoped so a key is named once per application run rather than\n * on every change-detection pass.\n */\nconst WARNED_UNMAPPED_KEYS = new Set<string>();\n\n@Component({\n  selector: 'mlv-form-field',\n  imports: [MlvMessage],\n  template: `\n    <div class=\"mlv-form-field\" [class]=\"'mlv-form-field--' + resolvedState()\">\n      <ng-content select=\"mlv-label\" />\n      <div class=\"mlv-form-field__control\">\n        <ng-content />\n      </div>\n      <ng-content select=\"mlv-message\" />\n      @if (autoErrorMessage()) {\n        <mlv-message state=\"error\">{{ autoErrorMessage() }}</mlv-message>\n      }\n    </div>\n  `,\n  styleUrl: './form-field.css',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class MlvFormField {\n  /** Visual state of the field. Overridden to `'error'` when an auto error message is shown. */\n  readonly state = input<MlvFormState>('default');\n  /** Custom validator-key → message map (string or factory) overriding the built-in defaults. */\n  readonly errorMessages = input<\n    Record<string, string | ((err: unknown) => string)>\n  >({});\n  /** Controls when validation errors become visible. */\n  readonly displayStrategy = input<MlvErrorDisplayStrategy>('touched');\n\n  /**\n   * @private The form-utils i18n strings. Optional so `mlv-form-field` keeps\n   * rendering in applications that never called `provideMlvI18n()`.\n   */\n  private readonly _i18n = inject(MLV_FORM_UTILS_I18N, { optional: true });\n\n  /** @private The projected `NgControl` whose validation state this field reflects. */\n  private readonly _ngControl = contentChild(NgControl);\n\n  /**\n   * @private The projected signal-forms `[formField]` directive, when the\n   * child control is bound through `@angular/forms/signals` instead of an\n   * `NgControl`. Takes precedence over the NgControl path when present.\n   */\n  private readonly _signalField = contentChild(FormField);\n\n  /**\n   * @private The bound signal-forms `FieldState`, or `null` while no\n   * `[formField]` child is projected. `field()` is the `FieldTree`; calling it\n   * yields the reactive `FieldState`.\n   */\n  private readonly _signalFieldState = computed(() => {\n    const formField = this._signalField();\n    return formField ? formField.field()() : null;\n  });\n  /** @private The ancestor form directive, used to observe submission state. */\n  private readonly _formDirective =\n    inject(FormGroupDirective, { optional: true }) ??\n    inject(NgForm, { optional: true });\n\n  /** @private Current validation errors of the projected control. */\n  private readonly _controlErrors = signal<ValidationErrors | null>(null);\n  /** @private Whether the projected control has been touched. */\n  private readonly _controlTouched = signal(false);\n  /** @private Whether the projected control is dirty. */\n  private readonly _controlDirty = signal(false);\n  /** @private Whether the ancestor form has been submitted. */\n  private readonly _formSubmitted = signal(false);\n\n  constructor() {\n    effect((onCleanup) => {\n      // Signal-forms path: state is read reactively from the FieldState — no\n      // event subscriptions. (The signals interop also exposes a shim\n      // NgControl whose `.control` lacks the `events` stream, so the legacy\n      // path below must not run for a [formField]-bound child.)\n      if (this._signalField()) return;\n      const control = this._ngControl()?.control;\n      if (!control) return;\n\n      this._controlErrors.set(control.errors);\n      this._controlTouched.set(control.touched);\n      this._controlDirty.set(control.dirty);\n      this._formSubmitted.set(this._formDirective?.submitted ?? false);\n\n      const subscription = control.events.subscribe((event) => {\n        if (event instanceof StatusChangeEvent) {\n          this._controlErrors.set(control.errors);\n        } else if (event instanceof TouchedChangeEvent) {\n          this._controlTouched.set(event.touched);\n        } else if (event instanceof PristineChangeEvent) {\n          this._controlDirty.set(!event.pristine);\n        }\n      });\n\n      const formDirective = this._formDirective;\n      if (formDirective) {\n        const formControl = (formDirective as FormGroupDirective | NgForm).form;\n        const formSub = formControl.events.subscribe(() => {\n          this._formSubmitted.set(formDirective.submitted);\n        });\n        subscription.add(formSub);\n      }\n\n      onCleanup(() => subscription.unsubscribe());\n    });\n\n    // Dev-only diagnostic: a validator key with no mapped message renders the\n    // generic fallback, which is correct for users but usually a gap for the\n    // author. Warned once per key per application run.\n    effect(() => {\n      const key = this._unmappedErrorKey();\n      if (!key || !isDevMode() || WARNED_UNMAPPED_KEYS.has(key)) return;\n      WARNED_UNMAPPED_KEYS.add(key);\n      console.warn(\n        `[mlv-form-field] No message is mapped for the validator key \"${key}\"; ` +\n          `showing the generic message instead. Supply one through [errorMessages].`,\n      );\n    });\n  }\n\n  /** @private Whether validation errors should currently be displayed, per {@link displayStrategy}. */\n  private readonly _shouldDisplay = computed(() => {\n    const signalState = this._signalFieldState();\n    switch (this.displayStrategy()) {\n      case 'touched':\n        return signalState ? signalState.touched() : this._controlTouched();\n      case 'dirty':\n        return signalState ? signalState.dirty() : this._controlDirty();\n      case 'submit':\n        // Signal forms: submission is field-tree-level state; the closest\n        // per-field proxy is touched (submit() marks all fields touched).\n        return signalState ? signalState.touched() : this._formSubmitted();\n      case 'immediate':\n        return true;\n    }\n  });\n\n  /**\n   * @private Unified error view: `[key, errorPayload]` pairs from whichever\n   * forms API the projected control is bound through. Signal-forms\n   * `ValidationError`s are keyed by their lower-cased `kind` (matching the\n   * legacy reactive keys: `minLength` → `minlength`); the payload is the\n   * error object itself (it carries `message` when a rule supplied one).\n   */\n  private readonly _errorEntries = computed<[string, unknown][]>(() => {\n    const signalState = this._signalFieldState();\n    if (signalState) {\n      return signalState\n        .errors()\n        .map((error) => [error.kind.toLowerCase(), error]);\n    }\n    const errors = this._controlErrors();\n    return errors ? Object.entries(errors) : [];\n  });\n\n  /** The resolved auto error message for the projected control, or `''` when none should show. */\n  readonly autoErrorMessage = computed(() => {\n    const entries = this._errorEntries();\n    if (entries.length === 0 || !this._shouldDisplay()) return '';\n\n    const customMessages = this.errorMessages();\n    const [key, payload] = entries[0];\n    const custom = customMessages[key];\n    if (custom) {\n      return typeof custom === 'function' ? custom(payload) : custom;\n    }\n    // Signal-forms rules can carry their own message — prefer it.\n    const ruleMessage = (payload as { message?: string } | null)?.message;\n    if (ruleMessage) return ruleMessage;\n    const defaultFn = DEFAULT_ERROR_MESSAGES[key];\n    if (defaultFn) {\n      return defaultFn(payload);\n    }\n    // Unknown validator key: never surface the raw key to end users.\n    return this._genericErrorMessage();\n  });\n\n  /**\n   * @private Neutral, translated message shown when a validator key has no\n   * consumer-supplied, rule-supplied or built-in message.\n   */\n  private readonly _genericErrorMessage = computed(\n    () => this._i18n?.().invalidValue ?? 'This value is invalid',\n  );\n\n  /**\n   * @private The currently displayed validator key that has no mapped message\n   * and therefore falls back to {@link _genericErrorMessage} — `null` when a\n   * specific message applies. Drives the dev-mode warning only.\n   */\n  private readonly _unmappedErrorKey = computed<string | null>(() => {\n    const entries = this._errorEntries();\n    if (entries.length === 0 || !this._shouldDisplay()) return null;\n    const [key, payload] = entries[0];\n    if (this.errorMessages()[key]) return null;\n    if ((payload as { message?: string } | null)?.message) return null;\n    if (DEFAULT_ERROR_MESSAGES[key]) return null;\n    return key;\n  });\n\n  /** The effective visual state: `'error'` when an auto error message is shown, otherwise {@link state}. */\n  readonly resolvedState = computed<MlvFormState>(() => {\n    if (this.autoErrorMessage()) return 'error';\n    return this.state();\n  });\n}\n"]}

package/esm2022/form-utils/lib/hint/hint.js

@@ -0,0 +1,11 @@
+import { ChangeDetectionStrategy, Component, ViewEncapsulation, } from '@angular/core';
+import * as i0 from "@angular/core";
+export class MlvHint {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvHint, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: MlvHint, isStandalone: true, selector: "mlv-hint", ngImport: i0, template: `<ng-content />`, isInline: true, styles: [":host{font-size:var(--mlv-hint-font-size, .75rem);color:var(--mlv-hint-color, #888);font-style:italic}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvHint, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-hint', template: `<ng-content />`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{font-size:var(--mlv-hint-font-size, .75rem);color:var(--mlv-hint-color, #888);font-style:italic}\n"] }]
+        }] });
+//# sourceMappingURL=hint.js.map

package/esm2022/form-utils/lib/hint/hint.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hint.js","sourceRoot":"","sources":["../../../../../../../libs/core/form-utils/src/lib/hint/hint.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,uBAAuB,EACvB,SAAS,EACT,iBAAiB,GAClB,MAAM,eAAe,CAAC;;AASvB,MAAM,OAAO,OAAO;uGAAP,OAAO;2FAAP,OAAO,oEALR,gBAAgB;;2FAKf,OAAO;kBAPnB,SAAS;+BACE,UAAU,YACV,gBAAgB,iBAEX,iBAAiB,CAAC,IAAI,mBACpB,uBAAuB,CAAC,MAAM","sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  ViewEncapsulation,\n} from '@angular/core';\n\n@Component({\n  selector: 'mlv-hint',\n  template: `<ng-content />`,\n  styleUrl: './hint.css',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class MlvHint {}\n"]}

package/esm2022/form-utils/lib/label/label.js

@@ -0,0 +1,55 @@
+import { ChangeDetectionStrategy, Component, computed, inject, input, ViewEncapsulation, } from '@angular/core';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { MLV_FORM_UTILS_I18N } from '@malva-ui/i18n';
+import * as i0 from "@angular/core";
+export class MlvLabel {
+    /** Id of the control this label names, rendered as the native `for` attribute. */
+    for = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "for" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the labelled control is required. Renders a visual `*` marker plus
+     * a visually-hidden, translated "required" word so the requirement is
+     * announced even where `aria-required` is not surfaced. Controls extending
+     * `MlvSignalFormUiControlBase` forward their own `required` input here.
+     */
+    required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /**
+     * @private The form-utils i18n strings. Optional so a bare `mlv-label` still
+     * renders in applications that never called `provideMlvI18n()`.
+     */
+    _i18n = inject(MLV_FORM_UTILS_I18N, { optional: true });
+    /** @protected Translated word announced after the label of a required control. */
+    _requiredText = computed(() => this._i18n?.().required ?? 'required', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_requiredText" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvLabel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MlvLabel, isStandalone: true, selector: "mlv-label", inputs: { for: { classPropertyName: "for", publicName: "for", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "mlv-label" }, ngImport: i0, template: `
+    <label [attr.for]="for()">
+      <ng-content />
+      @if (required()) {
+        <span class="mlv-label__required" aria-hidden="true">*</span>
+        <span class="cdk-visually-hidden">{{ _requiredText() }}</span>
+      }
+      <span class="mlv-label__hint">
+        <ng-content select="mlv-hint" />
+      </span>
+    </label>
+  `, isInline: true, styles: [".mlv-label{display:block;margin-bottom:.25rem}.mlv-label label{display:inline-flex;align-items:baseline;gap:.25rem;color:var(--mlv-text-primary)}.mlv-label__hint{font-weight:400;color:var(--mlv-text-secondary)}.mlv-label__required{color:var(--mlv-text-negative);margin-inline-start:-.125rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvLabel, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-label', template: `
+    <label [attr.for]="for()">
+      <ng-content />
+      @if (required()) {
+        <span class="mlv-label__required" aria-hidden="true">*</span>
+        <span class="cdk-visually-hidden">{{ _requiredText() }}</span>
+      }
+      <span class="mlv-label__hint">
+        <ng-content select="mlv-hint" />
+      </span>
+    </label>
+  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'mlv-label',
+                    }, styles: [".mlv-label{display:block;margin-bottom:.25rem}.mlv-label label{display:inline-flex;align-items:baseline;gap:.25rem;color:var(--mlv-text-primary)}.mlv-label__hint{font-weight:400;color:var(--mlv-text-secondary)}.mlv-label__required{color:var(--mlv-text-negative);margin-inline-start:-.125rem}\n"] }]
+        }], propDecorators: { for: [{ type: i0.Input, args: [{ isSignal: true, alias: "for", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }] } });
+//# sourceMappingURL=label.js.map

package/esm2022/form-utils/lib/label/label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"label.js","sourceRoot":"","sources":["../../../../../../../libs/core/form-utils/src/lib/label/label.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,uBAAuB,EACvB,SAAS,EACT,QAAQ,EACR,MAAM,EACN,KAAK,EACL,iBAAiB,GAClB,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAC9D,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;;AAuBrD,MAAM,OAAO,QAAQ;IACnB,kFAAkF;IACzE,GAAG,GAAG,KAAK,CAAS,EAAE;4EAAC,CAAC;IAEjC;;;;;OAKG;IACM,QAAQ,GAAG,KAAK,CAAwB,KAAK,gFACpD,SAAS,EAAE,qBAAqB,GAChC,CAAC;IAEH;;;OAGG;IACc,KAAK,GAAG,MAAM,CAAC,mBAAmB,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;IAEzE,kFAAkF;IAC/D,aAAa,GAAG,QAAQ,CACzC,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,EAAE,CAAC,QAAQ,IAAI,UAAU;sFAC5C,CAAC;uGAvBS,QAAQ;2FAAR,QAAQ,2WAnBT;;;;;;;;;;;GAWT;;2FAQU,QAAQ;kBArBpB,SAAS;+BACE,WAAW,YACX;;;;;;;;;;;GAWT,iBAEc,iBAAiB,CAAC,IAAI,mBACpB,uBAAuB,CAAC,MAAM,QACzC;wBACJ,KAAK,EAAE,WAAW;qBACnB","sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  inject,\n  input,\n  ViewEncapsulation,\n} from '@angular/core';\nimport type { BooleanInput } from '@angular/cdk/coercion';\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { MLV_FORM_UTILS_I18N } from '@malva-ui/i18n';\n\n@Component({\n  selector: 'mlv-label',\n  template: `\n    <label [attr.for]=\"for()\">\n      <ng-content />\n      @if (required()) {\n        <span class=\"mlv-label__required\" aria-hidden=\"true\">*</span>\n        <span class=\"cdk-visually-hidden\">{{ _requiredText() }}</span>\n      }\n      <span class=\"mlv-label__hint\">\n        <ng-content select=\"mlv-hint\" />\n      </span>\n    </label>\n  `,\n  styleUrl: './label.scss',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'mlv-label',\n  },\n})\nexport class MlvLabel {\n  /** Id of the control this label names, rendered as the native `for` attribute. */\n  readonly for = input<string>('');\n\n  /**\n   * Whether the labelled control is required. Renders a visual `*` marker plus\n   * a visually-hidden, translated \"required\" word so the requirement is\n   * announced even where `aria-required` is not surfaced. Controls extending\n   * `MlvSignalFormUiControlBase` forward their own `required` input here.\n   */\n  readonly required = input<boolean, BooleanInput>(false, {\n    transform: coerceBooleanProperty,\n  });\n\n  /**\n   * @private The form-utils i18n strings. Optional so a bare `mlv-label` still\n   * renders in applications that never called `provideMlvI18n()`.\n   */\n  private readonly _i18n = inject(MLV_FORM_UTILS_I18N, { optional: true });\n\n  /** @protected Translated word announced after the label of a required control. */\n  protected readonly _requiredText = computed(\n    () => this._i18n?.().required ?? 'required',\n  );\n}\n"]}

package/esm2022/form-utils/lib/message/message.js

@@ -0,0 +1,20 @@
+import { ChangeDetectionStrategy, Component, input, ViewEncapsulation, } from '@angular/core';
+import * as i0 from "@angular/core";
+export class MlvMessage {
+    state = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvMessage, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.7", type: MlvMessage, isStandalone: true, selector: "mlv-message", inputs: { state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "animate.enter": "enter-animation", "animate.leave": "leave-animation" }, properties: { "class": "\"mlv-message--\" + state()", "attr.role": "state() === 'error' ? 'alert' : null", "attr.aria-live": "state() !== 'default' ? 'polite' : null" }, classAttribute: "mlv-message" }, ngImport: i0, template: ` <ng-content /> `, isInline: true, styles: [".mlv-message{display:block;font-weight:400;font-size:var(--mlv-typography-body-s-size)}.mlv-message--default{color:var(--mlv-text-secondary)}.mlv-message--success{color:var(--mlv-text-positive)}.mlv-message--info{color:var(--mlv-text-info)}.mlv-message--warning{color:var(--mlv-text-warning)}.mlv-message--error{color:var(--mlv-text-negative)}@media(prefers-reduced-motion:reduce){.mlv-message,.mlv-message *,.mlv-message:before,.mlv-message:after,[class^=mlv-message__],[class*=\" mlv-message__\"],[class^=mlv-message--],[class*=\" mlv-message--\"]{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:var(--mlv-duration-instant)!important}}.enter-animation{animation:mlv-slide-down var(--mlv-duration-normal) var(--mlv-ease-default)}.leave-animation{animation:mlv-slide-down var(--mlv-duration-normal) var(--mlv-ease-default) reverse}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvMessage, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-message', host: {
+                        'animate.enter': 'enter-animation',
+                        'animate.leave': 'leave-animation',
+                        class: 'mlv-message',
+                        '[class]': '"mlv-message--" + state()',
+                        '[attr.role]': "state() === 'error' ? 'alert' : null",
+                        '[attr.aria-live]': "state() !== 'default' ? 'polite' : null",
+                    }, template: ` <ng-content /> `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".mlv-message{display:block;font-weight:400;font-size:var(--mlv-typography-body-s-size)}.mlv-message--default{color:var(--mlv-text-secondary)}.mlv-message--success{color:var(--mlv-text-positive)}.mlv-message--info{color:var(--mlv-text-info)}.mlv-message--warning{color:var(--mlv-text-warning)}.mlv-message--error{color:var(--mlv-text-negative)}@media(prefers-reduced-motion:reduce){.mlv-message,.mlv-message *,.mlv-message:before,.mlv-message:after,[class^=mlv-message__],[class*=\" mlv-message__\"],[class^=mlv-message--],[class*=\" mlv-message--\"]{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:var(--mlv-duration-instant)!important}}.enter-animation{animation:mlv-slide-down var(--mlv-duration-normal) var(--mlv-ease-default)}.leave-animation{animation:mlv-slide-down var(--mlv-duration-normal) var(--mlv-ease-default) reverse}\n"] }]
+        }], propDecorators: { state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }] } });
+//# sourceMappingURL=message.js.map

package/esm2022/form-utils/lib/message/message.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"message.js","sourceRoot":"","sources":["../../../../../../../libs/core/form-utils/src/lib/message/message.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,uBAAuB,EACvB,SAAS,EACT,KAAK,EACL,iBAAiB,GAClB,MAAM,eAAe,CAAC;;AAkBvB,MAAM,OAAO,UAAU;IACZ,KAAK,GAAG,KAAK,CAAe,SAAS;8EAAC,CAAC;uGADrC,UAAU;2FAAV,UAAU,sfALX,kBAAkB;;2FAKjB,UAAU;kBAftB,SAAS;+BACE,aAAa,QACjB;wBACJ,eAAe,EAAE,iBAAiB;wBAClC,eAAe,EAAE,iBAAiB;wBAClC,KAAK,EAAE,aAAa;wBACpB,SAAS,EAAE,2BAA2B;wBACtC,aAAa,EAAE,sCAAsC;wBACrD,kBAAkB,EAAE,yCAAyC;qBAC9D,YACS,kBAAkB,iBAEb,iBAAiB,CAAC,IAAI,mBACpB,uBAAuB,CAAC,MAAM","sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  input,\n  ViewEncapsulation,\n} from '@angular/core';\nimport type { MlvFormState } from '../models/form-state';\n\n@Component({\n  selector: 'mlv-message',\n  host: {\n    'animate.enter': 'enter-animation',\n    'animate.leave': 'leave-animation',\n    class: 'mlv-message',\n    '[class]': '\"mlv-message--\" + state()',\n    '[attr.role]': \"state() === 'error' ? 'alert' : null\",\n    '[attr.aria-live]': \"state() !== 'default' ? 'polite' : null\",\n  },\n  template: ` <ng-content /> `,\n  styleUrl: './message.scss',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class MlvMessage {\n  readonly state = input<MlvFormState>('default');\n}\n"]}

package/esm2022/form-utils/lib/models/error-display-strategy.js

@@ -0,0 +1 @@
+//# sourceMappingURL=error-display-strategy.js.map

package/esm2022/form-utils/lib/models/error-display-strategy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"error-display-strategy.js","sourceRoot":"","sources":["../../../../../../../libs/core/form-utils/src/lib/models/error-display-strategy.ts"],"names":[],"mappings":"","sourcesContent":["export type MlvErrorDisplayStrategy =\n  | 'touched'\n  | 'dirty'\n  | 'submit'\n  | 'immediate';\n"]}

package/esm2022/form-utils/lib/models/form-control-connector.js

@@ -0,0 +1,3 @@
+import { InjectionToken } from '@angular/core';
+export const MLV_FORM_CONTROL = new InjectionToken('MLV_FORM_CONTROL');
+//# sourceMappingURL=form-control-connector.js.map

package/esm2022/form-utils/lib/models/form-control-connector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-control-connector.js","sourceRoot":"","sources":["../../../../../../../libs/core/form-utils/src/lib/models/form-control-connector.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAyC/C,MAAM,CAAC,MAAM,gBAAgB,GAAG,IAAI,cAAc,CAChD,kBAAkB,CACnB,CAAC","sourcesContent":["import type { Signal } from '@angular/core';\nimport { InjectionToken } from '@angular/core';\nimport type { MlvFormState } from './form-state';\nimport type { MlvFormControlPrepend } from '../form-control-sides';\nimport type { MlvFormControlAppend } from '../form-control-sides';\nimport type { MlvFormControlInset } from '../form-control-sides';\n\nexport interface MlvFormControl {\n  readonly focused: Signal<boolean>;\n  readonly disabled: Signal<boolean>;\n  readonly readonly: Signal<boolean>;\n  readonly state: Signal<MlvFormState>;\n  /**\n   * Effective state after field-bound errors/touched state are considered.\n   * Signal-form controls provide this; legacy controls fall back to `state`.\n   */\n  readonly resolvedState?: Signal<MlvFormState>;\n  readonly loading: Signal<boolean>;\n  readonly clearable: Signal<boolean>;\n  /**\n   * Fully rounded (stadium) control container. Optional — absent means the\n   * regular radius.\n   */\n  readonly pill?: Signal<boolean>;\n  /**\n   * Whether the control currently holds a clearable (non-empty) value. The\n   * wrapper renders the clear button only while `clearable() && hasValue()` —\n   * an empty control never shows a dangling X.\n   */\n  readonly hasValue: Signal<boolean>;\n  /**\n   * When `true`, the control renders its own clear button inside its template\n   * (e.g. select/combobox place it before the chevron) and the wrapper must\n   * NOT render its default one. Optional — absent means wrapper-rendered.\n   */\n  readonly ownsClearButton?: Signal<boolean>;\n  readonly prepend: Signal<MlvFormControlPrepend | undefined>;\n  readonly append: Signal<MlvFormControlAppend | undefined>;\n  /** Optional full-width content rendered inside the control border. */\n  readonly inset: Signal<MlvFormControlInset | undefined>;\n}\n\nexport const MLV_FORM_CONTROL = new InjectionToken<MlvFormControl>(\n  'MLV_FORM_CONTROL',\n);\n"]}

package/esm2022/form-utils/lib/models/form-state.js

@@ -0,0 +1 @@
+//# sourceMappingURL=form-state.js.map

package/esm2022/form-utils/lib/models/form-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-state.js","sourceRoot":"","sources":["../../../../../../../libs/core/form-utils/src/lib/models/form-state.ts"],"names":[],"mappings":"","sourcesContent":["export type MlvFormState = 'default' | 'success' | 'info' | 'warning' | 'error';\n"]}

package/esm2022/form-utils/lib/selection.service.js

@@ -0,0 +1,81 @@
+import { Injectable, signal, computed } from '@angular/core';
+import { Subject } from 'rxjs';
+import * as i0 from "@angular/core";
+export class MlvSelectionService {
+    multiple = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
+    selectedValues = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedValues" }] : /* istanbul ignore next */ []));
+    focusFirst$ = new Subject();
+    /**
+     * Equality predicate used for all membership checks (`isSelected`,
+     * `deselect`, and the `select`/`toggle` de-dup path). Defaults to reference
+     * equality (`a === b`). Set a custom comparator (e.g. compare by id) so object
+     * values written via `writeValue` after deserialization match the option
+     * instances and check-marks / display value stay in agreement.
+     */
+    compareWith = signal((a, b) => a === b, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "compareWith" }] : /* istanbul ignore next */ []));
+    displayValue = computed(() => {
+        const values = this.selectedValues();
+        if (values.length === 0)
+            return '';
+        if (values.length === 1)
+            return String(values[0]);
+        return `${values.length} items selected`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
+    /** @private Index of `value` within the current selection, or `-1`. */
+    _indexOf(value) {
+        const compare = this.compareWith();
+        return this.selectedValues().findIndex((v) => compare(v, value));
+    }
+    select(value) {
+        if (this.multiple()) {
+            const current = this.selectedValues();
+            const index = this._indexOf(value);
+            if (index >= 0) {
+                this.selectedValues.set([
+                    ...current.slice(0, index),
+                    ...current.slice(index + 1),
+                ]);
+            }
+            else {
+                this.selectedValues.set([...current, value]);
+            }
+        }
+        else {
+            this.selectedValues.set([value]);
+        }
+    }
+    deselect(value) {
+        const compare = this.compareWith();
+        this.selectedValues.set(this.selectedValues().filter((v) => !compare(v, value)));
+    }
+    isSelected(value) {
+        return this._indexOf(value) >= 0;
+    }
+    clear() {
+        this.selectedValues.set([]);
+    }
+    setValues(values) {
+        this.selectedValues.set(values);
+    }
+    toggle(value) {
+        if (this.isSelected(value)) {
+            this.deselect(value);
+        }
+        else {
+            this.select(value);
+        }
+    }
+    requestFocusFirst() {
+        this.focusFirst$.next();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvSelectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvSelectionService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvSelectionService, decorators: [{
+            type: Injectable
+        }] });
+//# sourceMappingURL=selection.service.js.map

package/esm2022/form-utils/lib/selection.service.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selection.service.js","sourceRoot":"","sources":["../../../../../../libs/core/form-utils/src/lib/selection.service.ts"],"names":[],"mappings":"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","sourcesContent":["import { Injectable, signal, computed } from '@angular/core';\nimport { Subject } from 'rxjs';\n\n@Injectable()\nexport class MlvSelectionService<T = unknown> {\n  readonly multiple = signal(false);\n  readonly selectedValues = signal<T[]>([]);\n  readonly focusFirst$ = new Subject<void>();\n\n  /**\n   * Equality predicate used for all membership checks (`isSelected`,\n   * `deselect`, and the `select`/`toggle` de-dup path). Defaults to reference\n   * equality (`a === b`). Set a custom comparator (e.g. compare by id) so object\n   * values written via `writeValue` after deserialization match the option\n   * instances and check-marks / display value stay in agreement.\n   */\n  readonly compareWith = signal<(a: T, b: T) => boolean>((a, b) => a === b);\n\n  readonly displayValue = computed(() => {\n    const values = this.selectedValues();\n    if (values.length === 0) return '';\n    if (values.length === 1) return String(values[0]);\n    return `${values.length} items selected`;\n  });\n\n  /** @private Index of `value` within the current selection, or `-1`. */\n  private _indexOf(value: T): number {\n    const compare = this.compareWith();\n    return this.selectedValues().findIndex((v) => compare(v, value));\n  }\n\n  select(value: T): void {\n    if (this.multiple()) {\n      const current = this.selectedValues();\n      const index = this._indexOf(value);\n      if (index >= 0) {\n        this.selectedValues.set([\n          ...current.slice(0, index),\n          ...current.slice(index + 1),\n        ]);\n      } else {\n        this.selectedValues.set([...current, value]);\n      }\n    } else {\n      this.selectedValues.set([value]);\n    }\n  }\n\n  deselect(value: T): void {\n    const compare = this.compareWith();\n    this.selectedValues.set(\n      this.selectedValues().filter((v) => !compare(v, value)),\n    );\n  }\n\n  isSelected(value: T): boolean {\n    return this._indexOf(value) >= 0;\n  }\n\n  clear(): void {\n    this.selectedValues.set([]);\n  }\n\n  setValues(values: T[]): void {\n    this.selectedValues.set(values);\n  }\n\n  toggle(value: T): void {\n    if (this.isSelected(value)) {\n      this.deselect(value);\n    } else {\n      this.select(value);\n    }\n  }\n\n  requestFocusFirst(): void {\n    this.focusFirst$.next();\n  }\n}\n"]}

package/esm2022/form-utils/malva-ui-core-form-utils.js

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './index';
+//# sourceMappingURL=malva-ui-core-form-utils.js.map

package/esm2022/form-utils/malva-ui-core-form-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"malva-ui-core-form-utils.js","sourceRoot":"","sources":["../../../../../libs/core/form-utils/src/malva-ui-core-form-utils.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,cAAc,SAAS,CAAC","sourcesContent":["/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"]}

package/esm2022/form-utils/testing/index.js

@@ -0,0 +1,2 @@
+export * from './lib/forms-binding-matrix';
+//# sourceMappingURL=index.js.map

package/esm2022/form-utils/testing/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../libs/core/form-utils/testing/src/index.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC","sourcesContent":["export * from './lib/forms-binding-matrix';\n"]}

package/esm2022/form-utils/testing/lib/forms-binding-matrix.js

@@ -0,0 +1,32 @@
+import { expect } from 'vitest';
+/**
+ * Shared assertion driver for the forms bindings matrix: form→control value
+ * write, control→form user interaction, touched propagation on blur, and
+ * disabled propagation — identical expectations for every binding mode. A
+ * control's spec calls this once per mode; a migrated control (CVA →
+ * FormValueControl) must keep all three runs green.
+ */
+export async function verifyFormsBinding(options) {
+    const { adapter } = options;
+    const label = `[${adapter.mode}]`;
+    // form → control → form round trip
+    await adapter.setValue(options.sample);
+    expect(adapter.getValue(), `${label} form-side write round-trip`).toEqual(options.sample);
+    // user interaction → form side
+    await options.interact();
+    expect(adapter.getValue(), `${label} user interaction result`).toEqual(options.expectedAfterInteraction);
+    // blur → touched
+    if (options.blur) {
+        expect(adapter.isTouched(), `${label} untouched before blur`).toBe(false);
+        await options.blur();
+        expect(adapter.isTouched(), `${label} touched after blur`).toBe(true);
+    }
+    // disabled propagation
+    if (adapter.setDisabled && adapter.isDisabled) {
+        await adapter.setDisabled(true);
+        expect(adapter.isDisabled(), `${label} disabled propagated`).toBe(true);
+        await adapter.setDisabled(false);
+        expect(adapter.isDisabled(), `${label} re-enabled`).toBe(false);
+    }
+}
+//# sourceMappingURL=forms-binding-matrix.js.map

package/esm2022/form-utils/testing/lib/forms-binding-matrix.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"forms-binding-matrix.js","sourceRoot":"","sources":["../../../../../../../libs/core/form-utils/testing/src/lib/forms-binding-matrix.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAoDhC;;;;;;GAMG;AACH,MAAM,CAAC,KAAK,UAAU,kBAAkB,CACtC,OAAwC;IAExC,MAAM,EAAE,OAAO,EAAE,GAAG,OAAO,CAAC;IAC5B,MAAM,KAAK,GAAG,IAAI,OAAO,CAAC,IAAI,GAAG,CAAC;IAElC,mCAAmC;IACnC,MAAM,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;IACvC,MAAM,CAAC,OAAO,CAAC,QAAQ,EAAE,EAAE,GAAG,KAAK,6BAA6B,CAAC,CAAC,OAAO,CACvE,OAAO,CAAC,MAAM,CACf,CAAC;IAEF,+BAA+B;IAC/B,MAAM,OAAO,CAAC,QAAQ,EAAE,CAAC;IACzB,MAAM,CAAC,OAAO,CAAC,QAAQ,EAAE,EAAE,GAAG,KAAK,0BAA0B,CAAC,CAAC,OAAO,CACpE,OAAO,CAAC,wBAAwB,CACjC,CAAC;IAEF,iBAAiB;IACjB,IAAI,OAAO,CAAC,IAAI,EAAE,CAAC;QACjB,MAAM,CAAC,OAAO,CAAC,SAAS,EAAE,EAAE,GAAG,KAAK,wBAAwB,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC1E,MAAM,OAAO,CAAC,IAAI,EAAE,CAAC;QACrB,MAAM,CAAC,OAAO,CAAC,SAAS,EAAE,EAAE,GAAG,KAAK,qBAAqB,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACxE,CAAC;IAED,uBAAuB;IACvB,IAAI,OAAO,CAAC,WAAW,IAAI,OAAO,CAAC,UAAU,EAAE,CAAC;QAC9C,MAAM,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;QAChC,MAAM,CAAC,OAAO,CAAC,UAAU,EAAE,EAAE,GAAG,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACxE,MAAM,OAAO,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;QACjC,MAAM,CAAC,OAAO,CAAC,UAAU,EAAE,EAAE,GAAG,KAAK,aAAa,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAClE,CAAC;AACH,CAAC","sourcesContent":["import { expect } from 'vitest';\n\n/**\n * One binding mode's view of the form side while running the bindings matrix.\n * Concrete adapters are built by the control's spec for each of the three\n * binding modes (reactive `[formControl]`, template-driven `ngModel`, signal\n * forms `[formField]`), so the shared {@link verifyFormsBinding} assertions\n * stay identical across modes and across controls.\n */\nexport interface MlvFormsBindingAdapter<T> {\n  /** Mode label used in assertion messages. */\n  readonly mode: 'reactive' | 'template-driven' | 'signal-forms';\n\n  /** Writes a value from the FORM side into the control. */\n  setValue(value: T): void | Promise<void>;\n\n  /** Reads the form side's current value. */\n  getValue(): T;\n\n  /** Whether the form side considers the control touched. */\n  isTouched(): boolean;\n\n  /** Disables from the form side. Omit when the mode cannot express it. */\n  setDisabled?(disabled: boolean): void | Promise<void>;\n\n  /** Whether the COMPONENT reports disabled (e.g. `computedDisabled()`). */\n  isDisabled?(): boolean;\n}\n\n/**\n * Options for one {@link verifyFormsBinding} run.\n */\nexport interface MlvFormsBindingMatrixOptions<T> {\n  /** The mode adapter under test. */\n  adapter: MlvFormsBindingAdapter<T>;\n\n  /** Value written from the form side; must round-trip unchanged. */\n  sample: T;\n\n  /**\n   * Simulates a USER interaction on the rendered control that must surface on\n   * the form side as {@link expectedAfterInteraction}.\n   */\n  interact: () => void | Promise<void>;\n\n  /** Form-side value expected after {@link interact}. */\n  expectedAfterInteraction: T;\n\n  /** Simulates the user leaving the field; drives the touched assertion. */\n  blur?: () => void | Promise<void>;\n}\n\n/**\n * Shared assertion driver for the forms bindings matrix: form→control value\n * write, control→form user interaction, touched propagation on blur, and\n * disabled propagation — identical expectations for every binding mode. A\n * control's spec calls this once per mode; a migrated control (CVA →\n * FormValueControl) must keep all three runs green.\n */\nexport async function verifyFormsBinding<T>(\n  options: MlvFormsBindingMatrixOptions<T>,\n): Promise<void> {\n  const { adapter } = options;\n  const label = `[${adapter.mode}]`;\n\n  // form → control → form round trip\n  await adapter.setValue(options.sample);\n  expect(adapter.getValue(), `${label} form-side write round-trip`).toEqual(\n    options.sample,\n  );\n\n  // user interaction → form side\n  await options.interact();\n  expect(adapter.getValue(), `${label} user interaction result`).toEqual(\n    options.expectedAfterInteraction,\n  );\n\n  // blur → touched\n  if (options.blur) {\n    expect(adapter.isTouched(), `${label} untouched before blur`).toBe(false);\n    await options.blur();\n    expect(adapter.isTouched(), `${label} touched after blur`).toBe(true);\n  }\n\n  // disabled propagation\n  if (adapter.setDisabled && adapter.isDisabled) {\n    await adapter.setDisabled(true);\n    expect(adapter.isDisabled(), `${label} disabled propagated`).toBe(true);\n    await adapter.setDisabled(false);\n    expect(adapter.isDisabled(), `${label} re-enabled`).toBe(false);\n  }\n}\n"]}

package/esm2022/form-utils/testing/malva-ui-core-form-utils-testing.js

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './index';
+//# sourceMappingURL=malva-ui-core-form-utils-testing.js.map

package/esm2022/form-utils/testing/malva-ui-core-form-utils-testing.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"malva-ui-core-form-utils-testing.js","sourceRoot":"","sources":["../../../../../../libs/core/form-utils/testing/src/malva-ui-core-form-utils-testing.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,cAAc,SAAS,CAAC","sourcesContent":["/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"]}