@bitforgehq/ui 0.4.0 → 0.5.0-next.3
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/CHANGELOG.md +303 -0
- package/README.md +12 -12
- package/ai/MANIFEST.index.json +65 -2
- package/ai/MANIFEST.json +2221 -737
- package/ai/REFERENCE.index.json +161 -0
- package/ai/REFERENCE.json +1336 -27
- package/ai/UI_GUIDE.md +61 -20
- package/ai/components/app-frame.md +1 -1
- package/ai/components/chat-composer.md +357 -0
- package/ai/components/chat-message.md +251 -0
- package/ai/components/chat-thread.md +521 -0
- package/ai/components/checkbox.md +7 -0
- package/ai/components/combobox.md +12 -0
- package/ai/components/date-input.md +9 -0
- package/ai/components/datetime-input.md +2 -0
- package/ai/components/field.md +10 -0
- package/ai/components/file-input.md +498 -0
- package/ai/components/header.md +1 -1
- package/ai/components/image-input.md +368 -0
- package/ai/components/image-viewer.md +309 -0
- package/ai/components/media-card.md +478 -0
- package/ai/components/menu-button.md +2 -0
- package/ai/components/menu.md +10 -0
- package/ai/components/multi-combobox.md +7 -0
- package/ai/components/nav-group.md +10 -3
- package/ai/components/nav-item.md +11 -2
- package/ai/components/number-input.md +2 -7
- package/ai/components/popover.md +13 -0
- package/ai/components/radio-group.md +6 -0
- package/ai/components/segmented.md +14 -2
- package/ai/components/select.md +100 -42
- package/ai/components/sidebar-toggle.md +16 -9
- package/ai/components/sidebar.md +41 -13
- package/ai/components/tab-group.md +18 -2
- package/ai/components/table.md +17 -2
- package/ai/components/theme-menu-button.md +1 -0
- package/ai/components/time-input.md +2 -0
- package/ai/components/toolbar.md +7 -18
- package/ai/reference/bf-chat-composer-harness.md +64 -0
- package/ai/reference/bf-chat-message-role.md +27 -0
- package/ai/reference/bf-chat-message-status.md +28 -0
- package/ai/reference/bf-fade-in-directive.md +18 -0
- package/ai/reference/bf-file-input-harness.md +67 -0
- package/ai/reference/bf-file-input-variant.md +27 -0
- package/ai/reference/bf-image-input-harness.md +67 -0
- package/ai/reference/bf-image-input-shape.md +27 -0
- package/ai/reference/bf-image-viewer-actions-context.md +29 -0
- package/ai/reference/bf-image-viewer-harness.md +87 -0
- package/ai/reference/bf-image-viewer-image.md +25 -0
- package/ai/reference/bf-image-viewer-options.md +33 -0
- package/ai/reference/bf-image-viewer-origin.md +23 -0
- package/ai/reference/bf-image-viewer-ref.md +55 -0
- package/ai/reference/bf-image-viewer-service.md +32 -0
- package/ai/reference/bf-labels.md +105 -75
- package/ai/reference/bf-media-card-aspect.md +28 -0
- package/ai/reference/bf-media-card-harness.md +66 -0
- package/ai/reference/bf-motion-list-directive.md +22 -0
- package/ai/reference/bf-prose-directive.md +16 -0
- package/ai/reference/bf-rejected-file-reason.md +28 -0
- package/ai/reference/bf-rejected-file.md +28 -0
- package/ai/reference/bf-select-harness.md +14 -5
- package/ai/reference/bf-select-option.md +2 -0
- package/ai/reference/bf-size.md +3 -0
- package/ai/reference/bf_table_sort_select.md +23 -0
- package/ai/reference/provide-bf-labels.md +10 -3
- package/ai/reference/provide-bf-select.md +20 -0
- package/bin/bf-ui.js +1 -0
- package/fesm2022/bitforgehq-ui-overlay.mjs +2649 -606
- package/fesm2022/bitforgehq-ui-overlay.mjs.map +1 -1
- package/fesm2022/bitforgehq-ui-testing.mjs +356 -10
- package/fesm2022/bitforgehq-ui-testing.mjs.map +1 -1
- package/fesm2022/bitforgehq-ui.mjs +7531 -3989
- package/fesm2022/bitforgehq-ui.mjs.map +1 -1
- package/llms-full.txt +4151 -130
- package/llms.txt +31 -1
- package/package.json +1 -1
- package/theme.css +60 -0
- package/types/bitforgehq-ui-overlay.d.ts +684 -7
- package/types/bitforgehq-ui-testing.d.ts +434 -6
- package/types/bitforgehq-ui.d.ts +1473 -182
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
# BfImageViewerOptions
|
|
2
|
+
|
|
3
|
+
Options of an image viewer: its images, the first one, its thumbnail and actions
|
|
4
|
+
|
|
5
|
+
Interface from `@bitforgehq/ui/overlay` · since 0.5.0
|
|
6
|
+
|
|
7
|
+
Options of `BfImageViewerService.open()`.
|
|
8
|
+
|
|
9
|
+
```ts
|
|
10
|
+
import { type BfImageViewerOptions } from '@bitforgehq/ui/overlay';
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Properties
|
|
14
|
+
|
|
15
|
+
| Name | Type | Default | Description |
|
|
16
|
+
| ------------------- | -------------------------------------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
17
|
+
| `images` | `readonly BfImageViewerImage[]` | required | The images to step through, in order; at least one. |
|
|
18
|
+
| `index` | `number` | `0` | Index of the image shown first, wrapped into the set. |
|
|
19
|
+
| `origin` | `BfImageViewerOrigin` (`HTMLElement \| (index: number) => HTMLElement \| null \| undefined`) | | The thumbnail the viewer zooms out of and back into (or a function returning the thumbnail of an image by index); none fades the viewer in and out. |
|
|
20
|
+
| `actions` | `TemplateRef<BfImageViewerActionsContext>` | | Actions under the image, beside its caption (a download link, a "Use this one" button); its context is `{ $implicit: image, index, ref }`. |
|
|
21
|
+
| `ariaLabel` | `string` | | Accessible name of the viewer; empty uses `provideBfLabels()`'s `imageViewer`. |
|
|
22
|
+
| `closeOnNavigation` | `boolean` | `true` | A navigation to another URL path closes the viewer (default true). |
|
|
23
|
+
| `injector` | `Injector` | | Parent of the viewer's injector and source of its labels (default the root injector). Pass the opener's `inject(Injector)` so a feature-level `provideBfLabels()` reaches the viewer. |
|
|
24
|
+
|
|
25
|
+
## Uses
|
|
26
|
+
|
|
27
|
+
- [BfImageViewerActionsContext](bf-image-viewer-actions-context.md)
|
|
28
|
+
- [BfImageViewerImage](bf-image-viewer-image.md)
|
|
29
|
+
- [BfImageViewerOrigin](bf-image-viewer-origin.md)
|
|
30
|
+
|
|
31
|
+
## Used by
|
|
32
|
+
|
|
33
|
+
- [BfImageViewerService](bf-image-viewer-service.md)
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
# BfImageViewerOrigin
|
|
2
|
+
|
|
3
|
+
The thumbnail an image viewer zooms from and back into, or a lookup per image
|
|
4
|
+
|
|
5
|
+
Type from `@bitforgehq/ui/overlay` · since 0.5.0
|
|
6
|
+
|
|
7
|
+
Where the viewer zooms from and back to: the thumbnail that was clicked, or a function that
|
|
8
|
+
returns the thumbnail of any image of the set (so closing after stepping zooms into the right
|
|
9
|
+
one), `null` for none.
|
|
10
|
+
|
|
11
|
+
```ts
|
|
12
|
+
import { type BfImageViewerOrigin } from '@bitforgehq/ui/overlay';
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## Signature
|
|
16
|
+
|
|
17
|
+
```ts
|
|
18
|
+
type BfImageViewerOrigin = HTMLElement | ((index: number) => HTMLElement | null | undefined) | null
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
## Used by
|
|
22
|
+
|
|
23
|
+
- [BfImageViewerOptions](bf-image-viewer-options.md)
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
# BfImageViewerRef
|
|
2
|
+
|
|
3
|
+
Handle on an open image viewer that steps through its images and closes it
|
|
4
|
+
|
|
5
|
+
Class from `@bitforgehq/ui/overlay` · since 0.5.0
|
|
6
|
+
|
|
7
|
+
Handle to an open image viewer, returned by `BfImageViewerService.open()` and injectable in
|
|
8
|
+
its actions template (`inject(BfImageViewerRef)`). `index` is the shown image; `next()`,
|
|
9
|
+
`previous()` and `goTo()` step through the set (wrapping at both ends), `close()` plays the
|
|
10
|
+
exit motion and resolves `afterClosed`.
|
|
11
|
+
|
|
12
|
+
```ts
|
|
13
|
+
import { BfImageViewerRef } from '@bitforgehq/ui/overlay';
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
## Properties
|
|
17
|
+
|
|
18
|
+
| Name | Type | Default | Description |
|
|
19
|
+
| ------------- | ------------------------------- | ------- | ------------------------------------------------------- |
|
|
20
|
+
| `id` | `string` | | Unique id of the viewer (its overlay's `bf-overlay-N`). |
|
|
21
|
+
| `images` | `readonly BfImageViewerImage[]` | | The images of the set, in order. |
|
|
22
|
+
| `afterClosed` | `Promise<void>` | | Resolves once the viewer has closed and left the page. |
|
|
23
|
+
| `closed` | `Signal<boolean>` | | True once the viewer has been detached. |
|
|
24
|
+
| `index` | `Signal<number>` | | Index (0-based) of the image the viewer shows. |
|
|
25
|
+
|
|
26
|
+
## Methods
|
|
27
|
+
|
|
28
|
+
### `next(): void`
|
|
29
|
+
|
|
30
|
+
Shows the next image; after the last one, the first.
|
|
31
|
+
|
|
32
|
+
### `previous(): void`
|
|
33
|
+
|
|
34
|
+
Shows the previous image; before the first one, the last.
|
|
35
|
+
|
|
36
|
+
### `goTo(index: number): void`
|
|
37
|
+
|
|
38
|
+
Shows the image at `index`, wrapped into the set (`-1` is the last one).
|
|
39
|
+
|
|
40
|
+
| Parameter | Type | Description |
|
|
41
|
+
| --------- | -------- | --------------------------------------- |
|
|
42
|
+
| `index` | `number` | The 0-based index of the image to show. |
|
|
43
|
+
|
|
44
|
+
### `close(): void`
|
|
45
|
+
|
|
46
|
+
Closes the viewer: it zooms back into its thumbnail, or fades out. Ignored once closing.
|
|
47
|
+
|
|
48
|
+
## Uses
|
|
49
|
+
|
|
50
|
+
- [BfImageViewerImage](bf-image-viewer-image.md)
|
|
51
|
+
|
|
52
|
+
## Used by
|
|
53
|
+
|
|
54
|
+
- [BfImageViewerActionsContext](bf-image-viewer-actions-context.md)
|
|
55
|
+
- [BfImageViewerService](bf-image-viewer-service.md)
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
# BfImageViewerService
|
|
2
|
+
|
|
3
|
+
Opens a full-screen image viewer that zooms from a thumbnail and steps through a set
|
|
4
|
+
|
|
5
|
+
Service from `@bitforgehq/ui/overlay` · since 0.5.0
|
|
6
|
+
|
|
7
|
+
Opens a full-screen image viewer (a lightbox) on the overlay core: one image large over a dark
|
|
8
|
+
scrim, previous and next buttons, the arrow keys, Home and End to step through the set
|
|
9
|
+
(wrapping at both ends), a counter, the caption and optional actions. It zooms out of the
|
|
10
|
+
clicked thumbnail (`origin`) and back into it, cross-fades between images, and fades when there
|
|
11
|
+
is no thumbnail on screen; reduced motion only fades. It is a modal dialog: focus moves to its
|
|
12
|
+
close button and is trapped, `Escape`, the close button and a click on the scrim close it, the
|
|
13
|
+
page behind it is `inert` and does not scroll, and focus returns to the opener.
|
|
14
|
+
|
|
15
|
+
```ts
|
|
16
|
+
import { BfImageViewerService } from '@bitforgehq/ui/overlay';
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Methods
|
|
20
|
+
|
|
21
|
+
### `open(options: BfImageViewerOptions): BfImageViewerRef`
|
|
22
|
+
|
|
23
|
+
Opens the viewer on `options.images`, showing `options.index` first.
|
|
24
|
+
|
|
25
|
+
| Parameter | Type | Description |
|
|
26
|
+
| --------- | ---------------------- | ------------------------------------------------------------------------- |
|
|
27
|
+
| `options` | `BfImageViewerOptions` | The images, the first index, the thumbnail, the actions and the injector. |
|
|
28
|
+
|
|
29
|
+
## Uses
|
|
30
|
+
|
|
31
|
+
- [BfImageViewerOptions](bf-image-viewer-options.md)
|
|
32
|
+
- [BfImageViewerRef](bf-image-viewer-ref.md)
|
|
@@ -12,81 +12,111 @@ import { type BfLabels } from '@bitforgehq/ui';
|
|
|
12
12
|
|
|
13
13
|
## Properties
|
|
14
14
|
|
|
15
|
-
| Name | Type | Default
|
|
16
|
-
| ----------------------- | --------------------------------------------- |
|
|
17
|
-
| `loading` | `string` | `'Loading'`
|
|
18
|
-
| `dismiss` | `string` | `'Dismiss'`
|
|
19
|
-
| `tabBar` | `string` | `'Main'`
|
|
20
|
-
| `tabBadge` | `(count: number) => string` | `` (count) => `${count} new` ``
|
|
21
|
-
| `back` | `string` | `'Back'`
|
|
22
|
-
| `ok` | `string` | `'OK'`
|
|
23
|
-
| `cancel` | `string` | `'Cancel'`
|
|
24
|
-
| `actions` | `string` | `'Actions'`
|
|
25
|
-
| `sheet` | `string` | `'Sheet'`
|
|
26
|
-
| `modal` | `string` | `'Modal'`
|
|
27
|
-
| `refreshing` | `string` | `'Refreshing'`
|
|
28
|
-
| `close` | `string` | `'Close'`
|
|
29
|
-
| `expand` | `string` | `'Expand'`
|
|
30
|
-
| `collapse` | `string` | `'Collapse'`
|
|
31
|
-
| `sheetPosition` | `(position: number, count: number) => string` | `` (position, count) => `Sheet at ${position} of ${count}` ``
|
|
32
|
-
| `dialog` | `string` | `'Dialog'`
|
|
33
|
-
| `notifications` | `string` | `'Notifications'`
|
|
34
|
-
| `tableSelectAll` | `string` | `'Select all rows'`
|
|
35
|
-
| `tableSortBy` | `string` | `'Sort by'`
|
|
36
|
-
| `tableSortNone` | `string` | `'Not sorted'`
|
|
37
|
-
| `tableSortAscending` | `(column: string) => string` | `` (column) => `${column}, ascending` ``
|
|
38
|
-
| `tableSortDescending` | `(column: string) => string` | `` (column) => `${column}, descending` ``
|
|
39
|
-
| `theme` | `string` | `'Theme'`
|
|
40
|
-
| `themeSystem` | `string` | `'System'`
|
|
41
|
-
| `themeLight` | `string` | `'Light'`
|
|
42
|
-
| `themeDark` | `string` | `'Dark'`
|
|
43
|
-
| `breadcrumb` | `string` | `'Breadcrumb'`
|
|
44
|
-
| `breadcrumbExpand` | `(count: number) => string` | ``(count) => (count === 1 ? 'Show 1 more level' : `Show ${count} more levels`)``
|
|
45
|
-
| `navigation` | `string` | `'Main'`
|
|
46
|
-
| `navBadge` | `(count: number) => string` | `` (count) => `${count} new` ``
|
|
47
|
-
| `sidebarCollapse` | `string` | `'Collapse sidebar'`
|
|
48
|
-
| `sidebarExpand` | `string` | `'Expand sidebar'`
|
|
49
|
-
| `skipToContent` | `string` | `'Skip to main content'`
|
|
50
|
-
| `pagination` | `string` | `'Pagination'`
|
|
51
|
-
| `previousPage` | `string` | `'Previous page'`
|
|
52
|
-
| `nextPage` | `string` | `'Next page'`
|
|
53
|
-
| `pageOf` | `(page: number, count: number) => string` | `` (page, count) => `Page ${page} of ${count}` ``
|
|
54
|
-
| `goToPage` | `(page: number) => string` | `` (page) => `Page ${page}` ``
|
|
55
|
-
| `tabGroup` | `string` | `'Tabs'`
|
|
56
|
-
| `calendarPreviousMonth` | `string` | `'Previous month'`
|
|
57
|
-
| `calendarNextMonth` | `string` | `'Next month'`
|
|
58
|
-
| `calendarChooseMonth` | `string` | `'Choose month'`
|
|
59
|
-
| `calendarChooseYear` | `string` | `'Choose year'`
|
|
60
|
-
| `statTrendUp` | `string` | `'Up'`
|
|
61
|
-
| `statTrendDown` | `string` | `'Down'`
|
|
62
|
-
| `statTrendFlat` | `string` | `'No change'`
|
|
63
|
-
| `comboboxEmpty` | `string` | `'No results'`
|
|
64
|
-
| `comboboxRemove` | `(label: string) => string` | `` (label) => `Remove ${label}` ``
|
|
65
|
-
| `dateInputDay` | `string` | `'Day'`
|
|
66
|
-
| `dateInputMonth` | `string` | `'Month'`
|
|
67
|
-
| `dateInputYear` | `string` | `'Year'`
|
|
68
|
-
| `dateInputOpenCalendar` | `string` | `'Choose date'`
|
|
69
|
-
| `dateInputInvalid` | `string` | `'Enter a valid date'`
|
|
70
|
-
| `dateInputUnavailable` | `string` | `'This date is not available'`
|
|
71
|
-
| `timeInputHour` | `string` | `'Hour'`
|
|
72
|
-
| `timeInputMinute` | `string` | `'Minute'`
|
|
73
|
-
| `timeInputSecond` | `string` | `'Second'`
|
|
74
|
-
| `timeInputDayPeriod` | `string` | `'AM/PM'`
|
|
75
|
-
| `timeInputOpenList` | `string` | `'Choose time'`
|
|
76
|
-
| `timeInputInvalid` | `string` | `'Enter a valid time'`
|
|
77
|
-
| `timeInputMin` | `(time: string) => string` | `` (time) => `Pick ${time} or later` ``
|
|
78
|
-
| `timeInputMax` | `(time: string) => string` | `` (time) => `Pick ${time} or earlier` ``
|
|
79
|
-
| `chart` | `string` | `'Chart'`
|
|
80
|
-
| `chartLegend` | `string` | `'Legend'`
|
|
81
|
-
| `chartValues` | `string` | `'Data points, arrow keys move between them'`
|
|
82
|
-
| `chartShowData` | `string` | `'Show data'`
|
|
83
|
-
| `chartHideData` | `string` | `'Hide data'`
|
|
84
|
-
| `chartCategory` | `string` | `'Category'`
|
|
85
|
-
| `chartValue` | `string` | `'Value'`
|
|
86
|
-
| `chartEmpty` | `string` | `'No data to show'`
|
|
87
|
-
| `chartError` | `string` | `'The data could not be loaded'`
|
|
88
|
-
| `listItemUnread` | `string` | `'Unread'`
|
|
89
|
-
| `
|
|
15
|
+
| Name | Type | Default | Description |
|
|
16
|
+
| ----------------------- | --------------------------------------------- | --------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- |
|
|
17
|
+
| `loading` | `string` | `'Loading'` | bf-spinner's accessible name (a loading bf-button's spinner is decorative and has none). |
|
|
18
|
+
| `dismiss` | `string` | `'Dismiss'` | bf-alert's dismiss button. |
|
|
19
|
+
| `tabBar` | `string` | `'Main'` | bf-tab-bar's navigation name. |
|
|
20
|
+
| `tabBadge` | `(count: number) => string` | `` (count) => `${count} new` `` | bf-tab's announcement of a numeric badge. |
|
|
21
|
+
| `back` | `string` | `'Back'` | bf-back-button's label. |
|
|
22
|
+
| `ok` | `string` | `'OK'` | BfAlertDialogService's default button. |
|
|
23
|
+
| `cancel` | `string` | `'Cancel'` | BfActionSheetService's cancel row. |
|
|
24
|
+
| `actions` | `string` | `'Actions'` | An action sheet's name when it has no title. |
|
|
25
|
+
| `sheet` | `string` | `'Sheet'` | bf-sheet's name without an ariaLabel or heading. |
|
|
26
|
+
| `modal` | `string` | `'Modal'` | bf-modal's name without an ariaLabel or heading. |
|
|
27
|
+
| `refreshing` | `string` | `'Refreshing'` | bf-refresher's status while refreshing. |
|
|
28
|
+
| `close` | `string` | `'Close'` | bf-dialog's and bf-side-panel's close button, and bf-sheet's screen-reader Close. |
|
|
29
|
+
| `expand` | `string` | `'Expand'` | bf-sheet's grabber button below the top snap point: the next press expands the sheet. |
|
|
30
|
+
| `collapse` | `string` | `'Collapse'` | bf-sheet's grabber button at the top snap point: the next press collapses the sheet. |
|
|
31
|
+
| `sheetPosition` | `(position: number, count: number) => string` | `` (position, count) => `Sheet at ${position} of ${count}` `` | bf-sheet's snap position (1-based), announced politely when it changes and part of the grabber button's name. |
|
|
32
|
+
| `dialog` | `string` | `'Dialog'` | A dialog's or side panel's name without an ariaLabel, a title or a heading. |
|
|
33
|
+
| `notifications` | `string` | `'Notifications'` | The desktop toast stack's region name. |
|
|
34
|
+
| `tableSelectAll` | `string` | `'Select all rows'` | bf-table's header checkbox, which selects or clears every row. |
|
|
35
|
+
| `tableSortBy` | `string` | `'Sort by'` | The label of a stacked bf-table's sort select. |
|
|
36
|
+
| `tableSortNone` | `string` | `'Not sorted'` | A stacked bf-table's first sort option: rows in the order given, no column sorted. |
|
|
37
|
+
| `tableSortAscending` | `(column: string) => string` | `` (column) => `${column}, ascending` `` | A stacked bf-table's sort option for a column in ascending order. |
|
|
38
|
+
| `tableSortDescending` | `(column: string) => string` | `` (column) => `${column}, descending` `` | A stacked bf-table's sort option for a column in descending order. |
|
|
39
|
+
| `theme` | `string` | `'Theme'` | bf-theme-switch's and bf-theme-menu-button's name without a label. |
|
|
40
|
+
| `themeSystem` | `string` | `'System'` | The theme choice that follows the system's colour scheme. |
|
|
41
|
+
| `themeLight` | `string` | `'Light'` | The theme choice that forces the light colour scheme. |
|
|
42
|
+
| `themeDark` | `string` | `'Dark'` | The theme choice that forces the dark colour scheme. |
|
|
43
|
+
| `breadcrumb` | `string` | `'Breadcrumb'` | bf-breadcrumb's navigation name. |
|
|
44
|
+
| `breadcrumbExpand` | `(count: number) => string` | ``(count) => (count === 1 ? 'Show 1 more level' : `Show ${count} more levels`)`` | bf-breadcrumb's ellipsis button, which shows the levels a `maxItems` trail hides. |
|
|
45
|
+
| `navigation` | `string` | `'Main'` | bf-sidebar's and bf-top-nav's navigation name. |
|
|
46
|
+
| `navBadge` | `(count: number) => string` | `` (count) => `${count} new` `` | a[bfNavItem]'s announcement of its count badge. |
|
|
47
|
+
| `sidebarCollapse` | `string` | `'Collapse sidebar'` | bf-sidebar-toggle's name and tooltip while the sidebar is expanded. |
|
|
48
|
+
| `sidebarExpand` | `string` | `'Expand sidebar'` | bf-sidebar-toggle's name and tooltip while the sidebar is an icon rail. |
|
|
49
|
+
| `skipToContent` | `string` | `'Skip to main content'` | bf-app-frame's skip link, the first stop of the tab order, which moves focus to the content. |
|
|
50
|
+
| `pagination` | `string` | `'Pagination'` | bf-pagination's navigation name. |
|
|
51
|
+
| `previousPage` | `string` | `'Previous page'` | bf-pagination's button to the previous page. |
|
|
52
|
+
| `nextPage` | `string` | `'Next page'` | bf-pagination's button to the next page. |
|
|
53
|
+
| `pageOf` | `(page: number, count: number) => string` | `` (page, count) => `Page ${page} of ${count}` `` | bf-pagination's compact position text, such as "Page 3 of 12". |
|
|
54
|
+
| `goToPage` | `(page: number) => string` | `` (page) => `Page ${page}` `` | bf-pagination's name of one page button, such as "Page 3". |
|
|
55
|
+
| `tabGroup` | `string` | `'Tabs'` | bf-tab-group's tablist name. |
|
|
56
|
+
| `calendarPreviousMonth` | `string` | `'Previous month'` | bf-calendar's button that shows the previous month. |
|
|
57
|
+
| `calendarNextMonth` | `string` | `'Next month'` | bf-calendar's button that shows the next month. |
|
|
58
|
+
| `calendarChooseMonth` | `string` | `'Choose month'` | bf-calendar's title button in the day view, which opens the month view; read after the visible month and year. |
|
|
59
|
+
| `calendarChooseYear` | `string` | `'Choose year'` | bf-calendar's title button in the month view, which opens the year view; read after the visible year. |
|
|
60
|
+
| `statTrendUp` | `string` | `'Up'` | bf-stat's hidden direction word before an upward delta, so colour is never the only signal. |
|
|
61
|
+
| `statTrendDown` | `string` | `'Down'` | bf-stat's hidden direction word before a downward delta. |
|
|
62
|
+
| `statTrendFlat` | `string` | `'No change'` | bf-stat's hidden direction word before an unchanged (flat) delta. |
|
|
63
|
+
| `comboboxEmpty` | `string` | `'No results'` | bf-combobox's and bf-multi-combobox's list row when no option matches the typed text. |
|
|
64
|
+
| `comboboxRemove` | `(label: string) => string` | `` (label) => `Remove ${label}` `` | bf-multi-combobox's remove button on a picked value's tag. |
|
|
65
|
+
| `dateInputDay` | `string` | `'Day'` | The day part of bf-date-input and bf-datetime-input; its first letter is the part's placeholder ("dd"). |
|
|
66
|
+
| `dateInputMonth` | `string` | `'Month'` | The month part of bf-date-input and bf-datetime-input; its first letter is the part's placeholder ("mm"). |
|
|
67
|
+
| `dateInputYear` | `string` | `'Year'` | The year part of bf-date-input and bf-datetime-input; its first letter is the part's placeholder ("yyyy"). |
|
|
68
|
+
| `dateInputOpenCalendar` | `string` | `'Choose date'` | The button of bf-date-input and bf-datetime-input that opens the calendar, and the panel's name. |
|
|
69
|
+
| `dateInputInvalid` | `string` | `'Enter a valid date'` | The error of bf-date-input and bf-datetime-input while the date is incomplete or does not exist (31 February). |
|
|
70
|
+
| `dateInputUnavailable` | `string` | `'This date is not available'` | The error of bf-date-input and bf-datetime-input for a typed date that `disabledDate` rules out. |
|
|
71
|
+
| `timeInputHour` | `string` | `'Hour'` | The hour part of bf-time-input and bf-datetime-input; its first letter is the part's placeholder ("hh"). |
|
|
72
|
+
| `timeInputMinute` | `string` | `'Minute'` | The minute part of bf-time-input and bf-datetime-input; its first letter is the part's placeholder ("mm"). |
|
|
73
|
+
| `timeInputSecond` | `string` | `'Second'` | The second part of bf-time-input with `seconds`; its first letter is the part's placeholder ("ss"). |
|
|
74
|
+
| `timeInputDayPeriod` | `string` | `'AM/PM'` | The AM/PM part of bf-time-input and bf-datetime-input under a 12-hour clock. |
|
|
75
|
+
| `timeInputOpenList` | `string` | `'Choose time'` | The button of bf-time-input that opens the list of times, and the list's name. |
|
|
76
|
+
| `timeInputInvalid` | `string` | `'Enter a valid time'` | The error of bf-time-input and bf-datetime-input while the time is incomplete. |
|
|
77
|
+
| `timeInputMin` | `(time: string) => string` | `` (time) => `Pick ${time} or later` `` | The error of bf-time-input and bf-datetime-input below `min`, given the limit as the locale writes it. |
|
|
78
|
+
| `timeInputMax` | `(time: string) => string` | `` (time) => `Pick ${time} or earlier` `` | The error of bf-time-input and bf-datetime-input above `max`, given the limit as the locale writes it. |
|
|
79
|
+
| `chart` | `string` | `'Chart'` | The name of a chart from `@bitforgehq/ui/charts` that has no `label` (and no `bf-chart-card` title). |
|
|
80
|
+
| `chartLegend` | `string` | `'Legend'` | The name of a chart's legend, the group of buttons that show and hide its series. |
|
|
81
|
+
| `chartValues` | `string` | `'Data points, arrow keys move between them'` | The name of a chart's plot, the focusable area whose arrow keys move between the values. |
|
|
82
|
+
| `chartShowData` | `string` | `'Show data'` | A chart's button that shows its data as a table. |
|
|
83
|
+
| `chartHideData` | `string` | `'Hide data'` | A chart's button that hides its data table again. |
|
|
84
|
+
| `chartCategory` | `string` | `'Category'` | The first column header of a chart's data table. |
|
|
85
|
+
| `chartValue` | `string` | `'Value'` | The value column header of a bf-donut-chart's data table. |
|
|
86
|
+
| `chartEmpty` | `string` | `'No data to show'` | bf-chart-card's text when it has no data and no `empty` slot. |
|
|
87
|
+
| `chartError` | `string` | `'The data could not be loaded'` | bf-chart-card's text when its data failed to load and it has no `error` slot. |
|
|
88
|
+
| `listItemUnread` | `string` | `'Unread'` | bf-list-item's visually hidden state text before the title of an `unread` row. |
|
|
89
|
+
| `fileInputChoose` | `(multiple: boolean) => string` | `(multiple) => (multiple ? 'Choose files' : 'Choose file')` | bf-file-input's button text. |
|
|
90
|
+
| `fileInputDropHint` | `(multiple: boolean) => string` | `(multiple) => (multiple ? 'or drop them here' : 'or drop it here')` | bf-file-input's hint beside the button. |
|
|
91
|
+
| `fileInputDropzone` | `(multiple: boolean) => string` | `(multiple) => (multiple ? 'Drag files here or browse' : 'Drag a file here or browse')` | bf-file-input's drop zone text. |
|
|
92
|
+
| `fileInputTapToChoose` | `(multiple: boolean) => string` | `(multiple) => (multiple ? 'Tap to choose files' : 'Tap to choose a file')` | bf-file-input's text under touch input. |
|
|
93
|
+
| `fileInputRemove` | `(name: string) => string` | `` (name) => `Remove ${name}` `` | The accessible name of bf-file-input's remove button for a file. |
|
|
94
|
+
| `fileInputDismiss` | `(name: string) => string` | `` (name) => `Dismiss ${name}` `` | The accessible name of bf-file-input's button that dismisses a rejected file. |
|
|
95
|
+
| `fileInputAdded` | `(count: number) => string` | ``(count) => (count === 1 ? '1 file added' : `${count} files added`)`` | bf-file-input's live announcement after files are added. |
|
|
96
|
+
| `fileInputNotAdded` | `(name: string, reason: string) => string` | `` (name, reason) => `${name} was not added: ${reason}` `` | bf-file-input's live announcement for a rejected file. |
|
|
97
|
+
| `fileInputRemoved` | `(name: string) => string` | `` (name) => `${name} removed` `` | bf-file-input's live announcement after a file is removed. |
|
|
98
|
+
| `fileInputCount` | `(count: number) => string` | ``(count) => (count === 1 ? '1 file' : `${count} files`)`` | bf-file-input's read-only box text for the number of chosen files. |
|
|
99
|
+
| `fileRejectedType` | `string` | `'Not an accepted type'` | The message of a file rejected for its type. |
|
|
100
|
+
| `fileRejectedSize` | `(max: string) => string` | `` (max) => `Too large, max ${max}` `` | The message of a file rejected for its size; `max` is the formatted limit. |
|
|
101
|
+
| `fileRejectedCount` | `(max: number) => string` | `` (max) => `Too many files, max ${max}` `` | The message of a file rejected because the file limit is reached. |
|
|
102
|
+
| `imageInputChoose` | `string` | `'Choose image'` | bf-image-input's accessible name for the empty drop target. |
|
|
103
|
+
| `imageInputUpload` | `string` | `'Upload'` | bf-image-input's text for choosing the first image. |
|
|
104
|
+
| `imageInputReplace` | `string` | `'Replace'` | bf-image-input's text for replacing the image. |
|
|
105
|
+
| `imageInputRemove` | `string` | `'Remove'` | bf-image-input's text for removing the image. |
|
|
106
|
+
| `chatThread` | `string` | `'Conversation'` | bf-chat-thread's accessible name (its `role="log"`) when no `label` is set. |
|
|
107
|
+
| `chatJumpToLatest` | `string` | `'Jump to latest'` | bf-chat-thread's button that scrolls back to the newest message and follows it again. |
|
|
108
|
+
| `chatMessageStopped` | `string` | `'Stopped'` | bf-chat-message's status line for a reply the user stopped. |
|
|
109
|
+
| `chatMessageFailed` | `string` | `'Something went wrong'` | bf-chat-message's status line for a message that failed. |
|
|
110
|
+
| `chatComposer` | `string` | `'Message'` | bf-chat-composer's text field name when no `label` or `ariaLabel` is set. |
|
|
111
|
+
| `chatSend` | `string` | `'Send'` | bf-chat-composer's send button. |
|
|
112
|
+
| `chatStop` | `string` | `'Stop'` | bf-chat-composer's stop button, shown in place of send while a reply runs. |
|
|
113
|
+
| `mediaCardSelect` | `string` | `'Select'` | bf-media-card's select button, read before the card's name ("Select Starfall"). |
|
|
114
|
+
| `imageLoadFailed` | `string` | `'The image could not be loaded'` | bf-media-card's and bf-image-viewer's message for an image that failed to load. |
|
|
115
|
+
| `imageViewer` | `string` | `'Image viewer'` | bf-image-viewer's name. |
|
|
116
|
+
| `imageViewerPrevious` | `string` | `'Previous image'` | bf-image-viewer's button that shows the previous image. |
|
|
117
|
+
| `imageViewerNext` | `string` | `'Next image'` | bf-image-viewer's button that shows the next image. |
|
|
118
|
+
| `imageViewerPosition` | `(position: number, count: number) => string` | `` (position, count) => `${position} of ${count}` `` | bf-image-viewer's counter: the shown image's position (1-based) among the images. |
|
|
119
|
+
| `validation` | `BfValidationMessages` | required | Default error text per validator kind (see `BfValidationMessages`). |
|
|
90
120
|
|
|
91
121
|
## Uses
|
|
92
122
|
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
# BfMediaCardAspect
|
|
2
|
+
|
|
3
|
+
The four aspect ratios of a media card's image area, wide to portrait
|
|
4
|
+
|
|
5
|
+
Type from `@bitforgehq/ui` · since 0.5.0
|
|
6
|
+
|
|
7
|
+
The aspect ratio of a `bf-media-card`'s image area: 16:9 (default), 4:3, square or 3:4.
|
|
8
|
+
|
|
9
|
+
```ts
|
|
10
|
+
import { type BfMediaCardAspect } from '@bitforgehq/ui';
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Signature
|
|
14
|
+
|
|
15
|
+
```ts
|
|
16
|
+
type BfMediaCardAspect = '16/9' | '4/3' | '1/1' | '3/4'
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Values
|
|
20
|
+
|
|
21
|
+
- `16/9`
|
|
22
|
+
- `4/3`
|
|
23
|
+
- `1/1`
|
|
24
|
+
- `3/4`
|
|
25
|
+
|
|
26
|
+
## Used by
|
|
27
|
+
|
|
28
|
+
- [bf-media-card](../components/media-card.md)
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
# BfMediaCardHarness
|
|
2
|
+
|
|
3
|
+
Test harness for a media card: its image state, its messages and its selection
|
|
4
|
+
|
|
5
|
+
Class from `@bitforgehq/ui/testing` · since 0.5.0
|
|
6
|
+
|
|
7
|
+
Harness for `bf-media-card`. jsdom never loads images, so `loadImage()` and `failImage()` fire
|
|
8
|
+
the image's `load` and `error` events the way a browser would; `getState()` then tells what the
|
|
9
|
+
image area shows.
|
|
10
|
+
|
|
11
|
+
```ts
|
|
12
|
+
import { BfMediaCardHarness } from '@bitforgehq/ui/testing';
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## Signature
|
|
16
|
+
|
|
17
|
+
```ts
|
|
18
|
+
class BfMediaCardHarness extends ComponentHarness
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
## Methods
|
|
22
|
+
|
|
23
|
+
### `getTitle(): Promise<string>`
|
|
24
|
+
|
|
25
|
+
The card's title: the text of the first heading in its body.
|
|
26
|
+
|
|
27
|
+
### `getState(): Promise<'empty' | 'loading' | 'loaded' | 'failed'>`
|
|
28
|
+
|
|
29
|
+
What the image area shows: `empty` (no `src`, not loading), `loading` (the skeleton),
|
|
30
|
+
`loaded` (the image) or `failed` (the failure message).
|
|
31
|
+
|
|
32
|
+
### `getSrc(): Promise<string>`
|
|
33
|
+
|
|
34
|
+
The URL of the image.
|
|
35
|
+
|
|
36
|
+
### `getAlt(): Promise<string>`
|
|
37
|
+
|
|
38
|
+
The alternative text of the image.
|
|
39
|
+
|
|
40
|
+
### `getLoadingLabel(): Promise<string>`
|
|
41
|
+
|
|
42
|
+
The caption over the skeleton while loading (the `loading` label when none is set).
|
|
43
|
+
|
|
44
|
+
### `getFailedMessage(): Promise<string>`
|
|
45
|
+
|
|
46
|
+
The failure message.
|
|
47
|
+
|
|
48
|
+
### `loadImage(): Promise<void>`
|
|
49
|
+
|
|
50
|
+
Fires the image's `load` event, as a browser does when it arrives. Throws without one.
|
|
51
|
+
|
|
52
|
+
### `failImage(): Promise<void>`
|
|
53
|
+
|
|
54
|
+
Fires the image's `error` event, as a browser does when it fails. Throws without one.
|
|
55
|
+
|
|
56
|
+
### `isSelectable(): Promise<boolean>`
|
|
57
|
+
|
|
58
|
+
Whether the card has a select button (`selectable`).
|
|
59
|
+
|
|
60
|
+
### `isSelected(): Promise<boolean>`
|
|
61
|
+
|
|
62
|
+
Whether the card is selected (its select button is pressed).
|
|
63
|
+
|
|
64
|
+
### `toggleSelected(): Promise<void>`
|
|
65
|
+
|
|
66
|
+
Clicks the select button, toggling the selection. Throws for a card that is not selectable.
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
# BfMotionListDirective
|
|
2
|
+
|
|
3
|
+
Glides the items of a list or grid to their new place when it changes
|
|
4
|
+
|
|
5
|
+
Directive from `@bitforgehq/ui` · since 0.5.0
|
|
6
|
+
|
|
7
|
+
Glides the items of an app's list or grid to their new place when items are added, removed or
|
|
8
|
+
reordered, instead of letting them jump (the FLIP technique). Put `bfMotionList` on the element
|
|
9
|
+
whose direct children are the items, usually the one around an `@for`. Each item remembers
|
|
10
|
+
where it was; after the DOM changes, every item that moved slides from its old place to its new
|
|
11
|
+
one over 200 ms (`--bf-duration-layout`, on the settle curve). Pair it with Angular's
|
|
12
|
+
`animate.enter="motion-safe:animate-item-enter"` and
|
|
13
|
+
`animate.leave="motion-safe:animate-item-leave"` on the items, so new items fade and rise in and
|
|
14
|
+
removed ones fade out before the rest close the gap. Nothing moves under
|
|
15
|
+
`prefers-reduced-motion: reduce`, and nothing glides when the container is resized. It moves
|
|
16
|
+
items within one container: an item moved to another list leaves one and enters the other.
|
|
17
|
+
|
|
18
|
+
```ts
|
|
19
|
+
import { BfMotionListDirective } from '@bitforgehq/ui';
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
Selector: `[bfMotionList]`
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
# BfProseDirective
|
|
2
|
+
|
|
3
|
+
Styles rendered markdown with the library tokens: headings, lists, code and quotes
|
|
4
|
+
|
|
5
|
+
Directive from `@bitforgehq/ui` · since 0.5.0
|
|
6
|
+
|
|
7
|
+
Styles rendered markdown inside its element: headings, paragraphs, lists, links, inline code,
|
|
8
|
+
code blocks, quotes and rules, through the semantic tokens only (so a theme override restyles
|
|
9
|
+
it). The app renders the markdown to HTML itself (and sanitises it); `bfProse` only styles it.
|
|
10
|
+
A `bf-chat-message` body is a `bfProse` element already.
|
|
11
|
+
|
|
12
|
+
```ts
|
|
13
|
+
import { BfProseDirective } from '@bitforgehq/ui';
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
Selector: `[bfProse]`
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
# BfRejectedFileReason
|
|
2
|
+
|
|
3
|
+
The rule a refused file broke, its type, its size or the file count
|
|
4
|
+
|
|
5
|
+
Type from `@bitforgehq/ui` · since 0.5.0
|
|
6
|
+
|
|
7
|
+
The rule a refused file broke: `type` (not accepted), `size` (over `maxSize`) or `count` (over
|
|
8
|
+
the limit).
|
|
9
|
+
|
|
10
|
+
```ts
|
|
11
|
+
import { type BfRejectedFileReason } from '@bitforgehq/ui';
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
## Signature
|
|
15
|
+
|
|
16
|
+
```ts
|
|
17
|
+
type BfRejectedFileReason = 'type' | 'size' | 'count'
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
## Values
|
|
21
|
+
|
|
22
|
+
- `type`
|
|
23
|
+
- `size`
|
|
24
|
+
- `count`
|
|
25
|
+
|
|
26
|
+
## Used by
|
|
27
|
+
|
|
28
|
+
- [BfRejectedFile](bf-rejected-file.md)
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
# BfRejectedFile
|
|
2
|
+
|
|
3
|
+
A picked or dropped file that broke a rule, with the rule and its message
|
|
4
|
+
|
|
5
|
+
Interface from `@bitforgehq/ui` · since 0.5.0
|
|
6
|
+
|
|
7
|
+
A picked or dropped file that broke a rule, with the rule and its message.
|
|
8
|
+
|
|
9
|
+
```ts
|
|
10
|
+
import { type BfRejectedFile } from '@bitforgehq/ui';
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Properties
|
|
14
|
+
|
|
15
|
+
| Name | Type | Default | Description |
|
|
16
|
+
| --------- | ------------------------------------------------------ | -------- | ---------------------------------------------------------------------------------------------- |
|
|
17
|
+
| `file` | `File` | required | The file that was not added. |
|
|
18
|
+
| `reason` | `BfRejectedFileReason` (`'type' \| 'size' \| 'count'`) | required | The rule it broke: `type` (not accepted), `size` (over `maxSize`) or `count` (over the limit). |
|
|
19
|
+
| `message` | `string` | required | The user-facing text for the rule, from the labels. |
|
|
20
|
+
|
|
21
|
+
## Uses
|
|
22
|
+
|
|
23
|
+
- [BfRejectedFileReason](bf-rejected-file-reason.md)
|
|
24
|
+
|
|
25
|
+
## Used by
|
|
26
|
+
|
|
27
|
+
- [bf-file-input](../components/file-input.md)
|
|
28
|
+
- [bf-image-input](../components/image-input.md)
|