core/bottom-drawer/bottom-drawer.component.ts
Bottom drawer component that slides up from the bottom of the viewport. Typically managed by BottomDrawerService.
| selector | c8y-bottom-drawer |
| standalone | true |
| imports |
CommonModule
CdkTrapFocus
|
| templateUrl | ./bottom-drawer.component.html |
Properties |
Methods |
HostListeners |
Accessors |
| document:keydown.escape |
Arguments : '$event'
|
document:keydown.escape(event: KeyboardEvent)
|
|
Handles Escape key press to close the drawer. |
| hide |
hide()
|
|
Hides the drawer with animation.
Returns :
void
|
| onEscapeKey | ||||||
onEscapeKey(event: KeyboardEvent)
|
||||||
Decorators :
@HostListener('document:keydown.escape', ['$event'])
|
||||||
|
Handles Escape key press to close the drawer.
Parameters :
Returns :
void
|
| disableClickOutside |
Type : unknown
|
Default value : false
|
|
When enabled, clicking outside the drawer will not close it. |
| drawerHost |
Type : ViewContainerRef
|
Decorators :
@ViewChild('drawerHost', {read: ViewContainerRef})
|
| drawerOpen$ |
getdrawerOpen$()
|
<div [ngClass]="{ drawerOpen: drawerOpen$ | async }">
<div
class="bottom-drawer"
[cdkTrapFocus]="drawerOpen$ | async"
role="dialog"
aria-modal="true"
aria-labelledby="drawerTitle"
[ngClass]="{ 'has-backdrop': disableClickOutside }"
>
<div class="d-flex d-col no-align-items fit-h">
<ng-template #drawerHost></ng-template>
</div>
</div>
</div>