@energycap/components 0.32.19 → 0.32.20

package/fesm2020/energycap-components.mjs

@@ -18,7 +18,7 @@ import { takeUntil, distinctUntilChanged, filter, take, debounceTime, switchMap,
 import moment from 'moment';
 import Popper from 'popper.js';
 import { cloneDeep, uniqueId, isEqual, sortBy, orderBy, get, upperFirst } from 'lodash';
-import { TemplatePortal, ComponentPortal } from '@angular/cdk/portal';
+import { ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
 
 class CacheService {
     constructor() {
@@ -4252,6 +4252,97 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
                 args: ['textbox', { static: true }]
             }] } });
 
+class TooltipComponent {
+    constructor() {
+        this.position = 'top-center';
+        this.dismissible = false;
+        this.onHide = new EventEmitter();
+    }
+    hide() {
+        this.onHide.next();
+        this.overlayRef?.dispose();
+    }
+}
+TooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: TooltipComponent, selector: "ec-tooltip", host: { properties: { "style.--ec-tooltip-background-color": "this.backgroundColor" } }, ngImport: i0, template: "<article id=\"{{id}}\" class=\"py-3 position-{{position}}\">\r\n  <header *ngIf=\"title || subtitle\" class=\"mb-3\">\r\n    <h1 class=\"text-heading-2 px-3 mb-0\">{{title}}</h1>\r\n    <p class=\"text-caption-1 px-3 mb-0\">{{subtitle}}</p>\r\n  </header>\r\n  \r\n  <ng-container *ngIf=\"customContent; else textTemplate\">\r\n    <ng-container *ngTemplateOutlet=\"customContent\"></ng-container>\r\n  </ng-container>\r\n\r\n  <ng-template #textTemplate>\r\n    <div class=\"text-body-1 px-3\" [innerHTML]=\"text\"></div>\r\n  </ng-template>\r\n  \r\n  <ec-button *ngIf=\"dismissible\" id=\"tooltipDismiss\" type=\"icon\" icon=\"icon-cancel\" (clicked)=\"hide()\" style=\"--ec-button-color-icon: var(--ec-color-secondary-light);\"></ec-button>\r\n</article>", styles: [":host{display:block;padding:.75rem}article{background-color:var(--ec-tooltip-background-color, #162F3B);color:var(--ec-tooltip-color, var(--ec-color-primary-light));border-radius:var(--ec-border-radius-card);position:relative;box-shadow:var(--ec-box-shadow-overlay);--ec-color-interactive: var(--ec-color-interactive-light)}article:after{content:\"\";height:0;width:0;border:.625rem solid transparent;display:block;position:absolute;pointer-events:none}article.position-top-left:after,article.position-top-center:after,article.position-top-right:after{bottom:-1.25rem;border-top-color:var(--ec-tooltip-background-color, #162F3B)}article.position-bottom-left:after,article.position-bottom-center:after,article.position-bottom-right:after{top:-1.25rem;border-bottom-color:var(--ec-tooltip-background-color, #162F3B)}article.position-top-left:after,article.position-bottom-left:after{right:1rem}article.position-top-right:after,article.position-bottom-right:after{left:1rem}article.position-top-center:after,article.position-bottom-center:after{right:50%;transform:translate(50%)}article.position-right-top:after,article.position-right-center:after,article.position-right-bottom:after{left:-1.25rem;border-right-color:var(--ec-tooltip-background-color, #162F3B)}article.position-left-top:after,article.position-left-center:after,article.position-left-bottom:after{right:-1.25rem;border-left-color:var(--ec-tooltip-background-color, #162F3B)}article.position-left-top:after,article.position-right-top:after{top:1rem}article.position-left-bottom:after,article.position-right-bottom:after{bottom:1rem}article.position-left-center:after,article.position-right-center:after{bottom:50%;transform:translateY(50%)}.text-heading-2,.text-body-1{color:var(--ec-color-primary-light)}.text-body-1 ::ng-deep p:last-child{margin-bottom:0}.text-body-1 ::ng-deep a{font-weight:var(--ec-font-weight-bold)}.text-caption-1{color:var(--ec-color-secondary-light)}ec-button{position:absolute;top:.25rem;right:.25rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "icon", "label", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TooltipComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ec-tooltip', template: "<article id=\"{{id}}\" class=\"py-3 position-{{position}}\">\r\n  <header *ngIf=\"title || subtitle\" class=\"mb-3\">\r\n    <h1 class=\"text-heading-2 px-3 mb-0\">{{title}}</h1>\r\n    <p class=\"text-caption-1 px-3 mb-0\">{{subtitle}}</p>\r\n  </header>\r\n  \r\n  <ng-container *ngIf=\"customContent; else textTemplate\">\r\n    <ng-container *ngTemplateOutlet=\"customContent\"></ng-container>\r\n  </ng-container>\r\n\r\n  <ng-template #textTemplate>\r\n    <div class=\"text-body-1 px-3\" [innerHTML]=\"text\"></div>\r\n  </ng-template>\r\n  \r\n  <ec-button *ngIf=\"dismissible\" id=\"tooltipDismiss\" type=\"icon\" icon=\"icon-cancel\" (clicked)=\"hide()\" style=\"--ec-button-color-icon: var(--ec-color-secondary-light);\"></ec-button>\r\n</article>", styles: [":host{display:block;padding:.75rem}article{background-color:var(--ec-tooltip-background-color, #162F3B);color:var(--ec-tooltip-color, var(--ec-color-primary-light));border-radius:var(--ec-border-radius-card);position:relative;box-shadow:var(--ec-box-shadow-overlay);--ec-color-interactive: var(--ec-color-interactive-light)}article:after{content:\"\";height:0;width:0;border:.625rem solid transparent;display:block;position:absolute;pointer-events:none}article.position-top-left:after,article.position-top-center:after,article.position-top-right:after{bottom:-1.25rem;border-top-color:var(--ec-tooltip-background-color, #162F3B)}article.position-bottom-left:after,article.position-bottom-center:after,article.position-bottom-right:after{top:-1.25rem;border-bottom-color:var(--ec-tooltip-background-color, #162F3B)}article.position-top-left:after,article.position-bottom-left:after{right:1rem}article.position-top-right:after,article.position-bottom-right:after{left:1rem}article.position-top-center:after,article.position-bottom-center:after{right:50%;transform:translate(50%)}article.position-right-top:after,article.position-right-center:after,article.position-right-bottom:after{left:-1.25rem;border-right-color:var(--ec-tooltip-background-color, #162F3B)}article.position-left-top:after,article.position-left-center:after,article.position-left-bottom:after{right:-1.25rem;border-left-color:var(--ec-tooltip-background-color, #162F3B)}article.position-left-top:after,article.position-right-top:after{top:1rem}article.position-left-bottom:after,article.position-right-bottom:after{bottom:1rem}article.position-left-center:after,article.position-right-center:after{bottom:50%;transform:translateY(50%)}.text-heading-2,.text-body-1{color:var(--ec-color-primary-light)}.text-body-1 ::ng-deep p:last-child{margin-bottom:0}.text-body-1 ::ng-deep a{font-weight:var(--ec-font-weight-bold)}.text-caption-1{color:var(--ec-color-secondary-light)}ec-button{position:absolute;top:.25rem;right:.25rem}\n"] }]
+        }], propDecorators: { backgroundColor: [{
+                type: HostBinding,
+                args: ['style.--ec-tooltip-background-color']
+            }] } });
+
+class TooltipService {
+    constructor(overlay) {
+        this.overlay = overlay;
+        this.positions = {
+            'top-left': { originX: 'center', originY: 'top', overlayX: 'end', overlayY: 'bottom', offsetX: 38 },
+            'top-center': { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom' },
+            'top-right': { originX: 'center', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetX: -38 },
+            'bottom-left': { originX: 'center', originY: 'bottom', overlayX: 'end', overlayY: 'top', offsetX: 38 },
+            'bottom-center': { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top' },
+            'bottom-right': { originX: 'center', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetX: -38 },
+            'left-top': { originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'top', offsetY: -38 },
+            'left-center': { originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center' },
+            'left-bottom': { originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'bottom', offsetY: 38 },
+            'right-top': { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'top', offsetY: -38 },
+            'right-center': { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center' },
+            'right-bottom': { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'bottom', offsetY: 38 }
+        };
+    }
+    /**
+     * Show a tooltip attached to a specified element
+     */
+    show(anchor, position = 'top-center', options) {
+        const overlayConfig = this.getOverlayConfig(anchor, this.positions[position], options?.width, options?.maxWidth);
+        const overlayRef = this.overlay.create(overlayConfig);
+        const contentPortal = new ComponentPortal(TooltipComponent);
+        const contentViewRef = overlayRef.attach(contentPortal);
+        contentViewRef.instance.position = position;
+        contentViewRef.instance.id = options?.id;
+        contentViewRef.instance.title = options?.title;
+        contentViewRef.instance.subtitle = options?.subtitle;
+        contentViewRef.instance.text = options?.text;
+        contentViewRef.instance.customContent = options?.customContent;
+        contentViewRef.instance.dismissible = options?.dismissible || false;
+        contentViewRef.instance.backgroundColor = options?.backgroundColor;
+        contentViewRef.instance.overlayRef = overlayRef;
+        return contentViewRef.instance;
+    }
+    onMove(event, contentRect) {
+        let callCallback = false;
+        if (contentRect) {
+            if (event.clientX > contentRect.right
+                || event.clientX < contentRect.left
+                || event.clientY > contentRect.bottom
+                || event.clientY < contentRect.top) {
+                callCallback = true;
+            }
+        }
+        return callCallback;
+    }
+    getOverlayConfig(element, position, width, maxWidth) {
+        const positionStrategy = this.overlay.position()
+            .flexibleConnectedTo(element)
+            .withPositions([position]);
+        const config = new OverlayConfig({
+            positionStrategy: positionStrategy,
+            width: width,
+            maxWidth: maxWidth
+        });
+        return config;
+    }
+}
+TooltipService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TooltipService, deps: [{ token: i1$2.Overlay }], target: i0.ɵɵFactoryTarget.Injectable });
+TooltipService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TooltipService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TooltipService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: i1$2.Overlay }]; } });
+
 class TagsComponent {
     constructor() {
         /**The ID of this set of tags */
@@ -4326,10 +4417,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
             }] } });
 
 class PopoverComponent {
-    constructor(overlay, viewContainerRef, elementRef) {
+    constructor(overlay, viewContainerRef, elementRef, tooltipService) {
         this.overlay = overlay;
         this.viewContainerRef = viewContainerRef;
         this.elementRef = elementRef;
+        this.tooltipService = tooltipService;
         /** An optional icon that, if provided, enables the popover to use it as the anchor element */
         this.icon = '';
         this.contentPosition = 'top-left';
@@ -4359,6 +4451,9 @@ class PopoverComponent {
             const contentPortal = new TemplatePortal(this.content, this.viewContainerRef);
             this.contentViewRef = this.overlayRef.attach(contentPortal);
             this.isVisible = true;
+            //contentRect will be assing only after showing a tooltip/popover and it will be
+            //reset after hide the same tooltip/popover
+            this.contentRect = this.contentViewRef?.rootNodes[0].getBoundingClientRect();
         }
     }
     onMouseOver() {
@@ -4371,23 +4466,19 @@ class PopoverComponent {
      * Hides the popover if the mouse moves outside of the popover content
      */
     onMouseMove(event) {
-        if (!this.contentRect) {
-            this.contentRect = this.contentViewRef?.rootNodes[0].getBoundingClientRect();
-        }
+        let callCallback = false;
         if (this.contentRect) {
-            if (event.clientX > this.contentRect.right
-                || event.clientX < this.contentRect.left
-                || event.clientY > this.contentRect.bottom
-                || event.clientY < this.contentRect.top) {
+            callCallback = this.tooltipService.onMove(event, this.contentRect);
+            if (callCallback) {
                 this.hide();
             }
         }
     }
     hide() {
-        this.contentRect = undefined;
+        this.interrupt.next();
         this.overlayRef?.dispose();
         this.isVisible = false;
-        this.interrupt.next();
+        this.contentRect = undefined;
     }
     getOverlayConfig() {
         const position = this.getPosition();
@@ -4406,12 +4497,12 @@ class PopoverComponent {
         return { originX: overlayX, originY: overlayY, overlayX: overlayX, overlayY: overlayY };
     }
 }
-PopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: PopoverComponent, deps: [{ token: i1$2.Overlay }, { token: i0.ViewContainerRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+PopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: PopoverComponent, deps: [{ token: i1$2.Overlay }, { token: i0.ViewContainerRef }, { token: i0.ElementRef }, { token: TooltipService }], target: i0.ɵɵFactoryTarget.Component });
 PopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: PopoverComponent, selector: "ec-popover", inputs: { icon: "icon", tag: "tag", tagHoverType: "tagHoverType", contentPosition: "contentPosition", iconHoverClass: "iconHoverClass" }, host: { listeners: { "mouseover": "onMouseOver()", "mouseleave": "onLeave()" } }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }], ngImport: i0, template: "<!-- Before hover state -->\r\n<div class=\"p-2\">\r\n  <i *ngIf=\"!tag\" class=\"ec-icon {{icon}} ec-icon-sm\"></i>\r\n  <ec-tags *ngIf=\"tag\"\r\n            [isCondensed] = \"true\"\r\n            [tags]=\"tag\">\r\n  </ec-tags>\r\n</div>\r\n<!-- ./Before hover state -->\r\n\r\n<!-- Hover state -->\r\n<ng-template #content>\r\n  <article class=\"popover-content\"\r\n           (document:mousemove)=\"onMouseMove($event)\">\r\n    <ng-content></ng-content>\r\n  </article>\r\n  <div class=\"p-2 {{contentPosition}}\">\r\n    <i *ngIf=\"!tag\" class=\"ec-icon {{icon}} ec-icon-sm {{iconHoverClass}}\"></i>\r\n    <ec-tags *ngIf=\"tag\"\r\n             [isCondensed]=\"true\"\r\n             [tags]=\"hoverTag\">\r\n    </ec-tags>\r\n  </div>\r\n</ng-template>\r\n<!-- ./Hover state -->\r\n", styles: [":host{line-height:.75rem;display:inline-block}.popover-content{border-radius:var(--ec-border-radius);box-shadow:0 3px 6px #1a1a231f;overflow:hidden;position:relative}.popover-content+div{position:absolute;line-height:.75rem}.popover-content+div.top-left{top:0;left:0}.popover-content+div.top-right{top:0;right:0}.popover-content+div.bottom-right{bottom:0;right:0}.popover-content+div.bottom-left{bottom:0;left:0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TagsComponent, selector: "ec-tags", inputs: ["id", "tags", "wrap", "isCondensed"], outputs: ["tagClosed"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: PopoverComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ec-popover', template: "<!-- Before hover state -->\r\n<div class=\"p-2\">\r\n  <i *ngIf=\"!tag\" class=\"ec-icon {{icon}} ec-icon-sm\"></i>\r\n  <ec-tags *ngIf=\"tag\"\r\n            [isCondensed] = \"true\"\r\n            [tags]=\"tag\">\r\n  </ec-tags>\r\n</div>\r\n<!-- ./Before hover state -->\r\n\r\n<!-- Hover state -->\r\n<ng-template #content>\r\n  <article class=\"popover-content\"\r\n           (document:mousemove)=\"onMouseMove($event)\">\r\n    <ng-content></ng-content>\r\n  </article>\r\n  <div class=\"p-2 {{contentPosition}}\">\r\n    <i *ngIf=\"!tag\" class=\"ec-icon {{icon}} ec-icon-sm {{iconHoverClass}}\"></i>\r\n    <ec-tags *ngIf=\"tag\"\r\n             [isCondensed]=\"true\"\r\n             [tags]=\"hoverTag\">\r\n    </ec-tags>\r\n  </div>\r\n</ng-template>\r\n<!-- ./Hover state -->\r\n", styles: [":host{line-height:.75rem;display:inline-block}.popover-content{border-radius:var(--ec-border-radius);box-shadow:0 3px 6px #1a1a231f;overflow:hidden;position:relative}.popover-content+div{position:absolute;line-height:.75rem}.popover-content+div.top-left{top:0;left:0}.popover-content+div.top-right{top:0;right:0}.popover-content+div.bottom-right{bottom:0;right:0}.popover-content+div.bottom-left{bottom:0;left:0}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$2.Overlay }, { type: i0.ViewContainerRef }, { type: i0.ElementRef }]; }, propDecorators: { icon: [{
+        }], ctorParameters: function () { return [{ type: i1$2.Overlay }, { type: i0.ViewContainerRef }, { type: i0.ElementRef }, { type: TooltipService }]; }, propDecorators: { icon: [{
                 type: Input
             }], tag: [{
                 type: Input
@@ -8918,27 +9009,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
                 type: Input
             }] } });
 
-class TooltipComponent {
-    constructor() {
-        this.position = 'top-center';
-        this.dismissible = false;
-        this.onHide = new EventEmitter();
-    }
-    hide() {
-        this.onHide.next();
-        this.overlayRef?.dispose();
-    }
-}
-TooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: TooltipComponent, selector: "ec-tooltip", host: { properties: { "style.--ec-tooltip-background-color": "this.backgroundColor" } }, ngImport: i0, template: "<article id=\"{{id}}\" class=\"py-3 position-{{position}}\">\r\n  <header *ngIf=\"title || subtitle\" class=\"mb-3\">\r\n    <h1 class=\"text-heading-2 px-3 mb-0\">{{title}}</h1>\r\n    <p class=\"text-caption-1 px-3 mb-0\">{{subtitle}}</p>\r\n  </header>\r\n  \r\n  <ng-container *ngIf=\"customContent; else textTemplate\">\r\n    <ng-container *ngTemplateOutlet=\"customContent\"></ng-container>\r\n  </ng-container>\r\n\r\n  <ng-template #textTemplate>\r\n    <div class=\"text-body-1 px-3\" [innerHTML]=\"text\"></div>\r\n  </ng-template>\r\n  \r\n  <ec-button *ngIf=\"dismissible\" id=\"tooltipDismiss\" type=\"icon\" icon=\"icon-cancel\" (clicked)=\"hide()\" style=\"--ec-button-color-icon: var(--ec-color-secondary-light);\"></ec-button>\r\n</article>", styles: [":host{display:block;padding:.75rem}article{background-color:var(--ec-tooltip-background-color, #162F3B);color:var(--ec-tooltip-color, var(--ec-color-primary-light));border-radius:var(--ec-border-radius-card);position:relative;box-shadow:var(--ec-box-shadow-overlay);--ec-color-interactive: var(--ec-color-interactive-light)}article:after{content:\"\";height:0;width:0;border:.625rem solid transparent;display:block;position:absolute;pointer-events:none}article.position-top-left:after,article.position-top-center:after,article.position-top-right:after{bottom:-1.25rem;border-top-color:var(--ec-tooltip-background-color, #162F3B)}article.position-bottom-left:after,article.position-bottom-center:after,article.position-bottom-right:after{top:-1.25rem;border-bottom-color:var(--ec-tooltip-background-color, #162F3B)}article.position-top-left:after,article.position-bottom-left:after{right:1rem}article.position-top-right:after,article.position-bottom-right:after{left:1rem}article.position-top-center:after,article.position-bottom-center:after{right:50%;transform:translate(50%)}article.position-right-top:after,article.position-right-center:after,article.position-right-bottom:after{left:-1.25rem;border-right-color:var(--ec-tooltip-background-color, #162F3B)}article.position-left-top:after,article.position-left-center:after,article.position-left-bottom:after{right:-1.25rem;border-left-color:var(--ec-tooltip-background-color, #162F3B)}article.position-left-top:after,article.position-right-top:after{top:1rem}article.position-left-bottom:after,article.position-right-bottom:after{bottom:1rem}article.position-left-center:after,article.position-right-center:after{bottom:50%;transform:translateY(50%)}.text-heading-2,.text-body-1{color:var(--ec-color-primary-light)}.text-body-1 ::ng-deep p:last-child{margin-bottom:0}.text-body-1 ::ng-deep a{font-weight:var(--ec-font-weight-bold)}.text-caption-1{color:var(--ec-color-secondary-light)}ec-button{position:absolute;top:.25rem;right:.25rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "icon", "label", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TooltipComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ec-tooltip', template: "<article id=\"{{id}}\" class=\"py-3 position-{{position}}\">\r\n  <header *ngIf=\"title || subtitle\" class=\"mb-3\">\r\n    <h1 class=\"text-heading-2 px-3 mb-0\">{{title}}</h1>\r\n    <p class=\"text-caption-1 px-3 mb-0\">{{subtitle}}</p>\r\n  </header>\r\n  \r\n  <ng-container *ngIf=\"customContent; else textTemplate\">\r\n    <ng-container *ngTemplateOutlet=\"customContent\"></ng-container>\r\n  </ng-container>\r\n\r\n  <ng-template #textTemplate>\r\n    <div class=\"text-body-1 px-3\" [innerHTML]=\"text\"></div>\r\n  </ng-template>\r\n  \r\n  <ec-button *ngIf=\"dismissible\" id=\"tooltipDismiss\" type=\"icon\" icon=\"icon-cancel\" (clicked)=\"hide()\" style=\"--ec-button-color-icon: var(--ec-color-secondary-light);\"></ec-button>\r\n</article>", styles: [":host{display:block;padding:.75rem}article{background-color:var(--ec-tooltip-background-color, #162F3B);color:var(--ec-tooltip-color, var(--ec-color-primary-light));border-radius:var(--ec-border-radius-card);position:relative;box-shadow:var(--ec-box-shadow-overlay);--ec-color-interactive: var(--ec-color-interactive-light)}article:after{content:\"\";height:0;width:0;border:.625rem solid transparent;display:block;position:absolute;pointer-events:none}article.position-top-left:after,article.position-top-center:after,article.position-top-right:after{bottom:-1.25rem;border-top-color:var(--ec-tooltip-background-color, #162F3B)}article.position-bottom-left:after,article.position-bottom-center:after,article.position-bottom-right:after{top:-1.25rem;border-bottom-color:var(--ec-tooltip-background-color, #162F3B)}article.position-top-left:after,article.position-bottom-left:after{right:1rem}article.position-top-right:after,article.position-bottom-right:after{left:1rem}article.position-top-center:after,article.position-bottom-center:after{right:50%;transform:translate(50%)}article.position-right-top:after,article.position-right-center:after,article.position-right-bottom:after{left:-1.25rem;border-right-color:var(--ec-tooltip-background-color, #162F3B)}article.position-left-top:after,article.position-left-center:after,article.position-left-bottom:after{right:-1.25rem;border-left-color:var(--ec-tooltip-background-color, #162F3B)}article.position-left-top:after,article.position-right-top:after{top:1rem}article.position-left-bottom:after,article.position-right-bottom:after{bottom:1rem}article.position-left-center:after,article.position-right-center:after{bottom:50%;transform:translateY(50%)}.text-heading-2,.text-body-1{color:var(--ec-color-primary-light)}.text-body-1 ::ng-deep p:last-child{margin-bottom:0}.text-body-1 ::ng-deep a{font-weight:var(--ec-font-weight-bold)}.text-caption-1{color:var(--ec-color-secondary-light)}ec-button{position:absolute;top:.25rem;right:.25rem}\n"] }]
-        }], propDecorators: { backgroundColor: [{
-                type: HostBinding,
-                args: ['style.--ec-tooltip-background-color']
-            }] } });
-
 class Tour {
     constructor() {
         /** Unique identifier for the tour */
@@ -9039,64 +9109,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: CacheService }]; } });
 
-class TooltipService {
-    constructor(overlay) {
-        this.overlay = overlay;
-        this.positions = {
-            'top-left': { originX: 'center', originY: 'top', overlayX: 'end', overlayY: 'bottom', offsetX: 38 },
-            'top-center': { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom' },
-            'top-right': { originX: 'center', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetX: -38 },
-            'bottom-left': { originX: 'center', originY: 'bottom', overlayX: 'end', overlayY: 'top', offsetX: 38 },
-            'bottom-center': { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top' },
-            'bottom-right': { originX: 'center', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetX: -38 },
-            'left-top': { originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'top', offsetY: -38 },
-            'left-center': { originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center' },
-            'left-bottom': { originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'bottom', offsetY: 38 },
-            'right-top': { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'top', offsetY: -38 },
-            'right-center': { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center' },
-            'right-bottom': { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'bottom', offsetY: 38 }
-        };
-    }
-    /**
-     * Show a tooltip attached to a specified element
-     */
-    show(anchor, position = 'top-center', options) {
-        const overlayConfig = this.getOverlayConfig(anchor, this.positions[position], options?.width, options?.maxWidth);
-        const overlayRef = this.overlay.create(overlayConfig);
-        const contentPortal = new ComponentPortal(TooltipComponent);
-        const contentViewRef = overlayRef.attach(contentPortal);
-        contentViewRef.instance.position = position;
-        contentViewRef.instance.id = options?.id;
-        contentViewRef.instance.title = options?.title;
-        contentViewRef.instance.subtitle = options?.subtitle;
-        contentViewRef.instance.text = options?.text;
-        contentViewRef.instance.customContent = options?.customContent;
-        contentViewRef.instance.dismissible = options?.dismissible || false;
-        contentViewRef.instance.backgroundColor = options?.backgroundColor;
-        contentViewRef.instance.overlayRef = overlayRef;
-        return contentViewRef.instance;
-    }
-    getOverlayConfig(element, position, width, maxWidth) {
-        const positionStrategy = this.overlay.position()
-            .flexibleConnectedTo(element)
-            .withPositions([position]);
-        const config = new OverlayConfig({
-            positionStrategy: positionStrategy,
-            width: width,
-            maxWidth: maxWidth
-        });
-        return config;
-    }
-}
-TooltipService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TooltipService, deps: [{ token: i1$2.Overlay }], target: i0.ɵɵFactoryTarget.Injectable });
-TooltipService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TooltipService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TooltipService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: function () { return [{ type: i1$2.Overlay }]; } });
-
 class TourComponent {
     constructor(tourService, tooltipService, telemetryService, cacheService, dialogService, translateService, document) {
         this.tourService = tourService;
@@ -9548,6 +9560,19 @@ class TooltipDirective {
             console.error('There are too many parameters or none parameter to config the tooltip options');
         }
     }
+    //Detects where the mouse is to trigger the leave/hide process
+    onMouseMove(event) {
+        let callCallback = false;
+        if (this.contentRect) {
+            callCallback = this.tooltipService.onMove(event, this.contentRect);
+            if (callCallback) {
+                //trigger on hide process
+                this.interrupt.next();
+                //reset the contentRec for a new tooltip
+                this.contentRect = undefined;
+            }
+        }
+    }
     //Trigger the process to show the tooltip
     onMouseOver() {
         this.mouseOver.next();
@@ -9597,8 +9622,13 @@ class TooltipDirective {
     show() {
         //Reference to the element where to tooltip is attached
         const element = this.element.nativeElement;
+        //contentRect will be assing only after showing a tooltip/popover and it will be
+        //reset after hide the same tooltip/popover
+        this.contentRect = this.element.nativeElement.getBoundingClientRect();
         //tooltipPosition is never undefined, default value = "top-center"
-        this.tooltip = this.tooltipService.show(element, this.tooltipPosition, this.tooltipOptions);
+        if (!this.tooltip) {
+            this.tooltip = this.tooltipService.show(element, this.tooltipPosition, this.tooltipOptions);
+        }
     }
     hide() {
         //There is a timing issue between the show - hide with 
@@ -9607,6 +9637,7 @@ class TooltipDirective {
         if (this.tooltip) {
             //Call the hide() from the tooltip component
             this.tooltip.hide();
+            this.tooltip = undefined;
         }
         //Interrupt the flow of mouseover with a delay and triggers the 
         //flow to hide the tooltip with a delay 
@@ -9617,11 +9648,11 @@ class TooltipDirective {
     //When the element where the tooltip is attached disappears
     //the tooltip should be destroy as well  
     ngOnDestroy() {
-        this.onLeave();
+        this.interrupt.next();
     }
 }
 TooltipDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TooltipDirective, deps: [{ token: TooltipService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-TooltipDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.0", type: TooltipDirective, selector: "[ecTooltip]", inputs: { tooltipConfig: "tooltipConfig", tooltipText: "tooltipText", tooltipCustomContent: "tooltipCustomContent", tooltipPosition: "tooltipPosition" }, host: { listeners: { "mouseover": "onMouseOver()", "mouseleave": "onLeave()" } }, ngImport: i0 });
+TooltipDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.0", type: TooltipDirective, selector: "[ecTooltip]", inputs: { tooltipConfig: "tooltipConfig", tooltipText: "tooltipText", tooltipCustomContent: "tooltipCustomContent", tooltipPosition: "tooltipPosition" }, host: { listeners: { "document:mousemove": "onMouseMove($event)", "mouseover": "onMouseOver()", "mouseleave": "onLeave()" } }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TooltipDirective, decorators: [{
             type: Directive,
             args: [{
@@ -9635,6 +9666,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
                 type: Input
             }], tooltipPosition: [{
                 type: Input
+            }], onMouseMove: [{
+                type: HostListener,
+                args: ['document:mousemove', ['$event']]
             }], onMouseOver: [{
                 type: HostListener,
                 args: ['mouseover']