@progress/kendo-angular-tooltip 21.4.1-develop.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,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 body template directive for Angular.
9
- * Use the `kendoPopoverBodyTemplate` directive to define a custom body template for the Popover component.
10
- *
11
- * To define the template, nest an `<ng-template>` tag
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
- * ```
21
- */
22
- export class PopoverBodyTemplateDirective {
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: PopoverBodyTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
28
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: PopoverBodyTemplateDirective, isStandalone: true, selector: "[kendoPopoverBodyTemplate]", ngImport: i0 });
29
- }
30
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PopoverBodyTemplateDirective, decorators: [{
31
- type: Directive,
32
- args: [{
33
- selector: '[kendoPopoverBodyTemplate]',
34
- standalone: true
35
- }]
36
- }], ctorParameters: () => [{ type: i0.TemplateRef, decorators: [{
37
- type: Optional
38
- }] }] });
@@ -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 title template directive for Angular.
9
- * Use the `kendoPopoverTitleTemplate` directive to define a custom title template for the Popover component.
10
- *
11
- * To define the template, nest an `<ng-template>` tag
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
- * ```
21
- */
22
- export class PopoverTitleTemplateDirective {
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: PopoverTitleTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
28
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: PopoverTitleTemplateDirective, isStandalone: true, selector: "[kendoPopoverTitleTemplate]", ngImport: i0 });
29
- }
30
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PopoverTitleTemplateDirective, decorators: [{
31
- type: Directive,
32
- args: [{
33
- selector: '[kendoPopoverTitleTemplate]',
34
- standalone: true
35
- }]
36
- }], ctorParameters: () => [{ type: i0.TemplateRef, decorators: [{
37
- type: Optional
38
- }] }] });
@@ -1,47 +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 { NgModule } from "@angular/core";
6
- import { PopupService } from "@progress/kendo-angular-popup";
7
- import { ResizeBatchService } from "@progress/kendo-angular-common";
8
- import { KENDO_POPOVER } from "./directives";
9
- import * as i0 from "@angular/core";
10
- import * as i1 from "./popover/popover.component";
11
- import * as i2 from "./popover/template-directives/actions-template.directive";
12
- import * as i3 from "./popover/template-directives/body-template.directive";
13
- import * as i4 from "./popover/template-directives/title-template.directive";
14
- import * as i5 from "./popover/anchor.directive";
15
- import * as i6 from "./popover/container.directive";
16
- // IMPORTANT: NgModule export kept for backwards compatibility
17
- /**
18
- * Represents the [`NgModule`](link:site.data.urls.angular['ngmoduleapi'])
19
- * definition for the Popover component.
20
- *
21
- * @example
22
- * ```typescript
23
- * import { PopoverModule } from '@progress/kendo-angular-tooltip';
24
- * import { NgModule } from '@angular/core';
25
- * import { AppComponent } from './app.component';
26
- *
27
- * @NgModule({
28
- * declarations: [AppComponent],
29
- * imports: [BrowserModule, PopoverModule],
30
- * bootstrap: [AppComponent]
31
- * })
32
- * export class AppModule {}
33
- * ```
34
- */
35
- export class PopoverModule {
36
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
37
- static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: PopoverModule, imports: [i1.PopoverComponent, i2.PopoverActionsTemplateDirective, i3.PopoverBodyTemplateDirective, i4.PopoverTitleTemplateDirective, i5.PopoverAnchorDirective, i6.PopoverContainerDirective], exports: [i1.PopoverComponent, i2.PopoverActionsTemplateDirective, i3.PopoverBodyTemplateDirective, i4.PopoverTitleTemplateDirective, i5.PopoverAnchorDirective, i6.PopoverContainerDirective] });
38
- static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PopoverModule, providers: [PopupService, ResizeBatchService] });
39
- }
40
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PopoverModule, decorators: [{
41
- type: NgModule,
42
- args: [{
43
- exports: [...KENDO_POPOVER],
44
- imports: [...KENDO_POPOVER],
45
- providers: [PopupService, ResizeBatchService]
46
- }]
47
- }] });
@@ -1,8 +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
- /**
6
- * Generated bundle index. Do not edit.
7
- */
8
- export * from './index';
@@ -1,293 +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 { Component, HostBinding, Input, ElementRef, TemplateRef, Output, EventEmitter } from '@angular/core';
6
- import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
7
- import { getCenterOffset, getId } from '../utils';
8
- import { xIcon } from '@progress/kendo-svg-icons';
9
- import { NgTemplateOutlet, NgClass } from '@angular/common';
10
- import { LocalizedMessagesDirective } from './../localization/localized-messages.directive';
11
- import { IconWrapperComponent } from '@progress/kendo-angular-icons';
12
- import * as i0 from "@angular/core";
13
- import * as i1 from "@progress/kendo-angular-l10n";
14
- /**
15
- * @hidden
16
- */
17
- export class TooltipContentComponent {
18
- content;
19
- localizationService;
20
- /**
21
- * @hidden
22
- */
23
- xIcon = xIcon;
24
- /**
25
- * @hidden
26
- */
27
- direction;
28
- close = new EventEmitter();
29
- get cssClasses() {
30
- return 'k-tooltip';
31
- }
32
- hostRole = 'tooltip';
33
- get hostId() {
34
- return this.tooltipId;
35
- }
36
- get className() {
37
- return this.closable;
38
- }
39
- get cssPosition() {
40
- return 'relative';
41
- }
42
- tooltipWidth = null;
43
- tooltipHeight = null;
44
- titleTemplate;
45
- anchor;
46
- closable;
47
- templateRef;
48
- templateString;
49
- closeTitle;
50
- callout = true;
51
- position;
52
- /**
53
- * @hidden
54
- */
55
- tooltipId;
56
- dynamicRTLSubscription;
57
- constructor(content, localizationService) {
58
- this.content = content;
59
- this.localizationService = localizationService;
60
- this.direction = localizationService.rtl ? 'rtl' : 'ltr';
61
- }
62
- ngOnInit() {
63
- this.tooltipId = getId('tooltip');
64
- this.dynamicRTLSubscription = this.localizationService.changes
65
- .subscribe(({ rtl }) => this.direction = rtl ? 'rtl' : 'ltr');
66
- }
67
- ngOnDestroy() {
68
- if (this.dynamicRTLSubscription) {
69
- this.dynamicRTLSubscription.unsubscribe();
70
- }
71
- }
72
- get closeButtonTitle() {
73
- return this.closeTitle || this.localizationService.get('closeTitle');
74
- }
75
- calloutPositionClass() {
76
- return {
77
- 'top': 'k-callout-s',
78
- 'left': 'k-callout-e',
79
- 'bottom': 'k-callout-n',
80
- 'right': 'k-callout-w'
81
- }[this.position];
82
- }
83
- onCloseClick(event) {
84
- event.preventDefault();
85
- this.close.emit();
86
- }
87
- updateCalloutPosition(position, isFlip) {
88
- if (!this.callout) {
89
- return;
90
- }
91
- const callout = this.content.nativeElement.querySelector('.k-callout');
92
- const isVertical = position === 'top' || position === 'bottom';
93
- const size = isVertical ? 'width' : 'height';
94
- const dir = isVertical ? 'left' : 'top';
95
- const offsetProperty = isVertical ? 'marginLeft' : 'marginTop';
96
- const calloutSize = callout.getBoundingClientRect()[size];
97
- const anchorCenter = getCenterOffset(this.anchor.nativeElement, dir, size);
98
- const contentCenter = getCenterOffset(this.content.nativeElement, dir, size);
99
- const diff = Math.abs(contentCenter - anchorCenter);
100
- if (diff > 1 || diff === 0 || Math.round(diff) === 0) {
101
- const newMargin = contentCenter - anchorCenter + (calloutSize / 2);
102
- callout.style[offsetProperty] = `${-newMargin}px`;
103
- }
104
- const calloutStyles = this.calloutStyles(position, calloutSize, isFlip);
105
- Object.keys(calloutStyles).forEach((style) => {
106
- callout.style[style] = calloutStyles[style];
107
- });
108
- }
109
- calloutStyles = (position, calloutSize, isFlip) => {
110
- const styles = {};
111
- const isVertical = position === 'top' || position === 'bottom';
112
- const flipDeg = '180deg';
113
- const zeroDeg = '0deg';
114
- const sizeOffset = `${-calloutSize}px`;
115
- let styleToUpdate;
116
- switch (position) {
117
- case 'top':
118
- styleToUpdate = 'bottom';
119
- break;
120
- case 'bottom':
121
- styleToUpdate = 'top';
122
- break;
123
- case 'left':
124
- styleToUpdate = 'right';
125
- break;
126
- case 'right':
127
- styleToUpdate = 'left';
128
- break;
129
- }
130
- if (!isFlip) {
131
- styles.transform = isVertical ? `rotateX(${zeroDeg})` : `rotateY(${zeroDeg})`;
132
- styles[styleToUpdate] = sizeOffset;
133
- styles[position] = 'unset';
134
- return styles;
135
- }
136
- styles[styleToUpdate] = 'unset';
137
- styles[position] = sizeOffset;
138
- styles.transform = isVertical ? `rotateX(${flipDeg})` : `rotateY(${flipDeg})`;
139
- return styles;
140
- };
141
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TooltipContentComponent, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
142
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", 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: [
143
- LocalizationService,
144
- {
145
- provide: L10N_PREFIX,
146
- useValue: 'kendo.tooltip'
147
- }
148
- ], ngImport: i0, template: `
149
- <ng-container kendoTooltipLocalizedMessages
150
- i18n-closeTitle="kendo.tooltip.closeTitle|The title of the close button"
151
- closeTitle="Close"
152
- >
153
- </ng-container>
154
-
155
- <div class="k-tooltip-content">
156
- @if (titleTemplate) {
157
- <div class="k-tooltip-title">
158
- @if (titleTemplate) {
159
- <ng-template
160
- [ngTemplateOutlet]="titleTemplate"
161
- [ngTemplateOutletContext]="{ $implicit: anchor, anchor: anchor }">
162
- </ng-template>
163
- }
164
- </div>
165
- }
166
-
167
- @if (templateRef) {
168
- <ng-template
169
- [ngTemplateOutlet]="templateRef"
170
- [ngTemplateOutletContext]="{ $implicit: anchor, anchor: anchor }">
171
- </ng-template>
172
- }
173
- @if (templateString) {
174
- {{ templateString }}
175
- }
176
- </div>
177
-
178
- @if (closable) {
179
- <div [attr.aria-hidden]="true" class="k-tooltip-button" (click)="onCloseClick($event)">
180
- <a href="#" [attr.title]="closeButtonTitle" class="k-icon">
181
- <kendo-icon-wrapper
182
- name="x"
183
- [svgIcon]="xIcon">
184
- </kendo-icon-wrapper>
185
- </a>
186
- </div>
187
- }
188
-
189
- @if (callout) {
190
- <div class="k-callout" [ngClass]="calloutPositionClass()"></div>
191
- }
192
- `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoTooltipLocalizedMessages]", inputs: ["closeTitle"] }, { 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"] }] });
193
- }
194
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TooltipContentComponent, decorators: [{
195
- type: Component,
196
- args: [{
197
- selector: 'kendo-tooltip',
198
- template: `
199
- <ng-container kendoTooltipLocalizedMessages
200
- i18n-closeTitle="kendo.tooltip.closeTitle|The title of the close button"
201
- closeTitle="Close"
202
- >
203
- </ng-container>
204
-
205
- <div class="k-tooltip-content">
206
- @if (titleTemplate) {
207
- <div class="k-tooltip-title">
208
- @if (titleTemplate) {
209
- <ng-template
210
- [ngTemplateOutlet]="titleTemplate"
211
- [ngTemplateOutletContext]="{ $implicit: anchor, anchor: anchor }">
212
- </ng-template>
213
- }
214
- </div>
215
- }
216
-
217
- @if (templateRef) {
218
- <ng-template
219
- [ngTemplateOutlet]="templateRef"
220
- [ngTemplateOutletContext]="{ $implicit: anchor, anchor: anchor }">
221
- </ng-template>
222
- }
223
- @if (templateString) {
224
- {{ templateString }}
225
- }
226
- </div>
227
-
228
- @if (closable) {
229
- <div [attr.aria-hidden]="true" class="k-tooltip-button" (click)="onCloseClick($event)">
230
- <a href="#" [attr.title]="closeButtonTitle" class="k-icon">
231
- <kendo-icon-wrapper
232
- name="x"
233
- [svgIcon]="xIcon">
234
- </kendo-icon-wrapper>
235
- </a>
236
- </div>
237
- }
238
-
239
- @if (callout) {
240
- <div class="k-callout" [ngClass]="calloutPositionClass()"></div>
241
- }
242
- `,
243
- providers: [
244
- LocalizationService,
245
- {
246
- provide: L10N_PREFIX,
247
- useValue: 'kendo.tooltip'
248
- }
249
- ],
250
- standalone: true,
251
- imports: [LocalizedMessagesDirective, NgTemplateOutlet, IconWrapperComponent, NgClass]
252
- }]
253
- }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.LocalizationService }], propDecorators: { direction: [{
254
- type: HostBinding,
255
- args: ['attr.dir']
256
- }], close: [{
257
- type: Output
258
- }], cssClasses: [{
259
- type: HostBinding,
260
- args: ['class']
261
- }], hostRole: [{
262
- type: HostBinding,
263
- args: ['attr.role']
264
- }], hostId: [{
265
- type: HostBinding,
266
- args: ['attr.id']
267
- }], className: [{
268
- type: HostBinding,
269
- args: ['class.k-tooltip-closable']
270
- }], cssPosition: [{
271
- type: HostBinding,
272
- args: ['style.position']
273
- }], tooltipWidth: [{
274
- type: HostBinding,
275
- args: ['style.width.px']
276
- }, {
277
- type: Input
278
- }], tooltipHeight: [{
279
- type: HostBinding,
280
- args: ['style.height.px']
281
- }, {
282
- type: Input
283
- }], titleTemplate: [{
284
- type: Input
285
- }], anchor: [{
286
- type: Input
287
- }], closable: [{
288
- type: Input
289
- }], templateRef: [{
290
- type: Input
291
- }], templateString: [{
292
- type: Input
293
- }] } });