File

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.

Metadata

selector c8y-popover-confirm
templateUrl ./popover-confirm.component.html

Index

Properties
Methods
Inputs

Inputs

buttons

Type : PopoverConfirmButtons[]

Default value : [{ label: gettext('cancel'), action: () => Promise.reject()}]

containerClass

Default value : ''

isOpen

Default value : false

message

Type : string

outsideClick

Default value : false

placement

Default value : 'right'

title

Type : string

Methods

buttonStatus
buttonStatus(status)
Parameters :
Name Optional
status No
Returns : string
handleOutsideClick
handleOutsideClick()
Returns : void
Async show
show(buttons?: PopoverConfirmButtons[])

Show the popover. Wait until an action is performed on it.

Parameters :
Name Type Optional
buttons PopoverConfirmButtons[] Yes
Returns : {}

Properties

click
click: function
Type : function
popover
popover: PopoverDirective
Type : PopoverDirective
Decorators :
@ViewChild(PopoverDirective, {static: undefined})
<span
  [popover]="popover"
  container="body"
  [isOpen]="isOpen"
  [popoverTitle]="title | translate"
  [placement]="placement"
  [containerClass]="containerClass"
  [outsideClick]="outsideClick"
  (onHidden)="handleOutsideClick()"
></span>
<ng-template #popover>
  <p class="m-b-8">
    {{ message | translate }}
  </p>
  <div class="popover-footer">
    <ng-container *ngFor="let button of buttons">
      <button
        title="{{ button.label | translate }}"
        class="btn btn-sm m-r-16"
        [ngClass]="buttonStatus(button.status)"
        (click)="click(button.action)"
      >
        {{ button.label | translate }}
      </button>
    </ng-container>
  </div>
</ng-template>

result-matching ""

    No results matching ""