@dev-tcloud/tcloud-ui 0.0.97 → 0.0.98

package/fesm2020/dev-tcloud-tcloud-ui.mjs

@@ -4358,52 +4358,46 @@ class TCloudUiTooltipDirective {
     constructor(el, renderer) {
         this.el = el;
         this.renderer = renderer;
-        this._direction = 'top';
-        // main
-        this.el_height = 0;
-        this.el_width = 0;
-        this.el_center = 0;
-        this.el_position = 0;
-        // tooltip
-        this.target_height = 0;
-        this.target_width = 0;
-        this.target_center = 0;
-        this.ID = '';
         this.info_text = '';
+        this._direction = 'top';
     }
-    onMouseOver() {
-        if (this.getElement()) {
-            this.renderer.addClass(this.el.nativeElement, 'main-tooltip');
-            const el = this.getElement();
-            el.style.display = 'inline';
-            setTimeout(() => {
-                switch (this._direction) {
-                    case 'top':
-                        this.to_top(el);
-                        break;
-                    case 'bottom':
-                        this.to_bottom(el);
-                        break;
-                    case 'left':
-                        this.to_left(el);
-                        break;
-                    case 'right':
-                        this.to_right(el);
-                        break;
-                }
-            });
-        }
-    }
-    onMouseOut() {
-        if (this.getElement()) {
-            const el = this.getElement();
-            el.style.display = 'none';
-            this.renderer.removeClass(this.el.nativeElement, 'main-tooltip');
+    onMouseOver(event) {
+        const scrollTop = window.scrollY || window.pageYOffset;
+        const tooltip = this.renderer.createElement('div');
+        const rect = this.el.nativeElement?.getBoundingClientRect();
+        const direction = this.el.nativeElement?.attributes['ng-reflect--t-cdirection']?.value || 'top';
+        const el_position_x = (rect?.left) ? parseInt(rect?.left) : 0;
+        const el_position_y = (rect?.top) ? parseInt(rect?.top + scrollTop) : 0;
+        let width = 0;
+        let height = 0;
+        if (event && event.target) {
+            const _event = event.target;
+            height = _event.offsetHeight;
+            width = _event.offsetWidth;
+        }
+        const top = `${(el_position_y - ((height / 2) + 10))}px`;
+        const left = `${el_position_x + (width / 2)}px`;
+        this.renderer.setStyle(tooltip, 'top', '0px');
+        this.renderer.setStyle(tooltip, 'left', '0px');
+        this.renderer.setStyle(tooltip, 'opacity', '0');
+        this.renderer.addClass(tooltip, 'tc-directive-tooltip');
+        this.renderer.addClass(tooltip, `tc-directive-tooltip-${direction}`);
+        const id = this.generateID();
+        this.renderer.setAttribute(tooltip, 'id', id);
+        const textNode = this.renderer.createText(`${this.info_text}`);
+        this.renderer.appendChild(tooltip, textNode);
+        this.renderer.appendChild(document.body, tooltip);
+        this.start_tooltip(id, height, width, el_position_x, el_position_y, direction);
+    }
+    onMouseOut(event) {
+        const customDiv = document.querySelector('.tc-directive-tooltip');
+        if (customDiv) {
+            customDiv.remove();
         }
     }
     set TCtooltip(tooltip) {
         if (tooltip) {
-            this.check(tooltip);
+            this.info_text = tooltip;
         }
     }
     set TCdirection(direction) {
@@ -4411,51 +4405,49 @@ class TCloudUiTooltipDirective {
             this._direction = direction;
         }
     }
-    ngOnInit() {
-    }
-    generateID() {
-        return `tc-tooltip-${Math.floor(Math.random() * Math.floor(Math.random() * Date.now()))}`;
-    }
-    getElement() {
-        return document.getElementById(this.ID) || undefined;
-    }
-    check(tooltip) {
-        this.ID = this.generateID();
-        this.info_text = tooltip;
-        let el = this.el.nativeElement;
-        this.main_el = el;
-        if (el) {
-            this.create_tooltip(tooltip, el);
-        }
-        else {
-            console.log("TCL: tooltip -> el", this.el.nativeElement);
-        }
-    }
-    create_tooltip(tip, el) {
-        const tooltip = document.createElement("div");
-        tooltip.setAttribute('id', this.ID);
-        tooltip.innerHTML = tip;
-        el.insertBefore(tooltip, null);
-    }
-    to_top(el) {
-        const pos = this.el_center - (this.target_center);
-        el.setAttribute('class', 'tc-directive-tooltip tc-directive-tooltip-top');
+    generateID(target) {
+        const ref = (target) ? `-${target}` : '';
+        return `tc-tooltip-${Math.floor(Math.random() * Math.floor(Math.random() * Date.now()))}${ref}`;
     }
-    to_bottom(el) {
-        const pos = this.el_center - (this.target_center);
-        el.setAttribute('class', 'tc-directive-tooltip tc-directive-tooltip-bottom');
-    }
-    to_right(el) {
-        const pos = this.el_width;
-        el.setAttribute('class', 'tc-directive-tooltip tc-directive-tooltip-right');
-    }
-    to_left(el) {
-        const pos = -((this.target_width));
-        el.setAttribute('class', 'tc-directive-tooltip tc-directive-tooltip-left');
+    start_tooltip(id, height, width, el_position_x, el_position_y, direction) {
+        setTimeout(() => {
+            const tooltip = document.getElementById(id);
+            const tooltip_height = tooltip.clientHeight;
+            const tooltip_width = tooltip.clientWidth;
+            /*
+            console.log('altura do target: ', height);
+            console.log('largura do target: ', width);
+            console.log('el_position_x do target: ', el_position_x);
+            console.log('el_position_y do target: ', el_position_y);
+            console.log('direction do tooltip: ', direction);
+            */
+            let p_y = 0;
+            let p_x = 0;
+            const center_position = (el_position_x + (width / 2)) - (tooltip_width / 2);
+            if (direction === 'top') {
+                p_y = (el_position_y - tooltip_height) - 15;
+                p_x = center_position;
+            }
+            if (direction === 'bottom') {
+                p_y = (el_position_y + height) + 15;
+                p_x = center_position;
+            }
+            if (direction === 'left') {
+                p_y = el_position_y - (tooltip_height / 2) + (height / 2);
+                p_x = center_position - tooltip_width / 2 - width / 2 - 15;
+            }
+            if (direction === 'right') {
+                p_y = el_position_y - (tooltip_height / 2) + (height / 2);
+                p_x = center_position + tooltip_width / 2 + width / 2 + 15;
+            }
+            this.renderer.setStyle(tooltip, 'top', `${p_y}px`);
+            this.renderer.setStyle(tooltip, 'left', `${p_x}px`);
+            this.renderer.addClass(tooltip, 'tc-tooltip-fade-in');
+        });
     }
 }
 TCloudUiTooltipDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiTooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-TCloudUiTooltipDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiTooltipDirective, selector: "[TCtooltip]", inputs: { TCtooltip: "TCtooltip", TCdirection: "TCdirection" }, host: { listeners: { "mouseover": "onMouseOver()", "mouseout": "onMouseOut()" } }, ngImport: i0 });
+TCloudUiTooltipDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiTooltipDirective, selector: "[TCtooltip]", inputs: { TCtooltip: "TCtooltip", TCdirection: "TCdirection" }, host: { listeners: { "mouseover": "onMouseOver($event)", "mouseout": "onMouseOut($event)" } }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiTooltipDirective, decorators: [{
             type: Directive,
             args: [{
@@ -4463,10 +4455,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { onMouseOver: [{
                 type: HostListener,
-                args: ['mouseover']
+                args: ['mouseover', ['$event']]
             }], onMouseOut: [{
                 type: HostListener,
-                args: ['mouseout']
+                args: ['mouseout', ['$event']]
             }], TCtooltip: [{
                 type: Input
             }], TCdirection: [{