@radix-ng/primitives 0.51.0 → 1.0.0-beta.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/fesm2022/radix-ng-primitives-accordion.mjs +105 -38
- package/fesm2022/radix-ng-primitives-accordion.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-alert-dialog.mjs +221 -129
- package/fesm2022/radix-ng-primitives-alert-dialog.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-arrow.mjs +20 -4
- package/fesm2022/radix-ng-primitives-arrow.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-aspect-ratio.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-avatar.mjs +54 -61
- package/fesm2022/radix-ng-primitives-avatar.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-button.mjs +123 -0
- package/fesm2022/radix-ng-primitives-button.mjs.map +1 -0
- package/fesm2022/radix-ng-primitives-calendar.mjs +95 -83
- package/fesm2022/radix-ng-primitives-calendar.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-checkbox.mjs +378 -54
- package/fesm2022/radix-ng-primitives-checkbox.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-collapsible.mjs +182 -81
- package/fesm2022/radix-ng-primitives-collapsible.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-collection.mjs +40 -57
- package/fesm2022/radix-ng-primitives-collection.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-config.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-context-menu.mjs +140 -424
- package/fesm2022/radix-ng-primitives-context-menu.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-core.mjs +845 -744
- package/fesm2022/radix-ng-primitives-core.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-cropper.mjs +288 -308
- package/fesm2022/radix-ng-primitives-cropper.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-date-field.mjs +104 -58
- package/fesm2022/radix-ng-primitives-date-field.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-dialog.mjs +655 -327
- package/fesm2022/radix-ng-primitives-dialog.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-dismissable-layer.mjs +70 -46
- package/fesm2022/radix-ng-primitives-dismissable-layer.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-drawer.mjs +960 -0
- package/fesm2022/radix-ng-primitives-drawer.mjs.map +1 -0
- package/fesm2022/radix-ng-primitives-editable.mjs +304 -23
- package/fesm2022/radix-ng-primitives-editable.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-field.mjs +363 -0
- package/fesm2022/radix-ng-primitives-field.mjs.map +1 -0
- package/fesm2022/radix-ng-primitives-fieldset.mjs +79 -0
- package/fesm2022/radix-ng-primitives-fieldset.mjs.map +1 -0
- package/fesm2022/radix-ng-primitives-focus-scope.mjs +23 -8
- package/fesm2022/radix-ng-primitives-focus-scope.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-input.mjs +172 -0
- package/fesm2022/radix-ng-primitives-input.mjs.map +1 -0
- package/fesm2022/radix-ng-primitives-label.mjs +6 -6
- package/fesm2022/radix-ng-primitives-label.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-menu.mjs +1907 -363
- package/fesm2022/radix-ng-primitives-menu.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-menubar.mjs +290 -162
- package/fesm2022/radix-ng-primitives-menubar.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-meter.mjs +271 -0
- package/fesm2022/radix-ng-primitives-meter.mjs.map +1 -0
- package/fesm2022/radix-ng-primitives-navigation-menu.mjs +1052 -1553
- package/fesm2022/radix-ng-primitives-navigation-menu.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-number-field.mjs +1102 -367
- package/fesm2022/radix-ng-primitives-number-field.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-pagination.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-popover.mjs +978 -989
- package/fesm2022/radix-ng-primitives-popover.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-popper.mjs +111 -44
- package/fesm2022/radix-ng-primitives-popper.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-portal.mjs +34 -10
- package/fesm2022/radix-ng-primitives-portal.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-presence.mjs +134 -246
- package/fesm2022/radix-ng-primitives-presence.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-preview-card.mjs +997 -0
- package/fesm2022/radix-ng-primitives-preview-card.mjs.map +1 -0
- package/fesm2022/radix-ng-primitives-progress.mjs +223 -84
- package/fesm2022/radix-ng-primitives-progress.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-radio.mjs +191 -51
- package/fesm2022/radix-ng-primitives-radio.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-roving-focus.mjs +96 -50
- package/fesm2022/radix-ng-primitives-roving-focus.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-scroll-area.mjs +923 -0
- package/fesm2022/radix-ng-primitives-scroll-area.mjs.map +1 -0
- package/fesm2022/radix-ng-primitives-select.mjs +791 -509
- package/fesm2022/radix-ng-primitives-select.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-separator.mjs +12 -35
- package/fesm2022/radix-ng-primitives-separator.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-slider.mjs +969 -717
- package/fesm2022/radix-ng-primitives-slider.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-stepper.mjs +15 -19
- package/fesm2022/radix-ng-primitives-stepper.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-switch.mjs +125 -113
- package/fesm2022/radix-ng-primitives-switch.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-tabs.mjs +390 -108
- package/fesm2022/radix-ng-primitives-tabs.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-time-field.mjs +55 -46
- package/fesm2022/radix-ng-primitives-time-field.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-toast.mjs +839 -0
- package/fesm2022/radix-ng-primitives-toast.mjs.map +1 -0
- package/fesm2022/radix-ng-primitives-toggle-group.mjs +121 -247
- package/fesm2022/radix-ng-primitives-toggle-group.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-toggle.mjs +98 -61
- package/fesm2022/radix-ng-primitives-toggle.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-toolbar.mjs +303 -92
- package/fesm2022/radix-ng-primitives-toolbar.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-tooltip.mjs +699 -1072
- package/fesm2022/radix-ng-primitives-tooltip.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-visually-hidden.mjs +25 -66
- package/fesm2022/radix-ng-primitives-visually-hidden.mjs.map +1 -1
- package/meter/README.md +3 -0
- package/navigation-menu/README.md +2 -1
- package/package.json +39 -18
- package/portal/README.md +2 -0
- package/preview-card/README.md +3 -0
- package/schematics/collection.json +1 -0
- package/schematics/ng-add/index.d.ts +3 -2
- package/schematics/ng-add/index.js +62 -31
- package/schematics/ng-add/index.js.map +1 -1
- package/schematics/ng-add/package-config.d.ts +4 -2
- package/schematics/ng-add/package-config.js +10 -2
- package/schematics/ng-add/package-config.js.map +1 -1
- package/schematics/ng-add/schema.d.ts +3 -0
- package/schematics/ng-add/schema.js +3 -0
- package/schematics/ng-add/schema.js.map +1 -0
- package/schematics/ng-add/schema.json +14 -0
- package/select/README.md +2 -0
- package/types/radix-ng-primitives-accordion.d.ts +51 -16
- package/types/radix-ng-primitives-alert-dialog.d.ts +95 -38
- package/types/radix-ng-primitives-arrow.d.ts +1 -1
- package/types/radix-ng-primitives-aspect-ratio.d.ts +1 -1
- package/types/radix-ng-primitives-avatar.d.ts +7 -11
- package/types/radix-ng-primitives-button.d.ts +73 -0
- package/types/radix-ng-primitives-calendar.d.ts +39 -20
- package/types/radix-ng-primitives-checkbox.d.ts +204 -35
- package/types/radix-ng-primitives-collapsible.d.ts +114 -40
- package/types/radix-ng-primitives-collection.d.ts +38 -34
- package/types/radix-ng-primitives-config.d.ts +1 -1
- package/types/radix-ng-primitives-context-menu.d.ts +61 -116
- package/types/radix-ng-primitives-core.d.ts +345 -235
- package/types/radix-ng-primitives-cropper.d.ts +89 -56
- package/types/radix-ng-primitives-date-field.d.ts +49 -28
- package/types/radix-ng-primitives-dialog.d.ts +283 -165
- package/types/radix-ng-primitives-dismissable-layer.d.ts +15 -7
- package/types/radix-ng-primitives-drawer.d.ts +426 -0
- package/types/radix-ng-primitives-editable.d.ts +91 -14
- package/types/radix-ng-primitives-field.d.ts +374 -0
- package/types/radix-ng-primitives-fieldset.d.ts +49 -0
- package/types/radix-ng-primitives-focus-scope.d.ts +15 -6
- package/types/radix-ng-primitives-input.d.ts +87 -0
- package/types/radix-ng-primitives-label.d.ts +0 -1
- package/types/radix-ng-primitives-menu.d.ts +584 -99
- package/types/radix-ng-primitives-menubar.d.ts +61 -50
- package/types/radix-ng-primitives-meter.d.ts +194 -0
- package/types/radix-ng-primitives-navigation-menu.d.ts +422 -340
- package/types/radix-ng-primitives-number-field.d.ts +405 -145
- package/types/radix-ng-primitives-pagination.d.ts +2 -2
- package/types/radix-ng-primitives-popover.d.ts +366 -351
- package/types/radix-ng-primitives-popper.d.ts +68 -11
- package/types/radix-ng-primitives-portal.d.ts +14 -6
- package/types/radix-ng-primitives-presence.d.ts +28 -76
- package/types/radix-ng-primitives-preview-card.d.ts +359 -0
- package/types/radix-ng-primitives-progress.d.ts +175 -48
- package/types/radix-ng-primitives-radio.d.ts +55 -25
- package/types/radix-ng-primitives-roving-focus.d.ts +33 -23
- package/types/radix-ng-primitives-scroll-area.d.ts +253 -0
- package/types/radix-ng-primitives-select.d.ts +475 -177
- package/types/radix-ng-primitives-separator.d.ts +7 -32
- package/types/radix-ng-primitives-slider.d.ts +315 -201
- package/types/radix-ng-primitives-stepper.d.ts +5 -7
- package/types/radix-ng-primitives-switch.d.ts +86 -71
- package/types/radix-ng-primitives-tabs.d.ts +213 -79
- package/types/radix-ng-primitives-time-field.d.ts +42 -27
- package/types/radix-ng-primitives-toast.d.ts +378 -0
- package/types/radix-ng-primitives-toggle-group.d.ts +86 -164
- package/types/radix-ng-primitives-toggle.d.ts +43 -53
- package/types/radix-ng-primitives-toolbar.d.ts +164 -38
- package/types/radix-ng-primitives-tooltip.d.ts +348 -384
- package/types/radix-ng-primitives-visually-hidden.d.ts +19 -19
- package/dropdown-menu/README.md +0 -1
- package/fesm2022/radix-ng-primitives-dropdown-menu.mjs +0 -581
- package/fesm2022/radix-ng-primitives-dropdown-menu.mjs.map +0 -1
- package/fesm2022/radix-ng-primitives-hover-card.mjs +0 -1238
- package/fesm2022/radix-ng-primitives-hover-card.mjs.map +0 -1
- package/fesm2022/radix-ng-primitives-select2.mjs +0 -897
- package/fesm2022/radix-ng-primitives-select2.mjs.map +0 -1
- package/fesm2022/radix-ng-primitives-tooltip2.mjs +0 -735
- package/fesm2022/radix-ng-primitives-tooltip2.mjs.map +0 -1
- package/hover-card/README.md +0 -3
- package/select2/README.md +0 -3
- package/tooltip2/README.md +0 -3
- package/types/radix-ng-primitives-dropdown-menu.d.ts +0 -171
- package/types/radix-ng-primitives-hover-card.d.ts +0 -471
- package/types/radix-ng-primitives-select2.d.ts +0 -511
- package/types/radix-ng-primitives-tooltip2.d.ts +0 -325
|
@@ -1,735 +0,0 @@
|
|
|
1
|
-
import { _IdGenerator } from '@angular/cdk/a11y';
|
|
2
|
-
import * as i0 from '@angular/core';
|
|
3
|
-
import { inject, ElementRef, input, signal, Directive, InjectionToken, DestroyRef, model, numberAttribute, booleanAttribute, computed, contentChild, effect, afterNextRender } from '@angular/core';
|
|
4
|
-
import { createContext, watch } from '@radix-ng/primitives/core';
|
|
5
|
-
import * as i1 from '@radix-ng/primitives/popper';
|
|
6
|
-
import { RdxPopperAnchor, RdxPopper, RdxPopperArrow, RdxPopperContent, RdxPopperContentWrapper } from '@radix-ng/primitives/popper';
|
|
7
|
-
import { RdxVisuallyHiddenDirective } from '@radix-ng/primitives/visually-hidden';
|
|
8
|
-
import { outputFromObservable, outputToObservable } from '@angular/core/rxjs-interop';
|
|
9
|
-
import * as i1$1 from '@radix-ng/primitives/dismissable-layer';
|
|
10
|
-
import { RdxDismissableLayer } from '@radix-ng/primitives/dismissable-layer';
|
|
11
|
-
import * as i1$2 from '@radix-ng/primitives/portal';
|
|
12
|
-
import { RdxPortal } from '@radix-ng/primitives/portal';
|
|
13
|
-
import * as i1$3 from '@radix-ng/primitives/presence';
|
|
14
|
-
import { provideRdxPresenceContext, RdxPresenceDirective } from '@radix-ng/primitives/presence';
|
|
15
|
-
|
|
16
|
-
class RdxTooltipTrigger {
|
|
17
|
-
constructor() {
|
|
18
|
-
this.rootContext = injectRdxTooltipContext();
|
|
19
|
-
this.elementRef = inject(ElementRef);
|
|
20
|
-
this.userOnPointerDown = input(undefined, { ...(ngDevMode ? { debugName: "userOnPointerDown" } : /* istanbul ignore next */ {}), alias: 'rdxOnPointerDown' });
|
|
21
|
-
this.isPointerDown = signal(false, ...(ngDevMode ? [{ debugName: "isPointerDown" }] : /* istanbul ignore next */ []));
|
|
22
|
-
this.hasPointerMoveOpened = signal(false, ...(ngDevMode ? [{ debugName: "hasPointerMoveOpened" }] : /* istanbul ignore next */ []));
|
|
23
|
-
}
|
|
24
|
-
handleFocus(event) {
|
|
25
|
-
if (this.rootContext.isControlledState())
|
|
26
|
-
return;
|
|
27
|
-
if (this.isPointerDown())
|
|
28
|
-
return;
|
|
29
|
-
if (this.rootContext.ignoreNonKeyboardFocus() && !event.target.matches?.(':focus-visible')) {
|
|
30
|
-
return;
|
|
31
|
-
}
|
|
32
|
-
this.rootContext.open();
|
|
33
|
-
}
|
|
34
|
-
handleBlur() {
|
|
35
|
-
if (this.rootContext.isControlledState())
|
|
36
|
-
return;
|
|
37
|
-
this.rootContext.close();
|
|
38
|
-
}
|
|
39
|
-
handleClick() {
|
|
40
|
-
if (this.rootContext.isControlledState())
|
|
41
|
-
return;
|
|
42
|
-
if (!this.rootContext.disableClosingTrigger()) {
|
|
43
|
-
this.rootContext.close();
|
|
44
|
-
}
|
|
45
|
-
}
|
|
46
|
-
handlePointerMove(event) {
|
|
47
|
-
if (event.pointerType === 'touch')
|
|
48
|
-
return;
|
|
49
|
-
if (this.rootContext.isControlledState())
|
|
50
|
-
return;
|
|
51
|
-
if (!this.hasPointerMoveOpened() && !this.rootContext.isPointerInTransit()) {
|
|
52
|
-
this.rootContext.onTriggerEnter();
|
|
53
|
-
this.hasPointerMoveOpened.set(true);
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
handlePointerLeave() {
|
|
57
|
-
if (this.rootContext.isControlledState())
|
|
58
|
-
return;
|
|
59
|
-
this.rootContext.onTriggerLeave();
|
|
60
|
-
this.hasPointerMoveOpened.set(false);
|
|
61
|
-
}
|
|
62
|
-
async handlePointerDown(event) {
|
|
63
|
-
const user = this.userOnPointerDown();
|
|
64
|
-
let result;
|
|
65
|
-
if (user) {
|
|
66
|
-
result = user(event);
|
|
67
|
-
if (result instanceof Promise)
|
|
68
|
-
result = await result;
|
|
69
|
-
}
|
|
70
|
-
if (event.defaultPrevented || result === false)
|
|
71
|
-
return;
|
|
72
|
-
if (this.rootContext.isOpen() && !this.rootContext.disableClosingTrigger()) {
|
|
73
|
-
this.rootContext.close();
|
|
74
|
-
}
|
|
75
|
-
this.isPointerDown.set(true);
|
|
76
|
-
const handlePointerUp = () => {
|
|
77
|
-
setTimeout(() => this.isPointerDown.set(false), 1);
|
|
78
|
-
};
|
|
79
|
-
document.addEventListener('pointerup', handlePointerUp, { once: true });
|
|
80
|
-
}
|
|
81
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTooltipTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
82
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxTooltipTrigger, isStandalone: true, selector: "[rdxTooltipTrigger]", inputs: { userOnPointerDown: { classPropertyName: "userOnPointerDown", publicName: "rdxOnPointerDown", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-grace-area-trigger": "''" }, listeners: { "pointermove": "rootContext.isDisabled() ? undefined : handlePointerMove($event)", "pointerleave": "rootContext.isDisabled() ? undefined : handlePointerLeave()", "pointerdown": "rootContext.isDisabled() ? undefined : handlePointerDown($event)", "focus": "rootContext.isDisabled() ? undefined : handleFocus($event)", "blur": "rootContext.isDisabled() ? undefined : handleBlur()", "click": "rootContext.isDisabled() ? undefined : handleClick()" }, properties: { "attr.aria-describedby": "rootContext.isOpen() ? rootContext.contentId : undefined", "attr.data-state": "rootContext.state()" } }, hostDirectives: [{ directive: i1.RdxPopperAnchor }], ngImport: i0 }); }
|
|
83
|
-
}
|
|
84
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTooltipTrigger, decorators: [{
|
|
85
|
-
type: Directive,
|
|
86
|
-
args: [{
|
|
87
|
-
selector: '[rdxTooltipTrigger]',
|
|
88
|
-
hostDirectives: [RdxPopperAnchor],
|
|
89
|
-
host: {
|
|
90
|
-
'data-grace-area-trigger': "''",
|
|
91
|
-
'[attr.aria-describedby]': 'rootContext.isOpen() ? rootContext.contentId : undefined',
|
|
92
|
-
'[attr.data-state]': 'rootContext.state()',
|
|
93
|
-
'(pointermove)': 'rootContext.isDisabled() ? undefined : handlePointerMove($event)',
|
|
94
|
-
'(pointerleave)': 'rootContext.isDisabled() ? undefined : handlePointerLeave()',
|
|
95
|
-
'(pointerdown)': 'rootContext.isDisabled() ? undefined : handlePointerDown($event)',
|
|
96
|
-
'(focus)': 'rootContext.isDisabled() ? undefined : handleFocus($event)',
|
|
97
|
-
'(blur)': 'rootContext.isDisabled() ? undefined : handleBlur()',
|
|
98
|
-
'(click)': 'rootContext.isDisabled() ? undefined : handleClick()'
|
|
99
|
-
}
|
|
100
|
-
}]
|
|
101
|
-
}], propDecorators: { userOnPointerDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "rdxOnPointerDown", required: false }] }] } });
|
|
102
|
-
|
|
103
|
-
const defaultTooltipConfig = {
|
|
104
|
-
delayDuration: 700,
|
|
105
|
-
skipDelayDuration: 300,
|
|
106
|
-
disableHoverableContent: false,
|
|
107
|
-
disableClosingTrigger: false,
|
|
108
|
-
closeDelay: 0
|
|
109
|
-
};
|
|
110
|
-
const RdxTooltipDefaultsToken = new InjectionToken('RdxTooltipDefaults Token');
|
|
111
|
-
function provideRdxTooltipConfig(config) {
|
|
112
|
-
return [
|
|
113
|
-
{
|
|
114
|
-
provide: RdxTooltipDefaultsToken,
|
|
115
|
-
useValue: { ...defaultTooltipConfig, ...config }
|
|
116
|
-
}
|
|
117
|
-
];
|
|
118
|
-
}
|
|
119
|
-
function injectRdxTooltipConfig() {
|
|
120
|
-
return inject(RdxTooltipDefaultsToken, { optional: true }) ?? defaultTooltipConfig;
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
function useTimeoutFn(cb, delay, options = {}, destroyRef) {
|
|
124
|
-
let id = null;
|
|
125
|
-
const resolveDelay = () => (typeof delay === 'function' ? delay() : delay);
|
|
126
|
-
const stop = () => {
|
|
127
|
-
if (id != null) {
|
|
128
|
-
clearTimeout(id);
|
|
129
|
-
id = null;
|
|
130
|
-
}
|
|
131
|
-
};
|
|
132
|
-
const start = () => {
|
|
133
|
-
stop();
|
|
134
|
-
const ms = resolveDelay();
|
|
135
|
-
if (ms <= 0) {
|
|
136
|
-
queueMicrotask(cb);
|
|
137
|
-
return;
|
|
138
|
-
}
|
|
139
|
-
id = window.setTimeout(() => {
|
|
140
|
-
id = null;
|
|
141
|
-
cb();
|
|
142
|
-
}, ms);
|
|
143
|
-
};
|
|
144
|
-
if (options.immediate) {
|
|
145
|
-
start();
|
|
146
|
-
}
|
|
147
|
-
if (destroyRef) {
|
|
148
|
-
destroyRef.onDestroy(stop);
|
|
149
|
-
}
|
|
150
|
-
return { start, stop, isPending: () => id != null };
|
|
151
|
-
}
|
|
152
|
-
|
|
153
|
-
const context = () => {
|
|
154
|
-
const context = inject(RdxTooltip);
|
|
155
|
-
return {
|
|
156
|
-
isOpen: context.open,
|
|
157
|
-
state: context.state,
|
|
158
|
-
contentId: inject(_IdGenerator).getId('rdx-tooltip-content-'),
|
|
159
|
-
trigger: context.trigger,
|
|
160
|
-
isDisabled: context.disabled,
|
|
161
|
-
ignoreNonKeyboardFocus: context.ignoreNonKeyboardFocus,
|
|
162
|
-
disableClosingTrigger: context.disableClosingTrigger,
|
|
163
|
-
disableHoverableContent: context.disableHoverableContent,
|
|
164
|
-
isPointerInTransit: context.isPointerInTransit.asReadonly(),
|
|
165
|
-
isControlledState: context.isControlledState,
|
|
166
|
-
open() {
|
|
167
|
-
context.handleOpen();
|
|
168
|
-
},
|
|
169
|
-
close() {
|
|
170
|
-
context.handleClose();
|
|
171
|
-
},
|
|
172
|
-
onTriggerEnter() {
|
|
173
|
-
if (context.isOpenDelayed()) {
|
|
174
|
-
context.handleDelayedOpen();
|
|
175
|
-
}
|
|
176
|
-
else {
|
|
177
|
-
context.handleOpen();
|
|
178
|
-
}
|
|
179
|
-
},
|
|
180
|
-
onTriggerLeave() {
|
|
181
|
-
if (context.disableHoverableContent()) {
|
|
182
|
-
context.handleClose();
|
|
183
|
-
}
|
|
184
|
-
else {
|
|
185
|
-
// Clear the timer in case the pointer leaves the trigger before the tooltip is opened.
|
|
186
|
-
context.clearTimer();
|
|
187
|
-
}
|
|
188
|
-
}
|
|
189
|
-
};
|
|
190
|
-
};
|
|
191
|
-
const [injectRdxTooltipContext, provideRdxTooltipContext] = createContext('RdxTooltipContext');
|
|
192
|
-
class RdxTooltip {
|
|
193
|
-
constructor() {
|
|
194
|
-
this.defaultConfig = injectRdxTooltipConfig();
|
|
195
|
-
this.destroyRef = inject(DestroyRef);
|
|
196
|
-
/**
|
|
197
|
-
* Whether the tooltip is currently open.
|
|
198
|
-
*/
|
|
199
|
-
this.open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
|
|
200
|
-
/**
|
|
201
|
-
* The duration from when the pointer enters the trigger until the tooltip gets opened.
|
|
202
|
-
*/
|
|
203
|
-
this.delayDuration = input(this.defaultConfig.delayDuration, { ...(ngDevMode ? { debugName: "delayDuration" } : /* istanbul ignore next */ {}), transform: numberAttribute });
|
|
204
|
-
/**
|
|
205
|
-
* How much time a user has to enter another trigger without incurring a delay again.
|
|
206
|
-
* @defaultValue 300
|
|
207
|
-
*/
|
|
208
|
-
this.skipDelayDuration = input(this.defaultConfig.skipDelayDuration, { ...(ngDevMode ? { debugName: "skipDelayDuration" } : /* istanbul ignore next */ {}), transform: numberAttribute });
|
|
209
|
-
/**
|
|
210
|
-
* When `true`, trying to hover the content will result in the tooltip closing as the pointer leaves the trigger.
|
|
211
|
-
*/
|
|
212
|
-
this.disableHoverableContent = input(this.defaultConfig.disableHoverableContent, { ...(ngDevMode ? { debugName: "disableHoverableContent" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
213
|
-
/**
|
|
214
|
-
* When `true`, disable tooltip
|
|
215
|
-
* @defaultValue false
|
|
216
|
-
*/
|
|
217
|
-
this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
218
|
-
/**
|
|
219
|
-
* How long to wait before closing the tooltip. Specified in milliseconds.
|
|
220
|
-
*/
|
|
221
|
-
this.closeDelay = input(this.defaultConfig.closeDelay, { ...(ngDevMode ? { debugName: "closeDelay" } : /* istanbul ignore next */ {}), transform: numberAttribute });
|
|
222
|
-
/**
|
|
223
|
-
* When `true`, clicking on trigger will not close the content.
|
|
224
|
-
* @defaultValue false
|
|
225
|
-
*/
|
|
226
|
-
this.disableClosingTrigger = input(false, { ...(ngDevMode ? { debugName: "disableClosingTrigger" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
227
|
-
/**
|
|
228
|
-
* Prevent the tooltip from opening if the focus did not come from
|
|
229
|
-
* the keyboard by matching against the `:focus-visible` selector.
|
|
230
|
-
* This is useful if you want to avoid opening it when switching
|
|
231
|
-
* browser tabs or closing a dialog.
|
|
232
|
-
* @defaultValue false
|
|
233
|
-
*/
|
|
234
|
-
this.ignoreNonKeyboardFocus = input(false, { ...(ngDevMode ? { debugName: "ignoreNonKeyboardFocus" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
235
|
-
/**
|
|
236
|
-
* To render a controlled tooltip
|
|
237
|
-
*/
|
|
238
|
-
this.isControlledState = input(false, { ...(ngDevMode ? { debugName: "isControlledState" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
239
|
-
this.isPointerInTransit = signal(false, ...(ngDevMode ? [{ debugName: "isPointerInTransit" }] : /* istanbul ignore next */ []));
|
|
240
|
-
this.isOpenDelayed = signal(true, ...(ngDevMode ? [{ debugName: "isOpenDelayed" }] : /* istanbul ignore next */ []));
|
|
241
|
-
this.wasOpenDelayed = signal(false, ...(ngDevMode ? [{ debugName: "wasOpenDelayed" }] : /* istanbul ignore next */ []));
|
|
242
|
-
this.state = computed(() => {
|
|
243
|
-
if (!this.open()) {
|
|
244
|
-
return 'closed';
|
|
245
|
-
}
|
|
246
|
-
return this.wasOpenDelayed() ? 'delayed-open' : 'instant-open';
|
|
247
|
-
}, ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
|
|
248
|
-
this.trigger = contentChild.required(RdxTooltipTrigger);
|
|
249
|
-
this.timerProvider = useTimeoutFn(() => {
|
|
250
|
-
this.isOpenDelayed.set(true);
|
|
251
|
-
}, () => this.skipDelayDuration(), { immediate: false }, this.destroyRef);
|
|
252
|
-
this.timer = useTimeoutFn(() => {
|
|
253
|
-
this.wasOpenDelayed.set(true);
|
|
254
|
-
this.open.set(true);
|
|
255
|
-
}, () => this.delayDuration(), { immediate: false }, this.destroyRef);
|
|
256
|
-
this.startTimer = () => this.timer.start();
|
|
257
|
-
this.clearTimer = () => this.timer.stop();
|
|
258
|
-
watch([this.open], ([isOpen]) => {
|
|
259
|
-
if (isOpen) {
|
|
260
|
-
this.timerProvider.stop();
|
|
261
|
-
this.isOpenDelayed.set(false);
|
|
262
|
-
}
|
|
263
|
-
else {
|
|
264
|
-
this.timerProvider.start();
|
|
265
|
-
}
|
|
266
|
-
});
|
|
267
|
-
}
|
|
268
|
-
handleOpen() {
|
|
269
|
-
this.clearTimer();
|
|
270
|
-
this.wasOpenDelayed.set(false);
|
|
271
|
-
this.open.set(true);
|
|
272
|
-
}
|
|
273
|
-
handleClose() {
|
|
274
|
-
this.clearTimer();
|
|
275
|
-
window.setTimeout(() => {
|
|
276
|
-
this.open.set(false);
|
|
277
|
-
}, this.closeDelay());
|
|
278
|
-
}
|
|
279
|
-
handleDelayedOpen() {
|
|
280
|
-
this.startTimer();
|
|
281
|
-
}
|
|
282
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTooltip, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
283
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.9", type: RdxTooltip, isStandalone: true, selector: "[rdxTooltip]", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, delayDuration: { classPropertyName: "delayDuration", publicName: "delayDuration", isSignal: true, isRequired: false, transformFunction: null }, skipDelayDuration: { classPropertyName: "skipDelayDuration", publicName: "skipDelayDuration", isSignal: true, isRequired: false, transformFunction: null }, disableHoverableContent: { classPropertyName: "disableHoverableContent", publicName: "disableHoverableContent", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, closeDelay: { classPropertyName: "closeDelay", publicName: "closeDelay", isSignal: true, isRequired: false, transformFunction: null }, disableClosingTrigger: { classPropertyName: "disableClosingTrigger", publicName: "disableClosingTrigger", isSignal: true, isRequired: false, transformFunction: null }, ignoreNonKeyboardFocus: { classPropertyName: "ignoreNonKeyboardFocus", publicName: "ignoreNonKeyboardFocus", isSignal: true, isRequired: false, transformFunction: null }, isControlledState: { classPropertyName: "isControlledState", publicName: "isControlledState", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, providers: [provideRdxTooltipContext(context)], queries: [{ propertyName: "trigger", first: true, predicate: RdxTooltipTrigger, descendants: true, isSignal: true }], exportAs: ["rdxTooltip"], hostDirectives: [{ directive: i1.RdxPopper }], ngImport: i0 }); }
|
|
284
|
-
}
|
|
285
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTooltip, decorators: [{
|
|
286
|
-
type: Directive,
|
|
287
|
-
args: [{
|
|
288
|
-
selector: '[rdxTooltip]',
|
|
289
|
-
exportAs: 'rdxTooltip',
|
|
290
|
-
providers: [provideRdxTooltipContext(context)],
|
|
291
|
-
hostDirectives: [RdxPopper]
|
|
292
|
-
}]
|
|
293
|
-
}], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], delayDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "delayDuration", required: false }] }], skipDelayDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "skipDelayDuration", required: false }] }], disableHoverableContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableHoverableContent", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], closeDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeDelay", required: false }] }], disableClosingTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableClosingTrigger", required: false }] }], ignoreNonKeyboardFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "ignoreNonKeyboardFocus", required: false }] }], isControlledState: [{ type: i0.Input, args: [{ isSignal: true, alias: "isControlledState", required: false }] }], trigger: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RdxTooltipTrigger), { isSignal: true }] }] } });
|
|
294
|
-
|
|
295
|
-
class RdxTooltipArrow {
|
|
296
|
-
constructor() {
|
|
297
|
-
this.isVisuallyHidden = !!inject(RdxVisuallyHiddenDirective, {
|
|
298
|
-
optional: true
|
|
299
|
-
});
|
|
300
|
-
}
|
|
301
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTooltipArrow, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
302
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxTooltipArrow, isStandalone: true, selector: "[rdxTooltipArrow]", host: { properties: { "hidden": "isVisuallyHidden" } }, hostDirectives: [{ directive: i1.RdxPopperArrow }], ngImport: i0 }); }
|
|
303
|
-
}
|
|
304
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTooltipArrow, decorators: [{
|
|
305
|
-
type: Directive,
|
|
306
|
-
args: [{
|
|
307
|
-
selector: '[rdxTooltipArrow]',
|
|
308
|
-
hostDirectives: [RdxPopperArrow],
|
|
309
|
-
host: {
|
|
310
|
-
'[hidden]': 'isVisuallyHidden'
|
|
311
|
-
}
|
|
312
|
-
}]
|
|
313
|
-
}] });
|
|
314
|
-
|
|
315
|
-
class RdxTooltipContent {
|
|
316
|
-
constructor() {
|
|
317
|
-
this.rootContext = injectRdxTooltipContext();
|
|
318
|
-
}
|
|
319
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTooltipContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
320
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxTooltipContent, isStandalone: true, selector: "[rdxTooltipContent]", host: { attributes: { "role": "tooltip" }, properties: { "id": "rootContext.contentId" } }, hostDirectives: [{ directive: i1.RdxPopperContent }], ngImport: i0 }); }
|
|
321
|
-
}
|
|
322
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTooltipContent, decorators: [{
|
|
323
|
-
type: Directive,
|
|
324
|
-
args: [{
|
|
325
|
-
selector: '[rdxTooltipContent]',
|
|
326
|
-
hostDirectives: [RdxPopperContent],
|
|
327
|
-
host: {
|
|
328
|
-
role: 'tooltip',
|
|
329
|
-
'[id]': 'rootContext.contentId'
|
|
330
|
-
}
|
|
331
|
-
}]
|
|
332
|
-
}] });
|
|
333
|
-
|
|
334
|
-
function createSignalEvent() {
|
|
335
|
-
const handlers = new Set();
|
|
336
|
-
return {
|
|
337
|
-
on(cb) {
|
|
338
|
-
handlers.add(cb);
|
|
339
|
-
return () => handlers.delete(cb);
|
|
340
|
-
},
|
|
341
|
-
emit(v) {
|
|
342
|
-
handlers.forEach((h) => h(v));
|
|
343
|
-
},
|
|
344
|
-
emitVoid() {
|
|
345
|
-
handlers.forEach((h) => h(undefined));
|
|
346
|
-
},
|
|
347
|
-
clear() {
|
|
348
|
-
handlers.clear();
|
|
349
|
-
}
|
|
350
|
-
};
|
|
351
|
-
}
|
|
352
|
-
/**
|
|
353
|
-
*
|
|
354
|
-
* @param triggerEl Signal<HTMLElement | null | undefined>
|
|
355
|
-
* @param containerEl Signal<HTMLElement | null | undefined>
|
|
356
|
-
* @param resetMs
|
|
357
|
-
*/
|
|
358
|
-
function useGraceArea(triggerEl, containerEl, resetMs = 300) {
|
|
359
|
-
const isPointerInTransit = signal(false, ...(ngDevMode ? [{ debugName: "isPointerInTransit" }] : /* istanbul ignore next */ []));
|
|
360
|
-
const pointerExit = createSignalEvent();
|
|
361
|
-
let pointerGraceArea = null;
|
|
362
|
-
let resetTimer = null;
|
|
363
|
-
function armInTransitAutoReset() {
|
|
364
|
-
if (resetTimer !== null)
|
|
365
|
-
window.clearTimeout(resetTimer);
|
|
366
|
-
resetTimer = window.setTimeout(() => {
|
|
367
|
-
isPointerInTransit.set(false);
|
|
368
|
-
resetTimer = null;
|
|
369
|
-
}, resetMs);
|
|
370
|
-
}
|
|
371
|
-
function clearGraceArea() {
|
|
372
|
-
pointerGraceArea = null;
|
|
373
|
-
isPointerInTransit.set(false);
|
|
374
|
-
if (resetTimer !== null) {
|
|
375
|
-
window.clearTimeout(resetTimer);
|
|
376
|
-
resetTimer = null;
|
|
377
|
-
}
|
|
378
|
-
}
|
|
379
|
-
function createGraceArea(event, hoverTarget) {
|
|
380
|
-
const currentTarget = event.currentTarget;
|
|
381
|
-
const exitPoint = { x: event.clientX, y: event.clientY };
|
|
382
|
-
const exitSide = getExitSideFromRect(exitPoint, currentTarget.getBoundingClientRect());
|
|
383
|
-
const paddedExitPoints = getPaddedExitPoints(exitPoint, exitSide);
|
|
384
|
-
const hoverTargetPoints = getPointsFromRect(hoverTarget.getBoundingClientRect());
|
|
385
|
-
pointerGraceArea = getHull([...paddedExitPoints, ...hoverTargetPoints]);
|
|
386
|
-
isPointerInTransit.set(true);
|
|
387
|
-
armInTransitAutoReset();
|
|
388
|
-
}
|
|
389
|
-
function trackPointerGrace(event) {
|
|
390
|
-
if (!pointerGraceArea)
|
|
391
|
-
return;
|
|
392
|
-
if (!(event.target instanceof HTMLElement))
|
|
393
|
-
return;
|
|
394
|
-
const trigger = triggerEl();
|
|
395
|
-
const container = containerEl();
|
|
396
|
-
if (!trigger || !container)
|
|
397
|
-
return;
|
|
398
|
-
const target = event.target;
|
|
399
|
-
const pointerPosition = { x: event.clientX, y: event.clientY };
|
|
400
|
-
const hasEnteredTarget = trigger.contains(target) || container.contains(target);
|
|
401
|
-
const isOutsideGrace = !isPointInPolygon(pointerPosition, pointerGraceArea);
|
|
402
|
-
const isAnotherGraceAreaTrigger = !!target.closest('[data-grace-area-trigger]');
|
|
403
|
-
if (hasEnteredTarget) {
|
|
404
|
-
clearGraceArea();
|
|
405
|
-
}
|
|
406
|
-
else if (isOutsideGrace || isAnotherGraceAreaTrigger) {
|
|
407
|
-
clearGraceArea();
|
|
408
|
-
pointerExit.emitVoid();
|
|
409
|
-
}
|
|
410
|
-
}
|
|
411
|
-
effect((onCleanupFn) => {
|
|
412
|
-
const trigger = triggerEl();
|
|
413
|
-
const container = containerEl();
|
|
414
|
-
onCleanupFn(() => {
|
|
415
|
-
const doc = trigger?.ownerDocument;
|
|
416
|
-
trigger?.removeEventListener('pointerleave', onTriggerLeave);
|
|
417
|
-
container?.removeEventListener('pointerleave', onContainerLeave);
|
|
418
|
-
doc?.removeEventListener('pointermove', trackPointerGrace);
|
|
419
|
-
trigger?.removeAttribute('data-grace-area-trigger');
|
|
420
|
-
clearGraceArea();
|
|
421
|
-
});
|
|
422
|
-
if (!trigger || !container)
|
|
423
|
-
return;
|
|
424
|
-
trigger.setAttribute('data-grace-area-trigger', '');
|
|
425
|
-
const onTriggerLeave = (e) => createGraceArea(e, container);
|
|
426
|
-
const onContainerLeave = (e) => createGraceArea(e, trigger);
|
|
427
|
-
trigger.addEventListener('pointerleave', onTriggerLeave, { passive: true });
|
|
428
|
-
container.addEventListener('pointerleave', onContainerLeave, { passive: true });
|
|
429
|
-
trigger.ownerDocument.addEventListener('pointermove', trackPointerGrace, { passive: true });
|
|
430
|
-
});
|
|
431
|
-
return {
|
|
432
|
-
isPointerInTransit: isPointerInTransit.asReadonly(),
|
|
433
|
-
onPointerExit: pointerExit.on
|
|
434
|
-
};
|
|
435
|
-
}
|
|
436
|
-
function getExitSideFromRect(point, rect) {
|
|
437
|
-
const top = Math.abs(rect.top - point.y);
|
|
438
|
-
const bottom = Math.abs(rect.bottom - point.y);
|
|
439
|
-
const right = Math.abs(rect.right - point.x);
|
|
440
|
-
const left = Math.abs(rect.left - point.x);
|
|
441
|
-
switch (Math.min(top, bottom, right, left)) {
|
|
442
|
-
case left:
|
|
443
|
-
return 'left';
|
|
444
|
-
case right:
|
|
445
|
-
return 'right';
|
|
446
|
-
case top:
|
|
447
|
-
return 'top';
|
|
448
|
-
case bottom:
|
|
449
|
-
return 'bottom';
|
|
450
|
-
default:
|
|
451
|
-
throw new Error('unreachable');
|
|
452
|
-
}
|
|
453
|
-
}
|
|
454
|
-
function getPaddedExitPoints(exitPoint, exitSide, padding = 5) {
|
|
455
|
-
const pts = [];
|
|
456
|
-
switch (exitSide) {
|
|
457
|
-
case 'top':
|
|
458
|
-
pts.push({ x: exitPoint.x - padding, y: exitPoint.y + padding }, { x: exitPoint.x + padding, y: exitPoint.y + padding });
|
|
459
|
-
break;
|
|
460
|
-
case 'bottom':
|
|
461
|
-
pts.push({ x: exitPoint.x - padding, y: exitPoint.y - padding }, { x: exitPoint.x + padding, y: exitPoint.y - padding });
|
|
462
|
-
break;
|
|
463
|
-
case 'left':
|
|
464
|
-
pts.push({ x: exitPoint.x + padding, y: exitPoint.y - padding }, { x: exitPoint.x + padding, y: exitPoint.y + padding });
|
|
465
|
-
break;
|
|
466
|
-
case 'right':
|
|
467
|
-
pts.push({ x: exitPoint.x - padding, y: exitPoint.y - padding }, { x: exitPoint.x - padding, y: exitPoint.y + padding });
|
|
468
|
-
break;
|
|
469
|
-
}
|
|
470
|
-
return pts;
|
|
471
|
-
}
|
|
472
|
-
function getPointsFromRect(rect) {
|
|
473
|
-
const { top, right, bottom, left } = rect;
|
|
474
|
-
return [
|
|
475
|
-
{ x: left, y: top },
|
|
476
|
-
{ x: right, y: top },
|
|
477
|
-
{ x: right, y: bottom },
|
|
478
|
-
{ x: left, y: bottom }
|
|
479
|
-
];
|
|
480
|
-
}
|
|
481
|
-
function isPointInPolygon(point, polygon) {
|
|
482
|
-
const { x, y } = point;
|
|
483
|
-
let inside = false;
|
|
484
|
-
for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
|
|
485
|
-
const xi = polygon[i].x, yi = polygon[i].y;
|
|
486
|
-
const xj = polygon[j].x, yj = polygon[j].y;
|
|
487
|
-
const intersect = yi > y !== yj > y && x < ((xj - xi) * (y - yi)) / (yj - yi) + xi;
|
|
488
|
-
if (intersect)
|
|
489
|
-
inside = !inside;
|
|
490
|
-
}
|
|
491
|
-
return inside;
|
|
492
|
-
}
|
|
493
|
-
function getHull(points) {
|
|
494
|
-
const newPoints = points.slice();
|
|
495
|
-
newPoints.sort((a, b) => a.x - b.x || a.y - b.y);
|
|
496
|
-
return getHullPresorted(newPoints);
|
|
497
|
-
}
|
|
498
|
-
function getHullPresorted(points) {
|
|
499
|
-
if (points.length <= 1)
|
|
500
|
-
return points.slice();
|
|
501
|
-
const upper = [];
|
|
502
|
-
for (let i = 0; i < points.length; i++) {
|
|
503
|
-
const p = points[i];
|
|
504
|
-
while (upper.length >= 2) {
|
|
505
|
-
const q = upper[upper.length - 1];
|
|
506
|
-
const r = upper[upper.length - 2];
|
|
507
|
-
if ((q.x - r.x) * (p.y - r.y) >= (q.y - r.y) * (p.x - r.x))
|
|
508
|
-
upper.pop();
|
|
509
|
-
else
|
|
510
|
-
break;
|
|
511
|
-
}
|
|
512
|
-
upper.push(p);
|
|
513
|
-
}
|
|
514
|
-
upper.pop();
|
|
515
|
-
const lower = [];
|
|
516
|
-
for (let i = points.length - 1; i >= 0; i--) {
|
|
517
|
-
const p = points[i];
|
|
518
|
-
while (lower.length >= 2) {
|
|
519
|
-
const q = lower[lower.length - 1];
|
|
520
|
-
const r = lower[lower.length - 2];
|
|
521
|
-
if ((q.x - r.x) * (p.y - r.y) >= (q.y - r.y) * (p.x - r.x))
|
|
522
|
-
lower.pop();
|
|
523
|
-
else
|
|
524
|
-
break;
|
|
525
|
-
}
|
|
526
|
-
lower.push(p);
|
|
527
|
-
}
|
|
528
|
-
lower.pop();
|
|
529
|
-
if (upper.length === 1 && lower.length === 1 && upper[0].x === lower[0].x && upper[0].y === lower[0].y) {
|
|
530
|
-
return upper;
|
|
531
|
-
}
|
|
532
|
-
else {
|
|
533
|
-
return upper.concat(lower);
|
|
534
|
-
}
|
|
535
|
-
}
|
|
536
|
-
|
|
537
|
-
class RdxTooltipContentWrapper {
|
|
538
|
-
constructor() {
|
|
539
|
-
this.rootContext = injectRdxTooltipContext();
|
|
540
|
-
this.destroyRef = inject(DestroyRef);
|
|
541
|
-
this.dismissableLayer = inject(RdxDismissableLayer);
|
|
542
|
-
this.elementRef = inject(ElementRef);
|
|
543
|
-
/**
|
|
544
|
-
* The preferred side of the anchor to render against when open.
|
|
545
|
-
* Will be reversed when collisions occur and avoidCollisions is enabled.
|
|
546
|
-
*/
|
|
547
|
-
this.side = input('bottom', ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
|
|
548
|
-
/**
|
|
549
|
-
* The distance in pixels from the anchor.
|
|
550
|
-
*/
|
|
551
|
-
this.sideOffset = input(0, { ...(ngDevMode ? { debugName: "sideOffset" } : /* istanbul ignore next */ {}), transform: numberAttribute });
|
|
552
|
-
/**
|
|
553
|
-
* The preferred alignment against the anchor. May change when collisions occur.
|
|
554
|
-
*/
|
|
555
|
-
this.align = input('center', ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
|
|
556
|
-
/**
|
|
557
|
-
* An offset in pixels from the `start` or `end` alignment options.
|
|
558
|
-
*/
|
|
559
|
-
this.alignOffset = input(0, { ...(ngDevMode ? { debugName: "alignOffset" } : /* istanbul ignore next */ {}), transform: numberAttribute });
|
|
560
|
-
/**
|
|
561
|
-
* The padding between the arrow and the edges of the content.
|
|
562
|
-
* If your content has border-radius, this will prevent it from overflowing the corners.
|
|
563
|
-
*/
|
|
564
|
-
this.arrowPadding = input(0, { ...(ngDevMode ? { debugName: "arrowPadding" } : /* istanbul ignore next */ {}), transform: numberAttribute });
|
|
565
|
-
/**
|
|
566
|
-
* When `true`, overrides the `side` and `align` preferences to prevent collisions with boundary edges.
|
|
567
|
-
*/
|
|
568
|
-
this.avoidCollisions = input(true, { ...(ngDevMode ? { debugName: "avoidCollisions" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
569
|
-
/**
|
|
570
|
-
* The element used as the collision boundary.
|
|
571
|
-
* By default this is the viewport, though you can provide additional element(s) to be included in this check.
|
|
572
|
-
*/
|
|
573
|
-
this.collisionBoundary = input(...(ngDevMode ? [undefined, { debugName: "collisionBoundary" }] : /* istanbul ignore next */ []));
|
|
574
|
-
/**
|
|
575
|
-
* The distance in pixels from the boundary edges where collision detection should occur.
|
|
576
|
-
* Accepts a number (same for all sides), or a partial padding object, for example: `{ top: 20, left: 20 }`.
|
|
577
|
-
*/
|
|
578
|
-
this.collisionPadding = input(0, ...(ngDevMode ? [{ debugName: "collisionPadding" }] : /* istanbul ignore next */ []));
|
|
579
|
-
/**
|
|
580
|
-
* The sticky behavior on the `align` axis.
|
|
581
|
-
* - `partial` will keep the content in the boundary as long as the trigger is at least partially in the boundary
|
|
582
|
-
* - `always` will keep the content in the boundary regardless.
|
|
583
|
-
*/
|
|
584
|
-
this.sticky = input('partial', ...(ngDevMode ? [{ debugName: "sticky" }] : /* istanbul ignore next */ []));
|
|
585
|
-
/**
|
|
586
|
-
* Whether to hide the content when the trigger becomes fully occluded.
|
|
587
|
-
*/
|
|
588
|
-
this.hideWhenDetached = input(false, { ...(ngDevMode ? { debugName: "hideWhenDetached" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
589
|
-
/**
|
|
590
|
-
* Whether to update the position of the floating element on every animation frame if required.
|
|
591
|
-
*/
|
|
592
|
-
this.updatePositionStrategy = input('always', ...(ngDevMode ? [{ debugName: "updatePositionStrategy" }] : /* istanbul ignore next */ []));
|
|
593
|
-
/**
|
|
594
|
-
* Emits when the element is placed.
|
|
595
|
-
*/
|
|
596
|
-
this.placed = outputFromObservable(outputToObservable(inject(RdxPopperContentWrapper).placed));
|
|
597
|
-
/**
|
|
598
|
-
* Event handler called when the escape key is down.
|
|
599
|
-
* Can be prevented.
|
|
600
|
-
*/
|
|
601
|
-
this.escapeKeyDown = outputFromObservable(outputToObservable(this.dismissableLayer.escapeKeyDown));
|
|
602
|
-
/**
|
|
603
|
-
* Event handler called when a `pointerdown` event happens outside of the `DismissableLayer`.
|
|
604
|
-
* Can be prevented.
|
|
605
|
-
*/
|
|
606
|
-
this.pointerDownOutside = outputFromObservable(outputToObservable(this.dismissableLayer.pointerDownOutside));
|
|
607
|
-
this.triggerEl = signal(null, ...(ngDevMode ? [{ debugName: "triggerEl" }] : /* istanbul ignore next */ []));
|
|
608
|
-
this.containerEl = signal(null, ...(ngDevMode ? [{ debugName: "containerEl" }] : /* istanbul ignore next */ []));
|
|
609
|
-
this.graceArea = useGraceArea(this.triggerEl, this.containerEl, 300);
|
|
610
|
-
this.afterNextRender = afterNextRender(() => {
|
|
611
|
-
this.triggerEl.set(this.rootContext.trigger().elementRef.nativeElement);
|
|
612
|
-
this.containerEl.set(this.elementRef.nativeElement);
|
|
613
|
-
const handleScroll = (event) => {
|
|
614
|
-
const target = event.target;
|
|
615
|
-
if (target?.contains(this.rootContext.trigger().elementRef.nativeElement)) {
|
|
616
|
-
this.rootContext.close();
|
|
617
|
-
}
|
|
618
|
-
};
|
|
619
|
-
window.addEventListener('scroll', handleScroll, { capture: true });
|
|
620
|
-
this.destroyRef.onDestroy(() => {
|
|
621
|
-
window.removeEventListener('scroll', handleScroll, { capture: true });
|
|
622
|
-
});
|
|
623
|
-
this.graceArea.onPointerExit(() => {
|
|
624
|
-
if (this.rootContext.disableHoverableContent())
|
|
625
|
-
return;
|
|
626
|
-
this.rootContext.close();
|
|
627
|
-
});
|
|
628
|
-
});
|
|
629
|
-
this.dismissableLayer.focusOutside.subscribe((e) => e.preventDefault());
|
|
630
|
-
this.dismissableLayer.dismiss.subscribe(() => this.rootContext.close());
|
|
631
|
-
this.dismissableLayer.pointerDownOutside.subscribe((event) => {
|
|
632
|
-
if (this.rootContext.disableClosingTrigger() &&
|
|
633
|
-
this.rootContext.trigger().elementRef.nativeElement.contains(event.target))
|
|
634
|
-
event.preventDefault();
|
|
635
|
-
});
|
|
636
|
-
}
|
|
637
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTooltipContentWrapper, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
638
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxTooltipContentWrapper, isStandalone: true, selector: "[rdxTooltipContentWrapper]", inputs: { side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, sideOffset: { classPropertyName: "sideOffset", publicName: "sideOffset", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, alignOffset: { classPropertyName: "alignOffset", publicName: "alignOffset", isSignal: true, isRequired: false, transformFunction: null }, arrowPadding: { classPropertyName: "arrowPadding", publicName: "arrowPadding", isSignal: true, isRequired: false, transformFunction: null }, avoidCollisions: { classPropertyName: "avoidCollisions", publicName: "avoidCollisions", isSignal: true, isRequired: false, transformFunction: null }, collisionBoundary: { classPropertyName: "collisionBoundary", publicName: "collisionBoundary", isSignal: true, isRequired: false, transformFunction: null }, collisionPadding: { classPropertyName: "collisionPadding", publicName: "collisionPadding", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, hideWhenDetached: { classPropertyName: "hideWhenDetached", publicName: "hideWhenDetached", isSignal: true, isRequired: false, transformFunction: null }, updatePositionStrategy: { classPropertyName: "updatePositionStrategy", publicName: "updatePositionStrategy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { placed: "placed", escapeKeyDown: "escapeKeyDown", pointerDownOutside: "pointerDownOutside" }, host: { properties: { "attr.data-state": "rootContext.state()", "style": "{\n '--radix-tooltip-content-transform-origin': 'var(--radix-popper-transform-origin)',\n '--radix-tooltip-content-available-width': 'var(--radix-popper-available-width)',\n '--radix-tooltip-content-available-height': 'var(--radix-popper-available-height)',\n '--radix-tooltip-trigger-width': 'var(--radix-popper-anchor-width)',\n '--radix-tooltip-trigger-height': 'var(--radix-popper-anchor-height)',\n }" } }, hostDirectives: [{ directive: i1$1.RdxDismissableLayer }, { directive: i1.RdxPopperContentWrapper, inputs: ["side", "side", "sideOffset", "sideOffset", "align", "align", "alignOffset", "alignOffset", "arrowPadding", "arrowPadding", "avoidCollisions", "avoidCollisions", "collisionBoundary", "collisionBoundary", "collisionPadding", "collisionPadding", "sticky", "sticky", "hideWhenDetached", "hideWhenDetached", "updatePositionStrategy", "updatePositionStrategy"] }], ngImport: i0 }); }
|
|
639
|
-
}
|
|
640
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTooltipContentWrapper, decorators: [{
|
|
641
|
-
type: Directive,
|
|
642
|
-
args: [{
|
|
643
|
-
selector: '[rdxTooltipContentWrapper]',
|
|
644
|
-
hostDirectives: [
|
|
645
|
-
RdxDismissableLayer,
|
|
646
|
-
{
|
|
647
|
-
directive: RdxPopperContentWrapper,
|
|
648
|
-
inputs: [
|
|
649
|
-
'side',
|
|
650
|
-
'sideOffset',
|
|
651
|
-
'align',
|
|
652
|
-
'alignOffset',
|
|
653
|
-
'arrowPadding',
|
|
654
|
-
'avoidCollisions',
|
|
655
|
-
'collisionBoundary',
|
|
656
|
-
'collisionPadding',
|
|
657
|
-
'sticky',
|
|
658
|
-
'hideWhenDetached',
|
|
659
|
-
'updatePositionStrategy'
|
|
660
|
-
]
|
|
661
|
-
}
|
|
662
|
-
],
|
|
663
|
-
host: {
|
|
664
|
-
'[attr.data-state]': 'rootContext.state()',
|
|
665
|
-
// re-namespace exposed content custom properties
|
|
666
|
-
'[style]': `{
|
|
667
|
-
'--radix-tooltip-content-transform-origin': 'var(--radix-popper-transform-origin)',
|
|
668
|
-
'--radix-tooltip-content-available-width': 'var(--radix-popper-available-width)',
|
|
669
|
-
'--radix-tooltip-content-available-height': 'var(--radix-popper-available-height)',
|
|
670
|
-
'--radix-tooltip-trigger-width': 'var(--radix-popper-anchor-width)',
|
|
671
|
-
'--radix-tooltip-trigger-height': 'var(--radix-popper-anchor-height)',
|
|
672
|
-
}`
|
|
673
|
-
}
|
|
674
|
-
}]
|
|
675
|
-
}], ctorParameters: () => [], propDecorators: { side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], sideOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "sideOffset", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], alignOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignOffset", required: false }] }], arrowPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrowPadding", required: false }] }], avoidCollisions: [{ type: i0.Input, args: [{ isSignal: true, alias: "avoidCollisions", required: false }] }], collisionBoundary: [{ type: i0.Input, args: [{ isSignal: true, alias: "collisionBoundary", required: false }] }], collisionPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "collisionPadding", required: false }] }], sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }], hideWhenDetached: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideWhenDetached", required: false }] }], updatePositionStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "updatePositionStrategy", required: false }] }], placed: [{ type: i0.Output, args: ["placed"] }], escapeKeyDown: [{ type: i0.Output, args: ["escapeKeyDown"] }], pointerDownOutside: [{ type: i0.Output, args: ["pointerDownOutside"] }] } });
|
|
676
|
-
|
|
677
|
-
class RdxTooltipPortal {
|
|
678
|
-
constructor() {
|
|
679
|
-
this.container = input.required(...(ngDevMode ? [{ debugName: "container" }] : /* istanbul ignore next */ []));
|
|
680
|
-
}
|
|
681
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTooltipPortal, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
682
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxTooltipPortal, isStandalone: true, selector: "[rdxTooltipPortal]", inputs: { container: { classPropertyName: "container", publicName: "container", isSignal: true, isRequired: true, transformFunction: null } }, hostDirectives: [{ directive: i1$2.RdxPortal, inputs: ["container", "container"] }], ngImport: i0 }); }
|
|
683
|
-
}
|
|
684
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTooltipPortal, decorators: [{
|
|
685
|
-
type: Directive,
|
|
686
|
-
args: [{
|
|
687
|
-
selector: '[rdxTooltipPortal]',
|
|
688
|
-
hostDirectives: [
|
|
689
|
-
{
|
|
690
|
-
directive: RdxPortal,
|
|
691
|
-
inputs: ['container']
|
|
692
|
-
}
|
|
693
|
-
]
|
|
694
|
-
}]
|
|
695
|
-
}], propDecorators: { container: [{ type: i0.Input, args: [{ isSignal: true, alias: "container", required: true }] }] } });
|
|
696
|
-
|
|
697
|
-
class RdxTooltipPortalPresence {
|
|
698
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTooltipPortalPresence, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
699
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxTooltipPortalPresence, isStandalone: true, selector: "ng-template[rdxTooltipPortalPresence]", providers: [
|
|
700
|
-
provideRdxPresenceContext(() => {
|
|
701
|
-
const context = injectRdxTooltipContext();
|
|
702
|
-
return { present: context.isOpen };
|
|
703
|
-
})
|
|
704
|
-
], hostDirectives: [{ directive: i1$3.RdxPresenceDirective }], ngImport: i0 }); }
|
|
705
|
-
}
|
|
706
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTooltipPortalPresence, decorators: [{
|
|
707
|
-
type: Directive,
|
|
708
|
-
args: [{
|
|
709
|
-
selector: 'ng-template[rdxTooltipPortalPresence]',
|
|
710
|
-
hostDirectives: [RdxPresenceDirective],
|
|
711
|
-
providers: [
|
|
712
|
-
provideRdxPresenceContext(() => {
|
|
713
|
-
const context = injectRdxTooltipContext();
|
|
714
|
-
return { present: context.isOpen };
|
|
715
|
-
})
|
|
716
|
-
]
|
|
717
|
-
}]
|
|
718
|
-
}] });
|
|
719
|
-
|
|
720
|
-
const tooltipImports = [
|
|
721
|
-
RdxTooltip,
|
|
722
|
-
RdxTooltipArrow,
|
|
723
|
-
RdxTooltipContent,
|
|
724
|
-
RdxTooltipContentWrapper,
|
|
725
|
-
RdxTooltipPortal,
|
|
726
|
-
RdxTooltipTrigger,
|
|
727
|
-
RdxTooltipPortalPresence
|
|
728
|
-
];
|
|
729
|
-
|
|
730
|
-
/**
|
|
731
|
-
* Generated bundle index. Do not edit.
|
|
732
|
-
*/
|
|
733
|
-
|
|
734
|
-
export { RdxTooltip, RdxTooltipArrow, RdxTooltipContent, RdxTooltipContentWrapper, RdxTooltipDefaultsToken, RdxTooltipPortal, RdxTooltipPortalPresence, RdxTooltipTrigger, defaultTooltipConfig, injectRdxTooltipConfig, injectRdxTooltipContext, provideRdxTooltipConfig, provideRdxTooltipContext, tooltipImports };
|
|
735
|
-
//# sourceMappingURL=radix-ng-primitives-tooltip2.mjs.map
|