<!doctype html> <html> <head>

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

<title>paper-chip Demo</title>

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

<link rel="import" href="../paper-chip.html">
<link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
<link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
<link rel="import" href="../../paper-styles/paper-styles.html">
<link rel="import" href="../../paper-toast/paper-toast.html">
<link rel="import" href="../../paper-input/paper-input.html">
<link rel="import" href="../../iron-input/iron-input.html">
<link rel="import" href="avatars.html">

<style is="custom-style" include="demo-pages-shared-styles">
  demo-snippet {
    max-width: 760px;
  }
  #chip3 .icon {
    background-color: var(--default-primary-color);
  }
  #tags label {
    line-height: 40px;
  }
  #tags .tags-input {
    min-height: 32px;
    padding: 4px 0;
    z-index: 10;
  }
  .tags-input > paper-chip {
    z-index: 1;
    margin: 0 4px 0 0;
  }
</style>

</head> <body unresolved>

<h3>Removable chip with <code>iron-icon</code> and a secondary label</h3>
<demo-snippet>
  <template>
    <paper-chip removable>
      <iron-icon class="icon" icon="avatars:avatar-1"></iron-icon>
      <div class="label">John Doe</div>
      <div class="caption">doeboy@example.com</div>
    </paper-chip>
  </template>
  <paper-toast id="toast1" text="John Doe was removed!"></paper-toast>
</demo-snippet>

<h3>Same chip, with animated transition</h3>
<demo-snippet>
  <template>
    <paper-chip removable animated>
      <iron-icon class="icon" icon="avatars:avatar-1"></iron-icon>
      <div class="label">John Doe</div>
      <div class="caption">doeboy@example.com</div>
    </paper-chip>
  </template>
  <paper-toast text="John Doe was removed!"></paper-toast>
</demo-snippet>

<h3>Animated chip with more content</h3>
<demo-snippet>
  <template>
    <paper-chip removable animated>
      <iron-icon class="icon" icon="avatars:avatar-13"></iron-icon>
      <div class="label">Jane Doe</div>
      <div class="caption">janedoe@example.com</div>
      <address>
        123 Avenue Way<br>
        Anytown, USA 12345<br>
        <br>
        555-123-4567
      </address>
    </paper-chip>
  </template>
</demo-snippet>

<h3>Chip with single letter instead of an icon</h3>
<demo-snippet>
  <template>
    <paper-chip>
      <div class="icon">P</div>
      <div class="label">Peter Parker</div>
      <div class="caption">pete@dailybugle.com</div>
    </paper-chip>
  </template>
</demo-snippet>

<h3>Single-line removable chip (does not open)</h3>
<demo-snippet>
  <template>
    <paper-chip removable single-line>
      <div class="label">Example Chip</div>
    </paper-chip>
  </template>
</demo-snippet>

<h3>Example chip input field using paper-input-container</h3>
<demo-snippet>
  <template>
    <template is="dom-bind" id="chipInputDemo">
      <paper-input-container id="tags">
        <label>Tags</label>
        <!-- a hidden iron-input holds the bind-value value for paper-input-container -->
        <input is="iron-input" type="hidden" bind-value="{{tagsString}}">
        <div class="tags-input layout horizontal wrap">
          <template is="dom-repeat" items="{{tags}}">
            <paper-chip removable single-line>
              <span class="label">{{item}}</span>
            </paper-chip>
          </template>
          <input id="tagInput" type="text" class="flex">
        </div>
      </paper-input-container>
    </template>
  </template>
</demo-snippet>

</body> <script>

var $ = document.querySelector.bind(document);
var $$ = document.querySelectorAll.bind(document);

document.addEventListener('WebComponentsReady', function() {
  var scope = $('#chipInputDemo');

  // setup all chips
  var chips = $$('paper-chip');
  function onRemoveChip() {
    var toast = this.parentNode.querySelector('paper-toast');
    if (toast) {
      toast.show();
    }
  }
  for (var i=0; i<chips.length; i++) {
    chips[i].addEventListener('remove', onRemoveChip);
    chips[i].style.zIndex = chips.length - i;
    chips[i].setAttribute('tabindex', i + 1);
  }

  // setup tags input
  scope.tags = [];

  var tagInput = $('#tagInput');
  tagInput.addEventListener('input', function(event) {
    var value = tagInput.value;
    if (value.slice(-1) === ' ') {
      scope.push('tags', value);
      value = '';
    }
    value = value.trim();
    scope.tagsString = scope.tags.join(' ') + value;
    tagInput.value = value;
  });
  tagInput.addEventListener('keydown', function(event) {
    if (tagInput.value === '' && event.code === 'Backspace') {
      scope.pop('tags');
      scope.tagsString = scope.tags.join(' ');
    } else if (tagInput.value && event.code === 'Enter') {
      scope.push('tags', tagInput.value.trim());
      tagInput.value = '';
    }
  });

});

</script> </html>