@zywave/zui-picker/docs/demo.html

## Installation

<link rel="stylesheet" href="../../../../node_modules/@zywave/zui-app-styles/dist/zui-app-styles.css" />
<link rel="stylesheet" href="../../../../node_modules/@zywave/zui-base-styles/dist/zui-base-styles.css" />

<script type="module" defer>
  if (!customElements.get("zui-picker")) {
    import("../dist/index.js");
  }
  if (!customElements.get("zui-search")) {
    import("../../zui-search/dist/index.js");
  }
  if (!customElements.get("zui-select")) {
    import("../../zui-select/dist/index.js");
  }
  if (!customElements.get("zui-pager")) {
    import("../../zui-search/dist/index.js");
  }
  import("../../../../scripts/demo/demo.js");
</script>

<section component="zui-picker" heading="Basic picker">
  <zui-picker id="toplevel">
    <div slot="search">
      <zui-search id="search" placeholder="e.g., Asterioids">
        <zui-select>
          <zui-option>Single player</zui-option>
          <zui-option>Multi player</zui-option>
        </zui-select>
      </zui-search>
    </div>
    <div slot="results-count">
      <span>Total arcade games: 134</span>
    </div>
    <div id="wrapper" slot="picker-items">
      <zui-picker-item>
        Fix-It Felix Jr.
        <zui-button><zui-icon icon="zui-check"></zui-icon>Play</zui-button>
      </zui-picker-item>
      <zui-picker-item>
        Ms. Pac-Man
        <zui-button>Play</zui-button>
      </zui-picker-item>
      <zui-picker-item>
        Centipede
        <zui-button>Play</zui-button>
      </zui-picker-item>
      <zui-picker-item>
        Galaga
        <zui-button>Play</zui-button>
      </zui-picker-item>
      <zui-picker-item>
        Sugar Rush
        <zui-button>Play</zui-button>
      </zui-picker-item>
    </div>
    <div slot="pager">
      <zui-pager current-page="1" page-size="20" total-items="399" page-input></zui-pager>
    </div>
  </zui-picker>
</section>

<section component="zui-picker" heading="No results picker">
  <zui-picker>
    <div id="search" slot="search">
      <zui-search id="search" placeholder="e.g., Asterioids" query="Call of Duty"></zui-search>
    </div>
    <div slot="results-count">
      <span>Total items: 0</span>
    </div>
    <div class="no-results" slot="picker-items">
      <p>No results found.</p>
    </div>
    <div slot="pager">
      <zui-pager total-count="0" page-size="10"></zui-pager>
    </div>
  </zui-picker>
</section>