import { r as registerInstance, h } from './index-aeac5cad.js';

const styleCss = ".sc-smoothly-select-demo-h{display:block}[hidden].sc-smoothly-select-demo-h{display:none}button.sc-smoothly-select-demo:focus{outline:none}";

const SmoothlySelectDemo = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.currencies = ["SEK", "EUR"];
    this.currency = "SEK";
  }
  alertf() {
    var _a;
    console.log(this.quantityElement);
    alert((_a = this.quantityElement) === null || _a === void 0 ? void 0 : _a.value);
  }
  handleSelectionChanged(event) {
    console.log("selectionChanged", event.detail);
  }
  render() {
    return [
      h("smoothly-select", { identifier: "currency" }, this.currencies.map(option => this.currency == option ? (h("option", { value: option, selected: true }, option)) : (h("option", { value: option }, option)))),
      h("smoothly-select", { identifier: "language" }, h("optgroup", { label: "Nordic" }, h("option", { value: "sv" }, "Swedish"), h("option", { value: "da", selected: true }, "Danish"), h("option", { value: "no" }, "Norwegian")), h("optgroup", { label: "Other" }, h("option", { value: "en" }, "English"))),
      h("smoothly-select", { identifier: "quantity", ref: e => (this.quantityElement = e) }, h("option", { value: "1" }, "1"), h("option", { value: "2" }, "2"), h("option", { value: "3" }, "3")),
      h("button", { onClick: () => this.alertf() }, "press here"),
    ];
  }
};
SmoothlySelectDemo.style = styleCss;

export { SmoothlySelectDemo as smoothly_select_demo };
