import templateOnly from '@ember/component/template-only';
import { setComponentTemplate } from '@ember/component';
import { precompileTemplate } from '@ember/template-compilation';
import { hash } from '@ember/helper';
import { on } from '@ember/modifier';
import optional from 'ember-composable-helpers/helpers/optional';
import preventDefault from 'ember-event-helpers/helpers/prevent-default';
import stopPropagation from 'ember-event-helpers/helpers/stop-propagation';
import { focusTrap } from 'ember-focus-trap';
import onKey from 'ember-keyboard/modifiers/on-key';
import style from 'ember-style-modifier/modifiers/style';
import { and, notEq, eq } from 'ember-truth-helpers';
import argOrDefault from '../helpers/arg-or-default.js';
import classNames from '../helpers/class-names.js';
import inlineStyles from '../helpers/inline-styles.js';
import EuiButtonIcon from './eui-button-icon.js';
import EuiOverlayMaskComponent from './eui-overlay-mask.js';

const EuiModal = setComponentTemplate(precompileTemplate(`
  {{#let
    (if
      (and @maxWidth (notEq @maxWidth true))
      (inlineStyles
        componentName="EuiModal" componentArgs=(hash maxWidth=@maxWidth)
      )
      (hash)
    )
    as |inlineStyles|
  }}
    <EuiOverlayMask
      @onClick={{if @clickOutsideToClose (optional @onClose) (optional)}}
    >
      <div
        class={{classNames
          "euiModal"
          (if (eq @maxWidth true) "euiModal--maxWidth-default")
        }}
        tabindex="0"
        ...attributes
        {{style inlineStyles}}
        {{focusTrap
          isActive=(argOrDefault @isFocusTrapActive true)
          shouldSelfFocus=(argOrDefault @shouldSelfFocus true)
          isPaused=(argOrDefault @isFocusTrapPaused false)
          focusTrapOptions=(argOrDefault @focusTrapOptions (hash))
        }}
        {{onKey
          "Escape"
          (preventDefault (stopPropagation (optional @onClose)))
        }}
      >
        <EuiButtonIcon
          class="euiModal__closeIcon"
          @iconType="cross"
          @color="text"
          {{on "click" (optional @onClose)}}
        />
        <div class="euiModal__flex">
          {{yield}}
        </div>
      </div>
    </EuiOverlayMask>
  {{/let}}
`, {
  strictMode: true,
  scope: () => ({
    and,
    notEq,
    inlineStyles,
    hash,
    EuiOverlayMask: EuiOverlayMaskComponent,
    optional,
    classNames,
    eq,
    style,
    focusTrap,
    argOrDefault,
    onKey,
    preventDefault,
    stopPropagation,
    EuiButtonIcon,
    on
  })
}), templateOnly("eui-modal", "EuiModal"));

export { EuiModal as default };
//# sourceMappingURL=eui-modal.js.map
