<exm-form-drawer>

This package provides dialog drawer functionality.

Components included:

1. exm-drawer - basic component
2. exm-form-drawer - form drawer

Install

npm install @exmg/exm-form-drawer

Before start ensure that you have installed web-animation-js. It is required by @polymer/paper-dialog.

npm install web-animation-js

Load this script in index.html

<!-- Ensure Web Animations polyfill is loaded -->
<script src="../node_modules/web-animations-js/web-animations-next-lite.min.js"></script>

Some dependencies @exmg/exm-paper-combobox use @apply to apply css mixins. This require to load script in index.html

<script src="../node_modules/@webcomponents/shadycss/apply-shim.min.js"></script>

Components

<exm-drawer>

It is basic component that probably should not be used directly. It serves only as drawer without form functionality, so it is content agnostic. You can pass any dom markup as children of this component.

<exm-form-drawer>

Wraps around exm-drawer.

Provides form functionality to drawer:

• submit and cancel buttons
• title
• material styling

API

Slots

| Name | Description | | --------- | --------------------------- | | default | Form elements within drawer |

Properties/Attributes

| Name | Type | Default | Description | | ------------------------------- | --------- | ------- | --------------------------------------------------------------------------- | | opened | boolean | None | whether or not drawer is visible | | no-cancel-on-outside-click | boolean | None | whether or not clicking outside drawer should close drawer | | submit-btn-title | string | None | title of submit button. Default "Submit" | | cancel-btn-title | string | None | title of cancel button. Default "Cancel" | | keep-opened-on-submit-success | boolean | None | whether or not drawer should be hidden after successful form submission | | reset-form-on-submit-success | boolean | None | whether or not drawer form should be reset after successful form submission |

Events

| Name | Description | | --------------------------- | ------------------------ | | exm-drawer-opened-changed | when drawer shown/hidden |

CSS Custom Properties

| Name | Description | | ------------------------------------------ | ------------------------------------------------------------------------------------ | | --exm-drawer-color | set the height of slot container - handy when wanting to control max-height of form. | | --exm-drawer-bg-color | set the padding right for the form internal element. | | --mdc-theme-primary | None | | --mdc-theme-on-surface | None | | --mdc-theme-surface | None | | --exm-form-drawer-header-separator-color | Color of header seperator of form | | --exm-drawer-max-width | Max width of drawer |

Notes about drawer form

All dom markup passed as children into exm-form-drawer will be wrapped into exm-form underhood.

To properly handle form submission, you should call done() or error() on form instance after receiving submit event from exm-form-drawer. Please read https://github.com/ExmgElements/exm-form docs for more info.

Usage

Form drawer

<exm-form-drawer
  ?opened="${this.opened}"
  ?keep-opened-on-submit-success="${this.keepOpenedOnSubmitSuccess}"
  ?reset-form-on-submit-success="${this.resetFormOnSubmitSuccess}"
  ?no-cancel-on-outside-click="${this.noCancelOnOutsideClick}"
  @exm-drawer-opened-changed="${this.handleOpenedChanged}"
  submit-btn-title="Create"
  @submit="${this.onSubmit}"
  @cancel="${this.onCancel}"
>
  <span slot="title">New event</span>
  <exm-paper-combobox label="Type" name="type" selected="0" always-float-label>
    <paper-item>Trivia</paper-item>
    <paper-item>Other</paper-item>
  </exm-paper-combobox>
  <paper-input name="question" label="Question" value="Who's Dylan Hartigan's favorite artist?" required></paper-input>
  <paper-input name="answer_a" label="Answer A" value="Beyoncé"></paper-input>
  <paper-input name="answer_b" label="Answer B" value="Eminem"></paper-input>
  <paper-input name="answer_c" label="Answer C" value="Ariana Grande"></paper-input>
  <br />
  <exm-button unelevated> + Add answer </exm-button>
</exm-form-drawer>

Additional references

• Additional Documentation

• Demo