import { r as registerInstance, j as createEvent, h, k as Host, g as getElement } from './index-07845439.js';

const styleCss = ":host{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;padding:0.5em 1em}:host([data-highlight]){background-color:rgb(var(--smoothly-primary-color));color:rgb(var(--smoothly-primary-contrast))}:host([data-highlight]) div:last-child{color:rgba(var(--smoothly-primary-contrast), 0.8)}:host div:last-child{color:rgba(var(--smoothly-default-contrast), 0.8);font-style:italic}";

const SmoothlyOption = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.optionHover = createEvent(this, "optionHover", 7);
    this.optionSelect = createEvent(this, "optionSelect", 7);
    this.dataHighlight = false;
  }
  onHover(event) {
    this.optionHover.emit({ name: this.name, value: this.value });
  }
  onSelect(event) {
    if (this.value)
      this.optionSelect.emit({ name: this.name, value: this.value });
    else
      throw `smoothly-option ${this.element.innerHTML} lacks value-property and can therefore not be selected`;
  }
  render() {
    return (h(Host, { onMouseDown: (e) => this.onSelect(e), onMouseOver: (e) => this.onHover(e) }, h("div", null, this.name), h("div", null, h("slot", null))));
  }
  get element() { return getElement(this); }
};
SmoothlyOption.style = styleCss;

export { SmoothlyOption as smoothly_option };
