@joanroucoux/cairn-ui 0.6.0 → 0.6.1
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.
|
@@ -1,6 +1,39 @@
|
|
|
1
1
|
import * as _angular_core from '@angular/core';
|
|
2
2
|
import { InjectionToken, Signal, ElementRef } from '@angular/core';
|
|
3
3
|
|
|
4
|
+
/**
|
|
5
|
+
* Bar of actions fixed above the tab bar on iPhone: the primary actions of a detail screen, within
|
|
6
|
+
* thumb reach. It sits 52px plus the safe area above the bottom edge, so it clears `ui-tab-bar`, and
|
|
7
|
+
* it is hidden from `64rem`, where the same actions live in the page itself. Its children share the
|
|
8
|
+
* width equally.
|
|
9
|
+
*
|
|
10
|
+
* @example
|
|
11
|
+
* <ui-action-bar>
|
|
12
|
+
* <button ui-button variant="outline" size="tall">Sell</button>
|
|
13
|
+
* <button ui-button size="tall">Buy</button>
|
|
14
|
+
* </ui-action-bar>
|
|
15
|
+
*/
|
|
16
|
+
declare class UiActionBar {
|
|
17
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiActionBar, never>;
|
|
18
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiActionBar, "ui-action-bar", never, {}, {}, never, ["*"], true, never>;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
declare const ALERT_VARIANTS: readonly ["error", "warning"];
|
|
22
|
+
type AlertVariant = (typeof ALERT_VARIANTS)[number];
|
|
23
|
+
/**
|
|
24
|
+
* Inline message explaining a failure or a consequence: an icon, an optional heading and a text.
|
|
25
|
+
*
|
|
26
|
+
* @example
|
|
27
|
+
* <ui-alert heading="Sign-in failed">Try again.</ui-alert>
|
|
28
|
+
*/
|
|
29
|
+
declare class UiAlert {
|
|
30
|
+
readonly variant: _angular_core.InputSignal<"error" | "warning">;
|
|
31
|
+
readonly heading: _angular_core.InputSignal<string | undefined>;
|
|
32
|
+
protected readonly classes: _angular_core.Signal<string>;
|
|
33
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiAlert, never>;
|
|
34
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiAlert, "ui-alert", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "heading": { "alias": "heading"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
35
|
+
}
|
|
36
|
+
|
|
4
37
|
/** App-wide "amounts are hidden" state. Defaults to never masked; the app overrides it. */
|
|
5
38
|
declare const UI_AMOUNT_MASKED: InjectionToken<Signal<boolean>>;
|
|
6
39
|
/** Available figure styles. `AmountNumeric` is derived from this tuple. */
|
|
@@ -41,25 +74,15 @@ type AmountFormatOptions = {
|
|
|
41
74
|
/** Formats a number or an amount for the locale, with a missing value as an em dash and masking behind four bullets. */
|
|
42
75
|
declare function formatAmount(value: number | null | undefined, options: AmountFormatOptions, masked?: boolean): string;
|
|
43
76
|
|
|
44
|
-
declare const ALERT_VARIANTS: readonly ["error", "warning"];
|
|
45
|
-
type AlertVariant = (typeof ALERT_VARIANTS)[number];
|
|
46
|
-
/**
|
|
47
|
-
* Inline message explaining a failure or a consequence: an icon, an optional heading and a text.
|
|
48
|
-
*
|
|
49
|
-
* @example
|
|
50
|
-
* <ui-alert heading="Sign-in failed">Try again.</ui-alert>
|
|
51
|
-
*/
|
|
52
|
-
declare class UiAlert {
|
|
53
|
-
readonly variant: _angular_core.InputSignal<"error" | "warning">;
|
|
54
|
-
readonly heading: _angular_core.InputSignal<string | undefined>;
|
|
55
|
-
protected readonly classes: _angular_core.Signal<string>;
|
|
56
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiAlert, never>;
|
|
57
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiAlert, "ui-alert", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "heading": { "alias": "heading"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
58
|
-
}
|
|
59
|
-
|
|
60
77
|
/** Available async block states. `AsyncState` is derived from this tuple. */
|
|
61
78
|
declare const ASYNC_STATES: readonly ["loading", "error", "empty", "ready"];
|
|
62
79
|
type AsyncState = (typeof ASYNC_STATES)[number];
|
|
80
|
+
/** Looks of the error block. `AsyncVariant` is derived from this tuple. */
|
|
81
|
+
declare const ASYNC_VARIANTS: readonly ["elevated", "plain", "emphasis", "inline"];
|
|
82
|
+
type AsyncVariant = (typeof ASYNC_VARIANTS)[number];
|
|
83
|
+
/** Alignments of the error block; `auto` is centred from 64rem. `AsyncAlign` is derived from this tuple. */
|
|
84
|
+
declare const ASYNC_ALIGNS: readonly ["start", "center", "auto"];
|
|
85
|
+
type AsyncAlign = (typeof ASYNC_ALIGNS)[number];
|
|
63
86
|
/**
|
|
64
87
|
* The three states of a block that depends on a service call, next to the ready content.
|
|
65
88
|
*
|
|
@@ -71,18 +94,28 @@ type AsyncState = (typeof ASYNC_STATES)[number];
|
|
|
71
94
|
* </ui-async>
|
|
72
95
|
*/
|
|
73
96
|
declare class UiAsync {
|
|
97
|
+
#private;
|
|
74
98
|
readonly state: _angular_core.InputSignal<"error" | "loading" | "empty" | "ready">;
|
|
75
99
|
readonly errorTitle: _angular_core.InputSignal<string | undefined>;
|
|
76
100
|
readonly errorMessage: _angular_core.InputSignal<string | undefined>;
|
|
77
101
|
readonly retryLabel: _angular_core.InputSignal<string | undefined>;
|
|
102
|
+
readonly variant: _angular_core.InputSignal<"elevated" | "plain" | "emphasis" | "inline">;
|
|
103
|
+
readonly align: _angular_core.InputSignal<"start" | "center" | "auto">;
|
|
104
|
+
readonly card: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
105
|
+
readonly fill: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
78
106
|
readonly retry: _angular_core.OutputEmitterRef<void>;
|
|
79
|
-
protected readonly
|
|
107
|
+
protected readonly filling: _angular_core.Signal<boolean>;
|
|
108
|
+
protected readonly iconSize: _angular_core.Signal<16 | 18>;
|
|
109
|
+
protected readonly boxClasses: _angular_core.Signal<string>;
|
|
110
|
+
protected readonly titleClasses: _angular_core.Signal<string>;
|
|
111
|
+
protected readonly messageClasses: _angular_core.Signal<string>;
|
|
112
|
+
protected readonly retryButtonClasses: _angular_core.Signal<string>;
|
|
80
113
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiAsync, never>;
|
|
81
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiAsync, "ui-async", never, { "state": { "alias": "state"; "required": true; "isSignal": true; }; "errorTitle": { "alias": "errorTitle"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "retryLabel": { "alias": "retryLabel"; "required": false; "isSignal": true; }; }, { "retry": "retry"; }, never, ["[asyncLoading]", "[asyncEmpty]", "*"], true, never>;
|
|
114
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiAsync, "ui-async", never, { "state": { "alias": "state"; "required": true; "isSignal": true; }; "errorTitle": { "alias": "errorTitle"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "retryLabel": { "alias": "retryLabel"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "card": { "alias": "card"; "required": false; "isSignal": true; }; "fill": { "alias": "fill"; "required": false; "isSignal": true; }; }, { "retry": "retry"; }, never, ["[asyncLoading]", "[asyncEmpty]", "*"], true, never>;
|
|
82
115
|
}
|
|
83
116
|
|
|
84
117
|
/** Available avatar sizes. `AvatarSize` is derived from this tuple. */
|
|
85
|
-
declare const AVATAR_SIZES: readonly ["sm", "md", "lg"];
|
|
118
|
+
declare const AVATAR_SIZES: readonly ["sm", "md", "lg", "auto"];
|
|
86
119
|
type AvatarSize = (typeof AVATAR_SIZES)[number];
|
|
87
120
|
/**
|
|
88
121
|
* Initials in a disc, standing in for a person. Single-user application: there is exactly one.
|
|
@@ -93,11 +126,39 @@ type AvatarSize = (typeof AVATAR_SIZES)[number];
|
|
|
93
126
|
declare class UiAvatar {
|
|
94
127
|
readonly initials: _angular_core.InputSignal<string>;
|
|
95
128
|
readonly label: _angular_core.InputSignal<string>;
|
|
96
|
-
readonly size: _angular_core.InputSignal<"sm" | "md" | "lg">;
|
|
129
|
+
readonly size: _angular_core.InputSignal<"auto" | "sm" | "md" | "lg">;
|
|
97
130
|
protected readonly classes: _angular_core.Signal<string>;
|
|
98
131
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiAvatar, never>;
|
|
99
132
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiAvatar, "ui-avatar", never, { "initials": { "alias": "initials"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
100
133
|
}
|
|
134
|
+
/**
|
|
135
|
+
* Round hit area around a `ui-avatar` that links somewhere: 44px on touch, 40px from 64rem, with a
|
|
136
|
+
* glow on hover and the press scale. The avatar itself keeps its own size.
|
|
137
|
+
*
|
|
138
|
+
* @example
|
|
139
|
+
* <a uiAvatarLink routerLink="/profile"><ui-avatar initials="JR" label="Profile" size="auto" /></a>
|
|
140
|
+
*/
|
|
141
|
+
declare class UiAvatarLink {
|
|
142
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiAvatarLink, never>;
|
|
143
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<UiAvatarLink, "a[uiAvatarLink], button[uiAvatarLink]", never, {}, {}, never, never, true, never>;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
/** Available back link sizes. `BackLinkSize` is derived from this tuple. */
|
|
147
|
+
declare const BACK_LINK_SIZES: readonly ["md", "sm", "header"];
|
|
148
|
+
type BackLinkSize = (typeof BACK_LINK_SIZES)[number];
|
|
149
|
+
/**
|
|
150
|
+
* Link back to the parent screen: a chevron and the name of the destination.
|
|
151
|
+
*
|
|
152
|
+
* @example
|
|
153
|
+
* <a ui-back-link routerLink="/accounts">Accounts</a>
|
|
154
|
+
*/
|
|
155
|
+
declare class UiBackLink {
|
|
156
|
+
readonly size: _angular_core.InputSignal<"sm" | "md" | "header">;
|
|
157
|
+
protected readonly chevron: _angular_core.Signal<number>;
|
|
158
|
+
protected readonly classes: _angular_core.Signal<string>;
|
|
159
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiBackLink, never>;
|
|
160
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiBackLink, "a[ui-back-link]", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
161
|
+
}
|
|
101
162
|
|
|
102
163
|
/** Available badge variants. `BadgeVariant` is derived from this tuple. */
|
|
103
164
|
declare const BADGE_VARIANTS: readonly ["neutral", "outline"];
|
|
@@ -119,10 +180,10 @@ declare class UiBadge {
|
|
|
119
180
|
}
|
|
120
181
|
|
|
121
182
|
/** Available button variants. `ButtonVariant` is derived from this tuple. */
|
|
122
|
-
declare const BUTTON_VARIANTS: readonly ["primary", "outline", "ghost", "destructive"];
|
|
183
|
+
declare const BUTTON_VARIANTS: readonly ["primary", "outline", "ghost", "destructive", "quiet", "quiet-destructive", "outline-destructive", "quiet-glow", "tonal"];
|
|
123
184
|
type ButtonVariant = (typeof BUTTON_VARIANTS)[number];
|
|
124
185
|
/** Available button sizes. */
|
|
125
|
-
declare const BUTTON_SIZES: readonly ["md", "lg", "xl", "xxl", "icon"];
|
|
186
|
+
declare const BUTTON_SIZES: readonly ["compact", "slim", "xs", "sm", "md", "lg", "xl", "xxl", "tall", "block", "icon", "icon-sm"];
|
|
126
187
|
type ButtonSize = (typeof BUTTON_SIZES)[number];
|
|
127
188
|
/**
|
|
128
189
|
* Styled native button or anchor, applied as an attribute so the host keeps every native behavior.
|
|
@@ -132,33 +193,42 @@ type ButtonSize = (typeof BUTTON_SIZES)[number];
|
|
|
132
193
|
* <button ui-button size="icon" variant="ghost" aria-label="More actions">...</button>
|
|
133
194
|
*/
|
|
134
195
|
declare class UiButton {
|
|
135
|
-
readonly variant: _angular_core.InputSignal<"outline" | "primary" | "ghost" | "destructive">;
|
|
136
|
-
readonly size: _angular_core.InputSignal<"md" | "lg" | "xl" | "xxl" | "icon">;
|
|
196
|
+
readonly variant: _angular_core.InputSignal<"outline" | "primary" | "ghost" | "destructive" | "quiet" | "quiet-destructive" | "outline-destructive" | "quiet-glow" | "tonal">;
|
|
197
|
+
readonly size: _angular_core.InputSignal<"compact" | "sm" | "md" | "lg" | "slim" | "xs" | "xl" | "xxl" | "tall" | "block" | "icon" | "icon-sm">;
|
|
137
198
|
readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
199
|
+
readonly busy: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
200
|
+
protected readonly inactive: _angular_core.Signal<boolean>;
|
|
138
201
|
protected readonly classes: _angular_core.Signal<string>;
|
|
139
202
|
constructor();
|
|
140
203
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiButton, never>;
|
|
141
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiButton, "button[ui-button], a[ui-button]", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
204
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiButton, "button[ui-button], a[ui-button]", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "busy": { "alias": "busy"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
142
205
|
}
|
|
143
206
|
|
|
144
207
|
/** Available card variants. `CardVariant` is derived from this tuple. */
|
|
145
208
|
declare const CARD_VARIANTS: readonly ["default", "elevated"];
|
|
146
209
|
type CardVariant = (typeof CARD_VARIANTS)[number];
|
|
147
210
|
/** Available card paddings. `CardPadding` is derived from this tuple. */
|
|
148
|
-
declare const CARD_PADDINGS: readonly ["none", "sm", "md", "list"];
|
|
211
|
+
declare const CARD_PADDINGS: readonly ["none", "sm", "md", "list", "rows"];
|
|
149
212
|
type CardPadding = (typeof CARD_PADDINGS)[number];
|
|
213
|
+
/** Where the card surface (fill, border, radius) and its padding apply. `CardSurface` is derived from this tuple. */
|
|
214
|
+
declare const CARD_SURFACES: readonly ["always", "lg", "max-lg"];
|
|
215
|
+
type CardSurface = (typeof CARD_SURFACES)[number];
|
|
150
216
|
/**
|
|
151
|
-
* Surface that groups related content: a summary block, a table, a side panel.
|
|
217
|
+
* Surface that groups related content: a summary block, a table, a side panel. `surface` limits the
|
|
218
|
+
* fill, border, radius and padding to one side of `64rem`, for a block that is a card on a desktop and
|
|
219
|
+
* plain on an iPhone, or the reverse.
|
|
152
220
|
*
|
|
153
221
|
* @example
|
|
154
222
|
* <ui-card variant="elevated" padding="sm">Total</ui-card>
|
|
223
|
+
* <ui-card surface="max-lg">Card on an iPhone, plain on a desktop</ui-card>
|
|
155
224
|
*/
|
|
156
225
|
declare class UiCard {
|
|
157
|
-
readonly variant: _angular_core.InputSignal<"
|
|
158
|
-
readonly padding: _angular_core.InputSignal<"sm" | "md" | "none" | "list">;
|
|
226
|
+
readonly variant: _angular_core.InputSignal<"elevated" | "default">;
|
|
227
|
+
readonly padding: _angular_core.InputSignal<"sm" | "md" | "none" | "list" | "rows">;
|
|
228
|
+
readonly surface: _angular_core.InputSignal<"lg" | "always" | "max-lg">;
|
|
159
229
|
protected readonly classes: _angular_core.Signal<string>;
|
|
160
230
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiCard, never>;
|
|
161
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiCard, "ui-card", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "padding": { "alias": "padding"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
231
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiCard, "ui-card", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "padding": { "alias": "padding"; "required": false; "isSignal": true; }; "surface": { "alias": "surface"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
162
232
|
}
|
|
163
233
|
|
|
164
234
|
/**
|
|
@@ -218,6 +288,12 @@ declare class UiChoiceChips implements UiControl {
|
|
|
218
288
|
/** Available delta emphases. `DeltaEmphasis` is derived from this tuple. */
|
|
219
289
|
declare const DELTA_EMPHASES: readonly ["text", "pill"];
|
|
220
290
|
type DeltaEmphasis = (typeof DELTA_EMPHASES)[number];
|
|
291
|
+
/** Type sizes. `DeltaSize` is derived from this tuple. */
|
|
292
|
+
declare const DELTA_SIZES: readonly ["label", "inherit"];
|
|
293
|
+
type DeltaSize = (typeof DELTA_SIZES)[number];
|
|
294
|
+
/** Font weights. `DeltaWeight` is derived from this tuple. */
|
|
295
|
+
declare const DELTA_WEIGHTS: readonly ["medium", "regular"];
|
|
296
|
+
type DeltaWeight = (typeof DELTA_WEIGHTS)[number];
|
|
221
297
|
type Sign = 'positive' | 'negative' | 'neutral' | 'unknown';
|
|
222
298
|
/**
|
|
223
299
|
* Signed amount whose sign carries meaning: a gain, a loss, or an unknown.
|
|
@@ -235,10 +311,12 @@ declare class UiDelta {
|
|
|
235
311
|
readonly value: _angular_core.InputSignal<number | null | undefined>;
|
|
236
312
|
readonly unknownLabel: _angular_core.InputSignal<string>;
|
|
237
313
|
readonly emphasis: _angular_core.InputSignal<"text" | "pill">;
|
|
314
|
+
readonly size: _angular_core.InputSignal<"label" | "inherit">;
|
|
315
|
+
readonly weight: _angular_core.InputSignal<"medium" | "regular">;
|
|
238
316
|
protected readonly sign: _angular_core.Signal<Sign>;
|
|
239
317
|
protected readonly classes: _angular_core.Signal<string>;
|
|
240
318
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiDelta, never>;
|
|
241
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiDelta, "ui-delta", never, { "value": { "alias": "value"; "required": true; "isSignal": true; }; "unknownLabel": { "alias": "unknownLabel"; "required": true; "isSignal": true; }; "emphasis": { "alias": "emphasis"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
319
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiDelta, "ui-delta", never, { "value": { "alias": "value"; "required": true; "isSignal": true; }; "unknownLabel": { "alias": "unknownLabel"; "required": true; "isSignal": true; }; "emphasis": { "alias": "emphasis"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "weight": { "alias": "weight"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
242
320
|
}
|
|
243
321
|
|
|
244
322
|
/** Named dialog widths; any other CSS length is accepted as is. `DialogWidth` is derived from this tuple. */
|
|
@@ -279,6 +357,9 @@ declare class UiDialog {
|
|
|
279
357
|
readonly dismissed: _angular_core.OutputEmitterRef<void>;
|
|
280
358
|
protected readonly headingId: string;
|
|
281
359
|
protected readonly descriptionId: string;
|
|
360
|
+
protected readonly bodyId: string;
|
|
361
|
+
protected readonly scrollable: _angular_core.WritableSignal<boolean>;
|
|
362
|
+
protected readonly describedBy: _angular_core.Signal<string | null>;
|
|
282
363
|
protected readonly widthValue: _angular_core.Signal<string>;
|
|
283
364
|
protected readonly spec: _angular_core.Signal<LayoutClasses>;
|
|
284
365
|
protected readonly headerClasses: _angular_core.Signal<string>;
|
|
@@ -326,6 +407,7 @@ declare class UiDonut {
|
|
|
326
407
|
readonly othersLabel: _angular_core.InputSignal<string>;
|
|
327
408
|
readonly valueFormat: _angular_core.InputSignal<(value: number) => string>;
|
|
328
409
|
readonly shareFormat: _angular_core.InputSignal<(share: number) => string>;
|
|
410
|
+
readonly legendHref: _angular_core.InputSignal<((id: string) => string | null) | undefined>;
|
|
329
411
|
readonly sliceSelect: _angular_core.OutputEmitterRef<string>;
|
|
330
412
|
protected readonly activeId: _angular_core.WritableSignal<string | null>;
|
|
331
413
|
protected readonly ranked: _angular_core.Signal<RankedSlice[]>;
|
|
@@ -342,9 +424,63 @@ declare class UiDonut {
|
|
|
342
424
|
protected isActive(slice: RankedSlice): boolean;
|
|
343
425
|
protected highlight(id: string): void;
|
|
344
426
|
protected clearHighlight(id: string): void;
|
|
427
|
+
protected hrefFor(id: string): string | null;
|
|
428
|
+
protected follow(event: MouseEvent, slice: RankedSlice): void;
|
|
345
429
|
protected select(slice: RankedSlice): void;
|
|
346
430
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiDonut, never>;
|
|
347
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiDonut, "ui-donut", never, { "slices": { "alias": "slices"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "othersLabel": { "alias": "othersLabel"; "required": true; "isSignal": true; }; "valueFormat": { "alias": "valueFormat"; "required": false; "isSignal": true; }; "shareFormat": { "alias": "shareFormat"; "required": false; "isSignal": true; }; }, { "sliceSelect": "sliceSelect"; }, never, never, true, never>;
|
|
431
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiDonut, "ui-donut", never, { "slices": { "alias": "slices"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "othersLabel": { "alias": "othersLabel"; "required": true; "isSignal": true; }; "valueFormat": { "alias": "valueFormat"; "required": false; "isSignal": true; }; "shareFormat": { "alias": "shareFormat"; "required": false; "isSignal": true; }; "legendHref": { "alias": "legendHref"; "required": false; "isSignal": true; }; }, { "sliceSelect": "sliceSelect"; }, never, never, true, never>;
|
|
432
|
+
}
|
|
433
|
+
|
|
434
|
+
/**
|
|
435
|
+
* Link to another site: the label followed by an external-link icon. A 44px target on touch,
|
|
436
|
+
* an underline on hover with a mouse.
|
|
437
|
+
*
|
|
438
|
+
* @example
|
|
439
|
+
* <a ui-external-link href="https://example.com" target="_blank" rel="noopener">Page on example.com</a>
|
|
440
|
+
*/
|
|
441
|
+
declare class UiExternalLink {
|
|
442
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiExternalLink, never>;
|
|
443
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiExternalLink, "a[ui-external-link]", never, {}, {}, never, ["*"], true, never>;
|
|
444
|
+
}
|
|
445
|
+
|
|
446
|
+
/** Available fact row sizes. `FactSize` is derived from this tuple. */
|
|
447
|
+
declare const FACT_SIZES: readonly ["md", "sm", "auto"];
|
|
448
|
+
type FactSize = (typeof FACT_SIZES)[number];
|
|
449
|
+
/** Colour of the line under a fact value. `stale` flags an out-of-date figure. */
|
|
450
|
+
declare const FACT_SUB_TONES: readonly ["subtle", "stale"];
|
|
451
|
+
type FactSubTone = (typeof FACT_SUB_TONES)[number];
|
|
452
|
+
/**
|
|
453
|
+
* The list that holds `div[ui-fact]` rows, as a native description list.
|
|
454
|
+
*
|
|
455
|
+
* @example
|
|
456
|
+
* <dl uiFacts>
|
|
457
|
+
* <div ui-fact label="Quantity">500</div>
|
|
458
|
+
* <div ui-fact label="Price" sub="24/09 · Yahoo">28,64 €</div>
|
|
459
|
+
* </dl>
|
|
460
|
+
*/
|
|
461
|
+
declare class UiFacts {
|
|
462
|
+
readonly ruled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
463
|
+
protected readonly classes: _angular_core.Signal<string>;
|
|
464
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiFacts, never>;
|
|
465
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<UiFacts, "dl[uiFacts]", never, { "ruled": { "alias": "ruled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
466
|
+
}
|
|
467
|
+
/**
|
|
468
|
+
* One fact of a `dl[uiFacts]`: a label on the left, its value on the right, an optional sub-line
|
|
469
|
+
* under the value, and a hairline above every row but the first at the `md` size (the `sm` desktop list is separated by space only). The projected content is the value.
|
|
470
|
+
*
|
|
471
|
+
* @example
|
|
472
|
+
* <div ui-fact label="Price" sub="24/09 · Yahoo" subTone="stale">28,64 €</div>
|
|
473
|
+
*/
|
|
474
|
+
declare class UiFact {
|
|
475
|
+
readonly label: _angular_core.InputSignal<string>;
|
|
476
|
+
readonly sub: _angular_core.InputSignal<string | undefined>;
|
|
477
|
+
readonly subTone: _angular_core.InputSignal<"subtle" | "stale">;
|
|
478
|
+
readonly size: _angular_core.InputSignal<"auto" | "sm" | "md">;
|
|
479
|
+
protected readonly classes: _angular_core.Signal<string>;
|
|
480
|
+
protected readonly valueClasses: _angular_core.Signal<string>;
|
|
481
|
+
protected readonly subClasses: _angular_core.Signal<string>;
|
|
482
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiFact, never>;
|
|
483
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiFact, "div[ui-fact]", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "sub": { "alias": "sub"; "required": false; "isSignal": true; }; "subTone": { "alias": "subTone"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
348
484
|
}
|
|
349
485
|
|
|
350
486
|
/**
|
|
@@ -362,6 +498,23 @@ declare class UiFieldLeading {
|
|
|
362
498
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiFieldLeading, never>;
|
|
363
499
|
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<UiFieldLeading, "[uiFieldLeading]", never, {}, {}, never, never, true, never>;
|
|
364
500
|
}
|
|
501
|
+
/**
|
|
502
|
+
* Marks an element, typically an icon button, as the trailing action of a `ui-field`: it sits on the
|
|
503
|
+
* control's right edge, square to the control's height, and the control's text is padded to clear it.
|
|
504
|
+
*
|
|
505
|
+
* @example
|
|
506
|
+
* <ui-field label="Password">
|
|
507
|
+
* <input uiInput type="password" size="xl" />
|
|
508
|
+
* <button uiFieldTrailing type="button" aria-label="Show the password" [attr.aria-pressed]="shown()">...</button>
|
|
509
|
+
* </ui-field>
|
|
510
|
+
*
|
|
511
|
+
* A toggle such as this one should carry `aria-pressed`. The slot shares the right edge with `unit`:
|
|
512
|
+
* set one or the other, not both.
|
|
513
|
+
*/
|
|
514
|
+
declare class UiFieldTrailing {
|
|
515
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiFieldTrailing, never>;
|
|
516
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<UiFieldTrailing, "[uiFieldTrailing]", never, {}, {}, never, never, true, never>;
|
|
517
|
+
}
|
|
365
518
|
/**
|
|
366
519
|
* Label, control, hint and error as one unit. The control stays a plain native element:
|
|
367
520
|
* the field finds it in its own projected content and wires the ARIA attributes onto it.
|
|
@@ -391,11 +544,14 @@ declare class UiField {
|
|
|
391
544
|
readonly hint: _angular_core.InputSignal<string | undefined>;
|
|
392
545
|
readonly error: _angular_core.InputSignal<string | undefined>;
|
|
393
546
|
readonly unit: _angular_core.InputSignal<string | undefined>;
|
|
547
|
+
readonly optional: _angular_core.InputSignal<string | undefined>;
|
|
548
|
+
readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
394
549
|
protected readonly hintId: string;
|
|
395
550
|
protected readonly errorId: string;
|
|
396
551
|
protected readonly control: _angular_core.Signal<UiControl | undefined>;
|
|
397
552
|
protected readonly leading: _angular_core.Signal<UiFieldLeading | undefined>;
|
|
398
|
-
protected readonly
|
|
553
|
+
protected readonly trailing: _angular_core.Signal<UiFieldTrailing | undefined>;
|
|
554
|
+
protected readonly rowClasses: _angular_core.Signal<string>;
|
|
399
555
|
protected readonly labelClasses: _angular_core.Signal<"sr-only" | "text-label leading-[17px] font-medium text-(--muted-foreground)">;
|
|
400
556
|
/**
|
|
401
557
|
* The caller's own `error` wins: it is the only way to report something the control does not
|
|
@@ -404,11 +560,35 @@ declare class UiField {
|
|
|
404
560
|
protected readonly message: _angular_core.Signal<string | undefined>;
|
|
405
561
|
constructor();
|
|
406
562
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiField, never>;
|
|
407
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiField, "ui-field", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "labelHidden": { "alias": "labelHidden"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "unit": { "alias": "unit"; "required": false; "isSignal": true; }; }, {}, ["control", "leading"], ["[uiFieldLeading]", "*"], true, never>;
|
|
563
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiField, "ui-field", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "labelHidden": { "alias": "labelHidden"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "unit": { "alias": "unit"; "required": false; "isSignal": true; }; "optional": { "alias": "optional"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; }, {}, ["control", "leading", "trailing"], ["[uiFieldLeading]", "*", "[uiFieldTrailing]"], true, never>;
|
|
564
|
+
}
|
|
565
|
+
|
|
566
|
+
type FilterChipOption = {
|
|
567
|
+
value: string;
|
|
568
|
+
label: string;
|
|
569
|
+
count?: number | string | null;
|
|
570
|
+
};
|
|
571
|
+
/**
|
|
572
|
+
* A row of single-choice filter pills, each with an optional count, that narrows a list in place:
|
|
573
|
+
* an asset class, a status. On touch it scrolls on one line, bleeding to the screen edges; with a
|
|
574
|
+
* fine pointer it wraps.
|
|
575
|
+
*
|
|
576
|
+
* @example
|
|
577
|
+
* <ui-filter-chips ariaLabel="Filter by class" [options]="classes()" [(value)]="selectedClass" />
|
|
578
|
+
*/
|
|
579
|
+
declare class UiFilterChips {
|
|
580
|
+
readonly options: _angular_core.InputSignal<FilterChipOption[]>;
|
|
581
|
+
readonly value: _angular_core.ModelSignal<string>;
|
|
582
|
+
readonly ariaLabel: _angular_core.InputSignal<string>;
|
|
583
|
+
protected readonly chipClasses = "flex-none flex h-11 items-center rounded-pill border-0 bg-transparent p-0 font-[inherit] cursor-pointer transition-transform duration-(--duration-press) ease-out active:scale-(--press-scale) focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--ring) pointer-fine:h-8 pointer-fine:focus-visible:outline-offset-2";
|
|
584
|
+
protected pillClasses(optionValue: string): string;
|
|
585
|
+
protected countClasses(optionValue: string): string;
|
|
586
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiFilterChips, never>;
|
|
587
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiFilterChips, "ui-filter-chips", never, { "options": { "alias": "options"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": true; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
|
|
408
588
|
}
|
|
409
589
|
|
|
410
|
-
/** Available control sizes. `md` is the 44/40px touch target. */
|
|
411
|
-
declare const CONTROL_SIZES: readonly ["sm", "md"];
|
|
590
|
+
/** Available control sizes. `md` is the 44/40px touch target; `lg` and `xl` are the 48px sheet and sign-in fields. */
|
|
591
|
+
declare const CONTROL_SIZES: readonly ["sm", "md", "lg", "xl"];
|
|
412
592
|
type ControlSize = (typeof CONTROL_SIZES)[number];
|
|
413
593
|
declare const CONTROL_SURFACES: readonly ["background", "card"];
|
|
414
594
|
type ControlSurface = (typeof CONTROL_SURFACES)[number];
|
|
@@ -424,7 +604,7 @@ type ControlSurface = (typeof CONTROL_SURFACES)[number];
|
|
|
424
604
|
* <input uiInput type="email" placeholder="you@example.com" />
|
|
425
605
|
*/
|
|
426
606
|
declare class UiInput implements UiControl {
|
|
427
|
-
readonly size: _angular_core.InputSignal<"sm" | "md">;
|
|
607
|
+
readonly size: _angular_core.InputSignal<"sm" | "md" | "lg" | "xl">;
|
|
428
608
|
readonly surface: _angular_core.InputSignal<"background" | "card">;
|
|
429
609
|
readonly errors: _angular_core.InputSignal<readonly UiControlError[]>;
|
|
430
610
|
readonly touched: _angular_core.InputSignal<boolean>;
|
|
@@ -488,6 +668,7 @@ declare class UiLineChart {
|
|
|
488
668
|
readonly points: _angular_core.InputSignal<ChartPoint[]>;
|
|
489
669
|
readonly label: _angular_core.InputSignal<string>;
|
|
490
670
|
readonly valueFormat: _angular_core.InputSignal<(value: number) => string>;
|
|
671
|
+
readonly tooltipFormat: _angular_core.InputSignal<((point: ChartPoint) => string) | undefined>;
|
|
491
672
|
readonly deltaFormat: _angular_core.InputSignal<(delta: number) => string>;
|
|
492
673
|
readonly timeFormat: _angular_core.InputSignal<(time: number) => string>;
|
|
493
674
|
readonly axisFormat: _angular_core.InputSignal<(time: number) => string>;
|
|
@@ -495,7 +676,7 @@ declare class UiLineChart {
|
|
|
495
676
|
readonly timeColumnLabel: _angular_core.InputSignal<string>;
|
|
496
677
|
readonly valueColumnLabel: _angular_core.InputSignal<string>;
|
|
497
678
|
readonly sparkline: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
498
|
-
readonly tooltip: _angular_core.InputSignal<"compact" | "
|
|
679
|
+
readonly tooltip: _angular_core.InputSignal<"compact" | "auto" | "large">;
|
|
499
680
|
readonly tooltipDelta: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
500
681
|
readonly axisGap: _angular_core.InputSignal<number | "auto">;
|
|
501
682
|
readonly axisTicks: _angular_core.InputSignalWithTransform<AxisTicks, string | 3 | 5>;
|
|
@@ -535,7 +716,7 @@ declare class UiLineChart {
|
|
|
535
716
|
protected onPointerLeave(): void;
|
|
536
717
|
protected onKeydown(event: KeyboardEvent): void;
|
|
537
718
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiLineChart, never>;
|
|
538
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiLineChart, "ui-line-chart", never, { "points": { "alias": "points"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "valueFormat": { "alias": "valueFormat"; "required": false; "isSignal": true; }; "deltaFormat": { "alias": "deltaFormat"; "required": false; "isSignal": true; }; "timeFormat": { "alias": "timeFormat"; "required": false; "isSignal": true; }; "axisFormat": { "alias": "axisFormat"; "required": false; "isSignal": true; }; "startLabel": { "alias": "startLabel"; "required": false; "isSignal": true; }; "timeColumnLabel": { "alias": "timeColumnLabel"; "required": false; "isSignal": true; }; "valueColumnLabel": { "alias": "valueColumnLabel"; "required": false; "isSignal": true; }; "sparkline": { "alias": "sparkline"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; "tooltipDelta": { "alias": "tooltipDelta"; "required": false; "isSignal": true; }; "axisGap": { "alias": "axisGap"; "required": false; "isSignal": true; }; "axisTicks": { "alias": "axisTicks"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
719
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiLineChart, "ui-line-chart", never, { "points": { "alias": "points"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "valueFormat": { "alias": "valueFormat"; "required": false; "isSignal": true; }; "tooltipFormat": { "alias": "tooltipFormat"; "required": false; "isSignal": true; }; "deltaFormat": { "alias": "deltaFormat"; "required": false; "isSignal": true; }; "timeFormat": { "alias": "timeFormat"; "required": false; "isSignal": true; }; "axisFormat": { "alias": "axisFormat"; "required": false; "isSignal": true; }; "startLabel": { "alias": "startLabel"; "required": false; "isSignal": true; }; "timeColumnLabel": { "alias": "timeColumnLabel"; "required": false; "isSignal": true; }; "valueColumnLabel": { "alias": "valueColumnLabel"; "required": false; "isSignal": true; }; "sparkline": { "alias": "sparkline"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; "tooltipDelta": { "alias": "tooltipDelta"; "required": false; "isSignal": true; }; "axisGap": { "alias": "axisGap"; "required": false; "isSignal": true; }; "axisTicks": { "alias": "axisTicks"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
539
720
|
}
|
|
540
721
|
|
|
541
722
|
/**
|
|
@@ -555,7 +736,10 @@ declare class UiMenuItem {
|
|
|
555
736
|
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<UiMenuItem, "button[uiMenuItem]", never, { "destructive": { "alias": "destructive"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
556
737
|
}
|
|
557
738
|
/**
|
|
558
|
-
* Secondary actions menu, opened from its trigger through the native Popover API.
|
|
739
|
+
* Secondary actions menu, opened from its trigger through the native Popover API. With `sheet`, below
|
|
740
|
+
* 64rem it opens as a bottom action sheet above the tab bar instead of beside its trigger, and
|
|
741
|
+
* `heading` names what the actions apply to. `width` fixes the outer popover width in pixels (the sheet
|
|
742
|
+
* always spans the screen below 64rem); without it the menu fits its content.
|
|
559
743
|
*
|
|
560
744
|
* @example
|
|
561
745
|
* <button ui-button size="icon" aria-label="More" [uiMenuTrigger]="menu">...</button>
|
|
@@ -567,16 +751,21 @@ declare class UiMenuItem {
|
|
|
567
751
|
declare class UiMenu {
|
|
568
752
|
#private;
|
|
569
753
|
readonly label: _angular_core.InputSignal<string>;
|
|
754
|
+
readonly sheet: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
755
|
+
readonly heading: _angular_core.InputSignal<string | undefined>;
|
|
756
|
+
readonly width: _angular_core.InputSignalWithTransform<number | undefined, unknown>;
|
|
570
757
|
readonly menuId: string;
|
|
571
758
|
readonly isOpen: _angular_core.WritableSignal<boolean>;
|
|
572
|
-
protected readonly
|
|
759
|
+
protected readonly hasWidth: _angular_core.Signal<boolean>;
|
|
760
|
+
protected readonly widthVar: _angular_core.Signal<string | null>;
|
|
761
|
+
protected readonly classes: _angular_core.Signal<string>;
|
|
573
762
|
protected readonly items: _angular_core.Signal<readonly UiMenuItem[]>;
|
|
574
763
|
open(trigger: HTMLElement): void;
|
|
575
764
|
close(): void;
|
|
576
765
|
protected onToggle(event: Event): void;
|
|
577
766
|
protected onKeydown(event: KeyboardEvent): void;
|
|
578
767
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiMenu, never>;
|
|
579
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiMenu, "ui-menu", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; }, {}, ["items"], ["*"], true, never>;
|
|
768
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiMenu, "ui-menu", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "sheet": { "alias": "sheet"; "required": false; "isSignal": true; }; "heading": { "alias": "heading"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; }, {}, ["items"], ["*"], true, never>;
|
|
580
769
|
}
|
|
581
770
|
/**
|
|
582
771
|
* Opens a `ui-menu` from a trigger element and wires `aria-haspopup`, `aria-expanded` and
|
|
@@ -593,6 +782,9 @@ declare class UiMenuTrigger {
|
|
|
593
782
|
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<UiMenuTrigger, "[uiMenuTrigger]", never, { "uiMenuTrigger": { "alias": "uiMenuTrigger"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
594
783
|
}
|
|
595
784
|
|
|
785
|
+
/** Track thicknesses. `MeterSize` is derived from this tuple. */
|
|
786
|
+
declare const METER_SIZES: readonly ["md", "sm"];
|
|
787
|
+
type MeterSize = (typeof METER_SIZES)[number];
|
|
596
788
|
/** Ramp step used to paint the fill. `MeterTone` is derived from this tuple. */
|
|
597
789
|
declare const METER_TONES: readonly [1, 2, 3, 4, 5, 6];
|
|
598
790
|
type MeterTone = (typeof METER_TONES)[number];
|
|
@@ -607,11 +799,13 @@ declare class UiMeter {
|
|
|
607
799
|
readonly value: _angular_core.InputSignal<number>;
|
|
608
800
|
readonly label: _angular_core.InputSignal<string>;
|
|
609
801
|
readonly valueText: _angular_core.InputSignal<string>;
|
|
610
|
-
readonly tone: _angular_core.InputSignal<
|
|
802
|
+
readonly tone: _angular_core.InputSignal<2 | 4 | 3 | 1 | 5 | 6>;
|
|
803
|
+
readonly size: _angular_core.InputSignal<"sm" | "md">;
|
|
804
|
+
protected readonly trackClasses: _angular_core.Signal<string>;
|
|
611
805
|
protected readonly percent: _angular_core.Signal<number>;
|
|
612
806
|
protected readonly fillClasses: _angular_core.Signal<string>;
|
|
613
807
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiMeter, never>;
|
|
614
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiMeter, "ui-meter", never, { "value": { "alias": "value"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "valueText": { "alias": "valueText"; "required": true; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
808
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiMeter, "ui-meter", never, { "value": { "alias": "value"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "valueText": { "alias": "valueText"; "required": true; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
615
809
|
}
|
|
616
810
|
|
|
617
811
|
/**
|
|
@@ -630,10 +824,12 @@ declare class UiNavItem {
|
|
|
630
824
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiNavItem, "a[ui-nav-item]", never, { "active": { "alias": "active"; "required": false; "isSignal": true; }; }, {}, never, ["[navIcon]", "*"], true, never>;
|
|
631
825
|
}
|
|
632
826
|
|
|
633
|
-
declare const ROW_SIZES: readonly ["md", "lg", "xl"];
|
|
827
|
+
declare const ROW_SIZES: readonly ["md", "lg", "xl", "card", "dense"];
|
|
634
828
|
type RowSize = (typeof ROW_SIZES)[number];
|
|
635
829
|
declare const ROW_PADDINGS: readonly ["md", "sm", "none"];
|
|
636
830
|
type RowPadding = (typeof ROW_PADDINGS)[number];
|
|
831
|
+
declare const ROW_GAPS: readonly ["default", "sm"];
|
|
832
|
+
type RowGap = (typeof ROW_GAPS)[number];
|
|
637
833
|
/**
|
|
638
834
|
* Clickable row of a list: a holding, an envelope, an account.
|
|
639
835
|
*
|
|
@@ -644,17 +840,53 @@ type RowPadding = (typeof ROW_PADDINGS)[number];
|
|
|
644
840
|
*/
|
|
645
841
|
declare class UiRow {
|
|
646
842
|
readonly selected: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
647
|
-
readonly size: _angular_core.InputSignal<"md" | "lg" | "xl">;
|
|
843
|
+
readonly size: _angular_core.InputSignal<"md" | "lg" | "xl" | "card" | "dense">;
|
|
648
844
|
readonly padding: _angular_core.InputSignal<"sm" | "md" | "none">;
|
|
845
|
+
readonly gap: _angular_core.InputSignal<"sm" | "default">;
|
|
649
846
|
protected readonly classes: _angular_core.Signal<string>;
|
|
650
847
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiRow, never>;
|
|
651
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiRow, "a[ui-row], button[ui-row]", never, { "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "padding": { "alias": "padding"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
848
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiRow, "a[ui-row], button[ui-row]", never, { "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "padding": { "alias": "padding"; "required": false; "isSignal": true; }; "gap": { "alias": "gap"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
849
|
+
}
|
|
850
|
+
/**
|
|
851
|
+
* Lays out a `ui-row` with a trailing action beside it, such as a "more" icon button: the row takes
|
|
852
|
+
* the room the action leaves and the action keeps its own size.
|
|
853
|
+
*
|
|
854
|
+
* @example
|
|
855
|
+
* <div uiRowItem>
|
|
856
|
+
* <a ui-row size="xl" padding="sm" routerLink="/accounts/1">...</a>
|
|
857
|
+
* <button ui-button variant="quiet" size="icon-sm" aria-label="Account actions">...</button>
|
|
858
|
+
* </div>
|
|
859
|
+
*/
|
|
860
|
+
declare class UiRowItem {
|
|
861
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiRowItem, never>;
|
|
862
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<UiRowItem, "[uiRowItem]", never, {}, {}, never, never, true, never>;
|
|
863
|
+
}
|
|
864
|
+
/**
|
|
865
|
+
* Non-interactive row of a list, separated from the next by a hairline: a passkey with its delete
|
|
866
|
+
* button, a device, a setting. It is a 72px row (68px from 64rem) with a 12px gap; put it on an
|
|
867
|
+
* `li` or a `div`. Use `ui-row` instead when the whole row is a link or an action.
|
|
868
|
+
*
|
|
869
|
+
* @example
|
|
870
|
+
* <ul>
|
|
871
|
+
* <li uiListRow>
|
|
872
|
+
* <span class="flex-1">MacBook Air</span>
|
|
873
|
+
* <button ui-button variant="quiet-destructive" size="icon-sm" aria-label="Delete MacBook Air">...</button>
|
|
874
|
+
* </li>
|
|
875
|
+
* </ul>
|
|
876
|
+
*/
|
|
877
|
+
declare class UiListRow {
|
|
878
|
+
readonly ruled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
879
|
+
protected readonly classes: _angular_core.Signal<string>;
|
|
880
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiListRow, never>;
|
|
881
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<UiListRow, "[uiListRow]", never, { "ruled": { "alias": "ruled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
652
882
|
}
|
|
653
883
|
|
|
654
884
|
type SegmentedOption = {
|
|
655
885
|
value: string;
|
|
656
886
|
label: string;
|
|
657
887
|
};
|
|
888
|
+
declare const SEGMENTED_SIZES: readonly ["md", "sm"];
|
|
889
|
+
type SegmentedSize = (typeof SEGMENTED_SIZES)[number];
|
|
658
890
|
/**
|
|
659
891
|
* Exclusive choice within a small, known set: a time range, a unit, a mode. The selected option's
|
|
660
892
|
* background is a single thumb that slides under it in `transform`, instead of being redrawn.
|
|
@@ -665,7 +897,10 @@ type SegmentedOption = {
|
|
|
665
897
|
declare class UiSegmented {
|
|
666
898
|
readonly options: _angular_core.InputSignal<SegmentedOption[]>;
|
|
667
899
|
readonly label: _angular_core.InputSignal<string>;
|
|
900
|
+
readonly showLabel: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
901
|
+
protected readonly labelId: string;
|
|
668
902
|
readonly value: _angular_core.ModelSignal<string>;
|
|
903
|
+
readonly size: _angular_core.InputSignal<"sm" | "md">;
|
|
669
904
|
protected readonly radios: _angular_core.Signal<readonly ElementRef<HTMLButtonElement>[]>;
|
|
670
905
|
protected readonly thumbIndex: _angular_core.Signal<number>;
|
|
671
906
|
protected optionClasses(optionValue: string): string;
|
|
@@ -673,7 +908,7 @@ declare class UiSegmented {
|
|
|
673
908
|
protected select(optionValue: string): void;
|
|
674
909
|
protected onKeydown(event: KeyboardEvent): void;
|
|
675
910
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiSegmented, never>;
|
|
676
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiSegmented, "ui-segmented", never, { "options": { "alias": "options"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
|
|
911
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiSegmented, "ui-segmented", never, { "options": { "alias": "options"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "showLabel": { "alias": "showLabel"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
|
|
677
912
|
}
|
|
678
913
|
|
|
679
914
|
/**
|
|
@@ -687,7 +922,7 @@ declare class UiSegmented {
|
|
|
687
922
|
* <select uiSelect><option value="pea">PEA</option></select>
|
|
688
923
|
*/
|
|
689
924
|
declare class UiSelect implements UiControl {
|
|
690
|
-
readonly size: _angular_core.InputSignal<"sm" | "md">;
|
|
925
|
+
readonly size: _angular_core.InputSignal<"sm" | "md" | "lg" | "xl">;
|
|
691
926
|
readonly errors: _angular_core.InputSignal<readonly UiControlError[]>;
|
|
692
927
|
readonly touched: _angular_core.InputSignal<boolean>;
|
|
693
928
|
protected readonly classes: _angular_core.Signal<string>;
|
|
@@ -695,6 +930,9 @@ declare class UiSelect implements UiControl {
|
|
|
695
930
|
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<UiSelect, "select[uiSelect]", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
696
931
|
}
|
|
697
932
|
|
|
933
|
+
/** Available skeleton shapes. `SkeletonShape` is derived from this tuple. */
|
|
934
|
+
declare const SKELETON_SHAPES: readonly ["text", "figure", "row", "chart", "ring", "dot"];
|
|
935
|
+
type SkeletonShape = (typeof SKELETON_SHAPES)[number];
|
|
698
936
|
/**
|
|
699
937
|
* Decorative, pulsing placeholder for content that is still loading, at the shape of the content
|
|
700
938
|
* it stands in for.
|
|
@@ -704,7 +942,7 @@ declare class UiSelect implements UiControl {
|
|
|
704
942
|
* <ui-skeleton [lines]="3" />
|
|
705
943
|
*/
|
|
706
944
|
declare class UiSkeleton {
|
|
707
|
-
readonly shape: _angular_core.InputSignal<"text" | "figure" | "row" | "chart" | "ring">;
|
|
945
|
+
readonly shape: _angular_core.InputSignal<"text" | "figure" | "row" | "chart" | "ring" | "dot">;
|
|
708
946
|
readonly lines: _angular_core.InputSignal<number>;
|
|
709
947
|
readonly height: _angular_core.InputSignal<number>;
|
|
710
948
|
readonly size: _angular_core.InputSignal<number>;
|
|
@@ -755,6 +993,31 @@ declare class UiSwitch {
|
|
|
755
993
|
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<UiSwitch, "input[type=checkbox][uiSwitch]", never, {}, {}, never, never, true, never>;
|
|
756
994
|
}
|
|
757
995
|
|
|
996
|
+
/**
|
|
997
|
+
* Bottom navigation bar for iPhone: 52px of tabs plus the home indicator's safe area.
|
|
998
|
+
*
|
|
999
|
+
* @example
|
|
1000
|
+
* <nav ui-tab-bar>
|
|
1001
|
+
* <a ui-tab [active]="url === '/'" routerLink="/"><lucide-icon tabIcon name="house" />Portfolio</a>
|
|
1002
|
+
* </nav>
|
|
1003
|
+
*/
|
|
1004
|
+
declare class UiTabBar {
|
|
1005
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiTabBar, never>;
|
|
1006
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiTabBar, "nav[ui-tab-bar]", never, {}, {}, never, ["*"], true, never>;
|
|
1007
|
+
}
|
|
1008
|
+
/**
|
|
1009
|
+
* One destination of `ui-tab-bar`.
|
|
1010
|
+
*
|
|
1011
|
+
* @example
|
|
1012
|
+
* <a ui-tab active routerLink="/"><lucide-icon tabIcon name="house" />Portfolio</a>
|
|
1013
|
+
*/
|
|
1014
|
+
declare class UiTab {
|
|
1015
|
+
readonly active: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1016
|
+
protected readonly classes: _angular_core.Signal<string>;
|
|
1017
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiTab, never>;
|
|
1018
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiTab, "a[ui-tab]", never, { "active": { "alias": "active"; "required": false; "isSignal": true; }; }, {}, never, ["[tabIcon]", "*"], true, never>;
|
|
1019
|
+
}
|
|
1020
|
+
|
|
758
1021
|
/** Breakpoints a secondary column can be held back until. */
|
|
759
1022
|
declare const CELL_BREAKPOINTS: readonly ["md", "lg"];
|
|
760
1023
|
type CellBreakpoint = (typeof CELL_BREAKPOINTS)[number];
|
|
@@ -883,36 +1146,11 @@ type SubTone = (typeof SUB_TONES)[number];
|
|
|
883
1146
|
*/
|
|
884
1147
|
declare class UiCellSub {
|
|
885
1148
|
readonly narrow: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
886
|
-
readonly tone: _angular_core.InputSignal<"
|
|
1149
|
+
readonly tone: _angular_core.InputSignal<"inherit" | "subtle" | "stale">;
|
|
887
1150
|
protected readonly classes: _angular_core.Signal<string>;
|
|
888
1151
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiCellSub, never>;
|
|
889
1152
|
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<UiCellSub, "[uiCellSub]", never, { "narrow": { "alias": "narrow"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
890
1153
|
}
|
|
891
1154
|
|
|
892
|
-
|
|
893
|
-
|
|
894
|
-
*
|
|
895
|
-
* @example
|
|
896
|
-
* <nav ui-tab-bar>
|
|
897
|
-
* <a ui-tab [active]="url === '/'" routerLink="/"><lucide-icon tabIcon name="house" />Portfolio</a>
|
|
898
|
-
* </nav>
|
|
899
|
-
*/
|
|
900
|
-
declare class UiTabBar {
|
|
901
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiTabBar, never>;
|
|
902
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiTabBar, "nav[ui-tab-bar]", never, {}, {}, never, ["*"], true, never>;
|
|
903
|
-
}
|
|
904
|
-
/**
|
|
905
|
-
* One destination of `ui-tab-bar`.
|
|
906
|
-
*
|
|
907
|
-
* @example
|
|
908
|
-
* <a ui-tab active routerLink="/"><lucide-icon tabIcon name="house" />Portfolio</a>
|
|
909
|
-
*/
|
|
910
|
-
declare class UiTab {
|
|
911
|
-
readonly active: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
912
|
-
protected readonly classes: _angular_core.Signal<string>;
|
|
913
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiTab, never>;
|
|
914
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiTab, "a[ui-tab]", never, { "active": { "alias": "active"; "required": false; "isSignal": true; }; }, {}, never, ["[tabIcon]", "*"], true, never>;
|
|
915
|
-
}
|
|
916
|
-
|
|
917
|
-
export { ALERT_VARIANTS, AMOUNT_MASKINGS, AMOUNT_NUMERICS, ASYNC_STATES, AVATAR_SIZES, BADGE_SIZES, BADGE_VARIANTS, BUTTON_SIZES, BUTTON_VARIANTS, CARD_PADDINGS, CARD_VARIANTS, CELL_BREAKPOINTS, CONTROL_SIZES, CONTROL_SURFACES, DELTA_EMPHASES, DIALOG_LAYOUTS, DIALOG_WIDTHS, GROUP_SIZES, METER_TONES, ROW_PADDINGS, ROW_SIZES, STAT_SIZES, SUB_TONES, TABLE_ROWS, UI_AMOUNT_MASKED, UiAlert, UiAmount, UiAsync, UiAvatar, UiBadge, UiButton, UiCard, UiCellSub, UiChoiceChips, UiDelta, UiDialog, UiDonut, UiField, UiFieldLeading, UiGroup, UiGroupCell, UiInput, UiLineChart, UiMenu, UiMenuItem, UiMenuTrigger, UiMeter, UiNavItem, UiRow, UiRowAction, UiRowLink, UiSegmented, UiSelect, UiSkeleton, UiStat, UiSwitch, UiTab, UiTabBar, UiTable, UiTd, UiTextarea, UiTh, UiTr, formatAmount };
|
|
918
|
-
export type { AlertVariant, AmountFormatOptions, AmountMasking, AmountNumeric, AsyncState, AvatarSize, AxisTicks, BadgeSize, BadgeVariant, ButtonSize, ButtonVariant, CardPadding, CardVariant, CellBreakpoint, ChartPoint, ChoiceChipOption, ControlSize, ControlSurface, DeltaEmphasis, DialogLayout, DialogWidth, DonutSlice, GroupSize, MeterTone, RowPadding, RowSize, SegmentedOption, StatSize, SubTone, TableRow, TooltipSize, UiControlError };
|
|
1155
|
+
export { ALERT_VARIANTS, AMOUNT_MASKINGS, AMOUNT_NUMERICS, ASYNC_ALIGNS, ASYNC_STATES, ASYNC_VARIANTS, AVATAR_SIZES, BACK_LINK_SIZES, BADGE_SIZES, BADGE_VARIANTS, BUTTON_SIZES, BUTTON_VARIANTS, CARD_PADDINGS, CARD_SURFACES, CARD_VARIANTS, CELL_BREAKPOINTS, CONTROL_SIZES, CONTROL_SURFACES, DELTA_EMPHASES, DELTA_SIZES, DELTA_WEIGHTS, DIALOG_LAYOUTS, DIALOG_WIDTHS, FACT_SIZES, FACT_SUB_TONES, GROUP_SIZES, METER_SIZES, METER_TONES, ROW_GAPS, ROW_PADDINGS, ROW_SIZES, SEGMENTED_SIZES, SKELETON_SHAPES, STAT_SIZES, SUB_TONES, TABLE_ROWS, UI_AMOUNT_MASKED, UiActionBar, UiAlert, UiAmount, UiAsync, UiAvatar, UiAvatarLink, UiBackLink, UiBadge, UiButton, UiCard, UiCellSub, UiChoiceChips, UiDelta, UiDialog, UiDonut, UiExternalLink, UiFact, UiFacts, UiField, UiFieldLeading, UiFieldTrailing, UiFilterChips, UiGroup, UiGroupCell, UiInput, UiLineChart, UiListRow, UiMenu, UiMenuItem, UiMenuTrigger, UiMeter, UiNavItem, UiRow, UiRowAction, UiRowItem, UiRowLink, UiSegmented, UiSelect, UiSkeleton, UiStat, UiSwitch, UiTab, UiTabBar, UiTable, UiTd, UiTextarea, UiTh, UiTr, formatAmount };
|
|
1156
|
+
export type { AlertVariant, AmountFormatOptions, AmountMasking, AmountNumeric, AsyncAlign, AsyncState, AsyncVariant, AvatarSize, AxisTicks, BackLinkSize, BadgeSize, BadgeVariant, ButtonSize, ButtonVariant, CardPadding, CardSurface, CardVariant, CellBreakpoint, ChartPoint, ChoiceChipOption, ControlSize, ControlSurface, DeltaEmphasis, DeltaSize, DeltaWeight, DialogLayout, DialogWidth, DonutSlice, FactSize, FactSubTone, FilterChipOption, GroupSize, MeterSize, MeterTone, RowGap, RowPadding, RowSize, SegmentedOption, SegmentedSize, SkeletonShape, StatSize, SubTone, TableRow, TooltipSize, UiControlError };
|