;
+ @ViewChild('popover', { static: false }) popover!: ElementRef
;
tbContent: string | TemplateRef | null = null;
tbComponentFactory: ComponentFactory | null = null;
@@ -442,6 +445,7 @@ export class TbPopoverComponent implements OnDestroy, OnInit {
constructor(
public cdr: ChangeDetectorRef,
private renderer: Renderer2,
+ private animationBuilder: AnimationBuilder,
@Optional() private directionality: Directionality
) {}
@@ -532,6 +536,35 @@ export class TbPopoverComponent implements OnDestroy, OnInit {
});
}
+ resize(width: string, height: string, animationDurationMs?: number) {
+ if (animationDurationMs && animationDurationMs > 0) {
+ const prevWidth = this.popover.nativeElement.offsetWidth;
+ const prevHeight = this.popover.nativeElement.offsetHeight;
+ const animationMetadata: AnimationMetadata[] = [style({width: prevWidth + 'px', height: prevHeight + 'px'}),
+ animate(animationDurationMs + 'ms', style({width, height}))];
+ const factory = this.animationBuilder.build(animationMetadata);
+ const player = factory.create(this.popover.nativeElement);
+ player.play();
+ const resize$ = new ResizeObserver(() => {
+ this.updatePosition();
+ });
+ resize$.observe(this.popover.nativeElement);
+ player.onDone(() => {
+ player.destroy();
+ resize$.disconnect();
+ this.setSize(width, height);
+ });
+ } else {
+ this.setSize(width, height);
+ }
+ }
+
+ private setSize(width: string, height: string) {
+ this.renderer.setStyle(this.popover.nativeElement, 'width', width);
+ this.renderer.setStyle(this.popover.nativeElement, 'height', height);
+ this.updatePosition();
+ }
+
updatePosition(): void {
if (this.origin && this.overlay && this.overlay.overlayRef) {
this.overlay.overlayRef.updatePosition();
diff --git a/ui-ngx/src/app/shared/components/popover.service.ts b/ui-ngx/src/app/shared/components/popover.service.ts
index 713e8d337b..3f05ed02a6 100644
--- a/ui-ngx/src/app/shared/components/popover.service.ts
+++ b/ui-ngx/src/app/shared/components/popover.service.ts
@@ -16,8 +16,12 @@
import {
ComponentFactory,
- ComponentFactoryResolver, ElementRef, Inject,
- Injectable, Injector,
+ ComponentFactoryResolver,
+ ComponentRef,
+ ElementRef,
+ Inject,
+ Injectable,
+ Injector,
Renderer2,
Type,
ViewContainerRef
@@ -53,11 +57,23 @@ export class TbPopoverService {
}
}
+ createPopoverRef(hostView: ViewContainerRef): ComponentRef {
+ return hostView.createComponent(this.componentFactory);
+ }
+
displayPopover(trigger: Element, renderer: Renderer2, hostView: ViewContainerRef,
componentType: Type, preferredPlacement: PopoverPlacement = 'top', hideOnClickOutside = true,
injector?: Injector, context?: any, overlayStyle: any = {}, popoverStyle: any = {}, style?: any,
showCloseButton = true): TbPopoverComponent {
- const componentRef = hostView.createComponent(this.componentFactory);
+ const componentRef = this.createPopoverRef(hostView);
+ return this.displayPopoverWithComponentRef(componentRef, trigger, renderer, componentType, preferredPlacement, hideOnClickOutside,
+ injector, context, overlayStyle, popoverStyle, style, showCloseButton);
+ }
+
+ displayPopoverWithComponentRef(componentRef: ComponentRef, trigger: Element, renderer: Renderer2,
+ componentType: Type, preferredPlacement: PopoverPlacement = 'top',
+ hideOnClickOutside = true, injector?: Injector, context?: any, overlayStyle: any = {},
+ popoverStyle: any = {}, style?: any, showCloseButton = true): TbPopoverComponent {
const component = componentRef.instance;
this.popoverWithTriggers.push({
trigger,