@raqm/ui 0.0.0-stage → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (178) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/LICENSE +21 -0
  3. package/NOTICE.md +28 -0
  4. package/README.md +126 -3
  5. package/combobox/README.md +17 -0
  6. package/fesm2022/raqm-ui-accordion.mjs +414 -0
  7. package/fesm2022/raqm-ui-accordion.mjs.map +1 -0
  8. package/fesm2022/raqm-ui-alert-dialog.mjs +457 -0
  9. package/fesm2022/raqm-ui-alert-dialog.mjs.map +1 -0
  10. package/fesm2022/raqm-ui-alert.mjs +195 -0
  11. package/fesm2022/raqm-ui-alert.mjs.map +1 -0
  12. package/fesm2022/raqm-ui-aspect-ratio.mjs +66 -0
  13. package/fesm2022/raqm-ui-aspect-ratio.mjs.map +1 -0
  14. package/fesm2022/raqm-ui-attachment.mjs +435 -0
  15. package/fesm2022/raqm-ui-attachment.mjs.map +1 -0
  16. package/fesm2022/raqm-ui-avatar.mjs +337 -0
  17. package/fesm2022/raqm-ui-avatar.mjs.map +1 -0
  18. package/fesm2022/raqm-ui-badge.mjs +68 -0
  19. package/fesm2022/raqm-ui-badge.mjs.map +1 -0
  20. package/fesm2022/raqm-ui-breadcrumb.mjs +309 -0
  21. package/fesm2022/raqm-ui-breadcrumb.mjs.map +1 -0
  22. package/fesm2022/raqm-ui-button-group.mjs +138 -0
  23. package/fesm2022/raqm-ui-button-group.mjs.map +1 -0
  24. package/fesm2022/raqm-ui-button.mjs +295 -0
  25. package/fesm2022/raqm-ui-button.mjs.map +1 -0
  26. package/fesm2022/raqm-ui-calendar.mjs +1394 -0
  27. package/fesm2022/raqm-ui-calendar.mjs.map +1 -0
  28. package/fesm2022/raqm-ui-card.mjs +331 -0
  29. package/fesm2022/raqm-ui-card.mjs.map +1 -0
  30. package/fesm2022/raqm-ui-carousel.mjs +410 -0
  31. package/fesm2022/raqm-ui-carousel.mjs.map +1 -0
  32. package/fesm2022/raqm-ui-checkbox.mjs +86 -0
  33. package/fesm2022/raqm-ui-checkbox.mjs.map +1 -0
  34. package/fesm2022/raqm-ui-collapsible.mjs +266 -0
  35. package/fesm2022/raqm-ui-collapsible.mjs.map +1 -0
  36. package/fesm2022/raqm-ui-combobox.mjs +1584 -0
  37. package/fesm2022/raqm-ui-combobox.mjs.map +1 -0
  38. package/fesm2022/raqm-ui-command.mjs +1210 -0
  39. package/fesm2022/raqm-ui-command.mjs.map +1 -0
  40. package/fesm2022/raqm-ui-context-menu.mjs +723 -0
  41. package/fesm2022/raqm-ui-context-menu.mjs.map +1 -0
  42. package/fesm2022/raqm-ui-dialog.mjs +1214 -0
  43. package/fesm2022/raqm-ui-dialog.mjs.map +1 -0
  44. package/fesm2022/raqm-ui-drawer.mjs +687 -0
  45. package/fesm2022/raqm-ui-drawer.mjs.map +1 -0
  46. package/fesm2022/raqm-ui-dropdown-menu.mjs +1168 -0
  47. package/fesm2022/raqm-ui-dropdown-menu.mjs.map +1 -0
  48. package/fesm2022/raqm-ui-empty.mjs +272 -0
  49. package/fesm2022/raqm-ui-empty.mjs.map +1 -0
  50. package/fesm2022/raqm-ui-field.mjs +517 -0
  51. package/fesm2022/raqm-ui-field.mjs.map +1 -0
  52. package/fesm2022/raqm-ui-hover-card.mjs +828 -0
  53. package/fesm2022/raqm-ui-hover-card.mjs.map +1 -0
  54. package/fesm2022/raqm-ui-input-group.mjs +270 -0
  55. package/fesm2022/raqm-ui-input-group.mjs.map +1 -0
  56. package/fesm2022/raqm-ui-input-otp.mjs +788 -0
  57. package/fesm2022/raqm-ui-input-otp.mjs.map +1 -0
  58. package/fesm2022/raqm-ui-input.mjs +73 -0
  59. package/fesm2022/raqm-ui-input.mjs.map +1 -0
  60. package/fesm2022/raqm-ui-item.mjs +495 -0
  61. package/fesm2022/raqm-ui-item.mjs.map +1 -0
  62. package/fesm2022/raqm-ui-kbd.mjs +80 -0
  63. package/fesm2022/raqm-ui-kbd.mjs.map +1 -0
  64. package/fesm2022/raqm-ui-label.mjs +44 -0
  65. package/fesm2022/raqm-ui-label.mjs.map +1 -0
  66. package/fesm2022/raqm-ui-menubar.mjs +536 -0
  67. package/fesm2022/raqm-ui-menubar.mjs.map +1 -0
  68. package/fesm2022/raqm-ui-native-select.mjs +131 -0
  69. package/fesm2022/raqm-ui-native-select.mjs.map +1 -0
  70. package/fesm2022/raqm-ui-navigation-menu.mjs +1399 -0
  71. package/fesm2022/raqm-ui-navigation-menu.mjs.map +1 -0
  72. package/fesm2022/raqm-ui-overlay-internal.mjs +185 -0
  73. package/fesm2022/raqm-ui-overlay-internal.mjs.map +1 -0
  74. package/fesm2022/raqm-ui-pagination.mjs +440 -0
  75. package/fesm2022/raqm-ui-pagination.mjs.map +1 -0
  76. package/fesm2022/raqm-ui-popover.mjs +1495 -0
  77. package/fesm2022/raqm-ui-popover.mjs.map +1 -0
  78. package/fesm2022/raqm-ui-progress.mjs +369 -0
  79. package/fesm2022/raqm-ui-progress.mjs.map +1 -0
  80. package/fesm2022/raqm-ui-questionnaire.mjs +1005 -0
  81. package/fesm2022/raqm-ui-questionnaire.mjs.map +1 -0
  82. package/fesm2022/raqm-ui-radio-group.mjs +151 -0
  83. package/fesm2022/raqm-ui-radio-group.mjs.map +1 -0
  84. package/fesm2022/raqm-ui-resizable.mjs +439 -0
  85. package/fesm2022/raqm-ui-resizable.mjs.map +1 -0
  86. package/fesm2022/raqm-ui-scroll-area.mjs +510 -0
  87. package/fesm2022/raqm-ui-scroll-area.mjs.map +1 -0
  88. package/fesm2022/raqm-ui-select.mjs +1073 -0
  89. package/fesm2022/raqm-ui-select.mjs.map +1 -0
  90. package/fesm2022/raqm-ui-separator.mjs +103 -0
  91. package/fesm2022/raqm-ui-separator.mjs.map +1 -0
  92. package/fesm2022/raqm-ui-sheet.mjs +411 -0
  93. package/fesm2022/raqm-ui-sheet.mjs.map +1 -0
  94. package/fesm2022/raqm-ui-sidebar.mjs +1784 -0
  95. package/fesm2022/raqm-ui-sidebar.mjs.map +1 -0
  96. package/fesm2022/raqm-ui-skeleton.mjs +50 -0
  97. package/fesm2022/raqm-ui-skeleton.mjs.map +1 -0
  98. package/fesm2022/raqm-ui-slider.mjs +609 -0
  99. package/fesm2022/raqm-ui-slider.mjs.map +1 -0
  100. package/fesm2022/raqm-ui-spinner.mjs +137 -0
  101. package/fesm2022/raqm-ui-spinner.mjs.map +1 -0
  102. package/fesm2022/raqm-ui-switch.mjs +109 -0
  103. package/fesm2022/raqm-ui-switch.mjs.map +1 -0
  104. package/fesm2022/raqm-ui-table.mjs +271 -0
  105. package/fesm2022/raqm-ui-table.mjs.map +1 -0
  106. package/fesm2022/raqm-ui-tabs.mjs +536 -0
  107. package/fesm2022/raqm-ui-tabs.mjs.map +1 -0
  108. package/fesm2022/raqm-ui-textarea.mjs +37 -0
  109. package/fesm2022/raqm-ui-textarea.mjs.map +1 -0
  110. package/fesm2022/raqm-ui-toast.mjs +918 -0
  111. package/fesm2022/raqm-ui-toast.mjs.map +1 -0
  112. package/fesm2022/raqm-ui-toggle-group.mjs +462 -0
  113. package/fesm2022/raqm-ui-toggle-group.mjs.map +1 -0
  114. package/fesm2022/raqm-ui-toggle.mjs +158 -0
  115. package/fesm2022/raqm-ui-toggle.mjs.map +1 -0
  116. package/fesm2022/raqm-ui-tooltip.mjs +1226 -0
  117. package/fesm2022/raqm-ui-tooltip.mjs.map +1 -0
  118. package/fesm2022/raqm-ui.mjs +50 -0
  119. package/input-otp/README.md +12 -0
  120. package/package.json +275 -3
  121. package/styles/theme.css +4324 -0
  122. package/types/raqm-ui-accordion.d.ts +124 -0
  123. package/types/raqm-ui-alert-dialog.d.ts +81 -0
  124. package/types/raqm-ui-alert.d.ts +29 -0
  125. package/types/raqm-ui-aspect-ratio.d.ts +13 -0
  126. package/types/raqm-ui-attachment.d.ts +72 -0
  127. package/types/raqm-ui-avatar.d.ts +67 -0
  128. package/types/raqm-ui-badge.d.ts +20 -0
  129. package/types/raqm-ui-breadcrumb.d.ts +35 -0
  130. package/types/raqm-ui-button-group.d.ts +27 -0
  131. package/types/raqm-ui-button.d.ts +80 -0
  132. package/types/raqm-ui-calendar.d.ts +359 -0
  133. package/types/raqm-ui-card.d.ts +34 -0
  134. package/types/raqm-ui-carousel.d.ts +81 -0
  135. package/types/raqm-ui-checkbox.d.ts +24 -0
  136. package/types/raqm-ui-collapsible.d.ts +72 -0
  137. package/types/raqm-ui-combobox.d.ts +405 -0
  138. package/types/raqm-ui-command.d.ts +256 -0
  139. package/types/raqm-ui-context-menu.d.ts +196 -0
  140. package/types/raqm-ui-dialog.d.ts +232 -0
  141. package/types/raqm-ui-drawer.d.ts +121 -0
  142. package/types/raqm-ui-dropdown-menu.d.ts +319 -0
  143. package/types/raqm-ui-empty.d.ts +35 -0
  144. package/types/raqm-ui-field.d.ts +88 -0
  145. package/types/raqm-ui-hover-card.d.ts +139 -0
  146. package/types/raqm-ui-input-group.d.ts +45 -0
  147. package/types/raqm-ui-input-otp.d.ts +197 -0
  148. package/types/raqm-ui-input.d.ts +16 -0
  149. package/types/raqm-ui-item.d.ts +71 -0
  150. package/types/raqm-ui-kbd.d.ts +12 -0
  151. package/types/raqm-ui-label.d.ts +6 -0
  152. package/types/raqm-ui-menubar.d.ts +159 -0
  153. package/types/raqm-ui-native-select.d.ts +23 -0
  154. package/types/raqm-ui-navigation-menu.d.ts +230 -0
  155. package/types/raqm-ui-overlay-internal.d.ts +5 -0
  156. package/types/raqm-ui-pagination.d.ts +84 -0
  157. package/types/raqm-ui-popover.d.ts +235 -0
  158. package/types/raqm-ui-progress.d.ts +79 -0
  159. package/types/raqm-ui-questionnaire.d.ts +217 -0
  160. package/types/raqm-ui-radio-group.d.ts +48 -0
  161. package/types/raqm-ui-resizable.d.ts +98 -0
  162. package/types/raqm-ui-scroll-area.d.ts +132 -0
  163. package/types/raqm-ui-select.d.ts +205 -0
  164. package/types/raqm-ui-separator.d.ts +21 -0
  165. package/types/raqm-ui-sheet.d.ts +79 -0
  166. package/types/raqm-ui-sidebar.d.ts +285 -0
  167. package/types/raqm-ui-skeleton.d.ts +6 -0
  168. package/types/raqm-ui-slider.d.ts +129 -0
  169. package/types/raqm-ui-spinner.d.ts +32 -0
  170. package/types/raqm-ui-switch.d.ts +32 -0
  171. package/types/raqm-ui-table.d.ts +36 -0
  172. package/types/raqm-ui-tabs.d.ts +154 -0
  173. package/types/raqm-ui-textarea.d.ts +6 -0
  174. package/types/raqm-ui-toast.d.ts +190 -0
  175. package/types/raqm-ui-toggle-group.d.ts +167 -0
  176. package/types/raqm-ui-toggle.d.ts +42 -0
  177. package/types/raqm-ui-tooltip.d.ts +207 -0
  178. package/types/raqm-ui.d.ts +50 -0
@@ -0,0 +1,1226 @@
1
+ import { DOCUMENT, NgTemplateOutlet } from "@angular/common";
2
+ import * as i0 from "@angular/core";
3
+ import { ChangeDetectionStrategy, Component, DestroyRef, Directive, ElementRef, InjectionToken, Injector, Renderer2, TemplateRef, ViewContainerRef, afterNextRender, booleanAttribute, computed, effect, inject, input, isDevMode, numberAttribute, signal, untracked, viewChild } from "@angular/core";
4
+ import { Directionality } from "@angular/cdk/bidi";
5
+ import { Overlay } from "@angular/cdk/overlay";
6
+ import { ScrollDispatcher, ViewportRuler } from "@angular/cdk/scrolling";
7
+ import { TemplatePortal } from "@angular/cdk/portal";
8
+ import { registerOverlayOwnership } from "@raqm/ui/overlay-internal";
9
+ const RAQM_TOOLTIP = new InjectionToken("RaqmTooltip");
10
+ const RAQM_TOOLTIP_PROVIDER = new InjectionToken("RaqmTooltipProvider");
11
+ var RaqmTooltipLifecycle = class {
12
+ host;
13
+ openRequested = false;
14
+ openReason = "mouse";
15
+ suppressFocusOpen = false;
16
+ providerRegistered = false;
17
+ constructor(host) {
18
+ this.host = host;
19
+ }
20
+ currentReason() {
21
+ return this.openReason;
22
+ }
23
+ requestOpen(ref, reason) {
24
+ if (ref !== this.host.slot.trigger()) return;
25
+ if (this.host.disabled() || ref.disabled) return;
26
+ if (reason === "focus" && this.suppressFocusOpen) return;
27
+ if (this.host.pane.open() || this.host.pane.hasPane) {
28
+ this.host.timers.cancelHoverClose();
29
+ if (reason === "focus") this.openReason = "focus";
30
+ return;
31
+ }
32
+ if (!this.host.slot.canOpen()) {
33
+ this.openRequested = true;
34
+ this.openReason = reason;
35
+ return;
36
+ }
37
+ this.openRequested = true;
38
+ this.openReason = reason;
39
+ this.host.timers.cancelOpen();
40
+ if (reason === "focus") {
41
+ this.host.timers.cancelHoverClose();
42
+ this.beginOpen("focus");
43
+ return;
44
+ }
45
+ const delay = this.host.delay();
46
+ if (delay > 0) {
47
+ this.host.timers.armOpen(delay);
48
+ return;
49
+ }
50
+ this.beginOpen("mouse");
51
+ }
52
+ requestClose(ref, reason) {
53
+ if (ref !== this.host.slot.trigger()) return;
54
+ this.openRequested = false;
55
+ this.host.timers.cancelOpen();
56
+ if (reason === "focus") {
57
+ this.suppressFocusOpen = false;
58
+ this.host.timers.cancelHoverClose();
59
+ if (this.host.pane.open() || this.host.pane.hasPane) this.beginClose(false);
60
+ return;
61
+ }
62
+ if (reason === "mouse") {
63
+ if (!this.host.pane.open()) return;
64
+ if (this.openReason === "focus" && this.host.slot.isTriggerFocused()) return;
65
+ this.host.timers.scheduleHoverClose();
66
+ return;
67
+ }
68
+ this.suppressFocusOpen = true;
69
+ this.host.timers.cancelHoverClose();
70
+ if (!this.host.pane.open()) return;
71
+ this.beginClose(false);
72
+ }
73
+ closeNow() {
74
+ this.openRequested = false;
75
+ this.host.timers.cancelOpen();
76
+ this.host.timers.cancelHoverClose();
77
+ if (this.host.pane.open() || this.host.pane.hasPane) this.beginClose(true);
78
+ }
79
+ closeForPeer() {
80
+ this.closeNow();
81
+ }
82
+ claimActive() {
83
+ this.host.provider?.registerActive(this);
84
+ this.providerRegistered = true;
85
+ }
86
+ retryRequestedOpen() {
87
+ if (!this.openRequested || this.host.destroyed() || this.host.pane.hasPane) return;
88
+ if (!this.host.slot.canOpen()) return;
89
+ this.beginOpen(this.openReason);
90
+ }
91
+ onOpenElapsed() {
92
+ const trigger = this.host.slot.trigger();
93
+ if (this.openRequested && !this.host.destroyed() && trigger !== null) {
94
+ if (trigger.disabled) {
95
+ this.openRequested = false;
96
+ return;
97
+ }
98
+ this.beginOpen("mouse");
99
+ }
100
+ }
101
+ handleDetached(overlayRef) {
102
+ if (!this.host.pane.owns(overlayRef)) return;
103
+ this.host.pane.releaseOwnership();
104
+ this.openRequested = false;
105
+ this.host.pane.open.set(false);
106
+ this.host.pane.tooltipId.set(null);
107
+ this.host.pane.closing.set(false);
108
+ this.host.position.clear();
109
+ this.host.timers.cancelOpen();
110
+ this.host.timers.cancelHoverClose();
111
+ this.clearProviderRegistration();
112
+ this.host.pane.releaseSubscriptions();
113
+ }
114
+ destroy() {
115
+ this.openRequested = false;
116
+ this.host.timers.cancelOpen();
117
+ this.host.timers.cancelHoverClose();
118
+ this.host.pane.releaseSubscriptions();
119
+ const { pending, overlay } = this.host.pane.takeForDestroy();
120
+ this.clearProviderRegistration();
121
+ pending?.dispose();
122
+ overlay?.dispose();
123
+ }
124
+ beginOpen(reason) {
125
+ const trigger = this.host.slot.trigger();
126
+ const content = this.host.slot.content();
127
+ const panel = this.host.panel();
128
+ if (this.host.destroyed() || this.host.disabled() || trigger === null || trigger.disabled || content === null || panel === void 0 || this.host.pane.hasPane) return;
129
+ this.openRequested = true;
130
+ this.openReason = reason;
131
+ this.host.timers.removePendingEscape();
132
+ this.host.pane.flushPendingDispose();
133
+ this.host.timers.cancelHoverClose();
134
+ this.host.pane.openLayer(trigger, panel);
135
+ }
136
+ beginClose(immediate) {
137
+ this.openRequested = false;
138
+ this.host.pane.open.set(false);
139
+ this.host.pane.tooltipId.set(null);
140
+ this.host.timers.cancelOpen();
141
+ this.host.timers.cancelHoverClose();
142
+ this.clearProviderRegistration();
143
+ this.host.pane.disposePane(immediate);
144
+ }
145
+ clearProviderRegistration() {
146
+ if (this.providerRegistered) {
147
+ this.host.provider?.clearActive(this);
148
+ this.providerRegistered = false;
149
+ }
150
+ }
151
+ };
152
+ const SIDES = [
153
+ "top",
154
+ "bottom",
155
+ "left",
156
+ "right",
157
+ "inline-start",
158
+ "inline-end"
159
+ ];
160
+ const ALIGNS = [
161
+ "start",
162
+ "center",
163
+ "end"
164
+ ];
165
+ const DEFAULT_ALIGN = "center";
166
+ const PANE_CLASS = "raqm-tooltip-overlay-pane";
167
+ const CONTENT_CLASS = "raqm-tooltip-content";
168
+ const CONTENT_ENTERING_CLASS = "raqm-tooltip-content--entering";
169
+ const CONTENT_CLOSING_CLASS = "raqm-tooltip-content--closing";
170
+ let nextTooltipId = 0;
171
+ function nextTooltipRootId() {
172
+ return `raqm-tooltip-${++nextTooltipId}`;
173
+ }
174
+ function prefersReducedMotion() {
175
+ return typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
176
+ }
177
+ function toSide(value) {
178
+ return SIDES.includes(value) ? value : "top";
179
+ }
180
+ function toAlign(value) {
181
+ return ALIGNS.includes(value) ? value : DEFAULT_ALIGN;
182
+ }
183
+ function toDir(value) {
184
+ return value === "ltr" || value === "rtl" ? value : void 0;
185
+ }
186
+ function toOffset(fallback) {
187
+ return (value) => {
188
+ const parsed = numberAttribute(value, fallback);
189
+ return Number.isFinite(parsed) ? parsed : fallback;
190
+ };
191
+ }
192
+ var RaqmTooltipPane = class {
193
+ overlay;
194
+ viewportRuler;
195
+ scrollDispatcher;
196
+ document;
197
+ viewContainerRef;
198
+ position;
199
+ host;
200
+ open = signal(false, ...ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []);
201
+ tooltipId = signal(null, ...ngDevMode ? [{ debugName: "tooltipId" }] : /* istanbul ignore next */ []);
202
+ closing = signal(false, ...ngDevMode ? [{ debugName: "closing" }] : /* istanbul ignore next */ []);
203
+ rootId = nextTooltipRootId();
204
+ overlayRef;
205
+ generation = 0;
206
+ exitTimer;
207
+ pendingDisposeOverlay;
208
+ detachSubscription;
209
+ outsideSubscription;
210
+ viewportSubscription;
211
+ scrollSubscription;
212
+ escapeListener;
213
+ constructor(overlay, viewportRuler, scrollDispatcher, document, viewContainerRef, position, host) {
214
+ this.overlay = overlay;
215
+ this.viewportRuler = viewportRuler;
216
+ this.scrollDispatcher = scrollDispatcher;
217
+ this.document = document;
218
+ this.viewContainerRef = viewContainerRef;
219
+ this.position = position;
220
+ this.host = host;
221
+ }
222
+ get hasPane() {
223
+ return this.overlayRef !== void 0;
224
+ }
225
+ get ref() {
226
+ return this.overlayRef;
227
+ }
228
+ owns(overlayRef) {
229
+ return this.overlayRef === overlayRef;
230
+ }
231
+ openLayer(trigger, panel) {
232
+ const generation = ++this.generation;
233
+ const preferred = this.position.beginPlacement();
234
+ this.host.claimActive();
235
+ const strategy = this.position.buildStrategy(trigger.element, preferred);
236
+ const config = {
237
+ positionStrategy: strategy,
238
+ hasBackdrop: false,
239
+ scrollStrategy: this.overlay.scrollStrategies.noop(),
240
+ panelClass: [PANE_CLASS],
241
+ disposeOnNavigation: true,
242
+ direction: this.position.direction
243
+ };
244
+ const overlayRef = this.overlay.create(config);
245
+ registerOverlayOwnership(trigger.element, overlayRef);
246
+ this.overlayRef = overlayRef;
247
+ this.position.watchSide(strategy, overlayRef);
248
+ this.outsideSubscription = overlayRef.outsidePointerEvents().subscribe((event) => {
249
+ if (event.button === 0) this.host.onOutsidePress(trigger);
250
+ });
251
+ this.detachSubscription = overlayRef.detachments().subscribe(() => this.host.onDetached(overlayRef));
252
+ this.viewportSubscription = this.viewportRuler.change(0).subscribe(() => this.position.reposition());
253
+ this.scrollSubscription = this.scrollDispatcher.ancestorScrolled(trigger.element, 0).subscribe(() => this.position.reposition());
254
+ this.escapeListener = (event) => {
255
+ if (event.key !== "Escape" || !this.open()) return;
256
+ this.host.onEscape(trigger);
257
+ };
258
+ this.document.addEventListener("keydown", this.escapeListener);
259
+ overlayRef.attach(new TemplatePortal(panel, this.viewContainerRef));
260
+ overlayRef.overlayElement.style.visibility = "hidden";
261
+ overlayRef.overlayElement.style.pointerEvents = "none";
262
+ this.open.set(true);
263
+ this.tooltipId.set(this.rootId);
264
+ this.position.attachResizeObserver(trigger.element, overlayRef);
265
+ afterNextRender(() => {
266
+ if (generation !== this.generation || this.overlayRef !== overlayRef) return;
267
+ this.position.reposition();
268
+ this.reveal(overlayRef);
269
+ }, { injector: this.host.injector });
270
+ }
271
+ reposition() {
272
+ this.position.reposition();
273
+ }
274
+ releaseOwnership() {
275
+ this.overlayRef = void 0;
276
+ this.position.discard();
277
+ }
278
+ invalidate() {
279
+ this.generation += 1;
280
+ }
281
+ disposePane(immediate) {
282
+ const overlayRef = this.overlayRef;
283
+ this.overlayRef = void 0;
284
+ this.position.reset();
285
+ this.releaseSubscriptions();
286
+ if (!overlayRef) {
287
+ this.closing.set(false);
288
+ return;
289
+ }
290
+ overlayRef.overlayElement.setAttribute("inert", "");
291
+ overlayRef.overlayElement.setAttribute("aria-hidden", "true");
292
+ if (immediate || prefersReducedMotion()) {
293
+ this.closing.set(false);
294
+ overlayRef.dispose();
295
+ return;
296
+ }
297
+ const surface = overlayRef.overlayElement.querySelector(`.${CONTENT_CLASS}`);
298
+ surface?.classList.remove(CONTENT_ENTERING_CLASS);
299
+ surface?.classList.add(CONTENT_CLOSING_CLASS);
300
+ this.closing.set(true);
301
+ this.pendingDisposeOverlay = overlayRef;
302
+ this.exitTimer = setTimeout(() => {
303
+ this.exitTimer = void 0;
304
+ this.pendingDisposeOverlay = void 0;
305
+ this.closing.set(false);
306
+ overlayRef.dispose();
307
+ }, 150);
308
+ }
309
+ flushPendingDispose() {
310
+ if (this.exitTimer !== void 0) {
311
+ clearTimeout(this.exitTimer);
312
+ this.exitTimer = void 0;
313
+ }
314
+ this.closing.set(false);
315
+ const pending = this.pendingDisposeOverlay;
316
+ this.pendingDisposeOverlay = void 0;
317
+ pending?.dispose();
318
+ }
319
+ reveal(overlayRef) {
320
+ const surface = overlayRef.overlayElement.querySelector(`.${CONTENT_CLASS}`);
321
+ if (!surface || this.overlayRef !== overlayRef) return;
322
+ surface.classList.remove(CONTENT_CLOSING_CLASS);
323
+ surface.classList.add(CONTENT_ENTERING_CLASS);
324
+ overlayRef.overlayElement.style.pointerEvents = "";
325
+ overlayRef.overlayElement.style.visibility = "";
326
+ }
327
+ takeForDestroy() {
328
+ if (this.exitTimer !== void 0) {
329
+ clearTimeout(this.exitTimer);
330
+ this.exitTimer = void 0;
331
+ }
332
+ const pending = this.pendingDisposeOverlay;
333
+ this.pendingDisposeOverlay = void 0;
334
+ const overlayRef = this.overlayRef;
335
+ this.overlayRef = void 0;
336
+ this.position.discard();
337
+ this.closing.set(false);
338
+ this.open.set(false);
339
+ this.tooltipId.set(null);
340
+ return {
341
+ pending,
342
+ overlay: overlayRef
343
+ };
344
+ }
345
+ releaseSubscriptions() {
346
+ this.position.releaseSide();
347
+ this.detachSubscription?.unsubscribe();
348
+ this.detachSubscription = void 0;
349
+ this.outsideSubscription?.unsubscribe();
350
+ this.outsideSubscription = void 0;
351
+ this.viewportSubscription?.unsubscribe();
352
+ this.viewportSubscription = void 0;
353
+ this.scrollSubscription?.unsubscribe();
354
+ this.scrollSubscription = void 0;
355
+ this.position.releaseResizeObserver();
356
+ if (this.escapeListener !== void 0) {
357
+ this.document.removeEventListener("keydown", this.escapeListener);
358
+ this.escapeListener = void 0;
359
+ }
360
+ }
361
+ };
362
+ function layoutBox(element) {
363
+ const parent = element.offsetParent;
364
+ if (!parent) {
365
+ const rect = element.getBoundingClientRect();
366
+ return {
367
+ left: rect.left,
368
+ top: rect.top,
369
+ width: rect.width,
370
+ height: rect.height
371
+ };
372
+ }
373
+ const parentRect = parent.getBoundingClientRect();
374
+ return {
375
+ left: parentRect.left + parent.clientLeft + element.offsetLeft,
376
+ top: parentRect.top + parent.clientTop + element.offsetTop,
377
+ width: element.offsetWidth,
378
+ height: element.offsetHeight
379
+ };
380
+ }
381
+ var RaqmTooltipPosition = class {
382
+ overlay;
383
+ host;
384
+ panelDir = signal("ltr", ...ngDevMode ? [{ debugName: "panelDir" }] : /* istanbul ignore next */ []);
385
+ resolvedSide = signal("top", ...ngDevMode ? [{ debugName: "resolvedSide" }] : /* istanbul ignore next */ []);
386
+ positionStrategy;
387
+ currentPositions = [];
388
+ currentSides = [];
389
+ currentAppliedSide = "top";
390
+ currentDir = "ltr";
391
+ sideSubscription;
392
+ resizeObserver;
393
+ constructor(overlay, host) {
394
+ this.overlay = overlay;
395
+ this.host = host;
396
+ }
397
+ get direction() {
398
+ return this.currentDir;
399
+ }
400
+ beginPlacement() {
401
+ const dir = this.readResolvedDir();
402
+ this.currentDir = dir;
403
+ this.panelDir.set(dir);
404
+ const preferred = this.resolvePhysicalSide(this.host.side());
405
+ this.currentAppliedSide = preferred;
406
+ this.resolvedSide.set(preferred);
407
+ return preferred;
408
+ }
409
+ buildStrategy(origin, preferred) {
410
+ const strategy = this.overlay.position().flexibleConnectedTo(origin);
411
+ strategy.withFlexibleDimensions(false).withGrowAfterOpen(false).withPush(true).withViewportMargin(5);
412
+ this.setPositions(strategy, [preferred, this.oppositeSide(preferred)]);
413
+ this.positionStrategy = strategy;
414
+ return strategy;
415
+ }
416
+ reposition() {
417
+ const overlayRef = this.host.pane();
418
+ const strategy = this.positionStrategy;
419
+ if (!overlayRef || !strategy) return;
420
+ const dir = this.readResolvedDir();
421
+ if (dir !== this.currentDir) {
422
+ this.currentDir = dir;
423
+ this.panelDir.set(dir);
424
+ overlayRef.setDirection(dir);
425
+ }
426
+ const preferred = this.resolvePhysicalSide(this.host.side());
427
+ this.setPositions(strategy, [preferred, this.oppositeSide(preferred)]);
428
+ overlayRef.updatePosition();
429
+ this.positionArrow(this.currentAppliedSide);
430
+ }
431
+ watchSide(strategy, overlayRef) {
432
+ this.sideSubscription = strategy.positionChanges.subscribe((change) => {
433
+ const index = this.currentPositions.indexOf(change.connectionPair);
434
+ const side = this.currentSides[index] ?? this.currentSides[0] ?? this.resolvedSide();
435
+ this.currentAppliedSide = side;
436
+ this.resolvedSide.set(side);
437
+ const surface = overlayRef.overlayElement.querySelector(`.${CONTENT_CLASS}`);
438
+ surface?.setAttribute("data-raqm-side", side);
439
+ this.positionArrow(side, surface ?? void 0);
440
+ });
441
+ }
442
+ setPositions(strategy, sides) {
443
+ this.currentSides = [...sides];
444
+ this.currentPositions = sides.map((side) => this.buildPositionFor(side));
445
+ strategy.withPositions(this.currentPositions);
446
+ }
447
+ buildPositionFor(side) {
448
+ const align = this.host.align();
449
+ const x = align;
450
+ const y = this.toVerticalAlign(align);
451
+ const mainOffset = this.signedSideOffset(side);
452
+ switch (side) {
453
+ case "bottom": return {
454
+ originX: x,
455
+ originY: "bottom",
456
+ overlayX: x,
457
+ overlayY: "top",
458
+ offsetX: this.host.alignOffset(),
459
+ offsetY: mainOffset
460
+ };
461
+ case "left": return this.horizontalPosition("left", y, mainOffset);
462
+ case "right": return this.horizontalPosition("right", y, mainOffset);
463
+ default: return {
464
+ originX: x,
465
+ originY: "top",
466
+ overlayX: x,
467
+ overlayY: "bottom",
468
+ offsetX: this.host.alignOffset(),
469
+ offsetY: mainOffset
470
+ };
471
+ }
472
+ }
473
+ horizontalPosition(side, alignY, offsetX) {
474
+ const rtl = this.currentDir === "rtl";
475
+ return {
476
+ originX: side === "right" ? rtl ? "start" : "end" : rtl ? "end" : "start",
477
+ originY: alignY,
478
+ overlayX: side === "right" ? rtl ? "end" : "start" : rtl ? "start" : "end",
479
+ overlayY: alignY,
480
+ offsetX,
481
+ offsetY: this.host.alignOffset()
482
+ };
483
+ }
484
+ signedSideOffset(side) {
485
+ return side === "bottom" || side === "right" ? this.host.sideOffset() : -this.host.sideOffset();
486
+ }
487
+ toVerticalAlign(align) {
488
+ return align === "start" ? "top" : align === "end" ? "bottom" : "center";
489
+ }
490
+ resolvePhysicalSide(side) {
491
+ switch (side) {
492
+ case "inline-start": return this.currentDir === "rtl" ? "right" : "left";
493
+ case "inline-end": return this.currentDir === "rtl" ? "left" : "right";
494
+ default: return side;
495
+ }
496
+ }
497
+ oppositeSide(side) {
498
+ switch (side) {
499
+ case "top": return "bottom";
500
+ case "bottom": return "top";
501
+ case "left": return "right";
502
+ default: return "left";
503
+ }
504
+ }
505
+ positionArrow(side, surface) {
506
+ const content = surface ?? this.host.pane()?.overlayElement.querySelector(`.raqm-tooltip-content`);
507
+ const trigger = this.host.anchor();
508
+ if (!content || !trigger) return;
509
+ const contentRect = layoutBox(content);
510
+ const triggerRect = trigger.getBoundingClientRect();
511
+ const vertical = side === "top" || side === "bottom";
512
+ const size = vertical ? contentRect.width : contentRect.height;
513
+ const center = vertical ? triggerRect.left + triggerRect.width / 2 - contentRect.left : triggerRect.top + triggerRect.height / 2 - contentRect.top;
514
+ if (size <= 0) return;
515
+ const edge = Math.min(12, size / 2);
516
+ const offset = Math.max(edge, Math.min(center, size - edge));
517
+ content.style.setProperty("--raqm-tooltip-arrow-offset", `${offset}px`);
518
+ }
519
+ readResolvedDir() {
520
+ const explicit = this.host.dir();
521
+ if (explicit === "ltr" || explicit === "rtl") return explicit;
522
+ const computedStyle = getComputedStyle(this.host.element).direction;
523
+ if (computedStyle === "rtl") return "rtl";
524
+ if (computedStyle === "ltr") return "ltr";
525
+ return this.host.directionality?.value ?? "ltr";
526
+ }
527
+ attachResizeObserver(trigger, overlayRef) {
528
+ if (typeof ResizeObserver === "undefined") return;
529
+ this.resizeObserver?.disconnect();
530
+ const observer = new ResizeObserver(() => {
531
+ if (this.host.pane() === overlayRef) this.reposition();
532
+ });
533
+ this.resizeObserver = observer;
534
+ observer.observe(trigger);
535
+ const surface = overlayRef.overlayElement.querySelector(`.${CONTENT_CLASS}`);
536
+ if (surface) observer.observe(surface);
537
+ }
538
+ releaseSide() {
539
+ this.sideSubscription?.unsubscribe();
540
+ this.sideSubscription = void 0;
541
+ }
542
+ releaseResizeObserver() {
543
+ if (this.resizeObserver !== void 0) {
544
+ this.resizeObserver.disconnect();
545
+ this.resizeObserver = void 0;
546
+ }
547
+ }
548
+ reset() {
549
+ this.positionStrategy = void 0;
550
+ this.currentPositions = [];
551
+ this.currentSides = [];
552
+ }
553
+ discard() {
554
+ this.positionStrategy = void 0;
555
+ }
556
+ clear() {
557
+ this.currentPositions = [];
558
+ this.currentSides = [];
559
+ }
560
+ };
561
+ var RaqmTooltipSlot = class {
562
+ document;
563
+ host;
564
+ triggerRef = signal(null, ...ngDevMode ? [{ debugName: "triggerRef" }] : /* istanbul ignore next */ []);
565
+ contentTemplate = signal(null, ...ngDevMode ? [{ debugName: "contentTemplate" }] : /* istanbul ignore next */ []);
566
+ canOpen = computed(() => this.triggerRef() !== null && this.contentTemplate() !== null && this.host.panel() !== void 0, ...ngDevMode ? [{ debugName: "canOpen" }] : /* istanbul ignore next */ []);
567
+ constructor(document, host) {
568
+ this.document = document;
569
+ this.host = host;
570
+ }
571
+ trigger() {
572
+ return this.triggerRef();
573
+ }
574
+ content() {
575
+ return this.contentTemplate();
576
+ }
577
+ registerTrigger(ref) {
578
+ const current = this.triggerRef();
579
+ if (current !== null && current !== ref) {
580
+ if (isDevMode()) console.error("[raqm-tooltip] Only one `[raqm-tooltip-trigger]` is supported per <raqm-tooltip>; the extra trigger is ignored.");
581
+ return;
582
+ }
583
+ this.triggerRef.set(ref);
584
+ this.host.onChanged();
585
+ }
586
+ unregisterTrigger(ref) {
587
+ if (this.triggerRef() !== ref) return;
588
+ this.triggerRef.set(null);
589
+ this.host.onLost();
590
+ }
591
+ registerContent(template) {
592
+ const current = this.contentTemplate();
593
+ if (current !== null && current !== template) {
594
+ if (isDevMode()) console.error("[raqm-tooltip] Only one `ng-template[raqm-tooltip-content]` is supported per <raqm-tooltip>; the extra template is ignored.");
595
+ return;
596
+ }
597
+ this.contentTemplate.set(template);
598
+ this.host.onChanged();
599
+ }
600
+ unregisterContent(template) {
601
+ if (this.contentTemplate() !== template) return;
602
+ this.contentTemplate.set(null);
603
+ this.host.onLost();
604
+ }
605
+ isTriggerFocused() {
606
+ const trigger = this.triggerRef();
607
+ return trigger !== null && this.document.activeElement === trigger.element;
608
+ }
609
+ };
610
+ var RaqmTooltipTimers = class {
611
+ document;
612
+ host;
613
+ openTimer;
614
+ hoverCloseTimer;
615
+ pendingEscapeListener;
616
+ constructor(document, host) {
617
+ this.document = document;
618
+ this.host = host;
619
+ }
620
+ armOpen(delay) {
621
+ this.openTimer = setTimeout(() => {
622
+ this.openTimer = void 0;
623
+ this.removePendingEscape();
624
+ this.host.onOpenElapsed();
625
+ }, delay);
626
+ this.armPendingEscape();
627
+ }
628
+ cancelOpen() {
629
+ if (this.openTimer !== void 0) {
630
+ clearTimeout(this.openTimer);
631
+ this.openTimer = void 0;
632
+ }
633
+ this.removePendingEscape();
634
+ }
635
+ cancelHoverClose() {
636
+ if (this.hoverCloseTimer !== void 0) {
637
+ clearTimeout(this.hoverCloseTimer);
638
+ this.hoverCloseTimer = void 0;
639
+ }
640
+ }
641
+ scheduleHoverClose() {
642
+ if (!this.host.open() || this.host.openReason() === "focus" || this.hoverCloseTimer !== void 0) return;
643
+ this.hoverCloseTimer = setTimeout(() => {
644
+ this.hoverCloseTimer = void 0;
645
+ if (!this.host.destroyed() && this.host.open()) this.host.onHoverElapsed();
646
+ }, 100);
647
+ }
648
+ removePendingEscape() {
649
+ if (this.pendingEscapeListener !== void 0) {
650
+ this.document.removeEventListener("keydown", this.pendingEscapeListener);
651
+ this.pendingEscapeListener = void 0;
652
+ }
653
+ }
654
+ armPendingEscape() {
655
+ this.removePendingEscape();
656
+ const trigger = this.host.trigger();
657
+ if (trigger === null) return;
658
+ this.pendingEscapeListener = (event) => {
659
+ if (event.key !== "Escape") return;
660
+ this.host.onEscape(trigger);
661
+ };
662
+ this.document.addEventListener("keydown", this.pendingEscapeListener);
663
+ }
664
+ };
665
+ var RaqmTooltipComponent = class RaqmTooltipComponent {
666
+ host = inject(ElementRef);
667
+ overlay = inject(Overlay);
668
+ viewContainerRef = inject(ViewContainerRef);
669
+ injector = inject(Injector);
670
+ directionality = inject(Directionality, { optional: true });
671
+ viewportRuler = inject(ViewportRuler);
672
+ scrollDispatcher = inject(ScrollDispatcher);
673
+ document = inject(DOCUMENT);
674
+ provider = inject(RAQM_TOOLTIP_PROVIDER, { optional: true });
675
+ panelTemplate = viewChild("panel", {
676
+ ...ngDevMode ? { debugName: "panelTemplate" } : /* istanbul ignore next */ {},
677
+ read: TemplateRef
678
+ });
679
+ disabled = input(false, {
680
+ ...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
681
+ transform: booleanAttribute
682
+ });
683
+ side = input("top", {
684
+ ...ngDevMode ? { debugName: "side" } : /* istanbul ignore next */ {},
685
+ transform: toSide
686
+ });
687
+ align = input(DEFAULT_ALIGN, {
688
+ ...ngDevMode ? { debugName: "align" } : /* istanbul ignore next */ {},
689
+ transform: toAlign
690
+ });
691
+ sideOffset = input(4, {
692
+ ...ngDevMode ? { debugName: "sideOffset" } : /* istanbul ignore next */ {},
693
+ transform: toOffset(4)
694
+ });
695
+ alignOffset = input(0, {
696
+ ...ngDevMode ? { debugName: "alignOffset" } : /* istanbul ignore next */ {},
697
+ transform: toOffset(0)
698
+ });
699
+ dir = input(void 0, {
700
+ ...ngDevMode ? { debugName: "dir" } : /* istanbul ignore next */ {},
701
+ transform: toDir
702
+ });
703
+ position = new RaqmTooltipPosition(this.overlay, {
704
+ element: this.host.nativeElement,
705
+ directionality: this.directionality,
706
+ side: () => this.side(),
707
+ align: () => this.align(),
708
+ sideOffset: () => this.sideOffset(),
709
+ alignOffset: () => this.alignOffset(),
710
+ dir: () => this.dir(),
711
+ anchor: () => this.slot.trigger()?.element ?? null,
712
+ pane: () => this.pane.ref
713
+ });
714
+ pane = new RaqmTooltipPane(this.overlay, this.viewportRuler, this.scrollDispatcher, this.document, this.viewContainerRef, this.position, {
715
+ injector: this.injector,
716
+ claimActive: () => this.lifecycle.claimActive(),
717
+ onOutsidePress: (trigger) => this.lifecycle.requestClose(trigger, "press"),
718
+ onEscape: (trigger) => this.lifecycle.requestClose(trigger, "escape"),
719
+ onDetached: (overlayRef) => this.lifecycle.handleDetached(overlayRef)
720
+ });
721
+ slot = new RaqmTooltipSlot(this.document, {
722
+ panel: () => this.panelTemplate(),
723
+ onChanged: () => this.lifecycle.retryRequestedOpen(),
724
+ onLost: () => this.lifecycle.closeForPeer()
725
+ });
726
+ timers = new RaqmTooltipTimers(this.document, {
727
+ open: () => this.open(),
728
+ openReason: () => this.lifecycle.currentReason(),
729
+ destroyed: () => this.destroyed,
730
+ trigger: () => this.slot.trigger(),
731
+ onOpenElapsed: () => this.lifecycle.onOpenElapsed(),
732
+ onHoverElapsed: () => this.lifecycle.beginClose(false),
733
+ onEscape: (trigger) => this.lifecycle.requestClose(trigger, "escape")
734
+ });
735
+ lifecycle = new RaqmTooltipLifecycle({
736
+ pane: this.pane,
737
+ position: this.position,
738
+ slot: this.slot,
739
+ timers: this.timers,
740
+ provider: this.provider,
741
+ disabled: () => this.disabled(),
742
+ destroyed: () => this.destroyed,
743
+ delay: () => this.delay(),
744
+ panel: () => this.panelTemplate()
745
+ });
746
+ delay = computed(() => this.provider?.delay() ?? 0, ...ngDevMode ? [{ debugName: "delay" }] : /* istanbul ignore next */ []);
747
+ destroyed = false;
748
+ open = this.pane.open;
749
+ tooltipId = this.pane.tooltipId;
750
+ contentTemplate = this.slot.contentTemplate;
751
+ panelDir = this.position.panelDir;
752
+ resolvedSide = this.position.resolvedSide;
753
+ closing = this.pane.closing;
754
+ constructor() {
755
+ effect(() => {
756
+ const disabled = this.disabled();
757
+ untracked(() => {
758
+ if (!disabled) return;
759
+ this.lifecycle.closeNow();
760
+ });
761
+ });
762
+ effect(() => {
763
+ this.side();
764
+ this.align();
765
+ this.sideOffset();
766
+ this.alignOffset();
767
+ this.dir();
768
+ untracked(() => this.applyPositionInputs());
769
+ });
770
+ }
771
+ ngOnDestroy() {
772
+ this.destroyed = true;
773
+ this.pane.invalidate();
774
+ this.lifecycle.destroy();
775
+ }
776
+ registerTrigger(ref) {
777
+ this.slot.registerTrigger(ref);
778
+ }
779
+ unregisterTrigger(ref) {
780
+ this.slot.unregisterTrigger(ref);
781
+ }
782
+ registerContent(template) {
783
+ this.slot.registerContent(template);
784
+ }
785
+ unregisterContent(template) {
786
+ this.slot.unregisterContent(template);
787
+ }
788
+ requestOpen(ref, reason) {
789
+ this.lifecycle.requestOpen(ref, reason);
790
+ }
791
+ requestClose(ref, reason) {
792
+ this.lifecycle.requestClose(ref, reason);
793
+ }
794
+ cancelHoverClose() {
795
+ this.timers.cancelHoverClose();
796
+ }
797
+ scheduleHoverClose() {
798
+ this.timers.scheduleHoverClose();
799
+ }
800
+ closeForPeer() {
801
+ this.lifecycle.closeForPeer();
802
+ }
803
+ onContentPointerEnter(event) {
804
+ if (event.pointerType === "mouse") this.timers.cancelHoverClose();
805
+ }
806
+ onContentPointerLeave(event) {
807
+ if (event.pointerType === "mouse") this.timers.scheduleHoverClose();
808
+ }
809
+ applyPositionInputs() {
810
+ if (this.pane.hasPane) this.pane.reposition();
811
+ }
812
+ static ɵfac = i0.ɵɵngDeclareFactory({
813
+ minVersion: "12.0.0",
814
+ version: "22.2.2",
815
+ ngImport: i0,
816
+ type: RaqmTooltipComponent,
817
+ deps: [],
818
+ target: i0.ɵɵFactoryTarget.Component
819
+ });
820
+ static ɵcmp = i0.ɵɵngDeclareComponent({
821
+ minVersion: "17.2.0",
822
+ version: "22.2.2",
823
+ type: RaqmTooltipComponent,
824
+ isStandalone: true,
825
+ selector: "raqm-tooltip",
826
+ inputs: {
827
+ disabled: {
828
+ classPropertyName: "disabled",
829
+ publicName: "disabled",
830
+ isSignal: true,
831
+ isRequired: false,
832
+ transformFunction: null
833
+ },
834
+ side: {
835
+ classPropertyName: "side",
836
+ publicName: "side",
837
+ isSignal: true,
838
+ isRequired: false,
839
+ transformFunction: null
840
+ },
841
+ align: {
842
+ classPropertyName: "align",
843
+ publicName: "align",
844
+ isSignal: true,
845
+ isRequired: false,
846
+ transformFunction: null
847
+ },
848
+ sideOffset: {
849
+ classPropertyName: "sideOffset",
850
+ publicName: "sideOffset",
851
+ isSignal: true,
852
+ isRequired: false,
853
+ transformFunction: null
854
+ },
855
+ alignOffset: {
856
+ classPropertyName: "alignOffset",
857
+ publicName: "alignOffset",
858
+ isSignal: true,
859
+ isRequired: false,
860
+ transformFunction: null
861
+ },
862
+ dir: {
863
+ classPropertyName: "dir",
864
+ publicName: "dir",
865
+ isSignal: true,
866
+ isRequired: false,
867
+ transformFunction: null
868
+ }
869
+ },
870
+ providers: [{
871
+ provide: RAQM_TOOLTIP,
872
+ useExisting: RaqmTooltipComponent
873
+ }],
874
+ viewQueries: [{
875
+ propertyName: "panelTemplate",
876
+ first: true,
877
+ predicate: ["panel"],
878
+ descendants: true,
879
+ read: TemplateRef,
880
+ isSignal: true
881
+ }],
882
+ exportAs: ["raqmTooltip"],
883
+ ngImport: i0,
884
+ template: "<!-- One `button[raqm-tooltip-trigger]` (or passive span for a disabled button) plus one\r\n `ng-template[raqm-tooltip-content]`; the root never wraps or clones the trigger. -->\r\n<ng-content />\r\n\r\n<ng-template #panel>\r\n <div\r\n class=\"raqm-tooltip-content\"\r\n role=\"tooltip\"\r\n [attr.id]=\"tooltipId()\"\r\n [attr.dir]=\"panelDir()\"\r\n [attr.data-raqm-side]=\"resolvedSide()\"\r\n [class.raqm-tooltip-content--closing]=\"closing()\"\r\n (pointerenter)=\"onContentPointerEnter($event)\"\r\n (pointerleave)=\"onContentPointerLeave($event)\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"contentTemplate()\" />\r\n\r\n <!-- The decorative diamond arrow is inert and never part of the description. -->\r\n <span class=\"raqm-tooltip-arrow\" aria-hidden=\"true\"></span>\r\n </div>\r\n</ng-template>\r\n",
885
+ styles: [":host{display:contents}.raqm-tooltip-content{position:relative;display:inline-flex;align-items:center;gap:calc(var(--raqm-spacing) * 1.5);box-sizing:border-box;inline-size:fit-content;max-inline-size:20rem;padding:calc(var(--raqm-spacing) * 1.5) calc(var(--raqm-spacing) * 3);border-radius:var(--raqm-radius-md);background-color:var(--raqm-foreground);color:var(--raqm-background);font-size:var(--raqm-font-size-xs);line-height:1rem;overflow-wrap:anywhere;z-index:50;isolation:isolate}.raqm-tooltip-arrow{position:absolute;inline-size:calc(var(--raqm-spacing) * 2.5);block-size:calc(var(--raqm-spacing) * 2.5);border-radius:2px;background-color:var(--raqm-foreground);pointer-events:none;z-index:50}.raqm-tooltip-content[data-raqm-side=top] .raqm-tooltip-arrow{bottom:calc(var(--raqm-spacing) * -2.5);left:var(--raqm-tooltip-arrow-offset, 50%);translate:-50% calc(-50% - 2px);rotate:45deg}.raqm-tooltip-content[data-raqm-side=bottom] .raqm-tooltip-arrow{top:var(--raqm-spacing);left:var(--raqm-tooltip-arrow-offset, 50%);translate:-50% calc(-50% - 2px);rotate:45deg}.raqm-tooltip-content[data-raqm-side=left] .raqm-tooltip-arrow{right:calc(var(--raqm-spacing) * -1);top:var(--raqm-tooltip-arrow-offset, 50%);translate:0 -50%;rotate:45deg}.raqm-tooltip-content[data-raqm-side=right] .raqm-tooltip-arrow{left:calc(var(--raqm-spacing) * -1);top:var(--raqm-tooltip-arrow-offset, 50%);translate:0 -50%;rotate:45deg}.raqm-tooltip-content--entering{animation:raqm-tooltip-in var(--raqm-duration-base) ease}.raqm-tooltip-content[data-raqm-side=bottom]{--raqm-tooltip-enter-translate: translateY(-8px)}.raqm-tooltip-content[data-raqm-side=top]{--raqm-tooltip-enter-translate: translateY(8px)}.raqm-tooltip-content[data-raqm-side=left]{--raqm-tooltip-enter-translate: translateX(8px)}.raqm-tooltip-content[data-raqm-side=right]{--raqm-tooltip-enter-translate: translateX(-8px)}@keyframes raqm-tooltip-in{0%{opacity:0;transform:var(--raqm-tooltip-enter-translate, none) scale(.95)}to{opacity:1;transform:none}}.raqm-tooltip-content--closing{opacity:0;transform:scale(.95);transition:opacity var(--raqm-duration-base) ease,transform var(--raqm-duration-base) ease}@media(prefers-reduced-motion:reduce){.raqm-tooltip-content,.raqm-tooltip-content--closing{animation:none;transition:none}}@media(forced-colors:active){.raqm-tooltip-content{border:1px solid CanvasText;background-color:CanvasText;color:Canvas}.raqm-tooltip-arrow{background-color:CanvasText}}\n"],
886
+ dependencies: [{
887
+ kind: "directive",
888
+ type: NgTemplateOutlet,
889
+ selector: "[ngTemplateOutlet]",
890
+ inputs: [
891
+ "ngTemplateOutletContext",
892
+ "ngTemplateOutlet",
893
+ "ngTemplateOutletInjector"
894
+ ]
895
+ }],
896
+ changeDetection: i0.ChangeDetectionStrategy.OnPush
897
+ });
898
+ };
899
+ i0.ɵɵngDeclareClassMetadata({
900
+ minVersion: "12.0.0",
901
+ version: "22.2.2",
902
+ ngImport: i0,
903
+ type: RaqmTooltipComponent,
904
+ decorators: [{
905
+ type: Component,
906
+ args: [{
907
+ selector: "raqm-tooltip",
908
+ imports: [NgTemplateOutlet],
909
+ changeDetection: ChangeDetectionStrategy.OnPush,
910
+ exportAs: "raqmTooltip",
911
+ providers: [{
912
+ provide: RAQM_TOOLTIP,
913
+ useExisting: RaqmTooltipComponent
914
+ }],
915
+ template: "<!-- One `button[raqm-tooltip-trigger]` (or passive span for a disabled button) plus one\r\n `ng-template[raqm-tooltip-content]`; the root never wraps or clones the trigger. -->\r\n<ng-content />\r\n\r\n<ng-template #panel>\r\n <div\r\n class=\"raqm-tooltip-content\"\r\n role=\"tooltip\"\r\n [attr.id]=\"tooltipId()\"\r\n [attr.dir]=\"panelDir()\"\r\n [attr.data-raqm-side]=\"resolvedSide()\"\r\n [class.raqm-tooltip-content--closing]=\"closing()\"\r\n (pointerenter)=\"onContentPointerEnter($event)\"\r\n (pointerleave)=\"onContentPointerLeave($event)\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"contentTemplate()\" />\r\n\r\n <!-- The decorative diamond arrow is inert and never part of the description. -->\r\n <span class=\"raqm-tooltip-arrow\" aria-hidden=\"true\"></span>\r\n </div>\r\n</ng-template>\r\n",
916
+ styles: [":host{display:contents}.raqm-tooltip-content{position:relative;display:inline-flex;align-items:center;gap:calc(var(--raqm-spacing) * 1.5);box-sizing:border-box;inline-size:fit-content;max-inline-size:20rem;padding:calc(var(--raqm-spacing) * 1.5) calc(var(--raqm-spacing) * 3);border-radius:var(--raqm-radius-md);background-color:var(--raqm-foreground);color:var(--raqm-background);font-size:var(--raqm-font-size-xs);line-height:1rem;overflow-wrap:anywhere;z-index:50;isolation:isolate}.raqm-tooltip-arrow{position:absolute;inline-size:calc(var(--raqm-spacing) * 2.5);block-size:calc(var(--raqm-spacing) * 2.5);border-radius:2px;background-color:var(--raqm-foreground);pointer-events:none;z-index:50}.raqm-tooltip-content[data-raqm-side=top] .raqm-tooltip-arrow{bottom:calc(var(--raqm-spacing) * -2.5);left:var(--raqm-tooltip-arrow-offset, 50%);translate:-50% calc(-50% - 2px);rotate:45deg}.raqm-tooltip-content[data-raqm-side=bottom] .raqm-tooltip-arrow{top:var(--raqm-spacing);left:var(--raqm-tooltip-arrow-offset, 50%);translate:-50% calc(-50% - 2px);rotate:45deg}.raqm-tooltip-content[data-raqm-side=left] .raqm-tooltip-arrow{right:calc(var(--raqm-spacing) * -1);top:var(--raqm-tooltip-arrow-offset, 50%);translate:0 -50%;rotate:45deg}.raqm-tooltip-content[data-raqm-side=right] .raqm-tooltip-arrow{left:calc(var(--raqm-spacing) * -1);top:var(--raqm-tooltip-arrow-offset, 50%);translate:0 -50%;rotate:45deg}.raqm-tooltip-content--entering{animation:raqm-tooltip-in var(--raqm-duration-base) ease}.raqm-tooltip-content[data-raqm-side=bottom]{--raqm-tooltip-enter-translate: translateY(-8px)}.raqm-tooltip-content[data-raqm-side=top]{--raqm-tooltip-enter-translate: translateY(8px)}.raqm-tooltip-content[data-raqm-side=left]{--raqm-tooltip-enter-translate: translateX(8px)}.raqm-tooltip-content[data-raqm-side=right]{--raqm-tooltip-enter-translate: translateX(-8px)}@keyframes raqm-tooltip-in{0%{opacity:0;transform:var(--raqm-tooltip-enter-translate, none) scale(.95)}to{opacity:1;transform:none}}.raqm-tooltip-content--closing{opacity:0;transform:scale(.95);transition:opacity var(--raqm-duration-base) ease,transform var(--raqm-duration-base) ease}@media(prefers-reduced-motion:reduce){.raqm-tooltip-content,.raqm-tooltip-content--closing{animation:none;transition:none}}@media(forced-colors:active){.raqm-tooltip-content{border:1px solid CanvasText;background-color:CanvasText;color:Canvas}.raqm-tooltip-arrow{background-color:CanvasText}}\n"]
917
+ }]
918
+ }],
919
+ ctorParameters: () => [],
920
+ propDecorators: {
921
+ panelTemplate: [{
922
+ type: i0.ViewChild,
923
+ args: ["panel", {
924
+ read: TemplateRef,
925
+ isSignal: true
926
+ }]
927
+ }],
928
+ disabled: [{
929
+ type: i0.Input,
930
+ args: [{
931
+ isSignal: true,
932
+ alias: "disabled",
933
+ required: false
934
+ }]
935
+ }],
936
+ side: [{
937
+ type: i0.Input,
938
+ args: [{
939
+ isSignal: true,
940
+ alias: "side",
941
+ required: false
942
+ }]
943
+ }],
944
+ align: [{
945
+ type: i0.Input,
946
+ args: [{
947
+ isSignal: true,
948
+ alias: "align",
949
+ required: false
950
+ }]
951
+ }],
952
+ sideOffset: [{
953
+ type: i0.Input,
954
+ args: [{
955
+ isSignal: true,
956
+ alias: "sideOffset",
957
+ required: false
958
+ }]
959
+ }],
960
+ alignOffset: [{
961
+ type: i0.Input,
962
+ args: [{
963
+ isSignal: true,
964
+ alias: "alignOffset",
965
+ required: false
966
+ }]
967
+ }],
968
+ dir: [{
969
+ type: i0.Input,
970
+ args: [{
971
+ isSignal: true,
972
+ alias: "dir",
973
+ required: false
974
+ }]
975
+ }]
976
+ }
977
+ });
978
+ function toDelay(value) {
979
+ const parsed = numberAttribute(value, 0);
980
+ return Number.isFinite(parsed) && parsed > 0 ? parsed : 0;
981
+ }
982
+ var RaqmTooltipProviderDirective = class RaqmTooltipProviderDirective {
983
+ delay = input(0, {
984
+ ...ngDevMode ? { debugName: "delay" } : /* istanbul ignore next */ {},
985
+ transform: toDelay
986
+ });
987
+ active = null;
988
+ registerActive(active) {
989
+ if (this.active !== null && this.active !== active) this.active.closeForPeer();
990
+ this.active = active;
991
+ }
992
+ clearActive(active) {
993
+ if (this.active === active) this.active = null;
994
+ }
995
+ static ɵfac = i0.ɵɵngDeclareFactory({
996
+ minVersion: "12.0.0",
997
+ version: "22.2.2",
998
+ ngImport: i0,
999
+ type: RaqmTooltipProviderDirective,
1000
+ deps: [],
1001
+ target: i0.ɵɵFactoryTarget.Directive
1002
+ });
1003
+ static ɵdir = i0.ɵɵngDeclareDirective({
1004
+ minVersion: "17.1.0",
1005
+ version: "22.2.2",
1006
+ type: RaqmTooltipProviderDirective,
1007
+ isStandalone: true,
1008
+ selector: "[raqm-tooltip-provider]",
1009
+ inputs: { delay: {
1010
+ classPropertyName: "delay",
1011
+ publicName: "delay",
1012
+ isSignal: true,
1013
+ isRequired: false,
1014
+ transformFunction: null
1015
+ } },
1016
+ providers: [{
1017
+ provide: RAQM_TOOLTIP_PROVIDER,
1018
+ useExisting: RaqmTooltipProviderDirective
1019
+ }],
1020
+ exportAs: ["raqmTooltipProvider"],
1021
+ ngImport: i0
1022
+ });
1023
+ };
1024
+ i0.ɵɵngDeclareClassMetadata({
1025
+ minVersion: "12.0.0",
1026
+ version: "22.2.2",
1027
+ ngImport: i0,
1028
+ type: RaqmTooltipProviderDirective,
1029
+ decorators: [{
1030
+ type: Directive,
1031
+ args: [{
1032
+ selector: "[raqm-tooltip-provider]",
1033
+ exportAs: "raqmTooltipProvider",
1034
+ providers: [{
1035
+ provide: RAQM_TOOLTIP_PROVIDER,
1036
+ useExisting: RaqmTooltipProviderDirective
1037
+ }]
1038
+ }]
1039
+ }],
1040
+ propDecorators: { delay: [{
1041
+ type: i0.Input,
1042
+ args: [{
1043
+ isSignal: true,
1044
+ alias: "delay",
1045
+ required: false
1046
+ }]
1047
+ }] }
1048
+ });
1049
+ var RaqmTooltipTriggerDirective = class RaqmTooltipTriggerDirective {
1050
+ host = inject(ElementRef);
1051
+ tooltip = inject(RAQM_TOOLTIP, { optional: true });
1052
+ renderer = inject(Renderer2);
1053
+ destroyRef = inject(DestroyRef);
1054
+ ownedToken = null;
1055
+ ref = (() => {
1056
+ const self = this;
1057
+ return {
1058
+ get element() {
1059
+ return self.host.nativeElement;
1060
+ },
1061
+ get disabled() {
1062
+ const element = self.host.nativeElement;
1063
+ return element instanceof HTMLButtonElement && element.disabled;
1064
+ }
1065
+ };
1066
+ })();
1067
+ constructor() {
1068
+ effect(() => {
1069
+ const token = this.tooltip?.open() ? this.tooltip.tooltipId() : null;
1070
+ untracked(() => this.syncDescribedBy(token));
1071
+ });
1072
+ const element = this.host.nativeElement;
1073
+ if (element instanceof HTMLButtonElement && !element.hasAttribute("type")) element.setAttribute("type", "button");
1074
+ if (isDevMode() && this.tooltip === null) console.error("[raqm-tooltip-trigger] No parent <raqm-tooltip> found; the trigger cannot show a tooltip.");
1075
+ this.destroyRef.onDestroy(() => {
1076
+ this.tooltip?.unregisterTrigger(this.ref);
1077
+ this.syncDescribedBy(null);
1078
+ });
1079
+ }
1080
+ ngOnInit() {
1081
+ this.tooltip?.registerTrigger(this.ref);
1082
+ }
1083
+ onPointerEnter(event) {
1084
+ if (event.pointerType !== "mouse") return;
1085
+ this.tooltip?.requestOpen(this.ref, "mouse");
1086
+ }
1087
+ onPointerLeave(event) {
1088
+ if (event.pointerType !== "mouse") return;
1089
+ this.tooltip?.requestClose(this.ref, "mouse");
1090
+ }
1091
+ onPointerDown(event) {
1092
+ if (event.button !== 0) return;
1093
+ this.tooltip?.requestClose(this.ref, "press");
1094
+ }
1095
+ onFocus() {
1096
+ this.tooltip?.requestOpen(this.ref, "focus");
1097
+ }
1098
+ onBlur() {
1099
+ this.tooltip?.requestClose(this.ref, "focus");
1100
+ }
1101
+ onKeydown(event) {
1102
+ const key = event;
1103
+ if (key.key !== "Escape" || this.tooltip === null) return;
1104
+ if (this.tooltip.open()) {
1105
+ key.preventDefault();
1106
+ key.stopPropagation();
1107
+ }
1108
+ this.tooltip.requestClose(this.ref, "escape");
1109
+ }
1110
+ onClick() {
1111
+ if (this.tooltip?.open()) this.tooltip.requestClose(this.ref, "press");
1112
+ }
1113
+ syncDescribedBy(nextToken) {
1114
+ const element = this.host.nativeElement;
1115
+ const previous = this.ownedToken;
1116
+ if (previous === nextToken) return;
1117
+ const tokens = (element.getAttribute("aria-describedby") ?? "").split(/\s+/).filter((token) => token.length > 0 && token !== previous);
1118
+ if (nextToken !== null && !tokens.includes(nextToken)) tokens.push(nextToken);
1119
+ if (tokens.length > 0) this.renderer.setAttribute(element, "aria-describedby", tokens.join(" "));
1120
+ else this.renderer.removeAttribute(element, "aria-describedby");
1121
+ this.ownedToken = nextToken;
1122
+ }
1123
+ static ɵfac = i0.ɵɵngDeclareFactory({
1124
+ minVersion: "12.0.0",
1125
+ version: "22.2.2",
1126
+ ngImport: i0,
1127
+ type: RaqmTooltipTriggerDirective,
1128
+ deps: [],
1129
+ target: i0.ɵɵFactoryTarget.Directive
1130
+ });
1131
+ static ɵdir = i0.ɵɵngDeclareDirective({
1132
+ minVersion: "14.0.0",
1133
+ version: "22.2.2",
1134
+ type: RaqmTooltipTriggerDirective,
1135
+ isStandalone: true,
1136
+ selector: "button[raqm-tooltip-trigger], span[raqm-tooltip-trigger]",
1137
+ host: {
1138
+ listeners: {
1139
+ "pointerenter": "onPointerEnter($event)",
1140
+ "pointerleave": "onPointerLeave($event)",
1141
+ "pointerdown": "onPointerDown($event)",
1142
+ "focus": "onFocus()",
1143
+ "blur": "onBlur()",
1144
+ "keydown": "onKeydown($event)",
1145
+ "click": "onClick()"
1146
+ },
1147
+ classAttribute: "raqm-tooltip-trigger"
1148
+ },
1149
+ ngImport: i0
1150
+ });
1151
+ };
1152
+ i0.ɵɵngDeclareClassMetadata({
1153
+ minVersion: "12.0.0",
1154
+ version: "22.2.2",
1155
+ ngImport: i0,
1156
+ type: RaqmTooltipTriggerDirective,
1157
+ decorators: [{
1158
+ type: Directive,
1159
+ args: [{
1160
+ selector: "button[raqm-tooltip-trigger], span[raqm-tooltip-trigger]",
1161
+ host: {
1162
+ class: "raqm-tooltip-trigger",
1163
+ "(pointerenter)": "onPointerEnter($event)",
1164
+ "(pointerleave)": "onPointerLeave($event)",
1165
+ "(pointerdown)": "onPointerDown($event)",
1166
+ "(focus)": "onFocus()",
1167
+ "(blur)": "onBlur()",
1168
+ "(keydown)": "onKeydown($event)",
1169
+ "(click)": "onClick()"
1170
+ }
1171
+ }]
1172
+ }],
1173
+ ctorParameters: () => []
1174
+ });
1175
+ var RaqmTooltipContentDirective = class RaqmTooltipContentDirective {
1176
+ template = inject(TemplateRef);
1177
+ tooltip = inject(RAQM_TOOLTIP, { optional: true });
1178
+ destroyRef = inject(DestroyRef);
1179
+ constructor() {
1180
+ if (isDevMode() && this.tooltip === null) console.error("[raqm-tooltip-content] No parent <raqm-tooltip> found; the content is never rendered.");
1181
+ this.destroyRef.onDestroy(() => this.tooltip?.unregisterContent(this.template));
1182
+ }
1183
+ ngOnInit() {
1184
+ this.tooltip?.registerContent(this.template);
1185
+ }
1186
+ static ɵfac = i0.ɵɵngDeclareFactory({
1187
+ minVersion: "12.0.0",
1188
+ version: "22.2.2",
1189
+ ngImport: i0,
1190
+ type: RaqmTooltipContentDirective,
1191
+ deps: [],
1192
+ target: i0.ɵɵFactoryTarget.Directive
1193
+ });
1194
+ static ɵdir = i0.ɵɵngDeclareDirective({
1195
+ minVersion: "14.0.0",
1196
+ version: "22.2.2",
1197
+ type: RaqmTooltipContentDirective,
1198
+ isStandalone: true,
1199
+ selector: "ng-template[raqm-tooltip-content]",
1200
+ exportAs: ["raqmTooltipContent"],
1201
+ ngImport: i0
1202
+ });
1203
+ };
1204
+ i0.ɵɵngDeclareClassMetadata({
1205
+ minVersion: "12.0.0",
1206
+ version: "22.2.2",
1207
+ ngImport: i0,
1208
+ type: RaqmTooltipContentDirective,
1209
+ decorators: [{
1210
+ type: Directive,
1211
+ args: [{
1212
+ selector: "ng-template[raqm-tooltip-content]",
1213
+ exportAs: "raqmTooltipContent"
1214
+ }]
1215
+ }],
1216
+ ctorParameters: () => []
1217
+ });
1218
+ const RaqmTooltip = [
1219
+ RaqmTooltipComponent,
1220
+ RaqmTooltipContentDirective,
1221
+ RaqmTooltipProviderDirective,
1222
+ RaqmTooltipTriggerDirective
1223
+ ];
1224
+ export { RaqmTooltip, RaqmTooltipComponent, RaqmTooltipContentDirective, RaqmTooltipProviderDirective, RaqmTooltipTriggerDirective };
1225
+
1226
+ //# sourceMappingURL=raqm-ui-tooltip.mjs.map