import { _ as _applyDecoratedDescriptor, a as _initializerDefineProperty } from '../_rollupPluginBabelHelpers-9wjJaosZ.js';
import { setComponentTemplate } from '@ember/component';
import { precompileTemplate } from '@ember/template-compilation';
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { hash } from '@ember/helper';
import { on } from '@ember/modifier';
import { action } from '@ember/object';
import { htmlSafe } from '@ember/template';
import { focusTrap } from 'ember-focus-trap';
import onKey from 'ember-keyboard/modifiers/on-key';
import { eq, or, notEq } from 'ember-truth-helpers';
import { argOrDefaultDecorator } from '../helpers/arg-or-default.js';
import classNames from '../helpers/class-names.js';
import { sizeMapping } from '../utils/css-mappings/eui-image.js';
import EuiIcon from './eui-icon.js';
import EuiOverlayMaskComponent from './eui-overlay-mask.js';

var _dec, _class, _descriptor, _descriptor2;
let EuiImage = setComponentTemplate(precompileTemplate(`
    {{#if @allowFullScreen}}
      <figure
        class={{classNames
          "euiImage--allowFullScreen"
          (unless (eq @hasShadow false) "euiImage--hasShadow")
          float=@float
          margin=@margin
          componentName="EuiImage"
          size=this.sizeString
        }}
        {{!@glint-expect-error}}
        ...attributes
      >

        <button
          class="euiImage__button"
          type="button"
          aria-label={{@ariaLabel}}
          {{on "click" this.toggleFullscreen}}
        >
          <img
            src={{or @src @url}}
            class="euiImage__img"
            style={{this.sizeStyle}}
            alt={{@alt}}
          />
          <EuiIcon
            @iconClasses="euiImage__icon"
            @type="fullScreen"
            @color={{if (notEq @fullScreenIconColor "dark") "ghost"}}
          />
        </button>

        {{#if @caption}}
          <figcaption class="euiImage__caption">
            {{@caption}}
          </figcaption>
        {{/if}}
      </figure>

    {{else}}

      <figure
        class={{classNames
          (unless (eq @hasShadow false) "euiImage--hasShadow")
          float=@float
          margin=@margin
          componentName="EuiImage"
          size=this.sizeString
        }}
        {{!@glint-expect-error}}
        ...attributes
      >

        <img
          src={{or @src @url}}
          class="euiImage__img"
          style={{this.sizeStyle}}
          alt={{@alt}}
        />

        {{#if @caption}}
          <figcaption class="euiImage__caption">
            {{@caption}}
          </figcaption>
        {{/if}}
      </figure>

    {{/if}}

    {{#if this.isFullscreen}}
      <EuiOverlayMask
        @headerZindexLocation="above"
        @onClick={{this.toggleFullscreen}}
      >
        <figure
          class="euiImage euiImage-isFullScreen"
          {{focusTrap focusTrapOptions=(hash clickOutsideDeactivates=true)}}
        >
          <button
            class="euiImage__button"
            type="button"
            {{on "click" this.toggleFullscreen}}
            {{onKey "Escape" this.toggleFullscreen}}
          >
            <img
              class="euiImage-isFullScreen__img"
              src={{or @src @url}}
              alt={{@alt}}
            />
          </button>
          <figcaption class="euiImage__caption">
            {{@caption}}
          </figcaption>
        </figure>
        <EuiIcon
          @iconClasses="euiImage-isFullScreenCloseIcon"
          @type="cross"
          @color={{if (notEq @fullScreenIconColor "dark") "ghost"}}
        />
      </EuiOverlayMask>
    {{/if}}
  `, {
  strictMode: true,
  scope: () => ({
    classNames,
    eq,
    on,
    or,
    EuiIcon,
    notEq,
    EuiOverlayMask: EuiOverlayMaskComponent,
    focusTrap,
    hash,
    onKey
  })
}), (_dec = argOrDefaultDecorator('original'), (_class = class EuiImage extends Component {
  constructor(...args) {
    super(...args);
    _initializerDefineProperty(this, "isFullscreen", _descriptor, this);
    _initializerDefineProperty(this, "size", _descriptor2, this);
  }
  get sizeClass() {
    return sizeMapping[this.size];
  }
  get sizeStyle() {
    const size = this.args.size;
    if ((typeof size === 'string' || typeof size === 'number') && !this.sizeClass) {
      return htmlSafe(`max-height:${this.args.size}px; max-width:${this.args.size}px; width:auto;`);
    }
    return '';
  }
  toggleFullscreen(e) {
    e.stopPropagation();
    e.preventDefault();
    this.isFullscreen = !this.isFullscreen;
  }
  get sizeString() {
    if (typeof this.args.size === 'string') {
      return this.args.size;
    }
  }
}, (_descriptor = _applyDecoratedDescriptor(_class.prototype, "isFullscreen", [tracked], {
  configurable: true,
  enumerable: true,
  writable: true,
  initializer: function () {
    return false;
  }
}), _descriptor2 = _applyDecoratedDescriptor(_class.prototype, "size", [_dec], {
  configurable: true,
  enumerable: true,
  writable: true,
  initializer: null
}), _applyDecoratedDescriptor(_class.prototype, "toggleFullscreen", [action], Object.getOwnPropertyDescriptor(_class.prototype, "toggleFullscreen"), _class.prototype)), _class)));

export { EuiImage as default };
//# sourceMappingURL=eui-image.js.map
