@ng-native/components 0.0.1 → 0.1.1

package/dist/text.d.ts

@@ -0,0 +1,70 @@
+import { TouchableBase } from './pressable.ts';
+import * as i0 from "@angular/core";
+export type EllipsizeMode = 'head' | 'middle' | 'tail' | 'clip';
+export type DynamicTypeRamp = 'caption2' | 'caption1' | 'footnote' | 'subheadline' | 'callout' | 'body' | 'headline' | 'title3' | 'title2' | 'title1' | 'largeTitle';
+/**
+ * A run of text. Commits as `Paragraph`, or as a span (`VirtualText`) when nested in another
+ * `<text>`, which the engine decides from the tree so a nested run inherits its parent's font
+ * and sits on its baseline.
+ *
+ * Text inherits `color`, `fontSize` and the other text properties from CSS as it does on the
+ * web; from an inline `[style]` on an ancestor view it does not, exactly as in RN.
+ *
+ * Presses: RN makes a text pressable when a press handler is present. Angular cannot see
+ * whether `(press)` is bound, so set `pressable` to opt in; the handlers, delays and long press
+ * are then the same as `<pressable>`'s. iOS highlights a pressed run unless
+ * `suppressHighlighting` is set.
+ */
+export declare class Text extends TouchableBase {
+    /**
+     * `Text.js` splits by platform: on iOS every text is an accessibility element unless refused,
+     * on Android only one that can be pressed. Nothing native can infer which, so the host's
+     * `Platform.OS` decides, exactly as React Native's own wrapper does.
+     */
+    protected accessibleByDefault(): boolean;
+    /** Truncate after this many lines, with `ellipsizeMode` deciding where the ellipsis goes. */
+    readonly numberOfLines: import("@angular/core").InputSignalWithTransform<number | undefined, unknown>;
+    /**
+     * Where truncated text is cut. `clip` is iOS only. Defaults to `tail`, as React Native's `Text`
+     * does in JavaScript: native's own default is to clip, with no ellipsis. The default is the
+     * engine's, below `text-overflow` in a stylesheet, which in turn is below this input.
+     */
+    readonly ellipsizeMode: import("@angular/core").InputSignal<EllipsizeMode | undefined>;
+    /** Let the user select and copy the text. */
+    readonly selectable: import("@angular/core").InputSignalWithTransform<boolean | undefined, unknown>;
+    /** The highlight colour of a selection. */
+    readonly selectionColor: import("@angular/core").InputSignal<string | undefined>;
+    /** Scale with the system Text Size setting. Defaults to true. */
+    readonly allowFontScaling: import("@angular/core").InputSignalWithTransform<boolean | undefined, unknown>;
+    /** The most `allowFontScaling` may scale by; 0 means no limit. */
+    readonly maxFontSizeMultiplier: import("@angular/core").InputSignalWithTransform<number | undefined, unknown>;
+    /** iOS: the Dynamic Type style this text follows. */
+    readonly dynamicTypeRamp: import("@angular/core").InputSignal<DynamicTypeRamp | undefined>;
+    /** iOS: shrink the font to fit `numberOfLines`. */
+    readonly adjustsFontSizeToFit: import("@angular/core").InputSignalWithTransform<boolean | undefined, unknown>;
+    /** iOS: the smallest scale `adjustsFontSizeToFit` may shrink to, from 0.01 to 1. */
+    readonly minimumFontScale: import("@angular/core").InputSignalWithTransform<number | undefined, unknown>;
+    /** iOS: the line-breaking strategy. */
+    readonly lineBreakStrategyIOS: import("@angular/core").InputSignal<"none" | "standard" | "hangul-word" | "push-out" | undefined>;
+    /** Android: the line-breaking strategy. */
+    readonly textBreakStrategy: import("@angular/core").InputSignal<"simple" | "highQuality" | "balanced" | undefined>;
+    /** Android: turn phone numbers, links and addresses into tappable text. */
+    readonly dataDetectorType: import("@angular/core").InputSignal<"none" | "link" | "phoneNumber" | "email" | "all" | undefined>;
+    /** Android: how often to hyphenate. */
+    readonly hyphenationFrequency: import("@angular/core").InputSignal<"none" | "normal" | "full" | undefined>;
+    /** Respond to presses. See the class note. */
+    readonly pressable: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /** iOS: do not grey the text while it is pressed. */
+    readonly suppressHighlighting: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Written when the press starts and ends rather than bound from the host: a host binding would
+     * run for every text on screen on every pass, to follow a press that almost none of them get.
+     */
+    protected pressedChanged(pressed: boolean): void;
+    /** The pass-through props, written when one of them changes. See `ViewBase.ngOnChanges`. */
+    ngOnChanges(): void;
+    protected claims(): boolean;
+    protected measures(): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<Text, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<Text, "text", ["text"], { "numberOfLines": { "alias": "numberOfLines"; "required": false; "isSignal": true; }; "ellipsizeMode": { "alias": "ellipsizeMode"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "selectionColor": { "alias": "selectionColor"; "required": false; "isSignal": true; }; "allowFontScaling": { "alias": "allowFontScaling"; "required": false; "isSignal": true; }; "maxFontSizeMultiplier": { "alias": "maxFontSizeMultiplier"; "required": false; "isSignal": true; }; "dynamicTypeRamp": { "alias": "dynamicTypeRamp"; "required": false; "isSignal": true; }; "adjustsFontSizeToFit": { "alias": "adjustsFontSizeToFit"; "required": false; "isSignal": true; }; "minimumFontScale": { "alias": "minimumFontScale"; "required": false; "isSignal": true; }; "lineBreakStrategyIOS": { "alias": "lineBreakStrategyIOS"; "required": false; "isSignal": true; }; "textBreakStrategy": { "alias": "textBreakStrategy"; "required": false; "isSignal": true; }; "dataDetectorType": { "alias": "dataDetectorType"; "required": false; "isSignal": true; }; "hyphenationFrequency": { "alias": "android_hyphenationFrequency"; "required": false; "isSignal": true; }; "pressable": { "alias": "pressable"; "required": false; "isSignal": true; }; "suppressHighlighting": { "alias": "suppressHighlighting"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/dist/text.js

@@ -0,0 +1,111 @@
+import { Directive, booleanAttribute, input } from '@angular/core';
+import { nativePlatform } from '@ng-native/fabric';
+import { TouchableBase } from "./pressable.js";
+import { optionalBoolean, optionalNumber } from "./transforms.js";
+import * as i0 from "@angular/core";
+/**
+ * A run of text. Commits as `Paragraph`, or as a span (`VirtualText`) when nested in another
+ * `<text>`, which the engine decides from the tree so a nested run inherits its parent's font
+ * and sits on its baseline.
+ *
+ * Text inherits `color`, `fontSize` and the other text properties from CSS as it does on the
+ * web; from an inline `[style]` on an ancestor view it does not, exactly as in RN.
+ *
+ * Presses: RN makes a text pressable when a press handler is present. Angular cannot see
+ * whether `(press)` is bound, so set `pressable` to opt in; the handlers, delays and long press
+ * are then the same as `<pressable>`'s. iOS highlights a pressed run unless
+ * `suppressHighlighting` is set.
+ */
+export class Text extends TouchableBase {
+    /**
+     * `Text.js` splits by platform: on iOS every text is an accessibility element unless refused,
+     * on Android only one that can be pressed. Nothing native can infer which, so the host's
+     * `Platform.OS` decides, exactly as React Native's own wrapper does.
+     */
+    accessibleByDefault() {
+        return nativePlatform() === 'android' ? this.pressable() : true;
+    }
+    /** Truncate after this many lines, with `ellipsizeMode` deciding where the ellipsis goes. */
+    numberOfLines = input(undefined, { ...(ngDevMode ? { debugName: "numberOfLines" } : /* istanbul ignore next */ {}), transform: optionalNumber });
+    /**
+     * Where truncated text is cut. `clip` is iOS only. Defaults to `tail`, as React Native's `Text`
+     * does in JavaScript: native's own default is to clip, with no ellipsis. The default is the
+     * engine's, below `text-overflow` in a stylesheet, which in turn is below this input.
+     */
+    ellipsizeMode = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "ellipsizeMode" }] : /* istanbul ignore next */ []));
+    /** Let the user select and copy the text. */
+    selectable = input(undefined, { ...(ngDevMode ? { debugName: "selectable" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    /** The highlight colour of a selection. */
+    selectionColor = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "selectionColor" }] : /* istanbul ignore next */ []));
+    /** Scale with the system Text Size setting. Defaults to true. */
+    allowFontScaling = input(undefined, { ...(ngDevMode ? { debugName: "allowFontScaling" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    /** The most `allowFontScaling` may scale by; 0 means no limit. */
+    maxFontSizeMultiplier = input(undefined, { ...(ngDevMode ? { debugName: "maxFontSizeMultiplier" } : /* istanbul ignore next */ {}), transform: optionalNumber });
+    /** iOS: the Dynamic Type style this text follows. */
+    dynamicTypeRamp = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "dynamicTypeRamp" }] : /* istanbul ignore next */ []));
+    /** iOS: shrink the font to fit `numberOfLines`. */
+    adjustsFontSizeToFit = input(undefined, { ...(ngDevMode ? { debugName: "adjustsFontSizeToFit" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    /** iOS: the smallest scale `adjustsFontSizeToFit` may shrink to, from 0.01 to 1. */
+    minimumFontScale = input(undefined, { ...(ngDevMode ? { debugName: "minimumFontScale" } : /* istanbul ignore next */ {}), transform: optionalNumber });
+    /** iOS: the line-breaking strategy. */
+    lineBreakStrategyIOS = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "lineBreakStrategyIOS" }] : /* istanbul ignore next */ []));
+    /** Android: the line-breaking strategy. */
+    textBreakStrategy = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "textBreakStrategy" }] : /* istanbul ignore next */ []));
+    /** Android: turn phone numbers, links and addresses into tappable text. */
+    dataDetectorType = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "dataDetectorType" }] : /* istanbul ignore next */ []));
+    /** Android: how often to hyphenate. */
+    hyphenationFrequency = input(undefined, { ...(ngDevMode ? { debugName: "hyphenationFrequency" } : /* istanbul ignore next */ {}), alias: 'android_hyphenationFrequency' });
+    /** Respond to presses. See the class note. */
+    pressable = input(false, { ...(ngDevMode ? { debugName: "pressable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** iOS: do not grey the text while it is pressed. */
+    suppressHighlighting = input(false, { ...(ngDevMode ? { debugName: "suppressHighlighting" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Written when the press starts and ends rather than bound from the host: a host binding would
+     * run for every text on screen on every pass, to follow a press that almost none of them get.
+     */
+    pressedChanged(pressed) {
+        const highlight = pressed && !this.suppressHighlighting();
+        this.engine.setProp(this.node, 'isHighlighted', highlight ? true : undefined);
+    }
+    /** The pass-through props, written when one of them changes. See `ViewBase.ngOnChanges`. */
+    ngOnChanges() {
+        super.ngOnChanges();
+        const write = (key, value) => this.engine.setProp(this.node, key, value);
+        write('numberOfLines', this.numberOfLines());
+        write('ellipsizeMode', this.ellipsizeMode());
+        write('selectable', this.selectable());
+        write('selectionColor', this.selectionColor());
+        write('allowFontScaling', this.allowFontScaling());
+        write('maxFontSizeMultiplier', this.maxFontSizeMultiplier());
+        write('dynamicTypeRamp', this.dynamicTypeRamp());
+        write('adjustsFontSizeToFit', this.adjustsFontSizeToFit());
+        write('minimumFontScale', this.minimumFontScale());
+        write('lineBreakStrategyIOS', this.lineBreakStrategyIOS());
+        write('textBreakStrategy', this.textBreakStrategy());
+        write('dataDetectorType', this.dataDetectorType());
+        write('android_hyphenationFrequency', this.hyphenationFrequency());
+        write('isPressable', this.pressable() || undefined);
+    }
+    claims() {
+        return this.pressable() && !this.disabled();
+    }
+    measures() {
+        return this.pressable();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: Text, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.2.0", type: Text, isStandalone: true, selector: "text", inputs: { numberOfLines: { classPropertyName: "numberOfLines", publicName: "numberOfLines", isSignal: true, isRequired: false, transformFunction: null }, ellipsizeMode: { classPropertyName: "ellipsizeMode", publicName: "ellipsizeMode", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, selectionColor: { classPropertyName: "selectionColor", publicName: "selectionColor", isSignal: true, isRequired: false, transformFunction: null }, allowFontScaling: { classPropertyName: "allowFontScaling", publicName: "allowFontScaling", isSignal: true, isRequired: false, transformFunction: null }, maxFontSizeMultiplier: { classPropertyName: "maxFontSizeMultiplier", publicName: "maxFontSizeMultiplier", isSignal: true, isRequired: false, transformFunction: null }, dynamicTypeRamp: { classPropertyName: "dynamicTypeRamp", publicName: "dynamicTypeRamp", isSignal: true, isRequired: false, transformFunction: null }, adjustsFontSizeToFit: { classPropertyName: "adjustsFontSizeToFit", publicName: "adjustsFontSizeToFit", isSignal: true, isRequired: false, transformFunction: null }, minimumFontScale: { classPropertyName: "minimumFontScale", publicName: "minimumFontScale", isSignal: true, isRequired: false, transformFunction: null }, lineBreakStrategyIOS: { classPropertyName: "lineBreakStrategyIOS", publicName: "lineBreakStrategyIOS", isSignal: true, isRequired: false, transformFunction: null }, textBreakStrategy: { classPropertyName: "textBreakStrategy", publicName: "textBreakStrategy", isSignal: true, isRequired: false, transformFunction: null }, dataDetectorType: { classPropertyName: "dataDetectorType", publicName: "dataDetectorType", isSignal: true, isRequired: false, transformFunction: null }, hyphenationFrequency: { classPropertyName: "hyphenationFrequency", publicName: "android_hyphenationFrequency", isSignal: true, isRequired: false, transformFunction: null }, pressable: { classPropertyName: "pressable", publicName: "pressable", isSignal: true, isRequired: false, transformFunction: null }, suppressHighlighting: { classPropertyName: "suppressHighlighting", publicName: "suppressHighlighting", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["text"], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: Text, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'text',
+                    exportAs: 'text',
+                }]
+        }], propDecorators: { numberOfLines: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberOfLines", required: false }] }], ellipsizeMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "ellipsizeMode", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], selectionColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionColor", required: false }] }], allowFontScaling: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowFontScaling", required: false }] }], maxFontSizeMultiplier: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFontSizeMultiplier", required: false }] }], dynamicTypeRamp: [{ type: i0.Input, args: [{ isSignal: true, alias: "dynamicTypeRamp", required: false }] }], adjustsFontSizeToFit: [{ type: i0.Input, args: [{ isSignal: true, alias: "adjustsFontSizeToFit", required: false }] }], minimumFontScale: [{ type: i0.Input, args: [{ isSignal: true, alias: "minimumFontScale", required: false }] }], lineBreakStrategyIOS: [{ type: i0.Input, args: [{ isSignal: true, alias: "lineBreakStrategyIOS", required: false }] }], textBreakStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "textBreakStrategy", required: false }] }], dataDetectorType: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataDetectorType", required: false }] }], hyphenationFrequency: [{ type: i0.Input, args: [{ isSignal: true, alias: "android_hyphenationFrequency", required: false }] }], pressable: [{ type: i0.Input, args: [{ isSignal: true, alias: "pressable", required: false }] }], suppressHighlighting: [{ type: i0.Input, args: [{ isSignal: true, alias: "suppressHighlighting", required: false }] }] } });
+//# sourceMappingURL=text.js.map

package/dist/text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.js","sourceRoot":"","sources":["../src/text.ts"],"names":[],"mappings":"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","sourcesContent":["import { Directive, booleanAttribute, input } from '@angular/core';\nimport { nativePlatform } from '@ng-native/fabric';\nimport { TouchableBase } from './pressable.ts';\nimport { optionalBoolean, optionalNumber } from './transforms.ts';\n\nexport type EllipsizeMode = 'head' | 'middle' | 'tail' | 'clip';\nexport type DynamicTypeRamp =\n  | 'caption2'\n  | 'caption1'\n  | 'footnote'\n  | 'subheadline'\n  | 'callout'\n  | 'body'\n  | 'headline'\n  | 'title3'\n  | 'title2'\n  | 'title1'\n  | 'largeTitle';\n\n/**\n * A run of text. Commits as `Paragraph`, or as a span (`VirtualText`) when nested in another\n * `<text>`, which the engine decides from the tree so a nested run inherits its parent's font\n * and sits on its baseline.\n *\n * Text inherits `color`, `fontSize` and the other text properties from CSS as it does on the\n * web; from an inline `[style]` on an ancestor view it does not, exactly as in RN.\n *\n * Presses: RN makes a text pressable when a press handler is present. Angular cannot see\n * whether `(press)` is bound, so set `pressable` to opt in; the handlers, delays and long press\n * are then the same as `<pressable>`'s. iOS highlights a pressed run unless\n * `suppressHighlighting` is set.\n */\n@Directive({\n  selector: 'text',\n  exportAs: 'text',\n})\nexport class Text extends TouchableBase {\n  /**\n   * `Text.js` splits by platform: on iOS every text is an accessibility element unless refused,\n   * on Android only one that can be pressed. Nothing native can infer which, so the host's\n   * `Platform.OS` decides, exactly as React Native's own wrapper does.\n   */\n  protected override accessibleByDefault(): boolean {\n    return nativePlatform() === 'android' ? this.pressable() : true;\n  }\n\n  /** Truncate after this many lines, with `ellipsizeMode` deciding where the ellipsis goes. */\n  readonly numberOfLines = input<number>(undefined, { transform: optionalNumber });\n  /**\n   * Where truncated text is cut. `clip` is iOS only. Defaults to `tail`, as React Native's `Text`\n   * does in JavaScript: native's own default is to clip, with no ellipsis. The default is the\n   * engine's, below `text-overflow` in a stylesheet, which in turn is below this input.\n   */\n  readonly ellipsizeMode = input<EllipsizeMode>();\n  /** Let the user select and copy the text. */\n  readonly selectable = input<boolean>(undefined, { transform: optionalBoolean });\n  /** The highlight colour of a selection. */\n  readonly selectionColor = input<string>();\n  /** Scale with the system Text Size setting. Defaults to true. */\n  readonly allowFontScaling = input<boolean>(undefined, { transform: optionalBoolean });\n  /** The most `allowFontScaling` may scale by; 0 means no limit. */\n  readonly maxFontSizeMultiplier = input<number>(undefined, { transform: optionalNumber });\n  /** iOS: the Dynamic Type style this text follows. */\n  readonly dynamicTypeRamp = input<DynamicTypeRamp>();\n  /** iOS: shrink the font to fit `numberOfLines`. */\n  readonly adjustsFontSizeToFit = input<boolean>(undefined, { transform: optionalBoolean });\n  /** iOS: the smallest scale `adjustsFontSizeToFit` may shrink to, from 0.01 to 1. */\n  readonly minimumFontScale = input<number>(undefined, { transform: optionalNumber });\n  /** iOS: the line-breaking strategy. */\n  readonly lineBreakStrategyIOS = input<'none' | 'standard' | 'hangul-word' | 'push-out'>();\n  /** Android: the line-breaking strategy. */\n  readonly textBreakStrategy = input<'simple' | 'highQuality' | 'balanced'>();\n  /** Android: turn phone numbers, links and addresses into tappable text. */\n  readonly dataDetectorType = input<'phoneNumber' | 'link' | 'email' | 'none' | 'all'>();\n  /** Android: how often to hyphenate. */\n  readonly hyphenationFrequency = input<'normal' | 'none' | 'full'>(undefined, {\n    alias: 'android_hyphenationFrequency',\n  });\n  /** Respond to presses. See the class note. */\n  readonly pressable = input(false, { transform: booleanAttribute });\n  /** iOS: do not grey the text while it is pressed. */\n  readonly suppressHighlighting = input(false, { transform: booleanAttribute });\n\n  /**\n   * Written when the press starts and ends rather than bound from the host: a host binding would\n   * run for every text on screen on every pass, to follow a press that almost none of them get.\n   */\n  protected override pressedChanged(pressed: boolean): void {\n    const highlight = pressed && !this.suppressHighlighting();\n    this.engine.setProp(this.node, 'isHighlighted', highlight ? true : undefined);\n  }\n\n  /** The pass-through props, written when one of them changes. See `ViewBase.ngOnChanges`. */\n  override ngOnChanges(): void {\n    super.ngOnChanges();\n    const write = (key: string, value: unknown) => this.engine.setProp(this.node, key, value);\n    write('numberOfLines', this.numberOfLines());\n    write('ellipsizeMode', this.ellipsizeMode());\n    write('selectable', this.selectable());\n    write('selectionColor', this.selectionColor());\n    write('allowFontScaling', this.allowFontScaling());\n    write('maxFontSizeMultiplier', this.maxFontSizeMultiplier());\n    write('dynamicTypeRamp', this.dynamicTypeRamp());\n    write('adjustsFontSizeToFit', this.adjustsFontSizeToFit());\n    write('minimumFontScale', this.minimumFontScale());\n    write('lineBreakStrategyIOS', this.lineBreakStrategyIOS());\n    write('textBreakStrategy', this.textBreakStrategy());\n    write('dataDetectorType', this.dataDetectorType());\n    write('android_hyphenationFrequency', this.hyphenationFrequency());\n    write('isPressable', this.pressable() || undefined);\n  }\n\n  protected override claims(): boolean {\n    return this.pressable() && !this.disabled();\n  }\n\n  protected override measures(): boolean {\n    return this.pressable();\n  }\n}\n"]}

package/dist/touchable-opacity.d.ts

@@ -0,0 +1,36 @@
+import { ControlBase } from './pressable.ts';
+import * as i0 from "@angular/core";
+/**
+ * A pressable that dims while pressed, as RN's `TouchableOpacity` does.
+ *
+ * The fade is a CSS transition rather than a JavaScript tween: the component sets the target
+ * opacity and the engine eases to it. React Native's own timings are asymmetric - 150ms in,
+ * 250ms out - which is a thing CSS expresses exactly, because the duration in force is the one on
+ * the state being entered. That is what the two rules below are.
+ *
+ * The opacity is a binding rather than a rule because `activeOpacity` is an input, and it returns
+ * to `undefined` when the fade finishes so a caller's own `[style]` opacity is in charge again at
+ * rest. `transitionend` is the engine's own event, the same one Angular's `animate.leave` waits
+ * for.
+ */
+export declare class TouchableOpacity extends ControlBase {
+    /** `TouchableOpacity.js`: `accessible={this.props.accessible !== false}`, and focusable too. */
+    protected accessibleByDefault(): boolean;
+    protected focusableByDefault(): boolean;
+    protected disabledForAccessibility(): boolean;
+    /** The opacity while pressed. */
+    readonly activeOpacity: import("@angular/core").InputSignalWithTransform<number, unknown>;
+    /** Undefined at rest, so the caller's own `[style]` opacity shows through. */
+    protected readonly opacity: import("@angular/core").WritableSignal<number | undefined>;
+    /** What to ease back to: whatever the caller had before the press. */
+    private resting;
+    constructor();
+    /**
+     * The fade is over. Letting go of the value hands the opacity back to whatever the caller's own
+     * style says, which is the same number we just eased to - so nothing moves, and a caller who
+     * changes it later is not fighting a binding of ours.
+     */
+    protected settle(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TouchableOpacity, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TouchableOpacity, "touchable-opacity", ["touchableOpacity"], { "activeOpacity": { "alias": "activeOpacity"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}

package/dist/touchable-opacity.js

@@ -0,0 +1,76 @@
+import { Component, DestroyRef, effect, inject, input, numberAttribute, signal, untracked, } from '@angular/core';
+import { ControlBase } from "./pressable.js";
+import * as i0 from "@angular/core";
+/**
+ * A pressable that dims while pressed, as RN's `TouchableOpacity` does.
+ *
+ * The fade is a CSS transition rather than a JavaScript tween: the component sets the target
+ * opacity and the engine eases to it. React Native's own timings are asymmetric - 150ms in,
+ * 250ms out - which is a thing CSS expresses exactly, because the duration in force is the one on
+ * the state being entered. That is what the two rules below are.
+ *
+ * The opacity is a binding rather than a rule because `activeOpacity` is an input, and it returns
+ * to `undefined` when the fade finishes so a caller's own `[style]` opacity is in charge again at
+ * rest. `transitionend` is the engine's own event, the same one Angular's `animate.leave` waits
+ * for.
+ */
+export class TouchableOpacity extends ControlBase {
+    /** `TouchableOpacity.js`: `accessible={this.props.accessible !== false}`, and focusable too. */
+    accessibleByDefault() {
+        return true;
+    }
+    focusableByDefault() {
+        return true;
+    }
+    disabledForAccessibility() {
+        return this.disabled();
+    }
+    /** The opacity while pressed. */
+    activeOpacity = input(0.2, { ...(ngDevMode ? { debugName: "activeOpacity" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /** Undefined at rest, so the caller's own `[style]` opacity shows through. */
+    opacity = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "opacity" }] : /* istanbul ignore next */ []));
+    /** What to ease back to: whatever the caller had before the press. */
+    resting = 1;
+    constructor() {
+        super();
+        // Reacts to `pressed` alone. Reading `opacity` here would re-run the effect on the value it
+        // just wrote, and a press that arrives mid-fade would restart from the wrong end.
+        effect(() => {
+            const pressed = this.pressed();
+            untracked(() => {
+                if (pressed) {
+                    // Remembered on the way in, so the fade out returns to it rather than to 1.
+                    const style = this.node.props['style'];
+                    this.resting = this.opacity() ?? style?.opacity ?? 1;
+                    this.opacity.set(this.activeOpacity());
+                }
+                else if (this.opacity() !== undefined) {
+                    this.opacity.set(this.resting);
+                }
+            });
+        });
+        // A component destroyed mid-fade leaves a transition the engine would go on advancing.
+        inject(DestroyRef).onDestroy(() => this.opacity.set(undefined));
+    }
+    /**
+     * The fade is over. Letting go of the value hands the opacity back to whatever the caller's own
+     * style says, which is the same number we just eased to - so nothing moves, and a caller who
+     * changes it later is not fighting a binding of ours.
+     */
+    settle() {
+        if (!this.pressed())
+            this.opacity.set(undefined);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: TouchableOpacity, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.0", type: TouchableOpacity, isStandalone: true, selector: "touchable-opacity", inputs: { activeOpacity: { classPropertyName: "activeOpacity", publicName: "activeOpacity", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "transitionend": "settle()" }, properties: { "style.opacity": "opacity()", "class.pressed": "pressed()" } }, exportAs: ["touchableOpacity"], usesInheritance: true, ngImport: i0, template: `<ng-content />`, isInline: true, styles: ["\n    /*\n     * The resting opacity is stated rather than left out, because a transition needs a value to\n     * ease *from*: a property appearing for the first time is recorded and left alone, which is\n     * CSS's own rule and would make every fade in a snap. Inline style still wins over this, so a\n     * caller's own opacity is untouched.\n     */\n    :host {\n      opacity: 1;\n      transition: opacity 250ms ease-in-out;\n    }\n    :host(.pressed) {\n      transition: opacity 150ms ease-in-out;\n    }\n  "] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: TouchableOpacity, decorators: [{
+            type: Component,
+            args: [{ selector: 'touchable-opacity', template: `<ng-content />`, exportAs: 'touchableOpacity', host: {
+                        '[style.opacity]': 'opacity()',
+                        '[class.pressed]': 'pressed()',
+                        '(transitionend)': 'settle()',
+                    }, styles: ["\n    /*\n     * The resting opacity is stated rather than left out, because a transition needs a value to\n     * ease *from*: a property appearing for the first time is recorded and left alone, which is\n     * CSS's own rule and would make every fade in a snap. Inline style still wins over this, so a\n     * caller's own opacity is untouched.\n     */\n    :host {\n      opacity: 1;\n      transition: opacity 250ms ease-in-out;\n    }\n    :host(.pressed) {\n      transition: opacity 150ms ease-in-out;\n    }\n  "] }]
+        }], ctorParameters: () => [], propDecorators: { activeOpacity: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeOpacity", required: false }] }] } });
+//# sourceMappingURL=touchable-opacity.js.map

package/dist/touchable-opacity.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"touchable-opacity.js","sourceRoot":"","sources":["../src/touchable-opacity.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,UAAU,EACV,MAAM,EACN,MAAM,EACN,KAAK,EACL,eAAe,EACf,MAAM,EACN,SAAS,GACV,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;;AAE7C;;;;;;;;;;;;GAYG;AA0BH,MAAM,OAAO,gBAAiB,SAAQ,WAAW;IAC/C,gGAAgG;IAC7E,mBAAmB;QACpC,OAAO,IAAI,CAAC;IACd,CAAC;IAEkB,kBAAkB;QACnC,OAAO,IAAI,CAAC;IACd,CAAC;IAEkB,wBAAwB;QACzC,OAAO,IAAI,CAAC,QAAQ,EAAE,CAAC;IACzB,CAAC;IAED,iCAAiC;IACxB,aAAa,GAAG,KAAK,CAAC,GAAG,qFAAI,SAAS,EAAE,eAAe,GAAG,CAAC;IAEpE,8EAA8E;IAC3D,OAAO,GAAG,MAAM,CAAqB,SAAS;gFAAC,CAAC;IAEnE,sEAAsE;IAC9D,OAAO,GAAG,CAAC,CAAC;IAEpB;QACE,KAAK,EAAE,CAAC;QACR,4FAA4F;QAC5F,kFAAkF;QAClF,MAAM,CAAC,GAAG,EAAE;YACV,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;YAC/B,SAAS,CAAC,GAAG,EAAE;gBACb,IAAI,OAAO,EAAE,CAAC;oBACZ,4EAA4E;oBAC5E,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAqC,CAAC;oBAC3E,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,EAAE,IAAI,KAAK,EAAE,OAAO,IAAI,CAAC,CAAC;oBACrD,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC;gBACzC,CAAC;qBAAM,IAAI,IAAI,CAAC,OAAO,EAAE,KAAK,SAAS,EAAE,CAAC;oBACxC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;gBACjC,CAAC;YACH,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;QACH,uFAAuF;QACvF,MAAM,CAAC,UAAU,CAAC,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC;IAClE,CAAC;IAED;;;;OAIG;IACO,MAAM;QACd,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;YAAE,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;IACnD,CAAC;uGAnDU,gBAAgB;2FAAhB,gBAAgB,kaAvBjB,gBAAgB;;2FAuBf,gBAAgB;kBAzB5B,SAAS;+BACE,mBAAmB,YACnB,gBAAgB,YAChB,kBAAkB,QAgBtB;wBACJ,iBAAiB,EAAE,WAAW;wBAC9B,iBAAiB,EAAE,WAAW;wBAC9B,iBAAiB,EAAE,UAAU;qBAC9B","sourcesContent":["import {\n  Component,\n  DestroyRef,\n  effect,\n  inject,\n  input,\n  numberAttribute,\n  signal,\n  untracked,\n} from '@angular/core';\nimport { ControlBase } from './pressable.ts';\n\n/**\n * A pressable that dims while pressed, as RN's `TouchableOpacity` does.\n *\n * The fade is a CSS transition rather than a JavaScript tween: the component sets the target\n * opacity and the engine eases to it. React Native's own timings are asymmetric - 150ms in,\n * 250ms out - which is a thing CSS expresses exactly, because the duration in force is the one on\n * the state being entered. That is what the two rules below are.\n *\n * The opacity is a binding rather than a rule because `activeOpacity` is an input, and it returns\n * to `undefined` when the fade finishes so a caller's own `[style]` opacity is in charge again at\n * rest. `transitionend` is the engine's own event, the same one Angular's `animate.leave` waits\n * for.\n */\n@Component({\n  selector: 'touchable-opacity',\n  template: `<ng-content />`,\n  exportAs: 'touchableOpacity',\n  styles: `\n    /*\n     * The resting opacity is stated rather than left out, because a transition needs a value to\n     * ease *from*: a property appearing for the first time is recorded and left alone, which is\n     * CSS's own rule and would make every fade in a snap. Inline style still wins over this, so a\n     * caller's own opacity is untouched.\n     */\n    :host {\n      opacity: 1;\n      transition: opacity 250ms ease-in-out;\n    }\n    :host(.pressed) {\n      transition: opacity 150ms ease-in-out;\n    }\n  `,\n  host: {\n    '[style.opacity]': 'opacity()',\n    '[class.pressed]': 'pressed()',\n    '(transitionend)': 'settle()',\n  },\n})\nexport class TouchableOpacity extends ControlBase {\n  /** `TouchableOpacity.js`: `accessible={this.props.accessible !== false}`, and focusable too. */\n  protected override accessibleByDefault(): boolean {\n    return true;\n  }\n\n  protected override focusableByDefault(): boolean {\n    return true;\n  }\n\n  protected override disabledForAccessibility(): boolean {\n    return this.disabled();\n  }\n\n  /** The opacity while pressed. */\n  readonly activeOpacity = input(0.2, { transform: numberAttribute });\n\n  /** Undefined at rest, so the caller's own `[style]` opacity shows through. */\n  protected readonly opacity = signal<number | undefined>(undefined);\n\n  /** What to ease back to: whatever the caller had before the press. */\n  private resting = 1;\n\n  constructor() {\n    super();\n    // Reacts to `pressed` alone. Reading `opacity` here would re-run the effect on the value it\n    // just wrote, and a press that arrives mid-fade would restart from the wrong end.\n    effect(() => {\n      const pressed = this.pressed();\n      untracked(() => {\n        if (pressed) {\n          // Remembered on the way in, so the fade out returns to it rather than to 1.\n          const style = this.node.props['style'] as { opacity?: number } | undefined;\n          this.resting = this.opacity() ?? style?.opacity ?? 1;\n          this.opacity.set(this.activeOpacity());\n        } else if (this.opacity() !== undefined) {\n          this.opacity.set(this.resting);\n        }\n      });\n    });\n    // A component destroyed mid-fade leaves a transition the engine would go on advancing.\n    inject(DestroyRef).onDestroy(() => this.opacity.set(undefined));\n  }\n\n  /**\n   * The fade is over. Letting go of the value hands the opacity back to whatever the caller's own\n   * style says, which is the same number we just eased to - so nothing moves, and a caller who\n   * changes it later is not fighting a binding of ours.\n   */\n  protected settle(): void {\n    if (!this.pressed()) this.opacity.set(undefined);\n  }\n}\n"]}

package/dist/transforms.d.ts

@@ -0,0 +1,2 @@
+export declare function optionalBoolean(value: unknown): boolean | undefined;
+export declare function optionalNumber(value: unknown): number | undefined;

package/dist/transforms.js

@@ -0,0 +1,17 @@
+/**
+ * Input transforms for props that native reads as "set" or "not set".
+ *
+ * Angular's own `booleanAttribute` turns an absent input into `false`, which is right for a DOM
+ * attribute and wrong for a native prop: `accessible` unset means "the platform decides", and
+ * sending `false` for every boolean a view never mentioned would put a dozen props on every
+ * node. These keep `undefined` as undefined and otherwise behave as Angular's do, so `<view
+ * collapsable="false">` and `<view [collapsable]="false">` both mean false.
+ */
+import { booleanAttribute, numberAttribute } from '@angular/core';
+export function optionalBoolean(value) {
+    return value === undefined ? undefined : booleanAttribute(value);
+}
+export function optionalNumber(value) {
+    return value === undefined ? undefined : numberAttribute(value);
+}
+//# sourceMappingURL=transforms.js.map

package/dist/transforms.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"transforms.js","sourceRoot":"","sources":["../src/transforms.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAElE,MAAM,UAAU,eAAe,CAAC,KAAc;IAC5C,OAAO,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;AACnE,CAAC;AAED,MAAM,UAAU,cAAc,CAAC,KAAc;IAC3C,OAAO,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;AAClE,CAAC","sourcesContent":["/**\n * Input transforms for props that native reads as \"set\" or \"not set\".\n *\n * Angular's own `booleanAttribute` turns an absent input into `false`, which is right for a DOM\n * attribute and wrong for a native prop: `accessible` unset means \"the platform decides\", and\n * sending `false` for every boolean a view never mentioned would put a dozen props on every\n * node. These keep `undefined` as undefined and otherwise behave as Angular's do, so `<view\n * collapsable=\"false\">` and `<view [collapsable]=\"false\">` both mean false.\n */\nimport { booleanAttribute, numberAttribute } from '@angular/core';\n\nexport function optionalBoolean(value: unknown): boolean | undefined {\n  return value === undefined ? undefined : booleanAttribute(value);\n}\n\nexport function optionalNumber(value: unknown): number | undefined {\n  return value === undefined ? undefined : numberAttribute(value);\n}\n"]}