Merge pull request #630 from Neovici/title-align-to-right-and-font-va…

…riant-numeric

fix(lib): title align to the right + use font-variant-numeric

cosmoz-omnitable-column-date.js

@@ -1,12 +1,10 @@
 /* eslint-disable no-return-assign */
-import '@neovici/cosmoz-input';
+import { html } from 'lit-html';
+import { PolymerElement } from '@polymer/polymer/polymer-element';
 import '@polymer/paper-dropdown-menu/paper-dropdown-menu';
+import '@neovici/cosmoz-input';
 
 import './ui-helpers/cosmoz-clear-button';
-
-import { PolymerElement } from '@polymer/polymer/polymer-element';
-import { html } from 'lit-html';
-
 import { columnMixin } from './cosmoz-omnitable-column-mixin';
 import './lib/cosmoz-omnitable-date-range-input';
 import { defaultComputeSource } from './lib/utils-data';
@@ -95,13 +93,14 @@ class OmnitableColumnDate extends columnMixin(PolymerElement) {
 	}
 
 	renderCell(column, { item }) {
-		return getString(column, item);
+		return html`<div class="omnitable-cell-date">
+			${getString(column, item)}
+		</div>`;
 	}
 
 	renderEditCell(column, { item }, onItemChange) {
 		const onChange = (event) =>
 			onItemChange(fromInputString(event.target.value));
-
 		return html`<cosmoz-input
 			no-label-float
 			type="date"

cosmoz-omnitable-styles.js

@@ -344,6 +344,7 @@ export default css`
 
 	.tableContent .itemRow-cell paper-dropdown-menu {
 		margin-top: -20px;
+
 	}
 
 	cosmoz-omnitable-item-expand[expanded] {
@@ -437,7 +438,7 @@ export default css`
 		overflow: initial;
 	}
 
-	.omnitable-cell-number {
+	.omnitable-cell-number, .omnitable-cell-date {
 		font-variant-numeric: tabular-nums;
 	}
 

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

@@ -1,7 +1,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 { html } from 'lit-html';
+import { _ } from '@neovici/cosmoz-i18next';
 import '@neovici/cosmoz-input';
 import { rangeInputMixin } from './cosmoz-omnitable-range-input-mixin';
 import { polymerHauntedRender } from './polymer-haunted-render-mixin';
@@ -42,6 +42,12 @@ class NumberRangeInput extends rangeInputMixin(
 				paper-dropdown-menu {
 					--iron-icon-width: 0;
 					display: block;
+					text-align: right;
+				}
+				.dropdown-content {
+					padding: 15px;
+					min-width: 100px;
+					text-align: left;
 				}
 			</style>
 
@@ -58,11 +64,7 @@ class NumberRangeInput extends rangeInputMixin(
 				?opened=${this.headerFocused}
 				@opened-changed=${onOpenedChanged}
 			>
-				<div
-					class="dropdown-content"
-					slot="dropdown-content"
-					style="padding: 15px; min-width: 100px;"
-				>
+				<div class="dropdown-content" slot="dropdown-content">
 					<h3 style="margin: 0;">${this.title}</h3>
 					<cosmoz-input
 						class=${this._fromClasses}