import { _ as _applyDecoratedDescriptor, a as _initializerDefineProperty, b as _defineProperty } 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 { on } from '@ember/modifier';
import didInsert from '@ember/render-modifiers/modifiers/did-insert';
import optional from 'ember-composable-helpers/helpers/optional';
import { eq } from 'ember-truth-helpers';
import argOrDefault from '../helpers/arg-or-default.js';
import EuiButtonEmpty from './eui-button-empty.js';
import EuiHideForComponent from './eui-hide-for.js';
import EuiIcon from './eui-icon.js';
import EuiNotificationBadge from './eui-notification-badge.js';
import EuiShowForComponent from './eui-show-for.js';

var _class, _descriptor, _descriptor2;
const keyframes = [{
  transform: 'rotate(0)',
  offset: 0,
  easing: 'ease-in-out'
}, {
  transform: 'rotate(30deg)',
  offset: 0.01,
  easing: 'ease-in-out'
}, {
  transform: 'rotate(-28deg)',
  offset: 0.03,
  easing: 'ease-in-out'
}, {
  transform: 'rotate(34deg)',
  offset: 0.05,
  easing: 'ease-in-out'
}, {
  transform: 'rotate(-32deg)',
  offset: 0.07,
  easing: 'ease-in-out'
}, {
  transform: 'rotate(30deg)',
  offset: 0.09,
  easing: 'ease-in-out'
}, {
  transform: 'rotate(-28deg)',
  offset: 0.11,
  easing: 'ease-in-out'
}, {
  transform: 'rotate(26deg)',
  offset: 0.13,
  easing: 'ease-in-out'
}, {
  transform: 'rotate(-24deg)',
  offset: 0.15,
  easing: 'ease-in-out'
}, {
  transform: 'rotate(22deg)',
  offset: 0.17,
  easing: 'ease-in-out'
}, {
  transform: 'rotate(-20deg)',
  offset: 0.19,
  easing: 'ease-in-out'
}, {
  transform: 'rotate(18deg)',
  offset: 0.21,
  easing: 'ease-in-out'
}, {
  transform: 'rotate(-16deg)',
  offset: 0.23,
  easing: 'ease-in-out'
}, {
  transform: 'rotate(14deg)',
  offset: 0.25,
  easing: 'ease-in-out'
}, {
  transform: 'rotate(-12deg)',
  offset: 0.27,
  easing: 'ease-in-out'
}, {
  transform: 'rotate(10deg)',
  offset: 0.29,
  easing: 'ease-in-out'
}, {
  transform: 'rotate(-8deg)',
  offset: 0.31,
  easing: 'ease-in-out'
}, {
  transform: 'rotate(6deg)',
  offset: 0.33,
  easing: 'ease-in-out'
}, {
  transform: 'rotate(-4deg)',
  offset: 0.35,
  easing: 'ease-in-out'
}, {
  transform: 'rotate(2deg)',
  offset: 0.37,
  easing: 'ease-in-out'
}, {
  transform: 'rotate(-1deg)',
  offset: 0.39,
  easing: 'ease-in-out'
}, {
  transform: 'rotate(1deg)',
  offset: 0.41,
  easing: 'ease-in-out'
}, {
  transform: 'rotate(0)',
  offset: 0.43,
  easing: 'ease-in-out'
}, {
  transform: 'rotate(0)',
  offset: 1,
  easing: 'ease-in-out'
}];
const sizes = ['xs'];
let EuiHeaderSectionItemButtonComponent = setComponentTemplate(precompileTemplate(`
    <EuiButtonEmpty
      class="euiHeaderSectionItemButton"
      @isDisabled={{@disabled}}
      @href={{@href}}
      @color="text"
      {{didInsert this.setButtonRef}}
      {{on "click" (optional @onClick)}}
      ...attributes
    >
      <span
        {{didInsert this.setAnimationTargetRef}}
        class="euiHeaderSectionItemButton__content"
      >
        {{yield}}
      </span>
      {{#if @notification}}
        {{#if (eq @notification true)}}
          <EuiIcon
            @iconClasses="euiHeaderSectionItemButton__notification euiHeaderSectionItemButton__notification--dot"
            @color={{argOrDefault @notificationColor "accent"}}
            @type="dot"
            @size="l"
          />
        {{else if @notification}}
          <EuiHideFor @sizes={{sizes}}>
            <EuiNotificationBadge
              class="euiHeaderSectionItemButton__notification euiHeaderSectionItemButton__notification--badge"
              @color={{argOrDefault @notificationColor "accent"}}
            >
              {{@notification}}
            </EuiNotificationBadge>
          </EuiHideFor>
          <EuiShowFor @sizes={{sizes}}>
            <EuiIcon
              @iconClasses="euiHeaderSectionItemButton__notification euiHeaderSectionItemButton__notification--dot"
              @color={{argOrDefault @notificationColor "accent"}}
              @type="dot"
              @size="l"
            />
          </EuiShowFor>
        {{/if}}
      {{/if}}
    </EuiButtonEmpty>
  `, {
  strictMode: true,
  scope: () => ({
    EuiButtonEmpty,
    didInsert,
    on,
    optional,
    eq,
    EuiIcon,
    argOrDefault,
    EuiHideFor: EuiHideForComponent,
    sizes,
    EuiNotificationBadge,
    EuiShowFor: EuiShowForComponent
  })
}), (_class = class EuiHeaderSectionItemButtonComponent extends Component {
  constructor(...args) {
    super(...args);
    _initializerDefineProperty(this, "buttonRef", _descriptor, this);
    _initializerDefineProperty(this, "animationTargetRef", _descriptor2, this);
    _defineProperty(this, "setAnimationTargetRef", ele => {
      this.animationTargetRef = ele;
      this.args.ref?.({
        euiAnimate: this.animate
      });
    });
    _defineProperty(this, "animate", () => {
      this.animationTargetRef?.animate(keyframes, {
        duration: 5000
      });
    });
    _defineProperty(this, "setButtonRef", ele => {
      this.buttonRef = ele;
    });
  }
}, (_descriptor = _applyDecoratedDescriptor(_class.prototype, "buttonRef", [tracked], {
  configurable: true,
  enumerable: true,
  writable: true,
  initializer: null
}), _descriptor2 = _applyDecoratedDescriptor(_class.prototype, "animationTargetRef", [tracked], {
  configurable: true,
  enumerable: true,
  writable: true,
  initializer: null
})), _class));

export { EuiHeaderSectionItemButtonComponent as default };
//# sourceMappingURL=eui-header-section-item-button.js.map
