@progress/kendo-angular-tooltip 4.0.0-next.202110211119 → 4.0.0-next.202203021431

package/esm2015/models/events.js

@@ -0,0 +1,65 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { PreventableEvent } from "@progress/kendo-angular-common";
+/**
+ * Arguments for the `show` event. The `show` event fires when a popover is about
+ * to be opened. If you cancel the event, the opening is prevented.
+ */
+export class PopoverShowEvent extends PreventableEvent {
+    /**
+     * @hidden
+     * Constructs the event arguments for the `show` event.
+     * @param anchor - The host element related to the popover.
+     */
+    constructor(anchor) {
+        super();
+        this.anchor = anchor;
+    }
+}
+/**
+ * Arguments for the `hide` event. The `hide` event fires when a popover is about
+ * to be closed. If you cancel the event, the popover stays open.
+ */
+export class PopoverHideEvent extends PreventableEvent {
+    /**
+     * @hidden
+     * Constructs the event arguments for the `hide` event.
+     * @param anchor - The host element related to the popover.
+     * @param popover - The popover element.
+     */
+    constructor(anchor, popover) {
+        super();
+        this.anchor = anchor;
+        this.popover = popover;
+    }
+}
+/**
+ * Arguments for the `shown` event. The `shown` event fires after the popover has opened and its opening animation has finished.
+ */
+export class PopoverShownEvent {
+    /**
+     * @hidden
+     * Constructs the event arguments for the `shown` event.
+     * @param anchor - The host element related to the popover.
+     * @param popover - The popover element.
+     */
+    constructor(anchor, popover) {
+        this.anchor = anchor;
+        this.popover = popover;
+    }
+}
+/**
+ * Arguments for the `hidden` event. The `hidden` event fires after the popover has closed and its closing animation has finished.
+ */
+export class PopoverHiddenEvent {
+    /**
+     * @hidden
+     * Constructs the event arguments for the `hidden` event.
+     * @param anchor - The host element related to the popover.
+     */
+    constructor(anchor) {
+        this.anchor = anchor;
+    }
+}

package/esm2015/models/functions.model.js

@@ -0,0 +1,5 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+export {};

package/esm2015/models/popover-show-option.type.js

@@ -0,0 +1,5 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+export {};

package/esm2015/package-metadata.js

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-tooltip',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1634815104,
+    publishDate: 1646231440,
     version: '',
     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'
 };

package/esm2015/popover/anchor.directive.js

@@ -0,0 +1,147 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive } from "@angular/core";
+import { closest } from "@progress/kendo-angular-common";
+import { filter, take } from "rxjs/operators";
+import { PopoverDirectivesBase } from "./directives-base";
+import { PopoverService } from "./popover.service";
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-popup";
+import * as i2 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 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.ngZone.run(() => {
+            this.openPopup(this.hostEl);
+        });
+        this.popupRef.popupAnchorViewportLeave
+            .pipe(take(1))
+            .subscribe(() => this.hide());
+    }
+    /**
+     * 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PopoverAnchorDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i1.PopupService }, { token: i0.Renderer2 }, { token: i2.PopoverService }], target: i0.ɵɵFactoryTarget.Directive });
+PopoverAnchorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: PopoverAnchorDirective, selector: "[kendoPopoverAnchor]", providers: [PopoverService], exportAs: ["kendoPopoverAnchor"], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PopoverAnchorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoPopoverAnchor]',
+                    exportAs: 'kendoPopoverAnchor',
+                    providers: [PopoverService]
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i1.PopupService }, { type: i0.Renderer2 }, { type: i2.PopoverService }]; } });

package/esm2015/popover/container.directive.js

@@ -0,0 +1,172 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive, Input } from "@angular/core";
+import { closest } from "@progress/kendo-angular-common";
+import { filter, take } from "rxjs/operators";
+import { closestBySelector } from "../utils";
+import { PopoverDirectivesBase } from './directives-base';
+import { PopoverService } from "./popover.service";
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-popup";
+import * as i2 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 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.ngZone.run(() => {
+            this.openPopup(anchor);
+        });
+        this.popupRef.popupAnchorViewportLeave
+            .pipe(take(1))
+            .subscribe(() => this.hide());
+    }
+    /**
+     * 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();
+    }
+}
+PopoverContainerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PopoverContainerDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i1.PopupService }, { token: i0.Renderer2 }, { token: i2.PopoverService }], target: i0.ɵɵFactoryTarget.Directive });
+PopoverContainerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: PopoverContainerDirective, selector: "[kendoPopoverContainer]", inputs: { filter: "filter" }, providers: [PopoverService], exportAs: ["kendoPopoverContainer"], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PopoverContainerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoPopoverContainer]',
+                    exportAs: 'kendoPopoverContainer',
+                    providers: [PopoverService]
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i1.PopupService }, { type: i0.Renderer2 }, { type: i2.PopoverService }]; }, propDecorators: { filter: [{
+                type: Input
+            }] } });