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 { modifier } from 'ember-modifier';
import set from 'ember-set-helper/helpers/set';
import argOrDefault from '../helpers/arg-or-default.js';
import classNames from '../helpers/class-names.js';
import ResizeObserver from '../modifiers/resize-observer.js';
import screenReaderOnly from '../modifiers/screen-reader-only.js';
import EuiPortal from './eui-portal.js';

var _class, _descriptor;
const updateDisplacementModifier = modifier(function (_element, _pos, {
  affordForDisplacement,
  usePortal,
  bodyClassName,
  dimensions
}) {
  if (affordForDisplacement && usePortal && dimensions) {
    document.body.style.paddingBottom = `${dimensions.height}px`;
  }
  if (bodyClassName) {
    document.body.classList.add(bodyClassName);
  }
  return () => {
    if (affordForDisplacement && usePortal) {
      document.body.style.paddingBottom = '';
    }
    if (bodyClassName) {
      document.body.classList.remove(bodyClassName);
    }
  };
});
let EuiBottomBarComponent = setComponentTemplate(precompileTemplate(`
    {{#if this.usePortal}}
      <EuiPortal>
        <section
          style={{this.bottomBarStyles}}
          {{resizeObserver onResize=(set this "dimensions")}}
          class={{classNames
            componentName="EuiBottomBar"
            paddingSize=(argOrDefault @paddingSize "m")
            positionType=(argOrDefault this.position "fixed")
          }}
          {{updateDisplacementModifier
            affordForDisplacement=this.affordForDisplacement
            usePortal=this.usePortal
            dimensions=this.dimensions
            bodyClassName=@bodyClassName
          }}
          ...attributes
        >
          {{yield}}
        </section>
      </EuiPortal>
    {{else}}
      <section
        style={{this.bottomBarStyles}}
        {{resizeObserver onResize=(set this "dimensions")}}
        class={{classNames
          componentName="EuiBottomBar"
          paddingSize=(argOrDefault @paddingSize "m")
          positionType=(argOrDefault this.position "fixed")
        }}
        aria-label={{if
          @landmarkHeading
          @landmarkHeading
          "Page level controls"
        }}
        {{updateDisplacementModifier
          affordForDisplacement=this.affordForDisplacement
          usePortal=this.usePortal
          dimensions=this.dimensions
          bodyClassName=@bodyClassName
        }}
        ...attributes
      >
        <div {{screenReaderOnly}}>
          <h2>
            {{if @landmarkHeading @landmarkHeading "Page level controls"}}
          </h2>
        </div>
        {{yield}}
      </section>
      <div {{screenReaderOnly}}>
        <p aria-live="assertive">
          {{#if @landmarkHeading}}
            There is a new region landmark called
            {{@landmarkHeading}}
            with page level controls at the end of the document.
          {{else}}
            There is a new region landmark with page level controls at the end
            of the document.
          {{/if}}
        </p>
      </div>
    {{/if}}
  `, {
  strictMode: true,
  scope: () => ({
    EuiPortal,
    classNames,
    argOrDefault,
    resizeObserver: ResizeObserver,
    set,
    updateDisplacementModifier,
    screenReaderOnly
  })
}), (_class = class EuiBottomBarComponent extends Component {
  constructor(...args) {
    super(...args);
    _initializerDefineProperty(this, "dimensions", _descriptor, this);
  }
  get affordForDisplacement() {
    return this.position !== 'fixed' ? false : this.args.affordForDisplacement ?? true;
  }
  get usePortal() {
    return this.position !== 'fixed' ? false : true;
  }
  get position() {
    return this.args.position || 'fixed';
  }
  get top() {
    return this.args.top ? this.args.top : 0;
  }
  get right() {
    return this.args.right ? this.args.right : 0;
  }
  get left() {
    return this.args.left ? this.args.left : 0;
  }
  get bottom() {
    return this.args.bottom ? this.args.bottom : 0;
  }
  get bottomBarStyles() {
    if (this.position === 'fixed') {
      return `left:${this.left}px;right:${this.right}px;bottom:${this.bottom}px`;
    } else {
      return `top:${this.top}px;left:${this.left}px;right:${this.right}px;bottom:${this.bottom}px`;
    }
  }
}, (_descriptor = _applyDecoratedDescriptor(_class.prototype, "dimensions", [tracked], {
  configurable: true,
  enumerable: true,
  writable: true,
  initializer: null
})), _class));

export { EuiBottomBarComponent as default };
//# sourceMappingURL=eui-bottom-bar.js.map
