@symbiote-native/angular 0.1.0

package/build/angular/components/keyboard-avoiding-view.js

@@ -0,0 +1,363 @@
+// KeyboardAvoidingView: the Angular lifecycle half. A plain View that shifts out of the
+// keyboard's way as it shows/hides. The inset math + the behavior → style/structure decision
+// live framework-agnostic in @symbiote-native/components (render-keyboard-avoiding-view), shared verbatim
+// with React/Vue; Angular supplies only the lifecycle: a plain inset field, ngOnInit subscribes to
+// the core Keyboard module (show / changeFrame / hide) and markForCheck pulls the OnPush view (the
+// Angular twin of React's setState / Vue's reactive ref), ngOnDestroy tears the subscriptions down,
+// and the wrapper's onLayout measures the frame that feeds the next event's inset. The user
+// children nest under the wrapper (or, for 'position', an inner View) via <ng-content>. No native
+// host of its own — it wraps symbiote-view — so this stays a flat single file (ADR 0026).
+//
+// Full parity: behavior 'height'|'position'|'padding', enabled, keyboardVerticalOffset,
+// contentContainerStyle, onLayout, plus the full a11y/aria surface every View carries.
+import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, inject, Input, Output, } from '@angular/core';
+import { computeInset, readKeyboardFrame, readLayoutFrame, resolveAccessibilityProps, resolveKeyboardAvoidingLayout, DEFAULT_VERTICAL_OFFSET, } from '@symbiote-native/components';
+import { Keyboard, KEYBOARD_EVENT, dlog, } from '@symbiote-native/engine';
+import { anchorHostStyle, SymbioteHostPropsDirective, ViewHost } from '../primitives';
+import * as i0 from "@angular/core";
+// Angular infers an `(event)` binding's $event as the DOM Event for a custom-schema element,
+// so each handler enters as `unknown` and is narrowed here before reaching a typed callback.
+function isSymbioteEvent(value) {
+    return typeof value === 'object' && value !== null && 'nativeEvent' in value;
+}
+export class KeyboardAvoidingView {
+    behavior;
+    enabled;
+    keyboardVerticalOffset;
+    contentContainerStyle;
+    style;
+    // The wrapper's onLayout is a real @Output(): `(layout)="…"`, not `[onLayout]="…"`. Safe to
+    // name it the same as the native `layout` event fired inside this component's own template
+    // (see the class's `handleLayout`) — the engine's bubble() treats ANCHOR_HOST_COMPONENTS as
+    // transparent to listener lookup, so there is no double-fire (angular-adapter skill §7).
+    layout = new EventEmitter();
+    accessibilityAction = new EventEmitter();
+    accessibilityTap = new EventEmitter();
+    magicTap = new EventEmitter();
+    accessibilityEscape = new EventEmitter();
+    testID;
+    nativeID;
+    accessible;
+    accessibilityLabel;
+    accessibilityHint;
+    accessibilityRole;
+    accessibilityState;
+    accessibilityValue;
+    accessibilityActions;
+    accessibilityLabelledBy;
+    importantForAccessibility;
+    accessibilityLiveRegion;
+    screenReaderFocusable;
+    accessibilityViewIsModal;
+    accessibilityElementsHidden;
+    accessibilityIgnoresInvertColors;
+    accessibilityLanguage;
+    accessibilityRespondsToUserInteraction;
+    accessibilityShowsLargeContentViewer;
+    accessibilityLargeContentTitle;
+    role;
+    ariaLabel;
+    ariaLabelledBy;
+    ariaLive;
+    ariaHidden;
+    ariaBusy;
+    ariaChecked;
+    ariaDisabled;
+    ariaExpanded;
+    ariaSelected;
+    ariaModal;
+    ariaValueMax;
+    ariaValueMin;
+    ariaValueNow;
+    ariaValueText;
+    // How far the view must move so it no longer overlaps the keyboard. A plain field, not reactive:
+    // OnPush + zoneless means a keyboard event mutates it and pulls the view via markForCheck.
+    inset = 0;
+    // Mutable, not state: changing the measured frame alone shouldn't re-render; it feeds the next
+    // keyboard event's inset math (React's frameRef / initialHeightRef, Vue's frame / initialHeight).
+    frame;
+    initialHeight;
+    subscriptions = [];
+    changeDetector = inject(ChangeDetectorRef);
+    // This component's OWN host — the non-painting anchor `class="..."` at the use site resolves
+    // onto (see anchorHostStyle's doc comment) — NOT a ViewChild into the inner symbiote-view (this
+    // component has none; the wrapper IS the outer template node hostProps binds onto).
+    elementRef = inject(ElementRef);
+    ngOnInit() {
+        this.subscriptions = [
+            Keyboard.addListener(KEYBOARD_EVENT.didShow, payload => this.onShow(payload)),
+            Keyboard.addListener(KEYBOARD_EVENT.didChangeFrame, payload => this.onShow(payload)),
+            Keyboard.addListener(KEYBOARD_EVENT.didHide, () => this.onHide()),
+        ];
+    }
+    ngOnDestroy() {
+        for (const subscription of this.subscriptions)
+            subscription.remove();
+        this.subscriptions = [];
+    }
+    onShow(payload) {
+        const keyboard = readKeyboardFrame(payload);
+        const offset = this.keyboardVerticalOffset ?? DEFAULT_VERTICAL_OFFSET;
+        const next = computeInset(this.frame, keyboard, offset);
+        dlog(`KeyboardAvoidingView show -> inset ${next}`);
+        this.inset = next;
+        this.changeDetector.markForCheck();
+    }
+    onHide() {
+        dlog('KeyboardAvoidingView hide -> inset 0');
+        this.inset = 0;
+        this.changeDetector.markForCheck();
+    }
+    // The wrapper's onLayout measures the frame BEFORE forwarding to the caller's onLayout, so the
+    // next keyboard event's inset math has the view's real position (React/Vue's handleLayout).
+    handleLayout(event) {
+        if (!isSymbioteEvent(event))
+            return;
+        const measured = readLayoutFrame(event.nativeEvent.layout);
+        if (measured !== undefined) {
+            this.frame = measured;
+            if (this.initialHeight === undefined)
+                this.initialHeight = measured.height;
+        }
+        this.layout.emit(event);
+    }
+    // RN gates every inset on `enabled ?? true`; only an explicit `false` disables, forcing the inset
+    // to 0 so every behavior mode renders the view untouched.
+    get effectiveInset() {
+        return this.enabled === false ? 0 : this.inset;
+    }
+    // The behavior + effective inset → wrapper/inner styles and the nesting decision (the shared core
+    // of RN's render). Recomputed per CD pass, the Angular twin of React/Vue's per-render call.
+    // Named `resolvedLayout`, not `layout` — that name is now the onLayout @Output() EventEmitter.
+    get resolvedLayout() {
+        return resolveKeyboardAvoidingLayout({
+            behavior: this.behavior,
+            effectiveInset: this.effectiveInset,
+            initialHeight: this.initialHeight,
+            style: this.style,
+            contentContainerStyle: this.contentContainerStyle,
+        });
+    }
+    get isNested() {
+        return this.resolvedLayout.kind === 'nested';
+    }
+    get wrapperStyle() {
+        return this.resolvedLayout.wrapperStyle;
+    }
+    get innerStyle() {
+        return this.resolvedLayout.kind === 'nested' ? this.resolvedLayout.innerStyle : undefined;
+    }
+    // The wrapper's full prop bag (style + identity + a11y) folded for `[symbioteHostProps]`,
+    // the same pattern Modal's `hostProps` uses over its renderModal descriptor. The anchor's
+    // class-derived style goes FIRST, the resolved wrapper style SECOND — flattenStyle's later-wins
+    // collapse keeps an explicit [style] winning over its ambient class.
+    get hostProps() {
+        return {
+            style: [anchorHostStyle(this.elementRef), this.wrapperStyle],
+            testID: this.testID,
+            nativeID: this.nativeID,
+            accessible: this.accessible,
+            ...this.folded,
+        };
+    }
+    // Forward an engine event to the matching @Output(), narrowing the template's untyped $event
+    // first. The accessibility* Outputs ride the engine's structural event channel (Angular blocks
+    // [onX] property bindings; events flow through (event) only).
+    emit(emitter, event) {
+        if (isSymbioteEvent(event))
+            emitter.emit(event);
+    }
+    // Fold the web aria-*/role aliases into the canonical accessibility* props once per render, so the
+    // host node never sees an aria-* key (native ignores them) — the shared transform every adapter runs.
+    get folded() {
+        return resolveAccessibilityProps({
+            accessibilityLabel: this.accessibilityLabel,
+            accessibilityHint: this.accessibilityHint,
+            accessibilityRole: this.accessibilityRole,
+            accessibilityState: this.accessibilityState,
+            accessibilityValue: this.accessibilityValue,
+            accessibilityActions: this.accessibilityActions,
+            accessibilityLabelledBy: this.accessibilityLabelledBy,
+            importantForAccessibility: this.importantForAccessibility,
+            accessibilityLiveRegion: this.accessibilityLiveRegion,
+            screenReaderFocusable: this.screenReaderFocusable,
+            accessibilityViewIsModal: this.accessibilityViewIsModal,
+            accessibilityElementsHidden: this.accessibilityElementsHidden,
+            accessibilityIgnoresInvertColors: this.accessibilityIgnoresInvertColors,
+            accessibilityLanguage: this.accessibilityLanguage,
+            accessibilityRespondsToUserInteraction: this.accessibilityRespondsToUserInteraction,
+            accessibilityShowsLargeContentViewer: this.accessibilityShowsLargeContentViewer,
+            accessibilityLargeContentTitle: this.accessibilityLargeContentTitle,
+            role: this.role,
+            'aria-label': this.ariaLabel,
+            'aria-labelledby': this.ariaLabelledBy,
+            'aria-live': this.ariaLive,
+            'aria-hidden': this.ariaHidden,
+            'aria-busy': this.ariaBusy,
+            'aria-checked': this.ariaChecked,
+            'aria-disabled': this.ariaDisabled,
+            'aria-expanded': this.ariaExpanded,
+            'aria-selected': this.ariaSelected,
+            'aria-modal': this.ariaModal,
+            'aria-valuemax': this.ariaValueMax,
+            'aria-valuemin': this.ariaValueMin,
+            'aria-valuenow': this.ariaValueNow,
+            'aria-valuetext': this.ariaValueText,
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: KeyboardAvoidingView, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: KeyboardAvoidingView, isStandalone: true, selector: "KeyboardAvoidingView", inputs: { behavior: "behavior", enabled: "enabled", keyboardVerticalOffset: "keyboardVerticalOffset", contentContainerStyle: "contentContainerStyle", style: "style", testID: "testID", nativeID: "nativeID", accessible: "accessible", accessibilityLabel: "accessibilityLabel", accessibilityHint: "accessibilityHint", accessibilityRole: "accessibilityRole", accessibilityState: "accessibilityState", accessibilityValue: "accessibilityValue", accessibilityActions: "accessibilityActions", accessibilityLabelledBy: "accessibilityLabelledBy", importantForAccessibility: "importantForAccessibility", accessibilityLiveRegion: "accessibilityLiveRegion", screenReaderFocusable: "screenReaderFocusable", accessibilityViewIsModal: "accessibilityViewIsModal", accessibilityElementsHidden: "accessibilityElementsHidden", accessibilityIgnoresInvertColors: "accessibilityIgnoresInvertColors", accessibilityLanguage: "accessibilityLanguage", accessibilityRespondsToUserInteraction: "accessibilityRespondsToUserInteraction", accessibilityShowsLargeContentViewer: "accessibilityShowsLargeContentViewer", accessibilityLargeContentTitle: "accessibilityLargeContentTitle", role: "role", ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledBy: ["aria-labelledby", "ariaLabelledBy"], ariaLive: ["aria-live", "ariaLive"], ariaHidden: ["aria-hidden", "ariaHidden"], ariaBusy: ["aria-busy", "ariaBusy"], ariaChecked: ["aria-checked", "ariaChecked"], ariaDisabled: ["aria-disabled", "ariaDisabled"], ariaExpanded: ["aria-expanded", "ariaExpanded"], ariaSelected: ["aria-selected", "ariaSelected"], ariaModal: ["aria-modal", "ariaModal"], ariaValueMax: ["aria-valuemax", "ariaValueMax"], ariaValueMin: ["aria-valuemin", "ariaValueMin"], ariaValueNow: ["aria-valuenow", "ariaValueNow"], ariaValueText: ["aria-valuetext", "ariaValueText"] }, outputs: { layout: "layout", accessibilityAction: "accessibilityAction", accessibilityTap: "accessibilityTap", magicTap: "magicTap", accessibilityEscape: "accessibilityEscape" }, ngImport: i0, template: `
+    <symbiote-view
+      [symbioteHostProps]="hostProps"
+      (accessibilityAction)="emit(accessibilityAction, $event)"
+      (accessibilityTap)="emit(accessibilityTap, $event)"
+      (magicTap)="emit(magicTap, $event)"
+      (accessibilityEscape)="emit(accessibilityEscape, $event)"
+      (layout)="handleLayout($event)"
+    >
+      @if (isNested) {
+        <symbiote-view [style]="innerStyle">
+          <ng-content></ng-content>
+        </symbiote-view>
+      } @else {
+        <ng-content></ng-content>
+      }
+    </symbiote-view>
+  `, isInline: true, dependencies: [{ kind: "component", type: ViewHost, selector: "symbiote-view, View" }, { kind: "directive", type: SymbioteHostPropsDirective, selector: "[symbioteHostProps]", inputs: ["symbioteHostProps"], exportAs: ["symbioteHost"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: KeyboardAvoidingView, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'KeyboardAvoidingView',
+                    standalone: true,
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    imports: [ViewHost, SymbioteHostPropsDirective],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    // The wrapper carries a11y + onLayout; 'position' ('nested') pushes the children in an inner
+                    // View by `bottom: inset`, the wrapper modes adjust the single wrapper directly. Only one @if
+                    // branch is instantiated, so each branch's <ng-content> projects the children unambiguously.
+                    template: `
+    <symbiote-view
+      [symbioteHostProps]="hostProps"
+      (accessibilityAction)="emit(accessibilityAction, $event)"
+      (accessibilityTap)="emit(accessibilityTap, $event)"
+      (magicTap)="emit(magicTap, $event)"
+      (accessibilityEscape)="emit(accessibilityEscape, $event)"
+      (layout)="handleLayout($event)"
+    >
+      @if (isNested) {
+        <symbiote-view [style]="innerStyle">
+          <ng-content></ng-content>
+        </symbiote-view>
+      } @else {
+        <ng-content></ng-content>
+      }
+    </symbiote-view>
+  `,
+                }]
+        }], propDecorators: { behavior: [{
+                type: Input
+            }], enabled: [{
+                type: Input
+            }], keyboardVerticalOffset: [{
+                type: Input
+            }], contentContainerStyle: [{
+                type: Input
+            }], style: [{
+                type: Input
+            }], layout: [{
+                type: Output
+            }], accessibilityAction: [{
+                type: Output
+            }], accessibilityTap: [{
+                type: Output
+            }], magicTap: [{
+                type: Output
+            }], accessibilityEscape: [{
+                type: Output
+            }], testID: [{
+                type: Input
+            }], nativeID: [{
+                type: Input
+            }], accessible: [{
+                type: Input
+            }], accessibilityLabel: [{
+                type: Input
+            }], accessibilityHint: [{
+                type: Input
+            }], accessibilityRole: [{
+                type: Input
+            }], accessibilityState: [{
+                type: Input
+            }], accessibilityValue: [{
+                type: Input
+            }], accessibilityActions: [{
+                type: Input
+            }], accessibilityLabelledBy: [{
+                type: Input
+            }], importantForAccessibility: [{
+                type: Input
+            }], accessibilityLiveRegion: [{
+                type: Input
+            }], screenReaderFocusable: [{
+                type: Input
+            }], accessibilityViewIsModal: [{
+                type: Input
+            }], accessibilityElementsHidden: [{
+                type: Input
+            }], accessibilityIgnoresInvertColors: [{
+                type: Input
+            }], accessibilityLanguage: [{
+                type: Input
+            }], accessibilityRespondsToUserInteraction: [{
+                type: Input
+            }], accessibilityShowsLargeContentViewer: [{
+                type: Input
+            }], accessibilityLargeContentTitle: [{
+                type: Input
+            }], role: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input,
+                args: ['aria-label']
+            }], ariaLabelledBy: [{
+                type: Input,
+                args: ['aria-labelledby']
+            }], ariaLive: [{
+                type: Input,
+                args: ['aria-live']
+            }], ariaHidden: [{
+                type: Input,
+                args: ['aria-hidden']
+            }], ariaBusy: [{
+                type: Input,
+                args: ['aria-busy']
+            }], ariaChecked: [{
+                type: Input,
+                args: ['aria-checked']
+            }], ariaDisabled: [{
+                type: Input,
+                args: ['aria-disabled']
+            }], ariaExpanded: [{
+                type: Input,
+                args: ['aria-expanded']
+            }], ariaSelected: [{
+                type: Input,
+                args: ['aria-selected']
+            }], ariaModal: [{
+                type: Input,
+                args: ['aria-modal']
+            }], ariaValueMax: [{
+                type: Input,
+                args: ['aria-valuemax']
+            }], ariaValueMin: [{
+                type: Input,
+                args: ['aria-valuemin']
+            }], ariaValueNow: [{
+                type: Input,
+                args: ['aria-valuenow']
+            }], ariaValueText: [{
+                type: Input,
+                args: ['aria-valuetext']
+            }] } });
+//# sourceMappingURL=keyboard-avoiding-view.js.map

package/build/angular/components/keyboard-avoiding-view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyboard-avoiding-view.js","sourceRoot":"","sources":["../../../src/components/keyboard-avoiding-view.ts"],"names":[],"mappings":"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"}

package/build/angular/components/modal.d.ts

@@ -0,0 +1,92 @@
+import { EventEmitter, type OnChanges, type OnInit, type SimpleChanges } from '@angular/core';
+import { type IAccessibilityProps, type IAccessibilityStateValue, type IAriaProps, type IModalAnimationType, type IModalOrientation, type IModalOrientationChangeEvent, type IModalPresentationStyle } from '@symbiote-native/components';
+import { type IStyleProp, type ISymbioteEvent, type IViewStyle } from '@symbiote-native/engine';
+import * as i0 from "@angular/core";
+export type { IModalAnimationType, IModalPresentationStyle, IModalOrientation, IModalOrientationChangeEvent, } from '@symbiote-native/components';
+export interface IAngularModalProps extends IAccessibilityProps, IAriaProps {
+    visible?: boolean;
+    transparent?: boolean;
+    backdropColor?: string;
+    animationType?: IModalAnimationType;
+    presentationStyle?: IModalPresentationStyle;
+    supportedOrientations?: ReadonlyArray<IModalOrientation>;
+    hardwareAccelerated?: boolean;
+    statusBarTranslucent?: boolean;
+    navigationBarTranslucent?: boolean;
+    allowSwipeDismissal?: boolean;
+    onShow?: () => void;
+    onDismiss?: () => void;
+    onRequestClose?: () => void;
+    onOrientationChange?: (event: IModalOrientationChangeEvent) => void;
+    style?: IStyleProp<IViewStyle>;
+}
+export type IAngularModalInputs = Omit<IAngularModalProps, 'onShow' | 'onDismiss' | 'onRequestClose' | 'onOrientationChange' | 'onAccessibilityAction' | 'onAccessibilityTap' | 'onMagicTap' | 'onAccessibilityEscape'>;
+export declare class Modal implements IAngularModalInputs, OnInit, OnChanges {
+    readonly show: EventEmitter<void>;
+    readonly dismiss: EventEmitter<void>;
+    readonly requestClose: EventEmitter<void>;
+    readonly orientationChange: EventEmitter<IModalOrientationChangeEvent>;
+    readonly accessibilityAction: EventEmitter<ISymbioteEvent>;
+    readonly accessibilityTap: EventEmitter<ISymbioteEvent>;
+    readonly magicTap: EventEmitter<ISymbioteEvent>;
+    readonly accessibilityEscape: EventEmitter<ISymbioteEvent>;
+    visible?: boolean;
+    transparent?: boolean;
+    backdropColor?: string;
+    animationType?: IModalAnimationType;
+    presentationStyle?: IModalPresentationStyle;
+    supportedOrientations?: ReadonlyArray<IModalOrientation>;
+    hardwareAccelerated?: boolean;
+    statusBarTranslucent?: boolean;
+    navigationBarTranslucent?: boolean;
+    allowSwipeDismissal?: boolean;
+    style?: IStyleProp<IViewStyle>;
+    testID?: string;
+    accessible?: boolean;
+    accessibilityLabel?: string;
+    accessibilityHint?: string;
+    accessibilityRole?: IAccessibilityProps['accessibilityRole'];
+    accessibilityState?: IAccessibilityStateValue;
+    accessibilityValue?: IAccessibilityProps['accessibilityValue'];
+    accessibilityActions?: IAccessibilityProps['accessibilityActions'];
+    accessibilityLabelledBy?: string | string[];
+    importantForAccessibility?: IAccessibilityProps['importantForAccessibility'];
+    accessibilityLiveRegion?: IAccessibilityProps['accessibilityLiveRegion'];
+    screenReaderFocusable?: boolean;
+    accessibilityViewIsModal?: boolean;
+    accessibilityElementsHidden?: boolean;
+    accessibilityIgnoresInvertColors?: boolean;
+    accessibilityLanguage?: string;
+    accessibilityRespondsToUserInteraction?: boolean;
+    accessibilityShowsLargeContentViewer?: boolean;
+    accessibilityLargeContentTitle?: string;
+    role?: IAriaProps['role'];
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
+    ariaLive?: IAriaProps['aria-live'];
+    ariaHidden?: boolean;
+    ariaBusy?: boolean;
+    ariaChecked?: boolean | 'mixed';
+    ariaDisabled?: boolean;
+    ariaExpanded?: boolean;
+    ariaSelected?: boolean;
+    ariaModal?: boolean;
+    ariaValueMax?: number;
+    ariaValueMin?: number;
+    ariaValueNow?: number;
+    ariaValueText?: string;
+    private state;
+    private readonly changeDetector;
+    private readonly elementRef;
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    get shouldRender(): boolean;
+    private get descriptor();
+    get hostProps(): Record<string, unknown>;
+    get containerStyle(): unknown;
+    emit(emitter: EventEmitter<ISymbioteEvent>, event: unknown): void;
+    emitOrientation(event: unknown): void;
+    private accessibilityInputs;
+    static ɵfac: i0.ɵɵFactoryDeclaration<Modal, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<Modal, "Modal", never, { "visible": { "alias": "visible"; "required": false; }; "transparent": { "alias": "transparent"; "required": false; }; "backdropColor": { "alias": "backdropColor"; "required": false; }; "animationType": { "alias": "animationType"; "required": false; }; "presentationStyle": { "alias": "presentationStyle"; "required": false; }; "supportedOrientations": { "alias": "supportedOrientations"; "required": false; }; "hardwareAccelerated": { "alias": "hardwareAccelerated"; "required": false; }; "statusBarTranslucent": { "alias": "statusBarTranslucent"; "required": false; }; "navigationBarTranslucent": { "alias": "navigationBarTranslucent"; "required": false; }; "allowSwipeDismissal": { "alias": "allowSwipeDismissal"; "required": false; }; "style": { "alias": "style"; "required": false; }; "testID": { "alias": "testID"; "required": false; }; "accessible": { "alias": "accessible"; "required": false; }; "accessibilityLabel": { "alias": "accessibilityLabel"; "required": false; }; "accessibilityHint": { "alias": "accessibilityHint"; "required": false; }; "accessibilityRole": { "alias": "accessibilityRole"; "required": false; }; "accessibilityState": { "alias": "accessibilityState"; "required": false; }; "accessibilityValue": { "alias": "accessibilityValue"; "required": false; }; "accessibilityActions": { "alias": "accessibilityActions"; "required": false; }; "accessibilityLabelledBy": { "alias": "accessibilityLabelledBy"; "required": false; }; "importantForAccessibility": { "alias": "importantForAccessibility"; "required": false; }; "accessibilityLiveRegion": { "alias": "accessibilityLiveRegion"; "required": false; }; "screenReaderFocusable": { "alias": "screenReaderFocusable"; "required": false; }; "accessibilityViewIsModal": { "alias": "accessibilityViewIsModal"; "required": false; }; "accessibilityElementsHidden": { "alias": "accessibilityElementsHidden"; "required": false; }; "accessibilityIgnoresInvertColors": { "alias": "accessibilityIgnoresInvertColors"; "required": false; }; "accessibilityLanguage": { "alias": "accessibilityLanguage"; "required": false; }; "accessibilityRespondsToUserInteraction": { "alias": "accessibilityRespondsToUserInteraction"; "required": false; }; "accessibilityShowsLargeContentViewer": { "alias": "accessibilityShowsLargeContentViewer"; "required": false; }; "accessibilityLargeContentTitle": { "alias": "accessibilityLargeContentTitle"; "required": false; }; "role": { "alias": "role"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; "ariaLabelledBy": { "alias": "aria-labelledby"; "required": false; }; "ariaLive": { "alias": "aria-live"; "required": false; }; "ariaHidden": { "alias": "aria-hidden"; "required": false; }; "ariaBusy": { "alias": "aria-busy"; "required": false; }; "ariaChecked": { "alias": "aria-checked"; "required": false; }; "ariaDisabled": { "alias": "aria-disabled"; "required": false; }; "ariaExpanded": { "alias": "aria-expanded"; "required": false; }; "ariaSelected": { "alias": "aria-selected"; "required": false; }; "ariaModal": { "alias": "aria-modal"; "required": false; }; "ariaValueMax": { "alias": "aria-valuemax"; "required": false; }; "ariaValueMin": { "alias": "aria-valuemin"; "required": false; }; "ariaValueNow": { "alias": "aria-valuenow"; "required": false; }; "ariaValueText": { "alias": "aria-valuetext"; "required": false; }; }, { "show": "show"; "dismiss": "dismiss"; "requestClose": "requestClose"; "orientationChange": "orientationChange"; "accessibilityAction": "accessibilityAction"; "accessibilityTap": "accessibilityTap"; "magicTap": "magicTap"; "accessibilityEscape": "accessibilityEscape"; }, never, ["*"], true, never>;
+}