import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
import { O as ORDER_VALUES } from './constants.js';

const snkSelectBoxCss = "ez-combo-box{width:100px;--ez-text-input__margin-bottom:0px}.grid-config-combo{--ez-text-input--height:28px;--ez-text-input__input--background-color:#fff;--ez-text-input__input--border-color:#dce0e8}";

const SelectBox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
    this.ezChange = createEvent(this, "ezChange", 7);
    this.selectedOption = ORDER_VALUES.none;
    this.preventAutoFocus = false;
  }
  render() {
    return (h("ez-combo-box", { class: "grid-config-combo ez-input--inverted", label: "", suppressSearch: true, value: this.selectedOption, enabled: true, canShowError: false, suppressEmptyOption: true, preventAutoFocus: this.preventAutoFocus }, Object.keys(ORDER_VALUES).map((key) => {
      return h("option", { value: ORDER_VALUES[key].value }, ORDER_VALUES[key].label);
    })));
  }
  static get assetsDirs() { return ["../assets"]; }
  static get style() { return snkSelectBoxCss; }
}, [1, "snk-select-box", {
    "selectedOption": [1, "selected-option"],
    "preventAutoFocus": [4, "prevent-auto-focus"]
  }]);
function defineCustomElement() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["snk-select-box"];
  components.forEach(tagName => { switch (tagName) {
    case "snk-select-box":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, SelectBox);
      }
      break;
  } });
}

export { SelectBox as S, defineCustomElement as d };
