From e00137999bddc9a1acb68693349cbdbbd4cd1825 Mon Sep 17 00:00:00 2001
From: ma7payne <matich04@gmail.com>
Date: Fri, 22 Dec 2023 15:10:17 -0300
Subject: [PATCH] =?UTF-8?q?feat(plex):=20modifica=20cierre=20autom=C3=A1ti?=
 =?UTF-8?q?co=20con=20scroll=20en=20plex-help=20(#333)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/help/help.component.ts        | 18 +++++++++++++-----
 src/lib/help/services/help.service.ts |  2 +-
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/lib/help/help.component.ts b/src/lib/help/help.component.ts
index e7ab2258..12f99397 100644
--- a/src/lib/help/help.component.ts
+++ b/src/lib/help/help.component.ts
@@ -1,4 +1,4 @@
-import { Component, ElementRef, EventEmitter, Input, OnInit, Output, Renderer2 } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, EventEmitter, Input, OnInit, Output, Renderer2 } from '@angular/core';
 import { PlexType } from './../core/plex-type.type';
 import { HelpService } from './services/help.service';
 
@@ -23,7 +23,7 @@ import { HelpService } from './services/help.service';
     </div>
     `
 })
-export class PlexHelpComponent implements OnInit {
+export class PlexHelpComponent implements OnInit, AfterViewInit {
 
     @Input() titulo = '';
 
@@ -52,6 +52,7 @@ export class PlexHelpComponent implements OnInit {
     closed = true;
     parentElement;
     id;
+    posicionInicial;
 
     constructor(
         private elementRef: ElementRef,
@@ -63,6 +64,12 @@ export class PlexHelpComponent implements OnInit {
         this.id = Math.floor(Math.random() * 1000);
     }
 
+    ngAfterViewInit() {
+        const elem = this.elementRef.nativeElement.getBoundingClientRect();
+        this.parentElement = this.elementRef.nativeElement.closest('.plex-box-content');
+        this.posicionInicial = elem.top - elem.height;
+    }
+
     get content() {
         return (this.icon && this.icon.length > 0) || (this.tituloBoton && this.tituloBoton.length > 0);
     }
@@ -73,7 +80,9 @@ export class PlexHelpComponent implements OnInit {
     }
 
     public toggle() {
-        this.helpService.closePreviuos(this.id);
+        this.helpService.closePrevious(this.id);
+
+        const helpCard = this.elementRef.nativeElement.querySelector('div.toggle-help .card');
 
         this.closed = !this.closed;
         if (!this.closed) {
@@ -94,10 +103,9 @@ export class PlexHelpComponent implements OnInit {
                 this.unlisten();
             });
 
-            this.parentElement = this.elementRef.nativeElement.closest('.plex-box-content');
             this.parentElement?.addEventListener('scroll', () => {
                 if (this.parentElement?.scrollTop > 0) {
-                    this.toggleClose();
+                    helpCard.style.top = this.posicionInicial - this.parentElement?.scrollTop + 'px';
                 }
             }, false);
         } else {
diff --git a/src/lib/help/services/help.service.ts b/src/lib/help/services/help.service.ts
index 562c7b6a..c9d91317 100644
--- a/src/lib/help/services/help.service.ts
+++ b/src/lib/help/services/help.service.ts
@@ -10,7 +10,7 @@ export class HelpService {
         this.helpCache.next(help);
     }
 
-    closePreviuos(id: number) {
+    closePrevious(id: number) {
         const help = this.helpCache.value;
 
         if (help && help.id !== id) {