@ng-native/expo 0.3.0 → 0.4.0

package/dist/expo-ui-components.js

@@ -24,9 +24,17 @@
  * 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, nativePlatform, } from '@ng-native/fabric';
+import { HostEngine, keepNativeView, nativePlatform, } from '@ng-native/fabric';
 import { optionalBoolean, optionalNumber } from "./transforms.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
+ * an app's own with a `ui-` selector does not, and its host is a plain view.
+ */
+function nativeView() {
+    keepNativeView(inject(ElementRef).nativeElement);
+    return true;
+}
 /**
  * The bridge from Yoga's layout to SwiftUI's; every other `ui-*` view goes inside one.
  * `matchContents` sizes the host to the SwiftUI content rather than the other way round, on both
@@ -35,6 +43,7 @@ import * as i0 from "@angular/core";
  * drawn in it spills outside it, where it can be seen but not touched or read by VoiceOver.
  */
 export class UiHost {
+    nativeView = nativeView();
     matchContents = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "matchContents" }] : /* istanbul ignore next */ []));
     matchVertical = computed(() => {
@@ -68,6 +77,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
         }], propDecorators: { matchContents: [{ type: i0.Input, args: [{ isSignal: true, alias: "matchContents", required: false }] }], ignoreSafeArea: [{ type: i0.Input, args: [{ isSignal: true, alias: "ignoreSafeArea", required: false }] }], useViewportSizeMeasurement: [{ type: i0.Input, args: [{ isSignal: true, alias: "useViewportSizeMeasurement", required: false }] }] } });
 /** A SwiftUI `Menu`. Its trigger is the `label` or a `<ui-slot name="label">`; its items are children. */
 export class UiMenu {
+    nativeView = nativeView();
     label = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
     /** An SF Symbol name. */
@@ -93,11 +103,72 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
                     },
                 }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], systemImage: [{ type: i0.Input, args: [{ isSignal: true, alias: "systemImage", required: false }] }], accessibilityLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessibilityLabel", required: false }] }], modifiers: [{ type: i0.Input, args: [{ isSignal: true, alias: "modifiers", required: false }] }] } });
+/**
+ * Views of the app's own inside SwiftUI or Compose content: the way back from a `ui-host`. What
+ * it holds is laid out by the engine, as anywhere else, and takes presses as anywhere else, so a
+ * row drawn with the app's own components can be a context menu's trigger or a sheet's body.
+ *
+ * It holds one element. `matchContents` sizes it to that element, both ways: the element needs a
+ * width of its own, since nothing here stretches it. Without `matchContents` it fills what the
+ * SwiftUI or Compose view around it offers, which inside a view sized to its content is a width
+ * and no height.
+ */
+export class UiViewHost {
+    nativeView = nativeView();
+    matchContents = input(undefined, { ...(ngDevMode ? { debugName: "matchContents" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    /**
+     * For content presented in a window of its own, a sheet or a popover, where nothing above it
+     * delivers its touches: it then takes them itself, and is measured from itself.
+     */
+    layoutRoot = input(undefined, { ...(ngDevMode ? { debugName: "layoutRoot" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    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: UiViewHost, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.0", type: UiViewHost, isStandalone: true, selector: "ui-view-host", inputs: { matchContents: { classPropertyName: "matchContents", publicName: "matchContents", isSignal: true, isRequired: false, transformFunction: null }, layoutRoot: { classPropertyName: "layoutRoot", publicName: "layoutRoot", isSignal: true, isRequired: false, transformFunction: null }, modifiers: { classPropertyName: "modifiers", publicName: "modifiers", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "matchContents": "matchContents()", "expoInternalSizeFromChildren": "matchContents()", "layoutRoot": "layoutRoot()", "modifiers": "modifiers()" } }, ngImport: i0, template: '<ng-content />', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiViewHost, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-view-host',
+                    template: '<ng-content />',
+                    host: {
+                        '[matchContents]': 'matchContents()',
+                        '[expoInternalSizeFromChildren]': 'matchContents()',
+                        '[layoutRoot]': 'layoutRoot()',
+                        '[modifiers]': 'modifiers()',
+                    },
+                }]
+        }], propDecorators: { matchContents: [{ type: i0.Input, args: [{ isSignal: true, alias: "matchContents", required: false }] }], layoutRoot: [{ type: i0.Input, args: [{ isSignal: true, alias: "layoutRoot", required: false }] }], modifiers: [{ type: i0.Input, args: [{ isSignal: true, alias: "modifiers", required: false }] }] } });
+/**
+ * A SwiftUI `contextMenu`: the menu a long press on its trigger opens, with the trigger lifted
+ * over the dimmed screen. iOS only.
+ *
+ * Its content is three slots: `<ui-slot name="trigger">` is what is always shown,
+ * `<ui-slot name="items">` holds the `ui-button`s, `ui-divider`s and `ui-section`s of the menu, and
+ * `<ui-slot name="preview">`, when there is one, is shown above the open menu in place of the
+ * trigger. All three are SwiftUI content, as everything inside a `ui-host` is.
+ */
+export class UiContextMenu {
+    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: UiContextMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.0", type: UiContextMenu, isStandalone: true, selector: "ui-context-menu", 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: UiContextMenu, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-context-menu',
+                    template: '<ng-content />',
+                    host: { '[modifiers]': 'modifiers()' },
+                }]
+        }], 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.
  */
 export class UiButton {
+    nativeView = nativeView();
     android = nativePlatform() === 'android';
     label = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
@@ -106,11 +177,17 @@ export class UiButton {
     ...(ngDevMode ? [undefined, { debugName: "systemImage" }] : /* istanbul ignore next */ []));
     role = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "role" }] : /* istanbul ignore next */ []));
+    /**
+     * In a home-screen widget's layout, what a tap on it records for the app: see
+     * `@ng-native/expo/widget`.
+     */
+    target = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "target" }] : /* istanbul ignore next */ []));
     modifiers = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "modifiers" }] : /* istanbul ignore next */ []));
     buttonPress = output();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", type: UiButton, isStandalone: true, selector: "ui-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, systemImage: { classPropertyName: "systemImage", publicName: "systemImage", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, modifiers: { classPropertyName: "modifiers", publicName: "modifiers", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonPress: "buttonPress" }, host: { listeners: { "buttonPressed": "android && buttonPress.emit($event)" }, properties: { "label": "label()", "systemImage": "systemImage()", "role": "role()", "modifiers": "modifiers()" } }, ngImport: i0, template: `@if (android && label()) {
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", type: UiButton, isStandalone: true, selector: "ui-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, systemImage: { classPropertyName: "systemImage", publicName: "systemImage", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, modifiers: { classPropertyName: "modifiers", publicName: "modifiers", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonPress: "buttonPress" }, host: { listeners: { "buttonPressed": "android && buttonPress.emit($event)" }, properties: { "label": "label()", "systemImage": "systemImage()", "role": "role()", "target": "target()", "modifiers": "modifiers()" } }, ngImport: i0, template: `@if (android && label()) {
       <ui-text [text]="label()" />
     }
     <ng-content />`, isInline: true, dependencies: [{ kind: "component", type: i0.forwardRef(() => UiText), selector: "ui-text", inputs: ["text", "modifiers"] }] });
@@ -129,12 +206,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
                         '[label]': 'label()',
                         '[systemImage]': 'systemImage()',
                         '[role]': 'role()',
+                        '[target]': 'target()',
                         '[modifiers]': 'modifiers()',
                     },
                 }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], systemImage: [{ type: i0.Input, args: [{ isSignal: true, alias: "systemImage", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], modifiers: [{ type: i0.Input, args: [{ isSignal: true, alias: "modifiers", required: false }] }], buttonPress: [{ type: i0.Output, args: ["buttonPress"] }] } });
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], systemImage: [{ type: i0.Input, args: [{ isSignal: true, alias: "systemImage", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], modifiers: [{ type: i0.Input, args: [{ isSignal: true, alias: "modifiers", required: false }] }], buttonPress: [{ type: i0.Output, args: ["buttonPress"] }] } });
 /** A SwiftUI `Divider`, or Compose's `HorizontalDivider`: a separator between groups of items. */
 export class UiDivider {
+    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: UiDivider, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -154,6 +233,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
  * `allowsFullSwipe`.
  */
 export class UiSlot {
+    nativeView = nativeView();
     android = nativePlatform() === 'android';
     name = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
@@ -179,6 +259,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
  * swipe actions through `ui-swipe-actions`.
  */
 export class UiList {
+    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: UiList, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -198,6 +279,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
  * slot per edge, as `ui-button`s.
  */
 export class UiSwipeActions {
+    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: UiSwipeActions, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -216,6 +298,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
  * moves; note the d, which SwiftUI's event has and `@expo/ui`'s React prop does not.
  */
 export class UiSlider {
+    nativeView = nativeView();
     value = input(undefined, { ...(ngDevMode ? { debugName: "value" } : /* istanbul ignore next */ {}), transform: optionalNumber });
     min = input(undefined, { ...(ngDevMode ? { debugName: "min" } : /* istanbul ignore next */ {}), transform: optionalNumber });
     max = input(undefined, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), transform: optionalNumber });
@@ -270,6 +353,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
  * puts none.
  */
 export class UiVStack {
+    nativeView = nativeView();
     alignment = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "alignment" }] : /* istanbul ignore next */ []));
     spacing = input(undefined, { ...(ngDevMode ? { debugName: "spacing" } : /* istanbul ignore next */ {}), transform: optionalNumber });
@@ -299,6 +383,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
         }], propDecorators: { alignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignment", required: false }] }], spacing: [{ type: i0.Input, args: [{ isSignal: true, alias: "spacing", required: false }] }], modifiers: [{ type: i0.Input, args: [{ isSignal: true, alias: "modifiers", required: false }] }] } });
 /** A SwiftUI `Image`: an SF Symbol by `systemName`, or a picture by `uiImage` URL. */
 export class UiImage {
+    nativeView = nativeView();
     systemName = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "systemName" }] : /* istanbul ignore next */ []));
     uiImage = input(/* @ts-ignore */
@@ -330,6 +415,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
  * `<ui-text>Us {{ score }}</ui-text>`, as `<text>` takes its own, or `text`, which wins over it.
  */
 export class UiText {
+    nativeView = nativeView();
     text = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "text" }] : /* istanbul ignore next */ []));
     modifiers = input(/* @ts-ignore */
@@ -387,6 +473,7 @@ function withDisabled(modifiers, disabled) {
  * `selection` is still accepted as ISO text, for a picker bound without a form.
  */
 export class UiDatePicker {
+    nativeView = nativeView();
     title = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "title" }] : /* istanbul ignore next */ []));
     selection = input(/* @ts-ignore */
@@ -461,6 +548,7 @@ const APPEARING_MS = 1000;
  * work for anything richer. `pickerStyle` is SwiftUI's (`menu`, `segmented`, `wheel`, `inline`).
  */
 export class UiPicker {
+    nativeView = nativeView();
     label = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
     /** An SF Symbol name. */
@@ -541,6 +629,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
  * `isOn`, it shows what `isOn` says; without it, it switches itself. `label` is SwiftUI's alone.
  */
 export class UiToggle {
+    nativeView = nativeView();
     isOn = input(undefined, { ...(ngDevMode ? { debugName: "isOn" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
     label = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
@@ -574,6 +663,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
         }], propDecorators: { isOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOn", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], modifiers: [{ type: i0.Input, args: [{ isSignal: true, alias: "modifiers", required: false }] }], isOnChange: [{ type: i0.Output, args: ["isOnChange"] }] } });
 /** A SwiftUI `Stepper`, between `min` and `max` by `step`. */
 export class UiStepper {
+    nativeView = nativeView();
     value = input(undefined, { ...(ngDevMode ? { debugName: "value" } : /* istanbul ignore next */ {}), transform: optionalNumber });
     min = input(undefined, { ...(ngDevMode ? { debugName: "min" } : /* istanbul ignore next */ {}), transform: optionalNumber });
     max = input(undefined, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), transform: optionalNumber });
@@ -606,6 +696,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
  * writes to it on the UI thread, and `textChange` reports each change.
  */
 export class UiTextField {
+    nativeView = nativeView();
     text = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "text" }] : /* istanbul ignore next */ []));
     placeholder = input(/* @ts-ignore */
@@ -630,6 +721,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
         }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], modifiers: [{ type: i0.Input, args: [{ isSignal: true, alias: "modifiers", required: false }] }], textChange: [{ type: i0.Output, args: ["textChange"] }] } });
 /** A SwiftUI `ColorPicker`. `selection` is a colour as hex. */
 export class UiColorPicker {
+    nativeView = nativeView();
     selection = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "selection" }] : /* istanbul ignore next */ []));
     label = input(/* @ts-ignore */
@@ -656,6 +748,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
         }], propDecorators: { selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], supportsOpacity: [{ type: i0.Input, args: [{ isSignal: true, alias: "supportsOpacity", required: false }] }], modifiers: [{ type: i0.Input, args: [{ isSignal: true, alias: "modifiers", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }] } });
 /** A SwiftUI `Gauge`: `value` between `min` and `max`, drawn as `type` says. */
 export class UiGauge {
+    nativeView = nativeView();
     value = input(undefined, { ...(ngDevMode ? { debugName: "value" } : /* istanbul ignore next */ {}), transform: optionalNumber });
     min = input(undefined, { ...(ngDevMode ? { debugName: "min" } : /* istanbul ignore next */ {}), transform: optionalNumber });
     max = input(undefined, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), transform: optionalNumber });
@@ -689,11 +782,70 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
                     },
                 }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], currentValueLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentValueLabel", required: false }] }], minimumValueLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "minimumValueLabel", required: false }] }], maximumValueLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "maximumValueLabel", required: false }] }], modifiers: [{ type: i0.Input, args: [{ isSignal: true, alias: "modifiers", required: false }] }] } });
+/**
+ * A Swift Charts chart of `data`, drawn as `type` says, iOS only, as Compose has no chart. Each
+ * style applies to its own type alone; `referenceLines` are drawn across it in `ruleStyle`.
+ * `showLegend` shows only when no point has a colour of its own.
+ */
+export class UiChart {
+    nativeView = nativeView();
+    data = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    type = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "type" }] : /* istanbul ignore next */ []));
+    showGrid = input(undefined, { ...(ngDevMode ? { debugName: "showGrid" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    animate = input(undefined, { ...(ngDevMode ? { debugName: "animate" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    showLegend = input(undefined, { ...(ngDevMode ? { debugName: "showLegend" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    referenceLines = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "referenceLines" }] : /* istanbul ignore next */ []));
+    lineStyle = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "lineStyle" }] : /* istanbul ignore next */ []));
+    pointStyle = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "pointStyle" }] : /* istanbul ignore next */ []));
+    areaStyle = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "areaStyle" }] : /* istanbul ignore next */ []));
+    barStyle = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "barStyle" }] : /* istanbul ignore next */ []));
+    pieStyle = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "pieStyle" }] : /* istanbul ignore next */ []));
+    rectangleStyle = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "rectangleStyle" }] : /* istanbul ignore next */ []));
+    ruleStyle = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "ruleStyle" }] : /* istanbul ignore next */ []));
+    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: UiChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.0", type: UiChart, isStandalone: true, selector: "ui-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, showGrid: { classPropertyName: "showGrid", publicName: "showGrid", isSignal: true, isRequired: false, transformFunction: null }, animate: { classPropertyName: "animate", publicName: "animate", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, referenceLines: { classPropertyName: "referenceLines", publicName: "referenceLines", isSignal: true, isRequired: false, transformFunction: null }, lineStyle: { classPropertyName: "lineStyle", publicName: "lineStyle", isSignal: true, isRequired: false, transformFunction: null }, pointStyle: { classPropertyName: "pointStyle", publicName: "pointStyle", isSignal: true, isRequired: false, transformFunction: null }, areaStyle: { classPropertyName: "areaStyle", publicName: "areaStyle", isSignal: true, isRequired: false, transformFunction: null }, barStyle: { classPropertyName: "barStyle", publicName: "barStyle", isSignal: true, isRequired: false, transformFunction: null }, pieStyle: { classPropertyName: "pieStyle", publicName: "pieStyle", isSignal: true, isRequired: false, transformFunction: null }, rectangleStyle: { classPropertyName: "rectangleStyle", publicName: "rectangleStyle", isSignal: true, isRequired: false, transformFunction: null }, ruleStyle: { classPropertyName: "ruleStyle", publicName: "ruleStyle", isSignal: true, isRequired: false, transformFunction: null }, modifiers: { classPropertyName: "modifiers", publicName: "modifiers", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "data": "data()", "type": "type()", "showGrid": "showGrid()", "animate": "animate()", "showLegend": "showLegend()", "referenceLines": "referenceLines()", "lineStyle": "lineStyle()", "pointStyle": "pointStyle()", "areaStyle": "areaStyle()", "barStyle": "barStyle()", "pieStyle": "pieStyle()", "rectangleStyle": "rectangleStyle()", "ruleStyle": "ruleStyle()", "modifiers": "modifiers()" } }, ngImport: i0, template: '', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiChart, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-chart',
+                    template: '',
+                    host: {
+                        '[data]': 'data()',
+                        '[type]': 'type()',
+                        '[showGrid]': 'showGrid()',
+                        '[animate]': 'animate()',
+                        '[showLegend]': 'showLegend()',
+                        '[referenceLines]': 'referenceLines()',
+                        '[lineStyle]': 'lineStyle()',
+                        '[pointStyle]': 'pointStyle()',
+                        '[areaStyle]': 'areaStyle()',
+                        '[barStyle]': 'barStyle()',
+                        '[pieStyle]': 'pieStyle()',
+                        '[rectangleStyle]': 'rectangleStyle()',
+                        '[ruleStyle]': 'ruleStyle()',
+                        '[modifiers]': 'modifiers()',
+                    },
+                }]
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], showGrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "showGrid", required: false }] }], animate: [{ type: i0.Input, args: [{ isSignal: true, alias: "animate", required: false }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }], referenceLines: [{ type: i0.Input, args: [{ isSignal: true, alias: "referenceLines", required: false }] }], lineStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "lineStyle", required: false }] }], pointStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "pointStyle", required: false }] }], areaStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "areaStyle", required: false }] }], barStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "barStyle", required: false }] }], pieStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "pieStyle", required: false }] }], rectangleStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "rectangleStyle", required: false }] }], ruleStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "ruleStyle", required: false }] }], modifiers: [{ type: i0.Input, args: [{ isSignal: true, alias: "modifiers", required: false }] }] } });
 /**
  * A SwiftUI `ProgressView`: a bar filled to `value`, from 0 to 1, or a spinner without one. On
  * Android, Compose's `LinearProgressIndicator`, a moving bar rather than a spinner without a value.
  */
 export class UiProgress {
+    nativeView = nativeView();
     android = nativePlatform() === 'android';
     value = input(undefined, { ...(ngDevMode ? { debugName: "value" } : /* istanbul ignore next */ {}), transform: optionalNumber });
     modifiers = input(/* @ts-ignore */
@@ -719,6 +871,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
  * puts its own default spacing between children and Compose puts none.
  */
 export class UiHStack {
+    nativeView = nativeView();
     alignment = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "alignment" }] : /* istanbul ignore next */ []));
     spacing = input(undefined, { ...(ngDevMode ? { debugName: "spacing" } : /* istanbul ignore next */ {}), transform: optionalNumber });
@@ -751,6 +904,7 @@ function spacedBy(spacing) {
 }
 /** A SwiftUI `Spacer`: the room left over in its stack. */
 export class UiSpacer {
+    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: UiSpacer, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -781,6 +935,7 @@ const CONTENT_ALIGNMENT = {
  * Compose's `Box`, centred, as SwiftUI's is, unless `alignment` says otherwise.
  */
 export class UiZStack {
+    nativeView = nativeView();
     alignment = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "alignment" }] : /* istanbul ignore next */ []));
     modifiers = input(/* @ts-ignore */
@@ -804,6 +959,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
         }], propDecorators: { alignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignment", required: false }] }], modifiers: [{ type: i0.Input, args: [{ isSignal: true, alias: "modifiers", required: false }] }] } });
 /** A SwiftUI `Rectangle`, filling the space it is given. Colour it with `foregroundStyle`. */
 export class UiRectangle {
+    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: UiRectangle, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -819,6 +975,7 @@ 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 `RoundedRectangle`, its corners rounded by `cornerRadius`. */
 export class UiRoundedRectangle {
+    nativeView = nativeView();
     cornerRadius = input(undefined, { ...(ngDevMode ? { debugName: "cornerRadius" } : /* istanbul ignore next */ {}), transform: optionalNumber });
     modifiers = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "modifiers" }] : /* istanbul ignore next */ []));
@@ -835,6 +992,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
         }], propDecorators: { cornerRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "cornerRadius", required: false }] }], modifiers: [{ type: i0.Input, args: [{ isSignal: true, alias: "modifiers", required: false }] }] } });
 /** A SwiftUI `UnevenRoundedRectangle`: a rectangle with a radius of its own for each corner. */
 export class UiUnevenRoundedRectangle {
+    nativeView = nativeView();
     topLeadingRadius = input(undefined, { ...(ngDevMode ? { debugName: "topLeadingRadius" } : /* istanbul ignore next */ {}), transform: optionalNumber });
     topTrailingRadius = input(undefined, { ...(ngDevMode ? { debugName: "topTrailingRadius" } : /* istanbul ignore next */ {}), transform: optionalNumber });
     bottomLeadingRadius = input(undefined, { ...(ngDevMode ? { debugName: "bottomLeadingRadius" } : /* istanbul ignore next */ {}), transform: optionalNumber });
@@ -860,6 +1018,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
         }], propDecorators: { topLeadingRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "topLeadingRadius", required: false }] }], topTrailingRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "topTrailingRadius", required: false }] }], bottomLeadingRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "bottomLeadingRadius", required: false }] }], bottomTrailingRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "bottomTrailingRadius", required: false }] }], modifiers: [{ type: i0.Input, args: [{ isSignal: true, alias: "modifiers", required: false }] }] } });
 /** A SwiftUI `Capsule`: a rectangle with fully rounded ends. */
 export class UiCapsule {
+    nativeView = nativeView();
     cornerStyle = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "cornerStyle" }] : /* istanbul ignore next */ []));
     modifiers = input(/* @ts-ignore */
@@ -877,6 +1036,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
         }], propDecorators: { cornerStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "cornerStyle", required: false }] }], modifiers: [{ type: i0.Input, args: [{ isSignal: true, alias: "modifiers", required: false }] }] } });
 /** A SwiftUI `Circle`, as large as fits the space it is given. */
 export class UiCircle {
+    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: UiCircle, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -892,6 +1052,7 @@ 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 `Ellipse`, filling the space it is given. */
 export class UiEllipse {
+    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: UiEllipse, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -910,6 +1071,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
  * translucent disc or panel behind its content.
  */
 export class UiAccessoryWidgetBackground {
+    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: UiAccessoryWidgetBackground, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -925,6 +1087,7 @@ 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 `Label`: a title beside an SF Symbol. */
 export class UiLabel {
+    nativeView = nativeView();
     title = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "title" }] : /* istanbul ignore next */ []));
     /** An SF Symbol name. */
@@ -955,6 +1118,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
  * written inside it. In a widget, a link is how a tap opens the app at a deep link.
  */
 export class UiLink {
+    nativeView = nativeView();
     destination = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "destination" }] : /* istanbul ignore next */ []));
     label = input(/* @ts-ignore */
@@ -978,6 +1142,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
         }], propDecorators: { destination: [{ type: i0.Input, args: [{ isSignal: true, alias: "destination", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], modifiers: [{ type: i0.Input, args: [{ isSignal: true, alias: "modifiers", required: false }] }] } });
 /** A SwiftUI `LabeledContent`: a label, and its content beside it. */
 export class UiLabeledContent {
+    nativeView = nativeView();
     label = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
     modifiers = input(/* @ts-ignore */
@@ -996,6 +1161,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], modifiers: [{ type: i0.Input, args: [{ isSignal: true, alias: "modifiers", required: false }] }] } });
 /** A SwiftUI `Form`: settings-style grouped rows. */
 export class UiForm {
+    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: UiForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -1011,6 +1177,7 @@ 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 `Section` of a form or a list, under `title`. */
 export class UiSection {
+    nativeView = nativeView();
     title = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "title" }] : /* istanbul ignore next */ []));
     modifiers = input(/* @ts-ignore */