<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title>vaadin-combo-box Object Items Examples</title>

  <script src="../../webcomponentsjs/webcomponents-lite.min.js"></script>

  <link rel="import" href="common.html">
</head>

<body unresolved>
  <div class="vertical-section-container centered">
    <nav class="vertical-section">
      <ul class="layout horizontal wrap">
        <li><a href="index.html">Basic Examples</a></li>
        <li><b>Object Items</b></li>
        <li><a href="advanced.html">Advanced Usage</a></li>
        <li><a href="external-filtering.html">Remote and Custom Filtering</a></li>
      </ul>
    </nav>

    <h3>Default Label and Value</h3>

    <demo-snippet>
      <template>
        <vaadin-combo-box id="numbers-box" label="Number"></vaadin-combo-box>
        <p>Selected item: <span id="selected-item"></span>.</p>
        <p>Value: <span id="value"></span>.</p>

        <script>
          var combobox = document.querySelector('#numbers-box');
          combobox.items = [
            {label: 'One', value: 1},
            {label: 'Two', value: 2},
            {label: 'Three', value: 3}
          ];

          combobox.addEventListener('selected-item-changed', function() {
            document.querySelector('#selected-item').innerHTML = JSON.stringify(combobox.selectedItem);
          });

          combobox.addEventListener('value-changed', function() {
            document.querySelector('#value').innerHTML = combobox.value;
          });

          combobox.value = 1;
        </script>
      </template>
    </demo-snippet>

    <h3>Setting Label and Value Path</h3>

    <demo-snippet>
      <template>
        <vaadin-combo-box id="elements-box" label="Element" item-label-path="name" item-value-path="symbol"></vaadin-combo-box>
        <p>Selected element name: <span id="element-name"></span>.</p>
        <p>Value: <span id="element-value"></span>.</p>

        <script>
          var combobox2 = document.querySelector('#elements-box');

          // elementsJson is an Array of Objects. Item object format:
          //   {name: 'Hydrogen', symbol: 'H', number: 1}
          combobox2.items = elementsJson;

          combobox2.addEventListener('selected-item-changed', function() {
            document.querySelector('#element-name').innerHTML = combobox2.selectedItem && combobox2.selectedItem.name;
          });

          combobox2.addEventListener('value-changed', function() {
            document.querySelector('#element-value').innerHTML = combobox2.value;
          });

          combobox2.value = 'C';
        </script>
      </template>
    </demo-snippet>

    <h3>Object Items with the Same Value</h3>

    <demo-snippet>
      <template>
        <vaadin-combo-box id="country-synonyms-box" label="Element"></vaadin-combo-box>
        <p>Selected Item: <span id="country-selected-item"></span>.</p>
        <p>Value: <span id="country-value"></span>.</p>

        <script>
          var countrySynonymsBox = document.querySelector('#country-synonyms-box');

          countrySynonymsBox.items = [
            {value: 'US', label: 'United States of America'},
            {value: 'US', label: 'U.S.A.'}
          ];

          countrySynonymsBox.addEventListener('selected-item-changed', function() {
            var selectedItemAsString = JSON.stringify(countrySynonymsBox.selectedItem);
            document.querySelector('#country-selected-item').innerText = selectedItemAsString;
          });

          countrySynonymsBox.addEventListener('value-changed', function() {
            document.querySelector('#country-value').innerText = countrySynonymsBox.value;
          });

          countrySynonymsBox.value = 'US'; // selects first matching item
        </script>
      </template>
    </demo-snippet>

  </div>
</body>

</html>
