@radix-ng/primitives 1.0.0-beta.1 → 1.0.0-beta.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (107) hide show
  1. package/LICENSE +1 -1
  2. package/README.md +76 -6
  3. package/fesm2022/radix-ng-primitives-accordion.mjs +2 -2
  4. package/fesm2022/radix-ng-primitives-accordion.mjs.map +1 -1
  5. package/fesm2022/radix-ng-primitives-alert-dialog.mjs +30 -24
  6. package/fesm2022/radix-ng-primitives-alert-dialog.mjs.map +1 -1
  7. package/fesm2022/radix-ng-primitives-autocomplete.mjs +1786 -0
  8. package/fesm2022/radix-ng-primitives-autocomplete.mjs.map +1 -0
  9. package/fesm2022/radix-ng-primitives-calendar.mjs +14 -1
  10. package/fesm2022/radix-ng-primitives-calendar.mjs.map +1 -1
  11. package/fesm2022/radix-ng-primitives-checkbox.mjs +2 -2
  12. package/fesm2022/radix-ng-primitives-checkbox.mjs.map +1 -1
  13. package/fesm2022/radix-ng-primitives-collapsible.mjs +1 -1
  14. package/fesm2022/radix-ng-primitives-collapsible.mjs.map +1 -1
  15. package/fesm2022/radix-ng-primitives-combobox.mjs +1983 -0
  16. package/fesm2022/radix-ng-primitives-combobox.mjs.map +1 -0
  17. package/fesm2022/radix-ng-primitives-context-menu.mjs +1 -1
  18. package/fesm2022/radix-ng-primitives-context-menu.mjs.map +1 -1
  19. package/fesm2022/radix-ng-primitives-core.mjs +480 -469
  20. package/fesm2022/radix-ng-primitives-core.mjs.map +1 -1
  21. package/fesm2022/radix-ng-primitives-cropper.mjs +1 -1
  22. package/fesm2022/radix-ng-primitives-cropper.mjs.map +1 -1
  23. package/fesm2022/radix-ng-primitives-date-field.mjs +11 -0
  24. package/fesm2022/radix-ng-primitives-date-field.mjs.map +1 -1
  25. package/fesm2022/radix-ng-primitives-dialog.mjs +44 -46
  26. package/fesm2022/radix-ng-primitives-dialog.mjs.map +1 -1
  27. package/fesm2022/radix-ng-primitives-drawer.mjs +154 -64
  28. package/fesm2022/radix-ng-primitives-drawer.mjs.map +1 -1
  29. package/fesm2022/radix-ng-primitives-editable.mjs +1 -1
  30. package/fesm2022/radix-ng-primitives-editable.mjs.map +1 -1
  31. package/fesm2022/radix-ng-primitives-field.mjs +86 -6
  32. package/fesm2022/radix-ng-primitives-field.mjs.map +1 -1
  33. package/fesm2022/radix-ng-primitives-fieldset.mjs +1 -1
  34. package/fesm2022/radix-ng-primitives-fieldset.mjs.map +1 -1
  35. package/fesm2022/radix-ng-primitives-focus-scope.mjs +1 -1
  36. package/fesm2022/radix-ng-primitives-focus-scope.mjs.map +1 -1
  37. package/fesm2022/radix-ng-primitives-form.mjs +207 -0
  38. package/fesm2022/radix-ng-primitives-form.mjs.map +1 -0
  39. package/fesm2022/radix-ng-primitives-input.mjs +85 -4
  40. package/fesm2022/radix-ng-primitives-input.mjs.map +1 -1
  41. package/fesm2022/radix-ng-primitives-menu.mjs +44 -24
  42. package/fesm2022/radix-ng-primitives-menu.mjs.map +1 -1
  43. package/fesm2022/radix-ng-primitives-menubar.mjs +1 -1
  44. package/fesm2022/radix-ng-primitives-menubar.mjs.map +1 -1
  45. package/fesm2022/radix-ng-primitives-meter.mjs +1 -1
  46. package/fesm2022/radix-ng-primitives-meter.mjs.map +1 -1
  47. package/fesm2022/radix-ng-primitives-navigation-menu.mjs +39 -55
  48. package/fesm2022/radix-ng-primitives-navigation-menu.mjs.map +1 -1
  49. package/fesm2022/radix-ng-primitives-number-field.mjs +2 -2
  50. package/fesm2022/radix-ng-primitives-number-field.mjs.map +1 -1
  51. package/fesm2022/radix-ng-primitives-popover.mjs +36 -51
  52. package/fesm2022/radix-ng-primitives-popover.mjs.map +1 -1
  53. package/fesm2022/radix-ng-primitives-popper.mjs +12 -6
  54. package/fesm2022/radix-ng-primitives-popper.mjs.map +1 -1
  55. package/fesm2022/radix-ng-primitives-portal.mjs +107 -17
  56. package/fesm2022/radix-ng-primitives-portal.mjs.map +1 -1
  57. package/fesm2022/radix-ng-primitives-presence.mjs +262 -79
  58. package/fesm2022/radix-ng-primitives-presence.mjs.map +1 -1
  59. package/fesm2022/radix-ng-primitives-preview-card.mjs +37 -51
  60. package/fesm2022/radix-ng-primitives-preview-card.mjs.map +1 -1
  61. package/fesm2022/radix-ng-primitives-progress.mjs +1 -1
  62. package/fesm2022/radix-ng-primitives-progress.mjs.map +1 -1
  63. package/fesm2022/radix-ng-primitives-roving-focus.mjs +1 -1
  64. package/fesm2022/radix-ng-primitives-roving-focus.mjs.map +1 -1
  65. package/fesm2022/radix-ng-primitives-scroll-area.mjs +3 -3
  66. package/fesm2022/radix-ng-primitives-scroll-area.mjs.map +1 -1
  67. package/fesm2022/radix-ng-primitives-select.mjs +469 -258
  68. package/fesm2022/radix-ng-primitives-select.mjs.map +1 -1
  69. package/fesm2022/radix-ng-primitives-slider.mjs +1 -1
  70. package/fesm2022/radix-ng-primitives-slider.mjs.map +1 -1
  71. package/fesm2022/radix-ng-primitives-switch.mjs +3 -2
  72. package/fesm2022/radix-ng-primitives-switch.mjs.map +1 -1
  73. package/fesm2022/radix-ng-primitives-tabs.mjs +1 -1
  74. package/fesm2022/radix-ng-primitives-tabs.mjs.map +1 -1
  75. package/fesm2022/radix-ng-primitives-time-field.mjs +27 -3
  76. package/fesm2022/radix-ng-primitives-time-field.mjs.map +1 -1
  77. package/fesm2022/radix-ng-primitives-toast.mjs +1 -1
  78. package/fesm2022/radix-ng-primitives-toast.mjs.map +1 -1
  79. package/fesm2022/radix-ng-primitives-toggle-group.mjs +1 -1
  80. package/fesm2022/radix-ng-primitives-toggle-group.mjs.map +1 -1
  81. package/fesm2022/radix-ng-primitives-toolbar.mjs +2 -2
  82. package/fesm2022/radix-ng-primitives-toolbar.mjs.map +1 -1
  83. package/fesm2022/radix-ng-primitives-tooltip.mjs +39 -42
  84. package/fesm2022/radix-ng-primitives-tooltip.mjs.map +1 -1
  85. package/package.json +13 -1
  86. package/schematics/ng-add/index.js +57 -0
  87. package/schematics/ng-add/index.js.map +1 -1
  88. package/schematics/ng-add/schema.d.ts +1 -0
  89. package/schematics/ng-add/schema.json +6 -0
  90. package/types/radix-ng-primitives-alert-dialog.d.ts +17 -11
  91. package/types/radix-ng-primitives-autocomplete.d.ts +596 -0
  92. package/types/radix-ng-primitives-combobox.d.ts +1310 -0
  93. package/types/radix-ng-primitives-core.d.ts +148 -56
  94. package/types/radix-ng-primitives-dialog.d.ts +32 -25
  95. package/types/radix-ng-primitives-drawer.d.ts +49 -22
  96. package/types/radix-ng-primitives-field.d.ts +71 -2
  97. package/types/radix-ng-primitives-form.d.ts +124 -0
  98. package/types/radix-ng-primitives-input.d.ts +75 -5
  99. package/types/radix-ng-primitives-menu.d.ts +19 -10
  100. package/types/radix-ng-primitives-navigation-menu.d.ts +24 -26
  101. package/types/radix-ng-primitives-popover.d.ts +23 -23
  102. package/types/radix-ng-primitives-popper.d.ts +7 -1
  103. package/types/radix-ng-primitives-portal.d.ts +53 -8
  104. package/types/radix-ng-primitives-presence.d.ts +98 -17
  105. package/types/radix-ng-primitives-preview-card.d.ts +24 -23
  106. package/types/radix-ng-primitives-select.d.ts +294 -137
  107. package/types/radix-ng-primitives-tooltip.d.ts +26 -19
@@ -1,22 +1,35 @@
1
1
  import * as _angular_core from '@angular/core';
2
2
  import { Signal, ElementRef } from '@angular/core';
3
- import * as i1 from '@radix-ng/primitives/presence';
3
+ import * as i1 from '@radix-ng/primitives/portal';
4
4
  import * as _radix_ng_primitives_core from '@radix-ng/primitives/core';
5
5
  import { RdxTransitionStatus, BooleanInput, NumberInput } from '@radix-ng/primitives/core';
6
6
  import * as i1$1 from '@radix-ng/primitives/popper';
7
7
  import { RdxPopperContentWrapper, RdxPopperAnchorElement } from '@radix-ng/primitives/popper';
8
8
  import * as _radix_ng_primitives_popover from '@radix-ng/primitives/popover';
9
- import * as i1$2 from '@radix-ng/primitives/portal';
10
- import { RdxPortalContainer } from '@radix-ng/primitives/portal';
11
9
  import * as i2 from '@radix-ng/primitives/dismissable-layer';
12
10
  import * as i3 from '@radix-ng/primitives/focus-scope';
13
11
 
14
12
  /**
15
- * Mounts the portal while the popover is open and waits for CSS exit keyframes before unmounting.
13
+ * Structural directive that teleports the popover content into a container (default `document.body`)
14
+ * while the popover is open, and keeps it mounted until any CSS exit `@keyframes` finishes.
15
+ *
16
+ * Apply it with the `*` microsyntax on the positioner — `<div *rdxPopoverPortal rdxPopoverPositioner>`
17
+ * — or as an explicit `<ng-template rdxPopoverPortal>`. For a custom container use the explicit form
18
+ * with `[container]`.
19
+ */
20
+ declare class RdxPopoverPortal {
21
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxPopoverPortal, never>;
22
+ static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxPopoverPortal, "ng-template[rdxPopoverPortal]", ["rdxPopoverPortal"], {}, {}, never, never, true, [{ directive: typeof i1.RdxPortalPresence; inputs: { "container": "container"; }; outputs: {}; }]>;
23
+ }
24
+ /**
25
+ * Dev-mode guard: `rdxPopoverPortal` used to be an attribute directive on a `<div>`. It is now
26
+ * structural, so the old `<div rdxPopoverPortal>` markup would silently stop portaling — fail loudly
27
+ * instead.
16
28
  */
17
- declare class RdxPopoverPortalPresence {
18
- static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxPopoverPortalPresence, never>;
19
- static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxPopoverPortalPresence, "ng-template[rdxPopoverPortalPresence]", never, {}, {}, never, never, true, [{ directive: typeof i1.RdxPresenceDirective; inputs: {}; outputs: {}; }]>;
29
+ declare class RdxPopoverPortalMisuseGuard {
30
+ constructor();
31
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxPopoverPortalMisuseGuard, never>;
32
+ static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxPopoverPortalMisuseGuard, "[rdxPopoverPortal]:not(ng-template)", never, {}, {}, never, never, true, never>;
20
33
  }
21
34
 
22
35
  declare class RdxPopoverHandle<Payload = unknown> {
@@ -202,19 +215,6 @@ declare class RdxPopoverTrigger {
202
215
  static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxPopoverTrigger, "button[rdxPopoverTrigger]", never, { "handle": { "alias": "handle"; "required": false; "isSignal": true; }; "payload": { "alias": "payload"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "openOnHover": { "alias": "openOnHover"; "required": false; "isSignal": true; }; "delay": { "alias": "delay"; "required": false; "isSignal": true; }; "closeDelay": { "alias": "closeDelay"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1$1.RdxPopperAnchor; inputs: {}; outputs: {}; }]>;
203
216
  }
204
217
 
205
- /**
206
- * Moves the popover to a different part of the DOM.
207
- */
208
- declare class RdxPopoverPortal {
209
- protected readonly rootContext: _radix_ng_primitives_popover.RdxPopoverRootContext;
210
- /**
211
- * Optional container to portal the content into. Defaults to `document.body`.
212
- */
213
- readonly container: _angular_core.InputSignal<RdxPortalContainer | undefined>;
214
- static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxPopoverPortal, never>;
215
- static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxPopoverPortal, "[rdxPopoverPortal]", never, { "container": { "alias": "container"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1$2.RdxPortal; inputs: { "container": "container"; }; outputs: {}; }]>;
216
- }
217
-
218
218
  /**
219
219
  * An optional backdrop rendered behind the popup.
220
220
  */
@@ -406,12 +406,12 @@ declare class RdxPopoverViewport {
406
406
  static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxPopoverViewport, "[rdxPopoverViewport]", never, {}, {}, never, never, true, never>;
407
407
  }
408
408
 
409
- declare const popoverImports: (typeof RdxPopoverPortalPresence)[];
409
+ declare const popoverImports: (typeof RdxPopoverPortal)[];
410
410
  declare class RdxPopoverModule {
411
411
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxPopoverModule, never>;
412
- static ɵmod: _angular_core.ɵɵNgModuleDeclaration<RdxPopoverModule, never, [typeof RdxPopoverRoot, typeof RdxPopoverTrigger, typeof RdxPopoverPortalPresence, typeof RdxPopoverPortal, typeof RdxPopoverBackdrop, typeof RdxPopoverPositioner, typeof RdxPopoverPopup, typeof RdxPopoverArrow, typeof RdxPopoverTitle, typeof RdxPopoverDescription, typeof RdxPopoverClose, typeof RdxPopoverViewport], [typeof RdxPopoverRoot, typeof RdxPopoverTrigger, typeof RdxPopoverPortalPresence, typeof RdxPopoverPortal, typeof RdxPopoverBackdrop, typeof RdxPopoverPositioner, typeof RdxPopoverPopup, typeof RdxPopoverArrow, typeof RdxPopoverTitle, typeof RdxPopoverDescription, typeof RdxPopoverClose, typeof RdxPopoverViewport]>;
412
+ static ɵmod: _angular_core.ɵɵNgModuleDeclaration<RdxPopoverModule, never, [typeof RdxPopoverRoot, typeof RdxPopoverTrigger, typeof RdxPopoverPortal, typeof RdxPopoverPortalMisuseGuard, typeof RdxPopoverBackdrop, typeof RdxPopoverPositioner, typeof RdxPopoverPopup, typeof RdxPopoverArrow, typeof RdxPopoverTitle, typeof RdxPopoverDescription, typeof RdxPopoverClose, typeof RdxPopoverViewport], [typeof RdxPopoverRoot, typeof RdxPopoverTrigger, typeof RdxPopoverPortal, typeof RdxPopoverPortalMisuseGuard, typeof RdxPopoverBackdrop, typeof RdxPopoverPositioner, typeof RdxPopoverPopup, typeof RdxPopoverArrow, typeof RdxPopoverTitle, typeof RdxPopoverDescription, typeof RdxPopoverClose, typeof RdxPopoverViewport]>;
413
413
  static ɵinj: _angular_core.ɵɵInjectorDeclaration<RdxPopoverModule>;
414
414
  }
415
415
 
416
- export { RdxPopoverArrow, RdxPopoverBackdrop, RdxPopoverClose, RdxPopoverDescription, RdxPopoverHandle, RdxPopoverModule, RdxPopoverPopup, RdxPopoverPortal, RdxPopoverPortalPresence, RdxPopoverPositioner, RdxPopoverRoot, RdxPopoverTitle, RdxPopoverTrigger, RdxPopoverViewport, createRdxPopoverHandle, injectRdxPopoverRootContext, popoverImports, provideRdxPopoverRootContext };
416
+ export { RdxPopoverArrow, RdxPopoverBackdrop, RdxPopoverClose, RdxPopoverDescription, RdxPopoverHandle, RdxPopoverModule, RdxPopoverPopup, RdxPopoverPortal, RdxPopoverPortalMisuseGuard, RdxPopoverPositioner, RdxPopoverRoot, RdxPopoverTitle, RdxPopoverTrigger, RdxPopoverViewport, createRdxPopoverHandle, injectRdxPopoverRootContext, popoverImports, provideRdxPopoverRootContext };
417
417
  export type { RdxPopoverModal, RdxPopoverOpenChange, RdxPopoverOpenChangeReason, RdxPopoverRootContext, RdxPopoverTransitionStatus };
@@ -18,6 +18,12 @@ declare class RdxPopper {
18
18
  }
19
19
 
20
20
  declare class RdxPopperContent {
21
+ /**
22
+ * Optional so the directive can be composed onto a content part that is also used outside Popper
23
+ * positioning (e.g. select's `item-aligned` mode, where there is no `RdxPopperContentWrapper`
24
+ * ancestor). With no wrapper the `data-side` / `data-align` bindings and the animation guard
25
+ * simply no-op.
26
+ */
21
27
  protected readonly popperContentWrapper: {
22
28
  placedSide: _angular_core.Signal<"top" | "right" | "bottom" | "left" | undefined>;
23
29
  placedAlign: _angular_core.Signal<"start" | "center" | "end" | undefined>;
@@ -26,7 +32,7 @@ declare class RdxPopperContent {
26
32
  shouldHideArrow: _angular_core.Signal<boolean>;
27
33
  isPositioned: _angular_core.Signal<boolean>;
28
34
  anchorHidden: _angular_core.Signal<boolean>;
29
- };
35
+ } | null;
30
36
  /**
31
37
  * if the PopperContent hasn't been placed yet (not all measurements done)
32
38
  * we prevent animations so that users's animation don't kick in too early referring wrong sides
@@ -1,11 +1,18 @@
1
- import * as _angular_core from '@angular/core';
1
+ import * as i0 from '@angular/core';
2
2
  import { ElementRef } from '@angular/core';
3
3
 
4
4
  /**
5
- * A target container for the portal. Accepts an `ElementRef`, a native element, or a CSS selector
5
+ * A target container for a portal. Accepts an `ElementRef`, a native element, or a CSS selector
6
6
  * resolved against the document.
7
7
  */
8
8
  type RdxPortalContainer = ElementRef<HTMLElement> | HTMLElement | string;
9
+ /**
10
+ * Resolve a {@link RdxPortalContainer} to a concrete element. Returns `null` when nothing usable is
11
+ * provided (a missing container, a selector matching nothing, or a non-element value), so callers can
12
+ * fall back to `document.body`. Shared by `RdxPortal` and `RdxPortalPresence`.
13
+ */
14
+ declare function resolvePortalContainer(container: RdxPortalContainer | undefined, document: Document | null): HTMLElement | null;
15
+
9
16
  declare class RdxPortal {
10
17
  private readonly elementRef;
11
18
  private readonly platformId;
@@ -15,16 +22,54 @@ declare class RdxPortal {
15
22
  * Specify a container to portal the content into. Can be an `ElementRef`, a native element, or a
16
23
  * CSS selector. Defaults to `document.body` when not set (or when a selector matches nothing).
17
24
  */
18
- readonly container: _angular_core.InputSignal<RdxPortalContainer | undefined>;
25
+ readonly container: i0.InputSignal<RdxPortalContainer | undefined>;
26
+ private readonly _computedContainer;
27
+ readonly computedContainer: i0.Signal<RdxPortalContainer | undefined>;
28
+ private readonly elementContainer;
29
+ constructor();
30
+ setContainer(container: RdxPortalContainer): void;
31
+ static ɵfac: i0.ɵɵFactoryDeclaration<RdxPortal, never>;
32
+ static ɵdir: i0.ɵɵDirectiveDeclaration<RdxPortal, "[rdxPortal]", ["rdxPortal"], { "container": { "alias": "container"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
33
+ }
34
+
35
+ /**
36
+ * Structural directive merging what `RdxPortal` + `RdxPresenceDirective` did as a pair: it mounts its
37
+ * template while `present()` (from {@link RDX_PRESENCE_CONTEXT}) is `true`, **relocates every root
38
+ * node into a portal container** (default `document.body`), and on close runs the presence exit state
39
+ * machine — keeping the content mounted until every running CSS exit `@keyframes` on any root node
40
+ * finishes.
41
+ *
42
+ * Unlike `RdxPortal`, it adds **no wrapper element**: the template's root nodes become direct children
43
+ * of the container. Use the `*` microsyntax for the common single-root case
44
+ * (`<div *rdxXxxPortal rdxXxxPositioner>`) or the explicit `<ng-template rdxXxxPortal>` form for a
45
+ * custom container or multiple root nodes (e.g. a dialog backdrop + popup).
46
+ *
47
+ * SSR: on the server the view renders in place and is never relocated; after hydration the relocation
48
+ * effect moves the nodes into the container (same browser-guarded split `RdxPortal` uses).
49
+ */
50
+ declare class RdxPortalPresence {
51
+ private readonly viewContainerRef;
52
+ private readonly templateRef;
53
+ private readonly document;
54
+ private readonly isBrowser;
55
+ /**
56
+ * Container to portal the content into. Can be an `ElementRef`, a native element, or a CSS
57
+ * selector. Defaults to `document.body` (or when a selector matches nothing).
58
+ */
59
+ readonly container: i0.InputSignal<RdxPortalContainer | undefined>;
19
60
  private readonly _computedContainer;
20
- readonly computedContainer: _angular_core.Signal<RdxPortalContainer | undefined>;
21
61
  private readonly elementContainer;
62
+ /** The live view's root nodes, exposed as a signal so the relocation effect re-runs on (re)mount. */
63
+ private readonly mountedNodes;
64
+ private viewRef;
22
65
  constructor();
66
+ /** Imperatively override the portal container (parity with `RdxPortal.setContainer`). */
23
67
  setContainer(container: RdxPortalContainer): void;
24
- private resolveContainer;
25
- static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxPortal, never>;
26
- static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxPortal, "[rdxPortal]", ["rdxPortal"], { "container": { "alias": "container"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
68
+ private mountView;
69
+ private destroyView;
70
+ static ɵfac: i0.ɵɵFactoryDeclaration<RdxPortalPresence, never>;
71
+ static ɵdir: i0.ɵɵDirectiveDeclaration<RdxPortalPresence, never, never, { "container": { "alias": "container"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
27
72
  }
28
73
 
29
- export { RdxPortal };
74
+ export { RdxPortal, RdxPortalPresence, resolvePortalContainer };
30
75
  export type { RdxPortalContainer };
@@ -1,5 +1,96 @@
1
1
  import * as i0 from '@angular/core';
2
- import { InjectionToken, Signal, Provider } from '@angular/core';
2
+ import { Signal, Injector, InjectionToken, Provider } from '@angular/core';
3
+
4
+ /**
5
+ * Operations the host directive supplies to {@link PresenceMachine}. The machine owns *when* the
6
+ * view is mounted/unmounted (the state transitions and exit-animation suspension); the host owns
7
+ * *how* — `RdxPresenceDirective` simply creates the embedded view in place, while `RdxPortalPresence`
8
+ * additionally relocates its root nodes into a portal container.
9
+ */
10
+ interface PresenceMachineHost {
11
+ /** Reactive `present` flag driving the machine. */
12
+ readonly present: Signal<boolean>;
13
+ /** Whether we are running in a browser (animation/computed-style logic is skipped on the server). */
14
+ readonly isBrowser: boolean;
15
+ /** Injection context for the internal `effect` / `afterNextRender`. */
16
+ readonly injector: Injector;
17
+ /**
18
+ * Create (and, for the portal, relocate) the view. Returns the root `HTMLElement` nodes whose
19
+ * exit animations should suspend the unmount. For a single-root template this is one element —
20
+ * identical to the previous single-node behavior; dialog-shaped templates return backdrop + popup.
21
+ */
22
+ mountView(): HTMLElement[];
23
+ /** Destroy the view (Angular removes the nodes from wherever they currently live). */
24
+ destroyView(): void;
25
+ }
26
+ /**
27
+ * Reusable presence state machine extracted from `RdxPresenceDirective`. It keeps content mounted
28
+ * while a CSS exit animation runs anywhere inside the template — a `@keyframes` **or** a
29
+ * `transition` (`data-ending-style`), on a watched root **or any of its descendants** — and unmounts
30
+ * only once every exit animation started by the close has finished. With no exit animation it
31
+ * unmounts immediately. For a single watched node and a root-level keyframe this reduces exactly to
32
+ * the original `RdxPresenceDirective` behavior.
33
+ *
34
+ * Detection (ADR 0011) uses the Web Animations API: when `present()` flips `false` we snapshot a
35
+ * close timestamp, and after the next render collect `node.getAnimations({ subtree: true })`, keeping
36
+ * only animations that are running/pending and were *started by* the close (`startTime` null or
37
+ * `>= closeTimestamp`). The view stays mounted until all of their `finished` promises settle, bounded
38
+ * by a duration-based safety net. The legacy root-level computed-`animationName` check and the
39
+ * `animationstart`/`animationend` listeners are kept as an additional acceptor — they drive the
40
+ * zoneless jsdom suites (where `getAnimations` is absent) and cost nothing in a real browser.
41
+ */
42
+ declare class PresenceMachine {
43
+ private readonly host;
44
+ private state;
45
+ private prevPresent;
46
+ /** Root nodes currently watched for exit animations (set on mount). */
47
+ private nodes;
48
+ /** Last-seen computed `animationName` per node, used to detect a *fresh* root exit animation. */
49
+ private readonly prevAnimationNames;
50
+ /** Root nodes whose exit animation the event path is still waiting on (jsdom / root-keyframe). */
51
+ private readonly pendingExits;
52
+ private removeListeners;
53
+ /**
54
+ * Timeline time captured the moment `present` flipped `false`, on the same clock as
55
+ * `Animation.startTime`. Animations started at or after it are the exit animations.
56
+ */
57
+ private closeTimestamp;
58
+ /**
59
+ * Monotonic counter bumped on every mount/unmount transition. A suspended exit captures it and
60
+ * its `finished`/safety-net resolution is ignored if it changed in the meantime (re-open or a
61
+ * second close), so a stale promise can never tear down a freshly-reopened view.
62
+ */
63
+ private exitVersion;
64
+ /** True while a WAAPI `finished`-promise wait owns completion; gates the event path off. */
65
+ private waapiPending;
66
+ private safetyTimer;
67
+ constructor(host: PresenceMachineHost);
68
+ /** Tear the machine down — destroys the view. Call from the host's `DestroyRef`. */
69
+ dispose(): void;
70
+ /** Decides whether to suspend the unmount for an exit animation (port of Radix' logic). */
71
+ private evaluateExit;
72
+ /**
73
+ * Running/pending animations across the watched subtrees that were *started by* the close.
74
+ * Pre-existing animations (an infinite spinner, a settled enter) have an earlier `startTime`
75
+ * and must not delay the unmount.
76
+ */
77
+ private collectExitAnimations;
78
+ /**
79
+ * Force-completes the exit shortly after the longest declared duration, in case a `finished`
80
+ * promise never settles. Measures the animated targets (falling back to the roots).
81
+ */
82
+ private armSafetyNet;
83
+ /** Settle a WAAPI/safety-net exit wait, ignoring it if a newer mount/unmount superseded it. */
84
+ private finishExit;
85
+ private clearSafetyNet;
86
+ private send;
87
+ private mount;
88
+ private unmount;
89
+ private addAnimationListeners;
90
+ private getAnimationName;
91
+ /** Current timeline time on the same clock as `Animation.startTime` (ms), or 0 if unavailable. */
92
+ private now;
93
+ }
3
94
 
4
95
  /**
5
96
  * Context interface for RdxPresence directive
@@ -25,31 +116,21 @@ declare function provideRdxPresenceContext(contextFactory: () => RdxPresenceCont
25
116
  * Unlike a plain `*ngIf`, it keeps the content mounted while a CSS exit animation
26
117
  * (`@keyframes` applied for the closed state) is running, and unmounts it only once that
27
118
  * animation finishes. If the content has no exit animation, it unmounts immediately.
119
+ *
120
+ * The mount/unmount-with-exit logic lives in the shared {@link PresenceMachine}; this directive just
121
+ * creates the embedded view in place (`RdxPortalPresence` reuses the same machine and additionally
122
+ * relocates the view into a portal container).
28
123
  */
29
124
  declare class RdxPresenceDirective {
30
- private readonly context;
31
125
  private readonly viewContainerRef;
32
126
  private readonly templateRef;
33
- private readonly injector;
34
- private readonly isBrowser;
35
127
  private viewRef;
36
- private node;
37
- private removeListeners;
38
- private state;
39
- private prevPresent;
40
- private prevAnimationName;
41
128
  constructor();
42
- /** Decides whether to suspend the unmount for an exit animation (port of Radix' logic). */
43
- private evaluateExit;
44
- private send;
45
129
  private mountView;
46
130
  private destroyView;
47
- private addAnimationListeners;
48
- private getComputedStyles;
49
- private getAnimationName;
50
131
  static ɵfac: i0.ɵɵFactoryDeclaration<RdxPresenceDirective, never>;
51
132
  static ɵdir: i0.ɵɵDirectiveDeclaration<RdxPresenceDirective, never, never, {}, {}, never, never, true, never>;
52
133
  }
53
134
 
54
- export { RDX_PRESENCE_CONTEXT, RdxPresenceDirective, provideRdxPresenceContext };
55
- export type { RdxPresenceContext };
135
+ export { PresenceMachine, RDX_PRESENCE_CONTEXT, RdxPresenceDirective, provideRdxPresenceContext };
136
+ export type { PresenceMachineHost, RdxPresenceContext };
@@ -1,21 +1,35 @@
1
1
  import * as _angular_core from '@angular/core';
2
2
  import { Signal, ElementRef } from '@angular/core';
3
- import * as i1 from '@radix-ng/primitives/presence';
3
+ import * as i1 from '@radix-ng/primitives/portal';
4
4
  import * as _radix_ng_primitives_core from '@radix-ng/primitives/core';
5
5
  import { BooleanInput, NumberInput } from '@radix-ng/primitives/core';
6
6
  import * as i1$1 from '@radix-ng/primitives/popper';
7
7
  import { RdxPopperContentWrapper, RdxPopperAnchorElement } from '@radix-ng/primitives/popper';
8
8
  import * as _radix_ng_primitives_preview_card from '@radix-ng/primitives/preview-card';
9
- import * as i1$2 from '@radix-ng/primitives/portal';
10
- import { RdxPortalContainer } from '@radix-ng/primitives/portal';
11
9
  import * as i2 from '@radix-ng/primitives/dismissable-layer';
12
10
 
13
11
  /**
14
- * Mounts the portal while the preview-card is open and waits for CSS exit keyframes before unmounting.
12
+ * Structural directive that teleports the preview-card content into a container (default
13
+ * `document.body`) while the card is open, and keeps it mounted until any CSS exit `@keyframes`
14
+ * finishes.
15
+ *
16
+ * Apply it with the `*` microsyntax on the positioner —
17
+ * `<div *rdxPreviewCardPortal rdxPreviewCardPositioner>` — or as an explicit
18
+ * `<ng-template rdxPreviewCardPortal>`. For a custom container use the explicit form with `[container]`.
19
+ */
20
+ declare class RdxPreviewCardPortal {
21
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxPreviewCardPortal, never>;
22
+ static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxPreviewCardPortal, "ng-template[rdxPreviewCardPortal]", ["rdxPreviewCardPortal"], {}, {}, never, never, true, [{ directive: typeof i1.RdxPortalPresence; inputs: { "container": "container"; }; outputs: {}; }]>;
23
+ }
24
+ /**
25
+ * Dev-mode guard: `rdxPreviewCardPortal` used to be an attribute directive on a `<div>`. It is now
26
+ * structural, so the old `<div rdxPreviewCardPortal>` markup would silently stop portaling — fail
27
+ * loudly instead.
15
28
  */
16
- declare class RdxPreviewCardPortalPresence {
17
- static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxPreviewCardPortalPresence, never>;
18
- static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxPreviewCardPortalPresence, "ng-template[rdxPreviewCardPortalPresence]", never, {}, {}, never, never, true, [{ directive: typeof i1.RdxPresenceDirective; inputs: {}; outputs: {}; }]>;
29
+ declare class RdxPreviewCardPortalMisuseGuard {
30
+ constructor();
31
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxPreviewCardPortalMisuseGuard, never>;
32
+ static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxPreviewCardPortalMisuseGuard, "[rdxPreviewCardPortal]:not(ng-template)", never, {}, {}, never, never, true, never>;
19
33
  }
20
34
 
21
35
  declare class RdxPreviewCardHandle<Payload = unknown> {
@@ -185,19 +199,6 @@ declare class RdxPreviewCardTrigger {
185
199
  static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxPreviewCardTrigger, "[rdxPreviewCardTrigger]", never, { "handle": { "alias": "handle"; "required": false; "isSignal": true; }; "payload": { "alias": "payload"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "delay": { "alias": "delay"; "required": false; "isSignal": true; }; "closeDelay": { "alias": "closeDelay"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1$1.RdxPopperAnchor; inputs: {}; outputs: {}; }]>;
186
200
  }
187
201
 
188
- /**
189
- * Moves the preview-card to a different part of the DOM.
190
- */
191
- declare class RdxPreviewCardPortal {
192
- protected readonly rootContext: _radix_ng_primitives_preview_card.RdxPreviewCardRootContext;
193
- /**
194
- * Optional container to portal the content into. Defaults to `document.body`.
195
- */
196
- readonly container: _angular_core.InputSignal<RdxPortalContainer | undefined>;
197
- static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxPreviewCardPortal, never>;
198
- static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxPreviewCardPortal, "[rdxPreviewCardPortal]", never, { "container": { "alias": "container"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1$2.RdxPortal; inputs: { "container": "container"; }; outputs: {}; }]>;
199
- }
200
-
201
202
  /**
202
203
  * An optional backdrop rendered behind the popup.
203
204
  */
@@ -348,12 +349,12 @@ declare class RdxPreviewCardViewport {
348
349
  static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxPreviewCardViewport, "[rdxPreviewCardViewport]", never, {}, {}, never, never, true, never>;
349
350
  }
350
351
 
351
- declare const previewCardImports: (typeof RdxPreviewCardPortalPresence)[];
352
+ declare const previewCardImports: (typeof RdxPreviewCardPortal)[];
352
353
  declare class RdxPreviewCardModule {
353
354
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxPreviewCardModule, never>;
354
- static ɵmod: _angular_core.ɵɵNgModuleDeclaration<RdxPreviewCardModule, never, [typeof RdxPreviewCardRoot, typeof RdxPreviewCardTrigger, typeof RdxPreviewCardPortalPresence, typeof RdxPreviewCardPortal, typeof RdxPreviewCardBackdrop, typeof RdxPreviewCardPositioner, typeof RdxPreviewCardPopup, typeof RdxPreviewCardArrow, typeof RdxPreviewCardViewport], [typeof RdxPreviewCardRoot, typeof RdxPreviewCardTrigger, typeof RdxPreviewCardPortalPresence, typeof RdxPreviewCardPortal, typeof RdxPreviewCardBackdrop, typeof RdxPreviewCardPositioner, typeof RdxPreviewCardPopup, typeof RdxPreviewCardArrow, typeof RdxPreviewCardViewport]>;
355
+ static ɵmod: _angular_core.ɵɵNgModuleDeclaration<RdxPreviewCardModule, never, [typeof RdxPreviewCardRoot, typeof RdxPreviewCardTrigger, typeof RdxPreviewCardPortal, typeof RdxPreviewCardPortalMisuseGuard, typeof RdxPreviewCardBackdrop, typeof RdxPreviewCardPositioner, typeof RdxPreviewCardPopup, typeof RdxPreviewCardArrow, typeof RdxPreviewCardViewport], [typeof RdxPreviewCardRoot, typeof RdxPreviewCardTrigger, typeof RdxPreviewCardPortal, typeof RdxPreviewCardPortalMisuseGuard, typeof RdxPreviewCardBackdrop, typeof RdxPreviewCardPositioner, typeof RdxPreviewCardPopup, typeof RdxPreviewCardArrow, typeof RdxPreviewCardViewport]>;
355
356
  static ɵinj: _angular_core.ɵɵInjectorDeclaration<RdxPreviewCardModule>;
356
357
  }
357
358
 
358
- export { RdxPreviewCardArrow, RdxPreviewCardBackdrop, RdxPreviewCardHandle, RdxPreviewCardModule, RdxPreviewCardPopup, RdxPreviewCardPortal, RdxPreviewCardPortalPresence, RdxPreviewCardPositioner, RdxPreviewCardRoot, RdxPreviewCardTrigger, RdxPreviewCardViewport, createRdxPreviewCardHandle, injectRdxPreviewCardRootContext, previewCardImports, provideRdxPreviewCardRootContext };
359
+ export { RdxPreviewCardArrow, RdxPreviewCardBackdrop, RdxPreviewCardHandle, RdxPreviewCardModule, RdxPreviewCardPopup, RdxPreviewCardPortal, RdxPreviewCardPortalMisuseGuard, RdxPreviewCardPositioner, RdxPreviewCardRoot, RdxPreviewCardTrigger, RdxPreviewCardViewport, createRdxPreviewCardHandle, injectRdxPreviewCardRootContext, previewCardImports, provideRdxPreviewCardRootContext };
359
360
  export type { RdxPreviewCardOpenChange, RdxPreviewCardOpenChangeReason, RdxPreviewCardRootContext, RdxPreviewCardTransitionStatus };