@progress/kendo-angular-tooltip 21.4.1-develop.1 → 22.0.0-develop.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/progress-kendo-angular-tooltip.mjs +51 -51
- package/package.json +11 -19
- package/popover/directives-base.d.ts +1 -1
- package/esm2022/constants.mjs +0 -12
- package/esm2022/directives.mjs +0 -101
- package/esm2022/index.mjs +0 -22
- package/esm2022/localization/localized-messages.directive.mjs +0 -44
- package/esm2022/models/animation.model.mjs +0 -5
- package/esm2022/models/events.mjs +0 -87
- package/esm2022/models/functions.model.mjs +0 -5
- package/esm2022/models/popover-show-option.type.mjs +0 -5
- package/esm2022/models/position.type.mjs +0 -5
- package/esm2022/models/show.option.type.mjs +0 -5
- package/esm2022/package-metadata.mjs +0 -16
- package/esm2022/popover/anchor.directive.mjs +0 -172
- package/esm2022/popover/container.directive.mjs +0 -190
- package/esm2022/popover/directives-base.mjs +0 -319
- package/esm2022/popover/popover.component.mjs +0 -562
- package/esm2022/popover/popover.service.mjs +0 -71
- package/esm2022/popover/template-directives/actions-template.directive.mjs +0 -38
- package/esm2022/popover/template-directives/body-template.directive.mjs +0 -38
- package/esm2022/popover/template-directives/title-template.directive.mjs +0 -38
- package/esm2022/popover.module.mjs +0 -47
- package/esm2022/progress-kendo-angular-tooltip.mjs +0 -8
- package/esm2022/tooltip/tooltip.content.component.mjs +0 -293
- package/esm2022/tooltip/tooltip.directive.mjs +0 -490
- package/esm2022/tooltip/tooltip.settings.mjs +0 -70
- package/esm2022/tooltip.module.mjs +0 -44
- package/esm2022/tooltips.module.mjs +0 -51
- package/esm2022/utils.mjs +0 -153
|
@@ -1,490 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
import { Directive, Input, TemplateRef, Optional, ElementRef, NgZone, Inject, isDevMode, Renderer2 } from '@angular/core';
|
|
6
|
-
import { take, filter } from 'rxjs/operators';
|
|
7
|
-
import { fromEvent, Subscription } from 'rxjs';
|
|
8
|
-
import { PopupService } from '@progress/kendo-angular-popup';
|
|
9
|
-
import { validatePackage } from '@progress/kendo-licensing';
|
|
10
|
-
import { packageMetadata } from '../package-metadata';
|
|
11
|
-
import { TooltipSettings, TOOLTIP_SETTINGS } from './tooltip.settings';
|
|
12
|
-
import { TooltipContentComponent } from '../tooltip/tooltip.content.component';
|
|
13
|
-
import { align, closestBySelector, contains, containsItem, collision, hasParent } from '../utils';
|
|
14
|
-
import { isDocumentAvailable, Keys } from '@progress/kendo-angular-common';
|
|
15
|
-
import * as i0 from "@angular/core";
|
|
16
|
-
import * as i1 from "@progress/kendo-angular-popup";
|
|
17
|
-
import * as i2 from "./tooltip.settings";
|
|
18
|
-
/**
|
|
19
|
-
* Represents the [Kendo UI Tooltip directive for Angular]({% slug overview_tooltip %}).
|
|
20
|
-
* Displays additional information related to an element.
|
|
21
|
-
*
|
|
22
|
-
* @example
|
|
23
|
-
* ```html
|
|
24
|
-
* <div kendoTooltip>
|
|
25
|
-
* <button kendoButton title="Save">Save</button>
|
|
26
|
-
* </div>
|
|
27
|
-
* ```
|
|
28
|
-
*/
|
|
29
|
-
export class TooltipDirective {
|
|
30
|
-
tooltipWrapper;
|
|
31
|
-
ngZone;
|
|
32
|
-
renderer;
|
|
33
|
-
popupService;
|
|
34
|
-
/**
|
|
35
|
-
* Specifies a selector for elements within a container that display a tooltip
|
|
36
|
-
* ([see example]({% slug anchorelements_tooltip %})). The possible values include any
|
|
37
|
-
* DOM `selector`.
|
|
38
|
-
* @default '[title]'
|
|
39
|
-
*/
|
|
40
|
-
filter = '[title]';
|
|
41
|
-
/**
|
|
42
|
-
* Specifies the position of the Tooltip relative to the
|
|
43
|
-
* anchor element ([see example]({% slug positioning_tooltip %})).
|
|
44
|
-
*
|
|
45
|
-
* @default 'top'
|
|
46
|
-
*/
|
|
47
|
-
position = 'top';
|
|
48
|
-
/**
|
|
49
|
-
* Sets the template for the tooltip header title. [See example]({% slug anchorelements_tooltip %}).
|
|
50
|
-
*/
|
|
51
|
-
titleTemplate;
|
|
52
|
-
/**
|
|
53
|
-
* Specifies the mouse action that triggers the Tooltip to show. [See example]({% slug programmaticopening_tooltip %}).
|
|
54
|
-
*/
|
|
55
|
-
showOn;
|
|
56
|
-
/**
|
|
57
|
-
* Specifies the delay in milliseconds before the Tooltip is shown.
|
|
58
|
-
*
|
|
59
|
-
* @default 100
|
|
60
|
-
*/
|
|
61
|
-
showAfter = 100;
|
|
62
|
-
/**
|
|
63
|
-
* Determines if the Tooltip displays a callout arrow.
|
|
64
|
-
*
|
|
65
|
-
* @default true
|
|
66
|
-
*/
|
|
67
|
-
callout = true;
|
|
68
|
-
/**
|
|
69
|
-
* Determines if the Tooltip displays a **Close** button. [See example]({% slug closable_tooltip %}).
|
|
70
|
-
*
|
|
71
|
-
* @default false
|
|
72
|
-
*/
|
|
73
|
-
closable = false;
|
|
74
|
-
/**
|
|
75
|
-
* Specifies the offset in pixels between the Tooltip and the anchor.
|
|
76
|
-
* If the `callout` property is set to `true`, the offset is rendered from the callout arrow.
|
|
77
|
-
* If the `callout` property is set to `false`, the offset is rendered from the content of the Tooltip.
|
|
78
|
-
*
|
|
79
|
-
* @default 6
|
|
80
|
-
*/
|
|
81
|
-
offset = 6;
|
|
82
|
-
/**
|
|
83
|
-
* Sets the width of the Tooltip. [See example]({% slug anchorelements_tooltip %}).
|
|
84
|
-
*/
|
|
85
|
-
tooltipWidth;
|
|
86
|
-
/**
|
|
87
|
-
* Sets the height of the Tooltip.
|
|
88
|
-
*/
|
|
89
|
-
tooltipHeight;
|
|
90
|
-
/**
|
|
91
|
-
* Sets a CSS class for the Tooltip.
|
|
92
|
-
*/
|
|
93
|
-
tooltipClass;
|
|
94
|
-
/**
|
|
95
|
-
* @hidden
|
|
96
|
-
* Specifies a CSS class that will be added to the kendo-tooltip element.
|
|
97
|
-
*/
|
|
98
|
-
tooltipContentClass;
|
|
99
|
-
/**
|
|
100
|
-
* Provides screen boundary detection when the Тooltip is shown.
|
|
101
|
-
*/
|
|
102
|
-
collision;
|
|
103
|
-
/**
|
|
104
|
-
* Sets the title of the **Close** button.
|
|
105
|
-
*/
|
|
106
|
-
closeTitle;
|
|
107
|
-
/**
|
|
108
|
-
* Sets a custom content template for the Tooltip.
|
|
109
|
-
* The template is rendered inside the Tooltip content area. [See example]({% slug templates_tooltip %}).
|
|
110
|
-
*/
|
|
111
|
-
set tooltipTemplate(value) {
|
|
112
|
-
this.template = value;
|
|
113
|
-
}
|
|
114
|
-
get tooltipTemplate() {
|
|
115
|
-
return this.template;
|
|
116
|
-
}
|
|
117
|
-
popupRef;
|
|
118
|
-
template;
|
|
119
|
-
showTimeout;
|
|
120
|
-
anchor = null;
|
|
121
|
-
mouseOverSubscription;
|
|
122
|
-
mouseOutSubscription;
|
|
123
|
-
mouseClickSubscription;
|
|
124
|
-
anchorTitleSubscription;
|
|
125
|
-
popupPositionChangeSubscription;
|
|
126
|
-
popupMouseOutSubscription;
|
|
127
|
-
keyboardNavigationSubscription = new Subscription();
|
|
128
|
-
closeClickSubscription;
|
|
129
|
-
validPositions = ['top', 'bottom', 'right', 'left'];
|
|
130
|
-
validShowOptions = ['hover', 'click', 'none'];
|
|
131
|
-
constructor(tooltipWrapper, ngZone, renderer, popupService, settings, legacySettings) {
|
|
132
|
-
this.tooltipWrapper = tooltipWrapper;
|
|
133
|
-
this.ngZone = ngZone;
|
|
134
|
-
this.renderer = renderer;
|
|
135
|
-
this.popupService = popupService;
|
|
136
|
-
validatePackage(packageMetadata);
|
|
137
|
-
Object.assign(this, settings, legacySettings);
|
|
138
|
-
this.ngZone.runOutsideAngular(() => {
|
|
139
|
-
const wrapper = this.tooltipWrapper.nativeElement;
|
|
140
|
-
this.anchorTitleSubscription = fromEvent(wrapper, 'mouseover')
|
|
141
|
-
.pipe(filter(() => this.filter !== ''))
|
|
142
|
-
.subscribe((e) => {
|
|
143
|
-
const filterElement = closestBySelector(e.target, this.filter);
|
|
144
|
-
if (filterElement) {
|
|
145
|
-
this.hideElementTitle({ nativeElement: filterElement });
|
|
146
|
-
}
|
|
147
|
-
});
|
|
148
|
-
this.mouseOverSubscription = fromEvent(wrapper, 'mouseover')
|
|
149
|
-
.pipe(filter(() => this.filter !== ''))
|
|
150
|
-
.subscribe(e => this.onMouseOver(e));
|
|
151
|
-
this.mouseOutSubscription = fromEvent(wrapper, 'mouseout')
|
|
152
|
-
.subscribe(e => this.onMouseOut(e));
|
|
153
|
-
});
|
|
154
|
-
}
|
|
155
|
-
/**
|
|
156
|
-
* Shows the Tooltip.
|
|
157
|
-
* @param anchor - The element used as an anchor. The Tooltip opens relative to this element.
|
|
158
|
-
*/
|
|
159
|
-
show(anchor) {
|
|
160
|
-
if (this.popupRef) {
|
|
161
|
-
return;
|
|
162
|
-
}
|
|
163
|
-
if (anchor instanceof Element) {
|
|
164
|
-
anchor = { nativeElement: anchor };
|
|
165
|
-
}
|
|
166
|
-
this.anchor = anchor;
|
|
167
|
-
if (this.showOn === 'hover') {
|
|
168
|
-
if (this.popupRef) {
|
|
169
|
-
return;
|
|
170
|
-
}
|
|
171
|
-
clearTimeout(this.showTimeout);
|
|
172
|
-
this.showTimeout = setTimeout(() => this.showContent(this.anchor), this.showAfter);
|
|
173
|
-
}
|
|
174
|
-
else {
|
|
175
|
-
this.hideElementTitle(this.anchor);
|
|
176
|
-
this.showContent(this.anchor);
|
|
177
|
-
}
|
|
178
|
-
}
|
|
179
|
-
/**
|
|
180
|
-
* Hides the Tooltip.
|
|
181
|
-
*/
|
|
182
|
-
hide() {
|
|
183
|
-
clearTimeout(this.showTimeout);
|
|
184
|
-
const anchor = this.anchor && this.anchor.nativeElement;
|
|
185
|
-
if (anchor && anchor.getAttribute('data-title')) {
|
|
186
|
-
if (!anchor.getAttribute('title') && anchor.hasAttribute('title')) {
|
|
187
|
-
anchor.setAttribute('title', anchor.getAttribute('data-title'));
|
|
188
|
-
}
|
|
189
|
-
anchor.setAttribute('data-title', '');
|
|
190
|
-
}
|
|
191
|
-
if (this.popupMouseOutSubscription) {
|
|
192
|
-
this.popupMouseOutSubscription.unsubscribe();
|
|
193
|
-
}
|
|
194
|
-
if (this.closeClickSubscription) {
|
|
195
|
-
this.closeClickSubscription.unsubscribe();
|
|
196
|
-
}
|
|
197
|
-
this.closePopup();
|
|
198
|
-
}
|
|
199
|
-
/**
|
|
200
|
-
* Toggles the visibility of the Tooltip.
|
|
201
|
-
* @param anchor - The element used as an anchor.
|
|
202
|
-
* @param show - Optional. Boolean. Specifies if the Tooltip is rendered.
|
|
203
|
-
*/
|
|
204
|
-
toggle(anchor, show) {
|
|
205
|
-
const previousAnchor = this.anchor && this.anchor.nativeElement;
|
|
206
|
-
if (anchor instanceof Element) {
|
|
207
|
-
anchor = { nativeElement: anchor };
|
|
208
|
-
}
|
|
209
|
-
if (previousAnchor !== anchor.nativeElement) {
|
|
210
|
-
this.hide();
|
|
211
|
-
}
|
|
212
|
-
if (previousAnchor === anchor.nativeElement && this.showOn === 'click') {
|
|
213
|
-
this.hide();
|
|
214
|
-
}
|
|
215
|
-
if (typeof show === 'undefined') {
|
|
216
|
-
show = !this.popupRef;
|
|
217
|
-
}
|
|
218
|
-
if (show) {
|
|
219
|
-
this.show(anchor);
|
|
220
|
-
}
|
|
221
|
-
else {
|
|
222
|
-
this.hide();
|
|
223
|
-
}
|
|
224
|
-
}
|
|
225
|
-
ngOnInit() {
|
|
226
|
-
if (this.showOn === undefined) {
|
|
227
|
-
this.showOn = 'hover';
|
|
228
|
-
}
|
|
229
|
-
this.keyboardNavigationSubscription.add(this.renderer.listen(this.tooltipWrapper.nativeElement, 'keydown', event => this.onKeyDown(event)));
|
|
230
|
-
this.verifyProperties();
|
|
231
|
-
}
|
|
232
|
-
ngOnChanges(changes) {
|
|
233
|
-
if (changes.showOn && isDocumentAvailable()) {
|
|
234
|
-
this.subscribeClick();
|
|
235
|
-
}
|
|
236
|
-
}
|
|
237
|
-
ngAfterViewChecked() {
|
|
238
|
-
if (!this.popupRef) {
|
|
239
|
-
return;
|
|
240
|
-
}
|
|
241
|
-
if (this.anchor &&
|
|
242
|
-
!hasParent(this.anchor.nativeElement || this.anchor, this.tooltipWrapper.nativeElement)) {
|
|
243
|
-
this.anchor = null;
|
|
244
|
-
this.hide();
|
|
245
|
-
}
|
|
246
|
-
}
|
|
247
|
-
ngOnDestroy() {
|
|
248
|
-
this.hide();
|
|
249
|
-
this.template = null;
|
|
250
|
-
this.anchorTitleSubscription.unsubscribe();
|
|
251
|
-
this.mouseOverSubscription.unsubscribe();
|
|
252
|
-
this.mouseOutSubscription.unsubscribe();
|
|
253
|
-
this.keyboardNavigationSubscription.unsubscribe();
|
|
254
|
-
if (this.mouseClickSubscription) {
|
|
255
|
-
this.mouseClickSubscription.unsubscribe();
|
|
256
|
-
}
|
|
257
|
-
if (this.popupPositionChangeSubscription) {
|
|
258
|
-
this.popupPositionChangeSubscription.unsubscribe();
|
|
259
|
-
}
|
|
260
|
-
if (this.popupMouseOutSubscription) {
|
|
261
|
-
this.popupMouseOutSubscription.unsubscribe();
|
|
262
|
-
}
|
|
263
|
-
}
|
|
264
|
-
showContent(anchorRef) {
|
|
265
|
-
if (!anchorRef.nativeElement.getAttribute('data-title') && !this.template) {
|
|
266
|
-
return;
|
|
267
|
-
}
|
|
268
|
-
this.ngZone.run(() => {
|
|
269
|
-
this.openPopup(anchorRef);
|
|
270
|
-
this.bindContent(this.popupRef.content, anchorRef);
|
|
271
|
-
});
|
|
272
|
-
this.popupRef.popupAnchorViewportLeave
|
|
273
|
-
.pipe(take(1))
|
|
274
|
-
.subscribe(() => this.hide());
|
|
275
|
-
}
|
|
276
|
-
bindContent(contentComponent, anchorRef) {
|
|
277
|
-
const content = contentComponent.instance;
|
|
278
|
-
this.closeClickSubscription = content.close
|
|
279
|
-
.subscribe(() => {
|
|
280
|
-
this.hide();
|
|
281
|
-
});
|
|
282
|
-
if (!this.template) {
|
|
283
|
-
content.templateString = this.anchor.nativeElement.getAttribute('data-title');
|
|
284
|
-
}
|
|
285
|
-
else {
|
|
286
|
-
content.templateRef = this.template;
|
|
287
|
-
}
|
|
288
|
-
if (this.titleTemplate) {
|
|
289
|
-
content.titleTemplate = this.titleTemplate;
|
|
290
|
-
}
|
|
291
|
-
content.closeTitle = this.closeTitle;
|
|
292
|
-
content.anchor = anchorRef;
|
|
293
|
-
content.callout = this.callout;
|
|
294
|
-
content.closable = this.closable;
|
|
295
|
-
content.position = this.position;
|
|
296
|
-
content.tooltipWidth = this.tooltipWidth;
|
|
297
|
-
content.tooltipHeight = this.tooltipHeight;
|
|
298
|
-
this.popupRef.content.changeDetectorRef.detectChanges();
|
|
299
|
-
}
|
|
300
|
-
hideElementTitle(elementRef) {
|
|
301
|
-
const element = elementRef.nativeElement;
|
|
302
|
-
if (element.getAttribute('title')) {
|
|
303
|
-
element.setAttribute('data-title', element.getAttribute('title'));
|
|
304
|
-
element.setAttribute('title', '');
|
|
305
|
-
}
|
|
306
|
-
}
|
|
307
|
-
openPopup(anchorRef) {
|
|
308
|
-
const alignSettings = align(this.position, this.offset);
|
|
309
|
-
const anchorAlign = alignSettings.anchorAlign;
|
|
310
|
-
const popupAlign = alignSettings.popupAlign;
|
|
311
|
-
const popupMargin = alignSettings.popupMargin;
|
|
312
|
-
this.popupRef = this.popupService.open({
|
|
313
|
-
anchor: anchorRef,
|
|
314
|
-
anchorAlign,
|
|
315
|
-
animate: false,
|
|
316
|
-
content: TooltipContentComponent,
|
|
317
|
-
collision: collision(this.collision, this.position),
|
|
318
|
-
margin: popupMargin,
|
|
319
|
-
popupAlign,
|
|
320
|
-
popupClass: 'k-popup-transparent'
|
|
321
|
-
});
|
|
322
|
-
if (this.tooltipClass) {
|
|
323
|
-
this.renderer.addClass(this.popupRef.popupElement, this.tooltipClass);
|
|
324
|
-
}
|
|
325
|
-
if (this.tooltipContentClass) {
|
|
326
|
-
this.renderer.addClass(this.popupRef.content.instance['content'].nativeElement, this.tooltipContentClass);
|
|
327
|
-
}
|
|
328
|
-
const popupInstance = this.popupRef.content.instance;
|
|
329
|
-
if (anchorRef) {
|
|
330
|
-
this.renderer.setAttribute(anchorRef.nativeElement, 'aria-labelledby', popupInstance.tooltipId);
|
|
331
|
-
}
|
|
332
|
-
if (popupInstance.callout) {
|
|
333
|
-
this.popupPositionChangeSubscription = this.popupRef.popupPositionChange
|
|
334
|
-
.subscribe(({ flip }) => {
|
|
335
|
-
const isFlip = flip.horizontal === true || flip.vertical === true;
|
|
336
|
-
popupInstance.updateCalloutPosition(this.position, isFlip);
|
|
337
|
-
});
|
|
338
|
-
}
|
|
339
|
-
if (this.showOn === 'hover') {
|
|
340
|
-
this.ngZone.runOutsideAngular(() => {
|
|
341
|
-
const popup = this.popupRef.popupElement;
|
|
342
|
-
this.popupMouseOutSubscription = fromEvent(popup, 'mouseout')
|
|
343
|
-
.subscribe((e) => this.onMouseOut(e));
|
|
344
|
-
});
|
|
345
|
-
}
|
|
346
|
-
}
|
|
347
|
-
closePopup() {
|
|
348
|
-
if (this.popupRef) {
|
|
349
|
-
if (this.anchor) {
|
|
350
|
-
this.renderer.removeAttribute(this.anchor.nativeElement, 'aria-labelledby');
|
|
351
|
-
}
|
|
352
|
-
this.popupRef.close();
|
|
353
|
-
this.popupRef = null;
|
|
354
|
-
}
|
|
355
|
-
if (this.popupPositionChangeSubscription) {
|
|
356
|
-
this.popupPositionChangeSubscription.unsubscribe();
|
|
357
|
-
}
|
|
358
|
-
}
|
|
359
|
-
subscribeClick() {
|
|
360
|
-
if (this.mouseClickSubscription) {
|
|
361
|
-
this.mouseClickSubscription.unsubscribe();
|
|
362
|
-
}
|
|
363
|
-
if (this.showOn === 'click') {
|
|
364
|
-
this.mouseClickSubscription = fromEvent(document, 'click')
|
|
365
|
-
.pipe(filter(() => this.filter !== ''))
|
|
366
|
-
.subscribe(e => this.onMouseClick(e, this.tooltipWrapper.nativeElement));
|
|
367
|
-
}
|
|
368
|
-
}
|
|
369
|
-
onMouseClick(e, wrapper) {
|
|
370
|
-
const target = e.target;
|
|
371
|
-
const filterElement = closestBySelector(target, this.filter);
|
|
372
|
-
const popup = this.popupRef && this.popupRef.popupElement;
|
|
373
|
-
if (popup) {
|
|
374
|
-
if (popup.contains(target)) {
|
|
375
|
-
return;
|
|
376
|
-
}
|
|
377
|
-
if (this.closable) {
|
|
378
|
-
return;
|
|
379
|
-
}
|
|
380
|
-
}
|
|
381
|
-
if (wrapper.contains(target) && filterElement) {
|
|
382
|
-
this.toggle(filterElement, true);
|
|
383
|
-
}
|
|
384
|
-
else if (popup) {
|
|
385
|
-
this.hide();
|
|
386
|
-
}
|
|
387
|
-
}
|
|
388
|
-
onKeyDown(event) {
|
|
389
|
-
const keyCode = event.code;
|
|
390
|
-
const target = event.target;
|
|
391
|
-
if (this.popupRef) {
|
|
392
|
-
const tooltipId = this.popupRef.content.location.nativeElement.getAttribute('id');
|
|
393
|
-
const anchorLabelledBy = target.getAttribute('aria-labelledby');
|
|
394
|
-
if (keyCode === Keys.Escape && this.canCloseTooltip(target, tooltipId, anchorLabelledBy)) {
|
|
395
|
-
this.closePopup();
|
|
396
|
-
}
|
|
397
|
-
}
|
|
398
|
-
}
|
|
399
|
-
canCloseTooltip(target, tooltipId, anchorLabelledBy) {
|
|
400
|
-
const isIdEqualsLabel = tooltipId === anchorLabelledBy;
|
|
401
|
-
const filterElement = closestBySelector(target, this.filter);
|
|
402
|
-
const isTargetFocused = target === document.activeElement;
|
|
403
|
-
const isTargetInsideWrapper = this.tooltipWrapper.nativeElement.contains(target);
|
|
404
|
-
return isTargetInsideWrapper && filterElement && isTargetFocused && isIdEqualsLabel;
|
|
405
|
-
}
|
|
406
|
-
onMouseOver(e) {
|
|
407
|
-
const filterElement = closestBySelector(e.target, this.filter);
|
|
408
|
-
if (this.showOn !== 'hover') {
|
|
409
|
-
return;
|
|
410
|
-
}
|
|
411
|
-
if (filterElement) {
|
|
412
|
-
this.toggle(filterElement, true);
|
|
413
|
-
}
|
|
414
|
-
}
|
|
415
|
-
onMouseOut(e) {
|
|
416
|
-
if (this.showOn !== 'hover') {
|
|
417
|
-
return;
|
|
418
|
-
}
|
|
419
|
-
if (this.closable) {
|
|
420
|
-
return;
|
|
421
|
-
}
|
|
422
|
-
const popup = this.popupRef && this.popupRef.popupElement;
|
|
423
|
-
const relatedTarget = e.relatedTarget;
|
|
424
|
-
if (relatedTarget && this.anchor && contains(this.anchor.nativeElement, relatedTarget)) {
|
|
425
|
-
return;
|
|
426
|
-
}
|
|
427
|
-
if (relatedTarget && contains(popup, relatedTarget)) {
|
|
428
|
-
return;
|
|
429
|
-
}
|
|
430
|
-
this.hide();
|
|
431
|
-
}
|
|
432
|
-
verifyProperties() {
|
|
433
|
-
if (!isDevMode()) {
|
|
434
|
-
return;
|
|
435
|
-
}
|
|
436
|
-
if (!containsItem(this.validPositions, this.position)) {
|
|
437
|
-
throw new Error(`Invalid value provided for position property.The available options are 'top', 'bottom', 'left', or 'right'.`);
|
|
438
|
-
}
|
|
439
|
-
if (!containsItem(this.validShowOptions, this.showOn)) {
|
|
440
|
-
throw new Error(`Invalid value provided for showOn property.The available options are 'hover' or 'none'.`);
|
|
441
|
-
}
|
|
442
|
-
}
|
|
443
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1.PopupService }, { token: i2.TooltipSettings, optional: true }, { token: TOOLTIP_SETTINGS, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
|
|
444
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: TooltipDirective, isStandalone: true, selector: "[kendoTooltip]", inputs: { filter: "filter", position: "position", titleTemplate: "titleTemplate", showOn: "showOn", showAfter: "showAfter", callout: "callout", closable: "closable", offset: "offset", tooltipWidth: "tooltipWidth", tooltipHeight: "tooltipHeight", tooltipClass: "tooltipClass", tooltipContentClass: "tooltipContentClass", collision: "collision", closeTitle: "closeTitle", tooltipTemplate: "tooltipTemplate" }, exportAs: ["kendoTooltip"], usesOnChanges: true, ngImport: i0 });
|
|
445
|
-
}
|
|
446
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TooltipDirective, decorators: [{
|
|
447
|
-
type: Directive,
|
|
448
|
-
args: [{
|
|
449
|
-
selector: '[kendoTooltip]',
|
|
450
|
-
exportAs: 'kendoTooltip',
|
|
451
|
-
standalone: true
|
|
452
|
-
}]
|
|
453
|
-
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1.PopupService }, { type: i2.TooltipSettings, decorators: [{
|
|
454
|
-
type: Optional
|
|
455
|
-
}] }, { type: i2.TooltipSettings, decorators: [{
|
|
456
|
-
type: Optional
|
|
457
|
-
}, {
|
|
458
|
-
type: Inject,
|
|
459
|
-
args: [TOOLTIP_SETTINGS]
|
|
460
|
-
}] }], propDecorators: { filter: [{
|
|
461
|
-
type: Input
|
|
462
|
-
}], position: [{
|
|
463
|
-
type: Input
|
|
464
|
-
}], titleTemplate: [{
|
|
465
|
-
type: Input
|
|
466
|
-
}], showOn: [{
|
|
467
|
-
type: Input
|
|
468
|
-
}], showAfter: [{
|
|
469
|
-
type: Input
|
|
470
|
-
}], callout: [{
|
|
471
|
-
type: Input
|
|
472
|
-
}], closable: [{
|
|
473
|
-
type: Input
|
|
474
|
-
}], offset: [{
|
|
475
|
-
type: Input
|
|
476
|
-
}], tooltipWidth: [{
|
|
477
|
-
type: Input
|
|
478
|
-
}], tooltipHeight: [{
|
|
479
|
-
type: Input
|
|
480
|
-
}], tooltipClass: [{
|
|
481
|
-
type: Input
|
|
482
|
-
}], tooltipContentClass: [{
|
|
483
|
-
type: Input
|
|
484
|
-
}], collision: [{
|
|
485
|
-
type: Input
|
|
486
|
-
}], closeTitle: [{
|
|
487
|
-
type: Input
|
|
488
|
-
}], tooltipTemplate: [{
|
|
489
|
-
type: Input
|
|
490
|
-
}] } });
|
|
@@ -1,70 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
import { Injectable, InjectionToken } from '@angular/core';
|
|
6
|
-
import * as i0 from "@angular/core";
|
|
7
|
-
/**
|
|
8
|
-
* Obsolete. Provide the TooltipSettings class instead.
|
|
9
|
-
*
|
|
10
|
-
* @hidden
|
|
11
|
-
*/
|
|
12
|
-
export const TOOLTIP_SETTINGS = new InjectionToken('kendo-ui-tooltip-settings');
|
|
13
|
-
/**
|
|
14
|
-
* Provides a global configuration for the Kendo UI Tooltip. Inject this class in the `AppComponent` constructor to override configuration properties.
|
|
15
|
-
*
|
|
16
|
-
* @example
|
|
17
|
-
* ```typescript
|
|
18
|
-
* import { TooltipSettings } from '@progress/kendo-angular-tooltip';
|
|
19
|
-
*
|
|
20
|
-
* @Component({
|
|
21
|
-
* selector: 'my-app',
|
|
22
|
-
* template: `<div kendoTooltip><button title="Save">Save</button></div>`,
|
|
23
|
-
* providers: [{
|
|
24
|
-
* provide: TooltipSettings,
|
|
25
|
-
* useFactory: (): TooltipSettings => ({ position: 'right' })
|
|
26
|
-
* }]
|
|
27
|
-
* })
|
|
28
|
-
* export class AppComponent {}
|
|
29
|
-
* ```
|
|
30
|
-
*/
|
|
31
|
-
export class TooltipSettings {
|
|
32
|
-
/**
|
|
33
|
-
* Determines if the Tooltip displays a callout arrow.
|
|
34
|
-
*
|
|
35
|
-
* @default true
|
|
36
|
-
*/
|
|
37
|
-
callout;
|
|
38
|
-
/**
|
|
39
|
-
* Sets the title of the **Close** button.
|
|
40
|
-
*/
|
|
41
|
-
closeTitle;
|
|
42
|
-
/**
|
|
43
|
-
* Specifies the position of the Tooltip relative to the anchor element.
|
|
44
|
-
*
|
|
45
|
-
* @default 'top'
|
|
46
|
-
*/
|
|
47
|
-
position;
|
|
48
|
-
/**
|
|
49
|
-
* Specifies the mouse action that triggers the Tooltip to show.
|
|
50
|
-
*
|
|
51
|
-
* @default 'hover'
|
|
52
|
-
*/
|
|
53
|
-
showOn;
|
|
54
|
-
/**
|
|
55
|
-
* Specifies the delay in milliseconds before the Tooltip is shown.
|
|
56
|
-
*
|
|
57
|
-
* @default 100
|
|
58
|
-
*/
|
|
59
|
-
showAfter;
|
|
60
|
-
/**
|
|
61
|
-
* @hidden
|
|
62
|
-
*/
|
|
63
|
-
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
64
|
-
constructor() { }
|
|
65
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TooltipSettings, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
66
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TooltipSettings });
|
|
67
|
-
}
|
|
68
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TooltipSettings, decorators: [{
|
|
69
|
-
type: Injectable
|
|
70
|
-
}], ctorParameters: () => [] });
|
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
import { NgModule } from '@angular/core';
|
|
6
|
-
import { IconsService } from '@progress/kendo-angular-icons';
|
|
7
|
-
import { ResizeBatchService } from '@progress/kendo-angular-common';
|
|
8
|
-
import { PopupService } from '@progress/kendo-angular-popup';
|
|
9
|
-
import { KENDO_TOOLTIP } from './directives';
|
|
10
|
-
import * as i0 from "@angular/core";
|
|
11
|
-
import * as i1 from "./tooltip/tooltip.directive";
|
|
12
|
-
import * as i2 from "./tooltip/tooltip.content.component";
|
|
13
|
-
import * as i3 from "./localization/localized-messages.directive";
|
|
14
|
-
// IMPORTANT: NgModule export kept for backwards compatibility
|
|
15
|
-
/**
|
|
16
|
-
* Represents the [`NgModule`](link:site.data.urls.angular['ngmoduleapi'])
|
|
17
|
-
* definition for the Tooltip component.
|
|
18
|
-
*
|
|
19
|
-
* @example
|
|
20
|
-
* ```typescript
|
|
21
|
-
* import { TooltipModule } from '@progress/kendo-angular-tooltip';
|
|
22
|
-
* import { NgModule } from '@angular/core';
|
|
23
|
-
*
|
|
24
|
-
* @NgModule{{
|
|
25
|
-
* declarations: [AppComponent],
|
|
26
|
-
* imports: [BrowserModule, TooltipModule],
|
|
27
|
-
* bootstrap: [AppComponent]
|
|
28
|
-
* }}
|
|
29
|
-
* export class AppModule {}
|
|
30
|
-
* ```
|
|
31
|
-
*/
|
|
32
|
-
export class TooltipModule {
|
|
33
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
34
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: TooltipModule, imports: [i1.TooltipDirective, i2.TooltipContentComponent, i3.LocalizedMessagesDirective], exports: [i1.TooltipDirective, i2.TooltipContentComponent, i3.LocalizedMessagesDirective] });
|
|
35
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TooltipModule, providers: [PopupService, ResizeBatchService, IconsService], imports: [i2.TooltipContentComponent] });
|
|
36
|
-
}
|
|
37
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TooltipModule, decorators: [{
|
|
38
|
-
type: NgModule,
|
|
39
|
-
args: [{
|
|
40
|
-
imports: [...KENDO_TOOLTIP],
|
|
41
|
-
exports: [...KENDO_TOOLTIP],
|
|
42
|
-
providers: [PopupService, ResizeBatchService, IconsService]
|
|
43
|
-
}]
|
|
44
|
-
}] });
|
|
@@ -1,51 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
import { NgModule } from '@angular/core';
|
|
6
|
-
import { IconsService } from '@progress/kendo-angular-icons';
|
|
7
|
-
import { ResizeBatchService } from '@progress/kendo-angular-common';
|
|
8
|
-
import { PopupService } from '@progress/kendo-angular-popup';
|
|
9
|
-
import { KENDO_TOOLTIPS } from './directives';
|
|
10
|
-
import * as i0 from "@angular/core";
|
|
11
|
-
import * as i1 from "./tooltip/tooltip.directive";
|
|
12
|
-
import * as i2 from "./tooltip/tooltip.content.component";
|
|
13
|
-
import * as i3 from "./localization/localized-messages.directive";
|
|
14
|
-
import * as i4 from "./popover/popover.component";
|
|
15
|
-
import * as i5 from "./popover/template-directives/actions-template.directive";
|
|
16
|
-
import * as i6 from "./popover/template-directives/body-template.directive";
|
|
17
|
-
import * as i7 from "./popover/template-directives/title-template.directive";
|
|
18
|
-
import * as i8 from "./popover/anchor.directive";
|
|
19
|
-
import * as i9 from "./popover/container.directive";
|
|
20
|
-
// IMPORTANT: NgModule export kept for backwards compatibility
|
|
21
|
-
/**
|
|
22
|
-
* Represents the [`NgModule`](link:site.data.urls.angular['ngmoduleapi'])
|
|
23
|
-
* definition for the Tooltips components.
|
|
24
|
-
*
|
|
25
|
-
* @example
|
|
26
|
-
* ```typescript
|
|
27
|
-
* import { TooltipsModule } from '@progress/kendo-angular-tooltip';
|
|
28
|
-
* import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
|
29
|
-
* import { NgModule } from '@angular/core';
|
|
30
|
-
*
|
|
31
|
-
* @NgModule{{
|
|
32
|
-
* declarations: [AppComponent],
|
|
33
|
-
* imports: [BrowserModule, TooltipsModule],
|
|
34
|
-
* bootstrap: [AppComponent]
|
|
35
|
-
* }}
|
|
36
|
-
* export class AppModule {}
|
|
37
|
-
* ```
|
|
38
|
-
*/
|
|
39
|
-
export class TooltipsModule {
|
|
40
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TooltipsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
41
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: TooltipsModule, imports: [i1.TooltipDirective, i2.TooltipContentComponent, i3.LocalizedMessagesDirective, i4.PopoverComponent, i5.PopoverActionsTemplateDirective, i6.PopoverBodyTemplateDirective, i7.PopoverTitleTemplateDirective, i8.PopoverAnchorDirective, i9.PopoverContainerDirective], exports: [i1.TooltipDirective, i2.TooltipContentComponent, i3.LocalizedMessagesDirective, i4.PopoverComponent, i5.PopoverActionsTemplateDirective, i6.PopoverBodyTemplateDirective, i7.PopoverTitleTemplateDirective, i8.PopoverAnchorDirective, i9.PopoverContainerDirective] });
|
|
42
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TooltipsModule, providers: [PopupService, ResizeBatchService, IconsService], imports: [i2.TooltipContentComponent] });
|
|
43
|
-
}
|
|
44
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TooltipsModule, decorators: [{
|
|
45
|
-
type: NgModule,
|
|
46
|
-
args: [{
|
|
47
|
-
imports: [...KENDO_TOOLTIPS],
|
|
48
|
-
exports: [...KENDO_TOOLTIPS],
|
|
49
|
-
providers: [PopupService, ResizeBatchService, IconsService]
|
|
50
|
-
}]
|
|
51
|
-
}] });
|