@progress/kendo-angular-tooltip 3.0.2 → 3.1.0-dev.202201191059
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE.md +1 -1
- package/NOTICE.txt +119 -79
- package/README.md +1 -1
- package/dist/cdn/js/kendo-angular-tooltip.js +3 -3
- package/dist/cdn/main.js +2 -2
- package/dist/es/constants.d.ts +12 -0
- package/dist/es/constants.js +12 -0
- package/dist/es/index.d.ts +5 -3
- package/dist/es/index.js +3 -1
- package/dist/es/index.metadata.json +1 -1
- package/dist/es/localization/localized-messages.directive.d.ts +1 -1
- package/dist/es/localization/localized-messages.directive.js +1 -1
- package/dist/es/main.d.ts +17 -3
- package/dist/es/main.js +13 -2
- package/dist/es/models/animation.model.d.ts +9 -0
- package/dist/es/models/animation.model.js +4 -0
- package/dist/es/models/events.d.ts +78 -0
- package/dist/es/models/events.js +78 -0
- package/dist/es/models/functions.model.d.ts +17 -0
- package/dist/es/models/functions.model.js +4 -0
- package/dist/es/models/popover-show-option.type.d.ts +8 -0
- package/dist/es/models/popover-show-option.type.js +4 -0
- package/dist/es/models/position.type.d.ts +2 -2
- package/dist/es/models/position.type.js +1 -1
- package/dist/es/models/show.option.type.d.ts +1 -1
- package/dist/es/models/show.option.type.js +1 -1
- package/dist/es/package-metadata.d.ts +1 -1
- package/dist/es/package-metadata.js +2 -2
- package/dist/es/popover/anchor.directive.d.ts +44 -0
- package/dist/es/popover/anchor.directive.js +150 -0
- package/dist/es/popover/container.directive.d.ts +56 -0
- package/dist/es/popover/container.directive.js +176 -0
- package/dist/es/popover/directives-base.d.ts +87 -0
- package/dist/es/popover/directives-base.js +274 -0
- package/dist/es/popover/popover.component.d.ts +166 -0
- package/dist/es/popover/popover.component.js +300 -0
- package/dist/es/popover/popover.service.d.ts +30 -0
- package/dist/es/popover/popover.service.js +88 -0
- package/dist/es/popover/template-directives/actions-template.directive.d.ts +15 -0
- package/dist/es/popover/template-directives/actions-template.directive.js +26 -0
- package/dist/es/popover/template-directives/body-template.directive.d.ts +15 -0
- package/dist/es/popover/template-directives/body-template.directive.js +26 -0
- package/dist/es/popover/template-directives/title-template.directive.d.ts +15 -0
- package/dist/es/popover/template-directives/title-template.directive.js +26 -0
- package/dist/es/popover.module.d.ts +31 -0
- package/dist/es/popover.module.js +65 -0
- package/dist/es/tooltip/tooltip.content.component.d.ts +1 -1
- package/dist/es/tooltip/tooltip.content.component.js +1 -1
- package/dist/es/tooltip/tooltip.directive.d.ts +1 -1
- package/dist/es/tooltip/tooltip.directive.js +5 -5
- package/dist/es/tooltip/tooltip.settings.d.ts +1 -1
- package/dist/es/tooltip/tooltip.settings.js +1 -1
- package/dist/es/tooltip.module.d.ts +1 -1
- package/dist/es/tooltip.module.js +1 -1
- package/dist/es/tooltips.module.d.ts +32 -0
- package/dist/es/tooltips.module.js +45 -0
- package/dist/es/utils.d.ts +2 -2
- package/dist/es/utils.js +2 -2
- package/dist/es2015/constants.d.ts +12 -0
- package/dist/es2015/constants.js +12 -0
- package/dist/es2015/index.d.ts +3 -1
- package/dist/es2015/index.js +3 -1
- package/dist/es2015/index.metadata.json +1 -1
- package/dist/es2015/localization/localized-messages.directive.d.ts +1 -1
- package/dist/es2015/localization/localized-messages.directive.js +1 -1
- package/dist/es2015/main.d.ts +17 -3
- package/dist/es2015/main.js +13 -2
- package/dist/es2015/models/animation.model.d.ts +9 -0
- package/dist/es2015/models/animation.model.js +4 -0
- package/dist/es2015/models/events.d.ts +78 -0
- package/dist/es2015/models/events.js +65 -0
- package/dist/es2015/models/functions.model.d.ts +17 -0
- package/dist/es2015/models/functions.model.js +4 -0
- package/dist/es2015/models/popover-show-option.type.d.ts +8 -0
- package/dist/es2015/models/popover-show-option.type.js +4 -0
- package/dist/es2015/models/position.type.d.ts +2 -2
- package/dist/es2015/models/position.type.js +1 -1
- package/dist/es2015/models/show.option.type.d.ts +1 -1
- package/dist/es2015/models/show.option.type.js +1 -1
- package/dist/es2015/package-metadata.d.ts +1 -1
- package/dist/es2015/package-metadata.js +2 -2
- package/dist/es2015/popover/anchor.directive.d.ts +44 -0
- package/dist/es2015/popover/anchor.directive.js +144 -0
- package/dist/es2015/popover/container.directive.d.ts +56 -0
- package/dist/es2015/popover/container.directive.js +171 -0
- package/dist/es2015/popover/directives-base.d.ts +87 -0
- package/dist/es2015/popover/directives-base.js +259 -0
- package/dist/es2015/popover/popover.component.d.ts +166 -0
- package/dist/es2015/popover/popover.component.js +304 -0
- package/dist/es2015/popover/popover.service.d.ts +30 -0
- package/dist/es2015/popover/popover.service.js +67 -0
- package/dist/es2015/popover/template-directives/actions-template.directive.d.ts +15 -0
- package/dist/es2015/popover/template-directives/actions-template.directive.js +25 -0
- package/dist/es2015/popover/template-directives/body-template.directive.d.ts +15 -0
- package/dist/es2015/popover/template-directives/body-template.directive.js +25 -0
- package/dist/es2015/popover/template-directives/title-template.directive.d.ts +15 -0
- package/dist/es2015/popover/template-directives/title-template.directive.js +25 -0
- package/dist/es2015/popover.module.d.ts +31 -0
- package/dist/es2015/popover.module.js +63 -0
- package/dist/es2015/tooltip/tooltip.content.component.d.ts +1 -1
- package/dist/es2015/tooltip/tooltip.content.component.js +1 -1
- package/dist/es2015/tooltip/tooltip.directive.d.ts +1 -1
- package/dist/es2015/tooltip/tooltip.directive.js +5 -5
- package/dist/es2015/tooltip/tooltip.settings.d.ts +1 -1
- package/dist/es2015/tooltip/tooltip.settings.js +1 -1
- package/dist/es2015/tooltip.module.d.ts +1 -1
- package/dist/es2015/tooltip.module.js +1 -1
- package/dist/es2015/tooltips.module.d.ts +32 -0
- package/dist/es2015/tooltips.module.js +42 -0
- package/dist/es2015/utils.d.ts +2 -2
- package/dist/es2015/utils.js +2 -2
- package/dist/fesm2015/index.js +1111 -10
- package/dist/fesm5/index.js +1169 -10
- package/dist/npm/constants.js +14 -0
- package/dist/npm/index.js +5 -1
- package/dist/npm/localization/localized-messages.directive.js +1 -1
- package/dist/npm/main.js +26 -3
- package/dist/npm/models/animation.model.js +6 -0
- package/dist/npm/models/events.js +80 -0
- package/dist/npm/models/functions.model.js +6 -0
- package/dist/npm/models/popover-show-option.type.js +6 -0
- package/dist/npm/models/position.type.js +1 -1
- package/dist/npm/models/show.option.type.js +1 -1
- package/dist/npm/package-metadata.js +2 -2
- package/dist/npm/popover/anchor.directive.js +152 -0
- package/dist/npm/popover/container.directive.js +178 -0
- package/dist/npm/popover/directives-base.js +276 -0
- package/dist/npm/popover/popover.component.js +302 -0
- package/dist/npm/popover/popover.service.js +90 -0
- package/dist/npm/popover/template-directives/actions-template.directive.js +28 -0
- package/dist/npm/popover/template-directives/body-template.directive.js +28 -0
- package/dist/npm/popover/template-directives/title-template.directive.js +28 -0
- package/dist/npm/popover.module.js +67 -0
- package/dist/npm/tooltip/tooltip.content.component.js +1 -1
- package/dist/npm/tooltip/tooltip.directive.js +4 -4
- package/dist/npm/tooltip/tooltip.settings.js +1 -1
- package/dist/npm/tooltip.module.js +1 -1
- package/dist/npm/tooltips.module.js +47 -0
- package/dist/npm/utils.js +3 -3
- package/dist/systemjs/kendo-angular-tooltip.js +2 -2
- package/package.json +24 -20
|
@@ -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 ©
|
|
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 ©
|
|
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 ©
|
|
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 ©
|
|
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 ©
|
|
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 ©
|
|
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:
|
|
12
|
+
publishDate: 1642589926,
|
|
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—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—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—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—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) —The Popover will be shown when its `anchor` element is clicked.
|
|
33
|
+
* - `hover`—The Popover will be shown when its `anchor` element is hovered.
|
|
34
|
+
* - `focus`—The Popover will be shown when its `anchor` element is focused.
|
|
35
|
+
* - `none`—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
|
+
}
|