import templateOnly from '@ember/component/template-only';
import { setComponentTemplate } from '@ember/component';
import { precompileTemplate } from '@ember/template-compilation';
import { element } from 'ember-element-helper';
import { eq } from 'ember-truth-helpers';
import argOrDefault from '../helpers/arg-or-default.js';
import classNames from '../helpers/class-names.js';

const EuiFlexGrid = setComponentTemplate(precompileTemplate(`
  {{#let (argOrDefault @tagName "div") as |tagName|}}
    {{#if (eq tagName "div")}}
      <div
        class={{classNames
          (unless (eq @responsive false) "euiFlexGrid--responsive")
          componentName="EuiFlexGrid"
          gutterSize=(argOrDefault @gutterSize "l")
          direction=(argOrDefault @direction "row")
          columns=(argOrDefault @columns 0)
        }}
        ...attributes
      >
        {{yield}}
      </div>
    {{else}}
      {{#let (element tagName) as |Element|}}
        <Element
          class={{classNames
            (unless (eq @responsive false) "euiFlexGrid--responsive")
            componentName="EuiFlexGrid"
            gutterSize=(argOrDefault @gutterSize "l")
            direction=(argOrDefault @direction "row")
            columns=(argOrDefault @columns 0)
          }}
          ...attributes
        >
          {{yield}}
        </Element>
      {{/let}}
    {{/if}}
  {{/let}}
`, {
  strictMode: true,
  scope: () => ({
    argOrDefault,
    eq,
    classNames,
    element
  })
}), templateOnly("eui-flex-grid", "EuiFlexGrid"));

export { EuiFlexGrid as default };
//# sourceMappingURL=eui-flex-grid.js.map
