import { r as registerInstance, h } from './index-07845439.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"),
      h("smoothly-picker", { label: "filter", "empty-menu-label": "Sorry, we're out of options.", multiple: true, options: [
          { name: "Big Dog", value: "dog", aliases: ["WOFF"] },
          { name: "Cat Stevens", value: "cat", aliases: ["moew"] },
          { name: "Noble Pig", value: "pig" },
          { name: "Turtle Wax", value: "turtle" },
          { name: "Spider Man", value: "spider" },
          { name: "Phoenix Order", value: "phoenix" },
          { name: "Horse Back", value: "horse" },
          { name: "Unicorn Horn", value: "unicorn" },
          { name: "Talking Parrot", value: "parrot" },
          { name: "Hidden Dragon", value: "dragon" },
          { name: "Scary Kraken", value: "kraken" },
        ] }),
      h("br", null),
      h("smoothly-picker", { label: "filter", multiple: false, "max-menu-height": "200px", options: [
          { name: "Dog", value: "dog", aliases: ["WOFF"], description: "Woof 🐶" },
          { name: "Cat", value: "cat", aliases: ["moew"] },
          { name: "Pig", value: "pig" },
          { name: "Turtle", value: "turtle" },
          { name: "Spider", value: "spider" },
          { name: "Phoenix", value: "phoenix" },
          { name: "Horse", value: "horse" },
          { name: "Unicorn", value: "unicorn" },
          { name: "Parrot", value: "parrot" },
          { name: "Dragon", value: "dragon" },
          { name: "Kraken", value: "kraken" },
        ] }),
    ];
  }
};
SmoothlySelectDemo.style = styleCss;

export { SmoothlySelectDemo as smoothly_select_demo };
