cosmoz-omnitable-column-number.html

<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">

<link rel="import" href="../paper-input/paper-input.html">
<link rel="import" href="../paper-dropdown-menu/paper-dropdown-menu.html">

<link rel="import" href="../cosmoz-i18next/cosmoz-i18next.html">

<link rel="import" href="ui-helpers/cosmoz-clear-button.html">
<link rel="import" href="cosmoz-omnitable-column-behavior.html">
<link rel="import" href="cosmoz-omnitable-column-range-behavior.html">

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

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

		<template class="header">
			<cosmoz-clear-button on-click="resetFilter" visible="[[ hasFilter(filter.*) ]]"></cosmoz-clear-button>
			<paper-dropdown-menu label="[[ title ]]" placeholder="[[ _filterText ]]" title="[[ _tooltip ]]"
					horizontal-align="[[ preferredDropdownHorizontalAlign ]]" opened="{{ headerFocused }}">
				<div class="dropdown-content" slot="dropdown-content" style="padding: 15px; min-width: 100px;">
					<h3 style="margin: 0;">[[ title ]]</h3>
					<paper-input type="number" label="[[ _('From', t) ]]" value="{{ _filterInput.min }}"
						min="[[ _toInputString(_limit.fromMin) ]]" max="[[ _toInputString(_limit.fromMax) ]]">
					</paper-input>
					<paper-input type="number" label="[[ _('To', t) ]]" value="{{ _filterInput.max }}"
						min="[[ _toInputString(_limit.toMin) ]]" max="[[ _toInputString(_limit.toMax) ]]">
					</paper-input>
				</div>
			</paper-dropdown-menu>
		</template>
	</template>
	<script>
		Polymer({
			is: 'cosmoz-omnitable-column-number',

			behaviors: [
				Cosmoz.OmnitableColumnBehavior,
				Cosmoz.TranslatableBehavior,
				Cosmoz.RangeColumnBehavior
			],

			properties: {
				cellClass: {
					type: String,
					value: 'number-cell align-right'
				},
				width: {
					type: String,
					value: '30px'
				},
				editWidth: {
					type: String,
					value: '30px'
				},
				headerCellClass: {
					type: String,
					value: 'number-header-cell'
				},
				maximumFractionDigits: {
					type: Number,
					value: null
				},
				minimumFractionDigits: {
					type: Number,
					value: null // browser default 0 for numbers, currency-specific or 2 for currency
				},
				formatter: {
					type: Object,
					computed: '_computeFormatter(locale, minimumFractionDigits, maximumFractionDigits)'
				},
				_filterText: {
					type: String,
					computed: '_computeFilterText(filter.*, formatter)'
				}
			},

			_computeFormatter(locale, minimumFractionDigits, maximumFractionDigits) {
				const options = {
					localeMatcher: 'best fit' // chrome expects this when using custom options
				};
				if (minimumFractionDigits !== null) {
					options.minimumFractionDigits = minimumFractionDigits;
				}
				if (maximumFractionDigits !== null) {
					options.maximumFractionDigits = maximumFractionDigits;
				}
				return new Intl.NumberFormat(locale || undefined, options);
			},

			renderValue(value, formatter = this.formatter) {
				const number = this.toNumber(value);
				if (number == null) {
					return;
				}
				return formatter.format(number);
			},
		});
	</script>
</dom-module>