@ng-native/router 0.0.1 → 0.1.0

package/dist/native-search-bar.js

@@ -0,0 +1,132 @@
+/**
+ * The navigation bar's search field: react-native-screens' `RNSSearchBar`, the UISearchController
+ * iOS puts under a large title. Place it in the header's search slot:
+ *
+ * ```html
+ * <native-header title="Properties" [largeTitle]="true">
+ *   <native-header-item type="searchBar">
+ *     <native-search-bar placeholder="Search" [(query)]="query" />
+ *   </native-header-item>
+ * </native-header>
+ * ```
+ *
+ * The text is a two-way `query`: what a list filter wants. Typing updates it, and a query set from
+ * code - a recent search tapped, a suggestion taken - is put in the field, as a controlled text
+ * input's value is. `(search)` is the keyboard's search key, with the text; `(cancel)` the Cancel
+ * button; `(searchFocus)` and `(searchBlur)` the field taking and leaving the keyboard, which is when
+ * a suggestions list comes and goes. `focus()`, `blur()`, `clear()` and `cancelSearch()` do those
+ * from code.
+ *
+ * ponytail: react-native-screens has no scope bar and no search tokens; a scope is a segmented
+ * control under the header, and a token is text.
+ */
+import { Component, DestroyRef, ElementRef, afterRenderEffect, inject, input, model, output, untracked, } from '@angular/core';
+import { HostEngine } from '@ng-native/fabric';
+import { ownHost } from "./own-host.js";
+import { optionalBoolean } from "./transforms.js";
+import * as i0 from "@angular/core";
+export class NativeSearchBar {
+    query = model('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
+    placeholder = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** Scroll the field away with the content, as iOS lists do by default. */
+    hideWhenScrolling = input(undefined, { ...(ngDevMode ? { debugName: "hideWhenScrolling" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    cancelButtonText = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "cancelButtonText" }] : /* istanbul ignore next */ []));
+    /**
+     * Where iOS puts the field. `automatic` lets iOS 26 fold it into a toolbar, which a presented
+     * sheet does not have, so there it shows nowhere; `stacked` keeps it under the title.
+     */
+    placement = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "placement" }] : /* istanbul ignore next */ []));
+    /** iOS 26: whether `automatic` may move the field into the toolbar. */
+    allowToolbarIntegration = input(undefined, { ...(ngDevMode ? { debugName: "allowToolbarIntegration" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    autoCapitalize = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "autoCapitalize" }] : /* istanbul ignore next */ []));
+    /** Dim the content behind the field while it is being typed in. */
+    obscureBackground = input(undefined, { ...(ngDevMode ? { debugName: "obscureBackground" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    /** Hide the navigation bar while the field is being typed in. */
+    hideNavigationBar = input(undefined, { ...(ngDevMode ? { debugName: "hideNavigationBar" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    tintColor = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "tintColor" }] : /* istanbul ignore next */ []));
+    textColor = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "textColor" }] : /* istanbul ignore next */ []));
+    /** The keyboard's search key was pressed, with the text in the field. */
+    search = output();
+    /** The Cancel button was pressed. */
+    cancel = output();
+    searchFocus = output();
+    searchBlur = output();
+    node = inject(ElementRef).nativeElement;
+    engine = this.node.host ?? inject(HostEngine);
+    /** What the field last said it holds, to tell a query set from code from the field's echo. */
+    fieldText = '';
+    constructor() {
+        ownHost(this.node, NativeSearchBar);
+        const listen = (event, handle) => this.engine.setEventListener(this.node, event, (raw) => handle(raw?.nativeEvent ?? {}));
+        const stops = [
+            listen('topSearchButtonPress', ({ text }) => this.search.emit(String(text ?? this.query()))),
+            listen('topCancelButtonPress', () => this.cancel.emit()),
+            listen('topSearchFocus', () => this.searchFocus.emit()),
+            listen('topSearchBlur', () => this.searchBlur.emit()),
+        ];
+        inject(DestroyRef).onDestroy(() => stops.forEach((stop) => stop()));
+        // A query that is not what the field holds was set from code: put it in the field. After the
+        // render, so a query the page starts with reaches a field that has been committed.
+        afterRenderEffect({
+            write: () => {
+                const query = this.query();
+                untracked(() => {
+                    if (query === this.fieldText)
+                        return;
+                    this.fieldText = query;
+                    this.engine.dispatchCommand(this.node, 'setText', [query]);
+                });
+            },
+        });
+    }
+    focus() {
+        this.engine.dispatchCommand(this.node, 'focus');
+    }
+    blur() {
+        this.engine.dispatchCommand(this.node, 'blur');
+    }
+    /** Empty the field, and the query with it. */
+    clear() {
+        this.fieldText = '';
+        this.query.set('');
+        this.engine.dispatchCommand(this.node, 'clearText');
+    }
+    /** Close the search, as the Cancel button does. */
+    cancelSearch() {
+        this.engine.dispatchCommand(this.node, 'cancelSearch');
+    }
+    onNativeText(text) {
+        this.fieldText = text;
+        this.query.set(text);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: NativeSearchBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.0", type: NativeSearchBar, isStandalone: true, selector: "native-search-bar", inputs: { query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hideWhenScrolling: { classPropertyName: "hideWhenScrolling", publicName: "hideWhenScrolling", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonText: { classPropertyName: "cancelButtonText", publicName: "cancelButtonText", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, allowToolbarIntegration: { classPropertyName: "allowToolbarIntegration", publicName: "allowToolbarIntegration", isSignal: true, isRequired: false, transformFunction: null }, autoCapitalize: { classPropertyName: "autoCapitalize", publicName: "autoCapitalize", isSignal: true, isRequired: false, transformFunction: null }, obscureBackground: { classPropertyName: "obscureBackground", publicName: "obscureBackground", isSignal: true, isRequired: false, transformFunction: null }, hideNavigationBar: { classPropertyName: "hideNavigationBar", publicName: "hideNavigationBar", isSignal: true, isRequired: false, transformFunction: null }, tintColor: { classPropertyName: "tintColor", publicName: "tintColor", isSignal: true, isRequired: false, transformFunction: null }, textColor: { classPropertyName: "textColor", publicName: "textColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { query: "queryChange", search: "search", cancel: "cancel", searchFocus: "searchFocus", searchBlur: "searchBlur" }, host: { listeners: { "changeText": "onNativeText($event?.nativeEvent?.text ?? \"\")" }, properties: { "placeholder": "placeholder()", "hideWhenScrolling": "hideWhenScrolling()", "cancelButtonText": "cancelButtonText()", "placement": "placement()", "allowToolbarIntegration": "allowToolbarIntegration()", "autoCapitalize": "autoCapitalize()", "obscureBackground": "obscureBackground() === undefined ? undefined : String(obscureBackground())", "hideNavigationBar": "hideNavigationBar() === undefined ? undefined : String(hideNavigationBar())", "tintColor": "tintColor()", "textColor": "textColor()" } }, ngImport: i0, template: '', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: NativeSearchBar, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'native-search-bar',
+                    template: '',
+                    host: {
+                        '[placeholder]': 'placeholder()',
+                        '[hideWhenScrolling]': 'hideWhenScrolling()',
+                        '[cancelButtonText]': 'cancelButtonText()',
+                        '[placement]': 'placement()',
+                        '[allowToolbarIntegration]': 'allowToolbarIntegration()',
+                        '[autoCapitalize]': 'autoCapitalize()',
+                        '[obscureBackground]': 'obscureBackground() === undefined ? undefined : String(obscureBackground())',
+                        '[hideNavigationBar]': 'hideNavigationBar() === undefined ? undefined : String(hideNavigationBar())',
+                        '[tintColor]': 'tintColor()',
+                        '[textColor]': 'textColor()',
+                        '(changeText)': 'onNativeText($event?.nativeEvent?.text ?? "")',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { query: [{ type: i0.Input, args: [{ isSignal: true, alias: "query", required: false }] }, { type: i0.Output, args: ["queryChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hideWhenScrolling: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideWhenScrolling", required: false }] }], cancelButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelButtonText", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], allowToolbarIntegration: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowToolbarIntegration", required: false }] }], autoCapitalize: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoCapitalize", required: false }] }], obscureBackground: [{ type: i0.Input, args: [{ isSignal: true, alias: "obscureBackground", required: false }] }], hideNavigationBar: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideNavigationBar", required: false }] }], tintColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "tintColor", required: false }] }], textColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "textColor", required: false }] }], search: [{ type: i0.Output, args: ["search"] }], cancel: [{ type: i0.Output, args: ["cancel"] }], searchFocus: [{ type: i0.Output, args: ["searchFocus"] }], searchBlur: [{ type: i0.Output, args: ["searchBlur"] }] } });
+//# sourceMappingURL=native-search-bar.js.map

package/dist/native-search-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"native-search-bar.js","sourceRoot":"","sources":["../src/native-search-bar.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,OAAO,EACL,SAAS,EACT,UAAU,EACV,UAAU,EACV,iBAAiB,EACjB,MAAM,EACN,KAAK,EACL,KAAK,EACL,MAAM,EACN,SAAS,GACV,MAAM,eAAe,CAAC;AACvB,OAAO,EAAmB,UAAU,EAA6B,MAAM,mBAAmB,CAAC;AAC3F,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;;AAyBlD,MAAM,OAAO,eAAe;IACjB,KAAK,GAAG,KAAK,CAAC,EAAE;8EAAC,CAAC;IAClB,WAAW,GAAG,KAAK;+FAAU,CAAC;IACvC,0EAA0E;IACjE,iBAAiB,GAAG,KAAK,CAAC,SAAS,yFAAI,SAAS,EAAE,eAAe,GAAG,CAAC;IACrE,gBAAgB,GAAG,KAAK;oGAAU,CAAC;IAC5C;;;OAGG;IACM,SAAS,GAAG,KAAK;6FAAsB,CAAC;IACjD,uEAAuE;IAC9D,uBAAuB,GAAG,KAAK,CAAC,SAAS,+FAAI,SAAS,EAAE,eAAe,GAAG,CAAC;IAC3E,cAAc,GAAG,KAAK;kGAE5B,CAAC;IACJ,mEAAmE;IAC1D,iBAAiB,GAAG,KAAK,CAAC,SAAS,yFAAI,SAAS,EAAE,eAAe,GAAG,CAAC;IAC9E,iEAAiE;IACxD,iBAAiB,GAAG,KAAK,CAAC,SAAS,yFAAI,SAAS,EAAE,eAAe,GAAG,CAAC;IACrE,SAAS,GAAG,KAAK;6FAAU,CAAC;IAC5B,SAAS,GAAG,KAAK;6FAAU,CAAC;IAErC,yEAAyE;IAChE,MAAM,GAAG,MAAM,EAAU,CAAC;IACnC,qCAAqC;IAC5B,MAAM,GAAG,MAAM,EAAQ,CAAC;IACxB,WAAW,GAAG,MAAM,EAAQ,CAAC;IAC7B,UAAU,GAAG,MAAM,EAAQ,CAAC;IAEpB,IAAI,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC,aAA2B,CAAC;IACtD,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,MAAM,CAAC,UAAU,CAAC,CAAC;IAC/D,8FAA8F;IACtF,SAAS,GAAG,EAAE,CAAC;IAEvB;QACE,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,eAAe,CAAC,CAAC;QACpC,MAAM,MAAM,GAAG,CAAC,KAAa,EAAE,MAAkD,EAAE,EAAE,CACnF,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,GAAG,EAAE,EAAE,CACrD,MAAM,CAAE,GAAqD,EAAE,WAAW,IAAI,EAAE,CAAC,CAClF,CAAC;QACJ,MAAM,KAAK,GAAG;YACZ,MAAM,CAAC,sBAAsB,EAAE,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;YAC5F,MAAM,CAAC,sBAAsB,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;YACxD,MAAM,CAAC,gBAAgB,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;YACvD,MAAM,CAAC,eAAe,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;SACtD,CAAC;QACF,MAAM,CAAC,UAAU,CAAC,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;QACpE,6FAA6F;QAC7F,mFAAmF;QACnF,iBAAiB,CAAC;YAChB,KAAK,EAAE,GAAG,EAAE;gBACV,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC;gBAC3B,SAAS,CAAC,GAAG,EAAE;oBACb,IAAI,KAAK,KAAK,IAAI,CAAC,SAAS;wBAAE,OAAO;oBACrC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;oBACvB,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,EAAE,SAAS,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;gBAC7D,CAAC,CAAC,CAAC;YACL,CAAC;SACF,CAAC,CAAC;IACL,CAAC;IAED,KAAK;QACH,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;IAClD,CAAC;IAED,IAAI;QACF,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;IACjD,CAAC;IAED,8CAA8C;IAC9C,KAAK;QACH,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;QACpB,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;QACnB,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;IACtD,CAAC;IAED,mDAAmD;IACnD,YAAY;QACV,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,EAAE,cAAc,CAAC,CAAC;IACzD,CAAC;IAES,YAAY,CAAC,IAAY;QACjC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACtB,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;IACvB,CAAC;uGArFU,eAAe;2FAAf,eAAe,42EAjBhB,EAAE;;2FAiBD,eAAe;kBAnB3B,SAAS;mBAAC;oBACT,QAAQ,EAAE,mBAAmB;oBAC7B,QAAQ,EAAE,EAAE;oBACZ,IAAI,EAAE;wBACJ,eAAe,EAAE,eAAe;wBAChC,qBAAqB,EAAE,qBAAqB;wBAC5C,oBAAoB,EAAE,oBAAoB;wBAC1C,aAAa,EAAE,aAAa;wBAC5B,2BAA2B,EAAE,2BAA2B;wBACxD,kBAAkB,EAAE,kBAAkB;wBACtC,qBAAqB,EACnB,6EAA6E;wBAC/E,qBAAqB,EACnB,6EAA6E;wBAC/E,aAAa,EAAE,aAAa;wBAC5B,aAAa,EAAE,aAAa;wBAC5B,cAAc,EAAE,+CAA+C;qBAChE;iBACF","sourcesContent":["/**\n * The navigation bar's search field: react-native-screens' `RNSSearchBar`, the UISearchController\n * iOS puts under a large title. Place it in the header's search slot:\n *\n * ```html\n * <native-header title=\"Properties\" [largeTitle]=\"true\">\n *   <native-header-item type=\"searchBar\">\n *     <native-search-bar placeholder=\"Search\" [(query)]=\"query\" />\n *   </native-header-item>\n * </native-header>\n * ```\n *\n * The text is a two-way `query`: what a list filter wants. Typing updates it, and a query set from\n * code - a recent search tapped, a suggestion taken - is put in the field, as a controlled text\n * input's value is. `(search)` is the keyboard's search key, with the text; `(cancel)` the Cancel\n * button; `(searchFocus)` and `(searchBlur)` the field taking and leaving the keyboard, which is when\n * a suggestions list comes and goes. `focus()`, `blur()`, `clear()` and `cancelSearch()` do those\n * from code.\n *\n * ponytail: react-native-screens has no scope bar and no search tokens; a scope is a segmented\n * control under the header, and a token is text.\n */\nimport {\n  Component,\n  DestroyRef,\n  ElementRef,\n  afterRenderEffect,\n  inject,\n  input,\n  model,\n  output,\n  untracked,\n} from '@angular/core';\nimport { type EngineNode, HostEngine, type NativeSyntheticEvent } from '@ng-native/fabric';\nimport { ownHost } from './own-host.ts';\nimport { optionalBoolean } from './transforms.ts';\n\n/** react-native-screens' placements for the navigation bar's search field. */\nexport type SearchBarPlacement =\n  'automatic' | 'inline' | 'stacked' | 'integrated' | 'integratedButton' | 'integratedCentered';\n\n@Component({\n  selector: 'native-search-bar',\n  template: '',\n  host: {\n    '[placeholder]': 'placeholder()',\n    '[hideWhenScrolling]': 'hideWhenScrolling()',\n    '[cancelButtonText]': 'cancelButtonText()',\n    '[placement]': 'placement()',\n    '[allowToolbarIntegration]': 'allowToolbarIntegration()',\n    '[autoCapitalize]': 'autoCapitalize()',\n    '[obscureBackground]':\n      'obscureBackground() === undefined ? undefined : String(obscureBackground())',\n    '[hideNavigationBar]':\n      'hideNavigationBar() === undefined ? undefined : String(hideNavigationBar())',\n    '[tintColor]': 'tintColor()',\n    '[textColor]': 'textColor()',\n    '(changeText)': 'onNativeText($event?.nativeEvent?.text ?? \"\")',\n  },\n})\nexport class NativeSearchBar {\n  readonly query = model('');\n  readonly placeholder = input<string>();\n  /** Scroll the field away with the content, as iOS lists do by default. */\n  readonly hideWhenScrolling = input(undefined, { transform: optionalBoolean });\n  readonly cancelButtonText = input<string>();\n  /**\n   * Where iOS puts the field. `automatic` lets iOS 26 fold it into a toolbar, which a presented\n   * sheet does not have, so there it shows nowhere; `stacked` keeps it under the title.\n   */\n  readonly placement = input<SearchBarPlacement>();\n  /** iOS 26: whether `automatic` may move the field into the toolbar. */\n  readonly allowToolbarIntegration = input(undefined, { transform: optionalBoolean });\n  readonly autoCapitalize = input<\n    'systemDefault' | 'none' | 'words' | 'sentences' | 'characters'\n  >();\n  /** Dim the content behind the field while it is being typed in. */\n  readonly obscureBackground = input(undefined, { transform: optionalBoolean });\n  /** Hide the navigation bar while the field is being typed in. */\n  readonly hideNavigationBar = input(undefined, { transform: optionalBoolean });\n  readonly tintColor = input<string>();\n  readonly textColor = input<string>();\n\n  /** The keyboard's search key was pressed, with the text in the field. */\n  readonly search = output<string>();\n  /** The Cancel button was pressed. */\n  readonly cancel = output<void>();\n  readonly searchFocus = output<void>();\n  readonly searchBlur = output<void>();\n\n  private readonly node = inject(ElementRef).nativeElement as EngineNode;\n  private readonly engine = this.node.host ?? inject(HostEngine);\n  /** What the field last said it holds, to tell a query set from code from the field's echo. */\n  private fieldText = '';\n\n  constructor() {\n    ownHost(this.node, NativeSearchBar);\n    const listen = (event: string, handle: (payload: Record<string, unknown>) => void) =>\n      this.engine.setEventListener(this.node, event, (raw) =>\n        handle((raw as NativeSyntheticEvent<Record<string, unknown>>)?.nativeEvent ?? {}),\n      );\n    const stops = [\n      listen('topSearchButtonPress', ({ text }) => this.search.emit(String(text ?? this.query()))),\n      listen('topCancelButtonPress', () => this.cancel.emit()),\n      listen('topSearchFocus', () => this.searchFocus.emit()),\n      listen('topSearchBlur', () => this.searchBlur.emit()),\n    ];\n    inject(DestroyRef).onDestroy(() => stops.forEach((stop) => stop()));\n    // A query that is not what the field holds was set from code: put it in the field. After the\n    // render, so a query the page starts with reaches a field that has been committed.\n    afterRenderEffect({\n      write: () => {\n        const query = this.query();\n        untracked(() => {\n          if (query === this.fieldText) return;\n          this.fieldText = query;\n          this.engine.dispatchCommand(this.node, 'setText', [query]);\n        });\n      },\n    });\n  }\n\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, and the query with it. */\n  clear(): void {\n    this.fieldText = '';\n    this.query.set('');\n    this.engine.dispatchCommand(this.node, 'clearText');\n  }\n\n  /** Close the search, as the Cancel button does. */\n  cancelSearch(): void {\n    this.engine.dispatchCommand(this.node, 'cancelSearch');\n  }\n\n  protected onNativeText(text: string): void {\n    this.fieldText = text;\n    this.query.set(text);\n  }\n}\n"]}

package/dist/native-stack-outlet.d.ts

@@ -0,0 +1,195 @@
+/**
+ * A `RouterOutlet` that renders a native stack instead of swapping one view for another.
+ *
+ * The outlet's host element *is* the `RNSScreenStack`, and each activated route's component is
+ * created directly on its own `screen` child rather than on a wrapper view inside it (ADR 0004).
+ * The screens below the top stay mounted, which is what keeps a pushed-away screen's native
+ * state alive: its scroll offset, its text cursor, its keyboard focus.
+ *
+ * Push and pop are inferred from the calls the router already makes. With a reuse strategy that
+ * detaches, navigating forward is `detach()` then `activateWith()`, and navigating back is
+ * `detach()` then `attach(ref)` with a ref we handed out earlier. Finding that ref in our own
+ * stack is what identifies a pop, so nothing here needs to consult the URL.
+ *
+ * Note `activityState` is set once, to active, and never lowered. `Screen.tsx` throws on any
+ * decrease while `isNativeStack`, because a native stack decides what is visible from the order
+ * of its children rather than from a per-screen flag. Toggling that flag is for `ScreenContainer`
+ * (tabs), where every screen is mounted at once.
+ */
+import { type ComponentRef, type EnvironmentInjector } from '@angular/core';
+import { ActivatedRoute, type Data, type RouterOutletContract } from '@angular/router';
+import * as i0 from "@angular/core";
+export declare class NativeStackOutlet implements RouterOutletContract {
+    /**
+     * Named outlets work exactly as on the web: `<native-stack-outlet name="list" />` is filled by
+     * routes with `outlet: 'list'`. The default is the primary one. Read once, as the router's own
+     * outlet reads it, since an outlet cannot change which contexts it is registered under.
+     */
+    readonly name: string;
+    readonly supportsBindingToComponentInputs = true;
+    private readonly parentContexts;
+    private readonly renderer;
+    private readonly applicationRef;
+    private readonly injector;
+    private readonly host;
+    private readonly location;
+    private readonly history;
+    /**
+     * Only for the intent a navigation carries. Optional so the outlet can be exercised through
+     * `RouterOutletContract` directly, which is how its own tests drive it.
+     */
+    private readonly router;
+    private readonly errors;
+    private readonly entries;
+    /**
+     * The screens a replace or a reset supersedes, kept until the navigation that supersedes them
+     * succeeds: one that fails leaves the stack as it was.
+     */
+    private superseded;
+    protected readonly fill: {
+        flex: number;
+    };
+    constructor();
+    /** The screens currently in the stack, oldest first. Exposed for tests. */
+    get depth(): number;
+    get isActivated(): boolean;
+    get component(): Object | null;
+    get activatedRoute(): ActivatedRoute | null;
+    get activatedRouteData(): Data;
+    /** The input binder reads this to bind route params to component inputs. */
+    get activatedComponentRef(): ComponentRef<unknown> | null;
+    activateWith(route: ActivatedRoute, environmentInjector: EnvironmentInjector): void;
+    /**
+     * The page's component, created on its screen and rendered once.
+     *
+     * A page that throws on that first render fails the navigation, and nothing of it may stay: a
+     * half-made screen left on the stack is one the router does not know about, with a component
+     * still running on it. So its component is destroyed, its screen taken off the stack, the
+     * screen it was pushed from given back its change detection, and the error handed to the
+     * app's `ErrorHandler` before the router fails the navigation with it.
+     */
+    private createPage;
+    deactivate(): void;
+    /**
+     * Hand the live `ComponentRef` back to the router without destroying it. The screen stays
+     * mounted, so the component keeps running and its native views keep their state.
+     */
+    detach(): ComponentRef<unknown>;
+    /**
+     * Re-attach a previously detached ref. If we still hold it, everything stacked above it is a
+     * screen the user has navigated back past, so those are destroyed: that is the pop.
+     */
+    attach(ref: ComponentRef<unknown>, route: ActivatedRoute): void;
+    /**
+     * Route params onto the page's inputs, but only in an app that asked for it with
+     * `withComponentInputBinding()`, which is the only time Angular's own outlet binds them. Read
+     * per screen rather than once, for a test that stands the router in.
+     */
+    private bindInputs;
+    private get top();
+    /**
+     * What the navigation asked for, if it asked for anything. Read here rather than remembered,
+     * because the router is mid-navigation for exactly as long as an activation takes.
+     */
+    private currentIntent;
+    /**
+     * How the screen a navigation activates is put on screen.
+     *
+     * A push on top of a presented screen is presented the same way. `RNSScreenStack` pushes a push
+     * screen that follows a modal onto the navigation controller under the modal, so the router
+     * would be on the new route while the modal stayed in front, and the modal's own way out would
+     * first pop a screen nobody could see. A presentation the navigation names itself wins, and a
+     * reset starts a stack with nothing to follow. A presented screen that is a stack of its own is
+     * where a push to one of its children goes instead, inside it.
+     */
+    private presentationFor;
+    /** The navigation's own presentation, unless an outlet further out already presented it. */
+    private claimPresentation;
+    /** Take a screen out for good: its bindings, its component, and its native view. */
+    private drop;
+    /** Take one entry out of the stack, wherever it is, and drop it. */
+    private remove;
+    /** The id of the navigation in progress, when there is a router to say. */
+    private navigationId;
+    /**
+     * Take out the screens a replace or a reset supersedes once its navigation has succeeded, or
+     * at once when there is no navigation to wait for. A replaced screen has already been detached
+     * by the router, and with `replaceUrl` its history entry is gone too, so nothing will attach it
+     * again; the reuse strategy notices the ref is destroyed and drops its handle.
+     */
+    private supersede;
+    /** A navigation succeeded: what it superseded goes, and what it did is no longer undoable. */
+    private settle;
+    /**
+     * A navigation failed, so the router is back where it started: undo what it did here too.
+     *
+     * The screen that threw has already gone (`createPage`), but a screen this outlet activated for
+     * the same navigation has not when the one that threw is further in, the first screen of a
+     * stack inside it. That one goes, with everything in it, and the screen it covered carries on.
+     */
+    private rollBack;
+    /**
+     * Give the top screen back its change detection when the router covered it for a navigation
+     * that is not going to happen: the one given, or the one in progress.
+     */
+    private uncover;
+    /**
+     * `position: absolute` and the four insets, through `setStyle` rather than one `setProperty`
+     * so each key merges into whatever style is already on the screen instead of replacing it -
+     * the same merge a page's own host style gets, just asserted last so the stack's layout wins.
+     */
+    private fillScreen;
+    private createScreen;
+    /**
+     * Follow a pop the user already made. `historyGo`, not `back()`, because iOS coalesces a long
+     * swipe into a single event with a count.
+     *
+     * Only ever fires for a native dismissal: verified on device that a pop this outlet drives
+     * itself emits `willAppear`/`appear` for the screen below but no `dismissed`, so there is no
+     * double-pop to guard against.
+     *
+     * The gesture itself is unverified by tooling: idb cannot synthesise a `UIScreenEdgePan` that
+     * UIKit accepts, so this path was reasoned from the events rather than driven end to end.
+     */
+    private onNativeDismiss;
+    /**
+     * A back, from the button or `NativeNavigation`: pop the top screen, as long as there is one
+     * below it and this stack is the one the user is looking at. A stack in a tab behind, or under
+     * a screen pushed over the tab bar, is still subscribed, and the newest one would otherwise
+     * answer for the stack in front.
+     */
+    private goBack;
+    /** Whether the top screen is part of what the router shows now. Assumed without a router. */
+    private isShowing;
+    /**
+     * Take the router to the screen `steps` below the top, whether native already popped it or it
+     * is about to be popped because the router arrives there.
+     */
+    private popBy;
+    /**
+     * Take the router down to the screen at `index`, popping every screen above it together.
+     * Through history when the entries behind are these screens, so going back from there keeps
+     * working one screen at a time; otherwise by a navigation to it that replaces the entry, as
+     * `popBy` does when a tab's history interleaves.
+     */
+    private popToEntry;
+    /** Whether the navigation that happens next succeeds. */
+    private nextNavigation;
+    /** The url a screen was showing when it was covered, rebuilt from its own route snapshot. */
+    private urlOf;
+    /**
+     * The url of the history entry `offset` away, normalised the way the router writes it: null past
+     * the start of history, and undefined when the history is not ours to read, so the pop has to go
+     * through it blind.
+     */
+    private historyUrl;
+    private removeScreen;
+    /**
+     * What a page is created with: its route, the outlet contexts its own outlets register in, and
+     * whether its screen is in front - which is this screen's own say and, for a stack inside a
+     * screen of another, that screen's too.
+     */
+    private outletInjector;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NativeStackOutlet, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NativeStackOutlet, "native-stack-outlet", never, {}, {}, never, never, true, never>;
+}