@wawjs/ngx-prime 22.0.0

package/fesm2022/wawjs-ngx-prime-tooltip.mjs

@@ -0,0 +1,774 @@
+import { isPlatformBrowser } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Injectable, InjectionToken, inject, NgZone, ViewContainerRef, input, booleanAttribute, numberAttribute, computed, effect, Directive, NgModule } from '@angular/core';
+import { uuid, hasClass, createElement, appendChild, fadeIn, getWindowScrollLeft, getWindowScrollTop, findSingle, getOuterWidth, getOuterHeight, getViewport, removeChild } from '@wawjs/css-prime-utils';
+import { BaseComponent, PARENT_INSTANCE } from '@wawjs/ngx-prime/basecomponent';
+import { BindModule } from '@wawjs/ngx-prime/bind';
+import { ConnectedOverlayScrollHandler } from '@wawjs/ngx-prime/dom';
+import { ZIndexUtils } from '@wawjs/ngx-prime/utils';
+import { style } from '@wawjs/css-prime-styles/tooltip';
+import { BaseStyle } from '@wawjs/ngx-prime/base';
+
+const classes = {
+    root: 'p-tooltip p-component',
+    arrow: 'p-tooltip-arrow',
+    text: 'p-tooltip-text'
+};
+class TooltipStyle extends BaseStyle {
+    name = 'tooltip';
+    style = style;
+    classes = classes;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: TooltipStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: TooltipStyle });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: TooltipStyle, decorators: [{
+            type: Injectable
+        }] });
+/**
+ *
+ * Tooltip directive provides advisory information for a component.
+ *
+ * [Live Demo](https://www.ngx-prime.org/tooltip)
+ *
+ * @module tooltipstyle
+ *
+ */
+var TooltipClasses;
+(function (TooltipClasses) {
+    /**
+     * Class name of the root element
+     */
+    TooltipClasses["root"] = "p-tooltip";
+    /**
+     * Class name of the arrow element
+     */
+    TooltipClasses["arrow"] = "p-tooltip-arrow";
+    /**
+     * Class name of the text element
+     */
+    TooltipClasses["text"] = "p-tooltip-text";
+})(TooltipClasses || (TooltipClasses = {}));
+
+const TOOLTIP_INSTANCE = new InjectionToken('TOOLTIP_INSTANCE');
+/**
+ * Tooltip directive provides advisory information for a component.
+ * @group Components
+ */
+class Tooltip extends BaseComponent {
+    zone = inject(NgZone);
+    viewContainer = inject(ViewContainerRef);
+    componentName = 'Tooltip';
+    $pcTooltip = inject(TOOLTIP_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
+    /**
+     * Position of the tooltip.
+     * @group Props
+     */
+    tooltipPosition = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "tooltipPosition" }] : /* istanbul ignore next */ []));
+    /**
+     * Event to show the tooltip.
+     * @group Props
+     */
+    tooltipEvent = input('hover', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tooltipEvent" }] : /* istanbul ignore next */ []));
+    /**
+     * Type of CSS position.
+     * @group Props
+     */
+    positionStyle = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "positionStyle" }] : /* istanbul ignore next */ []));
+    /**
+     * Style class of the tooltip.
+     * @group Props
+     */
+    tooltipStyleClass = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "tooltipStyleClass" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the z-index should be managed automatically to always go on top or have a fixed value.
+     * @group Props
+     */
+    tooltipZIndex = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "tooltipZIndex" }] : /* istanbul ignore next */ []));
+    /**
+     * By default the tooltip contents are rendered as text. Set to false to support html tags in the content.
+     * @group Props
+     */
+    escape = input(true, { ...(ngDevMode ? { debugName: "escape" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Delay to show the tooltip in milliseconds.
+     * @group Props
+     */
+    showDelay = input(undefined, { ...(ngDevMode ? { debugName: "showDelay" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /**
+     * Delay to hide the tooltip in milliseconds.
+     * @group Props
+     */
+    hideDelay = input(undefined, { ...(ngDevMode ? { debugName: "hideDelay" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /**
+     * Time to wait in milliseconds to hide the tooltip even it is active.
+     * @group Props
+     */
+    life = input(undefined, { ...(ngDevMode ? { debugName: "life" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /**
+     * Specifies the additional vertical offset of the tooltip from its default position.
+     * @group Props
+     */
+    positionTop = input(undefined, { ...(ngDevMode ? { debugName: "positionTop" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /**
+     * Specifies the additional horizontal offset of the tooltip from its default position.
+     * @group Props
+     */
+    positionLeft = input(undefined, { ...(ngDevMode ? { debugName: "positionLeft" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /**
+     * Whether to hide tooltip when hovering over tooltip content.
+     * @group Props
+     */
+    autoHide = input(true, { ...(ngDevMode ? { debugName: "autoHide" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Automatically adjusts the element position when there is not enough space on the selected position.
+     * @group Props
+     */
+    fitContent = input(true, { ...(ngDevMode ? { debugName: "fitContent" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Whether to hide tooltip on escape key press.
+     * @group Props
+     */
+    hideOnEscape = input(true, { ...(ngDevMode ? { debugName: "hideOnEscape" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Whether to show the tooltip only when the target text overflows (e.g., ellipsis is active).
+     * @group Props
+     */
+    showOnEllipsis = input(false, { ...(ngDevMode ? { debugName: "showOnEllipsis" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Content of the tooltip.
+     * @group Props
+     */
+    content = input(undefined, { ...(ngDevMode ? { debugName: "content" } : /* istanbul ignore next */ {}), alias: 'pTooltip' });
+    /**
+     * When present, it specifies that the component should be disabled.
+     * @defaultValue false
+     * @group Props
+     */
+    // eslint-disable-next-line @angular-eslint/no-input-rename -- `tooltipDisabled` is published public API; renaming would break consumers.
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), alias: 'tooltipDisabled', transform: booleanAttribute });
+    /**
+     * Specifies the tooltip configuration options for the component.
+     * @group Props
+     */
+    tooltipOptions = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "tooltipOptions" }] : /* istanbul ignore next */ []));
+    /**
+     * Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name).
+     * @defaultValue 'self'
+     * @group Props
+     */
+    appendTo = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appendTo" }] : /* istanbul ignore next */ []));
+    $appendTo = computed(() => this.appendTo() || this.config.overlayAppendTo(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "$appendTo" }] : /* istanbul ignore next */ []));
+    _tooltipOptions = {
+        tooltipLabel: null,
+        tooltipPosition: 'right',
+        tooltipEvent: 'hover',
+        appendTo: 'body',
+        positionStyle: null,
+        tooltipStyleClass: null,
+        tooltipZIndex: 'auto',
+        escape: true,
+        disabled: null,
+        showDelay: null,
+        hideDelay: null,
+        positionTop: null,
+        positionLeft: null,
+        life: null,
+        autoHide: true,
+        hideOnEscape: true,
+        showOnEllipsis: false,
+        id: uuid('pn_id_') + '_tooltip'
+    };
+    container;
+    styleClass;
+    tooltipText;
+    rootPTClasses = '';
+    showTimeout;
+    hideTimeout;
+    active;
+    mouseEnterListener;
+    mouseLeaveListener;
+    containerMouseleaveListener;
+    clickListener;
+    focusListener;
+    blurListener;
+    touchStartListener;
+    touchEndListener;
+    documentTouchListener;
+    documentEscapeListener;
+    scrollHandler;
+    resizeListener;
+    _componentStyle = inject(TooltipStyle);
+    interactionInProgress = false;
+    /**
+     * Used to pass attributes to DOM elements inside the Tooltip component.
+     * @defaultValue undefined
+     * @deprecated use pTooltipPT instead.
+     * @group Props
+     */
+    ptTooltip = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "ptTooltip" }] : /* istanbul ignore next */ []));
+    /**
+     * Used to pass attributes to DOM elements inside the Tooltip component.
+     * @defaultValue undefined
+     * @group Props
+     */
+    pTooltipPT = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "pTooltipPT" }] : /* istanbul ignore next */ []));
+    /**
+     * Indicates whether the component should be rendered without styles.
+     * @defaultValue undefined
+     * @group Props
+     */
+    pTooltipUnstyled = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "pTooltipUnstyled" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+        effect(() => {
+            const pt = this.ptTooltip() || this.pTooltipPT();
+            pt && this.directivePT.set(pt);
+        });
+        effect(() => {
+            this.pTooltipUnstyled() && this.directiveUnstyled.set(this.pTooltipUnstyled());
+        });
+        effect(() => {
+            const options = {
+                tooltipPosition: this.tooltipPosition(),
+                tooltipEvent: this.tooltipEvent(),
+                appendTo: this.appendTo(),
+                positionStyle: this.positionStyle(),
+                tooltipStyleClass: this.tooltipStyleClass(),
+                tooltipZIndex: this.tooltipZIndex(),
+                escape: this.escape(),
+                showDelay: this.showDelay(),
+                hideDelay: this.hideDelay(),
+                life: this.life(),
+                positionTop: this.positionTop(),
+                positionLeft: this.positionLeft(),
+                disabled: this.disabled(),
+                autoHide: this.autoHide(),
+                showOnEllipsis: this.showOnEllipsis()
+            };
+            Object.keys(options).forEach((key) => options[key] === undefined && delete options[key]);
+            this.setOption(options);
+        });
+        effect(() => {
+            this.disabled();
+            this.deactivate();
+        });
+        effect(() => {
+            const content = this.content();
+            this.setOption({ tooltipLabel: content });
+            if (this.active) {
+                if (content) {
+                    if (this.container && this.container.offsetParent) {
+                        this.updateText();
+                        this.align();
+                    }
+                    else {
+                        this.show();
+                    }
+                }
+                else {
+                    this.hide();
+                }
+            }
+        });
+        effect(() => {
+            const tooltipOptions = this.tooltipOptions();
+            this._tooltipOptions = { ...this._tooltipOptions, ...tooltipOptions };
+            this.deactivate();
+            if (this.active) {
+                if (this.getOption('tooltipLabel')) {
+                    if (this.container && this.container.offsetParent) {
+                        this.updateText();
+                        this.align();
+                    }
+                    else {
+                        this.show();
+                    }
+                }
+                else {
+                    this.hide();
+                }
+            }
+        });
+    }
+    onAfterViewInit() {
+        if (isPlatformBrowser(this.platformId)) {
+            this.zone.runOutsideAngular(() => {
+                const tooltipEvent = this.getOption('tooltipEvent');
+                if (tooltipEvent === 'hover' || tooltipEvent === 'both') {
+                    this.mouseEnterListener = this.onMouseEnter.bind(this);
+                    this.mouseLeaveListener = this.onMouseLeave.bind(this);
+                    this.clickListener = this.onInputClick.bind(this);
+                    this.el.nativeElement.addEventListener('mouseenter', this.mouseEnterListener);
+                    this.el.nativeElement.addEventListener('click', this.clickListener);
+                    this.el.nativeElement.addEventListener('mouseleave', this.mouseLeaveListener);
+                    // Touch support
+                    this.touchStartListener = this.onTouchStart.bind(this);
+                    this.touchEndListener = this.onTouchEnd.bind(this);
+                    this.el.nativeElement.addEventListener('touchstart', this.touchStartListener, { passive: true });
+                    this.el.nativeElement.addEventListener('touchend', this.touchEndListener, { passive: true });
+                }
+                if (tooltipEvent === 'focus' || tooltipEvent === 'both') {
+                    this.focusListener = this.onFocus.bind(this);
+                    this.blurListener = this.onBlur.bind(this);
+                    let target = this.el.nativeElement.querySelector('.p-component');
+                    if (!target) {
+                        target = this.getTarget(this.el.nativeElement);
+                    }
+                    target.addEventListener('focus', this.focusListener);
+                    target.addEventListener('blur', this.blurListener);
+                }
+            });
+        }
+    }
+    isAutoHide() {
+        return this.getOption('autoHide');
+    }
+    onMouseEnter() {
+        if (!this.container && !this.showTimeout) {
+            this.activate();
+        }
+    }
+    onMouseLeave(e) {
+        if (!this.isAutoHide()) {
+            const valid = hasClass(e.relatedTarget, 'p-tooltip') || hasClass(e.relatedTarget, 'p-tooltip-text') || hasClass(e.relatedTarget, 'p-tooltip-arrow');
+            !valid && this.deactivate();
+        }
+        else {
+            this.deactivate();
+        }
+    }
+    onTouchStart() {
+        if (!this.container && !this.showTimeout) {
+            this.activate();
+            if (!this.isAutoHide()) {
+                this.bindDocumentTouchListener();
+            }
+        }
+    }
+    onTouchEnd() {
+        if (this.isAutoHide()) {
+            this.deactivate();
+        }
+    }
+    bindDocumentTouchListener() {
+        if (!this.documentTouchListener) {
+            this.documentTouchListener = this.renderer.listen('document', 'touchstart', (e) => {
+                if (this.container && !this.container.contains(e.target) && !this.el.nativeElement.contains(e.target)) {
+                    this.deactivate();
+                    this.unbindDocumentTouchListener();
+                }
+            });
+        }
+    }
+    unbindDocumentTouchListener() {
+        if (this.documentTouchListener) {
+            this.documentTouchListener();
+            this.documentTouchListener = null;
+        }
+    }
+    onFocus() {
+        this.activate();
+    }
+    onBlur() {
+        this.deactivate();
+    }
+    onInputClick() {
+        this.deactivate();
+    }
+    hasEllipsis() {
+        const el = this.el.nativeElement;
+        return el.offsetWidth < el.scrollWidth || el.offsetHeight < el.scrollHeight;
+    }
+    activate() {
+        if (!this.interactionInProgress) {
+            if (this.getOption('showOnEllipsis') && !this.hasEllipsis()) {
+                return;
+            }
+            this.active = true;
+            this.clearHideTimeout();
+            if (this.getOption('showDelay'))
+                this.showTimeout = setTimeout(() => {
+                    this.show();
+                }, this.getOption('showDelay'));
+            else
+                this.show();
+            if (this.getOption('life')) {
+                let duration = this.getOption('showDelay') ? this.getOption('life') + this.getOption('showDelay') : this.getOption('life');
+                this.hideTimeout = setTimeout(() => {
+                    this.hide();
+                }, duration);
+            }
+            if (this.getOption('hideOnEscape')) {
+                this.documentEscapeListener = this.renderer.listen('document', 'keydown.escape', () => {
+                    this.deactivate();
+                    this.documentEscapeListener?.();
+                });
+            }
+            this.interactionInProgress = true;
+        }
+    }
+    deactivate() {
+        this.interactionInProgress = false;
+        this.active = false;
+        this.clearShowTimeout();
+        if (this.getOption('hideDelay')) {
+            this.clearHideTimeout(); //life timeout
+            this.hideTimeout = setTimeout(() => {
+                this.hide();
+            }, this.getOption('hideDelay'));
+        }
+        else {
+            this.hide();
+        }
+        if (this.documentEscapeListener) {
+            this.documentEscapeListener();
+        }
+    }
+    create() {
+        if (this.container) {
+            this.clearHideTimeout();
+            this.remove();
+        }
+        this.container = createElement('div', { class: this.cx('root'), 'p-bind': this.ptm('root'), 'data-pc-section': 'root' });
+        this.container.setAttribute('role', 'tooltip');
+        let tooltipArrow = createElement('div', { class: this.cx('arrow'), 'p-bind': this.ptm('arrow'), 'data-pc-section': 'arrow' });
+        this.container.appendChild(tooltipArrow);
+        this.tooltipText = createElement('div', { class: this.cx('text'), 'p-bind': this.ptm('text'), 'data-pc-section': 'text' });
+        this.updateText();
+        if (this.getOption('positionStyle')) {
+            this.container.style.position = this.getOption('positionStyle');
+        }
+        this.container.appendChild(this.tooltipText);
+        if (this.getOption('appendTo') === 'body')
+            document.body.appendChild(this.container);
+        else if (this.getOption('appendTo') === 'target')
+            appendChild(this.container, this.el.nativeElement);
+        else
+            appendChild(this.getOption('appendTo'), this.container);
+        this.container.style.display = 'none';
+        if (this.fitContent()) {
+            this.container.style.width = 'fit-content';
+        }
+        if (this.isAutoHide()) {
+            this.container.style.pointerEvents = 'none';
+        }
+        else {
+            this.container.style.pointerEvents = 'unset';
+            this.bindContainerMouseleaveListener();
+        }
+    }
+    bindContainerMouseleaveListener() {
+        if (!this.containerMouseleaveListener) {
+            const targetEl = this.container ?? this.container.nativeElement;
+            this.containerMouseleaveListener = this.renderer.listen(targetEl, 'mouseleave', () => {
+                this.deactivate();
+            });
+        }
+    }
+    unbindContainerMouseleaveListener() {
+        if (this.containerMouseleaveListener) {
+            this.bindContainerMouseleaveListener();
+            this.containerMouseleaveListener = null;
+        }
+    }
+    show() {
+        if (!this.getOption('tooltipLabel') || this.getOption('disabled')) {
+            return;
+        }
+        this.create();
+        const nativeElement = this.el.nativeElement;
+        const pDialogWrapper = nativeElement.closest('p-dialog');
+        if (pDialogWrapper) {
+            setTimeout(() => {
+                this.container && (this.container.style.display = 'inline-block');
+                this.container && this.align();
+            }, 100);
+        }
+        else {
+            this.container.style.display = 'inline-block';
+            this.align();
+        }
+        fadeIn(this.container, 250);
+        if (this.getOption('tooltipZIndex') === 'auto')
+            ZIndexUtils.set('tooltip', this.container, this.config.zIndex.tooltip);
+        else
+            this.container.style.zIndex = this.getOption('tooltipZIndex');
+        this.bindDocumentResizeListener();
+        this.bindScrollListener();
+    }
+    hide() {
+        if (this.getOption('tooltipZIndex') === 'auto') {
+            ZIndexUtils.clear(this.container);
+        }
+        this.remove();
+    }
+    updateText() {
+        const content = this.getOption('tooltipLabel');
+        if (content && typeof content.createEmbeddedView === 'function') {
+            const embeddedViewRef = this.viewContainer.createEmbeddedView(content);
+            embeddedViewRef.detectChanges();
+            embeddedViewRef.rootNodes.forEach((node) => this.tooltipText.appendChild(node));
+        }
+        else if (this.getOption('escape')) {
+            this.tooltipText.innerHTML = '';
+            this.tooltipText.appendChild(document.createTextNode(content));
+        }
+        else {
+            this.tooltipText.innerHTML = content;
+        }
+    }
+    align() {
+        const position = this.getOption('tooltipPosition');
+        const positionPriority = {
+            top: [this.alignTop, this.alignBottom, this.alignRight, this.alignLeft],
+            bottom: [this.alignBottom, this.alignTop, this.alignRight, this.alignLeft],
+            left: [this.alignLeft, this.alignRight, this.alignTop, this.alignBottom],
+            right: [this.alignRight, this.alignLeft, this.alignTop, this.alignBottom]
+        };
+        const alignFns = positionPriority[position] || [];
+        for (let [index, alignmentFn] of alignFns.entries()) {
+            if (index === 0)
+                alignmentFn.call(this);
+            else if (this.isOutOfBounds())
+                alignmentFn.call(this);
+            else
+                break;
+        }
+    }
+    getHostOffset() {
+        if (this.getOption('appendTo') === 'body' || this.getOption('appendTo') === 'target') {
+            let offset = this.el.nativeElement.getBoundingClientRect();
+            let targetLeft = offset.left + getWindowScrollLeft();
+            let targetTop = offset.top + getWindowScrollTop();
+            return { left: targetLeft, top: targetTop };
+        }
+        else {
+            return { left: 0, top: 0 };
+        }
+    }
+    get activeElement() {
+        return this.el.nativeElement.nodeName.startsWith('P-') ? findSingle(this.el.nativeElement, '.p-component') : this.el.nativeElement;
+    }
+    alignRight() {
+        this.preAlign('right');
+        const el = this.activeElement;
+        const offsetLeft = getOuterWidth(el);
+        const offsetTop = (getOuterHeight(el) - getOuterHeight(this.container)) / 2;
+        this.alignTooltip(offsetLeft, offsetTop);
+        let arrowElement = this.getArrowElement();
+        arrowElement.style.top = '50%';
+        arrowElement.style.right = null;
+        arrowElement.style.bottom = null;
+        arrowElement.style.left = '0';
+    }
+    alignLeft() {
+        this.preAlign('left');
+        let arrowElement = this.getArrowElement();
+        let offsetLeft = getOuterWidth(this.container);
+        let offsetTop = (getOuterHeight(this.el.nativeElement) - getOuterHeight(this.container)) / 2;
+        this.alignTooltip(-offsetLeft, offsetTop);
+        arrowElement.style.top = '50%';
+        arrowElement.style.right = '0';
+        arrowElement.style.bottom = null;
+        arrowElement.style.left = null;
+    }
+    alignTop() {
+        this.preAlign('top');
+        let arrowElement = this.getArrowElement();
+        let hostOffset = this.getHostOffset();
+        let elementWidth = getOuterWidth(this.container);
+        let offsetLeft = (getOuterWidth(this.el.nativeElement) - getOuterWidth(this.container)) / 2;
+        let offsetTop = getOuterHeight(this.container);
+        this.alignTooltip(offsetLeft, -offsetTop);
+        let elementRelativeCenter = hostOffset.left - this.getHostOffset().left + elementWidth / 2;
+        arrowElement.style.top = null;
+        arrowElement.style.right = null;
+        arrowElement.style.bottom = '0';
+        arrowElement.style.left = elementRelativeCenter + 'px';
+    }
+    getArrowElement() {
+        return findSingle(this.container, '[data-pc-section="arrow"]');
+    }
+    alignBottom() {
+        this.preAlign('bottom');
+        let arrowElement = this.getArrowElement();
+        let elementWidth = getOuterWidth(this.container);
+        let hostOffset = this.getHostOffset();
+        let offsetLeft = (getOuterWidth(this.el.nativeElement) - getOuterWidth(this.container)) / 2;
+        let offsetTop = getOuterHeight(this.el.nativeElement);
+        this.alignTooltip(offsetLeft, offsetTop);
+        let elementRelativeCenter = hostOffset.left - this.getHostOffset().left + elementWidth / 2;
+        arrowElement.style.top = '0';
+        arrowElement.style.right = null;
+        arrowElement.style.bottom = null;
+        arrowElement.style.left = elementRelativeCenter + 'px';
+    }
+    alignTooltip(offsetLeft, offsetTop) {
+        let hostOffset = this.getHostOffset();
+        let left = hostOffset.left + offsetLeft;
+        let top = hostOffset.top + offsetTop;
+        this.container.style.left = left + this.getOption('positionLeft') + 'px';
+        this.container.style.top = top + this.getOption('positionTop') + 'px';
+    }
+    setOption(option) {
+        this._tooltipOptions = { ...this._tooltipOptions, ...option };
+    }
+    getOption(option) {
+        return this._tooltipOptions[option];
+    }
+    getTarget(el) {
+        return hasClass(el, 'p-inputwrapper') ? findSingle(el, 'input') : el;
+    }
+    preAlign(position) {
+        this.container.style.left = -999 + 'px';
+        this.container.style.top = -999 + 'px';
+        this.container.className = this.cn(this.cx('root'), this.ptm('root')?.class, 'p-tooltip-' + position, this.getOption('tooltipStyleClass'));
+    }
+    isOutOfBounds() {
+        let offset = this.container.getBoundingClientRect();
+        let targetTop = offset.top;
+        let targetLeft = offset.left;
+        let width = getOuterWidth(this.container);
+        let height = getOuterHeight(this.container);
+        let viewport = getViewport();
+        return targetLeft + width > viewport.width || targetLeft < 0 || targetTop < 0 || targetTop + height > viewport.height;
+    }
+    onWindowResize() {
+        this.hide();
+    }
+    bindDocumentResizeListener() {
+        this.zone.runOutsideAngular(() => {
+            this.resizeListener = this.onWindowResize.bind(this);
+            window.addEventListener('resize', this.resizeListener);
+        });
+    }
+    unbindDocumentResizeListener() {
+        if (this.resizeListener) {
+            window.removeEventListener('resize', this.resizeListener);
+            this.resizeListener = null;
+        }
+    }
+    bindScrollListener() {
+        if (!this.scrollHandler) {
+            this.scrollHandler = new ConnectedOverlayScrollHandler(this.el.nativeElement, () => {
+                if (this.container) {
+                    this.hide();
+                }
+            });
+        }
+        this.scrollHandler.bindScrollListener();
+    }
+    unbindScrollListener() {
+        if (this.scrollHandler) {
+            this.scrollHandler.unbindScrollListener();
+        }
+    }
+    unbindEvents() {
+        const tooltipEvent = this.getOption('tooltipEvent');
+        if (tooltipEvent === 'hover' || tooltipEvent === 'both') {
+            this.el.nativeElement.removeEventListener('mouseenter', this.mouseEnterListener);
+            this.el.nativeElement.removeEventListener('mouseleave', this.mouseLeaveListener);
+            this.el.nativeElement.removeEventListener('click', this.clickListener);
+            // Touch support
+            this.el.nativeElement.removeEventListener('touchstart', this.touchStartListener);
+            this.el.nativeElement.removeEventListener('touchend', this.touchEndListener);
+            this.unbindDocumentTouchListener();
+        }
+        if (tooltipEvent === 'focus' || tooltipEvent === 'both') {
+            let target = this.el.nativeElement.querySelector('.p-component');
+            if (!target) {
+                target = this.getTarget(this.el.nativeElement);
+            }
+            target.removeEventListener('focus', this.focusListener);
+            target.removeEventListener('blur', this.blurListener);
+        }
+        this.unbindDocumentResizeListener();
+    }
+    remove() {
+        if (this.container && this.container.parentElement) {
+            if (this.getOption('appendTo') === 'body')
+                document.body.removeChild(this.container);
+            else if (this.getOption('appendTo') === 'target')
+                this.el.nativeElement.removeChild(this.container);
+            else
+                removeChild(this.getOption('appendTo'), this.container);
+        }
+        this.unbindDocumentResizeListener();
+        this.unbindScrollListener();
+        this.unbindContainerMouseleaveListener();
+        this.unbindDocumentTouchListener();
+        this.clearTimeouts();
+        this.container = null;
+        this.scrollHandler = null;
+    }
+    clearShowTimeout() {
+        if (this.showTimeout) {
+            clearTimeout(this.showTimeout);
+            this.showTimeout = null;
+        }
+    }
+    clearHideTimeout() {
+        if (this.hideTimeout) {
+            clearTimeout(this.hideTimeout);
+            this.hideTimeout = null;
+        }
+    }
+    clearTimeouts() {
+        this.clearShowTimeout();
+        this.clearHideTimeout();
+    }
+    onDestroy() {
+        this.unbindEvents();
+        if (this.container) {
+            ZIndexUtils.clear(this.container);
+        }
+        this.remove();
+        if (this.scrollHandler) {
+            this.scrollHandler.destroy();
+            this.scrollHandler = null;
+        }
+        if (this.documentEscapeListener) {
+            this.documentEscapeListener();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: Tooltip, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.2", type: Tooltip, isStandalone: true, selector: "[pTooltip]", inputs: { tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, tooltipEvent: { classPropertyName: "tooltipEvent", publicName: "tooltipEvent", isSignal: true, isRequired: false, transformFunction: null }, positionStyle: { classPropertyName: "positionStyle", publicName: "positionStyle", isSignal: true, isRequired: false, transformFunction: null }, tooltipStyleClass: { classPropertyName: "tooltipStyleClass", publicName: "tooltipStyleClass", isSignal: true, isRequired: false, transformFunction: null }, tooltipZIndex: { classPropertyName: "tooltipZIndex", publicName: "tooltipZIndex", isSignal: true, isRequired: false, transformFunction: null }, escape: { classPropertyName: "escape", publicName: "escape", isSignal: true, isRequired: false, transformFunction: null }, showDelay: { classPropertyName: "showDelay", publicName: "showDelay", isSignal: true, isRequired: false, transformFunction: null }, hideDelay: { classPropertyName: "hideDelay", publicName: "hideDelay", isSignal: true, isRequired: false, transformFunction: null }, life: { classPropertyName: "life", publicName: "life", isSignal: true, isRequired: false, transformFunction: null }, positionTop: { classPropertyName: "positionTop", publicName: "positionTop", isSignal: true, isRequired: false, transformFunction: null }, positionLeft: { classPropertyName: "positionLeft", publicName: "positionLeft", isSignal: true, isRequired: false, transformFunction: null }, autoHide: { classPropertyName: "autoHide", publicName: "autoHide", isSignal: true, isRequired: false, transformFunction: null }, fitContent: { classPropertyName: "fitContent", publicName: "fitContent", isSignal: true, isRequired: false, transformFunction: null }, hideOnEscape: { classPropertyName: "hideOnEscape", publicName: "hideOnEscape", isSignal: true, isRequired: false, transformFunction: null }, showOnEllipsis: { classPropertyName: "showOnEllipsis", publicName: "showOnEllipsis", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "pTooltip", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "tooltipDisabled", isSignal: true, isRequired: false, transformFunction: null }, tooltipOptions: { classPropertyName: "tooltipOptions", publicName: "tooltipOptions", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, ptTooltip: { classPropertyName: "ptTooltip", publicName: "ptTooltip", isSignal: true, isRequired: false, transformFunction: null }, pTooltipPT: { classPropertyName: "pTooltipPT", publicName: "pTooltipPT", isSignal: true, isRequired: false, transformFunction: null }, pTooltipUnstyled: { classPropertyName: "pTooltipUnstyled", publicName: "pTooltipUnstyled", isSignal: true, isRequired: false, transformFunction: null } }, providers: [TooltipStyle, { provide: TOOLTIP_INSTANCE, useExisting: Tooltip }, { provide: PARENT_INSTANCE, useExisting: Tooltip }], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: Tooltip, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[pTooltip]',
+                    standalone: true,
+                    providers: [TooltipStyle, { provide: TOOLTIP_INSTANCE, useExisting: Tooltip }, { provide: PARENT_INSTANCE, useExisting: Tooltip }]
+                }]
+        }], ctorParameters: () => [], propDecorators: { tooltipPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPosition", required: false }] }], tooltipEvent: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipEvent", required: false }] }], positionStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "positionStyle", required: false }] }], tooltipStyleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipStyleClass", required: false }] }], tooltipZIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipZIndex", required: false }] }], escape: [{ type: i0.Input, args: [{ isSignal: true, alias: "escape", required: false }] }], showDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDelay", required: false }] }], hideDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideDelay", required: false }] }], life: [{ type: i0.Input, args: [{ isSignal: true, alias: "life", required: false }] }], positionTop: [{ type: i0.Input, args: [{ isSignal: true, alias: "positionTop", required: false }] }], positionLeft: [{ type: i0.Input, args: [{ isSignal: true, alias: "positionLeft", required: false }] }], autoHide: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoHide", required: false }] }], fitContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "fitContent", required: false }] }], hideOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideOnEscape", required: false }] }], showOnEllipsis: [{ type: i0.Input, args: [{ isSignal: true, alias: "showOnEllipsis", required: false }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "pTooltip", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipDisabled", required: false }] }], tooltipOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipOptions", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], ptTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "ptTooltip", required: false }] }], pTooltipPT: [{ type: i0.Input, args: [{ isSignal: true, alias: "pTooltipPT", required: false }] }], pTooltipUnstyled: [{ type: i0.Input, args: [{ isSignal: true, alias: "pTooltipUnstyled", required: false }] }] } });
+class TooltipModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: TooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.2", ngImport: i0, type: TooltipModule, imports: [Tooltip, BindModule], exports: [Tooltip, BindModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: TooltipModule, imports: [BindModule, BindModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: TooltipModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [Tooltip, BindModule],
+                    exports: [Tooltip, BindModule]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Tooltip, TooltipClasses, TooltipModule, TooltipStyle };
+//# sourceMappingURL=wawjs-ngx-prime-tooltip.mjs.map