shopit-front/src/app/shared/components/modal-shell/modal-shell.component.html

44 lines
1.2 KiB
HTML

<div
class="modal-shell"
[class.modal-shell--fullscreen-media]="presentation() === 'fullscreen-media'"
(click)="backdropClick.emit()"
>
<div
class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-shell__dialog"
[ngClass]="dialogClass()"
(click)="$event.stopPropagation()"
>
<div
#panel
class="modal-content border-0 shadow-lg modal-shell__content"
role="dialog"
aria-modal="true"
[attr.aria-labelledby]="ariaLabelledBy"
tabindex="-1"
>
@if (title() || showCloseButton()) {
<header class="modal-header border-0 modal-shell__header">
@if (title()) {
<h2 class="modal-title modal-shell__title" [id]="titleId">{{ title() }}</h2>
} @else {
<span></span>
}
@if (showCloseButton()) {
<button
type="button"
class="btn-close"
aria-label="Cerrar modal"
(click)="closeRequested.emit()"
></button>
}
</header>
}
<div class="modal-body modal-shell__body">
<ng-content />
</div>
</div>
</div>
</div>