@ng-native/components 0.0.1 → 0.1.1

package/dist/view-base.js

@@ -0,0 +1,534 @@
+/**
+ * The props every native view accepts, as typed inputs forwarded to the host node.
+ *
+ * Each input is mirrored by a host binding of the same name, which is what carries the value to
+ * the renderer: once a directive declares an input, Angular routes the binding to the directive
+ * rather than the element. An unset input stays `undefined` and never reaches native, so a view
+ * that mentions none of these sends none of them.
+ *
+ * Web-style `aria-*` names are accepted as aliases and land on the `accessibility*` props React
+ * Native's own `View.js` maps them to. `id` maps to `nativeID` and `tabIndex` to `focusable` the
+ * same way.
+ *
+ * Events are element events, typed in `events.ts`: `(layout)`, `(touchStart)`,
+ * `(accessibilityAction)` and so on. They are deliberately not outputs; see that file.
+ */
+import { Directive, ElementRef, inject, input } from '@angular/core';
+import { HostEngine, claimHost, declareNativeProps } from '@ng-native/fabric';
+import { optionalBoolean, optionalNumber } from "./transforms.js";
+import { WRITTEN_PROPS } from "./written-props.js";
+import * as i0 from "@angular/core";
+/**
+ * Angular writes a static attribute to the element as well as feeding it to the input of the
+ * same name, so `<switch thumbColor="#fff">` leaves a stray `thumbColor` prop on the node next to
+ * the `thumbTintColor` the input produces. The inputs of the directive are what consumed them,
+ * so those names come off the node; a host binding puts back any that native does read.
+ *
+ * Walking the *node's* props rather than the directive's inputs is not a detail. This runs for
+ * every element on screen, a primitive declares some forty-five inputs, and at this point the node
+ * usually has no props at all - bindings have not run yet, so only static attributes are there.
+ * The other way round it was forty-five `delete`s per element on an object that had none of them,
+ * which is both wasted work and the way to push an object into dictionary mode.
+ */
+/** Shallow equality, so a re-merged state that says the same thing keeps its identity. */
+function sameState(a, b) {
+    const keys = Object.keys(a);
+    return keys.length === Object.keys(b).length && keys.every((key) => a[key] === b[key]);
+}
+/** The host primitives whose props have been declared to the engine. */
+const declared = new WeakSet();
+/**
+ * Tell the engine the props this primitive's native view takes, once per component class: its
+ * inputs by their public names, and `WRITTEN_PROPS`. What its check for a misspelt prop reads.
+ */
+function declareProps(ctor, node) {
+    if (declared.has(ctor))
+        return;
+    declared.add(ctor);
+    const def = ctor.ɵcmp ??
+        ctor.ɵdir;
+    const name = node.name;
+    if (!name || !def?.inputs)
+        return;
+    declareNativeProps(name, [...Object.keys(def.inputs), ...WRITTEN_PROPS]);
+}
+function stripConsumedAttributes(ctor, node) {
+    const { ɵcmp, ɵdir } = ctor;
+    const def = ɵcmp ?? (ɵdir?.selectors?.length ? ɵdir : undefined);
+    const inputs = def?.inputs;
+    if (!inputs)
+        return;
+    // A host that has not put a bag on the node yet has no attributes to take off it. Read
+    // unconditionally, this threw `Cannot convert undefined or null to object` on the first
+    // component a browser host ever mounted, before anything rendered - which is a hard crash
+    // standing between this package and a second platform, for a loop with nothing to do.
+    const props = node.props;
+    if (!props)
+        return;
+    for (const name of Object.keys(props)) {
+        if (name in inputs)
+            delete props[name];
+    }
+}
+/** Where an element's contributions are kept: on the node, and only on a node that has some. */
+const CONTRIBUTIONS = Symbol('angular-native.accessibilityContributions');
+const NO_CONTRIBUTIONS = [];
+/**
+ * Tell the primitive on this element what it is, for a screen reader: a role, and state to merge
+ * into what it announces. Call it from a directive's field initialiser or constructor, on the
+ * element the primitive is on:
+ *
+ *     private readonly contribution = contributeAccessibility({ role: 'button' });
+ *     private readonly contribution = contributeAccessibility(this);
+ *
+ * Kept on the node rather than provided through DI, because asking the injector costs every
+ * element on screen a lookup to learn that nothing contributes - about a tenth of creating a list.
+ * Reading a property that is not there costs nothing.
+ */
+export function contributeAccessibility(contribution) {
+    const node = inject(ElementRef).nativeElement;
+    (node[CONTRIBUTIONS] ??= []).push(contribution);
+    return contribution;
+}
+export class ViewBase {
+    /** The retained node this directive sits on. */
+    node = inject(ElementRef).nativeElement;
+    /**
+     * The engine, because the props these inputs carry are written straight onto the node. Read
+     * off the node where the host put it there, which is one property read against an injector
+     * lookup that walks every ancestor element, for every element on screen.
+     */
+    engine = this.node.host ?? inject(HostEngine);
+    /**
+     * See `contributeAccessibility`. Empty for every element nothing is composed onto. Read, never
+     * cached, from `ngOnInit` onwards: by then every directive on the node has been constructed and
+     * registered what it has to say.
+     */
+    get contributions() {
+        return this.node[CONTRIBUTIONS] ?? NO_CONTRIBUTIONS;
+    }
+    constructor() {
+        claimHost(this.node);
+        stripConsumedAttributes(this.constructor, this.node);
+        declareProps(this.constructor, this.node);
+        this.engine.settle(this);
+    }
+    /** Whether `ngOnInit` has run, which is what writes the props every element starts with. */
+    initialised = false;
+    /**
+     * Write what the inputs say, for an element whose view has not been checked by the time the
+     * host commits it. Nothing for one that has.
+     *
+     * The props are written from `ngOnChanges` and `ngOnInit`, which Angular runs in the parent
+     * view's update pass. A component that detaches itself before its first check never gets one,
+     * and on the web that pattern still works, because a listener and an attribute are there from
+     * creation. So the host calls this before the commit that first mounts the element, by when its
+     * static inputs are set: the press handling, the role and the `testID` are there, and the view
+     * behaves as written once something calls `detectChanges()`.
+     */
+    settleProps() {
+        if (this.initialised)
+            return;
+        this.ngOnChanges({});
+        this.ngOnInit();
+    }
+    // --- accessibility ---------------------------------------------------------------------
+    /** Whether the view is an accessibility element. Defaults to false for a plain view. */
+    accessible = input(undefined, { ...(ngDevMode ? { debugName: "accessible" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    /** What a screen reader announces for the view. */
+    accessibilityLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "accessibilityLabel" }] : /* istanbul ignore next */ []));
+    /** `aria-label`: web spelling of `accessibilityLabel`. */
+    ariaLabel = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+    /** Android: `nativeID`s of the views that label this one. */
+    accessibilityLabelledBy = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "accessibilityLabelledBy" }] : /* istanbul ignore next */ []));
+    /** `aria-labelledby`: web spelling of `accessibilityLabelledBy`. */
+    ariaLabelledBy = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabelledBy" } : /* istanbul ignore next */ {}), alias: 'aria-labelledby' });
+    /** What happens when the user acts on the view, when the label alone does not say. */
+    accessibilityHint = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "accessibilityHint" }] : /* istanbul ignore next */ []));
+    /** The kind of control this is, for assistive technologies. */
+    accessibilityRole = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "accessibilityRole" }] : /* istanbul ignore next */ []));
+    /** `role`: the web spelling of `accessibilityRole`. */
+    role = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "role" }] : /* istanbul ignore next */ []));
+    /** Disabled, selected, checked, busy and expanded, as one object. */
+    accessibilityState = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "accessibilityState" }] : /* istanbul ignore next */ []));
+    /** `aria-busy`. */
+    ariaBusy = input(undefined, { ...(ngDevMode ? { debugName: "ariaBusy" } : /* istanbul ignore next */ {}), alias: 'aria-busy', transform: optionalBoolean });
+    /** `aria-checked`. */
+    ariaChecked = input(undefined, { ...(ngDevMode ? { debugName: "ariaChecked" } : /* istanbul ignore next */ {}), alias: 'aria-checked' });
+    /** `aria-disabled`. */
+    ariaDisabled = input(undefined, { ...(ngDevMode ? { debugName: "ariaDisabled" } : /* istanbul ignore next */ {}), alias: 'aria-disabled',
+        transform: optionalBoolean });
+    /** `aria-expanded`. */
+    ariaExpanded = input(undefined, { ...(ngDevMode ? { debugName: "ariaExpanded" } : /* istanbul ignore next */ {}), alias: 'aria-expanded',
+        transform: optionalBoolean });
+    /** `aria-selected`. */
+    ariaSelected = input(undefined, { ...(ngDevMode ? { debugName: "ariaSelected" } : /* istanbul ignore next */ {}), alias: 'aria-selected',
+        transform: optionalBoolean });
+    /** The current value of an adjustable control, for a screen reader. */
+    accessibilityValue = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "accessibilityValue" }] : /* istanbul ignore next */ []));
+    /** `aria-valuemin`. */
+    ariaValueMin = input(undefined, { ...(ngDevMode ? { debugName: "ariaValueMin" } : /* istanbul ignore next */ {}), alias: 'aria-valuemin',
+        transform: optionalNumber });
+    /** `aria-valuemax`. */
+    ariaValueMax = input(undefined, { ...(ngDevMode ? { debugName: "ariaValueMax" } : /* istanbul ignore next */ {}), alias: 'aria-valuemax',
+        transform: optionalNumber });
+    /** `aria-valuenow`. */
+    ariaValueNow = input(undefined, { ...(ngDevMode ? { debugName: "ariaValueNow" } : /* istanbul ignore next */ {}), alias: 'aria-valuenow',
+        transform: optionalNumber });
+    /** `aria-valuetext`. */
+    ariaValueText = input(undefined, { ...(ngDevMode ? { debugName: "ariaValueText" } : /* istanbul ignore next */ {}), alias: 'aria-valuetext' });
+    /** Custom actions a screen reader can invoke; each arrives as `(accessibilityAction)`. */
+    accessibilityActions = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "accessibilityActions" }] : /* istanbul ignore next */ []));
+    /** Android: announce changes to this view's content without focus moving to it. */
+    accessibilityLiveRegion = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "accessibilityLiveRegion" }] : /* istanbul ignore next */ []));
+    /** `aria-live`. */
+    ariaLive = input(undefined, { ...(ngDevMode ? { debugName: "ariaLive" } : /* istanbul ignore next */ {}), alias: 'aria-live' });
+    /** iOS: hide this view and its children from assistive technologies. */
+    accessibilityElementsHidden = input(undefined, { ...(ngDevMode ? { debugName: "accessibilityElementsHidden" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    /** `aria-hidden`: `accessibilityElementsHidden` on iOS, `no-hide-descendants` on Android. */
+    ariaHidden = input(undefined, { ...(ngDevMode ? { debugName: "ariaHidden" } : /* istanbul ignore next */ {}), alias: 'aria-hidden',
+        transform: optionalBoolean });
+    /** Android: whether this view is exposed to accessibility, and whether its children are. */
+    importantForAccessibility = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "importantForAccessibility" }] : /* istanbul ignore next */ []));
+    /** iOS: VoiceOver ignores every sibling while this view is shown, as a modal expects. */
+    accessibilityViewIsModal = input(undefined, { ...(ngDevMode ? { debugName: "accessibilityViewIsModal" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    /** `aria-modal`. */
+    ariaModal = input(undefined, { ...(ngDevMode ? { debugName: "ariaModal" } : /* istanbul ignore next */ {}), alias: 'aria-modal',
+        transform: optionalBoolean });
+    /** iOS: keep the view's colours when the Invert Colors setting is on; images want this. */
+    accessibilityIgnoresInvertColors = input(undefined, { ...(ngDevMode ? { debugName: "accessibilityIgnoresInvertColors" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    /** iOS: the language VoiceOver reads the label in, as a BCP 47 tag. */
+    accessibilityLanguage = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "accessibilityLanguage" }] : /* istanbul ignore next */ []));
+    /** iOS: the title shown by the Large Content Viewer on a long press with large text on. */
+    accessibilityLargeContentTitle = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "accessibilityLargeContentTitle" }] : /* istanbul ignore next */ []));
+    /** iOS: opt this view into the Large Content Viewer. */
+    accessibilityShowsLargeContentViewer = input(undefined, { ...(ngDevMode ? { debugName: "accessibilityShowsLargeContentViewer" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    /** iOS: tell VoiceOver the view responds to a tap even without a role that implies it. */
+    accessibilityRespondsToUserInteraction = input(undefined, { ...(ngDevMode ? { debugName: "accessibilityRespondsToUserInteraction" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    // --- identity and hit testing ----------------------------------------------------------
+    /** A handle native code can find the view by; also what `:id` selectors match. */
+    nativeID = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "nativeID" }] : /* istanbul ignore next */ []));
+    /** `id`: the web spelling of `nativeID`. */
+    id = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
+    /** A handle for end-to-end test tooling. */
+    testID = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "testID" }] : /* istanbul ignore next */ []));
+    /** Extend the touchable area beyond the view's bounds, without moving anything visible. */
+    hitSlop = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "hitSlop" }] : /* istanbul ignore next */ []));
+    /** Whether this view, its children, or neither can be the target of a touch. */
+    pointerEvents = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "pointerEvents" }] : /* istanbul ignore next */ []));
+    /** Set to false to keep a layout-only view alive; Fabric otherwise removes it from the tree. */
+    collapsable = input(undefined, { ...(ngDevMode ? { debugName: "collapsable" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    /** Set to false to keep this view's layout-only children from being flattened. */
+    collapsableChildren = input(undefined, { ...(ngDevMode ? { debugName: "collapsableChildren" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    /** Detach children that are outside the visible bounds. A scroll view optimisation. */
+    removeClippedSubviews = input(undefined, { ...(ngDevMode ? { debugName: "removeClippedSubviews" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    /** Composite the view offscreen so a translucent view with children blends correctly. */
+    needsOffscreenAlphaCompositing = input(undefined, { ...(ngDevMode ? { debugName: "needsOffscreenAlphaCompositing" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    /** Android: whether the view takes keyboard or TV focus. RN's `tabIndex` is this. */
+    focusable = input(undefined, { ...(ngDevMode ? { debugName: "focusable" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    /** iOS: render the view to a bitmap once and reuse it; for a static view that animates. */
+    shouldRasterizeIOS = input(undefined, { ...(ngDevMode ? { debugName: "shouldRasterizeIOS" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    /** Android: cache the view in a hardware texture; the same trade as `shouldRasterizeIOS`. */
+    renderToHardwareTextureAndroid = input(undefined, { ...(ngDevMode ? { debugName: "renderToHardwareTextureAndroid" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    /** Android: a ripple or theme drawable painted behind the view's content. */
+    nativeBackgroundAndroid = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "nativeBackgroundAndroid" }] : /* istanbul ignore next */ []));
+    /** Android: a ripple or theme drawable painted over the view's content. */
+    nativeForegroundAndroid = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "nativeForegroundAndroid" }] : /* istanbul ignore next */ []));
+    // --- merged views of the aliases ------------------------------------------------------
+    /**
+     * What React Native's own JavaScript wrapper would have defaulted, per component.
+     *
+     * Driving the native views directly skips those wrappers, and what is lost is invisible: the
+     * app looks identical and is unusable with a screen reader, because nothing on it is an
+     * accessibility element. Each hook is overridden by the component whose wrapper sets it, and
+     * cites the file it came from.
+     */
+    /** True for anything that behaves like a control. `Pressable.js`: `accessible !== false`. */
+    accessibleByDefault() {
+        return false;
+    }
+    /** Whether the platform's focus order should include this. `Pressable.js` again. */
+    focusableByDefault() {
+        return false;
+    }
+    /** A role the component itself implies. `Switch.js`: `accessibilityRole ?? 'switch'`. */
+    roleByDefault() {
+        return undefined;
+    }
+    /**
+     * The component's own `disabled`, for the state a screen reader announces.
+     *
+     * React Native merges this whenever the prop was passed, even as false. An input here always
+     * has a value, so there is no telling "passed false" from "not passed"; only true is merged,
+     * and a control that is not disabled says nothing rather than saying so on every node.
+     */
+    disabledForAccessibility() {
+        return undefined;
+    }
+    /**
+     * The component's own `checked`, for a control whose checked state is not an accessibility
+     * input at all - `Switch`'s `checked` is a `model()`, not one of this class's inputs, so it
+     * cannot reach `ngOnChanges` here any more than `disabled` can.
+     */
+    checkedForAccessibility() {
+        return undefined;
+    }
+    /**
+     * Write what the inputs say onto the node.
+     *
+     * This is what thirty host bindings used to do, and it is here rather than there for a reason
+     * that was measured: a host binding costs every element that carries it, on every pass, whether
+     * or not the app ever set the prop, and mounting four hundred rows spent a third of its time on
+     * the accessibility surface alone. Angular calls this once with everything that changed instead.
+     *
+     * It works with signal inputs, which is easy to assume it does not: `ngOnChanges` fires for
+     * them as it does for any other input, because `ngOnChangesSetInput` records a `SimpleChange`
+     * before writing the signal. `signal-onchanges.test.ts` is there to keep that fact honest.
+     *
+     * What remains is the allocation - a signal input builds its node whether or not anything binds
+     * to it, and there are forty-six here. Moving prop groups into directives selected by the props
+     * they carry (`[accessibilityLabel], [aria-label], ...`) is how that goes away: an element that
+     * binds none of them would allocate nothing. Measured on a 400-row mount it is worth about 40ms,
+     * at the price of an import per group.
+     */
+    ngOnChanges(_changes) {
+        this.writeAccessibility();
+        this.writeIdentity();
+    }
+    writeAccessibility() {
+        const write = this.writer();
+        write('accessible', this.accessibleByDefault() ? (this.accessible() ?? true) : this.accessible());
+        write('accessibilityLabel', this.accessibilityLabel() ?? this.ariaLabel() ?? this.labelByDefault());
+        write('accessibilityLabelledBy', this.accessibilityLabelledBy() ?? this.ariaLabelledBy());
+        write('accessibilityHint', this.accessibilityHint());
+        write('accessibilityRole', this.accessibilityRole() ?? this.role() ?? this.roleByDefault() ?? this.contributedRole());
+        write('accessibilityState', this.mergedAccessibilityState());
+        write('accessibilityValue', this.mergedAccessibilityValue());
+        write('accessibilityActions', this.accessibilityActions());
+        this.writeVisibility();
+    }
+    /** The half of accessibility that is about what assistive technology may see, and in which language. */
+    writeVisibility() {
+        const write = (key, value) => this.engine.setProp(this.node, key, value);
+        write('accessibilityLiveRegion', this.accessibilityLiveRegion() ?? this.ariaLive());
+        write('accessibilityElementsHidden', this.accessibilityElementsHidden() ?? this.ariaHidden());
+        write('importantForAccessibility', this.importantForAccessibility() ?? (this.ariaHidden() ? 'no-hide-descendants' : undefined));
+        write('accessibilityViewIsModal', this.accessibilityViewIsModal() ?? this.ariaModal());
+        write('accessibilityIgnoresInvertColors', this.accessibilityIgnoresInvertColors());
+        write('accessibilityLanguage', this.accessibilityLanguage());
+        write('accessibilityLargeContentTitle', this.accessibilityLargeContentTitle());
+        write('accessibilityShowsLargeContentViewer', this.accessibilityShowsLargeContentViewer());
+        write('accessibilityRespondsToUserInteraction', this.accessibilityRespondsToUserInteraction());
+    }
+    /**
+     * Writes a prop, and says nothing when it has nothing to say.
+     *
+     * The `undefined` guard is the whole of it, and it fixes a silent failure that had already been
+     * hit twice. These two methods rewrite roughly forty props from this class's own inputs on every
+     * `ngOnChanges`, so anything that reached the node by another route was overwritten the first
+     * time any input changed. Two routes get here without going through an input of this class:
+     *
+     * - A host binding on the composing component. `ui-alert` sets `[accessible]` that way and
+     *   `ui-separator` sets `[accessibilityLabel]`; both are documented as working, and both were
+     *   one input change away from stopping.
+     * - An element property binding. A component whose `hostDirectives` entry lists `disabled` but
+     *   not `nativeID` leaves `[nativeID]` to be applied as a plain property, and then a bound
+     *   `[disabled]` beside it clobbered the id on the next change. `ui-checkbox` carries a
+     *   per-component workaround for that, listing the identity inputs through explicitly, and
+     *   `ui-select-item` and `ui-dropdown-menu-item` do not - which is the shape of a bug that gets
+     *   copied rather than fixed.
+     *
+     * An input that goes back to `undefined` clears the prop only when this is what set it, so a
+     * binding such as `[pointerEvents]="busy() ? 'none' : undefined"` still switches off, and a
+     * prop that arrived by one of those other routes is still never touched. Clearing a *class*
+     * clears the style it brought, because that goes through the cascade rather than through here.
+     */
+    writer() {
+        return (key, value) => {
+            if (value === undefined) {
+                // Cleared only if this wrote it: `[pointerEvents]="busy() ? 'none' : undefined"` has to
+                // give the view its touches back, and a prop another route set is still left alone.
+                if (this.written?.delete(key))
+                    this.engine.setProp(this.node, key, null);
+                return;
+            }
+            (this.written ??= new Set()).add(key);
+            this.engine.setProp(this.node, key, value);
+        };
+    }
+    /** The props `writer` has set from an input, so it can clear one when its input is unset. */
+    written = null;
+    writeIdentity() {
+        const write = this.writer();
+        write('nativeID', this.nativeID() ?? this.id());
+        write('testID', this.testID());
+        write('hitSlop', this.hitSlop());
+        write('pointerEvents', this.pointerEvents());
+        write('collapsable', this.collapsable());
+        write('collapsableChildren', this.collapsableChildren());
+        write('removeClippedSubviews', this.removeClippedSubviews());
+        write('needsOffscreenAlphaCompositing', this.needsOffscreenAlphaCompositing());
+        write('focusable', this.focusableByDefault() ? (this.focusable() ?? true) : this.focusable());
+        write('shouldRasterizeIOS', this.shouldRasterizeIOS());
+        write('renderToHardwareTextureAndroid', this.renderToHardwareTextureAndroid());
+        write('nativeBackgroundAndroid', this.nativeBackgroundAndroid());
+        write('nativeForegroundAndroid', this.nativeForegroundAndroid());
+    }
+    /**
+     * The defaults a React Native wrapper would have applied, written once when the element is
+     * created. `ngOnChanges` writes them again whenever an input changes, so an app that later
+     * clears a prop falls back to the default rather than to nothing.
+     */
+    /**
+     * The defaults a React Native wrapper would have applied, for an element nothing was bound on.
+     *
+     * In `ngOnInit` rather than the constructor because a hook like `accessibleByDefault` is
+     * answered from the subclass's own inputs - `Text` asks whether it is pressable - and those
+     * fields do not exist yet while the base constructor runs. Each is guarded on its input being
+     * unset, because `ngOnChanges` has already run by now and its answer, which merges the default
+     * in, is the better one.
+     */
+    ngOnInit() {
+        this.initialised = true;
+        // A directive with nothing bound to it never sees `ngOnChanges`, so an element that carries a
+        // primitive and no bindings would never have its role or state written at all. Cheap to ask,
+        // and the answer is no for every element in an app that uses none.
+        if (this.contributions.length > 0)
+            this.writeAccessibility();
+        if (this.accessible() === undefined && this.accessibleByDefault()) {
+            this.engine.setProp(this.node, 'accessible', true);
+        }
+        if (this.focusable() === undefined && this.focusableByDefault()) {
+            this.engine.setProp(this.node, 'focusable', true);
+        }
+        if (this.accessibilityRole() === undefined && this.role() === undefined) {
+            const role = this.roleByDefault();
+            if (role)
+                this.engine.setProp(this.node, 'accessibilityRole', role);
+        }
+        if (this.accessibilityLabel() === undefined && this.ariaLabel() === undefined) {
+            const label = this.labelByDefault();
+            if (label !== undefined)
+                this.engine.setProp(this.node, 'accessibilityLabel', label);
+        }
+    }
+    /** The first role any directive on this node claims. Two claiming different ones is a bug. */
+    contributedRole() {
+        for (const contribution of this.contributions) {
+            if (contribution.role)
+                return contribution.role;
+        }
+        return undefined;
+    }
+    /** A label the component itself can supply, as `Image` does from `alt`. */
+    labelByDefault() {
+        return undefined;
+    }
+    /**
+     * The merged state, for a component whose own inputs feed it - `disabled` on a pressable or a
+     * switch, which is a signal of theirs and so cannot reach `ngOnChanges` here.
+     *
+     * Those components bind this from their host. It returns the *same object* when nothing has
+     * changed, which is what keeps a host binding from marking the node dirty on every pass.
+     */
+    accessibilityStateProp() {
+        return this.mergedAccessibilityState();
+    }
+    lastAccessibilityState;
+    /** Whether anything could put state on this node. For nearly every node on screen, no. */
+    hasState() {
+        return (this.accessibilityState() !== undefined ||
+            this.ariaBusy() !== undefined ||
+            this.ariaChecked() !== undefined ||
+            this.ariaDisabled() !== undefined ||
+            this.ariaExpanded() !== undefined ||
+            this.ariaSelected() !== undefined ||
+            !!this.disabledForAccessibility() ||
+            this.checkedForAccessibility() !== undefined ||
+            this.contributions.length > 0);
+    }
+    mergedAccessibilityState() {
+        // Answered without allocating in the common case: this runs from a host binding on every
+        // control, on every pass, and most of them have no state to announce.
+        if (!this.hasState())
+            return (this.lastAccessibilityState = undefined);
+        const explicit = this.accessibilityState();
+        const merged = { ...explicit };
+        const set = (key, value) => {
+            if (value !== undefined)
+                merged[key] = value;
+        };
+        set('disabled', this.disabledForAccessibility() || undefined);
+        set('checked', this.checkedForAccessibility());
+        set('busy', this.ariaBusy());
+        set('checked', this.ariaChecked());
+        set('disabled', this.ariaDisabled());
+        set('expanded', this.ariaExpanded());
+        set('selected', this.ariaSelected());
+        for (const contribution of this.contributions) {
+            const state = contribution.accessibilityState?.();
+            for (const key of Object.keys(state ?? {})) {
+                set(key, state[key]);
+            }
+        }
+        const state = Object.keys(merged).length ? merged : explicit;
+        const last = this.lastAccessibilityState;
+        if (last && state && sameState(last, state))
+            return last;
+        return (this.lastAccessibilityState = state);
+    }
+    mergedAccessibilityValue() {
+        const explicit = this.accessibilityValue();
+        const merged = { ...explicit };
+        const set = (key, value) => {
+            if (value !== undefined)
+                merged[key] = value;
+        };
+        set('min', this.ariaValueMin());
+        set('max', this.ariaValueMax());
+        set('now', this.ariaValueNow());
+        set('text', this.ariaValueText());
+        return Object.keys(merged).length ? merged : explicit;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: ViewBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.2.0", type: ViewBase, isStandalone: true, inputs: { accessible: { classPropertyName: "accessible", publicName: "accessible", isSignal: true, isRequired: false, transformFunction: null }, accessibilityLabel: { classPropertyName: "accessibilityLabel", publicName: "accessibilityLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, accessibilityLabelledBy: { classPropertyName: "accessibilityLabelledBy", publicName: "accessibilityLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, accessibilityHint: { classPropertyName: "accessibilityHint", publicName: "accessibilityHint", isSignal: true, isRequired: false, transformFunction: null }, accessibilityRole: { classPropertyName: "accessibilityRole", publicName: "accessibilityRole", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, accessibilityState: { classPropertyName: "accessibilityState", publicName: "accessibilityState", isSignal: true, isRequired: false, transformFunction: null }, ariaBusy: { classPropertyName: "ariaBusy", publicName: "aria-busy", isSignal: true, isRequired: false, transformFunction: null }, ariaChecked: { classPropertyName: "ariaChecked", publicName: "aria-checked", isSignal: true, isRequired: false, transformFunction: null }, ariaDisabled: { classPropertyName: "ariaDisabled", publicName: "aria-disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaExpanded: { classPropertyName: "ariaExpanded", publicName: "aria-expanded", isSignal: true, isRequired: false, transformFunction: null }, ariaSelected: { classPropertyName: "ariaSelected", publicName: "aria-selected", isSignal: true, isRequired: false, transformFunction: null }, accessibilityValue: { classPropertyName: "accessibilityValue", publicName: "accessibilityValue", isSignal: true, isRequired: false, transformFunction: null }, ariaValueMin: { classPropertyName: "ariaValueMin", publicName: "aria-valuemin", isSignal: true, isRequired: false, transformFunction: null }, ariaValueMax: { classPropertyName: "ariaValueMax", publicName: "aria-valuemax", isSignal: true, isRequired: false, transformFunction: null }, ariaValueNow: { classPropertyName: "ariaValueNow", publicName: "aria-valuenow", isSignal: true, isRequired: false, transformFunction: null }, ariaValueText: { classPropertyName: "ariaValueText", publicName: "aria-valuetext", isSignal: true, isRequired: false, transformFunction: null }, accessibilityActions: { classPropertyName: "accessibilityActions", publicName: "accessibilityActions", isSignal: true, isRequired: false, transformFunction: null }, accessibilityLiveRegion: { classPropertyName: "accessibilityLiveRegion", publicName: "accessibilityLiveRegion", isSignal: true, isRequired: false, transformFunction: null }, ariaLive: { classPropertyName: "ariaLive", publicName: "aria-live", isSignal: true, isRequired: false, transformFunction: null }, accessibilityElementsHidden: { classPropertyName: "accessibilityElementsHidden", publicName: "accessibilityElementsHidden", isSignal: true, isRequired: false, transformFunction: null }, ariaHidden: { classPropertyName: "ariaHidden", publicName: "aria-hidden", isSignal: true, isRequired: false, transformFunction: null }, importantForAccessibility: { classPropertyName: "importantForAccessibility", publicName: "importantForAccessibility", isSignal: true, isRequired: false, transformFunction: null }, accessibilityViewIsModal: { classPropertyName: "accessibilityViewIsModal", publicName: "accessibilityViewIsModal", isSignal: true, isRequired: false, transformFunction: null }, ariaModal: { classPropertyName: "ariaModal", publicName: "aria-modal", isSignal: true, isRequired: false, transformFunction: null }, accessibilityIgnoresInvertColors: { classPropertyName: "accessibilityIgnoresInvertColors", publicName: "accessibilityIgnoresInvertColors", isSignal: true, isRequired: false, transformFunction: null }, accessibilityLanguage: { classPropertyName: "accessibilityLanguage", publicName: "accessibilityLanguage", isSignal: true, isRequired: false, transformFunction: null }, accessibilityLargeContentTitle: { classPropertyName: "accessibilityLargeContentTitle", publicName: "accessibilityLargeContentTitle", isSignal: true, isRequired: false, transformFunction: null }, accessibilityShowsLargeContentViewer: { classPropertyName: "accessibilityShowsLargeContentViewer", publicName: "accessibilityShowsLargeContentViewer", isSignal: true, isRequired: false, transformFunction: null }, accessibilityRespondsToUserInteraction: { classPropertyName: "accessibilityRespondsToUserInteraction", publicName: "accessibilityRespondsToUserInteraction", isSignal: true, isRequired: false, transformFunction: null }, nativeID: { classPropertyName: "nativeID", publicName: "nativeID", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, testID: { classPropertyName: "testID", publicName: "testID", isSignal: true, isRequired: false, transformFunction: null }, hitSlop: { classPropertyName: "hitSlop", publicName: "hitSlop", isSignal: true, isRequired: false, transformFunction: null }, pointerEvents: { classPropertyName: "pointerEvents", publicName: "pointerEvents", isSignal: true, isRequired: false, transformFunction: null }, collapsable: { classPropertyName: "collapsable", publicName: "collapsable", isSignal: true, isRequired: false, transformFunction: null }, collapsableChildren: { classPropertyName: "collapsableChildren", publicName: "collapsableChildren", isSignal: true, isRequired: false, transformFunction: null }, removeClippedSubviews: { classPropertyName: "removeClippedSubviews", publicName: "removeClippedSubviews", isSignal: true, isRequired: false, transformFunction: null }, needsOffscreenAlphaCompositing: { classPropertyName: "needsOffscreenAlphaCompositing", publicName: "needsOffscreenAlphaCompositing", isSignal: true, isRequired: false, transformFunction: null }, focusable: { classPropertyName: "focusable", publicName: "focusable", isSignal: true, isRequired: false, transformFunction: null }, shouldRasterizeIOS: { classPropertyName: "shouldRasterizeIOS", publicName: "shouldRasterizeIOS", isSignal: true, isRequired: false, transformFunction: null }, renderToHardwareTextureAndroid: { classPropertyName: "renderToHardwareTextureAndroid", publicName: "renderToHardwareTextureAndroid", isSignal: true, isRequired: false, transformFunction: null }, nativeBackgroundAndroid: { classPropertyName: "nativeBackgroundAndroid", publicName: "nativeBackgroundAndroid", isSignal: true, isRequired: false, transformFunction: null }, nativeForegroundAndroid: { classPropertyName: "nativeForegroundAndroid", publicName: "nativeForegroundAndroid", isSignal: true, isRequired: false, transformFunction: null } }, usesOnChanges: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: ViewBase, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [], propDecorators: { accessible: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessible", required: false }] }], accessibilityLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessibilityLabel", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], accessibilityLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessibilityLabelledBy", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], accessibilityHint: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessibilityHint", required: false }] }], accessibilityRole: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessibilityRole", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], accessibilityState: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessibilityState", required: false }] }], ariaBusy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-busy", required: false }] }], ariaChecked: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-checked", required: false }] }], ariaDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-disabled", required: false }] }], ariaExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-expanded", required: false }] }], ariaSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-selected", required: false }] }], accessibilityValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessibilityValue", required: false }] }], ariaValueMin: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-valuemin", required: false }] }], ariaValueMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-valuemax", required: false }] }], ariaValueNow: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-valuenow", required: false }] }], ariaValueText: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-valuetext", required: false }] }], accessibilityActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessibilityActions", required: false }] }], accessibilityLiveRegion: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessibilityLiveRegion", required: false }] }], ariaLive: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-live", required: false }] }], accessibilityElementsHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessibilityElementsHidden", required: false }] }], ariaHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-hidden", required: false }] }], importantForAccessibility: [{ type: i0.Input, args: [{ isSignal: true, alias: "importantForAccessibility", required: false }] }], accessibilityViewIsModal: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessibilityViewIsModal", required: false }] }], ariaModal: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-modal", required: false }] }], accessibilityIgnoresInvertColors: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessibilityIgnoresInvertColors", required: false }] }], accessibilityLanguage: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessibilityLanguage", required: false }] }], accessibilityLargeContentTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessibilityLargeContentTitle", required: false }] }], accessibilityShowsLargeContentViewer: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessibilityShowsLargeContentViewer", required: false }] }], accessibilityRespondsToUserInteraction: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessibilityRespondsToUserInteraction", required: false }] }], nativeID: [{ type: i0.Input, args: [{ isSignal: true, alias: "nativeID", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], testID: [{ type: i0.Input, args: [{ isSignal: true, alias: "testID", required: false }] }], hitSlop: [{ type: i0.Input, args: [{ isSignal: true, alias: "hitSlop", required: false }] }], pointerEvents: [{ type: i0.Input, args: [{ isSignal: true, alias: "pointerEvents", required: false }] }], collapsable: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsable", required: false }] }], collapsableChildren: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsableChildren", required: false }] }], removeClippedSubviews: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeClippedSubviews", required: false }] }], needsOffscreenAlphaCompositing: [{ type: i0.Input, args: [{ isSignal: true, alias: "needsOffscreenAlphaCompositing", required: false }] }], focusable: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusable", required: false }] }], shouldRasterizeIOS: [{ type: i0.Input, args: [{ isSignal: true, alias: "shouldRasterizeIOS", required: false }] }], renderToHardwareTextureAndroid: [{ type: i0.Input, args: [{ isSignal: true, alias: "renderToHardwareTextureAndroid", required: false }] }], nativeBackgroundAndroid: [{ type: i0.Input, args: [{ isSignal: true, alias: "nativeBackgroundAndroid", required: false }] }], nativeForegroundAndroid: [{ type: i0.Input, args: [{ isSignal: true, alias: "nativeForegroundAndroid", required: false }] }] } });
+/**
+ * `ViewBase` on its own, for a component whose host is a plain view.
+ *
+ * No selector: this is only ever a `hostDirectives` entry, and it is the counterpart to
+ * `PressBehavior` for the parts of a control that do not take a touch. A radio group is the case
+ * that asked for it - it announces itself as a group and holds a value, but pressing it means
+ * nothing, and without a `ViewBase` on the node there is nothing to write that role.
+ */
+export class ViewBehavior extends ViewBase {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: ViewBehavior, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: ViewBehavior, isStandalone: true, usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: ViewBehavior, decorators: [{
+            type: Directive,
+            args: [{}]
+        }] });
+//# sourceMappingURL=view-base.js.map