@progressio_resources/gravity-design-system 3.9.3 → 4.0.1

package/src/lib/vendor/gravity-tooltip/gravity-tooltip.component.sass

@@ -1,8 +1,8 @@
-@import "../../styles/foundations/z-index/z-index"
+@use "../../styles/foundations/z-index/z-index" as z-index
 
 :host
   position: absolute
-  z-index: $z-index-elevated
+  z-index: z-index.$z-index-elevated
   display: block
   opacity: 0
   transition: opacity 300ms
@@ -35,88 +35,100 @@
   top: 100%
   left: 50%
   margin-left: -5px
-  border-width: 5px
-  border-color: var(--bg-tooltip-primary) transparent transparent transparent
+  border: 8px solid transparent
+  border-top-color: var(--bg-tooltip-primary)
+  filter: drop-shadow(0 4px 2px rgba(0,0,0,0.25))
 
 :host.tooltip-top-left::after
   top: 100%
   left: 10%
   margin-left: -5px
-  border-width: 5px
-  border-color: var(--bg-tooltip-primary) transparent transparent transparent
+  border: 8px solid transparent
+  border-top-color: var(--bg-tooltip-primary)
+  filter: drop-shadow(0 4px 2px rgba(0,0,0,0.25))
 
 :host.tooltip-top-right::after
   top: 100%
   left: 90%
   margin-left: -5px
-  border-width: 5px
-  border-color: var(--bg-tooltip-primary) transparent transparent transparent
+  border: 8px solid transparent
+  border-top-color: var(--bg-tooltip-primary)
+  filter: drop-shadow(0 4px 2px rgba(0,0,0,0.25))
 
 :host.tooltip-bottom::after
   bottom: 100%
   left: 50%
   margin-left: -5px
-  border-width: 5px
-  border-color: transparent transparent var(--bg-tooltip-primary) transparent
+  border: 8px solid transparent
+  border-bottom-color: var(--bg-tooltip-primary)
+  filter: drop-shadow(0 -1px 2px rgba(0,0,0,0.25))
 
 :host.tooltip-bottom-left::after
   bottom: 100%
   left: 10%
   margin-left: -5px
-  border-width: 5px
-  border-color: transparent transparent var(--bg-tooltip-primary) transparent
+  border: 8px solid transparent
+  border-bottom-color: var(--bg-tooltip-primary)
+  filter: drop-shadow(0 -1px 2px rgba(0,0,0,0.25))
 
 :host.tooltip-bottom-right::after
   bottom: 100%
   left: 90%
   margin-left: -5px
-  border-width: 5px
-  border-color: transparent transparent var(--bg-tooltip-primary) transparent
+  border: 8px solid transparent
+  border-bottom-color: var(--bg-tooltip-primary)
+  filter: drop-shadow(0 -1px 2px rgba(0,0,0,0.25))
 
 :host.tooltip-left::after
   top: 50%
   left: 100%
   margin-top: -5px
-  border-width: 5px
-  border-color: transparent transparent transparent var(--bg-tooltip-primary)
+  border: 8px solid transparent
+  border-left-color: var(--bg-tooltip-primary)
+  filter: drop-shadow(3px 0px 2px rgba(0,0,0,0.25))
 
 :host.tooltip-left-top::after
   top: 10%
   left: 100%
   margin-top: -5px
-  border-width: 5px
-  border-color: transparent transparent transparent var(--bg-tooltip-primary)
+  border: 8px solid transparent
+  border-left-color: var(--bg-tooltip-primary)
+  filter: drop-shadow(3px 0px 2px rgba(0,0,0,0.25))
 
 :host.tooltip-left-bottom::after
-  top: 90%
+  top: 80%
   left: 100%
   margin-top: -5px
-  border-width: 5px
-  border-color: transparent transparent transparent var(--bg-tooltip-primary)
+  border: 8px solid transparent
+  border-left-color: var(--bg-tooltip-primary)
+  filter: drop-shadow(3px 0px 2px rgba(0,0,0,0.25))
 
 :host.tooltip-right::after
   top: 50%
   right: 100%
   margin-top: -5px
-  border-width: 5px
-  border-color: transparent var(--bg-tooltip-primary) transparent transparent
+  border: 8px solid transparent
+  border-right-color: var(--bg-tooltip-primary)
+  filter: drop-shadow(-3px 0px 2px rgba(0,0,0,0.25))
 
 :host.tooltip-right-top::after
   top: 10%
   right: 100%
   margin-top: -5px
-  border-width: 5px
-  border-color: transparent var(--bg-tooltip-primary) transparent transparent
+  border: 8px solid transparent
+  border-right-color: var(--bg-tooltip-primary)
+  filter: drop-shadow(-3px 0px 2px rgba(0,0,0,0.25))
 
 :host.tooltip-right-bottom::after
-  top: 90%
+  top: 80%
   right: 100%
   margin-top: -5px
-  border-width: 5px
-  border-color: transparent var(--bg-tooltip-primary) transparent transparent
+  border: 8px solid transparent
+  border-right-color: var(--bg-tooltip-primary)
+  filter: drop-shadow(-3px 0px 2px rgba(0,0,0,0.25))
 
 // ==========================
-// LIGHT THEME (tu rombo)
+// LIGHT THEME
 // ==========================
 
 :host.tooltip-light::after
@@ -192,42 +204,70 @@
     top: -1px
     right: 1px
 
-// ==================================================
-// CARET GRANDE SOLO CUANDO persistent = true
-// ==================================================
-
 :host.tooltip-persistent.tooltip::after
   border-width: 24px
 
-// Centrado general del caret grande
-:host.tooltip-persistent.tooltip-top::after,
-:host.tooltip-persistent.tooltip-bottom::after
+// ---- TOP (centrado horizontal) ----
+:host.tooltip-persistent.tooltip-top::after
   margin-left: -24px
 
-:host.tooltip-persistent.tooltip-left::after,
-:host.tooltip-persistent.tooltip-right::after
-  margin-top: -24px
-
-// ==================================================
-// AJUSTES FINOS SOLO PARA LOS CASOS QUE MENCIONASTE
-// ==================================================
+// ---- TOP-LEFT ----
+:host.tooltip-persistent.tooltip-top-left::after
+  left: 10%
+  margin-left: -24px
 
-/* ---- TOP-RIGHT ---- */
+// ---- TOP-RIGHT ----
 :host.tooltip-persistent.tooltip-top-right::after
   left: 85%
   margin-left: -24px
 
-/* ---- BOTTOM-RIGHT ---- */
-:host.tooltip-persistent.tooltip-bottom-right::after
-  left: 85%
+// ---- BOTTOM (centrado horizontal) ----
+:host.tooltip-persistent.tooltip-bottom::after
   margin-left: -24px
 
-/* ---- RIGHT-BOTTOM ---- */
-:host.tooltip-persistent.tooltip-right-bottom::after
-  top: 85%
+// ---- BOTTOM-LEFT ----
+:host.tooltip-persistent.tooltip-bottom-left::after
+  left: 32px
+  margin-left: 0
+
+// ---- BOTTOM-RIGHT ----
+:host.tooltip-persistent.tooltip-bottom-right::after
+  left: auto
+  right: 32px
+  margin-left: 0
+
+// ---- LEFT (centrado vertical) ----
+:host.tooltip-persistent.tooltip-left::after
+  top: 50%
   margin-top: -24px
 
-/* ---- LEFT-BOTTOM ---- */
+// ---- LEFT-TOP ----
+:host.tooltip-persistent.tooltip-left-top::after
+  top: 0
+  bottom: auto
+  margin-top: 26px
+
+// ---- LEFT-BOTTOM ----
 :host.tooltip-persistent.tooltip-left-bottom::after
-  top: 85%
+  top: auto
+  bottom: 0
+  margin-top: 0
+  margin-bottom: 27px
+
+// ---- RIGHT (centrado vertical) ----
+:host.tooltip-persistent.tooltip-right::after
+  top: 50%
   margin-top: -24px
+
+// ---- RIGHT-TOP ----
+:host.tooltip-persistent.tooltip-right-top::after
+  top: 0
+  bottom: auto
+  margin-top: 26px
+
+// ---- RIGHT-BOTTOM ----
+:host.tooltip-persistent.tooltip-right-bottom::after
+  top: auto
+  bottom: 0
+  margin-top: 0
+  margin-bottom: 27px

package/src/lib/vendor/gravity-tooltip/gravity-tooltip.component.ts

@@ -1,10 +1,14 @@
 import {Component, ElementRef, EventEmitter, HostBinding, HostListener, Input, OnInit, Renderer2} from '@angular/core';
+import {NgTemplateOutlet} from '@angular/common';
+import {GravityTooltipModule} from './gravity-tooltip.module';
 
 @Component({
   selector: 'tooltip',
   templateUrl: './gravity-tooltip.component.html',
   host: {'class': 'tooltip'},
-  styleUrls: ['./gravity-tooltip.component.sass']
+  styleUrls: ['./gravity-tooltip.component.sass'],
+  standalone: true,
+  imports: [NgTemplateOutlet, GravityTooltipModule]
 })
 
 export class GravityTooltipComponent implements OnInit {
@@ -26,7 +30,7 @@ export class GravityTooltipComponent implements OnInit {
   @HostBinding('class.tooltip-no-pointer') hostClassNoPointer!: boolean;
   @HostBinding('class.tooltip-persistent') hostClassPersistent!: boolean;
 
-  @HostListener('transitionend', ['$event'])
+  @HostListener('transitionend')
   transitionEnd() {
     if (this.show) {
       this.events.emit({
@@ -248,6 +252,6 @@ export class GravityTooltipComponent implements OnInit {
 
   closeTooltip() {
     this.show = false;
-    this.events.emit({ type: 'hide', position: this.data.elementPosition });
+    this.events.emit({type: 'hide', position: this.data.elementPosition});
   }
 }

package/src/lib/vendor/gravity-tooltip/gravity-tooltip.directive.ts

@@ -30,8 +30,8 @@ export interface AdComponent {
 @Directive({
   selector: '[tooltip]',
   exportAs: 'tooltip',
+  standalone: true
 })
-
 export class GravityTooltipDirective implements OnChanges {
 
   hideTimeoutId!: number;
@@ -54,6 +54,8 @@ export class GravityTooltipDirective implements OnChanges {
   _animationDuration!: number;
   _maxWidth!: string;
 
+  private boundResizeHandler!: () => void;
+
   @Input('options') set options(value: TooltipOptions) {
     if (value && defaultOptions) {
       this._options = value;
@@ -122,7 +124,6 @@ export class GravityTooltipDirective implements OnChanges {
     return this._animationDuration;
   }
 
-
   @Input('trigger') trigger!: string;
 
   // Tooltip class
@@ -168,7 +169,6 @@ export class GravityTooltipDirective implements OnChanges {
     return this._maxWidth;
   }
 
-
   @Input('id') id: any;
 
   // Show delay
@@ -249,7 +249,6 @@ export class GravityTooltipDirective implements OnChanges {
     if (this.isDisplayOnHover == false) {
       return;
     }
-
     this.show();
   }
 
@@ -286,7 +285,8 @@ export class GravityTooltipDirective implements OnChanges {
 
   ngOnDestroy(): void {
     this.destroyTooltip({
-      fast: true
+      fast: true,
+      force: true
     });
 
     if (this.componentSubscribe) {
@@ -344,20 +344,24 @@ export class GravityTooltipDirective implements OnChanges {
 
     this.createTimeoutId = window.setTimeout(() => {
       this.appendComponentToBody(GravityTooltipComponent);
-    }, this.getShowDelay());
 
-    this.showTimeoutId = window.setTimeout(() => {
-      this.showTooltipElem();
+      this.showTimeoutId = window.setTimeout(() => {
+        this.showTooltipElem();
+      }, 10);
+
     }, this.getShowDelay());
   }
 
-  destroyTooltip(options = {
-    fast: false
+  destroyTooltip(options: { fast: boolean, force?: boolean } = {
+    fast: false,
+    force: false
   }): void {
-    if (this.persistent) {
+    if (this.persistent && !options.force) {
       return;
     }
 
+    this.removeResizeListener();
+
     this.clearTimeouts();
 
     if (this.isTooltipDestroyed == false) {
@@ -370,6 +374,11 @@ export class GravityTooltipDirective implements OnChanges {
           return;
         }
 
+        const domElem = (this.componentRef.hostView as EmbeddedViewRef<any>).rootNodes[0] as HTMLElement;
+        if (domElem && domElem.parentNode) {
+          domElem.parentNode.removeChild(domElem);
+        }
+
         this.appRef.detachView(this.componentRef.hostView);
         this.componentRef.destroy();
         this.events.emit({
@@ -415,11 +424,35 @@ export class GravityTooltipDirective implements OnChanges {
     const domElem = (this.componentRef.hostView as EmbeddedViewRef<any>).rootNodes[0] as HTMLElement;
     document.body.appendChild(domElem);
 
+    this.boundResizeHandler = () => this.onResize();
+    window.addEventListener('resize', this.boundResizeHandler);
+
     this.componentSubscribe = (<AdComponent>this.componentRef.instance).events.subscribe((event: any) => {
       this.handleEvents(event);
     });
   }
 
+  private onResize(): void {
+    if (!this.componentRef || this.isTooltipDestroyed) {
+      return;
+    }
+
+    this.getElementPosition();
+
+    (<AdComponent>this.componentRef.instance).data = {
+      ...(<AdComponent>this.componentRef.instance).data,
+      elementPosition: this.tooltipPosition
+    };
+
+    (<AdComponent>this.componentRef.instance as any).setPosition();
+  }
+
+  private removeResizeListener(): void {
+    if (this.boundResizeHandler) {
+      window.removeEventListener('resize', this.boundResizeHandler);
+    }
+  }
+
   clearTimeouts(): void {
     if (this.createTimeoutId) {
       clearTimeout(this.createTimeoutId);
@@ -460,8 +493,6 @@ export class GravityTooltipDirective implements OnChanges {
     }
 
     return this.options['trigger'] == 'click';
-
-
   }
 
   get isTouchScreen() {
@@ -474,8 +505,6 @@ export class GravityTooltipDirective implements OnChanges {
       return true;
     }
 
-    // include the 'heartz' as a way to have a non matching MQ to help terminate the join
-    // https://git.io/vznFH
     var query = ['(', prefixes.join('touch-enabled),('), 'heartz', ')'].join('');
     return mq(query);
   }
@@ -515,6 +544,6 @@ export class GravityTooltipDirective implements OnChanges {
     }
 
     (this.componentRef.instance as any).closeTooltip();
-    this.destroyTooltip({ fast: true });
+    this.destroyTooltip({ fast: true, force: true });
   }
-}
+}

package/src/lib/vendor/gravity-tooltip/gravity-tooltip.module.ts

@@ -1,22 +1,17 @@
 import {ModuleWithProviders, NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {GravityTooltipDirective} from './gravity-tooltip.directive';
-import {GravityTooltipComponent} from './gravity-tooltip.component';
 import {TooltipOptions} from './options.interface';
 import {TooltipOptionsService} from './options.service';
 
 @NgModule({
-  declarations: [
-    GravityTooltipDirective,
-    GravityTooltipComponent
-  ],
-  imports: [
-    CommonModule
-  ],
-  exports: [
-    GravityTooltipDirective,
-    GravityTooltipComponent
-  ]
+    imports: [
+        CommonModule,
+        GravityTooltipDirective
+    ],
+    exports: [
+        GravityTooltipDirective
+    ]
 })
 export class GravityTooltipModule {
   static forRoot(initOptions: TooltipOptions): ModuleWithProviders<GravityTooltipModule> {