lightning-base-components 1.16.3-alpha → 1.16.5-alpha

package/src/lightning/modal/__docs__/modal.md

@@ -0,0 +1,414 @@
+A `lightningModal` component overlays a message modal on top of the current app window. A modal interrupts a user’s workflow and draws attention to the message. 
+
+`LightningModal` implements the SLDS [modals](https://www.lightningdesignsystem.com/components/modals/) blueprint.
+
+Create a modal component in response to a user action, such as clicking a button or link. The modal blocks interaction with everything else on the page until the user acts upon or dismisses the modal.
+
+Unlike other components, this component doesn't use a `lightning-modal` tag or extend `LightningElement`. There is no `lightning-modal` component. Instead, you create a modal by extending `LightningModal` and using these helper `lightning-modal-*` components to provide a header, footer and the body of the modal. 
+- `lightning-modal-body`
+- `lightning-modal-header`
+- `lightning-modal-footer`
+
+To create a modal component, import `LightningModal` from `lightning/modal`. The component has access to the normal LWC resources as well as the special container, helper components, methods, and events of the `lightning/modal` module.
+
+In this example, the `content` property passes data to the modal from the component that invokes it. 
+
+```js
+/* c/myModal.js */
+
+import { api } from 'lwc';
+import LightningModal from 'lightning/modal';
+
+export default class MyModal extends LightningModal {
+    @api content;
+
+    handleOkay() {
+        this.close('okay');
+    }
+}
+```
+
+The modal’s HTML template uses helper `lightning-modal-*` components to provide a header, footer, and the body of the modal. In this example, the content for the modal body comes from the `content` property we defined in the modal's JavaScript file. 
+
+```html
+<!-- c/myModal.html -->
+
+<template>
+    <lightning-modal-header label="My Modal Heading"></lightning-modal-header>
+    <lightning-modal-body> Content: {content} </lightning-modal-body>
+    <lightning-modal-footer>
+        <lightning-button label="OK" onclick={handleOkay}></lightning-button>
+    </lightning-modal-footer>
+</template>
+```
+
+The `lightning-modal-body` component is required for the modal template. 
+
+The `lightning-modal-header` and `lightning-modal-footer` components are optional, but recommended. The `lightning-modal-*` components render in the order they appear in the template. Place the `lightning-modal-body` component after `lightning-modal-header` and before the `lightning-modal-footer` component. 
+
+#### Open a Modal Instance
+
+`LightningModal` provides an `.open()` method which opens a modal and returns a promise that asynchronously resolves with the result of the user’s interaction with the modal.
+
+Each invocation of a modal component’s `.open()` method creates a unique instance of the modal. You can think of a modal as a self-contained application that starts from scratch when it opens. It displays the content you pass in through the `.open()` method or that you set within the modal's HTML template. 
+
+When you close a modal, the modal instance is destroyed, not hidden. On close, the modal must save the user’s input data or pass it to the invoking component as the promise result. Otherwise, the data is lost when the modal instance is closed. 
+
+The `.open()` method lets you assign values to the modal's properties. `LightningModal` provides these properties. 
+
+* `label` - Required. Sets the modal's title and assistive device label. If the modal has a header, set `label` in the `lightning-modal-header` component. If the modal doesn't have a header, set the `label` property when opening the modal.
+
+* `size` - Determines how much of the viewport width the modal uses. Supported values are `small`, `medium`, and `large`, which you can set when you open the modal. Default value is `medium`. The length of the modal is determined by the amount of content.
+
+* `description` - Sets the modal's accessible description. It uses the `aria-description` attribute where supported, or falls back to `aria-describedby`. If you set a custom description value, include the label name at the beginning of your description, because some screen readers only read the description, and not the label.
+
+* `disableClose` - Prevents closing the modal by normal means like the ESC key, the close button, or `.close()`. For example, you could briefly set `disableClose` to true while a completed form is saving, so the user doesn't dismiss the modal early. See [**Use the `disableClose` Attribute**](#use-the-disableclose-attribute).
+
+In this example, the app opens the `myModal` component. It invokes the `.open()` method in a `handleClick()` function bound to the app button’s `onclick` attribute, and uses `async` and `await` keywords to handle the promise returned by `.open()`. This example overrides the `size` value by setting it to `large` and sets the modal’s user-defined property `content`.
+
+```js
+/* c/myApp.js */
+
+import { LightningElement } from 'lwc';
+import MyModal from 'c/myModal';
+
+export default class MyApp extends LightningElement {
+    async handleClick() {
+        const result = await MyModal.open({
+            // `label` is not included here in this example.
+            // it is set on lightning-modal-header instead
+            size: 'large',
+            description: 'Accessible description of modal\'s purpose',
+            content: 'Passed into content api',
+        });
+        // if modal closed with X button, promise returns result = 'undefined'
+        // if modal closed with OK button, promise returns result = 'okay'
+        console.log(result);
+    }
+}
+```
+The HTML template for this app contains a button that opens the modal and displays the result returned when the modal closes.
+
+```html
+<!-- c/myApp.html -->
+
+<template>
+    <lightning-button
+        onclick={handleClick}
+        aria-haspopup="modal"
+        label="Open My Modal">
+    </lightning-button> 
+    <p>Result: {result}</p>
+</template>
+```
+
+You can also use `.open()` to pass data from your invoking component into the modal with custom properties decorated with `@api`. These properties can be any type, such as a string or an object that’s an array of key/value pairs to be assigned to the new modal instance. 
+
+For example, this app component sets an `options` property to a set of key/value pairs in `MyModal.open()`. The promise is handled using an arrow function that logs the result to the console.
+
+```js
+/* c/myApp.js */
+
+import { LightningElement } from "lwc";
+import MyModal from "c/myModal";
+
+export default class MyPage extends LightningElement {
+  handleOpenClick() {
+    MyModal.open({
+      // maps to developer-created `@api options`
+      options: [
+        { id: 1, label: 'Option 1' },
+        { id: 2, label: 'Option 2' },
+      ]
+    }).then((result) => {
+        console.log(result);
+    });
+  }
+}
+```
+The modal dialog can then use this property. In this case, the modal creates buttons whose labels are provided in the `options` array.
+
+```js
+/* c/myModal.js */
+
+import { api } from 'lwc';
+import LightningModal from 'lightning/modal';
+
+export default class MyModal extends LightningModal {
+  // Data is passed to api properties via .open({ options: [] })
+  @api options = [];
+}
+```
+
+```html
+<!-- c/myModal.html -->
+
+<template>
+    <lightning-modal-header label="My Modal Heading"></lightning-modal-header>
+    <lightning-modal-body>
+        Let's make some buttons!
+        <template for:each={options} for:item="option">
+            <lightning-button
+              onclick={handleOptionClick}
+              data-id={option.id}
+              key={option.id}
+            >
+                {option.label}
+            </lightning-button>
+        </template>   
+    </lightning-modal-body>
+</template>
+```
+
+#### Close a Modal Instance
+
+Use `this.close(result)` to close the modal, where `result` is anything you want to return from the modal. The `.close()` operation is asynchronous to display a brief fade out animation before the modal is destroyed. The `result` data can’t be modified after the close operation begins. 
+
+You can also close the modal with the default close button, the X at the top right corner. Closing a modal like this is the same as calling `this.close()` with an `undefined` result, so any data input is lost.
+
+This example shows the handler for some buttons inside a modal. When the user clicks the button, `this.close(id)` returns the option that they chose and the modal closes.
+
+```js
+/* c/myModal.js */
+
+import { api } from 'lwc';
+import LightningModal from 'lightning/modal';
+
+export default class MyModal extends LightningModal {
+  // Data is passed to apis via .open({ options: [] })
+  @api options = [];
+
+  handleOptionClick(e) {
+    const { target } = e;
+    const { id } = target.dataset;
+    // this.close() triggers closing the modal
+    // the value of `id` is passed as the result
+    this.close(id);
+  }
+}
+```
+
+```html
+<!-- c/myModal.html -->
+
+<template>
+  <template for:each={options} for:item="option">
+    <lightning-button
+      onclick={handleOptionClick}
+      data-id={option.id}
+      key={option.id}
+    >
+      {option.label}
+    </lightning-button>
+  </template>
+</template>
+```
+
+#### Use the `disableClose` Attribute
+
+`disableClose` temporarily turns off the ability to dismiss the modal by normal means like the ESC key, the close button, or `this.close()`. For example, you could briefly set `disableClose` to `true` while a completed form is saving, so the user doesn't dismiss the modal early.
+
+Preventing a modal's close should be a temporary state. Use `disableClose` for less than 5 seconds. Accessibility is affected if you trap keyboard focus inappropriately. See [No Keyboard Trap](https://www.w3.org/TR/UNDERSTANDING-WCAG20/keyboard-operation-trapping.html) for more information.
+
+When the process using `disableClose` finishes successfully, dismiss the modal. If the process using `disableClose` fails, re-enable the ability to dismiss the modal with `disableClose = false`, or give feedback to help the user resolve the issue.
+
+While `disableClose` is `true`, disable any processes or UI buttons that might call `Modal.close()`.
+
+This example shows how to use `disableClose`. It's not a fully functional example, but could be used in a complex modal component.
+
+```js
+/* c/myModalForm.js */
+/* This is intended as a mock example, not as fully functional code */
+/* NOTE: observe values set:
+   this.disableClose (in JS),
+   and this.saveInProcess (in JS and HTML)
+*/
+import { api } from 'lwc';
+import LightningModal from 'lightning/modal';
+
+export default class MyModalForm extends LightningModal {
+  // formData is utilized for saving current form values
+  formData = {};
+  failureType = null;
+  saveStatus = {};
+  saveInProcess = false;
+
+  handleCloseClick() {
+    this.close('canceled');
+  }
+
+  closeModal() {
+    // immediately exits, so no need to trigger
+    // this.disableClose = false OR
+    // this.saveInProcess = false;
+    // modal is destroyed, and focus moves
+    // back to originally clicked item that
+    // generated the modal
+    this.close('success');
+  }
+
+  mitigateSaveFailure() {
+    // depending on how easily the failure can be resolved
+    // you may need to immediately set disableClose = false
+    if (this.failureType === 'recoverable') {
+      // no need to call this.disableClose = false
+      // or this.saveInProgress = false yet
+      tryToFixFailure();
+    } else {
+      // can't resolve the error
+      // need to allow users to exit modal
+      this.disableClose = false;
+      this.saveInProcess = false;
+      // mock function to indicate modal state
+      // while still allowing user to exit
+      // preventing keyboard trap
+      reportUnresolvableError();
+    }
+  }
+
+  async saveData() {
+    // switches disabled state on buttons
+    this.saveInProcess = true;
+    const saveStatus = await sendData(this.formData);
+    return (saveStatus && saveStatus.success)
+      ? closeModal()
+      : mitigateSaveFailure();
+  }
+
+  async handleSaveClick() {
+    if (isValid(this.formData)) {
+      // begin saving data, temporarily disable
+      // LightningModal's close button
+      // Be sure to reenable the close button, by setting
+      // this.disableClose = false, IF further interaction
+      // is desired before the modal closes
+      this.disableClose = true;
+      await saveData();
+    } else {
+      // function that display form errors based on data
+      showFormErrors(this.formData);
+    }
+  }
+}
+```
+
+```html
+<!-- c/myModalForm.html -->
+
+<template>
+    <lightning-modal-header
+      label="My Modal Heading"
+    ></lightning-modal-header>
+    <lightning-modal-body>
+      <!-- form here -->
+    </lightning-modal-body>
+    <lightning-modal-footer>
+      <button
+        disabled={saveInProcess}
+        onclick={handleCloseClick}
+        aria-label="Cancel and close"
+      >Cancel</button>
+      <button
+        disabled={saveInProcess}
+        onclick={handleSaveClick}
+      >Save</button>
+    </lightning-modal-footer>
+</template>
+```
+
+#### Modal Events
+
+A modal can only fire events captured by the component that opened it, not the modal itself. Normal techniques can't catch events that fire from the modal, because the events bubble up to a top root element outside of the component that opened the modal.
+
+To capture modal events, attach them in the `.open()` method invoked by the component that opens the modal. 
+
+For example, here's a custom `select` event dispatched from `MyModal`.
+
+```js
+/* c/myModal.js */
+dispatchSelectEvent(e) {
+  // e.target might represent an input with an id and value
+  const { id, value } = e.target;
+  const selectEvent = new CustomEvent('select', {
+    detail: { id, value }
+  });
+  this.dispatchEvent(selectEvent);
+}
+```
+
+The `open()` method in `myApp` defines the `onselect` event handler. This example uses `onselect` to proxy events that we want to pass through.
+
+```js
+/* c/myApp.js */
+
+// ...
+// Process the select event from within the modal
+handleSelectEvent(detail) {
+  const { id, value } = detail;
+  console.log(`select event fired elem with id ${id} and value: ${value}`);
+}
+
+// ...
+// Trigger visibility of the modal
+handleOpenModal() {
+  MyModal.open({
+    label: 'Modal Title',
+    size: 'large',
+    description: 'Modal Title with brief description',
+    // event triggered when new CustomEvent('select', {detail: {}});
+    // occurs *from within* LightningModal.
+    // see dispatchSelectEvent() in c/myModal.js above
+    onselect: (e) => {
+      // stop further propagation of the event
+      e.stopPropagation();
+      // hand off to separate function to process
+      // result of the event (see above in this example)
+      this.handleSelectEvent(e.detail);
+      // or proxy to be handled above by dispatching
+      // another custom event to pass on the event
+      // this.dispatchEvent(e);
+    }
+  });
+}
+```
+
+See [Create and Dispatch Events](https://developer.salesforce.com/docs/component-library/documentation/en/lwc/events_create_dispatch) in the LWC Dev Guide for more information about events.
+
+#### Styling Variants
+
+The `lightning-modal-header` and `lightning-modal-footer` child components are optional, and you can choose to not include one or the other in your modal. 
+
+The headerless variant of `LightningModal` has these additional requirements.
+- Must set a descriptive modal title with the `label` property using `Modal.open({ label })` or you’ll get a console error.
+-  The `label` property is required for all variants of `LightningModal`. Assistive devices read the `label` value, even though the headerless modal variant doesn't display the label. 
+-  Because this variant doesn't use `lightning-modal-header`, you have to manually create an `<h1>` heading in `lightning-modal-body`. Provide accessible structure by starting with heading level `<h1>` and using levels up to `<h6>` appropriately. For more information, see [Semantic Structure, Headings on WebAim.org](https://webaim.org/techniques/semanticstructure/#headings).
+
+The `LightningModal` component also supports the SLDS [Directional variant](https://www.lightningdesignsystem.com/components/modals/#Directional) modal blueprint pattern.
+
+To achieve the directional button layout, place the buttons in a `div` with the `slds-modal__footer_directional` class. 
+
+```html
+<!-- c/modalDirectional.html -->
+
+<template>
+    <lightning-modal-body> Content: {content} </lightning-modal-body>
+    <lightning-modal-footer>
+        <div class=“slds-modal__footer_directional”>
+            <lightning-button label="NO" onclick={handleNo}></lightning-button>
+            <lightning-button label="OK" onclick={handleOkay}></lightning-button>
+        </div>
+    </lightning-modal-footer>
+</template>
+```
+
+#### Styling Hooks
+
+The `lightning-modal-*` helper components support [style hooks](https://www.lightningdesignsystem.com/components/modals/#Styling-Hooks-Overview). The styling hooks for the template that invokes the helper components doesn't carry over to them, so you must style each helper component individually. 
+
+Customizing the styling on the white modal frame and background, close button, or gray backdrop isn't supported.
+
+#### Accessibility
+
+The `lightning-modal-header` component renders the `label` value in an `<h1>` element. If your modal uses the header, begin any additional heading levels in the modal with `<h2>` for accessibility. Provide accessible structure by using heading levels up to `<h6>` appropriately. For more information, see [Semantic Structure, Headings on WebAim.org](https://webaim.org/techniques/semanticstructure/#headings).
+
+To include tagline text or link content for the header section, add it between the `<lightning-modal-header>` tags. 

package/src/lightning/modal/__examples__disabled/all/all.css

@@ -0,0 +1,7 @@
+.example {
+    margin: 0.5rem;
+    border-radius: 0.5rem;
+    background: #FFF;
+    box-shadow: 0 1px 0.25rem rgba(0, 0, 0, 0.2);
+    padding: 1rem;
+}

package/src/lightning/modal/__examples__disabled/all/all.html

@@ -0,0 +1,9 @@
+<template>
+    <div class="example">
+        <button
+            onclick={handleDemoModal}
+            aria-haspopup="modal"
+        >Open the Modal</button> 
+        <p>Result: <code>{demoResult}</code></p>
+    </div>
+</template>

package/src/lightning/modal/__examples__disabled/all/all.js

@@ -0,0 +1,25 @@
+import { LightningElement } from 'lwc';
+import ModalDemoAll from 'modal/demoall';
+
+export default class ModalAll extends LightningElement {
+    demoResult = 'unset';
+
+    handleDemoModal() {
+        ModalDemoAll.open({
+            // LightningModal
+            size: 'small',
+            // ModalDemo
+            options: [
+                { id: 1, variant: 'neutral', label: 'Option 1' },
+                { id: 2, variant: 'neutral', label: 'Option 2' },
+                { id: 3, variant: 'brand', label: 'Main Option' },
+            ],
+        }).then((result) => {
+            if (result === null) {
+                this.demoResult = 'dismiss';
+            } else {
+                this.demoResult = result;
+            }
+        });
+    }
+}

package/src/lightning/modal/__examples__disabled/allform/allform.css

@@ -0,0 +1,7 @@
+.example {
+    margin: 0.5rem;
+    border-radius: 0.5rem;
+    background: #FFF;
+    box-shadow: 0 1px 0.25rem rgba(0, 0, 0, 0.2);
+    padding: 1rem;
+}

package/src/lightning/modal/__examples__disabled/allform/allform.html

@@ -0,0 +1,9 @@
+<template>
+    <div class="example">
+        <button
+            onclick={handleDemoModal}
+            aria-haspopup="modal"
+        >Open the Modal</button> 
+        <p>Result: <code>{demoResult}</code></p>
+    </div>
+</template>

package/src/lightning/modal/__examples__disabled/allform/allform.js

@@ -0,0 +1,49 @@
+import { LightningElement } from 'lwc';
+import ModalDemoAllForm from 'modal/demoallform';
+
+export default class ModalAllForm extends LightningElement {
+    demoResult = 'unset';
+
+    handleDemoModal() {
+        ModalDemoAllForm.open({
+            // LightningModal
+            size: 'small',
+            // this becomes 'label'
+            heading: 'Edit Contact Information',
+            description: 'Edit the contact information for Sales Opportunities',
+            // ModalDemo
+            options: [
+                {
+                    id: 1,
+                    variant: 'neutral',
+                    label: 'Close',
+                    triggerCancel: true,
+                },
+                {
+                    id: 2,
+                    variant: 'neutral',
+                    label: 'Disable Close Button',
+                    toggleDisableClose: true,
+                },
+                {
+                    id: 3,
+                    variant: 'neutral',
+                    label: 'Open Next Modal',
+                    triggerSecondModal: true,
+                },
+                {
+                    id: 4,
+                    variant: 'brand',
+                    label: 'Save Data',
+                    triggerSubmit: true,
+                },
+            ],
+        }).then((result) => {
+            if (result === null) {
+                this.demoResult = 'dismiss';
+            } else {
+                this.demoResult = JSON.stringify(result);
+            }
+        });
+    }
+}

package/src/lightning/modal/__examples__disabled/allmulti/allmulti.html

@@ -0,0 +1,24 @@
+<template>
+    <lightning-modal-header label={heading}></lightning-modal-header>
+    <lightning-modal-body><div id="all-body">
+        <p>Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis. Cillum sunt ad dolore quis
+            aute consequat ipsum magna exercitation reprehenderit magna. Tempor cupidatat consequat elit dolor adipisicing.</p>
+        <p>Dolor eiusmod sunt ex incididunt cillum quis nostrud velit duis sit officia.
+            Lorem aliqua enim laboris do dolor eiusmod officia. Mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident. Eiusmod et adipisicing culpa deserunt nostrud
+            ad veniam nulla aute est. Labore esse esse cupidatat amet velit id elit consequat
+            minim ullamco mollit enim excepteur ea.</p>
+    </div></lightning-modal-body>
+    <lightning-modal-footer><div id="all-footer">
+        <template for:each={options} for:item="option">
+            <lightning-button
+                key={option.id}
+                label={option.label}
+                class="slds-button"
+                data-focus={option.focusName}
+                variant={option.variant}
+                onclick={handleOptionClick}
+                data-id={option.id}
+            ></lightning-button>
+        </template>
+    </div></lightning-modal-footer>
+</template>

package/src/lightning/modal/__examples__disabled/allmulti/allmulti.js

@@ -0,0 +1,12 @@
+import { api } from 'lwc';
+import LightningModal from 'lightning/modal';
+
+export default class ModalAllMulti extends LightningModal {
+    @api heading = 'Second Modal, higher z-index, small size';
+    @api options = [];
+
+    handleOptionClick(e) {
+        const { target } = e;
+        this.close(parseInt(target.dataset.id, 10));
+    }
+}

package/src/lightning/modal/__examples__disabled/basic/basic.css

@@ -0,0 +1,7 @@
+.example {
+    margin: 0.5rem;
+    border-radius: 0.5rem;
+    background: #FFF;
+    box-shadow: 0 1px 0.25rem rgba(0, 0, 0, 0.2);
+    padding: 1rem;
+}

package/src/lightning/modal/__examples__disabled/basic/basic.html

@@ -0,0 +1,9 @@
+<template>
+    <div class="example">
+        <button
+            aria-haspopup="modal"
+            onclick={handleDemoModal}
+        >Open the Demo Modal</button> 
+        <p>Result: <code>{demoResult}</code></p>
+    </div>
+</template>

package/src/lightning/modal/__examples__disabled/basic/basic.js

@@ -0,0 +1,27 @@
+import { LightningElement } from 'lwc';
+
+import ModalDemo from 'modal/demo';
+
+export default class OverlayBasic extends LightningElement {
+    demoResult = 'unset';
+
+    handleDemoModal() {
+        ModalDemo.open({
+            // LightningModal
+            size: 'large',
+            // ModalDemo
+            header: 'Select an Option',
+            body: 'Select an option:',
+            options: [
+                { id: 1, label: 'Option 1' },
+                { id: 2, label: 'Option 2' },
+            ],
+        }).then((result) => {
+            if (result === null) {
+                this.demoResult = 'dismiss';
+            } else {
+                this.demoResult = result;
+            }
+        });
+    }
+}

package/src/lightning/modal/__examples__disabled/demo/demo.html

@@ -0,0 +1,15 @@
+<template>
+    <lightning-modal-header label={header}></lightning-modal-header>
+    <lightning-modal-body>
+        <p>{body}</p>
+        <ul>
+            <template for:each={options} for:item="option">
+                <li key={option.id}>
+                    <button onclick={handleOptionClick} data-id={option.id}>
+                        {option.label}
+                    </button>
+                </li>
+            </template>
+        </ul>
+    </lightning-modal-body>
+</template>

package/src/lightning/modal/__examples__disabled/demo/demo.js

@@ -0,0 +1,13 @@
+import { api } from 'lwc';
+import LightningModal from 'lightning/modal';
+
+export default class ModalDemo extends LightningModal {
+    @api header = 'Select an Option';
+    @api body = 'Select an option:';
+    @api options = [];
+
+    handleOptionClick(e) {
+        const { target } = e;
+        this.close(parseInt(target.dataset.id, 10));
+    }
+}

package/src/lightning/modal/__examples__disabled/demoall/demoall.html

@@ -0,0 +1,26 @@
+<template>
+    <lightning-modal-header label={header}>
+        Here’s a tagline if you need it. It is allowed to extend across 
+        mulitple lines, so I’m making up content to show that to you.
+        It is allowed to have links like this <a 
+        href="https://salesforce.com" target="_blank">Salesforce.com</a>.
+    </lightning-modal-header>
+    <lightning-modal-body>
+        <p>Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis. Cillum sunt ad dolore quis
+            aute consequat ipsum magna exercitation reprehenderit magna. Tempor cupidatat consequat elit dolor adipisicing.</p>
+          <p>Dolor eiusmod sunt ex incididunt cillum quis nostrud velit duis sit officia. Lorem aliqua enim laboris do dolor eiusmod officia. Mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident. Eiusmod et adipisicing culpa deserunt nostrud
+            ad veniam nulla aute est. Labore esse esse cupidatat amet velit id elit consequat minim ullamco mollit enim excepteur ea.</p>
+    </lightning-modal-body>
+    <lightning-modal-footer>
+        <template for:each={options} for:item="option">
+            <lightning-button
+                key={option.id}
+                label={option.label}
+                class="slds-button"
+                variant={option.variant}
+                onclick={handleOptionClick}
+                data-id={option.id}
+            ></lightning-button>
+        </template>
+    </lightning-modal-footer>
+</template>