@hyalo/angular 0.0.0-stage → 0.3.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 (229) hide show
  1. package/CHANGELOG.md +95 -0
  2. package/LICENSE +21 -0
  3. package/README.md +45 -2
  4. package/fesm2022/hyalo-angular-accordion.mjs +230 -0
  5. package/fesm2022/hyalo-angular-accordion.mjs.map +1 -0
  6. package/fesm2022/hyalo-angular-alert.mjs +171 -0
  7. package/fesm2022/hyalo-angular-alert.mjs.map +1 -0
  8. package/fesm2022/hyalo-angular-aspect-ratio.mjs +64 -0
  9. package/fesm2022/hyalo-angular-aspect-ratio.mjs.map +1 -0
  10. package/fesm2022/hyalo-angular-avatar.mjs +169 -0
  11. package/fesm2022/hyalo-angular-avatar.mjs.map +1 -0
  12. package/fesm2022/hyalo-angular-badge.mjs +268 -0
  13. package/fesm2022/hyalo-angular-badge.mjs.map +1 -0
  14. package/fesm2022/hyalo-angular-bento.mjs +132 -0
  15. package/fesm2022/hyalo-angular-bento.mjs.map +1 -0
  16. package/fesm2022/hyalo-angular-blocks.mjs +985 -0
  17. package/fesm2022/hyalo-angular-blocks.mjs.map +1 -0
  18. package/fesm2022/hyalo-angular-border-beam.mjs +73 -0
  19. package/fesm2022/hyalo-angular-border-beam.mjs.map +1 -0
  20. package/fesm2022/hyalo-angular-breadcrumb.mjs +77 -0
  21. package/fesm2022/hyalo-angular-breadcrumb.mjs.map +1 -0
  22. package/fesm2022/hyalo-angular-button-group.mjs +90 -0
  23. package/fesm2022/hyalo-angular-button-group.mjs.map +1 -0
  24. package/fesm2022/hyalo-angular-button.mjs +204 -0
  25. package/fesm2022/hyalo-angular-button.mjs.map +1 -0
  26. package/fesm2022/hyalo-angular-card.mjs +221 -0
  27. package/fesm2022/hyalo-angular-card.mjs.map +1 -0
  28. package/fesm2022/hyalo-angular-carousel.mjs +709 -0
  29. package/fesm2022/hyalo-angular-carousel.mjs.map +1 -0
  30. package/fesm2022/hyalo-angular-chapter-nav.mjs +336 -0
  31. package/fesm2022/hyalo-angular-chapter-nav.mjs.map +1 -0
  32. package/fesm2022/hyalo-angular-chart-engine-DSJop6He.mjs +5 -0
  33. package/fesm2022/hyalo-angular-chart-engine-DSJop6He.mjs.map +1 -0
  34. package/fesm2022/hyalo-angular-chart.mjs +391 -0
  35. package/fesm2022/hyalo-angular-chart.mjs.map +1 -0
  36. package/fesm2022/hyalo-angular-choice.mjs +789 -0
  37. package/fesm2022/hyalo-angular-choice.mjs.map +1 -0
  38. package/fesm2022/hyalo-angular-code-block-highlight-B20d5C76.mjs +40 -0
  39. package/fesm2022/hyalo-angular-code-block-highlight-B20d5C76.mjs.map +1 -0
  40. package/fesm2022/hyalo-angular-code-block.mjs +161 -0
  41. package/fesm2022/hyalo-angular-code-block.mjs.map +1 -0
  42. package/fesm2022/hyalo-angular-command.mjs +193 -0
  43. package/fesm2022/hyalo-angular-command.mjs.map +1 -0
  44. package/fesm2022/hyalo-angular-copy.mjs +138 -0
  45. package/fesm2022/hyalo-angular-copy.mjs.map +1 -0
  46. package/fesm2022/hyalo-angular-core.mjs +424 -0
  47. package/fesm2022/hyalo-angular-core.mjs.map +1 -0
  48. package/fesm2022/hyalo-angular-description-list.mjs +57 -0
  49. package/fesm2022/hyalo-angular-description-list.mjs.map +1 -0
  50. package/fesm2022/hyalo-angular-dialog.mjs +600 -0
  51. package/fesm2022/hyalo-angular-dialog.mjs.map +1 -0
  52. package/fesm2022/hyalo-angular-divider.mjs +66 -0
  53. package/fesm2022/hyalo-angular-divider.mjs.map +1 -0
  54. package/fesm2022/hyalo-angular-empty-state.mjs +123 -0
  55. package/fesm2022/hyalo-angular-empty-state.mjs.map +1 -0
  56. package/fesm2022/hyalo-angular-field.mjs +344 -0
  57. package/fesm2022/hyalo-angular-field.mjs.map +1 -0
  58. package/fesm2022/hyalo-angular-filter.mjs +309 -0
  59. package/fesm2022/hyalo-angular-filter.mjs.map +1 -0
  60. package/fesm2022/hyalo-angular-hotspot.mjs +225 -0
  61. package/fesm2022/hyalo-angular-hotspot.mjs.map +1 -0
  62. package/fesm2022/hyalo-angular-hover-card.mjs +233 -0
  63. package/fesm2022/hyalo-angular-hover-card.mjs.map +1 -0
  64. package/fesm2022/hyalo-angular-icon.mjs +385 -0
  65. package/fesm2022/hyalo-angular-icon.mjs.map +1 -0
  66. package/fesm2022/hyalo-angular-image-compare.mjs +168 -0
  67. package/fesm2022/hyalo-angular-image-compare.mjs.map +1 -0
  68. package/fesm2022/hyalo-angular-interaction.mjs +446 -0
  69. package/fesm2022/hyalo-angular-interaction.mjs.map +1 -0
  70. package/fesm2022/hyalo-angular-kbd.mjs +41 -0
  71. package/fesm2022/hyalo-angular-kbd.mjs.map +1 -0
  72. package/fesm2022/hyalo-angular-lightbox.mjs +228 -0
  73. package/fesm2022/hyalo-angular-lightbox.mjs.map +1 -0
  74. package/fesm2022/hyalo-angular-link.mjs +42 -0
  75. package/fesm2022/hyalo-angular-link.mjs.map +1 -0
  76. package/fesm2022/hyalo-angular-list.mjs +131 -0
  77. package/fesm2022/hyalo-angular-list.mjs.map +1 -0
  78. package/fesm2022/hyalo-angular-marquee.mjs +197 -0
  79. package/fesm2022/hyalo-angular-marquee.mjs.map +1 -0
  80. package/fesm2022/hyalo-angular-menu.mjs +423 -0
  81. package/fesm2022/hyalo-angular-menu.mjs.map +1 -0
  82. package/fesm2022/hyalo-angular-mesh.mjs +126 -0
  83. package/fesm2022/hyalo-angular-mesh.mjs.map +1 -0
  84. package/fesm2022/hyalo-angular-motion.mjs +620 -0
  85. package/fesm2022/hyalo-angular-motion.mjs.map +1 -0
  86. package/fesm2022/hyalo-angular-navbar.mjs +343 -0
  87. package/fesm2022/hyalo-angular-navbar.mjs.map +1 -0
  88. package/fesm2022/hyalo-angular-navigation-menu.mjs +222 -0
  89. package/fesm2022/hyalo-angular-navigation-menu.mjs.map +1 -0
  90. package/fesm2022/hyalo-angular-number-ticker.mjs +174 -0
  91. package/fesm2022/hyalo-angular-number-ticker.mjs.map +1 -0
  92. package/fesm2022/hyalo-angular-overlay.mjs +163 -0
  93. package/fesm2022/hyalo-angular-overlay.mjs.map +1 -0
  94. package/fesm2022/hyalo-angular-pagination.mjs +187 -0
  95. package/fesm2022/hyalo-angular-pagination.mjs.map +1 -0
  96. package/fesm2022/hyalo-angular-popover-overlay-kit-6wPwnxln.mjs +3 -0
  97. package/fesm2022/hyalo-angular-popover.mjs +516 -0
  98. package/fesm2022/hyalo-angular-popover.mjs.map +1 -0
  99. package/fesm2022/hyalo-angular-progress.mjs +209 -0
  100. package/fesm2022/hyalo-angular-progress.mjs.map +1 -0
  101. package/fesm2022/hyalo-angular-progressive-blur.mjs +73 -0
  102. package/fesm2022/hyalo-angular-progressive-blur.mjs.map +1 -0
  103. package/fesm2022/hyalo-angular-refraction-renderer-5ZA-kfsA.mjs +186 -0
  104. package/fesm2022/hyalo-angular-refraction-renderer-5ZA-kfsA.mjs.map +1 -0
  105. package/fesm2022/hyalo-angular-refraction.mjs +178 -0
  106. package/fesm2022/hyalo-angular-refraction.mjs.map +1 -0
  107. package/fesm2022/hyalo-angular-scroll-area.mjs +93 -0
  108. package/fesm2022/hyalo-angular-scroll-area.mjs.map +1 -0
  109. package/fesm2022/hyalo-angular-scroll-to-top.mjs +127 -0
  110. package/fesm2022/hyalo-angular-scroll-to-top.mjs.map +1 -0
  111. package/fesm2022/hyalo-angular-segmented.mjs +223 -0
  112. package/fesm2022/hyalo-angular-segmented.mjs.map +1 -0
  113. package/fesm2022/hyalo-angular-select.mjs +561 -0
  114. package/fesm2022/hyalo-angular-select.mjs.map +1 -0
  115. package/fesm2022/hyalo-angular-sidebar.mjs +241 -0
  116. package/fesm2022/hyalo-angular-sidebar.mjs.map +1 -0
  117. package/fesm2022/hyalo-angular-skeleton.mjs +131 -0
  118. package/fesm2022/hyalo-angular-skeleton.mjs.map +1 -0
  119. package/fesm2022/hyalo-angular-sparkline.mjs +110 -0
  120. package/fesm2022/hyalo-angular-sparkline.mjs.map +1 -0
  121. package/fesm2022/hyalo-angular-split-text.mjs +126 -0
  122. package/fesm2022/hyalo-angular-split-text.mjs.map +1 -0
  123. package/fesm2022/hyalo-angular-stat.mjs +193 -0
  124. package/fesm2022/hyalo-angular-stat.mjs.map +1 -0
  125. package/fesm2022/hyalo-angular-stepper.mjs +254 -0
  126. package/fesm2022/hyalo-angular-stepper.mjs.map +1 -0
  127. package/fesm2022/hyalo-angular-table.mjs +335 -0
  128. package/fesm2022/hyalo-angular-table.mjs.map +1 -0
  129. package/fesm2022/hyalo-angular-tabs.mjs +324 -0
  130. package/fesm2022/hyalo-angular-tabs.mjs.map +1 -0
  131. package/fesm2022/hyalo-angular-theme.mjs +94 -0
  132. package/fesm2022/hyalo-angular-theme.mjs.map +1 -0
  133. package/fesm2022/hyalo-angular-timeline.mjs +157 -0
  134. package/fesm2022/hyalo-angular-timeline.mjs.map +1 -0
  135. package/fesm2022/hyalo-angular-toast.mjs +323 -0
  136. package/fesm2022/hyalo-angular-toast.mjs.map +1 -0
  137. package/fesm2022/hyalo-angular.mjs +2 -0
  138. package/package.json +329 -3
  139. package/styles/hyalo-core.css +25 -0
  140. package/styles/hyalo.css +17 -0
  141. package/styles/overlays/dialog.css +9 -0
  142. package/styles/overlays/popover.css +9 -0
  143. package/styles/overlays/select.css +9 -0
  144. package/styles/overlays/toast.css +8 -0
  145. package/styles/palettes/aurora.css +47 -0
  146. package/styles/palettes/ember.css +47 -0
  147. package/styles/palettes/graphite.css +47 -0
  148. package/styles/palettes/ocean.css +47 -0
  149. package/styles/palettes/orchid.css +47 -0
  150. package/styles/palettes/rose.css +47 -0
  151. package/styles/parts/card.css +49 -0
  152. package/styles/parts/dialog.css +116 -0
  153. package/styles/parts/drawer.css +124 -0
  154. package/styles/parts/field.css +44 -0
  155. package/styles/parts/glass.css +139 -0
  156. package/styles/parts/motion.css +101 -0
  157. package/styles/parts/navbar.css +55 -0
  158. package/styles/parts/popover.css +27 -0
  159. package/styles/parts/presence.css +55 -0
  160. package/styles/parts/reset.css +42 -0
  161. package/styles/parts/select.css +46 -0
  162. package/styles/parts/themes.css +105 -0
  163. package/styles/parts/toast.css +128 -0
  164. package/styles/parts/tokens.css +151 -0
  165. package/styles/parts/typography.css +81 -0
  166. package/types/hyalo-angular-accordion.d.ts +74 -0
  167. package/types/hyalo-angular-alert.d.ts +47 -0
  168. package/types/hyalo-angular-aspect-ratio.d.ts +13 -0
  169. package/types/hyalo-angular-avatar.d.ts +39 -0
  170. package/types/hyalo-angular-badge.d.ts +82 -0
  171. package/types/hyalo-angular-bento.d.ts +25 -0
  172. package/types/hyalo-angular-blocks.d.ts +272 -0
  173. package/types/hyalo-angular-border-beam.d.ts +15 -0
  174. package/types/hyalo-angular-breadcrumb.d.ts +22 -0
  175. package/types/hyalo-angular-button-group.d.ts +19 -0
  176. package/types/hyalo-angular-button.d.ts +89 -0
  177. package/types/hyalo-angular-card.d.ts +61 -0
  178. package/types/hyalo-angular-carousel.d.ts +147 -0
  179. package/types/hyalo-angular-chapter-nav.d.ts +79 -0
  180. package/types/hyalo-angular-chart.d.ts +90 -0
  181. package/types/hyalo-angular-choice.d.ts +259 -0
  182. package/types/hyalo-angular-code-block.d.ts +46 -0
  183. package/types/hyalo-angular-command.d.ts +41 -0
  184. package/types/hyalo-angular-copy.d.ts +39 -0
  185. package/types/hyalo-angular-core.d.ts +210 -0
  186. package/types/hyalo-angular-description-list.d.ts +16 -0
  187. package/types/hyalo-angular-dialog.d.ts +171 -0
  188. package/types/hyalo-angular-divider.d.ts +12 -0
  189. package/types/hyalo-angular-empty-state.d.ts +30 -0
  190. package/types/hyalo-angular-field.d.ts +141 -0
  191. package/types/hyalo-angular-filter.d.ts +122 -0
  192. package/types/hyalo-angular-hotspot.d.ts +70 -0
  193. package/types/hyalo-angular-hover-card.d.ts +47 -0
  194. package/types/hyalo-angular-icon.d.ts +122 -0
  195. package/types/hyalo-angular-image-compare.d.ts +55 -0
  196. package/types/hyalo-angular-interaction.d.ts +131 -0
  197. package/types/hyalo-angular-kbd.d.ts +5 -0
  198. package/types/hyalo-angular-lightbox.d.ts +67 -0
  199. package/types/hyalo-angular-link.d.ts +5 -0
  200. package/types/hyalo-angular-list.d.ts +30 -0
  201. package/types/hyalo-angular-marquee.d.ts +48 -0
  202. package/types/hyalo-angular-menu.d.ts +105 -0
  203. package/types/hyalo-angular-mesh.d.ts +36 -0
  204. package/types/hyalo-angular-motion.d.ts +218 -0
  205. package/types/hyalo-angular-navbar.d.ts +110 -0
  206. package/types/hyalo-angular-navigation-menu.d.ts +47 -0
  207. package/types/hyalo-angular-number-ticker.d.ts +52 -0
  208. package/types/hyalo-angular-overlay.d.ts +40 -0
  209. package/types/hyalo-angular-pagination.d.ts +59 -0
  210. package/types/hyalo-angular-popover.d.ts +152 -0
  211. package/types/hyalo-angular-progress.d.ts +46 -0
  212. package/types/hyalo-angular-progressive-blur.d.ts +14 -0
  213. package/types/hyalo-angular-refraction.d.ts +46 -0
  214. package/types/hyalo-angular-scroll-area.d.ts +18 -0
  215. package/types/hyalo-angular-scroll-to-top.d.ts +31 -0
  216. package/types/hyalo-angular-segmented.d.ts +79 -0
  217. package/types/hyalo-angular-select.d.ts +176 -0
  218. package/types/hyalo-angular-sidebar.d.ts +57 -0
  219. package/types/hyalo-angular-skeleton.d.ts +34 -0
  220. package/types/hyalo-angular-sparkline.d.ts +19 -0
  221. package/types/hyalo-angular-split-text.d.ts +24 -0
  222. package/types/hyalo-angular-stat.d.ts +56 -0
  223. package/types/hyalo-angular-stepper.d.ts +63 -0
  224. package/types/hyalo-angular-table.d.ts +125 -0
  225. package/types/hyalo-angular-tabs.d.ts +102 -0
  226. package/types/hyalo-angular-theme.d.ts +46 -0
  227. package/types/hyalo-angular-timeline.d.ts +36 -0
  228. package/types/hyalo-angular-toast.d.ts +79 -0
  229. package/types/hyalo-angular.d.ts +2 -0
@@ -0,0 +1,516 @@
1
+ import { AriaDescriber, FocusTrapFactory } from "@angular/cdk/a11y";
2
+ import * as i0 from "@angular/core";
3
+ import { ChangeDetectionStrategy, Component, DestroyRef, Directive, ElementRef, Injector, ViewContainerRef, booleanAttribute, effect, inject, input, model, numberAttribute, signal, untracked } from "@angular/core";
4
+ import { hyConnectedPositions, ɵHyPresence } from "@hyalo/angular/overlay";
5
+ import { take } from "rxjs";
6
+ import { HyFidelity, injectId } from "@hyalo/angular/core";
7
+ let kit;
8
+ function loadOverlay() {
9
+ kit ??= import("./hyalo-angular-popover-overlay-kit-6wPwnxln.mjs").catch((error) => {
10
+ kit = void 0;
11
+ throw error;
12
+ });
13
+ return kit;
14
+ }
15
+ var HyTooltipPanel = class HyTooltipPanel {
16
+ message = signal("", ...ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []);
17
+ static ɵfac = i0.ɵɵngDeclareFactory({
18
+ minVersion: "12.0.0",
19
+ version: "22.2.3",
20
+ ngImport: i0,
21
+ type: HyTooltipPanel,
22
+ deps: [],
23
+ target: i0.ɵɵFactoryTarget.Component
24
+ });
25
+ static ɵcmp = i0.ɵɵngDeclareComponent({
26
+ minVersion: "14.0.0",
27
+ version: "22.2.3",
28
+ type: HyTooltipPanel,
29
+ isStandalone: true,
30
+ selector: "hy-tooltip-panel",
31
+ host: {
32
+ attributes: { "aria-hidden": "true" },
33
+ classAttribute: "hy-tooltip"
34
+ },
35
+ ngImport: i0,
36
+ template: `{{ message() }}`,
37
+ isInline: true,
38
+ changeDetection: i0.ChangeDetectionStrategy.OnPush
39
+ });
40
+ };
41
+ i0.ɵɵngDeclareClassMetadata({
42
+ minVersion: "12.0.0",
43
+ version: "22.2.3",
44
+ ngImport: i0,
45
+ type: HyTooltipPanel,
46
+ decorators: [{
47
+ type: Component,
48
+ args: [{
49
+ selector: "hy-tooltip-panel",
50
+ changeDetection: ChangeDetectionStrategy.OnPush,
51
+ host: {
52
+ class: "hy-tooltip",
53
+ "aria-hidden": "true"
54
+ },
55
+ template: `{{ message() }}`
56
+ }]
57
+ }]
58
+ });
59
+ var HyTooltip = class HyTooltip {
60
+ injector = inject(Injector);
61
+ host = inject(ElementRef);
62
+ describer = inject(AriaDescriber);
63
+ overlayRef = null;
64
+ position = null;
65
+ panel = null;
66
+ panelEl = null;
67
+ presence = new ɵHyPresence();
68
+ showTimer;
69
+ hideTimer;
70
+ wanted = false;
71
+ destroyed = false;
72
+ message = input("", {
73
+ ...ngDevMode ? { debugName: "message" } : /* istanbul ignore next */ {},
74
+ alias: "hyTooltip"
75
+ });
76
+ tooltipPlacement = input("top", ...ngDevMode ? [{ debugName: "tooltipPlacement" }] : /* istanbul ignore next */ []);
77
+ tooltipDelay = input(400, {
78
+ ...ngDevMode ? { debugName: "tooltipDelay" } : /* istanbul ignore next */ {},
79
+ transform: numberAttribute
80
+ });
81
+ tooltipDisabled = input(false, {
82
+ ...ngDevMode ? { debugName: "tooltipDisabled" } : /* istanbul ignore next */ {},
83
+ transform: booleanAttribute
84
+ });
85
+ constructor() {
86
+ let described = "";
87
+ effect(() => {
88
+ const message = this.message();
89
+ if (described) this.describer.removeDescription(this.host.nativeElement, described);
90
+ if (message) this.describer.describe(this.host.nativeElement, message);
91
+ described = message;
92
+ if (this.panel) this.panel.message.set(message);
93
+ });
94
+ inject(DestroyRef).onDestroy(() => {
95
+ this.destroyed = true;
96
+ clearTimeout(this.showTimer);
97
+ clearTimeout(this.hideTimer);
98
+ if (described) this.describer.removeDescription(this.host.nativeElement, described);
99
+ this.overlayRef?.dispose();
100
+ });
101
+ }
102
+ onPointerEnter(event) {
103
+ if (event.pointerType !== "touch") this.show(this.tooltipDelay());
104
+ }
105
+ show(delay = this.tooltipDelay()) {
106
+ if (this.tooltipDisabled() || !this.message()) return;
107
+ clearTimeout(this.hideTimer);
108
+ clearTimeout(this.showTimer);
109
+ this.wanted = true;
110
+ loadOverlay().catch(() => void 0);
111
+ this.showTimer = setTimeout(() => void this.attach(), delay);
112
+ }
113
+ hide() {
114
+ this.wanted = false;
115
+ clearTimeout(this.showTimer);
116
+ clearTimeout(this.hideTimer);
117
+ const ref = this.overlayRef;
118
+ if (!ref?.hasAttached() || !this.panelEl) return;
119
+ this.presence.leave(this.panelEl, () => ref.detach());
120
+ }
121
+ scheduleHide() {
122
+ clearTimeout(this.showTimer);
123
+ this.hideTimer = setTimeout(() => this.hide(), 120);
124
+ }
125
+ async attach() {
126
+ const kit = await loadOverlay().catch(() => null);
127
+ if (!kit || !this.wanted || this.destroyed) return;
128
+ const { ComponentPortal, createFlexibleConnectedPositionStrategy, createOverlayRef, createRepositionScrollStrategy } = kit;
129
+ if (!this.overlayRef) {
130
+ this.position = createFlexibleConnectedPositionStrategy(this.injector, this.host).withFlexibleDimensions(false).withViewportMargin(8).withTransformOriginOn(".hy-tooltip");
131
+ this.overlayRef = createOverlayRef(this.injector, {
132
+ positionStrategy: this.position,
133
+ scrollStrategy: createRepositionScrollStrategy(this.injector),
134
+ panelClass: "hy-tooltip-pane"
135
+ });
136
+ this.overlayRef.overlayElement.addEventListener("pointerenter", () => clearTimeout(this.hideTimer));
137
+ this.overlayRef.overlayElement.addEventListener("pointerleave", () => this.scheduleHide());
138
+ }
139
+ if (this.overlayRef.hasAttached()) {
140
+ if (this.presence.leaving && this.panelEl) this.presence.enter(this.panelEl);
141
+ return;
142
+ }
143
+ this.position?.withPositions(hyConnectedPositions(this.tooltipPlacement()));
144
+ const ref = this.overlayRef.attach(new ComponentPortal(HyTooltipPanel, null, this.injector));
145
+ this.panel = ref.instance;
146
+ this.panel.message.set(this.message());
147
+ const el = ref.location.nativeElement;
148
+ this.panelEl = el;
149
+ this.presence.enter(el);
150
+ ref.onDestroy(() => {
151
+ this.panel = null;
152
+ this.panelEl = null;
153
+ });
154
+ }
155
+ static ɵfac = i0.ɵɵngDeclareFactory({
156
+ minVersion: "12.0.0",
157
+ version: "22.2.3",
158
+ ngImport: i0,
159
+ type: HyTooltip,
160
+ deps: [],
161
+ target: i0.ɵɵFactoryTarget.Directive
162
+ });
163
+ static ɵdir = i0.ɵɵngDeclareDirective({
164
+ minVersion: "17.1.0",
165
+ version: "22.2.3",
166
+ type: HyTooltip,
167
+ isStandalone: true,
168
+ selector: "[hyTooltip]",
169
+ inputs: {
170
+ message: {
171
+ classPropertyName: "message",
172
+ publicName: "hyTooltip",
173
+ isSignal: true,
174
+ isRequired: false,
175
+ transformFunction: null
176
+ },
177
+ tooltipPlacement: {
178
+ classPropertyName: "tooltipPlacement",
179
+ publicName: "tooltipPlacement",
180
+ isSignal: true,
181
+ isRequired: false,
182
+ transformFunction: null
183
+ },
184
+ tooltipDelay: {
185
+ classPropertyName: "tooltipDelay",
186
+ publicName: "tooltipDelay",
187
+ isSignal: true,
188
+ isRequired: false,
189
+ transformFunction: null
190
+ },
191
+ tooltipDisabled: {
192
+ classPropertyName: "tooltipDisabled",
193
+ publicName: "tooltipDisabled",
194
+ isSignal: true,
195
+ isRequired: false,
196
+ transformFunction: null
197
+ }
198
+ },
199
+ host: { listeners: {
200
+ "pointerenter": "onPointerEnter($event)",
201
+ "pointerleave": "scheduleHide()",
202
+ "focusin": "show(0)",
203
+ "focusout": "hide()",
204
+ "keydown.escape": "hide()"
205
+ } },
206
+ ngImport: i0
207
+ });
208
+ };
209
+ i0.ɵɵngDeclareClassMetadata({
210
+ minVersion: "12.0.0",
211
+ version: "22.2.3",
212
+ ngImport: i0,
213
+ type: HyTooltip,
214
+ decorators: [{
215
+ type: Directive,
216
+ args: [{
217
+ selector: "[hyTooltip]",
218
+ host: {
219
+ "(pointerenter)": "onPointerEnter($event)",
220
+ "(pointerleave)": "scheduleHide()",
221
+ "(focusin)": "show(0)",
222
+ "(focusout)": "hide()",
223
+ "(keydown.escape)": "hide()"
224
+ }
225
+ }]
226
+ }],
227
+ ctorParameters: () => [],
228
+ propDecorators: {
229
+ message: [{
230
+ type: i0.Input,
231
+ args: [{
232
+ isSignal: true,
233
+ alias: "hyTooltip",
234
+ required: false
235
+ }]
236
+ }],
237
+ tooltipPlacement: [{
238
+ type: i0.Input,
239
+ args: [{
240
+ isSignal: true,
241
+ alias: "tooltipPlacement",
242
+ required: false
243
+ }]
244
+ }],
245
+ tooltipDelay: [{
246
+ type: i0.Input,
247
+ args: [{
248
+ isSignal: true,
249
+ alias: "tooltipDelay",
250
+ required: false
251
+ }]
252
+ }],
253
+ tooltipDisabled: [{
254
+ type: i0.Input,
255
+ args: [{
256
+ isSignal: true,
257
+ alias: "tooltipDisabled",
258
+ required: false
259
+ }]
260
+ }]
261
+ }
262
+ });
263
+ var HyPopover = class HyPopover {
264
+ injector = inject(Injector);
265
+ host = inject(ElementRef);
266
+ viewContainer = inject(ViewContainerRef);
267
+ focusTraps = inject(FocusTrapFactory);
268
+ fidelity = inject(HyFidelity);
269
+ panelId = injectId("popover");
270
+ overlayRef = null;
271
+ position = null;
272
+ presence = new ɵHyPresence();
273
+ destroyed = false;
274
+ positioned = false;
275
+ content = input.required({
276
+ ...ngDevMode ? { debugName: "content" } : /* istanbul ignore next */ {},
277
+ alias: "hyPopover"
278
+ });
279
+ popoverLabel = input(...ngDevMode ? [void 0, { debugName: "popoverLabel" }] : /* istanbul ignore next */ []);
280
+ popoverMaterial = input("frosted", ...ngDevMode ? [{ debugName: "popoverMaterial" }] : /* istanbul ignore next */ []);
281
+ popoverPlacement = input("bottom", ...ngDevMode ? [{ debugName: "popoverPlacement" }] : /* istanbul ignore next */ []);
282
+ open = model(false, {
283
+ ...ngDevMode ? { debugName: "open" } : /* istanbul ignore next */ {},
284
+ alias: "popoverOpen"
285
+ });
286
+ constructor() {
287
+ effect(() => {
288
+ const open = this.open();
289
+ untracked(() => open ? void this.attach() : this.detach());
290
+ });
291
+ inject(DestroyRef).onDestroy(() => {
292
+ this.destroyed = true;
293
+ this.overlayRef?.dispose();
294
+ });
295
+ }
296
+ toggle() {
297
+ this.open.update((v) => !v);
298
+ }
299
+ close(restoreFocus = true) {
300
+ if (!this.open()) return;
301
+ this.open.set(false);
302
+ if (restoreFocus) this.host.nativeElement.focus();
303
+ }
304
+ preload() {
305
+ loadOverlay().catch(() => void 0);
306
+ }
307
+ async attach() {
308
+ const kit = await loadOverlay().catch(() => null);
309
+ if (this.destroyed) return;
310
+ if (!kit) {
311
+ this.open.set(false);
312
+ return;
313
+ }
314
+ if (!this.open()) return;
315
+ const { TemplatePortal, createFlexibleConnectedPositionStrategy, createOverlayRef, createRepositionScrollStrategy } = kit;
316
+ if (!this.overlayRef) {
317
+ this.position = createFlexibleConnectedPositionStrategy(this.injector, this.host).withViewportMargin(12).withPush(true).withTransformOriginOn(".hy-popover");
318
+ this.overlayRef = createOverlayRef(this.injector, {
319
+ positionStrategy: this.position,
320
+ scrollStrategy: createRepositionScrollStrategy(this.injector),
321
+ panelClass: "hy-popover-pane"
322
+ });
323
+ this.overlayRef.keydownEvents().subscribe((event) => {
324
+ if (event.key === "Escape") {
325
+ event.preventDefault();
326
+ this.close();
327
+ }
328
+ });
329
+ this.overlayRef.outsidePointerEvents().subscribe((event) => {
330
+ if (!this.host.nativeElement.contains(event.target)) this.close(false);
331
+ });
332
+ }
333
+ if (this.overlayRef.hasAttached()) {
334
+ if (this.presence.leaving && this.positioned) this.reveal(this.overlayRef.overlayElement);
335
+ return;
336
+ }
337
+ this.position?.withPositions(hyConnectedPositions(this.popoverPlacement(), 10));
338
+ const pane = this.overlayRef.overlayElement;
339
+ pane.id = this.panelId;
340
+ pane.setAttribute("role", "dialog");
341
+ const label = this.popoverLabel();
342
+ if (label) pane.setAttribute("aria-label", label);
343
+ else pane.removeAttribute("aria-label");
344
+ pane.classList.add("hy-glass", "hy-popover");
345
+ pane.dataset["material"] = this.fidelity.tier() === "low" ? "solid" : this.popoverMaterial();
346
+ pane.dataset["state"] = "closed";
347
+ pane.style.visibility = "hidden";
348
+ this.positioned = false;
349
+ pane.addEventListener("focusout", this.onFocusOut);
350
+ this.position?.positionChanges.pipe(take(1)).subscribe(() => {
351
+ this.positioned = true;
352
+ if (this.destroyed || !this.open() || !this.overlayRef?.hasAttached()) return;
353
+ this.reveal(pane);
354
+ });
355
+ this.overlayRef.attach(new TemplatePortal(this.content(), this.viewContainer));
356
+ }
357
+ reveal(pane) {
358
+ pane.style.removeProperty("visibility");
359
+ this.presence.enter(pane);
360
+ const trap = this.focusTraps.create(pane);
361
+ trap.focusFirstTabbableElementWhenReady().then((found) => {
362
+ if (!found && this.open() && !this.destroyed) {
363
+ pane.tabIndex = -1;
364
+ pane.focus();
365
+ }
366
+ trap.destroy();
367
+ });
368
+ }
369
+ detach() {
370
+ const ref = this.overlayRef;
371
+ if (!ref?.hasAttached()) return;
372
+ ref.overlayElement.removeEventListener("focusout", this.onFocusOut);
373
+ this.presence.leave(ref.overlayElement, () => ref.detach());
374
+ }
375
+ onFocusOut = (event) => {
376
+ const next = event.relatedTarget;
377
+ if (next && !this.overlayRef?.overlayElement.contains(next) && next !== this.host.nativeElement) this.close(false);
378
+ };
379
+ static ɵfac = i0.ɵɵngDeclareFactory({
380
+ minVersion: "12.0.0",
381
+ version: "22.2.3",
382
+ ngImport: i0,
383
+ type: HyPopover,
384
+ deps: [],
385
+ target: i0.ɵɵFactoryTarget.Directive
386
+ });
387
+ static ɵdir = i0.ɵɵngDeclareDirective({
388
+ minVersion: "17.1.0",
389
+ version: "22.2.3",
390
+ type: HyPopover,
391
+ isStandalone: true,
392
+ selector: "[hyPopover]",
393
+ inputs: {
394
+ content: {
395
+ classPropertyName: "content",
396
+ publicName: "hyPopover",
397
+ isSignal: true,
398
+ isRequired: true,
399
+ transformFunction: null
400
+ },
401
+ popoverLabel: {
402
+ classPropertyName: "popoverLabel",
403
+ publicName: "popoverLabel",
404
+ isSignal: true,
405
+ isRequired: false,
406
+ transformFunction: null
407
+ },
408
+ popoverMaterial: {
409
+ classPropertyName: "popoverMaterial",
410
+ publicName: "popoverMaterial",
411
+ isSignal: true,
412
+ isRequired: false,
413
+ transformFunction: null
414
+ },
415
+ popoverPlacement: {
416
+ classPropertyName: "popoverPlacement",
417
+ publicName: "popoverPlacement",
418
+ isSignal: true,
419
+ isRequired: false,
420
+ transformFunction: null
421
+ },
422
+ open: {
423
+ classPropertyName: "open",
424
+ publicName: "popoverOpen",
425
+ isSignal: true,
426
+ isRequired: false,
427
+ transformFunction: null
428
+ }
429
+ },
430
+ outputs: { open: "popoverOpenChange" },
431
+ host: {
432
+ attributes: { "aria-haspopup": "dialog" },
433
+ listeners: {
434
+ "click": "toggle()",
435
+ "pointerenter": "preload()",
436
+ "focusin": "preload()"
437
+ },
438
+ properties: {
439
+ "attr.aria-expanded": "open()",
440
+ "attr.aria-controls": "open() ? panelId : null"
441
+ }
442
+ },
443
+ exportAs: ["hyPopover"],
444
+ ngImport: i0
445
+ });
446
+ };
447
+ i0.ɵɵngDeclareClassMetadata({
448
+ minVersion: "12.0.0",
449
+ version: "22.2.3",
450
+ ngImport: i0,
451
+ type: HyPopover,
452
+ decorators: [{
453
+ type: Directive,
454
+ args: [{
455
+ selector: "[hyPopover]",
456
+ exportAs: "hyPopover",
457
+ host: {
458
+ "aria-haspopup": "dialog",
459
+ "[attr.aria-expanded]": "open()",
460
+ "[attr.aria-controls]": "open() ? panelId : null",
461
+ "(click)": "toggle()",
462
+ "(pointerenter)": "preload()",
463
+ "(focusin)": "preload()"
464
+ }
465
+ }]
466
+ }],
467
+ ctorParameters: () => [],
468
+ propDecorators: {
469
+ content: [{
470
+ type: i0.Input,
471
+ args: [{
472
+ isSignal: true,
473
+ alias: "hyPopover",
474
+ required: true
475
+ }]
476
+ }],
477
+ popoverLabel: [{
478
+ type: i0.Input,
479
+ args: [{
480
+ isSignal: true,
481
+ alias: "popoverLabel",
482
+ required: false
483
+ }]
484
+ }],
485
+ popoverMaterial: [{
486
+ type: i0.Input,
487
+ args: [{
488
+ isSignal: true,
489
+ alias: "popoverMaterial",
490
+ required: false
491
+ }]
492
+ }],
493
+ popoverPlacement: [{
494
+ type: i0.Input,
495
+ args: [{
496
+ isSignal: true,
497
+ alias: "popoverPlacement",
498
+ required: false
499
+ }]
500
+ }],
501
+ open: [{
502
+ type: i0.Input,
503
+ args: [{
504
+ isSignal: true,
505
+ alias: "popoverOpen",
506
+ required: false
507
+ }]
508
+ }, {
509
+ type: i0.Output,
510
+ args: ["popoverOpenChange"]
511
+ }]
512
+ }
513
+ });
514
+ export { HyPopover, HyTooltip, HyTooltipPanel };
515
+
516
+ //# sourceMappingURL=hyalo-angular-popover.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"hyalo-angular-popover.mjs","names":["HyPresence","HyPresence"],"sources":["../../../projects/hyalo/popover/load-overlay.ts","../../../projects/hyalo/popover/tooltip.ts","../../../projects/hyalo/popover/popover.ts"],"sourcesContent":["/**\r\n * @internal Loads the overlay code the first time a tooltip or popover is\r\n * about to open. A page full of triggers then costs nothing until someone\r\n * hovers or clicks one, and the import resolves to the same module when the\r\n * app already uses the overlay elsewhere.\r\n */\r\nexport type HyOverlayKit = typeof import('./overlay-kit');\r\n\r\nlet kit: Promise<HyOverlayKit> | undefined;\r\n\r\n/** @internal */\r\nexport function loadOverlay(): Promise<HyOverlayKit> {\r\n kit ??= import('./overlay-kit').catch((error: unknown) => {\r\n // A failed chunk load should not stick; the next open tries again.\r\n kit = undefined;\r\n throw error;\r\n });\r\n return kit;\r\n}\r\n","import { AriaDescriber } from '@angular/cdk/a11y';\r\nimport type { FlexibleConnectedPositionStrategy, OverlayRef } from '@angular/cdk/overlay';\r\nimport {\r\n ChangeDetectionStrategy,\r\n Component,\r\n DestroyRef,\r\n Directive,\r\n ElementRef,\r\n Injector,\r\n booleanAttribute,\r\n effect,\r\n inject,\r\n input,\r\n numberAttribute,\r\n signal,\r\n} from '@angular/core';\r\nimport {\r\n hyConnectedPositions,\r\n type HyPlacement,\r\n ɵHyPresence as HyPresence,\r\n} from '@hyalo/angular/overlay';\r\nimport { loadOverlay } from './load-overlay';\r\n\r\n@Component({\r\n selector: 'hy-tooltip-panel',\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n host: { class: 'hy-tooltip', 'aria-hidden': 'true' },\r\n template: `{{ message() }}`,\r\n})\r\nexport class HyTooltipPanel {\r\n readonly message = signal('');\r\n}\r\n\r\n/**\r\n * A short text hint on hover or keyboard focus.\r\n *\r\n * ```html\r\n * <button hyButton iconOnly aria-label=\"Copy link\" hyTooltip=\"Copy link\">...</button>\r\n * ```\r\n *\r\n * The text is also added to the trigger's `aria-describedby` through a\r\n * hidden element, so screen readers get it without the visual tooltip. The\r\n * tooltip stays open while the pointer is over it and closes on Escape, as\r\n * WCAG 1.4.13 asks. Keep it short and never put interactive content in it;\r\n * use `hyPopover` for that.\r\n */\r\n@Directive({\r\n selector: '[hyTooltip]',\r\n host: {\r\n '(pointerenter)': 'onPointerEnter($event)',\r\n '(pointerleave)': 'scheduleHide()',\r\n '(focusin)': 'show(0)',\r\n '(focusout)': 'hide()',\r\n '(keydown.escape)': 'hide()',\r\n },\r\n})\r\nexport class HyTooltip {\r\n private readonly injector = inject(Injector);\r\n private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\r\n private readonly describer = inject(AriaDescriber);\r\n private overlayRef: OverlayRef | null = null;\r\n private position: FlexibleConnectedPositionStrategy | null = null;\r\n private panel: HyTooltipPanel | null = null;\r\n private panelEl: HTMLElement | null = null;\r\n private readonly presence = new HyPresence();\r\n private showTimer: ReturnType<typeof setTimeout> | undefined;\r\n private hideTimer: ReturnType<typeof setTimeout> | undefined;\r\n /** True from show() until hide(), so a late overlay load knows to stop. */\r\n private wanted = false;\r\n private destroyed = false;\r\n\r\n /** The tooltip text. */\r\n readonly message = input('', { alias: 'hyTooltip' });\r\n /** Preferred side. Flips when there is no room. */\r\n readonly tooltipPlacement = input<HyPlacement>('top');\r\n /** Hover delay in milliseconds. Focus shows it right away. */\r\n readonly tooltipDelay = input(400, { transform: numberAttribute });\r\n readonly tooltipDisabled = input(false, { transform: booleanAttribute });\r\n\r\n constructor() {\r\n let described = '';\r\n effect(() => {\r\n const message = this.message();\r\n if (described) this.describer.removeDescription(this.host.nativeElement, described);\r\n if (message) this.describer.describe(this.host.nativeElement, message);\r\n described = message;\r\n if (this.panel) this.panel.message.set(message);\r\n });\r\n inject(DestroyRef).onDestroy(() => {\r\n this.destroyed = true;\r\n clearTimeout(this.showTimer);\r\n clearTimeout(this.hideTimer);\r\n if (described) this.describer.removeDescription(this.host.nativeElement, described);\r\n this.overlayRef?.dispose();\r\n });\r\n }\r\n\r\n protected onPointerEnter(event: PointerEvent): void {\r\n if (event.pointerType !== 'touch') this.show(this.tooltipDelay());\r\n }\r\n\r\n /** Shows the tooltip after the given delay. */\r\n show(delay = this.tooltipDelay()): void {\r\n if (this.tooltipDisabled() || !this.message()) return;\r\n clearTimeout(this.hideTimer);\r\n clearTimeout(this.showTimer);\r\n this.wanted = true;\r\n // Load during the hover delay, so the tooltip is ready when it ends.\r\n loadOverlay().catch(() => undefined);\r\n this.showTimer = setTimeout(() => void this.attach(), delay);\r\n }\r\n\r\n /** Starts hiding the tooltip now. It fades out quickly. */\r\n hide(): void {\r\n this.wanted = false;\r\n clearTimeout(this.showTimer);\r\n clearTimeout(this.hideTimer);\r\n const ref = this.overlayRef;\r\n if (!ref?.hasAttached() || !this.panelEl) return;\r\n this.presence.leave(this.panelEl, () => ref.detach());\r\n }\r\n\r\n protected scheduleHide(): void {\r\n clearTimeout(this.showTimer);\r\n this.hideTimer = setTimeout(() => this.hide(), 120);\r\n }\r\n\r\n private async attach(): Promise<void> {\r\n const kit = await loadOverlay().catch(() => null);\r\n if (!kit || !this.wanted || this.destroyed) return;\r\n const {\r\n ComponentPortal,\r\n createFlexibleConnectedPositionStrategy,\r\n createOverlayRef,\r\n createRepositionScrollStrategy,\r\n } = kit;\r\n if (!this.overlayRef) {\r\n this.position = createFlexibleConnectedPositionStrategy(this.injector, this.host)\r\n .withFlexibleDimensions(false)\r\n .withViewportMargin(8)\r\n .withTransformOriginOn('.hy-tooltip');\r\n this.overlayRef = createOverlayRef(this.injector, {\r\n positionStrategy: this.position,\r\n scrollStrategy: createRepositionScrollStrategy(this.injector),\r\n panelClass: 'hy-tooltip-pane',\r\n });\r\n // Hovering the tooltip itself keeps it open.\r\n this.overlayRef.overlayElement.addEventListener('pointerenter', () =>\r\n clearTimeout(this.hideTimer),\r\n );\r\n this.overlayRef.overlayElement.addEventListener('pointerleave', () => this.scheduleHide());\r\n }\r\n if (this.overlayRef.hasAttached()) {\r\n if (this.presence.leaving && this.panelEl) this.presence.enter(this.panelEl);\r\n return;\r\n }\r\n // Read on every show, so a changed placement applies next time.\r\n this.position?.withPositions(hyConnectedPositions(this.tooltipPlacement()));\r\n const ref = this.overlayRef.attach(new ComponentPortal(HyTooltipPanel, null, this.injector));\r\n this.panel = ref.instance;\r\n this.panel.message.set(this.message());\r\n const el = ref.location.nativeElement as HTMLElement;\r\n this.panelEl = el;\r\n this.presence.enter(el);\r\n ref.onDestroy(() => {\r\n this.panel = null;\r\n this.panelEl = null;\r\n });\r\n }\r\n}\r\n","import { FocusTrapFactory } from '@angular/cdk/a11y';\r\nimport { take } from 'rxjs';\r\nimport type { FlexibleConnectedPositionStrategy, OverlayRef } from '@angular/cdk/overlay';\r\nimport {\r\n DestroyRef,\r\n Directive,\r\n ElementRef,\r\n Injector,\r\n TemplateRef,\r\n ViewContainerRef,\r\n inject,\r\n input,\r\n model,\r\n effect,\r\n untracked,\r\n} from '@angular/core';\r\nimport { HyFidelity, injectId, type HyMaterial } from '@hyalo/angular/core';\r\nimport {\r\n hyConnectedPositions,\r\n type HyPlacement,\r\n ɵHyPresence as HyPresence,\r\n} from '@hyalo/angular/overlay';\r\nimport { loadOverlay } from './load-overlay';\r\n\r\n/**\r\n * A non-modal glass panel anchored to a trigger, for content that does not\r\n * fit in a tooltip: a short form, a menu of links, details.\r\n *\r\n * ```html\r\n * <button hyButton variant=\"glass\" [hyPopover]=\"share\" popoverLabel=\"Share\">Share</button>\r\n * <ng-template #share>\r\n * <a href=\"...\">Copy link</a>\r\n * </ng-template>\r\n * ```\r\n *\r\n * Click or Enter toggles it. On open, focus moves to the first focusable\r\n * element inside. Escape closes it and returns focus to the trigger, and so\r\n * does clicking outside or tabbing out of it.\r\n */\r\n@Directive({\r\n selector: '[hyPopover]',\r\n exportAs: 'hyPopover',\r\n host: {\r\n 'aria-haspopup': 'dialog',\r\n '[attr.aria-expanded]': 'open()',\r\n '[attr.aria-controls]': 'open() ? panelId : null',\r\n '(click)': 'toggle()',\r\n // Fetch the overlay code as soon as the user heads for the trigger.\r\n '(pointerenter)': 'preload()',\r\n '(focusin)': 'preload()',\r\n },\r\n})\r\nexport class HyPopover {\r\n private readonly injector = inject(Injector);\r\n private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\r\n private readonly viewContainer = inject(ViewContainerRef);\r\n private readonly focusTraps = inject(FocusTrapFactory);\r\n private readonly fidelity = inject(HyFidelity);\r\n protected readonly panelId = injectId('popover');\r\n private overlayRef: OverlayRef | null = null;\r\n private position: FlexibleConnectedPositionStrategy | null = null;\r\n private readonly presence = new HyPresence();\r\n private destroyed = false;\r\n private positioned = false;\r\n\r\n /** The content. */\r\n readonly content = input.required<TemplateRef<unknown>>({ alias: 'hyPopover' });\r\n /** Accessible name of the panel. */\r\n readonly popoverLabel = input<string>();\r\n /** Use solid over image content when the background would reduce text contrast. */\r\n readonly popoverMaterial = input<HyMaterial>('frosted');\r\n /** Preferred side. Flips when there is no room. */\r\n readonly popoverPlacement = input<HyPlacement>('bottom');\r\n /** Whether the panel is open. Two-way bindable as `[(popoverOpen)]`. */\r\n readonly open = model(false, { alias: 'popoverOpen' });\r\n\r\n constructor() {\r\n effect(() => {\r\n const open = this.open();\r\n untracked(() => (open ? void this.attach() : this.detach()));\r\n });\r\n inject(DestroyRef).onDestroy(() => {\r\n this.destroyed = true;\r\n this.overlayRef?.dispose();\r\n });\r\n }\r\n\r\n toggle(): void {\r\n this.open.update((v) => !v);\r\n }\r\n\r\n /** Closes the panel, optionally moving focus back to the trigger. */\r\n close(restoreFocus = true): void {\r\n if (!this.open()) return;\r\n this.open.set(false);\r\n if (restoreFocus) this.host.nativeElement.focus();\r\n }\r\n\r\n protected preload(): void {\r\n loadOverlay().catch(() => undefined);\r\n }\r\n\r\n private async attach(): Promise<void> {\r\n const kit = await loadOverlay().catch(() => null);\r\n if (this.destroyed) return;\r\n if (!kit) {\r\n // Without the overlay code there is no panel, so do not claim one.\r\n this.open.set(false);\r\n return;\r\n }\r\n // It may have been closed again while the code loaded.\r\n if (!this.open()) return;\r\n const {\r\n TemplatePortal,\r\n createFlexibleConnectedPositionStrategy,\r\n createOverlayRef,\r\n createRepositionScrollStrategy,\r\n } = kit;\r\n if (!this.overlayRef) {\r\n this.position = createFlexibleConnectedPositionStrategy(this.injector, this.host)\r\n .withViewportMargin(12)\r\n .withPush(true)\r\n // The panel grows out of its trigger, not out of its own centre.\r\n .withTransformOriginOn('.hy-popover');\r\n this.overlayRef = createOverlayRef(this.injector, {\r\n positionStrategy: this.position,\r\n scrollStrategy: createRepositionScrollStrategy(this.injector),\r\n panelClass: 'hy-popover-pane',\r\n });\r\n this.overlayRef.keydownEvents().subscribe((event) => {\r\n if (event.key === 'Escape') {\r\n event.preventDefault();\r\n this.close();\r\n }\r\n });\r\n this.overlayRef.outsidePointerEvents().subscribe((event) => {\r\n if (!this.host.nativeElement.contains(event.target as Node)) this.close(false);\r\n });\r\n }\r\n if (this.overlayRef.hasAttached()) {\r\n // Reopened while fading out: turn the exit around.\r\n if (this.presence.leaving && this.positioned) this.reveal(this.overlayRef.overlayElement);\r\n return;\r\n }\r\n // Read on every open, so a changed placement applies next time.\r\n this.position?.withPositions(hyConnectedPositions(this.popoverPlacement(), 10));\r\n const pane = this.overlayRef.overlayElement;\r\n pane.id = this.panelId;\r\n pane.setAttribute('role', 'dialog');\r\n const label = this.popoverLabel();\r\n if (label) pane.setAttribute('aria-label', label);\r\n else pane.removeAttribute('aria-label');\r\n pane.classList.add('hy-glass', 'hy-popover');\r\n pane.dataset['material'] = this.fidelity.tier() === 'low' ? 'solid' : this.popoverMaterial();\r\n pane.dataset['state'] = 'closed';\r\n pane.style.visibility = 'hidden';\r\n this.positioned = false;\r\n pane.addEventListener('focusout', this.onFocusOut);\r\n // CDK positions after rendering the portal. Do not expose its unpositioned first frame.\r\n this.position?.positionChanges.pipe(take(1)).subscribe(() => {\r\n this.positioned = true;\r\n if (this.destroyed || !this.open() || !this.overlayRef?.hasAttached()) return;\r\n this.reveal(pane);\r\n });\r\n this.overlayRef.attach(new TemplatePortal(this.content(), this.viewContainer));\r\n }\r\n\r\n private reveal(pane: HTMLElement): void {\r\n pane.style.removeProperty('visibility');\r\n this.presence.enter(pane);\r\n const trap = this.focusTraps.create(pane);\r\n void trap.focusFirstTabbableElementWhenReady().then((found) => {\r\n if (!found && this.open() && !this.destroyed) {\r\n pane.tabIndex = -1;\r\n pane.focus();\r\n }\r\n trap.destroy();\r\n });\r\n }\r\n\r\n private detach(): void {\r\n const ref = this.overlayRef;\r\n if (!ref?.hasAttached()) return;\r\n ref.overlayElement.removeEventListener('focusout', this.onFocusOut);\r\n this.presence.leave(ref.overlayElement, () => ref.detach());\r\n }\r\n\r\n private readonly onFocusOut = (event: FocusEvent): void => {\r\n const next = event.relatedTarget as Node | null;\r\n if (\r\n next &&\r\n !this.overlayRef?.overlayElement.contains(next) &&\r\n next !== this.host.nativeElement\r\n ) {\r\n this.close(false);\r\n }\r\n };\r\n}\r\n"],"mappings":"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"}