@ng-native/router 0.0.1 → 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Ashley Hunter
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,76 @@
 # @ng-native/router
 
-A placeholder: this version has no code. See https://ng-native.com.
+`@angular/router` - the same `Router`, route config, guards, resolvers and deep links - pointed at
+`react-native-screens` instead of the DOM: a real native stack, tabs and header, not something
+drawn to look like one.
+
+Alpha: APIs may change before 1.0.
+
+## Install
+
+Most apps start from `npx create-expo-app@latest my-app --template @ng-native/template` and add
+routing on top. Otherwise:
+
+```sh
+npm install @ng-native/router
+npm install @angular/common @angular/core @angular/router
+```
+
+## Example
+
+```ts
+import { AppRegistry } from 'react-native';
+import { withComponentInputBinding } from '@angular/router';
+import { mount } from '@ng-native/platform';
+import { getFabricUIManager } from '@ng-native/fabric';
+import { provideNativeRouter } from '@ng-native/router';
+import { routes } from './routes.ts';
+import { App } from './app.ts';
+
+AppRegistry.registerRunnable('main', ({ rootTag }) => {
+  mount(Number(rootTag), App, getFabricUIManager(), {
+    providers: [provideNativeRouter(routes, withComponentInputBinding())],
+  });
+});
+```
+
+`withComponentInputBinding()` is what turns a route param into a component input. It is opt-in,
+as on the web: leave it out and the outlets leave a page's inputs alone.
+
+```ts
+@Component({
+  selector: 'app-root',
+  imports: [NativeStackOutlet, SafeAreaProvider],
+  template: `
+    <safe-area-provider>
+      <native-stack-outlet />
+    </safe-area-provider>
+  `,
+  host: { '[style]': 'fill' },
+})
+export class App {
+  protected readonly fill = { flex: 1 };
+}
+```
+
+## What's in the package
+
+- `provideNativeRouter(routes, ...features)` - Angular's `provideRouter`, with a native
+  `PlatformLocation`, a `RouteReuseStrategy` that detaches rather than destroys a popped screen,
+  and `NativeNavigation` on top. `withLinkParent` is its one native feature.
+- `NativeStackOutlet`, `NativeTabsOutlet`, `NativeTab` - the outlets, as elements.
+- `NativeHeader`, `NativeHeaderItem`, `NativeHeaderPalette`, `NativeSearchBar` - the native header
+  and its slots.
+- `nativeRouterLink` - the native equivalent of `routerLink`.
+- `NativeNavigation` - replacing a screen, presenting a modal or sheet, resetting the stack: what a
+  URL alone cannot express.
+
+## Docs
+
+- [Router](https://ng-native.com/packages/router)
+- [Root README](https://github.com/ng-native/ng-native/blob/main/README.md) and
+  [ARCHITECTURE.md](https://github.com/ng-native/ng-native/blob/main/ARCHITECTURE.md)
+
+## License
+
+MIT

package/dist/bind-route-inputs.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Route params as component inputs, which is what `withComponentInputBinding()` promises.
+ *
+ * Angular's own binder is a service behind `INPUT_BINDER`, a token the router does not export, and
+ * `RouterOutlet` is the only thing that calls it. An outlet that is not `RouterOutlet` therefore
+ * has to do this itself - and both of ours advertise `supportsBindingToComponentInputs`, so until
+ * now they were promising something nobody delivered: a `:album` param reached the component as
+ * an empty input, with no error anywhere.
+ *
+ * Like Angular's, it only runs in an app that asked for it: both outlets check
+ * `Router.componentInputBindingEnabled` first, which is true exactly when `RouterOutlet` would
+ * find a binder behind that token. Without the feature a routed page's inputs are its own.
+ *
+ * The behaviour matches `RoutedComponentInputBinder`: query params first, then path params, then
+ * resolved data, and every declared input is written on every change - including to `undefined`
+ * when the key is gone, which is what stops a stale param from surviving a navigation.
+ */
+import { type ComponentRef } from '@angular/core';
+import type { ActivatedRoute } from '@angular/router';
+export declare function bindRouteInputs(ref: ComponentRef<unknown>, route: ActivatedRoute): () => void;

package/dist/bind-route-inputs.js

@@ -0,0 +1,52 @@
+/**
+ * Route params as component inputs, which is what `withComponentInputBinding()` promises.
+ *
+ * Angular's own binder is a service behind `INPUT_BINDER`, a token the router does not export, and
+ * `RouterOutlet` is the only thing that calls it. An outlet that is not `RouterOutlet` therefore
+ * has to do this itself - and both of ours advertise `supportsBindingToComponentInputs`, so until
+ * now they were promising something nobody delivered: a `:album` param reached the component as
+ * an empty input, with no error anywhere.
+ *
+ * Like Angular's, it only runs in an app that asked for it: both outlets check
+ * `Router.componentInputBindingEnabled` first, which is true exactly when `RouterOutlet` would
+ * find a binder behind that token. Without the feature a routed page's inputs are its own.
+ *
+ * The behaviour matches `RoutedComponentInputBinder`: query params first, then path params, then
+ * resolved data, and every declared input is written on every change - including to `undefined`
+ * when the key is gone, which is what stops a stale param from surviving a navigation.
+ */
+import { reflectComponentType } from '@angular/core';
+export function bindRouteInputs(ref, route) {
+    const mirror = reflectComponentType(ref.componentType);
+    if (!mirror || mirror.inputs.length === 0)
+        return () => { };
+    let queryParams = {};
+    let params = {};
+    let data = {};
+    const apply = () => {
+        if (ref.hostView.destroyed)
+            return;
+        const merged = { ...queryParams, ...params, ...data };
+        for (const { templateName } of mirror.inputs) {
+            ref.setInput(templateName, merged[templateName]);
+        }
+    };
+    // Three subscriptions rather than a `combineLatest`, so this file needs no rxjs operators. Each
+    // emits synchronously on subscribe, so the inputs are set before the first change detection.
+    const subscriptions = [
+        route.queryParams.subscribe((value) => {
+            queryParams = value;
+            apply();
+        }),
+        route.params.subscribe((value) => {
+            params = value;
+            apply();
+        }),
+        route.data.subscribe((value) => {
+            data = value;
+            apply();
+        }),
+    ];
+    return () => subscriptions.forEach((subscription) => subscription.unsubscribe());
+}
+//# sourceMappingURL=bind-route-inputs.js.map

package/dist/bind-route-inputs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bind-route-inputs.js","sourceRoot":"","sources":["../src/bind-route-inputs.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AACH,OAAO,EAAE,oBAAoB,EAAqB,MAAM,eAAe,CAAC;AAKxE,MAAM,UAAU,eAAe,CAAC,GAA0B,EAAE,KAAqB;IAC/E,MAAM,MAAM,GAAG,oBAAoB,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IACvD,IAAI,CAAC,MAAM,IAAI,MAAM,CAAC,MAAM,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,GAAG,EAAE,GAAE,CAAC,CAAC;IAE3D,IAAI,WAAW,GAAW,EAAE,CAAC;IAC7B,IAAI,MAAM,GAAW,EAAE,CAAC;IACxB,IAAI,IAAI,GAAW,EAAE,CAAC;IAEtB,MAAM,KAAK,GAAG,GAAG,EAAE;QACjB,IAAI,GAAG,CAAC,QAAQ,CAAC,SAAS;YAAE,OAAO;QACnC,MAAM,MAAM,GAAG,EAAE,GAAG,WAAW,EAAE,GAAG,MAAM,EAAE,GAAG,IAAI,EAAE,CAAC;QACtD,KAAK,MAAM,EAAE,YAAY,EAAE,IAAI,MAAM,CAAC,MAAM,EAAE,CAAC;YAC7C,GAAG,CAAC,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC;QACnD,CAAC;IACH,CAAC,CAAC;IAEF,gGAAgG;IAChG,6FAA6F;IAC7F,MAAM,aAAa,GAAG;QACpB,KAAK,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,KAAK,EAAE,EAAE;YACpC,WAAW,GAAG,KAAK,CAAC;YACpB,KAAK,EAAE,CAAC;QACV,CAAC,CAAC;QACF,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,KAAK,EAAE,EAAE;YAC/B,MAAM,GAAG,KAAK,CAAC;YACf,KAAK,EAAE,CAAC;QACV,CAAC,CAAC;QACF,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,KAAK,EAAE,EAAE;YAC7B,IAAI,GAAG,KAAK,CAAC;YACb,KAAK,EAAE,CAAC;QACV,CAAC,CAAC;KACH,CAAC;IAEF,OAAO,GAAG,EAAE,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,YAAY,EAAE,EAAE,CAAC,YAAY,CAAC,WAAW,EAAE,CAAC,CAAC;AACnF,CAAC","sourcesContent":["/**\n * Route params as component inputs, which is what `withComponentInputBinding()` promises.\n *\n * Angular's own binder is a service behind `INPUT_BINDER`, a token the router does not export, and\n * `RouterOutlet` is the only thing that calls it. An outlet that is not `RouterOutlet` therefore\n * has to do this itself - and both of ours advertise `supportsBindingToComponentInputs`, so until\n * now they were promising something nobody delivered: a `:album` param reached the component as\n * an empty input, with no error anywhere.\n *\n * Like Angular's, it only runs in an app that asked for it: both outlets check\n * `Router.componentInputBindingEnabled` first, which is true exactly when `RouterOutlet` would\n * find a binder behind that token. Without the feature a routed page's inputs are its own.\n *\n * The behaviour matches `RoutedComponentInputBinder`: query params first, then path params, then\n * resolved data, and every declared input is written on every change - including to `undefined`\n * when the key is gone, which is what stops a stale param from surviving a navigation.\n */\nimport { reflectComponentType, type ComponentRef } from '@angular/core';\nimport type { ActivatedRoute } from '@angular/router';\n\ntype Values = Record<string, unknown>;\n\nexport function bindRouteInputs(ref: ComponentRef<unknown>, route: ActivatedRoute): () => void {\n  const mirror = reflectComponentType(ref.componentType);\n  if (!mirror || mirror.inputs.length === 0) return () => {};\n\n  let queryParams: Values = {};\n  let params: Values = {};\n  let data: Values = {};\n\n  const apply = () => {\n    if (ref.hostView.destroyed) return;\n    const merged = { ...queryParams, ...params, ...data };\n    for (const { templateName } of mirror.inputs) {\n      ref.setInput(templateName, merged[templateName]);\n    }\n  };\n\n  // Three subscriptions rather than a `combineLatest`, so this file needs no rxjs operators. Each\n  // emits synchronously on subscribe, so the inputs are set before the first change detection.\n  const subscriptions = [\n    route.queryParams.subscribe((value) => {\n      queryParams = value;\n      apply();\n    }),\n    route.params.subscribe((value) => {\n      params = value;\n      apply();\n    }),\n    route.data.subscribe((value) => {\n      data = value;\n      apply();\n    }),\n  ];\n\n  return () => subscriptions.forEach((subscription) => subscription.unsubscribe());\n}\n"]}

package/dist/full-window-overlay.d.ts

@@ -0,0 +1,16 @@
+import * as i0 from "@angular/core";
+export declare class FullWindowOverlay {
+    private readonly screen;
+    /** iOS: VoiceOver stays inside the overlay while it is shown, as for a modal. */
+    readonly modal: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    protected readonly fill: import("@angular/core").Signal<{
+        position: string;
+        top: number;
+        left: number;
+        width: number;
+        height: number;
+    }>;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<FullWindowOverlay, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FullWindowOverlay, "full-window-overlay", never, { "modal": { "alias": "modal"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}

package/dist/full-window-overlay.js

@@ -0,0 +1,52 @@
+/**
+ * Content drawn above every screen the app shows, sheets and modals included.
+ *
+ * ```html
+ * <full-window-overlay>
+ *   @if (toast(); as message) {
+ *     <view class="toast"><text>{{ message }}</text></view>
+ *   }
+ * </full-window-overlay>
+ * ```
+ *
+ * A native sheet or modal is presented above the app's root view, so an absolutely positioned
+ * view at the root - the usual toast - is covered by the first sheet the user opens. On iOS this
+ * is react-native-screens' `RNSFullWindowOverlay`, a window of its own above the app's, which
+ * lets touches through wherever it has no content of its own, so it can stay mounted with
+ * nothing in it. It fills the window, as `FullWindowOverlay.tsx` sizes it, and follows it through
+ * a rotation. On Android, where a screen's presentation is drawn within the activity's own view,
+ * it is a plain view filling the window, last in its parent so it draws on top; put it last in the
+ * root component's template for that.
+ */
+import { Component, ElementRef, booleanAttribute, computed, inject, input } from '@angular/core';
+import { Screen } from '@ng-native/device';
+import { ownHost } from "./own-host.js";
+import * as i0 from "@angular/core";
+export class FullWindowOverlay {
+    screen = inject(Screen);
+    /** iOS: VoiceOver stays inside the overlay while it is shown, as for a modal. */
+    modal = input(false, { ...(ngDevMode ? { debugName: "modal" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    fill = computed(() => {
+        const { width, height } = this.screen.window();
+        return { position: 'absolute', top: 0, left: 0, width, height };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fill" }] : /* istanbul ignore next */ []));
+    constructor() {
+        ownHost(inject(ElementRef).nativeElement, this.constructor);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: FullWindowOverlay, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.0", type: FullWindowOverlay, isStandalone: true, selector: "full-window-overlay", inputs: { modal: { classPropertyName: "modal", publicName: "modal", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style": "fill()", "accessibilityContainerViewIsModal": "modal()", "pointerEvents": "'box-none'" } }, ngImport: i0, template: '<ng-content />', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: FullWindowOverlay, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'full-window-overlay',
+                    template: '<ng-content />',
+                    host: {
+                        '[style]': 'fill()',
+                        '[accessibilityContainerViewIsModal]': 'modal()',
+                        '[pointerEvents]': "'box-none'",
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { modal: [{ type: i0.Input, args: [{ isSignal: true, alias: "modal", required: false }] }] } });
+//# sourceMappingURL=full-window-overlay.js.map

package/dist/full-window-overlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"full-window-overlay.js","sourceRoot":"","sources":["../src/full-window-overlay.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACjG,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAE3C,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;;AAWxC,MAAM,OAAO,iBAAiB;IACX,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC;IAEzC,iFAAiF;IACxE,KAAK,GAAG,KAAK,CAAC,KAAK,6EAAI,SAAS,EAAE,gBAAgB,GAAG,CAAC;IAE5C,IAAI,GAAG,QAAQ,CAAC,GAAG,EAAE;QACtC,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC;QAC/C,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;IAClE,CAAC;6EAAC,CAAC;IAEH;QACE,OAAO,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,aAA2B,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;IAC5E,CAAC;uGAbU,iBAAiB;2FAAjB,iBAAiB,+UAPlB,gBAAgB;;2FAOf,iBAAiB;kBAT7B,SAAS;mBAAC;oBACT,QAAQ,EAAE,qBAAqB;oBAC/B,QAAQ,EAAE,gBAAgB;oBAC1B,IAAI,EAAE;wBACJ,SAAS,EAAE,QAAQ;wBACnB,qCAAqC,EAAE,SAAS;wBAChD,iBAAiB,EAAE,YAAY;qBAChC;iBACF","sourcesContent":["/**\n * Content drawn above every screen the app shows, sheets and modals included.\n *\n * ```html\n * <full-window-overlay>\n *   @if (toast(); as message) {\n *     <view class=\"toast\"><text>{{ message }}</text></view>\n *   }\n * </full-window-overlay>\n * ```\n *\n * A native sheet or modal is presented above the app's root view, so an absolutely positioned\n * view at the root - the usual toast - is covered by the first sheet the user opens. On iOS this\n * is react-native-screens' `RNSFullWindowOverlay`, a window of its own above the app's, which\n * lets touches through wherever it has no content of its own, so it can stay mounted with\n * nothing in it. It fills the window, as `FullWindowOverlay.tsx` sizes it, and follows it through\n * a rotation. On Android, where a screen's presentation is drawn within the activity's own view,\n * it is a plain view filling the window, last in its parent so it draws on top; put it last in the\n * root component's template for that.\n */\nimport { Component, ElementRef, booleanAttribute, computed, inject, input } from '@angular/core';\nimport { Screen } from '@ng-native/device';\nimport type { EngineNode } from '@ng-native/fabric';\nimport { ownHost } from './own-host.ts';\n\n@Component({\n  selector: 'full-window-overlay',\n  template: '<ng-content />',\n  host: {\n    '[style]': 'fill()',\n    '[accessibilityContainerViewIsModal]': 'modal()',\n    '[pointerEvents]': \"'box-none'\",\n  },\n})\nexport class FullWindowOverlay {\n  private readonly screen = inject(Screen);\n\n  /** iOS: VoiceOver stays inside the overlay while it is shown, as for a modal. */\n  readonly modal = input(false, { transform: booleanAttribute });\n\n  protected readonly fill = computed(() => {\n    const { width, height } = this.screen.window();\n    return { position: 'absolute', top: 0, left: 0, width, height };\n  });\n\n  constructor() {\n    ownHost(inject(ElementRef).nativeElement as EngineNode, this.constructor);\n  }\n}\n"]}

package/dist/index.d.ts

@@ -0,0 +1,26 @@
+/**
+ * `@angular/router` on a native stack: the outlet that maps activated routes onto `RNSScreen`,
+ * the `PlatformLocation` that stands in for the browser's history, and the reuse strategy that
+ * keeps a popped screen's component alive while it animates out.
+ *
+ * Two of these are decorated, so the same caveat as the components barrel applies: a Node test
+ * reaches the source file, not this.
+ */
+export { followLink, type LinkParent } from './native-links.ts';
+export { NativeNavigation, type NativeNavigationOptions, type NavigationCommands, type PresentOptions, } from './native-navigation.ts';
+export { NativePlatformLocation, type LinkSource } from './native-platform-location.ts';
+export { NativeRouterLink } from './native-router-link.ts';
+export { NATIVE_HEADER_DEFAULTS, NATIVE_TAB_DEFAULTS, type HeaderDefaults, type SchemeDefaults, type TabDefaults, } from './native-bar-defaults.ts';
+export { NativeHeader, type BackButtonDisplayMode, type BlurEffect, type HeaderDirection, type HeaderInterfaceStyle, } from './native-header.ts';
+export { DEFAULT_HEADER_PALETTE, NATIVE_HEADER_PALETTE, type HeaderColors, } from './native-header-palette.ts';
+export { NativeHeaderItem, type HeaderItemType } from './native-header-item.ts';
+export { NativeSearchBar, type SearchBarPlacement } from './native-search-bar.ts';
+export { NativeStackOutlet } from './native-stack-outlet.ts';
+export { NativeTab, type TabAppearance, type TabBarBlurEffect, type TabIcon, type TabIconProps, type TabItemAppearance, type TabStateAppearance, type TabSystemItem, } from './native-tab.ts';
+export { NativeTabsOutlet } from './native-tabs-outlet.ts';
+export { TabSafeAreaView, type TabSafeAreaEdge } from './tab-safe-area-view.ts';
+export { NativeStackReuseStrategy, reuseScreen } from './native-stack-reuse-strategy.ts';
+export { provideNativeRouter, withHeaderDefaults, withLinkParent, withTabDefaults, type NativeRouterFeature, } from './provide-native-router.ts';
+export { type GestureResponseDistance, type ReplaceAnimation, type ScreenPresentation, type StackAnimation, type StackPresentation, type SwipeDirection, } from './screen-presentation.ts';
+export { ActivityState, type ActivityStateValue } from './screens.ts';
+export { FullWindowOverlay } from './full-window-overlay.ts';

package/dist/index.js

@@ -0,0 +1,27 @@
+/**
+ * `@angular/router` on a native stack: the outlet that maps activated routes onto `RNSScreen`,
+ * the `PlatformLocation` that stands in for the browser's history, and the reuse strategy that
+ * keeps a popped screen's component alive while it animates out.
+ *
+ * Two of these are decorated, so the same caveat as the components barrel applies: a Node test
+ * reaches the source file, not this.
+ */
+export { followLink } from "./native-links.js";
+export { NativeNavigation, } from "./native-navigation.js";
+export { NativePlatformLocation } from "./native-platform-location.js";
+export { NativeRouterLink } from "./native-router-link.js";
+export { NATIVE_HEADER_DEFAULTS, NATIVE_TAB_DEFAULTS, } from "./native-bar-defaults.js";
+export { NativeHeader, } from "./native-header.js";
+export { DEFAULT_HEADER_PALETTE, NATIVE_HEADER_PALETTE, } from "./native-header-palette.js";
+export { NativeHeaderItem } from "./native-header-item.js";
+export { NativeSearchBar } from "./native-search-bar.js";
+export { NativeStackOutlet } from "./native-stack-outlet.js";
+export { NativeTab, } from "./native-tab.js";
+export { NativeTabsOutlet } from "./native-tabs-outlet.js";
+export { TabSafeAreaView } from "./tab-safe-area-view.js";
+export { NativeStackReuseStrategy, reuseScreen } from "./native-stack-reuse-strategy.js";
+export { provideNativeRouter, withHeaderDefaults, withLinkParent, withTabDefaults, } from "./provide-native-router.js";
+export {} from "./screen-presentation.js";
+export { ActivityState } from "./screens.js";
+export { FullWindowOverlay } from "./full-window-overlay.js";
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,UAAU,EAAmB,MAAM,mBAAmB,CAAC;AAChE,OAAO,EACL,gBAAgB,GAIjB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,sBAAsB,EAAmB,MAAM,+BAA+B,CAAC;AACxF,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EACL,sBAAsB,EACtB,mBAAmB,GAIpB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EACL,YAAY,GAKb,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EACL,sBAAsB,EACtB,qBAAqB,GAEtB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,gBAAgB,EAAuB,MAAM,yBAAyB,CAAC;AAChF,OAAO,EAAE,eAAe,EAA2B,MAAM,wBAAwB,CAAC;AAClF,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,EACL,SAAS,GAQV,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAwB,MAAM,yBAAyB,CAAC;AAChF,OAAO,EAAE,wBAAwB,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AACzF,OAAO,EACL,mBAAmB,EACnB,kBAAkB,EAClB,cAAc,EACd,eAAe,GAEhB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAON,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,aAAa,EAA2B,MAAM,cAAc,CAAC;AACtE,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC","sourcesContent":["/**\n * `@angular/router` on a native stack: the outlet that maps activated routes onto `RNSScreen`,\n * the `PlatformLocation` that stands in for the browser's history, and the reuse strategy that\n * keeps a popped screen's component alive while it animates out.\n *\n * Two of these are decorated, so the same caveat as the components barrel applies: a Node test\n * reaches the source file, not this.\n */\nexport { followLink, type LinkParent } from './native-links.ts';\nexport {\n  NativeNavigation,\n  type NativeNavigationOptions,\n  type NavigationCommands,\n  type PresentOptions,\n} from './native-navigation.ts';\nexport { NativePlatformLocation, type LinkSource } from './native-platform-location.ts';\nexport { NativeRouterLink } from './native-router-link.ts';\nexport {\n  NATIVE_HEADER_DEFAULTS,\n  NATIVE_TAB_DEFAULTS,\n  type HeaderDefaults,\n  type SchemeDefaults,\n  type TabDefaults,\n} from './native-bar-defaults.ts';\nexport {\n  NativeHeader,\n  type BackButtonDisplayMode,\n  type BlurEffect,\n  type HeaderDirection,\n  type HeaderInterfaceStyle,\n} from './native-header.ts';\nexport {\n  DEFAULT_HEADER_PALETTE,\n  NATIVE_HEADER_PALETTE,\n  type HeaderColors,\n} from './native-header-palette.ts';\nexport { NativeHeaderItem, type HeaderItemType } from './native-header-item.ts';\nexport { NativeSearchBar, type SearchBarPlacement } from './native-search-bar.ts';\nexport { NativeStackOutlet } from './native-stack-outlet.ts';\nexport {\n  NativeTab,\n  type TabAppearance,\n  type TabBarBlurEffect,\n  type TabIcon,\n  type TabIconProps,\n  type TabItemAppearance,\n  type TabStateAppearance,\n  type TabSystemItem,\n} from './native-tab.ts';\nexport { NativeTabsOutlet } from './native-tabs-outlet.ts';\nexport { TabSafeAreaView, type TabSafeAreaEdge } from './tab-safe-area-view.ts';\nexport { NativeStackReuseStrategy, reuseScreen } from './native-stack-reuse-strategy.ts';\nexport {\n  provideNativeRouter,\n  withHeaderDefaults,\n  withLinkParent,\n  withTabDefaults,\n  type NativeRouterFeature,\n} from './provide-native-router.ts';\nexport {\n  type GestureResponseDistance,\n  type ReplaceAnimation,\n  type ScreenPresentation,\n  type StackAnimation,\n  type StackPresentation,\n  type SwipeDirection,\n} from './screen-presentation.ts';\nexport { ActivityState, type ActivityStateValue } from './screens.ts';\nexport { FullWindowOverlay } from './full-window-overlay.ts';\n"]}

package/dist/native-back.d.ts

@@ -0,0 +1,38 @@
+import type { ActivatedRoute, Router } from '@angular/router';
+import * as i0 from "@angular/core";
+/** What a stack offers `NativeNavigation` beyond a back: going down it several screens at once. */
+export interface PoppableStack {
+    /** Whether this stack is part of what the router shows now. */
+    showing(): boolean;
+    /** Pop to its first screen, or null when it is showing only that one. */
+    popToRoot(): Promise<boolean> | null;
+    /** Pop to the screen showing `url`, or null when no screen below the top shows it. */
+    popTo(url: string): Promise<boolean> | null;
+}
+export declare class NativeBack {
+    private readonly hardwareBack;
+    /** Oldest first, as `HardwareBack` holds them. */
+    private readonly answers;
+    /** Oldest first, and so outermost first, as the answers are. */
+    private readonly stacks;
+    /** Offer a stack for popping several screens at once. Returns an unsubscribe. */
+    addStack(stack: PoppableStack): () => void;
+    /** Pop the innermost stack in front that is deeper than one screen, to its first. */
+    popToRoot(): Promise<boolean>;
+    /** Pop the innermost stack in front that has a screen at `url` below its top, down to it. */
+    popTo(url: string): Promise<boolean>;
+    /**
+     * Offer an outlet's answer to a back. It returns whether it went back, and false lets the next
+     * one out try. Returns an unsubscribe.
+     */
+    handle(answer: () => boolean): () => void;
+    /** Go back as the button would, innermost outlet first. False when none had anywhere to go. */
+    back(): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NativeBack, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<any>;
+}
+/**
+ * Whether a route is part of what the router shows now, rather than a subtree the reuse strategy
+ * detached and is keeping for later: a tab behind, or a screen covered by one pushed over it.
+ */
+export declare function isShowing(router: Router, route: ActivatedRoute | null): boolean;

package/dist/native-back.js

@@ -0,0 +1,88 @@
+/**
+ * Who answers a back: Android's hardware button, and `NativeNavigation.back()`.
+ *
+ * Every outlet offers an answer, and the one in front takes it. Each answer is also handed to
+ * `HardwareBack` directly, where React Native asks the newest first. An outlet always subscribes
+ * after the outlet it sits inside, so that order runs from the innermost outlet out, and a
+ * screen's own handler, subscribed after its outlet, still outranks it. `back()` asks the outlets
+ * in that same order, without the screens' own handlers: those are for the button.
+ *
+ * Newest first is not enough on its own. A stack in a tab behind the one in front, or under a
+ * screen pushed over the whole tab bar, is still subscribed, so each answer first checks that
+ * its outlet is showing what the router is showing.
+ */
+import { Service, inject } from '@angular/core';
+import { HardwareBack } from '@ng-native/device';
+import * as i0 from "@angular/core";
+export class NativeBack {
+    hardwareBack = inject(HardwareBack);
+    /** Oldest first, as `HardwareBack` holds them. */
+    answers = [];
+    /** Oldest first, and so outermost first, as the answers are. */
+    stacks = [];
+    /** Offer a stack for popping several screens at once. Returns an unsubscribe. */
+    addStack(stack) {
+        this.stacks.push(stack);
+        return () => {
+            const index = this.stacks.indexOf(stack);
+            if (index !== -1)
+                this.stacks.splice(index, 1);
+        };
+    }
+    /** Pop the innermost stack in front that is deeper than one screen, to its first. */
+    popToRoot() {
+        for (const stack of [...this.stacks].reverse()) {
+            if (!stack.showing())
+                continue;
+            const popped = stack.popToRoot();
+            if (popped)
+                return popped;
+        }
+        return Promise.resolve(false);
+    }
+    /** Pop the innermost stack in front that has a screen at `url` below its top, down to it. */
+    popTo(url) {
+        for (const stack of [...this.stacks].reverse()) {
+            if (!stack.showing())
+                continue;
+            const popped = stack.popTo(url);
+            if (popped)
+                return popped;
+        }
+        return Promise.resolve(false);
+    }
+    /**
+     * Offer an outlet's answer to a back. It returns whether it went back, and false lets the next
+     * one out try. Returns an unsubscribe.
+     */
+    handle(answer) {
+        this.answers.push(answer);
+        const stop = this.hardwareBack.handle(answer);
+        return () => {
+            stop();
+            const index = this.answers.indexOf(answer);
+            if (index !== -1)
+                this.answers.splice(index, 1);
+        };
+    }
+    /** Go back as the button would, innermost outlet first. False when none had anywhere to go. */
+    back() {
+        return [...this.answers].reverse().some((answer) => answer());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: NativeBack, deps: [], target: i0.ɵɵFactoryTarget.Service });
+    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.2.0", ngImport: i0, type: NativeBack });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: NativeBack, decorators: [{
+            type: Service
+        }] });
+/**
+ * Whether a route is part of what the router shows now, rather than a subtree the reuse strategy
+ * detached and is keeping for later: a tab behind, or a screen covered by one pushed over it.
+ */
+export function isShowing(router, route) {
+    if (!route)
+        return false;
+    const visit = (node) => node === route || node.children.some(visit);
+    return visit(router.routerState.root);
+}
+//# sourceMappingURL=native-back.js.map

package/dist/native-back.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"native-back.js","sourceRoot":"","sources":["../src/native-back.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAEhD,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;;AAajD,MAAM,OAAO,UAAU;IACJ,YAAY,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC;IACrD,kDAAkD;IACjC,OAAO,GAAsB,EAAE,CAAC;IACjD,gEAAgE;IAC/C,MAAM,GAAoB,EAAE,CAAC;IAE9C,iFAAiF;IACjF,QAAQ,CAAC,KAAoB;QAC3B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACxB,OAAO,GAAG,EAAE;YACV,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;YACzC,IAAI,KAAK,KAAK,CAAC,CAAC;gBAAE,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;QACjD,CAAC,CAAC;IACJ,CAAC;IAED,qFAAqF;IACrF,SAAS;QACP,KAAK,MAAM,KAAK,IAAI,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC;YAC/C,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE;gBAAE,SAAS;YAC/B,MAAM,MAAM,GAAG,KAAK,CAAC,SAAS,EAAE,CAAC;YACjC,IAAI,MAAM;gBAAE,OAAO,MAAM,CAAC;QAC5B,CAAC;QACD,OAAO,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;IAChC,CAAC;IAED,6FAA6F;IAC7F,KAAK,CAAC,GAAW;QACf,KAAK,MAAM,KAAK,IAAI,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC;YAC/C,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE;gBAAE,SAAS;YAC/B,MAAM,MAAM,GAAG,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;YAChC,IAAI,MAAM;gBAAE,OAAO,MAAM,CAAC;QAC5B,CAAC;QACD,OAAO,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;IAChC,CAAC;IAED;;;OAGG;IACH,MAAM,CAAC,MAAqB;QAC1B,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAC1B,MAAM,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;QAC9C,OAAO,GAAG,EAAE;YACV,IAAI,EAAE,CAAC;YACP,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;YAC3C,IAAI,KAAK,KAAK,CAAC,CAAC;gBAAE,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;QAClD,CAAC,CAAC;IACJ,CAAC;IAED,+FAA+F;IAC/F,IAAI;QACF,OAAO,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,EAAE,CAAC,CAAC;IAChE,CAAC;uGArDU,UAAU;wGAAV,UAAU;;2FAAV,UAAU;kBADtB,OAAO;;AAyDR;;;GAGG;AACH,MAAM,UAAU,SAAS,CAAC,MAAc,EAAE,KAA4B;IACpE,IAAI,CAAC,KAAK;QAAE,OAAO,KAAK,CAAC;IACzB,MAAM,KAAK,GAAG,CAAC,IAAoB,EAAW,EAAE,CAAC,IAAI,KAAK,KAAK,IAAI,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC7F,OAAO,KAAK,CAAC,MAAM,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;AACxC,CAAC","sourcesContent":["/**\n * Who answers a back: Android's hardware button, and `NativeNavigation.back()`.\n *\n * Every outlet offers an answer, and the one in front takes it. Each answer is also handed to\n * `HardwareBack` directly, where React Native asks the newest first. An outlet always subscribes\n * after the outlet it sits inside, so that order runs from the innermost outlet out, and a\n * screen's own handler, subscribed after its outlet, still outranks it. `back()` asks the outlets\n * in that same order, without the screens' own handlers: those are for the button.\n *\n * Newest first is not enough on its own. A stack in a tab behind the one in front, or under a\n * screen pushed over the whole tab bar, is still subscribed, so each answer first checks that\n * its outlet is showing what the router is showing.\n */\nimport { Service, inject } from '@angular/core';\nimport type { ActivatedRoute, Router } from '@angular/router';\nimport { HardwareBack } from '@ng-native/device';\n\n/** What a stack offers `NativeNavigation` beyond a back: going down it several screens at once. */\nexport interface PoppableStack {\n  /** Whether this stack is part of what the router shows now. */\n  showing(): boolean;\n  /** Pop to its first screen, or null when it is showing only that one. */\n  popToRoot(): Promise<boolean> | null;\n  /** Pop to the screen showing `url`, or null when no screen below the top shows it. */\n  popTo(url: string): Promise<boolean> | null;\n}\n\n@Service()\nexport class NativeBack {\n  private readonly hardwareBack = inject(HardwareBack);\n  /** Oldest first, as `HardwareBack` holds them. */\n  private readonly answers: (() => boolean)[] = [];\n  /** Oldest first, and so outermost first, as the answers are. */\n  private readonly stacks: PoppableStack[] = [];\n\n  /** Offer a stack for popping several screens at once. Returns an unsubscribe. */\n  addStack(stack: PoppableStack): () => void {\n    this.stacks.push(stack);\n    return () => {\n      const index = this.stacks.indexOf(stack);\n      if (index !== -1) this.stacks.splice(index, 1);\n    };\n  }\n\n  /** Pop the innermost stack in front that is deeper than one screen, to its first. */\n  popToRoot(): Promise<boolean> {\n    for (const stack of [...this.stacks].reverse()) {\n      if (!stack.showing()) continue;\n      const popped = stack.popToRoot();\n      if (popped) return popped;\n    }\n    return Promise.resolve(false);\n  }\n\n  /** Pop the innermost stack in front that has a screen at `url` below its top, down to it. */\n  popTo(url: string): Promise<boolean> {\n    for (const stack of [...this.stacks].reverse()) {\n      if (!stack.showing()) continue;\n      const popped = stack.popTo(url);\n      if (popped) return popped;\n    }\n    return Promise.resolve(false);\n  }\n\n  /**\n   * Offer an outlet's answer to a back. It returns whether it went back, and false lets the next\n   * one out try. Returns an unsubscribe.\n   */\n  handle(answer: () => boolean): () => void {\n    this.answers.push(answer);\n    const stop = this.hardwareBack.handle(answer);\n    return () => {\n      stop();\n      const index = this.answers.indexOf(answer);\n      if (index !== -1) this.answers.splice(index, 1);\n    };\n  }\n\n  /** Go back as the button would, innermost outlet first. False when none had anywhere to go. */\n  back(): boolean {\n    return [...this.answers].reverse().some((answer) => answer());\n  }\n}\n\n/**\n * Whether a route is part of what the router shows now, rather than a subtree the reuse strategy\n * detached and is keeping for later: a tab behind, or a screen covered by one pushed over it.\n */\nexport function isShowing(router: Router, route: ActivatedRoute | null): boolean {\n  if (!route) return false;\n  const visit = (node: ActivatedRoute): boolean => node === route || node.children.some(visit);\n  return visit(router.routerState.root);\n}\n"]}

package/dist/native-bar-defaults.d.ts

@@ -0,0 +1,50 @@
+/**
+ * How every bar in the app looks when a call site does not say, set once with
+ * `withHeaderDefaults` and `withTabDefaults` beside the routes.
+ *
+ * A bar is configured with props, and a prop cannot read the cascade, so an app whose bars should
+ * match its pages would otherwise repeat the same bindings on every `<native-header>`. These fill
+ * only what a call site left unset: a header that binds `backgroundColor` keeps it.
+ *
+ * Either kind can be a function of the colour scheme, which is how a bar follows the system
+ * appearance the way a page's `@media (prefers-color-scheme: dark)` rules do. It runs inside a
+ * `computed`, so any signal it reads is followed too.
+ */
+import { InjectionToken, type Signal } from '@angular/core';
+import type { Scheme } from '@ng-native/device';
+import type { BackButtonDisplayMode, BlurEffect, HeaderInterfaceStyle } from './native-header.ts';
+import type { TabAppearance } from './native-tab.ts';
+/** A set of defaults, fixed or chosen per colour scheme. */
+export type SchemeDefaults<T> = T | ((scheme: Scheme) => T);
+/** The appearance inputs of `<native-header>` that make sense for a whole app. */
+export interface HeaderDefaults {
+    readonly userInterfaceStyle?: HeaderInterfaceStyle;
+    readonly backgroundColor?: string | number;
+    readonly color?: string | number;
+    readonly blurEffect?: BlurEffect;
+    readonly hideShadow?: boolean;
+    readonly translucent?: boolean;
+    readonly titleColor?: string | number;
+    readonly titleFontFamily?: string;
+    readonly titleFontSize?: number;
+    readonly titleFontWeight?: string;
+    readonly largeTitleColor?: string | number;
+    readonly largeTitleBackgroundColor?: string | number;
+    readonly largeTitleFontFamily?: string;
+    readonly largeTitleFontSize?: number;
+    readonly largeTitleFontWeight?: string;
+    readonly largeTitleHideShadow?: boolean;
+    readonly backTitleFontFamily?: string;
+    readonly backTitleFontSize?: number;
+    readonly backButtonDisplayMode?: BackButtonDisplayMode;
+}
+/** The appearance inputs of `<native-tabs-outlet>` and `<native-tab>` that suit a whole app. */
+export interface TabDefaults {
+    readonly tintColor?: string | number;
+    readonly backgroundColor?: string | number;
+    readonly colorScheme?: 'inherit' | 'light' | 'dark';
+    readonly standardAppearance?: TabAppearance;
+    readonly scrollEdgeAppearance?: TabAppearance;
+}
+export declare const NATIVE_HEADER_DEFAULTS: InjectionToken<Signal<HeaderDefaults>>;
+export declare const NATIVE_TAB_DEFAULTS: InjectionToken<Signal<TabDefaults>>;

package/dist/native-bar-defaults.js

@@ -0,0 +1,17 @@
+/**
+ * How every bar in the app looks when a call site does not say, set once with
+ * `withHeaderDefaults` and `withTabDefaults` beside the routes.
+ *
+ * A bar is configured with props, and a prop cannot read the cascade, so an app whose bars should
+ * match its pages would otherwise repeat the same bindings on every `<native-header>`. These fill
+ * only what a call site left unset: a header that binds `backgroundColor` keeps it.
+ *
+ * Either kind can be a function of the colour scheme, which is how a bar follows the system
+ * appearance the way a page's `@media (prefers-color-scheme: dark)` rules do. It runs inside a
+ * `computed`, so any signal it reads is followed too.
+ */
+import { InjectionToken, signal } from '@angular/core';
+const none = signal({}).asReadonly();
+export const NATIVE_HEADER_DEFAULTS = new InjectionToken('angular-native.nativeHeaderDefaults', { factory: () => none });
+export const NATIVE_TAB_DEFAULTS = new InjectionToken('angular-native.nativeTabDefaults', { factory: () => none });
+//# sourceMappingURL=native-bar-defaults.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"native-bar-defaults.js","sourceRoot":"","sources":["../src/native-bar-defaults.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,OAAO,EAAE,cAAc,EAAE,MAAM,EAAe,MAAM,eAAe,CAAC;AAwCpE,MAAM,IAAI,GAAG,MAAM,CAAC,EAAE,CAAC,CAAC,UAAU,EAAE,CAAC;AAErC,MAAM,CAAC,MAAM,sBAAsB,GAAG,IAAI,cAAc,CACtD,qCAAqC,EACrC,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,EAAE,CACxB,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,IAAI,cAAc,CACnD,kCAAkC,EAClC,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,EAAE,CACxB,CAAC","sourcesContent":["/**\n * How every bar in the app looks when a call site does not say, set once with\n * `withHeaderDefaults` and `withTabDefaults` beside the routes.\n *\n * A bar is configured with props, and a prop cannot read the cascade, so an app whose bars should\n * match its pages would otherwise repeat the same bindings on every `<native-header>`. These fill\n * only what a call site left unset: a header that binds `backgroundColor` keeps it.\n *\n * Either kind can be a function of the colour scheme, which is how a bar follows the system\n * appearance the way a page's `@media (prefers-color-scheme: dark)` rules do. It runs inside a\n * `computed`, so any signal it reads is followed too.\n */\nimport { InjectionToken, signal, type Signal } from '@angular/core';\nimport type { Scheme } from '@ng-native/device';\nimport type { BackButtonDisplayMode, BlurEffect, HeaderInterfaceStyle } from './native-header.ts';\nimport type { TabAppearance } from './native-tab.ts';\n\n/** A set of defaults, fixed or chosen per colour scheme. */\nexport type SchemeDefaults<T> = T | ((scheme: Scheme) => T);\n\n/** The appearance inputs of `<native-header>` that make sense for a whole app. */\nexport interface HeaderDefaults {\n  readonly userInterfaceStyle?: HeaderInterfaceStyle;\n  readonly backgroundColor?: string | number;\n  readonly color?: string | number;\n  readonly blurEffect?: BlurEffect;\n  readonly hideShadow?: boolean;\n  readonly translucent?: boolean;\n  readonly titleColor?: string | number;\n  readonly titleFontFamily?: string;\n  readonly titleFontSize?: number;\n  readonly titleFontWeight?: string;\n  readonly largeTitleColor?: string | number;\n  readonly largeTitleBackgroundColor?: string | number;\n  readonly largeTitleFontFamily?: string;\n  readonly largeTitleFontSize?: number;\n  readonly largeTitleFontWeight?: string;\n  readonly largeTitleHideShadow?: boolean;\n  readonly backTitleFontFamily?: string;\n  readonly backTitleFontSize?: number;\n  readonly backButtonDisplayMode?: BackButtonDisplayMode;\n}\n\n/** The appearance inputs of `<native-tabs-outlet>` and `<native-tab>` that suit a whole app. */\nexport interface TabDefaults {\n  readonly tintColor?: string | number;\n  readonly backgroundColor?: string | number;\n  readonly colorScheme?: 'inherit' | 'light' | 'dark';\n  readonly standardAppearance?: TabAppearance;\n  readonly scrollEdgeAppearance?: TabAppearance;\n}\n\nconst none = signal({}).asReadonly();\n\nexport const NATIVE_HEADER_DEFAULTS = new InjectionToken<Signal<HeaderDefaults>>(\n  'angular-native.nativeHeaderDefaults',\n  { factory: () => none },\n);\n\nexport const NATIVE_TAB_DEFAULTS = new InjectionToken<Signal<TabDefaults>>(\n  'angular-native.nativeTabDefaults',\n  { factory: () => none },\n);\n"]}

package/dist/native-header-item.d.ts

@@ -0,0 +1,12 @@
+import * as i0 from "@angular/core";
+/** The bar slots. `title` and `center` are the same place. */
+export type HeaderItemType = 'back' | 'left' | 'center' | 'title' | 'right' | 'searchBar';
+export declare class NativeHeaderItem {
+    constructor();
+    /** Which slot to sit in. Native defaults to `left`. */
+    readonly type: import("@angular/core").InputSignal<HeaderItemType | undefined>;
+    /** Opt out of the bar's shared background behind this item. */
+    readonly hidesSharedBackground: import("@angular/core").InputSignalWithTransform<boolean | undefined, unknown>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NativeHeaderItem, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NativeHeaderItem, "native-header-item", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "hidesSharedBackground": { "alias": "hidesSharedBackground"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}

package/dist/native-header-item.js

@@ -0,0 +1,40 @@
+/**
+ * Anything Angular can render, placed in one of the navigation bar's slots.
+ *
+ * Commits as `RNSScreenStackHeaderSubview`, whose `type` picks the slot. A `right` item is the
+ * usual "Done" or "Edit" button; `back` replaces the chevron, which needs
+ * `backButtonInCustomView` on the header; `searchBar` expects a search bar rather than
+ * arbitrary content.
+ *
+ * Press handling is the responder system, so a `pressable` inside one works like anywhere else.
+ * Native bar button items would look truer to the platform and bring menus and system symbols
+ * with them, but they are data rather than views; they are a later opt-in.
+ */
+import { Component, ElementRef, inject, input } from '@angular/core';
+import { ownHost } from "./own-host.js";
+import { optionalBoolean } from "./transforms.js";
+import * as i0 from "@angular/core";
+export class NativeHeaderItem {
+    constructor() {
+        ownHost(inject(ElementRef).nativeElement, this.constructor);
+    }
+    /** Which slot to sit in. Native defaults to `left`. */
+    type = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "type" }] : /* istanbul ignore next */ []));
+    /** Opt out of the bar's shared background behind this item. */
+    hidesSharedBackground = input(undefined, { ...(ngDevMode ? { debugName: "hidesSharedBackground" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: NativeHeaderItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.0", type: NativeHeaderItem, isStandalone: true, selector: "native-header-item", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, hidesSharedBackground: { classPropertyName: "hidesSharedBackground", publicName: "hidesSharedBackground", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "type": "type()", "hidesSharedBackground": "hidesSharedBackground()" } }, ngImport: i0, template: '<ng-content />', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: NativeHeaderItem, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'native-header-item',
+                    template: '<ng-content />',
+                    host: {
+                        '[type]': 'type()',
+                        '[hidesSharedBackground]': 'hidesSharedBackground()',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], hidesSharedBackground: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidesSharedBackground", required: false }] }] } });
+//# sourceMappingURL=native-header-item.js.map

package/dist/native-header-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"native-header-item.js","sourceRoot":"","sources":["../src/native-header-item.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAErE,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;;AAalD,MAAM,OAAO,gBAAgB;IAC3B;QACE,OAAO,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,aAA2B,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;IAC5E,CAAC;IAED,uDAAuD;IAC9C,IAAI,GAAG,KAAK;wFAAkB,CAAC;IACxC,+DAA+D;IACtD,qBAAqB,GAAG,KAAK,CAAC,SAAS,6FAAI,SAAS,EAAE,eAAe,GAAG,CAAC;uGARvE,gBAAgB;2FAAhB,gBAAgB,udANjB,gBAAgB;;2FAMf,gBAAgB;kBAR5B,SAAS;mBAAC;oBACT,QAAQ,EAAE,oBAAoB;oBAC9B,QAAQ,EAAE,gBAAgB;oBAC1B,IAAI,EAAE;wBACJ,QAAQ,EAAE,QAAQ;wBAClB,yBAAyB,EAAE,yBAAyB;qBACrD;iBACF","sourcesContent":["/**\n * Anything Angular can render, placed in one of the navigation bar's slots.\n *\n * Commits as `RNSScreenStackHeaderSubview`, whose `type` picks the slot. A `right` item is the\n * usual \"Done\" or \"Edit\" button; `back` replaces the chevron, which needs\n * `backButtonInCustomView` on the header; `searchBar` expects a search bar rather than\n * arbitrary content.\n *\n * Press handling is the responder system, so a `pressable` inside one works like anywhere else.\n * Native bar button items would look truer to the platform and bring menus and system symbols\n * with them, but they are data rather than views; they are a later opt-in.\n */\nimport { Component, ElementRef, inject, input } from '@angular/core';\nimport type { EngineNode } from '@ng-native/fabric';\nimport { ownHost } from './own-host.ts';\nimport { optionalBoolean } from './transforms.ts';\n\n/** The bar slots. `title` and `center` are the same place. */\nexport type HeaderItemType = 'back' | 'left' | 'center' | 'title' | 'right' | 'searchBar';\n\n@Component({\n  selector: 'native-header-item',\n  template: '<ng-content />',\n  host: {\n    '[type]': 'type()',\n    '[hidesSharedBackground]': 'hidesSharedBackground()',\n  },\n})\nexport class NativeHeaderItem {\n  constructor() {\n    ownHost(inject(ElementRef).nativeElement as EngineNode, this.constructor);\n  }\n\n  /** Which slot to sit in. Native defaults to `left`. */\n  readonly type = input<HeaderItemType>();\n  /** Opt out of the bar's shared background behind this item. */\n  readonly hidesSharedBackground = input(undefined, { transform: optionalBoolean });\n}\n"]}