@ng-native/components 0.4.0 → 0.5.0

package/dist/gradient-text.d.ts

@@ -0,0 +1,57 @@
+/**
+ * Text filled with a gradient, or with any background: the background is drawn through the shapes
+ * of the letters.
+ *
+ * ```html
+ * <gradient-text class="brand">Week</gradient-text>
+ * ```
+ *
+ * ```css
+ * .brand {
+ *   background-image: linear-gradient(to bottom, #437dfc, #4ad0ef);
+ *   background-clip: text;
+ *   color: transparent;
+ *   font-size: 34px;
+ *   font-weight: 700;
+ * }
+ * ```
+ *
+ * The rule is the one a web page writes. `background-clip: text` is what this element does, so a
+ * rule that has it applies to `<gradient-text>` and to nothing else: on a `<text>` it would leave
+ * transparent letters on a block of colour. The `color` is not used, since the letters are the
+ * mask and are drawn in full.
+ *
+ * It is text like any other: it wraps, follows the device's text size, takes `<text>` spans
+ * inside it with their own weight or style, and is sized by its letters. What a span cannot have
+ * here is a colour of its own, because the fill is the one background behind all of it.
+ *
+ * The app must have `@react-native-masked-view/masked-view` installed, which is where the native
+ * view comes from (`npx expo install @react-native-masked-view/masked-view`); none of its
+ * JavaScript is imported. The view masks what is inside it by its first child, so the letters are
+ * that child and the background is painted on a view behind them.
+ */
+import { type AfterContentChecked, type AfterViewInit } from '@angular/core';
+import { ViewBase } from './view-base.ts';
+import * as i0 from "@angular/core";
+export declare class GradientText extends ViewBase implements AfterViewInit, AfterContentChecked {
+    private readonly fill;
+    private readonly letters;
+    /** The label last written from the letters, to write it again only when they change. */
+    private spoken;
+    constructor();
+    ngAfterViewInit(): void;
+    ngAfterContentChecked(): void;
+    /**
+     * Say the letters. iOS takes the mask out of the view hierarchy, so there is no text under the
+     * element for VoiceOver to read, and an element with nothing to say is not found at all. A
+     * label the app gave is left as it is.
+     */
+    private labelFromLetters;
+    /**
+     * The host's background is the fill's to paint: the view masks its children and not itself.
+     * Before the first commit, so the background is never drawn unmasked.
+     */
+    private paintOnFill;
+    static ɵfac: i0.ɵɵFactoryDeclaration<GradientText, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<GradientText, "gradient-text", never, {}, {}, never, ["*"], true, never>;
+}

package/dist/gradient-text.js

@@ -0,0 +1,105 @@
+/**
+ * Text filled with a gradient, or with any background: the background is drawn through the shapes
+ * of the letters.
+ *
+ * ```html
+ * <gradient-text class="brand">Week</gradient-text>
+ * ```
+ *
+ * ```css
+ * .brand {
+ *   background-image: linear-gradient(to bottom, #437dfc, #4ad0ef);
+ *   background-clip: text;
+ *   color: transparent;
+ *   font-size: 34px;
+ *   font-weight: 700;
+ * }
+ * ```
+ *
+ * The rule is the one a web page writes. `background-clip: text` is what this element does, so a
+ * rule that has it applies to `<gradient-text>` and to nothing else: on a `<text>` it would leave
+ * transparent letters on a block of colour. The `color` is not used, since the letters are the
+ * mask and are drawn in full.
+ *
+ * It is text like any other: it wraps, follows the device's text size, takes `<text>` spans
+ * inside it with their own weight or style, and is sized by its letters. What a span cannot have
+ * here is a colour of its own, because the fill is the one background behind all of it.
+ *
+ * The app must have `@react-native-masked-view/masked-view` installed, which is where the native
+ * view comes from (`npx expo install @react-native-masked-view/masked-view`); none of its
+ * JavaScript is imported. The view masks what is inside it by its first child, so the letters are
+ * that child and the background is painted on a view behind them.
+ */
+import { Component, ElementRef, viewChild, } from '@angular/core';
+import { registerViewName } from '@ng-native/fabric';
+import { Text } from "./text.js";
+import { View } from "./view.js";
+import { ViewBase } from "./view-base.js";
+import * as i0 from "@angular/core";
+/** The characters under a node, in order. */
+const textOf = (node) => node.kind === 'text' ? node.text : node.children.map(textOf).join('');
+let registered = false;
+/** Teach the engine the element, once, before its first commit. */
+function registerGradientText() {
+    if (registered)
+        return;
+    registered = true;
+    registerViewName('gradient-text', 'RNCMaskedView');
+}
+export class GradientText extends ViewBase {
+    fill = viewChild.required('fill', { ...(ngDevMode ? { debugName: "fill" } : /* istanbul ignore next */ {}), read: ElementRef });
+    letters = viewChild('letters', { ...(ngDevMode ? { debugName: "letters" } : /* istanbul ignore next */ {}), read: ElementRef });
+    /** The label last written from the letters, to write it again only when they change. */
+    spoken;
+    constructor() {
+        super();
+        registerGradientText();
+        // One element to a screen reader, as a text is. An input of the same name is written after.
+        this.engine.setProp(this.node, 'accessible', true);
+        this.engine.setProp(this.node, 'accessibilityRole', 'text');
+    }
+    ngAfterViewInit() {
+        this.paintOnFill();
+        this.labelFromLetters();
+    }
+    ngAfterContentChecked() {
+        this.labelFromLetters();
+    }
+    /**
+     * Say the letters. iOS takes the mask out of the view hierarchy, so there is no text under the
+     * element for VoiceOver to read, and an element with nothing to say is not found at all. A
+     * label the app gave is left as it is.
+     */
+    labelFromLetters() {
+        const letters = this.letters()?.nativeElement;
+        const given = this.accessibilityLabel() ?? this.ariaLabel();
+        if (!letters || given !== undefined)
+            return;
+        const label = textOf(letters).replace(/\s+/g, ' ').trim();
+        if (label === this.spoken)
+            return;
+        this.spoken = label;
+        this.engine.setProp(this.node, 'accessibilityLabel', label || null);
+    }
+    /**
+     * The host's background is the fill's to paint: the view masks its children and not itself.
+     * Before the first commit, so the background is never drawn unmasked.
+     */
+    paintOnFill() {
+        const engine = this.engine;
+        engine.paintOn?.(this.node, this.fill().nativeElement);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: GradientText, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.2.0", type: GradientText, isStandalone: true, selector: "gradient-text", viewQueries: [{ propertyName: "fill", first: true, predicate: ["fill"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "letters", first: true, predicate: ["letters"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    <text #letters class="letters"><ng-content /></text>
+    <view #fill class="fill" pointerEvents="none"></view>
+  `, isInline: true, styles: ["\n    .letters {\n      color: black;\n    }\n    .fill {\n      position: absolute;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n    }\n  "], dependencies: [{ kind: "directive", type: Text, selector: "text", inputs: ["numberOfLines", "ellipsizeMode", "selectable", "selectionColor", "allowFontScaling", "maxFontSizeMultiplier", "dynamicTypeRamp", "adjustsFontSizeToFit", "minimumFontScale", "lineBreakStrategyIOS", "textBreakStrategy", "dataDetectorType", "android_hyphenationFrequency", "pressable", "suppressHighlighting"], exportAs: ["text"] }, { kind: "directive", type: View, selector: "view" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: GradientText, decorators: [{
+            type: Component,
+            args: [{ selector: 'gradient-text', imports: [Text, View], template: `
+    <text #letters class="letters"><ng-content /></text>
+    <view #fill class="fill" pointerEvents="none"></view>
+  `, styles: ["\n    .letters {\n      color: black;\n    }\n    .fill {\n      position: absolute;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n    }\n  "] }]
+        }], ctorParameters: () => [], propDecorators: { fill: [{ type: i0.ViewChild, args: ['fill', { ...{ read: ElementRef }, isSignal: true }] }], letters: [{ type: i0.ViewChild, args: ['letters', { ...{ read: ElementRef }, isSignal: true }] }] } });
+//# sourceMappingURL=gradient-text.js.map

package/dist/gradient-text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gradient-text.js","sourceRoot":"","sources":["../src/gradient-text.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Text filled with a gradient, or with any background: the background is drawn through the shapes\n * of the letters.\n *\n * ```html\n * <gradient-text class=\"brand\">Week</gradient-text>\n * ```\n *\n * ```css\n * .brand {\n *   background-image: linear-gradient(to bottom, #437dfc, #4ad0ef);\n *   background-clip: text;\n *   color: transparent;\n *   font-size: 34px;\n *   font-weight: 700;\n * }\n * ```\n *\n * The rule is the one a web page writes. `background-clip: text` is what this element does, so a\n * rule that has it applies to `<gradient-text>` and to nothing else: on a `<text>` it would leave\n * transparent letters on a block of colour. The `color` is not used, since the letters are the\n * mask and are drawn in full.\n *\n * It is text like any other: it wraps, follows the device's text size, takes `<text>` spans\n * inside it with their own weight or style, and is sized by its letters. What a span cannot have\n * here is a colour of its own, because the fill is the one background behind all of it.\n *\n * The app must have `@react-native-masked-view/masked-view` installed, which is where the native\n * view comes from (`npx expo install @react-native-masked-view/masked-view`); none of its\n * JavaScript is imported. The view masks what is inside it by its first child, so the letters are\n * that child and the background is painted on a view behind them.\n */\nimport {\n  Component,\n  ElementRef,\n  viewChild,\n  type AfterContentChecked,\n  type AfterViewInit,\n} from '@angular/core';\nimport { registerViewName, type Engine, type EngineNode } from '@ng-native/fabric';\nimport { Text } from './text.ts';\nimport { View } from './view.ts';\nimport { ViewBase } from './view-base.ts';\n\n/** The characters under a node, in order. */\nconst textOf = (node: EngineNode): string =>\n  node.kind === 'text' ? node.text : node.children.map(textOf).join('');\n\nlet registered = false;\n\n/** Teach the engine the element, once, before its first commit. */\nfunction registerGradientText(): void {\n  if (registered) return;\n  registered = true;\n  registerViewName('gradient-text', 'RNCMaskedView');\n}\n\n@Component({\n  selector: 'gradient-text',\n  imports: [Text, View],\n  template: `\n    <text #letters class=\"letters\"><ng-content /></text>\n    <view #fill class=\"fill\" pointerEvents=\"none\"></view>\n  `,\n  styles: `\n    .letters {\n      color: black;\n    }\n    .fill {\n      position: absolute;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n    }\n  `,\n})\nexport class GradientText extends ViewBase implements AfterViewInit, AfterContentChecked {\n  private readonly fill = viewChild.required('fill', { read: ElementRef });\n  private readonly letters = viewChild('letters', { read: ElementRef });\n  /** The label last written from the letters, to write it again only when they change. */\n  private spoken: string | undefined;\n\n  constructor() {\n    super();\n    registerGradientText();\n    // One element to a screen reader, as a text is. An input of the same name is written after.\n    this.engine.setProp(this.node, 'accessible', true);\n    this.engine.setProp(this.node, 'accessibilityRole', 'text');\n  }\n\n  ngAfterViewInit(): void {\n    this.paintOnFill();\n    this.labelFromLetters();\n  }\n\n  ngAfterContentChecked(): void {\n    this.labelFromLetters();\n  }\n\n  /**\n   * Say the letters. iOS takes the mask out of the view hierarchy, so there is no text under the\n   * element for VoiceOver to read, and an element with nothing to say is not found at all. A\n   * label the app gave is left as it is.\n   */\n  private labelFromLetters(): void {\n    const letters = this.letters()?.nativeElement as EngineNode | undefined;\n    const given = this.accessibilityLabel() ?? this.ariaLabel();\n    if (!letters || given !== undefined) return;\n    const label = textOf(letters).replace(/\\s+/g, ' ').trim();\n    if (label === this.spoken) return;\n    this.spoken = label;\n    this.engine.setProp(this.node, 'accessibilityLabel', label || null);\n  }\n\n  /**\n   * The host's background is the fill's to paint: the view masks its children and not itself.\n   * Before the first commit, so the background is never drawn unmasked.\n   */\n  private paintOnFill(): void {\n    const engine = this.engine as Partial<Pick<Engine, 'paintOn'>>;\n    engine.paintOn?.(this.node as EngineNode, this.fill().nativeElement as EngineNode);\n  }\n}\n"]}

package/dist/index.d.ts

@@ -20,6 +20,7 @@ export { Modal, type ModalOrientation, type ModalPresentationStyle } from './mod
 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 { GradientText } from './gradient-text.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';

package/dist/index.js

@@ -20,6 +20,7 @@ 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 { GradientText } from "./gradient-text.js";
 export {} from "./safe-area.js";
 export { SafeAreaProvider } from "./safe-area-provider.js";
 export { SafeAreaView } from "./safe-area-view.js";

package/dist/index.js.map

@@ -1 +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,oBAAoB,EACpB,aAAa,EACb,aAAa,EACb,WAAW,EACX,WAAW,EACX,gBAAgB,GAOjB,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,GAWxB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EACL,WAAW,EACX,cAAc,EACd,oBAAoB,GAMrB,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  SectionEdgeSeparator,\n  SectionFooter,\n  SectionHeader,\n  SectionItem,\n  SectionList,\n  SectionSeparator,\n  type SectionContext,\n  type SectionEdgeSeparatorContext,\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 Role,\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 VirtualListPadding,\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"]}
+{"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,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,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,oBAAoB,EACpB,aAAa,EACb,aAAa,EACb,WAAW,EACX,WAAW,EACX,gBAAgB,GAOjB,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,GAWxB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EACL,WAAW,EACX,cAAc,EACd,oBAAoB,GAMrB,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 { GradientText } from './gradient-text.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  SectionEdgeSeparator,\n  SectionFooter,\n  SectionHeader,\n  SectionItem,\n  SectionList,\n  SectionSeparator,\n  type SectionContext,\n  type SectionEdgeSeparatorContext,\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 Role,\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 VirtualListPadding,\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/text-input.d.ts

@@ -125,7 +125,7 @@ export declare class TextInput extends ViewBase {
     /** Android: the selection handle colour. */
     readonly selectionHandleColor: import("@angular/core").InputSignal<string | undefined>;
     /** Android: where text sits in a tall field. */
-    readonly textAlignVertical: import("@angular/core").InputSignal<"auto" | "center" | "top" | "bottom" | undefined>;
+    readonly textAlignVertical: import("@angular/core").InputSignal<"auto" | "top" | "bottom" | "center" | undefined>;
     /** Android: whether autofill may fill this field. */
     readonly importantForAutofill: import("@angular/core").InputSignal<"auto" | "yes" | "no" | "noExcludeDescendants" | "yesExcludeDescendants" | undefined>;
     /** Android: set to false to focus without raising the keyboard. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-native/components",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Angular Native's core components: view, text, image, pressable, scroll-view, virtual-list, text-input and the rest of React Native's set.",
   "keywords": [
     "angular",
@@ -53,8 +53,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@ng-native/device": "0.4.0",
-    "@ng-native/fabric": "0.4.0"
+    "@ng-native/device": "0.5.0",
+    "@ng-native/fabric": "0.5.0"
   },
   "peerDependencies": {
     "@angular/core": "^22.0.0",
@@ -62,7 +62,8 @@
     "react-native-gesture-handler": "^2.32.0",
     "react-native-reanimated": "^4.5.1",
     "react-native-safe-area-context": "^5.7.0",
-    "react-native-keyboard-controller": "^1.21.9"
+    "react-native-keyboard-controller": "^1.21.9",
+    "@react-native-masked-view/masked-view": ">=0.3.0"
   },
   "nx": {
     "tags": [
@@ -90,6 +91,9 @@
     },
     "react-native-keyboard-controller": {
       "optional": true
+    },
+    "@react-native-masked-view/masked-view": {
+      "optional": true
     }
   },
   "repository": {