# Modals
This addon supplies a service and accompanying components for displaying modals.

## Usage
### Template Setup
Add the modals component at the bottom of the application template.
```mustache
{{vinli-modals}}
```

### Use the service
When a modal needs to be displayed, call `showModal` on the modals service;
```javascript
modals: Ember.inject.service('vinli-modals'),

actions: {
  anAction() {
    this.get('modals').showModal('partials/the-modal-partial');
  }
}
```

Alternatively, a modal may be shown by rendering a `show-modal` component in a template. `show-modal`'s properties will be treated as a vinli-modals#showModal options object:
```mustache
<button type='button' onclick={{action (mut showCcModal) true}}>
  show credit card form
</button>

{{#if showCcModal}}
  {{show-modal
    acceptLabelKey='ember-credit-card.buttons.form-submit'
    onFinish=(action (mut showCcModal) false)
    contentComponent=(component 'new-cc-form'
      onCreated=(action 'ccCreated')
      showSubmitBtn=false)}}
{{/if}}
```

#### vinli-modals#showModal Options
If only a string is provided, it will be used as the modal's contentPartial.
Otherwise an object is expected with valid keys:
- **contentPartial**: XOR with contentComponent. The partial to show as the modal's content.
- **contentComponent**: XOR with contentPartial. The component to show as the modal's content.
- **contentComponentAttrs**: optional. Pass in attributes as hash to modal. Access passed-in attributes in modal templates on customAttrs object.
- **customClassNames**: optional. Custom class names to use for the modal - can be a string or array of strings.
- **headerKey**: optional. The i18n key to use for the modal's header title. No header will be shown if this is falsy.
- **size**: optional. The size for the modal. May be one of `small`, `medium`, `large`, `x-large`. Defaults to `medium`
- **onFinish**: optional. A function to be called when the modal is finished and/or and action was selected. It is provided the action that was selected. It may return a promise which will cause the selected action's button to show a spinner until it resolves.
- **cancelDisabled**: optional. Boolean to disable canceling of the modal. Defaults to false
- **lifetime**: optional. A promise that will keep the modal open with no default actions until the promise is fulfilled(resolved or rejected). If provided, defaults `cancelDisabled` to `true` unless otherwise set.
- for default actions:
  - **acceptLabelKey**: optional. The i18n key to use for the accept button's text. Defaults to `vinli-modals.accept`
  - **acceptingLabelKey**: optional. The i18n key to use for the accept button's text while the accept action is being performed. Defaults to `vinli-modals.accepting`
  - **cancelLabelKey**: optional. The i18n key to use for the cancel button's text. Defaults to `vinli-modals.cancel`
  - **cancelingLabelKey**: optional. The i18n key to use for the cancel button's text while the cancel action is being performed. Defaults to `vinli-modals.canceling`
- **actions**: optional. An array of custom actions for the modal. Note that the last item will be considered the primary action. Each item in the array must be an object with:
  - **action**: required. A string naming this action. e.g. `accept`, `cancel`, `customAction1`
  - **labelKey**: required. The i18n key to use for the action button's text.
  - **chosenLabelKey**: optional. The i18n key to use for the actions button's text while the action is being performed. Defaults to the labelKey.