import { r as registerInstance, g as getAssetPath, h, c as getElement } from './index-0a3acb15.js';

const eclPopoverEcCss = ".ecl-popover.sc-ecl-popover-ec{display:inline-block;margin:0;position:relative}.ecl-popover__container.sc-ecl-popover-ec{background-color:#fff;box-shadow:0 7px 8px rgba(0, 47, 103, 0.08), 0 0 22px rgba(0, 47, 103, 0.04), 0 12px 17px rgba(0, 47, 103, 0.04), 0 -4px 4px rgba(0, 47, 103, 0.04);left:50%;margin-top:calc(\n    0.5rem + 0.75rem\n  );position:absolute;transform:translateX(-50%);z-index:15}.ecl-popover__container.sc-ecl-popover-ec::before{background-color:#fff;box-shadow:0 7px 8px rgba(0, 47, 103, 0.08), 0 0 22px rgba(0, 47, 103, 0.04), 0 12px 17px rgba(0, 47, 103, 0.04), 0 -4px 4px rgba(0, 47, 103, 0.04);-webkit-clip-path:polygon(-8px -8px, calc(100% + 8px) -8px, calc(100% + 8px) calc(100% + 8px));clip-path:polygon(-8px -8px, calc(100% + 8px) -8px, calc(100% + 8px) calc(100% + 8px));content:\"\";height:1rem;left:50%;margin-left:calc(-1rem / 2);position:absolute;top:0;transform:translate(0%, -50%) rotate(-45deg);width:1rem}.ecl-popover__content.sc-ecl-popover-ec{font:normal normal 400 1rem/1.25rem arial, sans-serif;max-height:11rem;min-width:188px;padding:0.75rem;width:auto;overflow-y:auto}@media (min-width: 768px){.ecl-popover__content.sc-ecl-popover-ec{max-height:16.5rem}}.ecl-popover__list.sc-ecl-popover-ec{list-style:none;margin:0;padding:0;width:188px}.ecl-popover__link.sc-ecl-popover-ec{align-items:center;display:flex;padding:0.75rem}.ecl-popover__link.sc-ecl-popover-ec:focus-visible{outline-offset:-2px}.ecl-popover--top.sc-ecl-popover-ec .ecl-popover__container.sc-ecl-popover-ec{bottom:100%;margin-bottom:calc(\n    0.5rem + 0.75rem\n  );margin-top:0}.ecl-popover--top.sc-ecl-popover-ec .ecl-popover__container.sc-ecl-popover-ec::before{bottom:0;top:auto;transform:translate(0%, 50%) rotate(135deg)}.ecl-popover--push-left.sc-ecl-popover-ec .ecl-popover__container.sc-ecl-popover-ec{left:0;transform:none}.ecl-popover--push-left.sc-ecl-popover-ec .ecl-popover__container.sc-ecl-popover-ec::before{left:var(--ecl-popover-position)}.ecl-popover--push-right.sc-ecl-popover-ec .ecl-popover__container.sc-ecl-popover-ec{left:auto;right:0;transform:none}.ecl-popover--push-right.sc-ecl-popover-ec .ecl-popover__container.sc-ecl-popover-ec::before{left:auto;right:var(--ecl-popover-position)}";

const eclPopoverEuCss = ".ecl-popover.sc-ecl-popover-eu{display:inline-block;margin:0;position:relative}.ecl-popover__container.sc-ecl-popover-eu{background-color:#fff;box-shadow:0 7px 8px rgba(9, 49, 142, 0.08), 0 0 22px rgba(9, 49, 142, 0.04), 0 12px 17px rgba(9, 49, 142, 0.04), 0 -4px 4px rgba(9, 49, 142, 0.04);left:50%;margin-top:calc(\n    0.5rem + 0.75rem\n  );position:absolute;transform:translateX(-50%);z-index:15}.ecl-popover__container.sc-ecl-popover-eu::before{background-color:#fff;box-shadow:0 7px 8px rgba(9, 49, 142, 0.08), 0 0 22px rgba(9, 49, 142, 0.04), 0 12px 17px rgba(9, 49, 142, 0.04), 0 -4px 4px rgba(9, 49, 142, 0.04);-webkit-clip-path:polygon(-8px -8px, calc(100% + 8px) -8px, calc(100% + 8px) calc(100% + 8px));clip-path:polygon(-8px -8px, calc(100% + 8px) -8px, calc(100% + 8px) calc(100% + 8px));content:\"\";height:1rem;left:50%;margin-left:calc(-1rem / 2);position:absolute;top:0;transform:translate(0%, -50%) rotate(-45deg);width:1rem}.ecl-popover__content.sc-ecl-popover-eu{font:normal normal 400 1rem/1.25rem arial, sans-serif;max-height:11rem;min-width:188px;padding:0.75rem;width:auto;overflow-y:auto}@media (min-width: 768px){.ecl-popover__content.sc-ecl-popover-eu{max-height:16.5rem}}.ecl-popover__list.sc-ecl-popover-eu{list-style:none;margin:0;padding:0;width:188px}.ecl-popover__link.sc-ecl-popover-eu{align-items:center;display:flex;padding:0.75rem}.ecl-popover__link.sc-ecl-popover-eu:focus-visible{outline-offset:-2px}.ecl-popover--top.sc-ecl-popover-eu .ecl-popover__container.sc-ecl-popover-eu{bottom:100%;margin-bottom:calc(\n    0.5rem + 0.75rem\n  );margin-top:0}.ecl-popover--top.sc-ecl-popover-eu .ecl-popover__container.sc-ecl-popover-eu::before{bottom:0;top:auto;transform:translate(0%, 50%) rotate(135deg)}.ecl-popover--push-left.sc-ecl-popover-eu .ecl-popover__container.sc-ecl-popover-eu{left:0;transform:none}.ecl-popover--push-left.sc-ecl-popover-eu .ecl-popover__container.sc-ecl-popover-eu::before{left:var(--ecl-popover-position)}.ecl-popover--push-right.sc-ecl-popover-eu .ecl-popover__container.sc-ecl-popover-eu{left:auto;right:0;transform:none}.ecl-popover--push-right.sc-ecl-popover-eu .ecl-popover__container.sc-ecl-popover-eu::before{left:auto;right:var(--ecl-popover-position)}";

const EclPopover = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.theme = 'ec';
    this.styleClass = undefined;
    this.eclScript = false;
    this.itemId = undefined;
    this.toggleLabel = undefined;
    this.list = false;
    this.icon = undefined;
    this.iconSize = 'fluid';
    this.iconSprite = '';
  }
  getClass() {
    const styleClasses = [
      `ecl-popover`,
      this.styleClass
    ];
    return styleClasses.join(' ');
  }
  getAttrs() {
    return {
      'aria-controls': this.itemId,
      'data-ecl-popover-toggle': 'data-ecl-popover-toggle',
      'aria-expanded': 'false',
    };
  }
  componentDidLoad() {
    if (this.el.querySelector('.ecl-popover__list')) {
      // Clean the html so that the script finds what it expects.
      const items = this.el.querySelectorAll('.ecl-popover__item');
      this.el.querySelector('.ecl-popover__list').innerHTML = '';
      this.el.querySelector('.ecl-popover__list').append(...items);
    }
    if (this.eclScript) {
      // Load the ECL vanilla js if not already present.
      const src = getAssetPath('./build/scripts/ecl-popover-vanilla.js');
      if (document.querySelector(`script[src="${src}"]`)) {
        document.querySelector(`script[src="${src}"]`).remove();
      }
      const script = document.createElement('script');
      script.src = src;
      script.onload = () => {
        const popover = new ECL.Popover(this.el.firstElementChild);
        popover.init();
      };
      document.body.appendChild(script);
    }
  }
  render() {
    return (h("div", { class: this.getClass() }, h("a", Object.assign({ class: "ecl-link ecl-link--standalone ecl-popover__toggle" }, this.getAttrs()), this.icon ?
      h("ecl-icon", { icon: this.icon, size: this.iconSize, "style-class": "ecl-link__icon--before", sprite: this.iconSprite }) : '', this.toggleLabel), h("div", { class: "ecl-popover__container", id: this.itemId, hidden: true }, h("div", { class: "ecl-popover__content" }, this.list ?
      h("ul", { class: "ecl-popover__list" }, h("slot", null)) : '', !this.list ?
      h("slot", null) : ''))));
  }
  static get assetsDirs() { return ["build"]; }
  get el() { return getElement(this); }
};
EclPopover.style = {
  ec: eclPopoverEcCss,
  eu: eclPopoverEuCss
};

export { EclPopover as ecl_popover };

//# sourceMappingURL=ecl-popover.entry.js.map