import { r as registerInstance, h, e as Host, c as getElement, F as Fragment } from './index-15028158.js';
import { c as createPopper } from './popper-e3c4eda2.js';

const defaultMenuCss = ".sc-stencila-menu-default-h,stencila-menu.sc-stencila-menu-default{display:inline-block;position:relative}.sc-stencila-menu-default-h ul.sc-stencila-menu-default,stencila-menu.sc-stencila-menu-default ul.sc-stencila-menu-default{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);background-color:#fff;background-color:var(--color-stock,#fff);border:1px solid #cfd2e1;border-color:var(--color-neutral-100,#cfd2e1);border-radius:.25rem;-webkit-box-shadow:0 0 #0000,0 0 #0000,var(--tw-shadow);box-shadow:0 0 #0000,0 0 #0000,var(--tw-shadow);-webkit-box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);display:inline-block;left:100%;margin:0;min-width:112px;padding:0;position:absolute;top:0;z-index:30}.sc-stencila-menu-default-h ul[aria-hidden].sc-stencila-menu-default,stencila-menu.sc-stencila-menu-default ul[aria-hidden].sc-stencila-menu-default{display:none}.sc-stencila-menu-default-h ul.sc-stencila-menu-default-s>:not(:last-child),stencila-menu ul.sc-stencila-menu-default-s>:not(:last-child){border:0 solid #cfd2e1;border-color:var(--color-neutral-100,#cfd2e1);border-bottom:1px solid var(--color-neutral-100,#cfd2e1)}";

const menuMaterialCss = ".sc-stencila-menu-material-h ul.sc-stencila-menu-material{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);background-color:#fff;background-color:var(--color-stock,#fff);border:1px solid #cfd2e1;border-color:var(--color-neutral-100,#cfd2e1);border-radius:.25rem;-webkit-box-shadow:0 0 #0000,0 0 #0000,var(--tw-shadow);box-shadow:0 0 #0000,0 0 #0000,var(--tw-shadow);-webkit-box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);display:inline-block;margin:0;min-width:112px;padding:0;position:absolute;z-index:30}.sc-stencila-menu-material-h ul[aria-hidden].sc-stencila-menu-material{display:none}";

let menuIds = 0;
let Menu = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.popperRef = null;
    /**
     * Determines whether the Menu is shown or not
     */
    this.isOpen = false;
    /**
     * Close the menu when losing focus
     */
    this.autoClose = true;
    /**
     * The position relative to the toggle button where the menu should appear.
     */
    this.menuPosition = 'right-start';
    this.initMenu = () => {
      if (this.menuEl) {
        this.popperRef = createPopper(this.el, this.menuEl, {
          placement: this.menuPosition,
          strategy: 'fixed',
          modifiers: [{ name: 'preventOverflow' }],
        });
      }
    };
    this.computeMenuLocation = () => {
      this.popperRef ? this.popperRef.update() : this.initMenu();
    };
    this.toggleMenu = (e) => {
      e.preventDefault();
      if (this.autoClose) {
        e.stopPropagation();
      }
      this.isOpen ? (this.isOpen = false) : this.openMenu();
    };
    this.openMenu = () => {
      this.computeMenuLocation();
      this.isOpen = true;
    };
    this.closeMenu = () => {
      if (this.autoClose) {
        this.isOpen = false;
      }
    };
    this.closeOnBlur = (e) => {
      if (this.isOpen && !this.el.contains(e.relatedTarget)) {
        this.autoCloseTimeoutRef = window.setTimeout(this.closeMenu, 250);
      }
    };
    this.clearTimeout = () => {
      window.clearTimeout(this.autoCloseTimeoutRef);
    };
    this.menuId = `stencila-menu-${menuIds++}`;
  }
  componentWillLoad() {
    if (this.autoClose) {
      this.el.addEventListener('mouseout', this.closeOnBlur);
      this.el.addEventListener('mouseenter', this.clearTimeout);
    }
  }
  disconnectedCallback() {
    this.el.removeEventListener('mouseout', this.closeOnBlur);
    this.el.removeEventListener('mouseenter', this.clearTimeout);
    if (this.popperRef) {
      this.popperRef.destroy();
      this.popperRef = null;
    }
  }
  render() {
    return (h(Host, null, h("span", { onClick: this.toggleMenu, "aria-controls": this.menuId, "aria-expanded": this.isOpen ? 'true' : 'false' }, h("slot", { name: "toggle" })), h("ul", { role: "menu", "aria-hidden": !this.isOpen, "aria-orientation": "vertical", tabindex: "-1", id: this.menuId, onClick: this.closeMenu, ref: (el) => (this.menuEl = el) }, h("slot", null))));
  }
  get el() { return getElement(this); }
};
Menu.style = {
  default: defaultMenuCss,
  material: menuMaterialCss
};

const defaultMenuItemCss = ".sc-stencila-menu-item-default-h,stencila-menu-item.sc-stencila-menu-item-default{-ms-flex-align:center;align-items:center;color:#4a4a4a;color:var(--color-key,#4a4a4a);cursor:pointer;display:-ms-flexbox;display:flex;font-family:sans-serif;font-family:var(--font-family-body,sans-serif);font-size:.875rem;height:2rem;letter-spacing:.025em;line-height:1.25rem;line-height:1;text-decoration:none}.sc-stencila-menu-item-default-h:not([aria-disabled]):focus,.sc-stencila-menu-item-default-h:not([aria-disabled]):hover,stencila-menu-item.sc-stencila-menu-item-default:not([aria-disabled]):focus,stencila-menu-item.sc-stencila-menu-item-default:not([aria-disabled]):hover{background-color:#e9eaf1;background-color:var(--color-neutral-50,#e9eaf1)}.sc-stencila-menu-item-default-h stencila-icon.sc-stencila-menu-item-default,stencila-menu-item.sc-stencila-menu-item-default stencila-icon.sc-stencila-menu-item-default{margin-right:.5rem}.sc-stencila-menu-item-default-h>li.sc-stencila-menu-item-default,stencila-menu-item.sc-stencila-menu-item-default>li.sc-stencila-menu-item-default{list-style-type:none;margin:0;padding:0 .5rem;white-space:nowrap;width:100%}.sc-stencila-menu-item-default-h>li .sc-stencila-menu-item-default-s>stencila-menu,stencila-menu-item>li.sc-stencila-menu-item-default-s>stencila-menu,stencila-menu-item>li .sc-stencila-menu-item-default-s>stencila-menu{width:100%}[size=xsmall].sc-stencila-menu-item-default-h,stencila-menu-item[size=xsmall].sc-stencila-menu-item-default{font-size:.75rem;height:1.25rem;line-height:1rem}[size=xsmall].sc-stencila-menu-item-default-h stencila-icon.sc-stencila-menu-item-default,stencila-menu-item[size=xsmall].sc-stencila-menu-item-default stencila-icon.sc-stencila-menu-item-default{margin-right:.25rem}[size=sm].sc-stencila-menu-item-default-h,stencila-menu-item[size=sm].sc-stencila-menu-item-default{font-size:1rem;height:1.5rem;line-height:1.5rem}[aria-disabled].sc-stencila-menu-item-default-h,stencila-menu-item[aria-disabled].sc-stencila-menu-item-default{cursor:default}[divider].sc-stencila-menu-item-default-h,stencila-menu-item[divider].sc-stencila-menu-item-default{color:var(--color-neutral-600);font-size:.75rem;font-weight:700;line-height:1rem}";

const menuItemMaterialCss = ".sc-stencila-menu-item-material-h,stencila-menu-item.sc-stencila-menu-item-material{-ms-flex-align:center;align-items:center;color:#4a4a4a;color:var(--color-key,#4a4a4a);cursor:pointer;display:-ms-flexbox;display:flex;font-family:sans-serif;font-family:var(--font-family-body,sans-serif);height:3rem;text-decoration:none}.sc-stencila-menu-item-material-h:not([aria-disabled]):focus,.sc-stencila-menu-item-material-h:not([aria-disabled]):hover,stencila-menu-item.sc-stencila-menu-item-material:not([aria-disabled]):focus,stencila-menu-item.sc-stencila-menu-item-material:not([aria-disabled]):hover{background-color:#e9eaf1;background-color:var(--color-neutral-50,#e9eaf1)}.sc-stencila-menu-item-material-h stencila-icon.sc-stencila-menu-item-material,stencila-menu-item.sc-stencila-menu-item-material stencila-icon.sc-stencila-menu-item-material{margin-right:.5rem}.sc-stencila-menu-item-material-h>li.sc-stencila-menu-item-material,stencila-menu-item.sc-stencila-menu-item-material>li.sc-stencila-menu-item-material{list-style-type:none;margin:0;padding:0 1rem;white-space:nowrap;width:100%}.sc-stencila-menu-item-material-h>li .sc-stencila-menu-item-material-s>stencila-menu,stencila-menu-item>li.sc-stencila-menu-item-material-s>stencila-menu,stencila-menu-item>li .sc-stencila-menu-item-material-s>stencila-menu{width:100%}[size=xsmall].sc-stencila-menu-item-material-h,stencila-menu-item[size=xsmall].sc-stencila-menu-item-material{font-size:.75rem;height:1.25rem;line-height:1rem}[size=xsmall].sc-stencila-menu-item-material-h stencila-icon.sc-stencila-menu-item-material,stencila-menu-item[size=xsmall].sc-stencila-menu-item-material stencila-icon.sc-stencila-menu-item-material{margin-right:.25rem}[size=sm].sc-stencila-menu-item-material-h,stencila-menu-item[size=sm].sc-stencila-menu-item-material{font-size:1rem;height:1.5rem;line-height:1.5rem}[aria-disabled].sc-stencila-menu-item-material-h,stencila-menu-item[aria-disabled].sc-stencila-menu-item-material{cursor:default}[divider].sc-stencila-menu-item-material-h,stencila-menu-item[divider].sc-stencila-menu-item-material{color:var(--color-neutral-600);font-size:.75rem;font-weight:700;line-height:1rem}";

let MenuItem = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    /**
     * The overall size of the component.
     */
    this.size = 'default';
    /**
     * The overall size of the component.
     */
    this.role = 'menuitem';
    /**
     * Determines whether the menu item is enabled/clickable or not
     */
    this.disabled = false;
    /**
     * Renders the menu item as a section divider.
     * It does not have any click or hover handlers
     */
    this.divider = false;
  }
  render() {
    var _a;
    const ariaAttrs = {
      'aria-disabled': this.disabled || this.divider,
      role: this.role,
    };
    return (h(Host, Object.assign({}, ariaAttrs, { size: this.size }), ((_a = this.el) === null || _a === void 0 ? void 0 : _a.slot) === 'toggle' ? (h(Fragment, null, this.icon !== undefined && (h("stencila-icon", { icon: this.icon })), h("slot", null))) : (h("li", null, this.icon !== undefined && (h("stencila-icon", { icon: this.icon })), h("slot", null)))));
  }
  get el() { return getElement(this); }
};
MenuItem.style = {
  default: defaultMenuItemCss,
  material: menuItemMaterialCss
};

export { Menu as stencila_menu, MenuItem as stencila_menu_item };

//# sourceMappingURL=stencila-menu_2.entry.js.map