@bitforgehq/ui 0.3.0

package/types/bitforgehq-ui-number-input.d.ts

@@ -0,0 +1,282 @@
+import { FormValueControl, ValidationError } from "@angular/forms/signals";
+import { BfInputEnterKeyHint, BfSize } from "@bitforgehq/ui";
+import * as i0 from "@angular/core";
+/**
+ * The `step` of a `bf-number-input`: a number, or `'any'` for no step check.
+ *
+ * @summary The step of a number field, a number or any for no step check
+ * @since 0.3.0
+ */
+type BfNumberInputStep = number | 'any';
+/**
+ * The virtual keyboard of a `bf-number-input` (native `inputmode`); `''` picks one from `min` and
+ * `step`.
+ *
+ * @summary The virtual keyboards a number field can ask a phone to show
+ * @since 0.3.0
+ */
+type BfNumberInputMode = 'numeric' | 'decimal' | '';
+/**
+ * Number field with the chrome of the text field that binds `number | null`: an empty field is
+ * `null`, text the browser cannot read as a number is a `parse` error, and Signal Forms `min()` and
+ * `max()` become the native `min` and `max`.
+ *
+ * @example
+ * <bf-number-input label="Quantity" [min]="1" [max]="99" [(value)]="quantity" />
+ * <bf-number-input label="Age" [formField]="profile.age" />
+ * @summary Number field that binds number or null, with native min, max and step
+ * @category Forms
+ * @since 0.3.0
+ * @slot icon-start An icon inside the field, before the number.
+ * @slot icon-end An icon inside the field, after the number.
+ */
+export declare class BfNumberInputComponent implements FormValueControl<number | null> {
+  /** The number, `null` while the field is empty; two-way bindable and bound by `[formField]`. */
+  readonly value: import("@angular/core").ModelSignal<number | null>;
+  /** Lowest value (native `min`); bound by Signal Forms `min()`. */
+  readonly min: import("@angular/core").InputSignal<number | undefined>;
+  /** Highest value (native `max`); bound by Signal Forms `max()`. */
+  readonly max: import("@angular/core").InputSignal<number | undefined>;
+  /** Step of the arrow keys and spin buttons, and the native step check (e.g. `0.05` or `any`). */
+  readonly step: import("@angular/core").InputSignal<BfNumberInputStep | undefined>;
+  /** Height step: sm 32, md 40, lg 48 px; unset follows `provideBfDefaults()` (`fieldSize`, `md`
+   * by default). */
+  readonly size: import("@angular/core").InputSignal<BfSize | undefined>;
+  /** Visible label above the control. */
+  readonly label: import("@angular/core").InputSignal<string>;
+  /** Accessible name when no visible label is rendered. Ignored when `label` is set. */
+  readonly ariaLabel: import("@angular/core").InputSignal<string>;
+  /**
+   * Id(s) of the element(s) that name the field when no visible label is rendered. Ignored when
+   * `label` is set.
+   */
+  readonly ariaLabelledby: import("@angular/core").InputSignal<string>;
+  /** Example value shown while empty. */
+  readonly placeholder: import("@angular/core").InputSignal<string>;
+  /** Helper text under the control. */
+  readonly helpText: import("@angular/core").InputSignal<string>;
+  /** Explicit error text; takes precedence over Signal Forms and parse errors. */
+  readonly errorMessage: import("@angular/core").InputSignal<string>;
+  /** Disables the control. */
+  readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Makes the control read-only. */
+  readonly readonly: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Marks the control required (label marker and native attribute). */
+  readonly required: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Field validity from Signal Forms. */
+  readonly invalid: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Whether the user has left the field; errors show only once touched. */
+  readonly touched: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Validation errors from Signal Forms; the first message is shown once touched. */
+  readonly errors: import("@angular/core").InputSignal<readonly ValidationError.WithOptionalFieldTree[]>;
+  /** Native name attribute. */
+  readonly name: import("@angular/core").InputSignal<string>;
+  /** Control id; generated when not set. */
+  readonly id: import("@angular/core").InputSignal<string>;
+  /** Reserve space for an icon or unit in the `icon-start` slot. */
+  readonly iconStart: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Reserve space for an icon or unit in the `icon-end` slot. */
+  readonly iconEnd: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Native autocomplete hint. */
+  readonly autocomplete: import("@angular/core").InputSignal<string>;
+  /** Virtual keyboard; unset, a field with `min >= 0` gets `numeric` for an integer (or no) step and
+   * `decimal` otherwise, and any other field none (the full keyboard, which has a minus key). */
+  readonly inputMode: import("@angular/core").InputSignal<BfNumberInputMode>;
+  /** Label of the virtual keyboard's Enter key (native `enterkeyhint`). */
+  readonly enterKeyHint: import("@angular/core").InputSignal<BfInputEnterKeyHint>;
+  /** Emitted with the new value (`null` when emptied) right after the user changes it. */
+  readonly changed: import("@angular/core").OutputEmitterRef<number | null>;
+  /** Emitted when the control gains focus. */
+  readonly focused: import("@angular/core").OutputEmitterRef<FocusEvent>;
+  /** Emitted when the control loses focus. */
+  readonly blurred: import("@angular/core").OutputEmitterRef<FocusEvent>;
+  /** Emitted on blur so Signal Forms marks the field touched. */
+  readonly touch: import("@angular/core").OutputEmitterRef<void>;
+  private readonly el;
+  private readonly labels;
+  private readonly defaults;
+  /** Whether the last input was text the browser could not read as a number (`badInput`). */
+  private readonly badInput;
+  /** Whether the user has left the field; a parse error shows after that even without a form. */
+  private readonly left;
+  /** The text shown in the field, parsed into `value`; a parse error leaves the model unchanged. */
+  protected readonly raw: import("@angular/forms/signals").TransformedValueSignal<string>;
+  /** The size in effect: `size`, else the app's `fieldSize` default. */
+  protected readonly resolvedSize: import("@angular/core").Signal<BfSize>;
+  readonly iconStartClasses: import("@angular/core").Signal<string>;
+  readonly iconEndClasses: import("@angular/core").Signal<string>;
+  /** The form's errors plus the parse error, one per kind (a form already lists the parse error). */
+  private readonly allErrors;
+  readonly errorText: import("@angular/core").Signal<string>;
+  readonly showError: import("@angular/core").Signal<boolean>;
+  readonly describedBy: import("@angular/core").Signal<string | null>;
+  /** `aria-errormessage`: the error paragraph while `aria-invalid` is set. */
+  readonly errorMessageId: import("@angular/core").Signal<string | null>;
+  /**
+   * `aria-label` value: only when there is no visible label, so the label stays the sole accessible
+   * name.
+   */
+  readonly ariaLabelAttr: import("@angular/core").Signal<string | null>;
+  /** `aria-labelledby` value, under the same rule as `ariaLabelAttr`. */
+  readonly ariaLabelledbyAttr: import("@angular/core").Signal<string | null>;
+  /**
+   * `inputmode`: the explicit one; else, only when negatives are ruled out (`min >= 0`), `numeric`
+   * for an integer (or no) step and `decimal` otherwise, since neither iOS pad has a minus key;
+   * else none.
+   */
+  readonly inputModeAttr: import("@angular/core").Signal<"numeric" | "decimal" | null>;
+  readonly classes: import("@angular/core").Signal<string>;
+  /**
+   * Unreadable text stays on screen while the model keeps its number, so a reset to that same
+   * number (a form `reset()`) changes no binding. When the parse error is cleared that way, write
+   * the number back into the field and forget the bad input.
+   */
+  private readonly clearBadText;
+  /**
+   * Focuses the native input; Signal Forms calls it from `focusBoundControl()`.
+   * @param options Passed on to the native `focus()`, such as `{ preventScroll: true }`.
+   */
+  focus(options?: FocusOptions): void;
+  /**
+   * Parses the typed text. Unreadable text reads as `''` with `validity.badInput`; the shown text
+   * is then kept as it is (writing `''` back would wipe what the user typed) and a parse error set.
+   * Emits `changed` when the text parses to a new value.
+   * @internal
+   */
+  onInput(el: HTMLInputElement): void;
+  /**
+   * Emits `blurred` and `touch` (the field is touched), and shows errors from then on.
+   * @internal
+   */
+  onBlur(event: FocusEvent): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<BfNumberInputComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<BfNumberInputComponent, "bf-number-input", never, {
+    "value": {
+      "alias": "value";
+      "required": false;
+      "isSignal": true;
+    };
+    "min": {
+      "alias": "min";
+      "required": false;
+      "isSignal": true;
+    };
+    "max": {
+      "alias": "max";
+      "required": false;
+      "isSignal": true;
+    };
+    "step": {
+      "alias": "step";
+      "required": false;
+      "isSignal": true;
+    };
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
+    "label": {
+      "alias": "label";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabelledby": {
+      "alias": "ariaLabelledby";
+      "required": false;
+      "isSignal": true;
+    };
+    "placeholder": {
+      "alias": "placeholder";
+      "required": false;
+      "isSignal": true;
+    };
+    "helpText": {
+      "alias": "helpText";
+      "required": false;
+      "isSignal": true;
+    };
+    "errorMessage": {
+      "alias": "errorMessage";
+      "required": false;
+      "isSignal": true;
+    };
+    "disabled": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
+    "readonly": {
+      "alias": "readonly";
+      "required": false;
+      "isSignal": true;
+    };
+    "required": {
+      "alias": "required";
+      "required": false;
+      "isSignal": true;
+    };
+    "invalid": {
+      "alias": "invalid";
+      "required": false;
+      "isSignal": true;
+    };
+    "touched": {
+      "alias": "touched";
+      "required": false;
+      "isSignal": true;
+    };
+    "errors": {
+      "alias": "errors";
+      "required": false;
+      "isSignal": true;
+    };
+    "name": {
+      "alias": "name";
+      "required": false;
+      "isSignal": true;
+    };
+    "id": {
+      "alias": "id";
+      "required": false;
+      "isSignal": true;
+    };
+    "iconStart": {
+      "alias": "iconStart";
+      "required": false;
+      "isSignal": true;
+    };
+    "iconEnd": {
+      "alias": "iconEnd";
+      "required": false;
+      "isSignal": true;
+    };
+    "autocomplete": {
+      "alias": "autocomplete";
+      "required": false;
+      "isSignal": true;
+    };
+    "inputMode": {
+      "alias": "inputMode";
+      "required": false;
+      "isSignal": true;
+    };
+    "enterKeyHint": {
+      "alias": "enterKeyHint";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "value": "valueChange";
+    "changed": "changed";
+    "focused": "focused";
+    "blurred": "blurred";
+    "touch": "touch";
+  }, never, ["[bfSlot=icon-start]", "[bfSlot=icon-end]"], true, never>;
+}
+export type { BfNumberInputMode, BfNumberInputStep };