@ng-native/components 0.0.1 → 0.1.1

package/dist/reanimated.js

@@ -0,0 +1,111 @@
+/**
+ * Reanimated, without React: a style computed on the UI thread, bound to one of our nodes.
+ *
+ * ```ts
+ * import { WorkletStyle, sharedValue, workletStyle } from '@ng-native/components/reanimated';
+ *
+ * protected readonly offset = sharedValue(0);
+ * protected readonly slide = workletStyle([this.offset], (offset) => {
+ *   'worklet';
+ *   return { transform: [{ translateX: offset.value }] };
+ * });
+ * ```
+ * ```html
+ * <view [workletStyle]="slide">
+ * ```
+ *
+ * Deliberately outside the barrel: everything here reaches React Native's
+ * Flow source, which Node cannot parse, and the rest of the package has to stay loadable in the
+ * test suite.
+ *
+ * What makes this work at all is that Reanimated addresses a view by its **shadow node**, not by a
+ * React instance. `getShadowNodeWrapperFromRef` digs one out of a fiber; our engine has held the
+ * same object since it created the node, so there is nothing to dig for. `startMapper` and
+ * `makeMutable` are public, and the whole React half of `useAnimatedStyle` - refs, effects, the
+ * animated component wrapper - is what an Angular directive replaces.
+ *
+ * An app installs `react-native-reanimated` and `react-native-worklets` itself, and gets the
+ * worklet Babel plugin from `babel-preset-expo`, which adds it as soon as the package is present.
+ * Everything else an animation needs - `withTiming`, `withSpring`, `interpolate`, `Easing` - is
+ * imported from `react-native-reanimated` directly: they are plain functions with no React in
+ * them, and re-exporting them here would only add a name to keep in step.
+ */
+import { Directive } from '@angular/core';
+import { makeMutable, startMapper, stopMapper, } from 'react-native-reanimated';
+import { WorkletScrollBase } from "./worklet-scroll.js";
+import { WorkletStyleBase } from "./worklet-style.js";
+import { WORKLETS } from "./worklets.js";
+import * as i0 from "@angular/core";
+/**
+ * `updateProps` is what every animated style in Reanimated goes through, and there is no exported
+ * equivalent. It is a worklet, so it is called from ours rather than from here.
+ *
+ * Two things about the import. It goes through `src/` because that is where the package's own
+ * `react-native` field points and Metro prefers that field: the built `lib/` copy would be a
+ * second Reanimated in the bundle, with module state of its own. And it is a `require`, so that
+ * these sources stay out of our type-checking program, where they fail against settings they were
+ * never written for.
+ */
+const { updateProps } = require('react-native-reanimated/src/updateProps/index.ts');
+export { workletScroll, workletStyle, } from "./worklets.js";
+/**
+ * A value both runtimes can see. Reanimated's own `useSharedValue` is this plus a React ref, and
+ * the ref is the half that does not apply here. Typed as Reanimated's own, so it goes to
+ * `cancelAnimation` and the rest of the library as one of theirs would.
+ */
+export function sharedValue(initial) {
+    return makeMutable(initial);
+}
+const backend = {
+    bind: (target, style) => {
+        // The shape `updateProps` takes: a `{ value }` holder of descriptors, so that the set of
+        // views a style drives can change without the worklet being rebuilt. Ours never does - one
+        // directive drives one node - so a plain object is enough.
+        const descriptors = { value: [{ tag: target.tag, shadowNodeWrapper: target.shadowNode }] };
+        const { values, updater } = style;
+        const id = startMapper(() => {
+            'worklet';
+            updateProps(descriptors, updater(...values));
+        }, values);
+        return () => stopMapper(id);
+    },
+    scroll: (target, spec) => {
+        const { values, handler } = spec;
+        // The same registration a gesture uses, on the name React Native's scroll views emit. The
+        // event still reaches our own listeners: Reanimated observes it rather than consuming it.
+        const id = registerEventHandler((event) => {
+            'worklet';
+            handler(event, ...values);
+        }, 'onScroll', target.tag);
+        return () => unregisterEventHandler(id);
+    },
+};
+/**
+ * Not public, and the same call Reanimated's own `WorkletEventHandler` makes. Reached through
+ * `src/` for the reason `updateProps` is, and required rather than imported so that those sources
+ * stay out of our type-checking program.
+ */
+const { registerEventHandler, unregisterEventHandler } = require('react-native-reanimated/src/core.ts');
+export class WorkletStyle extends WorkletStyleBase {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: WorkletStyle, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: WorkletStyle, isStandalone: true, selector: "[workletStyle]", providers: [{ provide: WORKLETS, useValue: backend }], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: WorkletStyle, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[workletStyle]',
+                    providers: [{ provide: WORKLETS, useValue: backend }],
+                }]
+        }] });
+export class WorkletScroll extends WorkletScrollBase {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: WorkletScroll, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: WorkletScroll, isStandalone: true, selector: "[workletScroll]", providers: [{ provide: WORKLETS, useValue: backend }], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: WorkletScroll, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[workletScroll]',
+                    providers: [{ provide: WORKLETS, useValue: backend }],
+                }]
+        }] });
+//# sourceMappingURL=reanimated.js.map

package/dist/reanimated.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"reanimated.js","sourceRoot":"","sources":["../src/reanimated.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,EACL,WAAW,EACX,WAAW,EACX,UAAU,GAEX,MAAM,yBAAyB,CAAC;AAcjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAuB,MAAM,eAAe,CAAC;;AAf9D;;;;;;;;;GASG;AACH,MAAM,EAAE,WAAW,EAAE,GAAG,OAAO,CAAC,kDAAkD,CAEjF,CAAC;AAKF,OAAO,EACL,aAAa,EACb,YAAY,GAIb,MAAM,eAAe,CAAC;AAEvB;;;;GAIG;AACH,MAAM,UAAU,WAAW,CAAI,OAAU;IACvC,OAAO,WAAW,CAAC,OAAO,CAAC,CAAC;AAC9B,CAAC;AAED,MAAM,OAAO,GAAmB;IAC9B,IAAI,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;QACtB,yFAAyF;QACzF,2FAA2F;QAC3F,2DAA2D;QAC3D,MAAM,WAAW,GAAG,EAAE,KAAK,EAAE,CAAC,EAAE,GAAG,EAAE,MAAM,CAAC,GAAG,EAAE,iBAAiB,EAAE,MAAM,CAAC,UAAU,EAAE,CAAC,EAAE,CAAC;QAC3F,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;QAClC,MAAM,EAAE,GAAG,WAAW,CAAC,GAAG,EAAE;YAC1B,SAAS,CAAC;YACV,WAAW,CAAC,WAAW,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC;QAC/C,CAAC,EAAE,MAAmB,CAAC,CAAC;QACxB,OAAO,GAAG,EAAE,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC;IAC9B,CAAC;IAED,MAAM,EAAE,CAAC,MAAM,EAAE,IAAI,EAAE,EAAE;QACvB,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC;QACjC,0FAA0F;QAC1F,0FAA0F;QAC1F,MAAM,EAAE,GAAG,oBAAoB,CAC7B,CAAC,KAAY,EAAE,EAAE;YACf,SAAS,CAAC;YACV,OAAO,CAAC,KAAK,EAAE,GAAG,MAAM,CAAC,CAAC;QAC5B,CAAC,EACD,UAAU,EACV,MAAM,CAAC,GAAG,CACX,CAAC;QACF,OAAO,GAAG,EAAE,CAAC,sBAAsB,CAAC,EAAE,CAAC,CAAC;IAC1C,CAAC;CACF,CAAC;AAEF;;;;GAIG;AACH,MAAM,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,GACpD,OAAO,CAAC,qCAAqC,CAO5C,CAAC;AAMJ,MAAM,OAAO,YAAa,SAAQ,gBAAgB;uGAArC,YAAY;2FAAZ,YAAY,6DAFZ,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC;;2FAE1C,YAAY;kBAJxB,SAAS;mBAAC;oBACT,QAAQ,EAAE,gBAAgB;oBAC1B,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC;iBACtD;;AAOD,MAAM,OAAO,aAAc,SAAQ,iBAAiB;uGAAvC,aAAa;2FAAb,aAAa,8DAFb,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC;;2FAE1C,aAAa;kBAJzB,SAAS;mBAAC;oBACT,QAAQ,EAAE,iBAAiB;oBAC3B,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC;iBACtD","sourcesContent":["/**\n * Reanimated, without React: a style computed on the UI thread, bound to one of our nodes.\n *\n * ```ts\n * import { WorkletStyle, sharedValue, workletStyle } from '@ng-native/components/reanimated';\n *\n * protected readonly offset = sharedValue(0);\n * protected readonly slide = workletStyle([this.offset], (offset) => {\n *   'worklet';\n *   return { transform: [{ translateX: offset.value }] };\n * });\n * ```\n * ```html\n * <view [workletStyle]=\"slide\">\n * ```\n *\n * Deliberately outside the barrel: everything here reaches React Native's\n * Flow source, which Node cannot parse, and the rest of the package has to stay loadable in the\n * test suite.\n *\n * What makes this work at all is that Reanimated addresses a view by its **shadow node**, not by a\n * React instance. `getShadowNodeWrapperFromRef` digs one out of a fiber; our engine has held the\n * same object since it created the node, so there is nothing to dig for. `startMapper` and\n * `makeMutable` are public, and the whole React half of `useAnimatedStyle` - refs, effects, the\n * animated component wrapper - is what an Angular directive replaces.\n *\n * An app installs `react-native-reanimated` and `react-native-worklets` itself, and gets the\n * worklet Babel plugin from `babel-preset-expo`, which adds it as soon as the package is present.\n * Everything else an animation needs - `withTiming`, `withSpring`, `interpolate`, `Easing` - is\n * imported from `react-native-reanimated` directly: they are plain functions with no React in\n * them, and re-exporting them here would only add a name to keep in step.\n */\nimport { Directive } from '@angular/core';\nimport {\n  makeMutable,\n  startMapper,\n  stopMapper,\n  type SharedValue as Mutable,\n} from 'react-native-reanimated';\n/**\n * `updateProps` is what every animated style in Reanimated goes through, and there is no exported\n * equivalent. It is a worklet, so it is called from ours rather than from here.\n *\n * Two things about the import. It goes through `src/` because that is where the package's own\n * `react-native` field points and Metro prefers that field: the built `lib/` copy would be a\n * second Reanimated in the bundle, with module state of its own. And it is a `require`, so that\n * these sources stay out of our type-checking program, where they fail against settings they were\n * never written for.\n */\nconst { updateProps } = require('react-native-reanimated/src/updateProps/index.ts') as {\n  updateProps(descriptors: object, updates: Record<string, unknown>): void;\n};\nimport { WorkletScrollBase } from './worklet-scroll.ts';\nimport { WorkletStyleBase } from './worklet-style.ts';\nimport { WORKLETS, type WorkletBackend } from './worklets.ts';\n\nexport {\n  workletScroll,\n  workletStyle,\n  type SharedValue,\n  type WorkletScrollSpec,\n  type WorkletStyleSpec,\n} from './worklets.ts';\n\n/**\n * A value both runtimes can see. Reanimated's own `useSharedValue` is this plus a React ref, and\n * the ref is the half that does not apply here. Typed as Reanimated's own, so it goes to\n * `cancelAnimation` and the rest of the library as one of theirs would.\n */\nexport function sharedValue<T>(initial: T): Mutable<T> {\n  return makeMutable(initial);\n}\n\nconst backend: WorkletBackend = {\n  bind: (target, style) => {\n    // The shape `updateProps` takes: a `{ value }` holder of descriptors, so that the set of\n    // views a style drives can change without the worklet being rebuilt. Ours never does - one\n    // directive drives one node - so a plain object is enough.\n    const descriptors = { value: [{ tag: target.tag, shadowNodeWrapper: target.shadowNode }] };\n    const { values, updater } = style;\n    const id = startMapper(() => {\n      'worklet';\n      updateProps(descriptors, updater(...values));\n    }, values as unknown[]);\n    return () => stopMapper(id);\n  },\n\n  scroll: (target, spec) => {\n    const { values, handler } = spec;\n    // The same registration a gesture uses, on the name React Native's scroll views emit. The\n    // event still reaches our own listeners: Reanimated observes it rather than consuming it.\n    const id = registerEventHandler(\n      (event: never) => {\n        'worklet';\n        handler(event, ...values);\n      },\n      'onScroll',\n      target.tag,\n    );\n    return () => unregisterEventHandler(id);\n  },\n};\n\n/**\n * Not public, and the same call Reanimated's own `WorkletEventHandler` makes. Reached through\n * `src/` for the reason `updateProps` is, and required rather than imported so that those sources\n * stay out of our type-checking program.\n */\nconst { registerEventHandler, unregisterEventHandler } =\n  require('react-native-reanimated/src/core.ts') as {\n    registerEventHandler(\n      worklet: (event: never) => void,\n      eventName: string,\n      emitterReactTag: number,\n    ): number;\n    unregisterEventHandler(id: number): void;\n  };\n\n@Directive({\n  selector: '[workletStyle]',\n  providers: [{ provide: WORKLETS, useValue: backend }],\n})\nexport class WorkletStyle extends WorkletStyleBase {}\n\n@Directive({\n  selector: '[workletScroll]',\n  providers: [{ provide: WORKLETS, useValue: backend }],\n})\nexport class WorkletScroll extends WorkletScrollBase {}\n"]}

package/dist/refresh-control.d.ts

@@ -0,0 +1,50 @@
+import { type AfterViewChecked } from '@angular/core';
+import { ViewBase } from './view-base.ts';
+import * as i0 from "@angular/core";
+/**
+ * Pull to refresh, as a child of a scroll view. Commits as `PullToRefreshView` on iOS and
+ * `AndroidSwipeRefreshLayout` on Android.
+ *
+ * `refreshing` is a model: the pull fires `(refresh)`, the app sets `refreshing` to true while
+ * it works and back to false when done. Native shows the spinner the instant the user pulls,
+ * before the app has said anything, so the two can disagree. RN's wrapper reconciles them with
+ * `setNativeRefreshing`; so does this. If the app never sets `refreshing` after a pull, the
+ * spinner is stopped again, which is what RN's documentation warns about.
+ *
+ * On Android the swipe layout has to be the scroll view's *parent*, as RN's `ScrollView.js` makes
+ * it, with the layout half of the scroll view's style moved onto it. It is written as a child all
+ * the same, like on iOS, and moved into place after each pass; see `SwipeRefreshLayout`.
+ */
+export declare class RefreshControl extends ViewBase implements AfterViewChecked {
+    /** Whether the spinner shows. Two-way: `[(refreshing)]`. */
+    readonly refreshing: import("@angular/core").ModelSignal<boolean>;
+    /** How far from the top the spinner sits. */
+    readonly progressViewOffset: import("@angular/core").InputSignalWithTransform<number | undefined, unknown>;
+    /** iOS: the spinner's colour. */
+    readonly tintColor: import("@angular/core").InputSignal<string | undefined>;
+    /** iOS: a label under the spinner. */
+    readonly title: import("@angular/core").InputSignal<string | undefined>;
+    /** iOS: the label's colour. */
+    readonly titleColor: import("@angular/core").InputSignal<string | undefined>;
+    /** Android: the colours the spinner cycles through. */
+    readonly colors: import("@angular/core").InputSignal<readonly string[] | undefined>;
+    /** Android: whether pulling does anything. Defaults to true. */
+    readonly enabled: import("@angular/core").InputSignalWithTransform<boolean | undefined, unknown>;
+    /** Android: the spinner's background. */
+    readonly progressBackgroundColor: import("@angular/core").InputSignal<string | undefined>;
+    /** Android: the spinner's size. */
+    readonly size: import("@angular/core").InputSignal<"large" | "default" | undefined>;
+    private readonly nativeRefreshing;
+    /** Android only: what moves this control's node to wrap the scroll view. */
+    private readonly wrap;
+    constructor();
+    /**
+     * The scroll view's style is written in the pass that declared this control, so splitting it
+     * here reaches native in the same commit.
+     */
+    ngAfterViewChecked(): void;
+    /** Native has already started spinning; the app is told and expected to set `refreshing`. */
+    protected onNativeRefresh(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RefreshControl, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RefreshControl, "refresh-control", never, { "refreshing": { "alias": "refreshing"; "required": false; "isSignal": true; }; "progressViewOffset": { "alias": "progressViewOffset"; "required": false; "isSignal": true; }; "tintColor": { "alias": "tintColor"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "titleColor": { "alias": "titleColor"; "required": false; "isSignal": true; }; "colors": { "alias": "colors"; "required": false; "isSignal": true; }; "enabled": { "alias": "enabled"; "required": false; "isSignal": true; }; "progressBackgroundColor": { "alias": "progressBackgroundColor"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "refreshing": "refreshingChange"; }, never, never, true, never>;
+}

package/dist/refresh-control.js

@@ -0,0 +1,103 @@
+import { Directive, DestroyRef, afterEveryRender, effect, inject, input, model, signal, } from '@angular/core';
+import { Engine, nativePlatform } from '@ng-native/fabric';
+import { SwipeRefreshLayout } from "./swipe-refresh-layout.js";
+import { optionalBoolean, optionalNumber } from "./transforms.js";
+import { ViewBase } from "./view-base.js";
+import * as i0 from "@angular/core";
+/**
+ * Pull to refresh, as a child of a scroll view. Commits as `PullToRefreshView` on iOS and
+ * `AndroidSwipeRefreshLayout` on Android.
+ *
+ * `refreshing` is a model: the pull fires `(refresh)`, the app sets `refreshing` to true while
+ * it works and back to false when done. Native shows the spinner the instant the user pulls,
+ * before the app has said anything, so the two can disagree. RN's wrapper reconciles them with
+ * `setNativeRefreshing`; so does this. If the app never sets `refreshing` after a pull, the
+ * spinner is stopped again, which is what RN's documentation warns about.
+ *
+ * On Android the swipe layout has to be the scroll view's *parent*, as RN's `ScrollView.js` makes
+ * it, with the layout half of the scroll view's style moved onto it. It is written as a child all
+ * the same, like on iOS, and moved into place after each pass; see `SwipeRefreshLayout`.
+ */
+export class RefreshControl extends ViewBase {
+    /** Whether the spinner shows. Two-way: `[(refreshing)]`. */
+    refreshing = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "refreshing" }] : /* istanbul ignore next */ []));
+    /** How far from the top the spinner sits. */
+    progressViewOffset = input(undefined, { ...(ngDevMode ? { debugName: "progressViewOffset" } : /* istanbul ignore next */ {}), transform: optionalNumber });
+    /** iOS: the spinner's colour. */
+    tintColor = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "tintColor" }] : /* istanbul ignore next */ []));
+    /** iOS: a label under the spinner. */
+    title = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "title" }] : /* istanbul ignore next */ []));
+    /** iOS: the label's colour. */
+    titleColor = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "titleColor" }] : /* istanbul ignore next */ []));
+    /** Android: the colours the spinner cycles through. */
+    colors = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "colors" }] : /* istanbul ignore next */ []));
+    /** Android: whether pulling does anything. Defaults to true. */
+    enabled = input(undefined, { ...(ngDevMode ? { debugName: "enabled" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    /** Android: the spinner's background. */
+    progressBackgroundColor = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "progressBackgroundColor" }] : /* istanbul ignore next */ []));
+    /** Android: the spinner's size. */
+    size = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "size" }] : /* istanbul ignore next */ []));
+    nativeRefreshing = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "nativeRefreshing" }] : /* istanbul ignore next */ []));
+    /** Android only: what moves this control's node to wrap the scroll view. */
+    wrap = nativePlatform() === 'android'
+        ? new SwipeRefreshLayout(inject(Engine), this.node)
+        : null;
+    constructor() {
+        super();
+        const wrap = this.wrap;
+        if (wrap) {
+            // After every render as well as after this control's own pass: Angular moving the scroll
+            // view happens in some other component's pass, and this one's hooks would not see it.
+            afterEveryRender(() => wrap.sync());
+            inject(DestroyRef).onDestroy(() => wrap.unwrap());
+        }
+        effect(() => {
+            const desired = this.refreshing();
+            const native = this.nativeRefreshing();
+            if (native !== null && native !== desired) {
+                this.nativeRefreshing.set(desired);
+                this.engine.dispatchCommand(this.node, 'setNativeRefreshing', [desired]);
+            }
+        });
+    }
+    /**
+     * The scroll view's style is written in the pass that declared this control, so splitting it
+     * here reaches native in the same commit.
+     */
+    ngAfterViewChecked() {
+        this.wrap?.sync();
+    }
+    /** Native has already started spinning; the app is told and expected to set `refreshing`. */
+    onNativeRefresh() {
+        this.nativeRefreshing.set(true);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: RefreshControl, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.2.0", type: RefreshControl, isStandalone: true, selector: "refresh-control", inputs: { refreshing: { classPropertyName: "refreshing", publicName: "refreshing", isSignal: true, isRequired: false, transformFunction: null }, progressViewOffset: { classPropertyName: "progressViewOffset", publicName: "progressViewOffset", isSignal: true, isRequired: false, transformFunction: null }, tintColor: { classPropertyName: "tintColor", publicName: "tintColor", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, titleColor: { classPropertyName: "titleColor", publicName: "titleColor", isSignal: true, isRequired: false, transformFunction: null }, colors: { classPropertyName: "colors", publicName: "colors", isSignal: true, isRequired: false, transformFunction: null }, enabled: { classPropertyName: "enabled", publicName: "enabled", isSignal: true, isRequired: false, transformFunction: null }, progressBackgroundColor: { classPropertyName: "progressBackgroundColor", publicName: "progressBackgroundColor", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { refreshing: "refreshingChange" }, host: { listeners: { "refresh": "onNativeRefresh()" }, properties: { "refreshing": "refreshing()", "progressViewOffset": "progressViewOffset()", "tintColor": "tintColor()", "title": "title()", "titleColor": "titleColor()", "colors": "colors()", "enabled": "enabled()", "progressBackgroundColor": "progressBackgroundColor()", "size": "size()" } }, usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: RefreshControl, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'refresh-control',
+                    host: {
+                        '[refreshing]': 'refreshing()',
+                        '[progressViewOffset]': 'progressViewOffset()',
+                        '[tintColor]': 'tintColor()',
+                        '[title]': 'title()',
+                        '[titleColor]': 'titleColor()',
+                        '[colors]': 'colors()',
+                        '[enabled]': 'enabled()',
+                        '[progressBackgroundColor]': 'progressBackgroundColor()',
+                        '[size]': 'size()',
+                        '(refresh)': 'onNativeRefresh()',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { refreshing: [{ type: i0.Input, args: [{ isSignal: true, alias: "refreshing", required: false }] }, { type: i0.Output, args: ["refreshingChange"] }], progressViewOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "progressViewOffset", required: false }] }], tintColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "tintColor", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], titleColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleColor", required: false }] }], colors: [{ type: i0.Input, args: [{ isSignal: true, alias: "colors", required: false }] }], enabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "enabled", required: false }] }], progressBackgroundColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "progressBackgroundColor", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+//# sourceMappingURL=refresh-control.js.map

package/dist/refresh-control.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"refresh-control.js","sourceRoot":"","sources":["../src/refresh-control.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,SAAS,EACT,UAAU,EACV,gBAAgB,EAChB,MAAM,EACN,MAAM,EACN,KAAK,EACL,KAAK,EACL,MAAM,GACP,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,MAAM,EAAmB,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAC5E,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAClE,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;;AAE1C;;;;;;;;;;;;;GAaG;AAgBH,MAAM,OAAO,cAAe,SAAQ,QAAQ;IAC1C,4DAA4D;IACnD,UAAU,GAAG,KAAK,CAAC,KAAK;mFAAC,CAAC;IACnC,6CAA6C;IACpC,kBAAkB,GAAG,KAAK,CAAC,SAAS,0FAAI,SAAS,EAAE,cAAc,GAAG,CAAC;IAC9E,iCAAiC;IACxB,SAAS,GAAG,KAAK;6FAAU,CAAC;IACrC,sCAAsC;IAC7B,KAAK,GAAG,KAAK;yFAAU,CAAC;IACjC,+BAA+B;IACtB,UAAU,GAAG,KAAK;8FAAU,CAAC;IACtC,uDAAuD;IAC9C,MAAM,GAAG,KAAK;0FAAqB,CAAC;IAC7C,gEAAgE;IACvD,OAAO,GAAG,KAAK,CAAC,SAAS,+EAAI,SAAS,EAAE,eAAe,GAAG,CAAC;IACpE,yCAAyC;IAChC,uBAAuB,GAAG,KAAK;2GAAU,CAAC;IACnD,mCAAmC;IAC1B,IAAI,GAAG,KAAK;wFAAuB,CAAC;IAE5B,gBAAgB,GAAG,MAAM,CAAiB,IAAI;yFAAC,CAAC;IAEjE,4EAA4E;IAC3D,IAAI,GACnB,cAAc,EAAE,KAAK,SAAS;QAC5B,CAAC,CAAC,IAAI,kBAAkB,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,IAAkB,CAAC;QACjE,CAAC,CAAC,IAAI,CAAC;IAEX;QACE,KAAK,EAAE,CAAC;QACR,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;QACvB,IAAI,IAAI,EAAE,CAAC;YACT,yFAAyF;YACzF,sFAAsF;YACtF,gBAAgB,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;YACpC,MAAM,CAAC,UAAU,CAAC,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;QACpD,CAAC;QACD,MAAM,CAAC,GAAG,EAAE;YACV,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;YAClC,MAAM,MAAM,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC;YACvC,IAAI,MAAM,KAAK,IAAI,IAAI,MAAM,KAAK,OAAO,EAAE,CAAC;gBAC1C,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;gBACnC,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,EAAE,qBAAqB,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;YAC3E,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAED;;;OAGG;IACH,kBAAkB;QAChB,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,CAAC;IACpB,CAAC;IAED,6FAA6F;IACnF,eAAe;QACvB,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;IAClC,CAAC;uGA1DU,cAAc;2FAAd,cAAc;;2FAAd,cAAc;kBAf1B,SAAS;mBAAC;oBACT,QAAQ,EAAE,iBAAiB;oBAC3B,IAAI,EAAE;wBACJ,cAAc,EAAE,cAAc;wBAC9B,sBAAsB,EAAE,sBAAsB;wBAC9C,aAAa,EAAE,aAAa;wBAC5B,SAAS,EAAE,SAAS;wBACpB,cAAc,EAAE,cAAc;wBAC9B,UAAU,EAAE,UAAU;wBACtB,WAAW,EAAE,WAAW;wBACxB,2BAA2B,EAAE,2BAA2B;wBACxD,QAAQ,EAAE,QAAQ;wBAClB,WAAW,EAAE,mBAAmB;qBACjC;iBACF","sourcesContent":["import {\n  type AfterViewChecked,\n  Directive,\n  DestroyRef,\n  afterEveryRender,\n  effect,\n  inject,\n  input,\n  model,\n  signal,\n} from '@angular/core';\nimport { Engine, type EngineNode, nativePlatform } from '@ng-native/fabric';\nimport { SwipeRefreshLayout } from './swipe-refresh-layout.ts';\nimport { optionalBoolean, optionalNumber } from './transforms.ts';\nimport { ViewBase } from './view-base.ts';\n\n/**\n * Pull to refresh, as a child of a scroll view. Commits as `PullToRefreshView` on iOS and\n * `AndroidSwipeRefreshLayout` on Android.\n *\n * `refreshing` is a model: the pull fires `(refresh)`, the app sets `refreshing` to true while\n * it works and back to false when done. Native shows the spinner the instant the user pulls,\n * before the app has said anything, so the two can disagree. RN's wrapper reconciles them with\n * `setNativeRefreshing`; so does this. If the app never sets `refreshing` after a pull, the\n * spinner is stopped again, which is what RN's documentation warns about.\n *\n * On Android the swipe layout has to be the scroll view's *parent*, as RN's `ScrollView.js` makes\n * it, with the layout half of the scroll view's style moved onto it. It is written as a child all\n * the same, like on iOS, and moved into place after each pass; see `SwipeRefreshLayout`.\n */\n@Directive({\n  selector: 'refresh-control',\n  host: {\n    '[refreshing]': 'refreshing()',\n    '[progressViewOffset]': 'progressViewOffset()',\n    '[tintColor]': 'tintColor()',\n    '[title]': 'title()',\n    '[titleColor]': 'titleColor()',\n    '[colors]': 'colors()',\n    '[enabled]': 'enabled()',\n    '[progressBackgroundColor]': 'progressBackgroundColor()',\n    '[size]': 'size()',\n    '(refresh)': 'onNativeRefresh()',\n  },\n})\nexport class RefreshControl extends ViewBase implements AfterViewChecked {\n  /** Whether the spinner shows. Two-way: `[(refreshing)]`. */\n  readonly refreshing = model(false);\n  /** How far from the top the spinner sits. */\n  readonly progressViewOffset = input(undefined, { transform: optionalNumber });\n  /** iOS: the spinner's colour. */\n  readonly tintColor = input<string>();\n  /** iOS: a label under the spinner. */\n  readonly title = input<string>();\n  /** iOS: the label's colour. */\n  readonly titleColor = input<string>();\n  /** Android: the colours the spinner cycles through. */\n  readonly colors = input<readonly string[]>();\n  /** Android: whether pulling does anything. Defaults to true. */\n  readonly enabled = input(undefined, { transform: optionalBoolean });\n  /** Android: the spinner's background. */\n  readonly progressBackgroundColor = input<string>();\n  /** Android: the spinner's size. */\n  readonly size = input<'default' | 'large'>();\n\n  private readonly nativeRefreshing = signal<boolean | null>(null);\n\n  /** Android only: what moves this control's node to wrap the scroll view. */\n  private readonly wrap =\n    nativePlatform() === 'android'\n      ? new SwipeRefreshLayout(inject(Engine), this.node as EngineNode)\n      : null;\n\n  constructor() {\n    super();\n    const wrap = this.wrap;\n    if (wrap) {\n      // After every render as well as after this control's own pass: Angular moving the scroll\n      // view happens in some other component's pass, and this one's hooks would not see it.\n      afterEveryRender(() => wrap.sync());\n      inject(DestroyRef).onDestroy(() => wrap.unwrap());\n    }\n    effect(() => {\n      const desired = this.refreshing();\n      const native = this.nativeRefreshing();\n      if (native !== null && native !== desired) {\n        this.nativeRefreshing.set(desired);\n        this.engine.dispatchCommand(this.node, 'setNativeRefreshing', [desired]);\n      }\n    });\n  }\n\n  /**\n   * The scroll view's style is written in the pass that declared this control, so splitting it\n   * here reaches native in the same commit.\n   */\n  ngAfterViewChecked(): void {\n    this.wrap?.sync();\n  }\n\n  /** Native has already started spinning; the app is told and expected to set `refreshing`. */\n  protected onNativeRefresh(): void {\n    this.nativeRefreshing.set(true);\n  }\n}\n"]}

package/dist/safe-area-provider.d.ts

@@ -0,0 +1,11 @@
+import * as i0 from "@angular/core";
+export declare class SafeAreaProvider {
+    /**
+     * Whether what this measures becomes `SafeArea.insets`. The app has one safe area; a second
+     * provider inside a modal is there so native descendants can find one, not to redefine it.
+     */
+    readonly reportInsets: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<SafeAreaProvider, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SafeAreaProvider, "safe-area-provider", never, { "reportInsets": { "alias": "reportInsets"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}

package/dist/safe-area-provider.js

@@ -0,0 +1,70 @@
+/**
+ * The view that measures the safe area and reports it, for the layouts that need the numbers.
+ *
+ * ```html
+ * <safe-area-provider>
+ *   <native-stack-outlet />
+ * </safe-area-provider>
+ * ```
+ *
+ * One, at the root, wrapping everything. What it measures is its own frame and the insets around
+ * it, which is why it has to be the thing filling the window rather than a view somewhere inside
+ * it. It fills by default and paints nothing.
+ *
+ * **A `<safe-area-view>` needs one above it**, which is less obvious than it sounds. The native
+ * view walks its superviews for a provider and falls back to reading its own insets - but only
+ * once, as it enters the window, before it has been laid out, and nothing tells it again. With no
+ * provider it therefore insets by zero and looks like it is working.
+ *
+ * That is also why a presented screen needs its own: it is outside the stack's view tree, which
+ * is the same reason it has no header. Give a modal a provider of its own with
+ * `[reportInsets]="false"`, so its geometry stays out of the app-wide `SafeArea` while it is up.
+ */
+import { Component, DestroyRef, ElementRef, Renderer2, booleanAttribute, inject, input, } from '@angular/core';
+import { SafeArea } from '@ng-native/device';
+import { Engine, claimHost } from '@ng-native/fabric';
+import { registerSafeAreaComponents } from "./safe-area.js";
+import * as i0 from "@angular/core";
+/** The insets, in the form the cascade carries: one custom property per edge, in points. */
+function insetTokens(insets) {
+    return {
+        '--safe-area-inset-top': { length: insets.top },
+        '--safe-area-inset-right': { length: insets.right },
+        '--safe-area-inset-bottom': { length: insets.bottom },
+        '--safe-area-inset-left': { length: insets.left },
+    };
+}
+export class SafeAreaProvider {
+    /**
+     * Whether what this measures becomes `SafeArea.insets`. The app has one safe area; a second
+     * provider inside a modal is there so native descendants can find one, not to redefine it.
+     */
+    reportInsets = input(true, { ...(ngDevMode ? { debugName: "reportInsets" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    constructor() {
+        registerSafeAreaComponents();
+        const host = inject(ElementRef).nativeElement;
+        claimHost(host);
+        const area = inject(SafeArea);
+        const engine = inject(Engine, { optional: true });
+        const stop = inject(Renderer2).listen(host, 'insetsChange', (event) => {
+            const change = event?.nativeEvent;
+            if (!change || !this.reportInsets())
+                return;
+            area.report(change.insets, change.frame);
+            // Also published to the stylesheet, where a padding that clears the home indicator
+            // belongs. `env()` on the web; a seeded custom property here.
+            engine?.updateTokens(insetTokens(change.insets));
+        });
+        inject(DestroyRef).onDestroy(stop);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: SafeAreaProvider, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.0", type: SafeAreaProvider, isStandalone: true, selector: "safe-area-provider", inputs: { reportInsets: { classPropertyName: "reportInsets", publicName: "reportInsets", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '<ng-content />', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: SafeAreaProvider, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'safe-area-provider',
+                    template: '<ng-content />',
+                }]
+        }], ctorParameters: () => [], propDecorators: { reportInsets: [{ type: i0.Input, args: [{ isSignal: true, alias: "reportInsets", required: false }] }] } });
+//# sourceMappingURL=safe-area-provider.js.map

package/dist/safe-area-provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"safe-area-provider.js","sourceRoot":"","sources":["../src/safe-area-provider.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,OAAO,EACL,SAAS,EACT,UAAU,EACV,UAAU,EACV,SAAS,EACT,gBAAgB,EAChB,MAAM,EACN,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,QAAQ,EAA2B,MAAM,mBAAmB,CAAC;AACtE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAiB,MAAM,mBAAmB,CAAC;AACrE,OAAO,EAAE,0BAA0B,EAAE,MAAM,gBAAgB,CAAC;;AAE5D,4FAA4F;AAC5F,SAAS,WAAW,CAAC,MAAc;IACjC,OAAO;QACL,uBAAuB,EAAE,EAAE,MAAM,EAAE,MAAM,CAAC,GAAG,EAAE;QAC/C,yBAAyB,EAAE,EAAE,MAAM,EAAE,MAAM,CAAC,KAAK,EAAE;QACnD,0BAA0B,EAAE,EAAE,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE;QACrD,wBAAwB,EAAE,EAAE,MAAM,EAAE,MAAM,CAAC,IAAI,EAAE;KAClD,CAAC;AACJ,CAAC;AAWD,MAAM,OAAO,gBAAgB;IAC3B;;;OAGG;IACM,YAAY,GAAG,KAAK,CAAC,IAAI,oFAAI,SAAS,EAAE,gBAAgB,GAAG,CAAC;IAErE;QACE,0BAA0B,EAAE,CAAC;QAC7B,MAAM,IAAI,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC,aAAyB,CAAC;QAC1D,SAAS,CAAC,IAAI,CAAC,CAAC;QAEhB,MAAM,IAAI,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;QAC9B,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;QAClD,MAAM,IAAI,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,MAAM,CACnC,IAAI,EACJ,cAAc,EACd,CAAC,KAAqC,EAAE,EAAE;YACxC,MAAM,MAAM,GAAG,KAAK,EAAE,WAAW,CAAC;YAClC,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;gBAAE,OAAO;YAC5C,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC;YACzC,mFAAmF;YACnF,8DAA8D;YAC9D,MAAM,EAAE,YAAY,CAAC,WAAW,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC;QACnD,CAAC,CACF,CAAC;QACF,MAAM,CAAC,UAAU,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;IACrC,CAAC;uGA3BU,gBAAgB;2FAAhB,gBAAgB,uOAFjB,gBAAgB;;2FAEf,gBAAgB;kBAJ5B,SAAS;mBAAC;oBACT,QAAQ,EAAE,oBAAoB;oBAC9B,QAAQ,EAAE,gBAAgB;iBAC3B","sourcesContent":["/**\n * The view that measures the safe area and reports it, for the layouts that need the numbers.\n *\n * ```html\n * <safe-area-provider>\n *   <native-stack-outlet />\n * </safe-area-provider>\n * ```\n *\n * One, at the root, wrapping everything. What it measures is its own frame and the insets around\n * it, which is why it has to be the thing filling the window rather than a view somewhere inside\n * it. It fills by default and paints nothing.\n *\n * **A `<safe-area-view>` needs one above it**, which is less obvious than it sounds. The native\n * view walks its superviews for a provider and falls back to reading its own insets - but only\n * once, as it enters the window, before it has been laid out, and nothing tells it again. With no\n * provider it therefore insets by zero and looks like it is working.\n *\n * That is also why a presented screen needs its own: it is outside the stack's view tree, which\n * is the same reason it has no header. Give a modal a provider of its own with\n * `[reportInsets]=\"false\"`, so its geometry stays out of the app-wide `SafeArea` while it is up.\n */\nimport {\n  Component,\n  DestroyRef,\n  ElementRef,\n  Renderer2,\n  booleanAttribute,\n  inject,\n  input,\n} from '@angular/core';\nimport { SafeArea, type Frame, type Insets } from '@ng-native/device';\nimport { Engine, claimHost, type HostNode } from '@ng-native/fabric';\nimport { registerSafeAreaComponents } from './safe-area.ts';\n\n/** The insets, in the form the cascade carries: one custom property per edge, in points. */\nfunction insetTokens(insets: Insets): Record<string, { length: number }> {\n  return {\n    '--safe-area-inset-top': { length: insets.top },\n    '--safe-area-inset-right': { length: insets.right },\n    '--safe-area-inset-bottom': { length: insets.bottom },\n    '--safe-area-inset-left': { length: insets.left },\n  };\n}\n\ninterface InsetsChange {\n  readonly insets: Insets;\n  readonly frame: Frame;\n}\n\n@Component({\n  selector: 'safe-area-provider',\n  template: '<ng-content />',\n})\nexport class SafeAreaProvider {\n  /**\n   * Whether what this measures becomes `SafeArea.insets`. The app has one safe area; a second\n   * provider inside a modal is there so native descendants can find one, not to redefine it.\n   */\n  readonly reportInsets = input(true, { transform: booleanAttribute });\n\n  constructor() {\n    registerSafeAreaComponents();\n    const host = inject(ElementRef).nativeElement as HostNode;\n    claimHost(host);\n\n    const area = inject(SafeArea);\n    const engine = inject(Engine, { optional: true });\n    const stop = inject(Renderer2).listen(\n      host,\n      'insetsChange',\n      (event: { nativeEvent?: InsetsChange }) => {\n        const change = event?.nativeEvent;\n        if (!change || !this.reportInsets()) return;\n        area.report(change.insets, change.frame);\n        // Also published to the stylesheet, where a padding that clears the home indicator\n        // belongs. `env()` on the web; a seeded custom property here.\n        engine?.updateTokens(insetTokens(change.insets));\n      },\n    );\n    inject(DestroyRef).onDestroy(stop);\n  }\n}\n"]}

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

@@ -0,0 +1,22 @@
+import { type SafeAreaEdge, type SafeAreaEdges } from './safe-area.ts';
+import { ViewBase } from './view-base.ts';
+import * as i0 from "@angular/core";
+/** How an edge combines with the padding already there. */
+export type SafeAreaEdgeMode = 'additive' | 'maximum' | 'off';
+export declare class SafeAreaView extends ViewBase {
+    constructor();
+    /**
+     * Which edges to inset: `['top', 'bottom']`, or a record for per-edge modes. Absent insets all
+     * four.
+     */
+    readonly edges: import("@angular/core").InputSignal<SafeAreaEdges | undefined>;
+    /** Whether the insets become padding, which is the default, or margin. */
+    readonly mode: import("@angular/core").InputSignal<"padding" | "margin" | undefined>;
+    /**
+     * Native takes all four edges every time - a partial record leaves the missing ones at whatever
+     * they were, which reads as an inset that will not go away.
+     */
+    protected readonly resolvedEdges: import("@angular/core").Signal<Record<SafeAreaEdge, SafeAreaEdgeMode>>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SafeAreaView, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SafeAreaView, "safe-area-view", never, { "edges": { "alias": "edges"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/dist/safe-area-view.js

@@ -0,0 +1,77 @@
+/**
+ * A view whose padding - or margin - keeps its content clear of the notch, the status bar, the
+ * home indicator, and on Android the display cutout and the navigation bar.
+ *
+ * The insets are applied natively, in the shadow node, so nothing crosses to JavaScript and there
+ * is no frame where the content sits under the system's furniture before moving out from under
+ * it. That is the reason to prefer this over reading `SafeArea.insets` and doing the arithmetic:
+ * the arithmetic is a frame late and re-runs on every rotation.
+ *
+ * ```html
+ * <safe-area-view [edges]="['top', 'bottom']" [style]="fill">…</safe-area-view>
+ * ```
+ *
+ * Which edges matter is usually a subset. A screen in a native stack already has its header
+ * covering the top, so it wants `bottom` alone; a presented sheet draws its own chrome and wants
+ * both. Passing nothing insets all four, which is what React Native's own deprecated
+ * `SafeAreaView` did.
+ *
+ * `maximum` is the third mode per edge and exists for a view that already has padding: `additive`
+ * adds the inset to it, `maximum` takes whichever is larger, and `off` ignores that edge.
+ *
+ * The insets come from the nearest `<safe-area-provider>` above it in the native view tree. A
+ * screen presented as a full-screen modal is not below the app's root provider - UIKit presents
+ * it from a view controller of its own - so there the view finds no insets and sits under the
+ * status bar. Such a screen wraps its content in a `<safe-area-provider>` of its own.
+ *
+ * The app must have `react-native-safe-area-context` installed, which is where the native
+ * component comes from; none of its JavaScript is imported. React Native's own `SafeAreaView` is
+ * deprecated in favour of it, is iOS-only, and offers no control over which edges apply.
+ */
+import { Directive, computed, input } from '@angular/core';
+import { registerSafeAreaComponents } from "./safe-area.js";
+import { ViewBase } from "./view-base.js";
+import * as i0 from "@angular/core";
+const ALL = ['top', 'right', 'bottom', 'left'];
+export class SafeAreaView extends ViewBase {
+    constructor() {
+        super();
+        // Before the first commit of this element, which is this component's own.
+        registerSafeAreaComponents();
+    }
+    /**
+     * Which edges to inset: `['top', 'bottom']`, or a record for per-edge modes. Absent insets all
+     * four.
+     */
+    edges = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "edges" }] : /* istanbul ignore next */ []));
+    /** Whether the insets become padding, which is the default, or margin. */
+    mode = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "mode" }] : /* istanbul ignore next */ []));
+    /**
+     * Native takes all four edges every time - a partial record leaves the missing ones at whatever
+     * they were, which reads as an inset that will not go away.
+     */
+    resolvedEdges = computed(() => {
+        const edges = this.edges();
+        const given = Array.isArray(edges)
+            ? Object.fromEntries(edges.map((edge) => [edge, 'additive']))
+            : (edges ?? {});
+        const all = edges === undefined;
+        return Object.fromEntries(ALL.map((edge) => [edge, all ? 'additive' : (given[edge] ?? 'off')]));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedEdges" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: SafeAreaView, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.2.0", type: SafeAreaView, isStandalone: true, selector: "safe-area-view", inputs: { edges: { classPropertyName: "edges", publicName: "edges", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "edges": "resolvedEdges()", "mode": "mode()" } }, usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: SafeAreaView, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'safe-area-view',
+                    host: {
+                        '[edges]': 'resolvedEdges()',
+                        '[mode]': 'mode()',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { edges: [{ type: i0.Input, args: [{ isSignal: true, alias: "edges", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }] } });
+//# sourceMappingURL=safe-area-view.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"safe-area-view.js","sourceRoot":"","sources":["../src/safe-area-view.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC3D,OAAO,EAAE,0BAA0B,EAAyC,MAAM,gBAAgB,CAAC;AACnG,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;;AAK1C,MAAM,GAAG,GAA4B,CAAC,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC;AASxE,MAAM,OAAO,YAAa,SAAQ,QAAQ;IACxC;QACE,KAAK,EAAE,CAAC;QACR,0EAA0E;QAC1E,0BAA0B,EAAE,CAAC;IAC/B,CAAC;IAED;;;OAGG;IACM,KAAK,GAAG,KAAK;yFAAiB,CAAC;IAExC,0EAA0E;IACjE,IAAI,GAAG,KAAK;wFAAwB,CAAC;IAE9C;;;OAGG;IACgB,aAAa,GAAG,QAAQ,CAAC,GAAG,EAAE;QAC/C,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC;QAC3B,MAAM,KAAK,GAAoD,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;YACjF,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC;YAC7D,CAAC,CAAC,CAAE,KAA4D,IAAI,EAAE,CAAC,CAAC;QAE1E,MAAM,GAAG,GAAG,KAAK,KAAK,SAAS,CAAC;QAChC,OAAO,MAAM,CAAC,WAAW,CACvB,GAAG,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,CAC3B,CAAC;IAC9C,CAAC;sFAAC,CAAC;uGA9BQ,YAAY;2FAAZ,YAAY;;2FAAZ,YAAY;kBAPxB,SAAS;mBAAC;oBACT,QAAQ,EAAE,gBAAgB;oBAC1B,IAAI,EAAE;wBACJ,SAAS,EAAE,iBAAiB;wBAC5B,QAAQ,EAAE,QAAQ;qBACnB;iBACF","sourcesContent":["/**\n * A view whose padding - or margin - keeps its content clear of the notch, the status bar, the\n * home indicator, and on Android the display cutout and the navigation bar.\n *\n * The insets are applied natively, in the shadow node, so nothing crosses to JavaScript and there\n * is no frame where the content sits under the system's furniture before moving out from under\n * it. That is the reason to prefer this over reading `SafeArea.insets` and doing the arithmetic:\n * the arithmetic is a frame late and re-runs on every rotation.\n *\n * ```html\n * <safe-area-view [edges]=\"['top', 'bottom']\" [style]=\"fill\">…</safe-area-view>\n * ```\n *\n * Which edges matter is usually a subset. A screen in a native stack already has its header\n * covering the top, so it wants `bottom` alone; a presented sheet draws its own chrome and wants\n * both. Passing nothing insets all four, which is what React Native's own deprecated\n * `SafeAreaView` did.\n *\n * `maximum` is the third mode per edge and exists for a view that already has padding: `additive`\n * adds the inset to it, `maximum` takes whichever is larger, and `off` ignores that edge.\n *\n * The insets come from the nearest `<safe-area-provider>` above it in the native view tree. A\n * screen presented as a full-screen modal is not below the app's root provider - UIKit presents\n * it from a view controller of its own - so there the view finds no insets and sits under the\n * status bar. Such a screen wraps its content in a `<safe-area-provider>` of its own.\n *\n * The app must have `react-native-safe-area-context` installed, which is where the native\n * component comes from; none of its JavaScript is imported. React Native's own `SafeAreaView` is\n * deprecated in favour of it, is iOS-only, and offers no control over which edges apply.\n */\nimport { Directive, computed, input } from '@angular/core';\nimport { registerSafeAreaComponents, type SafeAreaEdge, type SafeAreaEdges } from './safe-area.ts';\nimport { ViewBase } from './view-base.ts';\n\n/** How an edge combines with the padding already there. */\nexport type SafeAreaEdgeMode = 'additive' | 'maximum' | 'off';\n\nconst ALL: readonly SafeAreaEdge[] = ['top', 'right', 'bottom', 'left'];\n\n@Directive({\n  selector: 'safe-area-view',\n  host: {\n    '[edges]': 'resolvedEdges()',\n    '[mode]': 'mode()',\n  },\n})\nexport class SafeAreaView extends ViewBase {\n  constructor() {\n    super();\n    // Before the first commit of this element, which is this component's own.\n    registerSafeAreaComponents();\n  }\n\n  /**\n   * Which edges to inset: `['top', 'bottom']`, or a record for per-edge modes. Absent insets all\n   * four.\n   */\n  readonly edges = input<SafeAreaEdges>();\n\n  /** Whether the insets become padding, which is the default, or margin. */\n  readonly mode = input<'padding' | 'margin'>();\n\n  /**\n   * Native takes all four edges every time - a partial record leaves the missing ones at whatever\n   * they were, which reads as an inset that will not go away.\n   */\n  protected readonly resolvedEdges = computed(() => {\n    const edges = this.edges();\n    const given: Partial<Record<SafeAreaEdge, SafeAreaEdgeMode>> = Array.isArray(edges)\n      ? Object.fromEntries(edges.map((edge) => [edge, 'additive']))\n      : ((edges as Record<SafeAreaEdge, SafeAreaEdgeMode> | undefined) ?? {});\n\n    const all = edges === undefined;\n    return Object.fromEntries(\n      ALL.map((edge) => [edge, all ? 'additive' : (given[edge] ?? 'off')]),\n    ) as Record<SafeAreaEdge, SafeAreaEdgeMode>;\n  });\n}\n"]}

package/dist/safe-area.d.ts

@@ -0,0 +1,12 @@
+/** The edges of the screen, as both components name them. */
+export type SafeAreaEdge = 'top' | 'right' | 'bottom' | 'left';
+/** `['top', 'bottom']`, or `{ top: 'maximum', bottom: 'off' }` for per-edge control. */
+export type SafeAreaEdges = readonly SafeAreaEdge[] | Readonly<Partial<Record<SafeAreaEdge, 'additive' | 'maximum' | 'off'>>>;
+/**
+ * `safe-area-view` already had a mapping - React Native's own `SafeAreaView`, which is iOS-only,
+ * insets every edge and is deprecated upstream - so this replaces it. An app without
+ * `react-native-safe-area-context` installed therefore renders an unimplemented view rather than
+ * the old behaviour, which is the honest failure: the alternative is a view that silently insets
+ * nothing on half the platforms it runs on.
+ */
+export declare function registerSafeAreaComponents(): void;

package/dist/safe-area.js

@@ -0,0 +1,27 @@
+/**
+ * react-native-safe-area-context's two components, driven directly.
+ *
+ * The same arrangement as react-native-screens in the router: the native side is codegen'd Fabric
+ * components, their React wrappers are unreachable, and the engine is taught the element names.
+ * Registration happens when either component is first constructed, so importing one is the whole
+ * setup.
+ *
+ * No decorators here: tests import this at runtime.
+ */
+import { registerViewName } from '@ng-native/fabric';
+let registered = false;
+/**
+ * `safe-area-view` already had a mapping - React Native's own `SafeAreaView`, which is iOS-only,
+ * insets every edge and is deprecated upstream - so this replaces it. An app without
+ * `react-native-safe-area-context` installed therefore renders an unimplemented view rather than
+ * the old behaviour, which is the honest failure: the alternative is a view that silently insets
+ * nothing on half the platforms it runs on.
+ */
+export function registerSafeAreaComponents() {
+    if (registered)
+        return;
+    registered = true;
+    registerViewName('safe-area-view', 'RNCSafeAreaView');
+    registerViewName('safe-area-provider', 'RNCSafeAreaProvider', { flex: 1 });
+}
+//# sourceMappingURL=safe-area.js.map

package/dist/safe-area.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"safe-area.js","sourceRoot":"","sources":["../src/safe-area.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AASrD,IAAI,UAAU,GAAG,KAAK,CAAC;AAEvB;;;;;;GAMG;AACH,MAAM,UAAU,0BAA0B;IACxC,IAAI,UAAU;QAAE,OAAO;IACvB,UAAU,GAAG,IAAI,CAAC;IAClB,gBAAgB,CAAC,gBAAgB,EAAE,iBAAiB,CAAC,CAAC;IACtD,gBAAgB,CAAC,oBAAoB,EAAE,qBAAqB,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC;AAC7E,CAAC","sourcesContent":["/**\n * react-native-safe-area-context's two components, driven directly.\n *\n * The same arrangement as react-native-screens in the router: the native side is codegen'd Fabric\n * components, their React wrappers are unreachable, and the engine is taught the element names.\n * Registration happens when either component is first constructed, so importing one is the whole\n * setup.\n *\n * No decorators here: tests import this at runtime.\n */\nimport { registerViewName } from '@ng-native/fabric';\n\n/** The edges of the screen, as both components name them. */\nexport type SafeAreaEdge = 'top' | 'right' | 'bottom' | 'left';\n\n/** `['top', 'bottom']`, or `{ top: 'maximum', bottom: 'off' }` for per-edge control. */\nexport type SafeAreaEdges =\n  readonly SafeAreaEdge[] | Readonly<Partial<Record<SafeAreaEdge, 'additive' | 'maximum' | 'off'>>>;\n\nlet registered = false;\n\n/**\n * `safe-area-view` already had a mapping - React Native's own `SafeAreaView`, which is iOS-only,\n * insets every edge and is deprecated upstream - so this replaces it. An app without\n * `react-native-safe-area-context` installed therefore renders an unimplemented view rather than\n * the old behaviour, which is the honest failure: the alternative is a view that silently insets\n * nothing on half the platforms it runs on.\n */\nexport function registerSafeAreaComponents(): void {\n  if (registered) return;\n  registered = true;\n  registerViewName('safe-area-view', 'RNCSafeAreaView');\n  registerViewName('safe-area-provider', 'RNCSafeAreaProvider', { flex: 1 });\n}\n"]}