@ng-native/components 0.0.1 → 0.1.0

package/dist/animation.js

@@ -0,0 +1,20 @@
+/**
+ * Platform capability: React Native's animation graph.
+ *
+ * React Native's `Animated` is worth reusing rather than reimplementing. Of the 45 files in
+ * `Libraries/Animated`, only 11 touch React, and all of them are the `components/*` wrappers,
+ * `createAnimatedComponent` and the hooks. The graph itself - values, interpolations, styles,
+ * timing, spring, decay, easing - and the native driver bridge are React-free.
+ *
+ * It is injected rather than imported for the same reason keyboard metrics are: the components
+ * package stays runnable under Node, where React Native's Flow-typed source cannot even be
+ * parsed, and a test can drive an animation without a device.
+ *
+ * Apps do not wire this at all: `AnimatedStyle` in `../animations.ts` carries it as its own
+ * provider, so importing the directive is the whole setup. The token is what makes that possible
+ * without the components package importing React Native, and what lets a test drive an animation
+ * with no device.
+ */
+import { InjectionToken } from '@angular/core';
+export const ANIMATION = new InjectionToken('angular-native.animation');
+//# sourceMappingURL=animation.js.map

package/dist/animation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"animation.js","sourceRoot":"","sources":["../src/animation.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AACH,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAyB/C,MAAM,CAAC,MAAM,SAAS,GAAG,IAAI,cAAc,CAAmB,0BAA0B,CAAC,CAAC","sourcesContent":["/**\n * Platform capability: React Native's animation graph.\n *\n * React Native's `Animated` is worth reusing rather than reimplementing. Of the 45 files in\n * `Libraries/Animated`, only 11 touch React, and all of them are the `components/*` wrappers,\n * `createAnimatedComponent` and the hooks. The graph itself - values, interpolations, styles,\n * timing, spring, decay, easing - and the native driver bridge are React-free.\n *\n * It is injected rather than imported for the same reason keyboard metrics are: the components\n * package stays runnable under Node, where React Native's Flow-typed source cannot even be\n * parsed, and a test can drive an animation without a device.\n *\n * Apps do not wire this at all: `AnimatedStyle` in `../animations.ts` carries it as its own\n * provider, so importing the directive is the whole setup. The token is what makes that possible\n * without the components package importing React Native, and what lets a test drive an animation\n * with no device.\n */\nimport { InjectionToken } from '@angular/core';\n\n/** One element's animated props, for as long as that element is alive. */\nexport interface AnimatedPropsHandle {\n  /** Start observing the values. Until this runs, nothing reports a frame. */\n  attach(): void;\n  /** Stop observing, and release the native side if it was driving. */\n  detach(): void;\n  /** The current values, flattened the way a style object is. */\n  read(): Record<string, unknown>;\n  /**\n   * Tell the graph which view the native driver should write to, by react tag. Safe to call\n   * before any animation starts: React Native connects then, or later when one goes native.\n   */\n  connect(tag: number): void;\n}\n\nexport interface AnimationBackend {\n  /**\n   * Wrap a style that may contain animated values. `onFrame` fires on every frame the graph\n   * advances in JavaScript, and never while the native driver owns the animation.\n   */\n  props(style: Record<string, unknown>, onFrame: () => void): AnimatedPropsHandle;\n}\n\nexport const ANIMATION = new InjectionToken<AnimationBackend>('angular-native.animation');\n"]}

package/dist/animations-web.d.ts

@@ -0,0 +1,8 @@
+import { AnimatedStyleBase } from './animated-style.ts';
+import * as i0 from "@angular/core";
+export { Animated } from './animated.ts';
+export { Easing } from './easing.ts';
+export declare class AnimatedStyle extends AnimatedStyleBase {
+    static ɵfac: i0.ɵɵFactoryDeclaration<AnimatedStyle, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<AnimatedStyle, "[animatedStyle]", never, {}, {}, never, never, true, never>;
+}

package/dist/animations-web.js

@@ -0,0 +1,31 @@
+/**
+ * `animations.ts`, for a browser build.
+ *
+ * A web bundler resolves `@ng-native/components/animations` here, through the `browser`
+ * condition in this package's `exports`; Metro, on a device, never sets that condition and gets
+ * the native file. The names are the same on both sides, so the component that imports
+ * `AnimatedStyle`, `Animated` and `Easing` from there is one component on both platforms.
+ *
+ * Nothing here reaches React Native. The graph is `animated.ts`, stepped by
+ * `requestAnimationFrame`, and every frame is written through `setProp(node, 'style', ...)` by the
+ * same directive the device uses.
+ */
+import { Directive } from '@angular/core';
+import { animationBackend } from "./animated.js";
+import { AnimatedStyleBase } from "./animated-style.js";
+import { ANIMATION } from "./animation.js";
+import * as i0 from "@angular/core";
+export { Animated } from "./animated.js";
+export { Easing } from "./easing.js";
+export class AnimatedStyle extends AnimatedStyleBase {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: AnimatedStyle, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: AnimatedStyle, isStandalone: true, selector: "[animatedStyle]", providers: [{ provide: ANIMATION, useValue: animationBackend }], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: AnimatedStyle, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[animatedStyle]',
+                    providers: [{ provide: ANIMATION, useValue: animationBackend }],
+                }]
+        }] });
+//# sourceMappingURL=animations-web.js.map

package/dist/animations-web.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"animations-web.js","sourceRoot":"","sources":["../src/animations-web.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;;AAE3C,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAMrC,MAAM,OAAO,aAAc,SAAQ,iBAAiB;uGAAvC,aAAa;2FAAb,aAAa,8DAFb,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,gBAAgB,EAAE,CAAC;;2FAEpD,aAAa;kBAJzB,SAAS;mBAAC;oBACT,QAAQ,EAAE,iBAAiB;oBAC3B,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,gBAAgB,EAAE,CAAC;iBAChE","sourcesContent":["/**\n * `animations.ts`, for a browser build.\n *\n * A web bundler resolves `@ng-native/components/animations` here, through the `browser`\n * condition in this package's `exports`; Metro, on a device, never sets that condition and gets\n * the native file. The names are the same on both sides, so the component that imports\n * `AnimatedStyle`, `Animated` and `Easing` from there is one component on both platforms.\n *\n * Nothing here reaches React Native. The graph is `animated.ts`, stepped by\n * `requestAnimationFrame`, and every frame is written through `setProp(node, 'style', ...)` by the\n * same directive the device uses.\n */\nimport { Directive } from '@angular/core';\nimport { animationBackend } from './animated.ts';\nimport { AnimatedStyleBase } from './animated-style.ts';\nimport { ANIMATION } from './animation.ts';\n\nexport { Animated } from './animated.ts';\nexport { Easing } from './easing.ts';\n\n@Directive({\n  selector: '[animatedStyle]',\n  providers: [{ provide: ANIMATION, useValue: animationBackend }],\n})\nexport class AnimatedStyle extends AnimatedStyleBase {}\n"]}

package/dist/animations.d.ts

@@ -0,0 +1,7 @@
+import { AnimatedStyleBase } from './animated-style.ts';
+import * as i0 from "@angular/core";
+export { Animated, Easing } from 'react-native';
+export declare class AnimatedStyle extends AnimatedStyleBase {
+    static ɵfac: i0.ɵɵFactoryDeclaration<AnimatedStyle, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<AnimatedStyle, "[animatedStyle]", never, {}, {}, never, never, true, never>;
+}

package/dist/animations.js

@@ -0,0 +1,58 @@
+/**
+ * Everything an app needs to animate, in one provider.
+ *
+ * Deliberately outside the barrel: this file deep-imports React Native's
+ * animation graph, which is Flow source that Node cannot parse. Keeping it here means the rest of
+ * the package stays runnable under Node, which is what the whole test suite depends on. A browser
+ * build never sees this file: the package's `exports` send it to `animations-web.ts` instead.
+ *
+ * ```ts
+ * mount(rootTag, App, fabric, { providers: [provideAnimations()] });
+ * ```
+ *
+ * Note what this cannot do. Angular decides whether `animate.enter` and `animate.leave` do
+ * anything the moment `@angular/core` is evaluated, by reading a global; a provider runs long
+ * after that, so those two need a Metro polyfill instead and no provider can stand in for it. The
+ * `withAngularNative` preset adds it; this checks that it happened and says so if it did not.
+ */
+// @ts-expect-error React Native ships its internals as Flow, so the deep import has no types.
+// The shape used here is declared just below; it is four methods.
+import Untyped from 'react-native/Libraries/Animated/nodes/AnimatedProps';
+import { Directive } from '@angular/core';
+import { AnimatedStyleBase } from "./animated-style.js";
+import { ANIMATION } from "./animation.js";
+import * as i0 from "@angular/core";
+// The graph an app builds its values from, under the names a browser build exports too (see
+// `animations-web.ts`), so one import serves a component on both platforms.
+export { Animated, Easing } from 'react-native';
+/**
+ * `AnimatedProps` is what `createAnimatedComponent` uses, and there is no public equivalent.
+ * Everything above it in that file is React, and none of it is wanted here.
+ */
+const AnimatedProps = Untyped;
+const backend = {
+    props: (style, onFrame) => {
+        const props = new AnimatedProps({ style }, onFrame);
+        return {
+            attach: () => props.__attach(),
+            detach: () => props.__detach(),
+            read: () => props.__getValue().style ?? {},
+            // A number is all `findNodeHandle` needs, so the graph can address one of our nodes with no
+            // React instance anywhere. React Native connects the view now if an animation has already
+            // gone native, and remembers the tag for the moment one does.
+            connect: (tag) => props.setNativeView(tag),
+        };
+    },
+};
+export class AnimatedStyle extends AnimatedStyleBase {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: AnimatedStyle, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: AnimatedStyle, isStandalone: true, selector: "[animatedStyle]", providers: [{ provide: ANIMATION, useValue: backend }], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: AnimatedStyle, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[animatedStyle]',
+                    providers: [{ provide: ANIMATION, useValue: backend }],
+                }]
+        }] });
+//# sourceMappingURL=animations.js.map

package/dist/animations.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"animations.js","sourceRoot":"","sources":["../src/animations.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AACH,8FAA8F;AAC9F,kEAAkE;AAClE,OAAO,OAAO,MAAM,qDAAqD,CAAC;AAC1E,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,SAAS,EAAyB,MAAM,gBAAgB,CAAC;;AAElE,4FAA4F;AAC5F,4EAA4E;AAC5E,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAchD;;;GAGG;AACH,MAAM,aAAa,GAAG,OAGA,CAAC;AACvB,MAAM,OAAO,GAAqB;IAChC,KAAK,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,EAAE;QACxB,MAAM,KAAK,GAAG,IAAI,aAAa,CAAC,EAAE,KAAK,EAAE,EAAE,OAAO,CAAC,CAAC;QACpD,OAAO;YACL,MAAM,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,QAAQ,EAAE;YAC9B,MAAM,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,QAAQ,EAAE;YAC9B,IAAI,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC,KAAK,IAAI,EAAE;YAC1C,4FAA4F;YAC5F,0FAA0F;YAC1F,8DAA8D;YAC9D,OAAO,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC;SAC3C,CAAC;IACJ,CAAC;CACF,CAAC;AAMF,MAAM,OAAO,aAAc,SAAQ,iBAAiB;uGAAvC,aAAa;2FAAb,aAAa,8DAFb,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC;;2FAE3C,aAAa;kBAJzB,SAAS;mBAAC;oBACT,QAAQ,EAAE,iBAAiB;oBAC3B,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC;iBACvD","sourcesContent":["/**\n * Everything an app needs to animate, in one provider.\n *\n * Deliberately outside the barrel: this file deep-imports React Native's\n * animation graph, which is Flow source that Node cannot parse. Keeping it here means the rest of\n * the package stays runnable under Node, which is what the whole test suite depends on. A browser\n * build never sees this file: the package's `exports` send it to `animations-web.ts` instead.\n *\n * ```ts\n * mount(rootTag, App, fabric, { providers: [provideAnimations()] });\n * ```\n *\n * Note what this cannot do. Angular decides whether `animate.enter` and `animate.leave` do\n * anything the moment `@angular/core` is evaluated, by reading a global; a provider runs long\n * after that, so those two need a Metro polyfill instead and no provider can stand in for it. The\n * `withAngularNative` preset adds it; this checks that it happened and says so if it did not.\n */\n// @ts-expect-error React Native ships its internals as Flow, so the deep import has no types.\n// The shape used here is declared just below; it is four methods.\nimport Untyped from 'react-native/Libraries/Animated/nodes/AnimatedProps';\nimport { Directive } from '@angular/core';\nimport { AnimatedStyleBase } from './animated-style.ts';\nimport { ANIMATION, type AnimationBackend } from './animation.ts';\n\n// The graph an app builds its values from, under the names a browser build exports too (see\n// `animations-web.ts`), so one import serves a component on both platforms.\nexport { Animated, Easing } from 'react-native';\n\n/**\n * What `AnimatedProps` gives us. `setNativeView` takes anything `findNodeHandle` accepts, and\n * that includes a plain number, which is how an animated graph reaches one of our nodes with no\n * React instance in sight.\n */\ninterface AnimatedPropsNode {\n  __attach(): void;\n  __detach(): void;\n  __getValue(): { style?: Record<string, unknown> };\n  setNativeView(viewTag: number): void;\n}\n\n/**\n * `AnimatedProps` is what `createAnimatedComponent` uses, and there is no public equivalent.\n * Everything above it in that file is React, and none of it is wanted here.\n */\nconst AnimatedProps = Untyped as new (\n  props: { [key: string]: unknown },\n  callback: () => void,\n) => AnimatedPropsNode;\nconst backend: AnimationBackend = {\n  props: (style, onFrame) => {\n    const props = new AnimatedProps({ style }, onFrame);\n    return {\n      attach: () => props.__attach(),\n      detach: () => props.__detach(),\n      read: () => props.__getValue().style ?? {},\n      // A number is all `findNodeHandle` needs, so the graph can address one of our nodes with no\n      // React instance anywhere. React Native connects the view now if an animation has already\n      // gone native, and remembers the tag for the moment one does.\n      connect: (tag) => props.setNativeView(tag),\n    };\n  },\n};\n\n@Directive({\n  selector: '[animatedStyle]',\n  providers: [{ provide: ANIMATION, useValue: backend }],\n})\nexport class AnimatedStyle extends AnimatedStyleBase {}\n"]}

package/dist/controlled-model.d.ts

@@ -0,0 +1,33 @@
+import { type ModelSignal, type SimpleChanges } from '@angular/core';
+/**
+ * A `model()` that native edits, with React Native's controlled-component rule: once something
+ * outside binds the model, its value is the truth, and a native edit is only a proposal.
+ *
+ * The model has to stay a model, because that is the whole of the Signal Forms contract. What
+ * goes wrong with a plain `set` is a refusal. The user flips a switch, `set(true)` emits, the app
+ * keeps `false` and writes it back - but that is the value its binding last wrote, so Angular
+ * sends nothing down, and the model is left saying `true` while the app says `false`. Nothing
+ * downstream can see the disagreement, because the model and native agree with each other.
+ *
+ * So `propose` emits the new value and then puts the model back where the parent last put it,
+ * without emitting again. If the parent takes the value, its binding changes and writes it in
+ * during change detection, as it would for any other input; if it refuses, the binding stays
+ * quiet and the model is already back at the value the app kept. Either way, by the time the
+ * pass has rendered the model says what the app says, and the component compares that with what
+ * native is showing.
+ *
+ * The write back goes through the model's input node, the same call Angular makes for a binding,
+ * which is the one way to set a model without emitting. Nothing bound means nothing to defer to,
+ * and the model keeps what native reported, as an uncontrolled RN component does.
+ */
+export declare class ControlledModel<T> {
+    /** Whether a binding or `FormField` has ever written the model. */
+    private bound;
+    private readonly model;
+    private readonly name;
+    constructor(model: ModelSignal<T>, name: string);
+    /** Call from `ngOnChanges`. A template binding and `FormField` both arrive through it. */
+    noteChanges(changes: SimpleChanges): void;
+    /** A native edit: emit it, and leave the model to the parent if it has one. */
+    propose(value: T): void;
+}

package/dist/controlled-model.js

@@ -0,0 +1,47 @@
+import { untracked, ɵSIGNAL as SIGNAL } from '@angular/core';
+/**
+ * A `model()` that native edits, with React Native's controlled-component rule: once something
+ * outside binds the model, its value is the truth, and a native edit is only a proposal.
+ *
+ * The model has to stay a model, because that is the whole of the Signal Forms contract. What
+ * goes wrong with a plain `set` is a refusal. The user flips a switch, `set(true)` emits, the app
+ * keeps `false` and writes it back - but that is the value its binding last wrote, so Angular
+ * sends nothing down, and the model is left saying `true` while the app says `false`. Nothing
+ * downstream can see the disagreement, because the model and native agree with each other.
+ *
+ * So `propose` emits the new value and then puts the model back where the parent last put it,
+ * without emitting again. If the parent takes the value, its binding changes and writes it in
+ * during change detection, as it would for any other input; if it refuses, the binding stays
+ * quiet and the model is already back at the value the app kept. Either way, by the time the
+ * pass has rendered the model says what the app says, and the component compares that with what
+ * native is showing.
+ *
+ * The write back goes through the model's input node, the same call Angular makes for a binding,
+ * which is the one way to set a model without emitting. Nothing bound means nothing to defer to,
+ * and the model keeps what native reported, as an uncontrolled RN component does.
+ */
+export class ControlledModel {
+    /** Whether a binding or `FormField` has ever written the model. */
+    bound = false;
+    model;
+    name;
+    constructor(model, name) {
+        this.model = model;
+        this.name = name;
+    }
+    /** Call from `ngOnChanges`. A template binding and `FormField` both arrive through it. */
+    noteChanges(changes) {
+        if (this.name in changes)
+            this.bound = true;
+    }
+    /** A native edit: emit it, and leave the model to the parent if it has one. */
+    propose(value) {
+        const held = untracked(this.model);
+        this.model.set(value);
+        if (!this.bound)
+            return;
+        const node = this.model[SIGNAL];
+        node.applyValueToInputSignal(node, held);
+    }
+}
+//# sourceMappingURL=controlled-model.js.map

package/dist/controlled-model.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"controlled-model.js","sourceRoot":"","sources":["../src/controlled-model.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwC,SAAS,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,eAAe,CAAC;AAEnG;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,OAAO,eAAe;IAC1B,mEAAmE;IAC3D,KAAK,GAAG,KAAK,CAAC;IACL,KAAK,CAAiB;IACtB,IAAI,CAAS;IAE9B,YAAY,KAAqB,EAAE,IAAY;QAC7C,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;IACnB,CAAC;IAED,0FAA0F;IAC1F,WAAW,CAAC,OAAsB;QAChC,IAAI,IAAI,CAAC,IAAI,IAAI,OAAO;YAAE,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;IAC9C,CAAC;IAED,+EAA+E;IAC/E,OAAO,CAAC,KAAQ;QACd,MAAM,IAAI,GAAG,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACnC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;QACtB,IAAI,CAAC,IAAI,CAAC,KAAK;YAAE,OAAO;QACxB,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QAChC,IAAI,CAAC,uBAAuB,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;IAC3C,CAAC;CACF","sourcesContent":["import { type ModelSignal, type SimpleChanges, untracked, ɵSIGNAL as SIGNAL } from '@angular/core';\n\n/**\n * A `model()` that native edits, with React Native's controlled-component rule: once something\n * outside binds the model, its value is the truth, and a native edit is only a proposal.\n *\n * The model has to stay a model, because that is the whole of the Signal Forms contract. What\n * goes wrong with a plain `set` is a refusal. The user flips a switch, `set(true)` emits, the app\n * keeps `false` and writes it back - but that is the value its binding last wrote, so Angular\n * sends nothing down, and the model is left saying `true` while the app says `false`. Nothing\n * downstream can see the disagreement, because the model and native agree with each other.\n *\n * So `propose` emits the new value and then puts the model back where the parent last put it,\n * without emitting again. If the parent takes the value, its binding changes and writes it in\n * during change detection, as it would for any other input; if it refuses, the binding stays\n * quiet and the model is already back at the value the app kept. Either way, by the time the\n * pass has rendered the model says what the app says, and the component compares that with what\n * native is showing.\n *\n * The write back goes through the model's input node, the same call Angular makes for a binding,\n * which is the one way to set a model without emitting. Nothing bound means nothing to defer to,\n * and the model keeps what native reported, as an uncontrolled RN component does.\n */\nexport class ControlledModel<T> {\n  /** Whether a binding or `FormField` has ever written the model. */\n  private bound = false;\n  private readonly model: ModelSignal<T>;\n  private readonly name: string;\n\n  constructor(model: ModelSignal<T>, name: string) {\n    this.model = model;\n    this.name = name;\n  }\n\n  /** Call from `ngOnChanges`. A template binding and `FormField` both arrive through it. */\n  noteChanges(changes: SimpleChanges): void {\n    if (this.name in changes) this.bound = true;\n  }\n\n  /** A native edit: emit it, and leave the model to the parent if it has one. */\n  propose(value: T): void {\n    const held = untracked(this.model);\n    this.model.set(value);\n    if (!this.bound) return;\n    const node = this.model[SIGNAL];\n    node.applyValueToInputSignal(node, held);\n  }\n}\n"]}

package/dist/easing.d.ts

@@ -0,0 +1,21 @@
+export type EasingFunction = (t: number) => number;
+export declare const Easing: {
+    step0: (n: number) => number;
+    step1: (n: number) => number;
+    linear: (t: number) => number;
+    /** CSS's `ease-in`, which is what React Native calls `ease`. */
+    ease: (t: number) => number;
+    quad: (t: number) => number;
+    cubic: (t: number) => number;
+    poly: (n: number) => EasingFunction;
+    sin: (t: number) => number;
+    circle: (t: number) => number;
+    exp: (t: number) => number;
+    elastic: (bounciness?: number) => EasingFunction;
+    back: (s?: number) => EasingFunction;
+    bounce: (t: number) => number;
+    bezier: (x1: number, y1: number, x2: number, y2: number) => EasingFunction;
+    in: (easing: EasingFunction) => EasingFunction;
+    out: (easing: EasingFunction) => EasingFunction;
+    inOut: (easing: EasingFunction) => EasingFunction;
+};

package/dist/easing.js

@@ -0,0 +1,50 @@
+/**
+ * React Native's `Easing`, for the browser build of `animations.ts`.
+ *
+ * The same functions under the same names, each the same formula as React Native's
+ * `Libraries/Animated/Easing.js`, so a curve an app names eases identically on both platforms. The
+ * one piece of real arithmetic, solving a cubic bezier, is the engine's own: CSS transitions
+ * already need it, and two solvers would be two chances to disagree.
+ */
+import { bezier } from '@ng-native/fabric';
+let ease;
+export const Easing = {
+    step0: (n) => (n > 0 ? 1 : 0),
+    step1: (n) => (n >= 1 ? 1 : 0),
+    linear: (t) => t,
+    /** CSS's `ease-in`, which is what React Native calls `ease`. */
+    ease: (t) => (ease ??= Easing.bezier(0.42, 0, 1, 1))(t),
+    quad: (t) => t * t,
+    cubic: (t) => t * t * t,
+    poly: (n) => (t) => Math.pow(t, n),
+    sin: (t) => 1 - Math.cos((t * Math.PI) / 2),
+    circle: (t) => 1 - Math.sqrt(1 - t * t),
+    exp: (t) => Math.pow(2, 10 * (t - 1)),
+    elastic: (bounciness = 1) => {
+        const p = bounciness * Math.PI;
+        return (t) => 1 - Math.pow(Math.cos((t * Math.PI) / 2), 3) * Math.cos(t * p);
+    },
+    back: (s = 1.70158) => (t) => t * t * ((s + 1) * t - s),
+    bounce: (t) => {
+        if (t < 1 / 2.75)
+            return 7.5625 * t * t;
+        if (t < 2 / 2.75) {
+            const t2 = t - 1.5 / 2.75;
+            return 7.5625 * t2 * t2 + 0.75;
+        }
+        if (t < 2.5 / 2.75) {
+            const t2 = t - 2.25 / 2.75;
+            return 7.5625 * t2 * t2 + 0.9375;
+        }
+        const t2 = t - 2.625 / 2.75;
+        return 7.5625 * t2 * t2 + 0.984375;
+    },
+    bezier: (x1, y1, x2, y2) => {
+        const points = [x1, y1, x2, y2];
+        return (t) => bezier(points, t);
+    },
+    in: (easing) => easing,
+    out: (easing) => (t) => 1 - easing(1 - t),
+    inOut: (easing) => (t) => t < 0.5 ? easing(t * 2) / 2 : 1 - easing((1 - t) * 2) / 2,
+};
+//# sourceMappingURL=easing.js.map

package/dist/easing.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"easing.js","sourceRoot":"","sources":["../src/easing.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * React Native's `Easing`, for the browser build of `animations.ts`.\n *\n * The same functions under the same names, each the same formula as React Native's\n * `Libraries/Animated/Easing.js`, so a curve an app names eases identically on both platforms. The\n * one piece of real arithmetic, solving a cubic bezier, is the engine's own: CSS transitions\n * already need it, and two solvers would be two chances to disagree.\n */\nimport { bezier } from '@ng-native/fabric';\n\nexport type EasingFunction = (t: number) => number;\n\nlet ease: EasingFunction | undefined;\n\nexport const Easing = {\n  step0: (n: number): number => (n > 0 ? 1 : 0),\n  step1: (n: number): number => (n >= 1 ? 1 : 0),\n  linear: (t: number): number => t,\n  /** CSS's `ease-in`, which is what React Native calls `ease`. */\n  ease: (t: number): number => (ease ??= Easing.bezier(0.42, 0, 1, 1))(t),\n  quad: (t: number): number => t * t,\n  cubic: (t: number): number => t * t * t,\n  poly:\n    (n: number): EasingFunction =>\n    (t) =>\n      Math.pow(t, n),\n  sin: (t: number): number => 1 - Math.cos((t * Math.PI) / 2),\n  circle: (t: number): number => 1 - Math.sqrt(1 - t * t),\n  exp: (t: number): number => Math.pow(2, 10 * (t - 1)),\n  elastic: (bounciness = 1): EasingFunction => {\n    const p = bounciness * Math.PI;\n    return (t) => 1 - Math.pow(Math.cos((t * Math.PI) / 2), 3) * Math.cos(t * p);\n  },\n  back:\n    (s = 1.70158): EasingFunction =>\n    (t) =>\n      t * t * ((s + 1) * t - s),\n  bounce: (t: number): number => {\n    if (t < 1 / 2.75) return 7.5625 * t * t;\n    if (t < 2 / 2.75) {\n      const t2 = t - 1.5 / 2.75;\n      return 7.5625 * t2 * t2 + 0.75;\n    }\n    if (t < 2.5 / 2.75) {\n      const t2 = t - 2.25 / 2.75;\n      return 7.5625 * t2 * t2 + 0.9375;\n    }\n    const t2 = t - 2.625 / 2.75;\n    return 7.5625 * t2 * t2 + 0.984375;\n  },\n  bezier: (x1: number, y1: number, x2: number, y2: number): EasingFunction => {\n    const points = [x1, y1, x2, y2];\n    return (t) => bezier(points, t);\n  },\n  in: (easing: EasingFunction): EasingFunction => easing,\n  out:\n    (easing: EasingFunction): EasingFunction =>\n    (t) =>\n      1 - easing(1 - t),\n  inOut:\n    (easing: EasingFunction): EasingFunction =>\n    (t) =>\n      t < 0.5 ? easing(t * 2) / 2 : 1 - easing((1 - t) * 2) / 2,\n};\n"]}

package/dist/events.d.ts

@@ -0,0 +1,169 @@
+/**
+ * The `nativeEvent` payloads native sends, so a handler can be typed rather than cast.
+ *
+ * Events on a primitive are element events, bound with Angular's `(name)` syntax and routed by
+ * the renderer to Fabric's `topName`, so `(layout)="onLayout($event)"` receives a
+ * `NativeSyntheticEvent<LayoutPayload>`. Nothing here is emitted from a component: a listener the
+ * component registered itself would opt every instance into events such as `topLayout`, which
+ * native only sends when something asks.
+ */
+import type { NativeSyntheticEvent, TouchPayload } from '@ng-native/fabric';
+export interface Rect {
+    readonly x: number;
+    readonly y: number;
+    readonly width: number;
+    readonly height: number;
+}
+export interface Size {
+    readonly width: number;
+    readonly height: number;
+}
+export interface Point {
+    readonly x: number;
+    readonly y: number;
+}
+export interface Insets {
+    readonly top?: number;
+    readonly left?: number;
+    readonly bottom?: number;
+    readonly right?: number;
+}
+/** `(layout)`: the view's frame, in its parent's coordinates. Needs `onLayout` to be opted in. */
+export interface LayoutPayload {
+    readonly layout: Rect;
+}
+export type LayoutEvent = NativeSyntheticEvent<LayoutPayload>;
+/** `(touchStart)`, `(touchMove)`, `(touchEnd)`, `(touchCancel)`. */
+export interface TouchEventPayload extends TouchPayload {
+    readonly touches?: readonly TouchPayload[];
+    readonly changedTouches?: readonly TouchPayload[];
+}
+export type TouchEvent = NativeSyntheticEvent<TouchEventPayload>;
+/** `(scroll)` and the drag and momentum events on a scroll view. */
+export interface ScrollPayload {
+    readonly contentOffset: Point;
+    readonly contentSize: Size;
+    readonly layoutMeasurement: Size;
+    readonly contentInset: Required<Insets>;
+    readonly zoomScale: number;
+    /** Present on the drag-end and momentum events. */
+    readonly velocity?: Point;
+    readonly responderIgnoreScroll?: boolean;
+    readonly targetContentOffset?: Point;
+}
+export type ScrollEvent = NativeSyntheticEvent<ScrollPayload>;
+/** `(contentSizeChange)` on a scroll view: the new size of the content view. */
+export type ContentSizeChangeEvent = NativeSyntheticEvent<Size>;
+/** One laid-out line, from `(textLayout)`. */
+export interface TextLayoutLine extends Rect {
+    readonly ascender: number;
+    readonly capHeight: number;
+    readonly descender: number;
+    readonly text: string;
+    readonly xHeight: number;
+}
+export interface TextLayoutPayload {
+    readonly lines: readonly TextLayoutLine[];
+}
+export type TextLayoutEvent = NativeSyntheticEvent<TextLayoutPayload>;
+/** `(change)` on a text input, and the value the model is set from. */
+export interface TextInputChangePayload {
+    readonly text: string;
+    readonly eventCount: number;
+    readonly target: number;
+}
+export type TextInputChangeEvent = NativeSyntheticEvent<TextInputChangePayload>;
+/** `(submitEditing)` and `(endEditing)`. */
+export type TextInputEditingEvent = NativeSyntheticEvent<TextInputChangePayload>;
+/** `(focus)` and `(blur)` on a text input. */
+export interface TextInputFocusPayload {
+    readonly target: number;
+    readonly eventCount?: number;
+    readonly text?: string;
+}
+export type TextInputFocusEvent = NativeSyntheticEvent<TextInputFocusPayload>;
+/** `(selectionChange)`. */
+export interface SelectionChangePayload {
+    readonly selection: {
+        readonly start: number;
+        readonly end: number;
+    };
+    readonly target: number;
+}
+export type SelectionChangeEvent = NativeSyntheticEvent<SelectionChangePayload>;
+/** `(keyPress)`: `key` is the character, or `Backspace`, `Enter`, `Tab` and so on. */
+export interface KeyPressPayload {
+    readonly key: string;
+    readonly target?: number;
+    readonly eventCount?: number;
+}
+export type KeyPressEvent = NativeSyntheticEvent<KeyPressPayload>;
+/** `(contentSizeChange)` on a multiline text input. */
+export interface TextInputContentSizePayload {
+    readonly contentSize: Size;
+    readonly target: number;
+}
+export type TextInputContentSizeEvent = NativeSyntheticEvent<TextInputContentSizePayload>;
+/** `(scroll)` on a multiline text input. */
+export interface TextInputScrollPayload {
+    readonly contentOffset: Point;
+}
+export type TextInputScrollEvent = NativeSyntheticEvent<TextInputScrollPayload>;
+/** `(change)` on a switch. */
+export interface SwitchChangePayload {
+    readonly value: boolean;
+    readonly target: number;
+}
+export type SwitchChangeEvent = NativeSyntheticEvent<SwitchChangePayload>;
+/** `(load)` on an image: what was decoded. */
+export interface ImageLoadPayload {
+    readonly source: {
+        readonly uri: string;
+        readonly width: number;
+        readonly height: number;
+    };
+}
+export type ImageLoadEvent = NativeSyntheticEvent<ImageLoadPayload>;
+/** `(error)` on an image. */
+export interface ImageErrorPayload {
+    readonly error: string;
+}
+export type ImageErrorEvent = NativeSyntheticEvent<ImageErrorPayload>;
+/** `(progress)` on an image, iOS only. */
+export interface ImageProgressPayload {
+    readonly loaded: number;
+    readonly total: number;
+}
+export type ImageProgressEvent = NativeSyntheticEvent<ImageProgressPayload>;
+/** `(orientationChange)` on a modal, iOS only. */
+export interface OrientationChangePayload {
+    readonly orientation: 'portrait' | 'landscape';
+}
+export type OrientationChangeEvent = NativeSyntheticEvent<OrientationChangePayload>;
+/** `(accessibilityAction)`: which of the view's declared actions the assistive technology fired. */
+export interface AccessibilityActionPayload {
+    readonly actionName: string;
+}
+export type AccessibilityActionEvent = NativeSyntheticEvent<AccessibilityActionPayload>;
+declare global {
+    interface HTMLElementEventMap {
+        layout: LayoutEvent;
+        touchStart: TouchEvent;
+        touchMove: TouchEvent;
+        touchEnd: TouchEvent;
+        touchCancel: TouchEvent;
+        scrollBeginDrag: ScrollEvent;
+        scrollEndDrag: ScrollEvent;
+        momentumScrollBegin: ScrollEvent;
+        momentumScrollEnd: ScrollEvent;
+        /** A scroll view's content, or a multiline text input's. */
+        contentSizeChange: ContentSizeChangeEvent | TextInputContentSizeEvent;
+        textLayout: TextLayoutEvent;
+        submitEditing: TextInputEditingEvent;
+        endEditing: TextInputEditingEvent;
+        selectionChange: SelectionChangeEvent;
+        keyPress: KeyPressEvent;
+        orientationChange: OrientationChangeEvent;
+        accessibilityAction: AccessibilityActionEvent;
+    }
+}

package/dist/events.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=events.js.map

package/dist/events.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"events.js","sourceRoot":"","sources":["../src/events.ts"],"names":[],"mappings":"","sourcesContent":["/**\n * The `nativeEvent` payloads native sends, so a handler can be typed rather than cast.\n *\n * Events on a primitive are element events, bound with Angular's `(name)` syntax and routed by\n * the renderer to Fabric's `topName`, so `(layout)=\"onLayout($event)\"` receives a\n * `NativeSyntheticEvent<LayoutPayload>`. Nothing here is emitted from a component: a listener the\n * component registered itself would opt every instance into events such as `topLayout`, which\n * native only sends when something asks.\n */\nimport type { NativeSyntheticEvent, TouchPayload } from '@ng-native/fabric';\n\nexport interface Rect {\n  readonly x: number;\n  readonly y: number;\n  readonly width: number;\n  readonly height: number;\n}\n\nexport interface Size {\n  readonly width: number;\n  readonly height: number;\n}\n\nexport interface Point {\n  readonly x: number;\n  readonly y: number;\n}\n\nexport interface Insets {\n  readonly top?: number;\n  readonly left?: number;\n  readonly bottom?: number;\n  readonly right?: number;\n}\n\n/** `(layout)`: the view's frame, in its parent's coordinates. Needs `onLayout` to be opted in. */\nexport interface LayoutPayload {\n  readonly layout: Rect;\n}\nexport type LayoutEvent = NativeSyntheticEvent<LayoutPayload>;\n\n/** `(touchStart)`, `(touchMove)`, `(touchEnd)`, `(touchCancel)`. */\nexport interface TouchEventPayload extends TouchPayload {\n  readonly touches?: readonly TouchPayload[];\n  readonly changedTouches?: readonly TouchPayload[];\n}\nexport type TouchEvent = NativeSyntheticEvent<TouchEventPayload>;\n\n/** `(scroll)` and the drag and momentum events on a scroll view. */\nexport interface ScrollPayload {\n  readonly contentOffset: Point;\n  readonly contentSize: Size;\n  readonly layoutMeasurement: Size;\n  readonly contentInset: Required<Insets>;\n  readonly zoomScale: number;\n  /** Present on the drag-end and momentum events. */\n  readonly velocity?: Point;\n  readonly responderIgnoreScroll?: boolean;\n  readonly targetContentOffset?: Point;\n}\nexport type ScrollEvent = NativeSyntheticEvent<ScrollPayload>;\n\n/** `(contentSizeChange)` on a scroll view: the new size of the content view. */\nexport type ContentSizeChangeEvent = NativeSyntheticEvent<Size>;\n\n/** One laid-out line, from `(textLayout)`. */\nexport interface TextLayoutLine extends Rect {\n  readonly ascender: number;\n  readonly capHeight: number;\n  readonly descender: number;\n  readonly text: string;\n  readonly xHeight: number;\n}\nexport interface TextLayoutPayload {\n  readonly lines: readonly TextLayoutLine[];\n}\nexport type TextLayoutEvent = NativeSyntheticEvent<TextLayoutPayload>;\n\n/** `(change)` on a text input, and the value the model is set from. */\nexport interface TextInputChangePayload {\n  readonly text: string;\n  readonly eventCount: number;\n  readonly target: number;\n}\nexport type TextInputChangeEvent = NativeSyntheticEvent<TextInputChangePayload>;\n\n/** `(submitEditing)` and `(endEditing)`. */\nexport type TextInputEditingEvent = NativeSyntheticEvent<TextInputChangePayload>;\n\n/** `(focus)` and `(blur)` on a text input. */\nexport interface TextInputFocusPayload {\n  readonly target: number;\n  readonly eventCount?: number;\n  readonly text?: string;\n}\nexport type TextInputFocusEvent = NativeSyntheticEvent<TextInputFocusPayload>;\n\n/** `(selectionChange)`. */\nexport interface SelectionChangePayload {\n  readonly selection: { readonly start: number; readonly end: number };\n  readonly target: number;\n}\nexport type SelectionChangeEvent = NativeSyntheticEvent<SelectionChangePayload>;\n\n/** `(keyPress)`: `key` is the character, or `Backspace`, `Enter`, `Tab` and so on. */\nexport interface KeyPressPayload {\n  readonly key: string;\n  readonly target?: number;\n  readonly eventCount?: number;\n}\nexport type KeyPressEvent = NativeSyntheticEvent<KeyPressPayload>;\n\n/** `(contentSizeChange)` on a multiline text input. */\nexport interface TextInputContentSizePayload {\n  readonly contentSize: Size;\n  readonly target: number;\n}\nexport type TextInputContentSizeEvent = NativeSyntheticEvent<TextInputContentSizePayload>;\n\n/** `(scroll)` on a multiline text input. */\nexport interface TextInputScrollPayload {\n  readonly contentOffset: Point;\n}\nexport type TextInputScrollEvent = NativeSyntheticEvent<TextInputScrollPayload>;\n\n/** `(change)` on a switch. */\nexport interface SwitchChangePayload {\n  readonly value: boolean;\n  readonly target: number;\n}\nexport type SwitchChangeEvent = NativeSyntheticEvent<SwitchChangePayload>;\n\n/** `(load)` on an image: what was decoded. */\nexport interface ImageLoadPayload {\n  readonly source: { readonly uri: string; readonly width: number; readonly height: number };\n}\nexport type ImageLoadEvent = NativeSyntheticEvent<ImageLoadPayload>;\n\n/** `(error)` on an image. */\nexport interface ImageErrorPayload {\n  readonly error: string;\n}\nexport type ImageErrorEvent = NativeSyntheticEvent<ImageErrorPayload>;\n\n/** `(progress)` on an image, iOS only. */\nexport interface ImageProgressPayload {\n  readonly loaded: number;\n  readonly total: number;\n}\nexport type ImageProgressEvent = NativeSyntheticEvent<ImageProgressPayload>;\n\n/** `(orientationChange)` on a modal, iOS only. */\nexport interface OrientationChangePayload {\n  readonly orientation: 'portrait' | 'landscape';\n}\nexport type OrientationChangeEvent = NativeSyntheticEvent<OrientationChangePayload>;\n\n/** `(accessibilityAction)`: which of the view's declared actions the assistive technology fired. */\nexport interface AccessibilityActionPayload {\n  readonly actionName: string;\n}\nexport type AccessibilityActionEvent = NativeSyntheticEvent<AccessibilityActionPayload>;\n\n/*\n * The events above, by name, where Angular's template type-checker looks for an element event's\n * type. It types `$event` in `(layout)=\"...\"` from `HTMLElementEventMap`, so without these every\n * native event reads as a DOM `Event` and `$event.nativeEvent` fails to type-check. There is no\n * DOM here to be wrong about. Names the DOM already has - `scroll`, `change`, `focus`, `blur`,\n * `load`, `error`, `progress` - keep its `Event`: an interface cannot give them a second type.\n */\ndeclare global {\n  interface HTMLElementEventMap {\n    layout: LayoutEvent;\n    touchStart: TouchEvent;\n    touchMove: TouchEvent;\n    touchEnd: TouchEvent;\n    touchCancel: TouchEvent;\n    scrollBeginDrag: ScrollEvent;\n    scrollEndDrag: ScrollEvent;\n    momentumScrollBegin: ScrollEvent;\n    momentumScrollEnd: ScrollEvent;\n    /** A scroll view's content, or a multiline text input's. */\n    contentSizeChange: ContentSizeChangeEvent | TextInputContentSizeEvent;\n    textLayout: TextLayoutEvent;\n    submitEditing: TextInputEditingEvent;\n    endEditing: TextInputEditingEvent;\n    selectionChange: SelectionChangeEvent;\n    keyPress: KeyPressEvent;\n    orientationChange: OrientationChangeEvent;\n    accessibilityAction: AccessibilityActionEvent;\n  }\n}\n"]}

package/dist/gesture-backend.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Platform capability: native gesture recognition, from react-native-gesture-handler.
+ *
+ * A gesture is recognised by the platform - a `UIPanGestureRecognizer`, an Android
+ * `GestureDetector` - rather than by our own responder negotiation. That is what makes a drag
+ * inside a scroll view behave, and what a pinch or a rotation needs to exist at all.
+ *
+ * Injected rather than imported for the reason everything in this shape is: the library reaches
+ * React Native's Flow source, which Node cannot parse. `NativeGesture` in `../gestures.ts` carries
+ * the real backend as its own provider, so importing the directive is the whole setup.
+ */
+import { InjectionToken } from '@angular/core';
+/**
+ * A gesture built by the library's own `Gesture` API: `Gesture.Pan()`, or a composition of
+ * several. Opaque here on purpose - the shape is the library's, and this package does not know it.
+ */
+export type GestureSpec = object;
+/** What a gesture is attached to: a node's react tag. */
+export interface GestureTarget {
+    readonly tag: number;
+}
+export interface GestureBackend {
+    /** Attach `gesture` to `target`, and return the function that detaches it. */
+    attach(target: GestureTarget, gesture: GestureSpec): () => void;
+}
+export declare const GESTURES: InjectionToken<GestureBackend>;

package/dist/gesture-backend.js

@@ -0,0 +1,14 @@
+/**
+ * Platform capability: native gesture recognition, from react-native-gesture-handler.
+ *
+ * A gesture is recognised by the platform - a `UIPanGestureRecognizer`, an Android
+ * `GestureDetector` - rather than by our own responder negotiation. That is what makes a drag
+ * inside a scroll view behave, and what a pinch or a rotation needs to exist at all.
+ *
+ * Injected rather than imported for the reason everything in this shape is: the library reaches
+ * React Native's Flow source, which Node cannot parse. `NativeGesture` in `../gestures.ts` carries
+ * the real backend as its own provider, so importing the directive is the whole setup.
+ */
+import { InjectionToken } from '@angular/core';
+export const GESTURES = new InjectionToken('angular-native.gestures');
+//# sourceMappingURL=gesture-backend.js.map

package/dist/gesture-backend.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gesture-backend.js","sourceRoot":"","sources":["../src/gesture-backend.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAkB/C,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAiB,yBAAyB,CAAC,CAAC","sourcesContent":["/**\n * Platform capability: native gesture recognition, from react-native-gesture-handler.\n *\n * A gesture is recognised by the platform - a `UIPanGestureRecognizer`, an Android\n * `GestureDetector` - rather than by our own responder negotiation. That is what makes a drag\n * inside a scroll view behave, and what a pinch or a rotation needs to exist at all.\n *\n * Injected rather than imported for the reason everything in this shape is: the library reaches\n * React Native's Flow source, which Node cannot parse. `NativeGesture` in `../gestures.ts` carries\n * the real backend as its own provider, so importing the directive is the whole setup.\n */\nimport { InjectionToken } from '@angular/core';\n\n/**\n * A gesture built by the library's own `Gesture` API: `Gesture.Pan()`, or a composition of\n * several. Opaque here on purpose - the shape is the library's, and this package does not know it.\n */\nexport type GestureSpec = object;\n\n/** What a gesture is attached to: a node's react tag. */\nexport interface GestureTarget {\n  readonly tag: number;\n}\n\nexport interface GestureBackend {\n  /** Attach `gesture` to `target`, and return the function that detaches it. */\n  attach(target: GestureTarget, gesture: GestureSpec): () => void;\n}\n\nexport const GESTURES = new InjectionToken<GestureBackend>('angular-native.gestures');\n"]}