@progress/kendo-angular-tooltip 3.1.6 → 4.0.0-dev.202204131841

package/dist/npm/tooltip/tooltip.directive.js

@@ -1,454 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-var core_1 = require("@angular/core");
-var operators_1 = require("rxjs/operators");
-var rxjs_1 = require("rxjs");
-var kendo_angular_popup_1 = require("@progress/kendo-angular-popup");
-var kendo_licensing_1 = require("@progress/kendo-licensing");
-var package_metadata_1 = require("../package-metadata");
-var tooltip_settings_1 = require("./tooltip.settings");
-var tooltip_content_component_1 = require("../tooltip/tooltip.content.component");
-var utils_1 = require("../utils");
-/**
- * Represents the [Kendo UI Tooltip directive for Angular]({% slug overview_tooltip %}).
- * Used to display additional information that is related to an element.
- *
- * @example
- * ```ts-no-run
- * <div kendoTooltip>
- *    <a title="Tooltip title" href="foo">foo</a>
- * </div>
- * ```
- */
-var TooltipDirective = /** @class */ (function () {
-    function TooltipDirective(tooltipWrapper, ngZone, renderer, popupService, settings, legacySettings) {
-        var _this = this;
-        this.tooltipWrapper = tooltipWrapper;
-        this.ngZone = ngZone;
-        this.renderer = renderer;
-        this.popupService = popupService;
-        /**
-         * Specifies a selector for elements within a container which will display a tooltip
-         * ([see example]({% slug anchorelements_tooltip %})). The possible values include any
-         * DOM `selector`. The default value is `[title]`.
-         */
-        this.filter = '[title]';
-        /**
-         * Specifies the position of the Tooltip that is relative to the
-         * anchor element ([see example]({% slug positioning_tooltip %})).
-         *
-         * The possible values are:
-         * * `top` (default)
-         * * `bottom`
-         * * `left`
-         * * `right`
-         */
-        this.position = 'top';
-        /**
-         * Specifies the delay in milliseconds before the Tooltip is shown.
-         * * `100` (default) milliseconds.
-         */
-        this.showAfter = 100;
-        /**
-         * Specifies if the Тooltip will display a callout arrow.
-         *
-         * The possible values are:
-         * * `true` (default)
-         * * `false`
-         */
-        this.callout = true;
-        /**
-         * Specifies if the Тooltip will display a **Close** button
-         * ([see example]({% slug closable_tooltip %})).
-         *
-         * The possible values are:
-         * * `true`
-         * * `false`
-         */
-        this.closable = false;
-        /**
-         * Specifies the offset in pixels between the Tooltip and the anchor. Defaults to `6` pixels.
-         * If the `callout` property is set to `true`, the offset is rendered from the callout arrow.
-         * If the `callout` property is set to `false`, the offset is rendered from the content of the Tooltip.
-         */
-        this.offset = 6;
-        this.anchor = null;
-        this.validPositions = ['top', 'bottom', 'right', 'left'];
-        this.validShowOptions = ['hover', 'click', 'none'];
-        kendo_licensing_1.validatePackage(package_metadata_1.packageMetadata);
-        Object.assign(this, settings, legacySettings);
-        this.ngZone.runOutsideAngular(function () {
-            var wrapper = _this.tooltipWrapper.nativeElement;
-            _this.anchorTitleSubscription = rxjs_1.fromEvent(wrapper, 'mouseover')
-                .pipe(operators_1.filter(function () { return _this.filter !== ''; }))
-                .subscribe(function (e) {
-                var filterElement = utils_1.closestBySelector(e.target, _this.filter);
-                if (filterElement) {
-                    _this.hideElementTitle({ nativeElement: filterElement });
-                }
-            });
-            _this.mouseOverSubscription = rxjs_1.fromEvent(wrapper, 'mouseover')
-                .pipe(operators_1.debounceTime(100), operators_1.filter(function () { return _this.filter !== ''; }))
-                .subscribe(function (e) { return _this.onMouseOver(e); });
-            _this.mouseOutSubscription = rxjs_1.fromEvent(wrapper, 'mouseout')
-                .pipe(operators_1.debounceTime(100))
-                .subscribe(function (e) { return _this.onMouseOut(e); });
-        });
-    }
-    Object.defineProperty(TooltipDirective.prototype, "tooltipTemplate", {
-        get: function () { return this.template; },
-        /**
-         * Sets the content of the Tooltip as a template reference
-         * ([see example]({% slug templates_tooltip %})).
-         */
-        set: function (value) {
-            this.template = value;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    /**
-     * Shows the Tooltip.
-     * @param anchor&mdash; ElementRef|Element.
-     * Specifies the element that will be used as an anchor. The Tooltip opens relative to that element.
-     */
-    TooltipDirective.prototype.show = function (anchor) {
-        var _this = this;
-        if (this.popupRef) {
-            return;
-        }
-        if (anchor instanceof Element) {
-            anchor = { nativeElement: anchor };
-        }
-        this.anchor = anchor;
-        if (this.showOn === 'hover') {
-            if (this.popupRef) {
-                return;
-            }
-            clearTimeout(this.showTimeout);
-            this.showTimeout = window.setTimeout(function () { return _this.showContent(_this.anchor); }, this.showAfter);
-        }
-        else {
-            this.hideElementTitle(this.anchor);
-            this.showContent(this.anchor);
-        }
-    };
-    /**
-     * Hides the Tooltip.
-     */
-    TooltipDirective.prototype.hide = function () {
-        clearTimeout(this.showTimeout);
-        var anchor = this.anchor && this.anchor.nativeElement;
-        if (anchor && anchor.getAttribute('data-title')) {
-            if (!anchor.getAttribute('title') && anchor.hasAttribute('title')) {
-                anchor.setAttribute('title', anchor.getAttribute('data-title'));
-            }
-            anchor.setAttribute('data-title', '');
-        }
-        if (this.popupMouseOutSubscription) {
-            this.popupMouseOutSubscription.unsubscribe();
-        }
-        if (this.closeClickSubscription) {
-            this.closeClickSubscription.unsubscribe();
-        }
-        this.closePopup();
-    };
-    /**
-     * Toggle visibility of the Tooltip.
-     *
-     * @param anchor&mdash; ElementRef|Element. Specifies the element that will be used as an anchor.
-     * @param show&mdash; Optional. Boolean. Specifies if the Tooltip will be rendered.
-     */
-    TooltipDirective.prototype.toggle = function (anchor, show) {
-        var previousAnchor = this.anchor && this.anchor.nativeElement;
-        if (anchor instanceof Element) {
-            anchor = { nativeElement: anchor };
-        }
-        if (previousAnchor !== anchor.nativeElement) {
-            this.hide();
-        }
-        if (previousAnchor === anchor.nativeElement && this.showOn === 'click') {
-            this.hide();
-        }
-        if (typeof show === 'undefined') {
-            show = !this.popupRef;
-        }
-        if (show) {
-            this.show(anchor);
-        }
-        else {
-            this.hide();
-        }
-    };
-    TooltipDirective.prototype.ngOnInit = function () {
-        if (this.showOn === undefined) {
-            this.showOn = 'hover';
-        }
-        this.verifyProperties();
-    };
-    TooltipDirective.prototype.ngOnChanges = function (changes) {
-        if (changes.showOn) {
-            this.subscribeClick();
-        }
-    };
-    TooltipDirective.prototype.ngAfterViewChecked = function () {
-        if (!this.popupRef) {
-            return;
-        }
-        if (this.anchor &&
-            !utils_1.hasParent(this.anchor.nativeElement || this.anchor, this.tooltipWrapper.nativeElement)) {
-            this.anchor = null;
-            this.hide();
-        }
-    };
-    TooltipDirective.prototype.ngOnDestroy = function () {
-        this.hide();
-        this.template = null;
-        this.anchorTitleSubscription.unsubscribe();
-        this.mouseOverSubscription.unsubscribe();
-        this.mouseOutSubscription.unsubscribe();
-        if (this.mouseClickSubscription) {
-            this.mouseClickSubscription.unsubscribe();
-        }
-        if (this.popupPositionChangeSubscription) {
-            this.popupPositionChangeSubscription.unsubscribe();
-        }
-        if (this.popupMouseOutSubscription) {
-            this.popupMouseOutSubscription.unsubscribe();
-        }
-    };
-    TooltipDirective.prototype.showContent = function (anchorRef) {
-        var _this = this;
-        if (!anchorRef.nativeElement.getAttribute('data-title') && !this.template) {
-            return;
-        }
-        this.ngZone.run(function () {
-            _this.openPopup(anchorRef);
-            _this.bindContent(_this.popupRef.content, anchorRef);
-        });
-        this.popupRef.popupAnchorViewportLeave
-            .pipe(operators_1.take(1))
-            .subscribe(function () { return _this.hide(); });
-    };
-    TooltipDirective.prototype.bindContent = function (contentComponent, anchorRef) {
-        var _this = this;
-        var content = contentComponent.instance;
-        this.closeClickSubscription = content.close
-            .subscribe(function () { _this.hide(); });
-        if (!this.template) {
-            content.templateString = this.anchor.nativeElement.getAttribute('data-title');
-        }
-        else {
-            content.templateRef = this.template;
-        }
-        if (this.titleTemplate) {
-            content.titleTemplate = this.titleTemplate;
-        }
-        content.closeTitle = this.closeTitle;
-        content.anchor = anchorRef;
-        content.callout = this.callout;
-        content.closable = this.closable;
-        content.position = this.position;
-        content.tooltipWidth = this.tooltipWidth;
-        content.tooltipHeight = this.tooltipHeight;
-        this.popupRef.content.changeDetectorRef.detectChanges();
-    };
-    TooltipDirective.prototype.hideElementTitle = function (elementRef) {
-        var element = elementRef.nativeElement;
-        if (element.getAttribute('title')) {
-            element.setAttribute('data-title', element.getAttribute('title'));
-            element.setAttribute('title', '');
-        }
-    };
-    TooltipDirective.prototype.openPopup = function (anchorRef) {
-        var _this = this;
-        var alignSettings = utils_1.align(this.position, this.offset);
-        var anchorAlign = alignSettings.anchorAlign;
-        var popupAlign = alignSettings.popupAlign;
-        var popupMargin = alignSettings.popupMargin;
-        this.popupRef = this.popupService.open({
-            anchor: anchorRef,
-            anchorAlign: anchorAlign,
-            animate: false,
-            content: tooltip_content_component_1.TooltipContentComponent,
-            collision: utils_1.collision(this.collision, this.position),
-            margin: popupMargin,
-            popupAlign: popupAlign,
-            popupClass: 'k-popup-transparent'
-        });
-        this.renderer.addClass(this.popupRef.popupElement, 'k-tooltip-wrapper');
-        if (this.tooltipClass) {
-            this.renderer.addClass(this.popupRef.popupElement, this.tooltipClass);
-        }
-        var popupInstance = this.popupRef.content.instance;
-        if (popupInstance.callout) {
-            this.popupPositionChangeSubscription = this.popupRef.popupPositionChange
-                .subscribe(function (_a) {
-                var flip = _a.flip;
-                var isFlip = flip.horizontal === true || flip.vertical === true;
-                popupInstance.updateCalloutPosition(_this.position, isFlip);
-            });
-        }
-        if (this.showOn === 'hover') {
-            this.ngZone.runOutsideAngular(function () {
-                var popup = _this.popupRef.popupElement;
-                _this.popupMouseOutSubscription = rxjs_1.fromEvent(popup, 'mouseout')
-                    .subscribe(function (e) { return _this.onMouseOut(e); });
-            });
-        }
-    };
-    TooltipDirective.prototype.closePopup = function () {
-        if (this.popupRef) {
-            this.popupRef.close();
-            this.popupRef = null;
-        }
-        if (this.popupPositionChangeSubscription) {
-            this.popupPositionChangeSubscription.unsubscribe();
-        }
-    };
-    TooltipDirective.prototype.subscribeClick = function () {
-        var _this = this;
-        if (this.mouseClickSubscription) {
-            this.mouseClickSubscription.unsubscribe();
-        }
-        if (this.showOn === 'click') {
-            this.mouseClickSubscription = rxjs_1.fromEvent(document, 'click')
-                .pipe(operators_1.filter(function () { return _this.filter !== ''; }))
-                .subscribe(function (e) { return _this.onMouseClick(e, _this.tooltipWrapper.nativeElement); });
-        }
-    };
-    TooltipDirective.prototype.onMouseClick = function (e, wrapper) {
-        var target = e.target;
-        var filterElement = utils_1.closestBySelector(target, this.filter);
-        var popup = this.popupRef && this.popupRef.popupElement;
-        if (popup) {
-            if (popup.contains(target)) {
-                return;
-            }
-            if (this.closable) {
-                return;
-            }
-        }
-        if (wrapper.contains(target) && filterElement) {
-            this.toggle(filterElement, true);
-        }
-        else if (popup) {
-            this.hide();
-        }
-    };
-    TooltipDirective.prototype.onMouseOver = function (e) {
-        var filterElement = utils_1.closestBySelector(e.target, this.filter);
-        if (this.showOn !== 'hover') {
-            return;
-        }
-        if (filterElement) {
-            this.toggle(filterElement, true);
-        }
-    };
-    TooltipDirective.prototype.onMouseOut = function (e) {
-        if (this.showOn !== 'hover') {
-            return;
-        }
-        if (this.closable) {
-            return;
-        }
-        var popup = this.popupRef && this.popupRef.popupElement;
-        var relatedTarget = e.relatedTarget;
-        if (relatedTarget && this.anchor && utils_1.contains(this.anchor.nativeElement, relatedTarget)) {
-            return;
-        }
-        if (relatedTarget && utils_1.contains(popup, relatedTarget)) {
-            return;
-        }
-        this.hide();
-    };
-    TooltipDirective.prototype.verifyProperties = function () {
-        if (!core_1.isDevMode()) {
-            return;
-        }
-        if (!utils_1.containsItem(this.validPositions, this.position)) {
-            throw new Error("Invalid value provided for position property.The available options are 'top', 'bottom', 'left', or 'right'.");
-        }
-        if (!utils_1.containsItem(this.validShowOptions, this.showOn)) {
-            throw new Error("Invalid value provided for showOn property.The available options are 'hover' or 'none'.");
-        }
-    };
-    tslib_1.__decorate([
-        core_1.Input(),
-        tslib_1.__metadata("design:type", String)
-    ], TooltipDirective.prototype, "filter", void 0);
-    tslib_1.__decorate([
-        core_1.Input(),
-        tslib_1.__metadata("design:type", String)
-    ], TooltipDirective.prototype, "position", void 0);
-    tslib_1.__decorate([
-        core_1.Input(),
-        tslib_1.__metadata("design:type", core_1.TemplateRef)
-    ], TooltipDirective.prototype, "titleTemplate", void 0);
-    tslib_1.__decorate([
-        core_1.Input(),
-        tslib_1.__metadata("design:type", String)
-    ], TooltipDirective.prototype, "showOn", void 0);
-    tslib_1.__decorate([
-        core_1.Input(),
-        tslib_1.__metadata("design:type", Number)
-    ], TooltipDirective.prototype, "showAfter", void 0);
-    tslib_1.__decorate([
-        core_1.Input(),
-        tslib_1.__metadata("design:type", Boolean)
-    ], TooltipDirective.prototype, "callout", void 0);
-    tslib_1.__decorate([
-        core_1.Input(),
-        tslib_1.__metadata("design:type", Boolean)
-    ], TooltipDirective.prototype, "closable", void 0);
-    tslib_1.__decorate([
-        core_1.Input(),
-        tslib_1.__metadata("design:type", Number)
-    ], TooltipDirective.prototype, "offset", void 0);
-    tslib_1.__decorate([
-        core_1.Input(),
-        tslib_1.__metadata("design:type", Number)
-    ], TooltipDirective.prototype, "tooltipWidth", void 0);
-    tslib_1.__decorate([
-        core_1.Input(),
-        tslib_1.__metadata("design:type", Number)
-    ], TooltipDirective.prototype, "tooltipHeight", void 0);
-    tslib_1.__decorate([
-        core_1.Input(),
-        tslib_1.__metadata("design:type", String)
-    ], TooltipDirective.prototype, "tooltipClass", void 0);
-    tslib_1.__decorate([
-        core_1.Input(),
-        tslib_1.__metadata("design:type", Object)
-    ], TooltipDirective.prototype, "collision", void 0);
-    tslib_1.__decorate([
-        core_1.Input(),
-        tslib_1.__metadata("design:type", String)
-    ], TooltipDirective.prototype, "closeTitle", void 0);
-    tslib_1.__decorate([
-        core_1.Input(),
-        tslib_1.__metadata("design:type", core_1.TemplateRef),
-        tslib_1.__metadata("design:paramtypes", [core_1.TemplateRef])
-    ], TooltipDirective.prototype, "tooltipTemplate", null);
-    TooltipDirective = tslib_1.__decorate([
-        core_1.Directive({
-            selector: '[kendoTooltip]',
-            exportAs: 'kendoTooltip'
-        }),
-        tslib_1.__param(4, core_1.Optional()),
-        tslib_1.__param(5, core_1.Optional()), tslib_1.__param(5, core_1.Inject(tooltip_settings_1.TOOLTIP_SETTINGS)),
-        tslib_1.__metadata("design:paramtypes", [core_1.ElementRef,
-            core_1.NgZone,
-            core_1.Renderer2,
-            kendo_angular_popup_1.PopupService,
-            tooltip_settings_1.TooltipSettings,
-            tooltip_settings_1.TooltipSettings])
-    ], TooltipDirective);
-    return TooltipDirective;
-}());
-exports.TooltipDirective = TooltipDirective;

package/dist/npm/tooltip/tooltip.settings.js

@@ -1,48 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-var core_1 = require("@angular/core");
-/**
- * Obsolete. Provide the TooltipSettings class instead.
- *
- * @hidden
- */
-exports.TOOLTIP_SETTINGS = new core_1.InjectionToken('kendo-ui-tooltip-settings');
-/**
- * Provides a global configuration for the Kendo UI Tooltip. Once injected through
- * the `AppComponent` constructor, the configuration properties can be overridden.
- *
- * @example
- * ```ts-no-run
- * import { TooltipSettings } from '@progress/kendo-angular-tooltip';
- *
- * _@Component({
- *    selector: 'my-app',
- *    template: `
- *      <div kendoTooltip>
- *          <button title="Saves the current document">Save</button>
- *      </div>`,
- *    providers: [{
- *        provide: TooltipSettings,
- *        useFactory: (): TooltipSettings => ({
- *          // Override default values of tooltips if wanted
- *          position: 'right'
- *        })
- *    }]
- * })
- * export class AppComponent { }
- * ```
- */
-var TooltipSettings = /** @class */ (function () {
-    function TooltipSettings() {
-    }
-    TooltipSettings = tslib_1.__decorate([
-        core_1.Injectable()
-    ], TooltipSettings);
-    return TooltipSettings;
-}());
-exports.TooltipSettings = TooltipSettings;

package/dist/npm/tooltip.module.js

@@ -1,59 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-var core_1 = require("@angular/core");
-var common_1 = require("@angular/common");
-var tooltip_directive_1 = require("./tooltip/tooltip.directive");
-var kendo_angular_popup_1 = require("@progress/kendo-angular-popup");
-var tooltip_content_component_1 = require("./tooltip/tooltip.content.component");
-var localized_messages_directive_1 = require("./localization/localized-messages.directive");
-var COMPONENT_DIRECTIVES = [tooltip_directive_1.TooltipDirective, tooltip_content_component_1.TooltipContentComponent, localized_messages_directive_1.LocalizedMessagesDirective];
-var COMPONENT_MODULES = [kendo_angular_popup_1.PopupModule];
-/**
- * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
- * definition for the Tooltip component.
- *
- * The package exports:
- * - `KendoTooltipDirective`—The Tooltip directive class.
- *
- * @example
- *
- * ```ts-no-run
- * // Import the Tooltip module
- * import { TooltipModule } from '@progress/kendo-angular-tooltip';
- *
- * // The browser platform with a compiler
- * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
- *
- * import { NgModule } from '@angular/core';
- *
- * // Import the app component
- * _@NgModule{{
- *    declarations: [AppComponent], // declare app component
- *    imports:      [BrowserModule, TooltipModule], // import TooltipModule module
- *    bootstrap:    [AppComponent]
- * }}
- * export class AppModule {}
- *
- * // Compile and launch the module
- * platformBrowserDynamic().bootstrapModule(AppModule);
- * ```
- */
-var TooltipModule = /** @class */ (function () {
-    function TooltipModule() {
-    }
-    TooltipModule = tslib_1.__decorate([
-        core_1.NgModule({
-            declarations: [COMPONENT_DIRECTIVES],
-            entryComponents: [tooltip_content_component_1.TooltipContentComponent],
-            imports: [common_1.CommonModule].concat(COMPONENT_MODULES),
-            exports: [COMPONENT_DIRECTIVES]
-        })
-    ], TooltipModule);
-    return TooltipModule;
-}());
-exports.TooltipModule = TooltipModule;

package/dist/npm/tooltips.module.js

@@ -1,47 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-var core_1 = require("@angular/core");
-var tooltip_module_1 = require("./tooltip.module");
-var popover_module_1 = require("./popover.module");
-/**
- * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
- * definition for the Tooltips components.
- *
- * @example
- *
- * ```ts-no-run
- * import { TooltipsModule } from '@progress/kendo-angular-tooltip';
- *
- * // The browser platform with a compiler
- * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
- *
- * import { NgModule } from '@angular/core';
- *
- * // Import the app component
- * _@NgModule{{
- *    declarations: [AppComponent], // declare app component
- *    imports:      [BrowserModule, TooltipsModule], // import TooltipsModule module
- *    bootstrap:    [AppComponent]
- * }}
- * export class AppModule {}
- *
- * // Compile and launch the module
- * platformBrowserDynamic().bootstrapModule(AppModule);
- * ```
- */
-var TooltipsModule = /** @class */ (function () {
-    function TooltipsModule() {
-    }
-    TooltipsModule = tslib_1.__decorate([
-        core_1.NgModule({
-            exports: [tooltip_module_1.TooltipModule, popover_module_1.PopoverModule]
-        })
-    ], TooltipsModule);
-    return TooltipsModule;
-}());
-exports.TooltipsModule = TooltipsModule;