'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-df541290.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) {
    index.registerInstance(this, hostRef);
    this.optionHover = index.createEvent(this, "optionHover", 7);
    this.optionSelect = index.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 (index.h(index.Host, { onMouseDown: (e) => this.onSelect(e), onMouseOver: (e) => this.onHover(e) }, index.h("div", null, this.name), index.h("div", null, index.h("slot", null))));
  }
  get element() { return index.getElement(this); }
};
SmoothlyOption.style = styleCss;

exports.smoothly_option = SmoothlyOption;
