@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.
- package/fesm2022/progress-kendo-angular-tooltip.mjs +51 -51
- package/package.json +11 -19
- package/popover/directives-base.d.ts +1 -1
- package/esm2022/constants.mjs +0 -12
- package/esm2022/directives.mjs +0 -101
- package/esm2022/index.mjs +0 -22
- package/esm2022/localization/localized-messages.directive.mjs +0 -44
- package/esm2022/models/animation.model.mjs +0 -5
- package/esm2022/models/events.mjs +0 -87
- package/esm2022/models/functions.model.mjs +0 -5
- package/esm2022/models/popover-show-option.type.mjs +0 -5
- package/esm2022/models/position.type.mjs +0 -5
- package/esm2022/models/show.option.type.mjs +0 -5
- package/esm2022/package-metadata.mjs +0 -16
- package/esm2022/popover/anchor.directive.mjs +0 -172
- package/esm2022/popover/container.directive.mjs +0 -190
- package/esm2022/popover/directives-base.mjs +0 -319
- package/esm2022/popover/popover.component.mjs +0 -562
- package/esm2022/popover/popover.service.mjs +0 -71
- package/esm2022/popover/template-directives/actions-template.directive.mjs +0 -38
- package/esm2022/popover/template-directives/body-template.directive.mjs +0 -38
- package/esm2022/popover/template-directives/title-template.directive.mjs +0 -38
- package/esm2022/popover.module.mjs +0 -47
- package/esm2022/progress-kendo-angular-tooltip.mjs +0 -8
- package/esm2022/tooltip/tooltip.content.component.mjs +0 -293
- package/esm2022/tooltip/tooltip.directive.mjs +0 -490
- package/esm2022/tooltip/tooltip.settings.mjs +0 -70
- package/esm2022/tooltip.module.mjs +0 -44
- package/esm2022/tooltips.module.mjs +0 -51
- package/esm2022/utils.mjs +0 -153
|
@@ -1,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
|
-
}] }] });
|