@bitforgehq/ui 0.3.0 → 0.3.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.
- package/CHANGELOG.md +482 -0
- package/README.md +17 -11
- package/ai/MANIFEST.index.json +288 -0
- package/ai/MANIFEST.json +8716 -3926
- package/ai/REFERENCE.index.json +413 -0
- package/ai/REFERENCE.json +4710 -2047
- package/ai/UI_GUIDE.md +185 -57
- package/ai/components/back-button.md +42 -2
- package/ai/components/badge.md +17 -7
- package/ai/components/bar-chart.md +188 -0
- package/ai/components/breadcrumb-item.md +121 -0
- package/ai/components/breadcrumb.md +277 -0
- package/ai/components/button.md +82 -15
- package/ai/components/calendar.md +300 -0
- package/ai/components/card.md +63 -2
- package/ai/components/chart-card.md +283 -0
- package/ai/components/combobox.md +411 -0
- package/ai/components/date-input.md +396 -0
- package/ai/components/datetime-input.md +215 -0
- package/ai/components/description-item.md +111 -0
- package/ai/components/description-list.md +160 -0
- package/ai/components/donut-chart.md +169 -0
- package/ai/components/header.md +67 -2
- package/ai/components/icon-button.md +74 -16
- package/ai/components/icon.md +63 -7
- package/ai/components/line-chart.md +234 -0
- package/ai/components/list.md +70 -6
- package/ai/components/menu.md +5 -0
- package/ai/components/multi-combobox.md +257 -0
- package/ai/components/nav-group.md +178 -0
- package/ai/components/nav-item.md +210 -0
- package/ai/components/page-header.md +237 -0
- package/ai/components/pagination.md +173 -0
- package/ai/components/popover.md +250 -0
- package/ai/components/side-panel.md +391 -0
- package/ai/components/sidebar.md +363 -0
- package/ai/components/skeleton.md +215 -0
- package/ai/components/sparkline.md +188 -0
- package/ai/components/stat.md +233 -0
- package/ai/components/tab-group.md +226 -0
- package/ai/components/tab-panel.md +163 -0
- package/ai/components/table.md +568 -0
- package/ai/components/tabs.md +42 -2
- package/ai/components/theme-menu-button.md +182 -0
- package/ai/components/theme-switch.md +170 -0
- package/ai/components/time-input.md +240 -0
- package/ai/components/toolbar.md +289 -0
- package/ai/components/tooltip.md +230 -0
- package/ai/components/top-nav.md +159 -0
- package/ai/reference/bf-badge-appearance.md +36 -0
- package/ai/reference/bf-badge-variant.md +1 -1
- package/ai/reference/bf-bar-chart-orientation.md +27 -0
- package/ai/reference/bf-button-appearance.md +36 -0
- package/ai/reference/bf-button-variant.md +1 -1
- package/ai/reference/bf-calendar-disabled-date.md +23 -0
- package/ai/reference/bf-calendar-harness.md +51 -0
- package/ai/reference/bf-calendar-weekday.md +31 -0
- package/ai/reference/bf-chart-card-heading-level.md +26 -0
- package/ai/reference/bf-chart-curve.md +28 -0
- package/ai/reference/bf-chart-harness.md +51 -0
- package/ai/reference/bf-chart-legend-position.md +30 -0
- package/ai/reference/bf-chart-series.md +23 -0
- package/ai/reference/bf-chart-value-format.md +23 -0
- package/ai/reference/bf-color-scheme-service.md +30 -0
- package/ai/reference/bf-color-scheme.md +31 -0
- package/ai/reference/bf-combobox-filter.md +27 -0
- package/ai/reference/bf-combobox-harness.md +89 -0
- package/ai/reference/bf-combobox-option.md +33 -0
- package/ai/reference/bf-compare-with.md +2 -0
- package/ai/reference/bf-date-input-harness.md +67 -0
- package/ai/reference/bf-date-input-picker.md +27 -0
- package/ai/reference/bf-date-time-input-harness.md +76 -0
- package/ai/reference/bf-date-time-input-picker.md +27 -0
- package/ai/reference/bf-description-list-layout.md +26 -0
- package/ai/reference/bf-donut-slice.md +22 -0
- package/ai/reference/bf-labels.md +67 -20
- package/ai/reference/bf-menu-button-variant.md +1 -0
- package/ai/reference/bf-menu-placement.md +1 -0
- package/ai/reference/bf-overlay-options.md +28 -27
- package/ai/reference/bf-overlay-placement.md +34 -0
- package/ai/reference/bf-overlay-position.md +1 -1
- package/ai/reference/bf-overlay-service.md +5 -3
- package/ai/reference/bf-page-header-heading-level.md +26 -0
- package/ai/reference/bf-pagination-harness.md +61 -0
- package/ai/reference/bf-platform-service.md +17 -15
- package/ai/reference/bf-popover-harness.md +42 -0
- package/ai/reference/bf-popover-placement.md +28 -0
- package/ai/reference/bf-popover-trigger-directive.md +56 -0
- package/ai/reference/bf-side-panel-config.md +35 -0
- package/ai/reference/bf-side-panel-harness.md +34 -0
- package/ai/reference/bf-side-panel-ref.md +44 -0
- package/ai/reference/bf-side-panel-service.md +43 -0
- package/ai/reference/bf-side-panel-template-context.md +32 -0
- package/ai/reference/bf-side-panel-width.md +28 -0
- package/ai/reference/bf-size.md +12 -0
- package/ai/reference/bf-skeleton-shape.md +28 -0
- package/ai/reference/bf-stat-trend-intent.md +27 -0
- package/ai/reference/bf-stat-trend.md +27 -0
- package/ai/reference/bf-stat-variant.md +26 -0
- package/ai/reference/bf-tab-group-harness.md +44 -0
- package/ai/reference/bf-table-align.md +26 -0
- package/ai/reference/bf-table-cell-context.md +24 -0
- package/ai/reference/bf-table-cell-directive.md +22 -0
- package/ai/reference/bf-table-column.md +28 -0
- package/ai/reference/bf-table-harness.md +77 -0
- package/ai/reference/bf-table-row-key.md +21 -0
- package/ai/reference/bf-table-sort-direction.md +26 -0
- package/ai/reference/bf-table-sort.md +27 -0
- package/ai/reference/bf-theme.md +5 -4
- package/ai/reference/bf-time-input-harness.md +67 -0
- package/ai/reference/bf-time-input-hour-cycle.md +27 -0
- package/ai/reference/bf-time-input-picker.md +27 -0
- package/ai/reference/bf-tooltip-directive.md +43 -0
- package/ai/reference/bf-tooltip-harness.md +43 -0
- package/ai/reference/bf-tooltip-placement.md +28 -0
- package/ai/reference/bf_color_scheme_storage.md +20 -0
- package/ai/reference/bf_side_panel_data.md +17 -0
- package/ai/reference/bf_theme_storage.md +3 -1
- package/ai/reference/provide-bf-color-scheme.md +20 -0
- package/ai/reference/provide-bf-labels.md +12 -4
- package/ai/reference/slide-in-from-end.md +24 -0
- package/ai/reference/slide-out-to-end.md +24 -0
- package/fesm2022/bitforgehq-ui-charts.mjs +3045 -0
- package/fesm2022/bitforgehq-ui-charts.mjs.map +1 -0
- package/fesm2022/bitforgehq-ui-icons.mjs +107 -3
- package/fesm2022/bitforgehq-ui-icons.mjs.map +1 -1
- package/fesm2022/bitforgehq-ui-mobile.mjs +14 -59
- package/fesm2022/bitforgehq-ui-mobile.mjs.map +1 -1
- package/fesm2022/bitforgehq-ui-overlay.mjs +6436 -33
- package/fesm2022/bitforgehq-ui-overlay.mjs.map +1 -1
- package/fesm2022/bitforgehq-ui-testing.mjs +618 -1
- package/fesm2022/bitforgehq-ui-testing.mjs.map +1 -1
- package/fesm2022/bitforgehq-ui.mjs +5092 -153
- package/fesm2022/bitforgehq-ui.mjs.map +1 -1
- package/llms-full.txt +25177 -14398
- package/llms.txt +95 -1
- package/package.json +7 -3
- package/theme.css +101 -0
- package/types/bitforgehq-ui-charts.d.ts +967 -0
- package/types/bitforgehq-ui-icons.d.ts +13 -1
- package/types/bitforgehq-ui-mobile.d.ts +25 -18
- package/types/bitforgehq-ui-overlay.d.ts +1844 -7
- package/types/bitforgehq-ui-testing.d.ts +748 -1
- package/types/bitforgehq-ui.d.ts +2136 -44
|
@@ -11,11 +11,12 @@ type BfIconSize = 'sm' | 'md' | 'lg';
|
|
|
11
11
|
* Renders a Lucide icon from its data, tree-shakably and without a registry.
|
|
12
12
|
* Import the icon you need from `lucide` (e.g. `import { Search } from 'lucide'`) and bind it.
|
|
13
13
|
* Decorative by default; pass `label` when the icon carries meaning on its own (e.g. an icon-only
|
|
14
|
-
* control without visible text).
|
|
14
|
+
* control without visible text). `filled` fills a solid shape such as a heart or a star.
|
|
15
15
|
*
|
|
16
16
|
* @example
|
|
17
17
|
* <bf-icon [icon]="Search" />
|
|
18
18
|
* <bf-icon [icon]="Search" label="Search" size="lg" />
|
|
19
|
+
* <bf-icon [icon]="Heart" [filled]="favourite()" />
|
|
19
20
|
* @summary Tree-shakable Lucide icon renderer, decorative by default or labelled when meaningful
|
|
20
21
|
* @category Icons
|
|
21
22
|
* @since 0.1.0
|
|
@@ -27,7 +28,13 @@ export declare class BfIconComponent {
|
|
|
27
28
|
readonly size: import("@angular/core").InputSignal<BfIconSize>;
|
|
28
29
|
/** Accessible name. Leave empty for decorative icons next to visible text. */
|
|
29
30
|
readonly label: import("@angular/core").InputSignal<string>;
|
|
31
|
+
/** Fills the shape with `currentColor` (a favourite heart, a starred item); the stroke stays.
|
|
32
|
+
* Only icons whose every shape is closed are filled; a stroke icon (a check, a line) or an
|
|
33
|
+
* outline holding inner strokes renders as usual. */
|
|
34
|
+
readonly filled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
|
|
30
35
|
readonly px: import("@angular/core").Signal<number>;
|
|
36
|
+
/** Whether the shape is filled: `filled`, on an icon that can take it without hiding a stroke. */
|
|
37
|
+
protected readonly fillsShape: import("@angular/core").Signal<boolean>;
|
|
31
38
|
static ɵfac: i0.ɵɵFactoryDeclaration<BfIconComponent, never>;
|
|
32
39
|
static ɵcmp: i0.ɵɵComponentDeclaration<BfIconComponent, "bf-icon", never, {
|
|
33
40
|
"icon": {
|
|
@@ -45,6 +52,11 @@ export declare class BfIconComponent {
|
|
|
45
52
|
"required": false;
|
|
46
53
|
"isSignal": true;
|
|
47
54
|
};
|
|
55
|
+
"filled": {
|
|
56
|
+
"alias": "filled";
|
|
57
|
+
"required": false;
|
|
58
|
+
"isSignal": true;
|
|
59
|
+
};
|
|
48
60
|
}, {}, never, never, true, never>;
|
|
49
61
|
}
|
|
50
62
|
export type { BfIconSize };
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
+
import { SystemBarsStyle } from "@capacitor/core";
|
|
2
|
+
import { BfButtonVariant, BfColorScheme, BfTabBarController, ɵcreateMemoryColorSchemeStorage } from "@bitforgehq/ui";
|
|
1
3
|
import * as i0 from "@angular/core";
|
|
2
4
|
import { AfterViewInit, ComponentRef, EnvironmentInjector, EnvironmentProviders, InjectionToken, Injector, OnDestroy, OnInit, Signal, TemplateRef, Type } from "@angular/core";
|
|
3
|
-
import { SystemBarsStyle } from "@capacitor/core";
|
|
4
5
|
import { ActivatedRoute, ActivatedRouteSnapshot, BaseRouteReuseStrategy, Data, NavigationExtras, RouterConfigurationFeature, RouterOutletContract, Routes, UrlTree } from "@angular/router";
|
|
5
6
|
import * as core from "@bitforgehq/ui/overlay";
|
|
6
7
|
import { BfOverlayController, BfOverlayRef as BfOverlayRef$1, BfOverlayTemplateContext as BfOverlayTemplateContext$1, BfToastAction, BfToastAction as BfToastAction$1, BfToastDismissReason, BfToastRef, BfToastRef as BfToastRef$1, prefersReducedMotion } from "@bitforgehq/ui/overlay";
|
|
7
|
-
import { BfButtonVariant, BfTabBarController } from "@bitforgehq/ui";
|
|
8
8
|
import { IconNode } from "lucide";
|
|
9
9
|
/**
|
|
10
10
|
* The shell's transition and gesture style: `ios`, `md` (Material), or `auto` (iOS on iOS, else
|
|
@@ -135,25 +135,28 @@ type BfPlatform = 'ios' | 'android' | 'web';
|
|
|
135
135
|
*/
|
|
136
136
|
type BfShellMode = 'ios' | 'md';
|
|
137
137
|
/**
|
|
138
|
-
* The app theme choice: follow the system, or force light or dark.
|
|
138
|
+
* The app theme choice: follow the system, or force light or dark. The same type as
|
|
139
|
+
* `BfColorScheme` from `@bitforgehq/ui`.
|
|
139
140
|
*
|
|
140
141
|
* @summary The app theme choice, following the system or forcing light or dark
|
|
141
142
|
* @since 0.2.0
|
|
142
143
|
*/
|
|
143
|
-
type BfTheme =
|
|
144
|
+
type BfTheme = BfColorScheme;
|
|
144
145
|
/** A theme store in memory, gone with the app: where `localStorage` is unavailable, and in tests. Internal. */
|
|
145
|
-
declare
|
|
146
|
+
declare const createMemoryThemeStorage: typeof ɵcreateMemoryColorSchemeStorage;
|
|
146
147
|
/**
|
|
147
148
|
* Where `BfPlatformService` keeps the theme choice (the key `bf-theme`): `localStorage` when it is
|
|
148
149
|
* available, otherwise an in-memory map. Provide another store (a native preferences plugin, or an
|
|
149
|
-
* in-memory one in tests, as `provideBfShellTesting()` does) to keep the choice elsewhere.
|
|
150
|
+
* in-memory one in tests, as `provideBfShellTesting()` does) to keep the choice elsewhere. It is
|
|
151
|
+
* the same token as `BF_COLOR_SCHEME_STORAGE` from `@bitforgehq/ui`, which `BfColorSchemeService`
|
|
152
|
+
* reads, so providing either one moves the choice for both.
|
|
150
153
|
*
|
|
151
154
|
* @example
|
|
152
155
|
* providers: [{ provide: BF_THEME_STORAGE, useValue: sessionStorage }]
|
|
153
156
|
* @summary Injection token for the store that keeps the app theme choice between visits
|
|
154
157
|
* @since 0.3.0
|
|
155
158
|
*/
|
|
156
|
-
export declare const BF_THEME_STORAGE: InjectionToken<Pick<Storage, "getItem" | "setItem">>;
|
|
159
|
+
export declare const BF_THEME_STORAGE: import("@angular/core").InjectionToken<Pick<Storage, "getItem" | "setItem">>;
|
|
157
160
|
/**
|
|
158
161
|
* The SystemBars style for a theme: Dark = light icons. Android WebView < 140 pads the WebView, so
|
|
159
162
|
* the bar areas show the activity's window background (which follows the system theme): use
|
|
@@ -180,15 +183,17 @@ export declare function bfSystemBarsStyle(dark: boolean, platform: BfPlatform, w
|
|
|
180
183
|
/**
|
|
181
184
|
* Platform facts and the app theme: native or web, iOS or Android, the shell mode that follows
|
|
182
185
|
* from it, and the user's theme choice (system, light, dark) reflected as the `dark` class on
|
|
183
|
-
* `<html>`.
|
|
184
|
-
* theme
|
|
186
|
+
* `<html>`. The theme is `BfColorSchemeService` from `@bitforgehq/ui` (the Capacitor-free colour
|
|
187
|
+
* scheme a desktop app uses through `provideBfColorScheme()`): `theme` and `dark` are its
|
|
188
|
+
* `scheme` and `dark` signals, and `matchMedia('(prefers-color-scheme: dark)')` is the single
|
|
189
|
+
* source for the system theme on every platform.
|
|
185
190
|
*
|
|
186
191
|
* The `theme`/`dark` signals always compute, but the `<html>` class and storage writes
|
|
187
|
-
* only run when `provideBfShell()` provided `BF_SHELL_CONFIG`
|
|
188
|
-
*
|
|
189
|
-
*
|
|
190
|
-
*
|
|
191
|
-
*
|
|
192
|
+
* only run when `provideBfShell()` provided `BF_SHELL_CONFIG` (or the app provided
|
|
193
|
+
* `provideBfColorScheme()`) — i.e. this service is the app's own shell, not merely injected by
|
|
194
|
+
* something that wants `platform`/`mode`. Without it (e.g. a docs demo that instantiates
|
|
195
|
+
* `BfPlatformService` directly to preview `bf-tabs`), this service would otherwise fight the host
|
|
196
|
+
* page's own theme, overwriting `<html class="dark">` with whatever `prefers-color-scheme` says.
|
|
192
197
|
*
|
|
193
198
|
* With `provideBfShell()` on a native platform it also makes the viewport meta forbid zoom
|
|
194
199
|
* (`maximum-scale=1, user-scalable=no`, other directives kept; the meta is created if missing):
|
|
@@ -207,17 +212,19 @@ export declare function bfSystemBarsStyle(dark: boolean, platform: BfPlatform, w
|
|
|
207
212
|
export declare class BfPlatformService {
|
|
208
213
|
private readonly document;
|
|
209
214
|
private readonly shellConfig;
|
|
210
|
-
private readonly
|
|
215
|
+
private readonly colorScheme;
|
|
211
216
|
/** True inside the native iOS or Android app, false in a browser. */
|
|
212
217
|
readonly isNative: boolean;
|
|
213
218
|
/** The platform the app runs on. */
|
|
214
219
|
readonly platform: BfPlatform;
|
|
215
220
|
/** The platform's shell mode: `ios` on iOS, else `md`; `resolveShellMode()` applies the config. */
|
|
216
221
|
readonly mode: import("@angular/core").Signal<BfShellMode>;
|
|
217
|
-
/** The user's theme choice, stored in `BF_THEME_STORAGE` (`localStorage`); set it with
|
|
218
|
-
|
|
222
|
+
/** The user's theme choice, stored in `BF_THEME_STORAGE` (`localStorage`); set it with
|
|
223
|
+
* `theme.set(…)`. The same signal as `BfColorSchemeService.scheme`. */
|
|
224
|
+
readonly theme: import("@angular/core").WritableSignal<BfColorScheme>;
|
|
219
225
|
private readonly systemDark;
|
|
220
|
-
/** Whether the app is dark now: the theme choice, or the system's under `system`.
|
|
226
|
+
/** Whether the app is dark now: the theme choice, or the system's under `system`. The same
|
|
227
|
+
* signal as `BfColorSchemeService.dark`. */
|
|
221
228
|
readonly dark: import("@angular/core").Signal<boolean>;
|
|
222
229
|
constructor();
|
|
223
230
|
/** The native system bars are outside the page; a failed call leaves them as they were. */
|