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 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 | 1x 1x 8x 8x 8x 7x 7x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 7x 7x 7x 2x 1x 7x 7x 7x 7x 7x 7x 7x 7x 4x 3x 3x 3x 3x 8x 1x 7x | /**
* Copyright (c) Siemens 2016 - 2025
* SPDX-License-Identifier: MIT
*/
import { Overlay, OverlayRef } from '@angular/cdk/overlay';
import { ComponentPortal } from '@angular/cdk/portal';
import {
ComponentRef,
computed,
Directive,
ElementRef,
HostListener,
inject,
input,
OnDestroy,
output,
signal,
TemplateRef
} from '@angular/core';
import { getOverlay, getPositionStrategy, positions } from '@siemens/element-ng/common';
import { TranslatableString } from '@siemens/element-translate-ng/translate-types';
import { Subject, takeUntil } from 'rxjs';
import { PopoverComponent } from './si-popover.component';
@Directive({
selector: '[siPopover]',
host: {
'[attr.aria-expanded]': 'isOpen()',
'[attr.aria-controls]': 'popoverId'
},
exportAs: 'si-popover'
})
export class SiPopoverDirective implements OnDestroy {
private static idCounter = 0;
/**
* The popover text to be displayed
*/
readonly siPopover = input<TranslatableString | TemplateRef<unknown>>();
/**
* The placement of the popover. One of 'top', 'start', end', 'bottom'
*
* @defaultValue 'auto'
*/
readonly placement = input<keyof typeof positions>('auto', { alias: 'siPopoverPlacement' });
readonly placementInternal = computed(() => {
if (
this.placement() !== 'top' &&
this.placement() !== 'bottom' &&
this.placement() !== 'start' &&
this.placement() !== 'end'
) {
return 'auto';
} else E{
return this.placement();
}
});
/**
* The title to be displayed on top for the popover
*
* @defaultValue undefined
*/
readonly title = input<TranslatableString>(undefined, { alias: 'siPopoverTitle' });
/**
* The class that will be applied to container of the popover
*
* @defaultValue ''
*/
readonly containerClass = input('', { alias: 'siPopoverContainerClass' });
/**
* The icon to be displayed besides popover title
*
* @defaultValue undefined
*/
readonly icon = input<string>(undefined, { alias: 'siPopoverIcon' });
/**
* The context for the attached template
*
* @defaultValue undefined
*/
readonly context = input<unknown>(undefined, { alias: 'siPopoverContext' });
/**
* Emits an event when the popover is shown/hidden
*/
readonly visibilityChange = output<void>({ alias: 'siPopoverVisibilityChange' });
/** @internal */
readonly popoverCounter = SiPopoverDirective.idCounter++;
/** @internal */
readonly popoverId = `__popover_${this.popoverCounter}`;
/** @internal */
protected readonly isOpen = signal<boolean>(false);
private overlayref?: OverlayRef;
private overlay = inject(Overlay);
private elementRef = inject(ElementRef);
private destroyer = new Subject<void>();
ngOnDestroy(): void {
this.overlayref?.dispose();
this.destroyer.next();
this.destroyer.complete();
}
/**
* Displays popover and emits 'shown' event.
*/
show(): void {
Iif (this.overlayref?.hasAttached()) {
return;
}
this.overlayref = getOverlay(this.elementRef, this.overlay, false, this.placementInternal());
this.overlayref
.outsidePointerEvents()
.pipe(takeUntil(this.destroyer))
.subscribe(({ target }) => {
if (target !== this.elementRef.nativeElement) {
this.hide();
}
});
const popoverPortal = new ComponentPortal(PopoverComponent);
const popoverRef: ComponentRef<PopoverComponent> = this.overlayref.attach(popoverPortal);
popoverRef.setInput('popoverDirective', this);
const positionStrategy = getPositionStrategy(this.overlayref);
positionStrategy?.positionChanges
.pipe(takeUntil(this.destroyer))
.subscribe(change => popoverRef.instance.updateArrow(change, this.elementRef));
this.isOpen.set(true);
this.visibilityChange.emit();
}
/**
* Hides the popover and emits 'hidden' event.
*/
hide(): void {
if (this.overlayref?.hasAttached()) {
this.overlayref?.detach();
this.isOpen.set(false);
this.visibilityChange.emit();
this.destroyer.next();
}
}
/**
* Updates the position of the popover based on the position strategy.
*/
updatePosition(): void {
this.overlayref?.updatePosition();
}
@HostListener('click')
protected onClick(): void {
if (this.overlayref?.hasAttached()) {
this.hide();
} else {
this.show();
}
}
}
|