# Dialog

Table of Contents

###### Examples

Basic Usage
Titles
Action Buttons
JavaScript Usage

###### JavaScript Reference

Constructor
Requirements
Attributes
Properties
Methods
Static Methods

### Basic Usage

Create dialogs using the `k-dialog` component. Open the dialog by calling the `open()` method, and close it by calling the `close()` method. Or it can be closed using the dialog's GUI (clicking the overlay, clicking the close button, or the cancel or confirm action buttons).

    <k-dialog id="d1">
      <p class="p">Hello World</p>
    </k-dialog>
    <button onclick="doument.getElementById('d1').open()">Open Dialog</button>

Hello World

### Titles

Assign an element to the `title` slot to have it appear as the dialog title.

    <k-dialog id="d2">
      <h6
        class="m0 px"
        slot="title"
      >This is a fact</h6>
      <p class="p">A hotdog is a sandwhich</p>
    </k-dialog>

###### This is a fact

A hotdog is a sandwhich

### Action Buttons

Add a cancel button using the `cancel-text` attribute.

    <k-dialog
      id="d4"
      cancel-text="Absolutly Not"
    >
      <p class="p">Mint and Chocolate belong together</p>
    </k-dialog>

Mint and Chocolate belong together

Add a confirm button using the `confirm-text` attribute.

    <k-dialog
      id="d5"
      confirm-text="Confirm"
    >
      <p class="p">Spaghetti is the greatest food</p>
    </k-dialog>

Spaghetti is the greatest food

Try it with both a cancel and confirm button.

    <k-dialog
      id="d6"
      cancel-text="It should be outlawed"
      confirm-text="Of course it is"
    >
      <p class="p">Ranch is gross</p>
    </k-dialog>

Ranch is gross

### JavaScript Usage

##### Create Dialog

    <button id="d7">Open Dialog</button>
    <script type="module">
      import Dialog from '/kempo/components/Dialog.js';
      document.getElementById('d7').addEventListener('click', () => {
        Dialog.create('<p>Hello World</p>');
      });
    </script>

##### Error Dialog

    <button id="d8">Open Dialog</button>
    <script type="module">
      import Dialog from '/kempo/components/Dialog.js';
      document.getElementById('d8').addEventListener('click', () => {
        Dialog.error("<p>Oh no, don't do that!</p>");
      });
    </script>

### Confirm Dialog

Use the `Dialog.confirm` static method to create a confirmation dialog. This method takes a text message, a response callback, and an options object.

    <button id="d9">Open Confirm Dialog</button>
    <script type="module">
      import Dialog from '/kempo/components/Dialog.js';
      document.getElementById('d9').addEventListener('click', () => {
        Dialog.confirm("Are you sure you want to proceed?", response => {
          console.log("User response:", response);
        });
      });
    </script>

## JavaScript Reference

### Constructor

###### Extends Component

##### `new Dialog(options)`

#### Parameters

##### `options: object`

An object containing the initial configuration for the dialog. The options object can contain the following properties:

- `opened`: boolean - Whether the dialog is initially opened.
- `closeBtn`: boolean - Whether to show the close button.
- `overlayClose`: boolean - Whether clicking the overlay closes the dialog.
- `confirmText`: string - Text for the confirm button.
- `confirmClasses`: string - Classes for the confirm button.
- `confirmAction`: function - Action to perform on confirm.
- `cancelText`: string - Text for the cancel button.
- `cancelClasses`: string - Classes for the cancel button.
- `cancelAction`: function - Action to perform on cancel.
- `closeCallback`: function - Callback to execute when the dialog is closed.

### Requirements

- Component

### Attributes

##### `opened: boolean`

Whether the dialog is opened.

##### `closeBtn: boolean`

Whether to show the close button.

##### `overlayClose: boolean`

Whether clicking the overlay closes the dialog.

##### `confirmText: string`

Text for the confirm button.

##### `confirmClasses: string`

Classes for the confirm button.

##### `cancelText: string`

Text for the cancel button.

##### `cancelClasses: string`

Classes for the cancel button.

### Properties

##### `confirmAction: function`

Action to perform on confirm.

##### `cancelAction: function`

Action to perform on cancel.

##### `closeCallback: function`

Callback to execute when the dialog is closed.

### Methods

##### `open(): void`

Opens the dialog.

##### `close(): void`

Closes the dialog.

##### `toggle(): void`

Toggles the dialog open or closed.

##### `focus(): void`

Focuses the first focusable element in the dialog.

##### `blur(): void`

Returns focus to the element that had focus before the dialog was opened.

### Static Methods

##### `create(contents, options): Dialog`

Creates and opens a new dialog with the specified contents and options.

###### Options

- `opened`: boolean - Whether the dialog is initially opened.
- `closeBtn`: boolean - Whether to show the close button.
- `overlayClose`: boolean - Whether clicking the overlay closes the dialog.
- `confirmText`: string - Text for the confirm button.
- `confirmClasses`: string - Classes for the confirm button.
- `confirmAction`: function - Action to perform on confirm.
- `cancelText`: string - Text for the cancel button.
- `cancelClasses`: string - Classes for the cancel button.
- `cancelAction`: function - Action to perform on cancel.
- `closeCallback`: function - Callback to execute when the dialog is closed.

##### `confirm(text, responseCallback, options): void`

Creates and opens a confirmation dialog with the specified text and options.

###### Options

- `title`: string - The title of the dialog.
- `confirmText`: string - Text for the confirm button.
- `confirmClasses`: string - Classes for the confirm button.
- `cancelText`: string - Text for the cancel button.
- `cancelClasses`: string - Classes for the cancel button.
- `closeBtn`: boolean - Whether to show the close button.
- `overlayClose`: boolean - Whether clicking the overlay closes the dialog.

##### `error(text, responseCallback, options): void`

Creates and opens an error dialog with the specified text and options.

###### Options

- `title`: string - The title of the dialog.
- `cancelText`: string - Text for the cancel button.
- `cancelClasses`: string - Classes for the cancel button.
- `closeBtn`: boolean - Whether to show the close button.
- `overlayClose`: boolean - Whether clicking the overlay closes the dialog.