tag-item.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="../iron-icon/iron-icon.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">
<link rel="import" href="../iron-icons/iron-icons.html">

<!--
tag-item is a tag element used by tags-input to show tags with a closed button.

    <tag-item></tag-item>

@demo
-->
<dom-module id="tag-item">

  <style>
    :host {
      display: block;
      box-sizing: border-box;
      font-family: 'Roboto', 'Noto', sans-serif;
    }    
    /*.tag-value{
      margin-top: 11px;     
    }*/
    .tag-item-container{
      /*background-color: var(--light-primary-color);*/
      background-color: #4d97eb;
      /*opacity: 0.95;*/
      color: white;
      text-shadow: 0 0 0 #ffffff;
      border-radius: 20px;
      float:left;
      margin-left:1px;
      margin-right:1px;
      margin-bottom:1px;
      padding-left:10px;
    }
    
    .large{
 
      font-size:18px;
    }
   
    .large paper-icon-button::shadow #icon{
        width: 22px;
        height: 22px;
    }

    .medium{
      font-size:14px;
      /* font-weight:400 !important; */
    }
    .medium paper-icon-button::shadow #icon{
        width: 16px;
        height: 16px;
    }
    .small{
      font-size:12px;
    }
    .small paper-icon-button::shadow #icon{
        width: 14px;
        height: 14px;
    }
    .paper-icon-button-0 {
        width: auto !important;
        height: auto !important;
        padding: 2px !important;
        margin-left: -2px;
    }

  </style>

  <template>
      <div style$="[[_containerColor(tagColor, fontColor)]]" class$="[[_containerClass(size)]]">
        <span class="tag-value" style="vertical-align: middle;">[[tagvalue]]</span>
        <template is="dom-if" if="[[enableRemove]]">
          <paper-icon-button on-tap="_removeItem" icon="icons:cancel"></paper-icon-button>
        </template>
        <template is="dom-if" if="[[!enableRemove]]">
          <paper-icon-button style="width:16px;height:16px;visibility:hidden;" on-tap="remove" icon="icons:cancel"></paper-icon-button>
        </template>
      </div>
  </template>

</dom-module>

<script>

  Polymer({
    is: 'tag-item',
    properties: {
      /**
      * index of the tag
      */
       index:Number,
      /**
      * size of the tags, possible values: small, medium, large
      */
       size:{
        type:String,
        value:'medium'
       },
       /**
       * CSS color of tag
       */
       tagColor:String, 
       /**
       * CSS color of text and remove button
       */
       fontColor:String, 
       /**
       * Boolean flag to indicate if enable remove operation
       */
       enableRemove:{
        type:Boolean,
        value:true
      }
      ,
      /**
      * value of the tag
      */
       tagvalue:String,
      /**
      * value of the tags
      */
       tags:{
        type:Array,
        notify: true
      },
    },
    /**
     * _containerColor is the internal method to compute background style
     *
     */
     _containerColor:function(tagColor, fontColor){
      var styles = []
      if (typeof(tagColor) != "undefined"){
        styles.push("background-color:" + tagColor);
      }
      if (typeof(fontColor) != "undefined"){
        styles.push("color:" + fontColor);
      }
      return styles.join(";");
     },
    /**
     * _containerClass is the internal method to compute size css name
     *
     */
     _containerClass:function(size){
       return size + " tag-item-container";
     },
    /**
     * _removeItem is the internal method to remove a tag from the tags list
     *
     * @param {object} event object
     */
    _removeItem: function(e){
      if (this.enableRemove == false){
        return;
      }
      var parent = e.target.parentElement.parentElement.parentElement;
      var index = parent.index;
      this.tags.splice(index,1);
      this.tags = this.tags.slice();  
    }

  });

</script>