import templateOnly from '@ember/component/template-only';
import { setComponentTemplate } from '@ember/component';
import { precompileTemplate } from '@ember/template-compilation';
import { eq } from 'ember-truth-helpers';
import argOrDefault from '../helpers/arg-or-default.js';
import classNames from '../helpers/class-names.js';
import EuiStepNumber from './eui-step-number.js';
import EuiTitle from './eui-title.js';

const EuiStep = setComponentTemplate(precompileTemplate(`
  <div
    class={{classNames
      "euiStep"
      (if (eq @titleSize "xs") "euiStep--small")
      (if (eq @status "disabled") "euiStep-isDisabled")
    }}
    ...attributes
  >
    <div class="euiStep__titleWrapper">
      <EuiStepNumber
        class={{classNames
          "euiStep__circle"
          (if (eq @titleSize "xs") "euiStepNumber--small")
        }}
        @number={{@step}}
        @status={{@status}}
        @titleSize={{argOrDefault @titleSize "s"}}
        @isHollow={{eq @status "incomplete"}}
      />
      <EuiTitle
        @size={{@titleSize}}
        @tagName={{argOrDefault @headingElement "p"}}
        class="euiStep__title"
      >
        {{@title}}
      </EuiTitle>
    </div>
    <div class="euiStep__content">
      {{yield}}
    </div>
  </div>
`, {
  strictMode: true,
  scope: () => ({
    classNames,
    eq,
    EuiStepNumber,
    argOrDefault,
    EuiTitle
  })
}), templateOnly("eui-step", "EuiStep"));

export { EuiStep as default };
//# sourceMappingURL=eui-step.js.map
