@neovici/cosmoz-omnitable 14.12.1 → 14.12.2

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

@@ -10,89 +10,96 @@ 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;
-				   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-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 {
+					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-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>
-	   `;
+			<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

@@ -45,40 +45,47 @@ class NumberRangeInput extends rangeInputMixin(
 					text-align: right;
 				}
 
-			   .dropdown-content h3 {
+				.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));
+					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="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'] {
+					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);
-			   }
+				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/cosmoz-omnitable-range-input-mixin.js

@@ -108,7 +108,6 @@ export const rangeInputMixin = (
 			};
 		}
 
-
 		static get observers() {
 			return [
 				'_filterInputChanged(_filterInput.*, autoupdate)',
@@ -477,14 +476,12 @@ export const rangeInputMixin = (
 
 		_updateLimits(limits, headerFocused) {
 			if (!limits) return;
-			Promise.resolve(invoke(limits, { active: headerFocused })).then(
-				(res) => {
-					const {min, max} = res ?? {};
-					Object.assign(this, {
-						...(min != null ? { min } : {}),
-						...(max != null ? { max } : {}),
-					});
-				},
-			);
+			Promise.resolve(invoke(limits, { active: headerFocused })).then((res) => {
+				const { min, max } = res ?? {};
+				Object.assign(this, {
+					...(min != null ? { min } : {}),
+					...(max != null ? { max } : {}),
+				});
+			});
 		}
 	};

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

@@ -6,7 +6,9 @@ import '@neovici/cosmoz-input';
 import { dateInputMixin } from './cosmoz-omnitable-date-input-mixin';
 import { polymerHauntedRender } from './polymer-haunted-render-mixin';
 
-class TimeRangeInput extends dateInputMixin(polymerHauntedRender(PolymerElement)) {
+class TimeRangeInput extends dateInputMixin(
+	polymerHauntedRender(PolymerElement),
+) {
 	// eslint-disable-next-line max-lines-per-function
 	render() {
 		return html`
@@ -17,31 +19,42 @@ class TimeRangeInput extends dateInputMixin(polymerHauntedRender(PolymerElement)
 				}
 			</style>
 
-			<cosmoz-clear-button @click=${ () => this.resetFilter() } ?visible=${ this.hasFilter() }></cosmoz-clear-button>
+			<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 }
+				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) }>
+				?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>
+				>
+				<div
+					class="dropdown-content"
+					slot="dropdown-content"
+					style="padding: 15px; min-width: 100px;"
+				>
+					<h3 style="margin: 0;">${this.title}</h3>
 					<cosmoz-input
 						type="time"
-						label=${ _('From time') }
-						step=${ this.filterStep }
-						.value=${ this._filterInput.min }
-						@value-changed=${ event => this.set('_filterInput.min', event.detail.value) }
+						label=${_('From time')}
+						step=${this.filterStep}
+						.value=${this._filterInput.min}
+						@value-changed=${(event) =>
+							this.set('_filterInput.min', event.detail.value)}
 					></cosmoz-input>
 					<cosmoz-input
 						type="time"
-						label=${ _('Until time') }
-						step=${ this.filterStep }
-						.value=${ this._filterInput.max }
-						@value-changed=${ event => this.set('_filterInput.max', event.detail.value) }
+						label=${_('Until time')}
+						step=${this.filterStep}
+						.value=${this._filterInput.max}
+						@value-changed=${(event) =>
+							this.set('_filterInput.max', event.detail.value)}
 					></cosmoz-input>
 				</div>
 			</paper-dropdown-menu>
@@ -64,9 +77,10 @@ class TimeRangeInput extends dateInputMixin(polymerHauntedRender(PolymerElement)
 		// Most browsers use local timezone when no timezone is specified
 		// but Safari uses UTC, so we set it implicitly
 		// TODO: Consider removing this when/if Safari handles local timezone correctly
-		const date = typeof value === 'string' && value.length > 3 && value.length <= 9
-			? this.getAbsoluteISOString(this._fixedDate + 'T' + value)
-			: value;
+		const date =
+			typeof value === 'string' && value.length > 3 && value.length <= 9
+				? this.getAbsoluteISOString(this._fixedDate + 'T' + value)
+				: value;
 		return super.toDate(date, limit, limitFunc);
 	}
 
@@ -88,11 +102,15 @@ class TimeRangeInput extends dateInputMixin(polymerHauntedRender(PolymerElement)
 		if (item == null) {
 			return;
 		}
-		let value = this._toInputString(valuePath == null ? item : this.get(valuePath, item));
+		let value = this._toInputString(
+			valuePath == null ? item : this.get(valuePath, item),
+		);
 		if (value == null) {
 			return;
 		}
-		value = this.toValue(this.getAbsoluteISOString(this._fixedDate + 'T' + value));
+		value = this.toValue(
+			this.getAbsoluteISOString(this._fixedDate + 'T' + value),
+		);
 		if (value == null) {
 			return;
 		}
@@ -104,15 +122,22 @@ class TimeRangeInput extends dateInputMixin(polymerHauntedRender(PolymerElement)
 			timeString = input.value,
 			item = e.model.item,
 			oldTime = this.toDate(item.date),
-			newTime = this.toDate(oldTime != null
-				? oldTime.toISOString().slice(0, 10) + 'T' + timeString
-				: timeString),
-			formatFn = value => value;
+			newTime = this.toDate(
+				oldTime != null
+					? oldTime.toISOString().slice(0, 10) + 'T' + timeString
+					: timeString,
+			),
+			formatFn = (value) => value;
 		if (newTime != null) {
 			return;
 		}
 		this.set(this.valuePath, newTime, item);
-		this._fireItemChangeEvent(item, this.valuePath, oldTime, formatFn.bind(this));
+		this._fireItemChangeEvent(
+			item,
+			this.valuePath,
+			oldTime,
+			formatFn.bind(this),
+		);
 	}
 
 	// OVERRIDES
@@ -121,11 +146,10 @@ class TimeRangeInput extends dateInputMixin(polymerHauntedRender(PolymerElement)
 		const timeFormatOption = {
 			hour: 'numeric',
 			minute: 'numeric',
-			second: 'numeric'
+			second: 'numeric',
 		};
 		return new Intl.DateTimeFormat(locale || undefined, timeFormatOption);
 	}
 }
 
-
 customElements.define('cosmoz-omnitable-time-range-input', TimeRangeInput);

package/lib/layout.js

@@ -1,16 +1,12 @@
-const finite = num => Number.isFinite(num) ? num : 0;
-export const
-	// eslint-disable-next-line max-lines-per-function,  max-statements
+const finite = (num) => (Number.isFinite(num) ? num : 0);
+export const // eslint-disable-next-line max-lines-per-function,  max-statements
 	layout = (columns, container) => {
 		const result = [];
 
 		// eslint-disable-next-line one-var
 		let [widthSum, lots] = columns.reduce(
-				([widthSum, lots], { width, flex }) => [
-					widthSum + width,
-					lots + flex
-				],
-				[0, 0]
+				([widthSum, lots], { width, flex }) => [widthSum + width, lots + flex],
+				[0, 0],
 			),
 			freeRealEstate = container - widthSum,
 			lotSize = finite(freeRealEstate / lots),
@@ -21,9 +17,10 @@ export const
 		// first pass: apply and drop lots with minWidth or flex 0
 		for (let i = 0; i < columns.length; i++) {
 			const { width, minWidth, flex } = columns[i],
-				adjustment = freeRealEstate >= 0
-					? lotSize * flex
-					: width * freeRealEstate / widthSum;
+				adjustment =
+					freeRealEstate >= 0
+						? lotSize * flex
+						: (width * freeRealEstate) / widthSum;
 
 			if (minWidth > width + adjustment) {
 				droppedWidth += width;
@@ -53,9 +50,10 @@ export const
 			}
 
 			const { width, flex } = columns[i],
-				adjustment = freeRealEstate >= 0
-					? lotSize * flex
-					: width * freeRealEstate / widthSum;
+				adjustment =
+					freeRealEstate >= 0
+						? lotSize * flex
+						: (width * freeRealEstate) / widthSum;
 
 			result[i] = width + adjustment;
 		}

package/lib/polymer-haunted-render-mixin.js

@@ -1,18 +1,19 @@
 import { html } from '@polymer/polymer';
 import { render } from 'lit-html';
 
-export const polymerHauntedRender = base => class extends base {
-	static get template() {
-		return html`<div id="output" style="position:relative;"></div>`;
-	}
+export const polymerHauntedRender = (base) =>
+	class extends base {
+		static get template() {
+			return html`<div id="output" style="position:relative;"></div>`;
+		}
 
-	connectedCallback() {
-		super.connectedCallback();
-		render(this.render(), this.$.output);
-	}
+		connectedCallback() {
+			super.connectedCallback();
+			render(this.render(), this.$.output);
+		}
 
-	_propertiesChanged(currentProps, changedProps, oldProps) {
-		super._propertiesChanged(currentProps, changedProps, oldProps);
-		requestAnimationFrame(() => render(this.render(), this.$.output));
-	}
-};
+		_propertiesChanged(currentProps, changedProps, oldProps) {
+			super._propertiesChanged(currentProps, changedProps, oldProps);
+			requestAnimationFrame(() => render(this.render(), this.$.output));
+		}
+	};

package/lib/save-as-csv-action.js

@@ -1,32 +1,36 @@
 import { saveAs } from 'file-saver-es';
 
-const
-	makeCsvField = str => {
-		const result = str.replace(/"/gu, '""');
-		if (result.search(/("|,|\n)/gu) >= 0) {
-			return '"' + result + '"';
-		}
-		return str;
-	};
+const makeCsvField = (str) => {
+	const result = str.replace(/"/gu, '""');
+	if (result.search(/("|,|\n)/gu) >= 0) {
+		return '"' + result + '"';
+	}
+	return str;
+};
 
-export const
-	saveAsCsvAction = (columns, selectedItems, csvFilename) => {
-		const separator = ';',
-			lf = '\n',
-			header = columns.map(col => makeCsvField(col.title)).join(separator) + lf,
-			rows = selectedItems.map(item => {
-				return columns.map(column => {
-					const cell = column.getString(column, item);
-					if (cell === undefined || cell === null) {
-						return '';
-					}
-					return makeCsvField(String(cell));
-				}).join(separator) + lf;
-			});
+export const saveAsCsvAction = (columns, selectedItems, csvFilename) => {
+	const separator = ';',
+		lf = '\n',
+		header = columns.map((col) => makeCsvField(col.title)).join(separator) + lf,
+		rows = selectedItems.map((item) => {
+			return (
+				columns
+					.map((column) => {
+						const cell = column.getString(column, item);
+						if (cell === undefined || cell === null) {
+							return '';
+						}
+						return makeCsvField(String(cell));
+					})
+					.join(separator) + lf
+			);
+		});
 
-		rows.unshift(header);
+	rows.unshift(header);
 
-		saveAs(new File(rows, csvFilename, {
-			type: 'text/csv;charset=utf-8'
-		}));
-	};
+	saveAs(
+		new File(rows, csvFilename, {
+			type: 'text/csv;charset=utf-8',
+		}),
+	);
+};

package/lib/save-as-xlsx-action.js

@@ -1,25 +1,27 @@
 import { saveAs } from 'file-saver-es';
 import { NullXlsx } from '@neovici/nullxlsx';
 
-export const
-	prepareXlsxData = (columns, selectedItems) => {
-		const headers = columns.map(col => col.title),
-			data = selectedItems.map(item =>
-				columns.map(column => {
+export const prepareXlsxData = (columns, selectedItems) => {
+		const headers = columns.map((col) => col.title),
+			data = selectedItems.map((item) =>
+				columns.map((column) => {
 					const value = column.toXlsxValue(column, item);
 					return value == null ? '' : value;
-				})
+				}),
 			);
 
 		data.unshift(headers);
 		return data;
 	},
-
 	saveAsXlsxAction = (columns, selectedItems, xlsxFilename, xlsxSheetname) => {
 		const data = prepareXlsxData(columns, selectedItems),
-			xlsx = new NullXlsx(xlsxFilename).addSheetFromData(data, xlsxSheetname).generate();
+			xlsx = new NullXlsx(xlsxFilename)
+				.addSheetFromData(data, xlsxSheetname)
+				.generate();
 
-		saveAs(new File([xlsx], xlsxFilename, {
-			type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
-		}));
+		saveAs(
+			new File([xlsx], xlsxFilename, {
+				type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+			}),
+		);
 	};

package/lib/settings/cosmoz-omnitable-sort-group.js

@@ -8,7 +8,7 @@ export const render = ({ column, on, descending, setOn, setDescending }) => {
 		class="sg"
 		title=${title}
 		data-on=${ifDefined(
-			(name === on && (descending ? 'desc' : 'asc')) || undefined
+			(name === on && (descending ? 'desc' : 'asc')) || undefined,
 		)}
 		@click=${(e) => {
 			const on = e.currentTarget?.dataset.on;

package/lib/settings/drivers/context.js

@@ -11,6 +11,6 @@ export const DriverContext = createContext(local),
 
 		customElements.define(
 			'omnitable-settings-driver-provider',
-			DriverContext.Provider
+			DriverContext.Provider,
 		);
 	};

package/lib/use-hash-state.js

@@ -49,7 +49,7 @@ export const useHashState = (
 			? [multiLink, multiParse]
 			: [singleLink, singleParse],
 		[state, _setState] = useState(() =>
-			param == null ? initial : parseHash(param + suffix, read) ?? initial,
+			param == null ? initial : (parseHash(param + suffix, read) ?? initial),
 		),
 		setState = useCallback(
 			(state) =>