From d61fa5fbc2ad73c8cf504b594c8a0a10403c198b Mon Sep 17 00:00:00 2001
From: Meghea Iulian <iulian.meghea@gmail.com>
Date: Tue, 21 Nov 2023 13:33:35 +0200
Subject: [PATCH] feat: replace paper-input with cosmoz-input

---
 cosmoz-omnitable-column-amount.js            |  84 ++++----
 cosmoz-omnitable-column-autocomplete.js      |  23 +--
 cosmoz-omnitable-column-date.js              |   6 +-
 cosmoz-omnitable-column-datetime.js          |   2 +-
 cosmoz-omnitable-column-number.js            |  66 ++++---
 cosmoz-omnitable-column-time.js              |  56 +++---
 cosmoz-omnitable-column.js                   |   7 +-
 demo/editable-demo.html                      |   6 +-
 docs/documentation.md                        |   2 +-
 lib/cosmoz-omnitable-amount-range-input.js   | 135 ++++++++-----
 lib/cosmoz-omnitable-date-range-input.js     |  68 ++++---
 lib/cosmoz-omnitable-datetime-range-input.js |  69 ++++---
 lib/cosmoz-omnitable-number-range-input.js   |   5 +-
 lib/cosmoz-omnitable-range-input-mixin.js    |   4 +-
 lib/cosmoz-omnitable-time-range-input.js     |   9 +-
 package-lock.json                            | 196 ++++++++-----------
 package.json                                 |   2 -
 test/integration/column-number.test.js       |   6 +-
 18 files changed, 405 insertions(+), 341 deletions(-)

diff --git a/cosmoz-omnitable-column-amount.js b/cosmoz-omnitable-column-amount.js
index 8745676e..70ea9257 100644
--- a/cosmoz-omnitable-column-amount.js
+++ b/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>`;
 	}
 
diff --git a/cosmoz-omnitable-column-autocomplete.js b/cosmoz-omnitable-column-autocomplete.js
index b8433203..bbc3c3d7 100644
--- a/cosmoz-omnitable-column-autocomplete.js
+++ b/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,
 );
diff --git a/cosmoz-omnitable-column-date.js b/cosmoz-omnitable-column-date.js
index d2ea9e0b..16c5c6c9 100644
--- a/cosmoz-omnitable-column-date.js
+++ b/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(
diff --git a/cosmoz-omnitable-column-datetime.js b/cosmoz-omnitable-column-datetime.js
index 6e9fbcec..0b97d6ef 100644
--- a/cosmoz-omnitable-column-datetime.js
+++ b/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
diff --git a/cosmoz-omnitable-column-number.js b/cosmoz-omnitable-column-number.js
index aa1a1830..396d339f 100644
--- a/cosmoz-omnitable-column-number.js
+++ b/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>`;
 	}
 
diff --git a/cosmoz-omnitable-column-time.js b/cosmoz-omnitable-column-time.js
index b3a91b12..d9bf55fe 100644
--- a/cosmoz-omnitable-column-time.js
+++ b/cosmoz-omnitable-column-time.js
@@ -1,6 +1,6 @@
 /* eslint-disable no-return-assign */
 import '@polymer/paper-dropdown-menu/paper-dropdown-menu';
-import '@polymer/paper-input/paper-input';
+import '@neovici/cosmoz-input';
 
 import './ui-helpers/cosmoz-clear-button';
 
@@ -8,7 +8,15 @@ import { PolymerElement } from '@polymer/polymer/polymer-element';
 import { html } from 'lit-html';
 
 import { columnMixin } from './cosmoz-omnitable-column-mixin';
-import { getComparableValue, getString, toXlsxValue, applySingleFilter, toDate, toHashString, fromHashString } from './lib/utils-time';
+import {
+	getComparableValue,
+	getString,
+	toXlsxValue,
+	applySingleFilter,
+	toDate,
+	toHashString,
+	fromHashString,
+} from './lib/utils-time';
 import './lib/cosmoz-omnitable-time-range-input';
 import { defaultComputeSource } from './lib/utils-data';
 
@@ -32,13 +40,12 @@ class OmnitableColumnTime extends columnMixin(PolymerElement) {
 			 * 1 => full seconds
 			 * 0.1 => milliseconds
 			 */
-			filterStep: { type: String, value: '1' }
+			filterStep: { type: String, value: '1' },
 		};
 	}
 
 	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) {
@@ -88,7 +95,7 @@ class OmnitableColumnTime extends columnMixin(PolymerElement) {
 
 		return {
 			min: fromHashString(matches[1]),
-			max: fromHashString(matches[2])
+			max: fromHashString(matches[2]),
 		};
 	}
 
@@ -97,30 +104,33 @@ class OmnitableColumnTime extends columnMixin(PolymerElement) {
 	}
 
 	renderEditCell(column, { item }, onItemChange) {
-		const onChange = event => onItemChange(event.target.value);
-		return html`<paper-input no-label-float type="text" @change=${ onChange } .value=${ getString(column, item) }></paper-input>`;
+		const onChange = (event) => onItemChange(event.target.value);
+		return html`<cosmoz-input
+			no-label-float
+			type="text"
+			@change=${onChange}
+			.value=${getString(column, item)}
+		></cosmoz-input>`;
 	}
 
 	renderHeader(
-		{ title,
-			min,
-			max,
-			locale,
-			filterStep },
+		{ title, min, max, locale, filterStep },
 		{ filter },
 		setState,
-		source
+		source,
 	) {
 		return html`<cosmoz-omnitable-time-range-input
-			.title=${ title }
-			.filter=${ filter }
-			.values=${ source }
-			.min=${ min }
-			.max=${ max }
-			.locale=${ locale }
-			.filterStep=${ filterStep }
-			@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}
+			.filterStep=${filterStep}
+			@filter-changed=${({ detail: { value } }) =>
+				setState((state) => ({ ...state, filter: value }))}
+			@header-focused-changed=${({ detail: { value } }) =>
+				setState((state) => ({ ...state, headerFocused: value }))}
 		></cosmoz-omnitable-time-range-input>`;
 	}
 
diff --git a/cosmoz-omnitable-column.js b/cosmoz-omnitable-column.js
index e652dd3f..200ef16a 100644
--- a/cosmoz-omnitable-column.js
+++ b/cosmoz-omnitable-column.js
@@ -1,6 +1,5 @@
 /* eslint-disable no-return-assign */
-import '@polymer/iron-icon/iron-icon';
-import '@polymer/paper-input/paper-input';
+import '@neovici/cosmoz-input';
 import './ui-helpers/cosmoz-clear-button';
 
 import {
@@ -13,7 +12,7 @@ import { html } from 'lit-html';
 
 const onChange = (setState) => (event) =>
 		setState((state) => {
-			// skip the event emitted during paper-input initialization
+			// skip the event emitted during cosmoz-input initialization
 			if (state.inputValue === undefined && event.target.value === '') {
 				return state;
 			}
@@ -76,7 +75,7 @@ class OmnitableColumn extends columnMixin(PolymerElement) {
 
 	renderHeader(column, { filter, inputValue, headerFocused }, setState) {
 		return html`<cosmoz-input
-			.label=${column.title}
+			label=${column.title}
 			.value=${inputValue ?? filter}
 			@value-changed=${onChange(setState)}
 			focused=${headerFocused}
diff --git a/demo/editable-demo.html b/demo/editable-demo.html
index d1137953..d2fc8b4e 100644
--- a/demo/editable-demo.html
+++ b/demo/editable-demo.html
@@ -237,13 +237,13 @@ <h3>Cosmoz omnitable demo</h3>
 
 				renderEditValue(column, { item }, onItemChange) {
 					const onChange = (event) => onItemChange(event.target.value);
-					return html`<paper-input
+					return html`<cosmoz-input
 						no-label-float
 						type="number"
 						step="0.1"
-						@change=${onChange}
+						@value-changed=${onChange}
 						.value=${getInputString(column, item)}
-					></paper-input>`;
+					></cosmoz-input>`;
 				}
 			}
 			customElements.define(XPage.is, XPage);
diff --git a/docs/documentation.md b/docs/documentation.md
index d3eb2645..1a4d7915 100644
--- a/docs/documentation.md
+++ b/docs/documentation.md
@@ -134,7 +134,7 @@ For `cosmoz-omnitable-column`
 
 ```html
 <template>
-   <paper-input label="[[title]]" value="{{filter}}"></paper-input>
+   <cosmoz-input label="[[title]]" value="{{filter}}"></cosmoz-input>
 </template>
 ```
 
diff --git a/lib/cosmoz-omnitable-amount-range-input.js b/lib/cosmoz-omnitable-amount-range-input.js
index b391ce53..d5bdd020 100644
--- a/lib/cosmoz-omnitable-amount-range-input.js
+++ b/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);
diff --git a/lib/cosmoz-omnitable-date-range-input.js b/lib/cosmoz-omnitable-date-range-input.js
index 5578d88a..14834c08 100644
--- a/lib/cosmoz-omnitable-date-range-input.js
+++ b/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);
diff --git a/lib/cosmoz-omnitable-datetime-range-input.js b/lib/cosmoz-omnitable-datetime-range-input.js
index 794304d8..b7720d4d 100644
--- a/lib/cosmoz-omnitable-datetime-range-input.js
+++ b/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,
+);
diff --git a/lib/cosmoz-omnitable-number-range-input.js b/lib/cosmoz-omnitable-number-range-input.js
index a839741d..3a43cadc 100644
--- a/lib/cosmoz-omnitable-number-range-input.js
+++ b/lib/cosmoz-omnitable-number-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 { rangeInputMixin } from './cosmoz-omnitable-range-input-mixin';
 import { polymerHauntedRender } from './polymer-haunted-render-mixin';
 
@@ -66,7 +67,7 @@ class NumberRangeInput extends rangeInputMixin(
 					<cosmoz-input
 						class=${this._fromClasses}
 						type="number"
-						.label=${_('From')}
+						label=${_('From')}
 						.value=${this._filterInput?.min}
 						@value-changed=${(event) => {
 							this.set('_filterInput.min', event.detail.value);
@@ -79,7 +80,7 @@ class NumberRangeInput extends rangeInputMixin(
 					<cosmoz-input
 						class=${this._toClasses}
 						type="number"
-						.label=${_('To')}
+						label=${_('To')}
 						.value=${this._filterInput?.max}
 						@value-changed=${(event) => {
 							this.set('_filterInput.max', event.detail.value);
diff --git a/lib/cosmoz-omnitable-range-input-mixin.js b/lib/cosmoz-omnitable-range-input-mixin.js
index 57f6879a..d338051f 100644
--- a/lib/cosmoz-omnitable-range-input-mixin.js
+++ b/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, cosmoz-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, cosmoz-input').focus(), 100);
+			setTimeout(() => currentTarget.querySelector('cosmoz-input').focus(), 100);
 		}
 
 
diff --git a/lib/cosmoz-omnitable-time-range-input.js b/lib/cosmoz-omnitable-time-range-input.js
index 05fe85e6..b414d83f 100644
--- a/lib/cosmoz-omnitable-time-range-input.js
+++ b/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>
 		`;
diff --git a/package-lock.json b/package-lock.json
index 3e9789e8..5bb30b89 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -24,10 +24,8 @@
 				"@polymer/iron-icons": "^3.0.0",
 				"@polymer/paper-dropdown-menu": "^3.2.0",
 				"@polymer/paper-icon-button": "^3.0.0",
-				"@polymer/paper-input": "^3.2.0",
 				"@polymer/paper-spinner": "^3.0.0",
 				"@polymer/polymer": "^3.3.0",
-				"@webcomponents/shadycss": "^1.10.0",
 				"file-saver-es": "^2.0.0",
 				"haunted": "^5.0.0",
 				"lit-html": "^2.0.0"
@@ -281,16 +279,16 @@
 			}
 		},
 		"node_modules/@commitlint/cli": {
-			"version": "18.4.2",
-			"resolved": "https://registry.npmjs.org/@commitlint/cli/-/cli-18.4.2.tgz",
-			"integrity": "sha512-dDfb2+wzeQe6ogdHNHOy0J0nraok+La0BoxamNMhBOng9/5GoESPDmKUJ1Lt1oivh5MfIgZh0Vm6f0rxkB8CoA==",
+			"version": "18.4.3",
+			"resolved": "https://registry.npmjs.org/@commitlint/cli/-/cli-18.4.3.tgz",
+			"integrity": "sha512-zop98yfB3A6NveYAZ3P1Mb6bIXuCeWgnUfVNkH4yhIMQpQfzFwseadazOuSn0OOfTt0lWuFauehpm9GcqM5lww==",
 			"dev": true,
 			"dependencies": {
-				"@commitlint/format": "^18.4.0",
-				"@commitlint/lint": "^18.4.2",
-				"@commitlint/load": "^18.4.2",
-				"@commitlint/read": "^18.4.0",
-				"@commitlint/types": "^18.4.0",
+				"@commitlint/format": "^18.4.3",
+				"@commitlint/lint": "^18.4.3",
+				"@commitlint/load": "^18.4.3",
+				"@commitlint/read": "^18.4.3",
+				"@commitlint/types": "^18.4.3",
 				"execa": "^5.0.0",
 				"lodash.isfunction": "^3.0.9",
 				"resolve-from": "5.0.0",
@@ -305,9 +303,9 @@
 			}
 		},
 		"node_modules/@commitlint/config-conventional": {
-			"version": "18.4.2",
-			"resolved": "https://registry.npmjs.org/@commitlint/config-conventional/-/config-conventional-18.4.2.tgz",
-			"integrity": "sha512-qFjIqgKGV89lzUGHxanq2WJDXk5wZIxoZmZvf0I4i4CirL06Xj8qRh1shPsXNyI15d8Rj2HExww6cGJSFU9DdA==",
+			"version": "18.4.3",
+			"resolved": "https://registry.npmjs.org/@commitlint/config-conventional/-/config-conventional-18.4.3.tgz",
+			"integrity": "sha512-729eRRaNta7JZF07qf6SAGSghoDEp9mH7yHU0m7ff0q89W97wDrWCyZ3yoV3mcQJwbhlmVmZPTkPcm7qiAu8WA==",
 			"dev": true,
 			"dependencies": {
 				"conventional-changelog-conventionalcommits": "^7.0.2"
@@ -317,12 +315,12 @@
 			}
 		},
 		"node_modules/@commitlint/config-validator": {
-			"version": "18.4.0",
-			"resolved": "https://registry.npmjs.org/@commitlint/config-validator/-/config-validator-18.4.0.tgz",
-			"integrity": "sha512-1y6qHMU3o4cYQSK+Y9EnmH6H1GRiwQGjnLIUOIKlekrmfc8MrMk1ByNmb8od4vK3qHJAaL/77/5n+1uyyIF5dA==",
+			"version": "18.4.3",
+			"resolved": "https://registry.npmjs.org/@commitlint/config-validator/-/config-validator-18.4.3.tgz",
+			"integrity": "sha512-FPZZmTJBARPCyef9ohRC9EANiQEKSWIdatx5OlgeHKu878dWwpyeFauVkhzuBRJFcCA4Uvz/FDtlDKs008IHcA==",
 			"dev": true,
 			"dependencies": {
-				"@commitlint/types": "^18.4.0",
+				"@commitlint/types": "^18.4.3",
 				"ajv": "^8.11.0"
 			},
 			"engines": {
@@ -330,12 +328,12 @@
 			}
 		},
 		"node_modules/@commitlint/ensure": {
-			"version": "18.4.0",
-			"resolved": "https://registry.npmjs.org/@commitlint/ensure/-/ensure-18.4.0.tgz",
-			"integrity": "sha512-N5cJo/n61ULSwz3W5Iz/IZJ0I9H/PaHc+OMcF2XcRVbLa6B3YwzEW66XGCRKVULlsBNSrIH6tk5un9ayXAXIdw==",
+			"version": "18.4.3",
+			"resolved": "https://registry.npmjs.org/@commitlint/ensure/-/ensure-18.4.3.tgz",
+			"integrity": "sha512-MI4fwD9TWDVn4plF5+7JUyLLbkOdzIRBmVeNlk4dcGlkrVA+/l5GLcpN66q9LkFsFv6G2X31y89ApA3hqnqIFg==",
 			"dev": true,
 			"dependencies": {
-				"@commitlint/types": "^18.4.0",
+				"@commitlint/types": "^18.4.3",
 				"lodash.camelcase": "^4.3.0",
 				"lodash.kebabcase": "^4.1.1",
 				"lodash.snakecase": "^4.1.1",
@@ -347,21 +345,21 @@
 			}
 		},
 		"node_modules/@commitlint/execute-rule": {
-			"version": "18.4.0",
-			"resolved": "https://registry.npmjs.org/@commitlint/execute-rule/-/execute-rule-18.4.0.tgz",
-			"integrity": "sha512-g013SWki6ZWhURBLOSXTaVQGWHdA0QlPJGiW4a+YpThezmJOemvc4LiKVpn13AjSKQ40QnmBqpBrxujOaSo+3A==",
+			"version": "18.4.3",
+			"resolved": "https://registry.npmjs.org/@commitlint/execute-rule/-/execute-rule-18.4.3.tgz",
+			"integrity": "sha512-t7FM4c+BdX9WWZCPrrbV5+0SWLgT3kCq7e7/GhHCreYifg3V8qyvO127HF796vyFql75n4TFF+5v1asOOWkV1Q==",
 			"dev": true,
 			"engines": {
 				"node": ">=v18"
 			}
 		},
 		"node_modules/@commitlint/format": {
-			"version": "18.4.0",
-			"resolved": "https://registry.npmjs.org/@commitlint/format/-/format-18.4.0.tgz",
-			"integrity": "sha512-MiAe4D5/ahty38CzULdQbpRa3ReKZtx0kyigOWcntq+N5uqez+Ac4/MO7H+3j1kC4G7nfJVfBu6TqcXeyNvhCQ==",
+			"version": "18.4.3",
+			"resolved": "https://registry.npmjs.org/@commitlint/format/-/format-18.4.3.tgz",
+			"integrity": "sha512-8b+ItXYHxAhRAXFfYki5PpbuMMOmXYuzLxib65z2XTqki59YDQJGpJ/wB1kEE5MQDgSTQWtKUrA8n9zS/1uIDQ==",
 			"dev": true,
 			"dependencies": {
-				"@commitlint/types": "^18.4.0",
+				"@commitlint/types": "^18.4.3",
 				"chalk": "^4.1.0"
 			},
 			"engines": {
@@ -369,12 +367,12 @@
 			}
 		},
 		"node_modules/@commitlint/is-ignored": {
-			"version": "18.4.2",
-			"resolved": "https://registry.npmjs.org/@commitlint/is-ignored/-/is-ignored-18.4.2.tgz",
-			"integrity": "sha512-uujjyJlrXsMsQrv0r8HDGigAwJELPAMtA1Vxi2WUB54HbyAWa0Ue6ujMRZNKov2YeA96r6o72gLDnugb6yu8IA==",
+			"version": "18.4.3",
+			"resolved": "https://registry.npmjs.org/@commitlint/is-ignored/-/is-ignored-18.4.3.tgz",
+			"integrity": "sha512-ZseOY9UfuAI32h9w342Km4AIaTieeFskm2ZKdrG7r31+c6zGBzuny9KQhwI9puc0J3GkUquEgKJblCl7pMnjwg==",
 			"dev": true,
 			"dependencies": {
-				"@commitlint/types": "^18.4.0",
+				"@commitlint/types": "^18.4.3",
 				"semver": "7.5.4"
 			},
 			"engines": {
@@ -382,30 +380,30 @@
 			}
 		},
 		"node_modules/@commitlint/lint": {
-			"version": "18.4.2",
-			"resolved": "https://registry.npmjs.org/@commitlint/lint/-/lint-18.4.2.tgz",
-			"integrity": "sha512-ljGOIH7w9SnjvZFoKjf30iWFxDnezfRtOc50+rNLdDP0TpLspaYYLPhDO/TeVdmii1/AJiDgBIuBboQlaIy7Bw==",
+			"version": "18.4.3",
+			"resolved": "https://registry.npmjs.org/@commitlint/lint/-/lint-18.4.3.tgz",
+			"integrity": "sha512-18u3MRgEXNbnYkMOWoncvq6QB8/90m9TbERKgdPqVvS+zQ/MsuRhdvHYCIXGXZxUb0YI4DV2PC4bPneBV/fYuA==",
 			"dev": true,
 			"dependencies": {
-				"@commitlint/is-ignored": "^18.4.2",
-				"@commitlint/parse": "^18.4.0",
-				"@commitlint/rules": "^18.4.0",
-				"@commitlint/types": "^18.4.0"
+				"@commitlint/is-ignored": "^18.4.3",
+				"@commitlint/parse": "^18.4.3",
+				"@commitlint/rules": "^18.4.3",
+				"@commitlint/types": "^18.4.3"
 			},
 			"engines": {
 				"node": ">=v18"
 			}
 		},
 		"node_modules/@commitlint/load": {
-			"version": "18.4.2",
-			"resolved": "https://registry.npmjs.org/@commitlint/load/-/load-18.4.2.tgz",
-			"integrity": "sha512-CKmzXdF9XwZJoVijAqpUlV9qzZOkyiYni4KuSCtTZVAAVudi9H84cJ4FqZxSwEP9G21vmoJiNrW8G042AsduVg==",
+			"version": "18.4.3",
+			"resolved": "https://registry.npmjs.org/@commitlint/load/-/load-18.4.3.tgz",
+			"integrity": "sha512-v6j2WhvRQJrcJaj5D+EyES2WKTxPpxENmNpNG3Ww8MZGik3jWRXtph0QTzia5ZJyPh2ib5aC/6BIDymkUUM58Q==",
 			"dev": true,
 			"dependencies": {
-				"@commitlint/config-validator": "^18.4.0",
-				"@commitlint/execute-rule": "^18.4.0",
-				"@commitlint/resolve-extends": "^18.4.0",
-				"@commitlint/types": "^18.4.0",
+				"@commitlint/config-validator": "^18.4.3",
+				"@commitlint/execute-rule": "^18.4.3",
+				"@commitlint/resolve-extends": "^18.4.3",
+				"@commitlint/types": "^18.4.3",
 				"@types/node": "^18.11.9",
 				"chalk": "^4.1.0",
 				"cosmiconfig": "^8.3.6",
@@ -420,22 +418,22 @@
 			}
 		},
 		"node_modules/@commitlint/message": {
-			"version": "18.4.0",
-			"resolved": "https://registry.npmjs.org/@commitlint/message/-/message-18.4.0.tgz",
-			"integrity": "sha512-3kg6NQO6pJ+VdBTWi51KInT8ngkxPJaW+iI7URtUALjKcO9K4XY3gf80ZPmS1hDessrjb7qCr1lau8eWMINAQw==",
+			"version": "18.4.3",
+			"resolved": "https://registry.npmjs.org/@commitlint/message/-/message-18.4.3.tgz",
+			"integrity": "sha512-ddJ7AztWUIoEMAXoewx45lKEYEOeOlBVWjk8hDMUGpprkuvWULpaXczqdjwVtjrKT3JhhN+gMs8pm5G3vB2how==",
 			"dev": true,
 			"engines": {
 				"node": ">=v18"
 			}
 		},
 		"node_modules/@commitlint/parse": {
-			"version": "18.4.0",
-			"resolved": "https://registry.npmjs.org/@commitlint/parse/-/parse-18.4.0.tgz",
-			"integrity": "sha512-SxTCSUZH8CJNYWOlFg18YUQ2RLz8ubXKbpHUIiSNwCbiQx7UDCydp1JnhoB4sOYOxgV8d3nuDwYluRU5KnEY4A==",
+			"version": "18.4.3",
+			"resolved": "https://registry.npmjs.org/@commitlint/parse/-/parse-18.4.3.tgz",
+			"integrity": "sha512-eoH7CXM9L+/Me96KVcfJ27EIIbA5P9sqw3DqjJhRYuhaULIsPHFs5S5GBDCqT0vKZQDx0DgxhMpW6AQbnKrFtA==",
 			"dev": true,
 			"dependencies": {
-				"@commitlint/types": "^18.4.0",
-				"conventional-changelog-angular": "^6.0.0",
+				"@commitlint/types": "^18.4.3",
+				"conventional-changelog-angular": "^7.0.0",
 				"conventional-commits-parser": "^5.0.0"
 			},
 			"engines": {
@@ -443,13 +441,13 @@
 			}
 		},
 		"node_modules/@commitlint/read": {
-			"version": "18.4.0",
-			"resolved": "https://registry.npmjs.org/@commitlint/read/-/read-18.4.0.tgz",
-			"integrity": "sha512-IpnABCbDeOw5npZ09SZZGLfd3T7cFtsxUYm6wT3aGmIB2fXKE3fMeuj3jxXjMibiGIyA3Z5voCMuOcKWpkNySA==",
+			"version": "18.4.3",
+			"resolved": "https://registry.npmjs.org/@commitlint/read/-/read-18.4.3.tgz",
+			"integrity": "sha512-H4HGxaYA6OBCimZAtghL+B+SWu8ep4X7BwgmedmqWZRHxRLcX2q0bWBtUm5FsMbluxbOfrJwOs/Z0ah4roP/GQ==",
 			"dev": true,
 			"dependencies": {
-				"@commitlint/top-level": "^18.4.0",
-				"@commitlint/types": "^18.4.0",
+				"@commitlint/top-level": "^18.4.3",
+				"@commitlint/types": "^18.4.3",
 				"fs-extra": "^11.0.0",
 				"git-raw-commits": "^2.0.11",
 				"minimist": "^1.2.6"
@@ -459,13 +457,13 @@
 			}
 		},
 		"node_modules/@commitlint/resolve-extends": {
-			"version": "18.4.0",
-			"resolved": "https://registry.npmjs.org/@commitlint/resolve-extends/-/resolve-extends-18.4.0.tgz",
-			"integrity": "sha512-qhgU6ach+S6sJMD9NjCYiEycOObGhxzWQLQzqlScJCv9zkPs15Bg0ffLXTQ3z7ipXv46XEKYMnSJzjLRw2Tlkg==",
+			"version": "18.4.3",
+			"resolved": "https://registry.npmjs.org/@commitlint/resolve-extends/-/resolve-extends-18.4.3.tgz",
+			"integrity": "sha512-30sk04LZWf8+SDgJrbJCjM90gTg2LxsD9cykCFeFu+JFHvBFq5ugzp2eO/DJGylAdVaqxej3c7eTSE64hR/lnw==",
 			"dev": true,
 			"dependencies": {
-				"@commitlint/config-validator": "^18.4.0",
-				"@commitlint/types": "^18.4.0",
+				"@commitlint/config-validator": "^18.4.3",
+				"@commitlint/types": "^18.4.3",
 				"import-fresh": "^3.0.0",
 				"lodash.mergewith": "^4.6.2",
 				"resolve-from": "^5.0.0",
@@ -476,15 +474,15 @@
 			}
 		},
 		"node_modules/@commitlint/rules": {
-			"version": "18.4.0",
-			"resolved": "https://registry.npmjs.org/@commitlint/rules/-/rules-18.4.0.tgz",
-			"integrity": "sha512-T3ChRxQZ6g0iNCpVLc6KeQId0/86TnyQA8PFkng+dWElO2DAA5km/yirgKZV1Xlc+gF7Rf6d+a0ottxdKpOY+w==",
+			"version": "18.4.3",
+			"resolved": "https://registry.npmjs.org/@commitlint/rules/-/rules-18.4.3.tgz",
+			"integrity": "sha512-8KIeukDf45BiY+Lul1T0imSNXF0sMrlLG6JpLLKolkmYVQ6PxxoNOriwyZ3UTFFpaVbPy0rcITaV7U9JCAfDTA==",
 			"dev": true,
 			"dependencies": {
-				"@commitlint/ensure": "^18.4.0",
-				"@commitlint/message": "^18.4.0",
-				"@commitlint/to-lines": "^18.4.0",
-				"@commitlint/types": "^18.4.0",
+				"@commitlint/ensure": "^18.4.3",
+				"@commitlint/message": "^18.4.3",
+				"@commitlint/to-lines": "^18.4.3",
+				"@commitlint/types": "^18.4.3",
 				"execa": "^5.0.0"
 			},
 			"engines": {
@@ -492,18 +490,18 @@
 			}
 		},
 		"node_modules/@commitlint/to-lines": {
-			"version": "18.4.0",
-			"resolved": "https://registry.npmjs.org/@commitlint/to-lines/-/to-lines-18.4.0.tgz",
-			"integrity": "sha512-bZXuCtfBPjNgtEnG3gwJrveIgfKK2UdhIhFvKpMTrQl/gAwoto/3mzmE7qGAHwmuP4eZ2U8X7iwMnqIlWmv2Tw==",
+			"version": "18.4.3",
+			"resolved": "https://registry.npmjs.org/@commitlint/to-lines/-/to-lines-18.4.3.tgz",
+			"integrity": "sha512-fy1TAleik4Zfru1RJ8ZU6cOSvgSVhUellxd3WZV1D5RwHZETt1sZdcA4mQN2y3VcIZsUNKkW0Mq8CM9/L9harQ==",
 			"dev": true,
 			"engines": {
 				"node": ">=v18"
 			}
 		},
 		"node_modules/@commitlint/top-level": {
-			"version": "18.4.0",
-			"resolved": "https://registry.npmjs.org/@commitlint/top-level/-/top-level-18.4.0.tgz",
-			"integrity": "sha512-TfulcA8UHF7MZ6tm4Ci3aqZgMBZa1OoCg4prccWHvwG/hsHujZ7+0FKbeKqDbcSli/YWm4NJwEjl4uh5itIJeA==",
+			"version": "18.4.3",
+			"resolved": "https://registry.npmjs.org/@commitlint/top-level/-/top-level-18.4.3.tgz",
+			"integrity": "sha512-E6fJPBLPFL5R8+XUNSYkj4HekIOuGMyJo3mIx2PkYc3clel+pcWQ7TConqXxNWW4x1ugigiIY2RGot55qUq1hw==",
 			"dev": true,
 			"dependencies": {
 				"find-up": "^5.0.0"
@@ -513,9 +511,9 @@
 			}
 		},
 		"node_modules/@commitlint/types": {
-			"version": "18.4.0",
-			"resolved": "https://registry.npmjs.org/@commitlint/types/-/types-18.4.0.tgz",
-			"integrity": "sha512-MKeaFxt0I9fhqUb2E+YIzX/gZtmkuodJET/XKiZIMvXUff8Ee4Ih86eLg+yAm2jf1pwGBmU02uNOp0y094w2Uw==",
+			"version": "18.4.3",
+			"resolved": "https://registry.npmjs.org/@commitlint/types/-/types-18.4.3.tgz",
+			"integrity": "sha512-cvzx+vtY/I2hVBZHCLrpoh+sA0hfuzHwDc+BAFPimYLjJkpHnghQM+z8W/KyLGkygJh3BtI3xXXq+dKjnSWEmA==",
 			"dev": true,
 			"dependencies": {
 				"chalk": "^4.1.0"
@@ -1143,9 +1141,9 @@
 			}
 		},
 		"node_modules/@neovici/cosmoz-input": {
-			"version": "3.15.0",
-			"resolved": "https://registry.npmjs.org/@neovici/cosmoz-input/-/cosmoz-input-3.15.0.tgz",
-			"integrity": "sha512-hV21XG1X1uyKCBpGa3Kun/odWSHqxgqfHfxdQ4XtqYqcMoy5Mc+UQX22igfJCddNozJUvumn2ajE/u9RaeC83A==",
+			"version": "3.16.0",
+			"resolved": "https://registry.npmjs.org/@neovici/cosmoz-input/-/cosmoz-input-3.16.0.tgz",
+			"integrity": "sha512-JavR74nVFfFNb76EoWrojqp3tBxS0VlYUJ3ZroCW1b9DSbEnFFYVFdYspmsWEcPxP0JPqpDUgvVIZupQBk3uAg==",
 			"dependencies": {
 				"@neovici/cosmoz-utils": "^5.1.0",
 				"haunted": "^5.0.0",
@@ -2120,18 +2118,6 @@
 				"semantic-release": ">=20.1.0"
 			}
 		},
-		"node_modules/@semantic-release/commit-analyzer/node_modules/conventional-changelog-angular": {
-			"version": "7.0.0",
-			"resolved": "https://registry.npmjs.org/conventional-changelog-angular/-/conventional-changelog-angular-7.0.0.tgz",
-			"integrity": "sha512-ROjNchA9LgfNMTTFSIWPzebCwOGFdgkEq45EnvvrmSLvCtAw0HSmrCs7/ty+wAeYUZyNay0YMUNYFTRL72PkBQ==",
-			"dev": true,
-			"dependencies": {
-				"compare-func": "^2.0.0"
-			},
-			"engines": {
-				"node": ">=16"
-			}
-		},
 		"node_modules/@semantic-release/error": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/@semantic-release/error/-/error-3.0.0.tgz",
@@ -2550,18 +2536,6 @@
 				"semantic-release": ">=20.1.0"
 			}
 		},
-		"node_modules/@semantic-release/release-notes-generator/node_modules/conventional-changelog-angular": {
-			"version": "7.0.0",
-			"resolved": "https://registry.npmjs.org/conventional-changelog-angular/-/conventional-changelog-angular-7.0.0.tgz",
-			"integrity": "sha512-ROjNchA9LgfNMTTFSIWPzebCwOGFdgkEq45EnvvrmSLvCtAw0HSmrCs7/ty+wAeYUZyNay0YMUNYFTRL72PkBQ==",
-			"dev": true,
-			"dependencies": {
-				"compare-func": "^2.0.0"
-			},
-			"engines": {
-				"node": ">=16"
-			}
-		},
 		"node_modules/@semantic-release/release-notes-generator/node_modules/get-stream": {
 			"version": "7.0.1",
 			"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-7.0.1.tgz",
@@ -4344,15 +4318,15 @@
 			}
 		},
 		"node_modules/conventional-changelog-angular": {
-			"version": "6.0.0",
-			"resolved": "https://registry.npmjs.org/conventional-changelog-angular/-/conventional-changelog-angular-6.0.0.tgz",
-			"integrity": "sha512-6qLgrBF4gueoC7AFVHu51nHL9pF9FRjXrH+ceVf7WmAfH3gs+gEYOkvxhjMPjZu57I4AGUGoNTY8V7Hrgf1uqg==",
+			"version": "7.0.0",
+			"resolved": "https://registry.npmjs.org/conventional-changelog-angular/-/conventional-changelog-angular-7.0.0.tgz",
+			"integrity": "sha512-ROjNchA9LgfNMTTFSIWPzebCwOGFdgkEq45EnvvrmSLvCtAw0HSmrCs7/ty+wAeYUZyNay0YMUNYFTRL72PkBQ==",
 			"dev": true,
 			"dependencies": {
 				"compare-func": "^2.0.0"
 			},
 			"engines": {
-				"node": ">=14"
+				"node": ">=16"
 			}
 		},
 		"node_modules/conventional-changelog-conventionalcommits": {
diff --git a/package.json b/package.json
index a7b476b6..544a20d4 100644
--- a/package.json
+++ b/package.json
@@ -74,10 +74,8 @@
 		"@polymer/iron-icons": "^3.0.0",
 		"@polymer/paper-dropdown-menu": "^3.2.0",
 		"@polymer/paper-icon-button": "^3.0.0",
-		"@polymer/paper-input": "^3.2.0",
 		"@polymer/paper-spinner": "^3.0.0",
 		"@polymer/polymer": "^3.3.0",
-		"@webcomponents/shadycss": "^1.10.0",
 		"file-saver-es": "^2.0.0",
 		"haunted": "^5.0.0",
 		"lit-html": "^2.0.0"
diff --git a/test/integration/column-number.test.js b/test/integration/column-number.test.js
index b3056f30..b4c876c9 100644
--- a/test/integration/column-number.test.js
+++ b/test/integration/column-number.test.js
@@ -51,15 +51,15 @@ suite('cosmoz-omnitable-column-number', () => {
 			const header = getHeaderMenu();
 			header.noAnimations = true;
 			header.open();
-			await oneEvent(header.querySelector('paper-input'), 'focus');
+			await oneEvent(header.querySelector('cosmoz-input'), 'focus');
 		},
 		getInputs = () =>
 			columnHeaderInput.shadowRoot.querySelectorAll(
-				'paper-dropdown-menu paper-input',
+				'paper-dropdown-menu cosmoz-input',
 			),
 		getFocusedInput = () =>
 			columnHeaderInput.shadowRoot.querySelector(
-				'paper-dropdown-menu paper-input:focus-within',
+				'paper-dropdown-menu cosmoz-input:focus-within',
 			),
 		setInputValue = async (inputNo, value) => {
 			const input = getInputs()[inputNo];