@progress/kendo-angular-tooltip 3.1.6 → 4.0.0-dev.202204131841

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 (146) hide show
  1. package/bundles/kendo-angular-tooltip.umd.js +5 -0
  2. package/{dist/es/constants.d.ts → constants.d.ts} +0 -0
  3. package/{dist/es2015 → esm2015}/constants.js +0 -0
  4. package/{dist/es/models/functions.model.js → esm2015/kendo-angular-tooltip.js} +4 -0
  5. package/esm2015/localization/localized-messages.directive.js +38 -0
  6. package/{dist/es → esm2015}/main.js +2 -0
  7. package/{dist/es2015 → esm2015}/models/animation.model.js +1 -0
  8. package/{dist/es2015 → esm2015}/models/events.js +0 -0
  9. package/{dist/es2015 → esm2015}/models/functions.model.js +1 -0
  10. package/{dist/es → esm2015}/models/popover-show-option.type.js +1 -0
  11. package/{dist/es2015 → esm2015}/models/position.type.js +1 -0
  12. package/{dist/es → esm2015}/models/show.option.type.js +1 -0
  13. package/{dist/es2015 → esm2015}/package-metadata.js +1 -1
  14. package/{dist/es2015 → esm2015}/popover/anchor.directive.js +22 -19
  15. package/{dist/es2015 → esm2015}/popover/container.directive.js +24 -23
  16. package/{dist/es2015 → esm2015}/popover/directives-base.js +13 -12
  17. package/{dist/es2015 → esm2015}/popover/popover.component.js +118 -108
  18. package/{dist/es2015 → esm2015}/popover/popover.service.js +9 -9
  19. package/esm2015/popover/template-directives/actions-template.directive.js +27 -0
  20. package/esm2015/popover/template-directives/body-template.directive.js +27 -0
  21. package/esm2015/popover/template-directives/title-template.directive.js +27 -0
  22. package/{dist/es2015 → esm2015}/popover.module.js +31 -16
  23. package/{dist/es2015 → esm2015}/tooltip/tooltip.content.component.js +95 -73
  24. package/{dist/es2015 → esm2015}/tooltip/tooltip.directive.js +57 -80
  25. package/{dist/es2015 → esm2015}/tooltip/tooltip.settings.js +12 -7
  26. package/{dist/es2015 → esm2015}/tooltip.module.js +15 -12
  27. package/{dist/es2015 → esm2015}/tooltips.module.js +12 -9
  28. package/{dist/es2015 → esm2015}/utils.js +0 -1
  29. package/{dist/fesm2015/index.js → fesm2015/kendo-angular-tooltip.js} +456 -399
  30. package/{dist/es2015/constants.d.ts → kendo-angular-tooltip.d.ts} +3 -6
  31. package/{dist/es2015/localization → localization}/localized-messages.directive.d.ts +3 -0
  32. package/{dist/es/main.d.ts → main.d.ts} +3 -0
  33. package/{dist/es/models → models}/animation.model.d.ts +0 -0
  34. package/{dist/es/models → models}/events.d.ts +0 -0
  35. package/{dist/es/models → models}/functions.model.d.ts +0 -0
  36. package/{dist/es/models → models}/popover-show-option.type.d.ts +0 -0
  37. package/{dist/es/models → models}/position.type.d.ts +0 -0
  38. package/{dist/es/models → models}/show.option.type.d.ts +0 -0
  39. package/{dist/es/package-metadata.d.ts → package-metadata.d.ts} +0 -0
  40. package/package.json +34 -113
  41. package/{dist/es2015/popover → popover}/anchor.directive.d.ts +3 -0
  42. package/{dist/es/popover → popover}/container.directive.d.ts +3 -0
  43. package/{dist/es2015/popover → popover}/directives-base.d.ts +9 -4
  44. package/{dist/es2015/popover → popover}/popover.component.d.ts +21 -8
  45. package/{dist/es/popover → popover}/popover.service.d.ts +7 -4
  46. package/{dist/es2015/popover → popover}/template-directives/actions-template.directive.d.ts +3 -0
  47. package/{dist/es2015/popover → popover}/template-directives/body-template.directive.d.ts +3 -0
  48. package/{dist/es2015/popover → popover}/template-directives/title-template.directive.d.ts +3 -0
  49. package/popover.module.d.ts +43 -0
  50. package/schematics/ngAdd/index.js +5 -2
  51. package/schematics/ngAdd/index.js.map +1 -1
  52. package/{dist/es/tooltip → tooltip}/tooltip.content.component.d.ts +7 -4
  53. package/{dist/es/tooltip → tooltip}/tooltip.directive.d.ts +5 -1
  54. package/{dist/es/tooltip → tooltip}/tooltip.settings.d.ts +7 -0
  55. package/{dist/es2015/tooltip.module.d.ts → tooltip.module.d.ts} +9 -0
  56. package/{dist/es2015/tooltips.module.d.ts → tooltips.module.d.ts} +6 -0
  57. package/{dist/es/utils.d.ts → utils.d.ts} +0 -0
  58. package/dist/cdn/js/kendo-angular-tooltip.js +0 -20
  59. package/dist/cdn/main.js +0 -5
  60. package/dist/es/constants.js +0 -12
  61. package/dist/es/index.d.ts +0 -12
  62. package/dist/es/index.js +0 -12
  63. package/dist/es/index.metadata.json +0 -1
  64. package/dist/es/localization/localized-messages.directive.d.ts +0 -16
  65. package/dist/es/localization/localized-messages.directive.js +0 -38
  66. package/dist/es/models/animation.model.js +0 -4
  67. package/dist/es/models/events.js +0 -78
  68. package/dist/es/models/position.type.js +0 -4
  69. package/dist/es/package-metadata.js +0 -15
  70. package/dist/es/popover/anchor.directive.d.ts +0 -44
  71. package/dist/es/popover/anchor.directive.js +0 -156
  72. package/dist/es/popover/container.directive.js +0 -182
  73. package/dist/es/popover/directives-base.d.ts +0 -90
  74. package/dist/es/popover/directives-base.js +0 -294
  75. package/dist/es/popover/popover.component.d.ts +0 -166
  76. package/dist/es/popover/popover.component.js +0 -300
  77. package/dist/es/popover/popover.service.js +0 -88
  78. package/dist/es/popover/template-directives/actions-template.directive.d.ts +0 -15
  79. package/dist/es/popover/template-directives/actions-template.directive.js +0 -26
  80. package/dist/es/popover/template-directives/body-template.directive.d.ts +0 -15
  81. package/dist/es/popover/template-directives/body-template.directive.js +0 -26
  82. package/dist/es/popover/template-directives/title-template.directive.d.ts +0 -15
  83. package/dist/es/popover/template-directives/title-template.directive.js +0 -26
  84. package/dist/es/popover.module.d.ts +0 -31
  85. package/dist/es/popover.module.js +0 -65
  86. package/dist/es/tooltip/tooltip.content.component.js +0 -192
  87. package/dist/es/tooltip/tooltip.directive.js +0 -452
  88. package/dist/es/tooltip/tooltip.settings.js +0 -46
  89. package/dist/es/tooltip.module.d.ts +0 -36
  90. package/dist/es/tooltip.module.js +0 -57
  91. package/dist/es/tooltips.module.d.ts +0 -32
  92. package/dist/es/tooltips.module.js +0 -45
  93. package/dist/es/utils.js +0 -113
  94. package/dist/es2015/index.d.ts +0 -12
  95. package/dist/es2015/index.js +0 -12
  96. package/dist/es2015/index.metadata.json +0 -1
  97. package/dist/es2015/localization/localized-messages.directive.js +0 -34
  98. package/dist/es2015/main.d.ts +0 -22
  99. package/dist/es2015/main.js +0 -18
  100. package/dist/es2015/models/animation.model.d.ts +0 -9
  101. package/dist/es2015/models/events.d.ts +0 -78
  102. package/dist/es2015/models/functions.model.d.ts +0 -17
  103. package/dist/es2015/models/popover-show-option.type.d.ts +0 -8
  104. package/dist/es2015/models/popover-show-option.type.js +0 -4
  105. package/dist/es2015/models/position.type.d.ts +0 -14
  106. package/dist/es2015/models/show.option.type.d.ts +0 -13
  107. package/dist/es2015/models/show.option.type.js +0 -4
  108. package/dist/es2015/package-metadata.d.ts +0 -9
  109. package/dist/es2015/popover/container.directive.d.ts +0 -56
  110. package/dist/es2015/popover/popover.service.d.ts +0 -30
  111. package/dist/es2015/popover/template-directives/actions-template.directive.js +0 -25
  112. package/dist/es2015/popover/template-directives/body-template.directive.js +0 -25
  113. package/dist/es2015/popover/template-directives/title-template.directive.js +0 -25
  114. package/dist/es2015/popover.module.d.ts +0 -31
  115. package/dist/es2015/tooltip/tooltip.content.component.d.ts +0 -41
  116. package/dist/es2015/tooltip/tooltip.directive.d.ts +0 -156
  117. package/dist/es2015/tooltip/tooltip.settings.d.ts +0 -72
  118. package/dist/es2015/utils.d.ts +0 -34
  119. package/dist/fesm5/index.js +0 -2071
  120. package/dist/npm/constants.js +0 -14
  121. package/dist/npm/index.js +0 -19
  122. package/dist/npm/localization/localized-messages.directive.js +0 -40
  123. package/dist/npm/main.js +0 -36
  124. package/dist/npm/models/animation.model.js +0 -6
  125. package/dist/npm/models/events.js +0 -80
  126. package/dist/npm/models/functions.model.js +0 -6
  127. package/dist/npm/models/popover-show-option.type.js +0 -6
  128. package/dist/npm/models/position.type.js +0 -6
  129. package/dist/npm/models/show.option.type.js +0 -6
  130. package/dist/npm/package-metadata.js +0 -17
  131. package/dist/npm/popover/anchor.directive.js +0 -158
  132. package/dist/npm/popover/container.directive.js +0 -184
  133. package/dist/npm/popover/directives-base.js +0 -296
  134. package/dist/npm/popover/popover.component.js +0 -302
  135. package/dist/npm/popover/popover.service.js +0 -90
  136. package/dist/npm/popover/template-directives/actions-template.directive.js +0 -28
  137. package/dist/npm/popover/template-directives/body-template.directive.js +0 -28
  138. package/dist/npm/popover/template-directives/title-template.directive.js +0 -28
  139. package/dist/npm/popover.module.js +0 -67
  140. package/dist/npm/tooltip/tooltip.content.component.js +0 -194
  141. package/dist/npm/tooltip/tooltip.directive.js +0 -454
  142. package/dist/npm/tooltip/tooltip.settings.js +0 -48
  143. package/dist/npm/tooltip.module.js +0 -59
  144. package/dist/npm/tooltips.module.js +0 -47
  145. package/dist/npm/utils.js +0 -121
  146. package/dist/systemjs/kendo-angular-tooltip.js +0 -5
@@ -1,192 +0,0 @@
1
- /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2021 Progress Software Corporation. All rights reserved.
3
- * Licensed under commercial license. See LICENSE.md in the project root for more information
4
- *-------------------------------------------------------------------------------------------*/
5
- import * as tslib_1 from "tslib";
6
- import { Component, HostBinding, Input, ElementRef, TemplateRef, Output, EventEmitter } from '@angular/core';
7
- import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
8
- import { getCenterOffset } from '../utils';
9
- /**
10
- * @hidden
11
- */
12
- var TooltipContentComponent = /** @class */ (function () {
13
- function TooltipContentComponent(content, localizationService) {
14
- this.content = content;
15
- this.localizationService = localizationService;
16
- this.close = new EventEmitter();
17
- this.tooltipWidth = null;
18
- this.tooltipHeight = null;
19
- this.callout = true;
20
- this.calloutStyles = function (position, calloutSize, isFlip) {
21
- var styles = {};
22
- var isVertical = position === 'top' || position === 'bottom';
23
- var flipDeg = '180deg';
24
- var zeroDeg = '0deg';
25
- if (!isFlip) {
26
- styles.transform = isVertical ? "rotateX(" + zeroDeg + ")" : "rotateY(" + zeroDeg + ")";
27
- return styles;
28
- }
29
- if (position === 'top') {
30
- styles.bottom = 'unset';
31
- }
32
- else if (position === 'bottom') {
33
- styles.top = 'unset';
34
- }
35
- else if (position === 'left') {
36
- styles.right = 'unset';
37
- }
38
- else if (position === 'right') {
39
- styles.left = 'unset';
40
- }
41
- styles[position] = -calloutSize + "px";
42
- styles.transform = isVertical ? "rotateX(" + flipDeg + ")" : "rotateY(" + flipDeg + ")";
43
- return styles;
44
- };
45
- this.direction = localizationService.rtl ? 'rtl' : 'ltr';
46
- }
47
- Object.defineProperty(TooltipContentComponent.prototype, "cssClasses", {
48
- get: function () {
49
- return 'k-widget k-tooltip';
50
- },
51
- enumerable: true,
52
- configurable: true
53
- });
54
- Object.defineProperty(TooltipContentComponent.prototype, "className", {
55
- get: function () {
56
- return this.closable;
57
- },
58
- enumerable: true,
59
- configurable: true
60
- });
61
- Object.defineProperty(TooltipContentComponent.prototype, "cssPosition", {
62
- get: function () {
63
- return 'relative';
64
- },
65
- enumerable: true,
66
- configurable: true
67
- });
68
- TooltipContentComponent.prototype.ngOnInit = function () {
69
- var _this = this;
70
- this.dynamicRTLSubscription = this.localizationService.changes
71
- .subscribe(function (_a) {
72
- var rtl = _a.rtl;
73
- return _this.direction = rtl ? 'rtl' : 'ltr';
74
- });
75
- };
76
- TooltipContentComponent.prototype.ngOnDestroy = function () {
77
- if (this.dynamicRTLSubscription) {
78
- this.dynamicRTLSubscription.unsubscribe();
79
- }
80
- };
81
- Object.defineProperty(TooltipContentComponent.prototype, "closeButtonTitle", {
82
- get: function () {
83
- return this.closeTitle || this.localizationService.get('closeTitle');
84
- },
85
- enumerable: true,
86
- configurable: true
87
- });
88
- TooltipContentComponent.prototype.calloutPositionClass = function () {
89
- return {
90
- 'top': 'k-callout-s',
91
- 'left': 'k-callout-e',
92
- 'bottom': 'k-callout-n',
93
- 'right': 'k-callout-w'
94
- }[this.position];
95
- };
96
- TooltipContentComponent.prototype.onCloseClick = function (event) {
97
- event.preventDefault();
98
- this.close.emit();
99
- };
100
- TooltipContentComponent.prototype.updateCalloutPosition = function (position, isFlip) {
101
- if (!this.callout) {
102
- return;
103
- }
104
- var callout = this.content.nativeElement.querySelector('.k-callout');
105
- var isVertical = position === 'top' || position === 'bottom';
106
- var size = isVertical ? 'width' : 'height';
107
- var dir = isVertical ? 'left' : 'top';
108
- var offsetProperty = isVertical ? 'marginLeft' : 'marginTop';
109
- var calloutSize = callout.getBoundingClientRect()[size];
110
- var anchorCenter = getCenterOffset(this.anchor.nativeElement, dir, size);
111
- var contentCenter = getCenterOffset(this.content.nativeElement, dir, size);
112
- var diff = Math.abs(contentCenter - anchorCenter);
113
- if (diff > 1 || diff === 0 || Math.round(diff) === 0) {
114
- var newMargin = contentCenter - anchorCenter + (calloutSize / 2);
115
- callout.style[offsetProperty] = -newMargin + "px";
116
- }
117
- var calloutStyles = this.calloutStyles(position, calloutSize, isFlip);
118
- Object.keys(calloutStyles).forEach(function (style) {
119
- callout.style[style] = calloutStyles[style];
120
- });
121
- };
122
- tslib_1.__decorate([
123
- HostBinding('attr.dir'),
124
- tslib_1.__metadata("design:type", String)
125
- ], TooltipContentComponent.prototype, "direction", void 0);
126
- tslib_1.__decorate([
127
- Output(),
128
- tslib_1.__metadata("design:type", EventEmitter)
129
- ], TooltipContentComponent.prototype, "close", void 0);
130
- tslib_1.__decorate([
131
- HostBinding('class'),
132
- tslib_1.__metadata("design:type", String),
133
- tslib_1.__metadata("design:paramtypes", [])
134
- ], TooltipContentComponent.prototype, "cssClasses", null);
135
- tslib_1.__decorate([
136
- HostBinding('class.k-tooltip-closable'),
137
- tslib_1.__metadata("design:type", Boolean),
138
- tslib_1.__metadata("design:paramtypes", [])
139
- ], TooltipContentComponent.prototype, "className", null);
140
- tslib_1.__decorate([
141
- HostBinding('style.position'),
142
- tslib_1.__metadata("design:type", String),
143
- tslib_1.__metadata("design:paramtypes", [])
144
- ], TooltipContentComponent.prototype, "cssPosition", null);
145
- tslib_1.__decorate([
146
- HostBinding('style.width.px'),
147
- Input(),
148
- tslib_1.__metadata("design:type", Number)
149
- ], TooltipContentComponent.prototype, "tooltipWidth", void 0);
150
- tslib_1.__decorate([
151
- HostBinding('style.height.px'),
152
- Input(),
153
- tslib_1.__metadata("design:type", Number)
154
- ], TooltipContentComponent.prototype, "tooltipHeight", void 0);
155
- tslib_1.__decorate([
156
- Input(),
157
- tslib_1.__metadata("design:type", TemplateRef)
158
- ], TooltipContentComponent.prototype, "titleTemplate", void 0);
159
- tslib_1.__decorate([
160
- Input(),
161
- tslib_1.__metadata("design:type", ElementRef)
162
- ], TooltipContentComponent.prototype, "anchor", void 0);
163
- tslib_1.__decorate([
164
- Input(),
165
- tslib_1.__metadata("design:type", Boolean)
166
- ], TooltipContentComponent.prototype, "closable", void 0);
167
- tslib_1.__decorate([
168
- Input(),
169
- tslib_1.__metadata("design:type", TemplateRef)
170
- ], TooltipContentComponent.prototype, "templateRef", void 0);
171
- tslib_1.__decorate([
172
- Input(),
173
- tslib_1.__metadata("design:type", String)
174
- ], TooltipContentComponent.prototype, "templateString", void 0);
175
- TooltipContentComponent = tslib_1.__decorate([
176
- Component({
177
- selector: 'kendo-tooltip',
178
- template: "\n <ng-container kendoTooltipLocalizedMessages\n i18n-closeTitle=\"kendo.tooltip.closeTitle|The title of the close button\"\n closeTitle=\"Close\"\n >\n </ng-container>\n\n <div class=\"k-tooltip-content\">\n <div class=\"k-tooltip-title\" *ngIf=\"titleTemplate\">\n <ng-template\n [ngIf]=\"titleTemplate\"\n [ngTemplateOutlet]=\"titleTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: anchor, anchor: anchor }\">\n </ng-template>\n </div>\n\n <ng-template\n [ngIf]=\"templateRef\"\n [ngTemplateOutlet]=\"templateRef\"\n [ngTemplateOutletContext]=\"{ $implicit: anchor, anchor: anchor }\">\n </ng-template>\n <ng-template\n [ngIf]=\"templateString\">\n {{ templateString }}\n </ng-template>\n </div>\n\n <div *ngIf=\"closable\" class=\"k-tooltip-button\" (click)=\"onCloseClick($event)\">\n <a href=\"#\" class=\"k-icon k-i-close\" [attr.title]=\"closeButtonTitle\"></a>\n </div>\n\n <div class=\"k-callout\" *ngIf=\"callout\" [ngClass]=\"calloutPositionClass()\"></div>\n ",
179
- providers: [
180
- LocalizationService,
181
- {
182
- provide: L10N_PREFIX,
183
- useValue: 'kendo.tooltip'
184
- }
185
- ]
186
- }),
187
- tslib_1.__metadata("design:paramtypes", [ElementRef,
188
- LocalizationService])
189
- ], TooltipContentComponent);
190
- return TooltipContentComponent;
191
- }());
192
- export { TooltipContentComponent };
@@ -1,452 +0,0 @@
1
- /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2021 Progress Software Corporation. All rights reserved.
3
- * Licensed under commercial license. See LICENSE.md in the project root for more information
4
- *-------------------------------------------------------------------------------------------*/
5
- import * as tslib_1 from "tslib";
6
- import { Directive, Input, TemplateRef, Optional, ElementRef, NgZone, Inject, isDevMode, Renderer2 } from '@angular/core';
7
- import { take, debounceTime, filter } from 'rxjs/operators';
8
- import { fromEvent } from 'rxjs';
9
- import { PopupService } from '@progress/kendo-angular-popup';
10
- import { validatePackage } from '@progress/kendo-licensing';
11
- import { packageMetadata } from '../package-metadata';
12
- import { TooltipSettings, TOOLTIP_SETTINGS } from './tooltip.settings';
13
- import { TooltipContentComponent } from '../tooltip/tooltip.content.component';
14
- import { align, closestBySelector, contains, containsItem, collision, hasParent } from '../utils';
15
- /**
16
- * Represents the [Kendo UI Tooltip directive for Angular]({% slug overview_tooltip %}).
17
- * Used to display additional information that is related to an element.
18
- *
19
- * @example
20
- * ```ts-no-run
21
- * <div kendoTooltip>
22
- * <a title="Tooltip title" href="foo">foo</a>
23
- * </div>
24
- * ```
25
- */
26
- var TooltipDirective = /** @class */ (function () {
27
- function TooltipDirective(tooltipWrapper, ngZone, renderer, popupService, settings, legacySettings) {
28
- var _this = this;
29
- this.tooltipWrapper = tooltipWrapper;
30
- this.ngZone = ngZone;
31
- this.renderer = renderer;
32
- this.popupService = popupService;
33
- /**
34
- * Specifies a selector for elements within a container which will display a tooltip
35
- * ([see example]({% slug anchorelements_tooltip %})). The possible values include any
36
- * DOM `selector`. The default value is `[title]`.
37
- */
38
- this.filter = '[title]';
39
- /**
40
- * Specifies the position of the Tooltip that is relative to the
41
- * anchor element ([see example]({% slug positioning_tooltip %})).
42
- *
43
- * The possible values are:
44
- * * `top` (default)
45
- * * `bottom`
46
- * * `left`
47
- * * `right`
48
- */
49
- this.position = 'top';
50
- /**
51
- * Specifies the delay in milliseconds before the Tooltip is shown.
52
- * * `100` (default) milliseconds.
53
- */
54
- this.showAfter = 100;
55
- /**
56
- * Specifies if the Тooltip will display a callout arrow.
57
- *
58
- * The possible values are:
59
- * * `true` (default)
60
- * * `false`
61
- */
62
- this.callout = true;
63
- /**
64
- * Specifies if the Тooltip will display a **Close** button
65
- * ([see example]({% slug closable_tooltip %})).
66
- *
67
- * The possible values are:
68
- * * `true`
69
- * * `false`
70
- */
71
- this.closable = false;
72
- /**
73
- * Specifies the offset in pixels between the Tooltip and the anchor. Defaults to `6` pixels.
74
- * If the `callout` property is set to `true`, the offset is rendered from the callout arrow.
75
- * If the `callout` property is set to `false`, the offset is rendered from the content of the Tooltip.
76
- */
77
- this.offset = 6;
78
- this.anchor = null;
79
- this.validPositions = ['top', 'bottom', 'right', 'left'];
80
- this.validShowOptions = ['hover', 'click', 'none'];
81
- validatePackage(packageMetadata);
82
- Object.assign(this, settings, legacySettings);
83
- this.ngZone.runOutsideAngular(function () {
84
- var wrapper = _this.tooltipWrapper.nativeElement;
85
- _this.anchorTitleSubscription = fromEvent(wrapper, 'mouseover')
86
- .pipe(filter(function () { return _this.filter !== ''; }))
87
- .subscribe(function (e) {
88
- var filterElement = closestBySelector(e.target, _this.filter);
89
- if (filterElement) {
90
- _this.hideElementTitle({ nativeElement: filterElement });
91
- }
92
- });
93
- _this.mouseOverSubscription = fromEvent(wrapper, 'mouseover')
94
- .pipe(debounceTime(100), filter(function () { return _this.filter !== ''; }))
95
- .subscribe(function (e) { return _this.onMouseOver(e); });
96
- _this.mouseOutSubscription = fromEvent(wrapper, 'mouseout')
97
- .pipe(debounceTime(100))
98
- .subscribe(function (e) { return _this.onMouseOut(e); });
99
- });
100
- }
101
- Object.defineProperty(TooltipDirective.prototype, "tooltipTemplate", {
102
- get: function () { return this.template; },
103
- /**
104
- * Sets the content of the Tooltip as a template reference
105
- * ([see example]({% slug templates_tooltip %})).
106
- */
107
- set: function (value) {
108
- this.template = value;
109
- },
110
- enumerable: true,
111
- configurable: true
112
- });
113
- /**
114
- * Shows the Tooltip.
115
- * @param anchor&mdash; ElementRef|Element.
116
- * Specifies the element that will be used as an anchor. The Tooltip opens relative to that element.
117
- */
118
- TooltipDirective.prototype.show = function (anchor) {
119
- var _this = this;
120
- if (this.popupRef) {
121
- return;
122
- }
123
- if (anchor instanceof Element) {
124
- anchor = { nativeElement: anchor };
125
- }
126
- this.anchor = anchor;
127
- if (this.showOn === 'hover') {
128
- if (this.popupRef) {
129
- return;
130
- }
131
- clearTimeout(this.showTimeout);
132
- this.showTimeout = window.setTimeout(function () { return _this.showContent(_this.anchor); }, this.showAfter);
133
- }
134
- else {
135
- this.hideElementTitle(this.anchor);
136
- this.showContent(this.anchor);
137
- }
138
- };
139
- /**
140
- * Hides the Tooltip.
141
- */
142
- TooltipDirective.prototype.hide = function () {
143
- clearTimeout(this.showTimeout);
144
- var anchor = this.anchor && this.anchor.nativeElement;
145
- if (anchor && anchor.getAttribute('data-title')) {
146
- if (!anchor.getAttribute('title') && anchor.hasAttribute('title')) {
147
- anchor.setAttribute('title', anchor.getAttribute('data-title'));
148
- }
149
- anchor.setAttribute('data-title', '');
150
- }
151
- if (this.popupMouseOutSubscription) {
152
- this.popupMouseOutSubscription.unsubscribe();
153
- }
154
- if (this.closeClickSubscription) {
155
- this.closeClickSubscription.unsubscribe();
156
- }
157
- this.closePopup();
158
- };
159
- /**
160
- * Toggle visibility of the Tooltip.
161
- *
162
- * @param anchor&mdash; ElementRef|Element. Specifies the element that will be used as an anchor.
163
- * @param show&mdash; Optional. Boolean. Specifies if the Tooltip will be rendered.
164
- */
165
- TooltipDirective.prototype.toggle = function (anchor, show) {
166
- var previousAnchor = this.anchor && this.anchor.nativeElement;
167
- if (anchor instanceof Element) {
168
- anchor = { nativeElement: anchor };
169
- }
170
- if (previousAnchor !== anchor.nativeElement) {
171
- this.hide();
172
- }
173
- if (previousAnchor === anchor.nativeElement && this.showOn === 'click') {
174
- this.hide();
175
- }
176
- if (typeof show === 'undefined') {
177
- show = !this.popupRef;
178
- }
179
- if (show) {
180
- this.show(anchor);
181
- }
182
- else {
183
- this.hide();
184
- }
185
- };
186
- TooltipDirective.prototype.ngOnInit = function () {
187
- if (this.showOn === undefined) {
188
- this.showOn = 'hover';
189
- }
190
- this.verifyProperties();
191
- };
192
- TooltipDirective.prototype.ngOnChanges = function (changes) {
193
- if (changes.showOn) {
194
- this.subscribeClick();
195
- }
196
- };
197
- TooltipDirective.prototype.ngAfterViewChecked = function () {
198
- if (!this.popupRef) {
199
- return;
200
- }
201
- if (this.anchor &&
202
- !hasParent(this.anchor.nativeElement || this.anchor, this.tooltipWrapper.nativeElement)) {
203
- this.anchor = null;
204
- this.hide();
205
- }
206
- };
207
- TooltipDirective.prototype.ngOnDestroy = function () {
208
- this.hide();
209
- this.template = null;
210
- this.anchorTitleSubscription.unsubscribe();
211
- this.mouseOverSubscription.unsubscribe();
212
- this.mouseOutSubscription.unsubscribe();
213
- if (this.mouseClickSubscription) {
214
- this.mouseClickSubscription.unsubscribe();
215
- }
216
- if (this.popupPositionChangeSubscription) {
217
- this.popupPositionChangeSubscription.unsubscribe();
218
- }
219
- if (this.popupMouseOutSubscription) {
220
- this.popupMouseOutSubscription.unsubscribe();
221
- }
222
- };
223
- TooltipDirective.prototype.showContent = function (anchorRef) {
224
- var _this = this;
225
- if (!anchorRef.nativeElement.getAttribute('data-title') && !this.template) {
226
- return;
227
- }
228
- this.ngZone.run(function () {
229
- _this.openPopup(anchorRef);
230
- _this.bindContent(_this.popupRef.content, anchorRef);
231
- });
232
- this.popupRef.popupAnchorViewportLeave
233
- .pipe(take(1))
234
- .subscribe(function () { return _this.hide(); });
235
- };
236
- TooltipDirective.prototype.bindContent = function (contentComponent, anchorRef) {
237
- var _this = this;
238
- var content = contentComponent.instance;
239
- this.closeClickSubscription = content.close
240
- .subscribe(function () { _this.hide(); });
241
- if (!this.template) {
242
- content.templateString = this.anchor.nativeElement.getAttribute('data-title');
243
- }
244
- else {
245
- content.templateRef = this.template;
246
- }
247
- if (this.titleTemplate) {
248
- content.titleTemplate = this.titleTemplate;
249
- }
250
- content.closeTitle = this.closeTitle;
251
- content.anchor = anchorRef;
252
- content.callout = this.callout;
253
- content.closable = this.closable;
254
- content.position = this.position;
255
- content.tooltipWidth = this.tooltipWidth;
256
- content.tooltipHeight = this.tooltipHeight;
257
- this.popupRef.content.changeDetectorRef.detectChanges();
258
- };
259
- TooltipDirective.prototype.hideElementTitle = function (elementRef) {
260
- var element = elementRef.nativeElement;
261
- if (element.getAttribute('title')) {
262
- element.setAttribute('data-title', element.getAttribute('title'));
263
- element.setAttribute('title', '');
264
- }
265
- };
266
- TooltipDirective.prototype.openPopup = function (anchorRef) {
267
- var _this = this;
268
- var alignSettings = align(this.position, this.offset);
269
- var anchorAlign = alignSettings.anchorAlign;
270
- var popupAlign = alignSettings.popupAlign;
271
- var popupMargin = alignSettings.popupMargin;
272
- this.popupRef = this.popupService.open({
273
- anchor: anchorRef,
274
- anchorAlign: anchorAlign,
275
- animate: false,
276
- content: TooltipContentComponent,
277
- collision: collision(this.collision, this.position),
278
- margin: popupMargin,
279
- popupAlign: popupAlign,
280
- popupClass: 'k-popup-transparent'
281
- });
282
- this.renderer.addClass(this.popupRef.popupElement, 'k-tooltip-wrapper');
283
- if (this.tooltipClass) {
284
- this.renderer.addClass(this.popupRef.popupElement, this.tooltipClass);
285
- }
286
- var popupInstance = this.popupRef.content.instance;
287
- if (popupInstance.callout) {
288
- this.popupPositionChangeSubscription = this.popupRef.popupPositionChange
289
- .subscribe(function (_a) {
290
- var flip = _a.flip;
291
- var isFlip = flip.horizontal === true || flip.vertical === true;
292
- popupInstance.updateCalloutPosition(_this.position, isFlip);
293
- });
294
- }
295
- if (this.showOn === 'hover') {
296
- this.ngZone.runOutsideAngular(function () {
297
- var popup = _this.popupRef.popupElement;
298
- _this.popupMouseOutSubscription = fromEvent(popup, 'mouseout')
299
- .subscribe(function (e) { return _this.onMouseOut(e); });
300
- });
301
- }
302
- };
303
- TooltipDirective.prototype.closePopup = function () {
304
- if (this.popupRef) {
305
- this.popupRef.close();
306
- this.popupRef = null;
307
- }
308
- if (this.popupPositionChangeSubscription) {
309
- this.popupPositionChangeSubscription.unsubscribe();
310
- }
311
- };
312
- TooltipDirective.prototype.subscribeClick = function () {
313
- var _this = this;
314
- if (this.mouseClickSubscription) {
315
- this.mouseClickSubscription.unsubscribe();
316
- }
317
- if (this.showOn === 'click') {
318
- this.mouseClickSubscription = fromEvent(document, 'click')
319
- .pipe(filter(function () { return _this.filter !== ''; }))
320
- .subscribe(function (e) { return _this.onMouseClick(e, _this.tooltipWrapper.nativeElement); });
321
- }
322
- };
323
- TooltipDirective.prototype.onMouseClick = function (e, wrapper) {
324
- var target = e.target;
325
- var filterElement = closestBySelector(target, this.filter);
326
- var popup = this.popupRef && this.popupRef.popupElement;
327
- if (popup) {
328
- if (popup.contains(target)) {
329
- return;
330
- }
331
- if (this.closable) {
332
- return;
333
- }
334
- }
335
- if (wrapper.contains(target) && filterElement) {
336
- this.toggle(filterElement, true);
337
- }
338
- else if (popup) {
339
- this.hide();
340
- }
341
- };
342
- TooltipDirective.prototype.onMouseOver = function (e) {
343
- var filterElement = closestBySelector(e.target, this.filter);
344
- if (this.showOn !== 'hover') {
345
- return;
346
- }
347
- if (filterElement) {
348
- this.toggle(filterElement, true);
349
- }
350
- };
351
- TooltipDirective.prototype.onMouseOut = function (e) {
352
- if (this.showOn !== 'hover') {
353
- return;
354
- }
355
- if (this.closable) {
356
- return;
357
- }
358
- var popup = this.popupRef && this.popupRef.popupElement;
359
- var relatedTarget = e.relatedTarget;
360
- if (relatedTarget && this.anchor && contains(this.anchor.nativeElement, relatedTarget)) {
361
- return;
362
- }
363
- if (relatedTarget && contains(popup, relatedTarget)) {
364
- return;
365
- }
366
- this.hide();
367
- };
368
- TooltipDirective.prototype.verifyProperties = function () {
369
- if (!isDevMode()) {
370
- return;
371
- }
372
- if (!containsItem(this.validPositions, this.position)) {
373
- throw new Error("Invalid value provided for position property.The available options are 'top', 'bottom', 'left', or 'right'.");
374
- }
375
- if (!containsItem(this.validShowOptions, this.showOn)) {
376
- throw new Error("Invalid value provided for showOn property.The available options are 'hover' or 'none'.");
377
- }
378
- };
379
- tslib_1.__decorate([
380
- Input(),
381
- tslib_1.__metadata("design:type", String)
382
- ], TooltipDirective.prototype, "filter", void 0);
383
- tslib_1.__decorate([
384
- Input(),
385
- tslib_1.__metadata("design:type", String)
386
- ], TooltipDirective.prototype, "position", void 0);
387
- tslib_1.__decorate([
388
- Input(),
389
- tslib_1.__metadata("design:type", TemplateRef)
390
- ], TooltipDirective.prototype, "titleTemplate", void 0);
391
- tslib_1.__decorate([
392
- Input(),
393
- tslib_1.__metadata("design:type", String)
394
- ], TooltipDirective.prototype, "showOn", void 0);
395
- tslib_1.__decorate([
396
- Input(),
397
- tslib_1.__metadata("design:type", Number)
398
- ], TooltipDirective.prototype, "showAfter", void 0);
399
- tslib_1.__decorate([
400
- Input(),
401
- tslib_1.__metadata("design:type", Boolean)
402
- ], TooltipDirective.prototype, "callout", void 0);
403
- tslib_1.__decorate([
404
- Input(),
405
- tslib_1.__metadata("design:type", Boolean)
406
- ], TooltipDirective.prototype, "closable", void 0);
407
- tslib_1.__decorate([
408
- Input(),
409
- tslib_1.__metadata("design:type", Number)
410
- ], TooltipDirective.prototype, "offset", void 0);
411
- tslib_1.__decorate([
412
- Input(),
413
- tslib_1.__metadata("design:type", Number)
414
- ], TooltipDirective.prototype, "tooltipWidth", void 0);
415
- tslib_1.__decorate([
416
- Input(),
417
- tslib_1.__metadata("design:type", Number)
418
- ], TooltipDirective.prototype, "tooltipHeight", void 0);
419
- tslib_1.__decorate([
420
- Input(),
421
- tslib_1.__metadata("design:type", String)
422
- ], TooltipDirective.prototype, "tooltipClass", void 0);
423
- tslib_1.__decorate([
424
- Input(),
425
- tslib_1.__metadata("design:type", Object)
426
- ], TooltipDirective.prototype, "collision", void 0);
427
- tslib_1.__decorate([
428
- Input(),
429
- tslib_1.__metadata("design:type", String)
430
- ], TooltipDirective.prototype, "closeTitle", void 0);
431
- tslib_1.__decorate([
432
- Input(),
433
- tslib_1.__metadata("design:type", TemplateRef),
434
- tslib_1.__metadata("design:paramtypes", [TemplateRef])
435
- ], TooltipDirective.prototype, "tooltipTemplate", null);
436
- TooltipDirective = tslib_1.__decorate([
437
- Directive({
438
- selector: '[kendoTooltip]',
439
- exportAs: 'kendoTooltip'
440
- }),
441
- tslib_1.__param(4, Optional()),
442
- tslib_1.__param(5, Optional()), tslib_1.__param(5, Inject(TOOLTIP_SETTINGS)),
443
- tslib_1.__metadata("design:paramtypes", [ElementRef,
444
- NgZone,
445
- Renderer2,
446
- PopupService,
447
- TooltipSettings,
448
- TooltipSettings])
449
- ], TooltipDirective);
450
- return TooltipDirective;
451
- }());
452
- export { TooltipDirective };
@@ -1,46 +0,0 @@
1
- /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2021 Progress Software Corporation. All rights reserved.
3
- * Licensed under commercial license. See LICENSE.md in the project root for more information
4
- *-------------------------------------------------------------------------------------------*/
5
- import * as tslib_1 from "tslib";
6
- import { Injectable, InjectionToken } from '@angular/core';
7
- /**
8
- * Obsolete. Provide the TooltipSettings class instead.
9
- *
10
- * @hidden
11
- */
12
- export var TOOLTIP_SETTINGS = new InjectionToken('kendo-ui-tooltip-settings');
13
- /**
14
- * Provides a global configuration for the Kendo UI Tooltip. Once injected through
15
- * the `AppComponent` constructor, the configuration properties can be overridden.
16
- *
17
- * @example
18
- * ```ts-no-run
19
- * import { TooltipSettings } from '@progress/kendo-angular-tooltip';
20
- *
21
- * _@Component({
22
- * selector: 'my-app',
23
- * template: `
24
- * <div kendoTooltip>
25
- * <button title="Saves the current document">Save</button>
26
- * </div>`,
27
- * providers: [{
28
- * provide: TooltipSettings,
29
- * useFactory: (): TooltipSettings => ({
30
- * // Override default values of tooltips if wanted
31
- * position: 'right'
32
- * })
33
- * }]
34
- * })
35
- * export class AppComponent { }
36
- * ```
37
- */
38
- var TooltipSettings = /** @class */ (function () {
39
- function TooltipSettings() {
40
- }
41
- TooltipSettings = tslib_1.__decorate([
42
- Injectable()
43
- ], TooltipSettings);
44
- return TooltipSettings;
45
- }());
46
- export { TooltipSettings };