@progressio_resources/gravity-design-system 4.0.26 → 4.0.28

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

@@ -28,11 +28,10 @@ export interface AdComponent {
 }
 
 @Directive({
-    selector: '[tooltip]',
-    exportAs: 'tooltip',
-    standalone: false
+  selector: '[tooltip]',
+  exportAs: 'tooltip',
+  standalone: true
 })
-
 export class GravityTooltipDirective implements OnChanges {
 
   hideTimeoutId!: number;
@@ -55,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;
@@ -123,7 +124,6 @@ export class GravityTooltipDirective implements OnChanges {
     return this._animationDuration;
   }
 
-
   @Input('trigger') trigger!: string;
 
   // Tooltip class
@@ -150,6 +150,7 @@ export class GravityTooltipDirective implements OnChanges {
   @Input('theme') theme!: "dark" | "light";
   @Input('offset') offset!: number;
   @Input('width') width!: string;
+  @Input('persistent') persistent: boolean = false;
 
   // Max width
   @Input('max-width') set maxWidthBackwardCompatibility(value: string) {
@@ -168,7 +169,6 @@ export class GravityTooltipDirective implements OnChanges {
     return this._maxWidth;
   }
 
-
   @Input('id') id: any;
 
   // Show delay
@@ -249,14 +249,13 @@ export class GravityTooltipDirective implements OnChanges {
     if (this.isDisplayOnHover == false) {
       return;
     }
-
     this.show();
   }
 
   @HostListener('focusout')
   @HostListener('mouseleave')
   onMouseLeave() {
-    if (this.options['trigger'] === 'hover') {
+    if (this.options['trigger'] === 'hover' && !this.persistent) {
       this.destroyTooltip();
     }
   }
@@ -268,9 +267,12 @@ export class GravityTooltipDirective implements OnChanges {
     }
 
     this.show();
-    this.hideAfterClickTimeoutId = window.setTimeout(() => {
-      this.destroyTooltip();
-    }, this.options['hideDelayAfterClick'])
+
+    if (!this.persistent) {
+      this.hideAfterClickTimeoutId = window.setTimeout(() => {
+        this.destroyTooltip();
+      }, this.options['hideDelayAfterClick']);
+    }
   }
 
   ngOnChanges(changes: SimpleChanges) {
@@ -283,7 +285,8 @@ export class GravityTooltipDirective implements OnChanges {
 
   ngOnDestroy(): void {
     this.destroyTooltip({
-      fast: true
+      fast: true,
+      force: true
     });
 
     if (this.componentSubscribe) {
@@ -341,16 +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 && !options.force) {
+      return;
+    }
+
+    this.removeResizeListener();
+
     this.clearTimeouts();
 
     if (this.isTooltipDestroyed == false) {
@@ -363,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({
@@ -408,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);
@@ -453,8 +493,6 @@ export class GravityTooltipDirective implements OnChanges {
     }
 
     return this.options['trigger'] == 'click';
-
-
   }
 
   get isTouchScreen() {
@@ -467,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);
   }
@@ -501,4 +537,13 @@ export class GravityTooltipDirective implements OnChanges {
   public hide() {
     this.destroyTooltip();
   }
-}
+
+  public closeFromOutside(): void {
+    if (!this.componentRef || this.isTooltipDestroyed) {
+      return;
+    }
+
+    (this.componentRef.instance as any).closeTooltip();
+    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> {

package/src/lib/vendor/gravity-tooltip/options.interface.ts

@@ -34,4 +34,6 @@ export interface TooltipOptions {
   'hideDelayAfterClick'?: number;
   'pointerEvents'?: 'auto' | 'none';
   'position'?: { top: number, left: number };
+  'persistent'?: boolean;
+  'isBanner'?: boolean;
 }