cosmoz-omnitable-column.html

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

<link rel="import" href="cosmoz-omnitable-column-mixin.html">
<link rel="import" href="../iron-icon/iron-icon.html"/>
<link rel="import" href="../paper-input/paper-input.html"/>
<link rel="import" href="ui-helpers/cosmoz-clear-button.html">

<dom-module id="cosmoz-omnitable-column">
	<template>
		<template class="cell">
			<span class="default-column">[[ getString(item, valuePath) ]]</span>
		</template>

		<template class="edit-cell">
			<paper-input no-label-float type="text" on-change="_valueChanged" value="[[ getString(item, valuePath) ]]">
			</paper-input>
		</template>

		<template class="header">
			<paper-input label="[[ title ]]" value="{{ filter }}" focused="{{ headerFocused }}">
				<cosmoz-clear-button suffix slot="suffix" visible="[[ hasFilter(filter.*) ]]" light on-click="resetFilter"></cosmoz-clear-button>
			</paper-input>
		</template>
	</template>
	<script>
		window.Cosmoz = window.Cosmoz || {};

		/**
		 * @polymer
		 * @customElement
		 * @appliesMixin Cosmoz.OmnitableColumnMixin
		 */
		class OmnitableColumn extends Cosmoz.OmnitableColumnMixin(Polymer.Element) {
			static get is() {
				return 'cosmoz-omnitable-column';
			}

			static get properties() {
				return {
					minWidth: {
						type: String,
						value: '55px'
					},

					editMinWidth: {
						type: String,
						value: '55px'
					}
				};
			}

			_serializeFilter(filter = this.filter) {
				return filter || null;
			}

			_deserializeFilter(obj) {
				return obj || null;
			}

			resetFilter() {
				this.filter = null;
			}
		}
		customElements.define(OmnitableColumn.is, OmnitableColumn);

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