@progress/kendo-angular-tooltip 19.1.2-develop.4 → 19.1.2-develop.6
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/directives.d.ts +65 -3
- package/esm2022/directives.mjs +65 -3
- package/esm2022/models/events.mjs +11 -13
- package/esm2022/package-metadata.mjs +2 -2
- package/esm2022/popover/anchor.directive.mjs +2 -2
- package/esm2022/popover/container.directive.mjs +10 -12
- package/esm2022/popover/directives-base.mjs +4 -14
- package/esm2022/popover/popover.component.mjs +23 -34
- package/esm2022/popover/template-directives/actions-template.directive.mjs +10 -1
- package/esm2022/popover/template-directives/body-template.directive.mjs +10 -1
- package/esm2022/popover/template-directives/title-template.directive.mjs +10 -1
- package/esm2022/popover.module.mjs +3 -8
- package/esm2022/tooltip/tooltip.directive.mjs +29 -43
- package/esm2022/tooltip/tooltip.settings.mjs +19 -35
- package/esm2022/tooltip.module.mjs +6 -15
- package/esm2022/tooltips.module.mjs +5 -13
- package/fesm2022/progress-kendo-angular-tooltip.mjs +209 -197
- package/models/animation.model.d.ts +1 -1
- package/models/events.d.ts +11 -13
- package/models/functions.model.d.ts +4 -6
- package/models/popover-show-option.type.d.ts +7 -1
- package/models/position.type.d.ts +5 -5
- package/models/show.option.type.d.ts +4 -4
- package/package.json +7 -7
- package/popover/anchor.directive.d.ts +2 -2
- package/popover/container.directive.d.ts +10 -12
- package/popover/directives-base.d.ts +4 -14
- package/popover/popover.component.d.ts +23 -34
- package/popover/template-directives/actions-template.directive.d.ts +10 -1
- package/popover/template-directives/body-template.directive.d.ts +10 -1
- package/popover/template-directives/title-template.directive.d.ts +10 -1
- package/popover.module.d.ts +3 -8
- package/tooltip/tooltip.directive.d.ts +29 -43
- package/tooltip/tooltip.settings.d.ts +19 -35
- package/tooltip.module.d.ts +6 -15
- package/tooltips.module.d.ts +5 -13
package/directives.d.ts
CHANGED
@@ -12,14 +12,76 @@ import { PopoverTitleTemplateDirective } from "./popover/template-directives/tit
|
|
12
12
|
import { TooltipContentComponent } from "./tooltip/tooltip.content.component";
|
13
13
|
import { TooltipDirective } from "./tooltip/tooltip.directive";
|
14
14
|
/**
|
15
|
-
*
|
15
|
+
* Use this utility array to access all Tooltip-related components and directives in a standalone Angular component.
|
16
|
+
*
|
17
|
+
* @example
|
18
|
+
* ```typescript
|
19
|
+
* import { Component } from '@angular/core';
|
20
|
+
* import { KENDO_TOOLTIP } from '@progress/kendo-angular-tooltip';
|
21
|
+
*
|
22
|
+
* @Component({
|
23
|
+
* selector: 'my-app',
|
24
|
+
* standalone: true,
|
25
|
+
* imports: [KENDO_TOOLTIP],
|
26
|
+
* template: `
|
27
|
+
* <div kendoTooltip>
|
28
|
+
* <button kendoButton title="Save">Save</button>
|
29
|
+
* </div>
|
30
|
+
* `
|
31
|
+
* })
|
32
|
+
* export class AppComponent {}
|
33
|
+
* ```
|
16
34
|
*/
|
17
35
|
export declare const KENDO_TOOLTIP: readonly [typeof TooltipDirective, typeof TooltipContentComponent, typeof LocalizedMessagesDirective];
|
18
36
|
/**
|
19
|
-
*
|
37
|
+
* Use this utility array to access all Popover-related components and directives in a standalone Angular component.
|
38
|
+
*
|
39
|
+
* @example
|
40
|
+
* ```typescript
|
41
|
+
* import { Component } from '@angular/core';
|
42
|
+
* import { KENDO_POPOVER } from '@progress/kendo-angular-tooltip';
|
43
|
+
*
|
44
|
+
* @Component({
|
45
|
+
* selector: 'my-app',
|
46
|
+
* standalone: true,
|
47
|
+
* imports: [KENDO_POPOVER],
|
48
|
+
* template: `
|
49
|
+
* <div kendoPopoverAnchor [popover]="myPopover">
|
50
|
+
* <button kendoButton>Open Popover</button>
|
51
|
+
* </div>
|
52
|
+
* <kendo-popover #myPopover title="Popover Title" body="Popover Body">
|
53
|
+
* </kendo-popover>
|
54
|
+
* `
|
55
|
+
* })
|
56
|
+
* export class AppComponent {}
|
57
|
+
* ```
|
20
58
|
*/
|
21
59
|
export declare const KENDO_POPOVER: readonly [typeof PopoverComponent, typeof PopoverActionsTemplateDirective, typeof PopoverBodyTemplateDirective, typeof PopoverTitleTemplateDirective, typeof PopoverAnchorDirective, typeof PopoverContainerDirective];
|
22
60
|
/**
|
23
|
-
*
|
61
|
+
* Use this utility array to access all `@progress/kendo-angular-tooltip`-related components and directives in a standalone Angular component.
|
62
|
+
*
|
63
|
+
* @example
|
64
|
+
* ```typescript
|
65
|
+
* import { Component } from '@angular/core';
|
66
|
+
* import { KENDO_TOOLTIPS } from '@progress/kendo-angular-tooltip';
|
67
|
+
*
|
68
|
+
* @Component({
|
69
|
+
* selector: 'my-app',
|
70
|
+
* standalone: true,
|
71
|
+
* imports: [KENDO_TOOLTIPS],
|
72
|
+
* template: `
|
73
|
+
* <div kendoTooltip>
|
74
|
+
* <button kendoButton title="Save">Save</button>
|
75
|
+
* </div>
|
76
|
+
*
|
77
|
+
* <div kendoPopoverAnchor [popover]="myPopover">
|
78
|
+
* <button kendoButton>Open Popover</button>
|
79
|
+
* </div>
|
80
|
+
* <kendo-popover #myPopover title="Popover Title" body="Popover Body">
|
81
|
+
* </kendo-popover>
|
82
|
+
* `
|
83
|
+
* })
|
84
|
+
* export class AppComponent {}
|
85
|
+
* ```
|
24
86
|
*/
|
25
87
|
export declare const KENDO_TOOLTIPS: readonly [typeof TooltipDirective, typeof TooltipContentComponent, typeof LocalizedMessagesDirective, typeof PopoverComponent, typeof PopoverActionsTemplateDirective, typeof PopoverBodyTemplateDirective, typeof PopoverTitleTemplateDirective, typeof PopoverAnchorDirective, typeof PopoverContainerDirective];
|
package/esm2022/directives.mjs
CHANGED
@@ -12,7 +12,25 @@ import { PopoverTitleTemplateDirective } from "./popover/template-directives/tit
|
|
12
12
|
import { TooltipContentComponent } from "./tooltip/tooltip.content.component";
|
13
13
|
import { TooltipDirective } from "./tooltip/tooltip.directive";
|
14
14
|
/**
|
15
|
-
*
|
15
|
+
* Use this utility array to access all Tooltip-related components and directives in a standalone Angular component.
|
16
|
+
*
|
17
|
+
* @example
|
18
|
+
* ```typescript
|
19
|
+
* import { Component } from '@angular/core';
|
20
|
+
* import { KENDO_TOOLTIP } from '@progress/kendo-angular-tooltip';
|
21
|
+
*
|
22
|
+
* @Component({
|
23
|
+
* selector: 'my-app',
|
24
|
+
* standalone: true,
|
25
|
+
* imports: [KENDO_TOOLTIP],
|
26
|
+
* template: `
|
27
|
+
* <div kendoTooltip>
|
28
|
+
* <button kendoButton title="Save">Save</button>
|
29
|
+
* </div>
|
30
|
+
* `
|
31
|
+
* })
|
32
|
+
* export class AppComponent {}
|
33
|
+
* ```
|
16
34
|
*/
|
17
35
|
export const KENDO_TOOLTIP = [
|
18
36
|
TooltipDirective,
|
@@ -20,7 +38,27 @@ export const KENDO_TOOLTIP = [
|
|
20
38
|
LocalizedMessagesDirective
|
21
39
|
];
|
22
40
|
/**
|
23
|
-
*
|
41
|
+
* Use this utility array to access all Popover-related components and directives in a standalone Angular component.
|
42
|
+
*
|
43
|
+
* @example
|
44
|
+
* ```typescript
|
45
|
+
* import { Component } from '@angular/core';
|
46
|
+
* import { KENDO_POPOVER } from '@progress/kendo-angular-tooltip';
|
47
|
+
*
|
48
|
+
* @Component({
|
49
|
+
* selector: 'my-app',
|
50
|
+
* standalone: true,
|
51
|
+
* imports: [KENDO_POPOVER],
|
52
|
+
* template: `
|
53
|
+
* <div kendoPopoverAnchor [popover]="myPopover">
|
54
|
+
* <button kendoButton>Open Popover</button>
|
55
|
+
* </div>
|
56
|
+
* <kendo-popover #myPopover title="Popover Title" body="Popover Body">
|
57
|
+
* </kendo-popover>
|
58
|
+
* `
|
59
|
+
* })
|
60
|
+
* export class AppComponent {}
|
61
|
+
* ```
|
24
62
|
*/
|
25
63
|
export const KENDO_POPOVER = [
|
26
64
|
PopoverComponent,
|
@@ -31,7 +69,31 @@ export const KENDO_POPOVER = [
|
|
31
69
|
PopoverContainerDirective
|
32
70
|
];
|
33
71
|
/**
|
34
|
-
*
|
72
|
+
* Use this utility array to access all `@progress/kendo-angular-tooltip`-related components and directives in a standalone Angular component.
|
73
|
+
*
|
74
|
+
* @example
|
75
|
+
* ```typescript
|
76
|
+
* import { Component } from '@angular/core';
|
77
|
+
* import { KENDO_TOOLTIPS } from '@progress/kendo-angular-tooltip';
|
78
|
+
*
|
79
|
+
* @Component({
|
80
|
+
* selector: 'my-app',
|
81
|
+
* standalone: true,
|
82
|
+
* imports: [KENDO_TOOLTIPS],
|
83
|
+
* template: `
|
84
|
+
* <div kendoTooltip>
|
85
|
+
* <button kendoButton title="Save">Save</button>
|
86
|
+
* </div>
|
87
|
+
*
|
88
|
+
* <div kendoPopoverAnchor [popover]="myPopover">
|
89
|
+
* <button kendoButton>Open Popover</button>
|
90
|
+
* </div>
|
91
|
+
* <kendo-popover #myPopover title="Popover Title" body="Popover Body">
|
92
|
+
* </kendo-popover>
|
93
|
+
* `
|
94
|
+
* })
|
95
|
+
* export class AppComponent {}
|
96
|
+
* ```
|
35
97
|
*/
|
36
98
|
export const KENDO_TOOLTIPS = [
|
37
99
|
...KENDO_TOOLTIP,
|
@@ -4,18 +4,17 @@
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
5
5
|
import { PreventableEvent } from "@progress/kendo-angular-common";
|
6
6
|
/**
|
7
|
-
*
|
8
|
-
* to be opened. If you cancel the event, the opening is prevented.
|
7
|
+
* Provides arguments for the `show` event. The event fires when a popover is about to open. Cancel the event to prevent opening.
|
9
8
|
*/
|
10
9
|
export class PopoverShowEvent extends PreventableEvent {
|
11
10
|
/**
|
12
|
-
*
|
11
|
+
* Specifies the host element related to the Popover.
|
13
12
|
*/
|
14
13
|
anchor;
|
15
14
|
/**
|
16
15
|
* @hidden
|
17
16
|
* Constructs the event arguments for the `show` event.
|
18
|
-
* @param anchor - The host element related to the
|
17
|
+
* @param anchor - The host element related to the Popover.
|
19
18
|
*/
|
20
19
|
constructor(anchor) {
|
21
20
|
super();
|
@@ -23,16 +22,15 @@ export class PopoverShowEvent extends PreventableEvent {
|
|
23
22
|
}
|
24
23
|
}
|
25
24
|
/**
|
26
|
-
*
|
27
|
-
* to be closed. If you cancel the event, the popover stays open.
|
25
|
+
* Provides arguments for the `hide` event. The event fires when a popover is about to close. Cancel the event to keep it open.
|
28
26
|
*/
|
29
27
|
export class PopoverHideEvent extends PreventableEvent {
|
30
28
|
/**
|
31
|
-
*
|
29
|
+
* Specifies the host element related to the Popover.
|
32
30
|
*/
|
33
31
|
anchor;
|
34
32
|
/**
|
35
|
-
*
|
33
|
+
* Specifies the Popover element.
|
36
34
|
*/
|
37
35
|
popover;
|
38
36
|
/**
|
@@ -48,15 +46,15 @@ export class PopoverHideEvent extends PreventableEvent {
|
|
48
46
|
}
|
49
47
|
}
|
50
48
|
/**
|
51
|
-
*
|
49
|
+
* Provides arguments for the `shown` event. The event fires after the Popover has opened and its opening animation has finished.
|
52
50
|
*/
|
53
51
|
export class PopoverShownEvent {
|
54
52
|
/**
|
55
|
-
*
|
53
|
+
* Specifies the host element related to the Popover.
|
56
54
|
*/
|
57
55
|
anchor;
|
58
56
|
/**
|
59
|
-
*
|
57
|
+
* Specifies the Popover element.
|
60
58
|
*/
|
61
59
|
popover;
|
62
60
|
/**
|
@@ -71,11 +69,11 @@ export class PopoverShownEvent {
|
|
71
69
|
}
|
72
70
|
}
|
73
71
|
/**
|
74
|
-
*
|
72
|
+
* Provides arguments for the `hidden` event. The event fires after the popover has closed and its closing animation has finished.
|
75
73
|
*/
|
76
74
|
export class PopoverHiddenEvent {
|
77
75
|
/**
|
78
|
-
*
|
76
|
+
* Specifies the host element related to the Popover.
|
79
77
|
*/
|
80
78
|
anchor;
|
81
79
|
/**
|
@@ -10,7 +10,7 @@ export const packageMetadata = {
|
|
10
10
|
productName: 'Kendo UI for Angular',
|
11
11
|
productCode: 'KENDOUIANGULAR',
|
12
12
|
productCodes: ['KENDOUIANGULAR'],
|
13
|
-
publishDate:
|
14
|
-
version: '19.1.2-develop.
|
13
|
+
publishDate: 1750433771,
|
14
|
+
version: '19.1.2-develop.6',
|
15
15
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
16
16
|
};
|
@@ -15,10 +15,10 @@ import * as i1 from "@progress/kendo-angular-popup";
|
|
15
15
|
import * as i2 from "./popover.service";
|
16
16
|
/**
|
17
17
|
* Represents the [`kendoPopoverAnchor`](slug:configuration_popover#toc-popover-anchor) directive.
|
18
|
-
*
|
18
|
+
* Targets an element to display a popover on user interaction.
|
19
19
|
*
|
20
20
|
* @example
|
21
|
-
* ```
|
21
|
+
* ```html
|
22
22
|
* <button kendoPopoverAnchor [popover]="myPopover">Show Popover</button>
|
23
23
|
* ```
|
24
24
|
*/
|
@@ -15,14 +15,14 @@ import * as i1 from "@progress/kendo-angular-popup";
|
|
15
15
|
import * as i2 from "./popover.service";
|
16
16
|
/**
|
17
17
|
* Represents the [`kendoPopoverContainer`](slug:configuration_popover#toc-popover-container) directive.
|
18
|
-
*
|
18
|
+
* Filters and targets multiple elements to display a popover on user interaction.
|
19
19
|
*
|
20
20
|
* @example
|
21
|
-
* ```
|
21
|
+
* ```html
|
22
22
|
* <div kendoPopoverContainer [popover]="myPopover" filter=".has-popover">
|
23
|
-
*
|
24
|
-
*
|
25
|
-
*
|
23
|
+
* <button class="has-popover">Show Popover</button>
|
24
|
+
* <button>Button Without Popover</button>
|
25
|
+
* <button class="has-popover">Show Popover</button>
|
26
26
|
* </div>
|
27
27
|
* ```
|
28
28
|
*/
|
@@ -33,10 +33,8 @@ export class PopoverContainerDirective extends PopoverDirectivesBase {
|
|
33
33
|
renderer;
|
34
34
|
popoverService;
|
35
35
|
/**
|
36
|
-
* Specifies a selector for the elements that
|
37
|
-
*
|
38
|
-
* The possible values include any valid query selector.
|
39
|
-
* [See example](slug:configuration_popover#toc-popover-container)
|
36
|
+
* Specifies a selector for the elements that display a popover. Accepts a CSS selector string similar to a [querySelector method](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector).
|
37
|
+
* [See example](slug:configuration_popover#toc-popover-container).
|
40
38
|
*/
|
41
39
|
filter;
|
42
40
|
constructor(wrapperEl, ngZone, popupService, renderer, popoverService) {
|
@@ -51,7 +49,7 @@ export class PopoverContainerDirective extends PopoverDirectivesBase {
|
|
51
49
|
/**
|
52
50
|
* Shows the Popover.
|
53
51
|
*
|
54
|
-
* @param anchor
|
52
|
+
* @param anchor - The element used as an anchor. The Popover opens relative to this element. [See example]({% slug programmaticcontrol_popover %}).
|
55
53
|
*/
|
56
54
|
show(anchor) {
|
57
55
|
if (this.popupRef) {
|
@@ -65,9 +63,9 @@ export class PopoverContainerDirective extends PopoverDirectivesBase {
|
|
65
63
|
.subscribe(() => this.hide());
|
66
64
|
}
|
67
65
|
/**
|
68
|
-
* Toggles the visibility of the Popover. [See example]({% slug programmaticcontrol_popover %})
|
66
|
+
* Toggles the visibility of the Popover. [See example]({% slug programmaticcontrol_popover %}).
|
69
67
|
*
|
70
|
-
* @param anchor
|
68
|
+
* @param anchor - The element used as an anchor. The Popover opens relative to this element.
|
71
69
|
*/
|
72
70
|
toggle(anchor) {
|
73
71
|
const previousAnchor = this.popupRef && this.popupRef.content.instance.anchor;
|
@@ -23,12 +23,8 @@ export class PopoverDirectivesBase {
|
|
23
23
|
popupService;
|
24
24
|
renderer;
|
25
25
|
/**
|
26
|
-
* Specifies the popover instance
|
27
|
-
* Accepts a [`PopoverComponent`]({% slug api_tooltip_popovercomponent %}) instance or
|
28
|
-
* a [`PopoverFn`]({% slug api_tooltip_popoverfn %}) callback which returns a [`PopoverComponent`]({% slug api_tooltip_popovercomponent %}) instance
|
29
|
-
* depending on the current anchor element.
|
30
|
-
*
|
31
|
-
* [See example](slug:templates_popover#toc-passing-data-to-templates)
|
26
|
+
* Specifies the popover instance to render.
|
27
|
+
* Accepts a [`PopoverComponent`]({% slug api_tooltip_popovercomponent %}) instance or a [`PopoverFn`]({% slug api_tooltip_popoverfn %}) callback that returns a [`PopoverComponent`]({% slug api_tooltip_popovercomponent %}) instance for the current anchor element. [See example](slug:templates_popover#toc-passing-data-to-templates).
|
32
28
|
*/
|
33
29
|
set popover(value) {
|
34
30
|
if (value instanceof PopoverComponent || typeof value === `function`) {
|
@@ -44,13 +40,7 @@ export class PopoverDirectivesBase {
|
|
44
40
|
return this._popover;
|
45
41
|
}
|
46
42
|
/**
|
47
|
-
*
|
48
|
-
*
|
49
|
-
* The supported values are:
|
50
|
-
* - `click` (default) —The Popover will be shown when its `anchor` element is clicked.
|
51
|
-
* - `hover`—The Popover will be shown when its `anchor` element is hovered.
|
52
|
-
* - `focus`—The Popover will be shown when its `anchor` element is focused.
|
53
|
-
* - `none`—The Popover will not be shown on user interaction. It could be rendered via the Popover API methods.
|
43
|
+
* Specifies the mouse action that triggers the popover to show. [See example]({% slug programmaticcontrol_popover %}).
|
54
44
|
*/
|
55
45
|
set showOn(value) {
|
56
46
|
if (isDevMode && !containsItem(validShowOptions, value)) {
|
@@ -119,7 +109,7 @@ export class PopoverDirectivesBase {
|
|
119
109
|
}
|
120
110
|
}
|
121
111
|
/**
|
122
|
-
* Hides the Popover
|
112
|
+
* Hides the Popover. [See example]({% slug programmaticcontrol_popover %}).
|
123
113
|
*/
|
124
114
|
hide() {
|
125
115
|
this.closePopup();
|
@@ -20,14 +20,14 @@ import * as i0 from "@angular/core";
|
|
20
20
|
import * as i1 from "@progress/kendo-angular-l10n";
|
21
21
|
/**
|
22
22
|
* Represents the [Kendo UI Popover component for Angular]({% slug overview_popover %}).
|
23
|
-
*
|
23
|
+
* Displays additional information related to a target element.
|
24
24
|
*
|
25
25
|
* @example
|
26
|
-
* ```
|
26
|
+
* ```html
|
27
27
|
* <kendo-popover>
|
28
|
-
*
|
29
|
-
*
|
30
|
-
*
|
28
|
+
* <ng-template kendoPopoverTitleTemplate>Title</ng-template>
|
29
|
+
* <ng-template kendoPopoverBodyTemplate>Body</ng-template>
|
30
|
+
* <ng-template kendoPopoverActionsTemplate>Actions</ng-template>
|
31
31
|
* </kendo-popover>
|
32
32
|
* ```
|
33
33
|
*/
|
@@ -41,19 +41,15 @@ export class PopoverComponent {
|
|
41
41
|
*/
|
42
42
|
anchor;
|
43
43
|
/**
|
44
|
-
* Specifies the position of the Popover
|
44
|
+
* Specifies the position of the Popover relative to its anchor element. [See example]({% slug positioning_popover %}).
|
45
45
|
*
|
46
|
-
*
|
47
|
-
* `top`
|
48
|
-
* `bottom`
|
49
|
-
* `right` (Default)
|
50
|
-
* `left`
|
46
|
+
* @default 'right'
|
51
47
|
*/
|
52
48
|
position = 'right';
|
53
49
|
/**
|
54
50
|
* Specifies the distance from the Popover to its anchor element in pixels.
|
55
51
|
*
|
56
|
-
* @default
|
52
|
+
* @default 6
|
57
53
|
*/
|
58
54
|
set offset(value) {
|
59
55
|
this._offset = value;
|
@@ -65,7 +61,8 @@ export class PopoverComponent {
|
|
65
61
|
: this._offset;
|
66
62
|
}
|
67
63
|
/**
|
68
|
-
* Determines the width of the
|
64
|
+
* Determines the width of the Popover. Numeric values are treated as pixels.
|
65
|
+
*
|
69
66
|
* @default 'auto'
|
70
67
|
*/
|
71
68
|
set width(value) {
|
@@ -75,7 +72,8 @@ export class PopoverComponent {
|
|
75
72
|
return this._width;
|
76
73
|
}
|
77
74
|
/**
|
78
|
-
* Determines the height of the
|
75
|
+
* Determines the height of the Popover. Numeric values are treated as pixels.
|
76
|
+
*
|
79
77
|
* @default 'auto'
|
80
78
|
*/
|
81
79
|
set height(value) {
|
@@ -89,9 +87,7 @@ export class PopoverComponent {
|
|
89
87
|
*/
|
90
88
|
direction;
|
91
89
|
/**
|
92
|
-
* Specifies the main header text of the Popover.
|
93
|
-
*
|
94
|
-
* If a `titleTemplate` is provided it would take precedence over the title.
|
90
|
+
* Specifies the main header text of the Popover. If a `titleTemplate` is provided, it takes precedence.
|
95
91
|
*/
|
96
92
|
title;
|
97
93
|
/**
|
@@ -102,31 +98,26 @@ export class PopoverComponent {
|
|
102
98
|
*/
|
103
99
|
subtitle;
|
104
100
|
/**
|
105
|
-
* Represents the text
|
106
|
-
*
|
107
|
-
* If a `bodyTemplate` is provided it would take precedence over this text.
|
101
|
+
* Represents the text rendered in the Popover body section. If a `bodyTemplate` is provided, it takes precedence.
|
108
102
|
*/
|
109
103
|
body;
|
110
104
|
/**
|
111
|
-
* Determines whether a callout
|
105
|
+
* Determines whether a callout is rendered along the Popover. [See example]({% slug callout_popover %}).
|
112
106
|
*
|
113
107
|
* @default true
|
114
108
|
*/
|
115
109
|
callout = true;
|
116
110
|
/**
|
117
|
-
* Enables and configures the Popover animation. [See example]({% slug animations_popover %})
|
118
|
-
*
|
119
|
-
* The possible options are:
|
111
|
+
* Enables and configures the Popover animation. [See example]({% slug animations_popover %}).
|
120
112
|
*
|
121
|
-
*
|
122
|
-
* * `PopoverAnimation`—A configuration object which allows setting the `direction`, `duration` and `type` of the animation.
|
113
|
+
* Accepts a boolean to enable the default animation, or a `PopoverAnimation` object for custom settings.
|
123
114
|
*
|
124
115
|
* @default false
|
125
116
|
*/
|
126
117
|
animation = false;
|
127
118
|
/**
|
128
|
-
* Defines a callback function
|
129
|
-
*
|
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).
|
130
121
|
*/
|
131
122
|
set templateData(fn) {
|
132
123
|
if (isDevMode && typeof fn !== 'function') {
|
@@ -155,21 +146,19 @@ export class PopoverComponent {
|
|
155
146
|
return !this.visible;
|
156
147
|
}
|
157
148
|
/**
|
158
|
-
* Fires before the Popover is
|
159
|
-
* The event is preventable. If canceled, the Popover will not be displayed. [See example]({% slug events_popover %})
|
149
|
+
* Fires before the Popover is shown. The event is preventable. If canceled, the Popover will not display. [See example]({% slug events_popover %}).
|
160
150
|
*/
|
161
151
|
show = new EventEmitter();
|
162
152
|
/**
|
163
|
-
* Fires after the Popover has been shown and the animation has ended. [See example]({% slug events_popover %})
|
153
|
+
* Fires after the Popover has been shown and the animation has ended. [See example]({% slug events_popover %}).
|
164
154
|
*/
|
165
155
|
shown = new EventEmitter();
|
166
156
|
/**
|
167
|
-
* Fires when the Popover is about to be hidden
|
168
|
-
* The event is preventable. If canceled, the Popover will remain visible.
|
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 %}).
|
169
158
|
*/
|
170
159
|
hide = new EventEmitter();
|
171
160
|
/**
|
172
|
-
* Fires after the Popover has been hidden and the animation has ended. [See example]({% slug events_popover %})
|
161
|
+
* Fires after the Popover has been hidden and the animation has ended. [See example]({% slug events_popover %}).
|
173
162
|
*/
|
174
163
|
hidden = new EventEmitter();
|
175
164
|
/**
|
@@ -5,10 +5,19 @@
|
|
5
5
|
import { Directive, Optional, TemplateRef } from '@angular/core';
|
6
6
|
import * as i0 from "@angular/core";
|
7
7
|
/**
|
8
|
-
* Represents
|
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.
|
9
10
|
*
|
10
11
|
* To define the template, nest an `<ng-template>` tag
|
11
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
|
+
* ```
|
12
21
|
*/
|
13
22
|
export class PopoverActionsTemplateDirective {
|
14
23
|
templateRef;
|
@@ -5,10 +5,19 @@
|
|
5
5
|
import { Directive, Optional, TemplateRef } from '@angular/core';
|
6
6
|
import * as i0 from "@angular/core";
|
7
7
|
/**
|
8
|
-
* Represents
|
8
|
+
* Represents the Kendo UI Popover body template directive for Angular.
|
9
|
+
* Use the `kendoPopoverBodyTemplate` directive to define a custom body template for the Popover component.
|
9
10
|
*
|
10
11
|
* To define the template, nest an `<ng-template>` tag
|
11
12
|
* with the `kendoPopoverBodyTemplate` directive inside the `<kendo-popover>` tag.
|
13
|
+
*
|
14
|
+
* ```html
|
15
|
+
* <kendo-popover>
|
16
|
+
* <ng-template kendoPopoverBodyTemplate>
|
17
|
+
* Custom Body Content
|
18
|
+
* </ng-template>
|
19
|
+
* </kendo-popover>
|
20
|
+
* ```
|
12
21
|
*/
|
13
22
|
export class PopoverBodyTemplateDirective {
|
14
23
|
templateRef;
|
@@ -5,10 +5,19 @@
|
|
5
5
|
import { Directive, Optional, TemplateRef } from '@angular/core';
|
6
6
|
import * as i0 from "@angular/core";
|
7
7
|
/**
|
8
|
-
* Represents
|
8
|
+
* Represents the Kendo UI Popover title template directive for Angular.
|
9
|
+
* Use the `kendoPopoverTitleTemplate` directive to define a custom title template for the Popover component.
|
9
10
|
*
|
10
11
|
* To define the template, nest an `<ng-template>` tag
|
11
12
|
* with the `kendoPopoverTitleTemplate` directive inside the `<kendo-popover>` tag.
|
13
|
+
*
|
14
|
+
* ```html
|
15
|
+
* <kendo-popover>
|
16
|
+
* <ng-template kendoPopoverTitleTemplate>
|
17
|
+
* Custom Title
|
18
|
+
* </ng-template>
|
19
|
+
* </kendo-popover>
|
20
|
+
* ```
|
12
21
|
*/
|
13
22
|
export class PopoverTitleTemplateDirective {
|
14
23
|
templateRef;
|
@@ -15,28 +15,23 @@ import * as i5 from "./popover/anchor.directive";
|
|
15
15
|
import * as i6 from "./popover/container.directive";
|
16
16
|
// IMPORTANT: NgModule export kept for backwards compatibility
|
17
17
|
/**
|
18
|
-
* Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
|
18
|
+
* Represents the [`NgModule`](link:site.data.urls.angular['ngmoduleapi'])
|
19
19
|
* definition for the Popover component.
|
20
20
|
*
|
21
21
|
* @example
|
22
|
-
*
|
23
|
-
* ```ts-no-run
|
22
|
+
* ```typescript
|
24
23
|
* import { PopoverModule } from '@progress/kendo-angular-tooltip';
|
25
24
|
*
|
26
25
|
* import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
27
26
|
* import { NgModule } from '@angular/core';
|
28
|
-
*
|
29
27
|
* import { AppComponent } from './app.component';
|
30
28
|
*
|
31
|
-
*
|
29
|
+
* @NgModule({
|
32
30
|
* declarations: [AppComponent],
|
33
31
|
* imports: [BrowserModule, PopoverModule],
|
34
32
|
* bootstrap: [AppComponent]
|
35
33
|
* })
|
36
34
|
* export class AppModule {}
|
37
|
-
*
|
38
|
-
* platformBrowserDynamic().bootstrapModule(AppModule);
|
39
|
-
*
|
40
35
|
* ```
|
41
36
|
*/
|
42
37
|
export class PopoverModule {
|