The Confirmation Dialog can be configured with the next bindings

Attributes

• confirmation-type: String - The severity of the dialog (success, warn, critical, info)
• icon-glyph: String - An icon glyph name.
• dialog-title: String - A text to display on the header of the modal.
• dialog-message: String - A text to display on the body of the modal (this could be an String with markdown text, the component automatically translate this to the correspond HTML tags)
• on-close: Function - Event to call when dialog closes via the "x".
• on-result: Function - Event to call when primary button is clicked (negative button returns false).
• negative-button-label: String - A negative No/Cancel button label
• positive-button-label: String - A positive Yes/Okay/Primary button label
• hide-negative-button: Boolean (optional) - Hide the negative button
• hide-positive-button: Boolean (optional) - Hide the positive button

Success Confirmation Dialog

Success Confirmation Dialog

HTML

<div class="t-content g-confirmationDialogExample" ng-controller="confirmationDialogExampleController">
    <inv-confirmation-dialog
        confirmation-type="'success'"
        on-result="dialog_result"
        on-close="dialog_close()"
        icon-glyph="'check-circle'"
        dialog-title="'This is a Success Dialog'"
        dialog-message="'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lobortis id lorem non sollicitudin. Vivamus vestibulum sapien id feugiat tempor. Aliquam erat volutpat.'"
        negative-button-label="'Cancel'"
        positive-button-label="'Primary Action'">
    </inv-confirmation-dialog>

    <div style="margin-top: 20px; font-style: italic; color: grey;">{{ confirmResult }}</div>
</div>

Warning Confirmation Dialog

Warning Confirmation Dialog

HTML

<div class="t-content" ng-controller="confirmationDialogExampleController">
    <p>The Confirmation Dialog can be configured with a click event-handler (on-result), an icon glyph, a title (dialog-title), a message (dialog-message), a negative (No/Cancel) button label, </p>
    <p>a positive (Yes/Okay/Primary Action) button label, and an option to hide the Negative button. </p>
    <p>In this example, clicking on the Primary Action button or the Cancel button will cause a message to appear beneath the dialog, demonstrating how to specify a custom click-handler.</p>

    <div class="g-confirmationDialogExample">
        <inv-confirmation-dialog
            confirmation-type="'warn'"
            on-result="dialog_result"
            icon-glyph="'exclamation-circle'"
            dialog-title="'This is a Warning Dialog'"
            dialog-message="'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lobortis id lorem non sollicitudin. Vivamus vestibulum sapien id feugiat tempor. Aliquam erat volutpat.'"
            negative-button-label="'Cancel'"
            positive-button-label="'Primary Action'" >
        </inv-confirmation-dialog>
    </div>

    <div style="margin-top: 20px; font-style: italic; color: grey;">{{ confirmResult }}</div>
</div>

Informational Confirmation Dialog

Informational Confirmation Dialog

HTML

<div class="t-content" ng-controller="confirmationDialogExampleController">
    <p>The Confirmation Dialog can be configured with a click event-handler (on-result), an icon glyph, a title (dialog-title), a message (dialog-message), a negative (No/Cancel) button label, </p>
    <p>a positive (Yes/Okay/Primary Action) button label, and an option to hide the Negative button. </p>
    <p>In this example, the Negative button is hidden.</p>
    <p>In this example, clicking on the OK button will cause a message to appear beneath the dialog, demonstrating how to specify a custom click-handler.</p>

    <div class="g-confirmationDialogExample">
        <inv-confirmation-dialog
            confirmation-type="'info'"
            on-result="dialog_result"
            icon-glyph="'info-circle'"
            dialog-title="'This is an Informational Dialog'"
            dialog-message="'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lobortis id lorem non sollicitudin. Vivamus vestibulum sapien id feugiat tempor. Aliquam erat volutpat.'"
            positive-button-label="'Okay'"
            hide-negative-button="true">
        </inv-confirmation-dialog>
    </div>
    <div style="margin-top: 20px; font-style: italic; color: grey;">{{ confirmResult }}</div>
</div>

Critical Confirmation Dialog

Critical Confirmation Dialog

HTML

<div class="t-content" ng-controller="confirmationDialogExampleController">
    <p>The Confirmation Dialog can be configured with a click event-handler (on-result), an icon glyph, a title (dialog-title), a message (dialog-message), a negative (No/Cancel) button label, </p>
    <p>a positive (Yes/Okay/Primary Action) button label, and an option to hide the Negative button. </p>
    <p>In this example, clicking on the Primary Action button or the Cancel button will cause a message to appear beneath the dialog, demonstrating how to specify a custom click-handler.</p>

    <div class="g-confirmationDialogExample">
        <inv-confirmation-dialog
            confirmation-type="'critical'"
            on-result="dialog_result"
            icon-glyph="'exclamation-circle'"
            dialog-title="'This is an Error or Critical Warning Dialog'"
            dialog-message="'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lobortis id lorem non sollicitudin. Vivamus vestibulum sapien id feugiat tempor. Aliquam erat volutpat.'"
            negative-button-label="'Cancel'"
            positive-button-label="'Primary Action'">
        </inv-confirmation-dialog>
    </div>
    <div style="margin-top: 20px; font-style: italic; color: grey;">{{ confirmResult }}</div>
</div>

Popup Confirmation Dialog

Popup Confirmation Dialog

HTML

<div class="t-content" ng-controller="confirmationDialogPopupExampleController as ctrl">
    <p>The Confirmation Dialog is most often used in coordination with the popup manager.</p>
    <p>Here, we show a success confirmation dialog in coordination with the popup manager with it's suggested usage.</p>
    <p>Note that the popup manager can also popup confirmation dialogs in a separate template, if they are not part of the single template for any reason.</p>
    <div>
        <button class="c-button" ng-click="ctrl.openDialog()">Open</button>
    </div>
    <inv-popup-vault>
        <inv-confirmation-dialog
            inv-popup="ctrl.popupOption"
            confirmation-type="'success'"
            on-result="ctrl.dialog_result"
            on-close="ctrl.closeDialog()"
            icon-glyph="'check-circle'"
            dialog-title="'Order Confirmation'"
            dialog-message="'Order Number 04222011'"
            negative-button-label="'Cancel'"
            positive-button-label="'Primary Action'">
        </inv-confirmation-dialog>
    </inv-popup-vault>
    <div style="margin-top: 20px; font-style: italic; color: grey;">{{ ctrl.confirmResult }}</div>
</div>