@ng-native/components 0.0.1 → 0.1.0

package/dist/image-background.js

@@ -0,0 +1,80 @@
+import { Component, computed, input } from '@angular/core';
+import { Image } from "./image.js";
+import { ViewBase } from "./view-base.js";
+import * as i0 from "@angular/core";
+/**
+ * A view with an image behind its children. RN's `ImageBackground` is a `View` wrapping an
+ * absolutely-filled `Image`; there is no native component for it.
+ *
+ * `imageStyle` styles the image itself. RN also copies the outer style's width and height onto
+ * the image, a documented workaround for the image otherwise sizing itself; that is done here
+ * from `[style]`, and a background with no size there fills its box at 100%.
+ */
+export class ImageBackground extends ViewBase {
+    source = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "source" }] : /* istanbul ignore next */ []));
+    defaultSource = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "defaultSource" }] : /* istanbul ignore next */ []));
+    resizeMode = input('cover', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resizeMode" }] : /* istanbul ignore next */ []));
+    blurRadius = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "blurRadius" }] : /* istanbul ignore next */ []));
+    tintColor = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "tintColor" }] : /* istanbul ignore next */ []));
+    alt = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "alt" }] : /* istanbul ignore next */ []));
+    /** Styles applied to the image rather than the container. */
+    imageStyle = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "imageStyle" }] : /* istanbul ignore next */ []));
+    fill = computed(() => {
+        const outer = this.node.props['style'];
+        return {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            bottom: 0,
+            right: 0,
+            // A background sized by a class has nothing in its style to copy. Left unsized, the image
+            // would take its picture's own size rather than the box it is meant to fill.
+            width: outer?.width ?? '100%',
+            height: outer?.height ?? '100%',
+            ...this.imageStyle(),
+        };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fill" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: ImageBackground, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.0", type: ImageBackground, isStandalone: true, selector: "image-background", inputs: { source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: false, transformFunction: null }, defaultSource: { classPropertyName: "defaultSource", publicName: "defaultSource", isSignal: true, isRequired: false, transformFunction: null }, resizeMode: { classPropertyName: "resizeMode", publicName: "resizeMode", isSignal: true, isRequired: false, transformFunction: null }, blurRadius: { classPropertyName: "blurRadius", publicName: "blurRadius", isSignal: true, isRequired: false, transformFunction: null }, tintColor: { classPropertyName: "tintColor", publicName: "tintColor", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, imageStyle: { classPropertyName: "imageStyle", publicName: "imageStyle", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
+    <image
+      [source]="source()"
+      [style]="fill()"
+      [resizeMode]="resizeMode()"
+      [blurRadius]="blurRadius()"
+      [tintColor]="tintColor()"
+      [defaultSource]="defaultSource()"
+      [alt]="alt()"
+      accessibilityIgnoresInvertColors="true"
+    />
+    <ng-content />
+  `, isInline: true, dependencies: [{ kind: "directive", type: Image, selector: "image", inputs: ["source", "src", "srcSet", "defaultSource", "loadingIndicatorSource", "resizeMode", "resizeMethod", "resizeMultiplier", "blurRadius", "capInsets", "tintColor", "fadeDuration", "progressiveRenderingEnabled", "alt", "crossOrigin", "referrerPolicy"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: ImageBackground, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'image-background',
+                    imports: [Image],
+                    template: `
+    <image
+      [source]="source()"
+      [style]="fill()"
+      [resizeMode]="resizeMode()"
+      [blurRadius]="blurRadius()"
+      [tintColor]="tintColor()"
+      [defaultSource]="defaultSource()"
+      [alt]="alt()"
+      accessibilityIgnoresInvertColors="true"
+    />
+    <ng-content />
+  `,
+                }]
+        }], propDecorators: { source: [{ type: i0.Input, args: [{ isSignal: true, alias: "source", required: false }] }], defaultSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultSource", required: false }] }], resizeMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizeMode", required: false }] }], blurRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "blurRadius", required: false }] }], tintColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "tintColor", required: false }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], imageStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageStyle", required: false }] }] } });
+//# sourceMappingURL=image-background.js.map

package/dist/image-background.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-background.js","sourceRoot":"","sources":["../src/image-background.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC3D,OAAO,EAAE,KAAK,EAA0C,MAAM,YAAY,CAAC;AAC3E,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;;AAE1C;;;;;;;GAOG;AAkBH,MAAM,OAAO,eAAgB,SAAQ,QAAQ;IAClC,MAAM,GAAG,KAAK;0FAAe,CAAC;IAC9B,aAAa,GAAG,KAAK;iGAAe,CAAC;IACrC,UAAU,GAAG,KAAK,CAAkB,OAAO;mFAAC,CAAC;IAC7C,UAAU,GAAG,KAAK;8FAAU,CAAC;IAC7B,SAAS,GAAG,KAAK;6FAAU,CAAC;IAC5B,GAAG,GAAG,KAAK;uFAAU,CAAC;IAC/B,6DAA6D;IACpD,UAAU,GAAG,KAAK;8FAA2B,CAAC;IAEpC,IAAI,GAAG,QAAQ,CAAC,GAAG,EAAE;QACtC,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAsD,CAAC;QAC5F,OAAO;YACL,QAAQ,EAAE,UAAU;YACpB,GAAG,EAAE,CAAC;YACN,IAAI,EAAE,CAAC;YACP,MAAM,EAAE,CAAC;YACT,KAAK,EAAE,CAAC;YACR,0FAA0F;YAC1F,6EAA6E;YAC7E,KAAK,EAAE,KAAK,EAAE,KAAK,IAAI,MAAM;YAC7B,MAAM,EAAE,KAAK,EAAE,MAAM,IAAI,MAAM;YAC/B,GAAG,IAAI,CAAC,UAAU,EAAE;SACrB,CAAC;IACJ,CAAC;6EAAC,CAAC;uGAxBQ,eAAe;2FAAf,eAAe,qgCAdhB;;;;;;;;;;;;GAYT,4DAbS,KAAK;;2FAeJ,eAAe;kBAjB3B,SAAS;mBAAC;oBACT,QAAQ,EAAE,kBAAkB;oBAC5B,OAAO,EAAE,CAAC,KAAK,CAAC;oBAChB,QAAQ,EAAE;;;;;;;;;;;;GAYT;iBACF","sourcesContent":["import { Component, computed, input } from '@angular/core';\nimport { Image, type ImageResizeMode, type ImageSource } from './image.ts';\nimport { ViewBase } from './view-base.ts';\n\n/**\n * A view with an image behind its children. RN's `ImageBackground` is a `View` wrapping an\n * absolutely-filled `Image`; there is no native component for it.\n *\n * `imageStyle` styles the image itself. RN also copies the outer style's width and height onto\n * the image, a documented workaround for the image otherwise sizing itself; that is done here\n * from `[style]`, and a background with no size there fills its box at 100%.\n */\n@Component({\n  selector: 'image-background',\n  imports: [Image],\n  template: `\n    <image\n      [source]=\"source()\"\n      [style]=\"fill()\"\n      [resizeMode]=\"resizeMode()\"\n      [blurRadius]=\"blurRadius()\"\n      [tintColor]=\"tintColor()\"\n      [defaultSource]=\"defaultSource()\"\n      [alt]=\"alt()\"\n      accessibilityIgnoresInvertColors=\"true\"\n    />\n    <ng-content />\n  `,\n})\nexport class ImageBackground extends ViewBase {\n  readonly source = input<ImageSource>();\n  readonly defaultSource = input<ImageSource>();\n  readonly resizeMode = input<ImageResizeMode>('cover');\n  readonly blurRadius = input<number>();\n  readonly tintColor = input<string>();\n  readonly alt = input<string>();\n  /** Styles applied to the image rather than the container. */\n  readonly imageStyle = input<Record<string, unknown>>();\n\n  protected readonly fill = computed(() => {\n    const outer = this.node.props['style'] as { width?: unknown; height?: unknown } | undefined;\n    return {\n      position: 'absolute',\n      top: 0,\n      left: 0,\n      bottom: 0,\n      right: 0,\n      // A background sized by a class has nothing in its style to copy. Left unsized, the image\n      // would take its picture's own size rather than the box it is meant to fill.\n      width: outer?.width ?? '100%',\n      height: outer?.height ?? '100%',\n      ...this.imageStyle(),\n    };\n  });\n}\n"]}

package/dist/image.d.ts

@@ -0,0 +1,79 @@
+import type { Insets } from './events.ts';
+import { ViewBase } from './view-base.ts';
+import * as i0 from "@angular/core";
+/** A remote or local image, or several at different scales for native to choose between. */
+export interface ImageURISource {
+    readonly uri: string;
+    readonly width?: number;
+    readonly height?: number;
+    readonly scale?: number;
+    readonly headers?: Readonly<Record<string, string>>;
+    readonly method?: string;
+    readonly body?: string;
+    readonly cache?: 'default' | 'reload' | 'force-cache' | 'only-if-cached';
+}
+/** A `require()`d asset compiles to a number; the host resolves it at commit time. */
+export type ImageSource = number | ImageURISource | readonly ImageURISource[];
+export type ImageResizeMode = 'cover' | 'contain' | 'stretch' | 'repeat' | 'center' | 'none';
+/**
+ * An image. Commits as `RCTImageView`.
+ *
+ * What RN's `Image.js` does before native sees the props is done here: a `require()`d asset is
+ * resolved and its own width and height become the default size, `src` and `srcSet` are turned
+ * into sources, `alt` becomes the accessibility label, and `crossOrigin` and `referrerPolicy`
+ * become request headers. A `tintColor` given in `[style]` reaches native as it does in RN,
+ * because the engine flattens style into props.
+ *
+ * Events are element events: `(load)`, `(error)`, `(loadStart)`, `(loadEnd)`, `(progress)`.
+ */
+export declare class Image extends ViewBase {
+    /** `Image.ios.js`: alt text is what makes an image worth stopping on. */
+    protected accessibleByDefault(): boolean;
+    /** And it is the label, unless the app gave a better one. */
+    protected labelByDefault(): string | undefined;
+    /** What to show: a `require()`d asset, a `{uri}` object, or a list of them. */
+    readonly source: import("@angular/core").InputSignal<ImageSource | undefined>;
+    /** `src`: a bare URI, the web spelling of `source`. */
+    readonly src: import("@angular/core").InputSignal<string | undefined>;
+    /** `srcSet`: URIs at several scales, as HTML writes it. */
+    readonly srcSet: import("@angular/core").InputSignal<string | undefined>;
+    /** Shown until `source` loads. */
+    readonly defaultSource: import("@angular/core").InputSignal<ImageSource | undefined>;
+    /** Android: an image shown in place of the loading indicator. */
+    readonly loadingIndicatorSource: import("@angular/core").InputSignal<ImageURISource | undefined>;
+    /** How the image fits its box. Defaults to `cover`. */
+    readonly resizeMode: import("@angular/core").InputSignal<ImageResizeMode | undefined>;
+    /** Android: how a large image is scaled down while decoding. */
+    readonly resizeMethod: import("@angular/core").InputSignal<"none" | "auto" | "resize" | "scale" | undefined>;
+    /** Android: the factor `resizeMethod: 'resize'` scales by. */
+    readonly resizeMultiplier: import("@angular/core").InputSignalWithTransform<number | undefined, unknown>;
+    /** A blur applied to the image. */
+    readonly blurRadius: import("@angular/core").InputSignalWithTransform<number | undefined, unknown>;
+    /** iOS: the edges of a stretchable image that must not stretch. */
+    readonly capInsets: import("@angular/core").InputSignal<Insets | undefined>;
+    /** Recolour every opaque pixel; for icons. May also come from `[style]`. */
+    readonly tintColor: import("@angular/core").InputSignal<string | undefined>;
+    /** Android: how long the fade-in takes, in ms. Defaults to 300. */
+    readonly fadeDuration: import("@angular/core").InputSignalWithTransform<number | undefined, unknown>;
+    /** Android: show a progressive JPEG as it loads. */
+    readonly progressiveRenderingEnabled: import("@angular/core").InputSignalWithTransform<boolean | undefined, unknown>;
+    /** Text describing the image for a screen reader; sets `accessible` too. */
+    readonly alt: import("@angular/core").InputSignal<string | undefined>;
+    /** Send credentials with the request, as the HTML attribute means. */
+    readonly crossOrigin: import("@angular/core").InputSignal<"anonymous" | "use-credentials" | undefined>;
+    /** The `Referrer-Policy` header for the request. */
+    readonly referrerPolicy: import("@angular/core").InputSignal<string | undefined>;
+    /** `source` alone, resolved once however many things read it. */
+    private readonly fromSource;
+    /** Every source form, resolved to the list native reads. */
+    protected readonly resolvedSource: import("@angular/core").Signal<readonly ImageURISource[] | undefined>;
+    /** A single source's own size, which RN uses as the default box, as an `<img>` does. */
+    protected readonly intrinsic: import("@angular/core").Signal<{
+        width: number;
+        height: number;
+    } | undefined>;
+    private fromSrc;
+    private headers;
+    static ɵfac: i0.ɵɵFactoryDeclaration<Image, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<Image, "image", never, { "source": { "alias": "source"; "required": false; "isSignal": true; }; "src": { "alias": "src"; "required": false; "isSignal": true; }; "srcSet": { "alias": "srcSet"; "required": false; "isSignal": true; }; "defaultSource": { "alias": "defaultSource"; "required": false; "isSignal": true; }; "loadingIndicatorSource": { "alias": "loadingIndicatorSource"; "required": false; "isSignal": true; }; "resizeMode": { "alias": "resizeMode"; "required": false; "isSignal": true; }; "resizeMethod": { "alias": "resizeMethod"; "required": false; "isSignal": true; }; "resizeMultiplier": { "alias": "resizeMultiplier"; "required": false; "isSignal": true; }; "blurRadius": { "alias": "blurRadius"; "required": false; "isSignal": true; }; "capInsets": { "alias": "capInsets"; "required": false; "isSignal": true; }; "tintColor": { "alias": "tintColor"; "required": false; "isSignal": true; }; "fadeDuration": { "alias": "fadeDuration"; "required": false; "isSignal": true; }; "progressiveRenderingEnabled": { "alias": "progressiveRenderingEnabled"; "required": false; "isSignal": true; }; "alt": { "alias": "alt"; "required": false; "isSignal": true; }; "crossOrigin": { "alias": "crossOrigin"; "required": false; "isSignal": true; }; "referrerPolicy": { "alias": "referrerPolicy"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/dist/image.js

@@ -0,0 +1,155 @@
+import { Directive, computed, input } from '@angular/core';
+import { optionalBoolean, optionalNumber } from "./transforms.js";
+import { ViewBase } from "./view-base.js";
+import * as i0 from "@angular/core";
+/** Parse an HTML `srcset`: `"a.png 1x, a@2x.png 2x"`. */
+function parseSrcSet(srcSet) {
+    return srcSet
+        .split(',')
+        .map((entry) => entry.trim())
+        .filter(Boolean)
+        .map((entry) => {
+        const [uri, descriptor] = entry.split(/\s+/);
+        const scale = descriptor?.endsWith('x') ? Number(descriptor.slice(0, -1)) : 1;
+        return { uri: uri, scale: Number.isFinite(scale) ? scale : 1 };
+    });
+}
+/**
+ * An image. Commits as `RCTImageView`.
+ *
+ * What RN's `Image.js` does before native sees the props is done here: a `require()`d asset is
+ * resolved and its own width and height become the default size, `src` and `srcSet` are turned
+ * into sources, `alt` becomes the accessibility label, and `crossOrigin` and `referrerPolicy`
+ * become request headers. A `tintColor` given in `[style]` reaches native as it does in RN,
+ * because the engine flattens style into props.
+ *
+ * Events are element events: `(load)`, `(error)`, `(loadStart)`, `(loadEnd)`, `(progress)`.
+ */
+export class Image extends ViewBase {
+    /** `Image.ios.js`: alt text is what makes an image worth stopping on. */
+    accessibleByDefault() {
+        return this.alt() !== undefined;
+    }
+    /** And it is the label, unless the app gave a better one. */
+    labelByDefault() {
+        return this.alt();
+    }
+    /** What to show: a `require()`d asset, a `{uri}` object, or a list of them. */
+    source = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "source" }] : /* istanbul ignore next */ []));
+    /** `src`: a bare URI, the web spelling of `source`. */
+    src = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "src" }] : /* istanbul ignore next */ []));
+    /** `srcSet`: URIs at several scales, as HTML writes it. */
+    srcSet = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "srcSet" }] : /* istanbul ignore next */ []));
+    /** Shown until `source` loads. */
+    defaultSource = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "defaultSource" }] : /* istanbul ignore next */ []));
+    /** Android: an image shown in place of the loading indicator. */
+    loadingIndicatorSource = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "loadingIndicatorSource" }] : /* istanbul ignore next */ []));
+    /** How the image fits its box. Defaults to `cover`. */
+    resizeMode = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "resizeMode" }] : /* istanbul ignore next */ []));
+    /** Android: how a large image is scaled down while decoding. */
+    resizeMethod = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "resizeMethod" }] : /* istanbul ignore next */ []));
+    /** Android: the factor `resizeMethod: 'resize'` scales by. */
+    resizeMultiplier = input(undefined, { ...(ngDevMode ? { debugName: "resizeMultiplier" } : /* istanbul ignore next */ {}), transform: optionalNumber });
+    /** A blur applied to the image. */
+    blurRadius = input(undefined, { ...(ngDevMode ? { debugName: "blurRadius" } : /* istanbul ignore next */ {}), transform: optionalNumber });
+    /** iOS: the edges of a stretchable image that must not stretch. */
+    capInsets = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "capInsets" }] : /* istanbul ignore next */ []));
+    /** Recolour every opaque pixel; for icons. May also come from `[style]`. */
+    tintColor = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "tintColor" }] : /* istanbul ignore next */ []));
+    /** Android: how long the fade-in takes, in ms. Defaults to 300. */
+    fadeDuration = input(undefined, { ...(ngDevMode ? { debugName: "fadeDuration" } : /* istanbul ignore next */ {}), transform: optionalNumber });
+    /** Android: show a progressive JPEG as it loads. */
+    progressiveRenderingEnabled = input(undefined, { ...(ngDevMode ? { debugName: "progressiveRenderingEnabled" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    /** Text describing the image for a screen reader; sets `accessible` too. */
+    alt = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "alt" }] : /* istanbul ignore next */ []));
+    /** Send credentials with the request, as the HTML attribute means. */
+    crossOrigin = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "crossOrigin" }] : /* istanbul ignore next */ []));
+    /** The `Referrer-Policy` header for the request. */
+    referrerPolicy = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "referrerPolicy" }] : /* istanbul ignore next */ []));
+    /** `source` alone, resolved once however many things read it. */
+    fromSource = computed(() => {
+        const source = this.source();
+        if (source === undefined)
+            return [];
+        if (Array.isArray(source))
+            return source;
+        const resolved = this.engine.resolveAsset(source);
+        return resolved ? [resolved] : [];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fromSource" }] : /* istanbul ignore next */ []));
+    /** Every source form, resolved to the list native reads. */
+    resolvedSource = computed(() => {
+        const listed = [...this.fromSource(), ...this.fromSrc()];
+        if (!listed.length)
+            return undefined;
+        const headers = this.headers();
+        return headers
+            ? listed.map((one) => ({ ...one, headers: { ...one.headers, ...headers } }))
+            : listed;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedSource" }] : /* istanbul ignore next */ []));
+    /** A single source's own size, which RN uses as the default box, as an `<img>` does. */
+    intrinsic = computed(() => {
+        const source = this.source();
+        if (this.src() || this.srcSet() || Array.isArray(source))
+            return undefined;
+        const [one] = this.fromSource();
+        return one?.width !== undefined && one.height !== undefined
+            ? { width: one.width, height: one.height }
+            : undefined;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "intrinsic" }] : /* istanbul ignore next */ []));
+    fromSrc() {
+        const set = this.srcSet();
+        const src = this.src();
+        const out = set ? parseSrcSet(set) : [];
+        if (src && !out.some((one) => one.scale === 1))
+            out.push({ uri: src, scale: 1 });
+        return out;
+    }
+    headers() {
+        const headers = {};
+        const cors = this.crossOrigin();
+        if (cors === 'use-credentials')
+            headers['Access-Control-Allow-Credentials'] = 'true';
+        const referrer = this.referrerPolicy();
+        if (referrer)
+            headers['Referrer-Policy'] = referrer;
+        return Object.keys(headers).length ? headers : null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: Image, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.2.0", type: Image, isStandalone: true, selector: "image", inputs: { source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, srcSet: { classPropertyName: "srcSet", publicName: "srcSet", isSignal: true, isRequired: false, transformFunction: null }, defaultSource: { classPropertyName: "defaultSource", publicName: "defaultSource", isSignal: true, isRequired: false, transformFunction: null }, loadingIndicatorSource: { classPropertyName: "loadingIndicatorSource", publicName: "loadingIndicatorSource", isSignal: true, isRequired: false, transformFunction: null }, resizeMode: { classPropertyName: "resizeMode", publicName: "resizeMode", isSignal: true, isRequired: false, transformFunction: null }, resizeMethod: { classPropertyName: "resizeMethod", publicName: "resizeMethod", isSignal: true, isRequired: false, transformFunction: null }, resizeMultiplier: { classPropertyName: "resizeMultiplier", publicName: "resizeMultiplier", isSignal: true, isRequired: false, transformFunction: null }, blurRadius: { classPropertyName: "blurRadius", publicName: "blurRadius", isSignal: true, isRequired: false, transformFunction: null }, capInsets: { classPropertyName: "capInsets", publicName: "capInsets", isSignal: true, isRequired: false, transformFunction: null }, tintColor: { classPropertyName: "tintColor", publicName: "tintColor", isSignal: true, isRequired: false, transformFunction: null }, fadeDuration: { classPropertyName: "fadeDuration", publicName: "fadeDuration", isSignal: true, isRequired: false, transformFunction: null }, progressiveRenderingEnabled: { classPropertyName: "progressiveRenderingEnabled", publicName: "progressiveRenderingEnabled", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, crossOrigin: { classPropertyName: "crossOrigin", publicName: "crossOrigin", isSignal: true, isRequired: false, transformFunction: null }, referrerPolicy: { classPropertyName: "referrerPolicy", publicName: "referrerPolicy", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "source": "resolvedSource()", "defaultSource": "defaultSource()", "loadingIndicatorSource": "loadingIndicatorSource()", "resizeMode": "resizeMode()", "resizeMethod": "resizeMethod()", "resizeMultiplier": "resizeMultiplier()", "blurRadius": "blurRadius()", "capInsets": "capInsets()", "tintColor": "tintColor()", "fadeDuration": "fadeDuration()", "progressiveRenderingEnabled": "progressiveRenderingEnabled()", "intrinsicSize": "intrinsic()" } }, usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: Image, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'image',
+                    host: {
+                        '[source]': 'resolvedSource()',
+                        '[defaultSource]': 'defaultSource()',
+                        '[loadingIndicatorSource]': 'loadingIndicatorSource()',
+                        '[resizeMode]': 'resizeMode()',
+                        '[resizeMethod]': 'resizeMethod()',
+                        '[resizeMultiplier]': 'resizeMultiplier()',
+                        '[blurRadius]': 'blurRadius()',
+                        '[capInsets]': 'capInsets()',
+                        '[tintColor]': 'tintColor()',
+                        '[fadeDuration]': 'fadeDuration()',
+                        '[progressiveRenderingEnabled]': 'progressiveRenderingEnabled()',
+                        '[intrinsicSize]': 'intrinsic()',
+                    },
+                }]
+        }], propDecorators: { source: [{ type: i0.Input, args: [{ isSignal: true, alias: "source", required: false }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], srcSet: [{ type: i0.Input, args: [{ isSignal: true, alias: "srcSet", required: false }] }], defaultSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultSource", required: false }] }], loadingIndicatorSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingIndicatorSource", required: false }] }], resizeMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizeMode", required: false }] }], resizeMethod: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizeMethod", required: false }] }], resizeMultiplier: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizeMultiplier", required: false }] }], blurRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "blurRadius", required: false }] }], capInsets: [{ type: i0.Input, args: [{ isSignal: true, alias: "capInsets", required: false }] }], tintColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "tintColor", required: false }] }], fadeDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "fadeDuration", required: false }] }], progressiveRenderingEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "progressiveRenderingEnabled", required: false }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], crossOrigin: [{ type: i0.Input, args: [{ isSignal: true, alias: "crossOrigin", required: false }] }], referrerPolicy: [{ type: i0.Input, args: [{ isSignal: true, alias: "referrerPolicy", required: false }] }] } });
+//# sourceMappingURL=image.js.map

package/dist/image.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image.js","sourceRoot":"","sources":["../src/image.ts"],"names":[],"mappings":"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","sourcesContent":["import { Directive, computed, input } from '@angular/core';\nimport type { Insets } from './events.ts';\nimport { optionalBoolean, optionalNumber } from './transforms.ts';\nimport { ViewBase } from './view-base.ts';\n\n/** A remote or local image, or several at different scales for native to choose between. */\nexport interface ImageURISource {\n  readonly uri: string;\n  readonly width?: number;\n  readonly height?: number;\n  readonly scale?: number;\n  readonly headers?: Readonly<Record<string, string>>;\n  readonly method?: string;\n  readonly body?: string;\n  readonly cache?: 'default' | 'reload' | 'force-cache' | 'only-if-cached';\n}\n/** A `require()`d asset compiles to a number; the host resolves it at commit time. */\nexport type ImageSource = number | ImageURISource | readonly ImageURISource[];\n\nexport type ImageResizeMode = 'cover' | 'contain' | 'stretch' | 'repeat' | 'center' | 'none';\n\n/** Parse an HTML `srcset`: `\"a.png 1x, a@2x.png 2x\"`. */\nfunction parseSrcSet(srcSet: string): ImageURISource[] {\n  return srcSet\n    .split(',')\n    .map((entry) => entry.trim())\n    .filter(Boolean)\n    .map((entry) => {\n      const [uri, descriptor] = entry.split(/\\s+/);\n      const scale = descriptor?.endsWith('x') ? Number(descriptor.slice(0, -1)) : 1;\n      return { uri: uri!, scale: Number.isFinite(scale) ? scale : 1 };\n    });\n}\n\n/**\n * An image. Commits as `RCTImageView`.\n *\n * What RN's `Image.js` does before native sees the props is done here: a `require()`d asset is\n * resolved and its own width and height become the default size, `src` and `srcSet` are turned\n * into sources, `alt` becomes the accessibility label, and `crossOrigin` and `referrerPolicy`\n * become request headers. A `tintColor` given in `[style]` reaches native as it does in RN,\n * because the engine flattens style into props.\n *\n * Events are element events: `(load)`, `(error)`, `(loadStart)`, `(loadEnd)`, `(progress)`.\n */\n@Directive({\n  selector: 'image',\n  host: {\n    '[source]': 'resolvedSource()',\n    '[defaultSource]': 'defaultSource()',\n    '[loadingIndicatorSource]': 'loadingIndicatorSource()',\n    '[resizeMode]': 'resizeMode()',\n    '[resizeMethod]': 'resizeMethod()',\n    '[resizeMultiplier]': 'resizeMultiplier()',\n    '[blurRadius]': 'blurRadius()',\n    '[capInsets]': 'capInsets()',\n    '[tintColor]': 'tintColor()',\n    '[fadeDuration]': 'fadeDuration()',\n    '[progressiveRenderingEnabled]': 'progressiveRenderingEnabled()',\n    '[intrinsicSize]': 'intrinsic()',\n  },\n})\nexport class Image extends ViewBase {\n  /** `Image.ios.js`: alt text is what makes an image worth stopping on. */\n  protected override accessibleByDefault(): boolean {\n    return this.alt() !== undefined;\n  }\n\n  /** And it is the label, unless the app gave a better one. */\n  protected override labelByDefault(): string | undefined {\n    return this.alt();\n  }\n\n  /** What to show: a `require()`d asset, a `{uri}` object, or a list of them. */\n  readonly source = input<ImageSource>();\n  /** `src`: a bare URI, the web spelling of `source`. */\n  readonly src = input<string>();\n  /** `srcSet`: URIs at several scales, as HTML writes it. */\n  readonly srcSet = input<string>();\n  /** Shown until `source` loads. */\n  readonly defaultSource = input<ImageSource>();\n  /** Android: an image shown in place of the loading indicator. */\n  readonly loadingIndicatorSource = input<ImageURISource>();\n  /** How the image fits its box. Defaults to `cover`. */\n  readonly resizeMode = input<ImageResizeMode>();\n  /** Android: how a large image is scaled down while decoding. */\n  readonly resizeMethod = input<'auto' | 'resize' | 'scale' | 'none'>();\n  /** Android: the factor `resizeMethod: 'resize'` scales by. */\n  readonly resizeMultiplier = input(undefined, { transform: optionalNumber });\n  /** A blur applied to the image. */\n  readonly blurRadius = input(undefined, { transform: optionalNumber });\n  /** iOS: the edges of a stretchable image that must not stretch. */\n  readonly capInsets = input<Insets>();\n  /** Recolour every opaque pixel; for icons. May also come from `[style]`. */\n  readonly tintColor = input<string>();\n  /** Android: how long the fade-in takes, in ms. Defaults to 300. */\n  readonly fadeDuration = input(undefined, { transform: optionalNumber });\n  /** Android: show a progressive JPEG as it loads. */\n  readonly progressiveRenderingEnabled = input(undefined, { transform: optionalBoolean });\n  /** Text describing the image for a screen reader; sets `accessible` too. */\n  readonly alt = input<string>();\n  /** Send credentials with the request, as the HTML attribute means. */\n  readonly crossOrigin = input<'anonymous' | 'use-credentials'>();\n  /** The `Referrer-Policy` header for the request. */\n  readonly referrerPolicy = input<string>();\n\n  /** `source` alone, resolved once however many things read it. */\n  private readonly fromSource = computed<readonly ImageURISource[]>(() => {\n    const source = this.source();\n    if (source === undefined) return [];\n    if (Array.isArray(source)) return source as readonly ImageURISource[];\n    const resolved = this.engine.resolveAsset(source) as ImageURISource | undefined;\n    return resolved ? [resolved] : [];\n  });\n\n  /** Every source form, resolved to the list native reads. */\n  protected readonly resolvedSource = computed<readonly ImageURISource[] | undefined>(() => {\n    const listed = [...this.fromSource(), ...this.fromSrc()];\n    if (!listed.length) return undefined;\n    const headers = this.headers();\n    return headers\n      ? listed.map((one) => ({ ...one, headers: { ...one.headers, ...headers } }))\n      : listed;\n  });\n\n  /** A single source's own size, which RN uses as the default box, as an `<img>` does. */\n  protected readonly intrinsic = computed(() => {\n    const source = this.source();\n    if (this.src() || this.srcSet() || Array.isArray(source)) return undefined;\n    const [one] = this.fromSource();\n    return one?.width !== undefined && one.height !== undefined\n      ? { width: one.width, height: one.height }\n      : undefined;\n  });\n\n  private fromSrc(): readonly ImageURISource[] {\n    const set = this.srcSet();\n    const src = this.src();\n    const out = set ? parseSrcSet(set) : [];\n    if (src && !out.some((one) => one.scale === 1)) out.push({ uri: src, scale: 1 });\n    return out;\n  }\n\n  private headers(): Record<string, string> | null {\n    const headers: Record<string, string> = {};\n    const cors = this.crossOrigin();\n    if (cors === 'use-credentials') headers['Access-Control-Allow-Credentials'] = 'true';\n    const referrer = this.referrerPolicy();\n    if (referrer) headers['Referrer-Policy'] = referrer;\n    return Object.keys(headers).length ? headers : null;\n  }\n}\n"]}

package/dist/index.d.ts

@@ -0,0 +1,38 @@
+/**
+ * The host primitives, and the platform-capability tokens they inject.
+ *
+ * Every element a template renders natively is a component here and must be imported by the
+ * component whose template uses it, as any Angular component must. A template that uses one
+ * without importing it compiles, renders a plain view, and is reported in dev builds.
+ *
+ * Importing this barrel evaluates decorators, so anything a Node test needs at runtime has to
+ * be reached as a source file instead - see the note in `packages/integration-tests/compile.ts`.
+ */
+export { ActivityIndicator } from './activity-indicator.ts';
+export { type AnimatedPropsHandle, type AnimationBackend } from './animation.ts';
+export { type AccessibilityActionEvent, type AccessibilityActionPayload, type ContentSizeChangeEvent, type ImageErrorEvent, type ImageErrorPayload, type ImageLoadEvent, type ImageLoadPayload, type ImageProgressEvent, type ImageProgressPayload, type Insets, type KeyPressEvent, type KeyPressPayload, type LayoutEvent, type LayoutPayload, type OrientationChangeEvent, type OrientationChangePayload, type Point, type Rect, type ScrollEvent, type ScrollPayload, type SelectionChangeEvent, type SelectionChangePayload, type Size, type SwitchChangeEvent, type SwitchChangePayload, type TextInputChangeEvent, type TextInputChangePayload, type TextInputContentSizeEvent, type TextInputContentSizePayload, type TextInputEditingEvent, type TextInputFocusEvent, type TextInputFocusPayload, type TextInputScrollEvent, type TextInputScrollPayload, type TextLayoutEvent, type TextLayoutLine, type TextLayoutPayload, type TouchEvent, type TouchEventPayload, } from './events.ts';
+export { Image, type ImageResizeMode, type ImageSource, type ImageURISource } from './image.ts';
+export { ImageBackground } from './image-background.ts';
+export { InputAccessoryView } from './input-accessory-view.ts';
+export { KEYBOARD_CONTROLLER, KeyboardDock, KeyboardLift, provideKeyboardController, } from './keyboard-dock.ts';
+export { KeyboardAvoidingView, type KeyboardAvoidingBehavior } from './keyboard-avoiding-view.ts';
+export { Modal, type ModalOrientation, type ModalPresentationStyle } from './modal.ts';
+export { NativeRef } from './native-ref.ts';
+export { ControlBase, PressBehavior, Pressable, TouchableBase, type AndroidRipple, type PressEvent, } from './pressable.ts';
+export { RefreshControl } from './refresh-control.ts';
+export { type SafeAreaEdge, type SafeAreaEdges } from './safe-area.ts';
+export { SafeAreaProvider } from './safe-area-provider.ts';
+export { SafeAreaView, type SafeAreaEdgeMode } from './safe-area-view.ts';
+export { type KeyboardShouldPersistTaps } from './keyboard-taps.ts';
+export { ScrollView } from './scroll-view.ts';
+export { SectionFooter, SectionHeader, SectionItem, SectionList, SectionSeparator, type SectionContext, type SectionItemContext, type SectionListSection, type SectionRow, type SectionSeparatorContext, } from './section-list.ts';
+export { Switch } from './switch.ts';
+export { Text, type DynamicTypeRamp, type EllipsizeMode } from './text.ts';
+export { TextInput, type KeyboardType, type ReturnKeyType, type SubmitBehavior, } from './text-input.ts';
+export { TouchableOpacity } from './touchable-opacity.ts';
+export { optionalBoolean, optionalNumber } from './transforms.ts';
+export { View } from './view.ts';
+export { ViewBase, ViewBehavior, contributeAccessibility, type AccessibilityAction, type AccessibilityContribution, type AccessibilityLiveRegion, type AccessibilityRole, type AccessibilityState, type AccessibilityValue, type AndroidDrawable, type ImportantForAccessibility, type PointerEvents, } from './view-base.ts';
+export { VirtualList, VirtualListRow, VirtualListSeparator, type VirtualItemHeight, type VirtualListSeparatorContext, type VirtualListVisiblePosition, type VirtualRow, } from './virtual-list.ts';
+export { type GestureBackend, type GestureSpec, type GestureTarget } from './gesture-backend.ts';
+export { workletScroll, workletStyle, type SharedValue, type WorkletBackend, type WorkletScrollSpec, type WorkletStyleSpec, type WorkletTarget, } from './worklets.ts';

package/dist/index.js

@@ -0,0 +1,39 @@
+/**
+ * The host primitives, and the platform-capability tokens they inject.
+ *
+ * Every element a template renders natively is a component here and must be imported by the
+ * component whose template uses it, as any Angular component must. A template that uses one
+ * without importing it compiles, renders a plain view, and is reported in dev builds.
+ *
+ * Importing this barrel evaluates decorators, so anything a Node test needs at runtime has to
+ * be reached as a source file instead - see the note in `packages/integration-tests/compile.ts`.
+ */
+export { ActivityIndicator } from "./activity-indicator.js";
+export {} from "./animation.js";
+export {} from "./events.js";
+export { Image } from "./image.js";
+export { ImageBackground } from "./image-background.js";
+export { InputAccessoryView } from "./input-accessory-view.js";
+export { KEYBOARD_CONTROLLER, KeyboardDock, KeyboardLift, provideKeyboardController, } from "./keyboard-dock.js";
+export { KeyboardAvoidingView } from "./keyboard-avoiding-view.js";
+export { Modal } from "./modal.js";
+export { NativeRef } from "./native-ref.js";
+export { ControlBase, PressBehavior, Pressable, TouchableBase, } from "./pressable.js";
+export { RefreshControl } from "./refresh-control.js";
+export {} from "./safe-area.js";
+export { SafeAreaProvider } from "./safe-area-provider.js";
+export { SafeAreaView } from "./safe-area-view.js";
+export {} from "./keyboard-taps.js";
+export { ScrollView } from "./scroll-view.js";
+export { SectionFooter, SectionHeader, SectionItem, SectionList, SectionSeparator, } from "./section-list.js";
+export { Switch } from "./switch.js";
+export { Text } from "./text.js";
+export { TextInput, } from "./text-input.js";
+export { TouchableOpacity } from "./touchable-opacity.js";
+export { optionalBoolean, optionalNumber } from "./transforms.js";
+export { View } from "./view.js";
+export { ViewBase, ViewBehavior, contributeAccessibility, } from "./view-base.js";
+export { VirtualList, VirtualListRow, VirtualListSeparator, } from "./virtual-list.js";
+export {} from "./gesture-backend.js";
+export { workletScroll, workletStyle, } from "./worklets.js";
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAmD,MAAM,gBAAgB,CAAC;AACjF,OAAO,EAwCN,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,KAAK,EAA+D,MAAM,YAAY,CAAC;AAChG,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EACL,mBAAmB,EACnB,YAAY,EACZ,YAAY,EACZ,yBAAyB,GAC1B,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,oBAAoB,EAAiC,MAAM,6BAA6B,CAAC;AAClG,OAAO,EAAE,KAAK,EAAsD,MAAM,YAAY,CAAC;AACvF,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EACL,WAAW,EACX,aAAa,EACb,SAAS,EACT,aAAa,GAGd,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAyC,MAAM,gBAAgB,CAAC;AACvE,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAyB,MAAM,qBAAqB,CAAC;AAC1E,OAAO,EAAkC,MAAM,oBAAoB,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EACL,aAAa,EACb,aAAa,EACb,WAAW,EACX,WAAW,EACX,gBAAgB,GAMjB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,IAAI,EAA4C,MAAM,WAAW,CAAC;AAC3E,OAAO,EACL,SAAS,GAIV,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAClE,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,OAAO,EACL,QAAQ,EACR,YAAY,EACZ,uBAAuB,GAUxB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EACL,WAAW,EACX,cAAc,EACd,oBAAoB,GAKrB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAA6D,MAAM,sBAAsB,CAAC;AACjG,OAAO,EACL,aAAa,EACb,YAAY,GAMb,MAAM,eAAe,CAAC","sourcesContent":["/**\n * The host primitives, and the platform-capability tokens they inject.\n *\n * Every element a template renders natively is a component here and must be imported by the\n * component whose template uses it, as any Angular component must. A template that uses one\n * without importing it compiles, renders a plain view, and is reported in dev builds.\n *\n * Importing this barrel evaluates decorators, so anything a Node test needs at runtime has to\n * be reached as a source file instead - see the note in `packages/integration-tests/compile.ts`.\n */\nexport { ActivityIndicator } from './activity-indicator.ts';\nexport { type AnimatedPropsHandle, type AnimationBackend } from './animation.ts';\nexport {\n  type AccessibilityActionEvent,\n  type AccessibilityActionPayload,\n  type ContentSizeChangeEvent,\n  type ImageErrorEvent,\n  type ImageErrorPayload,\n  type ImageLoadEvent,\n  type ImageLoadPayload,\n  type ImageProgressEvent,\n  type ImageProgressPayload,\n  type Insets,\n  type KeyPressEvent,\n  type KeyPressPayload,\n  type LayoutEvent,\n  type LayoutPayload,\n  type OrientationChangeEvent,\n  type OrientationChangePayload,\n  type Point,\n  type Rect,\n  type ScrollEvent,\n  type ScrollPayload,\n  type SelectionChangeEvent,\n  type SelectionChangePayload,\n  type Size,\n  type SwitchChangeEvent,\n  type SwitchChangePayload,\n  type TextInputChangeEvent,\n  type TextInputChangePayload,\n  type TextInputContentSizeEvent,\n  type TextInputContentSizePayload,\n  type TextInputEditingEvent,\n  type TextInputFocusEvent,\n  type TextInputFocusPayload,\n  type TextInputScrollEvent,\n  type TextInputScrollPayload,\n  type TextLayoutEvent,\n  type TextLayoutLine,\n  type TextLayoutPayload,\n  type TouchEvent,\n  type TouchEventPayload,\n} from './events.ts';\nexport { Image, type ImageResizeMode, type ImageSource, type ImageURISource } from './image.ts';\nexport { ImageBackground } from './image-background.ts';\nexport { InputAccessoryView } from './input-accessory-view.ts';\nexport {\n  KEYBOARD_CONTROLLER,\n  KeyboardDock,\n  KeyboardLift,\n  provideKeyboardController,\n} from './keyboard-dock.ts';\nexport { KeyboardAvoidingView, type KeyboardAvoidingBehavior } from './keyboard-avoiding-view.ts';\nexport { Modal, type ModalOrientation, type ModalPresentationStyle } from './modal.ts';\nexport { NativeRef } from './native-ref.ts';\nexport {\n  ControlBase,\n  PressBehavior,\n  Pressable,\n  TouchableBase,\n  type AndroidRipple,\n  type PressEvent,\n} from './pressable.ts';\nexport { RefreshControl } from './refresh-control.ts';\nexport { type SafeAreaEdge, type SafeAreaEdges } from './safe-area.ts';\nexport { SafeAreaProvider } from './safe-area-provider.ts';\nexport { SafeAreaView, type SafeAreaEdgeMode } from './safe-area-view.ts';\nexport { type KeyboardShouldPersistTaps } from './keyboard-taps.ts';\nexport { ScrollView } from './scroll-view.ts';\nexport {\n  SectionFooter,\n  SectionHeader,\n  SectionItem,\n  SectionList,\n  SectionSeparator,\n  type SectionContext,\n  type SectionItemContext,\n  type SectionListSection,\n  type SectionRow,\n  type SectionSeparatorContext,\n} from './section-list.ts';\nexport { Switch } from './switch.ts';\nexport { Text, type DynamicTypeRamp, type EllipsizeMode } from './text.ts';\nexport {\n  TextInput,\n  type KeyboardType,\n  type ReturnKeyType,\n  type SubmitBehavior,\n} from './text-input.ts';\nexport { TouchableOpacity } from './touchable-opacity.ts';\nexport { optionalBoolean, optionalNumber } from './transforms.ts';\nexport { View } from './view.ts';\nexport {\n  ViewBase,\n  ViewBehavior,\n  contributeAccessibility,\n  type AccessibilityAction,\n  type AccessibilityContribution,\n  type AccessibilityLiveRegion,\n  type AccessibilityRole,\n  type AccessibilityState,\n  type AccessibilityValue,\n  type AndroidDrawable,\n  type ImportantForAccessibility,\n  type PointerEvents,\n} from './view-base.ts';\nexport {\n  VirtualList,\n  VirtualListRow,\n  VirtualListSeparator,\n  type VirtualItemHeight,\n  type VirtualListSeparatorContext,\n  type VirtualListVisiblePosition,\n  type VirtualRow,\n} from './virtual-list.ts';\nexport { type GestureBackend, type GestureSpec, type GestureTarget } from './gesture-backend.ts';\nexport {\n  workletScroll,\n  workletStyle,\n  type SharedValue,\n  type WorkletBackend,\n  type WorkletScrollSpec,\n  type WorkletStyleSpec,\n  type WorkletTarget,\n} from './worklets.ts';\n"]}

package/dist/input-accessory-view.d.ts

@@ -0,0 +1,16 @@
+import { ViewBase } from './view-base.ts';
+import * as i0 from "@angular/core";
+/**
+ * A bar docked above the keyboard, iOS only. Pair it with a text input by giving this view a
+ * `nativeID` and the input the same `inputAccessoryViewID`.
+ *
+ * RN's wrapper positions the native host absolutely and wraps the content in a safe-area view
+ * sized to the window; the first is done here, the second is the caller's choice of content.
+ * On Android there is no native counterpart and the element commits as a plain view.
+ */
+export declare class InputAccessoryView extends ViewBase {
+    /** The bar's background. */
+    readonly backgroundColor: import("@angular/core").InputSignal<string | undefined>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<InputAccessoryView, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<InputAccessoryView, "input-accessory-view", never, { "backgroundColor": { "alias": "backgroundColor"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/dist/input-accessory-view.js

@@ -0,0 +1,29 @@
+import { Directive, input } from '@angular/core';
+import { ViewBase } from "./view-base.js";
+import * as i0 from "@angular/core";
+/**
+ * A bar docked above the keyboard, iOS only. Pair it with a text input by giving this view a
+ * `nativeID` and the input the same `inputAccessoryViewID`.
+ *
+ * RN's wrapper positions the native host absolutely and wraps the content in a safe-area view
+ * sized to the window; the first is done here, the second is the caller's choice of content.
+ * On Android there is no native counterpart and the element commits as a plain view.
+ */
+export class InputAccessoryView extends ViewBase {
+    /** The bar's background. */
+    backgroundColor = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "backgroundColor" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: InputAccessoryView, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.2.0", type: InputAccessoryView, isStandalone: true, selector: "input-accessory-view", inputs: { backgroundColor: { classPropertyName: "backgroundColor", publicName: "backgroundColor", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "backgroundColor": "backgroundColor()", "style.position": "\"absolute\"" } }, usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: InputAccessoryView, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input-accessory-view',
+                    host: {
+                        '[backgroundColor]': 'backgroundColor()',
+                        '[style.position]': '"absolute"',
+                    },
+                }]
+        }], propDecorators: { backgroundColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "backgroundColor", required: false }] }] } });
+//# sourceMappingURL=input-accessory-view.js.map

package/dist/input-accessory-view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-accessory-view.js","sourceRoot":"","sources":["../src/input-accessory-view.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;;AAE1C;;;;;;;GAOG;AAQH,MAAM,OAAO,kBAAmB,SAAQ,QAAQ;IAC9C,4BAA4B;IACnB,eAAe,GAAG,KAAK;mGAAU,CAAC;uGAFhC,kBAAkB;2FAAlB,kBAAkB;;2FAAlB,kBAAkB;kBAP9B,SAAS;mBAAC;oBACT,QAAQ,EAAE,sBAAsB;oBAChC,IAAI,EAAE;wBACJ,mBAAmB,EAAE,mBAAmB;wBACxC,kBAAkB,EAAE,YAAY;qBACjC;iBACF","sourcesContent":["import { Directive, input } from '@angular/core';\nimport { ViewBase } from './view-base.ts';\n\n/**\n * A bar docked above the keyboard, iOS only. Pair it with a text input by giving this view a\n * `nativeID` and the input the same `inputAccessoryViewID`.\n *\n * RN's wrapper positions the native host absolutely and wraps the content in a safe-area view\n * sized to the window; the first is done here, the second is the caller's choice of content.\n * On Android there is no native counterpart and the element commits as a plain view.\n */\n@Directive({\n  selector: 'input-accessory-view',\n  host: {\n    '[backgroundColor]': 'backgroundColor()',\n    '[style.position]': '\"absolute\"',\n  },\n})\nexport class InputAccessoryView extends ViewBase {\n  /** The bar's background. */\n  readonly backgroundColor = input<string>();\n}\n"]}

package/dist/keyboard-avoiding-view.d.ts

@@ -0,0 +1,79 @@
+import type { NativeSyntheticEvent } from '@ng-native/fabric';
+import type { Rect } from './events.ts';
+import { ViewBase } from './view-base.ts';
+import * as i0 from "@angular/core";
+export type KeyboardAvoidingBehavior = 'padding' | 'height' | 'position';
+/**
+ * Moves its content clear of the keyboard.
+ *
+ * RN's KeyboardAvoidingView is a JS composite: there is no native component, only a view whose
+ * padding, height or position tracks the keyboard. Off a device the `Keyboard` service reports
+ * nothing, so this renders as a plain view and does nothing, which is also the right behaviour on
+ * a platform with no soft keyboard.
+ *
+ * The overlap is the view's own frame against the keyboard's top edge, so a view that does not
+ * reach the bottom of the screen moves only as far as it must. Unlike RN, the frame's top is
+ * measured in the window, which is what the keyboard's `screenY` is in: `(layout)` reports it in
+ * the parent's coordinates, and on a screen under a navigation bar those start a bar's height
+ * down. RN leaves that to `keyboardVerticalOffset`, and a view that was not told came up short by
+ * exactly that much, its bottom edge still behind the keyboard. The overlap never exceeds the
+ * view's own height either: padding a view by more than it has pushes its content out of it.
+ * When the keyboard source reports no `screenY`, the keyboard's height stands in.
+ *
+ * The adjustment itself animates with the keyboard's own motion, the way RN's own
+ * KeyboardAvoidingView does: a keyboard event's `duration` and `easing` configure the next
+ * layout animation before the style change that moves this view, so the two run together rather
+ * than the padding, height or position jumping to its resting place in one step.
+ */
+export declare class KeyboardAvoidingView extends ViewBase {
+    /**
+     * How to make room: pad the bottom, shrink the height, or shift the content up. RN leaves this
+     * unset and does nothing; `padding` is the default here because that is what a form wants.
+     */
+    readonly behavior: import("@angular/core").InputSignal<KeyboardAvoidingBehavior>;
+    /** Styles for the inner view that `position` moves. */
+    readonly contentContainerStyle: import("@angular/core").InputSignal<Record<string, unknown> | undefined>;
+    /** Set to false to stop avoiding without removing the view. */
+    readonly enabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Extra room to leave above the keyboard, in points. RN's name, and in RN the place to put a
+     * header's height; here the view is measured in the window, so a navigation bar needs none.
+     */
+    readonly keyboardVerticalOffset: import("@angular/core").InputSignalWithTransform<number, unknown>;
+    private readonly keyboard;
+    private readonly layoutAnimation;
+    private readonly frame;
+    /** The height before any adjustment, which `height` mode shrinks from. */
+    private initialHeight;
+    /** How far the keyboard intrudes into this view, in points. */
+    protected readonly overlap: import("@angular/core").Signal<number>;
+    /**
+     * The adjustment, or nothing to adjust. Bound as the engine's style override rather than as
+     * host style, because Angular ranks a host style binding under the template's: a caller's
+     * `[style]="{flex: 1}"` would otherwise keep its flex in height mode and the view would not
+     * shrink at all. RN composes the adjustment after the caller's style, so it wins there too.
+     */
+    protected readonly avoidance: import("@angular/core").Signal<{
+        height: number;
+        flex: number;
+        paddingBottom?: undefined;
+    } | {
+        paddingBottom: number;
+        height?: undefined;
+        flex?: undefined;
+    } | undefined>;
+    protected readonly positioned: import("@angular/core").Signal<{
+        bottom: number;
+    }>;
+    constructor();
+    protected onLayout(event: NativeSyntheticEvent<{
+        layout?: Rect;
+    }>): void;
+    /**
+     * Where this view's top edge is in the window, or `fallback` where the platform cannot say.
+     * Synchronous on the new architecture, so it answers for the layout being reported.
+     */
+    private windowTop;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KeyboardAvoidingView, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KeyboardAvoidingView, "keyboard-avoiding-view", never, { "behavior": { "alias": "behavior"; "required": false; "isSignal": true; }; "contentContainerStyle": { "alias": "contentContainerStyle"; "required": false; "isSignal": true; }; "enabled": { "alias": "enabled"; "required": false; "isSignal": true; }; "keyboardVerticalOffset": { "alias": "keyboardVerticalOffset"; "required": false; "isSignal": true; }; }, {}, never, ["*", "*"], true, never>;
+}