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 21x 21x 21x 21x 21x 21x 21x 21x 21x 21x 21x 21x 21x 21x 21x 21x 20x 20x 20x 20x 20x 20x 20x 20x 20x 20x 21x 21x 21x 21x 21x 21x 41x 41x 41x 41x 21x 21x 82x | /**
* Copyright (c) Siemens 2016 - 2025
* SPDX-License-Identifier: MIT
*/
import { A11yModule } from '@angular/cdk/a11y';
import { NgClass } from '@angular/common';
import {
AfterViewInit,
ChangeDetectionStrategy,
Component,
ElementRef,
HostListener,
inject,
OnDestroy,
OnInit,
signal,
viewChild,
DOCUMENT
} from '@angular/core';
import { ModalRef } from './modalref';
@Component({
selector: 'si-modal',
imports: [A11yModule, NgClass],
templateUrl: './si-modal.component.html',
changeDetection: ChangeDetectionStrategy.OnPush
})
export class SiModalComponent implements OnInit, AfterViewInit, OnDestroy {
protected modalRef = inject(ModalRef<unknown, any>);
protected dialogClass = this.modalRef.dialogClass ?? '';
protected 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 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;
}
}
@HostListener('mousedown', ['$event'])
protected clickStarted(event: MouseEvent): void {
this.clickStartInDialog = event.target !== this.modalContainerRef().nativeElement;
}
@HostListener('mouseup', ['$event'])
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();
}
}
@HostListener('window:keydown.esc', ['$event'])
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;
}
}
|