text: import { layout as templateLayout, tagName } from '@ember-decorators/component';
  import Component from '@ember/component';
  import layout from 'ember-bootstrap/templates/components/bs-modal-simple';
  import defaultValue from 'ember-bootstrap/utils/default-decorator';
  import deprecateSubclassing from 'ember-bootstrap/utils/deprecate-subclassing';
  
  /**
    Component for creating [Bootstrap modals](http://getbootstrap.com/javascript/#modals) with a some common default markup
    including a header, footer and body. Creating a simple modal is easy:
  
    ```hbs
    {{#bs-modal-simple title="Simple Dialog"}}
      Hello world!
    {{/bs-modal-simple}}
    ```
  
    This will automatically create the appropriate markup, with a modal header containing the title, and a footer containing
    a default "Ok" button, that will close the modal automatically (unless you return false from `onHide`).
  
    A modal created this way will be visible at once. You can use the `{{#if ...}}` helper to hide all modal elements from
    the DOM until needed. Or you can bind the `open` property to trigger showing and hiding the modal:
  
    ```hbs
    <BsModalSimple @open={{this.openModal}} @title="Simple Dialog">
      Hello world!
    </BsModalSimple>
    ```
  
    ### Custom Markup
  
    To customize the markup within the modal you can use the [bs-modal](Components.Modal.html) component.
  
    ### Modals with forms
  
    There is a special case when you have a form inside your modals body: you probably do not want to have a submit button
    within your form but instead in your modal footer. Hover pressing the submit button outside of your form would not
    trigger the form data to be submitted. In the example below this would not trigger the submit action of the form, an
    thus bypass the form validation feature of the form component.
  
    ```hbs
    <BsModalSimple @title="Form Example" @closeTitle="Cancel" @submitTitle="Ok">
      <BsForm @model={{this}} @onSubmit={{action "submit"}} @submitOnError={{true}} as |Form|>
        <Form.element @controlType="text" @label="first name" @property="firstname" />
        <Form.element @controlType="text" @label="last name" @property="lastname" />
      </BsForm>
    </BsModalSimple>
    ```
  
    The modal component supports this common case by triggering the submit event programmatically on the body's form if
    present whenever the footer's submit button is pressed. To allow the form to be submitted by pressing the enter key
    also, you must either set `@submitOnError={{true}}` on the `<BsForm>` or include an invisible submit button in the
    form (`<button type="submit" class="d-hidden">Submit</button>`).
  
    ### Auto-focus
  
    In order to allow key handling to function, the modal's root element is given focus once the modal is shown. If your
    modal contains an element such as a text input and you would like it to be given focus rather than the modal element,
    then give it the HTML5 autofocus attribute:
  
    ```hbs
    <BsModalSimple @title="Form Example" @closeTitle="Cancel" @submitTitle="Ok">
      <BsForm @model={{this}} @onSubmit={{action "submit"}} @submitOnError={{true}} as |Form|>
        <Form.element @controlType="text" @label="first name" @property="firstname" @autofocus={{true}} />
        <Form.element @controlType="text" @label="last name" @property="lastname" />
      </BsForm>
    </BsModalSimple>
    ```
  
    ### Modals inside wormhole
  
    Modals make use of the [ember-wormhole](https://github.com/yapplabs/ember-wormhole) addon, which will be installed
    automatically alongside ember-bootstrap. This is used to allow the modal to be placed in deeply nested
    components/templates where it belongs to logically, but to have the actual DOM elements within a special container
    element, which is a child of ember's root element. This will make sure that modals always overlay the whole app, and
    are not effected by parent elements with `overflow: hidden` for example.
  
    If you want the modal to render in place, rather than being wormholed, you can set renderInPlace=true.
  
    *Note that only invoking the component in a template as shown above is considered part of its public API. Extending from it (subclassing) is generally not supported, and may break at any time.*
  
    @class ModalSimple
    @namespace Components
    @extends Ember.Component
    @public
  */
  @templateLayout(layout)
  @tagName('')
  @deprecateSubclassing
  export default class ModalSimple extends Component {
    /**
     * The title of the modal, visible in the modal header. Is ignored if `header` is false.
     *
     * @property title
     * @type string
     * @public
     */
  
    /**
     * Visibility of the modal. Toggle to show/hide with CSS transitions.
     *
     * When the modal is closed by user interaction this property will not update by using two-way bindings in order
     * to follow DDAU best practices. If you want to react to such changes, subscribe to the `onHide` action
     *
     * @property open
     * @type boolean
     * @default true
     * @public
     */
    @defaultValue
    open = true;
  
    /**
     * Set to false to disable fade animations.
     *
     * @property fade
     * @type boolean
     * @default true
     * @public
     */
    @defaultValue
    fade = undefined;
  
    /**
     * Use a semi-transparent modal background to hide the rest of the page.
     *
     * @property backdrop
     * @type boolean
     * @default true
     * @public
     */
    @defaultValue
    backdrop = true;
  
    /**
     * Closes the modal when escape key is pressed.
     *
     * @property keyboard
     * @type boolean
     * @default true
     * @public
     */
    @defaultValue
    keyboard = true;
  
    /**
     * [BS4 only!] Vertical position, either 'top' (default) or 'center'
     * 'center' will apply the `modal-dialog-centered` class
     *
     * @property position
     * @type {string}
     * @default 'top'
     * @public
     */
    @defaultValue
    position = 'top';
  
    /**
     * [BS4 only!] Allows scrolling within the modal body
     * 'true' will apply the `modal-dialog-scrollable` class
     *
     * @property scrollable
     * @type boolean
     * @default false
     * @public
     */
    @defaultValue
    scrollable = false;
  
    /**
     * Property for size styling, set to null (default), 'lg' or 'sm'
     *
     * Also see the [Bootstrap docs](http://getbootstrap.com/javascript/#modals-sizes)
     *
     * @property size
     * @type String
     * @public
     */
    @defaultValue
    size = null;
  
    /**
     * If true clicking on the backdrop will close the modal.
     *
     * @property backdropClose
     * @type boolean
     * @default true
     * @public
     */
    @defaultValue
    backdropClose = true;
  
    /**
     * If true component will render in place, rather than be wormholed.
     *
     * @property renderInPlace
     * @type boolean
     * @default false
     * @public
     */
    @defaultValue
    renderInPlace = false;
  
    /**
     * The duration of the fade transition
     *
     * @property transitionDuration
     * @type number
     * @default 300
     * @public
     */
    @defaultValue
    transitionDuration = 300;
  
    /**
     * The duration of the backdrop fade transition
     *
     * @property backdropTransitionDuration
     * @type number
     * @default 150
     * @public
     */
    @defaultValue
    backdropTransitionDuration = 150;
  
    /**
     * The action to be sent when the modal footer's submit button (if present) is pressed.
     * Note that if your modal body contains a form (e.g. [Components.Form](Components.Form.html)) this action will
     * not be triggered. Instead a submit event will be triggered on the form itself. See the class description for an
     * example.
     *
     * @property onSubmit
     * @type function
     * @public
     */
    onSubmit() {}
  
    /**
     * The action to be sent when the modal is closing.
     * This will be triggered by pressing the modal header's close button (x button) or the modal footer's close button.
     * Note that this will happen before the modal is hidden from the DOM, as the fade transitions will still need some
     * time to finish. Use the `onHidden` if you need the modal to be hidden when the action triggers.
     *
     * You can return false to prevent closing the modal automatically, and do that in your action by
     * setting `open` to false.
     *
     * @property onHide
     * @type function
     * @public
     */
    onHide() {}
  
    /**
     * The action to be sent after the modal has been completely hidden (including the CSS transition).
     *
     * @property onHidden
     * @type function
     * @default null
     * @public
     */
    onHidden() {}
  
    /**
     * The action to be sent when the modal is opening.
     * This will be triggered immediately after the modal is shown (so it's safe to access the DOM for
     * size calculations and the like). This means that if fade=true, it will be shown in between the
     * backdrop animation and the fade animation.
     *
     * @property onShow
     * @type function
     * @default null
     * @public
     */
    onShow() {}
  
    /**
     * The action to be sent after the modal has been completely shown (including the CSS transition).
     *
     * @property onShown
     * @type function
     * @public
     */
    onShown() {}
  
    /**
     * Display a close button (x icon) in the corner of the modal header.
     *
     * @property closeButton
     * @type boolean
     * @default true
     * @public
     */
    @defaultValue
    closeButton = true;
  
    /**
     * The title of the default close button.
     *
     * @property closeTitle
     * @type string
     * @default 'Ok'
     * @public
     */
    @defaultValue
    closeTitle = 'Ok';
  
    /**
     * The type of the submit button (primary button).
     *
     * @property submitButtonType
     * @type string
     * @default 'primary'
     * @public
     */
    @defaultValue
    submitButtonType = 'primary';
  
    /**
     * The title of the submit button (primary button). Will be ignored (i.e. no button) if set to null.
     *
     * @property submitTitle
     * @type string
     * @default null
     * @public
     */
  }
  