cosmoz-omnitable-item.html

<link rel="import" href="../shadycss/apply-shim.html">
<link rel="import" href="../polymer/polymer-element.html"/>

<link rel="import" href="../iron-flex-layout/iron-flex-layout.html" />
<link rel="import" href="../paper-item/paper-item-shared-styles.html" />

<dom-module id="cosmoz-omnitable-item">
	<template>
		<style include="paper-item-shared-styles">
			/* polymer-cli v1.7.x linter breaks with empty line */
		</style>
		<style>
			:host {
				@apply --layout-horizontal;
				@apply --layout-center;
				@apply --paper-font-subhead;

				@apply --paper-item;
				white-space: nowrap;
			}
		</style>
		<span>[[ label ]]</span>
	</template>
	<script>
		window.Cosmoz = window.Cosmoz || {};

		class OmnitableItem extends Polymer.Element {
			static get is() {
				return 'cosmoz-omnitable-item';
			}

			static get properties() {
				return {
					label: {
						type: String,
						observer: '_labelChanged'
					}
				};
			}

			// HACK: ensure paper-dropdown-menu updates current selected item label after translation change
			// See https://github.com/PolymerElements/paper-dropdown-menu/issues/197
			_labelChanged() {
				if (!this.classList.contains('iron-selected')) {
					return;
				}

				const detail = { item: this };
				this.dispatchEvent(new CustomEvent('iron-deselect', { detail }));
				this.dispatchEvent(new CustomEvent('iron-select', { detail }));
			}
		}
		customElements.define(OmnitableItem.is, OmnitableItem);

		Cosmoz.OmnitableItem = OmnitableItem;
	</script>
</dom-module>