@symbiote-native/angular 0.7.0 → 1.0.0

package/src/components/activity-indicator/index.android.ts

@@ -7,12 +7,17 @@ export type { IActivityIndicatorProps } from './shared';
 @Component({
   selector: 'ActivityIndicator',
   standalone: true,
-  hostDirectives: [{ directive: SymbioteStyleInputDirective, inputs: ['style'] }],
+  hostDirectives: [
+    { directive: SymbioteStyleInputDirective, inputs: ['style'] },
+  ],
   imports: [DescriptorOutlet],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `<symbiote-descriptor-outlet [node]="descriptor" />`,
 })
 export class ActivityIndicator extends ActivityIndicatorBase {
   protected readonly defaultColor = null;
-  protected override readonly nativeExtras = { styleAttr: 'Normal', indeterminate: true };
+  protected override readonly nativeExtras = {
+    styleAttr: 'Normal',
+    indeterminate: true,
+  };
 }

package/src/components/activity-indicator/index.ios.ts

@@ -9,7 +9,9 @@ const IOS_DEFAULT_COLOR = '#999999';
 @Component({
   selector: 'ActivityIndicator',
   standalone: true,
-  hostDirectives: [{ directive: SymbioteStyleInputDirective, inputs: ['style'] }],
+  hostDirectives: [
+    { directive: SymbioteStyleInputDirective, inputs: ['style'] },
+  ],
   imports: [DescriptorOutlet],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `<symbiote-descriptor-outlet [node]="descriptor" />`,

package/src/components/activity-indicator/shared.ts

@@ -1,4 +1,11 @@
-import { Directive, ElementRef, EventEmitter, inject, Input, Output } from '@angular/core';
+import {
+  Directive,
+  ElementRef,
+  EventEmitter,
+  inject,
+  Input,
+  Output,
+} from '@angular/core';
 import {
   renderActivityIndicator,
   resolveAccessibilityProps,
@@ -13,7 +20,10 @@ import type { ISymbioteEvent } from '@symbiote-native/engine';
 import type { IDescriptor } from '@symbiote-native/components';
 import { anchorHostStyle } from '../../primitives';
 
-export type { IActivityIndicatorProps, IActivityIndicatorSize } from '@symbiote-native/components';
+export type {
+  IActivityIndicatorProps,
+  IActivityIndicatorSize,
+} from '@symbiote-native/components';
 
 // Narrows anchorHostStyle's `unknown` (it reads an opaque engine prop bag) to the shape
 // IActivityIndicatorProps['style'] actually declares, the same runtime guard image/shared.ts's
@@ -61,8 +71,10 @@ export abstract class ActivityIndicatorBase implements IActivityIndicatorInputs
   @Input() accessibilityValue?: IAccessibilityProps['accessibilityValue'];
   @Input() accessibilityActions?: IAccessibilityProps['accessibilityActions'];
   @Input() accessibilityLabelledBy?: string | string[];
-  @Input() importantForAccessibility?: IAccessibilityProps['importantForAccessibility'];
-  @Input() accessibilityLiveRegion?: IAccessibilityProps['accessibilityLiveRegion'];
+  @Input()
+  importantForAccessibility?: IAccessibilityProps['importantForAccessibility'];
+  @Input()
+  accessibilityLiveRegion?: IAccessibilityProps['accessibilityLiveRegion'];
   @Input() screenReaderFocusable?: boolean;
   @Input() accessibilityViewIsModal?: boolean;
   @Input() accessibilityElementsHidden?: boolean;
@@ -107,14 +119,18 @@ export abstract class ActivityIndicatorBase implements IActivityIndicatorInputs
   // closure even when nothing changed — every CD pass would read as "props changed" and force a
   // real Fabric re-clone cascading up every ancestor to the root (the same hazard
   // AnimatedComponentBase.reconcile() and ScrollViewStickyHeader's onHostLayout guard against).
-  private readonly onLayoutHandler = (event: ISymbioteEvent): void => this.layout.emit(event);
-  private readonly onAccessibilityActionHandler = (event: ISymbioteEvent): void =>
-    this.accessibilityAction.emit(event);
+  private readonly onLayoutHandler = (event: ISymbioteEvent): void =>
+    this.layout.emit(event);
+  private readonly onAccessibilityActionHandler = (
+    event: ISymbioteEvent,
+  ): void => this.accessibilityAction.emit(event);
   private readonly onAccessibilityTapHandler = (event: ISymbioteEvent): void =>
     this.accessibilityTap.emit(event);
-  private readonly onMagicTapHandler = (event: ISymbioteEvent): void => this.magicTap.emit(event);
-  private readonly onAccessibilityEscapeHandler = (event: ISymbioteEvent): void =>
-    this.accessibilityEscape.emit(event);
+  private readonly onMagicTapHandler = (event: ISymbioteEvent): void =>
+    this.magicTap.emit(event);
+  private readonly onAccessibilityEscapeHandler = (
+    event: ISymbioteEvent,
+  ): void => this.accessibilityEscape.emit(event);
 
   get descriptor(): IDescriptor {
     const props = resolveAccessibilityProps<IActivityIndicatorProps>({
@@ -141,8 +157,10 @@ export abstract class ActivityIndicatorBase implements IActivityIndicatorInputs
       accessibilityElementsHidden: this.accessibilityElementsHidden,
       accessibilityIgnoresInvertColors: this.accessibilityIgnoresInvertColors,
       accessibilityLanguage: this.accessibilityLanguage,
-      accessibilityRespondsToUserInteraction: this.accessibilityRespondsToUserInteraction,
-      accessibilityShowsLargeContentViewer: this.accessibilityShowsLargeContentViewer,
+      accessibilityRespondsToUserInteraction:
+        this.accessibilityRespondsToUserInteraction,
+      accessibilityShowsLargeContentViewer:
+        this.accessibilityShowsLargeContentViewer,
       accessibilityLargeContentTitle: this.accessibilityLargeContentTitle,
       onAccessibilityAction: this.emitterHandler(
         this.accessibilityAction,
@@ -174,7 +192,8 @@ export abstract class ActivityIndicatorBase implements IActivityIndicatorInputs
       'aria-valuetext': this.ariaValueText,
     });
 
-    const { animating, color, hidesWhenStopped, size, style, ...passthrough } = props;
+    const { animating, color, hidesWhenStopped, size, style, ...passthrough } =
+      props;
     return renderActivityIndicator(
       {
         animating: animating !== false,

package/src/components/button.ts

@@ -33,9 +33,21 @@ import {
   type IAriaProps,
   type IButtonProps as ICoreButtonProps,
 } from '@symbiote-native/components';
-import type { ISymbioteEvent, ITextStyle, IStyleProp, IViewStyle } from '@symbiote-native/engine';
+import type {
+  ISymbioteEvent,
+  ITextStyle,
+  IStyleProp,
+  IViewStyle,
+} from '@symbiote-native/engine';
 import { anchorStyleProp, TextHost } from '../primitives';
 import { TouchableOpacity } from './touchable';
+import {
+  gateWanted,
+  injectGateDemandAbove,
+  provideGateDemand,
+  type IGateDemand,
+  type IGatedAccessibilityEvent,
+} from '../gate-demand';
 
 export type IButtonProps = Omit<
   ICoreButtonProps,
@@ -49,6 +61,7 @@ export type IButtonProps = Omit<
 @Component({
   selector: 'Button',
   standalone: true,
+  viewProviders: [provideGateDemand(() => Button)],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   imports: [TouchableOpacity, TextHost],
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -81,8 +94,12 @@ export type IButtonProps = Omit<
       [accessibilityElementsHidden]="accessibilityElementsHidden"
       [accessibilityIgnoresInvertColors]="accessibilityIgnoresInvertColors"
       [accessibilityLanguage]="accessibilityLanguage"
-      [accessibilityRespondsToUserInteraction]="accessibilityRespondsToUserInteraction"
-      [accessibilityShowsLargeContentViewer]="accessibilityShowsLargeContentViewer"
+      [accessibilityRespondsToUserInteraction]="
+        accessibilityRespondsToUserInteraction
+      "
+      [accessibilityShowsLargeContentViewer]="
+        accessibilityShowsLargeContentViewer
+      "
       [accessibilityLargeContentTitle]="accessibilityLargeContentTitle"
       (accessibilityAction)="accessibilityAction.emit($event)"
       (accessibilityTap)="accessibilityTap.emit($event)"
@@ -121,6 +138,15 @@ export class Button implements IButtonProps, DoCheck {
   @Output() readonly magicTap = new EventEmitter<ISymbioteEvent>();
   @Output() readonly accessibilityEscape = new EventEmitter<ISymbioteEvent>();
 
+  // This wrapper binds the four gated accessibility events on the component it renders, which
+  // Angular forces to be unconditional and which would light that component's gates on every
+  // instance. It answers for them instead — see `gate-demand.ts`.
+  private readonly gateDemandAbove = injectGateDemandAbove();
+
+  wantsGate(name: IGatedAccessibilityEvent): boolean {
+    return gateWanted(this.gateDemandAbove, name, this[name]);
+  }
+
   // Button-owned props: title is the Text child, color/disabled fold into the label style, and
   // touchSoundDisabled re-maps onto TouchableOpacity.
   @Input() title = '';
@@ -149,8 +175,10 @@ export class Button implements IButtonProps, DoCheck {
   @Input() accessibilityValue?: IAccessibilityProps['accessibilityValue'];
   @Input() accessibilityActions?: IAccessibilityProps['accessibilityActions'];
   @Input() accessibilityLabelledBy?: string | string[];
-  @Input() importantForAccessibility?: IAccessibilityProps['importantForAccessibility'];
-  @Input() accessibilityLiveRegion?: IAccessibilityProps['accessibilityLiveRegion'];
+  @Input()
+  importantForAccessibility?: IAccessibilityProps['importantForAccessibility'];
+  @Input()
+  accessibilityLiveRegion?: IAccessibilityProps['accessibilityLiveRegion'];
   @Input() screenReaderFocusable?: boolean;
   @Input() accessibilityViewIsModal?: boolean;
   @Input() accessibilityElementsHidden?: boolean;
@@ -195,7 +223,9 @@ export class Button implements IButtonProps, DoCheck {
   // ngDoCheck runs during the PARENT's refresh even when this view is skipped; the signal write is
   // what marks this view. The anchor returns the same props.style reference until a commit changes
   // it, so Object.is makes an unchanged poll free.
-  private readonly anchorStyleValue = signal<IStyleProp<IViewStyle> | undefined>(undefined);
+  private readonly anchorStyleValue = signal<
+    IStyleProp<IViewStyle> | undefined
+  >(undefined);
 
   ngDoCheck(): void {
     this.anchorStyleValue.set(anchorStyleProp<IViewStyle>(this.elementRef));

package/src/components/flat-list/index.ts

@@ -80,14 +80,20 @@ import {
   type IVListSeparatorContext,
 } from '../virtualized-list';
 import { VListOutletDirective } from '../virtualized-list/directives';
-import { stableAnchorStyle, SymbioteStyleInputDirective, ViewHost } from '../../primitives';
+import {
+  stableAnchorStyle,
+  SymbioteStyleInputDirective,
+  ViewHost,
+} from '../../primitives';
 
 function isRecord(value: unknown): value is Record<string, unknown> {
   return typeof value === 'object' && value !== null;
 }
 function isRow<ItemT>(value: unknown): value is IRow<ItemT> {
   return (
-    isRecord(value) && Array.isArray(value['items']) && typeof value['startIndex'] === 'number'
+    isRecord(value) &&
+    Array.isArray(value['items']) &&
+    typeof value['startIndex'] === 'number'
   );
 }
 function isSeparators(value: unknown): value is ISeparators {
@@ -129,7 +135,10 @@ export {
   VListItemDirective,
   VListSeparatorDirective,
 } from '../virtualized-list';
-export type { IVListItemContext, IVListSeparatorContext } from '../virtualized-list';
+export type {
+  IVListItemContext,
+  IVListSeparatorContext,
+} from '../virtualized-list';
 
 // FlatList's imperative handle is exactly VirtualizedList's.
 export type IFlatListHandle = IVirtualizedListHandle;
@@ -164,7 +173,9 @@ export type IFlatListInputs<ItemT> = Omit<
 @Component({
   selector: 'FlatList',
   standalone: true,
-  hostDirectives: [{ directive: SymbioteStyleInputDirective, inputs: ['style'] }],
+  hostDirectives: [
+    { directive: SymbioteStyleInputDirective, inputs: ['style'] },
+  ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   imports: [
     VirtualizedList,
@@ -254,7 +265,9 @@ export type IFlatListInputs<ItemT> = Omit<
           >
             <ng-container
               [vListOutlet]="separatorDir.templateRef"
-              [vListOutletContext]="rowSeparatorContext(highlighted, leadingItem, trailingItem)"
+              [vListOutletContext]="
+                rowSeparatorContext(highlighted, leadingItem, trailingItem)
+              "
             ></ng-container>
           </ng-template>
         }
@@ -299,7 +312,12 @@ export type IFlatListInputs<ItemT> = Omit<
         [style]="resolvedStyle"
         [contentContainerStyle]="contentContainerStyle"
       >
-        <ng-template vListItem let-item let-index="index" let-separators="separators">
+        <ng-template
+          vListItem
+          let-item
+          let-index="index"
+          let-separators="separators"
+        >
           <ng-container
             [vListOutlet]="itemDir?.templateRef"
             [vListOutletContext]="{ $implicit: item, index, separators }"
@@ -329,7 +347,9 @@ export type IFlatListInputs<ItemT> = Omit<
           >
             <ng-container
               [vListOutlet]="separatorDir.templateRef"
-              [vListOutletContext]="itemSeparatorContext(highlighted, leadingItem, trailingItem)"
+              [vListOutletContext]="
+                itemSeparatorContext(highlighted, leadingItem, trailingItem)
+              "
             ></ng-container>
           </ng-template>
         }
@@ -343,10 +363,16 @@ export class FlatList<ItemT = unknown>
   // The list's edge/viewability/failure events as real Angular events: `(endReached)="…"`, not
   // `[onEndReached]="…"` — re-emitted straight from the inner VirtualizedList's own @Output()s (see
   // the template's `(endReached)="endReached.emit($event)"` style forwarding above).
-  @Output() readonly endReached = new EventEmitter<{ distanceFromEnd: number }>();
-  @Output() readonly startReached = new EventEmitter<{ distanceFromStart: number }>();
+  @Output() readonly endReached = new EventEmitter<{
+    distanceFromEnd: number;
+  }>();
+  @Output() readonly startReached = new EventEmitter<{
+    distanceFromStart: number;
+  }>();
   @Output() readonly refresh = new EventEmitter<void>();
-  @Output() readonly viewableItemsChanged = new EventEmitter<IViewableItemsChangedInfo<ItemT>>();
+  @Output() readonly viewableItemsChanged = new EventEmitter<
+    IViewableItemsChangedInfo<ItemT>
+  >();
   @Output() readonly scrollToIndexFailed = new EventEmitter<{
     index: number;
     highestMeasuredFrameIndex: number;
@@ -367,8 +393,10 @@ export class FlatList<ItemT = unknown>
   @Input() onStartReachedThreshold?: number;
   @Input() refreshing?: boolean | null;
   @Input() progressViewOffset?: number;
-  @Input() viewabilityConfig?: IVirtualizedListProps<ItemT>['viewabilityConfig'];
-  @Input() viewabilityConfigCallbackPairs?: IViewabilityConfigCallbackPair<ItemT>[];
+  @Input()
+  viewabilityConfig?: IVirtualizedListProps<ItemT>['viewabilityConfig'];
+  @Input()
+  viewabilityConfigCallbackPairs?: IViewabilityConfigCallbackPair<ItemT>[];
   @Input() initialNumToRender?: number;
   @Input() initialScrollIndex?: number;
   @Input() maxToRenderPerBatch?: number;
@@ -380,10 +408,13 @@ export class FlatList<ItemT = unknown>
     autoscrollToTopThreshold?: number;
   };
   @Input() onScroll?: IVirtualizedListProps<ItemT>['onScroll'];
-  @Input() onScrollBeginDrag?: IVirtualizedListProps<ItemT>['onScrollBeginDrag'];
+  @Input()
+  onScrollBeginDrag?: IVirtualizedListProps<ItemT>['onScrollBeginDrag'];
   @Input() onScrollEndDrag?: IVirtualizedListProps<ItemT>['onScrollEndDrag'];
-  @Input() onMomentumScrollBegin?: IVirtualizedListProps<ItemT>['onMomentumScrollBegin'];
-  @Input() onMomentumScrollEnd?: IVirtualizedListProps<ItemT>['onMomentumScrollEnd'];
+  @Input()
+  onMomentumScrollBegin?: IVirtualizedListProps<ItemT>['onMomentumScrollBegin'];
+  @Input()
+  onMomentumScrollEnd?: IVirtualizedListProps<ItemT>['onMomentumScrollEnd'];
   @Input() scrollEventThrottle?: number;
   @Input() keyboardShouldPersistTaps?: boolean | 'always' | 'never' | 'handled';
   @Input() keyboardDismissMode?: 'none' | 'on-drag' | 'interactive';
@@ -397,7 +428,8 @@ export class FlatList<ItemT = unknown>
   @ContentChild(VListHeaderDirective) headerDir?: VListHeaderDirective;
   @ContentChild(VListFooterDirective) footerDir?: VListFooterDirective;
   @ContentChild(VListEmptyDirective) emptyDir?: VListEmptyDirective;
-  @ContentChild(VListSeparatorDirective) separatorDir?: VListSeparatorDirective<ItemT>;
+  @ContentChild(VListSeparatorDirective)
+  separatorDir?: VListSeparatorDirective<ItemT>;
 
   // The composed inner list (whichever numColumns branch rendered). Its instance IS the
   // IVirtualizedListHandle, so FlatList's handle delegates straight to it.
@@ -433,7 +465,11 @@ export class FlatList<ItemT = unknown>
   // across ticks that changed nothing - a fresh object every tick defeats VirtualizedList's own
   // dedup gate and free-runs CD (see stableAnchorStyle's doc comment).
   ngDoCheck(): void {
-    this.resolvedStyle = stableAnchorStyle(this.elementRef, this.style, this.resolvedStyle);
+    this.resolvedStyle = stableAnchorStyle(
+      this.elementRef,
+      this.style,
+      this.resolvedStyle,
+    );
   }
 
   ngOnChanges(changes: SimpleChanges): void {
@@ -444,11 +480,18 @@ export class FlatList<ItemT = unknown>
         typeof this.columnWrapperStyle === 'string'
           ? resolveClassName(this.columnWrapperStyle)
           : this.columnWrapperStyle;
-      this.rowStyle = flattenStyle([{ flexDirection: 'row' }, resolvedColumnWrapperStyle]);
+      this.rowStyle = flattenStyle([
+        { flexDirection: 'row' },
+        resolvedColumnWrapperStyle,
+      ]);
     }
     if (changes['data'] !== undefined || changes['numColumns'] !== undefined) {
-      this.rows = this.isMultiColumn ? chunkIntoRows(this.data, this.columns) : [];
-      dlog(`Angular FlatList over ${this.data?.length ?? 0} items, ${this.columns} column(s)`);
+      this.rows = this.isMultiColumn
+        ? chunkIntoRows(this.data, this.columns)
+        : [];
+      dlog(
+        `Angular FlatList over ${this.data?.length ?? 0} items, ${this.columns} column(s)`,
+      );
     }
     if (
       changes['viewabilityConfigCallbackPairs'] !== undefined ||
@@ -469,15 +512,24 @@ export class FlatList<ItemT = unknown>
 
   // Viewability over rows expands back to per-item tokens, so the caller sees item-level
   // visibility, not row-level (shared expandRowViewability), matching Vue.
-  rowViewableItemsChanged = (info: IViewableItemsChangedInfo<IRow<ItemT>>): void => {
-    this.viewableItemsChanged.emit(expandRowViewability(info, this.keyExtractor));
+  rowViewableItemsChanged = (
+    info: IViewableItemsChangedInfo<IRow<ItemT>>,
+  ): void => {
+    this.viewableItemsChanged.emit(
+      expandRowViewability(info, this.keyExtractor),
+    );
   };
 
-  private buildRowViewabilityPairs(): IViewabilityConfigCallbackPair<IRow<ItemT>>[] | undefined {
+  private buildRowViewabilityPairs():
+    IViewabilityConfigCallbackPair<IRow<ItemT>>[] | undefined {
     return this.viewabilityConfigCallbackPairs?.map(pair => ({
       viewabilityConfig: pair.viewabilityConfig,
-      onViewableItemsChanged: (rowInfo: IViewableItemsChangedInfo<IRow<ItemT>>): void => {
-        pair.onViewableItemsChanged?.(expandRowViewability(rowInfo, this.keyExtractor));
+      onViewableItemsChanged: (
+        rowInfo: IViewableItemsChangedInfo<IRow<ItemT>>,
+      ): void => {
+        pair.onViewableItemsChanged?.(
+          expandRowViewability(rowInfo, this.keyExtractor),
+        );
       },
     }));
   }
@@ -494,7 +546,9 @@ export class FlatList<ItemT = unknown>
     const handle = isSeparators(separators) ? separators : NOOP_SEPARATORS;
     return row.items.map((item, column) => {
       const index = row.startIndex + column;
-      const key = this.keyExtractor ? this.keyExtractor(item, index) : String(index);
+      const key = this.keyExtractor
+        ? this.keyExtractor(item, index)
+        : String(index);
       return { key, context: { $implicit: item, index, separators: handle } };
     });
   }
@@ -511,8 +565,12 @@ export class FlatList<ItemT = unknown>
     return {
       $implicit: isHighlighted,
       highlighted: isHighlighted,
-      leadingItem: isRow<ItemT>(leadingRow) ? lastItemOfRow(leadingRow) : undefined,
-      trailingItem: isRow<ItemT>(trailingRow) ? firstItemOfRow(trailingRow) : undefined,
+      leadingItem: isRow<ItemT>(leadingRow)
+        ? lastItemOfRow(leadingRow)
+        : undefined,
+      trailingItem: isRow<ItemT>(trailingRow)
+        ? firstItemOfRow(trailingRow)
+        : undefined,
     };
   }
 
@@ -545,7 +603,11 @@ export class FlatList<ItemT = unknown>
   }): void {
     this.listRef?.scrollToIndex(params);
   }
-  scrollToItem(params: { item: unknown; animated?: boolean; viewPosition?: number }): void {
+  scrollToItem(params: {
+    item: unknown;
+    animated?: boolean;
+    viewPosition?: number;
+  }): void {
     this.listRef?.scrollToItem(params);
   }
   scrollToEnd(params?: { animated?: boolean }): void {

package/src/components/image/index.android.ts

@@ -13,7 +13,12 @@ import {
   SymbioteHostPropsDirective,
   SymbioteStyleInputDirective,
 } from '../../primitives';
-import { IMAGE_INPUTS, IMAGE_OUTPUTS, ImageBase, resolveImageProps } from './shared';
+import {
+  IMAGE_INPUTS,
+  IMAGE_OUTPUTS,
+  ImageBase,
+  resolveImageProps,
+} from './shared';
 export { setImageSourceResolver } from './shared';
 export type {
   IImageProps,
@@ -27,7 +32,9 @@ export type {
 @Component({
   selector: 'Image',
   standalone: true,
-  hostDirectives: [{ directive: SymbioteStyleInputDirective, inputs: ['style'] }],
+  hostDirectives: [
+    { directive: SymbioteStyleInputDirective, inputs: ['style'] },
+  ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   imports: [ImageHost, SymbioteHostPropsDirective],
   inputs: IMAGE_INPUTS,
@@ -35,10 +42,6 @@ export type {
   template: `
     <symbiote-image
       [symbioteHostProps]="imageProps()"
-      (accessibilityAction)="handleAccessibilityAction($event)"
-      (accessibilityTap)="handleAccessibilityTap($event)"
-      (magicTap)="handleMagicTap($event)"
-      (accessibilityEscape)="handleAccessibilityEscape($event)"
       (loadStart)="handleLoadStart($event)"
       (load)="handleLoad($event)"
       (loadEnd)="handleLoadEnd($event)"

package/src/components/image/index.ios.ts

@@ -13,7 +13,12 @@ import {
   SymbioteHostPropsDirective,
   SymbioteStyleInputDirective,
 } from '../../primitives';
-import { IMAGE_INPUTS, IMAGE_OUTPUTS, ImageBase, resolveImageProps } from './shared';
+import {
+  IMAGE_INPUTS,
+  IMAGE_OUTPUTS,
+  ImageBase,
+  resolveImageProps,
+} from './shared';
 export { setImageSourceResolver } from './shared';
 export type {
   IImageProps,
@@ -27,7 +32,9 @@ export type {
 @Component({
   selector: 'Image',
   standalone: true,
-  hostDirectives: [{ directive: SymbioteStyleInputDirective, inputs: ['style'] }],
+  hostDirectives: [
+    { directive: SymbioteStyleInputDirective, inputs: ['style'] },
+  ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   imports: [ImageHost, SymbioteHostPropsDirective],
   inputs: IMAGE_INPUTS,
@@ -35,10 +42,6 @@ export type {
   template: `
     <symbiote-image
       [symbioteHostProps]="imageProps()"
-      (accessibilityAction)="handleAccessibilityAction($event)"
-      (accessibilityTap)="handleAccessibilityTap($event)"
-      (magicTap)="handleMagicTap($event)"
-      (accessibilityEscape)="handleAccessibilityEscape($event)"
       (loadStart)="handleLoadStart($event)"
       (load)="handleLoad($event)"
       (loadEnd)="handleLoadEnd($event)"