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 { action } from '@ember/object';
import didInsert from '@ember/render-modifiers/modifiers/did-insert';
import didUpdate from '@ember/render-modifiers/modifiers/did-update';
import { htmlSafe } from '@ember/template';
import queue from 'ember-composable-helpers/helpers/queue';
import { element } from 'ember-element-helper';
import set from 'ember-set-helper/helpers/set';
import { and, eq, not } from 'ember-truth-helpers';
import randomId from '../-private/random-id.js';
import argOrDefault, { argOrDefaultDecorator } from '../helpers/arg-or-default.js';
import classNames from '../helpers/class-names.js';
import ResizeObserver from '../modifiers/resize-observer.js';
import EuiButtonIcon from './eui-button-icon.js';
import EuiLoadingSpinner from './eui-loading-spinner.js';

var _dec, _dec2, _dec3, _dec4, _dec5, _class, _descriptor, _descriptor2, _descriptor3, _descriptor4, _descriptor5, _descriptor6, _descriptor7, _descriptor8;
let EuiAccordionAccordionComponent = setComponentTemplate(precompileTemplate(`
    {{#let (argOrDefault @element "div") as |tagName|}}
      {{#if tagName}}
        {{#let
          (element tagName) (element this.buttonElement)
          as |Accordion ButtonElement|
        }}
          {{#if (and Accordion ButtonElement)}}
            <Accordion
              class={{classNames
                (if this.isOpen "euiAccordion-isOpen")
                componentName="EuiAccordion"
              }}
              ...attributes
            >
              <div
                class={{classNames
                  "euiAccordion__triggerWrapper"
                  @triggerClassName
                }}
              >
                {{#if (eq this._arrowDisplay "left")}}
                  <EuiButtonIcon
                    @color="text"
                    @iconClasses={{classNames
                      "euiAccordion__iconButton"
                      (if this.isOpen "euiAccordion__iconButton-isOpen")
                      (if
                        (eq this._arrowDisplay "right")
                        "euiAccordion__iconButton--right"
                      )
                      (if @arrowProps.className @arrowProps.className)
                    }}
                    @iconType="arrowRight"
                    {{on "click" this.onToggle}}
                    aria-controls={{@id}}
                    aria-expanded={{this.isOpen}}
                    tabindex={{if this.buttonElementIsFocusable "-1" "0"}}
                  />
                {{/if}}
                <ButtonElement
                  type="button"
                  id={{argOrDefault @buttonProps.id (randomId)}}
                  class={{this.buttonClasses}}
                  aria-controls={{@id}}
                  aria-expanded={{this.isOpen}}
                  aria-labelledby={{argOrDefault @buttonProps.id (randomId)}}
                  {{on "click" this.onToggle}}
                >
                  <span class={{this.buttonContentClasses}}>
                    {{yield this.isOpen to="buttonContent"}}
                  </span>
                </ButtonElement>
                {{#if
                  (and
                    @extraAction (has-block "extraAction") (not this.isLoading)
                  )
                }}
                  <div class="euiAccordion__optionalAction">
                    {{yield this.isOpen to="extraAction"}}
                  </div>
                {{else if this.isLoading}}
                  <div class="euiAccordion__optionalAction">
                    <EuiLoadingSpinner />
                  </div>
                {{/if}}
                {{#if (eq this._arrowDisplay "right")}}
                  <EuiButtonIcon
                    @color="text"
                    class={{classNames
                      "euiAccordion__iconButton"
                      (if this.isOpen "euiAccordion__iconButton-isOpen")
                      (if
                        (eq this._arrowDisplay "right")
                        "euiAccordion__iconButton--right"
                      )
                      (if @arrowProps.className @arrowProps.className)
                    }}
                    @iconType="arrowRight"
                    {{on "click" this.onToggle}}
                    aria-controls={{@id}}
                    aria-expanded={{this.isOpen}}
                    tabindex={{if this.buttonElementIsFocusable "-1" "0"}}
                  />
                {{/if}}
              </div>
              <div
                class="euiAccordion__childWrapper"
                style={{this.childContentStyle}}
                id={{@id}}
                {{didInsert (set this "childWrapper")}}
                tabindex="-1"
                role="region"
              >
                <div
                  class={{classNames
                    (if this.isLoading "euiAccordion__children-isLoading")
                    @childClassName
                  }}
                  {{didInsert
                    (queue (set this "childContent") this.setChildContentHeight)
                  }}
                  {{resizeObserver onResize=this.setChildContentHeight}}
                  {{didUpdate this.setChildContentHeight @forceState}}
                >
                  {{#if (and this.isLoading this.isLoadingMessage)}}
                    <EuiLoadingSpinner class="euiAccordion__spinner" />
                    <span>
                      {{#if this.hasLoadingMessage}}
                        {{this.isLoadingMessage}}
                      {{else}}
                        {{! <EuiI18n @token="euiAccordion.isLoading" @default="Loading" /> }}
                        Loading...
                      {{/if}}
                    </span>
                  {{else}}
                    <div
                      class={{classNames
                        componentName="EuiAccordion"
                        paddingSize=this.paddingSize
                      }}
                    >
                      {{yield to="content"}}
                    </div>
                  {{/if}}
                </div>
              </div>
            </Accordion>
          {{/if}}
        {{/let}}
      {{/if}}
    {{/let}}
  `, {
  strictMode: true,
  scope: () => ({
    argOrDefault,
    element,
    and,
    classNames,
    eq,
    EuiButtonIcon,
    on,
    randomId,
    not,
    EuiLoadingSpinner,
    didInsert,
    set,
    queue,
    resizeObserver: ResizeObserver,
    didUpdate
  })
}), (_dec = argOrDefaultDecorator(false), _dec2 = argOrDefaultDecorator(false), _dec3 = argOrDefaultDecorator(false), _dec4 = argOrDefaultDecorator('none'), _dec5 = argOrDefaultDecorator('left'), (_class = class EuiAccordionAccordionComponent extends Component {
  constructor(owner, args) {
    super(owner, args);
    // Defaults
    _initializerDefineProperty(this, "isLoading", _descriptor, this);
    _initializerDefineProperty(this, "isLoadingMessage", _descriptor2, this);
    _initializerDefineProperty(this, "initialIsOpen", _descriptor3, this);
    _initializerDefineProperty(this, "paddingSize", _descriptor4, this);
    _initializerDefineProperty(this, "arrowDisplay", _descriptor5, this);
    _initializerDefineProperty(this, "_opened", _descriptor6, this);
    _initializerDefineProperty(this, "childWrapper", _descriptor7, this);
    _initializerDefineProperty(this, "childContent", _descriptor8, this);
    _defineProperty(this, "setChildContentHeight", () => {
      const {
        forceState
      } = this.args;
      requestAnimationFrame(() => {
        const height = this.childContent && (forceState ? forceState === 'open' : this._opened) ? this.childContent.clientHeight : 0;
        this.childWrapper && this.childWrapper.setAttribute('style', `height: ${height}px`);
      });
    });
    this._opened = this.args.forceState ? this.args.forceState === 'open' : this.args.initialIsOpen;
  }
  get buttonElement() {
    return this.args.element === 'fieldset' ? 'legend' : 'button';
  }
  get buttonElementIsFocusable() {
    return this.buttonElement === 'button';
  }
  get _arrowDisplay() {
    return this.arrowDisplay === 'none' && !this.buttonElementIsFocusable ? 'left' : this.arrowDisplay;
  }
  get isOpen() {
    return this.args.forceState ? this.args.forceState === 'open' : this._opened;
  }
  get hasLoadingMessage() {
    return this.isLoadingMessage && this.isLoadingMessage !== true;
  }
  get buttonClasses() {
    return ['euiAccordion__button', this.args.buttonClassName, this.args.buttonProps?.className].join(' ');
  }
  get buttonContentClasses() {
    return ['euiAccordion__buttonContent', this.args.buttonContentClassName].join(' ');
  }
  get childContentStyle() {
    return this._opened ? '' : htmlSafe(`height: 0px;`);
  }
  onToggle() {
    if (this.args.forceState) {
      this.args.onToggle?.(this.args.forceState === 'open' ? false : true);
    } else {
      this._opened = !this._opened;
      if (this._opened && this.childWrapper) {
        this.childWrapper.focus();
      }
      this.args.onToggle?.(this._opened);
    }
  }
}, (_descriptor = _applyDecoratedDescriptor(_class.prototype, "isLoading", [_dec], {
  configurable: true,
  enumerable: true,
  writable: true,
  initializer: null
}), _descriptor2 = _applyDecoratedDescriptor(_class.prototype, "isLoadingMessage", [_dec2], {
  configurable: true,
  enumerable: true,
  writable: true,
  initializer: null
}), _descriptor3 = _applyDecoratedDescriptor(_class.prototype, "initialIsOpen", [_dec3], {
  configurable: true,
  enumerable: true,
  writable: true,
  initializer: null
}), _descriptor4 = _applyDecoratedDescriptor(_class.prototype, "paddingSize", [_dec4], {
  configurable: true,
  enumerable: true,
  writable: true,
  initializer: null
}), _descriptor5 = _applyDecoratedDescriptor(_class.prototype, "arrowDisplay", [_dec5], {
  configurable: true,
  enumerable: true,
  writable: true,
  initializer: null
}), _descriptor6 = _applyDecoratedDescriptor(_class.prototype, "_opened", [tracked], {
  configurable: true,
  enumerable: true,
  writable: true,
  initializer: null
}), _descriptor7 = _applyDecoratedDescriptor(_class.prototype, "childWrapper", [tracked], {
  configurable: true,
  enumerable: true,
  writable: true,
  initializer: function () {
    return null;
  }
}), _descriptor8 = _applyDecoratedDescriptor(_class.prototype, "childContent", [tracked], {
  configurable: true,
  enumerable: true,
  writable: true,
  initializer: function () {
    return null;
  }
}), _applyDecoratedDescriptor(_class.prototype, "onToggle", [action], Object.getOwnPropertyDescriptor(_class.prototype, "onToggle"), _class.prototype)), _class)));

export { EuiAccordionAccordionComponent as default };
//# sourceMappingURL=eui-accordion.js.map
