@neovici/cosmoz-omnitable 12.26.4 → 12.28.0

package/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>`;
 	}
 

package/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,
 );

package/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(

package/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

package/cosmoz-omnitable-column-list.js

@@ -52,12 +52,12 @@ class OmnitableColumnList extends listColumnMixin(columnMixin(PolymerElement)) {
 		const onChange = (event) =>
 			onItemChange(event.target.value.split(/,\s*/gu));
 
-		return html`<paper-input
+		return html`<cosmoz-input
 			no-label-float
 			type="text"
-			@change=${onChange}
 			.value=${getString(column, item)}
-		></paper-input>`;
+			@change=${onChange}
+		></cosmoz-input>`;
 	}
 
 	renderHeader(column, { filter, query }, setState, source) {
@@ -79,12 +79,13 @@ class OmnitableColumnList extends listColumnMixin(columnMixin(PolymerElement)) {
 			.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
 		>`;
 	}

package/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>`;
 	}
 

package/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>`;
 	}
 

package/cosmoz-omnitable-column.js

@@ -1,41 +1,42 @@
 /* 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 { applySingleFilter, columnMixin, getString } from './cosmoz-omnitable-column-mixin';
+import {
+	applySingleFilter,
+	columnMixin,
+	getString,
+} from './cosmoz-omnitable-column-mixin';
 import { PolymerElement } from '@polymer/polymer/polymer-element';
 import { html } from 'lit-html';
 
-const
-	onChange = setState => event => setState(state => {
-		// skip the event emitted during paper-input initialization 
-		if(state.inputValue === undefined && event.target.value === '') {
-			return state;
-		}
-		
-		clearTimeout(state.t);
-		const t = setTimeout(() => setState(state => ({ ...state, filter: state.inputValue })), 1000);
-		return { ...state, inputValue: event.target.value, t };
-	}),
-
-	onBlur = setState => () =>
-		setState(state => ({ ...state, filter: state.inputValue })),
+const onChange = (setState) => (event) =>
+		setState((state) => {
+			// skip the event emitted during cosmoz-input initialization
+			if (state.inputValue === undefined && event.target.value === '') {
+				return state;
+			}
 
-	onKeyDown = setState => event => {
+			clearTimeout(state.t);
+			const t = setTimeout(
+				() => setState((state) => ({ ...state, filter: state.inputValue })),
+				1000,
+			);
+			return { ...state, inputValue: event.target.value, t };
+		}),
+	onBlur = (setState) => () =>
+		setState((state) => ({ ...state, filter: state.inputValue })),
+	onKeyDown = (setState) => (event) => {
 		if (event.keyCode === 13) {
 			event.preventDefault();
-			setState(state => ({ ...state, filter: state.inputValue }));
+			setState((state) => ({ ...state, filter: state.inputValue }));
 		}
 	},
-
-	onFocus = setState => event =>
-		setState(state => ({ ...state, headerFocused: event.detail.value })),
-
-	resetFilter = setState => () =>
-		setState(state => ({ ...state, filter: null, inputValue: null })),
-
-	hasFilter = filter => filter != null && filter !== '';
+	onFocus = (setState) => (event) =>
+		setState((state) => ({ ...state, headerFocused: event.detail.value })),
+	resetFilter = (setState) => () =>
+		setState((state) => ({ ...state, filter: null, inputValue: null })),
+	hasFilter = (filter) => filter != null && filter !== '';
 
 /**
  * @polymer
@@ -47,7 +48,7 @@ class OmnitableColumn extends columnMixin(PolymerElement) {
 		return {
 			minWidth: { type: String, value: '55px' },
 			editMinWidth: { type: String, value: '55px' },
-			inputValue: { type: Object, notify: true }
+			inputValue: { type: Object, notify: true },
 		};
 	}
 
@@ -59,26 +60,37 @@ class OmnitableColumn extends columnMixin(PolymerElement) {
 	}
 
 	renderCell(column, { item }) {
-		return html`<span class="default-column">${ getString(column, item) }</span>`;
+		return html`<span class="default-column">${getString(column, item)}</span>`;
 	}
 
 	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(column, { filter, inputValue, headerFocused }, setState) {
-		return html`<paper-input
-			label=${ column.title }
-			.value=${ inputValue ?? filter }
-			@value-changed=${ onChange(setState) }
-			focused=${ headerFocused }
-			@focused-changed=${ onFocus(setState) }
-			@keydown=${ onKeyDown(setState) }
-			@blur=${ onBlur(setState) }
+		return html`<cosmoz-input
+			label=${column.title}
+			.value=${inputValue ?? filter}
+			@value-changed=${onChange(setState)}
+			focused=${headerFocused}
+			@focused-changed=${onFocus(setState)}
+			@keydown=${onKeyDown(setState)}
+			@blur=${onBlur(setState)}
 		>
-			<cosmoz-clear-button suffix slot="suffix" ?visible=${ hasFilter(filter) } light @click=${ resetFilter(setState) }></cosmoz-clear-button>
-		</paper-input>`;
+			<cosmoz-clear-button
+				suffix
+				slot="suffix"
+				?visible=${hasFilter(filter)}
+				light
+				@click=${resetFilter(setState)}
+			></cosmoz-clear-button>
+		</cosmoz-input>`;
 	}
 
 	legacyFilterToState(filter) {

package/cosmoz-omnitable-styles.js

@@ -155,19 +155,10 @@ export default css`
 			--cosmoz-omnitable-header-font-size,
 			16px
 		);
+		--cosmoz-input-label-text-transform: var(--cosmoz-omnitable-header-text-transform, none);
+		--cosmoz-input-label-font-weight: var(--cosmoz-omnitable-header-font-weight, normal);
 	}
 
-	cosmoz-autocomplete-ui::part(input-label) {
-		text-transform: var(--cosmoz-omnitable-header-text-transform, none);
-		font-weight: var(--cosmoz-omnitable-header-font-weight, normal);
-		font-family: var(
-			--cosmoz-omnitable-header-font-family,
-			'Roboto',
-			'Noto',
-			sans-serif
-		);
-		font-size: var(--cosmoz-omnitable-header-font-size, 16px);
-	}
 	cosmoz-omnitable-header-row {
 		white-space: nowrap;
 	}
@@ -518,7 +509,7 @@ export default css`
 		display: inline-flex;
 		position: relative;
 	}
-	.header-cell :not(.sg) {
+	.header-cell :not(.sg,cosmoz-clear-button) {
 		min-width: 0;
 		flex: auto;
 	}