@radix-ng/primitives 0.51.0 → 1.0.0-beta.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.
Files changed (178) hide show
  1. package/fesm2022/radix-ng-primitives-accordion.mjs +105 -38
  2. package/fesm2022/radix-ng-primitives-accordion.mjs.map +1 -1
  3. package/fesm2022/radix-ng-primitives-alert-dialog.mjs +221 -129
  4. package/fesm2022/radix-ng-primitives-alert-dialog.mjs.map +1 -1
  5. package/fesm2022/radix-ng-primitives-arrow.mjs +20 -4
  6. package/fesm2022/radix-ng-primitives-arrow.mjs.map +1 -1
  7. package/fesm2022/radix-ng-primitives-aspect-ratio.mjs.map +1 -1
  8. package/fesm2022/radix-ng-primitives-avatar.mjs +54 -61
  9. package/fesm2022/radix-ng-primitives-avatar.mjs.map +1 -1
  10. package/fesm2022/radix-ng-primitives-button.mjs +123 -0
  11. package/fesm2022/radix-ng-primitives-button.mjs.map +1 -0
  12. package/fesm2022/radix-ng-primitives-calendar.mjs.map +1 -1
  13. package/fesm2022/radix-ng-primitives-checkbox.mjs +378 -54
  14. package/fesm2022/radix-ng-primitives-checkbox.mjs.map +1 -1
  15. package/fesm2022/radix-ng-primitives-collapsible.mjs +182 -81
  16. package/fesm2022/radix-ng-primitives-collapsible.mjs.map +1 -1
  17. package/fesm2022/radix-ng-primitives-collection.mjs +40 -57
  18. package/fesm2022/radix-ng-primitives-collection.mjs.map +1 -1
  19. package/fesm2022/radix-ng-primitives-config.mjs.map +1 -1
  20. package/fesm2022/radix-ng-primitives-context-menu.mjs +140 -424
  21. package/fesm2022/radix-ng-primitives-context-menu.mjs.map +1 -1
  22. package/fesm2022/radix-ng-primitives-core.mjs +735 -744
  23. package/fesm2022/radix-ng-primitives-core.mjs.map +1 -1
  24. package/fesm2022/radix-ng-primitives-cropper.mjs +1 -0
  25. package/fesm2022/radix-ng-primitives-cropper.mjs.map +1 -1
  26. package/fesm2022/radix-ng-primitives-date-field.mjs +51 -45
  27. package/fesm2022/radix-ng-primitives-date-field.mjs.map +1 -1
  28. package/fesm2022/radix-ng-primitives-dialog.mjs +655 -327
  29. package/fesm2022/radix-ng-primitives-dialog.mjs.map +1 -1
  30. package/fesm2022/radix-ng-primitives-dismissable-layer.mjs +70 -46
  31. package/fesm2022/radix-ng-primitives-dismissable-layer.mjs.map +1 -1
  32. package/fesm2022/radix-ng-primitives-drawer.mjs +1059 -0
  33. package/fesm2022/radix-ng-primitives-drawer.mjs.map +1 -0
  34. package/fesm2022/radix-ng-primitives-editable.mjs.map +1 -1
  35. package/fesm2022/radix-ng-primitives-field.mjs +363 -0
  36. package/fesm2022/radix-ng-primitives-field.mjs.map +1 -0
  37. package/fesm2022/radix-ng-primitives-fieldset.mjs +79 -0
  38. package/fesm2022/radix-ng-primitives-fieldset.mjs.map +1 -0
  39. package/fesm2022/radix-ng-primitives-focus-scope.mjs +23 -8
  40. package/fesm2022/radix-ng-primitives-focus-scope.mjs.map +1 -1
  41. package/fesm2022/radix-ng-primitives-input.mjs +172 -0
  42. package/fesm2022/radix-ng-primitives-input.mjs.map +1 -0
  43. package/fesm2022/radix-ng-primitives-label.mjs +6 -6
  44. package/fesm2022/radix-ng-primitives-label.mjs.map +1 -1
  45. package/fesm2022/radix-ng-primitives-menu.mjs +1480 -344
  46. package/fesm2022/radix-ng-primitives-menu.mjs.map +1 -1
  47. package/fesm2022/radix-ng-primitives-menubar.mjs +290 -162
  48. package/fesm2022/radix-ng-primitives-menubar.mjs.map +1 -1
  49. package/fesm2022/radix-ng-primitives-meter.mjs +271 -0
  50. package/fesm2022/radix-ng-primitives-meter.mjs.map +1 -0
  51. package/fesm2022/radix-ng-primitives-navigation-menu.mjs +1052 -1553
  52. package/fesm2022/radix-ng-primitives-navigation-menu.mjs.map +1 -1
  53. package/fesm2022/radix-ng-primitives-number-field.mjs +1102 -367
  54. package/fesm2022/radix-ng-primitives-number-field.mjs.map +1 -1
  55. package/fesm2022/radix-ng-primitives-pagination.mjs.map +1 -1
  56. package/fesm2022/radix-ng-primitives-popover.mjs +978 -989
  57. package/fesm2022/radix-ng-primitives-popover.mjs.map +1 -1
  58. package/fesm2022/radix-ng-primitives-popper.mjs +91 -41
  59. package/fesm2022/radix-ng-primitives-popper.mjs.map +1 -1
  60. package/fesm2022/radix-ng-primitives-portal.mjs +34 -10
  61. package/fesm2022/radix-ng-primitives-portal.mjs.map +1 -1
  62. package/fesm2022/radix-ng-primitives-presence.mjs +134 -246
  63. package/fesm2022/radix-ng-primitives-presence.mjs.map +1 -1
  64. package/fesm2022/radix-ng-primitives-preview-card.mjs +997 -0
  65. package/fesm2022/radix-ng-primitives-preview-card.mjs.map +1 -0
  66. package/fesm2022/radix-ng-primitives-progress.mjs +223 -84
  67. package/fesm2022/radix-ng-primitives-progress.mjs.map +1 -1
  68. package/fesm2022/radix-ng-primitives-radio.mjs +191 -51
  69. package/fesm2022/radix-ng-primitives-radio.mjs.map +1 -1
  70. package/fesm2022/radix-ng-primitives-roving-focus.mjs +96 -50
  71. package/fesm2022/radix-ng-primitives-roving-focus.mjs.map +1 -1
  72. package/fesm2022/radix-ng-primitives-select.mjs +791 -509
  73. package/fesm2022/radix-ng-primitives-select.mjs.map +1 -1
  74. package/fesm2022/radix-ng-primitives-separator.mjs +12 -35
  75. package/fesm2022/radix-ng-primitives-separator.mjs.map +1 -1
  76. package/fesm2022/radix-ng-primitives-slider.mjs +969 -717
  77. package/fesm2022/radix-ng-primitives-slider.mjs.map +1 -1
  78. package/fesm2022/radix-ng-primitives-stepper.mjs +15 -19
  79. package/fesm2022/radix-ng-primitives-stepper.mjs.map +1 -1
  80. package/fesm2022/radix-ng-primitives-switch.mjs +125 -113
  81. package/fesm2022/radix-ng-primitives-switch.mjs.map +1 -1
  82. package/fesm2022/radix-ng-primitives-tabs.mjs +381 -108
  83. package/fesm2022/radix-ng-primitives-tabs.mjs.map +1 -1
  84. package/fesm2022/radix-ng-primitives-time-field.mjs +55 -46
  85. package/fesm2022/radix-ng-primitives-time-field.mjs.map +1 -1
  86. package/fesm2022/radix-ng-primitives-toggle-group.mjs +121 -247
  87. package/fesm2022/radix-ng-primitives-toggle-group.mjs.map +1 -1
  88. package/fesm2022/radix-ng-primitives-toggle.mjs +98 -61
  89. package/fesm2022/radix-ng-primitives-toggle.mjs.map +1 -1
  90. package/fesm2022/radix-ng-primitives-toolbar.mjs +303 -92
  91. package/fesm2022/radix-ng-primitives-toolbar.mjs.map +1 -1
  92. package/fesm2022/radix-ng-primitives-tooltip.mjs +690 -1071
  93. package/fesm2022/radix-ng-primitives-tooltip.mjs.map +1 -1
  94. package/fesm2022/radix-ng-primitives-visually-hidden.mjs +25 -66
  95. package/fesm2022/radix-ng-primitives-visually-hidden.mjs.map +1 -1
  96. package/meter/README.md +3 -0
  97. package/navigation-menu/README.md +2 -1
  98. package/package.json +31 -18
  99. package/portal/README.md +2 -0
  100. package/preview-card/README.md +3 -0
  101. package/schematics/collection.json +1 -0
  102. package/schematics/ng-add/index.d.ts +3 -2
  103. package/schematics/ng-add/index.js +62 -31
  104. package/schematics/ng-add/index.js.map +1 -1
  105. package/schematics/ng-add/package-config.d.ts +4 -2
  106. package/schematics/ng-add/package-config.js +10 -2
  107. package/schematics/ng-add/package-config.js.map +1 -1
  108. package/schematics/ng-add/schema.d.ts +3 -0
  109. package/schematics/ng-add/schema.js +3 -0
  110. package/schematics/ng-add/schema.js.map +1 -0
  111. package/schematics/ng-add/schema.json +14 -0
  112. package/select/README.md +2 -0
  113. package/types/radix-ng-primitives-accordion.d.ts +48 -14
  114. package/types/radix-ng-primitives-alert-dialog.d.ts +95 -38
  115. package/types/radix-ng-primitives-arrow.d.ts +1 -1
  116. package/types/radix-ng-primitives-aspect-ratio.d.ts +1 -1
  117. package/types/radix-ng-primitives-avatar.d.ts +7 -11
  118. package/types/radix-ng-primitives-button.d.ts +73 -0
  119. package/types/radix-ng-primitives-calendar.d.ts +1 -2
  120. package/types/radix-ng-primitives-checkbox.d.ts +201 -32
  121. package/types/radix-ng-primitives-collapsible.d.ts +112 -39
  122. package/types/radix-ng-primitives-collection.d.ts +38 -34
  123. package/types/radix-ng-primitives-config.d.ts +1 -1
  124. package/types/radix-ng-primitives-context-menu.d.ts +60 -116
  125. package/types/radix-ng-primitives-core.d.ts +307 -236
  126. package/types/radix-ng-primitives-cropper.d.ts +2 -2
  127. package/types/radix-ng-primitives-date-field.d.ts +38 -23
  128. package/types/radix-ng-primitives-dialog.d.ts +282 -165
  129. package/types/radix-ng-primitives-dismissable-layer.d.ts +15 -7
  130. package/types/radix-ng-primitives-drawer.d.ts +448 -0
  131. package/types/radix-ng-primitives-editable.d.ts +1 -1
  132. package/types/radix-ng-primitives-field.d.ts +373 -0
  133. package/types/radix-ng-primitives-fieldset.d.ts +48 -0
  134. package/types/radix-ng-primitives-focus-scope.d.ts +13 -5
  135. package/types/radix-ng-primitives-input.d.ts +87 -0
  136. package/types/radix-ng-primitives-label.d.ts +0 -1
  137. package/types/radix-ng-primitives-menu.d.ts +572 -99
  138. package/types/radix-ng-primitives-menubar.d.ts +60 -50
  139. package/types/radix-ng-primitives-meter.d.ts +193 -0
  140. package/types/radix-ng-primitives-navigation-menu.d.ts +422 -340
  141. package/types/radix-ng-primitives-number-field.d.ts +405 -145
  142. package/types/radix-ng-primitives-pagination.d.ts +2 -2
  143. package/types/radix-ng-primitives-popover.d.ts +365 -351
  144. package/types/radix-ng-primitives-popper.d.ts +49 -9
  145. package/types/radix-ng-primitives-portal.d.ts +14 -6
  146. package/types/radix-ng-primitives-presence.d.ts +28 -76
  147. package/types/radix-ng-primitives-preview-card.d.ts +359 -0
  148. package/types/radix-ng-primitives-progress.d.ts +174 -48
  149. package/types/radix-ng-primitives-radio.d.ts +55 -25
  150. package/types/radix-ng-primitives-roving-focus.d.ts +30 -21
  151. package/types/radix-ng-primitives-select.d.ts +475 -177
  152. package/types/radix-ng-primitives-separator.d.ts +7 -32
  153. package/types/radix-ng-primitives-slider.d.ts +315 -201
  154. package/types/radix-ng-primitives-stepper.d.ts +5 -7
  155. package/types/radix-ng-primitives-switch.d.ts +86 -71
  156. package/types/radix-ng-primitives-tabs.d.ts +213 -79
  157. package/types/radix-ng-primitives-time-field.d.ts +42 -27
  158. package/types/radix-ng-primitives-toggle-group.d.ts +85 -164
  159. package/types/radix-ng-primitives-toggle.d.ts +43 -53
  160. package/types/radix-ng-primitives-toolbar.d.ts +163 -38
  161. package/types/radix-ng-primitives-tooltip.d.ts +347 -384
  162. package/types/radix-ng-primitives-visually-hidden.d.ts +19 -19
  163. package/dropdown-menu/README.md +0 -1
  164. package/fesm2022/radix-ng-primitives-dropdown-menu.mjs +0 -581
  165. package/fesm2022/radix-ng-primitives-dropdown-menu.mjs.map +0 -1
  166. package/fesm2022/radix-ng-primitives-hover-card.mjs +0 -1238
  167. package/fesm2022/radix-ng-primitives-hover-card.mjs.map +0 -1
  168. package/fesm2022/radix-ng-primitives-select2.mjs +0 -897
  169. package/fesm2022/radix-ng-primitives-select2.mjs.map +0 -1
  170. package/fesm2022/radix-ng-primitives-tooltip2.mjs +0 -735
  171. package/fesm2022/radix-ng-primitives-tooltip2.mjs.map +0 -1
  172. package/hover-card/README.md +0 -3
  173. package/select2/README.md +0 -3
  174. package/tooltip2/README.md +0 -3
  175. package/types/radix-ng-primitives-dropdown-menu.d.ts +0 -171
  176. package/types/radix-ng-primitives-hover-card.d.ts +0 -471
  177. package/types/radix-ng-primitives-select2.d.ts +0 -511
  178. package/types/radix-ng-primitives-tooltip2.d.ts +0 -325
@@ -1,1238 +0,0 @@
1
- import * as i0 from '@angular/core';
2
- import { InjectionToken, inject, TemplateRef, DestroyRef, computed, input, numberAttribute, booleanAttribute, output, effect, untracked, SimpleChange, Directive, ElementRef, NgZone, Renderer2, isDevMode, VERSION, Injectable, makeEnvironmentProviders, signal, contentChild, ViewContainerRef, afterNextRender, assertInInjectionContext, forwardRef, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
3
- import * as i1 from '@angular/cdk/overlay';
4
- import { Overlay, CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
5
- import { RdxPositionSide, RdxPositionAlign, RDX_POSITIONING_DEFAULTS, getContentPosition, getAllPossibleConnectedPositions, injectDocument, injectWindow, getArrowPositionParams, getSideAndAlignFromAllPossibleConnectedPositions } from '@radix-ng/primitives/core';
6
- import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
7
- import { filter, tap, Subject, map, debounce, timer } from 'rxjs';
8
-
9
- const RdxHoverCardAnchorToken = new InjectionToken('RdxHoverCardAnchorToken');
10
-
11
- const RdxHoverCardArrowToken = new InjectionToken('RdxHoverCardArrowToken');
12
-
13
- const RdxHoverCardCloseToken = new InjectionToken('RdxHoverCardCloseToken');
14
-
15
- const RdxHoverCardContentAttributesToken = new InjectionToken('RdxHoverCardContentAttributesToken');
16
-
17
- var RdxHoverCardState;
18
- (function (RdxHoverCardState) {
19
- RdxHoverCardState["OPEN"] = "open";
20
- RdxHoverCardState["CLOSED"] = "closed";
21
- })(RdxHoverCardState || (RdxHoverCardState = {}));
22
- var RdxHoverCardAction;
23
- (function (RdxHoverCardAction) {
24
- RdxHoverCardAction["OPEN"] = "open";
25
- RdxHoverCardAction["CLOSE"] = "close";
26
- })(RdxHoverCardAction || (RdxHoverCardAction = {}));
27
- var RdxHoverCardAttachDetachEvent;
28
- (function (RdxHoverCardAttachDetachEvent) {
29
- RdxHoverCardAttachDetachEvent["ATTACH"] = "attach";
30
- RdxHoverCardAttachDetachEvent["DETACH"] = "detach";
31
- })(RdxHoverCardAttachDetachEvent || (RdxHoverCardAttachDetachEvent = {}));
32
- var RdxHoverCardAnimationStatus;
33
- (function (RdxHoverCardAnimationStatus) {
34
- RdxHoverCardAnimationStatus["OPEN_STARTED"] = "open_started";
35
- RdxHoverCardAnimationStatus["OPEN_ENDED"] = "open_ended";
36
- RdxHoverCardAnimationStatus["CLOSED_STARTED"] = "closed_started";
37
- RdxHoverCardAnimationStatus["CLOSED_ENDED"] = "closed_ended";
38
- })(RdxHoverCardAnimationStatus || (RdxHoverCardAnimationStatus = {}));
39
-
40
- /**
41
- * @group Components
42
- */
43
- class RdxHoverCardContentDirective {
44
- constructor() {
45
- /** @ignore */
46
- this.rootDirective = injectHoverCardRoot();
47
- /** @ignore */
48
- this.templateRef = inject(TemplateRef);
49
- /** @ignore */
50
- this.overlay = inject(Overlay);
51
- /** @ignore */
52
- this.destroyRef = inject(DestroyRef);
53
- /** @ignore */
54
- this.connectedOverlay = inject(CdkConnectedOverlay);
55
- /** @ignore */
56
- this.name = computed(() => `rdx-hover-card-trigger-${this.rootDirective.uniqueId()}`, ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
57
- /**
58
- * The preferred side of the trigger to render against when open. Will be reversed when collisions occur and avoidCollisions is enabled.
59
- * @group Props
60
- * @defaultValue top
61
- */
62
- this.side = input(RdxPositionSide.Top, ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
63
- /**
64
- * The distance in pixels from the trigger.
65
- * @group Props
66
- * @defaultValue undefined
67
- */
68
- this.sideOffset = input(NaN, { ...(ngDevMode ? { debugName: "sideOffset" } : /* istanbul ignore next */ {}), transform: numberAttribute });
69
- /**
70
- * The preferred alignment against the trigger. May change when collisions occur.
71
- * @group Props
72
- * @defaultValue center
73
- */
74
- this.align = input(RdxPositionAlign.Center, ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
75
- /**
76
- * An offset in pixels from the "start" or "end" alignment options.
77
- * @group Props
78
- * @defaultValue undefined
79
- */
80
- this.alignOffset = input(NaN, { ...(ngDevMode ? { debugName: "alignOffset" } : /* istanbul ignore next */ {}), transform: numberAttribute });
81
- /**
82
- * Whether to add some alternate positions of the content.
83
- * @group Props
84
- * @defaultValue false
85
- */
86
- this.alternatePositionsDisabled = input(false, { ...(ngDevMode ? { debugName: "alternatePositionsDisabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
87
- /**
88
- * Whether to prevent `onOverlayEscapeKeyDown` handler from calling.
89
- * @group Props
90
- * @defaultValue false
91
- */
92
- this.onOverlayEscapeKeyDownDisabled = input(false, { ...(ngDevMode ? { debugName: "onOverlayEscapeKeyDownDisabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
93
- /**
94
- * Whether to prevent `onOverlayOutsideClick` handler from calling.
95
- * @group Props
96
- * @defaultValue false
97
- */
98
- this.onOverlayOutsideClickDisabled = input(false, { ...(ngDevMode ? { debugName: "onOverlayOutsideClickDisabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
99
- /**
100
- * Event handler called when the escape key is down.
101
- * It can be prevented by setting `onOverlayEscapeKeyDownDisabled` input to `true`.
102
- * @group Emits
103
- */
104
- this.onOverlayEscapeKeyDown = output();
105
- /**
106
- * Event handler called when a pointer event occurs outside the bounds of the component.
107
- * It can be prevented by setting `onOverlayOutsideClickDisabled` input to `true`.
108
- * @group Emits
109
- */
110
- this.onOverlayOutsideClick = output();
111
- /**
112
- * Event handler called after the overlay is open
113
- * @group Emits
114
- */
115
- this.onOpen = output();
116
- /**
117
- * Event handler called after the overlay is closed
118
- * @group Emits
119
- */
120
- this.onClosed = output();
121
- /** @ingore */
122
- this.positions = computed(() => this.computePositions(), ...(ngDevMode ? [{ debugName: "positions" }] : /* istanbul ignore next */ []));
123
- this.onOriginChangeEffect();
124
- this.onPositionChangeEffect();
125
- }
126
- /** @ignore */
127
- ngOnInit() {
128
- this.setScrollStrategy();
129
- this.setHasBackdrop();
130
- this.setDisableClose();
131
- this.onAttach();
132
- this.onDetach();
133
- this.connectKeydownEscape();
134
- this.connectOutsideClick();
135
- }
136
- /** @ignore */
137
- open() {
138
- if (this.connectedOverlay.open) {
139
- return;
140
- }
141
- const prevOpen = this.connectedOverlay.open;
142
- this.connectedOverlay.open = true;
143
- this.fireOverlayNgOnChanges('open', this.connectedOverlay.open, prevOpen);
144
- }
145
- /** @ignore */
146
- close() {
147
- if (!this.connectedOverlay.open) {
148
- return;
149
- }
150
- const prevOpen = this.connectedOverlay.open;
151
- this.connectedOverlay.open = false;
152
- this.fireOverlayNgOnChanges('open', this.connectedOverlay.open, prevOpen);
153
- }
154
- /** @ignore */
155
- positionChange() {
156
- return this.connectedOverlay.positionChange.asObservable();
157
- }
158
- /** @ignore */
159
- connectKeydownEscape() {
160
- this.connectedOverlay.overlayKeydown
161
- .asObservable()
162
- .pipe(filter(() => !this.onOverlayEscapeKeyDownDisabled() &&
163
- !this.rootDirective.rdxCdkEventService?.primitivePreventedFromCdkEvent(this.rootDirective, 'cdkOverlayEscapeKeyDown')), filter((event) => event.key === 'Escape'), tap((event) => {
164
- this.onOverlayEscapeKeyDown.emit(event);
165
- }), filter(() => !this.rootDirective.firstDefaultOpen()), tap(() => {
166
- this.rootDirective.handleClose();
167
- }), takeUntilDestroyed(this.destroyRef))
168
- .subscribe();
169
- }
170
- /** @ignore */
171
- connectOutsideClick() {
172
- this.connectedOverlay.overlayOutsideClick
173
- .asObservable()
174
- .pipe(filter(() => !this.onOverlayOutsideClickDisabled() &&
175
- !this.rootDirective.rdxCdkEventService?.primitivePreventedFromCdkEvent(this.rootDirective, 'cdkOverlayOutsideClick')),
176
- /**
177
- * Handle the situation when an anchor is added and the anchor becomes the origin of the overlay
178
- * hence the trigger will be considered the outside element
179
- */
180
- filter((event) => {
181
- return (!this.rootDirective.anchorDirective() ||
182
- !this.rootDirective
183
- .triggerDirective()
184
- .elementRef.nativeElement.contains(event.target));
185
- }), tap((event) => {
186
- this.onOverlayOutsideClick.emit(event);
187
- }), filter(() => !this.rootDirective.firstDefaultOpen()), tap(() => {
188
- this.rootDirective.handleClose();
189
- }), takeUntilDestroyed(this.destroyRef))
190
- .subscribe();
191
- }
192
- /** @ignore */
193
- onAttach() {
194
- this.connectedOverlay.attach
195
- .asObservable()
196
- .pipe(tap(() => {
197
- /**
198
- * `this.onOpen.emit();` is being delegated to the rootDirective directive due to the opening animation
199
- */
200
- this.rootDirective.attachDetachEvent.set(RdxHoverCardAttachDetachEvent.ATTACH);
201
- }), takeUntilDestroyed(this.destroyRef))
202
- .subscribe();
203
- }
204
- /** @ignore */
205
- onDetach() {
206
- this.connectedOverlay.detach
207
- .asObservable()
208
- .pipe(tap(() => {
209
- /**
210
- * `this.onClosed.emit();` is being delegated to the rootDirective directive due to the closing animation
211
- */
212
- this.rootDirective.attachDetachEvent.set(RdxHoverCardAttachDetachEvent.DETACH);
213
- }), takeUntilDestroyed(this.destroyRef))
214
- .subscribe();
215
- }
216
- /** @ignore */
217
- setScrollStrategy() {
218
- const prevScrollStrategy = this.connectedOverlay.scrollStrategy;
219
- this.connectedOverlay.scrollStrategy = this.overlay.scrollStrategies.reposition();
220
- this.fireOverlayNgOnChanges('scrollStrategy', this.connectedOverlay.scrollStrategy, prevScrollStrategy);
221
- }
222
- /** @ignore */
223
- setHasBackdrop() {
224
- const prevHasBackdrop = this.connectedOverlay.hasBackdrop;
225
- this.connectedOverlay.hasBackdrop = false;
226
- this.fireOverlayNgOnChanges('hasBackdrop', this.connectedOverlay.hasBackdrop, prevHasBackdrop);
227
- }
228
- /** @ignore */
229
- setDisableClose() {
230
- const prevDisableClose = this.connectedOverlay.disableClose;
231
- this.connectedOverlay.disableClose = true;
232
- this.fireOverlayNgOnChanges('disableClose', this.connectedOverlay.disableClose, prevDisableClose);
233
- }
234
- /** @ignore */
235
- setOrigin(origin) {
236
- const prevOrigin = this.connectedOverlay.origin;
237
- this.connectedOverlay.origin = origin;
238
- this.fireOverlayNgOnChanges('origin', this.connectedOverlay.origin, prevOrigin);
239
- }
240
- /** @ignore */
241
- setPositions(positions) {
242
- const prevPositions = this.connectedOverlay.positions;
243
- this.connectedOverlay.positions = positions;
244
- this.fireOverlayNgOnChanges('positions', this.connectedOverlay.positions, prevPositions);
245
- this.connectedOverlay.overlayRef?.updatePosition();
246
- }
247
- /** @ignore */
248
- computePositions() {
249
- const arrowHeight = this.rootDirective.arrowDirective()?.height() ?? 0;
250
- const offsets = {
251
- sideOffset: arrowHeight + (isNaN(this.sideOffset()) ? RDX_POSITIONING_DEFAULTS.offsets.side : this.sideOffset()),
252
- alignOffset: isNaN(this.alignOffset()) ? RDX_POSITIONING_DEFAULTS.offsets.align : this.alignOffset()
253
- };
254
- const basePosition = getContentPosition({
255
- side: this.side(),
256
- align: this.align(),
257
- sideOffset: offsets.sideOffset,
258
- alignOffset: offsets.alignOffset
259
- });
260
- const positions = [basePosition];
261
- if (!this.alternatePositionsDisabled()) {
262
- /**
263
- * Alternate positions for better user experience along the X/Y axis (e.g. vertical/horizontal scrolling)
264
- */
265
- const allPossibleConnectedPositions = getAllPossibleConnectedPositions();
266
- allPossibleConnectedPositions.forEach((_, key) => {
267
- const sideAndAlignArray = key.split('|');
268
- if (sideAndAlignArray[0] !== this.side() ||
269
- sideAndAlignArray[1] !== this.align()) {
270
- positions.push(getContentPosition({
271
- side: sideAndAlignArray[0],
272
- align: sideAndAlignArray[1],
273
- sideOffset: offsets.sideOffset,
274
- alignOffset: offsets.alignOffset
275
- }));
276
- }
277
- });
278
- }
279
- return positions;
280
- }
281
- onOriginChangeEffect() {
282
- effect(() => {
283
- const origin = (this.rootDirective.anchorDirective() ?? this.rootDirective.triggerDirective())
284
- .overlayOrigin;
285
- untracked(() => {
286
- this.setOrigin(origin);
287
- });
288
- });
289
- }
290
- /** @ignore */
291
- onPositionChangeEffect() {
292
- effect(() => {
293
- const positions = this.positions();
294
- this.alternatePositionsDisabled();
295
- untracked(() => {
296
- this.setPositions(positions);
297
- });
298
- });
299
- }
300
- /** @ignore */
301
- fireOverlayNgOnChanges(input, currentValue, previousValue, firstChange = false) {
302
- this.connectedOverlay.ngOnChanges({
303
- [input]: new SimpleChange(previousValue, currentValue, firstChange)
304
- });
305
- }
306
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxHoverCardContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
307
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxHoverCardContentDirective, isStandalone: true, selector: "[rdxHoverCardContent]", inputs: { side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, sideOffset: { classPropertyName: "sideOffset", publicName: "sideOffset", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, alignOffset: { classPropertyName: "alignOffset", publicName: "alignOffset", isSignal: true, isRequired: false, transformFunction: null }, alternatePositionsDisabled: { classPropertyName: "alternatePositionsDisabled", publicName: "alternatePositionsDisabled", isSignal: true, isRequired: false, transformFunction: null }, onOverlayEscapeKeyDownDisabled: { classPropertyName: "onOverlayEscapeKeyDownDisabled", publicName: "onOverlayEscapeKeyDownDisabled", isSignal: true, isRequired: false, transformFunction: null }, onOverlayOutsideClickDisabled: { classPropertyName: "onOverlayOutsideClickDisabled", publicName: "onOverlayOutsideClickDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onOverlayEscapeKeyDown: "onOverlayEscapeKeyDown", onOverlayOutsideClick: "onOverlayOutsideClick", onOpen: "onOpen", onClosed: "onClosed" }, hostDirectives: [{ directive: i1.CdkConnectedOverlay }], ngImport: i0 }); }
308
- }
309
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxHoverCardContentDirective, decorators: [{
310
- type: Directive,
311
- args: [{
312
- selector: '[rdxHoverCardContent]',
313
- hostDirectives: [CdkConnectedOverlay]
314
- }]
315
- }], ctorParameters: () => [], propDecorators: { side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], sideOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "sideOffset", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], alignOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignOffset", required: false }] }], alternatePositionsDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "alternatePositionsDisabled", required: false }] }], onOverlayEscapeKeyDownDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "onOverlayEscapeKeyDownDisabled", required: false }] }], onOverlayOutsideClickDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "onOverlayOutsideClickDisabled", required: false }] }], onOverlayEscapeKeyDown: [{ type: i0.Output, args: ["onOverlayEscapeKeyDown"] }], onOverlayOutsideClick: [{ type: i0.Output, args: ["onOverlayOutsideClick"] }], onOpen: [{ type: i0.Output, args: ["onOpen"] }], onClosed: [{ type: i0.Output, args: ["onClosed"] }] } });
316
-
317
- class RdxHoverCardTriggerDirective {
318
- constructor() {
319
- /** @ignore */
320
- this.rootDirective = injectHoverCardRoot();
321
- /** @ignore */
322
- this.elementRef = inject(ElementRef);
323
- /** @ignore */
324
- this.overlayOrigin = inject(CdkOverlayOrigin);
325
- /** @ignore */
326
- this.name = computed(() => `rdx-hover-card-trigger-${this.rootDirective.uniqueId()}`, ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
327
- }
328
- /** @ignore */
329
- pointerenter() {
330
- this.rootDirective.handleOpen();
331
- }
332
- /** @ignore */
333
- pointerleave() {
334
- this.rootDirective.handleClose();
335
- }
336
- /** @ignore */
337
- focus() {
338
- this.rootDirective.handleOpen();
339
- }
340
- /** @ignore */
341
- blur() {
342
- this.rootDirective.handleClose();
343
- }
344
- /** @ignore */
345
- click() {
346
- this.rootDirective.handleClose();
347
- }
348
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxHoverCardTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
349
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxHoverCardTriggerDirective, isStandalone: true, selector: "[rdxHoverCardTrigger]", host: { listeners: { "pointerenter": "pointerenter()", "pointerleave": "pointerleave()", "focus": "focus()", "blur": "blur()", "click": "click()" }, properties: { "attr.id": "name()", "attr.aria-haspopup": "\"dialog\"", "attr.aria-expanded": "rootDirective.isOpen()", "attr.aria-controls": "rootDirective.contentDirective().name()", "attr.data-state": "rootDirective.state()" } }, hostDirectives: [{ directive: i1.CdkOverlayOrigin }], ngImport: i0 }); }
350
- }
351
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxHoverCardTriggerDirective, decorators: [{
352
- type: Directive,
353
- args: [{
354
- selector: '[rdxHoverCardTrigger]',
355
- hostDirectives: [CdkOverlayOrigin],
356
- host: {
357
- '[attr.id]': 'name()',
358
- '[attr.aria-haspopup]': '"dialog"',
359
- '[attr.aria-expanded]': 'rootDirective.isOpen()',
360
- '[attr.aria-controls]': 'rootDirective.contentDirective().name()',
361
- '[attr.data-state]': 'rootDirective.state()',
362
- '(pointerenter)': 'pointerenter()',
363
- '(pointerleave)': 'pointerleave()',
364
- '(focus)': 'focus()',
365
- '(blur)': 'blur()',
366
- '(click)': 'click()'
367
- }
368
- }]
369
- }] });
370
-
371
- const RdxCdkEventServiceWindowKey = Symbol('__RdxCdkEventService__');
372
-
373
- function eventTypeAsPrimitiveConfigKey(eventType) {
374
- return `prevent${eventType[0].toUpperCase()}${eventType.slice(1)}`;
375
- }
376
- class RdxCdkEventService {
377
- #clickDomRootEventCallbacks;
378
- constructor() {
379
- this.document = injectDocument();
380
- this.destroyRef = inject(DestroyRef);
381
- this.ngZone = inject(NgZone);
382
- this.renderer2 = inject(Renderer2);
383
- this.window = injectWindow();
384
- this.onDestroyCallbacks = new Set([() => deleteRdxCdkEventServiceWindowKey(this.window)]);
385
- this.#clickDomRootEventCallbacks = new Set();
386
- this.#listenToClickDomRootEvent();
387
- this.#registerOnDestroyCallbacks();
388
- }
389
- registerPrimitive(primitiveInstance) {
390
- if (!this.primitiveConfigs) {
391
- this.primitiveConfigs = new Map();
392
- }
393
- if (!this.primitiveConfigs.has(primitiveInstance)) {
394
- this.primitiveConfigs.set(primitiveInstance, {});
395
- }
396
- }
397
- deregisterPrimitive(primitiveInstance) {
398
- if (this.primitiveConfigs?.has(primitiveInstance)) {
399
- this.primitiveConfigs.delete(primitiveInstance);
400
- }
401
- }
402
- preventPrimitiveFromCdkEvent(primitiveInstance, eventType) {
403
- this.#setPreventPrimitiveFromCdkEvent(primitiveInstance, eventType, true);
404
- }
405
- allowPrimitiveForCdkEvent(primitiveInstance, eventType) {
406
- this.#setPreventPrimitiveFromCdkEvent(primitiveInstance, eventType, false);
407
- }
408
- preventPrimitiveFromCdkMultiEvents(primitiveInstance, eventTypes) {
409
- eventTypes.forEach((eventType) => {
410
- this.#setPreventPrimitiveFromCdkEvent(primitiveInstance, eventType, true);
411
- });
412
- }
413
- allowPrimitiveForCdkMultiEvents(primitiveInstance, eventTypes) {
414
- eventTypes.forEach((eventType) => {
415
- this.#setPreventPrimitiveFromCdkEvent(primitiveInstance, eventType, false);
416
- });
417
- }
418
- setPreventPrimitiveFromCdkMixEvents(primitiveInstance, eventTypes) {
419
- Object.keys(eventTypes).forEach((eventType) => {
420
- this.#setPreventPrimitiveFromCdkEvent(primitiveInstance, eventType, eventTypes[eventTypeAsPrimitiveConfigKey(eventType)]);
421
- });
422
- }
423
- primitivePreventedFromCdkEvent(primitiveInstance, eventType) {
424
- return this.primitiveConfigs?.get(primitiveInstance)?.[eventTypeAsPrimitiveConfigKey(eventType)];
425
- }
426
- addClickDomRootEventCallback(callback) {
427
- this.#clickDomRootEventCallbacks.add(callback);
428
- }
429
- removeClickDomRootEventCallback(callback) {
430
- return this.#clickDomRootEventCallbacks.delete(callback);
431
- }
432
- #setPreventPrimitiveFromCdkEvent(primitiveInstance, eventType, value) {
433
- if (!this.primitiveConfigs?.has(primitiveInstance)) {
434
- isDevMode() &&
435
- console.error('[RdxCdkEventService.preventPrimitiveFromCdkEvent] RDX Primitive instance has not been registered!', primitiveInstance);
436
- return;
437
- }
438
- switch (eventType) {
439
- case 'cdkOverlayOutsideClick':
440
- this.primitiveConfigs.get(primitiveInstance).preventCdkOverlayOutsideClick = value;
441
- break;
442
- case 'cdkOverlayEscapeKeyDown':
443
- this.primitiveConfigs.get(primitiveInstance).preventCdkOverlayEscapeKeyDown = value;
444
- break;
445
- }
446
- }
447
- #registerOnDestroyCallbacks() {
448
- this.destroyRef.onDestroy(() => {
449
- this.onDestroyCallbacks.forEach((onDestroyCallback) => onDestroyCallback());
450
- this.onDestroyCallbacks.clear();
451
- });
452
- }
453
- #listenToClickDomRootEvent() {
454
- const target = this.document;
455
- const eventName = 'click';
456
- const options = { capture: true };
457
- const callback = (event) => {
458
- this.#clickDomRootEventCallbacks.forEach((clickDomRootEventCallback) => clickDomRootEventCallback(event));
459
- };
460
- const major = parseInt(VERSION.major);
461
- const minor = parseInt(VERSION.minor);
462
- let destroyClickDomRootEventListener;
463
- /**
464
- * @see src/cdk/platform/features/backwards-compatibility.ts in @angular/cdk
465
- */
466
- if (major > 19 || (major === 19 && minor > 0) || (major === 0 && minor === 0)) {
467
- destroyClickDomRootEventListener = this.ngZone.runOutsideAngular(() => {
468
- const destroyClickDomRootEventListenerInternal = this.renderer2.listen(target, eventName, callback, options);
469
- return () => {
470
- destroyClickDomRootEventListenerInternal();
471
- this.#clickDomRootEventCallbacks.clear();
472
- };
473
- });
474
- }
475
- else {
476
- /**
477
- * This part can get removed when v19.1 or higher is on the board
478
- */
479
- destroyClickDomRootEventListener = this.ngZone.runOutsideAngular(() => {
480
- target.addEventListener(eventName, callback, options);
481
- return () => {
482
- this.ngZone.runOutsideAngular(() => target.removeEventListener(eventName, callback, options));
483
- this.#clickDomRootEventCallbacks.clear();
484
- };
485
- });
486
- }
487
- this.onDestroyCallbacks.add(destroyClickDomRootEventListener);
488
- }
489
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxCdkEventService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
490
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxCdkEventService }); }
491
- }
492
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxCdkEventService, decorators: [{
493
- type: Injectable
494
- }], ctorParameters: () => [] });
495
- const RdxCdkEventServiceToken = new InjectionToken('RdxCdkEventServiceToken');
496
- const existsErrorMessage = 'RdxCdkEventService should be provided only once!';
497
- const deleteRdxCdkEventServiceWindowKey = (window) => {
498
- delete window[RdxCdkEventServiceWindowKey];
499
- };
500
- const getProvider = (throwWhenExists = true) => ({
501
- provide: RdxCdkEventServiceToken,
502
- useFactory: () => {
503
- isDevMode() && console.log('providing RdxCdkEventService...');
504
- const window = injectWindow();
505
- if (window[RdxCdkEventServiceWindowKey]) {
506
- if (throwWhenExists) {
507
- throw Error(existsErrorMessage);
508
- }
509
- else {
510
- isDevMode() && console.warn(existsErrorMessage);
511
- }
512
- }
513
- window[RdxCdkEventServiceWindowKey] ??= new RdxCdkEventService();
514
- return window[RdxCdkEventServiceWindowKey];
515
- }
516
- });
517
- const provideRdxCdkEventServiceInRoot = () => makeEnvironmentProviders([getProvider()]);
518
- const provideRdxCdkEventService = () => getProvider(false);
519
- const injectRdxCdkEventService = () => inject(RdxCdkEventServiceToken, { optional: true });
520
-
521
- let nextId = 0;
522
- /**
523
- * @group Components
524
- */
525
- class RdxHoverCardRootDirective {
526
- constructor() {
527
- /** @ignore */
528
- this.uniqueId = signal(++nextId, ...(ngDevMode ? [{ debugName: "uniqueId" }] : /* istanbul ignore next */ []));
529
- /** @ignore */
530
- this.name = computed(() => `rdx-hover-card-root-${this.uniqueId()}`, ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
531
- /**
532
- * The anchor directive that comes from outside the hover-card rootDirective
533
- * @group Props
534
- * @defaultValue undefined
535
- */
536
- this.anchor = input(void 0, ...(ngDevMode ? [{ debugName: "anchor" }] : /* istanbul ignore next */ []));
537
- /**
538
- * The open state of the hover-card when it is initially rendered. Use when you do not need to control its open state.
539
- * @group Props
540
- * @defaultValue false
541
- */
542
- this.defaultOpen = input(false, { ...(ngDevMode ? { debugName: "defaultOpen" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
543
- /**
544
- * The controlled state of the hover-card. `open` input takes precedence over `defaultOpen` input.
545
- * @group Props
546
- * @defaultValue undefined
547
- */
548
- this.open = input(void 0, { ...(ngDevMode ? { debugName: "open" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
549
- /**
550
- * The delay in milliseconds before the hover-card opens.
551
- * @group Props
552
- * @defaultValue 500
553
- */
554
- this.openDelay = input(500, { ...(ngDevMode ? { debugName: "openDelay" } : /* istanbul ignore next */ {}), transform: numberAttribute });
555
- /**
556
- * The delay in milliseconds before the hover-card closes.
557
- * @group Props
558
- * @defaultValue 200
559
- */
560
- this.closeDelay = input(200, { ...(ngDevMode ? { debugName: "closeDelay" } : /* istanbul ignore next */ {}), transform: numberAttribute });
561
- /**
562
- * Whether to control the state of the hover-card from outside. Use in conjunction with `open` input.
563
- * @group Props
564
- * @defaultValue undefined
565
- */
566
- this.externalControl = input(void 0, { ...(ngDevMode ? { debugName: "externalControl" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
567
- /**
568
- * Whether to take into account CSS opening/closing animations.
569
- * @group Props
570
- * @defaultValue false
571
- */
572
- this.cssAnimation = input(false, { ...(ngDevMode ? { debugName: "cssAnimation" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
573
- /**
574
- * Whether to take into account CSS opening animations. `cssAnimation` input must be set to 'true'
575
- * @group Props
576
- * @defaultValue false
577
- */
578
- this.cssOpeningAnimation = input(false, { ...(ngDevMode ? { debugName: "cssOpeningAnimation" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
579
- /**
580
- * Whether to take into account CSS closing animations. `cssAnimation` input must be set to 'true'
581
- * @group Props
582
- * @defaultValue false
583
- */
584
- this.cssClosingAnimation = input(false, { ...(ngDevMode ? { debugName: "cssClosingAnimation" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
585
- /** @ignore */
586
- this.cssAnimationStatus = signal(null, ...(ngDevMode ? [{ debugName: "cssAnimationStatus" }] : /* istanbul ignore next */ []));
587
- /** @ignore */
588
- this.contentDirective = contentChild.required(RdxHoverCardContentDirective);
589
- /** @ignore */
590
- this.triggerDirective = contentChild.required(RdxHoverCardTriggerDirective);
591
- /** @ignore */
592
- this.arrowDirective = contentChild(RdxHoverCardArrowToken, ...(ngDevMode ? [{ debugName: "arrowDirective" }] : /* istanbul ignore next */ []));
593
- /** @ignore */
594
- this.closeDirective = contentChild(RdxHoverCardCloseToken, ...(ngDevMode ? [{ debugName: "closeDirective" }] : /* istanbul ignore next */ []));
595
- /** @ignore */
596
- this.contentAttributesComponent = contentChild(RdxHoverCardContentAttributesToken, ...(ngDevMode ? [{ debugName: "contentAttributesComponent" }] : /* istanbul ignore next */ []));
597
- /** @ignore */
598
- this.internalAnchorDirective = contentChild(RdxHoverCardAnchorToken, ...(ngDevMode ? [{ debugName: "internalAnchorDirective" }] : /* istanbul ignore next */ []));
599
- /** @ignore */
600
- this.viewContainerRef = inject(ViewContainerRef);
601
- /** @ignore */
602
- this.rdxCdkEventService = injectRdxCdkEventService();
603
- /** @ignore */
604
- this.destroyRef = inject(DestroyRef);
605
- /** @ignore */
606
- this.state = signal(RdxHoverCardState.CLOSED, ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
607
- /** @ignore */
608
- this.attachDetachEvent = signal(RdxHoverCardAttachDetachEvent.DETACH, ...(ngDevMode ? [{ debugName: "attachDetachEvent" }] : /* istanbul ignore next */ []));
609
- /** @ignore */
610
- this.isFirstDefaultOpen = signal(false, ...(ngDevMode ? [{ debugName: "isFirstDefaultOpen" }] : /* istanbul ignore next */ []));
611
- /** @ignore */
612
- this.anchorDirective = computed(() => this.internalAnchorDirective() ?? this.anchor(), ...(ngDevMode ? [{ debugName: "anchorDirective" }] : /* istanbul ignore next */ []));
613
- /** @ignore */
614
- this.actionSubject$ = new Subject();
615
- /** @ignore */
616
- this.onAnchorChangeEffect = () => {
617
- effect(() => {
618
- const anchor = this.anchor();
619
- untracked(() => {
620
- if (anchor) {
621
- anchor.setRoot(this);
622
- }
623
- });
624
- });
625
- };
626
- this.rdxCdkEventService?.registerPrimitive(this);
627
- this.destroyRef.onDestroy(() => this.rdxCdkEventService?.deregisterPrimitive(this));
628
- this.actionSubscription();
629
- this.onStateChangeEffect();
630
- this.onCssAnimationStatusChangeChangeEffect();
631
- this.onOpenChangeEffect();
632
- this.onIsFirstDefaultOpenChangeEffect();
633
- this.onAnchorChangeEffect();
634
- this.emitOpenOrClosedEventEffect();
635
- afterNextRender({
636
- write: () => {
637
- if (this.defaultOpen() && !this.open()) {
638
- this.isFirstDefaultOpen.set(true);
639
- }
640
- }
641
- });
642
- }
643
- /** @ignore */
644
- getAnimationParamsSnapshot() {
645
- return {
646
- cssAnimation: this.cssAnimation(),
647
- cssOpeningAnimation: this.cssOpeningAnimation(),
648
- cssClosingAnimation: this.cssClosingAnimation(),
649
- cssAnimationStatus: this.cssAnimationStatus(),
650
- attachDetachEvent: this.attachDetachEvent(),
651
- state: this.state(),
652
- canEmitOnOpenOrOnClosed: this.canEmitOnOpenOrOnClosed()
653
- };
654
- }
655
- /** @ignore */
656
- controlledExternally() {
657
- return this.externalControl;
658
- }
659
- /** @ignore */
660
- firstDefaultOpen() {
661
- return this.isFirstDefaultOpen();
662
- }
663
- /** @ignore */
664
- handleOpen() {
665
- if (this.externalControl()) {
666
- return;
667
- }
668
- this.actionSubject$.next(RdxHoverCardAction.OPEN);
669
- }
670
- /** @ignore */
671
- handleClose(closeButton) {
672
- if (this.isFirstDefaultOpen()) {
673
- this.isFirstDefaultOpen.set(false);
674
- }
675
- if (!closeButton && this.externalControl()) {
676
- return;
677
- }
678
- this.actionSubject$.next(RdxHoverCardAction.CLOSE);
679
- }
680
- /** @ignore */
681
- handleToggle() {
682
- if (this.externalControl()) {
683
- return;
684
- }
685
- this.isOpen() ? this.handleClose() : this.handleOpen();
686
- }
687
- /** @ignore */
688
- isOpen(state) {
689
- return (state ?? this.state()) === RdxHoverCardState.OPEN;
690
- }
691
- /** @ignore */
692
- setState(state = RdxHoverCardState.CLOSED) {
693
- if (state === this.state()) {
694
- return;
695
- }
696
- this.state.set(state);
697
- }
698
- /** @ignore */
699
- openContent() {
700
- this.contentDirective().open();
701
- if (!this.cssAnimation() || !this.cssOpeningAnimation()) {
702
- this.cssAnimationStatus.set(null);
703
- }
704
- }
705
- /** @ignore */
706
- closeContent() {
707
- this.contentDirective().close();
708
- if (!this.cssAnimation() || !this.cssClosingAnimation()) {
709
- this.cssAnimationStatus.set(null);
710
- }
711
- }
712
- /** @ignore */
713
- emitOnOpen() {
714
- this.contentDirective().onOpen.emit();
715
- }
716
- /** @ignore */
717
- emitOnClosed() {
718
- this.contentDirective().onClosed.emit();
719
- }
720
- /** @ignore */
721
- ifOpenOrCloseWithoutAnimations(state) {
722
- return (!this.contentAttributesComponent() ||
723
- !this.cssAnimation() ||
724
- (this.cssAnimation() && !this.cssClosingAnimation() && state === RdxHoverCardState.CLOSED) ||
725
- (this.cssAnimation() && !this.cssOpeningAnimation() && state === RdxHoverCardState.OPEN) ||
726
- // !this.cssAnimationStatus() ||
727
- (this.cssOpeningAnimation() &&
728
- state === RdxHoverCardState.OPEN &&
729
- [RdxHoverCardAnimationStatus.OPEN_STARTED].includes(this.cssAnimationStatus())) ||
730
- (this.cssClosingAnimation() &&
731
- state === RdxHoverCardState.CLOSED &&
732
- [RdxHoverCardAnimationStatus.CLOSED_STARTED].includes(this.cssAnimationStatus())));
733
- }
734
- /** @ignore */
735
- ifOpenOrCloseWithAnimations(cssAnimationStatus) {
736
- return (this.contentAttributesComponent() &&
737
- this.cssAnimation() &&
738
- cssAnimationStatus &&
739
- ((this.cssOpeningAnimation() &&
740
- this.state() === RdxHoverCardState.OPEN &&
741
- [RdxHoverCardAnimationStatus.OPEN_ENDED].includes(cssAnimationStatus)) ||
742
- (this.cssClosingAnimation() &&
743
- this.state() === RdxHoverCardState.CLOSED &&
744
- [RdxHoverCardAnimationStatus.CLOSED_ENDED].includes(cssAnimationStatus))));
745
- }
746
- /** @ignore */
747
- openOrClose(state) {
748
- const isOpen = this.isOpen(state);
749
- isOpen ? this.openContent() : this.closeContent();
750
- }
751
- /** @ignore */
752
- emitOnOpenOrOnClosed(state) {
753
- this.isOpen(state)
754
- ? this.attachDetachEvent() === RdxHoverCardAttachDetachEvent.ATTACH && this.emitOnOpen()
755
- : this.attachDetachEvent() === RdxHoverCardAttachDetachEvent.DETACH && this.emitOnClosed();
756
- }
757
- /** @ignore */
758
- canEmitOnOpenOrOnClosed() {
759
- return (!this.cssAnimation() ||
760
- (!this.cssOpeningAnimation() && this.state() === RdxHoverCardState.OPEN) ||
761
- (this.cssOpeningAnimation() &&
762
- this.state() === RdxHoverCardState.OPEN &&
763
- this.cssAnimationStatus() === RdxHoverCardAnimationStatus.OPEN_ENDED) ||
764
- (!this.cssClosingAnimation() && this.state() === RdxHoverCardState.CLOSED) ||
765
- (this.cssClosingAnimation() &&
766
- this.state() === RdxHoverCardState.CLOSED &&
767
- this.cssAnimationStatus() === RdxHoverCardAnimationStatus.CLOSED_ENDED));
768
- }
769
- /** @ignore */
770
- onStateChangeEffect() {
771
- let isFirst = true;
772
- effect(() => {
773
- const state = this.state();
774
- untracked(() => {
775
- if (isFirst) {
776
- isFirst = false;
777
- return;
778
- }
779
- if (!this.ifOpenOrCloseWithoutAnimations(state)) {
780
- return;
781
- }
782
- this.openOrClose(state);
783
- });
784
- }, {});
785
- }
786
- /** @ignore */
787
- onCssAnimationStatusChangeChangeEffect() {
788
- let isFirst = true;
789
- effect(() => {
790
- const cssAnimationStatus = this.cssAnimationStatus();
791
- untracked(() => {
792
- if (isFirst) {
793
- isFirst = false;
794
- return;
795
- }
796
- if (!this.ifOpenOrCloseWithAnimations(cssAnimationStatus)) {
797
- return;
798
- }
799
- this.openOrClose(this.state());
800
- });
801
- });
802
- }
803
- /** @ignore */
804
- emitOpenOrClosedEventEffect() {
805
- let isFirst = true;
806
- effect(() => {
807
- this.attachDetachEvent();
808
- this.cssAnimationStatus();
809
- untracked(() => {
810
- if (isFirst) {
811
- isFirst = false;
812
- return;
813
- }
814
- const canEmitOpenClose = untracked(() => this.canEmitOnOpenOrOnClosed());
815
- if (!canEmitOpenClose) {
816
- return;
817
- }
818
- this.emitOnOpenOrOnClosed(this.state());
819
- });
820
- });
821
- }
822
- /** @ignore */
823
- onOpenChangeEffect() {
824
- effect(() => {
825
- const open = this.open();
826
- untracked(() => {
827
- this.setState(open ? RdxHoverCardState.OPEN : RdxHoverCardState.CLOSED);
828
- });
829
- });
830
- }
831
- /** @ignore */
832
- onIsFirstDefaultOpenChangeEffect() {
833
- const effectRef = effect(() => {
834
- const defaultOpen = this.defaultOpen();
835
- untracked(() => {
836
- if (!defaultOpen || this.open()) {
837
- effectRef.destroy();
838
- return;
839
- }
840
- this.handleOpen();
841
- });
842
- }, ...(ngDevMode ? [{ debugName: "effectRef" }] : /* istanbul ignore next */ []));
843
- }
844
- /** @ignore */
845
- actionSubscription() {
846
- this.actionSubject$
847
- .asObservable()
848
- .pipe(map((action) => {
849
- switch (action) {
850
- case RdxHoverCardAction.OPEN:
851
- return { action, duration: this.openDelay() };
852
- case RdxHoverCardAction.CLOSE:
853
- return { action, duration: this.closeDelay() };
854
- }
855
- }), debounce((config) => timer(config.duration)), tap((config) => {
856
- switch (config.action) {
857
- case RdxHoverCardAction.OPEN:
858
- this.setState(RdxHoverCardState.OPEN);
859
- break;
860
- case RdxHoverCardAction.CLOSE:
861
- this.setState(RdxHoverCardState.CLOSED);
862
- break;
863
- }
864
- }), takeUntilDestroyed())
865
- .subscribe();
866
- }
867
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxHoverCardRootDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
868
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.9", type: RdxHoverCardRootDirective, isStandalone: true, selector: "[rdxHoverCardRoot]", inputs: { anchor: { classPropertyName: "anchor", publicName: "anchor", isSignal: true, isRequired: false, transformFunction: null }, defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, openDelay: { classPropertyName: "openDelay", publicName: "openDelay", isSignal: true, isRequired: false, transformFunction: null }, closeDelay: { classPropertyName: "closeDelay", publicName: "closeDelay", isSignal: true, isRequired: false, transformFunction: null }, externalControl: { classPropertyName: "externalControl", publicName: "externalControl", isSignal: true, isRequired: false, transformFunction: null }, cssAnimation: { classPropertyName: "cssAnimation", publicName: "cssAnimation", isSignal: true, isRequired: false, transformFunction: null }, cssOpeningAnimation: { classPropertyName: "cssOpeningAnimation", publicName: "cssOpeningAnimation", isSignal: true, isRequired: false, transformFunction: null }, cssClosingAnimation: { classPropertyName: "cssClosingAnimation", publicName: "cssClosingAnimation", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "contentDirective", first: true, predicate: RdxHoverCardContentDirective, descendants: true, isSignal: true }, { propertyName: "triggerDirective", first: true, predicate: RdxHoverCardTriggerDirective, descendants: true, isSignal: true }, { propertyName: "arrowDirective", first: true, predicate: RdxHoverCardArrowToken, descendants: true, isSignal: true }, { propertyName: "closeDirective", first: true, predicate: RdxHoverCardCloseToken, descendants: true, isSignal: true }, { propertyName: "contentAttributesComponent", first: true, predicate: RdxHoverCardContentAttributesToken, descendants: true, isSignal: true }, { propertyName: "internalAnchorDirective", first: true, predicate: RdxHoverCardAnchorToken, descendants: true, isSignal: true }], exportAs: ["rdxHoverCardRoot"], ngImport: i0 }); }
869
- }
870
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxHoverCardRootDirective, decorators: [{
871
- type: Directive,
872
- args: [{
873
- selector: '[rdxHoverCardRoot]',
874
- exportAs: 'rdxHoverCardRoot'
875
- }]
876
- }], ctorParameters: () => [], propDecorators: { anchor: [{ type: i0.Input, args: [{ isSignal: true, alias: "anchor", required: false }] }], defaultOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultOpen", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], openDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "openDelay", required: false }] }], closeDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeDelay", required: false }] }], externalControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "externalControl", required: false }] }], cssAnimation: [{ type: i0.Input, args: [{ isSignal: true, alias: "cssAnimation", required: false }] }], cssOpeningAnimation: [{ type: i0.Input, args: [{ isSignal: true, alias: "cssOpeningAnimation", required: false }] }], cssClosingAnimation: [{ type: i0.Input, args: [{ isSignal: true, alias: "cssClosingAnimation", required: false }] }], contentDirective: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RdxHoverCardContentDirective), { isSignal: true }] }], triggerDirective: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RdxHoverCardTriggerDirective), { isSignal: true }] }], arrowDirective: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RdxHoverCardArrowToken), { isSignal: true }] }], closeDirective: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RdxHoverCardCloseToken), { isSignal: true }] }], contentAttributesComponent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RdxHoverCardContentAttributesToken), { isSignal: true }] }], internalAnchorDirective: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RdxHoverCardAnchorToken), { isSignal: true }] }] } });
877
-
878
- function injectHoverCardRoot(optional = false) {
879
- isDevMode() && assertInInjectionContext(injectHoverCardRoot);
880
- return inject(RdxHoverCardRootDirective, { optional });
881
- }
882
-
883
- class RdxHoverCardAnchorDirective {
884
- constructor() {
885
- /**
886
- * @ignore
887
- * If outside the rootDirective then null, otherwise the rootDirective directive - with optional `true` passed in as the first param.
888
- * If outside the rootDirective and non-null value that means the html structure is wrong - hover-card inside hover-card.
889
- * */
890
- this.rootDirective = injectHoverCardRoot(true);
891
- /** @ignore */
892
- this.elementRef = inject(ElementRef);
893
- /** @ignore */
894
- this.overlayOrigin = inject(CdkOverlayOrigin);
895
- /** @ignore */
896
- this.document = injectDocument();
897
- /** @ignore */
898
- this.name = computed(() => `rdx-hover-card-external-anchor-${this.rootDirective?.uniqueId()}`, ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
899
- }
900
- /** @ignore */
901
- click() {
902
- this.emitOutsideClick();
903
- }
904
- /** @ignore */
905
- setRoot(root) {
906
- this.rootDirective = root;
907
- }
908
- emitOutsideClick() {
909
- if (!this.rootDirective?.isOpen() || this.rootDirective?.contentDirective().onOverlayOutsideClickDisabled()) {
910
- return;
911
- }
912
- const clickEvent = new MouseEvent('click', {
913
- view: this.document.defaultView,
914
- bubbles: true,
915
- cancelable: true,
916
- relatedTarget: this.elementRef.nativeElement
917
- });
918
- this.rootDirective?.triggerDirective().elementRef.nativeElement.dispatchEvent(clickEvent);
919
- }
920
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxHoverCardAnchorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
921
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxHoverCardAnchorDirective, isStandalone: true, selector: "[rdxHoverCardAnchor]", host: { attributes: { "type": "button" }, listeners: { "click": "click()" }, properties: { "attr.id": "name()", "attr.aria-haspopup": "\"dialog\"" } }, providers: [
922
- {
923
- provide: RdxHoverCardAnchorToken,
924
- useExisting: forwardRef(() => RdxHoverCardAnchorDirective)
925
- }
926
- ], exportAs: ["rdxHoverCardAnchor"], hostDirectives: [{ directive: i1.CdkOverlayOrigin }], ngImport: i0 }); }
927
- }
928
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxHoverCardAnchorDirective, decorators: [{
929
- type: Directive,
930
- args: [{
931
- selector: '[rdxHoverCardAnchor]',
932
- exportAs: 'rdxHoverCardAnchor',
933
- hostDirectives: [CdkOverlayOrigin],
934
- host: {
935
- type: 'button',
936
- '[attr.id]': 'name()',
937
- '[attr.aria-haspopup]': '"dialog"',
938
- '(click)': 'click()'
939
- },
940
- providers: [
941
- {
942
- provide: RdxHoverCardAnchorToken,
943
- useExisting: forwardRef(() => RdxHoverCardAnchorDirective)
944
- }
945
- ]
946
- }]
947
- }] });
948
-
949
- /**
950
- * @group Components
951
- */
952
- class RdxHoverCardArrowDirective {
953
- constructor() {
954
- /** @ignore */
955
- this.renderer = inject(Renderer2);
956
- /** @ignore */
957
- this.rootDirective = injectHoverCardRoot();
958
- /** @ignore */
959
- this.elementRef = inject(ElementRef);
960
- /**
961
- * The width of the arrow in pixels.
962
- * @group Props
963
- * @defaultValue 10
964
- */
965
- this.width = input(RDX_POSITIONING_DEFAULTS.arrow.width, { ...(ngDevMode ? { debugName: "width" } : /* istanbul ignore next */ {}), transform: numberAttribute });
966
- /**
967
- * The height of the arrow in pixels.
968
- * @group Props
969
- * @defaultValue 5
970
- */
971
- this.height = input(RDX_POSITIONING_DEFAULTS.arrow.height, { ...(ngDevMode ? { debugName: "height" } : /* istanbul ignore next */ {}), transform: numberAttribute });
972
- /** @ignore */
973
- this.arrowSvgElement = computed(() => {
974
- const width = this.width();
975
- const height = this.height();
976
- const svgElement = this.renderer.createElement('svg', 'svg');
977
- this.renderer.setAttribute(svgElement, 'viewBox', '0 0 30 10');
978
- this.renderer.setAttribute(svgElement, 'width', String(width));
979
- this.renderer.setAttribute(svgElement, 'height', String(height));
980
- const polygonElement = this.renderer.createElement('polygon', 'svg');
981
- this.renderer.setAttribute(polygonElement, 'points', '0,0 30,0 15,10');
982
- this.renderer.setAttribute(svgElement, 'preserveAspectRatio', 'none');
983
- this.renderer.appendChild(svgElement, polygonElement);
984
- return svgElement;
985
- }, ...(ngDevMode ? [{ debugName: "arrowSvgElement" }] : /* istanbul ignore next */ []));
986
- /** @ignore */
987
- this.currentArrowSvgElement = signal(void 0, ...(ngDevMode ? [{ debugName: "currentArrowSvgElement" }] : /* istanbul ignore next */ []));
988
- /** @ignore */
989
- this.position = toSignal(this.rootDirective.contentDirective().positionChange());
990
- afterNextRender({
991
- write: () => {
992
- if (this.elementRef.nativeElement.parentElement) {
993
- this.renderer.setStyle(this.elementRef.nativeElement.parentElement, 'position', 'relative');
994
- }
995
- this.renderer.setStyle(this.elementRef.nativeElement, 'position', 'absolute');
996
- this.renderer.setStyle(this.elementRef.nativeElement, 'boxSizing', '');
997
- this.renderer.setStyle(this.elementRef.nativeElement, 'fontSize', '0px');
998
- }
999
- });
1000
- this.onArrowSvgElementChangeEffect();
1001
- this.onContentPositionAndArrowDimensionsChangeEffect();
1002
- }
1003
- /** @ignore */
1004
- setAnchorOrTriggerRect() {
1005
- this.anchorOrTriggerRect = (this.rootDirective.anchorDirective() ?? this.rootDirective.triggerDirective()).elementRef.nativeElement.getBoundingClientRect();
1006
- }
1007
- /** @ignore */
1008
- setPosition(position, arrowDimensions) {
1009
- this.setAnchorOrTriggerRect();
1010
- const posParams = getArrowPositionParams(getSideAndAlignFromAllPossibleConnectedPositions(position.connectionPair), { width: arrowDimensions.width, height: arrowDimensions.height }, { width: this.anchorOrTriggerRect.width, height: this.anchorOrTriggerRect.height });
1011
- this.renderer.setStyle(this.elementRef.nativeElement, 'top', posParams.top);
1012
- this.renderer.setStyle(this.elementRef.nativeElement, 'bottom', '');
1013
- this.renderer.setStyle(this.elementRef.nativeElement, 'left', posParams.left);
1014
- this.renderer.setStyle(this.elementRef.nativeElement, 'right', '');
1015
- this.renderer.setStyle(this.elementRef.nativeElement, 'transform', posParams.transform);
1016
- this.renderer.setStyle(this.elementRef.nativeElement, 'transformOrigin', posParams.transformOrigin);
1017
- }
1018
- /** @ignore */
1019
- onArrowSvgElementChangeEffect() {
1020
- effect(() => {
1021
- const arrowElement = this.arrowSvgElement();
1022
- untracked(() => {
1023
- const currentArrowSvgElement = this.currentArrowSvgElement();
1024
- if (currentArrowSvgElement) {
1025
- this.renderer.removeChild(this.elementRef.nativeElement, currentArrowSvgElement);
1026
- }
1027
- this.currentArrowSvgElement.set(arrowElement);
1028
- this.renderer.setStyle(this.elementRef.nativeElement, 'width', `${this.width()}px`);
1029
- this.renderer.setStyle(this.elementRef.nativeElement, 'height', `${this.height()}px`);
1030
- this.renderer.appendChild(this.elementRef.nativeElement, this.currentArrowSvgElement());
1031
- });
1032
- });
1033
- }
1034
- /** @ignore */
1035
- onContentPositionAndArrowDimensionsChangeEffect() {
1036
- effect(() => {
1037
- const position = this.position();
1038
- const arrowDimensions = { width: this.width(), height: this.height() };
1039
- untracked(() => {
1040
- if (!position) {
1041
- return;
1042
- }
1043
- this.setPosition(position, arrowDimensions);
1044
- });
1045
- });
1046
- }
1047
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxHoverCardArrowDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
1048
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxHoverCardArrowDirective, isStandalone: true, selector: "[rdxHoverCardArrow]", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
1049
- {
1050
- provide: RdxHoverCardArrowToken,
1051
- useExisting: forwardRef(() => RdxHoverCardArrowDirective)
1052
- }
1053
- ], ngImport: i0 }); }
1054
- }
1055
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxHoverCardArrowDirective, decorators: [{
1056
- type: Directive,
1057
- args: [{
1058
- selector: '[rdxHoverCardArrow]',
1059
- providers: [
1060
- {
1061
- provide: RdxHoverCardArrowToken,
1062
- useExisting: forwardRef(() => RdxHoverCardArrowDirective)
1063
- }
1064
- ]
1065
- }]
1066
- }], ctorParameters: () => [], propDecorators: { width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }] } });
1067
-
1068
- /**
1069
- * TODO: to be removed? But it seems to be useful when controlled from outside
1070
- */
1071
- class RdxHoverCardCloseDirective {
1072
- constructor() {
1073
- /** @ignore */
1074
- this.rootDirective = injectHoverCardRoot();
1075
- /** @ignore */
1076
- this.elementRef = inject(ElementRef);
1077
- /** @ignore */
1078
- this.renderer = inject(Renderer2);
1079
- this.onIsControlledExternallyEffect();
1080
- }
1081
- /** @ignore */
1082
- onIsControlledExternallyEffect() {
1083
- effect(() => {
1084
- const isControlledExternally = this.rootDirective.controlledExternally()();
1085
- untracked(() => {
1086
- this.renderer.setStyle(this.elementRef.nativeElement, 'display', isControlledExternally ? null : 'none');
1087
- });
1088
- });
1089
- }
1090
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxHoverCardCloseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
1091
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxHoverCardCloseDirective, isStandalone: true, selector: "[rdxHoverCardClose]", host: { attributes: { "type": "button" }, listeners: { "click": "rootDirective.handleClose(true)" } }, providers: [
1092
- {
1093
- provide: RdxHoverCardCloseToken,
1094
- useExisting: forwardRef(() => RdxHoverCardCloseDirective)
1095
- }
1096
- ], ngImport: i0 }); }
1097
- }
1098
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxHoverCardCloseDirective, decorators: [{
1099
- type: Directive,
1100
- args: [{
1101
- selector: '[rdxHoverCardClose]',
1102
- host: {
1103
- type: 'button',
1104
- '(click)': 'rootDirective.handleClose(true)'
1105
- },
1106
- providers: [
1107
- {
1108
- provide: RdxHoverCardCloseToken,
1109
- useExisting: forwardRef(() => RdxHoverCardCloseDirective)
1110
- }
1111
- ]
1112
- }]
1113
- }], ctorParameters: () => [] });
1114
-
1115
- class RdxHoverCardContentAttributesComponent {
1116
- constructor() {
1117
- /** @ignore */
1118
- this.rootDirective = injectHoverCardRoot();
1119
- /** @ignore */
1120
- this.name = computed(() => `rdx-hover-card-content-attributes-${this.rootDirective.uniqueId()}`, ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
1121
- /** @ignore */
1122
- this.disableAnimation = computed(() => !this.canAnimate(), ...(ngDevMode ? [{ debugName: "disableAnimation" }] : /* istanbul ignore next */ []));
1123
- }
1124
- /** @ignore */
1125
- onAnimationStart(_) {
1126
- this.rootDirective.cssAnimationStatus.set(this.rootDirective.state() === RdxHoverCardState.OPEN
1127
- ? RdxHoverCardAnimationStatus.OPEN_STARTED
1128
- : RdxHoverCardAnimationStatus.CLOSED_STARTED);
1129
- }
1130
- /** @ignore */
1131
- onAnimationEnd(_) {
1132
- this.rootDirective.cssAnimationStatus.set(this.rootDirective.state() === RdxHoverCardState.OPEN
1133
- ? RdxHoverCardAnimationStatus.OPEN_ENDED
1134
- : RdxHoverCardAnimationStatus.CLOSED_ENDED);
1135
- }
1136
- /** @ignore */
1137
- pointerenter() {
1138
- this.rootDirective.handleOpen();
1139
- }
1140
- /** @ignore */
1141
- pointerleave() {
1142
- this.rootDirective.handleClose();
1143
- }
1144
- /** @ignore */
1145
- focus() {
1146
- this.rootDirective.handleOpen();
1147
- }
1148
- /** @ignore */
1149
- blur() {
1150
- this.rootDirective.handleClose();
1151
- }
1152
- /** @ignore */
1153
- canAnimate() {
1154
- return (this.rootDirective.cssAnimation() &&
1155
- ((this.rootDirective.cssOpeningAnimation() && this.rootDirective.state() === RdxHoverCardState.OPEN) ||
1156
- (this.rootDirective.cssClosingAnimation() && this.rootDirective.state() === RdxHoverCardState.CLOSED)));
1157
- }
1158
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxHoverCardContentAttributesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1159
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: RdxHoverCardContentAttributesComponent, isStandalone: true, selector: "[rdxHoverCardContentAttributes]", host: { listeners: { "animationstart": "onAnimationStart($event)", "animationend": "onAnimationEnd($event)", "pointerenter": "pointerenter()", "pointerleave": "pointerleave()", "focus": "focus()", "blur": "blur()" }, properties: { "attr.role": "\"dialog\"", "attr.id": "name()", "attr.data-state": "rootDirective.state()", "attr.data-side": "rootDirective.contentDirective().side()", "attr.data-align": "rootDirective.contentDirective().align()", "style": "disableAnimation() ? {animation: \"none !important\"} : null" } }, providers: [
1160
- {
1161
- provide: RdxHoverCardContentAttributesToken,
1162
- useExisting: forwardRef(() => RdxHoverCardContentAttributesComponent)
1163
- }
1164
- ], ngImport: i0, template: `
1165
- <ng-content />
1166
- `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1167
- }
1168
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxHoverCardContentAttributesComponent, decorators: [{
1169
- type: Component,
1170
- args: [{
1171
- selector: '[rdxHoverCardContentAttributes]',
1172
- template: `
1173
- <ng-content />
1174
- `,
1175
- host: {
1176
- '[attr.role]': '"dialog"',
1177
- '[attr.id]': 'name()',
1178
- '[attr.data-state]': 'rootDirective.state()',
1179
- '[attr.data-side]': 'rootDirective.contentDirective().side()',
1180
- '[attr.data-align]': 'rootDirective.contentDirective().align()',
1181
- '[style]': 'disableAnimation() ? {animation: "none !important"} : null',
1182
- '(animationstart)': 'onAnimationStart($event)',
1183
- '(animationend)': 'onAnimationEnd($event)',
1184
- '(pointerenter)': 'pointerenter()',
1185
- '(pointerleave)': 'pointerleave()',
1186
- '(focus)': 'focus()',
1187
- '(blur)': 'blur()'
1188
- },
1189
- providers: [
1190
- {
1191
- provide: RdxHoverCardContentAttributesToken,
1192
- useExisting: forwardRef(() => RdxHoverCardContentAttributesComponent)
1193
- }
1194
- ],
1195
- changeDetection: ChangeDetectionStrategy.OnPush
1196
- }]
1197
- }] });
1198
-
1199
- const _imports = [
1200
- RdxHoverCardArrowDirective,
1201
- RdxHoverCardCloseDirective,
1202
- RdxHoverCardContentDirective,
1203
- RdxHoverCardTriggerDirective,
1204
- RdxHoverCardRootDirective,
1205
- RdxHoverCardAnchorDirective,
1206
- RdxHoverCardContentAttributesComponent
1207
- ];
1208
- class RdxHoverCardModule {
1209
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxHoverCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
1210
- static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: RdxHoverCardModule, imports: [RdxHoverCardArrowDirective,
1211
- RdxHoverCardCloseDirective,
1212
- RdxHoverCardContentDirective,
1213
- RdxHoverCardTriggerDirective,
1214
- RdxHoverCardRootDirective,
1215
- RdxHoverCardAnchorDirective,
1216
- RdxHoverCardContentAttributesComponent], exports: [RdxHoverCardArrowDirective,
1217
- RdxHoverCardCloseDirective,
1218
- RdxHoverCardContentDirective,
1219
- RdxHoverCardTriggerDirective,
1220
- RdxHoverCardRootDirective,
1221
- RdxHoverCardAnchorDirective,
1222
- RdxHoverCardContentAttributesComponent] }); }
1223
- static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxHoverCardModule }); }
1224
- }
1225
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxHoverCardModule, decorators: [{
1226
- type: NgModule,
1227
- args: [{
1228
- imports: [..._imports],
1229
- exports: [..._imports]
1230
- }]
1231
- }] });
1232
-
1233
- /**
1234
- * Generated bundle index. Do not edit.
1235
- */
1236
-
1237
- export { RdxHoverCardAnchorDirective, RdxHoverCardArrowDirective, RdxHoverCardCloseDirective, RdxHoverCardContentAttributesComponent, RdxHoverCardContentDirective, RdxHoverCardModule, RdxHoverCardRootDirective, RdxHoverCardTriggerDirective };
1238
- //# sourceMappingURL=radix-ng-primitives-hover-card.mjs.map