Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 | 1x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 5x 2x 2x 2x 3x 3x 2x 2x 2x 2x 4x 3x 1x 4x 1x 1x | import { ConnectedPosition, Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay';
import { ComponentPortal } from '@angular/cdk/portal';
import { AfterContentInit, Directive, ElementRef, HostListener, inject, Injector, Input, OnDestroy, ViewContainerRef } from '@angular/core';
import { OVERLAY_REFERENCE } from '@app/client-material';
import { AppTooltipComponent } from './tooltip.component';
import { TOOLTIP_DATA } from './tooltip.interface';
@Directive({
selector: '[appTooltip]',
standalone: false,
})
export class AppTooltipDirective implements AfterContentInit, OnDestroy {
private readonly el = inject(ElementRef);
private readonly overlay = inject(Overlay);
private readonly overlayConfig = inject(OverlayConfig);
private readonly viewContainerRef = inject(ViewContainerRef);
@Input() public appTooltip?: string = void 0;
@Input() public appTooltipDisabled = false;
@Input() public tooltipOnlyClamped = false;
@Input() public flexibleConnectedPositions: ConnectedPosition[] = [
{
orEiginX: 'end',
originY: 'center',
overlayX: 'start',
overlayY: 'center',
},
];
@Input() public scrollStrategy: 'block' | 'close' | 'noop' | 'reposition' = 'reposition';
private nativeElement?: HTMLElement;
private overlayRef: OverlayRef | null = null;
private configureOverlay(): void {
const positionHost = this.nativeElement;
if (typeof positionHost !== 'undefined') {
this.overlayConfig.hasBackdrop = false;
this.overlayConfig.panelClass = '';
this.overlayConfig.minHeight = void 0;
this.overlayConfig.minWidth = void 0;
this.overlayConfig.maxHeight = void 0;
this.overlayConfig.maxWidth = void 0;
this.overlayConfig.height = void 0;
this.overlayConfig.width = void 0;
switch (this.scrollStrategy) {
case 'block':
this.overlayConfig.scrollStrategy = this.overlay.scrollStrategies.block();
break;
case 'close':
this.overlayConfig.scrollStrategy = this.overlay.scrollStrategies.close();
break;
case 'noop':
E this.overlayConfig.scrollStrategy = this.overlay.scrollStrategies.noop();
break;
case 'reposition':
default:
this.overlayConfig.scrollStrategy = this.overlay.scrollStrategies.reposition();
break;
}
this.overlayConfig.positionStrategy = this.overlay
.position()
.flexibleConnectedTo(positionHost)
.setOrigin(positionHost)
.withPositions(this.flexibleConnectedPositions);
}
}
private createOverlay(): OverlayRef | null {
if (this.overlayRef === null) {
this.configureOverlay();
this.overlayRef = this.overlay.create(this.overlayConfig);
}
return this.overlayRef;
}
protected disposeTooltip(): void {
if (this.overlayRef !== null) {
void this.overlayRef?.detach();
void this.overlayRef?.dispose();
this.overlayRef = null;
}
}
private displayTooltip(): void {
const showTooltip = this.tooltipOnlyClamped
? typeof this.nativeElement !== 'undefined' && this.nativeElement.scrollWidth > this.nativeElement.clientWidth
: true;
if (!this.appTooltipDisabled && typeof this.appTooltip !== 'undefined' && !this.overlayRef?.hasAttached && showTooltip) {
const overlayRef = this.createOverlay();
const context = Injector.create({
providers: [
{
provide: OVERLAY_REFERENCE,
useValue: overlayRef,
},
{
provide: TOOLTIP_DATA,
useValue: {
text: this.appTooltip,
},
},
],
});
const portal = new ComponentPortal(AppTooltipComponent, this.viewContainerRef, context);
void this.overlayRef?.attach(portal);
}
}
public ngAfterContentInit(): void {
this.nativeElement = this.el.nativeElement;
}
@HostListener('mouseenter')
public showTooltip(): void {
this.displayTooltip();
}
@HostListener('mouseleave')
public hideTooltip(): void {
this.disposeTooltip();
}
public ngOnDestroy(): void {
this.disposeTooltip();
}
}
|