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 | 1x 20x 20x 20x 20x 20x 20x 20x 20x 20x 20x 20x 20x 20x 1x 20x 20x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 20x 20x 20x 5x 20x 20x 39x 39x 39x 39x 20x 20x 78x | /**
* Copyright (c) Siemens 2016 - 2026
* SPDX-License-Identifier: MIT
*/
import { A11yModule } from '@angular/cdk/a11y';
import {
AfterViewInit,
ChangeDetectionStrategy,
Component,
ElementRef,
inject,
OnDestroy,
OnInit,
signal,
viewChild,
DOCUMENT
} from '@angular/core';
import { ModalRef } from './modalref';
@Component({
selector: 'si-modal',
imports: [A11yModule],
templateUrl: './si-modal.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
host: {
'(mousedown)': 'clickStarted($event)',
'(mouseup)': 'onClickStop($event)',
'(window:keydown.esc)': 'onEsc($event)'
}
})
export class SiModalComponent implements OnInit, AfterViewInit, OnDestroy {
protected readonly modalRef = inject(ModalRef<unknown, any>);
protected readonly dialogClass = this.modalRef.dialogClass ?? '';
protected readonly titleId = this.modalRef.data?.ariaLabelledBy ?? '';
protected init = false;
protected readonly show = signal(false);
protected readonly showBackdropClass = signal<boolean | undefined>(undefined);
private clickStartInDialog = false;
private origBodyOverflow?: string;
private showTimer: any;
private backdropTimer: any;
private backdropGhostClickPrevention = true;
private readonly document = inject(DOCUMENT);
private readonly modalContainerRef = viewChild.required<ElementRef>('modalContainer');
ngOnInit(): void {
setTimeout(() => (this.backdropGhostClickPrevention = false), this.animationTime(300));
this.init = true;
this.showTimer = setTimeout(() => {
this.show.set(true);
}, this.animationTime(150));
}
ngAfterViewInit(): void {
queueMicrotask(() => this.modalRef?.shown.next(this.modalContainerRef()));
}
ngOnDestroy(): void {
this.hideBackdrop();
}
/** @internal */
hideDialog(param?: any): void {
clearTimeout(this.showTimer);
this.show.set(false);
// set `detach()` in modal ref to no-op so that the animation is unaffected if called
const detach = this.modalRef.detach;
this.modalRef.detach = () => {};
setTimeout(() => {
this.hideBackdrop();
setTimeout(() => detach(), this.animationTime(150));
}, this.animationTime(300));
this.modalRef?.hidden.next(param);
this.modalRef?.hidden.complete();
this.modalRef?.message.complete();
}
/** @internal */
showBackdrop(): void {
if (this.modalRef?.data.animated !== false) {
this.showBackdropClass.set(false);
this.backdropTimer = setTimeout(() => {
this.showBackdropClass.set(true);
}, 16);
} else E{
this.showBackdropClass.set(true);
}
this.origBodyOverflow = this.document.body.style.overflow;
this.document.body.style.overflow = 'hidden';
}
private hideBackdrop(): void {
clearTimeout(this.backdropTimer);
if (this.showBackdropClass() !== undefined) {
this.showBackdropClass.set(false);
}
if (this.origBodyOverflow !== undefined) {
this.document.body.style.overflow = this.origBodyOverflow;
this.origBodyOverflow = undefined;
}
}
protected clickStarted(event: MouseEvent): void {
this.clickStartInDialog = event.target !== this.modalContainerRef().nativeElement;
}
protected onClickStop(event: MouseEvent): void {
const clickedInBackdrop =
event.target === this.modalContainerRef().nativeElement && !this.clickStartInDialog;
Iif (this.modalRef?.ignoreBackdropClick || !clickedInBackdrop) {
this.clickStartInDialog = false;
return;
}
if (!this.backdropGhostClickPrevention) {
// Called when backdrop close is allowed and user clicks on the backdrop
this.modalRef.messageOrHide(this.modalRef.closeValue);
} else {
// When in ghost click prevention mode, avoid text selection
this.document.getSelection()?.removeAllRanges();
}
}
protected onEsc(event: Event): void {
Iif (this.modalRef?.data.keyboard && this.modalRef?.isCurrent()) {
event.preventDefault();
this.modalRef.messageOrHide(this.modalRef.closeValue);
}
}
private animationTime(millis: number): number {
return this.modalRef?.data.animated !== false ? millis : 0;
}
}
|