ng-primitives 0.44.0 → 0.45.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/combobox/combobox/combobox-state.d.ts +3 -2
- package/combobox/combobox/combobox.d.ts +9 -3
- package/combobox/combobox-button/combobox-button.d.ts +3 -2
- package/combobox/combobox-dropdown/combobox-dropdown.d.ts +52 -2
- package/combobox/combobox-input/combobox-input.d.ts +3 -2
- package/combobox/combobox-option/combobox-option.d.ts +3 -2
- package/combobox/combobox-portal/combobox-portal.d.ts +10 -21
- package/example-theme/index.css +1 -0
- package/fesm2022/ng-primitives-combobox.mjs +66 -87
- package/fesm2022/ng-primitives-combobox.mjs.map +1 -1
- package/fesm2022/ng-primitives-focus-trap.mjs +9 -1
- package/fesm2022/ng-primitives-focus-trap.mjs.map +1 -1
- package/fesm2022/ng-primitives-listbox.mjs +1 -1
- package/fesm2022/ng-primitives-listbox.mjs.map +1 -1
- package/fesm2022/ng-primitives-menu.mjs +382 -63
- package/fesm2022/ng-primitives-menu.mjs.map +1 -1
- package/fesm2022/ng-primitives-popover.mjs +66 -331
- package/fesm2022/ng-primitives-popover.mjs.map +1 -1
- package/fesm2022/ng-primitives-portal.mjs +360 -2
- package/fesm2022/ng-primitives-portal.mjs.map +1 -1
- package/fesm2022/ng-primitives-tooltip.mjs +56 -176
- package/fesm2022/ng-primitives-tooltip.mjs.map +1 -1
- package/focus-trap/focus-trap/focus-trap-state.d.ts +1 -0
- package/focus-trap/focus-trap/focus-trap.d.ts +5 -0
- package/menu/config/menu-config.d.ts +42 -0
- package/menu/index.d.ts +5 -1
- package/menu/menu/menu.d.ts +6 -2
- package/menu/menu-trigger/menu-trigger-state.d.ts +38 -0
- package/menu/menu-trigger/menu-trigger.d.ts +91 -13
- package/menu/submenu-trigger/submenu-trigger-state.d.ts +58 -0
- package/menu/submenu-trigger/submenu-trigger.d.ts +66 -10
- package/package.json +12 -12
- package/popover/index.d.ts +1 -2
- package/popover/popover/popover.d.ts +2 -43
- package/popover/popover-trigger/popover-trigger.d.ts +16 -106
- package/portal/index.d.ts +2 -0
- package/portal/overlay-token.d.ts +12 -0
- package/portal/overlay.d.ts +172 -0
- package/schematics/ng-generate/templates/combobox/combobox.__fileSuffix@dasherize__.ts.template +31 -0
- package/tooltip/index.d.ts +1 -1
- package/tooltip/tooltip/tooltip.d.ts +3 -25
- package/tooltip/tooltip-trigger/tooltip-trigger.d.ts +16 -63
- package/popover/popover/popover-token.d.ts +0 -10
- package/popover/utils/transform-origin.d.ts +0 -2
- package/tooltip/tooltip/tooltip-token.d.ts +0 -10
|
@@ -1,15 +1,10 @@
|
|
|
1
|
+
import { createOverlay, injectOverlay } from 'ng-primitives/portal';
|
|
2
|
+
export { injectOverlayContext as injectTooltipContext } from 'ng-primitives/portal';
|
|
1
3
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { InjectionToken, inject, ElementRef,
|
|
3
|
-
import { DOCUMENT, isPlatformBrowser } from '@angular/common';
|
|
4
|
-
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
5
|
-
import { offset, shift, flip, autoUpdate, computePosition } from '@floating-ui/dom';
|
|
4
|
+
import { InjectionToken, inject, ElementRef, Injector, ViewContainerRef, input, booleanAttribute, numberAttribute, signal, computed, Directive } from '@angular/core';
|
|
6
5
|
import * as i1 from 'ng-primitives/internal';
|
|
7
|
-
import {
|
|
8
|
-
import { createPortal } from 'ng-primitives/portal';
|
|
9
|
-
import { fromResizeEvent } from 'ng-primitives/resize';
|
|
10
|
-
import { injectDisposables } from 'ng-primitives/utils';
|
|
6
|
+
import { provideExitAnimationManager, NgpExitAnimation } from 'ng-primitives/internal';
|
|
11
7
|
import { createStateToken, createStateProvider, createStateInjector, createState } from 'ng-primitives/state';
|
|
12
|
-
import { getTransformOrigin } from 'ng-primitives/popover';
|
|
13
8
|
|
|
14
9
|
const defaultTooltipConfig = {
|
|
15
10
|
offset: 4,
|
|
@@ -41,20 +36,6 @@ function injectTooltipConfig() {
|
|
|
41
36
|
return inject(NgpTooltipConfigToken, { optional: true }) ?? defaultTooltipConfig;
|
|
42
37
|
}
|
|
43
38
|
|
|
44
|
-
const NgpTooltipContextToken = new InjectionToken('NgpTooltipContextToken');
|
|
45
|
-
/**
|
|
46
|
-
* Inject the Tooltip context
|
|
47
|
-
*/
|
|
48
|
-
function injectTooltipContext() {
|
|
49
|
-
return inject(NgpTooltipContextToken);
|
|
50
|
-
}
|
|
51
|
-
/**
|
|
52
|
-
* Provide the Tooltip directive instance
|
|
53
|
-
*/
|
|
54
|
-
function provideTooltipContext(context) {
|
|
55
|
-
return { provide: NgpTooltipContextToken, useValue: context };
|
|
56
|
-
}
|
|
57
|
-
|
|
58
39
|
/**
|
|
59
40
|
* The state token for the TooltipTrigger primitive.
|
|
60
41
|
*/
|
|
@@ -77,38 +58,26 @@ const tooltipTriggerState = createState(NgpTooltipTriggerStateToken);
|
|
|
77
58
|
*/
|
|
78
59
|
class NgpTooltipTrigger {
|
|
79
60
|
constructor() {
|
|
80
|
-
/**
|
|
81
|
-
* Access the exit animation manager.
|
|
82
|
-
*/
|
|
83
|
-
this.exitAnimationManager = injectExitAnimationManager();
|
|
84
61
|
/**
|
|
85
62
|
* Access the trigger element
|
|
86
63
|
*/
|
|
87
64
|
this.trigger = inject((ElementRef));
|
|
88
|
-
/**
|
|
89
|
-
* Access the view container ref.
|
|
90
|
-
*/
|
|
91
|
-
this.viewContainerRef = inject(ViewContainerRef);
|
|
92
|
-
/**
|
|
93
|
-
* Access the document.
|
|
94
|
-
*/
|
|
95
|
-
this.document = inject(DOCUMENT);
|
|
96
65
|
/**
|
|
97
66
|
* Access the injector.
|
|
98
67
|
*/
|
|
99
68
|
this.injector = inject(Injector);
|
|
100
69
|
/**
|
|
101
|
-
* Access the
|
|
70
|
+
* Access the view container reference.
|
|
102
71
|
*/
|
|
103
|
-
this.
|
|
72
|
+
this.viewContainerRef = inject(ViewContainerRef);
|
|
104
73
|
/**
|
|
105
|
-
* Access the
|
|
74
|
+
* Access the global tooltip configuration.
|
|
106
75
|
*/
|
|
107
|
-
this.
|
|
76
|
+
this.config = injectTooltipConfig();
|
|
108
77
|
/**
|
|
109
78
|
* Access the tooltip template ref.
|
|
110
79
|
*/
|
|
111
|
-
this.tooltip = input(
|
|
80
|
+
this.tooltip = input(undefined, {
|
|
112
81
|
alias: 'ngpTooltipTrigger',
|
|
113
82
|
});
|
|
114
83
|
/**
|
|
@@ -166,140 +135,80 @@ class NgpTooltipTrigger {
|
|
|
166
135
|
alias: 'ngpTooltipTriggerContainer',
|
|
167
136
|
});
|
|
168
137
|
/**
|
|
169
|
-
* Provide context to the tooltip.
|
|
170
|
-
* @default null
|
|
138
|
+
* Provide context to the tooltip. This can be used to pass data to the tooltip content.
|
|
171
139
|
*/
|
|
172
|
-
this.context = input(
|
|
140
|
+
this.context = input(undefined, {
|
|
173
141
|
alias: 'ngpTooltipTriggerContext',
|
|
174
142
|
});
|
|
175
143
|
/**
|
|
176
|
-
*
|
|
177
|
-
*/
|
|
178
|
-
this.viewRef = signal(null);
|
|
179
|
-
/**
|
|
180
|
-
* Derive the tooltip middleware from the provided configuration.
|
|
181
|
-
*/
|
|
182
|
-
this.middleware = computed(() => {
|
|
183
|
-
const middleware = [offset(this.state.offset()), shift()];
|
|
184
|
-
if (this.state.flip()) {
|
|
185
|
-
middleware.push(flip());
|
|
186
|
-
}
|
|
187
|
-
return middleware;
|
|
188
|
-
});
|
|
189
|
-
/**
|
|
190
|
-
* Store the computed position of the tooltip.
|
|
191
|
-
* @internal
|
|
192
|
-
*/
|
|
193
|
-
this.position = signal({
|
|
194
|
-
x: 0,
|
|
195
|
-
y: 0,
|
|
196
|
-
});
|
|
197
|
-
/**
|
|
144
|
+
* The overlay that manages the tooltip
|
|
198
145
|
* @internal
|
|
199
|
-
* Store the trigger width.
|
|
200
146
|
*/
|
|
201
|
-
this.
|
|
147
|
+
this.overlay = signal(null);
|
|
202
148
|
/**
|
|
149
|
+
* The open state of the tooltip.
|
|
203
150
|
* @internal
|
|
204
|
-
* Whether the tooltip is open or not.
|
|
205
151
|
*/
|
|
206
|
-
this.open = computed(() => this.
|
|
152
|
+
this.open = computed(() => this.overlay()?.isOpen() ?? false);
|
|
207
153
|
/**
|
|
208
154
|
* Store the state of the tooltip.
|
|
209
155
|
* @internal
|
|
210
156
|
*/
|
|
211
157
|
this.state = tooltipTriggerState(this);
|
|
212
|
-
// update the width of the trigger when it resizes
|
|
213
|
-
fromResizeEvent(this.trigger.nativeElement)
|
|
214
|
-
.pipe(takeUntilDestroyed())
|
|
215
|
-
.subscribe(() => this.width.set(this.trigger.nativeElement.offsetWidth));
|
|
216
158
|
}
|
|
217
159
|
ngOnDestroy() {
|
|
218
|
-
this.
|
|
160
|
+
this.overlay()?.destroy();
|
|
219
161
|
}
|
|
220
162
|
/**
|
|
221
163
|
* Show the tooltip.
|
|
222
164
|
*/
|
|
223
165
|
show() {
|
|
224
|
-
//
|
|
225
|
-
if (this.
|
|
226
|
-
this.closeTimeout();
|
|
227
|
-
this.closeTimeout = undefined;
|
|
228
|
-
}
|
|
229
|
-
// if the trigger is disabled or the tooltip is already open then do not show the tooltip
|
|
230
|
-
if (this.state.disabled() || this.openTimeout) {
|
|
166
|
+
// If the trigger is disabled, do not show the tooltip
|
|
167
|
+
if (this.state.disabled() || this.open()) {
|
|
231
168
|
return;
|
|
232
169
|
}
|
|
233
|
-
//
|
|
234
|
-
if (this.
|
|
235
|
-
|
|
170
|
+
// Create the overlay if it doesn't exist yet
|
|
171
|
+
if (!this.overlay()) {
|
|
172
|
+
this.createOverlay();
|
|
236
173
|
}
|
|
237
|
-
this.
|
|
174
|
+
this.overlay()?.show();
|
|
238
175
|
}
|
|
239
176
|
/**
|
|
240
177
|
* Hide the tooltip.
|
|
241
178
|
*/
|
|
242
179
|
hide() {
|
|
243
|
-
//
|
|
244
|
-
if (this.
|
|
245
|
-
this.openTimeout();
|
|
246
|
-
this.openTimeout = undefined;
|
|
247
|
-
}
|
|
248
|
-
// if the trigger is disabled or the tooltip is already closed then do not hide the tooltip
|
|
249
|
-
if (this.state.disabled() || this.closeTimeout) {
|
|
180
|
+
// If the trigger is disabled, do nothing
|
|
181
|
+
if (this.state.disabled()) {
|
|
250
182
|
return;
|
|
251
183
|
}
|
|
252
|
-
this.
|
|
184
|
+
this.overlay()?.hide();
|
|
253
185
|
}
|
|
254
|
-
|
|
255
|
-
|
|
186
|
+
/**
|
|
187
|
+
* Create the overlay that will contain the tooltip
|
|
188
|
+
*/
|
|
189
|
+
createOverlay() {
|
|
256
190
|
const tooltip = this.state.tooltip();
|
|
257
191
|
if (!tooltip) {
|
|
258
192
|
throw new Error('Tooltip must be either a TemplateRef or a ComponentType');
|
|
259
193
|
}
|
|
260
|
-
// Create
|
|
261
|
-
const
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
// we want to determine the strategy to use. If the tooltip has position: fixed then we want to use
|
|
279
|
-
// fixed positioning. Otherwise we want to use absolute positioning.
|
|
280
|
-
const strategy = getComputedStyle(outletElement).position === 'fixed' ? 'fixed' : 'absolute';
|
|
281
|
-
this.dispose = autoUpdate(this.trigger.nativeElement, outletElement, async () => {
|
|
282
|
-
const position = await computePosition(this.trigger.nativeElement, outletElement, {
|
|
283
|
-
placement: this.state.placement(),
|
|
284
|
-
middleware: this.middleware(),
|
|
285
|
-
strategy,
|
|
286
|
-
});
|
|
287
|
-
this.position.set({ x: position.x, y: position.y });
|
|
288
|
-
});
|
|
289
|
-
}
|
|
290
|
-
async destroyTooltip() {
|
|
291
|
-
this.closeTimeout = undefined;
|
|
292
|
-
const viewRef = this.viewRef();
|
|
293
|
-
if (!viewRef) {
|
|
294
|
-
return;
|
|
295
|
-
}
|
|
296
|
-
// we remove this to prevent the popover from being destroyed twice
|
|
297
|
-
// because ngOnDestroy will be called on the viewRef
|
|
298
|
-
// when the popover is destroyed triggering this method again
|
|
299
|
-
this.viewRef.set(null);
|
|
300
|
-
// destroy the view ref
|
|
301
|
-
viewRef.detach();
|
|
302
|
-
this.dispose?.();
|
|
194
|
+
// Create config for the overlay
|
|
195
|
+
const config = {
|
|
196
|
+
content: tooltip,
|
|
197
|
+
triggerElement: this.trigger.nativeElement,
|
|
198
|
+
injector: this.injector,
|
|
199
|
+
context: this.state.context(),
|
|
200
|
+
container: this.state.container(),
|
|
201
|
+
placement: this.state.placement(),
|
|
202
|
+
offset: this.state.offset(),
|
|
203
|
+
flip: this.state.flip(),
|
|
204
|
+
showDelay: this.state.showDelay(),
|
|
205
|
+
hideDelay: this.state.hideDelay(),
|
|
206
|
+
closeOnEscape: true,
|
|
207
|
+
closeOnOutsideClick: true,
|
|
208
|
+
viewContainerRef: this.viewContainerRef,
|
|
209
|
+
};
|
|
210
|
+
// Create the overlay instance
|
|
211
|
+
this.overlay.set(createOverlay(config));
|
|
303
212
|
}
|
|
304
213
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpTooltipTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
305
214
|
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.11", type: NgpTooltipTrigger, isStandalone: true, selector: "[ngpTooltipTrigger]", inputs: { tooltip: { classPropertyName: "tooltip", publicName: "ngpTooltipTrigger", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "ngpTooltipTriggerDisabled", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "ngpTooltipTriggerPlacement", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "ngpTooltipTriggerOffset", isSignal: true, isRequired: false, transformFunction: null }, showDelay: { classPropertyName: "showDelay", publicName: "ngpTooltipTriggerShowDelay", isSignal: true, isRequired: false, transformFunction: null }, hideDelay: { classPropertyName: "hideDelay", publicName: "ngpTooltipTriggerHideDelay", isSignal: true, isRequired: false, transformFunction: null }, flip: { classPropertyName: "flip", publicName: "ngpTooltipTriggerFlip", isSignal: true, isRequired: false, transformFunction: null }, container: { classPropertyName: "container", publicName: "ngpTooltipTriggerContainer", isSignal: true, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "ngpTooltipTriggerContext", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "show()", "mouseleave": "hide()", "focus": "show()", "blur": "hide()" }, properties: { "attr.data-open": "open() ? \"\" : null", "attr.data-disabled": "state.disabled() ? \"\" : null" } }, providers: [provideTooltipTriggerState(), provideExitAnimationManager()], exportAs: ["ngpTooltipTrigger"], ngImport: i0 }); }
|
|
@@ -319,7 +228,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
|
|
|
319
228
|
'(blur)': 'hide()',
|
|
320
229
|
},
|
|
321
230
|
}]
|
|
322
|
-
}]
|
|
231
|
+
}] });
|
|
323
232
|
|
|
324
233
|
/**
|
|
325
234
|
* Apply the `ngpTooltip` directive to an element that represents the tooltip. This typically would be a `div` inside an `ng-template`.
|
|
@@ -327,41 +236,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
|
|
|
327
236
|
class NgpTooltip {
|
|
328
237
|
constructor() {
|
|
329
238
|
/**
|
|
330
|
-
* Access the
|
|
331
|
-
*/
|
|
332
|
-
this.tooltip = inject((ElementRef));
|
|
333
|
-
/**
|
|
334
|
-
* Access the platform.
|
|
335
|
-
*/
|
|
336
|
-
this.platform = inject(PLATFORM_ID);
|
|
337
|
-
/**
|
|
338
|
-
* Access the trigger instance.
|
|
339
|
-
*/
|
|
340
|
-
this.trigger = injectTooltipTriggerState();
|
|
341
|
-
/**
|
|
342
|
-
* Compute the x position of the tooltip.
|
|
239
|
+
* Access the overlay.
|
|
343
240
|
*/
|
|
344
|
-
this.
|
|
345
|
-
/**
|
|
346
|
-
* Compute the y position of the tooltip.
|
|
347
|
-
*/
|
|
348
|
-
this.y = computed(() => this.trigger().position().y);
|
|
349
|
-
/**
|
|
350
|
-
* Derive the transform origin of the popover.
|
|
351
|
-
*/
|
|
352
|
-
this.transformOrigin = computed(() => getTransformOrigin(this.trigger().placement()));
|
|
353
|
-
}
|
|
354
|
-
ngOnInit() {
|
|
355
|
-
// if the element does not have a fixed position then throw a warning in dev mode
|
|
356
|
-
if (isDevMode() && isPlatformBrowser(this.platform)) {
|
|
357
|
-
const { position } = getComputedStyle(this.tooltip.nativeElement);
|
|
358
|
-
if (position !== 'absolute' && position !== 'fixed') {
|
|
359
|
-
console.warn(`The tooltip element must have an absolute or fixed position. The current position is ${position}.`);
|
|
360
|
-
}
|
|
361
|
-
}
|
|
241
|
+
this.overlay = injectOverlay();
|
|
362
242
|
}
|
|
363
243
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpTooltip, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
364
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.11", type: NgpTooltip, isStandalone: true, selector: "[ngpTooltip]", host: { attributes: { "role": "tooltip" }, properties: { "style.left.px": "
|
|
244
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.11", type: NgpTooltip, isStandalone: true, selector: "[ngpTooltip]", host: { attributes: { "role": "tooltip" }, properties: { "style.left.px": "overlay.position().x", "style.top.px": "overlay.position().y", "style.--ngp-tooltip-trigger-width.px": "overlay.triggerWidth()", "style.--ngp-tooltip-transform-origin": "overlay.transformOrigin()" } }, exportAs: ["ngpTooltip"], hostDirectives: [{ directive: i1.NgpExitAnimation }], ngImport: i0 }); }
|
|
365
245
|
}
|
|
366
246
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpTooltip, decorators: [{
|
|
367
247
|
type: Directive,
|
|
@@ -371,10 +251,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
|
|
|
371
251
|
hostDirectives: [NgpExitAnimation],
|
|
372
252
|
host: {
|
|
373
253
|
role: 'tooltip',
|
|
374
|
-
'[style.left.px]': '
|
|
375
|
-
'[style.top.px]': '
|
|
376
|
-
'[style.--ngp-tooltip-trigger-width.px]': '
|
|
377
|
-
'[style.--ngp-tooltip-transform-origin]': 'transformOrigin()',
|
|
254
|
+
'[style.left.px]': 'overlay.position().x',
|
|
255
|
+
'[style.top.px]': 'overlay.position().y',
|
|
256
|
+
'[style.--ngp-tooltip-trigger-width.px]': 'overlay.triggerWidth()',
|
|
257
|
+
'[style.--ngp-tooltip-transform-origin]': 'overlay.transformOrigin()',
|
|
378
258
|
},
|
|
379
259
|
}]
|
|
380
260
|
}] });
|
|
@@ -383,5 +263,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
|
|
|
383
263
|
* Generated bundle index. Do not edit.
|
|
384
264
|
*/
|
|
385
265
|
|
|
386
|
-
export { NgpTooltip,
|
|
266
|
+
export { NgpTooltip, NgpTooltipTrigger, injectTooltipTriggerState, provideTooltipConfig, provideTooltipTriggerState };
|
|
387
267
|
//# sourceMappingURL=ng-primitives-tooltip.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ng-primitives-tooltip.mjs","sources":["../../../../packages/ng-primitives/tooltip/src/config/tooltip-config.ts","../../../../packages/ng-primitives/tooltip/src/tooltip/tooltip-token.ts","../../../../packages/ng-primitives/tooltip/src/tooltip-trigger/tooltip-trigger-state.ts","../../../../packages/ng-primitives/tooltip/src/tooltip-trigger/tooltip-trigger.ts","../../../../packages/ng-primitives/tooltip/src/tooltip/tooltip.ts","../../../../packages/ng-primitives/tooltip/src/ng-primitives-tooltip.ts"],"sourcesContent":["import { InjectionToken, Provider, inject } from '@angular/core';\nimport { type Placement } from '@floating-ui/dom';\n\nexport interface NgpTooltipConfig {\n /**\n * Define the offset of the tooltip relative to the trigger.\n * @default 4\n */\n offset: number;\n\n /**\n * Define the placement of the tooltip relative to the trigger.\n * @default 'top'\n */\n placement: Placement;\n\n /**\n * Define the delay before the tooltip is shown.\n * @default 0\n */\n showDelay: number;\n\n /**\n * Define the delay before the tooltip is hidden.\n * @default 0\n */\n hideDelay: number;\n\n /**\n * Define whether the tooltip should flip when there is not enough space for the tooltip.\n * @default true\n */\n flip: boolean;\n\n /**\n * Define the container in to which the tooltip should be attached.\n * @default document.body\n */\n container: HTMLElement | null;\n}\n\nexport const defaultTooltipConfig: NgpTooltipConfig = {\n offset: 4,\n placement: 'top',\n showDelay: 0,\n hideDelay: 0,\n flip: true,\n container: null,\n};\n\nexport const NgpTooltipConfigToken = new InjectionToken<NgpTooltipConfig>('NgpTooltipConfigToken');\n\n/**\n * Provide the default Tooltip configuration\n * @param config The Tooltip configuration\n * @returns The provider\n */\nexport function provideTooltipConfig(config: Partial<NgpTooltipConfig>): Provider[] {\n return [\n {\n provide: NgpTooltipConfigToken,\n useValue: { ...defaultTooltipConfig, ...config },\n },\n ];\n}\n\n/**\n * Inject the Tooltip configuration\n * @returns The global Tooltip configuration\n */\nexport function injectTooltipConfig(): NgpTooltipConfig {\n return inject(NgpTooltipConfigToken, { optional: true }) ?? defaultTooltipConfig;\n}\n","import { inject, InjectionToken, ValueProvider } from '@angular/core';\n\nexport const NgpTooltipContextToken = new InjectionToken<unknown>('NgpTooltipContextToken');\n\n/**\n * Inject the Tooltip context\n */\nexport function injectTooltipContext<T>(): T {\n return inject(NgpTooltipContextToken) as T;\n}\n\n/**\n * Provide the Tooltip directive instance\n */\nexport function provideTooltipContext<T>(context: T): ValueProvider {\n return { provide: NgpTooltipContextToken, useValue: context };\n}\n","import { Signal } from '@angular/core';\nimport {\n createState,\n createStateInjector,\n createStateProvider,\n createStateToken,\n State,\n} from 'ng-primitives/state';\nimport type { NgpTooltipTrigger } from './tooltip-trigger';\n\n/**\n * The state token for the TooltipTrigger primitive.\n */\nexport const NgpTooltipTriggerStateToken =\n createStateToken<NgpTooltipTrigger<unknown>>('TooltipTrigger');\n\n/**\n * Provides the TooltipTrigger state.\n */\nexport const provideTooltipTriggerState = createStateProvider(NgpTooltipTriggerStateToken);\n\n/**\n * Injects the TooltipTrigger state.\n */\nexport const injectTooltipTriggerState = createStateInjector(NgpTooltipTriggerStateToken) as <\n T,\n>() => Signal<State<NgpTooltipTrigger<T>>>;\n\n/**\n * The TooltipTrigger state registration function.\n */\nexport const tooltipTriggerState = createState(NgpTooltipTriggerStateToken);\n","import { BooleanInput, NumberInput } from '@angular/cdk/coercion';\nimport { DOCUMENT } from '@angular/common';\nimport {\n Directive,\n ElementRef,\n Injector,\n OnDestroy,\n TemplateRef,\n Type,\n ViewContainerRef,\n booleanAttribute,\n computed,\n inject,\n input,\n numberAttribute,\n signal,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport {\n Middleware,\n Placement,\n autoUpdate,\n computePosition,\n flip,\n offset,\n shift,\n} from '@floating-ui/dom';\nimport { injectExitAnimationManager, provideExitAnimationManager } from 'ng-primitives/internal';\nimport { NgpPortal, createPortal } from 'ng-primitives/portal';\nimport { fromResizeEvent } from 'ng-primitives/resize';\nimport { injectDisposables } from 'ng-primitives/utils';\nimport { injectTooltipConfig } from '../config/tooltip-config';\nimport { provideTooltipContext } from '../tooltip/tooltip-token';\nimport { provideTooltipTriggerState, tooltipTriggerState } from './tooltip-trigger-state';\n\n/**\n * Apply the `ngpTooltipTrigger` directive to an element that triggers the tooltip to show.\n */\n@Directive({\n selector: '[ngpTooltipTrigger]',\n exportAs: 'ngpTooltipTrigger',\n providers: [provideTooltipTriggerState(), provideExitAnimationManager()],\n host: {\n '[attr.data-open]': 'open() ? \"\" : null',\n '[attr.data-disabled]': 'state.disabled() ? \"\" : null',\n '(mouseenter)': 'show()',\n '(mouseleave)': 'hide()',\n '(focus)': 'show()',\n '(blur)': 'hide()',\n },\n})\nexport class NgpTooltipTrigger<T = null> implements OnDestroy {\n /**\n * Access the exit animation manager.\n */\n private readonly exitAnimationManager = injectExitAnimationManager();\n\n /**\n * Access the trigger element\n */\n private readonly trigger = inject(ElementRef<HTMLElement>);\n\n /**\n * Access the view container ref.\n */\n private readonly viewContainerRef = inject(ViewContainerRef);\n\n /**\n * Access the document.\n */\n private readonly document = inject(DOCUMENT);\n\n /**\n * Access the injector.\n */\n private readonly injector = inject(Injector);\n\n /**\n * Access the global tooltip configuration.\n */\n private readonly config = injectTooltipConfig();\n\n /**\n * Access the disposable utilities\n */\n private readonly disposables = injectDisposables();\n\n /**\n * Access the tooltip template ref.\n */\n readonly tooltip = input<NgpTooltipContent<T> | null>(null, {\n alias: 'ngpTooltipTrigger',\n });\n\n /**\n * Define if the trigger should be disabled.\n * @default false\n */\n readonly disabled = input<boolean, BooleanInput>(false, {\n alias: 'ngpTooltipTriggerDisabled',\n transform: booleanAttribute,\n });\n\n /**\n * Define the placement of the tooltip relative to the trigger.\n * @default 'top'\n */\n readonly placement = input<Placement>(this.config.placement, {\n alias: 'ngpTooltipTriggerPlacement',\n });\n\n /**\n * Define the offset of the tooltip relative to the trigger.\n * @default 0\n */\n readonly offset = input<number, NumberInput>(this.config.offset, {\n alias: 'ngpTooltipTriggerOffset',\n transform: numberAttribute,\n });\n\n /**\n * Define the delay before the tooltip is displayed.\n * @default 0\n */\n readonly showDelay = input<number, NumberInput>(this.config.showDelay, {\n alias: 'ngpTooltipTriggerShowDelay',\n transform: numberAttribute,\n });\n\n /**\n * Define the delay before the tooltip is hidden.\n * @default 0\n */\n readonly hideDelay = input<number, NumberInput>(this.config.hideDelay, {\n alias: 'ngpTooltipTriggerHideDelay',\n transform: numberAttribute,\n });\n\n /**\n * Define whether the tooltip should flip when there is not enough space for the tooltip.\n * @default true\n */\n readonly flip = input<boolean, BooleanInput>(this.config.flip, {\n alias: 'ngpTooltipTriggerFlip',\n transform: booleanAttribute,\n });\n\n /**\n * Define the container in which the tooltip should be attached.\n * @default document.body\n */\n readonly container = input<HTMLElement | null>(this.config.container, {\n alias: 'ngpTooltipTriggerContainer',\n });\n\n /**\n * Provide context to the tooltip.\n * @default null\n */\n readonly context = input<T | null>(null, {\n alias: 'ngpTooltipTriggerContext',\n });\n\n /**\n * Store the tooltip view ref.\n */\n protected viewRef = signal<NgpPortal | null>(null);\n\n /**\n * Derive the tooltip middleware from the provided configuration.\n */\n private readonly middleware = computed(() => {\n const middleware: Middleware[] = [offset(this.state.offset()), shift()];\n\n if (this.state.flip()) {\n middleware.push(flip());\n }\n\n return middleware;\n });\n\n /**\n * Store the computed position of the tooltip.\n * @internal\n */\n readonly position = signal<{ x: number; y: number }>({\n x: 0,\n y: 0,\n });\n\n /**\n * The dispose function to stop computing the position of the tooltip.\n */\n private dispose?: () => void;\n\n /**\n * @internal\n * Store the trigger width.\n */\n readonly width = signal<number | null>(null);\n\n /**\n * @internal\n * The timeout to open the tooltip.\n */\n private openTimeout?: () => void;\n\n /**\n * @internal\n * The timeout to close the tooltip.\n */\n private closeTimeout?: () => void;\n\n /**\n * @internal\n * Whether the tooltip is open or not.\n */\n readonly open = computed(() => this.viewRef() !== null);\n\n /**\n * Store the state of the tooltip.\n * @internal\n */\n readonly state = tooltipTriggerState<NgpTooltipTrigger<T>>(this);\n\n constructor() {\n // update the width of the trigger when it resizes\n fromResizeEvent(this.trigger.nativeElement)\n .pipe(takeUntilDestroyed())\n .subscribe(() => this.width.set(this.trigger.nativeElement.offsetWidth));\n }\n\n ngOnDestroy(): void {\n this.destroyTooltip();\n }\n\n /**\n * Show the tooltip.\n */\n show(): void {\n // if closing is in progress then clear the timeout to stop the popover from closing\n if (this.closeTimeout) {\n this.closeTimeout();\n this.closeTimeout = undefined;\n }\n\n // if the trigger is disabled or the tooltip is already open then do not show the tooltip\n if (this.state.disabled() || this.openTimeout) {\n return;\n }\n\n // if the tooltip exists in the DOM then do not create it again\n if (this.viewRef()) {\n return;\n }\n\n this.openTimeout = this.disposables.setTimeout(\n () => this.createTooltip(),\n this.state.showDelay(),\n );\n }\n\n /**\n * Hide the tooltip.\n */\n hide(): void {\n // if closing is in progress then clear the timeout to stop the popover from opening\n if (this.openTimeout) {\n this.openTimeout();\n this.openTimeout = undefined;\n }\n\n // if the trigger is disabled or the tooltip is already closed then do not hide the tooltip\n if (this.state.disabled() || this.closeTimeout) {\n return;\n }\n\n this.closeTimeout = this.disposables.setTimeout(\n () => this.destroyTooltip(),\n this.state.hideDelay(),\n );\n }\n\n private createTooltip(): void {\n this.openTimeout = undefined;\n const tooltip = this.state.tooltip();\n\n if (!tooltip) {\n throw new Error('Tooltip must be either a TemplateRef or a ComponentType');\n }\n\n // Create a new inject with the tooltip context\n const injector = Injector.create({\n parent: this.injector,\n providers: [provideTooltipContext(this.state.context())],\n });\n\n const portal = createPortal(tooltip, this.viewContainerRef, injector, {\n $implicit: this.state.context(),\n } as NgpTooltipTemplateContext<T>);\n const viewRef = portal.attach(this.state.container() ?? this.document.body);\n\n this.viewRef.set(viewRef);\n viewRef.detectChanges();\n\n const outletElement = viewRef.getElements()[0] as HTMLElement | null;\n\n if (!outletElement) {\n throw new Error('Outlet element is not available.');\n }\n\n if (viewRef.getElements().length > 1) {\n throw new Error('Popover must have only one root element.');\n }\n\n // we want to determine the strategy to use. If the tooltip has position: fixed then we want to use\n // fixed positioning. Otherwise we want to use absolute positioning.\n const strategy = getComputedStyle(outletElement).position === 'fixed' ? 'fixed' : 'absolute';\n\n this.dispose = autoUpdate(this.trigger.nativeElement, outletElement, async () => {\n const position = await computePosition(this.trigger.nativeElement, outletElement, {\n placement: this.state.placement(),\n middleware: this.middleware(),\n strategy,\n });\n\n this.position.set({ x: position.x, y: position.y });\n });\n }\n\n private async destroyTooltip(): Promise<void> {\n this.closeTimeout = undefined;\n const viewRef = this.viewRef();\n\n if (!viewRef) {\n return;\n }\n\n // we remove this to prevent the popover from being destroyed twice\n // because ngOnDestroy will be called on the viewRef\n // when the popover is destroyed triggering this method again\n this.viewRef.set(null);\n\n // destroy the view ref\n viewRef.detach();\n\n this.dispose?.();\n }\n}\n\ntype NgpTooltipTemplateContext<T> = {\n $implicit: T;\n};\ntype NgpTooltipContent<T> = TemplateRef<NgpTooltipTemplateContext<T>> | Type<unknown>;\n","import { isPlatformBrowser } from '@angular/common';\nimport {\n Directive,\n ElementRef,\n OnInit,\n PLATFORM_ID,\n computed,\n inject,\n isDevMode,\n} from '@angular/core';\nimport { NgpExitAnimation } from 'ng-primitives/internal';\nimport { getTransformOrigin } from 'ng-primitives/popover';\nimport { injectTooltipTriggerState } from '../tooltip-trigger/tooltip-trigger-state';\n\n/**\n * Apply the `ngpTooltip` directive to an element that represents the tooltip. This typically would be a `div` inside an `ng-template`.\n */\n@Directive({\n selector: '[ngpTooltip]',\n exportAs: 'ngpTooltip',\n hostDirectives: [NgpExitAnimation],\n host: {\n role: 'tooltip',\n '[style.left.px]': 'x()',\n '[style.top.px]': 'y()',\n '[style.--ngp-tooltip-trigger-width.px]': 'trigger().width()',\n '[style.--ngp-tooltip-transform-origin]': 'transformOrigin()',\n },\n})\nexport class NgpTooltip implements OnInit {\n /**\n * Access the tooltip element.\n */\n private readonly tooltip = inject(ElementRef<HTMLElement>);\n\n /**\n * Access the platform.\n */\n private readonly platform = inject(PLATFORM_ID);\n\n /**\n * Access the trigger instance.\n */\n private readonly trigger = injectTooltipTriggerState();\n\n /**\n * Compute the x position of the tooltip.\n */\n protected readonly x = computed(() => this.trigger().position().x);\n\n /**\n * Compute the y position of the tooltip.\n */\n protected readonly y = computed(() => this.trigger().position().y);\n\n /**\n * Derive the transform origin of the popover.\n */\n protected readonly transformOrigin = computed(() =>\n getTransformOrigin(this.trigger().placement()),\n );\n\n ngOnInit(): void {\n // if the element does not have a fixed position then throw a warning in dev mode\n if (isDevMode() && isPlatformBrowser(this.platform)) {\n const { position } = getComputedStyle(this.tooltip.nativeElement);\n\n if (position !== 'absolute' && position !== 'fixed') {\n console.warn(\n `The tooltip element must have an absolute or fixed position. The current position is ${position}.`,\n );\n }\n }\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ng-primitives-tooltip.mjs","sources":["../../../../packages/ng-primitives/tooltip/src/config/tooltip-config.ts","../../../../packages/ng-primitives/tooltip/src/tooltip-trigger/tooltip-trigger-state.ts","../../../../packages/ng-primitives/tooltip/src/tooltip-trigger/tooltip-trigger.ts","../../../../packages/ng-primitives/tooltip/src/tooltip/tooltip.ts","../../../../packages/ng-primitives/tooltip/src/ng-primitives-tooltip.ts"],"sourcesContent":["import { InjectionToken, Provider, inject } from '@angular/core';\nimport { type Placement } from '@floating-ui/dom';\n\nexport interface NgpTooltipConfig {\n /**\n * Define the offset of the tooltip relative to the trigger.\n * @default 4\n */\n offset: number;\n\n /**\n * Define the placement of the tooltip relative to the trigger.\n * @default 'top'\n */\n placement: Placement;\n\n /**\n * Define the delay before the tooltip is shown.\n * @default 0\n */\n showDelay: number;\n\n /**\n * Define the delay before the tooltip is hidden.\n * @default 0\n */\n hideDelay: number;\n\n /**\n * Define whether the tooltip should flip when there is not enough space for the tooltip.\n * @default true\n */\n flip: boolean;\n\n /**\n * Define the container in to which the tooltip should be attached.\n * @default document.body\n */\n container: HTMLElement | null;\n}\n\nexport const defaultTooltipConfig: NgpTooltipConfig = {\n offset: 4,\n placement: 'top',\n showDelay: 0,\n hideDelay: 0,\n flip: true,\n container: null,\n};\n\nexport const NgpTooltipConfigToken = new InjectionToken<NgpTooltipConfig>('NgpTooltipConfigToken');\n\n/**\n * Provide the default Tooltip configuration\n * @param config The Tooltip configuration\n * @returns The provider\n */\nexport function provideTooltipConfig(config: Partial<NgpTooltipConfig>): Provider[] {\n return [\n {\n provide: NgpTooltipConfigToken,\n useValue: { ...defaultTooltipConfig, ...config },\n },\n ];\n}\n\n/**\n * Inject the Tooltip configuration\n * @returns The global Tooltip configuration\n */\nexport function injectTooltipConfig(): NgpTooltipConfig {\n return inject(NgpTooltipConfigToken, { optional: true }) ?? defaultTooltipConfig;\n}\n","import { Signal } from '@angular/core';\nimport {\n createState,\n createStateInjector,\n createStateProvider,\n createStateToken,\n State,\n} from 'ng-primitives/state';\nimport type { NgpTooltipTrigger } from './tooltip-trigger';\n\n/**\n * The state token for the TooltipTrigger primitive.\n */\nexport const NgpTooltipTriggerStateToken =\n createStateToken<NgpTooltipTrigger<unknown>>('TooltipTrigger');\n\n/**\n * Provides the TooltipTrigger state.\n */\nexport const provideTooltipTriggerState = createStateProvider(NgpTooltipTriggerStateToken);\n\n/**\n * Injects the TooltipTrigger state.\n */\nexport const injectTooltipTriggerState = createStateInjector(NgpTooltipTriggerStateToken) as <\n T,\n>() => Signal<State<NgpTooltipTrigger<T>>>;\n\n/**\n * The TooltipTrigger state registration function.\n */\nexport const tooltipTriggerState = createState(NgpTooltipTriggerStateToken);\n","import { BooleanInput, NumberInput } from '@angular/cdk/coercion';\nimport {\n booleanAttribute,\n computed,\n Directive,\n ElementRef,\n inject,\n Injector,\n input,\n numberAttribute,\n OnDestroy,\n signal,\n ViewContainerRef,\n} from '@angular/core';\nimport { Placement } from '@floating-ui/dom';\nimport { provideExitAnimationManager } from 'ng-primitives/internal';\nimport {\n createOverlay,\n NgpOverlay,\n NgpOverlayConfig,\n NgpOverlayContent,\n} from 'ng-primitives/portal';\nimport { injectTooltipConfig } from '../config/tooltip-config';\nimport { provideTooltipTriggerState, tooltipTriggerState } from './tooltip-trigger-state';\n\n/**\n * Apply the `ngpTooltipTrigger` directive to an element that triggers the tooltip to show.\n */\n@Directive({\n selector: '[ngpTooltipTrigger]',\n exportAs: 'ngpTooltipTrigger',\n providers: [provideTooltipTriggerState(), provideExitAnimationManager()],\n host: {\n '[attr.data-open]': 'open() ? \"\" : null',\n '[attr.data-disabled]': 'state.disabled() ? \"\" : null',\n '(mouseenter)': 'show()',\n '(mouseleave)': 'hide()',\n '(focus)': 'show()',\n '(blur)': 'hide()',\n },\n})\nexport class NgpTooltipTrigger<T = null> implements OnDestroy {\n /**\n * Access the trigger element\n */\n private readonly trigger = inject(ElementRef<HTMLElement>);\n\n /**\n * Access the injector.\n */\n private readonly injector = inject(Injector);\n\n /**\n * Access the view container reference.\n */\n private readonly viewContainerRef = inject(ViewContainerRef);\n\n /**\n * Access the global tooltip configuration.\n */\n private readonly config = injectTooltipConfig();\n\n /**\n * Access the tooltip template ref.\n */\n readonly tooltip = input<NgpOverlayContent<T>>(undefined, {\n alias: 'ngpTooltipTrigger',\n });\n\n /**\n * Define if the trigger should be disabled.\n * @default false\n */\n readonly disabled = input<boolean, BooleanInput>(false, {\n alias: 'ngpTooltipTriggerDisabled',\n transform: booleanAttribute,\n });\n\n /**\n * Define the placement of the tooltip relative to the trigger.\n * @default 'top'\n */\n readonly placement = input<Placement>(this.config.placement, {\n alias: 'ngpTooltipTriggerPlacement',\n });\n\n /**\n * Define the offset of the tooltip relative to the trigger.\n * @default 0\n */\n readonly offset = input<number, NumberInput>(this.config.offset, {\n alias: 'ngpTooltipTriggerOffset',\n transform: numberAttribute,\n });\n\n /**\n * Define the delay before the tooltip is displayed.\n * @default 0\n */\n readonly showDelay = input<number, NumberInput>(this.config.showDelay, {\n alias: 'ngpTooltipTriggerShowDelay',\n transform: numberAttribute,\n });\n\n /**\n * Define the delay before the tooltip is hidden.\n * @default 0\n */\n readonly hideDelay = input<number, NumberInput>(this.config.hideDelay, {\n alias: 'ngpTooltipTriggerHideDelay',\n transform: numberAttribute,\n });\n\n /**\n * Define whether the tooltip should flip when there is not enough space for the tooltip.\n * @default true\n */\n readonly flip = input<boolean, BooleanInput>(this.config.flip, {\n alias: 'ngpTooltipTriggerFlip',\n transform: booleanAttribute,\n });\n\n /**\n * Define the container in which the tooltip should be attached.\n * @default document.body\n */\n readonly container = input<HTMLElement | null>(this.config.container, {\n alias: 'ngpTooltipTriggerContainer',\n });\n\n /**\n * Provide context to the tooltip. This can be used to pass data to the tooltip content.\n */\n readonly context = input<T>(undefined, {\n alias: 'ngpTooltipTriggerContext',\n });\n\n /**\n * The overlay that manages the tooltip\n * @internal\n */\n readonly overlay = signal<NgpOverlay<T> | null>(null);\n\n /**\n * The open state of the tooltip.\n * @internal\n */\n readonly open = computed(() => this.overlay()?.isOpen() ?? false);\n\n /**\n * Store the state of the tooltip.\n * @internal\n */\n readonly state = tooltipTriggerState<NgpTooltipTrigger<T>>(this);\n\n ngOnDestroy(): void {\n this.overlay()?.destroy();\n }\n\n /**\n * Show the tooltip.\n */\n show(): void {\n // If the trigger is disabled, do not show the tooltip\n if (this.state.disabled() || this.open()) {\n return;\n }\n\n // Create the overlay if it doesn't exist yet\n if (!this.overlay()) {\n this.createOverlay();\n }\n\n this.overlay()?.show();\n }\n\n /**\n * Hide the tooltip.\n */\n hide(): void {\n // If the trigger is disabled, do nothing\n if (this.state.disabled()) {\n return;\n }\n\n this.overlay()?.hide();\n }\n\n /**\n * Create the overlay that will contain the tooltip\n */\n private createOverlay(): void {\n const tooltip = this.state.tooltip();\n\n if (!tooltip) {\n throw new Error('Tooltip must be either a TemplateRef or a ComponentType');\n }\n\n // Create config for the overlay\n const config: NgpOverlayConfig<T> = {\n content: tooltip,\n triggerElement: this.trigger.nativeElement,\n injector: this.injector,\n context: this.state.context(),\n container: this.state.container(),\n placement: this.state.placement(),\n offset: this.state.offset(),\n flip: this.state.flip(),\n showDelay: this.state.showDelay(),\n hideDelay: this.state.hideDelay(),\n closeOnEscape: true,\n closeOnOutsideClick: true,\n viewContainerRef: this.viewContainerRef,\n };\n\n // Create the overlay instance\n this.overlay.set(createOverlay(config));\n }\n}\n","import { Directive } from '@angular/core';\nimport { NgpExitAnimation } from 'ng-primitives/internal';\nimport { injectOverlay } from 'ng-primitives/portal';\n\n/**\n * Apply the `ngpTooltip` directive to an element that represents the tooltip. This typically would be a `div` inside an `ng-template`.\n */\n@Directive({\n selector: '[ngpTooltip]',\n exportAs: 'ngpTooltip',\n hostDirectives: [NgpExitAnimation],\n host: {\n role: 'tooltip',\n '[style.left.px]': 'overlay.position().x',\n '[style.top.px]': 'overlay.position().y',\n '[style.--ngp-tooltip-trigger-width.px]': 'overlay.triggerWidth()',\n '[style.--ngp-tooltip-transform-origin]': 'overlay.transformOrigin()',\n },\n})\nexport class NgpTooltip {\n /**\n * Access the overlay.\n */\n protected readonly overlay = injectOverlay();\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -11,6 +11,7 @@ export declare const provideFocusTrapState: (options?: import("ng-primitives/sta
|
|
|
11
11
|
* Injects the FocusTrap state.
|
|
12
12
|
*/
|
|
13
13
|
export declare const injectFocusTrapState: <U = {
|
|
14
|
+
readonly overlay: import("ng-primitives/portal").NgpOverlay<any> | null;
|
|
14
15
|
readonly focusTrap: {
|
|
15
16
|
active: boolean;
|
|
16
17
|
activate(): void;
|
|
@@ -5,6 +5,10 @@ import * as i0 from "@angular/core";
|
|
|
5
5
|
* The `NgpFocusTrap` directive traps focus within the host element.
|
|
6
6
|
*/
|
|
7
7
|
export declare class NgpFocusTrap implements OnInit, OnDestroy {
|
|
8
|
+
/**
|
|
9
|
+
* Access any parent overlay.
|
|
10
|
+
*/
|
|
11
|
+
private readonly overlay;
|
|
8
12
|
/**
|
|
9
13
|
* Create a new focus trap.
|
|
10
14
|
*/
|
|
@@ -45,6 +49,7 @@ export declare class NgpFocusTrap implements OnInit, OnDestroy {
|
|
|
45
49
|
* The focus trap state.
|
|
46
50
|
*/
|
|
47
51
|
protected readonly state: import("ng-primitives/state").CreatedState<NgpFocusTrap>;
|
|
52
|
+
constructor();
|
|
48
53
|
ngOnInit(): void;
|
|
49
54
|
ngOnDestroy(): void;
|
|
50
55
|
private handleFocusIn;
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { InjectionToken, Provider } from '@angular/core';
|
|
2
|
+
import { Placement } from '@floating-ui/dom';
|
|
3
|
+
export interface NgpMenuConfig {
|
|
4
|
+
/**
|
|
5
|
+
* Define the offset of the menu relative to the trigger.
|
|
6
|
+
* @default 4
|
|
7
|
+
*/
|
|
8
|
+
offset: number;
|
|
9
|
+
/**
|
|
10
|
+
* Define the placement of the menu relative to the trigger.
|
|
11
|
+
* @default 'bottom-start'
|
|
12
|
+
*/
|
|
13
|
+
placement: Placement;
|
|
14
|
+
/**
|
|
15
|
+
* Define whether the menu should flip when there is not enough space for the menu.
|
|
16
|
+
* @default true
|
|
17
|
+
*/
|
|
18
|
+
flip: boolean;
|
|
19
|
+
/**
|
|
20
|
+
* Define the container in to which the menu should be attached.
|
|
21
|
+
* @default document.body
|
|
22
|
+
*/
|
|
23
|
+
container: HTMLElement | null;
|
|
24
|
+
/**
|
|
25
|
+
* Defines how the menu behaves when the window is scrolled.
|
|
26
|
+
* @default scroll
|
|
27
|
+
*/
|
|
28
|
+
scrollBehavior: 'reposition' | 'block';
|
|
29
|
+
}
|
|
30
|
+
export declare const defaultMenuConfig: NgpMenuConfig;
|
|
31
|
+
export declare const NgpMenuConfigToken: InjectionToken<NgpMenuConfig>;
|
|
32
|
+
/**
|
|
33
|
+
* Provide the default Menu configuration
|
|
34
|
+
* @param config The Menu configuration
|
|
35
|
+
* @returns The provider
|
|
36
|
+
*/
|
|
37
|
+
export declare function provideMenuConfig(config: Partial<NgpMenuConfig>): Provider[];
|
|
38
|
+
/**
|
|
39
|
+
* Inject the Menu configuration
|
|
40
|
+
* @returns The global Menu configuration
|
|
41
|
+
*/
|
|
42
|
+
export declare function injectMenuConfig(): NgpMenuConfig;
|
package/menu/index.d.ts
CHANGED
|
@@ -1,5 +1,9 @@
|
|
|
1
|
+
export { injectOverlayContext as injectMenuContext } from 'ng-primitives/portal';
|
|
2
|
+
export { NgpMenuConfig, provideMenuConfig } from './config/menu-config';
|
|
1
3
|
export { NgpMenuItem } from './menu-item/menu-item';
|
|
2
4
|
export { NgpMenuTrigger } from './menu-trigger/menu-trigger';
|
|
5
|
+
export { injectMenuTriggerState, provideMenuTriggerState } from './menu-trigger/menu-trigger-state';
|
|
3
6
|
export { NgpMenu } from './menu/menu';
|
|
4
|
-
export {
|
|
7
|
+
export { injectMenu, NgpMenuToken } from './menu/menu-token';
|
|
5
8
|
export { NgpSubmenuTrigger } from './submenu-trigger/submenu-trigger';
|
|
9
|
+
export { injectSubmenuTriggerState, provideSubmenuTriggerState, } from './submenu-trigger/submenu-trigger-state';
|
package/menu/menu/menu.d.ts
CHANGED
|
@@ -7,8 +7,12 @@ import * as i2 from "ng-primitives/roving-focus";
|
|
|
7
7
|
* The `NgpMenu` is a container for menu items.
|
|
8
8
|
*/
|
|
9
9
|
export declare class NgpMenu {
|
|
10
|
-
/**
|
|
11
|
-
|
|
10
|
+
/**
|
|
11
|
+
* Access the overlay.
|
|
12
|
+
*/
|
|
13
|
+
protected readonly overlay: import("ng-primitives/portal").NgpOverlay<unknown>;
|
|
14
|
+
/** Access the menu trigger state */
|
|
15
|
+
private readonly menuTrigger;
|
|
12
16
|
/** Access any parent menus */
|
|
13
17
|
private readonly parentMenu;
|
|
14
18
|
/** @internal Whether we should close submenus */
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import type { NgpMenuTrigger } from './menu-trigger';
|
|
2
|
+
/**
|
|
3
|
+
* The state token for the MenuTrigger primitive.
|
|
4
|
+
*/
|
|
5
|
+
export declare const NgpMenuTriggerStateToken: import("@angular/core").InjectionToken<NgpMenuTrigger<unknown>>;
|
|
6
|
+
/**
|
|
7
|
+
* Provides the MenuTrigger state.
|
|
8
|
+
*/
|
|
9
|
+
export declare const provideMenuTriggerState: (options?: import("ng-primitives/state").CreateStateProviderOptions) => import("@angular/core").FactoryProvider;
|
|
10
|
+
/**
|
|
11
|
+
* Injects the MenuTrigger state.
|
|
12
|
+
*/
|
|
13
|
+
export declare const injectMenuTriggerState: <U = {
|
|
14
|
+
readonly trigger: import("@angular/core").ElementRef<HTMLElement>;
|
|
15
|
+
readonly injector: import("@angular/core").Injector;
|
|
16
|
+
readonly viewContainerRef: import("@angular/core").ViewContainerRef;
|
|
17
|
+
readonly config: import("ng-primitives/menu").NgpMenuConfig;
|
|
18
|
+
readonly menu: import("@angular/core").InputSignal<import("ng-primitives/portal").NgpOverlayContent<unknown> | undefined>;
|
|
19
|
+
readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, import("@angular/cdk/coercion").BooleanInput>;
|
|
20
|
+
readonly placement: import("@angular/core").InputSignal<import("@floating-ui/dom").Placement>;
|
|
21
|
+
readonly offset: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/number-property.d-CJVxXUcb").N>;
|
|
22
|
+
readonly flip: import("@angular/core").InputSignalWithTransform<boolean, import("@angular/cdk/coercion").BooleanInput>;
|
|
23
|
+
readonly container: import("@angular/core").InputSignal<HTMLElement | null>;
|
|
24
|
+
readonly scrollBehavior: import("@angular/core").InputSignal<"reposition" | "block">;
|
|
25
|
+
readonly context: import("@angular/core").InputSignal<unknown>;
|
|
26
|
+
readonly overlay: import("@angular/core").WritableSignal<import("ng-primitives/portal").NgpOverlay<unknown> | null>;
|
|
27
|
+
readonly open: import("@angular/core").Signal<boolean>;
|
|
28
|
+
readonly state: import("ng-primitives/state").CreatedState<NgpMenuTrigger<unknown>>;
|
|
29
|
+
ngOnDestroy: () => void;
|
|
30
|
+
toggle: (event: MouseEvent) => void;
|
|
31
|
+
show: () => void;
|
|
32
|
+
hide: (origin?: import("@angular/cdk/focus-monitor.d-CvvJeQRc").F) => void;
|
|
33
|
+
createOverlay: () => void;
|
|
34
|
+
}>(injectOptions?: import("@angular/core").InjectOptions) => import("@angular/core").Signal<import("ng-primitives/state").State<U>>;
|
|
35
|
+
/**
|
|
36
|
+
* The MenuTrigger state registration function.
|
|
37
|
+
*/
|
|
38
|
+
export declare const menuTriggerState: <U>(state: U) => import("ng-primitives/state").CreatedState<U>;
|