@neovici/cosmoz-omnitable 14.13.0 → 14.14.1

package/cosmoz-omnitable-column-autocomplete.js

@@ -1,9 +1,9 @@
-import '@polymer/paper-spinner/paper-spinner-lite.js';
 import '@neovici/cosmoz-autocomplete';
 
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { html } from 'lit-html';
 import { when } from 'lit-html/directives/when.js';
+import '@neovici/cosmoz-spinner';
 
 import { columnMixin, getString } from './cosmoz-omnitable-column-mixin.js';
 import {
@@ -98,13 +98,7 @@ 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`<cosmoz-spinner slot="suffix"></cosmoz-spinner>`,
 			)}</cosmoz-autocomplete-ui
 		>`;
 	}

package/cosmoz-omnitable-column-boolean.js

@@ -2,9 +2,9 @@ import { PolymerElement } from '@polymer/polymer/polymer-element';
 
 import { columnMixin } from './cosmoz-omnitable-column-mixin';
 
-import '@polymer/paper-spinner/paper-spinner-lite';
 import '@neovici/cosmoz-autocomplete';
-import { html, nothing } from 'lit-html';
+import { html } from 'lit-html';
+import { when } from 'lit-html/directives/when.js';
 import { get } from '@polymer/polymer/lib/utils/path';
 import { memooize } from '@neovici/cosmoz-utils/memoize';
 
@@ -83,15 +83,7 @@ class OmnitableColumnBoolean extends columnMixin(PolymerElement) {
 	}
 
 	renderEditCell(column, { item }, onItemChange) {
-		const { trueLabel, falseLabel } = column,
-			spinner = column.loading
-				? html`<paper-spinner-lite
-						style="width: 20px; height: 20px;"
-						suffix
-						slot="suffix"
-						active
-					></paper-spinner-lite>`
-				: nothing;
+		const { trueLabel, falseLabel } = column;
 
 		return html`<cosmoz-autocomplete
 			no-label-float
@@ -110,20 +102,15 @@ class OmnitableColumnBoolean extends columnMixin(PolymerElement) {
 			)}
 			.onChange=${onEditableChange(onItemChange)}
 			.limit=${1}
-			>${spinner}</cosmoz-autocomplete
+			>${when(
+				column.loading,
+				() =>
+					html`<cosmoz-spinner slot="suffix"></cosmoz-spinner>`,
+			)}</cosmoz-autocomplete
 		>`;
 	}
 
 	renderHeader(column, { filter, query }, setState, source) {
-		const spinner = column.loading
-			? html`<paper-spinner-lite
-					style="width: 20px; height: 20px;"
-					suffix
-					slot="suffix"
-					active
-				></paper-spinner-lite>`
-			: nothing;
-
 		return html`<cosmoz-autocomplete-ui
 			.label=${column.title}
 			.title=${computeItemTooltip(
@@ -140,7 +127,10 @@ class OmnitableColumnBoolean extends columnMixin(PolymerElement) {
 			.onFocus=${onFocus(setState)}
 			.onText=${onText(setState)}
 			.limit=${1}
-			>${spinner}</cosmoz-autocomplete-ui
+			>${when(
+				column.loading,
+				() => html`<cosmoz-spinner slot="suffix"></cosmoz-spinner>`,
+			)}</cosmoz-autocomplete-ui
 		>`;
 	}
 

package/cosmoz-omnitable-column-list-horizontal.js

@@ -1,7 +1,9 @@
 import '@neovici/cosmoz-autocomplete';
+import '@neovici/cosmoz-spinner';
 
 import { PolymerElement } from '@polymer/polymer/polymer-element';
-import { html, nothing } from 'lit-html';
+import { html } from 'lit-html';
+import { when } from 'lit-html/directives/when.js';
 
 import { columnMixin } from './cosmoz-omnitable-column-mixin';
 import {
@@ -54,14 +56,6 @@ class OmnitableColumnListHorizontal extends listColumnMixin(
 	}
 
 	renderHeader(column, { filter, query }, setState, source) {
-		const spinner = column.loading
-			? html`<paper-spinner-lite
-					style="width: 20px; height: 20px;"
-					suffix
-					slot="suffix"
-					active
-				></paper-spinner-lite>`
-			: nothing;
 		return html`<cosmoz-autocomplete-ui
 			class="external-values-${column.externalValues}"
 			.label=${column.title}
@@ -72,7 +66,10 @@ class OmnitableColumnListHorizontal extends listColumnMixin(
 			.onChange=${onChange(setState)}
 			.onFocus=${onFocus(setState)}
 			.onText=${onText(setState)}
-			>${spinner}</cosmoz-autocomplete-ui
+			>${when(
+				column.loading,
+				() => html`<cosmoz-spinner slot="suffix"></cosmoz-spinner>`,
+			)}</cosmoz-autocomplete-ui
 		> `;
 	}
 }

package/cosmoz-omnitable-column-list.js

@@ -77,13 +77,7 @@ 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`<cosmoz-spinner slot="suffix"></cosmoz-spinner>`,
 			)}</cosmoz-autocomplete-ui
 		>`;
 	}

package/cosmoz-omnitable-skeleton.js

@@ -15,7 +15,12 @@ const styles = css`
 		padding: 11px 12px 11px 0;
 	}
 	.skeleton > div div:not(.handle) {
-		background-image: linear-gradient(90deg, #e0e0e0, #f5f5f5, #e0e0e0);
+		background-image: linear-gradient(
+			90deg, 
+			var(--cosmoz-omnitable-skeleton-bg-from, #e0e0e0), 
+			var(--cosmoz-omnitable-skeleton-bg-middle, #f5f5f5), 
+			var(--cosmoz-omnitable-skeleton-bg-to, #e0e0e0)
+		);
 		background-size: 1000%;
 		background-position: right;
 		border-radius: 4px;

package/cosmoz-omnitable-styles.js

@@ -261,10 +261,10 @@ export default css`
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		color: #ccc;
+		color: var(--cz-bg-color, #ccc);
 	}
 	.tableContent-empty.overlay {
-		background-color: rgba(255, 255, 255, 0.8);
+		background-color: (var(--cz-bg-color, #ccc));
 		color: #333;
 		z-index: 1;
 	}
@@ -315,6 +315,7 @@ export default css`
 		flex-basis: 0.000001px;
 		display: flex;
 		flex-direction: column;
+		color: var(--cz-bg-color, #ccc);
 	}
 
 	.itemRow {

package/cosmoz-omnitable.js

@@ -1,7 +1,6 @@
 import '@neovici/cosmoz-bottom-bar';
 import '@polymer/iron-icon/iron-icon';
 import '@polymer/iron-icons/iron-icons';
-import '@polymer/paper-spinner/paper-spinner-lite';
 
 import './cosmoz-omnitable-column';
 import './cosmoz-omnitable-columns';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neovici/cosmoz-omnitable",
-  "version": "14.13.0",
+  "version": "14.14.1",
   "description": "[![Build Status](https://travis-ci.org/Neovici/cosmoz-omnitable.svg?branch=master)](https://travis-ci.org/Neovici/cosmoz-omnitable)",
   "keywords": [
     "web-components"
@@ -72,13 +72,13 @@
     "@neovici/cosmoz-i18next": "^3.1.1",
     "@neovici/cosmoz-input": "^5.0.0",
     "@neovici/cosmoz-router": "^11.0.0",
+    "@neovici/cosmoz-spinner": "^1.0.0",
     "@neovici/cosmoz-utils": "^6.14.2",
     "@neovici/nullxlsx": "^3.0.0",
     "@pionjs/pion": "^2.0.0",
     "@polymer/iron-icon": "^3.0.0",
     "@polymer/iron-icons": "^3.0.0",
     "@polymer/paper-dropdown-menu": "^3.2.0",
-    "@polymer/paper-spinner": "^3.0.0",
     "@polymer/polymer": "^3.3.0",
     "file-saver-es": "^2.0.0",
     "lit-html": "^2.0.0 || ^3.0.0"