From 6a8f9f55f0f2da6b3fb3daf97285dde4b8b9fb90 Mon Sep 17 00:00:00 2001
From: ma7payne <matich04@gmail.com>
Date: Fri, 18 Oct 2024 12:35:09 -0300
Subject: [PATCH] fix(plex): fixes en componentes para version 8.0.5 (#346)

---
 src/demo/app/home/home.component.ts |  3 ++-
 src/lib/hint/hint.component.ts      | 34 +++++++++++++++++++++++++----
 2 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/src/demo/app/home/home.component.ts b/src/demo/app/home/home.component.ts
index f905f0c4..91ec229d 100644
--- a/src/demo/app/home/home.component.ts
+++ b/src/demo/app/home/home.component.ts
@@ -12,6 +12,8 @@ export class HomeDemoComponent implements OnInit {
     public data = [];
     documento = '45979360';
 
+    public modelSelector;
+
     constructor(
         public plex: Plex,
         private ref: ChangeDetectorRef,
@@ -23,7 +25,6 @@ export class HomeDemoComponent implements OnInit {
 
     ngOnInit() {
         this.ref.detectChanges();
-
     }
 
     openVisualizador() {
diff --git a/src/lib/hint/hint.component.ts b/src/lib/hint/hint.component.ts
index c778965d..b7b654b5 100644
--- a/src/lib/hint/hint.component.ts
+++ b/src/lib/hint/hint.component.ts
@@ -1,5 +1,5 @@
 import { MatTooltip } from '@angular/material/tooltip';
-import { Component, OnInit, Input, HostListener, ViewChild, ElementRef } from '@angular/core';
+import { Component, OnInit, Input, HostListener, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
 import { PlexType } from '../core/plex-type.type';
 
 @Component({
@@ -11,7 +11,7 @@ import { PlexType } from '../core/plex-type.type';
         </span>
     `
 })
-export class HintComponent implements OnInit {
+export class HintComponent implements OnInit, AfterViewInit {
 
     @Input()
     hostElement: HTMLElement;
@@ -31,14 +31,40 @@ export class HintComponent implements OnInit {
     @Input()
     detach: '' | 'both' | 'right' | 'top';
 
-    constructor() { }
-
     @ViewChild('matTooltip', { static: false }) matTooltip: MatTooltip;
 
+    constructor() { }
+
     ngOnInit() {
         this.position = 'above';
     }
 
+    ngAfterViewInit() {
+        this.adjustIfLabel();
+    }
+
+    adjustIfLabel() {
+        setTimeout(() => {
+            const labelElement = this.hostElement.querySelector('label');
+
+            if (labelElement !== null) {
+                labelElement.style.display = 'inline';
+
+                const label = labelElement.getBoundingClientRect();
+
+                const hintElement = this.hostElement.nextElementSibling as HTMLElement;
+                const hint = hintElement.getBoundingClientRect();
+
+                hintElement.style.position = 'relative';
+                hintElement.style.top = -label.height - 2 * hint.height + 'px';
+
+                const adjustX = this.hostElement.getAttribute('required') === 'true' ? 10 : 0;
+
+                hintElement.style.left = label.width + hint.width + adjustX + 'px';
+            }
+        }, 100);
+    }
+
     showTooltip() {
         this.matTooltip.show(0);
     }