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

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

@@ -0,0 +1,259 @@
+/**-----------------------------------------------------------------------------------------
+* 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";
+const validShowOptions = ['hover', 'click', 'none', 'focus'];
+/**
+ * @hidden
+ */
+export class PopoverDirectivesBase {
+    constructor(ngZone, popupService, renderer) {
+        this.ngZone = ngZone;
+        this.popupService = popupService;
+        this.renderer = renderer;
+        this.subs = new Subscription();
+        this._showOn = 'click';
+    }
+    /**
+     * 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 popover(value) {
+        if (value instanceof PopoverComponent || typeof value === `function`) {
+            this._popover = value;
+        }
+        else {
+            if (isDevMode) {
+                throw new Error(ERRORS.popover);
+            }
+        }
+    }
+    get popover() {
+        return this._popover;
+    }
+    /**
+     * 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 showOn(value) {
+        if (isDevMode && !containsItem(validShowOptions, value)) {
+            throw new Error(ERRORS.showOn);
+        }
+        this._showOn = value;
+    }
+    get showOn() {
+        return this._showOn;
+    }
+    ngAfterViewInit() {
+        this.ngZone.runOutsideAngular(() => {
+            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: /**/
+            }
+        });
+    }
+    ngOnDestroy() {
+        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 %})).
+     */
+    hide() {
+        this.closePopup();
+    }
+    /**
+     * @hidden
+     */
+    closePopup() {
+        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
+     */
+    openPopup(anchor) {
+        const _anchor = anchor instanceof ElementRef ? anchor.nativeElement : anchor;
+        const popoverComp = this.popover instanceof PopoverComponent ? this.popover : this.popover(_anchor);
+        const alignSettings = align(popoverComp.position, popoverComp.offset);
+        const anchorAlign = alignSettings.anchorAlign;
+        const popupAlign = alignSettings.popupAlign;
+        const popupMargin = alignSettings.popupMargin;
+        const _animation = popoverComp.animation;
+        this.ngZone.run(() => {
+            this.popupRef = this.popupService.open({
+                anchor: { nativeElement: _anchor },
+                animate: _animation,
+                content: PopoverComponent,
+                popupAlign,
+                anchorAlign,
+                margin: popupMargin,
+                popupClass: 'k-popup-transparent',
+                collision: { horizontal: 'fit', vertical: 'fit' }
+            });
+            const 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(() => this.hide());
+    }
+    /**
+     * @hidden
+     */
+    isPrevented(anchorElement, show) {
+        const popoverComp = this.popover instanceof PopoverComponent ? this.popover : this.popover(anchorElement);
+        let eventArgs;
+        eventArgs = this.initializeEvents(popoverComp, eventArgs, show, anchorElement);
+        return eventArgs.isDefaultPrevented();
+    }
+    /**
+     * @hidden
+     */
+    monitorPopup() {
+        if (this.showOn === 'hover') {
+            this.ngZone.runOutsideAngular(() => {
+                const popup = this.popupRef.popupElement;
+                this.disposePopupHoverInListener = this.renderer.listen(popup, 'mouseenter', _ => {
+                    this.ngZone.run(_ => this._popoverService.emitPopoverState(true));
+                });
+                this.disposePopupHoverOutListener = this.renderer.listen(popup, 'mouseleave', _ => {
+                    this.ngZone.run(_ => this._popoverService.emitPopoverState(false));
+                });
+            });
+        }
+        if (this.showOn === 'focus') {
+            this.ngZone.runOutsideAngular(() => {
+                const popup = this.popupRef.popupElement;
+                this.disposePopupFocusOutListener = this.renderer.listen(popup, 'focusout', (e) => {
+                    const isInsidePopover = closest(e.relatedTarget, (node) => node.classList && node.classList.contains('k-popover'));
+                    if (!isInsidePopover) {
+                        this.ngZone.run(_ => this._popoverService.emitFocusInsidePopover(false));
+                    }
+                });
+            });
+        }
+    }
+    /**
+     * @hidden
+     */
+    initializeEvents(popoverComp, eventArgs, show, anchorElement) {
+        if (show) {
+            this.ngZone.run(_ => {
+                eventArgs = new PopoverShowEvent(anchorElement);
+                if (!this.popupRef) {
+                    popoverComp.show.emit(eventArgs);
+                }
+            });
+        }
+        else {
+            this.ngZone.run(_ => {
+                eventArgs = new PopoverHideEvent(anchorElement, this.popupRef);
+                if (this.popupRef) {
+                    popoverComp.hide.emit(eventArgs);
+                }
+            });
+        }
+        return eventArgs;
+    }
+    initializeFinishingEvents(popoverComp, _anchor) {
+        if (!this._popupOpenSub) {
+            this.popupRef.popupOpen.subscribe(() => {
+                const eventArgs = new PopoverShownEvent(_anchor, this.popupRef);
+                popoverComp.shown.emit(eventArgs);
+            });
+        }
+        if (!this._popupCloseSub) {
+            this.popupRef.popupClose.subscribe(() => {
+                this.ngZone.run(_ => {
+                    const 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);

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