@progress/kendo-angular-tooltip 24.2.2 → 25.0.0-develop.2
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 +50 -50
- package/index.d.ts +1005 -21
- package/package-metadata.mjs +2 -2
- package/package.json +11 -11
- package/constants.d.ts +0 -12
- package/directives.d.ts +0 -87
- package/localization/localized-messages.directive.d.ts +0 -19
- package/models/animation.model.d.ts +0 -9
- package/models/events.d.ts +0 -76
- package/models/functions.model.d.ts +0 -15
- package/models/popover-show-option.type.d.ts +0 -14
- package/models/position.type.d.ts +0 -14
- package/models/show.option.type.d.ts +0 -13
- package/models/theme-color.type.d.ts +0 -16
- package/package-metadata.d.ts +0 -9
- package/popover/anchor.directive.d.ts +0 -48
- package/popover/container.directive.d.ts +0 -57
- package/popover/directives-base.d.ts +0 -92
- package/popover/popover.component.d.ts +0 -195
- package/popover/popover.service.d.ts +0 -33
- package/popover/template-directives/actions-template.directive.d.ts +0 -27
- package/popover/template-directives/body-template.directive.d.ts +0 -27
- package/popover/template-directives/title-template.directive.d.ts +0 -27
- package/popover.module.d.ts +0 -34
- package/tooltip/tooltip.content.component.d.ts +0 -55
- package/tooltip/tooltip.directive.d.ts +0 -160
- package/tooltip/tooltip.settings.d.ts +0 -68
- package/tooltip.module.d.ts +0 -30
- package/tooltips.module.d.ts +0 -37
- package/utils.d.ts +0 -46
package/index.d.ts
CHANGED
|
@@ -2,24 +2,1008 @@
|
|
|
2
2
|
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
5
|
+
import { ComponentMessages, LocalizationService } from '@progress/kendo-angular-l10n';
|
|
6
|
+
import * as i0 from '@angular/core';
|
|
7
|
+
import { TemplateRef, OnInit, AfterViewInit, OnDestroy, EventEmitter, ElementRef, Renderer2, NgZone, ComponentRef, SimpleChanges, InjectionToken, OnChanges, AfterViewChecked } from '@angular/core';
|
|
8
|
+
import { PopupRef, PopupAnimation, PopupService, Collision } from '@progress/kendo-angular-popup';
|
|
9
|
+
import { PreventableEvent } from '@progress/kendo-angular-common';
|
|
10
|
+
import { Observable, Subscription } from 'rxjs';
|
|
11
|
+
import { SVGIcon } from '@progress/kendo-svg-icons';
|
|
12
|
+
|
|
13
|
+
/**
|
|
14
|
+
* @hidden
|
|
15
|
+
*/
|
|
16
|
+
declare class LocalizedMessagesDirective extends ComponentMessages {
|
|
17
|
+
protected service: LocalizationService;
|
|
18
|
+
/**
|
|
19
|
+
* The title of the close button.
|
|
20
|
+
*/
|
|
21
|
+
closeTitle: string;
|
|
22
|
+
constructor(service: LocalizationService);
|
|
23
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<LocalizedMessagesDirective, never>;
|
|
24
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<LocalizedMessagesDirective, "[kendoTooltipLocalizedMessages]", never, { "closeTitle": { "alias": "closeTitle"; "required": false; }; }, {}, never, never, true, never>;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
/**
|
|
28
|
+
* Specifies the position of the Tooltip or Popover relative to the anchor element.
|
|
29
|
+
*
|
|
30
|
+
* The available options are:
|
|
31
|
+
* - `top` (default)—Aligns the tooltip above the anchor element.
|
|
32
|
+
* - `bottom`—Aligns the tooltip below the anchor element.
|
|
33
|
+
* - `right`—Aligns the tooltip with the rightmost point of the anchor element.
|
|
34
|
+
* - `left`—Aligns the tooltip with the leftmost point of the anchor element.
|
|
35
|
+
*/
|
|
36
|
+
type Position = 'top' | 'bottom' | 'right' | 'left';
|
|
37
|
+
|
|
38
|
+
/**
|
|
39
|
+
* Represents the Kendo UI Popover title template directive for Angular.
|
|
40
|
+
* Use the `kendoPopoverTitleTemplate` directive to define a custom title template for the Popover component.
|
|
41
|
+
*
|
|
42
|
+
* To define the template, nest an `<ng-template>` tag
|
|
43
|
+
* with the `kendoPopoverTitleTemplate` directive inside the `<kendo-popover>` tag.
|
|
44
|
+
*
|
|
45
|
+
* ```html
|
|
46
|
+
* <kendo-popover>
|
|
47
|
+
* <ng-template kendoPopoverTitleTemplate>
|
|
48
|
+
* Custom Title
|
|
49
|
+
* </ng-template>
|
|
50
|
+
* </kendo-popover>
|
|
51
|
+
* ```
|
|
52
|
+
*/
|
|
53
|
+
declare class PopoverTitleTemplateDirective {
|
|
54
|
+
templateRef: TemplateRef<any>;
|
|
55
|
+
constructor(templateRef: TemplateRef<any>);
|
|
56
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<PopoverTitleTemplateDirective, [{ optional: true; }]>;
|
|
57
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<PopoverTitleTemplateDirective, "[kendoPopoverTitleTemplate]", never, {}, {}, never, never, true, never>;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
/**
|
|
61
|
+
* Represents the Kendo UI Popover body template directive for Angular.
|
|
62
|
+
* Use the `kendoPopoverBodyTemplate` directive to define a custom body template for the Popover component.
|
|
63
|
+
*
|
|
64
|
+
* To define the template, nest an `<ng-template>` tag
|
|
65
|
+
* with the `kendoPopoverBodyTemplate` directive inside the `<kendo-popover>` tag.
|
|
66
|
+
*
|
|
67
|
+
* ```html
|
|
68
|
+
* <kendo-popover>
|
|
69
|
+
* <ng-template kendoPopoverBodyTemplate>
|
|
70
|
+
* Custom Body Content
|
|
71
|
+
* </ng-template>
|
|
72
|
+
* </kendo-popover>
|
|
73
|
+
* ```
|
|
74
|
+
*/
|
|
75
|
+
declare class PopoverBodyTemplateDirective {
|
|
76
|
+
templateRef: TemplateRef<any>;
|
|
77
|
+
constructor(templateRef: TemplateRef<any>);
|
|
78
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<PopoverBodyTemplateDirective, [{ optional: true; }]>;
|
|
79
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<PopoverBodyTemplateDirective, "[kendoPopoverBodyTemplate]", never, {}, {}, never, never, true, never>;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
/**
|
|
83
|
+
* Represents the Kendo UI Popover actions template directive for Angular.
|
|
84
|
+
* Use the `kendoPopoverActionsTemplate` directive to define a custom actions template for the Popover component.
|
|
85
|
+
*
|
|
86
|
+
* To define the template, nest an `<ng-template>` tag
|
|
87
|
+
* with the `kendoPopoverActionsTemplate` directive inside the `<kendo-popover>` tag.
|
|
88
|
+
*
|
|
89
|
+
* ```html
|
|
90
|
+
* <kendo-popover>
|
|
91
|
+
* <ng-template kendoPopoverActionsTemplate>
|
|
92
|
+
* Custom Actions
|
|
93
|
+
* </ng-template>
|
|
94
|
+
* </kendo-popover>
|
|
95
|
+
* ```
|
|
96
|
+
*/
|
|
97
|
+
declare class PopoverActionsTemplateDirective {
|
|
98
|
+
templateRef: TemplateRef<any>;
|
|
99
|
+
constructor(templateRef: TemplateRef<any>);
|
|
100
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<PopoverActionsTemplateDirective, [{ optional: true; }]>;
|
|
101
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<PopoverActionsTemplateDirective, "[kendoPopoverActionsTemplate]", never, {}, {}, never, never, true, never>;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
/**
|
|
105
|
+
* Provides arguments for the `show` event. The event fires when a popover is about to open. Cancel the event to prevent opening.
|
|
106
|
+
*/
|
|
107
|
+
declare class PopoverShowEvent extends PreventableEvent {
|
|
108
|
+
/**
|
|
109
|
+
* Specifies the host element related to the Popover.
|
|
110
|
+
*/
|
|
111
|
+
anchor: Element;
|
|
112
|
+
/**
|
|
113
|
+
* @hidden
|
|
114
|
+
* Constructs the event arguments for the `show` event.
|
|
115
|
+
* @param anchor - The host element related to the Popover.
|
|
116
|
+
*/
|
|
117
|
+
constructor(anchor: Element);
|
|
118
|
+
}
|
|
119
|
+
/**
|
|
120
|
+
* Provides arguments for the `hide` event. The event fires when a popover is about to close. Cancel the event to keep it open.
|
|
121
|
+
*/
|
|
122
|
+
declare class PopoverHideEvent extends PreventableEvent {
|
|
123
|
+
/**
|
|
124
|
+
* Specifies the host element related to the Popover.
|
|
125
|
+
*/
|
|
126
|
+
anchor: Element;
|
|
127
|
+
/**
|
|
128
|
+
* Specifies the Popover element.
|
|
129
|
+
*/
|
|
130
|
+
popover: PopupRef;
|
|
131
|
+
/**
|
|
132
|
+
* @hidden
|
|
133
|
+
* Constructs the event arguments for the `hide` event.
|
|
134
|
+
* @param anchor - The host element related to the popover.
|
|
135
|
+
* @param popover - The popover element.
|
|
136
|
+
*/
|
|
137
|
+
constructor(anchor: Element, popover: PopupRef);
|
|
138
|
+
}
|
|
139
|
+
/**
|
|
140
|
+
* Provides arguments for the `shown` event. The event fires after the Popover has opened and its opening animation has finished.
|
|
141
|
+
*/
|
|
142
|
+
declare class PopoverShownEvent {
|
|
143
|
+
/**
|
|
144
|
+
* Specifies the host element related to the Popover.
|
|
145
|
+
*/
|
|
146
|
+
anchor: Element;
|
|
147
|
+
/**
|
|
148
|
+
* Specifies the Popover element.
|
|
149
|
+
*/
|
|
150
|
+
popover: PopupRef;
|
|
151
|
+
/**
|
|
152
|
+
* @hidden
|
|
153
|
+
* Constructs the event arguments for the `shown` event.
|
|
154
|
+
* @param anchor - The host element related to the popover.
|
|
155
|
+
* @param popover - The popover element.
|
|
156
|
+
*/
|
|
157
|
+
constructor(anchor: Element, popover: PopupRef);
|
|
158
|
+
}
|
|
159
|
+
/**
|
|
160
|
+
* Provides arguments for the `hidden` event. The event fires after the popover has closed and its closing animation has finished.
|
|
161
|
+
*/
|
|
162
|
+
declare class PopoverHiddenEvent {
|
|
163
|
+
/**
|
|
164
|
+
* Specifies the host element related to the Popover.
|
|
165
|
+
*/
|
|
166
|
+
anchor: Element;
|
|
167
|
+
/**
|
|
168
|
+
* @hidden
|
|
169
|
+
* Constructs the event arguments for the `hidden` event.
|
|
170
|
+
* @param anchor - The host element related to the popover.
|
|
171
|
+
*/
|
|
172
|
+
constructor(anchor: Element);
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
/**
|
|
176
|
+
* Specifies the available Popover animation options.
|
|
177
|
+
*/
|
|
178
|
+
type PopoverAnimation = PopupAnimation | boolean;
|
|
179
|
+
|
|
180
|
+
/**
|
|
181
|
+
* Represents the [Kendo UI Popover component for Angular](https://www.telerik.com/kendo-angular-ui/components/tooltips/popover).
|
|
182
|
+
* Displays additional information related to a target element.
|
|
183
|
+
*
|
|
184
|
+
* @example
|
|
185
|
+
* ```html
|
|
186
|
+
* <kendo-popover>
|
|
187
|
+
* <ng-template kendoPopoverTitleTemplate>Title</ng-template>
|
|
188
|
+
* <ng-template kendoPopoverBodyTemplate>Body</ng-template>
|
|
189
|
+
* <ng-template kendoPopoverActionsTemplate>Actions</ng-template>
|
|
190
|
+
* </kendo-popover>
|
|
191
|
+
* ```
|
|
192
|
+
*/
|
|
193
|
+
declare class PopoverComponent implements OnInit, AfterViewInit, OnDestroy {
|
|
194
|
+
private localization;
|
|
195
|
+
private renderer;
|
|
196
|
+
private element;
|
|
197
|
+
private zone;
|
|
198
|
+
/**
|
|
199
|
+
* @hidden
|
|
200
|
+
*/
|
|
201
|
+
anchor: Element;
|
|
202
|
+
/**
|
|
203
|
+
* Specifies the position of the Popover relative to its anchor element. [See example](https://www.telerik.com/kendo-angular-ui/components/tooltips/popover/positioning).
|
|
204
|
+
*
|
|
205
|
+
* @default 'right'
|
|
206
|
+
*/
|
|
207
|
+
position: Position;
|
|
208
|
+
/**
|
|
209
|
+
* Specifies the distance from the Popover to its anchor element in pixels.
|
|
210
|
+
*
|
|
211
|
+
* @default 6
|
|
212
|
+
*/
|
|
213
|
+
set offset(value: number);
|
|
214
|
+
get offset(): number;
|
|
215
|
+
/**
|
|
216
|
+
* Determines the width of the Popover. Numeric values are treated as pixels.
|
|
217
|
+
*
|
|
218
|
+
* @default 'auto'
|
|
219
|
+
*/
|
|
220
|
+
set width(value: number | string);
|
|
221
|
+
get width(): string | number;
|
|
222
|
+
/**
|
|
223
|
+
* Determines the height of the Popover. Numeric values are treated as pixels.
|
|
224
|
+
*
|
|
225
|
+
* @default 'auto'
|
|
226
|
+
*/
|
|
227
|
+
set height(value: number | string);
|
|
228
|
+
get height(): string | number;
|
|
229
|
+
/**
|
|
230
|
+
* @hidden
|
|
231
|
+
*/
|
|
232
|
+
direction: 'ltr' | 'rtl';
|
|
233
|
+
/**
|
|
234
|
+
* Specifies the main header text of the Popover. If a `titleTemplate` is provided, it takes precedence.
|
|
235
|
+
*/
|
|
236
|
+
title: string;
|
|
237
|
+
/**
|
|
238
|
+
* @hidden
|
|
239
|
+
* Specifies the secondary header text of the Popover.
|
|
240
|
+
*
|
|
241
|
+
* If a `titleTemplate` is provided it would take precedence over the subtitle.
|
|
242
|
+
*/
|
|
243
|
+
subtitle: string;
|
|
244
|
+
/**
|
|
245
|
+
* Represents the text rendered in the Popover body section. If a `bodyTemplate` is provided, it takes precedence.
|
|
246
|
+
*/
|
|
247
|
+
body: string;
|
|
248
|
+
/**
|
|
249
|
+
* Determines whether a callout is rendered along the Popover. [See example](https://www.telerik.com/kendo-angular-ui/components/tooltips/popover/callout).
|
|
250
|
+
*
|
|
251
|
+
* @default true
|
|
252
|
+
*/
|
|
253
|
+
callout: boolean;
|
|
254
|
+
/**
|
|
255
|
+
* Enables and configures the Popover animation. [See example](https://www.telerik.com/kendo-angular-ui/components/tooltips/popover/animations).
|
|
256
|
+
*
|
|
257
|
+
* Accepts a boolean to enable the default animation, or a `PopoverAnimation` object for custom settings.
|
|
258
|
+
*
|
|
259
|
+
* @default false
|
|
260
|
+
*/
|
|
261
|
+
animation: PopoverAnimation;
|
|
262
|
+
/**
|
|
263
|
+
* Defines a callback function that returns custom data for the Popover templates.
|
|
264
|
+
* The function exposes the `anchor` element as an argument and returns an object that can be used in the templates. [See example](https://www.telerik.com/kendo-angular-ui/components/tooltips/popover/templates#passing-data-to-templates).
|
|
265
|
+
*/
|
|
266
|
+
set templateData(fn: PopoverDataFn);
|
|
267
|
+
get templateData(): PopoverDataFn;
|
|
268
|
+
/**
|
|
269
|
+
* @hidden
|
|
270
|
+
* Determines the visibility of the Popover.
|
|
271
|
+
*/
|
|
272
|
+
visible: boolean;
|
|
273
|
+
/**
|
|
274
|
+
* @hidden
|
|
275
|
+
*/
|
|
276
|
+
get isHidden(): boolean;
|
|
277
|
+
/**
|
|
278
|
+
* @hidden
|
|
279
|
+
*/
|
|
280
|
+
get hasAttributeHidden(): boolean | null;
|
|
281
|
+
/**
|
|
282
|
+
* Fires before the Popover is shown. The event is preventable. If canceled, the Popover will not display. [See example](https://www.telerik.com/kendo-angular-ui/components/tooltips/popover/events).
|
|
283
|
+
*/
|
|
284
|
+
show: EventEmitter<PopoverShowEvent>;
|
|
285
|
+
/**
|
|
286
|
+
* Fires after the Popover has been shown and the animation has ended. [See example](https://www.telerik.com/kendo-angular-ui/components/tooltips/popover/events).
|
|
287
|
+
*/
|
|
288
|
+
shown: EventEmitter<PopoverShownEvent>;
|
|
289
|
+
/**
|
|
290
|
+
* Fires when the Popover is about to be hidden. The event is preventable. If canceled, the Popover remains visible. [See example](https://www.telerik.com/kendo-angular-ui/components/tooltips/popover/events).
|
|
291
|
+
*/
|
|
292
|
+
hide: EventEmitter<PopoverHideEvent>;
|
|
293
|
+
/**
|
|
294
|
+
* Fires after the Popover has been hidden and the animation has ended. [See example](https://www.telerik.com/kendo-angular-ui/components/tooltips/popover/events).
|
|
295
|
+
*/
|
|
296
|
+
hidden: EventEmitter<any>;
|
|
297
|
+
/**
|
|
298
|
+
* @hidden
|
|
299
|
+
*/
|
|
300
|
+
closeOnKeyDown: EventEmitter<any>;
|
|
301
|
+
/**
|
|
302
|
+
* @hidden
|
|
303
|
+
*/
|
|
304
|
+
popoverWrapper: ElementRef;
|
|
305
|
+
/**
|
|
306
|
+
* @hidden
|
|
307
|
+
*/
|
|
308
|
+
titleTemplateWrapper: ElementRef;
|
|
309
|
+
/**
|
|
310
|
+
* @hidden
|
|
311
|
+
*/
|
|
312
|
+
bodyTemplateWrapper: ElementRef;
|
|
313
|
+
/**
|
|
314
|
+
* @hidden
|
|
315
|
+
*/
|
|
316
|
+
titleTemplate: PopoverTitleTemplateDirective;
|
|
317
|
+
/**
|
|
318
|
+
* @hidden
|
|
319
|
+
*/
|
|
320
|
+
bodyTemplate: PopoverBodyTemplateDirective;
|
|
321
|
+
/**
|
|
322
|
+
* @hidden
|
|
323
|
+
*/
|
|
324
|
+
actionsTemplate: PopoverActionsTemplateDirective;
|
|
325
|
+
/**
|
|
326
|
+
* @hidden
|
|
327
|
+
*/
|
|
328
|
+
contextData: any;
|
|
329
|
+
/**
|
|
330
|
+
* @hidden
|
|
331
|
+
*/
|
|
332
|
+
_width: string;
|
|
333
|
+
/**
|
|
334
|
+
* @hidden
|
|
335
|
+
*/
|
|
336
|
+
_height: string;
|
|
337
|
+
/**
|
|
338
|
+
* @hidden
|
|
339
|
+
*/
|
|
340
|
+
popoverId: string;
|
|
341
|
+
private _offset;
|
|
342
|
+
private subs;
|
|
343
|
+
constructor(localization: LocalizationService, renderer: Renderer2, element: ElementRef, zone: NgZone);
|
|
344
|
+
ngOnInit(): void;
|
|
345
|
+
ngAfterViewInit(): void;
|
|
346
|
+
ngOnDestroy(): void;
|
|
347
|
+
/**
|
|
348
|
+
* @hidden
|
|
349
|
+
*/
|
|
350
|
+
getCalloutPosition(): any;
|
|
351
|
+
/**
|
|
352
|
+
* @hidden
|
|
353
|
+
*/
|
|
354
|
+
onKeyDown(event: any): void;
|
|
355
|
+
private _templateData;
|
|
356
|
+
private keepFocusWithinComponent;
|
|
357
|
+
private setAriaAttributes;
|
|
358
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<PopoverComponent, never>;
|
|
359
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<PopoverComponent, "kendo-popover", never, { "position": { "alias": "position"; "required": false; }; "offset": { "alias": "offset"; "required": false; }; "width": { "alias": "width"; "required": false; }; "height": { "alias": "height"; "required": false; }; "title": { "alias": "title"; "required": false; }; "subtitle": { "alias": "subtitle"; "required": false; }; "body": { "alias": "body"; "required": false; }; "callout": { "alias": "callout"; "required": false; }; "animation": { "alias": "animation"; "required": false; }; "templateData": { "alias": "templateData"; "required": false; }; }, { "show": "show"; "shown": "shown"; "hide": "hide"; "hidden": "hidden"; "closeOnKeyDown": "closeOnKeyDown"; }, ["titleTemplate", "bodyTemplate", "actionsTemplate"], never, true, never>;
|
|
360
|
+
}
|
|
361
|
+
|
|
362
|
+
/**
|
|
363
|
+
* Represents a callback used by the [`popover`](https://www.telerik.com/kendo-angular-ui/components/tooltips/api/popoveranchordirective#popover) property.
|
|
364
|
+
* Returns the popover instance to display. [See example](https://www.telerik.com/kendo-angular-ui/components/tooltips/popover/configuration#popover-callback).
|
|
365
|
+
*/
|
|
366
|
+
type PopoverFn = (anchor: Element) => PopoverComponent;
|
|
367
|
+
/**
|
|
368
|
+
* Represents a callback used by the [`templateData`](https://www.telerik.com/kendo-angular-ui/components/tooltips/api/popovercomponent#templateData) property.
|
|
369
|
+
* Returns custom data to pass to the popover templates. [See example](https://www.telerik.com/kendo-angular-ui/components/tooltips/popover/templates#passing-data-to-templates).
|
|
370
|
+
*/
|
|
371
|
+
type PopoverDataFn = (anchor: Element) => any;
|
|
372
|
+
|
|
373
|
+
/**
|
|
374
|
+
* The `PopoverShowOption` type defines the different ways a Popover can be displayed based on user interaction with its anchor element.
|
|
375
|
+
*
|
|
376
|
+
* The supported values are:
|
|
377
|
+
* - `click` (default) — Shows the Popover when its anchor element is clicked.
|
|
378
|
+
* - `hover`—Shows the Popover when its anchor element is hovered.
|
|
379
|
+
* - `focus`—Shows the Popover when its anchor element is focused.
|
|
380
|
+
* - `none`—Does not show the Popover on user interaction. You can render it via the Popover API methods.
|
|
381
|
+
*/
|
|
382
|
+
type PopoverShowOption = 'hover' | 'click' | 'none' | 'focus';
|
|
383
|
+
|
|
384
|
+
/**
|
|
385
|
+
* @hidden
|
|
386
|
+
*/
|
|
387
|
+
declare class PopoverService implements OnDestroy {
|
|
388
|
+
private ngZone;
|
|
389
|
+
private _pointerOverPopup;
|
|
390
|
+
private _pointerOverAnchor;
|
|
391
|
+
private _focusInsidePopover;
|
|
392
|
+
private _hidePopover;
|
|
393
|
+
private _isOrigin;
|
|
394
|
+
private originAnchor;
|
|
395
|
+
private currentAnchor;
|
|
396
|
+
private subs;
|
|
397
|
+
constructor(ngZone: NgZone);
|
|
398
|
+
ngOnDestroy(): void;
|
|
399
|
+
get isPopoverHovered(): Observable<any>;
|
|
400
|
+
emitPopoverState(isHovered: boolean): void;
|
|
401
|
+
get isAnchorHovered(): Observable<any>;
|
|
402
|
+
emitAnchorState(isHovered: boolean, anchor: any): void;
|
|
403
|
+
get isFocusInsidePopover(): Observable<any>;
|
|
404
|
+
emitFocusInsidePopover(isFocused: boolean): void;
|
|
405
|
+
get hidePopover(): Observable<any>;
|
|
406
|
+
monitor(): void;
|
|
407
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<PopoverService, never>;
|
|
408
|
+
static ɵprov: i0.ɵɵInjectableDeclaration<PopoverService>;
|
|
409
|
+
}
|
|
410
|
+
|
|
411
|
+
/**
|
|
412
|
+
* @hidden
|
|
413
|
+
*/
|
|
414
|
+
declare abstract class PopoverDirectivesBase {
|
|
415
|
+
protected ngZone: NgZone;
|
|
416
|
+
protected popupService: PopupService;
|
|
417
|
+
protected renderer: Renderer2;
|
|
418
|
+
/**
|
|
419
|
+
* Specifies the popover instance to render.
|
|
420
|
+
* Accepts a [`PopoverComponent`](https://www.telerik.com/kendo-angular-ui/components/tooltips/api/popovercomponent) instance or a [`PopoverFn`](https://www.telerik.com/kendo-angular-ui/components/tooltips/api/popoverfn) callback that returns a [`PopoverComponent`](https://www.telerik.com/kendo-angular-ui/components/tooltips/api/popovercomponent) instance for the current anchor element. [See example](https://www.telerik.com/kendo-angular-ui/components/tooltips/popover/templates#passing-data-to-templates).
|
|
421
|
+
*/
|
|
422
|
+
set popover(value: PopoverComponent | PopoverFn);
|
|
423
|
+
get popover(): PopoverComponent | PopoverFn;
|
|
424
|
+
/**
|
|
425
|
+
* Specifies the mouse action that triggers the popover to show. [See example](https://www.telerik.com/kendo-angular-ui/components/tooltips/popover/programmatic-control).
|
|
426
|
+
*/
|
|
427
|
+
set showOn(value: PopoverShowOption);
|
|
428
|
+
get showOn(): PopoverShowOption;
|
|
429
|
+
/**
|
|
430
|
+
* @hidden
|
|
431
|
+
*/
|
|
432
|
+
private anchor;
|
|
433
|
+
popupRef: PopupRef;
|
|
434
|
+
protected disposeHoverOverListener: () => void;
|
|
435
|
+
protected disposeHoverOutListener: () => void;
|
|
436
|
+
protected disposeClickListener: () => void;
|
|
437
|
+
protected disposePopupHoverOutListener: () => void;
|
|
438
|
+
protected disposePopupHoverInListener: () => void;
|
|
439
|
+
protected disposePopupFocusOutListener: () => void;
|
|
440
|
+
protected subs: Subscription;
|
|
441
|
+
protected _popoverService: PopoverService;
|
|
442
|
+
protected _hideSub: Subscription;
|
|
443
|
+
protected _focusInsideSub: Subscription;
|
|
444
|
+
private _popover;
|
|
445
|
+
private _showOn;
|
|
446
|
+
private _popupOpenSub;
|
|
447
|
+
private _popupCloseSub;
|
|
448
|
+
private _popupSubs;
|
|
449
|
+
constructor(ngZone: NgZone, popupService: PopupService, renderer: Renderer2);
|
|
450
|
+
ngAfterViewInit(): void;
|
|
451
|
+
ngOnDestroy(): void;
|
|
452
|
+
/**
|
|
453
|
+
* Hides the Popover. [See example](https://www.telerik.com/kendo-angular-ui/components/tooltips/popover/programmatic-control).
|
|
454
|
+
*/
|
|
455
|
+
hide(): void;
|
|
456
|
+
/**
|
|
457
|
+
* @hidden
|
|
458
|
+
*/
|
|
459
|
+
protected closePopup(): void;
|
|
460
|
+
/**
|
|
461
|
+
* @hidden
|
|
462
|
+
*/
|
|
463
|
+
protected openPopup(anchor: Element | ElementRef): void;
|
|
464
|
+
/**
|
|
465
|
+
* @hidden
|
|
466
|
+
*/
|
|
467
|
+
protected isPrevented(anchorElement: Element, show: boolean): boolean;
|
|
468
|
+
/**
|
|
469
|
+
* @hidden
|
|
470
|
+
*/
|
|
471
|
+
protected monitorPopup(): void;
|
|
472
|
+
protected applySettings(contentComponent: ComponentRef<PopoverComponent>, popover: PopoverComponent): void;
|
|
473
|
+
protected abstract subscribeToShowEvents(args?: any): void;
|
|
474
|
+
protected abstract subscribeClick(): void;
|
|
475
|
+
protected abstract mouseenterHandler(args?: any): void;
|
|
476
|
+
protected abstract mouseleaveHandler(args?: any): void;
|
|
477
|
+
protected abstract focusHandler(args?: any): void;
|
|
478
|
+
protected abstract blurHandler(args?: any): void;
|
|
479
|
+
protected manageEvents(): void;
|
|
480
|
+
/**
|
|
481
|
+
* @hidden
|
|
482
|
+
*/
|
|
483
|
+
private initializeEvents;
|
|
484
|
+
private onKeyDown;
|
|
485
|
+
private initializeCompletionEvents;
|
|
486
|
+
private shouldEmitEvent;
|
|
487
|
+
private shouldEmitCompletionEvents;
|
|
488
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<PopoverDirectivesBase, never>;
|
|
489
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<PopoverDirectivesBase, never, never, { "popover": { "alias": "popover"; "required": false; }; "showOn": { "alias": "showOn"; "required": false; }; }, {}, never, never, true, never>;
|
|
490
|
+
}
|
|
491
|
+
|
|
492
|
+
/**
|
|
493
|
+
* Represents the [`kendoPopoverAnchor`](https://www.telerik.com/kendo-angular-ui/components/tooltips/popover/configuration#popover-anchor) directive.
|
|
494
|
+
* Targets an element to display a popover on user interaction.
|
|
495
|
+
*
|
|
496
|
+
* @example
|
|
497
|
+
* ```html
|
|
498
|
+
* <button kendoPopoverAnchor [popover]="myPopover">Show Popover</button>
|
|
499
|
+
* ```
|
|
500
|
+
*/
|
|
501
|
+
declare class PopoverAnchorDirective extends PopoverDirectivesBase {
|
|
502
|
+
protected hostEl: ElementRef;
|
|
503
|
+
protected ngZone: NgZone;
|
|
504
|
+
protected popupService: PopupService;
|
|
505
|
+
protected renderer: Renderer2;
|
|
506
|
+
protected popoverService: PopoverService;
|
|
507
|
+
constructor(hostEl: ElementRef, ngZone: NgZone, popupService: PopupService, renderer: Renderer2, popoverService: PopoverService);
|
|
508
|
+
ngOnChanges(changes: SimpleChanges): void;
|
|
509
|
+
/**
|
|
510
|
+
* Shows the Popover. [See example](https://www.telerik.com/kendo-angular-ui/components/tooltips/popover/programmatic-control)
|
|
511
|
+
*/
|
|
512
|
+
show(): void;
|
|
513
|
+
/**
|
|
514
|
+
* Toggles the visibility of the Popover. [See example](https://www.telerik.com/kendo-angular-ui/components/tooltips/popover/programmatic-control)
|
|
515
|
+
*/
|
|
516
|
+
toggle(): void;
|
|
517
|
+
protected subscribeToShowEvents(arr: any[]): void;
|
|
518
|
+
protected subscribeClick(): void;
|
|
519
|
+
protected mouseenterHandler: () => void;
|
|
520
|
+
protected mouseleaveHandler: () => void;
|
|
521
|
+
protected focusHandler: () => void;
|
|
522
|
+
protected blurHandler: (args: any) => void;
|
|
523
|
+
/**
|
|
524
|
+
* @hidden
|
|
525
|
+
*/
|
|
526
|
+
private onClick;
|
|
527
|
+
private controlVisibility;
|
|
528
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<PopoverAnchorDirective, never>;
|
|
529
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<PopoverAnchorDirective, "[kendoPopoverAnchor]", ["kendoPopoverAnchor"], {}, {}, never, never, true, never>;
|
|
530
|
+
}
|
|
531
|
+
|
|
532
|
+
/**
|
|
533
|
+
* Represents the [`kendoPopoverContainer`](https://www.telerik.com/kendo-angular-ui/components/tooltips/popover/configuration#popover-container) directive.
|
|
534
|
+
* Filters and targets multiple elements to display a popover on user interaction.
|
|
535
|
+
*
|
|
536
|
+
* @example
|
|
537
|
+
* ```html
|
|
538
|
+
* <div kendoPopoverContainer [popover]="myPopover" filter=".has-popover">
|
|
539
|
+
* <button class="has-popover">Show Popover</button>
|
|
540
|
+
* <button>Button Without Popover</button>
|
|
541
|
+
* <button class="has-popover">Show Popover</button>
|
|
542
|
+
* </div>
|
|
543
|
+
* ```
|
|
544
|
+
*/
|
|
545
|
+
declare class PopoverContainerDirective extends PopoverDirectivesBase {
|
|
546
|
+
wrapperEl: ElementRef;
|
|
547
|
+
protected ngZone: NgZone;
|
|
548
|
+
protected popupService: PopupService;
|
|
549
|
+
protected renderer: Renderer2;
|
|
550
|
+
protected popoverService: PopoverService;
|
|
551
|
+
/**
|
|
552
|
+
* Specifies a selector for the elements that display a popover. Accepts a CSS selector string similar to a [querySelector method](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector).
|
|
553
|
+
* [See example](https://www.telerik.com/kendo-angular-ui/components/tooltips/popover/configuration#popover-container).
|
|
554
|
+
*/
|
|
555
|
+
filter: string;
|
|
556
|
+
constructor(wrapperEl: ElementRef, ngZone: NgZone, popupService: PopupService, renderer: Renderer2, popoverService: PopoverService);
|
|
557
|
+
/**
|
|
558
|
+
* Shows the Popover.
|
|
559
|
+
*
|
|
560
|
+
* @param anchor - The element used as an anchor. The Popover opens relative to this element. [See example](https://www.telerik.com/kendo-angular-ui/components/tooltips/popover/programmatic-control).
|
|
561
|
+
*/
|
|
562
|
+
show(anchor: Element | ElementRef): void;
|
|
563
|
+
/**
|
|
564
|
+
* Toggles the visibility of the Popover. [See example](https://www.telerik.com/kendo-angular-ui/components/tooltips/popover/programmatic-control).
|
|
565
|
+
*
|
|
566
|
+
* @param anchor - The element used as an anchor. The Popover opens relative to this element.
|
|
567
|
+
*/
|
|
568
|
+
toggle(anchor: Element | ElementRef): void;
|
|
569
|
+
protected subscribeClick(): void;
|
|
570
|
+
protected mouseenterHandler: (anchor: Element) => void;
|
|
571
|
+
protected mouseleaveHandler: (args: any) => void;
|
|
572
|
+
protected focusHandler: (anchor: Element) => void;
|
|
573
|
+
protected blurHandler: (args: any) => void;
|
|
574
|
+
protected subscribeToShowEvents(arr: any[]): void;
|
|
575
|
+
private clickHandler;
|
|
576
|
+
private controlVisibility;
|
|
577
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<PopoverContainerDirective, never>;
|
|
578
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<PopoverContainerDirective, "[kendoPopoverContainer]", ["kendoPopoverContainer"], { "filter": { "alias": "filter"; "required": false; }; }, {}, never, never, true, never>;
|
|
579
|
+
}
|
|
580
|
+
|
|
581
|
+
/**
|
|
582
|
+
* @hidden
|
|
583
|
+
*/
|
|
584
|
+
declare class TooltipContentComponent {
|
|
585
|
+
private content;
|
|
586
|
+
private localizationService;
|
|
587
|
+
/**
|
|
588
|
+
* @hidden
|
|
589
|
+
*/
|
|
590
|
+
xIcon: SVGIcon;
|
|
591
|
+
/**
|
|
592
|
+
* @hidden
|
|
593
|
+
*/
|
|
594
|
+
direction: string;
|
|
595
|
+
close: EventEmitter<any>;
|
|
596
|
+
get cssClasses(): string;
|
|
597
|
+
hostRole: string;
|
|
598
|
+
get hostId(): string;
|
|
599
|
+
get className(): boolean;
|
|
600
|
+
get cssPosition(): string;
|
|
601
|
+
tooltipWidth: number;
|
|
602
|
+
tooltipHeight: number;
|
|
603
|
+
titleTemplate?: TemplateRef<any>;
|
|
604
|
+
anchor: ElementRef;
|
|
605
|
+
closable: boolean;
|
|
606
|
+
templateRef?: TemplateRef<any>;
|
|
607
|
+
templateString?: string;
|
|
608
|
+
closeTitle: string;
|
|
609
|
+
callout: boolean;
|
|
610
|
+
position: string;
|
|
611
|
+
/**
|
|
612
|
+
* @hidden
|
|
613
|
+
*/
|
|
614
|
+
tooltipId: string;
|
|
615
|
+
private dynamicRTLSubscription;
|
|
616
|
+
constructor(content: ElementRef, localizationService: LocalizationService);
|
|
617
|
+
ngOnInit(): void;
|
|
618
|
+
ngOnDestroy(): void;
|
|
619
|
+
get closeButtonTitle(): string;
|
|
620
|
+
calloutPositionClass(): string;
|
|
621
|
+
onCloseClick(event: any): void;
|
|
622
|
+
updateCalloutPosition(position: Position, isFlip: boolean): void;
|
|
623
|
+
private calloutStyles;
|
|
624
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<TooltipContentComponent, never>;
|
|
625
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<TooltipContentComponent, "kendo-tooltip", never, { "tooltipWidth": { "alias": "tooltipWidth"; "required": false; }; "tooltipHeight": { "alias": "tooltipHeight"; "required": false; }; "titleTemplate": { "alias": "titleTemplate"; "required": false; }; "anchor": { "alias": "anchor"; "required": false; }; "closable": { "alias": "closable"; "required": false; }; "templateRef": { "alias": "templateRef"; "required": false; }; "templateString": { "alias": "templateString"; "required": false; }; }, { "close": "close"; }, never, never, true, never>;
|
|
626
|
+
}
|
|
627
|
+
|
|
628
|
+
/**
|
|
629
|
+
* The `ShowOption` type defines the different ways a tooltip can be displayed in the Kendo UI Tooltip component.
|
|
630
|
+
*
|
|
631
|
+
* The available options are:
|
|
632
|
+
* - `hover` (default)—Tooltip is rendered when its anchor element is hovered.
|
|
633
|
+
* - `click`—Tooltip is rendered when its anchor element is clicked.
|
|
634
|
+
* - `none`—Tooltip is not rendered in the kendoTooltip container.
|
|
635
|
+
*/
|
|
636
|
+
type ShowOption = 'hover' | 'click' | 'none';
|
|
637
|
+
|
|
638
|
+
/**
|
|
639
|
+
* Obsolete. Provide the TooltipSettings class instead.
|
|
640
|
+
*
|
|
641
|
+
* @hidden
|
|
642
|
+
*/
|
|
643
|
+
declare const TOOLTIP_SETTINGS: InjectionToken<string>;
|
|
644
|
+
/**
|
|
645
|
+
* Provides a global configuration for the Kendo UI Tooltip. Inject this class in the `AppComponent` constructor to override configuration properties.
|
|
646
|
+
*
|
|
647
|
+
* @example
|
|
648
|
+
* ```typescript
|
|
649
|
+
* import { TooltipSettings } from '@progress/kendo-angular-tooltip';
|
|
650
|
+
*
|
|
651
|
+
* @Component({
|
|
652
|
+
* selector: 'my-app',
|
|
653
|
+
* template: `<div kendoTooltip><button title="Save">Save</button></div>`,
|
|
654
|
+
* providers: [{
|
|
655
|
+
* provide: TooltipSettings,
|
|
656
|
+
* useFactory: (): TooltipSettings => ({ position: 'right' })
|
|
657
|
+
* }]
|
|
658
|
+
* })
|
|
659
|
+
* export class AppComponent {}
|
|
660
|
+
* ```
|
|
661
|
+
*/
|
|
662
|
+
declare class TooltipSettings {
|
|
663
|
+
/**
|
|
664
|
+
* Determines if the Tooltip displays a callout arrow.
|
|
665
|
+
*
|
|
666
|
+
* @default true
|
|
667
|
+
*/
|
|
668
|
+
callout?: boolean;
|
|
669
|
+
/**
|
|
670
|
+
* Sets the title of the **Close** button.
|
|
671
|
+
*/
|
|
672
|
+
closeTitle: string;
|
|
673
|
+
/**
|
|
674
|
+
* Specifies the position of the Tooltip relative to the anchor element.
|
|
675
|
+
*
|
|
676
|
+
* @default 'top'
|
|
677
|
+
*/
|
|
678
|
+
position?: Position;
|
|
679
|
+
/**
|
|
680
|
+
* Specifies the mouse action that triggers the Tooltip to show.
|
|
681
|
+
*
|
|
682
|
+
* @default 'hover'
|
|
683
|
+
*/
|
|
684
|
+
showOn?: ShowOption;
|
|
685
|
+
/**
|
|
686
|
+
* Specifies the delay in milliseconds before the Tooltip is shown.
|
|
687
|
+
*
|
|
688
|
+
* @default 100
|
|
689
|
+
*/
|
|
690
|
+
showAfter?: number;
|
|
691
|
+
/**
|
|
692
|
+
* @hidden
|
|
693
|
+
*/
|
|
694
|
+
constructor();
|
|
695
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<TooltipSettings, never>;
|
|
696
|
+
static ɵprov: i0.ɵɵInjectableDeclaration<TooltipSettings>;
|
|
697
|
+
}
|
|
698
|
+
|
|
699
|
+
/**
|
|
700
|
+
* Specifies the predefined theme color of the Tooltip.
|
|
701
|
+
*
|
|
702
|
+
* The available values are:
|
|
703
|
+
* - `base` (default)—Applies coloring based on the `base` theme color.
|
|
704
|
+
* - `inverse`—Applies coloring based on the `inverse` theme color.
|
|
705
|
+
* - `info`—Applies coloring based on the `info` theme color.
|
|
706
|
+
* - `success`—Applies coloring based on the `success` theme color.
|
|
707
|
+
* - `warning`—Applies coloring based on the `warning` theme color.
|
|
708
|
+
* - `error`—Applies coloring based on the `error` theme color.
|
|
709
|
+
*/
|
|
710
|
+
type TooltipThemeColor = 'base' | 'inverse' | 'info' | 'success' | 'warning' | 'error';
|
|
711
|
+
|
|
712
|
+
/**
|
|
713
|
+
* Represents the [Kendo UI Tooltip directive for Angular](https://www.telerik.com/kendo-angular-ui/components/tooltips/tooltip).
|
|
714
|
+
* Displays additional information related to an element.
|
|
715
|
+
*
|
|
716
|
+
* @example
|
|
717
|
+
* ```html
|
|
718
|
+
* <div kendoTooltip>
|
|
719
|
+
* <button kendoButton title="Save">Save</button>
|
|
720
|
+
* </div>
|
|
721
|
+
* ```
|
|
722
|
+
*/
|
|
723
|
+
declare class TooltipDirective implements OnDestroy, OnChanges, AfterViewChecked {
|
|
724
|
+
tooltipWrapper: ElementRef;
|
|
725
|
+
ngZone: NgZone;
|
|
726
|
+
private renderer;
|
|
727
|
+
private popupService;
|
|
728
|
+
/**
|
|
729
|
+
* Specifies a selector for elements within a container that display a tooltip
|
|
730
|
+
* ([see example](https://www.telerik.com/kendo-angular-ui/components/tooltips/tooltip/anchor-elements)). The possible values include any
|
|
731
|
+
* DOM `selector`.
|
|
732
|
+
* @default '[title]'
|
|
733
|
+
*/
|
|
734
|
+
filter: string;
|
|
735
|
+
/**
|
|
736
|
+
* Specifies the position of the Tooltip relative to the
|
|
737
|
+
* anchor element ([see example](https://www.telerik.com/kendo-angular-ui/components/tooltips/tooltip/positioning)).
|
|
738
|
+
*
|
|
739
|
+
* @default 'top'
|
|
740
|
+
*/
|
|
741
|
+
position: Position;
|
|
742
|
+
/**
|
|
743
|
+
* Sets the template for the tooltip header title. [See example](https://www.telerik.com/kendo-angular-ui/components/tooltips/tooltip/anchor-elements).
|
|
744
|
+
*/
|
|
745
|
+
titleTemplate?: TemplateRef<any>;
|
|
746
|
+
/**
|
|
747
|
+
* Specifies the mouse action that triggers the Tooltip to show. [See example](https://www.telerik.com/kendo-angular-ui/components/tooltips/tooltip/opening).
|
|
748
|
+
*/
|
|
749
|
+
showOn: ShowOption;
|
|
750
|
+
/**
|
|
751
|
+
* Specifies the delay in milliseconds before the Tooltip is shown.
|
|
752
|
+
*
|
|
753
|
+
* @default 100
|
|
754
|
+
*/
|
|
755
|
+
showAfter: number;
|
|
756
|
+
/**
|
|
757
|
+
* Determines if the Tooltip displays a callout arrow.
|
|
758
|
+
*
|
|
759
|
+
* @default true
|
|
760
|
+
*/
|
|
761
|
+
callout: boolean;
|
|
762
|
+
/**
|
|
763
|
+
* Determines if the Tooltip displays a **Close** button. [See example](https://www.telerik.com/kendo-angular-ui/components/tooltips/tooltip/closable-tooltip).
|
|
764
|
+
*
|
|
765
|
+
* @default false
|
|
766
|
+
*/
|
|
767
|
+
closable: boolean;
|
|
768
|
+
/**
|
|
769
|
+
* Specifies the offset in pixels between the Tooltip and the anchor.
|
|
770
|
+
* If the `callout` property is set to `true`, the offset is rendered from the callout arrow.
|
|
771
|
+
* If the `callout` property is set to `false`, the offset is rendered from the content of the Tooltip.
|
|
772
|
+
*
|
|
773
|
+
* @default 6
|
|
774
|
+
*/
|
|
775
|
+
offset: number;
|
|
776
|
+
/**
|
|
777
|
+
* Sets the width of the Tooltip. [See example](https://www.telerik.com/kendo-angular-ui/components/tooltips/tooltip/anchor-elements).
|
|
778
|
+
*/
|
|
779
|
+
tooltipWidth: number;
|
|
780
|
+
/**
|
|
781
|
+
* Sets the height of the Tooltip.
|
|
782
|
+
*/
|
|
783
|
+
tooltipHeight: number;
|
|
784
|
+
/**
|
|
785
|
+
* Sets a CSS class for the Tooltip.
|
|
786
|
+
*/
|
|
787
|
+
tooltipClass: string;
|
|
788
|
+
/**
|
|
789
|
+
* Specifies the theme color of the Tooltip.
|
|
790
|
+
* The theme color applies the corresponding `k-tooltip-{tooltipThemeColor}` class to the Tooltip element.
|
|
791
|
+
*/
|
|
792
|
+
tooltipThemeColor: TooltipThemeColor;
|
|
793
|
+
/**
|
|
794
|
+
* @hidden
|
|
795
|
+
* Specifies a CSS class that will be added to the kendo-tooltip element.
|
|
796
|
+
*/
|
|
797
|
+
tooltipContentClass: string;
|
|
798
|
+
/**
|
|
799
|
+
* Provides screen boundary detection when the Тooltip is shown.
|
|
800
|
+
*/
|
|
801
|
+
collision: Collision;
|
|
802
|
+
/**
|
|
803
|
+
* Sets the title of the **Close** button.
|
|
804
|
+
*/
|
|
805
|
+
closeTitle: string;
|
|
806
|
+
/**
|
|
807
|
+
* Sets a custom content template for the Tooltip.
|
|
808
|
+
* The template is rendered inside the Tooltip content area. [See example](https://www.telerik.com/kendo-angular-ui/components/tooltips/tooltip/templates).
|
|
809
|
+
*/
|
|
810
|
+
set tooltipTemplate(value: TemplateRef<any>);
|
|
811
|
+
get tooltipTemplate(): TemplateRef<any>;
|
|
812
|
+
popupRef: PopupRef;
|
|
813
|
+
template: TemplateRef<any>;
|
|
814
|
+
private showTimeout;
|
|
815
|
+
private anchor;
|
|
816
|
+
private mouseOverSubscription;
|
|
817
|
+
private mouseOutSubscription;
|
|
818
|
+
private mouseClickSubscription;
|
|
819
|
+
private anchorTitleSubscription;
|
|
820
|
+
private popupPositionChangeSubscription;
|
|
821
|
+
private popupMouseOutSubscription;
|
|
822
|
+
private keyboardNavigationSubscription;
|
|
823
|
+
private closeClickSubscription;
|
|
824
|
+
private validPositions;
|
|
825
|
+
private validShowOptions;
|
|
826
|
+
constructor(tooltipWrapper: ElementRef, ngZone: NgZone, renderer: Renderer2, popupService: PopupService, settings: TooltipSettings, legacySettings: TooltipSettings);
|
|
827
|
+
/**
|
|
828
|
+
* Shows the Tooltip.
|
|
829
|
+
* @param anchor - The element used as an anchor. The Tooltip opens relative to this element.
|
|
830
|
+
*/
|
|
831
|
+
show(anchor: ElementRef | Element): void;
|
|
832
|
+
/**
|
|
833
|
+
* Hides the Tooltip.
|
|
834
|
+
*/
|
|
835
|
+
hide(): void;
|
|
836
|
+
/**
|
|
837
|
+
* Toggles the visibility of the Tooltip.
|
|
838
|
+
* @param anchor - The element used as an anchor.
|
|
839
|
+
* @param show - Optional. Boolean. Specifies if the Tooltip is rendered.
|
|
840
|
+
*/
|
|
841
|
+
toggle(anchor: ElementRef | Element, show?: boolean): void;
|
|
842
|
+
ngOnInit(): void;
|
|
843
|
+
ngOnChanges(changes: any): void;
|
|
844
|
+
ngAfterViewChecked(): void;
|
|
845
|
+
ngOnDestroy(): void;
|
|
846
|
+
private showContent;
|
|
847
|
+
private bindContent;
|
|
848
|
+
private hideElementTitle;
|
|
849
|
+
private openPopup;
|
|
850
|
+
private closePopup;
|
|
851
|
+
private subscribeClick;
|
|
852
|
+
private onMouseClick;
|
|
853
|
+
private onKeyDown;
|
|
854
|
+
private canCloseTooltip;
|
|
855
|
+
private onMouseOver;
|
|
856
|
+
private onMouseOut;
|
|
857
|
+
private verifyProperties;
|
|
858
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<TooltipDirective, [null, null, null, null, { optional: true; }, { optional: true; }]>;
|
|
859
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<TooltipDirective, "[kendoTooltip]", ["kendoTooltip"], { "filter": { "alias": "filter"; "required": false; }; "position": { "alias": "position"; "required": false; }; "titleTemplate": { "alias": "titleTemplate"; "required": false; }; "showOn": { "alias": "showOn"; "required": false; }; "showAfter": { "alias": "showAfter"; "required": false; }; "callout": { "alias": "callout"; "required": false; }; "closable": { "alias": "closable"; "required": false; }; "offset": { "alias": "offset"; "required": false; }; "tooltipWidth": { "alias": "tooltipWidth"; "required": false; }; "tooltipHeight": { "alias": "tooltipHeight"; "required": false; }; "tooltipClass": { "alias": "tooltipClass"; "required": false; }; "tooltipThemeColor": { "alias": "tooltipThemeColor"; "required": false; }; "tooltipContentClass": { "alias": "tooltipContentClass"; "required": false; }; "collision": { "alias": "collision"; "required": false; }; "closeTitle": { "alias": "closeTitle"; "required": false; }; "tooltipTemplate": { "alias": "tooltipTemplate"; "required": false; }; }, {}, never, never, true, never>;
|
|
860
|
+
}
|
|
861
|
+
|
|
862
|
+
/**
|
|
863
|
+
* Use this utility array to access all Tooltip-related components and directives in a standalone Angular component.
|
|
864
|
+
*
|
|
865
|
+
* @example
|
|
866
|
+
* ```typescript
|
|
867
|
+
* import { Component } from '@angular/core';
|
|
868
|
+
* import { KENDO_TOOLTIP } from '@progress/kendo-angular-tooltip';
|
|
869
|
+
*
|
|
870
|
+
* @Component({
|
|
871
|
+
* selector: 'my-app',
|
|
872
|
+
* standalone: true,
|
|
873
|
+
* imports: [KENDO_TOOLTIP],
|
|
874
|
+
* template: `
|
|
875
|
+
* <div kendoTooltip>
|
|
876
|
+
* <button kendoButton title="Save">Save</button>
|
|
877
|
+
* </div>
|
|
878
|
+
* `
|
|
879
|
+
* })
|
|
880
|
+
* export class AppComponent {}
|
|
881
|
+
* ```
|
|
882
|
+
*/
|
|
883
|
+
declare const KENDO_TOOLTIP: readonly [typeof TooltipDirective, typeof TooltipContentComponent, typeof LocalizedMessagesDirective];
|
|
884
|
+
/**
|
|
885
|
+
* Use this utility array to access all Popover-related components and directives in a standalone Angular component.
|
|
886
|
+
*
|
|
887
|
+
* @example
|
|
888
|
+
* ```typescript
|
|
889
|
+
* import { Component } from '@angular/core';
|
|
890
|
+
* import { KENDO_POPOVER } from '@progress/kendo-angular-tooltip';
|
|
891
|
+
*
|
|
892
|
+
* @Component({
|
|
893
|
+
* selector: 'my-app',
|
|
894
|
+
* standalone: true,
|
|
895
|
+
* imports: [KENDO_POPOVER],
|
|
896
|
+
* template: `
|
|
897
|
+
* <div kendoPopoverAnchor [popover]="myPopover">
|
|
898
|
+
* <button kendoButton>Open Popover</button>
|
|
899
|
+
* </div>
|
|
900
|
+
* <kendo-popover #myPopover title="Popover Title" body="Popover Body">
|
|
901
|
+
* </kendo-popover>
|
|
902
|
+
* `
|
|
903
|
+
* })
|
|
904
|
+
* export class AppComponent {}
|
|
905
|
+
* ```
|
|
906
|
+
*/
|
|
907
|
+
declare const KENDO_POPOVER: readonly [typeof PopoverComponent, typeof PopoverActionsTemplateDirective, typeof PopoverBodyTemplateDirective, typeof PopoverTitleTemplateDirective, typeof PopoverAnchorDirective, typeof PopoverContainerDirective];
|
|
908
|
+
/**
|
|
909
|
+
* Use this utility array to access all `@progress/kendo-angular-tooltip`-related components and directives in a standalone Angular component.
|
|
910
|
+
*
|
|
911
|
+
* @example
|
|
912
|
+
* ```typescript
|
|
913
|
+
* import { Component } from '@angular/core';
|
|
914
|
+
* import { KENDO_TOOLTIPS } from '@progress/kendo-angular-tooltip';
|
|
915
|
+
*
|
|
916
|
+
* @Component({
|
|
917
|
+
* selector: 'my-app',
|
|
918
|
+
* standalone: true,
|
|
919
|
+
* imports: [KENDO_TOOLTIPS],
|
|
920
|
+
* template: `
|
|
921
|
+
* <div kendoTooltip>
|
|
922
|
+
* <button kendoButton title="Save">Save</button>
|
|
923
|
+
* </div>
|
|
924
|
+
*
|
|
925
|
+
* <div kendoPopoverAnchor [popover]="myPopover">
|
|
926
|
+
* <button kendoButton>Open Popover</button>
|
|
927
|
+
* </div>
|
|
928
|
+
* <kendo-popover #myPopover title="Popover Title" body="Popover Body">
|
|
929
|
+
* </kendo-popover>
|
|
930
|
+
* `
|
|
931
|
+
* })
|
|
932
|
+
* export class AppComponent {}
|
|
933
|
+
* ```
|
|
934
|
+
*/
|
|
935
|
+
declare const KENDO_TOOLTIPS: readonly [typeof TooltipDirective, typeof TooltipContentComponent, typeof LocalizedMessagesDirective, typeof PopoverComponent, typeof PopoverActionsTemplateDirective, typeof PopoverBodyTemplateDirective, typeof PopoverTitleTemplateDirective, typeof PopoverAnchorDirective, typeof PopoverContainerDirective];
|
|
936
|
+
|
|
937
|
+
/**
|
|
938
|
+
* Represents the [`NgModule`](link:site.data.urls.angular['ngmoduleapi'])
|
|
939
|
+
* definition for the Tooltip component.
|
|
940
|
+
*
|
|
941
|
+
* @example
|
|
942
|
+
* ```typescript
|
|
943
|
+
* import { TooltipModule } from '@progress/kendo-angular-tooltip';
|
|
944
|
+
* import { NgModule } from '@angular/core';
|
|
945
|
+
*
|
|
946
|
+
* @NgModule({
|
|
947
|
+
* declarations: [AppComponent],
|
|
948
|
+
* imports: [BrowserModule, TooltipModule],
|
|
949
|
+
* bootstrap: [AppComponent]
|
|
950
|
+
* })
|
|
951
|
+
* export class AppModule {}
|
|
952
|
+
* ```
|
|
953
|
+
*/
|
|
954
|
+
declare class TooltipModule {
|
|
955
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<TooltipModule, never>;
|
|
956
|
+
static ɵmod: i0.ɵɵNgModuleDeclaration<TooltipModule, never, [typeof TooltipDirective, typeof TooltipContentComponent, typeof LocalizedMessagesDirective], [typeof TooltipDirective, typeof TooltipContentComponent, typeof LocalizedMessagesDirective]>;
|
|
957
|
+
static ɵinj: i0.ɵɵInjectorDeclaration<TooltipModule>;
|
|
958
|
+
}
|
|
959
|
+
|
|
960
|
+
/**
|
|
961
|
+
* Represents the [`NgModule`](link:site.data.urls.angular['ngmoduleapi'])
|
|
962
|
+
* definition for the Popover component.
|
|
963
|
+
*
|
|
964
|
+
* @example
|
|
965
|
+
* ```typescript
|
|
966
|
+
* import { PopoverModule } from '@progress/kendo-angular-tooltip';
|
|
967
|
+
* import { NgModule } from '@angular/core';
|
|
968
|
+
* import { AppComponent } from './app.component';
|
|
969
|
+
*
|
|
970
|
+
* @NgModule({
|
|
971
|
+
* declarations: [AppComponent],
|
|
972
|
+
* imports: [BrowserModule, PopoverModule],
|
|
973
|
+
* bootstrap: [AppComponent]
|
|
974
|
+
* })
|
|
975
|
+
* export class AppModule {}
|
|
976
|
+
* ```
|
|
977
|
+
*/
|
|
978
|
+
declare class PopoverModule {
|
|
979
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<PopoverModule, never>;
|
|
980
|
+
static ɵmod: i0.ɵɵNgModuleDeclaration<PopoverModule, never, [typeof PopoverComponent, typeof PopoverActionsTemplateDirective, typeof PopoverBodyTemplateDirective, typeof PopoverTitleTemplateDirective, typeof PopoverAnchorDirective, typeof PopoverContainerDirective], [typeof PopoverComponent, typeof PopoverActionsTemplateDirective, typeof PopoverBodyTemplateDirective, typeof PopoverTitleTemplateDirective, typeof PopoverAnchorDirective, typeof PopoverContainerDirective]>;
|
|
981
|
+
static ɵinj: i0.ɵɵInjectorDeclaration<PopoverModule>;
|
|
982
|
+
}
|
|
983
|
+
|
|
984
|
+
/**
|
|
985
|
+
* Represents the [`NgModule`](link:site.data.urls.angular['ngmoduleapi'])
|
|
986
|
+
* definition for the Tooltips components.
|
|
987
|
+
*
|
|
988
|
+
* @example
|
|
989
|
+
* ```typescript
|
|
990
|
+
* import { TooltipsModule } from '@progress/kendo-angular-tooltip';
|
|
991
|
+
* import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
|
992
|
+
* import { NgModule } from '@angular/core';
|
|
993
|
+
*
|
|
994
|
+
* @NgModule({
|
|
995
|
+
* declarations: [AppComponent],
|
|
996
|
+
* imports: [BrowserModule, TooltipsModule],
|
|
997
|
+
* bootstrap: [AppComponent]
|
|
998
|
+
* })
|
|
999
|
+
* export class AppModule {}
|
|
1000
|
+
* ```
|
|
1001
|
+
*/
|
|
1002
|
+
declare class TooltipsModule {
|
|
1003
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<TooltipsModule, never>;
|
|
1004
|
+
static ɵmod: i0.ɵɵNgModuleDeclaration<TooltipsModule, never, [typeof TooltipDirective, typeof TooltipContentComponent, typeof LocalizedMessagesDirective, typeof PopoverComponent, typeof PopoverActionsTemplateDirective, typeof PopoverBodyTemplateDirective, typeof PopoverTitleTemplateDirective, typeof PopoverAnchorDirective, typeof PopoverContainerDirective], [typeof TooltipDirective, typeof TooltipContentComponent, typeof LocalizedMessagesDirective, typeof PopoverComponent, typeof PopoverActionsTemplateDirective, typeof PopoverBodyTemplateDirective, typeof PopoverTitleTemplateDirective, typeof PopoverAnchorDirective, typeof PopoverContainerDirective]>;
|
|
1005
|
+
static ɵinj: i0.ɵɵInjectorDeclaration<TooltipsModule>;
|
|
1006
|
+
}
|
|
1007
|
+
|
|
1008
|
+
export { KENDO_POPOVER, KENDO_TOOLTIP, KENDO_TOOLTIPS, LocalizedMessagesDirective, PopoverActionsTemplateDirective, PopoverAnchorDirective, PopoverBodyTemplateDirective, PopoverComponent, PopoverContainerDirective, PopoverHiddenEvent, PopoverHideEvent, PopoverModule, PopoverShowEvent, PopoverShownEvent, PopoverTitleTemplateDirective, TOOLTIP_SETTINGS, TooltipContentComponent, TooltipDirective, TooltipModule, TooltipSettings, TooltipsModule };
|
|
1009
|
+
export type { PopoverAnimation, PopoverDataFn, PopoverFn, PopoverShowOption, Position, ShowOption, TooltipThemeColor };
|