import templateOnly from '@ember/component/template-only';
import { setComponentTemplate } from '@ember/component';
import { precompileTemplate } from '@ember/template-compilation';
import { hash } from '@ember/helper';
import classNames from '../helpers/class-names.js';
import inlineStyles from '../helpers/inline-styles.js';
import simpleStyle from '../modifiers/simple-style.js';

const EuiRangeHighlight = setComponentTemplate(precompileTemplate(`
    <div
      class={{classNames
        "euiRangeHighlight"
        (if @showTicks "euiRangeHighlight--hasTicks")
        (if @compressed "euiRangeHighlight--compressed")
      }}
      ...attributes
    >
      <div
        class={{classNames
          "euiRangeHighlight__progress"
          (if @hasFocus "euiRangeHighlight__progress--hasFocus")
        }}
        {{simpleStyle
          (inlineStyles
            componentName="EuiRangeHighlight"
            componentArgs=(hash
              lowerValue=@lowerValue min=@min max=@max upperValue=@upperValue
            )
          )
        }}
      ></div>
    </div>
  `, {
  strictMode: true,
  scope: () => ({
    classNames,
    simpleStyle,
    inlineStyles,
    hash
  })
}), templateOnly("eui-range-highlight", "EuiRangeHighlight"));

export { EuiRangeHighlight as default };
//# sourceMappingURL=eui-range-highlight.js.map
