import { _ as _applyDecoratedDescriptor, a as _initializerDefineProperty } 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 { concat, hash } from '@ember/helper';
import { on } from '@ember/modifier';
import { action } from '@ember/object';
import { throttle } from '@ember/runloop';
import { element } from 'ember-element-helper';
import { focusTrap } from 'ember-focus-trap';
import onKey from 'ember-keyboard/modifiers/on-key';
import { modifier } from 'ember-modifier';
import style from 'ember-style-modifier/modifiers/style';
import { eq, or, not, and } from 'ember-truth-helpers';
import argOrDefault from '../helpers/arg-or-default.js';
import classNames from '../helpers/class-names.js';
import OutsideClickDetector from '../modifiers/outside-click-detector.js';
import ResizeObserver from '../modifiers/resize-observer.js';
import { isWithinMinBreakpoint } from '../utils/breakpoint.js';
import { sizeMapping } from '../utils/css-mappings/eui-flyout.js';
import { keysOf } from './common.js';
import EuiButtonIcon from './eui-button-icon.js';
import EuiOverlayMaskComponent from './eui-overlay-mask.js';
import EuiPortal from './eui-portal.js';

var _class, _descriptor, _descriptor2;
const classesModifier = modifier((_element, _pos, {
  type,
  isPushed,
  side,
  dimensions = {},
  functionToCallOnWindowResize
}) => {
  // This class doesn't actually do anything by EUI, but is nice to add for consumers (JIC)
  document.body.classList.add('euiBody--hasFlyout');

  /**
   * Accomodate for the `isPushed` state by adding padding to the body equal to the width of the element
   */
  if (type === 'push') {
    // Only add the event listener if we'll need to accommodate with padding
    window.addEventListener('resize', functionToCallOnWindowResize);
    if (isPushed && dimensions.width) {
      if (side === 'right') {
        document.body.style.paddingRight = `${dimensions.width}px`;
      } else if (side === 'left') {
        document.body.style.paddingLeft = `${dimensions.width}px`;
      }
    }
  }
  return () => {
    document.body.classList.remove('euiBody--hasFlyout');
    if (type === 'push') {
      window.removeEventListener('resize', functionToCallOnWindowResize);
      if (side === 'right') {
        document.body.style.paddingRight = '';
      } else if (side === 'left') {
        document.body.style.paddingLeft = '';
      }
    }
  };
});
const SIZES = keysOf(sizeMapping);
function isEuiFlyoutSizeNamed(value) {
  return SIZES.includes(value);
}
let EuiFlyoutComponent = setComponentTemplate(precompileTemplate(`
    {{#let
      (classNames
        (if (eq this.maxWidth true) "euiFlyout--maxWidth-default")
        componentName="EuiFlyout"
        type=this.type
        side=this.side
        size=this.size
        padding=this.paddingSize
      )
      (classNames
        "euiFlyout__closeButton"
        (concat "euiFlyout__closeButton--" this.closeButtonPosition)
        (or @closeButtonProps.className @closeButtonProps.classes)
      )
      (modifier
        focusTrap
        isActive=(argOrDefault @isFocusTrapActive true)
        shouldSelfFocus=(argOrDefault @shouldSelfFocus true)
        isPaused=this.isPushed
        focusTrapOptions=(argOrDefault
          @focusTrapOptions
          (hash
            allowOutsideClick=true clickOutsideDeactivates=(not this.ownFocus)
          )
        )
      )
      (modifier
        outsideClickDetectorModifier
        isDisabled=(or this.isPushed (not this.outsideClickCloses))
        onOutsideClick=this.onClose
      )
      (modifier styleModifier this.styles)
      (modifier onKey "Escape" this.onClose)
      (modifier
        classesModifier
        type=this.type
        isPushed=this.isPushed
        side=this.side
        dimensions=this.dimensions
        functionToCallOnWindowResize=this.functionToCallOnWindowResize
      )
      (modifier resizeObserverModifier onResize=this.onResize)
      (element this.as)
      as |classes closeButtonClasses focusTrapModifier outsideClickDetector currentStyles onEscape classesModifier resizeObserver TheElement|
    }}

      {{#if (and this.ownFocus (not this.isPushed))}}
        <EuiOverlayMask @headerZindexLocation="below" @onClick={{this.onClose}}>
          <TheElement
            role={{this.role}}
            class={{classes}}
            tabindex={{-1}}
            {{!@glint-expect-error}}
            {{currentStyles}}
            {{!@glint-expect-error}}
            {{focusTrapModifier}}
            {{outsideClickDetector}}
            {{classesModifier}}
            {{resizeObserver}}
            ...attributes
          >
            {{#if (and @onClose (not @hideCloseButton))}}
              <EuiButtonIcon
                @display={{if
                  (eq this.closeButtonPosition "outside")
                  "fill"
                  "empty"
                }}
                @iconType="cross"
                @color="text"
                aria-label={{or @closeButtonAriaLabel @closeAriaLabel}}
                data-test-subj="euiFlyoutCloseButton"
                class={{closeButtonClasses}}
                {{on "click" this.onButtonCloseClicked}}
              />
            {{/if}}
            {{yield}}
          </TheElement>
        </EuiOverlayMask>
      {{else if (not this.isPushed)}}
        <EuiPortal>
          <TheElement
            role={{this.role}}
            class={{classes}}
            tabindex={{-1}}
            {{currentStyles}}
            {{!@glint-expect-error}}
            {{focusTrapModifier}}
            {{outsideClickDetector}}
            {{classesModifier}}
            {{resizeObserver}}
            ...attributes
          >
            {{#if (and @onClose (not @hideCloseButton))}}
              <EuiButtonIcon
                @display={{if
                  (eq this.closeButtonPosition "outside")
                  "fill"
                  "empty"
                }}
                @iconType="cross"
                @color="text"
                aria-label={{or @closeButtonAriaLabel @closeAriaLabel}}
                data-test-subj="euiFlyoutCloseButton"
                class={{closeButtonClasses}}
                {{on "click" this.onButtonCloseClicked}}
              />
            {{/if}}
            {{yield}}
          </TheElement>
        </EuiPortal>
      {{else}}
        <TheElement
          role={{this.role}}
          class={{classes}}
          tabindex={{-1}}
          {{currentStyles}}
          {{!@glint-expect-error}}
          {{focusTrapModifier}}
          {{outsideClickDetector}}
          {{onEscape}}
          {{classesModifier}}
          {{resizeObserver}}
          ...attributes
        >
          {{#if (and @onClose (not @hideCloseButton))}}
            <EuiButtonIcon
              @display={{if
                (eq this.closeButtonPosition "outside")
                "fill"
                "empty"
              }}
              @iconType="cross"
              @color="text"
              aria-label={{or @closeButtonAriaLabel @closeAriaLabel}}
              data-test-subj="euiFlyoutCloseButton"
              class={{closeButtonClasses}}
              {{on "click" this.onButtonCloseClicked}}
            />
          {{/if}}
          {{yield}}
        </TheElement>
      {{/if}}
    {{/let}}
  `, {
  strictMode: true,
  scope: () => ({
    classNames,
    eq,
    concat,
    or,
    focusTrap,
    argOrDefault,
    hash,
    not,
    outsideClickDetectorModifier: OutsideClickDetector,
    styleModifier: style,
    onKey,
    classesModifier,
    resizeObserverModifier: ResizeObserver,
    element,
    and,
    EuiOverlayMask: EuiOverlayMaskComponent,
    EuiButtonIcon,
    on,
    EuiPortal
  })
}), (_class = class EuiFlyoutComponent extends Component {
  constructor(...args) {
    super(...args);
    _initializerDefineProperty(this, "windowIsLargeEnoughToPush", _descriptor, this);
    _initializerDefineProperty(this, "dimensions", _descriptor2, this);
  }
  get as() {
    return this.args.as ?? 'div';
  }
  get hideCloseButton() {
    return this.args.hideCloseButton ?? false;
  }
  get closeButtonPosition() {
    return this.args.closeButtonPosition ?? 'inside';
  }
  get ownFocus() {
    return this.args.ownFocus ?? true;
  }
  get side() {
    return this.args.side ?? 'right';
  }
  get size() {
    return this.args.size ?? 'm';
  }
  get paddingSize() {
    return this.args.paddingSize ?? 'l';
  }
  get maxWidth() {
    return this.args.maxWidth ?? false;
  }
  get type() {
    return this.args.type ?? 'overlay';
  }
  get outsideClickCloses() {
    return this.args.outsideClickCloses ?? false;
  }
  get role() {
    return this.args.role ?? 'dialog';
  }
  get pushMinBreakpoint() {
    return this.args.pushMinBreakpoint ?? 'l';
  }
  get isPushed() {
    return this.type === 'push' && this.windowIsLargeEnoughToPush;
  }
  get styles() {
    let newStyle = {};
    if (this.maxWidth !== false) {
      const value = typeof this.maxWidth === 'number' ? `${this.maxWidth}px` : this.maxWidth;
      newStyle = {
        maxWidth: value
      };
    }
    if (!isEuiFlyoutSizeNamed(this.size) && newStyle) {
      newStyle['width'] = this.size;
    } else {
      newStyle = {
        width: this.size
      };
    }
    return newStyle;
  }
  functionToCallOnWindowResize() {
    throttle(() => {
      if (isWithinMinBreakpoint(window.innerWidth, this.pushMinBreakpoint)) {
        this.windowIsLargeEnoughToPush = true;
      } else {
        this.windowIsLargeEnoughToPush = false;
      }
    }, 50);
  }
  onClose() {
    this.args.onClose?.();
  }
  onButtonCloseClicked(e) {
    this.onClose();
    this.args.closeButtonProps?.onClick?.(e);
  }
  onResize(dimensions) {
    this.dimensions = dimensions;
  }
}, (_descriptor = _applyDecoratedDescriptor(_class.prototype, "windowIsLargeEnoughToPush", [tracked], {
  configurable: true,
  enumerable: true,
  writable: true,
  initializer: function () {
    return isWithinMinBreakpoint(typeof window === 'undefined' ? -Infinity : window.innerWidth, this.pushMinBreakpoint);
  }
}), _descriptor2 = _applyDecoratedDescriptor(_class.prototype, "dimensions", [tracked], {
  configurable: true,
  enumerable: true,
  writable: true,
  initializer: null
}), _applyDecoratedDescriptor(_class.prototype, "functionToCallOnWindowResize", [action], Object.getOwnPropertyDescriptor(_class.prototype, "functionToCallOnWindowResize"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "onClose", [action], Object.getOwnPropertyDescriptor(_class.prototype, "onClose"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "onButtonCloseClicked", [action], Object.getOwnPropertyDescriptor(_class.prototype, "onButtonCloseClicked"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "onResize", [action], Object.getOwnPropertyDescriptor(_class.prototype, "onResize"), _class.prototype)), _class));

export { SIZES, EuiFlyoutComponent as default };
//# sourceMappingURL=eui-flyout.js.map
