import { Component, h, Host } from '@stencil/core';
const demo1 = `<dvn-select
  leaned
>
  <dvn-select-option>
    Select a brand
  </dvn-select-option>
  <dvn-select-option
    value="audi"
  >
    Audi
  </dvn-select-option>
  <dvn-select-option
    value="chrysler"
  >
    Chrysler
  </dvn-select-option>
  <dvn-select-option
    value="volvo"
  >
    Volvo
  </dvn-select-option>
</dvn-select>`;
const demo2 = `<dvn-select
  feedback="error"
  leaned
  value="volvo"
>
  <dvn-select-option
    value="audi"
  >
    Audi
  </dvn-select-option>
  <dvn-select-option
    value="chrysler"
  >
    Chrysler
  </dvn-select-option>
  <dvn-select-option
    value="volvo"
  >
    Volvo
  </dvn-select-option>
</dvn-select>`;
const demo3 = `<dvn-select
  enable-search
  feedback="warning"
  leaned
>
  <dvn-select-option
    value="audi"
  >
    Audi
  </dvn-select-option>
  <dvn-select-option
    value="bmw"
  >
    BMW
  </dvn-select-option>
  <dvn-select-option
    value="chrysler"
  >
    Chrysler
  </dvn-select-option>
  <dvn-select-option
    value="mercedes"
  >
    Mercedes
  </dvn-select-option>
  <dvn-select-option
    value="volvo"
  >
    Volvo
  </dvn-select-option>
</dvn-select>`;
export class ShowcaseSelect {
  render() {
    return (h(Host, null,
      h("dvn-card", { leaned: true },
        h("div", { class: "d-flex" },
          h("dvn-component-demo", { domString: demo1 }),
          h("dvn-component-demo", { domString: demo2 }),
          h("dvn-component-demo", { domString: demo3 })))));
  }
  static get is() { return "showcase-select"; }
}
