@neovici/cosmoz-omnitable 14.12.1 → 14.12.2

package/grouped-list/use-weak-state.js

@@ -10,12 +10,12 @@ export const useWeakState = () => {
 					Object.assign(itemState, callFn(newItemState, itemState));
 					return [state];
 				}),
-			[]
+			[],
 		);
 
 	return {
 		setItemState,
 		state: wrapper[0],
-		signal: wrapper
+		signal: wrapper,
 	};
 };

package/grouped-list/utils.js

@@ -1,5 +1,5 @@
 const symbols = {
-		group: Symbol('group')
+		group: Symbol('group'),
 	},
 	getItemState = (item, itemsState) => {
 		if (!itemsState.has(item)) {
@@ -8,22 +8,24 @@ const symbols = {
 
 		return itemsState.get(item);
 	},
-	isExpanded = (item, itemsState) => Boolean(getItemState(item, itemsState).expanded),
-	isFolded = (group, itemsState) => Boolean(getItemState(group, itemsState).folded),
-	isGroup = item => item ? item.items instanceof Array : false,
+	isExpanded = (item, itemsState) =>
+		Boolean(getItemState(item, itemsState).expanded),
+	isFolded = (group, itemsState) =>
+		Boolean(getItemState(group, itemsState).folded),
+	isGroup = (item) => (item ? item.items instanceof Array : false),
 	/**
 	 * Asserts that data is either all items or all groups, never mixed.
 	 * @param	 {Array} data the data
 	 * @return {void}
 	 */
-	_assertDataIsHomogeneous = data => {
+	_assertDataIsHomogeneous = (data) => {
 		if (!Array.isArray(data) || data.length === 0) {
 			return;
 		}
 
 		const firstItemIsAGroup = Array.isArray(data[0].items),
 			isHomogeneous = data.every(
-				group => Array.isArray(group.items) === firstItemIsAGroup
+				(group) => Array.isArray(group.items) === firstItemIsAGroup,
 			);
 
 		if (!isHomogeneous) {
@@ -58,7 +60,7 @@ const symbols = {
 				}
 				return acc.concat(
 					item,
-					item.items.map(i => Object.assign(i, { [symbols.group]: item }))
+					item.items.map((i) => Object.assign(i, { [symbols.group]: item })),
 				);
 			}
 
@@ -72,7 +74,7 @@ const symbols = {
 
 		return flatData;
 	},
-	callFn = (fn, ...args) => typeof fn === 'function' ? fn(...args) : fn,
+	callFn = (fn, ...args) => (typeof fn === 'function' ? fn(...args) : fn),
 	byReference = (a, b) => a === b;
 
 export {
@@ -83,5 +85,5 @@ export {
 	isFolded,
 	isGroup,
 	callFn,
-	byReference
+	byReference,
 };

package/lib/compute-layout.js

@@ -2,7 +2,8 @@ import { layout } from './layout';
 import { findLastIndex } from './utils';
 
 const _toCss = (layout, config) => {
-	const lastVisibleIndex = findLastIndex(layout,
+	const lastVisibleIndex = findLastIndex(
+			layout,
 			(width) => width != null && width > 0,
 		),
 		generateCellCSS = (itemName, width) =>

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

@@ -46,103 +46,106 @@ class AmountRangeInput extends rangeInputMixin(
 			this._onDropdownOpenedChanged(event);
 		};
 
-	   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>
-	   `;
+		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-input-mixin.js

@@ -8,7 +8,9 @@ import { rangeInputMixin } from './cosmoz-omnitable-range-input-mixin';
 * @param {class} base The base class
 * @returns {class} The base class with the mixin applied
 */
-export const dateInputMixin = base => // eslint-disable-line max-lines-per-function
+export const dateInputMixin = (
+	base, // eslint-disable-line max-lines-per-function
+) =>
 	/**
 	 * @polymer
 	 * @mixinClass
@@ -18,23 +20,23 @@ export const dateInputMixin = base => // eslint-disable-line max-lines-per-funct
 			return {
 				max: {
 					type: Date,
-					value: null
+					value: null,
 				},
 
 				min: {
 					type: Date,
-					value: null
+					value: null,
 				},
 
 				_filterText: {
 					type: String,
-					computed: '_computeFilterText(filter.*, formatter)'
+					computed: '_computeFilterText(filter.*, formatter)',
 				},
 
 				formatter: {
 					type: Object,
-					computed: '_computeFormatter(locale)'
-				}
+					computed: '_computeFormatter(locale)',
+				},
 			};
 		}
 
@@ -46,7 +48,8 @@ export const dateInputMixin = base => // eslint-disable-line max-lines-per-funct
 		 * @param	 {Function} limitFunc	 Function used to limit the date (Math.min|Math.max)
 		 * @returns {Date|void} Value converted to date optionaly limitated
 		 */
-		toDate(value, limit, limitFunc) { // eslint-disable-line max-statements
+		toDate(value, limit, limitFunc) {
+			// eslint-disable-line max-statements
 			if (value == null || value === '') {
 				return;
 			}
@@ -120,10 +123,10 @@ export const dateInputMixin = base => // eslint-disable-line max-lines-per-funct
 		}
 
 		/**
-		* Computes the local timezone and adds it to a local ISO string
-		* @param	{String} localISOString an ISO date string, without timezone info
-		* @return {String}								an ISO date string, with timezone info
-		*/
+		 * Computes the local timezone and adds it to a local ISO string
+		 * @param	{String} localISOString an ISO date string, without timezone info
+		 * @return {String}								an ISO date string, with timezone info
+		 */
 		getAbsoluteISOString(localISOString) {
 			// Most browsers use local timezone when no timezone is specified
 			// but Safari uses UTC, so we set it implicitly
@@ -141,7 +144,9 @@ export const dateInputMixin = base => // eslint-disable-line max-lines-per-funct
 		 */
 		_getTimezoneString(localISOString) {
 			const off = -new Date(localISOString).getTimezoneOffset() / 60;
-			return (off < 0 ? '-' : '+') + ['0', Math.abs(off)].join('').substr(-2) + ':00';
+			return (
+				(off < 0 ? '-' : '+') + ['0', Math.abs(off)].join('').substr(-2) + ':00'
+			);
 		}
 
 		renderValue(value, formatter = this.formatter) {
@@ -174,7 +179,12 @@ export const dateInputMixin = base => // eslint-disable-line max-lines-per-funct
 				oldValue = this.get(this.valuePath, item),
 				date = this._fromInputString(value);
 			this.set(this.valuePath, date, item);
-			this._fireItemChangeEvent(item, this.valuePath, oldValue, this.renderValue.bind(this));
+			this._fireItemChangeEvent(
+				item,
+				this.valuePath,
+				oldValue,
+				this.renderValue.bind(this),
+			);
 		}
 
 		_toLocalISOString(date) {

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

@@ -11,88 +11,95 @@ 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;
-				   text-align: right;
-			   }
+		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 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);
-			   }
+				.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'] {
+					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>
-	   `;
+				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) {