core/modal/popover-confirm.component.ts
A component to show a popover right next to the
user action. Add this component where the confirm modal
should be shown and toggle isOpen to display it. You
can use await isShow() to wait for a result on the
click action.
| selector | c8y-popover-confirm |
| templateUrl | ./popover-confirm.component.html |
Properties |
Methods |
Inputs |
| adaptivePosition |
Type : boolean
|
Default value : false
|
| buttons |
Type : PopoverConfirmButtons[]
|
Default value : [
{ label: gettext('cancel'), action: () => Promise.reject() }
]
|
| container |
Type : string
|
Default value : 'body'
|
| containerClass |
Type : string
|
Default value : ''
|
| isOpen |
Type : boolean
|
Default value : false
|
| message |
Type : string
|
| outsideClick |
Type : boolean
|
Default value : false
|
| placement |
Type : string
|
Default value : 'right'
|
| title |
Type : string
|
| buttonStatus | ||||
buttonStatus(status)
|
||||
|
Parameters :
Returns :
string
|
| handleOutsideClick |
handleOutsideClick()
|
|
Returns :
void
|
| Async show | ||||||
show(buttons?: PopoverConfirmButtons[])
|
||||||
|
Show the popover. Wait until an action is performed on it.
Parameters :
Returns :
unknown
|
| click |
Type : function
|
| popover |
Type : PopoverDirective
|
Decorators :
@ViewChild(PopoverDirective, {static: false})
|
<div
[class]="containerClass"
[popoverTitle]="title | translate"
[popover]="popover"
[isOpen]="isOpen"
[container]="container"
[placement]="placement"
[outsideClick]="outsideClick"
(onHidden)="handleOutsideClick()"
triggers=""
[adaptivePosition]="adaptivePosition"
>
<ng-content></ng-content>
</div>
<ng-template #popover>
<p>
{{ message | translate }}
</p>
<div class="popover-footer d-flex gap-16 flex-wrap a-i-center">
<ng-container *ngFor="let button of buttons">
<button
class="btn btn-sm m-l-0"
title="{{ button.label | translate }}"
[attr.data-cy]="'popover-confirm--' + (button.label | translate)"
[ngClass]="buttonStatus(button.status)"
(click)="click(button.action)"
>
{{ button.label | translate }}
</button>
</ng-container>
</div>
</ng-template>