@ng-native/expo 0.15.0 → 0.16.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/expo-ui-components.d.ts +47 -3
- package/dist/expo-ui-components.js +152 -48
- package/dist/expo-ui-components.js.map +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
|
@@ -47,6 +47,7 @@ function nativeView() {
|
|
|
47
47
|
*/
|
|
48
48
|
export class UiHost {
|
|
49
49
|
nativeView = nativeView();
|
|
50
|
+
android = nativePlatform() === 'android';
|
|
50
51
|
matchContents = input(/* @ts-ignore */
|
|
51
52
|
...(ngDevMode ? [undefined, { debugName: "matchContents" }] : /* istanbul ignore next */ []));
|
|
52
53
|
matchVertical = computed(() => {
|
|
@@ -59,11 +60,12 @@ export class UiHost {
|
|
|
59
60
|
return typeof match === 'object' ? match.horizontal : match;
|
|
60
61
|
}, /* @ts-ignore */
|
|
61
62
|
...(ngDevMode ? [{ debugName: "matchHorizontal" }] : /* istanbul ignore next */ []));
|
|
63
|
+
/** The safe area SwiftUI's host ignores, iOS only: Compose's host has no such prop. */
|
|
62
64
|
ignoreSafeArea = input(/* @ts-ignore */
|
|
63
65
|
...(ngDevMode ? [undefined, { debugName: "ignoreSafeArea" }] : /* istanbul ignore next */ []));
|
|
64
66
|
useViewportSizeMeasurement = input(undefined, { ...(ngDevMode ? { debugName: "useViewportSizeMeasurement" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
|
|
65
67
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiHost, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
66
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.0", type: UiHost, isStandalone: true, selector: "ui-host", inputs: { matchContents: { classPropertyName: "matchContents", publicName: "matchContents", isSignal: true, isRequired: false, transformFunction: null }, ignoreSafeArea: { classPropertyName: "ignoreSafeArea", publicName: "ignoreSafeArea", isSignal: true, isRequired: false, transformFunction: null }, useViewportSizeMeasurement: { classPropertyName: "useViewportSizeMeasurement", publicName: "useViewportSizeMeasurement", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "matchContentsVertical": "matchVertical()", "matchContentsHorizontal": "matchHorizontal()", "ignoreSafeArea": "ignoreSafeArea()", "useViewportSizeMeasurement": "useViewportSizeMeasurement()" } }, ngImport: i0, template: '<ng-content />', isInline: true });
|
|
68
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.0", type: UiHost, isStandalone: true, selector: "ui-host", inputs: { matchContents: { classPropertyName: "matchContents", publicName: "matchContents", isSignal: true, isRequired: false, transformFunction: null }, ignoreSafeArea: { classPropertyName: "ignoreSafeArea", publicName: "ignoreSafeArea", isSignal: true, isRequired: false, transformFunction: null }, useViewportSizeMeasurement: { classPropertyName: "useViewportSizeMeasurement", publicName: "useViewportSizeMeasurement", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "matchContentsVertical": "matchVertical()", "matchContentsHorizontal": "matchHorizontal()", "ignoreSafeArea": "android ? undefined : ignoreSafeArea()", "useViewportSizeMeasurement": "useViewportSizeMeasurement()" } }, ngImport: i0, template: '<ng-content />', isInline: true });
|
|
67
69
|
}
|
|
68
70
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiHost, decorators: [{
|
|
69
71
|
type: Component,
|
|
@@ -73,7 +75,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
|
|
|
73
75
|
host: {
|
|
74
76
|
'[matchContentsVertical]': 'matchVertical()',
|
|
75
77
|
'[matchContentsHorizontal]': 'matchHorizontal()',
|
|
76
|
-
'[ignoreSafeArea]': 'ignoreSafeArea()',
|
|
78
|
+
'[ignoreSafeArea]': 'android ? undefined : ignoreSafeArea()',
|
|
77
79
|
'[useViewportSizeMeasurement]': 'useViewportSizeMeasurement()',
|
|
78
80
|
},
|
|
79
81
|
}]
|
|
@@ -81,17 +83,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
|
|
|
81
83
|
/** A SwiftUI `Menu`. Its trigger is the `label` or a `<ui-slot name="label">`; its items are children. */
|
|
82
84
|
export class UiMenu {
|
|
83
85
|
nativeView = nativeView();
|
|
86
|
+
android = nativePlatform() === 'android';
|
|
84
87
|
label = input(/* @ts-ignore */
|
|
85
88
|
...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
|
|
86
89
|
/** An SF Symbol name. */
|
|
87
90
|
systemImage = input(/* @ts-ignore */
|
|
88
91
|
...(ngDevMode ? [undefined, { debugName: "systemImage" }] : /* istanbul ignore next */ []));
|
|
92
|
+
/** What VoiceOver reads for the menu's trigger: SwiftUI's `accessibilityLabel` modifier. */
|
|
89
93
|
accessibilityLabel = input(/* @ts-ignore */
|
|
90
94
|
...(ngDevMode ? [undefined, { debugName: "accessibilityLabel" }] : /* istanbul ignore next */ []));
|
|
91
95
|
modifiers = input(/* @ts-ignore */
|
|
92
96
|
...(ngDevMode ? [undefined, { debugName: "modifiers" }] : /* istanbul ignore next */ []));
|
|
97
|
+
resolvedModifiers = computed(() => withModifiers(this.modifiers(), spokenLabel(this.accessibilityLabel())), /* @ts-ignore */
|
|
98
|
+
...(ngDevMode ? [{ debugName: "resolvedModifiers" }] : /* istanbul ignore next */ []));
|
|
93
99
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
94
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.0", type: UiMenu, isStandalone: true, selector: "ui-menu", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, systemImage: { classPropertyName: "systemImage", publicName: "systemImage", isSignal: true, isRequired: false, transformFunction: null }, accessibilityLabel: { classPropertyName: "accessibilityLabel", publicName: "accessibilityLabel", isSignal: true, isRequired: false, transformFunction: null }, modifiers: { classPropertyName: "modifiers", publicName: "modifiers", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "label": "label()", "systemImage": "systemImage()", "
|
|
100
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.0", type: UiMenu, isStandalone: true, selector: "ui-menu", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, systemImage: { classPropertyName: "systemImage", publicName: "systemImage", isSignal: true, isRequired: false, transformFunction: null }, accessibilityLabel: { classPropertyName: "accessibilityLabel", publicName: "accessibilityLabel", isSignal: true, isRequired: false, transformFunction: null }, modifiers: { classPropertyName: "modifiers", publicName: "modifiers", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "label": "android ? undefined : label()", "systemImage": "android ? undefined : systemImage()", "modifiers": "android ? modifiers() : resolvedModifiers()" } }, ngImport: i0, template: '<ng-content />', isInline: true });
|
|
95
101
|
}
|
|
96
102
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiMenu, decorators: [{
|
|
97
103
|
type: Component,
|
|
@@ -99,10 +105,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
|
|
|
99
105
|
selector: 'ui-menu',
|
|
100
106
|
template: '<ng-content />',
|
|
101
107
|
host: {
|
|
102
|
-
'[label]': 'label()',
|
|
103
|
-
'[systemImage]': 'systemImage()',
|
|
104
|
-
'[
|
|
105
|
-
'[modifiers]': 'modifiers()',
|
|
108
|
+
'[label]': 'android ? undefined : label()',
|
|
109
|
+
'[systemImage]': 'android ? undefined : systemImage()',
|
|
110
|
+
'[modifiers]': 'android ? modifiers() : resolvedModifiers()',
|
|
106
111
|
},
|
|
107
112
|
}]
|
|
108
113
|
}], 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 }] }] } });
|
|
@@ -117,6 +122,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
|
|
|
117
122
|
* and no height.
|
|
118
123
|
*/
|
|
119
124
|
export class UiViewHost {
|
|
125
|
+
android = nativePlatform() === 'android';
|
|
120
126
|
nativeView = nativeView();
|
|
121
127
|
matchContents = input(undefined, { ...(ngDevMode ? { debugName: "matchContents" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
|
|
122
128
|
/**
|
|
@@ -124,10 +130,11 @@ export class UiViewHost {
|
|
|
124
130
|
* delivers its touches: it then takes them itself, and is measured from itself.
|
|
125
131
|
*/
|
|
126
132
|
layoutRoot = input(undefined, { ...(ngDevMode ? { debugName: "layoutRoot" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
|
|
133
|
+
/** Compose's modifiers for the view host, Android only: SwiftUI's view host takes none. */
|
|
127
134
|
modifiers = input(/* @ts-ignore */
|
|
128
135
|
...(ngDevMode ? [undefined, { debugName: "modifiers" }] : /* istanbul ignore next */ []));
|
|
129
136
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiViewHost, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
130
|
-
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 });
|
|
137
|
+
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()", "matchContentsHorizontal": "matchContents()", "matchContentsVertical": "matchContents()", "expoInternalSizeFromChildren": "matchContents()", "layoutRoot": "layoutRoot()", "modifiers": "android ? modifiers() : undefined" } }, ngImport: i0, template: '<ng-content />', isInline: true });
|
|
131
138
|
}
|
|
132
139
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiViewHost, decorators: [{
|
|
133
140
|
type: Component,
|
|
@@ -135,10 +142,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
|
|
|
135
142
|
selector: 'ui-view-host',
|
|
136
143
|
template: '<ng-content />',
|
|
137
144
|
host: {
|
|
145
|
+
// `@expo/ui` to 57.0.22 reads `matchContents`, and from 57.0.23 one prop for each axis.
|
|
138
146
|
'[matchContents]': 'matchContents()',
|
|
147
|
+
'[matchContentsHorizontal]': 'matchContents()',
|
|
148
|
+
'[matchContentsVertical]': 'matchContents()',
|
|
139
149
|
'[expoInternalSizeFromChildren]': 'matchContents()',
|
|
140
150
|
'[layoutRoot]': 'layoutRoot()',
|
|
141
|
-
'
|
|
151
|
+
// SwiftUI's view host takes no modifiers; Compose's does.
|
|
152
|
+
'[modifiers]': 'android ? modifiers() : undefined',
|
|
142
153
|
},
|
|
143
154
|
}]
|
|
144
155
|
}], 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 }] }] } });
|
|
@@ -183,7 +194,8 @@ export class UiButton {
|
|
|
183
194
|
...(ngDevMode ? [undefined, { debugName: "role" }] : /* istanbul ignore next */ []));
|
|
184
195
|
/**
|
|
185
196
|
* In a home-screen widget's or a Live Activity's layout, what a tap on it hands the app: see
|
|
186
|
-
* `@ng-native/expo/widget` and `@ng-native/expo/live-activity`.
|
|
197
|
+
* `@ng-native/expo/widget` and `@ng-native/expo/live-activity`. The layout's build reads it, so
|
|
198
|
+
* an app's own button is not sent it: `@expo/ui`'s button there has no target.
|
|
187
199
|
*/
|
|
188
200
|
target = input(/* @ts-ignore */
|
|
189
201
|
...(ngDevMode ? [undefined, { debugName: "target" }] : /* istanbul ignore next */ []));
|
|
@@ -191,7 +203,7 @@ export class UiButton {
|
|
|
191
203
|
...(ngDevMode ? [undefined, { debugName: "modifiers" }] : /* istanbul ignore next */ []));
|
|
192
204
|
buttonPress = output();
|
|
193
205
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
194
|
-
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": "
|
|
206
|
+
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": "android ? undefined : label()", "systemImage": "android ? undefined : systemImage()", "role": "android ? undefined : role()", "modifiers": "modifiers()" } }, ngImport: i0, template: `@if (android && label()) {
|
|
195
207
|
<ui-text [text]="label()" />
|
|
196
208
|
}
|
|
197
209
|
<ng-content />`, isInline: true, dependencies: [{ kind: "component", type: i0.forwardRef(() => UiText), selector: "ui-text", inputs: ["text", "date", "dateStyle", "timerInterval", "countsDown", "modifiers"] }] });
|
|
@@ -207,10 +219,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
|
|
|
207
219
|
<ng-content />`,
|
|
208
220
|
host: {
|
|
209
221
|
'(buttonPressed)': 'android && buttonPress.emit($event)',
|
|
210
|
-
'[label]': 'label()',
|
|
211
|
-
'[systemImage]': 'systemImage()',
|
|
212
|
-
'[role]': 'role()',
|
|
213
|
-
'[target]': 'target()',
|
|
222
|
+
'[label]': 'android ? undefined : label()',
|
|
223
|
+
'[systemImage]': 'android ? undefined : systemImage()',
|
|
224
|
+
'[role]': 'android ? undefined : role()',
|
|
214
225
|
'[modifiers]': 'modifiers()',
|
|
215
226
|
},
|
|
216
227
|
}]
|
|
@@ -241,10 +252,11 @@ export class UiSlot {
|
|
|
241
252
|
android = nativePlatform() === 'android';
|
|
242
253
|
name = input.required(/* @ts-ignore */
|
|
243
254
|
...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
|
|
255
|
+
/** What the slot tells its SwiftUI parent about itself, iOS only. */
|
|
244
256
|
extraProps = input(/* @ts-ignore */
|
|
245
257
|
...(ngDevMode ? [undefined, { debugName: "extraProps" }] : /* istanbul ignore next */ []));
|
|
246
258
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiSlot, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
247
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.0", type: UiSlot, isStandalone: true, selector: "ui-slot", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, extraProps: { classPropertyName: "extraProps", publicName: "extraProps", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "name": "android ? undefined : name()", "slotName": "android ? name() : undefined", "extraProps": "extraProps()" } }, ngImport: i0, template: '<ng-content />', isInline: true });
|
|
259
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.0", type: UiSlot, isStandalone: true, selector: "ui-slot", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, extraProps: { classPropertyName: "extraProps", publicName: "extraProps", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "name": "android ? undefined : name()", "slotName": "android ? name() : undefined", "extraProps": "android ? undefined : extraProps()" } }, ngImport: i0, template: '<ng-content />', isInline: true });
|
|
248
260
|
}
|
|
249
261
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiSlot, decorators: [{
|
|
250
262
|
type: Component,
|
|
@@ -254,7 +266,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
|
|
|
254
266
|
host: {
|
|
255
267
|
'[name]': 'android ? undefined : name()',
|
|
256
268
|
'[slotName]': 'android ? name() : undefined',
|
|
257
|
-
'[extraProps]': 'extraProps()',
|
|
269
|
+
'[extraProps]': 'android ? undefined : extraProps()',
|
|
258
270
|
},
|
|
259
271
|
}]
|
|
260
272
|
}], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], extraProps: [{ type: i0.Input, args: [{ isSignal: true, alias: "extraProps", required: false }] }] } });
|
|
@@ -391,19 +403,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
|
|
|
391
403
|
*/
|
|
392
404
|
export class UiImage {
|
|
393
405
|
nativeView = nativeView();
|
|
406
|
+
/** Compose's image is another control, which takes a `source`: none of these are its. */
|
|
407
|
+
android = nativePlatform() === 'android';
|
|
394
408
|
systemName = input(/* @ts-ignore */
|
|
395
409
|
...(ngDevMode ? [undefined, { debugName: "systemName" }] : /* istanbul ignore next */ []));
|
|
396
410
|
assetName = input(/* @ts-ignore */
|
|
397
411
|
...(ngDevMode ? [undefined, { debugName: "assetName" }] : /* istanbul ignore next */ []));
|
|
398
412
|
uiImage = input(/* @ts-ignore */
|
|
399
413
|
...(ngDevMode ? [undefined, { debugName: "uiImage" }] : /* istanbul ignore next */ []));
|
|
414
|
+
/**
|
|
415
|
+
* A symbol's size in points, as a `font` modifier of that size, which does not scale with
|
|
416
|
+
* Dynamic Type. A `font` modifier in `modifiers` wins over it. Without either, the symbol is
|
|
417
|
+
* SwiftUI's default size, where `@expo/ui`'s own `Image` and a widget layout draw it at 24.
|
|
418
|
+
*/
|
|
400
419
|
size = input(undefined, { ...(ngDevMode ? { debugName: "size" } : /* istanbul ignore next */ {}), transform: optionalNumber });
|
|
420
|
+
/** A symbol's colour, as a `foregroundStyle` modifier. */
|
|
401
421
|
color = input(/* @ts-ignore */
|
|
402
422
|
...(ngDevMode ? [undefined, { debugName: "color" }] : /* istanbul ignore next */ []));
|
|
403
423
|
modifiers = input(/* @ts-ignore */
|
|
404
424
|
...(ngDevMode ? [undefined, { debugName: "modifiers" }] : /* istanbul ignore next */ []));
|
|
425
|
+
/** SwiftUI's image reads neither `size` nor `color`: `@expo/ui`'s `Image` makes them modifiers. */
|
|
426
|
+
resolvedModifiers = computed(() => {
|
|
427
|
+
const modifiers = this.modifiers();
|
|
428
|
+
const size = this.size();
|
|
429
|
+
const hasFont = modifiers?.some((modifier) => modifier.$type === 'font');
|
|
430
|
+
return withModifiers(modifiers, size !== undefined && !hasFont && { $type: 'font', size }, foregroundColor(this.color()));
|
|
431
|
+
}, /* @ts-ignore */
|
|
432
|
+
...(ngDevMode ? [{ debugName: "resolvedModifiers" }] : /* istanbul ignore next */ []));
|
|
405
433
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiImage, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
406
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.0", type: UiImage, isStandalone: true, selector: "ui-image", inputs: { systemName: { classPropertyName: "systemName", publicName: "systemName", isSignal: true, isRequired: false, transformFunction: null }, assetName: { classPropertyName: "assetName", publicName: "assetName", isSignal: true, isRequired: false, transformFunction: null }, uiImage: { classPropertyName: "uiImage", publicName: "uiImage", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, modifiers: { classPropertyName: "modifiers", publicName: "modifiers", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "systemName": "systemName()", "assetName": "assetName()", "uiImage": "uiImage()", "
|
|
434
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.0", type: UiImage, isStandalone: true, selector: "ui-image", inputs: { systemName: { classPropertyName: "systemName", publicName: "systemName", isSignal: true, isRequired: false, transformFunction: null }, assetName: { classPropertyName: "assetName", publicName: "assetName", isSignal: true, isRequired: false, transformFunction: null }, uiImage: { classPropertyName: "uiImage", publicName: "uiImage", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, modifiers: { classPropertyName: "modifiers", publicName: "modifiers", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "systemName": "android ? undefined : systemName()", "assetName": "android ? undefined : assetName()", "uiImage": "android ? undefined : uiImage()", "modifiers": "android ? modifiers() : resolvedModifiers()" } }, ngImport: i0, template: '', isInline: true });
|
|
407
435
|
}
|
|
408
436
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiImage, decorators: [{
|
|
409
437
|
type: Component,
|
|
@@ -411,12 +439,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
|
|
|
411
439
|
selector: 'ui-image',
|
|
412
440
|
template: '',
|
|
413
441
|
host: {
|
|
414
|
-
'[systemName]': 'systemName()',
|
|
415
|
-
'[assetName]': 'assetName()',
|
|
416
|
-
'[uiImage]': 'uiImage()',
|
|
417
|
-
'[
|
|
418
|
-
'[color]': 'color()',
|
|
419
|
-
'[modifiers]': 'modifiers()',
|
|
442
|
+
'[systemName]': 'android ? undefined : systemName()',
|
|
443
|
+
'[assetName]': 'android ? undefined : assetName()',
|
|
444
|
+
'[uiImage]': 'android ? undefined : uiImage()',
|
|
445
|
+
'[modifiers]': 'android ? modifiers() : resolvedModifiers()',
|
|
420
446
|
},
|
|
421
447
|
}]
|
|
422
448
|
}], propDecorators: { systemName: [{ type: i0.Input, args: [{ isSignal: true, alias: "systemName", required: false }] }], assetName: [{ type: i0.Input, args: [{ isSignal: true, alias: "assetName", required: false }] }], uiImage: [{ type: i0.Input, args: [{ isSignal: true, alias: "uiImage", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], modifiers: [{ type: i0.Input, args: [{ isSignal: true, alias: "modifiers", required: false }] }] } });
|
|
@@ -493,6 +519,31 @@ function withNativeEvent(event, nativeEvent) {
|
|
|
493
519
|
isPropagationStopped: () => event.isPropagationStopped(),
|
|
494
520
|
};
|
|
495
521
|
}
|
|
522
|
+
/**
|
|
523
|
+
* The caller's modifiers, with each modifier given added after them: what `@expo/ui`'s own
|
|
524
|
+
* components do with an input their native view reads as a modifier rather than as a prop.
|
|
525
|
+
*/
|
|
526
|
+
function withModifiers(modifiers, ...added) {
|
|
527
|
+
const given = added.filter((modifier) => !!modifier);
|
|
528
|
+
return given.length ? [...(modifiers ?? []), ...given] : modifiers;
|
|
529
|
+
}
|
|
530
|
+
/**
|
|
531
|
+
* SwiftUI's `foregroundStyle` modifier in one colour, as `@expo/ui`'s `foregroundStyle(color)`.
|
|
532
|
+
* `@expo/ui` to 57.0.14 reads `styleType` and `color`, and from 57.0.15 a `style`: this sends both.
|
|
533
|
+
*/
|
|
534
|
+
function foregroundColor(color) {
|
|
535
|
+
return color === undefined
|
|
536
|
+
? undefined
|
|
537
|
+
: { $type: 'foregroundStyle', style: { type: 'color', color }, styleType: 'color', color };
|
|
538
|
+
}
|
|
539
|
+
/** SwiftUI's `accessibilityLabel` modifier, what VoiceOver reads for the view. */
|
|
540
|
+
function spokenLabel(label) {
|
|
541
|
+
return label === undefined ? undefined : { $type: 'accessibilityLabel', label };
|
|
542
|
+
}
|
|
543
|
+
/** Compose's `semantics` modifier with a `contentDescription`, what TalkBack reads for the view. */
|
|
544
|
+
function contentDescription(label) {
|
|
545
|
+
return label === undefined ? undefined : { $type: 'semantics', contentDescription: label };
|
|
546
|
+
}
|
|
496
547
|
/** The caller's modifiers, with SwiftUI's `disabled` added while the field is. */
|
|
497
548
|
function withDisabled(modifiers, disabled) {
|
|
498
549
|
return disabled ? [...(modifiers ?? []), { $type: 'disabled', disabled: true }] : modifiers;
|
|
@@ -537,7 +588,7 @@ export class UiDatePicker {
|
|
|
537
588
|
touch = output();
|
|
538
589
|
dateChange = output();
|
|
539
590
|
android = nativePlatform() === 'android';
|
|
540
|
-
resolvedSelection = computed(() => this.
|
|
591
|
+
resolvedSelection = computed(() => this.selection() ?? this.value()?.toISOString(), /* @ts-ignore */
|
|
541
592
|
...(ngDevMode ? [{ debugName: "resolvedSelection" }] : /* istanbul ignore next */ []));
|
|
542
593
|
/** SwiftUI takes a list of what to show, and Compose one word for it. */
|
|
543
594
|
resolvedComponents = computed(() => {
|
|
@@ -547,9 +598,21 @@ export class UiDatePicker {
|
|
|
547
598
|
return shown.length === 1 ? shown[0] : 'dateAndTime';
|
|
548
599
|
}, /* @ts-ignore */
|
|
549
600
|
...(ngDevMode ? [{ debugName: "resolvedComponents" }] : /* istanbul ignore next */ []));
|
|
550
|
-
initialDate = computed(() => this.
|
|
601
|
+
initialDate = computed(() => this.value()?.getTime() ?? null, /* @ts-ignore */
|
|
551
602
|
...(ngDevMode ? [{ debugName: "initialDate" }] : /* istanbul ignore next */ []));
|
|
552
|
-
|
|
603
|
+
/** Compose takes `range` as `selectableDates`, each end in milliseconds. */
|
|
604
|
+
selectableDates = computed(() => {
|
|
605
|
+
const range = this.range();
|
|
606
|
+
return (range && { start: milliseconds(range.start) ?? null, end: milliseconds(range.end) ?? null });
|
|
607
|
+
}, /* @ts-ignore */
|
|
608
|
+
...(ngDevMode ? [{ debugName: "selectableDates" }] : /* istanbul ignore next */ []));
|
|
609
|
+
/**
|
|
610
|
+
* SwiftUI's picker reads `disabled` and `accessibilityLabel` as modifiers, and Compose's reads
|
|
611
|
+
* `accessibilityLabel` as the `semantics` modifier's `contentDescription`.
|
|
612
|
+
*/
|
|
613
|
+
resolvedModifiers = computed(() => this.android
|
|
614
|
+
? withModifiers(this.modifiers(), contentDescription(this.accessibilityLabel()))
|
|
615
|
+
: withModifiers(withDisabled(this.modifiers(), this.disabled()), spokenLabel(this.accessibilityLabel())), /* @ts-ignore */
|
|
553
616
|
...(ngDevMode ? [{ debugName: "resolvedModifiers" }] : /* istanbul ignore next */ []));
|
|
554
617
|
/**
|
|
555
618
|
* SwiftUI's picker cannot be empty: it shows today, and reports that as a change the moment it
|
|
@@ -572,7 +635,7 @@ export class UiDatePicker {
|
|
|
572
635
|
});
|
|
573
636
|
}
|
|
574
637
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiDatePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
575
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.0", type: UiDatePicker, isStandalone: true, selector: "ui-date-picker", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, displayedComponents: { classPropertyName: "displayedComponents", publicName: "displayedComponents", isSignal: true, isRequired: false, transformFunction: null }, range: { classPropertyName: "range", publicName: "range", isSignal: true, isRequired: false, transformFunction: null }, accessibilityLabel: { classPropertyName: "accessibilityLabel", publicName: "accessibilityLabel", isSignal: true, isRequired: false, transformFunction: null }, modifiers: { classPropertyName: "modifiers", publicName: "modifiers", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touch: "touch", dateChange: "dateChange" }, host: { properties: { "title": "title()", "selection": "resolvedSelection()", "initialDate": "initialDate()", "displayedComponents": "resolvedComponents()", "range": "range()", "
|
|
638
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.0", type: UiDatePicker, isStandalone: true, selector: "ui-date-picker", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, displayedComponents: { classPropertyName: "displayedComponents", publicName: "displayedComponents", isSignal: true, isRequired: false, transformFunction: null }, range: { classPropertyName: "range", publicName: "range", isSignal: true, isRequired: false, transformFunction: null }, accessibilityLabel: { classPropertyName: "accessibilityLabel", publicName: "accessibilityLabel", isSignal: true, isRequired: false, transformFunction: null }, modifiers: { classPropertyName: "modifiers", publicName: "modifiers", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touch: "touch", dateChange: "dateChange" }, host: { properties: { "title": "android ? undefined : title()", "selection": "android ? undefined : resolvedSelection()", "initialDate": "android ? initialDate() : undefined", "displayedComponents": "resolvedComponents()", "range": "android ? undefined : range()", "selectableDates": "android ? selectableDates() : undefined", "modifiers": "resolvedModifiers()" } }, ngImport: i0, template: '', isInline: true });
|
|
576
639
|
}
|
|
577
640
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiDatePicker, decorators: [{
|
|
578
641
|
type: Component,
|
|
@@ -580,12 +643,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
|
|
|
580
643
|
selector: 'ui-date-picker',
|
|
581
644
|
template: '',
|
|
582
645
|
host: {
|
|
583
|
-
'[title]': 'title()',
|
|
584
|
-
'[selection]': 'resolvedSelection()',
|
|
585
|
-
'[initialDate]': 'initialDate()',
|
|
646
|
+
'[title]': 'android ? undefined : title()',
|
|
647
|
+
'[selection]': 'android ? undefined : resolvedSelection()',
|
|
648
|
+
'[initialDate]': 'android ? initialDate() : undefined',
|
|
586
649
|
'[displayedComponents]': 'resolvedComponents()',
|
|
587
|
-
'[range]': 'range()',
|
|
588
|
-
'[
|
|
650
|
+
'[range]': 'android ? undefined : range()',
|
|
651
|
+
'[selectableDates]': 'android ? selectableDates() : undefined',
|
|
589
652
|
'[modifiers]': 'resolvedModifiers()',
|
|
590
653
|
},
|
|
591
654
|
}]
|
|
@@ -755,6 +818,9 @@ export class UiPicker {
|
|
|
755
818
|
])), /* @ts-ignore */
|
|
756
819
|
...(ngDevMode ? [{ debugName: "tags" }] : /* istanbul ignore next */ []));
|
|
757
820
|
android = nativePlatform() === 'android';
|
|
821
|
+
/** SwiftUI's picker view draws nothing without a label, and a segmented one never shows it. */
|
|
822
|
+
shownLabel = computed(() => this.label() ?? '', /* @ts-ignore */
|
|
823
|
+
...(ngDevMode ? [{ debugName: "shownLabel" }] : /* istanbul ignore next */ []));
|
|
758
824
|
/** Whether Android's dropdown is open. */
|
|
759
825
|
open = signal(false, /* @ts-ignore */
|
|
760
826
|
...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
|
|
@@ -795,7 +861,7 @@ export class UiPicker {
|
|
|
795
861
|
this.touch.emit();
|
|
796
862
|
}
|
|
797
863
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiPicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
798
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", type: UiPicker, isStandalone: true, selector: "ui-picker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, systemImage: { classPropertyName: "systemImage", publicName: "systemImage", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, pickerStyle: { classPropertyName: "pickerStyle", publicName: "pickerStyle", isSignal: true, isRequired: false, transformFunction: null }, modifiers: { classPropertyName: "modifiers", publicName: "modifiers", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touch: "touch", selectionChange: "selectionChange" }, host: { properties: { "label": "android ? undefined :
|
|
864
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", type: UiPicker, isStandalone: true, selector: "ui-picker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, systemImage: { classPropertyName: "systemImage", publicName: "systemImage", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, pickerStyle: { classPropertyName: "pickerStyle", publicName: "pickerStyle", isSignal: true, isRequired: false, transformFunction: null }, modifiers: { classPropertyName: "modifiers", publicName: "modifiers", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touch: "touch", selectionChange: "selectionChange" }, host: { properties: { "label": "android ? undefined : shownLabel()", "systemImage": "android ? undefined : systemImage()", "selection": "android ? undefined : value()", "modifiers": "android ? undefined : resolvedModifiers()" } }, ngImport: i0, template: `
|
|
799
865
|
@if (android) {
|
|
800
866
|
@if (pickerStyle() === 'segmented') {
|
|
801
867
|
<ui-single-choice-segmented-button-row>
|
|
@@ -890,7 +956,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
|
|
|
890
956
|
}
|
|
891
957
|
`,
|
|
892
958
|
host: {
|
|
893
|
-
'[label]': 'android ? undefined :
|
|
959
|
+
'[label]': 'android ? undefined : shownLabel()',
|
|
894
960
|
'[systemImage]': 'android ? undefined : systemImage()',
|
|
895
961
|
'[selection]': 'android ? undefined : value()',
|
|
896
962
|
'[modifiers]': 'android ? undefined : resolvedModifiers()',
|
|
@@ -918,7 +984,7 @@ export class UiToggle {
|
|
|
918
984
|
this.isOnChange.emit(withNativeEvent(event, { isOn: event.nativeEvent.value }));
|
|
919
985
|
}
|
|
920
986
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiToggle, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
921
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.0", type: UiToggle, isStandalone: true, selector: "ui-toggle", inputs: { isOn: { classPropertyName: "isOn", publicName: "isOn", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, modifiers: { classPropertyName: "modifiers", publicName: "modifiers", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOnChange: "isOnChange" }, host: { listeners: { "checkedChange": "android && checked($event)" }, properties: { "isOn": "android ? undefined : isOn()", "value": "android ? (isOn() ?? switchedOn()) : undefined", "label": "label()", "modifiers": "modifiers()" } }, ngImport: i0, template: '<ng-content />', isInline: true });
|
|
987
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.0", type: UiToggle, isStandalone: true, selector: "ui-toggle", inputs: { isOn: { classPropertyName: "isOn", publicName: "isOn", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, modifiers: { classPropertyName: "modifiers", publicName: "modifiers", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOnChange: "isOnChange" }, host: { listeners: { "checkedChange": "android && checked($event)" }, properties: { "isOn": "android ? undefined : isOn()", "value": "android ? (isOn() ?? switchedOn()) : undefined", "label": "android ? undefined : label()", "modifiers": "modifiers()" } }, ngImport: i0, template: '<ng-content />', isInline: true });
|
|
922
988
|
}
|
|
923
989
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiToggle, decorators: [{
|
|
924
990
|
type: Component,
|
|
@@ -928,7 +994,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
|
|
|
928
994
|
host: {
|
|
929
995
|
'[isOn]': 'android ? undefined : isOn()',
|
|
930
996
|
'[value]': 'android ? (isOn() ?? switchedOn()) : undefined',
|
|
931
|
-
'[label]': 'label()',
|
|
997
|
+
'[label]': 'android ? undefined : label()',
|
|
932
998
|
'[modifiers]': 'modifiers()',
|
|
933
999
|
'(checkedChange)': 'android && checked($event)',
|
|
934
1000
|
},
|
|
@@ -1019,12 +1085,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
|
|
|
1019
1085
|
},
|
|
1020
1086
|
}]
|
|
1021
1087
|
}], 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"] }] } });
|
|
1022
|
-
/**
|
|
1088
|
+
/**
|
|
1089
|
+
* A SwiftUI `Gauge`: `value` between `min` and `max`, drawn as `type` says, with its labels drawn as
|
|
1090
|
+
* text in the slots SwiftUI reads them from, as `@expo/ui`'s `Gauge` draws them.
|
|
1091
|
+
*/
|
|
1023
1092
|
export class UiGauge {
|
|
1024
1093
|
nativeView = nativeView();
|
|
1025
1094
|
value = input(undefined, { ...(ngDevMode ? { debugName: "value" } : /* istanbul ignore next */ {}), transform: optionalNumber });
|
|
1026
1095
|
min = input(undefined, { ...(ngDevMode ? { debugName: "min" } : /* istanbul ignore next */ {}), transform: optionalNumber });
|
|
1027
1096
|
max = input(undefined, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), transform: optionalNumber });
|
|
1097
|
+
/**
|
|
1098
|
+
* How it is drawn, as the `gaugeStyle` modifier: `'automatic'`, `'circular'`,
|
|
1099
|
+
* `'circularCapacity'`, `'linear'` or `'linearCapacity'`.
|
|
1100
|
+
*/
|
|
1028
1101
|
type = input(/* @ts-ignore */
|
|
1029
1102
|
...(ngDevMode ? [undefined, { debugName: "type" }] : /* istanbul ignore next */ []));
|
|
1030
1103
|
currentValueLabel = input(/* @ts-ignore */
|
|
@@ -1035,23 +1108,43 @@ export class UiGauge {
|
|
|
1035
1108
|
...(ngDevMode ? [undefined, { debugName: "maximumValueLabel" }] : /* istanbul ignore next */ []));
|
|
1036
1109
|
modifiers = input(/* @ts-ignore */
|
|
1037
1110
|
...(ngDevMode ? [undefined, { debugName: "modifiers" }] : /* istanbul ignore next */ []));
|
|
1111
|
+
resolvedModifiers = computed(() => {
|
|
1112
|
+
const style = this.type();
|
|
1113
|
+
return withModifiers(this.modifiers(), style !== undefined && { $type: 'gaugeStyle', style });
|
|
1114
|
+
}, /* @ts-ignore */
|
|
1115
|
+
...(ngDevMode ? [{ debugName: "resolvedModifiers" }] : /* istanbul ignore next */ []));
|
|
1038
1116
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiGauge, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1039
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.
|
|
1117
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", type: UiGauge, isStandalone: true, selector: "ui-gauge", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, currentValueLabel: { classPropertyName: "currentValueLabel", publicName: "currentValueLabel", isSignal: true, isRequired: false, transformFunction: null }, minimumValueLabel: { classPropertyName: "minimumValueLabel", publicName: "minimumValueLabel", isSignal: true, isRequired: false, transformFunction: null }, maximumValueLabel: { classPropertyName: "maximumValueLabel", publicName: "maximumValueLabel", isSignal: true, isRequired: false, transformFunction: null }, modifiers: { classPropertyName: "modifiers", publicName: "modifiers", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "value": "value()", "min": "min()", "max": "max()", "modifiers": "resolvedModifiers()" } }, ngImport: i0, template: `@if (currentValueLabel() !== undefined) {
|
|
1118
|
+
<ui-slot name="currentValue"><ui-text [text]="currentValueLabel()" /></ui-slot>
|
|
1119
|
+
}
|
|
1120
|
+
@if (minimumValueLabel() !== undefined) {
|
|
1121
|
+
<ui-slot name="minimumValue"><ui-text [text]="minimumValueLabel()" /></ui-slot>
|
|
1122
|
+
}
|
|
1123
|
+
@if (maximumValueLabel() !== undefined) {
|
|
1124
|
+
<ui-slot name="maximumValue"><ui-text [text]="maximumValueLabel()" /></ui-slot>
|
|
1125
|
+
}
|
|
1126
|
+
<ng-content />`, isInline: true, dependencies: [{ kind: "component", type: UiSlot, selector: "ui-slot", inputs: ["name", "extraProps"] }, { kind: "component", type: UiText, selector: "ui-text", inputs: ["text", "date", "dateStyle", "timerInterval", "countsDown", "modifiers"] }] });
|
|
1040
1127
|
}
|
|
1041
1128
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiGauge, decorators: [{
|
|
1042
1129
|
type: Component,
|
|
1043
1130
|
args: [{
|
|
1044
1131
|
selector: 'ui-gauge',
|
|
1045
|
-
|
|
1132
|
+
imports: [UiSlot, UiText],
|
|
1133
|
+
template: `@if (currentValueLabel() !== undefined) {
|
|
1134
|
+
<ui-slot name="currentValue"><ui-text [text]="currentValueLabel()" /></ui-slot>
|
|
1135
|
+
}
|
|
1136
|
+
@if (minimumValueLabel() !== undefined) {
|
|
1137
|
+
<ui-slot name="minimumValue"><ui-text [text]="minimumValueLabel()" /></ui-slot>
|
|
1138
|
+
}
|
|
1139
|
+
@if (maximumValueLabel() !== undefined) {
|
|
1140
|
+
<ui-slot name="maximumValue"><ui-text [text]="maximumValueLabel()" /></ui-slot>
|
|
1141
|
+
}
|
|
1142
|
+
<ng-content />`,
|
|
1046
1143
|
host: {
|
|
1047
1144
|
'[value]': 'value()',
|
|
1048
1145
|
'[min]': 'min()',
|
|
1049
1146
|
'[max]': 'max()',
|
|
1050
|
-
'[
|
|
1051
|
-
'[currentValueLabel]': 'currentValueLabel()',
|
|
1052
|
-
'[minimumValueLabel]': 'minimumValueLabel()',
|
|
1053
|
-
'[maximumValueLabel]': 'maximumValueLabel()',
|
|
1054
|
-
'[modifiers]': 'modifiers()',
|
|
1147
|
+
'[modifiers]': 'resolvedModifiers()',
|
|
1055
1148
|
},
|
|
1056
1149
|
}]
|
|
1057
1150
|
}], 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 }] }] } });
|
|
@@ -1372,22 +1465,33 @@ export class UiLabel {
|
|
|
1372
1465
|
/** An SF Symbol name. */
|
|
1373
1466
|
systemImage = input(/* @ts-ignore */
|
|
1374
1467
|
...(ngDevMode ? [undefined, { debugName: "systemImage" }] : /* istanbul ignore next */ []));
|
|
1468
|
+
/**
|
|
1469
|
+
* The colour of the symbol alone, drawn as the label's icon in that colour, since SwiftUI's
|
|
1470
|
+
* label takes no colour. The `foregroundStyle` modifier colours the title too.
|
|
1471
|
+
*/
|
|
1375
1472
|
color = input(/* @ts-ignore */
|
|
1376
1473
|
...(ngDevMode ? [undefined, { debugName: "color" }] : /* istanbul ignore next */ []));
|
|
1377
1474
|
modifiers = input(/* @ts-ignore */
|
|
1378
1475
|
...(ngDevMode ? [undefined, { debugName: "modifiers" }] : /* istanbul ignore next */ []));
|
|
1476
|
+
/** The icon's colour, when there is a symbol to draw in it. */
|
|
1477
|
+
iconColor = computed(() => this.systemImage() === undefined ? undefined : foregroundColor(this.color()), /* @ts-ignore */
|
|
1478
|
+
...(ngDevMode ? [{ debugName: "iconColor" }] : /* istanbul ignore next */ []));
|
|
1379
1479
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiLabel, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1380
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.
|
|
1480
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", type: UiLabel, isStandalone: true, selector: "ui-label", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, systemImage: { classPropertyName: "systemImage", publicName: "systemImage", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, modifiers: { classPropertyName: "modifiers", publicName: "modifiers", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "title": "title()", "systemImage": "systemImage()", "modifiers": "modifiers()" } }, ngImport: i0, template: `@if (iconColor(); as color) {
|
|
1481
|
+
<ui-slot name="icon"><ui-image [systemName]="systemImage()" [modifiers]="[color]" /></ui-slot>
|
|
1482
|
+
}`, isInline: true, dependencies: [{ kind: "component", type: UiImage, selector: "ui-image", inputs: ["systemName", "assetName", "uiImage", "size", "color", "modifiers"] }, { kind: "component", type: UiSlot, selector: "ui-slot", inputs: ["name", "extraProps"] }] });
|
|
1381
1483
|
}
|
|
1382
1484
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiLabel, decorators: [{
|
|
1383
1485
|
type: Component,
|
|
1384
1486
|
args: [{
|
|
1385
1487
|
selector: 'ui-label',
|
|
1386
|
-
|
|
1488
|
+
imports: [UiImage, UiSlot],
|
|
1489
|
+
template: `@if (iconColor(); as color) {
|
|
1490
|
+
<ui-slot name="icon"><ui-image [systemName]="systemImage()" [modifiers]="[color]" /></ui-slot>
|
|
1491
|
+
}`,
|
|
1387
1492
|
host: {
|
|
1388
1493
|
'[title]': 'title()',
|
|
1389
1494
|
'[systemImage]': 'systemImage()',
|
|
1390
|
-
'[color]': 'color()',
|
|
1391
1495
|
'[modifiers]': 'modifiers()',
|
|
1392
1496
|
},
|
|
1393
1497
|
}]
|