@progress/kendo-angular-tooltip 3.0.3 → 3.1.1-dev.202201191851

package/dist/es2015/popover/anchor.directive.d.ts

@@ -0,0 +1,44 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { ElementRef, NgZone, Renderer2 } from "@angular/core";
+import { PopupService } from "@progress/kendo-angular-popup";
+import { PopoverDirectivesBase } from "./directives-base";
+import { PopoverService } from "./popover.service";
+/**
+ * Represents the [`kendoPopoverAnchor`]({% slug configuration_popover %}#toc-anchordirective) directive.
+ * It is used to target an element, which should display a popover on interaction.
+ *
+ * @example
+ * ```ts-no-run
+ * <button kendoPopoverAnchor [popover]="myPopover">Show Popover</button>
+ * ```
+ */
+export declare class PopoverAnchorDirective extends PopoverDirectivesBase {
+    protected hostEl: ElementRef;
+    protected ngZone: NgZone;
+    protected popupService: PopupService;
+    protected renderer: Renderer2;
+    protected popoverService: PopoverService;
+    constructor(hostEl: ElementRef, ngZone: NgZone, popupService: PopupService, renderer: Renderer2, popoverService: PopoverService);
+    /**
+     * Shows the Popover. [See example]({% slug programmaticcontrol_popover %})
+     */
+    show(): void;
+    /**
+     * Toggles the visibility of the Popover. [See example]({% slug programmaticcontrol_popover %})
+     */
+    toggle(): void;
+    protected subscribeToEvents(arr: any[]): void;
+    protected subscribeClick(): void;
+    protected mouseenterHandler: () => void;
+    protected mouseleaveHandler: () => void;
+    protected focusHandler: () => void;
+    protected blurHandler: (args: any) => void;
+    /**
+     * @hidden
+     */
+    private onClick;
+    private controlVisibility;
+}

package/dist/es2015/popover/anchor.directive.js

@@ -0,0 +1,144 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as tslib_1 from "tslib";
+import { Directive, ElementRef, NgZone, Renderer2 } from "@angular/core";
+import { closest } from "@progress/kendo-angular-common";
+import { PopupService } from "@progress/kendo-angular-popup";
+import { filter } from "rxjs/operators";
+import { PopoverDirectivesBase } from "./directives-base";
+import { PopoverService } from "./popover.service";
+/**
+ * Represents the [`kendoPopoverAnchor`]({% slug configuration_popover %}#toc-anchordirective) directive.
+ * It is used to target an element, which should display a popover on interaction.
+ *
+ * @example
+ * ```ts-no-run
+ * <button kendoPopoverAnchor [popover]="myPopover">Show Popover</button>
+ * ```
+ */
+let PopoverAnchorDirective = class PopoverAnchorDirective extends PopoverDirectivesBase {
+    constructor(hostEl, ngZone, popupService, renderer, popoverService) {
+        super(ngZone, popupService, renderer);
+        this.hostEl = hostEl;
+        this.ngZone = ngZone;
+        this.popupService = popupService;
+        this.renderer = renderer;
+        this.popoverService = popoverService;
+        this.mouseenterHandler = () => {
+            this.controlVisibility(this.hostEl.nativeElement, true);
+        };
+        this.mouseleaveHandler = () => {
+            if (this.isPrevented(this.hostEl.nativeElement, false)) {
+                return;
+            }
+            if (!this._hideSub) {
+                this._hideSub = this.popoverService.hidePopover.subscribe((val) => {
+                    const [isPopoverHovered, isAnchorHovered] = val;
+                    if (!isPopoverHovered && !isAnchorHovered) {
+                        this.hide();
+                    }
+                });
+            }
+        };
+        this.focusHandler = () => {
+            this.controlVisibility(this.hostEl.nativeElement, true);
+        };
+        this.blurHandler = (args) => {
+            const event = args.domEvent;
+            if (this.isPrevented(this.hostEl.nativeElement, false)) {
+                return;
+            }
+            // from anchor to popup focus check
+            const isFocusInside = !!closest(event.relatedTarget, (node) => node.classList && node.classList.contains('k-popover'));
+            if (!isFocusInside) {
+                this.hide();
+            }
+            if (!this._focusInsideSub) {
+                // inside popup focus check
+                this._focusInsideSub = this.popoverService.isFocusInsidePopover.pipe(filter(v => v !== null)).subscribe((val) => {
+                    if (!val) {
+                        this.hide();
+                    }
+                });
+            }
+        };
+        this._popoverService = this.popoverService;
+    }
+    /**
+     * Shows the Popover. [See example]({% slug programmaticcontrol_popover %})
+     */
+    show() {
+        if (this.popupRef) {
+            return;
+        }
+        this.openPopup(this.hostEl.nativeElement);
+    }
+    /**
+     * Toggles the visibility of the Popover. [See example]({% slug programmaticcontrol_popover %})
+     */
+    toggle() {
+        if (this.popupRef) {
+            this.hide();
+        }
+        else {
+            this.show();
+        }
+    }
+    subscribeToEvents(arr) {
+        this.subs.add(this.renderer.listen(this.hostEl.nativeElement, arr[0].name, () => {
+            this.popoverService.emitAnchorState(true, this.hostEl.nativeElement);
+            arr[0].handler();
+        }));
+        this.subs.add(this.renderer.listen(this.hostEl.nativeElement, arr[1].name, (e) => {
+            this.popoverService.emitAnchorState(false, null);
+            arr[1].handler({ domEvent: e });
+        }));
+    }
+    subscribeClick() {
+        if (this.disposeClickListener) {
+            this.disposeClickListener();
+        }
+        this.disposeClickListener = this.renderer.listen(document, 'click', (e) => {
+            this.onClick(e);
+        });
+    }
+    /**
+     * @hidden
+     */
+    onClick(event) {
+        const isInsidePopup = !!closest(event.target, (node) => node.classList && node.classList.contains('k-popup'));
+        let isAnchor = !!closest(event.target, (node) => node === this.hostEl.nativeElement);
+        if (isInsidePopup || (this.popupRef && isAnchor)) {
+            return;
+        }
+        if (isAnchor) {
+            // on opening
+            this.controlVisibility(this.hostEl.nativeElement, true);
+        }
+        else {
+            // on closing
+            this.controlVisibility(this.hostEl.nativeElement, false);
+        }
+    }
+    controlVisibility(anchor, show) {
+        if (this.isPrevented(anchor, show)) {
+            return;
+        }
+        show ? this.show() : this.hide();
+    }
+};
+PopoverAnchorDirective = tslib_1.__decorate([
+    Directive({
+        selector: '[kendoPopoverAnchor]',
+        exportAs: 'kendoPopoverAnchor',
+        providers: [PopoverService]
+    }),
+    tslib_1.__metadata("design:paramtypes", [ElementRef,
+        NgZone,
+        PopupService,
+        Renderer2,
+        PopoverService])
+], PopoverAnchorDirective);
+export { PopoverAnchorDirective };

package/dist/es2015/popover/container.directive.d.ts

@@ -0,0 +1,56 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { ElementRef, NgZone, Renderer2 } from "@angular/core";
+import { PopupService } from "@progress/kendo-angular-popup";
+import { PopoverDirectivesBase } from './directives-base';
+import { PopoverService } from "./popover.service";
+/**
+ * Represents the [`kendoPopoverContainer`]({% slug configuration_popover %}#toc-containerdirective) directive.
+ * It is used to filter and target multiple elements, which should display a popover on interaction.
+ *
+ * @example
+ * ```ts-no-run
+ * <div kendoPopoverContainer [popover]="myPopover" filter=".has-popover">
+ *     <button class="has-popover">Show Popover</button>
+ *     <button>Button Without Popover</button>
+ *     <button class="has-popover">Show Popover</button>
+ * </div>
+ * ```
+ */
+export declare class PopoverContainerDirective extends PopoverDirectivesBase {
+    wrapperEl: ElementRef;
+    protected ngZone: NgZone;
+    protected popupService: PopupService;
+    protected renderer: Renderer2;
+    protected popoverService: PopoverService;
+    /**
+     * Specifies a selector for the elements that should display a popover.
+     *
+     * The possible values include any valid query selector.
+     * [See example]({% slug configuration_popover %}#toc-containerdirective)
+     */
+    filter: string;
+    constructor(wrapperEl: ElementRef, ngZone: NgZone, popupService: PopupService, renderer: Renderer2, popoverService: PopoverService);
+    /**
+     * Shows the Popover.
+     *
+     * @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 %})
+     */
+    show(anchor: Element | ElementRef): void;
+    /**
+     * Toggles the visibility of the Popover. [See example]({% slug programmaticcontrol_popover %})
+     *
+     * @param anchor&mdash;Specifies the element that will be used as an anchor. The Popover opens relative to that element.
+     */
+    toggle(anchor: Element | ElementRef): void;
+    protected subscribeClick(): void;
+    protected mouseenterHandler: (anchor: Element) => void;
+    protected mouseleaveHandler: (args: any) => void;
+    protected focusHandler: (anchor: Element) => void;
+    protected blurHandler: (args: any) => void;
+    protected subscribeToEvents(arr: any[]): void;
+    private clickHandler;
+    private controlVisibility;
+}

package/dist/es2015/popover/container.directive.js

@@ -0,0 +1,171 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as tslib_1 from "tslib";
+import { Directive, ElementRef, Input, NgZone, Renderer2 } from "@angular/core";
+import { closest } from "@progress/kendo-angular-common";
+import { PopupService } from "@progress/kendo-angular-popup";
+import { filter } from "rxjs/operators";
+import { closestBySelector } from "../utils";
+import { PopoverDirectivesBase } from './directives-base';
+import { PopoverService } from "./popover.service";
+/**
+ * Represents the [`kendoPopoverContainer`]({% slug configuration_popover %}#toc-containerdirective) directive.
+ * It is used to filter and target multiple elements, which should display a popover on interaction.
+ *
+ * @example
+ * ```ts-no-run
+ * <div kendoPopoverContainer [popover]="myPopover" filter=".has-popover">
+ *     <button class="has-popover">Show Popover</button>
+ *     <button>Button Without Popover</button>
+ *     <button class="has-popover">Show Popover</button>
+ * </div>
+ * ```
+ */
+let PopoverContainerDirective = class PopoverContainerDirective extends PopoverDirectivesBase {
+    constructor(wrapperEl, ngZone, popupService, renderer, popoverService) {
+        super(ngZone, popupService, renderer);
+        this.wrapperEl = wrapperEl;
+        this.ngZone = ngZone;
+        this.popupService = popupService;
+        this.renderer = renderer;
+        this.popoverService = popoverService;
+        this.mouseenterHandler = (anchor) => {
+            this.controlVisibility(anchor, true);
+        };
+        this.mouseleaveHandler = (args) => {
+            const anchor = args.anchor;
+            if (this.isPrevented(anchor, false)) {
+                return;
+            }
+            if (!this._hideSub) {
+                this._hideSub = this.popoverService.hidePopover.subscribe((val) => {
+                    const [isPopoverHovered, , isOriginAnchor, currentAnchor] = val;
+                    if (!isPopoverHovered && !isOriginAnchor) {
+                        this.hide();
+                        if (!isOriginAnchor && currentAnchor) {
+                            this.show(currentAnchor);
+                        }
+                    }
+                });
+            }
+        };
+        this.focusHandler = (anchor) => {
+            this.controlVisibility(anchor, true);
+        };
+        this.blurHandler = (args) => {
+            const anchor = args.anchor;
+            const event = args.domEvent;
+            if (this.isPrevented(anchor, false)) {
+                return;
+            }
+            // from anchor to popup focus check
+            const isFocusInside = !!closest(event.relatedTarget, (node) => node.classList && node.classList.contains('k-popover'));
+            if (!isFocusInside) {
+                this.hide();
+            }
+            if (!this._focusInsideSub) {
+                // inside popup focus check
+                this._focusInsideSub = this.popoverService.isFocusInsidePopover.pipe(filter(v => v !== null)).subscribe((val) => {
+                    if (!val && !isFocusInside) {
+                        this.hide();
+                    }
+                });
+            }
+        };
+        this._popoverService = this.popoverService;
+    }
+    /**
+     * Shows the Popover.
+     *
+     * @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 %})
+     */
+    show(anchor) {
+        if (this.popupRef) {
+            return;
+        }
+        this.openPopup(anchor);
+    }
+    /**
+     * Toggles the visibility of the Popover. [See example]({% slug programmaticcontrol_popover %})
+     *
+     * @param anchor&mdash;Specifies the element that will be used as an anchor. The Popover opens relative to that element.
+     */
+    toggle(anchor) {
+        const previousAnchor = this.popupRef && this.popupRef.content.instance.anchor;
+        if (this.popupRef) {
+            this.hide();
+            if (previousAnchor !== anchor) {
+                this.show(anchor);
+            }
+        }
+        else {
+            this.show(anchor);
+        }
+    }
+    subscribeClick() {
+        if (this.disposeClickListener) {
+            this.disposeClickListener();
+        }
+        this.disposeClickListener = this.renderer.listen(document, 'click', (e) => {
+            const filterElement = closestBySelector(e.target, this.filter);
+            this.clickHandler(filterElement, e);
+        });
+    }
+    subscribeToEvents(arr) {
+        const filteredElements = Array.from(document.querySelectorAll(this.filter));
+        filteredElements.forEach((el) => {
+            this.subs.add(this.renderer.listen(el, arr[0].name, () => {
+                this.popoverService.emitAnchorState(true, el);
+                arr[0].handler(el);
+            }));
+            this.subs.add(this.renderer.listen(el, arr[1].name, (e) => {
+                this.popoverService.emitAnchorState(false, null);
+                arr[1].handler({ anchor: el, domEvent: e });
+            }));
+        });
+    }
+    clickHandler(anchor, event) {
+        const isInsidePopup = !!closest(event.target, (node) => node.classList && node.classList.contains('k-popup'));
+        const popupRefAnchor = this.popupRef && this.popupRef.content.instance.anchor;
+        let isOriginAnchor = !!closest(event.target, (node) => node === (popupRefAnchor ? popupRefAnchor : anchor));
+        if (this.showOn !== 'click' || isInsidePopup || (this.popupRef && isOriginAnchor)) {
+            return;
+        }
+        if (!anchor && this.popupRef) {
+            this.controlVisibility(anchor, false);
+            return;
+        }
+        if (isOriginAnchor) {
+            this.controlVisibility(anchor, true);
+        }
+        else if (this.popupRef) {
+            this.controlVisibility(anchor, false);
+            this.controlVisibility(anchor, true);
+        }
+    }
+    controlVisibility(anchor, show) {
+        if (this.isPrevented(anchor, show)) {
+            return;
+        }
+        show ? this.show(anchor) : this.hide();
+    }
+};
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String)
+], PopoverContainerDirective.prototype, "filter", void 0);
+PopoverContainerDirective = tslib_1.__decorate([
+    Directive({
+        selector: '[kendoPopoverContainer]',
+        exportAs: 'kendoPopoverContainer',
+        providers: [PopoverService]
+    }),
+    tslib_1.__metadata("design:paramtypes", [ElementRef,
+        NgZone,
+        PopupService,
+        Renderer2,
+        PopoverService])
+], PopoverContainerDirective);
+export { PopoverContainerDirective };

package/dist/es2015/popover/directives-base.d.ts

@@ -0,0 +1,87 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { ElementRef, NgZone, OnDestroy, Renderer2 } from "@angular/core";
+import { PopupRef, PopupService } from "@progress/kendo-angular-popup";
+import { PopoverFn } from "../models/functions.model";
+import { PopoverShowOption } from "../models/popover-show-option.type";
+import { PopoverComponent } from "./popover.component";
+import { PopoverService } from "./popover.service";
+import { Subscription } from "rxjs";
+/**
+ * @hidden
+ */
+export declare abstract class PopoverDirectivesBase implements OnDestroy {
+    protected ngZone: NgZone;
+    protected popupService: PopupService;
+    protected renderer: Renderer2;
+    /**
+     * Specifies the popover instance that will be rendered.
+     * Accepts a [`PopoverComponent`]({% slug api_tooltip_popovercomponent %}) instance or
+     * a [`PopoverFn`]({% slug api_tooltip_popoverfn %}) callback which returns a [`PopoverComponent`]({% slug api_tooltip_popovercomponent %}) instance
+     * depending on the current anchor element.
+     *
+     * [See example]({% slug templates_popover %}#toc-popovercallback)
+     */
+    popover: PopoverComponent | PopoverFn;
+    /**
+     * The event on which the Popover will be shown
+     *
+     * The supported values are:
+     * - `click` (default) —The Popover will be shown when its `anchor` element is clicked.
+     * - `hover`—The Popover will be shown when its `anchor` element is hovered.
+     * - `focus`—The Popover will be shown when its `anchor` element is focused.
+     * - `none`—The Popover will not be shown on user interaction. It could be rendered via the Popover API methods.
+     */
+    showOn: PopoverShowOption;
+    popupRef: PopupRef;
+    protected disposeHoverOverListener: () => void;
+    protected disposeHoverOutListener: () => void;
+    protected disposeClickListener: () => void;
+    protected disposePopupHoverOutListener: () => void;
+    protected disposePopupHoverInListener: () => void;
+    protected disposePopupFocusOutListener: () => void;
+    protected subs: Subscription;
+    protected _popoverService: PopoverService;
+    protected _hideSub: Subscription;
+    protected _focusInsideSub: Subscription;
+    private _popover;
+    private _showOn;
+    private _popupOpenSub;
+    private _popupCloseSub;
+    constructor(ngZone: NgZone, popupService: PopupService, renderer: Renderer2);
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    /**
+     * Hides the Popover ([See example]({% slug programmaticcontrol_popover %})).
+     */
+    hide(): void;
+    /**
+     * @hidden
+     */
+    protected closePopup(): void;
+    /**
+     * @hidden
+     */
+    protected openPopup(anchor: Element | ElementRef): void;
+    /**
+     * @hidden
+     */
+    protected isPrevented(anchorElement: Element, show: boolean): boolean;
+    /**
+     * @hidden
+     */
+    protected monitorPopup(): void;
+    protected abstract subscribeToEvents(args?: any): void;
+    protected abstract subscribeClick(): void;
+    protected abstract mouseenterHandler(args?: any): void;
+    protected abstract mouseleaveHandler(args?: any): void;
+    protected abstract focusHandler(args?: any): void;
+    protected abstract blurHandler(args?: any): void;
+    /**
+     * @hidden
+     */
+    private initializeEvents;
+    private initializeFinishingEvents;
+}