@ng-native/expo 0.5.0 → 0.7.0

package/dist/expo-ui-components.js

@@ -23,9 +23,12 @@
  * Still register the names with `registerExpoUiViews`: the component types the element, the
  * registration is what makes it commit as the SwiftUI or Compose view.
  */
-import { Component, DestroyRef, forwardRef, ElementRef, booleanAttribute, computed, inject, input, model, output, signal, } from '@angular/core';
-import { HostEngine, keepNativeView, nativePlatform, } from '@ng-native/fabric';
+import { Component, DestroyRef, forwardRef, ElementRef, InjectionToken, Injector, afterNextRender, booleanAttribute, computed, contentChildren, effect, inject, input, linkedSignal, model, output, signal, untracked, viewChild, } from '@angular/core';
+import { Engine, HostEngine, keepNativeView, nativePlatform, } from '@ng-native/fabric';
+import { optional } from "./native.js";
 import { optionalBoolean, optionalNumber } from "./transforms.js";
+import { UiBottomSheetContent } from "./ui-bottom-sheet-content.js";
+import { UiBottomSheetView } from "./ui-bottom-sheet-view.js";
 import * as i0 from "@angular/core";
 /**
  * Says the component's host is the `@expo/ui` view its selector is registered as. A component of
@@ -165,7 +168,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
         }], propDecorators: { modifiers: [{ type: i0.Input, args: [{ isSignal: true, alias: "modifiers", required: false }] }] } });
 /**
  * A SwiftUI `Button`, as a menu item or on its own, or Compose's on Android, which draws `label` as
- * text inside it. `systemImage` and `role` are SwiftUI's alone.
+ * text inside it. `systemImage` and `role` are SwiftUI's alone. A `close` button with no label and
+ * no content is the system's own close button, from iOS 26.
  */
 export class UiButton {
     nativeView = nativeView();
@@ -1194,4 +1198,465 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
                     host: { '[title]': 'title()', '[modifiers]': 'modifiers()' },
                 }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], modifiers: [{ type: i0.Input, args: [{ isSignal: true, alias: "modifiers", required: false }] }] } });
+/**
+ * A SwiftUI `Group`, iOS only: its children as they are, with no layout of its own. What it is for
+ * is `modifiers` that belong to several views at once, or to content that takes none itself, as a
+ * sheet's presentation modifiers go on a group around a `ui-view-host`.
+ */
+export class UiGroup {
+    nativeView = nativeView();
+    modifiers = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "modifiers" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.0", type: UiGroup, isStandalone: true, selector: "ui-group", inputs: { modifiers: { classPropertyName: "modifiers", publicName: "modifiers", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "modifiers": "modifiers()" } }, ngImport: i0, template: '<ng-content />', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiGroup, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-group',
+                    template: '<ng-content />',
+                    host: { '[modifiers]': 'modifiers()' },
+                }]
+        }], propDecorators: { modifiers: [{ type: i0.Input, args: [{ isSignal: true, alias: "modifiers", required: false }] }] } });
+/**
+ * A SwiftUI `NavigationStack`, iOS only: the bar a `ui-toolbar` inside it puts its items in, and
+ * that a `navigationTitle` modifier on its content titles.
+ */
+export class UiNavigationStack {
+    nativeView = nativeView();
+    modifiers = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "modifiers" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiNavigationStack, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.0", type: UiNavigationStack, isStandalone: true, selector: "ui-navigation-stack", inputs: { modifiers: { classPropertyName: "modifiers", publicName: "modifiers", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "modifiers": "modifiers()" } }, ngImport: i0, template: '<ng-content />', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiNavigationStack, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-navigation-stack',
+                    template: '<ng-content />',
+                    host: { '[modifiers]': 'modifiers()' },
+                }]
+        }], propDecorators: { modifiers: [{ type: i0.Input, args: [{ isSignal: true, alias: "modifiers", required: false }] }] } });
+/**
+ * SwiftUI's `toolbar`, iOS only. Its children are the view the toolbar belongs to, and its items go
+ * in `<ui-slot name="content">`, each a `ui-toolbar-item`. It shows in the bar of the
+ * `ui-navigation-stack` around it.
+ */
+export class UiToolbar {
+    nativeView = nativeView();
+    modifiers = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "modifiers" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiToolbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.0", type: UiToolbar, isStandalone: true, selector: "ui-toolbar", inputs: { modifiers: { classPropertyName: "modifiers", publicName: "modifiers", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "modifiers": "modifiers()" } }, ngImport: i0, template: '<ng-content />', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiToolbar, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-toolbar',
+                    template: '<ng-content />',
+                    host: { '[modifiers]': 'modifiers()' },
+                }]
+        }], propDecorators: { modifiers: [{ type: i0.Input, args: [{ isSignal: true, alias: "modifiers", required: false }] }] } });
+/**
+ * One item of a `ui-toolbar`, SwiftUI's `ToolbarItem`: a `ui-button`, or a `ui-text` as a title
+ * with `placement="principal"`. Unplaced, SwiftUI places it. A placement the OS does not have is
+ * read as `automatic`.
+ *
+ * Written inside a `ui-bottom-sheet` it goes in the sheet's own toolbar, which is how a sheet
+ * shows the system's close button.
+ */
+export class UiToolbarItem {
+    nativeView = nativeView();
+    placement = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "placement" }] : /* istanbul ignore next */ []));
+    /** How readily the item gives up its place when the bar runs out of room, from iOS 27. */
+    visibilityPriority = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "visibilityPriority" }] : /* istanbul ignore next */ []));
+    /** What the slot tells the toolbar about itself: only what is set, so SwiftUI decides the rest. */
+    extraProps = computed(() => {
+        const placement = this.placement();
+        const visibilityPriority = this.visibilityPriority();
+        if (!placement && !visibilityPriority)
+            return undefined;
+        return { ...(placement && { placement }), ...(visibilityPriority && { visibilityPriority }) };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "extraProps" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiToolbarItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.0", type: UiToolbarItem, isStandalone: true, selector: "ui-toolbar-item", inputs: { placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, visibilityPriority: { classPropertyName: "visibilityPriority", publicName: "visibilityPriority", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "name": "\"item\"", "extraProps": "extraProps()" } }, ngImport: i0, template: '<ng-content />', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiToolbarItem, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-toolbar-item',
+                    template: '<ng-content />',
+                    host: { '[name]': '"item"', '[extraProps]': 'extraProps()' },
+                }]
+        }], propDecorators: { placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], visibilityPriority: [{ type: i0.Input, args: [{ isSignal: true, alias: "visibilityPriority", required: false }] }] } });
+/** The detents of a sheet given none and not sized to its content. */
+const HALF_AND_FULL = ['medium', 'large'];
+/** The window's width as the engine knows it, or undefined before the platform has said. */
+function windowWidth() {
+    const node = inject(ElementRef).nativeElement;
+    const engine = (node.host ?? inject(HostEngine));
+    const read = () => engine.viewport?.width || undefined;
+    const width = signal(read(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    const stop = engine.watchViewport?.(() => width.set(read()));
+    if (stop)
+        inject(DestroyRef).onDestroy(stop);
+    return width;
+}
+/**
+ * A sheet that slides up from the bottom of the screen, opened from any component: SwiftUI's on
+ * iOS, Material's on Android.
+ *
+ * ```html
+ * <ui-bottom-sheet [(open)]="sorting" fitToContents>
+ *   <app-sort-options (done)="sorting.set(false)" />
+ * </ui-bottom-sheet>
+ * ```
+ *
+ * `open` presents and dismisses it, and is written back when the user dismisses it. Its content is
+ * what is written inside it, the app's own components, in the tree while the sheet is on screen.
+ *
+ * A `ui-toolbar-item` written inside it is not content: on iOS it goes in a toolbar of the sheet's
+ * own, in a bar across its top, which is where the system's close button belongs.
+ *
+ * ```html
+ * <ui-bottom-sheet [(open)]="sorting">
+ *   <ui-toolbar-item placement="cancellationAction">
+ *     <ui-button role="close" (buttonPress)="sorting.set(false)" />
+ *   </ui-toolbar-item>
+ *   <app-sort-options />
+ * </ui-bottom-sheet>
+ * ```
+ *
+ * Compose's sheet has no toolbar, so Android draws no item. Nor does an iOS build whose `@expo/ui`
+ * is older than 57.0.20, which Expo Go's can be: it warns, and shows the sheet without one.
+ *
+ * The two platforms drive a sheet differently, and this is where that difference ends. SwiftUI's
+ * stays in the tree and is presented by `isPresented`, reporting `isPresentedChange` and
+ * `dismiss`. Compose's shows for as long as it is in the tree, and reports `dismissRequest`.
+ *
+ * Unlike the other components here, the element this is mounted on is a plain view, which takes
+ * no room and needs no `ui-host` around it. The sheet is inside it, wrapped as `@expo/ui`'s own
+ * React component wraps one: a `ui-host`, the sheet, on iOS a `ui-group` that carries the
+ * presentation modifiers, and a `ui-view-host` holding the one view the content goes in. With
+ * toolbar items, the view host is in a `ui-toolbar` in a `ui-navigation-stack`, under the group.
+ */
+export class UiBottomSheet {
+    /**
+     * The functions of Compose's sheet, none of them on iOS, or null where `@expo/ui` is not in the
+     * build and there is no sheet. Overridden in a test to hide a sheet without a device.
+     */
+    static SOURCE = new InjectionToken('angular-native.bottomSheetSource', {
+        factory: () => optional(() => {
+            const core = require('expo-modules-core');
+            const module = core.requireOptionalNativeModule('ExpoUI');
+            return module ? (module.ViewPrototypes?.['ExpoUI_ModalBottomSheetView'] ?? {}) : null;
+        }),
+    });
+    /**
+     * Whether the build has SwiftUI's toolbar. `@expo/ui` has had it since 57.0.20, and Expo Go has
+     * the version its SDK shipped with. A SwiftUI view under one the build lacks is a crash, so a
+     * sheet there leaves its toolbar out. Overridden in a test.
+     */
+    static TOOLBAR = new InjectionToken('angular-native.bottomSheetToolbar', {
+        factory: () => {
+            const expo = globalThis.expo;
+            return ['NavigationStackView', 'ToolbarView'].every((view) => optional(() => expo?.getViewConfig?.('ExpoUI', view)) != null);
+        },
+    });
+    functions = inject(UiBottomSheet.SOURCE);
+    toolbarInBuild = inject(UiBottomSheet.TOOLBAR);
+    engine = inject(Engine, { optional: true });
+    injector = inject(Injector);
+    sheet = viewChild('sheet', { ...(ngDevMode ? { debugName: "sheet" } : /* istanbul ignore next */ {}), read: ElementRef });
+    /** Whether the sheet is on screen. Written back as false when the user dismisses it. */
+    open = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    /**
+     * The sheet is as tall as its content. Without it the sheet rests at half the screen's height
+     * and drags up to all of it. Read as the sheet opens. A sheet with a toolbar on iOS is not
+     * sized to its content: it rests at its `detents`, or at half and full height.
+     */
+    fitToContents = input(false, { ...(ngDevMode ? { debugName: "fitToContents" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * The heights the sheet rests at, iOS only: SwiftUI's `presentationDetents`. Compose's sheet has
+     * a half and a full height and no others, so Android takes no notice of this. On iOS a sheet
+     * given detents rests at them rather than at the height of its content, whatever `fitToContents`
+     * says, as `@expo/ui`'s own sheets do. None, or an empty list, is the sheet without them.
+     */
+    detents = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "detents" }] : /* istanbul ignore next */ []));
+    /** Whether the grabber shows at the top of the sheet. */
+    showDragIndicator = input(true, { ...(ngDevMode ? { debugName: "showDragIndicator" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * The sheet has finished closing, whether the user dismissed it or `open` was set false: the
+     * moment another sheet or a dialog can be presented.
+     */
+    dismissed = output();
+    /** The toolbar items written inside the sheet, which give it a bar to hold them. */
+    toolbarItems = contentChildren(UiToolbarItem, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "toolbarItems" }] : /* istanbul ignore next */ []));
+    /** Whether the sheet has a toolbar: it has items for one, and the build has the views. */
+    toolbar = computed(() => this.toolbarInBuild && this.toolbarItems().length > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "toolbar" }] : /* istanbul ignore next */ []));
+    /** SwiftUI's sheet stays in the tree; anywhere else it is there while it shows. */
+    swiftUI = nativePlatform() === 'ios';
+    width = windowWidth();
+    /**
+     * Whether the content is in the tree: from when the sheet opens until it has gone, which is
+     * after `open` turns false, so that it slides away with its content still in it.
+     */
+    mounted = linkedSignal({ ...(ngDevMode ? { debugName: "mounted" } : /* istanbul ignore next */ {}), source: this.open,
+        computation: (open, previous) => open || (previous?.value ?? false) });
+    /**
+     * Whether the sheet is sized to its content, as it opened: a view host takes its sizing once,
+     * as it mounts. SwiftUI's sheet is not where it has detents to rest at, nor where it has a
+     * toolbar: a navigation stack fills what it is given, and the bar is no part of the content.
+     * A toolbar that comes or goes while the sheet is open is followed, since the view host is made
+     * again around it.
+     */
+    fits = computed(() => {
+        this.mounted();
+        const toolbar = this.toolbar();
+        return untracked(() => this.fitToContents() && !(this.swiftUI && (this.detents()?.length || toolbar)));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fits" }] : /* istanbul ignore next */ []));
+    /**
+     * SwiftUI reads how a sheet is presented from modifiers on its content, not from props. The
+     * detents of a sheet not sized to its content are followed while it is open.
+     */
+    presentation = computed(() => [
+        this.fits()
+            ? { $type: 'presentationSizing', sizing: 'fitted' }
+            : {
+                $type: 'presentationDetents',
+                detents: this.detents()?.length ? this.detents() : HALF_AND_FULL,
+            },
+        {
+            $type: 'presentationDragIndicator',
+            visibility: this.showDragIndicator() ? 'visible' : 'hidden',
+        },
+    ], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "presentation" }] : /* istanbul ignore next */ []));
+    /**
+     * The one view a view host holds. Sized to its content it needs a width of its own, the
+     * window's; otherwise it fills the height the sheet gives it.
+     */
+    body = computed(() => this.fits() ? { width: this.width() } : { flexGrow: 1, height: 0 }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "body" }] : /* istanbul ignore next */ []));
+    /** Whether `open` has turned false on a sheet that has yet to go. */
+    closing = false;
+    /** Whether Compose is sliding the sheet away. */
+    hiding = false;
+    constructor() {
+        effect(() => {
+            if (!this.open())
+                untracked(() => this.close());
+        });
+        if (this.swiftUI && !this.toolbarInBuild) {
+            const warned = effect(() => {
+                if (!this.toolbarItems().length)
+                    return;
+                console.warn('[angular-native] A ui-toolbar-item in a ui-bottom-sheet needs @expo/ui 57.0.20 or ' +
+                    'later in the native build. This build has no SwiftUI toolbar, as Expo Go may not, ' +
+                    'so the sheet is shown without the item.');
+                warned.destroy();
+            }, /* @ts-ignore */
+            ...(ngDevMode ? [{ debugName: "warned" }] : /* istanbul ignore next */ []));
+        }
+    }
+    presented(event) {
+        if (!this.own(event))
+            return;
+        const isPresented = event.nativeEvent?.isPresented;
+        if (typeof isPresented === 'boolean')
+            this.open.set(isPresented);
+    }
+    dismissRequested(event) {
+        if (this.own(event))
+            this.open.set(false);
+    }
+    /**
+     * SwiftUI has finished dismissing the sheet. After a swipe it says so before it reports that the
+     * sheet is no longer presented, so a sheet that has gone while `open`, and was not closing, is
+     * one the user dismissed.
+     */
+    gone(event) {
+        if (!this.own(event))
+            return;
+        if (!this.closing)
+            this.open.set(false);
+        this.finish();
+    }
+    /**
+     * Whether an event is this sheet's own, which it then stops. Events bubble, so a `dismiss` from
+     * a modal in the content arrives here too, and the sheet's own would go on to a listener around
+     * it.
+     */
+    own(event) {
+        const target = event.target;
+        if (target != null && target !== this.sheet()?.nativeElement)
+            return false;
+        event.stopPropagation();
+        return true;
+    }
+    /**
+     * `open` turned false. SwiftUI dismisses its sheet on the prop, and says when it has gone.
+     * Compose shows a sheet for as long as it is in the tree, so one taken out is gone at once:
+     * its `hide` slides it away first, as `@expo/ui`'s own component calls it before unmounting.
+     */
+    close() {
+        if (!this.mounted())
+            return;
+        // No `@expo/ui` in the build: no sheet is there to slide away, or to say that it has.
+        if (!this.functions)
+            return this.finish();
+        this.closing = true;
+        if (this.swiftUI || this.hiding)
+            return;
+        const node = this.sheet()?.nativeElement;
+        const nativeTag = node ? (this.engine?.tagOf(node) ?? null) : null;
+        const hidden = nativeTag === null ? undefined : optional(() => this.functions?.hide?.call({ nativeTag }));
+        if (!hidden)
+            return this.finish();
+        this.hiding = true;
+        const done = () => {
+            this.hiding = false;
+            this.finish();
+        };
+        hidden.then(done, done);
+    }
+    /** The sheet has gone: its content leaves the tree. */
+    finish() {
+        this.closing = false;
+        if (!this.mounted())
+            return;
+        if (!this.open()) {
+            this.mounted.set(false);
+            this.dismissed.emit();
+            return;
+        }
+        // Opened again before it had gone. SwiftUI presents the sheet it still has; Compose hid the
+        // one it was asked to, and shows a sheet only as it enters the tree.
+        if (this.swiftUI)
+            return;
+        this.mounted.set(false);
+        afterNextRender(() => this.mounted.set(this.open()), { injector: this.injector });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiBottomSheet, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", type: UiBottomSheet, isStandalone: true, selector: "ui-bottom-sheet", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, fitToContents: { classPropertyName: "fitToContents", publicName: "fitToContents", isSignal: true, isRequired: false, transformFunction: null }, detents: { classPropertyName: "detents", publicName: "detents", isSignal: true, isRequired: false, transformFunction: null }, showDragIndicator: { classPropertyName: "showDragIndicator", publicName: "showDragIndicator", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", dismissed: "dismissed" }, host: { properties: { "style.position": "\"absolute\"" } }, queries: [{ propertyName: "toolbarItems", predicate: UiToolbarItem, isSignal: true }], viewQueries: [{ propertyName: "sheet", first: true, predicate: ["sheet"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: `
+    <ng-template #content><ng-content /></ng-template>
+    @if (swiftUI) {
+      <ui-host style="position: absolute" pointerEvents="none" [style.width.px]="width()">
+        <ui-bottom-sheet-view
+          #sheet
+          [isPresented]="open()"
+          [fitToContents]="fits()"
+          (isPresentedChange)="presented($event)"
+          (dismiss)="gone($event)"
+        >
+          @if (mounted()) {
+            <ui-group [modifiers]="presentation()">
+              @if (toolbar()) {
+                <ui-navigation-stack>
+                  <ui-toolbar>
+                    <ui-view-host layoutRoot [matchContents]="fits() || undefined">
+                      <ui-bottom-sheet-content [style]="body()" [content]="content" />
+                    </ui-view-host>
+                    <ui-slot name="content"><ng-content select="ui-toolbar-item" /></ui-slot>
+                  </ui-toolbar>
+                </ui-navigation-stack>
+              } @else {
+                <ui-view-host layoutRoot [matchContents]="fits() || undefined">
+                  <ui-bottom-sheet-content [style]="body()" [content]="content" />
+                </ui-view-host>
+              }
+            </ui-group>
+          }
+        </ui-bottom-sheet-view>
+      </ui-host>
+    } @else if (mounted()) {
+      <ui-host style="position: absolute" pointerEvents="none" [style.width.px]="width()">
+        <ui-bottom-sheet-view
+          #sheet
+          [showDragHandle]="showDragIndicator()"
+          [skipPartiallyExpanded]="fits()"
+          (dismissRequest)="dismissRequested($event)"
+        >
+          <ui-view-host layoutRoot [matchContents]="fits() || undefined">
+            <ui-bottom-sheet-content [style]="body()" [content]="content" />
+          </ui-view-host>
+        </ui-bottom-sheet-view>
+      </ui-host>
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: UiBottomSheetContent, selector: "ui-bottom-sheet-content", inputs: ["content"] }, { kind: "component", type: UiBottomSheetView, selector: "ui-bottom-sheet-view", inputs: ["isPresented", "fitToContents", "showDragHandle", "skipPartiallyExpanded"], outputs: ["isPresentedChange", "dismiss", "dismissRequest"] }, { kind: "component", type: UiGroup, selector: "ui-group", inputs: ["modifiers"] }, { kind: "component", type: UiHost, selector: "ui-host", inputs: ["matchContents", "ignoreSafeArea", "useViewportSizeMeasurement"] }, { kind: "component", type: UiNavigationStack, selector: "ui-navigation-stack", inputs: ["modifiers"] }, { kind: "component", type: UiSlot, selector: "ui-slot", inputs: ["name", "extraProps"] }, { kind: "component", type: UiToolbar, selector: "ui-toolbar", inputs: ["modifiers"] }, { kind: "component", type: UiViewHost, selector: "ui-view-host", inputs: ["matchContents", "layoutRoot", "modifiers"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiBottomSheet, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-bottom-sheet',
+                    imports: [
+                        UiBottomSheetContent,
+                        UiBottomSheetView,
+                        UiGroup,
+                        UiHost,
+                        UiNavigationStack,
+                        UiSlot,
+                        UiToolbar,
+                        UiViewHost,
+                    ],
+                    template: `
+    <ng-template #content><ng-content /></ng-template>
+    @if (swiftUI) {
+      <ui-host style="position: absolute" pointerEvents="none" [style.width.px]="width()">
+        <ui-bottom-sheet-view
+          #sheet
+          [isPresented]="open()"
+          [fitToContents]="fits()"
+          (isPresentedChange)="presented($event)"
+          (dismiss)="gone($event)"
+        >
+          @if (mounted()) {
+            <ui-group [modifiers]="presentation()">
+              @if (toolbar()) {
+                <ui-navigation-stack>
+                  <ui-toolbar>
+                    <ui-view-host layoutRoot [matchContents]="fits() || undefined">
+                      <ui-bottom-sheet-content [style]="body()" [content]="content" />
+                    </ui-view-host>
+                    <ui-slot name="content"><ng-content select="ui-toolbar-item" /></ui-slot>
+                  </ui-toolbar>
+                </ui-navigation-stack>
+              } @else {
+                <ui-view-host layoutRoot [matchContents]="fits() || undefined">
+                  <ui-bottom-sheet-content [style]="body()" [content]="content" />
+                </ui-view-host>
+              }
+            </ui-group>
+          }
+        </ui-bottom-sheet-view>
+      </ui-host>
+    } @else if (mounted()) {
+      <ui-host style="position: absolute" pointerEvents="none" [style.width.px]="width()">
+        <ui-bottom-sheet-view
+          #sheet
+          [showDragHandle]="showDragIndicator()"
+          [skipPartiallyExpanded]="fits()"
+          (dismissRequest)="dismissRequested($event)"
+        >
+          <ui-view-host layoutRoot [matchContents]="fits() || undefined">
+            <ui-bottom-sheet-content [style]="body()" [content]="content" />
+          </ui-view-host>
+        </ui-bottom-sheet-view>
+      </ui-host>
+    }
+  `,
+                    host: { '[style.position]': '"absolute"' },
+                }]
+        }], ctorParameters: () => [], propDecorators: { sheet: [{ type: i0.ViewChild, args: ['sheet', { ...{
+                            read: ElementRef,
+                        }, isSignal: true }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], fitToContents: [{ type: i0.Input, args: [{ isSignal: true, alias: "fitToContents", required: false }] }], detents: [{ type: i0.Input, args: [{ isSignal: true, alias: "detents", required: false }] }], showDragIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDragIndicator", required: false }] }], dismissed: [{ type: i0.Output, args: ["dismissed"] }], toolbarItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => UiToolbarItem), { isSignal: true }] }] } });
 //# sourceMappingURL=expo-ui-components.js.map