@ng-native/router 0.3.0 → 0.5.0

package/dist/tab-safe-area-view.d.ts

@@ -1,15 +1,8 @@
+import { ScreenSafeAreaView, type ScreenSafeAreaEdge } from './screen-safe-area-view.ts';
 import * as i0 from "@angular/core";
 /** The edges of the screen. */
-export type TabSafeAreaEdge = 'top' | 'right' | 'bottom' | 'left';
-export declare class TabSafeAreaView {
-    constructor();
-    /** Which edges to inset: usually `['bottom']`. Absent insets all four. */
-    readonly edges: import("@angular/core").InputSignal<readonly TabSafeAreaEdge[] | undefined>;
-    /**
-     * Native takes all four edges every time, as booleans; a partial record leaves the missing
-     * ones at whatever they were.
-     */
-    protected readonly resolvedEdges: import("@angular/core").Signal<Record<TabSafeAreaEdge, boolean>>;
+export type TabSafeAreaEdge = ScreenSafeAreaEdge;
+export declare class TabSafeAreaView extends ScreenSafeAreaView {
     static ɵfac: i0.ɵɵFactoryDeclaration<TabSafeAreaView, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TabSafeAreaView, "tab-safe-area-view", never, { "edges": { "alias": "edges"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TabSafeAreaView, "tab-safe-area-view", never, {}, {}, never, ["*"], true, never>;
 }

package/dist/tab-safe-area-view.js

@@ -8,56 +8,21 @@
  * </view>
  * ```
  *
- * `<safe-area-view>` cannot do this. Its insets come from the nearest `<safe-area-provider>`,
- * which sits at the root of the app, above the tab bar, and so measures only the window's own
- * unsafe areas: inside a tab its bottom inset is the home indicator, and anything pinned to the
- * bottom of a tab ends up under the bar. On iOS 26 the bar floats over the screen's content, and
- * on Android the bottom navigation bar overlays it, so there is no layout that avoids it either.
- *
- * This is react-native-screens' own `RNSSafeAreaView`, which asks the screen it is in instead.
- * On iOS that is the tab screen's `safeAreaInsets`, which UIKit extends by the tab bar - floating
- * or not, and with the gap under a floating one - on top of the home indicator; a stack inside a
- * tab passes the same insets down to its pages. On Android it is the larger of the bottom
- * navigation bar's height and the system bars. Both follow the bar as it changes, rotates, or is
- * hidden.
- *
- * **The insets are applied as margin, not padding.** Whatever is beneath the inset shows through
- * it, so a panel whose background has to reach the bottom of the screen puts that background on
- * a parent and this inside it, as above: the parent grows by the margin and paints behind the
- * bar, and the content ends where the bar begins.
- *
- * It has to be inside a tab, or a page of a stack inside one. On iOS, with no screen above it, it
- * insets by nothing.
+ * It is `<screen-safe-area-view>` under the name it has inside a tab, where the screen it asks is
+ * the tab's and the bar it clears is the tab bar. See `screen-safe-area-view.ts`.
  */
-import { Component, ElementRef, computed, inject, input } from '@angular/core';
-import { ownHost } from "./own-host.js";
+import { Component } from '@angular/core';
+import { ScreenSafeAreaView } from "./screen-safe-area-view.js";
 import * as i0 from "@angular/core";
-const ALL = ['top', 'right', 'bottom', 'left'];
-export class TabSafeAreaView {
-    constructor() {
-        ownHost(inject(ElementRef).nativeElement, this.constructor);
-    }
-    /** Which edges to inset: usually `['bottom']`. Absent insets all four. */
-    edges = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "edges" }] : /* istanbul ignore next */ []));
-    /**
-     * Native takes all four edges every time, as booleans; a partial record leaves the missing
-     * ones at whatever they were.
-     */
-    resolvedEdges = computed(() => {
-        const edges = this.edges() ?? ALL;
-        return Object.fromEntries(ALL.map((edge) => [edge, edges.includes(edge)]));
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "resolvedEdges" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: TabSafeAreaView, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.0", type: TabSafeAreaView, isStandalone: true, selector: "tab-safe-area-view", inputs: { edges: { classPropertyName: "edges", publicName: "edges", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "edges": "resolvedEdges()" } }, ngImport: i0, template: '<ng-content />', isInline: true });
+export class TabSafeAreaView extends ScreenSafeAreaView {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: TabSafeAreaView, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.2.0", type: TabSafeAreaView, isStandalone: true, selector: "tab-safe-area-view", usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: TabSafeAreaView, decorators: [{
             type: Component,
             args: [{
                     selector: 'tab-safe-area-view',
                     template: '<ng-content />',
-                    host: { '[edges]': 'resolvedEdges()' },
                 }]
-        }], ctorParameters: () => [], propDecorators: { edges: [{ type: i0.Input, args: [{ isSignal: true, alias: "edges", required: false }] }] } });
+        }] });
 //# sourceMappingURL=tab-safe-area-view.js.map

package/dist/tab-safe-area-view.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab-safe-area-view.js","sourceRoot":"","sources":["../src/tab-safe-area-view.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAE/E,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;;AAKxC,MAAM,GAAG,GAA+B,CAAC,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC;AAO3E,MAAM,OAAO,eAAe;IAC1B;QACE,OAAO,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,aAA2B,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;IAC5E,CAAC;IAED,0EAA0E;IACjE,KAAK,GAAG,KAAK;yFAA8B,CAAC;IAErD;;;OAGG;IACgB,aAAa,GAAG,QAAQ,CAAC,GAAG,EAAE;QAC/C,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,EAAE,IAAI,GAAG,CAAC;QAClC,OAAO,MAAM,CAAC,WAAW,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAGxE,CAAC;IACJ,CAAC;sFAAC,CAAC;uGAlBQ,eAAe;2FAAf,eAAe,wQAHhB,gBAAgB;;2FAGf,eAAe;kBAL3B,SAAS;mBAAC;oBACT,QAAQ,EAAE,oBAAoB;oBAC9B,QAAQ,EAAE,gBAAgB;oBAC1B,IAAI,EAAE,EAAE,SAAS,EAAE,iBAAiB,EAAE;iBACvC","sourcesContent":["/**\n * A view that keeps its content clear of the tab bar, as well as the home indicator and the\n * system bars.\n *\n * ```html\n * <view class=\"panel absolute bottom-0 left-0 right-0\">\n *   <tab-safe-area-view [edges]=\"['bottom']\">…</tab-safe-area-view>\n * </view>\n * ```\n *\n * `<safe-area-view>` cannot do this. Its insets come from the nearest `<safe-area-provider>`,\n * which sits at the root of the app, above the tab bar, and so measures only the window's own\n * unsafe areas: inside a tab its bottom inset is the home indicator, and anything pinned to the\n * bottom of a tab ends up under the bar. On iOS 26 the bar floats over the screen's content, and\n * on Android the bottom navigation bar overlays it, so there is no layout that avoids it either.\n *\n * This is react-native-screens' own `RNSSafeAreaView`, which asks the screen it is in instead.\n * On iOS that is the tab screen's `safeAreaInsets`, which UIKit extends by the tab bar - floating\n * or not, and with the gap under a floating one - on top of the home indicator; a stack inside a\n * tab passes the same insets down to its pages. On Android it is the larger of the bottom\n * navigation bar's height and the system bars. Both follow the bar as it changes, rotates, or is\n * hidden.\n *\n * **The insets are applied as margin, not padding.** Whatever is beneath the inset shows through\n * it, so a panel whose background has to reach the bottom of the screen puts that background on\n * a parent and this inside it, as above: the parent grows by the margin and paints behind the\n * bar, and the content ends where the bar begins.\n *\n * It has to be inside a tab, or a page of a stack inside one. On iOS, with no screen above it, it\n * insets by nothing.\n */\nimport { Component, ElementRef, computed, inject, input } from '@angular/core';\nimport type { EngineNode } from '@ng-native/fabric';\nimport { ownHost } from './own-host.ts';\n\n/** The edges of the screen. */\nexport type TabSafeAreaEdge = 'top' | 'right' | 'bottom' | 'left';\n\nconst ALL: readonly TabSafeAreaEdge[] = ['top', 'right', 'bottom', 'left'];\n\n@Component({\n  selector: 'tab-safe-area-view',\n  template: '<ng-content />',\n  host: { '[edges]': 'resolvedEdges()' },\n})\nexport class TabSafeAreaView {\n  constructor() {\n    ownHost(inject(ElementRef).nativeElement as EngineNode, this.constructor);\n  }\n\n  /** Which edges to inset: usually `['bottom']`. Absent insets all four. */\n  readonly edges = input<readonly TabSafeAreaEdge[]>();\n\n  /**\n   * Native takes all four edges every time, as booleans; a partial record leaves the missing\n   * ones at whatever they were.\n   */\n  protected readonly resolvedEdges = computed(() => {\n    const edges = this.edges() ?? ALL;\n    return Object.fromEntries(ALL.map((edge) => [edge, edges.includes(edge)])) as Record<\n      TabSafeAreaEdge,\n      boolean\n    >;\n  });\n}\n"]}
+{"version":3,"file":"tab-safe-area-view.js","sourceRoot":"","sources":["../src/tab-safe-area-view.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAE,kBAAkB,EAA2B,MAAM,4BAA4B,CAAC;;AASzF,MAAM,OAAO,eAAgB,SAAQ,kBAAkB;uGAA1C,eAAe;2FAAf,eAAe,qGAFhB,gBAAgB;;2FAEf,eAAe;kBAJ3B,SAAS;mBAAC;oBACT,QAAQ,EAAE,oBAAoB;oBAC9B,QAAQ,EAAE,gBAAgB;iBAC3B","sourcesContent":["/**\n * A view that keeps its content clear of the tab bar, as well as the home indicator and the\n * system bars.\n *\n * ```html\n * <view class=\"panel absolute bottom-0 left-0 right-0\">\n *   <tab-safe-area-view [edges]=\"['bottom']\">…</tab-safe-area-view>\n * </view>\n * ```\n *\n * It is `<screen-safe-area-view>` under the name it has inside a tab, where the screen it asks is\n * the tab's and the bar it clears is the tab bar. See `screen-safe-area-view.ts`.\n */\nimport { Component } from '@angular/core';\nimport { ScreenSafeAreaView, type ScreenSafeAreaEdge } from './screen-safe-area-view.ts';\n\n/** The edges of the screen. */\nexport type TabSafeAreaEdge = ScreenSafeAreaEdge;\n\n@Component({\n  selector: 'tab-safe-area-view',\n  template: '<ng-content />',\n})\nexport class TabSafeAreaView extends ScreenSafeAreaView {}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-native/router",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "@angular/router over native navigation for Angular Native: stack and tab outlets, native headers and links.",
   "keywords": [
     "angular",
@@ -17,8 +17,8 @@
   "type": "module",
   "main": "dist/index.js",
   "dependencies": {
-    "@ng-native/device": "0.3.0",
-    "@ng-native/fabric": "0.3.0"
+    "@ng-native/device": "0.5.0",
+    "@ng-native/fabric": "0.5.0"
   },
   "peerDependencies": {
     "@angular/common": "^22.0.0",