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.

When it opens, focus moves to its first button and Tab cycles through its buttons, Escape cancels only the popover (not a modal or drawer around it), and focus returns to the element that had it before (usually the trigger), so it can be used with the keyboard.

Example

Metadata

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

Relationships

Used by

Depends on

PopoverModule
NgClass
C8yTranslatePipe

<div
  [class]="containerClass"
  [popoverTitle]="title | translate"
  [popover]="popover"
  triggers=""
  [isOpen]="isOpen"
  [container]="container"
  [placement]="placement"
  [outsideClick]="outsideClick"
  (onHidden)="handleOutsideClick()"
  (onShown)="focusFirstButton()"
  [adaptivePosition]="adaptivePosition"
>
  <ng-content></ng-content>
</div>
<ng-template #popover>
  <!-- The popover is rendered outside its trigger (often in the body), so keep its clicks from
   reaching document listeners such as a dropdown's outside-click handler, which would close the
   menu that opened it. The buttons stop them too: a click on one closes the popover, removing this
   wrapper's listener before the event bubbles up to it. -->
  <div (click)="$event.stopPropagation()">
    <p>
      {{ message | translate }}
    </p>
    <div
      class="popover-footer d-flex gap-16 flex-wrap a-i-center"
      [id]="footerId"
      (keydown.escape)="$event.stopPropagation(); handleOutsideClick()"
      (keydown.tab)="cycleFocus($any($event))"
      (keydown.shift.tab)="cycleFocus($any($event))"
    >
      @for (button of buttons; track button) {
        <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)="$event.stopPropagation(); click(button.action)"
        >
          {{ button.label | translate }}
        </button>
      }
    </div>
  </div>
</ng-template>