mirror of
https://github.com/bitwarden/browser
synced 2026-02-04 02:33:33 +00:00
87 lines
2.8 KiB
HTML
87 lines
2.8 KiB
HTML
@let isDrawer = dialogRef?.isDrawer;
|
|
<section
|
|
class="tw-flex tw-w-full tw-flex-col tw-self-center tw-overflow-hidden tw-border tw-border-solid tw-border-secondary-100 tw-bg-background tw-text-main"
|
|
[ngClass]="[width, isDrawer ? 'tw-h-screen tw-border-t-0' : 'tw-rounded-xl tw-shadow-lg']"
|
|
@fadeIn
|
|
cdkTrapFocus
|
|
cdkTrapFocusAutoCapture
|
|
>
|
|
@let showHeaderBorder = bodyHasScrolledFrom().top;
|
|
<header
|
|
class="tw-flex tw-justify-between tw-items-center tw-gap-4 tw-border-0 tw-border-b tw-border-solid tw-py-3 tw-ps-6 tw-pe-4"
|
|
[ngClass]="{
|
|
'tw-p-4 has-[[biticonbutton]]:tw-pe-2': !isDrawer,
|
|
'tw-px-6 tw-py-4 has-[[biticonbutton]]:tw-pe-4': isDrawer,
|
|
'tw-border-secondary-100': showHeaderBorder,
|
|
'tw-border-transparent': !showHeaderBorder,
|
|
}"
|
|
>
|
|
<h2
|
|
bitDialogTitleContainer
|
|
bitTypography="h3"
|
|
noMargin
|
|
class="tw-text-main tw-mb-0 tw-line-clamp-2 tw-text-ellipsis tw-break-words"
|
|
>
|
|
{{ title() }}
|
|
@if (subtitle(); as subtitleText) {
|
|
<span class="tw-text-muted tw-font-normal tw-text-sm">
|
|
{{ subtitleText }}
|
|
</span>
|
|
}
|
|
<ng-content select="[bitDialogTitle]"></ng-content>
|
|
</h2>
|
|
@if (!this.dialogRef?.disableClose) {
|
|
<button
|
|
type="button"
|
|
bitIconButton="bwi-close"
|
|
buttonType="main"
|
|
size="default"
|
|
bitDialogClose
|
|
[label]="'close' | i18n"
|
|
cdkFocusInitial
|
|
></button>
|
|
}
|
|
</header>
|
|
|
|
<div
|
|
class="tw-relative tw-flex-1 tw-flex tw-flex-col tw-overflow-hidden"
|
|
[ngClass]="{
|
|
'tw-min-h-60': loading(),
|
|
'tw-bg-background': background() === 'default',
|
|
'tw-bg-background-alt': background() === 'alt',
|
|
}"
|
|
>
|
|
@if (loading()) {
|
|
<div class="tw-absolute tw-flex tw-size-full tw-items-center tw-justify-center">
|
|
<bit-spinner></bit-spinner>
|
|
</div>
|
|
}
|
|
<div
|
|
cdkScrollable
|
|
[ngClass]="{
|
|
'tw-py-2 tw-ps-6 tw-pe-6': !disablePadding(),
|
|
'tw-overflow-y-auto': !loading(),
|
|
'tw-invisible tw-overflow-y-hidden': loading(),
|
|
'tw-py-4': background() === 'alt',
|
|
}"
|
|
>
|
|
<ng-content select="[bitDialogContent]"></ng-content>
|
|
<div #scrollBottom></div>
|
|
</div>
|
|
</div>
|
|
@let isScrollable = isScrollable$ | async;
|
|
@let showFooterBorder =
|
|
(!bodyHasScrolledFrom().top && isScrollable) || bodyHasScrolledFrom().bottom;
|
|
<footer
|
|
class="tw-flex tw-flex-row tw-items-center tw-gap-2 tw-border-0 tw-border-t tw-border-solid tw-bg-background tw-py-5 tw-ps-6 tw-pe-4"
|
|
[ngClass]="{
|
|
'tw-px-6 tw-py-4': isDrawer,
|
|
'tw-p-4 has-[[biticonbutton]]:tw-pe-2': !isDrawer,
|
|
'tw-border-transparent': !showFooterBorder,
|
|
'tw-border-secondary-100': showFooterBorder,
|
|
}"
|
|
>
|
|
<ng-content select="[bitDialogFooter]"></ng-content>
|
|
</footer>
|
|
</section>
|