@progressio_resources/gravity-design-system 3.9.3 → 4.0.0

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> {