ir-select-item.html

<!--
@license
Copyright (c) 2015 Igor Rubinovich <igor.rubinovich@gmail.com>. All rights reserved.
This code may only be used under the MIT license found at http://opensource.org/licenses/MIT
-->

<!--
# ir-select-item

# Single item elements for ir-select
Part of ir-select, tagging-style multiselect box for Polymer 1.0
-->
<dom-module id="ir-select-item">
  <template>
    <style>
	:host {
		margin : 0;
		padding : 0
		transition : all 1s;
	}

        @media (max-width: 600px) {
          h1.paper-font-display1 {
            font-size: 24px;
          }
        }

	iron-icon {
		width : 15px;
		height : 15px;
		color : #555;
		transition : all .1s;
		border-radius : 15px;
	}
	iron-icon:hover {
		color : #333;
	}
	.ir-select-item-default {
		border : 1px inset #eee;
		margin-right : 3px;
		transition : all .05s;
		display : inline-block;
		padding : 4px 8px;
        background: #fff;
	}
	.ir-select-item-focus {
		border : 1px solid #aaa;
		transform : translate(-1px,-1px);
		box-shadow : 0px 0px 1px #aaa;
	}
	:host .remove
	{
		transition : .3s;
		transform-origin : 0% 50%;
		transform : scaleX(0);
		alpha : .7;
	}

    </style>
		<span id="container" class="ir-select-item-default">
			<slot></slot>
			<iron-icon id="close" on-click="close" icon='cancel'></iron-icon>
		</span>
  </template>
</dom-module>
<script>
(function () {
	Polymer({
		is : 'ir-select-item',
		properties : {
			/** value of the item */
			value: { type : String,	value : '',	notify : true },
			/** label of the item */
			label: { type : String,	value : '',	notify : true, observer : "_labelChanged"  },
		},

/*
Fired when close is called or the close icon is clicked.
@event item-close
*/

/*
Fired when ir-select-item is attached to DOM.
@event item-attached
*/

		/** Close the label - only fires the item-close event */
		close :	function close()
		{
			this.blur();
			this.$.container.classList.add('remove');
			Polymer.dom.flush();

			this.fire('item-close', this);
		},
		_labelChanged : function() {
			Polymer.dom(this).innerHTML = this.label;
			//console.log('setting label', this.label);
		},
		/**
		* Get object representation of the item.

		* @param {string} labelPath object path to label, defaults to 'label'.
		* @param {string} valuePath object path to value, defaults to 'value'.
		* @return {Object} item label and value at labelPath and valuePath respectively
		*/
		toObject: function (labelPath, valuePath) {
			var res = {};
			this.set(labelPath || 'label', this.label, res);
			this.set(valuePath || 'value', this.value, res);

			return res;
		},
		/** Adds `ir-select-item-focus` class to the element. */
		focus: function() {
			this.$.container.classList.add('ir-select-item-focus');
			Polymer.dom.flush();
		},

		/** Removes `ir-select-item-focus` class from the element. */
		blur: function() {
			this.$.container.classList.remove('ir-select-item-focus')
		},
		ready : function() {
			var content = Polymer.dom(this.root).querySelector('content');
			var preset = Polymer.dom(content).getDistributedNodes()[0];

			if(preset && !this.label)
				this.label = preset.textContent;

			this.fire('item-attached', this, { cancelable : true });
		}
	});

})();


</script>