fd-polymer-tags.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../core-icon/core-icon.html">
<link rel="import" href="../core-icons/core-icons.html">

<polymer-element name="fd-tags" attributes="tags">
<template>
	<style>

		:host {
			display: block;
			width: 100%;
		}

		.fd-tag{
			background-color: CornflowerBlue;
			color: white;
			border-radius: 5px;
			border:none;
			margin: 0px 5px;
			padding: 0px;
		}

		.fd-tm-icon{
		border-radius: 50%;
        border: 2px solid #444;
        color: #444;
		}
	</style>
	<div layout horizontal wrap>
		<content select="header"></content>
		<template repeat="{{tag,index in tags}}">
			<div class="fd-tag">
		<input class="fd-tag" id="{{index}}" type="text" value="{{tag}}" 
		on-focus="" on-blur="{{updateTag}}" size="{{tag.length}}"/>
		<core-icon id="{{tag}}" icon="delete" on-tap="{{delTag}}" data="{{tag}}">             
        </core-icon>
        </div>
		</template>
		<core-icon class="fd-tm-icon" icon="add" on-tap="{{addTag}}">             
        </core-icon>
	</div>
</template>
<script>
	Polymer("fd-tags",{
 
	delTag: function(e, d ,target){
		toBeRemoved = target.attributes['data'].value;
		var i = this.tags.indexOf(toBeRemoved);
		if(i != -1) {
			this.tags.splice(i, 1);
		}
	},
	addTag: function(){
        this.tags.push(" ");
	},
	updateTag: function(e,d,target){
		var id = target.attributes['id'].value;
		this.tags[id]=target.value;
	}


	});

</script>
</polymer-element>