feat: replace paper-input with cosmoz-input

cosmoz-omnitable-column-amount.js

@@ -1,5 +1,5 @@
 /* eslint-disable no-return-assign */
-import '@polymer/paper-input/paper-input';
+import '@neovici/cosmoz-input';
 import '@polymer/paper-dropdown-menu/paper-dropdown-menu';
 import './ui-helpers/cosmoz-clear-button';
 
@@ -9,7 +9,16 @@ import { html } from 'lit-html';
 import { columnMixin } from './cosmoz-omnitable-column-mixin';
 import { defaultComputeSource } from './lib/utils-data';
 import './lib/cosmoz-omnitable-amount-range-input';
-import { getComparableValue, getCurrency, applySingleFilter, getString, getInputString, toAmount, toHashString, fromHashString } from './lib/utils-amount';
+import {
+	getComparableValue,
+	getCurrency,
+	applySingleFilter,
+	getString,
+	getInputString,
+	toAmount,
+	toHashString,
+	fromHashString,
+} from './lib/utils-amount';
 import { get } from '@polymer/polymer/lib/utils/path';
 
 /**
@@ -29,13 +38,12 @@ class OmnitableColumnAmount extends columnMixin(PolymerElement) {
 			rates: { type: Object, notify: true },
 			width: { type: String, value: '70px' },
 			cellClass: { type: String, value: 'amount-cell align-right' },
-			headerCellClass: { type: String, value: 'amount-header-cell' }
+			headerCellClass: { type: String, value: 'amount-header-cell' },
 		};
 	}
 
 	getFilterFn(column, filter) {
-		const
-			min = getComparableValue({ ...column, valuePath: 'min' }, filter),
+		const min = getComparableValue({ ...column, valuePath: 'min' }, filter),
 			max = getComparableValue({ ...column, valuePath: 'max' }, filter);
 
 		if (min == null && max == null) {
@@ -64,8 +72,7 @@ class OmnitableColumnAmount extends columnMixin(PolymerElement) {
 		if (filter == null) {
 			return;
 		}
-		const
-			min = toAmount(rates, filter.min),
+		const min = toAmount(rates, filter.min),
 			max = toAmount(rates, filter.max);
 
 		if (min == null && max == null) {
@@ -86,51 +93,52 @@ class OmnitableColumnAmount extends columnMixin(PolymerElement) {
 
 		return {
 			min: fromHashString(matches[1]),
-			max: fromHashString(matches[2])
+			max: fromHashString(matches[2]),
 		};
 	}
 
 	renderCell(column, { item }) {
-		return html`<span>${ column.getString(column, item) }</span>`;
+		return html`<span>${column.getString(column, item)}</span>`;
 	}
 
 	renderEditCell(column, { item }, onItemChange) {
-		const onChange = event => onItemChange({
-			amount: event.target.value,
-			currency: get(item, column.valuePath)?.currency
-		});
-
-		return html`<paper-input no-label-float type="number" @change=${ onChange } .value=${ getInputString(column, item) }>
-			<div slot="suffix">${ getCurrency(column, item) }</div>
-		</paper-input>`;
+		const onChange = (event) =>
+			onItemChange({
+				amount: event.target.value,
+				currency: get(item, column.valuePath)?.currency,
+			});
+
+		return html`<cosmoz-input
+			no-label-float
+			type="number"
+			@change=${onChange}
+			.value=${getInputString(column, item)}
+		>
+			<div slot="suffix">${getCurrency(column, item)}</div>
+		</cosmoz-input>`;
 	}
 
 	renderHeader(
-		{ title,
-			min,
-			max,
-			locale,
-			rates,
-			currency,
-			autoupdate,
-			autodetect },
+		{ title, min, max, locale, rates, currency, autoupdate, autodetect },
 		{ filter },
 		setState,
-		source
+		source,
 	) {
 		return html`<cosmoz-omnitable-amount-range-input
-			.title=${ title }
-			.filter=${ filter }
-			.values=${ source }
-			.rates=${ rates }
-			.min=${ min }
-			.max=${ max }
-			.locale=${ locale }
-			.currency=${ currency }
-			.autoupdate=${ autoupdate }
-			.autodetect=${ autodetect }
-			@filter-changed=${ ({ detail: { value }}) => setState(state => ({ ...state, filter: value })) }
-			@header-focused-changed=${ ({ detail: { value }}) => setState(state => ({ ...state, headerFocused: value })) }
+			.title=${title}
+			.filter=${filter}
+			.values=${source}
+			.rates=${rates}
+			.min=${min}
+			.max=${max}
+			.locale=${locale}
+			.currency=${currency}
+			.autoupdate=${autoupdate}
+			.autodetect=${autodetect}
+			@filter-changed=${({ detail: { value } }) =>
+				setState((state) => ({ ...state, filter: value }))}
+			@header-focused-changed=${({ detail: { value } }) =>
+				setState((state) => ({ ...state, headerFocused: value }))}
 		></cosmoz-omnitable-amount-range-input>`;
 	}
 

cosmoz-omnitable-column-autocomplete.js

@@ -20,7 +20,7 @@ import { get } from '@polymer/polymer/lib/utils/path';
 
 export const getComparableValue = (
 	{ valuePath, textProperty, valueProperty },
-	item
+	item,
 ) => {
 	const property = textProperty ? strProp(textProperty) : prop(valueProperty),
 		values = array(valuePath && get(item, valuePath)).map(property);
@@ -33,7 +33,7 @@ export const getComparableValue = (
  * @appliesMixin columnMixin
  */
 class OmnitableColumnAutocomplete extends listColumnMixin(
-	columnMixin(PolymerElement)
+	columnMixin(PolymerElement),
 ) {
 	static get properties() {
 		return {
@@ -63,12 +63,12 @@ class OmnitableColumnAutocomplete extends listColumnMixin(
 
 	renderEditCell(column, { item }, onItemChange) {
 		const onChange = (event) => onItemChange(event.target.value);
-		return html`<paper-input
+		return html`<cosmoz-input
 			no-label-float
 			type="text"
 			@change=${onChange}
 			.value=${getString(column, item)}
-		></paper-input>`;
+		></cosmoz-input>`;
 	}
 
 	renderHeader(column, { filter, query }, setState, source) {
@@ -89,12 +89,13 @@ class OmnitableColumnAutocomplete extends listColumnMixin(
 			.onText=${onText(setState)}
 			>${when(
 				column.loading,
-				() => html`<paper-spinner-lite
-					style="width: 20px; height: 20px; flex:none;"
-					suffix
-					slot="suffix"
-					active
-				></paper-spinner-lite>`
+				() =>
+					html`<paper-spinner-lite
+						style="width: 20px; height: 20px; flex:none;"
+						suffix
+						slot="suffix"
+						active
+					></paper-spinner-lite>`,
 			)}</cosmoz-autocomplete-ui
 		>`;
 	}
@@ -105,5 +106,5 @@ class OmnitableColumnAutocomplete extends listColumnMixin(
 }
 customElements.define(
 	'cosmoz-omnitable-column-autocomplete',
-	OmnitableColumnAutocomplete
+	OmnitableColumnAutocomplete,
 );

cosmoz-omnitable-column-date.js

@@ -1,5 +1,5 @@
 /* eslint-disable no-return-assign */
-import '@polymer/paper-input/paper-input';
+import '@neovici/cosmoz-input';
 import '@polymer/paper-dropdown-menu/paper-dropdown-menu';
 
 import './ui-helpers/cosmoz-clear-button';
@@ -88,12 +88,12 @@ class OmnitableColumnDate extends columnMixin(PolymerElement) {
 	renderEditCell(column, { item }, onItemChange) {
 		const onChange = event => onItemChange(fromInputString(event.target.value));
 
-		return html`<paper-input
+		return html`<cosmoz-input
 			no-label-float
 			type="date"
 			@change=${ onChange }
 			.value=${ getInputString(column, item) }
-		></paper-input>`;
+		></cosmoz-input>`;
 	}
 
 	renderHeader(

cosmoz-omnitable-column-datetime.js

@@ -96,7 +96,7 @@ class OmnitableColumnDatetime extends columnMixin(PolymerElement) {
 
 	renderEditCell(column, { item }, onItemChange) {
 		const onChange = event => onItemChange(fromInputString(event.target.value));
-		return html`<paper-input no-label-float type="text" @change=${ onChange } .value=${ getString(column, item) }></paper-input>`;
+		return html`<cosmoz-input no-label-float type="text" @change=${ onChange } .value=${ getString(column, item) }></cosmoz-input>`;
 	}
 
 	// eslint-disable-next-line max-lines-per-function

cosmoz-omnitable-column-number.js

@@ -1,4 +1,4 @@
-import '@polymer/paper-input/paper-input';
+import '@neovici/cosmoz-input';
 import '@polymer/paper-dropdown-menu/paper-dropdown-menu';
 import './ui-helpers/cosmoz-clear-button';
 
@@ -9,10 +9,16 @@ import { columnMixin } from './cosmoz-omnitable-column-mixin';
 
 import './lib/cosmoz-omnitable-number-range-input';
 import { defaultComputeSource } from './lib/utils-data';
-import { applySingleFilter, getComparableValue, getInputString, getString, toHashString, toNumber } from './lib/utils-number';
+import {
+	applySingleFilter,
+	getComparableValue,
+	getInputString,
+	getString,
+	toHashString,
+	toNumber,
+} from './lib/utils-number';
 import { get } from '@polymer/polymer/lib/utils/path';
 
-
 /**
  * @polymer
  * @customElement
@@ -30,13 +36,12 @@ class OmnitableColumnNumber extends columnMixin(PolymerElement) {
 			minWidth: { 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
+			minimumFractionDigits: { type: Number, value: null }, // browser default 0 for numbers, currency-specific or 2 for currency
 		};
 	}
 
 	getFilterFn(column, filter) {
-		const
-			min = getComparableValue({ ...column, valuePath: 'min' }, filter),
+		const min = getComparableValue({ ...column, valuePath: 'min' }, filter),
 			max = getComparableValue({ ...column, valuePath: 'max' }, filter);
 
 		if (min == null && max == null) {
@@ -86,44 +91,55 @@ class OmnitableColumnNumber extends columnMixin(PolymerElement) {
 
 		return {
 			min: toNumber(matches[1]),
-			max: toNumber(matches[2])
+			max: toNumber(matches[2]),
 		};
 	}
 
 	renderCell(column, { item }) {
-		return html`<div class="omnitable-cell-number">${ getString(column, item) }</div>`;
+		return html`<div class="omnitable-cell-number">
+			${getString(column, item)}
+		</div>`;
 	}
 
 	renderEditCell(column, { item }, onItemChange) {
-		const onChange = event => onItemChange(event.target.value);
-
-		return html`<paper-input no-label-float type="number" @change=${ onChange } .value=${ getInputString(column, item) }></paper-input>`;
+		const onChange = (event) => onItemChange(event.target.value);
+
+		return html`<cosmoz-input
+			no-label-float
+			type="number"
+			@change=${onChange}
+			.value=${getInputString(column, item)}
+		></cosmoz-input>`;
 	}
 
 	renderHeader(
-		{ title,
+		{
+			title,
 			min,
 			max,
 			locale,
 			maximumFractionDigits,
 			minimumFractionDigits,
-			autoupdate },
+			autoupdate,
+		},
 		{ filter },
 		setState,
-		source
+		source,
 	) {
 		return html`<cosmoz-omnitable-number-range-input
-			.title=${ title }
-			.filter=${ filter }
-			.values=${ source }
-			.min=${ min }
-			.max=${ max }
-			.locale=${ locale }
-			.maximumFractionDigits=${ maximumFractionDigits }
-			.minimumFractionDigsits=${ minimumFractionDigits }
-			.autoupdate=${ autoupdate }
-			@filter-changed=${ ({ detail: { value }}) => setState(state => ({ ...state, filter: value })) }
-			@header-focused-changed=${ ({ detail: { value }}) => setState(state => ({ ...state, headerFocused: value })) }
+			.title=${title}
+			.filter=${filter}
+			.values=${source}
+			.min=${min}
+			.max=${max}
+			.locale=${locale}
+			.maximumFractionDigits=${maximumFractionDigits}
+			.minimumFractionDigsits=${minimumFractionDigits}
+			.autoupdate=${autoupdate}
+			@filter-changed=${({ detail: { value } }) =>
+				setState((state) => ({ ...state, filter: value }))}
+			@header-focused-changed=${({ detail: { value } }) =>
+				setState((state) => ({ ...state, headerFocused: value }))}
 		></cosmoz-omnitable-number-range-input>`;
 	}