paper-tags.html

<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-input/paper-input.html">
<link rel="import" href="../paper-badge/paper-badge.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">
<link rel="import" href="../iron-icons/iron-icons.html">
<link rel="import" href="../iron-icon/iron-icon.html">
<link rel="import" href="paper-tags-mixin.html">
<!-- 
An element for setting  displaying a single tag

### Example : 
    
    <paper-tags label-path="label" items='[{"id":1, "l" :"me", "label":"hello"},{"id":2, "label":"new"}]'></paper-tags>

### Styling

The following custom properties and mixins are available for styling:

Custom property | Description | Default
----------------|-------------|----------
`--paper-tags` | Mixin applied to the host | `{}`
`--paper-tags-item` | Mixin applied to the .paper-tag-item | `{}`
`--paper-tag-margin` | margin between tags | `3px`
`--paper-tag-focus-color` | the tag border color | `--default-primary-color`
`--paper-tag-text-color` | the tag text color | `--secondary-text-color`


@group Paper Elements
@element paper-input
@demo demo/index.html
-->
<dom-module id="paper-tags">

  <template>
  <style>
  [hidden] {
    display: none !important;
  }

  :host {
    display: block;
    @apply --paper-font-common-base;
    @apply --paper-tags;
  }
  
  div.paper-tag-item {
    margin-bottom: var(--paper-tag-margin, 3px);
    border: 1px solid var(--paper-tag-focus-color, var(--default-primary-color));
    font-size: 13px;
    color: var(--paper-tag-text-color, var(--secondary-text-color));
    border-radius: 4px;
    @apply --paper-tag-item;
  }
  
  .paper-tag-item:last-of-type {
    margin-right: var(--paper-tag-margin, 3px);
  }
  
  paper-icon-button {
    color: var(--paper-tag-focus-color,var(--default-primary-color));
    width: 20px;
    height: 20px;
    padding: 0;
  }
  
  .paper-tag-item-label {
    padding: var(--paper-tag-margin, 3px);
  }
  
  .paper-tag-item {
    display: inline-block;
  }
  </style>
    <template is="dom-repeat" id="tagRepeat" items="[[items]]">
      <div class$="paper-tag-item [[_computeClass(item, classAccessor)]]">
        <span class="paper-tag-item-label">[[_computeLabel(item, labelPath)]]</span>
        <paper-icon-button icon="icons:close" hidden$="[[preventRemoveTag]]" on-tap="_removeTag"></paper-icon-button>
        <paper-icon-button icon="[[_computeIcon(item, iconAccessor)]]" hidden$="[[!preventRemoveTag]]"></paper-icon-button>
      </div>
    </template>
  </template>
</dom-module>
<script>
class PaperTags extends PaperTagsMixin(Polymer.Element) {
	static get is() {
	    return 'paper-tags'
	}
	static get properties() {
	    return {
		    /**
		     * `readonly`prevents tags to be removed
		     */
		    readonly: Boolean,
		    
		    /**
		     * `items` the Array of tags
		     */
		    items: {
		      type: Array,
		      notify: true,
		      value: function() {
		        return [];
		      }
		    }
  		}
	}
	
	_computeIcon(item, iconAccessor) {
	  return item[iconAccessor] || this.icon;
	}
	
	_computeClass(item, classAccessor) {
	  return item[classAccessor] || this.itemClass;
	}
	
	_computeLabel(item, labelPath) {
	  return item[labelPath] || item;
	}
	
	_removeTag(event) {
	  if (this.readonly) {
	    return;
	  }
	  event.detail.isRemoved = true;
	  var model = event.model,
	    index = this.items.indexOf(model.item);
	
	  if (index > -1) {
	    event.stopPropagation();
	    var remove_func = function() {
		      this.splice('items', index, 1);
	    };
	    this._paper_tag_remove_item = Polymer.Debouncer.debounce(
	       this._paper_tag_remove_item, // initially undefined
	       Polymer.Async.timeOut.after(10),remove_func);
	    // this.items = this.items.slice();
	    // this.fire('tag-removed', model.item);
	  }
	}
};
customElements.define(PaperTags.is, PaperTags);

</script>