import { r as registerInstance, i as createEvent, h, H as Host } from './index-c04b9ed5.js';

const selectCss = ".Select{cursor:pointer;display:inline-block;font-weight:500}.Select .Dropdown-button{align-items:center;border:solid 1px #dee3ea;border-radius:6px;display:inline-flex;justify-content:space-between;min-width:100px;padding:0.5em 1em}.Select .Dropdown-panel{padding:0.5em 0}.Select .Dropdown-arrow{margin-left:0.5em}.Select-option{--bg-alpha:0;background-color:rgba(0, 0, 0, var(--bg-alpha));padding:0.5em 1.5em}.Select-option:focus{--bg-alpha:0.025;outline:none}.Select-option--selected{--bg-alpha:0.05}.Select-option--selected:focus{--bg-alpha:0.075}@media (hover: hover){.Select-option:hover{--bg-alpha:0.025}.Select-option--selected:hover{--bg-alpha:0.075}}";

const SparkleSelect = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.selection = createEvent(this, "selection", 7);
    this.optionRenderer = (option) => option;
    this.select = (option) => {
      this.selected = option;
    };
    this.toOption = (option) => {
      const isSelected = this.selected === option;
      const classNames = {
        'Select-option': true,
        'Select-option--selected': isSelected
      };
      const handleClick = () => {
        this.select(option);
        this.dropdown.close();
      };
      const handleKeyUp = (event) => {
        if (event.key === 'Enter') {
          this.select(option);
          this.dropdown.focus();
        }
      };
      return (h("div", { class: classNames, role: "menuitemradio", "aria-checked": isSelected ? 'true' : 'false', tabindex: "0", onClick: handleClick, onKeyUp: handleKeyUp }, this.optionRenderer(option)));
    };
  }
  handleSelect(option) {
    this.selection.emit(option);
  }
  componentWillLoad() {
    this.selected = typeof this.initializer === 'function'
      ? this.initializer(this.options)
      : this.options[0];
  }
  hostData() {
    return {
      class: {
        'Select': true
      }
    };
  }
  __stencil_render() {
    return (h("sparkle-dropdown", { ref: el => { this.dropdown = el; }, label: this.optionRenderer(this.selected) }, this.options.map(this.toOption)));
  }
  static get watchers() { return {
    "selected": ["handleSelect"]
  }; }
  render() { return h(Host, this.hostData(), this.__stencil_render()); }
};
SparkleSelect.style = selectCss;

export { SparkleSelect as sparkle_select };
