@progress/kendo-angular-tooltip 3.0.2-dev.202105121258 → 3.1.0-dev.202201182021

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 (141) hide show
  1. package/LICENSE.md +1 -1
  2. package/NOTICE.txt +119 -79
  3. package/README.md +1 -1
  4. package/dist/cdn/js/kendo-angular-tooltip.js +3 -3
  5. package/dist/cdn/main.js +2 -2
  6. package/dist/es/constants.d.ts +12 -0
  7. package/dist/es/constants.js +12 -0
  8. package/dist/es/index.d.ts +5 -3
  9. package/dist/es/index.js +3 -1
  10. package/dist/es/index.metadata.json +1 -1
  11. package/dist/es/localization/localized-messages.directive.d.ts +1 -1
  12. package/dist/es/localization/localized-messages.directive.js +1 -1
  13. package/dist/es/main.d.ts +17 -3
  14. package/dist/es/main.js +13 -2
  15. package/dist/es/models/animation.model.d.ts +9 -0
  16. package/dist/es/models/animation.model.js +4 -0
  17. package/dist/es/models/events.d.ts +78 -0
  18. package/dist/es/models/events.js +78 -0
  19. package/dist/es/models/functions.model.d.ts +17 -0
  20. package/dist/es/models/functions.model.js +4 -0
  21. package/dist/es/models/popover-show-option.type.d.ts +8 -0
  22. package/dist/es/models/popover-show-option.type.js +4 -0
  23. package/dist/es/models/position.type.d.ts +2 -2
  24. package/dist/es/models/position.type.js +1 -1
  25. package/dist/es/models/show.option.type.d.ts +1 -1
  26. package/dist/es/models/show.option.type.js +1 -1
  27. package/dist/es/package-metadata.d.ts +1 -1
  28. package/dist/es/package-metadata.js +2 -2
  29. package/dist/es/popover/anchor.directive.d.ts +44 -0
  30. package/dist/es/popover/anchor.directive.js +150 -0
  31. package/dist/es/popover/container.directive.d.ts +56 -0
  32. package/dist/es/popover/container.directive.js +176 -0
  33. package/dist/es/popover/directives-base.d.ts +87 -0
  34. package/dist/es/popover/directives-base.js +274 -0
  35. package/dist/es/popover/popover.component.d.ts +166 -0
  36. package/dist/es/popover/popover.component.js +300 -0
  37. package/dist/es/popover/popover.service.d.ts +30 -0
  38. package/dist/es/popover/popover.service.js +88 -0
  39. package/dist/es/popover/template-directives/actions-template.directive.d.ts +15 -0
  40. package/dist/es/popover/template-directives/actions-template.directive.js +26 -0
  41. package/dist/es/popover/template-directives/body-template.directive.d.ts +15 -0
  42. package/dist/es/popover/template-directives/body-template.directive.js +26 -0
  43. package/dist/es/popover/template-directives/title-template.directive.d.ts +15 -0
  44. package/dist/es/popover/template-directives/title-template.directive.js +26 -0
  45. package/dist/es/popover.module.d.ts +31 -0
  46. package/dist/es/popover.module.js +65 -0
  47. package/dist/es/tooltip/tooltip.content.component.d.ts +1 -1
  48. package/dist/es/tooltip/tooltip.content.component.js +1 -1
  49. package/dist/es/tooltip/tooltip.directive.d.ts +1 -1
  50. package/dist/es/tooltip/tooltip.directive.js +5 -5
  51. package/dist/es/tooltip/tooltip.settings.d.ts +1 -1
  52. package/dist/es/tooltip/tooltip.settings.js +1 -1
  53. package/dist/es/tooltip.module.d.ts +1 -1
  54. package/dist/es/tooltip.module.js +1 -1
  55. package/dist/es/tooltips.module.d.ts +32 -0
  56. package/dist/es/tooltips.module.js +45 -0
  57. package/dist/es/utils.d.ts +2 -2
  58. package/dist/es/utils.js +2 -2
  59. package/dist/es2015/constants.d.ts +12 -0
  60. package/dist/es2015/constants.js +12 -0
  61. package/dist/es2015/index.d.ts +3 -1
  62. package/dist/es2015/index.js +3 -1
  63. package/dist/es2015/index.metadata.json +1 -1
  64. package/dist/es2015/localization/localized-messages.directive.d.ts +1 -1
  65. package/dist/es2015/localization/localized-messages.directive.js +1 -1
  66. package/dist/es2015/main.d.ts +17 -3
  67. package/dist/es2015/main.js +13 -2
  68. package/dist/es2015/models/animation.model.d.ts +9 -0
  69. package/dist/es2015/models/animation.model.js +4 -0
  70. package/dist/es2015/models/events.d.ts +78 -0
  71. package/dist/es2015/models/events.js +65 -0
  72. package/dist/es2015/models/functions.model.d.ts +17 -0
  73. package/dist/es2015/models/functions.model.js +4 -0
  74. package/dist/es2015/models/popover-show-option.type.d.ts +8 -0
  75. package/dist/es2015/models/popover-show-option.type.js +4 -0
  76. package/dist/es2015/models/position.type.d.ts +2 -2
  77. package/dist/es2015/models/position.type.js +1 -1
  78. package/dist/es2015/models/show.option.type.d.ts +1 -1
  79. package/dist/es2015/models/show.option.type.js +1 -1
  80. package/dist/es2015/package-metadata.d.ts +1 -1
  81. package/dist/es2015/package-metadata.js +2 -2
  82. package/dist/es2015/popover/anchor.directive.d.ts +44 -0
  83. package/dist/es2015/popover/anchor.directive.js +144 -0
  84. package/dist/es2015/popover/container.directive.d.ts +56 -0
  85. package/dist/es2015/popover/container.directive.js +171 -0
  86. package/dist/es2015/popover/directives-base.d.ts +87 -0
  87. package/dist/es2015/popover/directives-base.js +259 -0
  88. package/dist/es2015/popover/popover.component.d.ts +166 -0
  89. package/dist/es2015/popover/popover.component.js +304 -0
  90. package/dist/es2015/popover/popover.service.d.ts +30 -0
  91. package/dist/es2015/popover/popover.service.js +67 -0
  92. package/dist/es2015/popover/template-directives/actions-template.directive.d.ts +15 -0
  93. package/dist/es2015/popover/template-directives/actions-template.directive.js +25 -0
  94. package/dist/es2015/popover/template-directives/body-template.directive.d.ts +15 -0
  95. package/dist/es2015/popover/template-directives/body-template.directive.js +25 -0
  96. package/dist/es2015/popover/template-directives/title-template.directive.d.ts +15 -0
  97. package/dist/es2015/popover/template-directives/title-template.directive.js +25 -0
  98. package/dist/es2015/popover.module.d.ts +31 -0
  99. package/dist/es2015/popover.module.js +63 -0
  100. package/dist/es2015/tooltip/tooltip.content.component.d.ts +1 -1
  101. package/dist/es2015/tooltip/tooltip.content.component.js +1 -1
  102. package/dist/es2015/tooltip/tooltip.directive.d.ts +1 -1
  103. package/dist/es2015/tooltip/tooltip.directive.js +5 -5
  104. package/dist/es2015/tooltip/tooltip.settings.d.ts +1 -1
  105. package/dist/es2015/tooltip/tooltip.settings.js +1 -1
  106. package/dist/es2015/tooltip.module.d.ts +1 -1
  107. package/dist/es2015/tooltip.module.js +1 -1
  108. package/dist/es2015/tooltips.module.d.ts +32 -0
  109. package/dist/es2015/tooltips.module.js +42 -0
  110. package/dist/es2015/utils.d.ts +2 -2
  111. package/dist/es2015/utils.js +2 -2
  112. package/dist/fesm2015/index.js +1111 -10
  113. package/dist/fesm5/index.js +1169 -10
  114. package/dist/npm/constants.js +14 -0
  115. package/dist/npm/index.js +5 -1
  116. package/dist/npm/localization/localized-messages.directive.js +1 -1
  117. package/dist/npm/main.js +26 -3
  118. package/dist/npm/models/animation.model.js +6 -0
  119. package/dist/npm/models/events.js +80 -0
  120. package/dist/npm/models/functions.model.js +6 -0
  121. package/dist/npm/models/popover-show-option.type.js +6 -0
  122. package/dist/npm/models/position.type.js +1 -1
  123. package/dist/npm/models/show.option.type.js +1 -1
  124. package/dist/npm/package-metadata.js +2 -2
  125. package/dist/npm/popover/anchor.directive.js +152 -0
  126. package/dist/npm/popover/container.directive.js +178 -0
  127. package/dist/npm/popover/directives-base.js +276 -0
  128. package/dist/npm/popover/popover.component.js +302 -0
  129. package/dist/npm/popover/popover.service.js +90 -0
  130. package/dist/npm/popover/template-directives/actions-template.directive.js +28 -0
  131. package/dist/npm/popover/template-directives/body-template.directive.js +28 -0
  132. package/dist/npm/popover/template-directives/title-template.directive.js +28 -0
  133. package/dist/npm/popover.module.js +67 -0
  134. package/dist/npm/tooltip/tooltip.content.component.js +1 -1
  135. package/dist/npm/tooltip/tooltip.directive.js +4 -4
  136. package/dist/npm/tooltip/tooltip.settings.js +1 -1
  137. package/dist/npm/tooltip.module.js +1 -1
  138. package/dist/npm/tooltips.module.js +47 -0
  139. package/dist/npm/utils.js +3 -3
  140. package/dist/systemjs/kendo-angular-tooltip.js +2 -2
  141. package/package.json +23 -19
@@ -0,0 +1,65 @@
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 { PreventableEvent } from "@progress/kendo-angular-common";
6
+ /**
7
+ * Arguments for the `show` event. The `show` event fires when a popover is about
8
+ * to be opened. If you cancel the event, the opening is prevented.
9
+ */
10
+ export class PopoverShowEvent extends PreventableEvent {
11
+ /**
12
+ * @hidden
13
+ * Constructs the event arguments for the `show` event.
14
+ * @param anchor - The host element related to the popover.
15
+ */
16
+ constructor(anchor) {
17
+ super();
18
+ this.anchor = anchor;
19
+ }
20
+ }
21
+ /**
22
+ * Arguments for the `hide` event. The `hide` event fires when a popover is about
23
+ * to be closed. If you cancel the event, the popover stays open.
24
+ */
25
+ export class PopoverHideEvent extends PreventableEvent {
26
+ /**
27
+ * @hidden
28
+ * Constructs the event arguments for the `hide` event.
29
+ * @param anchor - The host element related to the popover.
30
+ * @param popover - The popover element.
31
+ */
32
+ constructor(anchor, popover) {
33
+ super();
34
+ this.anchor = anchor;
35
+ this.popover = popover;
36
+ }
37
+ }
38
+ /**
39
+ * Arguments for the `shown` event. The `shown` event fires after the popover has opened and its opening animation has finished.
40
+ */
41
+ export class PopoverShownEvent {
42
+ /**
43
+ * @hidden
44
+ * Constructs the event arguments for the `shown` event.
45
+ * @param anchor - The host element related to the popover.
46
+ * @param popover - The popover element.
47
+ */
48
+ constructor(anchor, popover) {
49
+ this.anchor = anchor;
50
+ this.popover = popover;
51
+ }
52
+ }
53
+ /**
54
+ * Arguments for the `hidden` event. The `hidden` event fires after the popover has closed and its closing animation has finished.
55
+ */
56
+ export class PopoverHiddenEvent {
57
+ /**
58
+ * @hidden
59
+ * Constructs the event arguments for the `hidden` event.
60
+ * @param anchor - The host element related to the popover.
61
+ */
62
+ constructor(anchor) {
63
+ this.anchor = anchor;
64
+ }
65
+ }
@@ -0,0 +1,17 @@
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 { PopoverComponent } from "../popover/popover.component";
6
+ /**
7
+ * Represents a callback that is used by the [popover]({% slug api_tooltip_popoveranchordirective %}#toc-popover) property.
8
+ * It returns the popover instance to be displayed.
9
+ * ([see example]({% slug callbacks_popover %}#toc-popoverfn))
10
+ */
11
+ export declare type PopoverFn = (anchor: Element) => PopoverComponent;
12
+ /**
13
+ * Represents the callback that is used by the [`templateData`]({% slug api_popovercomponent %}#toc-templateData) property.
14
+ * It returns the custom data that will be passed to the popover templates.
15
+ * ([see example]({% slug callbacks_popover %}#toc-popoverdatafn))
16
+ */
17
+ export declare type PopoverDataFn = (anchor: Element) => any;
@@ -0,0 +1,4 @@
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
+ *-------------------------------------------------------------------------------------------*/
@@ -0,0 +1,8 @@
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
+ /**
6
+ * Specifies the possible events on which the Popover could be shown.
7
+ */
8
+ export declare type PopoverShowOption = 'hover' | 'click' | 'none' | 'focus';
@@ -0,0 +1,4 @@
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
+ *-------------------------------------------------------------------------------------------*/
@@ -1,9 +1,9 @@
1
1
  /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2020 Progress Software Corporation. All rights reserved.
2
+ * Copyright © 2021 Progress Software Corporation. All rights reserved.
3
3
  * Licensed under commercial license. See LICENSE.md in the project root for more information
4
4
  *-------------------------------------------------------------------------------------------*/
5
5
  /**
6
- * Specifies the position of the Tooltip in relation to the anchor element.
6
+ * Specifies the position of the Tooltip or Popover in relation to the anchor element.
7
7
  *
8
8
  * The available options are:
9
9
  * - `top` (default)—Aligns the tooltip above the `anchor` element.
@@ -1,4 +1,4 @@
1
1
  /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2020 Progress Software Corporation. All rights reserved.
2
+ * Copyright © 2021 Progress Software Corporation. All rights reserved.
3
3
  * Licensed under commercial license. See LICENSE.md in the project root for more information
4
4
  *-------------------------------------------------------------------------------------------*/
@@ -1,5 +1,5 @@
1
1
  /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2020 Progress Software Corporation. All rights reserved.
2
+ * Copyright © 2021 Progress Software Corporation. All rights reserved.
3
3
  * Licensed under commercial license. See LICENSE.md in the project root for more information
4
4
  *-------------------------------------------------------------------------------------------*/
5
5
  /**
@@ -1,4 +1,4 @@
1
1
  /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2020 Progress Software Corporation. All rights reserved.
2
+ * Copyright © 2021 Progress Software Corporation. All rights reserved.
3
3
  * Licensed under commercial license. See LICENSE.md in the project root for more information
4
4
  *-------------------------------------------------------------------------------------------*/
@@ -1,5 +1,5 @@
1
1
  /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2020 Progress Software Corporation. All rights reserved.
2
+ * Copyright © 2021 Progress Software Corporation. All rights reserved.
3
3
  * Licensed under commercial license. See LICENSE.md in the project root for more information
4
4
  *-------------------------------------------------------------------------------------------*/
5
5
  import { PackageMetadata } from '@progress/kendo-licensing';
@@ -1,5 +1,5 @@
1
1
  /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2020 Progress Software Corporation. All rights reserved.
2
+ * Copyright © 2021 Progress Software Corporation. All rights reserved.
3
3
  * Licensed under commercial license. See LICENSE.md in the project root for more information
4
4
  *-------------------------------------------------------------------------------------------*/
5
5
  /**
@@ -9,7 +9,7 @@ export const packageMetadata = {
9
9
  name: '@progress/kendo-angular-tooltip',
10
10
  productName: 'Kendo UI for Angular',
11
11
  productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
12
- publishDate: 1620824286,
12
+ publishDate: 1642537195,
13
13
  version: '',
14
14
  licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
15
15
  };
@@ -0,0 +1,44 @@
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 { ElementRef, NgZone, Renderer2 } from "@angular/core";
6
+ import { PopupService } from "@progress/kendo-angular-popup";
7
+ import { PopoverDirectivesBase } from "./directives-base";
8
+ import { PopoverService } from "./popover.service";
9
+ /**
10
+ * Represents the [`kendoPopoverAnchor`]({% slug configuration_popover %}#toc-anchordirective) directive.
11
+ * It is used to target an element, which should display a popover on interaction.
12
+ *
13
+ * @example
14
+ * ```ts-no-run
15
+ * <button kendoPopoverAnchor [popover]="myPopover">Show Popover</button>
16
+ * ```
17
+ */
18
+ export declare class PopoverAnchorDirective extends PopoverDirectivesBase {
19
+ protected hostEl: ElementRef;
20
+ protected ngZone: NgZone;
21
+ protected popupService: PopupService;
22
+ protected renderer: Renderer2;
23
+ protected popoverService: PopoverService;
24
+ constructor(hostEl: ElementRef, ngZone: NgZone, popupService: PopupService, renderer: Renderer2, popoverService: PopoverService);
25
+ /**
26
+ * Shows the Popover. [See example]({% slug programmaticcontrol_popover %})
27
+ */
28
+ show(): void;
29
+ /**
30
+ * Toggles the visibility of the Popover. [See example]({% slug programmaticcontrol_popover %})
31
+ */
32
+ toggle(): void;
33
+ protected subscribeToEvents(arr: any[]): void;
34
+ protected subscribeClick(): void;
35
+ protected mouseenterHandler: () => void;
36
+ protected mouseleaveHandler: () => void;
37
+ protected focusHandler: () => void;
38
+ protected blurHandler: (args: any) => void;
39
+ /**
40
+ * @hidden
41
+ */
42
+ private onClick;
43
+ private controlVisibility;
44
+ }
@@ -0,0 +1,144 @@
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, ElementRef, NgZone, Renderer2 } from "@angular/core";
7
+ import { closest } from "@progress/kendo-angular-common";
8
+ import { PopupService } from "@progress/kendo-angular-popup";
9
+ import { filter } from "rxjs/operators";
10
+ import { PopoverDirectivesBase } from "./directives-base";
11
+ import { PopoverService } from "./popover.service";
12
+ /**
13
+ * Represents the [`kendoPopoverAnchor`]({% slug configuration_popover %}#toc-anchordirective) directive.
14
+ * It is used to target an element, which should display a popover on interaction.
15
+ *
16
+ * @example
17
+ * ```ts-no-run
18
+ * <button kendoPopoverAnchor [popover]="myPopover">Show Popover</button>
19
+ * ```
20
+ */
21
+ let PopoverAnchorDirective = class PopoverAnchorDirective extends PopoverDirectivesBase {
22
+ constructor(hostEl, ngZone, popupService, renderer, popoverService) {
23
+ super(ngZone, popupService, renderer);
24
+ this.hostEl = hostEl;
25
+ this.ngZone = ngZone;
26
+ this.popupService = popupService;
27
+ this.renderer = renderer;
28
+ this.popoverService = popoverService;
29
+ this.mouseenterHandler = () => {
30
+ this.controlVisibility(this.hostEl.nativeElement, true);
31
+ };
32
+ this.mouseleaveHandler = () => {
33
+ if (this.isPrevented(this.hostEl.nativeElement, false)) {
34
+ return;
35
+ }
36
+ if (!this._hideSub) {
37
+ this._hideSub = this.popoverService.hidePopover.subscribe((val) => {
38
+ const [isPopoverHovered, isAnchorHovered] = val;
39
+ if (!isPopoverHovered && !isAnchorHovered) {
40
+ this.hide();
41
+ }
42
+ });
43
+ }
44
+ };
45
+ this.focusHandler = () => {
46
+ this.controlVisibility(this.hostEl.nativeElement, true);
47
+ };
48
+ this.blurHandler = (args) => {
49
+ const event = args.domEvent;
50
+ if (this.isPrevented(this.hostEl.nativeElement, false)) {
51
+ return;
52
+ }
53
+ // from anchor to popup focus check
54
+ const isFocusInside = !!closest(event.relatedTarget, (node) => node.classList && node.classList.contains('k-popover'));
55
+ if (!isFocusInside) {
56
+ this.hide();
57
+ }
58
+ if (!this._focusInsideSub) {
59
+ // inside popup focus check
60
+ this._focusInsideSub = this.popoverService.isFocusInsidePopover.pipe(filter(v => v !== null)).subscribe((val) => {
61
+ if (!val) {
62
+ this.hide();
63
+ }
64
+ });
65
+ }
66
+ };
67
+ this._popoverService = this.popoverService;
68
+ }
69
+ /**
70
+ * Shows the Popover. [See example]({% slug programmaticcontrol_popover %})
71
+ */
72
+ show() {
73
+ if (this.popupRef) {
74
+ return;
75
+ }
76
+ this.openPopup(this.hostEl.nativeElement);
77
+ }
78
+ /**
79
+ * Toggles the visibility of the Popover. [See example]({% slug programmaticcontrol_popover %})
80
+ */
81
+ toggle() {
82
+ if (this.popupRef) {
83
+ this.hide();
84
+ }
85
+ else {
86
+ this.show();
87
+ }
88
+ }
89
+ subscribeToEvents(arr) {
90
+ this.subs.add(this.renderer.listen(this.hostEl.nativeElement, arr[0].name, () => {
91
+ this.popoverService.emitAnchorState(true, this.hostEl.nativeElement);
92
+ arr[0].handler();
93
+ }));
94
+ this.subs.add(this.renderer.listen(this.hostEl.nativeElement, arr[1].name, (e) => {
95
+ this.popoverService.emitAnchorState(false, null);
96
+ arr[1].handler({ domEvent: e });
97
+ }));
98
+ }
99
+ subscribeClick() {
100
+ if (this.disposeClickListener) {
101
+ this.disposeClickListener();
102
+ }
103
+ this.disposeClickListener = this.renderer.listen(document, 'click', (e) => {
104
+ this.onClick(e);
105
+ });
106
+ }
107
+ /**
108
+ * @hidden
109
+ */
110
+ onClick(event) {
111
+ const isInsidePopup = !!closest(event.target, (node) => node.classList && node.classList.contains('k-popup'));
112
+ let isAnchor = !!closest(event.target, (node) => node === this.hostEl.nativeElement);
113
+ if (isInsidePopup || (this.popupRef && isAnchor)) {
114
+ return;
115
+ }
116
+ if (isAnchor) {
117
+ // on opening
118
+ this.controlVisibility(this.hostEl.nativeElement, true);
119
+ }
120
+ else {
121
+ // on closing
122
+ this.controlVisibility(this.hostEl.nativeElement, false);
123
+ }
124
+ }
125
+ controlVisibility(anchor, show) {
126
+ if (this.isPrevented(anchor, show)) {
127
+ return;
128
+ }
129
+ show ? this.show() : this.hide();
130
+ }
131
+ };
132
+ PopoverAnchorDirective = tslib_1.__decorate([
133
+ Directive({
134
+ selector: '[kendoPopoverAnchor]',
135
+ exportAs: 'kendoPopoverAnchor',
136
+ providers: [PopoverService]
137
+ }),
138
+ tslib_1.__metadata("design:paramtypes", [ElementRef,
139
+ NgZone,
140
+ PopupService,
141
+ Renderer2,
142
+ PopoverService])
143
+ ], PopoverAnchorDirective);
144
+ export { PopoverAnchorDirective };
@@ -0,0 +1,56 @@
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 { ElementRef, NgZone, Renderer2 } from "@angular/core";
6
+ import { PopupService } from "@progress/kendo-angular-popup";
7
+ import { PopoverDirectivesBase } from './directives-base';
8
+ import { PopoverService } from "./popover.service";
9
+ /**
10
+ * Represents the [`kendoPopoverContainer`]({% slug configuration_popover %}#toc-containerdirective) directive.
11
+ * It is used to filter and target multiple elements, which should display a popover on interaction.
12
+ *
13
+ * @example
14
+ * ```ts-no-run
15
+ * <div kendoPopoverContainer [popover]="myPopover" filter=".has-popover">
16
+ * <button class="has-popover">Show Popover</button>
17
+ * <button>Button Without Popover</button>
18
+ * <button class="has-popover">Show Popover</button>
19
+ * </div>
20
+ * ```
21
+ */
22
+ export declare class PopoverContainerDirective extends PopoverDirectivesBase {
23
+ wrapperEl: ElementRef;
24
+ protected ngZone: NgZone;
25
+ protected popupService: PopupService;
26
+ protected renderer: Renderer2;
27
+ protected popoverService: PopoverService;
28
+ /**
29
+ * Specifies a selector for the elements that should display a popover.
30
+ *
31
+ * The possible values include any valid query selector.
32
+ * [See example]({% slug configuration_popover %}#toc-containerdirective)
33
+ */
34
+ filter: string;
35
+ constructor(wrapperEl: ElementRef, ngZone: NgZone, popupService: PopupService, renderer: Renderer2, popoverService: PopoverService);
36
+ /**
37
+ * Shows the Popover.
38
+ *
39
+ * @param anchor&mdash;Specifies the element that will be used as an anchor. The Popover opens relative to that element. [See example]({% slug programmaticcontrol_popover %})
40
+ */
41
+ show(anchor: Element | ElementRef): void;
42
+ /**
43
+ * Toggles the visibility of the Popover. [See example]({% slug programmaticcontrol_popover %})
44
+ *
45
+ * @param anchor&mdash;Specifies the element that will be used as an anchor. The Popover opens relative to that element.
46
+ */
47
+ toggle(anchor: Element | ElementRef): void;
48
+ protected subscribeClick(): void;
49
+ protected mouseenterHandler: (anchor: Element) => void;
50
+ protected mouseleaveHandler: (args: any) => void;
51
+ protected focusHandler: (anchor: Element) => void;
52
+ protected blurHandler: (args: any) => void;
53
+ protected subscribeToEvents(arr: any[]): void;
54
+ private clickHandler;
55
+ private controlVisibility;
56
+ }
@@ -0,0 +1,171 @@
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, ElementRef, Input, NgZone, Renderer2 } from "@angular/core";
7
+ import { closest } from "@progress/kendo-angular-common";
8
+ import { PopupService } from "@progress/kendo-angular-popup";
9
+ import { filter } from "rxjs/operators";
10
+ import { closestBySelector } from "../utils";
11
+ import { PopoverDirectivesBase } from './directives-base';
12
+ import { PopoverService } from "./popover.service";
13
+ /**
14
+ * Represents the [`kendoPopoverContainer`]({% slug configuration_popover %}#toc-containerdirective) directive.
15
+ * It is used to filter and target multiple elements, which should display a popover on interaction.
16
+ *
17
+ * @example
18
+ * ```ts-no-run
19
+ * <div kendoPopoverContainer [popover]="myPopover" filter=".has-popover">
20
+ * <button class="has-popover">Show Popover</button>
21
+ * <button>Button Without Popover</button>
22
+ * <button class="has-popover">Show Popover</button>
23
+ * </div>
24
+ * ```
25
+ */
26
+ let PopoverContainerDirective = class PopoverContainerDirective extends PopoverDirectivesBase {
27
+ constructor(wrapperEl, ngZone, popupService, renderer, popoverService) {
28
+ super(ngZone, popupService, renderer);
29
+ this.wrapperEl = wrapperEl;
30
+ this.ngZone = ngZone;
31
+ this.popupService = popupService;
32
+ this.renderer = renderer;
33
+ this.popoverService = popoverService;
34
+ this.mouseenterHandler = (anchor) => {
35
+ this.controlVisibility(anchor, true);
36
+ };
37
+ this.mouseleaveHandler = (args) => {
38
+ const anchor = args.anchor;
39
+ if (this.isPrevented(anchor, false)) {
40
+ return;
41
+ }
42
+ if (!this._hideSub) {
43
+ this._hideSub = this.popoverService.hidePopover.subscribe((val) => {
44
+ const [isPopoverHovered, , isOriginAnchor, currentAnchor] = val;
45
+ if (!isPopoverHovered && !isOriginAnchor) {
46
+ this.hide();
47
+ if (!isOriginAnchor && currentAnchor) {
48
+ this.show(currentAnchor);
49
+ }
50
+ }
51
+ });
52
+ }
53
+ };
54
+ this.focusHandler = (anchor) => {
55
+ this.controlVisibility(anchor, true);
56
+ };
57
+ this.blurHandler = (args) => {
58
+ const anchor = args.anchor;
59
+ const event = args.domEvent;
60
+ if (this.isPrevented(anchor, false)) {
61
+ return;
62
+ }
63
+ // from anchor to popup focus check
64
+ const isFocusInside = !!closest(event.relatedTarget, (node) => node.classList && node.classList.contains('k-popover'));
65
+ if (!isFocusInside) {
66
+ this.hide();
67
+ }
68
+ if (!this._focusInsideSub) {
69
+ // inside popup focus check
70
+ this._focusInsideSub = this.popoverService.isFocusInsidePopover.pipe(filter(v => v !== null)).subscribe((val) => {
71
+ if (!val && !isFocusInside) {
72
+ this.hide();
73
+ }
74
+ });
75
+ }
76
+ };
77
+ this._popoverService = this.popoverService;
78
+ }
79
+ /**
80
+ * Shows the Popover.
81
+ *
82
+ * @param anchor&mdash;Specifies the element that will be used as an anchor. The Popover opens relative to that element. [See example]({% slug programmaticcontrol_popover %})
83
+ */
84
+ show(anchor) {
85
+ if (this.popupRef) {
86
+ return;
87
+ }
88
+ this.openPopup(anchor);
89
+ }
90
+ /**
91
+ * Toggles the visibility of the Popover. [See example]({% slug programmaticcontrol_popover %})
92
+ *
93
+ * @param anchor&mdash;Specifies the element that will be used as an anchor. The Popover opens relative to that element.
94
+ */
95
+ toggle(anchor) {
96
+ const previousAnchor = this.popupRef && this.popupRef.content.instance.anchor;
97
+ if (this.popupRef) {
98
+ this.hide();
99
+ if (previousAnchor !== anchor) {
100
+ this.show(anchor);
101
+ }
102
+ }
103
+ else {
104
+ this.show(anchor);
105
+ }
106
+ }
107
+ subscribeClick() {
108
+ if (this.disposeClickListener) {
109
+ this.disposeClickListener();
110
+ }
111
+ this.disposeClickListener = this.renderer.listen(document, 'click', (e) => {
112
+ const filterElement = closestBySelector(e.target, this.filter);
113
+ this.clickHandler(filterElement, e);
114
+ });
115
+ }
116
+ subscribeToEvents(arr) {
117
+ const filteredElements = Array.from(document.querySelectorAll(this.filter));
118
+ filteredElements.forEach((el) => {
119
+ this.subs.add(this.renderer.listen(el, arr[0].name, () => {
120
+ this.popoverService.emitAnchorState(true, el);
121
+ arr[0].handler(el);
122
+ }));
123
+ this.subs.add(this.renderer.listen(el, arr[1].name, (e) => {
124
+ this.popoverService.emitAnchorState(false, null);
125
+ arr[1].handler({ anchor: el, domEvent: e });
126
+ }));
127
+ });
128
+ }
129
+ clickHandler(anchor, event) {
130
+ const isInsidePopup = !!closest(event.target, (node) => node.classList && node.classList.contains('k-popup'));
131
+ const popupRefAnchor = this.popupRef && this.popupRef.content.instance.anchor;
132
+ let isOriginAnchor = !!closest(event.target, (node) => node === (popupRefAnchor ? popupRefAnchor : anchor));
133
+ if (this.showOn !== 'click' || isInsidePopup || (this.popupRef && isOriginAnchor)) {
134
+ return;
135
+ }
136
+ if (!anchor && this.popupRef) {
137
+ this.controlVisibility(anchor, false);
138
+ return;
139
+ }
140
+ if (isOriginAnchor) {
141
+ this.controlVisibility(anchor, true);
142
+ }
143
+ else if (this.popupRef) {
144
+ this.controlVisibility(anchor, false);
145
+ this.controlVisibility(anchor, true);
146
+ }
147
+ }
148
+ controlVisibility(anchor, show) {
149
+ if (this.isPrevented(anchor, show)) {
150
+ return;
151
+ }
152
+ show ? this.show(anchor) : this.hide();
153
+ }
154
+ };
155
+ tslib_1.__decorate([
156
+ Input(),
157
+ tslib_1.__metadata("design:type", String)
158
+ ], PopoverContainerDirective.prototype, "filter", void 0);
159
+ PopoverContainerDirective = tslib_1.__decorate([
160
+ Directive({
161
+ selector: '[kendoPopoverContainer]',
162
+ exportAs: 'kendoPopoverContainer',
163
+ providers: [PopoverService]
164
+ }),
165
+ tslib_1.__metadata("design:paramtypes", [ElementRef,
166
+ NgZone,
167
+ PopupService,
168
+ Renderer2,
169
+ PopoverService])
170
+ ], PopoverContainerDirective);
171
+ export { PopoverContainerDirective };
@@ -0,0 +1,87 @@
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 { ElementRef, NgZone, OnDestroy, Renderer2 } from "@angular/core";
6
+ import { PopupRef, PopupService } from "@progress/kendo-angular-popup";
7
+ import { PopoverFn } from "../models/functions.model";
8
+ import { PopoverShowOption } from "../models/popover-show-option.type";
9
+ import { PopoverComponent } from "./popover.component";
10
+ import { PopoverService } from "./popover.service";
11
+ import { Subscription } from "rxjs";
12
+ /**
13
+ * @hidden
14
+ */
15
+ export declare abstract class PopoverDirectivesBase implements OnDestroy {
16
+ protected ngZone: NgZone;
17
+ protected popupService: PopupService;
18
+ protected renderer: Renderer2;
19
+ /**
20
+ * Specifies the popover instance that will be rendered.
21
+ * Accepts a [`PopoverComponent`]({% slug api_tooltip_popovercomponent %}) instance or
22
+ * a [`PopoverFn`]({% slug api_tooltip_popoverfn %}) callback which returns a [`PopoverComponent`]({% slug api_tooltip_popovercomponent %}) instance
23
+ * depending on the current anchor element.
24
+ *
25
+ * [See example]({% slug templates_popover %}#toc-popovercallback)
26
+ */
27
+ popover: PopoverComponent | PopoverFn;
28
+ /**
29
+ * The event on which the Popover will be shown
30
+ *
31
+ * The supported values are:
32
+ * - `click` (default) &mdash;The Popover will be shown when its `anchor` element is clicked.
33
+ * - `hover`&mdash;The Popover will be shown when its `anchor` element is hovered.
34
+ * - `focus`&mdash;The Popover will be shown when its `anchor` element is focused.
35
+ * - `none`&mdash;The Popover will not be shown on user interaction. It could be rendered via the Popover API methods.
36
+ */
37
+ showOn: PopoverShowOption;
38
+ popupRef: PopupRef;
39
+ protected disposeHoverOverListener: () => void;
40
+ protected disposeHoverOutListener: () => void;
41
+ protected disposeClickListener: () => void;
42
+ protected disposePopupHoverOutListener: () => void;
43
+ protected disposePopupHoverInListener: () => void;
44
+ protected disposePopupFocusOutListener: () => void;
45
+ protected subs: Subscription;
46
+ protected _popoverService: PopoverService;
47
+ protected _hideSub: Subscription;
48
+ protected _focusInsideSub: Subscription;
49
+ private _popover;
50
+ private _showOn;
51
+ private _popupOpenSub;
52
+ private _popupCloseSub;
53
+ constructor(ngZone: NgZone, popupService: PopupService, renderer: Renderer2);
54
+ ngAfterViewInit(): void;
55
+ ngOnDestroy(): void;
56
+ /**
57
+ * Hides the Popover ([See example]({% slug programmaticcontrol_popover %})).
58
+ */
59
+ hide(): void;
60
+ /**
61
+ * @hidden
62
+ */
63
+ protected closePopup(): void;
64
+ /**
65
+ * @hidden
66
+ */
67
+ protected openPopup(anchor: Element | ElementRef): void;
68
+ /**
69
+ * @hidden
70
+ */
71
+ protected isPrevented(anchorElement: Element, show: boolean): boolean;
72
+ /**
73
+ * @hidden
74
+ */
75
+ protected monitorPopup(): void;
76
+ protected abstract subscribeToEvents(args?: any): void;
77
+ protected abstract subscribeClick(): void;
78
+ protected abstract mouseenterHandler(args?: any): void;
79
+ protected abstract mouseleaveHandler(args?: any): void;
80
+ protected abstract focusHandler(args?: any): void;
81
+ protected abstract blurHandler(args?: any): void;
82
+ /**
83
+ * @hidden
84
+ */
85
+ private initializeEvents;
86
+ private initializeFinishingEvents;
87
+ }