@symbiote-native/angular 0.8.0 → 2.0.0

package/build/angular/components/text-input.js

@@ -1,659 +0,0 @@
-// TextInput, the Angular lifecycle half. The folds/maps (value->text, the W3C/alias resolution)
-// and the controlled-write predicate live in @symbiote-native/components/state, the render (intrinsic
-// + native-prop mapping) in @symbiote-native/components/view, both shared verbatim with the React and
-// Vue adapters. Here Angular supplies only the lifecycle: renderTextInput picks ONE of two host
-// intrinsics at runtime (symbiote-text-input / symbiote-text-input-multiline) via `@if`/`@else`,
-// each wired through the shared `SymbioteHostPropsDirective` (`[symbioteHostProps]="hostProps"`,
-// `../primitives/shared.ts`) so the flat resolved prop bag doesn't need enumerating as individual
-// `[prop]` bindings; a @ViewChild reading that directive (by its `#host` template ref, across
-// either branch) exposes `.node` — the host BY IDENTITY (so imperative commands hit the engine's
-// WeakMap mirror). A plain field holds the acknowledged event count, ngOnChanges runs the
-// controlled-write command, ngAfterViewInit drives the mount autoFocus, and the class itself is
-// the imperative handle (ITextInputHandle). The Angular twin of React's useRef/useState +
-// useLayoutEffect + useImperativeHandle and Vue's shallowRef + watch(flush:'post') + expose().
-//
-// Two Angular-specific seams. (1) Events: Angular forbids [onX] property bindings, so the host's
-// change/focus/blur + the remaining native events ride the structural (event) channel and route
-// to real @Output() EventEmitters (valueChange is DERIVED from change, never a native event —
-// React/Vue fold both into one onValueChange(text, event) callback, but Angular's EventEmitter
-// only carries one value, so valueChange stays text-only to keep [(value)] banana-in-a-box
-// working; `change` stays a second, separate @Output() for the raw event). The
-// non-function props travel the flat-bag path via the host-props directive. (2) Commit timing:
-// Angular's change detection is async/batched (zoneless), so a native command wired at lifecycle
-// time has no Fabric tag yet; the controlled write + autoFocus defer through whenCommitted, the
-// same gotcha Vue hits. The controlled handshake hinges on commanding native back with the
-// ACKNOWLEDGED event count (setTextAndSelection), never a plain prop re-push — see
-// @symbiote-native/components/state/text-input.
-import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, forwardRef, inject, Input, Output, ViewChild, } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { foldText, eventCountFromChange, textFromChange, shouldCommandText, renderTextInput, resolveAccessibilityProps, resolveTextInputProps, INITIAL_EVENT_COUNT, SELECTION_NONE, } from '@symbiote-native/components';
-import { blurTextInput, dispatchViewCommand, dlog, isSymbioteEvent, isSymbioteNode, setInputBlurred, setInputFocused, whenCommitted, } from '@symbiote-native/engine';
-import { anchorHostStyle, MultilineTextInputHost, SymbioteHostPropsDirective, SymbioteStyleInputDirective, TextInputHost, } from '../primitives';
-import * as i0 from "@angular/core";
-import * as i1 from "../primitives/shared";
-export class TextInput {
-    value;
-    defaultValue;
-    placeholder;
-    placeholderTextColor;
-    editable;
-    keyboardType;
-    secureTextEntry;
-    maxLength;
-    multiline;
-    selection;
-    autoCapitalize;
-    autoCorrect;
-    autoComplete;
-    textContentType;
-    autoFocus;
-    showSoftInputOnFocus;
-    returnKeyType;
-    selectTextOnFocus;
-    scrollEnabled;
-    numberOfLines;
-    textAlign;
-    blurOnSubmit;
-    inputMode;
-    enterKeyHint;
-    readOnly;
-    submitBehavior;
-    cursorColor;
-    selectionColor;
-    selectionHandleColor;
-    underlineColorAndroid;
-    inputAccessoryViewID;
-    style;
-    testID;
-    nativeID;
-    // The event lifecycle as real Angular events: `(valueChange)="onText($event)"`, not
-    // `[onValueChange]="onText"`. `focus`/`blur` collide with this same class's OWN imperative
-    // `focus()`/`blur()` handle methods (ITextInputHandle — the RN ref API a parent calls via
-    // `@ViewChild(TextInput)`), so those two alias their public @Output() binding name back to
-    // `focus`/`blur` while the class member itself is named `focusEvent`/`blurEvent` — the same
-    // `@Output(bindingName) memberName` alias this file already uses for `@Input('aria-label')`.
-    // `value`/`valueChange` names match Switch/Slider exactly, so `[(value)]="text"` (banana-in-a-box)
-    // works here too — see `valueChange`'s single-arg (text-only) signature above.
-    valueChange = new EventEmitter();
-    change = new EventEmitter();
-    focusEvent = new EventEmitter();
-    blurEvent = new EventEmitter();
-    endEditing = new EventEmitter();
-    submitEditing = new EventEmitter();
-    keyPress = new EventEmitter();
-    selectionChange = new EventEmitter();
-    contentSizeChange = new EventEmitter();
-    accessibilityAction = new EventEmitter();
-    accessibilityTap = new EventEmitter();
-    magicTap = new EventEmitter();
-    accessibilityEscape = new EventEmitter();
-    accessible;
-    accessibilityLabel;
-    accessibilityHint;
-    accessibilityRole;
-    accessibilityState;
-    accessibilityValue;
-    accessibilityActions;
-    accessibilityLabelledBy;
-    importantForAccessibility;
-    accessibilityLiveRegion;
-    screenReaderFocusable;
-    accessibilityViewIsModal;
-    accessibilityElementsHidden;
-    accessibilityIgnoresInvertColors;
-    accessibilityLanguage;
-    accessibilityRespondsToUserInteraction;
-    accessibilityShowsLargeContentViewer;
-    accessibilityLargeContentTitle;
-    role;
-    ariaLabel;
-    ariaLabelledBy;
-    ariaLive;
-    ariaHidden;
-    ariaBusy;
-    ariaChecked;
-    ariaDisabled;
-    ariaExpanded;
-    ariaSelected;
-    hostRef;
-    // This component's OWN host — the non-painting anchor `class="..."` at the use site resolves
-    // onto (see anchorHostStyle's doc comment) — NOT `hostRef` above, which targets the real inner
-    // symbiote-text-input(-multiline) one level down.
-    elementRef = inject(ElementRef);
-    // Only setDisabledState() needs this: it mutates `editable` from OUTSIDE Angular's own binding
-    // path (@angular/forms calling in directly), which doesn't itself schedule a tick under zoneless CD.
-    changeDetector = inject(ChangeDetectorRef);
-    // The count native last acknowledged; the controlled write / clear / setSelection echo it so
-    // native's eventLag lands on 0 and the write applies. A plain field (read live by the imperative
-    // handle), the Angular twin of React's useState / Vue's ref.
-    mostRecentEventCount = INITIAL_EVENT_COUNT;
-    // The last text native holds, as far as JS knows. Seeded on the first `value` change (the `text`
-    // prop already carries the mount value down via createNode, so the FIRST controlled value is not
-    // a divergence and must NOT re-command); later divergences flow through setTextAndSelection.
-    lastNativeText;
-    // JS-side focus state, mirrored from the focus/blur events for isFocused(): native exposes no
-    // synchronous focus getter (RN's TextInputState holds the same).
-    focused = false;
-    cancelAutoFocus;
-    // Mirrors SimpleChange.firstChange for the writeValue() path below (@angular/forms' own initial
-    // write, distinct from ngOnChanges' firstChange, which never fires for a forms-driven write).
-    isFirstFormWrite = true;
-    get isMultiline() {
-        return this.multiline === true;
-    }
-    get hostProps() {
-        return renderTextInput({
-            multiline: this.isMultiline,
-            text: foldText(this.value, this.defaultValue),
-            mostRecentEventCount: this.mostRecentEventCount,
-            selection: this.selection,
-            folded: this.foldedNativeProps,
-            passthrough: this.buildPassthrough(),
-        }).props;
-    }
-    ngOnChanges(changes) {
-        const valueChange = changes['value'];
-        if (valueChange === undefined)
-            return;
-        if (valueChange.firstChange) {
-            // The initial value already reached native via createNode's hostProps — seed
-            // lastNativeText instead of re-commanding it (see commitControlledValue's own comment on
-            // why a redundant re-push isn't just wasteful — it can race a keystroke).
-            this.lastNativeText = foldText(this.value, this.defaultValue);
-            return;
-        }
-        this.commitControlledValue();
-    }
-    // ControlValueAccessor — @angular/forms calls these straight into this component, bypassing
-    // template bindings/ngOnChanges entirely. `isFirstFormWrite` mirrors SimpleChange.firstChange:
-    // the initial value already reached native via createNode's hostProps, so it must seed
-    // lastNativeText, not re-command (see commitControlledValue's own comment on why a redundant
-    // re-push isn't just wasteful — it can race a keystroke).
-    writeValue(value) {
-        this.value = value ?? undefined;
-        if (this.isFirstFormWrite) {
-            this.isFirstFormWrite = false;
-            this.lastNativeText = foldText(this.value, this.defaultValue);
-            return;
-        }
-        this.commitControlledValue();
-    }
-    registerOnChange(fn) {
-        this.valueChange.subscribe(fn);
-    }
-    registerOnTouched(fn) {
-        this.blurEvent.subscribe(() => fn());
-    }
-    setDisabledState(isDisabled) {
-        this.editable = !isDisabled;
-        this.changeDetector.markForCheck();
-    }
-    // autoFocus is driven in JS, not as a native prop: once the node is committed, command `focus`
-    // down once (RN does the same via TextInputState.focusInput). Under Angular's async-batched
-    // commit the node has no Fabric tag at ngAfterViewInit, so whenCommitted defers the command to
-    // the commit that assigns the tag; cancelled on destroy so an un-committed pending focus leaks.
-    ngAfterViewInit() {
-        if (this.autoFocus !== true)
-            return;
-        const node = this.hostNode;
-        if (node === undefined)
-            return;
-        dlog('TextInput autoFocus -> focus command');
-        this.cancelAutoFocus = whenCommitted(node, () => dispatchViewCommand(node, 'focus', []));
-    }
-    ngOnDestroy() {
-        this.cancelAutoFocus?.();
-    }
-    handleChange(event) {
-        if (!isSymbioteEvent(event))
-            return;
-        // Event seam: the controlled handshake hinges on the change payload carrying `text`
-        // (+ `eventCount`). iOS and Android Fabric can key these differently, so log the actual shape.
-        dlog(`TextInput change keys=[${Object.keys(event.nativeEvent).join(',')}] ` +
-            `text=${JSON.stringify(event.nativeEvent.text)} count=${JSON.stringify(event.nativeEvent.eventCount)}`);
-        const text = textFromChange(event);
-        if (text !== undefined) {
-            // Record the text first, then the count, so the count never runs ahead of the text it
-            // stands for. The host re-pushes the count on the parent's value-driven CD, never here:
-            // pushing the stale `text` prop now (eventLag 0) would revert the keystroke.
-            this.lastNativeText = text;
-            this.valueChange.emit(text);
-        }
-        const count = eventCountFromChange(event);
-        if (count !== undefined)
-            this.mostRecentEventCount = count;
-        this.change.emit(event);
-    }
-    handleFocus(event) {
-        if (!isSymbioteEvent(event))
-            return;
-        this.focused = true;
-        // Track focus app-wide so Keyboard.dismiss can blur this input without a ref.
-        const node = this.hostNode;
-        if (node !== undefined)
-            setInputFocused(node);
-        this.focusEvent.emit(event);
-    }
-    handleBlur(event) {
-        if (!isSymbioteEvent(event))
-            return;
-        this.focused = false;
-        const node = this.hostNode;
-        if (node !== undefined)
-            setInputBlurred(node);
-        this.blurEvent.emit(event);
-    }
-    // Forward an engine event onto the matching @Output(), narrowing the template's untyped $event
-    // first. Angular blocks [onX] property bindings, so every native event flows through (event).
-    emit(emitter, event) {
-        if (isSymbioteEvent(event))
-            emitter.emit(event);
-    }
-    // The imperative API RN exposes on a TextInput ref; in Angular the component instance IS the
-    // handle (a parent reads it via @ViewChild(TextInput) and calls these). focus/blur drive native
-    // view commands; clear and setSelection reuse setTextAndSelection (the same stale-safe path as a
-    // controlled write) echoing the acknowledged event count.
-    focus() {
-        const node = this.hostNode;
-        if (node !== undefined)
-            dispatchViewCommand(node, 'focus', []);
-    }
-    blur() {
-        // Routes through TextInputState so the app-wide focus tracking clears too.
-        blurTextInput(this.hostNode ?? null);
-    }
-    clear() {
-        const node = this.hostNode;
-        if (node === undefined)
-            return;
-        dispatchViewCommand(node, 'setTextAndSelection', [
-            this.mostRecentEventCount,
-            '',
-            0,
-            0,
-        ]);
-        this.lastNativeText = '';
-    }
-    isFocused() {
-        return this.focused;
-    }
-    setSelection(start, end) {
-        const node = this.hostNode;
-        if (node === undefined)
-            return;
-        const current = this.lastNativeText ?? '';
-        dispatchViewCommand(node, 'setTextAndSelection', [
-            this.mostRecentEventCount,
-            current,
-            start,
-            end,
-        ]);
-    }
-    // Controlled write: when JS-side `value` diverges from what native reported, command the new
-    // text down with the acknowledged count; a plain prop re-push would race the user's keystrokes.
-    // whenCommitted defers it past the async commit so the node's Fabric tag exists; the predicate
-    // narrows `value` to string and makes the call a no-op unless the text diverged.
-    commitControlledValue() {
-        const node = this.hostNode;
-        if (node === undefined)
-            return;
-        const value = this.value;
-        if (!shouldCommandText(this.lastNativeText, value))
-            return;
-        const selStart = this.selection?.start ?? SELECTION_NONE;
-        const selEnd = this.selection?.end ?? this.selection?.start ?? SELECTION_NONE;
-        const count = this.mostRecentEventCount;
-        dlog(`TextInput setTextAndSelection count=${count} text=${JSON.stringify(value)}`);
-        this.lastNativeText = value;
-        whenCommitted(node, () => dispatchViewCommand(node, 'setTextAndSelection', [
-            count,
-            value,
-            selStart,
-            selEnd,
-        ]));
-    }
-    buildPassthrough() {
-        return {
-            ...this.foldedAccessibility,
-            accessible: this.accessible,
-            testID: this.testID,
-            nativeID: this.nativeID,
-            placeholder: this.placeholder,
-            placeholderTextColor: this.placeholderTextColor,
-            maxLength: this.maxLength,
-            secureTextEntry: this.secureTextEntry,
-            autoCapitalize: this.autoCapitalize,
-            autoCorrect: this.autoCorrect,
-            selectTextOnFocus: this.selectTextOnFocus,
-            scrollEnabled: this.scrollEnabled,
-            numberOfLines: this.numberOfLines,
-            textAlign: this.textAlign,
-            inputAccessoryViewID: this.inputAccessoryViewID,
-            style: [anchorHostStyle(this.elementRef), this.style],
-        };
-    }
-    get foldedNativeProps() {
-        return resolveTextInputProps({
-            inputMode: this.inputMode,
-            keyboardType: this.keyboardType,
-            enterKeyHint: this.enterKeyHint,
-            returnKeyType: this.returnKeyType,
-            readOnly: this.readOnly,
-            editable: this.editable,
-            submitBehavior: this.submitBehavior,
-            blurOnSubmit: this.blurOnSubmit,
-            multiline: this.isMultiline,
-            cursorColor: this.cursorColor,
-            selectionColor: this.selectionColor,
-            selectionHandleColor: this.selectionHandleColor,
-            autoComplete: this.autoComplete,
-            textContentType: this.textContentType,
-            showSoftInputOnFocus: this.showSoftInputOnFocus,
-            underlineColorAndroid: this.underlineColorAndroid,
-        });
-    }
-    // Fold the web aria-*/role aliases into the canonical accessibility* props once per render, so
-    // the host node never sees an aria-* key (native ignores them) — the shared transform every
-    // adapter runs. TextInput is its own host element (not a View wrapper), so it folds a11y here.
-    get foldedAccessibility() {
-        return resolveAccessibilityProps({
-            accessibilityLabel: this.accessibilityLabel,
-            accessibilityHint: this.accessibilityHint,
-            accessibilityRole: this.accessibilityRole,
-            accessibilityState: this.accessibilityState,
-            accessibilityValue: this.accessibilityValue,
-            accessibilityActions: this.accessibilityActions,
-            accessibilityLabelledBy: this.accessibilityLabelledBy,
-            importantForAccessibility: this.importantForAccessibility,
-            accessibilityLiveRegion: this.accessibilityLiveRegion,
-            screenReaderFocusable: this.screenReaderFocusable,
-            accessibilityViewIsModal: this.accessibilityViewIsModal,
-            accessibilityElementsHidden: this.accessibilityElementsHidden,
-            accessibilityIgnoresInvertColors: this.accessibilityIgnoresInvertColors,
-            accessibilityLanguage: this.accessibilityLanguage,
-            accessibilityRespondsToUserInteraction: this.accessibilityRespondsToUserInteraction,
-            accessibilityShowsLargeContentViewer: this.accessibilityShowsLargeContentViewer,
-            accessibilityLargeContentTitle: this.accessibilityLargeContentTitle,
-            role: this.role,
-            'aria-label': this.ariaLabel,
-            'aria-labelledby': this.ariaLabelledBy,
-            'aria-live': this.ariaLive,
-            'aria-hidden': this.ariaHidden,
-            'aria-busy': this.ariaBusy,
-            'aria-checked': this.ariaChecked,
-            'aria-disabled': this.ariaDisabled,
-            'aria-expanded': this.ariaExpanded,
-            'aria-selected': this.ariaSelected,
-        });
-    }
-    get hostNode() {
-        const native = this.hostRef?.node;
-        return isSymbioteNode(native) ? native : undefined;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: TextInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: TextInput, isStandalone: true, selector: "TextInput", inputs: { value: "value", defaultValue: "defaultValue", placeholder: "placeholder", placeholderTextColor: "placeholderTextColor", editable: "editable", keyboardType: "keyboardType", secureTextEntry: "secureTextEntry", maxLength: "maxLength", multiline: "multiline", selection: "selection", autoCapitalize: "autoCapitalize", autoCorrect: "autoCorrect", autoComplete: "autoComplete", textContentType: "textContentType", autoFocus: "autoFocus", showSoftInputOnFocus: "showSoftInputOnFocus", returnKeyType: "returnKeyType", selectTextOnFocus: "selectTextOnFocus", scrollEnabled: "scrollEnabled", numberOfLines: "numberOfLines", textAlign: "textAlign", blurOnSubmit: "blurOnSubmit", inputMode: "inputMode", enterKeyHint: "enterKeyHint", readOnly: "readOnly", submitBehavior: "submitBehavior", cursorColor: "cursorColor", selectionColor: "selectionColor", selectionHandleColor: "selectionHandleColor", underlineColorAndroid: "underlineColorAndroid", inputAccessoryViewID: "inputAccessoryViewID", style: "style", testID: "testID", nativeID: "nativeID", accessible: "accessible", accessibilityLabel: "accessibilityLabel", accessibilityHint: "accessibilityHint", accessibilityRole: "accessibilityRole", accessibilityState: "accessibilityState", accessibilityValue: "accessibilityValue", accessibilityActions: "accessibilityActions", accessibilityLabelledBy: "accessibilityLabelledBy", importantForAccessibility: "importantForAccessibility", accessibilityLiveRegion: "accessibilityLiveRegion", screenReaderFocusable: "screenReaderFocusable", accessibilityViewIsModal: "accessibilityViewIsModal", accessibilityElementsHidden: "accessibilityElementsHidden", accessibilityIgnoresInvertColors: "accessibilityIgnoresInvertColors", accessibilityLanguage: "accessibilityLanguage", accessibilityRespondsToUserInteraction: "accessibilityRespondsToUserInteraction", accessibilityShowsLargeContentViewer: "accessibilityShowsLargeContentViewer", accessibilityLargeContentTitle: "accessibilityLargeContentTitle", role: "role", ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledBy: ["aria-labelledby", "ariaLabelledBy"], ariaLive: ["aria-live", "ariaLive"], ariaHidden: ["aria-hidden", "ariaHidden"], ariaBusy: ["aria-busy", "ariaBusy"], ariaChecked: ["aria-checked", "ariaChecked"], ariaDisabled: ["aria-disabled", "ariaDisabled"], ariaExpanded: ["aria-expanded", "ariaExpanded"], ariaSelected: ["aria-selected", "ariaSelected"] }, outputs: { valueChange: "valueChange", change: "change", focusEvent: "focus", blurEvent: "blur", endEditing: "endEditing", submitEditing: "submitEditing", keyPress: "keyPress", selectionChange: "selectionChange", contentSizeChange: "contentSizeChange", accessibilityAction: "accessibilityAction", accessibilityTap: "accessibilityTap", magicTap: "magicTap", accessibilityEscape: "accessibilityEscape" }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => TextInput),
-                multi: true,
-            },
-        ], viewQueries: [{ propertyName: "hostRef", first: true, predicate: ["host"], descendants: true, read: SymbioteHostPropsDirective }], usesOnChanges: true, hostDirectives: [{ directive: i1.SymbioteStyleInputDirective, inputs: ["style", "style"] }], ngImport: i0, template: `
-    @if (isMultiline) {
-      <symbiote-text-input-multiline
-        #host
-        [symbioteHostProps]="hostProps"
-        (change)="handleChange($event)"
-        (focus)="handleFocus($event)"
-        (blur)="handleBlur($event)"
-        (selectionChange)="emit(selectionChange, $event)"
-        (submitEditing)="emit(submitEditing, $event)"
-        (keyPress)="emit(keyPress, $event)"
-        (endEditing)="emit(endEditing, $event)"
-        (contentSizeChange)="emit(contentSizeChange, $event)"
-        (accessibilityAction)="emit(accessibilityAction, $event)"
-        (accessibilityTap)="emit(accessibilityTap, $event)"
-        (magicTap)="emit(magicTap, $event)"
-        (accessibilityEscape)="emit(accessibilityEscape, $event)"
-      ></symbiote-text-input-multiline>
-    } @else {
-      <symbiote-text-input
-        #host
-        [symbioteHostProps]="hostProps"
-        (change)="handleChange($event)"
-        (focus)="handleFocus($event)"
-        (blur)="handleBlur($event)"
-        (selectionChange)="emit(selectionChange, $event)"
-        (submitEditing)="emit(submitEditing, $event)"
-        (keyPress)="emit(keyPress, $event)"
-        (endEditing)="emit(endEditing, $event)"
-        (contentSizeChange)="emit(contentSizeChange, $event)"
-        (accessibilityAction)="emit(accessibilityAction, $event)"
-        (accessibilityTap)="emit(accessibilityTap, $event)"
-        (magicTap)="emit(magicTap, $event)"
-        (accessibilityEscape)="emit(accessibilityEscape, $event)"
-      ></symbiote-text-input>
-    }
-  `, isInline: true, dependencies: [{ kind: "directive", type: SymbioteHostPropsDirective, selector: "[symbioteHostProps]", inputs: ["symbioteHostProps"], exportAs: ["symbioteHost"] }, { kind: "component", type: TextInputHost, selector: "symbiote-text-input" }, { kind: "component", type: MultilineTextInputHost, selector: "symbiote-text-input-multiline" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: TextInput, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'TextInput',
-                    standalone: true,
-                    hostDirectives: [
-                        { directive: SymbioteStyleInputDirective, inputs: ['style'] },
-                    ],
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                    imports: [SymbioteHostPropsDirective, TextInputHost, MultilineTextInputHost],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => TextInput),
-                            multi: true,
-                        },
-                    ],
-                    template: `
-    @if (isMultiline) {
-      <symbiote-text-input-multiline
-        #host
-        [symbioteHostProps]="hostProps"
-        (change)="handleChange($event)"
-        (focus)="handleFocus($event)"
-        (blur)="handleBlur($event)"
-        (selectionChange)="emit(selectionChange, $event)"
-        (submitEditing)="emit(submitEditing, $event)"
-        (keyPress)="emit(keyPress, $event)"
-        (endEditing)="emit(endEditing, $event)"
-        (contentSizeChange)="emit(contentSizeChange, $event)"
-        (accessibilityAction)="emit(accessibilityAction, $event)"
-        (accessibilityTap)="emit(accessibilityTap, $event)"
-        (magicTap)="emit(magicTap, $event)"
-        (accessibilityEscape)="emit(accessibilityEscape, $event)"
-      ></symbiote-text-input-multiline>
-    } @else {
-      <symbiote-text-input
-        #host
-        [symbioteHostProps]="hostProps"
-        (change)="handleChange($event)"
-        (focus)="handleFocus($event)"
-        (blur)="handleBlur($event)"
-        (selectionChange)="emit(selectionChange, $event)"
-        (submitEditing)="emit(submitEditing, $event)"
-        (keyPress)="emit(keyPress, $event)"
-        (endEditing)="emit(endEditing, $event)"
-        (contentSizeChange)="emit(contentSizeChange, $event)"
-        (accessibilityAction)="emit(accessibilityAction, $event)"
-        (accessibilityTap)="emit(accessibilityTap, $event)"
-        (magicTap)="emit(magicTap, $event)"
-        (accessibilityEscape)="emit(accessibilityEscape, $event)"
-      ></symbiote-text-input>
-    }
-  `,
-                }]
-        }], propDecorators: { value: [{
-                type: Input
-            }], defaultValue: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], placeholderTextColor: [{
-                type: Input
-            }], editable: [{
-                type: Input
-            }], keyboardType: [{
-                type: Input
-            }], secureTextEntry: [{
-                type: Input
-            }], maxLength: [{
-                type: Input
-            }], multiline: [{
-                type: Input
-            }], selection: [{
-                type: Input
-            }], autoCapitalize: [{
-                type: Input
-            }], autoCorrect: [{
-                type: Input
-            }], autoComplete: [{
-                type: Input
-            }], textContentType: [{
-                type: Input
-            }], autoFocus: [{
-                type: Input
-            }], showSoftInputOnFocus: [{
-                type: Input
-            }], returnKeyType: [{
-                type: Input
-            }], selectTextOnFocus: [{
-                type: Input
-            }], scrollEnabled: [{
-                type: Input
-            }], numberOfLines: [{
-                type: Input
-            }], textAlign: [{
-                type: Input
-            }], blurOnSubmit: [{
-                type: Input
-            }], inputMode: [{
-                type: Input
-            }], enterKeyHint: [{
-                type: Input
-            }], readOnly: [{
-                type: Input
-            }], submitBehavior: [{
-                type: Input
-            }], cursorColor: [{
-                type: Input
-            }], selectionColor: [{
-                type: Input
-            }], selectionHandleColor: [{
-                type: Input
-            }], underlineColorAndroid: [{
-                type: Input
-            }], inputAccessoryViewID: [{
-                type: Input
-            }], style: [{
-                type: Input
-            }], testID: [{
-                type: Input
-            }], nativeID: [{
-                type: Input
-            }], valueChange: [{
-                type: Output
-            }], change: [{
-                type: Output
-            }], focusEvent: [{
-                type: Output,
-                args: ['focus']
-            }], blurEvent: [{
-                type: Output,
-                args: ['blur']
-            }], endEditing: [{
-                type: Output
-            }], submitEditing: [{
-                type: Output
-            }], keyPress: [{
-                type: Output
-            }], selectionChange: [{
-                type: Output
-            }], contentSizeChange: [{
-                type: Output
-            }], accessibilityAction: [{
-                type: Output
-            }], accessibilityTap: [{
-                type: Output
-            }], magicTap: [{
-                type: Output
-            }], accessibilityEscape: [{
-                type: Output
-            }], accessible: [{
-                type: Input
-            }], accessibilityLabel: [{
-                type: Input
-            }], accessibilityHint: [{
-                type: Input
-            }], accessibilityRole: [{
-                type: Input
-            }], accessibilityState: [{
-                type: Input
-            }], accessibilityValue: [{
-                type: Input
-            }], accessibilityActions: [{
-                type: Input
-            }], accessibilityLabelledBy: [{
-                type: Input
-            }], importantForAccessibility: [{
-                type: Input
-            }], accessibilityLiveRegion: [{
-                type: Input
-            }], screenReaderFocusable: [{
-                type: Input
-            }], accessibilityViewIsModal: [{
-                type: Input
-            }], accessibilityElementsHidden: [{
-                type: Input
-            }], accessibilityIgnoresInvertColors: [{
-                type: Input
-            }], accessibilityLanguage: [{
-                type: Input
-            }], accessibilityRespondsToUserInteraction: [{
-                type: Input
-            }], accessibilityShowsLargeContentViewer: [{
-                type: Input
-            }], accessibilityLargeContentTitle: [{
-                type: Input
-            }], role: [{
-                type: Input
-            }], ariaLabel: [{
-                type: Input,
-                args: ['aria-label']
-            }], ariaLabelledBy: [{
-                type: Input,
-                args: ['aria-labelledby']
-            }], ariaLive: [{
-                type: Input,
-                args: ['aria-live']
-            }], ariaHidden: [{
-                type: Input,
-                args: ['aria-hidden']
-            }], ariaBusy: [{
-                type: Input,
-                args: ['aria-busy']
-            }], ariaChecked: [{
-                type: Input,
-                args: ['aria-checked']
-            }], ariaDisabled: [{
-                type: Input,
-                args: ['aria-disabled']
-            }], ariaExpanded: [{
-                type: Input,
-                args: ['aria-expanded']
-            }], ariaSelected: [{
-                type: Input,
-                args: ['aria-selected']
-            }], hostRef: [{
-                type: ViewChild,
-                args: ['host', { read: SymbioteHostPropsDirective }]
-            }] } });
-//# sourceMappingURL=text-input.js.map