import { r as registerInstance, h, c as getElement, e as Host } from './index-15028158.js';
import { g as getSlotByName } from './slotSelectors-df70e421.js';

const defaultActionMenuCss = ".sc-stencila-action-menu-default-h{--background:var(--color-neutral-50,#edf2f7);--border:var(--color-neutral-100,#e2e8f0);background-color:var(--background);border-bottom-left-radius:.25rem;border-color:var(--border);border-style:solid;border-width:0 0 1px 1px;font-family:monospace;font-family:var(--font-family-mono,monospace);font-size:.75rem;line-height:1rem;line-height:1;padding:1px .25rem;position:absolute;right:0;top:0;z-index:10}.sc-stencila-action-menu-default-h .hidden.sc-stencila-action-menu-default{display:none}.sc-stencila-action-menu-default-h nav.sc-stencila-action-menu-default>*.sc-stencila-action-menu-default{vertical-align:middle}.sc-stencila-action-menu-default-h ul.sc-stencila-action-menu-default{list-style-type:none;margin:0;padding:0}.sc-stencila-action-menu-default-h li.sc-stencila-action-menu-default{display:inline;padding-right:.25rem}.sc-stencila-action-menu-default-h li.sc-stencila-action-menu-default:last-child{padding-right:0}.sc-stencila-action-menu-default-h .sc-stencila-action-menu-default-s>stencila-button,.sc-stencila-action-menu-default-h stencila-button.sc-stencila-action-menu-default{display:inline-block}.sc-stencila-action-menu-default-h .actionContainer.sc-stencila-action-menu-default{display:inline-block;overflow:hidden;-webkit-transition:width .12s ease-in-out;transition:width .12s ease-in-out;vertical-align:middle;white-space:nowrap;width:var(--max-width)}.sc-stencila-action-menu-default-h .actionContainer.sc-stencila-action-menu-default:not(.isAnimating):not(.isCollapsed){width:auto}.sc-stencila-action-menu-default-h .secondaryActions.sc-stencila-action-menu-default:not(:hover):not(:focus) .actionContainer.isCollapsed.sc-stencila-action-menu-default{width:0}";

const materialActionMenuCss = ".sc-stencila-action-menu-material-h{--background:var(--color-neutral-50,#edf2f7);--border:var(--color-neutral-100,#e2e8f0);background-color:var(--background);border-bottom-left-radius:.25rem;border-color:var(--border);border-style:solid;border-width:0 0 1px 1px;font-family:monospace;font-family:var(--font-family-mono,monospace);font-size:.75rem;line-height:1rem;line-height:1;padding:1px .25rem;position:absolute;right:0;top:0;z-index:10}.sc-stencila-action-menu-material-h .hidden.sc-stencila-action-menu-material{display:none}.sc-stencila-action-menu-material-h nav.sc-stencila-action-menu-material>*.sc-stencila-action-menu-material{vertical-align:middle}.sc-stencila-action-menu-material-h ul.sc-stencila-action-menu-material{list-style-type:none;margin:0;padding:0}.sc-stencila-action-menu-material-h li.sc-stencila-action-menu-material{display:inline;padding-right:.25rem}.sc-stencila-action-menu-material-h li.sc-stencila-action-menu-material:last-child{padding-right:0}.sc-stencila-action-menu-material-h .sc-stencila-action-menu-material-s>stencila-button,.sc-stencila-action-menu-material-h stencila-button.sc-stencila-action-menu-material{display:inline-block}.sc-stencila-action-menu-material-h .actionContainer.sc-stencila-action-menu-material{display:inline-block;overflow:hidden;-webkit-transition:width .12s ease-in-out;transition:width .12s ease-in-out;vertical-align:middle;white-space:nowrap;width:var(--max-width)}.sc-stencila-action-menu-material-h .actionContainer.sc-stencila-action-menu-material:not(.isAnimating):not(.isCollapsed){width:auto}.sc-stencila-action-menu-material-h .secondaryActions.sc-stencila-action-menu-material:not(:hover):not(:focus) .actionContainer.isCollapsed.sc-stencila-action-menu-material{width:0}";

const slots = {
  default: '',
  persistentActions: 'persistentActions',
};
let ActionMenu = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.isCollapsed = false;
    this.toggleActionMenu = () => (this.isCollapsed = !this.isCollapsed);
    this.width = 'auto';
    this.isAnimating = false;
    this.isTransitioning = false;
    this.calculateWidth = () => {
      if (this.actionContainerRef && this.isTransitioning === false) {
        this.width = 'auto';
        const width = this.actionContainerRef.getBoundingClientRect().width;
        this.width = `${width}px`;
      }
    };
    this.observer = new window.MutationObserver(this.calculateWidth);
    this.checkForSecondaryActions = () => {
      this.hasSecondaryActions = Array.from(this.el.children).some((child) => {
        return child.slot === '';
      });
      return this.hasSecondaryActions;
    };
  }
  componentWillLoad() {
    this.checkForSecondaryActions();
  }
  componentDidLoad() {
    if (this.actionContainerRef) {
      window.requestAnimationFrame(() => {
        if (this.actionContainerRef && this.hasSecondaryActions) {
          this.actionContainerRef.addEventListener('transitionstart', () => (this.isTransitioning = true));
          this.actionContainerRef.addEventListener('transitionend', () => (this.isTransitioning = false));
          this.observer.observe(this.el, {
            characterData: true,
            subtree: true,
          });
          this.calculateWidth();
          this.isCollapsed = true;
        }
      });
    }
  }
  disconnectedCallback() {
    this.observer.disconnect();
  }
  render() {
    if (this.el.children.length <= 0)
      return null;
    return (h("nav", null, h("span", { class: "persistentActions" }, h("slot", { name: slots.persistentActions })), h("span", { class: {
        secondaryActions: true,
        hidden: !this.hasSecondaryActions,
      } }, h("stencila-button", { onClick: this.toggleActionMenu, icon: "more", color: "key", minimal: true, size: "xsmall", iconOnly: true, ariaLabel: "Toggle Action Menu" }), h("span", { class: {
        actionContainer: true,
        isAnimating: this.isAnimating,
        isCollapsed: this.isCollapsed,
      }, ref: (el) => (this.actionContainerRef = el), style: { '--max-width': this.width } }, h("slot", null)))));
  }
  get el() { return getElement(this); }
};
ActionMenu.style = {
  default: defaultActionMenuCss,
  material: materialActionMenuCss
};

const defaultNodeListCss = "*.sc-stencila-node-list-default,.sc-stencila-node-list-default:after,.sc-stencila-node-list-default:before{border:0 solid;-webkit-box-sizing:border-box;box-sizing:border-box}html.sc-stencila-node-list-default{font-size:16px}.hidden.sc-stencila-node-list-default{display:none}code.sc-stencila-node-list-default,code[class*=language-].sc-stencila-node-list-default,output.sc-stencila-node-list-default{font-family:monospace;font-family:var(--font-family-mono,monospace);font-size:75%}pre.sc-stencila-node-list-default{border:1px solid #cfd2e1;border-color:var(--color-neutral-100,#cfd2e1);border-radius:.25rem;margin:.5rem;overflow:auto;padding:.5rem}.sc-stencila-node-list-default-h,stencila-node-list.sc-stencila-node-list-default{display:block}.sc-stencila-node-list-default-h .hidden.sc-stencila-node-list-default+.sc-stencila-node-list-default:nth-child(2),.sc-stencila-node-list-default-h>.sc-stencila-node-list-default:first-child,stencila-node-list.sc-stencila-node-list-default .hidden.sc-stencila-node-list-default+.sc-stencila-node-list-default:nth-child(2),stencila-node-list.sc-stencila-node-list-default>.sc-stencila-node-list-default:first-child{border-top-width:0;margin-top:0;padding-top:0}.sc-stencila-node-list-default-h>.sc-stencila-node-list-default:last-child,stencila-node-list.sc-stencila-node-list-default>.sc-stencila-node-list-default:last-child{margin-bottom:0}.sc-stencila-node-list-default-h .hidden.sc-stencila-node-list-default,stencila-node-list.sc-stencila-node-list-default .hidden.sc-stencila-node-list-default{display:none}.sc-stencila-node-list-default-h .emptyContentMessage.sc-stencila-node-list-default,stencila-node-list.sc-stencila-node-list-default .emptyContentMessage.sc-stencila-node-list-default{color:#6e7591;color:var(--color-neutral-500,#6e7591);font-family:monospace;font-family:var(--font-family-mono,monospace);font-size:1rem;line-height:1.5rem}.sc-stencila-node-list-default-h stencila-code-error.sc-stencila-node-list-default,stencila-node-list.sc-stencila-node-list-default stencila-code-error.sc-stencila-node-list-default{border-width:0}.sc-stencila-node-list-default-h stencila-image-object.sc-stencila-node-list-default,stencila-node-list.sc-stencila-node-list-default stencila-image-object.sc-stencila-node-list-default{display:block;height:auto;max-width:100%}.sc-stencila-node-list-default-h .sc-stencila-node-list-default-s>*,stencila-node-list.sc-stencila-node-list-default-s>*,stencila-node-list .sc-stencila-node-list-default-s>*{margin:0;overflow:auto;padding:0}.sc-stencila-node-list-default-h .sc-stencila-node-list-default-s>*:first-child,stencila-node-list.sc-stencila-node-list-default-s>*:first-child,stencila-node-list .sc-stencila-node-list-default-s>*:first-child{margin-top:0}.sc-stencila-node-list-default-h .sc-stencila-node-list-default-s pre,stencila-node-list .sc-stencila-node-list-default-s pre{border-width:0;margin:0;padding:0}.sc-stencila-node-list-default-h .sc-stencila-node-list-default-s>*>:not(figcaption),stencila-node-list.sc-stencila-node-list-default-s>*>:not(figcaption),stencila-node-list .sc-stencila-node-list-default-s>*>:not(figcaption){margin-bottom:.75rem;margin-top:.75rem;padding-top:.75rem}.sc-stencila-node-list-default-h .sc-stencila-node-list-default-s>*>:not(figcaption):first-child,stencila-node-list.sc-stencila-node-list-default-s>*>:not(figcaption):first-child,stencila-node-list .sc-stencila-node-list-default-s>*>:not(figcaption):first-child{margin-top:0;padding-top:0}.sc-stencila-node-list-default-h .sc-stencila-node-list-default-s>*>:not(figcaption):last-child,stencila-node-list.sc-stencila-node-list-default-s>*>:not(figcaption):last-child,stencila-node-list .sc-stencila-node-list-default-s>*>:not(figcaption):last-child{margin-bottom:0}";

const materialNodeListCss = "*.sc-stencila-node-list-material,.sc-stencila-node-list-material:after,.sc-stencila-node-list-material:before{border:0 solid;-webkit-box-sizing:border-box;box-sizing:border-box}html.sc-stencila-node-list-material{font-size:16px}.hidden.sc-stencila-node-list-material{display:none}code.sc-stencila-node-list-material,code[class*=language-].sc-stencila-node-list-material,output.sc-stencila-node-list-material{font-family:monospace;font-family:var(--font-family-mono,monospace);font-size:75%}pre.sc-stencila-node-list-material{border:1px solid #cfd2e1;border-color:var(--color-neutral-100,#cfd2e1);border-radius:.25rem;margin:.5rem;overflow:auto;padding:.5rem}.sc-stencila-node-list-material-h,stencila-node-list.sc-stencila-node-list-material{display:block}.sc-stencila-node-list-material-h .hidden.sc-stencila-node-list-material+.sc-stencila-node-list-material:nth-child(2),.sc-stencila-node-list-material-h>.sc-stencila-node-list-material:first-child,stencila-node-list.sc-stencila-node-list-material .hidden.sc-stencila-node-list-material+.sc-stencila-node-list-material:nth-child(2),stencila-node-list.sc-stencila-node-list-material>.sc-stencila-node-list-material:first-child{border-top-width:0;margin-top:0;padding-top:0}.sc-stencila-node-list-material-h>.sc-stencila-node-list-material:last-child,stencila-node-list.sc-stencila-node-list-material>.sc-stencila-node-list-material:last-child{margin-bottom:0}.sc-stencila-node-list-material-h .hidden.sc-stencila-node-list-material,stencila-node-list.sc-stencila-node-list-material .hidden.sc-stencila-node-list-material{display:none}.sc-stencila-node-list-material-h .emptyContentMessage.sc-stencila-node-list-material,stencila-node-list.sc-stencila-node-list-material .emptyContentMessage.sc-stencila-node-list-material{color:#6e7591;color:var(--color-neutral-500,#6e7591);font-family:monospace;font-family:var(--font-family-mono,monospace);font-size:1rem;line-height:1.5rem}.sc-stencila-node-list-material-h stencila-code-error.sc-stencila-node-list-material,stencila-node-list.sc-stencila-node-list-material stencila-code-error.sc-stencila-node-list-material{border-width:0}.sc-stencila-node-list-material-h stencila-image-object.sc-stencila-node-list-material,stencila-node-list.sc-stencila-node-list-material stencila-image-object.sc-stencila-node-list-material{display:block;height:auto;max-width:100%}.sc-stencila-node-list-material-h .sc-stencila-node-list-material-s>*,stencila-node-list.sc-stencila-node-list-material-s>*,stencila-node-list .sc-stencila-node-list-material-s>*{margin:0;overflow:auto;padding:0}.sc-stencila-node-list-material-h .sc-stencila-node-list-material-s>*:first-child,stencila-node-list.sc-stencila-node-list-material-s>*:first-child,stencila-node-list .sc-stencila-node-list-material-s>*:first-child{margin-top:0}.sc-stencila-node-list-material-h .sc-stencila-node-list-material-s pre,stencila-node-list .sc-stencila-node-list-material-s pre{border-width:0;margin:0;padding:0}.sc-stencila-node-list-material-h .sc-stencila-node-list-material-s>*>:not(figcaption),stencila-node-list.sc-stencila-node-list-material-s>*>:not(figcaption),stencila-node-list .sc-stencila-node-list-material-s>*>:not(figcaption){margin-bottom:.75rem;margin-top:.75rem;padding-top:.75rem}.sc-stencila-node-list-material-h .sc-stencila-node-list-material-s>*>:not(figcaption):first-child,stencila-node-list.sc-stencila-node-list-material-s>*>:not(figcaption):first-child,stencila-node-list .sc-stencila-node-list-material-s>*>:not(figcaption):first-child{margin-top:0;padding-top:0}.sc-stencila-node-list-material-h .sc-stencila-node-list-material-s>*>:not(figcaption):last-child,stencila-node-list.sc-stencila-node-list-material-s>*>:not(figcaption):last-child,stencila-node-list .sc-stencila-node-list-material-s>*>:not(figcaption):last-child{margin-bottom:0}";

let OutputsList = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.emptyOutputMessage = 'No output to show';
    this.isEmpty = true;
    this.checkIfEmpty = () => {
      const slotted = getSlotByName(this.el)(['default', 'outputs']);
      if (slotted.length === 0) {
        this.isEmpty = true;
      }
      else {
        this.isEmpty = slotted.every((el) => {
          var _a;
          const content = (_a = el.innerHTML) === null || _a === void 0 ? void 0 : _a.trim();
          return content === '' || content === this.emptyOutputMessage;
        });
      }
    };
    this.childObserver = new MutationObserver(this.checkIfEmpty);
  }
  componentWillLoad() {
    this.checkIfEmpty();
    this.childObserver.observe(this.el, {
      childList: true,
      subtree: true,
    });
  }
  disconnectedCallback() {
  }
  render() {
    return (h(Host, null, h("slot", null), h("em", { class: { hidden: !this.isEmpty, emptyContentMessage: true } }, this.emptyOutputMessage)));
  }
  get el() { return getElement(this); }
};
OutputsList.style = {
  default: defaultNodeListCss,
  material: materialNodeListCss
};

export { ActionMenu as stencila_action_menu, OutputsList as stencila_node_list };

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