@seniorsistemas/angular-components 19.0.9 → 19.1.0

package/fesm2022/seniorsistemas-angular-components-tooltip.mjs

@@ -1,28 +1,34 @@
+import { Overlay } from '@angular/cdk/overlay';
+import { ComponentPortal } from '@angular/cdk/portal';
 import * as i0 from '@angular/core';
-import { Component, input, Directive, Input, HostListener, NgModule } from '@angular/core';
-import { getElementPositionInfo, getElementLeftoverContentAvailable, isNullOrUndefined } from '@seniorsistemas/angular-components/utils';
-import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i1$1 from '@seniorsistemas/angular-components/common';
+import { input, Component, inject, ElementRef, Renderer2, Directive, HostListener, NgModule } from '@angular/core';
+import { DebounceUtils } from '@seniorsistemas/angular-components/common';
+import { NgClass } from '@angular/common';
 
+/**
+ * @description Componente de apresentação do tooltip. Utilizado internamente pela diretiva `TooltipDirective`.
+ * O posicionamento é gerenciado pelo CDK Overlay via `TooltipDirective`.
+ */
 class TooltipComponent {
-    tooltip = '';
-    position = 'top';
-    left = 0;
-    top = 0;
-    visible = false;
-    escape = false;
+    /** @description Texto ou HTML a ser exibido no tooltip. */
+    tooltip = input('');
+    /** @description Posição do tooltip — usada para renderizar a seta no lado correto. */
+    position = input('top');
+    /** @description Controla a visibilidade (opacidade) do tooltip via transição CSS. */
+    visible = input(false);
+    /** @description Quando `true`, o conteúdo é renderizado como texto puro (escapa HTML). */
+    escape = input(false);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TooltipComponent, selector: "ng-component", ngImport: i0, template: "<div\n    id=\"tooltip\"\n    class=\"tooltip\"\n    [ngClass]=\"['tooltip--' + position]\"\n    [class.tooltip--visible]=\"visible\"\n    [ngStyle]=\"{\n        left: left + 'px',\n        top: top + 'px',\n    }\"\n>\n    @if (escape) {\n        <span class=\"tooltip__content\">\n            {{ tooltip }}\n        </span>\n    } @else {\n        <span\n            class=\"tooltip__content\"\n            [innerHTML]=\"tooltip\"\n        >\n        </span>\n    }\n</div>\n", styles: [".tooltip{background-color:#000;border-radius:2px;color:#fff;font-family:Open Sans,sans-serif;font-size:14px;font-weight:400;line-height:21px;opacity:0;padding:8px;position:fixed;transform:translate(-50%);text-align:center;max-width:220px;word-wrap:break-word;z-index:99999;position:absolute}.tooltip--visible{opacity:1;transition:opacity .3s}.tooltip:before{content:\"\";height:0;position:absolute;width:0}.tooltip--bottom{margin-top:5px;transform:translate(-50%)}.tooltip--bottom:before{border:5px solid transparent;border-bottom:5px solid black;left:calc(50% - 5px);top:-10px}.tooltip--top{margin-bottom:5px;transform:translate(-50%,-100%)}.tooltip--top:before{border:5px solid transparent;border-top:5px solid black;left:calc(50% - 5px);bottom:-10px}.tooltip--left{margin-right:28px;transform:translate(calc(-100% - 7px),-50%)}.tooltip--left:before{border:5px solid transparent;border-left:5px solid black;right:-10px;bottom:calc(50% - 5px)}.tooltip--right{margin-left:7px;transform:translateY(-50%)}.tooltip--right:before{border:5px solid transparent;border-right:5px solid black;left:-10px;bottom:calc(50% - 5px)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TooltipComponent, isStandalone: true, selector: "s-tooltip", inputs: { tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, escape: { classPropertyName: "escape", publicName: "escape", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n    class=\"tooltip relative max-w-[220px] break-words rounded-xsmall bg-grayscale-100 p-2 text-center font-open-sans text-sm font-normal leading-normal text-grayscale-0 transition-opacity duration-300\"\n    [class.opacity-0]=\"!visible()\"\n    [class.opacity-100]=\"visible()\"\n    [class.tooltip--visible]=\"visible()\"\n    [ngClass]=\"'tooltip--' + position()\"\n>\n    @if (escape()) {\n        <span class=\"tooltip__content\">\n            {{ tooltip() }}\n        </span>\n    } @else {\n        <span\n            class=\"tooltip__content\"\n            [innerHTML]=\"tooltip()\"\n        >\n        </span>\n    }\n</div>\n\n", styles: [".tooltip--top:before,.tooltip--bottom:before,.tooltip--left:before,.tooltip--right:before{content:\"\";height:0;position:absolute;width:0}.tooltip--bottom:before{border:5px solid transparent;border-bottom:5px solid #0E1119;left:calc(50% - 5px);top:-10px}.tooltip--top:before{border:5px solid transparent;border-top:5px solid #0E1119;left:calc(50% - 5px);bottom:-10px}.tooltip--left:before{border:5px solid transparent;border-left:5px solid #0E1119;right:-10px;bottom:calc(50% - 5px)}.tooltip--right:before{border:5px solid transparent;border-right:5px solid #0E1119;left:-10px;bottom:calc(50% - 5px)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TooltipComponent, decorators: [{
             type: Component,
-            args: [{ template: "<div\n    id=\"tooltip\"\n    class=\"tooltip\"\n    [ngClass]=\"['tooltip--' + position]\"\n    [class.tooltip--visible]=\"visible\"\n    [ngStyle]=\"{\n        left: left + 'px',\n        top: top + 'px',\n    }\"\n>\n    @if (escape) {\n        <span class=\"tooltip__content\">\n            {{ tooltip }}\n        </span>\n    } @else {\n        <span\n            class=\"tooltip__content\"\n            [innerHTML]=\"tooltip\"\n        >\n        </span>\n    }\n</div>\n", styles: [".tooltip{background-color:#000;border-radius:2px;color:#fff;font-family:Open Sans,sans-serif;font-size:14px;font-weight:400;line-height:21px;opacity:0;padding:8px;position:fixed;transform:translate(-50%);text-align:center;max-width:220px;word-wrap:break-word;z-index:99999;position:absolute}.tooltip--visible{opacity:1;transition:opacity .3s}.tooltip:before{content:\"\";height:0;position:absolute;width:0}.tooltip--bottom{margin-top:5px;transform:translate(-50%)}.tooltip--bottom:before{border:5px solid transparent;border-bottom:5px solid black;left:calc(50% - 5px);top:-10px}.tooltip--top{margin-bottom:5px;transform:translate(-50%,-100%)}.tooltip--top:before{border:5px solid transparent;border-top:5px solid black;left:calc(50% - 5px);bottom:-10px}.tooltip--left{margin-right:28px;transform:translate(calc(-100% - 7px),-50%)}.tooltip--left:before{border:5px solid transparent;border-left:5px solid black;right:-10px;bottom:calc(50% - 5px)}.tooltip--right{margin-left:7px;transform:translateY(-50%)}.tooltip--right:before{border:5px solid transparent;border-right:5px solid black;left:-10px;bottom:calc(50% - 5px)}\n"] }]
+            args: [{ selector: 's-tooltip', standalone: true, imports: [NgClass], template: "<div\n    class=\"tooltip relative max-w-[220px] break-words rounded-xsmall bg-grayscale-100 p-2 text-center font-open-sans text-sm font-normal leading-normal text-grayscale-0 transition-opacity duration-300\"\n    [class.opacity-0]=\"!visible()\"\n    [class.opacity-100]=\"visible()\"\n    [class.tooltip--visible]=\"visible()\"\n    [ngClass]=\"'tooltip--' + position()\"\n>\n    @if (escape()) {\n        <span class=\"tooltip__content\">\n            {{ tooltip() }}\n        </span>\n    } @else {\n        <span\n            class=\"tooltip__content\"\n            [innerHTML]=\"tooltip()\"\n        >\n        </span>\n    }\n</div>\n\n", styles: [".tooltip--top:before,.tooltip--bottom:before,.tooltip--left:before,.tooltip--right:before{content:\"\";height:0;position:absolute;width:0}.tooltip--bottom:before{border:5px solid transparent;border-bottom:5px solid #0E1119;left:calc(50% - 5px);top:-10px}.tooltip--top:before{border:5px solid transparent;border-top:5px solid #0E1119;left:calc(50% - 5px);bottom:-10px}.tooltip--left:before{border:5px solid transparent;border-left:5px solid #0E1119;right:-10px;bottom:calc(50% - 5px)}.tooltip--right:before{border:5px solid transparent;border-right:5px solid #0E1119;left:-10px;bottom:calc(50% - 5px)}\n"] }]
         }] });
 
 /**
  * @description Diretiva que exibe um tooltip (dica de ferramenta) flutuante ao interagir com o elemento hospedeiro.
- * Posiciona-se automaticamente considerando o espaço disponível na tela.
+ * Posiciona-se automaticamente considerando o espaço disponível na tela, utilizando o CDK Overlay.
  * Suporta eventos de hover, click e focus, além de comportamentos customizados para mobile.
  *
  * @example
@@ -33,33 +39,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * @category Overlay
  */
 class TooltipDirective {
-    elementRef;
-    appRef;
-    debounceUtils;
-    renderer;
-    viewContainerRef;
     /**
      * @description Texto exibido no tooltip. Quando vazio ou `undefined`, o tooltip não é renderizado.
      */
-    tooltip;
+    tooltip = input(undefined, { alias: 'sTooltip' });
     /**
      * @description Posição preferencial do tooltip em relação ao elemento hospedeiro.
      * O tooltip se reposiciona automaticamente se não houver espaço suficiente.
      *
      * @default 'top'
      */
-    tooltipPosition = 'top';
+    tooltipPosition = input('top');
     /**
      * @description Tempo em milissegundos antes do tooltip aparecer após o evento de ativação.
      *
      * @default 500
      */
-    showDelay = 500;
+    showDelay = input(500);
     /**
      * @description Tempo em milissegundos que o tooltip permanece visível após aparecer.
      * Quando não informado, o tooltip permanece até o usuário sair do elemento.
      */
-    displayTime;
+    displayTime = input(undefined);
     /**
      * @description Evento do elemento hospedeiro que dispara a exibição do tooltip.
      * - `'hover'`: exibe ao passar o mouse (padrão).
@@ -68,20 +69,20 @@ class TooltipDirective {
      *
      * @default 'hover'
      */
-    tooltipEvent = 'hover';
+    tooltipEvent = input('hover');
     /**
      * @description Quando `true`, o conteúdo HTML do tooltip é escapado antes de ser renderizado.
      *
      * @default false
      */
-    escape = false;
+    escape = input(false);
     /**
      * @description Quando `false`, o tooltip nunca é exibido, mesmo que haja interação do usuário.
      * Útil para desabilitar tooltips dinamicamente.
      *
      * @default true
      */
-    visible = true;
+    visible = input(true);
     /**
      * @description Comportamento do tooltip em dispositivos móveis (touch).
      * - `'pressing'`: exibe ao pressionar e manter o toque (padrão).
@@ -89,11 +90,11 @@ class TooltipDirective {
      *
      * @default 'pressing'
      */
-    mobileBehavior = 'pressing';
+    mobileBehavior = input('pressing');
     /**
      * @description Referência a um input HTML para sincronizar a exibição do tooltip com o foco no campo.
      */
-    focusedInputRef = null;
+    focusedInputRef = input(null);
     /**
      * @description Quando `true`, o tooltip só é exibido se o texto do elemento estiver truncado (overflow).
      * Útil para cells de tabela ou elementos com `text-overflow: ellipsis`.
@@ -101,20 +102,17 @@ class TooltipDirective {
      * @default false
      */
     checkTruncatedText = input(false);
+    elementRef = inject(ElementRef);
+    overlay = inject(Overlay);
+    debounceUtils = inject(DebounceUtils);
+    renderer = inject(Renderer2);
+    overlayRef = null;
     componentRef = null;
+    positionChangeSubscription = null;
     showTimeout;
     touchTimeout;
-    tooltipDivElement = null;
-    debounceCreateTooltipFunction;
     tooltipCreatedByFocus = false;
-    constructor(elementRef, appRef, debounceUtils, renderer, viewContainerRef) {
-        this.elementRef = elementRef;
-        this.appRef = appRef;
-        this.debounceUtils = debounceUtils;
-        this.renderer = renderer;
-        this.viewContainerRef = viewContainerRef;
-        this.debounceCreateTooltipFunction = this.debounceUtils.debounceLeading(() => this._createTooltip(true, true));
-    }
+    debounceCreateTooltipFunction = this.debounceUtils.debounceLeading(() => this._createTooltip(true, true));
     ngOnInit() {
         this.validatePosition();
         this.updateTooltipVisibilityWhenFocusOnInput();
@@ -122,254 +120,147 @@ class TooltipDirective {
     ngOnDestroy() {
         this.destroy();
     }
-    /**
-     * Manipula a visibilidade do tooltip quando houver uma referência de input.
-     */
-    updateTooltipVisibilityWhenFocusOnInput() {
-        if (this.focusedInputRef) {
-            const inputFocus = this.focusedInputRef;
-            const icon = this.getIconFromFocusedInput();
-            this.renderer.listen(inputFocus, 'focus', () => {
-                if (icon) {
-                    this._createTooltip(false, false);
-                    this.tooltipCreatedByFocus = true;
-                }
-            });
-            this.renderer.listen(inputFocus, 'blur', () => {
-                if (icon) {
-                    this.removeTooltip(icon);
-                    this.destroy();
-                    this.tooltipCreatedByFocus = false;
-                }
-            });
-        }
-    }
-    /**
-     * Obtém o elemento do ícone associado ao label do input em focus.
-     * @returns O ícone do input em focus.
-     */
-    getIconFromFocusedInput() {
-        return this.elementRef.nativeElement;
-    }
-    /**
-     * Remove o tooltip associado ao ícone do input em focus.
-     * @param icon O ícone do input em focus.
-     */
-    removeTooltip(icon) {
-        const tooltip = icon.querySelector('.tooltip');
-        if (tooltip) {
-            tooltip.remove();
-        }
-    }
     // whenever the component with the tooltip is clicked I destroy the tooltip.
     // whenever a key is pressed on the component with the tooltip I destroy the tooltip.
     onClick() {
-        if (this.tooltipEvent === 'hover' &&
+        if (this.tooltipEvent() === 'hover' &&
             !navigator.userAgent.match(/Android/i) &&
             !navigator.userAgent.match(/iPhone/i)) {
             this.destroy();
         }
     }
     onFocus() {
-        if (this.tooltipEvent === 'focus') {
+        if (this.tooltipEvent() === 'focus') {
             this._createTooltip(true, true);
         }
     }
     onBlur() {
-        if (this.tooltipEvent === 'focus') {
+        if (this.tooltipEvent() === 'focus') {
             this.destroy();
         }
     }
     onMouseEnter() {
-        if (this.tooltipEvent === 'hover' || this.focusedInputRef) {
+        if (this.tooltipEvent() === 'hover' || this.focusedInputRef()) {
             this.debounceCreateTooltipFunction();
         }
     }
     onMouseLeave() {
-        if ((this.tooltipEvent === 'hover' || this.focusedInputRef) && !this.tooltipCreatedByFocus) {
+        if ((this.tooltipEvent() === 'hover' || this.focusedInputRef()) && !this.tooltipCreatedByFocus) {
             this.destroy();
         }
     }
     onTouchStart() {
-        if (this.tooltipEvent === 'hover') {
+        if (this.tooltipEvent() === 'hover') {
             window.clearTimeout(this.touchTimeout);
-            const _delay = this.mobileBehavior === 'pressing' ? this.showDelay : 0;
+            const delay = this.mobileBehavior() === 'pressing' ? this.showDelay() : 0;
             this.touchTimeout = window.setTimeout(() => {
                 this._createTooltip(true, true);
-            }, _delay);
+            }, delay);
         }
     }
     onTouchEnd() {
-        if (this.tooltipEvent === 'hover') {
-            if (this.mobileBehavior === 'pressing') {
-                window.clearTimeout(this.touchTimeout);
-                this.destroy();
-            }
+        if (this.tooltipEvent() === 'hover' && this.mobileBehavior() === 'pressing') {
+            window.clearTimeout(this.touchTimeout);
+            this.destroy();
         }
     }
     validatePosition() {
-        const containsPosition = ['top', 'right', 'bottom', 'left'].includes(this.tooltipPosition);
+        const containsPosition = ['top', 'right', 'bottom', 'left'].includes(this.tooltipPosition());
         if (!containsPosition) {
-            this.tooltipPosition = 'top';
-            throw new Error(`Tooltip ${this.tooltipPosition} position is unexpected`);
+            throw new Error(`Tooltip position "${this.tooltipPosition()}" is unexpected`);
         }
     }
-    getDomElement() {
-        this.componentRef = this.viewContainerRef.createComponent(TooltipComponent);
-        return this.componentRef.location.nativeElement;
+    /**
+     * Manipula a visibilidade do tooltip quando houver uma referência de input.
+     */
+    updateTooltipVisibilityWhenFocusOnInput() {
+        const inputRef = this.focusedInputRef();
+        if (!inputRef)
+            return;
+        this.renderer.listen(inputRef, 'focus', () => {
+            this._createTooltip(false, false);
+            this.tooltipCreatedByFocus = true;
+        });
+        this.renderer.listen(inputRef, 'blur', () => {
+            this.destroy();
+            this.tooltipCreatedByFocus = false;
+        });
     }
     _createTooltip(useShowDelay = false, autoDestroy = true) {
-        const hasText = (this.tooltip || '').length > 0;
-        const hasComponentRef = this.componentRef !== null;
-        if (!hasText || hasComponentRef) {
+        const tooltipText = this.tooltip() ?? '';
+        if (!tooltipText.length || this.overlayRef !== null)
             return;
-        }
-        const blockIfIsNotTruncatedContent = this.checkTruncatedText() ? !this.contentIsTruncated : false;
-        if (blockIfIsNotTruncatedContent) {
+        if (this.checkTruncatedText() && !this.contentIsTruncated)
             return;
-        }
-        const domElement = this.getDomElement();
-        document.body.appendChild(domElement);
-        this.tooltipDivElement = domElement.querySelector('.tooltip');
-        this.setTooltipComponentProperties();
-        const _showDelay = useShowDelay ? this.showDelay : 0;
-        setTimeout(() => {
-            this.showTooltip();
-        }, _showDelay);
-        this.renderer.listen(window, 'scroll', () => {
-            this.setTooltipPositionProperty();
+        const positionStrategy = this.buildPositionStrategy();
+        const scrollStrategy = this.overlay.scrollStrategies.reposition();
+        this.overlayRef = this.overlay.create({ positionStrategy, scrollStrategy });
+        const portal = new ComponentPortal(TooltipComponent);
+        this.componentRef = this.overlayRef.attach(portal);
+        this.componentRef.setInput('tooltip', tooltipText);
+        this.componentRef.setInput('escape', this.escape());
+        this.componentRef.setInput('position', this.tooltipPosition());
+        this.positionChangeSubscription = positionStrategy.positionChanges.subscribe((change) => {
+            const mappedPosition = this.mapCdkPositionToTooltipPosition(change.connectionPair);
+            this.componentRef?.setInput('position', mappedPosition);
         });
-        if (autoDestroy && this.displayTime) {
-            setTimeout(() => {
+        const delay = useShowDelay ? this.showDelay() : 0;
+        this.showTimeout = window.setTimeout(() => {
+            this.componentRef?.setInput('visible', this.visible());
+        }, delay);
+        if (autoDestroy && this.displayTime()) {
+            window.setTimeout(() => {
                 this.destroy();
-            }, this.displayTime);
+            }, this.displayTime());
         }
     }
-    showTooltip() {
-        if (this.componentRef) {
-            this.componentRef.instance.visible = this.visible;
-            this.setTooltipPositionProperty();
-        }
+    buildPositionStrategy() {
+        const preferred = this.tooltipPosition();
+        const allPositions = ['top', 'bottom', 'left', 'right'];
+        const orderedPositions = [preferred, ...allPositions.filter((p) => p !== preferred)];
+        return this.overlay
+            .position()
+            .flexibleConnectedTo(this.elementRef)
+            .withPositions(orderedPositions.map((p) => this.getConnectedPosition(p)))
+            .withFlexibleDimensions(false)
+            .withPush(false);
     }
-    setTooltipPositionProperty() {
-        if (!this.componentRef) {
-            return;
-        }
-        const anchorSize = 5;
-        const { left, right } = this.elementRef.nativeElement.getBoundingClientRect();
-        const tooltipElementPosition = getElementPositionInfo(this.tooltipDivElement);
-        const elementLeftover = getElementLeftoverContentAvailable(this.elementRef.nativeElement);
-        const elementTriggerPosition = getElementPositionInfo(this.elementRef.nativeElement);
-        const horizontalPositions = ['left', 'right'];
-        const isPositionHorizontal = horizontalPositions.includes(this.tooltipPosition);
-        const distanceToBorders = isPositionHorizontal
-            ? tooltipElementPosition.elementWidth
-            : tooltipElementPosition.elementHorizontalCenter;
-        const canSetAtTop = elementLeftover.freeDistanceToTop > tooltipElementPosition.elementHeight;
-        const canSetAtLeft = elementLeftover.freeDistanceToLeft > distanceToBorders;
-        const canSetAtRight = elementLeftover.freeDistanceToRight > distanceToBorders;
-        const canSetAtBottom = elementLeftover.freeDistanceToBottom > tooltipElementPosition.elementHeight;
-        const topVertical = elementTriggerPosition.top + elementTriggerPosition.elementVerticalCenter;
-        const checkTopPosition = () => {
-            return canSetAtTop && canSetAtLeft && canSetAtRight;
+    getConnectedPosition(pos) {
+        const offset = 10;
+        const positionMap = {
+            top: { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: -offset },
+            bottom: { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top', offsetY: offset },
+            left: { originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center', offsetX: -offset },
+            right: { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center', offsetX: offset },
         };
-        const checkBottomPosition = () => {
-            return canSetAtBottom && canSetAtLeft && canSetAtRight;
-        };
-        const checkLeftPosition = () => {
-            return canSetAtLeft && canSetAtTop && canSetAtBottom;
-        };
-        const checkRightPosition = () => {
-            return canSetAtRight && canSetAtTop && canSetAtBottom;
-        };
-        const setTopPosition = () => {
-            return {
-                left: left + (right - left) / 2,
-                top: elementTriggerPosition.top - anchorSize,
-            };
-        };
-        const setBottomPosition = () => {
-            return {
-                left: left + (right - left) / 2,
-                top: elementTriggerPosition.top + elementTriggerPosition.elementHeight,
-            };
-        };
-        const setLeftPosition = () => {
-            return {
-                left: left,
-                top: topVertical,
-            };
-        };
-        const setRightPosition = () => {
-            return {
-                left: right,
-                top: topVertical,
-            };
-        };
-        const positions = [
-            {
-                pos: 'top',
-                check: checkTopPosition,
-                set: setTopPosition,
-            },
-            {
-                pos: 'bottom',
-                check: checkBottomPosition,
-                set: setBottomPosition,
-            },
-            {
-                pos: 'left',
-                check: checkLeftPosition,
-                set: setLeftPosition,
-            },
-            {
-                pos: 'right',
-                check: checkRightPosition,
-                set: setRightPosition,
-            },
-        ];
-        const positionDefined = positions.find((position) => position.pos === this.tooltipPosition);
-        let validPosition = positionDefined;
-        const canUseDefinedPosition = positionDefined?.check();
-        if (canUseDefinedPosition) {
-            validPosition = positionDefined;
-        }
-        else if (!canUseDefinedPosition) {
-            const validAlternativePosition = positions.find((position) => position.check());
-            if (validAlternativePosition) {
-                validPosition = validAlternativePosition;
-            }
-        }
-        const _position = validPosition.set();
-        const positionLeft = _position.left;
-        const positionTop = _position.top;
-        this.componentRef.instance.left = Math.round(positionLeft);
-        this.componentRef.instance.top = Math.round(positionTop);
-        this.componentRef.instance.position = validPosition.pos;
+        return positionMap[pos];
     }
-    setTooltipComponentProperties() {
-        if (!this.componentRef)
-            return;
-        this.componentRef.instance.tooltip = this.tooltip;
-        this.componentRef.instance.escape = this.escape;
+    mapCdkPositionToTooltipPosition(pair) {
+        if (pair.overlayY === 'bottom')
+            return 'top';
+        if (pair.overlayY === 'top')
+            return 'bottom';
+        if (pair.overlayX === 'end')
+            return 'left';
+        return 'right';
     }
     destroy() {
-        if (!isNullOrUndefined(this.componentRef)) {
-            window.clearTimeout(this.showTimeout);
-            this.appRef.detachView(this.componentRef.hostView);
-            this.componentRef.destroy();
+        window.clearTimeout(this.showTimeout);
+        window.clearTimeout(this.touchTimeout);
+        this.positionChangeSubscription?.unsubscribe();
+        this.positionChangeSubscription = null;
+        if (this.overlayRef) {
+            this.overlayRef.dispose();
+            this.overlayRef = null;
             this.componentRef = null;
-            this.tooltipDivElement = null;
         }
     }
     get contentIsTruncated() {
         const element = this.elementRef.nativeElement;
-        const truncatedByVertical = element.scrollHeight > element.clientHeight;
-        const truncatedByHorizontal = element.scrollWidth > element.clientWidth;
-        return truncatedByHorizontal || truncatedByVertical;
+        return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.ApplicationRef }, { token: i1$1.DebounceUtils }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.14", type: TooltipDirective, isStandalone: true, selector: "[sTooltip]", inputs: { tooltip: { classPropertyName: "tooltip", publicName: "sTooltip", isSignal: false, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: false, isRequired: false, transformFunction: null }, showDelay: { classPropertyName: "showDelay", publicName: "showDelay", isSignal: false, isRequired: false, transformFunction: null }, displayTime: { classPropertyName: "displayTime", publicName: "displayTime", isSignal: false, isRequired: false, transformFunction: null }, tooltipEvent: { classPropertyName: "tooltipEvent", publicName: "tooltipEvent", isSignal: false, isRequired: false, transformFunction: null }, escape: { classPropertyName: "escape", publicName: "escape", isSignal: false, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: false, isRequired: false, transformFunction: null }, mobileBehavior: { classPropertyName: "mobileBehavior", publicName: "mobileBehavior", isSignal: false, isRequired: false, transformFunction: null }, focusedInputRef: { classPropertyName: "focusedInputRef", publicName: "focusedInputRef", isSignal: false, isRequired: false, transformFunction: null }, checkTruncatedText: { classPropertyName: "checkTruncatedText", publicName: "checkTruncatedText", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick()", "keydown": "onClick()", "focus": "onFocus()", "blur": "onBlur()", "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "wheel": "onMouseLeave()", "touchstart": "onTouchStart()", "touchend": "onTouchEnd()" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.14", type: TooltipDirective, isStandalone: true, selector: "[sTooltip]", inputs: { tooltip: { classPropertyName: "tooltip", publicName: "sTooltip", isSignal: true, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, showDelay: { classPropertyName: "showDelay", publicName: "showDelay", isSignal: true, isRequired: false, transformFunction: null }, displayTime: { classPropertyName: "displayTime", publicName: "displayTime", isSignal: true, isRequired: false, transformFunction: null }, tooltipEvent: { classPropertyName: "tooltipEvent", publicName: "tooltipEvent", isSignal: true, isRequired: false, transformFunction: null }, escape: { classPropertyName: "escape", publicName: "escape", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, mobileBehavior: { classPropertyName: "mobileBehavior", publicName: "mobileBehavior", isSignal: true, isRequired: false, transformFunction: null }, focusedInputRef: { classPropertyName: "focusedInputRef", publicName: "focusedInputRef", isSignal: true, isRequired: false, transformFunction: null }, checkTruncatedText: { classPropertyName: "checkTruncatedText", publicName: "checkTruncatedText", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick()", "keydown": "onClick()", "focus": "onFocus()", "blur": "onBlur()", "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "wheel": "onMouseLeave()", "touchstart": "onTouchStart()", "touchend": "onTouchEnd()" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TooltipDirective, decorators: [{
             type: Directive,
@@ -377,26 +268,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     selector: '[sTooltip]',
                     standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ApplicationRef }, { type: i1$1.DebounceUtils }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }], propDecorators: { tooltip: [{
-                type: Input,
-                args: ['sTooltip']
-            }], tooltipPosition: [{
-                type: Input
-            }], showDelay: [{
-                type: Input
-            }], displayTime: [{
-                type: Input
-            }], tooltipEvent: [{
-                type: Input
-            }], escape: [{
-                type: Input
-            }], visible: [{
-                type: Input
-            }], mobileBehavior: [{
-                type: Input
-            }], focusedInputRef: [{
-                type: Input
-            }], onClick: [{
+        }], propDecorators: { onClick: [{
                 type: HostListener,
                 args: ['click']
             }, {
@@ -427,14 +299,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 
 class TooltipModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: TooltipModule, declarations: [TooltipComponent], imports: [CommonModule, TooltipDirective], exports: [TooltipDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TooltipModule, imports: [CommonModule] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: TooltipModule, imports: [TooltipDirective, TooltipComponent], exports: [TooltipDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TooltipModule });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TooltipModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, TooltipDirective],
-                    declarations: [TooltipComponent],
+                    imports: [TooltipDirective, TooltipComponent],
                     exports: [TooltipDirective],
                 }]
         }] });