@ng-native/router 0.0.1 → 0.1.0

package/dist/native-tab.js

@@ -0,0 +1,209 @@
+/**
+ * One item in a native tab bar, and the screen behind it.
+ *
+ * Declared in the tabs outlet's template, the way a `<native-header>` is declared in a page's:
+ *
+ * ```html
+ * <native-tabs-outlet>
+ *   <native-tab path="library" title="Library" sfSymbol="books.vertical.fill" />
+ *   <native-tab path="inbox" title="Inbox" sfSymbol="tray" [badge]="unread()" />
+ * </native-tabs-outlet>
+ * ```
+ *
+ * `path` names the child route this tab selects, the same way a `routerLink` names one, and is
+ * what native identifies the tab by. Everything else is an ordinary input, which is the point of
+ * declaring tabs here rather than in the route config: a badge is a count that changes, a title
+ * may be translated, and a tab may not exist at all until a feature flag says so. Route data
+ * cannot bind to any of that.
+ *
+ * **A bar item is not a view.** `UITabBarItem` is a model object - a title, an image and a badge
+ * string - and UIKit has no way to put a view in its place; Android's bottom-navigation item is
+ * the same. That is why this takes no content, while `<native-header-item>` does: a navigation
+ * bar really does hold subviews. What customisation exists is here as inputs: images instead of
+ * symbols, a different icon when selected, and the per-state appearance below.
+ *
+ * The host element *is* the `RNSTabsScreen`. The outlet keeps the screen mounted and creates
+ * each activated route's component on a child view, so destroying a route cannot remove this
+ * tab item from the bar.
+ */
+import { Component, ElementRef, computed, inject, input } from '@angular/core';
+import { nativePlatform, HostEngine } from '@ng-native/fabric';
+import { NATIVE_TAB_DEFAULTS } from "./native-bar-defaults.js";
+import { ownHost } from "./own-host.js";
+import * as i0 from "@angular/core";
+/**
+ * An icon and its selected counterpart, as one set of props.
+ *
+ * Native carries a single `iconType` for both states, so the two have to be the same kind of
+ * thing: a template image cannot become a symbol when selected. React Native Screens throws on
+ * that pairing and so does this, because the alternative - what happened before this checked - is
+ * that native quietly keeps the unselected icon and nothing anywhere says why.
+ */
+export function tabIconProps(icon, selectedIcon) {
+    const hasBase = icon.iconType !== undefined || icon.drawableIconResourceName !== undefined;
+    const hasSelected = selectedIcon.iconType !== undefined || selectedIcon.drawableIconResourceName !== undefined;
+    if (hasSelected && !hasBase) {
+        throw new Error('[angular-native] <native-tab> has a selectedIcon but no icon to select from');
+    }
+    if (hasSelected && icon.iconType !== selectedIcon.iconType) {
+        throw new Error(`[angular-native] <native-tab> icon and selectedIcon must be the same kind: native has ` +
+            `one iconType for both, so '${icon.iconType}' and '${selectedIcon.iconType}' cannot pair.`);
+    }
+    return {
+        ...icon,
+        selectedIconResourceName: selectedIcon.iconResourceName,
+        selectedIconImageSource: selectedIcon.iconImageSource,
+        selectedDrawableIconResourceName: selectedIcon.drawableIconResourceName,
+        selectedImageIconResource: selectedIcon.imageIconResource,
+    };
+}
+export class NativeTab {
+    engine = inject(HostEngine);
+    /** The app's `withTabDefaults`, for an appearance this tab does not bind itself. */
+    defaults = inject(NATIVE_TAB_DEFAULTS);
+    /**
+     * The `RNSTabsScreen` this tab is. The outlet creates the activated route's component inside
+     * it, which is why it is public: a tab is a slot as well as a bar item.
+     */
+    screen;
+    constructor() {
+        this.screen = ownHost(inject(ElementRef).nativeElement, this.constructor);
+    }
+    /**
+     * The child route this tab selects, as a path segment: `library` for `/tabs/library`. Native
+     * identifies the tab by it too, so it must be unique in the bar.
+     */
+    path = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "path" }] : /* istanbul ignore next */ []));
+    /** The label under the icon. Absent gives an icon-only item. */
+    title = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "title" }] : /* istanbul ignore next */ []));
+    /** iOS: an SF Symbol name, e.g. `books.vertical.fill`. Shorthand for `[icon]`. */
+    sfSymbol = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "sfSymbol" }] : /* istanbul ignore next */ []));
+    /** Android: a drawable resource name. Shorthand for `[icon]`. */
+    drawable = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "drawable" }] : /* istanbul ignore next */ []));
+    /** Anything a symbol name cannot say: an image, a template image, an asset-catalogue name. */
+    icon = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
+    /** Shown while this tab is the selected one. Absent leaves the platform to tint `icon`. */
+    selectedIcon = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "selectedIcon" }] : /* istanbul ignore next */ []));
+    /** One of Apple's standard items, which supplies its own icon and title. */
+    systemItem = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "systemItem" }] : /* istanbul ignore next */ []));
+    /** The badge on the item: a count, or a single character for a dot. */
+    badge = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "badge" }] : /* istanbul ignore next */ []));
+    /** Announced instead of the title. */
+    accessibilityLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "accessibilityLabel" }] : /* istanbul ignore next */ []));
+    /** How the item looks. Colours are processed here, because native never sees the object's keys. */
+    standardAppearance = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "standardAppearance" }] : /* istanbul ignore next */ []));
+    /** The same, for when the scroll view behind the bar is at its edge. */
+    scrollEdgeAppearance = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "scrollEdgeAppearance" }] : /* istanbul ignore next */ []));
+    standard = computed(() => this.processAppearance(this.standardAppearance() ?? this.defaults().standardAppearance), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "standard" }] : /* istanbul ignore next */ []));
+    scrollEdge = computed(() => this.processAppearance(this.scrollEdgeAppearance() ?? this.defaults().scrollEdgeAppearance), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scrollEdge" }] : /* istanbul ignore next */ []));
+    icons = computed(() => tabIconProps(this.iconProps(this.icon() ?? this.shorthand()), this.iconProps(this.selectedIcon())), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "icons" }] : /* istanbul ignore next */ []));
+    /** `sfSymbol` and `drawable` say the same thing as `icon`, in the form most tabs want. */
+    shorthand() {
+        const symbol = this.sfSymbol();
+        if (symbol)
+            return { sfSymbol: symbol };
+        const drawable = this.drawable();
+        return drawable ? { drawable } : undefined;
+    }
+    /**
+     * One icon, as the four props native reads it through. A `require()`d asset is an id until the
+     * host resolves it, which is the same thing an `<image src>` needs and the engine only does for
+     * props it knows by name.
+     */
+    iconProps(icon) {
+        if (!icon)
+            return {};
+        if ('sfSymbol' in icon)
+            return { iconType: 'sfSymbol', iconResourceName: icon.sfSymbol };
+        if ('xcasset' in icon)
+            return { iconType: 'xcasset', iconResourceName: icon.xcasset };
+        if ('drawable' in icon)
+            return { drawableIconResourceName: icon.drawable };
+        const source = this.engine.resolveAsset('image' in icon ? icon.image : icon.template);
+        return nativePlatform() === 'android'
+            ? { imageIconResource: source }
+            : { iconType: 'image' in icon ? 'image' : 'template', iconImageSource: source };
+    }
+    processAppearance(appearance) {
+        if (!appearance)
+            return undefined;
+        return {
+            ...appearance,
+            stacked: this.processItem(appearance.stacked),
+            inline: this.processItem(appearance.inline),
+            compactInline: this.processItem(appearance.compactInline),
+            tabBarBackgroundColor: this.engine.color(appearance.tabBarBackgroundColor),
+            tabBarShadowColor: this.engine.color(appearance.tabBarShadowColor),
+        };
+    }
+    processItem(item) {
+        if (!item)
+            return undefined;
+        return {
+            normal: this.processState(item.normal),
+            selected: this.processState(item.selected),
+            focused: this.processState(item.focused),
+            disabled: this.processState(item.disabled),
+        };
+    }
+    processState(state) {
+        if (!state)
+            return undefined;
+        return {
+            ...state,
+            // Native declares the weight as a string, and `600` is the natural way to write one.
+            tabBarItemTitleFontWeight: state.tabBarItemTitleFontWeight === undefined
+                ? undefined
+                : String(state.tabBarItemTitleFontWeight),
+            tabBarItemTitleFontColor: this.engine.color(state.tabBarItemTitleFontColor),
+            tabBarItemIconColor: this.engine.color(state.tabBarItemIconColor),
+            tabBarItemBadgeBackgroundColor: this.engine.color(state.tabBarItemBadgeBackgroundColor),
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: NativeTab, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.0", type: NativeTab, isStandalone: true, selector: "native-tab", inputs: { path: { classPropertyName: "path", publicName: "path", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, sfSymbol: { classPropertyName: "sfSymbol", publicName: "sfSymbol", isSignal: true, isRequired: false, transformFunction: null }, drawable: { classPropertyName: "drawable", publicName: "drawable", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, selectedIcon: { classPropertyName: "selectedIcon", publicName: "selectedIcon", isSignal: true, isRequired: false, transformFunction: null }, systemItem: { classPropertyName: "systemItem", publicName: "systemItem", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, accessibilityLabel: { classPropertyName: "accessibilityLabel", publicName: "accessibilityLabel", isSignal: true, isRequired: false, transformFunction: null }, standardAppearance: { classPropertyName: "standardAppearance", publicName: "standardAppearance", isSignal: true, isRequired: false, transformFunction: null }, scrollEdgeAppearance: { classPropertyName: "scrollEdgeAppearance", publicName: "scrollEdgeAppearance", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "screenKey": "path()", "title": "title()", "badgeValue": "badge()", "tabBarItemAccessibilityLabel": "accessibilityLabel()", "systemItem": "systemItem()", "isTitleUndefined": "title() === undefined", "iconType": "icons().iconType", "iconResourceName": "icons().iconResourceName", "iconImageSource": "icons().iconImageSource", "selectedIconResourceName": "icons().selectedIconResourceName", "selectedIconImageSource": "icons().selectedIconImageSource", "drawableIconResourceName": "icons().drawableIconResourceName", "imageIconResource": "icons().imageIconResource", "selectedDrawableIconResourceName": "icons().selectedDrawableIconResourceName", "selectedImageIconResource": "icons().selectedImageIconResource", "standardAppearance": "standard()", "scrollEdgeAppearance": "scrollEdge()" } }, ngImport: i0, template: '', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: NativeTab, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'native-tab',
+                    template: '',
+                    host: {
+                        '[screenKey]': 'path()',
+                        '[title]': 'title()',
+                        '[badgeValue]': 'badge()',
+                        '[tabBarItemAccessibilityLabel]': 'accessibilityLabel()',
+                        '[systemItem]': 'systemItem()',
+                        // `isTitleUndefined` is what `TabsScreen.ios.tsx` derives from the title, and it is not a
+                        // synonym for "no title": with a title set and this left at its default, the item renders as
+                        // an icon with a gap where the label belongs.
+                        '[isTitleUndefined]': 'title() === undefined',
+                        '[iconType]': 'icons().iconType',
+                        '[iconResourceName]': 'icons().iconResourceName',
+                        '[iconImageSource]': 'icons().iconImageSource',
+                        '[selectedIconResourceName]': 'icons().selectedIconResourceName',
+                        '[selectedIconImageSource]': 'icons().selectedIconImageSource',
+                        '[drawableIconResourceName]': 'icons().drawableIconResourceName',
+                        '[imageIconResource]': 'icons().imageIconResource',
+                        '[selectedDrawableIconResourceName]': 'icons().selectedDrawableIconResourceName',
+                        '[selectedImageIconResource]': 'icons().selectedImageIconResource',
+                        '[standardAppearance]': 'standard()',
+                        '[scrollEdgeAppearance]': 'scrollEdge()',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { path: [{ type: i0.Input, args: [{ isSignal: true, alias: "path", required: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], sfSymbol: [{ type: i0.Input, args: [{ isSignal: true, alias: "sfSymbol", required: false }] }], drawable: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawable", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], selectedIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIcon", required: false }] }], systemItem: [{ type: i0.Input, args: [{ isSignal: true, alias: "systemItem", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], accessibilityLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessibilityLabel", required: false }] }], standardAppearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "standardAppearance", required: false }] }], scrollEdgeAppearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollEdgeAppearance", required: false }] }] } });
+//# sourceMappingURL=native-tab.js.map

package/dist/native-tab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"native-tab.js","sourceRoot":"","sources":["../src/native-tab.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * One item in a native tab bar, and the screen behind it.\n *\n * Declared in the tabs outlet's template, the way a `<native-header>` is declared in a page's:\n *\n * ```html\n * <native-tabs-outlet>\n *   <native-tab path=\"library\" title=\"Library\" sfSymbol=\"books.vertical.fill\" />\n *   <native-tab path=\"inbox\" title=\"Inbox\" sfSymbol=\"tray\" [badge]=\"unread()\" />\n * </native-tabs-outlet>\n * ```\n *\n * `path` names the child route this tab selects, the same way a `routerLink` names one, and is\n * what native identifies the tab by. Everything else is an ordinary input, which is the point of\n * declaring tabs here rather than in the route config: a badge is a count that changes, a title\n * may be translated, and a tab may not exist at all until a feature flag says so. Route data\n * cannot bind to any of that.\n *\n * **A bar item is not a view.** `UITabBarItem` is a model object - a title, an image and a badge\n * string - and UIKit has no way to put a view in its place; Android's bottom-navigation item is\n * the same. That is why this takes no content, while `<native-header-item>` does: a navigation\n * bar really does hold subviews. What customisation exists is here as inputs: images instead of\n * symbols, a different icon when selected, and the per-state appearance below.\n *\n * The host element *is* the `RNSTabsScreen`. The outlet keeps the screen mounted and creates\n * each activated route's component on a child view, so destroying a route cannot remove this\n * tab item from the bar.\n */\nimport { Component, ElementRef, computed, inject, input } from '@angular/core';\nimport { nativePlatform, type EngineNode, HostEngine } from '@ng-native/fabric';\nimport { NATIVE_TAB_DEFAULTS } from './native-bar-defaults.ts';\nimport { ownHost } from './own-host.ts';\n\n/**\n * Where a tab's picture comes from.\n *\n * `template` is the one worth knowing about: the image is drawn as a mask and tinted to the bar's\n * colour, so it follows selection the way a symbol does. `image` renders as authored, which is\n * what a multi-colour logo wants and what a monochrome icon almost never does.\n */\nexport type TabIcon =\n  | { readonly sfSymbol: string }\n  /** An image in the iOS asset catalogue, by name. */\n  | { readonly xcasset: string }\n  /** A `require()`d asset or a `{ uri }`, drawn as authored. */\n  | { readonly image: unknown }\n  /** The same, drawn as a mask and tinted. */\n  | { readonly template: unknown }\n  /** Android: a drawable resource name. */\n  | { readonly drawable: string };\n\n/** One of Apple's standard items, which brings its own icon and title. */\nexport type TabSystemItem =\n  | 'none'\n  | 'bookmarks'\n  | 'contacts'\n  | 'downloads'\n  | 'favorites'\n  | 'featured'\n  | 'history'\n  | 'more'\n  | 'mostRecent'\n  | 'mostViewed'\n  | 'recents'\n  | 'search'\n  | 'topRated';\n\nexport type TabBarBlurEffect =\n  | 'none'\n  | 'systemDefault'\n  | 'extraLight'\n  | 'light'\n  | 'dark'\n  | 'regular'\n  | 'prominent'\n  | 'systemUltraThinMaterial'\n  | 'systemThinMaterial'\n  | 'systemMaterial'\n  | 'systemThickMaterial'\n  | 'systemChromeMaterial';\n\n/**\n * How an item looks in one state. The names are the native ones, spelled as the codegen spec\n * spells them, so this forwards rather than translates and Apple's own documentation still reads\n * across.\n */\nexport interface TabStateAppearance {\n  tabBarItemTitleFontFamily?: string;\n  tabBarItemTitleFontSize?: number;\n  tabBarItemTitleFontWeight?: string | number;\n  tabBarItemTitleFontStyle?: string;\n  tabBarItemTitleFontColor?: string | number;\n  tabBarItemTitlePositionAdjustment?: { horizontal?: number; vertical?: number };\n  tabBarItemIconColor?: string | number;\n  tabBarItemBadgeBackgroundColor?: string | number;\n}\n\n/** The four states an item can be in. Anything absent falls back to the platform's own. */\nexport interface TabItemAppearance {\n  normal?: TabStateAppearance;\n  selected?: TabStateAppearance;\n  focused?: TabStateAppearance;\n  disabled?: TabStateAppearance;\n}\n\n/**\n * How the bar looks, per layout. `stacked` is the usual icon-over-title item; `inline` and\n * `compactInline` are the side-by-side layouts iPad and a compact height use.\n */\nexport interface TabAppearance {\n  stacked?: TabItemAppearance;\n  inline?: TabItemAppearance;\n  compactInline?: TabItemAppearance;\n  tabBarBackgroundColor?: string | number;\n  tabBarShadowColor?: string | number;\n  tabBarBlurEffect?: TabBarBlurEffect;\n}\n\n/** One icon, as the props native reads it through. */\nexport interface TabIconProps {\n  iconType?: string;\n  iconResourceName?: string;\n  iconImageSource?: unknown;\n  drawableIconResourceName?: string;\n  imageIconResource?: unknown;\n}\n\n/**\n * An icon and its selected counterpart, as one set of props.\n *\n * Native carries a single `iconType` for both states, so the two have to be the same kind of\n * thing: a template image cannot become a symbol when selected. React Native Screens throws on\n * that pairing and so does this, because the alternative - what happened before this checked - is\n * that native quietly keeps the unselected icon and nothing anywhere says why.\n */\nexport function tabIconProps(\n  icon: TabIconProps,\n  selectedIcon: TabIconProps,\n): TabIconProps & {\n  selectedIconResourceName?: string;\n  selectedIconImageSource?: unknown;\n  selectedDrawableIconResourceName?: string;\n  selectedImageIconResource?: unknown;\n} {\n  const hasBase = icon.iconType !== undefined || icon.drawableIconResourceName !== undefined;\n  const hasSelected =\n    selectedIcon.iconType !== undefined || selectedIcon.drawableIconResourceName !== undefined;\n\n  if (hasSelected && !hasBase) {\n    throw new Error('[angular-native] <native-tab> has a selectedIcon but no icon to select from');\n  }\n  if (hasSelected && icon.iconType !== selectedIcon.iconType) {\n    throw new Error(\n      `[angular-native] <native-tab> icon and selectedIcon must be the same kind: native has ` +\n        `one iconType for both, so '${icon.iconType}' and '${selectedIcon.iconType}' cannot pair.`,\n    );\n  }\n\n  return {\n    ...icon,\n    selectedIconResourceName: selectedIcon.iconResourceName,\n    selectedIconImageSource: selectedIcon.iconImageSource,\n    selectedDrawableIconResourceName: selectedIcon.drawableIconResourceName,\n    selectedImageIconResource: selectedIcon.imageIconResource,\n  };\n}\n\n@Component({\n  selector: 'native-tab',\n  template: '',\n  host: {\n    '[screenKey]': 'path()',\n    '[title]': 'title()',\n    '[badgeValue]': 'badge()',\n    '[tabBarItemAccessibilityLabel]': 'accessibilityLabel()',\n    '[systemItem]': 'systemItem()',\n    // `isTitleUndefined` is what `TabsScreen.ios.tsx` derives from the title, and it is not a\n    // synonym for \"no title\": with a title set and this left at its default, the item renders as\n    // an icon with a gap where the label belongs.\n    '[isTitleUndefined]': 'title() === undefined',\n    '[iconType]': 'icons().iconType',\n    '[iconResourceName]': 'icons().iconResourceName',\n    '[iconImageSource]': 'icons().iconImageSource',\n    '[selectedIconResourceName]': 'icons().selectedIconResourceName',\n    '[selectedIconImageSource]': 'icons().selectedIconImageSource',\n    '[drawableIconResourceName]': 'icons().drawableIconResourceName',\n    '[imageIconResource]': 'icons().imageIconResource',\n    '[selectedDrawableIconResourceName]': 'icons().selectedDrawableIconResourceName',\n    '[selectedImageIconResource]': 'icons().selectedImageIconResource',\n    '[standardAppearance]': 'standard()',\n    '[scrollEdgeAppearance]': 'scrollEdge()',\n  },\n})\nexport class NativeTab {\n  private readonly engine = inject(HostEngine);\n  /** The app's `withTabDefaults`, for an appearance this tab does not bind itself. */\n  private readonly defaults = inject(NATIVE_TAB_DEFAULTS);\n\n  /**\n   * The `RNSTabsScreen` this tab is. The outlet creates the activated route's component inside\n   * it, which is why it is public: a tab is a slot as well as a bar item.\n   */\n  readonly screen: EngineNode;\n\n  constructor() {\n    this.screen = ownHost(inject(ElementRef).nativeElement as EngineNode, this.constructor);\n  }\n\n  /**\n   * The child route this tab selects, as a path segment: `library` for `/tabs/library`. Native\n   * identifies the tab by it too, so it must be unique in the bar.\n   */\n  readonly path = input.required<string>();\n\n  /** The label under the icon. Absent gives an icon-only item. */\n  readonly title = input<string>();\n\n  /** iOS: an SF Symbol name, e.g. `books.vertical.fill`. Shorthand for `[icon]`. */\n  readonly sfSymbol = input<string>();\n\n  /** Android: a drawable resource name. Shorthand for `[icon]`. */\n  readonly drawable = input<string>();\n\n  /** Anything a symbol name cannot say: an image, a template image, an asset-catalogue name. */\n  readonly icon = input<TabIcon>();\n\n  /** Shown while this tab is the selected one. Absent leaves the platform to tint `icon`. */\n  readonly selectedIcon = input<TabIcon>();\n\n  /** One of Apple's standard items, which supplies its own icon and title. */\n  readonly systemItem = input<TabSystemItem>();\n\n  /** The badge on the item: a count, or a single character for a dot. */\n  readonly badge = input<string>();\n\n  /** Announced instead of the title. */\n  readonly accessibilityLabel = input<string>();\n\n  /** How the item looks. Colours are processed here, because native never sees the object's keys. */\n  readonly standardAppearance = input<TabAppearance>();\n\n  /** The same, for when the scroll view behind the bar is at its edge. */\n  readonly scrollEdgeAppearance = input<TabAppearance>();\n\n  protected readonly standard = computed(() =>\n    this.processAppearance(this.standardAppearance() ?? this.defaults().standardAppearance),\n  );\n  protected readonly scrollEdge = computed(() =>\n    this.processAppearance(this.scrollEdgeAppearance() ?? this.defaults().scrollEdgeAppearance),\n  );\n\n  protected readonly icons = computed(() =>\n    tabIconProps(\n      this.iconProps(this.icon() ?? this.shorthand()),\n      this.iconProps(this.selectedIcon()),\n    ),\n  );\n\n  /** `sfSymbol` and `drawable` say the same thing as `icon`, in the form most tabs want. */\n  private shorthand(): TabIcon | undefined {\n    const symbol = this.sfSymbol();\n    if (symbol) return { sfSymbol: symbol };\n    const drawable = this.drawable();\n    return drawable ? { drawable } : undefined;\n  }\n\n  /**\n   * One icon, as the four props native reads it through. A `require()`d asset is an id until the\n   * host resolves it, which is the same thing an `<image src>` needs and the engine only does for\n   * props it knows by name.\n   */\n  private iconProps(icon: TabIcon | undefined): TabIconProps {\n    if (!icon) return {};\n    if ('sfSymbol' in icon) return { iconType: 'sfSymbol', iconResourceName: icon.sfSymbol };\n    if ('xcasset' in icon) return { iconType: 'xcasset', iconResourceName: icon.xcasset };\n    if ('drawable' in icon) return { drawableIconResourceName: icon.drawable };\n\n    const source = this.engine.resolveAsset('image' in icon ? icon.image : icon.template);\n    return nativePlatform() === 'android'\n      ? { imageIconResource: source }\n      : { iconType: 'image' in icon ? 'image' : 'template', iconImageSource: source };\n  }\n\n  private processAppearance(appearance: TabAppearance | undefined): object | undefined {\n    if (!appearance) return undefined;\n    return {\n      ...appearance,\n      stacked: this.processItem(appearance.stacked),\n      inline: this.processItem(appearance.inline),\n      compactInline: this.processItem(appearance.compactInline),\n      tabBarBackgroundColor: this.engine.color(appearance.tabBarBackgroundColor),\n      tabBarShadowColor: this.engine.color(appearance.tabBarShadowColor),\n    };\n  }\n\n  private processItem(item: TabItemAppearance | undefined): object | undefined {\n    if (!item) return undefined;\n    return {\n      normal: this.processState(item.normal),\n      selected: this.processState(item.selected),\n      focused: this.processState(item.focused),\n      disabled: this.processState(item.disabled),\n    };\n  }\n\n  private processState(state: TabStateAppearance | undefined): object | undefined {\n    if (!state) return undefined;\n    return {\n      ...state,\n      // Native declares the weight as a string, and `600` is the natural way to write one.\n      tabBarItemTitleFontWeight:\n        state.tabBarItemTitleFontWeight === undefined\n          ? undefined\n          : String(state.tabBarItemTitleFontWeight),\n      tabBarItemTitleFontColor: this.engine.color(state.tabBarItemTitleFontColor),\n      tabBarItemIconColor: this.engine.color(state.tabBarItemIconColor),\n      tabBarItemBadgeBackgroundColor: this.engine.color(state.tabBarItemBadgeBackgroundColor),\n    };\n  }\n}\n"]}

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

@@ -0,0 +1,138 @@
+/**
+ * A `RouterOutlet` that renders a native tab bar: a `UITabBarController` on iOS, a bottom
+ * navigation bar on Android.
+ *
+ * The outlet's host element *is* the tabs host, and each `<native-tab>` in its content is one
+ * item and the screen behind it. An activated route's component is created on a child view of
+ * the matching tab screen. The screen belongs to the tab declaration and must survive the route
+ * component being destroyed; Angular removes a component's host node when it destroys the ref.
+ *
+ * ```html
+ * <native-tabs-outlet>
+ *   <native-tab path="library" title="Library" sfSymbol="books.vertical.fill" />
+ *   <native-tab path="inbox" title="Inbox" sfSymbol="tray" [badge]="unread()" />
+ * </native-tabs-outlet>
+ * ```
+ *
+ * **Native holds the selection, not us.** The tabs host owns its navigation state and reports
+ * every change - a tap, or one we asked for - through `tabSelected`, carrying a `provenance`
+ * number that increments per change. We send `navStateRequest` with the provenance of the last
+ * state we acknowledged, which is how native tells a stale request from a current one when a tap
+ * and a navigation cross in flight. The alternative, holding the selection in JS, means a tap is
+ * only reflected after a round trip, and the bar lags the finger. See ADR 0006.
+ *
+ * **Each tab keeps its own screen mounted**, so switching away and back finds a tab exactly as it
+ * was: its scroll offset, its text, and its own stack if it has one. That is the reuse strategy
+ * detaching the tab's whole subtree rather than only its leaf.
+ */
+import { type AfterContentInit, 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 NativeTabsOutlet implements RouterOutletContract, AfterContentInit {
+    name: string;
+    readonly supportsBindingToComponentInputs = true;
+    private readonly parentContexts;
+    private readonly renderer;
+    private readonly applicationRef;
+    private readonly injector;
+    private readonly host;
+    private readonly route;
+    /** Optional so the outlet can be driven through `RouterOutletContract` directly, as tests do. */
+    private readonly router;
+    private readonly errors;
+    /** What activation has reported already, so the failed navigation it causes is not reported again. */
+    private readonly reported;
+    /** The app's `withTabDefaults`, for whatever the outlet does not bind itself. */
+    protected readonly defaults: import("@angular/core").Signal<import("./native-bar-defaults.ts").TabDefaults>;
+    private readonly declared;
+    private readonly entries;
+    private selected;
+    /** The provenance of the last state native told us about. Starts before native's first. */
+    private provenance;
+    protected readonly fill: {
+        flex: number;
+    };
+    /** Hide the bar without unmounting the tabs, for a screen that wants the whole window. */
+    readonly barHidden: import("@angular/core").InputSignalWithTransform<boolean | undefined, unknown>;
+    /** The colour of the selected item. iOS. */
+    readonly tintColor: import("@angular/core").InputSignal<string | number | undefined>;
+    /** Behind the tabs, where a screen does not paint. */
+    readonly backgroundColor: import("@angular/core").InputSignal<string | number | undefined>;
+    /** Force the bar's light or dark appearance, whatever the app's is. */
+    readonly colorScheme: import("@angular/core").InputSignal<"light" | "dark" | "inherit" | undefined>;
+    /** iOS 26: let the bar shrink out of the way as content scrolls. */
+    readonly minimizeBehavior: import("@angular/core").InputSignal<"automatic" | "never" | "onScrollDown" | "onScrollUp" | undefined>;
+    /** iOS: `tabSidebar` is the iPad layout, with the tabs down the side. */
+    readonly controllerMode: import("@angular/core").InputSignal<"automatic" | "tabBar" | "tabSidebar" | undefined>;
+    /** Android: keep the bar above the keyboard rather than behind it. */
+    readonly respectsKeyboard: import("@angular/core").InputSignalWithTransform<boolean | undefined, unknown>;
+    constructor();
+    /** A bar nobody has navigated into yet still has to show a selected item. */
+    ngAfterContentInit(): void;
+    /** The tabs in the bar, in template order. Exposed for tests. */
+    get tabKeys(): string[];
+    /** Which tab native is showing. Exposed for tests. */
+    get selectedKey(): string | null;
+    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;
+    deactivate(): void;
+    /**
+     * Hand the live `ComponentRef` back to the router. The tab's screen stays where it is with the
+     * component still inside it, so the tab keeps running while another one is in front.
+     */
+    detach(): ComponentRef<unknown>;
+    attach(ref: ComponentRef<unknown>, route: ActivatedRoute): void;
+    /**
+     * Undo a tab page that threw on its first render, which fails the navigation: its component
+     * and its content view go, and the tab that was showing carries on, change detection and all.
+     */
+    private abandon;
+    /** Route params onto inputs only under `withComponentInputBinding()`, as in the stack outlet. */
+    private bindInputs;
+    /**
+     * Take the bar from the `<native-tab>` elements in the content, once.
+     *
+     * On demand rather than in a lifecycle hook, because the router activates a child route during
+     * this component's creation, before any hook has run - but after the content nodes themselves
+     * exist, which is all this needs.
+     */
+    private readTabs;
+    private entryFor;
+    /** Remember where this tab is, and tell native to show it. */
+    private select;
+    /**
+     * A back with nothing left to pop inside the tab: go to the first tab, where it was left, which
+     * is what a bottom navigation bar does on Android. From the first tab, decline, so the platform
+     * leaves the app. The order tabs were visited in is not retraced, so a back never lands on a
+     * tab the user did not expect. Not while the bar is covered by a screen pushed over it: that
+     * screen's stack answers instead.
+     */
+    private goBack;
+    /** Keep the tab in front on the url it has reached, as long as the url is still inside it. */
+    private follow;
+    private request;
+    /**
+     * Native switched tab. Acknowledge the new state, then navigate: the router is authoritative
+     * about what is on screen (ADR 0003), so the tap becomes a navigation to where that tab was,
+     * and the activation that follows is what fills the tab in.
+     */
+    private onNativeSelect;
+    /**
+     * Native switched tab before the router agreed to. When a guard refuses, or the navigation
+     * fails, the router stays where it was and so must the bar, or it shows a tab nobody is on.
+     * Not while another navigation is under way: that one superseded this, and its own activation
+     * selects the tab it lands on.
+     */
+    private revertUnless;
+    /** A tab's own url, from the outlet's route down. */
+    private pathOf;
+    /** As the stack outlet's: the route, the outlet contexts, and whether the tab is showing. */
+    private outletInjector;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NativeTabsOutlet, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NativeTabsOutlet, "native-tabs-outlet", never, { "barHidden": { "alias": "barHidden"; "required": false; "isSignal": true; }; "tintColor": { "alias": "tintColor"; "required": false; "isSignal": true; }; "backgroundColor": { "alias": "backgroundColor"; "required": false; "isSignal": true; }; "colorScheme": { "alias": "colorScheme"; "required": false; "isSignal": true; }; "minimizeBehavior": { "alias": "minimizeBehavior"; "required": false; "isSignal": true; }; "controllerMode": { "alias": "controllerMode"; "required": false; "isSignal": true; }; "respectsKeyboard": { "alias": "respectsKeyboard"; "required": false; "isSignal": true; }; }, {}, ["declared"], ["*"], true, never>;
+}