@ng-native/components 0.0.1 → 0.1.0

package/dist/text-input.d.ts

@@ -0,0 +1,168 @@
+import { type SimpleChanges } from '@angular/core';
+import type { NativeSyntheticEvent } from '@ng-native/fabric';
+import type { TextInputChangePayload } from './events.ts';
+import { ViewBase } from './view-base.ts';
+import * as i0 from "@angular/core";
+export type KeyboardType = 'default' | 'number-pad' | 'decimal-pad' | 'numeric' | 'email-address' | 'phone-pad' | 'url' | 'ascii-capable' | 'numbers-and-punctuation' | 'name-phone-pad' | 'twitter' | 'web-search' | 'visible-password';
+export type ReturnKeyType = 'done' | 'go' | 'next' | 'search' | 'send' | 'none' | 'previous' | 'default' | 'emergency-call' | 'google' | 'join' | 'route' | 'yahoo';
+export type SubmitBehavior = 'submit' | 'blurAndSubmit' | 'newline';
+/**
+ * A text field, wired for signal forms. Commits as `TextInput`, single or multi line by prop.
+ *
+ * `value` is a `model()`, which is all `FormValueControl<string>` requires, so binding it into a
+ * form is `<text-input [formField]="f.name" />` with no adapter class. The rest of the contract is
+ * declared too, because Signal Forms only writes to inputs of those names: `disabled` and
+ * `readonly` turn `editable` off, `invalid` and `touched` come out as `data-invalid` and
+ * `data-touched` for a stylesheet, and `touch` fires from the native blur - there is no DOM one
+ * for the form to hear instead. `(changeText)` carries
+ * the new string alone, as RN's `onChangeText` does; the raw `(change)`, `(focus)`, `(blur)`,
+ * `(submitEditing)`, `(endEditing)`, `(selectionChange)`, `(keyPress)`, `(contentSizeChange)`
+ * and `(scroll)` are element events typed in `events.ts`.
+ *
+ * The interesting part is the echo. A native text field owns state the user is actively
+ * changing, so JS and native disagree constantly. RN's protocol: native reports an `eventCount`
+ * with every change, JS passes the most recent one back as a prop, and native ignores a `text`
+ * update whose count is stale, meaning the user has typed since. Without it, a controlled input
+ * fights the cursor and drops characters under fast typing.
+ *
+ * The other direction is native holding text the app does not: a value set from code after the
+ * user has typed, or a keystroke the app refused or rewrote. It is controlled as RN's field is -
+ * bind `value` and the app's value is what the field shows - so once each pass has rendered, the
+ * field compares the model with the text native last reported and sends the difference as the
+ * `setTextAndSelection` command. See `ControlledModel` for how a refusal reaches the model.
+ * A value set that way is also measured again, since Fabric sizes the field from native state
+ * that takes the new text only after measuring it: a composer cleared after sending shrinks.
+ */
+export declare class TextInput extends ViewBase {
+    readonly value: import("@angular/core").ModelSignal<string>;
+    /** The new text alone, on every native change. */
+    readonly changeText: import("@angular/core").OutputEmitterRef<string>;
+    /** Focus left the field. What Signal Forms marks a field touched from. */
+    readonly touch: import("@angular/core").OutputEmitterRef<void>;
+    /** Refuse input and announce as disabled. Wins over `editable`. */
+    readonly disabled: import("@angular/core").InputSignalWithTransform<boolean | undefined, unknown>;
+    /** Refuse input, though still announced as enabled. Wins over `editable`. */
+    readonly readonly: import("@angular/core").InputSignalWithTransform<boolean | undefined, unknown>;
+    /** Published as `data-invalid`; nothing native reads it. */
+    readonly invalid: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /** Published as `data-touched`; nothing native reads it. */
+    readonly touched: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /** Allow more than one line. */
+    readonly multiline: import("@angular/core").InputSignalWithTransform<boolean | undefined, unknown>;
+    /** iOS: whether a multiline field scrolls its text; off, it grows with it instead. */
+    readonly scrollEnabled: import("@angular/core").InputSignalWithTransform<boolean | undefined, unknown>;
+    /** Set to false to make the field read-only. */
+    readonly editable: import("@angular/core").InputSignalWithTransform<boolean | undefined, unknown>;
+    /** Shown while the field is empty. */
+    readonly placeholder: import("@angular/core").InputSignal<string | undefined>;
+    readonly placeholderTextColor: import("@angular/core").InputSignal<string | undefined>;
+    /** Which keyboard to show. */
+    readonly keyboardType: import("@angular/core").InputSignal<KeyboardType | undefined>;
+    /** The label on the return key. */
+    readonly returnKeyType: import("@angular/core").InputSignal<ReturnKeyType | undefined>;
+    /** What return does. Defaults to `blurAndSubmit` on one line and `newline` on many. */
+    readonly submitBehavior: import("@angular/core").InputSignal<SubmitBehavior | undefined>;
+    /** Hide what is typed, for passwords. */
+    readonly secureTextEntry: import("@angular/core").InputSignalWithTransform<boolean | undefined, unknown>;
+    /** When the keyboard capitalises. Defaults to `sentences`. */
+    readonly autoCapitalize: import("@angular/core").InputSignal<"none" | "sentences" | "words" | "characters" | undefined>;
+    /** Auto-correct while typing. Defaults to true. */
+    readonly autoCorrect: import("@angular/core").InputSignalWithTransform<boolean | undefined, unknown>;
+    /** Focus the field as soon as it mounts. */
+    readonly autoFocus: import("@angular/core").InputSignalWithTransform<boolean | undefined, unknown>;
+    /** The most characters allowed, enforced natively so nothing flickers. */
+    readonly maxLength: import("@angular/core").InputSignalWithTransform<number | undefined, unknown>;
+    /** Android: the height of a multiline field, in lines. */
+    readonly numberOfLines: import("@angular/core").InputSignalWithTransform<number | undefined, unknown>;
+    /** The selected range, or the caret when `start` equals `end`. */
+    readonly selection: import("@angular/core").InputSignal<{
+        readonly start: number;
+        readonly end?: number;
+    } | undefined>;
+    readonly selectionColor: import("@angular/core").InputSignal<string | undefined>;
+    /** Select everything on focus. */
+    readonly selectTextOnFocus: import("@angular/core").InputSignalWithTransform<boolean | undefined, unknown>;
+    readonly caretHidden: import("@angular/core").InputSignalWithTransform<boolean | undefined, unknown>;
+    /** Disable the copy, paste and share menu. */
+    readonly contextMenuHidden: import("@angular/core").InputSignalWithTransform<boolean | undefined, unknown>;
+    readonly textAlign: import("@angular/core").InputSignal<"left" | "right" | "center" | undefined>;
+    readonly allowFontScaling: import("@angular/core").InputSignalWithTransform<boolean | undefined, unknown>;
+    readonly maxFontSizeMultiplier: import("@angular/core").InputSignalWithTransform<number | undefined, unknown>;
+    /** iOS: the `nativeID` of an `<input-accessory-view>` to dock above the keyboard. */
+    readonly inputAccessoryViewID: import("@angular/core").InputSignal<string | undefined>;
+    /** iOS: when the clear button shows. */
+    readonly clearButtonMode: import("@angular/core").InputSignal<"never" | "while-editing" | "unless-editing" | "always" | undefined>;
+    /** iOS: empty the field on focus. */
+    readonly clearTextOnFocus: import("@angular/core").InputSignalWithTransform<boolean | undefined, unknown>;
+    /** iOS: disable the return key while the field is empty. */
+    readonly enablesReturnKeyAutomatically: import("@angular/core").InputSignalWithTransform<boolean | undefined, unknown>;
+    /** iOS: the keyboard's colour scheme. */
+    readonly keyboardAppearance: import("@angular/core").InputSignal<"default" | "light" | "dark" | undefined>;
+    /** iOS: rules for a generated password, in Apple's Password Rules syntax. */
+    readonly passwordRules: import("@angular/core").InputSignal<string | undefined>;
+    /** iOS: underline misspellings. Follows `autoCorrect` by default. */
+    readonly spellCheck: import("@angular/core").InputSignalWithTransform<boolean | undefined, unknown>;
+    /** iOS: add and remove spaces around pasted and deleted words. */
+    readonly smartInsertDelete: import("@angular/core").InputSignalWithTransform<boolean | undefined, unknown>;
+    /** iOS, multiline: turn phone numbers, links and addresses into taps. */
+    readonly dataDetectorTypes: import("@angular/core").InputSignal<string | readonly string[] | undefined>;
+    /** iOS: what the field holds, so the system can autofill it. */
+    readonly textContentType: import("@angular/core").InputSignal<string | undefined>;
+    /** Android: the autofill hint. */
+    readonly autoComplete: import("@angular/core").InputSignal<string | undefined>;
+    /**
+     * Android: the underline colour, transparent by default.
+     *
+     * Not a taste call. Android's `EditText` carries the platform's own underline in its background
+     * drawable, so a field with a border of its own draws two: the app's box, and a grey line
+     * through it that turns blue on focus. React Native's `TextInput` defaults this prop to
+     * `'transparent'` for exactly that reason, and this is that default rather than a new opinion.
+     * Ignored on iOS, where the native field has no such chrome.
+     */
+    readonly underlineColorAndroid: import("@angular/core").InputSignal<string>;
+    /** Android: the caret colour. */
+    readonly cursorColor: import("@angular/core").InputSignal<string | undefined>;
+    /** Android: the selection handle colour. */
+    readonly selectionHandleColor: import("@angular/core").InputSignal<string | undefined>;
+    /** Android: where text sits in a tall field. */
+    readonly textAlignVertical: import("@angular/core").InputSignal<"auto" | "center" | "top" | "bottom" | undefined>;
+    /** Android: whether autofill may fill this field. */
+    readonly importantForAutofill: import("@angular/core").InputSignal<"auto" | "yes" | "no" | "noExcludeDescendants" | "yesExcludeDescendants" | undefined>;
+    /** Android: set to false to focus without raising the keyboard. */
+    readonly showSoftInputOnFocus: import("@angular/core").InputSignalWithTransform<boolean | undefined, unknown>;
+    /** Android: keep the field in place in landscape rather than going full screen. */
+    readonly disableFullscreenUI: import("@angular/core").InputSignalWithTransform<boolean | undefined, unknown>;
+    /** Android: a drawable resource shown at the left of the field. */
+    readonly inlineImageLeft: import("@angular/core").InputSignal<string | undefined>;
+    readonly inlineImagePadding: import("@angular/core").InputSignalWithTransform<number | undefined, unknown>;
+    /** Android: the line-breaking strategy. */
+    readonly textBreakStrategy: import("@angular/core").InputSignal<"simple" | "highQuality" | "balanced" | undefined>;
+    protected readonly eventCount: import("@angular/core").WritableSignal<number>;
+    protected readonly resolvedEditable: import("@angular/core").Signal<boolean | undefined>;
+    protected disabledForAccessibility(): boolean | undefined;
+    protected readonly resolvedSubmitBehavior: import("@angular/core").Signal<SubmitBehavior>;
+    private readonly keyboard;
+    /** What native last reported, so a value set from code can be told from an echo. */
+    private lastNativeText;
+    private readonly control;
+    constructor();
+    ngOnChanges(changes: SimpleChanges): void;
+    /**
+     * With the keyboard already up, keep the field clear of it. UIKit scrolls a field clear as the
+     * keyboard rises, not when focus moves from one field to another beneath it, which is what a
+     * form's Next key does; native form screens keep the new field on screen either way.
+     */
+    protected onFocus(): void;
+    /** Bring the keyboard up on this field. A view command, so it reaches native directly. */
+    focus(): void;
+    blur(): void;
+    /** Empty the field. */
+    clear(): void;
+    /** Move the caret, or select a range. */
+    setSelection(start: number, end?: number): void;
+    /** Whether this field currently has the keyboard. */
+    isFocused(): boolean;
+    protected onNativeChange(event: NativeSyntheticEvent<Partial<TextInputChangePayload>>): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TextInput, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TextInput, "text-input", ["textInput"], { "value": { "alias": "value"; "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; }; "multiline": { "alias": "multiline"; "required": false; "isSignal": true; }; "scrollEnabled": { "alias": "scrollEnabled"; "required": false; "isSignal": true; }; "editable": { "alias": "editable"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "placeholderTextColor": { "alias": "placeholderTextColor"; "required": false; "isSignal": true; }; "keyboardType": { "alias": "keyboardType"; "required": false; "isSignal": true; }; "returnKeyType": { "alias": "returnKeyType"; "required": false; "isSignal": true; }; "submitBehavior": { "alias": "submitBehavior"; "required": false; "isSignal": true; }; "secureTextEntry": { "alias": "secureTextEntry"; "required": false; "isSignal": true; }; "autoCapitalize": { "alias": "autoCapitalize"; "required": false; "isSignal": true; }; "autoCorrect": { "alias": "autoCorrect"; "required": false; "isSignal": true; }; "autoFocus": { "alias": "autoFocus"; "required": false; "isSignal": true; }; "maxLength": { "alias": "maxLength"; "required": false; "isSignal": true; }; "numberOfLines": { "alias": "numberOfLines"; "required": false; "isSignal": true; }; "selection": { "alias": "selection"; "required": false; "isSignal": true; }; "selectionColor": { "alias": "selectionColor"; "required": false; "isSignal": true; }; "selectTextOnFocus": { "alias": "selectTextOnFocus"; "required": false; "isSignal": true; }; "caretHidden": { "alias": "caretHidden"; "required": false; "isSignal": true; }; "contextMenuHidden": { "alias": "contextMenuHidden"; "required": false; "isSignal": true; }; "textAlign": { "alias": "textAlign"; "required": false; "isSignal": true; }; "allowFontScaling": { "alias": "allowFontScaling"; "required": false; "isSignal": true; }; "maxFontSizeMultiplier": { "alias": "maxFontSizeMultiplier"; "required": false; "isSignal": true; }; "inputAccessoryViewID": { "alias": "inputAccessoryViewID"; "required": false; "isSignal": true; }; "clearButtonMode": { "alias": "clearButtonMode"; "required": false; "isSignal": true; }; "clearTextOnFocus": { "alias": "clearTextOnFocus"; "required": false; "isSignal": true; }; "enablesReturnKeyAutomatically": { "alias": "enablesReturnKeyAutomatically"; "required": false; "isSignal": true; }; "keyboardAppearance": { "alias": "keyboardAppearance"; "required": false; "isSignal": true; }; "passwordRules": { "alias": "passwordRules"; "required": false; "isSignal": true; }; "spellCheck": { "alias": "spellCheck"; "required": false; "isSignal": true; }; "smartInsertDelete": { "alias": "smartInsertDelete"; "required": false; "isSignal": true; }; "dataDetectorTypes": { "alias": "dataDetectorTypes"; "required": false; "isSignal": true; }; "textContentType": { "alias": "textContentType"; "required": false; "isSignal": true; }; "autoComplete": { "alias": "autoComplete"; "required": false; "isSignal": true; }; "underlineColorAndroid": { "alias": "underlineColorAndroid"; "required": false; "isSignal": true; }; "cursorColor": { "alias": "cursorColor"; "required": false; "isSignal": true; }; "selectionHandleColor": { "alias": "selectionHandleColor"; "required": false; "isSignal": true; }; "textAlignVertical": { "alias": "textAlignVertical"; "required": false; "isSignal": true; }; "importantForAutofill": { "alias": "importantForAutofill"; "required": false; "isSignal": true; }; "showSoftInputOnFocus": { "alias": "showSoftInputOnFocus"; "required": false; "isSignal": true; }; "disableFullscreenUI": { "alias": "disableFullscreenUI"; "required": false; "isSignal": true; }; "inlineImageLeft": { "alias": "inlineImageLeft"; "required": false; "isSignal": true; }; "inlineImagePadding": { "alias": "inlineImagePadding"; "required": false; "isSignal": true; }; "textBreakStrategy": { "alias": "textBreakStrategy"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "changeText": "changeText"; "touch": "touch"; }, never, never, true, never>;
+}

package/dist/text-input.js

@@ -0,0 +1,312 @@
+import { Directive, afterRenderEffect, booleanAttribute, computed, inject, input, model, output, signal, } from '@angular/core';
+import { Keyboard } from '@ng-native/device';
+import { ControlledModel } from "./controlled-model.js";
+import { optionalBoolean, optionalNumber } from "./transforms.js";
+import { ViewBase } from "./view-base.js";
+import * as i0 from "@angular/core";
+/**
+ * A text field, wired for signal forms. Commits as `TextInput`, single or multi line by prop.
+ *
+ * `value` is a `model()`, which is all `FormValueControl<string>` requires, so binding it into a
+ * form is `<text-input [formField]="f.name" />` with no adapter class. The rest of the contract is
+ * declared too, because Signal Forms only writes to inputs of those names: `disabled` and
+ * `readonly` turn `editable` off, `invalid` and `touched` come out as `data-invalid` and
+ * `data-touched` for a stylesheet, and `touch` fires from the native blur - there is no DOM one
+ * for the form to hear instead. `(changeText)` carries
+ * the new string alone, as RN's `onChangeText` does; the raw `(change)`, `(focus)`, `(blur)`,
+ * `(submitEditing)`, `(endEditing)`, `(selectionChange)`, `(keyPress)`, `(contentSizeChange)`
+ * and `(scroll)` are element events typed in `events.ts`.
+ *
+ * The interesting part is the echo. A native text field owns state the user is actively
+ * changing, so JS and native disagree constantly. RN's protocol: native reports an `eventCount`
+ * with every change, JS passes the most recent one back as a prop, and native ignores a `text`
+ * update whose count is stale, meaning the user has typed since. Without it, a controlled input
+ * fights the cursor and drops characters under fast typing.
+ *
+ * The other direction is native holding text the app does not: a value set from code after the
+ * user has typed, or a keystroke the app refused or rewrote. It is controlled as RN's field is -
+ * bind `value` and the app's value is what the field shows - so once each pass has rendered, the
+ * field compares the model with the text native last reported and sends the difference as the
+ * `setTextAndSelection` command. See `ControlledModel` for how a refusal reaches the model.
+ * A value set that way is also measured again, since Fabric sizes the field from native state
+ * that takes the new text only after measuring it: a composer cleared after sending shrinks.
+ */
+export class TextInput extends ViewBase {
+    value = model('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** The new text alone, on every native change. */
+    changeText = output();
+    /** Focus left the field. What Signal Forms marks a field touched from. */
+    touch = output();
+    /** Refuse input and announce as disabled. Wins over `editable`. */
+    disabled = input(undefined, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    /** Refuse input, though still announced as enabled. Wins over `editable`. */
+    readonly = input(undefined, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    /** Published as `data-invalid`; nothing native reads it. */
+    invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Published as `data-touched`; nothing native reads it. */
+    touched = input(false, { ...(ngDevMode ? { debugName: "touched" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Allow more than one line. */
+    multiline = input(undefined, { ...(ngDevMode ? { debugName: "multiline" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    /** iOS: whether a multiline field scrolls its text; off, it grows with it instead. */
+    scrollEnabled = input(undefined, { ...(ngDevMode ? { debugName: "scrollEnabled" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    /** Set to false to make the field read-only. */
+    editable = input(undefined, { ...(ngDevMode ? { debugName: "editable" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    /** Shown while the field is empty. */
+    placeholder = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    placeholderTextColor = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "placeholderTextColor" }] : /* istanbul ignore next */ []));
+    /** Which keyboard to show. */
+    keyboardType = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "keyboardType" }] : /* istanbul ignore next */ []));
+    /** The label on the return key. */
+    returnKeyType = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "returnKeyType" }] : /* istanbul ignore next */ []));
+    /** What return does. Defaults to `blurAndSubmit` on one line and `newline` on many. */
+    submitBehavior = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "submitBehavior" }] : /* istanbul ignore next */ []));
+    /** Hide what is typed, for passwords. */
+    secureTextEntry = input(undefined, { ...(ngDevMode ? { debugName: "secureTextEntry" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    /** When the keyboard capitalises. Defaults to `sentences`. */
+    autoCapitalize = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "autoCapitalize" }] : /* istanbul ignore next */ []));
+    /** Auto-correct while typing. Defaults to true. */
+    autoCorrect = input(undefined, { ...(ngDevMode ? { debugName: "autoCorrect" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    /** Focus the field as soon as it mounts. */
+    autoFocus = input(undefined, { ...(ngDevMode ? { debugName: "autoFocus" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    /** The most characters allowed, enforced natively so nothing flickers. */
+    maxLength = input(undefined, { ...(ngDevMode ? { debugName: "maxLength" } : /* istanbul ignore next */ {}), transform: optionalNumber });
+    /** Android: the height of a multiline field, in lines. */
+    numberOfLines = input(undefined, { ...(ngDevMode ? { debugName: "numberOfLines" } : /* istanbul ignore next */ {}), transform: optionalNumber });
+    /** The selected range, or the caret when `start` equals `end`. */
+    selection = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "selection" }] : /* istanbul ignore next */ []));
+    selectionColor = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "selectionColor" }] : /* istanbul ignore next */ []));
+    /** Select everything on focus. */
+    selectTextOnFocus = input(undefined, { ...(ngDevMode ? { debugName: "selectTextOnFocus" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    caretHidden = input(undefined, { ...(ngDevMode ? { debugName: "caretHidden" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    /** Disable the copy, paste and share menu. */
+    contextMenuHidden = input(undefined, { ...(ngDevMode ? { debugName: "contextMenuHidden" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    textAlign = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "textAlign" }] : /* istanbul ignore next */ []));
+    allowFontScaling = input(undefined, { ...(ngDevMode ? { debugName: "allowFontScaling" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    maxFontSizeMultiplier = input(undefined, { ...(ngDevMode ? { debugName: "maxFontSizeMultiplier" } : /* istanbul ignore next */ {}), transform: optionalNumber });
+    /** iOS: the `nativeID` of an `<input-accessory-view>` to dock above the keyboard. */
+    inputAccessoryViewID = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "inputAccessoryViewID" }] : /* istanbul ignore next */ []));
+    /** iOS: when the clear button shows. */
+    clearButtonMode = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "clearButtonMode" }] : /* istanbul ignore next */ []));
+    /** iOS: empty the field on focus. */
+    clearTextOnFocus = input(undefined, { ...(ngDevMode ? { debugName: "clearTextOnFocus" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    /** iOS: disable the return key while the field is empty. */
+    enablesReturnKeyAutomatically = input(undefined, { ...(ngDevMode ? { debugName: "enablesReturnKeyAutomatically" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    /** iOS: the keyboard's colour scheme. */
+    keyboardAppearance = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "keyboardAppearance" }] : /* istanbul ignore next */ []));
+    /** iOS: rules for a generated password, in Apple's Password Rules syntax. */
+    passwordRules = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "passwordRules" }] : /* istanbul ignore next */ []));
+    /** iOS: underline misspellings. Follows `autoCorrect` by default. */
+    spellCheck = input(undefined, { ...(ngDevMode ? { debugName: "spellCheck" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    /** iOS: add and remove spaces around pasted and deleted words. */
+    smartInsertDelete = input(undefined, { ...(ngDevMode ? { debugName: "smartInsertDelete" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    /** iOS, multiline: turn phone numbers, links and addresses into taps. */
+    dataDetectorTypes = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "dataDetectorTypes" }] : /* istanbul ignore next */ []));
+    /** iOS: what the field holds, so the system can autofill it. */
+    textContentType = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "textContentType" }] : /* istanbul ignore next */ []));
+    /** Android: the autofill hint. */
+    autoComplete = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "autoComplete" }] : /* istanbul ignore next */ []));
+    /**
+     * Android: the underline colour, transparent by default.
+     *
+     * Not a taste call. Android's `EditText` carries the platform's own underline in its background
+     * drawable, so a field with a border of its own draws two: the app's box, and a grey line
+     * through it that turns blue on focus. React Native's `TextInput` defaults this prop to
+     * `'transparent'` for exactly that reason, and this is that default rather than a new opinion.
+     * Ignored on iOS, where the native field has no such chrome.
+     */
+    underlineColorAndroid = input('transparent', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "underlineColorAndroid" }] : /* istanbul ignore next */ []));
+    /** Android: the caret colour. */
+    cursorColor = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "cursorColor" }] : /* istanbul ignore next */ []));
+    /** Android: the selection handle colour. */
+    selectionHandleColor = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "selectionHandleColor" }] : /* istanbul ignore next */ []));
+    /** Android: where text sits in a tall field. */
+    textAlignVertical = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "textAlignVertical" }] : /* istanbul ignore next */ []));
+    /** Android: whether autofill may fill this field. */
+    importantForAutofill = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "importantForAutofill" }] : /* istanbul ignore next */ []));
+    /** Android: set to false to focus without raising the keyboard. */
+    showSoftInputOnFocus = input(undefined, { ...(ngDevMode ? { debugName: "showSoftInputOnFocus" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    /** Android: keep the field in place in landscape rather than going full screen. */
+    disableFullscreenUI = input(undefined, { ...(ngDevMode ? { debugName: "disableFullscreenUI" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    /** Android: a drawable resource shown at the left of the field. */
+    inlineImageLeft = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "inlineImageLeft" }] : /* istanbul ignore next */ []));
+    inlineImagePadding = input(undefined, { ...(ngDevMode ? { debugName: "inlineImagePadding" } : /* istanbul ignore next */ {}), transform: optionalNumber });
+    /** Android: the line-breaking strategy. */
+    textBreakStrategy = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "textBreakStrategy" }] : /* istanbul ignore next */ []));
+    eventCount = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "eventCount" }] : /* istanbul ignore next */ []));
+    resolvedEditable = computed(() => this.disabled() || this.readonly() ? false : this.editable(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedEditable" }] : /* istanbul ignore next */ []));
+    disabledForAccessibility() {
+        return this.disabled();
+    }
+    resolvedSubmitBehavior = computed(() => {
+        const explicit = this.submitBehavior();
+        // A single-line field has no line to add, so `newline` collapses to the default.
+        if (explicit && (this.multiline() || explicit !== 'newline'))
+            return explicit;
+        return this.multiline() ? 'newline' : 'blurAndSubmit';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedSubmitBehavior" }] : /* istanbul ignore next */ []));
+    keyboard = inject(Keyboard);
+    /** What native last reported, so a value set from code can be told from an echo. */
+    lastNativeText = null;
+    control = new ControlledModel(this.value, 'value');
+    constructor() {
+        super();
+        // RN's layout effect, keyed as RN keys it: the value, and the count every native change
+        // moves on, so a refusal that leaves the value where it was is compared all the same. After
+        // render rather than as an ordinary effect, because an accepted edit only reaches the model
+        // during change detection, and comparing before it has would send the old text back.
+        afterRenderEffect({
+            write: () => {
+                const desired = this.value();
+                const count = this.eventCount();
+                if (this.lastNativeText === null || this.lastNativeText === desired)
+                    return;
+                // The `text` prop alone may be ignored as stale, so send it as a command with the count
+                // native expects.
+                this.lastNativeText = desired;
+                this.engine.dispatchCommand(this.node, 'setTextAndSelection', [count, desired, -1, -1]);
+                // Fabric sized the field for the text it had; see `HostEngine.remeasure`.
+                this.engine.remeasure(this.node);
+            },
+        });
+    }
+    ngOnChanges(changes) {
+        super.ngOnChanges(changes);
+        this.control.noteChanges(changes);
+    }
+    /**
+     * With the keyboard already up, keep the field clear of it. UIKit scrolls a field clear as the
+     * keyboard rises, not when focus moves from one field to another beneath it, which is what a
+     * form's Next key does; native form screens keep the new field on screen either way.
+     */
+    onFocus() {
+        const { height, screenY } = this.keyboard.metrics();
+        if (height > 0 && screenY !== undefined)
+            this.engine.reveal(this.node, { visibleBottom: screenY });
+    }
+    /** Bring the keyboard up on this field. A view command, so it reaches native directly. */
+    focus() {
+        this.engine.dispatchCommand(this.node, 'focus');
+    }
+    blur() {
+        this.engine.dispatchCommand(this.node, 'blur');
+    }
+    /** Empty the field. */
+    clear() {
+        this.value.set('');
+    }
+    /** Move the caret, or select a range. */
+    setSelection(start, end = start) {
+        this.engine.dispatchCommand(this.node, 'setTextAndSelection', [
+            this.eventCount(),
+            null,
+            start,
+            end,
+        ]);
+    }
+    /** Whether this field currently has the keyboard. */
+    isFocused() {
+        return this.engine.focused === this.node;
+    }
+    onNativeChange(event) {
+        const native = event.nativeEvent;
+        const text = native?.text ?? '';
+        // Order matters, as it does in RN: the value first, the count last.
+        this.lastNativeText = text;
+        this.control.propose(text);
+        this.eventCount.set(native?.eventCount ?? this.eventCount() + 1);
+        this.changeText.emit(text);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: TextInput, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.2.0", type: TextInput, isStandalone: true, selector: "text-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, multiline: { classPropertyName: "multiline", publicName: "multiline", isSignal: true, isRequired: false, transformFunction: null }, scrollEnabled: { classPropertyName: "scrollEnabled", publicName: "scrollEnabled", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, placeholderTextColor: { classPropertyName: "placeholderTextColor", publicName: "placeholderTextColor", isSignal: true, isRequired: false, transformFunction: null }, keyboardType: { classPropertyName: "keyboardType", publicName: "keyboardType", isSignal: true, isRequired: false, transformFunction: null }, returnKeyType: { classPropertyName: "returnKeyType", publicName: "returnKeyType", isSignal: true, isRequired: false, transformFunction: null }, submitBehavior: { classPropertyName: "submitBehavior", publicName: "submitBehavior", isSignal: true, isRequired: false, transformFunction: null }, secureTextEntry: { classPropertyName: "secureTextEntry", publicName: "secureTextEntry", isSignal: true, isRequired: false, transformFunction: null }, autoCapitalize: { classPropertyName: "autoCapitalize", publicName: "autoCapitalize", isSignal: true, isRequired: false, transformFunction: null }, autoCorrect: { classPropertyName: "autoCorrect", publicName: "autoCorrect", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, numberOfLines: { classPropertyName: "numberOfLines", publicName: "numberOfLines", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, selectionColor: { classPropertyName: "selectionColor", publicName: "selectionColor", isSignal: true, isRequired: false, transformFunction: null }, selectTextOnFocus: { classPropertyName: "selectTextOnFocus", publicName: "selectTextOnFocus", isSignal: true, isRequired: false, transformFunction: null }, caretHidden: { classPropertyName: "caretHidden", publicName: "caretHidden", isSignal: true, isRequired: false, transformFunction: null }, contextMenuHidden: { classPropertyName: "contextMenuHidden", publicName: "contextMenuHidden", isSignal: true, isRequired: false, transformFunction: null }, textAlign: { classPropertyName: "textAlign", publicName: "textAlign", isSignal: true, isRequired: false, transformFunction: null }, allowFontScaling: { classPropertyName: "allowFontScaling", publicName: "allowFontScaling", isSignal: true, isRequired: false, transformFunction: null }, maxFontSizeMultiplier: { classPropertyName: "maxFontSizeMultiplier", publicName: "maxFontSizeMultiplier", isSignal: true, isRequired: false, transformFunction: null }, inputAccessoryViewID: { classPropertyName: "inputAccessoryViewID", publicName: "inputAccessoryViewID", isSignal: true, isRequired: false, transformFunction: null }, clearButtonMode: { classPropertyName: "clearButtonMode", publicName: "clearButtonMode", isSignal: true, isRequired: false, transformFunction: null }, clearTextOnFocus: { classPropertyName: "clearTextOnFocus", publicName: "clearTextOnFocus", isSignal: true, isRequired: false, transformFunction: null }, enablesReturnKeyAutomatically: { classPropertyName: "enablesReturnKeyAutomatically", publicName: "enablesReturnKeyAutomatically", isSignal: true, isRequired: false, transformFunction: null }, keyboardAppearance: { classPropertyName: "keyboardAppearance", publicName: "keyboardAppearance", isSignal: true, isRequired: false, transformFunction: null }, passwordRules: { classPropertyName: "passwordRules", publicName: "passwordRules", isSignal: true, isRequired: false, transformFunction: null }, spellCheck: { classPropertyName: "spellCheck", publicName: "spellCheck", isSignal: true, isRequired: false, transformFunction: null }, smartInsertDelete: { classPropertyName: "smartInsertDelete", publicName: "smartInsertDelete", isSignal: true, isRequired: false, transformFunction: null }, dataDetectorTypes: { classPropertyName: "dataDetectorTypes", publicName: "dataDetectorTypes", isSignal: true, isRequired: false, transformFunction: null }, textContentType: { classPropertyName: "textContentType", publicName: "textContentType", isSignal: true, isRequired: false, transformFunction: null }, autoComplete: { classPropertyName: "autoComplete", publicName: "autoComplete", isSignal: true, isRequired: false, transformFunction: null }, underlineColorAndroid: { classPropertyName: "underlineColorAndroid", publicName: "underlineColorAndroid", isSignal: true, isRequired: false, transformFunction: null }, cursorColor: { classPropertyName: "cursorColor", publicName: "cursorColor", isSignal: true, isRequired: false, transformFunction: null }, selectionHandleColor: { classPropertyName: "selectionHandleColor", publicName: "selectionHandleColor", isSignal: true, isRequired: false, transformFunction: null }, textAlignVertical: { classPropertyName: "textAlignVertical", publicName: "textAlignVertical", isSignal: true, isRequired: false, transformFunction: null }, importantForAutofill: { classPropertyName: "importantForAutofill", publicName: "importantForAutofill", isSignal: true, isRequired: false, transformFunction: null }, showSoftInputOnFocus: { classPropertyName: "showSoftInputOnFocus", publicName: "showSoftInputOnFocus", isSignal: true, isRequired: false, transformFunction: null }, disableFullscreenUI: { classPropertyName: "disableFullscreenUI", publicName: "disableFullscreenUI", isSignal: true, isRequired: false, transformFunction: null }, inlineImageLeft: { classPropertyName: "inlineImageLeft", publicName: "inlineImageLeft", isSignal: true, isRequired: false, transformFunction: null }, inlineImagePadding: { classPropertyName: "inlineImagePadding", publicName: "inlineImagePadding", isSignal: true, isRequired: false, transformFunction: null }, textBreakStrategy: { classPropertyName: "textBreakStrategy", publicName: "textBreakStrategy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", changeText: "changeText", touch: "touch" }, host: { listeners: { "blur": "touch.emit()", "focus": "onFocus()", "change": "onNativeChange($event)" }, properties: { "text": "value()", "mostRecentEventCount": "eventCount()", "multiline": "multiline()", "scrollEnabled": "scrollEnabled()", "editable": "resolvedEditable()", "accessibilityState": "accessibilityStateProp()", "attr.data-disabled": "disabled() ? '' : null", "attr.data-invalid": "invalid() ? '' : null", "attr.data-touched": "touched() ? '' : null", "placeholder": "placeholder()", "placeholderTextColor": "placeholderTextColor()", "keyboardType": "keyboardType()", "returnKeyType": "returnKeyType()", "submitBehavior": "resolvedSubmitBehavior()", "secureTextEntry": "secureTextEntry()", "autoCapitalize": "autoCapitalize()", "autoCorrect": "autoCorrect()", "autoFocus": "autoFocus()", "maxLength": "maxLength()", "numberOfLines": "numberOfLines()", "selection": "selection()", "selectionColor": "selectionColor()", "selectTextOnFocus": "selectTextOnFocus()", "caretHidden": "caretHidden()", "contextMenuHidden": "contextMenuHidden()", "textAlign": "textAlign()", "allowFontScaling": "allowFontScaling()", "maxFontSizeMultiplier": "maxFontSizeMultiplier()", "inputAccessoryViewID": "inputAccessoryViewID()", "clearButtonMode": "clearButtonMode()", "clearTextOnFocus": "clearTextOnFocus()", "enablesReturnKeyAutomatically": "enablesReturnKeyAutomatically()", "keyboardAppearance": "keyboardAppearance()", "passwordRules": "passwordRules()", "spellCheck": "spellCheck()", "smartInsertDelete": "smartInsertDelete()", "dataDetectorTypes": "dataDetectorTypes()", "textContentType": "textContentType()", "autoComplete": "autoComplete()", "underlineColorAndroid": "underlineColorAndroid()", "cursorColor": "cursorColor()", "selectionHandleColor": "selectionHandleColor()", "textAlignVertical": "textAlignVertical()", "importantForAutofill": "importantForAutofill()", "showSoftInputOnFocus": "showSoftInputOnFocus()", "disableFullscreenUI": "disableFullscreenUI()", "inlineImageLeft": "inlineImageLeft()", "inlineImagePadding": "inlineImagePadding()", "textBreakStrategy": "textBreakStrategy()" } }, exportAs: ["textInput"], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: TextInput, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'text-input',
+                    exportAs: 'textInput',
+                    host: {
+                        '[text]': 'value()',
+                        '[mostRecentEventCount]': 'eventCount()',
+                        '[multiline]': 'multiline()',
+                        '[scrollEnabled]': 'scrollEnabled()',
+                        '[editable]': 'resolvedEditable()',
+                        // `disabled` is an input of ours, so it cannot reach `ngOnChanges` on the base; this is
+                        // the one binding that keeps the announced state in step with it.
+                        '[accessibilityState]': 'accessibilityStateProp()',
+                        '[attr.data-disabled]': "disabled() ? '' : null",
+                        '[attr.data-invalid]': "invalid() ? '' : null",
+                        '[attr.data-touched]': "touched() ? '' : null",
+                        '(blur)': 'touch.emit()',
+                        '(focus)': 'onFocus()',
+                        '[placeholder]': 'placeholder()',
+                        '[placeholderTextColor]': 'placeholderTextColor()',
+                        '[keyboardType]': 'keyboardType()',
+                        '[returnKeyType]': 'returnKeyType()',
+                        '[submitBehavior]': 'resolvedSubmitBehavior()',
+                        '[secureTextEntry]': 'secureTextEntry()',
+                        '[autoCapitalize]': 'autoCapitalize()',
+                        '[autoCorrect]': 'autoCorrect()',
+                        '[autoFocus]': 'autoFocus()',
+                        '[maxLength]': 'maxLength()',
+                        '[numberOfLines]': 'numberOfLines()',
+                        '[selection]': 'selection()',
+                        '[selectionColor]': 'selectionColor()',
+                        '[selectTextOnFocus]': 'selectTextOnFocus()',
+                        '[caretHidden]': 'caretHidden()',
+                        '[contextMenuHidden]': 'contextMenuHidden()',
+                        '[textAlign]': 'textAlign()',
+                        '[allowFontScaling]': 'allowFontScaling()',
+                        '[maxFontSizeMultiplier]': 'maxFontSizeMultiplier()',
+                        '[inputAccessoryViewID]': 'inputAccessoryViewID()',
+                        '[clearButtonMode]': 'clearButtonMode()',
+                        '[clearTextOnFocus]': 'clearTextOnFocus()',
+                        '[enablesReturnKeyAutomatically]': 'enablesReturnKeyAutomatically()',
+                        '[keyboardAppearance]': 'keyboardAppearance()',
+                        '[passwordRules]': 'passwordRules()',
+                        '[spellCheck]': 'spellCheck()',
+                        '[smartInsertDelete]': 'smartInsertDelete()',
+                        '[dataDetectorTypes]': 'dataDetectorTypes()',
+                        '[textContentType]': 'textContentType()',
+                        '[autoComplete]': 'autoComplete()',
+                        '[underlineColorAndroid]': 'underlineColorAndroid()',
+                        '[cursorColor]': 'cursorColor()',
+                        '[selectionHandleColor]': 'selectionHandleColor()',
+                        '[textAlignVertical]': 'textAlignVertical()',
+                        '[importantForAutofill]': 'importantForAutofill()',
+                        '[showSoftInputOnFocus]': 'showSoftInputOnFocus()',
+                        '[disableFullscreenUI]': 'disableFullscreenUI()',
+                        '[inlineImageLeft]': 'inlineImageLeft()',
+                        '[inlineImagePadding]': 'inlineImagePadding()',
+                        '[textBreakStrategy]': 'textBreakStrategy()',
+                        '(change)': 'onNativeChange($event)',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], changeText: [{ type: i0.Output, args: ["changeText"] }], touch: [{ type: i0.Output, args: ["touch"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], multiline: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiline", required: false }] }], scrollEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollEnabled", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], placeholderTextColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderTextColor", required: false }] }], keyboardType: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyboardType", required: false }] }], returnKeyType: [{ type: i0.Input, args: [{ isSignal: true, alias: "returnKeyType", required: false }] }], submitBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitBehavior", required: false }] }], secureTextEntry: [{ type: i0.Input, args: [{ isSignal: true, alias: "secureTextEntry", required: false }] }], autoCapitalize: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoCapitalize", required: false }] }], autoCorrect: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoCorrect", required: false }] }], autoFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoFocus", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], numberOfLines: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberOfLines", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }], selectionColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionColor", required: false }] }], selectTextOnFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectTextOnFocus", required: false }] }], caretHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "caretHidden", required: false }] }], contextMenuHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "contextMenuHidden", required: false }] }], textAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "textAlign", required: false }] }], allowFontScaling: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowFontScaling", required: false }] }], maxFontSizeMultiplier: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFontSizeMultiplier", required: false }] }], inputAccessoryViewID: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputAccessoryViewID", required: false }] }], clearButtonMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearButtonMode", required: false }] }], clearTextOnFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearTextOnFocus", required: false }] }], enablesReturnKeyAutomatically: [{ type: i0.Input, args: [{ isSignal: true, alias: "enablesReturnKeyAutomatically", required: false }] }], keyboardAppearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyboardAppearance", required: false }] }], passwordRules: [{ type: i0.Input, args: [{ isSignal: true, alias: "passwordRules", required: false }] }], spellCheck: [{ type: i0.Input, args: [{ isSignal: true, alias: "spellCheck", required: false }] }], smartInsertDelete: [{ type: i0.Input, args: [{ isSignal: true, alias: "smartInsertDelete", required: false }] }], dataDetectorTypes: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataDetectorTypes", required: false }] }], textContentType: [{ type: i0.Input, args: [{ isSignal: true, alias: "textContentType", required: false }] }], autoComplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoComplete", required: false }] }], underlineColorAndroid: [{ type: i0.Input, args: [{ isSignal: true, alias: "underlineColorAndroid", required: false }] }], cursorColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "cursorColor", required: false }] }], selectionHandleColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionHandleColor", required: false }] }], textAlignVertical: [{ type: i0.Input, args: [{ isSignal: true, alias: "textAlignVertical", required: false }] }], importantForAutofill: [{ type: i0.Input, args: [{ isSignal: true, alias: "importantForAutofill", required: false }] }], showSoftInputOnFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSoftInputOnFocus", required: false }] }], disableFullscreenUI: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableFullscreenUI", required: false }] }], inlineImageLeft: [{ type: i0.Input, args: [{ isSignal: true, alias: "inlineImageLeft", required: false }] }], inlineImagePadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "inlineImagePadding", required: false }] }], textBreakStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "textBreakStrategy", required: false }] }] } });
+//# sourceMappingURL=text-input.js.map

package/dist/text-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-input.js","sourceRoot":"","sources":["../src/text-input.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  Directive,\n  type SimpleChanges,\n  afterRenderEffect,\n  booleanAttribute,\n  computed,\n  inject,\n  input,\n  model,\n  output,\n  signal,\n} from '@angular/core';\nimport { Keyboard } from '@ng-native/device';\nimport type { NativeSyntheticEvent } from '@ng-native/fabric';\nimport { ControlledModel } from './controlled-model.ts';\nimport type { TextInputChangePayload } from './events.ts';\nimport { optionalBoolean, optionalNumber } from './transforms.ts';\nimport { ViewBase } from './view-base.ts';\n\nexport type KeyboardType =\n  | 'default'\n  | 'number-pad'\n  | 'decimal-pad'\n  | 'numeric'\n  | 'email-address'\n  | 'phone-pad'\n  | 'url'\n  | 'ascii-capable'\n  | 'numbers-and-punctuation'\n  | 'name-phone-pad'\n  | 'twitter'\n  | 'web-search'\n  | 'visible-password';\nexport type ReturnKeyType =\n  | 'done'\n  | 'go'\n  | 'next'\n  | 'search'\n  | 'send'\n  | 'none'\n  | 'previous'\n  | 'default'\n  | 'emergency-call'\n  | 'google'\n  | 'join'\n  | 'route'\n  | 'yahoo';\nexport type SubmitBehavior = 'submit' | 'blurAndSubmit' | 'newline';\n\n/**\n * A text field, wired for signal forms. Commits as `TextInput`, single or multi line by prop.\n *\n * `value` is a `model()`, which is all `FormValueControl<string>` requires, so binding it into a\n * form is `<text-input [formField]=\"f.name\" />` with no adapter class. The rest of the contract is\n * declared too, because Signal Forms only writes to inputs of those names: `disabled` and\n * `readonly` turn `editable` off, `invalid` and `touched` come out as `data-invalid` and\n * `data-touched` for a stylesheet, and `touch` fires from the native blur - there is no DOM one\n * for the form to hear instead. `(changeText)` carries\n * the new string alone, as RN's `onChangeText` does; the raw `(change)`, `(focus)`, `(blur)`,\n * `(submitEditing)`, `(endEditing)`, `(selectionChange)`, `(keyPress)`, `(contentSizeChange)`\n * and `(scroll)` are element events typed in `events.ts`.\n *\n * The interesting part is the echo. A native text field owns state the user is actively\n * changing, so JS and native disagree constantly. RN's protocol: native reports an `eventCount`\n * with every change, JS passes the most recent one back as a prop, and native ignores a `text`\n * update whose count is stale, meaning the user has typed since. Without it, a controlled input\n * fights the cursor and drops characters under fast typing.\n *\n * The other direction is native holding text the app does not: a value set from code after the\n * user has typed, or a keystroke the app refused or rewrote. It is controlled as RN's field is -\n * bind `value` and the app's value is what the field shows - so once each pass has rendered, the\n * field compares the model with the text native last reported and sends the difference as the\n * `setTextAndSelection` command. See `ControlledModel` for how a refusal reaches the model.\n * A value set that way is also measured again, since Fabric sizes the field from native state\n * that takes the new text only after measuring it: a composer cleared after sending shrinks.\n */\n@Directive({\n  selector: 'text-input',\n  exportAs: 'textInput',\n  host: {\n    '[text]': 'value()',\n    '[mostRecentEventCount]': 'eventCount()',\n    '[multiline]': 'multiline()',\n    '[scrollEnabled]': 'scrollEnabled()',\n    '[editable]': 'resolvedEditable()',\n    // `disabled` is an input of ours, so it cannot reach `ngOnChanges` on the base; this is\n    // the one binding that keeps the announced state in step with it.\n    '[accessibilityState]': 'accessibilityStateProp()',\n    '[attr.data-disabled]': \"disabled() ? '' : null\",\n    '[attr.data-invalid]': \"invalid() ? '' : null\",\n    '[attr.data-touched]': \"touched() ? '' : null\",\n    '(blur)': 'touch.emit()',\n    '(focus)': 'onFocus()',\n    '[placeholder]': 'placeholder()',\n    '[placeholderTextColor]': 'placeholderTextColor()',\n    '[keyboardType]': 'keyboardType()',\n    '[returnKeyType]': 'returnKeyType()',\n    '[submitBehavior]': 'resolvedSubmitBehavior()',\n    '[secureTextEntry]': 'secureTextEntry()',\n    '[autoCapitalize]': 'autoCapitalize()',\n    '[autoCorrect]': 'autoCorrect()',\n    '[autoFocus]': 'autoFocus()',\n    '[maxLength]': 'maxLength()',\n    '[numberOfLines]': 'numberOfLines()',\n    '[selection]': 'selection()',\n    '[selectionColor]': 'selectionColor()',\n    '[selectTextOnFocus]': 'selectTextOnFocus()',\n    '[caretHidden]': 'caretHidden()',\n    '[contextMenuHidden]': 'contextMenuHidden()',\n    '[textAlign]': 'textAlign()',\n    '[allowFontScaling]': 'allowFontScaling()',\n    '[maxFontSizeMultiplier]': 'maxFontSizeMultiplier()',\n    '[inputAccessoryViewID]': 'inputAccessoryViewID()',\n    '[clearButtonMode]': 'clearButtonMode()',\n    '[clearTextOnFocus]': 'clearTextOnFocus()',\n    '[enablesReturnKeyAutomatically]': 'enablesReturnKeyAutomatically()',\n    '[keyboardAppearance]': 'keyboardAppearance()',\n    '[passwordRules]': 'passwordRules()',\n    '[spellCheck]': 'spellCheck()',\n    '[smartInsertDelete]': 'smartInsertDelete()',\n    '[dataDetectorTypes]': 'dataDetectorTypes()',\n    '[textContentType]': 'textContentType()',\n    '[autoComplete]': 'autoComplete()',\n    '[underlineColorAndroid]': 'underlineColorAndroid()',\n    '[cursorColor]': 'cursorColor()',\n    '[selectionHandleColor]': 'selectionHandleColor()',\n    '[textAlignVertical]': 'textAlignVertical()',\n    '[importantForAutofill]': 'importantForAutofill()',\n    '[showSoftInputOnFocus]': 'showSoftInputOnFocus()',\n    '[disableFullscreenUI]': 'disableFullscreenUI()',\n    '[inlineImageLeft]': 'inlineImageLeft()',\n    '[inlineImagePadding]': 'inlineImagePadding()',\n    '[textBreakStrategy]': 'textBreakStrategy()',\n    '(change)': 'onNativeChange($event)',\n  },\n})\nexport class TextInput extends ViewBase {\n  readonly value = model<string>('');\n  /** The new text alone, on every native change. */\n  readonly changeText = output<string>();\n  /** Focus left the field. What Signal Forms marks a field touched from. */\n  readonly touch = output<void>();\n\n  /** Refuse input and announce as disabled. Wins over `editable`. */\n  readonly disabled = input(undefined, { transform: optionalBoolean });\n  /** Refuse input, though still announced as enabled. Wins over `editable`. */\n  readonly readonly = input(undefined, { transform: optionalBoolean });\n  /** Published as `data-invalid`; nothing native reads it. */\n  readonly invalid = input(false, { transform: booleanAttribute });\n  /** Published as `data-touched`; nothing native reads it. */\n  readonly touched = input(false, { transform: booleanAttribute });\n\n  /** Allow more than one line. */\n  readonly multiline = input(undefined, { transform: optionalBoolean });\n  /** iOS: whether a multiline field scrolls its text; off, it grows with it instead. */\n  readonly scrollEnabled = input(undefined, { transform: optionalBoolean });\n  /** Set to false to make the field read-only. */\n  readonly editable = input(undefined, { transform: optionalBoolean });\n  /** Shown while the field is empty. */\n  readonly placeholder = input<string>();\n  readonly placeholderTextColor = input<string>();\n  /** Which keyboard to show. */\n  readonly keyboardType = input<KeyboardType>();\n  /** The label on the return key. */\n  readonly returnKeyType = input<ReturnKeyType>();\n  /** What return does. Defaults to `blurAndSubmit` on one line and `newline` on many. */\n  readonly submitBehavior = input<SubmitBehavior>();\n  /** Hide what is typed, for passwords. */\n  readonly secureTextEntry = input(undefined, { transform: optionalBoolean });\n  /** When the keyboard capitalises. Defaults to `sentences`. */\n  readonly autoCapitalize = input<'none' | 'sentences' | 'words' | 'characters'>();\n  /** Auto-correct while typing. Defaults to true. */\n  readonly autoCorrect = input(undefined, { transform: optionalBoolean });\n  /** Focus the field as soon as it mounts. */\n  readonly autoFocus = input(undefined, { transform: optionalBoolean });\n  /** The most characters allowed, enforced natively so nothing flickers. */\n  readonly maxLength = input(undefined, { transform: optionalNumber });\n  /** Android: the height of a multiline field, in lines. */\n  readonly numberOfLines = input(undefined, { transform: optionalNumber });\n  /** The selected range, or the caret when `start` equals `end`. */\n  readonly selection = input<{ readonly start: number; readonly end?: number }>();\n  readonly selectionColor = input<string>();\n  /** Select everything on focus. */\n  readonly selectTextOnFocus = input(undefined, { transform: optionalBoolean });\n  readonly caretHidden = input(undefined, { transform: optionalBoolean });\n  /** Disable the copy, paste and share menu. */\n  readonly contextMenuHidden = input(undefined, { transform: optionalBoolean });\n  readonly textAlign = input<'left' | 'center' | 'right'>();\n  readonly allowFontScaling = input(undefined, { transform: optionalBoolean });\n  readonly maxFontSizeMultiplier = input(undefined, { transform: optionalNumber });\n  /** iOS: the `nativeID` of an `<input-accessory-view>` to dock above the keyboard. */\n  readonly inputAccessoryViewID = input<string>();\n  /** iOS: when the clear button shows. */\n  readonly clearButtonMode = input<'never' | 'while-editing' | 'unless-editing' | 'always'>();\n  /** iOS: empty the field on focus. */\n  readonly clearTextOnFocus = input(undefined, { transform: optionalBoolean });\n  /** iOS: disable the return key while the field is empty. */\n  readonly enablesReturnKeyAutomatically = input(undefined, { transform: optionalBoolean });\n  /** iOS: the keyboard's colour scheme. */\n  readonly keyboardAppearance = input<'default' | 'light' | 'dark'>();\n  /** iOS: rules for a generated password, in Apple's Password Rules syntax. */\n  readonly passwordRules = input<string>();\n  /** iOS: underline misspellings. Follows `autoCorrect` by default. */\n  readonly spellCheck = input(undefined, { transform: optionalBoolean });\n  /** iOS: add and remove spaces around pasted and deleted words. */\n  readonly smartInsertDelete = input(undefined, { transform: optionalBoolean });\n  /** iOS, multiline: turn phone numbers, links and addresses into taps. */\n  readonly dataDetectorTypes = input<string | readonly string[]>();\n  /** iOS: what the field holds, so the system can autofill it. */\n  readonly textContentType = input<string>();\n  /** Android: the autofill hint. */\n  readonly autoComplete = input<string>();\n  /**\n   * Android: the underline colour, transparent by default.\n   *\n   * Not a taste call. Android's `EditText` carries the platform's own underline in its background\n   * drawable, so a field with a border of its own draws two: the app's box, and a grey line\n   * through it that turns blue on focus. React Native's `TextInput` defaults this prop to\n   * `'transparent'` for exactly that reason, and this is that default rather than a new opinion.\n   * Ignored on iOS, where the native field has no such chrome.\n   */\n  readonly underlineColorAndroid = input<string>('transparent');\n  /** Android: the caret colour. */\n  readonly cursorColor = input<string>();\n  /** Android: the selection handle colour. */\n  readonly selectionHandleColor = input<string>();\n  /** Android: where text sits in a tall field. */\n  readonly textAlignVertical = input<'auto' | 'top' | 'bottom' | 'center'>();\n  /** Android: whether autofill may fill this field. */\n  readonly importantForAutofill = input<\n    'auto' | 'no' | 'noExcludeDescendants' | 'yes' | 'yesExcludeDescendants'\n  >();\n  /** Android: set to false to focus without raising the keyboard. */\n  readonly showSoftInputOnFocus = input(undefined, { transform: optionalBoolean });\n  /** Android: keep the field in place in landscape rather than going full screen. */\n  readonly disableFullscreenUI = input(undefined, { transform: optionalBoolean });\n  /** Android: a drawable resource shown at the left of the field. */\n  readonly inlineImageLeft = input<string>();\n  readonly inlineImagePadding = input(undefined, { transform: optionalNumber });\n  /** Android: the line-breaking strategy. */\n  readonly textBreakStrategy = input<'simple' | 'highQuality' | 'balanced'>();\n\n  protected readonly eventCount = signal(0);\n\n  protected readonly resolvedEditable = computed(() =>\n    this.disabled() || this.readonly() ? false : this.editable(),\n  );\n\n  protected override disabledForAccessibility(): boolean | undefined {\n    return this.disabled();\n  }\n\n  protected readonly resolvedSubmitBehavior = computed(() => {\n    const explicit = this.submitBehavior();\n    // A single-line field has no line to add, so `newline` collapses to the default.\n    if (explicit && (this.multiline() || explicit !== 'newline')) return explicit;\n    return this.multiline() ? 'newline' : 'blurAndSubmit';\n  });\n\n  private readonly keyboard = inject(Keyboard);\n  /** What native last reported, so a value set from code can be told from an echo. */\n  private lastNativeText: string | null = null;\n  private readonly control = new ControlledModel(this.value, 'value');\n\n  constructor() {\n    super();\n    // RN's layout effect, keyed as RN keys it: the value, and the count every native change\n    // moves on, so a refusal that leaves the value where it was is compared all the same. After\n    // render rather than as an ordinary effect, because an accepted edit only reaches the model\n    // during change detection, and comparing before it has would send the old text back.\n    afterRenderEffect({\n      write: () => {\n        const desired = this.value();\n        const count = this.eventCount();\n        if (this.lastNativeText === null || this.lastNativeText === desired) return;\n        // The `text` prop alone may be ignored as stale, so send it as a command with the count\n        // native expects.\n        this.lastNativeText = desired;\n        this.engine.dispatchCommand(this.node, 'setTextAndSelection', [count, desired, -1, -1]);\n        // Fabric sized the field for the text it had; see `HostEngine.remeasure`.\n        this.engine.remeasure(this.node);\n      },\n    });\n  }\n\n  override ngOnChanges(changes: SimpleChanges): void {\n    super.ngOnChanges(changes);\n    this.control.noteChanges(changes);\n  }\n\n  /**\n   * With the keyboard already up, keep the field clear of it. UIKit scrolls a field clear as the\n   * keyboard rises, not when focus moves from one field to another beneath it, which is what a\n   * form's Next key does; native form screens keep the new field on screen either way.\n   */\n  protected onFocus(): void {\n    const { height, screenY } = this.keyboard.metrics();\n    if (height > 0 && screenY !== undefined)\n      this.engine.reveal(this.node, { visibleBottom: screenY });\n  }\n\n  /** Bring the keyboard up on this field. A view command, so it reaches native directly. */\n  focus(): void {\n    this.engine.dispatchCommand(this.node, 'focus');\n  }\n\n  blur(): void {\n    this.engine.dispatchCommand(this.node, 'blur');\n  }\n\n  /** Empty the field. */\n  clear(): void {\n    this.value.set('');\n  }\n\n  /** Move the caret, or select a range. */\n  setSelection(start: number, end = start): void {\n    this.engine.dispatchCommand(this.node, 'setTextAndSelection', [\n      this.eventCount(),\n      null,\n      start,\n      end,\n    ]);\n  }\n\n  /** Whether this field currently has the keyboard. */\n  isFocused(): boolean {\n    return this.engine.focused === this.node;\n  }\n\n  protected onNativeChange(event: NativeSyntheticEvent<Partial<TextInputChangePayload>>): void {\n    const native = event.nativeEvent;\n    const text = native?.text ?? '';\n    // Order matters, as it does in RN: the value first, the count last.\n    this.lastNativeText = text;\n    this.control.propose(text);\n    this.eventCount.set(native?.eventCount ?? this.eventCount() + 1);\n    this.changeText.emit(text);\n  }\n}\n"]}