@neovici/cosmoz-omnitable 14.5.0 → 14.6.1

package/cosmoz-omnitable-skeleton.js

@@ -0,0 +1,70 @@
+import { html, css, component } from '@pionjs/pion';
+
+const styles = css`
+	:host {
+		max-width: 100%;
+		overflow-x: hidden;
+		padding: 0 12px;
+	}
+	.skeleton {
+		width: 100%;
+	}
+	.skeleton > div {
+		height: 17.5px;
+		display: flex;
+		padding: 11px 12px 11px 0;
+	}
+	.skeleton > div div:not(.handle) {
+		background-image: linear-gradient(90deg, #e0e0e0, #f5f5f5, #e0e0e0);
+		background-size: 1000%;
+		background-position: right;
+		border-radius: 4px;
+		animation: sweep 1.5s cubic-bezier(0.3, 1, 0.3, 1) infinite;
+	}
+	.skeleton > div div:not(.checkbox):not(:last-of-type) {
+		margin-right: 7px;
+	}
+	.skeleton > div div.checkbox {
+		min-width: 18px;
+		margin-left: 0;
+		margin-right: 12px;
+	}
+	@keyframes sweep {
+		0% {
+			background-position: right;
+		}
+		100% {
+			background-position: left;
+		}
+	}
+`;
+
+const Skeleton = ({ settingsConfig }) => {
+	const { columns, collapsed } = settingsConfig,
+		showingColumns = columns.filter(
+			(column) => !collapsed.some((hidden) => hidden.name === column.name),
+		);
+
+	return html`<div class="skeleton">
+		${Array.from(
+			{ length: 5 },
+			() =>
+				html`<div>
+					<div class="checkbox"></div>
+					${showingColumns.map(
+						(col) =>
+							html`<div
+								class="cell"
+								part=${`cell-${col.name}`}
+								name=${col.name}
+							></div>`,
+					)}
+				</div>`,
+		)}
+	</div>`;
+};
+
+customElements.define(
+	'cosmoz-omnitable-skeleton',
+	component(Skeleton, { styleSheets: [styles] }),
+);

package/cosmoz-omnitable-styles.js

@@ -1,6 +1,7 @@
 /* eslint-disable max-lines */
 import { tagged as css } from '@neovici/cosmoz-utils';
-const checkbox = css`
+
+export const checkbox = css`
 	.checkbox {
 		box-sizing: border-box;
 		width: 18px;
@@ -80,8 +81,6 @@ const checkbox = css`
 	}
 `;
 
-export { checkbox };
-
 export default css`
 	:host {
 		display: flex;
@@ -101,6 +100,7 @@ export default css`
 		);
 		color: var(--primary-link-color-hover, var(--primary-link-color));
 	}
+
 	/* The wrapping div that contains the header, the table content and the footer */
 	.mainContainer {
 		background-color: var(--cosmoz-omnitable-bg-color, rgb(255, 255, 255));
@@ -237,7 +237,6 @@ export default css`
 	}
 
 	/* Empty data set styling */
-
 	.tableContent-empty {
 		position: absolute;
 		top: 0;
@@ -249,13 +248,11 @@ export default css`
 		justify-content: center;
 		color: #ccc;
 	}
-
 	.tableContent-empty.overlay {
 		background-color: rgba(255, 255, 255, 0.8);
 		color: #333;
 		z-index: 1;
 	}
-
 	.tableContent-empty iron-icon {
 		height: 96px;
 		min-height: 96px;
@@ -263,34 +260,23 @@ export default css`
 		min-width: 96px;
 		margin-right: 24px;
 	}
-
-	.tableContent-empty.overlay paper-spinner-lite {
-		height: 48px;
-		min-height: 48px;
-		width: 48px;
-		min-width: 48px;
-		margin-right: 24px;
-		--paper-spinner-color: #333;
-		--paper-spinner-stroke-width: 6px;
-	}
-
 	.tableContent-empty > div {
 		display: flex;
 		flex-direction: column;
 		justify-content: center;
 		padding-bottom: 24px;
 	}
-
 	.tableContent-empty.overlay > div {
 		padding-bottom: 0;
 	}
-
+	.tableContent-empty.overlay:has(cosmoz-omnitable-skeleton) {
+		align-items: flex-start;
+	}
 	.tableContent-empty div.tableContent-empty-message {
 		@apply --layout-vertical;
 		@apply --layout-center-justified;
 		padding-bottom: 24px;
 	}
-
 	.tableContent-empty.overlay div.tableContent-empty-message {
 		padding-bottom: 0;
 	}
@@ -299,7 +285,6 @@ export default css`
 		color: #ddd;
 		margin: 0;
 	}
-
 	.tableContent-empty h3 {
 		white-space: nowrap;
 		margin: 0px 0px 8px 0px;
@@ -368,10 +353,6 @@ export default css`
 		border-bottom: 1px solid var(--cosmoz-omnitable-border-color, #e1e2e5);
 	}
 
-	.groupRow.groupRow-folded {
-		/* Add here style rules for folded group rows */
-	}
-
 	.groupRow-label {
 		display: flex;
 		flex: auto;

package/cosmoz-omnitable.js

@@ -1,29 +1,27 @@
-/* eslint-disable max-lines-per-function */
-/* eslint-disable max-lines */
-import '@polymer/iron-icons/iron-icons';
+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 '@neovici/cosmoz-bottom-bar';
-
 import './cosmoz-omnitable-column';
+import './cosmoz-omnitable-columns';
+import './cosmoz-omnitable-group-row';
 import './cosmoz-omnitable-header-row';
-import './cosmoz-omnitable-item-row';
 import './cosmoz-omnitable-item-expand';
-import './cosmoz-omnitable-group-row';
-import './cosmoz-omnitable-columns';
-import styles from './cosmoz-omnitable-styles';
+import './cosmoz-omnitable-item-row';
 
+import { notifyProperty } from '@neovici/cosmoz-utils/hooks/use-notify-property';
+import { component } from '@pionjs/pion';
 import { html as polymerHtml } from '@polymer/polymer/lib/utils/html-tag';
 import { html } from 'lit-html';
 import { guard } from 'lit-html/directives/guard.js';
-import { notifyProperty } from '@neovici/cosmoz-utils/hooks/use-notify-property';
 
-import { useOmnitable } from './lib/use-omnitable';
-import { component } from '@pionjs/pion';
-import { renderHeader } from './lib/render-header';
+import styles from './cosmoz-omnitable-styles';
 import { renderFooter } from './lib/render-footer';
+import { renderHeader } from './lib/render-header';
 import { renderList } from './lib/render-list';
+import { useOmnitable } from './lib/use-omnitable';
+
 import './grouped-list/index.js';
 
 const shimCSS = (s) => window.ShadyCSS?.ApplyShim?.transformCssText?.(s) || s;
@@ -38,7 +36,9 @@ const Omnitable = (host) => {
 
 		<div class="mainContainer">
 			${renderHeader(header)}
-			<div class="tableContent" id="tableContent">${renderList(list)}</div>
+			<div class="tableContent" id="tableContent">
+				${renderList(header, list)}
+			</div>
 			${renderFooter(footer)}
 		</div>
 

package/lib/compute-layout.js

@@ -2,29 +2,36 @@ import { layout } from './layout';
 
 const _toCss = (layout, config) => {
 	const lastVisibleIndex = layout.findLastIndex(
-		(width) => width != null && width > 0,
-	);
+			(width) => width != null && width > 0,
+		),
+		generateCellCSS = (itemName, width) =>
+			`.cell[name="${itemName}"], cosmoz-omnitable-skeleton::part(cell-${itemName}){width: ${Math.floor(
+				width,
+			)}px;padding: 0 min(3px, ${width / 2}px)}`,
+		hideResizeNub = (itemName) =>
+			`cosmoz-omnitable-resize-nub[name="${itemName}"]{display:none}`,
+		hideColumn = (itemName) =>
+			`cosmoz-omnitable-resize-nub[name="${itemName}"], .cell[name="${itemName}"]{display:none}`;
 
 	return config
 		.map((item, index) => {
 			const width = layout[index];
+
 			// Hidden columns
 			if (width == null || width === 0) {
-				return `cosmoz-omnitable-resize-nub[name="${item.name}"], .cell[name="${item.name}"]{display:none}`;
+				return hideColumn(item.name);
 			}
 
-			// Last visible column, show the cell but hide its resize nub
+			// All visible columns
+			const cellCSS = generateCellCSS(item.name, width);
+
+			// Last visible column, show cell but hide its resize nub
 			if (index === lastVisibleIndex) {
-				return `.cell[name="${item.name}"]{width: ${Math.floor(
-					width,
-				)}px;padding: 0 min(3px, ${width / 2}px)}
-							cosmoz-omnitable-resize-nub[name="${item.name}"]{display:none}`;
+				return `${cellCSS}\n${hideResizeNub(item.name)}`;
 			}
 
-			// Other visible columns
-			return `.cell[name="${item.name}"]{width: ${Math.floor(
-				width,
-			)}px;padding: 0 min(3px, ${width / 2}px)}`;
+			// Other visible columns just show the cell
+			return cellCSS;
 		})
 		.join('\n');
 };

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

@@ -46,69 +46,103 @@ class AmountRangeInput extends rangeInputMixin(
 			this._onDropdownOpenedChanged(event);
 		};
 
-		return html`
-			<style>
-				paper-dropdown-menu {
-					--iron-icon-width: 0;
-					display: block;
-				}
-			</style>
-			<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}
-				horizontal-align="right"
-				?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>
-					<cosmoz-input
-						class=${this._fromClasses}
-						type="number"
-						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"
-						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>
-		`;
+	   return html`
+		   <style>
+			   paper-dropdown-menu {
+				   --iron-icon-width: 0;
+				   display: block;
+				   text-align: right;
+			   }
+
+			   .dropdown-content h3 {
+				   font-weight: 500;
+				   font-size: 13px;
+				   margin: 0;
+				   font-family: var(--cosmoz-input-font-family, var(--paper-font-subhead_-_font-family, 'Inter', sans-serif));
+			   }
+
+			   .dropdown-content {
+				   padding: 10px 10px 10px 10px;
+				   min-width: 150px;
+				   text-align: left;
+				   background: var(--cosmoz-omnitable-amount-input-background, #ffffff);
+				   border-radius: 6px;
+				   backdrop-filter: blur(16px) saturate(180%);
+				   -webkit-backdrop-filter: blur(16px) saturate(180%);
+				   box-shadow: 0 4px 24px 0 rgba(0,0,0,0.18), 0 1.5px 6px 0 rgba(0,0,0,0.1);
+			   }
+
+			   cosmoz-input[type="number"] {
+				   background: var(--cosmoz-omnitable-amount-input-background, #ffffff);
+				   border-radius: 6px;
+				   border: 1px solid #d1d1d6;
+				   box-shadow: 0 1px 2px 0 rgba(60,60,60,0.04);
+				   padding: 2px 8px;
+				   margin-bottom: 6px;
+				   min-height: 28px;
+				   transition: border-color 0.2s, box-shadow 0.2s;
+			   }
+
+			   cosmoz-input[type="number"]:focus-within {
+				   border-color: var(--cz-accent-color, #007aff);
+				   box-shadow: 0 0 0 1px rgba(0,122,255,0.15);
+				   background: var(--cosmoz-omnitable-amount-input-background, #ffffff);
+			   }
+		   </style>
+		   <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}
+			   horizontal-align="right"
+			   ?opened=${this.headerFocused}
+			   @opened-changed=${onOpenedChanged}
+		   >
+			   <div class="dropdown-content" slot="dropdown-content">
+				   <h3 style="margin: 0;">${this.title}</h3>
+				   <cosmoz-input
+					   class=${this._fromClasses}
+					   type="number"
+					   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"
+					   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>
+	   `;
 	}
 
 	/**

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

@@ -11,60 +11,88 @@ class DateRangeInput extends dateInputMixin(
 ) {
 	// eslint-disable-next-line max-lines-per-function
 	render() {
-		return html`
-			<style>
-				paper-dropdown-menu {
-					--iron-icon-width: 0;
-					display: block;
-				}
-				cosmoz-input {
-					--paper-font-subhead_-_font-size: 16px;
-					margin-bottom: 6px;
-				}
-			</style>
-			<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}
-				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>
-					<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)}
-					></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)}
-					></cosmoz-input>
-				</div>
-			</paper-dropdown-menu>
-		`;
+	   return html`
+		   <style>
+			   paper-dropdown-menu {
+				   --iron-icon-width: 0;
+				   display: block;
+				   text-align: right;
+			   }
+
+			   .dropdown-content h3 {
+				   font-weight: 500;
+				   font-size: 13px;
+				   margin: 0;
+				   font-family: var(--cosmoz-input-font-family, var(--paper-font-subhead_-_font-family, 'Inter', sans-serif));
+			   }
+
+			   .dropdown-content {
+				   padding: 10px 10px 10px 10px;
+				   min-width: 120px;
+				   text-align: left;
+				   background: var(--cosmoz-omnitable-amount-input-background, #ffffff);
+				   border-radius: 6px;
+				   backdrop-filter: blur(16px) saturate(180%);
+				   -webkit-backdrop-filter: blur(16px) saturate(180%);
+				   box-shadow: 0 4px 24px 0 rgba(0,0,0,0.18), 0 1.5px 6px 0 rgba(0,0,0,0.1);
+			   }
+
+			   cosmoz-input[type="date"] {
+				   background: var(--cosmoz-omnitable-amount-input-background, #ffffff);
+				   border-radius: 6px;
+				   border: 1px solid #d1d1d6;
+				   box-shadow: 0 1px 2px 0 rgba(60,60,60,0.04);
+				   padding: 2px 8px;
+				   margin-bottom: 6px;
+				   min-height: 28px;
+				   transition: border-color 0.2s, box-shadow 0.2s;
+			   }
+
+			   cosmoz-input[type="date"]:focus-within {
+				   border-color: var(--cz-accent-color, #007aff);
+				   box-shadow: 0 0 0 1px rgba(0,122,255,0.15);
+				   background: var(--cosmoz-omnitable-amount-input-background, #ffffff);
+			   }
+		   </style>
+		   <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}
+			   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">
+				   <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)}
+				   ></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)}
+				   ></cosmoz-input>
+			   </div>
+		   </paper-dropdown-menu>
+	   `;
 	}
 
 	_fromInputString(value, property) {

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

@@ -10,61 +10,89 @@ class DatetimeRangeInput extends dateInputMixin(
 ) {
 	// eslint-disable-next-line max-lines-per-function
 	render() {
-		return html`
-			<style>
-				paper-dropdown-menu {
-					--iron-icon-width: 0;
-					display: block;
-				}
-				cosmoz-input {
-					--paper-font-subhead_-_font-size: 16px;
-					margin-bottom: 6px;
-				}
-			</style>
+	   return html`
+		   <style>
+			   paper-dropdown-menu {
+				   --iron-icon-width: 0;
+				   display: block;
+				   text-align: right;
+			   }
 
-			<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}
-				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>
-					<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)}
-					></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)}
-					></cosmoz-datetime-input>
-				</div>
-			</paper-dropdown-menu>
-		`;
+			   .dropdown-content h3 {
+				   font-weight: 500;
+				   font-size: 13px;
+				   margin: 0;
+				   font-family: var(--cosmoz-input-font-family, var(--paper-font-subhead_-_font-family, 'Inter', sans-serif));
+			   }
+
+			   .dropdown-content {
+				   padding: 10px 10px 10px 10px;
+				   min-width: 120px;
+				   text-align: left;
+				   background: var(--cosmoz-omnitable-amount-input-background, #ffffff);
+				   border-radius: 6px;
+				   backdrop-filter: blur(16px) saturate(180%);
+				   -webkit-backdrop-filter: blur(16px) saturate(180%);
+				   box-shadow: 0 4px 24px 0 rgba(0,0,0,0.18), 0 1.5px 6px 0 rgba(0,0,0,0.1);
+			   }
+
+			   cosmoz-datetime-input {
+				   background: var(--cosmoz-omnitable-amount-input-background, #ffffff);
+				   border-radius: 6px;
+				   border: 1px solid #d1d1d6;
+				   box-shadow: 0 1px 2px 0 rgba(60,60,60,0.04);
+				   padding: 2px 8px;
+				   margin-bottom: 6px;
+				   min-height: 28px;
+				   transition: border-color 0.2s, box-shadow 0.2s;
+			   }
+
+			   cosmoz-datetime-input:focus-within {
+				   border-color: var(--cz-accent-color, #007aff);
+				   box-shadow: 0 0 0 1px rgba(0,122,255,0.15);
+				   background: var(--cosmoz-omnitable-amount-input-background, #ffffff);
+			   }
+		   </style>
+
+		   <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}
+			   horizontal-align="right"
+			   ?opened=${this.headerFocused}
+			   @opened-changed=${(event) =>
+				   this.set('headerFocused', event.detail.value)}
+		   >
+			   <div class="dropdown-content" slot="dropdown-content">
+				   <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)}
+				   ></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)}
+				   ></cosmoz-datetime-input>
+			   </div>
+		   </paper-dropdown-menu>
+	   `;
 	}
 
 	_toInputString(value) {

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

@@ -44,11 +44,41 @@ class NumberRangeInput extends rangeInputMixin(
 					display: block;
 					text-align: right;
 				}
-				.dropdown-content {
-					padding: 15px;
-					min-width: 100px;
-					text-align: left;
+
+			   .dropdown-content h3 {
+					font-weight: 500;
+					font-size: 13px;
+					margin: 0;
+					font-family: var(--cosmoz-input-font-family, var(--paper-font-subhead_-_font-family, 'Inter', sans-serif));
 				}
+
+			   .dropdown-content {
+				   padding: 10px 10px 10px 10px;
+				   min-width: 120px;
+				   text-align: left;
+				   background: var(--cosmoz-omnitable-amount-input-background, #ffffff);
+				   border-radius: 6px;
+				   backdrop-filter: blur(16px) saturate(180%);
+				   -webkit-backdrop-filter: blur(16px) saturate(180%);
+				   box-shadow: 0 4px 24px 0 rgba(0,0,0,0.18), 0 1.5px 6px 0 rgba(0,0,0,0.1);
+			   }
+
+			   cosmoz-input[type="number"] {
+				   background: var(--cosmoz-omnitable-amount-input-background, #ffffff);
+				   border-radius: 6px;
+				   border: 1px solid #d1d1d6;
+				   box-shadow: 0 1px 2px 0 rgba(60,60,60,0.04);
+				   padding: 2px 8px;
+				   margin-bottom: 6px;
+				   min-height: 28px;
+				   transition: border-color 0.2s, box-shadow 0.2s;
+			   }
+
+			   cosmoz-input[type="number"]:focus-within {
+				   border-color: var(--cz-accent-color, #007aff);
+				   box-shadow: 0 0 0 1px rgba(0,122,255,0.15);
+				   background: var(--cosmoz-omnitable-amount-input-background, #ffffff);
+			   }
 			</style>
 
 			<cosmoz-clear-button

package/lib/render-header.js

@@ -2,8 +2,8 @@ import { html } from 'lit-html';
 import { when } from 'lit-html/directives/when.js';
 
 export const renderHeader = ({
-    allSelected,
-    onAllCheckboxChange,
+	allSelected,
+	onAllCheckboxChange,
 	sortAndGroup,
 	dataIsValid,
 	data,
@@ -12,28 +12,29 @@ export const renderHeader = ({
 	groupOnColumn,
 	setFilterState,
 	settingsConfig,
-	hideSelectAll
-}) => {
-	return html` <sort-and-group-provider .value=${sortAndGroup}>
+	hideSelectAll,
+}) =>
+	html`<sort-and-group-provider .value=${sortAndGroup}>
 		<div class="header" id="header">
 			${when(
 				!hideSelectAll,
-				() => html`<input
-					class="checkbox all"
-					type="checkbox"
-					.checked=${allSelected}
-					@input=${onAllCheckboxChange}
-					?disabled=${!dataIsValid}
-					part="all"
-				/>`
+				() =>
+					html`<input
+						class="checkbox all"
+						type="checkbox"
+						.checked=${allSelected}
+						@input=${onAllCheckboxChange}
+						?disabled=${!dataIsValid}
+						part="all"
+					/>`,
 			)}
 			${when(
 				hideSelectAll,
-				() => html`
-					<cosmoz-omnitable-settings
+				() =>
+					html` <cosmoz-omnitable-settings
 						.newLayout="${true}"
 						.config=${settingsConfig}
-					></cosmoz-omnitable-settings>`
+					></cosmoz-omnitable-settings>`,
 			)}
 
 			<cosmoz-omnitable-header-row
@@ -47,4 +48,3 @@ export const renderHeader = ({
 			></cosmoz-omnitable-header-row>
 		</div>
 	</sort-and-group-provider>`;
-};

package/lib/render-list.js

@@ -1,24 +1,28 @@
-/* eslint-disable max-lines-per-function */
+import '../cosmoz-omnitable-skeleton.js';
+
 import { _ } from '@neovici/cosmoz-i18next';
 import { html } from 'lit-html';
 import { when } from 'lit-html/directives/when.js';
 
-export const renderList = ({
-	processedItems,
-	dataIsValid,
-	filterIsTooStrict,
-	loading,
-	displayEmptyGroups,
-	compareItemsFn,
-	setSelectedItems,
-	renderItem,
-	renderGroup,
-	error,
-}) => {
-	return html` ${when(
-			!dataIsValid && !error,
+export const renderList = (header, list) => {
+	const { settingsConfig } = header,
+		{
+			processedItems,
+			dataIsValid,
+			filterIsTooStrict,
+			loading,
+			displayEmptyGroups,
+			compareItemsFn,
+			setSelectedItems,
+			renderItem,
+			renderGroup,
+			error,
+		} = list;
+
+	return html`${when(
+			!loading && !dataIsValid && !error,
 			() =>
-				html` <div class="tableContent-empty">
+				html`<div class="tableContent-empty">
 					<slot name="empty-set-message">
 						<iron-icon icon="icons:announcement"></iron-icon>
 						<div class="tableContent-empty-message">
@@ -31,7 +35,7 @@ export const renderList = ({
 		${when(
 			filterIsTooStrict,
 			() =>
-				html` <div class="tableContent-empty">
+				html`<div class="tableContent-empty">
 					<iron-icon icon="icons:announcement"></iron-icon>
 					<div>
 						<h3>${_('Filter too strict')}</h3>
@@ -42,17 +46,16 @@ export const renderList = ({
 		${when(
 			loading,
 			() =>
-				html` <div class="tableContent-empty overlay">
-					<paper-spinner-lite active></paper-spinner-lite>
-					<div>
-						<h3>${_('Data set is updating')}</h3>
-					</div>
+				html`<div class="tableContent-empty overlay">
+					<cosmoz-omnitable-skeleton
+						.settingsConfig=${settingsConfig}
+					></cosmoz-omnitable-skeleton>
 				</div>`,
 		)}
 		${when(
 			error,
 			() =>
-				html` <div class="tableContent-empty overlay">
+				html`<div class="tableContent-empty overlay">
 					<iron-icon icon="icons:error"></iron-icon>
 					<div class="tableContent-empty-message">
 						<h3>${_('Error loading data')}</h3>
@@ -63,15 +66,15 @@ export const renderList = ({
 		<div class="tableContent-scroller" id="scroller" part="scroller">
 			<cosmoz-grouped-list
 				id="groupedList"
-				.data="${processedItems}"
-				@selected-items-changed="${(event) =>
-					setSelectedItems(event.detail.value)}"
-				.displayEmptyGroups="${
+				.data=${processedItems}
+				@selected-items-changed=${(event) =>
+					setSelectedItems(event.detail.value)}
+				.displayEmptyGroups=${
 					displayEmptyGroups /* TODO: check if still works */
-				}"
-				.compareItemsFn="${compareItemsFn}"
-				.renderItem="${renderItem}"
-				.renderGroup="${renderGroup}"
+				}
+				.compareItemsFn=${compareItemsFn}
+				.renderItem=${renderItem}
+				.renderGroup=${renderGroup}
 			></cosmoz-grouped-list>
 			<slot name="extraContent"></slot>
 		</div>`;

package/lib/settings/style.css.js

@@ -12,11 +12,10 @@ export default css`
 	}
 
 	.headline {
-		box-shadow:
-			inset 0px -1px 0px rgba(0, 0, 0, 0.15),
-			inset 0px 1px 0px rgba(0, 0, 0, 0.15);
 		font-weight: 500;
-		font-size: 16px;
+		font-size: 13px;
+		color: var(--cosmoz-omnitable-settings-color, #101010);
+		text-transform: uppercase;
 		line-height: 0.95;
 		padding: 10px 14px;
 		display: flex;
@@ -34,6 +33,9 @@ export default css`
 		overflow-y: auto;
 		scrollbar-width: 2px;
 		scrollbar-gutter: stable;
+		text-transform: uppercase;
+		font-size: 12px;
+		color: var(--cosmoz-omnitable-settings-color, #101010);
 	}
 	.contents::-webkit-scrollbar {
 		width: 2px;
@@ -48,8 +50,9 @@ export default css`
 
 	.heading {
 		box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.15);
-		font-weight: 500;
-		font-size: 14px;
+		font-weight: 400;
+		font-size: 13px;
+		color: var(--cosmoz-omnitable-settings-color, #101010);
 		line-height: 0.95;
 		padding: 14px;
 		display: flex;
@@ -77,7 +80,7 @@ export default css`
 	.item {
 		display: flex;
 		align-items: center;
-		background: white;
+		background: var(--cosmoz-omnitable-settings-item-bg-color, #fff);
 	}
 	.item.drag {
 		opacity: 0.6;
@@ -139,7 +142,6 @@ export default css`
 	.reset {
 		background: transparent;
 		color: inherit;
-		text-decoration: underline;
 	}
 	/* sortgroups */
 	.sgs {
@@ -153,16 +155,17 @@ export default css`
 	.sg {
 		color: inherit;
 		border: 1px solid rgba(0, 0, 0, 0.2);
-		border-radius: 2px;
-		font-size: 13px;
+		border-radius: 6px;
+		font-size: 12px;
+		text-transform: uppercase;
 		line-height: 1;
-		text-align: center;
+		text-align: left;
 		padding: 6px 12px;
 		background: transparent;
 		cursor: pointer;
 		display: flex;
-		align-items: center;
-		justify-content: center;
+		align-items: left;
+		justify-content: auto;
 	}
 	.sg span {
 		overflow: hidden;

package/lib/use-header.js

@@ -1,4 +1,3 @@
-/* eslint-disable max-lines-per-function */
 import { useEffect, useMemo } from '@pionjs/pion';
 
 export const useHeader = ({
@@ -31,9 +30,9 @@ export const useHeader = ({
 					...settings.columns.filter((s) => s.disabled),
 				].some(
 					(column) =>
-						column && Object.keys(filterFunctions).includes(column.name)
+						column && Object.keys(filterFunctions).includes(column.name),
 				),
-			[filterFunctions, settings, collapsedColumns]
+			[filterFunctions, settings, collapsedColumns],
 		),
 		settingsConfig = useMemo(
 			() => ({
@@ -42,7 +41,7 @@ export const useHeader = ({
 				badge: hasHiddenFilter,
 				filters,
 			}),
-			[settingS, collapsedColumns, hasHiddenFilter, filters]
+			[settingS, collapsedColumns, hasHiddenFilter, filters],
 		);
 
 	useEffect(() => {
@@ -51,9 +50,9 @@ export const useHeader = ({
 				requestAnimationFrame(() => {
 					host.style.setProperty(
 						'--ot-height',
-						entries[0]?.contentRect.height + 'px'
+						entries[0]?.contentRect.height + 'px',
 					);
-				})
+				}),
 			);
 		observer.observe(el);
 		return () => observer.unobserve(el);

package/lib/use-list.js

@@ -1,4 +1,3 @@
-/* eslint-disable max-lines-per-function */
 import { html, useCallback, useEffect, useMemo, useRef } from '@pionjs/pion';
 import { when } from 'lit-html/directives/when.js';
 import { isEmpty } from '@neovici/cosmoz-utils/template';

package/lib/use-omnitable.js

@@ -1,12 +1,12 @@
 import { useState } from '@pionjs/pion';
-import { useProcessedItems } from './use-processed-items';
-import { useFastLayout } from './use-fast-layout';
 import { useSettings } from './settings';
-import { useSortAndGroupOptions } from './use-sort-and-group-options';
-import { usePublicInterface } from './use-public-interface';
+import { useFastLayout } from './use-fast-layout';
+import { useFooter } from './use-footer';
 import { useHeader } from './use-header';
 import { useList } from './use-list';
-import { useFooter } from './use-footer';
+import { useProcessedItems } from './use-processed-items';
+import { usePublicInterface } from './use-public-interface';
+import { useSortAndGroupOptions } from './use-sort-and-group-options';
 
 export const useOmnitable = (host) => {
 	const {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neovici/cosmoz-omnitable",
-  "version": "14.5.0",
+  "version": "14.6.1",
   "description": "[![Build Status](https://travis-ci.org/Neovici/cosmoz-omnitable.svg?branch=master)](https://travis-ci.org/Neovici/cosmoz-omnitable)",
   "keywords": [
     "web-components"