core/modal/popover-confirm.component.ts

Description

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.

Example

Metadata

selector	`c8y-popover-confirm`
standalone	`true`
imports	`PopoverModule` `NgFor` `NgClass` `C8yTranslatePipe`
templateUrl	`./popover-confirm.component.html`

Relationships

Used by

Depends on

PopoverModule
NgFor
NgClass
C8yTranslatePipe

<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>