@neovici/cosmoz-omnitable 12.26.3 → 12.27.0

package/lib/cosmoz-omnitable-amount-range-input.js

@@ -2,10 +2,13 @@ import { _ } from '@neovici/cosmoz-i18next';
 import { PolymerElement } from '@polymer/polymer';
 import { html } from 'lit-html';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
+import '@neovici/cosmoz-input';
 import { rangeInputMixin } from './cosmoz-omnitable-range-input-mixin';
 import { polymerHauntedRender } from './polymer-haunted-render-mixin';
 
-class AmountRangeInput extends rangeInputMixin(polymerHauntedRender(PolymerElement)) {
+class AmountRangeInput extends rangeInputMixin(
+	polymerHauntedRender(PolymerElement),
+) {
 	static get properties() {
 		return {
 			/**
@@ -25,19 +28,20 @@ class AmountRangeInput extends rangeInputMixin(polymerHauntedRender(PolymerEleme
 			rates: { type: Object },
 			// trigger filter updates manually
 			autoupdate: { type: String, value: false },
-			_filterText: { type: String, computed: '_computeFilterText(filter.*, _formatters)' }
+			_filterText: {
+				type: String,
+				computed: '_computeFilterText(filter.*, _formatters)',
+			},
 		};
 	}
 
 	static get observers() {
-		return [
-			'_valuesChanged(autodetect, currency, values)'
-		];
+		return ['_valuesChanged(autodetect, currency, values)'];
 	}
 
 	// eslint-disable-next-line max-lines-per-function
 	render() {
-		const onOpenedChanged = event => {
+		const onOpenedChanged = (event) => {
 			this.headerFocused = event.detail.value;
 			this._onDropdownOpenedChanged(event);
 		};
@@ -49,46 +53,59 @@ class AmountRangeInput extends rangeInputMixin(polymerHauntedRender(PolymerEleme
 					display: block;
 				}
 			</style>
-			<cosmoz-clear-button @click=${ () => this.resetFilter() } ?visible=${ this.hasFilter() }></cosmoz-clear-button>
+			<cosmoz-clear-button
+				@click=${() => this.resetFilter()}
+				?visible=${this.hasFilter()}
+			></cosmoz-clear-button>
 			<paper-dropdown-menu
-				label=${ this.title }
-				placeholder=${ ifDefined(this._filterText) }
-				class="external-values-${ this.externalValues }"
-				title=${ this._tooltip }
+				label=${this.title}
+				placeholder=${ifDefined(this._filterText)}
+				class="external-values-${this.externalValues}"
+				title=${this._tooltip}
 				horizontal-align="right"
-				?opened=${ this.headerFocused }
-				@opened-changed=${ onOpenedChanged }
+				?opened=${this.headerFocused}
+				@opened-changed=${onOpenedChanged}
 			>
-				<div class="dropdown-content" slot="dropdown-content" style="padding: 15px; min-width: 150px;">
-					<h3 style="margin: 0;">${ this.title }</h3>
-					<paper-input
-						class=${ this._fromClasses }
+				<div
+					class="dropdown-content"
+					slot="dropdown-content"
+					style="padding: 15px; min-width: 150px;"
+				>
+					<h3 style="margin: 0;">${this.title}</h3>
+					<cosmoz-input
+						class=${this._fromClasses}
 						type="number"
-						label=${ _('Min amount') }
-						title=${ _('Minimum amount') }
-						.value=${ this._filterInput?.min }
-						@value-changed=${ event => {
-		this.set('_filterInput.min', event.detail.value);
-	} }
-						@blur=${ event => this._onBlur(event) }
-						@keydown=${ event => this._onKeyDown(event) }
-						min=${ this._toInputStringAmount(this._limit.fromMin) }
-						max=${ this._toInputStringAmount(this._limit.fromMax) }
-					><div slot="suffix" suffix>${ this.filter?.min?.currency }</div></paper-input>
-					<paper-input
-						class=${ this._toClasses }
+						title=${_('Minimum amount')}
+						label=${_('Min amount')}
+						.value=${this._filterInput?.min}
+						@value-changed=${(event) => {
+							this.set('_filterInput.min', event.detail.value);
+						}}
+						@blur=${(event) => this._onBlur(event)}
+						@keydown=${(event) => this._onKeyDown(event)}
+						min=${this._toInputStringAmount(this._limit.fromMin)}
+						max=${this._toInputStringAmount(this._limit.fromMax)}
+						><div slot="suffix" suffix>
+							${this.filter?.min?.currency}
+						</div></cosmoz-input
+					>
+					<cosmoz-input
+						class=${this._toClasses}
 						type="number"
-						label=${ _('Max amount') }
-						title=${ _('Maximum amount') }
-						.value=${ this._filterInput?.max }
-						@value-changed=${ event => {
-		this.set('_filterInput.max', event.detail.value);
-	} }
-						@blur=${ event => this._onBlur(event) }
-						@keydown=${ event => this._onKeyDown(event) }
-						min=${ this._toInputStringAmount(this._limit.toMin) }
-						max=${ this._toInputStringAmount(this._limit.toMax) }
-					><div slot="suffix" suffix>${ this.filter?.max?.currency }</div></paper-input>
+						title=${_('Maximum amount')}
+						label=${_('Max amount')}
+						.value=${this._filterInput?.max}
+						@value-changed=${(event) => {
+							this.set('_filterInput.max', event.detail.value);
+						}}
+						@blur=${(event) => this._onBlur(event)}
+						@keydown=${(event) => this._onKeyDown(event)}
+						min=${this._toInputStringAmount(this._limit.toMin)}
+						max=${this._toInputStringAmount(this._limit.toMax)}
+						><div slot="suffix" suffix>
+							${this.filter?.max?.currency}
+						</div></cosmoz-input
+					>
 				</div>
 			</paper-dropdown-menu>
 		`;
@@ -136,12 +153,17 @@ class AmountRangeInput extends rangeInputMixin(polymerHauntedRender(PolymerEleme
 	 * @param {Function} limitFunc The function used to limit the number (Math.min|Math.max)
 	 * @returns {Object|void} Value converted to Number or void
 	 */
-	toAmount(value, limit, limitFunc) { // eslint-disable-line max-statements
+	toAmount(value, limit, limitFunc) {
+		// eslint-disable-line max-statements
 		if (value == null || value === '') {
 			return;
 		}
 
-		if (typeof value !== 'object' || value.currency == null || value.currency === '') {
+		if (
+			typeof value !== 'object' ||
+			value.currency == null ||
+			value.currency === ''
+		) {
 			return null;
 		}
 
@@ -151,7 +173,7 @@ class AmountRangeInput extends rangeInputMixin(polymerHauntedRender(PolymerEleme
 		}
 		const amount = {
 			currency: value.currency,
-			amount: number
+			amount: number,
 		};
 
 		if (limitFunc == null || limit == null) {
@@ -215,14 +237,14 @@ class AmountRangeInput extends rangeInputMixin(polymerHauntedRender(PolymerEleme
 	getFormatter(currency, locale) {
 		const id = locale ? locale : '',
 			key = currency + id || '',
-			formatters = this._formatters = this._formatters || {};
+			formatters = (this._formatters = this._formatters || {});
 		if (formatters[key]) {
 			return formatters[key];
 		}
 
 		formatters[key] = new Intl.NumberFormat(locale || undefined, {
 			style: 'currency',
-			currency
+			currency,
 		});
 
 		return formatters[key];
@@ -239,8 +261,7 @@ class AmountRangeInput extends rangeInputMixin(polymerHauntedRender(PolymerEleme
 		if (amount == null) {
 			return '';
 		}
-		return this.getFormatter(amount.currency, this.locale)
-			.format(value.amount);
+		return this.getFormatter(amount.currency, this.locale).format(value.amount);
 	}
 
 	_amountValueChanged(event) {
@@ -251,11 +272,16 @@ class AmountRangeInput extends rangeInputMixin(polymerHauntedRender(PolymerEleme
 			amountValue = Number(value),
 			newValue = {
 				amount: amountValue,
-				currency: originalValue.currency
+				currency: originalValue.currency,
 			};
 
 		this.set(this.valuePath, newValue, item);
-		this._fireItemChangeEvent(item, this.valuePath, originalValue, this.renderValue.bind(this));
+		this._fireItemChangeEvent(
+			item,
+			this.valuePath,
+			originalValue,
+			this.renderValue.bind(this),
+		);
 	}
 
 	_toInputString(value) {
@@ -275,7 +301,9 @@ class AmountRangeInput extends rangeInputMixin(polymerHauntedRender(PolymerEleme
 		if (amount == null) {
 			return null;
 		}
-		const toCurrency = this.toNumber(amount.amount) * (rates[amount.currency] || 1) / (rates[this.currency] || 1);
+		const toCurrency =
+			(this.toNumber(amount.amount) * (rates[amount.currency] || 1)) /
+			(rates[this.currency] || 1);
 		return toCurrency.toFixed(2);
 	}
 
@@ -286,10 +314,11 @@ class AmountRangeInput extends rangeInputMixin(polymerHauntedRender(PolymerEleme
 		}
 		return this.toValue({
 			amount: number,
-			currency: property && this.get(['filter', property, 'currency']) || this.currency
+			currency:
+				(property && this.get(['filter', property, 'currency'])) ||
+				this.currency,
 		});
 	}
 }
 
-
 customElements.define('cosmoz-omnitable-amount-range-input', AmountRangeInput);

package/lib/cosmoz-omnitable-date-range-input.js

@@ -2,10 +2,13 @@ import { _ } from '@neovici/cosmoz-i18next';
 import { PolymerElement } from '@polymer/polymer';
 import { html } from 'lit-html';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
+import '@neovici/cosmoz-input';
 import { dateInputMixin } from './cosmoz-omnitable-date-input-mixin';
 import { polymerHauntedRender } from './polymer-haunted-render-mixin';
 
-class DateRangeInput extends dateInputMixin(polymerHauntedRender(PolymerElement)) {
+class DateRangeInput extends dateInputMixin(
+	polymerHauntedRender(PolymerElement),
+) {
 	// eslint-disable-next-line max-lines-per-function
 	render() {
 		return html`
@@ -15,36 +18,46 @@ class DateRangeInput extends dateInputMixin(polymerHauntedRender(PolymerElement)
 					display: block;
 				}
 			</style>
-			<cosmoz-clear-button @click=${ () => this.resetFilter() } ?visible=${ this.hasFilter() }></cosmoz-clear-button>
+			<cosmoz-clear-button
+				@click=${() => this.resetFilter()}
+				?visible=${this.hasFilter()}
+			></cosmoz-clear-button>
 			<paper-dropdown-menu
-				label=${ this.title }
-				placeholder=${ ifDefined(this._filterText) }
-				class="external-values-${ this.externalValues }"
-				title=${ this._tooltip }
+				label=${this.title}
+				placeholder=${ifDefined(this._filterText)}
+				class="external-values-${this.externalValues}"
+				title=${this._tooltip}
 				horizontal-align="right"
-				?opened=${ this.headerFocused }
-				@opened-changed=${ event => {
-		// TODO: check ots integration
-		this.headerFocused = event.detail.value;
-	} }>
-				<div class="dropdown-content" slot="dropdown-content" style="padding: 15px; min-width: 100px;">
-					<h3 style="margin: 0;">${ this.title }</h3>
-					<paper-input
+				?opened=${this.headerFocused}
+				@opened-changed=${(event) => {
+					// TODO: check ots integration
+					this.headerFocused = event.detail.value;
+				}}
+			>
+				<div
+					class="dropdown-content"
+					slot="dropdown-content"
+					style="padding: 15px; min-width: 100px;"
+				>
+					<h3 style="margin: 0;">${this.title}</h3>
+					<cosmoz-input
 						type="date"
-						label=${ _('From date') }
-						min=${ this._toInputString(this._limit.fromMin) }
-						max=${ this._toInputString(this._limit.fromMax) }
-						.value=${ this._filterInput?.min }
-						@value-changed=${ event => this.set('_filterInput.min', event.detail.value) }
-					></paper-input>
-					<paper-input
+						label=${_('From date')}
+						min=${this._toInputString(this._limit.fromMin)}
+						max=${this._toInputString(this._limit.fromMax)}
+						.value=${this._filterInput?.min}
+						@value-changed=${(event) =>
+							this.set('_filterInput.min', event.detail.value)}
+					></cosmoz-input>
+					<cosmoz-input
 						type="date"
-						label=${ _('Until date') }
-						min=${ this._toInputString(this._limit.toMin) }
-						max=${ this._toInputString(this._limit.toMax) }
-						.value=${ this._filterInput?.max }
-						@value-changed=${ event => this.set('_filterInput.max', event.detail.value) }
-					></paper-input>
+						label=${_('Until date')}
+						min=${this._toInputString(this._limit.toMin)}
+						max=${this._toInputString(this._limit.toMax)}
+						.value=${this._filterInput?.max}
+						@value-changed=${(event) =>
+							this.set('_filterInput.max', event.detail.value)}
+					></cosmoz-input>
 				</div>
 			</paper-dropdown-menu>
 		`;
@@ -77,5 +90,4 @@ class DateRangeInput extends dateInputMixin(polymerHauntedRender(PolymerElement)
 	}
 }
 
-
 customElements.define('cosmoz-omnitable-date-range-input', DateRangeInput);

package/lib/cosmoz-omnitable-datetime-range-input.js

@@ -5,7 +5,9 @@ import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { dateInputMixin } from './cosmoz-omnitable-date-input-mixin';
 import { polymerHauntedRender } from './polymer-haunted-render-mixin';
 
-class DatetimeRangeInput extends dateInputMixin(polymerHauntedRender(PolymerElement)) {
+class DatetimeRangeInput extends dateInputMixin(
+	polymerHauntedRender(PolymerElement),
+) {
 	// eslint-disable-next-line max-lines-per-function
 	render() {
 		return html`
@@ -16,34 +18,45 @@ class DatetimeRangeInput extends dateInputMixin(polymerHauntedRender(PolymerElem
 				}
 			</style>
 
-			<cosmoz-clear-button @click=${ () => this.resetFilter() } ?visible=${ this.hasFilter() }></cosmoz-clear-button>
+			<cosmoz-clear-button
+				@click=${() => this.resetFilter()}
+				?visible=${this.hasFilter()}
+			></cosmoz-clear-button>
 			<paper-dropdown-menu
-				label=${ this.title }
-				placeholder=${ ifDefined(this._filterText) }
-				class="external-values-${ this.externalValues }"
-				title=${ this._tooltip }
+				label=${this.title}
+				placeholder=${ifDefined(this._filterText)}
+				class="external-values-${this.externalValues}"
+				title=${this._tooltip}
 				horizontal-align="right"
-				?opened=${ this.headerFocused }
-				@opened-changed=${ event => this.set('headerFocused', event.detail.value) }>
-				<div class="dropdown-content" slot="dropdown-content" style="padding: 15px; min-width: 100px;">
-					<h3 style="margin: 0;">${ this.title }</h3>
+				?opened=${this.headerFocused}
+				@opened-changed=${(event) =>
+					this.set('headerFocused', event.detail.value)}
+			>
+				<div
+					class="dropdown-content"
+					slot="dropdown-content"
+					style="padding: 15px; min-width: 100px;"
+				>
+					<h3 style="margin: 0;">${this.title}</h3>
 					<cosmoz-datetime-input
-						date-label=${ _('From date') }
-						time-label=${ _('From time') }
-						min=${ this._toInputString(this._limit.fromMin) }
-						max=${ this._toInputString(this._limit.fromMax) }
-						step=${ this.filterStep }
-						.value=${ this._filterInput?.min }
-						@value-changed=${ event => this.set('_filterInput.min', event.detail.value) }
+						date-label=${_('From date')}
+						time-label=${_('From time')}
+						min=${this._toInputString(this._limit.fromMin)}
+						max=${this._toInputString(this._limit.fromMax)}
+						step=${this.filterStep}
+						.value=${this._filterInput?.min}
+						@value-changed=${(event) =>
+							this.set('_filterInput.min', event.detail.value)}
 					></cosmoz-datetime-input>
 					<cosmoz-datetime-input
-						date-label=${ _('To date') }
-						time-label=${ _('To time') }
-						min=${ this._toInputString(this._limit.toMin) }
-						max=${ this._toInputString(this._limit.toMax) }
-						step=${ this.filterStep }
-						.value=${ this._filterInput?.max }
-						@value-changed=${ event => this.set('_filterInput.max', event.detail.value) }
+						date-label=${_('To date')}
+						time-label=${_('To time')}
+						min=${this._toInputString(this._limit.toMin)}
+						max=${this._toInputString(this._limit.toMax)}
+						step=${this.filterStep}
+						.value=${this._filterInput?.max}
+						@value-changed=${(event) =>
+							this.set('_filterInput.max', event.detail.value)}
 					></cosmoz-datetime-input>
 				</div>
 			</paper-dropdown-menu>
@@ -65,11 +78,13 @@ class DatetimeRangeInput extends dateInputMixin(polymerHauntedRender(PolymerElem
 			month: 'numeric',
 			day: 'numeric',
 			hour: 'numeric',
-			minute: 'numeric'
+			minute: 'numeric',
 		};
 		return new Intl.DateTimeFormat(locale || undefined, timeFormatOption);
 	}
 }
 
-
-customElements.define('cosmoz-omnitable-datetime-range-input', DatetimeRangeInput);
+customElements.define(
+	'cosmoz-omnitable-datetime-range-input',
+	DatetimeRangeInput,
+);

package/lib/cosmoz-omnitable-number-range-input.js

@@ -2,33 +2,37 @@ import { _ } from '@neovici/cosmoz-i18next';
 import { PolymerElement } from '@polymer/polymer';
 import { html } from 'lit-html';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
+import '@neovici/cosmoz-input';
 import { rangeInputMixin } from './cosmoz-omnitable-range-input-mixin';
 import { polymerHauntedRender } from './polymer-haunted-render-mixin';
 
-class NumberRangeInput extends rangeInputMixin(polymerHauntedRender(PolymerElement)) {
+class NumberRangeInput extends rangeInputMixin(
+	polymerHauntedRender(PolymerElement),
+) {
 	static get properties() {
 		return {
 			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)'
+				computed:
+					'_computeFormatter(locale, minimumFractionDigits, maximumFractionDigits)',
 			},
 			// trigger filter updates manually
 			autoupdate: {
 				type: String,
-				value: false
+				value: false,
 			},
 			_filterText: {
 				type: String,
-				computed: '_computeFilterText(filter.*, formatter)'
-			}
+				computed: '_computeFilterText(filter.*, formatter)',
+			},
 		};
 	}
 
 	// eslint-disable-next-line max-lines-per-function
 	render() {
-		const onOpenedChanged = event => {
+		const onOpenedChanged = (event) => {
 			this.headerFocused = event.detail.value;
 			this._onDropdownOpenedChanged(event);
 		};
@@ -41,46 +45,51 @@ class NumberRangeInput extends rangeInputMixin(polymerHauntedRender(PolymerEleme
 				}
 			</style>
 
-			<cosmoz-clear-button @click=${ () => this.resetFilter() } ?visible=${ this.hasFilter() }></cosmoz-clear-button>
+			<cosmoz-clear-button
+				@click=${() => this.resetFilter()}
+				?visible=${this.hasFilter()}
+			></cosmoz-clear-button>
 			<paper-dropdown-menu
-				label=${ this.title }
-				placeholder=${ ifDefined(this._filterText) }
-				class="external-values-${ this.externalValues }"
-				title=${ this._tooltip }
+				label=${this.title}
+				placeholder=${ifDefined(this._filterText)}
+				class="external-values-${this.externalValues}"
+				title=${this._tooltip}
 				horizontal-align="right"
-				?opened=${ this.headerFocused }
-				@opened-changed=${ onOpenedChanged }
+				?opened=${this.headerFocused}
+				@opened-changed=${onOpenedChanged}
 			>
-				<div class="dropdown-content" slot="dropdown-content" style="padding: 15px; min-width: 100px;">
-					<h3 style="margin: 0;">${ this.title }</h3>
-					<paper-input
-						class=${ this._fromClasses }
+				<div
+					class="dropdown-content"
+					slot="dropdown-content"
+					style="padding: 15px; min-width: 100px;"
+				>
+					<h3 style="margin: 0;">${this.title}</h3>
+					<cosmoz-input
+						class=${this._fromClasses}
 						type="number"
-						label=${ _('From') }
-						.value=${ this._filterInput?.min }
-						@value-changed=${ event => {
-		this.set('_filterInput.min', event.detail.value);
-	} }
-						@input=${ event => this.onBadInputFloatLabel(event) }
-						@blur=${ event => this._onBlur(event) }
-						@keydown=${ event => this._onKeyDown(event) }
-						min=${ this._toInputString(this._limit.fromMin) }
-						max=${ this._toInputString(this._limit.fromMax) }
-					></paper-input>
-					<paper-input
-						class=${ this._toClasses }
+						label=${_('From')}
+						.value=${this._filterInput?.min}
+						@value-changed=${(event) => {
+							this.set('_filterInput.min', event.detail.value);
+						}}
+						@blur=${(event) => this._onBlur(event)}
+						@keydown=${(event) => this._onKeyDown(event)}
+						min=${this._toInputString(this._limit.fromMin)}
+						max=${this._toInputString(this._limit.fromMax)}
+					></cosmoz-input>
+					<cosmoz-input
+						class=${this._toClasses}
 						type="number"
-						label=${ _('To') }
-						.value=${ this._filterInput?.max }
-						@value-changed=${ event => {
-		this.set('_filterInput.max', event.detail.value);
-	} }
-						@input=${ event => this.onBadInputFloatLabel(event) }
-						@blur=${ event => this._onBlur(event) }
-						@keydown=${ event => this._onKeyDown(event) }
-						min=${ this._toInputString(this._limit.toMin) }
-						max=${ this._toInputString(this._limit.toMax) }
-					></paper-input>
+						label=${_('To')}
+						.value=${this._filterInput?.max}
+						@value-changed=${(event) => {
+							this.set('_filterInput.max', event.detail.value);
+						}}
+						@blur=${(event) => this._onBlur(event)}
+						@keydown=${(event) => this._onKeyDown(event)}
+						min=${this._toInputString(this._limit.toMin)}
+						max=${this._toInputString(this._limit.toMax)}
+					></cosmoz-input>
 				</div>
 			</paper-dropdown-menu>
 		`;
@@ -88,7 +97,7 @@ class NumberRangeInput extends rangeInputMixin(polymerHauntedRender(PolymerEleme
 
 	_computeFormatter(locale, minimumFractionDigits, maximumFractionDigits) {
 		const options = {
-			localeMatcher: 'best fit' // chrome expects this when using custom options
+			localeMatcher: 'best fit', // chrome expects this when using custom options
 		};
 		if (minimumFractionDigits !== null) {
 			options.minimumFractionDigits = minimumFractionDigits;
@@ -99,26 +108,6 @@ class NumberRangeInput extends rangeInputMixin(polymerHauntedRender(PolymerEleme
 		return new Intl.NumberFormat(locale || undefined, options);
 	}
 
-	/**
-	 * Check if label should float based on validity
-	 *
-	 * Number inputs can have allowed characters that aren't numbers (-,e) and won't
-	 * trigger a value change and thus not float the label.
-	 * However, the validity will report badInput so we can trigger a label float by
-	 * setting it to something truthy but still not visible.
-	 * Fixed in paper-input 3.x
-	 *
-	 * @param {Event} event KeyboardEvent
-	 * @returns {void}
-	 */
-	onBadInputFloatLabel(event) {
-		const paperInput = event.currentTarget;
-		if (paperInput == null ||	 paperInput.tagName !== 'PAPER-INPUT') {
-			return;
-		}
-		paperInput.placeholder = paperInput.$.nativeInput.validity.badInput ? ' ' : '';
-	}
-
 	/**
 	 *	 Get the comparable value of an item.
 	 *
@@ -155,5 +144,4 @@ class NumberRangeInput extends rangeInputMixin(polymerHauntedRender(PolymerEleme
 	}
 }
 
-
 customElements.define('cosmoz-omnitable-number-range-input', NumberRangeInput);

package/lib/cosmoz-omnitable-range-input-mixin.js

@@ -308,7 +308,7 @@ export const rangeInputMixin = base => // eslint-disable-line max-lines-per-func
 
 		_onKeyDown(event) {
 			const input = event.currentTarget,
-				inputs = Array.from(input.parentElement.querySelectorAll('paper-input')),
+				inputs = Array.from(input.parentElement.querySelectorAll('cosmoz-input')),
 				nextInput = inputs[inputs.findIndex(i => i === input) + 1],
 				isLastInput = !nextInput,
 				isFirstInput = inputs[0] === input;
@@ -349,7 +349,7 @@ export const rangeInputMixin = base => // eslint-disable-line max-lines-per-func
 			}
 
 			// focus the first input after the dropdown is visible
-			setTimeout(() => currentTarget.querySelector('paper-input').focus(), 100);
+			setTimeout(() => currentTarget.querySelector('cosmoz-input').focus(), 100);
 		}
 
 

package/lib/cosmoz-omnitable-time-range-input.js

@@ -2,6 +2,7 @@ import { _ } from '@neovici/cosmoz-i18next';
 import { PolymerElement } from '@polymer/polymer';
 import { html } from 'lit-html';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
+import '@neovici/cosmoz-input';
 import { dateInputMixin } from './cosmoz-omnitable-date-input-mixin';
 import { polymerHauntedRender } from './polymer-haunted-render-mixin';
 
@@ -28,20 +29,20 @@ class TimeRangeInput extends dateInputMixin(polymerHauntedRender(PolymerElement)
 			>
 				<div class="dropdown-content" slot="dropdown-content" style="padding: 15px; min-width: 100px;">
 					<h3 style="margin: 0;">${ this.title }</h3>
-					<paper-input
+					<cosmoz-input
 						type="time"
 						label=${ _('From time') }
 						step=${ this.filterStep }
 						.value=${ this._filterInput.min }
 						@value-changed=${ event => this.set('_filterInput.min', event.detail.value) }
-					></paper-input>
-					<paper-input
+					></cosmoz-input>
+					<cosmoz-input
 						type="time"
 						label=${ _('Until time') }
 						step=${ this.filterStep }
 						.value=${ this._filterInput.max }
 						@value-changed=${ event => this.set('_filterInput.max', event.detail.value) }
-					></paper-input>
+					></cosmoz-input>
 				</div>
 			</paper-dropdown-menu>
 		`;