@progress/kendo-angular-tooltip 21.4.1 → 22.0.0-develop.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (30) hide show
  1. package/fesm2022/progress-kendo-angular-tooltip.mjs +51 -51
  2. package/package.json +11 -19
  3. package/popover/directives-base.d.ts +1 -1
  4. package/esm2022/constants.mjs +0 -12
  5. package/esm2022/directives.mjs +0 -101
  6. package/esm2022/index.mjs +0 -22
  7. package/esm2022/localization/localized-messages.directive.mjs +0 -44
  8. package/esm2022/models/animation.model.mjs +0 -5
  9. package/esm2022/models/events.mjs +0 -87
  10. package/esm2022/models/functions.model.mjs +0 -5
  11. package/esm2022/models/popover-show-option.type.mjs +0 -5
  12. package/esm2022/models/position.type.mjs +0 -5
  13. package/esm2022/models/show.option.type.mjs +0 -5
  14. package/esm2022/package-metadata.mjs +0 -16
  15. package/esm2022/popover/anchor.directive.mjs +0 -172
  16. package/esm2022/popover/container.directive.mjs +0 -190
  17. package/esm2022/popover/directives-base.mjs +0 -319
  18. package/esm2022/popover/popover.component.mjs +0 -562
  19. package/esm2022/popover/popover.service.mjs +0 -71
  20. package/esm2022/popover/template-directives/actions-template.directive.mjs +0 -38
  21. package/esm2022/popover/template-directives/body-template.directive.mjs +0 -38
  22. package/esm2022/popover/template-directives/title-template.directive.mjs +0 -38
  23. package/esm2022/popover.module.mjs +0 -47
  24. package/esm2022/progress-kendo-angular-tooltip.mjs +0 -8
  25. package/esm2022/tooltip/tooltip.content.component.mjs +0 -293
  26. package/esm2022/tooltip/tooltip.directive.mjs +0 -490
  27. package/esm2022/tooltip/tooltip.settings.mjs +0 -70
  28. package/esm2022/tooltip.module.mjs +0 -44
  29. package/esm2022/tooltips.module.mjs +0 -51
  30. package/esm2022/utils.mjs +0 -153
@@ -1,562 +0,0 @@
1
- /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2026 Progress Software Corporation. All rights reserved.
3
- * Licensed under commercial license. See LICENSE.md in the project root for more information
4
- *-------------------------------------------------------------------------------------------*/
5
- /* eslint-disable @typescript-eslint/no-explicit-any */
6
- import { Component, ContentChild, ElementRef, EventEmitter, HostBinding, Input, isDevMode, NgZone, Output, Renderer2, ViewChild } from '@angular/core';
7
- import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
8
- import { Subscription } from 'rxjs';
9
- import { validatePackage } from '@progress/kendo-licensing';
10
- import { packageMetadata } from '../package-metadata';
11
- import { ERRORS } from '../constants';
12
- import { PopoverTitleTemplateDirective } from './template-directives/title-template.directive';
13
- import { PopoverBodyTemplateDirective } from './template-directives/body-template.directive';
14
- import { PopoverActionsTemplateDirective } from './template-directives/actions-template.directive';
15
- import { Keys } from '@progress/kendo-angular-common';
16
- import { take } from 'rxjs/operators';
17
- import { getAllFocusableChildren, getFirstAndLastFocusable, getId } from '../utils';
18
- import { NgStyle, NgClass, NgTemplateOutlet } from '@angular/common';
19
- import * as i0 from "@angular/core";
20
- import * as i1 from "@progress/kendo-angular-l10n";
21
- /**
22
- * Represents the [Kendo UI Popover component for Angular]({% slug overview_popover %}).
23
- * Displays additional information related to a target element.
24
- *
25
- * @example
26
- * ```html
27
- * <kendo-popover>
28
- * <ng-template kendoPopoverTitleTemplate>Title</ng-template>
29
- * <ng-template kendoPopoverBodyTemplate>Body</ng-template>
30
- * <ng-template kendoPopoverActionsTemplate>Actions</ng-template>
31
- * </kendo-popover>
32
- * ```
33
- */
34
- export class PopoverComponent {
35
- localization;
36
- renderer;
37
- element;
38
- zone;
39
- /**
40
- * @hidden
41
- */
42
- anchor;
43
- /**
44
- * Specifies the position of the Popover relative to its anchor element. [See example]({% slug positioning_popover %}).
45
- *
46
- * @default 'right'
47
- */
48
- position = 'right';
49
- /**
50
- * Specifies the distance from the Popover to its anchor element in pixels.
51
- *
52
- * @default 6
53
- */
54
- set offset(value) {
55
- this._offset = value;
56
- }
57
- get offset() {
58
- const calloutBuffer = 14;
59
- return this.callout
60
- ? calloutBuffer + this._offset
61
- : this._offset;
62
- }
63
- /**
64
- * Determines the width of the Popover. Numeric values are treated as pixels.
65
- *
66
- * @default 'auto'
67
- */
68
- set width(value) {
69
- this._width = typeof value === 'number' ? `${value}px` : value;
70
- }
71
- get width() {
72
- return this._width;
73
- }
74
- /**
75
- * Determines the height of the Popover. Numeric values are treated as pixels.
76
- *
77
- * @default 'auto'
78
- */
79
- set height(value) {
80
- this._height = typeof value === 'number' ? `${value}px` : value;
81
- }
82
- get height() {
83
- return this._height;
84
- }
85
- /**
86
- * @hidden
87
- */
88
- direction;
89
- /**
90
- * Specifies the main header text of the Popover. If a `titleTemplate` is provided, it takes precedence.
91
- */
92
- title;
93
- /**
94
- * @hidden
95
- * Specifies the secondary header text of the Popover.
96
- *
97
- * If a `titleTemplate` is provided it would take precedence over the subtitle.
98
- */
99
- subtitle;
100
- /**
101
- * Represents the text rendered in the Popover body section. If a `bodyTemplate` is provided, it takes precedence.
102
- */
103
- body;
104
- /**
105
- * Determines whether a callout is rendered along the Popover. [See example]({% slug callout_popover %}).
106
- *
107
- * @default true
108
- */
109
- callout = true;
110
- /**
111
- * Enables and configures the Popover animation. [See example]({% slug animations_popover %}).
112
- *
113
- * Accepts a boolean to enable the default animation, or a `PopoverAnimation` object for custom settings.
114
- *
115
- * @default false
116
- */
117
- animation = false;
118
- /**
119
- * Defines a callback function that returns custom data for the Popover templates.
120
- * The function exposes the `anchor` element as an argument and returns an object that can be used in the templates. [See example](slug:templates_popover#toc-passing-data-to-templates).
121
- */
122
- set templateData(fn) {
123
- if (isDevMode && typeof fn !== 'function') {
124
- throw new Error(`${ERRORS.templateData} ${JSON.stringify(fn)}.`);
125
- }
126
- this._templateData = fn;
127
- }
128
- get templateData() {
129
- return this._templateData;
130
- }
131
- /**
132
- * @hidden
133
- * Determines the visibility of the Popover.
134
- */
135
- visible = false;
136
- /**
137
- * @hidden
138
- */
139
- get isHidden() {
140
- return !this.visible;
141
- }
142
- /**
143
- * @hidden
144
- */
145
- get hasAttributeHidden() {
146
- return !this.visible;
147
- }
148
- /**
149
- * Fires before the Popover is shown. The event is preventable. If canceled, the Popover will not display. [See example]({% slug events_popover %}).
150
- */
151
- show = new EventEmitter();
152
- /**
153
- * Fires after the Popover has been shown and the animation has ended. [See example]({% slug events_popover %}).
154
- */
155
- shown = new EventEmitter();
156
- /**
157
- * Fires when the Popover is about to be hidden. The event is preventable. If canceled, the Popover remains visible. [See example]({% slug events_popover %}).
158
- */
159
- hide = new EventEmitter();
160
- /**
161
- * Fires after the Popover has been hidden and the animation has ended. [See example]({% slug events_popover %}).
162
- */
163
- hidden = new EventEmitter();
164
- /**
165
- * @hidden
166
- */
167
- closeOnKeyDown = new EventEmitter();
168
- /**
169
- * @hidden
170
- */
171
- popoverWrapper;
172
- /**
173
- * @hidden
174
- */
175
- titleTemplateWrapper;
176
- /**
177
- * @hidden
178
- */
179
- bodyTemplateWrapper;
180
- /**
181
- * @hidden
182
- */
183
- titleTemplate;
184
- /**
185
- * @hidden
186
- */
187
- bodyTemplate;
188
- /**
189
- * @hidden
190
- */
191
- actionsTemplate;
192
- /**
193
- * @hidden
194
- */
195
- contextData;
196
- /**
197
- * @hidden
198
- */
199
- _width = 'auto';
200
- /**
201
- * @hidden
202
- */
203
- _height = 'auto';
204
- /**
205
- * @hidden
206
- */
207
- popoverId = '';
208
- _offset = 6;
209
- subs = new Subscription();
210
- constructor(localization, renderer, element, zone) {
211
- this.localization = localization;
212
- this.renderer = renderer;
213
- this.element = element;
214
- this.zone = zone;
215
- validatePackage(packageMetadata);
216
- }
217
- ngOnInit() {
218
- this.popoverId = getId('k-popover');
219
- this.subs.add(this.localization.changes.subscribe(({ rtl }) => { this.direction = rtl ? 'rtl' : 'ltr'; }));
220
- this.subs.add(this.renderer.listen(this.element.nativeElement, 'keydown', event => this.onKeyDown(event)));
221
- }
222
- ngAfterViewInit() {
223
- this.zone.onStable.pipe(take(1)).subscribe(() => {
224
- if (this.visible) {
225
- const wrapper = this.popoverWrapper.nativeElement;
226
- const focusablePopoverChildren = getAllFocusableChildren(wrapper);
227
- if (focusablePopoverChildren.length > 0) {
228
- focusablePopoverChildren[0].focus();
229
- }
230
- this.setAriaAttributes(wrapper, focusablePopoverChildren);
231
- }
232
- });
233
- }
234
- ngOnDestroy() {
235
- this.subs.unsubscribe();
236
- }
237
- /**
238
- * @hidden
239
- */
240
- getCalloutPosition() {
241
- switch (this.position) {
242
- case 'top': return { 'k-callout-s': true };
243
- case 'bottom': return { 'k-callout-n': true };
244
- case 'left': return { 'k-callout-e': true };
245
- case 'right': return { 'k-callout-w': true };
246
- default: return { 'k-callout-s': true };
247
- }
248
- }
249
- /**
250
- * @hidden
251
- */
252
- onKeyDown(event) {
253
- const keyCode = event.code;
254
- const target = event.target;
255
- if (keyCode === Keys.Tab) {
256
- this.keepFocusWithinComponent(target, event);
257
- }
258
- if (keyCode === Keys.Escape) {
259
- this.closeOnKeyDown.emit();
260
- }
261
- }
262
- _templateData = () => null;
263
- keepFocusWithinComponent(target, event) {
264
- const wrapper = this.popoverWrapper.nativeElement;
265
- const [firstFocusable, lastFocusable] = getFirstAndLastFocusable(wrapper);
266
- const tabAfterLastFocusable = !event.shiftKey && target === lastFocusable;
267
- const shiftTabAfterFirstFocusable = event.shiftKey && target === firstFocusable;
268
- if (tabAfterLastFocusable) {
269
- event.preventDefault();
270
- firstFocusable.focus();
271
- }
272
- if (shiftTabAfterFirstFocusable) {
273
- event.preventDefault();
274
- lastFocusable.focus();
275
- }
276
- }
277
- setAriaAttributes(wrapper, focusablePopoverChildren) {
278
- if (this.titleTemplate) {
279
- const titleRef = this.titleTemplateWrapper.nativeElement;
280
- const focusableHeaderChildren = getAllFocusableChildren(titleRef).length > 0;
281
- if (focusableHeaderChildren) {
282
- const headerId = getId('k-popover-header', 'popoverTitle');
283
- this.renderer.setAttribute(titleRef, 'id', headerId);
284
- this.renderer.setAttribute(wrapper, 'aria-labelledby', headerId);
285
- }
286
- }
287
- if (this.bodyTemplate) {
288
- const bodyRef = this.bodyTemplateWrapper.nativeElement;
289
- const focusableBodyChildren = getAllFocusableChildren(bodyRef).length > 0;
290
- if (focusableBodyChildren) {
291
- const bodyId = getId('k-popover-body', 'popoverBody');
292
- this.renderer.setAttribute(bodyRef, 'id', bodyId);
293
- this.renderer.setAttribute(wrapper, 'aria-describedby', bodyId);
294
- }
295
- }
296
- this.renderer.setAttribute(wrapper, 'id', this.popoverId);
297
- this.renderer.setAttribute(wrapper, 'role', focusablePopoverChildren.length > 0 ? 'dialog' : 'tooltip');
298
- }
299
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PopoverComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
300
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", 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: [
301
- LocalizationService,
302
- {
303
- provide: L10N_PREFIX,
304
- useValue: 'kendo.popover'
305
- }
306
- ], 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: `
307
- @if (visible) {
308
- <div #popoverWrapper class="k-popover k-popup" [ngStyle]="{'width': width, 'height': height}">
309
- @if (callout) {
310
- <div class="k-popover-callout" [ngClass]="getCalloutPosition()"></div>
311
- }
312
- @if (callout) {
313
- <div class="k-popover-inner">
314
- <ng-container *ngTemplateOutlet="noCallout"></ng-container>
315
- </div>
316
- } @else {
317
- @if (titleTemplate || title) {
318
- <div #titleTemplateWrapper class="k-popover-header">
319
- @if (titleTemplate) {
320
- <ng-template
321
- [ngTemplateOutlet]="titleTemplate?.templateRef"
322
- [ngTemplateOutletContext]="{ $implicit: anchor, data: contextData }">
323
- </ng-template>
324
- }
325
- @if (title && !titleTemplate) {
326
- {{ title }}
327
- }
328
- </div>
329
- }
330
- @if (bodyTemplate || body) {
331
- <div #bodyTemplateWrapper class="k-popover-body">
332
- @if (bodyTemplate) {
333
- <ng-template
334
- [ngTemplateOutlet]="bodyTemplate?.templateRef"
335
- [ngTemplateOutletContext]="{ $implicit: anchor, data: contextData }">
336
- </ng-template>
337
- }
338
- @if (body && !bodyTemplate) {
339
- {{ body }}
340
- }
341
- </div>
342
- }
343
- @if (actionsTemplate) {
344
- <div class="k-popover-actions k-actions k-actions-stretched k-actions-horizontal">
345
- @if (actionsTemplate) {
346
- <ng-template
347
- [ngTemplateOutlet]="actionsTemplate?.templateRef"
348
- [ngTemplateOutletContext]="{ $implicit: anchor, data: contextData }">
349
- </ng-template>
350
- }
351
- </div>
352
- }
353
- }
354
- <ng-template #noCallout>
355
- @if (titleTemplate || title) {
356
- <div #titleTemplateWrapper class="k-popover-header">
357
- @if (titleTemplate) {
358
- <ng-template
359
- [ngTemplateOutlet]="titleTemplate?.templateRef"
360
- [ngTemplateOutletContext]="{ $implicit: anchor, data: contextData }">
361
- </ng-template>
362
- }
363
- @if (title && !titleTemplate) {
364
- {{ title }}
365
- }
366
- </div>
367
- }
368
- @if (bodyTemplate || body) {
369
- <div #bodyTemplateWrapper class="k-popover-body">
370
- @if (bodyTemplate) {
371
- <ng-template
372
- [ngTemplateOutlet]="bodyTemplate?.templateRef"
373
- [ngTemplateOutletContext]="{ $implicit: anchor, data: contextData }">
374
- </ng-template>
375
- }
376
- @if (body && !bodyTemplate) {
377
- {{ body }}
378
- }
379
- </div>
380
- }
381
- @if (actionsTemplate) {
382
- <div class="k-popover-actions k-actions k-actions-stretched k-actions-horizontal">
383
- @if (actionsTemplate) {
384
- <ng-template
385
- [ngTemplateOutlet]="actionsTemplate?.templateRef"
386
- [ngTemplateOutletContext]="{ $implicit: anchor, data: contextData }">
387
- </ng-template>
388
- }
389
- </div>
390
- }
391
- </ng-template>
392
- </div>
393
- }
394
- `, isInline: true, dependencies: [{ 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"] }] });
395
- }
396
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PopoverComponent, decorators: [{
397
- type: Component,
398
- args: [{
399
- selector: 'kendo-popover',
400
- providers: [
401
- LocalizationService,
402
- {
403
- provide: L10N_PREFIX,
404
- useValue: 'kendo.popover'
405
- }
406
- ],
407
- template: `
408
- @if (visible) {
409
- <div #popoverWrapper class="k-popover k-popup" [ngStyle]="{'width': width, 'height': height}">
410
- @if (callout) {
411
- <div class="k-popover-callout" [ngClass]="getCalloutPosition()"></div>
412
- }
413
- @if (callout) {
414
- <div class="k-popover-inner">
415
- <ng-container *ngTemplateOutlet="noCallout"></ng-container>
416
- </div>
417
- } @else {
418
- @if (titleTemplate || title) {
419
- <div #titleTemplateWrapper class="k-popover-header">
420
- @if (titleTemplate) {
421
- <ng-template
422
- [ngTemplateOutlet]="titleTemplate?.templateRef"
423
- [ngTemplateOutletContext]="{ $implicit: anchor, data: contextData }">
424
- </ng-template>
425
- }
426
- @if (title && !titleTemplate) {
427
- {{ title }}
428
- }
429
- </div>
430
- }
431
- @if (bodyTemplate || body) {
432
- <div #bodyTemplateWrapper class="k-popover-body">
433
- @if (bodyTemplate) {
434
- <ng-template
435
- [ngTemplateOutlet]="bodyTemplate?.templateRef"
436
- [ngTemplateOutletContext]="{ $implicit: anchor, data: contextData }">
437
- </ng-template>
438
- }
439
- @if (body && !bodyTemplate) {
440
- {{ body }}
441
- }
442
- </div>
443
- }
444
- @if (actionsTemplate) {
445
- <div class="k-popover-actions k-actions k-actions-stretched k-actions-horizontal">
446
- @if (actionsTemplate) {
447
- <ng-template
448
- [ngTemplateOutlet]="actionsTemplate?.templateRef"
449
- [ngTemplateOutletContext]="{ $implicit: anchor, data: contextData }">
450
- </ng-template>
451
- }
452
- </div>
453
- }
454
- }
455
- <ng-template #noCallout>
456
- @if (titleTemplate || title) {
457
- <div #titleTemplateWrapper class="k-popover-header">
458
- @if (titleTemplate) {
459
- <ng-template
460
- [ngTemplateOutlet]="titleTemplate?.templateRef"
461
- [ngTemplateOutletContext]="{ $implicit: anchor, data: contextData }">
462
- </ng-template>
463
- }
464
- @if (title && !titleTemplate) {
465
- {{ title }}
466
- }
467
- </div>
468
- }
469
- @if (bodyTemplate || body) {
470
- <div #bodyTemplateWrapper class="k-popover-body">
471
- @if (bodyTemplate) {
472
- <ng-template
473
- [ngTemplateOutlet]="bodyTemplate?.templateRef"
474
- [ngTemplateOutletContext]="{ $implicit: anchor, data: contextData }">
475
- </ng-template>
476
- }
477
- @if (body && !bodyTemplate) {
478
- {{ body }}
479
- }
480
- </div>
481
- }
482
- @if (actionsTemplate) {
483
- <div class="k-popover-actions k-actions k-actions-stretched k-actions-horizontal">
484
- @if (actionsTemplate) {
485
- <ng-template
486
- [ngTemplateOutlet]="actionsTemplate?.templateRef"
487
- [ngTemplateOutletContext]="{ $implicit: anchor, data: contextData }">
488
- </ng-template>
489
- }
490
- </div>
491
- }
492
- </ng-template>
493
- </div>
494
- }
495
- `,
496
- standalone: true,
497
- imports: [NgStyle, NgClass, NgTemplateOutlet]
498
- }]
499
- }], ctorParameters: () => [{ type: i1.LocalizationService }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { position: [{
500
- type: Input
501
- }], offset: [{
502
- type: Input
503
- }], width: [{
504
- type: Input
505
- }], height: [{
506
- type: Input
507
- }], direction: [{
508
- type: HostBinding,
509
- args: ['attr.dir']
510
- }], title: [{
511
- type: Input
512
- }], subtitle: [{
513
- type: Input
514
- }], body: [{
515
- type: Input
516
- }], callout: [{
517
- type: Input
518
- }], animation: [{
519
- type: Input
520
- }], templateData: [{
521
- type: Input
522
- }], isHidden: [{
523
- type: HostBinding,
524
- args: ['class.k-hidden']
525
- }], hasAttributeHidden: [{
526
- type: HostBinding,
527
- args: ['attr.aria-hidden']
528
- }], show: [{
529
- type: Output
530
- }], shown: [{
531
- type: Output
532
- }], hide: [{
533
- type: Output
534
- }], hidden: [{
535
- type: Output
536
- }], closeOnKeyDown: [{
537
- type: Output
538
- }], popoverWrapper: [{
539
- type: ViewChild,
540
- args: ['popoverWrapper']
541
- }], titleTemplateWrapper: [{
542
- type: ViewChild,
543
- args: ['titleTemplateWrapper']
544
- }], bodyTemplateWrapper: [{
545
- type: ViewChild,
546
- args: ['bodyTemplateWrapper']
547
- }], titleTemplate: [{
548
- type: ContentChild,
549
- args: [PopoverTitleTemplateDirective, { static: false }]
550
- }], bodyTemplate: [{
551
- type: ContentChild,
552
- args: [PopoverBodyTemplateDirective, { static: false }]
553
- }], actionsTemplate: [{
554
- type: ContentChild,
555
- args: [PopoverActionsTemplateDirective, { static: false }]
556
- }], _width: [{
557
- type: HostBinding,
558
- args: ['style.width']
559
- }], _height: [{
560
- type: HostBinding,
561
- args: ['style.height']
562
- }] } });
@@ -1,71 +0,0 @@
1
- /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2026 Progress Software Corporation. All rights reserved.
3
- * Licensed under commercial license. See LICENSE.md in the project root for more information
4
- *-------------------------------------------------------------------------------------------*/
5
- import { Injectable, NgZone } from '@angular/core';
6
- import { BehaviorSubject, combineLatest, Subject, Subscription } from 'rxjs';
7
- import { auditTime } from 'rxjs/operators';
8
- import * as i0 from "@angular/core";
9
- /**
10
- * @hidden
11
- */
12
- export class PopoverService {
13
- ngZone;
14
- _pointerOverPopup = new BehaviorSubject(null);
15
- _pointerOverAnchor = new BehaviorSubject(null);
16
- _focusInsidePopover = new BehaviorSubject(null);
17
- _hidePopover = new Subject();
18
- _isOrigin;
19
- originAnchor;
20
- currentAnchor;
21
- subs = new Subscription();
22
- constructor(ngZone) {
23
- this.ngZone = ngZone;
24
- this.monitor();
25
- }
26
- ngOnDestroy() {
27
- this.subs.unsubscribe();
28
- }
29
- get isPopoverHovered() {
30
- return this._pointerOverPopup.asObservable();
31
- }
32
- emitPopoverState(isHovered) {
33
- this.ngZone.run(_ => this._pointerOverPopup.next(isHovered));
34
- }
35
- get isAnchorHovered() {
36
- return this._pointerOverAnchor.asObservable();
37
- }
38
- emitAnchorState(isHovered, anchor) {
39
- this._isOrigin = this.originAnchor === anchor;
40
- this.currentAnchor = anchor;
41
- if (isHovered) {
42
- this.originAnchor = anchor;
43
- }
44
- this.ngZone.run(_ => this._pointerOverAnchor.next(isHovered));
45
- }
46
- get isFocusInsidePopover() {
47
- return this._focusInsidePopover.asObservable();
48
- }
49
- emitFocusInsidePopover(isFocused) {
50
- this.ngZone.run(_ => this._focusInsidePopover.next(isFocused));
51
- this._focusInsidePopover.next(null);
52
- }
53
- get hidePopover() {
54
- return this._hidePopover.asObservable();
55
- }
56
- monitor() {
57
- this.subs.add(combineLatest(this.isPopoverHovered, this.isAnchorHovered).pipe(
58
- // `auditTime` is used because the `mouseleave` event is emitted before `mouseenter`
59
- // 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)
60
- // resulting in both observables emitting `false`
61
- auditTime(20)).subscribe(val => {
62
- const [isPopoverHovered, isAnchorHovered] = val;
63
- this._hidePopover.next([isPopoverHovered, isAnchorHovered, this._isOrigin, this.currentAnchor]);
64
- }));
65
- }
66
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PopoverService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
67
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PopoverService });
68
- }
69
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PopoverService, decorators: [{
70
- type: Injectable
71
- }], ctorParameters: () => [{ type: i0.NgZone }] });
@@ -1,38 +0,0 @@
1
- /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2026 Progress Software Corporation. All rights reserved.
3
- * Licensed under commercial license. See LICENSE.md in the project root for more information
4
- *-------------------------------------------------------------------------------------------*/
5
- import { Directive, Optional, TemplateRef } from '@angular/core';
6
- import * as i0 from "@angular/core";
7
- /**
8
- * Represents the Kendo UI Popover actions template directive for Angular.
9
- * Use the `kendoPopoverActionsTemplate` directive to define a custom actions template for the Popover component.
10
- *
11
- * To define the template, nest an `<ng-template>` tag
12
- * with the `kendoPopoverActionsTemplate` directive inside the `<kendo-popover>` tag.
13
- *
14
- * ```html
15
- * <kendo-popover>
16
- * <ng-template kendoPopoverActionsTemplate>
17
- * Custom Actions
18
- * </ng-template>
19
- * </kendo-popover>
20
- * ```
21
- */
22
- export class PopoverActionsTemplateDirective {
23
- templateRef;
24
- constructor(templateRef) {
25
- this.templateRef = templateRef;
26
- }
27
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PopoverActionsTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
28
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: PopoverActionsTemplateDirective, isStandalone: true, selector: "[kendoPopoverActionsTemplate]", ngImport: i0 });
29
- }
30
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PopoverActionsTemplateDirective, decorators: [{
31
- type: Directive,
32
- args: [{
33
- selector: '[kendoPopoverActionsTemplate]',
34
- standalone: true
35
- }]
36
- }], ctorParameters: () => [{ type: i0.TemplateRef, decorators: [{
37
- type: Optional
38
- }] }] });