UI: Improve/fix popover hover

ui-ngx/src/app/shared/components/popover.component.ts

@@ -58,6 +58,7 @@ import {
 import { distinctUntilChanged, take, takeUntil } from 'rxjs/operators';
 import { isNotEmptyStr, onParentScrollOrWindowResize } from '@core/utils';
 import { animate, AnimationBuilder, AnimationMetadata, style } from '@angular/animations';
+import { coerceBoolean } from '@shared/decorators/coerce-boolean';
 
 export type TbPopoverTrigger = 'click' | 'focus' | 'hover' | null;
 
@@ -72,10 +73,12 @@ export class TbPopoverDirective implements OnChanges, OnDestroy, AfterViewInit {
 
   /* eslint-disable @angular-eslint/no-input-rename */
   @Input('tbPopoverContent') content?: string | TemplateRef<void>;
+  @Input('tbPopoverContext') context?: any | null = null;
   @Input('tbPopoverTrigger') trigger?: TbPopoverTrigger = 'hover';
   @Input('tbPopoverPlacement') placement?: string | string[] = 'top';
   @Input('tbPopoverOrigin') origin?: ElementRef<HTMLElement>;
   @Input('tbPopoverVisible') visible?: boolean;
+  @Input('tbPopoverShowCloseButton') @coerceBoolean() showCloseButton = true;
   @Input('tbPopoverMouseEnterDelay') mouseEnterDelay?: number;
   @Input('tbPopoverMouseLeaveDelay') mouseLeaveDelay?: number;
   @Input('tbPopoverOverlayClassName') overlayClassName?: string;
@@ -220,9 +223,11 @@ export class TbPopoverDirective implements OnChanges, OnDestroy, AfterViewInit {
     const mappingProperties: PropertyMapping = {
       // common mappings
       content: ['tbContent', () => this.content],
+      context: ['tbComponentContext', () => this.context],
       trigger: ['tbTrigger', () => this.trigger],
       placement: ['tbPlacement', () => this.placement],
       visible: ['tbVisible', () => this.visible],
+      showCloseButton: ['tbShowCloseButton', () => this.showCloseButton],
       mouseEnterDelay: ['tbMouseEnterDelay', () => this.mouseEnterDelay],
       mouseLeaveDelay: ['tbMouseLeaveDelay', () => this.mouseLeaveDelay],
       overlayClassName: ['tbOverlayClassName', () => this.overlayClassName],
@@ -320,7 +325,9 @@ export class TbPopoverDirective implements OnChanges, OnDestroy, AfterViewInit {
               <div style="width: 100%; height: 100%;">
                 <div class="tb-popover-inner-content">
                   <ng-container *ngIf="tbContent">
-                    <ng-container *tbStringTemplateOutlet="tbContent">{{ tbContent }}</ng-container>
+                    <ng-container *tbStringTemplateOutlet="tbContent; context: tbComponentContext">
+                      {{ tbContent }}
+                    </ng-container>
                   </ng-container>
                   <ng-container *ngIf="tbComponentFactory"
                                 [tbComponentOutlet]="tbComponentFactory"
@@ -504,6 +511,7 @@ export class TbPopoverComponent implements OnDestroy, OnInit {
       });
       this.intersectionObserver.observe(el);
     }
+    this.tbAnimationState = 'active';
   }
 
   hide(): void {

ui-ngx/src/styles.scss

@@ -852,6 +852,9 @@ mat-label {
         @include tb-mat-icon-size(20);
       }
     }
+    &.tb-mat-24 {
+      @include tb-mat-icon-button-size(24);
+    }
     &.tb-mat-28 {
       @include tb-mat-icon-button-size(28);
     }