@malva-ui/core 0.1.12

package/esm2022/form-utils/lib/aria-value-bridge.js

@@ -0,0 +1,57 @@
+/**
+ * Forms ↔ `@angular/aria` value bridge.
+ *
+ * The headless `@angular/aria` selection patterns (`ngListbox`, `ngMenu`,
+ * `ngTree`, …) always model their selection as an **array** of values
+ * (`value: ModelSignal<V[]>`), even in single-select mode where the array holds
+ * at most one entry. Malva UI form controls expose the idiomatic public shape:
+ * a bare `T` for single-select and a `T[]` for multi-select, with `null` used
+ * to represent "no selection".
+ *
+ * These helpers translate between the two representations so a component can
+ * keep its public single/multi forms contract while driving an aria pattern
+ * underneath. They are pure and allocation-light, and are designed to
+ * round-trip: `fromAriaValues(toAriaValues(v, multi), multi)` yields the
+ * canonical form of `v`.
+ *
+ * @remarks
+ * `toAriaValues` treats an incoming array as an already-expanded multi-select
+ * value. If your single-select `T` is itself an array type, wrap it before
+ * bridging — this is the same ambiguity the aria patterns themselves carry.
+ */
+/**
+ * Normalises a control value (`T`, `T[]`, or `null`/`undefined`) into the flat
+ * `V[]` array that `@angular/aria` selection patterns expect.
+ *
+ * - `null` / `undefined` → `[]` (cleared selection)
+ * - an array → a shallow copy of that array (multi-select)
+ * - any other value → a single-element array (single-select)
+ *
+ * @param value The control-side value to convert.
+ * @returns A fresh array suitable for assigning to an aria `value` model.
+ */
+export function toAriaValues(value) {
+    if (value === null || value === undefined) {
+        return [];
+    }
+    return Array.isArray(value) ? [...value] : [value];
+}
+/**
+ * Collapses the flat `V[]` array produced by an `@angular/aria` selection
+ * pattern back into the control-side value shape.
+ *
+ * - `multiple === true` → a shallow copy of the array (empty array stays `[]`)
+ * - `multiple === false` → the first entry, or `null` when the array is empty
+ *
+ * @param values The aria-side selection array.
+ * @param multiple Whether the control is in multi-select mode.
+ * @returns The control-side value: `V[]` for multi-select, `V | null` for single.
+ */
+export function fromAriaValues(values, multiple) {
+    const list = values ?? [];
+    if (multiple) {
+        return [...list];
+    }
+    return list.length > 0 ? list[0] : null;
+}
+//# sourceMappingURL=aria-value-bridge.js.map

package/esm2022/form-utils/lib/aria-value-bridge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"aria-value-bridge.js","sourceRoot":"","sources":["../../../../../../libs/core/form-utils/src/lib/aria-value-bridge.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH;;;;;;;;;;GAUG;AACH,MAAM,UAAU,YAAY,CAC1B,KAA0C;IAE1C,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;QAC1C,OAAO,EAAE,CAAC;IACZ,CAAC;IACD,OAAO,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,GAAI,KAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,KAAU,CAAC,CAAC;AAC5E,CAAC;AAED;;;;;;;;;;GAUG;AACH,MAAM,UAAU,cAAc,CAC5B,MAAuC,EACvC,QAAiB;IAEjB,MAAM,IAAI,GAAG,MAAM,IAAI,EAAE,CAAC;IAC1B,IAAI,QAAQ,EAAE,CAAC;QACb,OAAO,CAAC,GAAG,IAAI,CAAC,CAAC;IACnB,CAAC;IACD,OAAO,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;AAC1C,CAAC","sourcesContent":["/**\n * Forms ↔ `@angular/aria` value bridge.\n *\n * The headless `@angular/aria` selection patterns (`ngListbox`, `ngMenu`,\n * `ngTree`, …) always model their selection as an **array** of values\n * (`value: ModelSignal<V[]>`), even in single-select mode where the array holds\n * at most one entry. Malva UI form controls expose the idiomatic public shape:\n * a bare `T` for single-select and a `T[]` for multi-select, with `null` used\n * to represent \"no selection\".\n *\n * These helpers translate between the two representations so a component can\n * keep its public single/multi forms contract while driving an aria pattern\n * underneath. They are pure and allocation-light, and are designed to\n * round-trip: `fromAriaValues(toAriaValues(v, multi), multi)` yields the\n * canonical form of `v`.\n *\n * @remarks\n * `toAriaValues` treats an incoming array as an already-expanded multi-select\n * value. If your single-select `T` is itself an array type, wrap it before\n * bridging — this is the same ambiguity the aria patterns themselves carry.\n */\n\n/**\n * Normalises a control value (`T`, `T[]`, or `null`/`undefined`) into the flat\n * `V[]` array that `@angular/aria` selection patterns expect.\n *\n * - `null` / `undefined` → `[]` (cleared selection)\n * - an array → a shallow copy of that array (multi-select)\n * - any other value → a single-element array (single-select)\n *\n * @param value The control-side value to convert.\n * @returns A fresh array suitable for assigning to an aria `value` model.\n */\nexport function toAriaValues<V>(\n  value: V | readonly V[] | null | undefined,\n): V[] {\n  if (value === null || value === undefined) {\n    return [];\n  }\n  return Array.isArray(value) ? [...(value as readonly V[])] : [value as V];\n}\n\n/**\n * Collapses the flat `V[]` array produced by an `@angular/aria` selection\n * pattern back into the control-side value shape.\n *\n * - `multiple === true` → a shallow copy of the array (empty array stays `[]`)\n * - `multiple === false` → the first entry, or `null` when the array is empty\n *\n * @param values The aria-side selection array.\n * @param multiple Whether the control is in multi-select mode.\n * @returns The control-side value: `V[]` for multi-select, `V | null` for single.\n */\nexport function fromAriaValues<V>(\n  values: readonly V[] | null | undefined,\n  multiple: boolean,\n): V | V[] | null {\n  const list = values ?? [];\n  if (multiple) {\n    return [...list];\n  }\n  return list.length > 0 ? list[0] : null;\n}\n"]}

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

@@ -0,0 +1,24 @@
+import { ChangeDetectionStrategy, Component, ViewEncapsulation, } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * Persistent help text rendered below a form control, in front of the
+ * validation message. Projected into `mlv-form-control-wrapper` through its
+ * `mlv-description` slot and referenced by the control's `aria-describedby`,
+ * so it stays readable while a validation message is shown.
+ *
+ * @example
+ * <mlv-description [id]="descriptionId">
+ *   We only use this address for receipts.
+ * </mlv-description>
+ */
+export class MlvDescription {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvDescription, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: MlvDescription, isStandalone: true, selector: "mlv-description", host: { classAttribute: "mlv-description" }, ngImport: i0, template: `<ng-content />`, isInline: true, styles: [".mlv-description{display:block;font-weight:400;font-size:var(--mlv-typography-body-s-size);color:var(--mlv-text-secondary)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvDescription, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-description', template: `<ng-content />`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'mlv-description',
+                    }, styles: [".mlv-description{display:block;font-weight:400;font-size:var(--mlv-typography-body-s-size);color:var(--mlv-text-secondary)}\n"] }]
+        }] });
+//# sourceMappingURL=description.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"description.js","sourceRoot":"","sources":["../../../../../../../libs/core/form-utils/src/lib/description/description.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,uBAAuB,EACvB,SAAS,EACT,iBAAiB,GAClB,MAAM,eAAe,CAAC;;AAEvB;;;;;;;;;;GAUG;AAWH,MAAM,OAAO,cAAc;uGAAd,cAAc;2FAAd,cAAc,wHARf,gBAAgB;;2FAQf,cAAc;kBAV1B,SAAS;+BACE,iBAAiB,YACjB,gBAAgB,iBAEX,iBAAiB,CAAC,IAAI,mBACpB,uBAAuB,CAAC,MAAM,QACzC;wBACJ,KAAK,EAAE,iBAAiB;qBACzB","sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  ViewEncapsulation,\n} from '@angular/core';\n\n/**\n * Persistent help text rendered below a form control, in front of the\n * validation message. Projected into `mlv-form-control-wrapper` through its\n * `mlv-description` slot and referenced by the control's `aria-describedby`,\n * so it stays readable while a validation message is shown.\n *\n * @example\n * <mlv-description [id]=\"descriptionId\">\n *   We only use this address for receipts.\n * </mlv-description>\n */\n@Component({\n  selector: 'mlv-description',\n  template: `<ng-content />`,\n  styleUrl: './description.scss',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'mlv-description',\n  },\n})\nexport class MlvDescription {}\n"]}

package/esm2022/form-utils/lib/focusable-group-base.js

@@ -0,0 +1,87 @@
+import { Directive, DestroyRef, effect, inject } from '@angular/core';
+import { FocusKeyManager } from '@angular/cdk/a11y';
+import * as i0 from "@angular/core";
+/**
+ * Shared, selection-agnostic scaffold for composite groups that navigate their
+ * children with a vertical, wrapping {@link FocusKeyManager} and a roving
+ * tabindex that follows focus (only the active child is tabbable).
+ *
+ * Extracted from the duplicated lifecycle in `MlvCheckboxGroup` and
+ * `MlvSwitchGroup`. It owns **only** the focus / roving-tabindex concern:
+ * key-manager creation over the current children, the `change`→tabindex sync,
+ * keydown delegation, child-focus tracking, and teardown. Subclasses supply the
+ * live children signal ({@link _items}) and the skip predicate
+ * ({@link _isDisabled}); everything else (selection, CVA, templates) stays in
+ * the concrete component.
+ *
+ * NB: this is a *focus-roving* base — the tab stop follows the focused child.
+ * Groups whose tab stop must follow a *selected* child instead (e.g.
+ * `mlv-radio-group`, whose checked radio is the tab stop and whose arrow keys
+ * also move selection) do not fit this contract and keep their own manager.
+ *
+ * @typeParam T The concrete focusable child component type.
+ */
+export class MlvFocusableGroupBase {
+    /** @private FocusKeyManager driving roving-tabindex arrow navigation between children. */
+    _keyManager;
+    /** @private Subscription to the key manager's active-item changes. */
+    _changeSub;
+    constructor() {
+        inject(DestroyRef).onDestroy(() => {
+            this._changeSub?.unsubscribe();
+            this._keyManager?.destroy();
+        });
+        effect(() => {
+            const items = [...this._items()];
+            if (items.length === 0)
+                return;
+            // Destroy the previous instance before allocating a new one — without
+            // this, every children emission accumulates a live FocusKeyManager
+            // (subscriptions, change-detection refs) against detached items.
+            this._changeSub?.unsubscribe();
+            this._keyManager?.destroy();
+            this._keyManager = new FocusKeyManager(items)
+                .skipPredicate((item) => this._isDisabled(item))
+                .withVerticalOrientation()
+                .withWrap();
+            // Keep the roving tabindex in sync as focus moves between children so only
+            // the active item is tabbable. `tabIndex` is a signal, so the host binding
+            // updates under OnPush without an extra change-detection trigger.
+            this._changeSub = this._keyManager.change.subscribe((index) => this._syncTabIndices(index));
+            // Initial roving state: the first child is the single tab stop.
+            this._syncTabIndices(0);
+        });
+    }
+    /**
+     * Notifies the manager which child took focus so arrow navigation resumes from
+     * it. Wire to each child's focus notification (group accessor token).
+     */
+    onChildFocus(item) {
+        const index = this._items().indexOf(item);
+        if (index >= 0) {
+            this._keyManager?.setActiveItem(index);
+        }
+    }
+    /**
+     * Delegates ArrowUp/ArrowDown to the key manager (moving focus + the tab stop)
+     * and suppresses the default page scroll. Wire to the group's `(keydown)`.
+     */
+    onKeydown(event) {
+        if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
+            this._keyManager?.onKeydown(event);
+            event.preventDefault();
+        }
+    }
+    /** @private Sets tabindex 0 on the active child and -1 on the rest. */
+    _syncTabIndices(activeIndex) {
+        this._items().forEach((item, i) => {
+            item.tabIndex.set(i === activeIndex ? 0 : -1);
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvFocusableGroupBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvFocusableGroupBase, isStandalone: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvFocusableGroupBase, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [] });
+//# sourceMappingURL=focusable-group-base.js.map

package/esm2022/form-utils/lib/focusable-group-base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"focusable-group-base.js","sourceRoot":"","sources":["../../../../../../libs/core/form-utils/src/lib/focusable-group-base.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAEtE,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;;AA0BpD;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,MAAM,OAAgB,qBAAqB;IAczC,0FAA0F;IAClF,WAAW,CAAsB;IAEzC,sEAAsE;IAC9D,UAAU,CAAgB;IAElC;QACE,MAAM,CAAC,UAAU,CAAC,CAAC,SAAS,CAAC,GAAG,EAAE;YAChC,IAAI,CAAC,UAAU,EAAE,WAAW,EAAE,CAAC;YAC/B,IAAI,CAAC,WAAW,EAAE,OAAO,EAAE,CAAC;QAC9B,CAAC,CAAC,CAAC;QAEH,MAAM,CAAC,GAAG,EAAE;YACV,MAAM,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;YACjC,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC;gBAAE,OAAO;YAE/B,sEAAsE;YACtE,mEAAmE;YACnE,iEAAiE;YACjE,IAAI,CAAC,UAAU,EAAE,WAAW,EAAE,CAAC;YAC/B,IAAI,CAAC,WAAW,EAAE,OAAO,EAAE,CAAC;YAC5B,IAAI,CAAC,WAAW,GAAG,IAAI,eAAe,CAAI,KAAK,CAAC;iBAC7C,aAAa,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;iBAC/C,uBAAuB,EAAE;iBACzB,QAAQ,EAAE,CAAC;YAEd,2EAA2E;YAC3E,2EAA2E;YAC3E,kEAAkE;YAClE,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,KAAK,EAAE,EAAE,CAC5D,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,CAC5B,CAAC;YAEF,gEAAgE;YAChE,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC;QAC1B,CAAC,CAAC,CAAC;IACL,CAAC;IAED;;;OAGG;IACH,YAAY,CAAC,IAAO;QAClB,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;QAC1C,IAAI,KAAK,IAAI,CAAC,EAAE,CAAC;YACf,IAAI,CAAC,WAAW,EAAE,aAAa,CAAC,KAAK,CAAC,CAAC;QACzC,CAAC;IACH,CAAC;IAED;;;OAGG;IACH,SAAS,CAAC,KAAoB;QAC5B,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,EAAE,CAAC;YACzD,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC;YACnC,KAAK,CAAC,cAAc,EAAE,CAAC;QACzB,CAAC;IACH,CAAC;IAED,uEAAuE;IAC/D,eAAe,CAAC,WAAmB;QACzC,IAAI,CAAC,MAAM,EAAE,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE;YAChC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,KAAK,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAChD,CAAC,CAAC,CAAC;IACL,CAAC;uGA/EmB,qBAAqB;2FAArB,qBAAqB;;2FAArB,qBAAqB;kBAD1C,SAAS","sourcesContent":["import type { Signal, WritableSignal } from '@angular/core';\nimport { Directive, DestroyRef, effect, inject } from '@angular/core';\nimport type { FocusOrigin } from '@angular/cdk/a11y';\nimport { FocusKeyManager } from '@angular/cdk/a11y';\nimport type { Subscription } from 'rxjs';\n\n/**\n * The per-item contract a roving-tabindex group needs from each child: a\n * focusable element whose `tabIndex` is a writable signal the group flips\n * between `0` (the single tab stop) and `-1` (the rest). Satisfied by\n * `mlv-checkbox` and `mlv-switch`, whose native input binds `[attr.tabindex]`\n * to this signal.\n *\n * Deliberately NOT `extends FocusableOption`: components type `disabled` as a\n * coerced input signal (`InputSignalWithTransform<boolean, BooleanInput>`),\n * which is incompatible with `FocusableOption`'s plain `disabled?: boolean`.\n * Disabled-skipping is expressed through the group's\n * {@link MlvFocusableGroupBase._isDisabled} predicate instead, and\n * `FocusKeyManager<T>` needs no constraint (it intersects `FocusableOption & T`\n * internally).\n */\nexport interface MlvFocusableGroupItem {\n  /** Focuses the item's focus target (the visually-hidden native input). */\n  focus(origin?: FocusOrigin): void;\n\n  /** Roving tabindex applied to the item's focus target. */\n  readonly tabIndex: WritableSignal<number>;\n}\n\n/**\n * Shared, selection-agnostic scaffold for composite groups that navigate their\n * children with a vertical, wrapping {@link FocusKeyManager} and a roving\n * tabindex that follows focus (only the active child is tabbable).\n *\n * Extracted from the duplicated lifecycle in `MlvCheckboxGroup` and\n * `MlvSwitchGroup`. It owns **only** the focus / roving-tabindex concern:\n * key-manager creation over the current children, the `change`→tabindex sync,\n * keydown delegation, child-focus tracking, and teardown. Subclasses supply the\n * live children signal ({@link _items}) and the skip predicate\n * ({@link _isDisabled}); everything else (selection, CVA, templates) stays in\n * the concrete component.\n *\n * NB: this is a *focus-roving* base — the tab stop follows the focused child.\n * Groups whose tab stop must follow a *selected* child instead (e.g.\n * `mlv-radio-group`, whose checked radio is the tab stop and whose arrow keys\n * also move selection) do not fit this contract and keep their own manager.\n *\n * @typeParam T The concrete focusable child component type.\n */\n@Directive()\nexport abstract class MlvFocusableGroupBase<T extends MlvFocusableGroupItem> {\n  /**\n   * @protected The live children in DOM order — typically a `contentChildren`\n   * signal on the subclass. Read reactively inside the base effect so the key\n   * manager is rebuilt whenever the projected set changes.\n   */\n  protected abstract readonly _items: Signal<readonly T[]>;\n\n  /**\n   * @protected Predicate marking a child as skipped by arrow navigation. Groups\n   * bridge their own disabled model here (e.g. `computedDisabled()`).\n   */\n  protected abstract _isDisabled(item: T): boolean;\n\n  /** @private FocusKeyManager driving roving-tabindex arrow navigation between children. */\n  private _keyManager?: FocusKeyManager<T>;\n\n  /** @private Subscription to the key manager's active-item changes. */\n  private _changeSub?: Subscription;\n\n  constructor() {\n    inject(DestroyRef).onDestroy(() => {\n      this._changeSub?.unsubscribe();\n      this._keyManager?.destroy();\n    });\n\n    effect(() => {\n      const items = [...this._items()];\n      if (items.length === 0) return;\n\n      // Destroy the previous instance before allocating a new one — without\n      // this, every children emission accumulates a live FocusKeyManager\n      // (subscriptions, change-detection refs) against detached items.\n      this._changeSub?.unsubscribe();\n      this._keyManager?.destroy();\n      this._keyManager = new FocusKeyManager<T>(items)\n        .skipPredicate((item) => this._isDisabled(item))\n        .withVerticalOrientation()\n        .withWrap();\n\n      // Keep the roving tabindex in sync as focus moves between children so only\n      // the active item is tabbable. `tabIndex` is a signal, so the host binding\n      // updates under OnPush without an extra change-detection trigger.\n      this._changeSub = this._keyManager.change.subscribe((index) =>\n        this._syncTabIndices(index),\n      );\n\n      // Initial roving state: the first child is the single tab stop.\n      this._syncTabIndices(0);\n    });\n  }\n\n  /**\n   * Notifies the manager which child took focus so arrow navigation resumes from\n   * it. Wire to each child's focus notification (group accessor token).\n   */\n  onChildFocus(item: T): void {\n    const index = this._items().indexOf(item);\n    if (index >= 0) {\n      this._keyManager?.setActiveItem(index);\n    }\n  }\n\n  /**\n   * Delegates ArrowUp/ArrowDown to the key manager (moving focus + the tab stop)\n   * and suppresses the default page scroll. Wire to the group's `(keydown)`.\n   */\n  onKeydown(event: KeyboardEvent): void {\n    if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {\n      this._keyManager?.onKeydown(event);\n      event.preventDefault();\n    }\n  }\n\n  /** @private Sets tabindex 0 on the active child and -1 on the rest. */\n  private _syncTabIndices(activeIndex: number): void {\n    this._items().forEach((item, i) => {\n      item.tabIndex.set(i === activeIndex ? 0 : -1);\n    });\n  }\n}\n"]}

package/esm2022/form-utils/lib/form-control-base/signal-form-control-base.js

@@ -0,0 +1,192 @@
+import { computed, contentChild, Directive, input, output, signal, } from '@angular/core';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { mlvNextId } from '@malva-ui/cdk/utils';
+import { MlvFormControlAppend } from '../form-control-sides';
+import { MlvFormControlInset } from '../form-control-sides';
+import { MlvFormControlPrepend } from '../form-control-sides';
+import * as i0 from "@angular/core";
+/**
+ * Shared, forms-transport-agnostic surface for **signal-forms** Malva controls.
+ * Owns everything EXCEPT the value/checked model: the
+ * Malva field surface (`state`, `label`, `hint`, `message`, `clearable`,
+ * `id`, prepend/append slots), the wrapper connector contract
+ * ({@link MlvFormControl}), and the signal-forms field↔control bindings —
+ * `errors` / `disabled` / `readonly` / `touched` / `dirty` input signals the
+ * `[formField]` directive binds automatically, plus the `touch` output the
+ * control emits when the user leaves the field.
+ *
+ * Per the signal-forms contract a component must NOT implement both
+ * `ControlValueAccessor` and `FormValueControl`; controls therefore adopt
+ * either {@link MlvSignalFormControlBase} or {@link MlvSignalCheckboxControlBase}
+ * atomically. Reactive (`[formControl]`)
+ * and template-driven (`ngModel`) bindings keep working — Angular binds the
+ * signal contract from those directives without extra compatibility code.
+ */
+export class MlvSignalFormUiControlBase {
+    /** @protected Backing signal for {@link focused}. */
+    _focused = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_focused" }] : /* istanbul ignore next */ []));
+    /** Whether the control currently has focus (drives the wrapper's focus ring). */
+    focused = this._focused;
+    /** Sets the control's focus state (wired to the focus target's focus/blur). */
+    setFocused(value) {
+        this._focused.set(value);
+    }
+    /** Explicit consumer-authored visual validation state. */
+    state = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the control is read-only. Also a signal-forms field binding: when
+     * bound via `[formField]`, a `readonly` schema rule drives this input.
+     */
+    readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: (value) => coerceBooleanProperty(value) });
+    /**
+     * Whether the control is disabled. Also a signal-forms field binding: when
+     * bound via `[formField]`, the field's disabled state drives this input.
+     */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: (value) => coerceBooleanProperty(value) });
+    /**
+     * Whether the control must be filled in. Renders the required marker in
+     * `mlv-label` and sets `aria-required` on the control's focus target. Also a
+     * signal-forms field binding: when bound via `[formField]`, a `required()`
+     * schema rule drives this input.
+     */
+    required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: (value) => coerceBooleanProperty(value) });
+    /** Whether the control shows its loading affordance. */
+    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Whether the control renders a clear (X) affordance while it has a value. */
+    clearable = input(false, { ...(ngDevMode ? { debugName: "clearable" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /**
+     * Fully rounded (stadium) control container. Shared by every control that
+     * renders through `mlv-form-control-wrapper`, mirroring `shape="pill"` on
+     * buttons and the pill action bar.
+     */
+    pill = input(false, { ...(ngDevMode ? { debugName: "pill" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /**
+     * Signal-forms field binding: current validation errors of the bound field
+     * (`[formField]` binds them automatically). Empty when unbound.
+     */
+    errors = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
+    /** Signal-forms field binding: whether the bound field is touched. */
+    touched = input(false, { ...(ngDevMode ? { debugName: "touched" } : /* istanbul ignore next */ {}), transform: (value) => coerceBooleanProperty(value) });
+    /** Signal-forms field binding: whether the bound field is dirty. */
+    dirty = input(false, { ...(ngDevMode ? { debugName: "dirty" } : /* istanbul ignore next */ {}), transform: (value) => coerceBooleanProperty(value) });
+    /**
+     * Effective visual state exposed through the Malva form-control connector.
+     * An explicit non-default state wins; otherwise a signal-form validation
+     * error becomes visible after the field is touched, matching the default
+     * `MlvFormField` error-display strategy.
+     */
+    resolvedState = computed(() => {
+        const explicitState = this.state();
+        if (explicitState !== 'default')
+            return explicitState;
+        return this.errors().length > 0 && this.touched() ? 'error' : 'default';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedState" }] : /* istanbul ignore next */ []));
+    /**
+     * Emits when the user finishes interacting with the field (blur) — the
+     * signal-forms replacement for the CVA `onTouched` callback; `[formField]`
+     * subscribes and marks the bound field touched.
+     */
+    touch = output();
+    /** HTML id applied to the control's focus target. */
+    id = input(mlvNextId('mlv-control'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    /** Label text rendered above the control. */
+    label = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Hint text rendered inside the label. */
+    hint = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    /**
+     * Persistent help text rendered **below** the control, in front of the
+     * validation message. Unlike {@link hint} (a short inline aside inside the
+     * label) this is meant for sentence-length descriptions, and it stays
+     * visible while {@link message} is shown. Referenced by `aria-describedby`.
+     */
+    description = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+    /** Validation/status message rendered below the control. */
+    message = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
+    /**
+     * Accessible name applied to the control's focus target (`aria-label`).
+     * Use it when the control renders no visible `<mlv-label>`.
+     */
+    ariaLabel = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** @protected Id of the rendered `<mlv-description>` element. */
+    _descriptionId = computed(() => `${this.id()}-description`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_descriptionId" }] : /* istanbul ignore next */ []));
+    /** @protected Id of the rendered `<mlv-message>` element. */
+    _messageId = computed(() => `${this.id()}-message`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_messageId" }] : /* istanbul ignore next */ []));
+    /**
+     * @protected Space-separated `aria-describedby` value covering the rendered
+     * description and message elements — `null` when neither is rendered, so no
+     * dangling IDREF is emitted.
+     */
+    _describedBy = computed(() => {
+        const ids = [];
+        if (this.description())
+            ids.push(this._descriptionId());
+        if (this.message())
+            ids.push(this._messageId());
+        return ids.length > 0 ? ids.join(' ') : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_describedBy" }] : /* istanbul ignore next */ []));
+    /** Projected prefix slot. */
+    prepend = contentChild(MlvFormControlPrepend, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "prepend" }] : /* istanbul ignore next */ []));
+    /** Projected suffix slot. */
+    append = contentChild(MlvFormControlAppend, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "append" }] : /* istanbul ignore next */ []));
+    /** Projected full-width content rendered inside the control border. */
+    inset = contentChild(MlvFormControlInset, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inset" }] : /* istanbul ignore next */ []));
+    /**
+     * Effective disabled state. In the signal base there is no CVA
+     * `setDisabledState` side channel — the `disabled` input is the single
+     * source (consumer-bound or field-bound), kept as a computed so existing
+     * control templates retain one consistent disabled-state signal.
+     */
+    computedDisabled = computed(() => this.disabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedDisabled" }] : /* istanbul ignore next */ []));
+    /** @protected Notifies the field that the user left the control. */
+    _markTouched() {
+        this.touch.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvSignalFormUiControlBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.0.7", type: MlvSignalFormUiControlBase, isStandalone: true, inputs: { state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, pill: { classPropertyName: "pill", publicName: "pill", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { touch: "touch" }, queries: [{ propertyName: "prepend", first: true, predicate: MlvFormControlPrepend, descendants: true, isSignal: true }, { propertyName: "append", first: true, predicate: MlvFormControlAppend, descendants: true, isSignal: true }, { propertyName: "inset", first: true, predicate: MlvFormControlInset, descendants: true, isSignal: true }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvSignalFormUiControlBase, decorators: [{
+            type: Directive
+        }], propDecorators: { state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], pill: [{ type: i0.Input, args: [{ isSignal: true, alias: "pill", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], dirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "dirty", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], prepend: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MlvFormControlPrepend), { isSignal: true }] }], append: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MlvFormControlAppend), { isSignal: true }] }], inset: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MlvFormControlInset), { isSignal: true }] }] } });
+/**
+ * Signal-forms base for **value** controls: adds the required
+ * `value: ModelSignal<T>` of the `FormValueControl` contract. Each control
+ * supplies the model itself (`readonly value = model<T>(initial)`), mirroring
+ * how `hasValue` is supplied.
+ */
+export class MlvSignalFormControlBase extends MlvSignalFormUiControlBase {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvSignalFormControlBase, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvSignalFormControlBase, isStandalone: true, usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvSignalFormControlBase, decorators: [{
+            type: Directive
+        }] });
+/**
+ * Signal-forms base for **checkbox-shaped** controls (checkbox, switch): adds
+ * the required `checked: ModelSignal<boolean>` of the `FormCheckboxControl`
+ * contract. The contract forbids a `value` member on this variant.
+ */
+export class MlvSignalCheckboxControlBase extends MlvSignalFormUiControlBase {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvSignalCheckboxControlBase, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvSignalCheckboxControlBase, isStandalone: true, usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvSignalCheckboxControlBase, decorators: [{
+            type: Directive
+        }] });
+//# sourceMappingURL=signal-form-control-base.js.map

package/esm2022/form-utils/lib/form-control-base/signal-form-control-base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"signal-form-control-base.js","sourceRoot":"","sources":["../../../../../../../libs/core/form-utils/src/lib/form-control-base/signal-form-control-base.ts"],"names":[],"mappings":"AACA,OAAO,EACL,QAAQ,EACR,YAAY,EACZ,SAAS,EACT,KAAK,EACL,MAAM,EACN,MAAM,GACP,MAAM,eAAe,CAAC;AAQvB,OAAO,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAEhD,OAAO,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;;AAE9D;;;;;;;;;;;;;;;;GAgBG;AAEH,MAAM,OAAgB,0BAA0B;IAC9C,qDAAqD;IAClC,QAAQ,GAAG,MAAM,CAAC,KAAK;iFAAC,CAAC;IAE5C,iFAAiF;IACxE,OAAO,GAAoB,IAAI,CAAC,QAAQ,CAAC;IAElD,+EAA+E;IAC/E,UAAU,CAAC,KAAc;QACvB,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;IAC3B,CAAC;IAED,0DAA0D;IACjD,KAAK,GAAG,KAAK,CAAe,SAAS;8EAAC,CAAC;IAEhD;;;OAGG;IACM,QAAQ,GAAG,KAAK,CAAmB,KAAK,gFAC/C,SAAS,EAAE,CAAC,KAAc,EAAE,EAAE,CAAC,qBAAqB,CAAC,KAAqB,CAAC,GAC3E,CAAC;IAEH;;;OAGG;IACM,QAAQ,GAAG,KAAK,CAAmB,KAAK,gFAC/C,SAAS,EAAE,CAAC,KAAc,EAAE,EAAE,CAAC,qBAAqB,CAAC,KAAqB,CAAC,GAC3E,CAAC;IAEH;;;;;OAKG;IACM,QAAQ,GAAG,KAAK,CAAmB,KAAK,gFAC/C,SAAS,EAAE,CAAC,KAAc,EAAE,EAAE,CAAC,qBAAqB,CAAC,KAAqB,CAAC,GAC3E,CAAC;IAEH,wDAAwD;IAC/C,OAAO,GAAG,KAAK,CAAwB,KAAK,+EACnD,SAAS,EAAE,qBAAqB,GAChC,CAAC;IAEH,+EAA+E;IACtE,SAAS,GAAG,KAAK,CAAwB,KAAK,iFACrD,SAAS,EAAE,qBAAqB,GAChC,CAAC;IAEH;;;;OAIG;IACM,IAAI,GAAG,KAAK,CAAwB,KAAK,4EAChD,SAAS,EAAE,qBAAqB,GAChC,CAAC;IAEH;;;OAGG;IACM,MAAM,GAAG,KAAK,CAAmD,EAAE;+EAAC,CAAC;IAE9E,sEAAsE;IAC7D,OAAO,GAAG,KAAK,CAAmB,KAAK,+EAC9C,SAAS,EAAE,CAAC,KAAc,EAAE,EAAE,CAAC,qBAAqB,CAAC,KAAqB,CAAC,GAC3E,CAAC;IAEH,oEAAoE;IAC3D,KAAK,GAAG,KAAK,CAAmB,KAAK,6EAC5C,SAAS,EAAE,CAAC,KAAc,EAAE,EAAE,CAAC,qBAAqB,CAAC,KAAqB,CAAC,GAC3E,CAAC;IAEH;;;;;OAKG;IACM,aAAa,GAAG,QAAQ,CAAe,GAAG,EAAE;QACnD,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC;QACnC,IAAI,aAAa,KAAK,SAAS;YAAE,OAAO,aAAa,CAAC;QACtD,OAAO,IAAI,CAAC,MAAM,EAAE,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC;IAC1E,CAAC;sFAAC,CAAC;IAEH;;;;OAIG;IACM,KAAK,GAAG,MAAM,EAAQ,CAAC;IAOhC,qDAAqD;IAC5C,EAAE,GAAG,KAAK,CAAS,SAAS,CAAC,aAAa,CAAC;2EAAC,CAAC;IACtD,6CAA6C;IACpC,KAAK,GAAG,KAAK,CAAC,EAAE;8EAAC,CAAC;IAC3B,2CAA2C;IAClC,IAAI,GAAG,KAAK,CAAC,EAAE;6EAAC,CAAC;IAC1B;;;;;OAKG;IACM,WAAW,GAAG,KAAK,CAAC,EAAE;oFAAC,CAAC;IACjC,4DAA4D;IACnD,OAAO,GAAG,KAAK,CAAC,EAAE;gFAAC,CAAC;IAE7B;;;OAGG;IACM,SAAS,GAAG,KAAK,CAAgB,IAAI;kFAAC,CAAC;IAEhD,iEAAiE;IAC9C,cAAc,GAAG,QAAQ,CAC1C,GAAG,EAAE,CAAC,GAAG,IAAI,CAAC,EAAE,EAAE,cAAc;uFACjC,CAAC;IAEF,6DAA6D;IAC1C,UAAU,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,GAAG,IAAI,CAAC,EAAE,EAAE,UAAU;mFAAC,CAAC;IAEvE;;;;OAIG;IACgB,YAAY,GAAG,QAAQ,CAAC,GAAG,EAAE;QAC9C,MAAM,GAAG,GAAa,EAAE,CAAC;QACzB,IAAI,IAAI,CAAC,WAAW,EAAE;YAAE,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC;QACxD,IAAI,IAAI,CAAC,OAAO,EAAE;YAAE,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC;QAChD,OAAO,GAAG,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IAC/C,CAAC;qFAAC,CAAC;IAEH,6BAA6B;IACpB,OAAO,GAAG,YAAY,CAAC,qBAAqB;gFAAC,CAAC;IACvD,6BAA6B;IACpB,MAAM,GAAG,YAAY,CAAC,oBAAoB;+EAAC,CAAC;IACrD,uEAAuE;IAC9D,KAAK,GAAG,YAAY,CAAC,mBAAmB;8EAAC,CAAC;IAEnD;;;;;OAKG;IACM,gBAAgB,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE;yFAAC,CAAC;IAE5D,oEAAoE;IAC1D,YAAY;QACpB,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;IACpB,CAAC;uGAhKmB,0BAA0B;2FAA1B,0BAA0B,ukEA+Id,qBAAqB,yFAEtB,oBAAoB,wFAErB,mBAAmB;;2FAnJ7B,0BAA0B;kBAD/C,SAAS;6lDAgJwB,qBAAqB,wFAEtB,oBAAoB,uFAErB,mBAAmB;AAgBnD;;;;;GAKG;AAEH,MAAM,OAAgB,wBACpB,SAAQ,0BAA0B;uGADd,wBAAwB;2FAAxB,wBAAwB;;2FAAxB,wBAAwB;kBAD7C,SAAS;;AASV;;;;GAIG;AAEH,MAAM,OAAgB,4BACpB,SAAQ,0BAA0B;uGADd,4BAA4B;2FAA5B,4BAA4B;;2FAA5B,4BAA4B;kBADjD,SAAS","sourcesContent":["import type { ModelSignal, Signal } from '@angular/core';\nimport {\n  computed,\n  contentChild,\n  Directive,\n  input,\n  output,\n  signal,\n} from '@angular/core';\nimport type {\n  FormCheckboxControl,\n  FormValueControl,\n  ValidationError,\n} from '@angular/forms/signals';\nimport type { MlvFormState } from '../models/form-state';\nimport type { BooleanInput } from '@angular/cdk/coercion';\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { mlvNextId } from '@malva-ui/cdk/utils';\nimport type { MlvFormControl } from '../models/form-control-connector';\nimport { MlvFormControlAppend } from '../form-control-sides';\nimport { MlvFormControlInset } from '../form-control-sides';\nimport { MlvFormControlPrepend } from '../form-control-sides';\n\n/**\n * Shared, forms-transport-agnostic surface for **signal-forms** Malva controls.\n * Owns everything EXCEPT the value/checked model: the\n * Malva field surface (`state`, `label`, `hint`, `message`, `clearable`,\n * `id`, prepend/append slots), the wrapper connector contract\n * ({@link MlvFormControl}), and the signal-forms field↔control bindings —\n * `errors` / `disabled` / `readonly` / `touched` / `dirty` input signals the\n * `[formField]` directive binds automatically, plus the `touch` output the\n * control emits when the user leaves the field.\n *\n * Per the signal-forms contract a component must NOT implement both\n * `ControlValueAccessor` and `FormValueControl`; controls therefore adopt\n * either {@link MlvSignalFormControlBase} or {@link MlvSignalCheckboxControlBase}\n * atomically. Reactive (`[formControl]`)\n * and template-driven (`ngModel`) bindings keep working — Angular binds the\n * signal contract from those directives without extra compatibility code.\n */\n@Directive()\nexport abstract class MlvSignalFormUiControlBase implements MlvFormControl {\n  /** @protected Backing signal for {@link focused}. */\n  protected readonly _focused = signal(false);\n\n  /** Whether the control currently has focus (drives the wrapper's focus ring). */\n  readonly focused: Signal<boolean> = this._focused;\n\n  /** Sets the control's focus state (wired to the focus target's focus/blur). */\n  setFocused(value: boolean): void {\n    this._focused.set(value);\n  }\n\n  /** Explicit consumer-authored visual validation state. */\n  readonly state = input<MlvFormState>('default');\n\n  /**\n   * Whether the control is read-only. Also a signal-forms field binding: when\n   * bound via `[formField]`, a `readonly` schema rule drives this input.\n   */\n  readonly readonly = input<boolean, unknown>(false, {\n    transform: (value: unknown) => coerceBooleanProperty(value as BooleanInput),\n  });\n\n  /**\n   * Whether the control is disabled. Also a signal-forms field binding: when\n   * bound via `[formField]`, the field's disabled state drives this input.\n   */\n  readonly disabled = input<boolean, unknown>(false, {\n    transform: (value: unknown) => coerceBooleanProperty(value as BooleanInput),\n  });\n\n  /**\n   * Whether the control must be filled in. Renders the required marker in\n   * `mlv-label` and sets `aria-required` on the control's focus target. Also a\n   * signal-forms field binding: when bound via `[formField]`, a `required()`\n   * schema rule drives this input.\n   */\n  readonly required = input<boolean, unknown>(false, {\n    transform: (value: unknown) => coerceBooleanProperty(value as BooleanInput),\n  });\n\n  /** Whether the control shows its loading affordance. */\n  readonly loading = input<boolean, BooleanInput>(false, {\n    transform: coerceBooleanProperty,\n  });\n\n  /** Whether the control renders a clear (X) affordance while it has a value. */\n  readonly clearable = input<boolean, BooleanInput>(false, {\n    transform: coerceBooleanProperty,\n  });\n\n  /**\n   * Fully rounded (stadium) control container. Shared by every control that\n   * renders through `mlv-form-control-wrapper`, mirroring `shape=\"pill\"` on\n   * buttons and the pill action bar.\n   */\n  readonly pill = input<boolean, BooleanInput>(false, {\n    transform: coerceBooleanProperty,\n  });\n\n  /**\n   * Signal-forms field binding: current validation errors of the bound field\n   * (`[formField]` binds them automatically). Empty when unbound.\n   */\n  readonly errors = input<readonly ValidationError.WithOptionalFieldTree[]>([]);\n\n  /** Signal-forms field binding: whether the bound field is touched. */\n  readonly touched = input<boolean, unknown>(false, {\n    transform: (value: unknown) => coerceBooleanProperty(value as BooleanInput),\n  });\n\n  /** Signal-forms field binding: whether the bound field is dirty. */\n  readonly dirty = input<boolean, unknown>(false, {\n    transform: (value: unknown) => coerceBooleanProperty(value as BooleanInput),\n  });\n\n  /**\n   * Effective visual state exposed through the Malva form-control connector.\n   * An explicit non-default state wins; otherwise a signal-form validation\n   * error becomes visible after the field is touched, matching the default\n   * `MlvFormField` error-display strategy.\n   */\n  readonly resolvedState = computed<MlvFormState>(() => {\n    const explicitState = this.state();\n    if (explicitState !== 'default') return explicitState;\n    return this.errors().length > 0 && this.touched() ? 'error' : 'default';\n  });\n\n  /**\n   * Emits when the user finishes interacting with the field (blur) — the\n   * signal-forms replacement for the CVA `onTouched` callback; `[formField]`\n   * subscribes and marks the bound field touched.\n   */\n  readonly touch = output<void>();\n\n  /**\n   * Whether the control currently holds a clearable (non-empty) value.\n   */\n  abstract readonly hasValue: Signal<boolean>;\n\n  /** HTML id applied to the control's focus target. */\n  readonly id = input<string>(mlvNextId('mlv-control'));\n  /** Label text rendered above the control. */\n  readonly label = input('');\n  /** Hint text rendered inside the label. */\n  readonly hint = input('');\n  /**\n   * Persistent help text rendered **below** the control, in front of the\n   * validation message. Unlike {@link hint} (a short inline aside inside the\n   * label) this is meant for sentence-length descriptions, and it stays\n   * visible while {@link message} is shown. Referenced by `aria-describedby`.\n   */\n  readonly description = input('');\n  /** Validation/status message rendered below the control. */\n  readonly message = input('');\n\n  /**\n   * Accessible name applied to the control's focus target (`aria-label`).\n   * Use it when the control renders no visible `<mlv-label>`.\n   */\n  readonly ariaLabel = input<string | null>(null);\n\n  /** @protected Id of the rendered `<mlv-description>` element. */\n  protected readonly _descriptionId = computed(\n    () => `${this.id()}-description`,\n  );\n\n  /** @protected Id of the rendered `<mlv-message>` element. */\n  protected readonly _messageId = computed(() => `${this.id()}-message`);\n\n  /**\n   * @protected Space-separated `aria-describedby` value covering the rendered\n   * description and message elements — `null` when neither is rendered, so no\n   * dangling IDREF is emitted.\n   */\n  protected readonly _describedBy = computed(() => {\n    const ids: string[] = [];\n    if (this.description()) ids.push(this._descriptionId());\n    if (this.message()) ids.push(this._messageId());\n    return ids.length > 0 ? ids.join(' ') : null;\n  });\n\n  /** Projected prefix slot. */\n  readonly prepend = contentChild(MlvFormControlPrepend);\n  /** Projected suffix slot. */\n  readonly append = contentChild(MlvFormControlAppend);\n  /** Projected full-width content rendered inside the control border. */\n  readonly inset = contentChild(MlvFormControlInset);\n\n  /**\n   * Effective disabled state. In the signal base there is no CVA\n   * `setDisabledState` side channel — the `disabled` input is the single\n   * source (consumer-bound or field-bound), kept as a computed so existing\n   * control templates retain one consistent disabled-state signal.\n   */\n  readonly computedDisabled = computed(() => this.disabled());\n\n  /** @protected Notifies the field that the user left the control. */\n  protected _markTouched(): void {\n    this.touch.emit();\n  }\n}\n\n/**\n * Signal-forms base for **value** controls: adds the required\n * `value: ModelSignal<T>` of the `FormValueControl` contract. Each control\n * supplies the model itself (`readonly value = model<T>(initial)`), mirroring\n * how `hasValue` is supplied.\n */\n@Directive()\nexport abstract class MlvSignalFormControlBase<T>\n  extends MlvSignalFormUiControlBase\n  implements FormValueControl<T>\n{\n  /** The control's value — kept in sync with the bound field by `[formField]`. */\n  abstract readonly value: ModelSignal<T>;\n}\n\n/**\n * Signal-forms base for **checkbox-shaped** controls (checkbox, switch): adds\n * the required `checked: ModelSignal<boolean>` of the `FormCheckboxControl`\n * contract. The contract forbids a `value` member on this variant.\n */\n@Directive()\nexport abstract class MlvSignalCheckboxControlBase\n  extends MlvSignalFormUiControlBase\n  implements FormCheckboxControl\n{\n  /** The control's checked state — kept in sync with the bound field by `[formField]`. */\n  abstract readonly checked: ModelSignal<boolean>;\n}\n"]}

package/esm2022/form-utils/lib/form-control-sides.js

@@ -0,0 +1,34 @@
+import { Directive } from '@angular/core';
+import { MlvStructural } from '@malva-ui/cdk/utils';
+import * as i0 from "@angular/core";
+export class MlvFormControlPrepend extends MlvStructural {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvFormControlPrepend, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvFormControlPrepend, isStandalone: true, selector: "[mlvFormControlPrepend]", usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvFormControlPrepend, decorators: [{
+            type: Directive,
+            args: [{ selector: '[mlvFormControlPrepend]' }]
+        }] });
+export class MlvFormControlAppend extends MlvStructural {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvFormControlAppend, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvFormControlAppend, isStandalone: true, selector: "[mlvFormControlAppend]", usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvFormControlAppend, decorators: [{
+            type: Directive,
+            args: [{ selector: '[mlvFormControlAppend]' }]
+        }] });
+/**
+ * Full-width content rendered inside the bordered control, after its main row.
+ *
+ * Use for secondary, non-interactive control presentation such as strength
+ * meters. Prefix and suffix actions remain in their dedicated slots.
+ */
+export class MlvFormControlInset extends MlvStructural {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvFormControlInset, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvFormControlInset, isStandalone: true, selector: "[mlvFormControlInset]", usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvFormControlInset, decorators: [{
+            type: Directive,
+            args: [{ selector: '[mlvFormControlInset]' }]
+        }] });
+//# sourceMappingURL=form-control-sides.js.map

package/esm2022/form-utils/lib/form-control-sides.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-control-sides.js","sourceRoot":"","sources":["../../../../../../libs/core/form-utils/src/lib/form-control-sides.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;;AAGpD,MAAM,OAAO,qBAAsB,SAAQ,aAAa;uGAA3C,qBAAqB;2FAArB,qBAAqB;;2FAArB,qBAAqB;kBADjC,SAAS;mBAAC,EAAE,QAAQ,EAAE,yBAAyB,EAAE;;AAIlD,MAAM,OAAO,oBAAqB,SAAQ,aAAa;uGAA1C,oBAAoB;2FAApB,oBAAoB;;2FAApB,oBAAoB;kBADhC,SAAS;mBAAC,EAAE,QAAQ,EAAE,wBAAwB,EAAE;;AAGjD;;;;;GAKG;AAEH,MAAM,OAAO,mBAAoB,SAAQ,aAAa;uGAAzC,mBAAmB;2FAAnB,mBAAmB;;2FAAnB,mBAAmB;kBAD/B,SAAS;mBAAC,EAAE,QAAQ,EAAE,uBAAuB,EAAE","sourcesContent":["import { Directive } from '@angular/core';\nimport { MlvStructural } from '@malva-ui/cdk/utils';\n\n@Directive({ selector: '[mlvFormControlPrepend]' })\nexport class MlvFormControlPrepend extends MlvStructural {}\n\n@Directive({ selector: '[mlvFormControlAppend]' })\nexport class MlvFormControlAppend extends MlvStructural {}\n\n/**\n * Full-width content rendered inside the bordered control, after its main row.\n *\n * Use for secondary, non-interactive control presentation such as strength\n * meters. Prefix and suffix actions remain in their dedicated slots.\n */\n@Directive({ selector: '[mlvFormControlInset]' })\nexport class MlvFormControlInset extends MlvStructural {}\n"]}

package/esm2022/form-utils/lib/form-control-wrapper/form-control-wrapper-control.js

@@ -0,0 +1,14 @@
+import { Directive } from '@angular/core';
+import { MlvStructural } from '@malva-ui/cdk/utils';
+import * as i0 from "@angular/core";
+export class MlvFormControlWrapperControl extends MlvStructural {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvFormControlWrapperControl, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvFormControlWrapperControl, isStandalone: true, selector: "[mlvFormControlWrapperControl]", usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvFormControlWrapperControl, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mlvFormControlWrapperControl]',
+                }]
+        }] });
+//# sourceMappingURL=form-control-wrapper-control.js.map

package/esm2022/form-utils/lib/form-control-wrapper/form-control-wrapper-control.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-control-wrapper-control.js","sourceRoot":"","sources":["../../../../../../../libs/core/form-utils/src/lib/form-control-wrapper/form-control-wrapper-control.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;;AAKpD,MAAM,OAAO,4BAA6B,SAAQ,aAAa;uGAAlD,4BAA4B;2FAA5B,4BAA4B;;2FAA5B,4BAA4B;kBAHxC,SAAS;mBAAC;oBACT,QAAQ,EAAE,gCAAgC;iBAC3C","sourcesContent":["import { Directive } from '@angular/core';\nimport { MlvStructural } from '@malva-ui/cdk/utils';\n\n@Directive({\n  selector: '[mlvFormControlWrapperControl]',\n})\nexport class MlvFormControlWrapperControl extends MlvStructural {}\n"]}

package/esm2022/form-utils/lib/form-control-wrapper/form-control-wrapper.js

@@ -0,0 +1,47 @@
+import { ChangeDetectionStrategy, Component, computed, contentChild, inject, output, ViewEncapsulation, } from '@angular/core';
+import { MlvClick } from '@malva-ui/cdk/accessibility';
+import { MlvFormControlWrapperControl } from './form-control-wrapper-control';
+import { NgTemplateOutlet } from '@angular/common';
+import { MLV_FORM_CONTROL } from '../models/form-control-connector';
+import { MlvButtonClose } from '@malva-ui/core/button';
+import { MLV_FORM_UTILS_I18N } from '@malva-ui/i18n';
+import * as i0 from "@angular/core";
+export class MlvFormControlWrapper {
+    /** @protected Optional injected form control connector for state/focus/disabled bindings. */
+    formControl = inject(MLV_FORM_CONTROL, {
+        optional: true,
+    });
+    /** @protected Computed BEM state modifier class derived from the control's validation state. */
+    _stateClass = computed(() => `mlv-form-control-wrapper--state-${this.formControl?.resolvedState?.() ??
+        this.formControl?.state() ??
+        'default'}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_stateClass" }] : /* istanbul ignore next */ []));
+    /** @protected Required projected control-slot directive rendered inside the wrapper. */
+    renderer = contentChild.required(MlvFormControlWrapperControl, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "renderer" }] : /* istanbul ignore next */ []));
+    /** @protected The component's i18n strings signal. */
+    _i18n = inject(MLV_FORM_UTILS_I18N);
+    /**
+     * Clear event emitter. Emits when user clicks on clear button
+     */
+    clear = output();
+    /** @protected Handles the clear-button click by emitting the `clear` output. */
+    _onClearClick() {
+        this.clear.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvFormControlWrapper, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MlvFormControlWrapper, isStandalone: true, selector: "mlv-form-control-wrapper", outputs: { clear: "clear" }, host: { properties: { "class": "_stateClass()", "class.mlv-form-control-wrapper--focused": "formControl?.focused()", "class.mlv-form-control-wrapper--disabled": "formControl?.disabled()", "class.mlv-form-control-wrapper--readonly": "formControl?.readonly()", "class.mlv-form-control-wrapper--loading": "formControl?.loading()", "class.mlv-form-control-wrapper--pill": "formControl?.pill?.() ?? false" }, classAttribute: "mlv-form-control-wrapper" }, queries: [{ propertyName: "renderer", first: true, predicate: MlvFormControlWrapperControl, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"mlv-form-control-wrapper__label-container\">\n  <ng-content select=\"mlv-label\"></ng-content>\n</div>\n<div\n  class=\"mlv-form-control-wrapper__control-container\"\n  [class.mlv-form-control-wrapper__control-container--with-inset]=\"\n    formControl?.inset()\n  \"\n>\n  <div class=\"mlv-form-control-wrapper__control-row\">\n    @if (formControl?.prepend(); as prependTpl) {\n    <div class=\"mlv-form-control-wrapper__side-content\">\n      <ng-template [ngTemplateOutlet]=\"prependTpl.templateRef\"></ng-template>\n    </div>\n    }\n\n    <ng-template [ngTemplateOutlet]=\"renderer().templateRef\"></ng-template>\n\n    @if ( formControl?.clearable() && formControl?.hasValue() &&\n    !formControl?.ownsClearButton?.() ) {\n    <div class=\"mlv-form-control-wrapper__clear\">\n      <mlv-button-close\n        (mlvClick)=\"_onClearClick()\"\n        mlvDensity=\"tight\"\n        [ariaLabel]=\"_i18n().clear\"\n      />\n    </div>\n    } @if (formControl?.append(); as appendTpl) {\n    <div class=\"mlv-form-control-wrapper__side-content\">\n      <ng-template [ngTemplateOutlet]=\"appendTpl.templateRef\"></ng-template>\n    </div>\n    }\n  </div>\n\n  @if (formControl?.inset(); as insetTpl) {\n  <div class=\"mlv-form-control-wrapper__inset\">\n    <ng-template [ngTemplateOutlet]=\"insetTpl.templateRef\"></ng-template>\n  </div>\n  }\n</div>\n\n<!-- Below-control slots. `mlv-description` is persistent help text, `mlv-message`\n     the stateful validation line, and `[mlvFormControlWrapperAside]` any\n     control-owned auxiliary readout (e.g. the textarea character counter). -->\n<div class=\"mlv-form-control-wrapper__message-container\">\n  <ng-content select=\"mlv-description\"></ng-content>\n  <ng-content select=\"mlv-message\"></ng-content>\n  <ng-content select=\"[mlvFormControlWrapperAside]\"></ng-content>\n</div>\n", styles: [".mlv-form-control-wrapper{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-form-control-wrapper *{box-sizing:border-box}.mlv-form-control-wrapper{display:flex;flex-direction:column;gap:.25rem;--form-ctrl-height: var(--mlv-height-m);--form-ctrl-h-padding: var(--mlv-spacing-3);--form-ctrl-font-size: var(--mlv-font-size-m);--form-ctrl-radius: var(--mlv-radius-m);--container-border-color: var(--mlv-border-normal);--container-background-color: var(--mlv-elevation-bg-3);--container-side-content-color: var(--mlv-text-primary);--container-shadow: none;--container-action-color: var(--mlv-text-secondary)}[class*=--tight] .mlv-form-control-wrapper:not([class*=--compact],[class*=--comfortable],[class*=--spacious],[class*=--airy]),.mlv-form-control-wrapper[class*=--tight]{--form-ctrl-height: var(--mlv-height-xs);--form-ctrl-h-padding: var(--mlv-spacing-2);--form-ctrl-font-size: var(--mlv-font-size-s);--form-ctrl-radius: var(--mlv-radius-s)}[class*=--compact] .mlv-form-control-wrapper:not([class*=--tight],[class*=--comfortable],[class*=--spacious],[class*=--airy]),.mlv-form-control-wrapper[class*=--compact]{--form-ctrl-height: var(--mlv-height-s);--form-ctrl-h-padding: var(--mlv-spacing-2-5);--form-ctrl-font-size: var(--mlv-font-size-m);--form-ctrl-radius: var(--mlv-radius-m)}[class*=--spacious] .mlv-form-control-wrapper:not([class*=--tight],[class*=--compact],[class*=--comfortable],[class*=--airy]),.mlv-form-control-wrapper[class*=--spacious]{--form-ctrl-height: var(--mlv-height-l);--form-ctrl-h-padding: var(--mlv-spacing-4);--form-ctrl-font-size: var(--mlv-font-size-l);--form-ctrl-radius: var(--mlv-radius-l)}[class*=--airy] .mlv-form-control-wrapper:not([class*=--tight],[class*=--compact],[class*=--comfortable],[class*=--spacious]),.mlv-form-control-wrapper[class*=--airy]{--form-ctrl-height: var(--mlv-height-xl);--form-ctrl-h-padding: var(--mlv-spacing-5);--form-ctrl-font-size: var(--mlv-font-size-xl);--form-ctrl-radius: var(--mlv-radius-xl)}.mlv-form-control-wrapper--pill .mlv-form-control-wrapper__control-container{border-radius:var(--mlv-radius-full);padding-inline:calc(var(--form-ctrl-h-padding) * 1.35)}.mlv-form-control-wrapper__control-container{display:flex;flex-direction:column;align-items:stretch;justify-content:space-between;width:100%;border-radius:var(--form-ctrl-radius);background-color:var(--container-background-color);border:.0625rem solid var(--container-border-color);--mlv-control-padding: var(--mlv-spacing-1) var(--form-ctrl-h-padding);padding:var(--mlv-control-padding);color:var(--container-border-color);box-shadow:var(--container-shadow);transition:all var(--mlv-duration-normal) var(--mlv-ease-default);transition-property:background-color,border-color,box-shadow;height:var(--form-ctrl-height);font-size:var(--form-ctrl-font-size)}.mlv-form-control-wrapper__control-container--with-inset{position:relative}.mlv-form-control-wrapper__control-container:hover{--container-action-color: var(--mlv-text-primary)}.mlv-form-control-wrapper__control-row{display:flex;align-items:center;justify-content:space-between;gap:.25rem;width:100%;min-height:0;flex:1}.mlv-form-control-wrapper__inset{position:absolute;bottom:0;left:0;right:0;padding:var(--mlv-control-padding)}.mlv-form-control-wrapper__message-container{display:flex;flex-direction:column;gap:.125rem;min-width:0}.mlv-form-control-wrapper__message-container:empty{display:none}.mlv-form-control-wrapper__side-content{color:var(--container-side-content-color);line-height:1}.mlv-form-control-wrapper--state-success{--container-border-color: var(--mlv-border-success)}.mlv-form-control-wrapper--state-info{--container-border-color: var(--mlv-border-info)}.mlv-form-control-wrapper--state-warning{--container-border-color: var(--mlv-border-warning)}.mlv-form-control-wrapper--state-error{--container-border-color: var(--mlv-border-error)}.mlv-form-control-wrapper--state-default:hover{--container-border-color: var(--mlv-palette-neutral-300)}.mlv-form-control-wrapper--focused{--container-shadow: 0 0 0 1px currentColor;--container-action-color: var(--mlv-text-primary)}.mlv-form-control-wrapper--focused.mlv-form-control-wrapper--state-default{--container-border-color: var(--mlv-border-focus)}.mlv-form-control-wrapper--disabled{--container-background-color: var(--mlv-background-sunken);cursor:not-allowed;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MlvButtonClose, selector: "mlv-button-close", inputs: ["variant", "shape", "ariaLabel"] }, { kind: "directive", type: MlvClick, selector: "[mlvClick]", inputs: ["disabled", "hostRole"], outputs: ["mlvClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvFormControlWrapper, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-form-control-wrapper', imports: [NgTemplateOutlet, MlvButtonClose, MlvClick], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'mlv-form-control-wrapper',
+                        '[class]': '_stateClass()',
+                        '[class.mlv-form-control-wrapper--focused]': 'formControl?.focused()',
+                        '[class.mlv-form-control-wrapper--disabled]': 'formControl?.disabled()',
+                        '[class.mlv-form-control-wrapper--readonly]': 'formControl?.readonly()',
+                        '[class.mlv-form-control-wrapper--loading]': 'formControl?.loading()',
+                        '[class.mlv-form-control-wrapper--pill]': 'formControl?.pill?.() ?? false',
+                    }, template: "<div class=\"mlv-form-control-wrapper__label-container\">\n  <ng-content select=\"mlv-label\"></ng-content>\n</div>\n<div\n  class=\"mlv-form-control-wrapper__control-container\"\n  [class.mlv-form-control-wrapper__control-container--with-inset]=\"\n    formControl?.inset()\n  \"\n>\n  <div class=\"mlv-form-control-wrapper__control-row\">\n    @if (formControl?.prepend(); as prependTpl) {\n    <div class=\"mlv-form-control-wrapper__side-content\">\n      <ng-template [ngTemplateOutlet]=\"prependTpl.templateRef\"></ng-template>\n    </div>\n    }\n\n    <ng-template [ngTemplateOutlet]=\"renderer().templateRef\"></ng-template>\n\n    @if ( formControl?.clearable() && formControl?.hasValue() &&\n    !formControl?.ownsClearButton?.() ) {\n    <div class=\"mlv-form-control-wrapper__clear\">\n      <mlv-button-close\n        (mlvClick)=\"_onClearClick()\"\n        mlvDensity=\"tight\"\n        [ariaLabel]=\"_i18n().clear\"\n      />\n    </div>\n    } @if (formControl?.append(); as appendTpl) {\n    <div class=\"mlv-form-control-wrapper__side-content\">\n      <ng-template [ngTemplateOutlet]=\"appendTpl.templateRef\"></ng-template>\n    </div>\n    }\n  </div>\n\n  @if (formControl?.inset(); as insetTpl) {\n  <div class=\"mlv-form-control-wrapper__inset\">\n    <ng-template [ngTemplateOutlet]=\"insetTpl.templateRef\"></ng-template>\n  </div>\n  }\n</div>\n\n<!-- Below-control slots. `mlv-description` is persistent help text, `mlv-message`\n     the stateful validation line, and `[mlvFormControlWrapperAside]` any\n     control-owned auxiliary readout (e.g. the textarea character counter). -->\n<div class=\"mlv-form-control-wrapper__message-container\">\n  <ng-content select=\"mlv-description\"></ng-content>\n  <ng-content select=\"mlv-message\"></ng-content>\n  <ng-content select=\"[mlvFormControlWrapperAside]\"></ng-content>\n</div>\n", styles: [".mlv-form-control-wrapper{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-form-control-wrapper *{box-sizing:border-box}.mlv-form-control-wrapper{display:flex;flex-direction:column;gap:.25rem;--form-ctrl-height: var(--mlv-height-m);--form-ctrl-h-padding: var(--mlv-spacing-3);--form-ctrl-font-size: var(--mlv-font-size-m);--form-ctrl-radius: var(--mlv-radius-m);--container-border-color: var(--mlv-border-normal);--container-background-color: var(--mlv-elevation-bg-3);--container-side-content-color: var(--mlv-text-primary);--container-shadow: none;--container-action-color: var(--mlv-text-secondary)}[class*=--tight] .mlv-form-control-wrapper:not([class*=--compact],[class*=--comfortable],[class*=--spacious],[class*=--airy]),.mlv-form-control-wrapper[class*=--tight]{--form-ctrl-height: var(--mlv-height-xs);--form-ctrl-h-padding: var(--mlv-spacing-2);--form-ctrl-font-size: var(--mlv-font-size-s);--form-ctrl-radius: var(--mlv-radius-s)}[class*=--compact] .mlv-form-control-wrapper:not([class*=--tight],[class*=--comfortable],[class*=--spacious],[class*=--airy]),.mlv-form-control-wrapper[class*=--compact]{--form-ctrl-height: var(--mlv-height-s);--form-ctrl-h-padding: var(--mlv-spacing-2-5);--form-ctrl-font-size: var(--mlv-font-size-m);--form-ctrl-radius: var(--mlv-radius-m)}[class*=--spacious] .mlv-form-control-wrapper:not([class*=--tight],[class*=--compact],[class*=--comfortable],[class*=--airy]),.mlv-form-control-wrapper[class*=--spacious]{--form-ctrl-height: var(--mlv-height-l);--form-ctrl-h-padding: var(--mlv-spacing-4);--form-ctrl-font-size: var(--mlv-font-size-l);--form-ctrl-radius: var(--mlv-radius-l)}[class*=--airy] .mlv-form-control-wrapper:not([class*=--tight],[class*=--compact],[class*=--comfortable],[class*=--spacious]),.mlv-form-control-wrapper[class*=--airy]{--form-ctrl-height: var(--mlv-height-xl);--form-ctrl-h-padding: var(--mlv-spacing-5);--form-ctrl-font-size: var(--mlv-font-size-xl);--form-ctrl-radius: var(--mlv-radius-xl)}.mlv-form-control-wrapper--pill .mlv-form-control-wrapper__control-container{border-radius:var(--mlv-radius-full);padding-inline:calc(var(--form-ctrl-h-padding) * 1.35)}.mlv-form-control-wrapper__control-container{display:flex;flex-direction:column;align-items:stretch;justify-content:space-between;width:100%;border-radius:var(--form-ctrl-radius);background-color:var(--container-background-color);border:.0625rem solid var(--container-border-color);--mlv-control-padding: var(--mlv-spacing-1) var(--form-ctrl-h-padding);padding:var(--mlv-control-padding);color:var(--container-border-color);box-shadow:var(--container-shadow);transition:all var(--mlv-duration-normal) var(--mlv-ease-default);transition-property:background-color,border-color,box-shadow;height:var(--form-ctrl-height);font-size:var(--form-ctrl-font-size)}.mlv-form-control-wrapper__control-container--with-inset{position:relative}.mlv-form-control-wrapper__control-container:hover{--container-action-color: var(--mlv-text-primary)}.mlv-form-control-wrapper__control-row{display:flex;align-items:center;justify-content:space-between;gap:.25rem;width:100%;min-height:0;flex:1}.mlv-form-control-wrapper__inset{position:absolute;bottom:0;left:0;right:0;padding:var(--mlv-control-padding)}.mlv-form-control-wrapper__message-container{display:flex;flex-direction:column;gap:.125rem;min-width:0}.mlv-form-control-wrapper__message-container:empty{display:none}.mlv-form-control-wrapper__side-content{color:var(--container-side-content-color);line-height:1}.mlv-form-control-wrapper--state-success{--container-border-color: var(--mlv-border-success)}.mlv-form-control-wrapper--state-info{--container-border-color: var(--mlv-border-info)}.mlv-form-control-wrapper--state-warning{--container-border-color: var(--mlv-border-warning)}.mlv-form-control-wrapper--state-error{--container-border-color: var(--mlv-border-error)}.mlv-form-control-wrapper--state-default:hover{--container-border-color: var(--mlv-palette-neutral-300)}.mlv-form-control-wrapper--focused{--container-shadow: 0 0 0 1px currentColor;--container-action-color: var(--mlv-text-primary)}.mlv-form-control-wrapper--focused.mlv-form-control-wrapper--state-default{--container-border-color: var(--mlv-border-focus)}.mlv-form-control-wrapper--disabled{--container-background-color: var(--mlv-background-sunken);cursor:not-allowed;pointer-events:none}\n"] }]
+        }], propDecorators: { renderer: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MlvFormControlWrapperControl), { isSignal: true }] }], clear: [{ type: i0.Output, args: ["clear"] }] } });
+//# sourceMappingURL=form-control-wrapper.js.map

package/esm2022/form-utils/lib/form-control-wrapper/form-control-wrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-control-wrapper.js","sourceRoot":"","sources":["../../../../../../../libs/core/form-utils/src/lib/form-control-wrapper/form-control-wrapper.ts","../../../../../../../libs/core/form-utils/src/lib/form-control-wrapper/form-control-wrapper.html"],"names":[],"mappings":"AAAA,OAAO,EACL,uBAAuB,EACvB,SAAS,EACT,QAAQ,EACR,YAAY,EACZ,MAAM,EACN,MAAM,EACN,iBAAiB,GAClB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,4BAA4B,EAAE,MAAM,gCAAgC,CAAC;AAC9E,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AACpE,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;;AAmBrD,MAAM,OAAO,qBAAqB;IAChC,6FAA6F;IAC1E,WAAW,GAAG,MAAM,CAAC,gBAAgB,EAAE;QACxD,QAAQ,EAAE,IAAI;KACf,CAAC,CAAC;IAEH,gGAAgG;IAC7E,WAAW,GAAG,QAAQ,CACvC,GAAG,EAAE,CACH,mCACE,IAAI,CAAC,WAAW,EAAE,aAAa,EAAE,EAAE;QACnC,IAAI,CAAC,WAAW,EAAE,KAAK,EAAE;QACzB,SACF,EAAE;oFACL,CAAC;IAEF,wFAAwF;IACrE,QAAQ,GAAG,YAAY,CAAC,QAAQ,CACjD,4BAA4B;iFAC7B,CAAC;IAEF,sDAAsD;IACnC,KAAK,GAAG,MAAM,CAAC,mBAAmB,CAAC,CAAC;IAEvD;;OAEG;IACM,KAAK,GAAG,MAAM,EAAQ,CAAC;IAEhC,gFAAgF;IACtE,aAAa;QACrB,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;IACpB,CAAC;uGAhCU,qBAAqB;2FAArB,qBAAqB,ylBAkB9B,4BAA4B,gECnDhC,s0DAiDA,q3ID/BY,gBAAgB,oJAAE,cAAc,wGAAE,QAAQ;;2FAezC,qBAAqB;kBAjBjC,SAAS;+BACE,0BAA0B,WAC3B,CAAC,gBAAgB,EAAE,cAAc,EAAE,QAAQ,CAAC,iBACtC,iBAAiB,CAAC,IAAI,mBACpB,uBAAuB,CAAC,MAAM,QAGzC;wBACJ,KAAK,EAAE,0BAA0B;wBACjC,SAAS,EAAE,eAAe;wBAC1B,2CAA2C,EAAE,wBAAwB;wBACrE,4CAA4C,EAAE,yBAAyB;wBACvE,4CAA4C,EAAE,yBAAyB;wBACvE,2CAA2C,EAAE,wBAAwB;wBACrE,wCAAwC,EAAE,gCAAgC;qBAC3E;6FAoBC,4BAA4B","sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  contentChild,\n  inject,\n  output,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { MlvClick } from '@malva-ui/cdk/accessibility';\nimport { MlvFormControlWrapperControl } from './form-control-wrapper-control';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { MLV_FORM_CONTROL } from '../models/form-control-connector';\nimport { MlvButtonClose } from '@malva-ui/core/button';\nimport { MLV_FORM_UTILS_I18N } from '@malva-ui/i18n';\n\n@Component({\n  selector: 'mlv-form-control-wrapper',\n  imports: [NgTemplateOutlet, MlvButtonClose, MlvClick],\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  templateUrl: './form-control-wrapper.html',\n  styleUrl: './form-control-wrapper.scss',\n  host: {\n    class: 'mlv-form-control-wrapper',\n    '[class]': '_stateClass()',\n    '[class.mlv-form-control-wrapper--focused]': 'formControl?.focused()',\n    '[class.mlv-form-control-wrapper--disabled]': 'formControl?.disabled()',\n    '[class.mlv-form-control-wrapper--readonly]': 'formControl?.readonly()',\n    '[class.mlv-form-control-wrapper--loading]': 'formControl?.loading()',\n    '[class.mlv-form-control-wrapper--pill]': 'formControl?.pill?.() ?? false',\n  },\n})\nexport class MlvFormControlWrapper {\n  /** @protected Optional injected form control connector for state/focus/disabled bindings. */\n  protected readonly formControl = inject(MLV_FORM_CONTROL, {\n    optional: true,\n  });\n\n  /** @protected Computed BEM state modifier class derived from the control's validation state. */\n  protected readonly _stateClass = computed(\n    () =>\n      `mlv-form-control-wrapper--state-${\n        this.formControl?.resolvedState?.() ??\n        this.formControl?.state() ??\n        'default'\n      }`,\n  );\n\n  /** @protected Required projected control-slot directive rendered inside the wrapper. */\n  protected readonly renderer = contentChild.required(\n    MlvFormControlWrapperControl,\n  );\n\n  /** @protected The component's i18n strings signal. */\n  protected readonly _i18n = inject(MLV_FORM_UTILS_I18N);\n\n  /**\n   * Clear event emitter. Emits when user clicks on clear button\n   */\n  readonly clear = output<void>();\n\n  /** @protected Handles the clear-button click by emitting the `clear` output. */\n  protected _onClearClick(): void {\n    this.clear.emit();\n  }\n}\n","<div class=\"mlv-form-control-wrapper__label-container\">\n  <ng-content select=\"mlv-label\"></ng-content>\n</div>\n<div\n  class=\"mlv-form-control-wrapper__control-container\"\n  [class.mlv-form-control-wrapper__control-container--with-inset]=\"\n    formControl?.inset()\n  \"\n>\n  <div class=\"mlv-form-control-wrapper__control-row\">\n    @if (formControl?.prepend(); as prependTpl) {\n    <div class=\"mlv-form-control-wrapper__side-content\">\n      <ng-template [ngTemplateOutlet]=\"prependTpl.templateRef\"></ng-template>\n    </div>\n    }\n\n    <ng-template [ngTemplateOutlet]=\"renderer().templateRef\"></ng-template>\n\n    @if ( formControl?.clearable() && formControl?.hasValue() &&\n    !formControl?.ownsClearButton?.() ) {\n    <div class=\"mlv-form-control-wrapper__clear\">\n      <mlv-button-close\n        (mlvClick)=\"_onClearClick()\"\n        mlvDensity=\"tight\"\n        [ariaLabel]=\"_i18n().clear\"\n      />\n    </div>\n    } @if (formControl?.append(); as appendTpl) {\n    <div class=\"mlv-form-control-wrapper__side-content\">\n      <ng-template [ngTemplateOutlet]=\"appendTpl.templateRef\"></ng-template>\n    </div>\n    }\n  </div>\n\n  @if (formControl?.inset(); as insetTpl) {\n  <div class=\"mlv-form-control-wrapper__inset\">\n    <ng-template [ngTemplateOutlet]=\"insetTpl.templateRef\"></ng-template>\n  </div>\n  }\n</div>\n\n<!-- Below-control slots. `mlv-description` is persistent help text, `mlv-message`\n     the stateful validation line, and `[mlvFormControlWrapperAside]` any\n     control-owned auxiliary readout (e.g. the textarea character counter). -->\n<div class=\"mlv-form-control-wrapper__message-container\">\n  <ng-content select=\"mlv-description\"></ng-content>\n  <ng-content select=\"mlv-message\"></ng-content>\n  <ng-content select=\"[mlvFormControlWrapperAside]\"></ng-content>\n</div>\n"]}