@progress/kendo-angular-tooltip 17.0.0-develop.9 → 17.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (42) hide show
  1. package/{esm2020 → esm2022}/localization/localized-messages.directive.mjs +13 -8
  2. package/{esm2020 → esm2022}/models/events.mjs +24 -0
  3. package/{esm2020 → esm2022}/package-metadata.mjs +2 -2
  4. package/{esm2020 → esm2022}/popover/anchor.directive.mjs +46 -41
  5. package/{esm2020 → esm2022}/popover/container.directive.mjs +58 -46
  6. package/{esm2020 → esm2022}/popover/directives-base.mjs +31 -15
  7. package/{esm2020 → esm2022}/popover/popover.component.mjs +145 -86
  8. package/{esm2020 → esm2022}/popover/popover.service.mjs +12 -8
  9. package/{esm2020 → esm2022}/popover/template-directives/actions-template.directive.mjs +4 -3
  10. package/{esm2020 → esm2022}/popover/template-directives/body-template.directive.mjs +4 -3
  11. package/{esm2020 → esm2022}/popover/template-directives/title-template.directive.mjs +4 -3
  12. package/{esm2020 → esm2022}/popover.module.mjs +4 -4
  13. package/{esm2020 → esm2022}/tooltip/tooltip.content.component.mjs +66 -48
  14. package/{esm2020 → esm2022}/tooltip/tooltip.directive.mjs +116 -62
  15. package/{esm2020 → esm2022}/tooltip/tooltip.settings.mjs +40 -3
  16. package/{esm2020 → esm2022}/tooltip.module.mjs +4 -4
  17. package/{esm2020 → esm2022}/tooltips.module.mjs +4 -4
  18. package/{fesm2020 → fesm2022}/progress-kendo-angular-tooltip.mjs +579 -342
  19. package/localization/localized-messages.directive.d.ts +1 -1
  20. package/models/animation.model.d.ts +1 -1
  21. package/models/functions.model.d.ts +2 -2
  22. package/models/popover-show-option.type.d.ts +1 -1
  23. package/models/position.type.d.ts +1 -1
  24. package/models/show.option.type.d.ts +1 -1
  25. package/package.json +14 -20
  26. package/popover/container.directive.d.ts +1 -1
  27. package/popover/directives-base.d.ts +1 -1
  28. package/popover/popover.component.d.ts +1 -1
  29. package/schematics/ngAdd/index.js +1 -1
  30. package/tooltip/tooltip.content.component.d.ts +1 -1
  31. package/tooltip/tooltip.directive.d.ts +1 -1
  32. package/fesm2015/progress-kendo-angular-tooltip.mjs +0 -2312
  33. /package/{esm2020 → esm2022}/constants.mjs +0 -0
  34. /package/{esm2020 → esm2022}/directives.mjs +0 -0
  35. /package/{esm2020 → esm2022}/index.mjs +0 -0
  36. /package/{esm2020 → esm2022}/models/animation.model.mjs +0 -0
  37. /package/{esm2020 → esm2022}/models/functions.model.mjs +0 -0
  38. /package/{esm2020 → esm2022}/models/popover-show-option.type.mjs +0 -0
  39. /package/{esm2020 → esm2022}/models/position.type.mjs +0 -0
  40. /package/{esm2020 → esm2022}/models/show.option.type.mjs +0 -0
  41. /package/{esm2020 → esm2022}/progress-kendo-angular-tooltip.mjs +0 -0
  42. /package/{esm2020 → esm2022}/utils.mjs +0 -0
@@ -1,2312 +0,0 @@
1
- /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2024 Progress Software Corporation. All rights reserved.
3
- * Licensed under commercial license. See LICENSE.md in the project root for more information
4
- *-------------------------------------------------------------------------------------------*/
5
- import * as i0 from '@angular/core';
6
- import { forwardRef, Directive, Input, Optional, EventEmitter, isDevMode, Component, HostBinding, Output, ViewChild, ContentChild, ElementRef, Injectable, InjectionToken, Inject, NgModule } from '@angular/core';
7
- import * as i1 from '@progress/kendo-angular-l10n';
8
- import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
9
- import { PreventableEvent, focusableSelector, Keys, isDocumentAvailable, closest, hasObservers, ResizeBatchService } from '@progress/kendo-angular-common';
10
- import { take, auditTime, filter } from 'rxjs/operators';
11
- import { Subscription, BehaviorSubject, Subject, combineLatest, fromEvent } from 'rxjs';
12
- import { validatePackage } from '@progress/kendo-licensing';
13
- import { NgIf, NgStyle, NgClass, NgTemplateOutlet } from '@angular/common';
14
- import * as i1$1 from '@progress/kendo-angular-popup';
15
- import { PopupService } from '@progress/kendo-angular-popup';
16
- import { xIcon } from '@progress/kendo-svg-icons';
17
- import { IconWrapperComponent, IconsService } from '@progress/kendo-angular-icons';
18
-
19
- /**
20
- * @hidden
21
- */
22
- class LocalizedMessagesDirective extends ComponentMessages {
23
- constructor(service) {
24
- super();
25
- this.service = service;
26
- }
27
- }
28
- LocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
29
- LocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: LocalizedMessagesDirective, isStandalone: true, selector: "[kendoTooltipLocalizedMessages]", inputs: { closeTitle: "closeTitle" }, providers: [
30
- {
31
- provide: ComponentMessages,
32
- useExisting: forwardRef(() => LocalizedMessagesDirective)
33
- }
34
- ], usesInheritance: true, ngImport: i0 });
35
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
36
- type: Directive,
37
- args: [{
38
- providers: [
39
- {
40
- provide: ComponentMessages,
41
- useExisting: forwardRef(() => LocalizedMessagesDirective)
42
- }
43
- ],
44
- selector: `[kendoTooltipLocalizedMessages]`,
45
- standalone: true
46
- }]
47
- }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; }, propDecorators: { closeTitle: [{
48
- type: Input
49
- }] } });
50
-
51
- /**
52
- * @hidden
53
- */
54
- const ERRORS = {
55
- popover: `Invalid value provided for the 'popover' property. The accepted data types are 'PopoverComponent' or 'PopoverFn'.`,
56
- templateData: `templateData must be a function, but received`,
57
- showOn: `Invalid value provided for the 'showOn' property. The available options are 'click', 'hover', 'focus' or 'none'.`
58
- };
59
-
60
- /**
61
- * Arguments for the `show` event. The `show` event fires when a popover is about
62
- * to be opened. If you cancel the event, the opening is prevented.
63
- */
64
- class PopoverShowEvent extends PreventableEvent {
65
- /**
66
- * @hidden
67
- * Constructs the event arguments for the `show` event.
68
- * @param anchor - The host element related to the popover.
69
- */
70
- constructor(anchor) {
71
- super();
72
- this.anchor = anchor;
73
- }
74
- }
75
- /**
76
- * Arguments for the `hide` event. The `hide` event fires when a popover is about
77
- * to be closed. If you cancel the event, the popover stays open.
78
- */
79
- class PopoverHideEvent extends PreventableEvent {
80
- /**
81
- * @hidden
82
- * Constructs the event arguments for the `hide` event.
83
- * @param anchor - The host element related to the popover.
84
- * @param popover - The popover element.
85
- */
86
- constructor(anchor, popover) {
87
- super();
88
- this.anchor = anchor;
89
- this.popover = popover;
90
- }
91
- }
92
- /**
93
- * Arguments for the `shown` event. The `shown` event fires after the popover has opened and its opening animation has finished.
94
- */
95
- class PopoverShownEvent {
96
- /**
97
- * @hidden
98
- * Constructs the event arguments for the `shown` event.
99
- * @param anchor - The host element related to the popover.
100
- * @param popover - The popover element.
101
- */
102
- constructor(anchor, popover) {
103
- this.anchor = anchor;
104
- this.popover = popover;
105
- }
106
- }
107
- /**
108
- * Arguments for the `hidden` event. The `hidden` event fires after the popover has closed and its closing animation has finished.
109
- */
110
- class PopoverHiddenEvent {
111
- /**
112
- * @hidden
113
- * Constructs the event arguments for the `hidden` event.
114
- * @param anchor - The host element related to the popover.
115
- */
116
- constructor(anchor) {
117
- this.anchor = anchor;
118
- }
119
- }
120
-
121
- /**
122
- * @hidden
123
- */
124
- let idx = 0;
125
- /**
126
- * @hidden
127
- */
128
- let popoverTitleIdx = 0;
129
- /**
130
- * @hidden
131
- */
132
- let popoverBodyIdx = 0;
133
- /**
134
- * @hidden
135
- */
136
- const getId = (prefix, idSource) => {
137
- switch (idSource) {
138
- case 'popoverTitle':
139
- return `${prefix}-${++popoverTitleIdx}`;
140
- case 'popoverBody':
141
- return `${prefix}-${++popoverBodyIdx}`;
142
- default:
143
- return `${prefix}-${++idx}`;
144
- }
145
- };
146
- /**
147
- * @hidden
148
- */
149
- function align(position, offset) {
150
- let anchorAlign = {};
151
- let popupAlign = {};
152
- let popupMargin = {};
153
- switch (position) {
154
- case 'top':
155
- anchorAlign = { horizontal: 'center', vertical: 'top' };
156
- popupAlign = { horizontal: 'center', vertical: 'bottom' };
157
- popupMargin = { horizontal: 0, vertical: offset };
158
- break;
159
- case 'bottom':
160
- anchorAlign = { horizontal: 'center', vertical: 'bottom' };
161
- popupAlign = { horizontal: 'center', vertical: 'top' };
162
- popupMargin = { horizontal: 0, vertical: offset };
163
- break;
164
- case 'right':
165
- anchorAlign = { horizontal: 'right', vertical: 'center' };
166
- popupAlign = { horizontal: 'left', vertical: 'center' };
167
- popupMargin = { horizontal: offset, vertical: 0 };
168
- break;
169
- case 'left':
170
- anchorAlign = { horizontal: 'left', vertical: 'center' };
171
- popupAlign = { horizontal: 'right', vertical: 'center' };
172
- popupMargin = { horizontal: offset, vertical: 0 };
173
- break;
174
- default: break;
175
- }
176
- return {
177
- anchorAlign,
178
- popupAlign,
179
- popupMargin
180
- };
181
- }
182
- /**
183
- * @hidden
184
- */
185
- function collision(inputcollision, position) {
186
- if (inputcollision) {
187
- return inputcollision;
188
- }
189
- if (position === 'top' || position === 'bottom') {
190
- return { horizontal: 'fit', vertical: 'flip' };
191
- }
192
- return { horizontal: 'flip', vertical: 'fit' };
193
- }
194
- function isDocumentNode(container) {
195
- return container.nodeType === 9;
196
- }
197
- /**
198
- * @hidden
199
- */
200
- function closestBySelector(element, selector) {
201
- if (element.closest) {
202
- return element.closest(selector);
203
- }
204
- const matches = Element.prototype.matches ?
205
- (el, sel) => el.matches(sel)
206
- : (el, sel) => el.msMatchesSelector(sel);
207
- let node = element;
208
- while (node && !isDocumentNode(node)) {
209
- if (matches(node, selector)) {
210
- return node;
211
- }
212
- node = node.parentNode;
213
- }
214
- }
215
- /**
216
- * @hidden
217
- */
218
- function contains(container, child) {
219
- if (!container) {
220
- return false;
221
- }
222
- if (isDocumentNode(container)) {
223
- return false;
224
- }
225
- if (container.contains) {
226
- return container.contains(child);
227
- }
228
- if (container.compareDocumentPosition) {
229
- return !!(container.compareDocumentPosition(child) & Node.DOCUMENT_POSITION_CONTAINED_BY);
230
- }
231
- }
232
- /**
233
- * @hidden
234
- */
235
- const hasParent = (node, parent) => {
236
- while (node && node !== parent) {
237
- node = node.parentNode;
238
- }
239
- return node;
240
- };
241
- /**
242
- * @hidden
243
- */
244
- function getCenterOffset(item, dir, size) {
245
- const rect = item.getBoundingClientRect();
246
- return rect[dir] + (rect[size] / 2);
247
- }
248
- /**
249
- * @hidden
250
- */
251
- function containsItem(collection, item) {
252
- return collection.indexOf(item) !== -1;
253
- }
254
- /**
255
- * @hidden
256
- */
257
- function getAllFocusableChildren(parent) {
258
- return parent.querySelectorAll(focusableSelector);
259
- }
260
- /**
261
- * @hidden
262
- */
263
- function getFirstAndLastFocusable(parent) {
264
- const all = getAllFocusableChildren(parent);
265
- const firstFocusable = all.length > 0 ? all[0] : parent;
266
- const lastFocusable = all.length > 0 ? all[all.length - 1] : parent;
267
- return [firstFocusable, lastFocusable];
268
- }
269
-
270
- /**
271
- * @hidden
272
- */
273
- const packageMetadata = {
274
- name: '@progress/kendo-angular-tooltip',
275
- productName: 'Kendo UI for Angular',
276
- productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
277
- publishDate: 1729174515,
278
- version: '17.0.0-develop.9',
279
- licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
280
- };
281
-
282
- /**
283
- * Represents a template that defines the content of the Popover title.
284
- *
285
- * To define the template, nest an `<ng-template>` tag
286
- * with the `kendoPopoverTitleTemplate` directive inside the `<kendo-popover>` tag.
287
- */
288
- class PopoverTitleTemplateDirective {
289
- constructor(templateRef) {
290
- this.templateRef = templateRef;
291
- }
292
- }
293
- PopoverTitleTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PopoverTitleTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
294
- PopoverTitleTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: PopoverTitleTemplateDirective, isStandalone: true, selector: "[kendoPopoverTitleTemplate]", ngImport: i0 });
295
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PopoverTitleTemplateDirective, decorators: [{
296
- type: Directive,
297
- args: [{
298
- selector: '[kendoPopoverTitleTemplate]',
299
- standalone: true
300
- }]
301
- }], ctorParameters: function () {
302
- return [{ type: i0.TemplateRef, decorators: [{
303
- type: Optional
304
- }] }];
305
- } });
306
-
307
- /**
308
- * Represents a template that defines the content of the Popover body.
309
- *
310
- * To define the template, nest an `<ng-template>` tag
311
- * with the `kendoPopoverBodyTemplate` directive inside the `<kendo-popover>` tag.
312
- */
313
- class PopoverBodyTemplateDirective {
314
- constructor(templateRef) {
315
- this.templateRef = templateRef;
316
- }
317
- }
318
- PopoverBodyTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PopoverBodyTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
319
- PopoverBodyTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: PopoverBodyTemplateDirective, isStandalone: true, selector: "[kendoPopoverBodyTemplate]", ngImport: i0 });
320
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PopoverBodyTemplateDirective, decorators: [{
321
- type: Directive,
322
- args: [{
323
- selector: '[kendoPopoverBodyTemplate]',
324
- standalone: true
325
- }]
326
- }], ctorParameters: function () {
327
- return [{ type: i0.TemplateRef, decorators: [{
328
- type: Optional
329
- }] }];
330
- } });
331
-
332
- /**
333
- * Represents a template that defines the content of the Popover actions.
334
- *
335
- * To define the template, nest an `<ng-template>` tag
336
- * with the `kendoPopoverActionsTemplate` directive inside the `<kendo-popover>` tag.
337
- */
338
- class PopoverActionsTemplateDirective {
339
- constructor(templateRef) {
340
- this.templateRef = templateRef;
341
- }
342
- }
343
- PopoverActionsTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PopoverActionsTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
344
- PopoverActionsTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: PopoverActionsTemplateDirective, isStandalone: true, selector: "[kendoPopoverActionsTemplate]", ngImport: i0 });
345
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PopoverActionsTemplateDirective, decorators: [{
346
- type: Directive,
347
- args: [{
348
- selector: '[kendoPopoverActionsTemplate]',
349
- standalone: true
350
- }]
351
- }], ctorParameters: function () {
352
- return [{ type: i0.TemplateRef, decorators: [{
353
- type: Optional
354
- }] }];
355
- } });
356
-
357
- /* eslint-disable @typescript-eslint/no-explicit-any */
358
- /**
359
- * Represents the [Kendo UI Popover component for Angular]({% slug overview_popover %}).
360
- * Used to display additional information that is related to a target element.
361
- *
362
- * @example
363
- * ```ts-no-run
364
- * <kendo-popover>
365
- * <ng-template kendoPopoverTitleTemplate>Foo Title</ng-template>
366
- * <ng-template kendoPopoverBodyTemplate>Foo Body</ng-template>
367
- * <ng-template kendoPopoverActionsTemplate>Foo Actions</ng-template>
368
- * </kendo-popover>
369
- * ```
370
- */
371
- class PopoverComponent {
372
- constructor(localization, renderer, element, zone) {
373
- this.localization = localization;
374
- this.renderer = renderer;
375
- this.element = element;
376
- this.zone = zone;
377
- /**
378
- * Specifies the position of the Popover in relation to its anchor element. [See example]({% slug positioning_popover %})
379
- *
380
- * The possible options are:
381
- * `top`
382
- * `bottom`
383
- * `right` (Default)
384
- * `left`
385
- */
386
- this.position = 'right';
387
- /**
388
- * Determines whether a callout will be rendered along the Popover. [See example]({% slug callout_popover %})
389
- *
390
- * @default true
391
- */
392
- this.callout = true;
393
- /**
394
- * Enables and configures the Popover animation. [See example]({% slug animations_popover %})
395
- *
396
- * The possible options are:
397
- *
398
- * * `boolean`&mdash;Enables the default animation
399
- * * `PopoverAnimation`&mdash;A configuration object which allows setting the `direction`, `duration` and `type` of the animation.
400
- *
401
- * @default false
402
- */
403
- this.animation = false;
404
- /**
405
- * @hidden
406
- * Determines the visibility of the Popover.
407
- */
408
- this.visible = false;
409
- /**
410
- * Fires before the Popover is about to be shown ([see example]({% slug events_popover %})).
411
- * The event is preventable. If canceled, the Popover will not be displayed. [See example]({% slug events_popover %})
412
- */
413
- this.show = new EventEmitter();
414
- /**
415
- * Fires after the Popover has been shown and the animation has ended. [See example]({% slug events_popover %})
416
- */
417
- this.shown = new EventEmitter();
418
- /**
419
- * Fires when the Popover is about to be hidden ([see example]({% slug events_popover %})).
420
- * The event is preventable. If canceled, the Popover will remain visible.
421
- */
422
- this.hide = new EventEmitter();
423
- /**
424
- * Fires after the Popover has been hidden and the animation has ended. [See example]({% slug events_popover %})
425
- */
426
- this.hidden = new EventEmitter();
427
- /**
428
- * @hidden
429
- */
430
- this.closeOnKeyDown = new EventEmitter();
431
- /**
432
- * @hidden
433
- */
434
- this._width = 'auto';
435
- /**
436
- * @hidden
437
- */
438
- this._height = 'auto';
439
- /**
440
- * @hidden
441
- */
442
- this.popoverId = '';
443
- this._offset = 6;
444
- this.subs = new Subscription();
445
- this._templateData = () => null;
446
- validatePackage(packageMetadata);
447
- }
448
- /**
449
- * Specifies the distance from the Popover to its anchor element in pixels.
450
- *
451
- * @default `6`
452
- */
453
- set offset(value) {
454
- this._offset = value;
455
- }
456
- get offset() {
457
- const calloutBuffer = 14;
458
- return this.callout
459
- ? calloutBuffer + this._offset
460
- : this._offset;
461
- }
462
- /**
463
- * Determines the width of the popover. Numeric values are treated as pixels.
464
- * @default 'auto'
465
- */
466
- set width(value) {
467
- this._width = typeof value === 'number' ? `${value}px` : value;
468
- }
469
- get width() {
470
- return this._width;
471
- }
472
- /**
473
- * Determines the height of the popover. Numeric values are treated as pixels.
474
- * @default 'auto'
475
- */
476
- set height(value) {
477
- this._height = typeof value === 'number' ? `${value}px` : value;
478
- }
479
- get height() {
480
- return this._height;
481
- }
482
- /**
483
- * Defines a callback function which returns custom data passed to the Popover templates.
484
- * It exposes the current anchor element as an argument. [See example](slug:templates_popover#toc-passing-data-to-templates)
485
- */
486
- set templateData(fn) {
487
- if (isDevMode && typeof fn !== 'function') {
488
- throw new Error(`${ERRORS.templateData} ${JSON.stringify(fn)}.`);
489
- }
490
- this._templateData = fn;
491
- }
492
- get templateData() {
493
- return this._templateData;
494
- }
495
- /**
496
- * @hidden
497
- */
498
- get isHidden() {
499
- return !this.visible;
500
- }
501
- /**
502
- * @hidden
503
- */
504
- get hasAttributeHidden() {
505
- return !this.visible;
506
- }
507
- ngOnInit() {
508
- this.popoverId = getId('k-popover');
509
- this.subs.add(this.localization.changes.subscribe(({ rtl }) => { this.direction = rtl ? 'rtl' : 'ltr'; }));
510
- this.subs.add(this.renderer.listen(this.element.nativeElement, 'keydown', event => this.onKeyDown(event)));
511
- }
512
- ngAfterViewInit() {
513
- this.zone.onStable.pipe(take(1)).subscribe(() => {
514
- if (this.visible) {
515
- const wrapper = this.popoverWrapper.nativeElement;
516
- const focusablePopoverChildren = getAllFocusableChildren(wrapper);
517
- if (focusablePopoverChildren.length > 0) {
518
- focusablePopoverChildren[0].focus();
519
- }
520
- this.setAriaAttributes(wrapper, focusablePopoverChildren);
521
- }
522
- });
523
- }
524
- ngOnDestroy() {
525
- this.subs.unsubscribe();
526
- }
527
- /**
528
- * @hidden
529
- */
530
- getCalloutPosition() {
531
- switch (this.position) {
532
- case 'top': return { 'k-callout-s': true };
533
- case 'bottom': return { 'k-callout-n': true };
534
- case 'left': return { 'k-callout-e': true };
535
- case 'right': return { 'k-callout-w': true };
536
- default: return { 'k-callout-s': true };
537
- }
538
- }
539
- /**
540
- * @hidden
541
- */
542
- onKeyDown(event) {
543
- const keyCode = event.keyCode;
544
- const target = event.target;
545
- if (keyCode === Keys.Tab) {
546
- this.keepFocusWithinComponent(target, event);
547
- }
548
- if (keyCode === Keys.Escape) {
549
- this.closeOnKeyDown.emit();
550
- }
551
- }
552
- keepFocusWithinComponent(target, event) {
553
- const wrapper = this.popoverWrapper.nativeElement;
554
- const [firstFocusable, lastFocusable] = getFirstAndLastFocusable(wrapper);
555
- const tabAfterLastFocusable = !event.shiftKey && target === lastFocusable;
556
- const shiftTabAfterFirstFocusable = event.shiftKey && target === firstFocusable;
557
- if (tabAfterLastFocusable) {
558
- event.preventDefault();
559
- firstFocusable.focus();
560
- }
561
- if (shiftTabAfterFirstFocusable) {
562
- event.preventDefault();
563
- lastFocusable.focus();
564
- }
565
- }
566
- setAriaAttributes(wrapper, focusablePopoverChildren) {
567
- if (this.titleTemplate) {
568
- const titleRef = this.titleTemplateWrapper.nativeElement;
569
- const focusableHeaderChildren = getAllFocusableChildren(titleRef).length > 0;
570
- if (focusableHeaderChildren) {
571
- const headerId = getId('k-popover-header', 'popoverTitle');
572
- this.renderer.setAttribute(titleRef, 'id', headerId);
573
- this.renderer.setAttribute(wrapper, 'aria-labelledby', headerId);
574
- }
575
- }
576
- if (this.bodyTemplate) {
577
- const bodyRef = this.bodyTemplateWrapper.nativeElement;
578
- const focusableBodyChildren = getAllFocusableChildren(bodyRef).length > 0;
579
- if (focusableBodyChildren) {
580
- const bodyId = getId('k-popover-body', 'popoverBody');
581
- this.renderer.setAttribute(bodyRef, 'id', bodyId);
582
- this.renderer.setAttribute(wrapper, 'aria-describedby', bodyId);
583
- }
584
- }
585
- this.renderer.setAttribute(wrapper, 'id', this.popoverId);
586
- this.renderer.setAttribute(wrapper, 'role', focusablePopoverChildren.length > 0 ? 'dialog' : 'tooltip');
587
- }
588
- }
589
- PopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PopoverComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
590
- PopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PopoverComponent, isStandalone: true, selector: "kendo-popover", inputs: { position: "position", offset: "offset", width: "width", height: "height", title: "title", subtitle: "subtitle", body: "body", callout: "callout", animation: "animation", templateData: "templateData" }, outputs: { show: "show", shown: "shown", hide: "hide", hidden: "hidden", closeOnKeyDown: "closeOnKeyDown" }, host: { properties: { "attr.dir": "this.direction", "class.k-hidden": "this.isHidden", "attr.aria-hidden": "this.hasAttributeHidden", "style.width": "this._width", "style.height": "this._height" } }, providers: [
591
- LocalizationService,
592
- {
593
- provide: L10N_PREFIX,
594
- useValue: 'kendo.popover'
595
- }
596
- ], queries: [{ propertyName: "titleTemplate", first: true, predicate: PopoverTitleTemplateDirective, descendants: true }, { propertyName: "bodyTemplate", first: true, predicate: PopoverBodyTemplateDirective, descendants: true }, { propertyName: "actionsTemplate", first: true, predicate: PopoverActionsTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "popoverWrapper", first: true, predicate: ["popoverWrapper"], descendants: true }, { propertyName: "titleTemplateWrapper", first: true, predicate: ["titleTemplateWrapper"], descendants: true }, { propertyName: "bodyTemplateWrapper", first: true, predicate: ["bodyTemplateWrapper"], descendants: true }], ngImport: i0, template: `
597
- <div #popoverWrapper *ngIf="visible" class="k-popover k-popup" [ngStyle]="{'width': width, 'height': height}">
598
- <div class="k-popover-callout" [ngClass]="getCalloutPosition()" *ngIf="callout"></div>
599
-
600
- <div class="k-popover-inner" *ngIf="callout; else noCallout">
601
- <ng-container *ngTemplateOutlet="noCallout"></ng-container>
602
- </div>
603
-
604
- <ng-template #noCallout>
605
- <div #titleTemplateWrapper *ngIf="titleTemplate || title" class="k-popover-header">
606
- <ng-template *ngIf="titleTemplate"
607
- [ngTemplateOutlet]="titleTemplate?.templateRef"
608
- [ngTemplateOutletContext]="{ $implicit: anchor, data: contextData }">
609
- </ng-template>
610
- <ng-container *ngIf="title && !titleTemplate">
611
- {{ title }}
612
- </ng-container>
613
- </div>
614
-
615
- <div #bodyTemplateWrapper *ngIf="bodyTemplate || body" class="k-popover-body">
616
- <ng-template *ngIf="bodyTemplate"
617
- [ngTemplateOutlet]="bodyTemplate?.templateRef"
618
- [ngTemplateOutletContext]="{ $implicit: anchor, data: contextData }">
619
- </ng-template>
620
- <ng-container *ngIf="body && !bodyTemplate">
621
- {{ body }}
622
- </ng-container>
623
- </div>
624
-
625
- <div *ngIf="actionsTemplate" class="k-popover-actions k-actions k-actions-stretched k-actions-horizontal">
626
- <ng-template *ngIf="actionsTemplate"
627
- [ngTemplateOutlet]="actionsTemplate?.templateRef"
628
- [ngTemplateOutletContext]="{ $implicit: anchor, data: contextData }">
629
- </ng-template>
630
- </div>
631
- </ng-template>
632
- </div>
633
- `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
634
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PopoverComponent, decorators: [{
635
- type: Component,
636
- args: [{
637
- selector: 'kendo-popover',
638
- providers: [
639
- LocalizationService,
640
- {
641
- provide: L10N_PREFIX,
642
- useValue: 'kendo.popover'
643
- }
644
- ],
645
- template: `
646
- <div #popoverWrapper *ngIf="visible" class="k-popover k-popup" [ngStyle]="{'width': width, 'height': height}">
647
- <div class="k-popover-callout" [ngClass]="getCalloutPosition()" *ngIf="callout"></div>
648
-
649
- <div class="k-popover-inner" *ngIf="callout; else noCallout">
650
- <ng-container *ngTemplateOutlet="noCallout"></ng-container>
651
- </div>
652
-
653
- <ng-template #noCallout>
654
- <div #titleTemplateWrapper *ngIf="titleTemplate || title" class="k-popover-header">
655
- <ng-template *ngIf="titleTemplate"
656
- [ngTemplateOutlet]="titleTemplate?.templateRef"
657
- [ngTemplateOutletContext]="{ $implicit: anchor, data: contextData }">
658
- </ng-template>
659
- <ng-container *ngIf="title && !titleTemplate">
660
- {{ title }}
661
- </ng-container>
662
- </div>
663
-
664
- <div #bodyTemplateWrapper *ngIf="bodyTemplate || body" class="k-popover-body">
665
- <ng-template *ngIf="bodyTemplate"
666
- [ngTemplateOutlet]="bodyTemplate?.templateRef"
667
- [ngTemplateOutletContext]="{ $implicit: anchor, data: contextData }">
668
- </ng-template>
669
- <ng-container *ngIf="body && !bodyTemplate">
670
- {{ body }}
671
- </ng-container>
672
- </div>
673
-
674
- <div *ngIf="actionsTemplate" class="k-popover-actions k-actions k-actions-stretched k-actions-horizontal">
675
- <ng-template *ngIf="actionsTemplate"
676
- [ngTemplateOutlet]="actionsTemplate?.templateRef"
677
- [ngTemplateOutletContext]="{ $implicit: anchor, data: contextData }">
678
- </ng-template>
679
- </div>
680
- </ng-template>
681
- </div>
682
- `,
683
- standalone: true,
684
- imports: [NgIf, NgStyle, NgClass, NgTemplateOutlet]
685
- }]
686
- }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { position: [{
687
- type: Input
688
- }], offset: [{
689
- type: Input
690
- }], width: [{
691
- type: Input
692
- }], height: [{
693
- type: Input
694
- }], direction: [{
695
- type: HostBinding,
696
- args: ['attr.dir']
697
- }], title: [{
698
- type: Input
699
- }], subtitle: [{
700
- type: Input
701
- }], body: [{
702
- type: Input
703
- }], callout: [{
704
- type: Input
705
- }], animation: [{
706
- type: Input
707
- }], templateData: [{
708
- type: Input
709
- }], isHidden: [{
710
- type: HostBinding,
711
- args: ['class.k-hidden']
712
- }], hasAttributeHidden: [{
713
- type: HostBinding,
714
- args: ['attr.aria-hidden']
715
- }], show: [{
716
- type: Output
717
- }], shown: [{
718
- type: Output
719
- }], hide: [{
720
- type: Output
721
- }], hidden: [{
722
- type: Output
723
- }], closeOnKeyDown: [{
724
- type: Output
725
- }], popoverWrapper: [{
726
- type: ViewChild,
727
- args: ['popoverWrapper']
728
- }], titleTemplateWrapper: [{
729
- type: ViewChild,
730
- args: ['titleTemplateWrapper']
731
- }], bodyTemplateWrapper: [{
732
- type: ViewChild,
733
- args: ['bodyTemplateWrapper']
734
- }], titleTemplate: [{
735
- type: ContentChild,
736
- args: [PopoverTitleTemplateDirective, { static: false }]
737
- }], bodyTemplate: [{
738
- type: ContentChild,
739
- args: [PopoverBodyTemplateDirective, { static: false }]
740
- }], actionsTemplate: [{
741
- type: ContentChild,
742
- args: [PopoverActionsTemplateDirective, { static: false }]
743
- }], _width: [{
744
- type: HostBinding,
745
- args: ['style.width']
746
- }], _height: [{
747
- type: HostBinding,
748
- args: ['style.height']
749
- }] } });
750
-
751
- /* eslint-disable @typescript-eslint/no-unused-vars */
752
- /* eslint-disable @typescript-eslint/no-explicit-any */
753
- const validShowOptions = ['hover', 'click', 'none', 'focus'];
754
- /**
755
- * @hidden
756
- */
757
- class PopoverDirectivesBase {
758
- constructor(ngZone, popupService, renderer) {
759
- this.ngZone = ngZone;
760
- this.popupService = popupService;
761
- this.renderer = renderer;
762
- /**
763
- * @hidden
764
- */
765
- this.anchor = null;
766
- this.subs = new Subscription();
767
- this._showOn = 'click';
768
- }
769
- /**
770
- * Specifies the popover instance that will be rendered.
771
- * Accepts a [`PopoverComponent`]({% slug api_tooltip_popovercomponent %}) instance or
772
- * a [`PopoverFn`]({% slug api_tooltip_popoverfn %}) callback which returns a [`PopoverComponent`]({% slug api_tooltip_popovercomponent %}) instance
773
- * depending on the current anchor element.
774
- *
775
- * [See example](slug:templates_popover#toc-passing-data-to-templates)
776
- */
777
- set popover(value) {
778
- if (value instanceof PopoverComponent || typeof value === `function`) {
779
- this._popover = value;
780
- }
781
- else {
782
- if (isDevMode) {
783
- throw new Error(ERRORS.popover);
784
- }
785
- }
786
- }
787
- get popover() {
788
- return this._popover;
789
- }
790
- /**
791
- * The event on which the Popover will be shown
792
- *
793
- * The supported values are:
794
- * - `click` (default) &mdash;The Popover will be shown when its `anchor` element is clicked.
795
- * - `hover`&mdash;The Popover will be shown when its `anchor` element is hovered.
796
- * - `focus`&mdash;The Popover will be shown when its `anchor` element is focused.
797
- * - `none`&mdash;The Popover will not be shown on user interaction. It could be rendered via the Popover API methods.
798
- */
799
- set showOn(value) {
800
- if (isDevMode && !containsItem(validShowOptions, value)) {
801
- throw new Error(ERRORS.showOn);
802
- }
803
- this._showOn = value;
804
- }
805
- get showOn() {
806
- return this._showOn;
807
- }
808
- ngAfterViewInit() {
809
- if (!isDocumentAvailable()) {
810
- return;
811
- }
812
- this.manageEvents();
813
- }
814
- ngOnDestroy() {
815
- this.closePopup();
816
- this.subs.unsubscribe();
817
- this._popupSubs && this._popupSubs.unsubscribe();
818
- if (this.disposeHoverOverListener) {
819
- this.disposeHoverOverListener();
820
- }
821
- if (this.disposeHoverOutListener) {
822
- this.disposeHoverOutListener();
823
- }
824
- if (this.disposeClickListener) {
825
- this.disposeClickListener();
826
- }
827
- if (this._focusInsideSub) {
828
- this._focusInsideSub.unsubscribe();
829
- }
830
- if (this._hideSub) {
831
- this._hideSub.unsubscribe();
832
- }
833
- if (this._popupOpenSub) {
834
- this._popupOpenSub.unsubscribe();
835
- }
836
- if (this._popupCloseSub) {
837
- this._popupCloseSub.unsubscribe();
838
- }
839
- }
840
- /**
841
- * Hides the Popover ([See example]({% slug programmaticcontrol_popover %})).
842
- */
843
- hide() {
844
- this.closePopup();
845
- }
846
- /**
847
- * @hidden
848
- */
849
- closePopup() {
850
- if (this.popupRef) {
851
- if (this.anchor) {
852
- this.renderer.removeAttribute(this.anchor, 'aria-describedby');
853
- }
854
- this.popupRef.close();
855
- this.popupRef = null;
856
- if (this.disposePopupHoverOutListener) {
857
- this.disposePopupHoverOutListener();
858
- }
859
- if (this.disposePopupHoverInListener) {
860
- this.disposePopupHoverInListener();
861
- }
862
- if (this.disposePopupFocusOutListener) {
863
- this.disposePopupFocusOutListener();
864
- }
865
- this._popupSubs.unsubscribe();
866
- }
867
- }
868
- /**
869
- * @hidden
870
- */
871
- openPopup(anchor) {
872
- this.anchor = anchor instanceof ElementRef ? anchor.nativeElement : anchor;
873
- const popoverComp = this.popover instanceof PopoverComponent ? this.popover : this.popover(this.anchor);
874
- const alignSettings = align(popoverComp.position, popoverComp.offset);
875
- const anchorAlign = alignSettings.anchorAlign;
876
- const popupAlign = alignSettings.popupAlign;
877
- const popupMargin = alignSettings.popupMargin;
878
- const _animation = popoverComp.animation;
879
- this.popupRef = this.popupService.open({
880
- anchor: { nativeElement: this.anchor },
881
- animate: _animation,
882
- content: PopoverComponent,
883
- popupAlign,
884
- anchorAlign,
885
- margin: popupMargin,
886
- popupClass: 'k-popup-transparent',
887
- collision: { horizontal: 'fit', vertical: 'fit' }
888
- });
889
- const popupInstance = this.popupRef.content.instance;
890
- this._popupSubs = new Subscription();
891
- if (anchor) {
892
- this._popupSubs.add(this.renderer.listen(this.anchor, 'keydown', event => this.onKeyDown(event)));
893
- this.renderer.setAttribute(this.anchor, 'aria-describedby', popupInstance.popoverId);
894
- }
895
- this._popupSubs.add(popupInstance.closeOnKeyDown.subscribe(() => {
896
- this.anchor.focus();
897
- this.hide();
898
- }));
899
- this.applySettings(this.popupRef.content, popoverComp);
900
- this.monitorPopup();
901
- this.initializeCompletionEvents(popoverComp, this.anchor);
902
- }
903
- /**
904
- * @hidden
905
- */
906
- isPrevented(anchorElement, show) {
907
- const popoverComp = this.popover instanceof PopoverComponent ? this.popover : this.popover(anchorElement);
908
- let eventArgs;
909
- // eslint-disable-next-line prefer-const
910
- eventArgs = this.initializeEvents(popoverComp, eventArgs, show, anchorElement);
911
- return eventArgs.isDefaultPrevented();
912
- }
913
- /**
914
- * @hidden
915
- */
916
- monitorPopup() {
917
- if (this.showOn === 'hover') {
918
- this.ngZone.runOutsideAngular(() => {
919
- const popup = this.popupRef.popupElement;
920
- this.disposePopupHoverInListener = this.renderer.listen(popup, 'mouseenter', _ => {
921
- this.ngZone.run(_ => this._popoverService.emitPopoverState(true));
922
- });
923
- this.disposePopupHoverOutListener = this.renderer.listen(popup, 'mouseleave', _ => {
924
- this.ngZone.run(_ => this._popoverService.emitPopoverState(false));
925
- });
926
- });
927
- }
928
- if (this.showOn === 'focus') {
929
- this.ngZone.runOutsideAngular(() => {
930
- const popup = this.popupRef.popupElement;
931
- this.disposePopupFocusOutListener = this.renderer.listen(popup, 'focusout', (e) => {
932
- const isInsidePopover = closest(e.relatedTarget, (node) => node.classList && node.classList.contains('k-popover'));
933
- if (!isInsidePopover) {
934
- this.ngZone.run(_ => this._popoverService.emitFocusInsidePopover(false));
935
- }
936
- });
937
- });
938
- }
939
- }
940
- applySettings(contentComponent, popover) {
941
- const content = contentComponent.instance;
942
- content.visible = true;
943
- content.anchor = this.anchor;
944
- content.position = popover.position;
945
- content.offset = popover.offset;
946
- content.width = popover.width;
947
- content.height = popover.height;
948
- content.title = popover.title;
949
- content.body = popover.body;
950
- content.callout = popover.callout;
951
- content.animation = popover.animation;
952
- content.contextData = popover.templateData(this.anchor);
953
- content.titleTemplate = popover.titleTemplate;
954
- content.bodyTemplate = popover.bodyTemplate;
955
- content.actionsTemplate = popover.actionsTemplate;
956
- this.popupRef.content.changeDetectorRef.detectChanges();
957
- }
958
- manageEvents() {
959
- this.ngZone.runOutsideAngular(() => {
960
- switch (this.showOn) {
961
- case 'hover':
962
- this.subscribeToShowEvents([{
963
- name: 'mouseenter', handler: this.mouseenterHandler
964
- }, {
965
- name: 'mouseleave', handler: this.mouseleaveHandler
966
- }]);
967
- break;
968
- case 'focus':
969
- this.subscribeToShowEvents([{
970
- name: 'focus', handler: this.focusHandler
971
- }, {
972
- name: 'blur', handler: this.blurHandler
973
- }]);
974
- break;
975
- case 'click':
976
- this.subscribeClick();
977
- break;
978
- default:
979
- break;
980
- }
981
- });
982
- }
983
- /**
984
- * @hidden
985
- */
986
- initializeEvents(popoverComp, eventArgs, show, anchorElement) {
987
- if (show) {
988
- eventArgs = new PopoverShowEvent(anchorElement);
989
- if (this.shouldEmitEvent(!!this.popupRef, 'show', popoverComp)) {
990
- this.ngZone.run(() => popoverComp.show.emit(eventArgs));
991
- }
992
- }
993
- else {
994
- eventArgs = new PopoverHideEvent(anchorElement, this.popupRef);
995
- if (this.shouldEmitEvent(!!this.popupRef, 'hide', popoverComp)) {
996
- this.ngZone.run(() => popoverComp.hide.emit(eventArgs));
997
- }
998
- }
999
- return eventArgs;
1000
- }
1001
- onKeyDown(event) {
1002
- const keyCode = event.keyCode;
1003
- if (keyCode === Keys.Escape) {
1004
- this.hide();
1005
- }
1006
- }
1007
- initializeCompletionEvents(popoverComp, _anchor) {
1008
- if (this.shouldEmitCompletionEvents('shown', popoverComp)) {
1009
- this.popupRef.popupOpen.subscribe(() => {
1010
- const eventArgs = new PopoverShownEvent(_anchor, this.popupRef);
1011
- popoverComp.shown.emit(eventArgs);
1012
- });
1013
- }
1014
- if (this.shouldEmitCompletionEvents('hidden', popoverComp)) {
1015
- this.popupRef.popupClose.subscribe(() => {
1016
- this.ngZone.run(_ => {
1017
- const eventArgs = new PopoverHiddenEvent(_anchor);
1018
- popoverComp.hidden.emit(eventArgs);
1019
- });
1020
- });
1021
- }
1022
- }
1023
- shouldEmitEvent(hasPopup, event, popoverComp) {
1024
- if ((event === 'show' && !hasPopup && hasObservers(popoverComp[event]))
1025
- || (event === 'hide' && hasPopup && hasObservers(popoverComp[event]))) {
1026
- return true;
1027
- }
1028
- return false;
1029
- }
1030
- shouldEmitCompletionEvents(event, popoverComp) {
1031
- if ((hasObservers(popoverComp[event]) && !this._popupOpenSub)
1032
- || (hasObservers(popoverComp[event]) && !this._popupCloseSub)) {
1033
- return true;
1034
- }
1035
- return false;
1036
- }
1037
- }
1038
- PopoverDirectivesBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PopoverDirectivesBase, deps: [{ token: i0.NgZone }, { token: i1$1.PopupService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
1039
- PopoverDirectivesBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: PopoverDirectivesBase, inputs: { popover: "popover", showOn: "showOn" }, ngImport: i0 });
1040
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PopoverDirectivesBase, decorators: [{
1041
- type: Directive,
1042
- args: [{}]
1043
- }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i1$1.PopupService }, { type: i0.Renderer2 }]; }, propDecorators: { popover: [{
1044
- type: Input
1045
- }], showOn: [{
1046
- type: Input
1047
- }] } });
1048
-
1049
- /**
1050
- * @hidden
1051
- */
1052
- class PopoverService {
1053
- constructor(ngZone) {
1054
- this.ngZone = ngZone;
1055
- this._pointerOverPopup = new BehaviorSubject(null);
1056
- this._pointerOverAnchor = new BehaviorSubject(null);
1057
- this._focusInsidePopover = new BehaviorSubject(null);
1058
- this._hidePopover = new Subject();
1059
- this.subs = new Subscription();
1060
- this.monitor();
1061
- }
1062
- ngOnDestroy() {
1063
- this.subs.unsubscribe();
1064
- }
1065
- get isPopoverHovered() {
1066
- return this._pointerOverPopup.asObservable();
1067
- }
1068
- emitPopoverState(isHovered) {
1069
- this.ngZone.run(_ => this._pointerOverPopup.next(isHovered));
1070
- }
1071
- get isAnchorHovered() {
1072
- return this._pointerOverAnchor.asObservable();
1073
- }
1074
- emitAnchorState(isHovered, anchor) {
1075
- this._isOrigin = this.originAnchor === anchor;
1076
- this.currentAnchor = anchor;
1077
- if (isHovered) {
1078
- this.originAnchor = anchor;
1079
- }
1080
- this.ngZone.run(_ => this._pointerOverAnchor.next(isHovered));
1081
- }
1082
- get isFocusInsidePopover() {
1083
- return this._focusInsidePopover.asObservable();
1084
- }
1085
- emitFocusInsidePopover(isFocused) {
1086
- this.ngZone.run(_ => this._focusInsidePopover.next(isFocused));
1087
- this._focusInsidePopover.next(null);
1088
- }
1089
- get hidePopover() {
1090
- return this._hidePopover.asObservable();
1091
- }
1092
- monitor() {
1093
- this.subs.add(combineLatest(this.isPopoverHovered, this.isAnchorHovered).pipe(
1094
- // `auditTime` is used because the `mouseleave` event is emitted before `mouseenter`
1095
- // i.e. there is a millisecond in which the pointer leaves the first target (e.g. anchor) and hasn't reached the second one (e.g. popup)
1096
- // resulting in both observables emitting `false`
1097
- auditTime(20)).subscribe(val => {
1098
- const [isPopoverHovered, isAnchorHovered] = val;
1099
- this._hidePopover.next([isPopoverHovered, isAnchorHovered, this._isOrigin, this.currentAnchor]);
1100
- }));
1101
- }
1102
- }
1103
- PopoverService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PopoverService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
1104
- PopoverService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PopoverService });
1105
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PopoverService, decorators: [{
1106
- type: Injectable
1107
- }], ctorParameters: function () { return [{ type: i0.NgZone }]; } });
1108
-
1109
- /* eslint-disable @typescript-eslint/no-explicit-any */
1110
- /**
1111
- * Represents the [`kendoPopoverAnchor`](slug:configuration_popover#toc-popover-anchor) directive.
1112
- * It is used to target an element, which should display a popover on interaction.
1113
- *
1114
- * @example
1115
- * ```ts-no-run
1116
- * <button kendoPopoverAnchor [popover]="myPopover">Show Popover</button>
1117
- * ```
1118
- */
1119
- class PopoverAnchorDirective extends PopoverDirectivesBase {
1120
- constructor(hostEl, ngZone, popupService, renderer, popoverService) {
1121
- super(ngZone, popupService, renderer);
1122
- this.hostEl = hostEl;
1123
- this.ngZone = ngZone;
1124
- this.popupService = popupService;
1125
- this.renderer = renderer;
1126
- this.popoverService = popoverService;
1127
- this.mouseenterHandler = () => {
1128
- this.controlVisibility(this.hostEl.nativeElement, true);
1129
- };
1130
- this.mouseleaveHandler = () => {
1131
- if (this.isPrevented(this.hostEl.nativeElement, false)) {
1132
- return;
1133
- }
1134
- if (!this._hideSub) {
1135
- this._hideSub = this.popoverService.hidePopover.subscribe((val) => {
1136
- const [isPopoverHovered, isAnchorHovered] = val;
1137
- if (!isPopoverHovered && !isAnchorHovered) {
1138
- this.hide();
1139
- }
1140
- });
1141
- }
1142
- };
1143
- this.focusHandler = () => {
1144
- this.controlVisibility(this.hostEl.nativeElement, true);
1145
- };
1146
- this.blurHandler = (args) => {
1147
- const event = args.domEvent;
1148
- if (this.isPrevented(this.hostEl.nativeElement, false)) {
1149
- return;
1150
- }
1151
- // from anchor to popup focus check
1152
- const isFocusInside = !!closest(event.relatedTarget, (node) => node.classList && node.classList.contains('k-popover'));
1153
- if (!isFocusInside) {
1154
- this.hide();
1155
- }
1156
- if (!this._focusInsideSub) {
1157
- // inside popup focus check
1158
- this._focusInsideSub = this.popoverService.isFocusInsidePopover.pipe(filter(v => v !== null)).subscribe((val) => {
1159
- if (!val) {
1160
- this.hide();
1161
- }
1162
- });
1163
- }
1164
- };
1165
- this._popoverService = this.popoverService;
1166
- }
1167
- ngOnChanges(changes) {
1168
- if (changes['showOn'] && !changes['showOn'].isFirstChange()) {
1169
- this.subs.unsubscribe();
1170
- if (this.disposeClickListener) {
1171
- this.disposeClickListener();
1172
- }
1173
- this.subs = new Subscription();
1174
- this.manageEvents();
1175
- }
1176
- }
1177
- /**
1178
- * Shows the Popover. [See example]({% slug programmaticcontrol_popover %})
1179
- */
1180
- show() {
1181
- if (this.popupRef) {
1182
- return;
1183
- }
1184
- this.ngZone.run(() => {
1185
- this.openPopup(this.hostEl);
1186
- });
1187
- this.popupRef.popupAnchorViewportLeave
1188
- .pipe(take(1))
1189
- .subscribe(() => this.hide());
1190
- }
1191
- /**
1192
- * Toggles the visibility of the Popover. [See example]({% slug programmaticcontrol_popover %})
1193
- */
1194
- toggle() {
1195
- if (this.popupRef) {
1196
- this.hide();
1197
- }
1198
- else {
1199
- this.show();
1200
- }
1201
- }
1202
- subscribeToShowEvents(arr) {
1203
- const hostEl = this.hostEl.nativeElement;
1204
- this.subs.add(this.renderer.listen(hostEl, arr[0].name, () => {
1205
- this.popoverService.emitAnchorState(true, hostEl);
1206
- arr[0].handler();
1207
- }));
1208
- this.subs.add(this.renderer.listen(hostEl, arr[1].name, (e) => {
1209
- this.popoverService.emitAnchorState(false, null);
1210
- arr[1].handler({ domEvent: e });
1211
- }));
1212
- }
1213
- subscribeClick() {
1214
- if (this.disposeClickListener) {
1215
- this.disposeClickListener();
1216
- }
1217
- this.disposeClickListener = this.renderer.listen(document, 'click', (e) => {
1218
- this.onClick(e);
1219
- });
1220
- }
1221
- /**
1222
- * @hidden
1223
- */
1224
- onClick(event) {
1225
- const isInsidePopup = !!closest(event.target, (node) => node.classList && node.classList.contains('k-popup'));
1226
- const isAnchor = !!closest(event.target, (node) => node === this.hostEl.nativeElement);
1227
- if (isInsidePopup || (this.popupRef && isAnchor)) {
1228
- return;
1229
- }
1230
- if (isAnchor) {
1231
- // on opening
1232
- this.controlVisibility(this.hostEl.nativeElement, true);
1233
- }
1234
- else {
1235
- // on closing
1236
- this.controlVisibility(this.hostEl.nativeElement, false);
1237
- }
1238
- }
1239
- controlVisibility(anchor, show) {
1240
- if (this.isPrevented(anchor, show)) {
1241
- return;
1242
- }
1243
- if (show) {
1244
- this.show();
1245
- }
1246
- else {
1247
- this.hide();
1248
- }
1249
- }
1250
- }
1251
- PopoverAnchorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PopoverAnchorDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i1$1.PopupService }, { token: i0.Renderer2 }, { token: PopoverService }], target: i0.ɵɵFactoryTarget.Directive });
1252
- PopoverAnchorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: PopoverAnchorDirective, isStandalone: true, selector: "[kendoPopoverAnchor]", providers: [PopoverService], exportAs: ["kendoPopoverAnchor"], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
1253
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PopoverAnchorDirective, decorators: [{
1254
- type: Directive,
1255
- args: [{
1256
- selector: '[kendoPopoverAnchor]',
1257
- exportAs: 'kendoPopoverAnchor',
1258
- providers: [PopoverService],
1259
- standalone: true
1260
- }]
1261
- }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i1$1.PopupService }, { type: i0.Renderer2 }, { type: PopoverService }]; } });
1262
-
1263
- /* eslint-disable @typescript-eslint/no-explicit-any */
1264
- /**
1265
- * Represents the [`kendoPopoverContainer`](slug:configuration_popover#toc-popover-container) directive.
1266
- * It is used to filter and target multiple elements, which should display a popover on interaction.
1267
- *
1268
- * @example
1269
- * ```ts-no-run
1270
- * <div kendoPopoverContainer [popover]="myPopover" filter=".has-popover">
1271
- * <button class="has-popover">Show Popover</button>
1272
- * <button>Button Without Popover</button>
1273
- * <button class="has-popover">Show Popover</button>
1274
- * </div>
1275
- * ```
1276
- */
1277
- class PopoverContainerDirective extends PopoverDirectivesBase {
1278
- constructor(wrapperEl, ngZone, popupService, renderer, popoverService) {
1279
- super(ngZone, popupService, renderer);
1280
- this.wrapperEl = wrapperEl;
1281
- this.ngZone = ngZone;
1282
- this.popupService = popupService;
1283
- this.renderer = renderer;
1284
- this.popoverService = popoverService;
1285
- this.mouseenterHandler = (anchor) => {
1286
- this.controlVisibility(anchor, true);
1287
- };
1288
- this.mouseleaveHandler = (args) => {
1289
- const anchor = args.anchor;
1290
- if (this.isPrevented(anchor, false)) {
1291
- return;
1292
- }
1293
- if (!this._hideSub) {
1294
- this._hideSub = this.popoverService.hidePopover.subscribe((val) => {
1295
- const [isPopoverHovered, , isOriginAnchor, currentAnchor] = val;
1296
- if (!isPopoverHovered && !isOriginAnchor) {
1297
- this.hide();
1298
- if (!isOriginAnchor && currentAnchor) {
1299
- this.show(currentAnchor);
1300
- }
1301
- }
1302
- });
1303
- }
1304
- };
1305
- this.focusHandler = (anchor) => {
1306
- this.controlVisibility(anchor, true);
1307
- };
1308
- this.blurHandler = (args) => {
1309
- const anchor = args.anchor;
1310
- const event = args.domEvent;
1311
- if (this.isPrevented(anchor, false)) {
1312
- return;
1313
- }
1314
- // from anchor to popup focus check
1315
- const isFocusInside = !!closest(event.relatedTarget, (node) => node.classList && node.classList.contains('k-popover'));
1316
- if (!isFocusInside) {
1317
- this.hide();
1318
- }
1319
- if (!this._focusInsideSub) {
1320
- // inside popup focus check
1321
- this._focusInsideSub = this.popoverService.isFocusInsidePopover.pipe(filter(v => v !== null)).subscribe((val) => {
1322
- if (!val && !isFocusInside) {
1323
- this.hide();
1324
- }
1325
- });
1326
- }
1327
- };
1328
- this._popoverService = this.popoverService;
1329
- }
1330
- /**
1331
- * Shows the Popover.
1332
- *
1333
- * @param anchor&mdash;Specifies the element that will be used as an anchor. The Popover opens relative to that element. [See example]({% slug programmaticcontrol_popover %})
1334
- */
1335
- show(anchor) {
1336
- if (this.popupRef) {
1337
- return;
1338
- }
1339
- this.ngZone.run(() => {
1340
- this.openPopup(anchor);
1341
- });
1342
- this.popupRef.popupAnchorViewportLeave
1343
- .pipe(take(1))
1344
- .subscribe(() => this.hide());
1345
- }
1346
- /**
1347
- * Toggles the visibility of the Popover. [See example]({% slug programmaticcontrol_popover %})
1348
- *
1349
- * @param anchor&mdash;Specifies the element that will be used as an anchor. The Popover opens relative to that element.
1350
- */
1351
- toggle(anchor) {
1352
- const previousAnchor = this.popupRef && this.popupRef.content.instance.anchor;
1353
- if (this.popupRef) {
1354
- this.hide();
1355
- if (previousAnchor !== anchor) {
1356
- this.show(anchor);
1357
- }
1358
- }
1359
- else {
1360
- this.show(anchor);
1361
- }
1362
- }
1363
- subscribeClick() {
1364
- if (this.disposeClickListener) {
1365
- this.disposeClickListener();
1366
- }
1367
- this.disposeClickListener = this.renderer.listen(document, 'click', (e) => {
1368
- const filterElement = closestBySelector(e.target, this.filter);
1369
- this.clickHandler(filterElement, e);
1370
- });
1371
- }
1372
- subscribeToShowEvents(arr) {
1373
- const filteredElements = Array.from(document.querySelectorAll(this.filter));
1374
- filteredElements.forEach((el) => {
1375
- this.subs.add(this.renderer.listen(el, arr[0].name, () => {
1376
- this.popoverService.emitAnchorState(true, el);
1377
- arr[0].handler(el);
1378
- }));
1379
- this.subs.add(this.renderer.listen(el, arr[1].name, (e) => {
1380
- this.popoverService.emitAnchorState(false, null);
1381
- arr[1].handler({ anchor: el, domEvent: e });
1382
- }));
1383
- });
1384
- }
1385
- clickHandler(anchor, event) {
1386
- const isInsidePopup = !!closest(event.target, (node) => node.classList && node.classList.contains('k-popup'));
1387
- const popupRefAnchor = this.popupRef && this.popupRef.content.instance.anchor;
1388
- const isOriginAnchor = !!closest(event.target, (node) => node === (popupRefAnchor ? popupRefAnchor : anchor));
1389
- if (this.showOn !== 'click' || isInsidePopup || (this.popupRef && isOriginAnchor)) {
1390
- return;
1391
- }
1392
- if (!anchor && this.popupRef) {
1393
- this.controlVisibility(anchor, false);
1394
- return;
1395
- }
1396
- if (isOriginAnchor) {
1397
- this.controlVisibility(anchor, true);
1398
- }
1399
- else if (this.popupRef) {
1400
- this.controlVisibility(anchor, false);
1401
- this.controlVisibility(anchor, true);
1402
- }
1403
- }
1404
- controlVisibility(anchor, show) {
1405
- if (this.isPrevented(anchor, show)) {
1406
- return;
1407
- }
1408
- if (show) {
1409
- this.show(anchor);
1410
- }
1411
- else {
1412
- this.hide();
1413
- }
1414
- }
1415
- }
1416
- PopoverContainerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PopoverContainerDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i1$1.PopupService }, { token: i0.Renderer2 }, { token: PopoverService }], target: i0.ɵɵFactoryTarget.Directive });
1417
- PopoverContainerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: PopoverContainerDirective, isStandalone: true, selector: "[kendoPopoverContainer]", inputs: { filter: "filter" }, providers: [PopoverService], exportAs: ["kendoPopoverContainer"], usesInheritance: true, ngImport: i0 });
1418
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PopoverContainerDirective, decorators: [{
1419
- type: Directive,
1420
- args: [{
1421
- selector: '[kendoPopoverContainer]',
1422
- exportAs: 'kendoPopoverContainer',
1423
- providers: [PopoverService],
1424
- standalone: true
1425
- }]
1426
- }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i1$1.PopupService }, { type: i0.Renderer2 }, { type: PopoverService }]; }, propDecorators: { filter: [{
1427
- type: Input
1428
- }] } });
1429
-
1430
- /**
1431
- * @hidden
1432
- */
1433
- class TooltipContentComponent {
1434
- constructor(content, localizationService) {
1435
- this.content = content;
1436
- this.localizationService = localizationService;
1437
- /**
1438
- * @hidden
1439
- */
1440
- this.xIcon = xIcon;
1441
- this.close = new EventEmitter();
1442
- this.hostRole = 'tooltip';
1443
- this.tooltipWidth = null;
1444
- this.tooltipHeight = null;
1445
- this.callout = true;
1446
- this.calloutStyles = (position, calloutSize, isFlip) => {
1447
- const styles = {};
1448
- const isVertical = position === 'top' || position === 'bottom';
1449
- const flipDeg = '180deg';
1450
- const zeroDeg = '0deg';
1451
- if (!isFlip) {
1452
- styles.transform = isVertical ? `rotateX(${zeroDeg})` : `rotateY(${zeroDeg})`;
1453
- return styles;
1454
- }
1455
- if (position === 'top') {
1456
- styles.bottom = 'unset';
1457
- }
1458
- else if (position === 'bottom') {
1459
- styles.top = 'unset';
1460
- }
1461
- else if (position === 'left') {
1462
- styles.right = 'unset';
1463
- }
1464
- else if (position === 'right') {
1465
- styles.left = 'unset';
1466
- }
1467
- styles[position] = `${-calloutSize}px`;
1468
- styles.transform = isVertical ? `rotateX(${flipDeg})` : `rotateY(${flipDeg})`;
1469
- return styles;
1470
- };
1471
- this.direction = localizationService.rtl ? 'rtl' : 'ltr';
1472
- }
1473
- get cssClasses() {
1474
- return 'k-tooltip';
1475
- }
1476
- get hostId() {
1477
- return this.tooltipId;
1478
- }
1479
- get className() {
1480
- return this.closable;
1481
- }
1482
- get cssPosition() {
1483
- return 'relative';
1484
- }
1485
- ngOnInit() {
1486
- this.tooltipId = getId('tooltip');
1487
- this.dynamicRTLSubscription = this.localizationService.changes
1488
- .subscribe(({ rtl }) => this.direction = rtl ? 'rtl' : 'ltr');
1489
- }
1490
- ngOnDestroy() {
1491
- if (this.dynamicRTLSubscription) {
1492
- this.dynamicRTLSubscription.unsubscribe();
1493
- }
1494
- }
1495
- get closeButtonTitle() {
1496
- return this.closeTitle || this.localizationService.get('closeTitle');
1497
- }
1498
- calloutPositionClass() {
1499
- return {
1500
- 'top': 'k-callout-s',
1501
- 'left': 'k-callout-e',
1502
- 'bottom': 'k-callout-n',
1503
- 'right': 'k-callout-w'
1504
- }[this.position];
1505
- }
1506
- onCloseClick(event) {
1507
- event.preventDefault();
1508
- this.close.emit();
1509
- }
1510
- updateCalloutPosition(position, isFlip) {
1511
- if (!this.callout) {
1512
- return;
1513
- }
1514
- const callout = this.content.nativeElement.querySelector('.k-callout');
1515
- const isVertical = position === 'top' || position === 'bottom';
1516
- const size = isVertical ? 'width' : 'height';
1517
- const dir = isVertical ? 'left' : 'top';
1518
- const offsetProperty = isVertical ? 'marginLeft' : 'marginTop';
1519
- const calloutSize = callout.getBoundingClientRect()[size];
1520
- const anchorCenter = getCenterOffset(this.anchor.nativeElement, dir, size);
1521
- const contentCenter = getCenterOffset(this.content.nativeElement, dir, size);
1522
- const diff = Math.abs(contentCenter - anchorCenter);
1523
- if (diff > 1 || diff === 0 || Math.round(diff) === 0) {
1524
- const newMargin = contentCenter - anchorCenter + (calloutSize / 2);
1525
- callout.style[offsetProperty] = `${-newMargin}px`;
1526
- }
1527
- const calloutStyles = this.calloutStyles(position, calloutSize, isFlip);
1528
- Object.keys(calloutStyles).forEach((style) => {
1529
- callout.style[style] = calloutStyles[style];
1530
- });
1531
- }
1532
- }
1533
- TooltipContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TooltipContentComponent, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
1534
- TooltipContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TooltipContentComponent, isStandalone: true, selector: "kendo-tooltip", inputs: { tooltipWidth: "tooltipWidth", tooltipHeight: "tooltipHeight", titleTemplate: "titleTemplate", anchor: "anchor", closable: "closable", templateRef: "templateRef", templateString: "templateString" }, outputs: { close: "close" }, host: { properties: { "attr.dir": "this.direction", "class": "this.cssClasses", "attr.role": "this.hostRole", "attr.id": "this.hostId", "class.k-tooltip-closable": "this.className", "style.position": "this.cssPosition", "style.width.px": "this.tooltipWidth", "style.height.px": "this.tooltipHeight" } }, providers: [
1535
- LocalizationService,
1536
- {
1537
- provide: L10N_PREFIX,
1538
- useValue: 'kendo.tooltip'
1539
- }
1540
- ], ngImport: i0, template: `
1541
- <ng-container kendoTooltipLocalizedMessages
1542
- i18n-closeTitle="kendo.tooltip.closeTitle|The title of the close button"
1543
- closeTitle="Close"
1544
- >
1545
- </ng-container>
1546
-
1547
- <div class="k-tooltip-content">
1548
- <div class="k-tooltip-title" *ngIf="titleTemplate">
1549
- <ng-template
1550
- [ngIf]="titleTemplate"
1551
- [ngTemplateOutlet]="titleTemplate"
1552
- [ngTemplateOutletContext]="{ $implicit: anchor, anchor: anchor }">
1553
- </ng-template>
1554
- </div>
1555
-
1556
- <ng-template
1557
- [ngIf]="templateRef"
1558
- [ngTemplateOutlet]="templateRef"
1559
- [ngTemplateOutletContext]="{ $implicit: anchor, anchor: anchor }">
1560
- </ng-template>
1561
- <ng-template
1562
- [ngIf]="templateString">
1563
- {{ templateString }}
1564
- </ng-template>
1565
- </div>
1566
-
1567
- <div *ngIf="closable" [attr.aria-hidden]="true" class="k-tooltip-button" (click)="onCloseClick($event)">
1568
- <a href="#" [attr.title]="closeButtonTitle" class="k-icon">
1569
- <kendo-icon-wrapper
1570
- name="x"
1571
- [svgIcon]="xIcon">
1572
- </kendo-icon-wrapper>
1573
- </a>
1574
- </div>
1575
-
1576
- <div class="k-callout" *ngIf="callout" [ngClass]="calloutPositionClass()"></div>
1577
- `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoTooltipLocalizedMessages]", inputs: ["closeTitle"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
1578
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TooltipContentComponent, decorators: [{
1579
- type: Component,
1580
- args: [{
1581
- selector: 'kendo-tooltip',
1582
- template: `
1583
- <ng-container kendoTooltipLocalizedMessages
1584
- i18n-closeTitle="kendo.tooltip.closeTitle|The title of the close button"
1585
- closeTitle="Close"
1586
- >
1587
- </ng-container>
1588
-
1589
- <div class="k-tooltip-content">
1590
- <div class="k-tooltip-title" *ngIf="titleTemplate">
1591
- <ng-template
1592
- [ngIf]="titleTemplate"
1593
- [ngTemplateOutlet]="titleTemplate"
1594
- [ngTemplateOutletContext]="{ $implicit: anchor, anchor: anchor }">
1595
- </ng-template>
1596
- </div>
1597
-
1598
- <ng-template
1599
- [ngIf]="templateRef"
1600
- [ngTemplateOutlet]="templateRef"
1601
- [ngTemplateOutletContext]="{ $implicit: anchor, anchor: anchor }">
1602
- </ng-template>
1603
- <ng-template
1604
- [ngIf]="templateString">
1605
- {{ templateString }}
1606
- </ng-template>
1607
- </div>
1608
-
1609
- <div *ngIf="closable" [attr.aria-hidden]="true" class="k-tooltip-button" (click)="onCloseClick($event)">
1610
- <a href="#" [attr.title]="closeButtonTitle" class="k-icon">
1611
- <kendo-icon-wrapper
1612
- name="x"
1613
- [svgIcon]="xIcon">
1614
- </kendo-icon-wrapper>
1615
- </a>
1616
- </div>
1617
-
1618
- <div class="k-callout" *ngIf="callout" [ngClass]="calloutPositionClass()"></div>
1619
- `,
1620
- providers: [
1621
- LocalizationService,
1622
- {
1623
- provide: L10N_PREFIX,
1624
- useValue: 'kendo.tooltip'
1625
- }
1626
- ],
1627
- standalone: true,
1628
- imports: [LocalizedMessagesDirective, NgIf, NgTemplateOutlet, IconWrapperComponent, NgClass]
1629
- }]
1630
- }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.LocalizationService }]; }, propDecorators: { direction: [{
1631
- type: HostBinding,
1632
- args: ['attr.dir']
1633
- }], close: [{
1634
- type: Output
1635
- }], cssClasses: [{
1636
- type: HostBinding,
1637
- args: ['class']
1638
- }], hostRole: [{
1639
- type: HostBinding,
1640
- args: ['attr.role']
1641
- }], hostId: [{
1642
- type: HostBinding,
1643
- args: ['attr.id']
1644
- }], className: [{
1645
- type: HostBinding,
1646
- args: ['class.k-tooltip-closable']
1647
- }], cssPosition: [{
1648
- type: HostBinding,
1649
- args: ['style.position']
1650
- }], tooltipWidth: [{
1651
- type: HostBinding,
1652
- args: ['style.width.px']
1653
- }, {
1654
- type: Input
1655
- }], tooltipHeight: [{
1656
- type: HostBinding,
1657
- args: ['style.height.px']
1658
- }, {
1659
- type: Input
1660
- }], titleTemplate: [{
1661
- type: Input
1662
- }], anchor: [{
1663
- type: Input
1664
- }], closable: [{
1665
- type: Input
1666
- }], templateRef: [{
1667
- type: Input
1668
- }], templateString: [{
1669
- type: Input
1670
- }] } });
1671
-
1672
- /**
1673
- * Obsolete. Provide the TooltipSettings class instead.
1674
- *
1675
- * @hidden
1676
- */
1677
- const TOOLTIP_SETTINGS = new InjectionToken('kendo-ui-tooltip-settings');
1678
- /**
1679
- * Provides a global configuration for the Kendo UI Tooltip. Once injected through
1680
- * the `AppComponent` constructor, the configuration properties can be overridden.
1681
- *
1682
- * @example
1683
- * ```ts-no-run
1684
- * import { TooltipSettings } from '@progress/kendo-angular-tooltip';
1685
- *
1686
- * _@Component({
1687
- * selector: 'my-app',
1688
- * template: `
1689
- * <div kendoTooltip>
1690
- * <button title="Saves the current document">Save</button>
1691
- * </div>`,
1692
- * providers: [{
1693
- * provide: TooltipSettings,
1694
- * useFactory: (): TooltipSettings => ({
1695
- * // Override default values of tooltips if wanted
1696
- * position: 'right'
1697
- * })
1698
- * }]
1699
- * })
1700
- * export class AppComponent { }
1701
- * ```
1702
- */
1703
- class TooltipSettings {
1704
- /**
1705
- * @hidden
1706
- */
1707
- // eslint-disable-next-line @typescript-eslint/no-empty-function
1708
- constructor() { }
1709
- }
1710
- TooltipSettings.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TooltipSettings, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
1711
- TooltipSettings.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TooltipSettings });
1712
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TooltipSettings, decorators: [{
1713
- type: Injectable
1714
- }], ctorParameters: function () { return []; } });
1715
-
1716
- /**
1717
- * Represents the [Kendo UI Tooltip directive for Angular]({% slug overview_tooltip %}).
1718
- * Used to display additional information that is related to an element.
1719
- *
1720
- * @example
1721
- * ```ts-no-run
1722
- * <div kendoTooltip>
1723
- * <a title="Tooltip title" href="foo">foo</a>
1724
- * </div>
1725
- * ```
1726
- */
1727
- class TooltipDirective {
1728
- constructor(tooltipWrapper, ngZone, renderer, popupService, settings, legacySettings) {
1729
- this.tooltipWrapper = tooltipWrapper;
1730
- this.ngZone = ngZone;
1731
- this.renderer = renderer;
1732
- this.popupService = popupService;
1733
- /**
1734
- * Specifies a selector for elements within a container which will display a tooltip
1735
- * ([see example]({% slug anchorelements_tooltip %})). The possible values include any
1736
- * DOM `selector`. The default value is `[title]`.
1737
- */
1738
- this.filter = '[title]';
1739
- /**
1740
- * Specifies the position of the Tooltip that is relative to the
1741
- * anchor element ([see example]({% slug positioning_tooltip %})).
1742
- *
1743
- * The possible values are:
1744
- * * `top` (default)
1745
- * * `bottom`
1746
- * * `left`
1747
- * * `right`
1748
- */
1749
- this.position = 'top';
1750
- /**
1751
- * Specifies the delay in milliseconds before the Tooltip is shown.
1752
- * * `100` (default) milliseconds.
1753
- */
1754
- this.showAfter = 100;
1755
- /**
1756
- * Specifies if the Тooltip will display a callout arrow.
1757
- *
1758
- * The possible values are:
1759
- * * `true` (default)
1760
- * * `false`
1761
- */
1762
- this.callout = true;
1763
- /**
1764
- * Specifies if the Тooltip will display a **Close** button
1765
- * ([see example]({% slug closable_tooltip %})).
1766
- *
1767
- * The possible values are:
1768
- * * `true`
1769
- * * `false`
1770
- */
1771
- this.closable = false;
1772
- /**
1773
- * Specifies the offset in pixels between the Tooltip and the anchor. Defaults to `6` pixels.
1774
- * If the `callout` property is set to `true`, the offset is rendered from the callout arrow.
1775
- * If the `callout` property is set to `false`, the offset is rendered from the content of the Tooltip.
1776
- */
1777
- this.offset = 6;
1778
- this.anchor = null;
1779
- this.keyboardNavigationSubscription = new Subscription();
1780
- this.validPositions = ['top', 'bottom', 'right', 'left'];
1781
- this.validShowOptions = ['hover', 'click', 'none'];
1782
- validatePackage(packageMetadata);
1783
- Object.assign(this, settings, legacySettings);
1784
- this.ngZone.runOutsideAngular(() => {
1785
- const wrapper = this.tooltipWrapper.nativeElement;
1786
- this.anchorTitleSubscription = fromEvent(wrapper, 'mouseover')
1787
- .pipe(filter(() => this.filter !== ''))
1788
- .subscribe((e) => {
1789
- const filterElement = closestBySelector(e.target, this.filter);
1790
- if (filterElement) {
1791
- this.hideElementTitle({ nativeElement: filterElement });
1792
- }
1793
- });
1794
- this.mouseOverSubscription = fromEvent(wrapper, 'mouseover')
1795
- .pipe(filter(() => this.filter !== ''))
1796
- .subscribe(e => this.onMouseOver(e));
1797
- this.mouseOutSubscription = fromEvent(wrapper, 'mouseout')
1798
- .subscribe(e => this.onMouseOut(e));
1799
- });
1800
- }
1801
- /**
1802
- * Sets the content of the Tooltip as a template reference
1803
- * ([see example]({% slug templates_tooltip %})).
1804
- */
1805
- set tooltipTemplate(value) {
1806
- this.template = value;
1807
- }
1808
- get tooltipTemplate() {
1809
- return this.template;
1810
- }
1811
- /**
1812
- * Shows the Tooltip.
1813
- * @param anchor&mdash; ElementRef|Element.
1814
- * Specifies the element that will be used as an anchor. The Tooltip opens relative to that element.
1815
- */
1816
- show(anchor) {
1817
- if (this.popupRef) {
1818
- return;
1819
- }
1820
- if (anchor instanceof Element) {
1821
- anchor = { nativeElement: anchor };
1822
- }
1823
- this.anchor = anchor;
1824
- if (this.showOn === 'hover') {
1825
- if (this.popupRef) {
1826
- return;
1827
- }
1828
- clearTimeout(this.showTimeout);
1829
- this.showTimeout = setTimeout(() => this.showContent(this.anchor), this.showAfter);
1830
- }
1831
- else {
1832
- this.hideElementTitle(this.anchor);
1833
- this.showContent(this.anchor);
1834
- }
1835
- }
1836
- /**
1837
- * Hides the Tooltip.
1838
- */
1839
- hide() {
1840
- clearTimeout(this.showTimeout);
1841
- const anchor = this.anchor && this.anchor.nativeElement;
1842
- if (anchor && anchor.getAttribute('data-title')) {
1843
- if (!anchor.getAttribute('title') && anchor.hasAttribute('title')) {
1844
- anchor.setAttribute('title', anchor.getAttribute('data-title'));
1845
- }
1846
- anchor.setAttribute('data-title', '');
1847
- }
1848
- if (this.popupMouseOutSubscription) {
1849
- this.popupMouseOutSubscription.unsubscribe();
1850
- }
1851
- if (this.closeClickSubscription) {
1852
- this.closeClickSubscription.unsubscribe();
1853
- }
1854
- this.closePopup();
1855
- }
1856
- /**
1857
- * Toggle visibility of the Tooltip.
1858
- *
1859
- * @param anchor&mdash; ElementRef|Element. Specifies the element that will be used as an anchor.
1860
- * @param show&mdash; Optional. Boolean. Specifies if the Tooltip will be rendered.
1861
- */
1862
- toggle(anchor, show) {
1863
- const previousAnchor = this.anchor && this.anchor.nativeElement;
1864
- if (anchor instanceof Element) {
1865
- anchor = { nativeElement: anchor };
1866
- }
1867
- if (previousAnchor !== anchor.nativeElement) {
1868
- this.hide();
1869
- }
1870
- if (previousAnchor === anchor.nativeElement && this.showOn === 'click') {
1871
- this.hide();
1872
- }
1873
- if (typeof show === 'undefined') {
1874
- show = !this.popupRef;
1875
- }
1876
- if (show) {
1877
- this.show(anchor);
1878
- }
1879
- else {
1880
- this.hide();
1881
- }
1882
- }
1883
- ngOnInit() {
1884
- if (this.showOn === undefined) {
1885
- this.showOn = 'hover';
1886
- }
1887
- this.keyboardNavigationSubscription.add(this.renderer.listen(this.tooltipWrapper.nativeElement, 'keydown', event => this.onKeyDown(event)));
1888
- this.verifyProperties();
1889
- }
1890
- ngOnChanges(changes) {
1891
- if (changes.showOn && isDocumentAvailable()) {
1892
- this.subscribeClick();
1893
- }
1894
- }
1895
- ngAfterViewChecked() {
1896
- if (!this.popupRef) {
1897
- return;
1898
- }
1899
- if (this.anchor &&
1900
- !hasParent(this.anchor.nativeElement || this.anchor, this.tooltipWrapper.nativeElement)) {
1901
- this.anchor = null;
1902
- this.hide();
1903
- }
1904
- }
1905
- ngOnDestroy() {
1906
- this.hide();
1907
- this.template = null;
1908
- this.anchorTitleSubscription.unsubscribe();
1909
- this.mouseOverSubscription.unsubscribe();
1910
- this.mouseOutSubscription.unsubscribe();
1911
- this.keyboardNavigationSubscription.unsubscribe();
1912
- if (this.mouseClickSubscription) {
1913
- this.mouseClickSubscription.unsubscribe();
1914
- }
1915
- if (this.popupPositionChangeSubscription) {
1916
- this.popupPositionChangeSubscription.unsubscribe();
1917
- }
1918
- if (this.popupMouseOutSubscription) {
1919
- this.popupMouseOutSubscription.unsubscribe();
1920
- }
1921
- }
1922
- showContent(anchorRef) {
1923
- if (!anchorRef.nativeElement.getAttribute('data-title') && !this.template) {
1924
- return;
1925
- }
1926
- this.ngZone.run(() => {
1927
- this.openPopup(anchorRef);
1928
- this.bindContent(this.popupRef.content, anchorRef);
1929
- });
1930
- this.popupRef.popupAnchorViewportLeave
1931
- .pipe(take(1))
1932
- .subscribe(() => this.hide());
1933
- }
1934
- bindContent(contentComponent, anchorRef) {
1935
- const content = contentComponent.instance;
1936
- this.closeClickSubscription = content.close
1937
- .subscribe(() => {
1938
- this.hide();
1939
- });
1940
- if (!this.template) {
1941
- content.templateString = this.anchor.nativeElement.getAttribute('data-title');
1942
- }
1943
- else {
1944
- content.templateRef = this.template;
1945
- }
1946
- if (this.titleTemplate) {
1947
- content.titleTemplate = this.titleTemplate;
1948
- }
1949
- content.closeTitle = this.closeTitle;
1950
- content.anchor = anchorRef;
1951
- content.callout = this.callout;
1952
- content.closable = this.closable;
1953
- content.position = this.position;
1954
- content.tooltipWidth = this.tooltipWidth;
1955
- content.tooltipHeight = this.tooltipHeight;
1956
- this.popupRef.content.changeDetectorRef.detectChanges();
1957
- }
1958
- hideElementTitle(elementRef) {
1959
- const element = elementRef.nativeElement;
1960
- if (element.getAttribute('title')) {
1961
- element.setAttribute('data-title', element.getAttribute('title'));
1962
- element.setAttribute('title', '');
1963
- }
1964
- }
1965
- openPopup(anchorRef) {
1966
- const alignSettings = align(this.position, this.offset);
1967
- const anchorAlign = alignSettings.anchorAlign;
1968
- const popupAlign = alignSettings.popupAlign;
1969
- const popupMargin = alignSettings.popupMargin;
1970
- this.popupRef = this.popupService.open({
1971
- anchor: anchorRef,
1972
- anchorAlign,
1973
- animate: false,
1974
- content: TooltipContentComponent,
1975
- collision: collision(this.collision, this.position),
1976
- margin: popupMargin,
1977
- popupAlign,
1978
- popupClass: 'k-popup-transparent'
1979
- });
1980
- if (this.tooltipClass) {
1981
- this.renderer.addClass(this.popupRef.popupElement, this.tooltipClass);
1982
- }
1983
- if (this.tooltipContentClass) {
1984
- this.renderer.addClass(this.popupRef.content.instance['content'].nativeElement, this.tooltipContentClass);
1985
- }
1986
- const popupInstance = this.popupRef.content.instance;
1987
- if (anchorRef) {
1988
- this.renderer.setAttribute(anchorRef.nativeElement, 'aria-labelledby', popupInstance.tooltipId);
1989
- }
1990
- if (popupInstance.callout) {
1991
- this.popupPositionChangeSubscription = this.popupRef.popupPositionChange
1992
- .subscribe(({ flip }) => {
1993
- const isFlip = flip.horizontal === true || flip.vertical === true;
1994
- popupInstance.updateCalloutPosition(this.position, isFlip);
1995
- });
1996
- }
1997
- if (this.showOn === 'hover') {
1998
- this.ngZone.runOutsideAngular(() => {
1999
- const popup = this.popupRef.popupElement;
2000
- this.popupMouseOutSubscription = fromEvent(popup, 'mouseout')
2001
- .subscribe((e) => this.onMouseOut(e));
2002
- });
2003
- }
2004
- }
2005
- closePopup() {
2006
- if (this.popupRef) {
2007
- if (this.anchor) {
2008
- this.renderer.removeAttribute(this.anchor.nativeElement, 'aria-labelledby');
2009
- }
2010
- this.popupRef.close();
2011
- this.popupRef = null;
2012
- }
2013
- if (this.popupPositionChangeSubscription) {
2014
- this.popupPositionChangeSubscription.unsubscribe();
2015
- }
2016
- }
2017
- subscribeClick() {
2018
- if (this.mouseClickSubscription) {
2019
- this.mouseClickSubscription.unsubscribe();
2020
- }
2021
- if (this.showOn === 'click') {
2022
- this.mouseClickSubscription = fromEvent(document, 'click')
2023
- .pipe(filter(() => this.filter !== ''))
2024
- .subscribe(e => this.onMouseClick(e, this.tooltipWrapper.nativeElement));
2025
- }
2026
- }
2027
- onMouseClick(e, wrapper) {
2028
- const target = e.target;
2029
- const filterElement = closestBySelector(target, this.filter);
2030
- const popup = this.popupRef && this.popupRef.popupElement;
2031
- if (popup) {
2032
- if (popup.contains(target)) {
2033
- return;
2034
- }
2035
- if (this.closable) {
2036
- return;
2037
- }
2038
- }
2039
- if (wrapper.contains(target) && filterElement) {
2040
- this.toggle(filterElement, true);
2041
- }
2042
- else if (popup) {
2043
- this.hide();
2044
- }
2045
- }
2046
- onKeyDown(event) {
2047
- const keyCode = event.keyCode;
2048
- const target = event.target;
2049
- if (this.popupRef) {
2050
- const tooltipId = this.popupRef.content.location.nativeElement.getAttribute('id');
2051
- const anchorLabelledBy = target.getAttribute('aria-labelledby');
2052
- if (keyCode === Keys.Escape && this.canCloseTooltip(target, tooltipId, anchorLabelledBy)) {
2053
- this.closePopup();
2054
- }
2055
- }
2056
- }
2057
- canCloseTooltip(target, tooltipId, anchorLabelledBy) {
2058
- const isIdEqualsLabel = tooltipId === anchorLabelledBy;
2059
- const filterElement = closestBySelector(target, this.filter);
2060
- const isTargetFocused = target === document.activeElement;
2061
- const isTargetInsideWrapper = this.tooltipWrapper.nativeElement.contains(target);
2062
- return isTargetInsideWrapper && filterElement && isTargetFocused && isIdEqualsLabel;
2063
- }
2064
- onMouseOver(e) {
2065
- const filterElement = closestBySelector(e.target, this.filter);
2066
- if (this.showOn !== 'hover') {
2067
- return;
2068
- }
2069
- if (filterElement) {
2070
- this.toggle(filterElement, true);
2071
- }
2072
- }
2073
- onMouseOut(e) {
2074
- if (this.showOn !== 'hover') {
2075
- return;
2076
- }
2077
- if (this.closable) {
2078
- return;
2079
- }
2080
- const popup = this.popupRef && this.popupRef.popupElement;
2081
- const relatedTarget = e.relatedTarget;
2082
- if (relatedTarget && this.anchor && contains(this.anchor.nativeElement, relatedTarget)) {
2083
- return;
2084
- }
2085
- if (relatedTarget && contains(popup, relatedTarget)) {
2086
- return;
2087
- }
2088
- this.hide();
2089
- }
2090
- verifyProperties() {
2091
- if (!isDevMode()) {
2092
- return;
2093
- }
2094
- if (!containsItem(this.validPositions, this.position)) {
2095
- throw new Error(`Invalid value provided for position property.The available options are 'top', 'bottom', 'left', or 'right'.`);
2096
- }
2097
- if (!containsItem(this.validShowOptions, this.showOn)) {
2098
- throw new Error(`Invalid value provided for showOn property.The available options are 'hover' or 'none'.`);
2099
- }
2100
- }
2101
- }
2102
- TooltipDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1$1.PopupService }, { token: TooltipSettings, optional: true }, { token: TOOLTIP_SETTINGS, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
2103
- TooltipDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", 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 });
2104
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TooltipDirective, decorators: [{
2105
- type: Directive,
2106
- args: [{
2107
- selector: '[kendoTooltip]',
2108
- exportAs: 'kendoTooltip',
2109
- standalone: true
2110
- }]
2111
- }], ctorParameters: function () {
2112
- return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1$1.PopupService }, { type: TooltipSettings, decorators: [{
2113
- type: Optional
2114
- }] }, { type: TooltipSettings, decorators: [{
2115
- type: Optional
2116
- }, {
2117
- type: Inject,
2118
- args: [TOOLTIP_SETTINGS]
2119
- }] }];
2120
- }, propDecorators: { filter: [{
2121
- type: Input
2122
- }], position: [{
2123
- type: Input
2124
- }], titleTemplate: [{
2125
- type: Input
2126
- }], showOn: [{
2127
- type: Input
2128
- }], showAfter: [{
2129
- type: Input
2130
- }], callout: [{
2131
- type: Input
2132
- }], closable: [{
2133
- type: Input
2134
- }], offset: [{
2135
- type: Input
2136
- }], tooltipWidth: [{
2137
- type: Input
2138
- }], tooltipHeight: [{
2139
- type: Input
2140
- }], tooltipClass: [{
2141
- type: Input
2142
- }], tooltipContentClass: [{
2143
- type: Input
2144
- }], collision: [{
2145
- type: Input
2146
- }], closeTitle: [{
2147
- type: Input
2148
- }], tooltipTemplate: [{
2149
- type: Input
2150
- }] } });
2151
-
2152
- /**
2153
- * Utility array that contains all `Tooltip` related components and directives
2154
- */
2155
- const KENDO_TOOLTIP = [
2156
- TooltipDirective,
2157
- TooltipContentComponent,
2158
- LocalizedMessagesDirective
2159
- ];
2160
- /**
2161
- * Utility array that contains all `Popover` related components and directives
2162
- */
2163
- const KENDO_POPOVER = [
2164
- PopoverComponent,
2165
- PopoverActionsTemplateDirective,
2166
- PopoverBodyTemplateDirective,
2167
- PopoverTitleTemplateDirective,
2168
- PopoverAnchorDirective,
2169
- PopoverContainerDirective
2170
- ];
2171
- /**
2172
- * Utility array that contains all `@progress/kendo-angular-tooltip` related components and directives
2173
- */
2174
- const KENDO_TOOLTIPS = [
2175
- ...KENDO_TOOLTIP,
2176
- ...KENDO_POPOVER
2177
- ];
2178
-
2179
- // IMPORTANT: NgModule export kept for backwards compatibility
2180
- /**
2181
- * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
2182
- * definition for the Tooltip component.
2183
- *
2184
- * The package exports:
2185
- * - `KendoTooltipDirective`&mdash;The Tooltip directive class.
2186
- *
2187
- * @example
2188
- *
2189
- * ```ts-no-run
2190
- * // Import the Tooltip module
2191
- * import { TooltipModule } from '@progress/kendo-angular-tooltip';
2192
- *
2193
- * // The browser platform with a compiler
2194
- * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
2195
- *
2196
- * import { NgModule } from '@angular/core';
2197
- *
2198
- * // Import the app component
2199
- * _@NgModule{{
2200
- * declarations: [AppComponent], // declare app component
2201
- * imports: [BrowserModule, TooltipModule], // import TooltipModule module
2202
- * bootstrap: [AppComponent]
2203
- * }}
2204
- * export class AppModule {}
2205
- *
2206
- * // Compile and launch the module
2207
- * platformBrowserDynamic().bootstrapModule(AppModule);
2208
- * ```
2209
- */
2210
- class TooltipModule {
2211
- }
2212
- TooltipModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
2213
- TooltipModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: TooltipModule, imports: [TooltipDirective, TooltipContentComponent, LocalizedMessagesDirective], exports: [TooltipDirective, TooltipContentComponent, LocalizedMessagesDirective] });
2214
- TooltipModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TooltipModule, providers: [PopupService, ResizeBatchService, IconsService], imports: [TooltipContentComponent] });
2215
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TooltipModule, decorators: [{
2216
- type: NgModule,
2217
- args: [{
2218
- imports: [...KENDO_TOOLTIP],
2219
- exports: [...KENDO_TOOLTIP],
2220
- providers: [PopupService, ResizeBatchService, IconsService]
2221
- }]
2222
- }] });
2223
-
2224
- // IMPORTANT: NgModule export kept for backwards compatibility
2225
- /**
2226
- * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
2227
- * definition for the Popover component.
2228
- *
2229
- * @example
2230
- *
2231
- * ```ts-no-run
2232
- * import { PopoverModule } from '@progress/kendo-angular-tooltip';
2233
- *
2234
- * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
2235
- * import { NgModule } from '@angular/core';
2236
- *
2237
- * import { AppComponent } from './app.component';
2238
- *
2239
- * _@NgModule({
2240
- * declarations: [AppComponent],
2241
- * imports: [BrowserModule, PopoverModule],
2242
- * bootstrap: [AppComponent]
2243
- * })
2244
- * export class AppModule {}
2245
- *
2246
- * platformBrowserDynamic().bootstrapModule(AppModule);
2247
- *
2248
- * ```
2249
- */
2250
- class PopoverModule {
2251
- }
2252
- PopoverModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
2253
- PopoverModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: PopoverModule, imports: [PopoverComponent, PopoverActionsTemplateDirective, PopoverBodyTemplateDirective, PopoverTitleTemplateDirective, PopoverAnchorDirective, PopoverContainerDirective], exports: [PopoverComponent, PopoverActionsTemplateDirective, PopoverBodyTemplateDirective, PopoverTitleTemplateDirective, PopoverAnchorDirective, PopoverContainerDirective] });
2254
- PopoverModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PopoverModule, providers: [PopupService, ResizeBatchService], imports: [PopoverComponent] });
2255
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PopoverModule, decorators: [{
2256
- type: NgModule,
2257
- args: [{
2258
- exports: [...KENDO_POPOVER],
2259
- imports: [...KENDO_POPOVER],
2260
- providers: [PopupService, ResizeBatchService]
2261
- }]
2262
- }] });
2263
-
2264
- // IMPORTANT: NgModule export kept for backwards compatibility
2265
- /**
2266
- * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
2267
- * definition for the Tooltips components.
2268
- *
2269
- * @example
2270
- *
2271
- * ```ts-no-run
2272
- * import { TooltipsModule } from '@progress/kendo-angular-tooltip';
2273
- *
2274
- * // The browser platform with a compiler
2275
- * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
2276
- *
2277
- * import { NgModule } from '@angular/core';
2278
- *
2279
- * // Import the app component
2280
- * _@NgModule{{
2281
- * declarations: [AppComponent], // declare app component
2282
- * imports: [BrowserModule, TooltipsModule], // import TooltipsModule module
2283
- * bootstrap: [AppComponent]
2284
- * }}
2285
- * export class AppModule {}
2286
- *
2287
- * // Compile and launch the module
2288
- * platformBrowserDynamic().bootstrapModule(AppModule);
2289
- * ```
2290
- */
2291
- class TooltipsModule {
2292
- }
2293
- TooltipsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TooltipsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
2294
- TooltipsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: TooltipsModule, imports: [TooltipDirective, TooltipContentComponent, LocalizedMessagesDirective, PopoverComponent, PopoverActionsTemplateDirective, PopoverBodyTemplateDirective, PopoverTitleTemplateDirective, PopoverAnchorDirective, PopoverContainerDirective], exports: [TooltipDirective, TooltipContentComponent, LocalizedMessagesDirective, PopoverComponent, PopoverActionsTemplateDirective, PopoverBodyTemplateDirective, PopoverTitleTemplateDirective, PopoverAnchorDirective, PopoverContainerDirective] });
2295
- TooltipsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TooltipsModule, providers: [PopupService, ResizeBatchService, IconsService], imports: [TooltipContentComponent, PopoverComponent] });
2296
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TooltipsModule, decorators: [{
2297
- type: NgModule,
2298
- args: [{
2299
- imports: [...KENDO_TOOLTIPS],
2300
- exports: [...KENDO_TOOLTIPS],
2301
- providers: [PopupService, ResizeBatchService, IconsService]
2302
- }]
2303
- }] });
2304
-
2305
- // Standalone Directives Arrays
2306
-
2307
- /**
2308
- * Generated bundle index. Do not edit.
2309
- */
2310
-
2311
- 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 };
2312
-