@radix-ng/primitives 1.0.0-beta.0 → 1.0.0-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/radix-ng-primitives-accordion.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-calendar.mjs +95 -83
- package/fesm2022/radix-ng-primitives-calendar.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-checkbox.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-collapsible.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-context-menu.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-core.mjs +114 -4
- package/fesm2022/radix-ng-primitives-core.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-cropper.mjs +287 -308
- package/fesm2022/radix-ng-primitives-cropper.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-date-field.mjs +55 -15
- package/fesm2022/radix-ng-primitives-date-field.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-dialog.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-drawer.mjs +6 -105
- package/fesm2022/radix-ng-primitives-drawer.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-editable.mjs +304 -23
- package/fesm2022/radix-ng-primitives-editable.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-field.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-fieldset.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-menu.mjs +409 -1
- package/fesm2022/radix-ng-primitives-menu.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-meter.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-navigation-menu.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-number-field.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-popover.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-popper.mjs +21 -4
- package/fesm2022/radix-ng-primitives-popper.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-portal.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-preview-card.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-progress.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-scroll-area.mjs +923 -0
- package/fesm2022/radix-ng-primitives-scroll-area.mjs.map +1 -0
- package/fesm2022/radix-ng-primitives-select.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-slider.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-stepper.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-switch.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-tabs.mjs +11 -2
- package/fesm2022/radix-ng-primitives-tabs.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-time-field.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-toast.mjs +839 -0
- package/fesm2022/radix-ng-primitives-toast.mjs.map +1 -0
- package/fesm2022/radix-ng-primitives-toolbar.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-tooltip.mjs +9 -1
- package/fesm2022/radix-ng-primitives-tooltip.mjs.map +1 -1
- package/package.json +10 -2
- package/types/radix-ng-primitives-accordion.d.ts +3 -2
- package/types/radix-ng-primitives-calendar.d.ts +38 -18
- package/types/radix-ng-primitives-checkbox.d.ts +5 -5
- package/types/radix-ng-primitives-collapsible.d.ts +2 -1
- package/types/radix-ng-primitives-context-menu.d.ts +3 -2
- package/types/radix-ng-primitives-core.d.ts +42 -3
- package/types/radix-ng-primitives-cropper.d.ts +89 -56
- package/types/radix-ng-primitives-date-field.d.ts +11 -5
- package/types/radix-ng-primitives-dialog.d.ts +2 -1
- package/types/radix-ng-primitives-drawer.d.ts +5 -27
- package/types/radix-ng-primitives-editable.d.ts +90 -13
- package/types/radix-ng-primitives-field.d.ts +3 -2
- package/types/radix-ng-primitives-fieldset.d.ts +3 -2
- package/types/radix-ng-primitives-focus-scope.d.ts +2 -1
- package/types/radix-ng-primitives-menu.d.ts +16 -4
- package/types/radix-ng-primitives-menubar.d.ts +2 -1
- package/types/radix-ng-primitives-meter.d.ts +3 -2
- package/types/radix-ng-primitives-navigation-menu.d.ts +1 -1
- package/types/radix-ng-primitives-number-field.d.ts +6 -6
- package/types/radix-ng-primitives-popover.d.ts +2 -1
- package/types/radix-ng-primitives-popper.d.ts +19 -2
- package/types/radix-ng-primitives-preview-card.d.ts +1 -1
- package/types/radix-ng-primitives-progress.d.ts +3 -2
- package/types/radix-ng-primitives-roving-focus.d.ts +4 -3
- package/types/radix-ng-primitives-scroll-area.d.ts +253 -0
- package/types/radix-ng-primitives-select.d.ts +6 -6
- package/types/radix-ng-primitives-slider.d.ts +1 -1
- package/types/radix-ng-primitives-switch.d.ts +1 -1
- package/types/radix-ng-primitives-tabs.d.ts +1 -1
- package/types/radix-ng-primitives-toast.d.ts +378 -0
- package/types/radix-ng-primitives-toggle-group.d.ts +2 -1
- package/types/radix-ng-primitives-toolbar.d.ts +3 -2
- package/types/radix-ng-primitives-tooltip.d.ts +3 -2
|
@@ -29,7 +29,7 @@ declare const context$2: () => {
|
|
|
29
29
|
itemTextRefCallback: (node: any, value: any, disabled: any) => void;
|
|
30
30
|
};
|
|
31
31
|
type RdxSelectContentContext = ReturnType<typeof context$2>;
|
|
32
|
-
declare const injectSelectContentContext:
|
|
32
|
+
declare const injectSelectContentContext: _radix_ng_primitives_core.InjectContext<{
|
|
33
33
|
content: _angular_core.WritableSignal<HTMLElement | null>;
|
|
34
34
|
viewport: _angular_core.WritableSignal<HTMLElement | undefined>;
|
|
35
35
|
isPositioned: _angular_core.WritableSignal<boolean>;
|
|
@@ -39,7 +39,7 @@ declare const injectSelectContentContext: (optional?: boolean) => {
|
|
|
39
39
|
onItemLeave: () => void;
|
|
40
40
|
itemRefCallback: (node: any, value: any, disabled: boolean) => void;
|
|
41
41
|
itemTextRefCallback: (node: any, value: any, disabled: any) => void;
|
|
42
|
-
}
|
|
42
|
+
}>;
|
|
43
43
|
declare const provideSelectContentContext: (useFactory: () => {
|
|
44
44
|
content: _angular_core.WritableSignal<HTMLElement | null>;
|
|
45
45
|
viewport: _angular_core.WritableSignal<HTMLElement | undefined>;
|
|
@@ -119,13 +119,13 @@ declare const context$1: () => {
|
|
|
119
119
|
onItemTextChange: (node: any) => void;
|
|
120
120
|
};
|
|
121
121
|
type RdxSelectItemContext = ReturnType<typeof context$1>;
|
|
122
|
-
declare const injectSelectItemContext:
|
|
122
|
+
declare const injectSelectItemContext: _radix_ng_primitives_core.InjectContext<{
|
|
123
123
|
value: _angular_core.InputSignal<any>;
|
|
124
124
|
disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
125
125
|
isSelected: _angular_core.Signal<boolean>;
|
|
126
126
|
textId: string;
|
|
127
127
|
onItemTextChange: (node: any) => void;
|
|
128
|
-
}
|
|
128
|
+
}>;
|
|
129
129
|
declare const provideSelectItemContext: (useFactory: () => {
|
|
130
130
|
value: _angular_core.InputSignal<any>;
|
|
131
131
|
disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
@@ -352,7 +352,7 @@ declare const context: () => {
|
|
|
352
352
|
onOpenChange: (value: any) => void;
|
|
353
353
|
};
|
|
354
354
|
type RdxSelectRootContext = ReturnType<typeof context>;
|
|
355
|
-
declare const injectSelectRootContext:
|
|
355
|
+
declare const injectSelectRootContext: _radix_ng_primitives_core.InjectContext<{
|
|
356
356
|
triggerElement: _angular_core.WritableSignal<HTMLElement | null>;
|
|
357
357
|
valueElement: _angular_core.WritableSignal<HTMLElement | null>;
|
|
358
358
|
triggerPointerDownPosRef: _angular_core.WritableSignal<{
|
|
@@ -373,7 +373,7 @@ declare const injectSelectRootContext: (optional?: boolean) => {
|
|
|
373
373
|
onTriggerChange: (node: any) => void;
|
|
374
374
|
onValueElementChange: (node: any) => void;
|
|
375
375
|
onOpenChange: (value: any) => void;
|
|
376
|
-
}
|
|
376
|
+
}>;
|
|
377
377
|
declare const provideSelectRootContext: (useFactory: () => {
|
|
378
378
|
triggerElement: _angular_core.WritableSignal<HTMLElement | null>;
|
|
379
379
|
valueElement: _angular_core.WritableSignal<HTMLElement | null>;
|
|
@@ -364,7 +364,7 @@ declare class RdxSliderValue {
|
|
|
364
364
|
*
|
|
365
365
|
* @see https://base-ui.com/react/components/slider
|
|
366
366
|
*/
|
|
367
|
-
declare const injectSliderRootContext:
|
|
367
|
+
declare const injectSliderRootContext: i1.InjectContext<RdxSliderRoot>;
|
|
368
368
|
declare const provideSliderRootContext: (useFactory: () => RdxSliderRoot) => _angular_core.Provider;
|
|
369
369
|
|
|
370
370
|
declare class RdxSliderModule {
|
|
@@ -107,7 +107,7 @@ interface RdxSwitchContext {
|
|
|
107
107
|
readonly ariaLabelledBy: Signal<string | undefined>;
|
|
108
108
|
markAsTouched(): void;
|
|
109
109
|
}
|
|
110
|
-
declare const injectSwitchContext:
|
|
110
|
+
declare const injectSwitchContext: i1.InjectContext<RdxSwitchContext>;
|
|
111
111
|
declare const provideSwitchContext: (useFactory: () => RdxSwitchContext) => _angular_core.Provider;
|
|
112
112
|
|
|
113
113
|
declare const switchImports: (typeof RdxSwitchInput | typeof RdxSwitchRoot | typeof RdxSwitchThumb)[];
|
|
@@ -233,7 +233,7 @@ interface RdxTabsRootContext {
|
|
|
233
233
|
/** Register the list host element. */
|
|
234
234
|
setTabListElement(element: HTMLElement | null): void;
|
|
235
235
|
}
|
|
236
|
-
declare const injectTabsRootContext:
|
|
236
|
+
declare const injectTabsRootContext: _radix_ng_primitives_core.InjectContext<RdxTabsRootContext>;
|
|
237
237
|
declare const provideTabsRootContext: (useFactory: () => RdxTabsRootContext) => _angular_core.Provider;
|
|
238
238
|
|
|
239
239
|
declare const tabsImports: (typeof RdxTabsPanelPresence)[];
|
|
@@ -0,0 +1,378 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { Provider } from '@angular/core';
|
|
3
|
+
import * as i1 from '@radix-ng/primitives/portal';
|
|
4
|
+
import * as _radix_ng_primitives_core from '@radix-ng/primitives/core';
|
|
5
|
+
import { RdxTransitionStatus } from '@radix-ng/primitives/core';
|
|
6
|
+
import * as i1$1 from '@radix-ng/primitives/popper';
|
|
7
|
+
import { RdxPopperAnchorElement, Side, Align, RdxPopperContentWrapper } from '@radix-ng/primitives/popper';
|
|
8
|
+
import * as _radix_ng_primitives_toast from '@radix-ng/primitives/toast';
|
|
9
|
+
|
|
10
|
+
/**
|
|
11
|
+
* Moves the toast viewport to a different part of the DOM — the Angular counterpart of
|
|
12
|
+
* `<Toast.Portal>`. Defaults to `document.body`; pass `container` to target another element.
|
|
13
|
+
*/
|
|
14
|
+
declare class RdxToastPortal {
|
|
15
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RdxToastPortal, never>;
|
|
16
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<RdxToastPortal, "[rdxToastPortal]", ["rdxToastPortal"], {}, {}, never, never, true, [{ directive: typeof i1.RdxPortal; inputs: { "container": "container"; }; outputs: {}; }]>;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
/** Relative ordering hint for a toast. `high` toasts are announced assertively. */
|
|
20
|
+
type RdxToastPriority = 'low' | 'high';
|
|
21
|
+
/** Action-button options carried on a toast and read back by the consumer (e.g. an "Undo" button). */
|
|
22
|
+
interface RdxToastActionProps {
|
|
23
|
+
/** Visible button label. */
|
|
24
|
+
label?: string;
|
|
25
|
+
/** Invoked when the action button is clicked. */
|
|
26
|
+
onClick?: (event: MouseEvent) => void;
|
|
27
|
+
}
|
|
28
|
+
/**
|
|
29
|
+
* Anchoring options for a toast rendered through `rdxToastPositioner` instead of the stack. The
|
|
30
|
+
* `anchor` is any popper-compatible reference (element, `ElementRef`, or virtual element).
|
|
31
|
+
*/
|
|
32
|
+
interface RdxToastPositionerProps {
|
|
33
|
+
anchor: RdxPopperAnchorElement;
|
|
34
|
+
side?: Side;
|
|
35
|
+
sideOffset?: number;
|
|
36
|
+
align?: Align;
|
|
37
|
+
alignOffset?: number;
|
|
38
|
+
}
|
|
39
|
+
/**
|
|
40
|
+
* A single toast in the {@link RdxToastManager} queue. `id` is stable for the toast's lifetime;
|
|
41
|
+
* `transitionStatus` reflects the enter/leave animation phase (mirrors Base UI's transition system).
|
|
42
|
+
*/
|
|
43
|
+
interface RdxToastObject<Data = unknown> {
|
|
44
|
+
/** Stable id; generated by the manager when omitted from {@link RdxToastAddOptions}. */
|
|
45
|
+
id: string;
|
|
46
|
+
/** Short heading text. */
|
|
47
|
+
title?: string;
|
|
48
|
+
/** Supporting body text. */
|
|
49
|
+
description?: string;
|
|
50
|
+
/** Caller-defined category (e.g. `'success' | 'error'`) for styling/branching. */
|
|
51
|
+
type?: string;
|
|
52
|
+
/** Auto-dismiss delay in ms. `0` (or a negative value) disables auto-dismiss. */
|
|
53
|
+
timeout?: number;
|
|
54
|
+
/** Announcement priority. `high` → `role="alert"` (assertive); `low` → `role="status"`. */
|
|
55
|
+
priority?: RdxToastPriority;
|
|
56
|
+
/** Arbitrary caller payload, surfaced back to templates/handlers. */
|
|
57
|
+
data?: Data;
|
|
58
|
+
/** Enter/leave phase, set by the manager while a toast mounts or is being removed. */
|
|
59
|
+
transitionStatus?: RdxTransitionStatus;
|
|
60
|
+
/** Set while a `promise()` toast is awaiting its source promise. */
|
|
61
|
+
loading?: boolean;
|
|
62
|
+
/** Action-button options surfaced to the template. */
|
|
63
|
+
actionProps?: RdxToastActionProps;
|
|
64
|
+
/** Anchoring options; when present the toast is positioned with `rdxToastPositioner`. */
|
|
65
|
+
positionerProps?: RdxToastPositionerProps;
|
|
66
|
+
/** Bump on an upsert (same `id`) to replay the enter animation. */
|
|
67
|
+
updateKey?: number | string;
|
|
68
|
+
/** Invoked when the toast is dismissed (by timeout, swipe, or `close()`). */
|
|
69
|
+
onClose?: () => void;
|
|
70
|
+
/** Invoked after the leave animation completes and the toast leaves the queue. */
|
|
71
|
+
onRemove?: () => void;
|
|
72
|
+
}
|
|
73
|
+
/** Options accepted by {@link RdxToastManager.add} / {@link RdxToastManager.update}. */
|
|
74
|
+
interface RdxToastAddOptions<Data = unknown> {
|
|
75
|
+
id?: string;
|
|
76
|
+
title?: string;
|
|
77
|
+
description?: string;
|
|
78
|
+
type?: string;
|
|
79
|
+
timeout?: number;
|
|
80
|
+
priority?: RdxToastPriority;
|
|
81
|
+
data?: Data;
|
|
82
|
+
/** Marks the toast as pending (used by `promise()`); pending toasts skip auto-dismiss. */
|
|
83
|
+
loading?: boolean;
|
|
84
|
+
actionProps?: RdxToastActionProps;
|
|
85
|
+
positionerProps?: RdxToastPositionerProps;
|
|
86
|
+
updateKey?: number | string;
|
|
87
|
+
onClose?: () => void;
|
|
88
|
+
onRemove?: () => void;
|
|
89
|
+
}
|
|
90
|
+
/** Per-state copy used by {@link RdxToastManager.promise}. */
|
|
91
|
+
interface RdxToastPromiseOptions<Value = unknown, Data = unknown> {
|
|
92
|
+
loading: RdxToastAddOptions<Data> | string;
|
|
93
|
+
success: RdxToastAddOptions<Data> | string | ((value: Value) => RdxToastAddOptions<Data> | string);
|
|
94
|
+
error: RdxToastAddOptions<Data> | string | ((error: unknown) => RdxToastAddOptions<Data> | string);
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
/**
|
|
98
|
+
* App-level coordinator and imperative API for toasts — the Angular counterpart of Base UI's
|
|
99
|
+
* `<Toast.Provider>` plus `useToastManager()`. Holds the queue as a signal that `RdxToastViewport`
|
|
100
|
+
* renders, owns each toast's auto-dismiss timer (pausable while the viewport is hovered/focused),
|
|
101
|
+
* and exposes `add` / `update` / `close` / `promise`.
|
|
102
|
+
*
|
|
103
|
+
* Provide it once near the app root with {@link provideRdxToastManager} or the `[rdxToastProvider]`
|
|
104
|
+
* directive, then inject `RdxToastManager` anywhere to push toasts.
|
|
105
|
+
*/
|
|
106
|
+
declare class RdxToastManager {
|
|
107
|
+
private readonly idGenerator;
|
|
108
|
+
private readonly _toasts;
|
|
109
|
+
/** The live queue, oldest first. Render it in `RdxToastViewport` (e.g. via `@for`). */
|
|
110
|
+
readonly toasts: i0.Signal<RdxToastObject<unknown>[]>;
|
|
111
|
+
/** Whether any toast is currently in the queue. */
|
|
112
|
+
readonly hasToasts: i0.Signal<boolean>;
|
|
113
|
+
private readonly _expanded;
|
|
114
|
+
/** Whether the stack is expanded (viewport hovered or focused) — drives `data-expanded`. */
|
|
115
|
+
readonly expanded: i0.Signal<boolean>;
|
|
116
|
+
private readonly _heights;
|
|
117
|
+
/** Measured heights (px) per toast id, reported by each `RdxToastRoot` for expanded-stack offsets. */
|
|
118
|
+
readonly heights: i0.Signal<Record<string, number>>;
|
|
119
|
+
/**
|
|
120
|
+
* Per-toast stacking metrics, computed once for the whole queue (front = newest, index `0`):
|
|
121
|
+
* `index` is the distance from the front and `offsetY` is the combined height of the toasts
|
|
122
|
+
* stacked in front. Roots read this by id instead of each rescanning the queue (O(n) vs O(n²)).
|
|
123
|
+
*/
|
|
124
|
+
readonly layout: i0.Signal<Record<string, {
|
|
125
|
+
index: number;
|
|
126
|
+
offsetY: number;
|
|
127
|
+
}>>;
|
|
128
|
+
/** Max number of simultaneously visible toasts. Configurable via `[rdxToastProvider]`. */
|
|
129
|
+
limit: number;
|
|
130
|
+
/** Default auto-dismiss delay (ms) for toasts that omit `timeout`. Set via `[rdxToastProvider]`. */
|
|
131
|
+
defaultTimeout: number;
|
|
132
|
+
private readonly timers;
|
|
133
|
+
/** Nested-pause depth so overlapping holds (hover + swipe) resume only when all release. */
|
|
134
|
+
private pauseDepth;
|
|
135
|
+
/** Queue a new toast. Returns its id (generated when not supplied). */
|
|
136
|
+
add<Data = unknown>(options: RdxToastAddOptions<Data>): string;
|
|
137
|
+
/** Merge new options into an existing toast (no-op if the id is unknown). */
|
|
138
|
+
update<Data = unknown>(id: string, options: Partial<RdxToastAddOptions<Data>>): void;
|
|
139
|
+
/**
|
|
140
|
+
* Begin dismissing a toast: fire `onClose`, then remove it after the leave animation.
|
|
141
|
+
* Omit `id` to dismiss every toast at once (mirrors Base UI's `close()`).
|
|
142
|
+
*/
|
|
143
|
+
close(id?: string): void;
|
|
144
|
+
/**
|
|
145
|
+
* Remove a toast from the queue immediately. `RdxToastRoot` calls this once its leave animation
|
|
146
|
+
* has finished; call it directly only when there is no exit animation.
|
|
147
|
+
*/
|
|
148
|
+
remove(id: string): void;
|
|
149
|
+
/** Toggle the expanded (hover/focus) state of the stack. Called by the viewport. */
|
|
150
|
+
setExpanded(expanded: boolean): void;
|
|
151
|
+
/** Record a toast's measured height (px) for expanded-stack offset math. Called by each root. */
|
|
152
|
+
setHeight(id: string, height: number): void;
|
|
153
|
+
/** Pause every auto-dismiss timer (e.g. while the viewport is hovered, focused, or being swiped). */
|
|
154
|
+
pauseAll(): void;
|
|
155
|
+
/** Release one pause; auto-dismiss timers resume only once every hold has released. */
|
|
156
|
+
resumeAll(): void;
|
|
157
|
+
/**
|
|
158
|
+
* Drive a toast through a promise's lifecycle: show `loading`, then swap to `success` or
|
|
159
|
+
* `error` copy when it settles. Returns the original promise for chaining.
|
|
160
|
+
*/
|
|
161
|
+
promise<Value, Data = unknown>(promise: Promise<Value>, options: RdxToastPromiseOptions<Value, Data>): Promise<Value>;
|
|
162
|
+
private scheduleTimeout;
|
|
163
|
+
private clearTimer;
|
|
164
|
+
private clearHeight;
|
|
165
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RdxToastManager, never>;
|
|
166
|
+
static ɵprov: i0.ɵɵInjectableDeclaration<RdxToastManager>;
|
|
167
|
+
}
|
|
168
|
+
/** Provide a {@link RdxToastManager} for an app (e.g. in `app.config.ts`). */
|
|
169
|
+
declare function provideRdxToastManager(): Provider[];
|
|
170
|
+
/**
|
|
171
|
+
* Hosts a {@link RdxToastManager} for its subtree. Put it on a wrapping element (or the app root)
|
|
172
|
+
* so descendant viewports and components share one queue. `limit` caps simultaneously visible toasts.
|
|
173
|
+
*/
|
|
174
|
+
declare class RdxToastProvider {
|
|
175
|
+
private readonly manager;
|
|
176
|
+
/** Max number of toasts shown at once. */
|
|
177
|
+
readonly limit: i0.InputSignal<number>;
|
|
178
|
+
/** Default auto-dismiss delay (ms) for toasts that omit their own `timeout`. `0` disables it. */
|
|
179
|
+
readonly timeout: i0.InputSignal<number>;
|
|
180
|
+
constructor();
|
|
181
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RdxToastProvider, never>;
|
|
182
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<RdxToastProvider, "[rdxToastProvider]", ["rdxToastProvider"], { "limit": { "alias": "limit"; "required": false; "isSignal": true; }; "timeout": { "alias": "timeout"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
/**
|
|
186
|
+
* The positioned region that holds the visible toasts — the Angular counterpart of
|
|
187
|
+
* `<Toast.Viewport>`. Exposes the queue for templates to render, and while it is hovered or focused
|
|
188
|
+
* it expands the stack (`data-expanded` on each root) and pauses every auto-dismiss timer, resuming
|
|
189
|
+
* once neither hover nor focus remains — matching Base UI.
|
|
190
|
+
*
|
|
191
|
+
* Headless: it carries no positioning styles. Consumers position it (e.g. fixed bottom-right) and
|
|
192
|
+
* iterate `viewport.toasts()` with `@for`.
|
|
193
|
+
*/
|
|
194
|
+
declare class RdxToastViewport {
|
|
195
|
+
protected readonly manager: RdxToastManager;
|
|
196
|
+
/** The live toast queue to render. */
|
|
197
|
+
readonly toasts: i0.Signal<_radix_ng_primitives_toast.RdxToastObject<unknown>[]>;
|
|
198
|
+
protected readonly hovered: i0.WritableSignal<boolean>;
|
|
199
|
+
protected readonly focused: i0.WritableSignal<boolean>;
|
|
200
|
+
/** Tracks the last expanded state so pause/resume stay balanced across transitions. */
|
|
201
|
+
private wasExpanded;
|
|
202
|
+
constructor();
|
|
203
|
+
protected onFocusOut(event: FocusEvent): void;
|
|
204
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RdxToastViewport, never>;
|
|
205
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<RdxToastViewport, "[rdxToastViewport]", ["rdxToastViewport"], {}, {}, never, never, true, never>;
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
/**
|
|
209
|
+
* Positions an anchored toast against an element — the Angular counterpart of `<Toast.Positioner>`.
|
|
210
|
+
* Composes the popper machinery so a toast can point at a trigger instead of living in the stack.
|
|
211
|
+
*
|
|
212
|
+
* Bind `anchor` (and optionally `side`/`align`/offsets) — typically from a toast's `positionerProps`.
|
|
213
|
+
* It hosts its own `RdxPopper` so it is self-contained (no surrounding `rdxPopperRoot` needed), and
|
|
214
|
+
* mirrors the popper measurements as friendlier CSS variables plus `data-side` / `data-align`.
|
|
215
|
+
*/
|
|
216
|
+
declare class RdxToastPositioner {
|
|
217
|
+
protected readonly wrapper: RdxPopperContentWrapper;
|
|
218
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RdxToastPositioner, never>;
|
|
219
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<RdxToastPositioner, "[rdxToastPositioner]", ["rdxToastPositioner"], {}, {}, never, never, true, [{ directive: typeof i1$1.RdxPopper; inputs: {}; outputs: {}; }, { directive: typeof i1$1.RdxPopperContentWrapper; inputs: { "anchor": "anchor"; "side": "side"; "sideOffset": "sideOffset"; "align": "align"; "alignOffset": "alignOffset"; "arrowPadding": "arrowPadding"; "avoidCollisions": "avoidCollisions"; "collisionBoundary": "collisionBoundary"; "collisionPadding": "collisionPadding"; "sticky": "sticky"; "hideWhenDetached": "hideWhenDetached"; "positionStrategy": "positionStrategy"; "updatePositionStrategy": "updatePositionStrategy"; }; outputs: {}; }]>;
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
/** Direction a swipe travels to dismiss a toast. */
|
|
223
|
+
type RdxToastSwipeDirection = 'up' | 'down' | 'left' | 'right';
|
|
224
|
+
interface RdxToastSwipeConfig {
|
|
225
|
+
/** The toast element the gesture lives on (CSS variables + data attributes are written here). */
|
|
226
|
+
element: () => HTMLElement;
|
|
227
|
+
/** Allowed dismiss directions; the gesture follows whichever the user drags toward most. */
|
|
228
|
+
directions: () => RdxToastSwipeDirection[];
|
|
229
|
+
/** Whether the gesture is armed (false while the toast is leaving). */
|
|
230
|
+
enabled: () => boolean;
|
|
231
|
+
/** Travel (px) past which a release dismisses. Defaults to {@link DEFAULT_THRESHOLD}. */
|
|
232
|
+
threshold?: number;
|
|
233
|
+
/** Called once per release that commits to dismissal. */
|
|
234
|
+
onDismiss: (event: PointerEvent) => void;
|
|
235
|
+
/** Called when a swipe actually begins (e.g. to pause auto-dismiss timers). */
|
|
236
|
+
onPress?: () => void;
|
|
237
|
+
/** Called when a started swipe ends, dismissing or not (balances {@link RdxToastSwipeConfig.onPress}). */
|
|
238
|
+
onRelease?: () => void;
|
|
239
|
+
}
|
|
240
|
+
/**
|
|
241
|
+
* Headless swipe-to-dismiss for a toast, built on the shared {@link usePointerDrag} lifecycle (which
|
|
242
|
+
* owns pointer capture, the start threshold, window listeners, and tap/cancel handling). This layer
|
|
243
|
+
* adds the toast-specific direction projection, rubber-banding, flick detection, and the styling
|
|
244
|
+
* contract — it applies no transform itself:
|
|
245
|
+
*
|
|
246
|
+
* - `--toast-swipe-movement-x` / `--toast-swipe-movement-y` — signed px offset along the active axis.
|
|
247
|
+
* - `[data-swiping]` — present while a gesture is active (drive `transition: none` off this).
|
|
248
|
+
* - `[data-swipe-direction]` — the active direction.
|
|
249
|
+
* - `[data-swipe-dismiss]` — present briefly when a release commits to dismissal.
|
|
250
|
+
*
|
|
251
|
+
* Mark inner interactive regions with `[data-toast-swipe-ignore]` to opt them out of the gesture.
|
|
252
|
+
* `RdxToastRoot` (the gesture host) sets `touch-action: none` so a touch-drag is not stolen by native
|
|
253
|
+
* scrolling — without it the gesture only works with a mouse, not on touch devices.
|
|
254
|
+
* Must be called from an injection context (a directive constructor).
|
|
255
|
+
*/
|
|
256
|
+
declare function useToastSwipe(config: RdxToastSwipeConfig): void;
|
|
257
|
+
|
|
258
|
+
interface RdxToastRootContext {
|
|
259
|
+
/** The toast model this part tree renders. */
|
|
260
|
+
readonly toast: () => RdxToastObject;
|
|
261
|
+
/** `id` of the title element, wired to `aria-labelledby` once a title registers. */
|
|
262
|
+
readonly titleId: string;
|
|
263
|
+
/** `id` of the description element, wired to `aria-describedby` once a description registers. */
|
|
264
|
+
readonly descriptionId: string;
|
|
265
|
+
/** Register/unregister the title part so the root only points `aria-labelledby` at a real element. */
|
|
266
|
+
readonly setTitlePresent: (present: boolean) => void;
|
|
267
|
+
/** Register/unregister the description part so `aria-describedby` only targets a real element. */
|
|
268
|
+
readonly setDescriptionPresent: (present: boolean) => void;
|
|
269
|
+
/** Begin dismissing this toast. */
|
|
270
|
+
readonly close: () => void;
|
|
271
|
+
}
|
|
272
|
+
declare const injectRdxToastRootContext: _radix_ng_primitives_core.InjectContext<RdxToastRootContext>;
|
|
273
|
+
declare const provideRdxToastRootContext: (useFactory: () => RdxToastRootContext) => i0.Provider;
|
|
274
|
+
/**
|
|
275
|
+
* A single toast — the Angular counterpart of `<Toast.Root>`. Bind the toast model from the
|
|
276
|
+
* viewport's `@for`; this directive owns the announcement `role`, the `data-state` enter/leave
|
|
277
|
+
* contract, swipe-to-dismiss, and the stacking variables consumers style against.
|
|
278
|
+
*
|
|
279
|
+
* Stacking / styling contract written to the host (no transform is applied for you):
|
|
280
|
+
* - `--toast-index` — position from the front (`0` = frontmost).
|
|
281
|
+
* - `--toast-height` — this toast's measured height (px).
|
|
282
|
+
* - `--toast-offset-y` — combined height (px) of the toasts stacked in front, for expanded layout.
|
|
283
|
+
* - `--toast-swipe-movement-x` / `--toast-swipe-movement-y` — live swipe offset (px).
|
|
284
|
+
* - `[data-front]` — present on the frontmost toast.
|
|
285
|
+
* - `[data-expanded]` — present while the viewport is hovered/focused.
|
|
286
|
+
* - `[data-state]` — `open` while visible, `closed` once dismissal begins.
|
|
287
|
+
* - `[data-swiping]` / `[data-swipe-direction]` / `[data-swipe-dismiss]` — gesture state.
|
|
288
|
+
*
|
|
289
|
+
* When the leave animation (driven by `data-state="closed"`) ends, the toast leaves the queue.
|
|
290
|
+
*/
|
|
291
|
+
declare class RdxToastRoot {
|
|
292
|
+
protected readonly manager: RdxToastManager;
|
|
293
|
+
private readonly elementRef;
|
|
294
|
+
private readonly injector;
|
|
295
|
+
/** The toast model to render — pass the item from the viewport's `@for`. */
|
|
296
|
+
readonly toast: i0.InputSignal<RdxToastObject<unknown>>;
|
|
297
|
+
/** Allowed swipe-to-dismiss directions. Accepts a single direction or a list. */
|
|
298
|
+
readonly swipeDirection: i0.InputSignal<RdxToastSwipeDirection | RdxToastSwipeDirection[]>;
|
|
299
|
+
readonly titleId: string;
|
|
300
|
+
readonly descriptionId: string;
|
|
301
|
+
/** Whether a title / description part has registered, gating the aria-* references. */
|
|
302
|
+
readonly titlePresent: i0.WritableSignal<boolean>;
|
|
303
|
+
readonly descriptionPresent: i0.WritableSignal<boolean>;
|
|
304
|
+
private readonly size;
|
|
305
|
+
/** This toast's measured height (px). */
|
|
306
|
+
readonly height: i0.Signal<number>;
|
|
307
|
+
/** Position from the front of the stack — `0` is the newest/frontmost toast. */
|
|
308
|
+
readonly index: i0.Signal<number>;
|
|
309
|
+
/** Combined height (px) of the toasts stacked in front of this one (for expanded layout). */
|
|
310
|
+
readonly offsetY: i0.Signal<number>;
|
|
311
|
+
/** `alert` (assertive) for high-priority toasts, otherwise `status`. */
|
|
312
|
+
readonly role: i0.Signal<"alert" | "status">;
|
|
313
|
+
/** `open` while visible, `closed` once dismissal begins — drives enter/leave animations. */
|
|
314
|
+
readonly dataState: i0.Signal<"closed" | "open">;
|
|
315
|
+
private readonly directions;
|
|
316
|
+
constructor();
|
|
317
|
+
close(): void;
|
|
318
|
+
protected onAnimationEnd(): void;
|
|
319
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RdxToastRoot, never>;
|
|
320
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<RdxToastRoot, "[rdxToastRoot]", ["rdxToastRoot"], { "toast": { "alias": "toast"; "required": true; "isSignal": true; }; "swipeDirection": { "alias": "swipeDirection"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
321
|
+
}
|
|
322
|
+
|
|
323
|
+
/**
|
|
324
|
+
* Wraps a toast's inner parts (title, description, actions) — the Angular counterpart of
|
|
325
|
+
* `<Toast.Content>`. Headless: it carries no styles; consumers apply `overflow: hidden` to clip
|
|
326
|
+
* taller toasts during the stack/expand animation. It mirrors the root's `data-state` so content
|
|
327
|
+
* can transition together with the root.
|
|
328
|
+
*/
|
|
329
|
+
declare class RdxToastContent {
|
|
330
|
+
protected readonly rootContext: _radix_ng_primitives_toast.RdxToastRootContext;
|
|
331
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RdxToastContent, never>;
|
|
332
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<RdxToastContent, "[rdxToastContent]", ["rdxToastContent"], {}, {}, never, never, true, never>;
|
|
333
|
+
}
|
|
334
|
+
|
|
335
|
+
/** Accessible title for a toast; registers so the root only points `aria-labelledby` at a real node. */
|
|
336
|
+
declare class RdxToastTitle {
|
|
337
|
+
protected readonly rootContext: _radix_ng_primitives_toast.RdxToastRootContext;
|
|
338
|
+
constructor();
|
|
339
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RdxToastTitle, never>;
|
|
340
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<RdxToastTitle, "[rdxToastTitle]", ["rdxToastTitle"], {}, {}, never, never, true, never>;
|
|
341
|
+
}
|
|
342
|
+
|
|
343
|
+
/** Supporting body text for a toast; registers so `aria-describedby` only targets a real node. */
|
|
344
|
+
declare class RdxToastDescription {
|
|
345
|
+
protected readonly rootContext: _radix_ng_primitives_toast.RdxToastRootContext;
|
|
346
|
+
constructor();
|
|
347
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RdxToastDescription, never>;
|
|
348
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<RdxToastDescription, "[rdxToastDescription]", ["rdxToastDescription"], {}, {}, never, never, true, never>;
|
|
349
|
+
}
|
|
350
|
+
|
|
351
|
+
/** Button that dismisses its toast. Put it on a native `<button>` for built-in semantics. */
|
|
352
|
+
declare class RdxToastClose {
|
|
353
|
+
protected readonly rootContext: _radix_ng_primitives_toast.RdxToastRootContext;
|
|
354
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RdxToastClose, never>;
|
|
355
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<RdxToastClose, "[rdxToastClose]", ["rdxToastClose"], {}, {}, never, never, true, never>;
|
|
356
|
+
}
|
|
357
|
+
|
|
358
|
+
/**
|
|
359
|
+
* An action button inside a toast (e.g. "Undo"). Unlike {@link RdxToastClose} it does not dismiss
|
|
360
|
+
* on its own — wire your handler with `(click)` and call `close()` from the exposed context when
|
|
361
|
+
* the action should also close the toast.
|
|
362
|
+
*/
|
|
363
|
+
declare class RdxToastAction {
|
|
364
|
+
/** The toast root context, so handlers can read the toast or dismiss it after acting. */
|
|
365
|
+
readonly rootContext: _radix_ng_primitives_toast.RdxToastRootContext;
|
|
366
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RdxToastAction, never>;
|
|
367
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<RdxToastAction, "[rdxToastAction]", ["rdxToastAction"], {}, {}, never, never, true, never>;
|
|
368
|
+
}
|
|
369
|
+
|
|
370
|
+
declare const toastImports: (typeof RdxToastPortal)[];
|
|
371
|
+
declare class RdxToastModule {
|
|
372
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RdxToastModule, never>;
|
|
373
|
+
static ɵmod: i0.ɵɵNgModuleDeclaration<RdxToastModule, never, [typeof RdxToastProvider, typeof RdxToastPortal, typeof RdxToastViewport, typeof RdxToastPositioner, typeof RdxToastRoot, typeof RdxToastContent, typeof RdxToastTitle, typeof RdxToastDescription, typeof RdxToastClose, typeof RdxToastAction], [typeof RdxToastProvider, typeof RdxToastPortal, typeof RdxToastViewport, typeof RdxToastPositioner, typeof RdxToastRoot, typeof RdxToastContent, typeof RdxToastTitle, typeof RdxToastDescription, typeof RdxToastClose, typeof RdxToastAction]>;
|
|
374
|
+
static ɵinj: i0.ɵɵInjectorDeclaration<RdxToastModule>;
|
|
375
|
+
}
|
|
376
|
+
|
|
377
|
+
export { RdxToastAction, RdxToastClose, RdxToastContent, RdxToastDescription, RdxToastManager, RdxToastModule, RdxToastPortal, RdxToastPositioner, RdxToastProvider, RdxToastRoot, RdxToastTitle, RdxToastViewport, injectRdxToastRootContext, provideRdxToastManager, provideRdxToastRootContext, toastImports, useToastSwipe };
|
|
378
|
+
export type { RdxToastActionProps, RdxToastAddOptions, RdxToastObject, RdxToastPositionerProps, RdxToastPriority, RdxToastPromiseOptions, RdxToastRootContext, RdxToastSwipeConfig, RdxToastSwipeDirection };
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import * as _angular_core from '@angular/core';
|
|
2
2
|
import { Signal } from '@angular/core';
|
|
3
|
+
import * as _radix_ng_primitives_core from '@radix-ng/primitives/core';
|
|
3
4
|
import { DataOrientation, BooleanInput } from '@radix-ng/primitives/core';
|
|
4
5
|
import * as i1 from '@radix-ng/primitives/roving-focus';
|
|
5
6
|
import { Direction } from '@radix-ng/primitives/roving-focus';
|
|
@@ -20,7 +21,7 @@ interface RdxToggleGroupContext {
|
|
|
20
21
|
/** Toggle the pressed state of `value` within the group. */
|
|
21
22
|
toggle(value: string): void;
|
|
22
23
|
}
|
|
23
|
-
declare const injectToggleGroupContext:
|
|
24
|
+
declare const injectToggleGroupContext: _radix_ng_primitives_core.InjectContext<RdxToggleGroupContext>;
|
|
24
25
|
declare const provideToggleGroupContext: (useFactory: () => RdxToggleGroupContext) => _angular_core.Provider;
|
|
25
26
|
|
|
26
27
|
/** Builds the shared context a {@link RdxToggle} reads when it belongs to this group. */
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import * as _angular_core from '@angular/core';
|
|
2
2
|
import { Signal } from '@angular/core';
|
|
3
3
|
import * as i1 from '@radix-ng/primitives/separator';
|
|
4
|
+
import * as _radix_ng_primitives_core from '@radix-ng/primitives/core';
|
|
4
5
|
import { DataOrientation, BooleanInput } from '@radix-ng/primitives/core';
|
|
5
6
|
import * as i1$1 from '@radix-ng/primitives/roving-focus';
|
|
6
7
|
import { Direction } from '@radix-ng/primitives/roving-focus';
|
|
@@ -160,13 +161,13 @@ interface RdxToolbarRootContext {
|
|
|
160
161
|
/** Whether the whole toolbar is disabled. */
|
|
161
162
|
readonly disabled: Signal<boolean>;
|
|
162
163
|
}
|
|
163
|
-
declare const injectToolbarRootContext:
|
|
164
|
+
declare const injectToolbarRootContext: _radix_ng_primitives_core.InjectContext<RdxToolbarRootContext>;
|
|
164
165
|
declare const provideToolbarRootContext: (useFactory: () => RdxToolbarRootContext) => _angular_core.Provider;
|
|
165
166
|
interface RdxToolbarGroupContext {
|
|
166
167
|
/** Whether the group (and therefore its items) is disabled. */
|
|
167
168
|
readonly disabled: Signal<boolean>;
|
|
168
169
|
}
|
|
169
|
-
declare const injectToolbarGroupContext:
|
|
170
|
+
declare const injectToolbarGroupContext: _radix_ng_primitives_core.InjectContext<RdxToolbarGroupContext>;
|
|
170
171
|
declare const provideToolbarGroupContext: (useFactory: () => RdxToolbarGroupContext) => _angular_core.Provider;
|
|
171
172
|
|
|
172
173
|
declare const toolbarImports: (typeof RdxToolbarSeparator)[];
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import * as _angular_core from '@angular/core';
|
|
2
2
|
import { InjectionToken, Provider, Signal, ElementRef } from '@angular/core';
|
|
3
3
|
import * as i1 from '@radix-ng/primitives/presence';
|
|
4
|
+
import * as _radix_ng_primitives_core from '@radix-ng/primitives/core';
|
|
4
5
|
import { BooleanInput, NumberInput } from '@radix-ng/primitives/core';
|
|
5
6
|
import * as i1$1 from '@radix-ng/primitives/popper';
|
|
6
7
|
import { RdxPopperContentWrapper, RdxPopperAnchorElement } from '@radix-ng/primitives/popper';
|
|
@@ -84,7 +85,7 @@ interface RdxTooltipContext {
|
|
|
84
85
|
} | undefined) => void;
|
|
85
86
|
setDelays: (delay: number | undefined, closeDelay: number | undefined) => void;
|
|
86
87
|
}
|
|
87
|
-
declare const injectRdxTooltipContext:
|
|
88
|
+
declare const injectRdxTooltipContext: _radix_ng_primitives_core.InjectContext<RdxTooltipContext>;
|
|
88
89
|
declare const provideRdxTooltipContext: (useFactory: () => RdxTooltipContext) => _angular_core.Provider;
|
|
89
90
|
declare class RdxTooltip {
|
|
90
91
|
private readonly defaultConfig;
|
|
@@ -309,7 +310,7 @@ interface RdxTooltipProviderContext {
|
|
|
309
310
|
/** Notifies the group that a tooltip has closed. */
|
|
310
311
|
onClose: () => void;
|
|
311
312
|
}
|
|
312
|
-
declare const injectRdxTooltipProviderContext:
|
|
313
|
+
declare const injectRdxTooltipProviderContext: _radix_ng_primitives_core.InjectContext<RdxTooltipProviderContext>;
|
|
313
314
|
declare const provideRdxTooltipProviderContext: (useFactory: () => RdxTooltipProviderContext) => _angular_core.Provider;
|
|
314
315
|
/**
|
|
315
316
|
* Shares delay configuration and an instant-open window across a group of tooltips.
|