@star-ng/ui 0.0.0-stage → 0.1.0

package/types/star-ng-ui-file-upload.d.ts

@@ -0,0 +1,192 @@
+import { FormValueControl } from "@angular/forms/signals";
+import * as i0 from "@angular/core";
+import { HttpEvent } from "@angular/common/http";
+import { Observable } from "rxjs";
+export interface StarRejectedFile {
+  readonly file: File;
+  readonly reason: 'type' | 'size' | 'limit';
+}
+/** Upload state of one file. The page that uploads the files owns this state. */
+export interface StarFileStatus {
+  /** Percent sent, 0 to 100. Shows a progress bar while `state` is `'uploading'`. */
+  readonly progress?: number;
+  readonly state?: 'uploading' | 'done' | 'error';
+  /** Error text, shown with `state: 'error'`. */
+  readonly message?: string;
+}
+/** Human-readable size with `Intl.NumberFormat` byte units (kB, MB). */
+export declare function formatFileSize(bytes: number, locale?: string): string;
+/** Matches a file against an `accept` list such as `.pdf,image/*,application/msword`. */
+export declare function fileMatchesAccept(file: File, accept: string): boolean;
+/**
+ * File picker with drag and drop (PrimeNG `p-fileupload`, "advanced" mode without the HTTP
+ * part). The value is the list of chosen `File`s; upload them in your own service.
+ * Validates `accept`, `maxFileSize` and `fileLimit`, and lists rejected files with a reason.
+ *
+ * `fileStatus` shows the upload state of each file (progress bar, done, error); the control
+ * does not upload (`toUploadStatus()` maps an `HttpClient` upload to that state).
+ * `reorderable` lets the user change the file order (buttons or drag). `thumbnails` shows a
+ * picture for image files. Files pasted while focus is in the control are added.
+ *
+ * `<star-file-upload [formField]="form.attachments" accept=".pdf,image/*" [maxFileSize]="10_000_000" multiple />`
+ */
+export declare class StarFileUpload implements FormValueControl<readonly File[]> {
+  protected readonly text: import("@star-ng/ui/core").StarUiText;
+  private readonly ids;
+  constructor();
+  /** The chosen files, in list order. */
+  readonly value: import("@angular/core").ModelSignal<readonly File[]>;
+  /** Allowed files: extensions and MIME types such as `.pdf,image/*`. Empty allows every file. */
+  readonly accept: import("@angular/core").InputSignal<string>;
+  /** Allows more than one file. Without it a new file replaces the old one. */
+  readonly multiple: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Bytes (0 = no limit). */
+  readonly maxFileSize: import("@angular/core").InputSignal<number>;
+  /** Maximum number of files (0 = no limit). */
+  readonly fileLimit: import("@angular/core").InputSignal<number>;
+  /** Locale for the file sizes (default: the application locale). */
+  readonly locale: import("@angular/core").InputSignal<string | undefined>;
+  /**
+   * Upload state of a file, or `null`. Read your own signal in the function: the list then
+   * follows the upload.
+   */
+  readonly fileStatus: import("@angular/core").InputSignal<((file: File) => StarFileStatus | null | undefined) | null>;
+  /** The user can change the order of the files. */
+  readonly reorderable: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Shows a small picture in place of the file icon for image files. */
+  readonly thumbnails: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly readonly: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly invalid: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly touched: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly touch: import("@angular/core").OutputEmitterRef<void>;
+  /** Emits the files that passed the checks, each time files are added. */
+  readonly selected: import("@angular/core").OutputEmitterRef<readonly File[]>;
+  /** Emits the files that failed a check, with the reason (`type`, `size` or `limit`). */
+  readonly rejectedChange: import("@angular/core").OutputEmitterRef<readonly StarRejectedFile[]>;
+  protected readonly inputId: string;
+  protected readonly hintId: string;
+  protected readonly dragging: import("@angular/core").WritableSignal<boolean>;
+  protected readonly rejected: import("@angular/core").WritableSignal<readonly StarRejectedFile[]>;
+  protected readonly dropIndex: import("@angular/core").WritableSignal<number | null>;
+  private dragIndex;
+  protected readonly canReorder: import("@angular/core").Signal<boolean>;
+  private readonly input;
+  protected readonly hint: import("@angular/core").Signal<string>;
+  protected statusOf(file: File): StarFileStatus | null;
+  protected percent(status: StarFileStatus | null): number;
+  /** Moves the file at index `from` to index `to`. */
+  move(from: number, to: number): void;
+  protected onFileDragStart(index: number, event: DragEvent): void;
+  protected onFileDragOver(index: number, event: DragEvent): void;
+  protected onFileDrop(index: number, event: DragEvent): void;
+  protected endFileDrag(): void;
+  protected size(file: File): string;
+  protected rejectionText(item: StarRejectedFile): string;
+  protected onDrag(event: DragEvent, over: boolean): void;
+  protected onDrop(event: DragEvent): void;
+  protected onPicked(input: HTMLInputElement): void;
+  /** Validates and adds files (also usable from code, for example paste handlers). */
+  add(files: readonly File[]): void;
+  remove(file: File): void;
+  /** Object URL per image file, made when first shown and released when the file goes. */
+  private readonly thumbnailUrls;
+  protected thumbnailOf(file: File): string | null;
+  private releaseThumbnail;
+  /** Files on the clipboard (a screenshot, a copied file) are added while focus is in the control. */
+  protected onPaste(event: ClipboardEvent): void;
+  focus(): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<StarFileUpload, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<StarFileUpload, "star-file-upload", never, {
+    "value": {
+      "alias": "value";
+      "required": false;
+      "isSignal": true;
+    };
+    "accept": {
+      "alias": "accept";
+      "required": false;
+      "isSignal": true;
+    };
+    "multiple": {
+      "alias": "multiple";
+      "required": false;
+      "isSignal": true;
+    };
+    "maxFileSize": {
+      "alias": "maxFileSize";
+      "required": false;
+      "isSignal": true;
+    };
+    "fileLimit": {
+      "alias": "fileLimit";
+      "required": false;
+      "isSignal": true;
+    };
+    "locale": {
+      "alias": "locale";
+      "required": false;
+      "isSignal": true;
+    };
+    "fileStatus": {
+      "alias": "fileStatus";
+      "required": false;
+      "isSignal": true;
+    };
+    "reorderable": {
+      "alias": "reorderable";
+      "required": false;
+      "isSignal": true;
+    };
+    "thumbnails": {
+      "alias": "thumbnails";
+      "required": false;
+      "isSignal": true;
+    };
+    "disabled": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
+    "readonly": {
+      "alias": "readonly";
+      "required": false;
+      "isSignal": true;
+    };
+    "invalid": {
+      "alias": "invalid";
+      "required": false;
+      "isSignal": true;
+    };
+    "touched": {
+      "alias": "touched";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "value": "valueChange";
+    "touch": "touch";
+    "selected": "selected";
+    "rejectedChange": "rejectedChange";
+  }, never, never, true, never>;
+}
+/** Upload state of one file, with the server response when the upload is done. */
+export interface StarUploadResult<T> extends StarFileStatus {
+  readonly response?: T;
+}
+/**
+ * Turns the events of one `HttpClient` upload into `StarFileStatus` values for
+ * `<star-file-upload [fileStatus]>`: progress while the body is sent, then `done` with the
+ * response body, or `error` with a message. The observable does not fail.
+ *
+ * The control does not upload. The page sends the request with
+ * `{ reportProgress: true, observe: 'events' }` and pipes it here:
+ *
+ * ```ts
+ * this.api.upload(file).pipe(toUploadStatus()).subscribe((status) =>
+ *   this.uploads.update((map) => new Map(map).set(file, status)));
+ * ```
+ *
+ * @param errorMessage Text for a failed upload. The default uses the HTTP status text.
+ */
+export declare function toUploadStatus<T>(errorMessage?: (error: unknown) => string): (events: Observable<HttpEvent<T>>) => Observable<StarUploadResult<T>>;

package/types/star-ng-ui-i18n-de.d.ts

@@ -0,0 +1,7 @@
+import { StarUiText } from "@star-ng/ui/core";
+/**
+ * German control texts (formal address "Sie"). Provide them with
+ * `provideStarUiText(STAR_UI_TEXT_DE)` or through `provideStarUiTextFromSignal()`.
+ * The `StarUiText` type makes a missing entry a compile error.
+ */
+export declare const STAR_UI_TEXT_DE: StarUiText;

package/types/star-ng-ui-i18n-es.d.ts

@@ -0,0 +1,7 @@
+import { StarUiText } from "@star-ng/ui/core";
+/**
+ * Spanish control texts in neutral Spanish: no regional words, no "tú" or "usted" forms (actions
+ * use the infinitive). Provide them with `provideStarUiText(STAR_UI_TEXT_ES)` or through
+ * `provideStarUiTextFromSignal()`. The `StarUiText` type makes a missing entry a compile error.
+ */
+export declare const STAR_UI_TEXT_ES: StarUiText;

package/types/star-ng-ui-input-group.d.ts

@@ -0,0 +1,58 @@
+import * as i0 from "@angular/core";
+/**
+ * Icon inside a text input (PrimeNG `p-iconfield` + `p-inputicon`). The icon is decoration
+ * only: the input still needs a label (`star-field` or `aria-label`).
+ *
+ * ```html
+ * <star-icon-field icon="ph-bold ph-magnifying-glass">
+ *   <input starInput type="search" aria-label="Search cases" />
+ * </star-icon-field>
+ * ```
+ */
+export declare class StarIconField {
+  /** Phosphor icon classes, for example `ph-bold ph-magnifying-glass`. */
+  readonly icon: import("@angular/core").InputSignal<string>;
+  readonly iconPosition: import("@angular/core").InputSignal<"start" | "end">;
+  static ɵfac: i0.ɵɵFactoryDeclaration<StarIconField, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<StarIconField, "star-icon-field", never, {
+    "icon": {
+      "alias": "icon";
+      "required": true;
+      "isSignal": true;
+    };
+    "iconPosition": {
+      "alias": "iconPosition";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["*"], true, never>;
+}
+/**
+ * Joins an input with add-ons before or after it (PrimeNG `p-inputgroup`): a unit, a prefix
+ * text, an icon or a button. Put `star-input-group-addon` elements, native `starInput` inputs
+ * and `star-button` elements inside, in visual order.
+ *
+ * ```html
+ * <star-input-group>
+ *   <star-input-group-addon>https://</star-input-group-addon>
+ *   <input starInput aria-label="Website" />
+ *   <star-button variant="secondary">Check</star-button>
+ * </star-input-group>
+ * ```
+ */
+export declare class StarInputGroup {
+  readonly ariaLabel: import("@angular/core").InputSignal<string | null>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<StarInputGroup, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<StarInputGroup, "star-input-group", never, {
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["*"], true, never>;
+}
+/** Text or icon add-on of `star-input-group`. */
+export declare class StarInputGroupAddon {
+  static ɵfac: i0.ɵɵFactoryDeclaration<StarInputGroupAddon, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<StarInputGroupAddon, "star-input-group-addon", never, {}, {}, never, ["*"], true, never>;
+}

package/types/star-ng-ui-input-mask.d.ts

@@ -0,0 +1,126 @@
+import { FormValueControl } from "@angular/forms/signals";
+import { StarField } from "@star-ng/ui/field";
+import * as i0 from "@angular/core";
+/** Applies a mask to raw characters; returns the masked text (unfilled slots as `slotChar`). */
+export declare function applyMask(mask: string, raw: string, slotChar?: string): string;
+/** Characters typed into the slots, without literals and slot chars. */
+export declare function unmask(mask: string, masked: string, slotChar?: string): string;
+/**
+ * Masked text field (PrimeNG `p-inputmask`): fixed-format entry such as phone numbers, postal
+ * codes or serial numbers. Mask tokens: `9` digit, `a` letter, `*` letter or digit; other
+ * characters are literals. The value is the masked text, or the raw slots with `unmask`.
+ *
+ * `<star-input-mask mask="(999) 999-9999" [formField]="form.phone" ariaLabel="Phone number" />`
+ */
+export declare class StarInputMask implements FormValueControl<string> {
+  protected readonly field: StarField | null;
+  /** Invalid after touch, or while the parent `star-field` shows an error. */
+  protected readonly showInvalid: import("@angular/core").Signal<boolean>;
+  constructor();
+  readonly value: import("@angular/core").ModelSignal<string>;
+  readonly mask: import("@angular/core").InputSignal<string>;
+  readonly slotChar: import("@angular/core").InputSignal<string>;
+  /** Store only the typed characters (no literals). */
+  readonly unmask: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Keep a partly filled value on blur (default clears it). */
+  readonly autoClear: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly placeholder: import("@angular/core").InputSignal<string | null>;
+  readonly ariaLabel: import("@angular/core").InputSignal<string | null>;
+  readonly inputId: import("@angular/core").InputSignal<string>;
+  readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly readonly: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly required: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly invalid: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly touched: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly name: import("@angular/core").InputSignal<string>;
+  readonly touch: import("@angular/core").OutputEmitterRef<void>;
+  readonly completed: import("@angular/core").OutputEmitterRef<string>;
+  protected readonly tokenPattern: RegExp;
+  private readonly input;
+  protected readonly numericOnly: import("@angular/core").Signal<boolean>;
+  protected readonly display: import("@angular/core").Signal<string>;
+  private slotsFilled;
+  protected onFocus(input: HTMLInputElement): void;
+  protected onInput(input: HTMLInputElement): void;
+  protected onBlur(input: HTMLInputElement): void;
+  /** Puts the caret on the first empty slot. */
+  private placeCaret;
+  focus(): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<StarInputMask, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<StarInputMask, "star-input-mask", never, {
+    "value": {
+      "alias": "value";
+      "required": false;
+      "isSignal": true;
+    };
+    "mask": {
+      "alias": "mask";
+      "required": true;
+      "isSignal": true;
+    };
+    "slotChar": {
+      "alias": "slotChar";
+      "required": false;
+      "isSignal": true;
+    };
+    "unmask": {
+      "alias": "unmask";
+      "required": false;
+      "isSignal": true;
+    };
+    "autoClear": {
+      "alias": "autoClear";
+      "required": false;
+      "isSignal": true;
+    };
+    "placeholder": {
+      "alias": "placeholder";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "inputId": {
+      "alias": "inputId";
+      "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;
+    };
+    "name": {
+      "alias": "name";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "value": "valueChange";
+    "touch": "touch";
+    "completed": "completed";
+  }, never, never, true, never>;
+}

package/types/star-ng-ui-input-number.d.ts

@@ -0,0 +1,193 @@
+import { FormValueControl } from "@angular/forms/signals";
+import { StarField } from "@star-ng/ui/field";
+import * as i0 from "@angular/core";
+/**
+ * Number field (PrimeNG `p-inputnumber`): locale formatting with `Intl.NumberFormat`
+ * (decimal, currency, percent, units), min / max clamping, step buttons, Arrow keys and
+ * PageUp / PageDown, `role="spinbutton"`. While focused the field shows plain editable digits;
+ * on blur it shows the formatted number.
+ *
+ * `<star-input-number [formField]="form.quantity" [min]="0" [max]="500" unit="kilogram" showButtons />`
+ */
+export declare class StarInputNumber implements FormValueControl<number | null> {
+  protected readonly uiText: import("@star-ng/ui/core").StarUiText;
+  protected readonly field: StarField | null;
+  /** Invalid after touch, or while the parent `star-field` shows an error. */
+  protected readonly showInvalid: import("@angular/core").Signal<boolean>;
+  constructor();
+  readonly value: import("@angular/core").ModelSignal<number | null>;
+  readonly mode: import("@angular/core").InputSignal<"decimal" | "currency" | "percent" | "unit">;
+  /** ISO 4217 code for `mode="currency"`, for example `EUR`. */
+  readonly currency: import("@angular/core").InputSignal<string>;
+  /**
+   * ECMA-402 sanctioned unit for `mode="unit"`, for example `kilogram`, `milliliter`, `day`.
+   * An unsupported unit (such as `milligram`) is shown as a plain suffix instead of failing.
+   */
+  readonly unit: import("@angular/core").InputSignal<string>;
+  /** Text before the number, for example `~ `. */
+  readonly prefix: import("@angular/core").InputSignal<string>;
+  /** Text after the number, for example ` kg`. */
+  readonly suffix: import("@angular/core").InputSignal<string>;
+  readonly locale: import("@angular/core").InputSignal<string | undefined>;
+  /** Default: the Intl default for the mode (0 for decimal, 2 for most currencies). */
+  readonly minFractionDigits: import("@angular/core").InputSignal<number | undefined>;
+  /** Default: the Intl default for the mode (3 for decimal, 2 for most currencies). */
+  readonly maxFractionDigits: import("@angular/core").InputSignal<number | undefined>;
+  readonly useGrouping: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly step: import("@angular/core").InputSignal<number>;
+  readonly min: import("@angular/core").InputSignal<number | undefined>;
+  readonly max: import("@angular/core").InputSignal<number | undefined>;
+  readonly showButtons: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly placeholder: import("@angular/core").InputSignal<string | null>;
+  readonly ariaLabel: import("@angular/core").InputSignal<string | null>;
+  readonly inputId: import("@angular/core").InputSignal<string>;
+  readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly readonly: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly required: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly invalid: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly touched: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly name: import("@angular/core").InputSignal<string>;
+  readonly touch: import("@angular/core").OutputEmitterRef<void>;
+  private readonly input;
+  private readonly focused;
+  /** Unit text appended when Intl does not support `unit`. */
+  private readonly fallbackUnit;
+  private readonly formatter;
+  /** Decimal separator of the locale (`.` or `,`). */
+  private readonly decimal;
+  protected readonly formatted: import("@angular/core").Signal<string>;
+  /** Plain digits while editing, formatted text otherwise. */
+  protected readonly text: import("@angular/core").WritableSignal<string>;
+  private plain;
+  /** Reads typed text with either separator; ignores grouping, currency and unit symbols. */
+  parse(text: string): number | null | undefined;
+  private clamp;
+  protected onFocus(): void;
+  protected onBlur(): void;
+  private commit;
+  protected canStep(direction: 1 | -1): boolean;
+  stepBy(direction: number): void;
+  protected onKeydown(event: KeyboardEvent): void;
+  focus(options?: FocusOptions): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<StarInputNumber, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<StarInputNumber, "star-input-number", never, {
+    "value": {
+      "alias": "value";
+      "required": false;
+      "isSignal": true;
+    };
+    "mode": {
+      "alias": "mode";
+      "required": false;
+      "isSignal": true;
+    };
+    "currency": {
+      "alias": "currency";
+      "required": false;
+      "isSignal": true;
+    };
+    "unit": {
+      "alias": "unit";
+      "required": false;
+      "isSignal": true;
+    };
+    "prefix": {
+      "alias": "prefix";
+      "required": false;
+      "isSignal": true;
+    };
+    "suffix": {
+      "alias": "suffix";
+      "required": false;
+      "isSignal": true;
+    };
+    "locale": {
+      "alias": "locale";
+      "required": false;
+      "isSignal": true;
+    };
+    "minFractionDigits": {
+      "alias": "minFractionDigits";
+      "required": false;
+      "isSignal": true;
+    };
+    "maxFractionDigits": {
+      "alias": "maxFractionDigits";
+      "required": false;
+      "isSignal": true;
+    };
+    "useGrouping": {
+      "alias": "useGrouping";
+      "required": false;
+      "isSignal": true;
+    };
+    "step": {
+      "alias": "step";
+      "required": false;
+      "isSignal": true;
+    };
+    "min": {
+      "alias": "min";
+      "required": false;
+      "isSignal": true;
+    };
+    "max": {
+      "alias": "max";
+      "required": false;
+      "isSignal": true;
+    };
+    "showButtons": {
+      "alias": "showButtons";
+      "required": false;
+      "isSignal": true;
+    };
+    "placeholder": {
+      "alias": "placeholder";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "inputId": {
+      "alias": "inputId";
+      "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;
+    };
+    "name": {
+      "alias": "name";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "value": "valueChange";
+    "touch": "touch";
+  }, never, never, true, never>;
+}

package/types/star-ng-ui-input-otp.d.ts

@@ -0,0 +1,86 @@
+import { FormValueControl } from "@angular/forms/signals";
+import * as i0 from "@angular/core";
+/**
+ * One-time code field (PrimeNG `p-inputotp`): one box per character, auto-advance, Backspace
+ * goes back, Arrow keys move, pasting a full code fills every box, `autocomplete="one-time-code"`
+ * on the first box so phones offer SMS codes.
+ *
+ * `<star-input-otp [length]="6" integerOnly [formField]="form.code" (completed)="verify($event)" />`
+ */
+export declare class StarInputOtp implements FormValueControl<string> {
+  protected readonly text: import("@star-ng/ui/core").StarUiText;
+  readonly value: import("@angular/core").ModelSignal<string>;
+  readonly length: import("@angular/core").InputSignal<number>;
+  readonly integerOnly: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Hides characters like a password. */
+  readonly mask: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly ariaLabel: import("@angular/core").InputSignal<string | null>;
+  readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly readonly: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly invalid: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly touched: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly touch: import("@angular/core").OutputEmitterRef<void>;
+  readonly completed: import("@angular/core").OutputEmitterRef<string>;
+  private readonly boxes;
+  protected readonly slots: import("@angular/core").Signal<number[]>;
+  protected readonly chars: import("@angular/core").Signal<string[]>;
+  private allowed;
+  private setChar;
+  private focusBox;
+  protected onInput(event: Event, index: number): void;
+  protected onKeydown(event: KeyboardEvent, index: number): void;
+  protected onPaste(event: ClipboardEvent, index: number): void;
+  focus(): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<StarInputOtp, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<StarInputOtp, "star-input-otp", never, {
+    "value": {
+      "alias": "value";
+      "required": false;
+      "isSignal": true;
+    };
+    "length": {
+      "alias": "length";
+      "required": false;
+      "isSignal": true;
+    };
+    "integerOnly": {
+      "alias": "integerOnly";
+      "required": false;
+      "isSignal": true;
+    };
+    "mask": {
+      "alias": "mask";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "disabled": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
+    "readonly": {
+      "alias": "readonly";
+      "required": false;
+      "isSignal": true;
+    };
+    "invalid": {
+      "alias": "invalid";
+      "required": false;
+      "isSignal": true;
+    };
+    "touched": {
+      "alias": "touched";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "value": "valueChange";
+    "touch": "touch";
+    "completed": "completed";
+  }, never, never, true, never>;
+}