Simple Confirmation Modals in Lightning

<template>
	<lightning-card if:true={visible}>
		<div class="slds-container_small">
			<section role="dialog" tabindex="-1" class="slds-modal slds-fade-in-open">
				<div class="slds-modal__container">
					<header class="slds-modal__header">
						<h2 class="slds-text-heading_medium slds-hyphenate">{title}</h2>
					</header>
					<div class="slds-modal__content slds-p-around_medium">
						<p>{message}</p>
					</div>
					<footer class="slds-modal__footer">
						<lightning-button variant="neutral"
						                  name="cancel"
						                  label={cancelLabel}
						                  title={cancelLabel}
						                  onclick={handleCancel} ></lightning-button>

						<lightning-button variant="brand"
						                  name="confirm"
						                  label={confirmLabel}
						                  title={confirmLabel}
						                  class="slds-m-left_x-small"
						                  onclick={handleConfirm} ></lightning-button>
					</footer>
				</div>
			</section>
			<div class="slds-backdrop slds-backdrop_open"></div>
		</div>
	</lightning-card>
</template>

/**
 * MIT License
 *
 * Copyright (c) 2021 Restless Labs, LLC
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 */
import {LightningElement, api} from 'lwc';

export default class ConfirmationModal extends LightningElement {
	visible;                       // used to hide/show modal
	@api title = 'Confirm';        // modal title
	@api message = 'Continue?';    // modal message
	@api confirmLabel = 'Ok';      // confirm button label
	@api cancelLabel = 'Cancel';   // cancel button label

	resolvePromise;
	rejectPromise;


	/***************** METHODS *****************/
	/**
	 * Displays the confirmation modal with any passed parameters
	 * @param options {Object} - optional parameters to be set on the modal
	 * @returns {Promise} - a promise that resolves when the modal is closed
	 */
	@api
	async present(options) {
		return new Promise((resolve, reject) => {
			this.resolvePromise = resolve;
			this.rejectPromise = reject;

			if (options) {
				this.setPropertyFromOptions(options, 'title');
				this.setPropertyFromOptions(options, 'message');
				this.setPropertyFromOptions(options, 'confirmLabel');
				this.setPropertyFromOptions(options, 'cancelLabel');
			}

			this.visible = true;
		});
	}


	/**
	 * Closes the modal and resets default values
	 */
	@api
	close() {
		this.visible = false;
	}


	/**
	 * Utility method that sets a property on this component only if it exists in the options object
	 * @param options {Object} - the options object to pull the property value form
	 * @param property {String} - the property to pull from the options and set on this component
	 */
	setPropertyFromOptions(options, property) {
		if (options.hasOwnProperty(property)) {
			this[property] = options[property];
		}
	}


	/**
	 * Resolves the modal promise with a true value and closes the modal
	 * @param event {Event} - the user event that triggered the callback
	 */
	handleConfirm(event) {
		this.resolvePromise(true);
		this.close();
	}


	/**
	 * Resolves the modal promise with a false value and closes the modal
	 * @param event {Event} - the user event that triggered the callback
	 */
	handleCancel(event) {
		this.resolvePromise(false);
		this.close();
	}
}