@bitforgehq/ui 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +3665 -0
- package/LICENSE +21 -0
- package/README.md +175 -0
- package/ai/MANIFEST.index.json +383 -0
- package/ai/MANIFEST.json +7528 -0
- package/ai/REFERENCE.index.json +1461 -0
- package/ai/REFERENCE.json +7213 -0
- package/ai/UI_GUIDE.md +1159 -0
- package/ai/components/action-bar.md +209 -0
- package/ai/components/action-sheet.md +526 -0
- package/ai/components/alert-dialog.md +509 -0
- package/ai/components/alert.md +376 -0
- package/ai/components/avatar.md +146 -0
- package/ai/components/back-button.md +286 -0
- package/ai/components/badge.md +171 -0
- package/ai/components/button.md +431 -0
- package/ai/components/card.md +303 -0
- package/ai/components/checkbox.md +418 -0
- package/ai/components/chip-group.md +205 -0
- package/ai/components/chip.md +300 -0
- package/ai/components/content.md +474 -0
- package/ai/components/desktop-toast.md +420 -0
- package/ai/components/dialog.md +962 -0
- package/ai/components/empty-state.md +146 -0
- package/ai/components/field.md +319 -0
- package/ai/components/header.md +809 -0
- package/ai/components/icon-button.md +221 -0
- package/ai/components/icon.md +176 -0
- package/ai/components/input.md +455 -0
- package/ai/components/list-item.md +326 -0
- package/ai/components/list.md +178 -0
- package/ai/components/menu-button.md +377 -0
- package/ai/components/menu.md +661 -0
- package/ai/components/modal.md +613 -0
- package/ai/components/number-input.md +423 -0
- package/ai/components/page.md +299 -0
- package/ai/components/progress.md +215 -0
- package/ai/components/radio-group.md +432 -0
- package/ai/components/refresher.md +377 -0
- package/ai/components/segmented.md +517 -0
- package/ai/components/select.md +510 -0
- package/ai/components/sheet.md +845 -0
- package/ai/components/spinner.md +171 -0
- package/ai/components/stack-outlet.md +661 -0
- package/ai/components/tab-bar.md +427 -0
- package/ai/components/tab.md +295 -0
- package/ai/components/tabs.md +408 -0
- package/ai/components/textarea.md +371 -0
- package/ai/components/toast.md +522 -0
- package/ai/components/toggle.md +387 -0
- package/ai/reference/bf-action-directive.md +21 -0
- package/ai/reference/bf-action-sheet-action-role.md +27 -0
- package/ai/reference/bf-action-sheet-action.md +28 -0
- package/ai/reference/bf-action-sheet-options.md +28 -0
- package/ai/reference/bf-action-sheet-service.md +33 -0
- package/ai/reference/bf-alert-dialog-button-role.md +27 -0
- package/ai/reference/bf-alert-dialog-button.md +27 -0
- package/ai/reference/bf-alert-dialog-options.md +29 -0
- package/ai/reference/bf-alert-dialog-service.md +34 -0
- package/ai/reference/bf-alert-variant.md +28 -0
- package/ai/reference/bf-autocapitalize.md +30 -0
- package/ai/reference/bf-avatar-size.md +27 -0
- package/ai/reference/bf-avatar-variant.md +28 -0
- package/ai/reference/bf-back-at-root.md +28 -0
- package/ai/reference/bf-back-button-service.md +40 -0
- package/ai/reference/bf-badge-variant.md +29 -0
- package/ai/reference/bf-button-size.md +29 -0
- package/ai/reference/bf-button-type.md +28 -0
- package/ai/reference/bf-button-variant.md +29 -0
- package/ai/reference/bf-card-padding.md +26 -0
- package/ai/reference/bf-card-variant.md +28 -0
- package/ai/reference/bf-chip-group-mode.md +27 -0
- package/ai/reference/bf-chip-variant.md +26 -0
- package/ai/reference/bf-compare-with.md +24 -0
- package/ai/reference/bf-component-overlay-ref.md +33 -0
- package/ai/reference/bf-confirm-button-role.md +26 -0
- package/ai/reference/bf-confirm-button.md +27 -0
- package/ai/reference/bf-confirm-options.md +31 -0
- package/ai/reference/bf-confirm-size.md +26 -0
- package/ai/reference/bf-content-scroll-event.md +21 -0
- package/ai/reference/bf-defaults-options.md +32 -0
- package/ai/reference/bf-defaults.md +28 -0
- package/ai/reference/bf-desktop-toast-config.md +28 -0
- package/ai/reference/bf-desktop-toast-harness.md +33 -0
- package/ai/reference/bf-desktop-toast-options.md +28 -0
- package/ai/reference/bf-desktop-toast-position.md +28 -0
- package/ai/reference/bf-desktop-toast-service.md +42 -0
- package/ai/reference/bf-dialog-config.md +44 -0
- package/ai/reference/bf-dialog-harness.md +52 -0
- package/ai/reference/bf-dialog-ref.md +44 -0
- package/ai/reference/bf-dialog-role.md +26 -0
- package/ai/reference/bf-dialog-service.md +55 -0
- package/ai/reference/bf-dialog-size.md +31 -0
- package/ai/reference/bf-dialog-template-context.md +32 -0
- package/ai/reference/bf-empty-state-heading-level.md +26 -0
- package/ai/reference/bf-enter-key-hint.md +31 -0
- package/ai/reference/bf-field-control-class.md +32 -0
- package/ai/reference/bf-field-control-state.md +28 -0
- package/ai/reference/bf-field-size.md +29 -0
- package/ai/reference/bf-haptics-impact-style.md +27 -0
- package/ai/reference/bf-haptics-notification-type.md +27 -0
- package/ai/reference/bf-haptics-service.md +41 -0
- package/ai/reference/bf-harness-filters.md +29 -0
- package/ai/reference/bf-horizontal-scroll-directive.md +129 -0
- package/ai/reference/bf-icon-button-variant.md +28 -0
- package/ai/reference/bf-icon-size.md +27 -0
- package/ai/reference/bf-input-autocapitalize.md +36 -0
- package/ai/reference/bf-input-enter-key-hint.md +38 -0
- package/ai/reference/bf-input-input-mode.md +38 -0
- package/ai/reference/bf-input-mode.md +32 -0
- package/ai/reference/bf-input-type.md +35 -0
- package/ai/reference/bf-jsdom-shim-options.md +22 -0
- package/ai/reference/bf-keyboard-assist-behavior.md +26 -0
- package/ai/reference/bf-keyboard-assist-directive.md +185 -0
- package/ai/reference/bf-keyboard-phase.md +30 -0
- package/ai/reference/bf-keyboard-service.md +50 -0
- package/ai/reference/bf-labels-overrides.md +26 -0
- package/ai/reference/bf-labels.md +44 -0
- package/ai/reference/bf-menu-button-harness.md +40 -0
- package/ai/reference/bf-menu-button-variant.md +27 -0
- package/ai/reference/bf-menu-divider-directive.md +13 -0
- package/ai/reference/bf-menu-group-directive.md +14 -0
- package/ai/reference/bf-menu-harness.md +55 -0
- package/ai/reference/bf-menu-item-checkbox-directive.md +31 -0
- package/ai/reference/bf-menu-item-directive.md +31 -0
- package/ai/reference/bf-menu-item-harness.md +52 -0
- package/ai/reference/bf-menu-item-radio-directive.md +29 -0
- package/ai/reference/bf-menu-placement.md +29 -0
- package/ai/reference/bf-menu-trigger-directive.md +46 -0
- package/ai/reference/bf-modal-options.md +30 -0
- package/ai/reference/bf-modal-presentation.md +26 -0
- package/ai/reference/bf-modal-service.md +38 -0
- package/ai/reference/bf-nav-controller.md +59 -0
- package/ai/reference/bf-nav-direction.md +23 -0
- package/ai/reference/bf-nav-target.md +21 -0
- package/ai/reference/bf-number-input-mode.md +28 -0
- package/ai/reference/bf-number-input-step.md +25 -0
- package/ai/reference/bf-overlay-auto-focus.md +29 -0
- package/ai/reference/bf-overlay-controller.md +22 -0
- package/ai/reference/bf-overlay-host.md +36 -0
- package/ai/reference/bf-overlay-options.md +53 -0
- package/ai/reference/bf-overlay-position.md +30 -0
- package/ai/reference/bf-overlay-ref.md +53 -0
- package/ai/reference/bf-overlay-role.md +27 -0
- package/ai/reference/bf-overlay-service.md +53 -0
- package/ai/reference/bf-overlay-stack-options.md +24 -0
- package/ai/reference/bf-overlay-stack.md +81 -0
- package/ai/reference/bf-overlay-template-context.md +24 -0
- package/ai/reference/bf-overscroll-stretch-directive.md +163 -0
- package/ai/reference/bf-page-context.md +24 -0
- package/ai/reference/bf-platform-service.md +53 -0
- package/ai/reference/bf-platform.md +28 -0
- package/ai/reference/bf-progress-size.md +26 -0
- package/ai/reference/bf-progress-tone.md +28 -0
- package/ai/reference/bf-radio-group-harness.md +49 -0
- package/ai/reference/bf-radio-group-orientation.md +26 -0
- package/ai/reference/bf-radio-option.md +30 -0
- package/ai/reference/bf-refresher-refresh-event.md +22 -0
- package/ai/reference/bf-segment-option.md +29 -0
- package/ai/reference/bf-segmented-harness.md +48 -0
- package/ai/reference/bf-segmented-size.md +29 -0
- package/ai/reference/bf-select-harness.md +70 -0
- package/ai/reference/bf-select-option.md +29 -0
- package/ai/reference/bf-sheet-auto-focus.md +29 -0
- package/ai/reference/bf-sheet-options.md +32 -0
- package/ai/reference/bf-sheet-ref.md +45 -0
- package/ai/reference/bf-sheet-service.md +34 -0
- package/ai/reference/bf-shell-config-mode.md +28 -0
- package/ai/reference/bf-shell-config.md +38 -0
- package/ai/reference/bf-shell-dynamic-type-limit.md +21 -0
- package/ai/reference/bf-shell-dynamic-type.md +25 -0
- package/ai/reference/bf-shell-mode.md +28 -0
- package/ai/reference/bf-shell-testing-options.md +26 -0
- package/ai/reference/bf-size.md +45 -0
- package/ai/reference/bf-spinner-size.md +27 -0
- package/ai/reference/bf-stack-change.md +22 -0
- package/ai/reference/bf-stack-reuse-strategy.md +32 -0
- package/ai/reference/bf-stack-transition-event.md +26 -0
- package/ai/reference/bf-stack-transition.md +26 -0
- package/ai/reference/bf-stacked-overlay.md +23 -0
- package/ai/reference/bf-system-bars-style.md +38 -0
- package/ai/reference/bf-tab-bar-controller.md +51 -0
- package/ai/reference/bf-tab-bar-host.md +52 -0
- package/ai/reference/bf-tab-context.md +32 -0
- package/ai/reference/bf-tab-links.md +37 -0
- package/ai/reference/bf-testing-options.md +27 -0
- package/ai/reference/bf-text-scale-service.md +35 -0
- package/ai/reference/bf-theme.md +27 -0
- package/ai/reference/bf-toast-action.md +25 -0
- package/ai/reference/bf-toast-controller.md +17 -0
- package/ai/reference/bf-toast-dismiss-reason.md +29 -0
- package/ai/reference/bf-toast-options.md +29 -0
- package/ai/reference/bf-toast-position.md +26 -0
- package/ai/reference/bf-toast-ref.md +41 -0
- package/ai/reference/bf-toast-service.md +39 -0
- package/ai/reference/bf-toggle-label-position.md +26 -0
- package/ai/reference/bf-transition-kind.md +28 -0
- package/ai/reference/bf-validation-message.md +31 -0
- package/ai/reference/bf-validation-messages.md +33 -0
- package/ai/reference/bf-view-event.md +28 -0
- package/ai/reference/bf-view-lifecycle.md +41 -0
- package/ai/reference/bf-view-state.md +28 -0
- package/ai/reference/bf_default_labels.md +21 -0
- package/ai/reference/bf_default_values.md +21 -0
- package/ai/reference/bf_defaults.md +21 -0
- package/ai/reference/bf_desktop_toast_defaults.md +21 -0
- package/ai/reference/bf_dialog_data.md +17 -0
- package/ai/reference/bf_labels.md +21 -0
- package/ai/reference/bf_overlay_data.md +19 -0
- package/ai/reference/bf_overlay_host.md +21 -0
- package/ai/reference/bf_sheet_default_snap_points.md +17 -0
- package/ai/reference/bf_shell_config.md +21 -0
- package/ai/reference/bf_shell_defaults.md +21 -0
- package/ai/reference/bf_tab_bar.md +21 -0
- package/ai/reference/bf_tab_bar_controller.md +21 -0
- package/ai/reference/bf_tab_context.md +21 -0
- package/ai/reference/bf_tab_links.md +21 -0
- package/ai/reference/bf_theme_storage.md +19 -0
- package/ai/reference/create-transition.md +36 -0
- package/ai/reference/duration_fast.md +17 -0
- package/ai/reference/duration_md.md +17 -0
- package/ai/reference/duration_overlay.md +17 -0
- package/ai/reference/duration_push.md +17 -0
- package/ai/reference/fade-down.md +26 -0
- package/ai/reference/fade-in.md +25 -0
- package/ai/reference/fade-out.md +25 -0
- package/ai/reference/fade-up.md +26 -0
- package/ai/reference/inject-shell-mode.md +23 -0
- package/ai/reference/install-bf-jsdom-shims.md +31 -0
- package/ai/reference/ios_duration.md +17 -0
- package/ai/reference/ios_easing.md +17 -0
- package/ai/reference/is-text-entry.md +25 -0
- package/ai/reference/max_complete_ms.md +17 -0
- package/ai/reference/md-transition.md +31 -0
- package/ai/reference/md_duration.md +17 -0
- package/ai/reference/md_easing.md +17 -0
- package/ai/reference/overlay_duration.md +21 -0
- package/ai/reference/overlay_easing.md +19 -0
- package/ai/reference/overlay_reduced_duration.md +17 -0
- package/ai/reference/pop-frames-at.md +25 -0
- package/ai/reference/prefers-reduced-motion.md +25 -0
- package/ai/reference/provide-bf-defaults.md +33 -0
- package/ai/reference/provide-bf-desktop-toast.md +28 -0
- package/ai/reference/provide-bf-labels.md +38 -0
- package/ai/reference/provide-bf-shell-testing.md +34 -0
- package/ai/reference/provide-bf-shell.md +41 -0
- package/ai/reference/provide-bf-testing.md +33 -0
- package/ai/reference/reduced-transition.md +28 -0
- package/ai/reference/reduced_duration.md +17 -0
- package/ai/reference/resolve-shell-mode.md +33 -0
- package/ai/reference/scale-in.md +25 -0
- package/ai/reference/settle-duration.md +25 -0
- package/ai/reference/settle-pop.md +33 -0
- package/ai/reference/settle_easing.md +17 -0
- package/ai/reference/should-complete-pop.md +26 -0
- package/ai/reference/slide-down.md +26 -0
- package/ai/reference/slide-up.md +26 -0
- package/ai/reference/with-bf-shell-routing.md +19 -0
- package/bin/bf-ui.js +81 -0
- package/fesm2022/bitforgehq-ui-icons.mjs +230 -0
- package/fesm2022/bitforgehq-ui-icons.mjs.map +1 -0
- package/fesm2022/bitforgehq-ui-mobile.mjs +5530 -0
- package/fesm2022/bitforgehq-ui-mobile.mjs.map +1 -0
- package/fesm2022/bitforgehq-ui-number-input.mjs +680 -0
- package/fesm2022/bitforgehq-ui-number-input.mjs.map +1 -0
- package/fesm2022/bitforgehq-ui-overlay.mjs +2675 -0
- package/fesm2022/bitforgehq-ui-overlay.mjs.map +1 -0
- package/fesm2022/bitforgehq-ui-testing.mjs +402 -0
- package/fesm2022/bitforgehq-ui-testing.mjs.map +1 -0
- package/fesm2022/bitforgehq-ui.mjs +7765 -0
- package/fesm2022/bitforgehq-ui.mjs.map +1 -0
- package/llms-full.txt +25394 -0
- package/llms.txt +329 -0
- package/package.json +94 -0
- package/theme.css +253 -0
- package/types/bitforgehq-ui-icons.d.ts +50 -0
- package/types/bitforgehq-ui-mobile.d.ts +2914 -0
- package/types/bitforgehq-ui-number-input.d.ts +282 -0
- package/types/bitforgehq-ui-overlay.d.ts +1514 -0
- package/types/bitforgehq-ui-testing.d.ts +495 -0
- package/types/bitforgehq-ui.d.ts +3499 -0
|
@@ -0,0 +1,1514 @@
|
|
|
1
|
+
import * as i0 from "@angular/core";
|
|
2
|
+
import { ComponentRef, DestroyRef, EnvironmentProviders, InjectionToken, Injector, Signal, StaticProvider, TemplateRef, Type } from "@angular/core";
|
|
3
|
+
import { LiveAnnouncer } from "@angular/cdk/a11y";
|
|
4
|
+
import { BfSize } from "@bitforgehq/ui";
|
|
5
|
+
import * as i1 from "@angular/cdk/menu";
|
|
6
|
+
/**
|
|
7
|
+
* The `data` passed to `BfOverlayService.open()`, injectable in the overlay's content.
|
|
8
|
+
*
|
|
9
|
+
* @summary Injection token carrying the data an overlay was opened with, for its content
|
|
10
|
+
* @since 0.2.0
|
|
11
|
+
*/
|
|
12
|
+
export declare const BF_OVERLAY_DATA: InjectionToken<unknown>;
|
|
13
|
+
/**
|
|
14
|
+
* What the overlay service does for a ref. Exported for entries that extend `BfOverlayRef` with
|
|
15
|
+
* their own controller (the `/mobile` `BfSheetRef`); apps never implement it.
|
|
16
|
+
*
|
|
17
|
+
* @summary What the overlay service does for a ref: close it and re-apply its position
|
|
18
|
+
* @since 0.2.0
|
|
19
|
+
*/
|
|
20
|
+
interface BfOverlayController {
|
|
21
|
+
/** Plays the exit animation, detaches the overlay and cleans up. Never rejects. */
|
|
22
|
+
close(): Promise<void>;
|
|
23
|
+
/** Re-applies the overlay's position (after its size changed). */
|
|
24
|
+
updatePosition(): void;
|
|
25
|
+
}
|
|
26
|
+
/**
|
|
27
|
+
* Handle to an open overlay, returned by `BfOverlayService.open()` and injectable in the
|
|
28
|
+
* overlay's content. `close(result)` plays the exit animation, detaches the overlay and resolves
|
|
29
|
+
* `afterClosed` with `result`; later calls are ignored.
|
|
30
|
+
*
|
|
31
|
+
* @example
|
|
32
|
+
* const ref = overlays.open(PickerComponent, { data: { value } });
|
|
33
|
+
* const picked = await ref.afterClosed;
|
|
34
|
+
*
|
|
35
|
+
* @summary Handle on an open overlay that closes it and resolves with its result
|
|
36
|
+
* @since 0.2.0
|
|
37
|
+
*/
|
|
38
|
+
export declare class BfOverlayRef<T = unknown> {
|
|
39
|
+
private readonly controller;
|
|
40
|
+
/** Unique id of the overlay (`bf-overlay-N`). */
|
|
41
|
+
readonly id: string;
|
|
42
|
+
/** Resolves with the result given to `close()` once the overlay is detached. */
|
|
43
|
+
readonly afterClosed: Promise<T | undefined>;
|
|
44
|
+
private readonly closedState;
|
|
45
|
+
/** True once the overlay has been detached. */
|
|
46
|
+
readonly closed: Signal<boolean>;
|
|
47
|
+
private closing;
|
|
48
|
+
private resolveClosed;
|
|
49
|
+
constructor(controller: BfOverlayController);
|
|
50
|
+
/** True from the first `close()` call on (the exit animation may still be running). */
|
|
51
|
+
get isClosing(): boolean;
|
|
52
|
+
/**
|
|
53
|
+
* Closes the overlay with an optional result; ignored once closing.
|
|
54
|
+
* @param result The value `afterClosed` resolves with.
|
|
55
|
+
*/
|
|
56
|
+
close(result?: T): void;
|
|
57
|
+
/** Re-applies the overlay's position (after its size changed). */
|
|
58
|
+
updatePosition(): void;
|
|
59
|
+
}
|
|
60
|
+
/**
|
|
61
|
+
* An overlay ref whose content is a component, exposing its `ComponentRef`.
|
|
62
|
+
*
|
|
63
|
+
* @summary Overlay handle whose content is a component, with access to its ComponentRef
|
|
64
|
+
* @since 0.2.0
|
|
65
|
+
*/
|
|
66
|
+
export declare class BfComponentOverlayRef<C, T = unknown> extends BfOverlayRef<T> {
|
|
67
|
+
private ref;
|
|
68
|
+
/** The content component; available as soon as `open()` returns. */
|
|
69
|
+
get componentRef(): ComponentRef<C>;
|
|
70
|
+
/** @internal Set by `BfOverlayService` once the component is attached. */
|
|
71
|
+
setComponentRef(ref: ComponentRef<C>): void;
|
|
72
|
+
}
|
|
73
|
+
/**
|
|
74
|
+
* What the stack needs of an overlay: a way to close it (a `BfOverlayRef` of any result type).
|
|
75
|
+
*
|
|
76
|
+
* @summary What the overlay stack needs of an overlay: a way to close it
|
|
77
|
+
* @since 0.2.0
|
|
78
|
+
*/
|
|
79
|
+
interface BfStackedOverlay {
|
|
80
|
+
/** Closes the overlay (the stack calls it for the hardware back button). */
|
|
81
|
+
close(): void;
|
|
82
|
+
}
|
|
83
|
+
/**
|
|
84
|
+
* How an overlay takes part in the stack.
|
|
85
|
+
*
|
|
86
|
+
* @summary How an overlay takes part in the stack: its back priority and modal depth
|
|
87
|
+
* @since 0.2.0
|
|
88
|
+
*/
|
|
89
|
+
interface BfOverlayStackOptions {
|
|
90
|
+
/**
|
|
91
|
+
* Priority of its hardware back handler (default 100).
|
|
92
|
+
* @default 100
|
|
93
|
+
*/
|
|
94
|
+
backPriority?: number;
|
|
95
|
+
/**
|
|
96
|
+
* Counts towards `depth()` and `--bf-modal-depth` (page-sheet modals).
|
|
97
|
+
* @default false
|
|
98
|
+
*/
|
|
99
|
+
countsAsModal?: boolean;
|
|
100
|
+
}
|
|
101
|
+
/**
|
|
102
|
+
* The open modal-like overlays, in order. While any is open, every registered page root (the
|
|
103
|
+
* `/mobile` `bf-stack-outlet` hosts register themselves) is `inert`, and `--bf-modal-depth` on the
|
|
104
|
+
* roots carries the number of open modals. With no registered root (a desktop page), every direct
|
|
105
|
+
* child of `document.body` becomes `inert` instead, except those holding a CDK overlay container
|
|
106
|
+
* (`.cdk-overlay-container`, found without importing the CDK), the CDK live
|
|
107
|
+
* announcer and `AriaDescriber` containers, `script`/`style`/`template`/`link` and body children
|
|
108
|
+
* carrying `data-bf-overlay-keep`; an element that was already `inert` keeps it on close. When
|
|
109
|
+
* the stack's injector is destroyed (the app torn down with an overlay open), it removes every
|
|
110
|
+
* `inert` and `--bf-modal-depth` it set. Under a `BF_OVERLAY_HOST`
|
|
111
|
+
* (`provideBfShell()`) each pushed overlay registers a hardware back handler that closes it; on
|
|
112
|
+
* equal priority the newest overlay closes first. Passive overlays (toasts) are never pushed.
|
|
113
|
+
*
|
|
114
|
+
* @summary Keeps the open overlays in order and makes the page behind them inert
|
|
115
|
+
* @since 0.2.0
|
|
116
|
+
*/
|
|
117
|
+
export declare class BfOverlayStack {
|
|
118
|
+
private readonly host;
|
|
119
|
+
private readonly document;
|
|
120
|
+
private readonly roots;
|
|
121
|
+
/** Body children the stack made `inert` (outside a shell), and only those. */
|
|
122
|
+
private readonly inertBodyChildren;
|
|
123
|
+
private readonly entries;
|
|
124
|
+
constructor();
|
|
125
|
+
/** Number of open modal-like overlays. */
|
|
126
|
+
readonly count: import("@angular/core").Signal<number>;
|
|
127
|
+
/** Number of open overlays that count as modals (drives `--bf-modal-depth`). */
|
|
128
|
+
readonly depth: import("@angular/core").Signal<number>;
|
|
129
|
+
/**
|
|
130
|
+
* Registers a page root that becomes `inert` while an overlay is open. Returns a function that
|
|
131
|
+
* unregisters it (and clears what the stack set on it).
|
|
132
|
+
* @param el The page root, such as a `bf-stack-outlet` host.
|
|
133
|
+
*/
|
|
134
|
+
registerRoot(el: HTMLElement): () => void;
|
|
135
|
+
/**
|
|
136
|
+
* Adds an overlay on top of the stack. Outside a shell, every body child that holds a CDK
|
|
137
|
+
* overlay container (`.cdk-overlay-container`) stays active, so an overlay created on the CDK
|
|
138
|
+
* directly, not through `BfOverlayService`, can be pushed as well.
|
|
139
|
+
* @param ref The overlay's ref.
|
|
140
|
+
* @param options Its back priority and whether it counts as a modal.
|
|
141
|
+
*/
|
|
142
|
+
push(ref: BfStackedOverlay, options?: BfOverlayStackOptions): void;
|
|
143
|
+
/**
|
|
144
|
+
* Removes an overlay from the stack.
|
|
145
|
+
* @param ref The overlay's ref.
|
|
146
|
+
*/
|
|
147
|
+
pop(ref: BfStackedOverlay): void;
|
|
148
|
+
/**
|
|
149
|
+
* True when `ref` is the newest overlay in the stack (the one that answers `Escape`).
|
|
150
|
+
* @param ref The overlay's ref.
|
|
151
|
+
*/
|
|
152
|
+
isTop(ref: BfStackedOverlay): boolean;
|
|
153
|
+
/**
|
|
154
|
+
* Stops the back handler of an overlay that is closing, while it stays in the stack.
|
|
155
|
+
* @param ref The overlay's ref.
|
|
156
|
+
*/
|
|
157
|
+
releaseBack(ref: BfStackedOverlay): void;
|
|
158
|
+
/**
|
|
159
|
+
* Written synchronously on every change rather than in an effect: an overlay restores focus
|
|
160
|
+
* into a root right after popping, which fails while the root is still `inert`.
|
|
161
|
+
*/
|
|
162
|
+
private apply;
|
|
163
|
+
/** Outside a shell (no registered root), isolates the page: body children become `inert`. */
|
|
164
|
+
private applyToBody;
|
|
165
|
+
private applyTo;
|
|
166
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<BfOverlayStack, never>;
|
|
167
|
+
static ɵprov: i0.ɵɵInjectableDeclaration<any>;
|
|
168
|
+
}
|
|
169
|
+
/**
|
|
170
|
+
* Where the overlay's panel sits in the viewport.
|
|
171
|
+
*
|
|
172
|
+
* @summary Where an overlay panel sits in the viewport: bottom, centre, top or fullscreen
|
|
173
|
+
* @since 0.2.0
|
|
174
|
+
*/
|
|
175
|
+
type BfOverlayPosition = 'bottom' | 'center' | 'top' | 'fullscreen';
|
|
176
|
+
/**
|
|
177
|
+
* The ARIA role of an overlay panel: a `dialog`, an `alertdialog` or a passive `status`.
|
|
178
|
+
*
|
|
179
|
+
* @summary The role an overlay panel carries: a dialog, an alert dialog or a status
|
|
180
|
+
* @since 0.3.0
|
|
181
|
+
*/
|
|
182
|
+
type BfOverlayRole = 'dialog' | 'alertdialog' | 'status';
|
|
183
|
+
/**
|
|
184
|
+
* Where focus goes when an overlay opens: the first tabbable element of the content
|
|
185
|
+
* (`first-tabbable`, skipping the container's own controls such as `bf-sheet`'s hidden Close) or
|
|
186
|
+
* the panel itself (`panel`).
|
|
187
|
+
*
|
|
188
|
+
* @summary Where focus lands when an overlay opens, its first control or the panel
|
|
189
|
+
* @since 0.3.0
|
|
190
|
+
*/
|
|
191
|
+
type BfOverlayAutoFocus = 'first-tabbable' | 'panel';
|
|
192
|
+
/**
|
|
193
|
+
* Options of `BfOverlayService.open()`.
|
|
194
|
+
*
|
|
195
|
+
* @summary Options of an overlay: its data, backdrop, focus, dismissal, position and motion
|
|
196
|
+
* @since 0.2.0
|
|
197
|
+
*/
|
|
198
|
+
interface BfOverlayOptions {
|
|
199
|
+
/** Injected into the content as `BF_OVERLAY_DATA`. */
|
|
200
|
+
data?: unknown;
|
|
201
|
+
/** Extra classes on the panel (it always carries `bf-overlay-panel`). */
|
|
202
|
+
panelClass?: string[];
|
|
203
|
+
/**
|
|
204
|
+
* Renders a backdrop behind the panel (default true; never for passive overlays).
|
|
205
|
+
* @default true
|
|
206
|
+
*/
|
|
207
|
+
backdrop?: boolean;
|
|
208
|
+
/**
|
|
209
|
+
* Class of the backdrop (default `bf-overlay-backdrop`: a black scrim, 40 % light / 60 % dark).
|
|
210
|
+
* @default 'bf-overlay-backdrop'
|
|
211
|
+
*/
|
|
212
|
+
backdropClass?: string;
|
|
213
|
+
/**
|
|
214
|
+
* A backdrop click closes the overlay (default true).
|
|
215
|
+
* @default true
|
|
216
|
+
*/
|
|
217
|
+
dismissOnBackdrop?: boolean;
|
|
218
|
+
/**
|
|
219
|
+
* `Escape` closes the overlay (default true).
|
|
220
|
+
* @default true
|
|
221
|
+
*/
|
|
222
|
+
dismissOnEscape?: boolean;
|
|
223
|
+
/**
|
|
224
|
+
* Runs instead of closing when the overlay is on top and `Escape` is pressed (e.g. an alert
|
|
225
|
+
* resolving with its cancel button). The key is always claimed by the topmost non-passive
|
|
226
|
+
* overlay, so it never reaches an overlay underneath.
|
|
227
|
+
*/
|
|
228
|
+
onEscape?: () => void;
|
|
229
|
+
/**
|
|
230
|
+
* Role of the panel (default `dialog`; passive overlays get none unless one is given — a toast
|
|
231
|
+
* is announced through `LiveAnnouncer`).
|
|
232
|
+
* @default 'dialog'
|
|
233
|
+
*/
|
|
234
|
+
role?: BfOverlayRole;
|
|
235
|
+
/** Accessible name of the panel. */
|
|
236
|
+
ariaLabel?: string;
|
|
237
|
+
/**
|
|
238
|
+
* Id of the element naming the panel. Dropped after the content renders when no element inside
|
|
239
|
+
* the panel carries it and `ariaLabel` is unset, so the panel never points at nothing.
|
|
240
|
+
*/
|
|
241
|
+
ariaLabelledBy?: string;
|
|
242
|
+
/** Id of the element describing the panel (an alert's message). */
|
|
243
|
+
ariaDescribedBy?: string;
|
|
244
|
+
/**
|
|
245
|
+
* Traps Tab focus inside the panel (default true).
|
|
246
|
+
* @default true
|
|
247
|
+
*/
|
|
248
|
+
trapFocus?: boolean;
|
|
249
|
+
/**
|
|
250
|
+
* Where focus goes on open (non-passive overlays): `first-tabbable` (default) — the element
|
|
251
|
+
* marked `[autofocus]`/`[cdkFocusInitial]` when it is focusable (a control, or any element with
|
|
252
|
+
* a `tabindex`, also `-1`), else the first tabbable element inside it, else (all its controls
|
|
253
|
+
* disabled) the first tabbable element of the panel, else the panel; `panel` — the panel
|
|
254
|
+
* itself, so a long text is read from its start (APG dialog pattern). `first-tabbable` skips the
|
|
255
|
+
* library's own container controls (`bf-sheet`'s hidden Close and grabber button, marked with
|
|
256
|
+
* the internal `data-bf-overlay-chrome`): they stay in the Tab order but never take the initial
|
|
257
|
+
* focus, so it lands on your content.
|
|
258
|
+
* @default 'first-tabbable'
|
|
259
|
+
*/
|
|
260
|
+
autoFocus?: BfOverlayAutoFocus;
|
|
261
|
+
/**
|
|
262
|
+
* Returns focus to the previously focused element on close (default true); when that element
|
|
263
|
+
* is gone, to the topmost overlay still open, else focus stays on the body (move it yourself,
|
|
264
|
+
* e.g. to the next row after a delete).
|
|
265
|
+
* @default true
|
|
266
|
+
*/
|
|
267
|
+
restoreFocus?: boolean;
|
|
268
|
+
/**
|
|
269
|
+
* Placement of the panel (default `center`).
|
|
270
|
+
* @default 'center'
|
|
271
|
+
*/
|
|
272
|
+
position?: BfOverlayPosition;
|
|
273
|
+
/**
|
|
274
|
+
* Closes the overlay when the URL path changes (default true; false for passive overlays): a
|
|
275
|
+
* router navigation, a link, the browser's back and forward buttons. Query- or fragment-only
|
|
276
|
+
* changes never close; a matrix-parameter change (`/a;x=1`) is a path change and closes. Read
|
|
277
|
+
* from `Location.onUrlChange()`, so no router is needed, and a `history.pushState()` made
|
|
278
|
+
* outside Angular's `Location` is not seen. An overlay opened before the first navigation ends
|
|
279
|
+
* (root component, `APP_INITIALIZER`) closes when the start URL redirects: open it after the
|
|
280
|
+
* first `NavigationEnd`, or pass false.
|
|
281
|
+
* @default true
|
|
282
|
+
*/
|
|
283
|
+
closeOnNavigation?: boolean;
|
|
284
|
+
/**
|
|
285
|
+
* Runs instead of `close()` when a navigation closes the overlay (e.g. an alert answering with
|
|
286
|
+
* its cancel id); it should close the overlay.
|
|
287
|
+
*/
|
|
288
|
+
onNavigation?: () => void;
|
|
289
|
+
/**
|
|
290
|
+
* Priority of the hardware back handler that closes the overlay (default 100).
|
|
291
|
+
* @default 100
|
|
292
|
+
*/
|
|
293
|
+
backPriority?: number;
|
|
294
|
+
/**
|
|
295
|
+
* Counts towards `BfOverlayStack.depth()` / `--bf-modal-depth` (default false).
|
|
296
|
+
* @default false
|
|
297
|
+
*/
|
|
298
|
+
countsAsModal?: boolean;
|
|
299
|
+
/**
|
|
300
|
+
* A passive overlay (a toast) has no backdrop, no focus trap, does not move focus, does not
|
|
301
|
+
* count in `BfOverlayStack.count()`, registers no back handler and leaves the page interactive.
|
|
302
|
+
* @default false
|
|
303
|
+
*/
|
|
304
|
+
passive?: boolean;
|
|
305
|
+
/**
|
|
306
|
+
* Enter animation of the panel (default `fadeIn`); return null for none.
|
|
307
|
+
* @default fadeIn
|
|
308
|
+
*/
|
|
309
|
+
enter?: (el: HTMLElement) => Animation | null;
|
|
310
|
+
/**
|
|
311
|
+
* Exit animation of the panel (default `fadeOut`), awaited before detaching.
|
|
312
|
+
* @default fadeOut
|
|
313
|
+
*/
|
|
314
|
+
exit?: (el: HTMLElement) => Animation | null;
|
|
315
|
+
/**
|
|
316
|
+
* Parent of the content's injector (default the root injector), so the content resolves the
|
|
317
|
+
* opener's providers, e.g. a feature-level `provideBfLabels()`.
|
|
318
|
+
*/
|
|
319
|
+
injector?: Injector;
|
|
320
|
+
/**
|
|
321
|
+
* Extra providers of the content's injector, next to `BF_OVERLAY_DATA` and `BfOverlayRef`,
|
|
322
|
+
* built with the new overlay's ref (e.g. a typed ref of a service built on the core).
|
|
323
|
+
*/
|
|
324
|
+
providers?: (ref: BfOverlayRef<unknown>) => StaticProvider[];
|
|
325
|
+
}
|
|
326
|
+
/**
|
|
327
|
+
* Context of a template opened as an overlay: `let-ref` and `let-data="data"`.
|
|
328
|
+
*
|
|
329
|
+
* @summary The context a template opened as an overlay receives: its ref and data
|
|
330
|
+
* @since 0.2.0
|
|
331
|
+
*/
|
|
332
|
+
interface BfOverlayTemplateContext {
|
|
333
|
+
/** The overlay's ref (`let-ref`), to close it with a result. */
|
|
334
|
+
$implicit: BfOverlayRef<unknown>;
|
|
335
|
+
/** The `data` the overlay was opened with (`let-data="data"`). */
|
|
336
|
+
data: unknown;
|
|
337
|
+
}
|
|
338
|
+
/**
|
|
339
|
+
* Opens overlays on the Angular CDK `Overlay`: a component or template in a panel with a
|
|
340
|
+
* backdrop, a focus trap, `role`/`aria-modal`/`aria-labelledby`, `Escape` and backdrop click
|
|
341
|
+
* closing it, and the page behind it `inert` (see `BfOverlayStack`). A non-passive overlay blocks
|
|
342
|
+
* document scroll (CDK `block()` scroll strategy); passive overlays, and every overlay under a
|
|
343
|
+
* `BF_OVERLAY_HOST` whose document never scrolls (the `/mobile` `provideBfShell()`), use `noop()`.
|
|
344
|
+
* Under `provideBfShell()` the hardware back button (priority 100) closes it too; without a host
|
|
345
|
+
* no back handler is registered. Where the browser has `CloseWatcher` (Chromium 120+), a close
|
|
346
|
+
* request (Android back in Chrome or a PWA) runs the `Escape` path on the top non-passive overlay,
|
|
347
|
+
* unless the host handles the system back itself (`handlesSystemBack`). An overlay that does not
|
|
348
|
+
* close on it (`dismissOnEscape: false` without `onEscape`, or an `onEscape` that keeps it open)
|
|
349
|
+
* swallows Android web back for as long as it is open, as a non-dismissible sheet swallows the
|
|
350
|
+
* hardware back button. A navigation to another URL path closes every non-passive
|
|
351
|
+
* overlay (`closeOnNavigation`, read from `Location`, so no router is needed). The content
|
|
352
|
+
* injects `BF_OVERLAY_DATA` and `BfOverlayRef` (plus any `providers`). `BfDialogService` and the
|
|
353
|
+
* `/mobile` sheet, modal, toast, action sheet and alert services build on it.
|
|
354
|
+
*
|
|
355
|
+
* @example
|
|
356
|
+
* const ref = inject(BfOverlayService).open(ConfirmComponent, {
|
|
357
|
+
* data: { name },
|
|
358
|
+
* ariaLabelledBy: 'confirm-title',
|
|
359
|
+
* });
|
|
360
|
+
* const confirmed = await ref.afterClosed;
|
|
361
|
+
*
|
|
362
|
+
* @summary Opens a component or template in an overlay panel on the Angular CDK
|
|
363
|
+
* @since 0.2.0
|
|
364
|
+
*/
|
|
365
|
+
export declare class BfOverlayService {
|
|
366
|
+
private readonly overlay;
|
|
367
|
+
private readonly injector;
|
|
368
|
+
private readonly document;
|
|
369
|
+
private readonly stack;
|
|
370
|
+
private readonly focusTrapFactory;
|
|
371
|
+
private readonly location;
|
|
372
|
+
/** Panels of the open non-passive overlays, oldest first (focus fallback on close). */
|
|
373
|
+
private readonly openPanels;
|
|
374
|
+
private readonly host;
|
|
375
|
+
/** Under `provideBfShell()` the document never scrolls (the stack pages do). */
|
|
376
|
+
private readonly documentScrolls;
|
|
377
|
+
/**
|
|
378
|
+
* Opens `component` in an overlay.
|
|
379
|
+
* @param component The component to render in the panel.
|
|
380
|
+
* @param options The overlay's data, backdrop, focus, dismissal, position and motion.
|
|
381
|
+
*/
|
|
382
|
+
open<C, T = unknown>(component: Type<C>, options?: BfOverlayOptions): BfComponentOverlayRef<C, T>;
|
|
383
|
+
/**
|
|
384
|
+
* Opens `template` in an overlay; its context is `{ $implicit: ref, data }`.
|
|
385
|
+
* @param template The template to render in the panel.
|
|
386
|
+
* @param options The overlay's data, backdrop, focus, dismissal, position and motion.
|
|
387
|
+
*/
|
|
388
|
+
open<T = unknown>(template: TemplateRef<unknown>, options?: BfOverlayOptions): BfOverlayRef<T>;
|
|
389
|
+
/** Fades the backdrop out alongside the panel's exit (instantly under reduced motion). */
|
|
390
|
+
private fadeOutBackdrop;
|
|
391
|
+
/** Removes an `aria-labelledby` whose id names no element inside the rendered panel. */
|
|
392
|
+
private dropDanglingLabel;
|
|
393
|
+
private decoratePanel;
|
|
394
|
+
private positionStrategy;
|
|
395
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<BfOverlayService, never>;
|
|
396
|
+
static ɵprov: i0.ɵɵInjectableDeclaration<any>;
|
|
397
|
+
}
|
|
398
|
+
/**
|
|
399
|
+
* What a host shell (the `/mobile` `provideBfShell()`) tells the overlay core. The core itself
|
|
400
|
+
* depends on no platform code: without a host, overlays register no hardware back handler and
|
|
401
|
+
* lock document scroll behind a modal overlay, and where the browser has `CloseWatcher`, its close
|
|
402
|
+
* requests (Android back in Chrome) close the top overlay.
|
|
403
|
+
*
|
|
404
|
+
* @summary What a host shell tells the overlay core: back handling and document scroll
|
|
405
|
+
* @since 0.3.0
|
|
406
|
+
*/
|
|
407
|
+
interface BfOverlayHost {
|
|
408
|
+
/**
|
|
409
|
+
* Registers a hardware back handler at `priority`; returns its unregister function.
|
|
410
|
+
* @param priority Higher runs first; the overlay core uses 100.
|
|
411
|
+
* @param handler Returns (or resolves) true when it handled the back press.
|
|
412
|
+
*/
|
|
413
|
+
registerBack(priority: number, handler: () => boolean | Promise<boolean>): () => void;
|
|
414
|
+
/** False when the document never scrolls (the mobile shell): overlays skip the scroll lock. */
|
|
415
|
+
readonly documentScrolls: boolean;
|
|
416
|
+
/**
|
|
417
|
+
* True when the host already delivers the system back action to `registerBack` (the mobile
|
|
418
|
+
* shell on native Android, through Capacitor's `backButton` event): overlays then create no
|
|
419
|
+
* `CloseWatcher` of their own, so one back press never closes two things.
|
|
420
|
+
*/
|
|
421
|
+
readonly handlesSystemBack?: boolean;
|
|
422
|
+
}
|
|
423
|
+
/**
|
|
424
|
+
* Optional; without it overlays register no back handler and lock document scroll.
|
|
425
|
+
*
|
|
426
|
+
* @summary Optional injection token through which a host shell plugs into the overlay core
|
|
427
|
+
* @since 0.3.0
|
|
428
|
+
*/
|
|
429
|
+
export declare const BF_OVERLAY_HOST: InjectionToken<BfOverlayHost>;
|
|
430
|
+
/**
|
|
431
|
+
* Motion constants of the overlay core. `@bitforgehq/ui/mobile` reuses them for its own motion
|
|
432
|
+
* (`DURATION_OVERLAY`, `DURATION_FAST`, `IOS_EASING`).
|
|
433
|
+
*/
|
|
434
|
+
/**
|
|
435
|
+
* Overlay enter and exit (ms).
|
|
436
|
+
*
|
|
437
|
+
* @summary The duration of every overlay enter and exit animation, in milliseconds
|
|
438
|
+
* @since 0.2.0
|
|
439
|
+
*/
|
|
440
|
+
export declare const OVERLAY_DURATION = 260;
|
|
441
|
+
/**
|
|
442
|
+
* The overlays' curve: UIKit's navigation and sheet curve.
|
|
443
|
+
*
|
|
444
|
+
* @summary The easing curve of the overlay animations, the UIKit sheet curve
|
|
445
|
+
* @since 0.2.0
|
|
446
|
+
*/
|
|
447
|
+
export declare const OVERLAY_EASING = "cubic-bezier(0.32, 0.72, 0, 1)";
|
|
448
|
+
/**
|
|
449
|
+
* The opacity fade that replaces every overlay animation under reduced motion (ms).
|
|
450
|
+
*
|
|
451
|
+
* @summary The duration of the fade that replaces overlay motion under reduced motion
|
|
452
|
+
* @since 0.3.0
|
|
453
|
+
*/
|
|
454
|
+
export declare const OVERLAY_REDUCED_DURATION = 150;
|
|
455
|
+
/**
|
|
456
|
+
* True when the user asked the system to minimise motion.
|
|
457
|
+
*
|
|
458
|
+
* @param view The window to ask, usually `document.defaultView`; none reads as false.
|
|
459
|
+
* @summary Tells whether the user asked the system to minimise motion
|
|
460
|
+
* @since 0.2.0
|
|
461
|
+
*/
|
|
462
|
+
export declare function prefersReducedMotion(view: Window | null | undefined): boolean;
|
|
463
|
+
/**
|
|
464
|
+
* `el.animate(frames, options)`, or, where the Web Animations API is missing, the end state at
|
|
465
|
+
* once: a `forwards` fill writes the last frame onto `el.style` (an exit stays hidden), any other
|
|
466
|
+
* fill leaves the element as it is (an enter ends in its natural state). The returned animation
|
|
467
|
+
* is finished either way.
|
|
468
|
+
*/
|
|
469
|
+
declare function animateOrSettle(el: HTMLElement, frames: Keyframe[], options: KeyframeAnimationOptions): Animation;
|
|
470
|
+
/**
|
|
471
|
+
* Slides `el` up into place from `distance` below it (default: its own height).
|
|
472
|
+
*
|
|
473
|
+
* @param el The element to animate, usually the overlay panel.
|
|
474
|
+
* @param distance How far below its place it starts, as a CSS length.
|
|
475
|
+
* @returns The running animation.
|
|
476
|
+
* @summary Slides an element up into place, the enter animation of a bottom sheet
|
|
477
|
+
* @since 0.2.0
|
|
478
|
+
*/
|
|
479
|
+
export declare function slideUp(el: HTMLElement, distance?: string): Animation;
|
|
480
|
+
/**
|
|
481
|
+
* Slides `el` down out of place by `distance` (default: its own height).
|
|
482
|
+
*
|
|
483
|
+
* @param el The element to animate, usually the overlay panel.
|
|
484
|
+
* @param distance How far below its place it ends, as a CSS length.
|
|
485
|
+
* @returns The running animation.
|
|
486
|
+
* @summary Slides an element down out of place, the exit animation of a bottom sheet
|
|
487
|
+
* @since 0.2.0
|
|
488
|
+
*/
|
|
489
|
+
export declare function slideDown(el: HTMLElement, distance?: string): Animation;
|
|
490
|
+
/**
|
|
491
|
+
* Fades `el` in.
|
|
492
|
+
*
|
|
493
|
+
* @param el The element to animate, usually the overlay panel.
|
|
494
|
+
* @returns The running animation.
|
|
495
|
+
* @summary Fades an element in, the default enter animation of an overlay
|
|
496
|
+
* @since 0.2.0
|
|
497
|
+
*/
|
|
498
|
+
export declare function fadeIn(el: HTMLElement): Animation;
|
|
499
|
+
/**
|
|
500
|
+
* Fades `el` out.
|
|
501
|
+
*
|
|
502
|
+
* @param el The element to animate, usually the overlay panel.
|
|
503
|
+
* @returns The running animation.
|
|
504
|
+
* @summary Fades an element out, the default exit animation of an overlay
|
|
505
|
+
* @since 0.2.0
|
|
506
|
+
*/
|
|
507
|
+
export declare function fadeOut(el: HTMLElement): Animation;
|
|
508
|
+
/**
|
|
509
|
+
* Scales `el` up from 92 % while fading it in (centred dialogs).
|
|
510
|
+
*
|
|
511
|
+
* @param el The element to animate, usually the overlay panel.
|
|
512
|
+
* @returns The running animation.
|
|
513
|
+
* @summary Scales an element up while fading it in, the enter animation of centred dialogs
|
|
514
|
+
* @since 0.2.0
|
|
515
|
+
*/
|
|
516
|
+
export declare function scaleIn(el: HTMLElement): Animation;
|
|
517
|
+
/**
|
|
518
|
+
* Fades `el` in while it rises by `distance` (default 16 px; the Material modal enter).
|
|
519
|
+
*
|
|
520
|
+
* @param el The element to animate, usually the overlay panel.
|
|
521
|
+
* @param distance How far below its place it starts, as a CSS length.
|
|
522
|
+
* @returns The running animation.
|
|
523
|
+
* @summary Fades an element in while it rises, the Material modal enter animation
|
|
524
|
+
* @since 0.2.0
|
|
525
|
+
*/
|
|
526
|
+
export declare function fadeUp(el: HTMLElement, distance?: string): Animation;
|
|
527
|
+
/**
|
|
528
|
+
* Fades `el` out while it sinks by `distance` (default 16 px; the reverse of `fadeUp`).
|
|
529
|
+
*
|
|
530
|
+
* @param el The element to animate, usually the overlay panel.
|
|
531
|
+
* @param distance How far below its place it ends, as a CSS length.
|
|
532
|
+
* @returns The running animation.
|
|
533
|
+
* @summary Fades an element out while it sinks, the reverse of the fadeUp animation
|
|
534
|
+
* @since 0.2.0
|
|
535
|
+
*/
|
|
536
|
+
export declare function fadeDown(el: HTMLElement, distance?: string): Animation;
|
|
537
|
+
/**
|
|
538
|
+
* Names an overlay panel by the first heading inside it that is not `aria-hidden` or `hidden`:
|
|
539
|
+
* gives the heading an id when it has none (`bf-overlay-title-<n>`), points the panel's
|
|
540
|
+
* `aria-labelledby` at it and drops the fallback `aria-label`. Leaves the panel as it is when
|
|
541
|
+
* there is no heading. Returns whether it found one.
|
|
542
|
+
*/
|
|
543
|
+
declare function labelPanelByHeading(panel: HTMLElement): boolean;
|
|
544
|
+
/**
|
|
545
|
+
* `labelPanelByHeading` now, and, while the content has no heading yet (content behind an `@if`
|
|
546
|
+
* or a `resource()`), again whenever the panel's DOM changes, until the first heading appears.
|
|
547
|
+
* Only that first heading names the panel; later changes are not followed. Returns a function
|
|
548
|
+
* that stops watching; call it when the overlay closes.
|
|
549
|
+
*/
|
|
550
|
+
declare function watchPanelHeading(panel: HTMLElement): () => void;
|
|
551
|
+
/**
|
|
552
|
+
* The action rendered as a real button inside a toast.
|
|
553
|
+
*
|
|
554
|
+
* @summary The action button of a toast: its label and what it runs when clicked
|
|
555
|
+
* @since 0.2.0
|
|
556
|
+
*/
|
|
557
|
+
interface BfToastAction {
|
|
558
|
+
/** Text of the action button. */
|
|
559
|
+
label: string;
|
|
560
|
+
/** Runs before the toast closes with reason `'action'`. */
|
|
561
|
+
handler?: () => void;
|
|
562
|
+
}
|
|
563
|
+
/**
|
|
564
|
+
* Why a toast ended.
|
|
565
|
+
*
|
|
566
|
+
* @summary Why a toast ended: its time ran out, its action fired or it was dismissed
|
|
567
|
+
* @since 0.2.0
|
|
568
|
+
*/
|
|
569
|
+
type BfToastDismissReason = 'timeout' | 'action' | 'dismiss';
|
|
570
|
+
/**
|
|
571
|
+
* What the toast queue does for a toast ref; internal.
|
|
572
|
+
*
|
|
573
|
+
* @summary What the toast queue does for a toast ref: dismiss the toast now
|
|
574
|
+
* @since 0.2.0
|
|
575
|
+
*/
|
|
576
|
+
interface BfToastController {
|
|
577
|
+
/** Ends the toast now: closes it if shown, or drops it from the queue if it never showed. */
|
|
578
|
+
dismiss(): void;
|
|
579
|
+
}
|
|
580
|
+
/**
|
|
581
|
+
* Handle to a toast, returned by `BfToastService.show()` (`/mobile`) and
|
|
582
|
+
* `BfDesktopToastService.show()` (`/overlay`). `dismiss()` ends it immediately — closing it right
|
|
583
|
+
* away if it is shown, or removing it from the queue before it ever shows. `afterDismissed`
|
|
584
|
+
* resolves with why it ended: `'timeout'` (its duration elapsed), `'action'` (the action button
|
|
585
|
+
* was clicked) or `'dismiss'` (`dismiss()` was called). The duration never runs out while the
|
|
586
|
+
* toast is hovered or focused, and a toast with an action has none by default, so it only ends
|
|
587
|
+
* with `'action'` or `'dismiss'` (`dismiss()`, `Escape` inside it, or the next `show()` replacing
|
|
588
|
+
* it).
|
|
589
|
+
*
|
|
590
|
+
* @example
|
|
591
|
+
* const ref = inject(BfToastService).show({ message: 'Saved' });
|
|
592
|
+
* const reason = await ref.afterDismissed;
|
|
593
|
+
* @since 0.2.0
|
|
594
|
+
* @summary Handle on a shown or queued toast that dismisses it and reports why it ended
|
|
595
|
+
*/
|
|
596
|
+
export declare class BfToastRef {
|
|
597
|
+
private readonly controller;
|
|
598
|
+
/** Resolves with why the toast ended. */
|
|
599
|
+
readonly afterDismissed: Promise<BfToastDismissReason>;
|
|
600
|
+
constructor(controller: BfToastController, afterDismissed: Promise<BfToastDismissReason>);
|
|
601
|
+
/** Ends the toast now; see the class doc. */
|
|
602
|
+
dismiss(): void;
|
|
603
|
+
}
|
|
604
|
+
/** One `show()` call; not public API. */
|
|
605
|
+
interface ɵBfToastRequest {
|
|
606
|
+
message: string;
|
|
607
|
+
action?: BfToastAction;
|
|
608
|
+
/** Default 3000 without an action, 0 (persistent) with one. */
|
|
609
|
+
duration?: number;
|
|
610
|
+
}
|
|
611
|
+
/** What a presenter renders for one toast; not public API. */
|
|
612
|
+
interface ɵBfToastView {
|
|
613
|
+
readonly message: string;
|
|
614
|
+
/** The action button, or null; `run()` calls the handler and closes with `'action'`. */
|
|
615
|
+
readonly action: {
|
|
616
|
+
label: string;
|
|
617
|
+
run: () => void;
|
|
618
|
+
} | null;
|
|
619
|
+
/** Pauses (`held: true`) or resumes this toast's timer. */
|
|
620
|
+
hold(source: 'pointer' | 'focus', held: boolean): void;
|
|
621
|
+
/** `Escape` inside the toast: dismisses it (`'dismiss'`). */
|
|
622
|
+
escape(): void;
|
|
623
|
+
}
|
|
624
|
+
/** A rendered toast; not public API. */
|
|
625
|
+
interface ɵBfToastHandle {
|
|
626
|
+
/** The toast's element (focus inside it counts as "in the toast"). */
|
|
627
|
+
readonly host: HTMLElement | null;
|
|
628
|
+
/** Plays the exit and removes the toast; resolves once it is gone. */
|
|
629
|
+
close(reason: BfToastDismissReason): Promise<void>;
|
|
630
|
+
}
|
|
631
|
+
/**
|
|
632
|
+
* Renders toasts for the queue; `request` is the `show()` argument as given (a presenter reads
|
|
633
|
+
* its own extra fields from it, e.g. the mobile `position`). Not public API.
|
|
634
|
+
*/
|
|
635
|
+
interface ɵBfToastPresenter<R extends ɵBfToastRequest = ɵBfToastRequest> {
|
|
636
|
+
present(view: ɵBfToastView, request: R): ɵBfToastHandle;
|
|
637
|
+
}
|
|
638
|
+
/** Options of `ɵBfToastQueue`; not public API. */
|
|
639
|
+
interface ɵBfToastQueueOptions {
|
|
640
|
+
/** How many toasts are shown at once (1 on mobile). */
|
|
641
|
+
maxVisible: number;
|
|
642
|
+
announcer: LiveAnnouncer;
|
|
643
|
+
document: Document;
|
|
644
|
+
/** Ends every toast (timers, listeners) when destroyed; later `show()` calls resolve `'dismiss'`. */
|
|
645
|
+
destroyRef: DestroyRef;
|
|
646
|
+
}
|
|
647
|
+
/**
|
|
648
|
+
* Queues toasts and shows up to `maxVisible` at once through a presenter. A toast
|
|
649
|
+
* auto-dismisses after `duration` ms (`'timeout'`); a persistent one (`duration` 0, the default
|
|
650
|
+
* with an action) never blocks the queue: the next `show()` dismisses it, visible or waiting
|
|
651
|
+
* (`'dismiss'`). The timer pauses while held (pointer or focus) and resumes with the rest. A
|
|
652
|
+
* toast holding focus when it closes hands focus back to the element focused last outside it.
|
|
653
|
+
* Each toast is announced once, politely, as it shows. Not public API.
|
|
654
|
+
*/
|
|
655
|
+
export declare class ɵBfToastQueue<R extends ɵBfToastRequest = ɵBfToastRequest> {
|
|
656
|
+
private readonly presenter;
|
|
657
|
+
private readonly options;
|
|
658
|
+
private readonly waiting;
|
|
659
|
+
/** Shown toasts, oldest first, until their exit has finished (they hold their slot). */
|
|
660
|
+
private readonly shown;
|
|
661
|
+
private destroyed;
|
|
662
|
+
constructor(presenter: ɵBfToastPresenter<R>, options: ɵBfToastQueueOptions);
|
|
663
|
+
/**
|
|
664
|
+
* Queues `request`; shows it now while fewer than `maxVisible` are shown, else once one ends.
|
|
665
|
+
* Every persistent toast, shown or waiting, is dismissed first.
|
|
666
|
+
*/
|
|
667
|
+
show(request: R): BfToastRef;
|
|
668
|
+
private dismissEntry;
|
|
669
|
+
private pump;
|
|
670
|
+
private present;
|
|
671
|
+
/** The focused element, or null when focus is on the body (nothing to return to). */
|
|
672
|
+
private focusedElement;
|
|
673
|
+
}
|
|
674
|
+
/**
|
|
675
|
+
* Layout of a modal dialog opened with `BfDialogService`: a title row, a scrolling body and a
|
|
676
|
+
* footer of actions. The panel is labelled by the title, and the body becomes focusable only
|
|
677
|
+
* while its content overflows, so keyboard users can scroll it (a region named by the title when
|
|
678
|
+
* there is one).
|
|
679
|
+
*
|
|
680
|
+
* @example
|
|
681
|
+
* const ref = inject(BfDialogService).open(RenameDialogComponent, { data: { name } });
|
|
682
|
+
* // RenameDialogComponent template:
|
|
683
|
+
* // <bf-dialog title="Rename project"> …fields…
|
|
684
|
+
* // <div bfSlot="footer">…buttons…</div> </bf-dialog>
|
|
685
|
+
* @summary Desktop modal dialog with a title, scrolling body, footer actions and focus trap
|
|
686
|
+
* @category Overlays
|
|
687
|
+
* @since 0.3.0
|
|
688
|
+
* @slot header More header content after the title, such as a status badge.
|
|
689
|
+
* @slot default The dialog body.
|
|
690
|
+
* @slot footer The actions, aligned at the end.
|
|
691
|
+
*/
|
|
692
|
+
export declare class BfDialogComponent {
|
|
693
|
+
private readonly labels;
|
|
694
|
+
private readonly context;
|
|
695
|
+
private readonly ref;
|
|
696
|
+
/** Heading of the dialog, rendered as the `h2` the dialog panel is labelled by. */
|
|
697
|
+
readonly title: import("@angular/core").InputSignal<string>;
|
|
698
|
+
/** Shows a close button (×) at the top end that closes the dialog with no result. */
|
|
699
|
+
readonly closeButton: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
|
|
700
|
+
/** Accessible name of the close button; empty uses `provideBfLabels()`'s `close` ("Close"). */
|
|
701
|
+
readonly closeLabel: import("@angular/core").InputSignal<string>;
|
|
702
|
+
/** True while the body's content is taller than the body (it scrolls). */
|
|
703
|
+
protected readonly overflowing: import("@angular/core").WritableSignal<boolean>;
|
|
704
|
+
protected readonly titleId: string;
|
|
705
|
+
protected readonly closeIcon: import("lucide").IconNode;
|
|
706
|
+
private readonly size;
|
|
707
|
+
protected readonly hostClasses: import("@angular/core").Signal<string>;
|
|
708
|
+
protected readonly headerClasses: import("@angular/core").Signal<string>;
|
|
709
|
+
protected readonly closeName: import("@angular/core").Signal<string>;
|
|
710
|
+
private readonly body;
|
|
711
|
+
private readonly content;
|
|
712
|
+
constructor();
|
|
713
|
+
/** Closes the dialog with no result (does nothing outside `BfDialogService`). */
|
|
714
|
+
protected close(): void;
|
|
715
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<BfDialogComponent, never>;
|
|
716
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<BfDialogComponent, "bf-dialog", never, {
|
|
717
|
+
"title": {
|
|
718
|
+
"alias": "title";
|
|
719
|
+
"required": false;
|
|
720
|
+
"isSignal": true;
|
|
721
|
+
};
|
|
722
|
+
"closeButton": {
|
|
723
|
+
"alias": "closeButton";
|
|
724
|
+
"required": false;
|
|
725
|
+
"isSignal": true;
|
|
726
|
+
};
|
|
727
|
+
"closeLabel": {
|
|
728
|
+
"alias": "closeLabel";
|
|
729
|
+
"required": false;
|
|
730
|
+
"isSignal": true;
|
|
731
|
+
};
|
|
732
|
+
}, {}, never, ["[bfSlot=header]", "*", "[bfSlot=footer]"], true, never>;
|
|
733
|
+
}
|
|
734
|
+
/**
|
|
735
|
+
* The dialog's own width scale (not `BfSize`, which is a control-height scale): `sm` 24 rem,
|
|
736
|
+
* `md` 32 rem, `lg` 48 rem, `xl` 64 rem — each never wider than the viewport minus a gutter on
|
|
737
|
+
* both sides — and `fullscreen`, edge to edge.
|
|
738
|
+
*
|
|
739
|
+
* @summary The dialog width scale from a 24 rem confirm to an edge-to-edge fullscreen dialog
|
|
740
|
+
* @since 0.3.0
|
|
741
|
+
*/
|
|
742
|
+
type BfDialogSize = 'sm' | 'md' | 'lg' | 'xl' | 'fullscreen';
|
|
743
|
+
/**
|
|
744
|
+
* The `data` passed to `BfDialogService.open()`, injectable in the dialog's content.
|
|
745
|
+
*
|
|
746
|
+
* @summary Injection token carrying the data a dialog was opened with, for its content
|
|
747
|
+
* @since 0.3.0
|
|
748
|
+
*/
|
|
749
|
+
export declare const BF_DIALOG_DATA: InjectionToken<unknown>;
|
|
750
|
+
/** @internal What `BfDialogService` tells the `bf-dialog` inside its content. */
|
|
751
|
+
interface BfDialogContext {
|
|
752
|
+
/** Id the `bf-dialog` title renders with; the panel's `aria-labelledby` points to it. */
|
|
753
|
+
readonly titleId: string;
|
|
754
|
+
readonly size: BfDialogSize;
|
|
755
|
+
}
|
|
756
|
+
/** @internal Provided by `BfDialogService` to the dialog's content. */
|
|
757
|
+
declare const BF_DIALOG_CONTEXT: InjectionToken<BfDialogContext>;
|
|
758
|
+
/**
|
|
759
|
+
* Handle to an open dialog, returned by `BfDialogService.open()` and injectable in the dialog's
|
|
760
|
+
* content (`inject(BfDialogRef)`). `close(result)` plays the exit animation, detaches the dialog
|
|
761
|
+
* and resolves `afterClosed` with `result`; later calls are ignored. Closing with `Escape`, the
|
|
762
|
+
* backdrop or the `bf-dialog` close button resolves `undefined`.
|
|
763
|
+
*
|
|
764
|
+
* @example
|
|
765
|
+
* const ref = inject(BfDialogService).open<RenameDialogComponent, { name: string }, string>(
|
|
766
|
+
* RenameDialogComponent,
|
|
767
|
+
* { data: { name } },
|
|
768
|
+
* );
|
|
769
|
+
* const newName = await ref.afterClosed;
|
|
770
|
+
*
|
|
771
|
+
* @summary Handle on an open dialog that closes it and resolves with its result
|
|
772
|
+
* @since 0.3.0
|
|
773
|
+
*/
|
|
774
|
+
export declare class BfDialogRef<R = unknown, C = unknown> {
|
|
775
|
+
private readonly overlayRef;
|
|
776
|
+
private readonly instance;
|
|
777
|
+
/** Unique id of the dialog (its overlay's `bf-overlay-N`). */
|
|
778
|
+
readonly id: string;
|
|
779
|
+
/** Resolves with the result given to `close()`, or `undefined`, once the dialog is detached. */
|
|
780
|
+
readonly afterClosed: Promise<R | undefined>;
|
|
781
|
+
/** True once the dialog has been detached. */
|
|
782
|
+
readonly closed: Signal<boolean>;
|
|
783
|
+
/** @internal Created by `BfDialogService`; apps never construct it. */
|
|
784
|
+
constructor(overlayRef: BfOverlayRef<unknown>, instance?: () => C | null);
|
|
785
|
+
/** The content component; `null` for a dialog opened from a template. */
|
|
786
|
+
get componentInstance(): C | null;
|
|
787
|
+
/**
|
|
788
|
+
* Closes the dialog with an optional result; ignored once closing.
|
|
789
|
+
* @param result The value `afterClosed` resolves with.
|
|
790
|
+
*/
|
|
791
|
+
close(result?: R): void;
|
|
792
|
+
}
|
|
793
|
+
/**
|
|
794
|
+
* Context of a template opened with `BfDialogService.open()`: `let-ref` and `let-data="data"`.
|
|
795
|
+
*
|
|
796
|
+
* @summary The context a template opened as a dialog receives: its ref and its data
|
|
797
|
+
* @since 0.3.0
|
|
798
|
+
*/
|
|
799
|
+
interface BfDialogTemplateContext<D = unknown, R = unknown> {
|
|
800
|
+
/** The dialog's ref (`let-ref`), to close it with a result. */
|
|
801
|
+
$implicit: BfDialogRef<R>;
|
|
802
|
+
/** The `data` the dialog was opened with (`let-data="data"`). */
|
|
803
|
+
data: D;
|
|
804
|
+
}
|
|
805
|
+
/**
|
|
806
|
+
* Options of `BfDialogService.open()`.
|
|
807
|
+
*
|
|
808
|
+
* @summary Options of a dialog: its data, width, role, dismissal, focus and injector
|
|
809
|
+
* @since 0.3.0
|
|
810
|
+
*/
|
|
811
|
+
interface BfDialogConfig<D = unknown> {
|
|
812
|
+
/** Injected into the content as `BF_DIALOG_DATA` (and a template's `data`). */
|
|
813
|
+
data?: D;
|
|
814
|
+
/**
|
|
815
|
+
* Width of the `bf-dialog` in the content (default `md`, 32 rem).
|
|
816
|
+
* @default 'md'
|
|
817
|
+
*/
|
|
818
|
+
size?: BfDialogSize;
|
|
819
|
+
/**
|
|
820
|
+
* `alertdialog` for a dialog that demands an answer (default `dialog`).
|
|
821
|
+
* @default 'dialog'
|
|
822
|
+
*/
|
|
823
|
+
role?: BfDialogRole;
|
|
824
|
+
/** Accessible name, when the content renders no `bf-dialog` title and no heading. */
|
|
825
|
+
ariaLabel?: string;
|
|
826
|
+
/** Id of the element describing the dialog (e.g. its message). */
|
|
827
|
+
ariaDescribedBy?: string;
|
|
828
|
+
/** A backdrop click closes the dialog (default true for `dialog`, false for `alertdialog`). */
|
|
829
|
+
dismissOnBackdrop?: boolean;
|
|
830
|
+
/**
|
|
831
|
+
* `Escape` closes the dialog (default true); when false the key is claimed and ignored.
|
|
832
|
+
* @default true
|
|
833
|
+
*/
|
|
834
|
+
dismissOnEscape?: boolean;
|
|
835
|
+
/**
|
|
836
|
+
* Initial focus (default `first-tabbable`: an `[autofocus]`/`[cdkFocusInitial]` element, else
|
|
837
|
+
* the first tabbable element); `panel` focuses the dialog itself, for long text.
|
|
838
|
+
* @default 'first-tabbable'
|
|
839
|
+
*/
|
|
840
|
+
autoFocus?: BfOverlayAutoFocus;
|
|
841
|
+
/**
|
|
842
|
+
* Returns focus to the element that had it before opening (default true).
|
|
843
|
+
* @default true
|
|
844
|
+
*/
|
|
845
|
+
restoreFocus?: boolean;
|
|
846
|
+
/**
|
|
847
|
+
* A navigation to another URL path closes the dialog with no result (default true).
|
|
848
|
+
* @default true
|
|
849
|
+
*/
|
|
850
|
+
closeOnNavigation?: boolean;
|
|
851
|
+
/** Extra classes on the overlay panel (it always carries `bf-overlay-panel bf-dialog-panel`). */
|
|
852
|
+
panelClass?: string[];
|
|
853
|
+
/**
|
|
854
|
+
* Parent of the content's injector and source of its labels (default the root injector). Pass
|
|
855
|
+
* the opener's `inject(Injector)` so a feature-level `provideBfLabels()` reaches the dialog.
|
|
856
|
+
*/
|
|
857
|
+
injector?: Injector;
|
|
858
|
+
}
|
|
859
|
+
/**
|
|
860
|
+
* A button of `BfDialogService.confirm()`.
|
|
861
|
+
*
|
|
862
|
+
* @summary One button of a confirm dialog: its answer, its label and its role
|
|
863
|
+
* @since 0.3.0
|
|
864
|
+
*/
|
|
865
|
+
interface BfConfirmButton {
|
|
866
|
+
/** The value `confirm()` resolves with (default the `label`). */
|
|
867
|
+
id?: string;
|
|
868
|
+
/** Button text. */
|
|
869
|
+
label: string;
|
|
870
|
+
/** `cancel` answers `Escape` and gets initial focus; `destructive` renders `danger`. */
|
|
871
|
+
role?: BfConfirmButtonRole;
|
|
872
|
+
}
|
|
873
|
+
/**
|
|
874
|
+
* The ARIA role of a dialog: `dialog`, or `alertdialog` for one that demands an answer.
|
|
875
|
+
*
|
|
876
|
+
* @summary The role a dialog carries, plain or an alert dialog that demands an answer
|
|
877
|
+
* @since 0.3.0
|
|
878
|
+
*/
|
|
879
|
+
type BfDialogRole = 'dialog' | 'alertdialog';
|
|
880
|
+
/**
|
|
881
|
+
* The role of a confirm dialog button: `cancel` answers `Escape`, `destructive` renders `danger`.
|
|
882
|
+
*
|
|
883
|
+
* @summary The role of a confirm dialog button, the cancel answer or a destructive action
|
|
884
|
+
* @since 0.3.0
|
|
885
|
+
*/
|
|
886
|
+
type BfConfirmButtonRole = 'cancel' | 'destructive';
|
|
887
|
+
/**
|
|
888
|
+
* The width of a confirm dialog: `sm` (24 rem) or `md`.
|
|
889
|
+
*
|
|
890
|
+
* @summary The two widths a confirm dialog comes in, small or medium
|
|
891
|
+
* @since 0.3.0
|
|
892
|
+
*/
|
|
893
|
+
type BfConfirmSize = 'sm' | 'md';
|
|
894
|
+
/**
|
|
895
|
+
* Options of `BfDialogService.confirm()`.
|
|
896
|
+
*
|
|
897
|
+
* @summary Options of a confirm dialog: its title, message, buttons and width
|
|
898
|
+
* @since 0.3.0
|
|
899
|
+
*/
|
|
900
|
+
interface BfConfirmOptions {
|
|
901
|
+
/** Heading, rendered as the `h2` the alert dialog is labelled by. */
|
|
902
|
+
title: string;
|
|
903
|
+
/** Text under the title; the dialog's `aria-describedby` points to it. */
|
|
904
|
+
message?: string;
|
|
905
|
+
/**
|
|
906
|
+
* Buttons, in order, right-aligned (default Cancel and OK from `provideBfLabels()`, ids
|
|
907
|
+
* `cancel` and `ok`).
|
|
908
|
+
*/
|
|
909
|
+
buttons?: readonly BfConfirmButton[];
|
|
910
|
+
/**
|
|
911
|
+
* Width (default `sm`, 24 rem).
|
|
912
|
+
* @default 'sm'
|
|
913
|
+
*/
|
|
914
|
+
size?: BfConfirmSize;
|
|
915
|
+
/**
|
|
916
|
+
* A navigation to another URL path closes the dialog, resolving the cancel button's answer, or
|
|
917
|
+
* `undefined` without one (default true).
|
|
918
|
+
* @default true
|
|
919
|
+
*/
|
|
920
|
+
closeOnNavigation?: boolean;
|
|
921
|
+
/** Source of the default button labels and parent of the content's injector. */
|
|
922
|
+
injector?: Injector;
|
|
923
|
+
}
|
|
924
|
+
/**
|
|
925
|
+
* Opens modal dialogs on the overlay core, centred over a backdrop: a component or a template in
|
|
926
|
+
* a pane labelled by its `bf-dialog` title, with focus moved in and trapped, `Escape` and a
|
|
927
|
+
* backdrop click closing it (never the backdrop for an `alertdialog`), focus returned to the
|
|
928
|
+
* opener, document scroll locked and the page behind it `inert`. `confirm()` opens an alert
|
|
929
|
+
* dialog with a title, a message and a row of buttons and resolves with the pressed button's
|
|
930
|
+
* `id ?? label`.
|
|
931
|
+
*
|
|
932
|
+
* @example
|
|
933
|
+
* const ref = inject(BfDialogService).open(RenameDialogComponent, { data: { name } });
|
|
934
|
+
* const answer = await inject(BfDialogService).confirm({
|
|
935
|
+
* title: 'Delete project?',
|
|
936
|
+
* message: 'This cannot be undone.',
|
|
937
|
+
* buttons: [
|
|
938
|
+
* { id: 'cancel', label: 'Cancel', role: 'cancel' },
|
|
939
|
+
* { id: 'delete', label: 'Delete', role: 'destructive' },
|
|
940
|
+
* ],
|
|
941
|
+
* });
|
|
942
|
+
* @since 0.3.0
|
|
943
|
+
* @summary Opens modal dialogs and confirm prompts, centred over the page with focus trapped
|
|
944
|
+
*/
|
|
945
|
+
export declare class BfDialogService {
|
|
946
|
+
private readonly overlays;
|
|
947
|
+
private readonly injector;
|
|
948
|
+
/**
|
|
949
|
+
* Opens `component` as a dialog; it injects `BfDialogRef` and `BF_DIALOG_DATA`.
|
|
950
|
+
* @param component The component to render; it injects `BfDialogRef` and `BF_DIALOG_DATA`.
|
|
951
|
+
* @param config The dialog's data, width, role, dismissal, focus and injector.
|
|
952
|
+
*/
|
|
953
|
+
open<C, D = unknown, R = unknown>(component: Type<C>, config?: BfDialogConfig<D>): BfDialogRef<R, C>;
|
|
954
|
+
/**
|
|
955
|
+
* Opens `template` as a dialog; its context is `{ $implicit: ref, data }`.
|
|
956
|
+
* @param template The template to render, with the context `{ $implicit: ref, data }`.
|
|
957
|
+
* @param config The dialog's data, width, role, dismissal, focus and injector.
|
|
958
|
+
*/
|
|
959
|
+
open<D = unknown, R = unknown>(template: TemplateRef<BfDialogTemplateContext<D, R>>, config?: BfDialogConfig<D>): BfDialogRef<R>;
|
|
960
|
+
/**
|
|
961
|
+
* Opens an alert dialog (`role="alertdialog"`, described by `message`, no backdrop dismiss)
|
|
962
|
+
* and resolves with the pressed button's `id ?? label`. Focus starts on the `cancel`-role
|
|
963
|
+
* button, else the first button; `Escape` resolves the cancel button's answer, or is ignored
|
|
964
|
+
* when there is none. A navigation to another path resolves the cancel button's answer, else
|
|
965
|
+
* `undefined`.
|
|
966
|
+
* @param options The title, message, buttons and width of the alert dialog.
|
|
967
|
+
* @returns The pressed button's `id ?? label`, or `undefined`.
|
|
968
|
+
*/
|
|
969
|
+
confirm(options: BfConfirmOptions): Promise<string | undefined>;
|
|
970
|
+
private openDialog;
|
|
971
|
+
/**
|
|
972
|
+
* A dialog without an `ariaLabel` whose content rendered no `bf-dialog` title (the core then
|
|
973
|
+
* drops the dangling `aria-labelledby`) is named by the first heading in its content, also one
|
|
974
|
+
* that renders later, and by the `dialog` label until then.
|
|
975
|
+
*/
|
|
976
|
+
private nameUnlabelledPanel;
|
|
977
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<BfDialogService, never>;
|
|
978
|
+
static ɵprov: i0.ɵɵInjectableDeclaration<any>;
|
|
979
|
+
}
|
|
980
|
+
/**
|
|
981
|
+
* The card `BfDesktopToastService.show()` renders in its notification stack: the message and an
|
|
982
|
+
* optional action button on a surface card. It is not a live region (the service announces each
|
|
983
|
+
* toast once through CDK `LiveAnnouncer`) and has no close button; `Escape` with focus inside it
|
|
984
|
+
* emits `escaped`, which dismisses the toast. Apps do not place it in templates.
|
|
985
|
+
*
|
|
986
|
+
* @example
|
|
987
|
+
* const ref = inject(BfDesktopToastService).show({ message: 'Changes saved' });
|
|
988
|
+
* @summary Desktop notification card in a bottom corner stack of up to three
|
|
989
|
+
* @category Overlays
|
|
990
|
+
* @since 0.3.0
|
|
991
|
+
*/
|
|
992
|
+
export declare class BfDesktopToastComponent {
|
|
993
|
+
/** Text of the toast; long words wrap. */
|
|
994
|
+
readonly message: import("@angular/core").InputSignal<string>;
|
|
995
|
+
/** Text of the action button; empty renders no button. */
|
|
996
|
+
readonly actionLabel: import("@angular/core").InputSignal<string>;
|
|
997
|
+
/** The action button was clicked. */
|
|
998
|
+
readonly actionClicked: import("@angular/core").OutputEmitterRef<void>;
|
|
999
|
+
/** `Escape` was pressed with focus inside the toast (the key is claimed). */
|
|
1000
|
+
readonly escaped: import("@angular/core").OutputEmitterRef<void>;
|
|
1001
|
+
/** `Escape` inside the card is the toast's: claimed so no dialog underneath also closes. */
|
|
1002
|
+
protected keydown(event: Event): void;
|
|
1003
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<BfDesktopToastComponent, never>;
|
|
1004
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<BfDesktopToastComponent, "bf-desktop-toast", never, {
|
|
1005
|
+
"message": {
|
|
1006
|
+
"alias": "message";
|
|
1007
|
+
"required": true;
|
|
1008
|
+
"isSignal": true;
|
|
1009
|
+
};
|
|
1010
|
+
"actionLabel": {
|
|
1011
|
+
"alias": "actionLabel";
|
|
1012
|
+
"required": false;
|
|
1013
|
+
"isSignal": true;
|
|
1014
|
+
};
|
|
1015
|
+
}, {
|
|
1016
|
+
"actionClicked": "actionClicked";
|
|
1017
|
+
"escaped": "escaped";
|
|
1018
|
+
}, never, never, true, never>;
|
|
1019
|
+
}
|
|
1020
|
+
/**
|
|
1021
|
+
* The viewport corner or edge the desktop toast stack anchors to.
|
|
1022
|
+
*
|
|
1023
|
+
* @summary The viewport corners and edges a desktop toast stack can anchor to
|
|
1024
|
+
* @since 0.3.0
|
|
1025
|
+
*/
|
|
1026
|
+
type BfDesktopToastPosition = 'bottom-end' | 'bottom-center' | 'top-end' | 'top-center';
|
|
1027
|
+
/**
|
|
1028
|
+
* App-wide settings of `BfDesktopToastService`; set them with `provideBfDesktopToast()`.
|
|
1029
|
+
*
|
|
1030
|
+
* @summary App-wide settings of desktop toasts: where they sit and how many show at once
|
|
1031
|
+
* @since 0.3.0
|
|
1032
|
+
*/
|
|
1033
|
+
interface BfDesktopToastConfig {
|
|
1034
|
+
/**
|
|
1035
|
+
* Where the stack sits (default `'bottom-end'`: bottom right, bottom left in RTL).
|
|
1036
|
+
* @default 'bottom-end'
|
|
1037
|
+
*/
|
|
1038
|
+
position: BfDesktopToastPosition;
|
|
1039
|
+
/**
|
|
1040
|
+
* How many toasts are visible at once (default 3); later ones wait.
|
|
1041
|
+
* @default 3
|
|
1042
|
+
*/
|
|
1043
|
+
maxVisible: number;
|
|
1044
|
+
/**
|
|
1045
|
+
* Name of the stack's region landmark; empty uses the `notifications` label ("Notifications").
|
|
1046
|
+
* @default ''
|
|
1047
|
+
*/
|
|
1048
|
+
ariaLabel: string;
|
|
1049
|
+
}
|
|
1050
|
+
/**
|
|
1051
|
+
* The library defaults of `BfDesktopToastConfig`.
|
|
1052
|
+
*
|
|
1053
|
+
* @summary The library defaults of the desktop toast settings, bottom end with three visible
|
|
1054
|
+
* @since 0.3.0
|
|
1055
|
+
*/
|
|
1056
|
+
export declare const BF_DESKTOP_TOAST_DEFAULTS: Readonly<BfDesktopToastConfig>;
|
|
1057
|
+
/**
|
|
1058
|
+
* Sets where the desktop toast stack sits, how many toasts it shows at once and its region name,
|
|
1059
|
+
* merged over the defaults. Add it to `ApplicationConfig.providers`.
|
|
1060
|
+
*
|
|
1061
|
+
* @param config The settings to change; any left out keep `BF_DESKTOP_TOAST_DEFAULTS`.
|
|
1062
|
+
* @returns The providers of the desktop toast settings.
|
|
1063
|
+
* @summary Sets where desktop toasts appear and how many show at once, app-wide
|
|
1064
|
+
* @since 0.3.0
|
|
1065
|
+
*/
|
|
1066
|
+
export declare function provideBfDesktopToast(config?: Partial<BfDesktopToastConfig>): EnvironmentProviders;
|
|
1067
|
+
/**
|
|
1068
|
+
* Options of `BfDesktopToastService.show()`.
|
|
1069
|
+
*
|
|
1070
|
+
* @summary Options of one desktop toast: its message, an action and its duration
|
|
1071
|
+
* @since 0.3.0
|
|
1072
|
+
*/
|
|
1073
|
+
interface BfDesktopToastOptions {
|
|
1074
|
+
/** Text of the toast. */
|
|
1075
|
+
message: string;
|
|
1076
|
+
/** An optional action button (the toast then persists by default). */
|
|
1077
|
+
action?: BfToastAction;
|
|
1078
|
+
/**
|
|
1079
|
+
* Milliseconds before the toast auto-dismisses, not counting time the pointer is over the
|
|
1080
|
+
* stack or focus is inside it; `0` keeps it until dismissed or its action fires (default 3000
|
|
1081
|
+
* without an action, `0` with one).
|
|
1082
|
+
* @default 3000
|
|
1083
|
+
*/
|
|
1084
|
+
duration?: number;
|
|
1085
|
+
/**
|
|
1086
|
+
* Source of the region's labels when this toast opens the stack (default the root injector):
|
|
1087
|
+
* pass the feature's `inject(Injector)` so its `provideBfLabels()` names the region.
|
|
1088
|
+
*/
|
|
1089
|
+
injector?: Injector;
|
|
1090
|
+
}
|
|
1091
|
+
/**
|
|
1092
|
+
* Shows desktop notifications: `show(options)` adds a `bf-desktop-toast` card to one passive
|
|
1093
|
+
* overlay stack (bottom right by default, 24 px in, a `region` landmark named "Notifications")
|
|
1094
|
+
* and returns a `BfToastRef`. Up to three are visible at once, the newest nearest the anchored
|
|
1095
|
+
* edge; later calls wait and show as earlier ones end. A toast auto-dismisses after `duration` ms
|
|
1096
|
+
* (default 3000, `'timeout'`); one with an action persists by default until its action
|
|
1097
|
+
* (`'action'`), `Escape` inside it or `dismiss()` (`'dismiss'`), and the next `show()` replaces it
|
|
1098
|
+
* (`'dismiss'`), visible or waiting. The pointer over the stack or focus inside it pauses every
|
|
1099
|
+
* visible toast, which resume with their remaining time. Each toast is announced once, politely,
|
|
1100
|
+
* through CDK `LiveAnnouncer`; focus never moves on show, and returns to the element focused
|
|
1101
|
+
* last outside a toast that closes while holding it. `F6` from the page moves focus to the
|
|
1102
|
+
* action of the newest toast that has one, and `F6` inside the stack moves it back (otherwise
|
|
1103
|
+
* the key is left to the browser); it does nothing while a modal overlay is open
|
|
1104
|
+
* (`BfOverlayStack.count() > 0`), since that overlay's focus trap must not be escaped. No
|
|
1105
|
+
* backdrop, no scroll lock, nothing inert, and a navigation never closes it (a "Saved" survives
|
|
1106
|
+
* the navigation after the save). Needs `@angular/cdk`, no Capacitor.
|
|
1107
|
+
*
|
|
1108
|
+
* @example
|
|
1109
|
+
* const ref = inject(BfDesktopToastService).show({
|
|
1110
|
+
* message: 'Invoice deleted',
|
|
1111
|
+
* action: { label: 'Undo', handler: () => restore(invoice) },
|
|
1112
|
+
* });
|
|
1113
|
+
* const reason = await ref.afterDismissed;
|
|
1114
|
+
* @since 0.3.0
|
|
1115
|
+
* @summary Shows brief desktop notifications in a stack at a corner of the viewport
|
|
1116
|
+
*/
|
|
1117
|
+
export declare class BfDesktopToastService {
|
|
1118
|
+
private readonly overlay;
|
|
1119
|
+
private readonly injector;
|
|
1120
|
+
private readonly document;
|
|
1121
|
+
private readonly config;
|
|
1122
|
+
private readonly directionality;
|
|
1123
|
+
private readonly overlayStack;
|
|
1124
|
+
/** Where the last `F6` into the stack came from; the next `F6` inside it goes back there. */
|
|
1125
|
+
private f6ReturnTo;
|
|
1126
|
+
private readonly onKeydown;
|
|
1127
|
+
/** Shown toasts, oldest first (a leaving one stays until its exit has played). */
|
|
1128
|
+
private items;
|
|
1129
|
+
/** What holds the stack now; applied to every toast, also one that shows while held. */
|
|
1130
|
+
private readonly holds;
|
|
1131
|
+
private pane;
|
|
1132
|
+
/** Re-applies the position strategy on a `dir` change while the pane lives (N2). */
|
|
1133
|
+
private dirSubscription;
|
|
1134
|
+
private nextId;
|
|
1135
|
+
private readonly queue;
|
|
1136
|
+
constructor();
|
|
1137
|
+
/**
|
|
1138
|
+
* Queues `options` as a toast; shows it now while fewer than `maxVisible` are visible, else once
|
|
1139
|
+
* one ends. Every persistent toast (`duration` 0, the default with an action), visible or
|
|
1140
|
+
* waiting, is dismissed first (`'dismiss'`).
|
|
1141
|
+
* @param options The toast's message, action, duration and injector.
|
|
1142
|
+
* @returns The toast's ref, to dismiss it or await why it ended.
|
|
1143
|
+
*/
|
|
1144
|
+
show(options: BfDesktopToastOptions): BfToastRef;
|
|
1145
|
+
private present;
|
|
1146
|
+
private remove;
|
|
1147
|
+
private render;
|
|
1148
|
+
private setHold;
|
|
1149
|
+
private ensurePane;
|
|
1150
|
+
private disposePane;
|
|
1151
|
+
/**
|
|
1152
|
+
* `F6` (no Ctrl, Alt or Meta) from the page moves focus to the action of the newest toast that
|
|
1153
|
+
* has one; `F6` inside the stack moves it back to where it came from. Never moves focus out of
|
|
1154
|
+
* an open modal overlay (`BfOverlayStack.count() > 0`): that overlay's focus trap is APG-modal
|
|
1155
|
+
* (focus never leaves it), so a toast surfacing behind it stays reachable only by pointer while
|
|
1156
|
+
* it is open. Otherwise the key is left to the browser.
|
|
1157
|
+
*/
|
|
1158
|
+
private keydown;
|
|
1159
|
+
private anchoredTop;
|
|
1160
|
+
private positionStrategy;
|
|
1161
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<BfDesktopToastService, never>;
|
|
1162
|
+
static ɵprov: i0.ɵɵInjectableDeclaration<any>;
|
|
1163
|
+
}
|
|
1164
|
+
/**
|
|
1165
|
+
* Menu panel of actions, choices and submenus on the Angular CDK menu (role `menu`, arrow keys,
|
|
1166
|
+
* Home/End, type-ahead, `Escape` returning focus to the trigger). Put it in an `ng-template` that
|
|
1167
|
+
* a `bf-menu-button` or a `[bfMenuTriggerFor]` opens, and fill it with `bfMenuItem`,
|
|
1168
|
+
* `bfMenuItemCheckbox`, `bfMenuItemRadio` (in a `bfMenuGroup`) and `bfMenuDivider` parts.
|
|
1169
|
+
*
|
|
1170
|
+
* @example
|
|
1171
|
+
* <bf-menu-button [menu]="rowActions">Actions</bf-menu-button>
|
|
1172
|
+
* <ng-template #rowActions>
|
|
1173
|
+
* <bf-menu>
|
|
1174
|
+
* <button bfMenuItem (triggered)="rename()">Rename</button>
|
|
1175
|
+
* <button bfMenuItem [bfMenuTriggerFor]="moveTo">Move to</button>
|
|
1176
|
+
* <div bfMenuDivider></div>
|
|
1177
|
+
* <button bfMenuItem (triggered)="remove()">Delete</button>
|
|
1178
|
+
* </bf-menu>
|
|
1179
|
+
* </ng-template>
|
|
1180
|
+
* @summary Keyboard-operable menu panel with items, checkbox and radio items, groups and submenus
|
|
1181
|
+
* @category Overlays
|
|
1182
|
+
* @since 0.3.0
|
|
1183
|
+
* @slot default The items (`bfMenuItem`, `bfMenuItemCheckbox`, `bfMenuItemRadio`), groups and dividers.
|
|
1184
|
+
*/
|
|
1185
|
+
export declare class BfMenuComponent {
|
|
1186
|
+
private readonly defaults;
|
|
1187
|
+
/** The `bfMenuTriggerFor` that opened this menu (a button, or the parent item of a submenu). */
|
|
1188
|
+
private readonly trigger;
|
|
1189
|
+
/** Row height of its items: sm 32, md 36, lg 44 px (44 px under a coarse pointer); unset follows
|
|
1190
|
+
* `provideBfDefaults()` (`controlSize`, `md` by default). */
|
|
1191
|
+
readonly size: import("@angular/core").InputSignal<BfSize | undefined>;
|
|
1192
|
+
/** Accessible name of the menu. Empty: the menu is named by the trigger that opened it (APG). */
|
|
1193
|
+
readonly ariaLabel: import("@angular/core").InputSignal<string>;
|
|
1194
|
+
/** Id of the element that names the menu; wins over the trigger. */
|
|
1195
|
+
readonly ariaLabelledby: import("@angular/core").InputSignal<string>;
|
|
1196
|
+
/** The item height in effect: `size`, else the app's `controlSize` default. */
|
|
1197
|
+
readonly resolvedSize: import("@angular/core").Signal<BfSize>;
|
|
1198
|
+
private readonly triggerId;
|
|
1199
|
+
protected readonly labelledBy: import("@angular/core").Signal<string | null>;
|
|
1200
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<BfMenuComponent, never>;
|
|
1201
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<BfMenuComponent, "bf-menu", never, {
|
|
1202
|
+
"size": {
|
|
1203
|
+
"alias": "size";
|
|
1204
|
+
"required": false;
|
|
1205
|
+
"isSignal": true;
|
|
1206
|
+
};
|
|
1207
|
+
"ariaLabel": {
|
|
1208
|
+
"alias": "ariaLabel";
|
|
1209
|
+
"required": false;
|
|
1210
|
+
"isSignal": true;
|
|
1211
|
+
};
|
|
1212
|
+
"ariaLabelledby": {
|
|
1213
|
+
"alias": "ariaLabelledby";
|
|
1214
|
+
"required": false;
|
|
1215
|
+
"isSignal": true;
|
|
1216
|
+
};
|
|
1217
|
+
}, {}, never, ["*"], true, [{
|
|
1218
|
+
directive: typeof i1.CdkMenu;
|
|
1219
|
+
inputs: {};
|
|
1220
|
+
outputs: {};
|
|
1221
|
+
}, {
|
|
1222
|
+
directive: typeof i1.CdkTargetMenuAim;
|
|
1223
|
+
inputs: {};
|
|
1224
|
+
outputs: {};
|
|
1225
|
+
}]>;
|
|
1226
|
+
}
|
|
1227
|
+
/**
|
|
1228
|
+
* An action row of a `bf-menu` (role `menuitem`), on a native `<button>` or a link (`<a>` with
|
|
1229
|
+
* `href` or `routerLink`). Activating it (click, `Enter`, `Space`) emits `triggered`, closes every
|
|
1230
|
+
* open menu and returns focus to the trigger. With `[bfMenuTriggerFor]` on the same element it
|
|
1231
|
+
* opens a submenu instead (and shows a chevron). A disabled item stays focusable and announces
|
|
1232
|
+
* itself as disabled, but does not activate; a disabled link does not navigate either, also with
|
|
1233
|
+
* `routerLink`.
|
|
1234
|
+
*
|
|
1235
|
+
* @example
|
|
1236
|
+
* <button bfMenuItem (triggered)="rename()">Rename</button>
|
|
1237
|
+
* <a bfMenuItem routerLink="/settings">Settings</a>
|
|
1238
|
+
* @binding bfMenuItemDisabled Whether the item is disabled: it stays focusable and announced, but does not activate.
|
|
1239
|
+
* @binding bfMenuItemTypeahead The text typeahead matches the item by (default: its text content).
|
|
1240
|
+
* @binding triggered Emits when the item is activated (click, `Enter` or `Space`), unless it opens a submenu.
|
|
1241
|
+
* @summary An action row of a menu on a native button or link, with keyboard rules
|
|
1242
|
+
* @since 0.3.0
|
|
1243
|
+
*/
|
|
1244
|
+
export declare class BfMenuItemDirective {
|
|
1245
|
+
protected readonly classes: () => string;
|
|
1246
|
+
constructor();
|
|
1247
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<BfMenuItemDirective, never>;
|
|
1248
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<BfMenuItemDirective, "button[bfMenuItem], a[bfMenuItem]", never, {}, {}, never, never, true, [{
|
|
1249
|
+
directive: typeof i1.CdkMenuItem;
|
|
1250
|
+
inputs: {
|
|
1251
|
+
"cdkMenuItemDisabled": "bfMenuItemDisabled";
|
|
1252
|
+
"cdkMenuitemTypeaheadLabel": "bfMenuItemTypeahead";
|
|
1253
|
+
};
|
|
1254
|
+
outputs: {
|
|
1255
|
+
"cdkMenuItemTriggered": "triggered";
|
|
1256
|
+
};
|
|
1257
|
+
}]>;
|
|
1258
|
+
}
|
|
1259
|
+
/**
|
|
1260
|
+
* A toggle row of a `bf-menu` (role `menuitemcheckbox`) with a check mark while `checked`.
|
|
1261
|
+
* Activating it (click, `Enter`, `Space`) flips its own `checked` (`aria-checked`), emits
|
|
1262
|
+
* `triggered`, then `changed` (and `checkedChange`) with the new state, and closes the menu. Bind
|
|
1263
|
+
* it two-way, `[(checked)]`, so your state always follows the item.
|
|
1264
|
+
*
|
|
1265
|
+
* @example
|
|
1266
|
+
* <button bfMenuItemCheckbox [(checked)]="showGrid">Show grid</button>
|
|
1267
|
+
* @binding bfMenuItemDisabled Whether the item is disabled: it stays focusable and announced, but does not activate.
|
|
1268
|
+
* @binding bfMenuItemTypeahead The text typeahead matches the item by (default: its text content).
|
|
1269
|
+
* @binding triggered Emits when the item is activated (click, `Enter` or `Space`), before `checked` flips.
|
|
1270
|
+
* @summary A menu row that toggles an option on and off with a check mark
|
|
1271
|
+
* @since 0.3.0
|
|
1272
|
+
*/
|
|
1273
|
+
export declare class BfMenuItemCheckboxDirective {
|
|
1274
|
+
/** Whether the item is checked. The item flips it itself on activation (and emits
|
|
1275
|
+
* `checkedChange`), so bind it two-way: `[(checked)]`. */
|
|
1276
|
+
readonly checked: import("@angular/core").ModelSignal<boolean>;
|
|
1277
|
+
/** Emitted with the new state right after the user toggles the item. */
|
|
1278
|
+
readonly changed: import("@angular/core").OutputEmitterRef<boolean>;
|
|
1279
|
+
protected readonly classes: () => string;
|
|
1280
|
+
constructor();
|
|
1281
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<BfMenuItemCheckboxDirective, never>;
|
|
1282
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<BfMenuItemCheckboxDirective, "button[bfMenuItemCheckbox]", never, {
|
|
1283
|
+
"checked": {
|
|
1284
|
+
"alias": "checked";
|
|
1285
|
+
"required": false;
|
|
1286
|
+
"isSignal": true;
|
|
1287
|
+
};
|
|
1288
|
+
}, {
|
|
1289
|
+
"checked": "checkedChange";
|
|
1290
|
+
"changed": "changed";
|
|
1291
|
+
}, never, never, true, [{
|
|
1292
|
+
directive: typeof i1.CdkMenuItemCheckbox;
|
|
1293
|
+
inputs: {
|
|
1294
|
+
"cdkMenuItemDisabled": "bfMenuItemDisabled";
|
|
1295
|
+
"cdkMenuitemTypeaheadLabel": "bfMenuItemTypeahead";
|
|
1296
|
+
};
|
|
1297
|
+
outputs: {
|
|
1298
|
+
"cdkMenuItemTriggered": "triggered";
|
|
1299
|
+
};
|
|
1300
|
+
}]>;
|
|
1301
|
+
}
|
|
1302
|
+
/**
|
|
1303
|
+
* One choice of a set (role `menuitemradio`) with a dot while `checked`. Put the choices of one
|
|
1304
|
+
* set in a `bfMenuGroup`: choosing one (click, `Enter`, `Space`) unchecks the others, emits
|
|
1305
|
+
* `triggered` and closes the menu.
|
|
1306
|
+
*
|
|
1307
|
+
* @example
|
|
1308
|
+
* <div bfMenuGroup aria-label="Density">
|
|
1309
|
+
* <button bfMenuItemRadio [checked]="density() === 'compact'" (triggered)="density.set('compact')">
|
|
1310
|
+
* Compact
|
|
1311
|
+
* </button>
|
|
1312
|
+
* </div>
|
|
1313
|
+
* @binding checked Whether this choice is the selected one of its group (shown with a dot).
|
|
1314
|
+
* @binding bfMenuItemDisabled Whether the item is disabled: it stays focusable and announced, but does not activate.
|
|
1315
|
+
* @binding bfMenuItemTypeahead The text typeahead matches the item by (default: its text content).
|
|
1316
|
+
* @binding triggered Emits when the choice is activated (click, `Enter` or `Space`); set your state here.
|
|
1317
|
+
* @summary One choice of a set of exclusive options in a menu, marked with a dot
|
|
1318
|
+
* @since 0.3.0
|
|
1319
|
+
*/
|
|
1320
|
+
export declare class BfMenuItemRadioDirective {
|
|
1321
|
+
protected readonly classes: () => string;
|
|
1322
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<BfMenuItemRadioDirective, never>;
|
|
1323
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<BfMenuItemRadioDirective, "button[bfMenuItemRadio]", never, {}, {}, never, never, true, [{
|
|
1324
|
+
directive: typeof i1.CdkMenuItemRadio;
|
|
1325
|
+
inputs: {
|
|
1326
|
+
"cdkMenuItemChecked": "checked";
|
|
1327
|
+
"cdkMenuItemDisabled": "bfMenuItemDisabled";
|
|
1328
|
+
"cdkMenuitemTypeaheadLabel": "bfMenuItemTypeahead";
|
|
1329
|
+
};
|
|
1330
|
+
outputs: {
|
|
1331
|
+
"cdkMenuItemTriggered": "triggered";
|
|
1332
|
+
};
|
|
1333
|
+
}]>;
|
|
1334
|
+
}
|
|
1335
|
+
/**
|
|
1336
|
+
* A group of menu items (role `group`); radio items in one group are exclusive. Name it with
|
|
1337
|
+
* `aria-label` when its items share a topic ("Density").
|
|
1338
|
+
*
|
|
1339
|
+
* @example
|
|
1340
|
+
* <div bfMenuGroup aria-label="Density">…radio items…</div>
|
|
1341
|
+
* @summary Groups related menu items; radio items in one group exclude each other
|
|
1342
|
+
* @since 0.3.0
|
|
1343
|
+
*/
|
|
1344
|
+
export declare class BfMenuGroupDirective {
|
|
1345
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<BfMenuGroupDirective, never>;
|
|
1346
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<BfMenuGroupDirective, "[bfMenuGroup]", never, {}, {}, never, never, true, [{
|
|
1347
|
+
directive: typeof i1.CdkMenuGroup;
|
|
1348
|
+
inputs: {};
|
|
1349
|
+
outputs: {};
|
|
1350
|
+
}]>;
|
|
1351
|
+
}
|
|
1352
|
+
/**
|
|
1353
|
+
* A line between groups of menu items (role `separator`, not focusable).
|
|
1354
|
+
*
|
|
1355
|
+
* @example
|
|
1356
|
+
* <div bfMenuDivider></div>
|
|
1357
|
+
* @summary A line between groups of menu items that keyboard focus never lands on
|
|
1358
|
+
* @since 0.3.0
|
|
1359
|
+
*/
|
|
1360
|
+
export declare class BfMenuDividerDirective {
|
|
1361
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<BfMenuDividerDirective, never>;
|
|
1362
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<BfMenuDividerDirective, "[bfMenuDivider]", never, {}, {}, never, never, true, never>;
|
|
1363
|
+
}
|
|
1364
|
+
/**
|
|
1365
|
+
* Where a menu opens against its trigger; `start`/`end` follow the text direction.
|
|
1366
|
+
*
|
|
1367
|
+
* @summary Where a menu opens against its trigger, above or below, at either end
|
|
1368
|
+
* @since 0.3.0
|
|
1369
|
+
*/
|
|
1370
|
+
type BfMenuPlacement = 'below-start' | 'below-end' | 'above-start' | 'above-end';
|
|
1371
|
+
/**
|
|
1372
|
+
* Opens a `bf-menu` template from any element on the Angular CDK menu trigger: it sets
|
|
1373
|
+
* `aria-haspopup="menu"` and `aria-expanded`, opens on click, `Enter`, `Space` and `ArrowDown`
|
|
1374
|
+
* (first item focused) or `ArrowUp` (last item), and takes focus back when the menu closes. A
|
|
1375
|
+
* navigation to another URL path closes the open menu (with its submenus); the URL is watched
|
|
1376
|
+
* only while the menu is open. On a
|
|
1377
|
+
* `bfMenuItem` it opens a submenu beside the item instead (`ArrowRight`, `ArrowLeft` in RTL).
|
|
1378
|
+
* `bf-menu-button` wraps it in a styled button.
|
|
1379
|
+
*
|
|
1380
|
+
* @example
|
|
1381
|
+
* <button type="button" [bfMenuTriggerFor]="menu" bfMenuPlacement="below-end">Options</button>
|
|
1382
|
+
* <ng-template #menu><bf-menu>…</bf-menu></ng-template>
|
|
1383
|
+
* @binding bfMenuTriggerFor The `ng-template` holding the `bf-menu` this element opens.
|
|
1384
|
+
* @binding bfMenuTriggerData The context the menu template receives, for a menu shared by many triggers.
|
|
1385
|
+
* @binding bfMenuOpened Emits when the menu opens.
|
|
1386
|
+
* @binding bfMenuClosed Emits when the menu closes (an item, `Escape`, a click outside or a navigation).
|
|
1387
|
+
* @summary Opens a menu from any element with the keyboard and focus rules of menus
|
|
1388
|
+
* @since 0.3.0
|
|
1389
|
+
*/
|
|
1390
|
+
export declare class BfMenuTriggerDirective {
|
|
1391
|
+
private readonly el;
|
|
1392
|
+
/** Where the menu opens (flipping when it would overflow). A submenu always opens beside its
|
|
1393
|
+
* item, at the inline end, and ignores it. */
|
|
1394
|
+
readonly bfMenuPlacement: import("@angular/core").InputSignal<BfMenuPlacement>;
|
|
1395
|
+
constructor();
|
|
1396
|
+
/** The trigger element's id (assigned when it has none), which names the menu it opens. It is
|
|
1397
|
+
* read when the menu opens: an `[id]` bound on the trigger that changes while the menu is open
|
|
1398
|
+
* names the menu from its next opening. */
|
|
1399
|
+
labelId(): string;
|
|
1400
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<BfMenuTriggerDirective, never>;
|
|
1401
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<BfMenuTriggerDirective, "[bfMenuTriggerFor]", never, {
|
|
1402
|
+
"bfMenuPlacement": {
|
|
1403
|
+
"alias": "bfMenuPlacement";
|
|
1404
|
+
"required": false;
|
|
1405
|
+
"isSignal": true;
|
|
1406
|
+
};
|
|
1407
|
+
}, {}, never, never, true, [{
|
|
1408
|
+
directive: typeof i1.CdkMenuTrigger;
|
|
1409
|
+
inputs: {
|
|
1410
|
+
"cdkMenuTriggerFor": "bfMenuTriggerFor";
|
|
1411
|
+
"cdkMenuTriggerData": "bfMenuTriggerData";
|
|
1412
|
+
};
|
|
1413
|
+
outputs: {
|
|
1414
|
+
"cdkMenuOpened": "bfMenuOpened";
|
|
1415
|
+
"cdkMenuClosed": "bfMenuClosed";
|
|
1416
|
+
};
|
|
1417
|
+
}]>;
|
|
1418
|
+
}
|
|
1419
|
+
/**
|
|
1420
|
+
* The visual style of a `bf-menu-button`: outline, text or tonal, as `bf-button`'s.
|
|
1421
|
+
*
|
|
1422
|
+
* @summary The three visual styles of a menu button, matching the button styles
|
|
1423
|
+
* @since 0.3.0
|
|
1424
|
+
*/
|
|
1425
|
+
type BfMenuButtonVariant = 'outline' | 'text' | 'tonal';
|
|
1426
|
+
/**
|
|
1427
|
+
* Button that opens a `bf-menu`: a native `<button>` styled like `bf-button` (or `bf-icon-button`
|
|
1428
|
+
* with `iconOnly`) in the outline, text or tonal variant, with `aria-haspopup="menu"` and
|
|
1429
|
+
* `aria-expanded`. Click, `Enter`, `Space` or `ArrowDown` open the menu with its first item
|
|
1430
|
+
* focused, `ArrowUp` with its last; closing it returns focus here.
|
|
1431
|
+
*
|
|
1432
|
+
* @example
|
|
1433
|
+
* <bf-menu-button [menu]="actions">Actions</bf-menu-button>
|
|
1434
|
+
* <bf-menu-button [menu]="actions" iconOnly label="More actions" variant="text">
|
|
1435
|
+
* <bf-icon [icon]="Ellipsis" />
|
|
1436
|
+
* </bf-menu-button>
|
|
1437
|
+
* <ng-template #actions>
|
|
1438
|
+
* <bf-menu><button bfMenuItem (triggered)="rename()">Rename</button></bf-menu>
|
|
1439
|
+
* </ng-template>
|
|
1440
|
+
* @summary Styled button that opens a menu, with outline, text, tonal and icon-only looks
|
|
1441
|
+
* @category Overlays
|
|
1442
|
+
* @since 0.3.0
|
|
1443
|
+
* @slot icon-start An icon before the label.
|
|
1444
|
+
* @slot default The label (the accessible name of an icon-only button).
|
|
1445
|
+
*/
|
|
1446
|
+
export declare class BfMenuButtonComponent {
|
|
1447
|
+
private readonly defaults;
|
|
1448
|
+
/** The `ng-template` holding the `bf-menu` to open. */
|
|
1449
|
+
readonly menu: import("@angular/core").InputSignal<TemplateRef<unknown>>;
|
|
1450
|
+
/** Visual style: outline (default), text, tonal. */
|
|
1451
|
+
readonly variant: import("@angular/core").InputSignal<BfMenuButtonVariant>;
|
|
1452
|
+
/** Height step: sm 32, md 40, lg 48 px; unset follows `provideBfDefaults()` (`controlSize`,
|
|
1453
|
+
* `md` by default). */
|
|
1454
|
+
readonly size: import("@angular/core").InputSignal<BfSize | undefined>;
|
|
1455
|
+
/** Where the menu opens against the button; it flips when it would overflow. */
|
|
1456
|
+
readonly placement: import("@angular/core").InputSignal<BfMenuPlacement>;
|
|
1457
|
+
/** Accessible name (`aria-label`). Required with `iconOnly`; with a visible label leave it empty
|
|
1458
|
+
* or start it with the visible text. */
|
|
1459
|
+
readonly label: import("@angular/core").InputSignal<string>;
|
|
1460
|
+
/** Square button holding only the projected icon, like `bf-icon-button`; set `label`. */
|
|
1461
|
+
readonly iconOnly: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
|
|
1462
|
+
/** Disables the button; the menu cannot open. */
|
|
1463
|
+
readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
|
|
1464
|
+
/** The menu opened. */
|
|
1465
|
+
readonly opened: import("@angular/core").OutputEmitterRef<void>;
|
|
1466
|
+
/** The menu closed. */
|
|
1467
|
+
readonly closed: import("@angular/core").OutputEmitterRef<void>;
|
|
1468
|
+
/** The size in effect: `size`, else the app's `controlSize` default. */
|
|
1469
|
+
protected readonly resolvedSize: import("@angular/core").Signal<BfSize>;
|
|
1470
|
+
protected readonly labelClasses: import("@angular/core").Signal<"contents" | "max-w-full min-w-0 truncate">;
|
|
1471
|
+
protected readonly classes: import("@angular/core").Signal<string>;
|
|
1472
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<BfMenuButtonComponent, never>;
|
|
1473
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<BfMenuButtonComponent, "bf-menu-button", never, {
|
|
1474
|
+
"menu": {
|
|
1475
|
+
"alias": "menu";
|
|
1476
|
+
"required": true;
|
|
1477
|
+
"isSignal": true;
|
|
1478
|
+
};
|
|
1479
|
+
"variant": {
|
|
1480
|
+
"alias": "variant";
|
|
1481
|
+
"required": false;
|
|
1482
|
+
"isSignal": true;
|
|
1483
|
+
};
|
|
1484
|
+
"size": {
|
|
1485
|
+
"alias": "size";
|
|
1486
|
+
"required": false;
|
|
1487
|
+
"isSignal": true;
|
|
1488
|
+
};
|
|
1489
|
+
"placement": {
|
|
1490
|
+
"alias": "placement";
|
|
1491
|
+
"required": false;
|
|
1492
|
+
"isSignal": true;
|
|
1493
|
+
};
|
|
1494
|
+
"label": {
|
|
1495
|
+
"alias": "label";
|
|
1496
|
+
"required": false;
|
|
1497
|
+
"isSignal": true;
|
|
1498
|
+
};
|
|
1499
|
+
"iconOnly": {
|
|
1500
|
+
"alias": "iconOnly";
|
|
1501
|
+
"required": false;
|
|
1502
|
+
"isSignal": true;
|
|
1503
|
+
};
|
|
1504
|
+
"disabled": {
|
|
1505
|
+
"alias": "disabled";
|
|
1506
|
+
"required": false;
|
|
1507
|
+
"isSignal": true;
|
|
1508
|
+
};
|
|
1509
|
+
}, {
|
|
1510
|
+
"opened": "opened";
|
|
1511
|
+
"closed": "closed";
|
|
1512
|
+
}, never, ["[bfSlot=icon-start]", "*"], true, never>;
|
|
1513
|
+
}
|
|
1514
|
+
export { type BfConfirmButton, type BfConfirmButtonRole, type BfConfirmOptions, type BfConfirmSize, type BfDesktopToastConfig, type BfDesktopToastOptions, type BfDesktopToastPosition, type BfDialogConfig, type BfDialogRole, type BfDialogSize, type BfDialogTemplateContext, type BfMenuButtonVariant, type BfMenuPlacement, type BfOverlayAutoFocus, type BfOverlayController, type BfOverlayHost, type BfOverlayOptions, type BfOverlayPosition, type BfOverlayRole, type BfOverlayStackOptions, type BfOverlayTemplateContext, type BfStackedOverlay, type BfToastAction, type BfToastController, type BfToastDismissReason, type ɵBfToastHandle, type ɵBfToastPresenter, type ɵBfToastQueueOptions, type ɵBfToastRequest, type ɵBfToastView, labelPanelByHeading as ɵlabelPanelByHeading, watchPanelHeading as ɵwatchPanelHeading };
|