# Feedback-dialog


## Examples

### Default

```html
{
    const openDialog = () => {
      const dialog = document.querySelector("m-feedback-dialog");
      if (dialog) {
        (dialog as any).open = true;
      }
    };

    const handleClose = () => {
      const dialog = document.querySelector("m-feedback-dialog");
      if (dialog) {
        (dialog as any).open = false;
      }
    };

    const handleSubmit = async (e: CustomEvent<{ formData: { [key: string]: any } }>) => {
      const dialog = document.querySelector("m-feedback-dialog");
      if (dialog) {
        (dialog as any).loading = true;
        await new Promise((resolve) => setTimeout(resolve, 2000));
        (dialog as any).loading = false;
        (dialog as any).submitted = true;
        console.log(e.detail);
      }
    };

    return html`
      <m-button @click=${openDialog}>Open Default Feedback Dialog</m-button>
      <m-feedback-dialog
        .open=${args.open}
        .loading=${args.loading}
        .submitted=${args.submitted}
        @close=${handleClose}
        @feedback-submit=${handleSubmit}
      ></m-feedback-dialog>
    `;
  }
```

### CustomOptions

```html
{
    const openDialog = () => {
      const dialog = document.querySelector("#dialog-custom-options");
      if (dialog) {
        (dialog as any).open = true;
      }
    };

    const handleClose = () => {
      const dialog = document.querySelector("#dialog-custom-options");
      if (dialog) {
        (dialog as any).open = false;
      }
    };

    const handleSubmit = async (e: CustomEvent<{ formData: { [key: string]: any } }>) => {
      const dialog = document.querySelector("#dialog-custom-options");
      if (dialog) {
        (dialog as any).loading = true;
        await new Promise((resolve) => setTimeout(resolve, 2000));
        (dialog as any).loading = false;
        (dialog as any).submitted = true;
        console.log(e.detail);
      }
    };

    return html`
      <m-button @click=${openDialog}>Open Feedback Dialog With Custom Options</m-button>
      <m-feedback-dialog
        id="dialog-custom-options"
        .open=${args.open}
        .loading=${args.loading}
        .submitted=${args.submitted}
        .options=${args.options}
        @close=${handleClose}
        @feedback-submit=${handleSubmit}
      ></m-feedback-dialog>
    `;
  }
```