dees-catalog/ts_web/elements/dees-modal.demo.ts

import { html } from '@design.estate/dees-element';
import { DeesModal } from './dees-modal.js';

export const demoFunc = () => html`
  <dees-button @click=${() => {
    DeesModal.createAndShow({
      heading: 'This is a heading',
      content: html`
        <dees-form>
          <dees-input-text
            .label=${'Username'}
          >
          </dees-input-text>
          <dees-input-text
            .label=${'Password'}
          >
          </dees-input-text>
        </dees-form>
      `,
      menuOptions: [{
        name: 'Cancel',
        iconName: null,
        action: async (deesModalArg) => {
          deesModalArg.destroy();
          return null;
        }
      }, {
        name: 'Ok',
        iconName: null,
        action: async (deesModalArg) => {
          deesModalArg.destroy();
          return null;
        }
      }],
    });
  }}>open modal</dees-button>
`