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

package/dist/es/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;
+}

package/dist/es/popover/directives-base.js

@@ -0,0 +1,274 @@
+/**-----------------------------------------------------------------------------------------
+* 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 { ElementRef, Input, isDevMode } from "@angular/core";
+import { take } from "rxjs/operators";
+import { closest } from "@progress/kendo-angular-common";
+import { ERRORS } from '../constants';
+import { PopoverHideEvent, PopoverShowEvent, PopoverShownEvent, PopoverHiddenEvent } from "../models/events";
+import { align, containsItem } from "../utils";
+import { PopoverComponent } from "./popover.component";
+import { Subscription } from "rxjs";
+var validShowOptions = ['hover', 'click', 'none', 'focus'];
+/**
+ * @hidden
+ */
+var PopoverDirectivesBase = /** @class */ (function () {
+    function PopoverDirectivesBase(ngZone, popupService, renderer) {
+        this.ngZone = ngZone;
+        this.popupService = popupService;
+        this.renderer = renderer;
+        this.subs = new Subscription();
+        this._showOn = 'click';
+    }
+    Object.defineProperty(PopoverDirectivesBase.prototype, "popover", {
+        get: function () {
+            return this._popover;
+        },
+        /**
+         * 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)
+         */
+        set: function (value) {
+            if (value instanceof PopoverComponent || typeof value === "function") {
+                this._popover = value;
+            }
+            else {
+                if (isDevMode) {
+                    throw new Error(ERRORS.popover);
+                }
+            }
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(PopoverDirectivesBase.prototype, "showOn", {
+        get: function () {
+            return this._showOn;
+        },
+        /**
+         * 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.
+         */
+        set: function (value) {
+            if (isDevMode && !containsItem(validShowOptions, value)) {
+                throw new Error(ERRORS.showOn);
+            }
+            this._showOn = value;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    PopoverDirectivesBase.prototype.ngAfterViewInit = function () {
+        var _this = this;
+        this.ngZone.runOutsideAngular(function () {
+            switch (_this.showOn) {
+                case 'hover':
+                    _this.subscribeToEvents([{
+                            name: 'mouseenter', handler: _this.mouseenterHandler
+                        }, {
+                            name: 'mouseleave', handler: _this.mouseleaveHandler
+                        }]);
+                    break;
+                case 'focus':
+                    _this.subscribeToEvents([{
+                            name: 'focus', handler: _this.focusHandler
+                        }, {
+                            name: 'blur', handler: _this.blurHandler
+                        }]);
+                    break;
+                case 'click':
+                    _this.subscribeClick();
+                    break;
+                default: /**/
+            }
+        });
+    };
+    PopoverDirectivesBase.prototype.ngOnDestroy = function () {
+        this.closePopup();
+        if (this.disposeHoverOverListener) {
+            this.disposeHoverOverListener();
+        }
+        if (this.disposeHoverOutListener) {
+            this.disposeHoverOutListener();
+        }
+        if (this.disposeClickListener) {
+            this.disposeClickListener();
+        }
+        if (this._focusInsideSub) {
+            this._focusInsideSub.unsubscribe();
+        }
+        if (this._hideSub) {
+            this._hideSub.unsubscribe();
+        }
+        if (this.subs) {
+            this.subs.unsubscribe();
+        }
+        if (this._popupOpenSub) {
+            this._popupOpenSub.unsubscribe();
+        }
+        if (this._popupCloseSub) {
+            this._popupCloseSub.unsubscribe();
+        }
+    };
+    /**
+     * Hides the Popover ([See example]({% slug programmaticcontrol_popover %})).
+     */
+    PopoverDirectivesBase.prototype.hide = function () {
+        this.closePopup();
+    };
+    /**
+     * @hidden
+     */
+    PopoverDirectivesBase.prototype.closePopup = function () {
+        if (this.popupRef) {
+            this.popupRef.close();
+            this.popupRef = null;
+            if (this.disposePopupHoverOutListener) {
+                this.disposePopupHoverOutListener();
+            }
+            if (this.disposePopupHoverInListener) {
+                this.disposePopupHoverInListener();
+            }
+            if (this.disposePopupFocusOutListener) {
+                this.disposePopupFocusOutListener();
+            }
+        }
+    };
+    /**
+     * @hidden
+     */
+    PopoverDirectivesBase.prototype.openPopup = function (anchor) {
+        var _this = this;
+        var _anchor = anchor instanceof ElementRef ? anchor.nativeElement : anchor;
+        var popoverComp = this.popover instanceof PopoverComponent ? this.popover : this.popover(_anchor);
+        var alignSettings = align(popoverComp.position, popoverComp.offset);
+        var anchorAlign = alignSettings.anchorAlign;
+        var popupAlign = alignSettings.popupAlign;
+        var popupMargin = alignSettings.popupMargin;
+        var _animation = popoverComp.animation;
+        this.ngZone.run(function () {
+            _this.popupRef = _this.popupService.open({
+                anchor: { nativeElement: _anchor },
+                animate: _animation,
+                content: PopoverComponent,
+                popupAlign: popupAlign,
+                anchorAlign: anchorAlign,
+                margin: popupMargin,
+                popupClass: 'k-popup-transparent',
+                collision: { horizontal: 'fit', vertical: 'fit' }
+            });
+            var popoverInstance = _this.popupRef.content.instance;
+            Object.assign(popoverInstance, popoverComp);
+            popoverInstance.anchor = anchor;
+            popoverInstance.contextData = popoverInstance.templateData(anchor);
+            popoverInstance.visible = true;
+            _this.popupRef.content.changeDetectorRef.detectChanges();
+            _this.monitorPopup();
+            _this.initializeFinishingEvents(popoverComp, _anchor);
+        });
+        this.popupRef.popupAnchorViewportLeave
+            .pipe(take(1))
+            .subscribe(function () { return _this.hide(); });
+    };
+    /**
+     * @hidden
+     */
+    PopoverDirectivesBase.prototype.isPrevented = function (anchorElement, show) {
+        var popoverComp = this.popover instanceof PopoverComponent ? this.popover : this.popover(anchorElement);
+        var eventArgs;
+        eventArgs = this.initializeEvents(popoverComp, eventArgs, show, anchorElement);
+        return eventArgs.isDefaultPrevented();
+    };
+    /**
+     * @hidden
+     */
+    PopoverDirectivesBase.prototype.monitorPopup = function () {
+        var _this = this;
+        if (this.showOn === 'hover') {
+            this.ngZone.runOutsideAngular(function () {
+                var popup = _this.popupRef.popupElement;
+                _this.disposePopupHoverInListener = _this.renderer.listen(popup, 'mouseenter', function (_) {
+                    _this.ngZone.run(function (_) { return _this._popoverService.emitPopoverState(true); });
+                });
+                _this.disposePopupHoverOutListener = _this.renderer.listen(popup, 'mouseleave', function (_) {
+                    _this.ngZone.run(function (_) { return _this._popoverService.emitPopoverState(false); });
+                });
+            });
+        }
+        if (this.showOn === 'focus') {
+            this.ngZone.runOutsideAngular(function () {
+                var popup = _this.popupRef.popupElement;
+                _this.disposePopupFocusOutListener = _this.renderer.listen(popup, 'focusout', function (e) {
+                    var isInsidePopover = closest(e.relatedTarget, function (node) { return node.classList && node.classList.contains('k-popover'); });
+                    if (!isInsidePopover) {
+                        _this.ngZone.run(function (_) { return _this._popoverService.emitFocusInsidePopover(false); });
+                    }
+                });
+            });
+        }
+    };
+    /**
+     * @hidden
+     */
+    PopoverDirectivesBase.prototype.initializeEvents = function (popoverComp, eventArgs, show, anchorElement) {
+        var _this = this;
+        if (show) {
+            this.ngZone.run(function (_) {
+                eventArgs = new PopoverShowEvent(anchorElement);
+                if (!_this.popupRef) {
+                    popoverComp.show.emit(eventArgs);
+                }
+            });
+        }
+        else {
+            this.ngZone.run(function (_) {
+                eventArgs = new PopoverHideEvent(anchorElement, _this.popupRef);
+                if (_this.popupRef) {
+                    popoverComp.hide.emit(eventArgs);
+                }
+            });
+        }
+        return eventArgs;
+    };
+    PopoverDirectivesBase.prototype.initializeFinishingEvents = function (popoverComp, _anchor) {
+        var _this = this;
+        if (!this._popupOpenSub) {
+            this.popupRef.popupOpen.subscribe(function () {
+                var eventArgs = new PopoverShownEvent(_anchor, _this.popupRef);
+                popoverComp.shown.emit(eventArgs);
+            });
+        }
+        if (!this._popupCloseSub) {
+            this.popupRef.popupClose.subscribe(function () {
+                _this.ngZone.run(function (_) {
+                    var eventArgs = new PopoverHiddenEvent(_anchor);
+                    popoverComp.hidden.emit(eventArgs);
+                });
+            });
+        }
+    };
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", Object),
+        tslib_1.__metadata("design:paramtypes", [Object])
+    ], PopoverDirectivesBase.prototype, "popover", null);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], PopoverDirectivesBase.prototype, "showOn", null);
+    return PopoverDirectivesBase;
+}());
+export { PopoverDirectivesBase };

package/dist/es/popover/popover.component.d.ts

@@ -0,0 +1,166 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { EventEmitter } from '@angular/core';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { Position } from '../models/position.type';
+import { PopoverDataFn } from '../models/functions.model';
+import { PopoverTitleTemplateDirective } from './template-directives/title-template.directive';
+import { PopoverBodyTemplateDirective } from './template-directives/body-template.directive';
+import { PopoverActionsTemplateDirective } from './template-directives/actions-template.directive';
+import { PopoverHideEvent, PopoverShowEvent, PopoverShownEvent } from '../models/events';
+import { PopoverAnimation } from '../models/animation.model';
+/**
+ * Represents the [Kendo UI Popover component for Angular]({% slug overview_popover %}).
+ * Used to display additional information that is related to a target element.
+ *
+ * @example
+ * ```ts-no-run
+ * <kendo-popover>
+ *    <ng-template kendoPopoverTitleTemplate>Foo Title</ng-template>
+ *    <ng-template kendoPopoverBodyTemplate>Foo Body</ng-template>
+ *    <ng-template kendoPopoverActionsTemplate>Foo Actions</ng-template>
+ * </kendo-popover>
+ * ```
+ */
+export declare class PopoverComponent {
+    private localization;
+    /**
+     * @hidden
+     */
+    anchor: Element;
+    /**
+     * Specifies the position of the Popover in relation to its anchor element. [See example]({% slug positioning_popover %})
+     *
+     * The possible options are:
+     * `top`
+     * `bottom`
+     * `right` (Default)
+     * `left`
+     */
+    position: Position;
+    /**
+     * Specifies the distance from the Popover to its anchor element in pixels.
+     *
+     * @default `6`
+     */
+    offset: number;
+    /**
+     * Determines the width of the popover. Numeric values are treated as pixels.
+     * @default 'auto'
+     */
+    width: number | string;
+    /**
+     * Determines the height of the popover. Numeric values are treated as pixels.
+     * @default 'auto'
+     */
+    height: number | string;
+    /**
+     * @hidden
+     */
+    direction: 'ltr' | 'rtl';
+    /**
+     * Specifies the main header text of the Popover.
+     *
+     * If a `titleTemplate` is provided it would take precedence over the title.
+     */
+    title: string;
+    /**
+     * @hidden
+     * Specifies the secondary header text of the Popover.
+     *
+     * If a `titleTemplate` is provided it would take precedence over the subtitle.
+     */
+    subtitle: string;
+    /**
+     * Represents the text that will be rendered in the Popover body section.
+     *
+     * If a `bodyTemplate` is provided it would take precedence over this text.
+     */
+    body: string;
+    /**
+     * Determines whether a callout will be rendered along the Popover. [See example]({% slug callout_popover %})
+     *
+     * @default true
+     */
+    callout: boolean;
+    /**
+     * Enables and configures the Popover animation. [See example]({% slug animations_popover %})
+     *
+     * The possible options are:
+     *
+     * * `boolean`&mdash;Enables the default animation
+     * * `PopoverAnimation`&mdash;A configuration object which allows setting the `direction`, `duration` and `type` of the animation.
+     *
+     * @default false
+     */
+    animation: PopoverAnimation;
+    /**
+     * Defines a callback function which returns custom data passed to the Popover templates.
+     * It exposes the current anchor element as an argument. [See example]({% slug templates_popover %}#toc-popoverdatacallback)
+     */
+    templateData: PopoverDataFn;
+    /**
+     * @hidden
+     * Determines the visibility of the Popover.
+     */
+    visible: boolean;
+    /**
+     * @hidden
+     */
+    readonly isHidden: boolean;
+    /**
+     * @hidden
+     */
+    readonly hasAttributeHidden: boolean;
+    /**
+     * Fires before the Popover is about to be shown ([see example]({% slug events_popover %})).
+     * The event is preventable. If canceled, the Popover will not be displayed. [See example]({% slug events_popover %})
+     */
+    show: EventEmitter<PopoverShowEvent>;
+    /**
+     * Fires after the Popover has been shown and the animation has ended. [See example]({% slug events_popover %})
+     */
+    shown: EventEmitter<PopoverShownEvent>;
+    /**
+     * Fires when the Popover is about to be hidden ([see example]({% slug events_popover %})).
+     * The event is preventable. If canceled, the Popover will remain visible.
+     */
+    hide: EventEmitter<PopoverHideEvent>;
+    /**
+     * Fires after the Popover has been hidden and the animation has ended. [See example]({% slug events_popover %})
+     */
+    hidden: EventEmitter<any>;
+    /**
+     * @hidden
+     */
+    titleTemplate: PopoverTitleTemplateDirective;
+    /**
+     * @hidden
+     */
+    bodyTemplate: PopoverBodyTemplateDirective;
+    /**
+     * @hidden
+     */
+    actionsTemplate: PopoverActionsTemplateDirective;
+    /**
+     * @hidden
+     */
+    contextData: any;
+    private _offset;
+    private _width;
+    private _height;
+    private subs;
+    constructor(localization: LocalizationService);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    /**
+     * @hidden
+     */
+    getCalloutPosition(): any;
+    /**
+     * @hidden
+     */
+    private _templateData;
+}